/*
 * Motive AI 工作台 — 共用樣式（`/app/shell.css`）。
 *
 * ⚠️ 整合之前每頁是一個單檔零相依的 HTML。頁面變成五頁之後那條規矩要換掉：
 *    五份一模一樣的 CSS ＝ 改一次要改五個檔，而且**一定會漏掉其中一兩個**，
 *    症狀是「某一頁的按鈕長得不一樣」，沒人會當成 bug 回報。
 * ⚠️ 換成外部檔的代價是 nginx 白名單要放行 `/app/shell.css`（見 bridge 的路由註解）。
 *    沒放行的話它會 404，而 CSS 404 的畫面是**沒有樣式但功能正常**——
 *    看起來像壞掉，實際上什麼都能用，最容易被誤判成大問題。
 *
 * ## 這裡是唯一的視覺真相
 *
 * 所有顏色、圓角、陰影、間距都只從下面那組 token 出來。頁面裡不要再寫死色碼——
 * 寫死的那一個一定不會跟著換主題，而症狀是「亮色模式下某一塊是黑的」。
 *
 * ⚠️ **亮色不是把幾個變數改一改就好。** 舊版只覆蓋 5 個變數，結果暗色調好的陰影
 *    （黑色、大範圍）在白底上變成一團灰霧。兩套主題的陰影、邊框、光暈要各給各的。
 */

/* ── 設計 token ───────────────────────────────────────────────── */
:root {
  color-scheme: dark;

  --bg:#0a0c11;
  --surface:#12161f;        /* 卡片 */
  --surface-2:#171d29;      /* 卡片裡再一層（輸入框、成本框） */
  --surface-3:#1f2735;      /* hover／選中 */
  --line:#242c3b;
  --line-2:#323c50;

  --fg:#e9edf6;
  --fg-2:#b7c1d6;
  --dim:#8492aa;

  --accent:#63a8ff;
  --accent-2:#a58bff;
  --accent-ink:#06121f;     /* 放在 accent 上的字色 */
  --accent-bg:rgba(99,168,255,.13);
  --ring:rgba(99,168,255,.5);

  --ok:#37d9a0;   --ok-bg:rgba(55,217,160,.12);
  --warn:#f8bb5c; --warn-bg:rgba(248,187,92,.12);
  --bad:#ff8080;  --bad-bg:rgba(255,128,128,.12);

  --shadow-sm:0 1px 2px rgba(0,0,0,.45);
  --shadow:0 2px 4px rgba(0,0,0,.4), 0 12px 28px -12px rgba(0,0,0,.6);
  --glow:0 0 0 1px var(--accent), 0 8px 30px -12px rgba(99,168,255,.55);

  --r:14px; --r-sm:9px; --r-pill:999px;
  --maxw:1060px;
  --pad:22px;
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;

    --bg:#f4f6fb;
    --surface:#ffffff;
    --surface-2:#f6f8fc;
    --surface-3:#eef2f9;
    --line:#e3e8f1;
    --line-2:#cfd7e5;

    --fg:#111726;
    --fg-2:#3d485d;
    --dim:#6b7789;

    --accent:#2f6fe4;
    --accent-2:#7c4ddb;
    --accent-ink:#ffffff;
    --accent-bg:rgba(47,111,228,.09);
    --ring:rgba(47,111,228,.45);

    --ok:#0f9d6a;   --ok-bg:rgba(15,157,106,.10);
    --warn:#b8760a; --warn-bg:rgba(184,118,10,.10);
    --bad:#d43d3d;  --bad-bg:rgba(212,61,61,.09);

    /* ⚠️ 亮色的陰影要淺、要帶一點藍，不能沿用暗色那組純黑大陰影（會變灰霧） */
    --shadow-sm:0 1px 2px rgba(16,24,40,.06);
    --shadow:0 1px 3px rgba(16,24,40,.08), 0 12px 24px -14px rgba(16,24,40,.25);
    --glow:0 0 0 1px var(--accent), 0 8px 24px -14px rgba(47,111,228,.5);
  }
}

* { box-sizing: border-box; }

