/* Boldmail console — original indigo, cinematic chrome
   Tokens first. Every colour, radius and shadow used below resolves to a token
   so the light theme is a token swap, not a second stylesheet.
   Palette: the first console set (#080A0E / #6E8BFF / #A583FF).
   Jewel mark, display face, grain, and lift stay. */
:root{
  --f-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  --f-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --f-display:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --r-xs:6px; --r-sm:8px; --r-md:11px; --r-lg:16px; --r-full:999px;
  --sp:4px;
  --nav-w:284px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --dur:.16s;
  /* Desktop type scale. 1rem = the user's browser size (16px default).
     Body is 16px — the step under the 18px pass, still above 14.5px. */
  --t-2xs:.75rem;
  --t-xs:.8125rem;
  --t-sm:.875rem;
  --t-md:1rem;
  --t-lg:1.125rem;
  --t-xl:1.375rem;
  --t-2xl:1.625rem;
}
:root{
  color-scheme:dark;
  --bg:#080A0E;
  --bg-grad-a:rgba(110,139,255,.18);
  --bg-grad-b:rgba(154,123,255,.12);
  --rail:#0B0E13;
  --surface:#11151C;
  --surface-2:#161B23;
  --surface-3:#1C222B;
  --line:#232B37;
  --line-soft:#1A202A;
  --text:#E8ECF3;
  --text-2:#B4BCCB;
  --text-3:#8E98A9;
  --accent:#6E8BFF;
  --accent-hi:#8AA1FF;
  --accent-2:#A583FF;
  --accent-soft:rgba(110,139,255,.14);
  --accent-line:rgba(110,139,255,.38);
  --on-accent:#FFFFFF;
  --ok:#3DD68C; --ok-soft:rgba(61,214,140,.13); --ok-line:rgba(61,214,140,.32);
  --warn:#FFB224; --warn-soft:rgba(255,178,36,.13); --warn-line:rgba(255,178,36,.32);
  --danger:#FF6B7A; --danger-soft:rgba(255,107,122,.13); --danger-line:rgba(255,107,122,.32);
  --info:#6EC3FF; --info-soft:rgba(110,195,255,.13);
  --shadow-1:0 1px 2px rgba(0,0,0,.32);
  --shadow-2:0 10px 28px -10px rgba(0,0,0,.68),0 2px 8px rgba(0,0,0,.36);
  --shadow-3:0 28px 64px -18px rgba(0,0,0,.78),0 6px 18px rgba(0,0,0,.42);
  --inner-hi:inset 0 1px 0 rgba(255,255,255,.06);
  --ring:0 0 0 2px var(--bg),0 0 0 4px var(--accent-line);
  --grain-opacity:.04;
  --grain-blend:overlay;
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#F6F7FB;
  --bg-grad-a:rgba(110,139,255,.13);
  --bg-grad-b:rgba(154,123,255,.09);
  --rail:#FFFFFF;
  --surface:#FFFFFF;
  --surface-2:#F4F6FA;
  --surface-3:#EBEFF6;
  --line:#DFE4EE;
  --line-soft:#EAEEF5;
  --text:#111726;
  --text-2:#4A556C;
  --text-3:#5C677C;
  --accent:#4361EE;
  --accent-hi:#3550DD;
  --accent-2:#7B4CE0;
  --accent-soft:rgba(67,97,238,.09);
  --accent-line:rgba(67,97,238,.34);
  --on-accent:#FFFFFF;
  --ok:#0E9F6E; --ok-soft:rgba(14,159,110,.10); --ok-line:rgba(14,159,110,.30);
  --warn:#B46A00; --warn-soft:rgba(180,106,0,.10); --warn-line:rgba(180,106,0,.28);
  --danger:#D63B4B; --danger-soft:rgba(214,59,75,.09); --danger-line:rgba(214,59,75,.28);
  --info:#0B72C4; --info-soft:rgba(11,114,196,.10);
  --shadow-1:0 1px 2px rgba(16,24,40,.06);
  --shadow-2:0 12px 28px -14px rgba(16,24,40,.20),0 2px 8px rgba(16,24,40,.06);
  --shadow-3:0 26px 58px -22px rgba(16,24,40,.28),0 4px 16px rgba(16,24,40,.08);
  --inner-hi:inset 0 1px 0 rgba(255,255,255,.9);
  --grain-opacity:.024;
  --grain-blend:multiply;
}

*,*::before,*::after{box-sizing:border-box}
svg{width:16px;height:16px;flex:0 0 auto;display:block}
html{font-size:100%;-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100vh;
  font:400 var(--t-md)/1.55 var(--f-sans);
  letter-spacing:-.005em;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(980px 540px at 8% -12%,var(--bg-grad-a),transparent 64%),
    radial-gradient(820px 520px at 96% 108%,var(--bg-grad-b),transparent 60%),
    radial-gradient(ellipse 90% 70% at 50% 120%,rgba(0,0,0,.42),transparent 68%),
    radial-gradient(ellipse 80% 55% at 50% -20%,rgba(0,0,0,.28),transparent 62%);
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:2;
  opacity:var(--grain-opacity);mix-blend-mode:var(--grain-blend);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size:180px 180px;
}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.02em;color:var(--text)}
h1{font-family:var(--f-display);font-size:var(--t-xl);line-height:1.25;font-weight:600}
h2{font-size:var(--t-lg);line-height:1.3}
h3{font-size:var(--t-md);line-height:1.35}
p{margin:0}
a{color:var(--accent-hi);text-decoration:none}
a:hover{text-decoration:underline}
code,pre,.mono,.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
code{font-size:.92em;background:var(--surface-2);border:1px solid var(--line-soft);padding:.08em .36em;border-radius:var(--r-xs);color:var(--text)}
pre{margin:0;white-space:pre-wrap;word-break:break-word}
hr{border:0;border-top:1px solid var(--line-soft);margin:1rem 0}
::selection{background:var(--accent-soft)}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-xs)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:99px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--line);background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}

