:root {
  --bg: #f3efe6;
  --panel: #1f1a15;
  --panel-text: #e8e0d4;
  --accent: #c9a227;
  --adm: #5a8a4a;
  --dip: #4a6a9a;
  --mil: #9a4a4a;
  --border: #3a3028;
  --panel-w: clamp(196px, 16vw, 272px);
  --panel-r: clamp(238px, 21vw, 330px);
  --top-h: clamp(44px, 6vh, 56px);
  --log-h: clamp(30px, 4.5vh, 40px);
  --fs-base: clamp(12px, 1.05vw, 14px);
  --fs-lg: clamp(14px, 1.3vw, 16px);
  --fs-xl: clamp(16px, 1.6vw, 20px);
}
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; background: var(--bg);
  font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  overflow: hidden; font-size: var(--fs-base);
  color: #241f19;
}

/* ─────────── 加载层 ─────────── */
.boot {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 40%, #2a231b 0%, #14110d 100%);
  color: var(--panel-text);
  transition: opacity .22s ease;
}
.boot.gone { opacity: 0; pointer-events: none; }
.boot-box { text-align: center; padding: 24px; }
.boot-title { font-size: clamp(22px, 3.4vw, 36px); font-weight: 700; color: var(--accent); letter-spacing: 3px; }
.boot-sub { font-size: clamp(10px, 1.2vw, 13px); letter-spacing: 6px; opacity: .5; margin-top: 6px; }
#bootMsg { margin-top: 26px; font-size: var(--fs-lg); opacity: .85; }
.boot-bar { width: min(320px, 60vw); height: 3px; margin: 18px auto 0; background: #3a3028; border-radius: 2px; overflow: hidden; }
.boot-bar i { display: block; width: 40%; height: 100%; background: var(--accent); animation: bootslide 1.1s ease-in-out infinite; }
@keyframes bootslide { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }
.boot-tip { margin-top: 16px; font-size: clamp(10px, 1vw, 12px); opacity: .4; }

/* ─────────── 选国界面 ─────────── */
.setup {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column;
  background: #17130f; color: var(--panel-text);
  opacity: 0; transition: opacity .24s ease;
}
.setup.in { opacity: 1; }
.setup.gone { opacity: 0; pointer-events: none; }

.setup-head {
  flex-shrink: 0; padding: clamp(14px, 2vw, 22px) clamp(16px, 3vw, 34px);
  border-bottom: 1px solid #2e2820;
  display: flex; align-items: flex-end; gap: clamp(12px, 2vw, 26px); flex-wrap: wrap;
}
.sh-title h1 { margin: 0; font-size: clamp(18px, 2.4vw, 28px); color: var(--accent); letter-spacing: 1px; }
.sh-title p { margin: 4px 0 0; font-size: var(--fs-base); opacity: .6; }
.setup-tools { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.setup-tools input, .setup-tools select, .setup-tools button {
  background: #2a231b; color: var(--panel-text);
  border: 1px solid #4a4035; border-radius: 4px;
  padding: 6px 10px; font-size: var(--fs-base); font-family: inherit;
  cursor: pointer;
}
.setup-tools input { cursor: text; min-width: 150px; }
.setup-tools input:focus, .setup-tools select:focus { outline: 1px solid var(--accent); }
.setup-tools button:hover { background: #3a3028; }

.setup-body { flex: 1; display: grid; grid-template-columns: 1fr clamp(280px, 26vw, 380px); min-height: 0; }
.cs-list-wrap { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid #2e2820; }
.cs-count { padding: 8px clamp(12px, 1.6vw, 20px); font-size: var(--fs-base); opacity: .5; flex-shrink: 0; }
.cs-list { flex: 1; overflow-y: auto; padding: 0 clamp(8px, 1.2vw, 14px) 18px; display: flex; flex-direction: column; gap: 4px; }

.cs-card {
  display: grid; grid-template-columns: 22px 1fr auto auto;
  align-items: center; gap: clamp(8px, 1.2vw, 16px);
  background: #241e17; border: 1px solid #332b22; border-radius: 5px;
  padding: 7px 12px; cursor: pointer; text-align: left; color: var(--panel-text);
  font-family: inherit; width: 100%;
  transition: background .1s ease, border-color .1s ease;
}
.cs-card:hover { background: #312920; border-color: #5a5045; }
.cs-card.on { background: #3a3020; border-color: var(--accent); box-shadow: inset 0 0 0 1px rgba(201,162,39,.35); }
.cs-flag { width: 22px; height: 15px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.5); }
.cs-main { display: flex; flex-direction: column; min-width: 0; }
.cs-main b { font-size: var(--fs-lg); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-main i { font-style: normal; font-size: clamp(10px, .95vw, 12px); opacity: .55; }
.cs-num { display: flex; flex-direction: column; align-items: flex-end; }
.cs-num b { font-size: var(--fs-lg); }
.cs-num i { font-style: normal; font-size: clamp(10px, .95vw, 12px); opacity: .55; }
.cs-diff { display: flex; flex-direction: column; align-items: flex-end; font-size: clamp(9px, .9vw, 11px); letter-spacing: -1px; min-width: 4.6em; }
.cs-diff i { font-style: normal; letter-spacing: 0; opacity: .6; }
.cs-diff.d1 { color: #7ec46a; } .cs-diff.d2 { color: #b8c46a; }
.cs-diff.d3 { color: #d8a24a; }
.cs-diff.d4 { color: #d8724a; } .cs-diff.d5 { color: #c0392b; }

.cs-side { display: flex; flex-direction: column; min-height: 0; padding: clamp(10px, 1.4vw, 18px); gap: 12px; background: #1b1712; }
.cs-map-wrap { width: 100%; background: #79a8b0; border-radius: 4px; overflow: hidden; flex-shrink: 0; }
#csMap { display: block; width: 100%; height: 100%; }
.cs-detail { flex: 1; overflow-y: auto; font-size: var(--fs-base); }
.csd-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.csd-flag { width: 34px; height: 23px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,.5); flex-shrink: 0; }
.csd-head h3 { margin: 0; font-size: var(--fs-xl); color: var(--accent); }
.csd-head p { margin: 2px 0 0; opacity: .5; font-size: clamp(10px, .95vw, 12px); }
.csd-diff { font-size: var(--fs-base); margin-bottom: 10px; letter-spacing: -1px; }
.csd-diff.d1 { color: #7ec46a; } .csd-diff.d2 { color: #b8c46a; }
.csd-diff.d3 { color: #d8a24a; } .csd-diff.d4 { color: #d8724a; } .csd-diff.d5 { color: #c0392b; }
.csd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 10px; }
.csd-grid > div { background: #241e17; border-radius: 4px; padding: 5px 8px; display: flex; flex-direction: column; }
.csd-grid i { font-style: normal; font-size: clamp(9px, .9vw, 11px); opacity: .5; }
.csd-grid b { font-size: var(--fs-lg); }
.csd-lines > div { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; border-bottom: 1px dotted #332b22; }
.csd-lines i { font-style: normal; opacity: .5; }
.csd-lines b { font-weight: 500; text-align: right; }
.cs-start {
  flex-shrink: 0; width: 100%; padding: 11px; font-size: var(--fs-lg); font-weight: 600;
  background: var(--accent); color: #1f1a15; border: none; border-radius: 5px;
  cursor: pointer; font-family: inherit; letter-spacing: 1px;
}
.cs-start:disabled { background: #3a3028; color: #6f6659; cursor: default; }
.cs-start:not(:disabled):hover { filter: brightness(1.1); }

/* ─────────── 主界面 ─────────── */
#app { display: flex; flex-direction: column; height: 100vh; }

.topbar {
  display: flex; align-items: center; gap: clamp(10px, 1.8vw, 22px);
  background: var(--panel); color: var(--panel-text);
  height: var(--top-h); flex-shrink: 0;
  padding: 0 clamp(10px, 2vw, 20px);
  border-bottom: 2px solid var(--accent);
}
.brand { font-size: var(--fs-xl); font-weight: 700; color: var(--accent); letter-spacing: 1px; white-space: nowrap; }
.who { font-size: var(--fs-base); white-space: nowrap; opacity: .9; }
.who b { color: #fff; font-weight: 600; }
.who i { font-style: normal; opacity: .45; font-size: .85em; margin-left: 4px; }
.date { font-size: var(--fs-lg); min-width: 8.5em; white-space: nowrap; }

/* 顶栏资源条 */
.strip { display: flex; align-items: center; gap: clamp(6px, 1vw, 14px); font-size: var(--fs-base); white-space: nowrap; }
.strip > span { display: inline-flex; align-items: center; gap: 3px; }
.strip b { font-weight: 700; color: #fff; }
.strip .s-gold b { color: var(--accent); }
.strip .s-bal { font-variant-numeric: tabular-nums; }
.strip .pos { color: #7ec46a; }
.strip .neg { color: #e0704a; }
@media (max-width: 1180px) { .brand { display: none; } }
.speed { display: flex; gap: 4px; margin-left: auto; }
.speed button, .map-modes button {
  background: #2e2820; color: var(--panel-text); border: 1px solid #4a4035;
  padding: 4px clamp(8px, 1vw, 14px); cursor: pointer; border-radius: 3px;
  font-size: var(--fs-base); white-space: nowrap; font-family: inherit;
}
.speed button.active, .map-modes button.active { background: var(--accent); color: #1f1a15; border-color: var(--accent); }
.speed button:hover:not(.active), .map-modes button:hover:not(.active) { background: #3d3428; }

.main { flex: 1; display: flex; overflow: hidden; }
.panel {
  width: var(--panel-w); background: var(--panel); color: var(--panel-text);
  padding: clamp(10px, 1.2vw, 16px); overflow-y: auto; font-size: var(--fs-base);
  border-right: 1px solid var(--border); flex-shrink: 0;
}
.panel.right {
  border-right: none; border-left: 1px solid var(--border);
  width: var(--panel-r);
  display: flex; flex-direction: column; padding: 0; overflow: hidden;
}
.panel h2 { margin: 0 0 clamp(8px, 1vw, 12px); font-size: var(--fs-lg); color: var(--accent); }
.res-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(6px, .8vw, 10px); margin-bottom: 12px; }
.res-grid div { background: #2e2820; padding: clamp(5px, .7vw, 8px); border-radius: 4px; }
.res-grid span { font-weight: 700; color: #fff; }
.powers { display: flex; gap: 6px; margin-bottom: 12px; }
.power { flex: 1; text-align: center; padding: clamp(5px, .7vw, 8px); border-radius: 4px; font-weight: 700; color: #fff; }
.power.adm { background: var(--adm); }
.power.dip { background: var(--dip); }
.power.mil { background: var(--mil); }
.stats > div, .tech > div { display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px dotted #3a3028; }
.actions { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.actions button {
  background: #3a3028; color: var(--panel-text); border: 1px solid #5a5045;
  padding: 7px; cursor: pointer; border-radius: 4px; font-size: var(--fs-base); font-family: inherit;
}
.actions button:hover { background: #4a4035; }
.hint { margin-top: 14px; font-size: clamp(9px, .85vw, 11px); opacity: .38; line-height: 1.6; }

.map-wrap { flex: 1; position: relative; background: #79a8b0; overflow: hidden; min-width: 0; }
#map { display: block; width: 100%; height: 100%; cursor: crosshair; touch-action: none; }
.map-modes { position: absolute; bottom: 10px; left: 10px; display: flex; flex-wrap: wrap; gap: 4px; }
.map-modes button { font-size: var(--fs-base); padding: 4px 8px; }

.logbar {
  height: var(--log-h); background: var(--panel); color: var(--panel-text);
  display: flex; align-items: center;
  padding: 0 clamp(10px, 2vw, 20px); font-size: var(--fs-base);
  border-top: 1px solid var(--border); flex-shrink: 0;
}
#log { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.modal {
  position: fixed; inset: 0; background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center; z-index: 150;
  visibility: hidden; opacity: 0; transition: visibility .15s, opacity .15s;
}
.modal[hidden] {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.modal:not([hidden]) {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
.modal-body {
  background: var(--panel); color: var(--panel-text);
  width: min(92vw, 440px);
  padding: clamp(16px, 3vw, 22px); border-radius: 6px; border: 2px solid var(--accent);
  box-shadow: 0 18px 50px rgba(0,0,0,.5);
}
.modal-body h3 { margin: 0 0 10px; color: var(--accent); font-size: var(--fs-lg); }
.modal-body p { margin: 0; line-height: 1.65; opacity: .9; }
.ev-options { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.ev-options button {
  background: #3a3028; color: var(--panel-text); border: 1px solid #5a5045;
  padding: 8px; cursor: pointer; text-align: left; font-size: var(--fs-base); font-family: inherit;
  border-radius: 4px;
}
.ev-options button:hover { background: #4a4035; }

/* 窄屏：侧栏收起为抽屉，选国界面改为单列 */
@media (max-width: 860px) {
  .setup-body { grid-template-columns: 1fr; grid-template-rows: 1fr auto; overflow-y: auto; }
  .cs-list-wrap { border-right: none; border-bottom: 1px solid #2e2820; min-height: 42vh; }
  .cs-side { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
  .cs-map-wrap { width: min(46%, 260px); }
  .cs-detail { flex: 1; min-width: 180px; max-height: 40vh; }
  .cs-start { width: 100%; }
  .brand { display: none; }
  .main { position: relative; }
  .panel {
    position: absolute; bottom: 0; left: 0; right: 0;
    width: 100%; height: 38vh; z-index: 10;
    border-right: none; border-top: 2px solid var(--accent);
    transform: translateY(100%); transition: transform .18s ease;
  }
  .panel.right { border-left: none; left: auto; top: 0; bottom: auto; height: 100%; width: min(320px, 78vw); transform: translateX(100%); }
  .panel.open { transform: translateY(0); }
  .panel.right.open { transform: translateX(0); }
  .map-modes { bottom: auto; top: 8px; right: 8px; left: auto; }
}

/* ─────────── 左栏国情 ─────────── */
.l-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px; padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.l-flag { width: 26px; height: 17px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.5); flex-shrink: 0; }
.l-head b { font-size: var(--fs-lg); color: #fff; font-weight: 600; }
.l-head i { font-style: normal; opacity: .45; font-size: .85em; margin-left: 2px; }
.kv { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 2.5px 0; }
.kv i { font-style: normal; opacity: .5; white-space: nowrap; }
.kv b { font-weight: 600; color: #fff; text-align: right; }
.kv b em { font-style: normal; font-weight: 400; opacity: .6; margin-left: 3px; font-size: .88em; }
.kv b.good { color: #7ec46a; }
.kv b.bad { color: #e0704a; }
.sep { height: 1px; background: var(--border); margin: 8px 0; }
.mods { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 4px; }
.mod {
  font-size: clamp(9px, .82vw, 11px); padding: 1px 6px; border-radius: 3px;
  background: #2a231b; border: 1px solid #3a3028;
}
.mod.good { color: #7ec46a; }
.mod.bad { color: #e0704a; }

/* ─────────── 右侧标签页 ─────────── */
.tabs {
  display: flex; flex-wrap: wrap; gap: 2px; flex-shrink: 0;
  padding: 8px 8px 0; background: #191510;
  border-bottom: 1px solid var(--border);
}
.tabs button {
  flex: 1 1 auto; background: #241e17; color: var(--panel-text);
  border: 1px solid #332b22; border-bottom: none;
  padding: 6px 4px; cursor: pointer; font-family: inherit;
  font-size: var(--fs-base); border-radius: 4px 4px 0 0;
  white-space: nowrap;
}
.tabs button:hover { background: #2e271e; }
.tabs button.active { background: var(--accent); color: #1f1a15; border-color: var(--accent); font-weight: 600; }
.tab-body { flex: 1; overflow-y: auto; padding: clamp(8px, 1vw, 14px); }

.th { margin: 0 0 8px; font-size: var(--fs-lg); color: var(--accent); }
.th em { font-style: normal; font-size: .8em; margin-left: 4px; }
.tab-body h3.th em.gold, .gold { color: var(--accent); font-style: normal; }
.sub {
  margin: 14px 0 6px; padding-bottom: 3px;
  font-size: var(--fs-base); font-weight: 600; color: #b8a98a;
  border-bottom: 1px solid var(--border); letter-spacing: 1px;
}
.sub.bad { color: #e0704a; }
.hint { margin: 10px 0; font-size: clamp(9px, .85vw, 11px); opacity: .4; line-height: 1.6; }
.tab-body .hint { margin-top: 6px; }
.empty { padding: 8px 0; font-size: var(--fs-base); opacity: .45; font-style: italic; }
.good { color: #7ec46a; }
.bad { color: #e0704a; }
.dim { opacity: .55; font-style: normal; }

.banner {
  margin-bottom: 10px; padding: 8px 10px;
  background: rgba(201,162,39,.14); border: 1px solid var(--accent); border-radius: 4px;
  color: var(--accent); font-size: var(--fs-base);
}

/* 通用小按钮组 */
.acts { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0 4px; }
.acts button, .c-acts button {
  background: #3a3028; color: var(--panel-text); border: 1px solid #5a5045;
  padding: 4px 9px; cursor: pointer; border-radius: 4px; font-family: inherit;
  font-size: clamp(10px, .9vw, 12px);
}
.acts button:hover:not(:disabled), .c-acts button:hover:not(:disabled) { background: #4a4035; }
.acts button:disabled, .c-acts button:disabled, .devrow button:disabled {
  opacity: .35; cursor: default;
}
.acts button.danger, .c-acts button.danger {
  background: #4a2418; border-color: #7a3a24; color: #f0a080;
}

/* 键值行 + 行内按钮（发展度/科技） */
.devrow {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px;
  padding: 3px 0;
}
.devrow > span { opacity: .65; }
.devrow > span.pw { opacity: 1; font-weight: 600; }
.devrow .pw.adm { color: var(--adm); }
.devrow .pw.dip { color: #6a8aca; }
.devrow .pw.mil { color: #ca6a6a; }
.devrow b { color: #fff; font-weight: 600; }
.devrow button {
  background: #3a3028; color: var(--panel-text); border: 1px solid #5a5045;
  padding: 3px 8px; cursor: pointer; border-radius: 4px; font-family: inherit;
  font-size: clamp(9px, .85vw, 11px);
}
.devrow button:hover:not(:disabled) { background: #4a4035; }

/* 省份列表 / 国家列表 */
.plist { display: flex; flex-direction: column; gap: 3px; }
.plist.tall { max-height: 42vh; overflow-y: auto; padding-right: 2px; }
.prow {
  display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 6px;
  width: 100%; text-align: left;
  background: #241e17; border: 1px solid #332b22; border-radius: 4px;
  padding: 5px 9px; cursor: pointer; color: var(--panel-text); font-family: inherit;
  font-size: var(--fs-base);
  transition: background .1s ease, border-color .1s ease;
}
.prow:hover { background: #2e271e; border-color: #4a4035; }
.prow.on { background: #3a3020; border-color: var(--accent); }
.prow.static { cursor: default; }
.prow.static:hover { background: #241e17; border-color: #332b22; }
.prow > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prow .pname { font-weight: 500; }
.prow .dot { width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,.5); flex-shrink: 0; }
.prow em { font-style: normal; opacity: .75; }
.prow em.good { opacity: 1; }
.prow em.bad { opacity: 1; }
.prow i { font-style: normal; font-size: clamp(9px, .85vw, 11px); opacity: .8; }
.prow i em { margin-right: 3px; }
.prow i em.good { color: #7ec46a; }
.prow i em.bad { color: #e0704a; }
.prow u { text-decoration: none; font-size: clamp(9px, .85vw, 11px); }
.prow u.bad { color: #e0704a; }

/* 卡片（军团 / 舰队 / 战争 / 阶级） */
.card {
  background: #241e17; border: 1px solid #332b22; border-radius: 5px;
  padding: 8px 10px; margin: 6px 0;
}
.card.war { border-color: #6a3a24; background: #2a1e17; }
.c-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.c-top b { color: #fff; font-weight: 600; }
.c-top span { opacity: .7; font-size: var(--fs-base); }
.c-line { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0 0; font-size: var(--fs-base); }
.c-line.dim { opacity: .55; font-size: clamp(9px, .85vw, 11px); }
.c-line em { font-style: normal; }
.c-acts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }

.bar {
  height: 5px; margin-top: 5px; background: #171310;
  border-radius: 3px; overflow: hidden;
}
.bar i { display: block; height: 100%; background: #b8a95c; border-radius: 3px; }
.bar i.bad { background: #c05030; }

/* 建筑 */
.builds { display: flex; flex-direction: column; gap: 3px; }
.brow {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px;
  background: #241e17; border: 1px solid #332b22; border-radius: 4px;
  padding: 4px 9px;
}
.brow.has { border-color: #4a6a3a; background: #22301b; }
.brow .bname { font-weight: 500; white-space: nowrap; }
.brow .bdesc { opacity: .45; font-size: clamp(9px, .85vw, 11px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.brow button {
  background: #3a3028; color: var(--panel-text); border: 1px solid #5a5045;
  padding: 2px 8px; cursor: pointer; border-radius: 4px; font-family: inherit;
  font-size: clamp(9px, .85vw, 11px);
}
.brow button:hover:not(:disabled) { background: #4a4035; }
.brow button:disabled { opacity: .35; cursor: default; }

/* 理念 / 政策 */
.idea {
  background: #241e17; border: 1px solid #332b22; border-radius: 5px;
  padding: 8px 10px; margin: 6px 0;
}
.idea.done { border-color: #4a6a3a; }
.i-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.i-top b { color: #fff; font-weight: 600; }
.i-top em { font-style: normal; opacity: .6; font-size: var(--fs-base); }
.i-top em.good { opacity: 1; color: #7ec46a; }
.dots { display: inline-flex; gap: 3px; }
.dots i {
  width: 8px; height: 8px; border-radius: 50%;
  background: #332b22; border: 1px solid #4a4035;
}
.dots i.on { background: var(--accent); border-color: var(--accent); }
.i-desc { opacity: .5; font-size: clamp(9px, .85vw, 11px); margin-top: 3px; }
.i-next { margin: 4px 0 6px; font-size: var(--fs-base); opacity: .85; }
.i-why { margin-top: 4px; font-size: clamp(9px, .85vw, 11px); color: #d8a24a; opacity: .8; }

/* ─────────── 模态框内部 ─────────── */
.modal-body.wide { width: min(94vw, 620px); }
.m-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.m-head h3 { margin: 0; }
.m-x {
  background: none; border: none; color: var(--panel-text);
  font-size: 20px; cursor: pointer; padding: 0 4px; line-height: 1; opacity: .6;
}
.m-x:hover { opacity: 1; }
.m-body { max-height: 62vh; overflow-y: auto; padding-right: 4px; }
.m-body p { margin: 0 0 8px; }
.m-note {
  background: #191510; border: 1px solid #2e2820; border-radius: 4px;
  padding: 6px 9px; margin: 8px 0; font-size: var(--fs-base); opacity: .85; line-height: 1.6;
}
.m-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.m-foot button {
  background: #3a3028; color: var(--panel-text); border: 1px solid #5a5045;
  padding: 7px 16px; cursor: pointer; border-radius: 4px; font-family: inherit; font-size: var(--fs-base);
}
.m-foot button:hover { background: #4a4035; }
.m-foot button.primary { background: var(--accent); color: #1f1a15; border-color: var(--accent); font-weight: 600; }
.m-foot button.primary:hover { filter: brightness(1.1); background: var(--accent); }
.f { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.f label { flex: 0 0 auto; opacity: .6; min-width: 6em; }
.f input, .f select {
  flex: 1; min-width: 0; background: #191510; color: var(--panel-text);
  border: 1px solid #4a4035; border-radius: 4px; padding: 6px 8px;
  font-family: inherit; font-size: var(--fs-base);
}
.f input:focus, .f select:focus { outline: 1px solid var(--accent); }
.f em { font-style: normal; opacity: .5; font-size: .88em; white-space: nowrap; }
.chk {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 6px 8px; margin: 4px 0; cursor: pointer;
  background: #241e17; border: 1px solid #332b22; border-radius: 4px;
  line-height: 1.5;
}
.chk:hover { border-color: #4a4035; }
.chk input { margin-top: 3px; flex-shrink: 0; }
.chk b { color: #fff; }
.chk em { font-style: normal; opacity: .5; font-size: .88em; }
.chk.danger { border-color: #6a3a24; color: #f0a080; }