/* Site-wide premium art direction: luminous learning atelier, existing markup preserved. */
:root {
  --premium-ease: cubic-bezier(.2, .75, .25, 1);
  --premium-glass: linear-gradient(145deg, var(--surface-glass), color-mix(in srgb, var(--card) 94%, transparent));
}

html { background: var(--bg); }
body {
  isolation: isolate;
  background:
    radial-gradient(ellipse at 82% 0%, rgba(14, 165, 233, .075), transparent 32rem),
    radial-gradient(ellipse at 8% 36%, rgba(16, 185, 129, .055), transparent 38rem),
    var(--bg);
}
body::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: .34;
  background-image:
    linear-gradient(rgba(169, 156, 255, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(169, 156, 255, .025) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, black, transparent 78%);
}
html[data-theme="light"] body {
  background:
    radial-gradient(ellipse at 88% 0%, rgba(11, 123, 181, .07), transparent 34rem),
    radial-gradient(ellipse at 8% 35%, rgba(10, 143, 99, .05), transparent 38rem),
    var(--bg);
}

/* Shared masthead: a precise, quiet frame around the richer page canvas. */
.public-header {
  background: color-mix(in srgb, var(--bg-2) 82%, transparent);
  border-block-end-color: color-mix(in srgb, var(--line) 72%, var(--mint) 12%);
  box-shadow: 0 12px 36px rgba(0, 0, 0, .12);
}
.nav-inner { height: 82px; }
.brand { gap: 12px; letter-spacing: -.045em; }
.brand-mark { filter: drop-shadow(0 0 10px rgba(16, 185, 129, .24)); }
.nav-links { gap: 7px; }
.nav-links a {
  padding: 9px 12px;
  border-radius: 8px;
  transition: color .2s var(--premium-ease), background .2s var(--premium-ease), transform .2s var(--premium-ease);
}
.nav-links a:hover,
.nav-links a[aria-current="page"] {
  color: var(--text);
  background: color-mix(in srgb, var(--mint) 10%, transparent);
}
.nav-links a:hover { transform: translateY(-1px); }
.nav-actions { gap: 8px; }
.nav-actions .icon-btn { background: color-mix(in srgb, var(--card) 74%, transparent); }
.nav-actions .signup-link { box-shadow: 0 8px 24px rgba(16, 185, 129, .16); }

/* Headings and editorial rhythm. */
.container { --content: 1220px; }
.section { padding-block: clamp(58px, 7vw, 96px); }
.section-head { margin-block-end: 34px; }
.section-head h2 { max-width: 19ch; }
.eyebrow,
.page-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--mint-soft);
  letter-spacing: .16em;
}
.eyebrow::before,
.page-eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: linear-gradient(90deg, var(--mint), var(--sky));
  box-shadow: 0 0 12px rgba(52, 211, 153, .55);
}
.page-heading {
  position: relative;
  padding-block: 10px 20px;
  margin-block-end: 30px;
}
.page-heading::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: 0;
  width: 76px;
  height: 2px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--mint), var(--sky), transparent);
}
.page-heading h1 { letter-spacing: -.05em; }
html[lang="ar"] .page-heading h1 { letter-spacing: 0; }

