/* ============================================================
   转写工作台 · 暖墨绿苹果风 (2026-06-14 重构)
   暖灰米底 + 纯白卡 + 系统无衬线 + 墨绿 accent
   去描边、靠浅灰填充 + 柔阴影分组；渐进展示
   ============================================================ */
:root{
  color-scheme: light;
  --bg:#f7f5f1; --surface:#ffffff; --fill:#f2efe9; --fill-2:#ebe7df;
  --ink:#26231e; --ink-2:#6b655c; --ink-3:#958d81;
  --line:rgba(45,33,15,.10); --line-2:rgba(45,33,15,.17);
  --accent:#1d6b52; --accent-hover:#185c46; --accent-soft:#e7f2ec; --accent-strong:#124e3a;
  --success:#1d6b52; --success-soft:#e7f2ec;
  --warn:#9a6400; --warn-soft:#fbf1de;
  --danger:#c0392b; --danger-soft:#fbeceb;
  --focus:0 0 0 4px rgba(29,107,82,.24);
  --shadow-card:0 1px 2px rgba(40,30,10,.04),0 12px 30px rgba(40,30,10,.06);
  --shadow-pop:0 18px 60px rgba(30,22,8,.22);
  --r-card:20px; --r-ctrl:12px; --r-pill:980px;
  --brand-grad:linear-gradient(160deg,#2f9e78,#176a4f);
  --cover-grad:linear-gradient(150deg,#cfe7da,#a6cdb8);
  --step-current-bg:var(--ink); --step-current-fg:#fff;
  --overlay:rgba(30,22,8,.42); --on-accent:#fff;
}
/* ---------- 深色模式（暖炭底 + 暖琥珀金 accent） ---------- */
[data-theme="dark"]{
  --bg:#1a1815; --surface:#2f2b27; --fill:#262320; --fill-2:#383330;
  --ink:#efeae3; --ink-2:#a39b91; --ink-3:#776f66;
  --line:rgba(255,255,255,.085); --line-2:rgba(255,255,255,.15);
  --accent:#e0a35e; --accent-hover:#e9b173; --accent-soft:#36291c; --accent-strong:#f1bf83;
  --success:#7cbd82; --success-soft:#242e22;
  --warn:#dcab4d; --warn-soft:#332b1a;
  --danger:#e8796e; --danger-soft:#3a2521;
  --focus:0 0 0 4px rgba(224,163,94,.32);
  --shadow-card:0 1px 2px rgba(0,0,0,.35),0 14px 34px rgba(0,0,0,.45);
  --shadow-pop:0 18px 60px rgba(0,0,0,.6);
  --brand-grad:linear-gradient(160deg,#e9b173,#d18f42);
  --cover-grad:linear-gradient(150deg,#3a322c,#2b2521);
  --step-current-bg:var(--accent); --step-current-fg:#1a1815;
  --overlay:rgba(0,0,0,.62); --on-accent:#1a1815;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  min-height:100vh;background:var(--bg);color:var(--ink);
  font-family:-apple-system,"SF Pro Text","PingFang SC","Helvetica Neue",Helvetica,Arial,"Microsoft YaHei",sans-serif;
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;letter-spacing:-.01em;
}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-family:inherit;letter-spacing:-.02em}
h1{font-size:17px;font-weight:600}
h2{font-size:21px;font-weight:600;line-height:1.25}
h3{font-size:16px;font-weight:600}
button,textarea,input,select{font:inherit;color:inherit}

/* ---------- 基础按钮 ---------- */
button,a.source-link{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border:none;border-radius:var(--r-ctrl);background:var(--fill);color:var(--ink);
  cursor:pointer;height:44px;padding:0 20px;font-size:15px;font-weight:600;text-decoration:none;
  transition:background .15s ease,color .15s ease,box-shadow .15s ease,opacity .15s ease;
}
button:hover,a.source-link:hover{background:var(--fill-2)}
button:disabled{cursor:default;opacity:.4}
button:focus-visible,a.source-link:focus-visible,textarea:focus,input:focus,select:focus{outline:none;box-shadow:var(--focus)}
.primary-button{background:var(--accent);color:var(--on-accent)}
.primary-button:hover{background:var(--accent-hover)}
.primary-button:disabled{background:var(--accent);opacity:.4}
.danger-button{background:none;color:var(--danger)}
.danger-button:hover{background:var(--danger-soft)}
.is-emphasis{box-shadow:var(--focus)}
/* 渐进展示：运行时控制按钮（暂停/继续/关闭）空闲即隐藏 */
.runtime-ctrl:disabled{display:none}

/* 尺寸辅助 */
.btn-sm{height:36px;font-size:13px;padding:0 14px;border-radius:9px}
.btn-quiet{background:none;color:var(--ink-2);height:38px;padding:0 12px}
.btn-quiet:hover{background:var(--fill);color:var(--ink)}

/* ---------- 布局 ---------- */
.app-shell{width:min(960px,calc(100vw - 40px));margin:0 auto;padding:22px 0 80px}
.workspace{display:grid;gap:22px}
.is-hidden{display:none !important}
.internal-config{display:none !important}

/* ---------- 顶栏 ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:6px 4px 0}
.brand{display:flex;align-items:center;gap:11px}
.brand .mark{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--brand-grad);color:#fff;box-shadow:0 2px 8px rgba(23,106,79,.32)}
.brand h1{font-size:17px;font-weight:600;letter-spacing:-.02em}
.topbar-meta{display:flex;align-items:center;gap:13px;flex-wrap:wrap;justify-content:flex-end}
.status-pill{display:inline-flex;align-items:center;gap:6px;color:var(--ink-2);font-size:13px;background:none;height:auto;padding:0}
.status-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ink-3)}
.status-pill.online::before{background:#34c759;box-shadow:0 0 0 3px rgba(52,199,89,.18)}
.usage-inline{display:inline-flex;align-items:baseline;gap:7px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);padding:7px 14px;color:var(--ink-3);font-size:12px}
.usage-inline strong{color:var(--ink);font-size:14px;font-weight:650;font-variant-numeric:tabular-nums}
.usage-inline .dot{display:inline-block;width:3px;height:3px;margin:0 3px;border-radius:50%;background:var(--line-2);vertical-align:middle}

/* ---------- 分段切换 (tab) ---------- */
.module-hub{display:inline-flex;justify-self:center;gap:4px;padding:4px;border-radius:var(--r-pill);background:var(--fill);border:1px solid var(--line)}
.module-card{height:auto;background:none;border-radius:var(--r-pill);padding:9px 20px;color:var(--ink-2);font-weight:500}
.module-card svg{width:16px;height:16px}
.module-card strong{font-size:14px;font-weight:500}
.module-card:hover{background:rgba(255,255,255,.5)}
.module-card.is-active{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(40,30,10,.13),0 1px 1px rgba(40,30,10,.04)}
.module-card.is-active strong{font-weight:600}

/* ---------- 主卡片骨架 ---------- */
.lark-panel,.input-panel{justify-self:center;width:100%;max-width:760px;background:var(--surface);border-radius:var(--r-card);box-shadow:var(--shadow-card)}
.lark-panel{max-width:880px}
.input-panel{display:block}

/* ====== 音视频 / 上传：quick-pane ====== */
.quick-pane{display:grid;gap:18px;padding:32px 34px}
.quick-lead h2{font-size:21px;font-weight:600}
.quick-lead p{margin-top:5px;color:var(--ink-2);font-size:14px}
.flabel{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin:0 0 8px 2px}
.quick-input{display:block}
.quick-pane textarea{
  width:100%;min-height:158px;resize:vertical;background:var(--fill);border:1px solid transparent;
  border-radius:14px;padding:15px 16px;font-size:15px;line-height:1.6;
}
.quick-pane textarea::placeholder{color:var(--ink-3)}
.quick-pane textarea:focus{background:var(--surface);box-shadow:var(--focus)}

/* dropzone */
.dropzone{position:relative;display:grid;place-items:center;gap:12px;text-align:center;min-height:210px;border:1.5px dashed var(--line-2);border-radius:16px;background:var(--fill);padding:30px;cursor:pointer;transition:border-color .15s,background .15s}
.dropzone:hover{border-color:var(--accent);background:var(--accent-soft)}
/* 原生 file 按钮彻底视觉隐藏，整块 label 可点击触发选择 */
.dropzone input[type="file"]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip:rect(0 0 0 0);opacity:0}
.dropzone .drop-ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:var(--surface);color:var(--accent);box-shadow:0 2px 8px rgba(40,30,10,.06)}
.dropzone .drop-text{display:grid;gap:4px;justify-items:center;min-width:0}
.dropzone .drop-title{font-size:16px;font-weight:600;color:var(--ink);max-width:100%;word-break:break-all}
.dropzone .drop-sub{color:var(--ink-3);font-size:13px}
.dropzone.has-file{border-style:solid;border-color:var(--accent);background:var(--accent-soft)}
.dropzone.has-file .drop-ic{background:var(--accent);color:var(--on-accent)}

/* 提示框 */
.note-box,.mode-note{display:flex;align-items:center;gap:9px;padding:12px 14px;background:var(--fill);border-radius:12px;color:var(--ink-2);font-size:13px;line-height:1.5}
.note-box svg{flex:none;color:var(--ink-3)}

/* ---------- 解释型单选卡 (转写方式) ---------- */
.mode-panel{display:grid;gap:10px}
.qtitle{font-size:13px;font-weight:600;color:var(--ink-2);margin:2px 0 0 2px}
.qopt{position:relative;display:flex;align-items:center;gap:14px;padding:15px 16px;border:1px solid var(--line);border-radius:14px;cursor:pointer;background:var(--surface);transition:border-color .15s,background .15s}
.qopt:hover{border-color:var(--line-2)}
.qopt input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.qopt .radio-dot{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line-2);flex:none;display:grid;place-items:center;transition:.15s}
.qopt-body{flex:1;min-width:0}
.qopt-t{font-size:15px;font-weight:600;display:flex;align-items:center;gap:8px}
.qopt-d{display:block;color:var(--ink-2);font-size:13px;margin-top:2px}
.qopt-hint{color:var(--ink-3);font-size:12px;white-space:nowrap;text-align:right}
.qopt-tag{font-size:11px;font-weight:650;color:var(--accent);background:var(--surface);border:1px solid var(--accent);border-radius:6px;padding:1px 6px}
.qopt:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.qopt:has(input:checked) .radio-dot{border-color:var(--accent);background:var(--accent)}
.qopt:has(input:checked) .radio-dot::after{content:"";width:7px;height:7px;border-radius:50%;background:#fff}
.qopt:has(input:checked) .qopt-tag{background:var(--accent);color:var(--on-accent)}

/* ---------- 运行行 (按钮 + 状态) ---------- */
.quick-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.quick-status{color:var(--ink-3);font-size:13px;font-weight:500}
.quick-status.is-active{color:var(--accent)}
.quick-status.is-success{color:var(--success)}
.quick-status.is-warning{color:var(--warn)}
.quick-status.is-error{color:var(--danger)}
.quick-hint{color:var(--ink-3);font-size:13px;line-height:1.5;margin:0 2px}
.quick-hint.is-active{color:var(--accent)}
.quick-hint.is-success{color:var(--success)}
.quick-hint.is-warning{color:var(--warn)}
.quick-hint.is-error{color:var(--danger)}

/* ====== 飞书表格：单列渐进流 ====== */
.lark-flow{display:grid;gap:0;padding:8px 34px 30px}
.lark-lead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:24px 0 18px}
.lark-lead h2{font-size:21px;font-weight:600}
.lark-lead p{margin-top:5px;color:var(--ink-2);font-size:14px}

