/* =====================================================================
   两套高级主题（11/06）：澄（浅）· 深海（深）
   设计原则：
   1. 少框：靠底色深浅分层，细线只用来分隔，不给每块都套边框加阴影
   2. 一个主色：深海蓝只给"选中 / 主按钮 / 在干"；琥珀只给"等你定"；红只给出错和未读
   3. 字有层级：大标题收紧字距，小标签变小变淡，数字等宽
   4. 动效只给正在发生的事：悬停轻抬、按下轻压、页面进来淡入，系统设了"减少动态"就全关
   html.pro = 用的是这两套之一（app.js applyTheme 加）
   ===================================================================== */

/* ---------- 澄：浅色，冷白 + 深海蓝 ---------- */
:root[data-theme="clarity"] {
  --brand: #1b5279; --brand-ink: #ffffff; --brand-tint: rgba(27, 82, 121, .075);
  --brand-soft: #e9f0f6; --brand-deep: #123a57;
  --bg: #fbfcfd; --side: #f4f6f8; --surface: #f7f8fa;
  --hover: rgba(16, 36, 56, .045); --active: rgba(16, 36, 56, .075);
  --line: rgba(16, 36, 56, .075); --line-strong: rgba(16, 36, 56, .14);
  --text: #121821; --text-2: #4a5462; --text-3: #8a93a0;
  --bubble: #eef2f6; --code: #f3f5f8; --card: #ffffff;
  --ok: #2b8a63; --warn: #b8791c; --err: #c9453b; --live: #1b5279;
  --shadow-sm: 0 1px 2px rgba(16, 36, 56, .05);
  --shadow: 0 1px 2px rgba(16, 36, 56, .04), 0 8px 24px rgba(16, 36, 56, .06);
  --shadow-pop: 0 2px 6px rgba(16, 36, 56, .06), 0 20px 50px rgba(16, 36, 56, .14);
  --ring: 0 0 0 3px rgba(27, 82, 121, .14);
  --hero-bg: #ffffff; --hero-ink: var(--text); --hero-2: var(--text-2); --hero-3: var(--text-3);
  --hero-tile: var(--surface); --hero-tile-h: var(--active); --hero-line: var(--line);
  color-scheme: light;
}

/* ---------- 深海：深色，海军蓝底 + 亮海蓝 ---------- */
:root[data-theme="abyss"] {
  --brand: #5eaee8; --brand-ink: #06121d; --brand-tint: rgba(94, 174, 232, .12);
  --brand-soft: rgba(94, 174, 232, .14); --brand-deep: #9fd0f5;
  --bg: #0b131c; --side: #080f17; --surface: #0f1924;
  --hover: rgba(150, 190, 230, .06); --active: rgba(150, 190, 230, .10);
  --line: rgba(150, 190, 230, .09); --line-strong: rgba(150, 190, 230, .17);
  --text: #e6edf5; --text-2: #a2b0c0; --text-3: #667588;
  --bubble: #15263a; --code: #08111a; --card: #101b27;
  --ok: #43c08d; --warn: #e5a849; --err: #f06c5f; --live: #5eaee8;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px rgba(0, 0, 0, .35);
  --shadow-pop: 0 2px 8px rgba(0, 0, 0, .4), 0 24px 60px rgba(0, 0, 0, .55);
  --ring: 0 0 0 3px rgba(94, 174, 232, .22);
  --hero-bg: linear-gradient(160deg, #11243a 0%, #0d1a2a 55%, #0b1520 100%);
  --hero-ink: #eef5fc; --hero-2: #a9bccf; --hero-3: #6f8397;
  --hero-tile: rgba(150, 190, 230, .06); --hero-tile-h: rgba(150, 190, 230, .11); --hero-line: rgba(150, 190, 230, .12);
  color-scheme: dark;
}

/* =====================================================================
   两套共用：版式、交互
   ===================================================================== */
.pro body { letter-spacing: 0; font-feature-settings: "tnum" 1; }
.pro ::selection { background: color-mix(in srgb, var(--brand) 22%, transparent); }
.pro * { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.pro :focus-visible { outline: none; box-shadow: var(--ring); }
.pro button { transition: background-color .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .12s ease; }
.pro button:active:not(:disabled) { transform: scale(.97); }

/* 左边图标栏：选中不再是一整块灰，改成左边一道主色 + 图标变主色 */
.pro .rail { background: var(--side); border-right-color: var(--line); gap: 2px; }
.pro .rail-i { border-radius: 10px; color: var(--text-3); }
.pro .rail-i:hover { background: var(--hover); color: var(--text); }
.pro .rail-i.on { background: transparent; color: var(--brand); }
.pro .rail-i.on::before { content: ""; position: absolute; left: -7px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--brand); }
.pro .rail-i.on em { font-weight: 600; }
.pro .rail-i em { font-size: 10.5px; letter-spacing: .02em; }
.pro .rail-dir .ava { border-radius: 11px; box-shadow: none; background: var(--brand); color: var(--brand-ink); }
.pro .rail-dir.on .ava { box-shadow: var(--ring); }
.pro .rail-dot { background: var(--live); }

/* 顶栏 */
.pro .top { border-bottom: 1px solid transparent; }
.pro .top-title b { font-weight: 600; letter-spacing: -.005em; }

/* 对话 */
.pro .q-b { background: var(--bubble); border-radius: 18px 18px 6px 18px; padding: 10px 16px; }
.pro .md code { border: 0; background: var(--code); }
.pro .md pre, .pro .md .tbl { border-color: var(--line); border-radius: 12px; }
.pro .md th { background: var(--surface); font-weight: 600; color: var(--text-2); font-size: 13px; }

/* 输入框：更轻的边、聚焦一圈主色光 */
.pro .composer { border-color: var(--line-strong); border-radius: 22px; box-shadow: var(--shadow); }
.pro .composer:focus-within { border-color: color-mix(in srgb, var(--brand) 50%, var(--line-strong)); box-shadow: var(--shadow), var(--ring); }
.pro .c-send { background: var(--brand); color: var(--brand-ink); }
.pro .c-send:disabled { opacity: .25; }
.pro .pill { border-color: var(--line); background: transparent; }
.pro .pill:hover { background: var(--hover); border-color: var(--line-strong); }
.pro .quick button, .pro .sug { border-color: var(--line); background: var(--card); color: var(--text-2); }
.pro .quick button:hover, .pro .sug:hover { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); background: var(--brand-tint); }

