/* ============================================================================
   TUROKO LMS — Premium design layer (v40)

   Loads last, on top of every existing stylesheet. Nothing else is edited, so
   removing the two <link>/<script> lines in partials/header.php and footer.php
   restores the previous look exactly.

   Structure
     01  Tokens          type scale, spacing, elevation, easing
     02  Foundation      body ground, ambient field, selection, focus, scrollbar
     03  Typography      headings, eyebrows, numerals
     04  Surfaces        panels, cards, glass, dividers
     05  Navigation      sidebar, topbar, brand
     06  Controls        buttons, inputs, chips, badges
     07  Data            tables, lists, stats, metrics
     08  Feedback        toasts, empty states, progress
     09  Motion          entrances, hover physics, reduced-motion
     10  Auth            login, register, recovery
     11  Responsive
   ========================================================================= */

/* ---------------------------------------------------------------- 01 tokens */

:root {
  /* Type scale — 1.200 minor third, clamped for fluid sizing. */
  --t-xs:   clamp(.688rem, .66rem + .12vw, .75rem);
  --t-sm:   clamp(.78rem,  .75rem + .14vw, .845rem);
  --t-base: clamp(.875rem, .85rem + .16vw, .95rem);
  --t-md:   clamp(1.02rem, .98rem + .2vw,  1.125rem);
  --t-lg:   clamp(1.22rem, 1.14rem + .38vw, 1.42rem);
  --t-xl:   clamp(1.5rem,  1.34rem + .74vw, 2rem);
  --t-2xl:  clamp(1.95rem, 1.65rem + 1.4vw, 2.9rem);
  --t-3xl:  clamp(2.4rem,  1.9rem + 2.3vw,  3.9rem);

  --lead-tight: 1.12;
  --lead-snug:  1.28;
  --lead-body:  1.62;

  --track-tight: -.022em;
  --track-snug:  -.014em;
  --track-wide:  .085em;

  /* Spacing — 4px base, so vertical rhythm stays predictable. */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px;
  --s9: 56px; --s10: 72px;

  /* Elevation. Layered shadows read as real depth; a single blur does not. */
  --e1: 0 1px 2px rgba(3, 8, 18, .28);
  --e2: 0 2px 4px rgba(3, 8, 18, .22), 0 6px 14px rgba(3, 8, 18, .24);
  --e3: 0 4px 10px rgba(3, 8, 18, .26), 0 16px 34px rgba(3, 8, 18, .3);
  --e4: 0 10px 24px rgba(3, 8, 18, .3), 0 32px 68px rgba(3, 8, 18, .38);
  --glow-accent: 0 0 0 1px rgba(124, 92, 255, .28), 0 8px 32px rgba(124, 92, 255, .22);
  --glow-cyan:   0 0 0 1px rgba(23, 199, 255, .26), 0 8px 30px rgba(23, 199, 255, .18);

  /* Hairlines that survive on both grounds. */
  --edge:        rgba(151, 177, 211, .13);
  --edge-strong: rgba(151, 177, 211, .22);
  --edge-bright: rgba(255, 255, 255, .06);

  /* Motion. Short, decisive, never bouncy for functional UI. */
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --d-fast: .16s;
  --d-mid:  .28s;
  --d-slow: .52s;

  --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px;
}

:root[data-theme="light"] {
  --e1: 0 1px 2px rgba(24, 46, 78, .07);
  --e2: 0 2px 4px rgba(24, 46, 78, .06), 0 6px 16px rgba(24, 46, 78, .08);
  --e3: 0 4px 10px rgba(24, 46, 78, .07), 0 16px 36px rgba(24, 46, 78, .1);
  --e4: 0 10px 24px rgba(24, 46, 78, .09), 0 32px 70px rgba(24, 46, 78, .13);
  --edge:        rgba(24, 46, 78, .1);
  --edge-strong: rgba(24, 46, 78, .16);
  --edge-bright: rgba(255, 255, 255, .9);
}

