/* ── Design tokens ────────────────────────────────────── */
:root {
  --bg:          #05091a;
  --bg2:         #080e1f;
  --panel:       #0b1428e8;
  --panel-soft:  #0d1832d0;
  --panel-hover: #0f1e3a;
  --line:        #1e3660;
  --line-bright: #2d5399;
  --text:        #ddeeff;
  --muted:       #6e8dbf;
  --dim:         #445f8a;
  --good:        #00c9a7;
  --good-bg:     #00211b;
  --warn:        #ffab40;
  --warn-bg:     #231500;
  --bad:         #ff6b81;
  --bad-bg:      #2a0a0e;
  --accent:      #4facfe;
  --accent2:     #00f2fe;
  --accent-bg:   #041a35;
  --radius:      14px;
  --radius-sm:   9px;
  --blur:        14px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

body {
  font-family: "Sora", sans-serif;
  color: var(--text);
  background: var(--bg);
  background-image:
    radial-gradient(ellipse 80% 50% at 10% 0%, #0c1e4a66 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 90% 100%, #0a2d4966 0%, transparent 55%),
    radial-gradient(ellipse 40% 30% at 50% 50%, #05132a44 0%, transparent 70%);
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── Orbs ─────────────────────────────────────────────── */
.orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.35;
}
.orb-a { width: 350px; height: 350px; background: radial-gradient(#1d6fff, #0a2d8a); top: -120px; left: -80px; }
.orb-b { width: 280px; height: 280px; background: radial-gradient(#00c9a7, #0a4a5a); right: 2%; top: 35%; }

/* ── Brand bar ────────────────────────────────────────── */
.brand-bar {
  position: relative;
  z-index: 2;
  width: min(1500px, 96vw);
  margin: 16px auto 10px;
  display: flex;
  justify-content: center;
}

.brand-chip {
  font-size: 0.88rem;
  letter-spacing: 0.5px;
  padding: 7px 18px;
  border-radius: 999px;
  border: 1px solid #1e4a9c;
  color: #a8d4ff;
  background: linear-gradient(135deg, #060e24, #0a1a42);
  box-shadow: 0 0 0 1px #0d2d6620, 0 8px 28px #00000066, inset 0 1px 0 #ffffff0d;
}

.brand-chip span {
  font-weight: 700;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Layout grid ──────────────────────────────────────── */
.layout {
  position: relative;
  z-index: 1;
  width: min(1500px, calc(100vw - 24px));
  margin: 10px auto 28px;
  display: grid;
  grid-template-columns: 300px 1fr 350px;
  gap: 14px;
}
.layout > * { min-width: 0; }

.providers-panel, .otp-panel {
  position: sticky;
  top: 16px;
  align-self: start;
}

/* ── Panels ───────────────────────────────────────────── */
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  backdrop-filter: blur(var(--blur));
  box-shadow:
    0 1px 0 #ffffff09 inset,
    0 0 0 1px #0a1f4a22,
    0 16px 40px #00000055;
  padding: 16px;
  min-width: 0;
  transition: border-color 0.2s;
}

.panel:hover { border-color: #1e3d70; }

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 8px;
}

h1 { font-size: 1.25rem; font-weight: 700; color: #e8f2ff; }
h2 { font-size: 0.97rem; font-weight: 600; color: #c8deff; }

/* ── Tags / badges ────────────────────────────────────── */
.tag {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  border: 1px solid #1e3d70;
  color: var(--muted);
  background: #080f22;
}

.tag.live {
  color: var(--good);
  border-color: #00c9a755;
  background: #00211b44;
  animation: pollingPulse 1.4s ease-in-out infinite;
}

@keyframes pollingPulse {
  0%, 100% { box-shadow: 0 0 0 0 #00c9a722; }
  50%       { box-shadow: 0 0 0 5px #00c9a711; }
}

/* ── API key row ──────────────────────────────────────── */
.api-key-row {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.api-input {
  flex: 1;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #030c1e;
  color: var(--text);
  padding: 0 10px;
  font: inherit;
  font-size: 0.85rem;
}

/* ── Balance toolbar ──────────────────────────────────── */
.balance-toolbar {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.balance-select {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line-bright);
  border-radius: var(--radius-sm);
  background: linear-gradient(160deg, #07122b, #0a1a38);
  color: var(--text);
  padding: 0 12px;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: inset 0 1px 0 #ffffff0d;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.balance-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px #4facfe22, inset 0 1px 0 #ffffff14;
}

#checkBalanceBtn { width: 100%; }

.balance-chip {
  border: 1px solid var(--line-bright);
  border-radius: var(--radius-sm);
  background: linear-gradient(160deg, #07122b, #091830);
  box-shadow: inset 0 1px 0 #ffffff0d, 0 6px 20px #00000055;
  padding: 12px 14px;
  display: grid;
  gap: 2px;
  transition: border-color 0.2s;
}

.balance-chip:not(:empty):hover { border-color: var(--accent); }

.balance-chip .name {
  font-size: 0.68rem;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 600;
}

.balance-chip .amount {
  font-size: 1.4rem;
  line-height: 1;
  font-weight: 700;
  color: #f0f8ff;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.balance-chip .meta {
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 2px;
}

.balance-chip.loading .amount {
  -webkit-text-fill-color: var(--muted);
  background: none;
  opacity: 0.7;
}

.mobile-balance-bar {
  display: none !important;
  border: 1px solid var(--line-bright);
  border-radius: 10px;
  background: linear-gradient(145deg, #071228, #0a1a3a);
  color: #c8deff;
  padding: 9px 12px;
  margin-bottom: 10px;
  font-size: 0.86rem;
  font-weight: 600;
  box-shadow: 0 4px 16px #00000044;
}

/* ── Flow grid ────────────────────────────────────────── */
.flow-grid { display: grid; gap: 16px; }

label { display: grid; gap: 6px; }

label > span {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--dim);
}

/* ── Inputs ───────────────────────────────────────────── */
input[type="text"],
.picker-input {
  width: 100%;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #030c1e;
  color: var(--text);
  padding: 0 12px;
  font: inherit;
  font-size: 0.9rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

input[type="text"]:focus,
.picker-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px #4facfe1a;
}

/* ── Picker menu ──────────────────────────────────────── */
.picker-menu {
  border: 1px solid var(--line-bright);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, #07122b, #060e22);
  padding: 10px;
  display: grid;
  gap: 6px;
  box-shadow: 0 12px 32px #00000077;
}

.hidden { display: none !important; }

.dropdown { display: grid; gap: 6px; }

.result-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 12px;
  background: #06112a;
  cursor: pointer;
  font-size: 0.88rem;
  transition: all 150ms ease;
  color: var(--text);
}

.result-item:hover,
.result-item.active {
  border-color: var(--accent);
  background: #0a1d45;
  box-shadow: 0 0 0 1px #4facfe22;
}

.result-item.kbd-active {
  border-color: var(--accent2);
  box-shadow: 0 0 0 2px #00f2fe22;
  background: #0b1e48;
}

/* ── Country chips ────────────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: 7px; }

.chip {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #060e24;
  color: var(--muted);
  padding: 7px 14px;
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  transition: all 160ms ease;
}

.chip:hover { border-color: var(--line-bright); color: var(--text); }

.chip.active {
  border-color: var(--accent);
  background: linear-gradient(135deg, #0c2350, #0d1e42);
  color: #c8e8ff;
  box-shadow: 0 0 0 1px #4facfe22, 0 4px 12px #4facfe22;
}

/* ── Server cards ─────────────────────────────────────── */
.server-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}

.server {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: linear-gradient(150deg, #06112a, #05101f);
  padding: 12px;
  cursor: pointer;
  transition: all 180ms ease;
  position: relative;
  overflow: hidden;
}

.server::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  background: linear-gradient(135deg, #4facfe0d, transparent);
  transition: opacity 0.2s;
  pointer-events: none;
}

.server:hover { border-color: var(--line-bright); transform: translateY(-2px); }
.server:hover::after { opacity: 1; }

.server.active {
  border-color: var(--accent);
  background: linear-gradient(150deg, #0d2252, #0a1b42);
  box-shadow: 0 0 0 1px #4facfe33, 0 8px 24px #4facfe22, inset 0 1px 0 #4facfe22;
}

.server.active::before {
  content: "";
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent2), var(--accent));
}

.server.active::after { opacity: 1; }

.server-cards:has(.server.active) .server:not(.active) { opacity: 0.6; }

.server.disabled { opacity: 0.45; cursor: not-allowed; }

.server-selected-badge {
  position: absolute;
  right: 10px; top: 10px;
  font-size: 0.62rem;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #c8e8ff;
  border: 1px solid var(--accent);
  background: #0a2055;
  border-radius: 999px;
  padding: 2px 8px;
  font-weight: 700;
}

.server-selected-icon {
  position: absolute;
  right: 12px; bottom: 12px;
  width: 18px; height: 18px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 0.65rem;
  color: #030c1e;
  background: linear-gradient(135deg, var(--accent2), var(--accent));
}

.server strong {
  display: block;
  font-size: 0.92rem;
  margin-bottom: 5px;
  color: #ddeeff;
}

.server small {
  display: block;
  color: var(--muted);
  font-size: 0.77rem;
  line-height: 1.4;
}

.server-service-value { font-weight: 600; color: #b8d8ff; }
.server-active-text { color: var(--accent); font-weight: 600; }

.server-inline-status {
  margin-top: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 0.78rem;
  line-height: 1.4;
  border: 1px solid var(--line-bright);
  background: #050e22;
  color: #c8deff;
}
.server-inline-status.success { border-color: #00c9a755; background: var(--good-bg); color: #7fffdf; }
.server-inline-status.warn    { border-color: #ffab4055; background: var(--warn-bg); color: #ffd38a; }
.server-inline-status.error   { border-color: #ff6b8155; background: var(--bad-bg);  color: #ffb3bc; }

.server-reco {
  margin-top: 6px;
  padding: 5px 8px;
  border: 1px solid #00c9a733;
  border-radius: 7px;
  background: #001a15;
  color: #7fffdf;
  font-size: 0.72rem;
  line-height: 1.3;
}

.server-status.integrated { color: var(--good); }
.server-status.pending    { color: var(--warn); }

/* ── Best server hint ─────────────────────────────────── */
.best-server-hint {
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: linear-gradient(140deg, #07122b, #060e22);
  color: #c8deff;
  padding: 10px 12px;
  font-size: 0.8rem;
  line-height: 1.4;
}

.best-server-hint-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}

.best-server-pill {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line-bright);
  background: #071530;
  color: #a8d4ff;
}

.best-server-state {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #060e22;
  color: var(--muted);
}

.best-server-hint-text {
  font-size: 0.86rem;
  font-weight: 600;
  color: #ddeeff;
}

.best-server-hint.ready {
  border-color: #00c9a744;
  background: linear-gradient(140deg, #001a14, #001510);
  color: #7fffdf;
}
.best-server-hint.ready .best-server-pill {
  border-color: #00c9a755; background: #001f18; color: #a0ffe0;
}
.best-server-hint.ready .best-server-state {
  border-color: #00c9a755; background: #001812; color: #a0ffe0;
}

.best-server-hint.loading {
  border-color: var(--line-bright);
  background: linear-gradient(140deg, #07122b, #060e22);
  animation: bestHintPulse 1.5s ease-in-out infinite;
}

.best-server-hint.warn {
  border-color: #ffab4044;
  background: linear-gradient(140deg, #1e1000, #180d00);
  color: #ffd38a;
}
.best-server-hint.warn .best-server-pill {
  border-color: #ffab4055; background: #251400; color: #ffdf99;
}
.best-server-hint.warn .best-server-state {
  border-color: #ffab4055; background: #1e1000; color: #ffd38a;
}

.best-server-hint.neutral .best-server-pill {
  border-color: var(--line-bright); background: #071530;
}

@keyframes bestHintPulse {
  0%, 100% { box-shadow: none; }
  50%       { box-shadow: 0 0 0 3px #4facfe11; }
}

/* ── Hero/server select dropdown ─────────────────────── */
.hero-server-row {
  display: grid;
  gap: 5px;
  margin-top: 8px;
}

.hero-server-row > span {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--dim);
}

.hero-server-select {
  width: 100%;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(160deg, #050e24, #040c1e);
  color: #ddeeff;
  padding: 0 10px;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.hero-server-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px #4facfe1a;
}

.hero-server-select option { background: #08142e; color: #ddeeff; font-size: 14px; }

/* ── Server loading skeleton ──────────────────────────── */
.server-loading {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #050e24;
  padding: 10px;
  display: grid;
  gap: 7px;
}

.skeleton-line {
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #0c1e42 20%, #162f5e 50%, #0c1e42 80%);
  background-size: 200% 100%;
  animation: skeletonPulse 1400ms linear infinite;
}

.skeleton-line.short { width: 55%; }

@keyframes skeletonPulse {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Mobile server picker ─────────────────────────────── */
.mobile-server-picker { display: grid; gap: 7px; }

.mobile-server-open {
  width: 100%;
  min-height: 52px;
  border: 1px solid var(--line-bright);
  border-radius: var(--radius-sm);
  background: linear-gradient(145deg, #08142e, #0b1a3c);
  color: #ddeeff;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  text-align: left;
  padding: 10px 14px;
  cursor: pointer;
  display: grid;
  gap: 2px;
  position: relative;
  transition: border-color 0.2s;
}

.mobile-server-open:hover { border-color: var(--accent); }

.mobile-server-open-main { font-size: 0.95rem; font-weight: 700; color: #ddeeff; line-height: 1.2; }
.mobile-server-open-meta { font-size: 0.72rem; color: var(--muted); font-weight: 500; }
.mobile-server-open-arrow {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  font-size: 0.85rem; color: var(--accent);
}

.mobile-server-hint { font-size: 0.72rem; color: var(--muted); padding-left: 2px; }

.mobile-server-list {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #050e24;
  padding: 6px;
  display: grid;
  gap: 5px;
  max-height: 260px;
  overflow: auto;
  scroll-snap-type: y proximity;
}

.mobile-server-option {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #07122b;
  color: #c8deff;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  text-align: left;
  padding: 8px 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  scroll-snap-align: start;
  transition: all 0.15s;
}

.mobile-server-option:hover { border-color: var(--line-bright); background: #0a1840; }

.mobile-server-option-text { display: block; line-height: 1.25; }

.mobile-server-option-check {
  flex: 0 0 auto;
  font-size: 0.68rem;
  color: #c8e8ff;
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 2px 7px;
  background: #0a2055;
}

.mobile-server-option.active {
  border-color: var(--accent);
  background: linear-gradient(145deg, #0c2050, #0a1840);
  color: #ddeeff;
  box-shadow: 0 0 0 1px #4facfe22;
}

.mobile-server-empty {
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  padding: 8px 10px;
  font-size: 0.82rem;
}

/* ── Actions row ──────────────────────────────────────── */
.actions-row {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

/* ── Buttons ──────────────────────────────────────────── */
.btn {
  border: 0;
  border-radius: var(--radius-sm);
  height: 40px;
  padding: 0 16px;
  color: #fff;
  font: inherit;
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease, opacity 150ms ease, filter 150ms ease;
  position: relative;
  overflow: hidden;
}

.btn.primary {
  background: linear-gradient(135deg, #1a7fff, #0055dd);
  box-shadow: 0 4px 16px #1a7fff44, inset 0 1px 0 #ffffff22;
}

.btn.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px #1a7fff55, inset 0 1px 0 #ffffff33;
  filter: brightness(1.1);
}

.btn.ghost {
  background: #07112a;
  border: 1px solid var(--line);
  color: var(--muted);
}

.btn.ghost:hover {
  border-color: var(--line-bright);
  color: var(--text);
  transform: translateY(-1px);
}

.btn.small { height: 30px; font-size: 0.75rem; padding: 0 10px; }

.btn:active { transform: translateY(0) !important; filter: brightness(0.95); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none !important; }

.mobile-inline-buy { margin-top: 10px; }

/* ── Order meta ───────────────────────────────────────── */
.order-meta {
  margin-top: 12px;
  font-size: 0.82rem;
  color: var(--muted);
  display: grid;
  gap: 5px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #050e24;
}

.order-meta strong { color: var(--dim); font-weight: 600; }

/* ── OTP feed ─────────────────────────────────────────── */
.otp-feed { display: grid; gap: 10px; }

.otp-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px;
  background: linear-gradient(160deg, #07112a, #060d22);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.otp-item:hover { border-color: var(--line-bright); }

.otp-title-row {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #c8deff;
}

.otp-title-row strong { color: #ddeeff; }
.otp-title-row span { color: var(--muted); font-size: 0.82rem; }

.otp-number-row {
  margin-top: 5px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.otp-number-text {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.82rem;
  color: var(--muted);
}

.otp-main-row {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.otp-meta-row { margin-top: 6px; }

.otp-code-row {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.otp-code-row.live  { margin-top: 0; }
.otp-code-row.compact { margin-top: 0; }

.otp-code-box {
  border: 1px solid var(--line-bright);
  border-radius: var(--radius-sm);
  background: linear-gradient(145deg, #07122b, #060e22);
  padding: 8px 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  box-shadow: inset 0 1px 0 #ffffff0d;
}

.otp-code-box.waiting {
  border-color: #ffab4055;
  background: linear-gradient(145deg, #1a0f00, #150c00);
}

.otp-code-box.done {
  border-color: #4facfe55;
  background: linear-gradient(145deg, #071a3a, #06162e);
  box-shadow: 0 0 0 1px #4facfe11, inset 0 1px 0 #4facfe11;
}

.otp-code-box.compact { padding: 4px 10px; border-radius: 8px; min-width: 72px; }

.otp-code-value {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.otp-code-box.waiting .otp-code-value {
  background: none;
  -webkit-text-fill-color: var(--warn);
  letter-spacing: 1px;
}

.otp-code-box.compact .otp-code-value { font-size: 0.88rem; letter-spacing: 1.5px; }

.otp-copy-btn { flex: 0 0 auto; }

.otp-waiting-label {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--warn);
  padding: 3px 9px;
  border: 1px solid #ffab4033;
  border-radius: 999px;
  background: #1a0f00;
}

.otp-waiting-label.compact { margin-top: 0; font-size: 0.74rem; }

.otp-row {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.otp-timer { font-size: 0.76rem; color: var(--dim); }

/* ── Copy inline button ───────────────────────────────── */
.copy-btn-inline {
  width: 26px; height: 26px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #07112a;
  color: var(--muted);
  font-size: 0.78rem;
  cursor: pointer;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  flex-shrink: 0;
}

.copy-btn-inline:hover { border-color: var(--accent); color: var(--accent); background: #0a1d45; }

/* ── Focus styles ─────────────────────────────────────── */
button:focus-visible,
input:focus-visible,
select:focus-visible,
.chip:focus-visible,
.mobile-server-option:focus-visible,
.mobile-server-open:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px #4facfe1a;
}

.balance-select option,
.hero-server-select option { background: #07112a; color: #ddeeff; }

/* ── Toast notifications ──────────────────────────────── */
.toast-stack {
  position: fixed;
  right: 16px; top: 16px;
  z-index: 60;
  display: grid;
  gap: 8px;
  width: min(380px, 94vw);
}

.toast {
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-bright);
  background: linear-gradient(160deg, #07112a, #060e22);
  color: var(--text);
  padding: 11px 14px;
  box-shadow: 0 8px 28px #00000077, 0 0 0 1px #0a1e4a44;
  font-size: 0.85rem;
  font-weight: 500;
  animation: toastIn 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
  backdrop-filter: blur(12px);
}

.toast-msg { display: inline-block; }

.toast-action {
  margin-left: 8px;
  border: 1px solid var(--accent);
  border-radius: 7px;
  background: #0a2055;
  color: #c8e8ff;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 8px;
  cursor: pointer;
  transition: all 0.15s;
}

.toast-action:hover { background: #0d2a6a; }

.toast.success { border-color: #00c9a755; background: linear-gradient(160deg, #001a14, #001410); }
.toast.warn    { border-color: #ffab4055; background: linear-gradient(160deg, #1e1000, #180d00); }
.toast.error   { border-color: #ff6b8155; background: linear-gradient(160deg, #1e0610, #18050d); }

.toast.success::before { content: "✓"; display: inline-block; margin-right: 7px; font-weight: 700; color: var(--good); }
.toast.warn::before    { content: "!"; display: inline-block; margin-right: 7px; font-weight: 700; color: var(--warn); }
.toast.error::before   { content: "✕"; display: inline-block; margin-right: 7px; font-weight: 700; color: var(--bad); }

.toast.hide { opacity: 0; transform: translateY(-8px); transition: all 220ms ease; }

@keyframes toastIn {
  from { opacity: 0; transform: translateY(-12px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Orders table ─────────────────────────────────────── */
.table-panel { grid-column: 1 / -1; }

.table-wrap {
  overflow: auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: #04091a;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 860px;
}

th, td {
  text-align: left;
  padding: 11px 12px;
  border-bottom: 1px solid #0d1e3a;
  font-size: 0.82rem;
  white-space: nowrap;
}

th {
  color: var(--accent);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background: #06102a;
  position: sticky;
  top: 0;
}

tr:last-child td { border-bottom: 0; }
tr:nth-child(even) td { background: #050f28; }
tr:hover td { background: #07122b; }

tr.linked td { background: #0d2050; }

.otp-item.linked {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px #4facfe33;
}

/* ── Status badges ────────────────────────────────────── */
.badge {
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.badge.waiting  { background: var(--warn-bg); color: var(--warn); border: 1px solid #ffab4033; }
.badge.done     { background: var(--good-bg); color: var(--good); border: 1px solid #00c9a733; }
.badge.cancelled { background: var(--bad-bg);  color: var(--bad);  border: 1px solid #ff6b8133; }

/* ── Stats strip ──────────────────────────────────────── */
.stats-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

.stats-strip article {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #06102a;
  padding: 10px;
}

.stats-strip small { color: var(--muted); display: block; font-size: 0.72rem; margin-bottom: 3px; }
.stats-strip strong { font-size: 1.08rem; color: #c8deff; }

.tiny-note { color: var(--dim); font-size: 0.73rem; margin-top: 12px; }

/* ── Health badges ────────────────────────────────────── */
.health { font-size: 0.72rem; padding: 2px 8px; border-radius: 999px; }
.health.good { background: var(--good-bg); color: var(--good); }
.health.warn { background: var(--warn-bg); color: var(--warn); }
.health.bad  { background: var(--bad-bg);  color: var(--bad); }

/* ── Provider cards ───────────────────────────────────── */
.providers-list { display: grid; gap: 10px; }

.provider {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px;
  background: #06102a;
  transition: transform 180ms ease, border-color 180ms ease;
}
.provider:hover { transform: translateY(-2px); border-color: var(--line-bright); }

.provider-top, .provider-bottom, .provider-balance {
  display: flex; justify-content: space-between; align-items: center;
}
.provider-name  { font-weight: 600; font-size: 0.9rem; }
.provider-balance { margin-top: 7px; font-size: 0.78rem; }

/* ── Picker button ────────────────────────────────────── */
.picker-btn {
  width: 100%; height: 42px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #030c1e;
  color: var(--text);
  text-align: left;
  padding: 0 12px;
  font-weight: 500;
  font: inherit;
  cursor: pointer;
  transition: border-color 0.2s;
}
.picker-btn:hover { border-color: var(--line-bright); }

/* ── Empty states ─────────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 32px 16px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  background: #04091a;
  color: var(--muted);
  font-size: 0.86rem;
  text-align: center;
  line-height: 1.5;
}

.empty-state small { color: var(--dim); font-size: 0.76rem; }
.empty-state-icon { font-size: 1.8rem; line-height: 1; opacity: 0.6; }

.empty-table-cell {
  text-align: center !important;
  color: var(--muted);
  padding: 24px 10px !important;
  font-size: 0.83rem;
}

/* ── Copy flash ───────────────────────────────────────── */
.copy-btn-inline.copy-flash {
  color: var(--good);
  border-color: var(--good);
  background: var(--good-bg);
}

/* ── Server tag labels ────────────────────────────────── */
.otp-server-tag, .order-server-tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #a8d4ff;
  background: #071530;
  border: 1px solid var(--line-bright);
  border-radius: 999px;
  padding: 1px 7px;
}
.otp-server-tag { vertical-align: middle; }
.order-server-tag { margin-top: 3px; }

/* ── Multi-OTP badge ──────────────────────────────────── */
.otp-index-badge {
  font-size: 0.64rem;
  font-weight: 700;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 6px;
  background: #060e24;
  flex-shrink: 0;
}

/* ── Picker keyboard hint ─────────────────────────────── */
.picker-kbd-hint {
  margin-top: 5px;
  font-size: 0.69rem;
  color: var(--dim);
  text-align: center;
  letter-spacing: 0.2px;
}

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 1200px) {
  .layout {
    grid-template-columns: 1fr;
    width: 100%;
    padding: 0 10px;
  }

  .order-panel   { order: 1; }
  .otp-panel     { order: 2; }
  .providers-panel { order: 3; }
  .table-panel   { order: 4; grid-column: auto; }

  .stats-strip { grid-template-columns: 1fr; }
  .providers-panel, .otp-panel { position: static; }
  .balance-toolbar { grid-template-columns: 1fr; gap: 8px; }
  .balance-select, #checkBalanceBtn { width: 100%; min-width: 0; }
  .mobile-balance-bar { display: none !important; }
}

@media (max-width: 1024px) {
  .layout { margin: 14px auto; gap: 12px; }
  .panel { padding: 14px; }
  .server-cards { grid-template-columns: 1fr; }
  .server-selected-badge { position: static; display: inline-flex; margin-bottom: 8px; }
  .server-selected-icon { display: none; }
}

@media (max-width: 768px) {
  body { overflow-y: auto; overscroll-behavior-y: auto; }

  .layout {
    width: 100%;
    margin: 10px auto 20px;
    padding: 0 8px calc(110px + env(safe-area-inset-bottom));
    gap: 10px;
  }

  .brand-bar { margin-top: 10px; }

  .panel { padding: 12px; border-radius: var(--radius-sm); }

  .panel-head { gap: 8px; flex-wrap: wrap; }

  h1 { font-size: 1.08rem; }
  h2 { font-size: 0.9rem; }

  .api-key-row { display: none; }
  .balance-toolbar { grid-template-columns: 1fr; gap: 8px; }
  .balance-select { width: 100%; min-width: 0; min-height: 50px; font-size: 16px; }
  #checkBalanceBtn { width: 100%; }

  .stats-strip { grid-template-columns: repeat(2, 1fr); }

  .actions-row { display: none !important; }
  #buyBtn { display: none !important; }

  .mobile-inline-buy { min-height: 50px; font-size: 1rem; font-weight: 700; }

  .picker-input,
  input[type="text"] { min-height: 50px; font-size: 16px; }

  .chip, .result-item { min-height: 46px; display: flex; align-items: center; }

  .copy-btn-inline { width: 44px; height: 44px; font-size: 1rem; border-radius: var(--radius-sm); }

  .server-cards { grid-template-columns: 1fr; gap: 8px; }

  .otp-feed { gap: 8px; }
  .otp-item { padding: 10px; }
  .otp-title-row { font-size: 0.9rem; }
  .otp-code-value { font-size: 0.95rem; letter-spacing: 1.5px; }

  .result-item, .provider, .otp-item { overflow: hidden; }

  .hero-server-select { max-width: 100%; min-height: 50px; font-size: 16px; padding: 0 14px; }

  .provider:hover, .server:hover { transform: none; }

  th, td { font-size: 0.78rem; padding: 9px 8px; }
}

@media (min-width: 769px) {
  .toast-stack { top: auto; bottom: 20px; right: 20px; }
}

@media (min-width: 1025px) {
  .server { padding: 10px 12px; }
  .server strong { margin-bottom: 4px; }
  .server small { line-height: 1.3; }

  .actions-row {
    position: sticky;
    top: 10px;
    z-index: 4;
    padding: 8px 10px;
    border: 1px solid var(--line-bright);
    border-radius: var(--radius-sm);
    background: linear-gradient(145deg, #07122be0, #0a1a3ae0);
    backdrop-filter: blur(10px);
  }
}

@media (min-width: 1500px) {
  .layout {
    width: min(1840px, calc(100vw - 28px));
    grid-template-columns: 340px minmax(0, 1fr) 380px;
    gap: 18px;
  }
}

@media (max-width: 560px) {
  .orb { display: none; }
  .brand-chip { width: 100%; text-align: center; font-size: 0.82rem; }
  .brand-bar, .layout { padding-left: 8px; padding-right: 8px; }
  .stats-strip { grid-template-columns: 1fr; }
  .chip { width: 100%; border-radius: var(--radius-sm); text-align: left; }
  .result-item, .server, .provider { border-radius: var(--radius-sm); }
  .server { padding: 9px; }
  .server small { font-size: 0.72rem; line-height: 1.25; }
  .server strong { font-size: 0.88rem; margin-bottom: 4px; }
  .server-active-text { display: none; }
  .server-selected-badge { font-size: 0.6rem; padding: 2px 7px; }
  .otp-code-value { font-size: 0.9rem; letter-spacing: 1px; }
}