body {
  margin:0; padding:0;
  color:var(--fg);
  background-color:var(--bg);
  /* 兩顆很淡的光暈，只是讓大片背景不要死平。attachment:fixed 讓它不跟著捲。 */
  background-image:
    radial-gradient(60rem 28rem at 8% -12%, var(--accent-bg), transparent 62%),
    radial-gradient(48rem 24rem at 100% -8%, rgba(165,139,255,.10), transparent 60%);
  background-attachment:fixed;
  background-repeat:no-repeat;
  font:15px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-color-scheme: light) {
  body { background-image:
    radial-gradient(60rem 28rem at 8% -12%, rgba(47,111,228,.07), transparent 62%),
    radial-gradient(48rem 24rem at 100% -8%, rgba(124,77,219,.06), transparent 60%); }
}

.wrap { max-width:var(--maxw); margin:0 auto; padding:0 20px 64px; }

/* ── 頁首（跨頁固定） ─────────────────────────────────────────── */
/* ⚠️ 品牌與分頁列黏在頂端：任務跑完要往下捲看產出，捲下去之後餘額與選單還要在。 */
.appbar {
  position:sticky; top:0; z-index:20;
  background:var(--bg);
  border-bottom:1px solid var(--line);
  margin-bottom:26px;
}
@supports (backdrop-filter: blur(4px)) {
  /* 半透明只在支援模糊時開；不支援卻半透明的話，底下的內容會直接穿過來 */
  .appbar { background:rgba(10,12,17,.72); backdrop-filter:blur(14px) saturate(1.4); }
  @media (prefers-color-scheme: light) { .appbar { background:rgba(244,246,251,.78); } }
}
.appbar-in {
  max-width:var(--maxw); margin:0 auto; padding:12px 20px 0;
  display:flex; align-items:center; gap:14px;
}
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--fg); }
.brand-mark {
  width:30px; height:30px; border-radius:8px; flex:none;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff; font-weight:800; font-size:16px; letter-spacing:-.5px;
  display:grid; place-items:center;
  box-shadow:0 4px 14px -6px var(--accent);
}
.brand-name { font-size:15px; font-weight:600; letter-spacing:.2px; white-space:nowrap; }
.brand-name b { font-weight:600; }
.brand-name span { color:var(--dim); font-weight:400; }

.appbar-right { margin-left:auto; display:flex; align-items:center; gap:8px; }

/* 餘額是錢，要一眼看得到、而且低的時候要自己喊 */
.pill {
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  padding:6px 13px; border-radius:var(--r-pill);
  border:1px solid var(--line-2); background:var(--surface);
  font-size:13px; color:var(--dim);
}
.pill b { color:var(--fg); font-size:14px; font-weight:650; font-variant-numeric:tabular-nums; }
.pill.low { border-color:var(--warn); background:var(--warn-bg); color:var(--warn); }
.pill.low b { color:var(--warn); }
.pill .dot { width:7px; height:7px; border-radius:50%; background:var(--ok); flex:none; }
.pill.low .dot { background:var(--warn); }

/* ── 主選單 ──────────────────────────────────────────────────── */
/* ⚠️ 導覽一律用真的 <a href>，不要用按鈕 + JS 換頁：
   中鍵開新分頁、複製連結、上一頁、螢幕閱讀器的「連結清單」全部免費而且正確。 */
