/* ============================================================
   Nourish — design system
   Warm editorial / western wellness aesthetic, no dependencies
   ============================================================ */

:root{
  --bg:#F6F3EC;
  --bg-tint:#EFE9DE;
  --surface:#FFFFFF;
  --surface-2:#FAF7F1;
  --ink:#1E231E;
  --ink-2:#5A6157;
  --ink-3:#8A9089;
  --line:#E7E1D5;
  --line-2:#DCD4C4;

  --green:#2E6B4F;
  --green-2:#3E8E5A;
  --green-soft:#E3EFE6;
  --terra:#BC5F3B;
  --terra-soft:#F6E5DE;
  --amber:#C0902C;
  --amber-soft:#F8EED6;
  --blue:#3C6E8F;
  --blue-soft:#E2EDF3;
  --plum:#7A5480;
  --red:#AE453B;
  --red-soft:#F7E3E0;

  --r-sm:10px;
  --r:14px;
  --r-lg:20px;
  --r-xl:28px;

  --sh-1:0 1px 2px rgba(28,26,20,.05), 0 1px 1px rgba(28,26,20,.03);
  --sh-2:0 1px 2px rgba(28,26,20,.04), 0 10px 28px -12px rgba(28,26,20,.18);
  --sh-3:0 24px 60px -24px rgba(28,26,20,.32);

  --sans:-apple-system,"Segoe UI Variable Text","Segoe UI",Roboto,"Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Songti SC","SimSun",serif;
  --mono:ui-monospace,SFMono-Regular,"Cascadia Mono",Consolas,monospace;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#141713;
    --bg-tint:#1A1E19;
    --surface:#1D211C;
    --surface-2:#232822;
    --ink:#EDEAE2;
    --ink-2:#A8AFA3;
    --ink-3:#7C847A;
    --line:#2E342C;
    --line-2:#3A4137;
    --green:#6FBF92;
    --green-2:#7CCB9C;
    --green-soft:#1E2E24;
    --terra:#E08A63;
    --terra-soft:#33241D;
    --amber:#E0B75C;
    --amber-soft:#302818;
    --blue:#7FB0CE;
    --blue-soft:#1C2A32;
    --plum:#B391BA;
    --red:#E58C82;
    --red-soft:#33211F;
    --sh-1:0 1px 2px rgba(0,0,0,.4);
    --sh-2:0 1px 2px rgba(0,0,0,.3), 0 12px 30px -14px rgba(0,0,0,.7);
    --sh-3:0 24px 60px -24px rgba(0,0,0,.8);
  }
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(1100px 520px at 12% -8%, var(--green-soft) 0%, transparent 60%),
    radial-gradient(900px 460px at 100% 0%, var(--terra-soft) 0%, transparent 55%),
    var(--bg);
  background-attachment:fixed;
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  -webkit-tap-highlight-color:transparent;
}

h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.01em}
p{margin:0}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;touch-action:manipulation}
input,select,textarea{font:inherit;color:inherit}

.app{
  max-width:1120px;margin:0 auto;
  padding:calc(22px + env(safe-area-inset-top)) calc(22px + env(safe-area-inset-right))
          calc(56px + env(safe-area-inset-bottom)) calc(22px + env(safe-area-inset-left));
}

/* ---------- top bar ---------- */
.topbar{
  position:sticky;top:env(safe-area-inset-top);z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:14px 18px;margin:0 0 22px;
  background:color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter:saturate(1.6) blur(14px);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand-mark{
  width:38px;height:38px;flex:none;display:grid;place-items:center;
  border-radius:12px;color:#fff;
  background:linear-gradient(150deg,var(--green-2),var(--green));
  box-shadow:0 6px 16px -8px color-mix(in srgb,var(--green) 70%, transparent);
}
.brand-text{min-width:0}
.brand-text h1{font-family:var(--serif);font-size:21px;letter-spacing:.01em;line-height:1.1}
.brand-text p{font-size:11.5px;color:var(--ink-3);letter-spacing:.08em;text-transform:uppercase}

.tabs{display:flex;gap:4px;padding:4px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line)}
.tab{
  padding:8px 16px;border-radius:999px;font-size:13.5px;font-weight:550;
  color:var(--ink-2);transition:.18s ease;white-space:nowrap;
}
.tab:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 5%, transparent)}
.tab.is-active{background:var(--surface);color:var(--ink);box-shadow:var(--sh-1);border:1px solid var(--line)}

