/* ON AIR Cloud 設計系統：官網與控制台共用。
   預設是深色「控制室」；<html data-theme="paper"> 是米白暖色「店家」風格（給傳統產業的客戶看）。
   元件只准用變數，不准寫死顏色——這樣換主題才不會壞。 */

:root {
  --bg: #05070c;
  --bg-2: #090d15;
  --panel: #0d121e;
  --panel-2: #121929;
  --panel-3: #18213a;
  --line: rgba(150, 175, 255, .10);
  --line-2: rgba(150, 175, 255, .20);

  --text: #e8edfb;
  --muted: #8b95b0;
  --faint: #566079;
  --body: #b3bddb;          /* 內文次要色 */

  --live: #ff3b4e;
  --amber: #ffb547;
  --cyan: #46d9ff;
  --violet: #a894ff;
  --lime: #7dffa6;
  --warn: #ff8a4c;

  --amber-soft: color-mix(in srgb, var(--amber) 14%, transparent);
  --cyan-soft: color-mix(in srgb, var(--cyan) 14%, transparent);
  --violet-soft: color-mix(in srgb, var(--violet) 16%, transparent);
  --live-soft: color-mix(in srgb, var(--live) 14%, transparent);

  --tint-1: rgba(255, 255, 255, .03);
  --tint-2: rgba(255, 255, 255, .06);
  --tint-3: rgba(255, 255, 255, .10);
  --field: rgba(3, 6, 12, .6);
  --wire: rgba(150, 175, 255, .35);
  --badge-bg: #1a2036;
  --primary-bg: linear-gradient(180deg, #f4f7ff, #cfd9f7);
  --primary-bg-hover: linear-gradient(180deg, #fff, #dde6ff);
  --primary-fg: #0a0f1d;
  --primary-glow: rgba(120, 160, 255, .55);
  --on-solid: #fff;
  --seg-on-bg: #e9eefc;
  --seg-on-fg: #0a0f1d;
  --glow: .55;               /* 發光強度：深色 .55、淺色 0 */
  --shadow: 0 24px 60px -24px rgba(0, 0, 0, .75);

  --radius: 16px;
  --radius-sm: 10px;

  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  --sans: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, -apple-system, sans-serif;
  --serif: "Noto Serif TC", "Songti TC", "PMingLiU", "Source Han Serif TC", serif;
}

/* ── 米白暖色（店家風）── */
:root[data-theme="paper"] {
  color-scheme: light;
  --bg: #fbf6ee;
  --bg-2: #f4ecdd;
  --panel: #ffffff;
  --panel-2: #fffdf9;
  --panel-3: #f6efe3;
  --line: rgba(70, 48, 24, .13);
  --line-2: rgba(70, 48, 24, .24);

  --text: #2b2118;
  --muted: #6c5f50;
  --faint: #9a8d7c;
  --body: #4f4337;

  --live: #c8382b;           /* 印章朱紅 */
  --amber: #b4701a;
  --cyan: #1b6f8c;
  --violet: #6a4eb2;
  --lime: #1f7a4d;
  --warn: #c0561a;

  --tint-1: rgba(70, 48, 24, .035);
  --tint-2: rgba(70, 48, 24, .07);
  --tint-3: rgba(70, 48, 24, .12);
  --field: #fffaf1;
  --wire: rgba(70, 48, 24, .30);
  --badge-bg: #efe6d6;
  --primary-bg: #2b2118;
  --primary-bg-hover: #43342a;
  --primary-fg: #fffaf1;
  --primary-glow: rgba(43, 33, 24, .35);
  --on-solid: #fff;
  --seg-on-bg: #2b2118;
  --seg-on-fg: #fffaf1;
  --glow: 0;
  --shadow: 0 18px 40px -22px rgba(70, 48, 24, .35);
}

* { box-sizing: border-box; }
html { color-scheme: dark; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 16px/1.65 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: color-mix(in srgb, var(--cyan) 30%, transparent); }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 6px; }

/* 色相對照：節點、標籤用 */
[data-hue="amber"]  { --h: var(--amber); }
[data-hue="cyan"]   { --h: var(--cyan); }
[data-hue="violet"] { --h: var(--violet); }
[data-hue] { --hs: color-mix(in srgb, var(--h) 14%, transparent); }

.grid-bg {
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 30%, transparent 78%);
}

.mono { font-family: var(--mono); letter-spacing: .02em; }
.eyebrow {
  font: 600 12px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
  display: inline-flex; align-items: center; gap: 10px;
}
.live-dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--live); display: inline-block;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--live) 60%, transparent); animation: live-pulse 1.8s ease-out infinite;
}
@keyframes live-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--live) 55%, transparent); }
  70% { box-shadow: 0 0 0 10px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* 按鈕 */
.btn {
  --c: var(--text);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; white-space: nowrap;
  padding: 12px 20px; border-radius: 999px; border: 1px solid var(--line-2);
  background: var(--tint-1); color: var(--c); font-weight: 600; letter-spacing: .01em;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.btn:hover { transform: translateY(-1px); background: var(--tint-2); border-color: var(--muted); }
.btn:active { transform: translateY(0); }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--primary-bg); color: var(--primary-fg); border-color: transparent; box-shadow: 0 10px 30px -10px var(--primary-glow); }
.btn-primary:hover { background: var(--primary-bg-hover); box-shadow: 0 14px 38px -10px var(--primary-glow); }
.btn-live { background: var(--live); color: var(--on-solid); border-color: transparent; box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--live) 80%, transparent); }
.btn-live:hover { background: color-mix(in srgb, var(--live) 88%, white); }
.btn-ghost { background: transparent; }
.btn-sm { padding: 8px 14px; font-size: 14px; }

/* 面板 */
.panel {
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.panel-title { font: 600 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }

/* 標籤 */
.pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  font: 600 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid var(--line-2); color: var(--muted); background: var(--tint-1); white-space: nowrap;
}
.pill.ok { color: var(--lime); border-color: color-mix(in srgb, var(--lime) 40%, transparent); background: color-mix(in srgb, var(--lime) 10%, transparent); }
.pill.warn { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 45%, transparent); background: color-mix(in srgb, var(--amber) 13%, transparent); }
.pill.bad { color: var(--live); border-color: color-mix(in srgb, var(--live) 50%, transparent); background: color-mix(in srgb, var(--live) 13%, transparent); }
.pill.cyan { color: var(--cyan); border-color: color-mix(in srgb, var(--cyan) 45%, transparent); background: color-mix(in srgb, var(--cyan) 13%, transparent); }
.pill.violet { color: var(--violet); border-color: color-mix(in srgb, var(--violet) 45%, transparent); background: color-mix(in srgb, var(--violet) 14%, transparent); }

/* 表單 */
.field { display: grid; gap: 6px; }
.field > span { font: 600 12px/1 var(--mono); letter-spacing: .1em; color: var(--muted); text-transform: uppercase; }
.input {
  width: 100%; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line-2);
  background: var(--field); outline: none; transition: border-color .15s, box-shadow .15s;
}
.input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyan) 18%, transparent); }
.input::placeholder { color: var(--faint); }

/* 進度條 */
.meter { height: 8px; border-radius: 99px; background: var(--tint-2); overflow: hidden; }
.meter > i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--cyan), var(--violet)); transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.meter.hot > i { background: linear-gradient(90deg, var(--amber), var(--live)); }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}