/* ============================================================
   Agros Register — visual system
   Lavender ground, floating white panel, violet accent.
   ============================================================ */
:root{
  --ground:#EEEAFA;
  --panel:#FFFFFF;
  --surface:#FFFFFF;
  --surface-2:#F7F5FE;
  --surface-3:#EDE9FC;
  --line:#ECE8F7;
  --line-strong:#DAD3EF;

  --ink:#17142A;
  --ink-2:#5E5975;
  --ink-3:#8C87A2;

  --brand:#5B2EE5;
  --brand-2:#4A22CC;
  --brand-ink:#FFFFFF;
  --brand-soft:#EDE8FE;
  --brand-soft-2:#E2DAFD;

  --good:#15803D; --good-soft:#E6F6EC;
  --warn:#B45309; --warn-soft:#FBF0DF;
  --crit:#C81E1E; --crit-soft:#FCE9E9;
  --info:#1D4ED8; --info-soft:#E6ECFD;

  --ill-1:#5B2EE5;   /* illustration stroke */
  --ill-2:#C9BCFA;   /* illustration fill   */
  --ill-3:#FFD9A8;   /* warm spark          */
  --ill-4:#A8DFF5;   /* cool spark          */

  --shadow-1:0 1px 2px rgba(28,20,60,.05);
  --shadow-2:0 2px 6px rgba(28,20,60,.06), 0 14px 34px -20px rgba(28,20,60,.34);
  --shadow-panel:0 24px 70px -34px rgba(40,24,96,.42);
  --shadow-3:0 -3px 26px rgba(28,20,60,.12);

  --r-s:8px; --r-m:12px; --r-l:18px; --r-xl:24px;
  --tap:44px;
  --nav-h:62px;

  --f-display:"Plus Jakarta Sans","Segoe UI",Roboto,Arial,sans-serif;
  --f-body:"Plus Jakarta Sans","Segoe UI",Roboto,Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0C0A16; --panel:#161324; --surface:#1B1730; --surface-2:#221D3A; --surface-3:#2A2348;
    --line:#2B2547; --line-strong:#3B3360;
    --ink:#EAE7F7; --ink-2:#A9A3C4; --ink-3:#7E7899;
    --brand:#9B7BFF; --brand-2:#B29AFF; --brand-ink:#140B2E; --brand-soft:#251D48; --brand-soft-2:#2E2457;
    --good:#4ADE80; --good-soft:#122B1D; --warn:#F0B26B; --warn-soft:#31220F;
    --crit:#F58A80; --crit-soft:#361A1A; --info:#8FB4FB; --info-soft:#17213D;
    --ill-1:#9B7BFF; --ill-2:#3A2E68; --ill-3:#6B4F22; --ill-4:#1F4152;
    --shadow-1:0 1px 2px rgba(0,0,0,.45);
    --shadow-2:0 2px 6px rgba(0,0,0,.45), 0 16px 34px -20px rgba(0,0,0,.9);
    --shadow-panel:0 24px 70px -34px rgba(0,0,0,.9);
    --shadow-3:0 -3px 26px rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"]{
  --ground:#0C0A16; --panel:#161324; --surface:#1B1730; --surface-2:#221D3A; --surface-3:#2A2348;
  --line:#2B2547; --line-strong:#3B3360;
  --ink:#EAE7F7; --ink-2:#A9A3C4; --ink-3:#7E7899;
  --brand:#9B7BFF; --brand-2:#B29AFF; --brand-ink:#140B2E; --brand-soft:#251D48; --brand-soft-2:#2E2457;
  --good:#4ADE80; --good-soft:#122B1D; --warn:#F0B26B; --warn-soft:#31220F;
  --crit:#F58A80; --crit-soft:#361A1A; --info:#8FB4FB; --info-soft:#17213D;
  --ill-1:#9B7BFF; --ill-2:#3A2E68; --ill-3:#6B4F22; --ill-4:#1F4152;
  --shadow-1:0 1px 2px rgba(0,0,0,.45);
  --shadow-2:0 2px 6px rgba(0,0,0,.45), 0 16px 34px -20px rgba(0,0,0,.9);
  --shadow-panel:0 24px 70px -34px rgba(0,0,0,.9);
  --shadow-3:0 -3px 26px rgba(0,0,0,.55);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--f-body); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased; overscroll-behavior-y:none;
}
h1,h2,h3,h4{font-family:var(--f-display); margin:0; text-wrap:balance; letter-spacing:-.02em}
h1{font-size:1.5rem; font-weight:800}
h2{font-size:1.02rem; font-weight:700}
h3{font-size:.95rem; font-weight:700}
p{margin:0 0 .7em}
a{color:var(--brand)}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--brand); outline-offset:2px; border-radius:6px}
.mono{font-family:var(--f-mono); font-variant-numeric:tabular-nums}
.num{font-variant-numeric:tabular-nums}
.hide{display:none !important}

/* ---------- shell ---------- */
.app{min-height:100dvh; display:flex; flex-direction:column; background:var(--panel)}
@media (min-width:960px){
  body{padding:18px}
  .app{
    min-height:calc(100dvh - 36px); border-radius:var(--r-xl); overflow:hidden;
    max-width:1460px; margin:0 auto; box-shadow:var(--shadow-panel); border:1px solid var(--line);
  }
}

.topbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:10px;
  padding:10px 16px; padding-block:10px;
  background:var(--panel); border-bottom:1px solid var(--line);
}
.brandmark{display:flex; align-items:center; gap:10px; min-width:0}
.brandmark .glyph{
  width:32px; height:32px; border-radius:10px; flex:none;
  background:var(--brand); color:var(--brand-ink);
  display:grid; place-items:center; font-family:var(--f-display); font-weight:800; font-size:12.5px;
  letter-spacing:-.02em;
}
.brandmark .nm{font-family:var(--f-display); font-weight:800; font-size:1rem; line-height:1.1; letter-spacing:-.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.brandmark .sub{font-size:.65rem; color:var(--ink-3); letter-spacing:.12em; text-transform:uppercase; font-weight:600}
.topbar .spacer{flex:1}
.iconbtn{
  height:38px; min-width:38px; border:1px solid var(--line-strong);
  background:var(--surface); border-radius:var(--r-m); cursor:pointer;
  display:grid; place-items:center; padding:0 9px; color:var(--ink-2);
}
.iconbtn:hover{background:var(--surface-2); color:var(--brand)}
.iconbtn svg{width:18px;height:18px}
.userchip{
  display:flex; align-items:center; gap:9px; border:1px solid var(--line-strong);
  background:var(--surface); border-radius:999px; padding:4px 12px 4px 4px; cursor:pointer;
}
.userchip:hover{border-color:var(--brand-soft-2); background:var(--brand-soft)}
.avatar{
  width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--brand-soft-2); color:var(--brand); font-weight:800; font-size:.72rem;
  font-family:var(--f-display);
}
.userchip .who{font-size:.79rem; line-height:1.15; text-align:left}
.userchip .who b{display:block; font-weight:700}
.userchip .who span{color:var(--ink-3); font-size:.66rem; text-transform:uppercase; letter-spacing:.07em; font-weight:600}

.body{flex:1; display:flex; min-height:0}
.rail{display:none}
.main{flex:1; min-width:0; padding:16px; padding-block:16px 100px; max-width:1240px; margin:0 auto; width:100%}

/* ---------- bottom nav (mobile) ---------- */
.bottomnav{
  position:fixed; left:0; right:0; bottom:0; z-index:45;
  display:grid; grid-template-columns:repeat(5,1fr);
  background:var(--panel); border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom); box-shadow:var(--shadow-3);
}
.bottomnav a{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  height:var(--nav-h); text-decoration:none; color:var(--ink-3); font-size:.64rem; font-weight:700;
  position:relative;
}
.bottomnav a.on{color:var(--brand)}
.bottomnav a .dot{position:absolute; top:9px; right:50%; margin-right:-17px; width:7px; height:7px; border-radius:50%; background:var(--crit)}
.bottomnav svg{width:21px; height:21px}

.fab{
  position:fixed; right:16px; bottom:calc(var(--nav-h) + 16px + env(safe-area-inset-bottom)); z-index:46;
  height:52px; padding:0 20px; border:none; border-radius:999px; cursor:pointer;
  background:var(--brand); color:var(--brand-ink); font-family:var(--f-display); font-weight:700; font-size:.92rem;
  display:flex; align-items:center; gap:8px; box-shadow:0 10px 24px -8px rgba(91,46,229,.6);
}
.fab:active{transform:translateY(1px)}
.fab svg{width:20px;height:20px}

/* ---------- desktop rail ---------- */
@media (min-width:920px){
  .topbar{display:none}
  .rail{
    display:flex; flex-direction:column; gap:2px; width:246px; flex:none;
    padding:16px 12px 12px; border-right:1px solid var(--line); background:var(--panel);
    position:sticky; top:0; height:100dvh; overflow:auto;
  }
  @media (min-width:960px){ .rail{height:calc(100dvh - 36px)} }
  .rail .railhead{display:flex; align-items:center; gap:8px; padding:4px 6px 14px}
  .rail .railhead .brandmark{flex:1; min-width:0}
  .rail .railhead .brandmark .sub{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:.6rem}
  .rail .railcta{margin:0 4px 6px}
  .rail .railcta .btn{width:100%}
  .rail a{
    display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:var(--r-m);
    color:var(--ink-2); text-decoration:none; font-size:.89rem; font-weight:600;
  }
  .rail a:hover{background:var(--surface-2); color:var(--ink)}
  .rail a.on{background:var(--brand-soft); color:var(--brand)}
  .rail a svg{width:19px; height:19px; flex:none}
  .rail a span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .rail .grp{font-size:.64rem; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-3); padding:16px 12px 6px; font-weight:700}
  .rail .cnt{margin-left:auto; font-size:.7rem; background:var(--surface-3); border-radius:999px; padding:1px 8px; color:var(--ink-2); font-weight:700}
  .rail a.on .cnt{background:var(--brand); color:var(--brand-ink)}
  .rail .railfoot{margin-top:auto; padding-top:12px; border-top:1px solid var(--line); display:flex; align-items:center; gap:8px}
  .rail .railfoot .userchip{flex:1; border:none; background:transparent; padding:6px}
  .rail .railfoot .userchip:hover{background:var(--surface-2)}
  .main{padding-block:26px 44px; padding-inline:28px}
  .bottomnav{display:none !important}
  .fab{display:none !important}
}
@media (max-width:919px){ .rail .railcta{display:none} }

/* ---------- generic ---------- */
.page-head{display:flex; align-items:flex-end; gap:12px; margin-bottom:16px; flex-wrap:wrap}
.page-head .eyebrow{font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); font-weight:700}
.page-head h1{font-size:1.55rem}
.page-head .spacer{flex:1}

