/* OpenBot site design system (2026-10 redesign). Shared by every public page; /admin keeps brand.css.
   Tokens first, then base, layout, header, buttons, forms, messages, cards, footer. Page CSS stays in each page. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@600;700;800&family=JetBrains+Mono:wght@500&display=swap');

:root{
  color-scheme:dark;
  --bg:#0D0E19;
  --bg-2:#12142A;
  --card:rgba(255,255,255,.035);
  --card-2:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);
  --ink:#E8E9F3;
  --muted:#A3A6C2;
  --faint:#7D80A0;
  --v1:#8B7BFF;
  --v2:#5B8CFF;
  --v-grad:linear-gradient(135deg,var(--v1),var(--v2));
  --v-text:linear-gradient(90deg,#B4A9FF,#7FA7FF);
  --v-soft:rgba(139,123,255,.14);
  --v-line:rgba(139,123,255,.45);
  --v-ink:#C9C3FF;
  --ok:#4ADE80; --ok-ink:#86EFAC; --ok-soft:rgba(74,222,128,.13);
  --warn:#F5C451; --warn-ink:#F5D27A; --warn-soft:rgba(245,196,81,.12);
  --bad:#F87171; --bad-ink:#FCA5A5; --bad-soft:rgba(248,113,113,.12);
  --r-sm:10px; --r:14px; --r-lg:18px; --r-xl:22px;
  --display:'Manrope',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --body:'Inter','Segoe UI',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
  --gutter:28px;
  --maxw:1120px;
}
@media (max-width:640px){:root{--gutter:16px}}

/* ─── base ─── */
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
html,body{background:var(--bg)}
body{margin:0;color:var(--ink);font:400 15px/1.6 var(--body);-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
body>main{flex:1}
img{max-width:100%;display:block}
a{color:var(--v-ink);text-decoration:none}
a:hover{color:#fff}
p{margin:0}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;margin:0;line-height:1.1;letter-spacing:-.025em;text-wrap:balance;color:var(--ink)}
h3,h4{letter-spacing:-.01em}
:focus-visible{outline:2px solid var(--v1);outline-offset:3px;border-radius:6px}
code,.mono{font-family:var(--mono)}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.lede{color:var(--muted);font-size:16px;line-height:1.65;max-width:60ch}
.small{font-size:13.5px;color:var(--muted)}
.muted{color:var(--muted)}
.link{color:var(--v-ink);font-weight:500}
.link:hover{color:#fff}
.glow{background:radial-gradient(1000px 420px at 50% -140px,rgba(124,108,246,.26),transparent 70%)}

/* ─── header ─── */
.site-header{position:sticky;top:0;z-index:20;background:rgba(13,14,25,.82);backdrop-filter:saturate(140%) blur(12px);-webkit-backdrop-filter:saturate(140%) blur(12px);border-bottom:1px solid var(--line)}
.site-header .bar{max-width:var(--maxw);margin-inline:auto;padding:12px var(--gutter);display:flex;align-items:center;gap:20px}
.logo{display:inline-flex;align-items:center;gap:10px;color:var(--ink);font:800 16px/1 var(--display);letter-spacing:-.01em;white-space:nowrap}
.logo:hover{color:var(--ink)}
.logo-mark{width:26px;height:26px;border-radius:8px;background:var(--v-grad);display:grid;place-items:center;box-shadow:0 6px 18px -8px rgba(124,108,246,.9)}
.logo-mark svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nav-links{display:flex;gap:4px;margin-inline:auto}
.nav-links a{color:var(--muted);font-size:14px;font-weight:500;padding:8px 12px;border-radius:999px;transition:color .15s,background .15s}
.nav-links a:hover{color:var(--ink);background:var(--card-2)}
.nav-actions{display:flex;align-items:center;gap:10px;margin-left:auto}
.nav-links+.nav-actions{margin-left:0}
.nav-actions .btn svg{width:15px;height:15px}
.nav-menu{display:none;position:relative}
.nav-menu summary{list-style:none;width:40px;height:40px;border-radius:12px;border:1px solid var(--line-2);display:grid;place-items:center;cursor:pointer;color:var(--ink);background:var(--card)}
.nav-menu summary::-webkit-details-marker{display:none}
.nav-menu summary svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.nav-menu summary .x{display:none}
.nav-menu[open] summary .x{display:block}
.nav-menu[open] summary .burger{display:none}
.menu-panel{position:absolute;right:0;top:calc(100% + 10px);width:min(280px,calc(100vw - 2*var(--gutter)));background:#15172C;border:1px solid var(--line-2);border-radius:var(--r);padding:8px;display:grid;box-shadow:0 24px 60px -20px #000}
.menu-panel a{color:var(--ink);padding:11px 12px;border-radius:10px;font-weight:500;font-size:15px}
.menu-panel a:hover{background:var(--card-2)}
@media (max-width:900px){
  .nav-links{display:none}
  .nav-menu{display:block}
  .nav-actions,.nav-links+.nav-actions{gap:8px;margin-left:auto}
}
@media (max-width:480px){
  .nav-actions .btn .ico,.nav-actions [data-admin]{display:none}
  .nav-actions .btn.small{padding:8px 13px}
}
@media (max-width:360px){.logo span.word{display:none}}

/* ─── buttons ─── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border-radius:999px;border:1px solid transparent;font:600 14px/1.1 var(--body);letter-spacing:.005em;cursor:pointer;white-space:nowrap;text-decoration:none;transition:transform .15s,filter .15s,background .15s,border-color .15s,box-shadow .15s;color:var(--ink);background:none}
.btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.btn.primary{background:var(--v-grad);color:#fff;box-shadow:0 10px 28px -12px rgba(124,108,246,.95)}
.btn.primary:hover{color:#fff;filter:brightness(1.1);transform:translateY(-1px)}
.btn.ghost{background:var(--card-2);border-color:var(--line-2);color:var(--ink)}
.btn.ghost:hover{color:var(--ink);background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.24)}
.btn.text{padding-inline:4px;color:var(--v-ink)}
.btn.text:hover{color:#fff}
.btn.small{padding:9px 16px;font-size:13.5px}
.btn.big{padding:15px 28px;font-size:15.5px}
.btn.block{display:flex;width:100%}
.btn[disabled],.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;filter:none;box-shadow:none}
.btn.busy{cursor:progress}

/* full-width form submit used by the account pages (kept name: .authbtn) */
.authbtn{display:flex;align-items:center;justify-content:center;width:100%;padding:14px 22px;border-radius:999px;border:1px solid transparent;background:var(--v-grad);color:#fff;font:600 15px/1.1 var(--body);cursor:pointer;text-align:center;text-decoration:none;box-shadow:0 10px 28px -12px rgba(124,108,246,.95);transition:filter .15s,transform .15s}
.authbtn:hover{color:#fff;filter:brightness(1.1);transform:translateY(-1px)}
.authbtn:disabled{opacity:.45;cursor:default;transform:none;filter:none}
.authbtn.ghost{background:var(--card-2);border-color:var(--line-2);color:var(--ink);box-shadow:none}
.authbtn.ghost:hover{background:rgba(255,255,255,.1);color:var(--ink)}
form .authbtn{margin-top:22px}

/* ─── forms ─── */
form{margin:0}
.field{display:grid;gap:7px;margin-top:16px}
.field:first-child{margin-top:0}
.field label,.lbl{font:600 13.5px/1.2 var(--body);color:var(--ink)}
.field .hint,.hint{color:var(--muted);font-size:12.5px}
input[type=text],input[type=email],input[type=password]{font:inherit;font-size:15px;color:var(--ink);background:rgba(255,255,255,.03);border:1px solid var(--line-2);border-radius:12px;padding:12px 14px;width:100%;transition:border-color .15s,box-shadow .15s,background .15s}
input::placeholder{color:var(--faint)}
input[type=text]:focus,input[type=email]:focus,input[type=password]:focus{outline:none;border-color:var(--v1);background:rgba(139,123,255,.05);box-shadow:0 0 0 3px rgba(139,123,255,.25)}
input.key{font-family:var(--mono);letter-spacing:.03em}
.pw{position:relative;display:flex}
.pw input{padding-right:48px}
.pw-toggle{position:absolute;top:1px;right:1px;bottom:1px;width:46px;display:grid;place-items:center;background:none;border:0;padding:0;cursor:pointer;color:var(--faint);border-radius:0 12px 12px 0}
.pw-toggle:hover{color:var(--ink)}
.pw-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pw-toggle .eye-off{display:none}
.pw-toggle.on .eye{display:none}
.pw-toggle.on .eye-off{display:block}

/* ─── messages ─── */
.error,.ok,.warn-note{margin-top:14px;padding:11px 14px;border-radius:12px;font-size:14px;line-height:1.5}
.error{color:var(--bad-ink);background:var(--bad-soft);border:1px solid rgba(248,113,113,.3)}
.ok{color:var(--ok-ink);background:var(--ok-soft);border:1px solid rgba(74,222,128,.28)}
.warn-note{color:var(--warn-ink);background:var(--warn-soft);border:1px solid rgba(245,196,81,.3)}

/* ─── tags & badges ─── */
.tag{display:inline-flex;align-items:center;gap:6px;font:700 11.5px/1 var(--body);padding:5px 10px;border-radius:999px;white-space:nowrap;background:var(--v-soft);color:var(--v-ink)}
.tag.ok{background:var(--ok-soft);color:var(--ok-ink);border:0;margin:0}
.tag.gold{background:var(--warn);color:#1A1208}
.tag.grad{background:var(--v-grad);color:#fff}
.badge{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;font:700 12px/1 var(--body);background:var(--card-2);color:var(--muted)}
.badge::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.badge.active{color:var(--ok-ink);background:var(--ok-soft)}
.badge.expired,.badge.revoked{color:var(--bad-ink);background:var(--bad-soft)}
.badge.none{color:var(--faint);background:var(--card-2)}

/* ─── cards & panels ─── */
.card,.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px}
.panel+.panel{margin-top:16px}
.keybox{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-block:12px 14px}
.keybox code{font:500 clamp(15px,3.2vw,19px)/1.3 var(--mono);background:rgba(139,123,255,.08);border:1px solid var(--v-line);border-radius:12px;padding:11px 15px;letter-spacing:.03em;overflow-wrap:anywhere;color:var(--v-ink)}
.spinner{width:16px;height:16px;border:2px solid var(--line-2);border-top-color:var(--v1);border-radius:50%;animation:spin 1s linear infinite;display:inline-block;vertical-align:-3px;margin-right:10px}
@keyframes spin{to{transform:rotate(360deg)}}
ol.next{padding-left:20px;display:grid;gap:8px;color:var(--muted);margin:10px 0 0}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}

/* ─── simple page shell (account pages, download, thanks) ─── */
.page{padding-block:56px 88px}
.page-head{margin-bottom:28px}
.page-head h1{font-size:clamp(30px,4.4vw,42px)}
.page-head .lede{margin-top:10px}
.narrow{max-width:560px;margin-inline:auto}
.auth{padding-block:64px 96px}
.auth .card{padding:30px;border-radius:var(--r-xl);background:linear-gradient(170deg,rgba(139,123,255,.08),rgba(255,255,255,.025) 40%);box-shadow:0 30px 80px -40px rgba(0,0,0,.8)}
.auth h1{font-size:clamp(26px,4vw,32px);text-align:center}
.auth .lede{font-size:14.5px;text-align:center;margin:10px auto 24px}
.auth .alt{text-align:center;margin-top:20px;font-size:14px;color:var(--muted)}
.auth .alt a{font-weight:600}
.auth-mark{width:48px;height:48px;border-radius:15px;margin:0 auto 18px;background:var(--v-grad);display:grid;place-items:center;box-shadow:0 12px 30px -10px rgba(124,108,246,.9)}
.auth-mark svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ─── footer ─── */
.site-footer{border-top:1px solid var(--line);margin-top:auto}
.site-footer .cols{max-width:var(--maxw);margin-inline:auto;padding:40px var(--gutter) 28px;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:28px;font-size:14px}
.site-footer h4{font:700 13.5px var(--body);letter-spacing:0;margin:0 0 10px;color:var(--ink)}
.site-footer a{display:block;color:var(--muted);padding:3px 0}
.site-footer a:hover{color:var(--ink)}
.site-footer .about p{color:var(--muted);margin-top:12px;max-width:34ch;font-size:13.5px}
.site-footer .legal{max-width:var(--maxw);margin-inline:auto;padding:16px var(--gutter) 28px;border-top:1px solid var(--line);color:var(--faint);font-size:12.5px}
@media (max-width:760px){.site-footer .cols{grid-template-columns:1fr 1fr}.site-footer .about{grid-column:1/-1}}
.after-form{margin-top:14px}
.site-footer .logo{display:inline-flex;padding:0;color:var(--ink)}