/* BotMe base styles: fonts + design system (see DESIGN.md) */
@font-face{font-family:"Chakra Petch";font-weight:500;font-display:swap;src:url(../fonts/chakra-petch-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Chakra Petch";font-weight:600;font-display:swap;src:url(../fonts/chakra-petch-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Chakra Petch";font-weight:700;font-display:swap;src:url(../fonts/chakra-petch-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:500;font-display:swap;src:url(../fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:600;font-display:swap;src:url(../fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-display:swap;src:url(../fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:600;font-display:swap;src:url(../fonts/ibm-plex-mono-latin-600-normal.woff2) format("woff2")}
/* BotMe design system (DESIGN.md). Tokens + shared components for every tool page. Page CSS adds layout only. */
:root{
  --canvas:#050807;--surface-1:#0a0f0d;--surface-2:#0f1613;--surface-3:#151e1a;
  --hairline:#1d2924;--hairline-strong:#2b3a33;
  --ink:#eef5f1;--ink-muted:#b4c6bd;--ink-subtle:#8aa197;--ink-faint:#6f857b;
  --accent:#39f5a6;--accent-hover:#72f9c0;--on-accent:#03170e;--accent-soft:rgba(57,245,166,.10);
  --up:#39f5a6;--down:#ff7088;--warn:#f3c454;
  --display:"Chakra Petch","IBM Plex Sans",system-ui,sans-serif;
  --body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --r-ctl:10px;--r-panel:16px;--nav:64px;--wrap:1120px;--prose:680px;
  --ease:cubic-bezier(.2,.8,.2,1);
  /* legacy aliases so older page CSS keeps working */
  --bg:var(--canvas);--panel:var(--surface-1);--panel2:var(--surface-2);--text:var(--ink-muted);--muted:var(--ink-subtle);
  --dim:var(--ink-faint);--em:var(--accent);--em-hi:var(--accent-hover);--line:var(--hairline);--line2:var(--hairline-strong);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav) + 16px)}
body{margin:0;background:var(--canvas);color:var(--ink-muted);font:400 16px/1.6 var(--body);overflow-x:hidden;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
a{color:var(--ink);text-decoration:none}
a,button,input,select,textarea,summary{touch-action:manipulation}
h1,h2,h3{font-family:var(--display);color:var(--ink);margin:0;font-weight:700;text-wrap:balance}
h1{font-size:clamp(34px,5vw,48px);line-height:1.05;letter-spacing:-.015em}
h2{font-size:clamp(24px,3vw,30px);line-height:1.15;letter-spacing:-.01em}
h3{font-size:20px;font-weight:600;line-height:1.3;letter-spacing:-.005em}
p{margin:0}
::selection{background:#1f6b48;color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
[id]{scroll-margin-top:calc(var(--nav) + 16px)}
.num,.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;padding:10px 14px;border-radius:var(--r-ctl);background:var(--accent);color:var(--on-accent);font-weight:600}
.skip:focus{left:16px}
.page{position:relative;z-index:1}
.bg-glow{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(800px 480px at 75% -10%,rgba(57,245,166,.06),transparent 65%)}

/* nav */
.nav{position:sticky;top:0;z-index:50;height:var(--nav);background:rgba(5,8,7,.92);border-bottom:1px solid var(--hairline)}
.nav-in{height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:calc(var(--wrap) + 40px);margin:0 auto;padding:0 20px}
.brand{display:flex;align-items:center;gap:10px;min-height:44px;font:700 18px var(--display);color:var(--ink);letter-spacing:.12em}
.brand b{color:var(--accent);font-weight:700}
.nav-links{display:flex;align-items:center;gap:2px}
.nav-links a{display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:var(--r-ctl);color:var(--ink-subtle);font-size:15px;transition:color .15s var(--ease),background .15s var(--ease)}
.nav-links a:hover{color:var(--ink);background:var(--surface-1)}
.nav-links a[aria-current]{color:var(--ink)}
.hm-k{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 10px 0 14px;border:1px solid var(--hairline-strong);border-radius:var(--r-ctl);background:var(--surface-1);color:var(--ink-subtle);font:500 14px var(--body);cursor:pointer;transition:border-color .15s var(--ease),color .15s var(--ease)}
.hm-k kbd{padding:2px 6px;border:1px solid var(--hairline-strong);border-radius:6px;font:12px var(--mono);color:var(--ink-faint)}
.hm-k:hover{border-color:var(--ink-faint);color:var(--ink)}
@media (max-width:760px){.nav-links{display:none}.hm-k kbd{display:none}}

/* buttons (btn-buy = primary, btn-line = secondary: legacy names kept) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border:1px solid transparent;border-radius:var(--r-ctl);font:600 15px var(--body);cursor:pointer;white-space:nowrap;transition:background .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease),transform .15s var(--ease)}
.btn:active{transform:translateY(1px)}
.btn-buy,.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-buy:hover,.btn-primary:hover{background:var(--accent-hover);color:var(--on-accent)}
.btn-line,.btn-secondary{background:var(--surface-2);border-color:var(--hairline-strong);color:var(--ink)}
.btn-line:hover,.btn-secondary:hover{border-color:rgba(57,245,166,.45);color:var(--ink)}
.btn-sm{min-height:44px;padding:0 16px;font-size:14px}
.btn:disabled,.btn[aria-disabled=true]{opacity:.55;cursor:default;transform:none}
.eyebrow{display:block;margin:0 0 12px;font:500 13px var(--mono);letter-spacing:.02em;color:var(--accent)}
.eyebrow::before{content:none}

/* forms */
.field{display:flex;flex-direction:column;gap:8px;font-size:14px;color:var(--ink-subtle)}
input[type=text],input[type=search],input[type=email],input[type=url],input[type=number],select,textarea{font:15px var(--body);color:var(--ink)}
select{background:var(--surface-2);color:var(--ink)}

/* tip dialog, palette, ad slot (extras.js) */
.tip-dlg,.pal{overscroll-behavior:contain}
.tip-dlg{max-width:440px;width:calc(100% - 32px);padding:24px;border:1px solid var(--hairline-strong);border-radius:var(--r-panel);background:var(--surface-1);color:var(--ink-muted);box-shadow:0 24px 64px rgba(0,0,0,.55)}
.tip-dlg::backdrop,.pal::backdrop{background:rgba(2,4,3,.72)}
.tip-dlg h2{margin:0 0 8px;font-size:24px}
.tip-x{position:absolute;top:12px;right:12px;width:44px;height:44px;border:0;border-radius:var(--r-ctl);background:transparent;color:var(--ink-subtle);font-size:24px;cursor:pointer}
.tip-x:hover{background:var(--surface-2);color:var(--ink)}
.tip-p{font-size:15px}
.tip-amts{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
.tip-amt{min-height:40px;padding:0 12px;border:1px solid var(--hairline-strong);border-radius:var(--r-ctl);background:var(--surface-2);color:var(--ink);font:500 14px var(--mono);cursor:pointer}
.tip-amt[aria-pressed=true]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.tip-qr{display:block;margin:8px auto 16px;border-radius:12px;max-width:220px;width:100%;height:auto}
.tip-row{display:flex;gap:8px}.tip-row .btn{flex:1}
.tip-addr{display:block;margin:12px 0 0;font:12px var(--mono);color:var(--ink-faint);word-break:break-all}
.tip-note{margin:8px 0 0;font-size:13px;color:var(--ink-subtle)}
.tip-link{min-height:44px;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer}
.tip-link:hover{color:var(--ink)}
.ad-slot{display:none;max-width:728px;margin:48px auto 0;text-align:center}
.ad-slot.on{display:block}
.ad-slot iframe{display:block;width:100%;height:100px;border:0;background:transparent}
.ad-lbl{display:block;margin-bottom:4px;font:12px var(--mono);color:var(--ink-faint)}
.pal{width:min(620px,calc(100% - 32px));margin:12vh auto auto;padding:0;border:1px solid var(--hairline-strong);border-radius:var(--r-panel);background:var(--surface-1);color:var(--ink-muted);box-shadow:0 24px 64px rgba(0,0,0,.55)}
.pal-in{width:100%;min-height:56px;padding:0 20px;border:0;border-bottom:1px solid var(--hairline);background:transparent;color:var(--ink);font:16px var(--body);outline:none}
.pal-in:focus-visible{box-shadow:inset 0 -2px 0 var(--accent)}
.pal-list{list-style:none;margin:0;padding:8px;max-height:50vh;overflow:auto}
.pal-list li{display:flex;justify-content:space-between;gap:12px;min-height:44px;align-items:center;padding:0 12px;border-radius:var(--r-ctl);cursor:pointer;color:var(--ink)}
.pal-list li small{font:12px var(--mono);color:var(--ink-faint)}
.pal-list li.on,.pal-list li:hover{background:var(--surface-2)}
.pal-none{color:var(--ink-faint)!important;cursor:default!important}
.pal-hint{margin:0;padding:10px 16px;border-top:1px solid var(--hairline);font:12px var(--mono);color:var(--ink-faint)}

/* shared footer */
.cc-foot,.hm-foot{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;justify-content:space-between;max-width:calc(var(--wrap) + 40px);margin:96px auto 0;padding:24px 20px 40px;border-top:1px solid var(--hairline);font-size:14px;color:var(--ink-faint)}
.cc-foot nav,.hm-foot nav{display:flex;flex-wrap:wrap;column-gap:20px}
.cc-foot a,.hm-foot a,.cc-foot .tip-link,.hm-foot .tip-link{display:inline-flex;align-items:center;min-height:44px;color:var(--ink-subtle)}
.cc-foot a:hover,.hm-foot a:hover{color:var(--ink)}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:0s!important;animation:none!important}}