/* ---------- layout ---------- */
.view{display:none;animation:fade .32s ease}
.view.is-active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.grid{display:grid;gap:16px}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-main{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.stack{display:flex;flex-direction:column;gap:16px}
.row{display:flex;align-items:center;gap:10px}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:12px}
.wrap{flex-wrap:wrap}
.spread{margin-top:auto}

/* ---------- cards ---------- */
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-2);
  padding:20px;
}
.card.tight{padding:16px}
.card.plain{box-shadow:none}
.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}
.card-title{font-family:var(--serif);font-size:17px;letter-spacing:-.005em}
.card-sub{font-size:12.5px;color:var(--ink-3);margin-top:2px}
.eyebrow{
  font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;margin-bottom:6px;
}
.divider{height:1px;background:var(--line);margin:16px -20px}

/* ---------- hero ---------- */
.hero{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:26px;align-items:center;
  padding:24px;
}
.ring-wrap{position:relative;width:186px;height:186px;flex:none;margin:0 auto}
.ring{
  width:100%;height:100%;border-radius:50%;
  background:conic-gradient(var(--ring-a) calc(var(--p,0) * 1%), var(--line) 0);
  transition:background .5s ease;
  --ring-a:var(--green-2);
}
.ring::after{
  content:"";position:absolute;inset:15px;border-radius:50%;
  background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);
}
.ring-inner{
  position:absolute;inset:0;display:grid;place-content:center;text-align:center;z-index:2;
}
.ring-num{font-family:var(--serif);font-size:42px;line-height:1;letter-spacing:-.02em}
.ring-unit{font-size:12px;color:var(--ink-3);letter-spacing:.1em;text-transform:uppercase;margin-top:6px}
.ring-left{margin-top:10px;font-size:12.5px;color:var(--ink-2)}

.hero-side{min-width:0}
.hero-title{font-family:var(--serif);font-size:26px;line-height:1.2;letter-spacing:-.015em}
.hero-sub{color:var(--ink-2);font-size:13.5px;margin-top:6px}
.hero-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}

/* ---------- pills / chips ---------- */
.pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:999px;font-size:12px;font-weight:550;
  background:var(--surface-2);border:1px solid var(--line);color:var(--ink-2);
}
.pill.green{background:var(--green-soft);border-color:transparent;color:var(--green-2)}
.pill.terra{background:var(--terra-soft);border-color:transparent;color:var(--terra)}
.pill.amber{background:var(--amber-soft);border-color:transparent;color:var(--amber)}
.pill.blue{background:var(--blue-soft);border-color:transparent;color:var(--blue)}
.pill.red{background:var(--red-soft);border-color:transparent;color:var(--red)}
.pill.dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:1px;background:var(--line);border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.stat{background:var(--surface);padding:14px 15px}
.delta{
  font-size:11.5px;font-weight:600;margin-top:5px;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;
}
.delta.good{color:var(--green-2)}
.delta.bad{color:var(--terra)}
.delta.flat{color:var(--ink-3);font-weight:400}

