/* ═══════════════════════════════════════════════════════════════
   AI 多媒體平台 — 設計系統（所有頁面共用的唯一來源）

   為什麼需要這份檔案：六個頁面原本各寫一套 <style>，同一個 --navy
   在 index.html 是 #1F4E79、其他五頁是 #243A52，gold/ink/mut/line/paper
   全部都有兩個版本。頁面看起來「差不多但又不太一樣」就是這個原因。

   三層 token：原始色（primitive）→ 語意（semantic）→ 元件（component）。
   頁面只能用語意層與元件層，不得直接寫 hex。
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* ── 原始色 ── */
  --p-navy-900:#1B2F45; --p-navy-800:#243A52; --p-navy-700:#2E4A68; --p-navy-100:#E6ECF3;
  --p-gold-700:#8F6A22; --p-gold-600:#A87F2E; --p-gold-400:#C9A24B; --p-gold-100:#F4ECD8;
  --p-green-700:#2E7D5B; --p-green-100:#E1F1E8;
  --p-red-700:#A4463C;   --p-red-100:#F7E3E0;
  --p-blue-700:#2F6FA8;  --p-blue-100:#E1ECF7;
  --p-amber-700:#B8730F; --p-amber-100:#FBEFD6;
  --p-stone-900:#1F2B38; --p-stone-600:#66707C; --p-stone-400:#9AA3AD;
  --p-stone-200:#E5E1D8; --p-stone-100:#F1EEE6; --p-stone-50:#FAF9F6; --p-white:#fff;

  /* ── 語意 ── */
  --navy:var(--p-navy-800);  --navy-strong:var(--p-navy-900); --navy-soft:var(--p-navy-100);
  --gold:var(--p-gold-600);  --gold-strong:var(--p-gold-700); --gold-soft:var(--p-gold-100);
  --green:var(--p-green-700);--green-soft:var(--p-green-100);
  --red:var(--p-red-700);    --red-soft:var(--p-red-100);
  --blue:var(--p-blue-700);  --blue-soft:var(--p-blue-100);
  --amber:var(--p-amber-700);--amber-soft:var(--p-amber-100);
  --ink:var(--p-stone-900);  --mut:var(--p-stone-600); --faint:var(--p-stone-400);
  --line:var(--p-stone-200); --paper:var(--p-stone-50); --bg:var(--p-stone-100);
  --card:var(--p-white);
  /* 舊名相容：既有頁面仍用得到 */
  --side:var(--p-navy-900); --gold2:var(--p-gold-400);

  /* ── 字體與尺度 ── */
  --sans:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px;
  --sh-sm:0 1px 2px rgba(31,43,56,.06);
  --sh-md:0 2px 8px rgba(31,43,56,.08),0 1px 2px rgba(31,43,56,.04);
  --sh-lg:0 8px 24px rgba(31,43,56,.12);
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px;
  --fs-xs:12.5px; --fs-sm:13.5px; --fs-md:15px; --fs-lg:17px; --fs-xl:22px; --fs-2xl:30px;
  --t-fast:.15s ease;
}

/* ── 基礎 ── */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);line-height:1.6;
  -webkit-font-smoothing:antialiased}
a{color:inherit}
button,input,select{font-family:inherit;font-size:inherit}

/* ── 圖示：inline SVG，currentColor 隨文字色 ──
   統一的圖示系統是那種「看起來很專業」最直接的來源。
   emoji 每個平台長相不同、大小色調不一，這裡一律換成線條圖示。 */
.ic{width:1.05em;height:1.05em;vertical-align:-.18em;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ic-lg{width:1.35em;height:1.35em}

/* ── 頁首 ── */
.app-header{display:flex;align-items:center;gap:var(--sp-4);padding:0 var(--sp-8);height:64px;
  background:var(--navy-strong);color:#fff;border-bottom:3px solid var(--gold)}
.app-header .brand{display:flex;align-items:center;gap:var(--sp-3);text-decoration:none}
.app-header .logo{width:40px;height:40px;border-radius:var(--r-md);background:var(--gold);
  color:var(--navy-strong);display:grid;place-items:center}
.app-header .logo .ic{width:22px;height:22px;stroke-width:2.2}
.app-header h1{font-size:var(--fs-lg);font-weight:700;letter-spacing:.02em;line-height:1.2}
.app-header .sub{font-size:var(--fs-xs);color:var(--gold2);letter-spacing:.06em}
.app-header .spacer{flex:1}
.app-header .meta{font-size:var(--fs-sm);color:#B9C6D4}
.app-header nav{display:flex;align-items:center;gap:var(--sp-2)}
.app-header nav a,.app-header nav button{display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:var(--r-sm);border:1px solid rgba(255,255,255,.28);
  color:#fff;background:transparent;text-decoration:none;font-size:var(--fs-sm);
  font-weight:600;cursor:pointer;transition:background var(--t-fast),border-color var(--t-fast)}
.app-header nav a:hover,.app-header nav button:hover{background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.5)}
.app-header nav a.on{background:var(--gold);border-color:var(--gold);color:var(--navy-strong)}
.app-header nav .sep{width:1px;height:22px;background:rgba(255,255,255,.22);margin:0 var(--sp-2)}
.app-header nav a.out{border-color:transparent;color:#C7D0DA}
.app-header nav a.out:hover{color:#fff;background:rgba(255,255,255,.1)}

/* ── 分頁列（模式切換）── */
.tabs-bar{display:flex;gap:var(--sp-2);flex-wrap:wrap;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-2);
  box-shadow:var(--sh-sm)}
.tabs-bar button{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;
  border:1px solid transparent;border-radius:var(--r-md);background:transparent;
  color:var(--mut);font-size:var(--fs-md);font-weight:600;cursor:pointer;
  transition:all var(--t-fast)}
.tabs-bar button:hover{background:var(--paper);color:var(--ink)}
.tabs-bar button.on{background:var(--navy-strong);color:#fff;border-color:var(--gold);
  box-shadow:inset 0 0 0 1px var(--gold)}
.tabs-bar .num{display:inline-grid;place-items:center;min-width:24px;height:22px;
  padding:0 7px;border-radius:var(--r-pill);background:var(--paper);color:var(--mut);
  font-size:var(--fs-xs);font-weight:700}
.tabs-bar button.on .num{background:var(--gold);color:var(--navy-strong)}

/* ── 統計卡 ── 「彩色圖示塊 ＋ 大數字 ＋ 小標籤」固定結構 */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--sp-4)}
.stat{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-5) var(--sp-6);
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-sm)}
.stat .icon{width:56px;height:56px;border-radius:var(--r-md);display:grid;place-items:center;
  flex:none}
