:root{
  color-scheme:light;
  --bg:#F5F7FA; --card:#FFFFFF; --card-2:#FAFBFD;
  --ink:#182135; --ink-2:#5C6779; --ink-3:#98A1B2;
  --line:#EBEEF3; --line-2:#DFE3EB;

  --brand:#0E8F9E; --brand-600:#0B7A87; --brand-tint:#E4F5F6;
  --blue:#3B6BE0; --blue-tint:#EDF2FE;
  --mint:#17916A; --mint-tint:#E6F6F0;
  --lilac:#7357E8; --lilac-tint:#F1EDFD;
  --peach:#E1732B; --peach-tint:#FEF0E6;
  --rose:#DB4F62; --rose-tint:#FDECEF;
  --amber:#C9880C; --amber-tint:#FDF3DF;

  --good:#17916A; --warn:#C9880C; --flag:#DB4F62;
  --r-lg:20px; --r-md:14px; --r-sm:10px;
  --sh-sm:0 1px 2px rgba(24,33,53,.05);
  --sh:0 2px 4px rgba(24,33,53,.04), 0 12px 28px -18px rgba(24,33,53,.22);
  --sh-lg:0 4px 8px rgba(24,33,53,.04), 0 24px 48px -28px rgba(24,33,53,.3);
  --ui:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--ui); font-size:14.5px; line-height:1.55; -webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums; overflow-x:hidden}
h1,h2,h3{margin:0; font-weight:700; letter-spacing:-.018em}
p{margin:0}
button{font:inherit; color:inherit}
:where(a,button,input,select,[tabindex]):focus-visible{outline:2px solid var(--brand); outline-offset:2px; border-radius:8px}

.app{display:grid; grid-template-columns:262px minmax(0,1fr); min-height:100vh; min-width:0}
@media (max-width:960px){ .app{grid-template-columns:1fr} }

