/* =========================================================================
   Leads. Lavender Properties Ltd.
   Lead dispatch and commission attribution.

   The stylesheet below the fonts is the design from the demonstration, kept
   as it was built. Section 32 of the brief makes that design binding, so
   nothing here simplifies a screen or replaces a considered layout.

   Fonts are self hosted. Nothing is fetched from anywhere outside this
   application. Section 1.

   Run  php bin/install-fonts.php  once after deployment to place the files.
   Until then the fallback stack carries the interface, which is why every
   family below names real system faces after the hosted one.
   ========================================================================= */

@font-face {
  font-family: "Sora";
  src: url("/assets/fonts/sora-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sora";
  src: url("/assets/fonts/sora-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sora";
  src: url("/assets/fonts/sora-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}



/* ---- demonstration stylesheet, block 1 ---- */
:root{
  --brand:#792070;--brandD:#5E1857;--brandL:#9C3391;--orange:#EA8432;--orangeD:#C96A22;
  --ground:#F6F1F6;--blobA:#D9B7D5;--blobB:#F7D9B4;--blobC:#E7D6E6;
  --glass:rgba(255,255,255,.68);--glass2:rgba(255,255,255,.46);--line:rgba(255,255,255,.92);
  --ink:#2C1A2A;--ink2:#5B4459;--muted:#8E7A8C;--hair:rgba(121,32,112,.16);
  --accent:#8E2A83;--deep:#661B5E;--soft:rgba(142,42,131,.12);
  --comp:#D9762A;--compSoft:rgba(217,118,42,.15);
  --good:#2E7D5B;--goodSoft:rgba(46,125,91,.14);--warn:#C9791E;--bad:#B33A4E;--badSoft:rgba(179,58,78,.13);
  --grid:rgba(121,32,112,.10);--chartBg:#F6F1F6;
  --shL:0 20px 50px -24px rgba(80,20,74,.44);--shS:0 6px 18px -10px rgba(80,20,74,.36);
  --rL:20px;--rM:14px;--rS:10px;
}
:root[data-theme="dark"]{
  --ground:#181119;--blobA:#4A1F45;--blobB:#5C3A18;--blobC:#2B1E2C;
  --glass:rgba(48,34,48,.62);--glass2:rgba(48,34,48,.4);--line:rgba(214,158,206,.18);
  --ink:#F2E8F1;--ink2:#C9B4C6;--muted:#968094;--hair:rgba(214,158,206,.17);
  --accent:#A84C9E;--deep:#C56FB8;--soft:rgba(168,76,158,.20);
  --comp:#C4762F;--compSoft:rgba(196,118,47,.20);
  --good:#4E9C79;--goodSoft:rgba(78,156,121,.18);--warn:#C99A4A;--bad:#D0788D;--badSoft:rgba(208,120,141,.17);
  --grid:rgba(214,158,206,.12);--chartBg:#181119;
  --shL:0 20px 50px -22px rgba(0,0,0,.75);--shS:0 6px 18px -10px rgba(0,0,0,.62);
}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);font-family:Inter,"Segoe UI",system-ui,-apple-system,sans-serif;font-size:14px;
  line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100vh;overflow-x:hidden}
h1,h2,h3,.dsp{font-family:Sora,"Segoe UI",system-ui,-apple-system,sans-serif;letter-spacing:-.02em}
.blobs{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.blob{position:absolute;border-radius:50%;filter:blur(90px)}
.b1{width:44vw;height:44vw;background:var(--blobA);top:-14vw;left:-8vw;opacity:.62}
.b2{width:34vw;height:34vw;background:var(--blobB);top:16vw;right:-8vw;opacity:.48}
.b3{width:40vw;height:40vw;background:var(--blobC);bottom:-17vw;left:26vw;opacity:.56}
.wallpaper{position:fixed;inset:0;z-index:0;pointer-events:none;background-size:cover;background-position:center}
.wrap{position:relative;z-index:1;display:flex;min-height:100vh}
/* logo */
.logo{display:flex;align-items:center;gap:9px}
.logo .wm{font-family:Sora,"Segoe UI",system-ui,-apple-system,sans-serif;font-weight:800;font-size:19px;letter-spacing:-.04em;color:var(--brand);line-height:1;display:block}
:root[data-theme="dark"] .logo .wm{color:var(--deep)}
.logo .sb{font-size:8px;letter-spacing:.17em;text-transform:uppercase;color:var(--muted);display:block;margin-top:3px}
/* rail */
.rail{width:236px;flex:0 0 236px;padding:15px 12px;display:flex;flex-direction:column;gap:11px;border-right:1px solid var(--hair);
  background:var(--glass2);backdrop-filter:blur(16px)}
.railTop{display:flex;align-items:center;gap:8px}
.bell{all:unset;cursor:pointer;margin-left:auto;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;
  background:var(--glass);border:1px solid var(--hair);position:relative;font-size:14px;transition:.15s}
.bell:hover{border-color:var(--accent);transform:translateY(-1px)}
.bell .bd{position:absolute;top:-5px;right:-5px;background:var(--orange);color:#fff;font-size:8.4px;min-width:16px;height:16px;
  border-radius:999px;display:grid;place-items:center;font-family:"IBM Plex Mono",ui-monospace,"Cascadia Mono","Consolas",monospace;border:2px solid var(--ground);font-weight:600}
.who{background:var(--glass);border:1px solid var(--hair);border-radius:var(--rM);padding:8px 9px;position:relative;cursor:pointer}
.who:hover{border-color:var(--accent)}
.wt{display:flex;gap:9px;align-items:center}
.av{border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:600;flex:0 0 auto;width:31px;height:31px;font-size:11px;
  background-size:cover;background-position:center;overflow:hidden}
.who b{font-size:12.2px;display:block;line-height:1.25}
.who i{font-style:normal;font-size:9.6px;color:var(--muted)}
.who select{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
.nav{display:flex;flex-direction:column;gap:1px;overflow-y:auto}
.navsec{font-size:8.4px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);font-weight:600;margin:10px 0 3px 10px}
.nav button{all:unset;cursor:pointer;padding:7px 10px;border-radius:var(--rS);font-size:12.6px;color:var(--ink2);
  display:flex;align-items:center;gap:9px;transition:.16s}
.nav button:hover{background:var(--glass);color:var(--ink)}
.nav button[aria-current="true"]{background:linear-gradient(100deg,var(--soft),transparent);color:var(--deep);font-weight:600;box-shadow:inset 2px 0 0 var(--accent)}
.nav .ic{width:15px;text-align:center;font-size:12px;opacity:.85}
.nav .cnt{margin-left:auto;font-size:9.4px;font-family:"IBM Plex Mono",ui-monospace,"Cascadia Mono","Consolas",monospace;background:var(--orange);color:#fff;padding:1px 6px;border-radius:999px;font-weight:600}
.nav .cnt.p{background:var(--accent)}
.rf{margin-top:auto;font-size:9.4px;color:var(--muted);line-height:1.5}
.rf strong{color:var(--ink2);display:block;font-weight:600;margin-bottom:2px}
/* main */
.main{flex:1;min-width:0;padding:16px 20px 40px;display:flex;flex-direction:column;gap:12px}
.top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
h1{font-weight:600;font-size:23px;margin:0 0 2px}
.sub{color:var(--ink2);font-size:12.3px;margin:0;max-width:76ch}
.acts{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.glass{background:var(--glass);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);
  border:1px solid var(--line);border-radius:var(--rL);box-shadow:var(--shL)}
.btn{all:unset;cursor:pointer;padding:7px 12px;border-radius:10px;font-size:12px;font-weight:500;background:var(--glass);
  border:1px solid var(--line);color:var(--ink);box-shadow:var(--shS);transition:transform .14s}
.btn:hover{transform:translateY(-1px)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn.pri{background:linear-gradient(140deg,var(--accent),var(--deep));color:#fff;border-color:transparent}
.btn.orange{background:linear-gradient(140deg,var(--orange),var(--orangeD));color:#fff;border-color:transparent}
.btn.ok{background:var(--good);color:#fff;border-color:transparent}
.btn.sm{padding:4px 9px;font-size:10.8px}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.card{padding:15px 17px}
.card h2{font-size:14.5px;font-weight:600;margin:0 0 2px}
.cap{font-size:11.2px;color:var(--muted);margin:0 0 11px}
.hd{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.k{font-size:9.6px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:600}
.big{font-family:Sora,"Segoe UI",system-ui,-apple-system,sans-serif;font-size:26px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:10.4px;padding:3px 8px;border-radius:999px;white-space:nowrap;font-weight:500}
.pill i{width:6px;height:6px;border-radius:50%;background:currentColor}
.p-a{background:var(--soft);color:var(--deep)}.p-o{background:var(--compSoft);color:var(--comp)}
.p-g{background:var(--goodSoft);color:var(--good)}.p-b{background:var(--badSoft);color:var(--bad)}
.p-m{background:var(--grid);color:var(--muted)}
.money{font-family:"IBM Plex Mono",ui-monospace,"Cascadia Mono","Consolas",monospace;font-variant-numeric:tabular-nums}
.ref{font-family:"IBM Plex Mono",ui-monospace,"Cascadia Mono","Consolas",monospace;font-size:10.6px;color:var(--deep);font-weight:500}
.g5{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.split{display:grid;grid-template-columns:1.6fr 1fr;gap:10px;align-items:start}
.split2{display:grid;grid-template-columns:1fr 1.6fr;gap:10px;align-items:start}
.tile{padding:12px 14px;display:flex;flex-direction:column;gap:3px;min-height:94px;position:relative;overflow:hidden}
.tile .foot{margin-top:auto;font-size:10.4px;color:var(--ink2)}
.tile .tick{position:absolute;top:0;right:0;width:50px;height:50px;opacity:.08;border-radius:0 0 0 100%;background:var(--accent)}
.spark{height:22px;margin-top:2px}
.delta{font-size:9.8px;font-family:"IBM Plex Mono",ui-monospace,"Cascadia Mono","Consolas",monospace;padding:1px 5px;border-radius:5px}
.up{background:var(--goodSoft);color:var(--good)}.down{background:var(--badSoft);color:var(--bad)}

/* ---- demonstration stylesheet, block 2 ---- */
/* ============ HERO on every landing page ============ */
.hero{position:relative;border-radius:var(--rL);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shL);min-height:158px}
.heroBg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center}
.heroVeil{position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(0,0,0,.42),rgba(0,0,0,.12) 62%)}
.heroIn{position:relative;z-index:2;padding:20px 22px;display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap;color:#fff}
.heroIn.dark{color:var(--ink)}
.heroIn.dark .heroSub,.heroIn.dark .prov{opacity:.9}
.heroWho{font-size:10px;text-transform:uppercase;letter-spacing:.14em;font-weight:700;opacity:.8;margin-bottom:6px;display:flex;align-items:center;gap:7px}
.heroWho .live{width:6px;height:6px;border-radius:50%;background:#6FE0A6;animation:ping 2.2s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(111,224,166,.6)}70%{box-shadow:0 0 0 8px rgba(111,224,166,0)}100%{box-shadow:0 0 0 0 rgba(111,224,166,0)}}
.heroHi{font-family:Sora,"Segoe UI",system-ui,-apple-system,sans-serif;font-size:25px;font-weight:600;letter-spacing:-.03em;line-height:1.2;margin:0 0 5px;text-wrap:balance}
.heroSub{font-size:12.6px;margin:0;max-width:60ch;line-height:1.55;opacity:.94}
.prov{margin-top:12px;display:flex;gap:9px;align-items:flex-start;max-width:56ch;font-size:12.2px;line-height:1.55;font-style:italic;opacity:.95}
.prov .qm{font-family:Sora,serif;font-size:26px;line-height:.8;opacity:.5}
.heroSide{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;align-items:flex-start}
.hStat{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(10px);border-radius:var(--rM);padding:10px 13px;min-width:96px}
.heroIn.dark .hStat{background:var(--glass2);border-color:var(--hair)}
.hStat .k3{font-size:8.6px;text-transform:uppercase;letter-spacing:.1em;opacity:.78;font-weight:700}
.hStat .v3{font-family:Sora,"Segoe UI",system-ui,-apple-system,sans-serif;font-size:20px;font-weight:600;letter-spacing:-.02em;margin-top:2px;font-variant-numeric:tabular-nums}
.heroEdit{position:absolute;bottom:11px;right:13px;z-index:3}
/* ============ CLAIMS BANNER ============ */
.cb{border-radius:var(--rL);padding:16px 20px;display:flex;gap:16px;align-items:center;flex-wrap:wrap;
  border:1px solid var(--line);background:var(--glass);box-shadow:var(--shS);transition:.3s}
.cb.calm{opacity:.92}
.cb.loud{border-color:transparent;color:#fff;box-shadow:0 0 0 1px rgba(234,132,50,.5),0 14px 40px -16px rgba(234,132,50,.75);
  background:linear-gradient(135deg,#EA8432,#C96A22 60%,#A8501B);animation:pulseGlow 2.8s ease-in-out infinite}
@keyframes pulseGlow{0%,100%{box-shadow:0 0 0 1px rgba(234,132,50,.5),0 14px 40px -16px rgba(234,132,50,.7)}
  50%{box-shadow:0 0 0 1px rgba(234,132,50,.75),0 18px 52px -14px rgba(234,132,50,.95)}}
.cb .cbN{font-family:Sora,"Segoe UI",system-ui,-apple-system,sans-serif;font-size:38px;font-weight:800;letter-spacing:-.04em;line-height:1}
.cb .cbT{font-family:Sora,"Segoe UI",system-ui,-apple-system,sans-serif;font-size:15px;font-weight:600;margin-bottom:2px}
.cb .cbD{font-size:11.8px;opacity:.9;line-height:1.5;max-width:52ch}
.cb .cbBtn{margin-left:auto;background:#fff;color:#B0541A;border:none;padding:11px 20px;border-radius:12px;
  font-family:Sora,"Segoe UI",system-ui,-apple-system,sans-serif;font-size:13px;font-weight:700;cursor:pointer;box-shadow:0 8px 20px -10px rgba(0,0,0,.5);transition:transform .13s}
.cb.calm .cbBtn{background:var(--glass2);color:var(--ink);border:1px solid var(--hair);box-shadow:none}
.cb .cbBtn:hover{transform:translateY(-2px)}
.cb .ring{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;flex:0 0 56px;
  background:rgba(255,255,255,.2);border:2px solid rgba(255,255,255,.42);font-size:22px}
.cb.calm .ring{background:var(--goodSoft);border-color:transparent;color:var(--good)}
/* ============ POOL ============ */
.pool{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:14px}
.oc{position:relative;border-radius:20px;overflow:hidden;background:var(--glass);border:1px solid var(--line);
  box-shadow:var(--shS);transition:transform .24s cubic-bezier(.2,.8,.2,1),box-shadow .24s,border-color .2s;display:flex;flex-direction:column}
.oc:hover{transform:translateY(-4px);box-shadow:0 26px 54px -26px rgba(80,20,74,.5);border-color:var(--accent)}
.oc.gone{opacity:0;transform:scale(.88) translateY(-14px);pointer-events:none}
.oc.won{animation:ocwin .6s cubic-bezier(.2,1.6,.4,1)}
@keyframes ocwin{0%{transform:scale(1)}35%{transform:scale(1.05)}100%{transform:scale(1)}}
.ocTop{display:flex;align-items:center;gap:8px;padding:11px 14px 0}
.ocCh{display:inline-flex;align-items:center;gap:5px;font-size:10.4px;font-weight:600;padding:4px 9px;border-radius:999px}
.ocTime{margin-left:auto;font-family:"IBM Plex Mono",ui-monospace,"Cascadia Mono","Consolas",monospace;font-size:10px;color:var(--muted);display:flex;align-items:center;gap:5px}
.ocTime.hot{color:var(--bad);font-weight:600}
.ocTime .cd{width:6px;height:6px;border-radius:50%;background:currentColor;animation:blip 1.5s infinite}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.18}}
.ocMoney{margin:10px 14px 0;border-radius:16px;padding:20px 16px 16px;text-align:center;position:relative;overflow:hidden;
  background:linear-gradient(145deg,#EA8432 0%,#D9762A 52%,#B85B1E 100%);color:#fff;box-shadow:0 14px 30px -16px rgba(217,118,42,.85)}
.ocMoney::before{content:"";position:absolute;top:-40%;left:-20%;width:80%;height:180%;background:radial-gradient(circle,rgba(255,255,255,.30),transparent 62%);pointer-events:none}
.ocMoney::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,.07) 0 2px,transparent 2px 9px);pointer-events:none}
.ocMoney .lbl{position:relative;font-size:9px;text-transform:uppercase;letter-spacing:.2em;font-weight:700;opacity:.92}
.ocMoney .cur{position:relative;font-size:12px;font-weight:600;opacity:.9;vertical-align:super;margin-right:2px}
.ocMoney .amt{position:relative;font-family:Sora,"Segoe UI",system-ui,-apple-system,sans-serif;font-size:36px;font-weight:800;letter-spacing:-.045em;line-height:1.05;text-shadow:0 2px 12px rgba(120,40,10,.3)}
.ocMoney .fine{position:relative;font-size:8.6px;opacity:.78;margin-top:5px}
.ocBody{padding:13px 15px 0;flex:1}
.ocTitle{font-family:Sora,"Segoe UI",system-ui,-apple-system,sans-serif;font-size:15.5px;font-weight:600;line-height:1.25;letter-spacing:-.02em}
.ocMeta{font-size:11px;color:var(--muted);margin-top:3px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.ocMeta .dot{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.5}
.ocFacts{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.ocFact{font-size:10px;padding:4px 8px;border-radius:8px;background:var(--glass2);border:1px solid var(--hair);color:var(--ink2)}
.ocFact b{color:var(--ink);font-weight:600}
.ocLock{margin:11px 15px 0;padding:9px 11px;border-radius:11px;background:var(--grid);border:1px dashed var(--hair);display:flex;align-items:center;gap:9px}
.ocLock .ico{font-size:13px;opacity:.6}
.ocLock .tx{font-size:10px;color:var(--muted);line-height:1.35}
.ocLock .tx b{display:block;font-family:"IBM Plex Mono",ui-monospace,"Cascadia Mono","Consolas",monospace;font-size:12px;color:var(--ink2);letter-spacing:.05em;margin-top:1px}
.ocFoot{padding:13px 15px 15px}
.ocBtn{width:100%;background:linear-gradient(140deg,var(--accent),var(--deep));color:#fff;border:none;padding:13px;border-radius:13px;
  font-family:Sora,"Segoe UI",system-ui,-apple-system,sans-serif;font-size:14px;font-weight:700;cursor:pointer;box-shadow:0 10px 24px -10px var(--accent);
  transition:transform .13s,box-shadow .13s;position:relative;overflow:hidden}
.ocBtn::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.34),transparent);transform:skewX(-18deg);animation:sheen 3.6s infinite}
@keyframes sheen{0%{left:-70%}55%{left:130%}100%{left:130%}}
.ocBtn:hover{transform:translateY(-2px);box-shadow:0 16px 30px -10px var(--accent)}
.ocBtn:active{transform:scale(.97)}
.ocNote{text-align:center;font-size:8.8px;color:var(--muted);margin-top:8px;line-height:1.4}
.ocFlag{display:inline-flex;align-items:center;gap:4px;font-size:8.6px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 8px;border-radius:999px;color:#fff;background:var(--bad);box-shadow:var(--shS)}
.ocFlag.back{background:var(--comp)}
.ocFlag i{width:5px;height:5px;border-radius:50%;background:#fff;animation:blip 1.5s infinite}
.emptyp{text-align:center;padding:44px 18px;color:var(--muted)}
.emptyp .e{font-size:30px;margin-bottom:8px}
.wc{border-radius:var(--rM);border:1px solid var(--hair);background:var(--glass);padding:14px 15px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--shS);transition:.2s}
.wc:hover{border-color:var(--accent);transform:translateY(-2px)}
.wcTop{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.wcName{font-family:Sora,"Segoe UI",system-ui,-apple-system,sans-serif;font-size:14px;font-weight:600}
.stages{display:flex;gap:4px}
.stg{flex:1;height:32px;border-radius:9px;border:1px solid var(--hair);background:var(--grid);cursor:pointer;display:grid;place-items:center;
  font-size:8.8px;font-weight:700;color:var(--muted);transition:.2s;padding:0 2px;text-align:center}
.stg:hover{transform:translateY(-2px)}
.stg.on{color:#fff;border-color:transparent;box-shadow:0 4px 10px -5px currentColor}
.stg.cur{outline:2px solid var(--ink);outline-offset:2px}
.stagebar{height:7px;border-radius:999px;background:var(--grid);overflow:hidden;margin:7px 0 4px}
.stagebar i{display:block;height:100%;border-radius:999px;transition:width .6s cubic-bezier(.2,.8,.2,1)}

/* ---- demonstration stylesheet, block 3 ---- */
/* ==================== PHASE TWO COMPONENTS ==================== */

/* section header used across the new pages */
.sect{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin:22px 0 11px}
.sect h2{margin:0;font-size:19px;letter-spacing:-.025em}
.sect .cap{margin:0}
.sect .rt{margin-left:auto;display:flex;gap:7px;align-items:center}

/* ---------- the funnel ---------- */
.fun{display:flex;flex-direction:column;align-items:center;gap:0;padding:6px 0 2px}
.funRow{width:100%;display:flex;justify-content:center}
.funBar{position:relative;height:52px;border-radius:12px;display:flex;align-items:center;justify-content:space-between;
  padding:0 16px;color:#fff;overflow:hidden;box-shadow:var(--shS);transition:transform .18s ease}
.funBar:hover{transform:translateY(-2px)}
.funBar::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.18),transparent 62%)}
.funBar b{position:relative;font-family:Sora,"Segoe UI",system-ui,-apple-system,sans-serif;font-size:20px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.funBar span{position:relative;font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.92;font-weight:600}
.funGap{height:26px;display:flex;align-items:center;justify-content:center;position:relative;width:100%}
.funGap::before{content:"";position:absolute;top:0;bottom:0;width:2px;background:var(--hair)}
.funGap em{position:relative;font-style:normal;font-family:"IBM Plex Mono",ui-monospace,"Cascadia Mono","Consolas",monospace;font-size:10px;
  background:var(--glass);border:1px solid var(--hair);border-radius:999px;padding:3px 9px;color:var(--muted);
  backdrop-filter:blur(6px)}
.funGap em.good{color:var(--good);border-color:color-mix(in srgb,var(--good) 40%,transparent)}
.funGap em.bad{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,transparent)}
.funEnd{margin-top:12px;text-align:center;font-size:12px;color:var(--muted)}
.funEnd b{font-family:Sora,"Segoe UI",system-ui,-apple-system,sans-serif;color:var(--good);font-size:17px;letter-spacing:-.02em}

/* ---------- channel table ---------- */
.chTable{display:grid;gap:2px}
.chHead,.chRow{display:grid;grid-template-columns:minmax(140px,1.5fr) 70px 62px 54px 54px 54px 84px;
  gap:8px;align-items:center;padding:9px 12px}
.chHead{font-size:9.6px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700;padding-bottom:2px}
.chRow{border-radius:var(--rS);background:var(--glass2);border:1px solid transparent;transition:.16s;cursor:default}
.chRow:hover{border-color:var(--hair);background:var(--glass);transform:translateX(2px)}
.chRow .cn{display:flex;align-items:center;gap:7px;font-weight:600;font-size:12.6px;min-width:0}
.chRow .cn i{width:7px;height:7px;border-radius:2px;flex:none}
.chRow .num{font-family:"IBM Plex Mono",ui-monospace,"Cascadia Mono","Consolas",monospace;font-size:11.6px;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink2)}
.chRow .num.dim{color:var(--muted)}
.chRow .money{font-family:"IBM Plex Mono",ui-monospace,"Cascadia Mono","Consolas",monospace;font-size:11.8px;text-align:right;color:var(--comp);font-weight:600}
.chRow .cv{position:relative;height:18px;border-radius:5px;background:var(--grid);overflow:hidden}
.chRow .cv i{position:absolute;left:0;top:0;bottom:0;border-radius:5px}
.chRow .cv span{position:absolute;inset:0;display:grid;place-items:center;font-family:"IBM Plex Mono",ui-monospace,"Cascadia Mono","Consolas",monospace;
  font-size:9.6px;font-weight:600;color:var(--ink)}

/* ---------- content performance ---------- */
.cp{display:grid;gap:7px}
.cpRow{display:grid;grid-template-columns:1fr auto;gap:4px 14px;padding:11px 13px;border-radius:var(--rM);
  background:var(--glass2);border:1px solid var(--hair);transition:.16s}
.cpRow:hover{border-color:var(--accent);transform:translateY(-1px)}
.cpRow .t{font-weight:600;font-size:12.8px;line-height:1.35}
.cpRow .mini{display:flex;gap:11px;flex-wrap:wrap;font-size:10.6px;color:var(--muted);margin-top:3px}
.cpRow .mini b{font-family:"IBM Plex Mono",ui-monospace,"Cascadia Mono","Consolas",monospace;color:var(--ink2);font-weight:600}
.cpRow .rr{text-align:right;white-space:nowrap}
.cpRow .rr .v{font-family:Sora,"Segoe UI",system-ui,-apple-system,sans-serif;font-size:16px;letter-spacing:-.03em;color:var(--comp)}
.cpRow .rr .l{font-size:9.4px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);display:block}
.cpBar{grid-column:1/-1;height:5px;border-radius:3px;background:var(--grid);overflow:hidden;margin-top:6px}
.cpBar i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--accent),var(--comp))}

/* ---------- search queries ---------- */
.qRow{display:grid;grid-template-columns:1fr 66px 56px 74px;gap:10px;align-items:center;
  padding:9px 12px;border-bottom:1px solid var(--hair)}
.qRow:last-child{border-bottom:0}
.qRow .q{font-size:12.4px;color:var(--ink2)}
.qRow .n{font-family:"IBM Plex Mono",ui-monospace,"Cascadia Mono","Consolas",monospace;font-size:11.4px;text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
.qPos{display:inline-flex;align-items:center;gap:5px;justify-content:flex-end;font-family:"IBM Plex Mono",ui-monospace,"Cascadia Mono","Consolas",monospace;font-size:11.4px}
.qPos b{color:var(--ink)}
.qPos i{font-style:normal;font-size:9.6px;padding:1px 5px;border-radius:999px}
.qPos i.up{background:var(--goodSoft);color:var(--good)}
.qPos i.down{background:var(--badSoft);color:var(--bad)}

/* ---------- score ring ---------- */
.ring{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none;position:relative}
.ring::before{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--glass)}
.ring b{position:relative;font-family:"IBM Plex Mono",ui-monospace,"Cascadia Mono","Consolas",monospace;font-size:11.4px;font-weight:600}
.ring.sm{width:30px;height:30px}
.ring.sm b{font-size:10px}
.scoreTag{display:inline-flex;align-items:center;gap:5px;font-size:9.6px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;padding:3px 8px;border-radius:999px}

/* ---------- pipeline board ---------- */
.board{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;align-items:start}
.bcol{background:var(--glass2);border:1px solid var(--hair);border-radius:var(--rM);padding:10px;min-height:90px}
.bcolTop{display:flex;align-items:center;gap:7px;margin-bottom:9px;padding-bottom:8px;border-bottom:1px solid var(--hair)}
.bcolTop i{width:8px;height:8px;border-radius:3px;flex:none}
.bcolTop b{font-size:11.4px;letter-spacing:-.01em}
.bcolTop span{margin-left:auto;font-family:"IBM Plex Mono",ui-monospace,"Cascadia Mono","Consolas",monospace;font-size:10.4px;color:var(--muted)}
.pcard{background:var(--glass);border:1px solid var(--hair);border-radius:var(--rS);padding:10px 11px;margin-bottom:7px;
  cursor:pointer;transition:.16s}
.pcard:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shS)}
.pcard .pn{font-weight:600;font-size:12.4px;line-height:1.3}
.pcard .pm{font-size:10.4px;color:var(--muted);margin-top:2px}
.pcard .pf{display:flex;align-items:center;gap:6px;margin-top:8px;padding-top:7px;border-top:1px solid var(--hair)}
.pcard .pf .u{font-family:"IBM Plex Mono",ui-monospace,"Cascadia Mono","Consolas",monospace;font-size:10px;color:var(--muted)}
.pcard .pf .amt{margin-left:auto;font-family:"IBM Plex Mono",ui-monospace,"Cascadia Mono","Consolas",monospace;font-size:11.4px;color:var(--comp);font-weight:600}
.unitPill{display:inline-flex;align-items:center;gap:4px;font-size:9.6px;font-weight:700;padding:2px 7px;border-radius:999px;
  background:var(--soft);color:var(--accent)}

/* ---------- relationship rows ---------- */
.llRow{display:grid;grid-template-columns:minmax(150px,1.4fr) 96px 1fr 92px;gap:12px;align-items:center;
  padding:12px 13px;border-radius:var(--rM);background:var(--glass2);border:1px solid var(--hair);
  margin-bottom:7px;transition:.16s}
.llRow:hover{border-color:var(--accent);transform:translateY(-1px)}
.llRow .ln{font-weight:600;font-size:13px}
.llRow .lm{font-size:10.6px;color:var(--muted);margin-top:2px}
.units{display:flex;gap:3px;align-items:center}
.units i{width:9px;height:16px;border-radius:2px;background:var(--soft);border:1px solid var(--hair)}
.units i.rep{background:var(--comp);border-color:transparent}
.units i.first{background:var(--accent);border-color:transparent}
.llRow .note{font-size:11.2px;color:var(--ink2);line-height:1.45}
.llRow .tot{text-align:right}
.llRow .tot b{font-family:"IBM Plex Mono",ui-monospace,"Cascadia Mono","Consolas",monospace;font-size:13px;color:var(--comp)}
.llRow .tot span{display:block;font-size:9.4px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}

/* ---------- lost value callout ---------- */
.lost{border-radius:var(--rM);border:1px solid color-mix(in srgb,var(--bad) 34%,transparent);
  background:linear-gradient(135deg,var(--badSoft),transparent 70%);padding:14px 16px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.lost .big{font-family:Sora,"Segoe UI",system-ui,-apple-system,sans-serif;font-size:26px;letter-spacing:-.035em;color:var(--bad)}
.lost .tx{flex:1;min-width:220px;font-size:12.4px;color:var(--ink2);line-height:1.5}
.lostRow{display:flex;gap:10px;align-items:center;padding:9px 2px;border-bottom:1px solid var(--hair);font-size:12px}
.lostRow:last-child{border-bottom:0}
.lostRow .w{font-family:"IBM Plex Mono",ui-monospace,"Cascadia Mono","Consolas",monospace;font-size:10.6px;color:var(--bad);background:var(--badSoft);
  padding:2px 7px;border-radius:999px;flex:none}
.lostRow .g{flex:1;min-width:0}
.lostRow .g .n{font-weight:600}
.lostRow .g .s{font-size:10.6px;color:var(--muted);margin-top:1px}
.lostRow .m{font-family:"IBM Plex Mono",ui-monospace,"Cascadia Mono","Consolas",monospace;color:var(--comp);font-size:11.6px;white-space:nowrap}

/* ---------- marketing note ---------- */
.mknote{border-left:3px solid var(--comp);background:var(--compSoft);border-radius:0 var(--rM) var(--rM) 0;
  padding:13px 16px}
.mknote b{display:block;font-family:Sora,"Segoe UI",system-ui,-apple-system,sans-serif;font-size:13.4px;letter-spacing:-.02em;margin-bottom:5px}
.mknote p{margin:0;font-size:12.4px;line-height:1.55;color:var(--ink2)}
.mknote .who{background:none;border:0;padding:0;margin-top:8px;font-size:10.4px;color:var(--muted);cursor:default}

/* ---------- change requests ---------- */
.reqRow{display:flex;gap:12px;align-items:flex-start;padding:13px;border-radius:var(--rM);
  background:var(--glass2);border:1px solid var(--hair);margin-bottom:7px;transition:.16s}
.reqRow:hover{border-color:var(--accent)}
.reqRow .rg{flex:1;min-width:0}
.reqRow .rt2{font-weight:600;font-size:13px}
.reqRow .rd{font-size:11.6px;color:var(--ink2);margin-top:3px;line-height:1.45}
.reqRow .rm{font-size:10.4px;color:var(--muted);margin-top:6px;font-family:"IBM Plex Mono",ui-monospace,"Cascadia Mono","Consolas",monospace}
.reqRow .rr2{text-align:right;white-space:nowrap}
.reqRow .rr2 .amt{font-family:Sora,"Segoe UI",system-ui,-apple-system,sans-serif;font-size:15px;letter-spacing:-.03em;color:var(--comp)}
.reqRow .rr2 .inc{font-size:10.4px;color:var(--good);font-weight:600}
.reqRow .rr2 .d2{font-size:9.6px;color:var(--muted);display:block;margin-top:2px}

/* ---------- gbp tiles ---------- */
.gbp{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.gbpT{background:var(--glass2);border:1px solid var(--hair);border-radius:var(--rM);padding:11px 12px}
.gbpT .v{font-family:Sora,"Segoe UI",system-ui,-apple-system,sans-serif;font-size:20px;letter-spacing:-.035em;display:block;line-height:1.1}
.gbpT .l{font-size:9.6px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);display:block;margin-top:3px}
.gbpT .d{font-size:10px;color:var(--good);font-family:"IBM Plex Mono",ui-monospace,"Cascadia Mono","Consolas",monospace;margin-top:4px;display:block}

/* ---------- speed rows ---------- */
.spRow{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--hair)}
.spRow:last-child{border-bottom:0}
.spRow .bar2{flex:1;height:8px;border-radius:4px;background:var(--grid);overflow:hidden}
.spRow .bar2 i{display:block;height:100%;border-radius:4px}
.spRow .v{font-family:"IBM Plex Mono",ui-monospace,"Cascadia Mono","Consolas",monospace;font-size:11.6px;width:52px;text-align:right}

@media (max-width:1050px){
  .board{grid-template-columns:1fr 1fr}
  .gbp{grid-template-columns:1fr 1fr}
  .chHead,.chRow{grid-template-columns:minmax(120px,1.4fr) 58px 50px 46px 46px 46px 72px;gap:5px;padding:8px}
  .llRow{grid-template-columns:1fr 80px 88px}
  .llRow .note{display:none}
}
@media (max-width:680px){
  .board{grid-template-columns:1fr}
  .chHead{display:none}
  .chRow{grid-template-columns:1fr 60px 76px;grid-auto-rows:auto}
  .chRow .num.hideS{display:none}
  .llRow{grid-template-columns:1fr 84px}
  .llRow .units{display:none}
  .qRow{grid-template-columns:1fr 56px 66px}
  .qRow .n.hideS{display:none}
}


/* ---------- trackers ---------- */
.tgRow{display:flex;align-items:flex-start;gap:12px;padding:13px;border-radius:var(--rM);
  background:var(--glass2);border:1px solid var(--hair);margin-bottom:8px;transition:.16s}
.tgRow.on{border-color:color-mix(in srgb,var(--good) 34%,transparent)}
.tgRow:hover{border-color:var(--accent)}
.tgI{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;font-size:15px;background:var(--soft);flex:none}
.tgG{flex:1;min-width:0}
.tgN{font-weight:600;font-size:13px}
.tgD{font-size:11.2px;color:var(--muted);margin-top:2px;line-height:1.45}
.tgIn{display:flex;gap:7px;margin-top:9px}
.tgIn input{flex:1;min-width:0;font-family:"IBM Plex Mono",ui-monospace,"Cascadia Mono","Consolas",monospace;font-size:11.6px;
  background:var(--glass);border:1px solid var(--hair);border-radius:var(--rS);padding:8px 10px;color:var(--ink)}
.tgIn input:focus{outline:none;border-color:var(--accent)}
.addCard{all:unset;box-sizing:border-box;cursor:pointer;border:1px dashed var(--line);background:transparent;
  border-radius:var(--rM);padding:18px;display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  transition:.16s;justify-content:center}
.addCard:hover{border-color:var(--accent);background:var(--glass2)}
.addCard .plus{font-size:24px;color:var(--accent);line-height:1}
.addCard b{font-size:13px}
.addCard i{font-style:normal;font-size:11.2px;color:var(--muted);line-height:1.45}

/* ---------- arrange mode ---------- */
.arrBar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:11px 14px;border-radius:var(--rM);
  background:var(--soft);border:1px solid var(--accent);margin-bottom:12px}
