:root {
  --red: #f60c15;
  --red-dark: #b3060d;
  --ink: #171113;
  --muted: #736a6c;
  --line: #dde2e8;
  --soft: #f3f5f7;
  --card: #ffffff;
  --dark: #10161d;
  --good: #15803d;
  --warn: #b45309;
  --bad: #b91c1c;
  --cyan: #0891a6;
  --shadow: 0 16px 48px rgba(16, 22, 29, .08);
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #f4f6f8; color: var(--ink); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; border: 0; }
a { color: inherit; }
.login-shell { min-height: 100vh; display: grid; grid-template-columns: 1.05fr .95fr; }
.login-hero { padding: 54px; background: linear-gradient(135deg, #111820, #1d252f 58%, #621219 160%); color: white; display: flex; flex-direction: column; justify-content: space-between; }
.logo { display: inline-flex; align-items: center; gap: 12px; font-weight: 950; letter-spacing: 0; text-transform: uppercase; }
.logo-mark {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background:
    url("/assets/brand/ohara-logo-mark.webp") center / contain no-repeat,
    #fff;
  box-shadow: 0 12px 28px rgba(246, 12, 21, .18);
  color: transparent;
  font-size: 0;
}
.hero-title { max-width: 780px; font-size: 56px; line-height: .98; font-weight: 950; letter-spacing: 0; margin: 80px 0 24px; }
.hero-title span { color: #ffdbdc; }
.hero-list { display: grid; gap: 14px; max-width: 620px; color: #f7dada; }
.hero-list div { padding: 14px 16px; border: 1px solid rgba(255,255,255,.16); border-radius: 8px; background: rgba(255,255,255,.06); backdrop-filter: blur(8px); }
.login-panel { display: grid; place-items: center; padding: 32px; }
.login-card { width: min(520px, 100%); background: rgba(255,255,255,.92); border: 1px solid rgba(255,255,255,.72); border-radius: 8px; padding: 34px; box-shadow: var(--shadow); backdrop-filter: blur(22px); }
.login-card h1 { margin: 0 0 8px; font-size: 32px; }
.login-card p { color: var(--muted); margin: 0 0 24px; }
.field { display: grid; gap: 7px; margin-bottom: 16px; }
.field label { color: var(--muted); font-size: 13px; font-weight: 750; }
.input, select, textarea { width: 100%; border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 11px 12px; outline: none; transition: border .15s, box-shadow .15s; }
textarea { min-height: 120px; resize: vertical; }
.input:focus, select:focus, textarea:focus { border-color: var(--red); box-shadow: 0 0 0 4px rgba(246,12,21,.08); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 8px; padding: 12px 16px; font-weight: 850; background: var(--dark); color: white; min-height: 44px; }
.btn.primary { background: var(--red); }
.btn.ghost { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.btn.soft { background: #eef2f6; color: var(--red-dark); }
.btn.small { padding: 8px 10px; min-height: 34px; border-radius: 8px; font-size: 13px; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.demo-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin-top: 18px; }
.demo-role {
  min-height: 92px;
  text-align: left;
  display: grid;
  gap: 3px;
  align-content: start;
  padding: 13px;
  border-radius: 8px;
  border: 1px solid rgba(6,16,22,.10);
  background: #fff;
  color: var(--ink);
  box-shadow: 0 10px 26px rgba(6,16,22,.05);
}
.demo-role b { color: var(--red); font-size: 18px; }
.demo-role span { font-weight: 900; }
.demo-role small { color: var(--muted); line-height: 1.25; }
.demo-role:hover {
  border-color: rgba(242,15,29,.28);
  box-shadow: 0 16px 36px rgba(242,15,29,.10);
}
.error { color: var(--bad); background: #fff0f0; border: 1px solid #ffd1d1; padding: 10px 12px; border-radius: 8px; margin: 12px 0; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 278px 1fr; }
.sidebar { background: #0f171f; color: #fff; padding: 26px 18px; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 20px; }
.sidebar .logo { padding: 0 8px; }
.user-mini { margin: 8px; padding: 16px; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; background: rgba(255,255,255,.06); }
.user-mini b { display: block; }
.user-mini span { color: #e8cacc; font-size: 13px; }
.nav { display: grid; gap: 7px; }
.nav button { text-align: left; padding: 12px 14px; border-radius: 8px; color: #f4e4e5; background: transparent; font-weight: 800; }
.nav button.active, .nav button:hover { background: rgba(246,12,21,.22); color: #fff; }
.martin-sidebar { width: min(180px, 82%); align-self: center; margin: auto auto 0; object-fit: contain; filter: drop-shadow(0 18px 28px rgba(0,0,0,.22)); }
.sidebar-footer { margin-top: auto; padding: 8px; color: #e8cacc; font-size: 12px; }
.main { padding: 28px; min-width: 0; }
.topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; gap: 16px; }
.topbar h1 { margin: 0; font-size: 38px; letter-spacing: 0; }
.topbar p { margin: 5px 0 0; color: var(--muted); }
.grid { display: grid; gap: 16px; }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.card { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 22px; box-shadow: 0 10px 30px rgba(16,22,29,.05); }
.card h2, .card h3 { margin: 0 0 12px; letter-spacing: 0; }
.card p { color: var(--muted); }
.kpi { padding: 20px; border-radius: 8px; background: #fff; border: 1px solid var(--line); }
.kpi .num { font-size: 38px; font-weight: 950; letter-spacing: 0; }
.kpi .label { color: var(--muted); font-weight: 750; }
.progress { height: 10px; background: #e9edf2; border-radius: 999px; overflow: hidden; }
.progress > span { display: block; height: 100%; background: linear-gradient(90deg, var(--red), #ff7a7f); border-radius: 999px; }
.course-card { display: grid; gap: 12px; }
.badge { display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 5px 8px; border-radius: 8px; background: #eef2f6; color: var(--dark); font-size: 12px; font-weight: 850; }
.badge.good { background: #dcfce7; color: var(--good); }
.badge.warn { background: #fef3c7; color: var(--warn); }
.badge.bad { background: #fee2e2; color: var(--bad); }
.table-wrap { overflow: auto; border-radius: 8px; border: 1px solid var(--line); background: #fff; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 12px 13px; border-bottom: 1px solid #f0e7e8; text-align: left; white-space: nowrap; }
th { background: #f7f9fb; color: #5a4c4f; font-size: 12px; text-transform: uppercase; letter-spacing: 0; }
tr:hover td { background: #fff9f9; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.tabs button { padding: 9px 12px; border-radius: 8px; background: #fff; border: 1px solid var(--line); font-weight: 800; }
.tabs button.active { background: var(--red); color: #fff; border-color: var(--red); }
.lesson { border: 1px solid var(--line); border-radius: 8px; padding: 16px; background: #fff; display: grid; gap: 10px; }
.lesson-title { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
.reader { display: grid; gap: 12px; }
.reader .block { padding: 14px 16px; border-radius: 8px; background: #fff; border: 1px solid var(--line); }
.reader h2 { margin: 0; }
.video-box { border-radius: 8px; background: linear-gradient(135deg, #111820, #3a1116); color: white; padding: 24px; min-height: 170px; display: grid; place-items: center; text-align: center; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.notice { border: 1px solid #ffe1b2; background: #fff7e6; color: #744407; border-radius: 8px; padding: 14px 16px; }
.success { border: 1px solid #bbf7d0; background: #ecfdf5; color: #166534; border-radius: 8px; padding: 14px 16px; }
.muted { color: var(--muted); }
.hidden { display: none !important; }
.command-center { display: flex; align-items: center; justify-content: space-between; gap: 20px; background: #111820; color: #fff; border-radius: 8px; padding: 24px; margin-bottom: 16px; box-shadow: var(--shadow); }
.command-center h2 { margin: 0 0 6px; font-size: 28px; }
.command-center p { margin: 0; color: #c9d1db; }
.attestation-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.att-card { background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: 8px; padding: 16px; display: grid; gap: 14px; box-shadow: 0 10px 30px rgba(16,22,29,.05); }
.att-head { display: flex; gap: 12px; align-items: center; }
.att-head h3 { margin: 0; font-size: 20px; }
.att-head span { color: var(--muted); font-size: 13px; }
.att-icon { width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, white); font-weight: 950; }
.att-body { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 12px; align-items: center; }
.ring { width: 118px; height: 118px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--accent) calc(var(--value) * 1%), #e9edf2 0); position: relative; }
.ring::after { content: ""; position: absolute; inset: 13px; background: #fff; border-radius: 50%; }
.ring b, .ring span { position: relative; z-index: 1; display: block; text-align: center; }
.ring b { font-size: 28px; }
.ring span { max-width: 76px; color: var(--muted); font-size: 11px; }
.att-meta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(42px, auto); gap: 6px 8px; font-size: 13px; min-width: 0; }
.att-meta span { color: var(--muted); }
.att-meta b { text-align: right; white-space: normal; }
.mini-blocks { display: grid; gap: 7px; min-width: 220px; }
.mini-block { display: grid; grid-template-columns: 1fr 44px; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.mini-block::before { content: ""; grid-column: 1; grid-row: 1; height: 5px; background: #e9edf2; border-radius: 999px; }
.mini-block i { grid-column: 1; grid-row: 1; display: block; height: 5px; border-radius: 999px; }
.mini-block b { color: var(--ink); font-size: 12px; text-align: right; }
.queue-list, .submission-history { display: grid; gap: 8px; margin-bottom: 12px; }
.queue-item { display: flex; justify-content: space-between; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: #fff; }
.queue-item b { display: block; }
.queue-item span { display: block; color: var(--muted); font-size: 12px; }
.assignment-box { margin-top: 16px; }
.review-controls { display: grid; grid-template-columns: 84px minmax(120px, 1fr); gap: 8px; margin-bottom: 8px; }
.review-form { display: grid; gap: 8px; min-width: 280px; }
.trend-panel { display: grid; grid-template-columns: minmax(260px, 1fr) 280px; gap: 18px; align-items: center; }
.trend-panel svg { width: 100%; height: 190px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.trend-panel polyline { fill: none; stroke: var(--line); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.grid-lines line { stroke: #e9edf2; stroke-width: 1; }
.trend-legend { display: grid; gap: 9px; }
.trend-legend span { display: flex; align-items: center; gap: 8px; color: var(--muted); font-weight: 750; }
.trend-legend i { width: 28px; height: 4px; border-radius: 999px; display: inline-block; }
.portal-hero { min-height: 320px; display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 22px; align-items: stretch; background: #0f171f; color: #fff; border-radius: 8px; padding: 28px; margin-bottom: 18px; position: relative; overflow: hidden; box-shadow: var(--shadow); }
.portal-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(246,12,21,.24), transparent 44%), repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 72px); opacity: .9; }
.portal-hero-main, .martin-guide { position: relative; z-index: 1; }
.portal-hero-main { display: flex; flex-direction: column; justify-content: center; max-width: 840px; }
.eyebrow { width: fit-content; color: #ffc4c7; border: 1px solid rgba(255,255,255,.18); border-radius: 8px; padding: 6px 9px; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: 0; }
.portal-hero h2 { margin: 16px 0 12px; font-size: 44px; line-height: 1; letter-spacing: 0; }
.portal-hero p { margin: 0; max-width: 720px; color: #e9d7d8; font-size: 17px; line-height: 1.55; }
.portal-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.martin-guide { align-self: stretch; display: grid; align-content: end; justify-items: center; gap: 10px; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; background: rgba(255,255,255,.06); padding: 18px; text-align: center; }
.martin-guide img { max-height: 220px; max-width: 100%; object-fit: contain; filter: drop-shadow(0 18px 28px rgba(0,0,0,.25)); animation: martinFloat 4.6s ease-in-out infinite; }
.martin-guide b, .martin-guide span { display: block; }
.martin-guide span { color: #e9d7d8; font-size: 13px; }
.portal-section { margin-top: 18px; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin: 0 0 12px; }
.section-head h2 { margin: 0; font-size: 28px; letter-spacing: 0; }
.section-head span { color: var(--muted); font-weight: 750; }
.track-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.track-card { color: var(--ink); display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 16px; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 18px; box-shadow: 0 10px 30px rgba(16,22,29,.05); animation: riseIn .28s ease-out both; }
.track-card h3 { margin: 0 0 7px; }
.track-card p { margin: 0; color: var(--muted); }
.track-orbit { width: 78px; height: 78px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--red) var(--p), #e9edf2 0); position: relative; align-self: start; }
.track-orbit::after { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: #fff; }
.track-orbit b { position: relative; z-index: 1; font-size: 18px; }
.track-steps { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.track-step { text-align: left; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 8px; padding: 9px 10px; font-weight: 800; min-width: 0; }
.track-step span { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #eef2f6; color: var(--red-dark); font-size: 12px; }
.track-step.done span { background: #dcfce7; color: var(--good); }
.portal-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.portal-tab { padding: 10px 13px; border-radius: 8px; background: #fff; border: 1px solid var(--line); font-weight: 850; }
.portal-tab.active { background: var(--dark); color: #fff; border-color: var(--dark); }
.portal-course-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.portal-course-card { color: var(--ink); overflow: hidden; display: grid; grid-template-rows: 148px minmax(0, 1fr); background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 10px 30px rgba(16,22,29,.05); animation: riseIn .24s ease-out both; }
.portal-course-card img, .course-fallback { width: 100%; height: 148px; object-fit: cover; background: #161d26; color: #fff; display: grid; place-items: center; font-size: 42px; font-weight: 950; }
.portal-course-body { display: grid; gap: 10px; padding: 16px; }
.portal-course-body h3 { margin: 0; line-height: 1.15; }
.portal-course-body p { margin: 0; color: var(--muted); }
.resource-list, .compliance-list { display: grid; gap: 9px; }
.resource-item, .resource-button { text-decoration: none; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); padding: 12px; display: grid; gap: 5px; transition: transform .15s, border .15s, box-shadow .15s; }
.resource-item:hover, .resource-button:hover, .track-step:hover, .portal-course-card:hover { transform: translateY(-1px); border-color: #ffb8bb; box-shadow: 0 12px 30px rgba(246,12,21,.08); }
.resource-item span, .resource-button span { width: fit-content; border-radius: 8px; background: #fff1f2; color: var(--red-dark); padding: 3px 7px; font-size: 11px; font-weight: 950; text-transform: uppercase; }
.resource-item small { color: var(--muted); }
.compliance-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 8px; padding: 12px; background: #fff; }
.compliance-item.done { background: #f0fdf4; border-color: #bbf7d0; }
.compliance-item b, .compliance-item span, .compliance-item small { display: block; }
.compliance-item span { color: var(--muted); margin-top: 3px; }
.compliance-item small { color: var(--muted); margin-top: 6px; }
.lesson-image { width: 100%; max-height: 480px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.callout-block { border-color: #ffd7d9 !important; background: #fff7f7 !important; color: #3d171a; font-weight: 750; }
.resource-grid-block { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@keyframes martinFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes riseIn { from { transform: translateY(8px); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
}
@media (max-width: 980px) {
  .login-shell, .app-shell { grid-template-columns: 1fr; }
  .login-hero { min-height: 50vh; padding: 32px; }
  .demo-grid { grid-template-columns: 1fr; }
  .sidebar { position: relative; height: auto; }
  .grid.cols-2, .grid.cols-3, .grid.cols-4, .form-grid, .attestation-grid, .portal-hero, .track-grid, .track-steps, .portal-course-grid, .resource-grid-block { grid-template-columns: 1fr; }
  .main { padding: 18px; }
  .hero-title { font-size: 38px; }
  .topbar h1 { font-size: 30px; }
  .portal-hero h2 { font-size: 32px; }
  .command-center { display: grid; }
  .martin-sidebar { display: none; }
  .trend-panel { grid-template-columns: 1fr; }
  .section-head { display: grid; }
}

/* Exhibition-grade high-tech visual layer */
:root {
  --red: #f20f1d;
  --red-dark: #9f0710;
  --ink: #061016;
  --muted: #64717c;
  --line: #dbe3eb;
  --soft: #eef3f7;
  --card: #ffffff;
  --dark: #080d12;
  --good: #10a86b;
  --warn: #d97706;
  --bad: #d40b19;
  --cyan: #00a7d8;
  --lime: #93d84f;
  --violet: #7c5cff;
  --shadow: 0 24px 70px rgba(5, 12, 18, .10);
}
body {
  background:
    linear-gradient(90deg, rgba(6,16,22,.035) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(0deg, rgba(6,16,22,.035) 1px, transparent 1px) 0 0 / 48px 48px,
    #f7f9fc;
  color: var(--ink);
}
.app-shell { grid-template-columns: 316px minmax(0, 1fr); }
.sidebar {
  padding: 22px;
  background:
    linear-gradient(180deg, rgba(242,15,29,.13), transparent 24%),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px) 0 0 / 44px 44px,
    #081016;
  border-right: 1px solid rgba(255,255,255,.09);
  box-shadow: 18px 0 70px rgba(5, 12, 18, .18);
}
.brand-lockup { padding: 4px 4px 12px; border-bottom: 1px solid rgba(255,255,255,.12); }
.sidebar .logo { color: #fff; gap: 12px; }
.sidebar .logo span:last-child { display: grid; gap: 1px; line-height: 1; }
.sidebar .logo b { font-size: 22px; letter-spacing: 0; color: #fff; }
.sidebar .logo small { color: #a8bdc9; font-size: 11px; letter-spacing: .16em; font-weight: 900; }
.logo-mark {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background:
    url("/assets/brand/ohara-logo-mark.webp") center / 78% no-repeat,
    #fff;
  box-shadow: 0 0 0 1px rgba(255,255,255,.18) inset, 0 18px 36px rgba(242,15,29,.18);
  color: transparent;
  font-size: 0;
}
.user-mini {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 12px;
  margin: 0;
  padding: 14px;
  border-color: rgba(255,255,255,.14);
  background: linear-gradient(145deg, rgba(255,255,255,.11), rgba(255,255,255,.035));
  box-shadow: 0 18px 38px rgba(0,0,0,.20);
}
.avatar {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: #fff;
  color: var(--red-dark);
  font-weight: 950;
  letter-spacing: 0;
}
.user-mini b { color: #fff; line-height: 1.2; }
.user-mini span { color: #b9c7d0; }
.mini-score { grid-column: 1 / -1; height: 28px; border: 1px solid rgba(255,255,255,.10); border-radius: 8px; background: rgba(0,0,0,.22); position: relative; overflow: hidden; display: flex; align-items: center; padding: 0 10px; }
.mini-score i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, rgba(242,15,29,.6), rgba(0,167,216,.45)); }
.mini-score span { position: relative; z-index: 1; color: #fff; font-size: 12px; font-weight: 900; }
.nav { gap: 8px; }
.nav button {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 0 12px;
  color: #d8e4eb;
  border: 1px solid transparent;
  background: rgba(255,255,255,.03);
}
.nav button svg { width: 20px; height: 20px; fill: currentColor; opacity: .86; }
.nav button.active, .nav button:hover {
  background: linear-gradient(90deg, rgba(242,15,29,.28), rgba(0,167,216,.10));
  border-color: rgba(255,255,255,.16);
  color: #fff;
  box-shadow: 0 14px 28px rgba(242,15,29,.12);
}
.martin-panel {
  margin-top: auto;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 8px;
  padding: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  text-align: center;
}
.martin-sidebar { width: min(170px, 86%); margin: 0 auto 10px; }
.martin-panel b, .martin-panel span { display: block; }
.martin-panel span { color: #a8bdc9; font-size: 12px; }
.sidebar-footer { padding: 0; color: #9fb0bb; }
.sidebar-footer .btn { width: 100%; }
.main { padding: 34px; }
.topbar {
  padding: 0 0 20px;
  border-bottom: 1px solid rgba(6,16,22,.08);
  margin-bottom: 24px;
}
.topbar h1 { font-size: clamp(34px, 4vw, 58px); line-height: .92; font-weight: 950; letter-spacing: 0; }
.topbar p { color: #6b7782; font-weight: 700; }
.btn {
  border-radius: 8px;
  min-height: 44px;
  padding: 12px 17px;
  font-size: 14px;
  letter-spacing: 0;
  box-shadow: 0 10px 24px rgba(6,16,22,.08);
}
.btn.primary {
  background: linear-gradient(135deg, #ff2430, #d70815);
  color: #fff;
  box-shadow: 0 16px 38px rgba(242,15,29,.28);
}
.btn.ghost {
  background: rgba(255,255,255,.92);
  border-color: rgba(6,16,22,.12);
  color: var(--ink);
}
.btn.soft {
  background: #edf4f8;
  color: var(--red-dark);
}
.card, .kpi, .att-card, .lesson, .portal-course-card, .track-card {
  border-color: rgba(6,16,22,.10);
  box-shadow: 0 18px 46px rgba(6,16,22,.07);
}
.portal-hero {
  min-height: 390px;
  grid-template-columns: minmax(0, 1fr) 330px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px) 0 0 / 58px 58px,
    linear-gradient(0deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 58px 58px,
    linear-gradient(135deg, #0a1016, #11171d 55%, #29060a);
  box-shadow: 0 30px 90px rgba(6,16,22,.24);
}
.portal-hero::before {
  background:
    linear-gradient(120deg, rgba(242,15,29,.34), transparent 32%),
    linear-gradient(300deg, rgba(0,167,216,.22), transparent 35%);
}
.eyebrow {
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.08);
  color: #ffe1e3;
}
.portal-hero h2 {
  max-width: 790px;
  font-size: clamp(42px, 6vw, 78px);
  line-height: .9;
}
.portal-hero p { max-width: 760px; color: #dce8ee; font-weight: 650; }
.hero-telemetry {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.hero-telemetry span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px;
  color: #c8d7df;
  background: rgba(255,255,255,.06);
  font-weight: 850;
}
.hero-telemetry b { color: #fff; font-size: 18px; }
.martin-guide {
  background:
    linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.04)),
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 10px);
  box-shadow: 0 18px 54px rgba(0,0,0,.22);
}
.martin-guide img { max-height: 245px; background: #fff; border-radius: 8px; padding: 8px; }
.section-head h2 { font-size: 34px; }
.track-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 16px;
  align-items: stretch;
}
.track-grid { grid-template-columns: 1fr; }
.track-card {
  grid-template-columns: 108px minmax(0, 1fr);
  padding: 22px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(246,250,252,.96)),
    linear-gradient(90deg, rgba(0,167,216,.05), transparent);
}
.track-card h3 { font-size: 24px; }
.track-orbit {
  width: 92px;
  height: 92px;
  background: conic-gradient(var(--red) var(--p), rgba(0,167,216,.28) 0 74%, #e7edf2 0);
}
.track-step {
  min-height: 52px;
  background: #f8fbfd;
  border-color: rgba(6,16,22,.09);
}
.track-step span {
  background: #0d151c;
  color: #fff;
}
.track-step.done span { background: var(--good); }
.score-card {
  border-radius: 8px;
  padding: 22px;
  background:
    linear-gradient(180deg, #0b1218, #151b21);
  color: #fff;
  box-shadow: 0 24px 64px rgba(6,16,22,.20);
  display: grid;
  align-content: space-between;
  gap: 16px;
  overflow: hidden;
  position: relative;
}
.score-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px) 0 0 / 32px 32px;
}
.score-card > * { position: relative; z-index: 1; }
.score-card span { display: block; color: #9fb3bf; font-size: 12px; font-weight: 900; text-transform: uppercase; }
.score-card b { font-size: 44px; line-height: 1; }
.score-radar {
  width: 150px;
  height: 150px;
  margin: 0 auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--cyan) var(--p), rgba(255,255,255,.12) 0);
  position: relative;
}
.score-radar::after { content: ""; position: absolute; inset: 16px; border-radius: 50%; background: #111820; }
.score-radar strong { position: relative; z-index: 1; font-size: 26px; }
.score-card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.score-card li { display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid rgba(255,255,255,.10); padding-top: 10px; }
.score-card li b { font-size: 18px; }
.catalog-tools { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.search-box {
  width: min(560px, 100%);
  min-height: 48px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border-radius: 8px;
  border: 1px solid rgba(6,16,22,.12);
  background: #fff;
  padding: 0 14px;
  box-shadow: 0 14px 36px rgba(6,16,22,.06);
}
.search-box svg { width: 20px; height: 20px; fill: var(--red); }
.search-box input { border: 0; outline: none; background: transparent; min-width: 0; font-weight: 800; color: var(--ink); }
.portal-tabs { margin-bottom: 14px; }
.portal-tab {
  min-height: 42px;
  border-color: rgba(6,16,22,.10);
  box-shadow: 0 10px 26px rgba(6,16,22,.05);
}
.portal-tab.active { background: #0a1117; }
.portal-course-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.portal-course-card {
  grid-template-rows: 164px minmax(0, 1fr);
  background: #fff;
  overflow: hidden;
}
.portal-course-card img, .course-fallback {
  height: 164px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px) 0 0 / 28px 28px,
    #111820;
}
.portal-course-body { padding: 18px; }
.portal-course-body h3 { font-size: 21px; }
.attestation-grid { gap: 16px; }
.att-card {
  background:
    linear-gradient(180deg, #fff, #fbfdff);
  border-top-width: 5px;
}
.ring::after { box-shadow: inset 0 0 0 1px rgba(6,16,22,.06); }
.resource-panel, .compliance-panel {
  background: linear-gradient(180deg, #fff, #fbfdff);
}
.resource-item, .resource-button, .compliance-item {
  background: #fbfdff;
  border-color: rgba(6,16,22,.10);
}
.resource-item span, .resource-button span {
  background: #ffe8ea;
  color: var(--red-dark);
}
.compliance-item.done {
  background: linear-gradient(90deg, rgba(16,168,107,.11), #fff);
}
.table-wrap { border-color: rgba(6,16,22,.10); }
th { background: #0b1218; color: #fff; }
tr:hover td { background: #f8fbfd; }
.login-hero {
  background:
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px) 0 0 / 52px 52px,
    linear-gradient(135deg, #080d12, #131b23 62%, #45070d);
}
@media (max-width: 1180px) {
  .app-shell { grid-template-columns: 260px minmax(0, 1fr); }
  .portal-course-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal-hero, .track-layout { grid-template-columns: 1fr; }
}
@media (max-width: 1420px) and (min-width: 761px) {
  .attestation-grid,
  .grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: relative; height: auto; padding: 16px; }
  .nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav button { min-height: 42px; }
  .martin-panel { display: none; }
  .main { padding: 16px; }
  .portal-hero { min-height: auto; padding: 18px; }
  .portal-hero h2 { font-size: 38px; }
  .portal-course-grid, .track-steps, .grid.cols-2 { grid-template-columns: 1fr; }
  .att-body { grid-template-columns: 1fr; justify-items: center; }
  .section-head { align-items: start; }
  .topbar { display: grid; }
}

/* Exhibition polish pass: premium tech surface without runtime weight */
body {
  background:
    radial-gradient(circle at 82% -8%, rgba(0,167,216,.20), transparent 31%),
    radial-gradient(circle at 9% 2%, rgba(242,15,29,.12), transparent 28%),
    linear-gradient(90deg, rgba(6,16,22,.035) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(0deg, rgba(6,16,22,.035) 1px, transparent 1px) 0 0 / 44px 44px,
    #f6f9fc;
}
.main { position: relative; isolation: isolate; }
.main::before {
  content: "";
  position: fixed;
  inset: 0 0 0 316px;
  pointer-events: none;
  z-index: -1;
  background:
    linear-gradient(120deg, transparent 0 54%, rgba(255,255,255,.78) 54% 56%, transparent 56%),
    radial-gradient(circle at 76% 19%, rgba(0,167,216,.09), transparent 24%),
    radial-gradient(circle at 43% 0%, rgba(242,15,29,.06), transparent 22%);
  opacity: .9;
}
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: auto;
  scrollbar-width: thin;
}
.sidebar::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 88%, rgba(0,167,216,.22), transparent 18%),
    linear-gradient(180deg, transparent, rgba(255,255,255,.06) 48%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 20%, #000 86%, transparent);
}
.sidebar > * { position: relative; z-index: 1; }
.logo-mark {
  position: relative;
  overflow: hidden;
}
.logo-mark::after {
  content: "";
  position: absolute;
  inset: -35%;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.55), transparent 70%);
  transform: translateX(-110%) rotate(18deg);
  animation: sheen 5.6s ease-in-out infinite;
}
.nav button {
  position: relative;
  overflow: hidden;
}
.nav button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
  transform: translateX(-120%);
}
.nav button:hover::after,
.nav button.active::after { transform: translateX(120%); transition: transform .65s ease; }
.martin-panel {
  position: relative;
  overflow: hidden;
}
.martin-panel::before {
  content: "";
  position: absolute;
  left: 20%;
  right: 20%;
  bottom: 86px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0,225,255,.42), rgba(0,167,216,.04) 66%, transparent 72%);
  filter: blur(2px);
  animation: pulseGlow 3.4s ease-in-out infinite;
}
.topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
.topbar h1 {
  text-wrap: balance;
  background: linear-gradient(90deg, #061016, #142736 62%, #f20f1d);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.portal-hero {
  border: 1px solid rgba(255,255,255,.10);
  isolation: isolate;
}
.portal-hero::after {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  right: 84px;
  top: 50%;
  z-index: 0;
  border-radius: 50%;
  transform: translate(45%, -50%);
  background:
    radial-gradient(circle at center, transparent 0 32%, rgba(0,167,216,.16) 33% 34%, transparent 35% 47%, rgba(242,15,29,.12) 48% 49%, transparent 50%),
    conic-gradient(from 120deg, transparent 0 10%, rgba(0,167,216,.24) 10% 14%, transparent 14% 39%, rgba(255,255,255,.16) 39% 41%, transparent 41% 68%, rgba(242,15,29,.20) 68% 72%, transparent 72%);
  opacity: .85;
  animation: orbitSpin 18s linear infinite;
}
.portal-hero-main,
.martin-guide { z-index: 2; }
.portal-hero h2 {
  max-width: 860px;
  text-shadow: 0 18px 42px rgba(0,0,0,.30);
}
.portal-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.hero-telemetry span {
  backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}
.martin-guide {
  position: relative;
  align-content: center;
  border-color: rgba(255,255,255,.18);
  backdrop-filter: blur(14px);
}
.martin-guide::before {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 8px;
  border: 1px solid rgba(0,225,255,.18);
  pointer-events: none;
}
.martin-guide::after {
  content: "";
  position: absolute;
  left: 21%;
  right: 21%;
  bottom: 64px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0,225,255,.45), transparent 68%);
  filter: blur(2px);
  animation: pulseGlow 3.1s ease-in-out infinite;
}
.martin-guide img {
  position: relative;
  z-index: 1;
  box-shadow: 0 18px 55px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.18);
}
.track-card,
.score-card,
.att-card,
.portal-course-card,
.resource-panel,
.compliance-panel {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.track-card:hover,
.att-card:hover,
.portal-course-card:hover,
.resource-panel:hover,
.compliance-panel:hover {
  transform: translateY(-3px);
  border-color: rgba(242,15,29,.20);
  box-shadow: 0 24px 70px rgba(6,16,22,.12);
}
.track-card {
  position: relative;
  overflow: hidden;
}
.track-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(242,15,29,.06), transparent 34%, rgba(0,167,216,.07));
  pointer-events: none;
}
.track-card > * { position: relative; z-index: 1; }
.score-card {
  border: 1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at 50% 42%, rgba(0,167,216,.16), transparent 32%),
    linear-gradient(180deg, #081017, #151d24);
}
.score-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.06), transparent);
  transform: translateY(-100%);
  animation: scanDown 4.8s ease-in-out infinite;
}
.score-radar {
  box-shadow: 0 0 50px rgba(0,167,216,.18);
}
.att-card {
  position: relative;
  overflow: hidden;
}
.att-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 16%, rgba(242,15,29,.075), transparent 27%),
    linear-gradient(180deg, rgba(255,255,255,.72), transparent);
  pointer-events: none;
}
.att-card > * { position: relative; z-index: 1; }
.portal-course-card {
  position: relative;
}
.portal-course-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255,255,255,.54);
  pointer-events: none;
}
.portal-course-body .muted {
  color: #687684;
  line-height: 1.45;
}
.resource-item,
.compliance-item {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.80);
}
@keyframes sheen {
  0%, 58%, 100% { transform: translateX(-110%) rotate(18deg); }
  72% { transform: translateX(110%) rotate(18deg); }
}
@keyframes pulseGlow {
  0%, 100% { opacity: .55; transform: scaleX(.88); }
  50% { opacity: 1; transform: scaleX(1.08); }
}
@keyframes orbitSpin {
  to { transform: translate(45%, -50%) rotate(360deg); }
}
@keyframes scanDown {
  0%, 35%, 100% { transform: translateY(-100%); opacity: 0; }
  55% { opacity: 1; }
  74% { transform: translateY(100%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media (max-width: 1180px) {
  .main::before { left: 260px; }
}
@media (max-width: 760px) {
  .main::before { inset: 0; }
  .sidebar { height: auto; position: relative; }
  .topbar { align-items: stretch; }
  .topbar h1 { font-size: 30px; line-height: 1; }
  .portal-hero::after {
    width: 360px;
    height: 360px;
    right: -80px;
    top: 74%;
    opacity: .45;
  }
  .portal-actions .btn { flex: 1 1 130px; }
  .hero-telemetry span { flex: 1 1 95px; justify-content: center; }
  .track-card:hover,
  .att-card:hover,
  .portal-course-card:hover,
  .resource-panel:hover,
  .compliance-panel:hover { transform: none; }
}

.stat-command {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 16px;
}
.stat-chip {
  position: relative;
  overflow: hidden;
  min-height: 112px;
  border-radius: 8px;
  border: 1px solid rgba(0,167,216,.16);
  background:
    linear-gradient(135deg, rgba(8,13,18,.96), rgba(18,30,40,.94)),
    radial-gradient(circle at 100% 0, rgba(0,167,216,.24), transparent 42%);
  color: #fff;
  padding: 16px;
  display: grid;
  align-content: space-between;
  box-shadow: 0 22px 58px rgba(6,16,22,.13);
}
.stat-chip::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 0 34%, rgba(255,255,255,.12) 46%, transparent 58%);
  transform: translateX(-120%);
  animation: scanWide 6.5s ease-in-out infinite;
}
.stat-chip span,
.stat-chip b,
.stat-chip small {
  position: relative;
  z-index: 1;
}
.stat-chip span {
  color: #96dff2;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}
.stat-chip b {
  font-size: 28px;
  line-height: 1;
}
.stat-chip small {
  color: #d6e4ed;
}
.analytics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.chart-card {
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(0,167,216,.12);
  border-radius: 8px;
  padding: 18px;
  box-shadow: 0 16px 46px rgba(6,16,22,.08);
}
.chart-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0 49%, rgba(0,167,216,.05) 50%, transparent 51%) 0 0 / 54px 54px,
    radial-gradient(circle at 100% 0, rgba(242,15,29,.08), transparent 36%);
  pointer-events: none;
}
.chart-card > * {
  position: relative;
  z-index: 1;
}
.chart-head {
  display: grid;
  gap: 4px;
  margin-bottom: 14px;
}
.chart-head h3 {
  margin: 0;
  font-size: 19px;
}
.chart-head span,
.position-columns {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}
.bar-stack {
  display: grid;
  gap: 12px;
}
.bar-row {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) minmax(180px, 42%);
  gap: 14px;
  align-items: center;
}
.bar-row b,
.bar-row span {
  display: block;
}
.bar-row span {
  color: var(--muted);
  font-size: 12px;
  margin-top: 3px;
}
.data-bar {
  position: relative;
  height: 34px;
  border-radius: 8px;
  background: #edf3f7;
  overflow: hidden;
  border: 1px solid rgba(6,16,22,.06);
}
.data-bar i {
  display: block;
  width: var(--p);
  height: 100%;
  background:
    linear-gradient(90deg, var(--bar, var(--red)), color-mix(in srgb, var(--bar, var(--red)) 68%, #00d5ff));
  border-radius: inherit;
  box-shadow: 0 0 26px color-mix(in srgb, var(--bar, var(--red)) 28%, transparent);
}
.data-bar.compliance i {
  background: linear-gradient(90deg, #10a86b, #00a7d8);
}
.data-bar b {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #061016;
  font-size: 13px;
}
.attempt-split {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 14px;
}
.attempt-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.attempt-metrics div,
.request-mini-list div {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 11px;
}
.attempt-metrics span,
.request-mini-list span {
  color: var(--muted);
  font-size: 12px;
}
.attempt-metrics b {
  display: block;
  font-size: 24px;
  margin-top: 4px;
}
.request-mini-list {
  display: grid;
  gap: 8px;
}
.position-analytics {
  overflow: hidden;
}
.position-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -2px 0 12px;
}
.position-columns span {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px 8px;
  background: #f8fbfd;
}
.heat {
  display: inline-grid;
  min-width: 56px;
  place-items: center;
  border-radius: 8px;
  padding: 6px 8px;
  font-weight: 950;
}
.heat.hot-good { background: #dcfce7; color: #166534; }
.heat.hot-mid { background: #fef3c7; color: #92400e; }
.heat.hot-bad { background: #fee2e2; color: #991b1b; }
.heat.hot-empty { background: #eef2f6; color: #52606b; }
.test-box {
  display: grid;
  gap: 14px;
}
.test-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}
.test-head h2,
.test-head p {
  margin: 0;
}
.test-head p {
  margin-top: 5px;
  color: var(--muted);
}
.attempt-history {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.attempt-request-box {
  display: grid;
  gap: 12px;
  border: 1px solid #ffd2d6;
  border-radius: 8px;
  padding: 16px;
  background: linear-gradient(135deg, #fff7f8, #f7fbff);
}
.attempt-request-box h3,
.attempt-request-box p {
  margin: 0;
}
.attempt-request-box p {
  color: var(--muted);
  margin-top: 4px;
}
.attempt-review-list {
  display: grid;
  gap: 10px;
  max-height: 620px;
  overflow: auto;
  padding-right: 4px;
}
.attempt-review-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 13px;
  background: #fff;
}
.attempt-review-item h3 {
  margin: 8px 0 4px;
  font-size: 17px;
}
.attempt-review-item p,
.attempt-review-item small {
  display: block;
  margin: 0 0 4px;
  color: var(--muted);
}
.attempt-review-form {
  display: grid;
  gap: 8px;
  align-content: start;
}
@keyframes scanWide {
  0%, 45%, 100% { transform: translateX(-120%); opacity: 0; }
  62% { opacity: 1; }
  82% { transform: translateX(120%); opacity: 0; }
}
@media (max-width: 1120px) {
  .stat-command { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .analytics-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .stat-command,
  .attempt-split,
  .attempt-metrics,
  .bar-row,
  .attempt-review-item,
  .test-head {
    grid-template-columns: 1fr;
    display: grid;
  }
  .stat-chip { min-height: 96px; }
}

/* Login and chrome refinement */
.login-shell {
  position: relative;
  overflow: hidden;
  grid-template-columns: minmax(420px, 1.02fr) minmax(420px, .98fr);
  background: #f5f2ec;
}
.login-shell::before { display: none; }
.login-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(28px, 3.6vw, 56px);
  color: #fff7ef;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(255, 214, 168, .28), transparent 55%),
    linear-gradient(160deg, #2a1a14 0%, #3a241c 48%, #1c110e 100%);
}
.login-library {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.login-library-shelves {
  position: absolute;
  inset: -4% -6%;
  opacity: .55;
  background:
    repeating-linear-gradient(
      90deg,
      #4a2f24 0 42px,
      #3b241c 42px 46px,
      #5a3729 46px 88px,
      #322018 88px 92px,
      #6a4030 92px 130px,
      #2c1a14 130px 134px
    );
  mask-image: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.9) 40%, rgba(0,0,0,.75));
}
.login-library-shelves::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      180deg,
      transparent 0 54px,
      rgba(20, 10, 8, .55) 54px 62px,
      transparent 62px 118px,
      rgba(20, 10, 8, .45) 118px 126px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0 10px,
      rgba(196, 40, 45, .28) 10px 16px,
      transparent 16px 48px,
      rgba(90, 110, 130, .18) 48px 54px,
      transparent 54px 92px
    );
  mix-blend-mode: soft-light;
}
.login-library-lamp {
  position: absolute;
  left: 18%;
  right: 18%;
  top: -8%;
  height: 58%;
  background: radial-gradient(ellipse at 50% 20%, rgba(255, 214, 168, .42), rgba(255, 180, 110, .12) 42%, transparent 70%);
  filter: blur(2px);
}
.login-library-vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(16, 9, 7, .72), rgba(16, 9, 7, .18) 34%, rgba(16, 9, 7, .12) 66%, rgba(16, 9, 7, .55)),
    linear-gradient(180deg, rgba(16, 9, 7, .18), transparent 28%, rgba(16, 9, 7, .58) 100%);
}
.login-hero::before,
.login-hero::after { display: none !important; content: none !important; }
.login-hero > * { position: relative; z-index: 1; }
.login-hero .logo {
  width: fit-content;
  padding: 8px 10px 8px 8px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  background: rgba(28, 16, 12, .42);
  backdrop-filter: blur(18px);
}
.login-hero-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(12px, 2vw, 28px);
  align-items: end;
  margin: auto 0;
  min-height: min(62vh, 640px);
}
.login-martin-wrap {
  position: relative;
  justify-self: center;
  width: min(100%, 420px);
  transform-origin: 50% 100%;
  animation: loginMartinIdle 5.6s ease-in-out infinite;
  filter: drop-shadow(0 28px 40px rgba(0, 0, 0, .38));
}
.login-martin {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  transform-origin: 50% 70%;
  animation: loginMartinBreathe 4.2s ease-in-out infinite;
}
.login-martin-tablet-glow {
  position: absolute;
  right: 14%;
  bottom: 28%;
  width: 18%;
  height: 22%;
  border-radius: 18px;
  background: radial-gradient(circle, rgba(255, 60, 70, .55), rgba(255, 40, 50, .08) 62%, transparent 74%);
  filter: blur(10px);
  animation: loginTabletGlow 2.8s ease-in-out infinite;
  pointer-events: none;
}
.login-hero-core {
  display: grid;
  gap: 16px;
  align-content: end;
  padding-bottom: 8px;
}
.login-hero .hero-title {
  max-width: 760px;
  margin: 0;
  font-size: clamp(48px, 7vw, 92px);
  line-height: .86;
  letter-spacing: 0;
  color: #fff8f2;
  text-shadow: 0 18px 48px rgba(0, 0, 0, .35);
}
.login-hero .hero-title span {
  display: block;
  color: #ff4a52;
  text-shadow: 0 18px 50px rgba(246, 12, 21, .28);
}
.hero-rule {
  width: min(320px, 58vw);
  height: 1px;
  background: linear-gradient(90deg, #ff2631, rgba(255,255,255,.55), transparent);
}
.hero-subline,
.login-domain {
  color: rgba(255, 236, 220, .72);
  font-size: 13px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.login-panel {
  position: relative;
  background:
    linear-gradient(180deg, #f7f4ee, #efeae2);
}
.login-card {
  width: min(430px, 100%);
  border-radius: 14px;
  padding: 34px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(255,255,255,.92);
  box-shadow: 0 30px 90px rgba(40, 24, 18, .10);
  backdrop-filter: blur(26px);
}
.login-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.login-card h1 {
  margin: 0;
  font-size: 30px;
  line-height: 1;
}
.login-dot {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: var(--red);
  box-shadow: 0 0 0 6px rgba(246,12,21,.10), 0 10px 26px rgba(246,12,21,.35);
}
@keyframes loginMartinIdle {
  0%, 100% { transform: translateY(0) rotate(-.4deg); }
  50% { transform: translateY(-10px) rotate(.5deg); }
}
@keyframes loginMartinBreathe {
  0%, 100% { transform: scale(1) scaleY(1); }
  50% { transform: scale(1.012) scaleY(1.018); }
}
@keyframes loginTabletGlow {
  0%, 100% { opacity: .45; transform: scale(.92); }
  50% { opacity: .95; transform: scale(1.08); }
}
@media (max-width: 980px) {
  .login-hero-stage { grid-template-columns: 1fr; min-height: 0; align-items: center; }
  .login-martin-wrap { width: min(250px, 58vw); order: 2; }
  .login-hero-core { order: 1; align-content: start; }
}
@media (max-width: 760px) {
  .login-shell { grid-template-columns: 1fr; }
  .login-hero { min-height: 46vh; padding: 22px; }
  .login-hero .hero-title { font-size: clamp(42px, 12vw, 64px); }
  .login-panel { padding: 20px; }
  .login-card { padding: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .login-martin-wrap,
  .login-martin,
  .login-martin-tablet-glow { animation: none !important; }
}
.field label {
  color: #66727f;
  font-size: 12px;
  font-weight: 850;
}
.input,
select,
textarea {
  border-radius: 10px;
  border-color: rgba(6,16,22,.13);
  background: rgba(255,255,255,.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82);
}
.input:focus,
select:focus,
textarea:focus {
  border-color: rgba(246,12,21,.64);
  box-shadow: 0 0 0 4px rgba(246,12,21,.08), inset 0 1px 0 rgba(255,255,255,.90);
}
.btn {
  border-radius: 10px;
  min-height: 40px;
  padding: 10px 15px;
  border: 1px solid rgba(255,255,255,.24);
  background: rgba(10,17,23,.84);
  box-shadow: 0 12px 30px rgba(6,16,22,.10);
  backdrop-filter: blur(14px);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 42px rgba(6,16,22,.14);
}
.btn.primary {
  background: linear-gradient(135deg, rgba(255,41,51,.96), rgba(198,4,15,.94));
  border-color: rgba(255,255,255,.30);
  box-shadow: 0 18px 42px rgba(246,12,21,.22);
}
.btn.ghost {
  background: rgba(255,255,255,.58);
  border-color: rgba(6,16,22,.12);
  color: var(--ink);
  box-shadow: 0 12px 30px rgba(6,16,22,.06);
}
.btn.soft {
  background: rgba(238,247,251,.72);
  border-color: rgba(0,167,216,.14);
  color: var(--red-dark);
}
.command-center {
  min-height: 76px;
  padding: 20px 22px;
  border: 1px solid rgba(255,255,255,.22);
  background:
    linear-gradient(135deg, rgba(7,13,18,.92), rgba(13,24,32,.88)),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px) 0 0 / 34px 34px;
  backdrop-filter: blur(18px);
}
.command-center h2 {
  margin: 0;
  font-size: clamp(26px, 3vw, 42px);
  line-height: .95;
}
.sidebar-footer {
  display: grid;
  gap: 0;
}
@media (max-width: 760px) {
  .login-shell {
    grid-template-columns: 1fr;
  }
  .login-shell::before {
    inset: 38% -20% auto auto;
    height: 260px;
  }
  .login-hero {
    min-height: 46vh;
    padding: 24px;
  }
  .login-hero .hero-title {
    font-size: clamp(56px, 18vw, 86px);
  }
  .login-panel {
    padding: 20px;
  }
  .login-card {
    padding: 24px;
  }
  .command-center {
    display: grid;
    align-items: stretch;
  }
}

/* Portal product surface */
.hero-bg-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .24;
  pointer-events: none;
}
.hero-bg-scene img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.05) contrast(1.05);
}
.hero-bg-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #081016 0 45%, rgba(8,16,22,.72) 68%, rgba(8,16,22,.88)),
    linear-gradient(180deg, rgba(8,16,22,.18), rgba(8,16,22,.86));
}
.martin-guide {
  overflow: hidden;
}
.martin-guide img {
  width: 100%;
  height: min(300px, 38vh);
  max-height: none;
  object-fit: cover;
  object-position: center;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 8px;
}
.martin-sidebar {
  aspect-ratio: 16 / 10;
  width: 100%;
  max-width: 210px;
  object-fit: cover;
  object-position: center;
  border-radius: 8px;
  background: transparent;
}
.btn.dark {
  background: rgba(8,13,18,.92);
  color: #fff;
  border-color: rgba(255,255,255,.18);
}
.search-box {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: min(460px, 100%);
  border: 1px solid rgba(6,16,22,.12);
  border-radius: 12px;
  background: rgba(255,255,255,.68);
  padding: 9px 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82);
}
.search-box svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: currentColor;
  color: #52606b;
}
.search-box input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  min-height: 28px;
}
.search-box.large {
  min-height: 62px;
  padding: 14px 18px;
  font-size: 18px;
}
.search-console,
.instruction-board {
  display: grid;
  gap: 16px;
}
.search-results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.search-group {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.search-group h2 {
  margin: 0;
  font-size: 22px;
}
.search-hit {
  display: grid;
  gap: 3px;
  width: 100%;
  text-align: left;
  text-decoration: none;
  border: 1px solid rgba(6,16,22,.10);
  border-radius: 10px;
  background: rgba(255,255,255,.76);
  color: var(--ink);
  padding: 13px 14px;
}
.search-hit span {
  color: var(--muted);
  font-size: 13px;
}
.profile-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(8,13,18,.94), rgba(16,30,40,.88)),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px) 0 0 / 40px 40px;
  color: #fff;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 24px 70px rgba(6,16,22,.14);
}
.profile-id {
  display: flex;
  align-items: center;
  gap: 16px;
}
.profile-id h2,
.profile-id p {
  margin: 0;
}
.profile-id p {
  margin-top: 5px;
  color: #c5d3dc;
}
.avatar.xl {
  width: 68px;
  height: 68px;
  font-size: 24px;
}
.profile-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.profile-link-muted {
  display: inline-grid;
  place-items: center;
  min-width: 48px;
  min-height: 36px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 10px;
  color: rgba(255,255,255,.45);
}
.profile-list {
  display: grid;
  grid-template-columns: minmax(150px, .65fr) minmax(0, 1fr);
  gap: 10px 16px;
  margin: 0;
}
.profile-list dt {
  color: var(--muted);
  font-weight: 850;
}
.profile-list dd {
  margin: 0;
  min-width: 0;
}
.profile-team-points b {
  color: var(--red-dark);
  font-size: 19px;
  line-height: 1;
}
.profile-team-points small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}
.instruction-board {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.instruction-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(6,16,22,.10);
  border-radius: 12px;
  padding: 13px;
  background: rgba(255,255,255,.72);
  margin-top: 8px;
}
.instruction-item.done {
  border-color: rgba(16,168,107,.20);
  background: rgba(236,253,245,.76);
}
.instruction-item b,
.instruction-item span,
.instruction-item small {
  display: block;
}
.instruction-item span,
.instruction-item small {
  color: var(--muted);
  margin-top: 3px;
}
.gc-table table th:first-child {
  background: #f20f1d;
  color: #fff;
}
.gc-table th {
  background: #10161d;
  color: #fff;
}
.gc-table td {
  font-weight: 800;
}
.store-score-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}
.store-score-row .score-mini {
  border-radius: 12px;
  padding: 13px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(6,16,22,.10);
}
.store-score-row b {
  display: block;
  font-size: 22px;
  margin-top: 4px;
}
.course-builder-shell {
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.builder-palette {
  position: sticky;
  top: 18px;
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 16px;
  background: rgba(8,16,22,.88);
  box-shadow: 0 24px 70px rgba(6,16,22,.15);
}
.palette-tool {
  min-height: 42px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 10px;
  background: rgba(255,255,255,.08);
  color: #fff;
  font-weight: 900;
  text-align: left;
  padding: 9px 11px;
}
.palette-tool:hover,
.palette-tool.active {
  border-color: rgba(242,15,29,.52);
  background: rgba(242,15,29,.22);
}
.builder-workspace {
  display: grid;
  gap: 16px;
  min-width: 0;
}
.glass-card,
.track-admin-card,
.course-list-card,
.user-editor-card,
.bulk-import-card,
.user-list-card {
  background: rgba(255,255,255,.74);
  backdrop-filter: blur(18px);
  border-color: rgba(255,255,255,.82);
}
.track-assignment-form {
  display: grid;
  gap: 14px;
}
.role-check-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.role-check {
  display: grid;
  grid-template-columns: auto minmax(32px, auto) minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  border: 1px solid rgba(6,16,22,.11);
  border-radius: 11px;
  background: rgba(255,255,255,.74);
  padding: 10px;
}
.role-check.active {
  border-color: rgba(242,15,29,.38);
  box-shadow: inset 0 0 0 1px rgba(242,15,29,.12);
}
.role-check span {
  font-weight: 950;
  color: var(--red-dark);
}
.role-check small {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.constructor-course-list {
  display: grid;
  gap: 10px;
}
.constructor-course-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(180px, .8fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(6,16,22,.10);
  border-radius: 12px;
  background: rgba(255,255,255,.72);
  padding: 13px;
}
.course-row-main h3,
.course-row-main p {
  margin: 0;
}
.course-row-main h3 {
  margin-top: 6px;
}
.course-row-main p {
  color: var(--muted);
  margin-top: 4px;
}
.course-row-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.course-row-roles span,
.muted-pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border-radius: 999px;
  padding: 4px 8px;
  background: #eef3f7;
  color: #41505d;
  font-weight: 850;
  font-size: 12px;
}
.course-row-roles span:not(.muted-pill) {
  background: #fff1f2;
  color: var(--red-dark);
}
.bulk-import-card textarea {
  min-height: 82px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12px;
}
.toggle-line {
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  font-weight: 850;
}
.user-table td:first-child b {
  display: block;
}
.btn.glass {
  color: #fff;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 14px 34px rgba(6,16,22,.10);
}
.btn.glass:hover {
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.34);
}
.route-loading {
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 18px;
  background: rgba(255,255,255,.70);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
}
.route-loading span {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px solid rgba(242,15,29,.18);
  border-top-color: var(--red);
  animation: spin .7s linear infinite;
}
.route-loading b,
.route-loading small {
  display: block;
}
.route-loading small {
  margin-top: 3px;
  color: var(--muted);
}
.hero-telemetry {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.hero-telemetry span {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.78);
  font-weight: 850;
}
.hero-telemetry b {
  color: #fff;
}
.program-block-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.program-lane {
  display: grid;
  gap: 12px;
  min-height: 260px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.78);
  border-top: 3px solid var(--accent);
  border-radius: 18px;
  background: rgba(255,255,255,.74);
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 48px rgba(6,16,22,.07);
}
.program-lane-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
}
.program-lane-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}
.program-lane-head h3 {
  margin: 4px 0 0;
  font-size: 23px;
}
.program-lane-head b {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, white);
}
.program-lane-list {
  display: grid;
  gap: 8px;
  align-self: start;
}
.program-lane-list button {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-height: 44px;
  text-align: left;
  border: 1px solid rgba(6,16,22,.09);
  border-radius: 12px;
  background: rgba(255,255,255,.78);
  color: var(--ink);
  font-weight: 850;
  padding: 8px 10px;
}
.program-lane-list button:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, white);
  transform: translateY(-1px);
}
.program-lane-list button span {
  color: var(--accent);
  font-weight: 950;
}
.course-page {
  display: grid;
  gap: 16px;
}
.course-hero-card {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 22px;
  align-items: stretch;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.80);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.82), rgba(255,255,255,.56)),
    radial-gradient(circle at 12% 0, rgba(242,15,29,.16), transparent 32%),
    radial-gradient(circle at 100% 0, rgba(0,167,216,.16), transparent 30%);
  backdrop-filter: blur(20px);
  box-shadow: var(--shadow);
}
.course-hero-card img,
.course-page-cover {
  width: 100%;
  min-height: 230px;
  max-height: 320px;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid rgba(6,16,22,.10);
  background: #0b1219;
}
.course-page-cover {
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 70px;
  font-weight: 950;
}
.course-hero-card h2 {
  margin: 12px 0 8px;
  font-size: clamp(30px, 4vw, 54px);
  line-height: 1.02;
}
.course-hero-card p {
  max-width: 840px;
  color: #4d5a65;
  font-size: 16px;
  line-height: 1.55;
}
.course-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 18px;
}
.course-toolbar .btn.glass {
  color: var(--ink);
  background: rgba(255,255,255,.56);
  border-color: rgba(6,16,22,.10);
}
.course-detail {
  display: grid;
  gap: 16px;
}
.course-reader {
  padding: 18px;
}
.course-reader > .grid {
  gap: 14px;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@media (max-width: 1180px) {
  .role-check-grid,
  .instruction-board,
  .store-score-row,
  .program-block-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .constructor-course-row {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 760px) {
  .course-builder-shell,
  .course-hero-card,
  .search-results,
  .instruction-board,
  .store-score-row,
  .role-check-grid,
  .program-block-grid {
    grid-template-columns: 1fr;
  }
  .builder-palette {
    position: relative;
    top: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .profile-hero {
    display: grid;
  }
  .profile-list {
    grid-template-columns: 1fr;
  }
  .martin-guide img {
    height: 220px;
  }
}

@media (max-width: 760px) {
  .main::before {
    display: none;
  }
  .app-shell {
    grid-template-columns: 1fr;
  }
  .sidebar {
    height: auto;
    max-height: none;
    position: relative;
    padding: 18px 16px;
    gap: 14px;
  }
  .brand-lockup {
    padding-bottom: 14px;
  }
  .user-mini {
    margin: 0;
    padding: 14px;
  }
  .nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .nav button {
    min-height: 56px;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 15px;
    line-height: 1.18;
  }
  .nav button svg {
    width: 18px;
    height: 18px;
  }
  .main {
    padding: 18px 14px;
  }
  .topbar {
    display: grid;
    align-items: start;
  }
  .topbar h1 {
    font-size: 34px;
    line-height: 1.04;
  }
  .topbar p {
    font-size: 15px;
    line-height: 1.35;
  }
  .topbar .btn {
    width: auto;
    justify-self: start;
    min-height: 40px;
    padding: 9px 13px;
  }
  .portal-hero {
    border-radius: 18px;
    padding: 18px;
  }
  .portal-hero h2 {
    font-size: 32px;
  }
  .portal-hero::after {
    display: none;
  }
}

/* O'HARA retail system: clean product imagery, thin glass controls, fast layouts */
:root {
  --red: #ed1c24;
  --red-dark: #b70d16;
  --ink: #111417;
  --muted: #67717b;
  --line: #dfe4e8;
  --soft: #f4f6f7;
  --cyan: #58b9d8;
  --good: #179a55;
  --warn: #e48a12;
  --violet: #bd2fc8;
  --shadow: 0 18px 48px rgba(17, 20, 23, .08);
}

body {
  background: #f5f7f8;
  letter-spacing: 0;
}

body::before,
.main::before,
.sidebar::before,
.portal-hero::after,
.martin-panel::before,
.martin-guide::before,
.martin-guide::after,
.track-card::after,
.att-card::before,
.score-card::after {
  display: none !important;
}

.app-shell { grid-template-columns: 264px minmax(0, 1fr); }
.sidebar {
  padding: 18px 14px;
  gap: 14px;
  background: rgba(14, 16, 18, .98);
  border-right: 1px solid rgba(255,255,255,.10);
  box-shadow: 10px 0 34px rgba(17,20,23,.12);
}
.brand-lockup { padding: 2px 6px 14px; }
.sidebar .logo b { font-size: 19px; }
.sidebar .logo small { color: #b9c2c8; font-size: 10px; }
.logo-mark {
  width: 38px;
  height: 38px;
  border-radius: 6px;
  background:
    url("/assets/brand/ohara-logo-mark.webp") center / 78% no-repeat,
    #fff;
  box-shadow: 0 10px 26px rgba(237,28,36,.18);
  color: transparent;
  font-size: 0;
}
.logo-mark::after { display: none; }
.user-mini {
  padding: 12px;
  border-radius: 7px;
  border-color: rgba(255,255,255,.13);
  background: rgba(255,255,255,.055);
  box-shadow: none;
}
.avatar { border-radius: 6px; }
.nav { gap: 5px; }
.nav button {
  min-height: 42px;
  border-radius: 6px;
  background: transparent;
  color: #dce2e5;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease;
}
.nav button::after { display: none; }
.nav button:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.10); }
.nav button.active {
  color: #fff;
  background: rgba(237,28,36,.18);
  border-color: rgba(237,28,36,.52);
  box-shadow: inset 3px 0 0 var(--red);
}
.martin-panel {
  padding: 8px 10px 10px;
  border-radius: 7px;
  background: rgba(255,255,255,.045);
  box-shadow: none;
}
.martin-sidebar {
  width: 100%;
  height: 124px;
  aspect-ratio: auto;
  border-radius: 0;
  object-fit: contain;
  mix-blend-mode: normal;
}

.main { width: 100%; max-width: 1680px; padding: 28px 32px 48px; }
.topbar {
  min-height: 72px;
  align-items: center;
  padding-bottom: 16px;
  border-color: #e1e5e8;
}
.topbar h1 {
  color: var(--ink);
  background: none;
  font-size: 38px;
  line-height: 1.02;
}
.topbar p { font-weight: 600; }

.btn {
  min-height: 40px;
  padding: 10px 15px;
  border-radius: 6px;
  border: 1px solid transparent;
  box-shadow: none;
  transition: transform .14s ease, background-color .14s ease, border-color .14s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn.primary {
  background: var(--red);
  border-color: var(--red);
  box-shadow: 0 10px 24px rgba(237,28,36,.18);
}
.btn.primary:hover { background: #d9151d; }
.btn.ghost,
.btn.glass,
.portal-actions .btn.glass {
  color: var(--ink);
  background: rgba(255,255,255,.72);
  border-color: rgba(17,20,23,.16);
  backdrop-filter: blur(12px);
}
.card,
.kpi,
.att-card,
.lesson,
.portal-course-card,
.track-card,
.resource-panel,
.compliance-panel {
  border-radius: 8px;
  border-color: var(--line);
  box-shadow: 0 8px 24px rgba(17,20,23,.055);
}

.portal-hero {
  min-height: 390px;
  grid-template-columns: minmax(0, 1fr) 250px;
  padding: 30px;
  border: 0;
  border-radius: 8px;
  background: #171a1d;
  box-shadow: 0 18px 46px rgba(17,20,23,.18);
}
.hero-bg-scene { opacity: 1; }
.hero-bg-scene img {
  object-position: center 52%;
  filter: saturate(.98) contrast(1.02);
}
.hero-bg-scene::after {
  background: linear-gradient(90deg, rgba(10,12,14,.96) 0%, rgba(10,12,14,.84) 43%, rgba(10,12,14,.26) 72%, rgba(10,12,14,.48) 100%);
}
.portal-hero-main { max-width: 780px; }
.hero-stage,
.eyebrow {
  display: inline-flex;
  width: fit-content;
  min-height: 30px;
  align-items: center;
  padding: 5px 9px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 5px;
  color: #fff;
  background: rgba(20,22,24,.44);
  backdrop-filter: blur(9px);
  font-size: 12px;
  font-weight: 850;
}
.portal-hero h2 {
  max-width: 650px;
  margin: 18px 0 12px;
  color: #fff;
  font-size: 50px;
  line-height: 1;
  text-shadow: 0 8px 28px rgba(0,0,0,.28);
}
.portal-hero p { max-width: 620px; color: #f0f2f3; font-size: 16px; }
.portal-actions .btn.ghost,
.portal-actions .btn.glass {
  color: #fff;
  background: rgba(17,20,23,.38);
  border-color: rgba(255,255,255,.32);
}
.portal-actions .btn:hover { background: rgba(255,255,255,.16); }
.portal-actions .btn.primary:hover { background: #d9151d; }
.hero-telemetry span {
  min-height: 34px;
  border-radius: 5px;
  color: #eef2f4;
  background: rgba(17,20,23,.44);
  border-color: rgba(255,255,255,.24);
}
.martin-guide {
  align-self: end;
  min-height: 286px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.martin-guide img {
  width: 100%;
  height: 245px;
  object-fit: contain;
  border-radius: 0;
  mix-blend-mode: screen;
  box-shadow: none;
  filter: drop-shadow(0 16px 22px rgba(0,0,0,.35));
}
.martin-guide > div {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 5px;
  background: rgba(17,20,23,.46);
  backdrop-filter: blur(10px);
}

.portal-section { margin-top: 28px; }
.section-head h2 { font-size: 29px; }
.rank-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.rank-timeline::before {
  content: "";
  position: absolute;
  left: 9%;
  right: 9%;
  top: 22px;
  height: 2px;
  background: #d9dee2;
}
.rank-node {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0,1fr);
  gap: 9px;
  align-items: center;
  min-height: 72px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255,255,255,.92);
}
.rank-node i {
  position: relative;
  z-index: 1;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e7ebee;
  color: #5f6870;
  font-style: normal;
  font-weight: 900;
}
.rank-node b,
.rank-node span { display: block; }
.rank-node span { margin-top: 3px; color: var(--muted); font-size: 11px; }
.rank-node.done { border-color: rgba(23,154,85,.28); }
.rank-node.done i { color: #fff; background: var(--good); }
.rank-node.current { border-color: rgba(237,28,36,.55); box-shadow: 0 8px 24px rgba(237,28,36,.10); }
.rank-node.current i { color: #fff; background: var(--red); }
.rank-node.future { color: #727b83; background: rgba(255,255,255,.62); }

.track-layout { grid-template-columns: minmax(0,1fr) 276px; }
.track-card {
  grid-template-columns: 88px minmax(0,1fr);
  padding: 18px;
  background: #fff;
}
.track-card:hover,
.att-card:hover,
.portal-course-card:hover,
.resource-panel:hover,
.compliance-panel:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(17,20,23,.075); }
.track-orbit { width: 76px; height: 76px; }
.track-steps { grid-template-columns: repeat(2,minmax(0,1fr)); }
.track-step {
  min-height: 58px;
  display: grid;
  grid-template-columns: 28px minmax(0,1fr);
  grid-template-rows: auto auto;
  align-content: center;
  border-radius: 6px;
  background: #f8f9fa;
}
.track-step span { grid-row: 1 / 3; }
.track-step b { overflow: hidden; text-overflow: ellipsis; }
.track-step small { color: var(--muted); font-size: 11px; }
.track-step.locked { opacity: .58; background: #f2f3f4; }
.score-card {
  border-radius: 8px;
  background: #15181b;
  box-shadow: 0 12px 32px rgba(17,20,23,.14);
}
.score-radar { box-shadow: none; }

.program-block-grid { gap: 12px; }
.program-lane {
  min-height: 230px;
  border-radius: 8px;
  border-top: 4px solid var(--accent);
  background: #fff;
  box-shadow: 0 8px 24px rgba(17,20,23,.055);
}
.program-lane-list button { border-radius: 5px; }
.portal-course-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.portal-course-card {
  grid-template-rows: 152px minmax(0,1fr);
  background: #fff;
}
.portal-course-card img,
.course-fallback { width: 100%; height: 152px; object-fit: cover; }
.portal-course-body { padding: 15px; }
.portal-course-body h3 { font-size: 18px; }
.portal-course-body p { min-height: 42px; }
.portal-tabs { gap: 6px; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 5px; }
.portal-tab { flex: 0 0 auto; border-radius: 6px; }

.instruction-board { grid-template-columns: repeat(2,minmax(0,1fr)); }
.instruction-group { padding: 18px; }
.instruction-item { border-radius: 7px; background: #fff; }
.instruction-actions { display: grid; justify-items: end; gap: 7px; }
.instruction-reader-page {
  width: min(940px,100%);
  margin: 0 auto;
  display: grid;
  gap: 12px;
}
.instruction-reader-head,
.instruction-confirm-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(12px);
}
.instruction-reader-head span,
.instruction-reader-head b,
.instruction-confirm-bar span,
.instruction-confirm-bar b { display: block; }
.instruction-reader-head span,
.instruction-confirm-bar span { color: var(--muted); font-size: 12px; }
.instruction-reader { min-height: 70vh; padding: 26px; }
.instruction-reader .block { font-size: 16px; line-height: 1.65; }
.instruction-reader-end { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--line); }
.instruction-reader-end b,
.instruction-reader-end span { display: block; }
.instruction-reader-end span { color: var(--muted); margin-top: 4px; }
.instruction-confirm-bar { position: sticky; bottom: 10px; z-index: 3; box-shadow: 0 14px 36px rgba(17,20,23,.12); }

.test-admin-layout {
  display: grid;
  grid-template-columns: 290px minmax(0,1fr);
  gap: 14px;
  align-items: start;
}
.test-admin-list { position: sticky; top: 14px; display: grid; gap: 7px; padding: 12px; }
.test-admin-tab {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 11px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
}
.test-admin-tab span,
.test-admin-tab small { color: var(--muted); font-size: 11px; }
.test-admin-tab.active { border-color: var(--red); box-shadow: inset 3px 0 0 var(--red); }
.test-admin-workspace,
.test-question-list { display: grid; gap: 12px; min-width: 0; }
.question-editor { padding: 0; overflow: hidden; }
.question-editor summary {
  display: grid;
  grid-template-columns: 32px minmax(0,1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 54px;
  padding: 12px 14px;
  cursor: pointer;
}
.question-editor summary span { color: var(--red); font-weight: 900; }
.question-editor summary small { color: var(--muted); }
.question-edit-form { padding: 0 14px 14px; border-top: 1px solid var(--line); }

.course-hero-card { border-radius: 8px; background: #fff; }
.course-hero-card img { border-radius: 7px; }
.route-loading { min-height: 50vh; }

.login-shell { background: #f5f2ec; }
.login-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(255, 214, 168, .28), transparent 55%),
    linear-gradient(160deg, #2a1a14 0%, #3a241c 48%, #1c110e 100%);
}
.login-hero::before,
.login-hero::after { display: none !important; content: none !important; }
.login-card { border-radius: 8px; border-color: #e2e6e9; }

@media (max-width: 1320px) {
  .portal-course-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .rank-node { grid-template-columns: 36px minmax(0,1fr); }
}

@media (max-width: 980px) {
  .app-shell { grid-template-columns: 224px minmax(0,1fr); }
  .main { padding: 24px 20px 40px; }
  .portal-hero { grid-template-columns: minmax(0,1fr) 200px; }
  .portal-course-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .rank-timeline { grid-template-columns: 1fr; }
  .rank-timeline::before { left: 24px; right: auto; top: 26px; bottom: 26px; width: 2px; height: auto; }
  .rank-node { grid-template-columns: 40px minmax(0,1fr); }
  .test-admin-layout { grid-template-columns: 1fr; }
  .test-admin-list { position: relative; top: auto; grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 760px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: relative; height: auto; padding: 13px; }
  .brand-lockup { border-bottom: 0; }
  .user-mini,
  .martin-panel,
  .sidebar-footer { display: none; }
  .nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 6px;
    overflow: visible;
    padding-bottom: 0;
  }
  .nav button {
    min-width: 0;
    min-height: 48px;
    padding: 8px 10px;
    font-size: 13px;
  }
  .main { padding: 16px 12px 32px; }
  .topbar { min-height: auto; }
  .topbar h1 { font-size: 30px; }
  .portal-hero {
    min-height: 510px;
    display: block;
    padding: 20px 16px;
  }
  .hero-bg-scene img { object-position: 64% center; }
  .hero-bg-scene::after { background: linear-gradient(180deg, rgba(10,12,14,.90) 0%, rgba(10,12,14,.68) 58%, rgba(10,12,14,.90) 100%); }
  .portal-hero h2 { font-size: 38px; }
  .portal-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .portal-actions .btn { width: 100%; }
  .hero-telemetry { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
  .hero-telemetry span { display: grid; justify-items: center; height: 56px; padding: 6px; text-align: center; font-size: 10px; }
  .martin-guide { display: none; }
  .section-head { display: grid; align-items: start; }
  .section-head h2 { font-size: 25px; }
  .track-layout,
  .track-card,
  .track-steps,
  .program-block-grid,
  .portal-course-grid,
  .instruction-board,
  .test-admin-list { grid-template-columns: 1fr; }
  .track-card { padding: 15px; }
  .portal-course-card { grid-template-rows: 180px minmax(0,1fr); }
  .portal-course-card img,
  .course-fallback { height: 180px; }
  .instruction-reader { min-height: 65vh; padding: 18px; }
  .instruction-reader-head,
  .instruction-confirm-bar { align-items: flex-start; }
  .instruction-confirm-bar { display: grid; }
  .instruction-confirm-bar .btn { width: 100%; }
  .question-editor summary { grid-template-columns: 28px minmax(0,1fr); }
  .question-editor summary small { grid-column: 2; }
  .login-shell { grid-template-columns: 1fr; }
  .login-hero { min-height: 46vh; padding: 22px; }
  .login-hero .hero-title { font-size: 48px; }
  .login-panel { padding: 16px; }
  .login-card { padding: 22px; }
}

.portal-hero {
  grid-template-columns: minmax(0,1fr);
  color: var(--ink);
  background: #fff;
  border: 1px solid #e1e5e8;
}
.hero-bg-scene img { object-position: right center; }
.hero-bg-scene::after {
  background: linear-gradient(90deg, rgba(255,255,255,.99) 0%, rgba(255,255,255,.96) 42%, rgba(255,255,255,.62) 62%, rgba(255,255,255,.12) 100%);
}
.portal-hero h2 { color: var(--ink); text-shadow: none; }
.portal-hero p { color: #30383f; }
.portal-actions .btn.ghost,
.portal-actions .btn.glass {
  color: var(--ink);
  background: rgba(255,255,255,.70);
  border-color: rgba(17,20,23,.18);
}
.portal-actions .btn:hover { background: rgba(255,255,255,.94); }
.hero-stage,
.portal-hero .eyebrow {
  color: var(--red-dark);
  border-color: rgba(237,28,36,.26);
  background: rgba(255,255,255,.74);
}
.hero-telemetry span {
  color: #394148;
  border-color: rgba(17,20,23,.13);
  background: rgba(255,255,255,.72);
}
.hero-telemetry b { color: var(--ink); }
.martin-guide { display: none; }

@media (max-width: 760px) {
  .portal-hero { min-height: 520px; }
  .hero-bg-scene img { object-position: 62% bottom; }
  .hero-bg-scene::after {
    background: linear-gradient(180deg, rgba(255,255,255,.99) 0%, rgba(255,255,255,.96) 58%, rgba(255,255,255,.30) 80%, rgba(255,255,255,.62) 100%);
  }
}

/* Authentication uses the same brand scene as the portal, with no product copy. */
.auth-page {
  min-height: 100vh;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(360px, 520px);
  align-items: center;
  gap: clamp(28px, 5vw, 88px);
  padding: clamp(24px, 5vw, 80px);
  overflow: hidden;
  background: #edf1f3;
}
.auth-page::before {
  content: "";
  position: absolute;
  inset: 0 42% 0 0;
  z-index: -2;
  background: #111820 url('/assets/brand/martin-v4-final/martin-v4-01-identity-front.webp') center / contain no-repeat;
}
.auth-page::after {
  content: "";
  position: absolute;
  inset: 0 40% 0 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(14,18,21,.16), rgba(14,18,21,.04) 62%, #edf1f3 100%);
}
.auth-card {
  grid-column: 2;
  width: 100%;
  padding: clamp(24px, 4vw, 42px);
  border: 1px solid rgba(255,255,255,.84);
  border-radius: 8px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 24px 70px rgba(17,20,23,.12);
  backdrop-filter: blur(22px);
}
.auth-card .logo { margin-bottom: 34px; color: var(--ink); }
.auth-card h1 { margin: 0 0 8px; font-size: clamp(30px, 4vw, 42px); line-height: 1.05; }
.auth-card > p { margin: 0 0 26px; color: var(--muted); line-height: 1.5; }
.auth-card .btn { width: 100%; }
.auth-link {
  min-height: 38px;
  padding: 7px 4px;
  color: #4c565d;
  background: transparent;
  font-weight: 760;
  text-decoration: underline;
  text-decoration-color: rgba(76,86,93,.28);
  text-underline-offset: 4px;
}
.auth-link:hover { color: var(--red-dark); text-decoration-color: currentColor; }

@media (max-width: 760px) {
  .auth-page {
    min-height: 100svh;
    display: flex;
    align-items: flex-end;
    padding: 28vh 12px 12px;
  }
  .auth-page::before { inset: 0 0 45% 0; background-position: 58% 26%; }
  .auth-page::after {
    inset: 0;
    background: linear-gradient(180deg, rgba(14,18,21,.05) 0%, rgba(14,18,21,.04) 22%, #edf1f3 48%);
  }
  .auth-card { padding: 22px 18px; }
  .auth-card .logo { margin-bottom: 22px; }
  .auth-card h1 { font-size: 30px; }
}

.test-session-card {
  display: grid;
  gap: 18px;
  padding: clamp(18px, 3vw, 30px);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 46px rgba(16,22,29,.08);
}
.test-session-progress { display: grid; gap: 10px; }
.test-session-progress > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.test-session-progress span { color: var(--muted); font-size: 13px; }
.test-question-step { display: grid; gap: 14px; }
.test-question-step h3 { margin: 0; max-width: 880px; font-size: clamp(21px, 2.5vw, 30px); line-height: 1.25; }
.test-question-step > p { margin: 0; }
.answer-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.answer-option {
  min-height: 70px;
  display: grid;
  grid-template-columns: 36px minmax(0,1fr);
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fbfcfd;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .15s;
}
.answer-option:hover { transform: translateY(-1px); border-color: rgba(246,12,21,.38); background: #fff; }
.answer-option input { position: absolute; opacity: 0; pointer-events: none; }
.answer-option-key {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid #d6dce2;
  border-radius: 6px;
  color: #5e6870;
  background: #fff;
  font-weight: 900;
}
.answer-option.selected,
.answer-option:has(input:checked) { border-color: rgba(246,12,21,.55); background: #fff6f6; }
.answer-option.selected .answer-option-key,
.answer-option:has(input:checked) .answer-option-key { border-color: var(--red); color: #fff; background: var(--red); }
.answer-option b { line-height: 1.35; }
.answer-feedback { display: grid; gap: 3px; padding: 13px 15px; border: 1px solid; border-radius: 7px; }
.answer-feedback.correct { border-color: #a7e8bf; color: #116534; background: #effcf4; }
.answer-feedback.incorrect { border-color: #ffc5c8; color: #9f1118; background: #fff2f2; }
.answer-feedback span { color: inherit; opacity: .84; }
.test-step-actions { display: flex; justify-content: space-between; gap: 10px; }
.test-question-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; color: #55616a; font-size: 12px; font-weight: 800; }
.test-question-legend span { display: inline-flex; align-items: center; gap: 6px; }
.test-question-legend i { width: 15px; height: 15px; display: inline-block; border: 2px solid; border-radius: 4px; }
.test-question-legend i.is-saved { border-color: #76c895; background: #effcf4; }
.test-question-legend i.is-current { border-color: #c9141d; background: #c9141d; }
.test-question-dots { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 2px; }
.test-question-dots button {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: #68727a;
  background: #fff;
  font-weight: 850;
}
.test-question-dots button.answered { border-color: #9edcb5; color: var(--good); background: #effcf4; }
.test-question-dots button.current { border-color: var(--red); color: #fff; background: var(--red); }
.test-result { min-height: 350px; display: grid; align-content: center; justify-items: center; gap: 10px; padding: 28px; text-align: center; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.test-result > span { font-size: 18px; font-weight: 900; }
.test-result > b { font-size: clamp(64px, 11vw, 112px); line-height: 1; }
.test-result.passed > b { color: var(--good); }
.test-result.failed > b { color: var(--red-dark); }

.question-audience { display: grid; gap: 11px; margin: 14px 0; padding: 14px; border: 1px solid var(--line); border-radius: 7px; }
.question-audience legend { padding: 0 7px; font-weight: 900; }
.question-audience p { margin: 0; color: var(--muted); font-size: 13px; }
.audience-role-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.audience-role-grid label { min-height: 42px; display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }

.admin-section-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  padding: 5px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.72);
}
.admin-section-tabs button { flex: 0 0 auto; min-height: 40px; padding: 8px 14px; border-radius: 6px; color: #59636b; background: transparent; font-weight: 850; }
.admin-section-tabs button.active { color: #fff; background: var(--dark); }
.admin-tab-panel { display: grid; gap: 16px; }
.admin-tab-panel[hidden] { display: none !important; }
.user-list-card { margin-top: 0; }
.role-access-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.role-access-item .section-head { align-items: start; }
.role-access-item .eyebrow { color: var(--red-dark); border-color: #ffd2d5; background: #fff6f6; }
.role-code { font-size: 12px; color: var(--muted); }
.permission-list { display: flex; flex-wrap: wrap; gap: 7px; }
.permission-list span { padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px; color: #48525a; background: #f7f9fa; font-size: 12px; font-weight: 750; }
.access-store-count { display: block; color: var(--ink); font-weight: 850; }
.access-table small { display: block; max-width: 360px; margin-top: 3px; overflow: hidden; color: var(--muted); text-overflow: ellipsis; }
.sync-action-panel { min-height: 300px; align-content: center; }
.sync-action-panel .eyebrow { color: var(--red-dark); border-color: #ffd2d5; background: #fff6f6; }
.sync-result { margin-top: 14px; }
.sync-preview { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; padding: 14px; border: 1px solid #bfe8cc; border-radius: 7px; color: #245d38; background: #f1fbf4; }
.sync-preview b { grid-column: 1 / -1; }
.sync-run-list { display: grid; gap: 8px; }
.sync-run-list > div { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 4px 9px; align-items: center; padding: 11px; border-bottom: 1px solid var(--line); }
.sync-run-list small { grid-column: 2; color: var(--muted); }
.attempt-queue-card { max-width: 1120px; }

@media (max-width: 980px) {
  .audience-role-grid,
  .role-access-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 760px) {
  .answer-options,
  .audience-role-grid,
  .role-access-grid,
  .sync-preview { grid-template-columns: 1fr; }
  .test-session-card { padding: 16px; }
  .test-session-progress > div:first-child { align-items: flex-start; }
  .answer-option { min-height: 62px; }
  .test-step-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .test-step-actions .btn { width: 100%; }
  .admin-user-layout,
  .sync-layout { grid-template-columns: 1fr; }
  .admin-section-tabs { margin-inline: -2px; }
  .sync-preview b { grid-column: 1; }
}

/* Final attestation and test-editor surfaces. */
.attestation-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.att-card {
  display: block;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(17, 20, 23, .12);
  border-top-width: 1px;
  background: #fff;
}
.att-card-art {
  aspect-ratio: 16 / 7;
  overflow: hidden;
  background: #e9eef1;
}
.att-card-art img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .3s ease;
}
.att-card:hover .att-card-art img { transform: scale(1.015); }
.att-card-content {
  display: grid;
  gap: 14px;
  padding: 16px;
}
.att-card .att-head {
  align-items: flex-start;
  justify-content: space-between;
}
.att-card .att-head > div:first-child { min-width: 0; }
.att-card .att-head span {
  display: block;
  margin-top: 3px;
}
.att-percent {
  flex: 0 0 auto;
  color: var(--accent);
  font-size: 30px;
  font-weight: 950;
  line-height: 1;
}
.att-card .att-body {
  grid-template-columns: minmax(100px, auto) minmax(0, 1fr);
  align-items: center;
}
.att-score {
  display: grid;
  gap: 2px;
  padding: 12px;
  border-left: 3px solid var(--accent);
  background: #f6f8fa;
}
.att-score b { font-size: 22px; line-height: 1.05; }
.att-score span { color: var(--muted); font-size: 12px; }
.att-card .btn { width: 100%; }

.question-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
.option-editor {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #f7f9fa;
}
.option-editor-list { display: grid; gap: 8px; }
.option-editor-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 38px;
  gap: 8px;
  align-items: center;
}
.option-editor-row .input { min-width: 0; background: #fff; }
.correct-option {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid #cfd7dd;
  border-radius: 6px;
  color: #68737b;
  background: #fff;
  cursor: pointer;
  font-weight: 950;
}
.correct-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.correct-option:has(input:checked) {
  border-color: var(--good);
  color: #fff;
  background: var(--good);
}
.icon-btn {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: #505b63;
  background: #fff;
  font-size: 18px;
  font-weight: 900;
}
.icon-btn:hover { border-color: #f4a9ad; color: var(--red-dark); }
.option-editor-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.option-editor-footer small { color: var(--muted); }

@media (max-width: 980px) {
  .attestation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .attestation-grid { grid-template-columns: 1fr; }
  .att-card-art { aspect-ratio: 16 / 8; }
  .att-card .att-body {
    grid-template-columns: minmax(100px, auto) minmax(0, 1fr);
    justify-items: stretch;
  }
  .question-editor summary {
    grid-template-columns: 26px minmax(0, 1fr);
    align-items: start;
  }
  .question-editor summary .question-actions {
    grid-column: 2;
    justify-content: flex-start;
  }
  .option-editor-row { grid-template-columns: 40px minmax(0, 1fr) 38px; }
  .option-editor-footer { align-items: flex-start; flex-direction: column; }
  .option-editor-footer .btn { width: 100%; }
}

/* Role-first attestation workspace. */
.btn.primary,
.btn.glass {
  border: 1px solid rgba(255,255,255,.34);
  color: #fff;
  background: rgba(226,22,31,.88);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.34), 0 8px 24px rgba(210,16,25,.16);
  backdrop-filter: blur(14px) saturate(130%);
}
.btn.primary:hover,
.btn.glass:hover {
  border-color: rgba(255,255,255,.56);
  background: rgba(196,12,21,.94);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.44), 0 10px 28px rgba(210,16,25,.22);
}
.btn.primary:disabled,
.btn.glass:disabled {
  border-color: rgba(116,126,134,.18);
  color: #79838a;
  background: rgba(227,231,234,.72);
  box-shadow: none;
}
.nav button {
  border: 1px solid transparent;
  background: rgba(255,255,255,.025);
}
.nav button.active {
  border-color: rgba(255,87,94,.36);
  background: linear-gradient(100deg, rgba(226,22,31,.32), rgba(255,255,255,.055));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 22px rgba(172,8,17,.12);
}
.martin-panel {
  position: relative;
  overflow: hidden;
  padding: 0;
  border-color: rgba(255,255,255,.1);
  background: #090b0e;
}
.martin-panel::before { display: none; }
.martin-sidebar {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  display: block;
  object-fit: contain;
  object-position: center;
}
.martin-panel > div {
  position: absolute;
  right: 10px;
  bottom: 10px;
  left: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 6px;
  color: #fff;
  background: rgba(9,11,14,.64);
  backdrop-filter: blur(10px);
}
.empty-section {
  min-height: min(620px, calc(100vh - 150px));
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(260px,420px);
  align-items: center;
  gap: 40px;
  overflow: hidden;
  padding: clamp(28px,5vw,72px);
  border-top: 1px solid rgba(14,19,24,.1);
  border-bottom: 1px solid rgba(14,19,24,.1);
  background: #f7f9fa;
}
.empty-section-copy span {
  color: var(--red-dark);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}
.empty-section-copy h2 {
  max-width: 620px;
  margin: 10px 0 0;
  font-size: clamp(32px,4vw,58px);
  line-height: 1.02;
}
.empty-section img {
  width: 100%;
  max-height: 520px;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.attestation-note {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
}
.attestation-note b { color: var(--ink); }
.att-card.is-closed { filter: saturate(.35); }
.att-card.is-closed .att-card-art img { opacity: .72; }
.progress-ledger { padding: 0; overflow: hidden; }
.progress-ledger-head,
.progress-ledger-row {
  display: grid;
  grid-template-columns: minmax(230px,1.45fr) minmax(95px,.5fr) minmax(180px,1fr) minmax(130px,.6fr) 110px;
  gap: 16px;
  align-items: center;
}
.progress-ledger-head {
  padding: 12px 18px;
  color: #879199;
  background: #f4f6f7;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}
.progress-ledger-row {
  min-height: 86px;
  padding: 14px 18px;
  border-top: 1px solid var(--line);
}
.progress-ledger-row > div:first-child {
  display: grid;
  grid-template-columns: 5px minmax(0,1fr);
  gap: 2px 12px;
  align-items: center;
}
.progress-ledger-row > div:first-child > i {
  grid-row: 1 / 3;
  width: 5px;
  height: 42px;
  border-radius: 3px;
  background: var(--accent);
}
.progress-ledger-row small { color: var(--muted); }
.progress-result { display: grid; grid-template-columns: 42px minmax(80px,1fr); gap: 9px; align-items: center; }
.progress-result > i { height: 6px; overflow: hidden; border-radius: 3px; background: #e7ebee; }
.progress-result > i > em { height: 100%; display: block; border-radius: inherit; }
.progress-ledger-row > .badge { justify-self: start; min-width: 42px; text-align: center; }
.block-access-card { margin-bottom: 16px; }
.block-access-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.block-access-grid fieldset { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 7px; }
.block-access-grid legend { padding: 0 7px; font-weight: 900; }
.block-access-row {
  display: grid;
  grid-template-columns: minmax(140px,1fr) auto auto 82px;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid #edf0f2;
}
.block-access-row:first-of-type { border-top: 0; }
.block-access-row > div { display: grid; }
.block-access-row small { color: var(--muted); }
.block-access-row label { display: flex; align-items: center; gap: 6px; color: #4d5860; font-size: 12px; font-weight: 800; }
.block-position { display: grid !important; gap: 3px !important; }
.block-position .input { min-height: 34px; padding: 5px 8px; }
.block-access-grid > .actions { grid-column: 1 / -1; }

@media (max-width: 1100px) {
  .progress-ledger-head { display: none; }
  .progress-ledger-row { grid-template-columns: minmax(210px,1fr) repeat(3,auto) 100px; }
  .block-access-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .empty-section {
    min-height: calc(100dvh - 190px);
    grid-template-columns: 1fr;
    align-content: center;
    gap: 24px;
    padding: 28px 18px;
  }
  .empty-section img { max-height: 300px; }
  .attestation-note { align-items: flex-start; flex-direction: column; }
  .progress-ledger-row {
    grid-template-columns: minmax(0,1fr) auto;
    gap: 12px;
    padding: 16px;
  }
  .progress-ledger-row > strong { text-align: right; }
  .progress-result { grid-column: 1 / -1; }
  .progress-ledger-row > .badge { grid-column: 1; }
  .progress-ledger-row > .btn { grid-column: 2; grid-row: 3; }
  .block-access-row { grid-template-columns: 1fr 1fr; }
  .block-access-row > div { grid-column: 1 / -1; }
  .block-position { grid-column: 1 / -1; grid-template-columns: auto 70px !important; justify-content: space-between; }
}

/* Learning, instructions and team workspaces */
.portal-support-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.portal-catalog-empty { grid-column: 1 / -1; }

.training-summary,
.instruction-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.source-progress-card {
  padding: clamp(18px, 2.4vw, 28px);
  margin-bottom: 18px;
  overflow: hidden;
}
.source-progress-heading {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.source-progress-heading h2 {
  margin: 4px 0 6px;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.05;
}
.source-progress-heading p { margin: 0; color: var(--muted); }
.source-progress-heading .btn { flex: 0 0 auto; }
.source-progress-user {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  align-items: center;
  padding: 18px 0 4px;
  color: #48545d;
}
.source-progress-user strong {
  flex: 1 0 100%;
  color: var(--ink);
  font-size: 18px;
}
.source-progress-user span { font-size: 14px; }
.source-progress-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0;
}
.source-progress-kpi {
  display: grid;
  gap: 5px;
  min-width: 0;
  min-height: 112px;
  align-content: center;
  padding: 16px;
  border: 1px solid rgba(25, 32, 38, .08);
  border-radius: 16px;
}
.source-progress-kpi span {
  color: #47535d;
  font-size: 13px;
  font-weight: 850;
}
.source-progress-kpi strong {
  color: #11171b;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1;
}
.source-progress-kpi small {
  color: #626d75;
  font-size: 11px;
  line-height: 1.25;
}
.source-progress-kpi.total { background: #fff0f1; }
.source-progress-kpi.personnel { background: #fff2df; }
.source-progress-kpi.product { background: #e7f6ea; }
.source-progress-kpi.sales { background: #ffe7e7; }
.source-progress-kpi.processes { background: #eaf2ff; }
.source-progress-sync {
  margin: 2px 0 14px;
  color: var(--muted);
  font-size: 12px;
}
.source-progress-groups {
  display: grid;
  gap: 18px;
}
.source-progress-group {
  overflow: hidden;
  border: 1px solid #dce1e4;
  border-radius: 18px;
  background: #fff;
}
.source-progress-group-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  padding: 17px 18px 14px;
  background: #fff;
}
.source-progress-group-head h3 {
  margin: 0;
  font-size: clamp(20px, 2.2vw, 27px);
  line-height: 1.1;
}
.source-progress-group-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.source-progress-rows { display: grid; }
.source-progress-rows > .muted { margin: 0; padding: 18px; }
.source-progress-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(180px, .55fr) auto;
  gap: 14px;
  align-items: center;
  min-width: 0;
  padding: 14px 16px;
  border-top: 1px solid rgba(17, 23, 27, .07);
  border-left: 5px solid transparent;
}
.source-progress-row.is-green {
  border-left-color: #1da85a;
  background: #e6f7eb;
}
.source-progress-row.is-yellow {
  border-left-color: #e5aa15;
  background: #fff7cf;
}
.source-progress-row.is-red {
  border-left-color: #e2303d;
  background: #fff0f0;
}
.source-progress-lesson { min-width: 0; }
.source-progress-lesson b,
.source-progress-lesson small { display: block; }
.source-progress-lesson b {
  overflow-wrap: anywhere;
  font-size: 14px;
  line-height: 1.35;
}
.source-progress-lesson small {
  margin-top: 4px;
  color: #67727a;
  font-size: 12px;
}
.source-progress-state {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  min-width: 0;
  color: #22292e;
  font-size: 13px;
  line-height: 1.35;
}
.source-progress-state strong { overflow-wrap: anywhere; }
.source-progress-dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  margin-top: 4px;
  border-radius: 50%;
  background: #e5aa15;
  box-shadow: 0 0 0 4px rgba(229, 170, 21, .14);
}
.is-green .source-progress-dot {
  background: #1da85a;
  box-shadow: 0 0 0 4px rgba(29, 168, 90, .14);
}
.is-red .source-progress-dot {
  background: #e2303d;
  box-shadow: 0 0 0 4px rgba(226, 48, 61, .14);
}
.btn.source-progress-open {
  min-width: 104px;
  color: #fff;
  border-color: #15191d;
  background: #15191d;
  box-shadow: none;
}
.btn.source-progress-open:hover { color: #fff; background: #2a3035; }
.source-progress-no-link {
  min-width: 104px;
  color: var(--muted);
  text-align: center;
}
.training-percentages,
.training-history { margin-bottom: 16px; }
.training-block-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.training-block-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--accent);
  border-radius: 8px;
  background: #fff;
}
.training-block-result span,
.training-block-result b,
.training-block-result small { display: block; }
.training-block-result span,
.training-block-result small { color: var(--muted); font-size: 12px; }
.training-block-result b { margin-top: 4px; }
.training-block-result strong { font-size: 24px; }
.training-block-result .progress,
.training-block-result small { grid-column: 1 / -1; }
.training-history-list { display: grid; }
.training-history-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.35fr) minmax(170px, .8fr) auto auto;
  gap: 14px;
  align-items: center;
  min-height: 72px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.training-history-row:first-child { border-top: 0; }
.training-history-row > div:first-child b,
.training-history-row > div:first-child span { display: block; }
.training-history-row > div:first-child span { margin-top: 4px; color: var(--muted); font-size: 12px; }
.training-history-progress {
  display: grid;
  grid-template-columns: 42px minmax(80px, 1fr);
  gap: 8px;
  align-items: center;
}
.training-history-progress > span { font-weight: 900; }
.progress-attestation-head { margin: 26px 0 12px; }
.progress-attestation-head h2,
.progress-attestation-head p { margin: 0; }
.progress-attestation-head p { margin-top: 4px; color: var(--muted); }

.team-overview-card,
.team-detail-card { padding: 20px; }
.team-store-detail { margin-top: 18px; scroll-margin-top: 18px; }
.team-detail-placeholder {
  display: grid;
  gap: 5px;
  min-height: 120px;
  place-content: center;
  padding: 24px;
  border: 1px dashed #cfd6dc;
  border-radius: 8px;
  color: var(--muted);
  background: rgba(255, 255, 255, .58);
  text-align: center;
}
.team-detail-placeholder b { color: var(--ink); font-size: 20px; }
.team-store-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 12px;
  margin: 14px 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f5f7f8;
}
.team-store-tools .search-box { flex: 1 1 320px; }
.team-result-count {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
  white-space: nowrap;
}
.team-score-strip .score-mini { min-width: 0; }
.team-score-strip .score-mini.total { background: #fff0f1; }
.team-score-strip .score-mini.personnel { background: #fff4df; }
.team-score-strip .score-mini.product { background: #eaf8ef; }
.team-score-strip .score-mini.sales { background: #ffe9eb; }
.team-score-strip .score-mini.process { background: #eaf2ff; }
.team-store-table table { min-width: 920px; }
.team-store-row.selected td { background: #fff4f4; }
.team-store-row.selected td:first-child { box-shadow: inset 4px 0 0 var(--red); }
.team-detail-head { align-items: center; }
.team-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
  margin: 14px 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f5f7f8;
}
.team-filters .field { min-width: 0; margin: 0; }
.team-filter-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.team-employee-table table { min-width: 1320px; }
.team-employee-table th { position: sticky; top: 0; z-index: 1; }
.team-percent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 28px;
  border-radius: 6px;
  font-weight: 900;
}
.team-percent.hot-good { color: #087044; background: #dcfce7; }
.team-percent.hot-mid { color: #9a5205; background: #fef3c7; }
.team-percent.hot-bad { color: #b10e18; background: #fee2e2; }
.team-percent.hot-empty,
.team-percent.empty { color: var(--muted); background: #eef1f3; }
.team-focus-label { max-width: 230px; margin-top: 5px; color: var(--muted); font-size: 11px; white-space: normal; }

@media (max-width: 1180px) {
  .source-progress-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .training-block-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .portal-support-grid,
  .training-summary,
  .instruction-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .training-history-row { grid-template-columns: minmax(0, 1fr) auto; }
  .training-history-progress { grid-column: 1 / -1; }
  .training-history-row > .badge { grid-column: 1; }
  .training-history-row > .btn { grid-column: 2; grid-row: 3; }
  .source-progress-row { grid-template-columns: minmax(0, 1fr) minmax(150px, .6fr); }
  .source-progress-row > .btn,
  .source-progress-row > .source-progress-no-link { grid-column: 2; }
}

@media (max-width: 620px) {
  .portal-support-grid,
  .training-summary,
  .instruction-summary,
  .training-block-grid,
  .team-filters { grid-template-columns: 1fr; }
  .team-store-tools,
  .team-detail-head { align-items: stretch; }
  .team-store-tools .btn,
  .team-detail-head .btn { width: 100%; }
  .team-score-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team-score-strip .score-mini.total { grid-column: 1 / -1; }
  .team-filter-actions { grid-column: 1; }
  .source-progress-heading { align-items: flex-start; flex-direction: column; }
  .source-progress-heading .btn { width: 100%; }
  .source-progress-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .source-progress-kpi.total { grid-column: 1 / -1; }
  .source-progress-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 15px;
  }
  .source-progress-row > .btn,
  .source-progress-row > .source-progress-no-link {
    grid-column: 1;
    width: max-content;
  }
  .employee-instruction-section .instruction-item {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }
  .employee-instruction-section .instruction-actions {
    grid-template-columns: minmax(0, 1fr);
    justify-items: stretch;
  }
  .employee-instruction-section .instruction-actions .badge,
  .employee-instruction-section .instruction-actions .btn {
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 390px) {
  .source-progress-kpis { grid-template-columns: 1fr; }
  .source-progress-kpi.total { grid-column: 1; }
}

/* 2026 role-first workspace: profile photo, store routes and admin directory. */
.avatar.has-photo { overflow: hidden; padding: 0; background: #eef1f3; }
.avatar.has-photo img { width: 100%; height: 100%; display: block; object-fit: cover; }
.profile-avatar-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}
.profile-avatar-controls small { flex-basis: 100%; color: var(--muted); text-align: right; }

.transfer-banner {
  min-height: 210px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 360px);
  align-items: center;
  gap: 22px;
  margin-bottom: 18px;
  padding: clamp(22px, 3vw, 38px);
  overflow: hidden;
  border: 1px solid #d8e0e6;
  border-radius: 10px;
  background: linear-gradient(115deg, #fff 0 58%, #edf3f6 58% 100%);
  box-shadow: 0 16px 42px rgba(6, 16, 22, .07);
}
.transfer-banner.instructions { background: linear-gradient(115deg, #fff 0 58%, #fff3e4 58% 100%); }
.transfer-banner h2 { margin: 12px 0 8px; font-size: clamp(27px, 3vw, 42px); line-height: 1.02; }
.transfer-banner p { max-width: 720px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.5; }
.transfer-banner img { width: 100%; max-height: 240px; object-fit: contain; animation: martinTransfer 4.4s ease-in-out infinite; }

.martin-companion {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 30;
  width: 68px;
  height: 68px;
  display: grid;
  grid-template-columns: 54px 0;
  align-items: center;
  gap: 0;
  padding: 6px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  color: #fff;
  background: #111820;
  box-shadow: 0 18px 45px rgba(6, 16, 22, .3);
  transition: width .22s ease, grid-template-columns .22s ease, border-radius .22s ease;
  animation: martinNudge 6s ease-in-out infinite;
}
.martin-companion img { width: 54px; height: 54px; object-fit: contain; border-radius: 50%; }
.martin-companion span { min-width: 200px; display: grid; gap: 2px; padding: 0 10px; text-align: left; opacity: 0; transition: opacity .15s ease; }
.martin-companion small { color: #cbd5dc; line-height: 1.2; }
.martin-companion.is-open { width: 290px; grid-template-columns: 54px 1fr; border-radius: 14px; }
.martin-companion.is-open span { opacity: 1; }
.martin-panel .martin-sidebar { animation: martinSidebar 5.2s ease-in-out infinite; transform-origin: 50% 100%; }

.team-detail-route-head { display: flex; margin: -8px 0 14px; }
.team-store-tools .team-compact-filter { min-width: 190px; display: grid; gap: 4px; }
.team-compact-filter > span { color: var(--muted); font-size: 11px; font-weight: 850; }
.team-store-tools .team-compact-filter select { min-height: 42px; padding: 8px 10px; }
.team-course-details { min-width: 230px; }
.team-course-details summary { cursor: pointer; color: var(--red-dark); font-weight: 850; }
.team-course-details > div {
  width: min(480px, 72vw);
  display: grid;
  gap: 7px;
  margin-top: 9px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7f9fa;
}
.team-course-details article {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) 48px auto;
  gap: 9px;
  align-items: center;
  padding: 8px 9px;
  border-left: 4px solid var(--course-accent);
  border-radius: 6px;
  background: #fff;
}
.team-course-details b,
.team-course-details small { display: block; white-space: normal; }
.team-course-details small { margin-top: 2px; color: var(--muted); }
.team-course-details em { font-style: normal; }
.team-score-strip .score-mini.personnel { border-top: 4px solid #f59e0b; }
.team-score-strip .score-mini.product { border-top: 4px solid #16a34a; }
.team-score-strip .score-mini.sales { border-top: 4px solid #ef3340; }
.team-score-strip .score-mini.process { border-top: 4px solid #2563eb; }
.team-score-strip .score-mini.personnel b { color: #a65f00; }
.team-score-strip .score-mini.product b { color: #117a38; }
.team-score-strip .score-mini.sales b { color: #c91e2d; }
.team-score-strip .score-mini.process b { color: #1d55b6; }

.user-directory-filters {
  display: grid;
  grid-template-columns: minmax(260px, 1.4fr) repeat(6, minmax(150px, .7fr));
  gap: 10px;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f6f8fa;
}
.user-directory-filters > label:not(.search-box) { display: grid; gap: 4px; }
.user-directory-filters > label > span { color: var(--muted); font-size: 11px; font-weight: 850; }
.user-directory-filters select { min-height: 42px; padding: 8px 10px; }
.admin-module { display: grid; gap: 16px; }
.admin-module-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(135deg, #10161d, #202a34 62%, #6e1017);
  box-shadow: var(--shadow);
}
.admin-module-hero h2 { margin: 8px 0 6px; font-size: 34px; }
.admin-module-hero p { max-width: 900px; margin: 0; color: #f2d7d8; }
.admin-filters { align-items: end; }
.admin-bulk-bar {
  display: grid;
  grid-template-columns: minmax(160px, .45fr) auto minmax(240px, .8fr) minmax(300px, 1fr) minmax(300px, 1fr) minmax(220px, .7fr);
  gap: 9px;
  align-items: end;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid #dfe5e8;
  border-radius: 10px;
  background: #fbfcfd;
}
.bulk-selected { display: grid; gap: 2px; }
.bulk-selected span { color: var(--muted); font-size: 11px; }
.bulk-inline-form { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(150px, 1fr) auto; gap: 8px; align-items: end; }
.bulk-inline-form.compact { grid-template-columns: minmax(180px, 1fr) auto; }
.bulk-inline-form label { display: grid; gap: 4px; }
.bulk-inline-form label > span { color: var(--muted); font-size: 11px; font-weight: 900; }
.bulk-inline-form select,
.bulk-inline-form .input { min-height: 36px; padding: 6px 9px; }
.bulk-export-group { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.table-sort { padding: 0; border: 0; color: inherit; background: transparent; font: inherit; font-weight: 950; text-transform: inherit; }
.table-sort span { color: var(--red); }
.pill-list { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.pill-list span { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 4px 7px; border-radius: 999px; color: #26323a; background: #eef2f6; font-size: 11px; font-weight: 850; }
.progress-cell { display: grid; grid-template-columns: 72px 38px; gap: 7px; align-items: center; }
.progress-cell .progress { height: 8px; }
.progress-cell b { font-size: 12px; }
.employee-row { cursor: pointer; }
.employee-row.is-readonly { cursor: default; }
.user-editor-card[open] { display: grid; gap: 14px; }
.user-editor-card summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; }
.user-editor-card summary h2 { margin: 0; }
.user-editor-card summary span { color: var(--muted); font-size: 12px; font-weight: 850; }
.employee-card-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(10, 16, 22, .58);
}
.employee-card-panel {
  width: min(1040px, 100%);
  max-height: min(860px, calc(100vh - 48px));
  overflow: auto;
  padding: 24px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.45);
  background: #fff;
  box-shadow: 0 24px 70px rgba(0,0,0,.28);
}
body > .employee-card-modal { z-index: 13000; }
.employee-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 14px 0; }
.employee-card-grid section,
.employee-card-edit {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #f8fafb;
}
.employee-card-grid h3 { margin: 0 0 8px; }
.employee-card-grid dl { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 7px 10px; margin: 0; }
.employee-card-grid dt { color: var(--muted); font-size: 12px; font-weight: 850; }
.employee-card-grid dd { margin: 0; font-weight: 800; }
.employee-card-assignments { display: grid; gap: 6px; }
.employee-card-assignments article { display: flex; justify-content: space-between; gap: 8px; padding: 8px; border-radius: 7px; background: #fff; }
.employee-card-edit { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.employee-card-edit label { display: grid; gap: 5px; }
.employee-card-edit label > span { color: var(--muted); font-size: 11px; font-weight: 900; }
.employee-card-edit .actions { grid-column: 1 / -1; }
.user-bulk-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}
.user-bulk-toolbar > span:first-child { min-width: 105px; font-weight: 850; }
.user-bulk-toolbar select { width: auto; min-width: 220px; min-height: 36px; padding: 6px 9px; }
.user-bulk-spacer { flex: 1 1 30px; }
.user-select-cell { width: 42px; text-align: center; }
.user-select-cell input { width: 17px; height: 17px; accent-color: var(--red); }
.temporary-credential { display: grid; gap: 10px; margin-top: 12px; }
.temporary-credential p { margin: 0; }
.temporary-credential-value {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(7, 112, 68, .24);
  border-radius: 8px;
  background: #fff;
}
.temporary-credential-value code {
  flex: 1 1 180px;
  min-width: 0;
  padding: 7px 9px;
  overflow-wrap: anywhere;
  border-radius: 6px;
  color: var(--ink);
  background: #eef8f2;
  font-size: 16px;
  font-weight: 900;
}
.user-pagination {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  color: var(--muted);
}
.user-pagination label { display: flex; align-items: center; gap: 7px; }
.user-pagination select { width: auto; min-height: 34px; padding: 5px 8px; }
.block-access-row { border-left: 4px solid var(--block-accent); padding-left: 10px; }

@keyframes martinTransfer {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0); }
  50% { transform: translate3d(0, -7px, 0) rotate(1deg); }
}
@keyframes martinSidebar {
  0%, 100% { transform: translateY(0) rotate(0); }
  48% { transform: translateY(-5px) rotate(-.7deg); }
  52% { transform: translateY(-5px) rotate(.7deg); }
}
@keyframes martinNudge {
  0%, 88%, 100% { transform: translateY(0); }
  92% { transform: translateY(-5px); }
  96% { transform: translateY(0); }
}

@media (max-width: 1180px) {
  .user-directory-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-bulk-bar { grid-template-columns: 1fr; }
  .bulk-inline-form,
  .bulk-inline-form.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .employee-card-edit,
  .preview-as-employee-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .transfer-banner { grid-template-columns: 1fr; padding: 22px 18px; background: linear-gradient(180deg, #fff 0 62%, #edf3f6 62% 100%); }
  .transfer-banner.instructions { background: linear-gradient(180deg, #fff 0 62%, #fff3e4 62% 100%); }
  .transfer-banner img { max-height: 190px; }
  .profile-avatar-controls { justify-content: flex-start; }
  .profile-avatar-controls small { text-align: left; }
  .team-store-tools { display: grid; grid-template-columns: 1fr; }
  .team-store-tools .search-box,
  .team-store-tools .team-compact-filter,
  .team-store-tools .btn,
  .team-store-tools .team-result-count { width: 100%; min-width: 0; }
  .team-course-details > div { width: min(400px, 80vw); }
  .user-directory-filters { grid-template-columns: 1fr; }
  .admin-module-hero { display: grid; }
  .bulk-inline-form,
  .bulk-inline-form.compact,
  .employee-card-grid,
  .employee-card-edit,
  .wizard-steps,
  .preview-as-employee-form,
  .preview-as-employee-results { grid-template-columns: 1fr; }
  .employee-card-modal { padding: 10px; }
  .employee-card-panel { max-height: calc(100vh - 20px); padding: 16px; }
  .employee-card-grid dl { grid-template-columns: 1fr; }
  .bulk-export-group,
  .media-action-buttons,
  .material-type-chooser { display: grid; grid-template-columns: 1fr; }
  .bulk-export-group .btn,
  .media-action-buttons .btn,
  .material-type-chooser button { width: 100%; }
  .user-bulk-toolbar { align-items: stretch; }
  .user-bulk-toolbar select,
  .user-bulk-toolbar .btn { width: 100%; }
  .user-bulk-spacer { display: none; }
  .user-pagination { justify-content: space-between; flex-wrap: wrap; }
  .user-pagination > span { order: -1; width: 100%; text-align: center; }
  .temporary-credential-value { align-items: stretch; }
  .temporary-credential-value .btn { width: 100%; }

  .team-store-table,
  .team-employee-table,
  .user-table { overflow: visible; }
  .team-store-table table,
  .team-store-table tbody,
  .team-employee-table table,
  .team-employee-table tbody,
  .user-table table,
  .user-table tbody { display: block; width: 100%; min-width: 0 !important; }
  .team-store-table thead,
  .team-employee-table thead,
  .user-table thead {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  .team-store-table tbody,
  .team-employee-table tbody,
  .user-table tbody { display: grid; gap: 10px; }
  .team-store-table tr,
  .team-employee-table tr,
  .user-table tr {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 7px 20px rgba(6, 16, 22, .05);
  }
  .team-store-table td,
  .team-employee-table td,
  .user-table td {
    display: block;
    min-width: 0;
    padding: 0 !important;
    border: 0 !important;
    white-space: normal;
  }
  .team-store-table td[data-label]::before,
  .team-employee-table td[data-label]::before,
  .user-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .03em;
    text-transform: uppercase;
  }
  .team-store-table td:first-child,
  .team-store-table td:last-child,
  .team-employee-table td:first-child,
  .team-employee-table td:nth-child(9),
  .team-employee-table td:last-child,
  .user-table td:nth-child(2),
  .user-table td:last-child { grid-column: 1 / -1; }
  .team-store-table td:last-child .btn,
  .user-table td:last-child .actions,
  .user-table td:last-child .btn { width: 100%; }
  .team-course-details { min-width: 0; }
  .team-course-details > div { width: 100%; }
  .user-table .user-select-cell { position: absolute; top: 14px; right: 14px; width: auto; z-index: 1; }
  .user-table td:nth-child(2) { padding-right: 32px !important; }
  .martin-companion { right: 12px; bottom: 12px; }
  .martin-companion.is-open { width: min(290px, calc(100vw - 24px)); }
}

@media (prefers-reduced-motion: reduce) {
  .martin-companion,
  .martin-panel .martin-sidebar,
  .transfer-banner img { animation: none !important; }
}

/* Keep wide administrative data inside the workspace at every viewport. */
html,
body { max-width: 100%; overflow-x: hidden; }
.app-shell { width: 100%; max-width: 100vw; }
.main,
#view,
.card,
.admin-tab-panel,
.admin-user-layout,
.user-list-card,
.test-admin-layout,
.test-admin-workspace,
.test-question-list,
.team-overview-card,
.team-detail-card { min-width: 0; max-width: 100%; }
.grid > *,
.test-admin-layout > *,
.admin-user-layout > * { min-width: 0; }
.table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}
.user-table table { min-width: 1480px; }
.admin-section-tabs { max-width: 100%; }

@media (max-width: 1180px) {
  .admin-user-layout,
  .test-admin-layout { grid-template-columns: minmax(0, 1fr); }
  .test-admin-list {
    position: relative;
    top: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .question-edit-form .form-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .test-admin-list { grid-template-columns: minmax(0, 1fr); }
  .card { padding-inline: 16px; }
}

/* Welcome, contextual Martin help and accessible employee testing. */
.welcome-hero,
.attestation-motivation {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(240px, .65fr);
  gap: clamp(22px, 4vw, 54px);
  margin-bottom: 18px;
  padding: clamp(24px, 4vw, 52px);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  color: #fff;
  background: #111820;
  box-shadow: 0 24px 64px rgba(6,16,22,.17);
  animation: surfaceReveal .32s ease both;
}
.welcome-copy,
.attestation-motivation-copy { position: relative; z-index: 1; align-self: center; }
.welcome-greeting,
.attestation-motivation .eyebrow {
  display: inline-flex;
  margin-bottom: 12px;
  color: #ffb8bb;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.welcome-hero h2,
.attestation-motivation h2 {
  max-width: 820px;
  margin: 0;
  font-size: clamp(32px, 4.5vw, 64px);
  line-height: .98;
  letter-spacing: -.035em;
}
.welcome-hero p,
.attestation-motivation p {
  max-width: 760px;
  margin: 18px 0 0;
  color: #d9e1e6;
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.55;
}
.welcome-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.welcome-actions .btn { min-width: 180px; }
.welcome-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}
.welcome-facts span {
  min-width: 118px;
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px;
  color: #bcc8cf;
  background: rgba(255,255,255,.055);
  font-size: 12px;
}
.welcome-facts b { color: #fff; font-size: 23px; line-height: 1; }
.welcome-martin,
.attestation-motivation-art {
  position: relative;
  z-index: 1;
  min-height: 290px;
  display: grid;
  align-content: end;
  justify-items: center;
}
.welcome-martin img,
.attestation-motivation-art img {
  width: min(100%, 330px);
  max-height: 320px;
  object-fit: contain;
  filter: drop-shadow(0 22px 28px rgba(0,0,0,.35));
}
.welcome-martin > div,
.attestation-motivation-art > div {
  width: min(100%, 290px);
  display: grid;
  gap: 2px;
  margin-top: -18px;
  padding: 11px 14px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 8px;
  color: #fff;
  background: rgba(8,12,16,.84);
  text-align: center;
}
.welcome-martin span,
.attestation-motivation-art span { color: #c9d3d9; font-size: 12px; }
.welcome-grid { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 16px; }
.profile-checklist { display: grid; gap: 9px; }
.profile-check-item {
  display: grid;
  grid-template-columns: 40px minmax(0,1fr);
  gap: 11px;
  align-items: center;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafb;
}
.profile-check-item > span {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #59646d;
  background: #e7ecef;
  font-weight: 950;
}
.profile-check-item.done { border-color: #a9dfbc; background: #f1fbf5; }
.profile-check-item.done > span { color: #fff; background: var(--good); }
.profile-check-item div { display: grid; gap: 3px; }
.profile-check-item small,
.profile-check-note { color: var(--muted); line-height: 1.4; }
.profile-check-note { margin: 13px 0 0; font-size: 12px; }
.mastery-card > p { margin: 0 0 20px; }
.mastery-line {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mastery-line li {
  position: relative;
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 9px;
  padding: 0 7px;
  text-align: center;
}
.mastery-line li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 19px;
  left: calc(50% + 20px);
  width: calc(100% - 40px);
  height: 3px;
  background: #dfe5e8;
}
.mastery-line li.done:not(:last-child)::after { background: var(--good); }
.mastery-line li > span {
  position: relative;
  z-index: 1;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 2px solid #d3dade;
  border-radius: 50%;
  color: #68737b;
  background: #fff;
  font-weight: 950;
}
.mastery-line li.done > span { border-color: var(--good); color: #fff; background: var(--good); }
.mastery-line li.current > span { border-color: #c9141d; color: #fff; background: #c9141d; box-shadow: 0 0 0 5px rgba(201,20,29,.12); }
.mastery-line li div { min-width: 0; display: grid; gap: 3px; }
.mastery-line li b { font-size: 13px; }
.mastery-line li small { color: var(--muted); font-size: 11px; line-height: 1.3; }
.mastery-line li.future { opacity: .62; }

.attestation-motivation { grid-template-columns: minmax(0,1.3fr) minmax(220px,.7fr); }
.attestation-motivation h2 { font-size: clamp(30px, 4vw, 54px); }
.attestation-motivation-copy .btn,
.attestation-motivation-copy .badge { margin-top: 24px; }
.attestation-mastery {
  grid-column: 1 / -1;
  padding: 18px 16px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 9px;
  background: rgba(255,255,255,.055);
}
.attestation-mastery .mastery-line li:not(:last-child)::after { background: rgba(255,255,255,.2); }
.attestation-mastery .mastery-line li.done:not(:last-child)::after { background: #55c982; }
.attestation-mastery .mastery-line li > span { border-color: rgba(255,255,255,.35); color: #fff; background: #111820; }
.attestation-mastery .mastery-line li.done > span { border-color: #55c982; background: #16824a; }
.attestation-mastery .mastery-line li.current > span { border-color: #ff5960; background: #c9141d; }
.attestation-mastery .mastery-line li small { color: #bfcbd2; }

.martin-disclosure {
  position: fixed;
  right: 18px;
  bottom: 100px;
  z-index: 32;
  width: min(390px, calc(100vw - 36px));
  max-height: min(620px, calc(100dvh - 126px));
  overflow: auto;
  padding: 20px;
  border: 1px solid #cad4da;
  border-radius: 12px;
  color: var(--ink);
  background: #fff;
  box-shadow: 0 28px 70px rgba(6,16,22,.28);
  outline: none;
}
.martin-disclosure.is-open { animation: martinPanelIn .2s ease both; }
.martin-disclosure-head {
  display: grid;
  grid-template-columns: 64px minmax(0,1fr);
  gap: 12px;
  align-items: center;
  padding-right: 32px;
}
.martin-disclosure-head img { width: 64px; height: 64px; object-fit: contain; border-radius: 50%; background: #111820; }
.martin-disclosure-head span { color: var(--red-dark); font-size: 11px; font-weight: 950; letter-spacing: .06em; text-transform: uppercase; }
.martin-disclosure h2 { margin: 4px 0 0; font-size: 21px; line-height: 1.1; }
.martin-disclosure > p { margin: 16px 0 12px; color: var(--muted); line-height: 1.5; }
.martin-disclosure ol { display: grid; gap: 8px; margin: 0 0 18px; padding-left: 24px; }
.martin-disclosure li { padding-left: 4px; line-height: 1.4; }
.martin-disclosure .btn { width: 100%; }
.martin-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #4d5961;
  background: transparent;
  font-size: 27px;
  line-height: 1;
}
.martin-close:hover { color: var(--red-dark); background: #f3f5f7; }

.question-media {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 12px;
}
.question-media-item {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #f7f9fa;
}
.question-media-frame {
  position: relative;
  width: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 6px;
  background: linear-gradient(145deg, #fbf7ef, #fff);
}
.question-media-item.video .question-media-frame {
  aspect-ratio: 16 / 9;
  background: #0d1115;
}
.question-media-frame img {
  width: 100%;
  height: auto;
  max-height: none;
  display: block;
  object-fit: contain;
  background: transparent;
}
.answer-options-media {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 12px;
}
.answer-option-card.has-media {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: start;
  gap: 10px 12px;
}
.answer-option-card.has-media .answer-option-key { grid-column: 1; grid-row: 1; }
.answer-option-card.has-media .answer-option-media { grid-column: 1 / -1; grid-row: 2; }
.answer-option-card.has-media .answer-option-copy { grid-column: 2; grid-row: 1; }
.answer-option-media,
.answer-option-media-zoom {
  display: grid;
  place-items: center;
  width: min(100%, 220px);
  margin: 0;
  padding: 0;
  border: 0;
  background: #f4f7f8;
  border-radius: 8px;
  overflow: hidden;
  cursor: zoom-in;
}
.answer-option-media-zoom {
  aspect-ratio: 1 / 1;
}
.answer-option-media img,
.answer-option-media-zoom img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  background: #fff;
}
.bank-option-media-field {
  min-width: 0;
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 12px;
  border: 1px solid #e0e5e8;
  border-radius: 10px;
  background: #f8fafb;
}
.bank-option-media-preview {
  display: grid;
  grid-template-columns: minmax(112px, 160px) minmax(0, 1fr);
  gap: 10px;
  align-items: end;
}
.bank-option-media-frame {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
}
.bank-option-media-frame img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
.bank-option-media-actions,
.bank-option-media-empty {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.bank-option-media-preview[hidden],
.bank-option-media-empty[hidden] {
  display: none !important;
}
.bank-option-media-format,
.bank-option-media-status {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.bank-option-media-status {
  min-height: 17px;
  color: #2d7044;
  font-weight: 750;
}
.bank-choice-row.is-uploading .bank-option-media-field {
  pointer-events: none;
  opacity: .68;
}
.question-media-frame video {
  width: 100%;
  height: 100%;
  max-height: 620px;
  display: block;
  object-fit: contain;
  background: #0d1115;
}
.media-load-fallback {
  width: 100%;
  height: 100%;
  min-height: 150px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  padding: 18px;
  color: #fff;
  background: #111820;
  text-align: center;
}
.media-load-fallback[hidden] { display: none; }
.media-load-fallback span { max-width: 340px; color: #c6d0d6; font-size: 12px; line-height: 1.4; }
.media-load-fallback a { color: #fff; font-size: 12px; font-weight: 900; text-decoration: underline; text-underline-offset: 3px; }
.media-load-fallback a:focus-visible { outline-color: #fff; }
.question-media-frame.is-error { border: 1px dashed #70808a; }
.question-media-frame.is-zoomable { cursor: zoom-in; }
.question-media-frame.is-zoomable:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}
.question-media-lightbox {
  position: fixed;
  inset: 0;
  z-index: 14000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(10, 16, 22, .84);
}
body.question-media-lightbox-open { overflow: hidden; }
.question-media-lightbox-panel {
  position: relative;
  width: min(96vw, 1400px);
  max-height: 96dvh;
}
.question-media-lightbox-panel img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 96dvh;
  margin: 0 auto;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .35);
  background: #fff;
}
.question-media-lightbox-close {
  position: absolute;
  top: -12px;
  right: -12px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  font-size: 27px;
  line-height: 1;
  background: rgba(17, 24, 29, .92);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .28);
  cursor: pointer;
}
.question-media-lightbox-close:hover { background: var(--red-dark); }
.question-media-lightbox-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.question-media-item figcaption { color: var(--muted); font-size: 12px; line-height: 1.4; }
.question-media-item.resource a {
  min-height: 88px;
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 16px;
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  text-decoration: none;
}
.question-media-item.resource a:hover { background: #f1f4f5; }
.question-media-item.resource svg { width: 28px; height: 28px; flex: 0 0 auto; fill: currentColor; }
.question-media-item.resource span { display: grid; gap: 3px; }
.question-media-item.resource small { color: var(--muted); }
.text-answer { display: grid; gap: 7px; }
.text-answer > span { color: #4f5b63; font-size: 13px; font-weight: 850; }
.text-answer textarea { min-height: 150px; line-height: 1.5; }
.matching-answer-grid { display: grid; gap: 10px; }
.matching-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) 34px minmax(0,1fr);
  gap: 10px;
  align-items: center;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafb;
}
.matching-prompt { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 10px; align-items: center; }
.matching-prompt > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 6px; color: #fff; background: #111820; font-weight: 900; }
.matching-arrow { display: grid; place-items: center; color: var(--red-dark); }
.matching-arrow svg { width: 24px; height: 24px; fill: currentColor; }
.matching-select select { min-height: 44px; }
.test-status:empty { display: none; }
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.btn.small,
.nav button { min-height: 44px; }
.icon-btn,
.correct-option,
.test-question-dots button { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
.option-editor-row { grid-template-columns: 44px minmax(0,1fr) 44px; }
.btn.primary,
.btn.glass { background: #c9141d; }
.btn.primary:hover,
.btn.glass:hover { background: #aa0f17; }
.welcome-hero .btn.glass {
  border-color: rgba(255,255,255,.72);
  color: #111820;
  background: #fff;
  box-shadow: none;
}
.welcome-hero .btn.glass:hover { border-color: #fff; color: #111820; background: #eef3f5; }
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid #00758a;
  outline-offset: 3px;
}
.topbar h1[tabindex="-1"]:focus { outline: none; }
.sidebar :where(button, a, input, select, textarea, [tabindex]):focus-visible,
.welcome-hero :where(button, a):focus-visible,
.attestation-motivation :where(button, a):focus-visible { outline-color: #fff; }
.answer-option:focus-within,
.matching-row:focus-within { border-color: #00758a; box-shadow: 0 0 0 3px rgba(0,117,138,.14); }

@keyframes surfaceReveal {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes martinPanelIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 980px) {
  .welcome-hero,
  .attestation-motivation { grid-template-columns: minmax(0,1fr) minmax(190px,.48fr); }
  .welcome-grid { grid-template-columns: 1fr; }
  .welcome-martin,
  .attestation-motivation-art { min-height: 220px; }
}

@media (max-width: 760px) {
  .sidebar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255,255,255,.12);
  }
  .brand-lockup { display: block; padding: 0; }
  .sidebar .logo span:last-child { display: none; }
  .sidebar .logo-mark { width: 44px; height: 44px; }
  .nav {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    padding: 0 0 3px;
  }
  .nav button { flex: 0 0 auto; min-width: 142px; min-height: 44px; }
  .main { padding: 14px 12px calc(112px + env(safe-area-inset-bottom)); }
  .welcome-hero,
  .attestation-motivation { grid-template-columns: 1fr; gap: 20px; padding: 24px 18px; }
  .welcome-hero h2,
  .attestation-motivation h2 { font-size: clamp(31px, 10vw, 43px); }
  .welcome-actions { display: grid; grid-template-columns: 1fr; }
  .welcome-actions .btn { width: 100%; }
  .welcome-facts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
  .welcome-facts span { min-width: 0; padding: 9px 7px; text-align: center; }
  .welcome-martin,
  .attestation-motivation-art { min-height: 0; }
  .welcome-martin img,
  .attestation-motivation-art img { max-height: 230px; }
  .attestation-mastery { padding: 16px 12px; }
  .mastery-line { grid-template-columns: 1fr; gap: 12px; }
  .mastery-line li { min-height: 46px; grid-template-columns: 44px minmax(0,1fr); justify-items: start; align-items: center; padding: 0; text-align: left; }
  .mastery-line li:not(:last-child)::after { top: 40px; bottom: -16px; left: 20px; width: 3px; height: auto; }
  .mastery-line li div { gap: 1px; }
  .martin-companion { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); min-width: 68px; min-height: 68px; }
  .martin-disclosure { right: 12px; bottom: calc(92px + env(safe-area-inset-bottom)); width: calc(100vw - 24px); max-height: calc(100dvh - 164px); }
  .matching-row { grid-template-columns: 1fr; gap: 8px; }
  .matching-arrow { transform: rotate(90deg); }
  .question-media { grid-template-columns: 1fr; }
  .test-step-actions { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .welcome-hero,
  .attestation-motivation,
  .martin-disclosure.is-open { animation: none !important; }
  .answer-option,
  .att-card-art img { transition: none !important; transform: none !important; }
}

/* Question bank and media-library workspace. */
.welcome-hero {
  min-height: 520px;
  display: block;
  padding: clamp(30px, 5vw, 66px);
  border-color: #dfe4e8;
  color: var(--ink);
  background: #fff;
  box-shadow: 0 20px 58px rgba(17,20,23,.09);
}
.welcome-hero-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}
.welcome-hero .welcome-copy { max-width: 51%; color: var(--ink); }
.welcome-hero .welcome-greeting { color: var(--red-dark); }
.welcome-hero h2 { color: var(--ink); font-size: clamp(38px, 4.8vw, 68px); }
.welcome-hero p { color: #56616a; }
.welcome-hero .welcome-facts span { border-color: #dbe2e6; color: #5f6971; background: rgba(255,255,255,.9); }
.welcome-hero .welcome-facts b { color: var(--ink); }
.welcome-hero .btn.glass { border-color: #c9141d; color: #a80e16; background: rgba(255,255,255,.88); }
.welcome-hero .btn.glass:hover { border-color: #a80e16; color: #8d0b12; background: #fff; }
.welcome-role { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 17px; color: #354047; font-size: 13px; }
.welcome-role b { color: var(--red-dark); }
.welcome-role span { color: var(--muted); }

.question-toolkit-banner {
  min-height: 370px;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(360px,.95fr);
  align-items: stretch;
  gap: 16px;
  margin-bottom: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 52px rgba(17,20,23,.08);
  animation: surfaceReveal .3s ease both;
}
.question-toolkit-copy { position: relative; z-index: 1; align-self: center; padding: clamp(28px,4vw,56px); padding-right: 10px; }
.question-toolkit-copy h2 { max-width: 720px; margin: 0; font-size: clamp(34px,4vw,58px); line-height: 1; letter-spacing: -.035em; }
.question-toolkit-copy p { max-width: 700px; margin: 18px 0 0; color: var(--muted); font-size: 16px; line-height: 1.55; }
.question-toolkit-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.question-toolkit-counts { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 24px; color: var(--muted); font-size: 12px; }
.question-toolkit-counts span { display: flex; align-items: baseline; gap: 5px; }
.question-toolkit-counts b { color: var(--ink); font-size: 21px; }
.question-toolkit-banner > img { width: 100%; height: 100%; min-height: 370px; display: block; object-fit: cover; object-position: 62% center; mix-blend-mode: multiply; }

.question-admin-tabs {
  position: sticky;
  top: 0;
  z-index: 12;
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  padding: 6px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 28px rgba(17,20,23,.07);
  backdrop-filter: blur(14px);
}
.question-admin-tabs button {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 10px 15px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: #4f5a62;
  background: transparent;
  font-size: 13px;
  font-weight: 900;
}
.credential-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(10, 15, 20, .72);
  backdrop-filter: blur(8px);
}
.credential-dialog {
  position: relative;
  display: grid;
  gap: 16px;
  width: min(560px, 100%);
  padding: clamp(24px, 5vw, 40px);
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .32);
}
.credential-dialog h2,
.credential-dialog p { margin: 0; }
.credential-dialog .temporary-credential-value { padding: 14px; border-radius: 14px; background: #f7faf8; }
.credential-dialog-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: #111820;
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
}
.question-admin-tabs button:hover { color: var(--ink); background: #f1f4f5; }
.question-admin-tabs button.active { border-color: #111820; color: #fff; background: #111820; }

.question-bank-toolbar,
.media-library-toolbar {
  display: grid;
  grid-template-columns: minmax(240px,1fr) repeat(5, minmax(140px,.45fr)) auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}
.question-bank-toolbar > label:not(.search-box),
.media-library-toolbar > label:not(.search-box),
.bank-question-basics > label,
.bank-question-text,
.bank-question-explanation,
.bank-answer-row > label:not(.bank-correct-control),
.bank-assignment-values > label,
.bank-rule-row > label:not(.bank-rule-active),
.media-library-basics > label,
.media-library-editor-card form > label {
  display: grid;
  gap: 6px;
}
.question-bank-toolbar label > span,
.media-library-toolbar label > span,
.bank-question-editor-card label > span,
.bank-rule-row label > span,
.media-library-editor-card label > span {
  color: #56616a;
  font-size: 12px;
  font-weight: 850;
}
.question-bank-layout,
.media-library-layout { display: grid; grid-template-columns: minmax(280px, .34fr) minmax(0,1fr); gap: 14px; align-items: start; }
.question-bank-list,
.media-library-list { position: sticky; top: 72px; max-height: calc(100dvh - 102px); padding: 12px; overflow: auto; }
.question-bank-list-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 4px 11px; }
.question-bank-list-head h2 { margin: 0; font-size: 21px; }
.question-bank-list-head > span { min-width: 34px; padding: 5px 8px; border-radius: 999px; color: #fff; background: #111820; text-align: center; font-size: 12px; font-weight: 900; }
#questionBankItems,
#mediaLibraryItems { display: grid; gap: 7px; }
.admin-collection-pagination {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}
.admin-collection-pagination > div { display: flex; justify-content: space-between; gap: 8px; }
.admin-collection-pagination .btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.admin-collection-pagination svg { width: 16px; height: 16px; fill: currentColor; }
.admin-collection-pagination .pagination-back svg { transform: rotate(180deg); }
.bank-question-list-item,
.media-library-item {
  width: 100%;
  min-height: 92px;
  display: grid;
  gap: 7px;
  padding: 12px;
  border: 1px solid #e0e5e8;
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  text-align: left;
}
.bank-question-list-item:hover,
.media-library-item:hover { border-color: #bcc7cd; background: #f8fafb; }
.bank-question-list-item.active,
.media-library-item.active { border-color: #c9141d; background: #fff5f5; box-shadow: inset 3px 0 0 #c9141d; }
.status-unused,
.bank-question-list-item.status-unused {
  border-color: #facc15;
  background: #fffbeb;
}
.bank-question-list-item.status-unused.active { box-shadow: inset 3px 0 0 #f59e0b; }
.bank-question-list-meta { display: flex; justify-content: space-between; gap: 8px; color: var(--red-dark); font-size: 10px; text-transform: uppercase; }
.bank-question-list-meta small { color: var(--muted); }
.bank-question-list-item > strong { display: -webkit-box; overflow: hidden; font-size: 14px; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.bank-question-list-stats { color: var(--muted); font-size: 11px; }

.bank-question-editor-card,
.media-library-editor-card { padding: clamp(18px,2.5vw,30px); }
.bank-question-editor-card .section-head p,
.media-library-editor-card .section-head p { margin: 5px 0 0; color: var(--muted); }
.scoped-question-bank-shell { display: grid; gap: 14px; }
.scoped-question-bank-context {
  display: grid;
  gap: 5px;
  padding: 16px 18px;
  border: 1px solid #dfe5e8;
  border-left: 4px solid #111820;
  border-radius: 10px;
  background: #f8fafb;
}
.scoped-question-bank-context > span { color: var(--red-dark); font-size: 11px; font-weight: 950; letter-spacing: .04em; text-transform: uppercase; }
.scoped-question-bank-context h2,
.scoped-question-bank-context p { margin: 0; }
.scoped-question-bank-context p { color: var(--muted); line-height: 1.5; }
.scoped-question-bank-workspace { width: min(100%, 1080px); }
.scoped-question-editor-notice { display: grid; gap: 3px; margin-bottom: 14px; }
.scoped-question-editor-notice span { font-size: 12px; line-height: 1.45; }
.material-type-chooser {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
  padding: 10px;
  border: 1px solid #dfe5e8;
  border-radius: 10px;
  background: #fbfcfd;
}
.material-type-chooser button {
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  font-weight: 900;
}
.material-type-chooser button.active,
.material-type-chooser button:hover { border-color: var(--red); color: #fff; background: var(--red); }
.wizard-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 14px;
}
.wizard-steps span {
  min-height: 42px;
  display: grid;
  place-items: center;
  padding: 8px;
  border: 1px solid #dfe5e8;
  border-radius: 8px;
  color: #39454d;
  background: #f7f9fa;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}
.wizard-steps span.active { border-color: #111820; color: #fff; background: #111820; }
.wizard-steps span.skipped { border-style: dashed; color: var(--muted); }
.media-action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px;
  border: 1px solid #dfe5e8;
  border-radius: 8px;
  background: #fff;
}
.bank-block-owned-field {
  display: grid;
  align-content: center;
  gap: 5px;
  min-height: 74px;
  padding: 10px 12px;
  border: 1px solid #dfe5e8;
  border-radius: 8px;
  background: #f7f9fa;
}
.bank-block-owned-field > span { color: #56616a; font-size: 12px; font-weight: 850; }
.bank-block-owned-field > b { font-size: 13px; }
.bank-question-basics,
.media-library-basics { display: grid; grid-template-columns: minmax(220px,1fr) minmax(110px,.35fr) minmax(140px,.4fr); gap: 10px; }
.bank-question-text textarea { min-height: 110px; font-size: 17px; line-height: 1.5; }
.bank-question-explanation textarea { min-height: 90px; }
.bank-answer-editor,
.bank-assignment-editor,
.bank-media-picker {
  min-width: 0;
  margin: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #f8fafb;
}
.bank-answer-editor legend,
.bank-assignment-editor legend,
.bank-media-picker legend { padding: 0 7px; font-size: 16px; font-weight: 950; }
.bank-answer-editor > p,
.bank-assignment-editor > p,
.bank-media-picker p { margin: 0 0 12px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.bank-answer-list { display: grid; gap: 8px; margin-bottom: 10px; }
.bank-answer-row {
  display: grid;
  gap: 9px;
  align-items: end;
  padding: 10px;
  border: 1px solid #dfe5e8;
  border-radius: 8px;
  background: #fff;
}
.bank-choice-row { grid-template-columns: 46px minmax(0,1fr) auto; }
.bank-text-row { grid-template-columns: minmax(0,1fr) auto; }
.bank-match-row { grid-template-columns: minmax(0,1fr) 32px minmax(0,1fr) auto; }
.bank-correct-control { align-self: end; width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; }
.bank-correct-control input { position: absolute; opacity: 0; pointer-events: none; }
.bank-correct-control > span { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid #cfd7dc; border-radius: 7px; color: #5e6971; background: #fff; font-weight: 950; }
.bank-correct-control:has(input:checked) > span { border-color: var(--good); color: #fff; background: var(--good); }
.bank-correct-control:focus-within > span { outline: 3px solid #00758a; outline-offset: 2px; }
.bank-match-arrow { align-self: end; height: 44px; display: grid; place-items: center; color: var(--red-dark); }
.bank-match-arrow svg { width: 23px; height: 23px; fill: currentColor; }

.bank-test-assignments { display: grid; gap: 9px; }
.bank-test-assignment { overflow: hidden; border: 1px solid #dbe2e6; border-radius: 9px; background: #fff; }
.bank-test-heading { min-height: 58px; display: grid; grid-template-columns: 24px minmax(0,1fr); gap: 10px; align-items: center; padding: 11px 13px; cursor: pointer; }
.bank-test-heading input { width: 20px; height: 20px; accent-color: #c9141d; }
.bank-test-heading > span { display: grid; gap: 2px; }
.bank-test-heading small { color: var(--muted); font-size: 11px; }
.bank-test-heading:has(input:checked) { background: #fff5f5; }
.bank-assignment-details { padding: 14px; border-top: 1px solid #e2e7ea; }
.bank-assignment-details[hidden] { display: none; }
.bank-assignment-values { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.bank-rule-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0 9px; }
.bank-rule-head > div { display: grid; gap: 2px; }
.bank-rule-head small { color: var(--muted); font-size: 11px; }
.bank-rule-list { display: grid; gap: 8px; }
.bank-rule-row { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 8px; align-items: end; padding: 11px; border: 1px solid #e0e5e8; border-radius: 8px; background: #f7f9fa; }
.bank-rule-row > label:nth-child(1),
.bank-rule-row > label:nth-child(2) { grid-column: span 3; }
.bank-rule-row > label:nth-child(3),
.bank-rule-row > label:nth-child(4),
.bank-rule-row > label:nth-child(5) { grid-column: span 2; }
.bank-rule-active { grid-column: span 4; min-height: 44px; display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; }
.bank-rule-active input { width: 20px; height: 20px; accent-color: #c9141d; }
.bank-rule-row .remove-bank-rule { grid-column: span 3; }

.bank-media-picker-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bank-media-picker-controls { display: flex; align-items: center; gap: 12px; margin: 10px 0; }
.bank-media-picker-controls .search-box { flex: 1 1 280px; margin: 0; }
.bank-media-picker-controls > span { flex: 0 0 auto; color: #56616a; font-size: 12px; font-weight: 850; }
.bank-media-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.bank-media-option { position: relative; min-width: 0; display: grid; grid-template-columns: 68px minmax(0,1fr); gap: 9px; align-items: center; padding: 8px; border: 1px solid #dfe5e8; border-radius: 8px; background: #fff; cursor: pointer; }
.bank-media-option > input { position: absolute; top: 7px; right: 7px; width: 20px; height: 20px; accent-color: #c9141d; }
.bank-media-option:has(input:checked) { border-color: #c9141d; background: #fff5f5; }
.bank-media-option > span:last-child { min-width: 0; display: grid; gap: 3px; padding-right: 16px; }
.bank-media-option b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.bank-media-option small { color: var(--muted); font-size: 10px; }
.bank-media-thumb,
.media-library-thumb { overflow: hidden; border-radius: 6px; background: #edf1f3; }
.bank-media-thumb { width: 68px; height: 54px; }
.admin-media-visual { position: relative; width: 100%; height: 100%; display: grid; place-items: center; overflow: hidden; background: #0d1115; }
.bank-media-thumb img,
.media-library-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; }
.admin-media-visual video { width: 100%; height: 100%; display: block; object-fit: contain; background: #0d1115; }
.admin-media-visual.compact .media-load-fallback { min-height: 0; padding: 4px; }
.admin-media-visual.compact .media-load-fallback b { font-size: 9px; }
.admin-media-visual.compact .media-load-fallback span,
.admin-media-visual.compact .media-load-fallback a { display: none; }
.admin-video-preview,
.admin-media-fallback { width: 100%; height: 100%; display: grid; place-items: center; align-content: center; gap: 3px; color: #fff; background: #111820; text-align: center; }
.admin-resource-preview {
  width: 100%;
  height: 100%;
  min-height: 76px;
  display: flex;
  gap: 9px;
  align-items: center;
  justify-content: center;
  padding: 10px;
  color: #fff;
  background: #26323a;
}
.admin-resource-preview svg { width: 26px; height: 26px; flex: 0 0 auto; fill: currentColor; }
.admin-resource-preview span { min-width: 0; display: grid; gap: 2px; }
.admin-resource-preview b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-resource-preview small { color: #cbd2d6; }
.admin-video-preview svg { width: 25px; height: 25px; fill: currentColor; }
.admin-video-preview span,
.admin-media-fallback span { font-size: 9px; }
.bank-editor-actions { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.preview-as-employee { display: grid; gap: 12px; margin-bottom: 14px; border-left: 4px solid #111820; }
.preview-as-employee-form { display: grid; grid-template-columns: minmax(220px, .6fr) minmax(150px, .25fr) auto; gap: 10px; align-items: end; }
.preview-as-employee-form label { display: grid; gap: 5px; }
.preview-as-employee-form label > span { color: var(--muted); font-size: 11px; font-weight: 900; }
.preview-as-employee-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.preview-as-employee-results article { padding: 12px; border: 1px solid #dfe5e8; border-radius: 8px; background: #f8fafb; }
.preview-as-employee-results b,
.preview-as-employee-results span { display: block; }
.preview-as-employee-results span { color: var(--muted); font-size: 12px; }
.preview-as-employee-results ul { margin: 8px 0 0; padding-left: 18px; color: #38444c; }

.media-library-item { grid-template-columns: 92px minmax(0,1fr); align-items: center; }
.media-library-thumb { width: 92px; height: 68px; }
.media-library-item > span:last-child { min-width: 0; display: grid; gap: 4px; }
.media-library-item b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-library-item small { color: var(--muted); font-size: 11px; }
.media-library-current-preview { width: 100%; max-height: 430px; aspect-ratio: 16 / 9; display: grid; place-items: center; overflow: hidden; margin-bottom: 16px; border: 1px solid var(--line); border-radius: 9px; background: #f4f6f7; }
.media-library-current-preview img,
.media-library-current-preview video { width: 100%; height: 100%; max-height: 430px; display: block; object-fit: contain; }
.media-library-basics { grid-template-columns: repeat(3,minmax(0,1fr)); }
.media-video-format-field[hidden],
.media-file-field[hidden] { display: none !important; }
.media-video-format-field small { color: var(--muted); font-size: 11px; line-height: 1.4; }
.media-library-editor-card label small { color: var(--muted); font-size: 11px; line-height: 1.4; }
.att-card-actions { display: grid; gap: 8px; }
.block-test-admin-layout { grid-template-columns: 260px minmax(0, 1fr); }
.block-composer-layout { min-width: 0; display: grid; gap: 14px; }
.block-settings-card { display: grid; gap: 14px; }
.block-settings-summary { align-items: flex-start; margin: 0; }
.block-settings-summary > div:first-child { min-width: 0; }
.block-settings-summary p,
.block-composer-intro p,
.block-assigned-heading p { max-width: 840px; margin: 5px 0 0; color: var(--muted); line-height: 1.5; }
.block-settings-metrics { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.block-settings-metrics span { min-width: 112px; display: grid; gap: 2px; padding: 10px 12px; border: 1px solid #dfe5e8; border-radius: 8px; color: var(--muted); background: #f7f9fa; font-size: 11px; text-align: right; }
.block-settings-metrics b { color: var(--ink); font-size: 20px; }
.block-settings-form { margin-top: 0; padding-top: 14px; border-top: 1px solid var(--line); }
.block-settings-form .toggle-line { align-self: end; }
.block-composer-intro { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.block-composer-intro > div { min-width: 0; }
.block-composer-intro h2 { margin: 8px 0 0; }
.block-composer-intro .btn { flex: 0 0 auto; }
.block-composer-workspace { min-width: 0; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(330px, .8fr); gap: 14px; align-items: start; }
.block-assigned-column { min-width: 0; display: grid; gap: 10px; }
.block-assigned-heading { align-items: flex-start; margin: 0; padding: 4px 2px; }
.block-assigned-heading > span { min-width: 36px; height: 36px; display: grid; place-items: center; border-radius: 999px; color: #fff; background: #111820; }
.block-question-assignment-list { min-width: 0; display: grid; gap: 10px; }
.block-question-picker-empty { display: grid; justify-items: start; gap: 5px; padding: 22px; color: var(--muted); }
.block-question-picker-empty b { color: var(--ink); }
.block-question-assignment { padding: 0; overflow: hidden; }
.block-question-assignment > summary { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 68px; padding: 13px 15px; cursor: pointer; list-style: none; }
.block-question-assignment > summary::-webkit-details-marker { display: none; }
.block-question-assignment[open] > summary { border-bottom: 1px solid var(--line); background: #fbfcfc; }
.block-question-number { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; background: #111820; font-size: 13px; font-weight: 950; }
.block-question-summary { min-width: 0; display: grid; gap: 4px; }
.block-question-summary b { overflow-wrap: anywhere; line-height: 1.35; }
.block-question-summary small,
.block-question-media-count { color: var(--muted); font-size: 11px; }
.block-question-media-count { padding: 6px 8px; border-radius: 999px; background: #eef2f4; white-space: nowrap; }
.block-question-assignment-form { display: grid; gap: 14px; padding: 16px; }
.block-question-explanation { display: grid; gap: 5px; padding: 11px 12px; border-left: 3px solid #111820; background: #f7f9fa; }
.block-question-explanation p { margin: 0; color: var(--muted); line-height: 1.5; }
.block-assignment-grid,
.block-tenure-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.block-assignment-grid label,
.block-tenure-grid label { display: grid; gap: 6px; }
.block-assignment-grid label > span,
.block-tenure-grid label > span { color: #38444c; font-size: 11px; font-weight: 900; }
.block-assignment-grid small,
.block-tenure-grid small { color: var(--muted); font-size: 10px; line-height: 1.4; }
.block-audience-editor { min-width: 0; display: grid; gap: 12px; margin: 0; padding: 14px; border: 1px solid #dce2e6; border-radius: 10px; background: #fbfcfc; }
.block-audience-editor > legend { padding: 0 7px; font-weight: 950; }
.block-audience-editor > p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.block-audience-unrestricted { display: grid; gap: 3px; padding: 11px 12px; border: 1px solid #d9e6dd; border-radius: 8px; background: #f4faf6; }
.block-audience-unrestricted[hidden] { display: none; }
.block-audience-unrestricted span { color: #55705d; font-size: 11px; }
.block-audience-list { display: grid; gap: 10px; }
.block-audience-group { min-width: 0; display: grid; gap: 12px; padding: 12px; border: 1px solid #dfe5e8; border-radius: 9px; background: #fff; }
.block-audience-group-head,
.block-position-selector-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.block-audience-group-head > div { min-width: 0; display: grid; gap: 2px; }
.block-audience-group-head small { color: var(--muted); font-size: 10px; }
.block-position-selector { min-width: 0; display: grid; gap: 8px; }
.block-position-selector-head > span { display: flex; flex-wrap: wrap; gap: 10px; }
.text-button { padding: 0; border: 0; color: #9d1018; background: transparent; font: inherit; font-size: 11px; font-weight: 900; cursor: pointer; }
.text-button:hover { text-decoration: underline; text-underline-offset: 3px; }
.block-position-checks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.block-position-checks label { min-width: 0; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; align-items: center; padding: 8px; border: 1px solid #e0e5e8; border-radius: 7px; background: #f8fafb; cursor: pointer; }
.block-position-checks label:has(input:checked) { border-color: #c9141d; background: #fff4f4; }
.block-position-checks input { width: 18px; height: 18px; accent-color: #c9141d; }
.block-position-checks label > span { min-width: 0; display: grid; gap: 2px; }
.block-position-checks b { font-size: 12px; }
.block-position-checks small { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.block-question-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 2px; }
.block-question-order-actions { display: flex; gap: 6px; }
.block-assignment-msg:empty,
#blockComposerMsg:empty { display: none; }
.block-question-picker { min-width: 0; display: grid; gap: 12px; position: sticky; top: 88px; max-height: calc(100vh - 104px); overflow: auto; }
.block-question-picker .section-head { align-items: flex-start; }
.block-question-picker .section-head p { margin: 5px 0 0; color: var(--muted); line-height: 1.45; }
.block-question-picker-toolbar { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(150px, .45fr); gap: 10px; align-items: end; }
.block-question-picker-toolbar > label:not(.search-box) { display: grid; gap: 6px; }
.block-question-picker-toolbar > label > span { color: var(--muted); font-size: 11px; font-weight: 900; }
.block-question-picker-toolbar select { width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 0 11px; }
.block-question-search { margin: 0; }
.block-question-picker-list { display: grid; gap: 7px; }
.block-question-picker-item { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px; border: 1px solid #e0e5e8; border-radius: 8px; background: #fff; }
.block-question-picker-item > div { min-width: 0; display: grid; gap: 5px; }
.block-question-picker-item b { overflow-wrap: anywhere; line-height: 1.35; }
.block-question-picker-item small { color: var(--muted); font-size: 10px; }

@media (max-width: 1380px) {
  .block-composer-workspace { grid-template-columns: minmax(0, 1fr); }
  .block-question-picker { position: relative; top: auto; max-height: none; overflow: visible; }
}

@media (max-width: 1180px) {
  .question-toolkit-banner { grid-template-columns: minmax(0,1fr) minmax(300px,.75fr); }
  .question-bank-layout,
  .media-library-layout { grid-template-columns: 270px minmax(0,1fr); }
  .bank-media-options { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .bank-rule-row > label:nth-child(1),
  .bank-rule-row > label:nth-child(2) { grid-column: span 6; }
  .bank-rule-row > label:nth-child(3),
  .bank-rule-row > label:nth-child(4),
  .bank-rule-row > label:nth-child(5) { grid-column: span 4; }
}

@media (max-width: 980px) {
  .welcome-hero { min-height: 500px; }
  .welcome-hero .welcome-copy { max-width: 57%; }
  .question-toolkit-banner { min-height: 320px; grid-template-columns: minmax(0,1fr) 300px; }
  .question-toolkit-banner > img { min-height: 320px; }
  .question-toolkit-copy { padding: 28px; }
  .question-bank-layout,
  .media-library-layout { grid-template-columns: 1fr; }
  .question-bank-list,
  .media-library-list { position: relative; top: auto; max-height: 370px; }
  .bank-question-basics { grid-template-columns: minmax(0,1fr) repeat(2,minmax(120px,.35fr)); }
}

@media (max-width: 760px) {
  .welcome-hero { min-height: 0; display: grid; padding: 24px 18px 0; }
  .welcome-hero .welcome-copy { max-width: none; }
  .welcome-hero h2 { font-size: clamp(34px,11vw,48px); }
  .welcome-hero-art { position: relative; inset: auto; width: calc(100% + 36px); height: auto; margin: 12px -18px 0; object-fit: contain; order: 2; }
  .welcome-role { margin-bottom: 0; }
  .question-toolkit-banner { grid-template-columns: 1fr; }
  .question-toolkit-copy { padding: 24px 18px 4px; }
  .question-toolkit-copy h2 { font-size: clamp(31px,9.5vw,44px); }
  .question-toolkit-actions { display: grid; grid-template-columns: 1fr; }
  .question-toolkit-actions .btn { width: 100%; }
  .question-toolkit-counts { justify-content: space-between; gap: 8px; }
  .question-toolkit-banner > img { min-height: 0; height: auto; max-height: 320px; object-fit: cover; object-position: center; }
  .question-admin-tabs { top: 61px; margin-inline: -2px; }
  .question-bank-toolbar,
  .media-library-toolbar { grid-template-columns: 1fr; }
  .question-bank-toolbar .btn,
  .media-library-toolbar .btn { width: 100%; }
  .bank-question-basics,
  .media-library-basics,
  .bank-assignment-values { grid-template-columns: 1fr; }
  .bank-choice-row,
  .bank-text-row,
  .bank-match-row { grid-template-columns: 1fr; align-items: stretch; }
  .bank-correct-control { width: 100%; grid-template-columns: 44px minmax(0,1fr); justify-content: start; }
  .bank-correct-control::after { content: "Отметить правильным"; color: #4e5961; font-size: 12px; font-weight: 850; }
  .bank-match-arrow { transform: rotate(90deg); }
  .bank-answer-row .remove-bank-answer { width: 100%; }
  .bank-rule-head,
  .bank-media-picker-head { align-items: stretch; flex-direction: column; }
  .bank-media-picker-controls { align-items: stretch; flex-direction: column; }
  .bank-media-picker-controls .search-box { flex-basis: auto; width: 100%; }
  .bank-rule-head .btn,
  .bank-media-picker-head .btn { width: 100%; }
  .bank-rule-row { grid-template-columns: 1fr; }
  .bank-rule-row > label:nth-child(n),
  .bank-rule-active,
  .bank-rule-row .remove-bank-rule { grid-column: 1; }
  .bank-media-options { grid-template-columns: 1fr; }
  .bank-editor-actions { display: grid; grid-template-columns: 1fr; }
  .bank-editor-actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .question-toolkit-banner { animation: none !important; }
}

/* Editable profile and scoped employee import. */
.profile-settings-grid { align-items: start; }
.profile-edit-card .section-head,
.profile-locked-card .section-head,
.profile-password-card .section-head { align-items: start; }
.profile-edit-card .section-head p,
.profile-locked-card .section-head p,
.profile-password-card .section-head p,
.user-import-head p { max-width: 720px; margin: 5px 0 0; color: var(--muted); }
.profile-edit-card .eyebrow {
  color: #a30f19;
  border-color: #ffd2d5;
  background: #fff5f5;
}
.profile-lock-badge {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 7px;
  padding: 5px 8px;
  border: 1px solid #dbe1e5;
  border-radius: 999px;
  color: #52606a !important;
  background: #f3f6f7;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}
.profile-lock-note {
  margin-top: 18px;
  padding: 10px 12px;
  border-left: 4px solid #697780;
  border-radius: 6px;
  color: #4b5962;
  background: #f4f6f7;
  font-size: 12px;
  font-weight: 800;
}
.profile-password-card { margin-top: 16px; }
.profile-password-card form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.profile-password-card form .actions { grid-column: 1 / -1; }
.password-input-control { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; align-items: stretch; }
.password-input-control .input { min-width: 0; }
.password-visibility-toggle {
  min-width: 92px;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid #cfd7db;
  border-radius: 8px;
  color: #33434d;
  background: #f5f7f8;
  font-size: 12px;
  font-weight: 900;
}
.password-visibility-toggle:hover { border-color: #9eabb2; background: #edf1f3; }

.user-import-card {
  display: grid;
  gap: 14px;
  overflow: hidden;
  border-top: 4px solid var(--red);
}
.user-import-head { align-items: start; margin-bottom: 0; }
.user-import-card .eyebrow {
  margin-bottom: 7px;
  color: #a30f19;
  border-color: #ffd2d5;
  background: #fff5f5;
}
.user-scope-badge {
  flex: 0 0 auto;
  display: grid;
  gap: 2px;
  min-width: 170px;
  padding: 10px 12px;
  border: 1px solid #dce3e6;
  border-radius: 8px;
  background: #f6f8f9;
  text-align: right;
}
.user-scope-badge span { color: var(--red-dark); font-size: 11px; font-weight: 900; text-transform: uppercase; }
.user-scope-badge b { font-size: 13px; }
.user-scope-note {
  display: grid;
  gap: 3px;
  padding: 12px 14px;
  border-left: 4px solid #26343d;
  border-radius: 7px;
  color: #34434c;
  background: #f3f6f7;
}
.user-scope-note p { margin: 0; color: #58666f; font-size: 13px; }
.user-template-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.user-import-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
  padding: 14px;
  border: 1px dashed #bcc6cc;
  border-radius: 8px;
  background: #fafbfc;
}
.user-import-form .field small,
.user-import-commit .field small { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.user-import-form input[type="file"] { min-height: 46px; padding: 8px; background: #fff; }
.user-import-preview { display: grid; gap: 12px; min-width: 0; border-radius: 8px; }
.user-import-preview:focus-visible { outline: 3px solid rgba(239, 51, 64, .24); outline-offset: 3px; }
.user-import-empty {
  padding: 18px;
  border: 1px solid #e1e6e9;
  border-radius: 8px;
  color: #4d5a63;
  background: #fbfcfc;
  text-align: center;
}
.user-import-empty p { max-width: 680px; margin: 5px auto 0; color: var(--muted); }
.user-import-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 13px 14px;
  border: 1px solid #dce3e6;
  border-radius: 8px;
}
.user-import-summary.ready { border-color: #b9e5c8; background: #f1fbf4; }
.user-import-summary.blocked { border-color: #ffc9cd; background: #fff5f5; }
.user-import-summary p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.user-import-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.user-import-kpis > div {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid #e0e5e8;
  border-radius: 7px;
  background: #fff;
}
.user-import-kpis span { color: var(--muted); font-size: 10px; font-weight: 850; text-transform: uppercase; }
.user-import-kpis b { font-size: 22px; }
.user-import-kpis .danger { border-color: #ffc8cc; color: #b80f1a; background: #fff6f6; }
.user-import-kpis .attention { border-color: #f5d899; color: #835600; background: #fffaf0; }
.user-import-table table { min-width: 980px; }
.user-import-table td { vertical-align: top; }
.user-import-table td:nth-child(1) { width: 70px; }
.user-import-table td:nth-child(2) { width: 110px; }
.user-import-table td:nth-child(3) { min-width: 230px; }
.user-import-table td:nth-child(4) { min-width: 190px; }
.user-import-table td b,
.user-import-table td small { display: block; }
.user-import-table td small { margin-top: 3px; color: var(--muted); }
.user-import-table tr.has-errors td:first-child { box-shadow: inset 4px 0 0 #d31b27; }
.user-import-table tr.has-warnings td:first-child { box-shadow: inset 4px 0 0 #d8940b; }
.import-issue-groups { display: grid; gap: 6px; }
.import-issues { display: grid; gap: 3px; margin: 0; padding-left: 18px; font-size: 11px; line-height: 1.35; }
.import-issues.errors { color: #a30f19; }
.import-issues.warnings { color: #765000; }
.import-row-ready { color: #087047; font-size: 12px; font-weight: 850; }
.user-import-commit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
  padding: 14px;
  border: 1px solid #dce3e6;
  border-radius: 8px;
  background: #f7f9fa;
}
.user-import-commit .btn { min-height: 44px; }
.user-protected-mark { color: #9aa5ab; font-size: 10px; }
.user-protected-copy { font-size: 12px; }

@media (max-width: 1180px) {
  .user-import-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .profile-password-card form,
  .user-import-form,
  .user-import-commit { grid-template-columns: 1fr; }
  .profile-password-card form .actions { grid-column: 1; }
  .profile-password-card .actions,
  .profile-password-card .btn,
  .user-template-actions,
  .user-template-actions .btn,
  .user-import-form .btn,
  .user-import-commit .btn { width: 100%; }
  .user-import-head,
  .user-import-summary { display: grid; }
  .user-scope-badge { width: 100%; min-width: 0; text-align: left; }
  .user-import-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .user-import-table { overflow: visible; }
  .user-import-table table,
  .user-import-table tbody { display: block; width: 100%; min-width: 0; }
  .user-import-table thead {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  .user-import-table tbody { display: grid; gap: 10px; }
  .user-import-table tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #fff;
  }
  .user-import-table td {
    display: block;
    width: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    white-space: normal;
  }
  .user-import-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
  }
  .user-import-table td:nth-child(3),
  .user-import-table td:nth-child(4),
  .user-import-table td:nth-child(5) { grid-column: 1 / -1; }
}

/* Release polish: discoverable mobile navigation, accessible actions and question formats. */
.mobile-nav-toggle { display: none; }
.user-select-hit { width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; }
.user-select-hit input { width: 24px; height: 24px; accent-color: #c9141d; }
.danger-action { border-color: #f0b6ba; color: #a80e16; background: #fff; }
.danger-action:hover { border-color: #c9141d; color: #fff; background: #c9141d; }
.question-type-launcher {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 12px;
}
.question-type-launcher button {
  min-height: 76px;
  display: grid;
  gap: 4px;
  align-content: center;
  padding: 12px 14px;
  border: 1px solid #dce3e6;
  border-radius: 9px;
  color: #26343d;
  background: #fff;
  text-align: left;
}
.question-type-launcher button:hover { border-color: #c9141d; background: #fff6f6; }
.question-type-launcher b { font-size: 13px; line-height: 1.25; }
.question-type-launcher span { color: #5c6870; font-size: 11px; line-height: 1.35; }
.answer-option.selected .answer-option-key,
.answer-option:has(input:checked) .answer-option-key,
.test-question-dots button.current { border-color: #c9141d; color: #fff; background: #c9141d; }
.test-question-dots button:disabled { border-color: #e1e6e9; color: #9aa4aa; background: #f3f5f6; cursor: not-allowed; }
.btn.primary { background: #c9141d; }
.btn.primary:hover { background: #a80e16; }

@media (min-width: 761px) {
  .user-table th:last-child,
  .user-table td:last-child {
    position: sticky;
    right: 0;
    z-index: 2;
    min-width: 188px;
    background: #fff;
    box-shadow: -10px 0 18px rgba(17, 24, 32, .08);
  }
  .user-table th:last-child { z-index: 3; background: #0b1218; }
  .user-table td:last-child .actions { flex-wrap: nowrap; gap: 6px; }
}

@media (max-width: 760px) {
  .sidebar { grid-template-columns: auto minmax(0, 1fr); }
  .mobile-nav-toggle {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-self: end;
    gap: 7px;
    padding: 8px 11px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 8px;
    color: #fff;
    background: #1a2229;
    font-size: 12px;
    font-weight: 900;
  }
  .mobile-nav-toggle svg { width: 18px; height: 18px; fill: currentColor; }
  .nav { grid-column: 1 / -1; max-height: 48px; transition: max-height .2s ease; }
  .nav:not(.is-expanded) { overflow: hidden; scrollbar-width: none; }
  .nav:not(.is-expanded) button:not(.active) { display: none; }
  .nav:not(.is-expanded) button.active { width: 100%; min-width: 0; flex: 1 1 auto; }
  .nav.is-expanded { max-height: min(62dvh, 440px); flex-wrap: wrap; overflow-y: auto; }
  .nav.is-expanded button { flex: 1 1 145px; }
  .app-shell.has-active-test-session .martin-companion,
  .app-shell.has-active-test-session .martin-disclosure { display: none !important; }
  .question-admin-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
  .question-admin-tabs button { width: 100%; min-width: 0; white-space: normal; }
  .question-type-launcher { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .user-table .user-select-cell { min-width: 44px; min-height: 44px; }
  .user-table .user-select-hit { margin: -8px -8px 0 0; }
  .user-table td:last-child .actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .user-table td:last-child .delete-user { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .nav { transition: none !important; }
}

/* O'HARA EDU 2026 — isolated editorial surfaces for home, Martin and people. */
:root {
  --ohara-paper: #f7f4ee;
  --ohara-paper-deep: #eee8dd;
  --ohara-pencil: #26323a;
  --ohara-pencil-soft: #68747b;
  --ohara-red: #d71920;
  --ohara-red-deep: #a90d14;
  --ohara-rule: rgba(38, 50, 58, .16);
  --ohara-editorial-shadow: 0 28px 70px rgba(22, 29, 34, .14);
}

/* Home: one open editorial stage, not a stack of placeholder panels. */
.home-stage {
  position: relative;
  isolation: isolate;
  min-height: clamp(560px, 67vh, 760px);
  display: grid;
  align-items: center;
  overflow: hidden;
  margin-bottom: clamp(18px, 2vw, 28px);
  border: 1px solid var(--ohara-rule);
  border-radius: 20px;
  color: var(--ohara-pencil);
  background: var(--ohara-paper);
  box-shadow: var(--ohara-editorial-shadow);
  animation: oharaStageIn .42s cubic-bezier(.2,.72,.28,1) both;
}
.home-stage::before {
  display: none;
}
.home-stage::after {
  display: none;
}
.home-stage-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: right center;
}
.home-stage-copy {
  position: relative;
  z-index: 2;
  top: auto;
  width: min(54%, 760px);
  max-width: 760px;
  padding: clamp(30px, 3.6vw, 58px);
  padding-right: clamp(20px, 2.4vw, 38px);
  transform: none;
}
.home-stage-copy h1,
.home-stage-copy h2 {
  max-width: 760px;
  margin: 0;
  color: #11181d;
  font-size: clamp(40px, 4.1vw, 64px);
  font-weight: 950;
  line-height: .94;
  letter-spacing: -.048em;
  text-wrap: balance;
}
.home-stage-copy > p {
  max-width: 690px;
  margin: clamp(18px, 2vw, 28px) 0 0;
  color: #4f5b62;
  font-size: clamp(16px, 1.35vw, 20px);
  line-height: 1.55;
}
.home-stage-copy .actions,
.home-stage-copy .home-stage-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(22px, 2.5vw, 34px);
}
.home-stage-copy .btn { min-width: 190px; }
.home-stage-status {
  width: 100%;
  max-width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: clamp(22px, 2.5vw, 34px);
}
.home-stage-status > span {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 10px 11px;
  border: 1px solid rgba(38,50,58,.14);
  border-radius: 9px;
  color: var(--ohara-pencil-soft);
  background: rgba(255,255,255,.7);
  font-size: 11px;
  line-height: 1.3;
}
.home-stage-status > span b { color: var(--ohara-pencil); font-size: 14px; }
.home-availability {
  display: block;
  margin-bottom: clamp(22px, 3vw, 38px);
}
.home-availability-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.home-availability-card {
  position: relative;
  min-height: 132px;
  display: grid;
  align-content: end;
  gap: 5px;
  overflow: hidden;
  padding: 20px;
  border: 1px solid var(--ohara-rule);
  border-radius: 14px;
  color: var(--ohara-pencil);
  background: rgba(255,255,255,.9);
}
.home-availability-card::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 20px;
  width: 44px;
  height: 3px;
  border-radius: 99px;
  background: #9da6ab;
}
.home-availability-card h2,
.home-availability-card h3,
.home-availability-card p { margin: 0; }
.home-availability-card h2,
.home-availability-card h3,
.home-availability-card > b { font-size: clamp(18px, 1.45vw, 24px); line-height: 1.08; }
.home-availability-card p,
.home-availability-card > small { color: var(--ohara-pencil-soft); font-size: 13px; line-height: 1.4; }
.home-availability-card > span { color: var(--ohara-red-deep); font-size: 11px; font-weight: 900; text-transform: uppercase; }
.home-availability-card:is(.active, .is-active),
.home-availability-card[data-state="active"] {
  min-height: 156px;
  color: #fff;
  border-color: #11181d;
  background: #11181d;
  box-shadow: 0 18px 42px rgba(17,24,29,.18);
}
.home-availability-card:is(.active, .is-active)::before,
.home-availability-card[data-state="active"]::before { width: 64px; background: #ff2931; }
.home-availability-card:is(.active, .is-active) p,
.home-availability-card[data-state="active"] p,
.home-availability-card:is(.active, .is-active) > small,
.home-availability-card[data-state="active"] > small { color: #cbd2d6; }
.home-availability-card:is(.active, .is-active) > span,
.home-availability-card[data-state="active"] > span { color: #ff8f94; }
.home-availability-card:is(.soon, .is-soon),
.home-availability-card[data-state="soon"] { background: rgba(247,244,238,.72); }
.home-availability-card:is(.soon, .is-soon)::after,
.home-availability-card[data-state="soon"]::after {
  content: "Скоро";
  position: absolute;
  top: 15px;
  right: 16px;
  color: #69747a;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

/* Martin stays recognisable and discoverable on every page. */
.martin-launcher,
.martin-launcher.martin-companion {
  position: fixed;
  z-index: 46;
  right: clamp(14px, 1.8vw, 28px);
  bottom: calc(clamp(14px, 1.8vw, 28px) + env(safe-area-inset-bottom));
  width: 68px;
  height: 68px;
  min-width: 0;
  min-height: 68px;
  display: inline-grid;
  grid-template-columns: 56px;
  align-items: center;
  gap: 0;
  padding: 6px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  color: #fff;
  background: #11181d;
  box-shadow: 0 18px 46px rgba(10,15,19,.3);
  text-align: left;
  transform: translateZ(0);
  transition: transform .18s ease, opacity .18s ease;
}
.martin-launcher:hover { transform: translateY(-3px); }
.martin-launcher:active { transform: translateY(-1px); }

/* Reserve a quiet desktop dock so Martin never covers cards or controls. */
@media (min-width: 1181px) {
  .main { padding-right: 112px; }
}

.martin-launcher-face {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.9);
  border-radius: 50%;
  background-color: var(--ohara-paper);
  background-image: none;
  background-repeat: no-repeat;
  background-position: center 42%;
  background-size: 112%;
}
.martin-companion .martin-launcher-face {
  min-width: 56px;
  padding: 0;
  opacity: 1;
  transition: none;
}
.martin-launcher-face img,
img.martin-launcher-face {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 9%;
}
img.martin-launcher-face { border: 2px solid rgba(255,255,255,.9); }
.martin-launcher-label {
  min-width: 0;
  display: grid;
  gap: 1px;
  opacity: 1;
  color: #fff;
  line-height: 1.2;
}
.martin-companion .martin-launcher-label {
  display: none;
}
.martin-launcher-label b { font-size: 13px; font-weight: 950; }
.martin-launcher-label small { color: #c9d1d5; font-size: 11px; white-space: nowrap; }

.martin-assistant-panel,
.martin-assistant-panel.martin-disclosure {
  position: fixed;
  z-index: 45;
  right: clamp(14px, 1.8vw, 28px);
  bottom: calc(104px + env(safe-area-inset-bottom));
  width: min(410px, calc(100vw - 28px));
  max-height: min(640px, calc(100dvh - 132px));
  overflow: auto;
  padding: 22px;
  border: 1px solid rgba(38,50,58,.2);
  border-radius: 18px;
  color: var(--ohara-pencil);
  background:
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(68,80,87,.045) 39px 40px),
    #fff;
  box-shadow: 0 28px 72px rgba(10,15,19,.28);
  animation: oharaAssistantIn .22s cubic-bezier(.2,.72,.28,1) both;
}
.martin-assistant-avatar {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 2px solid #1a2329;
  border-radius: 50%;
  background-color: var(--ohara-paper);
  background-image: none;
  background-repeat: no-repeat;
  background-position: center 42%;
  background-size: 112%;
}
.martin-assistant-avatar img,
img.martin-assistant-avatar {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 9%;
}

/* Theoretical materials and process regulations share one illustrated language. */
.coming-soon-stage {
  position: relative;
  isolation: isolate;
  min-height: 520px;
  display: grid;
  align-items: center;
  overflow: hidden;
  margin-bottom: 18px;
  border: 1px solid var(--ohara-rule);
  border-radius: 18px;
  color: var(--ohara-pencil);
  background: var(--ohara-paper);
  box-shadow: 0 22px 58px rgba(22,29,34,.1);
  animation: oharaStageIn .36s ease both;
}
.coming-soon-stage::before {
  display: none;
}
.coming-soon-copy {
  position: relative;
  z-index: 2;
  top: auto;
  left: auto;
  width: min(55%, 760px);
  padding: clamp(30px, 3.8vw, 54px);
  transform: none;
}
.coming-soon-copy h1,
.coming-soon-copy h2 {
  max-width: 760px;
  margin: 0;
  color: #11181d;
  font-size: clamp(36px, 3.4vw, 54px);
  line-height: .98;
  letter-spacing: -.04em;
  text-wrap: balance;
}
.coming-soon-copy p {
  max-width: 680px;
  margin: 18px 0 0;
  color: #536067;
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.55;
}
.coming-soon-copy > .btn,
.coming-soon-copy > .actions,
.coming-soon-copy > .portal-actions { margin-top: 24px; }
.coming-soon-art {
  min-width: 0;
  display: block;
}
.coming-soon-art img,
img.coming-soon-art {
  width: 100%;
  height: 100%;
  max-height: 430px;
  display: block;
  object-fit: contain;
  object-position: center bottom;
}
img.coming-soon-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  padding: 0;
  object-fit: contain;
  object-position: right center;
}
.coming-soon-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.coming-soon-card {
  position: relative;
  min-height: 230px;
  display: grid;
  align-content: space-between;
  gap: 6px;
  overflow: hidden;
  padding: 18px;
  border: 1px solid var(--ohara-rule);
  border-radius: 14px;
  color: var(--ohara-pencil);
  background: linear-gradient(145deg, #fff, #f7f4ee);
}
.coming-soon-card::before { display: none; }
.coming-soon-card > * { position: relative; z-index: 1; }
.coming-soon-card-index { color: rgba(38,50,58,.16); font-size: clamp(52px, 5vw, 78px); font-weight: 950; line-height: .8; }
.coming-soon-card.personnel { border-top: 4px solid #f59e0b; }
.coming-soon-card.product { border-top: 4px solid #16a34a; }
.coming-soon-card.sales { border-top: 4px solid #ef3340; }
.coming-soon-card.process { border-top: 4px solid #2563eb; }
.coming-soon-card h2,
.coming-soon-card h3,
.coming-soon-card p { margin: 0; }
.coming-soon-card h2,
.coming-soon-card h3 { font-size: 18px; line-height: 1.12; }
.coming-soon-card p { color: var(--ohara-pencil-soft); font-size: 12px; line-height: 1.4; }
.coming-soon-card > div { position: relative; z-index: 1; display: grid; gap: 5px; }
.coming-soon-card > div > span { color: var(--ohara-red-deep); font-size: 10px; font-weight: 900; text-transform: uppercase; }

/* Search results appear in the page immediately, before aggregate store rows. */
.team-employee-matches {
  display: block;
  margin: 12px 0 16px;
}
.team-employee-match-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.team-employee-matches > h2,
.team-employee-matches > h3,
.team-employee-matches > p {
  grid-column: 1 / -1;
  margin: 0;
}
.team-employee-matches > p { color: var(--ohara-pencil-soft); }
.team-employee-match-card {
  min-width: 0;
  min-height: 92px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 13px;
  border: 1px solid var(--ohara-rule);
  border-radius: 12px;
  color: var(--ohara-pencil);
  background: #fff;
  text-align: left;
  text-decoration: none;
  transition: transform .18s ease, opacity .18s ease;
}
.team-employee-match-card:hover { transform: translateY(-2px); }
.team-employee-match-card > span:first-child,
.team-employee-match-avatar {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  color: var(--ohara-red-deep);
  background: var(--ohara-paper);
  font-size: 13px;
  font-weight: 950;
}
.team-employee-match-avatar img { width: 100%; height: 100%; object-fit: cover; }
.team-employee-match-card > div,
.team-employee-match-card > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.team-employee-match-card b,
.team-employee-match-card small,
.team-employee-match-card em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-employee-match-card small,
.team-employee-match-card em { color: var(--ohara-pencil-soft); font-size: 11px; font-style: normal; }
.team-employee-match-card > strong { color: var(--ohara-red-deep); font-size: 11px; white-space: nowrap; }
.team-employee-match-card > svg { width: 20px; height: 20px; color: var(--ohara-red); }

/* Employee drill-down: open information bands with a compact result history. */
.employee-detail-stage {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
  gap: clamp(22px, 3vw, 44px);
  overflow: hidden;
  margin-bottom: 16px;
  padding: clamp(26px, 4vw, 52px);
  border-radius: 18px;
  color: #fff;
  background: #11181d;
  box-shadow: 0 22px 58px rgba(17,24,29,.2);
}
.employee-detail-stage::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -7%;
  bottom: -58%;
  width: 48%;
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 50%;
}
.employee-detail-head {
  min-width: 0;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
}
.employee-detail-avatar {
  width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.8);
  border-radius: 50%;
  color: #fff;
  background: var(--ohara-red);
  font-size: 22px;
  font-weight: 950;
}
.employee-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }
.employee-detail-title { min-width: 0; }
.employee-detail-title h1,
.employee-detail-title h2 { margin: 0; font-size: clamp(30px, 3.4vw, 52px); line-height: .98; letter-spacing: -.035em; }
.employee-detail-title p { margin: 9px 0 0; color: #c5cdd2; line-height: 1.45; }
.employee-detail-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  align-content: center;
}
.employee-detail-fact {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 11px 13px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 10px;
  background: rgba(255,255,255,.055);
}
.employee-detail-fact span { color: #aeb9bf; font-size: 11px; }
.employee-detail-fact b { overflow-wrap: anywhere; font-size: 13px; }
.employee-detail-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 4px;
}
.employee-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  gap: 16px;
  align-items: start;
}
.employee-detail-section {
  min-width: 0;
  padding: clamp(18px, 2.2vw, 28px);
  border: 1px solid var(--ohara-rule);
  border-radius: 14px;
  background: #fff;
}
.employee-detail-section > h2,
.employee-detail-section > h3,
.employee-detail-section > p { margin-top: 0; }
.employee-detail-section > p { color: var(--ohara-pencil-soft); }
.employee-detail-blocks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}
.employee-detail-block {
  min-width: 0;
  display: grid;
  gap: 7px;
  padding: 13px;
  border: 1px solid var(--ohara-rule);
  border-top: 3px solid var(--block-accent, var(--ohara-red));
  border-radius: 10px;
  background: #faf9f6;
}
.employee-detail-block b { font-size: 20px; }
.employee-detail-block span,
.employee-detail-block small { color: var(--ohara-pencil-soft); line-height: 1.3; }
.employee-detail-history,
.employee-detail-courses { display: grid; gap: 8px; }
.employee-detail-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(100px, .55fr) minmax(88px, auto);
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(38,50,58,.1);
}
.employee-detail-row:last-child { border-bottom: 0; }
.employee-detail-row > div { min-width: 0; display: grid; gap: 3px; }
.employee-detail-row b,
.employee-detail-row small { overflow-wrap: anywhere; }
.employee-detail-row small { color: var(--ohara-pencil-soft); }
.employee-detail-score { color: var(--ohara-red-deep); font-size: 20px; font-weight: 950; }
.employee-detail-empty {
  padding: 22px;
  border: 1px dashed rgba(38,50,58,.24);
  border-radius: 10px;
  color: var(--ohara-pencil-soft);
  background: #faf9f6;
  text-align: center;
}
.employee-source-progress { margin-top: 16px; }
.employee-instruction-section { margin-bottom: 16px; }
.employee-instruction-list { display: grid; gap: 8px; }
.employee-instruction-list .instruction-item { margin-top: 0; }

/* Safe-fit art: never trim Martin, diagrams or question-media illustrations. */
.question-toolkit-hero img,
.question-toolkit-banner > img {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  object-position: center bottom;
  background: linear-gradient(145deg, #fbf7ef, #fff);
  mix-blend-mode: normal;
}
.portal-course-card img.course-card-art,
.course-card > img.course-card-art,
.course-hero-card > img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  display: block;
  object-fit: contain;
  object-position: center;
  border: 1px solid rgba(38,50,58,.12);
  background: #f8f4ec;
}
.course-card > img.course-card-art { margin-bottom: 12px; border-radius: 8px; }
.attestation-motivation {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: clamp(600px, 68vh, 720px);
  align-content: stretch;
  overflow: hidden;
  padding: clamp(38px, 4.5vw, 68px);
  color: #11181d;
  background: #f8f4ec;
}
.attestation-motivation::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(248,244,236,.99) 0%, rgba(248,244,236,.96) 35%, rgba(248,244,236,.7) 51%, rgba(248,244,236,0) 72%);
}
.attestation-motivation-copy {
  grid-row: 1;
  width: min(56%, 720px);
  align-self: center;
}
.attestation-motivation h2 { color: #11181d; }
.attestation-motivation p { color: #4f5b62; }
.attestation-motivation .eyebrow { color: #c9141d; }
.attestation-motivation-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  min-height: 0;
  display: block;
  pointer-events: none;
}
.attestation-motivation-art img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: right center;
  filter: none;
}
.attestation-motivation-art > div {
  position: absolute;
  top: clamp(34px, 4vw, 60px);
  right: clamp(28px, 4vw, 58px);
  z-index: 2;
  width: auto;
  min-width: 190px;
  margin: 0;
  color: #11181d;
  border-color: rgba(17,24,29,.16);
  background: rgba(255,255,255,.84);
  box-shadow: 0 12px 32px rgba(17,24,29,.12);
  backdrop-filter: blur(12px);
}
.attestation-motivation-art span { color: #536067; }
.attestation-mastery {
  position: relative;
  z-index: 2;
  grid-row: 2;
  color: #11181d;
  border-color: rgba(17,24,29,.15);
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(12px);
}
.attestation-mastery .mastery-line li:not(:last-child)::after { background: rgba(17,24,29,.18); }
.attestation-mastery .mastery-line li.done:not(:last-child)::after { background: #21a260; }
.attestation-mastery .mastery-line li > span { border-color: rgba(17,24,29,.28); color: #11181d; background: #fff; }
.attestation-mastery .mastery-line li.done > span { border-color: #21a260; color: #fff; background: #16824a; }
.attestation-mastery .mastery-line li.current > span { border-color: #ff5960; color: #fff; background: #c9141d; }
.attestation-mastery .mastery-line li small { color: #59666d; }
.att-card-art { aspect-ratio: 16 / 9; background: #f8f4ec; }
.home-stage-scene,
.att-card-art img,
.attestation-motivation-art img,
.attestation-hero img,
.attestation-diagram img {
  object-fit: contain;
  object-position: center;
  transform-origin: 72% 58%;
  animation: oharaMartinHover 6.8s ease-in-out infinite;
  will-change: transform;
}
.attestation-motivation .attestation-motivation-art img {
  object-fit: cover;
  object-position: center;
}
.att-card:hover .att-card-art img { transform: none; }

@keyframes oharaStageIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes oharaMartinHover {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-11px) rotate(.5deg); }
}
@keyframes oharaAssistantIn {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 1180px) {
  .home-stage,
  .coming-soon-stage,
  .question-toolkit-banner { grid-template-columns: minmax(0, 1fr); }
  .home-stage,
  .coming-soon-stage { min-height: 0; display: grid; }
  .home-stage-copy,
  .coming-soon-copy {
    position: relative;
    top: auto;
    left: auto;
    order: 1;
    width: 100%;
    max-width: none;
    padding: 42px 28px 30px 42px;
    transform: none;
  }
  .home-stage-copy h1,
  .home-stage-copy h2 { font-size: clamp(40px, 5.4vw, 62px); }
  .home-stage-scene,
  img.coming-soon-art {
    position: relative;
    inset: auto;
    order: 2;
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
    object-position: center;
  }
  .question-toolkit-banner > img { width: 100%; height: auto; min-height: 0; max-height: none; }
  .coming-soon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team-employee-matches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .employee-detail-layout { grid-template-columns: minmax(0, 1fr); }

  .martin-launcher,
  .martin-launcher.martin-companion {
    top: 18px;
    width: 64px;
    height: 64px;
    min-height: 64px;
    bottom: auto;
    grid-template-columns: 52px;
    gap: 0;
    padding: 5px;
    overflow: hidden;
  }
  .martin-launcher-face { width: 52px; height: 52px; }
  .martin-companion .martin-launcher-face { min-width: 52px; }
  .martin-companion .martin-launcher-label { display: none; }
  .martin-assistant-panel,
  .martin-assistant-panel.martin-disclosure {
    top: 92px;
    bottom: auto;
    max-height: calc(100dvh - 108px);
  }

  .team-store-table,
  .team-employee-table { overflow: visible; }
  .team-store-table table,
  .team-store-table tbody,
  .team-employee-table table,
  .team-employee-table tbody { display: block; width: 100%; min-width: 0 !important; }
  .team-store-table thead,
  .team-employee-table thead {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  .team-store-table tbody,
  .team-employee-table tbody { display: grid; gap: 10px; }
  .team-store-table tr,
  .team-employee-table tr {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px 18px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 7px 20px rgba(6, 16, 22, .05);
  }
  .team-store-table td,
  .team-employee-table td {
    display: block;
    min-width: 0;
    padding: 0 !important;
    border: 0 !important;
    white-space: normal;
  }
  .team-store-table td[data-label]::before,
  .team-employee-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 3px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .03em;
    text-transform: uppercase;
  }
  .team-store-table td:first-child,
  .team-employee-table td:first-child { grid-column: span 2; }
  .team-store-table td:last-child,
  .team-employee-table td:nth-child(9),
  .team-employee-table td:nth-child(10),
  .team-employee-table td:last-child { grid-column: span 2; }
  .team-store-table td:last-child .btn,
  .team-employee-table td:last-child .btn { width: 100%; }
  .question-bank-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .question-bank-toolbar .search-box,
  .question-bank-toolbar .new-bank-question { grid-column: 1 / -1; }
  .question-bank-toolbar .new-bank-question { width: 100%; }
}

@media (max-width: 900px) {
  .home-stage,
  .coming-soon-stage { grid-template-columns: minmax(0, 1fr); }
  .home-stage { min-height: 0; }
  .home-stage-copy,
  .coming-soon-copy { padding: 38px 34px 20px; }
  .home-availability-grid { grid-template-columns: minmax(0, 1fr); }
  .home-availability-card,
  .home-availability-card:is(.active, .is-active),
  .home-availability-card[data-state="active"] { min-height: 124px; }
  .employee-detail-stage { grid-template-columns: minmax(0, 1fr); }
  .employee-detail-blocks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .sidebar { grid-template-columns: auto 46px auto; align-items: center; }
  .brand-lockup { grid-column: 1; grid-row: 1; }
  .mobile-nav-toggle { grid-column: 3; grid-row: 1; }
  .nav { grid-column: 1 / -1; grid-row: 2; }
  .home-stage,
  .coming-soon-stage,
  .employee-detail-stage { border-radius: 14px; }
  .home-stage-copy,
  .coming-soon-copy { padding: 28px 20px 14px; }
  .home-stage-copy h1,
  .home-stage-copy h2,
  .coming-soon-copy h1,
  .coming-soon-copy h2 {
    overflow-wrap: anywhere;
    font-size: clamp(34px, 10vw, 46px);
  }
  .home-stage-copy .actions,
  .home-stage-copy .home-stage-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .home-stage-copy .btn { width: 100%; min-width: 0; }
  .attestation-motivation {
    grid-template-rows: auto;
    min-height: 0;
    gap: 18px;
    padding: 28px 18px 20px;
  }
  .attestation-motivation::before {
    background: linear-gradient(180deg, rgba(248,244,236,.99) 0%, rgba(248,244,236,.96) 46%, rgba(248,244,236,.2) 74%, rgba(248,244,236,0) 100%);
  }
  .attestation-motivation-copy { grid-row: auto; width: 100%; }
  .attestation-motivation-art {
    position: relative;
    inset: auto;
    z-index: 1;
    grid-row: auto;
    height: 320px;
    margin: 4px -18px 0;
    overflow: hidden;
  }
  .attestation-motivation-art img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
    object-position: 68% center;
  }
  .attestation-motivation-art > div {
    top: auto;
    right: 18px;
    bottom: 16px;
    min-width: 160px;
  }
  .attestation-mastery { grid-row: auto; }
  .coming-soon-grid,
  .team-employee-match-grid { grid-template-columns: minmax(0, 1fr); }
  .coming-soon-card { min-height: 220px; }
  .employee-detail-stage { gap: 18px; padding: 22px 18px; }
  .employee-detail-head { grid-template-columns: 66px minmax(0, 1fr); gap: 12px; }
  .employee-detail-avatar { width: 66px; height: 66px; font-size: 18px; }
  .employee-detail-title h1,
  .employee-detail-title h2 { font-size: clamp(28px, 8.5vw, 38px); }
  .employee-detail-facts,
  .employee-detail-blocks { grid-template-columns: minmax(0, 1fr); }
  .employee-detail-row { grid-template-columns: minmax(0, 1fr) auto; gap: 7px 12px; }
  .employee-detail-row > :last-child { grid-column: 1 / -1; }
  .martin-launcher,
  .martin-launcher.martin-companion {
    position: static;
    top: auto;
    right: auto;
    bottom: auto;
    width: 46px;
    height: 46px;
    min-height: 46px;
    grid-template-columns: 36px;
    gap: 0;
    padding: 5px;
    overflow: hidden;
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    justify-self: center;
    margin: 0;
  }
  .martin-launcher-face { width: 36px; height: 36px; }
  .martin-companion .martin-launcher-face { min-width: 36px; }
  .martin-companion .martin-launcher-label { display: none; }
  .martin-assistant-panel,
  .martin-assistant-panel.martin-disclosure {
    top: calc(64px + env(safe-area-inset-top));
    right: 12px;
    bottom: auto;
    width: calc(100vw - 24px);
    max-height: calc(100dvh - 76px - env(safe-area-inset-top));
    padding: 18px;
    border-radius: 14px;
  }
  .martin-assistant-avatar { width: 62px; height: 62px; }
  .question-toolkit-banner > img { width: 100%; height: auto; max-height: none; }
  .team-store-table tr,
  .team-employee-table tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team-store-table td:first-child,
  .team-store-table td:last-child,
  .team-employee-table td:first-child,
  .team-employee-table td:nth-child(9),
  .team-employee-table td:nth-child(10),
  .team-employee-table td:last-child { grid-column: 1 / -1; }
}

@media (max-width: 420px) {
  .home-stage-copy,
  .coming-soon-copy { padding-inline: 17px; }
  .home-stage-status { align-items: flex-start; }
  .martin-launcher-label b { font-size: 12px; }
  .martin-launcher-label small { max-width: 112px; font-size: 10px; }
  .employee-detail-section { padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-stage,
  .home-stage-scene,
  .coming-soon-stage,
  .martin-launcher,
  .martin-assistant-panel {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* Final production polish: readable deadlines, responsive media and clear team views. */
.logo small {
  max-width: 150px;
  white-space: normal;
  font-size: 8px;
  line-height: 1.05;
}

.home-followup-grid {
  grid-template-columns: minmax(0, 1fr);
}

.home-availability-card[style] {
  min-height: clamp(190px, 16vw, 250px);
  align-content: end;
  isolation: isolate;
  padding: 24px;
  background-image:
    linear-gradient(90deg, rgba(248,244,236,.98) 0%, rgba(248,244,236,.94) 42%, rgba(248,244,236,.28) 76%, rgba(248,244,236,.08) 100%),
    var(--card-art);
  background-position: center;
  background-size: cover;
  box-shadow: 0 16px 40px rgba(17,24,29,.12);
}
.home-availability-card[style] > * {
  position: relative;
  z-index: 2;
  max-width: 62%;
}
.home-availability-card.active[style] {
  min-height: clamp(210px, 18vw, 280px);
  background-image:
    linear-gradient(90deg, rgba(11,17,21,.98) 0%, rgba(11,17,21,.9) 42%, rgba(11,17,21,.26) 76%, rgba(11,17,21,.05) 100%),
    var(--card-art);
  background-position: center;
  background-size: cover;
}
.home-availability-card.soon[style]::after {
  z-index: 3;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.86);
}

.martin-launcher,
.martin-launcher.martin-companion {
  z-index: 1001;
}
.sidebar {
  /* The sticky sidebar creates its own stacking context. Keep that context
     above the content column so the fixed Martin launcher receives clicks. */
  z-index: 30;
}
.martin-assistant-panel,
.martin-assistant-panel.martin-disclosure {
  z-index: 1000;
}
.martin-assistant-panel[hidden],
.martin-assistant-panel.martin-disclosure[hidden] {
  display: none !important;
}
.martin-assistant-panel:not([hidden]),
.martin-assistant-panel.martin-disclosure:not([hidden]) {
  display: block;
}

.attestation-motivation {
  min-height: clamp(500px, 58vh, 640px);
  grid-template-rows: minmax(0, 1fr);
}
.attestation-motivation-art img,
.attestation-hero img,
.attestation-diagram img,
.att-card-art img {
  object-fit: contain !important;
  object-position: center !important;
}

.team-view-tabs {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  gap: 5px;
  margin: 16px 0 4px;
  padding: 5px;
  border: 1px solid var(--ohara-rule);
  border-radius: 12px;
  background: #f3f5f6;
}
.team-view-tabs button {
  min-height: 42px;
  padding: 9px 18px;
  border: 0;
  border-radius: 8px;
  color: #56616a;
  background: transparent;
  font-weight: 900;
}
.team-view-tabs button.active {
  color: #fff;
  background: #11181d;
  box-shadow: 0 8px 22px rgba(17,24,29,.16);
}
.team-view-panel[hidden] {
  display: none !important;
}

.bank-rule-row > label > small,
.bank-rule-advanced small {
  color: #6a757c;
  font-size: 10px;
  line-height: 1.35;
}
.bank-rule-advanced {
  grid-column: span 2;
  align-self: stretch;
  padding: 8px 10px;
  border: 1px solid #dfe5e8;
  border-radius: 8px;
  background: #fff;
}
.bank-rule-advanced summary {
  color: #56616a;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}
.bank-rule-advanced label {
  display: grid;
  gap: 5px;
  margin-top: 8px;
}

.question-media {
  grid-template-columns: minmax(0, 1fr);
}
.question-media-item {
  width: min(100%, 1200px);
  margin-inline: auto;
}
.question-media-frame {
  min-height: 0;
  max-height: min(72dvh, 760px);
  overflow: hidden;
}
.question-media-frame img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: min(72dvh, 760px);
  object-fit: contain !important;
  object-position: center !important;
}
.question-media-frame video {
  width: 100%;
  height: auto;
  max-height: min(72dvh, 760px);
  object-fit: contain !important;
}

@media (max-width: 1180px) {
  .bank-rule-advanced {
    grid-column: span 4;
  }
}

@media (max-width: 760px) {
  .home-availability-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .home-availability-card[style],
  .home-availability-card.active[style] {
    min-height: 210px;
    background-position: 62% center;
  }
  .home-availability-card[style] > * {
    max-width: 74%;
  }
  .team-view-tabs {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bank-rule-advanced {
    grid-column: 1;
  }
  .attestation-motivation-art img {
    object-fit: contain !important;
    object-position: center !important;
  }
  .question-media-frame,
  .question-media-frame img,
  .question-media-frame video {
    max-height: min(66dvh, 560px);
  }
}

/* Final interaction details for the isolated O'HARA EDU surfaces. */
.app-shell .main { padding-bottom: calc(116px + env(safe-area-inset-bottom)); }
.employee-detail-fact dt { color: #aeb9bf; font-size: 11px; }
.employee-detail-fact dd { margin: 0; overflow-wrap: anywhere; font-size: 13px; font-weight: 900; }
.employee-detail-block.personnel { --block-accent: #f59e0b; }
.employee-detail-block.product { --block-accent: #16a34a; }
.employee-detail-block.sales { --block-accent: #ef3340; }
.employee-detail-block.process { --block-accent: #2563eb; }
.employee-detail-block { position: relative; overflow: hidden; }
.employee-detail-block > i {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  border-radius: 99px;
  background: var(--block-accent);
}
.employee-detail-completions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}
.employee-detail-completions article {
  display: grid;
  gap: 3px;
  padding: 18px;
  border: 1px solid var(--ohara-rule);
  border-radius: 12px;
  background: #fff;
}
.employee-detail-completions b { font-size: 24px; }
.employee-detail-completions span { color: var(--ohara-pencil-soft); font-size: 12px; }
.team-employee-name {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: left;
}
.team-employee-name span { color: var(--muted); font-size: 12px; }
.team-employee-name:hover b { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.team-employee-match-more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  color: var(--muted);
  font-size: 12px;
}
.getcourse-admin-section {
  display: grid;
  gap: 16px;
  padding: 24px;
  border: 1px solid var(--ohara-rule);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(246,249,250,.98));
  box-shadow: 0 18px 46px rgba(22, 29, 34, .08);
}
.getcourse-admin-intro { margin: -8px 0 0; color: var(--muted); }
.getcourse-admin-tools {
  display: grid;
  grid-template-columns: minmax(260px, 1.5fr) minmax(170px, .6fr) minmax(220px, 1fr);
  gap: 10px;
  align-items: end;
}
.getcourse-admin-tools > label:not(.search-box) { display: grid; gap: 6px; }
.getcourse-admin-tools > label > span { color: var(--muted); font-size: 11px; font-weight: 800; }
.getcourse-admin-tools select { width: 100%; min-height: 44px; border: 1px solid var(--ohara-rule); border-radius: 10px; background: #fff; padding: 0 12px; }
.getcourse-material-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.getcourse-material-card {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 18px;
  border: 1px solid var(--ohara-rule);
  border-radius: 13px;
  background: #fff;
}
.getcourse-material-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.getcourse-material-head small { min-width: 0; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.getcourse-material-card h3 { margin: 0; overflow-wrap: anywhere; font-size: 16px; line-height: 1.25; }
.getcourse-material-card p { margin: 0; color: var(--muted); font-size: 12px; }
.getcourse-material-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; padding-top: 4px; }
.getcourse-pagination { display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--muted); font-size: 12px; }

@media (max-width: 1180px) {
  .getcourse-material-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .getcourse-admin-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .getcourse-admin-tools .search-box { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
  .app-shell .main { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
  .employee-detail-completions { grid-template-columns: minmax(0, 1fr); }
  .team-employee-match-more { align-items: stretch; flex-direction: column; }
  .getcourse-admin-section { padding: 18px; }
  .getcourse-admin-tools,
  .getcourse-material-grid { grid-template-columns: minmax(0, 1fr); }
  .getcourse-admin-tools .search-box { grid-column: auto; }
  .getcourse-material-head { align-items: flex-start; flex-direction: column; }
}


@media (max-width: 1180px) {
  .block-test-admin-layout { grid-template-columns: minmax(0, 1fr); }
  .block-position-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .block-settings-summary,
  .block-composer-intro,
  .block-assigned-heading,
  .block-audience-group-head,
  .block-position-selector-head { align-items: stretch; flex-direction: column; }
  .block-settings-metrics { justify-content: stretch; }
  .block-settings-metrics span { flex: 1 1 120px; text-align: left; }
  .block-composer-intro .btn,
  .block-audience-group-head .btn { width: 100%; }
  .block-question-assignment > summary { grid-template-columns: 34px minmax(0, 1fr); }
  .block-question-media-count { grid-column: 2; justify-self: start; }
  .block-assignment-grid,
  .block-tenure-grid,
  .block-question-picker-toolbar,
  .block-position-checks { grid-template-columns: minmax(0, 1fr); }
  .block-question-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .block-question-actions .btn { width: 100%; }
  .block-question-order-actions { justify-content: center; }
  .block-question-picker-item { grid-template-columns: minmax(0, 1fr); }
  .block-question-picker-item .btn { width: 100%; }
}

/* Self-hosted brand typography + cinematic portal polish (2026-07-23) */
@font-face {
  font-family: "Manrope";
  src: url("/assets/fonts/manrope-cyrillic-400.woff2") format("woff2"),
       url("/assets/fonts/manrope-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116, 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;
}
@font-face {
  font-family: "Manrope";
  src: url("/assets/fonts/manrope-cyrillic.woff2") format("woff2"),
       url("/assets/fonts/manrope-latin.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("/assets/fonts/manrope-cyrillic-800.woff2") format("woff2"),
       url("/assets/fonts/manrope-latin-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Onest";
  src: url("/assets/fonts/onest-cyrillic-700.woff2") format("woff2"),
       url("/assets/fonts/onest-latin-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Onest";
  src: url("/assets/fonts/onest-cyrillic-800.woff2") format("woff2"),
       url("/assets/fonts/onest-latin-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "Manrope", "Segoe UI", sans-serif;
  letter-spacing: -.01em;
}
h1, h2, .hero-title, .home-stage-copy h2, .coming-soon-copy h2,
.attestation-motivation-copy h2, .logo b, .brand-lockup b {
  font-family: "Onest", "Manrope", sans-serif;
}

.home-availability-card[style],
.home-availability-card.active[style] {
  min-height: clamp(220px, 22vw, 300px);
  color: #fff;
  border: 0;
  background-image:
    linear-gradient(180deg, rgba(10,16,20,.18) 0%, rgba(10,16,20,.55) 48%, rgba(10,16,20,.88) 100%),
    var(--card-art);
  background-position: center;
  background-size: cover;
  box-shadow: 0 22px 48px rgba(12,18,24,.22);
  transition: transform .28s ease, box-shadow .28s ease;
}
.home-availability-card[style] > * {
  max-width: 88%;
  text-shadow: 0 1px 12px rgba(0,0,0,.35);
}
.home-availability-card[style] > small,
.home-availability-card.active[style] > small { color: rgba(255,255,255,.88); }
.home-availability-card[style] > span,
.home-availability-card.active[style] > span { color: #ffb4b8; }
.home-availability-card[style]:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 56px rgba(12,18,24,.28);
}
.home-availability-card.soon[style]::after {
  background: rgba(17,24,29,.72);
  color: #fff;
}

.martin-launcher,
.martin-launcher.martin-companion {
  position: fixed !important;
  right: clamp(14px, 1.8vw, 28px) !important;
  bottom: calc(clamp(14px, 1.8vw, 28px) + env(safe-area-inset-bottom)) !important;
  z-index: 12050 !important;
  pointer-events: auto !important;
  cursor: pointer;
  touch-action: manipulation;
}
.martin-assistant-panel,
.martin-assistant-panel.martin-disclosure {
  z-index: 12040 !important;
  pointer-events: auto !important;
}

.home-stage,
.coming-soon-stage,
.attestation-motivation {
  animation: oharaStageIn .55s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes oharaStageIn {
  from { opacity: 0; transform: translateY(14px) scale(.992); }
  to { opacity: 1; transform: none; }
}
.home-availability-card[style] {
  animation: oharaCardIn .5s cubic-bezier(.2,.7,.2,1) both;
}
.home-availability-card[style]:nth-child(2) { animation-delay: .06s; }
.home-availability-card[style]:nth-child(3) { animation-delay: .12s; }
@keyframes oharaCardIn {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

img.home-stage-scene,
img.coming-soon-scene,
.att-card-art img,
.attestation-motivation-art img,
.question-media-frame img,
.media-library-thumb img,
.portal-course-card img {
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
  object-position: center;
}

@media (prefers-reduced-motion: reduce) {
  .home-stage,
  .coming-soon-stage,
  .attestation-motivation,
  .home-availability-card[style],
  .home-availability-card[style]:hover,
  .martin-launcher:hover {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* ===== Portal polish 2026-07-23b: image integrity + motion + depth ===== */
:root {
  --ohara-surface: #f3f1ec;
  --ohara-ink: #151b20;
  --ohara-glass: rgba(255,255,255,.72);
  --ohara-depth: 0 24px 60px rgba(16,22,29,.12);
  --ohara-ease: cubic-bezier(.22,.7,.2,1);
  --ohara-dur: .45s;
}

.app-shell {
  background:
    radial-gradient(1200px 480px at 12% -8%, rgba(237,28,36,.07), transparent 60%),
    radial-gradient(900px 420px at 92% 0%, rgba(20,30,40,.05), transparent 55%),
    linear-gradient(180deg, #f7f5f1 0%, #eef1f4 100%);
}
.app-shell .main {
  position: relative;
}
.app-shell .main > #view {
  animation: oharaViewIn var(--ohara-dur) var(--ohara-ease) both;
}
@keyframes oharaViewIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* Image integrity: never stretch brand/media frames */
.media-frame,
.att-card-art,
.attestation-motivation-art,
.coming-soon-art,
.home-stage,
.portal-course-card,
.question-media-frame,
.media-library-thumb {
  overflow: hidden;
}
.att-card-art {
  aspect-ratio: 16 / 10;
  background: #ece7df;
}
.att-card-art img,
.attestation-motivation-art img,
.portal-course-card img,
.media-library-thumb img,
.course-hero-card img,
.lesson-image,
.getcourse-material-card img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}
.question-media-frame img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(72dvh, 760px);
  object-fit: contain !important;
  object-position: center !important;
}
img.home-stage-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 78% center;
  animation: none;
}
img.coming-soon-scene,
img.coming-soon-art {
  width: 100%;
  height: 100%;
  min-height: clamp(220px, 34vw, 420px);
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
}
.coming-soon-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 0;
  overflow: hidden;
  border-radius: 20px;
  background: linear-gradient(135deg, #171d24, #2a1216 120%);
  color: #fff;
  box-shadow: var(--ohara-depth);
}
.coming-soon-stage.is-library,
.coming-soon-stage.is-instructions {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(255,214,168,.16), transparent 50%),
    linear-gradient(145deg, #1b1411 0%, #2c1c16 45%, #12161c 100%);
}
.coming-soon-copy {
  padding: clamp(24px, 3vw, 48px);
  align-self: center;
}
.coming-soon-art,
.coming-soon-stage > img.coming-soon-scene {
  min-height: 100%;
  align-self: stretch;
}

/* Availability cards — cinematic art tiles */
.home-availability-card[style] {
  min-height: clamp(200px, 24vw, 280px);
  aspect-ratio: 4 / 3;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  transition: transform .3s var(--ohara-ease), box-shadow .3s var(--ohara-ease), filter .3s ease;
}
.home-availability-card[style]:hover {
  transform: translateY(-5px) scale(1.01);
  filter: saturate(1.05);
}
.home-availability-card.soon[style] {
  filter: saturate(.85);
}
.home-availability-grid {
  gap: 14px;
}

/* Home stage cinematic */
.home-stage {
  min-height: clamp(420px, 58vh, 680px);
  border: 0;
  box-shadow: var(--ohara-depth);
}
.home-stage-copy {
  background: linear-gradient(90deg, rgba(247,244,238,.94) 0%, rgba(247,244,238,.78) 58%, rgba(247,244,238,0) 100%);
  backdrop-filter: blur(2px);
}
.home-stage-status > span {
  background: var(--ohara-glass);
  backdrop-filter: blur(10px);
  transition: transform .2s ease, border-color .2s ease;
}
.home-stage-status > span:hover {
  transform: translateY(-2px);
  border-color: rgba(215,25,32,.28);
}

/* Cards / sections depth */
.card,
.team-overview-card,
.profile-checklist-card,
.instruction-admin-overview,
.instruction-group,
.getcourse-admin-section {
  border-color: rgba(22,29,34,.08);
  box-shadow: 0 14px 36px rgba(16,22,29,.06);
  transition: transform .22s var(--ohara-ease), box-shadow .22s var(--ohara-ease);
}
.team-overview-card:hover,
.profile-checklist-card:hover,
.instruction-group:hover {
  box-shadow: 0 20px 44px rgba(16,22,29,.1);
}
.att-card {
  transition: transform .25s var(--ohara-ease), box-shadow .25s var(--ohara-ease);
}
.att-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 48px rgba(16,22,29,.12);
}
.coming-soon-card {
  transition: transform .25s var(--ohara-ease), box-shadow .25s var(--ohara-ease), border-color .25s ease;
}
.coming-soon-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(16,22,29,.1);
}
.team-view-tabs button {
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.team-view-tabs button:hover { transform: translateY(-1px); }
.nav button {
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.nav button:hover { transform: translateX(2px); }
.btn {
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.btn:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.03);
}
.btn.primary {
  box-shadow: 0 12px 28px rgba(215,25,32,.22);
}

/* Attestation motivation */
.attestation-motivation {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(260px, .9fr);
  gap: 0;
  overflow: hidden;
  border-radius: 20px;
  background: linear-gradient(135deg, #141a20, #2a1014 130%);
  color: #fff;
  box-shadow: var(--ohara-depth);
  margin-bottom: 18px;
}
.attestation-motivation-copy {
  padding: clamp(24px, 3vw, 44px);
  align-self: center;
}
.attestation-motivation-art {
  position: relative;
  min-height: clamp(220px, 32vw, 360px);
  background: #0f1419;
}
.attestation-motivation-art img {
  position: absolute;
  inset: 0;
  animation: none;
}
.attestation-motivation-art > div {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 2;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,.88);
  color: #151b20;
  backdrop-filter: blur(10px);
}

/* Stagger reveal helpers */
.ohara-reveal {
  animation: oharaCardIn .5s var(--ohara-ease) both;
}
.home-availability-card:nth-child(1) { animation-delay: .02s; }
.home-availability-card:nth-child(2) { animation-delay: .08s; }
.home-availability-card:nth-child(3) { animation-delay: .14s; }
.coming-soon-card:nth-child(1) { animation: oharaCardIn .5s var(--ohara-ease) .04s both; }
.coming-soon-card:nth-child(2) { animation: oharaCardIn .5s var(--ohara-ease) .1s both; }
.coming-soon-card:nth-child(3) { animation: oharaCardIn .5s var(--ohara-ease) .16s both; }
.coming-soon-card:nth-child(4) { animation: oharaCardIn .5s var(--ohara-ease) .22s both; }

/* Sidebar tech-premium (keep login warmer) */
.app-shell .sidebar {
  background:
    radial-gradient(420px 220px at 50% 0%, rgba(237,28,36,.18), transparent 70%),
    linear-gradient(180deg, #10161d 0%, #0b1015 100%);
  border-right: 1px solid rgba(255,255,255,.06);
}
.app-shell .sidebar .user-mini {
  background: rgba(255,255,255,.07);
  backdrop-filter: blur(12px);
}

/* Mobile first overrides */
@media (max-width: 980px) {
  .home-stage {
    min-height: clamp(520px, 78vh, 720px);
  }
  .home-stage-copy {
    width: 100%;
    max-width: none;
    background: linear-gradient(180deg, rgba(247,244,238,.96) 0%, rgba(247,244,238,.82) 70%, rgba(247,244,238,.2) 100%);
  }
  img.home-stage-scene {
    object-position: center 28%;
    opacity: .92;
  }
  .home-availability-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .home-availability-card[style] {
    aspect-ratio: 16 / 10;
    min-height: 180px;
  }
  .coming-soon-stage,
  .attestation-motivation {
    grid-template-columns: minmax(0, 1fr);
  }
  .coming-soon-stage > img.coming-soon-scene,
  .coming-soon-art {
    order: -1;
    min-height: 220px;
    max-height: 280px;
  }
  .attestation-motivation-art {
    order: -1;
    min-height: 220px;
  }
  .home-stage-status {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 700px) {
  .topbar h1 { font-size: clamp(26px, 7vw, 34px); }
  .section-head h2 { font-size: clamp(22px, 6vw, 28px); }
  .home-stage-copy h2 {
    font-size: clamp(30px, 8.2vw, 42px);
    line-height: 1.08;
    letter-spacing: -0.02em;
    overflow-wrap: break-word;
    word-break: normal;
  }
  .home-stage-copy .welcome-greeting {
    letter-spacing: 0.06em;
    line-height: 1.35;
  }
  .home-stage-copy > p {
    line-height: 1.5;
    font-size: 15px;
  }
  .btn { width: 100%; }
  .home-stage-actions { width: 100%; }
  .home-stage-actions .btn { min-width: 0; flex: 1 1 100%; }
}

@media (max-width: 420px) {
  .home-stage {
    min-height: auto;
    padding-bottom: 12px;
  }
  .home-stage-copy {
    padding: 18px 16px 14px;
  }
  .home-stage-copy h2 {
    font-size: clamp(28px, 7.8vw, 36px);
  }
  .home-stage-status {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  .home-stage-status > span {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-shell .main > #view,
  .home-stage,
  .coming-soon-stage,
  .attestation-motivation,
  .home-availability-card,
  .coming-soon-card,
  .att-card,
  .ohara-reveal,
  img.home-stage-scene,
  .att-card-art img,
  .attestation-motivation-art img {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    filter: none !important;
  }
}

/* ===== Feedback polish 2026-07-23c: full Martin, equal cards, list→detail ===== */
img.home-stage-scene {
  object-fit: contain !important;
  object-position: right center !important;
  background: #f4efe6;
}
.home-stage {
  min-height: clamp(480px, 62vh, 720px);
}
.home-availability-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}
.home-availability-card[style],
.home-availability-card.active[style],
.home-availability-card.soon[style] {
  min-height: clamp(220px, 22vw, 280px) !important;
  height: 100%;
  aspect-ratio: 4 / 3;
  background-size: cover !important;
  background-position: center !important;
}
.attestation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
.att-card {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
  overflow: hidden;
}
.att-card-art {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.att-card-art img {
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  object-position: center 30% !important;
  transition: transform .35s cubic-bezier(.22,.7,.2,1), filter .35s ease;
}
.att-card:hover .att-card-art img {
  transform: scale(1.03);
  filter: saturate(1.06);
}
.attestation-motivation {
  background:
    radial-gradient(ellipse at 80% 20%, rgba(255,210,180,.18), transparent 50%),
    linear-gradient(135deg, #f7f3ec 0%, #ebe4d8 45%, #dfe7ea 100%) !important;
  color: #151b20 !important;
  border: 1px solid rgba(22,29,34,.08);
}
.attestation-motivation-copy { color: #151b20; }
.attestation-motivation h2 { color: #11181d !important; }
.attestation-motivation p { color: #4f5b62 !important; }
.attestation-motivation .eyebrow { color: #c9141d !important; }
.attestation-motivation-art {
  background: transparent !important;
  min-height: clamp(260px, 36vw, 420px);
}
.attestation-motivation-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  object-position: center bottom !important;
}
.attestation-motivation-art > div { display: none !important; }
.attestation-continue-btn,
.attestation-motivation-copy .btn.primary {
  background: #d71920;
  color: #fff;
  border: 0;
  box-shadow: 0 14px 32px rgba(215,25,32,.28);
  font-weight: 900;
}
.attestation-continue-btn:hover,
.attestation-motivation-copy .btn.primary:hover {
  filter: brightness(1.05);
}

.admin-detail-shell,
.admin-detail-panel {
  animation: oharaStageIn .35s cubic-bezier(.22,.7,.2,1) both;
}
.admin-detail-crumb {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}
.admin-detail-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(10,14,18,.55);
  backdrop-filter: blur(6px);
}
.admin-detail-overlay .admin-detail-panel,
.employee-card-modal.admin-detail-overlay .employee-card-panel {
  width: min(920px, 100%);
  max-height: min(90vh, 920px);
  overflow: auto;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 28px 72px rgba(10,15,19,.35);
}
.question-bank-list-only {
  grid-template-columns: minmax(0, 1fr) !important;
}
.question-wizard-panel .wizard-steps span.done {
  background: #11181d;
  color: #fff;
  opacity: .72;
}
.question-wizard-panel .wizard-step-panel[hidden] { display: none !important; }
.wizard-type-chooser button.active {
  border-color: #d71920;
  box-shadow: 0 0 0 2px rgba(215,25,32,.18);
}
.bank-question-list-item.status-unused {
  background: #fff8e6;
  border-color: #e2c56a;
}
.bank-question-list-item.status-unused .bank-question-list-meta small {
  color: #9a6b00;
  font-weight: 900;
}
.bank-unused-hint {
  margin: 0 0 14px;
}
.block-picker-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.scoped-question-bank-workspace {
  max-width: 920px;
}

@media (max-width: 980px) {
  .home-availability-grid,
  .attestation-grid {
    grid-template-columns: 1fr;
  }
  img.home-stage-scene {
    object-position: center 28% !important;
  }
}

/* ===== Question administration UX: separate library, block and detail screens ===== */
.block-library,
.block-detail-screen,
.question-library-screen,
.question-detail-screen {
  width: min(1320px, 100%);
  margin-inline: auto;
}
.block-library-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.block-library-card {
  min-height: 230px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 24px;
  text-align: left;
  color: var(--ink);
  border: 1px solid #e2e6e9;
  background: #fff;
  box-shadow: 0 16px 36px rgba(14, 23, 29, .08);
}
.block-library-card:hover {
  transform: translateY(-3px);
  border-color: rgba(215, 25, 32, .36);
  box-shadow: 0 22px 44px rgba(14, 23, 29, .13);
}
.block-library-card h3 {
  margin: auto 0 0;
  font-size: clamp(25px, 2.2vw, 34px);
}
.block-library-card p,
.block-library-card small { color: var(--muted); }
.block-library-card > b { color: var(--red); }

.block-detail-screen { max-width: 1120px; }
.block-detail-screen .admin-detail-crumb,
.question-detail-screen .admin-detail-crumb,
.question-library-screen .admin-detail-crumb {
  margin-bottom: 18px;
}
.block-settings-card,
.block-questions-section { padding: clamp(20px, 3vw, 32px); }
.block-settings-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.block-settings-form > .btn {
  grid-column: 1 / -1;
  justify-self: start;
  min-width: 240px;
}
.block-questions-section { margin-top: 18px; }
.block-questions-section > .section-head {
  align-items: center;
  gap: 18px;
}
.block-question-primary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.block-assigned-list { display: grid; gap: 9px; }
.block-assigned-question {
  min-height: 92px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 15px 16px;
  border: 1px solid #e3e7e9;
  border-radius: 12px;
  background: #fff;
}
.block-assigned-index {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #11181d;
  font-weight: 900;
}
.block-assigned-copy {
  min-width: 0;
  display: grid;
  gap: 7px;
}
.block-assigned-copy > b {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.35;
}
.block-assigned-copy small { color: var(--muted); }
.block-assigned-actions { display: flex; gap: 8px; }
.block-empty-state {
  min-height: 260px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  padding: 36px;
  text-align: center;
  border: 1px dashed #cdd4d8;
  border-radius: 14px;
  background: #f8fafb;
}
.block-empty-state h3,
.block-empty-state p { margin: 0; }
.block-empty-state p { color: var(--muted); }

.question-library-heading { align-items: flex-end; }
.question-bank-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1.6fr) repeat(4, minmax(150px, .8fr));
  gap: 10px;
  align-items: end;
  margin-bottom: 16px;
  padding: 15px;
  border: 1px solid #e2e6e9;
  border-radius: 14px;
  background: #fff;
}
.question-bank-toolbar > label,
.question-bank-toolbar > details { min-width: 0; }
.multi-check-filter {
  position: relative;
  min-width: 0;
}
.multi-check-filter > summary {
  min-height: 44px;
  display: grid;
  gap: 3px;
  padding: 7px 34px 7px 12px;
  border: 1px solid #d8dde0;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  list-style: none;
}
.multi-check-filter > summary::-webkit-details-marker { display: none; }
.multi-check-filter > summary::after {
  content: "⌄";
  position: absolute;
  right: 12px;
  top: 15px;
}
.multi-check-filter > summary span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}
.multi-check-filter > summary b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}
.multi-check-menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  right: 0;
  width: min(340px, 90vw);
  max-height: 360px;
  overflow: auto;
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid #d8dde0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 20px 54px rgba(9, 16, 21, .2);
}
.multi-check-menu label {
  display: flex;
  gap: 9px;
  align-items: center;
  padding: 9px;
  border-radius: 8px;
}
.multi-check-menu label:hover { background: #f4f6f7; }
.multi-check-menu input { accent-color: var(--red); }
.multi-check-menu span { display: flex; gap: 6px; font-size: 13px; }

.question-bank-rows { display: grid; gap: 9px; }
.question-bank-row {
  min-height: 132px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 16px 18px;
  border: 1px solid #e0e5e8;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(17, 24, 29, .045);
}
.question-bank-row:has(.question-select-hit) {
  grid-template-columns: 32px minmax(0, 1fr) auto;
}
.question-bank-row.selected {
  border-color: rgba(215, 25, 32, .48);
  box-shadow: 0 0 0 2px rgba(215, 25, 32, .1);
}
.question-select-hit {
  align-self: stretch;
  display: grid;
  place-items: center;
}
.question-select-hit input {
  width: 20px;
  height: 20px;
  accent-color: var(--red);
}
.question-bank-row-copy {
  min-width: 0;
  display: grid;
  gap: 7px;
}
.question-bank-row-copy > b {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 16px;
  line-height: 1.35;
}
.question-bank-row-copy > small { color: var(--muted); }
.question-bank-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
}
.question-bank-row-actions {
  max-width: 440px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}
.question-bank-move {
  display: flex;
  gap: 6px;
}
.question-bank-move select { max-width: 180px; }
.question-selection-bar {
  position: sticky;
  z-index: 20;
  bottom: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
  padding: 14px 18px;
  border-radius: 13px;
  color: #fff;
  background: #11181d;
  box-shadow: 0 18px 50px rgba(7, 13, 18, .28);
}

.question-detail-screen { max-width: 980px; }
.question-editor-nav {
  position: sticky;
  z-index: 24;
  top: 10px;
  display: grid;
  grid-template-columns: auto minmax(130px, auto) minmax(220px, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 14px;
  padding: 10px;
  border: 1px solid #dce1e4;
  border-radius: 13px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 14px 34px rgba(17, 24, 29, .11);
  backdrop-filter: blur(10px);
}
.question-editor-nav-status {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-align: center;
}
.question-editor-jump,
.question-editor-jump select {
  width: 100%;
  min-width: 0;
}
.question-linear-card { padding: clamp(20px, 3.5vw, 38px); }
#questionLinearForm { display: grid; gap: 14px; }
#questionDefinitionFlow { display: grid; gap: 14px; }
#questionAfterAnswerFlow { display: grid; gap: 14px; }
#questionDefinitionFlow[hidden],
#questionAnswerStep[hidden],
#questionAfterAnswerFlow[hidden] { display: none !important; }
.question-linear-step {
  display: grid;
  gap: 16px;
  padding: 22px;
  border: 1px solid #e1e5e8;
  border-radius: 14px;
  background: #fff;
}
.question-step-title {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.question-step-title > span {
  flex: 0 0 auto;
  min-width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0 8px;
  border-radius: 99px;
  color: #fff;
  background: #11181d;
  font-size: 12px;
  font-weight: 900;
}
.question-step-title h3,
.question-step-title p { margin: 0; }
.question-step-title p { margin-top: 4px; color: var(--muted); }
#questionRuleList { display: grid; gap: 12px; }
.question-audience-rule {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 15px;
  padding: 16px;
  border: 1px solid #dfe4e7;
  border-radius: 12px;
  background: #f8fafb;
}
.question-rule-head {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.question-position-options {
  min-width: 0;
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  border: 0;
}
.question-position-all,
.question-position-grid label {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid #dfe4e7;
  border-radius: 9px;
  background: #fff;
}
.question-position-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}
.question-position-grid label > span {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.question-position-grid small {
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.question-position-options input,
.question-status-options input { accent-color: var(--red); }
.question-min-day,
.question-points-field { display: grid; align-content: start; gap: 6px; }
.question-points-field { max-width: 220px; }
.add-question-rule { justify-self: start; }
.question-linear-step textarea { min-height: 120px; }
.question-inline-image-upload {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
}
.question-main-image-preview {
  width: min(100%, 720px);
  min-width: 0;
  display: grid;
  gap: 8px;
  align-content: start;
  justify-items: center;
}
.question-main-image-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 10px;
  background: #f4f6f7;
}
.question-main-image-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: block;
  object-fit: contain;
}
.question-main-image-click-hint {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  text-align: center;
}
.question-main-image-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.question-image-dropzone {
  position: relative;
  min-height: 148px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: 16px;
  overflow: hidden;
  border: 2px dashed #c9d0d5;
  border-radius: 14px;
  color: var(--ink);
  background: linear-gradient(145deg, #fff, #f6f8f9);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.question-image-dropzone:hover,
.question-image-dropzone:focus-within,
.question-image-dropzone.is-dragging {
  border-color: var(--red);
  background: #fff7f7;
  box-shadow: 0 0 0 4px rgba(215, 25, 32, .08);
}
.question-image-dropzone.is-dragging { transform: translateY(-2px); }
.question-image-dropzone.is-uploading {
  pointer-events: none;
  opacity: .68;
}
.question-inline-image-upload.has-image .question-image-dropzone {
  border-style: solid;
  background: #fff;
}
.question-inline-image-upload.is-image-error .question-image-dropzone {
  border-color: #c9141d;
  background: #fff7f7;
}
.question-image-dropzone input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}
.question-main-image-empty {
  width: min(100%, 640px);
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 7px 14px;
  align-items: center;
}
.question-main-image-preview[hidden],
.question-main-image-empty[hidden],
.question-main-image-actions > [hidden] {
  display: none !important;
}
.question-image-dropzone-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #fff;
  background: var(--red);
  font-size: 30px;
  font-weight: 500;
}
.question-image-dropzone-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.question-image-dropzone-copy b { font-size: 16px; }
.question-image-dropzone-copy small,
.question-image-format-note { color: var(--muted); line-height: 1.45; }
.question-image-format-note {
  display: block;
  font-size: 12px;
  font-weight: 750;
}
.question-inline-image-meta {
  min-height: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 14px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}
#questionInlineImageStatus { color: #2d7044; }
.question-live-preview-step {
  border-color: #cfd6da;
  background: #f4f6f7;
}
.question-live-preview-card {
  overflow: hidden;
  border: 1px solid #d9dee1;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(17, 24, 29, .08);
}
.question-live-preview-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 14px 18px;
  color: #fff;
  background: #11181d;
}
.question-live-preview-head > div { display: grid; gap: 2px; }
.question-live-preview-head small { color: #bfc8ce; }
.question-live-preview-head > span {
  flex: 0 0 auto;
  padding: 6px 9px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 99px;
  font-size: 11px;
  font-weight: 850;
}
.question-live-preview-surface {
  padding: clamp(18px, 3vw, 30px);
  border: 0;
  border-radius: 0;
}
.question-live-preview-surface .question-prompt-stack {
  display: grid;
  gap: 14px;
}
.question-live-preview-surface .question-media-frame {
  position: relative;
  width: 100%;
  max-width: 1600px;
  aspect-ratio: 4 / 3;
  margin-inline: auto;
}
.question-live-preview-surface .question-media-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: 1600px;
  max-height: 1200px;
  object-fit: contain !important;
}
.question-live-media-placeholder {
  width: min(100%, 640px);
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  margin-inline: auto;
  padding: 24px;
  color: #77828a;
  text-align: center;
  border: 1px dashed #c8d0d5;
  border-radius: 10px;
  background: #f7f9fa;
}
.question-live-answer-preview { pointer-events: none; }
.question-live-answer-preview .answer-option { cursor: default; }
.question-linear-step .bank-answer-editor {
  margin: 0;
  padding: 0;
  border: 0;
}
.media-action-buttons > span {
  display: inline-flex;
  padding: 8px 11px;
  border: 1px solid #dce1e4;
  border-radius: 8px;
  background: #f8fafb;
  font-size: 12px;
  font-weight: 800;
}
.question-linear-step .bank-media-picker {
  margin: 0;
  padding: 16px;
}
.question-status-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}
.question-status-options label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 14px;
  border: 1px solid #dfe4e7;
  border-radius: 11px;
}
.question-status-options span { display: grid; gap: 3px; }
.question-status-options small { color: var(--muted); }
.question-save-actions { display: flex; flex-wrap: wrap; gap: 9px; }

/* Keep full-bleed home artwork out of the click target layer. */
.home-stage-scene { pointer-events: none; }
.home-stage-copy,
.home-stage-actions,
.home-availability-card { pointer-events: auto; }

@media (max-width: 1180px) {
  .block-library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .question-bank-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .question-bank-toolbar .search-box { grid-column: 1 / -1; }
  .question-bank-row { grid-template-columns: minmax(0, 1fr); }
  .question-bank-row:has(.question-select-hit) { grid-template-columns: 32px minmax(0, 1fr); }
  .question-bank-row:has(.question-select-hit) .question-bank-row-actions { grid-column: 2; }
  .question-bank-row-actions { max-width: none; justify-content: flex-start; }
}

@media (max-width: 760px) {
  .block-library-grid,
  .block-settings-form,
  .question-bank-toolbar,
  .question-status-options { grid-template-columns: minmax(0, 1fr); }
  .block-library-card { min-height: 190px; }
  .block-assigned-question { grid-template-columns: 36px minmax(0, 1fr); }
  .block-assigned-actions { grid-column: 2; flex-wrap: wrap; }
  .block-questions-section > .section-head { align-items: flex-start; }
  .block-question-primary-actions,
  .block-question-primary-actions .btn { width: 100%; }
  .question-library-heading { align-items: flex-start; }
  .question-library-heading > .btn { width: 100%; }
  .question-bank-row,
  .question-bank-row:has(.question-select-hit) {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    padding: 14px;
  }
  .question-bank-row:has(.question-select-hit) .question-select-hit,
  .question-bank-row:has(.question-select-hit) .question-bank-row-actions { grid-column: 1; }
  .question-select-hit { justify-items: start; }
  .question-bank-row-actions,
  .question-bank-move { width: 100%; }
  .question-bank-move { flex-wrap: wrap; }
  .question-bank-move select { width: 100%; max-width: none; }
  .question-selection-bar { bottom: 8px; }
  .question-audience-rule { grid-template-columns: minmax(0, 1fr); }
  .question-rule-head { grid-column: 1; }
  .question-position-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .question-points-field { max-width: none; }
  .question-linear-step { padding: 16px; }
  .question-inline-image-upload {
    grid-template-columns: minmax(0, 1fr);
  }
  .question-main-image-preview,
  .question-image-dropzone,
  .question-inline-image-meta {
    grid-column: 1;
  }
  .question-editor-nav {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .question-editor-nav-status,
  .question-editor-jump {
    grid-column: 1 / -1;
  }
  .question-editor-nav .btn {
    width: 100%;
  }
  .question-image-dropzone {
    grid-template-columns: minmax(0, 1fr);
    min-height: 116px;
    padding: 12px;
  }
  .question-main-image-empty {
    grid-template-columns: 42px minmax(0, 1fr);
  }
  .question-image-dropzone-icon {
    width: 42px;
    height: 42px;
    font-size: 25px;
  }
  .question-live-preview-head { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 430px) {
  .bank-option-media-preview {
    grid-template-columns: minmax(0, 1fr);
  }
  .bank-option-media-frame {
    width: min(100%, 180px);
  }
}

/* Martin v4 runtime integration: explicit, crop-safe illustration surfaces. */
.home-stage-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  overflow: hidden;
  pointer-events: none;
}
.home-stage-media .home-stage-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: right center;
  animation: none;
  transform: none;
}
.attestation-motivation {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(520px, auto);
  min-height: clamp(520px, 58vh, 650px);
  padding: 0;
}
.attestation-motivation::before { display: none; }
.attestation-motivation-copy {
  position: relative;
  z-index: 2;
  grid-row: 1;
  width: min(52%, 620px);
  max-width: 620px;
  align-self: center;
  padding: clamp(34px, 4.5vw, 68px);
  background: linear-gradient(90deg, rgba(248,244,236,.98) 0%, rgba(248,244,236,.9) 70%, rgba(248,244,236,0) 100%);
}
.attestation-motivation-art {
  position: absolute;
  inset: 0;
  z-index: 1;
  min-height: 0;
  background: transparent;
  pointer-events: none;
}
.attestation-motivation-art img {
  position: absolute;
  inset: 0;
  display: block;
  max-width: none;
  max-height: none;
  object-fit: contain !important;
  object-position: right center !important;
  filter: none;
}
.home-stage-copy { position: relative; z-index: 2; }
.home-availability-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}
.home-availability-card[style],
.home-availability-card.active[style],
.home-availability-card.soon[style] {
  min-height: 0 !important;
  height: auto !important;
  aspect-ratio: 4 / 3;
  background-position: center;
  background-size: cover;
}
.home-availability-card::before { background-position: center; background-size: cover; }
.home-availability-card:nth-child(1)::before { background-position: 50% 48%; }
.home-availability-card:nth-child(2)::before { background-position: 50% 45%; }
.home-availability-card:nth-child(3)::before { background-position: 50% 46%; }

.attestation-grid,
.block-library-grid { align-items: stretch; grid-auto-rows: 1fr; }
.att-card,
.block-library-card { height: 100%; }
.att-card-art {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.att-card-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: none;
}
.att-card:hover .att-card-art img {
  transform: none;
  filter: none;
}
.attestation-motivation-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  animation: none;
  transform: none;
}
.coming-soon-art {
  width: 100%;
  height: auto;
  max-height: 560px;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  object-position: center;
}

.martin-face-picture {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.martin-launcher-face,
.martin-assistant-avatar {
  background: var(--ohara-paper);
}
.martin-launcher-face .martin-face-picture img,
.martin-assistant-avatar .martin-face-picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 50%;
  transform: none;
}
.martin-companion {
  animation: martinV4Idle 5.8s ease-in-out infinite;
  transform-origin: 50% 100%;
}
@keyframes martinV4Idle {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  45% { transform: translate3d(0, -4px, 0) rotate(-.7deg); }
  55% { transform: translate3d(0, -4px, 0) rotate(.7deg); }
}

.login-martin-wrap {
  width: min(100%, 450px);
  overflow: hidden;
  border-radius: 22px;
  background: var(--ohara-paper);
}
.login-martin-wrap .login-martin {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: contain;
  object-position: center bottom;
}

.admin-module-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 250px) auto;
  align-items: center;
}
.admin-module-hero-art {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 14px;
}
.block-library-art {
  display: block;
  width: calc(100% + 48px);
  height: auto;
  margin: -24px -24px 2px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  border-radius: 14px 14px 0 0;
}
.block-library-empty-art,
.block-empty-art {
  display: block;
  width: min(100%, 330px);
  height: auto;
  margin: 0 auto 14px;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  object-position: center;
}
.question-editor-heading,
.question-library-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}
.question-editor-heading > .question-editor-heading-art,
.question-library-heading > .question-library-art {
  display: block;
  width: clamp(128px, 16vw, 210px);
  height: auto;
  max-height: 150px;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  object-position: center;
}
.question-library-heading > .btn { grid-column: 1 / -1; justify-self: start; }
.question-audience-rule {
  grid-template-columns: minmax(0, 1.6fr) minmax(180px, .4fr);
}
.question-rule-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

@media (max-width: 980px) {
  .home-stage {
    display: grid;
    grid-template-rows: auto auto;
    min-height: 0;
  }
  .home-stage-copy {
    grid-row: 2;
    width: 100%;
    max-width: none;
  }
  .home-stage-media {
    position: relative;
    inset: auto;
    grid-row: 1;
    width: min(100%, 390px);
    margin-inline: auto;
    aspect-ratio: 4 / 5;
  }
  .home-stage-media .home-stage-scene { object-position: center 38% !important; }
  .home-availability-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-availability-card:last-child { grid-column: 1 / -1; width: calc(50% - 7px); justify-self: center; }
  .admin-module-hero { grid-template-columns: minmax(0, 1fr) minmax(160px, 220px); }
  .admin-module-hero .user-scope-badge { grid-column: 1 / -1; justify-self: start; }
}

@media (max-width: 760px) {
  .home-stage-media {
    width: min(100%, 430px);
    margin-inline: auto;
    aspect-ratio: 9 / 16;
  }
  .home-availability-grid { grid-template-columns: minmax(0, 1fr); }
  .home-availability-card:last-child { grid-column: auto; width: 100%; }
  .admin-module-hero,
  .question-editor-heading,
  .question-library-heading { grid-template-columns: minmax(0, 1fr); }
  .admin-module-hero-art {
    width: min(100%, 420px);
    justify-self: center;
  }
  .question-editor-heading > .question-editor-heading-art,
  .question-library-heading > .question-library-art {
    grid-row: 2;
    width: min(100%, 230px);
    justify-self: center;
  }
  .question-library-heading > .btn {
    grid-row: 3;
    width: 100%;
  }
  .question-audience-rule { grid-template-columns: minmax(0, 1fr); }
  .question-rule-actions { grid-column: 1; }
  .attestation-motivation {
    grid-template-rows: auto auto;
    min-height: 0;
  }
  .attestation-motivation-copy {
    grid-row: 1;
    width: 100%;
    max-width: none;
    padding: clamp(24px, 7vw, 42px);
    background: var(--ohara-paper);
  }
  .attestation-motivation-art {
    position: relative;
    inset: auto;
    grid-row: 2;
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
  .attestation-motivation-art img { object-position: center !important; }
}

@media (prefers-reduced-motion: reduce) {
  .martin-companion,
  .home-stage-media .home-stage-scene,
  .attestation-motivation-art img {
    animation: none !important;
    transform: none !important;
  }
}

/* Remove the superseded tech-grid/sheens from the editorial Martin v4 layer. */
body { background: #f4f1e9; }
.app-shell .main::before,
.app-shell .sidebar::before,
.app-shell .logo-mark::after,
.app-shell .nav button::after {
  display: none;
}

/* End-to-end ordering controls and dynamic attestation blocks. */
.block-assigned-question {
  grid-template-columns: 44px 42px minmax(0, 1fr) auto;
}
.question-drag-handle,
.answer-drag-handle,
.question-move-up,
.question-move-down,
.answer-move-up,
.answer-move-down {
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid #d8dee2;
  border-radius: 9px;
  color: #3e4a52;
  background: #f7f9fa;
  font: inherit;
  font-size: 20px;
  font-weight: 950;
  cursor: pointer;
  touch-action: none;
}
.question-drag-handle,
.answer-drag-handle {
  color: #66737b;
  font-size: 25px;
  cursor: grab;
}
.question-drag-handle:active,
.answer-drag-handle:active { cursor: grabbing; }
.question-move-up:hover,
.question-move-down:hover,
.answer-move-up:hover,
.answer-move-down:hover,
.question-drag-handle:hover,
.answer-drag-handle:hover {
  color: var(--red);
  border-color: rgba(215,25,32,.42);
  background: #fff7f7;
}
.question-move-up:disabled,
.question-move-down:disabled,
.answer-move-up:disabled,
.answer-move-down:disabled {
  opacity: .35;
  cursor: not-allowed;
}
.block-assigned-actions,
.answer-row-actions,
.bank-answer-editor-actions,
.block-library-actions,
.block-definition-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.sort-live-placeholder {
  min-height: 52px;
  border: 2px dashed rgba(215,25,32,.58);
  border-radius: 12px;
  background: rgba(215,25,32,.065);
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.76);
}
.has-sort-active { cursor: grabbing; }
.is-sorting {
  opacity: .28;
  border-color: rgba(215,25,32,.5) !important;
}
.bank-choice-row {
  grid-template-columns: 44px 46px minmax(0,1fr) auto;
}
.bank-choice-row .bank-option-media-field {
  grid-column: 3 / -1;
  grid-row: 2;
}
.bank-choice-row .answer-row-actions {
  grid-column: 4;
  grid-row: 1;
}
.bank-match-row {
  grid-template-columns: 44px minmax(0,1fr) 32px minmax(0,1fr) auto;
}
.answer-row-actions { align-self: end; }
.bank-answer-editor-actions { margin-top: 10px; }

.block-library-actions { margin-top: auto; }
.block-library-card > h3 { margin-top: 0; }
.block-library-card.is-archived { opacity: .68; background: #f3f4f5; }
.block-library-create {
  justify-content: center;
  border: 2px dashed #c9d0d4;
  background: #f8fafb;
}
.block-library-create > span {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--red);
  font-size: 34px;
  font-weight: 900;
}
.block-definition-screen { width: min(1120px, 100%); margin-inline: auto; }
.block-definition-card { padding: clamp(20px, 3vw, 34px); }
.block-definition-form { display: grid; gap: 22px; }
.block-image-library,
.block-default-settings {
  margin: 0;
  padding: 18px;
  border: 1px solid #dce2e5;
  border-radius: 14px;
  background: #f8fafb;
}
.block-image-library > legend,
.block-default-settings > legend {
  padding: 0 8px;
  font-weight: 950;
}
.block-image-library > div {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.block-image-library > div > label {
  position: relative;
  display: grid;
  gap: 6px;
  padding: 7px;
  border: 2px solid transparent;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
}
.block-image-library > div > label:has(input:checked) {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(215,25,32,.1);
}
.block-image-library > div input { position: absolute; opacity: 0; }
.block-image-library img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  border-radius: 8px;
  background: #eef1f2;
}
.block-image-library label > span { color: var(--muted); font-size: 12px; font-weight: 850; }
.block-image-upload { display: grid; gap: 8px; margin-top: 14px; }
.block-default-settings .form-grid { margin-bottom: 14px; }

/* Accepted v4 face fills a neutral, safe-area-aware launcher circle. */
.martin-launcher.martin-companion {
  right: calc(clamp(14px, 1.8vw, 28px) + env(safe-area-inset-right));
  bottom: calc(clamp(14px, 1.8vw, 28px) + env(safe-area-inset-bottom));
  padding: 4px;
  border-color: #cbd1d4;
  background: #e9ecee;
  box-shadow: 0 16px 38px rgba(18,26,31,.24);
  animation: martinLauncherHang 5.6s ease-in-out infinite;
}
.martin-launcher .martin-launcher-face {
  width: 60px;
  height: 60px;
  min-width: 60px;
  border: 0;
  background: #e9ecee;
}
.martin-launcher .martin-face-picture img {
  object-fit: contain;
  object-position: center;
  transform: scale(1.12);
}
.martin-launcher.martin-companion:hover {
  animation-play-state: paused;
  transform: translateY(-4px) scale(1.035);
}
.martin-launcher.martin-companion:active { transform: translateY(-1px) scale(.98); }
@keyframes martinLauncherHang {
  0%, 100% { transform: translate3d(0,0,0) rotate(0); }
  42% { transform: translate3d(0,-4px,0) rotate(-.8deg); }
  58% { transform: translate3d(0,-4px,0) rotate(.8deg); }
}

/* Large integrated login scene; no small white cutout card. */
.login-hero-stage {
  grid-template-columns: minmax(0, 1.5fr) minmax(210px, .5fr);
  min-height: min(72vh, 760px);
  gap: clamp(14px, 2vw, 32px);
}
.login-martin-wrap {
  width: min(115%, 760px);
  max-width: none;
  overflow: visible;
  border-radius: 0;
  background: transparent;
  filter: drop-shadow(0 30px 44px rgba(0,0,0,.3));
}
.login-martin-wrap .login-martin {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  object-position: center;
  border-radius: 0;
}
.login-hero-core { align-self: center; padding-bottom: 0; }

/* Crop-safe corporate banners use the complete 4:3 composition. */
.coming-soon-stage {
  grid-template-columns: minmax(0, 1fr) minmax(360px, .82fr);
  min-height: clamp(430px, 42vw, 570px);
}
.coming-soon-stage .coming-soon-copy { width: 100%; }
img.coming-soon-art,
.coming-soon-stage img.coming-soon-scene {
  position: absolute;
  inset: 18px 18px 18px auto;
  width: min(48%, 650px);
  height: calc(100% - 36px);
  max-height: none;
  padding: 0;
  aspect-ratio: auto;
  object-fit: contain !important;
  object-position: center !important;
}
.coming-soon-stage.is-instructions .coming-soon-copy { margin-left: auto; }
.coming-soon-stage.is-instructions img.coming-soon-art {
  inset: 18px auto 18px 18px;
}

@media (max-width: 980px) {
  .block-image-library > div { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .block-assigned-question {
    grid-template-columns: 44px 42px minmax(0, 1fr);
  }
  .block-assigned-actions { grid-column: 3; justify-content: flex-start; }
}

@media (max-width: 760px) {
  .login-panel { grid-row: 1; }
  .login-hero {
    grid-row: 2;
    min-height: 0;
    padding: 22px;
  }
  .login-hero-stage { grid-template-columns: 1fr; min-height: 0; }
  .login-hero-core { order: 1; }
  .login-martin-wrap {
    order: 2;
    width: min(100%, 520px);
  }
  .martin-launcher,
  .martin-launcher.martin-companion {
    top: auto;
    right: calc(14px + env(safe-area-inset-right));
    bottom: calc(14px + env(safe-area-inset-bottom));
  }
  .coming-soon-stage {
    display: flex;
    min-height: 0;
    flex-direction: column;
  }
  .coming-soon-stage .coming-soon-copy {
    order: 1;
    width: 100%;
    margin: 0;
    padding: 24px 20px;
  }
  img.coming-soon-art,
  .coming-soon-stage img.coming-soon-scene,
  .coming-soon-stage.is-instructions img.coming-soon-art {
    position: relative;
    inset: auto;
    order: 2;
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    padding: 0 12px 12px;
    object-fit: contain !important;
  }
  .block-image-library > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .block-assigned-question {
    grid-template-columns: 44px 42px minmax(0, 1fr);
    align-items: start;
  }
  .block-assigned-copy { grid-column: 2 / -1; }
  .block-assigned-actions { grid-column: 2 / -1; }
  .bank-choice-row {
    grid-template-columns: 44px 46px minmax(0, 1fr);
  }
  .bank-choice-row .bank-correct-control {
    width: 46px;
    grid-template-columns: 44px;
  }
  .bank-choice-row .bank-correct-control::after {
    display: none;
  }
  .bank-choice-row > label:not(.bank-correct-control) { grid-column: 3; }
  .bank-choice-row .bank-option-media-field {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  .bank-choice-row .answer-row-actions {
    grid-column: 2 / -1;
    grid-row: auto;
  }
  .bank-option-media-preview {
    grid-template-columns: minmax(96px, 132px) minmax(0, 1fr);
  }
  .bank-match-row { grid-template-columns: 44px minmax(0, 1fr); }
  .bank-match-row > label { grid-column: 2; }
  .bank-match-row .bank-match-arrow { grid-column: 2; }
  .answer-row-actions { grid-column: 2 / -1; }
  .bank-answer-editor-actions,
  .block-definition-actions { align-items: stretch; flex-direction: column; }
  .bank-answer-editor-actions .btn,
  .block-definition-actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .martin-launcher.martin-companion,
  .login-martin-wrap,
  .login-martin,
  .coming-soon-art {
    animation: none !important;
    transform: none !important;
  }
}

/* School motion system: warm paper, pencils and lightweight transform-only movement. */
:root {
  --motion-fast: 160ms;
  --motion-medium: 360ms;
  --motion-slow: 900ms;
  --motion-ambient: 28s;
  --motion-ambient-alt: 35s;
  --ease-school: cubic-bezier(.22, .72, .22, 1);
  --glass-light: rgba(255, 255, 255, .72);
  --glass-red: rgba(207, 18, 29, .82);
  --glass-line: rgba(255, 255, 255, .56);
}

body {
  min-height: 100%;
  background:
    radial-gradient(circle at 78% 8%, rgba(239, 188, 89, .2), transparent 31%),
    radial-gradient(circle at 16% 22%, rgba(195, 35, 45, .09), transparent 28%),
    linear-gradient(145deg, #f7f2e8, #eef1ec 52%, #f5eadb);
}
.app-shell,
.login-shell {
  position: relative;
  isolation: isolate;
}
.app-shell::before,
.app-shell::after,
.login-shell::before,
.login-shell::after {
  content: "";
  position: fixed;
  inset: -8%;
  z-index: -1;
  pointer-events: none;
  opacity: .42;
}
.app-shell::before,
.login-shell::before {
  background:
    linear-gradient(112deg, transparent 0 67%, rgba(224, 43, 50, .12) 67.2% 67.6%, transparent 67.8%),
    linear-gradient(106deg, transparent 0 74%, rgba(41, 120, 188, .11) 74.1% 74.45%, transparent 74.7%),
    linear-gradient(118deg, transparent 0 81%, rgba(235, 171, 40, .15) 81.15% 81.55%, transparent 81.8%),
    radial-gradient(circle at 72% 24%, rgba(252, 216, 143, .34), transparent 34%);
  animation: schoolAmbientA var(--motion-ambient) ease-in-out infinite alternate;
}
.app-shell::after,
.login-shell::after {
  background:
    radial-gradient(ellipse at 22% 76%, rgba(115, 166, 117, .18), transparent 34%),
    radial-gradient(ellipse at 82% 70%, rgba(196, 69, 77, .12), transparent 30%),
    repeating-linear-gradient(172deg, transparent 0 56px, rgba(84, 71, 54, .028) 57px 58px);
  animation: schoolAmbientB var(--motion-ambient-alt) ease-in-out infinite alternate;
}
body[data-visual-theme="expressive"] .app-shell::before,
body[data-visual-theme="login"] .login-shell::before { opacity: .62; }
body[data-visual-theme="expressive"] .app-shell::after,
body[data-visual-theme="login"] .login-shell::after { opacity: .52; }
body[data-visual-theme="calm"] .app-shell::before,
body[data-visual-theme="calm"] .app-shell::after {
  opacity: .16;
  animation-duration: 46s;
}
@keyframes schoolAmbientA {
  0% { opacity: .28; transform: translate3d(-1.2%, -.8%, 0) scale(1); }
  52% { opacity: .62; }
  100% { opacity: .38; transform: translate3d(1.2%, .8%, 0) scale(1.025); }
}
@keyframes schoolAmbientB {
  0% { opacity: .5; transform: translate3d(.8%, -1%, 0) scale(1.015); }
  100% { opacity: .24; transform: translate3d(-.8%, 1%, 0) scale(1); }
}

/* A quiet inter-section Martin flight with pencil trails. */
.martin-motion-strip {
  position: relative;
  height: 98px;
  margin: -4px 0 clamp(18px, 2.5vw, 34px);
  overflow: hidden;
  contain: layout paint;
  pointer-events: none;
  border-block: 1px solid rgba(92, 78, 58, .12);
  background:
    linear-gradient(90deg, rgba(255,255,255,.3), rgba(250,244,231,.8) 18% 82%, rgba(255,255,255,.24)),
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(86,73,54,.035) 24px 25px);
}
.martin-pencil-track {
  position: absolute;
  inset: 50% 3% auto;
  height: 10px;
  opacity: .58;
  transform: translateY(-50%);
  background:
    linear-gradient(90deg, transparent, #db2b34 7% 28%, transparent 34%),
    linear-gradient(90deg, transparent 21%, #dfaa28 28% 55%, transparent 62%),
    linear-gradient(90deg, transparent 49%, #2f78a8 57% 79%, transparent 87%),
    linear-gradient(90deg, transparent 72%, #4f9a6e 79% 96%, transparent);
  background-repeat: no-repeat;
  background-size: 100% 2px;
  background-position: 0 0, 0 3px, 0 6px, 0 9px;
  mask-image: linear-gradient(90deg, transparent, #000 8% 92%, transparent);
}
.martin-motion-runner {
  position: absolute;
  top: 5px;
  left: 0;
  width: 168px;
  height: 96px;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translate3d(-150px, 0, 0);
  animation: martinPencilFlight 15s linear infinite;
}
.martin-motion-runner img:not(.martin-flying-cutout) {
  position: relative;
  z-index: 2;
  width: 62px;
  height: 84px;
  display: block;
  object-fit: contain;
  mix-blend-mode: multiply;
  filter: drop-shadow(0 7px 8px rgba(53, 42, 31, .16));
}
.martin-motion-runner img.martin-flying-cutout,
.martin-flying-cutout {
  position: relative;
  z-index: 2;
  width: 150px;
  height: 78px;
  max-width: none;
  max-height: none;
  display: block;
  object-fit: contain;
  mix-blend-mode: multiply;
  filter: drop-shadow(0 8px 10px rgba(49, 42, 34, .18));
}
.martin-motion-trail {
  position: absolute;
  z-index: 1;
  top: 38px;
  right: 42px;
  width: 210px;
  height: 18px;
  opacity: .82;
  background:
    linear-gradient(174deg, transparent 0 35%, #d9212d 36% 43%, transparent 44%),
    linear-gradient(180deg, transparent 0 49%, #e3ad28 50% 57%, transparent 58%),
    linear-gradient(186deg, transparent 0 63%, #2e77a9 64% 71%, transparent 72%);
  mask-image: linear-gradient(90deg, transparent, #000 18% 100%);
}
@keyframes martinPencilFlight {
  0% { opacity: 0; transform: translate3d(-150px, 3px, 0) rotate(-2deg); }
  5% { opacity: 1; }
  47% { transform: translate3d(50vw, -3px, 0) rotate(1.2deg); }
  53% { transform: translate3d(56vw, 2px, 0) rotate(-.8deg); }
  95% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(calc(100vw + 130px), -2px, 0) rotate(1deg); }
}

/* Main art reveals more of each composition without resizing the card. */
.att-card-art img,
.block-library-card .block-library-art,
.portal-course-card img.course-card-art,
.course-card > img.course-card-art,
.question-toolkit-scene,
.home-stage-media .home-stage-scene,
.coming-soon-stage .coming-soon-scene {
  clip-path: inset(3.5% round 10px);
  transform: scale(1.045);
  transition:
    transform var(--motion-medium) var(--ease-school),
    clip-path var(--motion-medium) var(--ease-school),
    filter var(--motion-medium) ease;
}
.att-card:is(:hover, :focus-within) .att-card-art img,
.block-library-card:is(:hover, :focus-within) .block-library-art,
.portal-course-card:is(:hover, :focus-within) img.course-card-art,
.course-card:is(:hover, :focus-within) > img.course-card-art,
.question-toolkit-banner:is(:hover, :focus-within) .question-toolkit-scene,
.home-stage:is(:hover, :focus-within) .home-stage-scene,
.coming-soon-stage:is(:hover, :focus-within) .coming-soon-scene {
  clip-path: inset(0 round 0);
  transform: scale(1);
  filter: saturate(1.035);
}

/* Premium glass is reserved for navigation and primary actions. */
.btn.primary,
.btn.glass {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--glass-line);
  color: #fff;
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), transparent 46%),
    var(--glass-red);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.48),
    inset 0 -1px 0 rgba(91,0,7,.16),
    0 12px 28px rgba(160, 13, 22, .2);
  backdrop-filter: blur(14px) saturate(125%);
  transition:
    transform var(--motion-fast) var(--ease-school),
    box-shadow var(--motion-fast) ease,
    background-color var(--motion-fast) ease;
}
.btn.primary::before,
.btn.glass::before {
  content: "";
  position: absolute;
  inset: 1px 8% auto;
  height: 45%;
  pointer-events: none;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.25), transparent);
}
.btn.primary:hover:not(:disabled),
.btn.glass:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.58),
    0 17px 34px rgba(160, 13, 22, .25);
}
.btn.primary:active:not(:disabled),
.btn.glass:active:not(:disabled) {
  transform: translateY(0) scale(.985);
  box-shadow: inset 0 2px 5px rgba(75,0,5,.22), 0 7px 16px rgba(160,13,22,.16);
}
.nav button {
  border-color: rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055);
  backdrop-filter: blur(10px);
}
.nav button:focus-visible,
.btn:focus-visible,
.home-availability-card:focus-visible {
  outline: 3px solid #ffd36a;
  outline-offset: 3px;
}

.motion-paused .martin-motion-runner,
.motion-paused .martin-companion,
.motion-paused .login-martin,
.motion-paused .login-martin-wrap,
.motion-paused .app-shell::before,
.motion-paused .app-shell::after,
.motion-paused .login-shell::before,
.motion-paused .login-shell::after {
  animation-play-state: paused !important;
}
.qa-motion-static .martin-motion-runner {
  animation: none !important;
  opacity: 1;
  transform: translate3d(clamp(30px, 12vw, 180px), 0, 0);
}
.qa-motion-static .app-shell::before,
.qa-motion-static .app-shell::after,
.qa-motion-static .login-shell::before,
.qa-motion-static .login-shell::after,
.qa-motion-static .martin-companion,
.qa-motion-static .login-martin,
.qa-motion-static .login-martin-wrap {
  animation: none !important;
}

@media (hover: none) {
  .att-card:active .att-card-art img,
  .block-library-card:active .block-library-art,
  .home-stage:active .home-stage-scene,
  .coming-soon-stage:active .coming-soon-scene {
    clip-path: inset(1.5% round 7px);
    transform: scale(1.015);
  }
}
@media (max-width: 760px) {
  :root {
    --motion-ambient: 42s;
    --motion-ambient-alt: 54s;
  }
  .app-shell::after,
  .login-shell::after { display: none; }
  .martin-motion-strip { height: 78px; }
  .martin-motion-runner {
    top: 3px;
    width: 56px;
    height: 72px;
    animation-duration: 20s;
  }
  .martin-motion-runner img { width: 50px; height: 68px; }
  .martin-motion-trail { top: 30px; right: 34px; width: 140px; }
}
@media (prefers-reduced-motion: reduce) {
  .app-shell::before,
  .app-shell::after,
  .login-shell::before,
  .login-shell::after,
  .martin-motion-runner {
    animation: none !important;
  }
  .app-shell::before,
  .login-shell::before { opacity: .38; transform: none; }
  .app-shell::after,
  .login-shell::after { opacity: .2; transform: none; }
  .martin-motion-runner {
    opacity: 1;
    transform: translate3d(clamp(24px, 10vw, 140px), 0, 0);
  }
  .att-card-art img,
  .block-library-card .block-library-art,
  .portal-course-card img.course-card-art,
  .course-card > img.course-card-art,
  .question-toolkit-scene,
  .home-stage-media .home-stage-scene,
  .coming-soon-stage .coming-soon-scene,
  .btn {
    transition: none !important;
  }
}
@media (forced-colors: active) {
  .app-shell::before,
  .app-shell::after,
  .login-shell::before,
  .login-shell::after,
  .martin-pencil-track,
  .martin-motion-trail,
  .btn.primary::before,
  .btn.glass::before { display: none; }
  .btn.primary,
  .btn.glass,
  .nav button {
    border: 1px solid ButtonText;
    color: ButtonText;
    background: ButtonFace;
    box-shadow: none;
    forced-color-adjust: auto;
  }
}

/* Unified classroom composition: poster frames, paper, books and drawing tools. */
.home-stage,
.coming-soon-stage,
.attestation-motivation {
  border: 1px solid #9b7a52;
  box-shadow:
    inset 0 0 0 5px rgba(104, 73, 39, .13),
    inset 0 0 0 7px rgba(255,255,255,.42),
    0 22px 58px rgba(58, 43, 29, .12);
}
.login-martin-wrap {
  padding: 8px;
  border: 1px solid #8b6842;
  background: linear-gradient(135deg, #5d4028, #a47c4e 48%, #5c3f27);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.2),
    0 26px 54px rgba(16, 10, 6, .3);
}
.login-martin-wrap .login-martin {
  border: 2px solid rgba(255, 248, 230, .72);
  background: #f4ead6;
}
.attestation-motivation-art,
.att-card-art {
  position: relative;
  border: 7px solid #6c5034;
  outline: 1px solid rgba(255,255,255,.55);
  outline-offset: -4px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.74), rgba(239,226,200,.78)),
    #eee2cb;
}
.block-library-card .block-library-art,
.block-empty-art,
.block-library-empty-art {
  padding: 5px;
  border: 1px solid #997651;
  background: #f8f0df;
  box-shadow: inset 0 0 0 4px rgba(105,74,42,.12);
}
.block-empty-state,
.martin-admin-empty {
  position: relative;
  overflow: hidden;
  border: 1px solid #c7aa7b;
  background:
    linear-gradient(90deg, transparent 31px, rgba(199,54,62,.13) 32px 33px, transparent 34px),
    repeating-linear-gradient(0deg, #fffdf7 0 29px, #dfe7e9 30px 31px);
}
.block-empty-state::before,
.martin-admin-empty::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  width: 88px;
  height: 22px;
  pointer-events: none;
  background: rgba(229, 201, 139, .56);
  transform: translateX(-50%) rotate(-1.5deg);
}
.school-scene-props {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
}
.school-prop {
  position: absolute;
  display: block;
  pointer-events: none;
}
.school-prop-books {
  right: clamp(12px, 2vw, 28px);
  bottom: 12px;
  width: 88px;
  height: 12px;
  border-radius: 2px;
  background: #376d82;
  box-shadow:
    -7px -11px 0 #c14842,
    4px -22px 0 #d5a93d,
    -2px -33px 0 #5f8b62;
  opacity: .78;
}
.school-prop-ruler {
  left: clamp(14px, 3vw, 42px);
  bottom: 13px;
  width: clamp(100px, 18vw, 230px);
  height: 11px;
  border: 1px solid rgba(113,73,24,.36);
  border-radius: 2px;
  opacity: .52;
  background:
    repeating-linear-gradient(90deg, transparent 0 10px, rgba(87,58,25,.5) 10px 11px),
    #e6bd62;
  transform: rotate(-1.5deg);
}
.school-prop-pencils {
  right: clamp(108px, 12vw, 180px);
  bottom: -8px;
  width: 46px;
  height: 66px;
  border-radius: 4px 4px 12px 12px;
  opacity: .72;
  background:
    linear-gradient(78deg, transparent 0 15%, #d52a35 16% 23%, transparent 24% 35%, #2c76a8 36% 43%, transparent 44% 57%, #e1ad35 58% 66%, transparent 67%),
    linear-gradient(#9b6540 0 56%, #d9c4a3 57%);
}
.school-prop-note {
  top: 16px;
  right: 18px;
  width: 118px;
  height: 42px;
  border: 1px solid rgba(100,77,43,.2);
  opacity: .66;
  background:
    repeating-linear-gradient(0deg, transparent 0 12px, rgba(66,91,101,.12) 13px),
    #fff7ca;
  box-shadow: 0 6px 14px rgba(59,44,24,.12);
  transform: rotate(1.6deg);
}
.school-prop-note::after {
  content: "УЧИМСЯ • ПРАКТИКА";
  position: absolute;
  inset: 11px 8px auto;
  color: #7e3a35;
  font-size: 7px;
  font-weight: 950;
  letter-spacing: .08em;
}
.school-scene-props-login .school-prop-books,
.school-scene-props-home .school-prop-books { right: 3%; }
.school-scene-props-materials .school-prop-note,
.school-scene-props-instructions .school-prop-note { right: 3%; }
.school-scene-props-attestation .school-prop-note { left: 18px; right: auto; }

/* Full banner scenes remain crop-safe while their matte subtly opens on interaction. */
.home-stage-media .home-stage-scene,
.coming-soon-stage .coming-soon-scene {
  clip-path: inset(0);
  transform: scale(1);
}
.home-stage:is(:hover, :focus-within) .home-stage-scene,
.coming-soon-stage:is(:hover, :focus-within) .coming-soon-scene {
  clip-path: inset(0);
  transform: scale(.985);
}

/* Responsive collapsible rail and accessible mobile drawer. */
.app-shell {
  grid-template-columns: 264px minmax(0, 1fr);
  transition: grid-template-columns var(--motion-medium) var(--ease-school);
}
.app-shell.sidebar-collapsed {
  grid-template-columns: 78px minmax(0, 1fr);
}
.sidebar {
  overflow: visible;
  transition:
    padding var(--motion-medium) var(--ease-school),
    transform var(--motion-medium) var(--ease-school),
    box-shadow var(--motion-medium) ease;
}
.sidebar-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  gap: 8px;
  align-items: center;
}
.sidebar-heading .brand-lockup {
  min-width: 0;
  padding: 2px 4px 12px;
}
.sidebar-collapse-toggle,
.mobile-nav-close {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 9px;
  color: #fff;
  background: rgba(255,255,255,.065);
}
.sidebar-collapse-toggle svg,
.mobile-nav-close svg,
.sidebar-footer svg {
  width: 21px;
  height: 21px;
  fill: currentColor;
}
.mobile-nav-close,
.sidebar-backdrop { display: none; }
.sidebar-footer .btn {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}
.sidebar-footer .logout-btn {
  min-height: 46px;
  width: 100%;
  justify-items: start;
  padding: 10px 12px;
  border: 1px solid rgba(255, 168, 168, .42);
  border-radius: 10px;
  color: #ffe7e7;
  background: linear-gradient(180deg, rgba(176, 42, 48, .42), rgba(110, 22, 28, .55));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
  font-size: 13px;
  font-weight: 850;
  letter-spacing: .01em;
  cursor: pointer;
  pointer-events: auto;
  position: relative;
  z-index: 2;
}
.sidebar-footer .logout-btn:is(:hover, :focus-visible) {
  color: #fff;
  border-color: rgba(255, 196, 196, .72);
  background: linear-gradient(180deg, rgba(198, 48, 54, .58), rgba(128, 24, 30, .72));
  outline: 3px solid #ffd36a;
  outline-offset: 2px;
}
.sidebar-footer .logout-btn:disabled {
  opacity: .72;
  cursor: wait;
}
.sidebar-footer .logout-btn svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}
.sidebar-collapsed .sidebar {
  padding-inline: 10px;
}
.sidebar-collapsed .sidebar-heading {
  grid-template-columns: 1fr;
  justify-items: center;
}
.sidebar-collapsed .brand-lockup {
  width: 100%;
  display: grid;
  justify-items: center;
  padding-inline: 0;
}
.sidebar-collapsed .sidebar .logo {
  justify-content: center;
  padding: 0;
}
.sidebar-collapsed .sidebar .logo > span:last-child,
.sidebar-collapsed .user-mini > div:not(.avatar),
.sidebar-collapsed .mini-score,
.sidebar-collapsed .nav button > span,
.sidebar-collapsed .sidebar-footer .btn > span {
  display: none;
}
.sidebar-collapsed .user-mini {
  grid-template-columns: 1fr;
  justify-items: center;
  padding: 7px;
}
.sidebar-collapsed .avatar {
  width: 46px;
  height: 46px;
}
.sidebar-collapsed .nav {
  overflow: visible;
}
.sidebar-collapsed .nav button,
.sidebar-collapsed .sidebar-footer .btn {
  width: 52px;
  min-width: 52px;
  grid-template-columns: 1fr;
  justify-items: center;
  padding-inline: 0;
}
.sidebar-collapsed .sidebar-footer .logout-btn {
  width: 52px;
  min-width: 52px;
  min-height: 52px;
  padding: 0;
  justify-items: center;
  border-radius: 12px;
}
.sidebar-collapsed .nav button.active {
  border-color: rgba(255,91,99,.72);
  box-shadow: inset 3px 0 0 #ff2a34, 0 8px 18px rgba(0,0,0,.2);
}
.sidebar-collapsed [data-tooltip] {
  position: relative;
  overflow: visible;
}
.sidebar-collapsed [data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  top: 50%;
  left: calc(100% + 12px);
  z-index: 1300;
  width: max-content;
  max-width: 220px;
  display: block !important;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px;
  color: #fff;
  background: #1a2228;
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  opacity: 0;
  pointer-events: none;
  transform: translate(4px, -50%);
  transition: opacity var(--motion-fast) ease, transform var(--motion-fast) ease;
}
.sidebar-collapsed [data-tooltip]:is(:hover, :focus-visible)::after {
  opacity: 1;
  transform: translate(0, -50%);
}
.sidebar-collapse-toggle:focus-visible,
.mobile-nav-close:focus-visible,
.mobile-nav-toggle:focus-visible,
.sidebar-footer .btn:focus-visible {
  outline: 3px solid #ffd36a;
  outline-offset: 3px;
}

@media (max-width: 900px) {
  body.sidebar-drawer-open {
    overflow: hidden;
    touch-action: none;
  }
  .app-shell,
  .app-shell.sidebar-collapsed {
    grid-template-columns: minmax(0, 1fr);
  }
  .mobile-nav-toggle {
    position: fixed;
    top: calc(12px + env(safe-area-inset-top));
    left: calc(12px + env(safe-area-inset-left));
    z-index: 1180;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    border: 1px solid rgba(255,255,255,.42);
    border-radius: 10px;
    color: #fff;
    background: rgba(18,25,30,.9);
    box-shadow: 0 12px 28px rgba(17,24,29,.24);
    backdrop-filter: blur(12px);
    font-weight: 900;
  }
  .mobile-nav-toggle svg { width: 20px; height: 20px; fill: currentColor; }
  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1190;
    display: block;
    border: 0;
    opacity: 0;
    pointer-events: none;
    background: rgba(9,13,16,.56);
    backdrop-filter: blur(3px);
    transition: opacity var(--motion-medium) ease;
  }
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1200;
    width: min(86vw, 330px);
    height: 100dvh;
    max-height: none;
    display: flex;
    padding: calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));
    overflow-x: hidden;
    overflow-y: auto;
    transform: translate3d(-105%, 0, 0);
    visibility: hidden;
  }
  .app-shell.mobile-nav-open .sidebar {
    visibility: visible;
    transform: translate3d(0, 0, 0);
    box-shadow: 24px 0 62px rgba(0,0,0,.34);
  }
  .app-shell.mobile-nav-open .sidebar-backdrop {
    opacity: 1;
    pointer-events: auto;
  }
  .app-shell.mobile-nav-open .mobile-nav-toggle {
    opacity: 0;
    pointer-events: none;
  }
  .app-shell.mobile-nav-open .martin-companion,
  .app-shell.mobile-nav-open .martin-assistant-panel {
    opacity: 0 !important;
    visibility: hidden;
    pointer-events: none !important;
  }
  .sidebar-heading,
  .sidebar-collapsed .sidebar-heading {
    grid-template-columns: minmax(0, 1fr) 44px;
    justify-items: stretch;
  }
  .sidebar-collapse-toggle { display: none; }
  .mobile-nav-close { display: inline-grid; }
  .sidebar-collapsed .brand-lockup {
    display: block;
    width: auto;
  }
  .sidebar-collapsed .sidebar .logo {
    justify-content: flex-start;
  }
  .sidebar-collapsed .sidebar .logo > span:last-child,
  .sidebar-collapsed .user-mini > div:not(.avatar),
  .sidebar-collapsed .mini-score,
  .sidebar-collapsed .nav button > span,
  .sidebar-collapsed .sidebar-footer .btn > span {
    display: revert;
  }
  .sidebar-collapsed .user-mini,
  .user-mini {
    grid-template-columns: 52px minmax(0, 1fr);
    justify-items: stretch;
    padding: 12px;
  }
  .nav,
  .nav:not(.is-expanded),
  .nav.is-expanded {
    grid-column: auto;
    max-height: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    overflow: visible;
  }
  .nav:not(.is-expanded) button:not(.active),
  .nav:not(.is-expanded) button.active,
  .nav.is-expanded button,
  .sidebar-collapsed .nav button {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    justify-items: start;
    padding: 10px 12px;
  }
  .sidebar-collapsed [data-tooltip]::after { display: none !important; }
  .sidebar-footer .btn,
  .sidebar-collapsed .sidebar-footer .btn {
    width: 100%;
    grid-template-columns: 22px minmax(0, 1fr);
    justify-items: start;
    padding-inline: 14px;
  }
  .sidebar-footer .logout-btn,
  .sidebar-collapsed .sidebar-footer .logout-btn {
    width: 100%;
    min-height: 48px;
    grid-template-columns: 22px minmax(0, 1fr);
    justify-items: start;
    padding: 12px 14px;
  }
  .sidebar-footer .logout-btn > span,
  .sidebar-collapsed .sidebar-footer .logout-btn > span {
    display: inline !important;
  }
  .main {
    width: 100%;
    min-width: 0;
    padding-top: calc(76px + env(safe-area-inset-top));
  }
}
@media (max-width: 600px) {
  .school-prop-note,
  .school-prop-books { display: none; }
  .school-prop-ruler { width: 100px; opacity: .34; }
  .school-prop-pencils { right: 14px; opacity: .5; }
  .login-martin-wrap { padding: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .app-shell,
  .sidebar,
  .sidebar-backdrop,
  .sidebar-collapsed [data-tooltip]::after {
    transition: none !important;
  }
}
@media (forced-colors: active) {
  .sidebar-collapse-toggle,
  .mobile-nav-close,
  .mobile-nav-toggle,
  .sidebar-backdrop {
    border: 1px solid ButtonText;
    color: ButtonText;
    background: ButtonFace;
    forced-color-adjust: auto;
  }
}

/* Cascade endpoint for the crop-safe illustrated scenes. */
.login-hero-stage {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  align-items: center;
  gap: clamp(8px, 1.5vh, 16px);
}
.login-hero-core {
  z-index: 5;
  order: 1;
  width: 100%;
  align-self: end;
}
.login-hero .hero-title {
  max-width: 100%;
  font-size: clamp(50px, 5vw, 72px);
  line-height: .86;
  white-space: nowrap;
}
.login-martin-wrap {
  order: 2;
  justify-self: start;
  width: min(112%, 720px);
  margin-left: -6%;
}
.coming-soon-stage.is-library .coming-soon-copy,
.coming-soon-stage.is-instructions .coming-soon-copy {
  width: min(52%, 680px);
}
.coming-soon-stage.is-instructions .coming-soon-copy {
  width: min(45%, 600px);
  margin-right: 0;
  margin-left: auto;
}
.coming-soon-stage.is-instructions img.coming-soon-art {
  width: min(45%, 610px);
}
.coming-soon-stage.is-library .coming-soon-copy :is(h1, h2),
.coming-soon-stage.is-instructions .coming-soon-copy :is(h1, h2) {
  color: #fffaf0;
  text-shadow: 0 2px 18px rgba(0,0,0,.28);
}
.coming-soon-stage.is-library .coming-soon-copy p,
.coming-soon-stage.is-instructions .coming-soon-copy p {
  color: #e1d7cb;
}
.attestation-motivation-art {
  position: absolute;
  box-sizing: border-box;
}
.attestation-motivation-art img {
  object-fit: contain;
  object-position: right center;
}
.att-card-art { position: relative; }
@media (max-width: 980px) {
  .coming-soon-stage {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }
  .coming-soon-stage.is-library .coming-soon-copy,
  .coming-soon-stage.is-instructions .coming-soon-copy {
    width: 100%;
    margin: 0;
  }
  img.coming-soon-art,
  .coming-soon-stage img.coming-soon-scene,
  .coming-soon-stage.is-instructions img.coming-soon-art {
    position: relative;
    inset: auto;
    order: 2;
    width: 100%;
    height: auto;
    max-height: none;
    padding: 0 12px 12px;
    object-fit: contain !important;
    object-position: center !important;
  }
}
@media (max-width: 900px) {
  .sidebar .logo > span:last-child { display: grid; }
  .sidebar .user-mini { display: grid; }
  .sidebar .sidebar-footer {
    display: grid !important;
    margin-top: auto;
    padding: 8px 0 4px;
    position: static;
    flex: 0 0 auto;
    background: #0f171f;
  }
}
@media (max-width: 760px) {
  .login-hero .hero-title {
    font-size: clamp(44px, 14vw, 62px);
    white-space: normal;
  }
  .login-martin-wrap {
    width: 100%;
    margin-left: 0;
  }
}

/* Authenticated cinematic intro: isolated from the everyday application shell. */
body.tech-intro-active {
  overflow: hidden;
  overscroll-behavior: none;
  background: #171b1d;
}
body.tech-intro-active #app {
  min-height: 100dvh;
}
.tech-intro {
  --intro-accent: #e94735;
  --intro-accent-soft: #ffb255;
  --intro-paper: #f4efe4;
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100dvh;
  min-height: 620px;
  overflow: hidden;
  color: #fffaf1;
  color-scheme: dark;
  background:
    radial-gradient(circle at 72% 44%, rgba(255,255,255,.13), transparent 30%),
    radial-gradient(circle at 18% 16%, rgba(233,71,53,.28), transparent 36%),
    linear-gradient(128deg, #12181a 0%, #252528 48%, #4d3028 100%);
  transition: background-color 700ms var(--motion-ease), opacity 260ms var(--motion-ease);
}
.tech-intro[data-scene="1"] {
  --intro-accent: #f19f34;
  --intro-accent-soft: #f4d768;
  background:
    radial-gradient(circle at 70% 42%, rgba(255,246,220,.15), transparent 30%),
    radial-gradient(circle at 20% 14%, rgba(241,159,52,.28), transparent 38%),
    linear-gradient(128deg, #11191b 0%, #29302c 52%, #54452f 100%);
}
.tech-intro[data-scene="2"] {
  --intro-accent: #bbcf76;
  --intro-accent-soft: #f1b854;
  background:
    radial-gradient(circle at 70% 42%, rgba(255,255,255,.16), transparent 30%),
    radial-gradient(circle at 15% 15%, rgba(187,207,118,.24), transparent 38%),
    linear-gradient(128deg, #111719 0%, #25302c 48%, #4e3b2f 100%);
}
.tech-intro::before,
.tech-intro::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  will-change: transform, opacity;
}
.tech-intro::before {
  inset: -24%;
  opacity: .44;
  background:
    repeating-linear-gradient(112deg, transparent 0 11%, rgba(255,255,255,.025) 11.2% 11.35%, transparent 11.55% 21%),
    radial-gradient(ellipse at 50% 50%, transparent 0 48%, rgba(255,255,255,.08) 48.5% 49%, transparent 49.5%);
  animation: introAmbientDrift 22s ease-in-out infinite alternate;
}
.tech-intro::after {
  width: 44vw;
  height: 5px;
  left: -8vw;
  top: 28%;
  border-radius: 999px;
  opacity: .72;
  background: linear-gradient(90deg, transparent, #e74736 30%, #f4b34c 54%, #6f9fc5 77%, transparent);
  box-shadow: 0 9px 0 rgba(244,239,228,.16), 0 -8px 0 rgba(187,207,118,.12);
  transform: rotate(-6deg);
  animation: introChalkSweep 7s var(--motion-ease) infinite alternate;
}
.intro-paper-grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .1;
  background-image:
    linear-gradient(rgba(255,255,255,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(90deg, #000, transparent 64%);
}
.intro-a11y-skip {
  position: fixed;
  z-index: 50;
  top: 10px;
  left: 50%;
  padding: 12px 18px;
  border-radius: 12px;
  color: #111;
  background: #fff;
  transform: translate(-50%, -180%);
  transition: transform 160ms ease;
}
.intro-a11y-skip:focus {
  transform: translate(-50%, 0);
}
.intro-topline {
  position: relative;
  z-index: 8;
  height: clamp(76px, 9vh, 104px);
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr);
  align-items: center;
  gap: 20px;
  padding: max(18px, env(safe-area-inset-top)) clamp(22px, 4vw, 72px) 12px;
}
.intro-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: .08em;
}
.intro-brand > span {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.46);
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, rgba(255,255,255,.22), rgba(233,71,53,.34));
  box-shadow: inset 0 1px rgba(255,255,255,.46), 0 10px 30px rgba(0,0,0,.18);
  font-size: 22px;
  font-weight: 950;
}
.intro-brand b {
  font-size: 17px;
  font-weight: 950;
}
.intro-brand small {
  align-self: flex-end;
  margin: 0 0 4px -4px;
  color: var(--intro-accent-soft);
  font-size: 10px;
  font-weight: 900;
}
.intro-chapter-label {
  display: grid;
  justify-items: center;
  gap: 3px;
  text-align: center;
}
.intro-chapter-label span {
  color: rgba(255,250,241,.62);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.intro-chapter-label b {
  font-size: 12px;
  letter-spacing: .06em;
}
.intro-skip-button,
.intro-next-scene {
  border: 0;
  color: #fffaf1;
  background: none;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .04em;
  cursor: pointer;
}
.intro-skip-button {
  justify-self: end;
  padding: 11px 16px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  background: rgba(16,21,23,.3);
  backdrop-filter: blur(14px);
  transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
}
.intro-skip-button:hover {
  border-color: rgba(255,255,255,.56);
  background: rgba(255,255,255,.1);
  transform: translateY(-2px);
}
.intro-content {
  position: relative;
  z-index: 4;
  height: calc(100dvh - clamp(148px, 19vh, 210px));
  min-height: 430px;
  display: grid;
  grid-template-columns: minmax(320px, .86fr) minmax(430px, 1.14fr);
  align-items: center;
  gap: clamp(18px, 4vw, 70px);
  padding: 0 clamp(22px, 5.4vw, 96px) clamp(84px, 10vh, 118px);
}
.intro-copy {
  position: relative;
  z-index: 5;
  max-width: 660px;
  align-self: center;
}
.intro-kicker {
  margin: 0 0 8px;
  color: rgba(255,250,241,.64);
  font-size: clamp(11px, .9vw, 14px);
  font-weight: 850;
  letter-spacing: .28em;
  text-transform: uppercase;
  animation: introRevealUp 700ms 80ms both var(--motion-ease);
}
.intro-copy > h1 {
  display: grid;
  margin: 0;
  font-family: Onest, Manrope, sans-serif;
  font-size: clamp(64px, 8vw, 132px);
  font-weight: 950;
  line-height: .73;
  letter-spacing: -.075em;
  text-transform: uppercase;
  outline: none;
}
.intro-copy > h1 span {
  display: block;
  will-change: transform, opacity;
  animation: introTitleReveal 900ms both var(--motion-ease);
}
.intro-copy > h1 span:last-child {
  margin-left: clamp(28px, 5vw, 86px);
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,250,241,.72);
  text-shadow: 0 0 30px rgba(255,255,255,.08);
  animation-delay: 120ms;
}
.intro-scene-copy {
  position: relative;
  max-width: 530px;
  min-height: 146px;
  margin: clamp(28px, 4vh, 46px) 0 0;
  padding: 0 0 0 22px;
  border-left: 2px solid var(--intro-accent);
  transition: border-color 480ms ease;
  animation: introRevealUp 760ms 260ms both var(--motion-ease);
}
.intro-scene-copy > span {
  color: var(--intro-accent-soft);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.intro-scene-copy h2 {
  margin: 7px 0 8px;
  color: #fffaf1;
  font-family: Onest, Manrope, sans-serif;
  font-size: clamp(29px, 3vw, 46px);
  line-height: .96;
}
.intro-scene-copy p {
  max-width: 500px;
  margin: 0;
  color: rgba(255,250,241,.72);
  font-size: clamp(14px, 1.15vw, 18px);
  line-height: 1.55;
}
.intro-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: clamp(18px, 3vh, 32px);
  animation: introRevealUp 760ms 360ms both var(--motion-ease);
}
.intro-enter-button {
  min-height: 58px;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 12px 14px 12px 24px;
  border: 1px solid rgba(255,255,255,.52);
  border-radius: 18px;
  color: #fff;
  background:
    linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.04)),
    rgba(190,48,37,.42);
  box-shadow: inset 0 1px rgba(255,255,255,.48), 0 20px 48px rgba(0,0,0,.3);
  backdrop-filter: blur(18px) saturate(1.2);
  font: inherit;
  font-size: 14px;
  font-weight: 950;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}
.intro-enter-button i {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #1b1714;
  background: #fffaf1;
  font-size: 19px;
  font-style: normal;
}
.intro-enter-button:hover {
  transform: translateY(-3px);
  box-shadow: inset 0 1px rgba(255,255,255,.55), 0 25px 58px rgba(0,0,0,.36);
}
.intro-enter-button:active {
  transform: translateY(0) scale(.985);
}
.intro-enter-compact { display: none; }
.intro-next-scene {
  min-height: 44px;
  padding: 8px 2px;
  color: rgba(255,250,241,.72);
}
.intro-next-scene span {
  display: inline-block;
  margin-left: 6px;
  color: var(--intro-accent-soft);
}
.intro-martin-stage {
  position: relative;
  justify-self: stretch;
  align-self: stretch;
  min-width: 0;
  min-height: 420px;
  margin: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  animation: introStageReveal 980ms 90ms both var(--motion-ease);
}
.intro-martin-stage::before {
  content: "";
  position: absolute;
  width: min(42vw, 610px);
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 50%;
  box-shadow:
    inset 0 0 90px rgba(255,255,255,.05),
    0 0 0 28px rgba(255,255,255,.018),
    0 0 0 74px rgba(255,255,255,.012);
}
.intro-martin-stage canvas,
.intro-martin-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.intro-martin-stage canvas {
  z-index: 3;
  pointer-events: auto;
  touch-action: pan-y;
}
.intro-martin-fallback {
  z-index: 2;
  box-sizing: border-box;
  padding: clamp(12px, 2vh, 24px) clamp(10px, 3vw, 44px);
  object-fit: contain;
  object-position: center;
  filter: saturate(.85) contrast(1.02) drop-shadow(0 24px 30px rgba(0,0,0,.24));
  opacity: .92;
  transition: opacity 520ms ease, filter 520ms ease;
}
.tech-intro.has-particles .intro-martin-fallback {
  opacity: .12;
  filter: grayscale(.7) brightness(1.4) contrast(.8) drop-shadow(0 24px 34px rgba(0,0,0,.2));
}
.intro-martin-stage figcaption {
  position: absolute;
  z-index: 5;
  right: 5%;
  bottom: 5%;
  max-width: 200px;
  padding: 9px 13px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  color: rgba(255,250,241,.66);
  background: rgba(16,21,23,.36);
  backdrop-filter: blur(12px);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-align: center;
}
.intro-contour-halo {
  position: absolute;
  z-index: 1;
  width: min(42vw, 600px);
  height: 82%;
  border-radius: 50%;
  opacity: .48;
  background: radial-gradient(ellipse, rgba(255,255,255,.11), rgba(233,71,53,.05) 44%, transparent 72%);
  filter: blur(8px);
  animation: introHaloBreath 4.8s ease-in-out infinite;
}
.intro-scenes {
  position: absolute;
  z-index: 9;
  left: clamp(22px, 5.4vw, 96px);
  right: clamp(22px, 5.4vw, 96px);
  bottom: max(22px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid rgba(255,255,255,.2);
}
.intro-scenes button {
  position: relative;
  min-height: 61px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border: 0;
  color: rgba(255,250,241,.46);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: color 220ms ease, background-color 220ms ease;
}
.intro-scenes button::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--intro-accent);
  transition: width 480ms var(--motion-ease);
}
.intro-scenes button[aria-current="step"] {
  color: #fffaf1;
  background: linear-gradient(180deg, rgba(255,255,255,.06), transparent);
}
.intro-scenes button[aria-current="step"]::before { width: 100%; }
.intro-scenes button span {
  color: var(--intro-accent-soft);
  font-size: 10px;
  font-weight: 900;
}
.intro-scenes button b {
  font-size: 13px;
  font-weight: 850;
}
.intro-performance-note {
  position: absolute;
  z-index: 8;
  right: clamp(22px, 5.4vw, 96px);
  bottom: calc(max(22px, env(safe-area-inset-bottom)) + 70px);
  margin: 0;
  color: rgba(255,250,241,.42);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.intro-pencil-orbits,
.intro-school-props {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.intro-pencil-orbits i {
  position: absolute;
  right: -8vw;
  top: 18%;
  width: 52vw;
  height: 52vw;
  max-width: 770px;
  max-height: 770px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 50%;
  transform: rotate(8deg);
}
.intro-pencil-orbits i:nth-child(2) {
  right: -2vw;
  top: 27%;
  width: 40vw;
  height: 40vw;
  border-style: dashed;
  border-color: rgba(241,184,84,.12);
  animation: introOrbitRotate 48s linear infinite;
}
.intro-pencil-orbits i:nth-child(3) {
  right: 3vw;
  top: 35%;
  width: 28vw;
  height: 28vw;
  border-color: rgba(111,159,197,.13);
}
.intro-book-stack {
  position: absolute;
  right: -28px;
  bottom: 16%;
  width: 148px;
  height: 24px;
  border-radius: 5px 0 0 5px;
  opacity: .44;
  background: #d54b3e;
  box-shadow: 8px -28px 0 -3px #c7b66e, -8px -53px 0 -5px #6e8f84;
  transform: rotate(-4deg);
}
.intro-ruler {
  position: absolute;
  left: -44px;
  bottom: 23%;
  width: 260px;
  height: 22px;
  border-radius: 4px;
  opacity: .22;
  background:
    repeating-linear-gradient(90deg, transparent 0 12px, rgba(65,41,22,.8) 12px 13px),
    #d9aa54;
  transform: rotate(58deg);
}
.intro-chalk-line {
  position: absolute;
  left: 8%;
  bottom: 18%;
  width: 22vw;
  height: 70px;
  border: solid rgba(255,255,255,.13);
  border-width: 2px 0 0;
  border-radius: 50%;
  transform: rotate(-8deg);
}
.intro-skip-button:focus-visible,
.intro-enter-button:focus-visible,
.intro-next-scene:focus-visible,
.intro-scenes button:focus-visible {
  outline: 3px solid #fff2a9;
  outline-offset: 4px;
}
.tech-intro.is-exiting {
  opacity: 0;
}
.tech-intro.is-exiting .intro-copy {
  transform: translate3d(-18px, 0, 0);
  opacity: 0;
  transition: transform 240ms ease, opacity 180ms ease;
}
.replay-tech-intro {
  opacity: .78;
}

@keyframes introTitleReveal {
  from { opacity: 0; transform: translate3d(0, 48px, 0) skewY(3deg); }
  to { opacity: 1; transform: translate3d(0, 0, 0) skewY(0); }
}
@keyframes introRevealUp {
  from { opacity: 0; transform: translate3d(0, 24px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes introStageReveal {
  from { opacity: 0; transform: translate3d(26px, 0, 0) scale(.96); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes introHaloBreath {
  0%, 100% { opacity: .34; transform: scale(.96); }
  50% { opacity: .58; transform: scale(1.035); }
}
@keyframes introAmbientDrift {
  from { transform: translate3d(-1.5%, -1%, 0) rotate(-1deg); opacity: .34; }
  to { transform: translate3d(1.5%, 1%, 0) rotate(1deg); opacity: .5; }
}
@keyframes introChalkSweep {
  from { transform: translate3d(-4%, 0, 0) rotate(-6deg); opacity: .42; }
  to { transform: translate3d(6%, 0, 0) rotate(-4deg); opacity: .75; }
}
@keyframes introOrbitRotate {
  to { transform: rotate(368deg); }
}

@media (max-width: 980px) {
  .tech-intro {
    min-height: 560px;
  }
  .intro-topline {
    height: 74px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: max(13px, env(safe-area-inset-top)) 18px 8px;
  }
  .intro-chapter-label { display: none; }
  .intro-content {
    height: calc(100dvh - 132px);
    min-height: 440px;
    grid-template-columns: minmax(270px, .9fr) minmax(320px, 1.1fr);
    gap: 8px;
    padding: 0 22px 72px;
  }
  .intro-copy > h1 { font-size: clamp(56px, 10vw, 92px); }
  .intro-martin-stage { min-height: 390px; }
  .intro-scenes {
    left: 22px;
    right: 22px;
    bottom: max(10px, env(safe-area-inset-bottom));
  }
  .intro-performance-note { display: none; }
}

@media (max-width: 680px) {
  .tech-intro {
    min-height: 100dvh;
    background:
      radial-gradient(circle at 66% 31%, rgba(255,255,255,.14), transparent 27%),
      linear-gradient(148deg, #14191b 0%, #292728 57%, #4e3029 100%);
  }
  .intro-paper-grid {
    opacity: .07;
    background-size: 34px 34px;
  }
  .intro-brand > span {
    width: 35px;
    height: 35px;
    font-size: 19px;
  }
  .intro-brand b { font-size: 14px; }
  .intro-brand small { font-size: 8px; }
  .intro-skip-button {
    padding: 9px 12px;
    font-size: 11px;
  }
  .intro-content {
    height: calc(100dvh - 122px);
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(220px, 42vh) minmax(0, 1fr);
    align-items: stretch;
    gap: 0;
    padding: 0 18px calc(66px + env(safe-area-inset-bottom));
  }
  .intro-martin-stage {
    grid-row: 1;
    min-height: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }
  .intro-martin-stage canvas { pointer-events: auto; }
  .intro-martin-stage::before {
    width: min(82vw, 340px);
  }
  .intro-martin-fallback {
    padding: 0 8px;
    object-position: center 35%;
  }
  .intro-martin-stage figcaption {
    right: 50%;
    bottom: 2px;
    max-width: none;
    white-space: nowrap;
    transform: translateX(50%);
    font-size: 8px;
  }
  .intro-contour-halo {
    width: 88vw;
    height: 90%;
  }
  .intro-copy {
    grid-row: 2;
    align-self: start;
    max-width: none;
    padding-top: 8px;
  }
  .intro-kicker {
    margin-bottom: 3px;
    font-size: 9px;
  }
  .intro-copy > h1 {
    display: block;
    font-size: clamp(32px, 9.5vw, 48px);
    line-height: 1.02;
    letter-spacing: -.04em;
    text-wrap: balance;
  }
  .intro-copy > h1 span {
    display: inline;
    white-space: nowrap;
  }
  .intro-copy > h1 span:first-of-type {
    margin-right: .18em;
  }
  .intro-copy > h1 span:last-child {
    margin: 0;
    -webkit-text-stroke-width: .8px;
  }
  .intro-scene-copy {
    min-height: 96px;
    margin-top: 12px;
    padding-left: 13px;
  }
  .intro-scene-copy > span { font-size: 8px; }
  .intro-scene-copy h2 {
    margin: 3px 0 4px;
    font-size: clamp(24px, 7vw, 31px);
  }
  .intro-scene-copy p {
    font-size: 12px;
    line-height: 1.38;
  }
  .intro-actions {
    gap: 10px;
    margin-top: 10px;
  }
  .intro-enter-button {
    min-height: 48px;
    flex: 1;
    justify-content: space-between;
    padding: 8px 9px 8px 15px;
    border-radius: 14px;
    font-size: 12px;
  }
  .intro-enter-button i {
    width: 31px;
    height: 31px;
    border-radius: 10px;
  }
  .intro-enter-wide { display: none; }
  .intro-enter-compact { display: inline; }
  .intro-next-scene {
    min-height: 42px;
    max-width: 82px;
    font-size: 9px;
    line-height: 1.2;
  }
  .intro-scenes {
    left: 18px;
    right: 18px;
    bottom: max(6px, env(safe-area-inset-bottom));
  }
  .intro-scenes button {
    min-height: 48px;
    justify-content: center;
    padding: 9px 5px;
  }
  .intro-scenes button span { display: none; }
  .intro-scenes button b { font-size: 10px; }
  .intro-pencil-orbits i {
    right: -34vw;
    top: 7%;
    width: 100vw;
    height: 100vw;
  }
  .intro-book-stack,
  .intro-ruler { opacity: .16; }
  .tech-intro::after {
    top: 48%;
    width: 80vw;
  }
}

@media (min-width: 761px) {
  .home-stage .badge-anchor-home-martin {
    left: 83.5%;
    top: 53%;
  }
}

@media (max-width: 390px) and (max-height: 760px) {
  .intro-content {
    grid-template-rows: minmax(150px, 30vh) minmax(0, 1fr);
    gap: 10px;
  }
  .intro-martin-stage figcaption,
  .intro-next-scene { display: none; }
  .intro-copy {
    align-content: start;
    padding-inline: 4px;
  }
  .intro-copy > h1 {
    display: block !important;
    font-size: clamp(26px, 7.2vw, 34px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.035em !important;
    margin: 0 0 8px;
    text-wrap: balance;
  }
  .intro-copy > h1 span {
    display: inline !important;
    white-space: nowrap !important;
  }
  .intro-scene-copy {
    min-height: 72px;
  }
  .intro-scene-copy p {
    font-size: 12px;
    line-height: 1.35;
  }
}

.content-layout-constructor {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(20, 24, 28, .12);
  border-radius: 14px;
  background: rgba(248, 247, 244, .7);
}
.content-layout-list {
  display: grid;
  gap: 8px;
}
.content-layout-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(20, 24, 28, .1);
  border-radius: 12px;
  background: #fff;
}
.content-layout-label {
  display: grid;
  gap: 2px;
}
.content-layout-label small { color: #69747a; }
.question-prompt-stack {
  display: grid;
  gap: 14px;
}

@media (prefers-reduced-motion: reduce) {
  .tech-intro *,
  .tech-intro::before,
  .tech-intro::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition-duration: .01ms !important;
  }
  .tech-intro .intro-martin-fallback {
    opacity: 1;
    filter: saturate(.9) contrast(1.02) drop-shadow(0 20px 30px rgba(0,0,0,.2));
  }
  .tech-intro canvas { display: none; }
}
.qa-motion-static .tech-intro *,
.qa-motion-static .tech-intro::before,
.qa-motion-static .tech-intro::after,
.tech-intro.is-frozen *,
.tech-intro.is-frozen::before,
.tech-intro.is-frozen::after {
  animation-play-state: paused !important;
  animation-delay: -1s !important;
}

@media (forced-colors: active) {
  .tech-intro {
    color: CanvasText;
    background: Canvas;
    forced-color-adjust: auto;
  }
  .intro-enter-button,
  .intro-skip-button,
  .intro-next-scene,
  .intro-scenes button {
    border: 2px solid ButtonText;
    color: ButtonText;
    background: ButtonFace;
  }
  .intro-copy > h1 span:last-child {
    color: CanvasText;
    -webkit-text-stroke: 0;
  }
}

/* ===== UI system normalization + snow-globe intro (2026-07-23) ===== */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --radius-control: 10px;
  --radius-card: 16px;
  --radius-container: 24px;
  --border-subtle: 1px solid rgba(25, 34, 40, .12);
  --border-strong: 1px solid rgba(25, 34, 40, .24);
  --surface-page: #f5f2eb;
  --surface-card: #fffdf8;
  --surface-muted: #f0eee8;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: clamp(20px, 1.7vw, 26px);
  --text-xl: clamp(30px, 3.2vw, 48px);
  --control-height: 44px;
  --control-height-small: 36px;
  --content-max: 1440px;
  --page-gutter: clamp(18px, 2.4vw, 36px);
  --sidebar-expanded-width: 264px;
  --sidebar-collapsed-width: 78px;
  --sidebar-width-delta: 186px;
  --shadow-hero: 0 18px 44px rgba(31, 27, 22, .09);
  --shadow-overlay: 0 18px 46px rgba(9, 14, 18, .24);
}

body {
  background: var(--surface-page);
  font-size: var(--text-md);
}
.app-shell::before,
.app-shell::after,
.main::before,
.sidebar::before,
.school-scene-props {
  display: none !important;
}
.main {
  min-width: 0;
  padding: var(--page-gutter);
  transition: padding var(--motion-medium) var(--ease-school);
}
#view {
  width: min(100%, var(--content-max));
  margin-inline: auto;
}
.topbar {
  width: 100%;
  margin-bottom: var(--space-5);
}
.topbar h1 {
  max-width: 22ch;
  font-size: var(--text-xl);
  line-height: 1.02;
  text-wrap: balance;
}
.topbar p,
.section-head p {
  max-width: 72ch;
}

:is(
  .card,
  .home-stage,
  .coming-soon-stage,
  .attestation-motivation,
  .att-card,
  .home-availability-card,
  .block-library-card,
  .question-linear-card,
  .question-toolkit-banner,
  .admin-module-hero,
  .team-overview-card,
  .employee-detail-section
) {
  border: var(--border-subtle);
  border-radius: var(--radius-card);
  box-shadow: none;
}
:is(.home-stage, .coming-soon-stage, .attestation-motivation, .admin-module-hero) {
  border: var(--border-strong);
  border-radius: var(--radius-container);
  box-shadow: var(--shadow-hero);
}
:is(.card, .att-card, .home-availability-card, .block-library-card):hover {
  box-shadow: none;
}
:is(.btn, button, input, select, textarea) {
  border-radius: var(--radius-control);
}
.btn {
  min-height: var(--control-height);
  padding: 10px 16px;
}
.btn.small {
  min-height: var(--control-height-small);
  padding-block: 7px;
}
:is(.input, input:not([type="checkbox"]):not([type="radio"]), select) {
  min-height: var(--control-height);
}
.badge,
.eyebrow,
.profile-lock-badge {
  min-height: 24px;
  align-items: center;
  padding: 4px 9px;
  border: 0;
  border-radius: 999px;
  font-size: var(--text-xs);
  line-height: 1.2;
  letter-spacing: .035em;
}
.section-head {
  align-items: flex-end;
  gap: var(--space-4);
}
:is(
  .home-availability-grid,
  .attestation-grid,
  .block-library-grid,
  .portal-course-grid,
  .resource-grid-block
) {
  grid-auto-rows: 1fr;
}
.home-availability-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
:is(
  .home-availability-card,
  .att-card,
  .block-library-card,
  .portal-course-card
) {
  height: 100%;
  min-width: 0;
}
:is(
  .att-card-art,
  .block-library-art,
  .question-library-art,
  .question-editor-heading-art
) {
  overflow: hidden;
  border: var(--border-subtle);
  outline: 0;
  border-radius: calc(var(--radius-card) - 4px);
  background: var(--surface-muted);
  box-shadow: none;
}
.att-card-art {
  aspect-ratio: 16 / 9;
}
:is(
  .att-card-art img,
  .block-library-art,
  .question-library-art,
  .question-editor-heading-art
) {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 901px) {
  .app-shell {
    grid-template-columns: var(--sidebar-expanded-width) minmax(0, 1fr);
  }
  .app-shell.sidebar-collapsed {
    grid-template-columns: var(--sidebar-collapsed-width) minmax(0, 1fr);
  }
  .app-shell.sidebar-collapsed .main {
    padding-left: calc(var(--page-gutter) + var(--sidebar-width-delta));
  }
}

/* Tooltips are portalled to the fixed sidebar gutter, never into page content. */
.sidebar-collapsed [data-tooltip]::after {
  content: none !important;
  display: none !important;
}
.sidebar-tooltip-portal {
  position: fixed;
  z-index: 1600;
  width: max-content;
  max-width: 180px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--radius-control);
  color: #fff;
  background: #172027;
  box-shadow: var(--shadow-overlay);
  font-size: var(--text-xs);
  font-weight: 800;
  line-height: 1.25;
  pointer-events: none;
}
.sidebar-tooltip-portal[hidden],
.sidebar-is-animating + .sidebar-tooltip-portal {
  display: none !important;
}

/* Character badges mask unreliable baked labels with deterministic HTML text. */
:is(
  .login-martin-wrap,
  .home-stage,
  .home-availability-card,
  .coming-soon-stage,
  .attestation-motivation-art,
  .att-card-art,
  .admin-module-hero,
  .question-toolkit-banner,
  .question-library-heading,
  .question-editor-heading,
  .intro-globe-glass,
  .intro-storefront-media
) {
  position: relative;
}
.character-art-frame {
  position: relative;
  display: block;
  overflow: hidden;
  border: var(--border-subtle);
  border-radius: calc(var(--radius-card) - 4px);
  background: var(--surface-muted);
}
.character-art-frame > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.admin-module-hero-art-frame {
  width: 100%;
  max-width: 250px;
  aspect-ratio: 16 / 10;
}
.question-toolkit-scene-frame {
  width: 100%;
  height: 100%;
  min-height: 370px;
}
.question-editor-heading > .question-editor-heading-art-frame,
.question-library-heading > .question-library-art-frame {
  width: clamp(128px, 16vw, 210px);
  aspect-ratio: 4 / 3;
}
.block-library-art-frame,
.block-image-preview {
  width: 100%;
  aspect-ratio: 4 / 3;
}
.block-library-art-frame {
  border: 0;
  border-radius: 0;
}
.block-image-preview {
  pointer-events: none;
}
.block-image-preview > img,
.block-library-art-frame > img {
  object-fit: cover;
}
.character-badge {
  position: absolute;
  z-index: 12;
  left: 50%;
  top: 50%;
  min-width: 34px;
  min-height: 20px;
  display: inline-grid;
  place-items: center;
  padding: 3px 7px;
  border: 1px solid rgba(39, 39, 37, .28);
  border-radius: 4px;
  color: #1b2024;
  background: #fffdf5;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: .015em;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.character-badge-employee {
  min-width: 28px;
  color: #fff;
  border-color: rgba(255, 255, 255, .62);
  background: #bd1822;
}
.badge-anchor-home-martin { left: 77%; top: 54%; }
.badge-anchor-materials-martin { left: 84%; top: 52%; }
.badge-anchor-instructions-martin,
.badge-anchor-question-create-martin { left: 52%; top: 47%; }
.badge-anchor-tenure-martin { left: 79%; top: 56%; }
.badge-anchor-personnel-martin { left: 51%; top: 45%; }
.badge-anchor-personnel-employee { left: 28%; top: 48%; }
.badge-anchor-product-martin { left: 83%; top: 51%; }
.badge-anchor-product-employee { left: 29%; top: 48%; }
.badge-anchor-sales-martin { left: 82%; top: 49%; }
.badge-anchor-sales-employee { left: 34%; top: 47%; }
.badge-anchor-process-martin { left: 33%; top: 47%; }
.badge-anchor-process-employee { left: 66%; top: 44%; }
.badge-anchor-team-martin { left: 51%; top: 47%; }
.badge-anchor-team-employee { left: 24%; top: 46%; }
.badge-anchor-question-library-martin { left: 51%; top: 44%; }
.badge-anchor-question-thinking-martin { left: 51%; top: 44%; }
.badge-anchor-snow-globe-martin { left: 36%; top: 50%; }
.badge-anchor-storefront-martin { left: 52%; top: 50%; }
.home-availability-card .character-badge {
  left: auto;
  right: 12px;
  top: 12px;
  transform: none;
}
.home-availability-card:is(:hover, :focus-visible, :focus-within) {
  z-index: 2;
  border-color: rgba(185, 25, 34, .4);
  transform: translateY(-2px);
}

.card,
.att-card,
.home-availability-card,
.block-library-card,
.portal-course-card {
  border: var(--border-subtle) !important;
  border-radius: var(--radius-card) !important;
  box-shadow: none !important;
}
.admin-bulk-bar {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.admin-bulk-bar > *,
.bulk-inline-form,
.bulk-inline-form > * {
  min-width: 0;
}
.bulk-inline-form {
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
}
.table-wrap,
.admin-user-layout,
.admin-user-layout > * {
  max-width: 100%;
  min-width: 0;
}

/* Purposeful divider. The transparent flying slot stays empty until its reviewed asset lands. */
.martin-motion-strip {
  height: 126px;
  margin: var(--space-2) 0 var(--space-6);
  overflow: hidden;
  border: 0;
  border-block: var(--border-subtle);
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, .7) 18% 82%, transparent),
    repeating-linear-gradient(0deg, transparent 0 30px, rgba(61, 70, 75, .04) 31px 32px);
}
.martin-pencil-track {
  inset-inline: 4%;
  height: 14px;
  opacity: .66;
  background-size: 100% 2px;
  background-position: 0 0, 0 4px, 0 8px, 0 12px;
}
.martin-motion-runner {
  top: 12px;
  width: 180px;
  height: 100px;
  opacity: 0;
  animation-name: martinPencilFlight;
}
.martin-flight-slot {
  position: relative;
  z-index: 2;
  width: 164px;
  height: 88px;
  display: grid;
  place-items: center;
}
.martin-flight-slot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
  filter: drop-shadow(0 9px 10px rgba(49, 42, 34, .18));
}
.martin-flight-slot img[hidden] {
  display: none;
}
.martin-motion-trail {
  top: 40px;
  right: 120px;
  width: 260px;
  height: 24px;
}
.qa-motion-static .martin-motion-runner {
  transform: translate3d(clamp(44px, 18vw, 260px), 0, 0);
}

/* Single-page intro: readable glass snow globe and a storefront entrance. */
.tech-intro {
  --intro-accent: #e13a32;
  --intro-accent-soft: #ffd277;
  min-height: 640px;
  background:
    radial-gradient(circle at 72% 42%, rgba(202, 230, 238, .18), transparent 31%),
    radial-gradient(circle at 18% 16%, rgba(225, 58, 50, .22), transparent 34%),
    linear-gradient(135deg, #101719 0%, #202a2b 52%, #49342f 100%);
}
.tech-intro::after {
  display: none;
}
.intro-paper-grid {
  opacity: .055;
  mask-image: linear-gradient(90deg, #000, transparent 82%);
}
.intro-content {
  height: calc(100dvh - clamp(76px, 9vh, 104px));
  min-height: 520px;
  grid-template-columns: minmax(360px, .95fr) minmax(440px, 1.05fr);
  gap: clamp(22px, 4vw, 72px);
  padding: 0 clamp(24px, 5vw, 88px) clamp(22px, 4vh, 46px);
}
.intro-copy {
  max-width: 680px;
}
.intro-copy > h1 {
  font-size: clamp(58px, 7.2vw, 118px);
  line-height: .76;
}
.intro-scene-copy {
  min-height: 0;
  margin-top: clamp(22px, 3vh, 34px);
}
.intro-scene-copy h2 {
  max-width: 14ch;
}
.intro-actions {
  display: block;
  margin-top: clamp(18px, 2.6vh, 28px);
}
.intro-enter-button.intro-storefront-portal {
  width: min(100%, 620px);
  min-height: 154px;
  display: grid;
  grid-template-columns: 178px minmax(0, 1fr) 42px;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 20px;
  color: #fff;
  background: linear-gradient(145deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .035));
  box-shadow: var(--shadow-overlay);
  text-align: left;
}
.intro-storefront-media {
  width: 178px;
  height: 128px;
  display: block;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 12px;
  background: #8e1118;
  perspective: 500px;
}
.intro-storefront-media > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  opacity: .46;
  filter: saturate(.78) contrast(1.04);
  transition: transform 420ms var(--ease-school), opacity 280ms ease;
}
.intro-storefront-facade {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 34px 1fr;
  border: 8px solid #b7121b;
  border-top-width: 0;
  background: linear-gradient(90deg, rgba(178, 12, 22, .78), transparent 26% 74%, rgba(178, 12, 22, .78));
}
.intro-storefront-facade > b {
  display: grid;
  place-items: center;
  color: #fff;
  background: #d71924;
  font-size: 16px;
  font-weight: 950;
  letter-spacing: .12em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
.intro-storefront-doors {
  align-self: end;
  justify-self: center;
  width: 76px;
  height: 78px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 4px solid #d71924;
  border-bottom: 0;
  background: #182b31;
}
.intro-storefront-doors i {
  position: relative;
  display: block;
  border-inline: 1px solid rgba(255, 255, 255, .5);
  background: linear-gradient(150deg, rgba(255, 255, 255, .28), rgba(43, 73, 82, .84));
  transform-origin: left center;
  transition: transform 360ms var(--ease-school);
}
.intro-storefront-doors i:last-child {
  transform-origin: right center;
}
.intro-storefront-doors i::after {
  content: "";
  position: absolute;
  top: 52%;
  width: 3px;
  height: 12px;
  border-radius: 3px;
  background: #f5d79b;
}
.intro-storefront-doors i:first-child::after { right: 4px; }
.intro-storefront-doors i:last-child::after { left: 4px; }
.intro-storefront-copy {
  min-width: 0;
  display: grid;
  gap: 5px;
}
.intro-storefront-copy b {
  font-size: clamp(16px, 1.45vw, 21px);
  line-height: 1.12;
}
.intro-storefront-copy small {
  color: rgba(255, 250, 241, .68);
  font-size: 12px;
  line-height: 1.35;
}
.intro-storefront-arrow {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-control);
  color: #291717;
  background: #fff8e9;
  font-size: 20px;
  font-style: normal;
}
.intro-storefront-portal:is(:hover, :focus-visible) {
  transform: translateY(-2px);
}
.intro-storefront-portal:is(:hover, :focus-visible) .intro-storefront-media > img {
  opacity: .66;
  transform: scale(1.08);
}
.intro-storefront-portal:is(:hover, :focus-visible) .intro-storefront-doors i:first-child,
.tech-intro.is-storefront-opening .intro-storefront-doors i:first-child {
  transform: rotateY(-54deg);
}
.intro-storefront-portal:is(:hover, :focus-visible) .intro-storefront-doors i:last-child,
.tech-intro.is-storefront-opening .intro-storefront-doors i:last-child {
  transform: rotateY(54deg);
}
.tech-intro.is-storefront-opening .intro-storefront-media > img {
  opacity: .85;
  transform: scale(1.24);
}

.intro-martin-stage {
  min-height: 520px;
  overflow: visible;
}
.intro-martin-stage::before,
.intro-contour-halo {
  display: none;
}
.intro-snow-globe {
  position: relative;
  width: min(43vw, 570px);
  aspect-ratio: .86;
  display: grid;
  justify-items: center;
  align-content: start;
  padding-bottom: 16%;
}
.intro-globe-glass {
  position: relative;
  z-index: 3;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border: 2px solid rgba(240, 250, 255, .78);
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, .42), transparent 22%),
    radial-gradient(circle at 72% 18%, rgba(220, 242, 250, .18), transparent 18%),
    radial-gradient(circle at 50% 78%, rgba(190, 220, 230, .16), transparent 42%),
    radial-gradient(circle at 58% 64%, rgba(222, 241, 247, .22), rgba(74, 112, 122, .14) 58%, rgba(8, 24, 30, .42));
  box-shadow:
    inset -28px -36px 68px rgba(5, 20, 26, .3),
    inset 16px 18px 48px rgba(255, 255, 255, .16),
    inset 0 0 0 1px rgba(255, 255, 255, .12),
    0 0 0 10px rgba(196, 223, 230, .1),
    0 0 0 14px rgba(255, 255, 255, .04),
    0 34px 70px rgba(0, 0, 0, .38);
}
.intro-globe-glass::before {
  content: "";
  position: absolute;
  z-index: 7;
  inset: 3%;
  border-radius: 50%;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .22), transparent 34%, transparent 62%, rgba(120, 170, 185, .12)),
    radial-gradient(circle at 68% 72%, rgba(255, 255, 255, .08), transparent 28%);
  mix-blend-mode: soft-light;
}
.intro-globe-glass::after {
  content: "";
  position: absolute;
  z-index: 8;
  inset: 5.5%;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  box-shadow: inset 0 0 24px rgba(255, 255, 255, .08);
  pointer-events: none;
}
.intro-globe-glass canvas,
.intro-globe-glass .intro-martin-fallback {
  position: absolute;
  z-index: 4;
  inset: 7%;
  width: 86%;
  height: 86%;
}
.intro-globe-glass canvas {
  pointer-events: auto;
  touch-action: pan-y;
}
.intro-globe-glass .intro-martin-fallback {
  padding: 3% 15% 1%;
  object-fit: contain;
  object-position: center bottom;
  opacity: .92;
  filter: saturate(.9) contrast(1.04) drop-shadow(0 18px 18px rgba(4, 14, 18, .25));
}
.tech-intro.has-particles .intro-globe-glass .intro-martin-fallback {
  opacity: .1;
  filter: grayscale(.45) brightness(1.26) drop-shadow(0 20px 24px rgba(4, 14, 18, .24));
}
.intro-globe-highlight {
  position: absolute;
  z-index: 9;
  left: 16%;
  top: 10%;
  width: 20%;
  height: 44%;
  border-radius: 50%;
  opacity: .8;
  background: linear-gradient(118deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .18) 42%, rgba(255, 255, 255, 0));
  filter: blur(1.4px);
  transform: rotate(24deg);
  pointer-events: none;
}
.intro-globe-snow {
  position: absolute;
  z-index: 6;
  inset: 5%;
  border-radius: 50%;
  opacity: .86;
  pointer-events: none;
  background-image:
    radial-gradient(circle, #fff 0 1.5px, transparent 1.8px),
    radial-gradient(circle, rgba(224, 244, 250, .95) 0 1.15px, transparent 1.5px);
  background-size: 28px 34px, 41px 47px;
  animation: globeSnowFall 9s linear infinite;
}
.intro-globe-snow-far {
  z-index: 2;
  opacity: .48;
  background-size: 22px 28px, 37px 43px;
  animation-duration: 14s;
  animation-direction: reverse;
}
.intro-globe-rim {
  position: relative;
  z-index: 2;
  width: 68%;
  height: clamp(38px, 4.4vw, 52px);
  margin-top: clamp(-30px, -2.6vw, -18px);
  border: 1px solid rgba(255, 235, 195, .86);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 28%, rgba(255, 236, 204, .42), transparent 58%),
    linear-gradient(180deg, #c48952, #7a4d2c 48%, #2f2118);
  box-shadow:
    inset 0 4px 10px rgba(255, 255, 255, .32),
    inset 0 -6px 10px rgba(0, 0, 0, .38),
    0 10px 18px rgba(0, 0, 0, .3);
}
.intro-globe-base {
  position: relative;
  z-index: 1;
  width: 76%;
  height: clamp(78px, 9vw, 108px);
  margin-top: -4px;
  display: grid;
  place-items: center;
  clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%);
  color: #fbe7bc;
  background:
    linear-gradient(180deg, rgba(255, 230, 190, .28), transparent 30%),
    linear-gradient(90deg, #3a241c, #a56a3c 46%, #42281f);
  box-shadow:
    inset 0 2px rgba(255, 255, 255, .28),
    inset 0 -12px 18px rgba(0, 0, 0, .34),
    0 22px 34px rgba(0, 0, 0, .42);
}
.intro-globe-base::before {
  content: "";
  position: absolute;
  inset: 16% 10% auto;
  height: 24%;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 236, 204, .38), transparent);
  pointer-events: none;
}
.intro-globe-base::after {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: -2px;
  height: 18px;
  border-radius: 0 0 10px 10px;
  background: linear-gradient(180deg, #241712, #0c0807);
  box-shadow: 0 12px 22px rgba(0, 0, 0, .48);
  pointer-events: none;
}
.intro-globe-base i {
  margin-top: 10%;
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
  letter-spacing: .13em;
}
.intro-martin-stage figcaption {
  right: 50%;
  bottom: 1%;
  transform: translateX(50%);
  white-space: nowrap;
}
.intro-performance-note {
  right: clamp(20px, 4vw, 70px);
  bottom: max(14px, env(safe-area-inset-bottom));
}
@keyframes globeSnowFall {
  from { background-position: 0 -80px, 12px -120px; }
  to { background-position: 18px 170px, -8px 130px; }
}

@media (max-width: 980px) {
  .intro-content {
    height: calc(100dvh - 74px);
    min-height: 500px;
    grid-template-columns: minmax(300px, .95fr) minmax(340px, 1.05fr);
    padding: 0 22px 24px;
  }
  .intro-copy > h1 {
    font-size: clamp(52px, 9vw, 82px);
  }
  .intro-enter-button.intro-storefront-portal {
    grid-template-columns: 138px minmax(0, 1fr) 38px;
    min-height: 126px;
  }
  .intro-storefront-media {
    width: 138px;
    height: 100px;
  }
  .intro-storefront-doors {
    width: 60px;
    height: 56px;
  }
  .intro-snow-globe {
    width: min(46vw, 490px);
  }
  .admin-bulk-bar {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 680px) {
  .tech-intro {
    min-height: 100dvh;
  }
  .intro-topline {
    height: 68px;
  }
  .intro-content {
    height: calc(100dvh - 68px);
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(245px, 43vh) minmax(0, 1fr);
    gap: 0;
    padding: 0 16px calc(12px + env(safe-area-inset-bottom));
  }
  .intro-martin-stage {
    grid-row: 1;
    min-height: 0;
    height: 100%;
  }
  .intro-snow-globe {
    width: min(74vw, 330px);
    max-height: 100%;
  }
  .intro-copy {
    grid-row: 2;
    padding-top: 4px;
  }
  .intro-copy > h1 {
    font-size: clamp(39px, 12.6vw, 54px);
  }
  .intro-scene-copy {
    margin-top: 9px;
    padding-left: 12px;
  }
  .intro-scene-copy h2 {
    max-width: none;
    font-size: clamp(21px, 6vw, 28px);
  }
  .intro-scene-copy p {
    display: block;
    font-size: 12px;
    line-height: 1.35;
  }
  .intro-actions {
    margin-top: 9px;
  }
  .intro-enter-button.intro-storefront-portal {
    min-height: 82px;
    grid-template-columns: 94px minmax(0, 1fr) 32px;
    gap: 9px;
    padding: 7px;
    border-radius: 14px;
  }
  .intro-storefront-media {
    width: 94px;
    height: 68px;
    border-radius: 9px;
  }
  .intro-storefront-facade {
    grid-template-rows: 22px 1fr;
    border-width: 5px;
    border-top-width: 0;
  }
  .intro-storefront-facade > b {
    font-size: 10px;
  }
  .intro-storefront-doors {
    width: 40px;
    height: 36px;
    border-width: 2px;
  }
  .intro-storefront-copy b {
    font-size: 12px;
  }
  .intro-storefront-copy small {
    display: none;
  }
  .intro-storefront-arrow {
    width: 30px;
    height: 30px;
  }
  .intro-globe-base i {
    font-size: 8px;
  }
  .question-editor-heading > .question-editor-heading-art-frame,
  .admin-module-hero-art-frame {
    grid-row: 2;
    width: min(100%, 230px);
    justify-self: center;
  }
  .question-library-heading > .question-library-art-frame {
    grid-row: 3;
    width: min(100%, 230px);
    justify-self: center;
  }
  .question-library-heading > .btn {
    grid-row: 2;
    width: 100%;
  }
  .question-toolkit-scene-frame {
    min-height: 230px;
  }
  .home-availability-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .intro-martin-stage figcaption,
  .intro-performance-note {
    display: none;
  }
  .character-badge {
    min-height: 18px;
    padding: 2px 5px;
    font-size: 10px;
  }
  .martin-motion-strip {
    height: 96px;
  }
  .martin-motion-runner {
    top: 8px;
    width: 130px;
    height: 78px;
    animation-duration: 20s;
  }
  .martin-flight-slot {
    width: 124px;
    height: 72px;
  }
  .martin-motion-trail {
    top: 31px;
    right: 88px;
    width: 180px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .intro-globe-snow,
  .intro-storefront-media > img,
  .intro-storefront-doors i {
    animation: none !important;
    transition: none !important;
  }
  .martin-motion-runner {
    opacity: 1;
    transform: translate3d(clamp(44px, 18vw, 260px), 0, 0);
  }
}

@media (max-width: 980px) {
  .app-shell::after {
    content: "";
    display: block !important;
    position: fixed;
    inset: 0 0 auto;
    z-index: 1170;
    height: calc(70px + env(safe-area-inset-top));
    pointer-events: none;
    border-bottom: var(--border-subtle);
    background: rgba(248, 247, 244, .96);
    box-shadow: 0 8px 24px rgba(20, 24, 28, .06);
    backdrop-filter: blur(14px);
  }
  .app-shell .main {
    padding-top: calc(76px + env(safe-area-inset-top));
  }
  .app-shell .topbar {
    padding-right: 76px;
  }
  .martin-launcher,
  .martin-launcher.martin-companion {
    top: auto !important;
    right: calc(12px + env(safe-area-inset-right)) !important;
    bottom: calc(12px + env(safe-area-inset-bottom)) !important;
  }
  .attestation-motivation {
    grid-template-rows: auto;
    min-height: 0;
    gap: 18px;
    padding: 28px 18px 20px;
  }
  .attestation-motivation::before {
    display: none;
  }
  .attestation-motivation-copy {
    grid-row: 1;
    width: 100%;
  }
  .attestation-motivation-art {
    position: relative;
    inset: auto;
    z-index: 1;
    grid-row: 2;
    width: calc(100% + 36px);
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
    margin: 4px -18px 0;
    overflow: hidden;
  }
  .attestation-motivation .attestation-motivation-art img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: contain;
    object-position: center;
  }
  .tech-intro .intro-martin-stage figcaption,
  .tech-intro .intro-performance-note {
    display: none;
  }
}

@media (max-width: 680px) {
  .employee-card-panel .section-head {
    position: relative;
    padding-right: 52px;
  }
  .employee-card-panel .section-head > div {
    width: 100%;
  }
  .employee-card-panel .section-head > .icon-btn {
    position: absolute;
    top: 0;
    right: 0;
  }
  .employee-card-panel .section-head div > .close-employee-card {
    width: 100%;
  }
}

@media (min-width: 981px) {
  .attestation-motivation {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    background: #f8f4ec;
  }
  .attestation-motivation::before {
    display: block;
    z-index: 1;
    background: linear-gradient(90deg, rgba(248, 244, 236, .99) 0%, rgba(248, 244, 236, .96) 39%, rgba(248, 244, 236, .72) 53%, rgba(248, 244, 236, 0) 72%);
  }
  .attestation-motivation-copy {
    z-index: 2;
    grid-row: 1;
    width: min(62%, 760px);
    padding: clamp(36px, 4vw, 58px);
  }
  .attestation-motivation-art {
    position: absolute;
    inset: 0;
    z-index: 0;
    min-height: 0;
    display: block;
    background: transparent;
  }
  .attestation-motivation .attestation-motivation-art img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    visibility: visible;
    object-fit: cover !important;
    object-position: center !important;
  }
}

/* ===== 2026-07-24 intro clarity + flying strip + badge quiet ===== */
.character-badge { display: none !important; }

.tech-intro {
  --intro-accent: #e13a32;
  min-height: 100dvh;
  background:
    radial-gradient(circle at 74% 38%, rgba(202, 230, 238, .22), transparent 34%),
    radial-gradient(circle at 18% 18%, rgba(225, 58, 50, .18), transparent 36%),
    linear-gradient(145deg, #101719 0%, #1d2729 52%, #3d2d28 100%);
}
.tech-intro .intro-chapter-label,
.tech-intro .intro-kicker,
.tech-intro .intro-scene-copy,
.tech-intro .intro-martin-stage figcaption,
.tech-intro .intro-performance-note,
.tech-intro .intro-globe-base i,
.tech-intro .intro-storefront-portal {
  display: none !important;
}
.intro-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: clamp(64px, 8vh, 88px);
  padding: 0 clamp(18px, 4vw, 56px);
}
.intro-content {
  display: grid;
  grid-template-columns: minmax(280px, .9fr) minmax(320px, 1.1fr);
  align-items: center;
  gap: clamp(18px, 4vw, 64px);
  height: calc(100dvh - clamp(64px, 8vh, 88px));
  min-height: 480px;
  padding: 0 clamp(18px, 5vw, 72px) clamp(18px, 4vh, 40px);
}
.intro-copy {
  max-width: 560px;
  display: grid;
  gap: clamp(18px, 3vh, 28px);
}
.intro-copy > h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(34px, 5.2vw, 64px);
  line-height: 1.05;
  letter-spacing: -.03em;
  font-weight: 900;
}
.intro-copy > h1 span:last-child {
  color: transparent;
  -webkit-text-stroke: 2px rgba(255,255,255,.92);
}
.intro-actions { margin: 0; }
.intro-enter-button {
  min-height: 56px;
  padding: 14px 28px;
  border: 0;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, #e13a32, #b7121b);
  box-shadow: 0 14px 28px rgba(183, 18, 27, .28);
  font-size: 17px;
  font-weight: 850;
  cursor: pointer;
}
.intro-enter-button:is(:hover, :focus-visible) {
  transform: translateY(-1px);
  filter: brightness(1.05);
}
.intro-martin-stage {
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: visible;
}
.intro-snow-globe {
  width: min(42vw, 520px);
  aspect-ratio: .78;
  padding-bottom: 22%;
}
.intro-globe-glass .intro-martin-fallback {
  opacity: .98;
  filter: saturate(.95) contrast(1.03) drop-shadow(0 14px 16px rgba(4, 14, 18, .22));
  z-index: 3;
  padding: 6% 12% 4%;
  object-position: center 62%;
}
.intro-globe-glass canvas {
  z-index: 5;
  mix-blend-mode: normal;
  opacity: .92;
}
.tech-intro.has-particles .intro-globe-glass .intro-martin-fallback {
  opacity: .08;
  filter: grayscale(.5) brightness(1.28) drop-shadow(0 16px 18px rgba(4, 14, 18, .2));
}
.intro-globe-snow-dense {
  z-index: 6;
  opacity: .72;
  background-size: 17px 22px, 27px 33px, 39px 45px;
  background-image:
    radial-gradient(circle, #fff 0 1.6px, transparent 1.9px),
    radial-gradient(circle, rgba(230, 246, 252, .98) 0 1.2px, transparent 1.55px),
    radial-gradient(circle, rgba(255,255,255,.9) 0 1px, transparent 1.3px);
  animation: globeSnowFall 7.5s linear infinite;
  mask-image: radial-gradient(circle at 50% 62%, #000 0 48%, transparent 72%);
}
.intro-globe-base {
  width: 74%;
  height: clamp(72px, 8.2vw, 100px);
}
.intro-globe-rim {
  width: 66%;
}
.intro-globe-base i { display: none; }

.martin-motion-strip {
  height: 118px;
  margin: var(--space-2) 0 var(--space-6);
  overflow: hidden;
  border-block: 1px solid rgba(92, 78, 58, .12);
  background:
    linear-gradient(90deg, rgba(255,255,255,.35), rgba(250,244,231,.88) 18% 82%, rgba(255,255,255,.28)),
    repeating-linear-gradient(0deg, transparent 0 28px, rgba(86,73,54,.03) 29px 30px);
}
.martin-pencil-track {
  inset-inline: 4%;
  height: 8px;
  opacity: .35;
  background:
    linear-gradient(90deg, transparent, rgba(219, 43, 52, .45) 18% 34%, transparent 42%),
    linear-gradient(90deg, transparent 28%, rgba(223, 170, 40, .4) 40% 58%, transparent 68%),
    linear-gradient(90deg, transparent 56%, rgba(47, 120, 168, .35) 66% 82%, transparent 90%);
  background-size: 100% 2px;
  background-position: 0 0, 0 3px, 0 6px;
}
.martin-motion-runner {
  top: 10px;
  width: 168px;
  height: 96px;
  opacity: 1;
  animation: martinPencilFlight 14s linear infinite;
}
.martin-flying-cutout {
  position: relative;
  z-index: 2;
  width: 150px;
  height: 78px;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 8px 10px rgba(49, 42, 34, .18));
  mix-blend-mode: multiply;
}
.martin-motion-trail {
  top: 42px;
  right: 118px;
  width: 180px;
  height: 16px;
  opacity: .45;
  background:
    linear-gradient(174deg, transparent 0 40%, rgba(217, 33, 45, .55) 42% 48%, transparent 50%),
    linear-gradient(180deg, transparent 0 52%, rgba(227, 173, 40, .5) 54% 60%, transparent 62%);
}
.qa-motion-static .martin-motion-runner {
  opacity: 1;
  transform: translate3d(clamp(40px, 16vw, 220px), 0, 0);
}

@media (max-width: 900px) {
  .intro-content {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(240px, 44vh) auto;
    gap: 8px;
    height: calc(100dvh - 68px);
    padding: 0 16px calc(14px + env(safe-area-inset-bottom));
  }
  .intro-martin-stage { grid-row: 1; }
  .intro-copy {
    grid-row: 2;
    justify-items: center;
    text-align: center;
    max-width: none;
  }
  .intro-copy > h1 { font-size: clamp(30px, 8.4vw, 42px); }
  .intro-snow-globe { width: min(72vw, 320px); }
  .martin-motion-strip { height: 92px; }
  .martin-motion-runner { width: 132px; height: 78px; }
  .martin-flying-cutout { width: 118px; height: 62px; }
}

@media (prefers-reduced-motion: reduce) {
  .intro-globe-snow,
  .martin-motion-runner { animation: none !important; }
  .martin-motion-runner {
    opacity: 1;
    transform: translate3d(18vw, 0, 0);
  }
  .tech-intro canvas { display: none; }
  .tech-intro .intro-martin-fallback { opacity: 1 !important; }
}

/* ===== Final package 2026-07-24: layout, answers, Martin, contest ===== */
.home-availability-card.soon::after { content: none !important; display: none !important; }
.home-availability-card {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 18px 18px 20px;
  text-align: left;
}
.home-availability-card .home-card-status {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  padding: 5px 10px;
  border-radius: 999px;
  color: #fff;
  background: rgba(17, 24, 29, .78);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.home-availability-card.active .home-card-status { background: #c9141d; }
.home-availability-card > b {
  max-width: min(100%, 18ch);
  font-size: clamp(22px, 4.8vw, 30px);
  line-height: 1.08;
}
.home-availability-card > small {
  max-width: min(100%, 34ch);
  color: rgba(255,255,255,.86);
  font-size: 13px;
  line-height: 1.4;
}

.answer-options {
  display: grid;
  gap: 12px;
}
.answer-option,
.answer-option-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  min-height: 56px;
  padding: 14px 16px;
  border: 1px solid #d7d1d5;
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
}
.answer-option:has(input:checked),
.answer-option.selected {
  border-color: #c9141d;
  box-shadow: 0 0 0 3px rgba(201, 20, 29, .12);
  background: #fff7f7;
}
.answer-option-key {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #fff;
  background: #111820;
  font-weight: 900;
}
.answer-option-copy {
  display: grid;
  gap: 4px;
}
.answer-option-copy small { color: #6b7280; }
.answer-options-roles .answer-option-copy b { font-size: 16px; }

.hierarchy-answer-grid { display: grid; gap: 12px; }
.hierarchy-hint { margin: 0; color: #4b5563; font-size: 14px; }
.hierarchy-levels {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hierarchy-level {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid #d7d1d5;
  border-radius: 14px;
  background: #fff;
}
.hierarchy-level.is-dragging { opacity: .55; }
.hierarchy-handle { color: #9ca3af; cursor: grab; font-weight: 900; }
.test-question-meta {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}

.profile-medals {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.profile-medal {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 180px;
  max-width: 240px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}
.profile-medal-image {
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  object-fit: contain;
  filter: drop-shadow(0 8px 14px rgba(17, 24, 29, .12));
}
.profile-medal-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.profile-medal b { font-size: 13px; line-height: 1.2; }
.profile-medal small { color: #6b7280; font-size: 11px; }
.profile-medals-current {
  align-items: center;
  gap: 14px;
}
.profile-medals-current .profile-medal-image {
  width: 88px;
  height: 88px;
  flex-basis: 88px;
}

.contest-panel .training-summary { margin: 18px 0; }
.contest-team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.contest-team-card {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
}
.contest-team-card.is-mine {
  border-color: color-mix(in srgb, var(--brand, #c9141d) 45%, #fff);
  background: color-mix(in srgb, var(--brand, #c9141d) 6%, #fff);
}
.contest-team-number {
  font-size: 12px;
  font-weight: 700;
  color: var(--brand, #c9141d);
}
.block-position-all {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 10px;
  padding: 10px 12px;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
}

.intro-martin-stage,
.intro-snow-globe,
.intro-globe-glass {
  touch-action: none;
  overscroll-behavior: none;
}
.intro-copy > h1 {
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}
@media (max-width: 430px) {
  .intro-copy > h1 {
    font-size: clamp(26px, 7.2vw, 34px) !important;
    line-height: 1.12 !important;
    letter-spacing: -.02em;
  }
  .intro-copy > h1 span:last-child {
    -webkit-text-stroke-width: 1.4px;
  }
}

@media (max-width: 980px) {
  .martin-launcher,
  .martin-launcher.martin-companion {
    top: auto !important;
    right: calc(14px + env(safe-area-inset-right)) !important;
    bottom: calc(14px + env(safe-area-inset-bottom)) !important;
    width: 56px !important;
    height: 56px !important;
    min-height: 56px !important;
  }
  .app-shell .topbar { padding-right: 16px; }
}

.progress-course-grid {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}
.progress-course-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(180deg, #fff, #f7fafb);
}
.progress-course-copy { display: grid; gap: 6px; }
.progress-course-copy small { color: var(--muted); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.progress-course-actions { display: grid; gap: 8px; justify-items: stretch; }
.instruction-pdf-block { display: grid; gap: 12px; }
.instruction-pdf-frame {
  width: 100%;
  min-height: min(72vh, 920px);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}
.instruction-reader.is-pdf .reader { padding: 0; }
@media (max-width: 900px) {
  .progress-course-card { grid-template-columns: 1fr; }
}

/* ===== Urgent UI fixes 2026-07-24 ===== */
.answer-feedback { display: none !important; }

.test-session-card,
.test-question-step,
.test-question-step h3,
.answer-options,
.answer-option,
.answer-option-card,
.answer-option-copy,
.answer-option-copy b,
.matching-row,
.hierarchy-level {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
}

.answer-options {
  grid-template-columns: minmax(0, 1fr) !important;
}

.answer-option,
.answer-option-card {
  align-items: start;
  height: auto;
  min-height: 56px;
}

.answer-option-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.answer-option-copy b {
  line-height: 1.45;
  white-space: normal;
}

.answer-option-key {
  flex: 0 0 34px;
  align-self: start;
}

.test-question-step h3,
.test-question-step > p.muted,
.question-media,
.question-media-item,
.question-media-frame {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.course-hero-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 0;
  padding: 0;
  overflow: hidden;
  background: #fff;
}

.course-hero-art {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-bottom: 1px solid rgba(38, 50, 58, .12);
  background: #f8f4ec;
}

.course-hero-art img,
.course-hero-card > img {
  width: 100%;
  height: 100%;
  max-height: none;
  display: block;
  object-fit: contain !important;
  object-position: center bottom !important;
  background: #f8f4ec;
}

.course-hero-copy {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 10px;
  padding: 18px;
  background: #fff;
}

.course-hero-copy h2,
.course-hero-copy p,
.course-hero-copy .badge {
  position: static;
  max-width: 100%;
  margin: 0;
}

.course-hero-copy h2 {
  font-size: clamp(24px, 4.8vw, 40px);
  line-height: 1.08;
}

.home-stage-media .home-stage-scene,
img.home-stage-scene {
  object-fit: contain !important;
  object-position: center center !important;
}

@media (max-width: 760px) {
  .home-stage-media {
    width: min(100%, 390px);
    margin-inline: auto;
    aspect-ratio: 4 / 5;
  }

  .home-stage-media .home-stage-scene,
  img.home-stage-scene {
    object-position: center 42% !important;
  }
}

.martin-hero-surface,
.home-availability-card[style],
.home-availability-card.active[style],
.att-card,
.course-hero-card,
.attestation-motivation,
.coming-soon-stage,
.character-art-frame {
  isolation: isolate;
}

.home-availability-card[style],
.home-availability-card.active[style] {
  align-content: end !important;
  justify-items: start;
  padding: 18px 18px 20px !important;
  background-position: center 18% !important;
}

.home-availability-card[style]::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  height: 58%;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(11, 17, 21, 0) 0%, rgba(11, 17, 21, .72) 38%, rgba(11, 17, 21, .94) 100%);
}

.home-availability-card[style] > * {
  position: relative;
  z-index: 2;
  max-width: min(100%, 22ch);
  text-shadow: none;
}

.home-availability-card[style] > b {
  max-width: min(100%, 16ch);
  line-height: 1.08;
}

.home-availability-card[style] > small {
  max-width: min(100%, 30ch);
  line-height: 1.45;
}

.att-card-art,
.block-library-art-frame,
.question-toolkit-scene-frame,
.admin-module-hero-art-frame {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #f8f4ec;
}

.att-card-art img,
.block-library-art-frame > img,
.question-toolkit-scene-frame > img,
.admin-module-hero-art-frame > img,
.coming-soon-art,
.coming-soon-scene,
.attestation-motivation-art img {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  object-position: center bottom !important;
}

.att-card-content,
.attestation-motivation-copy,
.coming-soon-copy {
  position: relative;
  z-index: 2;
  background: #fff;
}

.attestation-motivation {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

.attestation-motivation-copy {
  width: 100%;
  max-width: none;
  padding: clamp(24px, 4vw, 42px);
  background: #f8f4ec;
}

.attestation-motivation-art {
  position: relative;
  inset: auto;
  min-height: clamp(220px, 42vw, 360px);
  aspect-ratio: 16 / 10;
  background: #f8f4ec;
}

@media (max-width: 760px) {
  .attestation-motivation-copy {
    order: 1;
  }

  .attestation-motivation-art {
    order: 2;
    margin: 0;
    min-height: clamp(220px, 56vw, 320px);
  }

  .course-hero-art {
    aspect-ratio: 4 / 3;
  }
}

.martin-flying-cutout {
  object-fit: contain !important;
  object-position: center center !important;
  mix-blend-mode: normal !important;
  filter: drop-shadow(0 8px 10px rgba(53, 42, 31, .16));
  width: 168px !important;
  height: auto !important;
  aspect-ratio: 1652 / 758;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
}

/* ===== First-load perf + inscription containers 2026-07-25 ===== */
.login-hero-core,
.login-hero-core .hero-title,
.login-hero-core .hero-subline,
.login-panel,
.login-card,
.login-card h1,
.login-card .field label {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.login-hero-stage {
  min-width: 0;
}

.login-martin-wrap {
  display: block;
  max-width: 100%;
}

.home-stage,
.home-stage-copy,
.home-stage-copy h2,
.home-stage-copy > p,
.home-stage-status,
.home-stage-status span,
.home-availability-card b,
.home-availability-card small,
.portal-course-card,
.portal-course-card h3,
.portal-course-card p,
.portal-course-card .badge,
.portal-hero h2,
.portal-hero p,
.welcome-hero .welcome-copy,
.welcome-hero h2,
.welcome-hero p,
.welcome-role,
.character-art-frame + span,
.block-image-library label > span:last-child {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
}

.home-stage-status {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.home-stage-status span {
  flex: 1 1 140px;
}

.profile-medal {
  flex: 1 1 180px;
  min-width: min(100%, 180px);
  max-width: 100%;
}

.profile-medal-copy b,
.profile-medal-copy small {
  overflow-wrap: anywhere;
  word-break: normal;
}

.martin-motion-strip {
  overflow: hidden;
  max-width: 100%;
}

@media (max-width: 720px) {
  .martin-flying-cutout {
    width: 126px !important;
  }
}

.section-head > div,
.section-head h2,
.section-head span,
.section-head p,
.question-editor-heading > div,
.question-library-heading > div {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .login-hero-core .hero-title {
    font-size: clamp(28px, 9vw, 38px);
    line-height: 1.02;
  }

  .home-stage-copy h2 {
    font-size: clamp(28px, 8.4vw, 40px);
    line-height: 1.08;
  }

  .portal-hero h2 {
    font-size: clamp(24px, 7vw, 32px);
    line-height: 1.08;
  }

  .profile-medal {
    flex-basis: 100%;
  }
}

/* ===== Portal overhaul polish 2026-07-25 ===== */
.training-library-hero,
.instruction-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(240px, .95fr);
  gap: clamp(18px, 3vw, 32px);
  align-items: center;
  margin-bottom: 18px;
  padding: clamp(22px, 3vw, 36px);
  border: 1px solid var(--ohara-rule, #e5e7eb);
  border-radius: 20px;
  background: linear-gradient(135deg, #fff8f1 0%, #fff 42%, #f7fbfd 100%);
  box-shadow: var(--ohara-editorial-shadow, 0 18px 40px rgba(17, 24, 29, .08));
  overflow: hidden;
}

.training-library-copy,
.instruction-hero > div:first-child {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.training-library-brand,
.instruction-hero .official-wordmark {
  width: min(220px, 58vw);
  height: auto;
}

.training-library-art,
.instruction-hero > img:last-child {
  justify-self: end;
  width: min(100%, 420px);
  height: auto;
  object-fit: contain;
  object-position: center bottom;
}

.getcourse-material-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}

.getcourse-material-card {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: #fff;
}

.getcourse-material-card h3 {
  margin: 0;
  font-size: 18px;
  line-height: 1.2;
}

@media (min-width: 761px) {
  .attestation-motivation {
    grid-template-columns: minmax(0, 1.08fr) minmax(280px, .92fr);
    grid-template-rows: auto;
  }

  .attestation-motivation-copy {
    order: 1;
    width: auto;
  }

  .attestation-motivation-art {
    order: 2;
  }
}

.home-stage-copy {
  padding-left: clamp(24px, 3.2vw, 42px);
}

@media (max-width: 760px) {
  .training-library-hero,
  .instruction-hero {
    grid-template-columns: 1fr;
  }

  .training-library-art,
  .instruction-hero > img:last-child {
    justify-self: center;
    width: min(100%, 320px);
  }
}

/* Exact transparent brand lockup: fixed footprint, no canvas, outline or layout shift. */
.logo.official-brand {
  display: inline-block;
  align-items: flex-start;
  gap: 0;
  width: min(152px, 100%);
  max-width: 100%;
  height: auto;
  aspect-ratio: 795 / 260;
  min-width: 0;
  flex: 0 0 auto;
  contain: layout paint;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
}
.official-wordmark,
.intro-brand img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 795 / 260;
  object-fit: contain;
  object-position: left center;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  filter: none;
}
.sidebar .official-brand { width: min(138px, 100%); }
.sidebar-collapsed .sidebar .official-brand { width: 72px; }
.login-hero .official-brand { width: min(168px, 100%); }
.auth-card .official-brand { width: min(152px, 100%); }
.intro-brand { width: min(132px, 42vw); }
.intro-brand img { width: 100%; }
.training-library-brand,
.instruction-hero .official-wordmark {
  width: min(184px, 52vw);
  aspect-ratio: 795 / 260;
  object-fit: contain;
  object-position: left center;
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  filter: none;
}
@media (max-width: 760px) {
  .logo.official-brand,
  .login-hero .official-brand,
  .auth-card .official-brand {
    width: min(138px, 44vw);
  }
}

/* ===== Final frontend contract 2026-07-27: compact media, contained brand and mobile geometry ===== */
.official-brand-icon {
  display: none;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
}

@media (min-width: 901px) {
  .app-shell.sidebar-collapsed .sidebar .official-brand {
    width: 52px;
    height: 52px;
    max-width: 52px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    overflow: hidden;
  }
  .app-shell.sidebar-collapsed .sidebar .official-wordmark { display: none; }
  .app-shell.sidebar-collapsed .sidebar .official-brand-icon {
    display: block;
    width: 44px;
    height: 44px;
  }
}

.home-availability-card > b {
  max-width: 100%;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  text-wrap: balance;
}

#questionLinearForm,
#questionDefinitionFlow,
#questionAfterAnswerFlow,
.question-linear-step,
.question-inline-image-upload,
.question-main-image-slot {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.question-live-preview-step,
.question-live-preview-step > *,
#questionLivePreviewHost,
.question-live-preview-card,
.question-live-preview-head,
.question-live-preview-surface,
.question-live-preview-surface > *,
.question-live-answer-preview {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.answer-options.answer-options-media {
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 280px)) !important;
  justify-content: start;
  align-items: start;
}
.answer-options.answer-options-media .answer-option-card.has-media {
  width: 100%;
  max-width: 280px;
}
.answer-option-card.has-media .answer-option-media {
  width: min(100%, 220px);
  justify-self: center;
}
.answer-option-card.has-media .answer-option-media-zoom {
  width: 100%;
  max-width: 220px;
}

@media (max-width: 480px) {
  .app-shell .main {
    width: 100%;
    min-width: 0;
    padding:
      calc(76px + env(safe-area-inset-top))
      12px
      calc(88px + env(safe-area-inset-bottom));
    overflow-x: clip;
  }
  #view,
  .topbar,
  .home-stage,
  .home-availability,
  .home-availability-grid,
  .home-availability-card,
  .card,
  .question-linear-card,
  .test-session-card,
  .test-question-step {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
  .home-stage-copy {
    padding: 22px 16px 18px !important;
  }
  .home-stage-copy h2 {
    font-size: clamp(28px, 8vw, 34px);
    line-height: 1.08;
  }
  .home-availability-card[style],
  .home-availability-card.active[style] {
    min-height: 250px;
    padding: 16px !important;
  }
  .home-availability-card > b {
    font-size: clamp(22px, 6.4vw, 27px);
    line-height: 1.1;
  }
  .answer-options.answer-options-media {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .answer-options.answer-options-media .answer-option-card.has-media {
    max-width: 100%;
  }
  .answer-option-card.has-media .answer-option-media {
    width: min(100%, 184px);
  }
  .answer-option-card.has-media .answer-option-media-zoom {
    max-width: 184px;
  }
  .martin-launcher,
  .martin-launcher.martin-companion {
    position: fixed !important;
    top: calc(12px + env(safe-area-inset-top)) !important;
    right: calc(12px + env(safe-area-inset-right)) !important;
    bottom: auto !important;
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    min-height: 54px !important;
    grid-template-columns: 46px !important;
    place-items: center;
    padding: 4px !important;
    overflow: hidden !important;
    border-radius: 50% !important;
  }
  .martin-launcher .martin-launcher-face,
  .martin-companion .martin-launcher-face {
    width: 46px;
    height: 46px;
    min-width: 46px;
    border-radius: 50%;
  }
}