/* ============================================================
   MoonServ — Modern White Theme v4
   Plus Jakarta Sans + JetBrains Mono • Light UI
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  --bg:#f8f9fb; --bg2:#f0f2f5; --card:#ffffff; --card2:#fafbfc;
  --glass:rgba(255,255,255,.82); --glass2:rgba(255,255,255,.92);
  --bdr:rgba(0,0,0,.06); --bdr2:rgba(0,0,0,.10); --bdrg:rgba(99,102,241,.2);
  --tx:#111827; --tx2:#4b5563; --tx3:#9ca3af;
  --ac:#6366f1; --ac2:#4f46e5; --ac3:#818cf8;
  --acbg:rgba(99,102,241,.06); --acg:rgba(99,102,241,.2);
  --gr:#10b981; --grbg:rgba(16,185,129,.08); --grg:rgba(16,185,129,.3);
  --rd:#ef4444; --rdbg:rgba(239,68,68,.06);
  --or:#f59e0b; --orbg:rgba(245,158,11,.08);
  --cy:#06b6d4; --cybg:rgba(6,182,212,.06);
  --pu:#8b5cf6;
  --font:'Plus Jakarta Sans',sans-serif; --mono:'JetBrains Mono',monospace;
  --r:12px; --rl:16px; --rx:24px;
  --shadow:0 1px 3px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.04);
  --shadow-md:0 4px 20px rgba(0,0,0,.06);
  --shadow-lg:0 8px 40px rgba(0,0,0,.08);
}

/* Dark theme disabled — light only */
[data-theme="dark"], [data-theme="light"] {
  --bg:#f8f9fb; --bg2:#f0f2f5; --card:#ffffff; --card2:#fafbfc;
  --glass:rgba(255,255,255,.82); --glass2:rgba(255,255,255,.92);
  --bdr:rgba(0,0,0,.06); --bdr2:rgba(0,0,0,.10); --bdrg:rgba(99,102,241,.2);
  --tx:#111827; --tx2:#4b5563; --tx3:#9ca3af;
  --ac:#6366f1; --ac2:#4f46e5; --ac3:#818cf8;
  --acbg:rgba(99,102,241,.06); --acg:rgba(99,102,241,.2);
  --grbg:rgba(16,185,129,.08); --rdbg:rgba(239,68,68,.06); --orbg:rgba(245,158,11,.08);
}

:root {
  --bg-body:var(--bg); --bg-card:var(--card); --bg-card-2:var(--card2);
  --bg-nav:var(--glass2); --bg-input:var(--bg2);
  --border:var(--bdr); --border-hover:var(--bdr2);
  --text:var(--tx); --text-2:var(--tx2); --text-3:var(--tx3);
  --accent:var(--ac); --accent-2:var(--ac2); --accent-bg:var(--acbg);
  --green:var(--gr); --green-bg:var(--grbg);
  --red:var(--rd); --red-bg:var(--rdbg);
  --orange:var(--or); --orange-bg:var(--orbg);
  --purple:var(--pu);
  --radius:var(--r); --radius-lg:var(--rl);
}

* { margin:0; padding:0; box-sizing:border-box; }
body { color:var(--tx); font-family:var(--font); -webkit-font-smoothing:antialiased; line-height:1.6; background:var(--bg); min-height:100vh; }
a { color:var(--ac); text-decoration:none; transition:color .2s; }
a:hover { color:var(--ac2); }
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--tx3); border-radius:3px; }

.ico { display:inline-block; vertical-align:middle; flex-shrink:0; }
.feature-icon .ico { color:var(--ac); }

