/* ============================================================
   转写工作台 · 暖墨绿苹果风 (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)}
.ghost{background:none;color:var(--ink-2)}
.ghost:hover{background:var(--fill);color:var(--ink)}
.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)}
.public-stats{color:var(--ink-2);font-size:13px;white-space:nowrap}
.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;max-width:100%;overflow-x:auto;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;background:transparent;box-shadow:none;border-radius:0}
.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:14px;font-weight:650;color:var(--ink);margin:0 0 8px 2px}
.flabel-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.input-clear{height:26px;border-radius:8px;padding:0 10px;font-size:12px;background:none;color:var(--ink-3)}
.input-clear:hover{background:var(--fill);color:var(--ink)}
.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)}
[data-theme="dark"] .dropzone:hover,[data-theme="dark"] .dropzone.has-file,[data-theme="dark"] .dropzone.has-file:hover{background:var(--fill)}

/* 提示框 */
.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}
.billing-hint{color:var(--ink-2);font-size:13px;line-height:1.5}
.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:0}
.lark-lead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:4px 6px 16px}
.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:1px solid var(--line);border-radius:14px;font-size:14px;color:var(--ink-2)}
.lark-app-bar-actions{display:flex;align-items:center;gap:14px}
.help-link{color:var(--accent);font-weight:650;font-size:13.5px;text-decoration:none}
.help-link:hover{text-decoration:underline}
.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)}

/* 自动挂表 */
.watch-panel{gap:16px}
.watch-badge{margin-left:auto;display:inline-flex;align-items:center;min-height:26px;padding:4px 10px;border-radius:var(--r-pill);background:var(--fill);color:var(--ink-2);font-size:12px;font-weight:650}
.watch-badge[data-status="enabled"]{background:var(--success-soft);color:var(--success)}
.watch-badge[data-status="paused"]{background:var(--warn-soft);color:var(--warn)}
.watch-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:14px;align-items:start}
.watch-metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.watch-metrics div{min-height:78px;display:grid;align-content:center;gap:5px;padding:14px;background:var(--fill);border-radius:12px}
.watch-metrics span{font-size:15px;font-weight:680;color:var(--ink);font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.watch-metrics label{font-size:12px;color:var(--ink-3)}
.watch-confirm{display:grid;gap:11px;padding:14px;background:var(--fill);border-radius:12px}
.watch-confirm .field-stack input{background:var(--surface)}
.watch-copy{font-size:12.5px;color:var(--ink-2);line-height:1.55;margin:0}
.watch-copy.is-warning{padding:9px 10px;border-radius:10px;background:var(--warn-soft);color:var(--warn);font-weight:600}
.watch-actions button{height:38px;font-size:13px;padding:0 14px}

/* 步骤块 */
.step-block{display:grid;gap:14px;padding:22px 24px;margin-top:14px;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-card)}
.step-head{display:flex;align-items:center;gap:10px}
.step-head h3{font-size:17px;font-weight:700}
.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(--accent-soft);color:var(--accent-strong);font-size:13px;font-weight:700}
.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);font-size:14px;font-weight:650}
.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);font-size:14px;font-weight:650}
input,select,textarea{width:100%;min-width:0;border:1px solid var(--line-2);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}