/* ---------- 归因条形 ---------- */
.attr{display:flex;flex-direction:column;gap:11px}
.attr-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(80px,2fr) 92px;gap:12px;align-items:center}
.attr-name{font-size:13px;font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.attr-track{position:relative;height:9px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line)}
.attr-track::after{content:"";position:absolute;left:50%;top:-3px;bottom:-3px;width:1px;background:var(--line-2)}
.attr-bar{position:absolute;top:0;bottom:0;min-width:2px}
.attr-bar.pos{left:50%;border-radius:0 999px 999px 0}
.attr-bar.neg{right:50%;border-radius:999px 0 0 999px}
.attr-bar.good{background:var(--green-2)}
.attr-bar.bad{background:var(--terra)}
.attr-bar.neutral{background:var(--amber)}
.attr-val{font-size:12.5px;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.attr-val.good{color:var(--green-2)}
.attr-val.bad{color:var(--terra)}
.attr-val.neutral{color:var(--amber)}
.stat-v{font-family:var(--serif);font-size:23px;line-height:1.1}
.stat-v small{font-size:12px;font-family:var(--sans);color:var(--ink-3);margin-left:3px}
.stat-l{font-size:12px;color:var(--ink-3);margin-top:3px}

/* ---------- progress bars ---------- */
.bars{display:flex;flex-direction:column;gap:14px}
.bar-row{display:grid;grid-template-columns:96px minmax(0,1fr) 92px;gap:12px;align-items:center}
.bar-name{font-size:13px;font-weight:550}
.bar-name span{display:block;font-size:11px;color:var(--ink-3);font-weight:400}
.bar-track{height:9px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);overflow:hidden}
.bar-fill{height:100%;border-radius:999px;background:var(--green-2);transition:width .5s cubic-bezier(.3,.7,.3,1)}
.bar-fill.terra{background:var(--terra)}
.bar-fill.amber{background:var(--amber)}
.bar-fill.blue{background:var(--blue)}
.bar-fill.plum{background:var(--plum)}
.bar-fill.red{background:var(--red)}
.bar-fill.over{background:var(--red)}
.bar-val{text-align:right;font-size:12.5px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.bar-val b{color:var(--ink);font-weight:600}
.mark{position:relative}
.mark::after{
  content:"";position:absolute;top:-3px;bottom:-3px;width:2px;border-radius:2px;
  background:var(--ink-3);left:var(--t,50%);opacity:.5;
}

/* ---------- food group chips ---------- */
.groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:10px}
.group{
  border:1px solid var(--line);border-radius:var(--r);padding:12px 13px;background:var(--surface-2);
  display:flex;flex-direction:column;gap:8px;
}
.group-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.group-name{font-size:13px;font-weight:600;display:flex;align-items:center;gap:7px}
.group-val{font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.group-goal{font-size:11px;color:var(--ink-3)}

/* ---------- meal cards ---------- */
.gaps{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:12px}
.gap{border:1px solid var(--line);border-radius:var(--r);padding:13px 14px;background:var(--surface-2)}
.gap-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:11px}
.gap-name{font-size:13.5px;font-weight:650}
.gap-need{font-size:12px;font-weight:600;color:var(--terra);font-variant-numeric:tabular-nums}

.meal{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.meal + .meal{margin-top:12px}
.meal-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 15px;background:var(--surface-2);border-bottom:1px solid var(--line);
}
.meal-name{display:flex;align-items:center;gap:9px;font-weight:600;font-size:14px}
.meal-emoji{font-size:16px}
.meal-kcal{font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.meal-body{padding:8px 10px}
.meal-empty{padding:14px 8px;font-size:13px;color:var(--ink-3);text-align:center}

.item{
  display:grid;grid-template-columns:26px minmax(0,1fr) auto auto 28px;gap:10px;align-items:center;
  padding:9px 8px;border-radius:var(--r-sm);transition:.15s;
}
.item:hover{background:var(--surface-2)}
.item + .item{border-top:1px solid var(--line)}
.item-cat{font-size:15px;text-align:center}
.item-name{font-size:13.5px;font-weight:550;line-height:1.3}
.item-en{font-size:11px;color:var(--ink-3)}
.item-amt{
  font-size:12.5px;color:var(--ink-2);white-space:nowrap;font-variant-numeric:tabular-nums;
  padding:3px 8px;border-radius:8px;border:1px dashed transparent;transition:.15s;text-align:left;
}
.item-amt:hover{border-color:var(--line-2);background:var(--surface);color:var(--ink)}
.item-kcal{font-size:13px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums;text-align:right;min-width:64px}
.item-kcal small{display:block;font-weight:400;font-size:10.5px;color:var(--ink-3)}
.icon-btn{
  width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  color:var(--ink-3);font-size:14px;line-height:1;transition:.15s;
}
.icon-btn:hover{background:var(--red-soft);color:var(--red)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 16px;border-radius:var(--r);font-size:13.5px;font-weight:550;
  border:1px solid var(--line);background:var(--surface);color:var(--ink);
  transition:.18s ease;white-space:nowrap;
}
.btn:hover{transform:translateY(-1px);box-shadow:var(--sh-1);border-color:var(--line-2)}
.btn:active{transform:none}
.btn-primary{
  background:linear-gradient(160deg,var(--green-2),var(--green));color:#fff;border-color:transparent;
  box-shadow:0 8px 18px -10px color-mix(in srgb,var(--green) 80%, transparent);
}
.btn-primary:hover{filter:brightness(1.05)}
.btn-ghost{background:var(--surface-2);color:var(--ink-2)}
.btn-danger{color:var(--red);border-color:color-mix(in srgb,var(--red) 30%, var(--line))}
.btn-danger:hover{background:var(--red-soft)}
.btn-sm{padding:7px 12px;font-size:12.5px;border-radius:var(--r-sm)}
.btn-block{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}

/* ---------- form ---------- */
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.label{font-size:12px;font-weight:600;color:var(--ink-2)}
.hint{font-size:11.5px;color:var(--ink-3)}
.input,.select{
  width:100%;padding:10px 12px;border-radius:var(--r);border:1px solid var(--line);
  background:var(--surface-2);color:var(--ink);transition:.16s;font-size:14px;
}
.input:focus,.select:focus{outline:none;border-color:var(--green-2);background:var(--surface);box-shadow:0 0 0 3px var(--green-soft)}
.input[type=number]{-moz-appearance:textfield}
.select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px}
.formgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}

