/* GBR Suite UI. Design tokens and components generated by tools/port-design/port.py; live layout rules follow. */
:root{
  --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#F7F7F4; --line:#E3E3DE; --line-strong:#000000; --edge:#000000;
  --ink:#000000; --ink-2:#2E2E2B; --ink-3:#5E5E58;
  --violet:#000000; --violet-deep:#2B2B28; --violet-tint:#F2C94C; --violet-text:#000000; --on-violet:#FFFFFF;
  --yellow:#F2C94C; --orange:#E5562B; --green:#2B9A5A; --sky:#2E8FD3;
  --mint:#2B9A5A; --mint-tint:#5DBB82; --mint-text:#000000;
  --tan:#F2C94C; --tan-tint:#F2C94C; --tan-text:#000000;
  --rose:#E5562B; --rose-tint:#E5562B; --rose-text:#000000; --err:#C13A14;
  --side:#F2C94C; --side-ink:#000000; --side-ink-2:rgba(0,0,0,.66); --side-hover:rgba(0,0,0,.08);
  --side-active:#000000; --side-active-ink:#FFFFFF; --side-line:rgba(0,0,0,.22);
  --star:#000000; --star-empty:#D6D6D0;
  --c1:#E5562B; --c2:#2B9A5A; --c3:#2E8FD3; --grid:#ECECE8; --muted-bar:#D6D6D0; --line1:#000000; --area1:#F2C94C;
  --h-n2:#E5562B; --h-n1:#F4AE96; --h-0:#EEEEEA; --h-p1:#A3D7B6; --h-p2:#2B9A5A;
  --h-n2-ink:#000000; --h-p2-ink:#000000;
  --canvas:#C9D3DA; --canvas-ink:#000000; --skel:#ECECE8; --skel-hi:#F7F7F4;
  --focus:0 0 0 3px #FFFFFF, 0 0 0 6px #000000;
  --radius-xl:0px; --radius-l:0px; --radius-m:0px; --radius-s:0px;
  --f-display:"Inter Tight", "Inter", system-ui, sans-serif;
  --f-body:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#000000; --surface:#141413; --surface-2:#1C1C1A; --line:#2E2E2B; --line-strong:#F2F2EE; --edge:#F2F2EE;
  --ink:#FFFFFF; --ink-2:#D9D9D3; --ink-3:#A6A69E;
  --violet:#F2C94C; --violet-deep:#FFD866; --violet-tint:#F2C94C; --violet-text:#000000; --on-violet:#000000;
  --yellow:#F2C94C; --orange:#E5562B; --green:#2B9A5A; --sky:#2E8FD3;
  --mint:#2B9A5A; --mint-tint:#5DBB82; --mint-text:#000000;
  --tan:#F2C94C; --tan-tint:#F2C94C; --tan-text:#000000;
  --rose:#E5562B; --rose-tint:#E5562B; --rose-text:#000000; --err:#FF8A63;
  --side:#F2C94C; --side-ink:#000000; --side-ink-2:rgba(0,0,0,.66); --side-hover:rgba(0,0,0,.08);
  --side-active:#000000; --side-active-ink:#FFFFFF; --side-line:rgba(0,0,0,.22);
  --star:#F2C94C; --star-empty:#3A3A36;
  --c1:#E5562B; --c2:#2B9A5A; --c3:#2E8FD3; --grid:#262624; --muted-bar:#3A3A36; --line1:#F2C94C; --area1:#2A2410;
  --h-n2:#E5562B; --h-n1:#7A3520; --h-0:#2A2A27; --h-p1:#1F5236; --h-p2:#2B9A5A;
  --h-n2-ink:#000000; --h-p2-ink:#000000;
  --posted-bg:#FFFFFF; --posted-ink:#000000;
  --canvas:#262B2F; --canvas-ink:#FFFFFF; --skel:#242422; --skel-hi:#30302D;
  --focus:0 0 0 3px #000000, 0 0 0 6px #F2C94C;
  color-scheme: dark;
}}
:root[data-theme="dark"]{
  --bg:#000000; --surface:#141413; --surface-2:#1C1C1A; --line:#2E2E2B; --line-strong:#F2F2EE; --edge:#F2F2EE;
  --ink:#FFFFFF; --ink-2:#D9D9D3; --ink-3:#A6A69E;
  --violet:#F2C94C; --violet-deep:#FFD866; --violet-tint:#F2C94C; --violet-text:#000000; --on-violet:#000000;
  --yellow:#F2C94C; --orange:#E5562B; --green:#2B9A5A; --sky:#2E8FD3;
  --mint:#2B9A5A; --mint-tint:#5DBB82; --mint-text:#000000;
  --tan:#F2C94C; --tan-tint:#F2C94C; --tan-text:#000000;
  --rose:#E5562B; --rose-tint:#E5562B; --rose-text:#000000; --err:#FF8A63;
  --side:#F2C94C; --side-ink:#000000; --side-ink-2:rgba(0,0,0,.66); --side-hover:rgba(0,0,0,.08);
  --side-active:#000000; --side-active-ink:#FFFFFF; --side-line:rgba(0,0,0,.22);
  --star:#F2C94C; --star-empty:#3A3A36;
  --c1:#E5562B; --c2:#2B9A5A; --c3:#2E8FD3; --grid:#262624; --muted-bar:#3A3A36; --line1:#F2C94C; --area1:#2A2410;
  --h-n2:#E5562B; --h-n1:#7A3520; --h-0:#2A2A27; --h-p1:#1F5236; --h-p2:#2B9A5A;
  --h-n2-ink:#000000; --h-p2-ink:#000000;
  --posted-bg:#FFFFFF; --posted-ink:#000000;
  --canvas:#262B2F; --canvas-ink:#FFFFFF; --skel:#242422; --skel-hi:#30302D;
  --focus:0 0 0 3px #000000, 0 0 0 6px #F2C94C;
  color-scheme: dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5{font-family:var(--f-display);margin:0;line-height:1.12;letter-spacing:-.015em;font-weight:700;color:var(--ink)}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit}
svg{display:block}
.sr{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;width:1px;overflow:hidden;white-space:nowrap;margin:-1px}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:10px}
.ico{width:22px;height:22px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ico-s{width:18px;height:18px}


.cv-bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:14px 24px;background:var(--surface);border-bottom:1.5px solid var(--line)}
.cv-bar .brand{display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-weight:800;font-size:22px;text-decoration:none}
.cv-bar .brand small{font-family:var(--f-body);font-weight:500;font-size:15px;color:var(--ink-3);margin-left:6px}
.cv-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-left:auto}
.cv-tools select{font:inherit;font-size:15px;height:42px;border-radius:12px;border:1.5px solid var(--line-strong);background:var(--surface);color:var(--ink);padding:0 12px}
.seg{display:inline-flex;background:var(--surface-2);border:1.5px solid var(--line);border-radius:14px;padding:4px;gap:4px}
.seg button{font:inherit;font-size:15px;font-weight:600;border:0;background:transparent;color:var(--ink-2);padding:8px 14px;border-radius:10px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--violet);color:var(--on-violet)}
.cv-scroll{overflow-x:auto;overflow-y:visible;padding:40px 24px 120px}
.cv-board{display:flex;flex-direction:column;gap:96px;width:max-content;margin:0 auto}
.cv-board.grid{flex-direction:row;flex-wrap:wrap;width:4560px;gap:120px 96px}
.cv-item{display:flex;flex-direction:column;gap:18px;width:1440px}
.cv-item.phone-row{width:1440px}
.cv-label{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;color:var(--canvas-ink)}
.cv-label .code{font-family:var(--f-display);font-weight:800;font-size:28px;background:var(--canvas-ink);color:var(--canvas);border-radius:12px;padding:2px 12px}
.cv-label h2{font-size:32px;color:var(--canvas-ink)}
.cv-label .role{font-size:17px;font-weight:600;opacity:.8}
.cv-label .note{flex-basis:100%;font-size:16px;opacity:.85;max-width:72ch}


.frame{width:1440px;background:var(--bg);overflow:hidden;border-radius:6px;box-shadow:0 30px 60px -30px rgba(28,20,51,.45)}
.frame.public{background:var(--surface)}


