/* ==========================================================================
   Recall Radar — console design system
   Layer order: tokens → primitives → components → views → responsive (LAST).
   Responsive must stay at the bottom: equal-specificity base rules declared
   later would otherwise win the cascade.
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */
:root{
  /* surfaces — a graded ramp, not flat black; depth reads as quality */
  --s0:#080a0f; --s1:#0d1017; --s2:#121722; --s3:#18202e; --s4:#1f2937;
  --line:#1e2735; --line2:#2b3648; --line3:#3a4761;

  --ink:#eef2f8; --ink2:#c2ccdb; --muted:#8593a8; --dim:#5b6980;

  --brand:#4cc2ff; --brand2:#1d9bdb; --brand-ink:#04121b;
  --brand-glow:rgba(76,194,255,.16);

  --crit:#ff5566; --high:#ffab45; --med:#43d7a5; --info:#4cc2ff;
  --crit-bg:rgba(255,85,102,.11); --high-bg:rgba(255,171,69,.11);
  --med-bg:rgba(67,215,165,.11); --info-bg:rgba(76,194,255,.11);

  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;

  --r-sm:7px; --r:10px; --r-lg:14px; --r-xl:20px;
  --sh:0 1px 2px rgba(0,0,0,.4),0 10px 30px -18px rgba(0,0,0,.9);
  --sh-lg:0 4px 12px rgba(0,0,0,.5),0 24px 60px -24px rgba(0,0,0,.95);

  /* 4px rhythm */
  --sp1:4px; --sp2:8px; --sp3:12px; --sp4:16px; --sp5:24px; --sp6:32px; --sp7:48px;
}

/* -------------------------------------------------------------- primitives */
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;padding:0;background:var(--s0);color:var(--ink)}
body{font:15px/1.55 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit;cursor:pointer;color:inherit}
input,select,textarea{font:inherit}
h1,h2,h3,h4{margin:0;line-height:1.25;letter-spacing:-.015em}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line2);border-radius:10px;border:2px solid var(--s0)}
::-webkit-scrollbar-thumb:hover{background:var(--line3)}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}

.mono{font-family:var(--mono)}
.eyebrow{font:10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.spacer{flex:1}

/* ------------------------------------------------------------------ buttons */
.btn{
  display:inline-flex;align-items:center;gap:7px;background:var(--brand);color:var(--brand-ink);
  border:1px solid transparent;padding:9px 16px;border-radius:var(--r-sm);font-size:13.5px;font-weight:650;
  transition:filter .14s,transform .06s;white-space:nowrap
}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.45;pointer-events:none}
.btn.ghost{background:transparent;border-color:var(--line2);color:var(--ink2)}
.btn.ghost:hover{border-color:var(--line3);background:var(--s2);filter:none}
.btn.danger{background:var(--crit);color:#fff}
.btn.sm{padding:6px 11px;font-size:12.5px}
.iconbtn{
  background:transparent;border:1px solid var(--line2);color:var(--muted);
  min-width:34px;height:34px;border-radius:var(--r-sm);display:inline-grid;place-items:center;padding:0 9px
}
.iconbtn:hover{color:var(--ink);border-color:var(--line3);background:var(--s2)}
.linkbtn{background:none;border:0;color:var(--brand);padding:0;font-size:13px;text-decoration:underline}

/* ------------------------------------------------------------------- inputs */
.inp{
  background:var(--s1);border:1px solid var(--line2);color:var(--ink);
  padding:9px 13px;border-radius:var(--r-sm);font-size:13.5px;width:100%;min-width:0;
  transition:border-color .14s,box-shadow .14s
}
.inp::placeholder{color:var(--dim)}
.inp:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-glow)}
textarea.inp{resize:vertical;font-family:var(--mono);font-size:12.5px;line-height:1.6}
select.inp{cursor:pointer}

/* -------------------------------------------------------------------- chips */
.tag{
  display:inline-flex;align-items:center;font:9.5px/1 var(--mono);letter-spacing:.09em;
  padding:4px 7px;border-radius:4px;text-transform:uppercase;font-weight:700;white-space:nowrap
}
.tag.crit{background:var(--crit-bg);color:var(--crit)}
.tag.high{background:var(--high-bg);color:var(--high)}
.tag.med{background:var(--med-bg);color:var(--med)}
.tag.info{background:var(--info-bg);color:var(--info)}
.tag.src{background:var(--s3);color:var(--muted)}
.fchip{
  background:var(--s1);border:1px solid var(--line);color:var(--muted);
  padding:7px 13px;border-radius:99px;font-size:12.5px;font-weight:600;transition:all .14s
}
.fchip:hover{border-color:var(--line3);color:var(--ink2)}
.fchip.on{background:var(--brand-glow);border-color:var(--brand);color:var(--brand)}