.tabsrow { max-width:var(--maxw); margin:0 auto; padding:0 20px; }
.tabs {
  display:flex; gap:4px; padding:10px 0 10px;
  /* ⚠️ 窄螢幕要橫捲，不要 wrap：wrap 成兩行會把頁面內容整個往下推，
     而且第二行的分頁常常剛好被捲軸蓋住。 */
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.tabs::-webkit-scrollbar { display:none; }
.tabs a.tab {
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  text-decoration:none; color:var(--dim);
  border:1px solid transparent; border-radius:var(--r-pill);
  padding:8px 15px; font-size:14px; font-weight:500;
  transition:background .15s, color .15s;
}
.tabs a.tab:hover { color:var(--fg); background:var(--surface); }
/* ⚠️ 選中狀態的唯一來源是 aria-current，不另外掛 .active：
   兩套狀態遲早分岔，而分岔的樣子是「看起來在 A 頁、螢幕閱讀器唸 B 頁」。 */
.tabs a.tab[aria-current="page"] {
  background:var(--surface); color:var(--fg); border-color:var(--line-2); box-shadow:var(--shadow-sm);
}
/* 還沒開放的能力：看得到、點不下去，而且要說得出在等什麼 */
.tabs a.tab[aria-disabled="true"] { opacity:.45; cursor:not-allowed; }
.tabs a.tab[aria-disabled="true"]::after { content:'🔒'; font-size:10px; }

/* 沒有分頁列的頁首（公開首頁）——不補下方留白的話品牌會貼在分隔線上 */
.appbar.plain .appbar-in { padding-bottom:12px; }

/* ── 公開首頁的主視覺 ────────────────────────────────────────── */
.hero { padding:38px 0 26px; max-width:660px; }
.hero h1 { font-size:34px; line-height:1.25; letter-spacing:-1px; margin:0; }
/* ⚠️ 漸層字一定要包在 @supports 裡：不支援 background-clip:text 的瀏覽器會
   照樣吃掉 `color:transparent`，結果是**標題整行看不見**——而且沒有任何錯誤。 */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero h1 .grad {
    background:linear-gradient(115deg,var(--accent),var(--accent-2));
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
}
.hero p { color:var(--dim); font-size:15.5px; line-height:1.75; margin:14px 0 24px; }
.hero .trust { display:flex; gap:8px; flex-wrap:wrap; margin-top:22px; }

a.btn {
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff;
  border-radius:var(--r-sm); padding:12px 24px; font-size:15px; font-weight:600;
  box-shadow:0 6px 18px -10px var(--accent); transition:filter .15s, transform .12s;
}
a.btn:hover { filter:brightness(1.08); }
a.btn:active { transform:translateY(1px); }
a.btn.ghost { background:var(--surface); color:var(--fg-2); border:1px solid var(--line-2); box-shadow:none; }
a.btn.ghost:hover { color:var(--fg); border-color:var(--accent); }

/* ── 頁面標題 ────────────────────────────────────────────────── */
.pagehead { margin:0 0 20px; }
h1 { font-size:24px; line-height:1.3; margin:0 0 6px; font-weight:700; letter-spacing:-.3px; }
.sub { color:var(--dim); font-size:13px; }

/* ── 卡片 ────────────────────────────────────────────────────── */
.card {
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:var(--pad); margin-bottom:16px;
  box-shadow:var(--shadow-sm);
}
h2 { font-size:16px; margin:0 0 14px; font-weight:650; letter-spacing:-.2px; }
/* 卡片標題底下的一句說明——貼著標題，不要看起來像另一段內容 */
h2 + .sub { margin:-9px 0 15px; }
h3 { font-size:15px; margin:0 0 6px; font-weight:600; }

/* ── 表單 ────────────────────────────────────────────────────── */
label { display:block; font-size:12.5px; color:var(--fg-2); font-weight:500; margin:14px 0 5px; }
label .dim, label span { font-weight:400; }
input, select, textarea {
  width:100%; background:var(--surface-2); color:var(--fg);
  border:1px solid var(--line); border-radius:var(--r-sm);
  padding:10px 12px; font-size:14.5px; font-family:inherit;
  transition:border-color .15s, box-shadow .15s, background .15s;
}
input::placeholder, textarea::placeholder { color:var(--dim); opacity:.75; }
textarea { resize:vertical; min-height:120px; line-height:1.7; }
input:hover, select:hover, textarea:hover { border-color:var(--line-2); }
input:focus, select:focus, textarea:focus {
  outline:none; border-color:var(--accent); background:var(--surface);
  box-shadow:0 0 0 3px var(--ring);
}
input:disabled, select:disabled, textarea:disabled { opacity:.55; cursor:not-allowed; }
/* 原生下拉的箭頭在暗色底下常常是黑的（看不見），自己畫一個 */
select {
  appearance:none; -webkit-appearance:none; padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%238492aa' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:11px;
}
/* ⚠️ 檔案選擇鈕不美化就會是瀏覽器預設的灰按鈕，在暗色卡片上非常突兀 */
input[type=file] { padding:8px 10px; font-size:13px; color:var(--fg-2); }
input[type=file]::file-selector-button {
  border:1px solid var(--line-2); background:var(--surface-3); color:var(--fg);
  border-radius:7px; padding:6px 12px; margin-right:10px; font:inherit; font-size:13px; cursor:pointer;
}
input[type=file]::file-selector-button:hover { border-color:var(--accent); color:var(--accent); }

/* ⚠️ 拿掉 outline 一定要補 :focus-visible，否則全鍵盤操作看不到焦點在哪 */
button:focus-visible, a:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline:2px solid var(--accent); outline-offset:2px;
}