.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l); box-shadow:var(--shadow-1)}
.card.pad{padding:18px}
.sect{margin:24px 0 11px; display:flex; align-items:center; gap:10px}
.sect h2{font-size:.78rem; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-3); font-weight:700}
.sect .rule{flex:1; height:1px; background:var(--line)}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  min-height:42px; padding:0 17px; border-radius:var(--r-m); cursor:pointer;
  border:1px solid var(--line-strong); background:var(--surface); color:var(--ink);
  font-weight:700; font-size:.86rem; white-space:nowrap;
}
.btn:hover{background:var(--surface-2); border-color:var(--brand-soft-2)}
.btn svg{width:17px;height:17px}
.btn.primary{background:var(--brand); border-color:var(--brand); color:var(--brand-ink); box-shadow:0 6px 16px -8px rgba(91,46,229,.75)}
.btn.primary:hover{background:var(--brand-2); border-color:var(--brand-2)}
.btn.ghost{border-color:transparent; background:transparent; color:var(--ink-2)}
.btn.ghost:hover{background:var(--surface-2)}
.btn.danger{color:var(--crit)}
.btn.danger:hover{background:var(--crit-soft); border-color:var(--crit-soft)}
.btn.sm{min-height:34px; padding:0 12px; font-size:.79rem; border-radius:var(--r-s)}
.btn.full{width:100%}
.btn[disabled]{opacity:.45; cursor:not-allowed}
.link{background:none;border:none;padding:0;cursor:pointer;color:var(--brand);font-size:.78rem;font-weight:700;text-decoration:underline;text-underline-offset:3px}

.pill{
  display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:999px;
  font-size:.7rem; font-weight:700; white-space:nowrap;
  background:var(--surface-3); color:var(--ink-2);
}
.pill.good{background:var(--good-soft); color:var(--good)}
.pill.warn{background:var(--warn-soft); color:var(--warn)}
.pill.crit{background:var(--crit-soft); color:var(--crit)}
.pill.info{background:var(--info-soft); color:var(--info)}
.pill.brand{background:var(--brand-soft); color:var(--brand)}

/* ---------- dashboard: hero + tiles + panels ---------- */
.dash{display:grid; grid-template-columns:1fr; gap:14px}
@media(min-width:1040px){ .dash.two{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }

.hero{
  position:relative; overflow:hidden; border-radius:var(--r-l); border:1px solid var(--line);
  background:linear-gradient(112deg, var(--surface) 0%, var(--surface) 48%, var(--brand-soft) 100%);
  padding:20px; display:flex; gap:16px; align-items:center; box-shadow:var(--shadow-1);
}
.hero .copy{flex:1; min-width:0}
.hero h2{font-size:1.08rem; line-height:1.35; font-weight:700; letter-spacing:-.015em}
.hero .big{font-family:var(--f-display); font-size:2.9rem; font-weight:800; line-height:1; margin:14px 0 2px; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.hero .cap{font-size:.8rem; color:var(--ink-3); font-weight:600}
.hero .art{width:150px; flex:none; display:none}
@media(min-width:560px){ .hero .art{display:block} }
.hero .btn{margin-top:14px}

.tiles{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.tile{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l);
  padding:14px 15px; display:flex; align-items:center; gap:8px; box-shadow:var(--shadow-1);
  cursor:pointer; text-align:left; min-height:92px;
}
.tile:hover{border-color:var(--brand-soft-2); box-shadow:var(--shadow-2)}
.tile .t-v{font-family:var(--f-display); font-size:1.7rem; font-weight:800; line-height:1; font-variant-numeric:tabular-nums; letter-spacing:-.03em}
.tile .t-k{font-size:.78rem; color:var(--ink-3); font-weight:600; margin-top:5px}
.tile .t-art{width:54px; flex:none; margin-left:auto}

.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l); box-shadow:var(--shadow-1); padding:18px; display:flex; flex-direction:column}
.panel > header{display:flex; align-items:center; gap:10px; margin-bottom:14px}
.panel > header h2{flex:1; font-size:1rem}

.mapwrap{display:grid; grid-template-columns:1fr; gap:16px; align-items:center; flex:1}
@media(min-width:520px){ .mapwrap{grid-template-columns:minmax(0,40%) minmax(0,1fr)} }
.mapwrap svg{width:100%; height:auto; display:block; max-width:100%}
.map-land{fill:var(--surface-3); stroke:var(--line-strong); stroke-width:2}
.map-dot{fill:var(--brand)}
.map-halo{fill:var(--brand); opacity:.18}
.locs{display:flex; flex-direction:column}
.loc{display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--line); font-size:.85rem}
.loc:last-child{border-bottom:none}
.loc .nm{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.loc .n{font-variant-numeric:tabular-nums; font-weight:700; color:var(--ink-2)}
.loc .sw{width:8px;height:8px;border-radius:50%;background:var(--brand);flex:none}

.catlist{display:flex; flex-direction:column}
.cat{display:flex; align-items:center; gap:11px; padding:11px 0; border-bottom:1px solid var(--line)}
.cat:last-child{border-bottom:none}
.cat .ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand);flex:none}
.cat .ic svg{width:16px;height:16px}
.cat .nm{font-size:.87rem; font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cat .delta{font-size:.7rem; font-weight:700; margin-left:6px; white-space:nowrap}
.cat .delta.up{color:var(--good)} .cat .delta.down{color:var(--crit)}
.cat .n{margin-left:auto; font-variant-numeric:tabular-nums; font-weight:700; color:var(--ink-2)}

.queue{
  border-radius:var(--r-l); border:1px solid var(--brand-soft-2); background:var(--brand-soft);
  padding:16px 16px 14px;
}
.queue header{display:flex; align-items:center; gap:10px; margin-bottom:12px}
.queue header h2{flex:1; font-size:.98rem; color:var(--brand)}
.qstrip{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,164px),1fr)); gap:10px}
.qcard{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-m);
  overflow:hidden; cursor:pointer; text-align:left; padding:0; box-shadow:var(--shadow-1);
}
.qcard:hover{box-shadow:var(--shadow-2)}
.qcard .ph{width:100%; aspect-ratio:4/3; background:var(--surface-3); object-fit:cover; display:block}
.qcard .meta{padding:9px 10px}
.qcard .nm{font-size:.82rem; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.qcard .tg{font-family:var(--f-mono); font-size:.66rem; color:var(--ink-3); margin-top:2px}
.qcard .pr{margin-top:7px}

/* ---------- stat tiles (other pages) ---------- */
.stats{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
@media(min-width:700px){.stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.stat{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l);
  padding:15px 16px; display:flex; flex-direction:column; gap:3px; position:relative; overflow:hidden;
  box-shadow:var(--shadow-1);
}
.stat .k{font-size:.7rem; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-3); font-weight:700}
.stat .v{font-family:var(--f-display); font-size:1.7rem; font-weight:800; line-height:1.1; font-variant-numeric:tabular-nums; letter-spacing:-.03em}
.stat .m{font-size:.73rem; color:var(--ink-3)}
.stat .stripe{position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--brand)}
.stat.warnbar .stripe{background:var(--warn)}
.stat.critbar .stripe{background:var(--crit)}
.stat.infobar .stripe{background:var(--info)}

