@font-face { font-family: "Onest"; src: url("../fonts/Onest-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/IBMPlexMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/IBMPlexMono-Medium.woff2") format("woff2"); font-weight: 500 700; font-style: normal; font-display: swap; }

:root {
  --blue-900: rgb(0, 32, 92);
  --blue-850: rgb(0, 26, 112);
  --blue-800: rgb(0, 22, 137);
  --blue-700: rgb(0, 47, 135);
  --blue-500: rgb(0, 130, 202);
  --blue-400: rgb(58, 141, 222);
  --blue-200: rgb(171, 200, 231);
  --red-700: rgb(206, 14, 45);
  --red-500: rgb(210, 69, 30);
  --red-400: rgb(231, 79, 61);
  --orange-600: rgb(238, 118, 35);
  --orange-500: rgb(241, 138, 0);
  --orange-400: rgb(255, 158, 24);
  --orange-vivid: rgb(255, 77, 0);
  --growth-only: rgb(0, 164, 66);
  --neutral-700: rgb(88, 89, 91);
  --neutral-600: rgb(117, 117, 117);
  --neutral-500: rgb(128, 130, 133);
  --neutral-400: rgb(131, 132, 148);
  --neutral-300: rgb(203, 195, 187);
  --neutral-200: rgb(207, 210, 211);
  --ink: #101827;
  --muted: #667085;
  --surface: #fff;
  --canvas: #f4f6fa;
  --line: #dfe4ed;
  --soft-blue: #eaf1fb;
  --soft-orange: #fff2e7;
  --soft-red: #fff0f1;
  --sidebar-width: 268px;
  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 28px;
  --shadow: 0 18px 55px rgba(0, 32, 92, .09);
  --font-sans: "Onest", "Segoe UI", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "Cascadia Mono", Consolas, monospace;
}