/* ---------- 转写库 ---------- */
.library-panel{justify-self:center;width:100%;max-width:960px}
.library-shell{display:grid;gap:16px}
.library-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.library-head h2{font-size:21px;font-weight:600}
.library-search{display:flex;align-items:center;gap:8px;flex:1;min-width:min(100%,420px);justify-content:flex-end}
.library-search label{color:var(--ink-2);font-size:13px;font-weight:600}
.library-search input{max-width:280px;background:var(--surface);border-color:var(--line)}
.library-search button{height:38px;padding:0 14px;font-size:13px;border-radius:9px}
.library-search .primary{background:var(--accent);color:var(--on-accent)}
.library-search .primary:hover{background:var(--accent-hover)}
.library-grid{display:grid;grid-template-columns:minmax(260px,320px) minmax(0,1fr);gap:16px;align-items:start}
.library-list-pane{display:grid;gap:10px;background:var(--surface);border-radius:18px;box-shadow:var(--shadow-card);padding:12px;min-width:0}
.library-status{min-height:20px;color:var(--ink-3);font-size:13px;line-height:1.5}
.library-status.is-error{color:var(--danger)}
.library-empty,.library-detail-empty{color:var(--ink-2);font-size:14px;text-align:center;background:var(--fill);border-radius:14px;padding:28px 16px}
.library-list{display:grid;gap:8px;max-height:min(520px,calc(100vh - 260px));overflow:auto;padding-right:2px}
.library-item{width:100%;height:auto;display:grid;justify-content:normal;gap:8px;text-align:left;background:var(--fill);border:1px solid transparent;border-radius:14px;padding:12px;color:var(--ink)}
.library-item:hover{background:var(--fill-2)}
.library-item.is-active{background:var(--accent-soft);border-color:var(--accent);color:var(--ink)}
.library-item-main{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;min-width:0}
.library-item-title{font-size:14px;font-weight:600;line-height:1.35;overflow-wrap:anywhere}
.library-platform{flex:none;border-radius:var(--r-pill);background:var(--surface);color:var(--accent);padding:2px 8px;font-size:12px;font-weight:650}
.library-item-meta{display:flex;flex-wrap:wrap;gap:7px 10px;color:var(--ink-3);font-size:12px;line-height:1.4}
.library-more{height:38px;font-size:13px;border-radius:10px}
.library-detail{display:grid;gap:12px;min-width:0}
.library-detail-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.library-detail-head h3{min-width:0;font-size:16px;font-weight:600;overflow-wrap:anywhere}
.library-detail-actions{display:flex;gap:8px;flex-wrap:wrap}
.library-detail-actions button{height:36px;font-size:13px;border-radius:9px;padding:0 13px}
.library-detail-results{min-width:0}
.library-detail-results .result-card{margin:0}
.cache-notice{border-radius:12px;background:var(--accent-soft);color:var(--accent-strong);padding:10px 12px;font-size:13px;line-height:1.5}

