:root{
  --bg:#f5f3ee; --card:#ffffff; --ink:#23201c; --muted:#7a746a;
  --line:#e7e2d8; --accent:#8a6f4e; --accent2:#b9534a; --good:#3f8f6b; --bad:#c0544a;
  --shadow:0 1px 3px rgba(0,0,0,.06),0 8px 24px rgba(0,0,0,.05);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  line-height:1.7;-webkit-font-smoothing:antialiased}
button{font-family:inherit}

/* ================= 移动端优先：单列 + 底部拇指操作条 ================= */
#app{max-width:100%;margin:0 auto;padding:16px 12px 108px}
h1{font-size:25px;letter-spacing:.5px;margin:0 0 6px;line-height:1.35}
h3{margin:0 0 8px;font-size:14px;color:var(--accent);letter-spacing:1.5px}
.sub{color:var(--muted);margin:0 0 16px;font-size:13px}
.center{text-align:center;padding-top:6vh}
.center .card{max-width:460px;margin:0 auto;text-align:left}
.center .card > .btn{width:100%;margin-top:6px}
.tag{display:inline-block;background:#efe9dd;color:var(--accent);border-radius:999px;
  padding:3px 11px;font-size:12px;margin:3px 4px 3px 0}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:16px;box-shadow:var(--shadow);margin-bottom:12px}

