/* =========================================================
   欲望修罗场 · UI 设计系统  v2
   深夜档案（After Dark Dossier）—— 墨色底 · 香槟金 · 胭脂红
   ========================================================= */
:root{
  /* 表面层级 */
  --bg:#0a0708;
  --bg2:#120d0f;
  --surface:#161012;
  --surface-2:#1e1619;
  --surface-3:#271d21;
  --panel:rgba(22,16,18,.86);
  --panel2:rgba(30,22,25,.7);
  /* 线 */
  --line:rgba(255,226,206,.075);
  --line-strong:rgba(255,226,206,.15);
  --line-gold:rgba(207,174,124,.32);
  /* 文本 */
  --ink:#f3ece5;
  --ink-2:#d2c6bd;
  --ink-dim:#9c8f87;
  --ink-faint:#6a5f5a;
  /* 品牌色 */
  --wine:#8c2c43;
  --rouge:#c9506b;
  --rouge2:#ecb7c3;
  --rouge-soft:rgba(201,80,107,.12);
  --gold:#c9a774;
  --gold2:#eedfc4;
  --gold-soft:rgba(201,167,116,.1);
  --ok:#86c29d;
  --bad:#e3798e;
  --warn:#dcae67;
  /* 形 */
  --r-lg:20px;
  --r:14px;
  --r-sm:10px;
  --shadow:0 24px 60px -12px rgba(0,0,0,.6);
  --shadow-sm:0 8px 24px -8px rgba(0,0,0,.5);
  /* 字 */
  --serif:"Noto Serif SC","Songti SC","STSong","Source Han Serif SC",serif;
  --display:"Cormorant Garamond","Noto Serif SC","Songti SC",serif;
  --sans:-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--ink);
  font-size:15px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow:hidden;
}
/* 环境光 + 雨丝纹理（桌面端可见） */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(900px 520px at 50% -10%, rgba(140,44,67,.20), transparent 60%),
    radial-gradient(700px 500px at 100% 100%, rgba(201,167,116,.07), transparent 60%),
    radial-gradient(600px 600px at 0% 80%, rgba(90,40,70,.10), transparent 60%);
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:repeating-linear-gradient(105deg, rgba(255,240,226,.018) 0 1px, transparent 1px 9px);
  mask-image:linear-gradient(180deg,#000,transparent 70%);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 70%);
}
button{font-family:inherit;color:inherit}
b,strong{font-weight:600}

/* ---------- 应用外壳 ---------- */
#app{
  position:relative;z-index:1;
  width:100%;max-width:460px;margin:0 auto;
  height:100vh;height:100dvh;
  display:flex;flex-direction:column;
  background:
    radial-gradient(520px 260px at 50% -40px, rgba(140,44,67,.16), transparent 70%),
    var(--bg);
  overflow:hidden;
}
#view{
  flex:1;min-height:0;
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding:0 18px 32px;
}
@media (min-width:720px){
  #app{
    height:calc(100dvh - 48px);margin-top:24px;
    border-radius:32px;
    border:1px solid var(--line-strong);
    box-shadow:0 0 0 8px rgba(255,255,255,.012), 0 40px 120px -20px rgba(0,0,0,.9), 0 0 140px -40px rgba(140,44,67,.35);
  }
  .side-mark{display:flex!important}
}
.side-mark{
  display:none;position:fixed;z-index:0;left:max(32px, calc(50% - 520px));top:50%;transform:translateY(-50%);
  flex-direction:row;gap:14px;pointer-events:none;
}
.side-mark .v{writing-mode:vertical-rl;font-family:var(--serif);font-weight:600;letter-spacing:.7em;font-size:14px;color:rgba(238,223,196,.22)}
.side-mark .en{writing-mode:vertical-rl;font-family:var(--display);font-style:italic;letter-spacing:.3em;font-size:13px;color:rgba(201,167,116,.22)}

