/* OpenClass.lk Phase 1 — dependency-free, Blade-friendly design tokens and components. */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-latin-400-700.woff2") format("woff2-variations"),
       url("/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-latin-400-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;
  --brand-blue: #0878f9;
  --brand-blue-dark: #075ecf;
  --brand-cyan: #25c9f5;
  --brand-orange: #ff7410;
  --brand-yellow: #ffb512;
  --background: #f7f9fc;
  --surface: #ffffff;
  --surface-muted: #eef3f8;
  --border: #d7e0ea;
  --text-primary: #172033;
  --text-secondary: #48566a;
  --text-muted: #68778c;
  --success: #16835b;
  --warning: #a65c00;
  --danger: #c5363f;
  --info: #1768b0;
  --disabled: #8c98a8;
  --focus: #075ecf;
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --text-display: clamp(1.875rem, 2.75vw + 1rem, 3.25rem);
  --text-h1: clamp(1.75rem, 2vw + 1rem, 2.5rem);
  --text-h2: clamp(1.4rem, 1.2vw + 1rem, 2rem);
  --text-h3: 1.25rem;
  --text-h4: 1.0625rem;
  --text-body: 1rem;
  --text-small: .875rem;
  --text-label: .8125rem;
  --text-meta: .75rem;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --radius-sm: .375rem;
  --radius-md: .625rem;
  --radius-lg: 1rem;
  --shadow-sm: 0 1px 2px rgb(15 36 66 / .08);
  --shadow-md: 0 12px 28px rgb(15 36 66 / .12);
  --duration-fast: 150ms;
  --duration-base: 220ms;
  --duration-slow: 300ms;
  --container: 75rem;
  --header-height: 4.5rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--background);
  color: var(--text-primary);
  font: 400 var(--text-body)/1.6 var(--font-sans);
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; }
a { color: var(--brand-blue-dark); text-underline-offset: .2em; }
button, a, input, select, textarea, [tabindex]:not([tabindex="-1"]) { outline: none; }
:focus-visible { outline: .1875rem solid var(--focus); outline-offset: .1875rem; }
::selection { background: #b9e8ff; color: #102340; }
[hidden] { display: none !important; }

.skip-link { position: fixed; z-index: 200; top: .5rem; left: .5rem; transform: translateY(-150%); background: var(--surface); padding: .75rem 1rem; border-radius: var(--radius-sm); }
.skip-link:focus { transform: none; }
.container { width: min(calc(100% - 2rem), var(--container)); margin-inline: auto; }
.section { padding-block: var(--space-7); scroll-margin-top: 5.5rem; }
.section--compact { padding-block: var(--space-6); }
.section-heading { display: flex; gap: var(--space-4); align-items: end; justify-content: space-between; margin-bottom: var(--space-5); }
.section-heading > div { max-width: 46rem; }
.eyebrow { margin: 0 0 var(--space-2); color: var(--brand-blue-dark); font-size: var(--text-label); font-weight: var(--weight-bold); letter-spacing: .06em; text-transform: uppercase; }
h1, h2, h3, h4, p { overflow-wrap: anywhere; }
h1, h2, h3, h4 { margin: 0; font-weight: var(--weight-semibold); line-height: 1.22; letter-spacing: -.015em; }
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); }
h1 { font-weight: var(--weight-bold); }
p { margin: 0; }
.display { font-size: var(--text-display); font-weight: var(--weight-bold); line-height: 1.08; letter-spacing: -.03em; }
.lead { color: var(--text-secondary); font-size: 1.125rem; line-height: 1.65; }
.small { font-size: var(--text-small); }
.meta { color: var(--text-muted); font-size: var(--text-meta); }
.muted { color: var(--text-muted); }
.stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.stack > *, .grid > * { min-width: 0; }
.cluster { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.grid { display: grid; gap: var(--space-5); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.site-header { position: sticky; z-index: 50; top: 0; min-height: var(--header-height); border-bottom: 1px solid var(--border); background: rgb(255 255 255 / .96); }
.site-header__inner { display: flex; min-height: var(--header-height); align-items: center; justify-content: space-between; gap: var(--space-5); }
.brand { display: inline-flex; flex: 0 0 auto; align-items: center; }
.brand img { width: 11.25rem; height: auto; }
.brand--icon img { width: 2.75rem; aspect-ratio: 1; object-fit: contain; }
.desktop-nav { display: flex; gap: var(--space-1); align-items: center; }
.desktop-nav a { color: var(--text-secondary); padding: .65rem .75rem; border-radius: var(--radius-sm); font-size: var(--text-small); font-weight: var(--weight-semibold); text-decoration: none; }
.desktop-nav a:hover, .desktop-nav a[aria-current="page"] { background: var(--surface-muted); color: var(--brand-blue-dark); }
.site-header__actions { display: flex; gap: var(--space-2); align-items: center; }
.mobile-header-actions, .mobile-menu { display: none; }

.btn { display: inline-flex; min-height: 2.75rem; align-items: center; justify-content: center; gap: .5rem; border: 1px solid transparent; border-radius: var(--radius-md); padding: .625rem 1rem; cursor: pointer; font-size: var(--text-small); font-weight: var(--weight-semibold); line-height: 1.2; text-decoration: none; transition: background var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast), box-shadow var(--duration-fast), transform var(--duration-fast); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--brand-blue-dark); color: #fff; box-shadow: 0 2px 8px rgb(7 94 207 / .2); }
.btn--primary:hover { background: #064fab; }
.btn--secondary { background: #e8f4ff; color: #0754ad; }
.btn--outline { border-color: #9fb3ca; background: var(--surface); color: var(--text-primary); }
.btn--text { background: transparent; color: var(--brand-blue-dark); }
.btn--danger { background: var(--danger); color: #fff; }
.btn--action { background: var(--brand-orange); color: #321200; }
.btn--action:hover { background: #e96508; }
.btn--icon { width: 2.75rem; padding: 0; }
.btn[disabled], .btn[aria-disabled="true"] { background: #e5e9ee; color: #66717f; box-shadow: none; cursor: not-allowed; transform: none; }
.btn__spinner { width: 1rem; height: 1rem; border: 2px solid rgb(255 255 255 / .45); border-top-color: currentColor; border-radius: 50%; animation: spin .8s linear infinite; }

.hero-shell { border-bottom: 1px solid var(--border); background: var(--surface); }
.hero-shell__inner { display: grid; grid-template-columns: 1.25fr .75fr; gap: var(--space-7); align-items: center; min-height: 24rem; padding-block: var(--space-7); }
.hero-shell .lead { max-width: 42rem; margin-top: var(--space-4); }
.hero-mark { display: grid; place-items: center; min-height: 15rem; border: 1px solid #cce6ff; border-radius: var(--radius-lg); background: #edf8ff; }
.hero-mark img { width: min(14rem, 65%); aspect-ratio: 1; object-fit: contain; }

.token-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--space-3); }
.swatch { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-sm); }
.swatch__color { height: 5rem; background: var(--swatch); }
.swatch__label { padding: var(--space-3); font-size: var(--text-small); }
.swatch__label code { display: block; color: var(--text-muted); font-size: var(--text-meta); }
.type-sample { padding-block: var(--space-4); border-bottom: 1px solid var(--border); }
.type-sample:last-child { border-bottom: 0; }

.panel, .card { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.panel { padding: var(--space-5); }
.card { overflow: hidden; transition: border-color var(--duration-base), box-shadow var(--duration-base), transform var(--duration-base); }
.card:hover { border-color: #b2c7db; box-shadow: 0 8px 22px rgb(15 36 66 / .09); transform: translateY(-2px); }
.card__body { display: grid; gap: var(--space-3); padding: var(--space-4); }
.card__footer { display: flex; gap: var(--space-3); align-items: end; justify-content: space-between; margin-top: auto; padding-top: var(--space-2); }
.course-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); align-items: stretch; }
.course-card, .lecturer-card { display: flex; min-width: 0; flex-direction: column; }
.media-box { position: relative; overflow: hidden; background: #dfeaf4; }
.media-box--course { aspect-ratio: 16 / 9; }
.media-box--profile { aspect-ratio: 1 / 1; }
.media-box img { width: 100%; height: 100%; object-fit: cover; }
.media-fallback { display: grid; width: 100%; height: 100%; place-items: center; background: #e7f5ff; color: #0754ad; font-size: 2rem; font-weight: var(--weight-bold); }
.media-box .badge { position: absolute; top: .75rem; left: .75rem; }
.course-card__title { display: -webkit-box; min-height: 3.15rem; overflow: hidden; font-weight: var(--weight-bold); -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.course-card__lecturer { display: -webkit-box; min-height: 2.8rem; overflow: hidden; color: var(--text-secondary); font-size: var(--text-small); font-weight: var(--weight-semibold); -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.qualification { display: -webkit-box; min-height: 2.5rem; overflow: hidden; color: var(--text-muted); font-size: var(--text-meta); line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.course-card__facts { display: flex; flex-wrap: wrap; gap: .375rem; }
.fact { border-radius: 999px; background: var(--surface-muted); color: var(--text-secondary); padding: .25rem .55rem; font-size: var(--text-meta); font-weight: var(--weight-semibold); }
.schedule { color: var(--text-secondary); font-size: var(--text-small); }
.price { font-weight: var(--weight-bold); }
.rating { color: #795200; font-size: var(--text-small); font-weight: var(--weight-semibold); }
.lecturer-card .media-box { max-height: 15rem; }
.lecturer-card h3 { font-weight: var(--weight-semibold); }

.badge { display: inline-flex; width: fit-content; min-height: 1.5rem; align-items: center; gap: .35rem; border: 1px solid transparent; border-radius: 999px; padding: .15rem .5rem; font-size: .6875rem; font-weight: var(--weight-semibold); line-height: 1.2; white-space: nowrap; }
.badge::before { width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; content: ""; }
.badge--success, .badge--active, .badge--paid, .badge--completed, .badge--free { border-color: #a8dec8; background: #e6f7f0; color: #116945; }
.badge--info, .badge--upcoming { border-color: #b7d9f6; background: #eaf5ff; color: #115c9c; }
.badge--live, .badge--danger, .badge--overdue, .badge--cancelled { border-color: #efb5b9; background: #fff0f1; color: #a62831; }
.badge--live::before { animation: pulse 1.5s ease-in-out infinite; }
.badge--warning, .badge--now, .badge--due, .badge--grace { border-color: #f0d19b; background: #fff6e5; color: #825008; }
.badge--pending, .badge--processing, .badge--locked { border-color: #cbd4df; background: #f1f4f7; color: #4d5d70; }

.field { display: grid; gap: .375rem; }
.field label, .field-label { color: var(--text-primary); font-size: var(--text-label); font-weight: var(--weight-medium); }
.required { color: var(--danger); }
.control { width: 100%; min-height: 2.875rem; border: 1px solid #aebdcd; border-radius: var(--radius-md); background: var(--surface); color: var(--text-primary); padding: .65rem .75rem; transition: border var(--duration-fast), box-shadow var(--duration-fast); }
.control:hover { border-color: #8297ab; }
.control:focus { border-color: var(--brand-blue-dark); box-shadow: 0 0 0 .1875rem rgb(8 120 249 / .16); }
textarea.control { min-height: 7rem; resize: vertical; }
.control[aria-invalid="true"] { border-color: var(--danger); }
.helper { color: var(--text-muted); font-size: var(--text-meta); }
.error-text { color: #a2212a; font-size: var(--text-meta); font-weight: var(--weight-semibold); }
.choice { display: inline-flex; min-height: 2.75rem; align-items: center; gap: .625rem; font-size: var(--text-small); }
.choice input { width: 1.125rem; height: 1.125rem; accent-color: var(--brand-blue-dark); }
.upload { display: grid; min-height: 8rem; place-items: center; border: 1px dashed #8fa4b9; border-radius: var(--radius-md); background: #fafcff; padding: var(--space-4); text-align: center; }
.search-wrap { position: relative; }
.search-wrap .control { padding-left: 2.5rem; }
.search-wrap::before { position: absolute; z-index: 1; top: .75rem; left: .8rem; content: "⌕"; color: var(--text-muted); font-size: 1.25rem; }

.info-card { display: grid; gap: var(--space-2); padding: var(--space-4); }
.info-card__value { font-size: 1.75rem; font-weight: var(--weight-bold); line-height: 1.1; }
.notification-card { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-3); align-items: start; padding: var(--space-4); }
.notification-card__dot { width: .625rem; height: .625rem; margin-top: .45rem; border-radius: 50%; background: var(--brand-blue); }
.live-card { border-left: .25rem solid var(--brand-orange); }
.progress { overflow: hidden; height: .625rem; border-radius: 999px; background: #dfe6ee; }
.progress__bar { height: 100%; border-radius: inherit; background: var(--brand-blue-dark); }
.metadata-row { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; color: var(--text-secondary); font-size: var(--text-small); }
.stat-item { padding-left: var(--space-4); border-left: .2rem solid var(--brand-cyan); }

.tabs { display: flex; overflow-x: auto; gap: var(--space-1); border-bottom: 1px solid var(--border); scrollbar-width: thin; }
.tab { flex: 0 0 auto; border: 0; border-bottom: .1875rem solid transparent; background: transparent; color: var(--text-secondary); padding: .75rem 1rem; cursor: pointer; font-size: var(--text-small); font-weight: var(--weight-semibold); }
.tab[aria-selected="true"] { border-bottom-color: var(--brand-blue-dark); color: var(--brand-blue-dark); }
.tabpanel { padding-block: var(--space-4); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; list-style: none; font-size: var(--text-small); }
.breadcrumbs li:not(:last-child)::after { margin-left: .35rem; color: var(--text-muted); content: "/"; }
.pagination { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pagination a { display: grid; min-width: 2.75rem; min-height: 2.75rem; place-items: center; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); text-decoration: none; }
.pagination a[aria-current="page"] { border-color: var(--brand-blue-dark); background: var(--brand-blue-dark); color: #fff; }

.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.data-table { width: 100%; border-collapse: collapse; font-size: var(--text-small); }
.data-table th { background: var(--surface-muted); color: var(--text-secondary); font-size: var(--text-label); font-weight: var(--weight-semibold); text-align: left; }
.data-table th, .data-table td { padding: .75rem 1rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table .long-cell { max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mobile-data-list { display: none; }
.data-card { display: grid; gap: var(--space-3); padding: var(--space-4); }
.data-card__row { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--space-2); }
.data-card__row dt { color: var(--text-muted); font-size: var(--text-label); font-weight: var(--weight-medium); }
.data-card__row dd { margin: 0; overflow-wrap: anywhere; font-size: var(--text-small); }

.shell-demo { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.dashboard-shell { display: grid; grid-template-columns: 14rem minmax(0, 1fr); min-height: 25rem; }
.sidebar { padding: var(--space-4); border-right: 1px solid var(--border); background: #102340; color: #fff; }
.sidebar__brand { margin-bottom: var(--space-5); }
.sidebar__brand img { width: 9rem; }
.sidebar nav { display: grid; gap: var(--space-1); }
.sidebar a { border-radius: var(--radius-sm); color: #dce9f8; padding: .6rem .75rem; font-size: var(--text-small); text-decoration: none; }
.sidebar a[aria-current="page"] { background: #21476f; color: #fff; }
.dashboard-main { padding: var(--space-5); }
.dashboard-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-5); }
.bottom-nav { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--border); background: var(--surface); }
.bottom-nav a { display: grid; min-height: 4rem; place-items: center; color: var(--text-muted); font-size: .6875rem; font-weight: var(--weight-semibold); text-decoration: none; }
.bottom-nav a[aria-current="page"] { color: var(--brand-blue-dark); }

.state { display: grid; min-height: 14rem; place-items: center; padding: var(--space-5); text-align: center; }
.state__icon { display: grid; width: 3rem; height: 3rem; place-items: center; margin-inline: auto; border-radius: 50%; background: #e8f4ff; color: var(--brand-blue-dark); font-size: 1.25rem; font-weight: var(--weight-semibold); }
.state__content { display: grid; max-width: 28rem; gap: var(--space-2); }
.state__content .btn { margin: var(--space-2) auto 0; }
.state--error .state__icon { background: #fff0f1; color: var(--danger); }
.access-denied { border-top: .25rem solid var(--warning); }

.skeleton { position: relative; overflow: hidden; border-radius: var(--radius-sm); background: #e3e9f0; }
.skeleton::after { position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgb(255 255 255 / .65), transparent); content: ""; animation: shimmer 1.5s infinite; }
.skeleton--text { width: 100%; height: .8rem; }
.skeleton--text-short { width: 60%; height: .8rem; }
.skeleton-card { display: grid; gap: var(--space-3); padding: var(--space-4); }
.skeleton-card .media-box { margin: calc(var(--space-4) * -1); margin-bottom: var(--space-2); }
.critical-loader { display: inline-grid; justify-items: center; gap: var(--space-3); padding: var(--space-5); text-align: center; }
.critical-loader img { width: 4.5rem; aspect-ratio: 1; object-fit: contain; animation: breathe 1.4s ease-in-out infinite; }

.dropdown-wrap { position: relative; width: fit-content; }
.dropdown { position: absolute; z-index: 30; top: calc(100% + .5rem); right: 0; min-width: 13rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-md); padding: .4rem; }
.dropdown a { display: block; border-radius: .35rem; color: var(--text-primary); padding: .55rem .65rem; font-size: var(--text-small); text-decoration: none; }
.dropdown a:hover { background: var(--surface-muted); }
dialog { width: min(calc(100% - 2rem), 32rem); border: 0; border-radius: var(--radius-lg); background: var(--surface); color: var(--text-primary); box-shadow: var(--shadow-md); padding: 0; }
dialog::backdrop { background: rgb(10 24 43 / .54); }
.dialog__body { display: grid; gap: var(--space-3); padding: var(--space-5); }
.dialog__footer { display: flex; justify-content: end; gap: var(--space-2); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border); }
.bottom-sheet { width: 100%; max-width: none; margin: auto 0 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; transform: translateY(100%); transition: transform var(--duration-base); }
.bottom-sheet.is-open { transform: translateY(0); }
.sheet-handle { width: 3rem; height: .25rem; margin: .65rem auto 0; border-radius: 999px; background: #b9c4d0; }
.drawer { position: fixed; z-index: 100; inset: 0 auto 0 0; width: min(85vw, 20rem); background: var(--surface); box-shadow: var(--shadow-md); padding: var(--space-4); }
.drawer nav { display: grid; gap: var(--space-1); margin-top: var(--space-5); }
.drawer nav a { border-radius: var(--radius-sm); color: var(--text-primary); padding: .75rem; text-decoration: none; }
.has-drawer::after { position: fixed; z-index: 90; inset: 0; background: rgb(10 24 43 / .54); content: ""; }
.toast { position: fixed; z-index: 150; right: var(--space-4); bottom: var(--space-4); max-width: min(24rem, calc(100% - 2rem)); border-left: .25rem solid var(--success); border-radius: var(--radius-md); background: #112c25; color: #fff; box-shadow: var(--shadow-md); padding: .85rem 1rem; animation: toast-in var(--duration-base) ease-out; }

.showcase-nav { position: fixed; z-index: 20; top: 50%; right: .75rem; display: grid; gap: .25rem; transform: translateY(-50%); }
.showcase-nav a { width: .65rem; height: .65rem; border: 2px solid var(--brand-blue-dark); border-radius: 50%; background: var(--surface); font-size: 0; }
.dev-note { border-left: .25rem solid var(--brand-yellow); background: #fff9e9; padding: var(--space-3) var(--space-4); color: #624500; font-size: var(--text-small); }
.component-label { margin-bottom: var(--space-3); color: var(--text-muted); font-size: var(--text-meta); font-weight: var(--weight-semibold); letter-spacing: .06em; text-transform: uppercase; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: .3; transform: scale(.75); } }
@keyframes shimmer { to { transform: translateX(100%); } }
@keyframes breathe { 50% { transform: scale(.94); opacity: .72; } }
@keyframes toast-in { from { transform: translateY(1rem); opacity: 0; } }

@media (max-width: 64rem) {
  .desktop-nav { display: none; }
  .site-header__actions .btn:not(.btn--icon) { display: none; }
  .mobile-header-actions { display: flex; gap: var(--space-2); }
  .mobile-menu { position: absolute; top: 100%; right: 0; left: 0; display: grid; gap: .25rem; border-bottom: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-md); padding: var(--space-3) 1rem var(--space-4); }
  .mobile-menu a { border-radius: var(--radius-sm); color: var(--text-primary); padding: .75rem; font-weight: var(--weight-semibold); text-decoration: none; }
  .course-grid, .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-shell__inner { grid-template-columns: 1fr 18rem; }
}

@media (max-width: 48rem) {
  :root { --header-height: 4rem; }
  .container { width: min(calc(100% - 1.5rem), var(--container)); }
  .section { padding-block: var(--space-6); }
  .brand img { width: 8.75rem; }
  .hero-shell__inner { grid-template-columns: 1fr; min-height: auto; gap: var(--space-5); padding-block: var(--space-6); }
  .hero-mark { min-height: 10rem; }
  .hero-mark img { width: 8rem; }
  .grid--2, .grid--3, .grid--4, .course-grid { grid-template-columns: 1fr; }
  .section-heading { align-items: start; flex-direction: column; }
  .dashboard-shell { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .dashboard-main { padding: var(--space-4); }
  .table-wrap { display: none; }
  .mobile-data-list { display: grid; gap: var(--space-3); }
  .showcase-nav { display: none; }
}

@media (max-width: 26.875rem) {
  .site-header__actions { display: none; }
  .mobile-header-actions { display: flex; }
  .card__footer { align-items: stretch; flex-direction: column; }
  .card__footer .btn { width: 100%; }
  .dialog__footer { align-items: stretch; flex-direction: column-reverse; }
  .dialog__footer .btn { width: 100%; }
  .notification-card { grid-template-columns: auto 1fr; }
  .notification-card > :last-child { grid-column: 2; }
  .data-card__row { grid-template-columns: 1fr; gap: .125rem; }
}

@media (min-width: 90rem) {
  :root { --container: 84rem; }
  .course-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media print {
  .site-header, .showcase-nav, .bottom-nav, .btn { display: none !important; }
  body { background: #fff; }
  .section { break-inside: avoid; }
  .panel, .card { box-shadow: none; }
}