/* Health Hub - DPT App Brand Kit v1.0.0, dark athlete-data surface.
   Tokens mirror dpt-app-tokens.css; consume semantic vars only. */

:root{
  --bg:#0D1117; --card:#1A222C; --card-2:#232E3A;
  --line:rgba(255,255,255,.10); --line-strong:rgba(255,255,255,.22);
  --text:#F2F5F7; --text-2:#98A6B3; --text-3:#6B7885;
  --accent:#00A651; --hot:#00E676; --link:#4ADE80; --deep-green:#00753C;
  --jon:#00B25C; --ken:#4C8DFF;
  --ok:#4ADE80; --warn:#FFA94D; --danger:#FF6B6B; --info:#6FB1FF;
  --score-low:#FF6B6B; --score-fair:#FFA94D; --score-optimal:#00E676;
  --glow-text:0 0 18px rgba(0,230,118,.40);
  --glow-ring:drop-shadow(0 0 10px rgba(0,230,118,.45));
  --font-display:'Oswald','Arial Narrow',Arial,sans-serif;
  --font-ui:'Hanken Grotesk','Segoe UI',system-ui,sans-serif;
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px;
  --ease:cubic-bezier(.2,.7,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{overflow-x:hidden}
body{
  background:var(--bg); color:var(--text); font-family:var(--font-ui);
  font-size:16px; line-height:1.55; min-height:100dvh; overflow-x:hidden;
}
body::before{content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(700px 380px at 80% -8%, rgba(0,230,118,.05), transparent 60%);}
button{font-family:var(--font-ui); cursor:pointer}
input,textarea,select{font-family:var(--font-ui)}
:focus-visible{outline:2px solid var(--link); outline-offset:2px; border-radius:var(--r-sm)}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
}

/* ---------- type ---------- */
.micro{font-family:var(--font-ui); font-weight:700; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3)}
.hero-num{font-family:var(--font-display); font-weight:600; font-variant-numeric:tabular-nums; line-height:1}
h1.hh{font-family:var(--font-display); font-weight:700; font-size:clamp(26px,5vw,32px)}
.h2{font-family:var(--font-display); font-weight:600; font-size:22px}

/* ---------- app frame ---------- */
#root{position:relative; z-index:1; max-width:560px; margin:0 auto; min-height:100dvh; display:flex; flex-direction:column}
main{flex:1; padding:12px 16px calc(96px + env(safe-area-inset-bottom))}
.view{display:none; animation:viewin .28s var(--ease)}
.view.on{display:block}
@keyframes viewin{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}

/* header */
.apphead{display:flex; align-items:center; justify-content:space-between; padding:16px 16px 4px}
.apphead .brand{font-family:var(--font-display); font-weight:700; font-size:17px; letter-spacing:.24em; text-transform:uppercase}
.apphead .brand i{color:var(--hot); font-style:normal}
.apphead .sub{font-family:var(--font-display); font-weight:500; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--text-2); margin-top:2px}
.avatar{
  width:38px;height:38px;border-radius:999px; display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display); font-weight:600; font-size:13px;
  background:rgba(0,230,118,.10); border:1.5px solid var(--accent); color:var(--link); position:relative;
}
.avatar .dot{position:absolute; top:-2px; right:-2px; width:11px; height:11px; border-radius:50%; background:var(--warn); border:2px solid var(--bg); display:none}
.avatar.unread .dot{display:block}

