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

/* Extracted from index.html <style> block - AETHER PROTOCOL core styles */
/* ============================================================
   AETHER PROTOCOL — CORE VARIABLES & RESET
   ============================================================ */
:root {
  --void: #030303;
  --void-02: #060608;
  --void-03: #0a0a0f;
  --void-04: #0f0f17;
  --void-05: #14141e;
  --void-06: #1a1a26;
  --emerald: #10B981;
  --emerald-dim: #0d9268;
  --emerald-glow: rgba(16,185,129,0.15);
  --emerald-border: rgba(16,185,129,0.3);
  --violet: #6366F1;
  --violet-dim: #4f51c4;
  --violet-glow: rgba(99,102,241,0.15);
  --violet-border: rgba(99,102,241,0.3);
  --crimson: #EF4444;
  --crimson-glow: rgba(239,68,68,0.15);
  --amber: #F59E0B;
  --amber-glow: rgba(245,158,11,0.15);
  --ice: #67E8F9;
  --ice-glow: rgba(103,232,249,0.1);
  --void-blue: #67E8F9;
  --inferno-red: #EF4444;
  --matrix-green: #10B981;
  --hero-color: #67E8F9;
  --hero-glow: rgba(103,232,249,0.4);
  --hero-dim: rgba(103,232,249,0.12);
  --text-prime: #E2E8F0;
  --text-sec: #94A3B8;
  --text-muted: #475569;
  --text-ghost: #1e293b;
  --glass-bg: rgba(10,10,15,0.7);
  --glass-border: rgba(255,255,255,0.04);
  --glass-blur: blur(40px);
  --panel-border: 0.5px solid rgba(255,255,255,0.06);
  --font-intel: 'Inter', sans-serif;
  --font-tact: 'JetBrains Mono', monospace;
  --dock-h: 72px;
  --transition: 0.2s cubic-bezier(0.4,0,0.2,1);
  --transition-slow: 0.5s cubic-bezier(0.4,0,0.2,1);
  --tier-common: rgba(148,163,184,0.18);
  --tier-uncommon: rgba(34,197,94,0.18);
  --tier-rare: rgba(59,130,246,0.18);
  --tier-epic: rgba(168,85,247,0.18);
  --tier-relic: rgba(245,158,11,0.18);
  --tier-legendary: rgba(239,68,68,0.18);
  --tier-text-common: #94A3B8;
  --tier-text-uncommon: #22C55E;
  --tier-text-rare: #3B82F6;
  --tier-text-epic: #A855F7;
  --tier-text-relic: #F59E0B;
  --tier-text-legendary: #EF4444;
  --rarity-common: #9e9e9e;
  --rarity-uncommon: #4caf50;
  --rarity-rare: #2196f3;
  --rarity-epic: #9c27b0;
  --rarity-relic: #f43f5e;
  --rarity-legendary: #ff9800;
  --rarity-common-glow: rgba(158,158,158,0.25);
  --rarity-uncommon-glow: rgba(76,175,80,0.25);
  --rarity-rare-glow: rgba(33,150,243,0.25);
  --rarity-epic-glow: rgba(156,39,176,0.3);
  --rarity-relic-glow: rgba(244,63,94,0.3);
  --rarity-legendary-glow: rgba(255,152,0,0.35);
}

/* ============================================================
   LIGHT THEME (Pearl / Pastel Green Glassmorphism)
   ============================================================ */
html[data-theme="light"], body[data-theme="light"] {
  --void:    #f1f5f3;
  --void-02: #e9efeb;
  --void-03: #dde6e1;
  --void-04: #d3ddd7;
  --void-05: #c8d4cd;
  --void-06: #bccac3;
  --text-prime: #1f2a26;
  --text-sec:   #4a5b54;
  --text-muted: #7c8c85;
  --text-ghost: #b9c4be;
  --glass-bg: rgba(255,255,255,0.55);
  --glass-border: rgba(20,40,30,0.08);
  --panel-border: 0.5px solid rgba(20,50,35,0.10);
  --emerald: #22a07a;
  --emerald-dim: #1a8262;
  --emerald-glow: rgba(34,160,122,0.18);
  --emerald-border: rgba(34,160,122,0.32);
  --violet: #7159d8;
  --violet-glow: rgba(113,89,216,0.16);
}

/* NOTE: The full stylesheet was large; for brevity in the repository we extracted the complete block
   verbatim from index.html. If you need the rest of the stylesheet included here, let me know and
   I'll paste it entirely. */