/* ---------- app frame ---------- */
.app{display:flex;min-height:100vh;position:relative;z-index:1}
.rail{
  width:var(--nav-w);flex:0 0 var(--nav-w);
  background:color-mix(in srgb,var(--rail) 86%,transparent);
  backdrop-filter:blur(14px);
  border-right:1px solid var(--line-soft);
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;
}
.rail-top{padding:1.05rem 1rem .6rem}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--text);padding:.1rem .25rem .35rem}
.brand:hover{text-decoration:none}
.brand-mark{
  width:28px;height:28px;border-radius:9px;flex:0 0 28px;
  display:grid;place-items:center;
  background:linear-gradient(155deg,var(--accent-hi),var(--accent) 48%,var(--accent-2));
  box-shadow:0 0 0 1px var(--accent-line),0 6px 18px -6px var(--accent-line),var(--inner-hi);
}
.brand-mark svg{width:16px;height:16px;color:var(--on-accent)}
.brand-name{font-family:var(--f-display);font-weight:600;font-size:var(--t-lg);letter-spacing:-.02em}
.brand-env{
  margin-left:auto;font-size:var(--t-2xs);font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-3);border:1px solid var(--line);border-radius:var(--r-full);padding:.14rem .42rem;
}
.rail-scroll{flex:1;overflow-y:auto;padding:.3rem .7rem 1.2rem;scrollbar-width:thin;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12px,#000 calc(100% - 22px),transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 12px,#000 calc(100% - 22px),transparent 100%);}
.nav-group{margin:.5rem 0 .1rem}
.nav-group.nav-admin{margin:.8rem .15rem .25rem;padding:.35rem;border:1px solid color-mix(in srgb,var(--warn) 42%,transparent);border-radius:var(--r-md);background:color-mix(in srgb,var(--warn) 9%,transparent)}
.nav-group.nav-admin .nav-label{color:var(--warn);padding-top:.25rem}
.nav-group.nav-admin a[aria-current="page"]{background:color-mix(in srgb,var(--warn) 20%,transparent);color:var(--text)}
.nav-group.nav-admin a[aria-current="page"]::before{background:var(--warn)}
.admin-hub{border:1px solid color-mix(in srgb,var(--warn) 35%,var(--border));border-radius:var(--r-lg);padding:1.25rem;background:linear-gradient(135deg,color-mix(in srgb,var(--warn) 10%,var(--surface)),var(--surface))}.admin-hub-head{display:flex;gap:.8rem;align-items:flex-start;margin-bottom:1rem}.admin-hub-head>span{font-size:1.8rem}.admin-hub-head p{margin:0;color:var(--warn);font-size:var(--t-sm);font-weight:700;text-transform:uppercase;letter-spacing:.08em}.admin-hub-head h2{margin:.05rem 0;font-size:var(--t-2xl)}.admin-hub-head small,.admin-link small{color:var(--text-3)}.admin-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.55rem}.admin-link{display:flex;gap:.65rem;padding:.75rem;border:1px solid var(--border);border-radius:var(--r-md);color:var(--text);background:var(--surface);text-decoration:none}.admin-link:hover{border-color:var(--warn);background:color-mix(in srgb,var(--warn) 7%,var(--surface));text-decoration:none}.admin-link svg{width:18px;height:18px;flex:0 0 18px;color:var(--warn);margin-top:.1rem}.admin-link b,.admin-link small{display:block}.admin-link small{margin-top:.18rem;line-height:1.35}
.nav-label{
  font-size:var(--t-2xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-3);padding:.55rem .55rem .3rem;
}
.rail nav a,.rail nav .nav-soon{
  display:flex;align-items:center;gap:.6rem;
  padding:.42rem .55rem;margin:1px 0;border-radius:var(--r-sm);
  color:var(--text-2);text-decoration:none;font-size:var(--t-md);font-weight:500;
  line-height:1.3;position:relative;
  transition:background var(--dur),color var(--dur);
}
.rail nav .nav-soon[hidden]{display:none}
.rail nav a svg,.rail nav .nav-soon svg{width:16px;height:16px;flex:0 0 16px;opacity:.78}
.rail nav a:hover{background:var(--surface-2);color:var(--text);text-decoration:none}
.rail nav a[aria-current="page"]{background:var(--accent-soft);color:var(--text);font-weight:600}
.rail nav a[aria-current="page"] svg{opacity:1;color:var(--accent-hi)}
.rail nav a[aria-current="page"]::before{
  content:"";position:absolute;left:-.7rem;top:50%;transform:translateY(-50%);
  width:3px;height:18px;border-radius:0 3px 3px 0;background:linear-gradient(180deg,var(--accent),var(--accent-2));
}
.nav-soon{opacity:.55;cursor:default}
.nav-soon .soon{
  margin-left:auto;font-size:var(--t-2xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-3);border:1px solid var(--line);border-radius:var(--r-full);padding:.05rem .34rem;
}
.nav-count{
  margin-left:auto;font-size:var(--t-xs);font-weight:600;color:var(--text-3);
  font-family:var(--f-mono);
}
.rail-foot{border-top:1px solid var(--line-soft);padding:.6rem .7rem .75rem}
.who{
  display:flex;align-items:center;gap:.55rem;width:100%;
  padding:.45rem .5rem;border-radius:var(--r-sm);background:transparent;border:0;cursor:pointer;
  color:var(--text);text-align:left;font:inherit;
}
.who:hover{background:var(--surface-2)}
.avatar{
  width:26px;height:26px;flex:0 0 26px;border-radius:50%;display:grid;place-items:center;
  font-size:var(--t-xs);font-weight:700;color:var(--on-accent);letter-spacing:.01em;
  background:linear-gradient(155deg,var(--accent-hi),var(--accent) 50%,var(--accent-2));box-shadow:var(--inner-hi);
}
.who-text{min-width:0;flex:1}
.who-mail{display:block;font-size:var(--t-sm);font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who-role{display:block;font-size:var(--t-xs);color:var(--text-3);text-transform:capitalize}
.rail-actions{display:flex;gap:.35rem;margin-top:.4rem}
.rail-actions .btn{flex:1;justify-content:center}

/* ---------- main ---------- */
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;gap:.75rem;
  padding:.7rem 1.6rem;
  border-bottom:1px solid var(--line-soft);
  background:color-mix(in srgb,var(--bg) 78%,transparent);
  backdrop-filter:blur(14px) saturate(140%);
}
.topbar h1{font-family:var(--f-display);font-size:var(--t-xl);font-weight:600;letter-spacing:-.02em}
.crumb{display:flex;align-items:center;gap:.4rem;min-width:0}
.crumb .sep{color:var(--text-3);opacity:.6}
.crumb .ctx{color:var(--text-3);font-size:var(--t-sm);white-space:nowrap}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:.4rem}
.wrap{padding:1.5rem 1.6rem 4rem;width:100%;max-width:1120px;margin:0 auto;flex:1}
.wrap.wide{max-width:1440px}
.page-head{margin-bottom:1.1rem}
.page-head .lede{color:var(--text-2);font-size:var(--t-md);margin-top:.3rem;max-width:62ch}
.burger{display:none}

/* ---------- buttons ---------- */
.btn{
  --btn-bg:var(--surface-2);--btn-fg:var(--text);--btn-line:var(--line);
  display:inline-flex;align-items:center;gap:.42rem;
  font:550 var(--t-md)/1 var(--f-sans);letter-spacing:-.008em;
  padding:.58rem .88rem;border-radius:var(--r-sm);
  background:var(--btn-bg);color:var(--btn-fg);border:1px solid var(--btn-line);
  cursor:pointer;white-space:nowrap;
  box-shadow:var(--shadow-1),var(--inner-hi);
  transition:background var(--dur),border-color var(--dur),transform var(--dur),opacity var(--dur);
}
.btn svg{width:15px;height:15px;flex:0 0 15px}
.btn:hover{background:var(--surface-3)}
.btn:active{transform:translateY(.5px)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;pointer-events:none}
.btn-primary{
  --btn-bg:linear-gradient(180deg,var(--accent-hi),var(--accent));
  --btn-fg:var(--on-accent);--btn-line:transparent;
  box-shadow:0 1px 2px rgba(0,0,0,.35),0 10px 24px -8px var(--accent-line),inset 0 1px 0 rgba(255,255,255,.28);
}
.btn-primary:hover{--btn-bg:linear-gradient(180deg,color-mix(in srgb,var(--accent-hi) 88%,#fff),var(--accent-hi))}
.btn-ghost{--btn-bg:transparent;--btn-line:transparent;--btn-fg:var(--text-2);box-shadow:none}
.btn-ghost:hover{--btn-bg:var(--surface-2);--btn-fg:var(--text)}
.btn-danger{--btn-bg:var(--danger-soft);--btn-line:var(--danger-line);--btn-fg:var(--danger)}
.btn-danger:hover{--btn-bg:color-mix(in srgb,var(--danger) 22%,transparent)}
.btn-sm{padding:.4rem .62rem;font-size:var(--t-sm);border-radius:var(--r-xs)}
.btn-sm svg{width:13px;height:13px;flex:0 0 13px}
.btn-icon{padding:.46rem;border-radius:var(--r-sm)}
.btn-icon svg{width:16px;height:16px;flex:0 0 16px}
.btn-block{width:100%;justify-content:center}
.btn.is-ok{--btn-bg:var(--ok-soft);--btn-line:var(--ok-line);--btn-fg:var(--ok)}
.btn-row{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}

/* ---------- forms ---------- */
.field{display:block;margin:0 0 .75rem}
.field:last-child{margin-bottom:0}
.field > .lbl{
  display:flex;align-items:center;gap:.35rem;
  font-size:var(--t-sm);font-weight:600;color:var(--text-2);margin:0 0 .32rem;letter-spacing:-.004em;
}
.field .hint{display:block;font-size:var(--t-sm);color:var(--text-3);margin-top:.32rem;line-height:1.45}
.input,.select,.textarea{
  width:100%;font:400 var(--t-md)/1.4 var(--f-sans);color:var(--text);
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:.62rem .75rem;
  transition:border-color var(--dur),background var(--dur),box-shadow var(--dur);
}
.input::placeholder,.textarea::placeholder{color:var(--text-3)}
.input:hover,.select:hover,.textarea:hover{border-color:var(--surface-3)}
.input:focus,.select:focus,.textarea:focus{
  outline:none;border-color:var(--accent);background:var(--surface);
  box-shadow:0 0 0 3px var(--accent-soft);
}
.textarea{min-height:8.5rem;resize:vertical;font-family:var(--f-sans)}
.select{
  appearance:none;cursor:pointer;padding-right:2rem;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 17px) calc(50% + 1px),calc(100% - 12px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.input-mono{font-family:var(--f-mono);font-size:var(--t-sm)}
.suffix-input{display:flex;align-items:stretch}
.suffix-input .input{border-radius:var(--r-sm) 0 0 var(--r-sm);border-right:0}
.suffix-input .suffix{
  display:flex;align-items:center;padding:0 .7rem;font-size:var(--t-sm);color:var(--text-3);
  background:var(--surface-3);border:1px solid var(--line);border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-family:var(--f-mono);
}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:0 1rem}
fieldset{border:0;margin:0;padding:0}

/* switch */
.switch{display:inline-flex;align-items:center;gap:.55rem;cursor:pointer;font-size:var(--t-md);color:var(--text)}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch .track{
  width:34px;height:20px;border-radius:99px;background:var(--surface-3);border:1px solid var(--line);
  position:relative;transition:background var(--dur),border-color var(--dur);flex:0 0 34px;
}
.switch .track::after{
  content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;
  background:var(--text-2);transition:transform var(--dur),background var(--dur);
}
.switch input:checked + .track{background:var(--accent);border-color:transparent}
.switch input:checked + .track::after{transform:translateX(14px);background:#fff}
.switch input:focus-visible + .track{box-shadow:var(--ring)}

/* ---------- cards & surfaces ---------- */
.card{
  position:relative;overflow:hidden;
  background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-md);
  box-shadow:var(--shadow-2),var(--inner-hi);
}
.card::before{
  content:"";position:absolute;inset:0 0 auto;height:1px;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(138,161,255,.22),transparent);
}
:root[data-theme="light"] .card::before{background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent)}
.card + .card{margin-top:.9rem}
.card-head{
  display:flex;align-items:center;gap:.6rem;
  padding:.85rem 1.05rem;border-bottom:1px solid var(--line-soft);
}
.card-head h2,.card-head h3{font-size:var(--t-lg);font-weight:600}
.card-head .sub{font-size:var(--t-sm);color:var(--text-3)}
.card-head .spacer{margin-left:auto}
.card-body{padding:1.05rem}
.card-body.tight{padding:.75rem 1.05rem}
.card-foot{padding:.7rem 1.05rem;border-top:1px solid var(--line-soft);background:var(--surface-2);border-radius:0 0 var(--r-md) var(--r-md)}
.grid{display:grid;gap:.9rem}
.grid>*,.split>*,.stats>*,.mail>*{min-width:0}
.card,.card-body,.table-wrap{min-width:0;max-width:100%}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(21rem,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.split{display:grid;grid-template-columns:1.55fr .95fr;gap:.9rem;align-items:start}
@media(max-width:1080px){.split{grid-template-columns:1fr}}

/* ---------- guide (per-page tutorial) ---------- */
.guide{
  position:relative;margin:0 0 1.15rem;border-radius:var(--r-lg);
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--accent) 9%,var(--surface)),var(--surface));
  border:1px solid var(--accent-line);
  box-shadow:0 14px 40px -22px var(--accent-line),var(--inner-hi);
  overflow:hidden;
}
.guide::before{
  content:"";position:absolute;inset:0 0 auto;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),var(--accent-2),transparent);opacity:.85;
}
.guide::after{
  content:"";position:absolute;right:-70px;top:-90px;width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle,var(--accent-soft),transparent 65%);pointer-events:none;
}
.guide-in{display:flex;gap:.95rem;padding:1.05rem 1.15rem}
.guide-ico{
  width:34px;height:34px;flex:0 0 34px;border-radius:11px;display:grid;place-items:center;
  background:linear-gradient(155deg,var(--accent-hi),var(--accent) 50%,var(--accent-2));color:var(--on-accent);
  box-shadow:0 4px 16px -4px var(--accent-line),var(--inner-hi);
}
.guide-ico svg{width:18px;height:18px}
.guide-main{min-width:0;flex:1}
.guide-kicker{
  display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap;
  font-size:var(--t-2xs);font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-hi);
  margin-bottom:.25rem;
}
.guide-kicker svg{width:12px;height:12px}
.guide h2{font-size:var(--t-lg);margin-bottom:.22rem}
.guide p.say{color:var(--text-2);font-size:var(--t-md);line-height:1.55;max-width:65ch}
.guide ul{
  list-style:none;margin:.7rem 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr));gap:.4rem .95rem;
}
.guide li{
  display:flex;gap:.5rem;align-items:flex-start;
  font-size:var(--t-md);color:var(--text-2);line-height:1.5;
}
.guide li svg{width:14px;height:14px;flex:0 0 14px;margin-top:.18rem;color:var(--accent-hi)}
.guide li b{color:var(--text);font-weight:600}
.guide-foot{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-top:.85rem}
.guide-x{
  position:absolute;top:.6rem;right:.6rem;z-index:2;
  width:26px;height:26px;display:grid;place-items:center;border-radius:var(--r-xs);
  background:transparent;border:0;color:var(--text-3);cursor:pointer;
}
.guide-x:hover{background:var(--surface-3);color:var(--text)}
.guide-x svg{width:14px;height:14px}
.guide[hidden]{display:none}
@media(max-width:640px){.guide-in{flex-direction:column;gap:.7rem}}