.btn{appearance:none;border:none;cursor:pointer;font-size:15px;min-height:46px;
  padding:11px 18px;border-radius:12px;
  background:var(--accent);color:#fff;font-weight:600;transition:.15s;letter-spacing:.5px}
.btn:hover{filter:brightness(1.06)}
.btn.ghost{background:#efe9dd;color:var(--ink)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.spd{display:flex;gap:8px;margin:14px 0}
.spd button{flex:1;background:#fff;border:1px solid var(--line);border-radius:10px;
  padding:10px 6px;min-height:44px;cursor:pointer;color:var(--muted);font-size:13px}
.spd button.on{background:var(--accent);color:#fff;border-color:var(--accent)}

/* 状态条：手机两列，最后一条拉通，避免落单 */
.bars{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin:6px 0 4px}
.bars .bar:last-child{grid-column:1/-1}
.bar label{font-size:12px;color:var(--muted);display:flex;justify-content:space-between}
.bar .track{height:8px;background:#ece6da;border-radius:6px;overflow:hidden;margin-top:4px}
.bar .fill{height:100%;border-radius:6px;transition:width .3s}
.fill.health{background:#c0544a}.fill.happiness{background:#e0a93b}
.fill.knowledge{background:#4a7bb9}.fill.relationship{background:#3f8f6b}.fill.wealth{background:#8a6f4e}

.meta{font-size:13px;color:var(--muted);margin:4px 0}
.anchor{color:#a59c8c;font-size:12px;border-left:3px solid #ddd5c6;padding-left:10px;margin:12px 0;font-style:italic}
.event{background:#faf8f3;border:1px solid var(--line);border-radius:12px;padding:11px 13px;margin:8px 0}
.event .cat{font-size:11px;color:#fff;border-radius:5px;padding:1px 7px;margin-right:8px;vertical-align:middle}
.cat.policy{background:#b9534a}.cat.background{background:#8a6f4e}.cat.opportunity{background:#4a7bb9}.cat.crisis{background:#c0544a}
.event .ttl{font-weight:600}
.event .txt{color:#4a443c;font-size:13px;margin-top:4px}
.choice .opts{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.opt{text-align:left;background:#fff;border:1px solid var(--accent);color:var(--ink);border-radius:12px;
  padding:12px 14px;min-height:48px;cursor:pointer;font-size:14px;line-height:1.5}
.opt:hover{background:#f3ece0}
.opt:disabled{opacity:.6;cursor:default}
.opt small{display:block;color:var(--muted);margin-top:3px;font-size:12px}

.year-head{display:flex;justify-content:space-between;align-items:baseline;margin:2px 0 6px}
.year-head .age{font-size:19px;font-weight:700}
.year-head .yr{color:var(--muted);font-size:13px}
#feed .card:first-child .year-head{margin-top:0}

/* 手机：操作条固定在底部，任何位置都能点「下一岁」 */
.controls{position:fixed;left:0;right:0;bottom:0;z-index:20;
  background:rgba(245,243,238,.96);backdrop-filter:blur(8px);
  border-top:1px solid var(--line);
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  margin:0;flex-wrap:nowrap}
.controls .btn{flex:1}

/* 结算 / 分享 */
.settle h1{font-size:24px}
.oneline{font-size:16px;line-height:1.85;margin:10px 0 16px}
.block{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin:10px 0}
.block b{color:var(--accent2)}
.block ul{margin:6px 0 0;padding-left:18px}
.block li{margin:4px 0;font-size:14px}
.footer{color:var(--muted);font-size:12px;text-align:center;margin-top:24px}
.share{padding:20px 12px}
.share-card{max-width:100%;margin:0 auto;background:var(--card);border:1px solid var(--line);
  border-radius:16px;padding:20px;box-shadow:var(--shadow)}
.err{color:var(--bad);font-size:14px}
.toast{position:fixed;left:50%;bottom:88px;transform:translateX(-50%);background:#23201c;color:#fff;
  padding:10px 18px;border-radius:10px;font-size:14px;opacity:0;transition:.2s;pointer-events:none;z-index:30}
.toast.show{opacity:1}

/* ================= PC / 大屏：左右分栏 =================
   左栏档案+属性常驻，右栏年度流水独立滚动；滚年份时左边不动 */
@media (min-width:900px){
  body{line-height:1.75}
  #app{max-width:1240px;padding:28px 32px 40px}
  h1{font-size:32px}
  .sub{font-size:15px}
  .center{padding-top:11vh}
  .center .card{max-width:520px;padding:28px}
  .card{padding:22px 24px;border-radius:16px;margin-bottom:16px}

  .layout{display:grid;grid-template-columns:330px minmax(0,1fr);gap:28px;align-items:start}
  .side{position:sticky;top:28px;max-height:calc(100vh - 56px);overflow-y:auto;
    scrollbar-width:thin;scrollbar-color:#d8d0c0 transparent}
  .side::-webkit-scrollbar{width:6px}
  .side::-webkit-scrollbar-thumb{background:#d8d0c0;border-radius:6px}
  .side .card{margin-bottom:14px}
  .main{min-width:0}
  #feed{max-height:calc(100vh - 56px);overflow-y:auto;padding-right:10px;
    scrollbar-width:thin;scrollbar-color:#d8d0c0 transparent}
  #feed::-webkit-scrollbar{width:8px}
  #feed::-webkit-scrollbar-thumb{background:#d8d0c0;border-radius:8px}
  #feed .card{margin-bottom:16px}

  .controls{position:static;background:none;border:0;padding:0;margin-top:4px;
    backdrop-filter:none;flex-wrap:wrap}
  .controls .btn{flex:0 0 auto;padding:11px 22px}
  .bars{grid-template-columns:1fr;gap:9px}
  .bars .bar:last-child{grid-column:auto}
  .bar label{font-size:13px}
  .meta{font-size:14px}
  .anchor{font-size:13px}
  .event .txt{font-size:14px}
  .opt{font-size:15px}
  .spd button{font-size:14px}

  /* 结算：标题与一句话通栏，六块内容两列 */
  .settle{display:grid;grid-template-columns:1fr 1fr;gap:4px 20px;max-width:1000px;margin:0 auto}
  .settle h1,.settle .sub,.settle .oneline{grid-column:1/-1}
  .settle h1{font-size:34px}
  .settle .oneline{font-size:20px;margin:8px 0 18px}
  .settle .block{margin:8px 0;padding:18px 20px}
  .settle + .row{max-width:1000px;margin:18px auto 0}

  /* 分享页：像一篇文章，单列居中加宽 */
  .share{padding:48px 24px}
  .share-card{max-width:760px;padding:38px 42px}
  .share-card h1{font-size:32px}
  .share-card .oneline{font-size:20px}
  .share-card .block{padding:18px 20px}
  .toast{bottom:28px}
}