.segmented{display:inline-flex;padding:3px;border-radius:var(--r);background:var(--surface-2);border:1px solid var(--line);gap:2px}
.segmented button{padding:7px 14px;border-radius:10px;font-size:13px;color:var(--ink-2);transition:.15s;font-weight:500}
.segmented button.is-on{background:var(--surface);color:var(--ink);box-shadow:var(--sh-1);font-weight:600}
.segmented.wide{display:grid;grid-template-columns:repeat(3,1fr);width:100%}
.segmented.wide button{width:100%}

/* ---------- food picker ---------- */
.cats{display:flex;gap:8px;flex-wrap:wrap}
.cat-chip{
  display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:999px;
  border:1px solid var(--line);background:var(--surface-2);font-size:13px;color:var(--ink-2);transition:.16s;
}
.cat-chip:hover{border-color:var(--line-2);color:var(--ink)}
.cat-chip.is-on{color:#fff;border-color:transparent;background:var(--cat-c,var(--green));box-shadow:var(--sh-1)}

.picker{max-height:352px;overflow:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2);padding:8px;margin-top:12px}
.picker::-webkit-scrollbar{width:9px}
.picker::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:9px;border:2px solid var(--surface-2)}
.food{
  display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;
  padding:10px 12px;border-radius:var(--r-sm);transition:.14s;cursor:pointer;width:100%;text-align:left;
}
.food:hover{background:var(--surface)}
.food + .food{margin-top:2px}
.food-n{font-size:13.5px;font-weight:550;line-height:1.25}
.food-en{font-size:11px;color:var(--ink-3)}
.food-u{font-size:11.5px;color:var(--ink-3);white-space:nowrap}
.food-k{font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.food.is-sel{background:var(--green-soft);box-shadow:inset 0 0 0 1px var(--green-2)}

.selected-food{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:14px;border-radius:var(--r);background:var(--green-soft);border:1px solid transparent;margin-top:12px;
}
.stepper{display:flex;align-items:center;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:3px}
.stepper button{width:30px;height:28px;border-radius:8px;font-size:16px;color:var(--ink-2);display:grid;place-items:center}
.stepper button:hover{background:var(--surface-2);color:var(--ink)}
.stepper input{width:52px;text-align:center;border:0;background:none;font-size:14px;font-weight:600;padding:0}
.stepper input:focus{outline:none}

/* ---------- tips ---------- */
.tips{display:flex;flex-direction:column;gap:10px}
.tip{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:13px;align-items:start;
  padding:14px 16px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);
}
.tip-ico{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:15px;flex:none}
.tip-t{font-size:13.5px;font-weight:600;margin-bottom:3px}
.tip-b{font-size:13px;color:var(--ink-2);line-height:1.55}
.tip.alert{border-color:color-mix(in srgb,var(--red) 26%, var(--line));background:var(--red-soft)}
.tip.alert .tip-ico{background:color-mix(in srgb,var(--red) 18%, transparent)}
.tip.watch{border-color:color-mix(in srgb,var(--amber) 30%, var(--line));background:var(--amber-soft)}
.tip.watch .tip-ico{background:color-mix(in srgb,var(--amber) 20%, transparent)}
.tip.good{background:var(--green-soft);border-color:transparent}
.tip.good .tip-ico{background:color-mix(in srgb,var(--green) 20%, transparent)}
.tip.info{background:var(--blue-soft);border-color:transparent}
.tip.info .tip-ico{background:color-mix(in srgb,var(--blue) 20%, transparent)}