/* bottom nav */
nav.tabs{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  padding:10px 16px calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(to top, rgba(13,17,23,.97) 60%, transparent);
  display:flex; justify-content:center;
}
.tabs-inner{
  width:100%; max-width:560px; display:flex; justify-content:space-around; align-items:center;
  background:rgba(26,34,44,.92); border:1px solid var(--line); border-radius:var(--r-xl); padding:9px 6px;
  backdrop-filter:blur(14px);
}
.tabs button{
  background:none; border:0; color:var(--text-3); display:flex; flex-direction:column; align-items:center; gap:4px;
  font-weight:700; font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; padding:4px 8px; transition:color 150ms var(--ease);
  min-width:56px; min-height:44px; position:relative;
}
.tabs button svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tabs button.on{color:var(--hot)}
.tabs button .bdg[hidden]{display:none}
.tabs button .bdg{position:absolute; top:0; right:8px; min-width:15px; height:15px; border-radius:99px; background:var(--warn); color:#141A21; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; padding:0 4px}

/* ---------- cards ---------- */
.card{background:var(--card); border:1px solid rgba(255,255,255,.06); border-radius:var(--r-xl); padding:16px; margin-bottom:12px}
.card.tight{padding:13px 16px}
.card .cardhead{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px}

/* ---------- splash ---------- */
#splash{
  position:fixed; inset:0; z-index:100; background:var(--bg); display:none; flex-direction:column;
  align-items:center; justify-content:center; gap:18px; transition:opacity .5s var(--ease); text-align:center; padding:24px;
}
#splash.show{display:flex}
#splash.off{opacity:0; pointer-events:none}
#splash .mark{
  font-family:var(--font-display); font-weight:700; font-size:56px; letter-spacing:.18em; text-transform:uppercase;
  animation:markin 1s var(--ease) both;
}
#splash .mark i{color:var(--hot); font-style:normal; text-shadow:var(--glow-text)}
#splash .sdate{font-family:var(--font-display); font-weight:500; font-size:13px; letter-spacing:.3em; text-transform:uppercase; color:var(--text-2); animation:fadein .8s .35s var(--ease) both}
#splash .sgreet{font-size:17px; font-weight:300; color:var(--text); animation:fadein .8s .6s var(--ease) both}
#splash .squote{max-width:420px; font-size:13.5px; font-weight:300; color:var(--text-2); line-height:1.6; animation:fadein .8s .85s var(--ease) both}
#splash .hair{width:64px; height:2px; background:linear-gradient(90deg,transparent,var(--hot),transparent); animation:fadein .8s .5s var(--ease) both}
@keyframes markin{from{opacity:0; transform:scale(.94); letter-spacing:.4em}to{opacity:1; transform:none; letter-spacing:.18em}}
@keyframes fadein{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}

/* ---------- login ---------- */
#login{position:fixed; inset:0; z-index:90; background:var(--bg); display:none; align-items:center; justify-content:center; padding:24px}
#login.on{display:flex}
.login-card{width:100%; max-width:360px; text-align:center}
.login-card .mark{font-family:var(--font-display); font-weight:700; font-size:34px; letter-spacing:.2em; text-transform:uppercase; margin-bottom:6px}
.login-card .mark i{color:var(--hot); font-style:normal}
.login-card p{color:var(--text-2); font-size:14px; font-weight:300; margin-bottom:22px}
.pin-row{display:flex; gap:10px; justify-content:center; margin-bottom:14px}
.pin-dot{width:14px; height:14px; border-radius:50%; border:1.5px solid var(--line-strong); transition:120ms}
.pin-dot.fill{background:var(--hot); border-color:transparent}
.keypad{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; max-width:280px; margin:0 auto}
.keypad button{
  height:60px; border-radius:var(--r-lg); border:1px solid var(--line); background:var(--card); color:var(--text);
  font-family:var(--font-display); font-weight:500; font-size:22px; transition:120ms var(--ease);
}
.keypad button:active{background:var(--card-2); border-color:rgba(0,230,118,.4)}
.keypad button.ghost{background:none; border:none; font-size:14px; color:var(--text-3)}
.login-err{min-height:22px; color:var(--danger); font-size:13px; margin-top:12px}

/* ---------- overview ---------- */
.datebar{display:flex; align-items:center; justify-content:space-between; margin:2px 2px 12px}
.datebar .d{font-family:var(--font-display); font-weight:500; font-size:13px; letter-spacing:.22em; text-transform:uppercase; color:var(--text-2)}
.streak{
  display:inline-flex; align-items:center; gap:7px; padding:6px 13px; border-radius:999px;
  background:rgba(0,230,118,.10); border:1px solid rgba(0,230,118,.32);
  font-weight:700; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--hot);
}
.streak svg{width:12px;height:14px;fill:var(--hot)}

