:root {
  --bg:      #050508;
  --bg2:     #0A0A12;
  --surface: #12121E;
  --border:  #1E1E2E;
  --text:    #F0EEFF;
  --text2:   #8B87A8;
  --text3:   #5A566E;
  --accent:  #7C5CFC;
  --accent2: #A855F7;
  --teal:    #06D6A0;
  --amber:   #F59E0B;
  --rose:    #F43F5E;
}
* { box-sizing: border-box; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  min-height: 100vh;
}

/* Sidebar */
#sidebar {
  width: 240px;
  min-height: 100vh;
  position: fixed;
  top: 0; left: 0;
  z-index: 100;
  transition: width 0.2s;
  overflow-y: auto;
}
@media(max-width:768px){
  #sidebar { width:60px; transform:translateX(-100%); }
  #sidebar.show { transform:translateX(0); width:240px; }
  #page-content { margin-left:0 !important; }
}
#page-content { margin-left:240px; min-height:100vh; }
@media(max-width:768px){ #page-content { margin-left:0; } }

/* Brand */
.brand-icon {
  width:36px; height:36px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:18px;
  flex-shrink:0;
}
.user-avatar {
  width:32px; height:32px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700; font-size:14px;
  flex-shrink:0;
}

/* Dark custom */
.bg-dark-custom { background: var(--bg2) !important; }

/* Sidebar nav */
#sidebar .nav-link { color: var(--text2) !important; padding:8px 12px; transition:all .15s; }
#sidebar .nav-link:hover, #sidebar .nav-link.active {
  color: var(--accent) !important;
  background: rgba(124,92,252,0.12);
}
#sidebar .nav-link.active { font-weight:600; }
.credits-box { background: rgba(245,158,11,0.1); border:1px solid rgba(245,158,11,0.2); }

/* Cards */
.card-vc {
  background: var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
}
.card-vc:hover { border-color: rgba(124,92,252,0.3); transition:border-color .2s; }

/* Buttons */
.btn-gradient {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color:#fff !important; border:none;
  box-shadow: 0 4px 20px rgba(124,92,252,0.3);
}
.btn-gradient:hover { opacity:0.9; box-shadow: 0 6px 24px rgba(124,92,252,0.4); }

/* Forms */
.form-control-vc, .form-select-vc {
  background: var(--surface) !important;
  border:1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius:10px;
}
.form-control-vc:focus, .form-select-vc:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(124,92,252,0.15) !important;
  outline:none;
}
.form-control-vc::placeholder { color: var(--text3); }

/* Stats cards */
.stat-card {
  background: var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  padding:20px;
}

/* Type selector */
.type-btn {
  background: var(--surface);
  border:1px solid var(--border);
  color: var(--text2);
  border-radius:10px;
  padding:8px 16px;
  cursor:pointer;
  transition:all .15s;
  font-size:14px;
  font-weight:500;
}
.type-btn:hover, .type-btn.active {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border-color:transparent;
  color:#fff;
}

/* Score bars */
.score-bar { background: var(--border); border-radius:4px; height:6px; }
.score-fill { background: linear-gradient(90deg, var(--accent), var(--accent2)); border-radius:4px; height:6px; transition:width .5s; }

/* Hashtag chips */
.hashtag-chip {
  display:inline-block;
  background:rgba(124,92,252,0.12);
  color:var(--accent2);
  border-radius:20px;
  padding:4px 12px;
  font-size:13px;
  margin:3px;
}

/* Voice cards */
.voice-card {
  background:var(--surface);
  border:2px solid var(--border);
  border-radius:12px;
  padding:12px 8px;
  text-align:center;
  cursor:pointer;
  transition:all .15s;
}
.voice-card:hover, .voice-card.active {
  border-color:var(--accent);
  background:rgba(124,92,252,0.08);
}
.voice-card.active { border-color:var(--accent); }

/* Plan cards */
.plan-card {
  background:var(--surface);
  border:2px solid var(--border);
  border-radius:18px;
  padding:24px;
  transition:border-color .2s;
}
.plan-card.popular { border-color:var(--accent); box-shadow:0 0 30px rgba(124,92,252,0.15); }

/* Alerts */
.alert-vc-error { background:rgba(244,63,94,0.1); border:1px solid rgba(244,63,94,0.3); color:var(--rose); border-radius:10px; }
.alert-vc-success { background:rgba(6,214,160,0.1); border:1px solid rgba(6,214,160,0.3); color:var(--teal); border-radius:10px; }
.alert-vc-warn { background:rgba(245,158,11,0.1); border:1px solid rgba(245,158,11,0.3); color:var(--amber); border-radius:10px; }

/* Table */
.table-vc { color:var(--text); }
.table-vc th { color:var(--text3); font-weight:500; font-size:12px; text-transform:uppercase; border-color:var(--border); }
.table-vc td { border-color:var(--border); vertical-align:middle; }
.table-vc tbody tr:hover { background:rgba(124,92,252,0.05); }

/* Misc */
.x-small { font-size:11px; }
.text-accent { color:var(--accent) !important; }
.text-accent2 { color:var(--accent2) !important; }
.text-teal { color:var(--teal) !important; }
.border-vc { border-color:var(--border) !important; }
.bg-surface { background:var(--surface) !important; }
.section-title { font-size:20px; font-weight:700; color:var(--text); margin-bottom:16px; }

/* Loading spinner overlay */
#loadingOverlay {
  display:none; position:fixed; inset:0;
  background:rgba(5,5,8,0.85);
  z-index:9999;
  align-items:center; justify-content:center; flex-direction:column; gap:16px;
}
#loadingOverlay.show { display:flex; }

/* Progress */
.progress-vc { background:var(--border); border-radius:4px; height:8px; }
.progress-vc .fill { background:linear-gradient(90deg,var(--accent),var(--accent2)); border-radius:4px; height:8px; transition:width .5s; }

@media(max-width:576px) {
  #page-content { padding:0 !important; }
  .stat-card { padding:14px; }
}