/* ---------- 结果区 ---------- */
.actions-bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.results-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.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-summary{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;background:var(--surface);border-radius:14px;box-shadow:var(--shadow-card);padding:14px 18px;font-size:16px;font-weight:650;color:var(--ink)}
.results-summary strong{font-size:19px;font-weight:750}
.results-summary .sum-ok{color:var(--success)}
.results-summary .sum-fail{color:var(--danger)}
.results-summary .sum-cost{color:var(--accent-strong)}
.results-summary .sum-sep{color:var(--ink-3);font-weight:400;margin:0 4px}
.results-summary .sum-progress{color:var(--accent)}
.recharge-prompt{margin-top:-5px;padding:0 18px;color:var(--ink-2);font-size:13px}
.recharge-prompt span{color:var(--ink-3);margin:0 3px}
.recharge-prompt a,.item-recharge-link{color:var(--accent);font-weight:650;text-decoration:none}
.recharge-prompt a:hover,.item-recharge-link:hover{text-decoration:underline}
.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;min-width:0}
.result-head>div{min-width:0} /* flex 子项:破 min-width:auto，否则超长无空格链接(小红书整段分享文案)撑破卡片 */
.result-head .meta{color:var(--ink-3);font-size:12px;overflow-wrap:anywhere}
.result-head h2{font-size:18px;font-weight:600;margin-top:3px;overflow-wrap:anywhere}
.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-row{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap;min-width:0}
.description{flex:1 1 220px;min-width:0;color:var(--ink-2);font-size:13px;line-height:1.55;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.item-recharge-link{flex:none;font-size:13px;line-height:1.55;white-space:nowrap}
.no-charge-badge{flex:none;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--fill);color:var(--ink-2);padding:2px 8px;font-size:12px;font-weight:600;line-height:1.5;white-space:nowrap}
.no-charge-badge.is-hidden{display:none}
.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}
.artifact-section{display:grid;gap:10px;border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--fill)}
.artifact-section.is-hidden{display:none}
.artifact-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.artifact-box{min-width:0;display:grid;gap:9px;align-content:start;border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:12px}
.artifact-box-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.artifact-box-head strong{font-size:13px;font-weight:650}
.artifact-state{flex:none;border-radius:var(--r-pill);background:var(--fill);color:var(--ink-2);padding:3px 8px;font-size:11px;font-weight:650;white-space:nowrap}
.artifact-state.is-active{background:var(--accent-soft);color:var(--accent-strong)}
.artifact-state.is-success{background:var(--success-soft);color:var(--success)}
.artifact-state.is-warning{background:var(--warn-soft);color:var(--warn)}
.artifact-state.is-error{background:var(--danger-soft);color:var(--danger)}
.artifact-controls{display:flex;flex-wrap:wrap;gap:8px}
.artifact-controls button{height:32px;border-radius:8px;padding:0 11px;font-size:12px}
.artifact-copy{background:none;color:var(--ink-2)}
.artifact-copy:hover{background:var(--fill);color:var(--ink)}
.transcript-main-section .artifact-box-head .artifact-copy{flex:none;height:28px;border-radius:8px;padding:0 10px;font-size:12px}
.transcript-main-section .artifact-box-head strong{font-size:15px;font-weight:700;color:var(--ink)}
.transcript-main-section .transcript,.transcript-main-section .timed{border-top:0;padding:0}
.transcript-main-section .transcript{font-size:15px;color:var(--ink)}
.transcript-main-section .timed{font-size:14px;color:var(--ink)}
.artifact-grid-single{grid-template-columns:1fr}
.artifact-content{min-height:42px;color:var(--ink-2);font-size:13px;line-height:1.6}
.artifact-placeholder{color:var(--ink-3)}
.artifact-text{max-height:220px;margin:0;overflow:auto;white-space:pre-wrap;word-break:break-word;font-family:inherit;font-size:13px;line-height:1.65;color:var(--ink)}
.artifact-summary{margin:0;padding-left:18px;display:grid;gap:5px;color:var(--ink)}
.artifact-warning,.artifact-error{border-radius:9px;padding:8px 10px;margin:0 0 8px;font-size:12.5px;line-height:1.5}
.artifact-warning{background:var(--warn-soft);color:var(--warn)}
.artifact-error{background:var(--danger-soft);color:var(--danger)}
.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}
/* 历史账单(余额药丸点开) */
.usage-inline{cursor:pointer}
.usage-inline:hover{color:var(--accent)}
.usage-inline:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:999px}
.history-dialog{width:min(680px,100%)}
.redeem-panel{display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px 16px;background:var(--fill);border-radius:14px}
.redeem-head{display:flex;justify-content:center}
.redeem-title{font-size:16.5px;font-weight:700;color:var(--ink)}
.redeem-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;width:100%;max-width:680px;justify-content:center}
.redeem-row .primary-button{height:44px}
.pricing-button{display:inline-flex;align-items:center;height:44px;padding:0 16px;border:1.5px solid var(--accent);border-radius:11px;color:var(--accent);font-size:14.5px;font-weight:650;text-decoration:none;white-space:nowrap}
.pricing-button:hover{background:var(--accent-soft)}
.redeem-meta{min-height:22px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.redeem-meta #redeemStatus{color:var(--ink-2);font-size:13px;line-height:1.5}
.redeem-meta #redeemStatus.is-success{color:var(--success)}
.redeem-meta #redeemStatus.is-error{color:var(--danger)}
.history-body{max-height:60vh;overflow:auto}
.history-table{width:100%;border-collapse:collapse;font-size:13px}
.history-table th,.history-table td{padding:9px 10px;text-align:left;border-bottom:1px solid var(--fill-2);white-space:nowrap}
.history-table th{position:sticky;top:0;background:var(--surface);color:var(--ink-2);font-weight:600;font-size:12px}
.history-table td.num{font-variant-numeric:tabular-nums}
.history-status{font-size:11px;color:var(--ink-2);margin-left:6px}
.history-empty,.history-loading{color:var(--ink-2);font-size:14px;text-align:center;padding:28px 0}
/* 窄屏:表格转堆叠卡(标签:值),避免关键列(消耗/余额)被横向裁切 */
@media (max-width:600px){
  .redeem-row{grid-template-columns:1fr}
  .redeem-row .primary-button{width:100%}
  .history-table thead{display:none}
  .history-table,.history-table tbody,.history-table tr,.history-table td{display:block;width:auto}
  .history-table tr{border-bottom:1px solid var(--fill-2);padding:8px 0}
  .history-table td{display:flex;justify-content:space-between;gap:16px;padding:4px 2px;border:0;white-space:normal;text-align:right}
  .history-table td::before{content:attr(data-label);color:var(--ink-2);font-weight:600;text-align:left}
}
.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,.watch-grid{grid-template-columns:1fr 1fr}
  .quick-pane{padding-left:22px;padding-right:22px}
  .step-block{padding:18px 16px}
  .library-grid{grid-template-columns:1fr}
  .library-list{max-height:320px}
}
@media (max-width:560px){
  .app-shell{width:calc(100vw - 24px);padding-top:14px}
  .module-card{padding:9px 14px}
  .module-card strong{font-size:13px}
  .library-head{align-items:stretch}
  .library-search{justify-content:stretch}
  .library-search input{max-width:none}
  .library-search label{width:100%}
  .lark-grid,.lark-grid-main,.advanced-settings .lark-grid,.summary-panel,.watch-grid,.watch-metrics{grid-template-columns:1fr}
  .artifact-grid{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{position:relative;align-items:center}
.account-avatar{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--avatar-bg,var(--accent));color:#fff;font-size:16px;font-weight:700;display:grid;place-items:center;padding:0;cursor:pointer;flex:none}
.account-avatar:hover{filter:brightness(1.06)}
.account-avatar[aria-expanded="true"]{box-shadow:0 0 0 3px var(--accent-soft)}
.account-menu{position:absolute;top:calc(100% + 10px);left:0;min-width:230px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-card);padding:8px;z-index:60;display:grid;gap:2px}
.account-menu::before{content:"";position:absolute;top:-6px;left:13px;width:11px;height:11px;background:var(--surface);border-left:1px solid var(--line);border-top:1px solid var(--line);transform:rotate(45deg)}
.account-menu-email{padding:9px 12px 10px;font-size:13px;color:var(--ink-2);border-bottom:1px solid var(--line);margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-menu-item{display:block;width:100%;text-align:left;background:none;border:none;border-radius:9px;padding:10px 12px;font-size:14px;color:var(--ink);cursor:pointer}
.account-menu-item:hover{background:var(--fill)}
.account-menu-item.is-danger{color:var(--danger)}

/* ============ 账户设置齿轮 + 通知设置 modal (Step 4 ④,2026-06-20) ============ */
/* 设置入口已收进头像下拉菜单(条目51)；菜单随 account-pill 的 data-auth 门控，maybe 阶段不可见 */
.config-hint{color:var(--ink-3);font-size:12.5px;line-height:1.5;margin:0}
.notify-browser-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.modal-actions{display:flex;align-items:center;gap:12px;margin-top:2px}
.modal-actions .primary-button{min-width:96px}
.account-status.is-success{color:var(--success)}
.account-status.is-error{color:var(--danger)}