/* ------------------------------------------------------------------- panels */
.panel{background:var(--s1);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;display:flex;flex-direction:column;min-height:0;box-shadow:var(--sh)}
.panel-h{
  display:flex;align-items:center;gap:10px;padding:11px 15px;border-bottom:1px solid var(--line);
  font:10.5px/1 var(--mono);letter-spacing:.13em;color:var(--muted);text-transform:uppercase;flex:none;
  background:linear-gradient(180deg,var(--s2),var(--s1))
}
.panel-h .live{color:var(--crit);display:flex;align-items:center;gap:5px}
.panel-h .live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--crit);animation:pulse 1.5s infinite}
.panel-b{padding:var(--sp4)}

@keyframes pulse{50%{opacity:.25}}
@keyframes ping{0%{transform:scale(.4);opacity:.8}100%{transform:scale(1.75);opacity:0}}
@keyframes sp{to{transform:rotate(1turn)}}
.spin{width:14px;height:14px;border:2px solid var(--line2);border-top-color:var(--brand);border-radius:50%;
  animation:sp .7s linear infinite;flex:none;display:inline-block}

/* ==========================================================================
   APP FRAME
   ========================================================================== */
.app{display:grid;grid-template-rows:auto 1fr;height:100vh;height:100dvh}

.topbar{
  display:flex;align-items:center;gap:var(--sp4);padding:0 var(--sp4);height:56px;
  background:linear-gradient(180deg,var(--s3),var(--s1));border-bottom:1px solid var(--line);
  position:relative;z-index:40
}
.brand{display:flex;align-items:center;gap:9px;font-weight:750;font-size:14px;letter-spacing:.04em;flex:none}
.blip{width:9px;height:9px;border-radius:50%;background:var(--crit);position:relative;flex:none}
.blip::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1.5px solid var(--crit);opacity:.55;animation:ping 2.4s ease-out infinite}
.pro-tag{font:9px/1 var(--mono);letter-spacing:.13em;padding:4px 7px;border-radius:4px;
  background:var(--brand);color:var(--brand-ink);font-weight:800;flex:none}

