/* ═══════════ 人生模拟器 V4.0 · 星野风样式 ═══════════ */
:root {
  --bg: #07070f;
  --bg2: #0d0d1c;
  --card: rgba(255,255,255,.045);
  --card2: rgba(255,255,255,.08);
  --line: rgba(255,255,255,.09);
  --line2: rgba(255,255,255,.16);
  --text: #eceaf6;
  --dim: #9a97b8;
  --accent: #7c5cff;
  --accent2: #4dd7ff;
  --gold: #e8c37e;
  --danger: #ff6b7a;
  --radius: 18px;
  --panel-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Noto Sans Mono CJK SC", monospace;
}
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { height:100%; }
body {
  min-height:100dvh;
  background:
    radial-gradient(1100px 700px at 85% -10%, rgba(124,92,255,.16), transparent 60%),
    radial-gradient(900px 600px at -10% 25%, rgba(77,215,255,.10), transparent 55%),
    radial-gradient(800px 800px at 50% 110%, rgba(232,110,255,.08), transparent 60%),
    var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", sans-serif;
  font-size:15px; line-height:1.65;
  overflow-x:hidden;
}

/* 星空 */
#stars { position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 22%, rgba(255,255,255,.5) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 68% 8%, rgba(255,255,255,.35) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 86% 42%, rgba(255,255,255,.45) 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 34% 66%, rgba(255,255,255,.3) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 52% 34%, rgba(255,255,255,.4) 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 8% 82%, rgba(255,255,255,.32) 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 92% 74%, rgba(255,255,255,.4) 50%, transparent 51%),
    radial-gradient(1px 1px at 44% 90%, rgba(255,255,255,.3) 50%, transparent 51%);
  animation: twinkle 7s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity:.55 } to { opacity:1 } }

#app { position:relative; z-index:1; max-width:520px; margin:0 auto; min-height:100dvh; position:relative; }

/* ═══════════ 屏幕切换 ═══════════ */
.screen { display:none; min-height:100dvh; flex-direction:column; animation: fadein .28s ease; }
.screen.active { display:flex; }
@keyframes fadein { from { opacity:0; transform:translateY(8px) } to { opacity:1; transform:none } }