/* ---------- register launcher ---------- */
.reg-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,236px),1fr)); gap:12px}
.reg{
  display:flex; gap:12px; align-items:flex-start; text-align:left; text-decoration:none;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l);
  padding:15px; color:inherit; cursor:pointer; box-shadow:var(--shadow-1);
}
.reg:hover{border-color:var(--brand-soft-2); box-shadow:var(--shadow-2)}
.reg .ic{width:38px;height:38px;border-radius:11px; flex:none; display:grid; place-items:center; background:var(--brand-soft); color:var(--brand)}
.reg .ic svg{width:20px;height:20px}
.reg .t{font-family:var(--f-display); font-weight:700; font-size:.94rem}
.reg .d{font-size:.76rem; color:var(--ink-3); line-height:1.4; margin-top:2px}
.reg .n{margin-top:7px; font-size:.72rem; color:var(--brand); font-weight:700; font-variant-numeric:tabular-nums}

/* ---------- list rows ---------- */
.rows{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l); overflow:hidden; box-shadow:var(--shadow-1)}
.row{
  display:flex; gap:12px; align-items:center; padding:12px 14px; cursor:pointer;
  border-bottom:1px solid var(--line); background:transparent; text-align:left;
  border-left:0; border-right:0; border-top:0; width:100%;
}
.row:last-child{border-bottom:none}
.row:hover{background:var(--surface-2)}
.row .thumb{
  width:46px;height:46px;border-radius:11px; flex:none; object-fit:cover;
  background:var(--surface-3); display:grid; place-items:center; color:var(--brand); overflow:hidden;
}
.row .thumb svg{width:18px;height:18px}
.row .mid{flex:1; min-width:0}
.row .l1{display:flex; align-items:center; gap:7px; flex-wrap:wrap}
.row .nm{font-weight:700; font-size:.89rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%}
.row .l2{font-size:.74rem; color:var(--ink-3); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.row .rt{text-align:right; flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:4px}
.row .amt{font-family:var(--f-mono); font-size:.8rem; font-variant-numeric:tabular-nums; font-weight:600}

.empty{
  border:1.5px dashed var(--line-strong); border-radius:var(--r-l); padding:30px 20px; text-align:center;
  color:var(--ink-3); background:var(--surface);
}
.empty h3{color:var(--ink-2); margin-bottom:5px}
.empty p{font-size:.83rem; margin-bottom:14px}

/* ---------- filters ---------- */
.filters{display:flex; gap:9px; margin-bottom:13px; flex-wrap:wrap}
.search{position:relative; flex:1; min-width:190px}
.search input{
  width:100%; height:42px; border-radius:var(--r-m); border:1px solid var(--line-strong);
  background:var(--surface); padding:0 12px 0 36px; font-size:.88rem;
}
.search svg{position:absolute; left:12px; top:12px; width:17px; height:17px; color:var(--ink-3)}
.filters select{
  height:42px; border-radius:var(--r-m); border:1px solid var(--line-strong); background:var(--surface);
  padding:0 9px; font-size:.83rem; max-width:48%;
}
.chips{display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; margin-bottom:13px}
.chip{
  border:1px solid var(--line-strong); background:var(--surface); border-radius:999px; padding:7px 14px;
  font-size:.79rem; font-weight:700; color:var(--ink-2); cursor:pointer; white-space:nowrap;
}
.chip:hover{border-color:var(--brand-soft-2)}
.chip.on{background:var(--brand); border-color:var(--brand); color:var(--brand-ink)}

/* ---------- forms ---------- */
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:14px}
.field > label{font-size:.71rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3)}
.field .hint{font-size:.72rem; color:var(--ink-3)}
.field input, .field select, .field textarea{
  width:100%; min-height:44px; border:1px solid var(--line-strong); border-radius:var(--r-m);
  background:var(--surface); padding:10px 12px; font-size:.9rem;
}
.field textarea{min-height:72px; resize:vertical}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--brand); outline:none; box-shadow:0 0 0 3px var(--brand-soft)}
.field.req > label::after{content:" *"; color:var(--crit)}
.grid2{display:grid; grid-template-columns:1fr; gap:0 14px}
@media(min-width:560px){.grid2{grid-template-columns:1fr 1fr}}
.grid3{display:grid; grid-template-columns:1fr 1fr; gap:0 14px}
@media(min-width:720px){.grid3{grid-template-columns:1fr 1fr 1fr}}
.fs{border:1px solid var(--line); border-radius:var(--r-l); padding:16px; margin-bottom:14px; background:var(--surface)}
.fs > legend{font-family:var(--f-display); font-size:.71rem; font-weight:800; text-transform:uppercase; letter-spacing:.12em; color:var(--brand); padding:0 8px}