.battery-card{padding:14px 16px}
.batt{margin-top:10px}
.batt:first-child{margin-top:0}
.batt .toprow{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:7px}
.batt .lbl{font-size:13px; font-weight:500}
.batt .val{font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--text-2); font-variant-numeric:tabular-nums}
.batt .val b{color:var(--text); font-weight:600}
.batt-shell{display:flex; align-items:center; gap:5px}
.batt-body{flex:1; height:18px; border:1.5px solid var(--line-strong); border-radius:7px; padding:2.5px; display:flex; gap:3px}
.batt-cap{width:4px; height:9px; border-radius:0 3px 3px 0; background:var(--line-strong)}
.batt-seg{flex:1; border-radius:3px; background:rgba(255,255,255,.06); transition:background .4s var(--ease)}
.batt-seg.f-optimal{background:var(--score-optimal)}
.batt-seg.f-fair{background:var(--score-fair)}
.batt-seg.f-low{background:var(--score-low)}
.batt .meta{display:flex; justify-content:space-between; margin-top:6px; font-size:11.5px; color:var(--text-3); font-weight:300}
.statuschip{font-weight:700; font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; border-radius:999px; padding:3px 10px; display:inline-flex; align-items:center; gap:5px}
.statuschip::before{content:""; width:5px; height:5px; border-radius:50%; background:currentColor}
.statuschip.warn{color:var(--warn); border:1px solid rgba(255,169,77,.4); background:rgba(255,169,77,.12)}
.statuschip.ok{color:var(--ok); border:1px solid rgba(74,222,128,.4); background:rgba(74,222,128,.10)}
.statuschip.mut{color:var(--text-3); border:1px solid var(--line)}

.quote-card{position:relative; overflow:hidden}
.quote-card .q{font-size:16.5px; font-weight:300; line-height:1.6; color:var(--text)}
.quote-card .a{margin-top:10px; font-family:var(--font-display); font-weight:500; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--text-2)}
.quote-card .shuffle{position:absolute; top:12px; right:12px; width:34px; height:34px; border-radius:50%; border:1px solid var(--line); background:none; color:var(--text-3); display:flex; align-items:center; justify-content:center}
.quote-card .shuffle svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.scorecards{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px}
.scorecard{background:var(--card); border:1px solid rgba(255,255,255,.06); border-radius:var(--r-xl); padding:14px; cursor:pointer; transition:border-color 150ms}
.scorecard:active{border-color:rgba(0,230,118,.4)}
.scorecard .t{display:flex; align-items:center; gap:7px; margin-bottom:10px}
.scorecard .rings3{display:flex; justify-content:center}
.scorecard .rowline{display:flex; justify-content:space-between; font-size:11.5px; color:var(--text-3); margin-top:8px; font-weight:300}
.scorecard .rowline b{color:var(--text-2); font-weight:600; font-variant-numeric:tabular-nums}

.h2h .bar{height:9px; border-radius:99px; background:rgba(255,255,255,.06); overflow:hidden}
.h2h .bar i{display:block; height:100%; border-radius:99px; transition:width .8s var(--ease)}
.h2h .prow{margin-top:11px}
.h2h .ptop{display:flex; justify-content:space-between; align-items:center; margin-bottom:5px}
.h2h .pname{display:flex; align-items:center; gap:7px; font-family:var(--font-display); font-weight:500; font-size:12px; letter-spacing:.12em; text-transform:uppercase}
.h2h .ppts{font-family:var(--font-display); font-weight:600; font-size:17px; font-variant-numeric:tabular-nums}
.sdot{width:7px;height:7px;border-radius:50%;display:inline-block}
.leadline{margin-top:11px; text-align:center; font-size:12.5px; color:var(--text-2); font-weight:300}
.leadline b{color:var(--text); font-weight:600}

/* ---------- rings ---------- */
.ringwrap{position:relative}
.ringwrap .ctr{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; pointer-events:none}
.glowring{filter:var(--glow-ring)}
.bandword{font-family:var(--font-display); font-weight:500; font-size:10px; letter-spacing:.14em; text-transform:uppercase; display:inline-flex; align-items:center; gap:5px}
.bandword i{width:6px;height:6px;border-radius:50%;display:inline-block}