/* ------------------------------------------------------------ 02 foundation */

body {
  font-feature-settings: "cv02" 1, "cv03" 1, "cv04" 1, "ss01" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: var(--track-snug);
}

/* A quieter, deeper ground than three stacked radial gradients. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 12% -12%, rgba(124, 92, 255, .16), transparent 58%),
    radial-gradient(90% 70% at 104% 8%,   rgba(23, 199, 255, .11), transparent 52%),
    radial-gradient(70% 60% at 50% 108%,  rgba(54, 211, 153, .05), transparent 60%);
}
:root[data-theme="light"] body::before {
  background:
    radial-gradient(120% 80% at 12% -12%, rgba(124, 92, 255, .1), transparent 58%),
    radial-gradient(90% 70% at 104% 8%,   rgba(23, 199, 255, .09), transparent 52%);
}

/* Retire the old floating blobs; the gradient field above replaces them. */
.ambient { display: none !important; }

::selection { background: rgba(124, 92, 255, .34); color: #fff; }

/* One focus treatment everywhere, visible on any surface. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent2);
  outline-offset: 2px;
  border-radius: 6px;
}

* { scrollbar-width: thin; scrollbar-color: rgba(151, 177, 211, .26) transparent; }
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(151, 177, 211, .2);
  border: 3px solid transparent;
  border-radius: 99px;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(151, 177, 211, .36); background-clip: content-box; }

/* ------------------------------------------------------------ 03 typography */

h1, .h1 { font-size: var(--t-xl);  line-height: var(--lead-tight); letter-spacing: var(--track-tight); font-weight: 800; }
h2, .h2 { font-size: var(--t-lg);  line-height: var(--lead-snug);  letter-spacing: var(--track-tight); font-weight: 780; }
h3, .h3 { font-size: var(--t-md);  line-height: var(--lead-snug);  letter-spacing: var(--track-snug);  font-weight: 740; }

/* Section headers get a display-scale title and a calm supporting line. */
.section-head h1,
.lms-page-heading h1 {
  font-size: var(--t-2xl);
  line-height: 1.05;
  letter-spacing: -.03em;
  font-weight: 850;
  background: linear-gradient(168deg, var(--text) 24%, color-mix(in srgb, var(--text) 62%, transparent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.section-head p,
.lms-page-heading p {
  font-size: var(--t-base);
  line-height: var(--lead-body);
  max-width: 62ch;
  color: var(--muted);
}

/* The eyebrow is the smallest type on screen; it must stay legible. */
.eyebrow {
  font-size: var(--t-xs);
  font-weight: 800;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--accent2);
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
}
.eyebrow::before {
  content: "";
  width: 14px; height: 1px;
  background: linear-gradient(90deg, transparent, currentColor);
}

/* Figures line up in columns when tabular. */
.stat-card b, .metric-line b, .hy-summary b,
td:has(+ td), .num, [class*="score"] b {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* -------------------------------------------------------------- 04 surfaces */

/* Panels: a real edge, a soft inner top highlight, layered shadow. */
.glass, .panel, .card, .stat-card,
[class*="-card-v"], [class*="-panel-v"] {
  position: relative;
  border-radius: var(--r-lg);
  border: 1px solid var(--edge);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .035), transparent 42%),
    var(--panel-solid);
  box-shadow: var(--e2);
  transition:
    transform var(--d-mid) var(--ease-out),
    box-shadow var(--d-mid) var(--ease-out),
    border-color var(--d-mid) var(--ease-out);
}
:root[data-theme="light"] .glass,
:root[data-theme="light"] .panel,
:root[data-theme="light"] .card,
:root[data-theme="light"] .stat-card,
:root[data-theme="light"] [class*="-card-v"],
:root[data-theme="light"] [class*="-panel-v"] {
  background: linear-gradient(180deg, #fff, #fcfdff);
  border-color: var(--edge);
}

/* A hairline of light along the top edge — the detail that reads as crafted. */
.glass::before, .panel::before, [class*="-panel-v"]::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, var(--edge-bright) 22%, var(--edge-bright) 78%, transparent);
  pointer-events: none;
}

/* Interactive cards lift; static panels do not. */
a.card:hover, .card[href]:hover,
.stat-card:hover, .course-card:hover,
[class*="-card-v"]:hover {
  transform: translateY(-3px);
  box-shadow: var(--e4);
  border-color: var(--edge-strong);
}

hr { border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--edge), transparent); margin: var(--s6) 0; }

