/* ==========================================================================
   Payee Global white-label demo back office. The Recon Engine V32 system
   (~/recon-engine.html): red and white liquid glass, red constellation on body,
   glass panels with the animated conic metal-glare ring, maroon/red left sidebar.
   Brand tokens (--b1..--b3, --acc*) are re-skinned by pg-demo.js from Settings.
   ========================================================================== */
:root{
  color-scheme: light;
  --ink:#2b3444; --ink-soft:#3c4658; --navy:#1a2436; --muted:#6b7280; --faint:#9aa1ae; --grey-head:#5a6273;
  --line:rgba(26,36,54,.10); --line-soft:rgba(26,36,54,.055);
  --acc:#D24B44; --acc-lite:#E1786F; --acc-deep:#B23A33; --acc-rgb:210,75,68;
  --acc-wash:rgba(var(--acc-rgb),.14);
  --b1:#C74A42; --b2:#AE382F; --b3:#97302A; --b-rgb:147,48,43; --b-soft:#ffd9d4;
  --pos:#177245; --pos-2:#29b06c; --pos-wash:rgba(41,176,108,.16);
  --warn:#8a5d00; --warn-wash:rgba(224,168,0,.18); --orange:#b8621a;
  --info-wash:rgba(43,52,68,.09);
  --glass:rgba(255,255,255,.26); --glass-strong:rgba(255,255,255,.5); --glass-border:rgba(255,255,255,.6);
  --blur:34px;
  --disp:'Archivo','Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --body:'Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --shadow:0 10px 34px rgba(24,16,16,.09), inset 0 1px 0 rgba(255,255,255,.7);
  --sbw:252px; --r:18px; --bn:36px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  --ease:cubic-bezier(.16,1,.3,1); --ease-io:cubic-bezier(.4,0,.2,1);
  --field:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900' preserveAspectRatio='xMidYMid slice'%3E%3Cpath d='M -40 847 Q 642 230 1257 -240' fill='none' stroke='%23C0392F' stroke-width='2.1' stroke-opacity='0.5'/%3E%3Cpath d='M -40 875 Q 854 214 1082 -200' fill='none' stroke='%23C0392F' stroke-width='2.2' stroke-opacity='0.32'/%3E%3Cpath d='M -40 899 Q 914 249 1403 -93' fill='none' stroke='%23C0392F' stroke-width='2.3' stroke-opacity='0.46'/%3E%3Cpath d='M -40 806 Q 773 285 1202 -195' fill='none' stroke='%23C0392F' stroke-width='1.9' stroke-opacity='0.38'/%3E%3Cpath d='M -40 605 Q 576 96 1471 -172' fill='none' stroke='%23C0392F' stroke-width='1.6' stroke-opacity='0.46'/%3E%3Cpath d='M -40 953 Q 512 348 1188 -104' fill='none' stroke='%23C0392F' stroke-width='1.9' stroke-opacity='0.38'/%3E%3Cpath d='M -40 647 Q 639 115 1069 -167' fill='none' stroke='%23C0392F' stroke-width='1.6' stroke-opacity='0.42'/%3E%3Cpath d='M -40 649 Q 525 229 1092 -111' fill='none' stroke='%23C0392F' stroke-width='1.5' stroke-opacity='0.52'/%3E%3Cg fill='%23B23A33'%3E%3Ccircle cx='554' cy='455' r='3.4' fill-opacity='0.46'/%3E%3Ccircle cx='964' cy='36' r='4.2' fill-opacity='0.46'/%3E%3Ccircle cx='452' cy='555' r='4.2' fill-opacity='0.46'/%3E%3Ccircle cx='1214' cy='887' r='3.6' fill-opacity='0.78'/%3E%3Ccircle cx='428' cy='593' r='2' fill-opacity='0.8'/%3E%3Ccircle cx='879' cy='653' r='2.4' fill-opacity='0.66'/%3E%3Ccircle cx='1110' cy='432' r='3.3' fill-opacity='0.66'/%3E%3Ccircle cx='311' cy='779' r='4.3' fill-opacity='0.74'/%3E%3Ccircle cx='22' cy='383' r='2.6' fill-opacity='0.74'/%3E%3Ccircle cx='389' cy='440' r='3.1' fill-opacity='0.54'/%3E%3Ccircle cx='997' cy='511' r='3' fill-opacity='0.44'/%3E%3Ccircle cx='674' cy='131' r='2.9' fill-opacity='0.42'/%3E%3Ccircle cx='195' cy='454' r='2.7' fill-opacity='0.52'/%3E%3Ccircle cx='611' cy='842' r='2' fill-opacity='0.76'/%3E%3Ccircle cx='758' cy='500' r='3.5' fill-opacity='0.48'/%3E%3Ccircle cx='288' cy='346' r='4' fill-opacity='0.46'/%3E%3Ccircle cx='573' cy='256' r='2.9' fill-opacity='0.76'/%3E%3Ccircle cx='984' cy='604' r='4' fill-opacity='0.66'/%3E%3Ccircle cx='300' cy='423' r='2.8' fill-opacity='0.58'/%3E%3Ccircle cx='333' cy='174' r='2.6' fill-opacity='0.7'/%3E%3Ccircle cx='971' cy='63' r='3.9' fill-opacity='0.48'/%3E%3Ccircle cx='1384' cy='725' r='2.6' fill-opacity='0.56'/%3E%3Ccircle cx='242' cy='565' r='3.6' fill-opacity='0.64'/%3E%3Ccircle cx='205' cy='337' r='4.4' fill-opacity='0.46'/%3E%3Ccircle cx='418' cy='149' r='3' fill-opacity='0.58'/%3E%3Ccircle cx='270' cy='124' r='3.8' fill-opacity='0.78'/%3E%3Ccircle cx='501' cy='153' r='3.7' fill-opacity='0.58'/%3E%3Ccircle cx='40' cy='684' r='2.5' fill-opacity='0.76'/%3E%3Ccircle cx='1162' cy='460' r='2.5' fill-opacity='0.78'/%3E%3Ccircle cx='214' cy='266' r='3.3' fill-opacity='0.76'/%3E%3Ccircle cx='885' cy='108' r='3.3' fill-opacity='0.52'/%3E%3Ccircle cx='1267' cy='891' r='4.4' fill-opacity='0.42'/%3E%3Ccircle cx='1190' cy='619' r='4.3' fill-opacity='0.42'/%3E%3Ccircle cx='124' cy='246' r='1.7' fill-opacity='0.78'/%3E%3Ccircle cx='1356' cy='570' r='3.4' fill-opacity='0.7'/%3E%3Ccircle cx='921' cy='855' r='3.4' fill-opacity='0.42'/%3E%3Ccircle cx='1289' cy='366' r='2.8' fill-opacity='0.74'/%3E%3Ccircle cx='1013' cy='144' r='4.1' fill-opacity='0.56'/%3E%3Ccircle cx='733' cy='280' r='3' fill-opacity='0.76'/%3E%3Ccircle cx='140' cy='560' r='3' fill-opacity='0.62'/%3E%3Ccircle cx='450' cy='540' r='3.2' fill-opacity='0.72'/%3E%3Ccircle cx='1120' cy='110' r='3' fill-opacity='0.6'/%3E%3Ccircle cx='690' cy='220' r='2.8' fill-opacity='0.58'/%3E%3C/g%3E%3C/svg%3E");
  --side:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 900' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.4'%3E%3Cpath d='M -20 760 Q 130 300 300 40' stroke-opacity='0.16'/%3E%3Cpath d='M -20 840 Q 160 360 330 90' stroke-opacity='0.12'/%3E%3Cpath d='M -20 900 Q 110 420 320 150' stroke-opacity='0.1'/%3E%3C/g%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='40' cy='120' r='2.2' fill-opacity='.5'/%3E%3Ccircle cx='190' cy='80' r='1.8' fill-opacity='.4'/%3E%3Ccircle cx='120' cy='230' r='2.4' fill-opacity='.5'/%3E%3Ccircle cx='210' cy='300' r='1.9' fill-opacity='.35'/%3E%3Ccircle cx='60' cy='360' r='2' fill-opacity='.45'/%3E%3Ccircle cx='170' cy='450' r='2.3' fill-opacity='.4'/%3E%3Ccircle cx='90' cy='520' r='1.7' fill-opacity='.5'/%3E%3Ccircle cx='200' cy='600' r='2.1' fill-opacity='.38'/%3E%3Ccircle cx='50' cy='650' r='2.4' fill-opacity='.42'/%3E%3Ccircle cx='150' cy='720' r='1.8' fill-opacity='.5'/%3E%3Ccircle cx='95' cy='800' r='2.2' fill-opacity='.4'/%3E%3Ccircle cx='205' cy='840' r='2' fill-opacity='.44'/%3E%3C/g%3E%3C/svg%3E");
}
@property --ang{ syntax:'<angle>'; initial-value:0deg; inherits:false; }
*{ box-sizing:border-box; }
html,body{ margin:0; }
body{
  color:var(--ink); font-family:var(--body); -webkit-font-smoothing:antialiased; line-height:1.45; min-height:100vh; font-size:13px;
  background:
    var(--field),
    radial-gradient(70% 60% at 100% 0%, rgba(var(--acc-rgb),.12), transparent 58%),
    radial-gradient(60% 55% at 0% 100%, rgba(var(--acc-rgb),.10), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #fcfbfb 100%);
  background-repeat:no-repeat; background-size:cover; background-position:center; background-attachment:fixed;
  overflow-x:hidden;
}
.num,.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; }
.rup{ font-family:inherit; font-weight:inherit; font-size:.56em; vertical-align:.36em; margin-right:.05em; letter-spacing:0; }
h1,h2,h3{ font-family:var(--disp); margin:0; letter-spacing:-.02em; text-wrap:balance; color:var(--ink); }
p{ margin:0; }
button{ font-family:inherit; cursor:pointer; color:inherit; }
input,select,textarea{ font-family:var(--body); color:var(--ink); }
a{ color:var(--acc-deep); }
:focus-visible{ outline:2px solid var(--acc); outline-offset:2px; }
::selection{ background:rgba(var(--acc-rgb),.2); }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- glass + glare (Recon) ---------- */
.glare{ position:relative; }
.glare::before{ content:''; position:absolute; inset:0; border-radius:inherit; padding:1.4px; pointer-events:none; z-index:4;
  background:conic-gradient(from var(--ang), rgba(var(--acc-rgb),.3) 0deg, rgba(255,255,255,.95) 44deg, rgba(var(--acc-rgb),.42) 96deg, rgba(var(--acc-rgb),.25) 155deg, rgba(255,255,255,.9) 220deg, rgba(var(--acc-rgb),.38) 275deg, rgba(var(--acc-rgb),.3) 340deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude;
  animation:glare 6s steps(180) infinite; opacity:.6; }
@keyframes glare{ to{ --ang:360deg; } }
.glass{ background:var(--glass); -webkit-backdrop-filter:blur(var(--blur)) saturate(155%); backdrop-filter:blur(var(--blur)) saturate(155%);
  border:1px solid var(--glass-border); border-radius:var(--r); box-shadow:var(--shadow); }

/* ---------- demo banner ---------- */
.banner{ position:fixed; top:0; left:0; right:0; height:var(--bn); z-index:60; display:flex; align-items:center; justify-content:center; gap:var(--s4);
  padding:0 var(--s4); font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; color:#fff;
  background:linear-gradient(90deg, var(--b3), var(--b2) 50%, var(--b3)); box-shadow:0 4px 18px rgba(var(--b-rgb),.25); }
.banner b{ font-weight:600; letter-spacing:.16em; text-transform:uppercase; }
.banner .bn-t{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.banner a{ color:#fff; text-decoration:none; border:1px solid rgba(255,255,255,.4); border-radius:999px; padding:3px 10px; white-space:nowrap; min-height:26px; display:inline-flex; align-items:center; }
.banner a:hover{ background:rgba(255,255,255,.14); }
.banner a:focus-visible{ outline-color:#fff; }
.banner .bn-links{ display:flex; gap:var(--s2); flex:none; }
.banner .sh{ display:none; }

/* ---------- sidebar (maroon/red block, white constellation) ---------- */
.sidebar{ position:fixed; top:var(--bn); left:0; width:var(--sbw); height:calc(100vh - var(--bn)); height:calc(100dvh - var(--bn)); padding:14px; z-index:40; transition:transform .32s var(--ease-io); }
.sb-inner{ position:relative; height:100%; border-radius:24px; overflow:hidden; display:flex; flex-direction:column;
  background:var(--side), linear-gradient(158deg, var(--b1) 0%, var(--b2) 52%, var(--b3) 100%);
  background-size:cover, cover; background-position:center;
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 22px 55px rgba(var(--b-rgb),.4), inset 0 1px 0 rgba(255,255,255,.3); }
.sb-logo{ display:flex; justify-content:center; padding:26px 8px 16px; position:relative; z-index:2; min-height:96px; }
.pg-mark{ display:inline-flex; flex-direction:column; align-items:center; line-height:.92; max-width:100%; }
.pg-mark .pg-mono{ font-family:var(--disp); font-weight:800; letter-spacing:-.09em; display:flex; font-size:34px; color:#fff; }
.pg-mark .pg-g{ color:var(--b-soft); }
.pg-mark .pg-dash{ width:42px; height:2px; background:#fff; border-radius:2px; margin:8px 0 6px; opacity:.9; }
.pg-mark .pg-word{ font-family:var(--mono); font-weight:500; letter-spacing:.36em; color:#FFFFFF; font-size:9px; padding-left:.15em; text-transform:uppercase; text-align:center; max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pg-mark img{ max-width:150px; max-height:40px; object-fit:contain; display:block; filter:drop-shadow(0 2px 6px rgba(0,0,0,.18)); }
.sb-user{ position:relative; z-index:2; margin:0 14px 8px; display:flex; align-items:center; gap:11px; padding:11px 12px; border-radius:14px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.22); }
.sb-user .av{ width:38px; height:38px; border-radius:50%; background:linear-gradient(160deg,#fff,var(--b-soft)); display:flex; align-items:center; justify-content:center; font-family:var(--disp); font-weight:800; color:var(--b3); font-size:14px; flex:none; }
.sb-user .nm{ font-family:var(--disp); font-weight:700; color:#fff; font-size:13px; line-height:1.2; }
.sb-user .rl{ font-family:var(--mono); font-size:8.5px; letter-spacing:.12em; text-transform:uppercase; color:#FFFFFF; }
.sb-nav{ position:relative; z-index:2; flex:1; overflow-y:auto; padding:10px 12px 16px; }
.sb-nav::-webkit-scrollbar{ width:0; }
.sb-cap{ font-family:var(--mono); font-size:9px; letter-spacing:.22em; text-transform:uppercase; color:#FFFFFF; margin:10px 8px 8px; }
.navitem{ position:relative; width:100%; display:flex; align-items:center; gap:12px; border:0; background:transparent; color:#FFFFFF; font-family:var(--body); font-weight:500; letter-spacing:.06em; text-transform:uppercase; font-size:11px; padding:0 12px; min-height:44px; border-radius:12px; text-align:left; transition:background .16s, color .16s; }
.navitem .ic{ width:16px; height:16px; opacity:.9; flex:none; }
.navitem:hover{ background:rgba(255,255,255,.13); color:#fff; }
.navitem[aria-current="page"]{ color:#fff; font-weight:700; background:rgba(255,255,255,.13); }
.navitem[aria-current="page"]::before{ content:''; position:absolute; left:3px; top:50%; transform:translateY(-50%); width:3px; height:18px; border-radius:3px; background:#fff; box-shadow:0 0 10px rgba(255,255,255,.8); }
.navitem:focus-visible{ outline-color:#fff; outline-offset:-2px; }
.navitem .tag{ margin-left:auto; font-family:var(--mono); font-size:7.5px; letter-spacing:.12em; padding:2px 6px; border-radius:5px; background:rgba(255,255,255,.18); color:#fff; font-weight:500; }
.sb-foot{ position:relative; z-index:2; padding:12px 14px 16px; border-top:1px solid rgba(255,255,255,.16); font-family:var(--mono); font-size:8.5px; letter-spacing:.12em; text-transform:uppercase; color:#FFFFFF; text-align:center; }

/* ---------- content shell ---------- */
.content{ margin-left:var(--sbw); padding-top:var(--bn); transition:margin .32s var(--ease-io); min-height:100vh; }
body.nav-hidden .sidebar{ transform:translateX(calc(-1 * var(--sbw) - 20px)); }
body.nav-hidden .content{ margin-left:0; }
.scrim{ display:none; }
.topbar{ position:sticky; top:var(--bn); z-index:30; margin:14px; border-radius:18px; padding:10px 14px; display:flex; align-items:center; gap:14px;
  background:rgba(255,255,255,.5); -webkit-backdrop-filter:blur(16px) saturate(150%); backdrop-filter:blur(16px) saturate(150%);
  border:1px solid var(--glass-border); box-shadow:0 10px 30px rgba(var(--acc-rgb),.06), inset 0 1px 0 rgba(255,255,255,.7); }
.iconbtn{ position:relative; width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.55);
  background:radial-gradient(120% 110% at 30% 22%, rgba(255,255,255,.95), rgba(255,255,255,.52)); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  display:flex; align-items:center; justify-content:center; color:var(--acc-deep); transition:transform .18s, box-shadow .18s; flex:none;
  box-shadow:0 5px 16px rgba(24,16,16,.13), inset 0 1px 0 rgba(255,255,255,.95); }
.iconbtn:hover{ transform:translateY(-1px); box-shadow:0 9px 22px rgba(24,16,16,.17), inset 0 1px 0 rgba(255,255,255,.95); }
.iconbtn::before, .btn:not(.ghost):not(.plain)::before{ content:''; position:absolute; inset:0; border-radius:inherit; padding:1.4px; pointer-events:none; z-index:2;
  background:conic-gradient(from var(--ang), rgba(var(--acc-rgb),.45) 0deg, rgba(255,255,255,1) 40deg, rgba(120,175,255,.55) 76deg, rgba(255,224,150,.6) 116deg, rgba(var(--acc-rgb),.35) 162deg, rgba(255,255,255,.98) 214deg, rgba(150,255,215,.5) 256deg, rgba(255,200,150,.55) 300deg, rgba(var(--acc-rgb),.45) 344deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude;
  animation:glare 4s steps(120) infinite; opacity:.85; }
.crumb{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.crumb .bc{ font-family:var(--mono); font-size:8.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.crumb h1{ font-family:var(--disp); font-size:13px; font-weight:500; text-transform:uppercase; letter-spacing:.08em; color:var(--grey-head); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tb-right{ margin-left:auto; display:flex; gap:10px; align-items:center; flex:none; }
.demo-badge{ font-family:var(--mono); font-weight:600; font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--acc-deep); background:var(--acc-wash); border:1px solid rgba(var(--acc-rgb),.3); padding:5px 10px; border-radius:7px; white-space:nowrap; }
.tb-brand{ font-family:var(--mono); font-size:10px; color:var(--muted); white-space:nowrap; max-width:220px; overflow:hidden; text-overflow:ellipsis; }

main{ padding:4px 14px 60px; }
.screen[hidden]{ display:none; }
.eyebrow{ font-family:var(--mono); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--acc-deep); }
.panel{ margin-bottom:16px; overflow:hidden; }
.panel-h{ display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--line-soft); position:relative; z-index:3; flex-wrap:wrap; }
.panel-h h2{ font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.panel-h .ph-r{ margin-left:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.panel-title{ display:flex; align-items:center; gap:10px; margin:6px 4px 14px; flex-wrap:wrap; }
.panel-title .bar{ width:4px; height:14px; border-radius:3px; background:linear-gradient(180deg,var(--acc-lite),var(--acc-deep)); }
.panel-title h2{ font-family:var(--disp); font-size:13px; font-weight:500; color:var(--grey-head); text-transform:uppercase; letter-spacing:.09em; }
.panel-title .pt-r{ margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; }
.sample{ font-family:var(--mono); font-size:8.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); background:rgba(255,255,255,.6); border:1px dashed rgba(26,36,54,.2); padding:3px 8px; border-radius:6px; white-space:nowrap; }
.roadmap{ font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--warn); background:var(--warn-wash); border:1px solid rgba(224,168,0,.4); padding:4px 9px; border-radius:6px; white-space:nowrap; }
.pbody{ padding:16px 18px 18px; position:relative; z-index:3; }
.note{ font-size:12px; color:var(--muted); line-height:1.55; }

/* ---------- KPI tiles ---------- */
.tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:16px; }
.tile{ position:relative; padding:18px 18px 16px; border-radius:var(--r); overflow:hidden; color:var(--ink); display:flex; flex-direction:column;
  -webkit-backdrop-filter:blur(36px) saturate(150%); backdrop-filter:blur(36px) saturate(150%);
  border:1px solid rgba(255,255,255,.55); background:linear-gradient(150deg, rgba(255,251,248,.58), rgba(var(--acc-rgb),.08));
  box-shadow:0 12px 34px rgba(24,16,16,.08), inset 0 1px 0 rgba(255,255,255,.65); }
.tile::after{ content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(130% 80% at 0% 0%, rgba(255,255,255,.4), transparent 55%); mix-blend-mode:soft-light; }
.tile .k{ font-family:var(--mono); font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:7px; position:relative; z-index:3; }
.tile .v{ font-family:var(--mono); font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--ink); margin-top:13px; line-height:.95; font-size:32px; position:relative; z-index:3; white-space:nowrap; }
.tile .sub{ font-family:var(--mono); font-size:10px; color:var(--muted); margin-top:9px; position:relative; z-index:3; }
.tile.c-pos .v{ color:var(--pos); } .tile.c-pos .dot{ background:var(--pos-2); }
.tile.c-neg .v{ color:var(--acc-deep); } .tile.c-neg .dot{ background:var(--acc); }
.tile.c-rev .v{ color:var(--orange); } .tile.c-rev .dot{ background:var(--orange); }
.tile.c-warn .v{ color:var(--warn); } .tile.c-warn .dot{ background:#d9a51e; }
.tile.span2{ grid-column:span 2; }
.dot{ width:6px; height:6px; border-radius:50%; background:var(--acc); display:inline-block; flex:none; }

.grid2{ display:grid; grid-template-columns:1.4fr 1fr; gap:16px; }
.grid2 > .col{ display:flex; flex-direction:column; gap:16px; min-width:0; }
.grid2 > .col > .panel{ margin-bottom:0; }
.grid-eq{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }

/* ---------- chart ---------- */
.chart-wrap{ padding:12px 18px 16px; position:relative; z-index:3; }
.legend{ display:flex; gap:18px; font-family:var(--mono); font-size:10px; color:var(--muted); margin-bottom:6px; justify-content:center; flex-wrap:wrap; }
.legend span{ display:inline-flex; align-items:center; gap:6px; }
.sw{ width:10px; height:10px; border-radius:3px; display:inline-block; }
.chart svg{ display:block; width:100%; height:auto; overflow:visible; }
.chart .ax{ font-family:var(--mono); font-size:10px; fill:var(--muted); }
.chart .gl{ stroke:var(--line-soft); stroke-width:1; }
.chart .bi{ fill:rgba(41,176,108,.72); }
.chart .bo{ fill:rgba(var(--acc-rgb),.72); }
.chart g.day:hover rect.bi{ fill:rgba(41,176,108,.95); } .chart g.day:hover rect.bo{ fill:rgba(var(--acc-rgb),.95); }
.chart g.day rect.hit{ fill:transparent; }
.chart-tip{ position:fixed; z-index:80; pointer-events:none; transform:translate(-50%,-118%); opacity:0; transition:opacity .12s ease;
  background:rgba(255,255,255,.72); -webkit-backdrop-filter:blur(18px) saturate(165%); backdrop-filter:blur(18px) saturate(165%);
  border:1px solid var(--glass-border); border-radius:13px; box-shadow:0 14px 38px rgba(24,16,16,.16), inset 0 1px 0 rgba(255,255,255,.8); padding:11px 13px 10px; min-width:170px; }
.ct-date{ font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; color:var(--acc-deep); font-weight:600; margin-bottom:8px; }
.ct-row{ display:flex; align-items:center; gap:9px; font-size:12px; color:var(--ink-soft); padding:2px 0; }
.ct-row b{ margin-left:auto; font-family:var(--mono); font-weight:600; color:var(--ink); }
.ct-sw{ width:9px; height:9px; border-radius:3px; flex:none; }
.ratio{ display:flex; height:10px; border-radius:6px; overflow:hidden; background:var(--line-soft); margin:12px 0 10px; }
.ratio i{ display:block; height:100%; }
.ratio .ok{ background:var(--pos-2); } .ratio .bad{ background:var(--acc); }
.counts{ display:flex; gap:26px; flex-wrap:wrap; }
.counts .cnt{ display:flex; flex-direction:column; gap:4px; }
.counts .cl{ font-family:var(--mono); font-size:8.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); }
.counts .cv{ font-family:var(--mono); font-weight:600; font-size:24px; font-variant-numeric:tabular-nums; }

/* ---------- lists / tables ---------- */
.mini{ display:flex; flex-direction:column; position:relative; z-index:3; }
.mini-row{ display:flex; align-items:center; gap:12px; padding:12px 18px; border-top:1px solid var(--line-soft); min-height:52px; }
.mini-row:first-child{ border-top:0; }
.mini-row .nm{ font-family:var(--disp); font-weight:700; font-size:13.5px; color:var(--ink-soft); }
.mini-row .sm{ font-family:var(--mono); font-size:10px; color:var(--muted); }
.mini-row .amt{ margin-left:auto; text-align:right; font-family:var(--mono); font-weight:600; font-size:13px; white-space:nowrap; }
.tscroll{ overflow-x:auto; position:relative; z-index:3; -webkit-overflow-scrolling:touch; }
table.dt{ width:100%; border-collapse:collapse; min-width:640px; }
.dt th{ font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); text-align:left; padding:12px 14px; border-bottom:1px solid var(--line); font-weight:500; white-space:nowrap; }
.dt td{ padding:11px 14px; border-bottom:1px solid var(--line-soft); font-size:12.5px; color:var(--ink-soft); vertical-align:middle; white-space:nowrap; }
.dt td.r,.dt th.r{ text-align:right; }
.dt td.m{ font-family:var(--mono); font-size:11.5px; }
.dt td.amt{ font-family:var(--mono); font-weight:600; color:var(--ink); text-align:right; font-variant-numeric:tabular-nums; }
.dt td .nm{ font-family:var(--disp); font-weight:700; font-size:13px; color:var(--ink); }
.dt td .sm{ display:block; font-family:var(--mono); font-size:10px; color:var(--muted); }
.dt tbody tr.click{ cursor:pointer; transition:background .14s; }
.dt tbody tr.click:hover{ background:rgba(255,255,255,.55); }
.dt tbody tr.click:focus-visible{ outline:2px solid var(--acc); outline-offset:-2px; }
.dt tbody tr:last-child td{ border-bottom:0; }
.empty{ padding:28px 18px; text-align:center; color:var(--muted); font-size:13px; position:relative; z-index:3; }

/* ---------- pills, chips, buttons, inputs ---------- */
.pill{ display:inline-flex; align-items:center; gap:5px; font-family:var(--mono); font-size:9.5px; letter-spacing:.06em; text-transform:lowercase; padding:3px 8px; border-radius:6px; border:1px solid transparent; white-space:nowrap; }
.pill::before{ content:''; width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.8; }
.p-ok{ color:var(--pos); background:var(--pos-wash); border-color:rgba(41,176,108,.35); }
.p-bad{ color:var(--acc-deep); background:var(--acc-wash); border-color:rgba(var(--acc-rgb),.3); }
.p-warn{ color:var(--warn); background:var(--warn-wash); border-color:rgba(224,168,0,.4); }
.p-info{ color:var(--ink-soft); background:var(--info-wash); border-color:var(--line); }
.p-set{ color:#3d4f7a; background:rgba(61,79,122,.1); border-color:rgba(61,79,122,.25); }
.seg{ display:inline-flex; background:rgba(255,255,255,.4); border:1px solid var(--glass-border); border-radius:12px; padding:3px; gap:2px; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); flex-wrap:wrap; }
.seg button{ border:0; background:transparent; color:var(--muted); font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; padding:0 13px; min-height:36px; border-radius:9px; }
.seg button[aria-pressed="true"]{ background:var(--glass-strong); color:var(--acc-deep); box-shadow:var(--shadow); }
.btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:7px; border:1px solid var(--line); background:var(--glass-strong); color:var(--ink); border-radius:11px; padding:0 15px; min-height:40px; font-family:var(--body); font-size:11px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; transition:transform .16s, border-color .16s, color .16s, background .16s; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); text-decoration:none; white-space:nowrap; }
.btn:hover{ border-color:var(--acc); color:var(--acc-deep); transform:translateY(-1px); }
.btn:active{ transform:none; }
.btn.red{ background:rgba(var(--acc-rgb),.2); color:var(--acc-deep); border-color:rgba(var(--acc-rgb),.42); }
.btn.red:hover{ background:rgba(var(--acc-rgb),.3); }
.btn.green{ background:rgba(41,176,108,.18); color:var(--pos); border-color:rgba(41,176,108,.4); }
.btn.green:hover{ background:rgba(41,176,108,.28); color:var(--pos); border-color:rgba(41,176,108,.6); }
.btn.sm{ min-height:32px; padding:0 11px; font-size:10px; border-radius:9px; }
.btn.ghost{ background:transparent; }
.btn[disabled]{ opacity:.45; cursor:not-allowed; transform:none; }
.btn svg{ width:14px; height:14px; }
.field{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.field label,.flabel{ font-family:var(--mono); font-size:8.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); padding-left:2px; }
.ctrl{ width:100%; background:rgba(255,255,255,.72); border:1px solid var(--line); border-radius:10px; padding:0 12px; min-height:40px; color:var(--ink); font-size:13px; }
textarea.ctrl{ padding:10px 12px; min-height:72px; resize:vertical; }
.ctrl:focus{ outline:none; border-color:var(--acc); box-shadow:0 0 0 3px var(--acc-wash); }
.ctrl[aria-invalid="true"]{ border-color:var(--acc); }
.search{ position:relative; min-width:220px; }
.search svg{ position:absolute; left:11px; top:50%; transform:translateY(-50%); width:14px; height:14px; color:var(--muted); pointer-events:none; }
.search .ctrl{ padding-left:32px; }
.toggle{ position:relative; display:inline-flex; align-items:center; gap:10px; cursor:pointer; min-height:32px; }
.toggle input{ position:absolute; opacity:0; width:38px; height:22px; margin:0; cursor:pointer; }
.toggle .tk{ position:relative; width:38px; height:22px; flex:none; background:rgba(26,36,54,.16); border-radius:999px; transition:.18s; }
.toggle .tk::before{ content:''; position:absolute; left:3px; top:3px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:.18s; }
.toggle input:checked + .tk{ background:var(--acc); }
.toggle input:checked + .tk::before{ transform:translateX(16px); }
.toggle input:focus-visible + .tk{ outline:2px solid var(--acc); outline-offset:2px; }
.toggle input:disabled + .tk{ opacity:.45; }
.toggle .tl{ font-size:12px; color:var(--ink-soft); }

/* ---------- providers & routing ---------- */
.pcards{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:16px; }
.pcard{ padding:16px 18px 18px; display:flex; flex-direction:column; gap:12px; }
.pcard .ph{ display:flex; align-items:center; gap:10px; position:relative; z-index:3; }
.pcard .pn{ font-family:var(--disp); font-weight:700; font-size:15px; }
.pcard .pt{ font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.pcard .ph .toggle{ margin-left:auto; }
.kv{ display:grid; grid-template-columns:1fr auto; gap:6px 12px; position:relative; z-index:3; }
.kv dt{ font-size:12px; color:var(--muted); }
.kv dd{ margin:0; font-family:var(--mono); font-size:12px; color:var(--ink); text-align:right; font-variant-numeric:tabular-nums; }
.pcard.off{ opacity:.62; }
.rules{ display:flex; flex-direction:column; }
.rule{ display:grid; grid-template-columns:28px 1fr auto; gap:14px; align-items:center; padding:14px 18px; border-top:1px solid var(--line-soft); position:relative; z-index:3; }
.rule:first-child{ border-top:0; }
.rule .rn{ font-family:var(--mono); font-size:11px; color:var(--acc-deep); font-weight:600; }
.rule .rt{ font-family:var(--disp); font-weight:700; font-size:13.5px; color:var(--ink); }
.rule .rd{ font-size:12px; color:var(--muted); margin-top:2px; }
.rule .rx{ margin-top:10px; }
.split{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.split input[type=range]{ flex:1; min-width:160px; accent-color:var(--acc); height:32px; }
.split .sv{ font-family:var(--mono); font-size:11.5px; color:var(--ink); white-space:nowrap; }
.splitbar{ display:flex; height:8px; border-radius:5px; overflow:hidden; margin-top:8px; max-width:420px; }
.splitbar i:first-child{ background:var(--acc); } .splitbar i:last-child{ background:var(--acc-lite); opacity:.6; }
.locked{ display:flex; gap:14px; align-items:flex-start; padding:16px 18px; position:relative; z-index:3; }
.locked svg{ width:20px; height:20px; color:var(--muted); flex:none; margin-top:2px; }
.panel.muted{ opacity:.85; }

/* ---------- settings & branding ---------- */
.set-grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:16px; align-items:start; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; position:relative; z-index:3; }
.form-grid .full{ grid-column:1 / -1; }
.swatches{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.swatch{ width:36px; height:36px; border-radius:10px; border:2px solid #fff; box-shadow:0 0 0 1px var(--line), 0 4px 10px rgba(24,16,16,.12); padding:0; }
.swatch[aria-pressed="true"]{ box-shadow:0 0 0 2px var(--ink), 0 4px 10px rgba(24,16,16,.18); }
.colorin{ width:44px; height:40px; padding:2px; border-radius:10px; border:1px solid var(--line); background:#fff; cursor:pointer; }
.hexin{ max-width:120px; font-family:var(--mono); }
.upload{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.logo-prev{ width:120px; height:48px; border-radius:10px; border:1px dashed rgba(26,36,54,.25); display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.6); overflow:hidden; font-family:var(--mono); font-size:9px; color:var(--muted); letter-spacing:.1em; text-transform:uppercase; }
.logo-prev img{ max-width:100%; max-height:100%; object-fit:contain; }
.set-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:4px; }
.previews{ display:grid; grid-template-columns:1.3fr 1fr; gap:12px; position:relative; z-index:3; }
.pv{ border-radius:14px; overflow:hidden; background:#fff; border:1px solid var(--line); box-shadow:0 10px 24px rgba(24,16,16,.08); }
.pv-cap{ font-family:var(--mono); font-size:8.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); padding:8px 10px; border-bottom:1px solid var(--line-soft); display:flex; justify-content:space-between; gap:8px; }
.pv-cap span:last-child{ text-transform:none; letter-spacing:.02em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pv-bo{ display:grid; grid-template-columns:70px 1fr; gap:8px; padding:8px; height:170px; background:linear-gradient(180deg,#fff,#fcfbfb); }
.pv-side{ border-radius:10px; padding:10px 6px; display:flex; flex-direction:column; align-items:center; gap:6px; background:linear-gradient(158deg, var(--pb1), var(--pb2) 52%, var(--pb3)); }
.pv-side .mk{ font-family:var(--disp); font-weight:800; color:#fff; font-size:15px; letter-spacing:-.06em; margin-bottom:4px; max-width:100%; overflow:hidden; }
.pv-side .mk img{ max-width:54px; max-height:22px; object-fit:contain; display:block; }
.pv-side s{ display:block; width:100%; height:5px; border-radius:3px; background:rgba(255,255,255,.3); }
.pv-side s:first-of-type{ background:rgba(255,255,255,.8); }
.pv-main{ display:flex; flex-direction:column; gap:6px; }
.pv-main .t{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.pv-main .t i{ height:40px; border-radius:8px; background:linear-gradient(150deg, rgba(255,251,248,.9), color-mix(in srgb, var(--pacc) 12%, transparent)); border:1px solid var(--line-soft); }
.pv-main s{ display:block; height:6px; border-radius:3px; background:rgba(26,36,54,.09); }
.pv-main .b{ align-self:flex-start; margin-top:4px; font-family:var(--body); font-size:8px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:4px 8px; border-radius:6px; color:var(--pacc); background:color-mix(in srgb, var(--pacc) 16%, transparent); border:1px solid color-mix(in srgb, var(--pacc) 40%, transparent); }
.pv-co,.pv-lo{ padding:10px; display:flex; flex-direction:column; align-items:center; gap:6px; background:linear-gradient(180deg,#fff,#fcfbfb); height:170px; }
.pv-co .h,.pv-lo .h{ display:flex; align-items:center; gap:6px; align-self:stretch; }
.pv-co .h b,.pv-lo .h b{ width:20px; height:20px; border-radius:6px; background:linear-gradient(158deg,var(--pb1),var(--pb3)); flex:none; display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--disp); font-size:8px; font-weight:800; letter-spacing:-.04em; overflow:hidden; }
.pv-co .h b img,.pv-lo .h b img{ max-width:18px; max-height:18px; }
.pv-co .h span,.pv-lo .h span{ font-family:var(--disp); font-weight:800; font-size:9px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pv-co .am{ font-family:var(--mono); font-weight:600; font-size:20px; color:var(--ink); margin-top:4px; }
.pv-co .qr{ width:54px; height:54px; border-radius:6px; background:
  conic-gradient(from 90deg at 30% 30%, var(--ink) 25%, transparent 0) 0 0/12px 12px, #fff; border:4px solid #fff; box-shadow:0 0 0 1px var(--line); }
.pv-co .btns{ display:grid; grid-template-columns:1fr 1fr; gap:4px; align-self:stretch; }
.pv-co .btns i{ height:14px; border-radius:4px; background:rgba(26,36,54,.07); }
.pv-lo .in{ align-self:stretch; height:14px; border-radius:5px; border:1px solid var(--line); background:#fff; }
.pv-lo .go{ align-self:stretch; height:18px; border-radius:6px; background:linear-gradient(158deg,var(--pb1),var(--pb3)); margin-top:4px; }
.pv-lo .t{ font-family:var(--disp); font-weight:800; font-size:11px; color:var(--ink); margin:6px 0 2px; }
.pv-row2{ grid-column:1 / -1; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.team .mini-row .av{ width:32px; height:32px; border-radius:50%; background:linear-gradient(160deg,#fff,var(--b-soft)); border:1px solid rgba(var(--acc-rgb),.2); display:flex; align-items:center; justify-content:center; font-family:var(--disp); font-weight:800; font-size:11px; color:var(--acc-deep); flex:none; }

/* ---------- modal + drawer + toast ---------- */
.overlay{ position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:24px;
  background:rgba(40,20,22,.26); -webkit-backdrop-filter:blur(10px) saturate(120%); backdrop-filter:blur(10px) saturate(120%); }
.modal{ width:min(620px,100%); max-height:88vh; overflow:auto; border-radius:20px; background:rgba(255,250,248,.94); box-shadow:0 30px 80px rgba(24,16,16,.32); }
.modal-h,.drawer-h{ display:flex; align-items:center; gap:10px; padding:16px 18px; border-bottom:1px solid var(--line-soft); position:relative; z-index:3; }
.modal-h h3,.drawer-h h3{ font-family:var(--disp); font-size:15px; font-weight:800; color:var(--ink); }
.modal-h .x,.drawer-h .x{ margin-left:auto; }
.modal-b{ padding:16px 18px 18px; position:relative; z-index:3; display:flex; flex-direction:column; gap:14px; }
.modal-f{ display:flex; gap:10px; justify-content:flex-end; padding:0 18px 18px; position:relative; z-index:3; flex-wrap:wrap; }
.steps-ind{ display:flex; gap:6px; }
.steps-ind i{ flex:1; height:4px; border-radius:3px; background:var(--line); }
.steps-ind i.on{ background:var(--acc); }
.checks{ display:flex; flex-wrap:wrap; gap:8px; }
.checks label{ display:inline-flex; align-items:center; gap:7px; min-height:36px; padding:0 12px; border-radius:10px; background:rgba(255,255,255,.7); border:1px solid var(--line); font-size:12px; cursor:pointer; }
.checks input{ accent-color:var(--acc); width:15px; height:15px; }
.err{ font-size:12px; color:var(--acc-deep); min-height:1em; }
.drawer-wrap{ position:fixed; inset:0; z-index:90; display:flex; justify-content:flex-end; background:rgba(40,20,22,.2); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.drawer{ width:min(460px,100%); height:100%; overflow:auto; background:rgba(255,250,248,.96); box-shadow:-20px 0 60px rgba(24,16,16,.22); border-radius:22px 0 0 22px; animation:din .36s var(--ease); }
@keyframes din{ from{ transform:translateX(40px); opacity:0; } to{ transform:none; opacity:1; } }
.drawer-b{ padding:16px 18px 24px; display:flex; flex-direction:column; gap:18px; }
.dsec h4{ margin:0 0 8px; font-family:var(--mono); font-size:9.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.keybox{ display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:10px; background:#fff; border:1px solid var(--line); font-family:var(--mono); font-size:12px; color:var(--ink); }
.keybox span{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.confirm{ margin-top:8px; padding:12px; border-radius:12px; background:var(--acc-wash); border:1px solid rgba(var(--acc-rgb),.3); display:flex; flex-direction:column; gap:10px; font-size:12px; color:var(--ink-soft); }
.confirm .row{ display:flex; gap:8px; flex-wrap:wrap; }
.chips{ display:flex; flex-wrap:wrap; gap:6px; }
.chip{ font-family:var(--mono); font-size:11px; padding:4px 9px; border-radius:7px; background:#fff; border:1px solid var(--line); color:var(--ink-soft); }
.tl{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.tl li{ position:relative; padding:0 0 16px 26px; }
.tl li::before{ content:''; position:absolute; left:6px; top:14px; bottom:-2px; width:2px; background:var(--line); }
.tl li:last-child::before{ display:none; }
.tl li::after{ content:''; position:absolute; left:1px; top:3px; width:12px; height:12px; border-radius:50%; background:#fff; border:2px solid var(--pos-2); box-sizing:border-box; }
.tl li.fail::after{ border-color:var(--acc); } .tl li.wait::after{ border-color:#d9a51e; } .tl li.skip::after{ border-color:var(--line); }
.tl .tt{ font-weight:600; font-size:12.5px; color:var(--ink); }
.tl .td{ font-family:var(--mono); font-size:10.5px; color:var(--muted); margin-top:2px; }
.flash{ position:fixed; bottom:22px; left:calc(50% + var(--sbw)/2); transform:translateX(-50%) translateY(20px); background:rgba(30,20,22,.92); color:#fff; padding:11px 20px; border-radius:12px; font-size:13px; font-weight:600; opacity:0; transition:.25s; z-index:120; box-shadow:0 12px 40px rgba(0,0,0,.3); pointer-events:none; max-width:calc(100vw - 32px); }
.flash.show{ opacity:1; transform:translateX(-50%) translateY(0); }
body.nav-hidden .flash{ left:50%; }
noscript .ns{ display:block; margin:120px auto; max-width:520px; padding:24px; font-size:14px; }

/* ---------- responsive ---------- */
@media (max-width:1180px){ .grid2{ grid-template-columns:1fr; } .set-grid{ grid-template-columns:1fr; } .pcards{ grid-template-columns:1fr 1fr; } }
@media (max-width:820px){
  .content{ margin-left:0; } .sidebar{ transform:translateX(calc(-1 * var(--sbw) - 20px)); }
  body.nav-open .sidebar{ transform:none; }
  body.nav-open .scrim{ display:block; position:fixed; inset:0; z-index:39; background:rgba(20,10,12,.3); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
  .flash{ left:50%; } .tiles{ grid-template-columns:repeat(2,1fr); }
  .tile.span2{ grid-column:span 2; }
  .tb-brand{ display:none; }
  .grid-eq{ grid-template-columns:1fr; }
  .banner .bn-t .long{ display:none; }
}
@media (max-width:560px){
  :root{ --bn:40px; }
  .tiles{ grid-template-columns:1fr; } .tile.span2{ grid-column:auto; }
  .tile .v{ font-size:28px; }
  .pcards{ grid-template-columns:1fr; }
  .form-grid{ grid-template-columns:1fr; }
  .previews,.pv-row2{ grid-template-columns:1fr; }
  .topbar{ margin:10px; padding:8px 10px; gap:10px; }
  main{ padding:4px 10px 60px; }
  .banner{ gap:8px; font-size:9.5px; justify-content:space-between; }
  .banner .bn-t b{ letter-spacing:.1em; }
  .banner .lg{ display:none; } .banner .sh{ display:inline; }
  .search{ min-width:0; flex:1; }
  .panel-h .ph-r{ margin-left:0; width:100%; }
  .drawer{ border-radius:0; }
  .rule{ grid-template-columns:1fr auto; } .rule .rn{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .glare::before,.iconbtn::before,.btn::before{ animation:none; }
  .sidebar,.content,.btn,.iconbtn,.flash{ transition:none; }
  .drawer{ animation:none; }
  .btn:hover,.iconbtn:hover{ transform:none; }
}

/* ---------------- render mode (?render=1) ---------------- */
.render .banner,.render .demo-badge,.render .sample,.render .toast,.render #sbFoot{ display:none !important; }
.render{ --bn:0px !important; }
.render body{ padding-top:0 !important; }
.render .skb{ display:inline-block; height:.72em; min-width:2.2ch; border-radius:4px; vertical-align:middle; background:rgba(26,36,54,.11); }
.render .sb-inner .skb,.render .sb .skb{ background:rgba(255,255,255,.34); }
.render .tile .skb,.render .v .skb{ height:.62em; background:rgba(26,36,54,.13); border-radius:6px; }
.render .pill{ color:transparent !important; min-width:58px; display:inline-block; }
.render .skin{ color:transparent !important; }
.render .exit-demo{ display:none !important; }


/* ==========================================================================
   Approved-render rule (Ashnab, 27 Sep): the screens stay pixel-identical to the approved renders except TWO things:
   1. the sidebar colour: blood maroon linear-gradient(158deg,#8C1D22,#7A181D 52%,#641418), blood-family shadow;
   2. the logo glyph: the website lock-up (.pg-mk + .wm, pg-site.css 151–171), centred, wordmark under it.
   ========================================================================== */
@font-face{ font-family:'PG Archivo'; src:url('fonts/archivo-var.woff2') format('woff2-variations'); font-weight:100 900; font-stretch:62% 125%; font-display:swap; }
:root{ --b1:#8C1D22; --b2:#7A181D; --b3:#641418; --b-rgb:100,20,24; --b-soft:#F0B3AB; }
.sb-inner{ background:var(--side), linear-gradient(158deg, var(--b1) 0%, var(--b2) 52%, var(--b3) 100%); background-size:cover,cover; background-position:center;
  box-shadow:0 22px 55px rgba(var(--b-rgb),.40), inset 0 1px 0 rgba(255,255,255,.28); }
.pg-lock{ display:inline-flex; flex-direction:column; align-items:center; gap:10px; max-width:100%; }
.pg-mk{ display:inline-flex; flex-direction:column; align-items:center; flex:none; }
.pg-mk .pg-l{ display:flex; font-family:'PG Archivo','Archivo',sans-serif; font-size:28px; line-height:.78; letter-spacing:0; font-variation-settings:'wght' 900,'wdth' 125; padding-top:2px; }
.pg-mk .pg-p,.pg-mk .pg-g{ display:inline-block; text-align:left; }
.pg-mk .pg-p{ width:.771em; color:#F6F1E8; }
.pg-mk .pg-g{ width:1.01em; color:#F0B3AB; }
.pg-mk .pg-ini{ color:#F6F1E8; letter-spacing:-.02em; }
.pg-mk .pg-dash{ display:block; width:66%; height:1px; margin-top:7px; border-radius:1px; background:#F6F1E8; }
.pg-lock .wm{ font-family:'PG Archivo','Archivo',sans-serif; font-size:13.6px; line-height:1; white-space:nowrap; max-width:220px; overflow:hidden; text-overflow:ellipsis; }
.pg-lock .wm .a{ letter-spacing:.288em; font-variation-settings:'wght' 560,'wdth' 96; }
.pg-lock .wm .a:first-child{ color:#F6F1E8; } .pg-lock .wm .a:last-child{ color:#F0B3AB; } .pg-lock .wm .a:only-child{ color:#F6F1E8; }