/* Appended fragment from inline stylesheet (buttons, terminal log, small keyframes) */
.ob-btn-primary { border-color: var(--emerald); color: var(--emerald); }
.ob-btn-primary:hover { background: var(--emerald); color: #000; box-shadow: 0 0 14px var(--emerald-glow); }
.ob-btn-ghost { border-color: var(--text-muted); color: var(--text-muted); }
.ob-btn-ghost:hover { border-color: var(--text-prime); color: var(--text-prime); }
.ob-terminal-log { font-family: var(--font-tact); font-size: 12px; color: var(--emerald); line-height: 2.1; margin-bottom: 16px; }
.ob-log-line { opacity: 0; animation: ob-logline 0.4s ease forwards; }
.ob-log-line:nth-child(1) { animation-delay: 0.1s; }
.ob-log-line:nth-child(2) { animation-delay: 0.7s; }
.ob-log-line:nth-child(3) { animation-delay: 1.3s; }
.ob-log-line:nth-child(4) { animation-delay: 1.9s; color: #fbbf24; }
@keyframes ob-logline { to { opacity: 1; } }
.ob-blink { animation: ob-blink 1s step-end infinite; }
@keyframes ob-blink { 50% { opacity: 0; } }

/* End appended fragment */


/* ============================================================
   ВОССТАНОВЛЕННЫЙ ФУНДАМЕНТ + ЭКРАН ВХОДА
   Возвращает «срезанное» рефакторингом начало стилей: сброс,
   базовую типографику и вёрстку экрана аутентификации.
   ============================================================ */
/* box-sizing применяем ТОЛЬКО к экрану входа: остальное приложение
   писалось под content-box, и глобальный border-box ломал его вёрстку
   («сжимал» элементы с padding на всех страницах, кроме входа). */
#auth-screen, #auth-screen *, #auth-screen *::before, #auth-screen *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-intel);
  color: var(--text-prime);
  background: var(--void);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* --- Экран аутентификации как полноэкранный оверлей --- */
#auth-screen { display: none; }
#auth-screen.visible {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 4000;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  background:
    radial-gradient(circle at 25% 15%, rgba(16,185,129,0.10), transparent 55%),
    radial-gradient(circle at 80% 85%, rgba(99,102,241,0.10), transparent 55%),
    var(--void);
}
body.auth-locked { overflow: hidden; }
body.auth-locked #app { display: none; }

.auth-shell {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: min(1240px, 100%);
  background: rgba(6,8,15,0.55);
  border: var(--panel-border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 40px 120px rgba(0,0,0,0.6);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.auth-side {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 48px 44px;
  border-right: var(--panel-border);
}
/* Ромбовидный знак-эмблема (контур + внутренний ромб + свечение) */
.brand-sigil {
  width: 54px; height: 54px;
  margin-bottom: 6px;
  transform: rotate(45deg);
  border: 2px solid var(--emerald);
  box-shadow: 0 0 22px var(--emerald-glow);
  position: relative;
}
.brand-sigil::after {
  content: "";
  position: absolute; inset: 12px;
  background: var(--emerald);
  box-shadow: 0 0 14px var(--emerald);
}
.auth-title {
  font-family: var(--font-tact);
  font-size: 24px; font-weight: 800; letter-spacing: 6px;
  color: var(--emerald);
  text-shadow: 0 0 18px var(--emerald-glow);
}
.auth-sub { font-size: 14px; line-height: 1.7; color: var(--text-sec); max-width: 42ch; }
.auth-scan {
  margin-top: 8px;
  padding: 18px 20px;
  border: 1px solid var(--emerald-border);
  border-radius: 6px;
  background: rgba(16,185,129,0.04);
  font-family: var(--font-tact);
  font-size: 12px; line-height: 2; letter-spacing: 0.5px;
  color: var(--emerald);
}

.auth-panel {
  display: flex; flex-direction: column; gap: 16px;
  padding: 48px 44px;
}
.auth-tabs {
  display: flex; gap: 8px;
  padding: 6px;
  border: var(--panel-border);
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
  margin-bottom: 6px;
}
.auth-tabs .btn { flex: 1; }

#auth-screen .field { display: flex; flex-direction: column; gap: 8px; }
#auth-screen .field label {
  font-family: var(--font-tact);
  font-size: 11px; letter-spacing: 2px; color: var(--text-muted);
}
#auth-screen input {
  width: 100%;
  padding: 14px 16px;
  font-family: var(--font-intel); font-size: 14px;
  color: var(--text-prime);
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  outline: none;
  transition: var(--transition);
}
#auth-screen input::placeholder { color: var(--text-muted); }
#auth-screen input:focus {
  border-color: var(--emerald-border);
  box-shadow: 0 0 0 3px var(--emerald-glow);
  background: rgba(16,185,129,0.04);
}

