/* TikStage — أسود مطفي + أزرق (مظهر قريب من TikOverlay مع primary أزرق) */
/* الأصل الكلاسيكي محفوظ في theme-classic-backup.css */

:root {
  --bg: #0a0a0a;
  --bg2: #111111;
  --panel: rgba(20, 20, 20, 0.96);
  --panel2: #161616;
  --line: rgba(255, 255, 255, 0.08);
  --text: #f2f2f2;
  --muted: #9a9a9a;
  --red: #3d7bf5;
  --red2: #1a56db;
  --blue: #5aa8ff;
  --green: #3ddc97;
  --amber: #f8b84e;
  --radius: 18px;
  --card: #141414;
  --sky: #3d7bf5;
  --sky2: #1a56db;
  --ink: #f2f2f2;
}

body {
  background: var(--bg) !important;
  color: var(--text);
}

body::before {
  background:
    radial-gradient(620px 420px at 0% 100%, rgba(61, 123, 245, 0.12) 0%, transparent 62%),
    radial-gradient(980px 460px at 12% -10%, rgba(255, 255, 255, 0.06) 0%, transparent 55%),
    radial-gradient(700px 380px at 100% 110%, rgba(255, 255, 255, 0.02) 0%, transparent 50%) !important;
}

.loading {
  background: #0a0a0a !important;
}

.topbar {
  background: rgba(10, 10, 10, 0.92) !important;
  border-bottom-color: rgba(255, 255, 255, 0.07) !important;
}

.sidebar {
  background: #050505 !important;
  border-left-color: rgba(255, 255, 255, 0.06) !important;
}

.brand-logo,
.desk-logo {
  background: transparent !important;
  filter: none !important;
}

.nav-section-title {
  color: #8a8a8a !important;
}

.nav-item {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.05) !important;
  color: #cfcfcf !important;
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #fff !important;
}

.nav-item.active {
  background: rgba(61, 123, 245, 0.16) !important;
  color: #fff !important;
  border-color: rgba(61, 123, 245, 0.35) !important;
}

.nav-item.active:after {
  background: #3d7bf5 !important;
  box-shadow: 0 0 8px rgba(61, 123, 245, 0.35) !important;
}

.main {
  background:
    radial-gradient(ellipse 520px 280px at 78% 0%, rgba(255, 255, 255, 0.03), transparent 70%),
    radial-gradient(620px 420px at 0% 100%, rgba(61, 123, 245, 0.1) 0%, transparent 62%),
    #0a0a0a !important;
}

.card,
.alert-card,
.panel,
.plan,
.gate-card,
.tts-card,
.act-card,
.music-card,
.soc-card,
.goal-card {
  background: linear-gradient(145deg, #161616, #101010) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35) !important;
}

.field,
.textarea,
.select,
.user-input,
.field input,
input.field,
.tts-select,
.tts-template {
  background: #111111 !important;
  border-color: rgba(255, 255, 255, 0.09) !important;
  color: #f2f2f2 !important;
}

.field:focus,
.textarea:focus,
.select:focus,
.user-input:focus,
input.field:focus {
  border-color: rgba(61, 123, 245, 0.65) !important;
  box-shadow: 0 0 0 3px rgba(61, 123, 245, 0.15) !important;
}

.icon-btn,
.language,
.chip {
  background: #141414 !important;
}

.btn {
  background: #1a1a1a !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-red,
.btn.primary,
.primary {
  background: linear-gradient(135deg, #3d7bf5, #1a56db) !important;
  border-color: transparent !important;
  box-shadow: 0 8px 22px rgba(61, 123, 245, 0.28) !important;
}

.btn-outline {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.16) !important;
}

.btn-outline:hover {
  border-color: rgba(61, 123, 245, 0.55) !important;
  background: rgba(61, 123, 245, 0.1) !important;
}

.toast {
  background: #161616 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.bio-slug-row,
.bio-pay-row,
.order-box,
.summary,
.pay-card {
  background: #111111 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.bio-perks {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #e0e0e0 !important;
}

.stat {
  background: rgba(255, 255, 255, 0.03) !important;
}

/* TTS chrome */
.tts-hero-head h1,
.act-hero h1,
.page-heading h1 {
  color: #fff !important;
}

.tts-card h3,
.act-card h3,
.music-card h3,
.soc-card h3 {
  color: #3d7bf5 !important;
}

.tts-activate,
.music-url-card,
.soc-url-card {
  background: linear-gradient(145deg, #161616, #101010) !important;
  border-color: rgba(61, 123, 245, 0.35) !important;
}

.tts-check,
.tts-radio,
.tts-adv-row,
.tts-var {
  background: rgba(255, 255, 255, 0.03) !important;
}

.tts-var {
  background: #141414 !important;
}

.tts-range input[type="range"],
.tts-check input,
.tts-radio input,
.tts-adv-row input,
.toggle,
input[type="checkbox"],
input[type="radio"] {
  accent-color: #3d7bf5 !important;
}

.tts-activate-actions #tts-play {
  background: transparent !important;
  border: 1.5px solid #3d7bf5 !important;
  color: #7eb6ff !important;
  box-shadow: 0 0 18px rgba(61, 123, 245, 0.18) !important;
}

.tts-power {
  background: rgba(61, 123, 245, 0.14) !important;
  border-color: rgba(61, 123, 245, 0.4) !important;
  color: #3d7bf5 !important;
}

.tts-activate-main:has(input:checked) .tts-power {
  background: rgba(61, 123, 245, 0.28) !important;
  color: #fff !important;
  border-color: #3d7bf5 !important;
}

.user-input {
  background: #111111 !important;
}

/* equalizer bars */
.equalizer i {
  background: #3d7bf5 !important;
  box-shadow: 0 0 8px rgba(61, 123, 245, 0.45);
}

/* floating / telegram accents */
.telegram,
.float-btn,
.desk-fab {
  background: linear-gradient(135deg, #3d7bf5, #1a56db) !important;
  box-shadow: 0 10px 28px rgba(61, 123, 245, 0.35) !important;
}

.status-dot {
  background: #3d7bf5 !important;
  box-shadow: 0 0 10px rgba(61, 123, 245, 0.55) !important;
}

.status.connected .status-dot {
  background: #5aa8ff !important;
  box-shadow: 0 0 12px rgba(90, 168, 255, 0.65) !important;
}

.sub-days-chip {
  border-color: rgba(61, 123, 245, 0.45) !important;
  background: rgba(61, 123, 245, 0.14) !important;
  color: #eaf2ff !important;
}

.store-cat.active {
  border-color: #3d7bf5 !important;
  color: #7eb6ff !important;
  background: rgba(61, 123, 245, 0.12) !important;
}

.act-status.off {
  color: #7eb6ff !important;
}

.act-status i {
  background: #3d7bf5 !important;
  box-shadow: 0 0 8px rgba(61, 123, 245, 0.55) !important;
}

.act-master-box {
  background: rgba(61, 123, 245, 0.08) !important;
  border-color: rgba(61, 123, 245, 0.3) !important;
}

.ov-preview,
.soc-preview,
.scene-canvas-wrap {
  background:
    radial-gradient(circle at 50% 40%, rgba(61, 123, 245, 0.12), transparent 55%),
    #0a0a0a !important;
}

.acct-plans.plans-pro .plan {
  background: #141414 !important;
}

.acct-plans.plans-pro .plan.hot,
.acct-plans.plans-pro .plan.selected {
  border-color: #3d7bf5 !important;
  background: rgba(61, 123, 245, 0.1) !important;
}