/* T-BIOMAX Ads Portal
   Colours and type taken from tagbiotech.com — navy and clinical blue, light theme only.
   Same calm structure as the HA'LABO portal: hairline borders, generous white space,
   one accent colour, uppercase letter-spaced micro-labels. */

:root{
  /* --- TAG Biotechnology corporate identity --- */
  --brand:#1C1F3E;          /* navy: buttons, active nav, brand */
  --brand-dark:#0D1B2B;     /* hover */
  --brand-soft:#ECF4FF;     /* pale blue fill */
  --cream:#F4F7FC;
  --sand:#C9D4E5;

  --accent:#1F8CE9;         /* clinical blue — links, highlights */
  --accent-dark:#176BE0;

  --bg:#FAFBFD;             /* page */
  --card:#FFFFFF;           /* surfaces */
  --ink:#1D1E20;            /* body text */
  --ink-soft:#55606E;       /* secondary text */
  --line:#E2E8F2;           /* hairline borders */

  /* status — cooled to sit with the navy, all AA on white */
  --good:#1F7A4D;  --good-bg:#EAF5EF;
  --warn:#B26A00;  --warn-bg:#FDF2E3;
  --bad:#C0392B;   --bad-bg:#FBEDEB;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  --radius:10px; --radius-sm:6px;
  --speed:180ms;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.6 Inter,-apple-system,"Segoe UI",Arial,sans-serif;
}
/* headings carry the site's display face; body stays on Inter */
h1,h2,h3,.vsnum,.stat .v{font-family:"DM Sans",Inter,-apple-system,"Segoe UI",Arial,sans-serif}
a{color:var(--accent)}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--brand); outline-offset:3px; border-radius:var(--radius-sm)}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
}

/* micro-label, as used across halabohair.com */
.k,.eyebrow,th{
  font-size:11px; letter-spacing:1.4px; text-transform:uppercase;
  color:var(--ink-soft); font-weight:700;
}

/* ---------- header ---------- */
.topbar{
  display:flex; align-items:center; gap:var(--s5); flex-wrap:wrap;
  background:var(--card); border-bottom:1px solid var(--line);
  padding:var(--s3) var(--s6);
}
.brand{font-weight:700; letter-spacing:2px; color:var(--brand); font-size:16px}
.brand span{
  display:block; color:var(--ink-soft); font-weight:400;
  font-size:10px; letter-spacing:1.4px; text-transform:uppercase; margin-top:2px;
}
.topbar nav{display:flex; gap:var(--s1); flex:1; flex-wrap:wrap}
.topbar nav a{
  display:flex; align-items:center; min-height:44px; padding:0 var(--s4);
  border-radius:var(--radius-sm); color:var(--ink); text-decoration:none;
  font-size:12px; letter-spacing:1.2px; text-transform:uppercase; font-weight:700;
  transition:background var(--speed) ease, color var(--speed) ease;
}
.topbar nav a:hover{background:var(--cream); text-decoration:none}
.topbar nav a.on{background:var(--brand); color:#fff}
.who{font-size:13px; color:var(--ink-soft); display:flex; align-items:center; gap:var(--s4)}
.who small{display:block; font-size:11px; color:var(--ink-soft)}
.who .out{min-height:44px; display:flex; align-items:center; font-size:12px;
  letter-spacing:1px; text-transform:uppercase; font-weight:700}

.wrap{max-width:1080px; margin:0 auto; padding:var(--s6) var(--s5) var(--s7)}
.foot{text-align:center; color:var(--ink-soft); font-size:12px; padding:0 var(--s4) var(--s6)}

h1{font-size:26px; line-height:1.25; margin:0 0 var(--s2); letter-spacing:-.2px}
h2{
  font-size:13px; letter-spacing:1.6px; text-transform:uppercase; font-weight:700;
  color:var(--ink); margin:var(--s7) 0 var(--s2);
  display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap;
}
h3{font-size:16px; line-height:1.4; margin:0}
.sub{color:var(--ink-soft); font-size:14px; margin:0 0 var(--s5); max-width:70ch}

/* ---------- headline numbers ---------- */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:var(--s4)}
.stat{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s5)}
.stat .v{
  font-size:32px; line-height:1.1; font-weight:700; margin-top:var(--s2);
  font-variant-numeric:tabular-nums; letter-spacing:-.5px;
}
.stat .d{font-size:12px; color:var(--ink-soft); margin-top:var(--s2); line-height:1.5}
.v.good{color:var(--good)} .v.bad{color:var(--bad)} .v.warn{color:var(--warn)}