/* A luminous, framed hero using the existing original learning-lab artwork. */
.hero {
  isolation: isolate;
  overflow: hidden;
  min-height: min(730px, calc(100vh - 82px));
  padding-block: clamp(74px, 9vw, 126px);
  background:
    radial-gradient(ellipse at 77% 44%, rgba(14, 165, 233, .16), transparent 31rem),
    radial-gradient(ellipse at 25% 75%, rgba(16, 185, 129, .12), transparent 33rem),
    linear-gradient(118deg, color-mix(in srgb, var(--bg) 96%, #123 4%), var(--bg));
}
.hero::before { opacity: .5; background-size: 54px 54px; }
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 38rem;
  aspect-ratio: 1;
  inset-inline-end: -12rem;
  inset-block-start: -18rem;
  border: 1px solid rgba(52, 211, 153, .1);
  border-radius: 50%;
  box-shadow: 0 0 0 48px rgba(56, 189, 248, .018), 0 0 0 96px rgba(52, 211, 153, .014);
  animation: atelier-orbit 32s linear infinite;
}
.hero-grid { grid-template-columns: 1.04fr .96fr; gap: clamp(44px, 6vw, 86px); }
.hero-copy { position: relative; z-index: 1; max-width: 700px; }
.hero-copy h1 {
  max-width: 11ch;
  margin-block: 18px 0;
  font-size: clamp(3.45rem, 7.1vw, 6.5rem);
  line-height: .98;
  letter-spacing: -.075em;
  text-wrap: balance;
}
.hero-copy h1 span {
  display: inline;
  color: transparent;
  background: linear-gradient(100deg, var(--mint-soft) 8%, #88efd0 48%, var(--sky) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 12px 24px rgba(16, 185, 129, .12));
}
.hero-copy > p { max-width: 48ch; margin-block: 24px 30px; font-size: clamp(1rem, 1.2vw, 1.15rem); line-height: 1.85; }
.hero-copy .action-row { gap: 12px; }
.hero-art {
  min-height: 410px;
  border-radius: 26px;
  border-color: var(--line-shine);
  box-shadow: var(--shadow-lift), 0 0 70px rgba(56, 189, 248, .08), inset 0 1px 0 rgba(255, 255, 255, .12);
  transform: perspective(1300px) rotateY(-3deg) rotateX(1deg);
  transition: transform .6s var(--premium-ease), box-shadow .6s var(--premium-ease);
}
.hero-art:hover { transform: perspective(1300px) rotateY(0) rotateX(0) translateY(-4px); box-shadow: var(--shadow-lift), 0 0 88px rgba(56, 189, 248, .14); }
.hero-art img { min-height: 410px; filter: saturate(1.05) contrast(1.02); }
.hero-art::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(4, 10, 20, .02) 44%, rgba(4, 10, 20, .38));
}
.hero-chip {
  z-index: 1;
  inset-inline: 18px;
  inset-block-end: 18px;
  width: fit-content;
  max-width: calc(100% - 36px);
  border-color: rgba(255, 255, 255, .22);
  border-radius: 8px;
  background: rgba(6, 11, 23, .76);
  box-shadow: 0 12px 38px rgba(0, 0, 0, .3);
  backdrop-filter: blur(18px);
}
.stats-strip { gap: 0; margin-block-start: 36px; }
.stats-strip > div { min-width: 110px; padding-inline: 20px; border-inline-start: 1px solid var(--line-shine); }
.stats-strip > div:first-child { padding-inline-start: 0; border: 0; }
.stats-strip strong { font-size: 1.7rem; letter-spacing: -.05em; }
.stats-strip span { display: block; margin-block-start: 4px; }

