/* socks.cat - neon theme. Palette from the mascot (sock_cat.svg):
   lime #58FF00, hot pink #FF00E1, electric blue #0600FF on black. */
:root {
  --bg: #000000;
  --panel: #070709;
  --panel-2: #0c0c12;
  --ink: #b7ffa0;
  --muted: #86df66;
  --line: #1c4d16;
  --mono: ui-monospace, "JetBrains Mono", "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  --lime: #58ff00;
  --pink: #ff00e1;
  --blue: #4d7bff;
  --glow-lime: 0 0 6px rgba(88, 255, 0, .55), 0 0 18px rgba(88, 255, 0, .35);
  --glow-pink: 0 0 6px rgba(255, 0, 225, .55), 0 0 18px rgba(255, 0, 225, .35);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font: 15px/1.65 var(--mono);
  letter-spacing: .01em;
  color: var(--ink);
  background:
    radial-gradient(900px 500px at 50% -10%, rgba(88, 255, 0, .07), transparent 60%),
    radial-gradient(800px 500px at 100% 10%, rgba(255, 0, 225, .07), transparent 55%),
    var(--bg);
  background-attachment: fixed;
  min-height: 100vh;
}

a { color: var(--lime); text-decoration: none; }
a:hover { text-shadow: var(--glow-lime); }

main { min-height: 60vh; }

.wrap { max-width: 1040px; margin: 0 auto; padding: 0 1.25rem; }

/* ---- header / nav ---- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 1.25rem;
  padding: .85rem 1.5rem;
  background: rgba(5, 5, 7, .82);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.brand {
  display: inline-flex; align-items: center; gap: .55rem;
  font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--lime); text-shadow: var(--glow-lime);
}
.brand:hover { text-shadow: var(--glow-lime); }
.nav { display: flex; flex: 1; align-items: center; gap: 1.1rem; margin-left: .5rem; }
.nav a { color: var(--muted); font-size: .94rem; letter-spacing: .02em; }
.nav a:hover { color: var(--ink); text-shadow: none; }
.nav .spacer { flex: 1; }

/* nav action buttons (register / login) */
.nav-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .42rem .9rem; border-radius: 999px;
  font-weight: 700; font-size: .85rem; letter-spacing: .04em; text-transform: uppercase;
  border: 1px solid currentColor; background: transparent; cursor: pointer;
}
.nav-btn.register { color: var(--pink); box-shadow: var(--glow-pink); }
.nav-btn.register:hover { background: rgba(255, 0, 225, .12); text-shadow: none; }
.nav-btn.login { color: var(--blue); box-shadow: 0 0 6px rgba(77,123,255,.5); }
.nav-btn.login:hover { background: rgba(77, 123, 255, .14); text-shadow: none; }

/* ---- headings ---- */
h1 { font-size: clamp(2rem, 5vw, 3.1rem); line-height: 1.1; margin: .2em 0; }
h2 { font-size: 1.6rem; margin: 2.2rem 0 1rem; }
h3 { font-size: 1.1rem; margin: 0 0 .4rem; }
.accent { color: var(--pink); text-shadow: var(--glow-pink); }
.muted { color: var(--muted); }

/* ---- hero ---- */
.hero { text-align: center; padding: 3.5rem 1.25rem 1rem; }
.hero .cat {
  width: min(230px, 56vw); height: auto; margin: 0 auto .5rem;
  display: block;
}
.hero h1 { letter-spacing: .01em; }
.hero p { color: var(--muted); max-width: 640px; margin: .6rem auto 1.4rem; }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .7rem 1.3rem; border-radius: 999px; border: 1px solid var(--lime);
  color: #07120a; background: var(--lime); font-weight: 800; letter-spacing: .03em;
  box-shadow: var(--glow-lime); cursor: pointer;
}
.btn:hover { box-shadow: 0 0 10px rgba(88,255,0,.8), 0 0 26px rgba(88,255,0,.45); text-shadow: none; }
.btn.ghost { color: var(--lime); background: transparent; }
.btn.ghost:hover { background: rgba(88,255,0,.1); }