/* ---------- score ---------- */
.score-wrap{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.score-dial{position:relative;width:132px;height:132px;flex:none}
.score-dial svg{transform:rotate(-90deg);width:100%;height:100%}
.score-inner{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.score-num{font-family:var(--serif);font-size:36px;line-height:1}
.score-lbl{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-top:4px}
.score-break{display:grid;gap:8px;flex:1;min-width:230px}
.score-line{display:grid;grid-template-columns:82px minmax(0,1fr) 44px;gap:10px;align-items:center;font-size:12.5px}
.score-line .bar-track{height:7px}

/* ---------- chart ---------- */
.chart{display:flex;align-items:flex-end;gap:10px;height:168px;padding-top:8px}
.col{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;height:100%;min-width:0}
.col-bars{position:relative;width:100%;flex:1;display:flex;align-items:flex-end;justify-content:center;gap:3px}
.col-bar{width:min(22px,42%);border-radius:6px 6px 3px 3px;background:var(--green-2);transition:height .5s cubic-bezier(.3,.7,.3,1);min-height:3px}
.col-bar.sugar{background:var(--terra);opacity:.85}
.col.is-today .col-bar{box-shadow:0 0 0 2px color-mix(in srgb,var(--green) 35%, transparent)}
.col-kcal{font-size:10.5px;color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.col-day{font-size:11.5px;color:var(--ink-3)}
.col.is-today .col-day{color:var(--ink);font-weight:650}
.chart-target{position:absolute;left:0;right:0;border-top:1.5px dashed var(--line-2);bottom:var(--t)}
.legend{display:flex;gap:16px;font-size:12px;color:var(--ink-3);margin-top:12px}
.legend i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:6px}

/* ---------- day nav ---------- */
.daynav{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.daynav-mid{display:flex;align-items:center;gap:10px}
.daynav-date{font-family:var(--serif);font-size:19px}
.daynav input[type=date]{
  border:1px solid var(--line);background:var(--surface);border-radius:var(--r-sm);
  padding:7px 10px;font-size:13px;
}
.nav-arrow{width:34px;height:34px;border-radius:11px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;color:var(--ink-2)}
.nav-arrow:hover{background:var(--surface-2);color:var(--ink)}

/* ---------- misc ---------- */
.topbar-end{display:flex;align-items:center;gap:10px;flex:none}

/* ---------- 段位 ---------- */
.tier-badge{
  display:flex;align-items:center;gap:9px;padding:7px 14px 7px 9px;border-radius:999px;
  border:1px solid color-mix(in srgb, var(--tc2) 45%, transparent);
  background:linear-gradient(140deg, color-mix(in srgb, var(--tc1) 22%, var(--surface)), color-mix(in srgb, var(--tc2) 16%, var(--surface)));
  transition:.18s;white-space:nowrap;
}
.tier-badge:hover{transform:translateY(-1px);box-shadow:var(--sh-2)}
.tier-badge small{display:block;font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);line-height:1.2}
.tier-badge b{font-size:13px;font-weight:650;line-height:1.2;color:var(--tc2)}
.tb-dot{
  width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:14px;
  background:linear-gradient(150deg,var(--tc1),var(--tc2));box-shadow:0 3px 9px -3px color-mix(in srgb, var(--tc2) 70%, transparent);
}

.medal{position:relative;width:148px;height:148px;flex:none;display:grid;place-items:center}
.medal-ring{
  position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 210deg, var(--tc1), var(--tc2) 45%, var(--tc1) 70%, var(--tc2));
  box-shadow:0 14px 34px -14px color-mix(in srgb, var(--tc2) 85%, transparent);
}
.medal-face{
  position:absolute;inset:11px;border-radius:50%;background:var(--surface);
  display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--line);
}
.medal-emoji{font-size:60px;line-height:1;filter:drop-shadow(0 4px 8px rgba(0,0,0,.16))}
.medal-gp{
  position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);
  background:var(--surface);border:1px solid var(--line);border-radius:999px;
  padding:3px 13px;font-size:12px;font-weight:650;font-variant-numeric:tabular-nums;
  box-shadow:var(--sh-1);white-space:nowrap;
}
.medal.mini{width:52px;height:52px}
.medal.mini .medal-face{inset:4px}
.medal.mini .medal-emoji{font-size:22px}

