/*
 * GoCourse Compiler — Blue Glassmorphism Theme
 * Loaded after inline styles so these variables & rules take cascade priority.
 * Color reference: gocourse.in deep-navy blue palette
 * Glass/blur reference: labs.selfmade.ninja frosted-glass aesthetic
 */

/* ═══════════════════════════════════════════════════
   1. DESIGN TOKENS — override every template's :root
   ═══════════════════════════════════════════════════ */
:root {
  --bg:        #010818;
  --bg2:       #061828;
  --navy:      #0b2240;
  --yellow:    #F8ED08;
  --yellow-dim:rgba(248,237,8,.15);
  --yellow-bd: rgba(248,237,8,.28);
  --ai-from:   #7c3aed;
  --ai-to:     #6366f1;
  --ai-glow:   rgba(124,58,237,.45);
  --text:      #d8eaff;
  --muted:     #527898;

  /* Glass layer variables */
  --glass-bg:   rgba(4,16,44,.55);
  --glass-bg2:  rgba(6,22,56,.48);
  --glass-bd:   rgba(55,120,255,.18);
  --glass-bd2:  rgba(60,130,255,.12);
  --glass-blur: 22px;

  /* Card overrides (used across all pages) */
  --card-bg: rgba(4,16,44,.52);
  --card-bd: rgba(55,120,255,.18);

  /* Compiler workspace panel overrides */
  --panel:    rgba(2,10,26,.86);
  --panel-hd: rgba(3,13,32,.92);
  --border:   rgba(44,96,200,.22);

  /* Theme gradient orbs — overridden per theme via JS */
  --orb-a: rgba(0,60,200,.55);
  --orb-b: rgba(0,20,160,.45);
  --orb-c: rgba(40,100,240,.30);
}

/* ═══════════════════════════════════════════════════
   2. BODY — deep navy base + fixed ambient orbs
   ═══════════════════════════════════════════════════ */
body {
  background-color: var(--bg) !important;
  background-image:
    radial-gradient(ellipse 90% 60% at 15% -5%,  var(--orb-a) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 85% 105%, var(--orb-b) 0%, transparent 55%),
    radial-gradient(ellipse 55% 70% at 50%  50%, var(--orb-c) 0%, transparent 65%) !important;
  background-attachment: fixed !important;
}

/* Scrollbar — blue tint */
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(44,96,200,.45); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(60,130,255,.65); }

/* ═══════════════════════════════════════════════════
   3. AMBIENT BACKGROUND ORBS
   Applied to both index and compiler pages via
   fixed pseudo-elements on html element.
   ═══════════════════════════════════════════════════ */
html::before,
html::after {
  content: '';
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
html::before {
  width: 800px; height: 800px;
  background: radial-gradient(circle, rgba(0,80,255,.14) 0%, transparent 68%);
  top: -280px; right: -200px;
  filter: blur(80px);
  animation: orb-a 22s ease-in-out infinite alternate;
}
html::after {
  width: 650px; height: 650px;
  background: radial-gradient(circle, rgba(0,140,255,.10) 0%, transparent 68%);
  bottom: -150px; left: -180px;
  filter: blur(80px);
  animation: orb-b 28s ease-in-out infinite alternate-reverse;
}
@keyframes orb-a { 0%{transform:translate(0,0)} 100%{transform:translate(60px,50px)} }
@keyframes orb-b { 0%{transform:translate(0,0)} 100%{transform:translate(-50px,35px)} }

/* Third orb on the index hero — restyle blue/cyan */
.hero-blob-1 { background: radial-gradient(circle, rgba(0,80,255,.20) 0%, transparent 70%) !important; }
.hero-blob-2 { background: radial-gradient(circle, rgba(0,160,255,.12) 0%, transparent 70%) !important; }
.hero-blob-3 { background: radial-gradient(circle, rgba(60,0,200,.18)  0%, transparent 70%) !important; }

/* ═══════════════════════════════════════════════════
   4. NAVBAR (landing page)
   ═══════════════════════════════════════════════════ */
.navbar {
  background: rgba(2,12,32,.72) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(180%) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%) !important;
  border-bottom: 1px solid var(--glass-bd) !important;
  box-shadow: 0 2px 24px rgba(0,0,30,.5), inset 0 1px 0 rgba(255,255,255,.05) !important;
}

/* ═══════════════════════════════════════════════════
   5. COMPILER-PAGE TOP NAV + LANG BAR
   ═══════════════════════════════════════════════════ */
.top-nav {
  background: rgba(2,12,32,.76) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(180%) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%) !important;
  border-bottom: 1px solid var(--glass-bd) !important;
  box-shadow: 0 2px 20px rgba(0,0,30,.55), inset 0 1px 0 rgba(255,255,255,.05) !important;
  position: relative !important;
  z-index: 200 !important;
  overflow: visible !important;
}