/* ---- badges ---- */
.badges { display: flex; flex-wrap: wrap; gap: .55rem; justify-content: center; margin: 0 auto 1.4rem; max-width: 680px; }
.badge {
  font-size: .8rem; padding: .3rem .7rem; border-radius: 999px;
  border: 1px solid var(--lime); color: var(--ink); background: var(--panel);
  box-shadow: var(--glow-lime);
}

/* ---- feature cards ---- */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.card {
  background: transparent;
  border: 1px solid var(--lime); border-radius: 12px; padding: 1.2rem 1.3rem;
  box-shadow: 0 0 10px rgba(88,255,0,.12), inset 0 0 20px rgba(88,255,0,.03);
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.card:hover { transform: translateY(-3px); border-color: var(--pink); box-shadow: var(--glow-pink); }
.card p { color: var(--muted); margin: 0; }
/* alternate neon border colours across a card row (green / pink / blue) */
.features .card:nth-child(3n+2) { border-color: var(--pink); box-shadow: 0 0 10px rgba(255,0,225,.14), inset 0 0 20px rgba(255,0,225,.03); }
.features .card:nth-child(3n+3) { border-color: var(--blue); box-shadow: 0 0 10px rgba(77,123,255,.16), inset 0 0 20px rgba(77,123,255,.03); }
.features .card:nth-child(3n+2):hover { border-color: var(--lime); box-shadow: var(--glow-lime); }
.features .card:nth-child(3n+3):hover { border-color: var(--lime); box-shadow: var(--glow-lime); }
.dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-right: .5rem; box-shadow: 0 0 8px currentColor; }

/* ---- add-funds coin grid ---- */
.coin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; margin: 1.4rem 0; max-width: 640px; }
.coin-tile {
  display: flex; flex-direction: column; align-items: center; gap: .55rem;
  padding: 1.4rem 1rem; border-radius: 16px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); color: var(--ink);
  font: inherit; font-weight: 700; transition: transform .15s, border-color .15s, box-shadow .15s;
}
.coin-tile .glyph {
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.7rem; font-weight: 800;
  border: 2px solid var(--lime); color: var(--lime); box-shadow: var(--glow-lime);
}
.coin-tile:hover:not([disabled]) { transform: translateY(-4px); border-color: var(--pink); box-shadow: var(--glow-pink); }
.coin-tile:hover:not([disabled]) .glyph { border-color: var(--pink); color: var(--pink); box-shadow: var(--glow-pink); }
.coin-tile[disabled] { opacity: .35; cursor: not-allowed; filter: grayscale(1); }
.coin-tile .unavail { font-size: .72rem; color: var(--muted); font-weight: 500; }

/* amount selector */
.amount-row { display: flex; align-items: center; justify-content: center; gap: .6rem; margin: 1rem 0; }
.amount-row input { width: 7rem; text-align: center; font-size: 1.2rem; }

/* ---- forms ---- */
label { display: inline-block; margin: .6rem 0 .25rem; color: var(--muted); font-size: .9rem; }
input, select, textarea {
  background: var(--panel); color: var(--ink); border: 1px solid var(--line);
  border-radius: 10px; padding: .6rem .8rem; font: inherit; outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--lime); box-shadow: var(--glow-lime); }
form .btn { margin-top: 1rem; }