/* ------------------------------------------------------------ 05 navigation */

.sidebar {
  background:
    linear-gradient(180deg, rgba(124, 92, 255, .05), transparent 30%),
    rgba(7, 15, 27, .82) !important;
  backdrop-filter: blur(28px) saturate(140%);
  border-right: 1px solid var(--edge);
}
:root[data-theme="light"] .sidebar {
  background: linear-gradient(180deg, rgba(124, 92, 255, .04), transparent 30%), rgba(255, 255, 255, .88) !important;
}

.brand.premium-brand { padding: var(--s2) var(--s2) var(--s6); }
.brand-logo { transition: transform var(--d-slow) var(--ease-spring); }
.brand:hover .brand-logo { transform: rotate(-8deg) scale(1.06); }
.premium-brand b { letter-spacing: -.02em; font-weight: 850; }

.sidebar-caption {
  font-size: var(--t-xs);
  font-weight: 800;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--muted);
  opacity: .62;
  padding: 0 var(--s3) var(--s2);
}

/* Nav items: a sliding indicator rail rather than a flat background swap. */
.side-nav a {
  position: relative;
  border-radius: var(--r-sm);
  padding: 10px var(--s3);
  font-size: var(--t-sm);
  font-weight: 650;
  color: var(--muted);
  isolation: isolate;
  transition: color var(--d-fast) var(--ease-out), transform var(--d-fast) var(--ease-out);
}
.side-nav a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(124, 92, 255, .16), rgba(23, 199, 255, .07));
  opacity: 0;
  transform: scaleX(.92);
  transform-origin: left;
  transition: opacity var(--d-mid) var(--ease-out), transform var(--d-mid) var(--ease-out);
}
.side-nav a::after {
  content: "";
  position: absolute;
  left: -1px; top: 50%;
  width: 3px; height: 0;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--accent), var(--accent2));
  transform: translateY(-50%);
  transition: height var(--d-mid) var(--ease-spring);
}
.side-nav a:hover { color: var(--text); transform: translateX(2px); }
.side-nav a:hover::before { opacity: .6; transform: scaleX(1); }
.side-nav a.active { color: var(--text); font-weight: 750; }
.side-nav a.active::before { opacity: 1; transform: scaleX(1); }
.side-nav a.active::after { height: 60%; }
.side-nav a .ui-icon { transition: transform var(--d-mid) var(--ease-spring); }
.side-nav a:hover .ui-icon { transform: scale(1.12); }

.topbar {
  background: color-mix(in srgb, var(--bg) 72%, transparent) !important;
  backdrop-filter: blur(24px) saturate(150%);
  border-bottom: 1px solid var(--edge);
}
.top-title b { font-size: var(--t-md); font-weight: 800; letter-spacing: -.02em; }
.top-title small { font-size: var(--t-xs); letter-spacing: .04em; opacity: .7; }

.icon-btn {
  border-radius: var(--r-sm);
  border: 1px solid var(--edge);
  background: color-mix(in srgb, var(--panel-solid) 70%, transparent);
  transition: background var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out), transform var(--d-fast) var(--ease-out);
}
.icon-btn:hover { border-color: var(--edge-strong); transform: translateY(-1px); }
.icon-btn:active { transform: translateY(0) scale(.96); }