.navtabs{display:flex;gap:2px}
.navtab{
  background:none;border:0;color:var(--muted);padding:8px 13px;border-radius:var(--r-sm);
  font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:7px;white-space:nowrap;transition:all .14s
}
.navtab:hover{color:var(--ink);background:var(--s2)}
.navtab.on{background:var(--brand-glow);color:var(--brand)}
.navtab .n{font:10.5px/1 var(--mono);background:var(--crit);color:#fff;padding:3px 5px;border-radius:99px;font-weight:700}
.navtab .n.warn{background:var(--high);color:#241703}

.sync{display:flex;align-items:center;gap:9px;font:11px/1 var(--mono);color:var(--muted);white-space:nowrap}
.dot{width:7px;height:7px;border-radius:50%;background:var(--med);box-shadow:0 0 9px var(--med);flex:none}
.dot.busy{background:var(--brand);box-shadow:0 0 9px var(--brand);animation:pulse 1s infinite}
.dot.err{background:var(--crit);box-shadow:0 0 9px var(--crit)}

.view{overflow:auto;height:100%}
.wrap{max-width:1240px;margin:0 auto;padding:var(--sp5) var(--sp4) var(--sp7)}
.wrap.narrow{max-width:840px}

.pagehead{display:flex;align-items:flex-end;gap:var(--sp4);margin-bottom:var(--sp5);flex-wrap:wrap}
.pagehead h2{font-size:22px}
.pagehead .lede{color:var(--muted);font-size:14px;margin-top:5px;max-width:640px}

/* ==========================================================================
   RADAR
   ========================================================================== */
#view-radar{overflow:hidden}
.radar-grid{display:grid;grid-template-columns:1fr 386px;gap:var(--sp3);padding:var(--sp3);height:100%;min-height:0}
.radar-grid>*{min-height:0}

.mapwrap{position:relative;flex:1;min-height:0;
  background:radial-gradient(ellipse at 50% 42%,rgba(76,194,255,.07),transparent 64%),var(--s0)}
#worldmap{position:absolute;inset:0;width:100%;height:100%;display:block}
.maplegend{
  position:absolute;left:14px;bottom:12px;display:flex;gap:14px;font:10.5px/1 var(--mono);color:var(--muted);
  background:rgba(8,10,15,.78);padding:8px 12px;border-radius:var(--r-sm);border:1px solid var(--line);
  backdrop-filter:blur(8px);flex-wrap:wrap;max-width:calc(100% - 28px)
}
.maplegend i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px;vertical-align:middle}
.mapstats{
  position:absolute;right:14px;top:14px;display:flex;flex-direction:column;gap:10px;text-align:right;
  background:rgba(8,10,15,.78);padding:13px 16px;border-radius:var(--r);border:1px solid var(--line);backdrop-filter:blur(8px)
}
.mapstats .s{font:9.5px/1 var(--mono);letter-spacing:.11em;color:var(--dim);text-transform:uppercase}
.mapstats .v{font:21px/1 var(--mono);font-weight:700;margin-top:4px}

.sidecol{display:flex;flex-direction:column;gap:var(--sp3);min-height:0}
.sidecol>.panel:first-child{flex:none}
.dial{padding:var(--sp3);display:grid;place-items:center}
#dial{width:100%;max-width:296px;aspect-ratio:1;display:block}
.tickerbox{flex:1 1 0;min-height:0}
.ticker{overflow-y:auto;flex:1;min-height:0}

.trow{display:flex;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);align-items:center;cursor:pointer;transition:background .12s}
.trow:hover{background:var(--s2)}
.trow .sv{width:3px;align-self:stretch;border-radius:2px;flex:none}
.trow img,.trow .ph{width:36px;height:36px;border-radius:5px;background:#fff;flex:none;object-fit:cover}
.trow .ph{background:var(--s3);display:grid;place-items:center;font-size:15px;color:var(--dim)}
.trow .tt{flex:1;min-width:0}
.trow .tn{font-size:12.7px;line-height:1.35;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.trow .tm{font:10px/1.4 var(--mono);color:var(--dim);margin-top:3px}
.newflag{font:9px/1 var(--mono);background:var(--crit);color:#fff;padding:2px 4px;border-radius:3px;font-weight:700}

/* ==========================================================================
   CARDS / FEED
   ========================================================================== */
.toolbar{display:flex;gap:var(--sp2);flex-wrap:wrap;align-items:center;margin-bottom:var(--sp4)}
.searchbar{display:flex;gap:var(--sp2);flex:1 1 300px;min-width:240px}

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--sp3)}
.rcard{background:var(--s1);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  display:flex;flex-direction:column;transition:border-color .15s,transform .15s,box-shadow .15s;cursor:pointer}
.rcard:hover{border-color:var(--line3);transform:translateY(-2px);box-shadow:var(--sh-lg)}
.rcard.crit{box-shadow:inset 3px 0 0 var(--crit)}
.rcard.high{box-shadow:inset 3px 0 0 var(--high)}
.rcard.med{box-shadow:inset 3px 0 0 var(--med)}
.rimg{width:100%;height:160px;object-fit:contain;background:#fff;display:block}
.rimg-none{width:100%;height:66px;display:grid;place-items:center;background:var(--s2);font-size:24px;color:var(--dim)}
.rbody{padding:13px 15px;display:flex;flex-direction:column;gap:8px;flex:1}
.rtags{display:flex;gap:6px;flex-wrap:wrap}
.rtitle{font-size:14px;font-weight:640;line-height:1.35}
.rmeta{font:10.5px/1.5 var(--mono);color:var(--dim)}
.rreason{font-size:12.8px;color:var(--muted);line-height:1.5}
.rfoot{display:flex;gap:10px;align-items:center;margin-top:auto;padding-top:6px}
.rgeo{font:10.5px/1 var(--mono);color:var(--dim)}

.empty{text-align:center;padding:64px 20px;color:var(--muted);grid-column:1/-1}
.empty .big{font-size:36px;margin-bottom:14px;opacity:.45}
.empty h3{font-size:17px;color:var(--ink);margin-bottom:7px}
.empty p{max-width:440px;margin:0 auto;font-size:13.5px;line-height:1.6}

/* ==========================================================================
   REGISTER  (the asset table — the product's spine)
   ========================================================================== */
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--sp3);margin-bottom:var(--sp5)}
.stat{background:var(--s1);border:1px solid var(--line);border-radius:var(--r);padding:15px 17px}
.stat .k{font:9.5px/1 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--dim)}
.stat .v{font:26px/1 var(--mono);font-weight:700;margin-top:8px}
.stat .sub{font-size:11.5px;color:var(--muted);margin-top:6px}

