/* ==================================================================
   Numera — main stylesheet
   reset · base · utils · components · header · selector · sections ·
   account/top-up/api · media. Icy canvas; glass + neu on top.
   ================================================================== */

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { line-height: 1.5; -webkit-font-smoothing: antialiased; }
img, svg { display: inline-block; vertical-align: middle; }
input, button, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; padding: 0; cursor: pointer; }
/* HTML `hidden` attribute must win over any class with display:flex/grid/etc. */
[hidden] { display: none !important; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; }

/* ---------- base ---------- */
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-ui); font-size: 15px; color: var(--ink);
  background:
    radial-gradient(1100px 520px at 80% -10%, #D7E6FF 0%, rgba(215,230,255,0) 60%),
    radial-gradient(900px 480px at -5% 0%, #E9F1FF 0%, rgba(233,241,255,0) 55%),
    var(--ice-100);
  background-repeat: no-repeat;
  min-height: 100vh;
}
::selection { background: rgba(46, 99, 246, 0.20); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 2px; border-radius: 3px; }
h1, h2 { font-weight: 400; }

/* ---------- utils ---------- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.mono-label { font-family: var(--font-mono); font-size: 11px; font-weight: 500; line-height: 1.4; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.cur { font-size: 0.78em; position: relative; top: -0.1em; margin-right: 1px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.folio { border-top: 1px solid var(--line-2); margin-bottom: 36px; }
.folio .mono-label { display: inline-block; transform: translateY(-50%); background: var(--ice-100); padding-right: 16px; }
.section-head h2 { font-family: var(--font-display); font-size: 38px; letter-spacing: -0.025em; line-height: 1.05; }
.section-head p { margin-top: 10px; color: var(--ink-2); max-width: 54ch; }

.live-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } }

.sk { position: relative; overflow: hidden; background: var(--ice-200); border-radius: 8px; color: transparent !important; }
.sk::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent); animation: shimmer 1.5s linear infinite; }
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; border-radius: var(--r-ctrl); border: 1px solid transparent; font-weight: 600; font-size: 14px; line-height: 1.2; white-space: nowrap; transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: linear-gradient(180deg, var(--blue-500), var(--blue-600)); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 12px 24px -12px rgba(20,55,165,.6); }
.btn-primary:hover { box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 16px 30px -12px rgba(20,55,165,.75); }
.btn-ghost { color: var(--ink); border-color: var(--line-2); background: rgba(255,255,255,.55); }
.btn-ghost:hover { background: #fff; }
.btn-outline { border-color: var(--line-2); background: #fff; color: var(--ink); }
.btn-outline:hover { border-color: var(--blue-500); color: var(--blue-600); }
.btn-white { background: #fff; color: var(--navy-900); }
.btn-white:hover { background: var(--ice-50); }
.btn-lg { padding: 14px 28px; font-size: 15px; }
.btn-sm { padding: 8px 14px; font-size: 13px; }
.btn-block { width: 100%; }
.btn-buy { background: linear-gradient(180deg, #FFB24A, #F2960F); color: #fff; box-shadow: 0 10px 20px -12px rgba(210,120,15,.8); }
.btn-buy:hover { filter: brightness(1.04); }

/* ---------- glass / neu / cards ---------- */
.glass { background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); box-shadow: inset 0 1px 0 rgba(255,255,255,.85), var(--glass-shadow); }
.glass-dark { background: rgba(255,255,255,.08); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.18); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass { background: rgba(255,255,255,.94); } .glass-dark { background: rgba(8,18,41,.9); } }
.neu { background: var(--ice-100); box-shadow: var(--neu-raised); transition: box-shadow var(--t-fast); }
.neu:hover { box-shadow: var(--neu-soft); }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--lift-1); }

.iso-chip { display: inline-flex; align-items: center; justify-content: center; height: 22px; padding: 0 9px; border: 1px solid var(--line-2); border-radius: var(--r-pill); font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .12em; background: #fff; }
.logo-tile { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 40px; border-radius: var(--r-tile); background: #fff; border: 1px solid var(--line); overflow: hidden; }
.logo-tile img { width: 22px; height: 22px; object-fit: contain; }
.logo-tile.sm { width: 30px; height: 30px; flex-basis: 30px; } .logo-tile.sm img { width: 17px; height: 17px; }
.logo-tile.lg { width: 56px; height: 56px; flex-basis: 56px; border-radius: var(--r-card); } .logo-tile.lg img { width: 30px; height: 30px; }
.flag { width: 24px; height: 18px; flex: 0 0 24px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(13,38,76,.10); }

/* rank badges */
.rank-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 64px; height: 24px; padding: 0 12px; border-radius: var(--r-pill); font-size: 11px; font-weight: 700; letter-spacing: .04em; color: #fff; text-transform: capitalize; box-shadow: inset 0 1px 0 rgba(255,255,255,.4); }
.rank-badge.gold   { background: linear-gradient(180deg, var(--gold-1), var(--gold-2)); }
.rank-badge.silver { background: linear-gradient(180deg, var(--silver-1), var(--silver-2)); color: #2A3344; }
.rank-badge.bronze { background: linear-gradient(180deg, var(--bronze-1), var(--bronze-2)); }

/* ---------- header (app-like) ---------- */
.site-header { position: sticky; top: 0; z-index: 60; background: rgba(231,240,254,.62); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-bottom: 1px solid transparent; transition: border-color var(--t-fast), background-color var(--t-fast); }
.site-header.is-scrolled { background: rgba(242,247,255,.85); border-bottom-color: var(--line); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .site-header { background: rgba(231,240,254,.97); } }
.header-inner { display: flex; align-items: center; gap: 28px; height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand-mark {
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(255,255,255,0.35), rgba(255,255,255,0.08));
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.5),
    inset 0 -1px 2px rgba(0,0,0,0.06),
    0 2px 8px rgba(30,60,120,0.12);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.35);
  object-fit: cover;
  padding: 2px;
}
.brand-name { font-weight: 600; font-size: 18px; letter-spacing: -0.01em; }
.nav { display: flex; align-items: center; gap: 24px; flex: 1; }
.nav-link { position: relative; font-size: 14px; font-weight: 500; color: var(--ink-2); padding: 4px 0; transition: color var(--t-fast); }
.nav-link:hover { color: var(--ink); }
.nav-link[aria-current="page"] { color: var(--blue-600); }
.nav-link[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 2px; background: var(--blue-600); border-radius: 2px; }
.header-tools { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.balance-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 8px 7px 14px; border-radius: var(--r-pill); background: rgba(255,255,255,.7); border: 1px solid var(--line-2); transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.balance-pill:hover { border-color: var(--blue-300); box-shadow: var(--lift-1); }
.bp-amount { font-size: 14px; font-weight: 500; color: var(--ink); }
.bp-plus { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(180deg, var(--blue-500), var(--blue-600)); color: #fff; font-size: 16px; line-height: 1; }

.lang { position: relative; }
.lang-btn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: var(--r-ctrl); font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .06em; color: var(--ink-2); border: 1px solid transparent; transition: background-color var(--t-fast), border-color var(--t-fast); }
.lang-btn:hover { background: rgba(255,255,255,.7); border-color: var(--line); }
.lang-flag { width: 18px; height: 13px; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px rgba(13,38,76,.1); }
.lang-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 168px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-ctrl); box-shadow: var(--lift); padding: 6px; z-index: 70; }
.lang-menu button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 12px; border-radius: 8px; font-size: 14px; transition: background-color var(--t-fast); }
.lang-menu button:hover { background: var(--ice-50); }
.lang-menu button[aria-current="true"] { color: var(--blue-600); font-weight: 600; }