/* ---- tables ---- */
table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
th, td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-weight: 600; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; }
code, pre, .addr { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
code { background: var(--panel-2); padding: .12rem .4rem; border-radius: 6px; color: var(--lime); }
pre.addr { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: .8rem; overflow-x: auto; color: var(--lime); }

/* ---- payment / quote ---- */
.qr { display: inline-block; padding: .6rem; background: #fff; border-radius: 12px; margin: .8rem 0; box-shadow: var(--glow-pink); }
.qr svg { display: block; }
.payopt { border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1.2rem; margin: 1rem 0; background: var(--panel); }
.notice { border: 1px solid var(--lime); color: var(--lime); background: rgba(88,255,0,.07); padding: .6rem .9rem; border-radius: 10px; box-shadow: var(--glow-lime); }

/* ---- footer ---- */
footer { border-top: 1px solid var(--line); margin-top: 3rem; padding: 1.4rem 0; color: var(--muted); font-size: .9rem; }
footer .wrap { max-width: 1040px; margin: 0 auto; padding: 0 1.25rem; }

@media (max-width: 640px) {
  /* Stack the header: brand on top, links centered below, buttons on their
     own row. The spacer becomes a full-width break so the buttons wrap down. */
  .site-header { flex-direction: column; align-items: center; gap: .55rem; padding: .7rem 1rem; }
  .brand { margin: 0; }
  .nav { width: 100%; flex: 0 1 auto; flex-wrap: wrap; justify-content: center; gap: .5rem 1.2rem; margin-left: 0; }
  .nav .spacer { flex: 0 0 100%; height: 0; }
  .nav-btn { padding: .5rem 1.4rem; }
}

/* ---- docs: two-column sidebar + readable prose, on black ---- */
.docs-layout { display: grid; grid-template-columns: 250px 1fr; gap: 2rem; max-width: 1100px; margin: 0 auto; padding: 1.5rem 1.25rem; align-items: start; }
.docs-nav { position: sticky; top: 1.5rem; }
.docs-nav .brand { display: inline-flex; margin-bottom: 1rem; }
.docs-nav ul { list-style: none; padding: 0; margin: 0; border-left: 1px solid var(--line); }
.docs-nav li a { display: block; padding: .35rem .9rem; color: var(--muted); font-size: .92rem; border-left: 2px solid transparent; margin-left: -1px; }
.docs-nav li a:hover { color: var(--ink); text-shadow: none; }
.docs-nav li a.active { color: var(--lime); border-left-color: var(--lime); }
.docs-content { max-width: 760px; line-height: 1.7; }
.docs-content h1 { font-size: 2rem; margin: .2em 0 .6em; }
.docs-content h2 { font-size: 1.4rem; margin: 2rem 0 .8rem; padding-bottom: .3rem; border-bottom: 1px solid var(--line); }
.docs-content h3 { font-size: 1.1rem; margin: 1.5rem 0 .5rem; }
.docs-content p, .docs-content li { color: #cfd2dc; }
.docs-content a { color: var(--lime); }
.docs-content code { background: var(--panel-2); color: var(--lime); padding: .12rem .4rem; border-radius: 6px; font-size: .9em; }
.docs-content pre { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 1rem; overflow-x: auto; }
.docs-content pre code { background: none; color: #dfe3ee; padding: 0; }
.docs-content table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .94rem; }
.docs-content th, .docs-content td { border: 1px solid var(--line); padding: .5rem .7rem; text-align: left; }
.docs-content th { background: var(--panel-2); }
.docs-content blockquote { margin: 1rem 0; padding: .4rem 1rem; border-left: 3px solid var(--pink); color: var(--muted); background: var(--panel); border-radius: 0 8px 8px 0; }
.docs-content ul, .docs-content ol { padding-left: 1.4rem; }
@media (max-width: 820px) {
  .docs-layout { grid-template-columns: 1fr; }
  .docs-nav { position: static; }
}

.stats-card { text-align: center; }
.stats-line { font-size: 1.15rem; margin-top: .4rem; }
.stats-sub { font-size: .92rem; margin-top: .55rem; margin-bottom: 0; }
.stats-line strong { color: var(--lime); }

/* ---- endpoint builder: terminal / TUI theme (flat black, neon borders) ---- */
.builder {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.3rem;
  padding: 1.4rem;
  background: #000;
  border: 1.5px solid var(--lime);
  border-radius: 6px;
  box-shadow: var(--glow-lime);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
/* TUI title bar */
.builder::before {
  content: "\2593 endpoint builder \2014 socks.cat";
  display: block;
  margin: -1.4rem -1.4rem 1rem;
  padding: .5rem 1rem;
  background: var(--lime);
  color: #000;
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .12em;
  border-radius: 4px 4px 0 0;
}
.builder > label {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  font-size: .76rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lime);
  text-shadow: 0 0 5px rgba(88, 255, 0, .5);
}
.builder input {
  width: 100%;
  background: #000;
  border: 1.5px solid var(--pink);
  border-radius: 4px;
  color: var(--ink);
  padding: .85rem 1rem;
  font-size: 1.05rem;
  font-family: inherit;
  letter-spacing: .02em;
}
.builder input::placeholder { color: #5f5f70; }
.builder input:focus {
  border-color: var(--lime);
  box-shadow: var(--glow-lime);
  outline: none;
}
/* Move 'Build it' to the right */
.builder-actions { display: flex; justify-content: flex-end; }
.builder-actions .btn { margin-top: 0; border-radius: 4px; }

/* terminal-style composed username output */
.token {
  background: #000;
  border: 1.5px solid var(--pink);
  border-radius: 4px;
  color: var(--lime);
  padding: .9rem 1rem;
  text-shadow: 0 0 5px rgba(88, 255, 0, .4);
  overflow-x: auto;
}

/* account page head + builder extras */
.account-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.builder label.check { flex-direction: row; align-items: center; gap: .5rem; text-transform: none; letter-spacing: normal; color: var(--ink); }
.builder label.check input { width: auto; }

.coin-logo { width: 1.7rem; height: 1.7rem; vertical-align: middle; }
.coin-logo.eth { width: 1.1rem; }

/* ============ animated neon-TUI fx - pure CSS, zero-JS ============ */
@property --trace { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

.builder { position: relative; }

@media (prefers-reduced-motion: no-preference) {
  /* each section MATERIALIZES on page load: green out-of-focus haze snaps into
     sharp text, drifting up. Smooth, staggered, readable (settles fast). */
  .wrap { animation: sc-materialize .55s cubic-bezier(.2,.6,.2,1) both; }
  .wrap:nth-of-type(2){ animation-delay:.08s } .wrap:nth-of-type(3){ animation-delay:.16s }
  .wrap:nth-of-type(4){ animation-delay:.24s } .wrap:nth-of-type(5){ animation-delay:.32s }
  @keyframes sc-materialize {
    0%   { opacity: 0; transform: translateY(16px); filter: blur(6px) brightness(1.7) saturate(1.5); }
    55%  { opacity: 1; filter: blur(1.5px) brightness(1.2); }
    100% { opacity: 1; transform: translateY(0); filter: none; }
  }

  /* builder: pulsing glow + a neon segment tracing the border (exabind-style) */
  .builder { animation: builder-pulse 3.6s ease-in-out infinite; }
  @keyframes builder-pulse {
    0%,100%{ box-shadow: 0 0 6px rgba(88,255,0,.35), 0 0 20px rgba(88,255,0,.14); }
    50%    { box-shadow: 0 0 11px rgba(88,255,0,.6), 0 0 34px rgba(255,0,225,.22); }
  }
  .builder::after {
    content: ""; position: absolute; inset: -2px; border-radius: 8px; z-index: -1; padding: 2px;
    background: conic-gradient(from var(--trace), transparent 52%, var(--lime) 78%, var(--pink) 92%, transparent 96%);
    -webkit-mask-composite: xor; mask-composite: exclude;
    animation: trace 4.5s linear infinite;
  }
  @keyframes trace { to { --trace: 360deg; } }

  /* blinking block cursor trailing the composed username */
  .token::after { content: "▊"; color: var(--lime); margin-left: .1ch; animation: blink 1.1s steps(1) infinite; }
  @keyframes blink { 50% { opacity: 0; } }

  /* neon accent flicker */
  .accent, .stats-line strong { animation: neon-flicker 6s infinite; }
  @keyframes neon-flicker { 0%,17%,19%,100%{opacity:1} 18%{opacity:.55} 62%{opacity:.82} 63%{opacity:1} }

  /* light sweep across buttons on hover */
  .btn { position: relative; overflow: hidden; }
  .btn::after {
    content: ""; position: absolute; top: 0; left: -130%; width: 55%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.30), transparent);
    transform: skewX(-18deg);
  }
  .btn:hover::after { animation: btn-sweep .6s ease; }
  @keyframes btn-sweep { to { left: 140%; } }
}

/* ---- neon-TUI theme pass: glowing headings, border-only panels ---- */
h1, h2, h3 { text-shadow: 0 0 8px rgba(88, 255, 0, .30); }
.card h3 { color: var(--lime); }
.coin-tile { background: transparent; }
.payopt { background: transparent; }
.notice { background: transparent; }
/* stats card: border-only, centered neon line */
.stats-card { border-color: var(--pink); box-shadow: 0 0 10px rgba(255,0,225,.14), inset 0 0 24px rgba(255,0,225,.03); }
.stats-line { color: var(--ink); }
.stats-line strong { color: var(--lime); text-shadow: var(--glow-lime); }

/* ============ exabind-style titled boxes + smoother motion ============ */
/* Card titles ride ON the top border, like a TUI box legend: ┌─ Title ─┐ */
.card { position: relative; overflow: visible; transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease; }
.card > h3:first-child {
  position: absolute; top: -.72em; left: .9rem; margin: 0;
  padding: 0 .45rem; background: #000; color: var(--lime);
  font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
}
.features .card:nth-child(3n+2) > h3:first-child { color: var(--pink); }
.features .card:nth-child(3n+3) > h3:first-child { color: var(--blue); }
.stats-card > h3:first-child { color: var(--pink); }

/* Builder box: replace the full title bar with a border legend label */
.builder { padding-top: 1.6rem; }
.builder::before {
  content: "\258D endpoint builder";
  position: absolute; top: -.72em; left: .9rem; right: auto; bottom: auto;
  margin: 0; padding: 0 .5rem; width: auto; height: auto;
  background: #000; color: var(--lime);
  font-size: .76rem; letter-spacing: .14em; text-transform: none;
  border-radius: 0; box-shadow: none;
}

/* everything eases smoothly */
a, .btn, .nav a, .nav-btn, .coin-tile, input, .card, .badge, .dot {
  transition: color .2s ease, background .2s ease, border-color .2s ease,
              box-shadow .25s ease, transform .25s ease, text-shadow .2s ease;
}
.btn { will-change: transform; }
.btn:hover { transform: translateY(-1px); }

/* readability: give body copy a touch more contrast + spacing */
p { color: var(--ink); }
p.muted, .hero p, .card p, .nav a, th, .unavail, footer { color: var(--muted); }

/* nav icon links that expand their label on hover (Docs / GitHub) */
.nav-icon { display: inline-flex; align-items: center; gap: .35rem; color: var(--muted); }
.nav-icon:hover { color: var(--lime); text-shadow: none; }
.nav-icon .ico { width: 1.15rem; height: 1.15rem; flex: none; }
.nav-icon .label {
  max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0;
  transition: max-width .3s ease, opacity .25s ease;
}
.nav-icon:hover .label { max-width: 9ch; opacity: 1; }

/* footer icon row: crypto logos + docs + github (hover-expand labels) */
.footer-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.footer-icons { display: inline-flex; align-items: center; gap: .9rem; }
.footer-icons .sep { color: var(--line); }
.footer-icons a[aria-label="Bitcoin"]:hover { color: #f7931a; }
.footer-icons a[aria-label="Monero"]:hover { color: #ff6600; }
.footer-icons a[aria-label="Ethereum"]:hover { color: #7a86b8; }
.footer-icons a[aria-label="Litecoin"]:hover { color: #b8bcbf; }

/* register: narrower column + red warning card variant */
.wrap.narrow { max-width: 620px; }
.create-card { margin-top: .4rem; }
.card.warn { border-color: #ff3b5c; box-shadow: 0 0 10px rgba(255,59,92,.20), inset 0 0 22px rgba(255,59,92,.04); margin-top: 1.1rem; }
.card.warn > h3:first-child { color: #ff3b5c; }
.card.warn p { color: #ff9fb0; margin: 0; }

.tip-card { border-color: var(--blue); box-shadow: 0 0 8px rgba(77,123,255,.25); margin: 1rem 0 1.4rem; }
.tip-card h3 { color: var(--blue); margin-top: 0; }
.tip-list { margin: .5rem 0 0; padding-left: 1.2rem; color: var(--ink); }
.tip-list li { margin: .35rem 0; }
.cred-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: .6rem 0 1rem; }
.cred-result { border-color: var(--lime); margin: 1rem 0; }
.reissue-form { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .5rem; }
.loc-list { columns: 2; column-gap: 2rem; list-style: none; padding: 0; margin: 0; }
.loc-list li { break-inside: avoid; margin: 0 0 .65rem; }
@media (max-width: 640px) { .loc-list { columns: 1; } }

/* tui braille spinner (next to "proxy pool coverage") */
.spinner::before { content: "\28CB"; color: var(--lime); margin-right: .55ch; text-shadow: var(--glow-lime); }
@media (prefers-reduced-motion: no-preference) {
  .spinner::before { animation: braille .8s steps(1) infinite; }
  @keyframes braille {
    0%   { content: "\280B"; } 10% { content: "\2819"; } 20% { content: "\2839"; }
    30%  { content: "\2838"; } 40% { content: "\283C"; } 50% { content: "\2834"; }
    60%  { content: "\2826"; } 70% { content: "\2827"; } 80% { content: "\2807"; }
    90%  { content: "\280F"; }
  }
}

/* ---- footer price tickers (up green / down red) ---- */
.tick { font-size: .82em; margin-left: .2rem; }
.tick.up::before   { content: "\25B2"; color: #24e034; text-shadow: 0 0 7px rgba(36,224,52,.75); }
.tick.down::before { content: "\25BC"; color: #ff2d55; text-shadow: 0 0 7px rgba(255,45,85,.75); }
.tick.flat::before { content: "\2013"; color: var(--muted); opacity: .55; }

/* ---- register: spacing + pulsing alert card ---- */
.wrap.narrow h1 { margin-bottom: 1.7rem; }
.alert-ico { color: #ff3b5c; }
@media (prefers-reduced-motion: no-preference) {
  .card.warn.alert { animation: alertpulse 2.2s ease-in-out infinite; }
  @keyframes alertpulse {
    0%,100% { box-shadow: 0 0 8px rgba(255,59,92,.18), inset 0 0 22px rgba(255,59,92,.04); }
    50%     { box-shadow: 0 0 16px rgba(255,59,92,.5), inset 0 0 22px rgba(255,59,92,.08); }
  }
}

/* ---- feature-card themed animations ---- */
.fx { display: inline-block; width: .9em; height: .9em; margin-right: .5rem; vertical-align: middle; position: relative; }
/* auto-detect: radar ping */
.fx-scan { border-radius: 50%; background: radial-gradient(circle, var(--lime) 34%, transparent 36%); }
.fx-scan::before, .fx-scan::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--lime); opacity: 0; }
/* translate: cycling glyphs */
.fx-rot { width: 1ch; height: 1em; color: var(--pink); text-align: center; font-weight: 800; }
.fx-rot::after { content: "A"; }
/* chain: hopping dots */
.fx-hop { display: inline-flex; align-items: flex-end; gap: 2px; width: auto; height: 1em; }
.fx-hop i { width: 4px; height: 4px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 6px var(--blue); }
@media (prefers-reduced-motion: no-preference) {
  .fx-scan::before { animation: ping 1.8s ease-out infinite; }
  .fx-scan::after  { animation: ping 1.8s ease-out infinite .9s; }
  @keyframes ping { 0% { transform: scale(.35); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
  .fx-rot::after { animation: rotglyph .9s steps(1) infinite; }
  @keyframes rotglyph {
    0%{content:"A"} 12%{content:"7"} 24%{content:"#"} 36%{content:"Z"} 48%{content:"3"}
    60%{content:"@"} 72%{content:"Q"} 84%{content:"9"} 96%{content:"%"}
  }
  .fx-hop i { animation: hop 1s ease-in-out infinite; }
  .fx-hop i:nth-child(2) { animation-delay: .15s; }
  .fx-hop i:nth-child(3) { animation-delay: .3s; }
  @keyframes hop { 0%,100% { transform: translateY(0); } 40% { transform: translateY(-5px); } }
}

/* squarer buttons (terminal/TUI look) */
.btn, .nav-btn { border-radius: 5px; }
.coin-tile { border-radius: 8px; }

.legal-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .15rem .65rem;
  font-size: .85rem;
}
.legal-footer a { color: var(--muted); }
.legal-footer a:hover { color: var(--fg); }
.legal-footer a:not(:last-child)::after {
  content: "·";
  margin-left: .65rem;
  color: var(--line);
  pointer-events: none;
}
.footer-banner { text-align: center; }
.footer-banner p { margin: 0; }

pre.canary-block {
  overflow-x: auto;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: .8rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ---- terminal-style buttons: square neon-bordered boxes (like the cards) ---- */
.btn {
  border-radius: 3px;
  border: 1px solid var(--lime);
  background: transparent;
  color: var(--lime);
  padding: .6rem 1.1rem;
  font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  box-shadow: 0 0 8px rgba(88,255,0,.16), inset 0 0 14px rgba(88,255,0,.05);
}
.btn:hover { background: rgba(88,255,0,.12); box-shadow: var(--glow-lime); color: var(--lime); text-shadow: none; }
.btn.ghost { border-color: var(--lime); color: var(--lime); }
.nav-btn { border-radius: 3px; }
.coin-tile { border-radius: 3px; }

/* keep the translate glyph inline on the title baseline (was dropping low) */
.fx-rot { display: inline; width: auto; height: auto; position: static; vertical-align: baseline; }


/* ---- payment page: centered flow ---- */
.pay { text-align: center; max-width: 640px; margin: 0 auto; }
.pay h1 { display: inline-flex; align-items: center; gap: .55rem; justify-content: center; flex-wrap: wrap; }
.pay-logo { display: inline-flex; }
.pay-logo .coin-logo { width: 1.3em; height: 1.3em; }
.pay-flow { display: flex; flex-direction: column; align-items: center; gap: .8rem; margin: 1.5rem 0; }
.pay-line { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; justify-content: center; max-width: 100%; }
.pay-k { color: var(--muted); text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; }
.pay-amt { font-size: 1.15rem; }
.pay .qr { margin: .2rem auto; }
.pay .addr { text-align: left; max-width: 100%; overflow-x: auto; }

/* ---- payment status banner ---- */
.pay-status { display: inline-flex; align-items: center; gap: .5rem; margin: 1rem auto; padding: .6rem 1rem; border-radius: 4px; border: 1px solid; }
.pay-status.ok { color: #24e034; border-color: #24e034; box-shadow: 0 0 10px rgba(36,224,52,.25); }
.pay-status.pending { color: var(--lime); border-color: var(--lime); box-shadow: var(--glow-lime); }
.pay-status.waiting { color: var(--muted); border-color: var(--line); }
.pay-status a { margin-left: .4rem; }

/* ---- payment page: copyable fields + smooth auto-refresh ---- */
/* one click selects the whole value → Ctrl/Cmd-C to copy (zero-JS) */
.pay-amt, .pay .addr {
  user-select: all; -webkit-user-select: all; cursor: copy;
  border: 1px solid var(--line); border-radius: 4px; padding: .5rem .8rem;
  background: #050a05; transition: border-color .2s ease, box-shadow .2s ease;
}
.pay-amt:hover, .pay .addr:hover { border-color: var(--lime); box-shadow: var(--glow-lime); }
.pay-amt:focus, .pay .addr:focus { outline: none; border-color: var(--lime); box-shadow: var(--glow-lime); }
.copy-hint { color: var(--muted); font-size: .78rem; opacity: .7; }
/* the meta-refresh does a full reload; suppress the entry animation here so it
   doesn't re-flicker each cycle, and keep the reload flash black not white */
html { background: var(--bg); }
.wrap.pay { animation: none; }

/* ---- endpoint builder wizard ---- */
.steps { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0 0 1.1rem; }
.steps li { margin: 0; }
.step { font-family: var(--mono); font-size: .82rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: 3px;
  padding: .42rem .6rem; cursor: pointer; display: inline-flex; align-items: baseline; gap: .45rem;
  transition: border-color .15s ease, color .15s ease, box-shadow .15s ease; }
.step:hover { border-color: var(--lime); color: var(--ink); }
.step b { color: var(--lime); font-weight: 700; }
.step .sv { color: var(--pink); text-transform: none; letter-spacing: 0; opacity: .85; }
.step.active { border-color: var(--lime); color: var(--ink); box-shadow: var(--glow-lime); }
.wiz-panel { border: 1px solid var(--line); border-radius: 4px; padding: 1.1rem 1rem .9rem; background: #050a05; }
.wiz-panel label { display: block; margin-bottom: .8rem; color: var(--ink); }
.wiz-panel input, .wiz-panel select { width: 100%; max-width: 32rem; }
.wiz-ctx { margin: 0 0 .7rem; color: var(--muted); font-size: .85rem; }
.wiz-nav { display: flex; gap: .6rem; margin-top: .6rem; }
.wiz-nav .btn { margin-top: 0; }