/* type picker */
.typegrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,142px),1fr)); gap:10px}
.type{
  border:1px solid var(--line-strong); background:var(--surface); border-radius:var(--r-m); padding:12px 11px;
  cursor:pointer; text-align:left; display:flex; flex-direction:column; gap:5px; min-height:auto;
}
.type:hover{border-color:var(--brand-soft-2); background:var(--surface-2)}
.type.on{border-color:var(--brand); background:var(--brand-soft); box-shadow:0 0 0 1px var(--brand) inset}
.typegrid .type{min-height:78px}
.type .code{font-family:var(--f-mono); font-size:.65rem; color:var(--ink-3); letter-spacing:.04em}
.type.on .code{color:var(--brand)}
.type .t{font-weight:700; font-size:.83rem; line-height:1.25}
.type .r{font-size:.68rem; color:var(--ink-3); margin-top:auto}

/* ---------- photos ---------- */
.shots{display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:10px}
.shot{position:relative; aspect-ratio:1; border-radius:var(--r-m); overflow:hidden; background:var(--surface-3); border:1px solid var(--line)}
.shot img{width:100%;height:100%;object-fit:cover; display:block}
.shot .x{
  position:absolute; top:5px; right:5px; width:26px;height:26px; border-radius:50%;
  background:rgba(18,10,40,.72); color:#fff; border:none; cursor:pointer; display:grid; place-items:center;
}
.shot .x svg{width:13px;height:13px}
.shot .geo{
  position:absolute; left:0; right:0; bottom:0; padding:3px 6px; font-size:.58rem;
  background:linear-gradient(transparent, rgba(18,10,40,.84)); color:#EFEAFF; font-family:var(--f-mono);
}
.shot.add{border:1.5px dashed var(--line-strong); display:grid; place-items:center; cursor:pointer; background:var(--surface)}
.shot.add .in{display:flex; flex-direction:column; align-items:center; gap:6px; color:var(--brand); font-size:.71rem; font-weight:700; text-align:center; padding:6px}
.shot.add svg{width:22px;height:22px}
.shot.add:hover{border-color:var(--brand); background:var(--brand-soft)}

.gpsbar{
  display:flex; align-items:center; gap:9px; padding:11px 13px; border-radius:var(--r-m);
  background:var(--surface-2); border:1px solid var(--line); font-size:.79rem; margin-bottom:13px;
}
.gpsbar svg{width:17px;height:17px; flex:none}
.gpsbar .co{font-family:var(--f-mono); font-size:.74rem}
.gpsbar.ok{background:var(--good-soft); border-color:transparent; color:var(--good)}
.gpsbar.bad{background:var(--crit-soft); border-color:transparent; color:var(--crit)}
.gpsbar.busy{background:var(--info-soft); border-color:transparent; color:var(--info)}

/* ---------- sheet ---------- */
.scrim{position:fixed; inset:0; background:rgba(22,14,48,.5); backdrop-filter:blur(2px); z-index:60; opacity:0; pointer-events:none; transition:opacity .18s}
.scrim.on{opacity:1; pointer-events:auto}
.sheet{
  position:fixed; left:0; right:0; bottom:0; top:auto; z-index:61;
  background:var(--panel); border-radius:var(--r-xl) var(--r-xl) 0 0;
  max-height:94dvh; display:flex; flex-direction:column;
  transform:translateY(101%); transition:transform .22s cubic-bezier(.3,.8,.4,1);
  box-shadow:var(--shadow-3);
}
.sheet.on{transform:translateY(0)}
@media(min-width:760px){
  .sheet{
    left:50%; right:auto; bottom:auto; top:50%; width:min(780px,94vw);
    transform:translate(-50%,-46%) scale(.98); opacity:0; border-radius:var(--r-xl); max-height:88dvh;
  }
  .sheet.on{transform:translate(-50%,-50%) scale(1); opacity:1}
}
.sheet-head{
  display:flex; align-items:center; gap:10px; padding:15px 18px; border-bottom:1px solid var(--line);
  background:var(--panel); border-radius:var(--r-xl) var(--r-xl) 0 0; flex:none;
}
.sheet-head h2{flex:1; font-size:1.02rem}
.sheet-head .sub{font-size:.73rem; color:var(--ink-3); font-weight:500; display:block; letter-spacing:0; margin-top:2px}
.sheet-body{overflow:auto; padding:18px; flex:1; -webkit-overflow-scrolling:touch}
.sheet-foot{
  display:flex; gap:10px; padding:13px 18px; border-top:1px solid var(--line); background:var(--panel); flex:none;
  padding-bottom:calc(13px + env(safe-area-inset-bottom));
}
.sheet-foot .btn{flex:1}

/* ---------- data entry split ---------- */
.split{display:grid; grid-template-columns:1fr; gap:16px}
@media(min-width:900px){ .split{grid-template-columns:minmax(0,360px) minmax(0,1fr)} }
.viewer{position:sticky; top:0; z-index:2}
.viewer .stage{
  position:relative; border-radius:var(--r-l); overflow:hidden; background:#0E0A1E; aspect-ratio:4/3;
  display:grid; place-items:center;
}
.viewer .stage img{width:100%; height:100%; object-fit:contain; cursor:zoom-in}
.viewer .nav{position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between; pointer-events:none}
.viewer .nav button{
  pointer-events:auto; width:36px;height:36px;border-radius:50%; border:none; margin:0 9px;
  background:rgba(18,10,40,.62); color:#fff; cursor:pointer; display:grid; place-items:center;
}
.viewer .meta{display:flex; gap:8px; align-items:center; justify-content:space-between; padding:8px 2px; font-size:.7rem; color:var(--ink-3); font-family:var(--f-mono)}
.filmstrip{display:flex; gap:7px; overflow-x:auto; padding-bottom:4px}
.filmstrip img{width:56px;height:56px;object-fit:cover;border-radius:var(--r-s); cursor:pointer; border:2px solid transparent; flex:none}
.filmstrip img.on{border-color:var(--brand)}