.server-pill, .sidebar-network-card {
  border-radius: 999px;
  border: 1px solid var(--edge);
  transition: border-color var(--d-fast) var(--ease-out), transform var(--d-fast) var(--ease-out);
}
.sidebar-network-card { border-radius: var(--r-md); }
.sidebar-network-card:hover { transform: translateY(-2px); border-color: var(--edge-strong); }

/* Live status dot: a calm pulse, not a blink. */
.server-pill i, .status-dot, .network-icon::after {
  animation: tk-pulse 2.6s var(--ease-in-out) infinite;
}
@keyframes tk-pulse {
  0%, 100% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
  50%      { box-shadow: 0 0 0 5px transparent; opacity: .72; }
}

/* --------------------------------------------------------------- 06 controls */

.btn, button.btn, a.btn {
  position: relative;
  border-radius: var(--r-sm);
  font-weight: 700;
  font-size: var(--t-sm);
  letter-spacing: -.008em;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform var(--d-fast) var(--ease-out),
    box-shadow var(--d-mid) var(--ease-out),
    filter var(--d-fast) var(--ease-out);
}
.btn:hover  { transform: translateY(-1.5px); }
.btn:active { transform: translateY(0) scale(.985); transition-duration: .07s; }

/* A single light sweep on hover reads as premium; a permanent shine does not. */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, .16) 48%, transparent 62%);
  transform: translateX(-120%);
  transition: transform var(--d-slow) var(--ease-out);
}
.btn:hover::after { transform: translateX(120%); }

.btn.primary {
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent2) 62%, var(--accent)));
  border: 1px solid rgba(255, 255, 255, .1);
  color: #fff;
  box-shadow: var(--e2), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.btn.primary:hover { box-shadow: var(--e3), var(--glow-accent), inset 0 1px 0 rgba(255, 255, 255, .22); }

.btn.ghost, .btn.secondary {
  border: 1px solid var(--edge);
  background: color-mix(in srgb, var(--panel-solid) 62%, transparent);
}
.btn.ghost:hover, .btn.secondary:hover { border-color: var(--edge-strong); background: color-mix(in srgb, var(--panel-solid) 88%, transparent); }

.btn:disabled, .btn[disabled] { opacity: .48; cursor: not-allowed; transform: none !important; }
.btn:disabled::after { display: none; }

input, select, textarea {
  border-radius: var(--r-sm) !important;
  border: 1px solid var(--edge) !important;
  transition: border-color var(--d-fast) var(--ease-out), box-shadow var(--d-fast) var(--ease-out), background var(--d-fast) var(--ease-out);
}
input:hover, select:hover, textarea:hover { border-color: var(--edge-strong) !important; }
input:focus, select:focus, textarea:focus {
  border-color: rgba(23, 199, 255, .5) !important;
  box-shadow: 0 0 0 3.5px rgba(23, 199, 255, .1) !important;
  outline: none;
}
label { font-size: var(--t-xs); font-weight: 750; letter-spacing: .012em; }

.badge, [class*="badge-v"], .chip, .pill {
  border-radius: 999px;
  font-size: var(--t-xs);
  font-weight: 750;
  letter-spacing: .01em;
  border: 1px solid var(--edge);
}

/* ------------------------------------------------------------------ 07 data */

table { border-collapse: separate; border-spacing: 0; }
thead th {
  font-size: var(--t-xs);
  font-weight: 800;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--muted);
  position: sticky;
  top: 0;
  z-index: 2;
  background: color-mix(in srgb, var(--panel-solid) 94%, transparent);
  backdrop-filter: blur(10px);
}
tbody tr { transition: background var(--d-fast) var(--ease-out); }
tbody tr:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
td, th { border-bottom: 1px solid var(--edge); }