.panel{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:var(--s5); margin-top:var(--s3)}

/* ---------- tables ---------- */
.scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
table{width:100%; border-collapse:collapse; font-size:14px; min-width:520px}
th,td{text-align:left; padding:var(--s3) var(--s3); border-bottom:1px solid var(--line)}
th{background:var(--card)}
tr:last-child td{border-bottom:0}
.num{text-align:right; font-variant-numeric:tabular-nums}
.over{color:var(--bad); font-weight:700}
.under{color:var(--good); font-weight:700}

/* ---------- the two big actions ---------- */
.bigactions{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:var(--s4); margin:var(--s5) 0 var(--s6)}
.bigbtn{
  display:flex; align-items:center; gap:var(--s4); min-height:92px;
  padding:var(--s5); border-radius:var(--radius); border:1px solid var(--line);
  background:var(--card); color:var(--ink); text-decoration:none;
  transition:border-color var(--speed) ease, background var(--speed) ease;
}
.bigbtn:hover{text-decoration:none; border-color:var(--brand); background:var(--cream)}
.bigbtn .ico{flex:none; width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--brand); color:#fff}
.bigbtn.fix .ico{background:var(--card); color:var(--brand); border:1px solid var(--brand)}
.bigbtn .ico svg{width:22px; height:22px}
.bigbtn strong{display:block; font-size:16px; font-weight:700}
.bigbtn small{display:block; color:var(--ink-soft); font-size:13px; margin-top:3px}

/* ---------- ads grouped by account ---------- */
.acctgroup{margin-bottom:var(--s6)}
.accthead{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--s4);
  flex-wrap:wrap; padding:0 var(--s1) var(--s3);
  border-bottom:2px solid var(--brand); margin-bottom:var(--s3);
}
.accthead h3{margin:0; font-size:15px; letter-spacing:.6px; text-transform:uppercase;
  color:var(--brand); font-weight:700}
.acctsum{display:flex; align-items:center; gap:var(--s4); flex-wrap:wrap;
  font-size:12px; color:var(--ink-soft)}
.acctsum .over{color:var(--bad); font-weight:700}
.acctsum .under{color:var(--good); font-weight:700}

/* ---------- ad list ---------- */
.adlist{display:flex; flex-direction:column; gap:var(--s3)}
.adrow{
  display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1.5fr) auto;
  gap:var(--s5); align-items:center;
  background:var(--card); border:1px solid var(--line); border-left:4px solid var(--sand);
  border-radius:var(--radius); padding:var(--s5);
}
.adrow.v-pause{border-left-color:var(--bad)}
.adrow.v-watch{border-left-color:var(--warn)}
.adrow.v-keep {border-left-color:var(--good)}
.admain h3{margin:0 0 var(--s1); font-size:15px; overflow-wrap:anywhere}
.admeta{margin:0 0 var(--s3); font-size:12px; color:var(--ink-soft); overflow-wrap:anywhere}
.admain .why{margin:var(--s3) 0 0; font-size:13px; color:var(--ink-soft); line-height:1.55}
.adnums{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s3)}
.adnums .k{display:block; margin-bottom:var(--s1)}
.adnums .n{display:block; font-size:18px; font-weight:700; font-variant-numeric:tabular-nums}
.adnums .n.over{color:var(--bad)} .adnums .n.under{color:var(--good)}
.adcta .btn{display:inline-flex; align-items:center; white-space:nowrap}

/* ---------- suggestions ---------- */
.sugg{background:var(--card); border:1px solid var(--line); border-left:4px solid var(--brand);
  border-radius:var(--radius); padding:var(--s5); margin-bottom:var(--s3)}
.sugg h3{margin:0 0 var(--s3); display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap}
.sugg .why{color:var(--ink-soft); font-size:14px; margin:var(--s3) 0 0}
.sugg .impact{display:inline-block; margin-top:var(--s3); font-size:12px; font-weight:700;
  background:var(--brand-soft); color:var(--brand-dark);
  padding:var(--s1) var(--s3); border-radius:999px}