/* Cards and collections: enamel-like surfaces with a soft, luminous top edge. */
.card,
.surface,
.filter-bar,
.auth-card,
.auth-side,
.auth-demo,
.table-wrap,
.modal,
.dropdown-menu {
  background: var(--premium-glass);
  border-color: color-mix(in srgb, var(--line) 78%, var(--mint) 12%);
  box-shadow: var(--shadow-soft), inset 0 1px 0 var(--surface-sheen);
  backdrop-filter: blur(16px);
}
.card { position: relative; transition: transform .28s var(--premium-ease), border-color .28s var(--premium-ease), box-shadow .28s var(--premium-ease); }
.card::before {
  content: "";
  position: absolute;
  inset-inline: 14px;
  inset-block-start: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--line-shine), transparent);
}
.camp-card:hover,
.instructor-card:hover,
.post-card:hover,
.event-card:hover,
.plan-card:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--mint) 48%, var(--line));
  box-shadow: var(--shadow-lift), 0 0 30px rgba(16, 185, 129, .07);
}
.camp-cover { position: relative; height: 212px; background: var(--bg-2); }
.camp-cover::after { content: ""; position: absolute; inset: 38% 0 0; background: linear-gradient(transparent, rgba(6, 11, 23, .24)); pointer-events: none; }
.camp-cover img { transition: transform .7s var(--premium-ease), filter .7s var(--premium-ease); }
.camp-card:hover .camp-cover img { transform: scale(1.045); filter: saturate(1.12); }
.camp-content { padding: 21px; }
.camp-content h3 { margin-block: 10px 8px; }
.price { text-shadow: 0 0 24px rgba(16, 185, 129, .2); }
.section-alt {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 4% 50%, rgba(16, 185, 129, .055), transparent 30rem),
    color-mix(in srgb, var(--bg-2) 88%, var(--bg));
  border-color: color-mix(in srgb, var(--line) 72%, var(--mint) 8%);
}
.section-alt::before { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .28; background: linear-gradient(120deg, transparent 20%, rgba(56, 189, 248, .035), transparent 72%); pointer-events: none; }
.cta-band {
  position: relative;
  overflow: hidden;
  padding: clamp(26px, 5vw, 52px);
  border-radius: 14px;
  border-color: var(--line-shine);
  background:
    radial-gradient(ellipse at 100% 0%, rgba(56, 189, 248, .17), transparent 38%),
    radial-gradient(ellipse at 0% 100%, rgba(16, 185, 129, .18), transparent 42%),
    var(--premium-glass);
  box-shadow: var(--shadow-lift), inset 0 1px 0 var(--surface-sheen);
}
.cta-band::after { content: ""; position: absolute; width: 210px; aspect-ratio: 1; border: 1px solid rgba(52, 211, 153, .22); border-radius: 50%; inset-inline-end: -74px; inset-block-end: -135px; box-shadow: 0 0 0 24px rgba(56, 189, 248, .035), 0 0 0 48px rgba(52, 211, 153, .025); pointer-events: none; }