/* ── 按鈕 ────────────────────────────────────────────────────── */
button {
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff; border:none; border-radius:var(--r-sm);
  padding:10px 20px; font-size:14.5px; font-weight:600; font-family:inherit;
  cursor:pointer; margin-top:14px; min-height:40px;   /* 40px＝手指點得到的下限 */
  box-shadow:0 6px 18px -10px var(--accent);
  transition:transform .12s, filter .15s, box-shadow .15s;
}
button:hover:not(:disabled) { filter:brightness(1.08); box-shadow:0 8px 22px -10px var(--accent); }
button:active:not(:disabled) { transform:translateY(1px); }
button.ghost {
  background:var(--surface); color:var(--fg-2); border:1px solid var(--line-2);
  font-weight:500; box-shadow:none;
}
button.ghost:hover:not(:disabled) { color:var(--fg); border-color:var(--accent); filter:none; }
button.sm { padding:7px 14px; font-size:13px; min-height:34px; margin-top:0; }
/* ⚠️ 禁用態不可以只調 opacity：漸層變半透明會透出背景，糊成一塊髒色。改成實色。 */
button:disabled {
  background:var(--surface-3); color:var(--dim); box-shadow:none;
  cursor:not-allowed; filter:none; transform:none;
}

/* ── 訊息 ────────────────────────────────────────────────────── */
.msg { margin-top:12px; font-size:13.5px; color:var(--fg-2); }
.msg.err, .msg.ok {
  padding:10px 13px; border-radius:var(--r-sm); border:1px solid transparent;
}
.msg.err { color:var(--bad); background:var(--bad-bg); border-color:var(--bad); }
.msg.ok { color:var(--ok); background:var(--ok-bg); border-color:var(--ok); }
.note {
  background:var(--warn-bg); border:1px solid var(--warn); color:var(--warn);
  border-radius:var(--r-sm); padding:11px 14px; margin-bottom:16px; font-size:13.5px; line-height:1.6;
}
.note a { color:inherit; }

/* 成本量級：要看得見但不能像錯誤訊息（它是常駐的，紅色會讓人習慣性忽略） */
.cost {
  background:var(--surface-2); border:1px solid var(--line);
  border-left:3px solid var(--accent); border-radius:var(--r-sm);
  padding:12px 14px; margin-top:10px; font-size:12.5px; line-height:1.8; color:var(--fg-2);
}
.cost div + div { margin-top:2px; }
.cost b { color:var(--fg); }
.cost b:first-child { color:var(--accent); }

/* ── 標籤 ────────────────────────────────────────────────────── */
.tag {
  display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
  font-size:12px; padding:2px 9px; border-radius:var(--r-pill);
  border:1px solid var(--line-2); color:var(--dim); background:var(--surface-2);
}
.tag.warn { color:var(--warn); border-color:var(--warn); background:var(--warn-bg); }
.tag.ok { color:var(--ok); border-color:var(--ok); background:var(--ok-bg); }
.tag.bad { color:var(--bad); border-color:var(--bad); background:var(--bad-bg); }
.chip {
  display:inline-block; font-size:12px; font-weight:600; padding:2px 9px;
  border-radius:var(--r-pill); background:var(--accent-bg); color:var(--accent);
  font-variant-numeric:tabular-nums;
}