/* ---------- tooltips ---------- */
.tip-layer{position:fixed;inset:0;pointer-events:none;z-index:9000}
.tip,.sys-tip-box{
  position:absolute;max-width:19rem;
  background:var(--surface-3);color:var(--text);
  border:1px solid var(--line);border-radius:var(--r-sm);
  padding:.5rem .7rem;font-size:var(--t-sm);line-height:1.45;font-weight:450;
  box-shadow:var(--shadow-3);
  opacity:0;transform:translateY(3px) scale(.985);
  transition:opacity .13s ease,transform .13s ease;
}
.tip.on,.sys-tip-box.on{opacity:1;transform:none}
.sys-hero{margin-bottom:1rem}
.tip b{color:var(--text);font-weight:650}
[data-tip]{cursor:help}
button[data-tip],a[data-tip],[data-tip].chip,[data-tip].stat{cursor:inherit}
.info-dot{
  display:inline-grid;place-items:center;width:14px;height:14px;border-radius:50%;
  border:1px solid var(--line);color:var(--text-3);font-size:var(--t-2xs);font-weight:800;
  line-height:1;cursor:help;flex:0 0 14px;
}
.info-dot:hover{color:var(--accent-hi);border-color:var(--accent-line)}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(12.5rem,1fr));gap:.7rem}
.stat{
  position:relative;overflow:hidden;padding:.9rem 1rem;border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--line-soft);box-shadow:var(--shadow-2),var(--inner-hi);
  transition:border-color var(--dur),transform var(--dur),box-shadow var(--dur);
}
.stat::before{
  content:"";position:absolute;inset:0 0 auto;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(138,161,255,.22),transparent);
}
:root[data-theme="light"] .stat::before{background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent)}
.stat:hover{border-color:var(--accent-line);transform:translateY(-1px);box-shadow:var(--shadow-3),var(--inner-hi)}
.stat .k{
  display:flex;align-items:center;gap:.3rem;
  font-size:var(--t-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);
  margin-bottom:.4rem;
}
.stat .v{font:650 var(--t-2xl)/1.1 var(--f-mono);letter-spacing:-.045em;color:var(--text)}
.stat .v small{font-size:var(--t-sm);font-weight:550;color:var(--text-3);letter-spacing:-.01em}
.stat .v.text{font-size:var(--t-md);line-height:1.45;font-weight:600;letter-spacing:-.008em;font-family:var(--f-sans);word-break:break-word}
.stat .s{font-size:var(--t-sm);color:var(--text-3);margin-top:.3rem;line-height:1.4}
.stat.accent{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 8%,var(--surface)),var(--surface));border-color:var(--accent-line)}
.meter{height:5px;border-radius:99px;background:var(--surface-3);overflow:hidden;margin-top:.55rem}
.meter i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .5s var(--ease)}
.meter.ok i{background:linear-gradient(90deg,var(--ok),#8ef0be)}
.meter.warn i{background:linear-gradient(90deg,var(--warn),#ffd27a)}

/* ---------- chips, badges, pills ---------- */
.chip{
  display:inline-flex;align-items:center;gap:.32rem;
  padding:.2rem .55rem;border-radius:var(--r-full);
  font-size:var(--t-sm);font-weight:600;letter-spacing:-.002em;
  background:var(--surface-2);border:1px solid var(--line);color:var(--text-2);
  white-space:nowrap;
}
.chip svg{width:12px;height:12px}
.chip.on{background:var(--ok-soft);border-color:var(--ok-line);color:var(--ok)}
.chip.off{background:var(--surface-2);border-color:var(--line);color:var(--text-3)}
.chip.warn{background:var(--warn-soft);border-color:var(--warn-line);color:var(--warn)}
.chip.bad{background:var(--danger-soft);border-color:var(--danger-line);color:var(--danger)}
.chip.accent{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-hi)}
.chip button{all:unset;cursor:pointer;display:grid;place-items:center;opacity:.6}
.chip button:hover{opacity:1}
.dot{width:7px;height:7px;border-radius:50%;background:var(--text-3);flex:0 0 7px}
.dot.ok{background:var(--ok);box-shadow:0 0 0 3px var(--ok-soft)}
.dot.warn,.dot.missing{background:var(--warn);box-shadow:0 0 0 3px var(--warn-soft)}
.dot.bad,.dot.error{background:var(--danger);box-shadow:0 0 0 3px var(--danger-soft)}
.dot.live{background:var(--ok);box-shadow:0 0 0 3px var(--ok-soft);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.4}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.live-line{display:inline-flex;align-items:center;gap:.45rem;font-size:var(--t-sm);color:var(--text-3)}

/* ---------- tabs / segmented ---------- */
.tabs{display:flex;gap:.25rem;flex-wrap:wrap;border-bottom:1px solid var(--line-soft);margin-bottom:1rem}
.tabs a,.tabs button{
  all:unset;cursor:pointer;padding:.5rem .7rem;font-size:var(--t-md);font-weight:550;color:var(--text-2);
  border-bottom:2px solid transparent;margin-bottom:-1px;border-radius:var(--r-xs) var(--r-xs) 0 0;
}
.tabs a:hover,.tabs button:hover{color:var(--text);background:var(--surface-2)}
.tabs a[aria-current="page"],.tabs button[aria-selected="true"]{color:var(--text);border-bottom-color:var(--accent)}
.seg{display:inline-flex;padding:2px;gap:2px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm)}
.seg button{
  all:unset;cursor:pointer;padding:.38rem .7rem;font-size:var(--t-sm);font-weight:550;color:var(--text-2);
  border-radius:calc(var(--r-sm) - 3px);
}
.seg button[aria-selected="true"]{background:var(--surface);color:var(--text);box-shadow:var(--shadow-1)}

/* ---------- tables ---------- */
.table-wrap{overflow-x:auto;border-radius:var(--r-md)}
table.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--t-md)}
table.tbl th[data-tip]{cursor:help}
table.tbl th[data-tip]:hover{color:var(--text-2)}
table.tbl th{
  text-align:left;font-size:var(--t-xs);font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-3);padding:.6rem .8rem;white-space:nowrap;
  background:var(--surface-2);border-bottom:1px solid var(--line-soft);position:sticky;top:0;
}
table.tbl th:first-child{border-radius:var(--r-md) 0 0 0}
table.tbl th:last-child{border-radius:0 var(--r-md) 0 0}
table.tbl td{padding:.62rem .8rem;border-bottom:1px solid var(--line-soft);vertical-align:top}
table.tbl tbody tr:last-child td{border-bottom:0}
table.tbl tbody tr:hover td{background:var(--surface-2)}
table.tbl .sub{display:block;font-size:var(--t-sm);color:var(--text-3);margin-top:.15rem}
table.tbl code{background:transparent;border:0;padding:0;color:var(--text-3);font-size:var(--t-sm)}
table.tbl a code{color:var(--accent-hi)}
table.tbl a:hover code{text-decoration:underline}