/* Inputs and buttons: precision controls with a restrained glow, not neon overload. */
.btn { position: relative; overflow: hidden; border-radius: 8px; transition: transform .2s var(--premium-ease), box-shadow .2s var(--premium-ease), border-color .2s var(--premium-ease), filter .2s var(--premium-ease); }
.btn:hover { transform: translateY(-2px); }
.btn-primary { box-shadow: 0 9px 24px rgba(16, 185, 129, .18), inset 0 1px 0 rgba(255, 255, 255, .27); }
.btn-primary:hover { box-shadow: 0 14px 32px rgba(16, 185, 129, .28), inset 0 1px 0 rgba(255, 255, 255, .34); filter: saturate(1.08); }
.btn-ghost { background: color-mix(in srgb, var(--card) 65%, transparent); }
.btn-ghost:hover { border-color: var(--line-shine); background: color-mix(in srgb, var(--mint) 8%, var(--card)); }
.icon-btn { background: var(--premium-glass); border-color: color-mix(in srgb, var(--line) 78%, var(--sky) 12%); transition: transform .2s var(--premium-ease), border-color .2s var(--premium-ease), box-shadow .2s var(--premium-ease); }
.icon-btn:hover { transform: translateY(-1px); border-color: var(--line-shine); box-shadow: 0 8px 22px rgba(16, 185, 129, .1); }
.field input,
.field textarea,
.field select,
.control,
.top-search input {
  border-color: color-mix(in srgb, var(--line) 86%, var(--sky) 8%);
  background: color-mix(in srgb, var(--bg-2) 88%, transparent);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.field input:hover,
.field textarea:hover,
.field select:hover { border-color: color-mix(in srgb, var(--line) 50%, var(--sky) 30%); }
.field input:focus,
.field textarea:focus,
.field select:focus { background: var(--bg-2); box-shadow: var(--focus), 0 8px 24px rgba(16, 185, 129, .08); }

/* Workspaces: clearer rail, premium metric surfaces, disciplined tables. */
.app-shell:not(.is-public) { background: color-mix(in srgb, var(--bg) 86%, transparent); }
.app-sidebar {
  align-self: start;
  position: sticky;
  inset-block-start: 82px;
  height: calc(100vh - 82px);
  overflow: auto;
  background:
    radial-gradient(ellipse at 0% 0%, rgba(16, 185, 129, .08), transparent 22rem),
    color-mix(in srgb, var(--bg-2) 93%, transparent);
  border-color: color-mix(in srgb, var(--line) 72%, var(--mint) 10%);
  scrollbar-width: thin;
}
.sidebar-label { letter-spacing: .16em; }
.sidebar-link { position: relative; transition: color .2s ease, background .2s ease, transform .2s ease; }
.sidebar-link:hover { transform: translateX(2px); }
[dir="rtl"] .sidebar-link:hover { transform: translateX(-2px); }
.sidebar-link[aria-current="page"] {
  background: linear-gradient(100deg, rgba(16, 185, 129, .16), rgba(56, 189, 248, .055));
  color: var(--mint-soft);
  box-shadow: inset 1px 0 0 rgba(52, 211, 153, .3);
}
.workspace-topbar {
  position: sticky;
  inset-block-start: 0;
  z-index: 25;
  background: color-mix(in srgb, var(--bg-2) 80%, transparent);
  backdrop-filter: blur(18px);
  border-color: color-mix(in srgb, var(--line) 74%, var(--mint) 10%);
}
.workspace-main { padding-block-start: clamp(26px, 4vw, 48px); }
.page-heading h1 { text-wrap: balance; }
.stat-card {
  position: relative;
  overflow: hidden;
  padding: 22px;
  background:
    radial-gradient(ellipse at 100% 0%, rgba(56, 189, 248, .09), transparent 58%),
    var(--premium-glass);
  border-color: color-mix(in srgb, var(--line) 78%, var(--mint) 10%);
  box-shadow: var(--shadow-soft), inset 0 1px 0 var(--surface-sheen);
}
.stat-card::after { content: ""; position: absolute; width: 104px; aspect-ratio: 1; inset-inline-end: -52px; inset-block-end: -62px; border: 1px solid rgba(52, 211, 153, .14); border-radius: 50%; box-shadow: 0 0 0 15px rgba(56, 189, 248, .02); pointer-events: none; }
.stat-value { font-size: clamp(1.75rem, 3vw, 2.25rem); letter-spacing: -.06em; }
.table-wrap { box-shadow: var(--shadow-soft), inset 0 1px 0 var(--surface-sheen); }
th { background: color-mix(in srgb, var(--bg-2) 93%, var(--mint) 7%); color: color-mix(in srgb, var(--muted) 78%, var(--mint) 22%); }
tbody tr { transition: background .18s ease; }
tbody tr:hover { background: color-mix(in srgb, var(--mint) 6%, transparent); }
.table-pagination { background: color-mix(in srgb, var(--bg-2) 72%, transparent); }
.progress { background: color-mix(in srgb, var(--line) 78%, var(--bg)); }
.progress > span { box-shadow: 0 0 16px rgba(16, 185, 129, .28); }
.progress-ring { filter: drop-shadow(0 8px 18px rgba(16, 185, 129, .12)); }
.calendar-day { transition: border-color .2s ease, transform .2s ease, background .2s ease; }
.calendar-day:hover { transform: translateY(-2px); border-color: var(--mint); }
.chat-panel { background: var(--premium-glass); border-color: var(--line-shine); box-shadow: var(--shadow-soft), inset 0 1px 0 var(--surface-sheen); }
.chat-bubble.mine { box-shadow: 0 8px 24px rgba(16, 185, 129, .08); }

/* Authentication, overlays, footer and errors share the same visual finish. */
.auth-wrap { max-width: 1120px; margin-block: clamp(34px, 6vw, 76px); }
.auth-layout { gap: clamp(22px, 4vw, 42px); }
.auth-card { max-width: 540px; padding: clamp(26px, 4vw, 42px); border-radius: 14px; }
.auth-card h1 { font-size: clamp(2rem, 3vw, 2.7rem); letter-spacing: -.055em; }
.auth-side {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 4vw, 48px);
  border-radius: 14px;
  background:
    radial-gradient(ellipse at 82% 18%, rgba(56, 189, 248, .2), transparent 43%),
    radial-gradient(ellipse at 14% 88%, rgba(16, 185, 129, .18), transparent 50%),
    var(--premium-glass);
  box-shadow: var(--shadow-lift), inset 0 1px 0 var(--surface-sheen);
}
.auth-side::after { content: ""; position: absolute; width: 230px; aspect-ratio: 1; inset-inline-end: -96px; inset-block-start: 34%; border: 1px solid rgba(169, 156, 255, .2); border-radius: 50%; box-shadow: 0 0 0 27px rgba(56, 189, 248, .025), 0 0 0 54px rgba(16, 185, 129, .025); pointer-events: none; }
.auth-mark { position: relative; z-index: 1; min-height: 220px; border-color: var(--line-shine); background: color-mix(in srgb, var(--bg-2) 60%, transparent); box-shadow: inset 0 1px 0 var(--surface-sheen); }
.auth-mark img { filter: drop-shadow(0 0 30px rgba(16, 185, 129, .28)); }
.auth-demo { border-radius: 8px; }
.modal-backdrop { background: rgba(2, 7, 15, .76); backdrop-filter: blur(12px); }
.modal { border-radius: 14px; box-shadow: var(--shadow-lift), inset 0 1px 0 var(--surface-sheen); }
.toast { backdrop-filter: blur(16px); }
.cookie-banner { background: var(--surface-strong); border-color: var(--line-shine); box-shadow: var(--shadow-lift); }
.public-footer {
  position: relative;
  background:
    radial-gradient(ellipse at 0% 0%, rgba(16, 185, 129, .06), transparent 28rem),
    color-mix(in srgb, var(--bg-2) 95%, var(--bg));
  border-color: color-mix(in srgb, var(--line) 70%, var(--mint) 10%);
}
.footer-col a { transition: color .18s ease, transform .18s ease; }
.footer-col a:hover { transform: translateX(3px); }
[dir="rtl"] .footer-col a:hover { transform: translateX(-3px); }
body[data-page="403"] .error-card,
body[data-page="404"] .error-card,
body[data-page="405"] .error-card,
body[data-page="408"] .error-card,
body[data-page="500"] .error-card,
body[data-page="502"] .error-card,
body[data-page="503"] .error-card,
body[data-page="504"] .error-card {
  background: var(--premium-glass);
  border-color: var(--line-shine);
  box-shadow: var(--shadow-lift), inset 0 1px 0 var(--surface-sheen);
}
.error-code { filter: drop-shadow(0 12px 30px rgba(16, 185, 129, .14)); }