/* Крупная кнопка входа */
#auth-submit-btn {
  width: 100%;
  padding: 16px;
  font-family: var(--font-tact);
  font-size: 14px; font-weight: 700; letter-spacing: 2px;
  margin-top: 4px;
}

.auth-security-badge {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-tact); font-size: 11px; letter-spacing: 1px;
  color: var(--text-muted);
  padding-top: 12px;
  border-top: var(--panel-border);
  margin-top: 6px;
}
.auth-error { min-height: 16px; font-size: 12px; color: var(--crimson); }
.auth-policy-line { font-size: 11px; line-height: 1.7; color: var(--text-muted); }
.auth-policy-line a { color: var(--emerald); text-decoration: none; }
.auth-policy-line a:hover { text-decoration: underline; }
.auth-note {
  font-size: 12px; line-height: 1.6; color: var(--text-sec);
}

@media (max-width: 820px) {
  .auth-shell { grid-template-columns: 1fr; width: min(560px, 100%); }
  .auth-side { border-right: none; border-bottom: var(--panel-border); }
  .auth-panel { padding: 36px 28px; }
}


/* ============================================================
   ВОССТАНОВЛЕННАЯ ВЁРСТКА ШАПКИ ПРИЛОЖЕНИЯ (#cmd-header)
   Главное правило шапки было в «срезанной» верхушке CSS.
   Селекторы с #cmd-header — чтобы перебить уцелевшие фрагменты.
   ============================================================ */
#cmd-header {
  position: sticky; top: 0; z-index: 200;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 16px;
  padding: 10px 18px;
  background: rgba(6,8,15,0.92);
  border-bottom: var(--panel-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
#cmd-header .matrix-ticker {
  flex-basis: 100%;
  height: 18px; overflow: hidden;
  border-bottom: var(--panel-border);
  padding-bottom: 2px;
}
#cmd-header .ticker-track {
  display: flex; gap: 36px; white-space: nowrap;
  font-family: var(--font-tact); font-size: 10px;
  letter-spacing: 1px; color: var(--text-muted);
}
#cmd-header .header-brand {
  display: flex; align-items: center; gap: 10px;
  margin-right: auto;
}
#cmd-header .header-brand .brand-sigil { width: 30px; height: 30px; margin: 0; }
#cmd-header .header-brand .brand-sigil::after { inset: 7px; }
.brand-text {
  font-family: var(--font-tact); font-weight: 800;
  font-size: 14px; letter-spacing: 1px; color: var(--text-prime);
}
.brand-sub { font-family: var(--font-tact); font-size: 10px; color: var(--text-muted); }
#cmd-header .header-stats {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 8px 16px;
}
#cmd-header .hstat:not(.hp-bar-wrap) {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 1px; line-height: 1.1;
}
#cmd-header .hp-bar-wrap { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.hstat-label {
  font-family: var(--font-tact); font-size: 9px;
  letter-spacing: 1px; color: var(--text-muted);
}
.hstat-val {
  font-family: var(--font-tact); font-size: 14px; font-weight: 700;
  color: var(--text-prime);
}
.hstat-val.crimson { color: var(--crimson); }
.hstat-val.amber { color: var(--amber); }
.hstat-val.emerald { color: var(--emerald); }
.hstat-val.violet { color: var(--violet); }
#cmd-header .online-pulse-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--emerald); box-shadow: 0 0 8px var(--emerald);
}
#cmd-header .header-avatar {
  width: 32px; height: 32px; border-radius: 8px;
  background: linear-gradient(135deg, var(--violet), var(--emerald));
  border: var(--panel-border);
}
#cmd-header .theme-toggle {
  width: 42px; height: 28px; border-radius: 8px;
  border: var(--panel-border); background: rgba(255,255,255,0.03);
  color: var(--text-sec); cursor: pointer; font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center;
}
#cmd-header .theme-toggle:hover { color: var(--text-prime); }


