/*
 * Zuger OPS. Signed out: the site's hero (zuger.ai). Signed in: Revolut Business's page, element for element: a sidebar
 * that folds to an icon rail, a header with the page's title and your menu, pill tabs under it, the main card with a
 * big figure, pill actions and a line chart, and a column of cards with a figure, label and value lines, and a "View"
 * link. Revolut gives the layout; every colour, font, mark and icon is Zuger's own. No inline styles: style-src 'self'.
 */
:root{
  /* zuger.ai's own tokens (zuger-website/styles.css). Revolut Business gives this page its layout, never its colours. */
  --bg:#0A0A0A; --bg-2:#0F0F0F; --surface:#141414; --surface-2:#1A1A1A; --surface-3:#202020; --pop:#1A1A1A;
  --line:#1F2228; --line-2:rgba(255,255,255,.075);
  --ink:#FFFFFF; --ink-2:#D5D9E2; --muted:#9598A1; --faint:#6C6F77;
  --red:#DA291C; --red-soft:rgba(218,41,28,.14); --red-2:#FF6B5E; --ok:#22C55E; --ok-soft:rgba(34,197,94,.13);
  --sans:"Schibsted Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --r-s:12px; --r-m:18px; --r-l:26px; --pill:999px;
  --ease:cubic-bezier(.22,.68,.32,1);
  --sh:0 2px 8px rgba(0,0,0,.55),0 30px 60px -30px rgba(0,0,0,.95);
  --side:264px; --rail:96px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--ink);font:15px/1.5 var(--sans);-webkit-font-smoothing:antialiased}
[hidden]{display:none!important} /* hidden means hidden: a class that sets display must never reopen a closed form */
::selection{background:var(--red);color:#fff}
.defs{position:absolute;width:0;height:0;overflow:hidden}
/* ── the lockup (zuger.ai's): the ball, the drawn ZUGER, a hairline, OPS in the ball's red ─────────────────────── */
.bot{display:block;overflow:visible}
.bot--brand{width:52px;height:52px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.6));transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.side__brand:hover .bot--brand{transform:rotate(-7deg) scale(1.05)}
.wm-svg{display:block;height:19px;width:auto;overflow:visible;color:var(--ink)}
.brand__rule{display:block;width:1px;height:24px;background:linear-gradient(transparent,rgba(255,255,255,.28),transparent)}
.ops-svg{display:block;height:19px;width:auto;overflow:visible;color:var(--red);filter:drop-shadow(0 0 10px rgba(218,41,28,.55)) drop-shadow(0 0 22px rgba(218,41,28,.25))}
.gate__brand{display:flex;align-items:center;gap:14px;margin:0 0 30px}
.gate__brand .bot--brand{width:60px;height:60px}
.gate__brand .wm-svg,.gate__brand .ops-svg{height:21px}
.gate__brand .brand__rule{height:26px}
/* OPS rises in, letter by letter, once; the ball blinks now and then, as it does on the site. */
.wm-l,.ops-l,.b-eye{transform-box:fill-box;transform-origin:center}
.ops-l{animation:ops-rise .7s cubic-bezier(.22,.68,.32,1) both}
.ops-svg>.ops-l{animation-delay:.12s}.ops-svg>g:nth-child(2)>.ops-l{animation-delay:.22s}.ops-svg>g:nth-child(3)>.ops-l{animation-delay:.32s}
@keyframes ops-rise{from{opacity:0;transform:translateY(55%) scale(.9)}to{opacity:1;transform:none}}
.b-eye{animation:blink 7s infinite}
@keyframes blink{0%,94%,100%{transform:scaleY(1)}96%{transform:scaleY(.12)}}


main{max-width:1200px;margin:0 auto;padding:32px 28px 64px}