.stat .icon .ic{width:24px;height:24px}
.stat .icon.gold{background:var(--gold-soft);color:var(--gold-strong)}
.stat .icon.green{background:var(--green-soft);color:var(--green)}
.stat .icon.navy{background:var(--navy-soft);color:var(--navy)}
.stat .icon.blue{background:var(--blue-soft);color:var(--blue)}
.stat .icon.amber{background:var(--amber-soft);color:var(--amber)}
.stat .icon.red{background:var(--red-soft);color:var(--red)}
.stat .n{font-size:var(--fs-2xl);font-weight:800;line-height:1.1;letter-spacing:-.01em}
.stat .l{font-size:var(--fs-sm);color:var(--mut);margin-top:2px}

/* ── 卡片與區塊 ── */
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-sm)}
.panel-head{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-5) var(--sp-6);
  border-bottom:1px solid var(--line);flex-wrap:wrap}
.panel-head h2{display:flex;align-items:center;gap:10px;font-size:var(--fs-xl);font-weight:800}
.panel-head h2 .ic{color:var(--gold-strong)}
.panel-body{padding:var(--sp-6)}

/* ── 按鈕 ── */
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:var(--r-md);
  border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:var(--fs-md);
  font-weight:600;cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:all var(--t-fast)}
.btn:hover{border-color:var(--navy);color:var(--navy);box-shadow:var(--sh-sm)}
.btn:disabled{opacity:.5;cursor:default;box-shadow:none}
.btn-primary{background:var(--navy-strong);border-color:var(--navy-strong);color:#fff}
.btn-primary:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.btn-gold{background:var(--gold);border-color:var(--gold);color:var(--navy-strong)}
.btn-gold:hover{background:var(--gold-strong);border-color:var(--gold-strong);color:#fff}
.btn-outline{background:transparent;border-color:var(--navy);color:var(--navy)}
.btn-danger{border-color:var(--red);color:var(--red)}
.btn-danger:hover{background:var(--red);color:#fff}
.btn-sm{padding:6px 12px;font-size:var(--fs-sm)}

/* ── 輸入 ── */
.field{position:relative;display:flex;align-items:center}
.field .ic{position:absolute;left:14px;color:var(--faint);pointer-events:none}
.field input,.field select{width:100%;padding:11px 14px 11px 40px;border:1px solid var(--line);
  border-radius:var(--r-md);background:var(--paper);color:var(--ink);font-size:var(--fs-md);
  outline:none;transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.field input:focus,.field select:focus{border-color:var(--navy);background:var(--card);
  box-shadow:0 0 0 3px var(--navy-soft)}
.field.plain input,.field.plain select{padding-left:14px}

/* ── 標籤／徽章 ── */
.badge{display:inline-flex;align-items:center;gap:5px;padding:2px 10px;border-radius:var(--r-pill);
  font-size:var(--fs-xs);font-weight:700;background:var(--paper);color:var(--mut)}
.badge.gold{background:var(--gold-soft);color:var(--gold-strong)}
.badge.green{background:var(--green-soft);color:var(--green)}
.badge.navy{background:var(--navy-soft);color:var(--navy)}
.badge.red{background:var(--red-soft);color:var(--red)}
.badge.amber{background:var(--amber-soft);color:var(--amber)}

/* ── 空狀態 ── */
.empty{grid-column:1/-1;text-align:center;padding:var(--sp-8);color:var(--mut);
  background:var(--card);border:1px dashed var(--line);border-radius:var(--r-lg)}

/* ── 認證頁（登入／註冊）共用 ─────────────────────────────
   目標是「一眼看懂現在要做什麼、出錯時知道怎麼辦」。
   密碼欄一律附小眼睛：使用者打錯密碼卻看不到自己打了什麼，
   是登入失敗最常見也最沒必要的原因。 */
.auth-field{position:relative;display:flex;align-items:center;width:100%}
/* span 預設是 inline，高度算不出來，眼睛按鈕會掉到框外——必須 flex */
.auth-field > .ic{position:absolute;left:13px;color:var(--faint);
  pointer-events:none;width:17px;height:17px}
.auth-field input{width:100%;padding:12px 14px 12px 40px;border:1px solid var(--line);
  border-radius:var(--r-md);background:var(--paper);color:var(--ink);font-size:var(--fs-md);
  font-family:var(--sans);outline:none;transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.auth-field input:focus{border-color:var(--navy);background:var(--card);
  box-shadow:0 0 0 3px var(--navy-soft)}
.auth-field.has-toggle input{padding-right:44px}
/* 用 flex 對齊而非絕對定位的 top:50%——後者算的是容器高度，
   輸入框的邊框與 padding 會讓它偏低（實測貼在框的右下角） */
.eye{position:absolute;right:8px;width:30px;height:30px;
  display:grid;place-items:center;border:0;background:none;color:var(--mut);cursor:pointer;
  border-radius:var(--r-sm);padding:0;line-height:0}
.eye:hover{color:var(--navy);background:var(--paper)}
.eye .ic{width:18px;height:18px}

/* 錯誤訊息放在表單「上方」——放最下面使用者常常沒看到 */
.auth-alert{display:none;align-items:flex-start;gap:9px;padding:11px 13px;
  border-radius:var(--r-md);background:var(--red-soft);color:var(--red);
  font-size:var(--fs-sm);line-height:1.55;margin-bottom:var(--sp-4);text-align:left}
.auth-alert.on{display:flex}
.auth-alert .ic{flex:none;margin-top:2px;width:16px;height:16px}
.auth-alert a{color:inherit;font-weight:700}

/* 流程指引：告訴使用者這頁是做什麼的、下一步是什麼 */
.auth-steps{display:flex;flex-direction:column;gap:10px;margin:var(--sp-5) 0 var(--sp-3);
  padding:14px 16px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-md);font-size:13.5px;color:var(--mut);line-height:1.65;
  text-align:left}
.auth-steps b{color:var(--ink)}
.auth-steps .row{display:flex;gap:8px;align-items:flex-start}
.auth-steps .ic{flex:none;margin-top:3px;width:15px;height:15px;color:var(--gold-strong)}

/* 認證頁的表單節奏：label 貼近它的欄位，欄位之間才留白。
   原本 label 上下各留 14px，看起來像每個欄位都飄著。 */
.card form label{display:block;font-size:13px;font-weight:700;
  margin:16px 0 6px;color:var(--ink)}
.card form label:first-of-type{margin-top:0}
.card .hint{font-size:12.5px;color:var(--mut);margin-top:6px;line-height:1.5}
.card form > button[type=submit]{margin-top:22px;font-size:15.5px;font-weight:700}

/* ── 管理模式（R6）：深銅金頁首＋反白徽章——與搜尋頁的深藍一眼區隔
   （石墨 #23272E 與深藍 #1F2A37 幾乎同色，2026-08-20 使用者回報分不出） ── */
.app-header.admin{background:#4A3A12;border-bottom-color:#23272E}
.badge-admin{display:inline-flex;align-items:center;margin-left:12px;
  padding:3px 12px;border-radius:999px;background:#fff;color:#4A3A12;
  font-size:12px;font-weight:800;letter-spacing:.08em;white-space:nowrap}
.tab-groups{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.tab-groups .tgroup{display:flex;align-items:center;gap:2px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:5px 6px;
  box-shadow:var(--sh-sm)}
.tab-groups .tg-label{font-size:11.5px;font-weight:800;color:var(--mut);
  letter-spacing:.06em;padding:0 9px;white-space:nowrap;border-right:1px solid var(--line);
  margin-right:4px}
.tab-groups button{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;
  border:1px solid transparent;border-radius:var(--r-md);background:transparent;
  color:var(--mut);font-size:13.5px;font-weight:600;cursor:pointer;font-family:inherit;
  transition:all var(--t-fast)}
.tab-groups button:hover{background:var(--paper);color:var(--ink)}
.tab-groups button.on{background:#23272E;color:#fff;box-shadow:inset 0 0 0 1px var(--gold)}

/* 管理模式整頁區隔（使用者回報只有頁首不夠）：搜尋頁＝暖米色（stone），
   管理/平台頁＝冷藍灰底＋左上「管理區」氛圍，一進頁面就知道換了模式 */
body.admin-body{background:#DEE3E9}
body.admin-body .item,body.admin-body .audit,body.admin-body .tbl,
body.admin-body .jobs{border-color:#D3D9E0}
body.admin-body .tab-groups .tgroup{border-color:#D3D9E0;background:#FBFCFD}
body.admin-body .audit th{background:#EDF0F4}