.lightbox{position:fixed; inset:0; z-index:80; background:rgba(10,6,22,.95); display:none; place-items:center}
.lightbox.on{display:grid}
.lightbox img{max-width:96vw; max-height:88dvh; object-fit:contain}
.lightbox .close{position:absolute; top:14px; right:14px; background:rgba(255,255,255,.14); color:#fff; border:none; border-radius:50%; width:40px;height:40px; cursor:pointer; display:grid; place-items:center}

.kv{display:grid; grid-template-columns:minmax(100px,36%) 1fr; gap:0}
.kv dt{font-size:.71rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); padding:9px 0; border-bottom:1px solid var(--line); font-weight:700}
.kv dd{margin:0; padding:9px 0; border-bottom:1px solid var(--line); font-size:.86rem; word-break:break-word}
.kv dt:last-of-type, .kv dd:last-of-type{border-bottom:none}

/* ---------- table ---------- */
.tablewrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-l); background:var(--surface); box-shadow:var(--shadow-1)}
table.reg-t{border-collapse:collapse; width:100%; font-size:.83rem; min-width:640px}
table.reg-t th{
  text-align:left; padding:11px 14px; font-size:.66rem; text-transform:uppercase; letter-spacing:.09em;
  color:var(--ink-3); border-bottom:1px solid var(--line); font-weight:700; white-space:nowrap; background:var(--surface-2);
}
table.reg-t td{padding:11px 14px; border-bottom:1px solid var(--line); vertical-align:middle}
table.reg-t tr:last-child td{border-bottom:none}
table.reg-t tbody tr:hover{background:var(--surface-2); cursor:pointer}
table.reg-t td.r, table.reg-t th.r{text-align:right; font-variant-numeric:tabular-nums}
table.reg-t .cellname{display:flex; align-items:center; gap:10px}
table.reg-t .cellname .thumb{width:38px;height:38px;border-radius:10px;background:var(--surface-3);display:grid;place-items:center;overflow:hidden;flex:none;color:var(--brand)}
table.reg-t .cellname .thumb img{width:100%;height:100%;object-fit:cover}
table.reg-t .cellname .sub{font-size:.71rem;color:var(--ink-3)}