/* ── Revolut Business's frame ─────────────────────────────────────────────────────────────────────────────────── */
body.is-in{display:grid;grid-template-columns:var(--side) minmax(0,1fr);grid-template-rows:auto 1fr;min-height:100vh}
body.is-in.is-folded{grid-template-columns:var(--rail) minmax(0,1fr)}
.side{grid-column:1;grid-row:1/span 2;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:18px 16px 16px;overflow-y:auto;scrollbar-width:none}
.side__brand{display:flex;align-items:center;gap:11px;padding:4px 10px 22px;color:var(--ink);text-decoration:none}
.side__brand .bot--brand{width:40px;height:40px}
.side__brand .wm-svg,.side__brand .ops-svg{height:14px}
.side__brand .brand__rule{height:17px}
.tabs{display:flex;flex-direction:column;gap:4px}
.tabs a{display:flex;align-items:center;gap:14px;padding:11px 12px;border-radius:14px;color:var(--ink);font-size:17px;font-weight:500;text-decoration:none;transition:background .15s var(--ease)}
.tabs a .ico{width:22px;height:22px;color:var(--ink-2)}
.tabs a:hover{background:rgba(255,255,255,.05)}
.tabs a.is-on{background:var(--surface-2)}
.side__fold{margin-top:auto;align-self:flex-start;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:12px;background:var(--surface-2);color:var(--ink-2);cursor:pointer}
.side__fold:hover{background:var(--surface-3)}
/* folded: an icon rail, each section's glyph over its name, the one you are on in a raised square */
body.is-folded .side{padding:18px 8px 16px;align-items:center}
body.is-folded .side__brand{padding:4px 0 20px}
body.is-folded .side__brand .wm-svg,body.is-folded .side__brand .brand__rule,body.is-folded .side__brand .ops-svg{display:none}
body.is-folded .side__brand .bot--brand{width:44px;height:44px}
body.is-folded .tabs{gap:10px;width:100%}
body.is-folded .tabs a{flex-direction:column;gap:6px;padding:6px 0;font-size:13px;font-weight:500;background:none;text-align:center}
body.is-folded .tabs a .ico{box-sizing:content-box;width:22px;height:22px;padding:9px 11px;border-radius:14px}
body.is-folded .tabs a.is-on .ico{background:var(--surface-2);color:var(--ink)}
body.is-folded .tabs a:hover .ico{background:rgba(255,255,255,.06)}
body.is-folded .side__fold{align-self:center}

.head{grid-column:2;grid-row:1;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px 20px;padding:18px 28px 0 12px}
.head__title{margin:0;font-size:34px;font-weight:700;letter-spacing:-.02em;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.head__tools{display:flex;align-items:center;gap:8px}
.head__icon{display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:none;color:var(--ink);cursor:pointer}
.head__icon:hover{background:rgba(255,255,255,.07)}
.head__icon .ico{width:22px;height:22px}
.acct{display:flex;align-items:center;gap:10px;height:42px;padding:0 12px 0 6px;border:0;border-radius:var(--pill);background:var(--surface);color:var(--ink);font:500 16px var(--sans);cursor:pointer}
.acct:hover{background:var(--surface-2)}
.acct__chip{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--surface-3);font:600 11px var(--sans);letter-spacing:.04em}
.acct__chev{width:18px;height:18px}
.me-btn{padding:0;border:0;background:none;border-radius:50%;cursor:pointer;margin-left:4px}
.me-btn .av{width:42px;height:42px;font-size:14px}
.subnav{grid-column:1/-1;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:6px 0 2px}
.subnav::-webkit-scrollbar{display:none}
.subnav a{padding:9px 16px;border-radius:var(--pill);color:var(--ink-2);font-size:16px;font-weight:500;text-decoration:none;white-space:nowrap;transition:background .15s var(--ease)}
.subnav a:hover{background:rgba(255,255,255,.05)}
.subnav a.is-on{background:var(--surface-2);color:var(--ink)}
/* margin:0, not the way in's auto: an auto margin in a grid shrinks main to its widest unbroken line and it spills out */
body.is-in main{grid-column:2;grid-row:2;min-width:0;margin:0;padding:16px 28px 56px 12px;max-width:none}

/* your menu, as Revolut's profile panel */
/* Your menu, compact: it never takes more than half the screen. The avatar beside who you are, two small actions, the
   session on one line, the sections in two columns, and signing out beside the name of the page. */