/* ═══ ANIMATIONS ═══ */
@keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes scaleIn { from{opacity:0;transform:scale(.94)} to{opacity:1;transform:scale(1)} }
@keyframes slideDown { from{opacity:0;transform:translateY(-12px)} to{opacity:1;transform:translateY(0)} }
@keyframes pulseGlow { 0%,100%{box-shadow:0 0 4px var(--grg)} 50%{box-shadow:0 0 12px var(--grg)} }
@keyframes gradShift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes spin { to{transform:rotate(360deg)} }
@keyframes toastIn { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
.anim-up { animation:fadeUp .5s ease both; }
.anim-up.d1{animation-delay:.06s} .anim-up.d2{animation-delay:.12s} .anim-up.d3{animation-delay:.18s} .anim-up.d4{animation-delay:.24s}

/* ═══ BUTTONS ═══ */
.btn { display:inline-flex; align-items:center; gap:8px; padding:11px 24px; border-radius:var(--r); font-family:var(--font); font-size:14px; font-weight:700; cursor:pointer; border:none; transition:all .2s; text-decoration:none; white-space:nowrap; }
.btn-primary { background:#6366f1; color:#fff; box-shadow:0 2px 8px rgba(99,102,241,.2); }
.btn-primary:hover { background:#818cf8; transform:translateY(-2px); box-shadow:0 8px 24px rgba(99,102,241,.3); }
.btn-outline { background:#fff; color:#111827; border:2px solid #d1d5db; }
.btn-outline:hover { border-color:#818cf8; color:#6366f1; background:#eef2ff; transform:translateY(-1px); box-shadow:0 4px 12px rgba(99,102,241,.1); }
.btn-ghost { background:#f0f2f5; color:#4b5563; border:1px solid #e5e7eb; }
.btn-ghost:hover { background:#e5e7eb; color:#111827; }
.btn-danger { background:#ef4444; color:#fff; box-shadow:0 2px 8px rgba(239,68,68,.2); }
.btn-danger:hover { background:#f87171; transform:translateY(-1px); box-shadow:0 6px 16px rgba(239,68,68,.25); }
.btn-success { background:#10b981; color:#fff; box-shadow:0 2px 8px rgba(16,185,129,.2); }
.btn-success:hover { background:#34d399; transform:translateY(-1px); box-shadow:0 6px 16px rgba(16,185,129,.25); }
.btn-sm { padding:7px 16px; font-size:12px; border-radius:8px; }
.btn-lg { padding:14px 32px; font-size:16px; border-radius:var(--rl); }
.btn-block { width:100%; justify-content:center; }
.btn:disabled { opacity:.5; cursor:not-allowed; pointer-events:none; }

/* ═══ INPUTS ═══ */
.input, select.input, textarea.input { width:100%; padding:12px 16px; border-radius:var(--r); border:2px solid #d1d5db; background:#ffffff; color:#111827; font-family:var(--font); font-size:14px; outline:none; transition:all .25s; }
.input:focus { border-color:#6366f1; box-shadow:0 0 0 3px rgba(99,102,241,.1); }
.input::placeholder { color:#9ca3af; }
textarea.input { resize:vertical; min-height:80px; }
.form-group { display:flex; flex-direction:column; gap:6px; }
.form-group label { font-size:12px; font-weight:700; color:var(--tx2); text-transform:uppercase; letter-spacing:.5px; }

/* ═══ ALERTS ═══ */
.alert { padding:12px 16px; border-radius:var(--r); font-size:14px; margin-bottom:16px; animation:slideDown .3s ease; }
.alert-error { background:var(--rdbg); color:var(--rd); border:1px solid rgba(239,68,68,.12); }
.alert-success { background:var(--grbg); color:var(--gr); border:1px solid rgba(16,185,129,.12); }

/* ═══ CARDS ═══ */
.card { background:#ffffff; border:1.5px solid #e5e7eb; border-radius:var(--rl); overflow:hidden; transition:border-color .3s, box-shadow .3s; }
.card:hover { border-color:#d1d5db; box-shadow:0 4px 20px rgba(0,0,0,.06); }
.card-header { padding:18px 22px; border-bottom:1.5px solid #e5e7eb; font-weight:700; font-size:15px; display:flex; align-items:center; justify-content:space-between; gap:8px; background:#f9fafb; }
.card-body { padding:22px; }

/* ═══ BADGES ═══ */
.badge { display:inline-flex; align-items:center; gap:5px; padding:5px 12px; border-radius:20px; font-size:11px; font-weight:700; letter-spacing:.3px; }
.badge-online { background:var(--grbg); color:var(--gr); }
.badge-online::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--gr); animation:pulseGlow 2s ease infinite; }
.badge-stopped { background:var(--rdbg); color:var(--rd); }
.badge-stopped::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--rd); }
.badge-installing { background:#fef3c7; color:#d97706; animation:pulseInstalling 1.5s ease-in-out infinite; }
.badge-starting { background:#dbeafe; color:#2563eb; animation:pulseInstalling 1.5s ease-in-out infinite; }
.badge-stopping { background:#fce7f3; color:#db2777; animation:pulseInstalling 1.5s ease-in-out infinite; }
@keyframes pulseInstalling { 0%,100%{opacity:1} 50%{opacity:.6} }
.dot-installing { background:#f59e0b; animation:spin 1.5s linear infinite; border-radius:2px; width:7px; height:7px; }
.dot-starting { background:#3b82f6; animation:spin 1.5s linear infinite; border-radius:2px; width:7px; height:7px; }
.dot-stopping { background:#ec4899; animation:spin 1.5s linear infinite; border-radius:2px; width:7px; height:7px; }
.badge-expired { background:var(--bg2); color:var(--tx3); }
.badge-open { background:var(--orbg); color:var(--or); }
.badge-answered { background:var(--grbg); color:var(--gr); }
.badge-waiting { background:var(--orbg); color:var(--or); }
.badge-closed { background:var(--bg2); color:var(--tx3); }
.badge-admin { background:var(--acbg); color:var(--ac); }
.badge-moderator { background:rgba(139,92,246,.08); color:var(--pu); }
.badge-user { background:var(--bg2); color:var(--tx2); }

/* ═══ LANDING NAV ═══ */
.landing-nav { position:fixed; top:0; left:0; right:0; z-index:100; background:var(--glass2); backdrop-filter:blur(24px) saturate(1.4); -webkit-backdrop-filter:blur(24px) saturate(1.4); border-bottom:1px solid var(--bdr); height:80px; }
.nav-inner { max-width:1200px; margin:0 auto; padding:0 28px; display:flex; align-items:center; height:100%; }
.nav-brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--tx); font-weight:800; font-size:22px; }
.nav-logo { width:42px; height:42px; border-radius:12px; background:linear-gradient(135deg,var(--ac),var(--ac2)); display:flex; align-items:center; justify-content:center; box-shadow:0 2px 12px var(--acg); color:#fff; }
.nav-title { letter-spacing:-.5px; }
.nav-links { margin-left:auto; display:flex; align-items:center; gap:6px; }
.nav-links a:not(.btn) {
  color:#4b5563; font-size:15px; font-weight:600; transition:all .3s;
  padding:10px 18px; border-radius:10px; position:relative;
  text-decoration:none;
}
.nav-links a:not(.btn)::after {
  content:''; position:absolute; bottom:6px; left:50%; transform:translateX(-50%) scaleX(0);
  width:20px; height:2.5px; background:#6366f1; border-radius:2px;
  transition:transform .3s cubic-bezier(.4,0,.2,1), width .3s;
}
.nav-links a:not(.btn):hover { color:#111827; background:rgba(99,102,241,.06); }
.nav-links a:not(.btn):hover::after { transform:translateX(-50%) scaleX(1); width:24px; }
.nav-links .btn-outline {
  padding:10px 24px; font-size:14px; border-radius:10px;
  transition:all .3s cubic-bezier(.4,0,.2,1);
}
.nav-links .btn-outline:hover {
  background:#eef2ff; border-color:#818cf8; color:#6366f1;
  transform:translateY(-2px); box-shadow:0 4px 12px rgba(99,102,241,.15);
}
.nav-links .btn-primary {
  padding:10px 24px; font-size:14px; border-radius:10px;
  transition:all .3s cubic-bezier(.4,0,.2,1);
}
.nav-links .btn-primary:hover {
  background:#818cf8; transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(99,102,241,.3);
}
.mobile-menu-btn { display:none; background:none; border:none; color:var(--tx); cursor:pointer; margin-left:auto; line-height:0; }
@media(max-width:768px) { .mobile-menu-btn { display:block; } .nav-links { display:none; flex-direction:column; position:absolute; top:64px; left:0; right:0; background:var(--card); border-bottom:1px solid var(--bdr); padding:16px; gap:12px; box-shadow:var(--shadow-md); } .nav-links.open { display:flex; } }

/* ═══ HERO ═══ */
.hero { position:relative; min-height:600px; display:flex; align-items:center; justify-content:center; padding:120px 20px 80px; text-align:center; overflow:hidden; background:linear-gradient(135deg,#f0f0ff 0%,#e8ecff 25%,#f0f8ff 50%,#f5f0ff 75%,#f0f0ff 100%); background-size:400% 400%; animation:heroGrad 12s ease infinite; }
.hero-bg { position:absolute; inset:0; overflow:hidden; }
.hero-bg::before { content:''; position:absolute; width:600px; height:600px; top:-200px; right:-100px; background:radial-gradient(circle,rgba(99,102,241,.12) 0%,transparent 70%); border-radius:50%; animation:float1 8s ease-in-out infinite; }
.hero-bg::after { content:''; position:absolute; width:500px; height:500px; bottom:-150px; left:-100px; background:radial-gradient(circle,rgba(6,182,212,.08) 0%,transparent 70%); border-radius:50%; animation:float2 10s ease-in-out infinite; }
.hero::before { content:''; position:absolute; inset:0; z-index:0; background-image:radial-gradient(rgba(99,102,241,.08) 1px,transparent 1px); background-size:30px 30px; }
.hero::after { content:''; position:absolute; width:400px; height:400px; top:50%; left:50%; transform:translate(-50%,-50%); background:radial-gradient(circle,rgba(139,92,246,.06) 0%,transparent 70%); border-radius:50%; animation:pulse 6s ease-in-out infinite; }

@keyframes heroGrad { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
@keyframes float1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-40px,30px) scale(1.1)} }
@keyframes float2 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(30px,-40px) scale(1.15)} }
@keyframes pulse { 0%,100%{opacity:.5;transform:translate(-50%,-50%) scale(1)} 50%{opacity:1;transform:translate(-50%,-50%) scale(1.2)} }
.hero-content { position:relative; max-width:700px; z-index:1; }
.hero-title { font-size:clamp(34px,6vw,60px); font-weight:800; line-height:1.08; letter-spacing:-1.5px; margin-bottom:20px; }
.hero-title .accent { background:linear-gradient(135deg,var(--ac),var(--pu),var(--cy)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-size:200% 200%; animation:gradShift 4s ease infinite; }
.hero-sub { font-size:clamp(14px,2vw,18px); color:var(--tx2); margin-bottom:36px; max-width:540px; margin-left:auto; margin-right:auto; line-height:1.7; }
.hero-actions { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:56px; }
.hero-stats { display:flex; gap:1px; justify-content:center; background:var(--bdr); border-radius:var(--rl); overflow:hidden; box-shadow:var(--shadow); }
.hero-stat { text-align:center; padding:20px 32px; background:var(--card); min-width:110px; }
.hero-stat-num { display:block; font-size:24px; font-weight:800; font-family:var(--mono); color:var(--tx); letter-spacing:-1px; }
.hero-stat-label { font-size:12px; color:var(--tx3); margin-top:2px; }
@media(max-width:600px) { .hero-title { font-size:32px; } .hero { padding:100px 16px 60px; min-height:auto; } .hero-stats { flex-direction:column; } }

/* ═══ SECTIONS ═══ */
.section { padding:80px 20px; }
.section-alt { background:var(--card); }
.container { max-width:1200px; margin:0 auto; }
.section-title { font-size:clamp(26px,4vw,36px); font-weight:800; text-align:center; margin-bottom:12px; letter-spacing:-.5px; }
.section-sub { text-align:center; color:var(--tx2); font-size:16px; margin-bottom:48px; }

/* Games showcase */
.games-showcase { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:14px; }
@media(max-width:480px) { .games-showcase { grid-template-columns:repeat(3,1fr); } }
.game-showcase-card { background:#ffffff; border:2px solid #e5e7eb; border-radius:var(--rl); padding:24px 14px; text-align:center; cursor:pointer; transition:all .35s; }
.game-showcase-card:hover { border-color:#6366f1; transform:translateY(-5px); box-shadow:0 4px 20px rgba(99,102,241,.1); }
.game-showcase-icon { font-size:40px; margin-bottom:10px; display:block; transition:.3s; }
.game-showcase-card:hover .game-showcase-icon { transform:scale(1.15); }
.game-showcase-name { font-size:13px; font-weight:700; }
.game-showcase-price { font-size:11px; color:var(--gr); font-family:var(--mono); margin-top:2px; }

/* Features */
.features-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; }
.feature-card { background:#ffffff; border:1.5px solid #e5e7eb; border-radius:var(--rl); padding:28px; transition:all .35s; }
.feature-card:hover { border-color:#d1d5db; transform:translateY(-3px); box-shadow:0 4px 20px rgba(0,0,0,.06); }
.feature-icon { margin-bottom:14px; color:var(--ac); }
.feature-card h3 { font-size:16px; font-weight:700; margin-bottom:8px; }
.feature-card p { font-size:14px; color:var(--tx2); line-height:1.6; }

/* Tariffs */
.tariffs-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:20px; }
.tariff-card { background:#ffffff; border:2px solid #e5e7eb; border-radius:20px; padding:28px; position:relative; transition:all .3s; }
.tariff-card.popular { border-color:#6366f1; box-shadow:0 0 0 1px #6366f1,0 4px 20px rgba(99,102,241,.1); }
.tariff-card:hover { transform:translateY(-3px); box-shadow:0 8px 40px rgba(0,0,0,.08); border-color:#d1d5db; }
.tariff-badge { position:absolute; top:-12px; right:16px; background:linear-gradient(135deg,var(--ac),var(--ac2)); color:#fff; font-size:11px; font-weight:700; padding:4px 14px; border-radius:20px; }
.tariff-game { display:flex; align-items:center; gap:8px; margin-bottom:12px; font-size:14px; color:var(--tx2); }
.tariff-name { font-size:20px; font-weight:800; margin-bottom:6px; }
.tariff-price { font-size:28px; font-weight:800; font-family:var(--mono); color:var(--gr); margin-bottom:16px; }
.tariff-price small { font-size:14px; color:var(--tx3); font-weight:400; }
.tariff-features { list-style:none; margin-bottom:20px; }
.tariff-features li { padding:6px 0; font-size:14px; color:#4b5563; border-bottom:1px solid #e5e7eb; }
.tariff-features li:last-child { border:none; }
.tariff-features li::before { content:'✓ '; color:var(--gr); font-weight:700; }

/* Install steps */
.install-steps { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:24px; }
.install-step { text-align:center; padding:24px; }
.step-num { display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:16px; background:var(--acbg); color:var(--ac); font-size:20px; font-weight:800; font-family:var(--mono); margin-bottom:16px; }

/* News */
.news-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(350px,1fr)); gap:20px; }
.news-card { background:#ffffff; border:1.5px solid #e5e7eb; border-radius:var(--rl); padding:24px; transition:.3s; }
.news-card:hover { border-color:#d1d5db; box-shadow:0 4px 16px rgba(0,0,0,.05); }
.news-date { font-size:12px; color:var(--tx3); margin-bottom:8px; }
.news-title { font-size:18px; font-weight:700; margin-bottom:10px; }
.news-excerpt { font-size:14px; color:var(--tx2); line-height:1.6; }

/* Footer */
.footer { background:var(--card); border-top:1px solid var(--bdr); padding:48px 24px 24px; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:32px; max-width:1200px; margin:0 auto 32px; }
@media(max-width:768px) { .footer-grid { grid-template-columns:1fr; } }
.footer-brand { font-size:18px; font-weight:800; display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.footer-col h4 { font-size:14px; font-weight:700; margin-bottom:12px; }
.footer-col a { display:block; color:var(--tx2); font-size:14px; padding:4px 0; }
.footer-col p { color:var(--tx2); font-size:14px; }
.footer-bottom { text-align:center; color:var(--tx3); font-size:13px; padding-top:24px; border-top:1px solid var(--bdr); max-width:1200px; margin:0 auto; }

/* ═══ AUTH PAGE ═══ */
.auth-page { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; position:relative; overflow:hidden; background:linear-gradient(135deg,#ede9fe 0%,#e0e7ff 25%,#dbeafe 50%,#ede9fe 75%,#e0e7ff 100%); background-size:400% 400%; animation:authGrad 15s ease infinite; }
.auth-page::before { content:''; position:absolute; width:500px; height:500px; top:-150px; right:-150px; background:radial-gradient(circle,rgba(99,102,241,.15) 0%,transparent 70%); border-radius:50%; animation:float1 8s ease-in-out infinite; }
.auth-page::after { content:''; position:absolute; width:400px; height:400px; bottom:-100px; left:-100px; background:radial-gradient(circle,rgba(139,92,246,.1) 0%,transparent 70%); border-radius:50%; animation:float2 10s ease-in-out infinite; }
@keyframes authGrad { 0%,100%{background-position:0% 50%} 25%{background-position:50% 0%} 50%{background-position:100% 50%} 75%{background-position:50% 100%} }
.auth-card { background:rgba(255,255,255,.85); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,.6); border-radius:var(--rx); padding:44px 36px; width:100%; max-width:420px; box-shadow:0 8px 40px rgba(99,102,241,.1),0 2px 8px rgba(0,0,0,.04); animation:scaleIn .4s ease both; position:relative; z-index:1; }
.auth-logo { display:flex; align-items:center; gap:14px; justify-content:center; margin-bottom:12px; }
.auth-logo-icon { width:56px; height:56px; border-radius:18px; background:linear-gradient(135deg,var(--ac),var(--ac2)); display:flex; align-items:center; justify-content:center; box-shadow:0 4px 20px var(--acg); color:#fff; }
.auth-logo-text { font-size:28px; font-weight:800; letter-spacing:-1px; }
.auth-sub { text-align:center; color:var(--tx2); font-size:14px; margin-bottom:28px; }
.auth-form { display:flex; flex-direction:column; gap:18px; }
.auth-toggle { text-align:center; margin-top:20px; font-size:13px; color:var(--tx3); }

/* ═══ DROPDOWN ═══ */
.topnav-dropdown { position:relative; }
.topnav-dropdown .dropdown-menu { display:none; position:absolute; top:calc(100% + 6px); left:0; min-width:200px; background:var(--card); border:1px solid var(--bdr2); border-radius:var(--r); box-shadow:var(--shadow-lg); padding:8px; z-index:500; }
.topnav-dropdown.open .dropdown-menu { display:block; animation:slideDown .2s ease; }
.dropdown-right { left:auto; right:0; }
.dropdown-menu a, .dropdown-menu .dropdown-btn { display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:10px 14px; color:var(--tx2); font-size:13px; font-weight:500; border-radius:8px; transition:.2s; text-decoration:none; background:none; border:none; cursor:pointer; font-family:var(--font); }
.dropdown-menu a:hover, .dropdown-menu .dropdown-btn:hover { background:var(--bg2); color:var(--tx); }
.dropdown-header { padding:10px 14px; font-weight:700; font-size:14px; color:var(--tx); border-bottom:1px solid var(--bdr); margin-bottom:4px; }
.dropdown-divider { height:1px; background:var(--bdr); margin:4px 0; }
.dropdown-btn-logout { color:var(--rd) !important; }
.dropdown-btn-logout:hover { background:var(--rdbg) !important; }
.logout-form { margin:0; padding:0; }

.topnav-avatar { width:38px; height:38px; border-radius:50% !important; background:linear-gradient(135deg,var(--ac),#7c3aed); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px; color:#fff; text-decoration:none; cursor:pointer; transition:.2s; flex-shrink:0; aspect-ratio:1/1; }
.topnav-avatar:hover { transform:scale(1.08); }

/* ═══ STAT / TABLE / EMPTY ═══ */
.stat-card { background:#ffffff; border:1.5px solid #e5e7eb; border-radius:var(--rl); padding:20px; transition:.3s; }
.stat-card:hover { border-color:#d1d5db; box-shadow:0 2px 12px rgba(0,0,0,.04); transform:translateY(-2px); }
.stat-card-value { font-family:var(--mono); font-weight:800; font-size:26px; }
.table-card { background:var(--card); border:1px solid var(--bdr); border-radius:var(--rl); overflow:hidden; }
table.dt { border-collapse:collapse; width:100%; }
table.dt th { background:var(--bg); font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:var(--tx3); padding:12px 16px; border-bottom:1px solid var(--bdr); text-align:left; }
table.dt td { padding:14px 16px; border-bottom:1px solid var(--bdr); font-size:14px; vertical-align:middle; }
table.dt tbody tr { transition:background .15s; cursor:pointer; }
table.dt tbody tr:hover { background:var(--acbg); }
table.dt tbody tr:last-child td { border-bottom:none; }
.empty-state { text-align:center; padding:60px 20px; }
.empty-state-icon { margin-bottom:12px; color:var(--tx3); }
.empty-state-text { color:var(--tx2); font-size:16px; margin-bottom:16px; }

/* ═══ UTILS ═══ */
.mb-16{margin-bottom:16px} .mb-24{margin-bottom:24px} .mt-16{margin-top:16px} .mt-24{margin-top:24px}
.loading { text-align:center; padding:60px; color:var(--tx3); }
.spinner { width:32px; height:32px; border:3px solid var(--bdr); border-top-color:var(--ac); border-radius:50%; animation:spin .8s linear infinite; margin:0 auto 12px; }
.console { background:#0a0e1a; border:1px solid var(--bdr); border-radius:12px; padding:16px; font-family:var(--mono); font-size:12px; color:#4ade80; max-height:300px; overflow-y:auto; line-height:1.8; }
.console-line::before { content:'› '; color:var(--tx3); }

/* ═══ MOBILE BOTTOM NAV ═══ */
.mobile-bottom-nav { display:none; position:fixed; bottom:0; left:0; right:0; z-index:200; background:var(--glass2); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); border-top:1px solid var(--bdr); padding:4px 6px; padding-bottom:env(safe-area-inset-bottom,4px); }
.mobile-bottom-nav a { flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 4px; border-radius:10px; font-size:10px; font-weight:600; color:var(--tx3); text-decoration:none; transition:.2s; }
.mobile-bottom-nav a.active { color:var(--ac); background:var(--acbg); }
.mobile-bottom-nav .nav-icon { display:flex; align-items:center; justify-content:center; height:22px; }
@media(max-width:768px) { .mobile-bottom-nav { display:flex; } .topnav-links { display:none !important; } .panel-main { padding-bottom:80px; } .config-grid { grid-template-columns:1fr; } .order-summary { position:static; } .profile-grid { grid-template-columns:1fr; } .stats-row { grid-template-columns:1fr 1fr; } .page-title { font-size:20px; } }

/* ═══ ORDER CONFIGURATOR ═══ */
.opt-btn { padding:12px 20px; border-radius:var(--r); border:2px solid #d1d5db; background:#ffffff; color:#374151; cursor:pointer; font-family:var(--font); font-size:14px; font-weight:600; transition:.25s; position:relative; }
.opt-btn:hover { border-color:#6366f1; color:#6366f1; background:#f5f3ff; box-shadow:0 2px 8px rgba(99,102,241,.1); transform:translateY(-1px); }
.opt-btn.active { border-color:#6366f1; background:#eef2ff; color:#4f46e5; box-shadow:0 0 0 2px rgba(99,102,241,.2); font-weight:700; }
.opt-btn .sub { display:block; font-size:11px; color:#9ca3af; font-family:var(--mono); margin-top:2px; }
.opt-badge-green { position:absolute; top:-8px; right:-4px; background:var(--gr); color:#fff; font-size:10px; font-weight:700; padding:2px 6px; border-radius:4px; }

.panel-topnav { background:var(--glass2); backdrop-filter:blur(24px) saturate(1.3); -webkit-backdrop-filter:blur(24px) saturate(1.3); }

/* ═══ TOAST ═══ */
.toast-notification { position:fixed; bottom:24px; right:24px; z-index:9999; max-width:400px; padding:14px 20px; border-radius:var(--rl); font-family:var(--font); font-size:14px; font-weight:600; box-shadow:var(--shadow-lg); animation:toastIn .3s ease; }
.toast-success { background:var(--grbg); color:var(--gr); border:1px solid rgba(16,185,129,.15); }
.toast-error { background:var(--rdbg); color:var(--rd); border:1px solid rgba(239,68,68,.15); }

/* ═══ MODAL ═══ */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.3); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; z-index:999; animation:fadeIn .2s ease; }
.modal-box { background:var(--card); border:1px solid var(--bdr2); border-radius:var(--rx); padding:32px; max-width:480px; width:90%; box-shadow:var(--shadow-lg); animation:scaleIn .3s ease both; }