/* ── 能力卡／用途卡 ──────────────────────────────────────────── */
/* ⚠️ auto-fill 不是 auto-fit：auto-fit 會把空的欄收掉、讓剩下的卡**撐滿整列**，
   於是「只有一張卡的那一組」會變成一張橫跨全寬的巨無霸卡，跟隔壁組的卡大小不一樣，
   看起來像那一張比較重要（而它只是剛好落單）。auto-fill 讓每張卡永遠一樣寬。 */
.caps { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; }
.cap {
  position:relative; display:block; text-decoration:none; color:inherit;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:18px;
  transition:border-color .15s, transform .15s, box-shadow .15s;
}
.cap:hover { border-color:var(--accent); transform:translateY(-2px); box-shadow:var(--shadow); }
.cap h3 { margin:0 0 6px; font-size:15.5px; }
.cap p { margin:0; color:var(--dim); font-size:13px; line-height:1.65; }
/* 圖示：一個字。跨平台一致（emoji 各系統長得都不一樣），而且中文產品用中文字剛好。 */
.cap .ico {
  width:36px; height:36px; border-radius:10px; margin-bottom:12px;
  display:grid; place-items:center; font-size:17px; font-weight:600;
  background:var(--accent-bg); color:var(--accent);
  border:1px solid var(--line);
}

/* 生成台的用途卡（可點選的 .cap）。
   ⚠️ 選中一定要看得出來、而且不能只靠 hover——手機沒有 hover，
      而「現在選的是哪一張」決定了會扣多少點。 */
.cap.pick { cursor:pointer; text-align:left; width:100%; font:inherit; padding:16px; }
.cap.pick[aria-pressed="true"] {
  border-color:var(--accent); box-shadow:var(--glow);
  background:linear-gradient(160deg,var(--accent-bg),transparent 65%),var(--surface);
}
/* 選中的打勾：手機上沒有 hover，顏色差異也可能被色盲濾掉，多一個形狀線索 */
.cap.pick[aria-pressed="true"]::after {
  content:'✓'; position:absolute; top:14px; right:14px;
  width:20px; height:20px; border-radius:50%; font-size:12px; font-weight:700;
  background:var(--accent); color:var(--accent-ink); display:grid; place-items:center;
}
.cap.pick[aria-disabled="true"] { opacity:.5; cursor:not-allowed; }
.cap.pick[aria-disabled="true"]:hover { border-color:var(--line); transform:none; box-shadow:none; }
.cap .foot { display:flex; align-items:center; gap:8px; margin-top:12px; flex-wrap:wrap; }
.cap .why { color:var(--warn); font-size:12px; }
.capgroup {
  display:flex; align-items:center; gap:10px;
  color:var(--dim); font-size:12px; font-weight:600; letter-spacing:.5px; margin:22px 0 10px;
}
.capgroup::after { content:''; flex:1; height:1px; background:var(--line); }
.capgroup:first-of-type { margin-top:0; }

/* ── 數字卡 ──────────────────────────────────────────────────── */
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin-bottom:16px; }
.stat {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:16px 18px; box-shadow:var(--shadow-sm);
}
.stat .k { color:var(--dim); font-size:12px; }
.stat .v { font-size:26px; font-weight:700; line-height:1.35; font-variant-numeric:tabular-nums; letter-spacing:-.5px; }
.stat.primary { border-color:var(--accent); background:linear-gradient(160deg,var(--accent-bg),transparent 60%),var(--surface); }
.stat.primary .v { color:var(--accent); }