.pips{display:flex;gap:5px;justify-content:center}
.pips i{width:9px;height:9px;border-radius:50%;background:var(--line-2);display:block}
.pips i.on{background:linear-gradient(150deg,var(--tc1),var(--tc2))}

.milestones{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:10px}
.ms{
  border:1px solid var(--line);border-radius:var(--r);padding:12px;background:var(--surface-2);
  display:flex;flex-direction:column;gap:7px;
}
.ms.is-got{background:linear-gradient(160deg,var(--green-soft),var(--surface-2));border-color:color-mix(in srgb,var(--green-2) 35%, var(--line))}
.ms-ico{font-size:19px;line-height:1}
.ms-t{font-size:12.5px;font-weight:600}
.ms-n{font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums}

.ladder{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.tier-card{
  border:1px solid var(--line);border-radius:var(--r);padding:14px 12px;background:var(--surface-2);
  display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;transition:.2s;
}
.tier-card.is-on{
  border-color:color-mix(in srgb, var(--tc2) 50%, transparent);
  background:linear-gradient(160deg, color-mix(in srgb, var(--tc1) 16%, var(--surface)), color-mix(in srgb, var(--tc2) 12%, var(--surface)));
  box-shadow:var(--sh-2);
}
.tier-card.is-past{opacity:.62}
.tier-card .tc-name{font-size:13.5px;font-weight:650;color:var(--tc2)}
.tier-card .tc-note{font-size:10.5px;color:var(--ink-3);line-height:1.45;margin-top:-2px}
.tier-card .tc-need{font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.tier-card .tc-now{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}

.gp-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 4px}
.gp-row + .gp-row{border-top:1px solid var(--line)}
.gp-l{font-size:13.5px;font-weight:550}
.gp-d{font-size:11.5px;color:var(--ink-3)}
.gp-p{font-size:14px;font-weight:650;font-variant-numeric:tabular-nums;color:var(--green-2);min-width:44px;text-align:right}
.gp-p.zero{color:var(--ink-3);font-weight:400}
.gp-p.half{color:var(--amber)}
.gp-total{
  display:flex;align-items:baseline;justify-content:space-between;
  margin-top:14px;padding-top:14px;border-top:1px solid var(--line-2);
}
.gp-total b{font-family:var(--serif);font-size:26px;line-height:1}

.empty{text-align:center;padding:30px 16px;color:var(--ink-3);font-size:13.5px}
.empty-ico{font-size:26px;margin-bottom:8px;opacity:.6}
.note{
  display:flex;gap:11px;padding:13px 15px;border-radius:var(--r);
  background:var(--blue-soft);font-size:12.5px;color:var(--ink-2);line-height:1.55;
}
.note.warn{background:var(--amber-soft)}
.note.danger{background:var(--red-soft)}
.note b{color:var(--ink)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:13px}
.kv dt{color:var(--ink-3)}
.kv dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.water-row{display:grid;grid-template-columns:repeat(8,1fr);gap:7px;margin-top:12px}
.cup{aspect-ratio:1;border-radius:9px 9px 12px 12px;border:1.5px dashed var(--line-2);background:var(--surface-2);transition:.2s;display:grid;place-items:center;font-size:13px}
.cup:hover{border-color:var(--blue);transform:translateY(-2px)}
.cup.is-on{background:var(--blue-soft);border:1.5px solid var(--blue);color:var(--blue)}

.toast{
  position:fixed;left:50%;bottom:30px;transform:translate(-50%,20px);
  background:var(--ink);color:var(--bg);padding:11px 20px;border-radius:999px;
  font-size:13.5px;box-shadow:var(--sh-3);opacity:0;pointer-events:none;transition:.28s ease;z-index:90;
}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

.overlay{
  position:fixed;inset:0;background:rgba(24,22,18,.5);backdrop-filter:blur(6px);
  display:grid;place-items:center;padding:22px;z-index:80;animation:fade .2s ease;
}
/* 作者样式里的 display 会盖掉浏览器默认的 [hidden]{display:none}，必须显式补回来 */
.overlay[hidden]{display:none}
.modal{
  background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--sh-3);
  width:min(480px,100%);max-height:88vh;overflow:auto;padding:24px;border:1px solid var(--line);
}
.modal h3{font-family:var(--serif);font-size:19px;margin-bottom:6px}
.modal p.m-sub{font-size:13px;color:var(--ink-2);margin-bottom:18px}