/* 总监页：去掉渐变底，回答卡片不再套左边粗线 */
.pro .main.dir-view { background: var(--bg); }
.pro .main.dir-view .turn .a { border: 1px solid var(--line); border-left: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-sm); background: var(--card); }
.pro .main.dir-view .q-b { background: var(--brand); color: var(--brand-ink); }
.pro .main.dir-view .composer { border-color: var(--line-strong); box-shadow: var(--shadow); }
.pro .main.dir-view .composer:focus-within { border-color: color-mix(in srgb, var(--brand) 50%, var(--line-strong)); box-shadow: var(--shadow), var(--ring); }

/* 指挥台 */
.pro .hero { background: var(--hero-bg); color: var(--hero-ink); border: 1px solid var(--hero-line); border-radius: 22px; box-shadow: var(--shadow); padding: 22px 22px 18px; }
.pro .hero::after { display: none; }
.pro .hero-ava { background: var(--brand); color: var(--brand-ink); border: 0; border-radius: 14px; font-size: 18px; }
.pro .hero-id b { color: var(--hero-ink); font-size: 21px; font-weight: 650; letter-spacing: -.015em; }
.pro .hero-id span { color: var(--hero-2); }
.pro .hero-stats { gap: 0; border: 1px solid var(--hero-line); border-radius: 14px; overflow: hidden; }
.pro .hs { background: transparent; border: 0; border-radius: 0; padding: 9px 16px; min-width: 84px; }
.pro .hs + .hs { border-left: 1px solid var(--hero-line); }
.pro .hs:hover { background: var(--hero-tile-h); }
.pro .hs b { color: var(--hero-ink); font-size: 24px; font-weight: 600; }
.pro .hs span { color: var(--hero-3); }
.pro .hs.warn { background: color-mix(in srgb, var(--warn) 10%, transparent); }
.pro .hs.warn b { color: var(--warn); }
.pro .hs.busy b { color: var(--live); }
.pro .hero-brief { background: var(--hero-tile); border: 0; border-radius: 14px; margin-top: 16px; }
.pro .hero-brief:hover { background: var(--hero-tile-h); }
.pro .hero-brief em { color: var(--brand); font-weight: 600; letter-spacing: .02em; }
.pro .hero-brief b { color: var(--hero-ink); }
.pro .hero-brief span { color: var(--hero-3); }
.pro .ht { background: var(--hero-tile); border: 1px solid transparent; }
.pro .ht:hover { background: var(--hero-tile-h); }
.pro .ht b { color: var(--hero-ink); }
.pro .ht em { color: var(--hero-3); }
.pro .ht .ava { background: var(--card); }
.pro .ht.working { border-color: color-mix(in srgb, var(--live) 55%, transparent); box-shadow: none; }
.pro .ht.working em { color: var(--live); }

