/*
 * CodeCampus LMS v2.9.73 — Premium Agency Design System
 * Direction: Linear restraint + Stripe polish + Apple hierarchy.
 * Non-invasive: visual layer only; no structural/layout rewrites of feature UIs.
 */

:root {
  --cc-font-display: "Manrope", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cc-font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cc-font-code: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --cc-ink-950: #07111F;
  --cc-ink-900: #0B1728;
  --cc-ink-850: #0D1C31;
  --cc-ink-800: #11243D;
  --cc-ink-700: #18304D;
  --cc-line-dark: rgba(112, 145, 190, .18);
  --cc-text-dark: #F5F8FF;
  --cc-muted-dark: #9FB1CB;

  --cc-canvas-light: #F6F8FC;
  --cc-surface-light: #FFFFFF;
  --cc-surface-soft: #F0F4FA;
  --cc-line-light: #D8E2F0;
  --cc-text-light: #0C1C33;
  --cc-muted-light: #566C88;

  --cc-violet: #6D5DFB;
  --cc-violet-soft: #8B7CFF;
  --cc-cyan: #21C8F6;
  --cc-cyan-deep: #0891B2;
  --cc-mint: #4ADEA8;
  --cc-gold: #F4B740;
  --cc-danger: #F35D7B;

  --cc-radius-sm: 12px;
  --cc-radius-md: 16px;
  --cc-radius-lg: 22px;
  --cc-radius-xl: 28px;
  --cc-shadow-dark: 0 24px 70px rgba(0, 0, 0, .26);
  --cc-shadow-light: 0 20px 55px rgba(24, 46, 82, .10);
  --cc-ease-premium: cubic-bezier(.22, 1, .36, 1);
}

html { font-family: var(--cc-font-ui); }
body,
button,
input,
textarea,
select { font-family: var(--cc-font-ui); }

h1, h2, h3, h4, h5, h6,
.top-title b,
.brand b,
.eyebrow + h1,
.eyebrow + h2 {
  font-family: var(--cc-font-display);
  letter-spacing: -.025em;
}

code, pre, kbd, samp,
[class*="code-input"],
[class*="editor"] textarea,
.java-workspace textarea {
  font-family: var(--cc-font-code);
}

/* Premium shell — subtle, not template-y */
body {
  background:
    radial-gradient(circle at 18% -12%, rgba(109,93,251,.10), transparent 31%),
    radial-gradient(circle at 91% 0%, rgba(33,200,246,.08), transparent 30%),
    var(--cc-ink-950);
}
html[data-theme="light"] body {
  background:
    radial-gradient(circle at 14% -8%, rgba(109,93,251,.08), transparent 30%),
    radial-gradient(circle at 94% 2%, rgba(33,200,246,.075), transparent 29%),
    var(--cc-canvas-light);
}

/* Existing ambient layers become the blurred premium orbs. */
.ambient {
  filter: blur(72px) saturate(112%);
  opacity: .24;
  pointer-events: none;
  will-change: transform;
}
.ambient-a {
  background: rgba(109,93,251,.42) !important;
}
.ambient-b {
  background: rgba(33,200,246,.34) !important;
}
html[data-theme="light"] .ambient { opacity: .14; }

.cc-agency-orb {
  position: fixed;
  z-index: -1;
  pointer-events: none;
  width: clamp(220px, 26vw, 430px);
  aspect-ratio: 1;
  border-radius: 999px;
  filter: blur(90px);
  opacity: .13;
  will-change: transform;
}
.cc-agency-orb.a {
  top: 8vh;
  left: 24vw;
  background: #6D5DFB;
}
.cc-agency-orb.b {
  right: 4vw;
  bottom: 4vh;
  background: #21C8F6;
}
html[data-theme="light"] .cc-agency-orb { opacity: .075; }

/* Sidebar/topbar: premium surface, no geometry changes. */
.sidebar,
.topbar {
  backdrop-filter: blur(20px) saturate(130%);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
}
.sidebar {
  background: color-mix(in srgb, var(--cc-ink-900) 92%, transparent) !important;
  border-right-color: rgba(116, 145, 184, .13) !important;
}
.topbar {
  background: color-mix(in srgb, var(--cc-ink-950) 82%, transparent) !important;
  border-bottom-color: rgba(116, 145, 184, .13) !important;
}
html[data-theme="light"] .sidebar,
html[data-theme="light"] .topbar {
  background: rgba(255,255,255,.88) !important;
  border-color: rgba(151,170,198,.30) !important;
}

.premium-brand .brand-logo,
.brand-logo {
  box-shadow: 0 12px 28px rgba(50, 98, 255, .18);
}

.side-nav a {
  border-radius: 14px;
  transition:
    color .22s var(--cc-ease-premium),
    background-color .22s var(--cc-ease-premium),
    border-color .22s var(--cc-ease-premium),
    transform .22s var(--cc-ease-premium);
}
@media (hover:hover) and (pointer:fine) {
  .side-nav a:hover { transform: translateX(2px); }
}
.side-nav a.active {
  box-shadow: inset 0 0 0 1px rgba(109,93,251,.18), 0 8px 28px rgba(54, 68, 122, .07);
}

/* Buttons — premium tactile surface, no layout assumptions. */
.btn,
button:not(.unstyled),
.icon-btn {
  transition:
    transform .2s var(--cc-ease-premium),
    box-shadow .2s var(--cc-ease-premium),
    border-color .2s ease,
    background-color .2s ease,
    color .2s ease,
    opacity .2s ease;
}

