/* Bridgerator site + account pages. One accent, system fonts (CSP: style-src 'self', no web fonts). */
:root{
  --font:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Mono","Cascadia Code",Consolas,"SF Mono",Menlo,monospace;
  /* spacing scale */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:72px;--s9:96px;
  --gutter:16px;--r-sm:8px;--r:12px;--r-lg:16px;
  /* light palette */
  --bg:#ffffff;--bg-2:#f6f7f9;--surface:#ffffff;--text:#0f172a;--muted:#475569;
  --line:#e2e8f0;--line-strong:#cbd5e1;
  --accent:#2251e6;--accent-hover:#1a42c4;--accent-ink:#ffffff;--accent-soft:#eef2ff;--accent-line:#c7d4fb;
  --code-bg:#f1f5f9;--term-bg:#0d1220;--term-text:#dde3ec;--term-dim:#8b98ab;--term-acc:#9db7ff;
  --ok:#15803d;--ok-soft:#f0fdf4;--warn:#b45309;--warn-soft:#fffbeb;--err:#b42318;--err-soft:#fef3f2;
  --shadow:0 1px 2px rgba(15,23,42,.05),0 4px 16px rgba(15,23,42,.06);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --bg:#0b0f17;--bg-2:#0f141e;--surface:#121824;--text:#e6eaf0;--muted:#a3adbd;
  --line:#222b38;--line-strong:#334155;
  --accent:#7c9cff;--accent-hover:#9ab3ff;--accent-ink:#0b0f17;--accent-soft:#18213a;--accent-line:#2c3d6b;
  --code-bg:#161d2a;--term-bg:#080b12;
  --ok:#4ade80;--ok-soft:#0f2418;--warn:#f0b35a;--warn-soft:#2a1f0e;--err:#ff8a80;--err-soft:#2c1414;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.25);
  color-scheme:dark;
}}
:root[data-theme=dark]{
  --bg:#0b0f17;--bg-2:#0f141e;--surface:#121824;--text:#e6eaf0;--muted:#a3adbd;
  --line:#222b38;--line-strong:#334155;
  --accent:#7c9cff;--accent-hover:#9ab3ff;--accent-ink:#0b0f17;--accent-soft:#18213a;--accent-line:#2c3d6b;
  --code-bg:#161d2a;--term-bg:#080b12;
  --ok:#4ade80;--ok-soft:#0f2418;--warn:#f0b35a;--warn-soft:#2a1f0e;--err:#ff8a80;--err-soft:#2c1414;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.25);
  color-scheme:dark;
}
@media (min-width:640px){:root{--gutter:24px}}

/* base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3{line-height:1.2;letter-spacing:-.015em;text-wrap:balance}
p,li{text-wrap:pretty}
a{color:var(--accent);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--accent-hover)}
img,svg{max-width:100%}
b,strong{font-weight:600}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
::selection{background:var(--accent-soft)}
html.ru body [lang=en],html:not(.ru) body [lang=ru]{display:none !important}
.skip{position:absolute;left:var(--s2);top:-100px;z-index:100;background:var(--accent);color:var(--accent-ink);padding:var(--s2) var(--s4);border-radius:var(--r-sm);font-weight:600;text-decoration:none}
.skip:focus{top:var(--s2);color:var(--accent-ink)}

.wrap{max-width:1120px;margin:0 auto;padding:0 var(--gutter)}

/* header (same markup on static pages and server-rendered account pages) */
header.top{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--line)}
@supports (backdrop-filter:blur(8px)){header.top{background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:saturate(1.4) blur(10px)}}
header.top .wrap{display:flex;align-items:center;gap:var(--s3);min-height:64px}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:17px;letter-spacing:-.01em;color:var(--text);text-decoration:none;margin-right:auto;flex:none}
.brand:hover{color:var(--text)}
.brand img{width:28px;height:28px;display:block}
header.top nav{display:flex;align-items:center;gap:2px;min-width:0}
header.top nav a{color:var(--muted);text-decoration:none;font-size:15px;font-weight:500;padding:8px 10px;border-radius:var(--r-sm);white-space:nowrap}
header.top nav a:hover{color:var(--text);background:var(--bg-2)}
header.top nav a[aria-current=page]{color:var(--text);font-weight:600}
header.top nav a.btn{margin-left:var(--s2);padding:0 14px}
header.top nav a.btn.primary{color:var(--accent-ink)}
header.top nav a.btn.primary:hover{background:var(--accent-hover)}
header.top nav a.btn+a.btn{margin-left:var(--s1)}
.lang{flex:none;min-height:36px;min-width:44px;border:1px solid var(--line-strong);background:transparent;color:var(--text);border-radius:var(--r-sm);padding:0 10px;font:inherit;font-size:13px;font-weight:600;letter-spacing:.04em;cursor:pointer}
.lang:hover{background:var(--bg-2)}
@media (max-width:899px){
  header.top .wrap{flex-wrap:wrap;row-gap:0}
  header.top{position:static}
  header.top .wrap{min-height:60px;padding-top:var(--s3)}
  header.top nav{order:3;flex:1 0 100%;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s1) var(--s2);padding:0 0 var(--s3)}
  header.top nav a{grid-column:span 2;font-size:14px;padding:0 4px;min-height:36px;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  header.top nav a[aria-current=page]{background:var(--accent-soft);color:var(--accent)}
  header.top nav a.btn{grid-column:span 3;margin:var(--s1) 0 0;padding:0 8px}
  header.top nav a.btn:not(.primary){background:var(--surface)}
  header.top nav a.btn+a.btn{margin-left:0}

}
/* 900–1199 px: a compact header line — the Russian menu is ~170 px longer and ran into the EN button (V-11) */
@media (min-width:900px) and (max-width:1199px){
  header.top .wrap{gap:var(--s2)}
  header.top nav a{font-size:14px;padding:8px 7px}
  header.top nav a.btn{margin-left:var(--s1);padding:0 12px}
}
/* Russian at 900–999 px: still too long for one line → the two-row header of narrow screens */
@media (min-width:900px) and (max-width:999px){
  html[lang=ru] header.top{position:static}
  html[lang=ru] header.top .wrap{flex-wrap:wrap;row-gap:0;min-height:60px;padding-top:var(--s3)}
  html[lang=ru] header.top nav{order:3;flex:1 0 100%;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s1) var(--s2);padding:0 0 var(--s3)}
  html[lang=ru] header.top nav a{grid-column:span 2;font-size:14px;padding:0 4px;min-height:36px;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  html[lang=ru] header.top nav a[aria-current=page]{background:var(--accent-soft);color:var(--accent)}
  html[lang=ru] header.top nav a.btn{grid-column:span 3;margin:var(--s1) 0 0;padding:0 8px}
  html[lang=ru] header.top nav a.btn:not(.primary){background:var(--surface)}
  html[lang=ru] header.top nav a.btn+a.btn{margin-left:0}
}

/* buttons */
.btns{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center}
.btns form{margin:0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:44px;padding:0 20px;border-radius:10px;border:1px solid var(--line-strong);background:var(--surface);color:var(--text);font:inherit;font-size:15px;font-weight:600;line-height:1.2;text-decoration:none;text-align:center;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
.btn:hover{background:var(--bg-2);color:var(--text);border-color:var(--line-strong)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--accent-ink)}
.btn.sm{min-height:36px;padding:0 14px;font-size:14px;border-radius:var(--r-sm)}
.btn.lg{min-height:52px;padding:0 26px;font-size:16px}
button.btn{font-family:inherit}

/* sections */
.sec{padding:var(--s8) 0}
.sec.alt{background:var(--bg-2);border-block:1px solid var(--line)}
.sec.tight{padding-top:0}
.sec-head{max-width:680px;margin:0 0 var(--s6)}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head.center h1,.sec-head.center .intro{margin-inline:auto}
.eyebrow{display:block;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin:0 0 var(--s2)}
.sec h2,.sec-head h2{font-size:clamp(26px,3.4vw,36px);margin:0 0 var(--s3)}
.intro{color:var(--muted);font-size:18px;margin:0;max-width:62ch}
.more{margin:var(--s5) 0 0;font-weight:600}
.more a{text-decoration:none}
.more a:hover{text-decoration:underline}
@media (max-width:640px){.sec{padding:var(--s7) 0}.intro{font-size:17px}}

/* hero */
.hero{padding:var(--s8) 0 var(--s8)}
.hero.page{padding-bottom:var(--s6)}
.hero-grid{display:grid;gap:var(--s7);align-items:center}
@media (min-width:960px){.hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}}
.hero h1{font-size:clamp(34px,5.4vw,56px);line-height:1.07;letter-spacing:-.03em;margin:0 0 var(--s5);max-width:16ch}
.hero.page h1{font-size:clamp(32px,4.6vw,46px);max-width:22ch}
.lead{font-size:clamp(17px,1.6vw,20px);color:var(--muted);max-width:58ch;margin:0 0 var(--s6)}
.hero .btns{margin-bottom:var(--s6)}
.facts{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);margin:0;padding:0;list-style:none;color:var(--muted);font-size:14px}
.facts li{display:inline-flex;align-items:center;gap:var(--s2)}
.facts li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}
@media (max-width:640px){.hero{padding:var(--s7) 0}.hero .btns .btn{flex:1 1 auto}}

/* pills */
.badge,.ok-badge{display:inline-flex;align-items:center;gap:var(--s2);font-size:13px;font-weight:600;border-radius:999px;padding:4px 12px;margin:0 0 var(--s5);border:1px solid var(--accent-line);background:var(--accent-soft);color:var(--accent)}
.ok-badge{border-color:currentColor;background:var(--ok-soft);color:var(--ok)}

/* chat demo (hero visual) */
.demo{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden;min-width:0}
.demo-bar{display:flex;align-items:center;gap:var(--s2);padding:var(--s3) var(--s4);border-bottom:1px solid var(--line);font-size:13px;color:var(--muted);font-weight:600}
.demo-bar .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none}
.demo-bar .dev{margin-left:auto;font-weight:500;font-family:var(--mono);font-size:12px}
.demo-body{padding:var(--s5) var(--s4);display:grid;gap:var(--s4)}
.bubble{justify-self:end;max-width:88%;background:var(--accent-soft);color:var(--text);border-radius:14px 14px 4px 14px;padding:10px 14px;font-size:15px;margin:0}
.tools{margin:0;padding:var(--s3) var(--s4);list-style:none;background:var(--term-bg);color:var(--term-text);border-radius:var(--r);font:13px/1.75 var(--mono);overflow-wrap:anywhere}
.tools li{display:flex;gap:var(--s3)}
.tools .t{color:var(--term-acc);flex:none}
.tools .r{color:var(--term-dim);margin-left:auto;flex:none;padding-left:var(--s2)}
.answer{margin:0;font-size:15px}
.demo-note{margin:0;padding:0 var(--s4) var(--s4);font-size:12.5px;color:var(--muted)}
@media (max-width:480px){.tools .r{display:none}}