/* 右边工作面板 */
.pro .panel { background: var(--side); border-left-color: var(--line); }
.pro .pn-head > div b { font-size: 16px; letter-spacing: -.01em; }
.pro .pn-sec h4 { font-size: 11.5px; letter-spacing: .06em; color: var(--text-3); font-weight: 600; }
.pro .pn-stats { gap: 0; background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.pro .st { border: 0; border-radius: 0; background: transparent; padding: 12px 14px; }
.pro .st + .st { border-left: 1px solid var(--line); }
.pro .st b { font-size: 24px; font-weight: 600; }
.pro .st.warn { background: color-mix(in srgb, var(--warn) 8%, transparent); }
.pro .st.busy b { color: var(--live); }
.pro .pn-push { background: transparent; }
.pro .dc { border-color: var(--line); border-radius: 14px; box-shadow: none; }
.pro .dc:hover { box-shadow: var(--shadow-sm); border-color: var(--line-strong); }
.pro .dc::before { top: 12px; bottom: 12px; }
.pro .dc-t { font-weight: 450; color: var(--text); }
.pro .chip-a { background: transparent; border-color: var(--line-strong); }
.pro .chip-a:hover { background: var(--brand-tint); color: var(--brand); border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }
.pro .wk, .pro .dn, .pro .pn-row { border-color: var(--line); border-radius: 12px; box-shadow: none; }
.pro .wk { border-color: color-mix(in srgb, var(--live) 30%, var(--line)); }
.pro .wk:hover, .pro .dn:hover, .pro .pn-row:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }

/* 公司页：页签改成分段按钮 */
.pro .co-tabs { gap: 2px; padding: 0 24px 12px; border-bottom: 1px solid var(--line); }
.pro .co-tabs button { height: 32px; border-radius: 9px; padding: 0 14px; font-size: 13.5px; color: var(--text-3); }
.pro .co-tabs button:hover { color: var(--text); background: var(--hover); }
.pro .co-tabs button.on { color: var(--text); background: var(--active); font-weight: 600; }
.pro .co-tabs button.on::after { display: none; }
.pro .br-head h1 { font-size: 26px; font-weight: 650; letter-spacing: -.02em; }
.pro .br-head em { font-size: 11.5px; letter-spacing: .06em; }

