/* ============================================================
   VISUAL STYLE: PREMIUM
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=Fira+Code:wght@400;500&display=swap');

[data-visual-style="premium"] {
  --font-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono: 'Fira Code', ui-monospace, monospace;
  --accent-gradient: linear-gradient(135deg, var(--accent) 0%, #a855f7 100%);
}

/* 1. Subtle Dot Grid Background */
[data-visual-style="premium"] #content {
  /* Use a mix of the text color and border color so it's visible on both light and dark backgrounds */
  background-image: radial-gradient(color-mix(in srgb, var(--text-page) 15%, transparent) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: 0 0;
}

/* 2. Gradient Buttons & Tabs */
[data-visual-style="premium"] .btn-primary,
[data-visual-style="premium"] .topbar-signin,
[data-visual-style="premium"] .sb-signin-btn,
[data-visual-style="premium"] .dc-btn {
  background: var(--accent-gradient);
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

[data-visual-style="premium"] .tab.active {
  background: var(--accent-gradient);
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* 3. Springy Animations (Buttons) */
[data-visual-style="premium"] button {
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
              box-shadow 0.3s var(--ease), 
              background-color 0.2s var(--ease);
}

[data-visual-style="premium"] button:active {
  transform: scale(0.92) !important;
}

/* 4. Hover Glows on Cards */
[data-visual-style="premium"] .course-card-large,
[data-visual-style="premium"] .project-card,
[data-visual-style="premium"] .blog-page-card,
[data-visual-style="premium"] .widget,
[data-visual-style="premium"] .stat-card {
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}

[data-visual-style="premium"] .course-card-large:hover,
[data-visual-style="premium"] .project-card:hover,
[data-visual-style="premium"] .blog-page-card:hover,
[data-visual-style="premium"] .widget:hover,
[data-visual-style="premium"] .stat-card:hover {
  transform: translateY(-6px);
  /* Glow effect using the theme's accent color */
  box-shadow: 0 10px 30px -10px var(--accent), 0 0 0 1px var(--accent);
  border-color: var(--accent);
}

/* 5. Code Editor Polish */
[data-visual-style="premium"] .cf-editor-col {
  box-shadow: inset 0 0 20px rgba(0,0,0,0.05);
}

[data-visual-style="premium"] .cf-editor-bar {
  border-bottom: 2px solid var(--bg-surface-2);
}

/* ============================================================
   VISUAL STYLE: MINIMAL
   Removes shadows, sharpens corners, reduces clutter.
   ============================================================ */
[data-visual-style="minimal"] {
  --r-md: 2px; --r-lg: 4px; --r-xl: 6px;
}

[data-visual-style="minimal"] .btn-primary,
[data-visual-style="minimal"] .course-card-large,
[data-visual-style="minimal"] .widget,
[data-visual-style="minimal"] .stat-card {
  box-shadow: none !important;
  border: 2px solid var(--border-strong);
}

[data-visual-style="minimal"] .tabs {
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--border);
  border-radius: 0;
  padding: 0;
}

[data-visual-style="minimal"] .tab.active {
  border-radius: 0;
  background: transparent;
  border-bottom: 2px solid var(--accent);
  color: var(--accent);
}

[data-visual-style="minimal"] button:hover {
  transform: none !important; /* No bouncing */
  background: var(--bg-surface-3) !important;
}


/* ============================================================
   VISUAL STYLE: NEUBRUTALIST
   Bold borders, offset shadows, playful raw look.
   ============================================================ */
[data-visual-style="neubrutalist"] {
  --font-sans: 'Space Grotesk', system-ui, sans-serif;
  --r-md: 0px; --r-lg: 0px; --r-xl: 0px;
}

[data-visual-style="neubrutalist"] .btn-primary,
[data-visual-style="neubrutalist"] .course-card-large,
[data-visual-style="neubrutalist"] .widget,
[data-visual-style="neubrutalist"] .stat-card,
[data-visual-style="neubrutalist"] .tab.active {
  border: 2px solid var(--text-page);
  box-shadow: 4px 4px 0px var(--text-page);
  border-radius: 0;
  transition: all 0.1s;
}

[data-visual-style="neubrutalist"] .btn-primary:hover,
[data-visual-style="neubrutalist"] .course-card-large:hover,
[data-visual-style="neubrutalist"] .tab.active:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px var(--text-page);
}

[data-visual-style="neubrutalist"] .btn-primary:active {
  transform: translate(4px, 4px);
  box-shadow: 0px 0px 0px var(--text-page);
}

[data-visual-style="neubrutalist"] .sidebar {
  border-right: 2px solid var(--text-page);
}


/* ============================================================
   VISUAL STYLE: GLASSMORPHISM (V2 - Fixed)
   ============================================================ */

/* 1. Give the background a soft, colorful gradient to blur */
[data-visual-style="glass"] body {
  background: radial-gradient(circle at 10% 20%, color-mix(in srgb, var(--accent) 15%, var(--bg-page)) 0%, var(--bg-page) 50%, color-mix(in srgb, var(--accent) 10%, var(--bg-page)) 90%) !important;
  background-attachment: fixed !important;
}

/* 2. Frost the Sidebar and Topbar */
[data-visual-style="glass"] .sidebar,
[data-visual-style="glass"] .topbar {
  background: color-mix(in srgb, var(--bg-surface) 60%, transparent) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-right: 1px solid rgba(255,255,255,0.05) !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}

/* 3. Frost the Cards */
[data-visual-style="glass"] .course-card-large,
[data-visual-style="glass"] .widget,
[data-visual-style="glass"] .stat-card,
[data-visual-style="glass"] .account-card,
[data-visual-style="glass"] .blog-page-card,
[data-visual-style="glass"] .project-card {
  background: color-mix(in srgb, var(--bg-surface) 50%, transparent) !important;
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid color-mix(in srgb, var(--border) 40%, transparent) !important;
  box-shadow: 0 8px 32px 0 rgba(0,0,0,0.15);
  transition: all 0.3s ease;
}

[data-visual-style="glass"] .course-card-large:hover,
[data-visual-style="glass"] .widget:hover {
  background: color-mix(in srgb, var(--bg-surface) 70%, transparent) !important;
  box-shadow: 0 12px 40px 0 rgba(0,0,0,0.25);
  transform: translateY(-4px);
}

/* 4. Frost the Code Editor Wrapper */
[data-visual-style="glass"] .codefirst {
  background: color-mix(in srgb, var(--bg-surface) 70%, transparent) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid color-mix(in srgb, var(--border) 40%, transparent) !important;
}

/* 5. Frost the Inner Code Editor Bars */
[data-visual-style="glass"] .cf-editor-bar,
[data-visual-style="glass"] .cf-spec-head {
  background: color-mix(in srgb, var(--bg-surface) 40%, transparent) !important;
}

/* 6. Fix the Modal Glass */
[data-visual-style="glass"] .modal-inner {
  background: color-mix(in srgb, var(--bg-surface) 80%, transparent) !important;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.1) !important;
}