/* ---------- today ---------- */
/* week strip - how you get back to a day you missed */
.wstrip{display:flex; align-items:center; gap:4px; margin:2px 0 10px}
.wnav{flex:none; width:26px; height:48px; border:0; background:none; color:var(--text-3); font-size:20px; line-height:1; border-radius:var(--r-sm)}
.wnav:disabled{opacity:.22}
.wdays{flex:1; display:grid; grid-template-columns:repeat(7,1fr); gap:3px}
.wd{
  display:flex; flex-direction:column; align-items:center; gap:3px; cursor:pointer;
  padding:7px 0 7px; min-height:58px; border:1px solid transparent; border-radius:var(--r-md);
  background:var(--card); color:var(--text-2); transition:150ms var(--ease);
}
.wd .l{font-family:var(--font-ui); font-weight:700; font-size:9px; letter-spacing:.08em; color:var(--text-3)}
.wd .n{font-family:var(--font-display); font-weight:600; font-size:15px; line-height:1.1; font-variant-numeric:tabular-nums}
.wd .pip{width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.12)}
.wd .pip.some{background:var(--score-fair)}
.wd .pip.hit{background:var(--hot)}
.wd.on{border-color:var(--accent); background:var(--card-2); color:var(--text)}
.wd.on .l{color:var(--link)}
.wd.future{opacity:.3; cursor:default}
.daytally{text-align:center; font-size:12.5px; color:var(--text-3); margin:0 0 9px}
.daytally b{font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--text-2); font-variant-numeric:tabular-nums}
.daytally .back{color:var(--warn); font-weight:500}