.foot{text-align:center;font-size:11.5px;color:var(--ink-3);margin-top:34px;letter-spacing:.03em}

/* ---------- 安装 / 离线 ---------- */
/* ---------- 启动动画 ---------- */
/* ---------- 里程碑庆祝 ---------- */
.party{
  position:fixed;inset:0;z-index:300;
  display:grid;place-items:center;padding:22px;
  background:radial-gradient(120% 100% at 50% 40%, rgba(20,44,30,.86), rgba(10,22,15,.94));
  opacity:0;transition:opacity .4s ease;
}
.party.is-on{opacity:1}
.party-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.party-card{
  position:relative;z-index:2;text-align:center;max-width:440px;
  padding:30px 28px;border-radius:26px;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-3);
  transform:translateY(16px) scale(.97);transition:transform .5s cubic-bezier(.2,.9,.3,1.15);
}
.party.is-on .party-card{transform:none}
.party-medal{
  width:76px;height:76px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;
  font-size:34px;background:linear-gradient(150deg,var(--tc1),var(--tc2));
  box-shadow:0 14px 30px -14px color-mix(in srgb,var(--tc2) 85%, transparent);
  animation:party-pop .6s cubic-bezier(.2,.9,.3,1.5) .15s both;
}
.party-kicker{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3)}
.party-title{font-family:var(--serif);font-size:27px;margin:6px 0 10px;letter-spacing:-.01em}
.party-sub{font-size:13.5px;color:var(--ink-2);line-height:1.6;margin-bottom:18px}
.party-facts{display:flex;flex-direction:column;gap:7px;margin-bottom:22px}
.party-fact{
  font-size:12.5px;color:var(--ink-2);
  background:var(--surface-2);border:1px solid var(--line);border-radius:11px;padding:8px 12px;
}
.party-fact b{color:var(--ink)}
@keyframes party-pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}