/* grids and cards */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:var(--s4)}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}
@media (min-width:760px){.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.two>:last-child:nth-child(odd){grid-column:1/-1}}
@media (min-width:900px){.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:var(--s5);min-width:0}
.card h3{font-size:17px;margin:0 0 var(--s2)}
.card p{margin:0;color:var(--muted);font-size:15.5px}
.card p+p{margin-top:var(--s2)}
.card ul,.plan ul{margin:var(--s3) 0 0;padding-left:20px;color:var(--muted);font-size:15px}
.card li,.plan li{margin-bottom:var(--s1)}
.card .btn{margin-top:var(--s5)}
.card .k,.prompt .k{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--s2)}
.ico{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;background:var(--accent-soft);color:var(--accent);margin-bottom:var(--s4)}
.ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* checklist */
.checks{list-style:none;padding:0;margin:var(--s3) 0 0;display:grid;gap:var(--s2)}
.checks li{position:relative;padding-left:28px;color:var(--muted);font-size:15.5px}
.checks li::before{content:"";position:absolute;left:2px;top:.35em;width:14px;height:8px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
.split{display:grid;gap:var(--s7);align-items:start}
@media (min-width:900px){.split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}

/* numbered steps */
ol.num{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:var(--s4);counter-reset:n}
ol.num>li{counter-increment:n;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:var(--s5);min-width:0}
ol.num>li::before{content:counter(n);display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:15px;margin-bottom:var(--s4)}
ol.num>li h3{font-size:17px;margin:0 0 var(--s2)}
ol.num>li p{margin:0;color:var(--muted);font-size:15.5px}
ol.num>li .copy{margin-top:var(--s3)}
ol.steps{padding-left:22px;margin:0}
ol.steps li{margin:0 0 var(--s3);padding-left:var(--s1)}

/* code */
code,.mono{font-family:var(--mono);font-size:.9em}
code{background:var(--code-bg);padding:.12em .4em;border-radius:6px}
code .nb{white-space:nowrap}
code.wrap{white-space:normal;overflow-wrap:anywhere}
.copy{display:flex;gap:var(--s3);align-items:center;background:var(--code-bg);border:1px solid var(--line);border-radius:10px;padding:var(--s2) var(--s2) var(--s2) var(--s4);margin:var(--s2) 0 var(--s4);max-width:100%}
.copy code{background:none;padding:0;flex:1 1 auto;min-width:0;font-size:14px;line-height:1.5;white-space:normal;overflow-wrap:anywhere}
.copy button{flex:none;min-height:36px;min-width:44px;border:1px solid var(--line-strong);background:var(--surface);color:var(--text);border-radius:var(--r-sm);padding:0 12px;font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.copy button:hover{background:var(--bg-2)}
.label{display:block;font-size:14px;font-weight:600;margin:var(--s5) 0 0}
.term{background:var(--term-bg);color:var(--term-text);border-radius:var(--r);padding:var(--s4) var(--s5);font:13.5px/1.7 var(--mono);overflow-x:auto;white-space:pre-wrap;overflow-wrap:anywhere;margin:var(--s3) 0 var(--s4)}
.term .c{color:var(--term-dim)}
.term .a{color:var(--term-acc)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .term,:root:not([data-theme=light]) .tools{border:1px solid var(--line)}}

/* flow diagram */
.flow{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;gap:var(--s4);margin:var(--s6) 0 var(--s4)}
.flow .node{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:var(--s4);text-align:center;min-width:0}
.flow .node.hl{border-color:var(--accent-line);background:var(--accent-soft)}
.flow .node b{display:block;font-size:15px;margin-bottom:2px}
.flow .node small{display:block;color:var(--muted);font-size:13px;line-height:1.45}
.flow .arrow{position:absolute;top:50%;z-index:1;display:flex;align-items:center;justify-content:center;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;background:var(--bg);border:1px solid var(--line);color:var(--muted);font-size:15px;line-height:1}
.flow .arrow:nth-child(2){left:calc((100% - 2 * var(--s4)) / 3 + var(--s4) / 2)}
.flow .arrow:nth-child(4){left:calc((100% - 2 * var(--s4)) * 2 / 3 + var(--s4) * 1.5)}
.sec.alt .flow .arrow{background:var(--bg-2)}
@media (max-width:760px){.flow{grid-template-columns:1fr;gap:var(--s2)}.flow .arrow{position:static;margin:0;justify-self:center;transform:rotate(90deg)}}

/* pricing */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:var(--s5);max-width:860px;margin:0 auto var(--s5)}
.plan{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s6);display:flex;flex-direction:column;min-width:0}
.plan.hl{border:2px solid var(--accent);padding:calc(var(--s6) - 1px);box-shadow:var(--shadow)}
.plan .tag{position:absolute;top:-13px;left:var(--s6);background:var(--accent);color:var(--accent-ink);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border-radius:999px;padding:3px 10px}
.plan h2,.plan h3{font-size:20px;margin:0 0 var(--s1);letter-spacing:-.01em}
.plan .for{color:var(--muted);font-size:15px;margin:0 0 var(--s5)}
.plan .price{font-size:46px;font-weight:700;letter-spacing:-.03em;line-height:1;margin:0}
.price .was{font-weight:500;color:var(--muted);text-decoration-thickness:2px;margin-right:.15em}
.plan .price small{font-size:15px;font-weight:500;color:var(--muted);letter-spacing:0}
.plan .checks{flex:1 1 auto;margin:var(--s5) 0 var(--s6)}
.plan .btn{width:100%}
.plan .fine{margin:var(--s3) 0 0;font-size:13.5px;color:var(--muted);text-align:center}
.pay-note{max-width:860px;margin:0 auto;color:var(--muted);font-size:15px;text-align:center}

/* prompts */
.prompt{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:var(--s5);min-width:0}
.prompt q{display:block;quotes:none;font-weight:600;font-size:16px;line-height:1.5;margin:0 0 var(--s2)}
.prompt p{margin:0;color:var(--muted);font-size:14.5px}
.tags{display:flex;gap:var(--s2);flex-wrap:wrap;margin:0;padding:0;list-style:none}
.tags a{display:inline-flex;align-items:center;min-height:36px;border:1px solid var(--line-strong);border-radius:999px;padding:0 14px;font-size:14px;font-weight:500;color:var(--text);text-decoration:none;background:var(--surface)}
.tags a:hover{border-color:var(--accent);color:var(--accent)}

/* callouts */
.note{border:1px solid var(--line);border-left:3px solid var(--warn);background:var(--warn-soft);padding:var(--s3) var(--s4);border-radius:var(--r-sm);margin:var(--s4) 0;font-size:15px}
.note.info{border-left-color:var(--accent);background:var(--accent-soft)}

/* FAQ + generic details */
details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:var(--s3) var(--s4);margin:0 0 var(--s3)}
summary{cursor:pointer;font-weight:600;padding:var(--s1) 0}
details[open] summary{margin-bottom:var(--s2)}
.faq{max-width:820px;margin:0 auto;border-top:1px solid var(--line)}
.faq details{background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:0;margin:0}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--s4);padding:var(--s4) 0;font-size:16.5px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--line-strong);background:linear-gradient(var(--muted),var(--muted)) center/10px 1.5px no-repeat,linear-gradient(var(--muted),var(--muted)) center/1.5px 10px no-repeat}
.faq details[open] summary::after{background:linear-gradient(var(--muted),var(--muted)) center/10px 1.5px no-repeat}
.faq summary:hover::after{border-color:var(--muted)}
.faq details[open] summary{margin:0}
.faq details p{margin:0 0 var(--s4);color:var(--muted);max-width:70ch}

/* CTA band */
.cta{text-align:center}
.cta h2{font-size:clamp(26px,3.6vw,36px);margin:0 0 var(--s3)}
.cta p{color:var(--muted);margin:0 auto var(--s5);max-width:56ch;font-size:17px}
.cta .btns{justify-content:center}

/* document pages (legal, support, account) */
.doc{padding-top:var(--s7);padding-bottom:var(--s8);max-width:760px}
.doc h1{font-size:clamp(30px,4vw,40px);letter-spacing:-.025em;margin:0 0 var(--s3)}
.doc h2{font-size:22px;margin:var(--s7) 0 var(--s3)}
.doc h3{font-size:17px}
.doc .meta{color:var(--muted);font-size:14px;margin:0 0 var(--s6)}
.doc li{margin-bottom:var(--s2)}
.doc>p,.doc>div>p{margin:0 0 var(--s4)}
.doc .card{margin:var(--s4) 0}
.doc ul{padding-left:22px}
.m{color:var(--muted);font-size:15px}

/* forms (account pages) */
label{font-weight:500;font-size:15px}
input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea{font:inherit;font-size:16px;color:var(--text);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-sm);min-height:44px;padding:9px 12px;line-height:1.5;width:100%;max-width:400px;margin-top:6px;transition:border-color .15s,box-shadow .15s}
input:not([type=checkbox]):not([type=radio]):not([type=hidden]):hover,select:hover{border-color:var(--muted)}
input:not([type=checkbox]):not([type=radio]):not([type=hidden]):focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft),0 0 0 1px var(--accent)}
input::placeholder{color:var(--muted);opacity:.8}
input[type=checkbox],input[type=radio]{accent-color:var(--accent);width:18px;height:18px;vertical-align:-3px;margin:0 6px 0 0}
.doc form{margin:0 0 var(--s4)}
.doc form p{margin:0 0 var(--s4)}
.doc button.btn{font-weight:600}
.inl{display:inline}
.doc form.inl{margin:0}
.row{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap}
.row input:not([type=checkbox]):not([type=radio]):not([type=hidden]),.row select{flex:1 1 200px;width:auto;margin-top:0}
.row .btn{flex:none}
.doc .row{margin-top:6px}
.doc ul li form.inl{margin-left:var(--s2)}
.err{color:var(--err);background:var(--err-soft);border:1px solid currentColor;border-radius:var(--r-sm);padding:var(--s3) var(--s4)}
.doc p[role=status]{color:var(--ok);background:var(--ok-soft);border:1px solid currentColor;border-radius:var(--r-sm);padding:var(--s3) var(--s4)}
.adm{width:100%;border-collapse:collapse;font-size:14px;margin:var(--s4) 0}
.adm th,.adm td{border-bottom:1px solid var(--line);padding:var(--s2) var(--s2);text-align:left;vertical-align:top}
.adm th{background:var(--bg-2);font-weight:600}
.adm select{min-height:34px;padding:4px 8px;margin:0;width:auto}
.doc .adm input:not([type=hidden]){max-width:150px;min-height:34px;padding:4px 8px;margin:0}