/* ---------- rail ---------- */
.rail{background:var(--card); border-right:1px solid var(--line); display:flex; flex-direction:column; padding:22px 16px 20px; position:sticky; top:0; height:100vh; overflow-y:auto; scrollbar-width:thin}
@media (max-width:960px){ .rail{position:static; height:auto} }
@media (max-width:960px){ .rail{border-right:0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:7px; min-width:0; padding:12px 14px 14px; overflow:visible} }
@media (max-width:960px){ .rail .logo{grid-column:1/-1; padding:2px 4px 8px} .rail .navb{grid-column:span 2; justify-content:center; text-align:center; padding:9px 6px; font-size:12.5px; gap:7px; border:1px solid var(--line); border-radius:11px; background:var(--card-2); white-space:normal; line-height:1.2} .rail .navb .ic{width:16px; height:16px} .rail .navb .pill, .rail .navb .dot-badge{margin-left:0} .rail .navb[aria-current="page"]{border-color:var(--brand); background:var(--brand-tint)} }
.logo{display:flex; align-items:center; gap:11px; padding:8px 10px 24px} .logo .wm{color:var(--ink)} .logo .wmlink{display:block; color:inherit; text-decoration:none}
@media (max-width:960px){ .logo{padding:0 16px 0 4px} }
.logo .mk{width:38px; height:38px; border-radius:12px; background:linear-gradient(145deg,var(--brand),#12A9B8); display:grid; place-items:center; color:#fff; flex:none; box-shadow:0 6px 14px -6px rgba(14,143,158,.7)}
.logo b{display:block; font-size:17px; font-weight:800; letter-spacing:-.02em; line-height:1.15; color:var(--ink)}
.logo span{display:block; font-size:12px; color:var(--ink-3); font-weight:500}
.railsec{font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); padding:16px 10px 8px}
@media (max-width:960px){ .railsec{display:none} }
.navb{display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:transparent; border:0; border-radius:12px; padding:11px 12px; cursor:pointer; color:var(--ink-2); font-size:14.5px; font-weight:500; white-space:nowrap; transition:background .18s ease, color .18s ease}
.navb .ic{width:20px; height:20px; display:grid; place-items:center; flex:none; color:var(--ink-3); transition:color .18s ease}
.navb:hover{background:var(--card-2); color:var(--ink)}
.navb:hover .ic{color:var(--ink-2)}
.navb[aria-current="page"]{background:var(--brand-tint); color:var(--brand-600); font-weight:700}
.navb[aria-current="page"] .ic{color:var(--brand)}
.railcard{margin-top:auto; background:var(--amber-tint); border-radius:var(--r-md); padding:16px; display:flex; flex-direction:column; gap:9px}
@media (max-width:960px){ .railcard{display:none} }
.railcard b{font-size:13.5px; font-weight:700; color:#7A5405}
.railcard p{font-size:12.5px; color:#8A6410; line-height:1.5}
.railfoot{padding:14px 10px 0; font-size:12px; color:var(--ink-3); line-height:1.5}
@media (max-width:960px){ .railfoot{display:none} }

/* ---------- top ---------- */
main{min-width:0}
.top{display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:26px 30px 4px}
.hello h1{font-size:23px; font-weight:800; letter-spacing:-.03em}
.hello p{font-size:14px; color:var(--ink-2); margin-top:3px}
.topctl{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-left:auto}
.top .hello{flex:1 1 300px; min-width:0}
.who{display:flex; align-items:center; gap:11px; background:var(--card); border:1px solid var(--line); border-radius:100px; padding:6px 14px 6px 6px; box-shadow:var(--sh-sm)}
.who .av{width:34px; height:34px; border-radius:50%; background:linear-gradient(145deg,#8FD3DA,var(--brand)); color:#fff; display:grid; place-items:center; font-size:13px; font-weight:800; flex:none}
.who b{display:block; font-size:13.5px; font-weight:700; line-height:1.25}
.who span{display:block; font-size:12px; color:var(--ink-3)}
.ctl{display:inline-flex; align-items:center; gap:8px; background:var(--card); border:1px solid var(--line); border-radius:11px; padding:9px 13px; font-size:13.5px; color:var(--ink-2); box-shadow:var(--sh-sm)}
.ctl select{border:0; background:transparent; font:inherit; color:var(--ink); font-weight:600; cursor:pointer; padding:0}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; background:var(--brand); color:#fff; border:0; border-radius:11px; padding:11px 17px; font-weight:700; font-size:13.5px; cursor:pointer; white-space:nowrap; box-shadow:0 8px 18px -10px rgba(14,143,158,.85); transition:transform .16s cubic-bezier(.2,.8,.3,1), background .16s ease}
.btn:hover{background:var(--brand-600); transform:translateY(-1px)}
.btn.soft{background:var(--card); color:var(--ink-2); border:1px solid var(--line-2); box-shadow:var(--sh-sm); font-weight:600}
.btn.soft:hover{background:var(--card-2); color:var(--ink)}
.pad{padding:20px 30px 34px}
@media (max-width:900px){
  .top{gap:12px}
  .top .hello{flex:1 1 100%}
  .topctl{margin-left:0; width:100%; gap:10px}
  .topctl .ctl{flex:1 1 150px}
  .topctl .btn{flex:1 1 140px; justify-content:center}
  .topctl .who{display:none}
}
@media (max-width:640px){ .top{padding:20px 16px 4px} .pad{padding:16px} }

/* ---------- cards ---------- */
.card{background:var(--card); border-radius:var(--r-lg); box-shadow:var(--sh); min-width:0; overflow:hidden}
.ch{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:20px 22px 0}
.ch h2{font-size:16px; font-weight:700; margin-right:auto}
.ch .sub{font-size:12.5px; color:var(--ink-3); font-weight:500}
.link{font-size:13px; font-weight:700; color:var(--brand); text-decoration:none; background:none; border:0; cursor:pointer; padding:0}
.link:hover{color:var(--brand-600); text-decoration:underline}

/* pills */
.pill{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; border-radius:100px; padding:4px 10px; white-space:nowrap; letter-spacing:.005em}
.pill.rec{background:#EEF1F6; color:#5C6779}
.pill.der{background:var(--blue-tint); color:var(--blue)}
.pill.ok{background:var(--mint-tint); color:var(--mint)}
.pill.chk{background:var(--rose-tint); color:var(--flag)}
.pill.warn{background:var(--amber-tint); color:var(--amber)}
.pill.lab{background:var(--peach-tint); color:var(--peach)}

/* ---------- kpi row ---------- */
.kpis{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px}
@media (max-width:1360px){ .kpis{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:900px){ .kpis{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .kpis{grid-template-columns:minmax(0,1fr)} }
.kpis.four{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){ .kpis.four{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .kpis.four{grid-template-columns:minmax(0,1fr)} }
.kpi{background:var(--card); border-radius:var(--r-lg); box-shadow:var(--sh); padding:18px 18px 0; display:flex; flex-direction:column; min-width:0; overflow:hidden; transition:transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s ease}
.kpi:hover{transform:translateY(-3px); box-shadow:var(--sh-lg)}
.kpi-top{display:flex; align-items:flex-start; gap:13px}
.ico{width:44px; height:44px; border-radius:13px; display:grid; place-items:center; flex:none}
.ico.blue{background:var(--blue-tint); color:var(--blue)}
.ico.mint{background:var(--mint-tint); color:var(--mint)}
.ico.lilac{background:var(--lilac-tint); color:var(--lilac)}
.ico.peach{background:var(--peach-tint); color:var(--peach)}
.ico.rose{background:var(--rose-tint); color:var(--flag)}
.kpi-label{font-size:12.5px; color:var(--ink-2); font-weight:600; line-height:1.35; min-height:34px}
.kpi-val{font-size:25px; font-weight:800; letter-spacing:-.035em; margin-top:2px; white-space:nowrap; line-height:1.2}
.kpi-val.flag{color:var(--flag)}
.kpi-meta{display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-top:11px; font-size:12px; color:var(--ink-3)}
.delta{display:inline-flex; align-items:center; gap:3px; font-weight:700; font-size:12px}
.delta.up{color:var(--good)} .delta.dn{color:var(--flag)}
.spark{margin:12px -18px 0; height:52px}
.spark svg{display:block; width:100%; height:52px}
.kpi-note{font-size:12px; color:var(--ink-3); margin-top:9px; line-height:1.45; min-height:34px}

/* ---------- layout ---------- */
.two{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:16px; margin-top:16px; align-items:start}
@media (max-width:1080px){ .two{grid-template-columns:minmax(0,1fr)} }
.two.flip{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
@media (max-width:1080px){ .two.flip{grid-template-columns:minmax(0,1fr)} }

/* month list */
.mlist{padding:8px 12px 6px}
.mrow{display:flex; align-items:center; gap:14px; padding:11px 10px; border-radius:var(--r-md); transition:background .18s ease}
.mrow:hover{background:var(--card-2)}
.badge{width:52px; flex:none; text-align:center; border-radius:11px; padding:7px 0; font-weight:800; font-size:12.5px; line-height:1.15}
.badge span{display:block; font-size:10.5px; font-weight:600; opacity:.75}
.badge.ok{background:var(--mint-tint); color:var(--mint)}
.badge.chk{background:var(--rose-tint); color:var(--flag)}
.mrow .nm{min-width:0; flex:1}
.mrow .nm b{display:block; font-size:14px; font-weight:700}
.mrow .nm span{display:block; font-size:12.5px; color:var(--ink-3)}
.mrow .amt{text-align:right; flex:none}
.mrow .amt b{display:block; font-size:14.5px; font-weight:700}
.mrow .amt span{display:block; font-size:12px; color:var(--ink-3)}
.cf{padding:14px 22px 20px; font-size:12.5px; color:var(--ink-3); line-height:1.6}
.cfoot{display:flex; justify-content:center; padding:6px 0 18px}

/* chart */
.chartwrap{position:relative; padding:6px 10px 10px}
.chartwrap svg{display:block; width:100%; height:auto}
.bignum{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; padding:14px 22px 0}
.bignum .v{font-size:30px; font-weight:800; letter-spacing:-.035em}
.legend{display:flex; gap:20px; flex-wrap:wrap; padding:2px 22px 18px; font-size:12.5px; color:var(--ink-2); font-weight:500}
.legend i{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:8px; vertical-align:-1px}
.legend i.ln{height:3px; width:16px; border-radius:2px; vertical-align:4px}
.tip{position:absolute; pointer-events:none; opacity:0; transform:translate(-50%,-100%); background:var(--card); border:1px solid var(--line-2); border-radius:var(--r-md); box-shadow:var(--sh-lg); padding:12px 14px; font-size:12.5px; min-width:200px; transition:opacity .12s ease; z-index:5}
.tip h4{font-size:13px; margin:0 0 8px; font-weight:800}
.tip .tr{display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:2.5px 0}
.tip .tr span{color:var(--ink-2)}
.tip .tr b{font-weight:700}
.tip .tn{margin-top:9px; padding-top:9px; border-top:1px solid var(--line); color:var(--ink-3); font-size:11.5px; line-height:1.45}

/* tables */
.tblwrap{overflow-x:auto; -webkit-overflow-scrolling:touch; padding:0 8px 8px}
table{width:100%; border-collapse:separate; border-spacing:0; font-size:13.5px}
th{text-align:left; font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); padding:12px 14px; white-space:nowrap}
td{padding:13px 14px; border-top:1px solid var(--line); white-space:nowrap}
td.n, th.n{text-align:right}
tbody tr{transition:background .16s ease}
tbody tr:hover td{background:var(--card-2)}
tbody tr:first-child td{border-top:1px solid var(--line)}

/* rows / sum lines */
.sum{padding:6px 22px 8px}
.sumline{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; border-bottom:1px solid var(--line); font-size:14px; color:var(--ink-2)}
.sumline:last-child{border-bottom:0}
.sumline b{font-weight:700; color:var(--ink); font-size:15px}
.sumline.total b{font-size:17px}
.sumline.total{border-bottom:0; border-top:2px solid var(--line-2); margin-top:4px}

/* banner */
.banner{display:flex; gap:14px; align-items:center; background:var(--amber-tint); border-radius:var(--r-lg); padding:16px 20px; margin-bottom:16px}
.banner .bi{width:40px; height:40px; border-radius:12px; background:#F7E3B0; color:#8A6410; display:grid; place-items:center; flex:none}
.banner b{font-size:14.5px; font-weight:700; color:#7A5405}
.banner p{font-size:13px; color:#8A6410; margin-top:2px; line-height:1.5}
.banner .act{margin-left:auto}
.banner .btn{background:#C9880C; box-shadow:0 8px 18px -10px rgba(201,136,12,.8)}
.banner .btn:hover{background:#AE7509}
@media (max-width:760px){ .banner{flex-wrap:wrap} .banner .act{margin-left:0; width:100%} .banner .act .btn{width:100%; justify-content:center} }
.banner.good{background:var(--mint-tint)}
.banner.info{background:var(--blue-tint)} .banner.info .bi{background:#D6E2FA; color:#2B4FA8} .banner.info b{color:#2B4FA8} .banner.info p{color:#3E5C9F}
.banner.good .bi{background:#CDEBDF; color:#0F6A4D}
.banner.good b{color:#0F6A4D} .banner.good p{color:#2A7A5F}

/* days */
.day{padding:0 12px}
.dayhead{display:flex; align-items:center; gap:14px; width:100%; background:transparent; border:0; padding:13px 10px; cursor:pointer; text-align:left; border-radius:var(--r-md); transition:background .18s ease}
.dayhead:hover{background:var(--card-2)}
.dayhead .dt{width:96px; flex:none; font-size:13px; font-weight:700; color:var(--ink-2)}
.dayhead .pl{font-size:13.5px; color:var(--ink-2)}
.dayhead .vv{margin-left:auto; font-size:12.5px; color:var(--ink-3)}
.dayhead .tt{font-size:14.5px; font-weight:700; width:92px; text-align:right}
.dayhead .car{color:var(--ink-3); transition:transform .2s cubic-bezier(.2,.8,.3,1)}
.dayhead[aria-expanded="true"] .car{transform:rotate(90deg)}
.daybody{background:var(--card-2); border-radius:var(--r-md); margin:0 10px 10px; padding:6px 18px 12px}
.visit{padding:10px 0; border-bottom:1px solid var(--line)}
.visit:last-child{border-bottom:0}
.vt{font-size:12px; color:var(--ink-3); font-weight:700; letter-spacing:.04em; text-transform:uppercase; margin-bottom:6px}
.line{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:center; padding:6px 0; font-size:13.5px}
.code{font-size:12px; font-weight:700; color:var(--ink-2); background:#EEF1F6; border-radius:7px; padding:3px 8px; letter-spacing:.02em}
.line .lb small{color:var(--ink-3); font-size:12px; margin-left:8px}
.line .fe{font-weight:700}

/* model */
.ctlrow{display:grid; grid-template-columns:158px minmax(0,1fr) 58px; gap:16px; align-items:center; padding:13px 0; border-bottom:1px solid var(--line); font-size:13.5px}
.ctlrow:last-child{border-bottom:0}
input[type=range]{width:100%; accent-color:var(--brand); cursor:pointer}
.ctlrow .v{font-weight:700; text-align:right}
.hint{font-size:12.5px; color:var(--ink-3); line-height:1.6}
.formula{font-size:13px; line-height:1.9; color:var(--ink-2); background:var(--card-2); border-radius:var(--r-md); padding:16px 18px; overflow-x:auto}
.formula em{font-style:normal; color:var(--brand-600); font-weight:700}

.hidden{display:none}
.viewin{animation:vin .4s cubic-bezier(.16,.84,.28,1) backwards}
@keyframes vin{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
.kpi{animation:vin .5s cubic-bezier(.16,.84,.28,1) backwards}
.bar-anim{transform:scaleY(0); transform-box:fill-box; transform-origin:bottom; animation:gb .7s cubic-bezier(.16,.84,.28,1) forwards}
@keyframes gb{to{transform:scaleY(1)}}
.line-anim{animation:dr .95s cubic-bezier(.4,0,.2,1) .2s forwards}
@keyframes dr{to{stroke-dashoffset:0}}
.area-anim{opacity:0; animation:fi .6s ease .55s forwards}
.dot-anim{opacity:0; animation:fi .3s ease forwards}
.lbl-anim{opacity:0; animation:fi .4s ease 1s forwards}
@keyframes fi{to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .viewin,.kpi,.bar-anim,.line-anim,.dot-anim,.lbl-anim,.area-anim{animation:none !important}
  .bar-anim{transform:none} .dot-anim,.lbl-anim,.area-anim{opacity:1}
  .line-anim{stroke-dashoffset:0 !important}
  *{transition-duration:.001ms !important}
}

/* ---------- forms ---------- */
.field{display:flex; flex-direction:column; gap:7px; min-width:0}
.field label{font-size:12.5px; font-weight:700; color:var(--ink-2)}
.field .help{font-size:12px; color:var(--ink-3); line-height:1.45}
.inp{width:100%; background:var(--card); border:1px solid var(--line-2); border-radius:11px; padding:11px 13px; font:inherit; font-size:14.5px; color:var(--ink); transition:border-color .16s ease, box-shadow .16s ease}
.inp::placeholder{color:var(--ink-3)}
.inp.bad{border-color:var(--rose); background:#FFF7F7}
.inp.bad:focus{border-color:var(--rose); box-shadow:0 0 0 3px rgba(225,90,90,.18)}
.ferr{display:block; color:var(--rose); font-size:12.5px; font-weight:600; margin-top:2px}
.inp:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-tint)}
.inp.sm{padding:9px 11px; font-size:13.5px; border-radius:10px}
.inp.num{text-align:right}
.inp.bad{border-color:var(--rose); box-shadow:0 0 0 3px var(--rose-tint)}
select.inp{cursor:pointer; appearance:none; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1.5 1.5 6 6l4.5-4.5' stroke='%2398A1B2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 13px center; padding-right:34px}
.fgrid{display:grid; gap:16px}
.fgrid.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.fgrid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:760px){ .fgrid.c2,.fgrid.c3{grid-template-columns:minmax(0,1fr)} }
.switch{display:inline-flex; align-items:center; gap:9px; cursor:pointer; font-size:13.5px; font-weight:600; color:var(--ink-2); user-select:none}
.switch input{position:absolute; opacity:0; width:0; height:0}
.switch .tr{width:40px; height:23px; border-radius:100px; background:#DFE3EB; position:relative; transition:background .18s ease; flex:none}
.switch .tr::after{content:""; position:absolute; top:2.5px; left:2.5px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(24,33,53,.28); transition:transform .18s cubic-bezier(.2,.8,.3,1)}
.switch input:checked + .tr{background:var(--peach)}
.switch input:checked + .tr::after{transform:translateX(17px)}
.switch input:focus-visible + .tr{outline:2px solid var(--brand); outline-offset:2px}

/* log builder */
.visitcard{background:var(--card-2); border-radius:var(--r-md); padding:16px 18px 18px; margin-bottom:14px; border:1px solid var(--line)}
.vhd{display:flex; align-items:center; gap:10px; margin-bottom:12px}
.vhd b{font-size:14px; font-weight:700}
.vhd .tot{margin-left:auto; font-size:14px; font-weight:700}
.iconbtn{width:34px; height:34px; border-radius:9px; border:1px solid var(--line-2); background:var(--card); color:var(--ink-3); display:grid; place-items:center; cursor:pointer; transition:color .16s ease, border-color .16s ease, background .16s ease}
.iconbtn:hover{color:var(--rose); border-color:var(--rose); background:var(--rose-tint)}
.lrow{display:grid; grid-template-columns:104px minmax(0,1fr) 34px; gap:8px; align-items:center; padding:8px 0 0}
.lsub{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:6px 0 8px; font-size:12.5px; color:var(--ink-3); border-bottom:1px dashed var(--line); margin-bottom:4px}
.lsub .qty{width:58px} .lsub .fee{width:110px}
.lsub .x{font-size:12px; color:var(--ink-3)}
.lmeta{display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:12.5px; color:var(--ink-3)}
.lmeta .cat{font-weight:700; color:var(--ink-2)}
.addrow{display:flex; gap:10px; flex-wrap:wrap; margin-top:6px}
.daytotal{display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:18px 22px; background:var(--brand-tint); border-radius:var(--r-md); margin-top:6px}
.daytotal .t{font-size:13.5px; font-weight:700; color:var(--brand-600)}
.daytotal .n{font-size:26px; font-weight:800; letter-spacing:-.03em; color:var(--brand-600)}
.daytotal .sp{margin-left:auto}
.stack{display:flex; flex-direction:column; gap:16px}

/* toast */
.toast{position:fixed; left:50%; bottom:26px; transform:translate(-50%,20px); background:var(--ink); color:#fff; border-radius:14px; padding:13px 20px; font-size:14px; font-weight:600; box-shadow:0 18px 40px -18px rgba(24,33,53,.7); opacity:0; pointer-events:none; transition:opacity .22s ease, transform .22s cubic-bezier(.2,.8,.3,1); z-index:60; display:flex; align-items:center; gap:10px}
.toast.show{opacity:1; transform:translate(-50%,0)}
.toast svg{color:#5FD6A4}

/* misc */
.searchwrap{position:relative; flex:1 1 240px; max-width:340px}
.searchwrap svg{position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--ink-3); pointer-events:none}
.searchwrap .inp{padding-left:38px}
.empty{text-align:center; padding:46px 24px}
.empty .ic{width:52px; height:52px; border-radius:16px; margin:0 auto 14px; display:grid; place-items:center}
.empty b{display:block; font-size:16px; font-weight:700}
.empty p{margin-top:6px; font-size:14px; color:var(--ink-2); max-width:44ch; margin-left:auto; margin-right:auto; line-height:1.6}
.rowin{width:112px}
td .inp{margin:-4px 0}
.qa{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px}
.qa .btn.soft{font-weight:600}

/* ---------- calendar ---------- */
.calhead{display:flex; align-items:center; gap:12px; padding:18px 22px 10px; flex-wrap:wrap}
.calhead h2{font-size:17px; margin-right:auto}
.calnav{display:inline-flex; align-items:center; gap:4px; background:var(--card-2); border-radius:11px; padding:4px}
.calnav button{width:34px; height:32px; border:0; background:transparent; border-radius:8px; cursor:pointer; color:var(--ink-2); display:grid; place-items:center}
.calnav button:hover{background:var(--card); color:var(--ink); box-shadow:var(--sh-sm)}
.calnav b{min-width:120px; text-align:center; font-size:14px; font-weight:700}
.callegend{display:flex; gap:16px; flex-wrap:wrap; font-size:12.5px; color:var(--ink-3); padding:0 22px 12px}
.callegend i{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:7px; vertical-align:-1px}
.cal{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; padding:6px 18px 20px}
.cal .dow{font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); text-align:center; padding:6px 0 4px}
.cell{position:relative; aspect-ratio:1/.86; border-radius:14px; background:var(--card-2); border:1.5px solid transparent; padding:9px 10px; cursor:pointer; text-align:left; font:inherit; color:var(--ink-3); transition:transform .16s cubic-bezier(.2,.8,.3,1), box-shadow .16s ease, background .16s ease, border-color .16s ease; display:flex; flex-direction:column; min-width:0}
.cell:hover{transform:translateY(-2px); box-shadow:var(--sh); background:var(--card)}
.cell.pad{background:transparent; cursor:default; pointer-events:none}
.cell.work{background:var(--brand-tint); color:var(--brand-600); border-color:#BFE3E6}
.cell.work .dn{color:var(--brand-600)} .cell.work .sm{color:var(--brand-600); opacity:.8}
.cell.has{background:var(--blue-tint); border-color:transparent; color:var(--ink)}
.cell.done{background:var(--mint-tint); color:var(--ink)}
.cell.sel{border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-tint)}
.cell.today .dn::after{content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--brand); margin-left:6px; vertical-align:2px}
.cell .dn{font-size:13px; font-weight:700}
.cell .amt{margin-top:auto; font-size:13px; font-weight:800; letter-spacing:-.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cell .sm{font-size:11px; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cell .tick{position:absolute; top:8px; right:8px; width:18px; height:18px; border-radius:50%; background:var(--mint); color:#fff; display:grid; place-items:center}
.cell .tick svg{width:11px; height:11px}
.cell.has .dn{color:var(--blue)} .cell.done .dn{color:var(--mint)}
@media (max-width:760px){ .cal{gap:5px; padding:6px 12px 16px} .cell{padding:6px 7px; border-radius:10px} .cell .amt{font-size:11.5px} .cell .sm{display:none} }

.dayedit-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:18px 22px 6px}
.dayedit-head h2{font-size:17px; margin-right:auto}
.dayedit-head .stat{font-size:12.5px; color:var(--ink-3)}
.statusrow{display:flex; gap:8px; flex-wrap:wrap; padding:6px 22px 14px}
.segbtn{display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line-2); background:var(--card); border-radius:10px; padding:8px 13px; font-size:13px; font-weight:600; color:var(--ink-2); cursor:pointer; transition:all .16s ease}
.segbtn:hover{border-color:var(--ink-3); color:var(--ink)}
.segbtn.on{background:var(--brand-tint); border-color:var(--brand); color:var(--brand-600)}
.segbtn.on.mint{background:var(--mint-tint); border-color:var(--mint); color:var(--mint)}
.segbtn.on.grey{background:#EEF1F6; border-color:#C9CFD9; color:var(--ink-2)}

/* ---------- range tabs ---------- */
.tabs{display:inline-flex; background:var(--card-2); border-radius:12px; padding:4px; gap:2px; flex-wrap:wrap}
.tabs button{border:0; background:transparent; border-radius:9px; padding:8px 13px; font-size:13px; font-weight:600; color:var(--ink-2); cursor:pointer; transition:all .16s ease; white-space:nowrap}
.tabs button:hover{color:var(--ink)}
.tabs button.on{background:var(--card); color:var(--ink); box-shadow:var(--sh-sm)}

/* ---------- breakdown bars ---------- */
.brk{padding:6px 22px 18px}
.brow{display:grid; grid-template-columns:170px minmax(0,1fr) 92px 60px; gap:14px; align-items:center; padding:9px 0; font-size:13.5px}
@media (max-width:640px){ .brow{grid-template-columns:110px minmax(0,1fr) 80px} .brow .pc{display:none} }
.brow .nm{font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.brow .bar{height:12px; background:#EEF1F6; border-radius:6px; overflow:hidden}
.brow .bar i{display:block; height:100%; border-radius:6px; transform-origin:left; animation:widen .7s cubic-bezier(.16,.84,.28,1) backwards}
@keyframes widen{from{transform:scaleX(0)} to{transform:scaleX(1)}}
.brow .v{text-align:right; font-weight:700}
.brow .pc{text-align:right; color:var(--ink-3); font-size:12.5px}

/* ---------- modal ---------- */
.overlay{position:fixed; inset:0; background:rgba(24,33,53,.42); z-index:80; display:flex; align-items:center; justify-content:center; padding:20px; animation:fi .2s ease}
.modal{background:var(--card); border-radius:22px; box-shadow:var(--sh-lg); width:100%; max-width:560px; max-height:calc(100vh - 40px); max-height:calc(100dvh - 40px); overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; animation:vin .3s cubic-bezier(.16,.84,.28,1)}
.modal.wide{max-width:760px}
.mh{display:flex; align-items:center; gap:12px; padding:22px 26px 14px; position:sticky; top:0; z-index:3; background:var(--card); border-radius:22px 22px 0 0}
.mh h2{font-size:19px; margin-right:auto}
.mx{width:34px; height:34px; border-radius:10px; border:0; background:var(--card-2); color:var(--ink-2); display:grid; place-items:center; cursor:pointer}
.mx:hover{background:#EEF1F6; color:var(--ink)}
.mb{padding:4px 26px 26px}
.mrowlink{display:grid; grid-template-columns:48px minmax(0,1fr) 20px; gap:16px; align-items:center; width:100%; text-align:left; background:transparent; border:0; padding:14px 6px; border-radius:14px; cursor:pointer; font:inherit; color:inherit; transition:background .16s ease}
.mrowlink:hover{background:var(--card-2)}
.mrowlink .ic{width:48px; height:48px; border-radius:50%; background:var(--card-2); display:grid; place-items:center; color:var(--ink-2)}
.mrowlink:hover .ic{background:var(--brand-tint); color:var(--brand)}
.mrowlink b{display:block; font-size:15px; font-weight:700}
.mrowlink span{display:block; font-size:13px; color:var(--ink-2); margin-top:2px}
.mrowlink svg.ar{color:var(--ink-3)}
.choice{display:grid; grid-template-columns:52px minmax(0,1fr); gap:16px; align-items:start; width:100%; text-align:left; background:var(--card); border:1.5px solid var(--line-2); border-radius:16px; padding:18px; cursor:pointer; font:inherit; color:inherit; transition:all .16s ease; margin-bottom:12px}
.choice:hover{border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-tint)}
.choice .ic{width:52px; height:52px; border-radius:15px; display:grid; place-items:center}
.choice b{display:block; font-size:15.5px; font-weight:700}
.choice p{font-size:13.5px; color:var(--ink-2); margin-top:4px; line-height:1.55}
.roadmap{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
@media (max-width:640px){ .roadmap{grid-template-columns:minmax(0,1fr)} }
.rcol{background:var(--card-2); border-radius:14px; padding:14px}
.rcol h4{margin:0 0 10px; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3)}
.rcol div{background:var(--card); border-radius:10px; padding:10px 12px; font-size:13px; font-weight:600; margin-bottom:8px; box-shadow:var(--sh-sm)}
.faq{border-bottom:1px solid var(--line); padding:12px 0}
.faq b{display:block; font-size:14.5px; font-weight:700}
.faq p{font-size:13.5px; color:var(--ink-2); margin-top:5px; line-height:1.6}
textarea.inp{min-height:110px; resize:vertical; line-height:1.5}

/* ---------- benchmarks ---------- */
.bm{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px}
@media (max-width:1000px){ .bm{grid-template-columns:minmax(0,1fr)} }
.bmrow{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; padding:14px 0; border-bottom:1px solid var(--line)}
.bmrow:last-child{border-bottom:0}
.bmrow b{font-size:14.5px; font-weight:700; display:block}
.bmrow .sub{font-size:12.5px; color:var(--ink-3); margin-top:2px}
.bmnums{display:flex; align-items:baseline; gap:10px}
.bmnums .you{font-size:20px; font-weight:800; letter-spacing:-.03em}
.bmnums .ref{font-size:12.5px; color:var(--ink-3)}
.rank{height:10px; background:#EEF1F6; border-radius:5px; position:relative; margin-top:10px}
.rank i{position:absolute; top:-3px; width:16px; height:16px; border-radius:50%; background:var(--brand); border:3px solid #fff; box-shadow:var(--sh); transform:translateX(-50%)}
.rank b{position:absolute; top:0; height:100%; border-radius:5px; background:var(--brand-tint)}

.railbottom{margin-top:auto; display:flex; flex-direction:column; gap:2px; padding-top:10px; border-top:1px solid var(--line)}

.dot-badge{margin-left:auto; min-width:20px; height:20px; border-radius:10px; background:var(--peach); color:#fff; font-size:11px; font-weight:800; display:grid; place-items:center; padding:0 6px}
.subnote{font-size:12.5px; color:var(--ink-3); padding:0 22px 16px; line-height:1.55}
.split{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:16px; align-items:start}
@media (max-width:1080px){ .split{grid-template-columns:minmax(0,1fr)} }

/* ---------- get started ---------- */
.gs{margin-bottom:16px}
.gsgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; padding:14px 22px 6px}
.gstask{display:grid; grid-template-columns:30px minmax(0,1fr); gap:12px; align-items:start; background:var(--card-2); border-radius:14px; padding:14px}
.gstask.done{opacity:.72}
.gstask.preview .gsn{background:var(--lilac-tint); color:#3E2E8A}
.gsn{width:30px; height:30px; border-radius:50%; background:var(--brand-tint); color:var(--brand-600); display:grid; place-items:center; font-weight:800; font-size:13px}
.gstask.done .gsn{background:var(--mint); color:#fff}
.gstask b{font-size:14px; font-weight:700; display:block} .gstask p{font-size:12.5px; color:var(--ink-2); margin-top:4px; line-height:1.5}
.gsacts{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.btn.sm{padding:8px 13px; font-size:12.5px; border-radius:9px}
.gshow{padding:12px 22px 20px; font-size:13.5px; color:var(--ink-2); line-height:1.65}
.gshow b{color:var(--ink); font-weight:700}

/* ---------- month stats + goal ---------- */
.statgrid{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:14px; margin-bottom:16px}
@media (max-width:1300px){ .statgrid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:760px){ .statgrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .statgrid{grid-template-columns:minmax(0,1fr)} }
.statcard{background:var(--card); border-radius:var(--r-lg); box-shadow:var(--sh); padding:16px 18px; min-width:0}
.statlab{font-size:12.5px; font-weight:600; color:var(--ink-2)}
.statval{font-size:26px; font-weight:800; letter-spacing:-.035em; margin-top:4px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.statsub{font-size:12px; color:var(--ink-3); margin-top:4px; line-height:1.4}
.goalbox p{font-size:13px; color:var(--ink-2); margin-top:8px; line-height:1.5}
.goalhead{display:flex; align-items:center; gap:10px} .goalhead b{font-size:14.5px; font-weight:700; margin-right:auto}
.goalbar{height:10px; background:#EEF1F6; border-radius:5px; overflow:hidden; margin-top:10px}
.goalbar i{display:block; height:100%; background:linear-gradient(90deg,var(--brand),#13AEBE); border-radius:5px; transform-origin:left; animation:widen .8s cubic-bezier(.16,.84,.28,1) backwards}
.goalform{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap} .goalform .inp{flex:1 1 90px; min-width:0}

/* ---------- mark mode ---------- */
.markbar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:var(--brand-tint); color:var(--brand-600); border-radius:12px; margin:0 18px 12px; padding:10px 14px; font-size:13px}
.markbar b{font-weight:700} .markacts{margin-left:auto; display:flex; gap:14px; flex-wrap:wrap} .markacts .link{color:var(--brand-600)}
.card.marking .cell{cursor:cell}
.card.marking .cell.work,.card.marking .cell.has,.card.marking .cell.done{outline:2px solid var(--brand); outline-offset:-2px}
.samplebar{display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:var(--lilac-tint); border-radius:var(--r-lg); padding:12px 18px; margin-bottom:16px; font-size:13.5px; color:#4B3AA6}
.samplebar b{font-weight:700} .samplebar .btn{margin-left:auto; background:var(--lilac); box-shadow:none}
.samplebar .btn:hover{background:#5F45D6}

/* ---------- benchmarks v2 ---------- */
.bmgrid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; padding:8px 22px 22px}
@media (max-width:760px){ .bmgrid{grid-template-columns:minmax(0,1fr)} }
.bmcard{background:var(--card-2); border-radius:16px; padding:16px 18px}
.bmcard .t{font-size:13px; font-weight:700; color:var(--ink-2)}
.bmcard .nums{display:flex; align-items:baseline; gap:10px; margin-top:6px; flex-wrap:wrap}
.bmcard .you{font-size:24px; font-weight:800; letter-spacing:-.035em}
.bmcard .cmp{margin-left:auto}
.pair{margin-top:10px; display:grid; gap:6px}
.pair div{display:grid; grid-template-columns:58px minmax(0,1fr) 64px; gap:10px; align-items:center; font-size:12px; color:var(--ink-3)}
.pair .b{height:10px; border-radius:5px; background:#E4E8EF; overflow:hidden} .pair .b i{display:block; height:100%; border-radius:5px; transform-origin:left; animation:widen .7s cubic-bezier(.16,.84,.28,1) backwards}
.pair .v{text-align:right; font-weight:700; color:var(--ink-2)}
.qrow{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; padding:6px 22px 18px}
@media (max-width:900px){ .qrow{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ---------- lab v2 ---------- */
.labline{display:grid; grid-template-columns:70px 78px minmax(0,1fr) 120px; gap:12px; align-items:center; padding:10px 22px; border-top:1px solid var(--line); font-size:13.5px}
@media (max-width:640px){ .labline{grid-template-columns:52px 70px minmax(0,1fr) 92px; gap:8px; padding:10px 14px} .labline .pr{display:none} .defrow{grid-template-columns:80px minmax(0,1fr) 90px 36px; padding:8px 14px} }
.labline > span{min-width:0; overflow:hidden; text-overflow:ellipsis} .labline .dt{color:var(--ink-3); font-size:12.5px} .labline .lb b{font-weight:700; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .labline .lb small{display:block; color:var(--ink-3); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.defrow{display:grid; grid-template-columns:96px minmax(0,1fr) 110px 40px; gap:10px; align-items:center; padding:8px 22px}
.defrow > span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.avg{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; padding:8px 10px 14px}
@media (max-width:760px){ .avg{grid-template-columns:repeat(2,minmax(0,1fr))} }
.avg div{padding:12px} .avg .l{font-size:12px; color:var(--ink-3); font-weight:600} .avg .v{font-size:19px; font-weight:800; letter-spacing:-.03em; margin-top:2px}

.howgrid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; padding:14px 22px 8px}
@media (max-width:900px){ .howgrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .howgrid{grid-template-columns:minmax(0,1fr)} }
.howcard{background:var(--card-2); border-radius:16px; padding:18px}
.howcard .ic{width:42px; height:42px; border-radius:13px; display:grid; place-items:center; margin-bottom:12px}
.howcard b{display:block; font-size:15px; font-weight:700} .howcard p{font-size:13px; color:var(--ink-2); margin-top:5px; line-height:1.55}
.howlist{display:grid; gap:12px; padding:14px 22px 10px}
.howsec{background:var(--card-2); border-radius:16px; padding:20px 22px 18px}
.howhead{display:flex; align-items:center; gap:12px; margin-bottom:10px}
.howhead .ic{width:42px; height:42px; border-radius:13px; display:grid; place-items:center; flex:none}
.howhead b{display:block; font-size:16px; font-weight:800; letter-spacing:-.01em} .howsub{display:block; font-size:12.5px; color:var(--ink-3); font-weight:600; margin-top:1px}
.howsec p{font-size:13.5px; color:var(--ink-2); line-height:1.65; margin-top:8px; max-width:78ch}
.howticks{display:grid; gap:6px; margin-top:12px; padding:0; list-style:none}
.howticks li{display:flex; gap:9px; align-items:flex-start; font-size:13px; color:var(--ink-2); line-height:1.5}
.howticks li::before{content:""; flex:none; margin-top:4px; width:14px; height:14px; border-radius:50%; background:var(--mint-tint) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none'><path d='M4.5 9.4 7.5 12.4l6-6.6' stroke='%2317916A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/10px no-repeat}

[hidden]{display:none !important}
.ic.blue{background:var(--blue-tint); color:var(--blue)} .ic.mint{background:var(--mint-tint); color:var(--mint)} .ic.lilac{background:var(--lilac-tint); color:var(--lilac)}
.ic.peach{background:var(--peach-tint); color:var(--peach)} .ic.rose{background:var(--rose-tint); color:var(--flag)} .ic.brand{background:var(--brand-tint); color:var(--brand)} .ic.amber{background:var(--amber-tint); color:var(--amber)}
.ico.brand{background:var(--brand-tint); color:var(--brand)}

.welcome{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:18px 28px; background:linear-gradient(135deg,var(--brand-tint),#F2FBFB 60%,#fff); border-radius:var(--r-lg); padding:22px 24px; margin-bottom:16px}
.welcome h2{font-size:20px; font-weight:800; letter-spacing:-.03em} .welcome p{font-size:14px; color:var(--ink-2); margin-top:6px; max-width:64ch; line-height:1.55}
.welcome-acts{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end}
@media (max-width:760px){ .welcome{grid-template-columns:1fr} .welcome-acts{justify-content:flex-start} }
.samplebar.own{background:var(--brand-tint); color:var(--brand-600)} .samplebar.own .btn{background:var(--brand)} .samplebar.own .btn.soft{background:var(--card); color:var(--ink); margin-left:auto} .samplebar.own .btn:not(.soft){margin-left:0}
.hl{position:relative; animation:hlpulse 1.4s ease-in-out 4; box-shadow:0 0 0 4px rgba(14,143,158,.35) !important; border-radius:14px}
@keyframes hlpulse{0%,100%{box-shadow:0 0 0 4px rgba(14,143,158,.35)} 50%{box-shadow:0 0 0 10px rgba(14,143,158,.08)}}
#modeBtn{position:relative}

table.bf th{padding:8px 10px} table.bf td{padding:6px 10px} table.bf .rowin{width:104px}

.goalcard{margin-bottom:16px}
.goalstats{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin-top:16px}
@media (max-width:1100px){ .goalstats{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:600px){ .goalstats{grid-template-columns:repeat(2,minmax(0,1fr))} }
.goalstats > div{background:var(--card-2); border-radius:12px; padding:12px 14px; min-width:0}
.goalstats .l{font-size:12px; font-weight:600; color:var(--ink-3)} .goalstats .v{font-size:20px; font-weight:800; letter-spacing:-.03em; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .goalstats .s{font-size:11.5px; color:var(--ink-3); margin-top:2px; line-height:1.4}

.goalstats.seven{grid-template-columns:repeat(7,minmax(0,1fr))}
@media (max-width:1300px){ .goalstats.seven{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:700px){ .goalstats.seven{grid-template-columns:repeat(2,minmax(0,1fr))} }
.planhero .big{font-size:34px; font-weight:800; letter-spacing:-.04em} .planhero .big small{font-size:15px; color:var(--ink-2); font-weight:600; letter-spacing:0}
.planhero p{font-size:14px; color:var(--ink-2); margin-top:8px; line-height:1.6; max-width:56ch}
.railsec{padding-top:12px}

.seg{display:inline-flex; flex-wrap:wrap; max-width:100%; background:#EEF1F6; border-radius:12px; padding:4px; gap:3px}
.seg.wrap{display:flex; flex-wrap:wrap} .seg.wrap .segbtn{flex:1 1 220px; white-space:normal; text-align:left; line-height:1.35}
.seg button{border:0; background:transparent; border-radius:9px; padding:9px 14px; font-size:13.5px; font-weight:600; color:var(--ink-2); cursor:pointer; transition:all .16s ease; white-space:nowrap}
.seg button.on{background:var(--card); color:var(--brand-600); box-shadow:var(--sh-sm)}
.goalform{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:12px}
.goalamt{display:flex; align-items:center; gap:0; background:var(--card); border:1px solid var(--line-2); border-radius:12px; padding:0 0 0 13px; overflow:hidden}
.goalamt span{font-weight:700; color:var(--ink-3)} .goalamt .inp{border:0; border-radius:0; width:130px; box-shadow:none} .goalamt:focus-within{border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-tint)}
.scrollbox{max-height:440px; overflow:auto} .scrollbox thead th{position:sticky; top:0; background:var(--card); z-index:1}
th.sortable{cursor:pointer; user-select:none} th.sortable:hover{color:var(--ink)} th.sortable.on{color:var(--brand-600)}
.explain .ch h2{font-size:15px} .howgrid.three{padding-bottom:18px}

.planacts{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px}
.avg .v small{font-size:12px; color:var(--ink-3); font-weight:600; margin-left:4px}

.btn.purple{background:var(--lilac); box-shadow:0 8px 18px -10px rgba(115,87,232,.8)} .btn.purple:hover{background:#5F45D6}
.btn.purple.big{padding:14px 22px; font-size:15px}
.modebtn{width:100%; justify-content:center; margin:6px 0 8px; flex-direction:column; gap:2px; line-height:1.25}
.modebtn span{font-size:11.5px; font-weight:600; opacity:.85}
.modebtn.on{background:var(--mint); box-shadow:0 8px 18px -10px rgba(23,145,106,.8)} .modebtn.on:hover{background:#12805B}
.visitscroll{max-height:62vh; overflow:auto; padding-right:4px; border:1px solid var(--line); border-radius:var(--r-md); padding:10px 12px 4px}
.ready{display:flex; gap:22px; flex-wrap:wrap; align-items:center; padding:0 22px 18px; font-size:13.5px; color:var(--ink-2)} .ready b{font-weight:800; color:var(--ink); font-size:15px; margin-left:4px}
.avg.year{grid-template-columns:repeat(3,minmax(0,1fr))}
.yr{padding:6px 22px 14px; display:grid; gap:6px}
.yrgroup{display:grid; grid-template-columns:150px repeat(3,minmax(0,1fr)); gap:0 12px; align-items:start; padding:12px 0; border-top:1px solid var(--line)}
.yrgroup:first-child{border-top:0}
.yrt{font-size:12.5px; font-weight:800; color:var(--brand-600); letter-spacing:.02em; padding-top:4px}
.yrgroup > div:not(.yrt){padding:0 8px 0 0; min-width:0} .yrgroup .l{font-size:12px; color:var(--ink-3); font-weight:600} .yrgroup .v{font-size:18px; font-weight:800; letter-spacing:-.03em; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .yrgroup .v small{font-size:11.5px; color:var(--ink-3); font-weight:600; margin-left:4px; white-space:normal}
@media (max-width:900px){ .yrgroup{grid-template-columns:1fr 1fr; gap:8px 12px} .yrt{grid-column:1/-1} }
tbody tr.cur td{background:var(--brand-tint)}
@media (max-width:640px){ .ch .pill{white-space:normal; line-height:1.35} .ch{gap:8px} .avg.year{grid-template-columns:repeat(2,minmax(0,1fr))} }

.verdict{padding:18px 22px} .verdict.ok{border-left:5px solid var(--mint)} .verdict.chk{border-left:5px solid var(--rose)} .verdict.warn{border-left:5px solid var(--amber)} .verdict.rec{border-left:5px solid var(--line-2)}
.vrow{display:flex; align-items:center; gap:16px; flex-wrap:wrap} .vrow > .pill{margin-left:auto; font-size:12.5px; padding:7px 13px}
.vlab{font-size:12.5px; font-weight:700; color:var(--ink-3); letter-spacing:.04em; text-transform:uppercase}
.vbig{font-size:26px; font-weight:800; letter-spacing:-.03em; margin-top:4px} .vbig small{font-size:13px; color:var(--ink-3); font-weight:600; letter-spacing:0} .vbig .vs{font-size:14px; color:var(--ink-3); font-weight:600; margin:0 6px}
.vsub{font-size:13.5px; color:var(--ink-2); margin-top:6px} .vsub b{color:var(--ink)}
.stepcard{border-left:5px solid var(--line-2)} .stepcard.ok{border-left-color:var(--mint)} .stepcard.chk{border-left-color:var(--rose)} .stepcard.warn{border-left-color:var(--amber)}
.stephead{display:flex; align-items:flex-start; gap:14px; padding:18px 22px 6px}
.stephead > div{min-width:0}
.stepverdict .pill, .vrow > .pill{white-space:normal; line-height:1.35; text-align:left}
.stepnum{width:32px; height:32px; border-radius:50%; background:var(--brand-tint); color:var(--brand-600); display:grid; place-items:center; font-weight:800; font-size:14px; flex:none}
.stepcard.ok .stepnum{background:var(--mint-tint); color:var(--mint)} .stepcard.chk .stepnum{background:var(--rose-tint); color:var(--rose)} .stepcard.warn .stepnum{background:var(--amber-tint); color:var(--amber)}
.steptitle{font-size:15.5px; font-weight:700} .stepverdict{margin-top:6px}
.stepbody{padding:8px 22px 20px 68px; font-size:14px; color:var(--ink-2); line-height:1.65} .stepbody b{color:var(--ink)}
@media (max-width:640px){ .stepbody{padding-left:22px} }
.mini{font-size:11px; font-weight:700; color:var(--ink-3)} .mini.ok{color:var(--mint)} .mini.chk{color:var(--rose)}

/* the worked formula under Step 2 */
.formula{margin-top:10px; padding:10px 12px; background:var(--bg); border-radius:10px; font-size:12.5px; color:var(--ink-2); line-height:1.6; font-variant-numeric:tabular-nums}
.formula b{color:var(--ink)} .formula .fnote{display:block; font-size:11.5px; color:var(--ink-3); margin-top:3px}
/* no spinner arrows on money inputs: a spinner click fired change and re-rendered the card mid-edit */
.inp.num::-webkit-outer-spin-button,.inp.num::-webkit-inner-spin-button{-webkit-appearance:none; margin:0} .inp.num{-moz-appearance:textfield; appearance:textfield}

/* sample story card */
.card.story{background:linear-gradient(135deg,#FFFFFF 0%, var(--mint-tint) 100%)}
.storybody{display:grid; grid-template-columns:180px minmax(0,1fr); gap:22px; padding:6px 22px 20px; align-items:start}
.storybody p{font-size:14px; line-height:1.65; color:var(--ink-2); margin-bottom:10px} .storybody p:last-child{margin-bottom:0}
.storynum{display:flex; flex-direction:column; gap:2px; padding:18px; border-radius:16px; background:var(--card); border:1px solid var(--line)}
.storynum b{font-size:30px; font-weight:800; letter-spacing:-.02em; color:var(--mint)} .storynum span{font-size:12.5px; color:var(--ink-3); font-weight:600}
@media (max-width:760px){ .storybody{grid-template-columns:1fr} }

/* setup-first compensation: the fill-in grid leads while there is no history */
.card.setupcard{border:1.5px solid var(--brand); box-shadow:0 0 0 4px var(--brand-tint), var(--sh)}
.card.setupcard .ch h2{color:var(--brand-600)}
.setupintro{font-size:13.5px; line-height:1.6; color:var(--ink-2); padding:2px 22px 0; max-width:76ch}
.waitnote{display:flex; align-items:center; gap:10px; margin-top:16px; padding:11px 16px; border-radius:14px; background:var(--blue-tint); color:#2B4FA8; font-size:13px; font-weight:600}
.waitnote svg{flex:none}

/* collection model card */
.mh{font-size:14px; font-weight:700; color:var(--ink); margin:20px 0 6px} .mh:first-of-type{margin-top:4px}
.mexp{font-size:12.5px; line-height:1.65; color:var(--ink-2); margin-bottom:10px}
.seg.wrap .segbtn{flex-direction:column; align-items:flex-start; gap:2px; padding:11px 14px}
.seg.wrap .segbtn b{font-size:13.5px; font-weight:700} .seg.wrap .segbtn span{font-size:11.5px; font-weight:500; color:var(--ink-3)}
.seg.wrap .segbtn.on span{color:var(--brand-600)}
.modelout{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; margin-top:14px}
.mocell{background:var(--brand-tint); border-radius:14px; padding:14px 16px}
.mocell span{display:block; font-size:11.5px; font-weight:700; color:var(--brand-600); text-transform:uppercase; letter-spacing:.03em}
.mocell b{display:block; font-size:26px; font-weight:800; letter-spacing:-.02em; color:var(--ink); margin:3px 0 2px}
.mocell small{font-size:11.5px; color:var(--ink-3)}

/* pointer from a step to the setting behind its number */
.ratehint{margin-top:8px; font-size:12.5px; line-height:1.6; color:var(--ink-3)}
.ratehint .link{font-size:12.5px}

/* hosted account: trial bar + gate */
.trialbar{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; background:var(--amber-tint); color:#6B4A0A; border-radius:var(--r-lg); padding:12px 18px; margin-bottom:16px; font-size:13.5px; line-height:1.5}
.trialbar b{color:inherit} .trialbar .btn{flex:none}
.trialbar.ok{background:var(--mint-tint); color:#0F6A4D}
.trialbar.chk{background:var(--rose-tint); color:#8B2238}
.gatebtns{display:flex; flex-direction:column; gap:10px}
.gatebtns .btn.big{padding:15px 22px; font-size:15.5px}
.gatebtns .link{align-self:center; margin-top:4px; font-size:13px}

/* tiered share editor */
.fgrid .fullrow{grid-column:1 / -1}
.tiers{display:grid; gap:8px; margin:4px 0 10px}
.tierrow{display:grid; grid-template-columns:auto minmax(0,1fr) auto 90px auto 32px; gap:8px; align-items:center}
.tierrow .tl{font-size:12.5px; font-weight:600; color:var(--ink-3); white-space:nowrap} .tierrow .tl b{color:var(--ink)}
.tierrow .inp{height:38px}
.tierrow .tl.fixed{height:38px; display:flex; align-items:center; padding:0 13px; border:1px solid var(--line); border-radius:11px; background:var(--card-2); color:var(--ink); font-size:14.5px}
.mx.sm{width:32px; height:32px}
@media (max-width:520px){ .tierrow{grid-template-columns:auto minmax(0,1fr) auto 76px auto 32px; gap:6px} }

.setupfoot{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:12px 22px 18px; font-size:13px; color:var(--ink-3)}
.setupfoot.top{margin:10px 22px 6px; padding:12px 16px; background:var(--card-2); border-radius:12px; color:var(--ink-2)}

/* the ask-for-a-change door sits with the rail's bottom actions and reads as an invitation */
.navb.ask{color:var(--brand-600); font-weight:700}
.navb.ask .ic{color:var(--brand)}

.trialbar.demo{background:var(--lilac-tint); color:#3E2E8A}

.pricepick{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0 0 12px}
.pricepick .pp{display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:10px 14px; border-radius:12px; border:1.5px solid var(--line-2,#DFE3EB); background:#fff; font:inherit; cursor:pointer; text-align:left; color:var(--ink)}
.pricepick .pp b{font-size:17px; letter-spacing:-.02em} .pricepick .pp span{font-size:12px; color:var(--ink-3)}
.pricepick .pp.on{border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-tint); background:var(--brand-wash,#F2FBFB)}
.planacts .pricepick{max-width:420px}

.bmhow{margin:10px 0 0; font-size:12.5px; line-height:1.5; color:var(--ink-3)}

/* phones zoom the page when a field smaller than 16px gets focus; keep every field at 16px there */
@media (max-width:760px){ input, select, textarea, .inp, .inp.sm{font-size:16px !important} .visitscroll{max-height:none; overflow:visible; border:0; padding:0} }

@media (max-width:960px){ .railbottom{display:contents} .railbottom .modebtn{grid-column:1/-1; margin:4px 0 0; padding:10px 12px} .railbottom .modebtn span{white-space:normal} .railbottom .navb{background:var(--card); grid-column:span 3} }

/* Add to home screen: a small pill beside the wordmark. Phones only; desktop never sees it. */
.installbtn{display:none; align-items:center; gap:6px; margin-left:auto; padding:8px 12px; border-radius:100px; border:1px solid var(--brand); background:var(--brand-tint); color:var(--brand); font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; white-space:nowrap; flex:none}
.installbtn:active{transform:scale(.97)}
@media (max-width:960px){ .installbtn:not([hidden]){display:inline-flex} .logo{justify-content:space-between; align-items:center} }
.a2hs ol{margin:0; padding:0; list-style:none; display:grid; gap:14px}
.a2hs li{display:flex; gap:14px; align-items:flex-start; font-size:14.5px; line-height:1.5}
.a2hs li b{flex:none; width:30px; height:30px; border-radius:50%; background:var(--brand-tint); color:var(--brand); display:grid; place-items:center; font-size:13px; font-weight:800}
.a2hs .k{display:inline-flex; align-items:center; gap:5px; padding:2px 8px; border-radius:7px; background:var(--card-2); border:1px solid var(--line); font-weight:700; vertical-align:middle; white-space:nowrap}
.a2hs .k svg{width:15px; height:15px}
.a2hs p.hint{margin:16px 0 0}

/* Phone menu: the wordmark row stays, the tiles fold away behind a menu button so the page starts right under the header. */
.menubtn{display:none; width:38px; height:38px; border-radius:11px; border:1px solid var(--line); background:var(--card-2); color:var(--ink); align-items:center; justify-content:center; flex:none; position:relative; cursor:pointer; padding:0}
.menubtn .mdot{position:absolute; top:-3px; right:-3px; width:10px; height:10px; border-radius:50%; background:var(--peach); border:2px solid var(--card)}
.rail.open .menubtn{border-color:var(--brand); background:var(--brand-tint); color:var(--brand)}
@media (max-width:960px){
  .menubtn{display:inline-flex}
  .rail{position:sticky; top:0; z-index:40; max-height:100vh; overflow-y:auto}
  .rail .logo{gap:8px; padding:2px 4px 2px}
  .rail.open .logo{padding-bottom:10px}
  .rail:not(.open) .navb, .rail:not(.open) .railsec, .rail:not(.open) .railbottom{display:none !important}
  .installbtn{padding:7px 11px; font-size:12px}
  /* tiles: three per row. Without a Plan button (the demo) there are eight, so Get started + Log share the top row to keep the rows even. */
  .rail.noplan .navb[data-view="start"], .rail.noplan .navb[data-view="log"]{grid-column:span 3}
  /* open menu scrolls away with the page; only the closed one-row header stays pinned */
  .rail.open{position:static; max-height:none; overflow:visible}
}

/* account sync indicator, added by ledger-sync.js */
.syncdot{position:fixed; right:18px; bottom:18px; z-index:80; padding:8px 14px; border-radius:999px; font-size:12.5px; font-weight:700; background:var(--card); color:var(--ink-2); border:1px solid var(--line-2); box-shadow:var(--sh); transition:opacity .25s ease, transform .25s ease}
.syncdot[data-state="idle"]{opacity:0; transform:translateY(6px); pointer-events:none}
.syncdot[data-state="saved"]{color:var(--mint); border-color:#BFE6D5}
.syncdot[data-state="retry"]{color:#9A6A15; border-color:#EBD9AE; background:var(--amber-tint,#FDF4E3)}
.syncdot[data-state="signedout"]{color:var(--rose); border-color:#F3C9D2; background:var(--rose-tint)}
@media (max-width:640px){ .syncdot{right:12px; bottom:12px} }

/* signed-in account chip, rendered by the app route */
.acctbar{margin:12px 0 0; padding-top:12px; border-top:1px solid var(--line)}
.acctbtn{display:flex; align-items:center; gap:9px; width:100%; border:1px solid var(--line-2); background:var(--card); border-radius:12px; padding:9px 11px; font:inherit; font-size:12.5px; font-weight:600; color:var(--ink-2); cursor:pointer; text-align:left}
.acctbtn:hover{border-color:var(--ink-3)}
.acctav{flex:none; width:24px; height:24px; border-radius:8px; background:var(--brand); color:#fff; display:grid; place-items:center; font-size:11.5px; font-weight:800}
.accttext{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.acctsite{display:block; margin-top:7px; text-align:center; border:1px solid var(--line-2); background:var(--card); border-radius:11px; padding:9px; font-size:12.5px; font-weight:700; color:var(--brand-600); text-decoration:none}
.acctsite:hover{background:var(--brand-tint)}
.acctout{margin-top:7px; width:100%; border:1px solid var(--line-2); background:var(--card); border-radius:11px; padding:9px; font:inherit; font-size:12.5px; font-weight:700; color:var(--rose); cursor:pointer}
.acctout:hover{background:var(--rose-tint)}
@media (max-width:960px){ .acctbar{margin:4px 16px 24px; border-top:0; padding-top:0} }

.accttext{display:flex; flex-direction:column; line-height:1.25}
.accttext b{font-weight:700; color:var(--ink)} .accttext small{font-size:11px; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis}

/* shown by ledger-sync.js only when the app failed to draw */
.loadfail{margin:24px; padding:20px 22px; border-radius:16px; background:#FDECEF; color:#7A1F35; font-size:14px; line-height:1.55; max-width:720px}
.loadfail b{font-size:16px; display:block; margin-bottom:6px} .loadfail p{margin:0 0 12px}
.loadfail pre{white-space:pre-wrap; word-break:break-word; background:#fff; border-radius:10px; padding:12px; font-size:12px; color:#333; max-height:220px; overflow:auto}
.loadfail button{margin-top:10px; font:inherit; font-weight:700; font-size:13px; padding:8px 14px; border-radius:10px; border:1px solid #E3B7C1; background:#fff; color:#7A1F35; cursor:pointer}


/* ---------- popups: usable on a phone ----------
   Three things go wrong on a small screen and each is handled here:
   the popup could scroll sideways; its buttons sat below the browser's own
   toolbar where they could not be reached; and dragging inside it scrolled
   the page behind instead of the popup itself. */
body.modal-open{overflow:hidden; overscroll-behavior:none}
.overlay{overscroll-behavior:contain}
.modal *{max-width:100%}
.modal .tblwrap,.modal pre{max-width:100%; overflow-x:auto}
/* the row of Cancel / Save buttons rides along the bottom of the popup, always in reach */
.mact{position:sticky; bottom:0; z-index:2; display:flex; gap:10px; align-items:center; justify-content:flex-end;
      flex-wrap:wrap; margin:20px -26px -26px; padding:14px 26px; background:var(--card);
      border-top:1px solid var(--line); border-radius:0 0 22px 22px}
.mact .hint{margin-right:auto}
@media (max-width:640px){
  .overlay{padding:10px}
  .modal{max-height:calc(100dvh - 20px); border-radius:18px}
  .mh{padding:16px 18px 10px; border-radius:18px 18px 0 0} .mb{padding:4px 18px 20px}
  .mact{margin:16px -18px -20px; padding:12px 18px calc(12px + env(safe-area-inset-bottom,0px)); border-radius:0 0 18px 18px}
  .mact .btn{flex:1 1 auto; justify-content:center}
  .mact .hint{flex:1 1 100%; margin:0 0 4px}
  .modal .seg{display:flex; width:100%}
  .modal .segbtn{flex:1 1 140px; justify-content:center; text-align:center; white-space:normal; min-width:0}
  .tierrow{grid-template-columns:auto minmax(0,1fr) auto 70px auto 32px; gap:6px}
  .tierrow .inp{padding-left:9px; padding-right:9px}
  /* a wide table stacks into one block per row rather than scrolling sideways */
  table.rowstack,table.rowstack tbody,table.rowstack tr,table.rowstack td{display:block; width:auto}
  table.rowstack thead{display:none}
  table.rowstack tr{padding:12px 2px; border-bottom:1px solid var(--line)}
  table.rowstack tr:last-child{border-bottom:0}
  table.rowstack td{display:flex; align-items:baseline; justify-content:space-between; gap:14px; text-align:right; padding:5px 0; border:0}
  table.rowstack td::before{content:attr(data-l); color:var(--ink-3); font-size:12.5px; font-weight:600; text-align:left; flex:0 0 auto}
  table.rowstack td[data-l=""]{justify-content:flex-end}
  table.rowstack td[data-l=""]::before{content:none}
  table.rowstack td > div{font-size:11.5px}
  /* nothing on a phone may push the page sideways */
  html{overflow-x:hidden}
  main{padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
}