.btn.primary,
button.btn.primary,
button[type="submit"].primary {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #6858F6 0%, #5B71FA 48%, #20BDEA 100%) !important;
  border-color: rgba(255,255,255,.14) !important;
  box-shadow:
    0 14px 32px rgba(72, 86, 236, .18),
    inset 0 1px 0 rgba(255,255,255,.18);
}
.btn.primary::after,
button.btn.primary::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 28%, rgba(255,255,255,.16) 46%, transparent 64%);
  transform: translateX(-135%);
  transition: transform .7s var(--cc-ease-premium);
}
@media (hover:hover) and (pointer:fine) {
  .btn.primary:hover::after,
  button.btn.primary:hover::after { transform: translateX(135%); }
}

/* Glass/card refinement — targets common cards but never changes their display/grid. */
.glass,
.card,
[class*="-card"],
[class*="panel"],
[class*="surface"] {
  border-color: rgba(115, 143, 181, .18);
}
html:not([data-theme="light"]) .glass,
html:not([data-theme="light"]) .card {
  box-shadow: 0 20px 60px rgba(0,0,0,.11);
}
html[data-theme="light"] .glass,
html[data-theme="light"] .card {
  box-shadow: 0 16px 42px rgba(36,58,92,.06);
}

/* Inputs: focused, Stripe-like clarity */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
textarea,
select {
  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    background-color .2s ease;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
textarea:focus,
select:focus {
  border-color: rgba(33,200,246,.58) !important;
  box-shadow: 0 0 0 4px rgba(33,200,246,.09) !important;
  outline: none;
}

/* Progress bar: minimal gradient line */
.premium-page-progress {
  height: 2px !important;
  background: linear-gradient(90deg, var(--cc-violet), var(--cc-cyan)) !important;
  box-shadow: 0 0 16px rgba(33,200,246,.32);
}

/* Scroll reveals are opt-in only: JS adds cc-reveal-target. */
html.cc-motion-ready:not(.cc-reduced-motion) .cc-reveal-target {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  will-change: transform, opacity;
}
html.cc-motion-ready:not(.cc-reduced-motion) .cc-reveal-target.cc-revealed {
  opacity: 1;
  transform: none;
  transition:
    opacity .58s var(--cc-ease-premium),
    transform .58s var(--cc-ease-premium);
}

/* Parallax only when JS explicitly opts an element in. */
.cc-parallax-safe {
  will-change: transform;
  transform: translateZ(0);
}

/* Premium cursor companion — native cursor is retained. */
.cc-cursor-dot,
.cc-cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2147483000;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-100px,-100px,0);
  transition: opacity .18s ease, width .18s ease, height .18s ease, border-color .18s ease, background-color .18s ease;
}
.cc-cursor-dot {
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 999px;
  background: var(--cc-cyan);
  box-shadow: 0 0 14px rgba(33,200,246,.42);
}
.cc-cursor-ring {
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border-radius: 999px;
  border: 1px solid rgba(125,146,184,.44);
  background: rgba(109,93,251,.025);
}
html.cc-cursor-interactive .cc-cursor-ring {
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  border-color: rgba(33,200,246,.55);
  background: rgba(33,200,246,.055);
}
html.cc-cursor-input .cc-cursor-ring {
  opacity: 0 !important;
}

/* Micro hover elevation only on safe static surfaces selected by JS. */
.cc-hover-lift {
  transition:
    transform .22s var(--cc-ease-premium),
    box-shadow .22s var(--cc-ease-premium),
    border-color .22s ease;
}
@media (hover:hover) and (pointer:fine) {
  .cc-hover-lift:hover {
    transform: translateY(-2px);
    border-color: rgba(33,200,246,.24) !important;
  }
}

/* Keep critical interactive systems function-first. */
#javaIde,
.java-workspace,
[class*="java-workspace"],
[class*="editor"],
[class*="terminal"],
[class*="console"],
[class*="assessment-take"],
[class*="quiz-stage"],
.tb-answer-area,
.tb-choice-grid,
.clash-answer-zone-v270,
.live-coding-code-view {
  --cc-disable-decorative-motion: 1;
}

/* Light mode: premium, readable, never washed out. */
html[data-theme="light"] body,
html[data-theme="light"] .premium-content {
  color: var(--cc-text-light);
}
html[data-theme="light"] .glass,
html[data-theme="light"] .card,
html[data-theme="light"] [class*="panel"] {
  border-color: rgba(157,178,207,.38);
}

/* Responsive/mobile: reduce decoration and never consume layout space. */
@media (max-width: 900px), (hover:none), (pointer:coarse) {
  .cc-cursor-dot,
  .cc-cursor-ring { display: none !important; }
  .cc-agency-orb { opacity: .045; filter: blur(78px); }
  .ambient { opacity: .10; }
  html[data-theme="light"] .ambient { opacity: .07; }
}

@media (max-width: 640px) {
  .cc-agency-orb { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
  }
  .cc-agency-orb,
  .ambient { animation: none !important; transform: none !important; }
  .cc-reveal-target { opacity: 1 !important; transform: none !important; transition: none !important; }
  .cc-hover-lift:hover { transform: none !important; }
  .btn.primary::after { display: none; }
}