@keyframes atelier-orbit { to { transform: rotate(360deg); } }
@media (max-width: 1050px) {
  .nav-links { gap: 2px; }
  .nav-links a { padding-inline: 9px; }
  .hero-grid { gap: 36px; }
  .hero-copy h1 { font-size: clamp(3.1rem, 7vw, 5.4rem); }
}
@media (max-width: 840px) {
  .nav-inner { height: 70px; }
  .hero { min-height: 0; padding-block: 62px; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy h1 { max-width: 12ch; }
  .hero-art { min-height: 320px; transform: none; }
  .hero-art img { min-height: 320px; }
  .app-sidebar { position: fixed; inset-block-start: 0; height: 100dvh; }
  .workspace-topbar { inset-block-start: 0; }
}
@media (max-width: 600px) {
  .hero { padding-block: 50px 40px; }
  .hero-copy h1 { font-size: clamp(2.9rem, 14vw, 4.2rem); }
  .hero-art,
  .hero-art img { min-height: 250px; }
  .stats-strip > div { min-width: 0; padding-inline: 12px; }
  .stats-strip strong { font-size: 1.35rem; }
  .camp-cover { height: 170px; }
  .cta-band { padding: 24px; }
  .auth-wrap { margin-block: 28px; }
  .auth-card { padding: 24px; }
  .auth-side { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero::after { animation: none; }
  .hero-art,
  .card,
  .camp-cover img,
  .calendar-day,
  .btn,
  .icon-btn { transition: none; }
}


/* Final responsive refinements from the first screenshot review. */
.public-main > :not(.hero):not(.section) {
  width: min(var(--content), calc(100% - 40px));
  margin-inline: auto;
}
@media (max-width: 840px) {
  .nav-inner { gap: 8px; padding-inline: 16px; }
  .nav-brand { flex: 1 1 auto; min-width: 0; }
  .nav-brand .brand { gap: 7px; font-size: 1.03rem; }
  .nav-brand .brand-mark { width: 32px; height: 30px; flex: none; }
  .nav-brand .brand-word { white-space: nowrap; }
  .nav-actions { flex: 0 0 auto; gap: 4px; min-width: 0; }
  .nav-actions > .icon-btn,
  .nav-actions .nav-mobile-toggle {
    width: 32px; height: 32px; min-width: 32px; padding: 0; flex: none;
  }
  .nav-actions > .btn {
    min-width: max-content; min-height: 32px; padding: 5px 7px;
    font-size: .72rem; white-space: nowrap;
  }
  .nav-actions .nav-lang {
    width: 32px; height: 32px; min-width: 32px; overflow: hidden;
    padding-inline: 4px; font-size: .68rem;
  }
  .nav-actions > a.btn-ghost:not(.signup-link) { display: none; }
  .public-main > :not(.hero):not(.section) { width: min(var(--content), calc(100% - 32px)); }
}
@media (max-width: 380px) {
  .nav-inner { gap: 5px; padding-inline: 12px; }
  .nav-brand .brand { gap: 6px; font-size: .94rem; }
  .nav-brand .brand-mark { width: 28px; height: 27px; }
  .nav-actions { gap: 3px; }
  .nav-actions > .icon-btn,
  .nav-actions .nav-mobile-toggle,
  .nav-actions .nav-lang { width: 29px; height: 29px; min-width: 29px; }
}


/* The workspace navigation is an overlay on every viewport: it never reserves a sidebar column. */
:root { --workspace-topbar-height: 72px; }
html, body { max-width: 100%; overflow-x: clip; }
.app-shell:not(.is-public) { display: block; min-width: 0; }
.app-shell.is-dashboard { display: block; min-height: calc(100vh - var(--workspace-topbar-height)); }
.app-sidebar {
  position: fixed !important;
  z-index: 56;
  inset-block: var(--workspace-topbar-height) 0 !important;
  inset-inline-start: 0;
  width: min(330px, 88vw);
  height: auto !important;
  max-height: calc(100dvh - var(--workspace-topbar-height));
  overflow: auto;
  padding: 22px 14px 34px;
  border-inline-end: 1px solid var(--line-shine);
  border-block-end: 0;
  transform: translateX(-110%);
  visibility: hidden;
  pointer-events: none;
  transition: transform .26s var(--premium-ease), visibility .26s ease;
  box-shadow: var(--shadow-lift), 18px 0 54px rgba(0,0,0,.28);
}
[dir="rtl"] .app-sidebar { transform: translateX(110%); }
.app-sidebar.open {
  transform: translateX(0) !important;
  visibility: visible;
  pointer-events: auto;
}
.sidebar-backdrop {
  position: fixed;
  z-index: 50;
  inset: var(--workspace-topbar-height) 0 0;
  width: 100%;
  height: calc(100dvh - var(--workspace-topbar-height));
  padding: 0;
  border: 0;
  border-radius: 0;
  background: rgba(1, 8, 18, .58);
  backdrop-filter: blur(3px);
  cursor: default;
}
.sidebar-backdrop[hidden] { display: none; }
body.sidebar-open { overflow: hidden; }
.sidebar-menu-trigger { font-size: 1.45rem; font-weight: 800; line-height: 1; }
.sidebar-close { display: grid; margin-inline-start: auto; font-size: 1.25rem; }
.sidebar-section { padding-block-start: 4px; }
.sidebar-count {
  display: inline-grid;
  min-width: 22px;
  height: 22px;
  margin-inline-start: auto;
  place-items: center;
  padding-inline: 6px;
  border-radius: 999px;
  background: linear-gradient(120deg, var(--mint), var(--sky));
  color: #07111c;
  font-size: .72rem;
  font-weight: 800;
}
.sidebar-link.active { color: var(--mint-soft); }

/* Public courses catalog and featured horizontal collection. */
.featured-course-section { overflow: hidden; }
.carousel-controls { display: flex; align-items: center; gap: 8px; }
.featured-carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 350px);
  gap: 18px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding: 3px 2px 18px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--mint) 55%, transparent) transparent;
}
.featured-carousel > * { scroll-snap-align: start; }
.course-card { min-width: 0; overflow: hidden; }
.course-cover {
  position: relative;
  height: 194px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(16,185,129,.18), rgba(14,165,233,.22));
}
.course-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--premium-ease); }
.course-card:hover .course-cover img { transform: scale(1.04); }
.course-card-body { display: grid; gap: 10px; padding: 19px; }
.course-card-body h3 { margin: 0; }
.course-card-body p { margin: 0; }
.course-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.catalog-filter { display: grid; grid-template-columns: minmax(210px,1.4fr) repeat(3,minmax(140px,1fr)); gap: 12px; align-items: end; }
.catalog-filter .field { margin: 0; min-width: 0; }
.listing-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.listing-editor { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(270px,.95fr); gap: 20px; align-items: start; }
.listing-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 14px; }
.listing-card-cover { width: 100%; height: 180px; object-fit: cover; border-radius: 9px; background: var(--bg-2); }
.listing-status-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.listing-review-actions { display: grid; gap: 10px; margin-block-start: 16px; }
.listing-review-actions textarea { min-height: 84px; }
.coupon-entry[hidden] { display: none; }
@media (max-width: 840px) {
  :root { --workspace-topbar-height: 68px; }
  .app-shell:not(.is-public) { grid-template-columns: minmax(0,1fr); }
  .app-sidebar { width: min(330px, 88vw); }
  .catalog-filter { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .listing-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .listing-editor { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 600px) {
  .featured-carousel { grid-auto-columns: minmax(78vw, 1fr); gap: 12px; }
  .catalog-filter, .listing-form-grid, .listing-grid { grid-template-columns: minmax(0,1fr); }
  .course-cover { height: 176px; }
  .sidebar-backdrop { backdrop-filter: blur(2px); }
}
@media (prefers-reduced-motion: reduce) {
  .app-sidebar, .course-cover img { transition: none; }
  .featured-carousel { scroll-behavior: auto; }
}


/* A seamless, physically right-moving featured-course track. */
.featured-course-section { overflow: clip; }
.featured-viewport {
  width: 100%;
  overflow: hidden;
  position: relative;
  touch-action: pan-y;
  contain: paint;
}
.featured-carousel {
  display: flex;
  flex-direction: row;
  direction: ltr;
  width: max-content;
  max-width: none;
  overflow: visible;
  gap: 16px;
  white-space: normal;
  scroll-snap-type: none;
  scrollbar-width: none;
  will-change: transform;
  transition: none;
}
.featured-carousel > .course-card {
  flex: 0 0 clamp(270px, 29vw, 350px);
  scroll-snap-align: unset;
}
.featured-carousel > .course-card[aria-hidden="true"] { pointer-events: none; }
.catalog-filter {
  grid-template-columns: minmax(210px, 1.5fr) repeat(2, minmax(140px, 1fr));
  margin-block-end: 22px;
}
#catalog-results > .empty-state { grid-column: 1 / -1; }
@media (max-width: 760px) {
  .catalog-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalog-filter .field:first-child { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .featured-carousel { gap: 12px; }
  .featured-carousel > .course-card { flex-basis: min(82vw, 360px); }
  .catalog-filter { grid-template-columns: minmax(0, 1fr); }
  .catalog-filter .field:first-child { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .featured-carousel { will-change: auto; }
}