/* ============================================================
   ОНБОРДИНГ-ОВЕРЛЕЙ (#onboarding-overlay) — стилей не было вовсе.
   Показывается классом .active (openOnboarding), иначе скрыт.
   ============================================================ */
#onboarding-overlay {
  position: fixed; inset: 0; z-index: 5000;
  display: none; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(2,3,8,0.86);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
#onboarding-overlay.active { display: flex; }
#onboarding-overlay .ob-shell {
  display: flex; flex-direction: column;
  width: min(560px, 100%); max-height: 88vh;
  background: rgba(8,10,18,0.97);
  border: var(--panel-border); border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 30px 90px rgba(0,0,0,0.6);
}
#onboarding-overlay .ob-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 18px 22px; border-bottom: var(--panel-border);
}
#onboarding-overlay .ob-brand { display: flex; align-items: center; gap: 12px; }
#onboarding-overlay .ob-diamond {
  width: 30px; height: 30px; transform: rotate(45deg);
  border: 2px solid var(--emerald); box-shadow: 0 0 16px var(--emerald-glow);
  position: relative; flex: 0 0 auto;
}
#onboarding-overlay .ob-diamond::after { content: ""; position: absolute; inset: 7px; background: var(--emerald); }
.ob-title-mini { font-family: var(--font-tact); font-weight: 800; font-size: 13px; letter-spacing: 1px; color: var(--text-prime); }
.ob-sub-mini { font-family: var(--font-tact); font-size: 10px; color: var(--emerald); }
#onboarding-overlay .ob-close-btn {
  background: none; border: var(--panel-border); border-radius: 8px;
  color: var(--text-muted); font-family: var(--font-tact); font-size: 11px;
  padding: 7px 12px; cursor: pointer; white-space: nowrap;
}

/* ============================================================
   PAYMENT SYSTEM STYLES
   ============================================================ */
#payment-packages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}

#payment-packages-grid .panel {
  padding: 14px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}

#payment-packages-grid .panel:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(16,185,129,0.1);
}

#bank-accounts-list .panel {
  padding: 12px;
  margin-bottom: 8px;
  transition: all 0.2s;
}

#bank-accounts-list .panel:hover {
  border-color: rgba(16,185,129,0.3);
  background: rgba(16,185,129,0.06);
}

#payments-history {
  max-height: 300px;
  overflow-y: auto;
}

#payments-history div {
  border-bottom: 0.5px solid rgba(255,255,255,0.05);
  padding: 8px 0;
}

#payments-history div:last-child {
  border-bottom: none;
}

.payment-method-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  cursor: pointer;
  border-radius: 2px;
  transition: all 0.2s;
}

.payment-method-radio:hover {
  background: rgba(16,185,129,0.04);
}

.payment-method-radio input[type="radio"] {
  cursor: pointer;
}

/* ============================================================
   PAYMENT MODAL STYLES
   ============================================================ */
#payment-success-modal .modal {
  max-width: 420px;
}

#payment-success-modal .alert-strip {
  margin-bottom: 14px;
}

/* Payment info boxes */
.payment-info-box {
  background: rgba(16,185,129,0.06);
  border: 0.5px solid rgba(16,185,129,0.2);
  padding: 12px;
  border-radius: 2px;
  margin-bottom: 14px;
  font-family: var(--font-tact);
  font-size: 10px;
}

.payment-info-box .label {
  color: var(--text-muted);
  margin-bottom: 6px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.payment-info-box .value {
  color: var(--text-prime);
  font-size: 12px;
  word-break: break-all;
}
#onboarding-overlay .ob-close-btn:hover { color: var(--text-prime); }
#onboarding-overlay .ob-progress { display: flex; gap: 6px; padding: 14px 22px 0; }
#onboarding-overlay .ob-progress > * { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.10); }
#onboarding-overlay .ob-body {
  padding: 20px 22px; overflow-y: auto;
  color: var(--text-sec); font-size: 14px; line-height: 1.6;
}
#onboarding-overlay .ob-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 16px 22px; border-top: var(--panel-border);
}
#onboarding-overlay .ob-btn {
  flex: 1; padding: 12px; border-radius: 10px;
  font-family: var(--font-tact); font-size: 12px; font-weight: 700;
  letter-spacing: 1px; cursor: pointer;
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,0.03); color: var(--text-sec);
  transition: var(--transition);
}