.arrBar b{font-size:12.6px}
.arrBar .cap{margin:0;flex:1;min-width:170px}
.arrHandle{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;
  background:var(--glass);border:1px solid var(--accent);margin-bottom:6px;max-width:80vw}
.arrHandle .nm{flex:1;font-size:12px;font-weight:600}
.arrHandle button{all:unset;cursor:pointer;width:24px;height:24px;border-radius:6px;display:grid;place-items:center;
  color:var(--muted);font-size:12px;border:1px solid var(--hair)}
.arrHandle button:hover{border-color:var(--accent);color:var(--accent)}
.arrHandle button:disabled{opacity:.3;cursor:default}
.arrHandle .grip{color:var(--muted);cursor:grab;font-size:13px}

/* ---------- update packages ---------- */
.updRow{display:flex;align-items:center;gap:12px;padding:12px 13px;border-radius:var(--rM);
  background:var(--glass2);border:1px solid var(--hair);margin-bottom:7px}
.updV{font-family:"IBM Plex Mono",ui-monospace,"Cascadia Mono","Consolas",monospace;font-weight:600;font-size:12.4px;min-width:52px}
.updG{flex:1;min-width:0}
.updG .n{font-size:12.2px;line-height:1.45}
.updG .m{font-size:10.4px;color:var(--muted);margin-top:3px;font-family:"IBM Plex Mono",ui-monospace,"Cascadia Mono","Consolas",monospace}
.drop{border:1.5px dashed var(--line);border-radius:var(--rM);padding:26px 18px;text-align:center;
  transition:.18s;cursor:pointer;background:var(--glass2)}