.tbl{width:100%;border-collapse:collapse;background:var(--s1);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.tbl th{text-align:left;font:9.5px/1 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--dim);
  padding:11px 14px;border-bottom:1px solid var(--line);background:var(--s2);white-space:nowrap}
.tbl td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle;font-size:13.5px}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr{transition:background .12s}
.tbl tbody tr:hover{background:var(--s2)}
.tbl .kind{font:10px/1 var(--mono);color:var(--dim);letter-spacing:.06em;text-transform:uppercase}
.tbl .aname{font-weight:600;display:flex;align-items:center;gap:9px}
.tbl .aname img{width:30px;height:30px;border-radius:5px;object-fit:contain;background:#fff;flex:none}
.tbl .aq{font:10.5px/1 var(--mono);color:var(--dim);margin-top:4px}
.tbl .num{font-family:var(--mono);text-align:right}
.rowact{opacity:0;transition:opacity .12s}
.tbl tr:hover .rowact{opacity:1}

.verdict{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:650}
.verdict .d{width:8px;height:8px;border-radius:50%;flex:none}

/* ---------------------------------------------------------------- progress */
.progress{height:4px;background:var(--s3);border-radius:99px;overflow:hidden;margin-top:var(--sp3)}
.progress i{display:block;height:100%;background:var(--brand);border-radius:99px;transition:width .25s}

/* ==========================================================================
   ACTIONS
   ========================================================================== */
.action-card{background:var(--s1);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px;margin-bottom:var(--sp3);display:flex;gap:var(--sp4)}
.action-card img{width:74px;height:74px;object-fit:contain;background:#fff;border-radius:var(--r-sm);flex:none}
.action-card .ac-b{flex:1;min-width:0}
.action-states{display:flex;gap:6px;flex-wrap:wrap;margin-top:11px}
.st{border:1px solid var(--line2);background:transparent;color:var(--muted);padding:6px 11px;border-radius:99px;font-size:12px;font-weight:600;transition:all .13s}
.st:hover{border-color:var(--line3);color:var(--ink)}
.st.on{color:var(--brand-ink);border-color:transparent}

/* ==========================================================================
   SCANNER
   ========================================================================== */
.scanwrap{display:grid;grid-template-columns:1fr 380px;gap:var(--sp4)}
.stage{position:relative;background:#000;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);aspect-ratio:4/3}
#scanvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
#scanoverlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.scanidle{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:26px;color:var(--muted)}
.scanidle .big{font-size:46px;margin-bottom:14px}
.reticle{position:absolute;left:50%;top:14px;transform:translateX(-50%);font:10px/1 var(--mono);letter-spacing:.1em;
  color:var(--brand);background:rgba(8,10,15,.8);padding:7px 13px;border-radius:99px;border:1px solid var(--line);
  white-space:nowrap;max-width:calc(100% - 26px);overflow:hidden;text-overflow:ellipsis}
.scanlist{display:flex;flex-direction:column;gap:var(--sp2);max-height:calc(100vh - 190px);overflow:auto}
.sitem{background:var(--s1);border:1px solid var(--line);border-left:3px solid var(--dim);border-radius:var(--r);padding:11px 13px;display:flex;gap:11px}
.sitem.recalled{border-left-color:var(--crit);background:linear-gradient(90deg,var(--crit-bg),transparent 62%)}
.sitem.possible{border-left-color:var(--high);background:linear-gradient(90deg,var(--high-bg),transparent 62%)}
.sitem.clear{border-left-color:var(--med)}
.sitem.checking{border-left-color:var(--brand)}
.sitem img{width:44px;height:44px;object-fit:contain;background:#fff;border-radius:5px;flex:none}
.sitem .sname{font-size:13px;font-weight:600;line-height:1.3}
.sitem .scode{font:10.5px/1 var(--mono);color:var(--dim);margin-top:4px}
.sitem .sverdict{font:10px/1 var(--mono);letter-spacing:.09em;font-weight:700;margin-top:6px;text-transform:uppercase}
.sitem.recalled .sverdict{color:var(--crit)}
.sitem.possible .sverdict{color:var(--high)}
.sitem.clear .sverdict{color:var(--med)}
.sitem.checking .sverdict{color:var(--brand)}

/* ==========================================================================
   BLOG / DOC PROSE
   ========================================================================== */
.post{background:var(--s1);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 24px;margin-bottom:var(--sp3)}
.post h3{font-size:19px;margin-bottom:6px}
.post .pmeta{font:11px/1 var(--mono);color:var(--dim);margin-bottom:14px}
.post p{color:var(--muted);font-size:14.5px;line-height:1.65;margin:0 0 10px}
.post img{max-width:190px;float:right;margin:0 0 12px 18px;border-radius:var(--r-sm);background:#fff}
.post .ptags{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px;clear:both}

.prose h2{font-size:19px;margin:var(--sp6) 0 var(--sp3)}
.prose h2:first-child{margin-top:0}
.prose p{color:var(--muted);font-size:14.5px;line-height:1.7;margin:0 0 var(--sp3)}
.feat{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--muted);margin:9px 0;line-height:1.6}
.feat::before{content:"▸";color:var(--brand);flex:none}
.srclist>div{display:grid;grid-template-columns:1fr auto;gap:12px;padding:13px 16px;border-bottom:1px solid var(--line)}
.srclist>div:last-child{border-bottom:0}
.srclist .note{color:var(--muted);font-size:13px;margin-top:3px}

/* ==========================================================================
   MODALS
   ========================================================================== */
.modal{position:fixed;inset:0;background:rgba(4,6,10,.82);backdrop-filter:blur(8px);z-index:100;
  display:grid;place-items:center;padding:20px;animation:fade .16s ease-out}
@keyframes fade{from{opacity:0}}
.modal-in{background:var(--s1);border:1px solid var(--line2);border-radius:var(--r-xl);max-width:540px;width:100%;
  max-height:88vh;overflow:auto;box-shadow:var(--sh-lg)}
.modal-in.wide{max-width:780px}
.modal-h{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;
  position:sticky;top:0;background:var(--s1);z-index:2}
.modal-h h2{font-size:17px;flex:1;min-width:0}
.modal-b{padding:20px 22px}
.modal-b h4{margin:var(--sp4) 0 5px;font:10.5px/1 var(--mono);letter-spacing:.11em;color:var(--dim);text-transform:uppercase}
.modal-b h4:first-child{margin-top:0}
.modal-b p{margin:0 0 4px;font-size:14px;color:var(--ink2);line-height:1.55}
.modal-b .note{color:var(--muted);font-size:13px}
.field{margin-bottom:var(--sp3)}
.field label{display:block;font:10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-bottom:6px}
.keyin{width:100%;background:var(--s0);border:1px solid var(--line2);color:var(--ink);padding:13px 15px;
  border-radius:var(--r);font:15px/1 var(--mono);letter-spacing:.12em;text-align:center;text-transform:uppercase}
.keyin:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-glow)}
.err{color:var(--crit);font-size:13px;min-height:19px;margin-top:9px;text-align:center}
.plans{display:grid;gap:var(--sp2);margin:var(--sp4) 0}
.plan{border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;display:flex;align-items:center;gap:12px}
.plan .price{margin-left:auto;font:15px/1 var(--mono);color:var(--brand);font-weight:700}

.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:var(--s3);border:1px solid var(--line2);
  color:var(--ink);padding:11px 18px;border-radius:99px;font-size:13.5px;z-index:200;box-shadow:var(--sh-lg);
  display:flex;align-items:center;gap:9px;animation:rise .2s ease-out}
@keyframes rise{from{opacity:0;transform:translate(-50%,10px)}}

/* ==========================================================================
   RESPONSIVE — must stay last in this file.
   ========================================================================== */
@media(max-width:1100px){
  #view-radar{overflow:auto}
  .radar-grid{grid-template-columns:1fr;height:auto}
  /* flex-basis:0% beats `height` in a column flex parent, so opt out of flex */
  .mapwrap{flex:0 0 auto;height:56vh;min-height:320px}
  .tickerbox{flex:0 0 auto;max-height:70vh}
  .ticker{max-height:58vh}
  #dial{max-width:260px}
  .scanwrap{grid-template-columns:1fr}
  .scanlist{max-height:none}
}
@media(max-width:720px){
  .topbar{height:auto;flex-wrap:wrap;padding:9px 12px;gap:var(--sp2)}
  .brand{font-size:12.5px}
  .navtabs{order:9;width:100%;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .navtabs::-webkit-scrollbar{display:none}
  .sync{font-size:10px;gap:6px}
  .wrap{padding:var(--sp4) var(--sp3) var(--sp6)}
  .cards{grid-template-columns:1fr}
  .mapstats{padding:9px 11px;gap:6px}
  .mapstats .v{font-size:16px}
  .post img{float:none;display:block;margin:0 0 12px;max-width:100%}
  .action-card{flex-direction:column}
  .tbl thead{display:none}
  .tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%}
  .tbl tr{border-bottom:1px solid var(--line);padding:6px 0}
  .tbl td{border:0;padding:5px 14px}
  .tbl .num{text-align:left}
}