.lane-seg{display:flex; background:var(--card); border:1px solid var(--line); border-radius:999px; padding:4px; margin-bottom:12px}
.lane-seg button{flex:1; border:0; border-radius:999px; padding:10px 0; background:none; color:var(--text-3); font-weight:700; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; transition:150ms var(--ease)}
.lane-seg button.on{background:var(--hot); color:#141A21}
.swiper{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:16px; scrollbar-width:none; margin:0 -16px; padding:0 16px}
.swiper::-webkit-scrollbar{display:none}
.lane{min-width:100%; scroll-snap-align:center; scroll-snap-stop:always}
.grouph{display:flex; align-items:baseline; justify-content:space-between; margin:18px 4px 9px}
.grouph .g{font-family:var(--font-display); font-weight:600; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-2)}
.grouph .c{font-family:var(--font-display); font-size:11px; color:var(--text-3); font-variant-numeric:tabular-nums}
.habit{
  display:flex; align-items:center; gap:13px; background:var(--card); border:1px solid rgba(255,255,255,.06);
  border-radius:var(--r-lg); padding:12px 13px; margin-bottom:7px; cursor:pointer; user-select:none;
  min-height:52px; position:relative; transition:border-color 150ms, opacity 150ms;
}
.habit:active{background:var(--card-2)}
.habit.done{border-color:rgba(0,230,118,.25)}
.habit.done .hname{color:var(--text-2)}
.chk{flex:none; width:30px; height:30px; border-radius:50%; border:1.6px solid rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center; transition:150ms var(--ease)}
.chk svg{width:15px;height:15px;stroke:#141A21;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.4);transition:150ms}
.habit.done .chk{background:var(--hot); border-color:transparent}
.habit.done .chk svg{opacity:1;transform:scale(1)}
.chk.multi{border-radius:9px; font-family:var(--font-display); font-weight:600; font-size:13px; color:var(--text-2)}
.habit.done .chk.multi{color:#141A21}
.hname{flex:1; font-size:14px; line-height:1.35}
.hname small{display:block; color:var(--text-3); font-size:11.5px; font-weight:300; line-height:1.4; margin-top:3px}
.hpts{flex:none; font-family:var(--font-display); font-weight:500; font-size:13px; color:var(--text-3); border:1px solid var(--line); border-radius:999px; padding:3px 10px; font-variant-numeric:tabular-nums; transition:150ms}
.habit.done .hpts{color:var(--link); border-color:rgba(0,230,118,.35)}
.fly{position:absolute; right:14px; top:4px; font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--hot); pointer-events:none; animation:fly 1s ease-out forwards; z-index:5}
@keyframes fly{0%{opacity:0; transform:translateY(6px)}18%{opacity:1}100%{opacity:0; transform:translateY(-32px)}}
.pop{animation:pop .35s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{0%{transform:scale(.6)}60%{transform:scale(1.15)}100%{transform:scale(1)}}

.qgrid{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.qcell{background:var(--card-2); border:1px solid rgba(255,255,255,.05); border-radius:var(--r-md); padding:10px 12px}
.qcell .k{font-weight:700; font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); margin-bottom:7px}
.stepper{display:flex; align-items:center; justify-content:space-between}
.stepper button{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:none;color:var(--text-2);font-size:16px;line-height:1}
.stepper .v{font-family:var(--font-display); font-weight:600; font-size:20px; font-variant-numeric:tabular-nums}
.stepper .v small{font-size:11px; color:var(--text-3); font-weight:400}
.chips{display:flex; gap:5px}
.chip{flex:1; text-align:center; font-weight:700; font-size:10px; letter-spacing:.06em; text-transform:uppercase; border:1px solid var(--line); border-radius:8px; padding:7px 2px; color:var(--text-3); cursor:pointer; transition:120ms; min-height:30px}
.chip.on{background:rgba(0,230,118,.14); border-color:rgba(0,230,118,.5); color:var(--hot)}
.note-in{width:100%; background:var(--card-2); border:1px solid rgba(255,255,255,.05); border-radius:var(--r-md); color:var(--text); font-weight:300; font-size:14px; padding:12px 13px; outline:none; margin-top:8px; min-height:48px}
.note-in::placeholder{color:var(--text-3)}
.savebar{display:flex; align-items:center; gap:10px; margin-top:10px; min-height:22px; font-size:12px; color:var(--text-3)}
.savebar .sdot2{width:7px;height:7px;border-radius:50%;background:var(--ok)}

/* ---------- goals ---------- */
.goal{padding:14px 16px}
.goal .gtop{display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:8px}
.goal .gname{font-size:14.5px; font-weight:500; line-height:1.35}
.goal .gmeta{font-size:11.5px; color:var(--text-3); font-weight:300; margin-top:3px}
.goal .bar{height:8px; border-radius:99px; background:rgba(255,255,255,.06); overflow:hidden; margin-top:9px}
.goal .bar i{display:block; height:100%; border-radius:99px; background:var(--accent); transition:width .7s var(--ease)}
.goal .gnums{display:flex; justify-content:space-between; margin-top:6px; font-size:11.5px; color:var(--text-3)}
.goal .gnums b{color:var(--text-2); font-weight:600; font-variant-numeric:tabular-nums}

/* ---------- reports ---------- */
.wbars{display:flex; align-items:stretch; gap:8px; height:130px; padding:4px 2px 0}
.wcol{flex:1; display:flex; flex-direction:column; align-items:center; gap:6px}
.wcol .p{font-family:var(--font-display); font-size:10.5px; color:var(--text-2); font-variant-numeric:tabular-nums}
.wbar{width:100%; max-width:26px; border-radius:8px; background:rgba(255,255,255,.07); position:relative; overflow:hidden; flex:1}
.wbar i{position:absolute; bottom:0; left:0; right:0; border-radius:8px; transition:height .7s var(--ease)}
.wcol .d{font-family:var(--font-display); font-size:9px; letter-spacing:.14em; color:var(--text-3); text-transform:uppercase}
.wcol.today .d{color:var(--hot)}
.trendline{width:100%; height:120px}
.exportrow{display:flex; gap:10px}
.btn{
  border:0; border-radius:999px; padding:13px 20px; font-weight:700; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
  background:var(--hot); color:#141A21; transition:150ms var(--ease); min-height:44px;
}
.btn.sec{background:rgba(255,255,255,.06); border:1.5px solid rgba(255,255,255,.28); color:var(--text)}
.btn:disabled{background:rgba(255,255,255,.08); color:var(--text-3); border:0}

/* ---------- account ---------- */
.acct-row{display:flex; align-items:center; gap:13px; padding:14px 4px; border-bottom:1px solid rgba(255,255,255,.06); cursor:pointer}
.acct-row:last-child{border-bottom:0}
.acct-row svg{width:19px;height:19px;stroke:var(--text-2);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.acct-row .n{flex:1; font-size:14.5px}
.acct-row .n small{display:block; font-size:11.5px; color:var(--text-3); font-weight:300; margin-top:1px}
.acct-row .chev{color:var(--text-3)}
.msg-thread{display:flex; flex-direction:column; gap:8px; max-height:340px; overflow-y:auto; padding:2px}
.msg{max-width:82%; border-radius:14px; padding:9px 13px; font-size:13.5px; font-weight:300; line-height:1.5}
.msg.me{align-self:flex-end; background:rgba(0,230,118,.14); border:1px solid rgba(0,230,118,.25)}
.msg.them{align-self:flex-start; background:var(--card-2); border:1px solid rgba(255,255,255,.05)}
.msg .who{font-weight:700; font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); margin-bottom:3px}
.msg.ping{border-style:dashed}
.msg-input{display:flex; gap:8px; margin-top:10px}
.msg-input input{flex:1; min-width:0; background:var(--card-2); border:1px solid rgba(255,255,255,.08); border-radius:999px; color:var(--text); padding:12px 16px; font-size:14px; outline:none; min-height:48px}
.msg-input button{flex:none}
.pingbtn{background:rgba(255,169,77,.14); border:1.5px solid rgba(255,169,77,.4); color:var(--warn)}
.filters{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px}
.editor-row{display:flex; align-items:center; gap:10px; padding:10px 2px; border-bottom:1px solid rgba(255,255,255,.05)}
.editor-row .n{flex:1; font-size:13.5px; line-height:1.3}
.editor-row .n small{color:var(--text-3); font-size:10.5px; display:block}
.mini-step{display:flex; align-items:center; gap:2px; background:var(--card-2); border:1px solid rgba(255,255,255,.06); border-radius:10px; padding:2px}
.mini-step button{width:30px;height:30px;border-radius:8px;border:0;background:none;color:var(--text-2);font-size:15px}
.mini-step .v{width:28px; text-align:center; font-family:var(--font-display); font-weight:600; font-size:15px}
.tog{width:40px; height:24px; border-radius:99px; background:rgba(255,255,255,.10); border:0; position:relative; transition:150ms; flex:none}
.tog::after{content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:var(--text-2); transition:150ms var(--ease)}
.tog.on{background:var(--accent)}
.tog.on::after{left:19px; background:#fff}

/* toast */
#toast{
  position:fixed; top:16px; left:50%; transform:translateX(-50%) translateY(-90px); z-index:120;
  background:var(--hot); color:#141A21; font-weight:700; font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  border-radius:999px; padding:11px 22px; transition:transform .35s cubic-bezier(.2,1.4,.4,1); max-width:90vw; text-align:center;
}
#toast.on{transform:translateX(-50%) translateY(0)}
#toast.err{background:var(--danger); color:#fff}

/* offline / mock ribbons */
.ribbon{text-align:center; font-weight:700; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; padding:5px; color:#141A21}
.ribbon.mock{background:var(--warn)}
.ribbon.offline{background:var(--danger); color:#fff}

/* ---------- print (Reports export) ---------- */
@media print{
  body{background:#fff; color:#141A21}
  body::before{display:none}
  .apphead,nav.tabs,.exportrow,#toast,.ribbon{display:none !important}
  .view{display:none}
  #view-reports{display:block !important}
  .card{border:1px solid #E4E7EA; background:#fff; break-inside:avoid}
  .micro,.grouph .g{color:#55606B}
  .wcol .p,.h2h .ppts,.leadline b{color:#141A21}
}