/* ═══════════════════════════════════════════════════════════
   VentiStudio Professional — Premium Theme
   Color & style overrides for a polished, business-grade look
   ═══════════════════════════════════════════════════════════ */

/* ── Dark theme ── */
:root {
  --accent: #0ea5e9;
  --accent-secondary: #0284c7;
  --bg-primary: #0b0f1a;
  --bg-gradient: linear-gradient(160deg, #0b0f1a 0%, #111827 50%, #0f172a 100%);
  --glass-bg: rgba(255, 255, 255, 0.04);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
  --neon-glow: 0 0 24px rgba(14, 165, 233, 0.25);
  --pro-surface: rgba(14, 165, 233, 0.06);
  --pro-border-accent: rgba(14, 165, 233, 0.25);
}

/* ── Light theme ── */
[data-theme="light"] {
  --accent: #0284c7;
  --accent-secondary: #0369a1;
  --bg-primary: #f8fafc;
  --bg-gradient: linear-gradient(160deg, #f1f5f9 0%, #e2e8f0 100%);
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(148, 163, 184, 0.3);
  --glass-shadow: 0 4px 24px rgba(15, 23, 42, 0.08);
  --neon-glow: 0 0 20px rgba(2, 132, 199, 0.12);
  --pro-surface: rgba(2, 132, 199, 0.05);
  --pro-border-accent: rgba(2, 132, 199, 0.2);
}

/* ── Background radial accents ── */
body::before {
  background:
    radial-gradient(ellipse 600px 400px at 15% 20%, rgba(14, 165, 233, 0.07) 0%, transparent 70%),
    radial-gradient(ellipse 500px 500px at 85% 75%, rgba(2, 132, 199, 0.06) 0%, transparent 70%) !important;
}

[data-theme="light"] body::before {
  background:
    radial-gradient(ellipse 600px 400px at 15% 20%, rgba(14, 165, 233, 0.05) 0%, transparent 70%),
    radial-gradient(ellipse 500px 500px at 85% 75%, rgba(2, 132, 199, 0.04) 0%, transparent 70%) !important;
}

/* ── Header refinement ── */
header {
  border-bottom-color: var(--glass-border);
  background: rgba(11, 15, 26, 0.8);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

[data-theme="light"] header {
  background: rgba(248, 250, 252, 0.85);
}

/* ── Panels — refined glass ── */
.panel {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 1rem !important;
  box-shadow: var(--glass-shadow) !important;
}

.panel h3 {
  color: var(--accent) !important;
  letter-spacing: 0.01em;
}

/* ── Tool cards on index ── */
.tool-card {
  border-left: 3px solid transparent;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.tool-card:hover {
  border-color: var(--glass-border);
  border-left-color: var(--accent);
  box-shadow: 0 8px 32px rgba(14, 165, 233, 0.15);
}

[data-theme="light"] .tool-card:hover {
  box-shadow: 0 8px 32px rgba(2, 132, 199, 0.1);
}

.tool-card-icon {
  background: linear-gradient(135deg, var(--accent), var(--accent-secondary)) !important;
  border-radius: 0.85rem;
  box-shadow: 0 4px 16px rgba(14, 165, 233, 0.2);
}

/* ── Links & buttons ── */
.tool-link {
  background: linear-gradient(135deg, var(--accent), var(--accent-secondary)) !important;
  box-shadow: 0 4px 16px rgba(14, 165, 233, 0.25) !important;
  border-radius: 0.65rem !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.01em;
}

.tool-link:hover {
  box-shadow: 0 6px 24px rgba(14, 165, 233, 0.4) !important;
}

/* ── .btn-export & .btn-action ── */
.btn-export,
.btn-action.encode,
.tool-btn.primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-secondary)) !important;
  box-shadow: 0 4px 16px rgba(14, 165, 233, 0.25) !important;
}

.btn-export:hover,
.btn-action.encode:hover,
.tool-btn.primary:hover {
  box-shadow: 0 6px 24px rgba(14, 165, 233, 0.4) !important;
}

/* ── mode-tab / cat-tab active state ── */
.mode-tab.active,
.cat-tab.active,
.type-tab.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-secondary)) !important;
}

/* ── Badge (hero) ── */
.badge {
  border-color: var(--pro-border-accent);
  background: var(--pro-surface);
}

/* ── External notice ── */
.external-notice {
  border-left-color: var(--accent);
}

/* ── Features panel ── */
.features-panel {
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
}

.feature-col h3 {
  color: var(--accent);
}

.feature-col li::before {
  color: var(--accent-secondary);
}

/* ── CTA section ── */
.cta-section {
  border: 1px solid var(--glass-border);
}

/* ── Focus ring override ── */
input:focus,
textarea:focus,
select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15) !important;
}

[data-theme="light"] input:focus,
[data-theme="light"] textarea:focus,
[data-theme="light"] select:focus {
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.12) !important;
}

/* ── Ctrl buttons (timer) ── */
.ctrl-btn.start {
  background: linear-gradient(135deg, var(--accent), var(--accent-secondary)) !important;
  box-shadow: 0 4px 20px rgba(14, 165, 233, 0.3) !important;
}

.ctrl-btn.start:hover {
  box-shadow: 0 8px 30px rgba(14, 165, 233, 0.4) !important;
}

/* ── Strength / stat chips ── */
.stat-chip strong,
.stat-card .value {
  color: var(--accent) !important;
}

/* ── Flag chip active ── */
.flag-chip.active {
  background: rgba(14, 165, 233, 0.2) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* ── Scrollbar ── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(14, 165, 233, 0.2);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(14, 165, 233, 0.35);
}

/* ── Selection color ── */
::selection {
  background: rgba(14, 165, 233, 0.3);
  color: #fff;
}

/* ── Subtle pro watermark for panels ── */
.pro-hero h1 {
  background: linear-gradient(135deg, var(--accent), #38bdf8, var(--accent-secondary)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ── Private tools H2O green override → match pro theme ── */
.h2o-hero h1 {
  color: var(--accent) !important;
}