/* footer */
footer{border-top:1px solid var(--line);background:var(--bg-2);padding:var(--s7) 0 var(--s6);color:var(--muted);font-size:14px}
footer .fcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:var(--s6)}
footer .fcols b{display:block;color:var(--text);margin-bottom:var(--s3);font-size:14px}
footer .fcols a{display:block;color:var(--muted);text-decoration:none;padding:3px 0}
footer .fcols a:hover{color:var(--text);text-decoration:underline}
footer .fcols p{margin:0;max-width:34ch}
footer .legal{margin:var(--s6) 0 0;padding-top:var(--s5);border-top:1px solid var(--line);font-size:13px}

@media (prefers-reduced-motion:reduce){*{transition:none !important;scroll-behavior:auto !important}}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
[id]{scroll-margin-top:84px}

/* contact form */
.contact{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5);margin:var(--s5) 0 0}
.contact .field{margin:0 0 var(--s4)}
.contact label{display:block}
.contact input:not([type=checkbox]):not([type=hidden]),.contact textarea{max-width:none}
.contact textarea{min-height:160px;resize:vertical;line-height:1.5}
.contact .opt{color:var(--muted);font-weight:400}
.hp{position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.sent{color:var(--ok);background:var(--ok-soft);border:1px solid currentColor;border-radius:var(--r-sm);padding:var(--s3) var(--s4);margin:var(--s4) 0}
.sent[hidden]{display:none}
.err[hidden]{display:none}
/* account page banners (Pro ended, Free limit reached) and admin message text */
.notice{color:var(--text);background:var(--warn-soft);border:1px solid var(--warn);border-left-width:4px;border-radius:var(--r-sm);padding:var(--s3) var(--s4);margin:var(--s4) 0}
.notice a{color:inherit;font-weight:600}
.pre{white-space:pre-wrap;overflow-wrap:anywhere}
[tabindex="-1"]:focus{outline:none}
.card .checks,.plan .checks{padding-left:0}
a.lang{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
a.lang:hover{color:var(--text)}

/* guides */
.crumbs{display:flex;flex-wrap:wrap;gap:var(--s2);font-size:14px;color:var(--muted);margin:0 0 var(--s5)}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--text)}
.article .lead{margin-bottom:var(--s5)}
.article h2{margin-top:var(--s7)}
@media (max-width:760px){.article .flow{grid-template-columns:1fr}}
.article .grid,.article .prompt,.article .copy,.article .term{margin-bottom:var(--s4)}
.article ol.steps li .term{margin-top:var(--s2)}
.cta-box{margin:var(--s7) 0 0;padding:var(--s6);border:1px solid var(--accent-line);background:var(--accent-soft);border-radius:var(--r-lg)}
.cta-box h2{margin:0 0 var(--s2);font-size:22px}
.cta-box p{margin:0 0 var(--s4);color:var(--muted)}
.table-wrap{overflow-x:auto;margin:var(--s4) 0;border:1px solid var(--line);border-radius:var(--r)}
.cmp{width:100%;border-collapse:collapse;font-size:14.5px;min-width:560px}
.cmp th,.cmp td{padding:var(--s3);border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.cmp thead th{background:var(--bg-2);font-weight:600}
.cmp tbody th{font-weight:600;color:var(--text)}
.cmp td{color:var(--muted)}
.cmp td:last-child{color:var(--text);background:var(--accent-soft)}
.cmp tr:last-child th,.cmp tr:last-child td{border-bottom:0}
a.card.link h2,a.card.link h3{text-wrap:pretty}
a.card.link{display:block;text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s}
a.card.link:hover{border-color:var(--accent);box-shadow:var(--shadow)}
a.card.link h2,a.card.link h3{font-size:17px;margin:0 0 var(--s2);color:var(--text)}
a.card.link:hover h2,a.card.link:hover h3{color:var(--accent)}
.doc .checks{padding-left:0}

/* account pages (server-rendered: /signup, /login, /app, /admin) */
body.acct{min-height:100vh;display:flex;flex-direction:column}
body.acct main{flex:1 0 auto;width:100%}
.doc.wide{max-width:1120px}
.field{margin:0 0 var(--s4)}
.field label{display:block;font-size:14px;font-weight:600}
.hint{color:var(--muted);font-weight:400}
.btn.block{width:100%}
.btn.danger{color:var(--err);border-color:color-mix(in srgb,var(--err) 45%,var(--line-strong))}
.btn.danger:hover{background:var(--err-soft);color:var(--err);border-color:var(--err)}
/* sign-in / sign-up: one centred card; the form is exactly 320px wide = the Google button (data-width) */
.doc.auth{max-width:none;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:var(--s8);padding-bottom:var(--s8)}
.auth-card{width:100%;max-width:402px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:var(--s6) 40px}
.auth-card h1{font-size:26px;letter-spacing:-.02em;text-align:center;margin:0 0 var(--s2)}
.doc .auth-sub{text-align:center;color:var(--muted);font-size:15px;margin:0 0 var(--s5)}
.auth-card .err,.auth-card p[role=status]{font-size:14px;margin:0 0 var(--s4)}
.auth-card .copy{margin:0}
.auth .field input:not([type=checkbox]){max-width:none}
.auth .field.check{margin:var(--s1) 0 var(--s5)}
.auth .field.check label{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:14px;line-height:1.5;color:var(--muted)}
.auth .field.check input{flex:none;margin:1px 0 0}
.doc .auth-alt{text-align:center;color:var(--muted);font-size:15px;margin:var(--s5) 0 0}
.gsi{display:flex;flex-direction:column;align-items:center;min-height:44px}
.gsi .g_id_signin{width:320px;max-width:100%;min-height:44px;display:flex;justify-content:center;align-items:center}
.gsi .gsi-dark{display:none}
.g_id_signin iframe{color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .gsi .gsi-light{display:none}:root:not([data-theme=light]) .gsi .gsi-dark{display:flex}}
:root[data-theme=dark] .gsi .gsi-light{display:none}:root[data-theme=dark] .gsi .gsi-dark{display:flex}
.or{display:flex;align-items:center;gap:var(--s3);color:var(--muted);font-size:13px;margin:var(--s5) 0;white-space:nowrap}
.or::before,.or::after{content:"";flex:1 1 0;height:1px;background:var(--line)}
@media (max-width:420px){.auth-card{padding:var(--s5) calc((100% - 322px)/2)}.doc.auth{padding-top:var(--s6);justify-content:flex-start}}
@media (max-width:373px){.auth-card{padding:0;border:0;box-shadow:none;background:none}}
/* /app */
.acct-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;margin:0 0 var(--s5)}
.acct-head h1{margin:0 0 var(--s1)}
.doc .acct-head p{margin:0}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5);margin:0 0 var(--s4)}
.panel h2{font-size:18px;margin:0 0 var(--s3);letter-spacing:-.01em}
.panel>p{margin:0 0 var(--s3)}
.panel>:last-child,.panel form:last-child,.panel .copy:last-child{margin-bottom:0}
.panel .btns{margin:var(--s4) 0 var(--s3)}
.panel .btns:last-child{margin-bottom:0}
.panel .field input:not([type=checkbox]){max-width:none}
.panel .notice{margin:0 0 var(--s3)}
.keybox{border:1px solid var(--accent-line);background:var(--accent-soft);border-radius:var(--r);padding:var(--s4) var(--s5);margin:0 0 var(--s4)}
.keybox h3{font-size:16px;margin:0 0 var(--s2)}
.keybox p{margin:0 0 var(--s2);font-size:15px}
.keybox .copy{background:var(--surface);margin:var(--s2) 0 var(--s3)}
.keybox p.m:last-child{margin:0}
.devs{list-style:none;margin:0 0 var(--s4);padding:0;border:1px solid var(--line);border-radius:var(--r)}
.devs li{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) var(--s2) var(--s2) var(--s4);margin:0;border-top:1px solid var(--line)}
.devs li:first-child{border-top:0}
.dev-name{font-weight:600;min-width:0;overflow-wrap:anywhere;margin-right:auto}
.state{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);white-space:nowrap}
.state::before,.pc::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--line-strong);flex:none}
.state.on,.pc.on{color:var(--ok)}
.state.on::before,.pc.on::before{background:var(--ok)}
.devs form.inl,.doc ul.devs li form.inl{margin:0}
.add-dev label{display:block;font-size:14px;font-weight:600}
.add-dev .row{max-width:none}
.doc .row .m{margin:0}
details.danger{background:none;border:0;border-top:1px solid var(--line);border-radius:0;padding:var(--s4) 0 0;margin:var(--s5) 0 0}
details.danger summary{color:var(--err);font-size:15px;padding:0}
details.danger[open] summary{margin-bottom:var(--s3)}
details.danger p{margin:0 0 var(--s3)}
/* /admin */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr));gap:var(--s3);margin:var(--s4) 0 var(--s3)}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:var(--s3) var(--s4)}
.stat span{display:block;font-size:13px;color:var(--muted)}
.stat b{display:block;font-size:22px;font-weight:700;letter-spacing:-.01em;line-height:1.3;color:var(--text)}
.doc .grid.pay{margin:var(--s4) 0}
.doc .grid.pay .card{margin:0;display:flex;flex-direction:column;gap:var(--s3)}
.grid.pay .card>*{margin:0}
.grid.pay .card .row{margin-top:0}
.grid.pay .card .row input:not([type=hidden]){flex:1 1 120px}
.doc .table-wrap{margin:var(--s4) 0}
.table-wrap .adm{margin:0;min-width:880px}
.adm td,.adm th{padding:var(--s3)}
.adm td{vertical-align:middle}
.adm tbody tr:last-child td{border-bottom:0}
.adm td:first-child{overflow-wrap:anywhere;min-width:180px}
.adm td small{display:block;margin-top:var(--s1)}
.adm .row.nw{flex-wrap:nowrap;gap:var(--s2);margin:0}
.doc .adm .row.nw input:not([type=hidden]){flex:1 1 auto;width:150px;max-width:180px}
.pc{display:flex;align-items:center;gap:6px;white-space:nowrap;color:var(--text)}
.card.msg{display:flex;flex-direction:column;gap:var(--s2)}
.card.msg>*{margin:0}
.card.msg form{margin:var(--s2) 0 0}
/* small footer on account pages */
footer.mini{padding:var(--s5) 0}
footer.mini .wrap{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);align-items:center;justify-content:space-between;font-size:13px}
footer.mini nav{display:flex;gap:var(--s5);flex-wrap:wrap}
footer.mini a{color:var(--muted);text-decoration:none}
footer.mini a:hover{color:var(--text);text-decoration:underline}