.menu{position:fixed;top:72px;right:24px;z-index:20;width:min(340px,calc(100vw - 32px));max-height:50dvh;overflow-y:auto;overscroll-behavior:contain;padding:14px 12px 10px;
  border-radius:20px;background:var(--pop);box-shadow:0 24px 64px rgba(0,0,0,.55),inset 0 0 0 1px var(--line-2)}
.menu__head{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;row-gap:1px;align-items:center;padding:0 4px 12px}
.menu__head .av,.menu__head .av--xl{grid-row:1/3;width:44px;height:44px;font-size:16px;box-shadow:0 0 0 2px var(--pop),0 0 0 3.5px var(--red)}
.menu__name{align-self:end;font-size:15px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menu__line{align-self:start;color:var(--ink-2);font-size:13px}
.menu__acts{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.menu__acts:empty{display:none}
.menu__card{position:relative;display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:12px;background:radial-gradient(120% 160% at 100% 0%,rgba(218,41,28,.24),transparent 60%),var(--surface-3);box-shadow:inset 0 0 0 1px rgba(218,41,28,.26);margin:0 0 8px}
.menu__card b{display:none}.menu__card span{order:2;color:var(--ink-2);font-size:12.5px;line-height:1.3}
.menu__card-ico{order:1;flex:none;width:16px;height:16px}
.menu__list{display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:6px 0;border-top:1px solid var(--line)}
.menu__item{display:flex;align-items:center;gap:10px;width:100%;min-height:36px;padding:6px 8px;border:0;border-radius:10px;background:none;color:var(--ink);font:500 14px var(--sans);text-align:left;text-decoration:none;cursor:pointer}
.menu__item:hover,.menu__item:focus-visible{background:rgba(255,255,255,.06);outline:none}
.menu__item .ico{width:18px;height:18px;flex:none}
.menu__foot{display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid var(--line);padding-top:6px}
.menu__foot .menu__item{width:auto}
.menu__ver{margin:0 8px 0 0;color:var(--ink-2);font:12px var(--mono)}

/* ── Home: the main card and the column beside it ─────────────────────────────────────────────────────────────── */
.dash{display:grid;grid-template-columns:minmax(0,2.45fr) minmax(300px,1fr);gap:16px;align-items:start}
.dash__side{display:flex;flex-direction:column;gap:16px}
.panel{background:var(--surface);border-radius:var(--r-l);padding:18px 18px 16px;min-width:0}
.panel--main{padding:20px 18px 18px}
.panel__top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.panel__acts{display:flex;flex-wrap:wrap;gap:8px}
.big{margin:0;font-size:32px;font-weight:700;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:8px}
.big--sm{font-size:30px}
.big__chev{width:26px;height:26px;padding:4px;border-radius:50%;background:var(--surface-2);box-sizing:content-box}
.big__label{margin:4px 0 0;font-size:18px;font-weight:500;color:var(--ink)}
.big__label span{color:var(--ink-2)}
.info{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;border:1.5px solid currentColor;color:var(--ink-2);font:600 11px var(--sans);vertical-align:1px;cursor:help}
.lines{display:flex;flex-direction:column;gap:14px;margin:22px 0 6px}
.line{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:17px}
.line span{color:var(--ink-2)}.line b{font-weight:500;font-variant-numeric:tabular-nums}
.panel__more{display:block;margin:16px -18px -16px;padding:16px;text-align:center;color:var(--ink);font-size:17px;font-weight:500;text-decoration:none;border-radius:0 0 var(--r-l) var(--r-l)}
main a.panel__more{text-decoration:none}
.panel__more:hover{background:rgba(255,255,255,.04)}
.panel__rule{height:1px;background:var(--line);margin:18px 0}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 16px}
.stat{display:flex;flex-direction:column-reverse;gap:2px}
.stat b{font-size:24px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat span{color:var(--ink-2);font-size:14px}
.stat--bad b{color:var(--red-2)}
/* Revolut's line chart: a thin line, a soft fill, dates under it, and where you point a hairline and a small card */
.chart-wrap{position:relative;margin:26px 0 0}
.chart{display:block;width:100%;height:280px;overflow:visible}
.chart__line{fill:none;stroke:#E6E7EB;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.chart__cursor{position:absolute;top:0;bottom:36px;left:var(--x,0);width:1.5px;background:rgba(255,255,255,.7);transform:translateX(-50%);pointer-events:none}
.chart__tip{position:absolute;top:58%;left:var(--x,0);transform:translateX(12px);display:flex;flex-direction:column;gap:2px;padding:12px 16px;border-radius:12px;background:var(--surface-3);box-shadow:0 12px 30px rgba(0,0,0,.45);pointer-events:none;white-space:nowrap}
.chart__tip b{font-size:17px;font-weight:500}.chart__tip span{color:var(--ink-2);font-size:14px}
.chart__axis{display:flex;justify-content:space-between;margin-top:14px;color:var(--ink-2);font-size:14px;font-weight:500}
/* ── buttons and fields ───────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 14px var(--sans);border:0;border-radius:var(--pill);padding:11px 20px;
  background:var(--ink);color:#0A0A0A;cursor:pointer;white-space:nowrap;text-decoration:none;transition:transform .18s var(--ease),background .18s var(--ease),box-shadow .18s var(--ease)}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:none}
.btn--light{padding:14px 26px;font-size:15px}
.btn .ico{width:18px;height:18px}
.btn--soft{background:var(--surface-2);color:var(--ink)}.btn--soft:hover{background:var(--surface-3)}
.btn--ic{width:42px;padding:0;font-size:18px;letter-spacing:.05em}
.panel__acts .btn{height:42px;padding:0 16px;font-size:16px;font-weight:500}.panel__acts .btn--ic{width:42px;padding:0}
.btn .plus{font-size:20px;line-height:0;margin-right:2px}
.btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2),inset 0 0 0 1px var(--line)}
.btn--ghost:hover{background:var(--surface-2)}
.btn--stop{background:transparent;color:var(--red);box-shadow:inset 0 0 0 1px rgba(218,41,28,.45)}
.btn--stop:hover{background:var(--red-soft)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.btn:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--red);outline-offset:2px}
select,input,textarea{font:inherit;font-size:14px;color:var(--ink);background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-s);padding:10px 13px}
input::placeholder,textarea::placeholder{color:var(--faint)}
input:focus,select:focus,textarea:focus{border-color:#3a3f48;outline:0}
.note{color:var(--red);margin:14px 0 0;font-size:14px}

/* ── the way in ───────────────────────────────────────────────────────── */
.gate{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:24px;min-height:calc(100vh - 64px);max-width:1200px;margin:0 auto}
.gate__eyebrow{margin:0 0 18px;font:500 12px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.gate h1{margin:0;font-weight:500;font-size:clamp(40px,5vw,60px);line-height:1.02;letter-spacing:-.03em;text-wrap:balance}
.gate__lead{margin:22px 0 0;max-width:30em;color:var(--muted);font-size:17px;line-height:1.55}
.gate__acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.gate__art{position:relative;height:min(520px,70vh);min-height:320px}
.gate__art::before{content:"";position:absolute;left:50%;top:44%;width:420px;height:420px;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(218,41,28,.34),rgba(218,41,28,.08) 55%,transparent);filter:blur(8px)}
.gate__plane{position:absolute;display:block;border:1px solid var(--line-2);background:linear-gradient(160deg,#2a2c31,#141518 70%);box-shadow:var(--sh)}
.gate__plane--a{left:-6%;right:34%;bottom:4%;height:46%;border-radius:22px;transform:skewY(-9deg)}
.gate__plane--b{left:40%;right:-10%;bottom:-8%;height:58%;border-radius:22px;transform:skewY(7deg);opacity:.9}
.gate__ball{position:absolute;left:50%;top:44%;width:min(300px,56%);aspect-ratio:1;height:auto;transform:translate(-50%,-50%);filter:drop-shadow(0 30px 40px rgba(0,0,0,.7))}
.gate__spark{position:absolute;right:16%;top:12%;width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 12px 3px rgba(255,255,255,.55)}

/* ── pages ────────────────────────────────────────────────────────────── */
.bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0 0 16px}
.bar__h{margin:0 auto 0 0;font-size:22px;font-weight:700}
.bar h1{font-size:30px;font-weight:500;letter-spacing:-.02em;margin:0 auto 0 0}
.bar input{min-width:280px;border-radius:var(--pill);padding:10px 16px;background:var(--surface)}
.filter{display:flex;gap:8px;flex-wrap:wrap}
.back{display:inline-flex;align-items:center;gap:6px;color:var(--muted);text-decoration:none;margin-bottom:12px;font-size:14px}
main .back{text-decoration:none}
.back:hover{color:var(--ink)}
.stamp{color:var(--faint);font:12px var(--mono);margin:0 0 18px}
.empty{color:var(--muted)}
.hint{margin:0 0 14px;color:var(--muted);font-size:14px}
.sub{font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin:14px 0 8px}.sub:first-child{margin-top:0}

.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin-bottom:16px}
.tile{background:var(--surface);border-radius:var(--r-m);padding:18px 18px 16px;display:flex;flex-direction:column;gap:6px}
.tile b{font-size:32px;font-weight:500;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.tile span{color:var(--muted);font-size:13px}
.tile--warn b{color:var(--red)}

.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;margin-bottom:16px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:16px}
.card{background:var(--surface);border-radius:var(--r-l);padding:20px 20px 16px;margin-bottom:16px;min-width:0}
.cols .card,.grid2 .card{margin-bottom:0}
.grid2{margin-bottom:16px}
.card h2{font-size:18px;font-weight:600;letter-spacing:-.01em;color:var(--ink);margin:0 0 12px}
.card__head{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.kv{display:grid;grid-template-columns:1fr auto;gap:9px 16px;font-variant-numeric:tabular-nums}.kv span{color:var(--muted)}.kv b{font-weight:500}
.facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px 22px;margin:0}
.facts div{display:flex;flex-direction:column;gap:3px}.facts dt{color:var(--muted);font-size:12.5px}.facts dd{margin:0;font-weight:500}

.table-wrap{overflow-x:auto;margin:0 -4px}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;color:var(--faint);font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:top}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:rgba(255,255,255,.018)}
td.mono,.mono{font-family:var(--mono);font-size:12.5px}
td.mono{white-space:nowrap;color:var(--ink-2)}
main a{color:var(--ink);text-decoration:underline;text-decoration-color:#3a3f48;text-underline-offset:3px}
main a:hover{text-decoration-color:currentColor}
main a.btn{text-decoration:none;color:#0A0A0A}
main a.btn--ghost,main a.btn--soft{color:var(--ink)}

.k,.pill{display:inline-block;font:500 11.5px var(--mono);padding:3px 9px;border-radius:var(--pill);background:var(--surface-3);color:var(--ink-2);white-space:nowrap}
.k--bad,.pill--bad{background:var(--red-soft);color:var(--red-2)}
.k--ok,.pill--ok{background:var(--ok-soft);color:var(--ok)}


/* ── actions, grants, the support view ────────────────────────────────── */
.acts{display:flex;flex-wrap:wrap;gap:8px}
.act{display:grid;gap:14px;margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.act__what{margin:0;font-size:15px}
.act label{display:grid;gap:7px;font-size:13px;color:var(--muted)}
.act label b{color:var(--ink)}
.act textarea{resize:vertical}
.perms{border:0;margin:0;padding:0;display:grid;gap:4px}
.perm{display:grid!important;grid-template-columns:auto auto 1fr;gap:10px!important;align-items:baseline;color:var(--ink)!important;font-size:14px!important;padding:8px 10px;border-radius:var(--r-s)}
.perm:hover{background:var(--surface-2)}
.perm input{accent-color:var(--red)}
.perm span{color:var(--muted);font-size:13px}
.mems{display:grid}
.mem{display:grid;gap:9px;padding:16px 0;border-top:1px solid var(--line)}.mem:first-child{border-top:0;padding-top:0}
.mem--off{opacity:.55}
.mem__head{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.mem__head b{font-size:16px;font-weight:600;overflow-wrap:anywhere}
.mem__perms{display:flex;flex-wrap:wrap;gap:6px}
.mem__meta{margin:0;color:var(--muted);font-size:13px}
.run{border-top:1px solid var(--line);padding:12px 0}.run:first-of-type{border-top:0;padding-top:0}
.run summary{cursor:pointer;display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;font-size:15px;list-style:none}
.run summary::-webkit-details-marker{display:none}
.run summary::before{content:"›";color:var(--faint);transition:transform .18s var(--ease)}
.run[open] summary::before{transform:rotate(90deg)}
.run summary .mono{color:var(--muted);font-size:12px}
.run .table-wrap{margin-top:12px}

.ico{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* the eyes look toward the pointer (ops.js sets --b-dx/--b-dy on the ball) and blink on their own */
.b-look{transform:translate(var(--b-dx,0px),var(--b-dy,0px));transition:transform .28s cubic-bezier(.2,.7,.2,1)}

/* avatars: initials on a tint of one of the site's bot accents; companies are rounded squares */
.av{flex:none;display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;font:600 15px var(--sans);letter-spacing:.02em;user-select:none}
.av--sq{border-radius:14px}
.av--xl{width:76px;height:76px;font-size:26px}.av--sq.av--xl{border-radius:24px}
.av--0{background:rgba(74,216,236,.15);color:#6FE3F2}
.av--1{background:rgba(167,139,250,.17);color:#C4B5FD}
.av--2{background:rgba(255,153,168,.15);color:#FFB3BE}
.av--3{background:rgba(245,158,11,.15);color:#FBBF24}
.av--4{background:rgba(34,197,94,.14);color:#4ADE80}
.av--5{background:rgba(59,130,246,.17);color:#93C5FD}
.av--6{background:rgba(218,41,28,.16);color:var(--red-2)}
.av--glyph{background:var(--surface-3);color:var(--ink-2)}.av--glyph .ico{width:20px;height:20px}
.av--bad{background:var(--red-soft);color:var(--red-2)}.av--ok{background:var(--ok-soft);color:var(--ok)}

/* rows */
.rows{display:flex;flex-direction:column;margin:0 -12px}
.row{display:flex;align-items:center;gap:14px;min-width:0;padding:11px 12px;border-radius:16px;color:inherit}
main a.row{text-decoration:none;color:inherit}
a.row{transition:background .15s var(--ease)}a.row:hover{background:var(--surface-2)}
.row__main{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.row__title{font-weight:500;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row__title .pill{margin-left:6px;vertical-align:1px}
.row__sub{color:var(--muted);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row__right{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex:none;text-align:right}
.row__val{font-weight:500;font-size:15px;font-variant-numeric:tabular-nums}
.row__time{color:var(--muted);font-size:12.5px;white-space:nowrap}
.row__go{width:16px;height:16px;flex:none;fill:none;stroke:var(--faint);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.row--bad .row__title{color:var(--red-2)}

/* a person's or a company's page opens like a Revolut profile */
.prof{display:flex;align-items:center;gap:20px;margin:4px 0 26px;min-width:0}
.prof__main{min-width:0}
.prof h1{margin:0;font-size:32px;font-weight:600;letter-spacing:-.03em;line-height:1.1;overflow-wrap:anywhere}
.prof p{margin:6px 0 12px;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.pill--red{background:var(--red-soft);color:var(--red-2)}

/* ── narrow ───────────────────────────────────────────────────────────────────────────────────────────────────── */
@media (max-width:1180px){.dash{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
  .gate{grid-template-columns:1fr;min-height:0;padding-top:12px;gap:8px}
  .gate__art{order:-1;height:300px;min-height:0;overflow:hidden;margin:0 -16px}
  .gate__plane--a{bottom:10%}.gate__plane--b{bottom:0}
  .gate__art::before{width:300px;height:300px}
  .gate__ball{width:180px}
  /* signed in on a phone: the header on top, the sections as a bottom bar, the sidebar's brand and fold gone */
  body.is-in,body.is-in.is-folded{display:block}
  .side{position:static;height:auto;padding:0;overflow:visible}
  .side__brand,.side__fold{display:none}
  .tabs{position:fixed;left:0;right:0;bottom:0;z-index:10;flex-direction:row;justify-content:space-around;gap:0;padding:8px 4px calc(8px + env(safe-area-inset-bottom));
    background:rgba(10,10,10,.86);backdrop-filter:saturate(1.6) blur(18px);-webkit-backdrop-filter:saturate(1.6) blur(18px);border-top:1px solid var(--line-2)}
  .tabs a,body.is-folded .tabs a{flex:1 1 0;flex-direction:column;gap:4px;padding:4px 2px;font-size:11px;background:none;color:var(--faint);text-align:center}
  .tabs a .ico{width:22px;height:22px;padding:5px 12px;border-radius:12px;box-sizing:content-box;color:inherit}
  .tabs a.is-on{background:none;color:var(--ink)}.tabs a.is-on .ico{background:var(--surface-2);color:var(--ink)}
  .head{padding:14px 16px 0;gap:10px}
  .head__title{font-size:26px}
  .acct__name{display:none}.acct{padding:0 8px 0 6px}
  body.is-in main{padding:14px 16px 110px}
  .menu{top:64px;right:12px}
}
@media (max-width:640px){
  .gate__acts .btn{flex:1 1 100%}
  .row__time{font-size:11.5px}.row__val{font-size:14px}
  .prof{gap:14px}.prof h1{font-size:24px}.av--xl{width:60px;height:60px;font-size:21px}
  .head__icon#grid-btn{display:none}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}.facts dd{overflow-wrap:anywhere}
  .panel__acts{width:100%}.panel__acts .btn{flex:1 1 auto}
  .chart{height:200px}
  .chart__axis span{white-space:nowrap}.chart__axis span:nth-child(even):not(:last-child){display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.btn:hover{transform:none}}
.menu .btn--soft{background:var(--surface-3);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2)}.menu .btn--soft:hover{background:#262626}
.menu .btn--sm{height:30px;padding:0 12px;font-size:13px;font-weight:500}

/* ── Needs attention (Home) ─────────────────────────────────────────────────────────────────────────────────── */
.attn{margin:0 0 16px;padding:18px 18px 10px}
.attn--clear{padding:10px 18px}
.attn__head{display:flex;align-items:center;gap:10px;margin:0 0 6px}
.attn__head h2{margin:0;font-size:20px;font-weight:700;letter-spacing:-.01em}
.attn__n{display:grid;place-items:center;min-width:26px;height:26px;padding:0 8px;border-radius:var(--pill);background:var(--red);color:#fff;font-size:13px;font-weight:700}
.attn__count{display:grid;place-items:center;min-width:34px;height:30px;padding:0 10px;border-radius:var(--pill);background:var(--surface-2);font-weight:700;font-variant-numeric:tabular-nums}
.attn__count--bad{background:var(--red-soft);color:var(--red-2)}
.attn .row__sub{white-space:normal}
.av--warn{background:rgba(245,158,11,.16);color:#FBBF24}

/* ── Roles and permissions ──────────────────────────────────────────────────────────────────────────────────── */
.dash--roles{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
.dash--roles .card{margin-bottom:16px}
#role-edit:empty{display:none}
.act--flat{margin:0;padding:0;border:0}
.act input:not([type]),.act input[type=email]{width:100%}
.toggles{display:flex;flex-direction:column;border-radius:16px;background:var(--bg-2);padding:4px 14px}
.toggle{position:relative;display:flex!important;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid var(--line);cursor:pointer;color:var(--ink)!important;font-size:15px!important}
.toggle:first-child{border-top:0}
.toggle__txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.toggle__txt b{font-weight:500}.toggle__txt span{color:var(--muted);font-size:13px}
.toggle input{position:absolute;opacity:0;width:1px;height:1px}
.toggle__sw{flex:none;position:relative;width:46px;height:28px;border-radius:var(--pill);background:var(--surface-3);transition:background .2s var(--ease)}
.toggle__sw::after{content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.4);transition:transform .2s var(--ease)}
.toggle input:checked+.toggle__sw{background:var(--red)}
.toggle input:checked+.toggle__sw::after{transform:translateX(18px)}
.toggle input:focus-visible+.toggle__sw{outline:2px solid var(--red);outline-offset:2px}
.toggle--off{cursor:not-allowed}.toggle--off .toggle__sw{opacity:.45}
@media (max-width:1180px){.dash--roles{grid-template-columns:1fr}}

/* ── the Zuger Store for staff ───────────────────────────────────────────────────────────────────────────────── */
.review{margin:0 0 14px;display:flex;flex-direction:column;gap:12px}
.review__top{display:flex;align-items:center;gap:14px;min-width:0}
.review__main{display:flex;flex-direction:column;min-width:0;flex:1}
.review__main b{font-size:16px;font-weight:600}.review__main span{color:var(--muted);font-size:13px}
.review__text{margin:0;font-size:15px;line-height:1.5;overflow-wrap:anywhere}
.stars{color:#FBBF24;letter-spacing:1px;margin-right:6px}.stars i{font-style:normal;color:var(--surface-3)}
.review__reports{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-radius:14px;background:var(--bg-2);font-size:14px}
.review__reports span{color:var(--ink-2)}
.review__act{display:flex;flex-wrap:wrap;gap:8px}
.review__act input{flex:1 1 240px;border-radius:var(--pill);padding:10px 16px}
.pill--warn{background:rgba(245,158,11,.16);color:#FBBF24}
.chart-caption{margin-top:22px;font-size:15px}

/* ── the way in: one screen, nothing scrolls ──────────────────────────────────────────────────────────────────── */
body:not(.is-in){height:100vh;height:100dvh;overflow:hidden}
body:not(.is-in) main{height:100%;max-width:1200px;margin:0 auto;padding:0 clamp(16px,4vw,40px);display:flex;align-items:center}
body:not(.is-in) .gate{width:100%;height:100%;min-height:0;max-height:100%;margin:0}
body:not(.is-in) .gate__art{height:min(520px,72dvh)}
@media (max-height:720px) and (min-width:901px){
  body:not(.is-in) .gate__brand{margin-bottom:18px}
  body:not(.is-in) .gate h1{font-size:clamp(34px,4.4vw,50px)}
  body:not(.is-in) .gate__lead{margin-top:14px}
  body:not(.is-in) .gate__acts{margin-top:22px}
}
@media (max-width:900px){
  body:not(.is-in) main{align-items:stretch;padding:0 16px}
  body:not(.is-in) .gate{display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:0;padding:max(12px,env(safe-area-inset-top)) 0 max(16px,env(safe-area-inset-bottom))}
  body:not(.is-in) .gate__art{flex:0 1 auto;height:min(34dvh,300px);min-height:0;margin:0 0 6px;overflow:visible}
  /* both glass cards whole, inside the screen: inset from the edges, their skewed corners clear of the bottom */
  body:not(.is-in) .gate__plane{border-radius:18px}
  body:not(.is-in) .gate__plane--a{left:3%;right:43%;top:34%;bottom:18%;height:auto}
  body:not(.is-in) .gate__plane--b{left:35%;right:3%;top:40%;bottom:8%;height:auto}
  body:not(.is-in) .gate__art::before{width:min(34dvh,300px);height:min(34dvh,300px)}
  body:not(.is-in) .gate__ball{width:min(22dvh,180px)}
  body:not(.is-in) .gate__brand{margin:0 0 14px}
  body:not(.is-in) .gate__brand .bot--brand{width:46px;height:46px}
  body:not(.is-in) .gate__brand .wm-svg,body:not(.is-in) .gate__brand .ops-svg{height:17px}
  body:not(.is-in) .gate__eyebrow{margin-bottom:10px}
  body:not(.is-in) .gate h1{font-size:clamp(28px,8vw,40px)}
  body:not(.is-in) .gate__lead{margin-top:12px;font-size:15px}
  body:not(.is-in) .gate__acts{margin-top:20px;gap:10px}
}
/* a short phone: the lockup's ball is enough; the big one goes */
@media (max-width:900px) and (max-height:700px){ body:not(.is-in) .gate__art{display:none} }
.gate__link{margin-top:18px;padding:0;border:0;background:none;color:var(--muted);font:14px var(--sans);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.gate__link:hover{color:var(--ink)}
.gate__enroll{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.gate__enroll input{flex:1 1 220px;border-radius:var(--pill);padding:11px 16px;background:var(--surface)}