h1,h2,h3,.serif{font-family:var(--serif);font-weight:600;letter-spacing:.02em}
.num{font-variant-numeric:tabular-nums}
.hero .date .d,.step-h i,#scene-choices .choice::before{font-variant-numeric:lining-nums tabular-nums}
/* 数值一律用无衬线等宽数字，保证金额/属性清晰可读 */
.wallet b,.vital .vh b,.ledger b,.alloc .ac .ctl b,.pts-pill b,.stat b{font-family:var(--sans)!important;font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* ---------- 顶栏 ---------- */
.topbar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:12px;
  margin:0 -18px 16px;
  padding:calc(14px + env(safe-area-inset-top)) 18px 12px;
  background:linear-gradient(180deg, rgba(10,7,8,.97) 60%, rgba(10,7,8,.86));
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.topbar .back{
  flex:none;width:34px;height:34px;border-radius:12px;
  border:1px solid var(--line-strong);
  background:var(--surface);color:var(--gold2);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:0;line-height:1;transition:background .15s, border-color .15s;
}
.topbar .back::before{
  content:"";width:9px;height:9px;border-left:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:translateX(2px) rotate(45deg);
}
.topbar .back:hover{border-color:var(--line-gold)}
.topbar .tb-txt{min-width:0;flex:1}
.topbar .title{font-size:18px;color:var(--ink);font-family:var(--serif);font-weight:600;letter-spacing:.06em;line-height:1.3}
.topbar .sub{font-size:11.5px;letter-spacing:.04em;color:var(--ink-dim);line-height:1.5;margin-top:1px}
.topbar .sub:empty{display:none}

/* ---------- 卡片 ---------- */
.card{
  position:relative;
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:16px;
  margin-bottom:10px;
  box-shadow:inset 0 1px 0 rgba(255,240,226,.04);
}
.card.soft{background:var(--surface);box-shadow:none;border-radius:var(--r)}
.card[onclick],.memo-card,.tile{cursor:pointer}
.card[onclick]{transition:border-color .15s, background .15s, transform .15s var(--ease)}
.card[onclick]:hover{border-color:var(--line-strong);background:var(--surface-2)}
.card[onclick]:active{transform:scale(.99)}
.card h3{font-size:17px;margin-bottom:2px}
.card.soft[style*="justify-content:space-between"]{gap:14px}
.card.soft[style*="justify-content:space-between"] > span:first-child{font-size:14px;color:var(--ink);line-height:1.55;min-width:0}
.card > b[style*="gold2"]:first-child{font-family:var(--serif);font-size:15px;letter-spacing:.03em}

/* 段落标题 */
.sect{
  margin:26px 2px 12px;
  font-size:12px;font-weight:600;
  color:var(--ink-dim);
  letter-spacing:.12em;
  display:flex;align-items:center;gap:10px;
  line-height:1.5;
}
.sect::before{content:"";width:3px;height:12px;border-radius:2px;background:var(--rouge);flex:none}
.sect::after{content:"";flex:1;min-width:16px;height:1px;background:linear-gradient(90deg, var(--line-strong), transparent)}
.modal .sect{margin-top:18px}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:40px;
  border:1px solid var(--line-strong);
  background:var(--surface-2);
  color:var(--ink);
  border-radius:12px;
  padding:9px 16px;
  font-size:14px;font-weight:500;
  letter-spacing:.03em;line-height:1.35;
  cursor:pointer;text-align:center;
  transition:transform .15s var(--ease), background .15s, border-color .15s, box-shadow .15s, opacity .15s;
  user-select:none;
}
.btn:hover{border-color:rgba(255,226,206,.26);background:var(--surface-3)}
.btn:active{transform:scale(.98)}
.btn.primary{
  background:linear-gradient(180deg,#b5435d,#922f47);border-color:rgba(255,190,200,.18);color:#fff6f7;
  box-shadow:0 6px 18px -6px rgba(201,80,107,.6), inset 0 1px 0 rgba(255,255,255,.14);
}
.btn.primary:hover{background:linear-gradient(180deg,#c24c67,#9c344d)}
.btn.gold{
  background:linear-gradient(180deg,#e2c493,#c19d68);border-color:transparent;color:#23170c;font-weight:600;
  box-shadow:0 6px 18px -8px rgba(201,167,116,.6), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn.gold:hover{background:linear-gradient(180deg,#ead0a2,#c9a774)}
.btn.ghost{background:transparent;border-color:var(--line);color:var(--ink-dim)}
.btn.ghost:hover{color:var(--ink);border-color:var(--line-strong);background:rgba(255,240,226,.03)}
.btn.danger{background:transparent;border-color:rgba(227,121,142,.35);color:var(--bad)}
.btn.danger:hover{background:rgba(227,121,142,.08)}
.btn.block{display:flex;width:100%;min-height:48px;border-radius:14px;font-size:15px}
.btn.sm{min-height:30px;padding:5px 12px;font-size:12.5px;border-radius:9px}
.btn.sm.block{min-height:38px;font-size:13px}
.btn:disabled,.btn[disabled]{opacity:.38;cursor:not-allowed;transform:none;box-shadow:none}
.row{display:flex;gap:8px;flex-wrap:wrap}
.row > .btn{flex:1 1 auto}

/* ---------- 标签 / 胶囊 ---------- */
.chip{
  display:inline-flex;align-items:center;gap:4px;
  font-size:11.5px;color:var(--ink-dim);
  border:1px solid var(--line);
  border-radius:999px;padding:2px 10px;background:var(--surface);
}
.chip b{color:var(--gold2);font-weight:500}
.tag{
  display:inline-flex;align-items:center;
  font-size:11px;font-weight:500;line-height:1.5;
  padding:1px 8px;border-radius:6px;
  background:var(--rouge-soft);color:var(--rouge2);
  border:1px solid rgba(201,80,107,.22);letter-spacing:.03em;
  white-space:nowrap;vertical-align:1px;
}
.tag.gold{background:var(--gold-soft);color:var(--gold);border-color:rgba(201,167,116,.24)}
.tag.green{background:rgba(134,194,157,.09);color:var(--ok);border-color:rgba(134,194,157,.24)}

/* ---------- 网格 / 宫格 ---------- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.tile{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px 4px 12px;
  text-align:center;color:var(--ink-2);
  transition:border-color .15s, background .15s, transform .15s var(--ease);
  position:relative;
}
button.tile{font:inherit}
.tile:hover{border-color:var(--line-strong);background:var(--surface-2)}
.tile:active{transform:scale(.97)}
.tile .ico{
  width:40px;height:40px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:19px;line-height:1;
  background:linear-gradient(160deg, rgba(201,167,116,.14), rgba(201,167,116,.03));
  border:1px solid rgba(201,167,116,.16);
  color:var(--gold2);
}
.tile .ico svg{width:20px;height:20px}
.tile .lb{font-size:11.5px;color:var(--ink-2);letter-spacing:.02em;line-height:1.35;padding:0 2px}
.tile .badge{position:absolute;top:8px;right:calc(50% - 30px)}
.badge{
  min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:var(--rouge);color:#fff;font-size:10.5px;font-weight:600;
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 2px var(--bg);font-variant-numeric:tabular-nums;
}

/* ---------- 人物卡 / 头像 ---------- */
.male-card{display:flex;gap:14px;align-items:center}
.male-card > div[style*="flex:1"]{min-width:0;line-height:1.55}
.male-card b[style*="gold2"]{font-family:var(--serif);font-size:15.5px;color:var(--ink)!important;letter-spacing:.04em;margin-right:4px}
.male-card .tag{margin-top:4px}
.male-card[onclick]::after{
  content:"";flex:none;width:7px;height:7px;margin-right:2px;
  border-right:1.5px solid var(--ink-faint);border-top:1.5px solid var(--ink-faint);transform:rotate(45deg);
}
.male-card[onclick]:has(.unread)::after,.male-card[onclick]:has(> .btn)::after{display:none}
.male-card > span[style*="color:var(--ink-dim)"]:last-child{display:none}
.avatar{
  width:50px;height:50px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-weight:600;font-size:20px;color:#fff8f4;
  box-shadow:0 0 0 1px rgba(255,236,220,.22), 0 0 0 4px rgba(0,0,0,.35), 0 8px 18px -6px rgba(0,0,0,.6);
  position:relative;overflow:hidden;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}
.avatar::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.16),transparent 55%)}
.avatar.lg{width:76px;height:76px;font-size:30px}
.avatar.baby{width:48px;height:48px;font-size:19px;background:linear-gradient(160deg,#f1e1d8,#c9a39a);color:#5c2c3a;text-shadow:none}
.avatar.place{border-radius:14px;background:linear-gradient(160deg,#2a1d22,#1c1417)!important;color:var(--gold2);box-shadow:0 0 0 1px rgba(201,167,116,.2);width:46px;height:46px}
.avatar.place::after{display:none}
.avatar.place svg{width:22px;height:22px}

/* ---------- 底部导航 ---------- */
.bottom-nav{
  flex:none;position:relative;z-index:30;
  display:grid;grid-template-columns:repeat(5,1fr);
  padding:6px 10px calc(8px + env(safe-area-inset-bottom));
  background:rgba(12,9,10,.96);
  border-top:1px solid var(--line);
}
.bottom-nav .nav-i{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:7px 0 4px;border-radius:12px;
  color:var(--ink-faint);font-size:10.5px;font-weight:500;letter-spacing:.08em;cursor:pointer;position:relative;
  transition:color .15s;
}
.bottom-nav .nav-i .ico{width:24px;height:24px;display:flex;align-items:center;justify-content:center}
.bottom-nav .nav-i .ico svg{width:22px;height:22px}
.bottom-nav .nav-i:hover{color:var(--ink-dim)}
.bottom-nav .nav-i.on{color:var(--gold2)}
.bottom-nav .nav-i.on::before{
  content:"";position:absolute;top:-7px;left:50%;width:22px;height:2px;margin-left:-11px;border-radius:2px;background:var(--gold);
  box-shadow:0 0 12px rgba(201,167,116,.8);
}
.bottom-nav .nav-i .dot{position:absolute;top:5px;left:calc(50% + 7px);width:7px;height:7px;border-radius:50%;background:var(--rouge);box-shadow:0 0 0 2px #0c090a}

/* ---------- 弹层 ---------- */
#modal-root{position:relative;z-index:40}
.overlay{
  position:fixed;inset:0;z-index:50;
  background:rgba(5,3,4,.76);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  padding:calc(24px + env(safe-area-inset-top)) 14px calc(20px + env(safe-area-inset-bottom));
  animation:fade .22s ease;
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
}
.overlay .modal{margin-top:auto;flex:none}
.ov-escape{
  flex:none;margin:14px 0 auto;height:32px;padding:0 14px;border-radius:999px;
  display:inline-flex;align-items:center;gap:6px;
  background:transparent;border:1px solid transparent;color:var(--ink-faint);
  font-size:11.5px;letter-spacing:.06em;cursor:pointer;transition:color .15s,border-color .15s;
}
.ov-escape svg{width:13px;height:13px}
.ov-escape:hover{color:var(--ink-dim);border-color:var(--line)}
.modal{
  position:relative;width:100%;max-width:440px;
  max-height:88vh;max-height:88dvh;overflow-y:auto;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  background:
    radial-gradient(400px 160px at 50% 0, rgba(140,44,67,.14), transparent 70%),
    linear-gradient(180deg, #1c1417, #120d0f);
  border:1px solid var(--line-strong);
  border-radius:22px;
  padding:22px 20px 22px;
  animation:up .32s var(--ease);
  box-shadow:var(--shadow);
}
.overlay .modal{max-height:none;overflow:visible}
@keyframes up{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal h3{
  color:var(--ink);margin:0 34px 10px 0;font-size:20px;line-height:1.45;letter-spacing:.06em;
}
.modal .scene-body,.scene-body{
  white-space:pre-wrap;margin:10px 0 18px;color:var(--ink-2);
  font-size:15px;line-height:2;letter-spacing:.02em;
}
.scene-who{
  display:flex;align-items:center;gap:8px;
  font-size:11px;font-weight:600;color:var(--rouge2);letter-spacing:.24em;margin-bottom:8px;
}
.scene-who:not(:empty)::before{content:"";width:16px;height:1px;background:var(--rouge)}
.scene-who:empty{display:none}

/* 剧情弹层（视觉小说式） */
.modal.scene{padding:26px 22px 20px}
.modal.scene h3{font-size:22px;margin-bottom:6px}
.modal.scene .scene-body{
  font-family:var(--serif);font-weight:400;font-size:15.5px;line-height:2.05;color:#e7ddd4;
  padding:14px 0 6px;margin:6px 0 16px;border-top:1px solid var(--line);
}
#scene-choices{counter-reset:ch;display:flex;flex-direction:column;gap:8px}
#scene-choices .choice{counter-increment:ch;padding-left:46px;margin:0}
#scene-choices .choice::before{
  content:counter(ch, decimal-leading-zero);
  position:absolute;left:14px;top:12px;
  font-family:var(--display);font-style:italic;font-weight:600;font-size:16px;line-height:1.4;color:var(--gold);
}

.choice{
  position:relative;display:block;width:100%;text-align:left;margin-bottom:8px;
  background:var(--surface);
  border:1px solid var(--line-strong);
  border-radius:14px;
  padding:12px 16px;
  color:var(--ink);font-size:14.5px;line-height:1.6;
  cursor:pointer;transition:border-color .15s, background .15s, transform .15s var(--ease);
  min-height:46px;
}
.choice:hover{border-color:var(--line-gold);background:var(--surface-2)}
.choice:active{transform:scale(.99)}
.choice.on{border-color:var(--rouge);background:linear-gradient(180deg,rgba(201,80,107,.16),rgba(201,80,107,.06));box-shadow:inset 0 0 0 1px rgba(201,80,107,.25)}
.choice .hint{display:block;font-size:12px;color:var(--ink-dim);margin-top:3px;letter-spacing:.01em;line-height:1.55}
.modal-x{
  position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:10px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-dim);font-size:0;cursor:pointer;z-index:5;
  display:flex;align-items:center;justify-content:center;
}
.modal-x::before,.modal-x::after{content:"";position:absolute;width:12px;height:1.5px;background:currentColor;border-radius:1px;transform:rotate(45deg)}
.modal-x::after{transform:rotate(-45deg)}
.modal-x:hover{color:var(--ink);border-color:var(--line-strong)}
.skip-btn{position:absolute;top:14px;right:14px;z-index:5;height:30px;padding:0 12px;border-radius:9px;border:1px solid var(--line);background:var(--surface);color:var(--ink-dim);font-size:11.5px;letter-spacing:.06em;cursor:pointer}
.skip-btn:hover{color:var(--ink);border-color:var(--line-strong)}
.modal:has(.skip-btn) h3{margin-right:84px}

/* 消息 */
.msg-thread{display:flex;flex-direction:column;gap:12px;padding:14px 12px!important;max-height:56vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
.msg-row{display:flex;gap:8px;max-width:86%;align-items:flex-end}
.msg-row.me{align-self:flex-end;flex-direction:row-reverse}
.msg-row .avatar{width:32px!important;height:32px!important;font-size:13px!important;border-radius:50%!important;box-shadow:0 0 0 1px rgba(255,236,220,.18)}
.bubble{
  background:var(--surface-3);
  border:1px solid var(--line);
  border-radius:16px 16px 16px 5px;
  padding:9px 13px;font-size:14px;line-height:1.65;color:var(--ink);
  white-space:pre-wrap;word-break:break-word;
}
.msg-row.me .bubble{background:linear-gradient(180deg,#9a3550,#7f2a41);border-color:transparent;border-radius:16px 16px 5px 16px;color:#fff5f6}
.bubble .t{display:block;font-size:10px;color:var(--ink-faint);margin-top:4px;letter-spacing:.04em}
.msg-row.me .bubble .t{color:rgba(255,230,235,.55);text-align:right}
.unread{
  align-self:center;flex:none;min-width:20px;height:20px;padding:0 6px;border-radius:10px;
  background:var(--rouge);color:#fff;font-size:11px;font-weight:600;
  display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums;
}
.contact .meta{font-size:11px;color:var(--ink-faint);margin-left:6px}
.contact .last{font-size:12.5px;color:var(--ink-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}

/* 提示条 */
.notice{
  position:relative;
  background:var(--rouge-soft);
  border:1px solid rgba(201,80,107,.18);
  padding:10px 14px 10px 16px;
  border-radius:12px;
  font-size:13px;color:var(--ink-2);margin:8px 0;line-height:1.75;
}
.notice::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:2px;border-radius:2px;background:var(--rouge)}
.notice.gold{background:var(--gold-soft);border-color:rgba(201,167,116,.16)}
.notice.gold::before{background:var(--gold)}
.notice.red{background:rgba(227,121,142,.09);border-color:rgba(227,121,142,.26);color:#f1cdd5}
.notice.red::before{background:var(--bad)}
.notice.quote{background:transparent;border:none;padding:4px 18px 4px 20px;font-family:var(--serif);color:var(--ink-2);font-size:13.5px;margin:4px 0 14px}
.notice.quote::before{background:var(--line-gold);top:6px;bottom:6px}

/* 键值行 */
.kv{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:10px 0;border-bottom:1px solid var(--line);font-size:13.5px;line-height:1.6}
.kv:first-child{padding-top:2px}
.kv:last-child{border-bottom:none;padding-bottom:2px}
.kv .k{color:var(--ink-dim);flex:none;max-width:56%}
.kv > span:last-child{text-align:right;color:var(--ink)}

/* 进度条 */
.progress{height:5px;background:rgba(255,240,226,.07);border-radius:99px;overflow:hidden}
.progress i{display:block;height:100%;background:linear-gradient(90deg, var(--wine), var(--rouge));border-radius:99px;transition:width .4s var(--ease)}
.progress i.gold{background:linear-gradient(90deg, #8f7148, var(--gold2))}

/* 表单 */
input[type=text],input[type=number],select,textarea{
  width:100%;background:var(--bg2);
  border:1px solid var(--line-strong);border-radius:12px;
  padding:12px 14px;color:var(--ink);font-size:15px;outline:none;font-family:inherit;
  transition:border-color .15s, box-shadow .15s;
}
input::placeholder,textarea::placeholder{color:var(--ink-faint)}
input:focus,select:focus,textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,167,116,.14)}
label.f{display:block;font-size:12px;font-weight:600;color:var(--ink-dim);margin:20px 0 8px;letter-spacing:.1em}
label.f b{color:var(--gold2)}
.opt-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.opt{
  border:1px solid var(--line-strong);border-radius:12px;background:var(--surface);
  padding:10px 6px;text-align:center;font-size:13px;line-height:1.45;cursor:pointer;color:var(--ink-2);
  transition:border-color .15s, background .15s, color .15s;
  display:flex;align-items:center;justify-content:center;min-height:44px;
}
.opt:hover{border-color:rgba(255,226,206,.26)}
.opt.on{border-color:var(--gold);color:var(--gold2);background:var(--gold-soft);box-shadow:inset 0 0 0 1px rgba(201,167,116,.3)}

/* Toast */
#toast{position:fixed;top:calc(16px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:100;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:min(420px, calc(100% - 32px))}
.toast{
  display:flex;align-items:center;gap:10px;
  background:rgba(28,20,23,.96);
  border:1px solid var(--line-strong);
  color:var(--ink);
  padding:10px 16px 10px 14px;border-radius:14px;
  font-size:13px;line-height:1.55;letter-spacing:.02em;
  animation:toastIn .3s var(--ease);
  box-shadow:0 14px 40px -10px rgba(0,0,0,.7);
}
.toast::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold)}
.toast.bad::before{background:var(--bad);box-shadow:0 0 10px var(--bad)}
.toast.bad{border-color:rgba(227,121,142,.35)}
@keyframes toastIn{from{transform:translateY(-10px);opacity:0}to{transform:none;opacity:1}}

/* ---------- 标题页 ---------- */
.title-hero{position:relative;text-align:center;padding:calc(52px + env(safe-area-inset-top)) 4px 28px;min-height:100%;display:flex;flex-direction:column}
.title-hero .moon{
  position:relative;width:128px;height:128px;margin:0 auto 28px;border-radius:50%;
  background:radial-gradient(circle at 38% 34%, #f6e9d3 0%, #d9bf94 38%, #8f6d45 72%, #3a2618 100%);
  box-shadow:0 0 60px rgba(217,191,148,.26), 0 0 180px rgba(140,44,67,.4);
}
.title-hero .moon::after{
  content:"";position:absolute;inset:-1px;border-radius:50%;
  background:radial-gradient(circle at 76% 38%, var(--bg) 0 47%, transparent 48%);
}
.title-hero .en{font-family:var(--display);font-style:italic;font-size:15px;letter-spacing:.32em;color:var(--gold);margin:0 0 10px .32em}
.title-hero h1{
  font-family:var(--serif);font-weight:900;
  font-size:44px;letter-spacing:.2em;margin-left:.2em;line-height:1.2;
  color:var(--gold2);
  background:linear-gradient(180deg,#fbf1df 20%,#c9a774 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.title-hero .kicker{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-size:12px;letter-spacing:.36em;color:var(--rouge2);margin:16px auto 0;padding-left:.36em}
.title-hero .kicker::before,.title-hero .kicker::after{content:"";width:22px;height:1px;background:rgba(236,183,195,.45)}
.title-hero .lede{font-size:12.5px;color:var(--ink-dim);letter-spacing:.18em;margin-top:10px}
.title-hero .cta{display:flex;flex-direction:column;align-items:center;gap:10px;margin:36px auto 30px;width:100%;max-width:300px}
.title-hero .cta .btn{width:100%;min-height:52px;font-size:16px;border-radius:16px;letter-spacing:.12em}
.title-hero .cta .minor{font-size:11.5px;color:var(--ink-faint);letter-spacing:.06em;margin-top:4px}
.curtain{height:1px;background:linear-gradient(90deg, transparent, var(--line-gold), transparent);margin:24px auto;width:180px}
.colophon{text-align:left;margin-top:auto;padding:14px 16px;border-radius:var(--r);background:rgba(22,16,18,.7);border:1px solid var(--line)}
.colophon .cap{display:flex;align-items:center;gap:8px;color:var(--gold);font-size:11.5px;font-weight:600;letter-spacing:.2em}
.colophon ol{list-style:none;font-size:11.5px;color:var(--ink-dim);line-height:1.85}
.colophon li{position:relative;padding-left:18px}
.colophon li i{position:absolute;left:0;top:0;font-family:var(--display);font-style:italic;color:var(--gold);font-size:13px}
.colophon details summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between}
.colophon details summary::-webkit-details-marker{display:none}
.colophon details summary::after{content:"";width:7px;height:7px;border-right:1.5px solid var(--ink-faint);border-bottom:1.5px solid var(--ink-faint);transform:rotate(45deg);margin-top:-4px;transition:transform .2s}
.colophon details[open] summary::after{transform:rotate(-135deg);margin-top:2px}
.colophon details[open] summary{margin-bottom:8px}
.legal{font-size:11px;color:var(--ink-faint);line-height:1.8;text-align:left;margin-top:14px;letter-spacing:.02em}

/* ---------- 创建角色 ---------- */
.overlay:has(.modal.create){padding:0}
.modal.create{max-width:460px;min-height:100%;border-radius:0!important;border:none;padding:0 20px 0;background:var(--bg)}
@media (min-width:720px){.overlay:has(.modal.create){padding:24px 14px}.modal.create{min-height:auto;border-radius:24px!important;border:1px solid var(--line-strong)}}
.create-head{padding:calc(30px + env(safe-area-inset-top)) 0 6px}
.create-head .en{font-family:var(--display);font-style:italic;color:var(--gold);font-size:14px;letter-spacing:.24em}
.modal .create-head h3{font-size:26px;margin:4px 0 6px;letter-spacing:.08em}
.create-head p{font-size:13px;color:var(--ink-dim)}
.step{margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
.step-h{display:flex;align-items:baseline;gap:12px;margin-bottom:4px}
.step-h i{font-family:var(--display);font-style:italic;font-weight:600;font-size:26px;line-height:1;color:var(--gold)}
.step-h b{font-family:var(--serif);font-size:16px;letter-spacing:.08em}
.step-h span{margin-left:auto;font-size:11.5px;color:var(--ink-dim)}
.step label.f{margin-top:16px}
.alloc{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.alloc .ac{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:7px 7px 7px 14px;border:1px solid var(--line-strong);border-radius:12px;background:var(--surface)}
.alloc .ac .k{font-size:13px;color:var(--ink-2)}
.alloc .ac .ctl{display:flex;align-items:center;gap:2px}
.alloc .ac .ctl button{width:30px;height:30px;border-radius:9px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);font-size:16px;line-height:1;cursor:pointer}
.alloc .ac .ctl button:hover{border-color:var(--line-gold)}
.alloc .ac .ctl b{display:inline-block;width:24px;text-align:center;color:var(--gold2);font-size:15px}
.pts-pill{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:999px;background:var(--gold-soft);border:1px solid rgba(201,167,116,.22);color:var(--gold2);font-size:12px}
.pts-pill b{font-size:13px;line-height:1.2}
.opt-row.z4{grid-template-columns:repeat(4,1fr)}
.create-foot{
  position:sticky;bottom:0;z-index:6;margin:28px -20px 0;
  padding:22px 20px calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg, rgba(10,7,8,0), rgba(10,7,8,.96) 40%);
}
.create-foot .btn{box-shadow:0 14px 40px -10px rgba(201,80,107,.6)}
.stat-legend{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:12px;color:var(--ink-dim);margin-top:14px;padding:12px 14px;border-radius:12px;background:var(--surface);border:1px solid var(--line);line-height:1.7}
.stat-legend b{color:var(--gold2);font-weight:500}

/* ---------- 首页 ---------- */
.hero{
  position:relative;overflow:hidden;
  border-radius:24px;padding:20px 18px 18px;margin-bottom:12px;
  background:
    radial-gradient(360px 200px at 100% 0, rgba(201,80,107,.20), transparent 70%),
    radial-gradient(260px 200px at 0 100%, rgba(201,167,116,.10), transparent 70%),
    linear-gradient(180deg,#1f1619,#151012);
  border:1px solid var(--line-strong);
  box-shadow:var(--shadow-sm), inset 0 1px 0 rgba(255,240,226,.06);
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(105deg, transparent 0 10px, rgba(255,240,226,.025) 10px 11px);
  mask-image:linear-gradient(200deg,#000,transparent 60%);-webkit-mask-image:linear-gradient(200deg,#000,transparent 60%);
}
.hero > *{position:relative;z-index:1}
.hero-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.hero .eyebrow{display:flex;align-items:center;gap:8px;font-size:11.5px;letter-spacing:.16em;color:var(--gold)}
.hero .eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--rouge);box-shadow:0 0 10px var(--rouge)}
.hero .date{display:flex;align-items:flex-end;gap:12px;margin-top:8px}
.hero .date .d{font-family:var(--display);font-weight:500;font-size:68px;line-height:.82;color:var(--gold2);letter-spacing:-.02em}
.hero .date .ym{padding-bottom:4px;line-height:1.35}
.hero .date .ym b{display:block;font-family:var(--serif);font-size:16px;color:var(--ink);font-weight:600;letter-spacing:.06em}
.hero .date .ym span{font-size:12px;color:var(--ink-dim);letter-spacing:.06em}
.slots{display:flex;gap:4px;margin-top:18px}
.slots i{flex:1;height:4px;border-radius:2px;background:rgba(255,240,226,.08)}
.slots i.past{background:rgba(201,167,116,.35)}
.slots i.now{background:var(--gold);box-shadow:0 0 10px rgba(201,167,116,.6)}
.slot-lb{display:flex;margin-top:6px}
.slot-lb span{flex:1;font-size:10.5px;color:var(--ink-faint);letter-spacing:.1em}
.slot-lb span.now{color:var(--gold2)}
.wallet{text-align:right;flex:none}
.wallet span{display:block;font-size:10.5px;letter-spacing:.2em;color:var(--ink-dim)}
.wallet b{display:block;font-family:var(--display);font-size:21px;font-weight:600;color:var(--ink);letter-spacing:.01em;line-height:1.3;font-variant-numeric:tabular-nums}
.vitals{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.vital .vh{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;color:var(--ink-dim);letter-spacing:.06em}
.vital .vh b{font-family:var(--display);font-size:15px;font-weight:600;color:var(--ink);letter-spacing:0;font-variant-numeric:tabular-nums}
.vital .vh b small{font-size:12px;color:var(--ink-faint);font-weight:500}
.vital .bar{height:4px;margin-top:5px;border-radius:2px;background:rgba(255,240,226,.07);overflow:hidden}
.vital .bar i{display:block;height:100%;border-radius:2px;background:linear-gradient(90deg,#8f7148,var(--gold2))}
.vital.low .bar i{background:linear-gradient(90deg,#7f2a41,var(--bad))}
.vital.low .vh b{color:var(--bad)}
.timectl{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:8px;margin-top:18px}
.timectl .btn{min-height:50px;border-radius:14px;flex-direction:column;gap:0;line-height:1.3;padding:6px 8px}
.timectl .btn small{font-size:10.5px;font-weight:400;opacity:.65;letter-spacing:.04em}
.ledger{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.ledger > div{background:var(--surface);padding:12px 14px}
.ledger span{display:block;font-size:11.5px;color:var(--ink-dim);letter-spacing:.08em}
.ledger b{display:block;font-family:var(--display);font-size:19px;font-weight:600;line-height:1.3;font-variant-numeric:tabular-nums}
.ledger .in b{color:var(--ok)}
.ledger .out b{color:var(--bad)}
.link-row{display:flex;justify-content:flex-end;margin-top:6px}
.link{background:none;border:none;color:var(--gold);font-size:12.5px;letter-spacing:.06em;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:4px 2px}
.link::after{content:"";width:6px;height:6px;border-right:1.4px solid currentColor;border-top:1.4px solid currentColor;transform:rotate(45deg)}
.link:hover{color:var(--gold2)}

/* 旧版类兼容 */
.rain-bg{background:linear-gradient(180deg,#1f1619,#151012)}
.dayhead{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.dayhead h2{font-size:22px;color:var(--gold2);line-height:1.2}
.statgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
.stat{padding:8px 8px 7px;border-top:1px solid var(--line)}
.stat span{display:block;font-size:10.5px;letter-spacing:.16em;color:var(--ink-dim)}
.stat b{display:block;margin-top:2px;font-family:var(--display);font-weight:600;font-size:20px;color:var(--ink)}
.stat i{font-style:normal;font-size:11px;color:var(--ink-dim)}

/* 空状态 */
.empty{text-align:center;color:var(--ink-dim);padding:32px 16px;font-size:13px;line-height:1.8;letter-spacing:.03em}
.empty .ico{display:none}
.empty::before{
  content:"";display:block;width:30px;height:30px;margin:0 auto 12px;border-radius:50%;
  background:radial-gradient(circle at 38% 34%, #f6e9d3 0%, #d9bf94 40%, #8f6d45 80%);
  -webkit-mask:radial-gradient(circle at 76% 38%, transparent 0 47%, #000 48%);
  mask:radial-gradient(circle at 76% 38%, transparent 0 47%, #000 48%);
  opacity:.55;
}
.card .empty,.modal .empty{padding:16px 8px}
.card .empty::before,.modal .empty::before{display:none}

/* 时间线 */
.timeline{border-left:1px solid var(--line-strong);margin-left:6px;padding-left:18px}
.timeline .ti{position:relative;padding-bottom:16px}
.timeline .ti::before{content:"";position:absolute;left:-22px;top:7px;width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px var(--bg)}
.timeline .ti .d{font-size:11px;color:var(--gold);letter-spacing:.08em}
.timeline .ti .b{font-size:13px;color:var(--ink-2)}

/* 回忆卡 */
.memo-card{
  position:relative;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);padding:14px 16px 12px 18px;margin-bottom:10px;
  transition:border-color .15s, background .15s;
}
.memo-card::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:2px;border-radius:2px;background:linear-gradient(180deg,var(--gold),transparent)}
.memo-card:hover{border-color:var(--line-strong);background:var(--surface-2)}
.memo-card .h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px;gap:8px}
.memo-card .h b{color:var(--ink);font-weight:600;font-family:var(--serif);letter-spacing:.04em;font-size:15px}
.memo-card .d{font-size:11px;color:var(--ink-faint);font-variant-numeric:tabular-nums;flex:none}
.memo-card p{font-size:13px;color:var(--ink-dim);line-height:1.75;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fade-note{text-align:center;font-size:12px;color:var(--rouge2);letter-spacing:.3em;padding:20px 0}

/* 分段标签 */
.tabs{display:flex;gap:4px;margin-bottom:16px;padding:4px;border-radius:14px;background:var(--surface);border:1px solid var(--line)}
.tab{flex:1;text-align:center;padding:7px 0;border:none;border-radius:10px;font-size:13px;font-weight:500;color:var(--ink-dim);cursor:pointer;letter-spacing:.06em;background:transparent;transition:background .15s,color .15s}
.tab:hover{color:var(--ink)}
.tab.on{color:var(--gold2);background:var(--surface-3);box-shadow:0 1px 0 rgba(255,240,226,.06) inset, 0 4px 12px -4px rgba(0,0,0,.6)}

/* 逃生门：只在有弹层时出现 */
#panic-home{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(16px + env(safe-area-inset-bottom));
  z-index:90;height:34px;padding:0 14px 0 12px;border-radius:999px;
  display:none;align-items:center;gap:6px;
  background:rgba(20,14,16,.92);color:var(--ink-dim);
  border:1px solid var(--line-strong);font-size:12px;letter-spacing:.06em;
  cursor:pointer;box-shadow:0 8px 22px rgba(0,0,0,.4);
}
#panic-home svg{width:14px;height:14px}
#panic-home:hover{color:var(--ink)}
body:has(#modal-root .modal.create) #panic-home{display:none}

/* 启动页 */
.boot{
  position:fixed;inset:0;z-index:9999;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(520px 300px at 50% 42%, rgba(140,44,67,.22), transparent 70%), var(--bg);
  color:var(--ink-dim);font-size:12.5px;letter-spacing:.24em;text-align:center;padding:24px;
}
.boot .mark{
  width:72px;height:72px;border-radius:50%;margin-bottom:26px;position:relative;font-size:0;
  background:radial-gradient(circle at 38% 34%, #f6e9d3 0%, #d9bf94 40%, #8f6d45 75%, #3a2618 100%);
  box-shadow:0 0 40px rgba(217,191,148,.25);
}
.boot .mark::after{content:"";position:absolute;inset:-1px;border-radius:50%;background:radial-gradient(circle at 76% 38%, var(--bg) 0 47%, transparent 48%)}
.boot-title{font-family:var(--serif);font-weight:700;font-size:24px;color:var(--gold2);letter-spacing:.36em;margin:0 0 16px .36em}
.boot-line{width:120px;height:2px;border-radius:2px;margin-bottom:16px;background:rgba(255,240,226,.08);overflow:hidden;position:relative}
.boot-line::after{content:"";position:absolute;inset:0;width:40%;background:linear-gradient(90deg,transparent,var(--gold),transparent);animation:load 1.3s ease-in-out infinite}
@keyframes load{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
.boot-sub{font-size:11px;color:var(--ink-faint);margin-top:10px;letter-spacing:.1em}

::selection{background:rgba(201,80,107,.4);color:#fff}
::-webkit-scrollbar{width:0;height:0}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}
/* 小屏微调 */
@media (max-width:360px){
  #view{padding:0 14px 28px}
  .topbar{margin:0 -14px 14px;padding-left:14px;padding-right:14px}
  .tiles{grid-template-columns:repeat(3,1fr)}
  .hero .date .d{font-size:58px}
  .title-hero h1{font-size:38px}
}