/* 布局：顶部导航 + 主栏（宽屏带右侧栏）；手机宽度下导航移到底部，单栏 */
:root {
  --bg: #f3f5f9; --surface: #ffffff; --sunken: #e9edf4; --line: #dde2ea;
  --fg: #151922; --muted: #566072; --accent: #1f4fd8; --accent-soft: #e8eefc; --on-accent: #ffffff;
  --good: #17633a; --good-soft: #e3f3ea; --warn: #9a3c0b; --warn-soft: #fcefe5; --violet: #5b34b5; --violet-soft: #f0ebfb;
  --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  --r: 12px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0f1218; --surface: #181c25; --sunken: #222835; --line: #2c3442;
  --fg: #e8ebf1; --muted: #a0a9b8; --accent: #7fa0ff; --accent-soft: #1d2a4d; --on-accent: #0b1020;
  --good: #6fd39b; --good-soft: #15301f; --warn: #f2a26b; --warn-soft: #3a2413; --violet: #b79cf5; --violet-soft: #2a2145;
  color-scheme: dark } }
:root[data-theme="dark"] {
  --bg: #0f1218; --surface: #181c25; --sunken: #222835; --line: #2c3442;
  --fg: #e8ebf1; --muted: #a0a9b8; --accent: #7fa0ff; --accent-soft: #1d2a4d; --on-accent: #0b1020;
  --good: #6fd39b; --good-soft: #15301f; --warn: #f2a26b; --warn-soft: #3a2413; --violet: #b79cf5; --violet-soft: #2a2145;
  color-scheme: dark }

body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font); font-size: 15px; line-height: 1.6; }
* { box-sizing: border-box; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; line-height: 1.4; }