.stat-card { padding: var(--s5); }
.stat-card b, .stat-grid b {
  font-size: var(--t-xl);
  font-weight: 850;
  letter-spacing: -.03em;
  line-height: 1;
  background: linear-gradient(150deg, var(--text), color-mix(in srgb, var(--accent2) 55%, var(--text)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* The dashboard markup labels figures with <small>, the Hybrid panel with
   <span>; both are the caption under a number. */
.stat-card small, .stat-card > div > span,
.stat-grid small, .hy-summary span {
  font-size: var(--t-xs);
  color: var(--muted);
  letter-spacing: .03em;
  font-weight: 650;
}

.stat-icon {
  border-radius: var(--r-md);
  background: linear-gradient(140deg, rgba(124, 92, 255, .18), rgba(23, 199, 255, .1));
  border: 1px solid var(--edge);
  transition: transform var(--d-mid) var(--ease-spring);
}
.stat-card:hover .stat-icon { transform: scale(1.08) rotate(-4deg); }

.metric-line {
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--edge);
  font-size: var(--t-sm);
}
.metric-line:last-child { border-bottom: 0; }

/* -------------------------------------------------------------- 08 feedback */

.toast {
  border-radius: var(--r-md);
  border: 1px solid var(--edge-strong);
  background: color-mix(in srgb, var(--panel-solid) 96%, transparent);
  backdrop-filter: blur(20px);
  box-shadow: var(--e4);
  animation: tk-toast-in .46s var(--ease-spring) both;
}
@keyframes tk-toast-in {
  from { opacity: 0; transform: translateY(-14px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
.toast.success { border-left: 3px solid var(--green); }
.toast.danger  { border-left: 3px solid var(--red); }
.toast.warning { border-left: 3px solid var(--yellow); }

.empty, [class*="empty-v"] {
  border: 1px dashed var(--edge-strong);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--panel-solid) 40%, transparent);
  color: var(--muted);
}

.premium-page-progress {
  background: linear-gradient(90deg, var(--accent), var(--accent2), var(--green));
  box-shadow: 0 0 14px rgba(23, 199, 255, .55);
}

/* ---------------------------------------------------------------- 09 motion */

/* Content settles in on load. Staggered by depth, capped so it never drags.
 *
 * `backwards`, not `both`: with `both` the final keyframe keeps applying after
 * the animation ends, and a transform still in effect — even `transform:none` —
 * makes the element a containing block for position:fixed descendants. Any
 * pop-out menu inside then anchors to this element instead of the viewport and
 * lands off screen. `backwards` applies only the starting frame before the
 * animation runs, and leaves nothing behind afterwards. */
@keyframes tk-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
/*
 * Entrance animation for page sections.
 *
 * Overlays and dialogs are excluded deliberately. They are direct children of
 * .content but are not part of the page's reading order: they sit hidden until
 * opened, so an entrance animation with `backwards` fill holds them at their
 * opening keyframe — opacity 0 — and an opened modal renders completely blank
 * with its content present but invisible. Anything that is shown on demand
 * must be left to control its own visibility.
 */
.content > *:not([hidden]):not(dialog):not([role="dialog"]):not([class*="overlay"]):not([class*="-modal"]),
.public-shell > *:not([hidden]):not(dialog):not([role="dialog"]):not([class*="overlay"]):not([class*="-modal"]) {
  animation: tk-rise .58s var(--ease-out) backwards;
}
/* The delays must not re-introduce the animation on an excluded element:
   animation-delay alone is harmless, but keeping the selectors aligned makes
   the intent obvious to the next reader. */
.content > *:nth-child(1):not([hidden]) { animation-delay: .02s }
.content > *:nth-child(2):not([hidden]) { animation-delay: .07s }
.content > *:nth-child(3):not([hidden]) { animation-delay: .12s }
.content > *:nth-child(4):not([hidden]) { animation-delay: .16s }
.content > *:nth-child(5):not([hidden]) { animation-delay: .19s }
.content > *:nth-child(n+6):not([hidden]) { animation-delay: .22s }

/* Grid children cascade, so dashboards assemble rather than appear.
   `backwards` for the same reason as above. */
.grid > *, .two-col > *, .stat-grid > *, [class*="grid-v"] > * {
  animation: tk-rise .5s var(--ease-out) backwards;
}
.grid > *:nth-child(1), .stat-grid > *:nth-child(1), [class*="grid-v"] > *:nth-child(1) { animation-delay: .04s }
.grid > *:nth-child(2), .stat-grid > *:nth-child(2), [class*="grid-v"] > *:nth-child(2) { animation-delay: .09s }
.grid > *:nth-child(3), .stat-grid > *:nth-child(3), [class*="grid-v"] > *:nth-child(3) { animation-delay: .14s }
.grid > *:nth-child(4), .stat-grid > *:nth-child(4), [class*="grid-v"] > *:nth-child(4) { animation-delay: .19s }
.grid > *:nth-child(n+5), .stat-grid > *:nth-child(n+5) { animation-delay: .23s }

/*
 * Revealed on scroll by the companion script.
 *
 * Two hazards live here, and both bit:
 *
 *  - `opacity: 0` before the observer fires. If the script never runs, or the
 *    element is tagged but never intersects, the content stays invisible with
 *    no way to recover. It now starts visible; the script removes `tk-ready`
 *    to hide it only once it is certain it can reveal it again.
 *
 *  - A leftover transform. Any transform in effect makes the element a
 *    containing block for position:fixed descendants, which silently
 *    re-anchors pop-out menus inside it and throws them off screen. Once
 *    revealed the transform is cleared to `none` rather than a zero offset.
 */
[data-tk-reveal] { opacity: 1; transform: none; }
[data-tk-reveal].tk-ready { opacity: 0; transform: translateY(18px); }
[data-tk-reveal].tk-in {
  opacity: 1;
  transform: none;
  transition: opacity .62s var(--ease-out), transform .62s var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
    /*
     * Also drop the fill mode. Shortening the duration still leaves a fill
     * applying a keyframe's transform, and an element with any transform in
     * effect becomes the containing block for position:fixed children — which
     * silently re-anchors pop-out menus and pushes them off screen.
     */
    animation-fill-mode: none !important;
  }
  [data-tk-reveal] { opacity: 1; transform: none; }
  .btn::after { display: none; }
}

/* ------------------------------------------------------------------ 10 auth */

.public-shell, .premium-public-shell { position: relative; }

.auth-panel, .login-panel-v282 {
  border-radius: var(--r-xl);
  border: 1px solid var(--edge);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .045), transparent 38%),
    var(--panel-solid);
  box-shadow: var(--e4);
}
.auth-panel::before, .login-panel-v282::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(124, 92, 255, .5), rgba(23, 199, 255, .5), transparent);
}

