:root {
  --bg-color: #f3f4f6;
  --card-bg: #ffffff;
  --text-primary: #111827;
  --text-secondary: #6b7280;
  --primary-color: linear-gradient(90deg, #6d5cff, #7c3aed);
  --success-color: #22c55e;
  --warning-color: #f59e0b;
  --danger-color: #ef4444;
}

[data-theme="dark"] {
  --bg-color: #0b0f1a;
  --card-bg: #111827;
  --text-primary: #ffffff;
  --text-secondary: #9ca3af;
  --primary-color: linear-gradient(90deg, #6d5cff, #7c3aed);
}

[data-theme="light"] {
  --bg-color: #f3f4f6;
  --card-bg: #ffffff;
  --text-primary: #111827;
  --text-secondary: #6b7280;
}

.tiptv-shell { background: var(--bg-color); color: var(--text-primary); padding: 24px; border-radius: 16px; }
.tiptv-auth-header h2, .tiptv-dashboard-header h2 { margin: 8px 0; }
.tiptv-auth-grid, .tiptv-main-grid, .tiptv-stats { display: grid; gap: 16px; }
.tiptv-auth-grid, .tiptv-main-grid { grid-template-columns: 1fr 1fr; }
.tiptv-stats { grid-template-columns: repeat(4, minmax(140px,1fr)); }
.tiptv-card { background: var(--card-bg); padding: 16px; border-radius: 14px; box-shadow: 0 8px 24px rgba(17,24,39,.08); }
.tiptv-card input, .tiptv-card select, .tiptv-card textarea { width: 100%; margin: 6px 0 12px; padding: 10px; border: 1px solid #d1d5db; border-radius: 10px; background: transparent; color: var(--text-primary); }
.tiptv-btn { background: var(--primary-color); border: 0; color: #fff; padding: 10px 16px; border-radius: 10px; width: 100%; cursor: pointer; }
.tiptv-btn-outline { background: transparent; border: 1px solid #9ca3af; color: var(--text-primary); border-radius: 10px; padding: 10px 14px; }
.tiptv-row, .tiptv-dashboard-header, .tiptv-actions, .tiptv-badges, .tiptv-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tiptv-item { padding: 10px 0; border-bottom: 1px solid rgba(156,163,175,.25); }
.tiptv-badge { display: inline-block; background: rgba(109,92,255,.14); color: #7c3aed; padding: 6px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.tiptv-sub-card { background: rgba(109,92,255,.08); border-radius: 10px; padding: 12px; margin: 12px 0; }
.tiptv-alert { background: rgba(239,68,68,.14); color: var(--danger-color); border-radius: 10px; padding: 10px; margin-bottom: 12px; }

@media (max-width: 900px) {
  .tiptv-auth-grid, .tiptv-main-grid, .tiptv-stats { grid-template-columns: 1fr; }
  .tiptv-dashboard-header { flex-direction: column; align-items: flex-start; }
}