.app{display:flex;min-height:940px}
.side{flex:0 0 240px;background:var(--side);color:var(--side-ink);display:flex;flex-direction:column;gap:6px;padding:26px 16px 22px}
.side .logo{display:flex;align-items:center;gap:10px;padding:0 10px 18px;font-family:var(--f-display);font-weight:800;font-size:26px;letter-spacing:-.03em}
.ws-switch{display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;background:var(--side-hover);margin-bottom:14px;text-decoration:none}
.ws-switch .ws-av{width:40px;height:40px;border-radius:12px;background:#FFD7B5;color:#5A2A00;display:flex;align-items:center;justify-content:center;font-family:var(--f-display);font-weight:800;font-size:18px}
.ws-switch strong{display:block;font-size:16px;line-height:1.2}
.ws-switch span{font-size:14px;color:var(--side-ink-2)}
.ws-switch .ico{margin-left:auto}
.nav-group{display:flex;flex-direction:column;gap:2px}
.nav-group + .nav-group{margin-top:12px;padding-top:14px;border-top:1px solid var(--side-line)}
.nav-title{font-size:14px;font-weight:600;color:var(--side-ink-2);padding:0 12px 6px}
.nav a{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:13px;text-decoration:none;font-weight:600;font-size:17px;color:var(--side-ink)}
.nav a:hover{background:var(--side-hover)}
.nav a[aria-current="page"]{background:var(--side-active);color:var(--side-active-ink)}
.nav .badge{margin-left:auto;background:var(--tan);color:#2A1300;font-size:13px;font-weight:700;border-radius:999px;padding:1px 9px}
.nav a[aria-current="page"] .badge{background:var(--violet);color:var(--on-violet)}
.side-foot{margin-top:auto;display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;background:var(--side-hover)}
.side-foot strong{display:block;font-size:15px;line-height:1.2}
.side-foot span{font-size:13px;color:var(--side-ink-2)}

.main{flex:0 0 1200px;width:1200px;display:flex;flex-direction:column;min-width:0}
.top{display:flex;align-items:center;gap:16px;padding:18px 48px;background:var(--surface);border-bottom:1.5px solid var(--line)}
.search{display:flex;align-items:center;gap:10px;flex:1;max-width:420px;height:48px;border-radius:14px;background:var(--surface-2);border:1.5px solid var(--line);padding:0 14px;color:var(--ink-3);font-size:16px}
.top-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.sync{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--ink-3)}
.icon-btn{position:relative;width:46px;height:46px;border-radius:14px;border:1.5px solid var(--line);display:inline-flex;align-items:center;justify-content:center;background:var(--surface);color:var(--ink);text-decoration:none}
.icon-btn .dotn{margin:-22px -10px 0 -6px;background:var(--rose);color:#fff;font-size:12px;font-weight:700;border-radius:999px;padding:0 6px;line-height:18px}
.content{padding:40px 48px 56px;display:flex;flex-direction:column;gap:28px}
.page-head{display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap}
.page-head h1{font-size:46px;font-weight:800;letter-spacing:-.03em}
.page-head p{color:var(--ink-2);font-size:18px;margin-top:6px;max-width:62ch}
.page-head .actions{margin-left:auto;display:flex;gap:12px;flex-wrap:wrap;align-items:center}


.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--violet);color:var(--on-violet);font-weight:700;font-size:17px;padding:14px 22px;border-radius:var(--radius-m);text-decoration:none;border:1.5px solid transparent;white-space:nowrap;line-height:1.2}
.btn:hover{background:var(--violet-deep)}
.btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--line-strong)}
.btn-ghost:hover{background:var(--surface-2)}
.btn-soft{background:var(--violet-tint);color:var(--violet-text)}
.btn-soft:hover{background:var(--violet-tint)}
.btn-danger{background:var(--rose);color:#fff}
.btn-danger:hover{background:var(--rose)}
.btn-danger-ghost{background:transparent;color:var(--rose-text);border-color:var(--rose)}
.btn-mint{background:var(--mint);color:#04251B}
.btn-mint:hover{background:var(--mint)}
.btn-sm{font-size:15px;padding:9px 14px;border-radius:12px}
.btn-lg{font-size:19px;padding:18px 28px;border-radius:16px}
.btn-block{width:100%}
.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
.link{color:var(--violet-text);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}

.chip{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;line-height:1;padding:7px 12px;border-radius:999px;background:var(--surface-2);color:var(--ink-2);border:1.5px solid var(--line);white-space:nowrap}
.chip .ico{width:15px;height:15px;stroke-width:2.4}
.chip-violet{background:var(--violet-tint);color:var(--violet-text);border-color:transparent}
.chip-mint{background:var(--mint-tint);color:var(--mint-text);border-color:transparent}
.chip-tan{background:var(--tan-tint);color:var(--tan-text);border-color:transparent}
.chip-rose{background:var(--rose-tint);color:var(--rose-text);border-color:transparent}
.chip-solid{background:var(--violet);color:var(--on-violet);border-color:transparent}
.chips{display:flex;flex-wrap:wrap;gap:8px}

.card{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--radius-l);padding:28px}
.card-tint{background:var(--violet-tint);border-color:transparent}
.card h2{font-size:24px}
.card h3{font-size:20px}
.card-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.card-head .right{margin-left:auto;display:flex;gap:10px;align-items:center}
.muted{color:var(--ink-3)}
.small{font-size:15px}
.xs{font-size:14px}
.strong{font-weight:700}
.stack{display:flex;flex-direction:column;gap:16px}
.stack-s{display:flex;flex-direction:column;gap:8px}
.stack-l{display:flex;flex-direction:column;gap:24px}
.row{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.row-top{display:flex;gap:24px;align-items:flex-start}
.spread{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.g6{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.split{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:24px;align-items:start}
.split-r{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:24px;align-items:start}
.hr{height:1.5px;background:var(--line);border:0;margin:4px 0}


.field{display:flex;flex-direction:column;gap:8px}
.field label,.label{font-weight:600;font-size:16px;color:var(--ink)}
.field .hint{font-size:14px;color:var(--ink-3)}
.field .err{font-size:14px;color:var(--rose-text);font-weight:600;display:flex;gap:6px;align-items:center}
.input,.select,.textarea{font:inherit;font-size:17px;color:var(--ink);background:var(--surface);border:1.5px solid var(--line-strong);border-radius:var(--radius-m);min-height:54px;padding:0 16px;width:100%}
.textarea{padding:14px 16px;min-height:120px;resize:vertical;line-height:1.5}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 4px var(--violet-tint)}
.input.is-err{border-color:var(--rose);box-shadow:0 0 0 4px var(--rose-tint)}
.select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);background-position:calc(100% - 22px) 52%,calc(100% - 16px) 52%;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px}
.check{display:flex;gap:12px;align-items:flex-start;font-size:16px;cursor:pointer}
.check input{width:22px;height:22px;margin:2px 0 0;accent-color:var(--violet);flex:0 0 auto}
.switch{appearance:none;-webkit-appearance:none;width:54px;height:32px;border-radius:999px;margin:0;flex:0 0 auto;cursor:pointer;background:radial-gradient(circle at 16px 50%,#FFFFFF 11px,transparent 12px) var(--line-strong);transition:background-color .15s}
.switch:checked{background:radial-gradient(circle at 38px 50%,#FFFFFF 11px,transparent 12px) var(--violet)}
.switch:disabled{opacity:.5}
.toggle-row{display:flex;align-items:center;gap:16px;padding:16px 0;border-bottom:1.5px solid var(--line)}
.toggle-row:last-child{border-bottom:0}
.toggle-row .t{flex:1}
.toggle-row .t strong{display:block;font-size:17px}
.toggle-row .t span{font-size:15px;color:var(--ink-3)}
.seg-f{display:inline-flex;border:1.5px solid var(--line-strong);border-radius:var(--radius-m);overflow:hidden}
.seg-f label{display:flex}
.seg-f input{appearance:none;margin:0;width:0;height:0}
.seg-f span{padding:12px 16px;font-weight:600;font-size:15px;cursor:pointer;color:var(--ink-2);border-right:1.5px solid var(--line-strong);background:var(--surface)}
.seg-f label:last-child span{border-right:0}
.seg-f input:checked + span{background:var(--violet);color:var(--on-violet)}
.seg-f input:focus-visible + span{box-shadow:inset 0 0 0 3px var(--violet-tint)}
input[type=range]{width:100%;accent-color:var(--violet)}


.tbl{width:100%;border-collapse:collapse;font-size:16px}
.tbl th{text-align:left;font-weight:600;font-size:14px;color:var(--ink-3);padding:0 14px 12px;border-bottom:1.5px solid var(--line)}
.tbl td{padding:16px 14px;border-bottom:1.5px solid var(--line);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums}
.tbl .who{display:flex;align-items:center;gap:12px}
.tbl strong{font-weight:700}


.av{width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;flex:0 0 auto;background:var(--violet-tint);color:var(--violet-text)}
.av.a2{background:var(--mint-tint);color:var(--mint-text)}
.av.a3{background:var(--tan-tint);color:var(--tan-text)}
.av.a4{background:var(--rose-tint);color:var(--rose-text)}
.stars{display:inline-flex;gap:2px;align-items:center}
.stars svg{width:20px;height:20px;fill:var(--star-empty)}
.stars svg.on{fill:var(--star)}
.stars.lg svg{width:26px;height:26px}


.kpi{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--radius-l);padding:22px 22px 20px;display:flex;flex-direction:column;gap:6px}
.kpi .k-label{font-size:15px;font-weight:600;color:var(--ink-2)}
.kpi .k-value{font-family:var(--f-display);font-weight:700;font-size:40px;letter-spacing:-.03em;line-height:1.05;font-variant-numeric:tabular-nums}
.kpi .k-value small{font-size:20px;font-weight:600;color:var(--ink-3);margin-left:2px}
.delta{display:inline-flex;align-items:center;gap:4px;font-size:14px;font-weight:700;border-radius:8px;padding:3px 8px;width:max-content}
.delta.up{background:var(--mint-tint);color:var(--mint-text)}
.delta.down{background:var(--rose-tint);color:var(--rose-text)}
.delta.flat{background:var(--surface-2);color:var(--ink-3)}
.kpi.feature{background:var(--violet);border-color:transparent;color:var(--on-violet)}
.kpi.feature .k-label{color:rgba(255,255,255,.82)}
.kpi.feature .delta.up{background:rgba(255,255,255,.18);color:#FFFFFF}


.alert{display:flex;gap:16px;align-items:center;padding:16px 20px;border-radius:18px;font-size:16px;border:1.5px solid transparent}
.alert .ico{width:24px;height:24px}
.alert strong{font-weight:700}
.alert .actions{margin-left:auto;display:flex;gap:10px}
.alert-rose{background:var(--rose-tint);color:var(--rose-text)}
.alert-tan{background:var(--tan-tint);color:var(--tan-text)}
.alert-violet{background:var(--violet-tint);color:var(--violet-text)}
.alert-mint{background:var(--mint-tint);color:var(--mint-text)}
.alert-solid{background:var(--ink);color:var(--surface)}
.alerts{display:flex;flex-direction:column;gap:10px}


.tabs{display:flex;gap:6px;border-bottom:1.5px solid var(--line);flex-wrap:wrap}
.tabs button,.tabs a{font:inherit;font-weight:600;font-size:17px;background:none;border:0;padding:12px 16px;color:var(--ink-3);cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-1.5px;text-decoration:none;display:inline-flex;gap:8px;align-items:center}
.tabs [aria-selected="true"],.tabs [aria-current="page"]{color:var(--ink);border-bottom-color:var(--violet)}
.tabs .count{font-size:13px;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:0 8px}
.pill-tabs{display:inline-flex;gap:6px;flex-wrap:wrap}
.pill-tabs button{font:inherit;font-size:15px;font-weight:600;padding:9px 16px;border-radius:999px;border:1.5px solid var(--line-strong);background:var(--surface);color:var(--ink-2);cursor:pointer}
.pill-tabs button[aria-selected="true"]{background:var(--ink);color:var(--surface);border-color:var(--ink)}
[hidden]{display:none !important}


.filters{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.filters .select{width:auto;min-height:46px;font-size:15px;font-weight:600;border-radius:12px}


.convo{display:flex;flex-direction:column;gap:10px}
.bubble{background:var(--surface-2);border:1.5px solid var(--line);border-radius:24px 24px 24px 6px;padding:18px 22px;max-width:92%}
.bubble .who{display:flex;align-items:center;gap:12px;margin-bottom:10px;flex-wrap:wrap}
.bubble .who strong{font-size:17px}
.bubble .who .muted{font-size:15px}
.bubble p{font-size:17px;line-height:1.55}
.reply{align-self:flex-end;max-width:88%;background:var(--violet);color:var(--on-violet);border-radius:24px 24px 6px 24px;padding:18px 22px}
.reply .r-head{display:flex;gap:10px;align-items:center;font-size:14px;font-weight:700;margin-bottom:8px;opacity:.9;flex-wrap:wrap}
.reply p{font-size:17px}
.reply.draft{background:var(--violet-tint);color:var(--ink);border:2px dashed var(--violet)}
.reply.draft .r-head{color:var(--violet-text);opacity:1}
.reply.failed{background:var(--surface);color:var(--ink);border:2px solid var(--rose)}
.reply.failed .r-head{color:var(--rose-text);opacity:1}
.reply.none{background:transparent;border:2px dashed var(--line-strong);color:var(--ink-3)}
.reply.none .r-head{opacity:1}
.rcard{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--radius-xl);padding:24px;display:flex;flex-direction:column;gap:16px}
.rcard-head{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.rcard-head .right{margin-left:auto;display:flex;gap:8px;align-items:center}
.rcard-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding-top:16px;border-top:1.5px solid var(--line)}
.rcard-actions .right{margin-left:auto;display:flex;gap:10px}
.rcard.sel{border-color:var(--violet);box-shadow:0 0 0 3px var(--violet-tint)}


.states{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.states.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.state{background:var(--surface);border:1.5px dashed var(--line-strong);border-radius:var(--radius-l);padding:28px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.state .s-tag{font-size:13px;font-weight:700;color:var(--ink-3)}
.state h3{font-size:21px}
.state p{font-size:15px;color:var(--ink-2)}
.state .s-ico{width:56px;height:56px;border-radius:18px;display:flex;align-items:center;justify-content:center;background:var(--violet-tint);color:var(--violet-text)}
.state .s-ico.rose{background:var(--rose-tint);color:var(--rose-text)}
.state .s-ico.tan{background:var(--tan-tint);color:var(--tan-text)}
.state .s-ico .ico{width:28px;height:28px}
.states-head{display:flex;align-items:baseline;gap:12px}
.states-head h2{font-size:22px}
.sk{background:linear-gradient(90deg,var(--skel) 0%,var(--skel-hi) 50%,var(--skel) 100%);background-size:200% 100%;border-radius:10px;height:16px;animation:sk 1.4s linear infinite}
.sk.h40{height:40px}.sk.h24{height:24px}.sk.h80{height:80px}.sk.h120{height:120px}
.sk.w30{width:30%}.sk.w50{width:50%}.sk.w70{width:70%}.sk.w90{width:90%}
@keyframes sk{0%{background-position:100% 0}100%{background-position:-100% 0}}
@media (prefers-reduced-motion:reduce){.sk{animation:none}*{transition:none !important}}


progress{appearance:none;-webkit-appearance:none;width:100%;height:12px;border:0;border-radius:999px;background:var(--surface-2);overflow:hidden}
progress::-webkit-progress-bar{background:var(--line);border-radius:999px}
progress::-webkit-progress-value{background:var(--violet);border-radius:999px}
progress::-moz-progress-bar{background:var(--violet);border-radius:999px}
progress.warn::-webkit-progress-value{background:var(--tan)}
progress.warn::-moz-progress-bar{background:var(--tan)}
progress.over::-webkit-progress-value{background:var(--rose)}
progress.over::-moz-progress-bar{background:var(--rose)}
progress.ok::-webkit-progress-value{background:var(--mint)}
progress.ok::-moz-progress-bar{background:var(--mint)}
.meter{display:flex;flex-direction:column;gap:8px}
.meter .spread{font-size:16px}
.meter .v{font-weight:700;font-variant-numeric:tabular-nums}


.chart{width:100%;height:auto;overflow:visible}
.chart text{font-family:var(--f-body);font-size:13px;fill:var(--ink-3)}
.chart .lbl{fill:var(--ink);font-weight:700;font-size:14px}
.chart .grid{stroke:var(--grid);stroke-width:1}
.chart .axis{stroke:var(--line-strong);stroke-width:1.5}
.chart .s1{fill:var(--c1)}.chart .s2{fill:var(--c2)}.chart .s3{fill:var(--c3)}.chart .sm{fill:var(--muted-bar)}
.chart .l1{stroke:var(--c1);stroke-width:3;fill:none;stroke-linejoin:round;stroke-linecap:round}
.chart .a1{fill:var(--violet-tint);opacity:.7}
.chart .dot1{fill:var(--c1);stroke:var(--surface);stroke-width:2.5}
.chart rect:hover,.chart path.bar:hover,.chart circle:hover{opacity:.85}
.legend{display:flex;gap:18px;flex-wrap:wrap;font-size:14px;color:var(--ink-2);font-weight:600}
.legend span{display:inline-flex;align-items:center;gap:8px}
.legend i{width:12px;height:12px;border-radius:4px;display:inline-block}
.legend .k1{background:var(--c1)}.legend .k2{background:var(--c2)}.legend .k3{background:var(--c3)}.legend .km{background:var(--muted-bar)}
.heat{width:100%;border-collapse:separate;border-spacing:3px;font-size:14px}
.heat th{font-weight:600;color:var(--ink-3);text-align:left;padding:4px 8px;font-size:13px}
.heat th.c{text-align:center}
.heat td{text-align:center;padding:9px 4px;border-radius:7px;font-weight:700;font-variant-numeric:tabular-nums;font-size:13px}
.heat .n2{background:var(--h-n2);color:var(--h-n2-ink)}.heat .n1{background:var(--h-n1);color:var(--ink)}.heat .z{background:var(--h-0);color:var(--ink-2)}.heat .p1{background:var(--h-p1);color:var(--ink)}.heat .p2{background:var(--h-p2);color:var(--h-p2-ink)}
.heat-key{display:flex;align-items:center;gap:4px;font-size:13px;color:var(--ink-3);font-weight:600}
.heat-key i{width:28px;height:12px;border-radius:4px;display:inline-block}
.heat-key .n2{background:var(--h-n2)}.heat-key .n1{background:var(--h-n1)}.heat-key .z{background:var(--h-0)}.heat-key .p1{background:var(--h-p1)}.heat-key .p2{background:var(--h-p2)}


.stepper{display:flex;gap:10px;counter-reset:st}
.stepper li{flex:1;display:flex;gap:12px;align-items:center;padding:14px 16px;border-radius:16px;background:var(--surface);border:1.5px solid var(--line);font-weight:600;font-size:16px;color:var(--ink-3)}
.stepper .n{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--f-display);font-weight:800;background:var(--surface-2);border:1.5px solid var(--line-strong);flex:0 0 auto}
.stepper .done{color:var(--ink)}
.stepper .done .n{background:var(--mint);border-color:var(--mint);color:#04251B}
.stepper .cur{border-color:var(--violet);color:var(--ink);box-shadow:0 0 0 3px var(--violet-tint)}
.stepper .cur .n{background:var(--violet);border-color:var(--violet);color:var(--on-violet)}


.opt{display:flex;gap:16px;align-items:center;padding:18px 20px;border:1.5px solid var(--line);border-radius:18px;background:var(--surface);cursor:pointer}
.opt input{width:24px;height:24px;accent-color:var(--violet);margin:0}
.opt.on{border-color:var(--violet);background:var(--violet-tint)}
.opt.dis{opacity:.55;cursor:not-allowed}
.opt .t{flex:1}
.opt .t strong{display:block;font-size:17px}
.opt .t span{font-size:15px;color:var(--ink-3)}


.kv{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:12px 20px;font-size:16px}
.kv dt{color:var(--ink-3);font-weight:600}
.kv dd{margin:0;font-weight:600}
dl{margin:0}


.dialog{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--radius-xl);padding:32px;box-shadow:0 24px 48px -24px rgba(28,20,51,.4);display:flex;flex-direction:column;gap:18px}
.dialog h3{font-size:26px}
.scrim{background:rgba(28,20,51,.55);border-radius:var(--radius-l);padding:40px;display:flex;justify-content:center}


.pub-top{display:flex;align-items:center;gap:16px;padding:24px 0}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 48px}
.pub-hero{background:var(--violet);color:var(--on-violet)}
.pub-hero h1,.pub-hero h2{color:var(--on-violet)}


.auth{display:flex;min-height:900px}
.auth-brand{flex:0 0 46%;background:var(--violet);color:var(--on-violet);padding:56px 64px;display:flex;flex-direction:column;gap:40px}
.auth-brand h1{color:#fff;font-size:68px;font-weight:800;letter-spacing:-.04em;line-height:1}
.auth-brand p{font-size:20px;color:rgba(255,255,255,.85);max-width:30ch}
.auth-brand .bubble{background:#FFFFFF;border-color:transparent;color:#1C1433}
.auth-brand .bubble .muted{color:#6B6485}
.auth-brand .reply{background:#1C1433;color:#FFFFFF}
.auth-form{flex:1;padding:56px 72px;display:flex;flex-direction:column;gap:28px;justify-content:center;background:var(--surface)}
.auth-form .form{display:flex;flex-direction:column;gap:20px;max-width:480px}
.auth-form h2{font-size:40px;font-weight:800;letter-spacing:-.03em}


.dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex:0 0 auto}
.dot.ok{background:var(--mint)}.dot.warn{background:var(--tan)}.dot.bad{background:var(--rose)}.dot.off{background:var(--line-strong)}
.qr{background:#FFFFFF;border-radius:20px;padding:18px;width:max-content}
.qr svg{width:200px;height:200px}
.code-box{display:flex;align-items:center;gap:12px;background:var(--surface-2);border:1.5px solid var(--line);border-radius:14px;padding:12px 12px 12px 18px;font-weight:600;font-size:17px}
.code-box span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.policy{background:var(--ink);color:var(--surface);border-radius:var(--radius-l);padding:28px}
.policy h3{color:var(--surface);font-size:22px}
.policy li{display:flex;gap:10px;align-items:flex-start;font-size:16px;padding:6px 0}
.policy .ico{color:var(--tan);margin-top:2px}
.list-rows > li{display:flex;align-items:center;gap:16px;padding:16px 0;border-bottom:1.5px solid var(--line)}
.list-rows > li:last-child{border-bottom:0}
.list-rows .t{flex:1;min-width:0}
.list-rows .t strong{display:block;font-size:17px}
.list-rows .t span{font-size:15px;color:var(--ink-3)}
.notif{display:flex;gap:18px;align-items:flex-start;padding:20px 22px;border-radius:20px;background:var(--surface);border:1.5px solid var(--line)}
.notif.unread{border-color:var(--violet);box-shadow:inset 6px 0 0 var(--violet)}
.notif .n-ico{width:48px;height:48px;border-radius:15px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.notif .t{flex:1}
.notif .t strong{display:block;font-size:18px}
.notif .t p{font-size:16px;color:var(--ink-2);margin-top:4px}
.notif .when{font-size:14px;color:var(--ink-3);white-space:nowrap}
.n-rose{background:var(--rose-tint);color:var(--rose-text)}.n-tan{background:var(--tan-tint);color:var(--tan-text)}.n-mint{background:var(--mint-tint);color:var(--mint-text)}.n-violet{background:var(--violet-tint);color:var(--violet-text)}
.preview-pane{background:var(--surface-2);border:1.5px solid var(--line);border-radius:var(--radius-xl);padding:24px;display:flex;flex-direction:column;gap:16px}
.banner-imp{display:flex;align-items:center;gap:12px;background:var(--tan);color:#2A1300;padding:10px 48px;font-weight:700;font-size:15px}
.score{display:flex;align-items:center;gap:28px}
.score svg{width:180px;height:180px}
.score .big{font-family:var(--f-display);font-weight:800}
.danger-zone{border:2px solid var(--rose);border-radius:var(--radius-l);padding:28px;background:var(--surface)}
.danger-zone h2{color:var(--rose-text)}


.ds{background:var(--surface);padding:64px 120px;display:flex;flex-direction:column;gap:48px}
.ds h1{font-size:72px;font-weight:800;letter-spacing:-.04em;line-height:1}
.ds .lede{font-size:21px;color:var(--ink-2);max-width:60ch;margin-top:16px}
.ds h2{font-size:30px}
.sw{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.sw li{display:flex;flex-direction:column;gap:10px}
.sw .chipc{height:120px;border-radius:20px;border:1.5px solid var(--line)}
.sw strong{font-size:17px}
.sw span{font-size:14px;color:var(--ink-3)}
.c-violet{background:#5536F0}.c-ink{background:#1C1433}.c-paper{background:#F4F3FA}.c-mint{background:#17B88C}.c-tan{background:#F27A1A}.c-rose{background:#E8385B}
.c-violet-d{background:#2A1C7A}.c-ink-d{background:#130E26}.c-surface-d{background:#1D1734}.c-mint-d{background:#1FAE82}.c-tan-d{background:#D66E22}.c-rose-d{background:#E04A68}
.type-row{display:flex;align-items:baseline;gap:32px;padding:14px 0;border-bottom:1.5px solid var(--line)}
.type-row .spec{flex:0 0 220px;font-size:15px;color:var(--ink-3);font-weight:600}
.logo-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.logo-tile{border-radius:24px;padding:40px;display:flex;align-items:center;gap:16px;min-height:180px;font-family:var(--f-display);font-weight:800;font-size:44px;letter-spacing:-.04em}
.logo-tile.on-violet{background:#5536F0;color:#FFFFFF}
.logo-tile.on-paper{background:#F4F3FA;color:#1C1433;border:1.5px solid #E2DEF0}
.logo-tile.on-ink{background:#1C1433;color:#FFFFFF}
.logo-tile svg{width:72px;height:72px}


.phones{display:flex;gap:56px;justify-content:center;padding:56px;background:var(--surface-2);border-radius:6px}
.phone{width:390px;height:844px;border-radius:48px;border:10px solid #1C1433;background:var(--bg);overflow:hidden;display:flex;flex-direction:column}
.phone .p-top{display:flex;align-items:center;gap:10px;padding:18px 20px 12px;background:var(--surface);border-bottom:1.5px solid var(--line)}
.phone .p-body{flex:1;overflow:hidden;padding:18px;display:flex;flex-direction:column;gap:14px}
.phone .p-body h1{font-size:32px;font-weight:800;letter-spacing:-.03em}
.bottom-bar{display:flex;justify-content:space-around;padding:10px 6px 22px;background:var(--side);color:var(--side-ink)}
.bottom-bar a{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px;font-weight:600;text-decoration:none;padding:6px 8px;border-radius:12px;color:var(--side-ink-2)}
.bottom-bar a[aria-current="page"]{background:var(--side-active);color:var(--side-active-ink)}
.phone .kpi .k-value{font-size:30px}
.phone .rcard{padding:16px;border-radius:22px}
.phone .bubble,.phone .reply{max-width:100%;padding:14px 16px}
.phone .bubble p,.phone .reply p{font-size:16px}

@media (max-width:760px){
  .cv-scroll{padding:24px 16px 80px}
  .cv-bar{padding:12px 16px}
}


body{font-size:16px;line-height:1.6}
h1,h2,h3,h4,h5{letter-spacing:-.025em;font-weight:800}
:focus-visible{border-radius:0}
.card,.kpi,.rcard,.state,.preview-pane,.dialog,.danger-zone,.notif,.opt,.alert,.code-box,.search,.icon-btn,.seg,.seg button,.qr,.frame,.ws-switch,.side-foot,.nav a,.stepper li,.policy,.landing-logo,.phone,.pill-tabs button,.tabs .count,.delta,.sk,.legend i,.heat td,.heat-key i,progress,.avatar,.chip,.btn,.input,.select,.textarea,.seg-f,.scrim,.logo-tile,.sw .chipc{border-radius:0 !important}
.av{border-radius:0;background:var(--yellow);color:#000;font-weight:800}
.av.a2{background:var(--mint-tint);color:#000}.av.a3{background:#F4AE96;color:#000}.av.a4{background:var(--sky);color:#000}
.card,.kpi,.rcard,.dialog{border:1.5px solid var(--edge)}
.state{border:1.5px dashed var(--edge)}
.card-tint{background:var(--yellow);color:#000;border-color:var(--yellow)}
.card-tint h2,.card-tint h3{color:#000}
.card h2{font-size:26px}
.page-head h1{font-size:60px;letter-spacing:-.035em;line-height:1}
.page-head p{font-size:17px}
.btn{font-size:16px;font-weight:700;padding:15px 24px;border:1.5px solid var(--violet)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--edge)}
.btn-ghost:hover{background:var(--surface-2)}
.btn-soft{background:var(--yellow);color:#000;border-color:var(--yellow)}
.btn-soft:hover{background:#E8BC35}
.btn-danger{background:var(--orange);color:#000;border-color:var(--orange)}
.btn-danger-ghost{color:var(--err);border-color:var(--orange)}
.btn-mint{background:var(--yellow);color:#000;border-color:var(--yellow)}
.btn-sm{font-size:14px;padding:9px 14px}
.btn-lg{font-size:18px;padding:19px 30px}
.link{color:var(--ink);text-decoration-thickness:2px;text-decoration-color:var(--orange)}
.chip{font-size:13px;font-weight:700;padding:6px 10px;border:1.5px solid var(--edge);background:transparent;color:var(--ink)}
.chip-violet,.chip-tan{background:var(--yellow);border-color:var(--yellow);color:#000}
.chip-mint{background:var(--mint-tint);border-color:var(--mint-tint);color:#000}
.chip-rose{background:var(--orange);border-color:var(--orange);color:#000}
.chip-solid{background:#000;color:#fff;border-color:#000}
.field .err{color:var(--err)}
.input,.select,.textarea{border:1.5px solid var(--edge);font-size:16px;min-height:52px}
.input:focus,.select:focus,.textarea:focus{border-color:var(--edge);box-shadow:0 0 0 3px var(--yellow)}
.input.is-err{border-color:var(--orange);box-shadow:0 0 0 3px var(--orange)}
.switch{border-radius:0;background:linear-gradient(#FFF,#FFF) 4px 50%/22px 22px no-repeat,var(--line-strong);opacity:.35}
.switch:checked{background:linear-gradient(#FFF,#FFF) 28px 50%/22px 22px no-repeat,var(--ink);opacity:1}

.seg-f{border:1.5px solid var(--edge)}
.seg-f span{border-right:1.5px solid var(--edge);font-size:14px}
.seg-f input:checked + span{background:var(--violet);color:var(--on-violet)}
.seg{border:1.5px solid var(--edge);background:transparent;padding:0;gap:0}
.seg button{border-right:1.5px solid var(--edge);padding:9px 14px}
.seg button:last-child{border-right:0}
.tabs{border-bottom:1.5px solid var(--edge);gap:0}
.tabs a,.tabs button{font-size:16px;color:var(--ink-3);border-bottom-width:4px}
.tabs [aria-current="page"],.tabs [aria-selected="true"]{border-bottom-color:var(--orange);color:var(--ink)}
.pill-tabs{gap:0;border:1.5px solid var(--edge);width:max-content}
.pill-tabs button{border:0;border-right:1.5px solid var(--edge);font-size:14px}
.pill-tabs button:last-child{border-right:0}
.pill-tabs button[aria-selected="true"]{background:var(--violet);color:var(--on-violet)}
.filters .select{min-height:44px;font-size:14px}
.kpi{padding:22px}
.kpi .k-label{font-size:14px;color:var(--ink-2)}
.kpi .k-value{font-size:44px;font-weight:800}
.kpi.feature{background:var(--yellow);color:#000;border-color:var(--yellow)}
.kpi.feature .k-label{color:rgba(0,0,0,.72)}
.kpi.feature .delta.up{background:#000;color:#FFF}
.kpi.orange{background:var(--orange);color:#000;border-color:var(--orange)}
.kpi.orange .k-label{color:rgba(0,0,0,.72)}
.kpi.orange .delta{background:#000;color:#fff}
.delta{font-size:13px;padding:3px 7px}
.delta.up{background:var(--mint-tint);color:#000}
.delta.down{background:var(--orange);color:#000}
.delta.flat{background:transparent;color:var(--ink-3);padding-left:0}
.alert{border:1.5px solid var(--edge);font-size:15px}
.alert-rose{background:var(--orange);color:#000;border-color:var(--orange)}
.alert-tan,.alert-violet{background:var(--yellow);color:#000;border-color:var(--yellow)}
.alert-mint{background:var(--mint-tint);color:#000;border-color:var(--mint-tint)}
.alert-solid{background:#000;color:#fff;border-color:#000}
.alert-solid{border-color:var(--edge)}
.alert .btn-ghost{background:#FFF;color:#000;border-color:#000}
.alert .btn-danger{background:#000;color:#fff;border-color:#000}

.bubble{border-radius:0;border:1.5px solid var(--edge);background:var(--surface)}
.reply{border-radius:0;background:#000;color:#FFF}
.reply{background:var(--posted-bg,#000);color:var(--posted-ink,#FFF)}
.reply.draft{background:var(--yellow);color:#000;border:1.5px dashed #000}
.reply.draft .r-head{color:#000}
.reply.failed{background:var(--orange);color:#000;border:0}
.reply.failed .r-head{color:#000}
.reply.none{border:1.5px dashed var(--edge);border-radius:0}
.rcard.sel{border-color:var(--edge);box-shadow:8px 8px 0 var(--yellow)}
.rcard{gap:18px}

.side{border-right:1.5px solid #000}
.side .logo{font-family:var(--f-display);font-size:24px;letter-spacing:-.02em}
.ws-switch{background:transparent;border:1.5px solid #000}
.ws-switch .ws-av{border-radius:0;background:#000;color:var(--yellow)}
.nav a{font-size:16px}
.nav .badge{background:var(--orange);color:#000;border-radius:0}
.nav a[aria-current="page"] .badge{background:var(--yellow);color:#000}
.side-foot{background:transparent;border:1.5px solid #000}
.side-foot .av-side{background:#000;color:var(--yellow)}
.top{border-bottom:1.5px solid var(--edge);padding:20px 48px}
.search{border:1.5px solid var(--edge);background:transparent;height:46px;font-size:15px}
.icon-btn{border:1.5px solid var(--edge);background:var(--violet);color:var(--on-violet)}
.icon-btn .dotn{background:var(--orange);color:#000;border-radius:0}
.crumbs{display:flex;gap:14px;font-size:15px;font-weight:600;color:var(--ink-2)}
.crumbs span{color:var(--ink-3)}

.tbl th{font-size:13px;color:var(--ink-3);border-bottom:1.5px solid var(--edge)}
.tbl td{font-size:15px}
progress{height:14px;border-radius:0;border:1.5px solid var(--edge);background:transparent}
progress::-webkit-progress-bar{background:transparent;border-radius:0}
progress::-webkit-progress-value{background:var(--ink);border-radius:0}
progress::-moz-progress-bar{background:var(--ink);border-radius:0}
progress.warn::-webkit-progress-value{background:var(--yellow)}progress.warn::-moz-progress-bar{background:var(--yellow)}
progress.over::-webkit-progress-value{background:var(--orange)}progress.over::-moz-progress-bar{background:var(--orange)}
progress.ok::-webkit-progress-value{background:var(--green)}progress.ok::-moz-progress-bar{background:var(--green)}
.chart .l1{stroke:var(--line1);stroke-width:3}
.chart .a1{fill:var(--area1);opacity:.55}
.chart .dot1{fill:var(--orange);stroke:var(--surface)}
.legend i{border-radius:0}
.heat{border-spacing:2px}

.state .s-ico{border-radius:0;background:var(--yellow);color:#000}
.state .s-ico.rose{background:var(--orange);color:#000}
.state .s-ico.tan{background:var(--yellow);color:#000}
.stepper{gap:0;border:1.5px solid var(--edge)}
.stepper li{border:0;border-right:1.5px solid var(--edge);background:transparent;box-shadow:none !important}
.stepper li:last-child{border-right:0}
.stepper .n{border-radius:0;border:1.5px solid var(--edge);background:transparent;color:var(--ink)}
.stepper .done .n{background:#000;color:#fff;border-color:#000}
.stepper .cur{background:var(--yellow);color:#000}
.stepper .cur .n{background:#000;color:var(--yellow);border-color:#000}
.opt{border:1.5px solid var(--edge)}
.opt input{accent-color:#000}
.opt.on{background:var(--yellow);border-color:#000;color:#000}
.opt.on .t span{color:rgba(0,0,0,.7)}
.check input{accent-color:#000}
.notif{border:1.5px solid var(--edge)}
.notif.unread{box-shadow:inset 8px 0 0 var(--orange);border-color:var(--edge)}
.notif .n-ico{border-radius:0}
.n-rose{background:var(--orange);color:#000}.n-tan,.n-violet{background:var(--yellow);color:#000}.n-mint{background:var(--mint-tint);color:#000}
.policy{background:#000;color:#fff;border:1.5px solid var(--edge)}
.policy h3{color:#fff}
.policy .ico{color:var(--yellow)}
.danger-zone{border:2px solid var(--orange)}
.danger-zone h2{color:var(--err)}
.scrim{background:rgba(0,0,0,.6)}
.dialog{box-shadow:12px 12px 0 var(--orange)}
.preview-pane{background:var(--surface-2);border:1.5px solid var(--edge)}
.qr{border:1.5px solid #000;padding:14px}
.code-box{border:1.5px solid var(--edge);background:transparent}
.frame{border-radius:0;box-shadow:none}
.cv-label .code{border-radius:0;background:#000;color:var(--yellow);font-size:22px;padding:4px 12px}
.cv-label h2{font-size:30px}
.cv-bar{border-bottom:1.5px solid #000}
.cv-bar .brand{font-family:var(--f-display);font-size:20px}
.phone{border-radius:0;border:10px solid #000}
.bottom-bar{border-top:1.5px solid #000}
.bottom-bar a{border-radius:0}
.big-count{display:flex;align-items:center;gap:18px;font-family:var(--f-display);font-weight:700;font-size:48px;letter-spacing:-.03em;line-height:1}
.big-count .arr{width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent}
.big-count .arr.l{border-right:10px solid var(--ink)}
.big-count .arr.r{border-left:10px solid var(--ink)}
.big-count small{font-size:20px;color:var(--ink-3);font-weight:600}
.ring-mark{display:inline-flex}

.auth-brand{background:var(--yellow);color:#000;padding:48px 56px;gap:28px}
.auth-brand .eyebrow-line{font-size:17px;font-weight:500}
.auth-brand h1{color:#000;font-size:132px;font-weight:800;letter-spacing:-.05em;line-height:.9}
.auth-brand p{color:#000;font-size:16px;max-width:36ch}
.auth-block{background:var(--orange);padding:36px 32px;display:flex;flex-direction:column;gap:12px;margin-top:auto}
.auth-block .bubble{background:#FFF;color:#000;border-color:#000}
.auth-block .bubble p{color:#000;font-size:16px;max-width:none}
.auth-block .reply{background:#000;color:#FFF}
.auth-block .reply p{color:#FFF;font-size:16px;max-width:none}
.auth-brand .kv dt{color:rgba(0,0,0,.7)}
.auth-form h2{font-size:52px;font-weight:800;letter-spacing:-.035em}

.ds{padding:72px 120px;gap:56px}
.ds-hero{display:flex;gap:0;border:1.5px solid #000}
.ds-hero .y{flex:1.3;background:var(--yellow);color:#000;padding:48px;display:flex;flex-direction:column;gap:20px}
.ds-hero .y h1{font-size:140px;letter-spacing:-.055em;line-height:.88;color:#000}
.ds-hero .y p{font-size:17px;max-width:46ch}
.ds-hero .o{flex:1;background:var(--orange);padding:40px;display:flex;flex-direction:column;justify-content:flex-end;gap:12px}
.ds-hero .o .bubble{background:#FFF;color:#000;border-color:#000}
.ds-hero .o .bubble p{color:#000}
.ds-hero .o .reply{background:#000;color:#fff}
.ds-hero .k{flex:0 0 220px;border-left:1.5px solid #000;background:#FFF;color:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px;font-family:var(--f-display);font-weight:800;font-size:28px}
.c-yellow{background:#F2C94C}.c-orange{background:#E5562B}.c-black{background:#000000}.c-white{background:#FFFFFF}.c-green{background:#2B9A5A}.c-paper2{background:#F7F7F4}
.sw .chipc{border:1.5px solid #000;height:110px}
.logo-tile{font-family:var(--f-display);font-size:40px;letter-spacing:-.03em;border:1.5px solid #000}
.logo-tile.on-violet{background:#F2C94C;color:#000}
.logo-tile.on-paper{background:#FFFFFF;color:#000}
.logo-tile.on-ink{background:#000;color:#fff}
.principles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1.5px solid var(--edge)}
.principles li{padding:24px;border-right:1.5px solid var(--edge);display:flex;flex-direction:column;gap:8px;font-size:15px}
.principles li:last-child{border-right:0}
.principles strong{font-family:var(--f-display);font-size:20px;font-weight:800}

.pub-hero{background:var(--yellow);color:#000}
.pub-hero h1,.pub-hero h2{color:#000}
.pub-hero .card{border-color:#000}
.cta-band{background:#000;color:#fff;padding:44px 48px}
.cta-band h2{color:#fff;font-size:40px}
.cta-band .btn{background:var(--yellow);color:#000;border-color:var(--yellow)}
.audit-hero h1{font-size:96px;letter-spacing:-.05em;line-height:.92}
.steps3 li .num{font-family:var(--f-display);font-weight:800;font-size:56px;line-height:1;color:var(--orange)}
.plan-card{background:#000;color:#fff;border-color:var(--edge) !important}
.plan-card h2{color:var(--yellow);font-size:56px}
.plan-card .kv dt{color:rgba(255,255,255,.7)}
.plan-card .btn{background:var(--yellow);color:#000;border-color:var(--yellow)}
.plan-card .btn-ghost{background:transparent;color:#fff;border-color:#fff}
.plan-card .chip{border-color:#fff;color:#fff}

.wordmark,.p-brand{font-family:var(--f-display);font-weight:800;font-size:24px;letter-spacing:-.03em}
.ds-hero .k .ring-mark{color:#000}
.ds-h{font-size:34px;margin-bottom:20px}
.ds-field{max-width:420px}
.type-row .spec{font-size:14px}
.ts-hero{font-family:var(--f-display);font-weight:800;font-size:132px;letter-spacing:-.05em;line-height:.95}
.ts-title{font-family:var(--f-display);font-weight:800;font-size:60px;letter-spacing:-.035em;line-height:1}
.ts-sec{font-family:var(--f-display);font-weight:800;font-size:26px}
.ts-num{font-family:var(--f-display);font-weight:800;font-size:44px;letter-spacing:-.03em}
.ts-body{font-size:16px}
.crumbs .ink{color:var(--ink)}
.auth-hero{margin-top:40px}
.auth-cards{max-width:820px}
.auth-state{max-width:480px}
.invite-kv{color:#000}
.invite-kv dt{color:rgba(0,0,0,.72)}
.agency-mark{width:44px;height:44px;background:#000;color:var(--yellow);display:inline-flex;align-items:center;justify-content:center;font-family:var(--f-display);font-weight:800}
.agency-name{font-family:var(--f-display);font-weight:800;font-size:20px;letter-spacing:.01em}
.audit-hero-in{padding-top:64px;padding-bottom:64px}
.audit-hero-row{align-items:center;gap:56px}
.audit-hero .lead-in{font-size:18px;font-weight:500}
.audit-hero h1{font-size:132px;font-weight:800;letter-spacing:-.05em;line-height:.9}
.audit-hero .hero-copy{font-size:17px;max-width:48ch}
.audit-hero .card{background:#FFF;color:#000}
.score-label{font-size:22px}
.side .ring-mark{color:#000}
.cv-bar .ring-mark{color:var(--ink)}
.phone .p-top .ring-mark{color:var(--ink)}

.doc-ico{width:52px;height:52px;display:flex;align-items:center;justify-content:center;background:var(--yellow);color:#000;flex:0 0 auto}
.biz-logo{width:72px;height:72px;background:#FFD7B5;color:#5A2A00;display:flex;align-items:center;justify-content:center;font-family:var(--f-display);font-weight:800;font-size:28px}

.kpi .k-value{white-space:nowrap;font-size:40px}
.textarea{min-height:140px}

.side-foot .av-side{background:#FFFFFF;color:#2E1A9E;font-size:15px}
.auth-brand .bubble p{color:#1C1433;font-size:17px;max-width:none}
.auth-brand .reply p{color:#FFFFFF;font-size:17px;max-width:none}
.landing{min-height:860px;background:#FFD7B5;display:flex;align-items:center;justify-content:center;padding:64px 24px}
.landing.m{min-height:100%;flex:1;padding:24px}
.landing-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px;max-width:620px}
.landing-logo{width:120px;height:120px;border-radius:36px;background:#5A2A00;color:#FFD7B5;display:flex;align-items:center;justify-content:center;font-family:var(--f-display);font-weight:800;font-size:48px}
.landing h1{font-size:56px;font-weight:800;letter-spacing:-.035em;color:#3A1B00;line-height:1.02}
.landing.m h1{font-size:34px}
.landing p{font-size:21px;color:#5A2A00;max-width:40ch}
.landing.m p{font-size:18px}
.landing-btn{background:#3A1B00;color:#FFFFFF}
.landing-btn:hover{background:#5A2A00}
.landing-foot{font-size:15px;color:#7A4A20}
.flex1{flex:1}
.landing.m.top{align-items:flex-start;padding-top:40px}
.landing-logo.sm{width:56px;height:56px;font-size:22px}
.landing-alt{background:transparent;color:#3A1B00;border-color:#3A1B00}
.landing-alt:hover{background:rgba(58,27,0,.06)}
.helper{display:flex;flex-direction:column;gap:16px;color:#3A1B00;width:100%}
.helper .row{justify-content:space-between}
.helper h2{font-size:32px;color:#3A1B00;letter-spacing:-.03em}
.helper p{color:#5A2A00}
.helper .link{color:#3A1B00}
.helper label{color:#3A1B00}
.helper .hint{color:#7A4A20}
.helper .textarea,.helper .select{background:#FFFFFF;color:#000;border-color:#3A1B00}
.tidied{background:#FFFFFF;border:1.5px solid #3A1B00;padding:18px}
.tidied p{font-size:18px;color:#000}
.flow-wrap{padding:0 48px 56px}
.phone.tall{height:auto}
.phones{align-items:flex-start}
.lang-seg{display:inline-flex;border:1.5px solid #3A1B00}
.lang-seg button{font:inherit;font-size:14px;font-weight:700;padding:6px 12px;border:0;border-right:1.5px solid #3A1B00;background:transparent;color:#3A1B00;cursor:pointer}
.lang-seg button:last-child{border-right:0}
.lang-seg button[aria-pressed="true"]{background:#3A1B00;color:#FFD7B5}
.tag-group{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;min-width:0}
.tag-group legend{font-weight:700;font-size:15px;color:#3A1B00;padding:0;margin-bottom:10px;display:flex;align-items:center;gap:6px}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{font:inherit;font-size:14px;font-weight:600;padding:9px 12px;background:#FFFFFF;color:#3A1B00;border:1.5px solid #3A1B00;cursor:pointer;line-height:1.2}
.tag[aria-pressed="true"]{background:#3A1B00;color:#FFFFFF}
.tag[aria-pressed="true"]::before{content:"✓ "}
.tag:focus-visible{box-shadow:0 0 0 3px #FFFFFF,0 0 0 5px #3A1B00}
.tag-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tag-cols .tag-group{background:rgba(255,255,255,.45);padding:12px;border:1.5px solid #3A1B00}
.tag-cols .tags{flex-direction:column;align-items:stretch}
.opt-l{font-weight:500;color:#7A4A20;font-size:14px}
.textarea.short{min-height:84px}
.textarea.draft-box{min-height:170px;font-size:17px}
.btn-count{margin-left:6px;font-size:13px;font-weight:600;opacity:.75}
.helper-ghost{color:#3A1B00;border-color:#3A1B00}
.helper .check{color:#3A1B00;font-size:15px}
.flow-risk{margin-top:4px}
.tone-row{display:flex;flex-wrap:wrap;gap:8px}
.tone{font:inherit;font-size:14px;font-weight:700;padding:9px 12px;background:#FFFFFF;color:#3A1B00;border:1.5px solid #3A1B00;cursor:pointer}
.tone[aria-checked="true"]{background:#3A1B00;color:#FFD7B5}
.tone:focus-visible{box-shadow:0 0 0 3px #FFFFFF,0 0 0 5px #3A1B00}
.tone-hint{font-size:13px !important;color:#7A4A20 !important;margin-top:-8px}
.w-time{width:auto;min-width:140px}
.fs-plain{border:0;padding:0;margin:0;min-width:0}
.fs-plain legend{padding:0;margin-bottom:12px}
.wa-msg{background:#FFFFFF;color:#000;border:1.5px solid #000;padding:16px 18px;display:flex;flex-direction:column;gap:8px;max-width:340px}
.wa-msg p{font-size:15px;color:#000}
.wa-msg .wa-link{font-weight:700;text-decoration:underline;text-decoration-color:#E5562B;text-decoration-thickness:2px}
.wa-msg .muted{color:#5E5E58}
.wa-time{align-self:flex-end;font-size:12px;color:#5E5E58}
.wa-note{margin-top:14px}
.landing-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.tag-group legend{float:left;width:100%}
.tag-group legend + *{clear:both}
.client-logo{display:inline-flex;align-items:center;gap:14px;color:#3A1B00;text-align:left}
.client-logo .cl-mark{width:88px;height:88px}
.client-logo .cl-word{display:flex;flex-direction:column;line-height:1}
.client-logo strong{font-family:var(--f-display);font-weight:800;font-size:34px;letter-spacing:-.03em}
.client-logo small{font-size:14px;font-weight:600;margin-top:6px;color:#7A4A20}
.client-logo.sm .cl-mark{width:44px;height:44px}
.client-logo.sm strong{font-size:20px}
.client-logo.sm small{font-size:12px;margin-top:3px}
.landing.m .client-logo.lg .cl-mark{width:64px;height:64px}
.landing.m .client-logo.lg strong{font-size:26px}
.wide-cards .convo{flex-direction:row;align-items:stretch;gap:20px}
.wide-cards .convo > *{flex:1;max-width:none;align-self:stretch}
.log-form{display:grid;grid-template-columns:1.2fr 1.2fr .7fr auto;gap:10px}
.tbl .select{min-width:190px}
.findings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}

/* ---------- Live app layout (hand-written, not from the canvas) ---------- */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/inter-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/inter-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/inter-tight-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/inter-tight-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

html{-webkit-text-size-adjust:100%}
.gbr-ui{margin:0;min-height:100vh}
.gbr-ui .app{min-height:100vh;min-height:100dvh}
.gbr-ui .side{position:sticky;top:0;align-self:flex-start;height:100vh;height:100dvh;overflow-y:auto}
.gbr-ui .side .logo{color:inherit;text-decoration:none}
.gbr-ui .side-foot{margin-top:auto}
.gbr-ui .main{flex:1 1 auto;width:auto;max-width:none;min-width:0}
.gbr-ui .content{width:100%;max-width:1320px;margin-inline:auto;box-sizing:border-box}
.gbr-ui .top-ws{font-family:var(--f-display);font-size:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.gbr-ui .top-right form{margin:0}
.gbr-ui .btn-sm{font-size:14px;padding:10px 16px}
.gbr-ui .tbl-scroll{max-width:100%;overflow-x:auto}
.gbr-ui .card,.gbr-ui .kpi,.gbr-ui .rcard,.gbr-ui .state{min-width:0}
.gbr-ui .chart{max-width:100%;height:auto}
.gbr-ui img,.gbr-ui svg{max-width:100%}
.gbr-ui .ico{max-width:none}
.gbr-ui .tabs{display:flex;flex-wrap:wrap;gap:6px}
.gbr-ui textarea,.gbr-ui input,.gbr-ui select{max-width:100%}
.gbr-ui main:focus{outline:0}
.gbr-bare{display:block;min-height:100vh}
.gbr-preview-bar{margin:0;padding:10px 16px;background:#000000;color:#FFFFFF;font-size:14px;font-weight:600;text-align:center}
.gbr-sample-note{margin:0}

/* Large screens: keep the line length of the design. */
@media (min-width:1500px){
  .gbr-ui .content{padding-inline:56px}
}

/* Narrower laptops and tablets. */
@media (max-width:1180px){
  .gbr-ui .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gbr-ui .g6{grid-template-columns:repeat(3,minmax(0,1fr))}
  .gbr-ui .states{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gbr-ui .split,.gbr-ui .split-r{grid-template-columns:minmax(0,1fr)}
  .gbr-ui .log-form{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .gbr-ui .content{padding:32px 32px 48px}
  .gbr-ui .top{padding:16px 32px}
}

/* Phones and small tablets: the sidebar becomes a bottom bar. */
@media (max-width:900px){
  .gbr-ui .app{flex-direction:column}
  .gbr-ui .side{position:fixed;top:auto;left:0;right:0;bottom:0;z-index:50;height:auto;flex-direction:row;align-items:stretch;gap:0;padding:6px 6px calc(6px + env(safe-area-inset-bottom));overflow-x:auto;overflow-y:hidden;border-top:1.5px solid #000000;-webkit-overflow-scrolling:touch}
  .gbr-ui .side .logo,.gbr-ui .ws-switch,.gbr-ui .nav-title,.gbr-ui .side-foot{display:none}
  .gbr-ui .side .nav-group,.gbr-ui .side .nav{display:contents}
  .gbr-ui .nav-group + .nav-group{margin:0;padding:0;border:0}
  .gbr-ui .side .nav-group.nav-group-extra{display:none}
  .gbr-ui .side li{display:flex;flex:1 1 0;min-width:0}
  .gbr-ui .nav a{flex-direction:column;align-items:center;gap:3px;font-size:11px;padding:8px 2px;min-width:0;width:100%;box-sizing:border-box;justify-content:center;text-align:center}
  .gbr-ui .nav a span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .gbr-ui .nav .badge{margin:0}
  .gbr-ui .main{padding-bottom:84px}
  .gbr-ui .top{padding:12px 16px}
  .gbr-ui .content{padding:24px 16px 40px;gap:22px}
  .gbr-ui .page-head h1{font-size:40px}
  .gbr-ui .g2,.gbr-ui .g3{grid-template-columns:minmax(0,1fr)}
  .gbr-ui .g4,.gbr-ui .g6{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gbr-ui .states,.gbr-ui .findings,.gbr-ui .tag-cols,.gbr-ui .log-form,.gbr-ui .kv{grid-template-columns:minmax(0,1fr)}
  .gbr-ui .page-head .actions{margin-left:0}
  .gbr-ui .card{padding:20px}
  .gbr-ui .wrap{padding-inline:16px}
  .gbr-ui .stepper{flex-direction:column}
  .gbr-ui .stepper li{border-right:0;border-bottom:1.5px solid var(--edge)}
  .gbr-ui .stepper li:last-child{border-bottom:0}
  .gbr-ui .pill-tabs{display:flex;flex-wrap:wrap;max-width:100%}
  .gbr-ui .list-rows li{flex-wrap:wrap}
  .gbr-ui .pub-top,.gbr-ui .row-top,.gbr-ui .audit-hero-row{flex-wrap:wrap;gap:16px}
  .gbr-ui .row-top{flex-direction:column;align-items:stretch}
  .gbr-ui .audit-hero-row{align-items:flex-start}
  .gbr-ui .code-box{flex-wrap:wrap;overflow-wrap:anywhere}
  .gbr-ui .landing{min-height:0;padding:40px 16px}
  .gbr-ui .landing h1{font-size:40px}
  .gbr-ui .audit-hero h1{font-size:clamp(44px,15vw,96px)}
  .gbr-ui .audit-hero-in{padding-top:40px;padding-bottom:40px}
  .gbr-ui .stack,.gbr-ui .flex1{min-width:0}
  .gbr-ui .btn{white-space:normal;text-align:center}
  .gbr-ui .seg{flex-wrap:wrap;max-width:100%}
  .gbr-ui .phones{flex-direction:column;align-items:center;gap:32px}
  .gbr-ui .phone{width:100%;max-width:420px;height:auto;flex:none}
  .gbr-ui .flow-wrap{padding:0 16px 40px}
}
@media (max-width:480px){
  .gbr-ui .g4,.gbr-ui .g6{grid-template-columns:minmax(0,1fr)}
  .gbr-ui .page-head h1{font-size:34px}
  .gbr-ui .top-ws{font-size:16px}
}
@media print{
  .gbr-ui .side,.gbr-ui .top{display:none}
}
body.gbr-ui{background:var(--bg)}

/* Sign-in, invite and workspace list. */
.gbr-ui .auth{min-height:100vh}
.gbr-ui .auth-form form{margin:0}
.gbr-ui .gbr-switcher{padding-top:32px;padding-bottom:56px;display:flex;flex-direction:column;gap:28px}
.gbr-ui .gbr-switcher-top form{margin:0}
.gbr-ui .gbr-ws-card{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:inherit;font-size:20px}
.gbr-ui .gbr-ws-card:hover,.gbr-ui .gbr-ws-card:focus-visible{background:var(--yellow)}
@media (max-width:900px){
  .gbr-ui .auth{flex-direction:column}
  .gbr-ui .auth-brand{flex:0 0 auto;padding:32px 24px;gap:24px}
  .gbr-ui .auth-brand h1{font-size:56px}
  .gbr-ui .auth-form{padding:32px 24px}
}

/* Account menu in the top bar. */
.gbr-ui .acct{position:relative}
.gbr-ui .acct-btn{list-style:none;display:flex;align-items:center;gap:10px;min-height:48px;box-sizing:border-box;padding:4px 14px 4px 4px;border:1.5px solid #000000;background:#000000;color:#FFFFFF;font-weight:800;font-size:15px;cursor:pointer;box-shadow:3px 3px 0 var(--yellow)}
.gbr-ui .acct-btn:hover{background:#1A1A1A;transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--yellow)}
.gbr-ui .acct-btn::-webkit-details-marker{display:none}
.gbr-ui .acct-btn .av{width:38px;height:38px;font-size:14px;background:var(--yellow);color:#000000}
.gbr-ui .acct-btn:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.gbr-ui .acct[open] .acct-btn .ico{transform:rotate(180deg)}
.gbr-ui .acct-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:60;box-sizing:border-box;min-width:250px;max-width:calc(100vw - 32px);background:var(--surface);border:1.5px solid var(--edge);box-shadow:4px 4px 0 var(--edge)}
.gbr-ui .acct-who{margin:0;padding:14px 16px;border-bottom:1.5px solid var(--edge);display:flex;flex-direction:column;gap:2px;overflow-wrap:anywhere}
.gbr-ui .acct-who span{font-size:13px;opacity:.7}
.gbr-ui .acct-menu ul{list-style:none;margin:0;padding:6px 0}
.gbr-ui .acct-menu li a{display:block;padding:10px 16px;color:var(--ink);text-decoration:none;font-size:14px;font-weight:600}
.gbr-ui .acct-menu li a:hover,.gbr-ui .acct-menu li a:focus-visible{background:var(--yellow);color:#000000;outline:0}
.gbr-ui .acct-out{display:block;width:100%;box-sizing:border-box;text-align:left;padding:12px 16px;border:0;border-top:1.5px solid var(--edge);background:transparent;color:var(--ink);font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.gbr-ui .acct-out:hover,.gbr-ui .acct-out:focus-visible{background:#000000;color:#FFFFFF;outline:0}
@media (max-width:600px){
  .gbr-ui .acct-label{display:none}
  .gbr-ui .acct-btn{padding-right:8px}
}

/* Phone top bar with the website menu (sign-in, invite, workspace list). */
.gbr-ui .sbar{display:none}
@media (max-width:900px){
  .gbr-ui .sbar{display:flex;align-items:center;justify-content:space-between;gap:12px;position:sticky;top:0;z-index:70;box-sizing:border-box;padding:10px 16px;background:#FFFFFF;border-bottom:1.5px solid #000000}
  .gbr-ui .sbar-logo{display:flex;align-items:center;gap:8px;min-width:0;color:#000000;text-decoration:none;font-family:var(--f-display);font-weight:800;font-size:22px}
  .gbr-ui .sbar-logo .ring-mark{color:var(--orange);flex:none}
  .gbr-ui .sbar-toggle{list-style:none;display:flex;align-items:center;justify-content:center;width:46px;height:46px;box-sizing:border-box;border:1.5px solid #000000;background:#FFFFFF;color:#000000;cursor:pointer}
  .gbr-ui .sbar-toggle::-webkit-details-marker{display:none}
  .gbr-ui .sbar-toggle:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
  .gbr-ui .sbar-close,.gbr-ui .sbar-menu[open] .sbar-open{display:none}
  .gbr-ui .sbar-menu[open] .sbar-close{display:block}
  .gbr-ui .sbar-menu[open] .sbar-toggle{background:var(--yellow)}
  .gbr-ui .sbar-panel{position:absolute;left:0;right:0;top:100%;box-sizing:border-box;padding:8px 16px 20px;background:#FFFFFF;border-bottom:1.5px solid #000000;box-shadow:0 6px 0 rgba(0,0,0,.12)}
  .gbr-ui .sbar-panel ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
  .gbr-ui .sbar-panel li a{display:block;padding:14px 4px;color:#000000;text-decoration:none;font-size:18px;font-weight:700;border-bottom:1.5px solid var(--line)}
  .gbr-ui .sbar-panel li a:hover,.gbr-ui .sbar-panel li a:focus-visible{background:var(--yellow);outline:0}
  .gbr-ui .sbar-panel li a.sbar-yellow,.gbr-ui .sbar-panel li a.sbar-black{margin-top:12px;padding:14px 16px;border:1.5px solid #000000;text-align:center}
  .gbr-ui .sbar-panel li a.sbar-yellow{background:var(--yellow)}
  .gbr-ui .sbar-panel li a.sbar-black{background:#000000;color:#FFFFFF}
  .gbr-ui .sbar-panel li a.sbar-black:hover,.gbr-ui .sbar-panel li a.sbar-black:focus-visible{background:#1A1A1A;color:#FFFFFF}
  .gbr-ui .auth{min-height:0}
  .gbr-ui .gbr-switcher-top .wordmark{display:none}
  .gbr-ui .gbr-switcher-top{justify-content:flex-end}
  .gbr-ui .gbr-switcher{padding-top:20px}
}