/* ---------- toast ---------- */
.toasts{position:fixed; left:50%; transform:translateX(-50%); bottom:calc(var(--nav-h) + 76px); z-index:90; display:flex; flex-direction:column; gap:8px; width:min(440px,92vw)}
@media(min-width:920px){.toasts{bottom:26px}}
.toast{
  background:var(--ink); color:var(--ground); border-radius:var(--r-m); padding:12px 15px; font-size:.85rem;
  box-shadow:var(--shadow-2); display:flex; gap:9px; align-items:center; font-weight:600;
}
.toast.err{background:var(--crit); color:#fff}
.toast.ok{background:var(--brand); color:#fff}

/* ---------- sign in ---------- */
.gate{min-height:100dvh; display:grid; place-items:center; padding:22px; padding-block:22px; background:var(--ground)}
.gate .box{width:min(440px,100%); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); padding:24px; box-shadow:var(--shadow-panel)}
.gate .who-list{display:flex; flex-direction:column; gap:8px; margin-top:14px; max-height:46dvh; overflow:auto}
.gate .who-list button{
  display:flex; gap:11px; align-items:center; text-align:left; padding:11px; border-radius:var(--r-m);
  border:1px solid var(--line-strong); background:var(--surface); cursor:pointer; width:100%;
}
.gate .who-list button:hover{border-color:var(--brand); background:var(--brand-soft)}
.pinpad{display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:14px}
.pinpad button{height:54px; border-radius:var(--r-m); border:1px solid var(--line-strong); background:var(--surface); font-size:1.15rem; font-family:var(--f-mono); cursor:pointer; font-weight:600}
.pinpad button:hover{background:var(--brand-soft); border-color:var(--brand-soft-2)}
.pindots{display:flex; gap:12px; justify-content:center; margin:18px 0 4px}
.pindots i{width:13px;height:13px;border-radius:50%; border:1.5px solid var(--line-strong); display:block}
.pindots i.f{background:var(--brand); border-color:var(--brand)}

.note{font-size:.78rem; color:var(--ink-2); background:var(--surface-2); border-radius:var(--r-m); padding:11px 13px; border-left:3px solid var(--line-strong)}
.note.warn{background:var(--warn-soft); color:var(--warn); border-left-color:var(--warn)}
.note.info{background:var(--info-soft); color:var(--info); border-left-color:var(--info)}

.bar{height:7px; border-radius:999px; background:var(--surface-3); overflow:hidden; display:flex}
.bar > i{display:block; height:100%}

.qrbox{display:grid; place-items:center; gap:8px; padding:14px; background:#fff; border-radius:var(--r-m)}
.qrbox canvas,.qrbox img{display:block}

@media print{
  .topbar,.bottomnav,.rail,.fab,.sheet-foot,.no-print{display:none !important}
  body{background:#fff; padding:0}
  .app{box-shadow:none;border:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}

/* ============================================================
   Additions: themes, login, charts, validation, downloads
   ============================================================ */

/* ---------- validation ---------- */
.field.err input, .field.err select, .field.err textarea{border-color:var(--crit); background:var(--crit-soft)}
.field .msg{font-size:.72rem; color:var(--crit); font-weight:600; display:flex; align-items:center; gap:5px}
.field .msg svg{width:13px;height:13px;flex:none}
.formerr{
  display:flex; gap:9px; align-items:flex-start; padding:11px 13px; border-radius:var(--r-m);
  background:var(--crit-soft); color:var(--crit); font-size:.81rem; font-weight:600; margin-bottom:14px;
}
.formerr svg{width:17px;height:17px;flex:none;margin-top:1px}
.formerr ul{margin:5px 0 0; padding-left:17px; font-weight:500}

/* ---------- alert modal ---------- */
.alertbox{width:min(420px,94vw)}
.alertbox .ico{
  width:52px;height:52px;border-radius:16px;display:grid;place-items:center;margin-bottom:13px;
  background:var(--brand-soft); color:var(--brand);
}
.alertbox .ico svg{width:26px;height:26px}
.alertbox.err .ico{background:var(--crit-soft); color:var(--crit)}
.alertbox.ok .ico{background:var(--good-soft); color:var(--good)}
.alertbox.warn .ico{background:var(--warn-soft); color:var(--warn)}
.alertbox h2{font-size:1.1rem; margin-bottom:6px}
.alertbox p{font-size:.87rem; color:var(--ink-2); margin:0}

/* ---------- login ---------- */
.login{min-height:100dvh; display:grid; grid-template-columns:1fr; background:var(--ground)}
@media(min-width:940px){ .login{grid-template-columns:1.05fr .95fr} }
.login-art{
  display:none; position:relative; overflow:hidden; padding:48px;
  background:linear-gradient(150deg, var(--brand) 0%, var(--brand-2) 55%, color-mix(in srgb, var(--brand-2) 70%, #0b0620) 100%);
  color:#fff; flex-direction:column; justify-content:space-between;
}
@media(min-width:940px){ .login-art{display:flex} }
.login-art .lmark{display:flex; align-items:center; gap:11px; position:relative; z-index:2}
.login-art .lmark .g{width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.18);display:grid;place-items:center;font-weight:800;font-size:.86rem;backdrop-filter:blur(6px)}
.login-art h1{font-size:2.15rem; line-height:1.15; max-width:14ch; position:relative; z-index:2}
.login-art .tag{font-size:.95rem; opacity:.82; max-width:34ch; margin-top:12px; position:relative; z-index:2}
.login-art .scene{position:absolute; inset:0; z-index:1}
.login-art .scene svg{width:100%; height:100%}
.login-art .facts{display:flex; gap:26px; position:relative; z-index:2; flex-wrap:wrap}
.login-art .facts div b{display:block; font-family:var(--f-display); font-size:1.5rem; font-weight:800}
.login-art .facts div span{font-size:.76rem; opacity:.78}

.login-form{display:grid; place-items:center; padding:24px; padding-block:24px}
.login-card{width:min(420px,100%)}
.login-card .lead{margin-bottom:20px}
.login-card .lead .eyebrow{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brand);font-weight:700}
.login-card .lead h2{font-size:1.55rem; margin-top:6px}
.login-card .lead p{font-size:.87rem; color:var(--ink-3); margin-top:6px}
.co-grid{display:grid; grid-template-columns:1fr; gap:9px; margin-bottom:6px}
.co-opt{
  display:flex; align-items:center; gap:12px; padding:13px; border-radius:var(--r-m); cursor:pointer;
  border:1px solid var(--line-strong); background:var(--surface); width:100%; text-align:left;
}
.co-opt:hover{border-color:var(--brand); background:var(--brand-soft)}
.co-opt .cg{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-weight:800;font-size:.8rem;color:#fff;flex:none}
.co-opt .cn{font-weight:700; font-size:.92rem}
.co-opt .cs{font-size:.73rem; color:var(--ink-3)}
.anim-in{opacity:0}

/* ---------- theme picker ---------- */
.swatches{display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:10px}
.swatch{
  border:1.5px solid var(--line-strong); background:var(--surface); border-radius:var(--r-m); padding:10px;
  cursor:pointer; display:flex; flex-direction:column; gap:8px; align-items:flex-start;
}
.swatch:hover{border-color:var(--line-strong); box-shadow:var(--shadow-1)}
.swatch.on{border-color:var(--brand); box-shadow:0 0 0 2px var(--brand-soft-2)}
.swatch .dots{display:flex; gap:5px}
.swatch .dots i{width:15px;height:15px;border-radius:50%;display:block}
.swatch .nm{font-size:.76rem; font-weight:700}

/* ---------- charts ---------- */
.chartrow{display:grid; grid-template-columns:1fr; gap:14px}
@media(min-width:820px){ .chartrow.two{grid-template-columns:1fr 1fr} }
@media(min-width:1080px){ .chartrow.three{grid-template-columns:1.1fr 1fr 1fr} }
.donutwrap{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.donutwrap svg{flex:none}
.donut-track{fill:none; stroke:var(--surface-3)}
.donut-seg{fill:none; stroke-linecap:butt; transition:stroke-width .18s}
.donut-seg:hover{stroke-width:26}
.donut-mid b{font-family:var(--f-display); font-weight:800; font-size:1.5rem; letter-spacing:-.03em}
.legend{display:flex; flex-direction:column; gap:7px; flex:1; min-width:130px}
.legend .li{display:flex; align-items:center; gap:8px; font-size:.8rem}
.legend .li i{width:10px;height:10px;border-radius:3px;flex:none;display:block}
.legend .li .lb{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-2)}
.legend .li .lv{font-variant-numeric:tabular-nums; font-weight:700}

.hbars{display:flex; flex-direction:column; gap:12px}
.hbar .top{display:flex; justify-content:space-between; gap:10px; font-size:.82rem; margin-bottom:5px}
.hbar .top .lv{color:var(--ink-3); font-variant-numeric:tabular-nums; flex:none; font-weight:600}
.hbar .track{height:9px; border-radius:999px; background:var(--surface-3); overflow:hidden}
.hbar .track i{display:block; height:100%; width:0; border-radius:999px; transition:width .9s cubic-bezier(.2,.8,.3,1)}

.linechart{width:100%; height:auto; display:block; overflow:visible}
.line-grid{stroke:var(--line); stroke-width:1}
.line-area{opacity:.16}
.line-path{fill:none; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round}
.line-dot{stroke:var(--surface); stroke-width:2.5}
.line-lab{font-size:11px; fill:var(--ink-3); font-family:var(--f-body)}

.radial .track{fill:none; stroke:var(--surface-3)}
.radial .arc{fill:none; stroke-linecap:round; transform:rotate(-90deg); transform-origin:center}

/* ---------- downloads ---------- */
.dl-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr)); gap:12px}
.dl{
  display:flex; gap:12px; align-items:flex-start; text-align:left; padding:15px; cursor:pointer;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l); box-shadow:var(--shadow-1); color:inherit;
}
.dl:hover{border-color:var(--brand-soft-2); box-shadow:var(--shadow-2)}
.dl .ic{width:38px;height:38px;border-radius:11px;flex:none;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand)}
.dl .ic svg{width:19px;height:19px}
.dl .t{font-weight:700; font-size:.9rem}
.dl .d{font-size:.75rem; color:var(--ink-3); line-height:1.4; margin-top:2px}
.dl[disabled]{opacity:.5; cursor:not-allowed}