.splash{
  position:fixed;inset:0;z-index:200;
  display:grid;place-items:center;
  background:radial-gradient(120% 90% at 50% 18%, #2c6f4e 0%, #1b4a34 45%, #11301f 100%);
  transition:opacity .45s ease, visibility .45s;
}
.splash.is-done{opacity:0;visibility:hidden;pointer-events:none}
.splash.is-off{display:none}
.splash-inner{display:flex;flex-direction:column;align-items:center;gap:6px}
.tree{width:min(56vw,300px);height:auto;overflow:visible}

.sp-ground{fill:#0d2417;opacity:0;animation:sp-fade .5s ease .15s both}
.sp-glow{opacity:0;animation:sp-fade .9s ease .1s both}

/* 枝条：用 dashoffset 从根部往上「画」出来 */
.sp-wood path{stroke-dasharray:var(--len,300);stroke-dashoffset:var(--len,300)}
.sp-sprout{animation:sp-draw .45s ease-out .25s both}
.sp-trunk {animation:sp-draw 1.05s cubic-bezier(.4,.1,.3,1) .55s both}
.sp-b1{animation:sp-draw .5s ease-out 1.35s both}
.sp-b2{animation:sp-draw .5s ease-out 1.45s both}
.sp-b3{animation:sp-draw .45s ease-out 1.58s both}
.sp-b4{animation:sp-draw .45s ease-out 1.68s both}
.sp-b5{animation:sp-draw .4s ease-out 1.62s both}
.sp-b6{animation:sp-draw .4s ease-out 1.70s both}

/* 叶子：从 0 弹出来，种苗那两片最早 */
.sp-leaf{transform-box:fill-box;transform-origin:0% 50%;opacity:0;animation:sp-pop .42s cubic-bezier(.2,.9,.3,1.4) both}
.sp-l0{animation-delay:.45s}
.sp-l1{animation-delay:1.45s}
.sp-l2{animation-delay:1.62s}
.sp-l3{animation-delay:1.62s}
.sp-l4{animation-delay:1.78s}

/* 树冠最后铺开 */
.sp-canopy{transform-box:fill-box;transform-origin:50% 100%;opacity:0;animation:sp-canopy .7s cubic-bezier(.2,.8,.3,1.1) 2.05s both}

.sp-mark{
  font-family:var(--serif);font-size:34px;letter-spacing:.06em;color:#f2f7ef;
  opacity:0;animation:sp-rise .65s cubic-bezier(.2,.8,.3,1) 2.20s both;
}
.sp-tag{
  font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;
  color:#9dc4ac;opacity:0;animation:sp-rise .65s ease 2.38s both;
}
.sp-skip{
  position:absolute;bottom:calc(28px + env(safe-area-inset-bottom));left:0;right:0;
  text-align:center;font-size:11.5px;color:#6f9a80;letter-spacing:.1em;
  opacity:0;animation:sp-fade .7s ease 2.65s both;
}

@keyframes sp-draw{to{stroke-dashoffset:0}}
@keyframes sp-pop{from{opacity:0;transform:scale(.1)}to{opacity:1;transform:scale(1)}}
@keyframes sp-canopy{from{opacity:0;transform:scale(.2)}to{opacity:.96;transform:scale(1)}}
@keyframes sp-fade{to{opacity:1}}
@keyframes sp-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* 尊重系统的「减少动态效果」：别放动画，直接进应用 */
@media (prefers-reduced-motion: reduce){
  .splash{display:none}
}

.code{
  margin:12px 0 0;padding:12px 14px;border-radius:var(--r);
  background:var(--surface-2);border:1px solid var(--line);
  font-family:var(--mono);font-size:12.5px;color:var(--ink);overflow-x:auto;
}
.code::before{content:"$ ";color:var(--ink-3)}
.steps{margin:14px 0 0;padding-left:20px;font-size:13.5px;color:var(--ink-2);line-height:1.9}
.steps b{color:var(--ink)}
.lan-url{
  font-family:var(--mono);font-size:17px;font-weight:600;letter-spacing:.02em;
  padding:12px 14px;border-radius:var(--r);background:var(--surface-2);
  border:1px solid var(--line-2);user-select:all;margin-bottom:8px;
  overflow-x:auto;white-space:nowrap;
}

.update-bar{
  position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  display:flex;align-items:center;gap:12px;
  padding:10px 12px 10px 18px;border-radius:999px;
  background:var(--ink);color:var(--bg);
  box-shadow:var(--sh-3);z-index:95;font-size:13.5px;white-space:nowrap;
}
.update-bar .btn-primary{background:var(--bg);color:var(--ink);box-shadow:none}
.update-bar .icon-btn{color:var(--bg);opacity:.65}
.update-bar .icon-btn:hover{background:rgba(255,255,255,.16);color:var(--bg);opacity:1}

/* 装到主屏后，把刘海和底部横条的留白让出来 */
@media (display-mode: standalone){
  .app{padding-top:calc(12px + env(safe-area-inset-top))}
  body{overscroll-behavior-y:none}
}

/* ---------- responsive ---------- */
@media (max-width:880px){
  .app{padding:14px 14px 40px}
  /* 窄屏不吸顶，并压成两行：品牌 + 段位徽章一行，导航一行 */
  .topbar{
    position:static;display:grid;align-items:center;
    grid-template-columns:minmax(0,1fr) auto;gap:10px 12px;padding:14px;
  }
  .brand{grid-column:1;grid-row:1}
  .topbar-end{grid-column:2;grid-row:1;justify-content:flex-end}
  .tabs{grid-column:1 / -1;grid-row:2}
  .tier-badge{padding:5px 11px 5px 6px}
  .tier-badge small{display:none}
  .tb-dot{width:22px;height:22px;font-size:12px}
  .tabs{overflow-x:auto;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tab{flex:1;text-align:center;padding:8px 10px}
  .g-main,.g-2,.g-3{grid-template-columns:minmax(0,1fr)}
  .hero{grid-template-columns:minmax(0,1fr);gap:20px;padding:18px}
  .ring-wrap{width:168px;height:168px}
  .ladder{grid-template-columns:repeat(2,minmax(0,1fr))}
  .attr-row{grid-template-columns:minmax(0,1fr) minmax(52px,1.1fr) 76px;gap:8px}
  .attr-val{font-size:11.5px}
  .medal{width:126px;height:126px}
  .medal-emoji{font-size:50px}
  .bar-row{grid-template-columns:78px minmax(0,1fr) 78px;gap:9px}
  .item{grid-template-columns:22px minmax(0,1fr) auto 26px;gap:8px}
  .item-kcal{display:none}
  .chart{height:140px;gap:6px}
  .water-row{grid-template-columns:repeat(4,1fr)}
}

@media print{
  .topbar,.foot,.tabs,.btn{display:none}
  body{background:#fff}
  .card{box-shadow:none;break-inside:avoid}
}