.auth-hero h1 {
  font-size: var(--t-3xl);
  line-height: 1.02;
  letter-spacing: -.035em;
  font-weight: 860;
  background: linear-gradient(160deg, var(--text) 30%, color-mix(in srgb, var(--accent2) 60%, var(--text)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.auth-hero p { font-size: var(--t-md); line-height: var(--lead-body); color: var(--muted); max-width: 46ch; }

.login-copy-v282 h1 {
  font-size: var(--t-xl);
  letter-spacing: -.028em;
  font-weight: 840;
  line-height: 1.08;
}

.login-input-v282 {
  border-radius: var(--r-sm);
  border: 1px solid var(--edge);
  transition: border-color var(--d-fast) var(--ease-out), box-shadow var(--d-fast) var(--ease-out);
}
.login-input-v282:focus-within {
  border-color: rgba(23, 199, 255, .5);
  box-shadow: 0 0 0 3.5px rgba(23, 199, 255, .1);
}
.login-input-v282 input:focus { box-shadow: none !important; border: 0 !important; }

.login-submit-v282 { min-height: 48px; font-size: var(--t-base); }

/* The sign-in panel carries `overflow:hidden !important` in the v282
   stylesheet to clip a decorative glow orb that is deliberately positioned
   outside its top-right corner. That clip also cut off the recovery link
   sitting last in the form.
   Keep the clipping — the orb still needs it — and give the panel room to
   grow instead, so the link has somewhere to sit. */
.auth-panel.login-panel-v282 {
  height: auto !important;
  min-height: 0 !important;
  padding-bottom: var(--s6) !important;
}

/* Recovery link beside the password label — where people look for it, and the
   position Google, GitHub and Linear all use. The v282 sheet forces
   `display:block` on this span, so the row layout is restored here. */
.login-form-v282 > label > span.login-pw-row-v3221 {
  display: flex !important;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.login-forgot-inline-v3221 {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: #79dcff !important;
  text-decoration: none;
  white-space: nowrap;
  transition: color .16s ease-out;
}
.login-forgot-inline-v3221:hover { text-decoration: underline; color: #a5e9ff !important; }
:root[data-theme="light"] .login-forgot-inline-v3221 { color: #0b6fa6 !important; }

/* The link under the button stays as a second, unmissable route.
   Kept deliberately plain: no mask icon, no colour-mix, no custom property in
   the colour. Every one of those is a way for the link to vanish if a single
   feature is unsupported, and this link is the one a locked-out student needs
   most. Plain text, explicit colour, generous tap target. */
.login-forgot-v3220 {
  display: block !important;
  margin: 18px 0 0 !important;
  padding-top: 16px !important;
  border-top: 1px solid rgba(151, 177, 211, .14);
  text-align: center !important;
  font-size: .85rem !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  overflow: visible !important;
}
.login-forgot-v3220 a {
  display: inline-block !important;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(121, 220, 255, .18);
  background: rgba(121, 220, 255, .07);
  color: #79dcff !important;
  font-weight: 700;
  text-decoration: none;
  visibility: visible !important;
  opacity: 1 !important;
  transition: background .16s ease-out, border-color .16s ease-out, transform .16s ease-out;
}
.login-forgot-v3220 a:hover {
  background: rgba(121, 220, 255, .14);
  border-color: rgba(121, 220, 255, .38);
  transform: translateY(-1px);
  text-decoration: none;
}
:root[data-theme="light"] .login-forgot-v3220 a {
  color: #0b6fa6 !important;
  border-color: rgba(11, 111, 166, .22);
  background: rgba(11, 111, 166, .06);
}

.steps > div, .login-trust-v282 span {
  border: 1px solid var(--edge);
  border-radius: var(--r-md);
  transition: transform var(--d-mid) var(--ease-out), border-color var(--d-mid) var(--ease-out);
}
.steps > div:hover { transform: translateY(-3px); border-color: var(--edge-strong); }

.login-banner-v282 img { border-radius: var(--r-xl); }
.login-banner-glow-v282 { filter: blur(56px); opacity: .5; }

/* --------------------------------------------------- 10b feature surfaces */

/* Course tiles are the first thing every user sees. Give them a coloured
   spine that only appears on hover, so the grid reads calm at rest. */
.course-card-v, .coming-card-v {
  position: relative;
  overflow: hidden;
}
.course-card-v::after, .coming-card-v::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--accent), var(--accent2));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--d-mid) var(--ease-out);
}
.course-card-v:hover::after, .coming-card-v:hover::after { transform: scaleY(1); }

.course-card-top-v b, .stream-class-title { letter-spacing: -.02em; font-weight: 800; }

/* Class stream: the composer is the action, so it sits slightly forward. */
.stream-composer { box-shadow: var(--e3); }
.stream-composer:focus-within { border-color: rgba(23, 199, 255, .34); box-shadow: var(--e4), var(--glow-cyan); }

.stream-author-avatar, .stream-comment-avatar,
.stream-composer-avatar, .mini-avatar, .profile-avatar, .student-manager-avatar {
  background: linear-gradient(140deg, var(--accent), var(--accent2));
  color: #fff;
  font-weight: 800;
  letter-spacing: .01em;
  box-shadow: var(--e1), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.stream-comment-bubble { border-radius: var(--r-md); border: 1px solid var(--edge); }

/* Java Journey is the flagship. Its hero and progress deserve real weight. */
.jj-dashboard-hero {
  border-radius: var(--r-xl);
  border: 1px solid var(--edge);
  background:
    radial-gradient(120% 140% at 6% -20%, rgba(124, 92, 255, .2), transparent 56%),
    linear-gradient(180deg, rgba(255, 255, 255, .04), transparent 36%),
    var(--panel-solid);
  box-shadow: var(--e4);
}
.jj-course-mark {
  border-radius: var(--r-md);
  background: linear-gradient(140deg, var(--accent), var(--accent2));
  box-shadow: var(--glow-accent);
}
.jj-continue {
  transition: transform var(--d-mid) var(--ease-out), box-shadow var(--d-mid) var(--ease-out);
}
.jj-continue:hover { transform: translateY(-3px); box-shadow: var(--e4); }
.jj-continue-icon { transition: transform var(--d-mid) var(--ease-spring); }
.jj-continue:hover .jj-continue-icon { transform: translateX(4px); }

/* Progress bars: a moving sheen while work is in flight. */
progress, .progress, [class*="progress-bar"], [class*="-progress-v"] > i {
  border-radius: 999px;
  overflow: hidden;
}
[class*="progress"] > i, progress::-webkit-progress-value {
  background: linear-gradient(90deg, var(--accent), var(--accent2));
}

/* Badges earned in the Journey should feel like objects, not stickers. */
.jj-badge-shelf-v > * {
  transition: transform var(--d-mid) var(--ease-spring), box-shadow var(--d-mid) var(--ease-out);
}
.jj-badge-shelf-v > *:hover { transform: translateY(-4px) scale(1.04); box-shadow: var(--e3); }

/* Code surfaces stay strictly monospace and quiet — they carry meaning. */
pre, code, .code-area, textarea.code-area, .CodeMirror, [class*="editor"] textarea {
  font-family: "JetBrains Mono", "Cascadia Code", Consolas, ui-monospace, monospace;
  font-variant-ligatures: none;
  letter-spacing: 0;
}
pre {
  border-radius: var(--r-md);
  border: 1px solid var(--edge);
  background: color-mix(in srgb, #050c16 72%, var(--panel-solid));
}
:root[data-theme="light"] pre { background: #f6f8fc; }

/* Modal dialogs: dim the world behind them properly.
 *
 * Never match <body> or <html> here. A substring selector like
 * [class*="-modal"] also matches the class a page puts on <body> while a modal
 * is open (cc-sim-modal-open-v3160), and backdrop-filter on an ancestor makes
 * it the containing block for position:fixed. The modal then scrolls with the
 * document instead of staying on screen, which reads as the dialog being
 * stuck at the top of the page. */
.modal:not(body), dialog, [class*="-modal"]:not(body):not(html) {
  backdrop-filter: blur(6px);
}
.modal .glass, .modal [class*="-card"], dialog > * { box-shadow: var(--e4); }

/* ------------------------------------------------------------ 11 responsive */

@media (max-width: 900px) {
  :root { --r-lg: 16px; --r-xl: 20px; }
  .section-head h1, .lms-page-heading h1 { font-size: var(--t-xl); }
  .content > * { animation-delay: 0s !important; }
}

@media (max-width: 560px) {
  .stat-card { padding: var(--s4); }
  .side-nav a { padding: 11px var(--s3); }
}

/* Print: strip ornament so certificates and reports stay clean. */
@media print {
  body::before, .premium-noise, .toast { display: none !important; }
  .glass, .panel, .card { box-shadow: none !important; border-color: #ccc !important; }
}