/* 平台 segmented */
.platseg{display:inline-flex;gap:3px;padding:3px;border-radius:var(--r-pill);background:var(--fill);border:1px solid var(--line);flex:none}
.platseg label{position:relative;display:inline-flex;align-items:center;border-radius:var(--r-pill);padding:6px 16px;color:var(--ink-2);font-size:13px;font-weight:500;cursor:pointer}
.platseg input{position:absolute;opacity:0;width:0;height:0}
.platseg label:has(input:checked){background:var(--surface);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(40,30,10,.12)}

/* 飞书 App 入口 */
.lark-app-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:13px 16px;background:var(--fill);border-radius:14px;font-size:14px;color:var(--ink-2)}
.lark-app-bar-label{display:inline-flex;align-items:center;gap:8px}
.lark-app-bar-label strong{color:var(--ink);font-weight:600}
.lark-app-bar.is-configured .lark-app-bar-label strong{color:var(--success)}
.settings-button{height:36px;font-size:13px;padding:0 14px;background:var(--fill-2)}
.lark-app-bar .settings-button{background:var(--surface)}

/* 步骤块 */
.step-block{display:grid;gap:14px;padding:22px 0;border-top:1px solid var(--line)}
.step-head{display:flex;align-items:center;gap:10px}
.step-head h3{font-size:16px;font-weight:600}
.step-head .step-hint{margin-left:auto;font-size:12px;color:var(--ink-3)}
.step-n{width:24px;height:24px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--fill-2);color:var(--ink-2);font-size:13px;font-weight:600}
.step-block.is-current .step-n{background:var(--step-current-bg);color:var(--step-current-fg)}
.step-block.is-complete .step-n{background:var(--success);color:#fff;font-size:0}
.step-block.is-complete .step-n::after{content:"✓";font-size:13px;font-weight:700}
.step-block.is-attention .step-n{background:var(--warn-soft);color:var(--warn)}
.step-block.is-error .step-n{background:var(--danger-soft);color:var(--danger)}
.step-block.is-planned{opacity:.55}

/* 字段栅格 */
.field-stack{display:grid;gap:7px;color:var(--ink-2);font-size:13px;font-weight:600}
.lark-grid,.lark-grid-main{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.lark-grid label,.lark-grid-main > label{display:grid;gap:7px;color:var(--ink-2);font-size:13px;font-weight:600}
input,select,textarea{width:100%;min-width:0;border:1px solid transparent;border-radius:var(--r-ctrl);background:var(--fill);color:var(--ink)}
input,select{height:44px;padding:0 14px;font-size:14px}
input:focus,select:focus{background:var(--surface);box-shadow:var(--focus)}
select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23958d81' stroke-width='2.4' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 13px center;padding-right:34px}
.field-stack input{margin-top:0}

/* 高级设置折叠 */
.advanced-settings{border-top:1px dashed var(--line);padding-top:14px}
.advanced-settings summary{cursor:pointer;list-style:none;font-size:13px;font-weight:600;color:var(--accent);display:flex;align-items:center;gap:6px}
.advanced-settings summary::-webkit-details-marker{display:none}
.advanced-settings summary::before{content:"";width:12px;height:12px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231d6b52' stroke-width='2.6' stroke-linecap='round'><path d='M9 6l6 6-6 6'/></svg>") center/contain no-repeat;transition:transform .15s}
.advanced-settings[open] summary::before{transform:rotate(90deg)}
.advanced-settings[open] summary{margin-bottom:14px}
.advanced-settings .lark-grid{grid-template-columns:1fr 1fr}
.checkbox-control,.lark-checkbox{display:inline-flex;align-items:center;gap:9px;color:var(--ink-2);font-size:13px;font-weight:600;cursor:pointer}
.lark-checkbox{margin-top:12px}
.checkbox-control input,.lark-checkbox input{width:18px;height:18px;height:auto;accent-color:var(--accent);min-height:0}
.lark-checkbox input{width:18px;height:18px}

/* 转写方式（飞书内） */
.lark-mode-panel{margin-top:2px}

/* 预估 */
.lark-estimate{display:flex;align-items:center;gap:8px;padding:12px 15px;background:var(--accent-soft);border-radius:12px;color:var(--accent-strong);font-size:13.5px}
.lark-estimate strong{font-weight:650}

/* 动作行 */
.lark-actions,.task-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* 进度四指标 */
.task-strip{display:grid;gap:14px}
.summary-panel{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.metric{background:var(--fill);border-radius:14px;padding:16px;display:grid;gap:3px;place-items:center;text-align:center}
.metric span{font-size:26px;font-weight:680;font-variant-numeric:tabular-nums}
.metric label{color:var(--ink-2);font-size:12px}
.metric.success span{color:var(--success)}
.metric.warning span{color:var(--warn)}
.metric.danger span{color:var(--danger)}

/* 状态条 / 下一步 */
.lark-status{padding:12px 14px;background:var(--fill);border-radius:12px;color:var(--ink-2);white-space:pre-wrap;line-height:1.5;font-size:13.5px}
.lark-status.is-active{background:var(--accent-soft);color:var(--accent-strong)}
.lark-status.is-success{background:var(--success-soft);color:var(--success)}
.lark-status.is-warning{background:var(--warn-soft);color:var(--warn)}
.lark-status.is-error{background:var(--danger-soft);color:var(--danger)}
.next-action{padding:12px 14px;background:var(--accent-soft);border-radius:12px;color:var(--accent-strong);font-size:13px;font-weight:600;line-height:1.5}
.next-action.is-success{background:var(--success-soft);color:var(--success)}
.next-action.is-warning{background:var(--warn-soft);color:var(--warn)}
.next-action.is-error{background:var(--danger-soft);color:var(--danger)}

/* 候选预览 */
.lark-preview{display:grid;gap:8px}
.lark-preview-row{display:grid;grid-template-columns:160px 1fr;gap:12px;padding:11px 14px;background:var(--fill);border-radius:11px;font-size:13px}
.lark-preview-row strong{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lark-preview-row span{color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- 结果区 ---------- */
.actions-bar{justify-self:center;width:100%;max-width:760px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:0 2px}
.actions-bar button{height:38px;padding:0 14px;font-size:13px;border-radius:9px;background:none;color:var(--ink-2)}
.actions-bar button:hover{background:var(--surface);color:var(--ink)}
.actions-bar button:disabled{opacity:.4}
.results-panel{justify-self:center;width:100%;max-width:760px;display:grid;gap:14px}
.results-head h2{font-size:16px;font-weight:600}
.results{display:grid;gap:14px}
.result-card{display:grid;grid-template-columns:128px 1fr;gap:18px;background:var(--surface);border-radius:18px;box-shadow:var(--shadow-card);padding:18px}
.result-card.no-cover{grid-template-columns:1fr}
.cover{width:128px;height:170px;object-fit:cover;border-radius:12px;background:var(--cover-grad)}
.result-main{min-width:0;display:grid;gap:10px;align-content:start}
.result-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.result-head .meta{color:var(--ink-3);font-size:12px}
.result-head h2{font-size:18px;font-weight:600;margin-top:3px}
.result-status{flex:none;align-self:flex-start;border-radius:var(--r-pill);padding:4px 10px;background:var(--success-soft);color:var(--success);font-size:12px;font-weight:600;white-space:nowrap}
.result-status.needs-asr{background:var(--warn-soft);color:var(--warn)}
.result-status.error{background:var(--danger-soft);color:var(--danger)}
.result-status.accurate{background:var(--success-soft);color:var(--success)}
.description{color:var(--ink-2);font-size:13px;line-height:1.55;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.result-main details{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.result-main summary{cursor:pointer;list-style:none;padding:11px 14px;color:var(--ink-2);font-size:13px;font-weight:600}
.result-main summary::-webkit-details-marker{display:none}
.transcript,.timed{max-height:300px;margin:0;overflow:auto;border-top:1px solid var(--line);padding:14px 15px;white-space:pre-wrap;word-break:break-word;line-height:1.7}
.transcript{font-family:inherit;font-size:15px;color:var(--ink)}
.timed{font-family:"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;color:var(--ink-2);line-height:1.7}
.result-actions{display:flex;flex-wrap:wrap;gap:8px}
.result-actions button,.result-actions a.source-link{height:36px;font-size:13px;padding:0 14px;border-radius:9px}

/* ---------- 设置弹层 ---------- */
.modal-overlay{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:24px;background:var(--overlay)}
.modal-overlay.is-hidden{display:none}
.modal-dialog{width:min(480px,100%);max-height:90vh;overflow:auto;display:grid;gap:14px;background:var(--surface);border-radius:22px;box-shadow:var(--shadow-pop);padding:26px}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.modal-head h2{font-size:19px;font-weight:600}
.modal-close{width:30px;height:30px;padding:0;border-radius:50%;background:var(--fill);color:var(--ink-2);font-size:18px}
.modal-desc{color:var(--ink-2);font-size:13px;line-height:1.6}
.modal-grid{display:grid;gap:13px}
.app-config-card{display:grid;gap:6px;padding:14px;background:var(--fill);border-radius:14px}
.app-config-card strong{color:var(--ink);font-size:15px;font-weight:600}
.app-config-card p{color:var(--ink-2);font-size:13px;line-height:1.5}
.app-config-card.is-configured{background:var(--success-soft)}
.app-config-card.is-error{background:var(--danger-soft)}
.app-config-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:4px}
.app-config-actions .primary-button{flex:1}

/* ---------- 响应式 ---------- */
@media (max-width:820px){
  .topbar{flex-direction:column;align-items:stretch;gap:12px}
  .topbar-meta{justify-content:center}
  .lark-lead{flex-direction:column}
  .lark-grid,.lark-grid-main,.advanced-settings .lark-grid,.summary-panel{grid-template-columns:1fr 1fr}
  .quick-pane,.lark-flow{padding-left:22px;padding-right:22px}
}
@media (max-width:560px){
  .app-shell{width:calc(100vw - 24px);padding-top:14px}
  .module-card{padding:9px 14px}
  .module-card strong{font-size:13px}
  .lark-grid,.lark-grid-main,.advanced-settings .lark-grid,.summary-panel{grid-template-columns:1fr}
  .result-card{grid-template-columns:96px 1fr;gap:12px}
  .cover{width:96px;height:128px}
  .qopt{flex-wrap:wrap}
  .qopt-hint{width:100%;text-align:left;padding-left:34px}
}

/* ---------- 主题切换按钮 + 深色下写死颜色的覆盖 ---------- */
.theme-toggle{width:38px;height:38px;border-radius:50%;background:var(--surface);border:1px solid var(--line);color:var(--ink-2);display:grid;place-items:center;padding:0;flex:none}
.theme-toggle:hover{background:var(--fill);color:var(--ink)}
.theme-toggle svg{width:18px;height:18px}
.theme-toggle .icon-sun{display:none}
[data-theme="dark"] .theme-toggle .icon-moon{display:none}
[data-theme="dark"] .theme-toggle .icon-sun{display:block}
/* 下拉箭头 / 折叠箭头是 data-uri svg、颜色写死，深色下单独覆盖成更亮 */
[data-theme="dark"] select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a39b91' stroke-width='2.4' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>")}
[data-theme="dark"] .advanced-settings summary::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23e0a35e' stroke-width='2.6' stroke-linecap='round'><path d='M9 6l6 6-6 6'/></svg>")}

/* ============ 账户登录门 (Step A / A3，2026-06-15) ============ */
/* 状态机:html[data-auth] = out(显示门、藏 app) | maybe(乐观显示 app) | in(确认登录)。
   account/usage 仅 in 时显示，避免 maybe 阶段闪空账户信息。 */
.auth-gate{display:none;position:fixed;inset:0;z-index:60;align-items:center;justify-content:center;padding:24px;background:var(--bg)}
html[data-auth="out"] .auth-gate{display:flex}
html[data-auth="out"] .app-shell{display:none}
.account-pill,.usage-inline{display:none}
html[data-auth="in"] .account-pill{display:inline-flex}
html[data-auth="in"] .usage-inline{display:inline}
.auth-card{width:min(380px,100%);display:grid;gap:15px;background:var(--surface);border-radius:var(--r-card);box-shadow:var(--shadow-card);padding:30px 28px}
.auth-brand{display:flex;align-items:center;gap:9px;color:var(--accent);font-weight:700;font-size:15px}
.auth-brand .mark{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--accent-soft)}
.auth-card h1{margin:0;font-size:21px;color:var(--ink)}
.auth-form{display:grid;gap:13px}
.auth-submit{width:100%;justify-content:center;padding:11px 16px;border:none;border-radius:var(--r-ctrl);font-size:15px;font-weight:600;cursor:pointer;margin-top:3px}
.auth-hint{font-size:12.5px;color:var(--ink-3);margin:0}
.auth-error{font-size:13px;color:var(--danger);background:var(--danger-soft);border-radius:9px;padding:8px 11px;margin:0}
.auth-switch{font-size:13px;color:var(--ink-2);text-align:center;margin:0}
.auth-switch button{background:none;border:none;color:var(--accent);font-weight:600;cursor:pointer;font-size:13px;padding:0 2px}
.account-pill{align-items:center;gap:8px;font-size:13px;color:var(--ink-2)}
.account-pill #accountEmail{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-pill button{background:var(--fill-2);border:none;border-radius:var(--r-pill);color:var(--ink-2);font-size:12px;padding:4px 11px;cursor:pointer}
.account-pill button:hover{color:var(--ink);background:var(--line-2)}