/* ── 表格 ────────────────────────────────────────────────────── */
.scroll { overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); }
table { border-collapse:collapse; width:100%; min-width:560px; }
th,td { padding:11px 14px; text-align:right; white-space:nowrap; border-bottom:1px solid var(--line); font-size:13.5px; }
th { color:var(--dim); font-weight:500; font-size:12px; background:var(--surface-2); }
th:first-child, td:first-child { text-align:left; }
tbody tr:last-child td { border-bottom:none; }
tbody tr:hover td { background:var(--surface-2); }
.num { font-variant-numeric:tabular-nums; }
.dim { color:var(--dim); }
.row { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.picks { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; }

/* 窄螢幕：表格橫捲時凍結首欄，否則捲到「點數」就看不出是哪一列 */
.scroll th:first-child, .scroll td:first-child {
  position:sticky; left:0; z-index:1; background:var(--surface); box-shadow:1px 0 0 var(--line);
}
.scroll thead th:first-child { z-index:2; background:var(--surface-2); }

/* ── 任務紀錄 ────────────────────────────────────────────────── */
.task {
  border:1px solid var(--line); border-radius:var(--r-sm); margin-bottom:8px;
  background:var(--surface-2); overflow:hidden; transition:border-color .15s;
}
.task:hover { border-color:var(--line-2); }
.task[data-status="running"] { border-left:3px solid var(--accent); }
.task[data-status="failed"] { border-left:3px solid var(--bad); }
.task[data-status="done"] { border-left:3px solid var(--ok); }
.task > summary {
  padding:11px 14px; cursor:pointer; display:flex; gap:10px; align-items:center;
  flex-wrap:wrap; list-style:none; font-size:13.5px;
}
.task > summary::-webkit-details-marker { display:none; }
.task > summary::before { content:'▸'; color:var(--dim); font-size:11px; }
.task[open] > summary::before { content:'▾'; }
.task[open] > summary { border-bottom:1px solid var(--line); background:var(--surface-3); }
.task > summary:hover { background:var(--surface-3); }
.task .body { padding:14px; }
/* ⚠️ 產出要能選取、要保留換行，而且長行要能捲——模型的輸出常常是程式碼或表格 */
.out {
  white-space:pre-wrap; word-break:break-word;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:14px; font-size:13px; line-height:1.7; max-height:460px; overflow:auto;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
/* 產出的圖／影片：外面給一層框，跟純文字產出分得開 */
.art { margin:0 0 10px; }
.art img, .art video { display:block; max-width:100%; height:auto; border-radius:var(--r-sm); border:1px solid var(--line); }
.art audio { width:100%; }
.artbar { display:flex; gap:14px; margin-top:7px; font-size:12px; }
.artbar a { color:var(--accent); text-decoration:none; }
.artbar a:hover { text-decoration:underline; }
/* 空狀態：不要只有一行灰字——那看起來像壞掉或還在載入 */
.empty { text-align:center; padding:34px 16px; color:var(--dim); font-size:13.5px; }
.empty .big { font-size:26px; opacity:.5; display:block; margin-bottom:8px; }

.spin {
  display:inline-block; width:11px; height:11px; border:2px solid var(--line-2);
  border-top-color:var(--accent); border-radius:50%; animation:sp .8s linear infinite;
}
@keyframes sp { to { transform:rotate(360deg); } }
@keyframes pulse { 50% { opacity:.35; } }
.task[data-status="running"] > summary .tag { animation:pulse 1.8s ease-in-out infinite; }
/* ⚠️ 會暈的人請系統關動畫時，我們也要跟著關 */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .cap:hover { transform:none; }
}

/* ── 帳號資料的 key-value 列 ─────────────────────────────────── */
.kv { display:grid; grid-template-columns:auto 1fr; gap:10px 20px; margin:0; font-size:14px; align-items:center; }
.kv dt { color:var(--dim); font-size:13px; }
.kv dd { margin:0; font-variant-numeric:tabular-nums; }

/* ── 登入 ────────────────────────────────────────────────────── */
/* 沒登入時只有這一張卡，置中而且窄一點——滿版的登入框看起來像沒做完 */
.card.auth { max-width:420px; margin:6vh auto 0; padding:26px; box-shadow:var(--shadow); }
.card.auth h2 { text-align:center; font-size:18px; margin-bottom:4px; }
.card.auth .authsub { text-align:center; color:var(--dim); font-size:13px; margin-bottom:18px; }
.card.auth button[type=submit] { width:100%; margin-top:20px; }
/* 密碼欄的「顯示」鈕：我們發的是隨機密碼，打錯一個字看不出來，只能重打一次 */
.pwbox { position:relative; }
.pwbox input { padding-right:52px; }
.pwbox .eye {
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  margin:0; padding:5px 9px; min-height:0; font-size:12px; font-weight:500;
  background:transparent; color:var(--dim); border:none; box-shadow:none;
}
.pwbox .eye:hover:not(:disabled) { color:var(--accent); filter:none; box-shadow:none; }

@media (max-width:640px) {
  .wrap { padding:0 14px 48px; }
  .appbar-in, .tabsrow { padding-left:14px; padding-right:14px; }
  .brand-name span { display:none; }        /* 窄螢幕只留品牌，副標讓位給餘額 */
  h1 { font-size:20px; }
  .card { padding:16px; }
  .stat .v { font-size:22px; }
}

/* ── 生成台：範例圖與商業模板 ─────────────────────────────────── */

/* 用途卡上的範例縮圖。
   ⚠️ 固定比例（aspect-ratio）不是固定高度：範例圖有方的也有直的，用高度框會被裁到
      看不出原本的構圖，而「看得出構圖」正是放這張圖的唯一理由。
   ⚠️ object-fit:cover 配 aspect-ratio 才不會變形——只寫 width:100%;height:auto 的話
      每張卡會因為圖的比例不同而長短不一，整排參差（見 pitfall_img_attr_height_without_css_auto）。*/
.cap .thumb {
  display:block; width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:var(--r-sm); margin-bottom:12px; background:var(--surface-2);
  border:1px solid var(--line);
}

/* 卡片的詳細說明：你會拿到什麼／什麼時候用得上。
   ⚠️ 放在**點下去之前**看得到的地方。這兩段裡有「想像圖不是實品」「影片沒有人聲」
      這種事後才知道就會吵架的限制，藏在說明頁裡等於沒寫。 */
.spec { margin-top:14px; border-top:1px dashed var(--line); padding-top:12px; }
.spec dt {
  font-size:11.5px; font-weight:600; letter-spacing:.4px; color:var(--dim);
  margin-bottom:3px;
}
.spec dd { margin:0 0 10px; font-size:13px; line-height:1.7; color:var(--fg-2); }
.spec dd:last-child { margin-bottom:0; }

/* 商業模板挑選格 */
.tpls { display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:12px; margin-top:4px; }
.tpl {
  position:relative; display:block; width:100%; text-align:left; font:inherit; cursor:pointer;
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:0; overflow:hidden; color:inherit; margin-top:0; min-height:0;
  transition:border-color .15s, transform .15s, box-shadow .15s;
}
.tpl:hover:not(:disabled) { border-color:var(--accent); transform:translateY(-2px); box-shadow:var(--shadow); filter:none; }
.tpl[aria-pressed="true"] { border-color:var(--accent); box-shadow:var(--glow); }
.tpl[aria-pressed="true"]::after {
  content:'✓'; position:absolute; top:8px; right:8px;
  width:19px; height:19px; border-radius:50%; font-size:11px; font-weight:700;
  background:var(--accent); color:var(--accent-ink); display:grid; place-items:center;
}
.tpl .shot { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; background:var(--surface-3); }
/* 還沒生範例圖的模板：給一塊有字的底，不要給破圖也不要留一個塌掉的空格 */
.tpl .noshot {
  display:grid; place-items:center; width:100%; aspect-ratio:4/3;
  background:var(--surface-3); color:var(--dim); font-size:11.5px;
}
.tpl .tt { padding:9px 11px 11px; }
.tpl .tt b { display:block; font-size:13.5px; font-weight:600; margin-bottom:3px; }
.tpl .tt span { display:block; color:var(--dim); font-size:11.5px; line-height:1.6; }

/* 選中模板後的大圖預覽 */
.preview { margin-top:14px; }
.preview img, .preview video {
  display:block; width:100%; max-width:420px; border-radius:var(--r-sm);
  border:1px solid var(--line); background:var(--surface-2);
}
.preview .cap-note { margin-top:7px; font-size:11.5px; color:var(--dim); line-height:1.6; }