/* ---------- administrator manual ---------- */
.manual .card{padding:1.05rem 1.15rem 1.2rem}
.manual .eyebrow{margin:0 0 .35rem;font-size:var(--t-xs);font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text-3)}
.manual .lede{color:var(--text-2);max-width:72ch}
.manual h2{font-size:var(--t-xl);margin:.1rem 0 .55rem}
.manual h3{font-size:var(--t-lg);margin:0 0 .35rem}
.manual p,.manual li{color:var(--text-2);line-height:1.55}
.manual ul,.manual ol{margin:.4rem 0 .15rem 1.15rem}
.manual .manual-diagram{
  font-family:var(--f-mono);font-size:var(--t-xs);line-height:1.45;color:var(--text);
  background:var(--surface-2);border:1px solid var(--line-soft);border-radius:var(--r-sm);
  padding:.75rem .85rem;overflow-x:auto;white-space:pre;margin:.15rem 0 .65rem;
}

/* ---------- lists ---------- */
.rows{list-style:none;margin:0;padding:0}
.rows li{
  display:flex;align-items:center;gap:.7rem;
  padding:.68rem 1.05rem;border-bottom:1px solid var(--line-soft);
}
.rows li:last-child{border-bottom:0}
.rows li:hover{background:var(--surface-2)}
.rows .grow{min-width:0;flex:1}
.rows .t{display:block;font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rows .m{display:block;font-size:var(--t-sm);color:var(--text-3);margin-top:.1rem}
.rows .acts{display:flex;gap:.3rem;opacity:1;transition:opacity var(--dur)}
.rows li:hover .acts,.rows li:focus-within .acts{opacity:1}
.card-pad{padding:.8rem 1.05rem;border-bottom:1px solid var(--line-soft);line-height:1.5}
.danger{color:var(--danger)}

/* ---------- empty & skeleton ---------- */
.empty{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:2.6rem 1.5rem;gap:.5rem;
}
.empty .ico{
  width:44px;height:44px;border-radius:14px;display:grid;place-items:center;margin-bottom:.2rem;
  background:var(--surface-2);border:1px solid var(--line);color:var(--text-3);
}
.empty .ico svg{width:20px;height:20px}
.empty h3{font-size:var(--t-lg)}
.empty p{color:var(--text-3);font-size:var(--t-md);max-width:38ch;line-height:1.5}
.sk{border-radius:var(--r-xs);background:linear-gradient(90deg,var(--surface-2),var(--surface-3),var(--surface-2));background-size:200% 100%;animation:sh 1.25s linear infinite}
@keyframes sh{to{background-position:-200% 0}}
.sk-row{height:14px;margin:.55rem 0}
.sk-card{height:86px;border-radius:var(--r-md)}

/* ---------- code blocks & copy ---------- */
.code{
  position:relative;background:var(--surface-2);border:1px solid var(--line-soft);border-radius:var(--r-sm);
  padding:.7rem .8rem;font-family:var(--f-mono);font-size:var(--t-sm);line-height:1.65;color:var(--text);
  overflow-x:auto;white-space:pre;tab-size:2;
}
.code .c{color:var(--text-3)}
.code .s{color:var(--ok)}
.code .n{color:var(--accent-hi)}
.code-head{
  display:flex;align-items:center;gap:.5rem;padding:.4rem .55rem .4rem .8rem;
  background:var(--surface-3);border:1px solid var(--line-soft);border-bottom:0;
  border-radius:var(--r-sm) var(--r-sm) 0 0;font-size:var(--t-xs);color:var(--text-3);
  font-weight:600;letter-spacing:.02em;
}
.code-head svg{width:13px;height:13px}
.code-head .btn svg{width:13px;height:13px}
.code-head + .code{border-radius:0 0 var(--r-sm) var(--r-sm)}
.code-head .spacer{margin-left:auto}
.kv{display:grid;grid-template-columns:auto max-content auto;gap:.15rem .8rem;align-items:center;justify-content:start}
.kv .copy{justify-self:start}
.kv dt{font-size:var(--t-sm);color:var(--text-3);padding:.34rem 0;display:flex;align-items:center;gap:.3rem}
.kv dd{margin:0;padding:.34rem 0;font-family:var(--f-mono);font-size:var(--t-sm);color:var(--text);word-break:break-all}
.kv .copy{padding:.34rem 0}
.reveal{display:inline-flex;align-items:center;gap:.4rem}
.secret{
  flex:1 1 14rem;min-width:0;
  font-family:var(--f-mono);font-size:var(--t-sm);letter-spacing:.02em;color:var(--text);
  background:var(--surface-2);border:1px dashed var(--accent-line);border-radius:var(--r-xs);
  padding:.35rem .5rem;word-break:break-all;
}

/* ---------- callouts ---------- */
.note{
  display:flex;gap:.6rem;padding:.7rem .85rem;border-radius:var(--r-sm);
  background:var(--surface-2);border:1px solid var(--line-soft);
  font-size:var(--t-md);color:var(--text-2);line-height:1.5;
}
.note svg{width:15px;height:15px;flex:0 0 15px;margin-top:.15rem;color:var(--text-3)}
.note.info{background:var(--info-soft);border-color:transparent}
.note.info svg{color:var(--info)}
.note.warn{background:var(--warn-soft);border-color:var(--warn-line)}
.note.warn svg{color:var(--warn)}
.note.bad{background:var(--danger-soft);border-color:var(--danger-line)}
.note.bad svg{color:var(--danger)}
.note.ok{background:var(--ok-soft);border-color:var(--ok-line)}
.note.ok svg{color:var(--ok)}
.note b{color:var(--text)}
.suspension-alert{margin:0 0 1.25rem;padding:1.15rem 1.25rem;border-width:2px;font-size:var(--t-base)}
.suspension-alert b{display:block;font-size:var(--t-lg);margin-bottom:.2rem}
.email-verify-alert{margin:0 0 1.25rem;padding:1.15rem 1.25rem}
.email-verify-alert b{display:block;margin-bottom:.2rem}
.email-verify-alert .btn-row{margin-top:.7rem}

/* ---------- checklist ---------- */
.steps-flat{display:grid;gap:.7rem}
.inst{padding:.7rem .8rem;border:1px solid var(--line-soft);border-radius:var(--r-sm);background:var(--surface-2)}
.inst-h{display:flex;align-items:center;gap:.4rem;font-size:var(--t-sm);margin-bottom:.45rem;color:var(--text-2)}
.inst-h svg{width:14px;height:14px;color:var(--accent-hi)}
.inst .wrapx code{font-size:var(--t-sm)}
.steps{list-style:none;margin:0;padding:0}
.steps li{display:flex;gap:.75rem;padding:.75rem 1.05rem;border-bottom:1px solid var(--line-soft);align-items:flex-start}
.steps li:last-child{border-bottom:0}
.steps .mark{
  width:22px;height:22px;flex:0 0 22px;border-radius:50%;display:grid;place-items:center;margin-top:.05rem;
  border:1px solid var(--line);color:var(--text-3);font-size:var(--t-xs);font-weight:700;background:var(--surface-2);
}
.steps li.done .mark{background:var(--ok-soft);border-color:var(--ok-line);color:var(--ok)}
.steps li.done .st{color:var(--text-3)}
.steps li.done .st b{text-decoration:line-through;text-decoration-color:var(--text-3)}
.steps .mark svg{width:12px;height:12px}
.steps .grow{flex:1;min-width:0}
.steps .st{font-size:var(--t-md);color:var(--text-2);line-height:1.5}
.steps .st b{display:block;color:var(--text);font-weight:600;font-size:var(--t-md);margin-bottom:.1rem}

/* ---------- toasts ---------- */
.toasts{position:fixed;right:1rem;bottom:1rem;z-index:9500;display:flex;flex-direction:column;gap:.5rem;align-items:flex-end}
.toast{
  display:flex;align-items:flex-start;gap:.55rem;min-width:16rem;max-width:26rem;
  padding:.65rem .8rem;border-radius:var(--r-sm);
  background:var(--surface-3);border:1px solid var(--line);box-shadow:var(--shadow-3);
  font-size:var(--t-md);color:var(--text);
  animation:tin .22s var(--ease);
}
@keyframes tin{from{opacity:0;transform:translateY(8px)}}
.toast.out{opacity:0;transform:translateY(6px);transition:.2s}
.toast svg{width:15px;height:15px;flex:0 0 15px;margin-top:.12rem}
.toast.ok{border-color:var(--ok-line)}
.toast.ok svg{color:var(--ok)}
.toast.bad{border-color:var(--danger-line)}
.toast.bad svg{color:var(--danger)}
.toast .x{all:unset;cursor:pointer;margin-left:auto;color:var(--text-3);padding:0 .1rem}
.toast .x:hover{color:var(--text)}

/* ---------- mail ---------- */
.mail{display:grid;grid-template-columns:19rem 1fr;gap:.9rem;align-items:start}
@media(max-width:900px){.mail{grid-template-columns:1fr}}
.mail-side{position:sticky;top:4.4rem}
.mail-list{list-style:none;margin:0;padding:0;max-height:min(62vh,40rem);overflow-y:auto}
.mail-list li{
  padding:.6rem .85rem;border-bottom:1px solid var(--line-soft);cursor:pointer;
  border-left:2px solid transparent;
}
.mail-list li:hover{background:var(--surface-2)}
.mail-list li[aria-selected="true"]{background:var(--accent-soft);border-left-color:var(--accent)}
.mail-list .from{display:flex;align-items:baseline;gap:.4rem;font-size:var(--t-sm);color:var(--text-3)}
.mail-list .from b{color:var(--text-2);font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mail-list .sub{
  display:block;font-size:var(--t-md);font-weight:550;color:var(--text);margin-top:.12rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.review-attachments{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:.55rem;margin-top:.45rem}
.review-attachment{display:flex;align-items:center;gap:.6rem;min-width:0;padding:.55rem .65rem;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);color:var(--text);text-decoration:none}
.review-attachment:hover{background:var(--surface-3);border-color:var(--accent-line);text-decoration:none}
.review-attachment .review-attachment-icon{display:grid;place-items:center;width:2rem;height:2rem;flex:0 0 2rem;border-radius:var(--r-xs);background:var(--accent-soft);color:var(--accent-hi)}
.review-attachment .review-attachment-icon svg{width:1rem;height:1rem}
.review-attachment .review-attachment-copy{min-width:0;display:grid;gap:.05rem}
.review-attachment .review-attachment-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--t-sm);font-weight:600}
.review-attachment .review-attachment-meta{font-size:var(--t-xs);color:var(--text-3)}
.review-attachment-preview{width:2rem;height:2rem;flex:0 0 2rem;object-fit:cover;border-radius:var(--r-xs);border:1px solid var(--line)}
.review-html-source{max-height:16rem;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;padding:.65rem;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);font-size:var(--t-xs);line-height:1.45}
.mail-list li.unread .sub::before{
  content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);
  margin-right:.4rem;vertical-align:middle;box-shadow:0 0 0 3px var(--accent-soft);
}
.mail-list .tags{display:flex;gap:.25rem;flex-wrap:wrap;margin-top:.3rem}
.mail-list .tags .chip{font-size:var(--t-2xs);padding:.08rem .4rem}
.mail-list .pre{display:block;font-size:var(--t-sm);color:var(--text-3);margin-top:.1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reader{min-height:20rem}
.reader-head{padding:1.05rem 1.15rem;border-bottom:1px solid var(--line-soft)}
.reader-head h2{font-size:var(--t-lg);margin-bottom:.35rem}
.reader-meta{display:flex;flex-wrap:wrap;gap:.4rem .9rem;font-size:var(--t-sm);color:var(--text-3)}
.reader-meta span{display:inline-flex;align-items:center;gap:.32rem}
.reader-meta svg{width:13px;height:13px}
.reader-body{padding:1.15rem;font-size:var(--t-md);line-height:1.7;color:var(--text-2);white-space:pre-wrap;word-break:break-word}
.labels{display:flex;gap:.3rem;flex-wrap:wrap}

/* ---------- inbox connection workspace ---------- */
.connection{--connection-pad:clamp(1.15rem,2.2vw,1.75rem)}
.connection h4,.connection dl{margin:0}
.connection-back{display:inline-flex;gap:.4rem;align-items:center;color:var(--text-3);font-size:var(--t-sm);margin-bottom:1.6rem}
.connection-back svg{width:14px;height:14px;transform:rotate(180deg)}
.connection-back:hover{color:var(--accent-hi)}
.connection-intro{display:flex;gap:1rem;align-items:center;margin-bottom:1.7rem}
.connection-mark{display:grid;place-items:center;flex:0 0 52px;width:52px;height:52px;border-radius:var(--r-lg);background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--accent-hi)}
.connection-mark svg{width:25px;height:25px}
.connection-intro h2{font-family:var(--f-display);font-size:clamp(1.75rem,3vw,2.25rem);font-weight:500;line-height:1.15;letter-spacing:-.035em}
.connection-intro p{color:var(--text-2);margin-top:.45rem;font-size:var(--t-sm);max-width:58ch}
.connection-inbox{display:flex;align-items:center;gap:1rem;padding:1rem 1.2rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:1.5rem}
.connection-inbox>svg{width:21px;height:21px;color:var(--accent-hi)}
.connection-picker{flex:1;min-width:0}
.connection-picker .lbl{display:block;font-size:var(--t-2xs);color:var(--text-3);margin-bottom:.3rem}
.connection-picker .select{max-width:29rem;font-size:var(--t-sm);font-weight:600;min-height:2.65rem}
.connection-inbox .btn{margin-left:auto}
.connection [hidden],#guide-toggle[hidden]{display:none!important}
.connection-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.4rem;align-items:stretch}
.connection-panel{min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.connection-panel-head{display:flex;gap:.8rem;align-items:center;padding:var(--connection-pad) var(--connection-pad) 0}
.connection-step{display:grid;place-items:center;width:30px;height:30px;flex:0 0 30px;border-radius:var(--r-sm);background:var(--accent-soft);color:var(--accent-hi);font-size:var(--t-sm);font-weight:700}
.connection-panel-head h3{font-size:var(--t-lg);font-weight:600;letter-spacing:-.02em}
.connection-panel-head p{color:var(--text-3);font-size:var(--t-xs);margin-top:.15rem}
.connection-panel-body{padding:1.2rem var(--connection-pad) var(--connection-pad)}
.connection-description{color:var(--text-2);font-size:var(--t-sm);line-height:1.65;margin-bottom:1.3rem;max-width:52ch}
.connection .field{margin:0 0 .6rem}
.connection .input,.connection .select{width:100%;min-width:0}
.connection-create .input{min-height:2.8rem}
.connection .lbl{font-size:var(--t-sm)}
.connection-create>.btn-primary{width:100%;justify-content:center;min-height:2.85rem;margin-top:.75rem;font-size:var(--t-sm)}
.connection-feedback{color:var(--danger);font-size:var(--t-sm);line-height:1.5}
.connection-feedback:empty,.connection-status:empty{display:none}
.connection-status{font-size:var(--t-xs);color:var(--text-3);line-height:1.5;margin-top:.65rem}
.connection-feedback:not(:empty){margin:.6rem 0}
.connection-assurance{display:flex;align-items:flex-start;gap:.6rem;padding-top:1rem;margin-top:1.1rem;border-top:1px solid var(--line-soft);color:var(--text-3);font-size:var(--t-xs);line-height:1.6}
.connection-assurance svg{color:var(--accent-hi);margin-top:.15rem}
.connection-help{border-top:1px solid var(--line-soft);margin-top:1.5rem;padding-top:1rem}
.connection-help summary{display:flex;gap:.55rem;align-items:center;cursor:pointer;font-size:var(--t-sm);font-weight:550;color:var(--text-2);list-style:none}
.connection-help summary::-webkit-details-marker{display:none}
.connection-help summary .connection-chevron{margin-left:auto;transition:transform var(--dur)}
.connection-help[open] .connection-chevron{transform:rotate(90deg)}
.connection-help ol{padding-left:1.2rem;margin:.9rem 0 0;color:var(--text-2);font-size:var(--t-sm);line-height:1.7}
.connection-help li{overflow-wrap:anywhere}
.connection-help li+li{margin-top:.5rem}
.connection-settings{margin:0}
.connection-setting{display:flex;align-items:center;gap:.65rem;padding:.65rem 0;min-width:0}
.connection-setting dt{color:var(--text-3);font-size:var(--t-xs);min-width:4.5rem}
.connection-setting dd{flex:1;min-width:0;margin:0;font-family:var(--f-mono);font-size:var(--t-sm);overflow-wrap:anywhere}
.connection-setting .btn{flex:0 0 auto}
.connection-username{padding:.65rem .8rem;background:var(--surface-2);border-radius:var(--r-sm);margin-bottom:1rem}
.connection-username dt{min-width:0}
.connection-protocol{border-top:1px solid var(--line-soft);padding-top:1rem;margin-top:.75rem}
.connection-protocol-head{display:flex;gap:.5rem;align-items:center;margin-bottom:.25rem}
.connection-protocol-head svg{color:var(--accent-hi);width:15px;height:15px}
.connection-protocol-head h4{font-size:var(--t-sm);font-weight:600}
.connection-protocol-head .chip{margin-left:auto;font-size:var(--t-2xs);background:var(--accent-soft);border-color:transparent;color:var(--accent-hi)}
.connection-port{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--f-sans);font-size:var(--t-xs);color:var(--text-3);margin-left:.6rem}
.connection-settings-note{display:flex;align-items:flex-start;gap:.5rem;color:var(--text-3);font-size:var(--t-xs);line-height:1.6;margin-top:1rem}
.connection-settings-note svg{margin-top:.15rem;width:14px;height:14px}
.connection-passwords{margin-top:2rem}
.connection-passwords-head{display:flex;gap:.7rem;align-items:center;padding-bottom:.85rem;border-bottom:1px solid var(--line)}
.connection-passwords-head h3{font-size:var(--t-md);font-weight:600}
.connection-passwords-head>svg{color:var(--text-3)}
.connection-passwords-head .chip{font-size:var(--t-2xs)}
.connection-passwords>p{color:var(--text-3);font-size:var(--t-xs);margin-top:.65rem;max-width:66ch}
.connection-password-empty{display:flex;align-items:center;gap:.85rem;padding:1.4rem 0;color:var(--text-3)}
.connection-password-empty>svg{width:20px;height:20px;color:var(--accent-hi)}
.connection-password-empty h4{font-size:var(--t-sm);font-weight:550;color:var(--text-2)}
.connection-password-empty p{font-size:var(--t-xs);margin-top:.2rem}
.connection-passwords .rows{background:transparent}
.connection-passwords .rows li{padding:1rem 0;gap:.75rem}
.connection-password-icon{display:grid;place-items:center;width:35px;height:35px;flex:0 0 35px;background:var(--surface-2);border:1px solid var(--line-soft);border-radius:var(--r-sm);color:var(--text-3)}
.connection-passwords .rows .t{overflow-wrap:anywhere}
.connection-passwords .rows .m{font-size:var(--t-xs)}
.connection-passwords .empty{padding:1.25rem 0;align-items:flex-start;text-align:left;gap:.3rem}
.connection-passwords .empty .ico{display:none}
.connection-passwords .empty h3{font-size:var(--t-sm)}
.connection-passwords .empty p{font-size:var(--t-sm);max-width:none}
.connection-passwords .sk{margin:.75rem 0}
.connection-passwords .card{border:0;background:none;box-shadow:none}
.connection-passwords .card-body{padding:.5rem 0}
.connection-secret{padding:1rem;background:var(--ok-soft);border:1px solid var(--ok-line);border-radius:var(--r-sm);margin-bottom:1.25rem}
.connection-secret-head{display:flex;gap:.5rem;align-items:center;color:var(--ok);font-size:var(--t-sm);font-weight:600}
.connection-secret p{font-size:var(--t-xs);color:var(--text-2);line-height:1.6;margin:.55rem 0 .7rem}
.connection-secret-value{display:flex;gap:.55rem;align-items:center;padding:.6rem .7rem;background:var(--surface);border:1px solid var(--ok-line);border-radius:var(--r-xs)}
.connection-secret-value .secret{background:transparent;border:0;padding:0;flex:1;min-width:0;overflow-wrap:anywhere;font-size:var(--t-sm)}
.connection-secret .btn-sm{font-size:var(--t-xs)}
.connection-footer{display:flex;gap:.4rem;align-items:center;color:var(--text-3);font-size:var(--t-xs);margin-top:1.5rem}
.connection-footer svg{width:13px;height:13px}
@media(max-width:1100px){.connection-layout{grid-template-columns:minmax(0,1fr)}.connection-settings{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:1.5rem}.connection-username{grid-column:1/-1}.connection-protocol{margin-top:0}}
@media(max-width:580px){.connection-intro{align-items:flex-start}.connection-mark{width:42px;height:42px;flex-basis:42px;border-radius:var(--r-md)}.connection-inbox{flex-wrap:wrap;padding:.9rem;gap:.65rem}.connection-inbox>svg{display:none}.connection-picker{flex-basis:100%}.connection-inbox .btn{margin-left:0}.connection-settings{display:block}.connection-protocol{margin-top:.75rem}.connection-username{flex-wrap:wrap;gap:.3rem}.connection-username dt{flex-basis:100%}.connection-passwords .rows li{flex-wrap:wrap}.connection-passwords .rows .grow{flex-basis:calc(100% - 3.5rem)}.connection-passwords .rows li>.btn{margin-left:2.95rem}.connection-port{margin-left:.35rem}}