.actions{margin-top:var(--s4); display:flex; gap:var(--s2); align-items:center; flex-wrap:wrap}
.pendingnote{font-size:13px; color:var(--ink-soft); margin:var(--s3) 0 0}

/* ---------- buttons: HA'LABO style ---------- */
button,.btn{
  font:inherit; font-size:12px; letter-spacing:1.2px; text-transform:uppercase; font-weight:700;
  min-height:44px; padding:0 var(--s5);
  border:1px solid var(--line); background:var(--card); color:var(--ink);
  border-radius:var(--radius-sm); cursor:pointer; text-decoration:none;
  transition:background var(--speed) ease, border-color var(--speed) ease, color var(--speed) ease;
}
button:hover,.btn:hover{background:var(--cream); text-decoration:none}
button:disabled{opacity:.45; cursor:not-allowed}
.btn-primary{background:var(--brand); border-color:var(--brand); color:#fff}
.btn-primary:hover{background:var(--brand-dark); border-color:var(--brand-dark); color:#fff}
.btn-allow{background:var(--good); border-color:var(--good); color:#fff}
.btn-allow:hover{background:#33573F; border-color:#33573F; color:#fff}
.btn-no{background:var(--card); border-color:var(--bad); color:var(--bad)}
.btn-no:hover{background:var(--bad-bg)}
.btn-cmd{background:var(--card); border-color:var(--brand); color:var(--brand)}
.btn-cmd:hover{background:var(--cream)}

/* ---------- forms ---------- */
input[type=text],input[type=email],input[type=password],select,textarea{
  font:inherit; width:100%; min-height:46px; padding:var(--s3) var(--s4);
  border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--card); color:var(--ink);
}
input::placeholder,textarea::placeholder{color:#9A948E}
textarea{min-height:110px; resize:vertical; line-height:1.6}
label{display:block; font-size:11px; letter-spacing:1.2px; text-transform:uppercase;
  font-weight:700; color:var(--ink); margin:var(--s5) 0 var(--s2)}
.hint{font-size:13px; color:var(--ink-soft); margin-top:var(--s2); line-height:1.5}
.grid-form{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:0 var(--s5)}
input[type=file]{font:inherit; width:100%; padding:var(--s4);
  border:1px dashed var(--sand); border-radius:var(--radius-sm);
  background:var(--cream); color:var(--ink)}

.choice{display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:var(--s3)}
.pick{
  display:flex; gap:var(--s3); align-items:flex-start; margin:0 0 var(--s3);
  padding:var(--s4); border:1px solid var(--line); border-radius:var(--radius);
  cursor:pointer; font-weight:400; font-size:14px; text-transform:none; letter-spacing:0;
  transition:border-color var(--speed) ease, background var(--speed) ease;
}
.pick:hover{background:var(--cream)}
.pick input{width:20px; height:20px; min-height:0; flex:none; margin-top:3px; accent-color:var(--brand)}
.pick:has(input:checked){border-color:var(--brand); background:var(--cream)}
.pick strong{font-size:15px}
.pick small{color:var(--ink-soft); line-height:1.5}
.adpick{align-items:center}
.adpick .badge{margin-left:var(--s2)}
.pick small .over{color:var(--bad)}
.pick small .under{color:var(--good)}
.pick small strong{font-size:14px}
.flash a{color:inherit; text-decoration:underline}

/* ---------- status chips: icon + word, never colour alone ---------- */
.badge{
  display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700;
  letter-spacing:.8px; text-transform:uppercase;
  padding:5px var(--s3); border-radius:999px; border:1px solid transparent;
}
.badge svg{width:13px; height:13px; flex:none}
.b-pending  {background:var(--warn-bg); color:var(--warn); border-color:#EADFC6}
.b-allowed  {background:var(--good-bg); color:var(--good); border-color:#D7E5DC}
.b-executed {background:var(--brand-soft); color:var(--brand-dark); border-color:#DED3C7}
.b-rejected {background:var(--bad-bg);  color:var(--bad);  border-color:#EFD8D4}
.b-commanded{background:var(--brand-soft); color:var(--brand-dark); border-color:#DED3C7}
.b-failed   {background:var(--bad-bg);  color:var(--bad);  border-color:#EFD8D4}

.flash{
  display:flex; align-items:flex-start; gap:var(--s3);
  padding:var(--s4); border-radius:var(--radius-sm);
  margin-bottom:var(--s5); font-size:14px; border:1px solid;
}
.flash svg{width:18px; height:18px; flex:none; margin-top:2px}
.flash.ok  {background:var(--good-bg); color:var(--good); border-color:#D7E5DC}
.flash.err {background:var(--bad-bg);  color:var(--bad);  border-color:#EFD8D4}
.flash.info{background:var(--cream);   color:var(--brand-dark); border-color:var(--line)}

/* ---------- sign in ---------- */
.login{max-width:400px; margin:9vh auto; background:var(--card);
  border:1px solid var(--line); border-radius:var(--radius); padding:var(--s7) var(--s6)}
.login h1{text-align:center; color:var(--brand); font-size:24px; letter-spacing:3px}
.login .sub{text-align:center; font-size:12px; letter-spacing:1.4px; text-transform:uppercase}
.login button{width:100%; margin-top:var(--s5)}

/* ---------- chat ---------- */
.msg{padding:var(--s4); border-radius:var(--radius); margin-bottom:var(--s3);
  max-width:76%; font-size:15px; border:1px solid var(--line); line-height:1.6}
.msg.user{background:var(--brand); color:#fff; border-color:var(--brand);
  margin-left:auto; border-bottom-right-radius:2px}
.msg.assistant{background:var(--cream); border-bottom-left-radius:2px}
.msg .meta{font-size:11px; opacity:.85; margin-top:var(--s2)}

.empty{text-align:center; color:var(--ink-soft); padding:var(--s7) var(--s4)}

/* ---------- today vs yesterday ---------- */
.vspanel{
  display:grid; grid-template-columns:1fr auto 1fr; gap:var(--s4); align-items:center;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:var(--s5) var(--s6); margin-bottom:var(--s4);
}
.vsside{display:flex; flex-direction:column}
.livedot{display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--good); margin-left:var(--s2); vertical-align:middle;
  animation:pulse 2.4s ease-in-out infinite}
.livedot.stale{background:var(--warn); animation:none}
.liveword{font-size:10px; letter-spacing:.6px; text-transform:none;
  color:var(--ink-soft); font-weight:400; margin-left:4px}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion: reduce){ .livedot{animation:none} }
.vsside.muted{opacity:.78}
.vsnum{font-size:46px; line-height:1; font-weight:700; letter-spacing:-1.5px;
  font-variant-numeric:tabular-nums; margin-top:var(--s2)}
.vsside.muted .vsnum{font-size:38px}
.vsunit{font-size:12px; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--ink-soft); font-weight:700; margin-top:var(--s1)}
.vsside .gnote{margin-top:var(--s3)}
.vsmid{display:flex; flex-direction:column; align-items:center; gap:var(--s1);
  text-align:center; padding:0 var(--s3); border-left:1px solid var(--line);
  border-right:1px solid var(--line); align-self:stretch; justify-content:center; min-width:110px}
.vsword{font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--ink-soft)}
.vsmid .growth{font-size:17px}
.vsmid .gnote{max-width:110px}

@media (max-width:700px){
  .vspanel{grid-template-columns:1fr; gap:var(--s3); padding:var(--s5)}
  .vsmid{flex-direction:row; gap:var(--s3); border:0; border-top:1px solid var(--line);
    border-bottom:1px solid var(--line); padding:var(--s3) 0; min-width:0}
  .vsmid .gnote{max-width:none}
  .vsnum,.vsside.muted .vsnum{font-size:36px}
}

.convertbar{display:flex; align-items:center; gap:var(--s5); flex-wrap:wrap}
.managebtn{min-width:150px; justify-content:center; display:inline-flex; align-items:center}
@media (max-width:820px){ .managebtn{width:100%} }

/* ---------- CONVERT ---------- */
.daybar{display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:var(--s4) var(--s5); margin-bottom:var(--s4)}
.daybar label{margin:0}
.daybar input[type=date]{width:auto; min-width:170px}

.lead{display:grid; grid-template-columns:minmax(0,1fr) minmax(230px,300px); gap:var(--s5);
  background:var(--card); border:1px solid var(--line); border-left:4px solid var(--good);
  border-radius:var(--radius); padding:var(--s5); margin-bottom:var(--s3)}
.lead.urgent{border-left-color:var(--bad); background:#FFFDFD}
.leadmain h3{margin:0 0 var(--s2); font-size:16px; display:flex; align-items:center;
  gap:var(--s2); flex-wrap:wrap}
.leadmeta{margin:0; font-size:12px; color:var(--ink-soft); overflow-wrap:anywhere}
.leadsaid{margin:var(--s3) 0 0; font-size:14px; font-style:italic; color:var(--ink)}
.leadremark{margin:var(--s3) 0 0; font-size:13px; color:var(--ink-soft);
  background:var(--cream); border-radius:var(--radius-sm); padding:var(--s2) var(--s3)}
.leadremark svg{width:13px; height:13px; vertical-align:-2px}
.leadact{display:flex; flex-direction:column; gap:var(--s3)}
.leadact .btn{justify-content:center; text-align:center}
.leadact details summary{cursor:pointer; font-size:12px; letter-spacing:1px;
  text-transform:uppercase; font-weight:700; color:var(--brand); padding:var(--s2) 0}
.leadact textarea{min-height:64px; font-size:14px}
.leadact label{margin-top:var(--s2)}
.outcomes{display:flex; gap:var(--s2); flex-wrap:wrap; margin-top:var(--s3)}
.outcomes button{flex:1; min-width:96px; padding:0 var(--s3); font-size:11px}

.note{display:flex; gap:var(--s4); background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:var(--s4) var(--s5); margin-bottom:var(--s2)}
.note.unread{border-left:4px solid var(--brand); background:var(--cream)}
.note p{margin:var(--s1) 0 0; font-size:14px}
.noteicon{flex:none; color:var(--brand)}
.noteicon svg{width:20px; height:20px}

.bell{position:relative; display:inline-flex; align-items:center}
.bellcount{background:var(--bad); color:#fff; border-radius:999px; font-size:10px;
  font-weight:700; padding:1px 6px; margin-left:5px}

@media (max-width:820px){
  .lead{grid-template-columns:1fr}
  .leadact{flex-direction:row; flex-wrap:wrap}
  .leadact .btn{flex:1}
  .leadact details{width:100%}
}

/* ---------- the goal strip ---------- */
.goalbar{background:var(--cream); border:1px solid var(--line);
  border-radius:var(--radius); padding:var(--s5); margin-top:var(--s5)}
.goalhead strong{display:block; font-size:16px; margin:var(--s2) 0 var(--s1)}
.goalnote{font-size:13px; color:var(--ink-soft)}
.goalgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:var(--s4); margin-top:var(--s5)}
.goalitem{background:var(--card); border:1px solid var(--line);
  border-left:4px solid var(--sand); border-radius:var(--radius); padding:var(--s4)}
.goalitem.hit{border-left-color:var(--good)}
.goalitem.miss{border-left-color:var(--warn)}
.goalitem .bar{height:6px; background:var(--brand-soft); border-radius:99px;
  overflow:hidden; margin:var(--s2) 0}
.goalitem .bar span{display:block; height:100%; background:var(--brand); border-radius:99px}
.gv{display:block; font-size:26px; font-weight:700; font-variant-numeric:tabular-nums;
  margin:var(--s1) 0; letter-spacing:-.4px}
.gnote{display:block; font-size:12px; color:var(--ink-soft); line-height:1.5}

/* ---------- period tabs ---------- */
.tabs{display:flex; gap:var(--s2); flex-wrap:wrap; margin-bottom:var(--s3)}
.tab{display:inline-flex; align-items:center; min-height:40px; padding:0 var(--s4);
  border:1px solid var(--line); border-radius:999px; background:var(--card);
  color:var(--ink); font-size:11px; letter-spacing:1.2px; text-transform:uppercase;
  font-weight:700; text-decoration:none}
.tab:hover{background:var(--cream); text-decoration:none}
.tab.on{background:var(--brand); border-color:var(--brand); color:#fff}

/* ---------- chart ---------- */
.chart{margin:0}
.chart svg{width:100%; height:auto; display:block; overflow:visible}
.chartlegend{display:flex; gap:var(--s5); flex-wrap:wrap; margin-bottom:var(--s4)}
.chartlegend .lg{display:inline-flex; align-items:center; gap:var(--s2);
  font-size:12px; color:var(--ink-soft)}
.sw{width:16px; height:3px; border-radius:2px; display:inline-block}
.sw-bar{background:var(--brand); height:12px; width:10px; border-radius:2px}
.sw-line{background:var(--bad)}
.sw-target{background:transparent; border-top:2px dashed var(--good); height:0}
.chart .grid{stroke:var(--line); stroke-width:1}
.chart .bar{fill:var(--brand); opacity:.85}
.chart .bar:hover{opacity:1}
.chart .line{fill:none; stroke:var(--bad); stroke-width:2.5;
  stroke-linejoin:round; stroke-linecap:round}
.chart .dot{stroke:#fff; stroke-width:2}
.chart .dot.over{fill:var(--bad)}
.chart .dot.under{fill:var(--good)}
.chart .targetline{stroke:var(--good); stroke-width:2; stroke-dasharray:5 4}
.chart .goalline{stroke:var(--brand); stroke-width:1.5; stroke-dasharray:2 4; opacity:.7}
.chart .axis{font-size:11px; fill:var(--ink-soft); font-family:Arial,sans-serif}
.chart .axis.end{text-anchor:end}
.chart .axis.mid{text-anchor:middle}
.chart .axis.goal{fill:var(--brand); font-weight:700}

/* ---------- growth row ---------- */
.growthgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:var(--s4); margin-top:var(--s5); padding-top:var(--s5); border-top:1px solid var(--line)}
.growth{display:inline-block; font-size:13px; font-weight:700}
.growth.up{color:var(--good)}
.growth.down{color:var(--bad)}
.growth.flat{color:var(--ink-soft); font-weight:400}

/* nav drops to its own row before it starts to crowd the name */
@media (max-width:960px){
  .topbar{gap:var(--s3) var(--s4); padding:var(--s3) var(--s5)}
  .brand{flex:1}
  .topbar nav{order:3; width:100%; flex:none;
    border-top:1px solid var(--line); padding-top:var(--s2)}
  .topbar nav a{padding:0 var(--s3)}
  .who{order:2}
}
@media (max-width:860px){
  .adrow{grid-template-columns:1fr; align-items:start; gap:var(--s4)}
  .adnums{grid-template-columns:repeat(2,1fr); gap:var(--s4)}
  .adcta,.adcta .btn{width:100%; justify-content:center}
}
@media (max-width:640px){
  .topbar{padding:var(--s3) var(--s4)}
  .wrap{padding:var(--s5) var(--s4) var(--s6)}
  .cards{grid-template-columns:1fr 1fr; gap:var(--s3)}
  .stat{padding:var(--s4)}
  .stat .v{font-size:26px}
  .msg{max-width:92%}
  h1{font-size:22px}
}

/* checkbox that reads as a sentence, not a bare box */
.tick{display:flex; align-items:center; gap:10px; font-weight:400;
      color:var(--ink); cursor:pointer; min-height:44px}
.tick input{width:18px; height:18px; accent-color:var(--brand); flex:none; cursor:pointer}

/* freshness stamp + manual refresh, inside the today-vs-yesterday panel */
.vsfoot{grid-column:1/-1; display:flex; align-items:center; justify-content:space-between;
  gap:var(--s3); flex-wrap:wrap; margin-top:var(--s4);
  padding-top:var(--s3); border-top:1px solid var(--line)}
.syncstamp{display:inline-flex; align-items:center; gap:7px;
  font-size:12px; color:var(--ink-soft); line-height:1.4}
.syncstamp svg{width:15px; height:15px; flex:none}
.syncstamp.stale{color:var(--warn); font-weight:600}
.refreshform{margin:0}
.refreshform button{min-height:40px; white-space:nowrap}
.refreshform button[disabled]{opacity:.6; cursor:progress}
@media (max-width:700px){
  .vsfoot{flex-direction:column; align-items:stretch}
  .refreshform button{width:100%}
}