.drop:hover,.drop.hot{border-color:var(--accent);background:var(--soft)}
.drop .e{font-size:26px;display:block;margin-bottom:7px}
.drop b{display:block;font-size:13.4px;margin-bottom:4px}
.drop span{font-size:11.4px;color:var(--muted);line-height:1.5;display:block;max-width:44ch;margin:0 auto}
.stagedBox{border:1px solid var(--accent);background:var(--soft);border-radius:var(--rM);padding:14px}

.permGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:6px;max-height:320px;overflow-y:auto;padding-right:3px}
.permChip{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:8px;padding:8px 10px;
  border-radius:9px;border:1px solid var(--hair);font-size:11.4px;line-height:1.3;transition:.14s;background:var(--glass2)}
.permChip:hover{border-color:var(--accent)}
.permChip .pd{width:8px;height:8px;border-radius:3px;flex:none;background:var(--grid)}
.permChip.role .pd{background:var(--good)}
.permChip.role{border-color:color-mix(in srgb,var(--good) 30%,transparent)}
.permChip.extra .pd{background:var(--comp)}
.permChip.extra{border-color:var(--comp);background:var(--compSoft)}
.permChip.deny .pd{background:var(--bad)}
.permChip.deny{border-color:var(--bad);background:var(--badSoft);text-decoration:line-through;opacity:.75}
.permChip.none{opacity:.5}
.permKey{display:flex;gap:14px;flex-wrap:wrap;margin-top:11px;font-size:10.6px;color:var(--muted)}
.permKey i{display:inline-block;width:8px;height:8px;border-radius:3px;margin-right:5px}
.permKey i.role{background:var(--good)}.permKey i.extra{background:var(--comp)}
.permKey i.deny{background:var(--bad)}.permKey i.none{background:var(--grid)}

.heroEdit{display:flex;gap:6px;flex-wrap:wrap}
.arrOn{outline:1.5px dashed var(--accent);outline-offset:5px;border-radius:var(--rM);position:relative}
.arrOn>.arrHandle{position:absolute;top:-15px;left:10px;z-index:6;margin:0;
  background:var(--surface,#fff);box-shadow:var(--shS);backdrop-filter:blur(10px)}
:root[data-theme="dark"] .arrOn>.arrHandle{background:#2a1f2a}
.arrOn.dragging{opacity:.45}

/* ---- demonstration stylesheet, block 4 ---- */
/* ==================== DATA SOURCES ==================== */
.srcGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:10px}
.srcCard{background:var(--glass);border:1px solid var(--hair);border-radius:var(--rM);padding:14px 15px;
  cursor:pointer;transition:.18s;display:flex;flex-direction:column;gap:11px;position:relative;overflow:hidden}
.srcCard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--muted)}
.srcCard.live::before{background:var(--good)}
.srcCard.attention::before{background:var(--bad)}
.srcCard.manual::before{background:var(--comp)}
.srcCard:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:var(--shS)}
.srcTop{display:flex;align-items:center;gap:10px}
.srcIco{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:16px;
  background:var(--soft);flex:none}
