/* 研思智境 · shared tokens and base components. 科幻 + 思政: 绛红、暖金、深空、克制青色数据光线 */
:root {
  color-scheme: dark;
  --bg: #0e0a0f; --bg-2: #150f16; --surface: #1c141b; --surface-2: #251a22; --surface-3: #2f212a;
  --line: #473139; --line-2: #6a4449;
  --text: #fbefe4; --muted: #c9b3ab; --faint: #8f7a76;
  --red: #c02a3e; --red-2: #7d1628; --red-soft: #c02a3e33;
  --gold: #eec486; --gold-2: #b98a47; --gold-soft: #eec48622;
  --cyan: #5cd6d6; --cyan-soft: #5cd6d622; --cyan-line: #5cd6d655;
  --green: #86c9a2; --warn: #f0b35e; --danger: #ff8e8e;
  --human: #5cd6d6; --ai: #eec486;
  --radius: 12px; --radius-sm: 8px;
  --shadow: 0 18px 50px #05030699;
  --font: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", "Source Han Sans SC", system-ui, sans-serif;
  --mono: "JetBrains Mono", "Cascadia Code", Consolas, monospace;
  --fs: 1.15; /* 字号倍数：标准 */
  --screen-strong: #dffafa; --ideo-strong: #ffd98f; --code-bg: #0008;
  --wood-1: #6b3a2c; --wood-2: #3a1a14; --table-shadow: 0 20px 50px #000a, inset 0 0 40px #0006;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  font: calc(14px * var(--fs))/1.65 var(--font); color: var(--text); min-height: 100vh;
  background:
    radial-gradient(1200px 520px at 8% -8%, #5a1422aa 0, transparent 60%),
    radial-gradient(900px 480px at 100% 0%, #3d1f14aa 0, transparent 60%),
    linear-gradient(180deg, #0e0a0f 0%, #0b080c 100%);
  background-color: var(--bg);
}
body::before { /* restrained cyan data grid */
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .35;
  background-image: linear-gradient(var(--cyan-soft) 1px, transparent 1px), linear-gradient(90deg, var(--cyan-soft) 1px, transparent 1px);
  background-size: 64px 64px; mask-image: radial-gradient(ellipse at 50% 0%, #000 0, transparent 70%);
}
a { color: var(--gold); }
h1, h2, h3, h4 { line-height: 1.3; margin: 0 0 .5em; font-weight: 650; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 1px solid var(--line-2); background: var(--surface-3); color: var(--text); padding: 8px 14px; border-radius: var(--radius-sm); transition: transform .15s, background .15s, border-color .15s, box-shadow .15s; }
button:hover:not(:disabled) { background: #3b2832; border-color: var(--gold-2); }
button:active:not(:disabled) { transform: scale(.98); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.primary { background: linear-gradient(120deg, #cf3045, #861a2d); border-color: #e7a077; color: #fff6ea; box-shadow: 0 6px 22px #b01f3544; }
button.gold { background: linear-gradient(120deg, #f3cf93, #c08f4b); color: #2a1709; border-color: #ffe0ab; font-weight: 650; }
button.ghost { background: transparent; border-color: transparent; color: var(--muted); }
button.ghost:hover:not(:disabled) { color: var(--text); background: #ffffff0d; }
button.small { padding: 4px 9px; font-size: calc(12px * var(--fs)); }
button.danger { border-color: #a64a4a; color: var(--danger); background: transparent; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
input, select, textarea { background: #120d12; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 10px; width: 100%; min-width: 0; }
textarea { resize: vertical; min-height: 64px; }
input:focus, select:focus, textarea:focus { border-color: var(--gold-2); outline: none; box-shadow: 0 0 0 3px var(--gold-soft); }
label { display: grid; gap: 4px; font-size: calc(12px * var(--fs)); color: var(--muted); }
label.inline { display: inline-flex; align-items: center; gap: 6px; }
label.inline input { width: auto; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.panel { position: relative; background: linear-gradient(160deg, #22171f, #181117); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
.panel h2 { font-size: calc(16px * var(--fs)); color: #ffe3c2; }
.muted { color: var(--muted); } .faint { color: var(--faint); } .small { font-size: calc(12px * var(--fs)); }
.mono { font-family: var(--mono); font-size: calc(12px * var(--fs)); }
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: max(12px, calc(11px * var(--fs))); border: 1px solid var(--line-2); color: var(--muted); background: #ffffff08; white-space: nowrap; }
.badge.gold { color: var(--gold); border-color: var(--gold-2); background: var(--gold-soft); }
.badge.red { color: #ffb3bb; border-color: #9c3040; background: var(--red-soft); }
.badge.cyan { color: var(--cyan); border-color: #3b8f8f; background: var(--cyan-soft); }
.badge.green { color: var(--green); border-color: #4b7a5e; }
.badge.warn { color: var(--warn); border-color: #8a6a36; }
.eyebrow { font-size: max(12px, calc(10px * var(--fs))); letter-spacing: 3px; color: var(--gold); text-transform: uppercase; font-weight: 700; }
.notice { border: 1px solid #6d5230; background: #3a2a1433; color: #f3d7ad; padding: 10px 12px; border-radius: var(--radius-sm); font-size: calc(13px * var(--fs)); }
.notice.cyan { border-color: #2f7373; background: #0d2a2a55; color: #bff0f0; }
.notice.red { border-color: #87303a; background: #3a111955; color: #ffc1c7; }
table.data { width: 100%; border-collapse: collapse; font-size: calc(13px * var(--fs)); }
table.data th, table.data td { border-bottom: 1px solid var(--line); padding: 7px 8px; text-align: left; vertical-align: top; }
table.data th { color: var(--gold); font-weight: 600; font-size: calc(12px * var(--fs)); background: #ffffff05; position: sticky; top: 0; }
.scroll-x { overflow-x: auto; }
hr.sep { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }

/* header */
.app-header { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 18px; padding: 10px max(16px, calc((100% - 1560px) / 2)); background: linear-gradient(100deg, #6a1323ee, #2a1119ee 45%, #140d13ee); border-bottom: 1px solid #7a3a3d; backdrop-filter: blur(8px); }
.brand { display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 0; color: var(--text); }
.brand:hover { background: none !important; }
.brand-mark { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; font-size: calc(18px * var(--fs)); color: #2a1709; background: radial-gradient(circle at 30% 30%, #ffe3ad, #c68d45); box-shadow: 0 0 0 1px #ffe0ab88, 0 0 18px #eec48655; }
.brand b { display: block; font-size: calc(16px * var(--fs)); letter-spacing: 2px; }
.brand small { display: block; font-size: max(12px, calc(10px * var(--fs))); color: #e9c9b6; letter-spacing: 1px; }
.nav { display: flex; gap: 2px; }
.nav a { color: #e7cdc4; text-decoration: none; padding: 6px 12px; border-radius: 8px; font-size: calc(13px * var(--fs)); }
.nav a:hover { background: #ffffff12; color: #fff; }
.nav a.active { background: #ffffff1a; color: #fff; box-shadow: inset 0 -2px 0 var(--gold); }
.header-tools { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.theme-switch { display: inline-flex; padding: 2px; border-radius: 999px; background: #00000033; border: 1px solid #ffffff2a; }
.theme-switch button { padding: 3px 10px; font-size: calc(12px * var(--fs)); border-radius: 999px; border: 0; background: transparent; color: #f3dcd3; }
.theme-switch button:hover:not(:disabled) { background: #ffffff1f; transform: none; }
:root[data-theme-pref="auto"] .theme-switch [data-theme-set="auto"], :root[data-theme-pref="light"] .theme-switch [data-theme-set="light"], :root[data-theme-pref="dark"] .theme-switch [data-theme-set="dark"], .theme-switch button[aria-pressed="true"] { background: #fff3e2; color: #7d1628; font-weight: 700; }
.login-card .theme-switch { background: var(--surface-3); border-color: var(--line); float: right; }
.login-card .theme-switch button { color: var(--muted); }
.login-card .theme-switch button[aria-pressed="true"], :root[data-theme-pref="auto"] .login-card [data-theme-set="auto"], :root[data-theme-pref="light"] .login-card [data-theme-set="light"], :root[data-theme-pref="dark"] .login-card [data-theme-set="dark"] { background: var(--red-2); color: #fff3e2; }
.credit-pill { display: inline-flex; gap: 8px; align-items: center; padding: 5px 12px; border-radius: 999px; border: 1px solid #b98a4788; background: #1a0f0fcc; color: var(--gold); font-size: calc(12px * var(--fs)); }
.credit-pill b { font-size: calc(15px * var(--fs)); }
.menu { position: relative; }
.menu-list { position: absolute; right: 0; top: calc(100% + 6px); min-width: 180px; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 10px; padding: 6px; box-shadow: var(--shadow); display: none; z-index: 40; }
.menu.open .menu-list { display: grid; }
.menu-list button, .menu-list a { text-align: left; background: none; border: 0; padding: 8px 10px; border-radius: 6px; color: var(--text); text-decoration: none; font-size: calc(13px * var(--fs)); }
.menu-list button:hover, .menu-list a:hover { background: #ffffff10; }

main#app { position: relative; z-index: 1; max-width: 1560px; margin: 0 auto; padding: 18px 16px 48px; }

/* modal & toast */
.modal-back { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: #0008; padding: 16px; }
.modal { width: min(520px, 100%); max-height: 88vh; overflow: auto; background: linear-gradient(160deg, #2a1c25, #1a1218); border: 1px solid var(--gold-2); border-radius: 14px; padding: 20px; box-shadow: 0 30px 80px #000c; }
.modal.wide { width: min(980px, 100%); }
.modal h3 { color: #ffe3c2; font-size: calc(17px * var(--fs)); }
.modal .actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
#toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 80; display: grid; gap: 8px; pointer-events: none; }
.toast { pointer-events: auto; padding: 10px 16px; border-radius: 10px; background: #2a1c25f2; border: 1px solid var(--gold-2); color: var(--text); box-shadow: var(--shadow); font-size: calc(13px * var(--fs)); max-width: min(640px, 92vw); }
.toast.error { border-color: #b3404f; color: #ffd0d4; }

.login-wrap { min-height: calc(100vh - 140px); display: grid; place-items: center; }
.login-card { width: min(420px, 100%); }
.login-card h1 { font-size: calc(22px * var(--fs)); letter-spacing: 2px; }
.empty { padding: 30px; text-align: center; color: var(--faint); border: 1px dashed var(--line); border-radius: var(--radius); }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 14px; flex-wrap: wrap; }
.tabs button { background: none; border: 0; border-radius: 8px 8px 0 0; color: var(--muted); padding: 8px 14px; }
.tabs button.active { color: var(--gold); box-shadow: inset 0 -2px 0 var(--gold); }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; font-size: calc(13px * var(--fs)); }
.kv dt { color: var(--faint); } .kv dd { margin: 0; }

@media (max-width: 820px) {
  .app-header { flex-wrap: wrap; gap: 8px; padding: 8px 16px; }
  .nav { order: 3; width: 100%; overflow-x: auto; }
  .brand small { display: none; }
  .header-tools { gap: 4px; }
  .header-tools .lbl { display: none; }
  .theme-switch button { padding: 3px 7px; }
  .header-tools button { white-space: nowrap; padding: 6px 8px; }
  .credit-pill { padding: 4px 9px; }
  .grid2, .grid3 { grid-template-columns: 1fr; }
  main#app { padding: 12px 16px 40px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* 字号：标准 / 较大 / 特大（顶栏右上角切换，保存在本浏览器） */
:root[data-fs="l"] { --fs: 1.28; }
:root[data-fs="xl"] { --fs: 1.42; }
.fs-switch { display: inline-flex; padding: 2px; border-radius: 999px; background: #00000033; border: 1px solid #ffffff2a; align-items: center; }
.fs-switch button { padding: 2px 9px; border-radius: 999px; border: 0; background: transparent; color: #f3dcd3; line-height: 1.2; font-weight: 700; }
.fs-switch button[data-fs-set="m"] { font-size: 12px; } .fs-switch button[data-fs-set="l"] { font-size: 14px; } .fs-switch button[data-fs-set="xl"] { font-size: 16px; }
.fs-switch button:hover:not(:disabled) { background: #ffffff1f; transform: none; }
:root[data-fs-pref="m"] .fs-switch [data-fs-set="m"], :root[data-fs-pref="l"] .fs-switch [data-fs-set="l"], :root[data-fs-pref="xl"] .fs-switch [data-fs-set="xl"] { background: #fff3e2; color: #7d1628; }
.login-card .fs-switch { background: var(--surface-3); border-color: var(--line); float: right; margin-right: 6px; }
.login-card .fs-switch button { color: var(--muted); }
:root[data-fs-pref="m"] .login-card [data-fs-set="m"], :root[data-fs-pref="l"] .login-card [data-fs-set="l"], :root[data-fs-pref="xl"] .login-card [data-fs-set="xl"] { background: var(--red-2); color: #fff3e2; }

/* 运行方式：模拟演示 / 大模型 API 运行 */
.mode-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mode-cards .mode-card { display: flex; gap: 12px; align-items: flex-start; text-align: left; padding: 14px 16px; border-radius: 14px; border: 2px solid var(--line-2); background: var(--surface-2); color: var(--text); }
.mode-cards .mode-card .mc-ico { font-size: calc(26px * var(--fs)); line-height: 1; }
.mode-cards .mode-card b { display: block; font-size: calc(16px * var(--fs)); margin-bottom: 2px; }
.mode-cards .mode-card small { display: block; color: var(--muted); font-size: calc(12.5px * var(--fs)); line-height: 1.5; }
.mode-cards .mode-card.on.demo { border-color: var(--cyan); background: var(--cyan-soft); box-shadow: 0 0 0 3px var(--cyan-soft); }
.mode-cards .mode-card.on.model { border-color: var(--gold); background: var(--gold-soft); box-shadow: 0 0 0 3px var(--gold-soft); }
.mode-cards .mode-card.on b::after { content: " ✓"; }
.mode-cards .mode-card:disabled small { color: var(--danger); }
.mode-switch { display: inline-flex; align-items: center; gap: 4px; padding: 3px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface-2); }
.mode-switch .ms-lbl { font-size: calc(12px * var(--fs)); color: var(--muted); padding: 0 6px; }
.mode-switch .mode-card { padding: 7px 14px; border-radius: 9px; border: 1px solid transparent; background: transparent; color: var(--muted); font-weight: 650; font-size: calc(14px * var(--fs)); }
.mode-switch .mode-card.on.demo { background: var(--cyan); border-color: var(--cyan); color: #06282a; box-shadow: 0 4px 14px var(--cyan-soft); }
.mode-switch .mode-card.on.model { background: linear-gradient(120deg, #f3cf93, #d9a660); border-color: #c99a55; color: #3a2208; box-shadow: 0 4px 14px var(--gold-soft); }
@media (max-width: 720px) { .mode-cards { grid-template-columns: 1fr; } .mode-switch .ms-lbl { display: none; } }
/* long dialogs keep their buttons visible */
.modal .actions { position: sticky; bottom: -20px; margin: 18px -20px -20px; padding: 12px 20px 16px; background: var(--surface); border-top: 1px solid var(--line); z-index: 2; }
@media (max-width: 820px) {
  .nav a { white-space: nowrap; padding: 6px 10px; }
  .header-tools { flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }
  .fs-switch button { padding: 2px 7px; }
}

/* 研思智境 标识：顶栏为白底圆形徽标，登录页为完整标识（白底衬板，深浅两种主题都清晰） */
img.brand-mark { width: 44px; height: 44px; padding: 2px; border-radius: 50%; background: #fffdf9; box-shadow: 0 0 0 1px #ffe0ab88, 0 4px 14px #0000004d; object-fit: contain; }
.brand b { letter-spacing: 3px; }
.brand small { max-width: 360px; }
.login-logo { clear: both; margin: 4px auto 10px; padding: 10px 14px 6px; border-radius: 14px; background: #fffdf9; box-shadow: inset 0 0 0 1px #e6d6cb; text-align: center; }
.login-logo img { display: block; width: 100%; max-width: 300px; height: auto; margin: 0 auto; }
.login-title { font-size: calc(15px * var(--fs)); text-align: center; margin: 4px 0 2px; color: var(--gold); letter-spacing: 1px; }
.login-sub { text-align: center; margin-bottom: 14px; }
@media (max-width: 820px) { img.brand-mark { width: 36px; height: 36px; } }
/* header never wraps words: the tagline and switch labels give way first on narrower screens */
.brand small, .nav a, .header-tools > *, .header-tools button { white-space: nowrap; }
.brand small { font-size: max(12px, calc(10.5px * var(--fs))); }
@media (max-width: 1640px) { .header-tools .lbl { display: none; } }
@media (max-width: 1280px) { .brand small { display: none; } }

/* header v4：半透明深红玻璃 + 底部金线；普通菜单为文字导航，当前项用底部高亮 */
.app-header { min-height: 64px; background: linear-gradient(100deg, rgba(122, 16, 34, .9), rgba(64, 14, 30, .88) 50%, rgba(18, 16, 30, .9)); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1px solid rgba(235, 196, 107, .38); box-shadow: 0 1px 0 rgba(235, 196, 107, .12), 0 10px 30px rgba(0, 0, 0, .18); }
.brand small.brand-en { font-size: max(10px, calc(9.5px * var(--fs))); letter-spacing: .12em; color: #eccfa9; opacity: .85; text-transform: uppercase; }
.nav a { position: relative; background: none; padding: 8px 12px; font-size: calc(14px * var(--fs)); }
.nav a:hover { background: none; color: #fff; }
.nav a.active { background: none; color: #fff; font-weight: 700; box-shadow: none; }
.nav a.active::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #EBC46B, #D6A34A); box-shadow: 0 0 10px #EBC46B99; }
.nav a:focus-visible, .header-tools button:focus-visible { outline: 2px solid #EBC46B; outline-offset: 2px; }
.credit-pill { background: rgba(0, 0, 0, .18); border-color: rgba(235, 196, 107, .45); }