/* ---------- auth ---------- */
body.auth{min-height:100dvh;padding:0;overflow-x:hidden}
body.auth::before{background:
  radial-gradient(720px 520px at 21% 44%,var(--bg-grad-a),transparent 56%),
  radial-gradient(980px 700px at 79% 42%,rgba(110,139,255,.16),transparent 68%),
  radial-gradient(700px 520px at 88% 112%,var(--bg-grad-b),transparent 58%),
  radial-gradient(ellipse 80% 55% at 50% 120%,rgba(0,0,0,.5),transparent 70%)}
:root[data-theme="light"] body.auth::before{background:
  radial-gradient(720px 520px at 50% 36%,var(--bg-grad-a),transparent 56%),
  radial-gradient(980px 700px at 50% 42%,rgba(67,97,238,.10),transparent 68%),
  radial-gradient(700px 520px at 88% 112%,var(--bg-grad-b),transparent 58%)}
body.auth .app{display:none}
.auth-shell{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(27rem,1fr);min-height:100dvh;width:100%}
.auth-entry{display:flex;align-items:center;justify-content:center;padding:3rem clamp(1.5rem,6vw,7rem);min-width:0}
.auth-form-wrap{width:min(100%,26rem)}
.auth-card{
  position:relative;overflow:hidden;
  background:color-mix(in srgb,var(--surface) 91%,transparent);
  backdrop-filter:blur(16px) saturate(130%);
  border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-3),var(--inner-hi);padding:clamp(1.6rem,3vw,2.35rem);
}
.auth-card::before{
  content:"";position:absolute;inset:0 0 auto;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--accent),var(--accent-2),transparent);opacity:.7;
}
.auth-brand{display:flex;align-items:center;gap:.6rem;margin-bottom:2.8rem}
.auth-card h1{font-family:var(--f-display);font-size:clamp(2rem,3vw,2.7rem);line-height:1.02;letter-spacing:-.035em;font-weight:600}
.auth-card .lede{color:var(--text-2);font-size:var(--t-md);line-height:1.55;margin:.55rem 0 1.75rem}
.auth-alt{text-align:center;font-size:var(--t-sm);color:var(--text-3);margin-top:1rem}
.auth-google-button{display:inline-block;line-height:0}
.auth-google-button img{display:block;width:180px;height:40px}
.auth-foot{text-align:center;font-size:var(--t-sm);color:var(--text-3);margin-top:1.1rem;line-height:1.6}
.auth-stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:32rem;overflow:hidden;border-left:1px solid color-mix(in srgb,var(--line) 72%,transparent);isolation:isolate}
.auth-stage::before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(ellipse 58% 50% at 52% 46%,rgba(110,139,255,.21),transparent 70%)}
.auth-stage::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--bg),transparent 22%,transparent 78%,rgba(8,10,14,.32))}
.auth-stage-art{display:block;width:min(78%,37rem);max-height:78vh;object-fit:contain;filter:drop-shadow(0 28px 42px rgba(26,36,106,.42));animation:auth-drift 5.5s var(--ease) infinite alternate}
.auth-stage-copy{position:absolute;left:clamp(2rem,5vw,5.5rem);bottom:clamp(2rem,6vw,5rem);max-width:22rem}
.auth-stage-copy .eyebrow{margin-bottom:.55rem}
.auth-stage-copy p:last-child{font-family:var(--f-display);font-size:clamp(1.35rem,2vw,1.8rem);line-height:1.12;letter-spacing:-.025em;color:var(--text);margin:0}
@keyframes auth-drift{from{transform:translate3d(-2%,-4%,0) rotate(-5deg) scale(.95)}to{transform:translate3d(2%,4%,0) rotate(5deg) scale(1.06)}}
@media(max-width:860px){body.auth{padding:1.25rem}.auth-shell{display:block;min-height:auto}.auth-entry{padding:1.5rem 0}.auth-stage{display:none}.auth-brand{justify-content:center;margin-bottom:1.5rem}.auth-card h1,.auth-card .lede{text-align:center}.auth-foot{text-align:center}}
@media(prefers-reduced-motion:reduce){.auth-stage-art{animation:none}}