.progline{height:6px;border-radius:999px;background:var(--surface-3);overflow:hidden;margin-top:10px}
.progline i{display:block;height:100%;background:var(--brand);width:0;transition:width .25s}

/* company chip in rail */
.cochip{
  display:flex; align-items:center; gap:9px; width:100%; padding:9px 10px; border-radius:var(--r-m);
  border:1px solid var(--line); background:var(--surface-2); cursor:pointer; text-align:left; margin-bottom:10px;
}
.cochip:hover{border-color:var(--brand-soft-2)}
.cochip .cg{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;color:#fff;font-size:.66rem;font-weight:800;flex:none}
.cochip .cn{flex:1;min-width:0;font-size:.8rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cochip svg{width:15px;height:15px;color:var(--ink-3);flex:none}

/* ---------- ambient motion ---------- */
@keyframes floatY { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
@keyframes floatY2 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(11px)} }
@keyframes pingOut { 0%{transform:scale(.5);opacity:.34} 70%{opacity:0} 100%{transform:scale(2.4);opacity:0} }
@keyframes softPulse { 0%,100%{opacity:.16; r:22} 50%{opacity:.32; r:30} }
.float-a{animation:floatY 7s ease-in-out infinite}
.float-b{animation:floatY2 9s ease-in-out infinite}
.float-c{animation:floatY 8s ease-in-out .8s infinite}
.ping{animation:pingOut 3.2s ease-out infinite; transform-origin:center}
.ping-2{animation-delay:1.6s}
.map-halo.pulse{animation:softPulse 3s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){
  .float-a,.float-b,.float-c,.ping,.map-halo.pulse{animation:none}
}

/* icon sizing guards where an icon sits inline in a large row */
.co-opt > svg, .who-list button > svg, .cochip > svg, .row .rt > svg, .empty svg{width:18px; height:18px; flex:none; color:var(--ink-3)}
.co-opt .cs{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.co-opt .cn{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.login-art::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(100deg, rgba(10,4,30,.42) 0%, rgba(10,4,30,.14) 48%, rgba(10,4,30,.3) 100%);
}
.login-art h1, .login-art .tag, .login-art .lmark, .login-art .facts{z-index:2}
.login-art .facts{margin-top:8px}

/* ---------- dashboard illustrations ---------- */
.empty-art{width:min(160px,42%); margin:0 auto 12px; display:block}
.empty-art svg{width:100%; height:auto; display:block}
.panel .empty{border:none; background:transparent; padding:18px 0}

.flowband{padding:16px 18px 14px}
.flow-art{width:100%; overflow-x:auto; padding:4px 0 2px}
.flow-art svg{width:100%; min-width:560px; height:auto; display:block}
@media (max-width:620px){
  .flow-art{scrollbar-width:thin}
  .flow-art svg{min-width:520px}
}
.flowband .hint{max-width:78ch}
.flow-art svg, .empty-art svg{font-family:var(--f-body)}
.chartrow{align-items:start}

/* ---------- demo mode ---------- */
.orline{display:flex; align-items:center; gap:12px; margin:18px 0 14px; color:var(--ink-3); font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em}
.orline::before, .orline::after{content:""; flex:1; height:1px; background:var(--line)}

.demobar{
  display:flex; align-items:center; gap:11px; flex-wrap:wrap;
  background:var(--warn-soft); border:1px solid color-mix(in srgb, var(--warn) 34%, transparent);
  color:var(--warn); border-radius:var(--r-m); padding:11px 14px; margin-bottom:16px;
  font-size:.82rem; line-height:1.45;
}
.demobar b{font-weight:800}
.demobar .dot{width:9px;height:9px;border-radius:50%;background:var(--warn);flex:none;animation:softBlink 2.4s ease-in-out infinite}
.demobar .btn{min-height:32px; padding:0 12px; font-size:.78rem; background:var(--surface); border-color:color-mix(in srgb, var(--warn) 36%, transparent); color:var(--warn)}
.demobar .btn:hover{background:var(--surface-2)}
.demobar .btn.primary{background:var(--warn); border-color:var(--warn); color:#fff; box-shadow:none}
@keyframes softBlink{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){ .demobar .dot{animation:none} }