/* ═══════════ 通用顶栏 ═══════════ */
.topbar { position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:10px;
  padding:12px 14px; padding-top:calc(12px + env(safe-area-inset-top));
  background:linear-gradient(180deg, rgba(7,7,15,.92), rgba(7,7,15,.55) 70%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.topbar-title { flex:1; text-align:center; font-size:15.5px; font-weight:600; letter-spacing:.05em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.topbar-mid { flex:1; text-align:center; overflow:hidden; }
.topbar-state { font-size:11.5px; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
.topbar-state b { color:var(--accent2); font-weight:600; }

.icon-btn { width:38px; height:38px; flex:none; display:flex; align-items:center; justify-content:center;
  background:var(--card); border:1px solid var(--line); border-radius:12px; color:var(--text);
  cursor:pointer; transition:.2s; font-size:12px; }
.icon-btn svg { width:20px; height:20px; }
.icon-btn:active { transform:scale(.92); }

/* ═══════════ 首页 ═══════════ */
.home-header { padding:34px 20px 10px; display:flex; justify-content:space-between; align-items:flex-start; }
.brand h1 { font-size:34px; font-weight:800; letter-spacing:.12em; margin-top:10px;
  background:linear-gradient(120deg, #fff 20%, var(--accent2) 55%, var(--accent) 90%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.brand-badge { display:inline-flex; font-size:10.5px; font-weight:700; letter-spacing:.15em; color:#0b0b16;
  background:linear-gradient(120deg, var(--accent2), var(--accent)); padding:3px 9px; border-radius:7px; }
.brand-sub { color:var(--dim); font-size:12.5px; margin-top:8px; letter-spacing:.05em; }
.home-actions { display:flex; gap:8px; }

.section-head { display:flex; align-items:center; justify-content:space-between; padding:22px 20px 12px; }
.section-title { font-size:16px; font-weight:700; letter-spacing:.08em; }
.ghost-chip { font-size:12.5px; color:var(--accent2); background:rgba(77,215,255,.08); border:1px solid rgba(77,215,255,.25);
  border-radius:99px; padding:6px 14px; cursor:pointer; transition:.2s; font-weight:600; }
.ghost-chip:active { transform:scale(.94); }

.world-grid { display:flex; flex-direction:column; gap:16px; padding:0 16px 10px; }
.world-card { position:relative; border-radius:var(--radius); overflow:hidden; cursor:pointer;
  border:1px solid var(--line); background:var(--card); transition:.25s; }
.world-card:active { transform:scale(.985); }
.world-cover { position:relative; aspect-ratio: 16/9.4; }
.world-cover img { width:100%; height:100%; object-fit:cover; display:block; }
.world-cover::after { content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(7,7,15,.05) 30%, rgba(7,7,15,.72) 78%, rgba(7,7,15,.9)); }
.world-cover .fallback { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:40px; }
.world-info { position:absolute; left:16px; right:16px; bottom:12px; z-index:2; }
.world-name { font-size:19px; font-weight:800; letter-spacing:.06em; display:flex; align-items:center; gap:8px; }
.world-tagline { color:rgba(236,234,246,.8); font-size:12.5px; margin-top:3px; }
.genre-chip { font-size:10px; font-weight:700; color:#0b0b16; padding:2px 8px; border-radius:6px;
  background:linear-gradient(120deg, var(--accent2), var(--accent)); letter-spacing:.1em; flex:none; }
.world-meta { display:flex; gap:8px; margin-top:8px; }
.w-tag { font-size:11px; color:var(--dim); border:1px solid var(--line); padding:2px 9px; border-radius:99px; }

.home-note { padding:18px 22px 40px; color:var(--dim); font-size:12px; line-height:1.9; }
.home-note b { color:var(--accent2); font-weight:600; }

/* 继续卡片 */
.continue-card { margin:14px 16px 0; padding:14px 16px; border-radius:var(--radius); border:1px solid var(--line2);
  background:linear-gradient(120deg, rgba(124,92,255,.14), rgba(77,215,255,.07)); cursor:pointer; transition:.2s; }
.continue-card:active { transform:scale(.98); }
.cc-title { font-size:14.5px; font-weight:700; display:flex; align-items:center; gap:8px; }
.cc-title .pulse { width:7px; height:7px; border-radius:50%; background:var(--accent2); box-shadow:0 0 10px var(--accent2); animation:pulse 1.6s infinite; }
@keyframes pulse { 50% { opacity:.35 } }
.cc-sub { font-size:12px; color:var(--dim); margin-top:5px; }

/* ═══════════ 世界详情 ═══════════ */
.world-detail { padding:0 16px 40px; }
.detail-hero { position:relative; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); }
.detail-hero img { width:100%; aspect-ratio:16/9.4; object-fit:cover; display:block; }
.detail-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(7,7,15,.85)); }
.detail-title { position:absolute; left:18px; bottom:14px; z-index:2; }
.detail-title h2 { font-size:24px; font-weight:800; letter-spacing:.06em; }
.detail-title p { color:rgba(236,234,246,.85); font-size:13px; margin-top:4px; }
.glass { margin-top:14px; padding:16px; border-radius:var(--radius); background:var(--card); border:1px solid var(--line); }
.card-title { font-size:14px; font-weight:700; letter-spacing:.06em; margin-bottom:10px; color:var(--accent2); }
.detail-intro { font-size:13.5px; line-height:1.9; color:rgba(236,234,246,.88); }
.info-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.info-item { background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:12px; padding:10px 12px; }
.info-k { font-size:11px; color:var(--dim); margin-bottom:3px; }
.info-v { font-size:12.5px; font-weight:600; }
.npc-preview { display:flex; gap:10px; overflow-x:auto; padding-bottom:4px; }
.npc-mini { flex:none; width:96px; text-align:center; }
.npc-mini img { width:64px; height:64px; border-radius:50%; object-fit:cover; border:2px solid var(--line2); }
.npc-mini .nm { font-size:12px; font-weight:700; margin-top:6px; }
.npc-mini .id { font-size:10.5px; color:var(--dim); }
.detail-actions { display:flex; gap:10px; margin-top:16px; }
.detail-actions .btn { flex:1; }

/* ═══════════ 按钮 ═══════════ */
.btn { border:none; border-radius:14px; padding:14px 18px; font-size:14.5px; font-weight:700; letter-spacing:.06em;
  cursor:pointer; transition:.2s; color:#0b0b16; font-family:inherit; }
.btn.primary { background:linear-gradient(120deg, var(--accent2), var(--accent)); color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.3); }
.btn.ghost { background:var(--card2); color:var(--text); border:1px solid var(--line2); }
.btn.danger { background:rgba(255,107,122,.14); color:var(--danger); border:1px solid rgba(255,107,122,.4); }
.btn:active { transform:scale(.97); }
.btn:disabled { opacity:.5; pointer-events:none; }

/* ═══════════ 开局向导 ═══════════ */
.wizard-body { padding:10px 16px 40px; }
.wizard-opening { padding:18px 18px; border-radius:var(--radius); border:1px solid var(--line2);
  background:linear-gradient(160deg, rgba(124,92,255,.12), rgba(255,255,255,.03));
  font-size:14px; line-height:2; margin-bottom:18px; font-style:normal; }
.step-dots { display:flex; gap:6px; margin-bottom:16px; }
.step-dot { flex:1; height:4px; border-radius:2px; background:var(--card2); }
.step-dot.on { background:linear-gradient(90deg, var(--accent2), var(--accent)); box-shadow:0 0 8px rgba(124,92,255,.5); }
.step-q { font-size:17px; font-weight:800; letter-spacing:.04em; margin-bottom:4px; }
.step-sub { font-size:12.5px; color:var(--dim); margin-bottom:16px; line-height:1.8; }
.opt-card { display:block; width:100%; text-align:left; margin-bottom:10px; padding:14px 16px; border-radius:14px;
  background:var(--card); border:1.5px solid var(--line); cursor:pointer; transition:.18s; color:var(--text); font-family:inherit; }
.opt-card:active { transform:scale(.98); }
.opt-card.sel { border-color:var(--accent); background:linear-gradient(120deg, rgba(124,92,255,.16), rgba(124,92,255,.05)); }
.opt-key { display:inline-flex; width:22px; height:22px; align-items:center; justify-content:center; border-radius:7px;
  font-size:11px; font-weight:800; background:var(--card2); margin-right:10px; vertical-align:-4px; }
.opt-card.sel .opt-key { background:var(--accent); color:#fff; }
.opt-title { font-size:14.5px; font-weight:700; }
.opt-desc { font-size:12px; color:var(--dim); margin-top:4px; line-height:1.7; }
.opt-count { font-size:12px; margin-top:12px; padding:8px 12px; border-radius:10px; background:rgba(255,193,7,.08); color:#ffd66b; border:1px solid rgba(255,193,7,.2); }
.wizard-foot { display:flex; gap:10px; margin-top:20px; }
.name-input { width:100%; padding:14px 16px; border-radius:14px; border:1.5px solid var(--line2); background:var(--card);
  color:var(--text); font-size:16px; font-family:inherit; outline:none; }
.name-input:focus { border-color:var(--accent); }

/* ═══════════ 游戏界面 ═══════════ */
#screen-game { position:relative; }
.game-bg { position:fixed; inset:0; z-index:-1; opacity:.16; filter:blur(34px) saturate(1.15); background-size:cover; background-position:center; transition:background-image .5s; }
.game-topbar { background:linear-gradient(180deg, rgba(7,7,15,.9), rgba(7,7,15,.4) 75%, transparent); }
.chat-scroll { flex:1; overflow-y:auto; scroll-behavior:smooth; padding:8px 14px 10px; }
.chat-list { display:flex; flex-direction:column; gap:4px; padding-bottom:12px; }

.msg { animation: msgin .35s ease; }
@keyframes msgin { from { opacity:0; transform:translateY(10px) } to { opacity:1; transform:none } }

/* 玩家气泡 */
.msg-user { align-self:flex-end; max-width:78%; margin:10px 4px 6px 0; }
.msg-user .bubble { background:linear-gradient(120deg, rgba(124,92,255,.35), rgba(124,92,255,.2));
  border:1px solid rgba(124,92,255,.4); border-radius:16px 16px 4px 16px; padding:10px 14px; font-size:14px; }
.msg-user .bubble.sys { background:rgba(255,193,7,.1); border-color:rgba(255,193,7,.3); color:#ffd66b; font-size:12.5px; }

/* AI 消息：叙事流 */
.msg-ai { align-self:stretch; margin:6px 0; }
.narr { font-size:15px; line-height:1.95; margin:9px 2px; color:rgba(236,234,246,.94); }
.narr.atmos { text-align:center; color:var(--gold); font-size:13.5px; letter-spacing:.08em; margin:12px 4px; }
.dlg { display:flex; gap:10px; margin:10px 2px; align-items:flex-start; }
.dlg .ava { flex:none; width:36px; height:36px; border-radius:50%; object-fit:cover; border:1.5px solid var(--line2); }
.dlg .ava-letter { flex:none; width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:800; background:linear-gradient(135deg, rgba(124,92,255,.4), rgba(77,215,255,.25)); border:1.5px solid var(--line2); }
.dlg-body { flex:1; min-width:0; }
.dlg-name { font-size:11.5px; color:var(--accent2); font-weight:700; letter-spacing:.05em; margin-bottom:3px; }
.dlg-text { font-size:15px; line-height:1.7; background:var(--card); border:1px solid var(--line);
  border-radius:3px 14px 14px 14px; padding:9px 13px; display:inline-block; }

.warn-line { margin:10px 2px; padding:10px 14px; border-radius:12px; background:rgba(255,107,122,.1);
  border:1px solid rgba(255,107,122,.35); color:#ffaeb7; font-size:13px; line-height:1.7; }
.hi-line { margin:10px 2px; text-align:center; color:var(--gold); font-size:13.5px; letter-spacing:.1em; }
.rumor-line { margin:8px 2px; font-size:12.5px; color:var(--dim); border-left:2px solid var(--line2); padding:2px 0 2px 10px; }
.rumor-line b { color:rgba(236,234,246,.9); font-weight:600; }

/* 选项按钮 */
.choices { display:flex; flex-direction:column; gap:8px; margin:12px 2px 6px; }
.choice-btn { text-align:left; padding:11px 14px; border-radius:13px; border:1px solid var(--line2);
  background:var(--card); color:var(--text); cursor:pointer; font-size:13.8px; font-family:inherit; transition:.18s; line-height:1.55; }
.choice-btn:hover { border-color:var(--accent); }
.choice-btn:active { transform:scale(.98); }
.choice-btn .num { display:inline-flex; width:20px; height:20px; align-items:center; justify-content:center; border-radius:6px;
  background:linear-gradient(120deg, var(--accent2), var(--accent)); color:#fff; font-size:11px; font-weight:800; margin-right:9px; vertical-align:-3px; }
.choice-btn .cost { display:block; color:var(--dim); font-size:11.5px; margin-top:2px; margin-left:29px; }
.choice-btn.free { border-style:dashed; color:var(--dim); text-align:center; }

/* ═══════════ 面板 ═══════════ */
.panel { margin:12px 0; border-radius:16px; border:1px solid var(--line2); overflow:hidden;
  background:linear-gradient(160deg, rgba(13,13,28,.92), rgba(20,18,40,.88)); box-shadow:0 6px 24px rgba(0,0,0,.35); }
.panel-head { display:flex; align-items:center; gap:8px; padding:10px 14px; font-size:12px; font-weight:800; letter-spacing:.18em;
  color:var(--accent2); background:rgba(77,215,255,.06); border-bottom:1px solid var(--line); }
.panel-body { padding:12px 14px; }

/* 播报条 */
.panel-broadcast { border:none; box-shadow:none; background:linear-gradient(120deg, rgba(124,92,255,.16), rgba(77,215,255,.09));
  border:1px solid rgba(124,92,255,.35); }
.bc-loc { font-size:14px; font-weight:800; letter-spacing:.03em; display:flex; align-items:center; gap:7px; }
.bc-loc .loc-dot { width:8px; height:8px; border-radius:50%; background:var(--accent2); box-shadow:0 0 8px var(--accent2); flex:none; }
.bc-day { color:var(--dim); font-size:12px; font-weight:500; }
.bc-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }
.bc-chip { font-size:12px; font-weight:700; padding:3px 10px; border-radius:99px; background:rgba(0,0,0,.25); border:1px solid var(--line2); }
.bc-chip.main { color:var(--accent2); }
.bc-chip.gold { color:var(--gold); }
.bc-extra { margin-top:9px; font-size:12px; color:rgba(236,234,246,.85); line-height:1.7; border-top:1px dashed var(--line2); padding-top:8px; }
.bc-extra b { color:var(--gold); font-weight:700; }

/* 档案/行式面板 */
.rows { display:flex; flex-direction:column; gap:0; }
.kv-row { display:flex; gap:10px; padding:5px 0; font-size:13px; line-height:1.65; }
.kv-k { flex:none; width:76px; color:var(--dim); font-size:12.5px; }
.kv-v { flex:1; word-break:break-all; }
.kv-v .arrow { color:var(--accent2); font-weight:700; }
.panel-divider { border:none; border-top:1px dashed var(--line2); margin:8px 0; }
.stat-line { display:flex; flex-wrap:wrap; gap:6px; }
.stat-badge { font-size:12px; padding:3px 10px; border-radius:8px; background:rgba(124,92,255,.14); border:1px solid rgba(124,92,255,.3); color:#cabaff; font-weight:600; }
.rel-row { display:flex; gap:8px; align-items:baseline; padding:4px 0; font-size:13px; }
.rel-name { font-weight:700; color:var(--gold); flex:none; }
.rel-val { font-weight:700; color:var(--accent2); flex:none; font-size:12.5px; }
.rel-why { color:var(--dim); font-size:12px; }

/* 对抗面板 */
.battle-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.battle-side { background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:12px; padding:10px 12px; }
.battle-side.op { border-color:rgba(255,107,122,.35); }
.bs-name { font-size:13.5px; font-weight:800; margin-bottom:6px; }
.bs-line { font-size:12px; color:rgba(236,234,246,.85); line-height:1.7; }
.bs-line b { color:var(--accent2); }
.battle-side.op .bs-name { color:var(--danger); }
.mind-line { margin-top:8px; font-size:11.5px; color:#ffd6a8; font-style:italic; }
.battle-situ { margin-top:10px; padding:9px 12px; border-radius:10px; font-size:12.8px;
  background:rgba(255,193,7,.07); border:1px solid rgba(255,193,7,.2); color:#ffe3a3; }

/* 章节/死亡 */
.panel-chapter .panel-body { font-size:13px; line-height:1.9; }
.panel-chapter b { color:var(--gold); }
.death-panel { border-color:rgba(255,107,122,.5); }
.death-panel .panel-head { color:var(--danger); background:rgba(255,107,122,.07); }

/* 图鉴 */
.codex-sec { font-size:12px; font-weight:800; letter-spacing:.12em; color:var(--gold); margin:10px 0 4px; }
.codex-item { font-size:12.8px; padding:3px 0 3px 12px; position:relative; color:rgba(236,234,246,.88); line-height:1.7; }
.codex-item::before { content:"·"; position:absolute; left:2px; color:var(--accent2); }
.codex-item.lock { color:var(--dim); }

/* 存档面板 */
.save-block { font-size:12px; }
.save-copy { margin-top:10px; width:100%; padding:9px; border-radius:10px; border:1px solid var(--line2);
  background:var(--card2); color:var(--text); font-size:12.5px; cursor:pointer; font-family:inherit; }

/* 终端式面板（未识别代码块） */
.panel-terminal .panel-body { padding:0; }
.panel-terminal pre { padding:12px 14px; font-family:var(--panel-mono); font-size:11.8px; line-height:1.7;
  white-space:pre-wrap; word-break:break-all; color:rgba(236,234,246,.92); }

/* 生成中光标 */
.typing-cursor { display:inline-block; width:8px; height:16px; background:var(--accent2); vertical-align:-2px;
  margin-left:2px; animation:blink .8s steps(1) infinite; border-radius:2px; }
@keyframes blink { 50% { opacity:0 } }
.stream-hint { font-size:11px; color:var(--dim); padding:6px 4px; letter-spacing:.1em; }

/* ═══════════ 快捷栏 / 输入栏 ═══════════ */
.quickbar { display:flex; gap:8px; padding:8px 14px 2px; overflow-x:auto; scrollbar-width:none; }
.quickbar::-webkit-scrollbar { display:none; }
.q-chip { flex:none; font-size:12.5px; padding:7px 16px; border-radius:99px; border:1px solid var(--line2);
  background:var(--card); color:var(--text); cursor:pointer; transition:.18s; font-family:inherit; font-weight:600; }
.q-chip:active { transform:scale(.92); }
.q-chip.alt { color:var(--accent2); border-color:rgba(77,215,255,.35); }
.inputbar { display:flex; gap:9px; align-items:flex-end; padding:10px 14px; padding-bottom:calc(12px + env(safe-area-inset-bottom)); position:sticky; bottom:0;
  background:linear-gradient(0deg, rgba(7,7,15,.95) 20%, rgba(7,7,15,.5) 75%, transparent); }
#input { flex:1; resize:none; border:1.5px solid var(--line2); border-radius:16px; background:var(--card);
  color:var(--text); font-size:14.5px; padding:11px 15px; outline:none; font-family:inherit; max-height:120px; line-height:1.55; }
#input:focus { border-color:var(--accent); }
.send-btn { width:46px; height:46px; flex:none; border:none; border-radius:50%; cursor:pointer;
  background:linear-gradient(135deg, var(--accent2), var(--accent)); color:#fff; display:flex; align-items:center; justify-content:center; transition:.2s; }
.send-btn svg { width:20px; height:20px; }
.send-btn:active { transform:scale(.9); }
.send-btn.stop { background:linear-gradient(135deg, #ff8f9a, #ff5c72); }
.hidden { display:none !important; }

/* ═══════════ 设置/存档表单 ═══════════ */
.form-body { padding:12px 16px 46px; display:flex; flex-direction:column; gap:14px; }
.form-card { padding:18px; border-radius:var(--radius); background:var(--card); border:1px solid var(--line); display:block; }
.form-card.dim { background:rgba(255,255,255,.025); }
.form-label { display:block; font-size:13px; font-weight:700; letter-spacing:.04em; margin-bottom:14px; }
.form-label input[type=text], .form-label input[type=password] { display:block; width:100%; margin-top:8px;
  padding:11px 13px; border-radius:12px; border:1.5px solid var(--line); background:rgba(255,255,255,.04);
  color:var(--text); font-size:13.5px; font-family:inherit; outline:none; }
.form-label input:focus { border-color:var(--accent); }
.form-hint { display:block; font-size:11px; color:var(--dim); font-weight:400; margin-top:6px; line-height:1.7; }
.key-row { display:flex; gap:8px; }
.key-row input { flex:1; }
.mini-btn { flex:none; margin-top:8px; padding:0 12px; border-radius:12px; border:1px solid var(--line2);
  background:var(--card2); color:var(--dim); font-size:11.5px; cursor:pointer; font-family:inherit; }
.model-chips { display:flex; flex-wrap:wrap; gap:7px; margin-top:9px; }
.m-chip { font-size:11px; padding:4px 11px; border-radius:99px; border:1px solid var(--line2); background:var(--card2);
  color:var(--dim); cursor:pointer; font-family:inherit; }
.m-chip.on, .m-chip:active { color:var(--accent2); border-color:rgba(77,215,255,.45); }
input[type=range] { width:100%; margin-top:10px; accent-color:var(--accent); }
.temp-val { color:var(--accent2); font-weight:800; }
.switch-row { display:flex; align-items:center; gap:14px; }
.switch { flex:none; width:46px; height:26px; border-radius:99px; background:var(--card2); border:1px solid var(--line2);
  cursor:pointer; position:relative; transition:.25s; }
.switch .knob { position:absolute; top:2.5px; left:3px; width:19px; height:19px; border-radius:50%; background:var(--dim); transition:.25s; }
.switch.on { background:linear-gradient(120deg, rgba(77,215,255,.4), rgba(124,92,255,.5)); border-color:var(--accent); }
.switch.on .knob { left:22px; background:#fff; }
.switch-title { font-size:13.5px; font-weight:700; }
.switch-sub { font-size:11px; color:var(--dim); margin-top:3px; line-height:1.6; }
.form-actions { display:flex; gap:10px; margin-top:6px; }
.form-actions .btn { flex:1; padding:12px; font-size:13.5px; }
.conn-result { margin-top:12px; font-size:12px; border-radius:10px; padding:10px 12px; line-height:1.7; display:none; }
.conn-result.ok { display:block; background:rgba(90,255,170,.08); border:1px solid rgba(90,255,170,.3); color:#9dffc8; }
.conn-result.bad { display:block; background:rgba(255,107,122,.08); border:1px solid rgba(255,107,122,.3); color:#ffb3bc; }
.about-p { font-size:12.5px; color:rgba(236,234,246,.75); line-height:1.9; margin-bottom:8px; }

/* 存档列表 */
.saves-list { display:flex; flex-direction:column; gap:10px; }
.save-item { padding:14px 16px; border-radius:var(--radius); background:var(--card); border:1px solid var(--line); }
.save-item-top { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.save-name { font-size:14px; font-weight:700; }
.save-time { font-size:10.5px; color:var(--dim); flex:none; }
.save-sub { font-size:12px; color:var(--dim); margin-top:5px; }
.save-ops { display:flex; gap:8px; margin-top:11px; }
.save-ops button { flex:1; padding:8px; font-size:12px; border-radius:10px; border:1px solid var(--line2);
  background:var(--card2); color:var(--text); cursor:pointer; font-family:inherit; }
.save-ops button.del { color:var(--danger); border-color:rgba(255,107,122,.35); }
.empty-tip { text-align:center; color:var(--dim); font-size:12.5px; padding:30px 0; line-height:1.9; }
#import-area { width:100%; margin-top:8px; padding:12px; border-radius:12px; border:1px solid var(--line);
  background:rgba(255,255,255,.04); color:var(--text); font-size:12px; font-family:var(--panel-mono); resize:vertical; min-height:90px; outline:none; }
#import-area:focus { border-color:var(--accent); }

/* ═══════════ 模态 ═══════════ */
.modal { position:fixed; inset:0; z-index:60; background:rgba(4,4,10,.72); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center; padding:22px; animation:fadein .2s; }
.modal-box { width:100%; max-width:430px; background:linear-gradient(160deg, #16152a, #100f1f);
  border:1px solid var(--line2); border-radius:22px; padding:22px; box-shadow:0 20px 60px rgba(0,0,0,.6); animation:pop .28s ease; max-height:82dvh; overflow-y:auto; }
@keyframes pop { from { transform:scale(.92); opacity:0 } to { transform:none; opacity:1 } }
.modal-title { font-size:16.5px; font-weight:800; letter-spacing:.04em; margin-bottom:8px; }
.modal-sub { font-size:12.5px; color:var(--dim); line-height:1.8; margin-bottom:14px; }
.modal-box input[type=text] { width:100%; padding:12px 14px; border-radius:13px; border:1.5px solid var(--line2);
  background:rgba(255,255,255,.05); color:var(--text); font-size:13.5px; outline:none; font-family:inherit; }
.modal-box input[type=text]:focus { border-color:var(--accent); }
.gen-status { margin-top:12px; font-size:12.5px; color:var(--accent2); line-height:1.8; }
.gen-preview { margin-top:12px; border:1px solid var(--line2); border-radius:14px; padding:14px; background:rgba(255,255,255,.03); font-size:12.5px; line-height:1.8; }
.gen-preview b { color:var(--gold); font-size:14px; }
.menu-box { padding:12px; }
.menu-item { padding:15px 16px; border-radius:14px; font-size:14.5px; font-weight:600; cursor:pointer; transition:.15s; text-align:center; }
.menu-item:active { background:var(--card2); }
.menu-item.danger { color:var(--danger); }
.menu-cancel { padding:14px; text-align:center; color:var(--dim); font-size:12.5px; cursor:pointer; border-top:1px solid var(--line); margin-top:6px; }

/* Toast */
.toast { position:fixed; left:50%; bottom:88px; transform:translateX(-50%) translateY(20px); z-index:99;
  background:rgba(22,21,42,.95); border:1px solid var(--line2); color:var(--text); font-size:13px;
  padding:10px 20px; border-radius:99px; opacity:0; pointer-events:none; transition:.3s; max-width:80vw; text-align:center; line-height:1.6; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* 滚动条 */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,.12); border-radius:3px; }
::-webkit-scrollbar-track { background:transparent; }

@media (min-width: 560px) {
  body::before { content:""; position:fixed; inset:0; z-index:-2;
    background:radial-gradient(1200px 800px at 70% -10%, rgba(124,92,255,.12), transparent 60%),
               radial-gradient(1000px 700px at 10% 90%, rgba(77,215,255,.07), transparent 55%), #050509; }
  #app { border-left:1px solid rgba(255,255,255,.05); border-right:1px solid rgba(255,255,255,.05); box-shadow:0 0 80px rgba(0,0,0,.45); }
}