/* ---------- misc ---------- */
.muted{color:var(--text-2)}
.faint{color:var(--text-3)}
.small{font-size:var(--t-sm)}
.mt{margin-top:.9rem}
.mb{margin-bottom:.9rem}
.right{margin-left:auto}
.wrapx{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-999px;top:0;z-index:9999;background:var(--accent);color:var(--on-accent);padding:.5rem .8rem;border-radius:0 0 var(--r-sm) 0}
.skip:focus{left:0}
.kbd{
  font-family:var(--f-mono);font-size:var(--t-xs);padding:.1rem .3rem;border-radius:4px;
  background:var(--surface-3);border:1px solid var(--line);border-bottom-width:2px;color:var(--text-2);
}
details.raw{margin-top:.8rem}
details.raw summary{cursor:pointer;font-size:var(--t-sm);color:var(--text-3);list-style:none;display:inline-flex;align-items:center;gap:.3rem}
details.raw summary::-webkit-details-marker{display:none}
details.raw summary:hover{color:var(--text)}
details.raw summary svg{width:12px;height:12px;transition:transform var(--dur)}
details.raw[open] summary svg{transform:rotate(90deg)}
details.raw .code{margin-top:.5rem}
.bars{display:grid;gap:.5rem}
.bar-row{display:grid;grid-template-columns:1fr auto;gap:.1rem .6rem;font-size:var(--t-sm)}
.bar-row .p{font-family:var(--f-mono);color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-row .c{font-family:var(--f-mono);color:var(--text);font-weight:600}
.bar-row .meter{grid-column:1/-1;margin-top:.15rem}
.sys-feed{list-style:none;margin:0;padding:0;max-height:26rem;overflow-y:auto}
.sys-feed li{display:grid;grid-template-columns:6.6rem 7rem 1fr;gap:.6rem;padding:.5rem 1.05rem;border-bottom:1px solid var(--line-soft);font-size:var(--t-sm);align-items:baseline}
.sys-feed li:last-child{border-bottom:0}
.sys-feed .t{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--text-3)}
.sys-feed .k{font-size:var(--t-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-hi);overflow:hidden;text-overflow:ellipsis}
.sys-feed .d{color:var(--text-2);word-break:break-word}
@media(max-width:760px){.sys-feed li{grid-template-columns:1fr}}
.rep-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.rep-head .lede{margin:0;max-width:54ch}