body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--surface); }
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 9; background: var(--surface); border-bottom: 1px solid var(--line); }
.wrap { max-width: 1120px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.top .wrap { display: flex; align-items: center; gap: 8px 24px; flex-wrap: wrap; padding-block: 10px; }
.brand { font-size: 19px; font-weight: 700; letter-spacing: .5px; }
.brand small { font-size: 12px; font-weight: 400; color: var(--muted); margin-left: 6px; letter-spacing: 0; }
.nav { display: flex; gap: 4px; }
.nav button { border: 0; background: none; padding: 8px 12px; border-radius: 8px; color: var(--muted); min-height: 44px; }
.nav button[aria-current="page"] { color: var(--accent); font-weight: 700; background: var(--accent-soft); }
.top .right { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.demo { background: var(--warn-soft); color: var(--warn); font-size: 13px; }
.demo .wrap { padding-block: 6px; }

.page { padding-block: 20px 96px; display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.side { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.card { background: var(--surface); border-radius: var(--r); padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
button.card { border: 0; text-align: left; width: 100%; }
button.card:hover h3 { color: var(--accent); }
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.meta { font-size: 13px; color: var(--muted); }
.push { margin-left: auto; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-size: 13px; font-weight: 700; flex: none; }
.avatar.anon { background: var(--sunken); color: var(--muted); }
.pill { font-size: 12px; padding: 2px 8px; border-radius: 6px; background: var(--sunken); color: var(--muted); white-space: nowrap; }
.pill.blue { background: var(--accent-soft); color: var(--accent); }
.pill.good { background: var(--good-soft); color: var(--good); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.violet { background: var(--violet-soft); color: var(--violet); }
h3 { font-size: 17px; }
.excerpt { color: var(--muted); overflow-wrap: anywhere; }
.body { white-space: pre-wrap; overflow-wrap: anywhere; }

.tabs { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.chip { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 6px 14px; min-height: 36px; color: var(--muted); font-size: 14px; }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 8px 18px; min-height: 44px; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.btn.small { min-height: 36px; padding: 4px 14px; font-size: 14px; }
.btn.link { border: 0; background: none; color: var(--accent); padding: 4px 0; min-height: 36px; }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.facts div { display: flex; flex-direction: column; }
.facts span { font-size: 12px; color: var(--muted); }
.facts b { font-weight: 600; font-variant-numeric: tabular-nums; }
.alert { background: var(--warn-soft); color: var(--warn); border-radius: 8px; padding: 10px 12px; font-size: 14px; }
.note { background: var(--accent-soft); color: var(--fg); border-radius: 8px; padding: 10px 12px; font-size: 14px; }

.score { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.big { font-size: 40px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.bars { flex: 1 1 220px; display: grid; gap: 8px; font-size: 13px; }
.bar { display: grid; grid-template-columns: 64px 1fr 28px; gap: 8px; align-items: center; }
.bar i { height: 6px; border-radius: 3px; background: var(--sunken); display: block; overflow: hidden; }
.bar i em { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.bar.low i em { background: var(--warn); }
.bar b { text-align: right; font-variant-numeric: tabular-nums; }
.num { font-weight: 700; font-variant-numeric: tabular-nums; }
.num.good { color: var(--good); } .num.low { color: var(--warn); }

form { display: flex; flex-direction: column; gap: 12px; }
label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--muted); }
label.check { flex-direction: row; align-items: center; gap: 8px; color: var(--fg); min-height: 36px; }
input[type="text"], input[type="search"], input[type="month"], select, textarea { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; color: var(--fg); width: 100%; min-height: 44px; }
textarea { min-height: 120px; resize: vertical; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.err { color: var(--warn); font-size: 14px; }
.reply { background: var(--sunken); border-radius: 8px; padding: 10px 12px; font-size: 14px; }
.comment { border-top: 1px solid var(--line); padding-top: 10px; display: flex; flex-direction: column; gap: 4px; }

.tabbar { display: none; }
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(88px + env(safe-area-inset-bottom, 0px)); background: var(--fg); color: var(--bg); padding: 10px 18px; border-radius: 999px; font-size: 14px; z-index: 30; max-width: calc(100% - 32px); }
.sheet { position: fixed; inset: 0; background: rgba(10, 14, 24, .55); z-index: 20; display: grid; place-items: center; padding: 16px; }
.sheet .card { max-width: 380px; width: 100%; }

@media (max-width: 720px) {
  .top .nav { display: none; }
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; inset: auto 0 0; z-index: 9; background: var(--surface); border-top: 1px solid var(--line);
    padding: 6px max(16px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
  .tabbar button { border: 0; background: none; min-height: 48px; color: var(--muted); font-size: 13px; border-radius: 10px; }
  .tabbar button[aria-current="page"] { color: var(--accent); font-weight: 700; }
  .tabbar .plus { background: var(--accent); color: var(--on-accent); font-size: 22px; font-weight: 400; width: 52px; justify-self: center; }
  .top .right .btn.primary { display: none; }
}
@media (prefers-reduced-motion: no-preference) { .toast { animation: rise .2s ease-out; } @keyframes rise { from { opacity: 0; translate: 0 8px; } } }

/* ---- 正式版新增 ---- */
.demo { display: none; }
.inline { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.inline input[type="text"] { flex: 1 1 160px; width: auto; }
.btn.danger { color: var(--warn); border-color: var(--warn); }
.btn[disabled] { opacity: .5; cursor: default; }
.sub { margin-left: 38px; }
.empty { text-align: center; color: var(--muted); padding: 28px 16px; }
.count { background: var(--warn); color: var(--surface); border-radius: 999px; font-size: 12px; padding: 0 7px; margin-left: 4px; }
a { color: var(--accent); }
a.card { color: inherit; text-decoration: none; }
a.card:hover h3 { color: var(--accent); }
a.btn { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; color: var(--fg); }
a.btn.primary { color: var(--on-accent); }
a.btn.link { color: var(--accent); justify-content: flex-start; }
.nav a { padding: 8px 12px; border-radius: 8px; color: var(--muted); min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; }
.nav a[aria-current="page"] { color: var(--accent); font-weight: 700; background: var(--accent-soft); }
@media (max-width: 720px) {
  .tabbar a { min-height: 48px; color: var(--muted); font-size: 13px; border-radius: 10px; display: grid; place-items: center; text-decoration: none; }
  .tabbar a[aria-current="page"] { color: var(--accent); font-weight: 700; }
  .tabbar a.plus { background: var(--accent); color: var(--on-accent); font-size: 22px; width: 52px; justify-self: center; }
  .top .right a.btn.primary { display: none; }
}

/* Labelvibe / fresh community visual system */
:root[data-theme="light"]{--bg:#f7f8f2;--surface:#fff;--sunken:#f0f2ed;--line:#e5e8df;--fg:#20332e;--muted:#69756e;--accent:#246b51;--accent-soft:#e7f4dd;--on-accent:#fff;--r:20px;--violet:#756096;--violet-soft:#f0eafa}
body{font-size:15px;letter-spacing:.1px}a,button{-webkit-tap-highlight-color:transparent}button,a.btn,.chip{transition:background .18s,transform .18s,box-shadow .18s}button:hover,a.btn:hover{filter:brightness(.97)}.wrap{max-width:1220px;padding-inline:28px}.top{background:rgba(255,255,255,.94);backdrop-filter:blur(16px);border-color:var(--line)}.top .wrap{min-height:82px;gap:28px}.brand{display:flex;align-items:center;gap:10px;font-size:20px;letter-spacing:-.5px}.brand:before{content:'✳';display:grid;place-items:center;width:40px;height:40px;border-radius:13px;background:#d9f5b1;color:#244e3e;font-size:30px}.brand small{font-size:11px;letter-spacing:1px;margin-left:0}.nav a{padding:9px 16px;border-radius:12px}.nav a[aria-current="page"]{background:#eef5e7}.page{gap:24px;padding-top:30px}.main{gap:16px;flex-basis:680px}.side{flex-basis:285px;gap:18px}.card{padding:24px;border:1px solid var(--line);box-shadow:0 3px 14px #20332e03;gap:14px}.side .card:first-child{background:#eef4e6}.side .card h3{font-size:16px}.side .card .btn.link{white-space:normal}a.card{transition:border-color .18s,transform .18s,box-shadow .18s}a.card:hover{border-color:#a5c6ac;transform:translateY(-2px);box-shadow:0 8px 24px #20332e09}h2{font-size:24px;letter-spacing:-.7px}h3{font-size:18px}.btn{border-radius:12px;padding:10px 20px;font-weight:600}.btn.primary{box-shadow:0 3px 0 #153e3020}.btn.small{min-height:40px}.chip{font-size:13px;min-height:38px;border-color:transparent;padding:7px 14px}.chip[aria-pressed="true"]{background:var(--fg);border-color:var(--fg)}.tabs{gap:7px}.pill{border-radius:7px;padding:3px 9px}.avatar{border-radius:11px;width:34px;height:34px}.facts{background:#f6f8f2;padding:16px;border-radius:13px;gap:16px}.facts b{margin-top:5px;font-size:16px}.note,.alert{padding:16px;border-radius:14px}.empty{padding:46px 24px;align-items:center;gap:14px;min-height:220px}.empty h3{color:var(--fg)}.empty-symbol{font-size:36px;background:#edf4e6;border-radius:18px;width:64px;height:64px;display:grid;place-items:center;color:var(--accent)}.empty .btn{margin-top:8px}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:15px;margin:6px 0 8px}.section-heading .eyebrow{font-size:10px;color:var(--muted)}.section-heading h2{margin-top:5px}.live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#85b96d;vertical-align:middle;margin-left:12px}.eyebrow{font-size:11px;font-weight:700;letter-spacing:2px}.hero{width:100%;display:grid;grid-template-columns:1.15fr 1fr;min-height:360px;background:#eaf2dd;border:1px solid #dde8ce;border-radius:28px;overflow:hidden;position:relative}.hero-copy{padding:38px 44px;position:relative;z-index:1}.hero h1{font-size:44px;line-height:1.22;letter-spacing:-2px;margin:18px 0 14px;font-weight:800}.hero p{font-size:14px;color:#5d705b;line-height:1.9}.hero-actions{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap}.hero-actions .btn:not(.primary){background:transparent;border-color:#bcccad}.hero-foot{display:block;font-size:11px;color:#74816b;margin-top:22px}.hero-art{position:relative;min-height:350px;background:radial-gradient(circle at 50% 50%,#d5e6bb 0,transparent 67%)}.art-card{position:absolute;background:#fffdf2;border:1px solid #d2dac2;box-shadow:10px 14px 0 #bdcfa78c;border-radius:22px;padding:28px;transform:rotate(-9deg);width:265px;top:74px;left:40px}.art-card span{font-size:9px;letter-spacing:1.3px;color:#738268}.art-card b{display:block;font-size:31px;line-height:1.5;margin:20px 0;letter-spacing:-1px}.art-card i{font-size:13px;font-style:normal;border-top:1px solid #dce2d1;display:block;padding-top:15px}.orbit{position:absolute;right:36px;top:24px;font-size:122px;line-height:1;color:#74975a;transform:rotate(15deg)}.art-sticker{position:absolute;bottom:50px;right:25px;background:#d8cdf1;border:1px solid #c5b6e6;padding:14px 22px;border-radius:12px;transform:rotate(8deg);font-size:15px;font-weight:700;box-shadow:4px 5px 0 #31483216}.art-dot{position:absolute;width:26px;height:26px;background:#efb884;border-radius:50%;bottom:50px;left:26px}.quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;width:100%;margin:0 0 8px}.quick-grid>a{display:flex;align-items:center;gap:14px;padding:20px;background:white;border:1px solid var(--line);border-radius:18px;text-decoration:none;color:var(--fg);transition:transform .2s}.quick-grid>a:hover{transform:translateY(-3px)}.quick-icon{display:grid;place-items:center;flex-shrink:0;width:46px;height:46px;border-radius:15px;font-size:25px}.mint{background:#e8f3dc}.lilac{background:#eee8f8}.peach{background:#fff0df}.quick-grid b{display:block;font-size:16px}.quick-grid small{display:block;font-size:11px;color:var(--muted);margin-top:5px}.quick-arrow{margin-left:auto;color:#87947d;font-size:19px}input[type="text"],input[type="search"],input[type="month"],select,textarea{border-radius:12px;background:#fafbf8;border-color:var(--line);padding:12px 14px}input:focus,select:focus,textarea:focus{border-color:#6f9b7e;outline:2px solid #e1efdc}form{gap:18px}label{gap:8px}.sheet{backdrop-filter:blur(5px);background:#182b2459}.sheet .card{padding:28px;border-radius:24px;max-height:90dvh;overflow:auto}.body{line-height:1.95}.comment{padding-top:18px}.bar i{height:8px}.big{color:var(--accent)}
@media(min-width:1000px){.side{margin-top:7px}}
@media(max-width:900px){.brand small{display:none}.top .wrap{gap:16px}.nav a{padding:8px 10px}.hero-copy{padding:30px}.hero h1{font-size:38px}.art-card{left:12px;width:235px}.quick-grid>a{padding:16px;gap:10px}.quick-arrow{display:none}.quick-grid small{font-size:10px}}
@media(max-width:720px){.wrap{padding-inline:18px}.top .wrap{min-height:68px;flex-wrap:nowrap}.brand{font-size:18px}.brand:before{width:34px;height:34px;font-size:26px}.brand small{display:inline;font-size:10px}.page{padding-top:18px;gap:18px;padding-bottom:110px}.hero{grid-template-columns:1fr;min-height:auto;border-radius:23px}.hero-copy{padding:28px}.hero h1{font-size:37px}.hero-art{min-height:200px;display:none}.hero-foot{margin-top:18px}.hero p br{display:none}.hero-actions{gap:10px;margin-top:20px}.quick-grid{gap:8px;margin-bottom:0}.quick-grid>a{padding:14px 8px;flex-direction:column;gap:9px;text-align:center;border-radius:16px}.quick-icon{width:38px;height:38px;border-radius:12px;font-size:22px}.quick-grid b{font-size:13px}.quick-grid small{display:none}.section-heading>.meta{display:none}.section-heading h2{font-size:22px}.card{padding:20px;border-radius:18px}.main{gap:14px}.side{flex-basis:100%}.tabs{gap:5px}.chip{padding:7px 12px;min-height:40px}.tabbar{background:rgba(255,255,255,.97);box-shadow:0 -4px 22px #20332e06;padding-top:8px;backdrop-filter:blur(16px)}.tabbar a{font-size:12px;min-height:48px}.tabbar a[aria-current="page"]{background:#edf4e7}.tabbar a.plus{width:46px;border-radius:15px;background:var(--fg);box-shadow:0 4px 10px #20332e20}.empty{padding:34px 18px}.facts{grid-template-columns:repeat(2,minmax(0,1fr))}.facts div{overflow-wrap:anywhere}.sheet{padding:14px}.sheet .card{padding:24px}.top .right{flex-shrink:0}.top .right .btn{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hero .eyebrow{font-size:10px}.btn{padding-inline:16px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}