/* 数字：一条横排，用细线隔开，不再一格一个框 */
.pro .ov-kpi { gap: 0; background: var(--card); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.pro .kp { border: 0; border-radius: 0; background: transparent; padding: 18px 20px; }
.pro .kp + .kp { border-left: 1px solid var(--line); }
.pro .kp:hover { background: var(--hover); box-shadow: none; }
.pro .kp b { font-size: 32px; font-weight: 600; letter-spacing: -.02em; }
.pro .kp span { font-size: 12px; letter-spacing: .02em; }
.pro .kp.review b { color: var(--brand-deep); }
.pro .kp.busy b { color: var(--live); }
.pro .ov-card { border-color: var(--line); border-radius: 18px; padding: 16px 18px; }
.pro .ov-card h3 { font-size: 14px; letter-spacing: -.005em; }
.pro .ov-row { border-radius: 10px; }
.pro .ov-p { border-color: var(--line); border-radius: 16px; }
.pro .ov-p:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.pro .ov-p.working { border-color: color-mix(in srgb, var(--live) 55%, var(--line)); box-shadow: none; }
.pro .lst.review { background: var(--brand-soft); color: var(--brand-deep); }
.pro .lg-col { background: var(--surface); border-color: transparent; }
.pro .lg-col.review h4 { color: var(--brand-deep); }
.pro .lg-card { border-color: var(--line); box-shadow: none; }
.pro .lg-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.pro .lg-who button.on { background: var(--brand); color: var(--brand-ink); }
.pro .br-card, .pro .br-risk, .pro .br-p, .pro .br-pp, .pro .org-c, .pro .org-sk, .pro .flow-s { border-color: var(--line); }
.pro .br-n { background: var(--brand); color: var(--brand-ink); }
.pro .org-col { background: var(--surface); border-color: transparent; }
.pro .org-n.dir { background: var(--hero-bg); color: var(--hero-ink); border: 1px solid var(--hero-line); }
.pro .org-n.dir b { color: var(--hero-ink); }
.pro .org-n.dir span { color: var(--hero-2); }
.pro .org-n.dir .ava { background: var(--brand); color: var(--brand-ink); border: 0; }
.pro .org-c.working { border-color: color-mix(in srgb, var(--live) 55%, var(--line)); box-shadow: none; }

/* 弹出菜单、弹层 */
.pro .pop { border-color: var(--line); border-radius: 14px; }
.pro .pop-label { letter-spacing: .06em; }
.pro .sheet { border-radius: 20px; }
.pro .tm.working .ava { box-shadow: 0 0 0 2px var(--live); }
.pro .tm.working i { background: var(--live); }

/* 页面进来淡入一点点 */
@keyframes pro-in { from { opacity: 0; transform: translateY(4px); } }
.pro .col > *, .pro .hero, .pro .panel .pn-sec { animation: pro-in .28s cubic-bezier(.2, .7, .2, 1) both; }
.pro .col > *:nth-child(2) { animation-delay: .03s; }
.pro .col > *:nth-child(3) { animation-delay: .06s; }
.pro .col > *:nth-child(4) { animation-delay: .09s; }

/* =====================================================================
   各自的细节
   ===================================================================== */
/* 澄：白底卡片上加一点点冷色，让"总监"有存在感但不压人 */
:root[data-theme="clarity"] .hero { background: linear-gradient(180deg, #ffffff 0%, #f8fbfd 100%); }
:root[data-theme="clarity"] .hero::before { content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 2px; border-radius: 0 0 2px 2px; background: linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand) 20%, transparent)); }
:root[data-theme="clarity"] .main.dir-view .q-b { background: var(--brand-soft); color: var(--brand-deep); }
:root[data-theme="clarity"] .rail-logo { border-color: var(--line); }

/* 深海：指挥台加一圈很淡的声呐纹，其他地方不发光 */
:root[data-theme="abyss"] .hero::after { display: block; content: ""; position: absolute; right: -120px; top: -140px; width: 420px; height: 420px; border-radius: 50%; background: repeating-radial-gradient(circle, rgba(94, 174, 232, .07) 0 1px, transparent 1px 34px); pointer-events: none; -webkit-mask: radial-gradient(closest-side, #000 40%, transparent); mask: radial-gradient(closest-side, #000 40%, transparent); }
:root[data-theme="abyss"] .rail-logo { background: #fff; border-color: transparent; }
:root[data-theme="abyss"] .avatar { background: var(--brand); color: var(--brand-ink); }
:root[data-theme="abyss"] .co-ops { background: #fff; }
:root[data-theme="abyss"] .scrim, :root[data-theme="abyss"] .mask { background: rgba(2, 6, 12, .6); }

@media (max-width: 767px) {
  .pro .rail-i.on::before { left: 22%; right: 22%; top: -4px; bottom: auto; width: auto; height: 2px; border-radius: 0 0 2px 2px; }
  .pro .ov-kpi { grid-template-columns: repeat(3, 1fr); }
  .pro .kp:nth-child(4) { border-left: 0; }
  .pro .kp:nth-child(n+4) { border-top: 1px solid var(--line); }
  .pro .hero-stats { width: 100%; }
  .pro .hs { flex: 1; min-width: 0; padding: 8px 10px; }
}
@media (max-width: 560px) {
  .pro .ov-kpi { grid-template-columns: repeat(2, 1fr); }
  .pro .kp:nth-child(n) { border-left: 0; border-top: 0; }
  .pro .kp:nth-child(even) { border-left: 1px solid var(--line); }
  .pro .kp:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (prefers-reduced-motion: reduce) {
  .pro *, .pro *::before, .pro *::after { animation: none !important; transition: none !important; }
}

/* 修正：输入框里不出方框光圈；指挥台头像字色；你说的话两套都用浅底主色字 */
.pro textarea:focus-visible, .pro input:focus-visible { box-shadow: none; }
.pro .hero-id .hero-ava { color: var(--brand-ink); }
.pro .main.dir-view .q-b { background: var(--brand-soft); color: var(--brand-deep); }
:root[data-theme="abyss"] .main.dir-view .q-b { color: #d6ebfb; }