.srcN{font-weight:600;font-size:13.4px;letter-spacing:-.015em}
.srcA{font-size:10.6px;color:var(--muted);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srcDot{width:8px;height:8px;border-radius:50%;flex:none}
.srcCard.live .srcDot{box-shadow:0 0 0 4px color-mix(in srgb,var(--good) 22%,transparent)}
.srcCard.attention .srcDot{animation:blip 1.4s infinite}
.srcGives{display:flex;flex-wrap:wrap;gap:5px}
.srcGives span{font-size:9.8px;padding:3px 7px;border-radius:999px;background:var(--glass2);
  border:1px solid var(--hair);color:var(--ink2)}
.srcFoot{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:10px;border-top:1px solid var(--hair)}
.srcSt{font-size:10.4px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.srcSync{font-family:"IBM Plex Mono",ui-monospace,"Cascadia Mono","Consolas",monospace;font-size:9.8px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srcFoot .btn{margin-left:auto}
.snip{font-family:"IBM Plex Mono",ui-monospace,"Cascadia Mono","Consolas",monospace;font-size:11px;background:var(--glass2);border:1px solid var(--hair);
  border-radius:var(--rS);padding:12px 13px;overflow-x:auto;white-space:pre;margin:0;color:var(--ink2);line-height:1.6}

/* ==================== LOGIN ==================== */
.lgWrap{position:fixed;inset:0;z-index:60;overflow-y:auto;display:flex;flex-direction:column;
  background:#170C16;color:#F4EAF3}
:root[data-theme="dark"] .lgWrap{background:#120A12}
.lgSky{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.lgSky i{position:absolute;border-radius:50%;filter:blur(90px);display:block}
.lgSky .s1{width:56vw;height:56vw;background:#792070;opacity:.62;top:-22vw;left:-14vw;animation:dr1 26s ease-in-out infinite}
.lgSky .s2{width:40vw;height:40vw;background:#EA8432;opacity:.34;bottom:-18vw;right:-8vw;animation:dr2 32s ease-in-out infinite}
.lgSky .s3{width:34vw;height:34vw;background:#9C3391;opacity:.30;top:34vh;left:38vw;animation:dr3 38s ease-in-out infinite}
@keyframes dr1{0%,100%{transform:translate(0,0)}50%{transform:translate(5vw,4vh)}}
@keyframes dr2{0%,100%{transform:translate(0,0)}50%{transform:translate(-4vw,-5vh)}}
@keyframes dr3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-6vw,3vh) scale(1.12)}}

/* the live board drifting behind everything */
.lgBoard{position:absolute;inset:0;overflow:hidden;pointer-events:none;
  mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);opacity:.15}
.lgBoardIn{position:absolute;left:0;right:0;top:0;animation:drift 68s linear infinite;padding:0 4vw}
@keyframes drift{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.tkr{display:flex;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.16);
  font-size:13px;white-space:nowrap}
.tk-ch{width:20px;height:20px;border-radius:6px;display:grid;place-items:center;font-size:10px;flex:none}
.tk-r{font-family:"IBM Plex Mono",ui-monospace,"Cascadia Mono","Consolas",monospace;font-size:11.4px;opacity:.7}
.tk-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.tk-s{opacity:.66;font-size:12px}
.tk-m{font-family:"IBM Plex Mono",ui-monospace,"Cascadia Mono","Consolas",monospace;color:#F7C48C}

.lgBar{position:relative;z-index:2;display:flex;align-items:center;gap:14px;padding:20px 26px;flex-wrap:wrap}
.lgMark{display:flex;align-items:center;gap:10px}
.lgMark b{font-family:Sora,"Segoe UI",system-ui,-apple-system,sans-serif;font-weight:800;font-size:18px;letter-spacing:-.045em;display:block;line-height:1}
.lgMark i{font-style:normal;font-size:8.6px;letter-spacing:.19em;text-transform:uppercase;opacity:.62;display:block;margin-top:3px}
.lgBarR{margin-left:auto;display:flex;align-items:center;gap:6px}
.lgVer{font-family:"IBM Plex Mono",ui-monospace,"Cascadia Mono","Consolas",monospace;font-size:10px;opacity:.5;margin-right:4px}
.lgTiny{all:unset;cursor:pointer;font-size:11px;padding:5px 10px;border-radius:999px;
  border:1px solid rgba(255,255,255,.18);color:rgba(244,234,243,.82);transition:.15s;display:inline-flex;align-items:center;gap:6px}
.lgTiny:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.07)}
.lgTiny:focus-visible{outline:2px solid #EA8432;outline-offset:2px}
.lgTiny .dot{width:6px;height:6px;border-radius:50%;background:#5FC79A;box-shadow:0 0 0 3px rgba(95,199,154,.22)}

.lgStage{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:12px;padding:8px 20px 34px}
.lgCard{width:100%;max-width:428px;padding:32px 32px 26px;border-radius:26px;position:relative;
  background:linear-gradient(168deg,rgba(255,255,255,.16),rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(26px) saturate(1.3);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.28)}
.lgEyebrow{font-size:9.6px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:#F0BE8A}
.lgTitle{font-family:Sora,"Segoe UI",system-ui,-apple-system,sans-serif;font-size:29px;letter-spacing:-.04em;font-weight:700;margin:8px 0 8px;line-height:1.08;color:#fff}
.lgLead{font-size:13.2px;line-height:1.6;color:rgba(244,234,243,.76);margin:0 0 20px}
.lgLab{display:block;font-size:9.8px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:rgba(244,234,243,.6);margin:0 0 6px}
.lgField{display:flex;align-items:center;gap:10px;background:rgba(0,0,0,.26);border:1px solid rgba(255,255,255,.18);
  border-radius:13px;padding:0 13px;margin-bottom:15px;transition:.16s}
.lgField:focus-within{border-color:#EA8432;background:rgba(0,0,0,.34);box-shadow:0 0 0 3px rgba(234,132,50,.2)}
.lgField .pre{opacity:.6;font-size:12.4px;flex:none}
.lgField input{all:unset;flex:1;padding:13px 0;font-size:14px;color:#fff;min-width:0}
.lgField input::placeholder{color:rgba(244,234,243,.34)}
.lgField .eye{all:unset;cursor:pointer;font-size:10.4px;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(244,234,243,.6);padding:4px 2px}
.lgField .eye:hover{color:#EA8432}
.lgRow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:2px 0 18px}
.lgChk{display:flex;align-items:center;gap:8px;font-size:12px;color:rgba(244,234,243,.8);cursor:pointer}
.lgChk input{appearance:none;width:16px;height:16px;border:1.5px solid rgba(255,255,255,.34);border-radius:5px;
  background:rgba(0,0,0,.2);cursor:pointer;position:relative;flex:none}
.lgChk input:checked{background:#EA8432;border-color:#EA8432}
.lgChk input:checked::after{content:"";position:absolute;left:5px;top:1.5px;width:3px;height:8px;
  border:solid #2a1509;border-width:0 2px 2px 0;transform:rotate(43deg)}
.lgLink{all:unset;cursor:pointer;font-size:12px;color:#F0BE8A;font-weight:600}
.lgLink:hover{text-decoration:underline}
.lgBack{all:unset;cursor:pointer;font-size:11.6px;color:rgba(244,234,243,.6);margin-bottom:10px;display:inline-block}
.lgBack:hover{color:#fff}
.lgGo{all:unset;box-sizing:border-box;display:block;width:100%;text-align:center;cursor:pointer;position:relative;
  overflow:hidden;background:linear-gradient(100deg,#EA8432,#C9448F 62%,#9C3391);color:#fff;font-weight:700;
  font-size:14.4px;padding:14px;border-radius:13px;box-shadow:0 16px 34px -14px rgba(234,132,50,.8);transition:.18s}
.lgGo span{position:relative}
.lgGo::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:34%;transform:skewX(-18deg);
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);animation:sheen 3.6s infinite}
.lgGo:hover{transform:translateY(-2px);box-shadow:0 22px 44px -14px rgba(234,132,50,.9)}
.lgGo:active{transform:scale(.985)}
.lgGo:focus-visible{outline:2px solid #fff;outline-offset:3px}
.lgErr{margin:0 0 14px;font-size:12px;color:#FFC9D2;background:rgba(179,58,78,.34);
  border:1px solid rgba(255,201,210,.3);border-radius:11px;padding:10px 12px;line-height:1.5}
.lgOr{display:flex;align-items:center;gap:10px;margin:22px 0 12px;color:rgba(244,234,243,.44);
  font-size:9.4px;letter-spacing:.16em;text-transform:uppercase}
.lgOr::before,.lgOr::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.16)}
.lgPeople{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.lgWho{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:8px;padding:8px 9px;
  border-radius:11px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.2);transition:.15s;min-width:0}
.lgWho:hover{border-color:#EA8432;background:rgba(234,132,50,.14);transform:translateY(-1px)}
.lgWho:focus-visible{outline:2px solid #EA8432;outline-offset:2px}
.lgWho .w1{min-width:0;flex:1}
.lgWho .w1 b{display:block;font-size:11.4px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff}
.lgWho .w1 i{display:block;font-style:normal;font-size:9.2px;opacity:.56;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wTag{font-size:8.2px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:2px 6px;border-radius:999px;flex:none}
.wTag.lock{background:rgba(255,201,210,.2);color:#FFC9D2}
.wTag.temp{background:rgba(247,196,140,.2);color:#F7C48C}
.wTag.tfa{background:rgba(140,220,190,.18);color:#8CDCBE}
.lgHint{font-size:11px;line-height:1.55;color:rgba(244,234,243,.5);margin:14px 0 0}

/* two step code */
.codeRow{display:flex;gap:8px;margin:6px 0 16px}
.codeBox{all:unset;box-sizing:border-box;flex:1;height:56px;text-align:center;font-family:"IBM Plex Mono",ui-monospace,"Cascadia Mono","Consolas",monospace;
  font-size:22px;color:#fff;background:rgba(0,0,0,.26);border:1px solid rgba(255,255,255,.18);border-radius:12px;
  transition:.15s;caret-color:#EA8432}
.codeBox:focus{border-color:#EA8432;background:rgba(0,0,0,.36);box-shadow:0 0 0 3px rgba(234,132,50,.2)}

/* password strength */
.pwMeter{display:flex;gap:5px;margin:-6px 0 8px}
.pwMeter i{flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.16);transition:.2s}
.pwMeter i.on1{background:#D0788D}.pwMeter i.on2{background:#E0A468}
.pwMeter i.on3{background:#F0BE8A}.pwMeter i.on4{background:#8CDCBE}
.pwHint{font-size:11.2px;color:rgba(244,234,243,.56);margin:0 0 16px;line-height:1.5}
.pwRules{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:6px}
.pwRules li{font-size:11.2px;color:rgba(244,234,243,.56);padding-left:16px;position:relative;line-height:1.45}
.pwRules li::before{content:"";position:absolute;left:0;top:6px;width:5px;height:5px;border-radius:50%;background:#EA8432}

.lgFootBar{position:relative;z-index:2;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:14px 26px 22px;font-size:10.6px;color:rgba(244,234,243,.44)}
.lgFootBar .lgTiny{margin-left:auto}

.lgHelpPanel{width:100%;max-width:428px;border-radius:20px;overflow:hidden;
  background:linear-gradient(168deg,rgba(255,255,255,.16),rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(24px);
  box-shadow:0 30px 70px -34px rgba(0,0,0,.9);animation:slideUp .26s ease}
@keyframes slideUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.lhTop{display:flex;align-items:center;gap:9px;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.14)}
.lhTop b{font-size:12.4px;display:block;line-height:1.2;color:#fff}
.lhTop i{font-size:10px;opacity:.56;font-style:normal;display:block;margin-top:1px}
.lhX{all:unset;cursor:pointer;opacity:.6;font-size:13px;padding:4px}
.lhX:hover{opacity:1}
.lhBody{padding:13px 14px;display:flex;flex-direction:column;gap:8px;max-height:180px;overflow-y:auto}
.lhMsg{background:rgba(0,0,0,.24);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:9px 11px;
  font-size:12.2px;line-height:1.5;color:rgba(244,234,243,.86);max-width:88%}
.lhMsg.mine{align-self:flex-end;background:rgba(234,132,50,.22);border-color:transparent;color:#fff}
.lhMsg span{display:block;font-size:9.4px;opacity:.5;margin-top:4px;font-family:"IBM Plex Mono",ui-monospace,"Cascadia Mono","Consolas",monospace}
.lhIn{display:flex;gap:7px;padding:11px 14px;border-top:1px solid rgba(255,255,255,.14)}
.lhIn input{all:unset;flex:1;background:rgba(0,0,0,.26);border:1px solid rgba(255,255,255,.16);border-radius:11px;
  padding:9px 11px;font-size:12.4px;color:#fff}
.lhIn input:focus{border-color:#EA8432}
.lhNote{margin:0;padding:0 14px 13px;font-size:10.2px;opacity:.5;line-height:1.5}

.signOut{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:8px;width:100%;
  padding:8px 10px;border-radius:var(--rS);font-size:11.8px;color:var(--muted);transition:.14s}
.signOut:hover{background:var(--glass2);color:var(--bad)}

@media (max-width:560px){
  .lgCard{padding:26px 22px 22px;border-radius:20px}
  .lgTitle{font-size:25px}
  .lgPeople{grid-template-columns:1fr}
  .codeBox{height:48px;font-size:19px}
}
@media (prefers-reduced-motion:reduce){
  .lgBoardIn,.lgSky i,.lgGo::after{animation:none!important}
}

/* ---- demonstration stylesheet, block 5 ---- */
/* support tickets */
.tk{border-radius:var(--rM);border:1px solid var(--hair);background:var(--glass2);padding:13px 15px;margin-bottom:9px;
  cursor:pointer;transition:.16s;position:relative;overflow:hidden}
.tk:hover{border-color:var(--accent);transform:translateX(2px)}
.tk .st{position:absolute;left:0;top:0;width:3px;height:100%}
.tk .r1{display:flex;gap:9px;align-items:flex-start;flex-wrap:wrap}
.tk .num{font-family:"IBM Plex Mono",ui-monospace,"Cascadia Mono","Consolas",monospace;font-size:10.4px;color:var(--deep);font-weight:600}
.tk .sub{font-family:Sora,"Segoe UI",system-ui,-apple-system,sans-serif;font-size:13.4px;font-weight:600;margin-top:1px}
.tk .meta3{font-size:10.4px;color:var(--muted);margin-top:3px}
.tkFlow{display:flex;gap:0;margin-top:11px;border-radius:9px;overflow:hidden;border:1px solid var(--hair)}
.tkFlow div{flex:1;padding:6px 4px;text-align:center;font-size:8.6px;font-weight:700;background:var(--glass2);color:var(--muted);letter-spacing:.03em}
.tkFlow div.on{color:#fff}
.tkMsg{display:flex;gap:9px;margin-bottom:10px}
.tkMsg .bb{background:var(--glass2);border:1px solid var(--hair);border-radius:13px;padding:9px 12px;font-size:12px;line-height:1.55;flex:1;min-width:0}
.tkMsg.admin .bb{background:var(--soft);border-color:transparent}
.tkMsg .who4{font-size:10px;color:var(--muted);margin-bottom:3px}
.tkMsg .who4 b{color:var(--ink2)}
.tkMsg .media{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.tkMedia{width:64px;height:48px;border-radius:8px;border:1px solid var(--hair);overflow:hidden;position:relative;background:var(--grid)}
.tkMedia svg{width:100%;height:100%}
.tkMedia .fx{position:absolute;inset:0;display:grid;place-items:center;font-size:16px}
.bcast{border-radius:var(--rM);padding:12px 14px;margin-bottom:9px;border-left:3px solid var(--comp);background:var(--compSoft)}
.bcast.upd{border-left-color:var(--accent);background:var(--soft)}
.bcast .bt{font-family:Sora,"Segoe UI",system-ui,-apple-system,sans-serif;font-size:12.6px;font-weight:600}
.bcast .bd3{font-size:11.6px;color:var(--ink2);margin-top:3px;line-height:1.5}
/* reports */
.rp{border-radius:var(--rM);border:1px solid var(--hair);background:var(--glass2);padding:13px 15px;margin-bottom:9px;transition:.16s}
.rp:hover{border-color:var(--accent)}
.rp .rt{font-family:Sora,"Segoe UI",system-ui,-apple-system,sans-serif;font-size:13.4px;font-weight:600}
.rp .rm{font-size:10.6px;color:var(--muted);margin-top:2px}
.rp .rb{font-size:11.8px;color:var(--ink2);line-height:1.55;margin-top:8px;padding:9px 11px;background:var(--glass);border-radius:10px;border:1px solid var(--hair)}
.fb{display:flex;gap:9px;margin-top:9px}
.fb .fbb{background:var(--soft);border-radius:12px;padding:8px 11px;font-size:11.8px;line-height:1.5;flex:1}
.fb .fbn{font-size:9.8px;color:var(--muted);margin-bottom:2px}
/* nickname chip */
.nick{font-family:"IBM Plex Mono",ui-monospace,"Cascadia Mono","Consolas",monospace;font-size:10.6px;background:var(--soft);color:var(--deep);padding:2px 7px;border-radius:6px;font-weight:500}
.nickIn{display:flex;gap:6px;flex-wrap:wrap;align-items:center;padding:7px 9px;border-radius:11px;border:1px solid var(--hair);background:var(--glass2);min-height:38px}
.nickTag{display:inline-flex;align-items:center;gap:5px;background:var(--accent);color:#fff;padding:3px 8px;border-radius:8px;font-size:11px;font-weight:500}
.nickTag button{all:unset;cursor:pointer;opacity:.75;font-size:12px;line-height:1}
.nickIn input{flex:1;min-width:110px;border:0;background:transparent;color:var(--ink);font-family:"IBM Plex Mono",ui-monospace,"Cascadia Mono","Consolas",monospace;font-size:12px;outline:none}
.nickHint{font-size:10px;color:var(--muted);margin-top:5px}
/* settings */
.frow{display:grid;grid-template-columns:186px 1fr;gap:14px;padding:12px 0;border-bottom:1px solid var(--hair);align-items:flex-start}
.frow:last-child{border-bottom:0}
.frow .fl{font-size:12.1px;font-weight:500}
.frow .fh{font-size:10.4px;color:var(--muted);margin-top:2px;line-height:1.5}
.inp{width:100%;max-width:320px;padding:7px 10px;border-radius:10px;border:1px solid var(--hair);background:var(--glass2);color:var(--ink);font-family:inherit;font-size:12px}
.inp:focus{outline:2px solid var(--accent);border-color:transparent}
.inp.xs{max-width:92px}.inp.md{max-width:200px}
.sw{all:unset;cursor:pointer;width:38px;height:22px;border-radius:999px;background:var(--grid);position:relative;transition:.2s;flex:0 0 38px}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.sw[aria-checked="true"]{background:var(--accent)}
.sw[aria-checked="true"]::after{transform:translateX(16px)}
.swatches{display:flex;gap:8px;flex-wrap:wrap}
.swt{all:unset;cursor:pointer;width:34px;height:34px;border-radius:10px;transition:transform .15s;border:2px solid transparent}
.swt:hover{transform:scale(1.09)}
.swt[aria-pressed="true"]{border-color:var(--ink);box-shadow:0 0 0 3px var(--ground) inset}
.wgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:9px;max-width:620px}
.wp{all:unset;cursor:pointer;height:64px;border-radius:var(--rM);position:relative;overflow:hidden;border:2px solid transparent;transition:.15s;background-size:cover}
.wp:hover{transform:translateY(-2px)}.wp[aria-pressed="true"]{border-color:var(--accent)}
.wp span{position:absolute;bottom:5px;left:7px;font-size:9.4px;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.7);font-weight:500}
.avEdit{position:relative;width:64px;height:64px;border-radius:50%;overflow:hidden;cursor:pointer;flex:0 0 64px}
.avEdit .ov{position:absolute;inset:0;background:rgba(0,0,0,.45);color:#fff;display:grid;place-items:center;font-size:10px;opacity:0;transition:.15s}
.avEdit:hover .ov{opacity:1}
.urow{display:flex;gap:10px;align-items:center;padding:10px 11px;border-radius:var(--rM);background:var(--glass2);border:1px solid var(--hair);flex-wrap:wrap;margin-bottom:6px}
.urow select,.rolesel{padding:5px 8px;border-radius:8px;border:1px solid var(--hair);background:var(--glass);color:var(--ink);font-family:inherit;font-size:11px}
.permgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:7px;margin-top:9px}
.perm{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;background:var(--glass2);border:1px solid var(--hair);font-size:11.2px}
.danger{border:1px solid var(--badSoft);background:var(--badSoft);border-radius:var(--rM);padding:11px 13px;margin-top:13px}
.danger b{color:var(--bad)}
.compRow{display:flex;gap:10px;align-items:flex-start;padding:11px 13px;border-radius:var(--rM);background:var(--glass2);border:1px solid var(--hair);margin-bottom:8px}
.compRow .st2{width:22px;height:22px;border-radius:7px;flex:0 0 22px;display:grid;place-items:center;font-size:11px}
.compRow .st2.ok{background:var(--goodSoft);color:var(--good)}
.compRow .st2.no{background:var(--badSoft);color:var(--bad)}
.compRow .bd2{font-size:11.8px;line-height:1.5;color:var(--ink2)}
.compRow .bd2 b{color:var(--ink)}
.compRow .sec{font-family:"IBM Plex Mono",ui-monospace,"Cascadia Mono","Consolas",monospace;font-size:9.6px;color:var(--muted);margin-top:3px}
/* lead page */
.ldHero{border-radius:var(--rL);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shL);background:linear-gradient(135deg,var(--soft),var(--glass) 60%);padding:20px 22px;position:relative}
.ldHero .r1{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}
.ldHero h1{font-size:24px;margin:0 0 3px}
.ldHero .meta2{font-size:12px;color:var(--ink2)}
.ldHero .side{margin-left:auto;display:flex;gap:9px;flex-wrap:wrap}
.ldStat{background:var(--glass2);border:1px solid var(--hair);border-radius:var(--rM);padding:10px 13px;min-width:100px}
.ldStat .k2{font-size:8.8px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:600}
.ldStat .v2{font-family:Sora,"Segoe UI",system-ui,-apple-system,sans-serif;font-size:19px;font-weight:600;letter-spacing:-.02em;margin-top:2px}
.track{display:flex;margin-top:16px;border-radius:12px;overflow:hidden;border:1px solid var(--hair)}
.trackStep{flex:1;padding:9px 8px;text-align:center;font-size:9.6px;font-weight:700;background:var(--glass2);color:var(--muted)}
.trackStep.on{color:#fff}
.trackStep .dt{font-size:8.4px;font-weight:400;opacity:.85;display:block;margin-top:2px;font-family:"IBM Plex Mono",ui-monospace,"Cascadia Mono","Consolas",monospace}
.dgr{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:9px;margin:12px 0}
.dgr>div{background:var(--glass2);border-radius:var(--rS);padding:9px 11px;border:1px solid var(--hair)}
.dgr>div>.k{margin-bottom:3px}.dgr>div>.v{font-size:12.2px;font-weight:500}
.dh{font-size:9.6px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:600;margin:15px 0 9px}
.cmt{display:flex;gap:9px;margin-bottom:9px}
.cmt .cb2{background:var(--glass2);border:1px solid var(--hair);border-radius:13px;padding:8px 11px;font-size:12px;line-height:1.5;flex:1;min-width:0}
.cmt .cn{font-size:10px;color:var(--muted);margin-bottom:2px}
.cmt .cn b{color:var(--ink2)}
.cmt.mine .cb2{background:var(--soft);border-color:transparent}
/* private tools */
.pad{width:100%;min-height:130px;border:1px solid var(--hair);border-radius:var(--rM);background:var(--glass2);padding:12px 13px;
  font-family:Inter,sans-serif;font-size:12.4px;line-height:1.65;color:var(--ink);resize:vertical}
.pad:focus{outline:2px solid var(--accent);border-color:transparent}
.priv{display:inline-flex;align-items:center;gap:5px;font-size:9.2px;padding:2px 7px;border-radius:999px;background:var(--grid);color:var(--muted);font-weight:600}
.ck{display:flex;gap:9px;align-items:flex-start;padding:8px 10px;border-radius:11px;background:var(--glass2);border:1px solid var(--hair);margin-bottom:6px;transition:.15s}
.ck:hover{border-color:var(--accent)}
.ck.done{opacity:.5}.ck.done .cktx{text-decoration:line-through}
.cktx{flex:1;font-size:12px;line-height:1.45}
.ck .del,.rem .del{all:unset;cursor:pointer;color:var(--muted);font-size:13px;opacity:.5}
.ck .del:hover,.rem .del:hover{opacity:1;color:var(--bad)}
.chk{all:unset;cursor:pointer;width:18px;height:18px;border-radius:5px;border:1.5px solid var(--hair);display:grid;place-items:center;flex:0 0 18px;color:transparent;font-size:10px;margin-top:1px}
.chk[aria-checked="true"]{background:var(--good);border-color:var(--good);color:#fff}
.addrow{display:flex;gap:7px;margin-top:8px}
.addrow input{flex:1;padding:8px 11px;border-radius:10px;border:1px solid var(--hair);background:var(--glass2);color:var(--ink);font-family:inherit;font-size:12px}
.addrow input:focus{outline:2px solid var(--accent);border-color:transparent}
.rem{display:flex;gap:9px;align-items:center;padding:9px 11px;border-radius:11px;background:var(--glass2);border:1px solid var(--hair);margin-bottom:6px;flex-wrap:wrap}
.rem .when{font-family:"IBM Plex Mono",ui-monospace,"Cascadia Mono","Consolas",monospace;font-size:10.4px;color:var(--comp);font-weight:600;white-space:nowrap}
.rem.soon{border-color:var(--comp);background:var(--compSoft)}
.ap{display:flex;gap:9px;align-items:flex-start;padding:9px 11px;border-radius:var(--rM);background:var(--glass2);border:1px solid var(--hair);margin-bottom:7px}
.ap .num{width:22px;height:22px;border-radius:7px;flex:0 0 22px;display:grid;place-items:center;font-size:10px;font-weight:700;background:var(--accent);color:#fff;font-family:"IBM Plex Mono",ui-monospace,"Cascadia Mono","Consolas",monospace}
.ap .num.o{background:var(--orange)}
.ap p{margin:0;font-size:11.8px;line-height:1.5;color:var(--ink2)}
.ap b{color:var(--ink)}
/* charts + rows + tables + chat + notif + overlays */
.chart{position:relative}svg{display:block;overflow:visible}
.tip{position:absolute;pointer-events:none;opacity:0;transition:opacity .12s;background:var(--glass);backdrop-filter:blur(18px);border:1px solid var(--line);border-radius:11px;padding:8px 11px;font-size:11px;box-shadow:var(--shL);z-index:30;min-width:140px}
.tip b{font-family:Sora,"Segoe UI",system-ui,-apple-system,sans-serif;font-size:11.8px;display:block;margin-bottom:4px}
.tip .r{display:flex;justify-content:space-between;gap:14px;color:var(--ink2);line-height:1.7}
.tip .r em{font-style:normal;font-family:"IBM Plex Mono",ui-monospace,"Cascadia Mono","Consolas",monospace;color:var(--ink)}
.legend{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:8px}
.lg{all:unset;cursor:pointer;font-size:10.6px;color:var(--ink2);display:flex;align-items:center;gap:6px;padding:3px 8px;border-radius:999px}
.lg:hover{background:var(--glass2)}.lg[aria-pressed="false"]{opacity:.36}
.lg i{width:11px;height:3px;border-radius:2px}
.brow{display:grid;grid-template-columns:126px 1fr 88px;align-items:center;gap:9px;margin-bottom:6px;padding:3px 6px;margin-left:-6px;border-radius:8px;transition:.14s}
.brow:hover{background:var(--soft)}
.brow .lb{font-size:11.4px;color:var(--ink2);display:flex;align-items:center;gap:6px;min-width:0}
.brow .lb span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brow .lb i{width:7px;height:7px;border-radius:2px;flex:0 0 7px}
.trk{height:11px;background:var(--grid);border-radius:6px;overflow:hidden}
.fil{height:100%;border-radius:6px;transition:width .6s cubic-bezier(.2,.8,.2,1)}
.bv{font-family:"IBM Plex Mono",ui-monospace,"Cascadia Mono","Consolas",monospace;font-size:10.8px;text-align:right;display:flex;justify-content:flex-end;gap:5px;align-items:baseline;white-space:nowrap}
.bv em{font-style:normal;font-size:9.4px;color:var(--muted)}
.hm{display:grid;grid-template-columns:30px repeat(11,1fr);gap:3px;align-items:center}
.hmc{aspect-ratio:1;border-radius:4px;cursor:pointer;transition:transform .14s}
.hmc:hover{transform:scale(1.25);outline:2px solid var(--accent)}
.hml,.hmh{font-size:8.8px;color:var(--muted);font-family:"IBM Plex Mono",ui-monospace,"Cascadia Mono","Consolas",monospace}
.hml{text-align:right;padding-right:3px}.hmh{text-align:center}
.lrow{display:flex;gap:10px;align-items:center;padding:9px 11px;border-radius:var(--rM);background:var(--glass2);border:1px solid var(--hair);margin-bottom:6px;flex-wrap:wrap}
.lrow.click{cursor:pointer;transition:.15s}.lrow.click:hover{border-color:var(--accent);transform:translateX(2px)}
.lrow .grow{flex:1;min-width:140px}
.tw{overflow-x:auto;margin:0 -17px -15px;padding:0 17px}
table{width:100%;border-collapse:collapse;font-size:12px;min-width:700px}
th{text-align:left;font-size:9px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:600;padding:0 9px 8px;border-bottom:1px solid var(--hair);white-space:nowrap}
td{padding:9px;border-bottom:1px solid var(--hair);vertical-align:middle}
tbody tr:hover{background:var(--soft)}
.nm{font-weight:500}.sm{font-size:10.2px;color:var(--muted)}.right{text-align:right}
.seg{display:flex;gap:3px;background:var(--glass2);padding:3px;border-radius:10px;border:1px solid var(--hair);flex-wrap:wrap}
.seg button{all:unset;cursor:pointer;padding:4px 9px;border-radius:7px;font-size:11px;color:var(--ink2);transition:.15s}
.seg button[aria-pressed="true"]{background:var(--accent);color:#fff;font-weight:500}
.tabs{display:flex;gap:3px;border-bottom:1px solid var(--hair);margin-bottom:13px;overflow-x:auto}
.tabs button{all:unset;cursor:pointer;padding:8px 13px;font-size:12px;color:var(--ink2);border-bottom:2px solid transparent;white-space:nowrap}
.tabs button[aria-selected="true"]{color:var(--deep);border-bottom-color:var(--accent);font-weight:600}
.search{position:relative;flex:1;min-width:160px}
.search input{width:100%;padding:8px 11px 8px 30px;border-radius:10px;border:1px solid var(--hair);background:var(--glass2);color:var(--ink);font-family:inherit;font-size:12px}
.search input:focus{outline:2px solid var(--accent);border-color:transparent}
.search .si{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:11px}
.chatwrap{display:grid;grid-template-columns:230px 1fr;height:min(620px,72vh);border-radius:var(--rL);overflow:hidden;border:1px solid var(--line)}
.chatlist{border-right:1px solid var(--hair);overflow-y:auto;padding:9px;background:var(--glass2)}
.chatmain{display:flex;flex-direction:column;min-width:0;background:var(--glass2)}
.cthread{flex:1;overflow-y:auto;padding:14px 16px}
.cfoot{padding:11px 14px;border-top:1px solid var(--hair);display:flex;gap:7px}
.cfoot input{flex:1;padding:9px 12px;border-radius:11px;border:1px solid var(--hair);background:var(--glass);color:var(--ink);font-family:inherit;font-size:12px}
.pplrow{display:flex;gap:9px;align-items:center;padding:8px 9px;border-radius:10px;cursor:pointer}
.pplrow:hover,.pplrow[aria-pressed="true"]{background:var(--soft)}
.pplrow .pn{font-size:11.8px;font-weight:500}
.pplrow .pl{font-size:9.8px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}
.pplrow .un2{margin-left:auto;background:var(--orange);color:#fff;font-size:8.6px;min-width:16px;height:16px;border-radius:999px;display:grid;place-items:center;font-family:"IBM Plex Mono",ui-monospace,"Cascadia Mono","Consolas",monospace}
.msg{max-width:78%;padding:8px 11px;border-radius:14px;font-size:12px;line-height:1.5;margin-bottom:7px;position:relative}
.msg.them{background:var(--glass);border:1px solid var(--hair);border-bottom-left-radius:4px}
.msg.mine{background:linear-gradient(140deg,var(--accent),var(--deep));color:#fff;margin-left:auto;border-bottom-right-radius:4px}
.msg .t{font-size:8.8px;opacity:.6;margin-top:3px;font-family:"IBM Plex Mono",ui-monospace,"Cascadia Mono","Consolas",monospace}
.msg .att{margin-top:6px;padding:7px 9px;border-radius:9px;background:rgba(255,255,255,.16);font-size:10.6px;display:flex;gap:7px;align-items:center}
.msg.them .att{background:var(--soft)}
.msg .dl{position:absolute;top:4px;right:6px;opacity:0;cursor:pointer;font-size:12px;transition:.15s}
.msg:hover .dl{opacity:.7}
.notif{position:fixed;left:18px;bottom:18px;z-index:82;display:flex;flex-direction:column-reverse;gap:9px;max-width:min(374px,86vw)}
.nt{background:var(--glass);backdrop-filter:blur(26px) saturate(175%);border:1px solid var(--line);border-radius:17px;padding:12px 14px;
  box-shadow:var(--shL);display:flex;gap:11px;align-items:flex-start;animation:slideIn .42s cubic-bezier(.2,1.2,.35,1);position:relative;overflow:hidden}
.nt.out{animation:slideOut .34s ease-in forwards}
@keyframes slideIn{from{transform:translateX(-112%) scale(.94);opacity:0}to{transform:none;opacity:1}}
@keyframes slideOut{to{transform:translateX(-112%) scale(.94);opacity:0}}
.nt .ni{width:32px;height:32px;border-radius:10px;flex:0 0 32px;display:grid;place-items:center;font-size:15px;background:var(--soft)}
.nt .ni.o{background:var(--compSoft)}.nt .ni.g{background:var(--goodSoft)}
.nt .nb{min-width:0;flex:1}
.nt .ntt{font-family:Sora,"Segoe UI",system-ui,-apple-system,sans-serif;font-size:12.2px;font-weight:600;line-height:1.35}
.nt .nd{font-size:10.8px;color:var(--ink2);margin-top:2px;line-height:1.45}
.nt .prog{position:absolute;left:0;bottom:0;height:2px;background:var(--accent);animation:drain 10s linear forwards}
@keyframes drain{from{width:100%}to{width:0}}
.nt .x{all:unset;cursor:pointer;color:var(--muted);font-size:14px;line-height:1;padding:2px}
.npanel{position:fixed;top:14px;left:250px;z-index:66;width:min(360px,92vw);padding:13px 15px;opacity:0;pointer-events:none;transform:translateY(-8px);transition:.2s;max-height:78vh;overflow-y:auto}
.npanel.on{opacity:1;pointer-events:auto;transform:none}
.nitem{display:flex;gap:9px;padding:9px 0;border-bottom:1px solid var(--hair);align-items:flex-start}
.nitem:last-child{border-bottom:0}
@media (max-width:780px){.npanel{left:8px;right:8px;width:auto}}
.scrim{position:fixed;inset:0;background:rgba(30,12,28,.42);backdrop-filter:blur(3px);z-index:40;opacity:0;pointer-events:none;transition:opacity .22s}
.scrim.on{opacity:1;pointer-events:auto}
.modal{position:fixed;z-index:60;top:50%;left:50%;transform:translate(-50%,-46%) scale(.97);width:min(560px,94vw);padding:22px;opacity:0;pointer-events:none;transition:.24s;max-height:88vh;overflow-y:auto}
.modal.on{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.modal h3{font-size:17px;margin:0 0 3px}
.field{margin-top:10px}
.field label{display:block;font-size:9.6px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600;margin-bottom:4px}
.field input,.field select,.field textarea{width:100%;padding:8px 10px;border-radius:10px;border:1px solid var(--hair);background:var(--glass2);color:var(--ink);font-family:inherit;font-size:12px}
.field textarea{min-height:60px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--accent);border-color:transparent}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mrow{display:flex;gap:8px;margin-top:16px;justify-content:flex-end}
.conf{position:fixed;z-index:84;pointer-events:none;border-radius:2px}
.burst{position:fixed;z-index:83;pointer-events:none;border-radius:50%;border:2px solid var(--orange);animation:burst .7s ease-out forwards}
@keyframes burst{from{transform:scale(.2);opacity:.9}to{transform:scale(2.8);opacity:0}}
.locked{text-align:center;padding:46px 20px;max-width:50ch;margin:0 auto}
.locked .e{font-size:30px;margin-bottom:10px}
.locked h2{font-size:17px;margin:0 0 6px}
.locked p{color:var(--ink2);font-size:12.2px;line-height:1.6;margin:0}
.doc{background:#fff;color:#20131f;border-radius:var(--rM);padding:22px 24px;box-shadow:var(--shL);max-width:640px}
.dochd{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:2px solid #792070;padding-bottom:11px;margin-bottom:14px}
.doc h4{font-family:Sora,"Segoe UI",system-ui,-apple-system,sans-serif;margin:0;font-size:15px;color:#792070}
.doc .dm{font-size:9.6px;color:#7a6478;font-family:"IBM Plex Mono",ui-monospace,"Cascadia Mono","Consolas",monospace}
.doc table{min-width:0;font-size:11px}
.doc th,.doc td{border-color:#eadfe9}.doc th{color:#7a6478}
.footnote{font-size:9.8px;color:var(--muted);text-align:center;padding-top:4px}
@media (max-width:1250px){.g5{grid-template-columns:repeat(3,1fr)}}
.men{background:var(--soft);color:var(--accent);font-weight:700;padding:1px 5px;border-radius:6px}
@media (max-width:1150px){.g4{grid-template-columns:1fr 1fr}.split,.split2{grid-template-columns:1fr}}
@media (max-width:900px){.g3,.g2{grid-template-columns:1fr}.frow{grid-template-columns:1fr;gap:6px}.chatwrap{grid-template-columns:1fr}.chatlist{display:none}}
@media (max-width:780px){.rail{display:none}.main{padding:12px 10px 30px}.g4,.g5{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}


/* =========================================================================
   The server rendered screens.

   The demonstration stylesheet above set the design language: translucent
   white surfaces over a soft gradient ground, a hairline border, a generous
   soft shadow, rounded corners, and backdrop blur only where a surface
   actually overlaps something. Everything below is that same language applied
   to the screens the built system has. Section 32.
   ========================================================================= */

/* ------------------------------------------------------------- the shell */

.main { flex: 1; min-width: 0; padding: 18px 22px 40px; position: relative; z-index: 1; }

.who { display: flex; align-items: center; gap: 9px; padding: 3px 4px 0; }
.who .av {
  width: 32px; height: 32px; border-radius: 10px; flex: none;
  display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 13px;
}
.who .wt { min-width: 0; }
.who .wt b { display: block; font-size: 12.4px; line-height: 1.25; }
.who .wt i {
  display: block; font-style: normal; font-size: 10.4px; color: var(--muted);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}

.av.sm {
  width: 22px; height: 22px; border-radius: 7px; flex: none;
  display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 10px;
}

.nav { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.nav a {
  display: flex; align-items: center; gap: 8px; padding: 8px 11px;
  border-radius: var(--rS); color: var(--ink2); text-decoration: none;
  font-size: 13px; font-weight: 500; transition: .14s; position: relative;
}
.nav a:hover { background: var(--glass); color: var(--ink); }
.nav a.on, .nav a[aria-current="page"] {
  background: var(--soft); color: var(--accent); font-weight: 600;
}
.navBadge {
  margin-left: auto; background: var(--bad); color: #fff; font-size: 9.6px; font-weight: 700;
  min-width: 17px; height: 17px; border-radius: 999px; display: grid; place-items: center;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}

.rf { margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding-top: 10px; }
.rfLink { font-size: 10.6px; color: var(--muted); text-decoration: none; }
.rfLink:hover { color: var(--accent); }
.rfVer {
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 9.6px;
  color: var(--muted); text-align: center; opacity: .7;
}

.pageFoot {
  margin-top: 34px; padding-top: 14px; border-top: 1px solid var(--hair);
  font-size: 10.6px; color: var(--muted); display: flex; gap: 12px; flex-wrap: wrap;
}
.pageFoot a { color: var(--muted); }
.pageFoot a:hover { color: var(--accent); }

/* --------------------------------------------------------- common pieces */

.glass {
  background: var(--glass); border: 1px solid var(--hair);
  border-radius: var(--rL); box-shadow: var(--shS);
}

.card {
  background: var(--glass); border: 1px solid var(--hair); border-radius: var(--rL);
  box-shadow: var(--shS); padding: 17px 19px; margin-bottom: 13px;
}

.cardH {
  margin: 0 0 12px; font-size: 13.6px; font-weight: 600; letter-spacing: -.01em;
  font-family: Sora, "Segoe UI", system-ui, sans-serif;
}

.formH {
  margin: 20px 0 10px; font-size: 11px; letter-spacing: .11em; text-transform: uppercase;
  color: var(--muted); font-weight: 700;
}
.formH:first-of-type { margin-top: 6px; }

.formCard { max-width: 720px; }
.formFoot { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 18px; }

.split { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 15px; }
.split2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 15px; }
.g2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 13px; }
.g3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 13px; }
.g4 { display: grid; grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); gap: 12px; }

.empty {
  padding: 30px 26px; text-align: center; border-radius: var(--rL);
  border: 1px dashed var(--hair); background: var(--glass2);
}
.empty b { display: block; font-size: 15px; margin-bottom: 7px; }
.empty p { margin: 0; color: var(--ink2); font-size: 13px; line-height: 1.6; max-width: 46ch;
  margin-inline: auto; }
.emptyLine { color: var(--muted); font-size: 12.4px; padding: 6px 0; }

.badge {
  display: inline-flex; align-items: center; font-size: 10.2px; font-weight: 600;
  padding: 2px 8px; border-radius: 999px; background: var(--glass2);
  border: 1px solid var(--hair); color: var(--ink2); white-space: nowrap;
}
.badge.good { background: var(--goodSoft); color: var(--good); border-color: transparent; }
.badge.bad  { background: var(--badSoft);  color: var(--bad);  border-color: transparent; }

.ref {
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11.6px;
  color: var(--accent); font-weight: 600; text-decoration: none;
}
.ref:hover { text-decoration: underline; }

.count { font-size: 11.6px; color: var(--muted); }
.warnText { color: var(--warn); }
.good { color: var(--good); }
.comp { color: var(--comp); }

.kv {
  display: flex; align-items: baseline; gap: 12px; padding: 6px 0;
  border-bottom: 1px solid var(--hair); font-size: 13px;
}
.kv:last-child { border-bottom: 0; }
.kv > span:first-child { color: var(--muted); font-size: 11.6px; flex: 0 0 44%; }
.kv > b { flex: 1; font-weight: 600; }
.kv > b s, .kv b s { text-decoration: none; color: var(--muted); font-weight: 400; font-size: 11px; }
.kv.total { border-top: 1px solid var(--hair); margin-top: 6px; padding-top: 10px; }
.kv.total b { font-size: 16px; color: var(--comp); font-family: "IBM Plex Mono", ui-monospace, monospace; }

.plainList { margin: 0 0 12px; padding-left: 18px; font-size: 13px; line-height: 1.75; color: var(--ink2); }
.plainList code { font-size: 11.4px; }

.rowButtons { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }

.inlineForm { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.inlineForm .input { flex: 1; min-width: 150px; }

.miniForm { margin-top: 10px; }
.miniForm > summary {
  cursor: pointer; font-size: 12px; color: var(--muted); font-weight: 600;
  padding: 5px 0; list-style: none;
}
.miniForm > summary::-webkit-details-marker { display: none; }
.miniForm > summary::before { content: "+ "; }
.miniForm[open] > summary::before { content: "- "; }
.miniForm > form { margin-top: 8px; }

.codeBlock {
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11.4px;
  background: var(--glass2); border: 1px solid var(--hair); border-radius: var(--rS);
  padding: 11px 13px; overflow-x: auto; white-space: pre-wrap; word-break: break-all;
  line-height: 1.6; margin: 0 0 10px; color: var(--ink2);
}
.codeBlock.error { color: var(--bad); border-color: var(--badSoft); background: var(--badSoft); }
.cronLine {
  display: block; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10.4px;
  color: var(--muted); margin-top: 8px; word-break: break-all;
}

/* --------------------------------------------------------------- tables */

.tableWrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 12.6px; }
.tbl th {
  text-align: left; padding: 8px 10px; font-size: 10px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted); font-weight: 700;
  border-bottom: 1px solid var(--hair); white-space: nowrap;
}
.tbl td { padding: 9px 10px; border-bottom: 1px solid var(--hair); vertical-align: top; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover { background: var(--glass2); }
.tbl .num, .tbl th.num { text-align: right; font-family: "IBM Plex Mono", ui-monospace, monospace; }
.tbl td s { display: block; text-decoration: none; color: var(--muted); font-size: 10.6px; margin-top: 2px; }
.tbl tfoot td { border-top: 2px solid var(--hair); border-bottom: 0; padding-top: 11px; }
.tbl tr.off { opacity: .5; }
.tbl tr.unread td:first-child { box-shadow: inset 3px 0 0 var(--comp); }
.tbl.mono td { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11.2px; }
.tbl .detail { color: var(--muted); max-width: 340px; word-break: break-word; }

/* --------------------------------------------------------- tabs, filters */

.tabBar {
  display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 15px;
  border-bottom: 1px solid var(--hair); padding-bottom: 2px;
}
.tabBtn {
  all: unset; cursor: pointer; padding: 8px 14px; border-radius: var(--rS) var(--rS) 0 0;
  font-size: 12.6px; font-weight: 600; color: var(--muted); transition: .14s;
  text-decoration: none; display: inline-block;
}
.tabBtn:hover { color: var(--ink); background: var(--glass2); }
.tabBtn.on { color: var(--accent); background: var(--soft); }
.tabBtn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.filterRow { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.chipLink {
  padding: 5px 12px; border-radius: 999px; background: var(--glass2);
  border: 1px solid var(--hair); font-size: 11.8px; color: var(--ink2);
  text-decoration: none; transition: .14s;
}
.chipLink:hover { border-color: var(--accent); color: var(--accent); }
.chipLink.on { background: var(--accent); color: #fff; border-color: transparent; }

.filterCard { padding: 15px 17px; }
.chipRow { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 7px; }

/* ----------------------------------------------------------- the hero */

.heroL { flex: 1; min-width: 0; }
.heroSub {
  font-size: 9.6px; letter-spacing: .17em; text-transform: uppercase;
  opacity: .78; font-weight: 700; margin-bottom: 6px;
}
.heroIn h1 { margin: 0 0 9px; font-size: clamp(21px, 2.5vw, 29px); line-height: 1.1; }
.heroLine { margin: 0 0 5px; font-size: 13.4px; line-height: 1.6; opacity: .93; max-width: 62ch; }
.heroProverb { margin-top: 11px; opacity: .82; max-width: 52ch; color: inherit; }

.heroR { display: flex; gap: 9px; flex-wrap: wrap; align-content: flex-start; }
.chip {
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--rM); padding: 9px 13px; min-width: 104px; backdrop-filter: blur(8px);
}
.chip b {
  display: block; font-size: 19px; line-height: 1.1; font-weight: 700;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}
.chip i {
  display: block; font-style: normal; font-size: 9.4px; letter-spacing: .09em;
  text-transform: uppercase; opacity: .8; margin-top: 4px;
}
.chip s { display: block; text-decoration: none; font-size: 10px; opacity: .68; margin-top: 2px; }

.heroBtns { position: absolute; right: 16px; bottom: 14px; display: flex; gap: 6px; }
.heroBtn {
  all: unset; cursor: pointer; font-size: 11px; font-weight: 600; padding: 5px 12px;
  border-radius: 999px; background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .28); color: #fff; transition: .15s;
}
.heroBtn:hover { background: rgba(255, 255, 255, .3); }
.heroBtn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.customise { margin: 10px 0 16px; padding: 15px 17px; }
.customise > summary { cursor: pointer; font-size: 12.6px; font-weight: 600; color: var(--ink2); }
.bgGrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px; margin: 13px 0;
}
.bgChoice { cursor: pointer; display: block; }
.bgChoice input { position: absolute; opacity: 0; width: 0; }
.bgChoice span {
  display: block; height: 46px; border-radius: var(--rS); border: 2px solid transparent;
  transition: .15s;
}
.bgChoice input:checked + span { border-color: var(--accent); transform: translateY(-2px); }
.bgChoice input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.bgChoice i {
  display: block; font-style: normal; font-size: 10px; color: var(--muted);
  text-align: center; margin-top: 4px;
}

/* ------------------------------------------------------- claims banner */

.claimBanner {
  display: flex; align-items: center; gap: 15px; padding: 15px 18px;
  border-radius: var(--rL); margin: 13px 0 18px;
}
.claimBanner.calm { border: 1px solid var(--hair); }
.claimBanner.calm .ci { color: var(--good); font-size: 16px; }
.claimBanner.calm p { margin: 0; font-size: 13px; color: var(--ink2); }

/* A solid orange panel with a soft outward glow that pulses slowly, roughly a
   three second cycle, and never flashes. Section 10. */
.claimBanner.waiting {
  background: var(--comp); color: #fff; border: 0;
  box-shadow: 0 0 0 0 rgba(234, 132, 50, .55);
  animation: claimPulse 3s ease-in-out infinite;
}
@keyframes claimPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(234, 132, 50, .5), 0 12px 30px -14px rgba(234, 132, 50, .8); }
  50%      { box-shadow: 0 0 0 12px rgba(234, 132, 50, 0), 0 16px 40px -12px rgba(234, 132, 50, .95); }
}
@media (prefers-reduced-motion: reduce) {
  .claimBanner.waiting { animation: none; box-shadow: 0 12px 30px -14px rgba(234, 132, 50, .8); }
}

.cbL { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; }
.cbN {
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 34px; line-height: 1;
  font-weight: 600; flex: none;
}
.cbT { min-width: 0; }
.cbHead { margin: 0 0 3px; font-size: 15px; font-weight: 700; }
.cbSub { margin: 0; font-size: 12.4px; opacity: .92; line-height: 1.5; }
.cbGo { flex: none; background: #fff; color: var(--comp); }
.cbGo:hover { background: #fff; filter: brightness(.96); }

.attentionBanner {
  display: flex; align-items: center; gap: 14px; padding: 14px 17px; margin-bottom: 16px;
  background: var(--badSoft); border: 1px solid var(--bad); border-radius: var(--rL);
}
.attentionBanner .ic { font-size: 17px; color: var(--bad); flex: none; }
.attentionBanner b { display: block; font-size: 13.4px; color: var(--bad); }
.attentionBanner p { margin: 3px 0 0; font-size: 12.2px; color: var(--ink2); line-height: 1.55; }
.attentionBanner .btn { margin-left: auto; flex: none; }

/* --------------------------------------------------------- the pool card */

.poolGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(305px, 1fr)); gap: 13px; }

.poolCard {
  background: var(--glass); border: 1px solid var(--hair); border-radius: var(--rL);
  box-shadow: var(--shS); padding: 14px 15px 13px; display: flex; flex-direction: column;
  gap: 11px; transition: transform .16s, border-color .16s, box-shadow .16s;
}
.poolCard:hover {
  transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--shL);
}

.pcTop { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pill {
  font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  background: var(--soft); color: var(--accent); letter-spacing: .02em;
}
.flag {
  font-size: 9.4px; font-weight: 700; padding: 2px 7px; border-radius: 5px;
  text-transform: uppercase; letter-spacing: .06em;
}
.flag.closing { background: var(--badSoft); color: var(--bad); }
.flag.backIn { background: var(--compSoft); color: var(--comp); }
.countdown {
  margin-left: auto; font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10.6px; color: var(--muted);
}
.countdown.closingSoon { color: var(--bad); font-weight: 600; }

/* The money block is the largest thing on the card. That is deliberate: the
   agent should see the money before they read the address. Section 9. */
.moneyBlock {
  background: linear-gradient(112deg, var(--comp), var(--orangeD, #C96A22));
  color: #fff; border-radius: var(--rM); padding: 15px 16px; position: relative;
  overflow: hidden;
}
.mbAmount {
  display: block; font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 27px; line-height: 1.05; font-weight: 600; letter-spacing: -.02em;
}
.mbSub { display: block; font-size: 10.6px; opacity: .88; margin-top: 5px; }

/* A slow sheen that crosses it every few seconds. Section 32. */
.moneyBlock::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 38%;
  transform: skewX(-18deg);
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .3), transparent);
  animation: sheen 4.4s ease-in-out infinite;
}
@keyframes sheen { 0% { left: -60%; } 55%, 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .moneyBlock::after { animation: none; display: none; } }

.pcProp b { display: block; font-size: 14px; line-height: 1.3; }
.pcProp span { display: block; font-size: 12.2px; color: var(--muted); margin-top: 2px; }

.pcFacts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.fact { font-size: 11.6px; color: var(--ink2); }
.fact b { font-family: "IBM Plex Mono", ui-monospace, monospace; font-weight: 600; }

.pcScore { display: flex; align-items: center; gap: 11px; }
.ring {
  --pct: 0; --ringColour: var(--accent);
  width: 42px; height: 42px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: conic-gradient(var(--ringColour) calc(var(--pct) * 1%), var(--grid) 0);
  position: relative;
}
.ring::before {
  content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--ground);
}
.ring span {
  position: relative; font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px; font-weight: 600;
}
.ringT { min-width: 0; }
.ringT b { display: block; font-size: 11.6px; }
.ringT i {
  display: block; font-style: normal; font-size: 10.4px; color: var(--muted);
  line-height: 1.45; margin-top: 2px;
}
.scoreRow { display: flex; align-items: center; gap: 13px; }
.scoreRow .cap { margin: 0; }

.pcMasked {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: var(--glass2); border: 1px dashed var(--hair); border-radius: var(--rM);
}
.pcMasked .lk { font-size: 13px; opacity: .6; flex: none; }
.pcMasked b {
  display: block; font-size: 12.6px;
  font-family: "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .02em;
}
.pcMasked span {
  display: block; font-size: 11.4px; color: var(--muted);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}
.pcMasked i {
  margin-left: auto; font-style: normal; font-size: 9.6px; color: var(--muted);
  text-align: right; max-width: 96px; line-height: 1.35;
}

.claimBtn { padding: 12px; font-size: 14px; }
.pcFoot { margin: 0; font-size: 10.2px; color: var(--muted); text-align: center; }

.lockedContact {
  display: flex; align-items: center; gap: 11px; padding: 12px 14px;
  background: var(--glass2); border: 1px dashed var(--hair); border-radius: var(--rM);
  margin-bottom: 10px;
}
.lockedContact .lk { font-size: 15px; opacity: .6; }
.lockedContact b { display: block; font-family: "IBM Plex Mono", ui-monospace, monospace; }
.lockedContact span { display: block; font-size: 11.6px; color: var(--muted); }
.lockedContact i { margin-left: auto; font-style: normal; font-size: 10px; color: var(--muted); }

/* --------------------------------------------------------- work cards */

.workCard { padding: 15px 16px; display: flex; flex-direction: column; gap: 11px; }
.wcTop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wcMoney {
  margin-left: auto; font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12.4px; color: var(--comp); font-weight: 600;
}
.wcProp b { display: block; font-size: 13.6px; }
.wcProp span { display: block; font-size: 11.8px; color: var(--muted); margin-top: 2px; }
.wcContact { padding: 10px 12px; background: var(--glass2); border-radius: var(--rM); }
.wcContact b { display: block; font-size: 13px; margin-bottom: 7px; }
.wcLinks { display: flex; gap: 7px; flex-wrap: wrap; }
.wcLinks .btn { padding: 6px 11px; font-size: 11.6px; }
.wcActions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* The six step progress control the agent clicks along. Section 9. */
.stageRow { display: flex; gap: 3px; flex-wrap: wrap; }
.stg {
  all: unset; cursor: pointer; flex: 1; min-width: 60px; text-align: center;
  padding: 7px 4px; font-size: 10.4px; font-weight: 600; border-radius: var(--rS);
  background: var(--glass2); color: var(--muted); border: 1px solid var(--hair);
  transition: .14s;
}
.stg:hover { border-color: var(--accent); color: var(--accent); }
.stg.on { background: var(--soft); color: var(--accent); border-color: transparent; }
.stg.cur { background: var(--accent); color: #fff; }
.stg:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---------------------------------------------------------- claim cards */

.claimCard {
  padding: 15px 16px; display: flex; flex-direction: column; gap: 11px;
  text-decoration: none; color: inherit; transition: transform .16s, border-color .16s;
}
.claimCard:hover { transform: translateY(-2px); border-color: var(--accent); }
.ccTop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.waited { margin-left: auto; font-size: 10.8px; color: var(--muted); }
.ccProp b { display: block; font-size: 13.4px; }
.ccProp span {
  display: block; font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px; color: var(--muted); margin-top: 2px;
}
.ccSplit { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ccSplit > div {
  background: var(--glass2); border-radius: var(--rM); padding: 10px 12px;
}
.ccSplit i {
  display: block; font-style: normal; font-size: 9.6px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 3px;
}
.ccSplit b {
  display: block; font-size: 12.4px;
  font-family: "IBM Plex Mono", ui-monospace, monospace; color: var(--accent);
}
.ccSplit s {
  display: block; text-decoration: none; font-size: 14px; font-weight: 600;
  font-family: "IBM Plex Mono", ui-monospace, monospace; margin-top: 4px;
}
.ccFoot {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; color: var(--ink2); padding-top: 9px; border-top: 1px solid var(--hair);
}
.ccFoot .go { color: var(--accent); font-weight: 600; }

.bothHalves { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.half { background: var(--glass2); border-radius: var(--rM); padding: 14px 15px; }
.half i {
  display: block; font-style: normal; font-size: 9.6px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted);
}
.half b {
  display: block; font-size: 14px; margin-top: 5px;
  font-family: "IBM Plex Mono", ui-monospace, monospace; color: var(--accent);
}
.half span { display: block; font-size: 11.4px; color: var(--muted); margin-top: 1px; }
.half em {
  display: block; font-style: normal; font-size: 21px; font-weight: 600; margin-top: 8px;
  font-family: "IBM Plex Mono", ui-monospace, monospace; color: var(--comp);
}

.yourShare { text-align: center; padding: 16px 0 8px; }
.yourShare b {
  display: block; font-size: 32px; font-weight: 600; color: var(--comp);
  font-family: "IBM Plex Mono", ui-monospace, monospace; letter-spacing: -.02em;
}
.yourShare span {
  display: block; font-size: 11.6px; color: var(--muted); margin-top: 6px;
}

.working { margin-top: 10px; }
.working > summary { cursor: pointer; font-size: 11.8px; color: var(--muted); font-weight: 600; }
.working ol, .working.open ol {
  margin: 9px 0 0; padding-left: 20px; font-size: 12px; line-height: 1.75; color: var(--ink2);
}
.working.open { display: block; }
.working.open > summary { display: none; }

/* ------------------------------------------------------------ timeline */

.timeline { list-style: none; margin: 0; padding: 0 0 0 15px; position: relative; }
.timeline::before {
  content: ""; position: absolute; left: 3px; top: 5px; bottom: 5px; width: 1px;
  background: var(--hair);
}
.timeline li { position: relative; padding: 0 0 13px; font-size: 12.4px; }
.timeline li::before {
  content: ""; position: absolute; left: -15px; top: 5px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--accent);
}
.timeline b { display: block; font-size: 12.4px; }
.timeline span { display: block; color: var(--ink2); margin-top: 1px; }
.timeline i { display: block; font-style: normal; font-size: 10.4px; color: var(--muted); margin-top: 3px; }

/* ------------------------------------------------------------ comments */

.cmt { padding: 11px 0; border-bottom: 1px solid var(--hair); }
.cmt:last-of-type { border-bottom: 0; }
.cmtH { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.cmtH b { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11.8px; color: var(--accent); }
.cmtH i { font-style: normal; font-size: 10.4px; color: var(--muted); margin-left: auto; }
.cmt p { margin: 0; font-size: 13px; line-height: 1.6; }

/* ------------------------------------------------------ bars and charts */

.barRow {
  display: grid; grid-template-columns: 110px 1fr auto; gap: 10px; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--hair);
}
.barRow:last-child { border-bottom: 0; }
.brName {
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11.8px;
  color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.brTrack { height: 9px; border-radius: 999px; background: var(--grid); overflow: hidden; }
.brTrack i { display: block; height: 100%; border-radius: 999px; transition: width .6s cubic-bezier(.2,.8,.2,1); }
.brVal {
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12px;
  font-weight: 600; text-align: right; white-space: nowrap;
}
.brSub { grid-column: 2 / -1; font-size: 10.4px; color: var(--muted); margin-top: -3px; }

.segbar { display: flex; height: 13px; border-radius: 999px; overflow: hidden; background: var(--grid); }
.seg { display: block; height: 100%; transition: width .6s cubic-bezier(.2,.8,.2,1); }
.seg.s0 { background: #8E2A83; } .seg.s1 { background: #A2438F; }
.seg.s2 { background: #B75C9B; } .seg.s3 { background: #D9762A; }
.seg.s4 { background: #C4762F; } .seg.s5 { background: #2E7D5B; }
.segKey { display: flex; gap: 15px; flex-wrap: wrap; margin-top: 13px; }
.segKey .k { font-size: 11.4px; display: flex; align-items: center; gap: 5px; }
.segKey .d { width: 8px; height: 8px; border-radius: 3px; display: inline-block; }
.segKey .d.s0 { background: #8E2A83; } .segKey .d.s1 { background: #A2438F; }
.segKey .d.s2 { background: #B75C9B; } .segKey .d.s3 { background: #D9762A; }
.segKey .d.s4 { background: #C4762F; } .segKey .d.s5 { background: #2E7D5B; }
.segKey b { font-family: "IBM Plex Mono", ui-monospace, monospace; }
.segKey s { text-decoration: none; color: var(--muted); font-size: 10.4px; }

.spark { width: 100%; height: 26px; margin: 7px 0 3px; display: block; }

.tile { padding: 14px 15px; border-radius: var(--rM); }
.tileT { font-size: 10.4px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.tileV {
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 25px;
  font-weight: 600; line-height: 1.15; margin-top: 6px; letter-spacing: -.02em;
}
.tileV s { text-decoration: none; font-size: 13px; color: var(--muted); font-weight: 400; }

.funnel { display: flex; flex-direction: column; gap: 13px; }
.fstep { display: grid; grid-template-columns: 160px 1fr 90px; gap: 11px; align-items: center; }
.fstep i { font-style: normal; font-size: 12px; color: var(--ink2); }
.ftrack { height: 15px; border-radius: 999px; background: var(--grid); overflow: hidden; }
.ftrack b {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--comp));
  transition: width .6s cubic-bezier(.2,.8,.2,1);
}
.fstep em {
  font-style: normal; text-align: right; font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 14px; font-weight: 600;
}
.fstep .prov { grid-column: 2 / -1; margin-top: -6px; }

.speedRow {
  display: grid; grid-template-columns: 120px 110px 1fr; gap: 11px; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--hair);
}
.speedRow:last-of-type { border-bottom: 0; }
.srName { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11.8px; color: var(--accent); }
.srVal { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 14px; font-weight: 600; }
.srSub { font-size: 11.2px; color: var(--muted); }

.queryRow {
  display: flex; justify-content: space-between; gap: 12px; padding: 6px 0;
  border-bottom: 1px solid var(--hair); font-size: 12.4px;
}
.queryRow:last-of-type { border-bottom: 0; }
.queryRow b { font-family: "IBM Plex Mono", ui-monospace, monospace; }

/* The single most persuasive screen in the system. Section 21. */
.lostValue {
  display: flex; align-items: center; gap: 18px; padding: 18px 20px; margin: 14px 0;
  background: var(--badSoft); border: 1px solid var(--bad); border-radius: var(--rL);
}
.lostValue b {
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 27px;
  font-weight: 600; color: var(--bad); display: block;
}
.lostValue.big b { font-size: 40px; }
.lostValue p { margin: 5px 0 0; font-size: 13px; color: var(--ink2); line-height: 1.55; max-width: 52ch; }
.lostValue .btn { margin-left: auto; flex: none; }

/* ------------------------------------------------------------ landlords */

.landlordRow {
  display: block; padding: 15px 16px; text-decoration: none; color: inherit;
  border-radius: var(--rL); transition: transform .16s, border-color .16s;
}
.landlordRow:hover { transform: translateY(-2px); border-color: var(--accent); }
.lrTop { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.lrTop b { font-size: 14px; }
.lrFacts { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11.6px; color: var(--muted); }

/* One block per instruction, the first in the accent colour and the repeats
   in the secondary, so the argument is visible rather than explained. */
.instructionBlocks { display: flex; gap: 4px; align-items: center; margin: 11px 0 9px; }
.instructionBlocks i { width: 26px; height: 9px; border-radius: 3px; display: block; }
.instructionBlocks i.first { background: var(--accent); }
.instructionBlocks i.repeat { background: var(--comp); }
.instructionBlocks .none { font-size: 10.6px; color: var(--muted); }
.lrFoot { font-size: 10.8px; color: var(--muted); }

.instructionRow {
  display: grid; grid-template-columns: 54px 1fr auto auto; gap: 13px; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--hair);
}
.instructionRow:last-of-type { border-bottom: 0; }
.irN { text-align: center; }
.irN b {
  display: block; font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 18px; font-weight: 600; line-height: 1;
}
.irN i { display: block; font-style: normal; font-size: 9.4px; color: var(--muted); margin-top: 3px; }
.instructionRow.first .irN b { color: var(--accent); }
.instructionRow.repeat .irN b { color: var(--comp); }
.irBody b { display: block; font-size: 12.8px; }
.irBody span { display: block; font-size: 11.2px; color: var(--muted); margin-top: 2px; }
.irMoney, .irFirm { text-align: right; }
.irMoney b, .irFirm b {
  display: block; font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 13.6px; font-weight: 600;
}
.irMoney b { color: var(--comp); }
.irMoney i, .irFirm i { display: block; font-style: normal; font-size: 9.8px; color: var(--muted); }

.rulePanel { border-color: var(--accent); }

.board { display: grid; grid-template-columns: repeat(4, minmax(200px, 1fr)); gap: 12px; overflow-x: auto; }
.boardCol { min-width: 0; }
.boardCol header {
  display: flex; align-items: baseline; gap: 7px; padding: 0 3px 9px;
  border-bottom: 2px solid var(--hair); margin-bottom: 10px;
}
.boardCol header b { font-size: 12.6px; }
.boardCol header span {
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11.4px; color: var(--accent);
}
.boardCol header i { margin-left: auto; font-style: normal; font-size: 9.8px; color: var(--muted); }
.boardCard { padding: 12px 13px; margin-bottom: 9px; border-radius: var(--rM); }
.bcName {
  display: block; font-size: 13px; font-weight: 600; text-decoration: none; color: var(--ink);
  margin-bottom: 6px;
}
.bcName:hover { color: var(--accent); }
.bcFacts { display: flex; gap: 9px; flex-wrap: wrap; font-size: 10.8px; color: var(--muted); margin-bottom: 9px; }
.bcMoney { padding: 8px 10px; background: var(--compSoft); border-radius: var(--rS); margin-bottom: 9px; }
.bcMoney b {
  display: block; font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 14px; font-weight: 600; color: var(--comp);
}
.bcMoney i { display: block; font-style: normal; font-size: 9.6px; color: var(--muted); margin-top: 2px; }
.bcWho { font-size: 10.4px; color: var(--muted); margin-bottom: 9px; }
.bcWho span { display: block; }
.boardEmpty { font-size: 11.4px; color: var(--muted); padding: 12px 3px; }
.weighted { text-align: right; }
.weighted b {
  display: block; font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 19px; font-weight: 600; color: var(--comp);
}
.weighted i { font-style: normal; font-size: 9.8px; color: var(--muted); }

/* -------------------------------------------------------------- reports */

.typeCard {
  display: block; padding: 16px 17px; text-decoration: none; color: inherit;
  border-radius: var(--rL); transition: transform .16s, border-color .16s;
}
.typeCard:hover { transform: translateY(-2px); border-color: var(--accent); }
.typeCard b { display: block; font-size: 14px; margin-bottom: 6px; }
.typeCard p { margin: 0 0 9px; font-size: 12.4px; color: var(--ink2); line-height: 1.55; }
.sections { font-size: 10.4px; color: var(--muted); }

.sheetFigures { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin: 10px 0 14px; }
.sf i { display: block; font-style: normal; font-size: 10px; color: #6b5a69; text-transform: uppercase; letter-spacing: .06em; }
.sf b { display: block; font-size: 18px; font-family: "IBM Plex Mono", ui-monospace, monospace; margin-top: 3px; }
.sf .prov { color: #8a768a; }
.sheetFunnel { display: flex; flex-direction: column; gap: 11px; margin: 10px 0 14px; }
.sheetFunnel .fstep { grid-template-columns: 150px 1fr 80px; }
.sheetFunnel .ftrack { background: #f0e8ef; }
.sheetFunnel .prov { color: #8a768a; }

/* -------------------------------------------------------------- support */

.tk { display: block; text-decoration: none; color: inherit; }
.tk .r2 { font-size: 11px; color: var(--muted); margin-top: 5px; }
.tk .r1 b { font-size: 13px; flex: 1; min-width: 0; }

.steps { display: flex; gap: 5px; margin-bottom: 15px; }
.step { flex: 1; text-align: center; }
.step i {
  display: block; height: 6px; border-radius: 999px; background: transparent;
  border: 1.5px solid var(--hair); margin-bottom: 6px;
}
.step.done i { background: var(--accent); border-color: var(--accent); }
.step.now i { background: var(--comp); border-color: var(--comp); }
.step span { font-size: 10.4px; color: var(--muted); }
.step.done span { color: var(--ink2); font-weight: 600; }
.step.now span { color: var(--comp); font-weight: 700; }

.tmsg { padding: 13px 0; border-bottom: 1px solid var(--hair); }
.tmsg:last-of-type { border-bottom: 0; }
.tmH { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.tmH b { font-size: 12px; }
.tmH i { margin-left: auto; font-style: normal; font-size: 10.4px; color: var(--muted); }
.tmsg p { margin: 0; font-size: 13px; line-height: 1.6; }

.attachments { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 10px; }
.attachments img {
  max-width: 190px; max-height: 150px; border-radius: var(--rS); border: 1px solid var(--hair);
  display: block;
}
.fileChip {
  display: flex; flex-direction: column; padding: 9px 13px; border-radius: var(--rS);
  background: var(--glass2); border: 1px solid var(--hair); text-decoration: none; color: inherit;
}
.fileChip b { font-size: 11.6px; }
.fileChip i { font-style: normal; font-size: 10px; color: var(--muted); }

.bcast {
  padding: 14px 16px; margin-bottom: 10px; border-radius: var(--rM);
  background: var(--glass); border: 1px solid var(--hair); border-left-width: 3px;
}
.bcast.notice { border-left-color: var(--accent); }
.bcast.update { border-left-color: var(--comp); }
.bcast.unread { box-shadow: var(--shS); }
.bcH { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.bcH b { font-size: 13.4px; }
.bcH .ver {
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10.4px;
  color: var(--comp); background: var(--compSoft); padding: 2px 7px; border-radius: 5px;
}
.bcast p { margin: 0 0 10px; font-size: 12.8px; line-height: 1.62; color: var(--ink2); }
.bcF { display: flex; align-items: center; gap: 10px; }
.bcF i { font-style: normal; font-size: 10.4px; color: var(--muted); }
.bcF form { margin-left: auto; }
.bcF .btn { padding: 4px 10px; font-size: 10.8px; }

/* ------------------------------------------------------------- messages */

.chatwrap { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 13px; }
.chatlist { display: flex; flex-direction: column; gap: 7px; }
.newChat { padding: 13px 15px; border-radius: var(--rM); }
.newChat > summary { cursor: pointer; font-size: 12.4px; font-weight: 600; color: var(--accent); }
.newChat > form { margin-top: 11px; }
.chatRow {
  display: block; padding: 11px 13px; border-radius: var(--rM); text-decoration: none;
  color: inherit; background: var(--glass2); border: 1px solid transparent; transition: .14s;
}
.chatRow:hover { border-color: var(--hair); }
.chatRow.on { background: var(--soft); border-color: var(--accent); }
.crWho { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.crWho b {
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11.6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.crLast {
  display: block; font-size: 11.4px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chatRow i { font-style: normal; font-size: 9.8px; color: var(--muted); }

.chatMain { display: flex; flex-direction: column; min-height: 460px; }
.chatHead {
  display: flex; align-items: center; gap: 10px; padding: 13px 16px;
  border-bottom: 1px solid var(--hair);
}
.chatHead b { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12.6px; }
.chatHead form { margin-left: auto; }
.chatHead .btn { padding: 5px 11px; font-size: 11px; }
.chatBody { flex: 1; overflow-y: auto; padding: 15px 16px; display: flex; flex-direction: column; gap: 11px; }
.msg {
  max-width: 74%; padding: 9px 13px; border-radius: var(--rM); background: var(--glass2);
  position: relative;
}
.msg.mine { align-self: flex-end; background: var(--soft); }
.msgH { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.msgH b { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10.8px; color: var(--accent); }
.msgH i { font-style: normal; font-size: 9.6px; color: var(--muted); }
.msg p { margin: 0; font-size: 13px; line-height: 1.55; }
.msgDel { position: absolute; top: 4px; right: 6px; opacity: 0; transition: .14s; }
.msg:hover .msgDel { opacity: 1; }
.msgDel button {
  all: unset; cursor: pointer; font-size: 14px; color: var(--muted); line-height: 1;
}
.msgDel button:hover { color: var(--bad); }
.chatSend { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--hair); }
.chatSend .input { flex: 1; }

/* -------------------------------------------------------- data sources */

.scTop { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 8px; }
.scTop b { font-size: 13.6px; }
.scAccount {
  display: block; font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10.8px; color: var(--accent); margin-bottom: 7px;
}
.scBrings { margin: 0 0 10px; font-size: 11.8px; color: var(--ink2); line-height: 1.55; }
.scFoot i { font-style: normal; font-size: 10.4px; color: var(--muted); }

.srcCard.attention::before { background: var(--bad); }
.srcCard.not_connected::before { background: var(--muted); }
.srcCard.paused::before { background: var(--warn); }
.srcCard { text-decoration: none; color: inherit; }

.needsList { margin: 0 0 13px; padding-left: 18px; font-size: 12.6px; line-height: 1.75; color: var(--ink2); }
.reviewNote {
  padding: 12px 14px; background: var(--compSoft); border-radius: var(--rM);
  border-left: 3px solid var(--comp); margin-bottom: 13px;
}
.reviewNote b { display: block; font-size: 12.4px; color: var(--comp); margin-bottom: 5px; }
.reviewNote p { margin: 0; font-size: 12px; line-height: 1.6; color: var(--ink2); }
.errorCard { border-color: var(--bad); }

.eventGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 9px; margin: 11px 0; }
.ev { padding: 9px 11px; background: var(--glass2); border-radius: var(--rS); }
.ev code {
  display: block; font-size: 11.4px; color: var(--accent); font-weight: 600;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}
.ev span { display: block; font-size: 10.8px; color: var(--muted); margin-top: 3px; }

.trackerRow { padding: 14px 16px; margin-bottom: 10px; border-radius: var(--rM); }
.trTop { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.trTop b { font-size: 13px; flex: 1; }
.trNote { margin: 0 0 9px; font-size: 11.4px; color: var(--muted); line-height: 1.5; }

.switch { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; }
.switch span {
  width: 34px; height: 19px; border-radius: 999px; background: var(--grid);
  position: relative; transition: .18s; display: block; flex: none;
}
.switch span::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px;
  border-radius: 50%; background: #fff; transition: .18s; box-shadow: var(--shS);
}
.switch input:checked + span { background: var(--good); }
.switch input:checked + span::after { transform: translateX(15px); }
.switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch i { font-style: normal; font-size: 10.6px; color: var(--muted); }

.consentPanel { border-color: var(--good); }

.methodCards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 16px; }
.method { position: relative; padding-top: 22px; }
.mNum {
  position: absolute; top: 12px; left: 15px;
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px;
  width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; font-weight: 700;
}
.method.one .mNum { background: var(--good); }
.method.two .mNum { background: var(--accent); }
.method.three .mNum { background: var(--muted); }
.method b { display: block; font-size: 13.4px; margin: 6px 0 7px; }
.method p { margin: 0 0 10px; font-size: 12px; line-height: 1.6; color: var(--ink2); }

.tagCard .tagBody { display: flex; gap: 15px; flex-wrap: wrap; align-items: flex-start; }
.tagLinks { flex: 1; min-width: 220px; }
.tapCount { margin-left: auto; font-size: 10.8px; color: var(--muted); }

/* --------------------------------------------------------- the settings */

.colourInput { height: 42px; padding: 4px; cursor: pointer; }
.logoPreviews { display: flex; gap: 20px; align-items: flex-end; flex-wrap: wrap; margin: 13px 0; }
.logoPreviews > div { text-align: center; }
.logoPreviews i { display: block; font-style: normal; font-size: 9.8px; color: var(--muted); margin-top: 7px; }
.recoveryCodes {
  margin-top: 13px; padding: 13px 15px; background: var(--compSoft); border-radius: var(--rM);
}
.recoveryCodes b { display: block; font-size: 12.4px; margin-bottom: 4px; }
.recoveryCodes ul {
  list-style: none; margin: 9px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px;
}
.recoveryCodes code { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12px; }

.kindChoice { cursor: pointer; display: block; }
.kindChoice input { position: absolute; opacity: 0; width: 0; }
.kindChoice span {
  display: block; text-align: center; padding: 12px 10px; border-radius: var(--rM);
  background: var(--glass2); border: 1.5px solid var(--hair); font-size: 12.6px;
  font-weight: 600; transition: .15s;
}
.kindChoice input:checked + span { border-color: var(--accent); background: var(--soft); color: var(--accent); }
.kindChoice input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.tierRow { align-items: end; }
.exampleRow { padding: 13px 0; border-bottom: 1px solid var(--hair); }
.exampleRow:last-of-type { border-bottom: 0; }
.exampleRow > b { display: block; font-size: 13px; margin-bottom: 9px; }
.exGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.exGrid span { display: block; }
.exGrid i { display: block; font-style: normal; font-size: 9.8px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.exGrid b { display: block; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 14px; font-weight: 600; margin-top: 3px; }
.addCompany { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--accent); }

.strengthWrap { margin-top: 7px; }
.strengthBar { height: 5px; border-radius: 999px; background: var(--grid); overflow: hidden; }
.strengthBar i { display: block; height: 100%; width: 0; border-radius: 999px; transition: width .25s, background .25s; }

/* -------------------------------------------------------- administration */

.miniRow {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 9px 0; border-bottom: 1px solid var(--hair); text-decoration: none; color: inherit;
}
.miniRow:last-of-type { border-bottom: 0; }
.miniRow:hover { color: var(--accent); }
.miniRow .num { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10.8px; color: var(--accent); }
.miniRow b { font-size: 12.4px; flex: 1; min-width: 0; }
.miniRow i { font-style: normal; font-size: 10.4px; color: var(--muted); }

.roleTile, .roleCard { padding: 14px 16px; border-radius: var(--rM); }
.roleTile b, .roleCard b { display: block; font-size: 13px; }
.rtFacts { display: flex; gap: 11px; flex-wrap: wrap; font-size: 10.8px; color: var(--muted); margin: 7px 0 9px; }
.rtFacts code { font-family: "IBM Plex Mono", ui-monospace, monospace; }

.permGroup {
  margin: 18px 0 8px; font-size: 10.4px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); font-weight: 700;
}
.permRow {
  display: flex; align-items: center; gap: 11px; padding: 8px 11px; margin-bottom: 5px;
  border-radius: var(--rS); background: var(--glass2); border-left: 3px solid transparent;
}
.permRow .pDot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--grid); }
.permRow.role { border-left-color: var(--good); }
.permRow.role .pDot { background: var(--good); }
.permRow.granted { border-left-color: var(--comp); background: var(--compSoft); }
.permRow.granted .pDot { background: var(--comp); }
.permRow.revoked { border-left-color: var(--bad); background: var(--badSoft); }
.permRow.revoked .pDot { background: var(--bad); }
.pBody { flex: 1; min-width: 0; }
.pBody b { display: block; font-size: 12.2px; font-weight: 500; }
.pBody code { font-size: 10.2px; color: var(--muted); font-family: "IBM Plex Mono", ui-monospace, monospace; }
.pBody s { display: block; text-decoration: none; font-size: 10.4px; color: var(--muted); }
.pActions .btn { padding: 4px 10px; font-size: 10.8px; }

.sheetKey { display: flex; gap: 13px; flex-wrap: wrap; margin-bottom: 13px; font-size: 10.6px; }
.sheetKey .k { display: flex; align-items: center; gap: 5px; color: var(--muted); }
.sheetKey .k::before { content: ""; width: 9px; height: 9px; border-radius: 50%; }
.sheetKey .k.role::before { background: var(--good); }
.sheetKey .k.granted::before { background: var(--comp); }
.sheetKey .k.revoked::before { background: var(--bad); }
.sheetKey .k.none::before { background: var(--grid); }

.jobCard { padding: 15px 16px; }
.dropZone {
  border: 2px dashed var(--hair); border-radius: var(--rM); padding: 24px 18px;
  text-align: center; margin-bottom: 15px; transition: .15s;
}
.dropZone:hover { border-color: var(--accent); }
.dropZone label { display: block; font-size: 12.4px; color: var(--muted); margin-top: 9px; }

.versionCard { padding: 15px 16px; }
.versionCard.published { border-color: var(--good); }
.versionCard.rolled_back { opacity: .6; }

.retentionRow {
  display: flex; align-items: center; gap: 15px; flex-wrap: wrap;
  padding: 11px 0; border-bottom: 1px solid var(--hair);
}
.retentionRow:last-of-type { border-bottom: 0; }
.rrBody { flex: 1; min-width: 200px; }
.rrBody b { display: block; font-size: 12.6px; }
.rrBody span { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
.rrBody s { display: block; text-decoration: none; font-size: 10.2px; color: var(--muted); margin-top: 3px; }
.rrAction { display: flex; align-items: center; gap: 8px; }
.rrAction .input { width: 78px; }
.rrAction span { font-size: 11.4px; color: var(--muted); }

.breachRow, .subjectRow {
  padding: 11px 0; border-bottom: 1px solid var(--hair);
}
.breachRow:last-of-type, .subjectRow:last-of-type { border-bottom: 0; }
.breachRow.late { background: var(--badSoft); border-radius: var(--rS); padding: 11px 13px; }
.brH, .srH { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 5px; }
.brH .num, .srH .num { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10.8px; color: var(--accent); }
.brH b, .srH b { font-size: 12.6px; flex: 1; min-width: 0; }
.breachRow i, .subjectRow i { display: block; font-style: normal; font-size: 10.8px; color: var(--muted); line-height: 1.5; }

.changeCard { padding: 15px 16px; }
.changeCard p { font-size: 12.6px; line-height: 1.6; color: var(--ink2); margin: 0 0 9px; }
.quoteRow {
  display: flex; align-items: baseline; gap: 11px; padding: 9px 12px;
  background: var(--compSoft); border-radius: var(--rS); margin-bottom: 9px;
}
.quoteRow b { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 16px; color: var(--comp); }
.quoteRow span { font-size: 11.6px; color: var(--ink2); }
.licencePanel { border-color: var(--accent); }
.licencePanel b { display: block; font-size: 12.4px; margin-bottom: 7px; }

/* --------------------------------------------------------------- legal */

.legalDoc { max-width: 760px; margin: 0 auto; }
.legalDoc h1 { font-size: 23px; margin: 0 0 6px; }
.legalBody { font-size: 13.6px; line-height: 1.75; color: var(--ink2); }
.legalBody h2 {
  font-size: 14.5px; margin: 24px 0 8px; color: var(--accent);
  font-family: Sora, "Segoe UI", system-ui, sans-serif;
}
.legalBody p { margin: 0 0 12px; }
.legalBody strong { color: var(--ink); }
.legalNav { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--hair); }

/* ------------------------------------------------------- notifications */

.notifRow {
  display: flex; align-items: flex-start; gap: 13px; padding: 12px 0;
  border-bottom: 1px solid var(--hair); text-decoration: none; color: inherit;
}
.notifRow:last-of-type { border-bottom: 0; }
.notifRow:hover b { color: var(--accent); }
.notifRow.unread { box-shadow: inset 3px 0 0 var(--comp); padding-left: 12px; }
.notifRow b { display: block; font-size: 12.8px; }
.notifRow span { display: block; font-size: 11.6px; color: var(--muted); margin-top: 2px; }
.notifRow i { margin-left: auto; font-style: normal; font-size: 10.4px; color: var(--muted); white-space: nowrap; }

/* ------------------------------------------------------- private tools */

.privateTools { margin-top: 20px; }
.toolH { margin: 0 0 10px; font-size: 12.8px; font-weight: 600; }
.checkList, .reminderList { list-style: none; margin: 0 0 11px; padding: 0; }
.checkList li { padding: 5px 0; font-size: 12.6px; }
.checkList li.done label span { text-decoration: line-through; color: var(--muted); }
.checkList label { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; }
.checkList input { margin-top: 2px; accent-color: var(--accent); }
.reminderList li { padding: 6px 0; border-bottom: 1px solid var(--hair); font-size: 12.4px; }
.reminderList li:last-child { border-bottom: 0; }
.reminderList i { display: block; font-style: normal; font-size: 10.2px; color: var(--muted); margin-top: 2px; }

/* --------------------------------------------------------- arrange mode */

.arrOn { position: relative; outline: 2px dashed var(--accent); outline-offset: 3px; border-radius: var(--rM); }
.arrHandle {
  position: absolute; top: -11px; left: 12px; z-index: 5; cursor: grab;
  font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--accent); padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--accent);
}
.arrHandle:active { cursor: grabbing; }

/* ------------------------------------------------------------ responsive */

@media (max-width: 1100px) {
  .split, .split2 { grid-template-columns: 1fr; }
  .chatwrap { grid-template-columns: 1fr; }
  .board { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
}

@media (max-width: 780px) {
  .main { padding: 14px 12px 40px; }
  .poolGrid { grid-template-columns: 1fr; }
  .ccSplit, .bothHalves { grid-template-columns: 1fr; }
  .fstep { grid-template-columns: 1fr; gap: 5px; }
  .fstep em { text-align: left; }
  .speedRow { grid-template-columns: 1fr 1fr; }
  .barRow { grid-template-columns: 90px 1fr auto; }
  .board { grid-template-columns: 1fr; }
  .heroBtns { position: static; margin-top: 12px; }
  .steps { flex-wrap: wrap; }
  .step { min-width: 62px; }
  .retentionRow { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 420px) {
  .instructionRow { grid-template-columns: 44px 1fr; }
  .irMoney, .irFirm { text-align: left; grid-column: 2; }
  .stageRow { gap: 2px; }
  .stg { min-width: 46px; font-size: 9.4px; padding: 6px 2px; }
  .mbAmount { font-size: 23px; }
}

/* =========================================================================
   The installer.

   It borrows the sign in screen deliberately: the first thing somebody sees
   of this system should already look like the system.
   ========================================================================= */

.installSplit .lgRight { align-items: flex-start; padding-top: 40px; }
.installCard { max-width: 470px; }

.installSteps { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.installSteps li { display: flex; align-items: center; gap: 11px; font-size: 13.2px; opacity: .5; }
.installSteps li i {
  font-style: normal; width: 24px; height: 24px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
  border: 1.5px solid rgba(255, 255, 255, .4);
}
.installSteps li.now { opacity: 1; font-weight: 600; }
.installSteps li.now i { background: #F7C48C; border-color: #F7C48C; color: #3A1436; }
.installSteps li.done { opacity: .82; }
.installSteps li.done i { background: rgba(255, 255, 255, .22); border-color: transparent; }

.installH {
  margin: 22px 0 12px; font-size: 10.4px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); font-weight: 700;
}
.installH:first-child { margin-top: 4px; }

.checkList.install { margin: 0 0 18px; padding: 0; list-style: none; }
.checkList.install li {
  display: flex; align-items: flex-start; gap: 11px; padding: 10px 12px; margin-bottom: 6px;
  border-radius: var(--rS); background: var(--glass2); border-left: 3px solid transparent;
}
.checkList.install li i {
  font-style: normal; width: 19px; height: 19px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff;
}
.checkList.install li.pass { border-left-color: var(--good); }
.checkList.install li.pass i { background: var(--good); }
.checkList.install li.fail { border-left-color: var(--bad); background: var(--badSoft); }
.checkList.install li.fail i { background: var(--bad); }
.checkList.install li.warn { border-left-color: var(--warn); }
.checkList.install li.warn i { background: var(--warn); }
.checkList.install li > div { flex: 1; min-width: 0; }
.checkList.install b { display: block; font-size: 12.6px; font-weight: 600; }
.checkList.install span { display: block; font-size: 11.2px; color: var(--muted); margin-top: 2px; }
.checkList.install em {
  display: block; font-style: normal; font-size: 11.4px; color: var(--warn);
  margin-top: 5px; line-height: 1.5;
}

.installHelp {
  margin-bottom: 16px; padding: 13px 15px; border-radius: var(--rM);
  background: var(--glass2); border: 1px solid var(--hair);
}
.installHelp > summary { cursor: pointer; font-size: 12.4px; font-weight: 600; color: var(--accent); }
.installHelp ol { margin: 11px 0 8px; padding-left: 19px; font-size: 12.2px; line-height: 1.7; color: var(--ink2); }
.installHelp p { margin: 0; font-size: 12px; color: var(--muted); }
.installHelp code, .installWhat code, .installNote code {
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11.4px;
  background: var(--soft); color: var(--accent); padding: 1px 5px; border-radius: 4px;
}

.installChoice { display: block; cursor: pointer; margin-bottom: 9px; }
.installChoice input { position: absolute; opacity: 0; width: 0; }
.installChoice > span {
  display: block; padding: 13px 15px; border-radius: var(--rM);
  background: var(--glass2); border: 1.5px solid var(--hair); transition: .15s;
}
.installChoice input:checked + span { border-color: var(--accent); background: var(--soft); }
.installChoice input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.installChoice b { display: block; font-size: 12.8px; margin-bottom: 4px; }
.installChoice i { display: block; font-style: normal; font-size: 11.4px; color: var(--muted); line-height: 1.6; }

.reviewList { margin-bottom: 8px; }
.rv { padding: 9px 0; border-bottom: 1px solid var(--hair); }
.rv:last-child { border-bottom: 0; }
.rv i {
  display: block; font-style: normal; font-size: 9.8px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
.rv b { display: block; font-size: 13.6px; margin-top: 3px; }
.rv s { display: block; text-decoration: none; font-size: 11.4px; color: var(--muted); margin-top: 2px; }

.installWhat { margin: 0 0 16px; padding-left: 19px; font-size: 12.4px; line-height: 1.8; color: var(--ink2); }

.installNote {
  padding: 13px 15px; margin-bottom: 11px; border-radius: var(--rM);
  background: var(--glass2); border-left: 3px solid var(--comp);
}
.installNote b { display: block; font-size: 12.8px; margin-bottom: 5px; }
.installNote p { margin: 0 0 8px; font-size: 12.2px; line-height: 1.65; color: var(--ink2); }
.installNote > details > summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--accent); }

.cronTable { margin: 11px 0; display: flex; flex-direction: column; gap: 8px; }
.cronRow { padding: 8px 10px; background: var(--glass); border-radius: var(--rS); }
.cronRow code { display: block; font-family: "IBM Plex Mono", ui-monospace, monospace; }
.cronRow .sched { font-size: 11px; color: var(--comp); font-weight: 600; }
.cronRow .cmd { font-size: 10.4px; color: var(--ink2); word-break: break-all; margin-top: 2px; }
.cronRow span { display: block; font-size: 10.6px; color: var(--muted); margin-top: 4px; }

@media (max-width: 900px) {
  .installSplit .lgRight { padding-top: 26px; }
  .installSteps { flex-direction: row; flex-wrap: wrap; gap: 8px 16px; }
  .installSteps li span { display: none; }
  .installSteps li.now span { display: inline; }
}


/* =========================================================================
   What the server rendered application adds to the demonstration stylesheet.
   Nothing here changes a shape the demonstration set. It covers the parts a
   real system has that a demonstration did not: forms that post, the locked
   page, provenance under every figure, and the printed report.
   ========================================================================= */

/* Three modes, not two. Light is the house default, System follows the
   device and switches with it live. Section 33. */
:root[data-theme="system"] { color-scheme: light dark; }

/* The placeholder wordmark, shown until a logo is uploaded. Section 3. */
.placeholderLogo { display: inline-flex; align-items: center; }
.placeholderLogo > span { display: block; }

/* The logo is rendered by height only, so the uploaded proportions survive
   at every one of the three sizes. Section 3. */
.brandLogo { height: auto; width: auto; max-width: 100%; }

/* ---------------------------------------------------------------- forms */

.field { display: block; margin-bottom: 13px; }
.field > label {
  display: block; font-size: 11.5px; font-weight: 600; color: var(--ink2);
  margin-bottom: 5px; letter-spacing: .01em;
}
.field .hint { display: block; font-size: 11px; color: var(--muted); margin-top: 4px; }

.input, .select, .textarea {
  width: 100%; padding: 10px 12px; font: inherit; font-size: 13.5px;
  color: var(--ink); background: var(--glass); border: 1px solid var(--hair);
  border-radius: var(--rS); transition: .15s; appearance: none;
}
.input:focus, .select:focus, .textarea:focus {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}
.textarea { min-height: 92px; resize: vertical; line-height: 1.55; }

.inputPrefix { position: relative; }
.inputPrefix .pfx {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--muted); font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 13.5px;
  pointer-events: none;
}
.inputPrefix .input { padding-left: 27px; }

.checkrow { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 11px; }
.checkrow input[type="checkbox"], .checkrow input[type="radio"] {
  width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--accent); flex: 0 0 auto;
}
.checkrow label { font-size: 13px; color: var(--ink); cursor: pointer; }
.checkrow .sub { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }

.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.frow3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 13px; }

/* Buttons compress slightly when pressed. Section 32. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 16px; font: inherit; font-size: 13px; font-weight: 600;
  border-radius: var(--rS); border: 1px solid transparent; cursor: pointer;
  transition: transform .12s, box-shadow .15s, background .15s, border-color .15s;
  text-decoration: none; line-height: 1.2;
}
.btn:active { transform: scale(.976); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn.primary { background: var(--accent); color: #fff; box-shadow: var(--shS); }
.btn.primary:hover { background: var(--deep); }
.btn.money { background: var(--comp); color: #fff; box-shadow: var(--shS); }
.btn.money:hover { filter: brightness(.94); }
.btn.ghost { background: var(--glass); color: var(--ink); border-color: var(--hair); }
.btn.ghost:hover { border-color: var(--accent); }
.btn.danger { background: var(--bad); color: #fff; }
.btn.wide { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* -------------------------------------------------- provenance under figures
   No number appears that the system did not fetch, and every figure carries
   where it came from, the range and the moment of the fetch. Section 2 rule
   eight. This is the wording that carries it. */

.prov {
  display: block; font-size: 10.5px; line-height: 1.45; color: var(--muted);
  margin-top: 4px; max-width: 46ch;
}
.prov.warn { color: var(--warn); }
.notConnected {
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12px;
  color: var(--muted); font-weight: 500;
}
.provisionalTag {
  display: inline-block; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 5px; background: var(--compSoft); color: var(--comp);
  font-weight: 600; margin-left: 6px; vertical-align: middle;
}
.byHandTag {
  display: inline-block; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 5px; background: var(--soft); color: var(--accent);
  font-weight: 600; margin-left: 6px; vertical-align: middle;
}

/* ------------------------------------------------------------ locked page */

.lockWrap {
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
  position: relative; z-index: 1;
}
.lockCard {
  max-width: 520px; background: var(--glass); border: 1px solid var(--line);
  border-radius: var(--rL); box-shadow: var(--shL); padding: 34px 32px;
  backdrop-filter: blur(16px); text-align: left;
}
.lockCard h1 { margin: 0 0 10px; font-size: 24px; }
.lockCard p { margin: 0 0 14px; color: var(--ink2); font-size: 14px; line-height: 1.6; }
.lockCard .who { font-size: 12px; color: var(--muted); margin-bottom: 20px; }

/* ------------------------------------------------------------ the toasts */

.toastWrap {
  position: fixed; right: 16px; bottom: 16px; z-index: 90;
  display: flex; flex-direction: column; gap: 8px; max-width: min(380px, calc(100vw - 32px));
}
.toast {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 11px 14px; border-radius: var(--rM); background: var(--glass);
  border: 1px solid var(--hair); box-shadow: var(--shL); backdrop-filter: blur(14px);
  font-size: 13px; animation: toastIn .28s cubic-bezier(.2,.8,.2,1);
}
.toast .ic { flex: 0 0 auto; font-size: 15px; line-height: 1.3; }
.toast.good { border-left: 3px solid var(--good); }
.toast.bad  { border-left: 3px solid var(--bad); }
.toast.warn { border-left: 3px solid var(--warn); }
.toast.info { border-left: 3px solid var(--accent); }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------- printed reports
   Exports carry the logo, the company name, the title, the period, the
   author's nickname, the timestamp and the footer line. Section 11. */

.sheet {
  background: #fff; color: #1a1119; padding: 34px 38px; border-radius: var(--rM);
  box-shadow: var(--shL); max-width: 860px; margin: 0 auto;
}
.sheet .head {
  display: flex; align-items: flex-start; gap: 16px;
  padding-bottom: 16px; border-bottom: 2px solid var(--brand); margin-bottom: 22px;
}
.sheet .head .co { margin-left: auto; text-align: right; font-size: 11px; color: #6b5a69; line-height: 1.6; }
.sheet h1 { margin: 0 0 4px; font-size: 21px; color: var(--brand); }
.sheet .period { font-size: 12px; color: #6b5a69; }
.sheet .foot {
  margin-top: 28px; padding-top: 14px; border-top: 1px solid #e6dce5;
  font-size: 10.5px; color: #8a768a; line-height: 1.6;
}
.sheet table { width: 100%; border-collapse: collapse; margin: 12px 0 18px; font-size: 12px; }
.sheet th {
  text-align: left; padding: 7px 9px; background: #f6f1f6; color: var(--brand);
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600;
}
.sheet td { padding: 7px 9px; border-bottom: 1px solid #f0e8ef; }
.sheet td.num, .sheet th.num { text-align: right; font-family: "IBM Plex Mono", ui-monospace, monospace; }

@media print {
  .rail, .toastWrap, .noPrint, .bell { display: none !important; }
  body { background: #fff; }
  .blobs, .wallpaper { display: none; }
  .main { padding: 0; }
  .sheet { box-shadow: none; border-radius: 0; max-width: none; padding: 0; }
}

/* -------------------------------------------------------------- the tools
   A padlock and the words Only you see this. Section 29. */

.privateHead { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; }
.privateHead .lk { font-size: 11px; opacity: .7; }
.privateHead .lbl { font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 600; }

/* ------------------------------------------------------------ nicknames */

.nickChip {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 7px;
  border-radius: 999px; background: var(--soft); color: var(--accent);
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11.5px; font-weight: 500;
}
.nickChip .x { cursor: pointer; opacity: .6; font-size: 13px; line-height: 1; }
.nickChip .x:hover { opacity: 1; }

/* A mention renders as a highlighted chip in the thread. Section 12. */
.mention {
  background: var(--soft); color: var(--accent); padding: 1px 5px; border-radius: 5px;
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .92em; font-weight: 500;
}

/* ------------------------------------------------------------- QR codes */

.qrBlock { display: inline-block; padding: 12px; background: #fff; border-radius: var(--rS); }
.qrBlock svg { display: block; }
.qrTooLong { padding: 14px; border: 1px dashed var(--hair); border-radius: var(--rS); font-size: 12px; color: var(--muted); }

/* ------------------------------------------------------ accessibility */

.skip {
  position: absolute; left: -9999px; top: 0; padding: 10px 16px; z-index: 200;
  background: var(--accent); color: #fff; border-radius: 0 0 var(--rS) 0; font-weight: 600;
}
.skip:focus { left: 0; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px;
}

.visuallyHidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Everything works down to 380px. The pool becomes one column, the rail
   becomes a bottom bar. Section 32. */
@media (max-width: 780px) {
  .railBottom {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: var(--glass); backdrop-filter: blur(18px); border-top: 1px solid var(--hair);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .railBottom a {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 6px 2px; font-size: 9.5px; color: var(--muted); text-decoration: none;
    border-radius: var(--rS); text-align: center;
  }
  .railBottom a[aria-current="page"] { color: var(--accent); background: var(--soft); }
  .main { padding-bottom: 78px !important; }
}
@media (min-width: 781px) { .railBottom { display: none; } }

@media (max-width: 420px) {
  .frow, .frow3 { grid-template-columns: 1fr; }
  .sheet { padding: 20px 16px; }
}

/* ====================================================================== */
/* The sign in screen. Section 7 asks for a split: the brand gradient and  */
/* the live figures on the left, the sign in card on the ordinary page     */
/* ground on the right. The card, the fields and the button keep the shapes*/
/* the demonstration set.                                                  */
/* ====================================================================== */

.lgSplit {
  position: fixed; inset: 0; z-index: 60; display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  overflow-y: auto; background: var(--ground);
}

.lgLeft {
  position: relative; overflow: hidden; color: #F4EAF3;
  background: linear-gradient(158deg, #4B1246 0%, #792070 46%, #A8451F 128%);
  display: flex; flex-direction: column; padding: 30px 40px 34px;
}
.lgLeftIn { position: relative; z-index: 2; display: flex; flex-direction: column; flex: 1; }

.lgPitch { margin: auto 0; max-width: 30rem; }
.lgPitch h1 {
  font-size: clamp(27px, 3.1vw, 40px); line-height: 1.08; letter-spacing: -.035em;
  margin: 0 0 16px; color: #fff; font-weight: 700;
}
.lgPitch p { font-size: 14.5px; line-height: 1.68; color: rgba(244, 234, 243, .8); margin: 0 0 26px; }

.lgFigures { display: flex; gap: 26px; flex-wrap: wrap; margin-bottom: 26px; }
.lgFigures .fg b {
  display: block; font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 25px; font-weight: 500; color: #F7C48C; line-height: 1.1;
}
.lgFigures .fg i {
  display: block; font-style: normal; font-size: 9.6px; letter-spacing: .15em;
  text-transform: uppercase; color: rgba(244, 234, 243, .58); margin-top: 5px;
}

.lgProverb {
  font-style: italic; font-size: 13.6px; line-height: 1.6; color: rgba(244, 234, 243, .74);
  border-left: 2px solid rgba(247, 196, 140, .55); padding-left: 14px; max-width: 27rem;
}

.lgRight {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 34px 26px; position: relative;
}
.lgRightCard {
  width: 100%; max-width: 400px; background: var(--glass); border: 1px solid var(--line);
  border-radius: var(--rL); box-shadow: var(--shL); padding: 32px 30px 26px; backdrop-filter: blur(18px);
}
.lgRightCard .lgEyebrow { color: var(--comp); }
.lgRightCard .lgTitle { color: var(--ink); font-size: 25px; margin: 8px 0 7px; }
.lgRightCard .lgLead { color: var(--ink2); }
.lgRightCard .lgLab { color: var(--muted); }
.lgRightCard .lgField {
  background: var(--glass2); border-color: var(--hair);
}
.lgRightCard .lgField:focus-within { background: var(--glass); border-color: var(--comp); }
.lgRightCard .lgField input { color: var(--ink); }
.lgRightCard .lgField input::placeholder { color: var(--muted); }
.lgRightCard .lgField .pre, .lgRightCard .lgField .eye { color: var(--muted); }
.lgRightCard .lgChk { color: var(--ink2); }
.lgRightCard .lgChk input { border-color: var(--hair); background: var(--glass2); }
.lgRightCard .lgLink { color: var(--comp); }
.lgRightCard .lgHint { color: var(--muted); }
.lgRightCard .lgErr {
  color: var(--bad); background: var(--badSoft); border-color: var(--badSoft);
}
.lgRightCard .lgOk {
  margin: 0 0 14px; font-size: 12px; color: var(--good); background: var(--goodSoft);
  border: 1px solid var(--goodSoft); border-radius: 11px; padding: 10px 12px; line-height: 1.5;
}
.lgRightCard .codeBox { color: var(--ink); background: var(--glass2); border-color: var(--hair); }
.lgRightCard .codeBox:focus { border-color: var(--comp); background: var(--glass); }
.lgRightCard .lgOr { color: var(--muted); }
.lgRightCard .lgOr::before, .lgRightCard .lgOr::after { background: var(--hair); }

.lgFoot {
  margin-top: 20px; font-size: 11px; color: var(--muted); text-align: center; line-height: 1.7;
}
.lgFoot a { color: var(--muted); }

/* The help channel on the sign in screen itself. Section 7. */
.lgHelp {
  margin-top: 16px; width: 100%; max-width: 400px;
  background: var(--glass2); border: 1px solid var(--hair); border-radius: var(--rM);
  padding: 15px 17px;
}
.lgHelp summary {
  cursor: pointer; font-size: 12.6px; font-weight: 600; color: var(--ink2); list-style: none;
  display: flex; align-items: center; gap: 8px;
}
.lgHelp summary::-webkit-details-marker { display: none; }
.lgHelp summary::before { content: "?"; }
.lgHelp[open] summary { margin-bottom: 12px; }
.lgHelp p { font-size: 11.6px; color: var(--muted); line-height: 1.6; margin: 0 0 11px; }

.lgLocked {
  text-align: center; padding: 8px 0 4px;
}
.lgLocked .big {
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 30px;
  color: var(--bad); display: block; margin: 10px 0 6px;
}

@media (max-width: 900px) {
  .lgSplit { grid-template-columns: 1fr; }
  .lgLeft { padding: 26px 22px 30px; min-height: auto; }
  .lgPitch h1 { font-size: 26px; }
  .lgPitch p { margin-bottom: 20px; }
  .lgRight { padding: 26px 18px 40px; }
}
@media (max-width: 420px) {
  .lgFigures { gap: 18px; }
  .lgFigures .fg b { font-size: 21px; }
  .lgRightCard { padding: 24px 20px 20px; }
}