.lang-bar {
  background: rgba(3,14,38,.68) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
  border-bottom: 1px solid var(--glass-bd2) !important;
}

.lang-switcher {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid var(--glass-bd) !important;
  color: var(--text) !important;
  backdrop-filter: blur(8px) !important;
  transition: background .2s, border-color .2s, box-shadow .2s !important;
}
.lang-switcher:hover {
  background: rgba(55,120,255,.12) !important;
  border-color: rgba(80,150,255,.35) !important;
  box-shadow: 0 0 10px rgba(55,120,255,.15) !important;
}

/* ═══════════════════════════════════════════════════
   6. WORKSPACE PANELS — glass + subtle 3D depth
   ═══════════════════════════════════════════════════ */
.panel {
  background: rgba(2,10,26,.80) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
  border: 1px solid var(--glass-bd) !important;
  border-radius: 16px !important;
  box-shadow:
    0 8px 40px rgba(0,10,40,.55),
    0 2px 8px rgba(0,0,20,.4),
    inset 0 1px 0 rgba(255,255,255,.07) !important;
  transform: perspective(1000px) translateZ(0);
  transition: box-shadow .3s, border-color .3s !important;
}
.panel:hover {
  border-color: rgba(70,130,255,.28) !important;
  box-shadow:
    0 12px 50px rgba(0,30,100,.35),
    0 4px 16px rgba(0,0,20,.5),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
}

.panel-header {
  background: rgba(3,12,32,.88) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(44,96,200,.20) !important;
}

.action-bar {
  background: rgba(3,12,32,.90) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-top: 1px solid rgba(44,96,200,.18) !important;
}

.output-body {
  background: rgba(2,8,22,.60) !important;
}

.icon-btn {
  background: rgba(255,255,255,.055) !important;
  border: 1px solid var(--glass-bd2) !important;
  transition: background .2s, border-color .2s, box-shadow .2s, transform .15s !important;
}
.icon-btn:hover {
  background: rgba(55,120,255,.14) !important;
  border-color: rgba(80,150,255,.30) !important;
  color: var(--text) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 10px rgba(0,40,150,.2) !important;
}

/* ═══════════════════════════════════════════════════
   7. STATUS BAR
   ═══════════════════════════════════════════════════ */
.status-bar {
  background: rgba(2,10,28,.90) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-top: 1px solid rgba(44,96,200,.18) !important;
}

/* ═══════════════════════════════════════════════════
   8. COMPILER CARDS (index page) — full glass + 3D
   ═══════════════════════════════════════════════════ */
.compiler-card {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(180%) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%) !important;
  border: 1px solid var(--glass-bd) !important;
  border-radius: 20px !important;
  box-shadow:
    0 4px 28px rgba(0,10,50,.50),
    0 1px 4px rgba(0,0,20,.35),
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.15) !important;
  transform: perspective(700px) translateZ(0) translateY(0);
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s, border-color .25s !important;
  will-change: transform;
}
.compiler-card::before {
  border-radius: 20px !important;
}
.compiler-card:hover {
  background: rgba(6,22,60,.60) !important;
  border-color: var(--card-accent, rgba(70,130,255,.40)) !important;
  transform: perspective(700px) translateY(-10px) rotateX(3deg) scale(1.02) !important;
  box-shadow:
    0 24px 64px rgba(0,40,180,.22),
    0 8px 24px rgba(0,0,30,.55),
    inset 0 1px 0 rgba(255,255,255,.13),
    0 0 0 1px var(--card-accent, rgba(70,130,255,.15)) !important;
  color: var(--text) !important;
  text-decoration: none !important;
}
.compiler-card:hover .compiler-arrow {
  color: var(--yellow) !important;
  gap: 8px !important;
}

/* Keep per-language icon backgrounds, but add backdrop blur */
.compiler-icon {
  backdrop-filter: blur(8px) !important;
  box-shadow: 0 2px 12px rgba(0,0,30,.3) !important;
}

/* ═══════════════════════════════════════════════════
   9. ORBIT (hero) — glass icons + glowing rings
   ═══════════════════════════════════════════════════ */
.orbit-ring {
  border: 1px solid rgba(44,96,255,.18) !important;
  border-style: solid !important;
  box-shadow: 0 0 30px rgba(0,60,200,.06) inset !important;
}