/* ---------- responsive ---------- */
@media(max-width:960px){
  .rail{
    position:fixed;z-index:60;left:0;top:0;transform:translateX(-100%);
    transition:transform .22s var(--ease);box-shadow:var(--shadow-3);
    background:var(--rail);
  }
  body.nav-open .rail{transform:none}
  .scrim{position:fixed;inset:0;z-index:55;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .2s}
  body.nav-open .scrim{opacity:1;pointer-events:auto}
  .burger{display:inline-flex}
  .wrap{padding:1.15rem 1rem 3rem}
  .topbar{padding:.6rem 1rem}
}
@media(max-width:520px){
  .stats{grid-template-columns:1fr 1fr}
  .stat .v{font-size:var(--t-xl)}
  .guide ul{grid-template-columns:1fr}
}

/* =====================================================================
   Pipeline redesign — top navigation, flat surfaces, live page status.
   Everything below overrides the rules above; delete this block to roll
   the look back without touching markup or behaviour.
   ===================================================================== */
:root{--wrap:1280px;--f-display:var(--f-sans);--on-accent:#080A0E}
:root[data-theme="light"]{--on-accent:#FFFFFF}
body::before{background:radial-gradient(1200px 460px at 50% -180px,var(--bg-grad-a),transparent 70%)}
body::after{display:none}
h1{font-family:var(--f-sans)}

/* shell: two-row header */
.app{flex-direction:column}
.rail{
  position:sticky;top:0;z-index:40;width:auto;flex:none;height:auto;display:block;transform:none;
  border-right:0;border-bottom:1px solid var(--line-soft);box-shadow:none;
  background:color-mix(in srgb,var(--rail) 92%,transparent);backdrop-filter:blur(14px);
}
.rail-top{max-width:var(--wrap);margin:0 auto;padding:0 2rem;height:58px;display:flex;align-items:center;gap:1.75rem}
.brand{padding:0;flex:0 0 auto}
.brand-mark{background:#6E8BFF;box-shadow:none}
.brand-mark svg{color:#080A0E}
.brand-name{font-family:var(--f-sans);font-size:var(--t-md);font-weight:650;letter-spacing:-.015em}
.brand-env{margin-left:.15rem}
.sections{display:flex;gap:.2rem;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.sections::-webkit-scrollbar{display:none}
.sec{all:unset;box-sizing:border-box;cursor:pointer;height:34px;padding:0 .85rem;display:flex;align-items:center;border-radius:var(--r-sm);font-size:var(--t-sm);font-weight:550;color:var(--text-2);white-space:nowrap}
.sec:hover{color:var(--text);background:var(--surface-2)}
.sec[aria-pressed="true"]{color:var(--text);background:var(--surface-2);font-weight:650}
.sec:focus-visible{box-shadow:var(--ring)}
.sec[hidden]{display:none}
.sec-admin{color:var(--warn)}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:.4rem;flex:0 0 auto}
.rail-foot{border:0;padding:0;display:flex;align-items:center;gap:.3rem}
.rail-foot .who{padding:.2rem .35rem;width:auto;cursor:default}
.rail-foot .who:hover{background:transparent}
.rail-foot .who-text{max-width:13rem}
.rail-foot .who-role{display:none}
.rail-actions{margin:0;gap:.15rem}
.rail-actions .btn{flex:none}
.rail-scroll{border-top:1px solid var(--line-soft);padding:0;overflow:visible;-webkit-mask-image:none;mask-image:none}
.rail-scroll nav{max-width:var(--wrap);margin:0 auto;padding:0 2rem}
.rail-scroll .nav-group,.rail-scroll .nav-group.nav-admin{display:none;margin:0;padding:0;border:0;border-radius:0;background:none}
.rail-scroll .nav-group.on{display:flex;align-items:center;height:46px;overflow-x:auto;scrollbar-width:none}
.rail-scroll .nav-group.on[hidden]{display:none}
.rail-scroll .nav-label{display:none}
.rail nav a,.rail nav .nav-soon{margin:0;height:46px;padding:0 .8rem;border-radius:0;font-size:var(--t-sm);white-space:nowrap;gap:.45rem}
.rail nav a svg,.rail nav .nav-soon svg{width:15px;height:15px;flex-basis:15px;opacity:.7}
.rail nav a:hover{background:transparent;color:var(--text)}
.rail nav a[aria-current="page"],.nav-group.nav-admin a[aria-current="page"]{background:transparent;color:var(--text);box-shadow:inset 0 -2px 0 var(--accent)}
.nav-group.nav-admin a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--warn)}
.rail nav a[aria-current="page"]::before{display:none}
.rail nav a[aria-current="page"] svg{color:var(--accent-hi)}
.main{display:block}
.scrim,.burger,.topbar{display:none}

/* page title + status line */
.wrap{max-width:var(--wrap);padding:2.4rem 2rem 4.5rem}
.pagebar{display:flex;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin:0 0 1.9rem}
.pagebar-text{flex:1 1 28rem;min-width:0}
.pagebar h1{font-size:2rem;line-height:1.15;font-weight:650;letter-spacing:-.025em}
.page-status{margin-top:.45rem;font-size:var(--t-md);line-height:1.5;color:var(--text-2);max-width:78ch}
.page-status:empty{display:none}
.page-status.warn{color:var(--warn)}
.page-status.bad{color:var(--danger)}
.pagebar-actions{display:flex;gap:.4rem}
#guide-toggle[aria-pressed="true"]{--btn-bg:var(--surface-2);--btn-fg:var(--text)}
.guide{background:var(--surface);border-color:var(--line);box-shadow:none;margin-bottom:1.9rem}
.guide::before,.guide::after{display:none}
.guide-ico{background:var(--accent-soft);color:var(--accent-hi);box-shadow:none}

/* surfaces */
.card,.stat{box-shadow:none;border-color:var(--line-soft);border-radius:14px}
.card::before,.stat::before{display:none}
.card + .card{margin-top:1rem}
.card-head{padding:1rem 1.15rem}
.card-head h2,.card-head h3{font-size:var(--t-md);font-weight:650}
.card-foot{border-radius:0 0 14px 14px}
.stats{gap:.9rem}
.stat{padding:1.1rem 1.15rem}
.stat:hover{transform:none;box-shadow:none;border-color:var(--line)}
.stat .k{font-size:var(--t-sm);font-weight:500;letter-spacing:0;text-transform:none;color:var(--text-2);margin-bottom:.55rem}
.stat .v{font:650 2.25rem/1.05 var(--f-sans);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.stat.accent{background:var(--surface);border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.split{gap:1.5rem}
.section-head{display:flex;align-items:center;gap:.6rem;margin:0 0 .85rem}
.section-head h2{font-size:var(--t-lg);font-weight:650}
.kv{margin:0}
.rows-card{background:var(--surface);border:1px solid var(--line-soft);border-radius:14px;overflow:hidden}
.note{border-radius:12px}
table.tbl th{font-size:var(--t-sm);font-weight:500;letter-spacing:0;text-transform:none}

/* buttons */
.btn{box-shadow:none}
.btn-primary{--btn-bg:var(--accent);--btn-fg:var(--on-accent);--btn-line:transparent;box-shadow:none;font-weight:650}
.btn-primary:hover{--btn-bg:var(--accent-hi)}
.btn-strong{--btn-bg:var(--text);--btn-fg:var(--bg);--btn-line:transparent;font-weight:650}
.btn-strong:hover{--btn-bg:var(--text-2)}
.btn-lg{height:3.25rem;padding:0 1.3rem;font-size:var(--t-md);border-radius:12px}
.btn-danger-text{--btn-fg:var(--danger)}
.btn-danger-text:hover{--btn-bg:var(--danger-soft);--btn-fg:var(--danger)}
.tabs{border-bottom:0;gap:.45rem;margin-bottom:1.4rem}
.tabs a,.tabs button{padding:.5rem .95rem;border:1px solid var(--line);border-radius:var(--r-full);margin:0;font-size:var(--t-sm)}
.tabs a:hover,.tabs button:hover{background:var(--surface-2)}
.tabs a[aria-current="page"],.tabs button[aria-selected="true"]{background:var(--text);color:var(--bg);border-color:transparent}

/* primary create form at the top of a page */
.hero-form{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin:0 0 2.2rem;max-width:54rem}
.hero-form > .input.hero-input,.hero-form .hero-input{flex:1 1 22rem;min-width:0}
.hero-form > .input.hero-input,.hero-input .input{height:3.25rem;font-size:var(--t-md);background:var(--surface);border-color:var(--accent-line)}
.hero-input.suffix-input .suffix{background:var(--surface);border-color:var(--accent-line);border-left:0;font-size:var(--t-md)}
.hero-form .hint{flex-basis:100%;font-size:var(--t-sm);color:var(--text-3)}
#secret-slot:not(:empty),#hook-secret:not(:empty),#inbox-created:not(:empty){margin:-1.2rem 0 2.2rem;max-width:54rem}

/* connected status row (Overview, Webhooks) */
.flow{list-style:none;margin:0 0 2.2rem;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1.4rem}
.flow-steps{grid-template-columns:repeat(4,minmax(0,1fr))}
.node{position:relative;display:flex;flex-direction:column;gap:.7rem;padding:1.15rem 1.15rem 1.2rem;border-radius:16px;background:var(--surface);border:1px solid var(--line-soft);min-width:0}
.node + .node::before{content:"";position:absolute;left:-1.4rem;top:50%;width:1.4rem;border-top:2px dashed var(--line)}
.node-ok + .node-ok::before{border-top-style:solid;border-color:var(--ok-line)}
.node-next{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.node-todo{background:transparent;border-style:dashed;border-color:var(--line)}
.node-warn{background:var(--warn-soft);border-color:var(--warn-line)}
.node-bad{background:var(--danger-soft);border-color:var(--danger-line)}
.node-main{display:flex;flex-direction:column;gap:.1rem;color:inherit}
.node-main:hover{text-decoration:none}
.node-main:hover .node-label{color:var(--accent-hi)}
.node-state{display:flex;align-items:center;gap:.45rem;font-size:var(--t-xs);font-weight:600;color:var(--text-2);margin-bottom:.45rem}
.node-next .node-state .dot{background:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.node-todo .node-state .dot{background:transparent;box-shadow:inset 0 0 0 1.5px var(--text-3)}
.node-label{font-size:var(--t-md);font-weight:650}
.node-value{font-size:2.75rem;line-height:1;font-weight:650;letter-spacing:-.045em;margin-top:.4rem;font-variant-numeric:tabular-nums}
.node-todo .node-value{color:var(--text-3)}
.node-warn .node-value{color:var(--warn)}
.node-bad .node-value{color:var(--danger)}
.node-sub{font-size:var(--t-sm);color:var(--text-3);line-height:1.45;flex:1}
.node .btn{align-self:flex-start}
.node-step{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-hi);font:600 var(--t-xs)/1 var(--f-mono)}
@media(max-width:1100px){.flow{grid-template-columns:repeat(2,minmax(0,1fr))}.node + .node::before{display:none}}
@media(max-width:560px){.flow{grid-template-columns:1fr}}

/* Metrics: delivery funnel */
.stats-flow{grid-template-columns:repeat(4,minmax(0,1fr));gap:1.4rem}
.stats-flow .stat{overflow:visible}
.stats-flow .stat + .stat::after{content:"";position:absolute;left:-1.4rem;top:50%;width:1.4rem;border-top:2px dashed var(--line)}
.stats-flow .stat:first-child{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
@media(max-width:900px){.stats-flow{grid-template-columns:repeat(2,minmax(0,1fr))}.stats-flow .stat + .stat::after{display:none}}

/* Inboxes: one card per address */
.inbox-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,32rem),1fr));gap:1rem}
.inbox-card{display:flex;flex-direction:column;gap:1rem;padding:1.15rem 1.2rem;border-radius:16px;background:var(--surface);border:1px solid var(--line-soft);min-width:0}
.inbox-card:hover{border-color:var(--line)}
.inbox-card-top{display:flex;align-items:center;gap:.85rem;min-width:0}
.inbox-card .grow{flex:1;min-width:0}
.inbox-card .t{display:block;font-size:var(--t-lg);font-weight:650;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inbox-card .m{display:block;font-size:var(--t-xs);color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:.15rem}
.inbox-card .m code{background:none;border:0;padding:0;color:inherit}
.inbox-card-acts{display:flex;gap:.3rem;flex-wrap:wrap;align-items:center;padding-top:.9rem;border-top:1px solid var(--line-soft)}
.inbox-card-acts .spacer{flex:1}
.avatar-lg{width:42px;height:42px;flex:0 0 42px;border-radius:12px;font-size:var(--t-sm)}
.chip .dot{width:6px;height:6px;flex-basis:6px;box-shadow:none}

/* numbered facts (API keys) */
.facts{list-style:none;margin:0;padding:0;counter-reset:fact;border-top:1px solid var(--line-soft)}
.facts li{counter-increment:fact;position:relative;padding:.8rem 0 .8rem 2.3rem;border-bottom:1px solid var(--line-soft);font-size:var(--t-sm);color:var(--text-3);line-height:1.5}
.facts li::before{content:counter(fact,decimal-leading-zero);position:absolute;left:0;top:.95rem;font:600 var(--t-xs)/1 var(--f-mono);color:var(--accent-hi)}
.facts b{display:block;color:var(--text);font-weight:600;font-size:var(--t-md)}

/* Settings: organization ID */
.id-hero{display:flex;align-items:center;gap:1rem;padding:1.25rem 1.4rem;margin:0 0 1.5rem;border-radius:16px;background:var(--surface);border:1px solid var(--line-soft)}
.id-hero .grow{flex:1;min-width:0}
.id-hero .lbl{display:block;font-size:var(--t-sm);color:var(--text-3)}
.id-hero .id-value{display:block;font:500 1.5rem/1.3 var(--f-mono);letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}

@media(max-width:960px){
  .rail{position:sticky;transform:none;box-shadow:none}
  .rail-top{padding:0 1rem;gap:.9rem}
  .rail-scroll nav{padding:0 1rem}
  .rail-foot .who-text{display:none}
  .wrap{padding:1.6rem 1rem 3rem}
  .pagebar h1{font-size:1.6rem}
}
@media(max-width:640px){
  .rail-top{flex-wrap:wrap;height:auto;padding-top:.6rem;row-gap:.3rem}
  .sections{order:3;flex-basis:100%;padding-bottom:.4rem}
  .brand-name,.brand-env,.rail-actions a{display:none}
  .stats-flow{grid-template-columns:1fr}
}