/* account pages: fixes after review */
.doc .card form .btn,.doc .panel form .btn{margin-top:0}
.doc ul.devs{padding:0}
.doc ul.devs li{margin:0}
.acct-head{align-items:center}
.adm th,.adm td:not(:first-child){white-space:nowrap}
@media (max-width:640px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.stat:last-child:nth-child(odd){grid-column:1/-1}}
@media (max-width:480px){.copy{flex-direction:column;align-items:stretch;gap:var(--s2);padding:var(--s3)}.copy button{width:100%}}
@media (max-width:480px){.panel{padding:var(--s4)}.keybox{padding:var(--s4) var(--s3)}.keybox .copy{padding:var(--s2)}.devs li{padding-left:var(--s3)}}

/* review round 2 */
/* compact controls (admin): inputs, selects and .btn.sm share one 36px height */
.adm input:not([type=hidden]),.adm select,.grid.pay input:not([type=hidden]){height:36px;min-height:36px;padding:0 10px;font-size:14px;line-height:34px;margin:0}
.adm .row.nw,.grid.pay .row{align-items:center}
.adm .row.nw small{margin:0 0 0 var(--s1);white-space:nowrap}
.doc .adm .row.nw input:not([type=hidden]){width:140px;max-width:none;flex:0 0 auto}
.doc .grid.pay .row input:not([type=hidden]){max-width:none}
/* /app: input grows, button on the right; on phones buttons full width like Copy */
.panel .row input:not([type=hidden]){flex:1 1 220px}
@media (max-width:480px){.panel .row>.btn{flex:1 1 100%;width:100%}.panel .row>.m{flex:1 1 100%;text-align:center}}
/* welcome: two columns share row tracks so blocks line up even when one heading wraps */
@supports (grid-template-rows:subgrid){@media (min-width:900px){.split.cols{grid-template-rows:repeat(4,auto);row-gap:0}.split.cols>div{display:grid;grid-template-rows:subgrid;grid-row:span 4;align-content:start}.split.cols>div>*{margin-top:0;align-self:start}.split.cols h2{align-self:end}}}
/* comparison table: stacked cards on phones, Bridgerator first */
@media (max-width:640px){
  .table-wrap:has(.cmp){border:0;overflow:visible}
  .cmp{min-width:0;display:block}
  .cmp thead{display:none}
  .cmp tbody{display:grid;gap:var(--s3)}
  .cmp tr{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface)}
  .cmp tbody th{padding:var(--s3) var(--s4);background:var(--bg-2);border-bottom:1px solid var(--line)}
  .cmp td{display:flex;justify-content:space-between;gap:var(--s4);padding:var(--s2) var(--s4);border-bottom:1px solid var(--line);text-align:right}
  .cmp td::before{content:attr(data-label);color:var(--muted);text-align:left;flex:0 0 42%}
  .cmp tbody th{order:-2}
  .cmp td:last-child{order:-1;font-weight:600;background:var(--accent-soft)}
  .cmp td:last-child::before{color:var(--accent)}
  .cmp td:nth-last-child(2){border-bottom:0}
  .cmp tr:last-child th{border-bottom:1px solid var(--line)}
}
/* narrow phones: menu labels fit */
@media (max-width:360px){header.top nav{column-gap:var(--s1)}header.top nav a{font-size:13px;padding:0 2px}}
.auth-card.nf{text-align:center}
.code404{margin:0 0 var(--s2);font:700 13px/1 var(--mono);letter-spacing:.12em;color:var(--accent)}
.auth-card.nf .btns{justify-content:center}
.auth-card.nf .btns .btn{flex:1 1 0}
/* /app dashboard: sidebar on desktop, a scrolling tab row on phones */
.dash{display:grid;grid-template-columns:200px minmax(0,1fr);gap:var(--s6);align-items:start}
.side{position:sticky;top:88px}
.side nav{display:flex;flex-direction:column;gap:2px}
.side nav a{display:flex;align-items:center;gap:10px;min-height:40px;padding:0 12px;border-radius:var(--r-sm);color:var(--muted);font-size:15px;font-weight:500;text-decoration:none;white-space:nowrap}
.side nav a:hover{background:var(--bg-2);color:var(--text)}
.side nav a svg{flex:none;opacity:.85}
.dash-main{min-width:0;max-width:820px}
.dash-main .acct-head h1{font-size:30px}
.dash .panel{padding:var(--s5) var(--s5) var(--s5)}
.panel-head{display:flex;align-items:center;gap:var(--s3);min-height:36px;margin:0 0 var(--s4);padding-right:170px}
.panel-head h2{margin:0}
.panel h3{font-size:15px;margin:0 0 var(--s2)}
#devices{position:relative}
.add-pc>summary{position:absolute;top:var(--s5);right:var(--s5);list-style:none}
.add-pc>summary::-webkit-details-marker{display:none}
.add-pc>summary::before{content:"+";font-size:18px;font-weight:500;line-height:1;margin-right:2px}
.add-pc[open]>summary{background:var(--surface);color:var(--text);border-color:var(--line-strong)}
.add-pc[open]>summary::before{content:"×"}
.add-pc{border:0;background:none;padding:0;margin:0;border-radius:var(--r)}
.add-pc[open]{border:1px solid var(--accent-line);background:var(--accent-soft);padding:var(--s4) var(--s5);margin:0 0 var(--s4)}
.add-pc[open]>summary{margin:0}
.pair-steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--s4);counter-reset:st}
.doc .pair-steps li{counter-increment:st;position:relative;padding-left:40px;margin:0}
.pair-steps li::before{content:counter(st);position:absolute;left:0;top:-2px;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:14px}
.pair-steps p{margin:0;font-size:15px}
.pair-steps .copy{background:var(--surface);margin:0}
.wait{display:flex;align-items:center;gap:var(--s2);color:var(--muted)}
.wait::before{content:"";width:10px;height:10px;border-radius:50%;border:2px solid var(--accent);border-right-color:transparent;flex:none;animation:spin 1s linear infinite}
.wait.ok{color:var(--ok);font-weight:600}
.wait.ok::before{display:none}
@keyframes spin{to{transform:rotate(1turn)}}
details.adv{margin:var(--s4) 0 0;padding:var(--s3) 0 0;border:0;border-top:1px solid var(--accent-line);border-radius:0;background:none}
details.adv summary{cursor:pointer;font-size:14px;font-weight:600;color:var(--muted)}
details.adv[open] summary{margin-bottom:var(--s3)}
details.adv .keybox{background:var(--surface)}
details.adv .add-dev{margin:var(--s3) 0 0}
.devs .dot{width:10px;height:10px;border-radius:50%;background:var(--line-strong);flex:none}
.devs .dot.on{background:var(--ok);box-shadow:0 0 0 3px var(--ok-soft)}
.dev-main{display:flex;flex-direction:column;min-width:0;flex:1 1 auto;padding:6px 0}
.dev-name{font-weight:600;overflow-wrap:anywhere}
.dev-seen{font-size:13px;color:var(--muted)}
.dev-seen .on{color:var(--ok);font-weight:600}
.panel .empty{margin:0}
.use .card{display:flex;flex-direction:column;gap:var(--s2);margin:0}
.use .card .btn{margin-top:auto;align-self:flex-start}
.use .card .copy{margin:0;flex-direction:column;align-items:stretch;gap:var(--s2);padding:var(--s3)}
.use .card .copy code{font-size:13px}
.use .card .copy button{align-self:flex-start}
.dash #settings .field input:not([type=checkbox]){max-width:400px}
.dash #settings .row{max-width:none}
.usage-line{font-size:16px;margin:0}
.usage-line b{font-size:22px;letter-spacing:-.01em}
.meter{display:block;width:100%;height:10px;margin:var(--s3) 0 var(--s3);border:0;border-radius:999px;background:var(--line);overflow:hidden;-webkit-appearance:none;appearance:none}
.meter::-webkit-progress-bar{background:var(--line);border-radius:999px}
.meter::-webkit-progress-value{background:var(--accent);border-radius:999px}
.meter::-moz-progress-bar{background:var(--accent);border-radius:999px}
.meter.hi::-webkit-progress-value{background:var(--warn)}
.meter.hi::-moz-progress-bar{background:var(--warn)}
#settings h3{margin-top:0}
@media (max-width:900px){
  .dash{grid-template-columns:minmax(0,1fr);gap:var(--s4)}
  .side{position:static;margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter);border-bottom:1px solid var(--line);overflow-x:auto}
  .side nav{flex-direction:row;gap:var(--s1)}
  .side nav a{min-height:44px;padding:0 10px;font-size:14px;border-radius:0;border-bottom:2px solid transparent}
  .side nav a:hover{background:none;border-bottom-color:var(--line-strong)}
  .side nav a svg{display:none}
  .dash-main{max-width:none}
}
@media (max-width:480px){
  .dash .panel{padding:var(--s4)}
  .add-pc>summary{top:var(--s4);right:var(--s4)}
  .panel-head{padding-right:0;flex-wrap:wrap;min-height:36px}
  .panel-head .m{flex-basis:100%}
  .add-pc[open]{padding:var(--s4) var(--s3)}
  .doc .pair-steps li{padding-left:36px}
}
/* /pair confirmation */
.pair-code{margin:0 0 var(--s4);text-align:center;font:700 30px/1.2 var(--mono);letter-spacing:.12em;padding:var(--s3);border:1px dashed var(--accent-line);background:var(--accent-soft);border-radius:var(--r);color:var(--text)}
.pair-info{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s1) var(--s4);margin:0 0 var(--s4);font-size:15px}
.pair-info dt{color:var(--muted)}
.pair-info dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.auth-card .notice{font-size:14px;margin:0 0 var(--s4)}
.ok-mark{margin:0 auto var(--s3);width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--ok-soft);color:var(--ok);font-size:24px;font-weight:700}
.doc .wait{background:none;border:0;padding:0;color:var(--muted)}
.doc .wait.ok{color:var(--ok)}
/* admin panel (/admin, /admin/accounts, /admin/accounts/:email) */
.side nav a[aria-current=page]{background:var(--accent-soft);color:var(--accent);font-weight:600}
.dash-main.wide{max-width:none}
a.stat{text-decoration:none;transition:border-color .15s}
a.stat:hover{border-color:var(--accent)}
.dash .stats{margin:0 0 var(--s4)}
.dash #payments>h2:first-child{margin-top:0}
.dash #payments .grid.pay{margin:0}
.dash .card.msg{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s1) var(--s4);align-items:start;margin:0 0 var(--s2);padding:var(--s3) var(--s4)}
.dash .card.msg p{margin:0}
.dash .card.msg p.pre{grid-column:1;color:var(--text);white-space:pre-wrap}
.dash .card.msg form{grid-column:2;grid-row:1/span 2;margin:0}
.search{flex-wrap:nowrap}
.doc .search input[type=search]{width:260px;max-width:100%;margin:0;min-height:36px;padding:4px 10px;font-size:14px}
.acc{width:100%;min-width:860px;border-collapse:collapse;table-layout:fixed;font-size:14px}
.acc .c-plan{width:168px}.acc .c-until{width:108px}.acc .c-use{width:136px}.acc .c-pcs{width:116px}.acc .c-day{width:104px}.acc .c-act{width:116px}
.doc.wide:has(.dash-main.wide){max-width:1360px}
.acc th,.acc td{height:56px;padding:0 var(--s3);border-bottom:1px solid var(--line);text-align:left;vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acc th{height:40px;background:var(--bg-2);color:var(--muted);font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.acc .num{text-align:right;font-variant-numeric:tabular-nums}
.acc tbody tr:last-child td{border-bottom:0}
.acc tbody tr:hover td{background:var(--bg-2)}
.who{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0}
.who a{max-width:100%}
.who a{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);font-weight:600;text-decoration:none}
.who a:hover{color:var(--accent);text-decoration:underline}
.tag{font-size:12px;line-height:16px;color:var(--muted)}
.pill{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;border:1px solid var(--line);background:var(--bg-2);color:var(--muted);font-size:12.5px;font-weight:600;white-space:nowrap}
.pill.pro{color:var(--ok);background:var(--ok-soft);border-color:color-mix(in srgb,var(--ok) 35%,transparent)}
.pill.grant{color:var(--accent);background:var(--accent-soft);border-color:var(--accent-line)}
.meter.thin{height:4px;margin:4px 0 0}
.acc .btn.sm{min-height:32px;padding:0 12px}
.pager{display:flex;align-items:center;justify-content:center;gap:var(--s4);margin:var(--s4) 0 0}
.crumbs.m{margin:0 0 var(--s1);font-size:14px}
.who-h{font-size:26px !important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.dash .acct-head>div{min-width:0}
.plan-state{font-size:17px;font-weight:600}
.dash .btns form.inl{display:inline-flex}
.doc form.until{margin:var(--s3) 0 var(--s3);gap:var(--s2)}
.until label{font-weight:600;font-size:14px}
.doc .until input[type=date]{flex:0 0 auto;width:auto;margin:0;min-height:36px;padding:4px 10px;font-size:14px}
details.confirm{margin:0 0 var(--s3);padding-top:0;border-top:0}
details.confirm summary{color:var(--err)}
.kv{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:var(--s2) var(--s5);margin:0;font-size:15px}
.kv dt{color:var(--muted)}
.kv dd{margin:0;overflow-wrap:anywhere}
.danger-zone{border-color:color-mix(in srgb,var(--err) 40%,var(--line))}
.danger-zone h2{color:var(--err)}
.danger-zone .row input{max-width:340px}
@media (max-width:480px){.search{flex-wrap:wrap;width:100%}.doc .search input[type=search]{width:auto;flex:1 1 auto}}
/* "Let an AI install it for you" */
details.ai-help{margin:var(--s5) 0 0}
.sec details.ai-help{max-width:820px}
.copy.ai{flex-direction:column;align-items:stretch;gap:var(--s2);padding:var(--s3);background:var(--surface)}
.copy.ai pre{margin:0;max-height:300px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;font:12.5px/1.55 var(--mono);color:var(--text)}
.copy.ai button{align-self:flex-start}
/* /app shell: full-height sidebar + narrow content column (no site header/footer) */
body.app{min-height:100vh;background:var(--bg)}
.shell{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100vh}
.s-side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:var(--s4);padding:var(--s4) var(--s3);background:var(--bg-2);border-right:1px solid var(--line);overflow-y:auto}
.s-brand{display:flex;align-items:center;gap:10px;padding:4px 8px var(--s2);color:var(--text);text-decoration:none}
.s-brand span{display:flex;flex-direction:column;line-height:1.2}
.s-brand b{font-size:15px}
.s-brand small{font-size:12px;color:var(--muted)}
.s-nav{display:flex;flex-direction:column;gap:2px}
.s-nav a{position:relative;display:flex;align-items:center;gap:10px;min-height:38px;padding:0 10px;border-radius:var(--r-sm);color:var(--muted);font-size:14.5px;font-weight:500;text-decoration:none;white-space:nowrap}
.s-nav a:hover{background:color-mix(in srgb,var(--text) 6%,transparent);color:var(--text)}
.s-nav a[aria-current=page]{background:var(--accent-soft);color:var(--accent);font-weight:600}
.s-nav a[aria-current=page]::before{content:"";position:absolute;left:-12px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--accent)}
.s-usage{margin-top:auto;padding:var(--s3);border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.s-usage p{margin:0;font-size:13px}
.s-u-top{display:flex;justify-content:space-between;align-items:baseline;font-weight:600;color:var(--text)}
.s-u-top b{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.s-usage .meter.thin{margin:var(--s2) 0}
.s-usage .btn{margin-top:var(--s3);color:var(--accent-ink)}
.s-pro{margin-top:var(--s2) !important;font-weight:600;color:var(--ok)}
.s-user{display:flex;align-items:center;gap:var(--s2);min-width:0;padding:0 4px}
.avatar{flex:none;width:32px;height:32px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--accent);color:var(--accent-ink);font-size:12px;font-weight:700}
.s-mail{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:var(--text)}
.s-links{display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;margin:0;padding:0 4px;font-size:12px}
.s-links a{color:var(--muted);text-decoration:none}
.s-links a:hover{color:var(--text);text-decoration:underline}
.s-links .lang{min-height:24px;min-width:0;padding:0 6px;font-size:11px;margin-left:auto}
.s-main{min-width:0}
.s-col.doc{max-width:640px;margin:0 auto;padding:var(--s5) var(--gutter) var(--s8)}
.v-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s4);margin:var(--s2) 0 var(--s5)}
.doc .v-head h1{font-size:26px;margin:0 0 var(--s1)}
.v-head p.m{margin:0}
.v-head .btn{flex:none;color:var(--accent-ink)}
.card2{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);margin:0 0 var(--s4);overflow:hidden}
.card2.pad{padding:var(--s5)}
.card2.pad h2{font-size:16px;margin:0 0 var(--s3)}
.card2.pad>:last-child{margin-bottom:0}
.c-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s3) var(--s4);border-bottom:1px solid var(--line)}
.doc .c-head h2{font-size:15px;margin:0}
.rows{list-style:none;margin:0;padding:0}
.doc .rows li{display:flex;align-items:center;gap:var(--s3);min-height:64px;padding:var(--s2) var(--s4);margin:0;border-top:1px solid var(--line)}
.rows li:first-child{border-top:0}
.rows .dot{width:9px;height:9px;border-radius:50%;background:var(--line-strong);flex:none}
.rows .dot.on{background:var(--ok);box-shadow:0 0 0 3px var(--ok-soft)}
.r-main{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
.r-main b{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.r-main>span{font-size:13px;color:var(--muted)}
.doc ul.rows{padding:0;margin:0}
.r-state{font-size:13px;color:var(--muted)}
.tile{flex:none;width:36px;height:36px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:var(--accent-soft);color:var(--accent)}
.btn.sm.soft{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent)}
.btn.sm.danger{background:none}
.txt-danger{border:0;background:none;padding:6px 4px;font:inherit;font-size:13px;font-weight:600;color:var(--err);cursor:pointer}
.txt-danger:hover{text-decoration:underline}
.c-foot{margin:0 !important;padding:var(--s3) var(--s4);border-top:1px solid var(--line);font-size:13px}
.c-foot a{color:var(--muted)}
.empty-state{padding:var(--s6) var(--s4);text-align:center}
.empty-state p{margin:0 0 var(--s1)}
.empty-state .btn{margin-top:var(--s3);color:var(--accent-ink)}
.notice.banner{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin:0 0 var(--s4);font-size:14px}
.notice.banner a{flex:none;white-space:nowrap}
.card2 .k{margin:0;font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.plan-name{margin:2px 0 var(--s2) !important;font-size:24px;font-weight:700;letter-spacing:-.01em}
.card2 .field input:not([type=checkbox]){max-width:400px}
/* "Add a computer" modal */
.modal{width:min(520px,calc(100% - 32px));max-height:calc(100vh - 48px);overflow:auto;padding:var(--s5) var(--s5) var(--s4);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);color:var(--text);box-shadow:0 24px 64px rgba(0,0,0,.35)}
.modal::backdrop{background:rgba(5,8,15,.62)}
.modal h2{font-size:20px;margin:0 0 var(--s2)}
.modal .c{text-align:center}
.modal form.x{position:absolute;top:10px;right:10px;margin:0}
.modal .x button{width:36px;height:36px;border:0;border-radius:var(--r-sm);background:none;color:var(--muted);font-size:22px;line-height:1;cursor:pointer}
.modal .x button:hover{background:var(--bg-2);color:var(--text)}
.stepper{display:flex;gap:var(--s2);list-style:none;margin:0 0 var(--s5);padding:0;font-size:12.5px;color:var(--muted)}
.stepper li{display:flex;align-items:center;gap:6px}
.stepper li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--line-strong)}
.stepper li+li::after{content:none}
.stepper li.on{color:var(--text);font-weight:600}
.stepper li.on::before{background:var(--accent)}
.stepper li+li{padding-left:var(--s2);border-left:1px solid var(--line)}
.cmd{display:flex;gap:var(--s2);margin:var(--s4) 0;padding:var(--s3) var(--s4);border-radius:var(--r);background:var(--term-bg);color:var(--term-text);font:13px/1.6 var(--mono)}
.cmd span{color:var(--term-acc);flex:none}
.cmd code{background:none;padding:0;color:inherit;font-size:13px;overflow-wrap:anywhere}
.modal .btn.primary{color:var(--accent-ink)}
.modal details.ai-help{margin:var(--s3) 0 0;padding:0;border:0;background:none}
.modal details summary{font-size:13.5px;font-weight:600;color:var(--muted)}
.modal details.adv{margin:var(--s4) 0 0}
.mini{margin:0 0 var(--s4);padding-left:20px;font-size:15px}
.mini li{margin:0 0 var(--s2)}
.modal .wait{margin:0 0 var(--s4)}
.modal .ok-mark{margin-top:var(--s2)}
.modal-foot{margin:var(--s4) 0 0;padding-top:var(--s3);border-top:1px solid var(--line);font-size:12.5px}
.modal .keybox{margin:var(--s3) 0}
@media (max-width:760px){
  .shell{display:block}
  .s-side{position:static;height:auto;display:grid;grid-template-columns:1fr auto;gap:var(--s2);padding:var(--s3) var(--gutter) 0;border-right:0;border-bottom:1px solid var(--line);overflow:visible}
  .s-brand{padding:0}
  .s-links{grid-column:2;grid-row:1;justify-self:end;padding:0}
  .s-links a{display:none}
  .s-nav{grid-column:1/-1;flex-direction:row;gap:var(--s1);margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter);overflow-x:auto}
  .s-nav a{border-radius:0;min-height:44px;padding:0 10px;border-bottom:2px solid transparent}
  .s-nav a[aria-current=page]{background:none;border-bottom-color:var(--accent)}
  .s-nav a[aria-current=page]::before,.s-nav svg{display:none}
  .s-user{display:none}
  .s-usage{grid-column:1/-1;margin:var(--s2) 0 var(--s3)}
  .s-col.doc{padding-top:var(--s4)}
  .modal{width:100%;max-width:none;max-height:100vh;margin:auto 0 0;border-radius:var(--r-lg) var(--r-lg) 0 0}
}
@media (max-width:480px){.v-head{flex-wrap:wrap}.doc .rows li{gap:var(--s2);padding:var(--s2) var(--s3)}.rows .r-state{display:none}.rows .tile{width:32px;height:32px}}
/* /app/usage */
.stat-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
.stat-row .card2{margin:0 0 var(--s4)}
.big{margin:var(--s1) 0 var(--s2) !important;font-size:30px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.big span{font-size:16px;font-weight:500;color:var(--muted)}
.card2 .sub{margin:-8px 0 var(--s4)}
.chart{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s2);margin:0 0 var(--s4)}
.chart .y{display:flex;flex-direction:column;justify-content:space-between;height:164px;margin-top:-7px;font-size:11.5px;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.chart .y span{line-height:14px}
.chart svg{display:block;width:100%;height:150px}
.chart .bar{fill:color-mix(in srgb,var(--accent) 45%,transparent)}
.chart .bar.now{fill:var(--accent)}
.chart .grid{stroke:var(--line);stroke-dasharray:4 4;vector-effect:non-scaling-stroke}
.chart .axis{stroke:var(--line-strong);vector-effect:non-scaling-stroke}
.chart .x{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;margin-top:6px;font-size:12px;color:var(--muted);text-align:center}
@media (max-width:560px){.stat-row{grid-template-columns:1fr;gap:0}}
/* /app visual system: neutral greys + saturated blue (overrides the site tokens on app pages only) */
body.app{--bg:#ffffff;--bg-2:#f6f6f7;--surface:#ffffff;--line:#ececee;--card-line:#e4e4e7;--line-strong:#d4d4d8;--text:#111113;--muted:#6b6b73;
  --accent:#0a84ff;--accent-hover:#3d9bff;--accent-ink:#ffffff;--accent-soft:#e8f2ff;--accent-line:#b9d8ff;--code-bg:#f4f4f5;
  --chip-blue-bg:#e6f1ff;--chip-blue:#0a6cd6;--red:#dc2626;--red-line:#fecaca;--tile-green:#e3f5ea;--tile-green-ink:#178a4a;--tile-grey:#ededf0;
  --ok:#16a34a;--ok-soft:#dcfce7;background:var(--bg);color:var(--text)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) body.app{--bg:#0a0a0a;--bg-2:#0f0f10;--surface:#141416;--line:#1f1f22;--card-line:#26262a;--line-strong:#34343a;--text:#ededed;--muted:#8b8b92;
  --accent:#0a84ff;--accent-hover:#3d9bff;--accent-ink:#ffffff;--accent-soft:rgba(10,132,255,.12);--accent-line:rgba(10,132,255,.35);--code-bg:#1a1a1d;
  --chip-blue-bg:#0b2a4a;--chip-blue:#58a6ff;--red:#f87171;--red-line:#7f1d1d;--tile-green:#12301f;--tile-green-ink:#4ade80;--tile-grey:#232327;
  --ok:#22c55e;--ok-soft:rgba(34,197,94,.15);--warn-soft:#1f1a0e;--term-bg:#0e0e10}}
:root[data-theme=dark] body.app{--bg:#0a0a0a;--bg-2:#0f0f10;--surface:#141416;--line:#1f1f22;--card-line:#26262a;--line-strong:#34343a;--text:#ededed;--muted:#8b8b92;
  --accent:#0a84ff;--accent-hover:#3d9bff;--accent-ink:#ffffff;--accent-soft:rgba(10,132,255,.12);--accent-line:rgba(10,132,255,.35);--code-bg:#1a1a1d;
  --chip-blue-bg:#0b2a4a;--chip-blue:#58a6ff;--red:#f87171;--red-line:#7f1d1d;--tile-green:#12301f;--tile-green-ink:#4ade80;--tile-grey:#232327;
  --ok:#22c55e;--ok-soft:rgba(34,197,94,.15);--warn-soft:#1f1a0e;--term-bg:#0e0e10}
:root[data-theme=light]{color-scheme:light}
body.app .mono{font-family:var(--mono)}
body.app .s-side{background:var(--bg-2);border-right:1px solid var(--line)}
body.app .s-nav a{font-size:14px;min-height:36px}
body.app .s-nav a svg{width:16px;height:16px;color:var(--muted)}
body.app .s-nav a[aria-current=page]{background:none;color:var(--accent)}
body.app .s-nav a[aria-current=page] svg{color:var(--accent)}
body.app .s-nav a[aria-current=page]::before{left:-12px;background:var(--accent)}
body.app .s-usage{background:var(--surface);border:1px solid var(--card-line);border-radius:12px}
body.app .s-usage .meter.thin{height:4px}
body.app .s-usage .mono{font-size:12px}
body.app .s-usage .btn{min-height:32px;border-radius:8px;font-size:13px}
body.app .s-col.doc{max-width:820px}
body.app .v-head h1{font-size:28px;font-weight:700;letter-spacing:-.02em}
body.app .v-head p.m{font-size:14px}
body.app .btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
body.app .btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
body.app .v-head .btn.primary{min-height:36px;padding:0 14px;border-radius:8px;font-size:14px}
body.app .card2{background:var(--surface);border:1px solid var(--card-line);border-radius:12px}
body.app .c-head{border-bottom:1px solid var(--line)}
body.app .c-head.col{flex-direction:column;align-items:flex-start;gap:2px}
body.app .c-head.col p{margin:0;font-size:13px}
body.app .doc .c-head h2{font-size:14px;font-weight:600}
body.app .doc .rows li{min-height:64px;border-top:1px solid var(--line);gap:var(--s2)}
body.app .r-main b{font-size:14px;font-weight:600}
body.app .r-main b.mono{font-weight:700;font-size:13.5px}
body.app .r-main>span{font-size:12px}
body.app .rows .dot{width:8px;height:8px;margin-right:4px}
.chip{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:6px;border:0;background:none;font:inherit;font-size:12px;font-weight:500;white-space:nowrap;cursor:pointer}
.chip.plain{color:var(--muted);cursor:default}
.chip.blue{background:var(--chip-blue-bg);color:var(--chip-blue);font-weight:600}
.chip.blue:hover{filter:brightness(1.15)}
.chip.red{color:var(--red);padding:0 4px}
.chip.red:hover{text-decoration:underline}
.chip.danger{border:1px solid var(--red-line);color:var(--red)}
.txt-link{border:0;background:none;padding:4px 0;font:inherit;font-size:13px;font-weight:500;color:var(--accent);text-decoration:none;cursor:pointer;white-space:nowrap}
.txt-link:hover{text-decoration:underline;color:var(--accent-hover)}
.empty-row{display:flex;align-items:center;gap:var(--s3);min-height:64px;padding:0 var(--s4);font-size:13px}
.empty-row .m{font-size:13px}
body.app .c-foot{font-size:12px;border-top:1px solid var(--line)}
body.app .c-foot a{color:var(--accent);text-decoration:none}
body.app .tile{width:36px;height:36px;border-radius:9px}
.tile.green{background:var(--tile-green);color:var(--tile-green-ink)}
.tile.grey{background:var(--tile-grey);color:var(--muted);font:700 10px/1 var(--mono);letter-spacing:.02em}
body.app .notice.banner{background:var(--surface);border:1px solid var(--card-line);border-left:3px solid var(--warn);border-radius:10px;padding:10px 14px;font-size:13px}
body.app .notice.banner a{color:var(--accent);font-weight:600;text-decoration:none}
body.app .card2 .k{text-transform:none;letter-spacing:0;font-size:13px;font-weight:500}
body.app .big{font-size:32px}
body.app .plan-name{font-size:28px}
body.app input:not([type=checkbox]):not([type=radio]):not([type=hidden]){border-radius:8px;border-color:var(--card-line)}
body.app .btn{border-radius:8px}
body.app .modal{background:var(--surface);border-color:var(--card-line);border-radius:14px}
body.app .modal::backdrop{background:rgba(0,0,0,.7)}
body.app .cmd{background:var(--code-bg);color:var(--text);border:1px solid var(--card-line)}
body.app .cmd span{color:var(--accent)}
body.app .chart .bar{fill:color-mix(in srgb,var(--accent) 40%,transparent)}
@media (max-width:480px){body.app .chip.plain{display:none}}
body.app .doc .notice.banner{color:var(--text)}
body.app .s-usage .mono{font-size:11px;letter-spacing:-.01em}
/* /app/billing */
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4);margin:0 0 var(--s4)}
.card2.plan{display:flex;flex-direction:column;margin:0;padding:var(--s5)}
.card2.plan.pro{border-color:var(--accent);background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 10%,var(--surface)),var(--surface) 70%)}
.plan-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s2)}
.doc .plan-top h2{font-size:16px;font-weight:600;margin:0}
.badge-cur{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:999px;background:var(--accent);color:#fff;font-size:11.5px;font-weight:600}
.price{margin:var(--s3) 0 var(--s1) !important;font-size:32px;font-weight:700;letter-spacing:-.02em}
.price span{font-size:14px;font-weight:500;color:var(--muted)}
.card2 .small{font-size:12.5px;margin:0}
.plan-list{list-style:none;margin:var(--s4) 0;padding:0;display:grid;gap:var(--s2);font-size:14px}
.doc .plan-list li{position:relative;padding-left:24px;margin:0}
.plan-list li::before{content:"✓";position:absolute;left:2px;top:0;color:var(--muted);font-weight:700}
.plan-list.ok li::before{color:var(--ok)}
.plan-foot{margin-top:auto !important;display:grid;gap:var(--s2)}
.plan-foot form{margin:0}
.c{text-align:center}
.btn.outline{background:none;border:1px solid var(--card-line,var(--line-strong));color:var(--text)}
.btn.outline:hover{border-color:var(--accent);color:var(--accent);background:none}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.card2.team{display:flex;align-items:center;justify-content:space-between;gap:var(--s4)}
.card2.team h2{margin:0 0 2px !important}
.card2.team p{margin:0}
.card2.team .btn{flex:none}
.acc-list details{margin:0;border:0;border-top:1px solid var(--line);border-radius:0;background:none;padding:0}
.acc-list details:first-child{border-top:0}
.acc-list summary{display:flex;align-items:center;justify-content:space-between;list-style:none;min-height:48px;padding:0 var(--s4);font-size:14px;font-weight:500;margin:0 !important}
.acc-list summary::-webkit-details-marker{display:none}
.acc-list summary::after{content:"";width:7px;height:7px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg);transition:transform .15s;margin-left:var(--s3)}
.acc-list details[open] summary::after{transform:rotate(-135deg)}
.acc-list details p{margin:0;padding:0 var(--s4) var(--s4);font-size:13.5px}
@media (max-width:640px){.plans{grid-template-columns:1fr}.card2.team{flex-direction:column;align-items:flex-start}}
.doc ul.plan-list{padding:0;margin:var(--s4) 0 0}
.plan-foot{padding-top:var(--s5)}
.plan-foot:empty{display:none}
.price span{margin-left:2px}
/* /app/settings */
.profile{display:flex;align-items:center;gap:var(--s3)}
.profile .avatar{width:40px;height:40px;font-size:14px}
.profile div{min-width:0;flex:1 1 auto}
.profile b{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profile .m{font-size:12.5px;margin:0}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s4)}
.set-row p{margin:0}
.doc .card2 h2.h{font-size:14px;font-weight:600;margin:0 0 2px}
details.inline-form{margin:0;padding:0;border:0;background:none}
details.inline-form>summary{display:inline-flex;list-style:none;margin:12px 0 0 !important}
details.inline-form>summary::-webkit-details-marker{display:none}
details.inline-form[open]>summary{display:none}
details.inline-form form{margin:var(--s4) 0 0}
.seg{display:inline-flex;padding:3px;border:1px solid var(--card-line,var(--line));border-radius:9px;background:var(--bg-2);flex:none}
.seg button{min-height:30px;padding:0 12px;border:0;border-radius:6px;background:none;color:var(--muted);font:inherit;font-size:13px;font-weight:500;cursor:pointer}
.seg button[aria-pressed=true]{background:var(--surface);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.15)}
.danger-row .btn{flex:none}
@media (max-width:560px){.set-row{flex-direction:column;align-items:flex-start}}
.profile .btn{white-space:nowrap;flex:none}
/* /admin/installations */
.grid.inst{gap:var(--s4)}
.grid.inst .card2{margin:0}
.kv-t{width:100%;border-collapse:collapse;font-size:14px}
.kv-t td{padding:8px var(--s4);border-top:1px solid var(--line)}
.kv-t tr:first-child td{border-top:0}
.kv-t .num{text-align:right;font-variant-numeric:tabular-nums;color:var(--muted)}
body.app .chart .bar.now{fill:var(--accent)}
/* /admin* in the app shell */
.s-group{margin:var(--s2) 0 0;padding:0 10px;font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.s-bottom{margin-top:auto;display:grid;gap:var(--s3)}
.s-bottom .btn{min-height:32px;font-size:13px}
body.app .s-col.doc.wide{max-width:1100px}
body.app .acct-head h1{font-size:28px;font-weight:700;letter-spacing:-.02em;margin:0 0 var(--s1)}
body.app .acct-head{margin:var(--s2) 0 var(--s5)}
body.app .panel,body.app .stat,body.app .card,body.app .table-wrap{background:var(--surface);border:1px solid var(--card-line);border-radius:12px}
body.app .panel h2{font-size:15px;font-weight:600}
body.app .stat b{font-size:24px}
body.app .stat span{font-size:12.5px}
body.app .acc{font-size:13px;min-width:1000px}
body.app .acc th,body.app .acc td{height:48px;border-bottom:1px solid var(--line)}
body.app .acc th{height:40px;background:none;text-transform:none;letter-spacing:0;font-size:12px;font-weight:500;color:var(--muted)}
body.app .acc tbody tr:hover td{background:color-mix(in srgb,var(--text) 3%,transparent)}
body.app .acc .btn.sm{min-height:28px;font-size:12.5px;padding:0 10px}
body.app .pill{height:22px;font-size:12px}
body.app .tag{font-size:11.5px}
body.app .kv-t{font-size:13px}
body.app .kv-t td{height:40px;padding:0 var(--s4)}
body.app .card.msg{border-radius:10px}
body.app .grid.pay .card{margin:0}
@media (max-width:760px){.s-group{display:none}.s-bottom{grid-column:1/-1;grid-template-columns:1fr auto;align-items:center;padding-bottom:var(--s3)}.s-bottom .s-user{display:flex}}
/* activity log, mode chips, Claude tile */
.chip.mode{border:1px solid var(--card-line,var(--line));color:var(--muted);cursor:default;font-size:11.5px;height:22px}
.tile.orange{background:color-mix(in srgb,#f97316 16%,var(--surface));color:#ea7a2a}
.filters{flex-wrap:wrap;gap:var(--s2)}
.doc .filters select{width:auto;min-height:32px;padding:2px 8px;font-size:13px;margin:0;border-radius:8px}
.table-wrap.flat{border:0;border-radius:0;margin:0}
body.app .acc.act{min-width:560px;table-layout:auto}
/* /app/usage: calls per computer / per tool (two columns, fits a phone) + the side-card forecast warning */
body.app .acc.by{min-width:0;table-layout:auto;margin-bottom:var(--s3)}
.acc.by progress.meter.thin{display:inline-block;width:96px;margin:0 0 0 8px;vertical-align:middle}
.s-usage p.warn{color:var(--warn);font-weight:600}
.res{display:inline-flex;height:20px;align-items:center;padding:0 8px;border-radius:999px;font-size:11.5px;font-weight:600}
.res.ok{background:var(--ok-soft);color:var(--ok)}
.res.err{background:var(--err-soft,#fee2e2);color:var(--red,#dc2626)}
.res.ref{background:var(--bg-2);color:var(--muted)}
.res.nc{background:var(--warn-soft);color:var(--warn)}
.c-foot.pager{display:flex;justify-content:space-between}
@media (max-width:560px){.rows .chip.mode{display:none}}
.chip.mode{display:inline-block;line-height:20px}
.doc .row.filters select{flex:0 0 auto;width:auto;max-width:220px}
.chip.mode.warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,transparent)}
.card2.plan.pro.hl{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent)}
/* /company */
.doc .kv.company{margin:var(--s3) 0 var(--s5);padding:var(--s4) var(--s5);border:1px solid var(--line);border-radius:var(--r);background:var(--surface);gap:var(--s3) var(--s6)}
.doc .kv.company dd{font-weight:500}
@media (max-width:560px){.doc .kv.company{grid-template-columns:1fr;gap:2px}.doc .kv.company dd{margin-bottom:var(--s3)}}
footer .legal a{color:inherit}
/* /admin* — one column width, one header, 32px controls on every admin page (scoped to .adm-col / .adm-nav) */
body.app .s-col.adm-col{max-width:1100px;margin:0 auto;padding:var(--s5) var(--gutter) var(--s8)}
.adm-col h1,.adm-col h2,.adm-col h3,.adm-col p{margin:0}
.a-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s3) var(--s4);flex-wrap:wrap;min-height:60px;margin:var(--s2) 0 var(--s5)}
.a-title{min-width:0;flex:1 1 320px}
.a-head h1{font-size:28px;font-weight:700;letter-spacing:-.02em;line-height:1.2;overflow-wrap:anywhere}
.a-sub{margin-top:var(--s1) !important;font-size:14px;color:var(--muted)}
.a-crumb{display:inline-block;margin:0 0 var(--s1);font-size:13px;font-weight:500;color:var(--muted);text-decoration:none}
.a-crumb:hover{color:var(--accent)}
.a-actions{display:flex;align-items:center;gap:var(--s2);flex:0 1 auto}
.a-h2{font-size:17px !important;font-weight:600;letter-spacing:-.01em;margin:var(--s6) 0 var(--s3) !important}
/* controls */
.adm-col .btn,.s-bottom .btn{min-height:32px;height:32px;padding:0 12px;border-radius:8px;font-size:13px;font-weight:600;gap:6px;white-space:nowrap;transition:background-color .15s,border-color .15s,color .15s,transform .12s ease-out}
.adm-col .btn:active,.s-bottom .btn:active,a.a-stat:active,.a-seg a:active,.adm-nav a:active{transform:scale(.97)}
.adm-col .btn:focus-visible,.s-bottom .btn:focus-visible,.a-seg a:focus-visible,a.a-stat:focus-visible,.adm-nav a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
.adm-col .btn.danger{background:none;color:var(--red);border-color:var(--red-line)}
.adm-col .btn.danger:hover{background:color-mix(in srgb,var(--red) 10%,transparent);border-color:var(--red);color:var(--red)}
.adm-col form{margin:0}
.adm-col form.inl{display:inline-flex}
.adm-col input:not([type=checkbox]):not([type=radio]):not([type=hidden]),.adm-col select{height:32px;min-height:32px;margin:0;padding:0 10px;font-size:13.5px;line-height:30px;width:auto;max-width:none;border-radius:8px;border-color:var(--card-line)}
.adm-col input[type=search]{-webkit-appearance:none;appearance:none}
.a-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2)}
.a-row input:not([type=hidden]){flex:1 1 180px;min-width:0}
.a-row input[type=date]{flex:0 0 auto}
.a-row label{font-size:13.5px;font-weight:600}
.a-btns{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin:var(--s3) 0}
.a-btns:last-child{margin-bottom:0}
.a-note{font-size:13px !important;margin:var(--s3) 0 !important}
.a-search{display:flex;gap:var(--s2)}
.a-search input[type=search]{width:240px}
/* flash with an optional action (Undo) */
.a-flash{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:44px;margin:0 0 var(--s4);padding:6px 6px 6px 14px;border:1px solid var(--card-line);border-left:3px solid var(--ok);border-radius:10px;background:var(--surface);color:var(--text);font-size:13.5px;font-weight:500}
.a-flash.err{border-left-color:var(--red)}
.a-flash:not(:has(form)){padding-right:14px}
/* stat tiles: links when they open a list */
.a-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s3);margin:0 0 var(--s4)}
.a-stat{display:block;padding:var(--s3) var(--s4);border:1px solid var(--card-line);border-radius:12px;background:var(--surface);color:var(--text);text-decoration:none;transition:border-color .15s,transform .12s ease-out}
.a-stat span{display:block;font-size:12.5px;color:var(--muted)}
.a-stat b{display:block;margin-top:2px;font-size:24px;font-weight:700;letter-spacing:-.01em;line-height:1.25;font-variant-numeric:tabular-nums}
a.a-stat:hover{border-color:var(--accent);color:var(--text)}
a.a-stat span::after{content:" ›";color:var(--muted)}
/* cards */
.a-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4);margin:0 0 var(--s4);align-items:start}
.a-grid>.full{grid-column:1/-1}
.a-card{background:var(--surface);border:1px solid var(--card-line);border-radius:12px;margin:0 0 var(--s4);overflow:hidden}
.a-grid>.a-card{margin:0}
.a-card-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:48px;padding:var(--s2) var(--s4);border-bottom:1px solid var(--line)}
.a-card-head h2{font-size:14px;font-weight:600;letter-spacing:0}
.a-card-head a,.a-card-head .m{font-size:13px;font-weight:500;text-decoration:none}
.a-card-head a:hover{text-decoration:underline}
.a-card-body{padding:var(--s4)}
.a-card-body>p+p,.a-card-body>p+form,.a-card-body>form+p{margin-top:var(--s3)}
.a-card.danger{border-color:color-mix(in srgb,var(--red) 35%,var(--card-line))}
.a-card.danger h2{color:var(--red)}
.a-card.danger .a-row{margin-top:var(--s3)}
.a-card.danger .a-row input{max-width:360px}
.a-empty{padding:var(--s5) var(--s4);font-size:13.5px !important;text-align:center}
.a-list{list-style:none;margin:0;padding:0}
.a-list li{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:52px;margin:0;padding:var(--s2) var(--s4);border-top:1px solid var(--line);font-size:13.5px}
.a-list li:first-child{border-top:0}
.a-list .who{flex:1 1 auto}
.a-list .who b{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.a-li-link{display:flex;flex-direction:column;min-width:0;flex:1 1 auto;color:var(--text);text-decoration:none}
.a-li-link:hover b{color:var(--accent)}
.a-clamp{color:var(--muted);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.a-list time{flex:none;font-size:12.5px}
.a-svc li span:first-child{font-weight:500}
.a-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--line-strong)}
.a-dot.on{background:var(--ok);box-shadow:0 0 0 3px var(--ok-soft)}
.a-kv{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:var(--s2) var(--s5);margin:0;font-size:13.5px}
.a-kv dt{color:var(--muted)}
.a-kv dd{margin:0;overflow-wrap:anywhere}
.adm-col code{font-size:12.5px}
/* status chips */
.a-st{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap;background:var(--tile-grey);color:var(--muted)}
.a-st.ok{background:var(--ok-soft);color:var(--ok)}
.a-st.grant{background:var(--accent-soft);color:var(--accent)}
/* segmented filter */
.a-seg{display:flex;width:max-content;max-width:100%;overflow-x:auto;gap:2px;margin:0 0 var(--s3);padding:3px;border:1px solid var(--card-line);border-radius:10px;background:var(--bg-2)}
.a-seg a{display:inline-flex;align-items:center;height:26px;padding:0 12px;border-radius:7px;color:var(--muted);font-size:13px;font-weight:500;text-decoration:none;white-space:nowrap;transition:background-color .15s,color .15s,transform .12s ease-out}
.a-seg a:hover{color:var(--text)}
.a-seg a[aria-current=page]{background:var(--surface);color:var(--text);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.12),0 0 0 1px var(--card-line)}
/* tables */
.a-tablewrap{position:relative;overflow-x:auto;border:1px solid var(--card-line);border-radius:12px;background:var(--surface)}
.a-table{width:100%;border-collapse:collapse;font-size:13px}
.a-table th,.a-table td{height:52px;padding:0 var(--s3);border-bottom:1px solid var(--line);text-align:left;vertical-align:middle;white-space:nowrap}
.a-table th{height:38px;font-size:12px;font-weight:500;color:var(--muted)}
.a-table th:first-child,.a-table td:first-child{padding-left:var(--s4)}
.a-table th:last-child,.a-table td:last-child{padding-right:var(--s4)}
.a-table tbody tr:last-child td{border-bottom:0}
.a-table tbody tr:hover td{background:color-mix(in srgb,var(--text) 3%,transparent)}
.a-table .num{text-align:right;font-variant-numeric:tabular-nums}
.a-table td.a-empty{white-space:normal}
.a-table .who a{max-width:340px}
.a-table .meter.thin{width:110px;margin:4px 0 0 auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.a-pager{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--s3);margin:var(--s4) 0 0}
.a-pager>:last-child{justify-self:end}
.a-pager>:first-child{justify-self:start}
.a-pager .m{font-size:13px}
/* messages */
.a-msg{padding:var(--s4);border-top:1px solid var(--line)}
.a-msg:first-child{border-top:0}
.a-msg:target{background:color-mix(in srgb,var(--accent) 6%,transparent)}
.a-msg-top{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px var(--s2);font-size:13.5px}
.a-msg-top a{overflow-wrap:anywhere}
.a-msg-top time{margin-left:auto;font-size:12.5px}
.a-msg-text{margin:var(--s2) 0 0 !important;font-size:14px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--text)}
.a-msg .a-btns{margin:var(--s3) 0 0}
/* account page */
.adm-col .plan-state{font-size:15px;font-weight:600}
.adm-col .usage-line{font-size:14px}
.adm-col .usage-line b{font-size:22px}
.a-confirm{margin:var(--s3) 0 0;padding-top:var(--s3);border-top:1px solid var(--line)}
.a-confirm summary{cursor:pointer;font-size:13.5px;font-weight:600;color:var(--red);width:max-content;border-radius:6px}
.a-confirm[open] summary{margin-bottom:var(--s2)}
.a-confirm p{margin:0 0 var(--s3) !important;font-size:13.5px}
.a-yk input:not([type=hidden]){flex:1 1 120px}
/* menu: count badge, short labels on the phone tab bar */
.adm-nav .s-count{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--tile-grey);color:var(--muted);font-size:11px;font-weight:600;font-variant-numeric:tabular-nums}
.adm-nav a[aria-current=page] .s-count{background:var(--accent-soft);color:var(--accent)}
.adm-nav .l-short{display:none}
.adm-nav a{transition:background-color .15s,color .15s,transform .12s ease-out}
@media (prefers-reduced-motion:reduce){.adm-col .btn,.s-bottom .btn,a.a-stat,.a-seg a,.adm-nav a{transition:none}.adm-col .btn:active,.s-bottom .btn:active,a.a-stat:active,.a-seg a:active,.adm-nav a:active{transform:none}}
@media (max-width:900px){.a-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){
  .hide-s{display:none}
  .adm-nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;margin:0 calc(-1 * var(--gutter));padding:0;overflow:visible}
  body.app .adm-nav a{position:relative;flex-direction:column;justify-content:center;gap:3px;min-height:54px;padding:6px 2px 4px;font-size:11px;font-weight:500;border-radius:0;border-bottom:2px solid transparent}
  body.app .adm-nav a svg{display:block;width:20px;height:20px}
  body.app .adm-nav a[aria-current=page]{border-bottom-color:var(--accent);font-weight:600}
  .adm-nav .l-full{display:none}
  .adm-nav .l-short{display:inline}
  .adm-nav .s-count{position:absolute;top:3px;left:calc(50% + 6px);margin:0;min-width:17px;height:17px;padding:0 4px;font-size:10px}
  .adm-col input:not([type=checkbox]):not([type=radio]):not([type=hidden]){font-size:16px}
  .a-head{min-height:0;margin:var(--s2) 0 var(--s4)}
  .a-head h1{font-size:24px}
  .a-actions{flex:1 1 100%}
  .a-search{flex:1 1 auto}
  .a-search input[type=search]{flex:1 1 auto;width:auto;min-width:0}
  .a-table .who a{max-width:calc(100vw - 230px)}
  .a-table .meter.thin{width:80px}
}
@media (max-width:480px){.a-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.a-stats>:last-child:nth-child(odd){grid-column:1/-1}.a-card-body{padding:var(--s3) var(--s4) var(--s4)}.a-msg-top time{margin-left:0;flex-basis:100%}}