.orbit-icon {
  background: rgba(4,16,44,.65) !important;
  backdrop-filter: blur(14px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
  border: 1px solid rgba(55,120,255,.28) !important;
  box-shadow:
    0 4px 20px rgba(0,20,80,.45),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
  border-radius: 14px !important;
  transition: transform .25s, box-shadow .25s, border-color .25s !important;
}
.orbit-icon:hover {
  transform: scale(1.22) translateY(-3px) !important;
  border-color: rgba(80,160,255,.55) !important;
  box-shadow:
    0 12px 36px rgba(0,60,200,.35),
    0 0 0 2px rgba(80,160,255,.18),
    inset 0 1px 0 rgba(255,255,255,.15) !important;
}

.orbit-core-inner {
  background: radial-gradient(circle at 38% 32%, rgba(0,80,255,.42), rgba(2,12,36,.92)) !important;
  border: 1px solid rgba(0,100,255,.38) !important;
  box-shadow:
    0 0 60px rgba(0,80,255,.28),
    0 0 120px rgba(0,60,200,.14),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
  animation: core-pulse-blue 3s ease-in-out infinite !important;
}
@keyframes core-pulse-blue {
  0%,100% { box-shadow: 0 0 40px rgba(0,80,255,.25), 0 0 80px rgba(0,60,200,.12); }
  50%      { box-shadow: 0 0 80px rgba(0,100,255,.50), 0 0 140px rgba(0,80,220,.22); }
}

/* ═══════════════════════════════════════════════════
   10. STATS BAR
   ═══════════════════════════════════════════════════ */
.stats-bar {
  background: rgba(3,14,38,.60) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-top: 1px solid var(--glass-bd2) !important;
  border-bottom: 1px solid var(--glass-bd2) !important;
}

/* ═══════════════════════════════════════════════════
   11. AI FEATURE SECTION & CARDS
   ═══════════════════════════════════════════════════ */
.ai-section {
  background: linear-gradient(135deg, rgba(60,20,120,.10) 0%, rgba(20,40,120,.08) 100%) !important;
  border-top: 1px solid rgba(80,40,180,.18) !important;
  border-bottom: 1px solid rgba(80,40,180,.18) !important;
}

.ai-feature-card {
  background: rgba(40,18,100,.18) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(100,60,200,.28) !important;
  border-radius: 20px !important;
  box-shadow:
    0 4px 28px rgba(20,0,80,.30),
    inset 0 1px 0 rgba(255,255,255,.07) !important;
  transform: perspective(700px) translateZ(0);
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s, border-color .25s !important;
}
.ai-feature-card:hover {
  transform: perspective(700px) translateY(-8px) rotateX(3deg) scale(1.02) !important;
  box-shadow:
    0 20px 55px rgba(60,20,200,.25),
    0 4px 16px rgba(0,0,30,.4),
    inset 0 1px 0 rgba(255,255,255,.12) !important;
  border-color: rgba(124,58,237,.48) !important;
}

.code-demo {
  background: rgba(2,8,22,.88) !important;
  border: 1px solid rgba(44,96,200,.22) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 24px 64px rgba(0,0,40,.55) !important;
}
.code-demo-bar {
  background: rgba(255,255,255,.04) !important;
  border-bottom: 1px solid rgba(44,96,200,.14) !important;
}
.ai-stream-demo {
  background: rgba(14,12,28,.85) !important;
  border: 1px solid rgba(100,60,200,.28) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* ═══════════════════════════════════════════════════
   12. HOW IT WORKS — step numbers
   ═══════════════════════════════════════════════════ */
.step-num {
  background: linear-gradient(135deg, #0050ff, #0090ff) !important;
  box-shadow: 0 6px 24px rgba(0,80,255,.35) !important;
}
.step-line::before {
  background: linear-gradient(90deg, rgba(0,80,255,.45), rgba(0,140,255,.45)) !important;
}

/* ═══════════════════════════════════════════════════
   13. SECURITY CARDS
   ═══════════════════════════════════════════════════ */
.security-card {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(180%) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%) !important;
  border: 1px solid var(--glass-bd2) !important;
  border-radius: 16px !important;
  box-shadow:
    0 4px 20px rgba(0,10,40,.40),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
  transform: perspective(700px) translateZ(0);
  transition: transform .3s, box-shadow .3s, border-color .25s !important;
}
.security-card:hover {
  transform: perspective(700px) translateY(-5px) rotateX(2deg) !important;
  border-color: rgba(248,237,8,.35) !important;
  box-shadow:
    0 16px 44px rgba(0,20,60,.35),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
}

/* ═══════════════════════════════════════════════════
   14. FOOTER
   ═══════════════════════════════════════════════════ */
footer {
  background: rgba(2,8,24,.78) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-top: 1px solid var(--glass-bd2) !important;
}

/* ═══════════════════════════════════════════════════
   15. HERO BADGE
   ═══════════════════════════════════════════════════ */
.hero-badge {
  background: rgba(0,60,200,.18) !important;
  border: 1px solid rgba(0,100,255,.35) !important;
  color: #90c4ff !important;
  backdrop-filter: blur(8px) !important;
}
.hero-badge .dot { background: #60aaff !important; }

/* ═══════════════════════════════════════════════════
   16. HERO BUTTONS — keep yellow primary, style outline
   ═══════════════════════════════════════════════════ */
.btn-hero-outline {
  border: 1px solid rgba(60,120,255,.35) !important;
  background: rgba(0,40,120,.12) !important;
  backdrop-filter: blur(8px) !important;
}
.btn-hero-outline:hover {
  border-color: rgba(80,160,255,.55) !important;
  background: rgba(0,60,180,.18) !important;
  box-shadow: 0 4px 20px rgba(0,60,200,.18) !important;
}

/* ═══════════════════════════════════════════════════
   17. SECTION BADGES
   ═══════════════════════════════════════════════════ */
.section-badge {
  background: rgba(0,60,200,.14) !important;
  border: 1px solid rgba(0,100,255,.28) !important;
  color: #80b8ff !important;
}
.section-badge.purple {
  background: rgba(80,30,160,.18) !important;
  border-color: rgba(120,60,220,.35) !important;
  color: #c4b5fd !important;
}

/* ═══════════════════════════════════════════════════
   18. AI EXPLAIN / FIX MODAL backgrounds
   ═══════════════════════════════════════════════════ */
#ai-modal {
  background: rgba(4,12,30,.90) !important;
  backdrop-filter: blur(32px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(200%) !important;
  border: 1px solid rgba(80,60,200,.35) !important;
  box-shadow: 0 24px 80px rgba(0,0,40,.70), 0 0 0 1px rgba(255,255,255,.04) inset !important;
}
#ai-modal-header {
  border-bottom: 1px solid rgba(80,60,200,.18) !important;
}
#ai-modal-code-preview {
  background: rgba(2,8,22,.90) !important;
  border-bottom: 1px solid rgba(44,96,200,.14) !important;
}
#ai-modal-code-preview::after {
  background: linear-gradient(transparent, rgba(2,8,22,.90)) !important;
}
#ai-modal-footer {
  border-top: 1px solid rgba(44,96,200,.12) !important;
}