.profile { position: relative; }
.profile-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.7); border: 1px solid var(--line-2); color: var(--ink-2); transition: border-color var(--t-fast), color var(--t-fast); }
.profile-btn:hover { border-color: var(--blue-300); color: var(--blue-600); }
.profile-menu { position: absolute; right: 0; top: calc(100% + 8px); width: 300px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: 0 34px 66px -28px rgba(20,55,165,.42); padding: 0; overflow: hidden; z-index: 70; }
/* gradient header + conic avatar ring + status dot */
.pm-head { position: relative; display: flex; align-items: center; gap: 13px; padding: 20px 18px; background: linear-gradient(135deg, #2E63F6, #1437A5); color: #fff; overflow: hidden; }
.pm-head::after { content: ""; position: absolute; top: -34px; right: -24px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.2), transparent 70%); }
.pm-av-wrap { padding: 2px; border-radius: 50%; background: conic-gradient(from 200deg, #9DB6FB, #fff, #9DB6FB, #fff); flex: 0 0 auto; position: relative; z-index: 1; }
.pm-avatar { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.18); border: 2px solid rgba(255,255,255,.6); color: #fff; font-weight: 700; font-size: 17px; }
.pm-id { position: relative; z-index: 1; min-width: 0; }
.pm-name { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 14.5px; color: #fff; }
.pm-dot { width: 7px; height: 7px; border-radius: 50%; background: #23E08F; box-shadow: 0 0 0 3px rgba(35,224,143,.3); flex: 0 0 7px; }
.pm-mail { display: block; font-size: 12px; color: rgba(255,255,255,.82); margin-top: 2px; }
/* combined balance + action card */
.pm-bal { margin: 14px; padding: 16px; border-radius: 14px; background: linear-gradient(165deg, #EEF4FF, #DCE8FF); border: 1px solid #CFDEFB; }
.pm-bal-l { display: block; color: var(--blue-700); opacity: .75; }
.pm-bal-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 5px; }
.pm-bal-amt { font-family: var(--font-mono); font-size: 26px; font-weight: 500; line-height: 1; color: var(--ink); }
.pm-top.btn { padding: 9px 15px; font-size: 13px; border-radius: 11px; }
/* rounded icon-tile menu */
.pm-list { padding: 4px 8px 12px; display: flex; flex-direction: column; gap: 2px; list-style: none; margin: 0; }
.pm-list .pm-item { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 12px; font-size: 14px; font-weight: 500; color: var(--ink-2); transition: background-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast); }
.pm-list .pm-item:hover { background: #fff; color: var(--ink); box-shadow: 0 8px 18px -12px rgba(20,55,165,.45); }
.pm-list .pm-item .ic { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: var(--ice-100); color: var(--blue-600); flex: 0 0 34px; transition: background-color var(--t-fast), color var(--t-fast); }
.pm-list .pm-item:hover .ic { background: linear-gradient(180deg, #2E63F6, #1B49D8); color: #fff; }
.pm-list .pm-item.out { color: #E5484D; }
.pm-list .pm-item.out .ic { background: rgba(229,72,77,.1); color: #E5484D; }
.pm-list .pm-item.out:hover .ic { background: #E5484D; color: #fff; }
.pm-sep { height: 1px; background: var(--line); margin: 8px 6px; list-style: none; }

.nav-toggle { display: none; width: 42px; height: 42px; border-radius: var(--r-ctrl); border: 1px solid var(--line-2); background: rgba(255,255,255,.6); flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.nav-toggle span { display: block; width: 16px; height: 1.6px; background: var(--ink); transition: transform var(--t-fast); }
.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.3px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.3px) rotate(-45deg); }

/* ---------- footer ---------- */
.footer { background: var(--ice-200); border-top: 1px solid var(--line); padding: 64px 0 0; }
.footer-grid { display: grid; grid-template-columns: 4fr 2fr 2fr 2fr 2fr; gap: var(--gutter); }
.f-tag { margin: 14px 0 22px; font-size: 13px; color: var(--ink-2); max-width: 32ch; }
.f-lang span { display: block; margin-bottom: 8px; }
.f-lang select { appearance: none; -webkit-appearance: none; padding: 9px 34px 9px 12px; border: 1px solid var(--line-2); border-radius: var(--r-ctrl); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2346566F' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center; font-size: 13px; }
.f-col h3 { margin-bottom: 14px; color: var(--navy-900, #1a2a52); font-weight: 600; }
.f-col a { display: block; padding: 5px 0; font-size: 14px; color: var(--ink-2); transition: color var(--t-fast); }
.f-col a:hover { color: var(--blue-600); }
.f-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 44px; padding: 20px 0 22px; border-top: 1px solid var(--line); }
.f-bottom p { font-size: 12px; color: var(--ink-2); }

/* ---------- hero ---------- */
.hero { position: relative; padding: 64px 0 56px; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.kicker { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px; padding: 7px 14px 7px 10px; border: 1px solid rgba(90,130,220,.45); border-radius: var(--r-pill); background: linear-gradient(180deg, #163374, #0B1E4A); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 10px 24px -14px rgba(11,30,74,.7); }
.kicker .mono-label { color: #D6E4FF; font-family: "Geist Mono", "IBM Plex Mono", monospace; letter-spacing: .14em; }
.hero-title { font-family: var(--font-display); font-size: clamp(46px, 6vw, 78px); line-height: 1.0; letter-spacing: -0.03em; }
.hero-title em { font-style: italic; color: var(--blue-600); }
.hero-sub { margin-top: 22px; font-size: 18px; color: var(--ink-2); max-width: 46ch; }
.hero-trust { margin-top: 26px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.hero-trust .mono-label { display: inline-flex; align-items: center; gap: 7px; }

/* compact hero buy card */
.buy-card { border-radius: var(--r-panel); padding: 24px; }
.buy-card .bc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.buy-card .bc-head .mono-label { color: var(--blue-700); }
.field { display: block; margin-bottom: 14px; }
.field-label { display: block; margin-bottom: 8px; }
.select { width: 100%; appearance: none; -webkit-appearance: none; padding: 13px 38px 13px 14px; border: 1px solid var(--line-2); border-radius: var(--r-ctrl); background: rgba(255,255,255,.94) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2346566F' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center; font-size: 15px; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.select:focus { border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(46,99,246,.14); }
.price-line { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 0; margin: 4px 0 14px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.price-big { font-family: var(--font-mono); font-size: 30px; font-weight: 500; }
.price-meta { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); }
.note-line { margin-top: 12px; font-size: 12px; color: var(--ink-2); display: flex; align-items: center; gap: 8px; }

/* ---------- sections ---------- */
.section { padding: 84px 0; }
.section.band-white { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section.band-white .folio .mono-label { background: #fff; }
.stats { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stats-row { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 18px var(--gutter); flex-wrap: wrap; }
.stat { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink-2); }
.stat b { font-size: 18px; font-weight: 500; color: var(--ink); font-family: var(--font-mono); }

.pop-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.pop-card { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px; border-radius: var(--r-card); background: #fff; border: 1px solid var(--line); transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast); }
.pop-card:hover { border-color: var(--blue-300); box-shadow: var(--lift-1); transform: translateY(-2px); }
.pop-card .pc-name { font-size: 14px; font-weight: 600; }
.pop-card .pc-price { font-family: var(--font-mono); font-size: 13px; color: var(--blue-700); }

.steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.steps::before { content: ""; position: absolute; top: 32px; left: 32px; right: 32px; height: 1px; background: var(--line-2); }
.step { position: relative; }
.step-plate { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: var(--r-card); background: var(--ice-100); box-shadow: var(--neu-raised); font-family: var(--font-mono); font-size: 30px; font-weight: 500; color: var(--blue-700); }
.step h3 { margin: 20px 0 8px; font-size: 17px; font-weight: 600; }
.step p { color: var(--ink-2); max-width: 34ch; }

.cty-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 44px; }
.cty-row { display: grid; grid-template-columns: 24px 1fr auto auto; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.cty-row .c-dial { font-family: var(--font-mono); font-size: 13px; color: var(--ink-3); }
.cty-row .num { font-size: 14px; }

.api-slab { background: var(--navy-900); color: #fff; padding: 84px 0 48px; }
.api-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: start; }
.api-kicker { color: rgba(255,255,255,.55); }
.api-title { font-family: var(--font-display); font-size: 46px; letter-spacing: -0.025em; margin-top: 22px; }
.api-sub { margin-top: 16px; color: rgba(255,255,255,.72); max-width: 40ch; }
.api-actions { display: flex; align-items: center; gap: 22px; margin-top: 30px; }
.api-doclink { font-size: 14px; font-weight: 500; color: rgba(255,255,255,.72); border-bottom: 1px solid rgba(255,255,255,.25); padding-bottom: 2px; transition: color var(--t-fast), border-color var(--t-fast); }
.api-doclink:hover { color: #fff; border-color: #fff; }
.code-card { border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-panel); background: rgba(255,255,255,.03); }
.code { font-family: var(--font-mono); font-size: 13px; line-height: 1.85; padding: 22px 22px 22px 0; overflow-x: auto; font-variant-numeric: tabular-nums; }
.code .ln { display: inline-block; width: 32px; margin-right: 16px; padding-right: 10px; text-align: right; color: rgba(255,255,255,.32); border-right: 1px solid rgba(255,255,255,.12); user-select: none; }
.c-cmd { color: rgba(255,255,255,.85); } .c-key { color: #fff; } .c-val { color: rgba(255,255,255,.7); }
.webhook-chip { display: inline-flex; align-items: center; gap: 8px; margin: -16px 0 0 30px; padding: 8px 16px; border-radius: var(--r-pill); font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,.85); position: relative; z-index: 1; }
.api-foot { margin-top: 56px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.12); }
.api-foot .mono-label { color: rgba(255,255,255,.55); }

.pay-row { display: flex; flex-wrap: wrap; gap: 14px; }
.pay-chip { padding: 12px 20px; border-radius: var(--r-ctrl); font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: .03em; }
.pay-note { margin-top: 22px; font-size: 13px; color: var(--ink-2); }

.faq-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 44px; align-items: start; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { list-style: none; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 18px 0; font-weight: 500; font-size: 16px; cursor: pointer; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-family: var(--font-mono); color: var(--ink-3); }
.faq-item[open] summary::after { content: "–"; }
.faq-item p { padding: 0 24px 18px 0; color: var(--ink-2); max-width: 56ch; }

.blog-row { display: grid; grid-template-columns: 130px 1fr; gap: var(--gutter); padding: 24px 0; border-bottom: 1px solid var(--line); }
.blog-row time { font-family: var(--font-mono); font-size: 13px; color: var(--ink-3); padding-top: 6px; }
.blog-row h3 { font-family: var(--font-display); font-weight: 400; font-size: 27px; letter-spacing: -0.015em; line-height: 1.18; }
.blog-row h3 a { transition: color var(--t-fast); }
.blog-row h3 a:hover { color: var(--blue-600); }
.blog-row p { margin-top: 6px; color: var(--ink-2); }

.cta-band { background: linear-gradient(180deg, var(--ice-200), var(--ice-100)); border-top: 1px solid var(--line); padding: 84px 0; }
.cta-inner { text-align: center; max-width: 620px; margin: 0 auto; }
.cta-title { font-family: var(--font-display); font-size: 48px; letter-spacing: -0.025em; }
.cta-sub { margin: 14px 0 30px; color: var(--ink-2); font-size: 18px; }

.page-head { padding: 52px 0 8px; }
.crumbs { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); margin-bottom: 18px; }
.crumbs a:hover { color: var(--blue-600); }
.page-head h1 { font-family: var(--font-display); font-size: clamp(38px, 5vw, 56px); letter-spacing: -0.03em; line-height: 1.02; }
.page-head .lede { margin-top: 14px; font-size: 18px; color: var(--ink-2); max-width: 56ch; }

/* ================================================================
   STEPPED SELECTOR (smsbower-style, professional)
   ================================================================ */
.flow { display: grid; grid-template-columns: 1fr; gap: 22px; align-items: start; }
.sum { display: none; }   /* order-summary panel removed — Buy lives on each row */
.flow-steps { display: flex; flex-direction: column; gap: 18px; }
.step-block { border-radius: var(--r-panel); padding: 22px; }
.step-block.glass { padding: 22px; }
.sb-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.step-num { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; background: #fff; border: 1px solid var(--line-2); font-family: var(--font-mono); font-size: 14px; font-weight: 500; color: var(--blue-700); box-shadow: var(--neu-soft); }
.step-block.is-done .step-num { background: linear-gradient(180deg, var(--blue-500), var(--blue-600)); color: #fff; border-color: transparent; }
.sb-title { font-size: 17px; font-weight: 600; }
.sb-pick { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }

.svc-search { display: flex; align-items: center; gap: 10px; padding: 12px 16px; margin-bottom: 14px; background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-ctrl); color: var(--ink-3); transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.svc-search:focus-within { border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(46,99,246,.14); }
.svc-search input { flex: 1; border: none; background: transparent; font-size: 15px; color: var(--ink); }
.svc-search input::placeholder { color: var(--ink-3); }

/* service chips */
.chip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; max-height: 320px; overflow-y: auto; padding: 4px; margin: -4px; }
.svc-chip { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: var(--r-card); background: #fff; border: 1px solid var(--line); cursor: pointer; text-align: left; transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast); }
.svc-chip:hover { border-color: var(--blue-300); box-shadow: var(--lift-1); transform: translateY(-1px); }
.svc-chip.is-active { border-color: var(--blue-500); box-shadow: 0 0 0 2px rgba(46,99,246,.2); }
.svc-chip .sc-name { font-size: 14px; font-weight: 500; }
.svc-chip .sc-from { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }

/* light-blue rank tabs */
.rank-tabs { display: inline-flex; gap: 4px; padding: 5px; background: var(--tab-track); border-radius: var(--r-ctrl); }
.rank-tab { padding: 9px 22px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--blue-700); opacity: .7; transition: background-color var(--t-fast), color var(--t-fast), opacity var(--t-fast), box-shadow var(--t-fast); }
.rank-tab:hover { opacity: 1; }
.rank-tab.is-active { background: var(--tab-active); color: var(--tab-ink); opacity: 1; box-shadow: 0 4px 12px -6px rgba(20,55,165,.4); }
.rank-tab.is-active.r-gold   { color: var(--gold-2); }
.rank-tab.is-active.r-silver { color: var(--silver-2); }
.rank-tab.is-active.r-bronze { color: var(--bronze-2); }
.rank-info { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; color: var(--ink-2); }

.step-hint { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 13px; color: var(--ink-3); }

/* country rows + expandable provider table */
.country-rows { display: flex; flex-direction: column; gap: 8px; max-height: 560px; overflow-y: auto; padding: 4px; margin: -4px; }
.country-row { border: 1px solid var(--line); border-radius: var(--r-card); background: #fff; overflow: hidden; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.country-row.is-open { border-color: var(--blue-300); box-shadow: var(--lift-1); }
.cr-main { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 14px; padding: 13px 16px; }
.cr-name { font-weight: 600; font-size: 15px; }
.cr-sub { display: block; font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.cr-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: var(--ice-50); font-size: 12px; font-weight: 600; color: var(--ink-2); transition: background-color var(--t-fast), color var(--t-fast); }
.cr-toggle:hover { background: var(--ice-100); color: var(--ink); }
.cr-toggle svg { transition: transform var(--t-fast); }
.country-row.is-open .cr-toggle svg { transform: rotate(180deg); }
.provider-wrap { display: none; padding: 0 16px 8px; }
.country-row.is-open .provider-wrap { display: block; }
.provider-table { width: 100%; }
.provider-table thead th { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); text-align: left; padding: 8px 8px; border-bottom: 1px solid var(--line); }
.provider-table th.num, .provider-table td.num { text-align: right; }
.provider-table td { padding: 9px 8px; border-bottom: 1px solid var(--line); font-size: 13px; }
.provider-table tr:last-child td { border-bottom: none; }
.provider-table .p-id { font-family: var(--font-mono); color: var(--ink-2); }
.provider-table .p-count { font-family: var(--font-mono); color: var(--ink-2); }
.provider-table .p-cost .btn-buy { min-width: 86px; }

/* sticky summary */
.sum { position: sticky; top: 88px; border-radius: var(--r-panel); padding: 22px; }
.sum-title { margin-bottom: 4px; }
.sum-row { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.sum-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); width: 64px; flex: 0 0 64px; }
.sum-val { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; }
.sum-price { display: flex; align-items: baseline; justify-content: space-between; margin: 16px 0; }
.sum-price .p-big { font-family: var(--font-mono); font-size: 30px; font-weight: 500; }
.sum-price .p-meta { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); }
.sum-note { margin-top: 12px; font-size: 12px; color: var(--ink-2); display: flex; align-items: center; gap: 8px; }

/* ================================================================
   TOP-UP
   ================================================================ */
.topup-grid { display: grid; grid-template-columns: 1fr 360px; gap: 28px; align-items: start; }
.amount-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.amount-card { position: relative; padding: 18px 16px; border-radius: var(--r-card); background: #fff; border: 1px solid var(--line-2); cursor: pointer; text-align: left; transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast); }
.amount-card:hover { border-color: var(--blue-300); box-shadow: var(--lift-1); transform: translateY(-1px); }
.amount-card.is-active { border-color: var(--blue-500); box-shadow: 0 0 0 2px rgba(46,99,246,.18); }
.amount-card .ac-amt { font-family: var(--font-mono); font-size: 22px; font-weight: 500; }
.amount-card .ac-bonus { display: inline-block; margin-top: 6px; font-size: 11px; font-weight: 600; color: var(--green, #14916b); }
.custom-amount { margin-top: 14px; }
.custom-amount input { width: 100%; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: var(--r-ctrl); font-family: var(--font-mono); font-size: 18px; }
.custom-amount input:focus { border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(46,99,246,.14); }
.method-list { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.method-card { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: var(--r-card); background: #fff; border: 1px solid var(--line-2); cursor: pointer; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.method-card:hover { border-color: var(--blue-300); }
.method-card.is-active { border-color: var(--blue-500); box-shadow: 0 0 0 2px rgba(46,99,246,.18); }
.method-ico { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--r-tile); background: var(--ice-100); color: var(--blue-700); }
.method-card .mc-name { font-weight: 600; font-size: 14px; }
.method-card .mc-sub { display: block; font-size: 12px; color: var(--ink-3); }
.topup-side { border-radius: var(--r-panel); padding: 24px; position: sticky; top: 88px; }
.topup-side .ts-bal { display: flex; align-items: baseline; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--line); }
.topup-side .ts-amt { font-family: var(--font-mono); font-size: 28px; font-weight: 500; }
.topup-side .ts-row { display: flex; justify-content: space-between; padding: 12px 0; font-size: 14px; }
.topup-side .ts-row .mono { color: var(--ink); }
.ts-note { margin-top: 14px; font-size: 12px; color: var(--ink-2); }

/* ================================================================
   ACCOUNT
   ================================================================ */
.acct-grid { display: grid; grid-template-columns: 240px 1fr; gap: 28px; align-items: start; }
.acct-nav { display: flex; flex-direction: column; gap: 4px; border-radius: var(--r-panel); padding: 14px; position: sticky; top: 88px; }
.acct-tab { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: var(--r-ctrl); font-size: 14px; font-weight: 500; color: var(--ink-2); text-align: left; width: 100%; transition: background-color var(--t-fast), color var(--t-fast); }
.acct-tab:hover { background: rgba(255,255,255,.6); }
.acct-tab.is-active { background: #fff; color: var(--blue-700); box-shadow: var(--lift-1); }
.acct-panel { display: none; }
.acct-panel.is-active { display: block; }
.stat-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 24px; }
.stat-card { padding: 20px; border-radius: var(--r-card); background: #fff; border: 1px solid var(--line); }
.stat-card .sc-k { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.stat-card .sc-v { font-family: var(--font-mono); font-size: 28px; font-weight: 500; margin-top: 6px; }
.order-row { display: grid; grid-template-columns: 30px 1fr auto auto; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.order-row .o-num { font-family: var(--font-mono); font-size: 13px; }
.order-row .o-status { font-family: var(--font-mono); font-size: 11px; padding: 3px 10px; border-radius: var(--r-pill); background: rgba(20,145,107,.12); color: #14916b; }
.empty-state { padding: 48px; text-align: center; color: var(--ink-3); border: 1px dashed var(--line-2); border-radius: var(--r-card); }

/* api keys */
.key-card { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: var(--r-card); background: #fff; border: 1px solid var(--line); margin-bottom: 12px; }
.key-card .k-val { flex: 1; font-family: var(--font-mono); font-size: 14px; color: var(--ink); letter-spacing: .02em; }
.key-card .k-date { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); }
.svc-price-table, .endpoint-table { width: 100%; }
.svc-price-table th, .endpoint-table th { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); text-align: left; padding: 0 8px 12px; border-bottom: 1px solid var(--line-2); }
.svc-price-table th.num { text-align: right; }
.svc-price-table td, .endpoint-table td { padding: 12px 8px; border-bottom: 1px solid var(--line); font-size: 14px; }
.svc-price-table td:first-child { display: flex; align-items: center; gap: 12px; }
.endpoint-table td.num, .svc-price-table td.num { text-align: right; }

.svc-hero { display: flex; align-items: center; gap: 18px; }
.svc-hero h1 { font-family: var(--font-display); font-size: clamp(36px, 5vw, 54px); letter-spacing: -0.02em; }
.svc-detail-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 36px; align-items: start; margin-top: 36px; }

/* ---------- media ---------- */
@media (max-width: 1100px) {
  .flow { grid-template-columns: 1fr; }
  .sum { position: static; }
  .topup-grid { grid-template-columns: 1fr; }
  .topup-side { position: static; }
}
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .api-grid { grid-template-columns: 1fr; gap: 44px; }
  .svc-detail-grid { grid-template-columns: 1fr; }
  .pop-grid { grid-template-columns: repeat(4, 1fr); }
  .acct-grid { grid-template-columns: 1fr; }
  .acct-nav { position: static; flex-direction: row; flex-wrap: wrap; }
  .acct-tab { width: auto; }
}
@media (max-width: 768px) {
  .section { padding: 56px 0; }
  .header-inner { gap: 12px; }
  .nav { display: none; position: absolute; top: 68px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 2px; background: #fff; border-bottom: 1px solid var(--line); padding: 12px 24px 18px; box-shadow: var(--lift); }
  .nav.is-open { display: flex; }
  .nav-link { padding: 11px 0; font-size: 16px; }
  .nav-link[aria-current="page"]::after { display: none; }
  .nav-toggle { display: flex; }
  .balance-pill { padding: 6px 7px 6px 12px; }
  .bp-amount { font-size: 13px; }
  .lang-btn span:not(#langLabel) { display: none; }
  .stats-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; }
  .steps { grid-template-columns: 1fr; gap: 36px; }
  .steps::before { top: 0; bottom: 0; left: 32px; right: auto; width: 1px; height: auto; }
  .cty-grid { grid-template-columns: 1fr; }
  .faq-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .f-brand { grid-column: 1 / -1; }
  .blog-row { grid-template-columns: 1fr; gap: 4px; }
  .blog-row time { padding-top: 0; }
  .pop-grid { grid-template-columns: repeat(3, 1fr); }
  .api-title, .cta-title { font-size: 36px; }
  .section-head h2 { font-size: 30px; }
  .amount-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-cards { grid-template-columns: 1fr; }
  .cr-main { grid-template-columns: 28px 1fr auto; }
  .cr-buy-top { display: none; }
  .provider-table .p-id-col { display: none; }
}
@media (max-width: 480px) {
  .container { padding: 0 16px; }
  .section { padding: 44px 0; }
  .hero { padding: 44px 0; }
  .hero-sub { font-size: 16px; }
  .pop-grid { grid-template-columns: repeat(2, 1fr); }
  .chip-grid { grid-template-columns: 1fr 1fr; }
  .cty-row { grid-template-columns: 24px 1fr auto; }
  .cty-row .c-dial { display: none; }
  .pay-chip { padding: 10px 15px; font-size: 12px; }
  .cta-title { font-size: 32px; }
  .footer-grid { grid-template-columns: 1fr; }
  .rank-tab { padding: 9px 14px; }
  .provider-table thead { display: none; }
  .profile-menu { width: 240px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ==================================================================
   ENHANCEMENTS — deeper canvas, bluish cards, icon dropdown,
   home buy-flow, richer rows, polished service detail
   ================================================================== */

/* the real icy-wave image, fixed behind everything */
body { background: var(--ice-100); }
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url("../assets/bg.png") center center / cover no-repeat, var(--ice-100);
}
/* let the hero + buy flow show the background through the glass */
.hero, .section { background: transparent; }
.section.band-white { background: rgba(234,241,255,.92); }

/* bluish cards everywhere (no pure-white panels) */
.card,
.pop-card,
.svc-chip,
.amount-card,
.method-card,
.stat-card,
.key-card,
.order-row-card,
.country-row,
.dd-btn { background: var(--card-grad); }
.logo-tile { background: #fff; }
.stats, .section.band-white { background: #EAF1FF; }
.section.band-white .folio .mono-label { background: #EAF1FF; }
.footer { background: var(--ice-200); }

/* folio rule label sits on the deeper canvas */
.folio .mono-label { background: var(--ice-100); }

/* ----- custom icon dropdown ----- */
.dd { position: relative; }
.dd-btn { width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r-ctrl); border: 1px solid var(--line-2); font-size: 16px; cursor: pointer; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.dd-btn:hover { border-color: var(--blue-300); }
.dd.is-open .dd-btn { border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(46,99,246,.16); }
.dd-name { flex: 1; text-align: left; font-weight: 600; color: var(--ink); }
.dd-sub { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); }
.dd-caret { color: var(--ink-3); transition: transform var(--t-fast); }
.dd.is-open .dd-caret { transform: rotate(180deg); }
.dd-panel { position: absolute; left: 0; right: 0; top: calc(100% + 8px); background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--lift); z-index: 40; padding: 8px; display: none; }
.dd.is-open .dd-panel { display: block; }
.dd-search { display: flex; align-items: center; gap: 10px; padding: 11px 14px; margin-bottom: 8px; background: var(--ice-50); border: 1px solid var(--line); border-radius: var(--r-ctrl); color: var(--ink-3); }
.dd-search input { flex: 1; border: none; background: transparent; font-size: 15px; color: var(--ink); }
.dd-list { max-height: 340px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--blue-300) transparent; }
.dd-list::-webkit-scrollbar { width: 10px; }
.dd-list::-webkit-scrollbar-track { background: var(--ice-50); border-radius: 10px; }
.dd-list::-webkit-scrollbar-thumb { background: var(--blue-300); border-radius: 10px; border: 2px solid var(--ice-50); }
.dd-list::-webkit-scrollbar-thumb:hover { background: var(--blue-400); }
.dd-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 10px; cursor: pointer; text-align: left; transition: background-color var(--t-fast); }
.dd-item:hover { background: var(--ice-50); }
.dd-item.is-active { background: #DCE8FF; }
.dd-item .di-name { font-weight: 500; font-size: 15px; }
.dd-item .di-from { margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--blue-700); }
.dd-empty { padding: 18px; text-align: center; color: var(--ink-3); font-size: 14px; }

/* ----- richer country rows ----- */
.country-rows { display: block; }            /* not flex — avoids shrink-collapse */
.country-rows > .country-row + .country-row { margin-top: 8px; }
.country-row { border: 1px solid var(--line); flex: 0 0 auto; }
.country-row:hover { border-color: var(--blue-300); box-shadow: var(--lift-1); }
.country-row.is-open { border-color: var(--blue-400); box-shadow: var(--lift-1); }
.cr-main { padding: 14px 16px; cursor: pointer; }
.cr-name { font-size: 15px; }
.cr-sub { color: var(--ink-2); }
.cr-sub b { color: var(--blue-700); font-weight: 600; }
.cr-flag-wrap { display: inline-flex; }
.cr-flag-wrap .flag { width: 28px; height: 21px; }
.cr-toggle { background: #fff; }
.provider-wrap { background: rgba(255,255,255,.6); border-top: 1px solid var(--line); margin-top: 2px; }
.provider-table .p-cost .btn-buy { min-width: 92px; box-shadow: 0 8px 16px -10px rgba(210,120,15,.9); }

/* ----- home buy flow ----- */
.chip-grid { max-height: 380px; }
.numbers-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 48px 24px; text-align: center; color: var(--ink-3); border: 1px dashed var(--line-2); border-radius: var(--r-card); background: rgba(255,255,255,.4); }
.numbers-empty svg { color: var(--blue-300); }
.numbers-locked .rank-tabs, .numbers-locked .step-hint, .numbers-locked .svc-search { opacity: .45; pointer-events: none; }
.bf-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.bf-head .step-num { flex: 0 0 30px; }
.numbers-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.numbers-head h2 { font-size: 20px; font-weight: 600; }

/* ----- polished service detail ----- */
.svc-hero { gap: 20px; }
.svc-stat-strip { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 22px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.svc-stat { display: flex; flex-direction: column; gap: 2px; }
.svc-stat .ss-v { font-family: var(--font-mono); font-size: 20px; font-weight: 500; color: var(--ink); }
.svc-stat .ss-k { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }

@media (max-width: 768px) {
  .bf-head .sb-title { font-size: 16px; }
  .svc-stat-strip { gap: 18px; }
}

/* ----- activation / OTP page (structured + informative) ----- */
.act-wrap { max-width: 920px; margin: 0 auto; }
.act-summary { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; padding: 10px 18px; border-radius: var(--r-pill); background: var(--card-grad); border: 1px solid var(--line-2); font-family: var(--font-mono); font-size: 13px; color: var(--ink-2); }
.act-summary b { color: var(--blue-700); font-weight: 600; }
.act-summary .live-dot { background: var(--signal); }

.act-board { border-radius: var(--r-panel); padding: 0; overflow: hidden; }
.ab-top { display: grid; grid-template-columns: 1.9fr 0.95fr 0.8fr auto; }
.ab-cell { padding: 22px 24px; border-right: 1px solid var(--line); }
.ab-cell:last-child { border-right: none; }
.ab-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); display: block; margin-bottom: 8px; }
.ab-value { font-size: 16px; font-weight: 600; color: var(--ink); }
.ab-value.amber { color: #B07400; }
.ab-value.green { color: #0F8A60; }
.ab-svc { display: flex; align-items: center; gap: 12px; }
.ab-svc .logo-tile { flex: 0 0 44px; width: 44px; height: 44px; }
.ab-svc-name { font-size: 17px; font-weight: 600; }
.ab-num { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.ab-num .flag { width: 26px; height: 19px; }
.ab-num .abn-text { font-family: var(--font-mono); font-size: 16px; font-weight: 500; letter-spacing: .02em; }
.ab-status { display: flex; flex-direction: column; justify-content: center; }
.ab-status .ab-value { display: inline-flex; align-items: center; gap: 8px; }
.ab-time { display: flex; flex-direction: column; justify-content: center; }
.ab-time .abt-num { font-family: var(--font-mono); font-size: 26px; font-weight: 500; }
.ab-act { display: flex; align-items: center; justify-content: center; padding: 22px 24px; }
.ab-price { display: flex; align-items: center; gap: 12px; padding: 16px 24px; border-top: 1px solid var(--line); background: rgba(255,255,255,.4); }
.ab-price .abp-v { font-family: var(--font-mono); font-size: 16px; font-weight: 600; color: var(--ink); }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line-2); background: #fff; color: var(--ink-3); transition: border-color var(--t-fast), color var(--t-fast); }
.icon-btn:hover { border-color: var(--blue-400); color: var(--blue-600); }
.btn-danger { border: 1px solid #E2B7AE; color: #B23B2A; background: #fff; }
.btn-danger:hover { border-color: #C8503A; background: #FCEFEC; }

/* code strip */
.act-code { display: flex; align-items: center; gap: 16px; margin-top: 18px; padding: 20px 24px; border-radius: var(--r-card); border: 1px dashed var(--line-2); background: rgba(255,255,255,.5); }
.act-code.received { border-style: solid; border-color: rgba(20,145,107,.45); background: linear-gradient(180deg, #ECFBF4, #fff); box-shadow: 0 16px 30px -22px rgba(15,138,96,.55); animation: codepop .35s ease-out; }
@keyframes codepop { from { transform: scale(.98); opacity: .55; } to { transform: scale(1); opacity: 1; } }
.spinner { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; border: 3px solid var(--ice-200); border-top-color: var(--blue-600); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.act-code .acode-label { font-size: 14px; color: var(--ink-2); }
.act-code .acode-num { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; background: linear-gradient(180deg, #2BC48A, #0F8A60); color: #fff; font-weight: 600; }
.act-code .acode-code { font-family: var(--font-mono); font-size: 28px; font-weight: 500; letter-spacing: .14em; color: var(--ink); }
.act-code .acode-sub { font-size: 12px; color: var(--ink-3); }
.act-code .ml-auto { margin-left: auto; }

/* info row */
.act-info { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.ai-item { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; border-radius: var(--r-card); background: var(--card-grad); border: 1px solid var(--line); }
.ai-item .ai-ico { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: 0 0 36px; border-radius: 10px; background: #fff; border: 1px solid var(--line); color: var(--blue-600); }
.ai-item .ai-t { font-weight: 600; font-size: 14px; }
.ai-item .ai-d { font-size: 13px; color: var(--ink-2); margin-top: 2px; }

/* service tip */
.act-tip { display: flex; align-items: flex-start; gap: 14px; margin-top: 16px; padding: 18px 20px; border-radius: var(--r-card); background: linear-gradient(180deg, #EAF1FF, #E1EBFF); border: 1px solid var(--blue-300); }
.act-tip .at-ico { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; background: linear-gradient(180deg, var(--blue-500), var(--blue-700)); color: #fff; }
.act-tip .at-title { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.act-tip .at-body { font-size: 13px; color: var(--ink-2); line-height: 1.55; }
.act-tip .at-body b { color: var(--blue-700); }

.act-actions { display: flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.act-actions .btn { flex: 1; min-width: 150px; }

@media (max-width: 760px) {
  .ab-top { grid-template-columns: 1fr 1fr; }
  .ab-cell { padding: 16px 18px; }
  .ab-svc-cell { grid-column: 1 / -1; border-right: none; border-bottom: 1px solid var(--line); }
  .ab-status { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .ab-time { border-bottom: 1px solid var(--line); }
  .ab-act { grid-column: 1 / -1; padding: 16px 18px; }
  .ab-act .btn { width: 100%; }
  .ab-price { padding: 14px 18px; }
  .act-info { grid-template-columns: 1fr; }
}
@media (max-width: 520px) { .act-actions .btn { min-width: 100%; } }

/* ----- top-up: richer bluish look ----- */
.amount-card { position: relative; padding: 20px 16px; border: 1.5px solid var(--line-2); background: var(--card-grad); transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast); }
.amount-card:hover { border-color: var(--blue-300); box-shadow: var(--lift-1); transform: translateY(-2px); }
.amount-card.is-active { border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(46,99,246,.18), 0 16px 30px -18px rgba(20,55,165,.5); background: linear-gradient(180deg, #EAF1FF, #D8E6FF); }
.amount-card.is-active::after { content: ""; position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; border-radius: 50%; background: var(--blue-600) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.2 2.2 4.8-4.8' stroke='white' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; }
.amount-card .ac-amt { font-size: 24px; color: var(--blue-700); }
.amount-card .ac-bonus { display: inline-block; margin-top: 8px; padding: 3px 9px; border-radius: var(--r-pill); font-size: 11px; font-weight: 600; background: rgba(46,99,246,.12); color: var(--blue-700); }
.custom-amount input { background: var(--card-grad); border: 1.5px solid var(--line-2); }
.custom-amount input:focus { border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(46,99,246,.16); background: #fff; }

.method-card { padding: 16px; border: 1.5px solid var(--line-2); background: var(--card-grad); }
.method-card .method-ico { background: #fff; border: 1px solid var(--line); transition: background-color var(--t-fast), color var(--t-fast); }
.method-card:hover { border-color: var(--blue-300); box-shadow: var(--lift-1); }
.method-card.is-active { border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(46,99,246,.18); background: linear-gradient(180deg, #EAF1FF, #DCE8FF); }
.method-card.is-active .method-ico { background: linear-gradient(180deg, var(--blue-500), var(--blue-600)); color: #fff; border-color: transparent; }

/* deep-blue checkout panel */
.topup-side { background: linear-gradient(165deg, #2E63F6 0%, #163C9E 70%, #12318C 100%); color: #fff; border: 1px solid rgba(255,255,255,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 34px 64px -28px rgba(18,49,140,.7); overflow: hidden; }
.topup-side::before { content: ""; position: absolute; top: -40px; right: -40px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.18), transparent 70%); pointer-events: none; }
.topup-side .mono-label { color: rgba(255,255,255,.7); }
.topup-side .ts-bal { border-bottom-color: rgba(255,255,255,.2); }
.topup-side .ts-amt { color: #fff; }
.topup-side .ts-row { color: rgba(255,255,255,.85); }
.topup-side .ts-row .mono { color: #fff; }
.topup-side .ts-row[style] { border-top-color: rgba(255,255,255,.22) !important; }
.topup-side #payBtn { background: #fff; color: var(--blue-700); box-shadow: 0 14px 26px -14px rgba(0,0,0,.4); }
.topup-side #payBtn:hover { background: var(--ice-50); }
.topup-side .ts-note { color: rgba(255,255,255,.72); }
.topup-side .ts-amt .cur { color: rgba(255,255,255,.8); }

/* ==================================================================
   ACTIVATION — soft, clean, professional (smsbower layout in blue)
   ================================================================== */
.act-summary { background: var(--card-grad); border: 1px solid var(--line-2); color: var(--ink-2); box-shadow: var(--lift-1); }
.act-summary b { color: var(--blue-700); }
.act-summary .live-dot { background: var(--signal); }

.act-board { background: linear-gradient(180deg, #F0F5FF, #E2EBFF); border: 1px solid var(--line-2); box-shadow: 0 26px 54px -30px rgba(20,55,165,.3); }
.ab-cell { border-right-color: var(--line); }
.ab-label { color: var(--ink-3); }
.ab-value { color: var(--ink); }
.ab-value.amber { color: #C07A10; }
.ab-value.green { color: #0F8A60; }
.ab-svc .logo-tile { box-shadow: var(--lift-1); }
.ab-svc-name { color: var(--ink); font-weight: 700; }
.ab-svc-cell, .ab-num { min-width: 0; }
.ab-num { margin-top: 14px; gap: 10px; flex-wrap: nowrap; }
.ab-num .flag { width: 28px; height: 21px; flex: 0 0 28px; }
.ab-num .abn-text { color: var(--ink); font-size: 18px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
.ab-time .abt-num { color: var(--ink); font-size: 26px; font-weight: 600; }
.ab-act .btn-danger { background: linear-gradient(180deg, var(--blue-500), var(--blue-600)); color: #fff; border: none; font-weight: 600; letter-spacing: .02em; box-shadow: 0 12px 24px -12px rgba(20,55,165,.55); }
.ab-act .btn-danger:hover { filter: brightness(1.06); background: linear-gradient(180deg, var(--blue-500), var(--blue-600)); }
.ab-price { background: rgba(255,255,255,.6); border-top-color: var(--line); }
.ab-price .abp-v { color: var(--ink); }

.act-code { background: rgba(255,255,255,.6); border: 1px dashed var(--line-2); }
.act-code .spinner { border-color: var(--ice-200); border-top-color: var(--blue-600); }
.act-actions .btn { font-weight: 700; }

/* ---- activation page uses smsbower-style bold grotesque (scoped) ---- */
body[data-page="activation"] { font-family: "Hanken Grotesk", "Instrument Sans", system-ui, sans-serif; }
body[data-page="activation"] .ab-svc-name,
body[data-page="activation"] .ai-t,
body[data-page="activation"] .at-title { font-family: "Hanken Grotesk", sans-serif; }
.ph-title { font-family: "Hanken Grotesk", sans-serif !important; font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; font-size: clamp(28px, 4.6vw, 44px); line-height: 1.05; display: inline-flex; align-items: center; gap: 14px; color: var(--ink); }
.ph-title .ph-ico { color: var(--blue-600); display: inline-flex; }

/* phone/mail toggle */
.act-toggle { display: inline-flex; gap: 10px; margin: 20px 0 6px; }
.at-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border-radius: 14px; font-family: "Hanken Grotesk", sans-serif; font-weight: 700; font-size: 15px; color: var(--ink-2); background: #fff; border: 1px solid var(--line-2); transition: background-color var(--t-fast), color var(--t-fast); }
.at-toggle.is-active { background: var(--blue-600); color: #fff; border-color: transparent; box-shadow: 0 12px 24px -12px rgba(20,55,165,.55); }
.at-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #E5484D; color: #fff; font-size: 12px; font-weight: 700; }

/* filter tabs */
.act-filters { display: inline-flex; gap: 30px; margin: 18px 0 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; justify-content: center; max-width: 100%; }
.af-tab { position: relative; padding: 10px 0; font-family: "Hanken Grotesk", sans-serif; font-weight: 700; font-size: 15px; color: var(--ink-3); background: none; transition: color var(--t-fast); }
.af-tab:hover { color: var(--ink-2); }
.af-tab.is-active { color: var(--ink); }
.af-tab.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--blue-600); }

/* summary chip centered, uppercase like reference */
body[data-page="activation"] .act-summary { display: inline-flex; justify-content: center; margin: 4px auto 0; text-transform: uppercase; letter-spacing: .04em; font-size: 12.5px; }

/* empty filter state */
.act-filter-empty { padding: 40px; text-align: center; color: var(--ink-3); border: 1px dashed var(--line-2); border-radius: var(--r-card); background: rgba(255,255,255,.4); margin-top: 4px; }

@media (max-width: 520px) {
  .act-toggle { width: 100%; }
  .at-toggle { flex: 1; justify-content: center; padding: 11px 12px; }
  .act-filters { gap: 18px; }
  .af-tab { font-size: 13px; }
}

/* ==================================================================
   ACTIVATION v2 — "code on its way" dashboard
   ================================================================== */
body[data-page="activation"] { font-family: var(--font-ui); }
.a-wrap { max-width: 1120px; margin: 0 auto; padding: 4px var(--gutter) 60px; }
.a-eye { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.a-head { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 16px; padding-top: 28px; }
.a-head .crumbs { margin-bottom: 8px; }
.a-title { font-family: var(--font-display); font-size: clamp(30px, 5.2vw, 52px); line-height: .98; letter-spacing: -.02em; margin-top: 4px; color: var(--ink); }
.a-title em { font-style: italic; color: var(--blue-600); }
.a-sub { margin-top: 12px; max-width: 46ch; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
.a-statuspill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line); background: #fff; box-shadow: var(--lift-1); white-space: nowrap; }
.a-statuspill.green { border-color: rgba(15,138,96,.4); }
.a-pulse { position: relative; width: 7px; height: 7px; flex: 0 0 7px; }
.a-pulse::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--signal); opacity: .6; animation: aping 1.4s ease-out infinite; }
.a-pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--signal); }
.a-statuspill.green .a-pulse::before { animation: none; }
.a-statuspill.green .a-pulse::after { background: #23C285; }
@keyframes aping { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(2.6); opacity: 0; } }

.a-grid { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); gap: 18px; align-items: start; margin-top: 26px; }
.a-col { display: flex; flex-direction: column; gap: 16px; }
.a-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 20px 44px -28px rgba(20,55,165,.28); overflow: hidden; }
.a-pad { padding: 18px 20px; }
.a-ch { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.a-ch h2 { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.a-ch svg { color: var(--ink-2); }

/* number card */
.a-num-top { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 12px; }
.a-num-top .logo-tile { width: 40px; height: 40px; flex: 0 0 40px; }
.a-svc { font-size: 14px; font-weight: 600; margin-top: 3px; }
.a-ctimer { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px 5px 6px; border-radius: 999px; border: 1px solid var(--line); background: var(--ice-50); }
.a-ctimer svg { width: 28px; height: 28px; transform: rotate(-90deg); display: block; }
.a-ctimer .rbg { fill: none; stroke: var(--line-2); stroke-width: 3; }
.a-ctimer .rfg { fill: none; stroke: var(--blue-600); stroke-width: 3; stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.a-ctimer .t { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--ink); }
.a-numblock { margin-top: 18px; }
.a-numrow { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 10px; margin-top: 6px; }
.a-numrow .flag { width: 24px; height: 18px; }
.a-num { font-family: var(--font-mono); font-size: clamp(18px,4vw,24px); font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.a-foot { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 12px; border-top: 1px solid var(--line); background: var(--ice-50); padding: 12px 20px; }
.a-foot-l { display: flex; gap: 24px; }
.a-foot-l .mono { font-family: var(--font-mono); font-size: 13px; font-weight: 600; margin-top: 2px; color: var(--ink); }
.a-cancel { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: 999px; border: 1px solid #E2B7AE; background: #fff; color: #D8362A; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: background-color .14s; }
.a-cancel:hover { background: #FCEFEC; }

/* inbox */
.a-inbox-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; border-bottom: 1px solid var(--line); background: var(--ice-50); font-size: 12.5px; font-weight: 600; }
.a-inbox-head .l { display: inline-flex; align-items: center; gap: 8px; }
.a-inbox-row { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 14px 20px; }
.a-inbox-row .av { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--ice-100); flex: 0 0 30px; }
.spinner { width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid var(--ice-200); border-top-color: var(--blue-600); animation: spin .8s linear infinite; }
.a-inbox-row.in .av { background: linear-gradient(180deg,#2BC48A,#0F8A60); color: #fff; font-weight: 700; }
.a-inbox-row .code { font-family: var(--font-mono); font-size: 22px; font-weight: 600; letter-spacing: .1em; color: var(--ink); }
.a-inbox-row .ttl { font-size: 12.5px; font-weight: 500; color: var(--ink); }
.a-inbox-row .sub2 { font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }

/* progress */
.a-steps { position: relative; }
.a-steps::before { content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 1px; background: var(--line); }
.a-step { position: relative; display: grid; grid-template-columns: 20px minmax(0,1fr); gap: 12px; padding-bottom: 16px; }
.a-step:last-child { padding-bottom: 0; }
.a-step .nd { position: relative; z-index: 1; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; }
.a-step .nd .b { position: relative; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--line-2); background: #fff; display: flex; align-items: center; justify-content: center; color: #fff; }
.a-step.done .nd .b { background: #0F8A60; border-color: #0F8A60; }
.a-step.now .nd .b { background: var(--blue-600); border-color: var(--blue-600); }
.a-step.now .nd .b::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; background: rgba(46,99,246,.35); animation: aping 1.4s ease-out infinite; z-index: -1; }
.a-step .tt { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.a-step.pending .tt { color: var(--ink-3); font-weight: 500; }
.a-step .mt { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); margin-top: 2px; }

/* order details */
.a-od .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.a-od .row:last-child { border: none; }
.a-od .k { font-size: 12px; color: var(--ink-3); }
.a-od .v { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--ink); }
.a-od .v.tier { color: #0F8A60; }
.a-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 42px; width: 100%; border-radius: 11px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; border: none; text-decoration: none; }
.a-btn.primary { background: linear-gradient(180deg,#2E63F6,#1B49D8); color: #fff; box-shadow: 0 12px 24px -14px rgba(20,55,165,.6); }
.a-btn.ghost { background: #fff; border: 1px solid var(--line-2); color: var(--ink); }
.a-btn.ghost:hover { background: var(--ice-50); }

/* support */
.a-sup-head { padding: 10px 20px; border-bottom: 1px solid var(--line); background: var(--ice-50); font-size: 12.5px; font-weight: 600; }
.a-chan { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 13px 20px; cursor: pointer; text-decoration: none; color: inherit; transition: background-color .14s; border-bottom: 1px solid var(--line); }
.a-chan:last-child { border: none; }
.a-chan:hover { background: var(--ice-50); }
.a-chan .ic { width: 32px; height: 32px; border-radius: 9px; background: var(--ice-100); color: var(--ink-2); display: flex; align-items: center; justify-content: center; flex: 0 0 32px; transition: background-color .14s, color .14s; }
.a-chan:hover .ic { background: var(--blue-600); color: #fff; }
.a-chan .nm { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.a-chan .ds { font-size: 11.5px; color: var(--ink-3); }
.a-chan .mt { font-family: var(--font-mono); font-size: 10.5px; }
.a-chan .mt.on { color: #0F8A60; } .a-chan .mt.mut { color: var(--ink-2); }

/* faq */
.a-faq details { border-bottom: 1px solid var(--line); }
.a-faq details:last-child { border: none; }
.a-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12.5px; font-weight: 500; color: var(--ink); padding: 10px 0; }
.a-faq summary::-webkit-details-marker { display: none; }
.a-faq summary svg { color: var(--ink-3); transition: transform .15s; flex: 0 0 auto; }
.a-faq details[open] summary svg { transform: rotate(90deg); }
.a-faq p { font-size: 12px; line-height: 1.6; color: var(--ink-2); padding: 0 0 12px; }

.a-foot-note { margin-top: 28px; text-align: center; font-size: 11px; color: var(--ink-3); }

@media (max-width: 880px) {
  .a-grid { grid-template-columns: 1fr; }
  .a-head { grid-template-columns: 1fr; }
  .a-statuspill { justify-self: start; }
}

/* ==================================================================
   API DOCS — navy + icy developer reference
   ================================================================== */
.doc-hero { background: linear-gradient(160deg, #0E2456 0%, #0A1730 60%, #070F22 100%); color: #fff; border-bottom: 1px solid rgba(120,160,255,.18); }
.doc-hero-in { max-width: var(--container); margin: 0 auto; padding: 48px var(--gutter) 40px; }
.doc-hero .crumbs { color: rgba(255,255,255,.5); margin-bottom: 14px; }
.doc-hero .crumbs a { color: rgba(255,255,255,.72); }
.doc-hero h1 { font-family: var(--font-display); font-size: clamp(34px,5vw,52px); letter-spacing: -.03em; line-height: 1; }
.doc-hero p { margin-top: 14px; color: rgba(255,255,255,.72); max-width: 56ch; font-size: 15px; }
.doc-base { display: inline-flex; align-items: center; gap: 12px; margin-top: 22px; padding: 12px 16px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(120,160,255,.22); }
.doc-base .lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.doc-base code { font-family: var(--font-mono); font-size: 13px; color: #9DC0FF; }

.doc-layout { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 36px; max-width: var(--container); margin: 0 auto; padding: 36px var(--gutter) 80px; align-items: start; }
.doc-nav { position: sticky; top: 86px; display: flex; flex-direction: column; gap: 2px; }
.doc-nav .grp { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin: 16px 10px 6px; }
.doc-nav a { padding: 7px 10px; border-radius: 8px; font-size: 13.5px; color: var(--ink-2); transition: background-color var(--t-fast), color var(--t-fast); }
.doc-nav a:hover { background: rgba(255,255,255,.6); color: var(--ink); }
.doc-nav a.active { background: var(--blue-600); color: #fff; }

.doc-main { min-width: 0; }
.doc-sec { padding: 14px 0 36px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.doc-sec:last-child { border-bottom: none; }
.doc-sec h2 { font-family: var(--font-display); font-size: 30px; letter-spacing: -.02em; }
.doc-sec h2 .m { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .06em; padding: 3px 8px; border-radius: 6px; vertical-align: middle; margin-left: 10px; }
.m.get { background: rgba(15,138,96,.14); color: #0F8A60; } .m.post { background: rgba(46,99,246,.14); color: var(--blue-600); }
.doc-sec p { margin-top: 10px; color: var(--ink-2); font-size: 14.5px; line-height: 1.6; max-width: 70ch; }
.doc-sec .small { font-size: 13px; color: var(--ink-3); }

.param-table { width: 100%; margin: 18px 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.param-table th { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); text-align: left; padding: 10px 14px; background: var(--ice-50); border-bottom: 1px solid var(--line); }
.param-table td { padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 13.5px; vertical-align: top; }
.param-table tr:last-child td { border-bottom: none; }
.param-table .pn { font-family: var(--font-mono); color: var(--blue-700); font-weight: 500; }
.param-table .req { font-family: var(--font-mono); font-size: 10px; color: #B23B2A; }
.param-table .opt { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); }

/* code block */
.code-block { margin: 16px 0; border-radius: 12px; overflow: hidden; border: 1px solid #16264a; background: #0A1730; box-shadow: 0 20px 44px -28px rgba(8,20,60,.6); }
.cb-top { display: flex; align-items: center; justify-content: space-between; padding: 9px 14px; background: #0E1E3D; border-bottom: 1px solid #16264a; }
.cb-lang { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: #8FB4FF; text-transform: uppercase; }
.cb-copy { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 7px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: rgba(255,255,255,.8); font-size: 12px; font-weight: 500; cursor: pointer; transition: background-color var(--t-fast), border-color var(--t-fast); }
.cb-copy:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); }
.cb-copy.done { color: #7BE3B4; border-color: rgba(123,227,180,.4); }
.code-block pre { margin: 0; padding: 16px; overflow-x: auto; }
.code-block code { font-family: var(--font-mono); font-size: 12.5px; line-height: 1.75; color: #C7D6F5; white-space: pre; }
.code-block .k { color: #9DC0FF; } .code-block .s { color: #7BE3B4; } .code-block .c { color: #5E7299; } .code-block .n { color: #FFB24A; } .code-block .f { color: #E0A6FF; }

/* api key panel (account-gated) */
.key-panel { margin-top: 18px; border-radius: var(--r-card); border: 1px solid var(--line-2); background: linear-gradient(180deg,#F1F6FF,#E3EDFF); padding: 22px; }
.key-locked { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.key-locked .kl-row { display: flex; gap: 10px; width: 100%; max-width: 420px; }
.key-locked input { flex: 1; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 10px; font: inherit; font-size: 14px; background: #fff; }
.key-locked input:focus { outline: none; border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(46,99,246,.14); }
.key-hint { font-size: 12.5px; color: var(--ink-3); display: flex; align-items: center; gap: 8px; }
.key-open { display: none; }
.key-panel.unlocked .key-locked { display: none; }
.key-panel.unlocked .key-open { display: block; }
.key-row { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 12px; background: #0A1730; border: 1px solid #16264a; }
.key-row .kv { flex: 1; font-family: var(--font-mono); font-size: 14px; color: #9DC0FF; letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.key-row .kbtn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: rgba(255,255,255,.85); font-size: 12px; font-weight: 600; cursor: pointer; }
.key-row .kbtn:hover { background: rgba(255,255,255,.14); }
.key-actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.key-meta { margin-top: 14px; display: flex; gap: 22px; flex-wrap: wrap; }
.key-meta .km { font-size: 12.5px; color: var(--ink-2); } .key-meta .km b { font-family: var(--font-mono); color: var(--ink); }
.key-warn { margin-top: 12px; font-size: 12px; color: #B23B2A; display: flex; align-items: center; gap: 8px; }

@media (max-width: 900px) {
  .doc-layout { grid-template-columns: 1fr; }
  .doc-nav { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px; overflow-x: auto; padding-bottom: 6px; }
  .doc-nav .grp { display: none; }
}

/* ==================================================================
   AUTH — sign in / sign up (navy brand + icy form)
   ================================================================== */
body.auth { background: var(--ice-100); }
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; }
.auth-brand { position: relative; background: linear-gradient(160deg, #14305C 0%, #0A1B38 55%, #060F24 100%); color: #fff; padding: 48px 56px; display: flex; flex-direction: column; overflow: hidden; }
.auth-brand::before { content: ""; position: absolute; top: -80px; right: -60px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(46,99,246,.4), transparent 70%); }
.auth-brand::after { content: ""; position: absolute; bottom: -90px; left: -50px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(43,196,138,.14), transparent 70%); }
.auth-brand .ab-top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ab-cta { display: inline-flex; align-items: center; gap: 7px; padding: 9px 20px; border-radius: 999px; font-size: 14px; font-weight: 500; color: #fff; position: relative; overflow: hidden;
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 10px 24px -14px rgba(0,0,0,.6);
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast); }
.ab-cta::before { content: ""; position: absolute; left: 18%; right: 18%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(160,195,255,.9), transparent); opacity: 0; transition: opacity .4s; }
.ab-cta:hover { background: rgba(255,255,255,.17); border-color: rgba(255,255,255,.4); transform: translateY(-1px); }
.ab-cta:hover::before { opacity: 1; }
.auth-brand .brand { color: #fff; }
.auth-brand .brand-name { color: #fff; }
.auth-brand .ab-mid { position: relative; z-index: 1; margin-top: auto; }
.auth-brand h2 { font-family: var(--font-display); font-size: clamp(30px,3.4vw,46px); line-height: 1.04; letter-spacing: -.025em; }
.auth-brand h2 em { font-style: italic; color: #8FB4FF; }
.auth-brand .ab-sub { margin-top: 16px; color: rgba(255,255,255,.72); font-size: 15px; max-width: 42ch; }
.auth-brand .ab-pts { position: relative; z-index: 1; margin-top: 36px; display: flex; flex-direction: column; gap: 14px; }
.auth-brand .ab-pt { display: flex; align-items: center; gap: 12px; font-size: 14px; color: rgba(255,255,255,.85); }
.auth-brand .ab-pt .ic { display: inline-flex; width: 28px; height: 28px; border-radius: 8px; align-items: center; justify-content: center; background: rgba(255,255,255,.1); color: #7BE3B4; flex: 0 0 28px; }

.auth-form-side { display: flex; align-items: center; justify-content: center; padding: 40px 24px; background: radial-gradient(700px 420px at 70% 0%, #DCE8FF, transparent 60%), var(--ice-50); }
.auth-card { width: 100%; max-width: 408px; }
.auth-card h1 { font-family: var(--font-display); font-size: 34px; letter-spacing: -.02em; }
.auth-card .sub { margin-top: 8px; color: var(--ink-2); font-size: 14.5px; }
.auth-google { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: 24px; padding: 12px; border: 1px solid var(--line-2); border-radius: 12px; background: #fff; font: inherit; font-weight: 600; font-size: 14px; color: var(--ink); cursor: pointer; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.auth-google:hover { border-color: var(--blue-300); box-shadow: var(--lift-1); }
.auth-or { display: flex; align-items: center; gap: 14px; margin: 22px 0; color: var(--ink-3); font-size: 12px; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-field { margin-bottom: 14px; }
.auth-field label { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 7px; }
.auth-field .inp { position: relative; }
.auth-field input { width: 100%; padding: 13px 15px; border: 1px solid var(--line-2); border-radius: 11px; font: inherit; font-size: 15px; background: #fff; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.auth-field input:focus { outline: none; border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(46,99,246,.14); }
.auth-field .eye { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--ink-3); cursor: pointer; padding: 4px; }
.auth-row { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 18px; font-size: 13px; }
.auth-row label { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); cursor: pointer; }
.auth-row a { color: var(--blue-600); font-weight: 600; }
.cf-turnstile { margin: 14px 0 6px; }
.auth-submit { width: 100%; padding: 14px; border: none; border-radius: 12px; background: linear-gradient(180deg,#2E63F6,#1B49D8); color: #fff; font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; box-shadow: 0 14px 28px -14px rgba(20,55,165,.6); transition: filter var(--t-fast); }
.auth-submit:hover { filter: brightness(1.06); }
.auth-submit[disabled] { opacity: .6; cursor: default; }
.auth-switch { margin-top: 20px; text-align: center; font-size: 14px; color: var(--ink-2); }
.auth-switch a { color: var(--blue-600); font-weight: 600; }
.auth-err { display: none; margin-top: 14px; padding: 11px 14px; border-radius: 10px; background: rgba(216,54,42,.08); border: 1px solid rgba(216,54,42,.25); color: #B23B2A; font-size: 13px; }
.auth-err.show { display: block; }
.auth-terms { font-size: 12px; color: var(--ink-3); margin-top: 16px; text-align: center; }
.auth-terms a { color: var(--blue-600); }
@media (max-width: 860px) {
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-brand { padding: 28px 24px; }
  .auth-brand .ab-mid, .auth-brand .ab-pts { display: none; }
  .auth-brand .ab-top { display: flex; align-items: center; justify-content: space-between; }
}

/* ==================================================================
   Real Geist (self-hosted woff2, free OFL) + landing-page usage
   ================================================================== */
@font-face { font-family: "Geist"; src: url("../assets/fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../assets/fonts/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

body[data-page="home"] { font-family: "Geist", "Instrument Sans", system-ui, sans-serif; }
body[data-page="home"] .mono, body[data-page="home"] .mono-label { font-family: "Geist Mono", "IBM Plex Mono", monospace; }
body[data-page="home"] .hero-title { font-family: "Geist", sans-serif; font-weight: 700; letter-spacing: -0.035em; }
body[data-page="home"] .hero-title em { font-style: normal; color: var(--blue-600); }
body[data-page="home"] .brand-name { font-family: "Geist", sans-serif; }

/* ==================================================================
   LIQUID GLASS buttons (buy actions)
   ================================================================== */
.liquid { position: relative; isolation: isolate; border: none; overflow: hidden; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); transition: transform .25s cubic-bezier(.1,.4,.2,1), filter .25s; }
.liquid::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  box-shadow: 0 0 6px rgba(20,55,120,.04), 0 2px 6px rgba(20,55,120,.1),
    inset 2.5px 2.5px .5px -2.5px rgba(255,255,255,.95), inset -2.5px -2.5px .5px -2.5px rgba(255,255,255,.85),
    inset 1px 1px 1px -.5px rgba(255,255,255,.7), inset -1px -1px 1px -.5px rgba(255,255,255,.7),
    inset 0 0 6px 6px rgba(255,255,255,.14), inset 0 0 2px 2px rgba(255,255,255,.07), 0 0 12px rgba(255,255,255,.18); }
.liquid::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; -webkit-backdrop-filter: url("#numera-glass"); backdrop-filter: url("#numera-glass"); }
.liquid > * { position: relative; z-index: 2; }
.liquid:hover { transform: scale(1.04); filter: brightness(1.05); }
.liquid:active { transform: scale(.97); }

/* dark-blue glass buy pill (provider price buttons) */
.btn-buy.liquid { background: linear-gradient(180deg, rgba(33,76,182,.82), rgba(9,26,74,.86)); color: #EAF2FF; font-weight: 700; letter-spacing: .01em; text-shadow: 0 1px 2px rgba(0,0,0,.4); box-shadow: 0 8px 18px -10px rgba(8,22,70,.7); }
.btn-buy.liquid:hover { background: linear-gradient(180deg, rgba(44,92,212,.9), rgba(13,34,96,.9)); }
.btn-buy.liquid::before { box-shadow: inset 2px 2px .5px -2px rgba(255,255,255,.6), inset -2px -2px .5px -2px rgba(255,255,255,.4), inset 0 0 6px 5px rgba(255,255,255,.08), 0 0 10px rgba(120,160,255,.25); }

/* big dark-blue liquid CTA (Buy number / Buy another / Top up) */
.btn.liquid, .a-btn.liquid { background: linear-gradient(180deg, rgba(33,76,182,.85), rgba(9,26,74,.9)); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.4); box-shadow: 0 16px 30px -14px rgba(8,22,70,.7); }
.btn.liquid:hover, .a-btn.liquid:hover { background: linear-gradient(180deg, rgba(44,92,212,.92), rgba(13,34,96,.95)); }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .btn-buy.liquid { background: linear-gradient(180deg, #1B49D8, #0A1A33); color: #fff; }
}

/* step-block (Select service / steps) — a touch darker & bluer */
.step-block.glass { background: linear-gradient(180deg, rgba(213,227,251,.72), rgba(197,215,247,.66)); border-color: rgba(150,178,230,.6); }
.step-num { background: linear-gradient(180deg, var(--blue-500), var(--blue-700)); color: #fff; border-color: transparent; }

/* Fey-style "normal" buttons (outline / ghost) — radial fill + crisp inset edge */
.btn-outline, .btn-ghost {
  border: none;
  background: radial-gradient(61% 50% at 49% 50%, #ffffff 0%, rgba(20,40,90,.035) 100%);
  color: var(--ink);
  box-shadow: inset 0 0 0 .7px var(--line-2), inset 1px 1px 0 -.5px rgba(255,255,255,.95), inset -1px -1px 0 -.5px var(--line-2);
  transition: background-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.btn-outline:hover, .btn-ghost:hover {
  background: radial-gradient(61% 50% at 49% 50%, #ffffff 0%, #EAF1FE 100%);
  color: var(--ink);
  box-shadow: inset 0 0 0 .7px var(--blue-300), inset 1px 1px 0 -.5px rgba(255,255,255,.95), inset -1px -1px 0 -.5px var(--blue-300), 0 0 4px rgba(46,99,246,.35);
}

/* ==================================================================
   Brand mark — scalloped flower + rotating diamond (SecureSMS)
   ================================================================== */
.sx-mark { filter: drop-shadow(0 3px 6px rgba(12,40,120,.28)); overflow: visible; }
.sx-diamond { transform-box: fill-box; transform-origin: 50% 50%; animation: sxspin 9s linear infinite; }
@keyframes sxspin { to { transform: rotate(360deg); } }
/* a touch larger on the big hero/auth brand if used there */
.auth-brand .sx-mark { width: 30px; height: 30px; }

/* ==================================================================
   Stats bar → distinct liquid-glass panel (+ mobile fix)
   ================================================================== */
.stats { background: transparent; border: none; padding: 12px 0; }
.stats-row {
  border-radius: var(--r-panel);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), var(--glass-shadow);
  padding: 20px 30px;
  gap: 18px 28px;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .stats-row { background: rgba(255,255,255,.9); } }
@media (max-width: 768px) {
  .stats-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; padding: 18px 18px; }
  .stat { font-size: 12.5px; }
  .stat b { font-size: 16px; }
}
@media (max-width: 380px) { .stats-row { grid-template-columns: 1fr; } }

/* service chips — a touch darker so they stand out from the background */
.svc-chip { background: linear-gradient(180deg, #EAF1FF, #D4E2FA); border: 1px solid #BACFEF; box-shadow: 0 6px 14px -10px rgba(20,55,165,.28); }
.svc-chip:hover { background: linear-gradient(180deg, #EFF4FF, #DCE8FE); border-color: var(--blue-300); }

/* ==================================================================
   Cursor-follow glow on the big step panels (Select service / country)
   — light rides the BORDER and bleeds outward, plus a neon top line.
   ================================================================== */
.step-block, .shine { position: relative; overflow: visible; }
.step-block > *, .shine > * { position: relative; z-index: 2; }

/* spotlight border: a 1.6px ring lit where the cursor is, glowing outward */
.step-block::after, .shine::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; z-index: 1; pointer-events: none;
  padding: 2px;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%),
              rgba(130,175,255,1), rgba(96,150,255,.5) 38%, rgba(96,150,255,0) 68%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .3s ease;
}
.step-block:hover::after, .shine:hover::after { opacity: 1; }

/* neon line across the top edge (the "first" effect) + soft outward bloom */
.step-block::before, .shine::before {
  content: ""; position: absolute; left: 12%; right: 12%; top: -1px; height: 2px; z-index: 1; pointer-events: none;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--blue-400, #5e93ff), transparent);
  box-shadow: 0 0 16px rgba(80,140,255,.9), 0 0 34px rgba(80,140,255,.5);
  opacity: 0; transition: opacity .45s ease;
}
.step-block:hover::before, .shine:hover::before { opacity: 1; }
.step-block:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 18px 40px -20px rgba(20,55,165,.4), 0 0 34px -10px rgba(70,130,255,.45); }
/* cards get the same glow PLUS an obvious lift so the hover reads clearly */
.shine { transition: transform .22s ease, box-shadow .22s ease; }
.shine:hover { transform: translateY(-4px); box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 22px 46px -22px rgba(20,55,165,.5), 0 0 42px -8px rgba(80,140,255,.6); }
@media (prefers-reduced-motion: reduce) { .step-block::after, .step-block::before, .shine::after, .shine::before { display: none; } .shine:hover { transform: none; } }

/* ==================================================================
   Auth gate popup (sign in before top-up / buying)
   ================================================================== */
.gate-overlay { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(8,18,41,.45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: gatefade .2s ease-out; }
.gate-overlay[hidden] { display: none; }
@keyframes gatefade { from { opacity: 0; } to { opacity: 1; } }
.gate-card { position: relative; width: 100%; max-width: 384px; background: linear-gradient(180deg,#F4F8FF,#E5EEFF); border: 1px solid var(--line-2); border-radius: var(--r-panel); box-shadow: 0 44px 84px -30px rgba(8,20,60,.62); padding: 32px 26px 26px; text-align: center; animation: gatepop .26s cubic-bezier(.2,.7,.2,1); }
@keyframes gatepop { from { transform: translateY(14px) scale(.95); opacity: .5; } to { transform: none; opacity: 1; } }
.gate-x { position: absolute; top: 12px; right: 14px; width: 30px; height: 30px; border-radius: 8px; font-size: 20px; line-height: 1; color: var(--ink-3); }
.gate-x:hover { background: rgba(20,55,165,.08); color: var(--ink); }
.gate-ico { width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 16px; background: linear-gradient(180deg, var(--blue-500), var(--blue-700)); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 16px 30px -14px rgba(20,55,165,.6); }
.gate-card h3 { font-family: var(--font-display); font-size: 25px; letter-spacing: -.02em; color: var(--ink); }
.gate-card p { margin: 8px 0 22px; color: var(--ink-2); font-size: 14px; line-height: 1.55; }
.gate-card .btn { margin-bottom: 10px; }
.gate-card .btn:last-child { margin-bottom: 0; }

/* ==================================================================
   About page
   ================================================================== */
.about-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 30px; }
.ab-stat { border-radius: var(--r-panel); padding: 22px 20px; text-align: center; }
.abs-num { display: block; font-size: 30px; font-weight: 600; color: var(--blue-700); letter-spacing: -.02em; }
.abs-lbl { display: block; margin-top: 4px; font-size: 13px; color: var(--ink-2); }
.about-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 30px; }
.about-card { border-radius: var(--r-panel); padding: 28px; }
.about-card h2 { font-family: var(--font-display); font-size: 24px; letter-spacing: -.02em; margin-bottom: 12px; color: var(--ink); }
.about-card p { color: var(--ink-2); line-height: 1.65; margin-bottom: 12px; }
.about-list { list-style: none; }
.about-list li { display: flex; gap: 10px; padding: 8px 0; color: var(--ink-2); line-height: 1.5; }
.al-ic { color: var(--blue-600); font-weight: 700; }
.about-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 30px; }
.av-item { border-radius: var(--r-panel); padding: 24px; }
.av-ico { width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(180deg, var(--blue-500), var(--blue-700)); box-shadow: 0 12px 24px -12px rgba(20,55,165,.6); margin-bottom: 14px; }
.av-item h3 { font-size: 17px; margin-bottom: 6px; color: var(--ink); }
.av-item p { font-size: 14px; color: var(--ink-2); line-height: 1.55; }
.about-contact { border-radius: var(--r-panel); padding: 30px; display: grid; grid-template-columns: 1fr 1.1fr; gap: 28px; align-items: center; scroll-margin-top: 90px; }
.about-contact h2 { font-family: var(--font-display); font-size: 26px; letter-spacing: -.02em; margin: 6px 0 8px; color: var(--ink); }
.about-contact > div > p { color: var(--ink-2); line-height: 1.6; }
.ac-links { display: flex; flex-direction: column; gap: 10px; }
.ac-link { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.55); border: 1px solid var(--line); transition: transform var(--t-fast), box-shadow var(--t-fast); }
.ac-link:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -16px rgba(20,55,165,.4); }
.acl-ic { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; color: var(--blue-700); background: var(--ice-100, #D4E2FA); }
.ac-link strong { display: block; font-size: 15px; color: var(--ink); }
.acl-sub { display: block; font-size: 13px; color: var(--ink-3); font-family: var(--font-mono); }

/* ==================================================================
   Referral page
   ================================================================== */
.ref-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 22px; align-items: start; }
.ref-linkbox .mono-label { display: block; margin-bottom: 12px; }
.ref-link-row { display: flex; gap: 10px; }
#refLink { flex: 1; min-width: 0; padding: 13px 15px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(255,255,255,.7); font-size: 14px; color: var(--ink); }
#refCopy { white-space: nowrap; }
.ref-hint { margin-top: 12px; font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.ref-share { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.ref-sbtn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 10px; font-size: 13px; font-weight: 500; color: var(--blue-700); background: rgba(255,255,255,.6); border: 1px solid var(--line); transition: all var(--t-fast); }
.ref-sbtn:hover { background: #fff; transform: translateY(-1px); box-shadow: 0 10px 20px -14px rgba(20,55,165,.5); }
.ref-steps { list-style: none; margin-top: 14px; }
.ref-steps li { display: flex; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); }
.ref-steps li:first-child { border-top: none; }
.rs-n { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: 600; color: #fff; background: linear-gradient(180deg, var(--blue-500), var(--blue-700)); }
.ref-steps strong { display: block; color: var(--ink); margin-bottom: 2px; }
.ref-steps p { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.ref-side { border-radius: var(--r-panel); padding: 24px; }
.ref-side .mono-label { display: block; margin-bottom: 8px; }
.ref-earn { font-size: 38px; font-weight: 600; color: var(--blue-700); letter-spacing: -.02em; }
.ref-stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0; }
.ref-stat { background: rgba(255,255,255,.5); border: 1px solid var(--line); border-radius: 12px; padding: 14px; text-align: center; }
.rst-num { display: block; font-size: 20px; font-weight: 600; color: var(--ink); }
.rst-lbl { display: block; font-size: 12px; color: var(--ink-3); margin-top: 3px; }
.ref-rate { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.ref-rate .mono { color: var(--ink); font-weight: 500; }
.ref-terms { display: block; margin-top: 24px; text-align: center; text-transform: none; letter-spacing: 0; color: var(--ink-3); line-height: 1.5; }

/* ==================================================================
   Legal page
   ================================================================== */
.legal-layout { display: grid; grid-template-columns: 230px 1fr; gap: 26px; align-items: start; }
.legal-nav { position: sticky; top: 88px; border-radius: var(--r-panel); padding: 14px; display: flex; flex-direction: column; gap: 2px; }
.ln-link { padding: 10px 13px; border-radius: 10px; font-size: 14px; color: var(--ink-2); transition: all var(--t-fast); }
.ln-link:hover { background: rgba(255,255,255,.55); color: var(--ink); }
.ln-link.is-active { background: linear-gradient(180deg, var(--blue-500), var(--blue-700)); color: #fff; box-shadow: 0 10px 20px -12px rgba(20,55,165,.6); }
.legal-body { display: flex; flex-direction: column; gap: 20px; }
.legal-sec { border-radius: var(--r-panel); padding: 30px 32px; scroll-margin-top: 86px; }
.legal-sec .mono-label { color: var(--blue-600); }
.legal-sec h2 { font-family: var(--font-display); font-size: 27px; letter-spacing: -.02em; margin: 6px 0 14px; color: var(--ink); }
.legal-sec h3 { font-size: 16px; margin: 20px 0 8px; color: var(--ink); }
.legal-sec p { color: var(--ink-2); line-height: 1.7; margin-bottom: 12px; }
.legal-sec ul { list-style: none; margin: 4px 0 12px; }
.legal-sec li { position: relative; padding: 6px 0 6px 20px; color: var(--ink-2); line-height: 1.6; }
.legal-sec li::before { content: ""; position: absolute; left: 4px; top: 14px; width: 6px; height: 6px; border-radius: 50%; background: var(--blue-500); }
.legal-sec a { color: var(--blue-600); }
.legal-sec a:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .about-stats { grid-template-columns: 1fr 1fr; }
  .about-cols, .about-values { grid-template-columns: 1fr; }
  .about-contact { grid-template-columns: 1fr; }
  .ref-grid { grid-template-columns: 1fr; }
  .legal-layout { grid-template-columns: 1fr; }
  .legal-nav { position: static; flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 460px) {
  .about-stats { grid-template-columns: 1fr 1fr; }
  .ref-link-row { flex-direction: column; }
  #refCopy { width: 100%; }
}

/* ==================================================================
   Two-factor authentication card (account → settings)
   ================================================================== */
.tfa-head { display: flex; align-items: flex-start; gap: 14px; }
.tfa-ico { flex: 0 0 42px; width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(180deg, var(--blue-500), var(--blue-700)); box-shadow: 0 12px 24px -12px rgba(20,55,165,.6); }
.tfa-meta { flex: 1; min-width: 0; }
.tfa-meta h2 { font-size: 18px; color: var(--ink); }
.tfa-meta p { font-size: 13.5px; color: var(--ink-2); margin-top: 3px; line-height: 1.5; }
.tfa-status { flex: 0 0 auto; align-self: center; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; }
.tfa-status.off { color: #8A6A1E; background: #FBEFD0; border: 1px solid #F0DBA0; }
.tfa-status.on { color: #166A43; background: #D6F3E3; border: 1px solid #A7E0C4; }
.tfa-actions { display: flex; gap: 10px; margin-top: 18px; }
.tfa-setup, .tfa-disable { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.tfa-steps { list-style: none; margin-bottom: 14px; }
.tfa-steps li { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.tfa-steps strong { color: var(--blue-700); }
.tfa-qr-wrap { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.tfa-qr { width: 184px; height: 184px; flex: 0 0 184px; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--line-2); border-radius: 14px; padding: 8px; box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 8px 18px -12px rgba(20,55,165,.3); }
.tfa-qr img, .tfa-qr canvas { display: block; border-radius: 6px; }
.tfa-qr-fallback { font-size: 12px; color: var(--ink-3); text-align: center; padding: 0 10px; }
.tfa-key-block { flex: 1; min-width: 200px; }
.tfa-key-block .mono-label { display: block; margin-bottom: 8px; }
.tfa-key-row { display: flex; gap: 8px; align-items: center; }
.tfa-key { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 10px; background: var(--ice-100, #D4E2FA); border: 1px solid var(--line-2); font-size: 14px; letter-spacing: .08em; color: var(--ink); word-break: break-all; }
.tfa-key-note { display: block; margin-top: 8px; font-size: 12px; color: var(--ink-3); font-family: var(--font-mono); }
.tfa-verify { margin-top: 18px; }
.tfa-verify .mono-label { display: block; margin-bottom: 8px; }
.tfa-verify-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tfa-verify-row input, .tfa-disable input { width: 130px; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--line-2); background: rgba(255,255,255,.7); font-size: 16px; letter-spacing: .22em; text-align: center; color: var(--ink); }
.tfa-msg { margin-top: 14px; font-size: 13px; min-height: 18px; }
.tfa-msg.ok { color: #166A43; }
.tfa-msg.warn { color: #B4452B; }
.auth-2fa input { letter-spacing: .22em; text-align: center; }
@media (max-width: 460px) { .tfa-qr-wrap { flex-direction: column; align-items: stretch; } .tfa-qr { margin: 0 auto; } }

/* ==================================================================
   Signup — live validation (email / password reqs / confirm match)
   ================================================================== */
.field-hint { display: none; margin-top: 6px; font-size: 12.5px; line-height: 1.4; }
.field-hint.show { display: block; }
.field-hint.bad { color: #C0392B; }
.field-hint.ok { color: #15824B; }
/* red/green ring on the input wrapper */
.auth-field .inp.is-bad { border-color: #E0A39A !important; box-shadow: 0 0 0 3px rgba(192,57,43,.12) !important; }
.auth-field .inp.is-ok { border-color: #9FD8BB !important; box-shadow: 0 0 0 3px rgba(21,130,75,.12) !important; }
/* password requirements checklist */
.pw-reqs { list-style: none; margin: 10px 0 2px; display: grid; gap: 6px; }
.pw-reqs li { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--ink-3); transition: color .2s; }
.pw-reqs .rq-dot { flex: 0 0 16px; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #C4CFE6; background: transparent; position: relative; transition: all .2s; }
.pw-reqs li.met { color: #15824B; }
.pw-reqs li.met .rq-dot { background: #1FA463; border-color: #1FA463; }
.pw-reqs li.met .rq-dot::after { content: ""; position: absolute; left: 4.5px; top: 1.5px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* ==================================================================
   Admin panel
   ================================================================== */
.adminpage::before { display: none !important; }
.adminpage { background: #0A1430 url("../assets/admin-bg.png") center center / cover fixed no-repeat; }
.adm-gate { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 20px; background: #0A1430 url("../assets/admin-bg.png") center center / cover no-repeat; }
.adm-gate-card { width: 100%; max-width: 360px; text-align: center; background: #fff; border-radius: 20px; padding: 32px 26px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); }
.adm-gate-ico { width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 15px; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(180deg, var(--blue-500), var(--blue-700)); }
.adm-gate-card h2 { font-family: var(--font-display); font-size: 23px; color: var(--ink); }
.adm-gate-card p { color: var(--ink-2); font-size: 14px; margin: 8px 0 18px; }
.adm-gate-card .btn { margin-bottom: 10px; }
.adm-gate-hint { margin-top: 14px; font-size: 12px; color: var(--ink-3); line-height: 1.5; }
.adm-gate-hint b { color: var(--blue-700); font-family: var(--font-mono); }

.adm-shell { display: grid; grid-template-columns: 244px 1fr; min-height: 100vh; background: transparent; }
.adm-side { background: linear-gradient(170deg, #14305C, #0A1B38); color: #fff; padding: 22px 16px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.adm-brand { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 700; font-size: 18px; padding: 4px 8px 22px; }
.adm-mark { color: #8FB4FF; font-size: 20px; }
.adm-brand small { display: block; font-size: 11px; font-weight: 500; color: rgba(255,255,255,.5); letter-spacing: .14em; text-transform: uppercase; }
.adm-nav { display: flex; flex-direction: column; gap: 3px; }
.adm-tab { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: 11px; color: rgba(255,255,255,.74); font-size: 14.5px; font-weight: 500; text-align: left; transition: all .15s; }
.adm-tab:hover { background: rgba(255,255,255,.08); color: #fff; }
.adm-tab.is-active { background: rgba(120,160,255,.22); color: #fff; box-shadow: inset 0 0 0 1px rgba(150,180,255,.3); }
.adm-i { width: 18px; text-align: center; opacity: .85; }
.adm-side-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-direction: column; gap: 8px; }
.adm-who { font-size: 12px; color: rgba(255,255,255,.6); word-break: break-all; }
.adm-back { font-size: 13px; color: rgba(255,255,255,.72); text-align: left; }
.adm-back:hover { color: #fff; }

.adm-main { padding: 30px 34px; overflow-x: hidden; }
.adm-sec { display: none; animation: admfade .25s ease; }
.adm-sec.is-active { display: block; }
@keyframes admfade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.adm-main h1 { font-family: var(--font-display); font-size: 30px; letter-spacing: -.02em; color: #fff; margin-bottom: 18px; text-shadow: 0 2px 10px rgba(0,0,0,.4); }
.adm-sub { color: rgba(235,242,255,.82); margin: -8px 0 18px; font-size: 14px; }
/* text sitting directly on the image (outside white cards) → light */
.adm-toolbar .adm-muted, #userCount, #orderCount { color: rgba(225,235,255,.8); }
.adm-sidebar-side .adm-who { color: rgba(255,255,255,.6); }
.adm-muted { color: var(--ink-3); font-size: 13.5px; }

.adm-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 22px; }
.adm-card { background: #fff; border: 1px solid var(--line); border-radius: 15px; padding: 16px 18px; box-shadow: 0 10px 24px -20px rgba(20,55,165,.5); }
.adm-card.accent { background: linear-gradient(165deg, #1B49D8, #1437A5); border-color: transparent; }
.adm-card.accent .ac-k, .adm-card.accent .ac-v { color: #fff; }
.ac-k { display: block; font-size: 12px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.ac-v { display: block; font-size: 26px; font-weight: 700; color: var(--ink); margin-top: 4px; }

.adm-panel { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; margin-bottom: 18px; box-shadow: 0 10px 24px -22px rgba(20,55,165,.5); }
.adm-panel h3 { font-size: 16px; color: var(--ink); margin-bottom: 12px; }
.adm-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.adm-toolbar { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.adm-input { padding: 9px 13px; border-radius: 10px; border: 1px solid var(--line-2); background: #fff; font-size: 14px; color: var(--ink); }
.adm-input.tiny { width: 92px; padding: 6px 9px; font-size: 13px; }
.adm-input.narrow { width: 92px; }
#userSearch, #orderFilter { min-width: 240px; }
.adm-inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.adm-pct { color: var(--ink-2); font-weight: 600; }
.adm-example { margin-top: 12px; font-size: 13.5px; color: var(--ink-2); }

.adm-tablewrap { overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.adm-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.adm-table th { text-align: left; padding: 12px 14px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); border-bottom: 1px solid var(--line); background: #F7FAFF; white-space: nowrap; }
.adm-table td { padding: 11px 14px; border-bottom: 1px solid var(--line); color: var(--ink); vertical-align: middle; }
.adm-table tr:last-child td { border-bottom: none; }
.adm-table .num { text-align: right; }
.adm-baladj { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.adm-ordact { display: flex; gap: 5px; white-space: nowrap; }

.adm-badge { display: inline-block; font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em; }
.adm-badge.s-waiting { background: #FBEFD0; color: #8A6A1E; }
.adm-badge.s-ok { background: #D6F3E3; color: #166A43; }
.adm-badge.s-canceled { background: #F0E2E0; color: #8A3A2B; }
.adm-badge.s-refunded { background: #E0E8FB; color: #2A47A8; }
.adm-badge.s-admin { background: #1B49D8; color: #fff; }
.adm-badge.s-2fa { background: #D6F3E3; color: #166A43; }

.adm-feed { display: flex; flex-direction: column; }
.adm-feed-row { display: grid; grid-template-columns: 1.2fr 2fr 1.4fr .8fr auto; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.adm-feed-row:first-child { border-top: none; }
.afr-svc { font-weight: 600; color: var(--ink); }
.afr-cost { text-align: right; color: var(--blue-700); font-weight: 600; }

.adm-mk-grid { display: flex; flex-direction: column; gap: 8px; }
.adm-mk-row { display: grid; grid-template-columns: 1.4fr .6fr 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; background: #F7FAFF; border: 1px solid var(--line); border-radius: 11px; }
.adm-mk-pct { font-weight: 700; color: var(--blue-700); }

/* bar rows (traffic) */
.adm-bar-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.abr-label { flex: 0 0 116px; font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.abr-track { flex: 1; height: 9px; background: #E6EDFA; border-radius: 6px; overflow: hidden; }
.abr-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--blue-500), var(--blue-700)); border-radius: 6px; }
.abr-val { flex: 0 0 auto; font-size: 12.5px; color: var(--ink-2); min-width: 56px; text-align: right; }
.adm-flag { width: 20px; height: 15px; border-radius: 3px; object-fit: cover; flex: 0 0 20px; }
.adm-flag-x { display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }

.adm-daychart { display: flex; align-items: flex-end; gap: 3px; height: 120px; padding-top: 8px; }
.adm-daybar { flex: 1; min-width: 3px; background: linear-gradient(180deg, var(--blue-500), var(--blue-700)); border-radius: 3px 3px 0 0; transition: opacity .15s; }
.adm-daybar:hover { opacity: .7; }
.adm-day-axis { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; color: var(--ink-3); }

.adm-toast { position: fixed; bottom: 22px; left: 50%; transform: translate(-50%, 20px); background: #0A1B38; color: #fff; padding: 11px 20px; border-radius: 12px; font-size: 13.5px; font-weight: 500; box-shadow: 0 18px 40px -16px rgba(0,0,0,.6); opacity: 0; transition: all .25s; z-index: 100; }
.adm-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* registration toggle */
.adm-reg { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.adm-toggle { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 8px; border-radius: 999px; background: #E2E8F4; border: 1px solid var(--line-2); transition: all .2s; }
.adm-toggle-dot { width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.18); transition: transform .2s; }
.adm-toggle.on { background: #D6F3E3; border-color: #A7E0C4; }
.adm-toggle.on .adm-toggle-dot { transform: translateX(2px); background: #1FA463; box-shadow: 0 2px 6px rgba(31,164,99,.5); }
.adm-toggle-label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.adm-toggle.on .adm-toggle-label { color: #166A43; }

/* signup-closed state */
.signup-closed { text-align: center; padding: 8px 0; }
.signup-closed .sc-ico { font-size: 34px; margin-bottom: 8px; }
.signup-closed h3 { font-family: var(--font-display); font-size: 24px; color: var(--ink); margin-bottom: 6px; }
.signup-closed p { color: var(--ink-2); font-size: 14px; margin-bottom: 18px; }
.signup-closed .btn { margin-bottom: 10px; }

@media (max-width: 860px) {
  .adm-shell { grid-template-columns: 1fr; }
  .adm-side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
  .adm-nav { flex-direction: row; flex-wrap: wrap; }
  .adm-side-foot { margin: 0 0 0 auto; border: none; padding: 0; flex-direction: row; align-items: center; }
  .adm-grid2 { grid-template-columns: 1fr; }
  .adm-feed-row { grid-template-columns: 1fr 1fr; }
}

/* ==================================================================
   ADMIN PANEL — full redesign (deep navy → ice → white, glass + metal)
   Loaded last so every rule overrides the older admin block above.
   ================================================================== */
:root {
  --adm-ink: #0B1430;
  --adm-blue-50:  #EEF4FF;
  --adm-blue-100: #DFEAFF;
  --adm-blue-200: #BFD2FF;
  --adm-blue-400: #5E93FF;
  --adm-blue-500: #2B66E8;
  --adm-blue-600: #1B49D8;
  --adm-blue-700: #1437A5;
  --adm-blue-900: #0B1E4A;
  --adm-line:   rgba(150,178,230,.35);
  --adm-line-2: rgba(255,255,255,.10);
  --adm-glass-light: linear-gradient(180deg, rgba(255,255,255,.92), rgba(238,244,255,.78));
  --adm-glass-dark:  linear-gradient(180deg, rgba(20,38,82,.55), rgba(11,30,74,.65));
  --adm-fancy-shadow: 0 24px 60px -28px rgba(7,16,40,.7), 0 6px 16px -10px rgba(20,55,165,.4);
  --adm-ease: cubic-bezier(.2, .8, .2, 1);
}

/* page bg already set above; lift typography on dark */
.adminpage { color: var(--adm-ink); }
.adminpage::after {
  /* soft vignette so the wave image feels framed */
  content: ""; position: fixed; inset: 0; z-index: -1;
  background: radial-gradient(circle at 30% 0%, rgba(91,150,255,.18), transparent 55%),
              radial-gradient(circle at 90% 100%, rgba(31,73,216,.16), transparent 55%);
  pointer-events: none;
}

/* shell */
.adm-shell { display: grid; grid-template-columns: 252px 1fr; min-height: 100vh; background: transparent; }

/* ---------- SIDEBAR ---------- */
.adm-side {
  position: sticky; top: 0; height: 100vh;
  padding: 22px 14px 18px;
  display: flex; flex-direction: column; gap: 4px;
  background:
    linear-gradient(180deg, rgba(10,20,48,.62), rgba(7,14,36,.78)),
    radial-gradient(120% 80% at 0% 0%, rgba(90,140,255,.22), transparent 60%);
  border-right: 1px solid var(--adm-line-2);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
          backdrop-filter: blur(22px) saturate(140%);
  box-shadow: inset -1px 0 0 rgba(255,255,255,.04);
  color: #fff;
}
.adm-brand {
  display: flex; align-items: center; gap: 11px;
  padding: 6px 10px 18px; color: #fff; font-weight: 700; font-size: 18px;
  letter-spacing: -.01em;
}
.adm-brand small {
  display: block; font-family: "Geist Mono","IBM Plex Mono",monospace;
  font-size: 10.5px; font-weight: 500; letter-spacing: .16em;
  color: rgba(180,205,255,.6); text-transform: uppercase; margin-top: 2px;
}
.adm-mark {
  width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px; line-height: 1; flex: 0 0 30px;
  background: linear-gradient(135deg, #4C8DFF, #1B49D8);
  color: #fff; border-radius: 9px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.15), 0 8px 16px -6px rgba(31,73,216,.7), inset 0 1px 0 rgba(255,255,255,.35);
}

.adm-nav { display: flex; flex-direction: column; gap: 4px; padding-top: 6px; }
.adm-tab {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-radius: 12px;
  color: rgba(220,232,255,.75);
  font-size: 14px; font-weight: 500; text-align: left;
  background: transparent;
  transition: background .2s var(--adm-ease), color .2s, transform .2s var(--adm-ease);
}
.adm-tab:hover { background: rgba(255,255,255,.06); color: #fff; transform: translateX(2px); }
.adm-tab.is-active {
  color: #fff;
  background: linear-gradient(180deg, rgba(80,130,255,.32), rgba(40,80,200,.22));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 0 0 1px rgba(150,190,255,.25),
    0 10px 22px -14px rgba(40,90,220,.7);
}
.adm-tab.is-active::before {
  content: ""; position: absolute; left: 4px; top: 18%; bottom: 18%; width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, #8AB3FF, #2B66E8);
  box-shadow: 0 0 10px rgba(120,170,255,.6);
}

/* dark icy cursor-shine on the sidebar tabs (border-glow + neon line, cyan) */
.adm-tab { position: relative; overflow: visible; }
.adm-tab > * { position: relative; z-index: 2; }
.adm-tab::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; z-index: 1; pointer-events: none;
  padding: 1.6px;
  background: radial-gradient(180px circle at var(--mx, 50%) var(--my, 50%),
              rgba(140,210,255,1), rgba(90,170,255,.45) 40%, rgba(90,170,255,0) 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .3s ease;
}
.adm-tab:hover::after, .adm-tab.is-active::after { opacity: 1; }
/* dim icy neon top-line + outward bloom on hover */
.adm-tab > .adm-tab-edge { display: none; }
.adm-tab:hover { box-shadow: 0 0 0 1px rgba(140,210,255,.25), 0 0 24px -8px rgba(120,180,255,.55), inset 0 1px 0 rgba(255,255,255,.08); }
.adm-tab.is-active {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 0 0 1px rgba(150,200,255,.35),
    0 0 28px -6px rgba(120,180,255,.6),
    0 10px 22px -14px rgba(40,90,220,.7);
}
.adm-i { width: 18px; text-align: center; font-size: 14px; opacity: .9; }

.adm-side-foot {
  margin-top: auto; display: flex; flex-direction: column; gap: 8px;
  padding-top: 16px; border-top: 1px solid rgba(255,255,255,.08);
}
.adm-who { font-size: 11.5px; color: rgba(180,205,255,.6); font-family: "Geist Mono","IBM Plex Mono",monospace; word-break: break-all; }
.adm-back { padding: 8px 10px; border-radius: 9px; font-size: 13px; color: rgba(220,232,255,.75); text-align: left; transition: all .15s; }
.adm-back:hover { background: rgba(255,255,255,.06); color: #fff; }

/* ---------- MAIN ---------- */
.adm-main { padding: 32px 36px 60px; overflow-x: hidden; }
.adm-main h1 {
  font-family: var(--font-display);
  font-size: 32px; letter-spacing: -.02em; line-height: 1.1;
  margin-bottom: 20px;
  color: #fff;
  background: linear-gradient(180deg, #fff 30%, #B7CCFF);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}
.adm-sub { color: rgba(220,232,255,.78); margin: -10px 0 22px; font-size: 14px; }
.adm-muted { color: rgba(210,225,255,.65); font-size: 13px; }
.adm-toolbar .adm-muted, #userCount, #orderCount { color: rgba(225,235,255,.78); }

/* cards grid */
.adm-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 14px; margin-bottom: 22px; }

.adm-card {
  position: relative;
  background: var(--adm-glass-light);
  border: 1px solid var(--adm-line);
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), var(--adm-fancy-shadow);
  overflow: hidden;
  transition: transform .25s var(--adm-ease), box-shadow .25s;
}
.adm-card::before {
  content: ""; position: absolute; left: 14%; right: 14%; top: 0; height: 1.2px;
  background: linear-gradient(90deg, transparent, rgba(94,147,255,.85), transparent);
  opacity: 0; transition: opacity .4s;
}
.adm-card:hover { transform: translateY(-3px); }
.adm-card:hover::before { opacity: 1; }
.ac-k {
  display: block; font-family: "Geist Mono","IBM Plex Mono",monospace;
  font-size: 10.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--adm-blue-700);
}
.ac-v { display: block; font-size: 28px; font-weight: 700; color: var(--adm-ink); margin-top: 5px; letter-spacing: -.02em; }

/* PROFIT accent → metallic gold (premium, like the MetalButton gold variant) */
.adm-card.accent {
  background:
    linear-gradient(180deg, #FFE9A1 0%, #C99C26 55%, #806019 100%);
  border: 1px solid rgba(155,135,63,.6);
  box-shadow:
    inset 0 1px 0 rgba(255,253,221,.85),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 16px 30px -16px rgba(155,135,63,.65),
    var(--adm-fancy-shadow);
}
.adm-card.accent::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.35), transparent 40%);
  border-radius: inherit;
}
.adm-card.accent .ac-k { color: rgba(70,50,5,.85); }
.adm-card.accent .ac-v {
  color: #2B1E04;
  text-shadow: 0 1px 0 rgba(255,253,221,.6);
}

/* generic panel */
.adm-panel {
  position: relative;
  background: var(--adm-glass-light);
  border: 1px solid var(--adm-line);
  border-radius: 18px;
  padding: 22px 24px;
  margin-bottom: 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), var(--adm-fancy-shadow);
  overflow: hidden;
}
.adm-panel h3 { font-size: 16px; color: var(--adm-ink); margin-bottom: 12px; font-weight: 600; letter-spacing: -.01em; }
.adm-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* toolbar + inputs */
.adm-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.adm-input {
  padding: 10px 14px; border-radius: 11px; border: 1px solid var(--adm-line);
  background: rgba(255,255,255,.92); font-size: 14px; color: var(--adm-ink);
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.adm-input:focus {
  outline: none; border-color: var(--adm-blue-500);
  box-shadow: 0 0 0 3px rgba(43,102,232,.18);
}
.adm-input.tiny { width: 92px; padding: 7px 10px; font-size: 13px; }
.adm-input.narrow { width: 96px; }
#userSearch, #orderFilter { min-width: 250px; }
.adm-inline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.adm-pct { color: var(--adm-blue-700); font-weight: 700; font-family: "Geist Mono","IBM Plex Mono",monospace; }
.adm-example { margin-top: 14px; font-size: 13.5px; color: rgba(11,20,48,.7); }
.adm-example b { color: var(--adm-blue-700); }

/* ---------- BUTTONS (cool blue gradient with inner white ring) ---------- */
.adm-panel .btn,
.adm-panel button.btn-primary,
.btn-primary.adm-cool,
.adm-cool {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 18px; border-radius: 10px;
  font-size: 13.5px; font-weight: 600; line-height: 1; cursor: pointer;
  color: #fff;
  background: linear-gradient(180deg, #3D7BF5, #1B49D8 80%, #1437A5);
  border: 1px solid rgba(11,30,74,.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 0 0 1px rgba(255,255,255,.20),
    0 8px 18px -10px rgba(20,55,165,.7),
    0 1px 2px rgba(0,0,0,.06);
  transition: filter .2s, transform .15s var(--adm-ease), box-shadow .2s;
}
.adm-panel .btn:hover,
.adm-panel button.btn-primary:hover,
.adm-cool:hover { filter: brightness(1.10); transform: translateY(-1px); }
.adm-panel .btn:active,
.adm-panel button.btn-primary:active,
.adm-cool:active { filter: brightness(.92); transform: translateY(0); }

/* outline / ghost in panel */
.adm-panel .btn-outline {
  background: rgba(255,255,255,.6);
  color: var(--adm-blue-700);
  border: 1px solid var(--adm-blue-200);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.adm-panel .btn-outline:hover { background: #fff; border-color: var(--adm-blue-400); }
.adm-panel .btn-ghost {
  background: transparent; color: var(--adm-blue-700); border: 1px solid transparent;
  padding: 8px 12px; box-shadow: none;
}
.adm-panel .btn-ghost:hover { background: rgba(43,102,232,.08); }

/* ---------- TABLE ---------- */
.adm-tablewrap {
  overflow-x: auto;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(238,244,255,.88));
  border: 1px solid var(--adm-line);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), var(--adm-fancy-shadow);
}
.adm-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.adm-table th {
  text-align: left; padding: 13px 16px;
  font-family: "Geist Mono","IBM Plex Mono",monospace;
  font-size: 10.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--adm-blue-700);
  background: linear-gradient(180deg, rgba(220,232,255,.85), rgba(200,218,250,.75));
  border-bottom: 1px solid var(--adm-blue-200);
  white-space: nowrap;
}
.adm-table td {
  padding: 12px 16px; border-bottom: 1px solid rgba(180,200,235,.35);
  color: var(--adm-ink); vertical-align: middle;
}
.adm-table tbody tr { transition: background .15s; }
.adm-table tbody tr:hover { background: rgba(94,147,255,.06); }
.adm-table tr:last-child td { border-bottom: none; }
.adm-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.adm-baladj { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.adm-ordact { display: flex; gap: 5px; white-space: nowrap; }

/* small action buttons inside table */
.adm-table .btn-sm { padding: 5px 10px; font-size: 12px; border-radius: 7px; }
.adm-table .btn-outline { background: #fff; color: var(--adm-blue-700); border: 1px solid var(--adm-blue-200); box-shadow: inset 0 1px 0 rgba(255,255,255,.9); }
.adm-table .btn-outline:hover { background: var(--adm-blue-50); border-color: var(--adm-blue-400); }
.adm-table .btn-ghost { color: var(--adm-blue-700); }

/* ---------- BADGES (status) ---------- */
.adm-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: "Geist Mono","IBM Plex Mono",monospace;
  font-size: 10.5px; font-weight: 600;
  padding: 3px 9px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .06em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}
.adm-badge.s-waiting  { background: linear-gradient(180deg, #FFEEC6, #F2D589); color: #6B4E0C; border: 1px solid #DDBC6A; }
.adm-badge.s-ok       { background: linear-gradient(180deg, #C7F2DB, #87DBAE); color: #0E5B36; border: 1px solid #6FCB97; }
.adm-badge.s-canceled { background: linear-gradient(180deg, #F7D9D6, #E3A8A4); color: #7B2A20; border: 1px solid #D78A85; }
.adm-badge.s-refunded { background: linear-gradient(180deg, #DAE6FF, #A6BFF7); color: #1F3A95; border: 1px solid #8AA8EB; }
.adm-badge.s-admin    { background: linear-gradient(180deg, #2B66E8, #1437A5); color: #fff; border: 1px solid #0F286E; box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
.adm-badge.s-2fa      { background: linear-gradient(180deg, #C7F2DB, #87DBAE); color: #0E5B36; border: 1px solid #6FCB97; }

/* ---------- ACTIVITY FEED ---------- */
.adm-feed { display: flex; flex-direction: column; }
.adm-feed-row {
  display: grid; grid-template-columns: 1.2fr 2fr 1.4fr .8fr auto;
  gap: 12px; align-items: center; padding: 11px 0;
  border-top: 1px solid rgba(180,200,235,.35);
  font-size: 13.5px;
}
.adm-feed-row:first-child { border-top: none; }
.afr-svc { font-weight: 600; color: var(--adm-ink); }
.afr-cost { text-align: right; color: var(--adm-blue-700); font-weight: 700; }

/* ---------- MARKUP overrides list ---------- */
.adm-mk-grid { display: flex; flex-direction: column; gap: 8px; }
.adm-mk-row {
  display: grid; grid-template-columns: 1.4fr .6fr 1fr auto;
  gap: 12px; align-items: center; padding: 11px 14px;
  background: linear-gradient(180deg, rgba(238,244,255,.8), rgba(220,232,255,.7));
  border: 1px solid var(--adm-line); border-radius: 12px;
}
.adm-mk-pct { font-weight: 700; color: var(--adm-blue-700); font-family: "Geist Mono","IBM Plex Mono",monospace; }

/* ---------- TRAFFIC bars ---------- */
.adm-bar-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.abr-label { flex: 0 0 122px; font-size: 13px; color: var(--adm-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.abr-track { flex: 1; height: 10px; background: rgba(220,232,255,.7); border-radius: 6px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(20,55,165,.15); }
.abr-fill {
  display: block; height: 100%;
  background: linear-gradient(90deg, #3D7BF5, #1B49D8);
  border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 0 8px rgba(94,147,255,.4);
}
.abr-val { flex: 0 0 auto; font-size: 12.5px; color: rgba(11,20,48,.7); min-width: 56px; text-align: right; font-family: "Geist Mono","IBM Plex Mono",monospace; }
.adm-flag { width: 22px; height: 16px; border-radius: 3px; object-fit: cover; flex: 0 0 22px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.adm-flag-x { display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }

.adm-daychart { display: flex; align-items: flex-end; gap: 3px; height: 130px; padding-top: 8px; }
.adm-daybar {
  flex: 1; min-width: 3px;
  background: linear-gradient(180deg, #5E93FF, #1437A5);
  border-radius: 4px 4px 0 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
  transition: opacity .15s, transform .15s;
}
.adm-daybar:hover { opacity: .85; transform: scaleY(1.04); }
.adm-day-axis { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; color: rgba(11,20,48,.6); font-family: "Geist Mono","IBM Plex Mono",monospace; }

/* ---------- REGISTRATION TOGGLE (metallic) ---------- */
.adm-reg { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.adm-toggle {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 12px;
  padding: 8px 16px 8px 8px; border-radius: 999px;
  background: linear-gradient(180deg, #D2DBEC, #A9B5CE);
  border: 1px solid rgba(40,60,110,.25);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 0 rgba(0,0,0,.08), 0 2px 6px rgba(20,55,165,.15);
  transition: all .25s var(--adm-ease);
}
.adm-toggle-dot {
  width: 24px; height: 24px; border-radius: 50%;
  background: linear-gradient(180deg, #fff, #DDE4F0);
  box-shadow: 0 2px 5px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.9);
  transition: transform .25s var(--adm-ease), background .25s;
}
.adm-toggle.on {
  background: linear-gradient(180deg, #A8E5C4, #4FB58A);
  border-color: rgba(15,90,50,.45);
}
.adm-toggle.on .adm-toggle-dot {
  transform: translateX(3px);
  background: linear-gradient(180deg, #fff, #C2F1D8);
  box-shadow: 0 2px 6px rgba(31,164,99,.5), inset 0 1px 0 rgba(255,255,255,.95);
}
.adm-toggle-label { font-size: 13px; font-weight: 700; letter-spacing: .04em; color: rgba(11,20,48,.7); }
.adm-toggle.on .adm-toggle-label { color: #0E5B36; }

/* ---------- TOAST ---------- */
.adm-toast {
  position: fixed; bottom: 26px; left: 50%; transform: translate(-50%, 20px);
  background: linear-gradient(180deg, #1B49D8, #0B1E4A);
  color: #fff; padding: 12px 22px; border-radius: 12px;
  font-size: 13.5px; font-weight: 500;
  border: 1px solid rgba(150,180,255,.3);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    0 22px 50px -18px rgba(0,0,0,.7);
  opacity: 0; transition: all .3s var(--adm-ease); z-index: 100;
}
.adm-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- ACCESS GATE (when shown) ---------- */
.adm-gate { background: rgba(7,14,36,.82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.adm-gate-card {
  background: linear-gradient(180deg, #fff, #F4F8FF);
  border: 1px solid rgba(180,200,235,.6);
  border-radius: 20px; padding: 30px 26px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 60px 100px -30px rgba(0,0,0,.7),
    0 0 0 1px rgba(94,147,255,.15);
}
.adm-gate-ico {
  background: linear-gradient(180deg, #3D7BF5, #1437A5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 14px 26px -10px rgba(20,55,165,.7);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
  .adm-shell { grid-template-columns: 1fr; }
  .adm-side { position: static; height: auto; padding: 14px 16px; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; }
  .adm-brand { padding: 0 6px 0 0; }
  .adm-nav { flex-direction: row; flex-wrap: wrap; gap: 6px; padding: 0; }
  .adm-tab { padding: 8px 12px; font-size: 13px; }
  .adm-tab.is-active::before { display: none; }
  .adm-side-foot { margin: 0 0 0 auto; padding: 0; border: none; flex-direction: row; gap: 8px; align-items: center; }
  .adm-main { padding: 22px 18px 50px; }
  .adm-main h1 { font-size: 26px; }
  .adm-grid2 { grid-template-columns: 1fr; }
  .adm-feed-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 460px) {
  .adm-cards { grid-template-columns: 1fr 1fr; }
  .ac-v { font-size: 22px; }
}

/* ==================================================================
   ADMIN V2 — dark glass everywhere, sleek charts, user modal, etc.
   ================================================================== */

/* override: cards, panels, tables → DARK GLASS */
.adm-card, .adm-panel, .adm-tablewrap, .adm-mk-row, .adm-feed-row {
  color: rgba(225,235,255,.92);
}
.adm-card {
  background: linear-gradient(180deg, rgba(22,40,82,.62), rgba(10,22,52,.72));
  border: 1px solid rgba(120,170,255,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 22px 50px -28px rgba(0,0,0,.7),
    0 6px 16px -10px rgba(20,55,165,.4);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
          backdrop-filter: blur(14px) saturate(140%);
}
.adm-card .ac-k { color: rgba(140,180,240,.85); }
.adm-card .ac-v { color: #fff; }

/* keep the GOLD profit card untouched */
.adm-card.accent {
  background: linear-gradient(180deg, #FFE9A1 0%, #C99C26 55%, #806019 100%) !important;
  border-color: rgba(155,135,63,.6) !important;
}
.adm-card.accent .ac-k { color: rgba(70,50,5,.85) !important; }
.adm-card.accent .ac-v { color: #2B1E04 !important; }

.adm-panel {
  background: linear-gradient(180deg, rgba(22,40,82,.6), rgba(10,22,52,.7));
  border: 1px solid rgba(120,170,255,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 22px 50px -28px rgba(0,0,0,.7);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
          backdrop-filter: blur(14px) saturate(140%);
}
.adm-panel h3 { color: #fff; }
.adm-panel .adm-muted { color: rgba(180,205,255,.65); }

/* dark table */
.adm-tablewrap {
  background: linear-gradient(180deg, rgba(22,40,82,.55), rgba(10,22,52,.65));
  border: 1px solid rgba(120,170,255,.18);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
          backdrop-filter: blur(14px) saturate(140%);
}
.adm-table th {
  background: linear-gradient(180deg, rgba(50,80,150,.45), rgba(30,55,120,.4));
  color: rgba(180,210,255,.75);
  border-bottom-color: rgba(120,170,255,.2);
}
.adm-table td {
  border-bottom-color: rgba(120,170,255,.1);
  color: rgba(230,240,255,.92);
}
.adm-table tbody tr { transition: background .15s; cursor: pointer; }
.adm-table tbody tr:hover { background: rgba(94,147,255,.1); }

/* row hidden Adjust column — now opened in modal on click */
.adm-table .adm-baladj { display: none; }

/* input on dark */
.adm-input {
  background: rgba(15,28,62,.7);
  border-color: rgba(120,170,255,.22);
  color: #fff;
}
.adm-input::placeholder { color: rgba(180,205,255,.45); }
.adm-input:focus { border-color: var(--adm-blue-400); box-shadow: 0 0 0 3px rgba(94,147,255,.18); background: rgba(15,28,62,.85); }

/* toolbar muted color on dark */
.adm-toolbar .adm-muted, #userCount, #orderCount { color: rgba(190,215,255,.7); }

/* badges look great on dark; keep gradients, only nudge admin */
.adm-badge.s-admin { box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 0 12px -3px rgba(43,102,232,.6); }

/* mono labels under panels: light blue */
.adm-mk-row {
  background: linear-gradient(180deg, rgba(30,55,120,.5), rgba(15,32,80,.45));
  border-color: rgba(120,170,255,.18);
}
.adm-mk-row code { color: #fff; background: rgba(255,255,255,.06); padding: 3px 8px; border-radius: 6px; }

/* feed row on dark */
.adm-feed-row { border-color: rgba(120,170,255,.1); }
.adm-feed-row .adm-muted, .adm-feed-row .afr-svc { color: rgba(230,240,255,.9); }
.afr-cost { color: #8AB3FF; }

/* ---------- CUSTOM SELECT (replaces ugly native dropdown) ---------- */
.adm-select-wrap { position: relative; display: inline-block; min-width: 260px; }
.adm-select-wrap select {
  width: 100%;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding: 11px 42px 11px 16px;
  background: linear-gradient(180deg, rgba(30,55,120,.65), rgba(15,32,80,.7));
  border: 1px solid rgba(120,170,255,.25);
  border-radius: 11px;
  color: #fff;
  font-size: 14px; font-weight: 500;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 6px 14px -8px rgba(0,0,0,.5);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.adm-select-wrap select:hover { border-color: rgba(140,190,255,.4); background: linear-gradient(180deg, rgba(40,70,140,.7), rgba(20,40,100,.75)); }
.adm-select-wrap select:focus { outline: none; border-color: var(--adm-blue-400); box-shadow: 0 0 0 3px rgba(94,147,255,.18), inset 0 1px 0 rgba(255,255,255,.06); }
.adm-select-wrap::after {
  content: ""; position: absolute; right: 16px; top: 50%;
  width: 8px; height: 8px;
  border-right: 2px solid rgba(180,210,255,.7);
  border-bottom: 2px solid rgba(180,210,255,.7);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
  transition: border-color .15s;
}
.adm-select-wrap:hover::after { border-color: #fff; }
/* Style the actual <option> list (limited cross-browser) */
.adm-select-wrap select option {
  background: #0B1430;
  color: #fff;
  padding: 10px;
}

/* ---------- USER DETAIL MODAL (like the dark profile card) ---------- */
.adm-modal { position: fixed; inset: 0; z-index: 200; display: none; padding: 28px; align-items: center; justify-content: center; }
.adm-modal[data-open="true"] { display: flex; animation: ammf .2s ease; }
@keyframes ammf { from { opacity: 0; } to { opacity: 1; } }
.adm-modal-backdrop { position: absolute; inset: 0; background: rgba(5,12,28,.7); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.adm-modal-card {
  position: relative; width: 100%; max-width: 720px; max-height: 88vh;
  overflow-y: auto;
  background: linear-gradient(180deg, rgba(15,30,72,.96), rgba(8,18,48,.98));
  border: 1px solid rgba(120,170,255,.22);
  border-radius: 22px;
  padding: 28px 30px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 60px 120px -28px rgba(0,0,0,.85);
  color: #fff;
  animation: amms .25s var(--adm-ease);
}
@keyframes amms { from { transform: translateY(20px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
.adm-modal-close {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px; border-radius: 9px;
  background: rgba(255,255,255,.06); color: rgba(220,235,255,.7);
  font-size: 20px; line-height: 1;
  transition: all .15s;
}
.adm-modal-close:hover { background: rgba(255,255,255,.12); color: #fff; }

.um-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 24px; padding-bottom: 22px; border-bottom: 1px solid rgba(120,170,255,.15); }
.um-avatar {
  flex: 0 0 56px; width: 56px; height: 56px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #3D7BF5, #1437A5);
  color: #fff; font-size: 22px; font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 10px 22px -8px rgba(43,102,232,.5);
}
.um-name { font-family: var(--font-display); font-size: 24px; letter-spacing: -.02em; color: #fff; margin-bottom: 2px; }
.um-email { display: block; color: #8AB3FF; font-size: 14.5px; margin-bottom: 6px; }
.um-id {
  display: inline-block; font-family: "Geist Mono","IBM Plex Mono",monospace;
  font-size: 11px; color: rgba(180,205,255,.55); letter-spacing: .04em;
}

.um-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 26px; }
.um-stat {
  background: rgba(15,28,62,.55);
  border: 1px solid rgba(120,170,255,.14);
  border-radius: 12px;
  padding: 14px 16px;
}
.ums-k {
  display: block;
  font-family: "Geist Mono","IBM Plex Mono",monospace;
  font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(150,190,250,.7);
}
.ums-v {
  display: block; font-family: "Geist Mono","IBM Plex Mono",monospace;
  font-size: 20px; font-weight: 700; color: #fff;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}

.um-ctrl { background: rgba(8,18,42,.5); border: 1px solid rgba(120,170,255,.12); border-radius: 16px; padding: 18px; }
.um-ctrl > .ums-k { margin-bottom: 12px; }
.um-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; background: rgba(5,14,34,.6); border: 1px solid rgba(120,170,255,.12); border-radius: 12px; padding: 4px; margin-bottom: 14px; }
.um-tab {
  padding: 11px 14px; border-radius: 9px;
  font-family: "Geist Mono","IBM Plex Mono",monospace;
  font-size: 12px; font-weight: 700; letter-spacing: .08em;
  color: rgba(180,205,255,.55);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: all .2s;
}
.um-tab svg { width: 16px; height: 16px; }
.um-tab.is-active[data-op="inject"] {
  background: linear-gradient(180deg, rgba(31,164,99,.18), rgba(15,90,55,.08));
  color: #6FE0A9; border: 1px solid rgba(31,164,99,.5);
  box-shadow: inset 0 0 12px rgba(31,164,99,.18);
}
.um-tab.is-active[data-op="drain"] {
  background: linear-gradient(180deg, rgba(232,80,80,.18), rgba(140,30,30,.08));
  color: #FF8B8B; border: 1px solid rgba(232,80,80,.55);
  box-shadow: inset 0 0 12px rgba(232,80,80,.18);
}
.um-exec-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.um-amt {
  padding: 12px 16px; border-radius: 10px;
  background: rgba(5,14,34,.7);
  border: 1px solid rgba(120,170,255,.18);
  color: #fff; font-size: 16px;
  font-family: "Geist Mono","IBM Plex Mono",monospace;
}
.um-amt:focus { outline: none; border-color: rgba(140,190,255,.5); box-shadow: 0 0 0 3px rgba(94,147,255,.15); }
.um-amt::placeholder { color: rgba(180,205,255,.3); }

.um-exec-btn {
  padding: 0 26px; border-radius: 10px;
  font-family: "Geist Mono","IBM Plex Mono",monospace;
  font-size: 12.5px; font-weight: 700; letter-spacing: .12em;
  background: linear-gradient(180deg, rgba(31,164,99,.7), rgba(15,90,55,.85));
  color: #DFFFF1;
  border: 1px solid rgba(31,164,99,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 8px 18px -10px rgba(31,164,99,.6);
  transition: filter .15s, transform .15s;
}
.um-exec-btn.drain {
  background: linear-gradient(180deg, rgba(232,80,80,.7), rgba(140,30,30,.85));
  color: #FFE0E0;
  border-color: rgba(232,80,80,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 8px 18px -10px rgba(232,80,80,.6);
}
.um-exec-btn:hover { filter: brightness(1.12); }
.um-exec-btn:active { transform: translateY(1px); }
.um-msg { margin-top: 12px; font-size: 13px; min-height: 18px; }
.um-msg.ok { color: #6FE0A9; }
.um-msg.warn { color: #FF8B8B; }

/* ---------- MARKUP REDESIGN (with service logos) ---------- */
.adm-mk-grid { gap: 10px; }
.adm-mk-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  gap: 14px; padding: 12px 16px;
  align-items: center;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(30,55,120,.4), rgba(15,32,80,.3));
  border: 1px solid rgba(120,170,255,.16);
  transition: background .15s, border-color .15s;
}
.adm-mk-row:hover { background: linear-gradient(180deg, rgba(45,75,150,.5), rgba(20,42,100,.4)); border-color: rgba(140,190,255,.3); }
.adm-mk-logo {
  width: 36px; height: 36px; border-radius: 10px; flex: 0 0 36px;
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
  border: 1px solid rgba(120,170,255,.18);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.adm-mk-logo img { width: 22px; height: 22px; }
.adm-mk-logo span { font-weight: 700; color: #fff; font-size: 15px; }
.adm-mk-name { color: #fff; font-weight: 600; font-size: 14px; }
.adm-mk-code { display: block; font-family: "Geist Mono","IBM Plex Mono",monospace; font-size: 11px; color: rgba(180,205,255,.55); letter-spacing: .04em; margin-top: 2px; }
.adm-mk-row .adm-mk-pct {
  background: linear-gradient(180deg, rgba(94,147,255,.18), rgba(43,102,232,.1));
  color: #8AB3FF; padding: 5px 11px; border-radius: 999px;
  border: 1px solid rgba(120,170,255,.3);
}
.adm-mk-impact { font-family: "Geist Mono","IBM Plex Mono",monospace; font-size: 12.5px; color: rgba(180,205,255,.7); }
.adm-mk-row .btn-ghost { color: rgba(255,150,150,.8); padding: 6px 12px; font-size: 12px; }
.adm-mk-row .btn-ghost:hover { color: #FF8B8B; background: rgba(232,80,80,.1); }

/* default markup example chip */
.adm-example { color: rgba(190,215,255,.75); }
.adm-example b { color: #8AB3FF; }

/* ---------- TRAFFIC PAGE — proper charts ---------- */
.adm-chart-card {
  background: linear-gradient(180deg, rgba(22,40,82,.6), rgba(10,22,52,.7));
  border: 1px solid rgba(120,170,255,.18);
  border-radius: 16px;
  padding: 22px;
  -webkit-backdrop-filter: blur(14px) saturate(140%);
          backdrop-filter: blur(14px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 22px 50px -28px rgba(0,0,0,.7);
}
.adm-chart-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; }
.adm-chart-head h3 { color: #fff; font-size: 16px; font-weight: 600; }
.adm-chart-head .live {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: "Geist Mono","IBM Plex Mono",monospace;
  font-size: 11px; font-weight: 600; letter-spacing: .12em;
  color: #6FE0A9;
}
.adm-chart-head .live::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: #1FA463; box-shadow: 0 0 8px #1FA463;
  animation: livePulse 1.4s ease-in-out infinite;
}
@keyframes livePulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* LINE CHART */
.adm-line-chart { position: relative; height: 160px; }
.adm-line-chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.adm-line-axis {
  display: flex; justify-content: space-between; margin-top: 8px;
  font-family: "Geist Mono","IBM Plex Mono",monospace;
  font-size: 10.5px; color: rgba(180,205,255,.5); letter-spacing: .04em;
}

/* DONUT chart */
.adm-donut-wrap { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.adm-donut { position: relative; width: 144px; height: 144px; flex: 0 0 144px; }
.adm-donut svg { display: block; transform: rotate(-90deg); }
.adm-donut-center {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  pointer-events: none;
}
.adm-donut-num { font-family: "Geist Mono","IBM Plex Mono",monospace; font-size: 24px; font-weight: 700; color: #fff; line-height: 1; }
.adm-donut-lbl { font-family: "Geist Mono","IBM Plex Mono",monospace; font-size: 10px; color: rgba(180,205,255,.6); letter-spacing: .12em; margin-top: 3px; }
.adm-legend { flex: 1; min-width: 140px; display: flex; flex-direction: column; gap: 10px; }
.adm-leg-row { display: flex; align-items: center; gap: 10px; font-size: 13px; color: rgba(225,235,255,.88); }
.adm-leg-dot { width: 10px; height: 10px; border-radius: 3px; box-shadow: 0 0 8px currentColor; }
.adm-leg-row .num { margin-left: auto; font-family: "Geist Mono","IBM Plex Mono",monospace; color: rgba(180,205,255,.7); }

/* country / pages bars on dark */
.abr-label { color: rgba(225,235,255,.92); }
.abr-track { background: rgba(255,255,255,.06); box-shadow: inset 0 1px 2px rgba(0,0,0,.3); }
.abr-val { color: rgba(180,205,255,.7); }

/* ---------- USER ROW HOVER hint ---------- */
.adm-table tbody tr td:first-child { position: relative; }
.adm-table tbody tr:hover td:first-child::before {
  content: "▸";
  position: absolute; left: -2px; top: 50%;
  transform: translateY(-50%);
  color: #8AB3FF; font-size: 14px;
}

/* ==================================================================
   ADMIN V3 — LIGHT ICY BLUE + cursor-only shine (no fixed top line)
   This block wins (loaded last) — keeps the dark wave background but
   flips every CARD / PANEL / TABLE / TAB to a frosted icy-blue glass.
   ================================================================== */

/* LIGHT ICY for stat cards (gold profit accent stays) */
.adm-card {
  background: linear-gradient(180deg, rgba(232,242,255,.86), rgba(204,224,252,.78)) !important;
  border: 1px solid rgba(140,180,240,.55) !important;
  color: var(--adm-ink) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 22px 50px -22px rgba(20,55,165,.55),
    0 4px 14px -10px rgba(20,55,165,.35) !important;
  -webkit-backdrop-filter: blur(16px) saturate(150%);
          backdrop-filter: blur(16px) saturate(150%);
}
.adm-card .ac-k { color: var(--adm-blue-700) !important; }
.adm-card .ac-v { color: var(--adm-ink) !important; }
/* keep the gold accent */
.adm-card.accent {
  background: linear-gradient(180deg, #FFE9A1 0%, #C99C26 55%, #806019 100%) !important;
  border-color: rgba(155,135,63,.6) !important;
}
.adm-card.accent .ac-k { color: rgba(70,50,5,.85) !important; }
.adm-card.accent .ac-v { color: #2B1E04 !important; }

/* panels & chart cards & tablewrap & mk-rows → LIGHT ICY */
.adm-panel,
.adm-tablewrap,
.adm-chart-card {
  background: linear-gradient(180deg, rgba(232,242,255,.85), rgba(204,224,252,.78)) !important;
  border: 1px solid rgba(140,180,240,.55) !important;
  color: var(--adm-ink) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 22px 50px -22px rgba(20,55,165,.5) !important;
  -webkit-backdrop-filter: blur(16px) saturate(150%);
          backdrop-filter: blur(16px) saturate(150%);
}
.adm-panel h3, .adm-chart-card h3 { color: var(--adm-ink) !important; }
.adm-panel .adm-muted, .adm-chart-card .adm-muted { color: rgba(20,55,165,.6) !important; }

/* table on light */
.adm-table th {
  background: linear-gradient(180deg, rgba(195,217,250,.85), rgba(175,205,250,.72)) !important;
  color: var(--adm-blue-700) !important;
  border-bottom-color: rgba(140,180,240,.5) !important;
}
.adm-table td {
  color: var(--adm-ink) !important;
  border-bottom-color: rgba(140,180,240,.28) !important;
}
.adm-table tbody tr:hover { background: rgba(94,147,255,.13) !important; }
.adm-table tbody tr:hover td:first-child::before { color: var(--adm-blue-600) !important; }

/* inputs on light bg */
.adm-input {
  background: rgba(255,255,255,.78) !important;
  border-color: rgba(140,180,240,.55) !important;
  color: var(--adm-ink) !important;
}
.adm-input::placeholder { color: rgba(20,55,165,.42) !important; }
.adm-input:focus { background: #fff !important; border-color: var(--adm-blue-500) !important; box-shadow: 0 0 0 3px rgba(43,102,232,.18) !important; }

/* select on light */
.adm-select-wrap select {
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(225,237,255,.78)) !important;
  border-color: rgba(140,180,240,.55) !important;
  color: var(--adm-ink) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 4px 12px -8px rgba(20,55,165,.35) !important;
}
.adm-select-wrap select:hover { background: linear-gradient(180deg, #fff, #E0EAFF) !important; border-color: var(--adm-blue-400) !important; }
.adm-select-wrap::after { border-color: var(--adm-blue-700) !important; }
.adm-select-wrap select option { background: #DCE9FF !important; color: var(--adm-ink) !important; }

/* mk row on light */
.adm-mk-row {
  background: linear-gradient(180deg, rgba(232,242,255,.7), rgba(208,225,250,.62)) !important;
  border-color: rgba(140,180,240,.45) !important;
}
.adm-mk-row:hover { background: linear-gradient(180deg, rgba(232,242,255,.95), rgba(208,225,250,.88)) !important; border-color: var(--adm-blue-400) !important; }
.adm-mk-row code { color: var(--adm-blue-700) !important; background: rgba(94,147,255,.12) !important; }
.adm-mk-row .adm-mk-name { color: var(--adm-ink) !important; }
.adm-mk-row .adm-mk-code { color: rgba(20,55,165,.55) !important; }
.adm-mk-row .adm-mk-pct { background: linear-gradient(180deg, rgba(94,147,255,.22), rgba(43,102,232,.14)) !important; color: var(--adm-blue-700) !important; border: 1px solid rgba(120,170,255,.45) !important; }
.adm-mk-impact { color: var(--adm-blue-700) !important; }
.adm-mk-logo { background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(220,232,255,.7)) !important; border-color: rgba(140,180,240,.45) !important; }
.adm-mk-logo span { color: var(--adm-blue-700) !important; }

/* feed row on light */
.adm-feed-row .afr-svc { color: var(--adm-ink) !important; }
.adm-feed-row .adm-muted { color: rgba(20,55,165,.6) !important; }
.afr-cost { color: var(--adm-blue-700) !important; }
.adm-feed-row { border-color: rgba(140,180,240,.28) !important; }

/* toolbar text */
.adm-toolbar .adm-muted, #userCount, #orderCount { color: rgba(225,235,255,.78) !important; }

/* country bars on light */
.abr-label { color: var(--adm-ink) !important; }
.abr-track { background: rgba(140,180,240,.2) !important; box-shadow: inset 0 1px 2px rgba(20,55,165,.15) !important; }
.abr-val { color: rgba(20,55,165,.65) !important; }

/* donut center text */
.adm-donut-num { color: var(--adm-ink) !important; }
.adm-donut-lbl { color: rgba(20,55,165,.6) !important; }
.adm-leg-row { color: var(--adm-ink) !important; }
.adm-leg-row .num { color: rgba(20,55,165,.65) !important; }
.adm-donut svg circle:last-of-type { fill: rgba(232,242,255,.95) !important; }

/* user modal — light icy (with green/red INJECT/DRAIN accents intact) */
.adm-modal-card {
  background: linear-gradient(180deg, #F4F8FF, #DCE9FF) !important;
  border: 1px solid rgba(140,180,240,.6) !important;
  color: var(--adm-ink) !important;
}
.adm-modal-close { background: rgba(20,55,165,.08) !important; color: var(--adm-blue-700) !important; }
.adm-modal-close:hover { background: rgba(20,55,165,.16) !important; color: var(--adm-ink) !important; }
.um-head { border-bottom-color: rgba(140,180,240,.32) !important; }
.um-name { color: var(--adm-ink) !important; }
.um-email { color: var(--adm-blue-700) !important; }
.um-id { color: rgba(20,55,165,.55) !important; }
.um-stat {
  background: rgba(255,255,255,.7) !important;
  border-color: rgba(140,180,240,.35) !important;
}
.ums-k { color: var(--adm-blue-700) !important; }
.ums-v { color: var(--adm-ink) !important; }
.um-ctrl {
  background: rgba(255,255,255,.62) !important;
  border-color: rgba(140,180,240,.35) !important;
}
.um-tabs {
  background: rgba(220,232,255,.65) !important;
  border-color: rgba(140,180,240,.35) !important;
}
.um-tab { color: rgba(20,55,165,.55) !important; }
.um-amt {
  background: rgba(255,255,255,.78) !important;
  border-color: rgba(140,180,240,.35) !important;
  color: var(--adm-ink) !important;
}
.um-amt::placeholder { color: rgba(20,55,165,.32) !important; }
.um-amt:focus { background: #fff !important; border-color: var(--adm-blue-500) !important; }

/* sidebar tabs — keep dark but switch the active state to icy gradient */
.adm-tab.is-active {
  background: linear-gradient(180deg, rgba(180,215,255,.32), rgba(120,170,255,.18)) !important;
  color: #fff !important;
}
.adm-tab.is-active::before {
  background: linear-gradient(180deg, #B7D8FF, #5E93FF) !important;
  box-shadow: 0 0 12px rgba(150,200,255,.7) !important;
}

/* ==================================================================
   PROPER CURSOR-ONLY SHINE
   - KILL every fixed-position top neon line (::before)
   - KEEP the radial border-mask (::after) which truly follows cursor
   - one global pointermove listener wires --mx/--my on all shineables
   ================================================================== */
.shine::before,
.step-block::before,
.adm-card::before,
.adm-panel::before,
.adm-tablewrap::before,
.adm-chart-card::before,
.adm-tab::before {
  content: none !important;
}

/* unified shine surface on every admin glass element */
.adm-card, .adm-panel, .adm-tablewrap, .adm-chart-card, .adm-mk-row {
  position: relative; overflow: visible;
  transition: transform .25s var(--adm-ease), box-shadow .25s;
}
.adm-card > *, .adm-panel > *, .adm-tablewrap > *, .adm-chart-card > * { position: relative; z-index: 2; }

.adm-card::after,
.adm-panel::after,
.adm-tablewrap::after,
.adm-chart-card::after,
.adm-mk-row::after,
.shine::after {
  content: "";
  position: absolute; inset: -1px;
  border-radius: inherit;
  z-index: 1; pointer-events: none;
  padding: 2px;
  background: radial-gradient(
    var(--shine-r, 280px) circle at var(--mx, 50%) var(--my, 50%),
    rgba(94,147,255,1),
    rgba(94,147,255,.45) 38%,
    rgba(94,147,255,0) 70%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .25s ease;
}
.adm-card:hover::after,
.adm-panel:hover::after,
.adm-tablewrap:hover::after,
.adm-chart-card:hover::after,
.adm-mk-row:hover::after,
.shine:hover::after { opacity: 1; }

.adm-card:hover, .adm-mk-row:hover { transform: translateY(-2px); }

/* sidebar tab shine — icy on dark */
.adm-tab::after {
  background: radial-gradient(
    180px circle at var(--mx, 50%) var(--my, 50%),
    rgba(170,220,255,1),
    rgba(130,190,255,.5) 40%,
    rgba(130,190,255,0) 70%
  ) !important;
}

/* user modal — role row (Grant / Revoke admin) */
.um-role {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 16px; margin-bottom: 14px;
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(140,180,240,.35);
  border-radius: 14px;
}
.um-role-state {
  font-size: 15px; font-weight: 600; color: var(--adm-ink); margin-top: 4px;
  display: inline-flex; align-items: center; gap: 8px;
}
.um-role-state.is-admin { color: var(--adm-blue-700); }
.um-role-state.is-admin::before {
  content: "★"; font-size: 13px;
  width: 18px; height: 18px; border-radius: 5px;
  background: linear-gradient(180deg, #FFE9A1, #C99C26);
  color: #2B1E04;
  display: inline-flex; align-items: center; justify-content: center;
}
.um-role-state.is-env-admin { color: rgba(20,55,165,.55); font-size: 12px; font-weight: 500; }

.um-role-btn {
  padding: 9px 18px; border-radius: 10px;
  font-family: "Geist Mono","IBM Plex Mono",monospace;
  font-size: 12px; font-weight: 700; letter-spacing: .08em;
  background: linear-gradient(180deg, #3D7BF5, #1B49D8);
  color: #fff;
  border: 1px solid rgba(20,55,165,.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 8px 18px -10px rgba(20,55,165,.55);
  transition: filter .15s, transform .12s;
}
.um-role-btn:hover { filter: brightness(1.1); }
.um-role-btn:active { transform: translateY(1px); }

/* ---------- splash intro ---------- */
body.splash-active { overflow: hidden; }
body.splash-active > *:not(#splashOverlay) { opacity: 0; }

#splashOverlay {
  position: fixed; inset: 0; z-index: 99999;
  pointer-events: none;
}

/* background layer behind curtain halves */
.splash-bg {
  position: absolute; inset: 0;
  background: url("../assets/splash-bg.png") center/cover no-repeat;
  background-color: #dce6f8;
  z-index: 0;
}

/* diagonal curtain halves */
.curtain-half {
  position: absolute; inset: 0; z-index: 1;
  will-change: transform;
  transition: transform 0.8s cubic-bezier(0.7, 0, 0.3, 1);
}
.curtain-svg { width: 100%; height: 100%; display: block; }

.curtain-tl { z-index: 2; }
.curtain-br { z-index: 1; }

.curtain-open .curtain-tl {
  transform: translate(-105%, -105%);
}
.curtain-open .curtain-br {
  transform: translate(105%, 105%);
}

/* logo floats above everything */
.splash-logo-wrap {
  position: absolute;
  top: 50%; left: 50%;
  width: 180px; height: 180px;
  margin: -90px 0 0 -90px;
  z-index: 10;
  filter: drop-shadow(0 0 25px rgba(255,255,255,0.5)) drop-shadow(0 0 60px rgba(100,160,255,0.3));
  will-change: transform, opacity;
}

.splash-svg { width: 100%; height: 100%; }

.splash-stroke {
  opacity: 0;
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.8));
}
.is-animating .splash-stroke {
  animation: splashPulse 1.4s ease-in forwards;
}

.splash-fill { opacity: 0; }
.is-animating .splash-fill {
  animation: splashFillIn 0.6s ease-out 1.2s forwards;
}

@keyframes splashPulse {
  0%   { opacity: 0; }
  15%  { opacity: 1; }
  35%  { opacity: 0.4; }
  55%  { opacity: 1; }
  75%  { opacity: 0.7; }
  100% { opacity: 0.3; }
}

@keyframes splashFillIn {
  0%   { opacity: 0; }
  60%  { opacity: 0.85; }
  100% { opacity: 1; }
}
.um-role-btn.revoke {
  background: linear-gradient(180deg, rgba(232,80,80,.85), rgba(165,30,30,.95));
  border-color: rgba(180,40,40,.65);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 8px 18px -10px rgba(180,40,40,.6);
}
.um-role-btn[disabled] {
  background: rgba(160,180,210,.5);
  border-color: rgba(140,180,240,.3);
  color: rgba(20,55,165,.45);
  cursor: not-allowed; box-shadow: none;
}

/* ==================================================================
   MARKUP — fix font contrast + proper rich service dropdown with logos
   ================================================================== */

/* default-markup example was barely readable — force dark navy */
.adm-example { color: var(--adm-ink) !important; }
.adm-example b { color: var(--adm-blue-700) !important; font-weight: 700; }

.adm-panel .adm-muted { color: rgba(20,55,165,.7) !important; }

/* per-service inline row keeps its layout */
.mk-row { gap: 10px; align-items: stretch; }

/* custom service picker */
.svc-picker {
  position: relative; flex: 1; min-width: 280px;
  display: flex; align-items: center;
}
.svc-picker-input {
  width: 100%;
  padding: 10px 42px 10px 44px !important;
  border-radius: 12px !important;
}
.svc-picker-icon {
  position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
  pointer-events: none; z-index: 2;
  display: inline-flex;
}
.svc-pick-logo.small {
  width: 28px; height: 28px; border-radius: 8px;
  background: linear-gradient(180deg, #fff, #E8F0FF);
  border: 1px solid rgba(140,180,240,.4);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  font-weight: 700; color: var(--adm-blue-700); font-size: 13px;
}
.svc-pick-logo.small.placeholder { background: rgba(255,255,255,.65); color: rgba(20,55,165,.4); }
.svc-pick-logo.small img { width: 18px; height: 18px; }

.svc-picker-clear {
  position: absolute; right: 28px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; border-radius: 5px;
  font-size: 16px; line-height: 1;
  background: rgba(20,55,165,.1);
  color: var(--adm-blue-700);
  z-index: 2;
  display: flex; align-items: center; justify-content: center;
}
.svc-picker-clear:hover { background: rgba(20,55,165,.18); color: var(--adm-ink); }

.svc-picker-arrow {
  position: absolute; right: 14px; top: 50%;
  width: 8px; height: 8px;
  border-right: 2px solid var(--adm-blue-700);
  border-bottom: 2px solid var(--adm-blue-700);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
  transition: transform .15s;
}
.svc-picker.is-open .svc-picker-arrow { transform: translateY(-30%) rotate(-135deg); }

.svc-picker-list {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  max-height: 320px; overflow-y: auto;
  background: linear-gradient(180deg, #F4F8FF, #DCE9FF);
  border: 1px solid rgba(140,180,240,.55);
  border-radius: 14px;
  padding: 6px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 30px 60px -22px rgba(20,55,165,.45),
    0 6px 14px -8px rgba(20,55,165,.25);
  z-index: 9999;
}
/* While the picker is open, lift its host panel above every other panel.
   This escapes the backdrop-filter stacking context trap. */
.adm-panel:has(.svc-picker.is-open) { z-index: 200; position: relative; }
/* Fallback if :has() isn't supported — JS adds .has-open-picker to the panel */
.adm-panel.has-open-picker { z-index: 200; position: relative; }
.svc-picker-list::-webkit-scrollbar { width: 8px; }
.svc-picker-list::-webkit-scrollbar-thumb { background: rgba(20,55,165,.3); border-radius: 4px; }

.svc-pick-item {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 10px; border-radius: 9px;
  cursor: pointer;
  transition: background .12s;
}
.svc-pick-item:hover,
.svc-pick-item.is-focus {
  background: linear-gradient(90deg, rgba(94,147,255,.18), rgba(94,147,255,.08));
}
.svc-pick-name { color: var(--adm-ink); font-weight: 500; font-size: 14px; }
.svc-pick-code {
  display: block;
  color: var(--adm-blue-700);
  font-family: "Geist Mono","IBM Plex Mono",monospace;
  font-size: 11px;
  letter-spacing: .04em;
}
.svc-pick-empty { padding: 14px 16px; color: rgba(20,55,165,.55); font-size: 13px; text-align: center; }

/* ==================================================================
   TRAFFIC — fix layout: spacing between cards, no collide
   ================================================================== */
#sec-traffic .adm-grid2 { gap: 18px; margin-bottom: 18px !important; align-items: stretch; }
#sec-traffic .adm-grid2 .adm-chart-card { margin-bottom: 0; min-height: 0; }
#sec-traffic .adm-donut-wrap {
  align-items: center; justify-content: center;
  min-height: 200px;
}
#sec-traffic .adm-donut { width: 168px; height: 168px; flex: 0 0 168px; }

/* By country full-width card — give it room from cards above + sane min-height */
#sec-traffic > .adm-chart-card { margin-bottom: 18px; }
#sec-traffic > .adm-chart-card:last-child { margin-bottom: 8px; }
#trCountry { min-height: 80px; }
#trCountry .adm-bar-row { padding: 9px 0; }
#trPages { min-height: 80px; }
#trPages .adm-bar-row { padding: 7px 0; }

/* card content top-aligned */
.adm-chart-card { display: flex; flex-direction: column; }
.adm-chart-card .adm-chart-head { flex: 0 0 auto; }

/* ==================================================================
   ORDERS — custom dropdown (replaces native select)
   ================================================================== */
.adm-dropdown {
  position: relative; display: inline-block; min-width: 240px;
}
.adm-dd-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 16px;
  border-radius: 12px;
  background: linear-gradient(180deg, #F4F8FF, #DCE9FF);
  border: 1px solid rgba(140,180,240,.55);
  color: var(--adm-ink);
  font-size: 14px; font-weight: 500;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 8px 18px -12px rgba(20,55,165,.4);
  transition: background .15s, border-color .15s, box-shadow .15s, transform .12s;
}
.adm-dd-trigger:hover {
  border-color: rgba(94,147,255,.7);
  background: linear-gradient(180deg, #fff, #E5EEFF);
  box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 10px 22px -10px rgba(20,55,165,.5);
}
.adm-dd-trigger:active { transform: translateY(1px); }
.adm-dd-trigger-label { display: flex; align-items: center; gap: 9px; }
.adm-dd-arrow {
  width: 9px; height: 9px;
  border-right: 2px solid var(--adm-blue-700);
  border-bottom: 2px solid var(--adm-blue-700);
  transform: translateY(-2px) rotate(45deg);
  transition: transform .2s;
}
.adm-dropdown.is-open .adm-dd-arrow { transform: translateY(2px) rotate(-135deg); }

.adm-dd-list {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  padding: 6px;
  background: linear-gradient(180deg, #F4F8FF, #DCE9FF);
  border: 1px solid rgba(140,180,240,.55);
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 30px 60px -22px rgba(20,55,165,.5),
    0 6px 14px -8px rgba(20,55,165,.25);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
          backdrop-filter: blur(20px) saturate(150%);
  z-index: 60;
  animation: ddpop .15s ease;
}
@keyframes ddpop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.adm-dd-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px; border-radius: 9px;
  font-size: 14px; color: var(--adm-ink); font-weight: 500;
  cursor: pointer;
  transition: background .12s;
}
.adm-dd-item:hover { background: linear-gradient(90deg, rgba(94,147,255,.18), rgba(94,147,255,.08)); }
.adm-dd-item.is-active {
  background: linear-gradient(90deg, rgba(94,147,255,.28), rgba(94,147,255,.14));
  color: var(--adm-blue-700); font-weight: 600;
}
.adm-dd-item.is-active::after {
  content: "✓"; margin-left: auto; color: var(--adm-blue-700); font-weight: 700;
}
.adm-dd-item .adm-badge { pointer-events: none; }