html { scroll-behavior: smooth; }
body { min-height: 100vh; background: var(--canvas); color: var(--ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, a, input, select, textarea, summary { outline-offset: 3px; }
:focus-visible { outline: 3px solid var(--blue-500); }
::selection { background: var(--blue-200); color: var(--blue-900); }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 999; padding: 10px 14px; background: var(--blue-900); color: #fff; border-radius: 8px; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.muted { color: var(--muted); }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--blue-700); font: 700 11px/1.2 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.eyebrow::before { width: 18px; height: 2px; background: var(--orange-600); content: ""; }
code { font-family: var(--font-mono); }

.site-header, .course-header, .admin-mobile-header { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px clamp(20px, 4vw, 64px); background: rgba(244, 246, 250, .88); border-bottom: 1px solid rgba(0, 32, 92, .08); backdrop-filter: blur(18px); position: relative; z-index: 30; }
.brand, .admin-brand { display: inline-flex; align-items: center; gap: 12px; }
.brand { min-height: 44px; }
.brand > span:last-child, .admin-brand > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.brand strong, .admin-brand strong { color: var(--blue-900); font-size: 15px; letter-spacing: -.02em; }
.brand small, .admin-brand small { color: var(--muted); font-size: 11px; }
.brand-mark { width: 38px; height: 38px; display: inline-flex; align-items: flex-end; justify-content: center; gap: 3px; padding: 8px; background: var(--blue-700); border-radius: 12px; transform: rotate(-2deg); }
.brand-mark i { width: 5px; display: block; background: #fff; border-radius: 5px 5px 1px 1px; }
.brand-mark i:nth-child(1) { height: 10px; opacity: .72; }
.brand-mark i:nth-child(2) { height: 19px; }
.brand-mark i:nth-child(3) { height: 14px; background: var(--orange-400); }
.header-actions { display: flex; align-items: center; gap: 20px; }
.quiet-link { color: #455166; font-size: 14px; font-weight: 650; }
.quiet-link:hover { color: var(--blue-700); }
.site-footer { display: flex; justify-content: space-between; gap: 16px; padding: 28px clamp(20px, 4vw, 64px); color: var(--muted); border-top: 1px solid var(--line); font-size: 12px; }

.flash-stack { position: fixed; z-index: 100; top: 92px; right: 22px; width: min(400px, calc(100% - 44px)); display: grid; gap: 8px; }
.flash { padding: 14px 16px; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--blue-500); border-radius: 10px; box-shadow: var(--shadow); color: #2f394b; font-size: 14px; }
.flash-error { border-left-color: var(--red-700); background: var(--soft-red); }
.flash-warning { border-left-color: var(--orange-600); background: var(--soft-orange); }

.btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border: 1px solid transparent; border-radius: 10px; font-weight: 720; font-size: 14px; line-height: 1.1; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { color: #fff; background: var(--blue-700); border-color: var(--blue-700); box-shadow: 0 8px 22px rgba(0, 47, 135, .16); }
.btn-primary:hover { background: var(--blue-900); border-color: var(--blue-900); }
.btn-secondary { color: var(--blue-900); background: #fff; border-color: #cfd7e5; }
.btn-secondary:hover { border-color: var(--blue-400); background: var(--soft-blue); }
.btn-warning { color: #6d3600; background: var(--soft-orange); border-color: #efb076; }
.btn-danger { color: #fff; background: var(--red-700); border-color: var(--red-700); }
.btn-danger-quiet { color: var(--red-700); background: #fff; border-color: #efc8ce; }
.btn-quiet { color: #344054; background: transparent; border-color: transparent; }
.btn-quiet:hover { background: #edf1f6; }
.btn-download { color: var(--blue-900); background: var(--soft-blue); border-color: #cbdcf3; }
.btn-disabled { color: #8a93a2; background: #f0f2f5; border-color: #e1e4e9; pointer-events: none; }
.btn-wide { width: 100%; }
.btn-sm { min-height: 40px; padding: 9px 13px; font-size: 12px; }

.form-group { margin-bottom: 20px; }
.form-label { display: block; margin-bottom: 8px; color: #344054; font-size: 13px; font-weight: 700; }
.form-control, .form-select { width: 100%; min-height: 48px; padding: 12px 14px; color: var(--ink); background: #fff; border: 1px solid #cfd6e1; border-radius: 10px; box-shadow: 0 1px 2px rgba(16, 24, 39, .02); }
textarea.form-control { resize: vertical; }
.form-control:focus, .form-select:focus { border-color: var(--blue-400); box-shadow: 0 0 0 4px rgba(58, 141, 222, .13); outline: 0; }
.field-error { margin-top: 6px; color: var(--red-700); font-size: 12px; font-weight: 650; }

/* Student access */
.access-page { background: #eef2f8; }
.access-page main { min-height: calc(100vh - 139px); display: grid; align-items: center; background-image: radial-gradient(circle at 12% 10%, rgba(171,200,231,.34), transparent 33%), radial-gradient(circle at 92% 88%, rgba(238,118,35,.08), transparent 28%); }
.access-shell { width: min(1180px, calc(100% - 40px)); margin: 54px auto 72px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(330px, .75fr); align-items: center; gap: clamp(50px, 8vw, 120px); }
.access-copy h1 { max-width: 760px; margin: 22px 0 24px; font-size: clamp(44px, 6.2vw, 84px); line-height: .95; letter-spacing: -.062em; }
.access-copy h1 span { color: #8590a2; }
.access-copy > p { max-width: 580px; margin-bottom: 36px; color: #566176; font-size: 17px; line-height: 1.65; }
.trust-list { max-width: 560px; margin: 0; padding: 0; list-style: none; border-top: 1px solid #ced6e3; }
.trust-list li { display: grid; grid-template-columns: 45px 1fr; gap: 10px; padding: 15px 0; color: #39465b; border-bottom: 1px solid #dce2eb; font-size: 14px; font-weight: 620; }
.trust-list span { color: #9f4e00; font: 700 11px var(--font-mono); }
.access-card, .login-card { position: relative; padding: clamp(28px, 4vw, 48px); background: rgba(255,255,255,.9); border: 1px solid #d8dfe9; border-radius: var(--radius-lg); box-shadow: 0 30px 90px rgba(0,32,92,.13); overflow: hidden; }
.access-card::after { position: absolute; width: 170px; height: 170px; right: -85px; bottom: -85px; border: 28px solid rgba(58,141,222,.09); border-radius: 50%; content: ""; }
.access-card h2, .login-card h2 { margin: 18px 0 8px; font-size: 30px; letter-spacing: -.04em; }
.access-card > .muted, .login-card > .muted { margin-bottom: 30px; line-height: 1.5; font-size: 14px; }
.code-input { font-family: var(--font-mono); font-size: 18px; letter-spacing: .1em; text-transform: uppercase; }
.privacy-note { position: relative; z-index: 1; margin: 18px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.card-signal { height: 44px; display: flex; align-items: flex-end; gap: 7px; margin-bottom: 12px; }
.card-signal span { width: 8px; border-radius: 5px; background: var(--blue-700); }
.card-signal span:nth-child(1){height:14px;opacity:.3}.card-signal span:nth-child(2){height:26px;opacity:.55}.card-signal span:nth-child(3){height:38px}.card-signal span:nth-child(4){height:21px;background:var(--orange-600)}

/* Student library */
.course-header { position: sticky; top: 0; }
.course-intro, .filter-tabs, .lesson-feed { width: min(1160px, calc(100% - 40px)); margin-left: auto; margin-right: auto; }
.course-intro { min-height: 330px; display: grid; grid-template-columns: 1fr 280px; align-items: center; gap: 50px; padding: 68px 0 44px; }
.course-intro h1 { max-width: 820px; margin: 18px 0 16px; color: var(--blue-900); font-size: clamp(42px, 6vw, 76px); line-height: .98; letter-spacing: -.055em; }
.course-intro p { max-width: 700px; margin: 0; color: #5b6678; font-size: 17px; line-height: 1.6; }
.filter-tabs { display: flex; gap: 8px; padding: 8px; background: #e9edf3; border-radius: 14px; }
.filter-tab { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; padding: 8px 22px; color: #596477; border-radius: 9px; font-size: 13px; font-weight: 700; }
.filter-tab:hover { color: var(--blue-700); }
.filter-tab.active { color: var(--blue-900); background: #fff; box-shadow: 0 3px 12px rgba(16,24,39,.07); }
.lesson-feed { display: grid; gap: 14px; padding: 28px 0 88px; }
.lesson-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: box-shadow .2s ease, border-color .2s ease; }
.lesson-card[open] { border-color: #c9d7e9; box-shadow: 0 15px 42px rgba(0,32,92,.07); }
.lesson-card summary { min-height: 104px; display: grid; grid-template-columns: 58px minmax(0,1fr) auto 34px; align-items: center; gap: 20px; padding: 20px 26px; list-style: none; cursor: pointer; }
.lesson-card summary::-webkit-details-marker { display: none; }
.lesson-index { color: var(--blue-700); font: 700 13px var(--font-mono); }
.lesson-heading { display: flex; flex-direction: column; gap: 6px; }
.lesson-heading small { color: #9f4e00; font: 700 10px var(--font-mono); letter-spacing: .11em; text-transform: uppercase; }
.lesson-heading strong { font-size: 20px; letter-spacing: -.025em; }
.material-count { color: var(--muted); font-size: 12px; white-space: nowrap; }
.summary-toggle { width: 30px; height: 30px; position: relative; border: 1px solid #d6dde8; border-radius: 50%; }
.summary-toggle::before,.summary-toggle::after{position:absolute;left:8px;top:14px;width:12px;height:1.5px;background:var(--blue-700);content:""}.summary-toggle::after{transform:rotate(90deg);transition:transform .2s}.lesson-card[open] .summary-toggle::after{transform:rotate(0)}
.lesson-body { padding: 0 26px 26px 104px; }
.lesson-description { max-width: 780px; margin: 0 0 20px; color: #626d7e; line-height: 1.6; font-size: 14px; }
.material-list { border-top: 1px solid var(--line); }
.material-row { display: grid; grid-template-columns: 48px minmax(0,1fr) auto; align-items: center; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.material-row:last-child { border-bottom: 0; }
.file-icon { width: 46px; height: 52px; display: flex; align-items: flex-end; justify-content: center; padding: 7px 3px; position: relative; color: var(--blue-900); background: var(--soft-blue); border: 1px solid #cbdcf3; border-radius: 7px 12px 7px 7px; }
.file-icon::after { position: absolute; top: -1px; right: -1px; width: 13px; height: 13px; background: #fff; border-left: 1px solid #cbdcf3; border-bottom: 1px solid #cbdcf3; border-radius: 0 10px 0 4px; content: ""; }
.material-copy h3 { margin: 0 0 5px; font-size: 15px; }
.material-copy p { margin: 0 0 6px; color: #606b7d; font-size: 13px; line-height: 1.45; }
.material-copy small { color: var(--muted); font-size: 10px; }
.empty-inline { padding: 20px; color: var(--muted); background: #f7f8fa; border-radius: 10px; font-size: 13px; }
.preview-banner { position: sticky; top: 82px; z-index: 20; padding: 10px 20px; color: #6b3900; background: #fff0dc; border-bottom: 1px solid #f0c18b; text-align: center; font-size: 12px; font-weight: 700; }

/* Login */
.login-shell { min-height: calc(100vh - 139px); display: grid; grid-template-columns: 1.1fr .9fr; }
.login-panel { display: flex; flex-direction: column; justify-content: center; padding: clamp(45px, 8vw, 120px); color: #fff; background: var(--blue-900); background-image: linear-gradient(135deg, transparent 45%, rgba(58,141,222,.19)), radial-gradient(circle at 20% 80%,rgba(238,118,35,.2),transparent 28%); }
.login-panel .eyebrow { color: var(--blue-200); }.login-panel h1{margin:25px 0;font-size:clamp(44px,6vw,80px);line-height:.96;letter-spacing:-.06em}.login-panel p{max-width:520px;color:#c7d4e8;line-height:1.65}
.login-card { width: min(470px, calc(100% - 40px)); align-self: center; justify-self: center; }

/* Admin shell */
.admin-page { background: #f3f5f8; }
.admin-layout { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar-width) 1fr; }
.admin-sidebar { height: 100vh; position: sticky; top: 0; z-index: 60; display: flex; flex-direction: column; padding: 26px 18px 20px; color: #dce5f2; background: var(--blue-900); }
.admin-brand { padding: 0 10px 28px; border-bottom: 1px solid rgba(255,255,255,.1); }
.admin-brand strong { color: #fff; }.admin-brand small{color:#9fb2cf}.admin-brand .brand-mark{background:#fff}.admin-brand .brand-mark i{background:var(--blue-700)}.admin-brand .brand-mark i:nth-child(3){background:var(--orange-600)}
.admin-nav { display: grid; gap: 5px; margin-top: 28px; }
.admin-nav a { min-height: 48px; display: flex; align-items: center; gap: 13px; padding: 10px 13px; color: #afbed3; border-radius: 10px; font-size: 13px; font-weight: 660; }
.admin-nav a span { width: 24px; color: #7da6dc; text-align: center; font: 16px var(--font-mono); }
.admin-nav a:hover { color: #fff; background: rgba(255,255,255,.07); }.admin-nav a.active{color:#fff;background:rgba(58,141,222,.22);box-shadow:inset 3px 0 var(--orange-600)}
.sidebar-foot { display: grid; gap: 4px; margin-top: auto; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.1); }
.sidebar-foot a, .sidebar-foot button { width: 100%; min-height: 42px; padding: 10px 12px; color: #aebed3; background: transparent; border: 0; border-radius: 8px; text-align: left; font-size: 12px; }
.sidebar-foot a:hover,.sidebar-foot button:hover{color:#fff;background:rgba(255,255,255,.07)}
.admin-content { min-width: 0; padding: 48px clamp(28px, 5vw, 76px) 80px; }
.admin-mobile-header { display: none; }
.sidebar-scrim { display: none; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 34px; }
.page-heading h1 { margin: 10px 0 8px; font-size: clamp(34px, 4.2vw, 58px); line-height: 1; letter-spacing: -.05em; }
.page-heading p { max-width: 680px; margin: 0; color: var(--muted); line-height: 1.55; }
.heading-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.heading-actions form { display: flex; }
.back-link { display: inline-block; margin-bottom: 14px; color: var(--blue-700); font-size: 13px; font-weight: 700; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 22px; }
.metric-grid article { min-height: 190px; display: flex; flex-direction: column; padding: 25px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.metric-grid small { color: #606b7c; font-size: 12px; font-weight: 700; }.metric-grid strong{margin:auto 0 5px;color:var(--blue-900);font-size:54px;line-height:1;letter-spacing:-.05em}.metric-grid span{color:var(--muted);font-size:11px}.metric-grid .metric-attention{background:var(--soft-orange);border-color:#f1d0ac}.metric-grid .metric-attention strong{color:#9f4e00}
.quick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.quick-grid > a { min-height: 230px; padding: 28px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); transition: transform .2s, border-color .2s, box-shadow .2s; }
.quick-grid > a:hover { transform: translateY(-3px); border-color: var(--blue-200); box-shadow: var(--shadow); }
.quick-grid span { color: #9f4e00; font: 700 11px var(--font-mono); }.quick-grid h2{margin:45px 0 10px;font-size:22px;letter-spacing:-.03em}.quick-grid p{min-height:44px;color:var(--muted);font-size:13px;line-height:1.55}.quick-grid b{color:var(--blue-700);font-size:12px}
.admin-list { display: grid; gap: 10px; }
.admin-row, .material-admin-row { display: flex; align-items: center; gap: 20px; min-height: 116px; padding: 18px 20px; background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.row-order { width: 52px; flex: 0 0 52px; display: grid; justify-items: center; gap: 3px; color: var(--blue-700); font: 700 11px var(--font-mono); }
.row-order button { width: 28px; height: 26px; color: #7a8493; background: transparent; border: 0; border-radius: 6px; }.row-order button:hover{color:var(--blue-700);background:var(--soft-blue)}.row-order.compact{width:28px;flex-basis:28px}
.row-main { min-width: 0; flex: 1; }.row-main h2,.row-main h3{margin:7px 0 5px;font-size:18px;letter-spacing:-.02em}.row-main h2 a:hover{color:var(--blue-700)}.row-main p{margin:0;color:var(--muted);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.type-badge,.status,.audience-kind { display: inline-flex; align-items: center; min-height: 22px; padding: 4px 8px; border-radius: 20px; font: 700 9px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.type-badge { color: var(--blue-700); background: var(--soft-blue); }.type-practice{color:#934a00;background:var(--soft-orange)}.type-other{color:#565f6e;background:#eef0f3}
.status { color: #556071; background: #eef0f3; }.status.published{color:var(--blue-700);background:#e7effa}.status.hidden{color:#7b5a37;background:#f7eee5}
.row-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }.row-actions form{display:flex}
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 45px 0 18px; }.section-heading h2{margin:7px 0 0;font-size:30px;letter-spacing:-.04em}
.lesson-page-heading { padding-bottom: 30px; border-bottom: 1px solid var(--line); }.lesson-page-heading .row-meta{margin-top:12px}.audience-line{margin-top:10px!important;font-size:12px}
.material-admin-list { display: grid; gap: 9px; }.material-admin-row{min-height:106px}.material-admin-row .file-icon{flex:0 0 46px}
.danger-zone { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 56px; padding: 25px; background: var(--soft-red); border: 1px solid #edcbd0; border-radius: 14px; }.danger-zone h2{margin:0 0 6px;color:#831329;font-size:16px}.danger-zone p{margin:0;color:#8b5d65;font-size:12px}

.editor-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .7fr); align-items: start; gap: 18px; }
.form-card { padding: clamp(24px, 3vw, 36px); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.form-card h2 { margin: 0 0 24px; font-size: 21px; letter-spacing: -.025em; }.form-card > .muted{margin-top:-14px;margin-bottom:20px;font-size:12px;line-height:1.5}
.check-list { display: grid; gap: 7px; max-height: 370px; margin-bottom: 24px; overflow-y: auto; }
.check-list label { min-height: 52px; display: flex; align-items: center; gap: 11px; padding: 8px 11px; border: 1px solid #e1e5eb; border-radius: 9px; cursor: pointer; }.check-list label:hover{background:#f8faff;border-color:#cbd8e9}.check-list input{width:18px;height:18px;accent-color:var(--blue-700)}.check-list span{display:flex;flex-direction:column;gap:2px}.check-list strong{font-size:12px}.check-list small{color:var(--muted);font-size:10px}
.single-form { width: min(680px, 100%); }.file-fingerprint{display:grid;gap:8px;padding:15px;background:#f6f7f9;border-radius:10px}.file-fingerprint span{color:var(--muted);font-size:10px;font-weight:700}.file-fingerprint code{overflow-wrap:anywhere;font-size:10px}
.drop-zone { min-height: 230px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; margin-bottom: 20px; padding: 30px; color: var(--blue-900); background: #f6f9fd; border: 1.5px dashed #647fa8; border-radius: 15px; text-align: center; cursor: pointer; transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease; }.drop-zone:hover{background:#edf4fd;border-color:var(--blue-700)}.drop-zone.is-dragover{background:#e4effd;border-color:var(--blue-700);box-shadow:0 0 0 4px rgba(58,141,222,.15);transform:translateY(-2px)}.drop-zone.is-dragover .drop-icon{background:var(--orange-600);transform:scale(1.08)}.drop-zone:focus-within{outline:3px solid var(--blue-500);outline-offset:3px}.drop-zone input{position:absolute;width:1px;height:1px;opacity:0}.drop-zone small{max-width:440px;color:var(--muted);font-size:11px;line-height:1.5}.drop-icon{width:46px;height:46px;display:flex;align-items:center;justify-content:center;color:#fff;background:var(--blue-700);border-radius:50%;font-size:22px;transition:background .18s ease,transform .18s ease}
.upload-queue { display: grid; gap: 7px; margin-bottom: 20px; }.queue-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:10px 12px;background:#f4f6f9;border-radius:8px;font-size:11px}.queue-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.queue-item b{color:var(--blue-700)}.queue-item.error b{color:var(--red-700)}

.notice { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; padding: 16px 18px; color: #294467; background: var(--soft-blue); border: 1px solid #cddcf0; border-radius: 12px; font-size: 12px; }.notice strong{flex:0 0 auto;color:var(--blue-900)}.notice-warning{margin-top:30px;color:#6b4a28;background:var(--soft-orange);border-color:#f1d0ad}
.audience-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }.audience-card{padding:25px;background:#fff;border:1px solid var(--line);border-radius:var(--radius)}.audience-card.inactive{background:#f7f8fa;border-style:dashed}.audience-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.audience-kind{color:var(--blue-700);background:var(--soft-blue)}.audience-card h2{margin:30px 0 8px;font-size:23px;letter-spacing:-.03em}.audience-card>p{color:var(--muted);font-size:12px}.audience-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:22px}.more-actions{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}.more-actions summary{color:var(--muted);font-size:11px;cursor:pointer}.more-actions>div{display:flex;gap:14px;margin-top:10px}.more-actions button{padding:0;color:var(--red-700);background:transparent;border:0;font-size:11px}.full-span{grid-column:1/-1}
.code-reveal { width: min(800px, 100%); margin: 8vh auto; padding: clamp(28px,5vw,60px); background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);text-align:center}.code-reveal .eyebrow{justify-content:center}.code-reveal h1{margin:22px 0 10px;font-size:48px;letter-spacing:-.05em}.code-reveal>p{max-width:600px;margin:0 auto 30px;color:var(--muted);line-height:1.6}.code-box{display:flex;align-items:center;gap:12px;margin-bottom:20px;padding:12px 12px 12px 22px;background:#f0f4f9;border:1px solid #cfd9e8;border-radius:14px}.code-box code{min-width:0;flex:1;color:var(--blue-900);font-size:clamp(18px,4vw,30px);font-weight:700;letter-spacing:.1em}.code-reveal .notice{text-align:left}
.archive-section { margin-bottom: 36px; }.archive-section>h2{margin-bottom:14px;font-size:20px}.archive-section .admin-row{min-height:90px}.error-page,.empty-state{padding:70px 28px;text-align:center}.error-page span,.empty-symbol{color:#9f4e00;font:700 14px var(--font-mono);letter-spacing:.15em}.error-page h1,.empty-state h2{margin:15px 0 8px;font-size:32px;letter-spacing:-.04em}.error-page p,.empty-state p{margin:0 auto 24px;color:var(--muted);line-height:1.5}
.menu-toggle { width:44px;height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:#fff;border:1px solid var(--line);border-radius:10px}.menu-toggle span{width:20px;height:2px;background:var(--blue-900)}

@media (max-width: 1050px) {
  .metric-grid { grid-template-columns: repeat(2, 1fr); }.quick-grid{grid-template-columns:1fr}.quick-grid>a{min-height:190px}.quick-grid h2{margin-top:28px}
  .admin-row,.material-admin-row{align-items:flex-start;flex-wrap:wrap}.row-main{flex-basis:calc(100% - 85px)}.row-actions{width:100%;padding-left:72px;justify-content:flex-start}
}

@media (max-width: 820px) {
  .access-shell { grid-template-columns: 1fr; }.access-copy{padding-top:15px}.access-card{width:min(520px,100%);justify-self:center}
  .course-intro{grid-template-columns:1fr;min-height:auto;padding-top:52px}
  .admin-layout{display:block}.admin-mobile-header{display:flex;position:sticky;top:0;z-index:55}.admin-sidebar{width:min(290px,86vw);position:fixed;left:0;top:0;transform:translateX(-102%);transition:transform .24s ease}.admin-page.sidebar-open .admin-sidebar{transform:translateX(0)}.sidebar-scrim{position:fixed;inset:0;z-index:50;background:rgba(8,18,35,.44)}.admin-page.sidebar-open .sidebar-scrim{display:block}.admin-content{padding:38px 22px 70px}
  .editor-layout{grid-template-columns:1fr}.audience-grid{grid-template-columns:1fr}.login-shell{grid-template-columns:1fr}.login-panel{min-height:360px;padding:50px 25px}.login-card{margin:45px auto}
}

@media (max-width: 620px) {
  .site-header,.course-header{min-height:70px;padding:12px 16px}.site-header .quiet-link:first-child{display:none}.brand small{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.site-footer{flex-direction:column}
  .access-shell{width:calc(100% - 28px);margin:36px auto}.access-copy h1{font-size:44px}.access-copy>p{font-size:15px}.access-card{padding:26px 20px}
  .course-intro,.filter-tabs,.lesson-feed{width:calc(100% - 28px)}.course-intro h1{font-size:42px}.filter-tabs{overflow-x:auto}.filter-tab{padding:8px 16px;white-space:nowrap}.lesson-card summary{grid-template-columns:35px minmax(0,1fr) 30px;gap:10px;padding:17px 14px}.material-count{display:none}.lesson-heading strong{font-size:16px}.lesson-body{padding:0 14px 18px}.material-row{grid-template-columns:42px minmax(0,1fr);align-items:start}.material-row>.btn{grid-column:1/-1;width:100%}.file-icon{width:40px;height:47px}.preview-banner{top:70px}
  .page-heading,.section-heading{align-items:flex-start;flex-direction:column}.page-heading>.btn,.section-heading>.btn{width:100%}.page-heading h1{font-size:38px}.metric-grid{grid-template-columns:1fr 1fr}.metric-grid article{min-height:145px;padding:18px}.metric-grid strong{font-size:42px}.quick-grid>a{padding:22px}.admin-row,.material-admin-row{padding:15px;gap:12px}.row-order{width:36px;flex-basis:36px}.row-main{flex-basis:calc(100% - 55px)}.row-actions{padding-left:0}.row-actions .btn{flex:1}.danger-zone{align-items:flex-start;flex-direction:column}.danger-zone .btn{width:100%}.danger-zone form{width:100%}.notice{align-items:flex-start;flex-direction:column;gap:5px}.form-card{padding:22px 17px}.audience-actions .btn,.audience-actions form{flex:1}.audience-actions form .btn{width:100%}.code-reveal{margin:25px auto}.code-box{align-items:stretch;flex-direction:column;padding:18px}.code-box code{font-size:21px}.code-reveal h1{font-size:38px}
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}

/* Accessibility and narrow-screen hardening. */
.btn-sm, .filter-tab, .sidebar-foot a, .sidebar-foot button { min-height: 44px; }
.row-order button { width: 44px; height: 44px; border-radius: 8px; }
.row-order.compact { width: 44px; flex-basis: 44px; }
.material-copy { min-width: 0; }
.material-copy h3, .material-copy p, .material-copy small { overflow-wrap: anywhere; }
.lesson-heading, .row-main, .audience-card, .page-heading > div { min-width: 0; }
.lesson-heading strong, .row-main h2, .row-main h3, .audience-card h2,
.page-heading h1, .audience-line, .lesson-description {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.upload-summary { padding: 12px 14px; color: #6d3600; background: var(--soft-orange); border: 1px solid #efc395; border-radius: 9px; font-size: 12px; line-height: 1.5; }
.more-actions summary { min-height: 44px; display: flex; align-items: center; }
.more-actions button { min-height: 44px; padding: 8px 2px; }
.back-link, .quiet-link { min-height: 44px; display: inline-flex; align-items: center; }
.sidebar-close { display: none; }

@media (max-width: 820px) {
  .admin-page.sidebar-open { overflow: hidden; }
  .sidebar-close {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 16px;
    right: 14px;
    color: #fff;
    background: transparent;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 10px;
    font-size: 26px;
  }
  .admin-brand { padding-right: 46px; }
}

@media (max-width: 620px) {
  .row-order, .row-order.compact { width: 44px; flex-basis: 44px; }
  .row-main { flex-basis: calc(100% - 64px); }
}

/* LMS v2: richer content, icon system and responsive administration. */
.ui-icon { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn .ui-icon { width: 16px; height: 16px; }
.admin-nav a .ui-icon { width: 20px; height: 20px; color: #8eb3e4; }
.admin-nav a.active .ui-icon, .admin-nav a:hover .ui-icon { color: #fff; }

.flash { display: grid; grid-template-columns: minmax(0,1fr) 44px; align-items: center; gap: 10px; padding: 10px 8px 10px 16px; transition: opacity .22s ease, transform .22s ease; }
.flash.is-closing { opacity: 0; transform: translateX(14px); }
.flash-close { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; color: #475467; background: transparent; border: 0; border-radius: 8px; }
.flash-close:hover { color: var(--blue-900); background: #edf1f6; }

.course-intro { min-height: 0; display: block; padding: clamp(54px,7vw,92px) 0 clamp(36px,5vw,62px); }
.course-intro h1 { max-width: 1080px; font-size: clamp(48px,7.2vw,98px); overflow-wrap: anywhere; }
.course-intro p { max-width: 900px; }
.course-content { width: min(1160px, calc(100% - 40px)); margin: 0 auto; padding: 26px 0 88px; }
.course-section { margin-bottom: 42px; }
.course-section[hidden], .lesson-card[hidden], .filter-empty[hidden] { display: none !important; }
.course-section-heading { display: grid; grid-template-columns: 46px minmax(0,1fr); gap: 18px; align-items: start; padding: 22px 2px 19px; border-top: 1px solid #d8dee8; }
.course-section-heading > span { color: var(--blue-700); font: 700 11px var(--font-mono); letter-spacing: .08em; }
.course-section-heading h2 { margin: 0 0 7px; color: var(--blue-900); font-size: clamp(24px,3vw,36px); letter-spacing: -.04em; }
.course-section-heading p { max-width: 760px; margin: 0; color: var(--muted); line-height: 1.55; }
.section-lessons { width: 100%; margin: 0; padding: 0; }
.summary-toggle::before, .summary-toggle::after { display: none; }
.summary-toggle { display: inline-flex; align-items: center; justify-content: center; }
.summary-toggle .ui-icon { width: 17px; height: 17px; transition: transform .2s ease; }
.lesson-card[open] .summary-toggle .ui-icon { transform: rotate(180deg); }

.file-icon { width: 58px; height: 64px; flex: 0 0 58px; padding: 0; overflow: hidden; background: transparent; border: 0; border-radius: 8px; }
.file-icon::after { display: none; }
.file-icon img { width: 100%; height: 100%; display: block; object-fit: contain; }
.material-row { grid-template-columns: 58px minmax(0,1fr) auto; }
.material-admin-row .file-icon { flex-basis: 58px; }

.course-notes { display: grid; gap: 12px; margin-bottom: 14px; }
.course-note { padding: clamp(20px,3vw,34px); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.course-note h3 { margin: 6px 0 12px; font-size: clamp(20px,2.5vw,28px); letter-spacing: -.03em; }
.course-note-link { min-height: 130px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.course-note-link p { margin: 0; color: var(--muted); }
.note-kicker, .panel-label { display: block; color: var(--blue-700); font: 700 10px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.markdown-body { color: #293347; font-size: 15px; line-height: 1.72; overflow-wrap: anywhere; }
.markdown-body > :first-child { margin-top: 0; }
.markdown-body > :last-child { margin-bottom: 0; }
.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4 { margin: 1.6em 0 .55em; color: var(--blue-900); line-height: 1.15; letter-spacing: -.025em; }
.markdown-body h1 { font-size: 2em; }.markdown-body h2{font-size:1.55em}.markdown-body h3{font-size:1.25em}
.markdown-body a { color: var(--blue-700); text-decoration: underline; text-underline-offset: 3px; }
.markdown-body pre { max-width: 100%; padding: 18px; overflow-x: auto; color: #e9f1ff; background: #071d43; border-radius: 12px; }
.markdown-body code { padding: .16em .34em; color: #7e2e00; background: #fff0e5; border-radius: 4px; }
.markdown-body pre code { padding: 0; color: inherit; background: transparent; }
.markdown-body img { width: auto; max-width: 100%; height: auto; display: block; margin: 24px auto; border-radius: 14px; box-shadow: 0 10px 28px rgba(0,32,92,.12); }
.markdown-body .codehilite { margin: 1.4em 0; }
.markdown-body .codehilite .hll { background-color: #173764; }
.markdown-body .codehilite .c, .markdown-body .codehilite .c1, .markdown-body .codehilite .cm { color: #8ea1bd; font-style: italic; }
.markdown-body .codehilite .k, .markdown-body .codehilite .kc, .markdown-body .codehilite .kd, .markdown-body .codehilite .kn { color: #ff9f43; font-weight: 700; }
.markdown-body .codehilite .s, .markdown-body .codehilite .s1, .markdown-body .codehilite .s2 { color: #9fe3b1; }
.markdown-body .codehilite .nf, .markdown-body .codehilite .nc { color: #77c8ff; }
.markdown-body .codehilite .nb, .markdown-body .codehilite .bp { color: #d6b4ff; }
.markdown-body .codehilite .mi, .markdown-body .codehilite .mf { color: #ffd27d; }
.markdown-body .codehilite .o, .markdown-body .codehilite .p { color: #dbe8ff; }
.markdown-body blockquote { margin: 1.4em 0; padding: 4px 0 4px 20px; color: #4d5a70; border-left: 3px solid var(--orange-600); }
.markdown-body table { width: 100%; display: block; overflow-x: auto; border-collapse: collapse; }
.markdown-body th, .markdown-body td { min-width: 120px; padding: 10px 12px; border: 1px solid #d8dfe9; text-align: left; }
.markdown-body th { color: var(--blue-900); background: var(--soft-blue); }
.note-page { width: min(1120px, calc(100% - 40px)); margin: 0 auto; padding: 58px 0 90px; }
.note-page article { padding: clamp(28px,5vw,64px); background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.note-page h1 { margin: 18px 0 32px; color: var(--blue-900); font-size: clamp(38px,6vw,68px); line-height: 1; letter-spacing: -.05em; overflow-wrap: anywhere; }

.type-lab { color: #0f5d88; background: #e5f4fb; }
.type-self_study { color: #654b8c; background: #f0eafb; }
.type-extra { color: #8a4300; background: #fff0df; }
.section-status { color: #40546e; background: #edf2f8; }
.admin-filter-tabs { width: 100%; margin-bottom: 18px; overflow-x: auto; }
.filtered-admin-list { min-width: 0; }
.audience-mini-list { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.audience-mini-list span { display: inline-flex; align-items: center; min-height: 24px; padding: 4px 8px; color: #40546e; background: #edf2f8; border-radius: 20px; font-size: 10px; font-weight: 700; }

.admin-settings-grid { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(300px,.8fr); gap: 18px; margin-top: 22px; scroll-margin-top: 24px; }
.admin-settings-grid .form-card h2, .audience-overview h2 { margin: 10px 0 8px; font-size: 28px; }
.audience-chip-list { display: grid; gap: 7px; margin: 22px 0; }
.audience-chip { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 12px; background: #f5f7fa; border: 1px solid #e3e7ed; border-radius: 10px; }
.audience-chip:hover { border-color: var(--blue-200); background: var(--soft-blue); }
.audience-chip strong { overflow-wrap: anywhere; }
.audience-chip small { color: var(--muted); text-align: right; }

.audience-list { display: grid; gap: 12px; }
.audience-row { min-width: 0; display: grid; grid-template-columns: minmax(230px,.75fr) minmax(310px,1fr) minmax(260px,.85fr); align-items: center; gap: 24px; padding: 22px 24px; background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.audience-row.inactive { background: #f7f8fa; border-style: dashed; }
.audience-identity { min-width: 0; }
.audience-identity h2 { margin: 13px 0 5px; font-size: 22px; letter-spacing: -.03em; overflow-wrap: anywhere; }
.audience-identity p, .legacy-code { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.access-code-panel { min-width: 0; padding: 14px 16px; background: #f5f7fa; border: 1px solid #e1e6ee; border-radius: 12px; }
.code-inline { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 5px; }
.code-inline code { min-width: 0; color: var(--blue-900); font-size: clamp(14px,1.5vw,18px); font-weight: 700; letter-spacing: .06em; overflow-wrap: anywhere; }
.icon-button { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 10px; color: var(--blue-700); background: transparent; border: 1px solid transparent; border-radius: 9px; font-size: 11px; font-weight: 700; }
.icon-button:hover { background: var(--soft-blue); border-color: #ccdaed; }
.icon-button.danger { color: var(--red-700); }
.code-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.custom-code { position: relative; }
.custom-code summary { min-height: 44px; display: inline-flex; align-items: center; padding: 9px 12px; color: var(--blue-700); border-radius: 8px; cursor: pointer; font-size: 11px; font-weight: 700; }
.custom-code[open] summary { background: var(--soft-blue); }
.custom-code form { display: grid; grid-template-columns: minmax(180px,1fr) auto; gap: 7px; margin-top: 8px; }
.custom-code .form-control { min-height: 44px; font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; }
.audience-row-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.audience-row-actions form { display: flex; }

.section-admin-list { display: grid; gap: 14px; }
.section-admin-card { padding: clamp(22px,3vw,32px); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.section-admin-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.section-admin-head > div:first-child { min-width: 0; }
.section-admin-head h2 { margin: 12px 0 7px; font-size: clamp(24px,3vw,34px); letter-spacing: -.04em; overflow-wrap: anywhere; }
.section-admin-head p { max-width: 720px; margin: 0; color: var(--muted); line-height: 1.5; }
.section-content-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; padding-top: 22px; }
.section-content-summary > div { min-width: 0; }
.section-content-summary .panel-label { margin-bottom: 9px; }
.compact-content-row { min-height: 52px; display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #edf0f4; }
.compact-content-row > strong, .compact-content-row > div { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.compact-content-row div > strong, .compact-content-row div > small { display: block; }
.compact-content-row small { margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.35; }
.compact-actions { display: flex !important; flex: 0 0 auto !important; }
.compact-actions form { display: flex; }
.markdown-source { min-height: 430px; font: 13px/1.6 var(--font-mono); tab-size: 2; }
.markdown-cheatsheet { display: flex; flex-wrap: wrap; gap: 7px; }
.markdown-cheatsheet code { padding: 5px 8px; color: #40546e; background: #edf2f8; border-radius: 6px; font-size: 10px; }
.note-assets-panel { width: 100%; margin-top: 22px; scroll-margin-top: 24px; }
.note-assets-heading h2 { margin: 10px 0 7px; font-size: clamp(24px,3vw,34px); letter-spacing: -.035em; }
.note-assets-heading p { margin: 0 0 20px; color: var(--muted); }
.note-assets-panel [data-upload-form] { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 12px; }
.note-assets-panel .drop-zone { min-height: 126px; }
.note-assets-panel .upload-queue, .note-assets-panel .upload-summary { grid-column: 1 / -1; }
.note-asset-list { display: grid; gap: 10px; margin-top: 22px; }
.note-asset-row { display: grid; grid-template-columns: 64px minmax(0,1fr) auto; align-items: center; gap: 14px; padding: 12px; background: #f8fafc; border: 1px solid #e1e6ed; border-radius: 13px; }
.note-asset-preview { width: 64px; height: 64px; display: grid; place-items: center; overflow: hidden; border-radius: 10px; }
.note-asset-preview > img { width: 100%; height: 100%; object-fit: cover; }
.note-asset-preview .file-icon { width: 48px; height: 54px; flex-basis: 48px; }
.note-asset-copy { min-width: 0; }
.note-asset-copy label { display: block; }
.note-asset-copy strong, .note-asset-copy small { display: block; overflow-wrap: anywhere; }
.note-asset-copy small { margin: 3px 0 8px; color: var(--muted); font-size: 10px; }
.note-asset-copy .form-control { min-height: 40px; padding: 8px 10px; font: 11px/1.35 var(--font-mono); }
.note-asset-actions { display: flex; gap: 4px; }
.note-asset-actions form { display: flex; }
.note-assets-empty { margin: 0; }
.form-hint { display: block; margin-top: 7px; color: var(--muted); font-size: 11px; }

/* Keep the access screen within a desktop viewport while preserving mobile scrolling. */
.access-page { min-height: 100svh; display: grid; grid-template-rows: auto minmax(0,1fr) auto; }
.access-page main { min-height: 0; }
.access-shell { margin: clamp(14px,2.5vh,30px) auto; }

@media (max-width: 1180px) {
  .audience-row { grid-template-columns: minmax(230px,.75fr) minmax(300px,1fr); }
  .audience-row-actions { grid-column: 1 / -1; justify-content: flex-start; padding-top: 4px; }
}

@media (min-width: 821px) and (max-height: 820px) {
  .access-page .site-header { min-height: 68px; padding-top: 10px; padding-bottom: 10px; }
  .access-page .site-footer { padding-top: 13px; padding-bottom: 13px; }
  .access-shell { margin: 10px auto; gap: clamp(34px,6vw,80px); }
  .access-copy h1 { margin: 14px 0 14px; font-size: clamp(42px,5.1vw,66px); }
  .access-copy > p { margin-bottom: 18px; font-size: 15px; }
  .trust-list li { padding: 9px 0; }
  .access-card { padding: 28px 32px; }
  .access-card > .muted { margin-bottom: 18px; }
  .card-signal { height: 32px; margin-bottom: 7px; }
}

@media (max-width: 820px) {
  .access-page { display: block; }
  .admin-settings-grid, .section-content-summary { grid-template-columns: 1fr; }
  .section-admin-head { flex-direction: column; }
  .section-admin-head .row-actions { width: 100%; padding-left: 0; justify-content: flex-start; }
  .audience-row { grid-template-columns: 1fr; gap: 14px; }
  .audience-row-actions { grid-column: auto; }
  .course-content { width: min(100% - 28px, 1160px); }
}

@media (max-width: 620px) {
  .course-intro { width: calc(100% - 28px); padding: 42px 0 30px; }
  .course-intro h1 { font-size: clamp(40px,13vw,58px); }
  .filter-tabs { width: calc(100% - 28px); scrollbar-width: thin; }
  .course-section-heading { grid-template-columns: 32px minmax(0,1fr); gap: 10px; }
  .course-note-link { align-items: flex-start; flex-direction: column; }
  .course-note-link .btn { width: 100%; }
  .file-icon { width: 48px; height: 54px; flex-basis: 48px; }
  .material-row { grid-template-columns: 48px minmax(0,1fr); }
  .material-admin-row .file-icon { flex-basis: 48px; }
  .admin-settings-grid { margin-top: 14px; }
  .audience-chip { align-items: flex-start; flex-direction: column; }
  .audience-chip small { text-align: left; }
  .audience-row { padding: 18px 15px; }
  .audience-row-actions, .code-actions { align-items: stretch; flex-direction: column; }
  .audience-row-actions form, .audience-row-actions .btn, .code-actions form, .code-actions .btn, .custom-code { width: 100%; }
  .custom-code summary { width: 100%; justify-content: center; }
  .custom-code form { grid-template-columns: 1fr; }
  .section-admin-card { padding: 18px 15px; }
  .section-admin-head .row-actions, .heading-actions { width: 100%; }
  .section-admin-head .row-actions > *, .heading-actions > * { flex: 1 1 180px; }
  .compact-content-row { align-items: flex-start; flex-wrap: wrap; }
  .compact-actions { width: 100%; justify-content: flex-start; }
  .markdown-source { min-height: 320px; }
  .note-page { width: calc(100% - 28px); padding: 36px 0 60px; }
  .note-page article { padding: 24px 18px; }
  .flash-stack { top: 78px; right: 12px; width: calc(100% - 24px); }
}

@media (prefers-reduced-motion: reduce) {
  .flash, .summary-toggle .ui-icon, [data-sort-item], [data-visibility-item] { transition: none !important; }
}

/* LMS v3: compact administration and calmer student library. */
.form-card-wide { width: 100%; }
.form-grid-two { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(240px,.6fr); gap: 18px; }
.form-actions { display: flex; justify-content: flex-end; padding-top: 6px; }
.settings-form { width: 100%; max-width: none; }

.section-admin-row { min-height: 132px; display: grid; grid-template-columns: 48px minmax(0,1fr) auto; align-items: center; gap: 20px; padding: 18px 20px; }
.section-order { display: grid; justify-items: center; gap: 0; color: var(--blue-700); font: 700 10px var(--font-mono); }
.section-order form { display: flex; }
.section-order .icon-button { min-width: 44px; width: 44px; min-height: 44px; height: 44px; padding: 9px; }
.icon-button:disabled { color: #a8b0bd; cursor: not-allowed; opacity: .45; }
.icon-button:disabled:hover { background: transparent; border-color: transparent; }
.section-admin-main { min-width: 0; }
.section-admin-main h2 { margin: 10px 0 5px; font-size: clamp(21px,2.2vw,28px); letter-spacing: -.035em; overflow-wrap: anywhere; }
.section-admin-main p { max-width: 760px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.section-row-actions, .note-admin-actions, .audience-icon-actions, .code-icon-actions { display: flex; align-items: center; gap: 4px; }
.section-row-actions form, .note-admin-actions form { display: flex; }

.notes-admin-list { display: grid; gap: 10px; }
.note-admin-card { min-height: 108px; display: grid; grid-template-columns: 48px minmax(0,1fr) auto; align-items: center; gap: 18px; padding: 16px 20px; background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.note-admin-icon { width: 44px; height: 44px; display: grid; place-items: center; color: var(--blue-700); background: var(--soft-blue); border-radius: 11px; }
.note-admin-icon .ui-icon { width: 21px; height: 21px; }
.note-admin-main { min-width: 0; }
.note-admin-main h2 { margin: 9px 0 4px; font-size: 19px; letter-spacing: -.025em; overflow-wrap: anywhere; }
.note-admin-main p { margin: 0; color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }

.audience-compact-list { gap: 8px; }
.audience-compact-row { min-width: 0; min-height: 96px; display: grid; grid-template-columns: 44px minmax(220px,1fr) minmax(130px,.35fr) auto; align-items: center; gap: 16px; padding: 14px 18px; background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.audience-compact-row.inactive { background: #f7f8fa; border-style: dashed; }
.audience-symbol { width: 42px; height: 42px; display: grid; place-items: center; color: var(--blue-700); background: var(--soft-blue); border-radius: 11px; }
.audience-compact-main { min-width: 0; }
.audience-compact-main h2 { margin: 8px 0 2px; font-size: 19px; letter-spacing: -.025em; overflow-wrap: anywhere; }
.audience-compact-main p { margin: 0; color: var(--muted); font-size: 10px; }
.audience-code-state { min-width: 0; }
.audience-code-state strong { display: block; margin-top: 4px; color: var(--blue-900); font-size: 13px; }
.icon-button-primary { color: #fff; background: var(--blue-700); border-color: var(--blue-700); }
.icon-button-primary:hover { color: #fff; background: var(--blue-900); border-color: var(--blue-900); }
.icon-button.copied { color: #fff; background: var(--blue-700); }
[data-sort-item], [data-visibility-item] { transition: opacity .16s ease, border-color .2s ease, box-shadow .2s ease; }
[data-sort-item].is-updating, [data-visibility-item].is-updating { opacity: .58; }
[data-sort-item].is-updated, [data-visibility-item].is-updated { border-color: rgba(58,141,222,.55); box-shadow: 0 0 0 3px rgba(58,141,222,.1); }
form[aria-busy="true"] button { cursor: progress; }

.modal-backdrop { background-color: #07152d; }
.modal-content { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 28px 90px rgba(4,22,55,.24); }
.modal-header, .modal-footer { padding: 20px 22px; border-color: var(--line); }
.modal-body { padding: 22px; }
.modal-title { margin: 7px 0 0; color: var(--ink); font-size: 24px; letter-spacing: -.035em; }
.btn-close { width: 44px; height: 44px; padding: 0; background-size: 13px; border-radius: 9px; }
.modal-code-section { padding: 18px; background: #f6f8fb; border: 1px solid #e2e7ef; border-radius: 13px; }
.modal-code-section .code-inline { min-height: 48px; margin: 4px 0 12px; }
.modal-code-section .code-inline code { font-size: clamp(16px,3vw,22px); }
.modal-code-actions { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 12px; border-top: 1px solid #e0e5ed; }
.modal-code-actions form, .audience-modal-footer form { display: flex; }
.custom-code-form { margin-top: 18px; padding-top: 16px; border-top: 1px solid #e0e5ed; }
.custom-code-form > div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
.custom-code-form .form-control { min-height: 44px; font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; }
.audience-modal-footer { justify-content: space-between; }

.purge-panel { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 44px; padding: 24px; background: #fff7f7; border: 1px solid #efcdd2; border-radius: 16px; }
.purge-panel h2 { margin: 8px 0 5px; color: #831329; font-size: 21px; }
.purge-panel p { max-width: 720px; margin: 0; color: #7a555c; font-size: 12px; line-height: 1.5; }

.course-intro { padding: clamp(42px,5.5vw,72px) 0 clamp(28px,4vw,46px); }
.course-intro h1 { max-width: 940px; margin-top: 16px; font-size: clamp(42px,5vw,66px); line-height: 1.02; letter-spacing: -.05em; }
.course-context { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.course-group-name { display: inline-flex; align-items: center; min-height: 28px; padding: 5px 10px; color: #40546e; background: #eaf0f8; border-radius: 20px; font-size: 11px; font-weight: 700; }
.course-toolbar { width: min(1160px, calc(100% - 40px)); display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; margin: 0 auto 18px; }
.course-search { min-height: 50px; display: grid; grid-template-columns: 22px minmax(0,1fr) 40px; align-items: center; gap: 8px; padding: 4px 5px 4px 15px; color: #6b7688; background: #fff; border: 1px solid #d8dee8; border-radius: 13px; }
.course-search:focus-within { border-color: var(--blue-400); box-shadow: 0 0 0 3px rgba(58,141,222,.14); }
.course-search input { width: 100%; min-height: 40px; padding: 0; color: var(--ink); background: transparent; border: 0; outline: 0; }
.course-search button { width: 40px; height: 40px; display: grid; place-items: center; color: #697588; background: transparent; border: 0; border-radius: 9px; }
.course-search button:hover { color: var(--blue-900); background: var(--soft-blue); }
.course-search button[hidden] { display: none; }
.modules-toggle { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 14px; color: var(--blue-900); background: #fff; border: 1px solid #d8dee8; border-radius: 13px; font-size: 12px; font-weight: 700; }
.modules-toggle:hover { background: var(--soft-blue); border-color: var(--blue-200); }
.course-toolbar > .modules-toggle { grid-column: 2; grid-row: 1; justify-self: end; }
.course-toolbar .filter-tabs { width: 100%; grid-column: 1 / -1; margin: 0; }
.course-filter-select { display: none; }

.course-content { padding-top: 8px; }
.course-module { margin-bottom: 14px; overflow: clip; background: #fff; border: 1px solid var(--line); border-radius: 17px; }
.course-module-summary { min-height: 112px; display: grid; grid-template-columns: 46px minmax(0,1fr) auto 38px; align-items: center; gap: 16px; padding: 18px 20px; cursor: pointer; list-style: none; }
.course-module-summary::-webkit-details-marker { display: none; }
.course-module-summary:hover { background: #f8faff; }
.module-index { width: 42px; height: 42px; display: grid; place-items: center; color: #fff; background: var(--blue-700); border-radius: 11px; font: 700 11px var(--font-mono); }
.module-heading { min-width: 0; display: block; }
.module-heading small { display: block; margin-bottom: 5px; color: var(--blue-700); font: 700 9px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.module-heading strong { display: block; color: var(--blue-900); font-size: clamp(20px,2.4vw,28px); letter-spacing: -.035em; overflow-wrap: anywhere; }
.module-heading > span { display: block; max-width: 720px; margin-top: 5px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.module-meta { color: var(--muted); font-size: 11px; font-weight: 700; white-space: nowrap; }
.module-toggle { width: 36px; height: 36px; display: grid; place-items: center; color: var(--blue-700); border: 1px solid #d9e0e9; border-radius: 50%; }
.module-toggle .ui-icon { transition: transform .2s ease; }
.course-module[open] .module-toggle .ui-icon { transform: rotate(180deg); }
.course-module-body { padding: 10px 18px 18px; border-top: 1px solid #edf0f4; }
.course-module-body .lesson-card { background: #f9fafc; box-shadow: none; }
.course-module-body .course-notes { margin-top: 14px; }
.course-module-body .course-note { background: #fbfcfe; }

@media (max-width: 1050px) {
  .audience-compact-row { grid-template-columns: 44px minmax(0,1fr) auto; }
  .audience-code-state { display: none; }
}

@media (max-width: 820px) {
  .form-grid-two { grid-template-columns: 1fr; gap: 0; }
  .filter-tabs { display: none; }
  .course-filter-select { display: grid; gap: 6px; }
  .course-filter-select > span { color: #536074; font-size: 11px; font-weight: 700; }
  .course-toolbar { grid-template-columns: 1fr auto; }
  .course-toolbar .course-search { grid-column: 1 / -1; grid-row: 1; }
  .course-toolbar .course-filter-select { grid-column: 1; grid-row: 2; }
  .course-toolbar .modules-toggle { grid-column: 2; grid-row: 2; align-self: end; }
  .admin-filter-select { margin-bottom: 18px; }
  .section-admin-row { grid-template-columns: 44px minmax(0,1fr); }
  .section-row-actions { grid-column: 2; justify-content: flex-start; }
  .note-admin-card { grid-template-columns: 44px minmax(0,1fr); }
  .note-admin-actions { grid-column: 2; }
  .purge-panel { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 620px) {
  .course-intro { padding: 34px 0 24px; }
  .course-intro h1 { font-size: clamp(34px,10.5vw,46px); line-height: 1.04; }
  .course-toolbar { width: calc(100% - 28px); grid-template-columns: minmax(0,1fr) 50px; }
  .course-toolbar .course-search { grid-column: 1; grid-row: 1; }
  .course-toolbar .modules-toggle { width: 50px; min-width: 50px; padding: 0; grid-column: 2; grid-row: 1; }
  .course-toolbar .modules-toggle [data-modules-toggle-label] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
  .course-toolbar .course-filter-select { grid-column: 1 / -1; grid-row: 2; }
  .course-module-summary { grid-template-columns: 40px minmax(0,1fr) 36px; gap: 11px; min-height: 98px; padding: 14px; }
  .module-index { width: 38px; height: 38px; }
  .module-meta { display: none; }
  .module-heading strong { font-size: 20px; }
  .module-heading > span { display: none; }
  .course-module-body { padding: 12px 10px; }
  .note-assets-panel [data-upload-form] { grid-template-columns: 1fr; }
  .note-assets-panel [data-upload-submit] { width: 100%; }
  .note-asset-row { grid-template-columns: 52px minmax(0,1fr); padding: 10px; }
  .note-asset-preview { width: 52px; height: 52px; }
  .note-asset-actions { grid-column: 1 / -1; justify-content: flex-end; padding-top: 7px; border-top: 1px solid #e1e6ed; }
  .course-module-body .course-notes { margin-top: 2px; }
  .material-row { grid-template-columns: 48px minmax(0,1fr) 44px; align-items: center; gap: 10px; }
  .material-row > .material-download { width: 44px; min-width: 44px; height: 44px; grid-column: 3; grid-row: 1; display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: 11px; }
  .material-download .download-label { display: none; }
  .section-admin-row { grid-template-columns: 40px minmax(0,1fr); gap: 13px; padding: 15px 13px; }
  .section-order .icon-button { min-width: 44px; }
  .section-row-actions, .note-admin-actions { grid-column: 1 / -1; justify-content: flex-end; padding-top: 7px; border-top: 1px solid #edf0f4; }
  .note-admin-card { grid-template-columns: 40px minmax(0,1fr); padding: 15px 13px; }
  .note-admin-icon { width: 40px; height: 40px; }
  .audience-compact-row { grid-template-columns: 40px minmax(0,1fr); gap: 12px; padding: 14px 13px; }
  .audience-symbol { width: 40px; height: 40px; }
  .audience-icon-actions { grid-column: 1 / -1; justify-content: flex-end; padding-top: 7px; border-top: 1px solid #edf0f4; }
  .custom-code-form > div { grid-template-columns: 1fr; }
  .modal-dialog { margin: 10px; }
  .modal-header, .modal-footer, .modal-body { padding: 16px; }
  .modal-code-section { padding: 14px; }
  .modal-code-actions, .audience-modal-footer { align-items: stretch; flex-direction: column; }
  .modal-code-actions form, .modal-code-actions .btn, .audience-modal-footer form, .audience-modal-footer .btn { width: 100%; }
  .purge-panel { padding: 18px 15px; }
  .purge-panel .btn { width: 100%; }
}