.fix-modal-content {
  background: rgba(4,12,30,.92) !important;
  backdrop-filter: blur(32px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(200%) !important;
  border: 1px solid rgba(180,100,0,.28) !important;
}

/* ═══════════════════════════════════════════════════
   19. LANG INFO DOT — keep glow, ensure visibility
   ═══════════════════════════════════════════════════ */
.lang-dot {
  box-shadow: 0 0 10px var(--lang-color), 0 0 20px var(--lang-color) !important;
}

/* ═══════════════════════════════════════════════════
   20. NAV CTA button glow
   ═══════════════════════════════════════════════════ */
.nav-cta {
  box-shadow: 0 0 16px rgba(248,237,8,.18) !important;
}
.nav-cta:hover {
  box-shadow: 0 4px 20px rgba(248,237,8,.38) !important;
}

/* ═══════════════════════════════════════════════════
   21. FILE CHIP in panel header
   ═══════════════════════════════════════════════════ */
.file-chip {
  background: rgba(0,40,120,.25) !important;
  border: 1px solid var(--glass-bd2) !important;
  box-shadow: 0 0 8px rgba(55,120,255,.10) !important;
}

/* ═══════════════════════════════════════════════════
   22. LANG BADGE pill
   ═══════════════════════════════════════════════════ */
.lang-badge {
  background: rgba(0,40,120,.22) !important;
  border: 1px solid var(--glass-bd) !important;
}

/* ═══════════════════════════════════════════════════
   23. z-index fix — keep content above html::before/after orbs
   ═══════════════════════════════════════════════════ */
body > * { position: relative; z-index: 1; }
#particles-canvas { z-index: 0 !important; }
.modal-backdrop,
#ai-modal-overlay,
.modal { z-index: 9998 !important; }
#ai-modal-overlay { z-index: 9999 !important; }

/* ═══════════════════════════════════════════════════
   16. TOGGLE / DOWNLOAD BUTTONS
   ═══════════════════════════════════════════════════ */
.btn-toggle {
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: var(--text) !important;
  border-radius: 50% !important;
  width: 34px; height: 34px;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  cursor: pointer; font-size: .9rem;
  transition: background .2s, transform .15s;
  flex-shrink: 0;
}
.btn-toggle:hover { background: rgba(255,255,255,.16) !important; transform: translateY(-1px); }
.btn-download {
  background: rgba(55,120,255,.12) !important;
  border: 1px solid rgba(55,120,255,.28) !important;
  color: #7ab4ff !important;
  border-radius: 20px !important; padding: 7px 15px !important;
  font-size: .84rem !important; font-weight: 600; cursor: pointer;
  display: inline-flex !important; align-items: center !important; gap: 6px !important;
  transition: background .2s, transform .15s;
  flex-shrink: 0;
}
.btn-download:hover { background: rgba(55,120,255,.22) !important; transform: translateY(-1px); }

/* ═══════════════════════════════════════════════════
   17. LIVE SERVER STATS BAR (compiler pages footer)
   ═══════════════════════════════════════════════════ */
.stats-live-bar {
  background: rgba(2,8,24,.88) !important;
  border-top: 1px solid rgba(44,96,200,.22) !important;
  padding: 5px 16px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap; flex-shrink: 0;
  font-size: .71rem; color: #7aa0c4;
  font-family: 'SF Mono','Fira Code','Cascadia Code',monospace;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}
.stat-live-item { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.stat-live-item b { color: #90c8ff; }
.stat-live-item i { opacity: .60; font-size: .7rem; }
.stat-live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #22c55e; box-shadow: 0 0 6px #22c55e;
  margin-left: auto; flex-shrink: 0;
  transition: background .5s, box-shadow .5s;
}

/* ═══════════════════════════════════════════════════
   18. EDITOR THEME OVERRIDES
   Dark (🌙) = monokai  |  Light (☀) = eclipse
   Theme-specific selectors (.cm-s-*) beat inline
   .CodeMirror !important (higher specificity).
   Page chrome stays dark in both modes.
   ═══════════════════════════════════════════════════ */

/* ── MONOKAI (dark toggle) — dark editor + dark output ── */
.cm-s-monokai.CodeMirror {
  background: #272822 !important;
  color: #f8f8f2 !important;
}
.cm-s-monokai .CodeMirror-gutters {
  background: #1e1f1c !important;
  border-right: 1px solid #3a3a2e !important;
}
.cm-s-monokai .CodeMirror-linenumber { color: #75715e !important; }
.cm-s-monokai .CodeMirror-cursor { border-left: 2px solid #f8f8f0 !important; }
.cm-s-monokai .CodeMirror-selected { background: rgba(255,255,255,.10) !important; }
.cm-s-monokai .CodeMirror-activeline-background { background: rgba(255,255,255,.04) !important; }
.cm-s-monokai .CodeMirror-matchingbracket { color: #a6e22e !important; background: rgba(166,226,46,.16) !important; }

/* ── ECLIPSE (light toggle) ── */
.cm-s-eclipse.CodeMirror {
  background: #ffffff !important;
  color: #000000 !important;
}
.cm-s-eclipse .CodeMirror-gutters {
  background: #f7f7f7 !important;
  border-right: 1px solid #dddddd !important;
}
.cm-s-eclipse .CodeMirror-linenumber { color: #999999 !important; }
.cm-s-eclipse .CodeMirror-cursor { border-left: 2px solid #222 !important; }
.cm-s-eclipse .CodeMirror-selected { background: #d6e4f7 !important; }
.cm-s-eclipse .CodeMirror-activeline-background { background: #e8f2ff !important; }
.cm-s-eclipse .CodeMirror-matchingbracket { color: #0b5 !important; background: rgba(0,187,85,.14) !important; }

/* ── Output panel — eclipse (light) state ── */
body.editor-light .output-body {
  background: #fafafa !important;
  color: #1a1a1a !important;
}
body.editor-light #outputText { color: #1a1a1a !important; }
body.editor-light .panel-header {
  background: #f0f0f0 !important;
  border-bottom-color: #ddd !important;
  color: #444 !important;
}
body.editor-light .panel-title,
body.editor-light .panel-title i { color: #555 !important; }
body.editor-light .panel { border-color: rgba(0,0,0,.15) !important; }
body.editor-light .icon-btn { color: #666 !important; }
body.editor-light .icon-btn:hover { color: #111 !important; background: rgba(0,0,0,.08) !important; }
body.editor-light .status-badge.status-ready  { color: #2a7a3a !important; }
body.editor-light .status-badge.status-done   { color: #1e6090 !important; }
body.editor-light .status-badge.status-error  { color: #b91c1c !important; }

/* ═══════════════════════════════════════════════════
   19. NAVBAR — logo, nav links, auth UI
   ═══════════════════════════════════════════════════ */

/* Logo */
.nav-logo-img {
  height: 20px !important;
  width: auto;
  display: block;
  opacity: .92;
  transition: opacity .2s;
}
.nav-logo-link { display: flex; align-items: center; padding: 0 !important; }
.nav-logo-link:hover .nav-logo-img { opacity: 1; }

/* Compact navbar overall */
.top-nav.navbar { padding-top: .45rem !important; padding-bottom: .45rem !important; min-height: 50px; }

/* Hamburger — replace default icon with Bootstrap Icon */
.nav-toggler-btn {
  border: none !important;
  box-shadow: none !important;
  background: rgba(255,255,255,.07) !important;
  border-radius: 8px !important;
  padding: .3rem .55rem !important;
  color: #94a3b8 !important;
  font-size: 1.15rem !important;
  line-height: 1;
  transition: background .2s, color .2s !important;
}
.nav-toggler-btn:hover { background: rgba(255,255,255,.13) !important; color: #e2e8f0 !important; }

/* Centre text links (logged-in) */
.nav-centre-links {
  display: flex !important;
  flex-direction: row;
  align-items: center;
  gap: .1rem;
  list-style: none;
  padding: 0; margin: 0;
}
.nav-text-link {
  display: flex;
  align-items: center;
  gap: .38rem;
  padding: .3rem .75rem;
  border-radius: 8px;
  font-size: .8rem;
  font-weight: 500;
  color: #94a3b8;
  text-decoration: none;
  transition: background .18s, color .18s;
  white-space: nowrap;
}
.nav-text-link i { font-size: .78rem; }
.nav-text-link:hover {
  background: rgba(255,255,255,.08);
  color: #d8eaff;
  text-decoration: none;
}
.nav-text-link.active {
  background: rgba(55,120,255,.12);
  color: #93c5fd;
}

/* Actions group */
.nav-actions-group {
  display: flex;
  align-items: center;
  gap: .25rem;
  flex-wrap: nowrap;
}

/* Divider */
.nav-divider {
  width: 1px;
  height: 20px;
  background: rgba(255,255,255,.10);
  margin: 0 .4rem;
  flex-shrink: 0;
}

/* Avatar — default gradient shown if no inline color is set */
.nav-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 800; color: #fff; flex-shrink: 0;
  background: linear-gradient(135deg, #3b82f6, #6366f1); /* fallback */
  box-shadow: 0 0 0 2px rgba(255,255,255,.18), 0 2px 10px rgba(0,0,0,.4);
  letter-spacing: .02em;
  text-transform: uppercase;
}

.nav-username {
  font-size: .8rem; font-weight: 600; color: #e2e8f0;
  max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* User chip (avatar + name pill) */
.nav-user-chip {
  display: flex; align-items: center; gap: .5rem;
  text-decoration: none;
  padding: .28rem .7rem .28rem .35rem;
  border-radius: 24px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.13);
  transition: background .2s, border-color .2s, box-shadow .2s;
  box-shadow: 0 1px 6px rgba(0,0,0,.2);
}
.nav-user-chip:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 2px 12px rgba(0,0,0,.3);
  text-decoration: none;
}

/* Icon buttons */
.nav-icon-btn {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 9px; color: #94a3b8; text-decoration: none;
  font-size: .92rem;
  transition: background .18s, color .18s;
  border: 1px solid transparent;
}
.nav-icon-btn:hover {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.12);
  color: #e2e8f0;
  text-decoration: none;
}
.nav-icon-logout { color: #94a3b8; }
.nav-icon-logout:hover { color: #f87171 !important; background: rgba(239,68,68,.10) !important; border-color: rgba(239,68,68,.18) !important; }

/* Auth buttons */
.nav-btn-auth {
  text-decoration: none; padding: .35rem .9rem; border-radius: 9px;
  font-size: .8rem; font-weight: 600; transition: all .2s;
  display: inline-flex; align-items: center; white-space: nowrap;
}
.nav-btn-login {
  color: #94a3b8; border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
}
.nav-btn-login:hover {
  color: #e2e8f0; border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.08);
}
.nav-btn-register {
  background: #F8ED08; color: #012A4A !important;
  margin-left: .2rem;
  border-radius: 9px;
  box-shadow: 0 0 14px rgba(248,237,8,.25);
}
.nav-btn-register:hover { opacity: .90; box-shadow: 0 0 22px rgba(248,237,8,.40); }

/* Mobile collapse menu */
@media (max-width: 991px) {
  .nav-centre-links { flex-direction: column; align-items: flex-start; gap: .1rem; margin: .4rem 0; }
  .nav-actions-group { flex-wrap: wrap; padding: .4rem 0; gap: .4rem; }
  .nav-divider { display: none; }
  .nav-username { max-width: 100%; }
}

/* ═══════════════════════════════════════════════════
   19b. LOGO DROPDOWN MENU
   ═══════════════════════════════════════════════════ */

/* Wrapper — position anchor */
.nav-logo-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

/* Logo + avatar trigger button */
.nav-logo-btn {
  background: none; border: none; padding: .25rem .5rem .25rem .15rem;
  display: flex; align-items: center; gap: .55rem;
  cursor: pointer; border-radius: 10px;
  transition: background .18s;
  outline: none;
}
.nav-logo-btn:hover { background: rgba(255,255,255,.07); }
.nav-logo-btn:focus-visible { box-shadow: 0 0 0 2px rgba(55,120,255,.45); }

/* Chevron rotates when open */
.nav-logo-chevron {
  color: #527898; font-size: .7rem;
  transition: transform .22s, color .18s;
  flex-shrink: 0;
}
.nav-logo-wrap.open .nav-logo-chevron { transform: rotate(180deg); color: #93c5fd; }

/* Logo avatar (small) next to logo image */
.nav-logo-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .68rem; font-weight: 800; color: #fff;
  box-shadow: 0 0 0 2px rgba(255,255,255,.18), 0 2px 8px rgba(0,0,0,.4);
  flex-shrink: 0;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.nav-logo-name {
  font-size: .82rem; font-weight: 600; color: #e2e8f0;
  max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Dropdown panel */
.nav-logo-drop {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: 272px;
  background: rgba(4,14,38,.95);
  border: 1px solid rgba(55,120,255,.22);
  border-radius: 18px;
  padding: .55rem .55rem .65rem;
  backdrop-filter: blur(32px) saturate(200%);
  -webkit-backdrop-filter: blur(32px) saturate(200%);
  box-shadow: 0 24px 64px rgba(0,5,30,.65), 0 4px 20px rgba(0,0,0,.45),
              inset 0 1px 0 rgba(255,255,255,.07);
  z-index: 3000;
  display: none;
}
@keyframes nldSlideIn {
  from { opacity: 0; transform: translateY(-10px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.nav-logo-wrap.open .nav-logo-drop {
  display: block;
  animation: nldSlideIn .2s cubic-bezier(.16,1,.3,1);
}

/* Nav items inside dropdown */
.nld-item {
  display: flex; align-items: center; gap: .55rem;
  padding: .48rem .75rem;
  border-radius: 10px;
  font-size: .82rem; font-weight: 500;
  color: #94a3b8; text-decoration: none;
  transition: background .14s, color .14s;
}
.nld-item:hover { background: rgba(255,255,255,.08); color: #e2e8f0; text-decoration: none; }
.nld-item.nld-active { background: rgba(55,120,255,.14); color: #93c5fd; }
.nld-item i { font-size: .85rem; width: 16px; text-align: center; flex-shrink: 0; }
.nld-item-danger { color: #f87171 !important; }
.nld-item-danger:hover { background: rgba(239,68,68,.10) !important; color: #fca5a5 !important; }

.nld-divider { height: 1px; background: rgba(55,120,255,.12); margin: .38rem .3rem; }

.nld-label {
  font-size: .63rem; font-weight: 700; color: #527898;
  text-transform: uppercase; letter-spacing: .09em;
  padding: .4rem .75rem .3rem;
}

/* Theme swatch grid — 7 columns */
.nld-swatches {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: .3rem;
  padding: .15rem .5rem .3rem;
}
.nld-swatch {
  width: 28px; height: 28px; border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform .15s, border-color .15s, box-shadow .15s;
  box-shadow: 0 2px 6px rgba(0,0,0,.45);
}
.nld-swatch:hover { transform: scale(1.22); box-shadow: 0 4px 14px rgba(0,0,0,.55); }
.nld-swatch.nld-active { border-color: #F8ED08; transform: scale(1.18); box-shadow: 0 0 0 3px rgba(248,237,8,.28); }

/* ═══════════════════════════════════════════════════
   20. ENHANCED 3D DEPTH & GLASS EFFECTS
   ═══════════════════════════════════════════════════ */

/* Stronger glass for settings / profile / dashboard pages */
.settings-section,
.profile-hero,
.info-card,
.bio-card,
.auth-card {
  backdrop-filter: blur(28px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(200%) !important;
  border: 1px solid rgba(55,120,255,.15) !important;
  box-shadow:
    0 8px 40px rgba(0,10,50,.45),
    0 2px 8px rgba(0,0,20,.3),
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.10) !important;
  transition: box-shadow .3s, border-color .3s, transform .3s !important;
}
.settings-section:hover,
.info-card:hover {
  border-color: rgba(70,130,255,.25) !important;
  box-shadow:
    0 14px 50px rgba(0,20,90,.30),
    0 4px 16px rgba(0,0,30,.4),
    inset 0 1px 0 rgba(255,255,255,.13) !important;
}

/* Auth card 3D tilt on hover */
.auth-card {
  transform: perspective(900px) translateZ(0) translateY(0) !important;
  transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s !important;
}
.auth-card:hover {
  transform: perspective(900px) translateY(-6px) rotateX(2deg) !important;
}

/* Primary button glow */
.btn-save:hover,
.btn-auth:hover,
.edit-btn:hover {
  box-shadow: 0 0 20px rgba(248,237,8,.35), 0 4px 16px rgba(0,0,30,.3) !important;
}

/* Frosted input fields */
.auth-input {
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  transition: border-color .2s, background .2s, box-shadow .2s !important;
}
.auth-input:focus {
  box-shadow: 0 0 0 3px rgba(248,237,8,.12), inset 0 0 0 1px rgba(248,237,8,.25) !important;
}

/* Dashboard lang cards — stronger glass */
.lang-card {
  backdrop-filter: blur(28px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(200%) !important;
}

/* Ambient orbs — more vivid on inner pages */
.dash-orb-a {
  position: fixed;
  width: 700px; height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,80,255,.16) 0%, transparent 68%);
  top: -250px; right: -180px;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
  animation: orb-a 22s ease-in-out infinite alternate;
}
.dash-orb-b {
  position: fixed;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,130,255,.10) 0%, transparent 68%);
  bottom: -130px; left: -160px;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
  animation: orb-b 28s ease-in-out infinite alternate-reverse;
}

/* ═══════════════════════════════════════════════════
   21. MOBILE RESPONSIVE — ALL PAGES
   ═══════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Compiler workspace stacking */
  .workspace,
  .workspace-row {
    flex-direction: column !important;
  }
  .editor-panel,
  .output-panel,
  .panel {
    width: 100% !important;
    min-height: 40vh;
  }

  /* Index page orbit — hide on small screens */
  .orbit-container,
  .orbit-section {
    display: none !important;
  }

  /* Hero text */
  .hero-content {
    text-align: center !important;
    padding: 1rem !important;
  }
  .hero-title {
    font-size: clamp(1.8rem, 6vw, 2.8rem) !important;
  }

  /* Stats bar wrapping */
  .stats-bar {
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: center !important;
  }

  /* Compiler cards — 2 columns */
  .compilers-grid,
  .compiler-cards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Settings page */
  .row-2 {
    grid-template-columns: 1fr !important;
  }

  /* Profile hero */
  .profile-hero {
    flex-direction: column !important;
    text-align: center !important;
  }
  .profile-hero > div:last-child {
    margin-left: 0 !important;
    width: 100%;
  }

  /* Info grid */
  .info-grid {
    grid-template-columns: 1fr !important;
  }

  /* Auth page — reduce padding */
  .auth-card {
    padding: 1.75rem 1.25rem !important;
    border-radius: 18px !important;
  }

  /* Nav username — hide on small screens */
  .nav-username {
    display: none !important;
  }

  /* Lang bar wrapping */
  .lang-bar {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: .4rem !important;
  }

  /* Action bar */
  .action-bar {
    flex-wrap: wrap !important;
    gap: .4rem !important;
  }
}

@media (max-width: 480px) {
  /* Single column cards on phone */
  .compilers-grid,
  .compiler-cards-grid {
    grid-template-columns: 1fr !important;
  }
  .section-title,
  .dash-section-title { font-size: .7rem !important; }
  .hero-title { font-size: 1.7rem !important; }
  .hero-cta-group { flex-direction: column !important; align-items: center !important; }

  /* Navbar compact — logo stays small */
  .top-nav { padding: .4rem .75rem !important; }
  .nav-logo-img { height: 18px !important; }

  /* Color swatches wrap nicely */
  .color-swatches { gap: .5rem !important; }
  .color-swatch { width: 26px !important; height: 26px !important; }
}

/* ── Global mobile page padding for auth pages ── */
@media (max-width: 900px) {
  /* Sticky navbar on mobile (page scrolls naturally) */
  .top-nav { position: sticky !important; top: 0 !important; z-index: 400 !important; }
}
@media (max-width: 600px) {
  .nav-logo-img { height: 18px !important; }
  .page { padding: 0 .85rem !important; margin-top: 1.5rem !important; }
  .settings-section { padding: 1.25rem 1rem !important; border-radius: 14px !important; }
  .row-2 { grid-template-columns: 1fr !important; }
  .profile-hero { flex-direction: column !important; align-items: flex-start !important; padding: 1.25rem !important; }
  .info-grid { grid-template-columns: 1fr !important; }
}

/* ── Site footer ── */
.site-footer {
  background: rgba(2,8,24,.70);
  border-top: 1px solid rgba(55,120,255,.10);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 1.2rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  font-size: .74rem;
  color: #527898;
  margin-top: auto;
}
.site-footer a { color: #527898; text-decoration: none; transition: color .18s; }
.site-footer a:hover { color: #93c5fd; }
.site-footer-links { display: flex; gap: 1.25rem; }
@media (max-width: 480px) {
  .site-footer { flex-direction: column; text-align: center; padding: 1rem; gap: .4rem; }
  .site-footer-links { justify-content: center; gap: .85rem; }
}

/* ═══════════════════════════════════════════════════
   22. NAVBAR MOBILE TOGGLER — glass theme
   ═══════════════════════════════════════════════════ */
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28200%2C220%2C255%2C.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* ═══════════════════════════════════════════════════
   23. PROFILE / SETTINGS / AUTH PAGES — glass background
   ═══════════════════════════════════════════════════ */
.pnav {
  background: rgba(2,12,32,.76) !important;
  backdrop-filter: blur(22px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(180%) !important;
  border-bottom: 1px solid rgba(55,120,255,.18) !important;
  box-shadow: 0 2px 20px rgba(0,0,30,.55), inset 0 1px 0 rgba(255,255,255,.05) !important;
}

/* Glowing section borders */
.settings-section {
  background: rgba(4,16,44,.52) !important;
}
.profile-hero,
.info-card,
.bio-card {
  background: rgba(4,16,44,.50) !important;
}