:root {
    color-scheme: light;
    --bg: #f5f6f8;
    --surface: #ffffff;
    --surface-2: #f7f8fa;
    --surface-3: #eef1f4;
    --text: #151a20;
    --muted: #68717c;
    --subtle: #949da7;
    --line: #e3e6ea;
    --line-strong: #d7dbe0;
    --brand: #17272c;
    --brand-contrast: #ffffff;
    --accent: #e65f3c;
    --accent-soft: #fff0eb;
    --green: #138b63;
    --green-soft: #e9f7f1;
    --blue: #3374d7;
    --blue-soft: #eaf1fd;
    --amber: #b06a08;
    --amber-soft: #fff4df;
    --red: #c34242;
    --red-soft: #fceced;
    --violet: #7556c7;
    --violet-soft: #f0ecfb;
    --sidebar: 272px;
    --topbar: 76px;
    --radius: 14px;
    --shadow: 0 1px 2px rgba(14, 23, 28, .04), 0 10px 30px rgba(14, 23, 28, .035);
}

html[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0f1316;
    --surface: #171c20;
    --surface-2: #1d2328;
    --surface-3: #252c32;
    --text: #f2f5f6;
    --muted: #a8b0b7;
    --subtle: #7f8991;
    --line: #2a3238;
    --line-strong: #374047;
    --brand: #e9f0f2;
    --brand-contrast: #111619;
    --accent-soft: #38221e;
    --green-soft: #15352b;
    --blue-soft: #1a2e4b;
    --amber-soft: #3a2c17;
    --red-soft: #3c2224;
    --violet-soft: #2d2744;
    --shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 18px 40px rgba(0, 0, 0, .14);
}

@media (prefers-color-scheme: dark) {
    html[data-theme="system"] {
        color-scheme: dark;
        --bg: #0f1316; --surface: #171c20; --surface-2: #1d2328; --surface-3: #252c32;
        --text: #f2f5f6; --muted: #a8b0b7; --subtle: #7f8991; --line: #2a3238;
        --line-strong: #374047; --brand: #e9f0f2; --brand-contrast: #111619; --accent-soft: #38221e;
        --green-soft: #15352b; --blue-soft: #1a2e4b; --amber-soft: #3a2c17; --red-soft: #3c2224;
        --violet-soft: #2d2744; --shadow: 0 1px 2px rgba(0,0,0,.2), 0 18px 40px rgba(0,0,0,.14);
    }
}

* { box-sizing: border-box; }
html { font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--bg); }
body { margin: 0; color: var(--text); background: var(--bg); font-size: 16px; line-height: 1.5; }
button, input, select { font: inherit; color: inherit; }
button, a, select { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { border: 0; }
.icon { width: 20px; height: 20px; flex: 0 0 auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 10px; left: 10px; z-index: 200; padding: 10px 14px; color: var(--brand-contrast); background: var(--brand); border-radius: 8px; font-weight: 750; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
input:focus-visible, select:focus-visible { outline: 0; }

.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 30; display: flex; width: var(--sidebar); flex-direction: column; padding: 0 16px 16px; background: var(--surface); border-right: 1px solid var(--line); }
.brand-row { height: var(--topbar); display: flex; align-items: center; justify-content: space-between; padding: 0 8px; }
.brand { display: flex; align-items: center; gap: 11px; font-size: 19px; font-weight: 780; letter-spacing: -.035em; }
.brand > span:last-child span { color: var(--accent); }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; color: var(--brand-contrast); background: var(--brand); border-radius: 10px; }
.brand-mark .icon { width: 20px; }
.sidebar-close { display: none !important; font-size: 26px; }
.tenant-card { position: relative; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 10px; margin: 8px 0 22px; padding: 10px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; }
.tenant-card.is-platform { cursor: pointer; }
.tenant-logo, .mini-logo { display: grid; place-items: center; flex: 0 0 auto; width: 35px; height: 35px; border-radius: 9px; background: var(--brand); color: var(--brand-contrast); font-size: 12px; font-weight: 800; }
.tenant-logo.small { width: 38px; height: 38px; }
.tenant-copy { display: flex; flex-direction: column; min-width: 0; }
.tenant-copy small, .profile-copy small { color: var(--muted); font-size: 12px; }
.tenant-copy strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.tenant-toggle { display: grid; place-items: center; padding: 5px; background: transparent; cursor: pointer; }
.tenant-toggle .icon { width: 15px; transition: transform .18s ease; }
.tenant-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.tenant-menu, .profile-menu { position: absolute; z-index: 50; display: none; padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 45px rgba(6, 14, 18, .18); }
.tenant-menu.open, .profile-menu.open { display: block; }
.tenant-menu { top: calc(100% + 8px); left: 0; width: 286px; }
.menu-label { padding: 6px 8px; color: var(--muted); font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.menu-note { margin: 0; padding: 7px 8px 9px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.tenant-option, .manage-link, .profile-menu a { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; font-size: 13px; }
.tenant-option:hover, .tenant-option.selected, .manage-link:hover, .profile-menu a:hover, .profile-menu a.selected { background: var(--surface-2); }
.tenant-option .mini-logo { width: 29px; height: 29px; border-radius: 7px; font-size: 10px; }
.tenant-option > span:nth-child(2) { flex: 1; }
.tenant-option .icon, .manage-link .icon, .profile-menu a .icon { width: 16px; }
.manage-link { margin-top: 4px; padding-top: 10px; color: var(--blue); border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; }
.nav-eyebrow { padding: 0 11px 7px; color: var(--subtle); font-size: 11px; font-weight: 750; letter-spacing: .11em; text-transform: uppercase; }
.nav-list { display: flex; flex-direction: column; gap: 3px; }
.nav-item { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; color: var(--muted); border-radius: 10px; font-size: 15px; font-weight: 590; transition: color .15s, background .15s; }
.nav-item:hover { color: var(--text); background: var(--surface-2); }
.nav-item.active { color: var(--text); background: var(--surface-3); font-weight: 680; }
.nav-item.active::before { position: absolute; left: 0; width: 3px; height: 22px; background: var(--accent); border-radius: 0 3px 3px 0; content: ""; }
.nav-item .icon { width: 18px; }
.sidebar-foot { position: relative; margin-top: auto; }
.platform-badge { display: flex; gap: 9px; margin: 0 2px 8px; padding: 10px; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; }
.platform-badge .icon { width: 17px; color: var(--green); }
.platform-badge span { display: flex; flex-direction: column; }
.platform-badge strong { color: var(--text); font-size: 12px; }
.platform-badge small { font-size: 11px; }
.profile-button { display: grid; width: 100%; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 9px; background: transparent; border-radius: 10px; text-align: left; cursor: pointer; }
.profile-button:hover { background: var(--surface-2); }
.avatar { display: grid; place-items: center; width: 35px; height: 35px; color: #fff; background: linear-gradient(145deg, #e65f3c, #ad3c2e); border-radius: 50%; font-size: 12px; font-weight: 800; }
.profile-copy { display: flex; flex-direction: column; min-width: 0; }
.profile-copy strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.profile-button > .icon { width: 17px; color: var(--muted); }
.profile-menu { bottom: 63px; left: 0; width: 240px; }
.profile-menu a .icon:last-child { margin-left: auto; }
.profile-menu form { margin: 4px 0 0; padding-top: 5px; border-top: 1px solid var(--line); }
.profile-menu-action { display: flex; width: 100%; align-items: center; gap: 10px; padding: 8px; background: transparent; border-radius: 8px; font-size: 13px; text-align: left; cursor: pointer; }
.profile-menu-action:hover { background: var(--surface-2); }
.profile-menu-action .icon { width: 16px; }
.menu-separator { display: block; margin: 5px 0; border-top: 1px solid var(--line); }
.back-link { display: flex; align-items: center; gap: 8px; margin: 5px 5px 20px; color: var(--muted); font-size: 13px; font-weight: 650; }
.back-link:hover { color: var(--text); }
.course-identity { display: flex; align-items: center; gap: 11px; margin: 0 4px 22px; }
.course-glyph { display: grid; place-items: center; width: 42px; height: 42px; color: #f6fffd; background: linear-gradient(145deg, #148f84, #0f5f69); border-radius: 11px; font-size: 12px; font-weight: 800; }
.course-identity div { display: flex; flex-direction: column; }
.course-identity strong { font-size: 14px; }
.course-identity span:last-child { color: var(--muted); font-size: 12px; }

.main-area { min-height: 100vh; margin-left: var(--sidebar); }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; height: var(--topbar); align-items: center; justify-content: space-between; gap: 24px; padding: 0 30px; background: color-mix(in srgb, var(--surface) 92%, transparent); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); }
.topbar-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar-title > div { min-width: 0; }
.topbar h1 { overflow: hidden; margin: 0; font-size: 19px; line-height: 1.2; letter-spacing: -.02em; text-overflow: ellipsis; white-space: nowrap; }
.crumb { display: block; margin-bottom: 2px; color: var(--muted); font-size: 11px; }
.topbar-actions { display: flex; align-items: center; gap: 9px; }
.search-control { display: flex; width: min(33vw, 390px); height: 40px; align-items: center; gap: 9px; padding: 0 10px; background: var(--surface-2); border: 1px solid transparent; border-radius: 10px; transition: border .15s, background .15s; }
.search-control:focus-within { background: var(--surface); border-color: var(--line-strong); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 12%, transparent); }
.search-control .icon { width: 17px; color: var(--muted); }
.search-control input, .table-filter input { width: 100%; min-width: 0; height: 100%; padding: 0; outline: 0; background: transparent; border: 0; font-size: 14px; }
.search-control kbd { padding: 2px 6px; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 5px; font: 11px ui-monospace, monospace; }
.icon-button { display: inline-grid; width: 40px; height: 40px; place-items: center; padding: 0; background: transparent; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.icon-button:hover { background: var(--surface-2); }
.icon-button .icon { width: 18px; }
.theme-sun { display: none; }
html[data-theme="dark"] .theme-moon { display: none; }
html[data-theme="dark"] .theme-sun { display: inline; }
@media (prefers-color-scheme: dark) { html[data-theme="system"] .theme-moon { display: none; } html[data-theme="system"] .theme-sun { display: inline; } }
.primary-button, .secondary-button { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; gap: 8px; padding: 0 14px; border-radius: 10px; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.primary-button { color: var(--brand-contrast); background: var(--brand); }
.primary-button:hover { opacity: .9; }
.primary-button .icon, .secondary-button .icon { width: 17px; }
.secondary-button { background: var(--surface); border: 1px solid var(--line-strong); }
.secondary-button:hover { background: var(--surface-2); }
.menu-button { display: none; }
.context-bar { display: flex; align-items: center; justify-content: space-between; gap: 15px; min-height: 42px; padding: 7px 30px; color: #cfe3e7; background: #19343a; font-size: 12px; }
.context-bar span { display: flex; align-items: center; gap: 7px; }
.context-bar .icon { width: 16px; }
.context-bar a { color: white; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.preview-context { justify-content: flex-start; background: #293b42; }

.content { width: min(1500px, 100%); margin: 0 auto; padding: 28px 30px 48px; }
.page-intro { margin-bottom: 22px; }
.page-intro .eyebrow, .eyebrow { margin: 0 0 4px; color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.page-intro h2, .course-hero h2 { margin: 0; font-size: clamp(25px, 2.2vw, 34px); line-height: 1.18; letter-spacing: -.045em; }
.page-intro > p:last-child { margin: 6px 0 0; color: var(--muted); font-size: 15px; }
.split-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 25px; }
.split-intro div > p:last-child { max-width: 650px; margin: 7px 0 0; color: var(--muted); }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin-bottom: 18px; }
.metric-card { display: flex; min-height: 112px; align-items: center; gap: 13px; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.metric-card > div { display: flex; flex-direction: column; min-width: 0; }
.metric-card span:not(.metric-icon) { color: var(--muted); font-size: 14px; font-weight: 600; }
.metric-card strong { overflow: hidden; margin: 1px 0; font-size: 24px; line-height: 1.2; letter-spacing: -.035em; text-overflow: ellipsis; white-space: nowrap; }
.metric-card small { color: var(--subtle); font-size: 12px; }
.metric-icon, .timeline-icon { display: grid; place-items: center; flex: 0 0 auto; width: 43px; height: 43px; border-radius: 11px; }
.metric-icon.neutral, .timeline-icon.neutral { color: var(--text); background: var(--surface-3); }
.metric-icon.green, .timeline-icon.green { color: var(--green); background: var(--green-soft); }
.metric-icon.blue, .timeline-icon.blue { color: var(--blue); background: var(--blue-soft); }
.metric-icon.amber, .timeline-icon.amber { color: var(--amber); background: var(--amber-soft); }
.metric-icon.violet, .timeline-icon.violet { color: var(--violet); background: var(--violet-soft); }
.metric-icon .icon, .timeline-icon .icon { width: 20px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.panel-head { display: flex; min-height: 71px; align-items: center; justify-content: space-between; gap: 15px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.panel-head h3 { margin: 0; font-size: 16px; letter-spacing: -.015em; }
.panel-head p { margin: 2px 0 0; color: var(--muted); font-size: 12px; }
.panel-head select { min-height: 35px; padding: 0 30px 0 10px; outline: 0; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; font-size: 12px; }
.dashboard-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, .7fr); gap: 18px; margin-bottom: 18px; }
.dashboard-layout.courses-only { grid-template-columns: 1fr; }
.course-table-head, .course-row { display: grid; grid-template-columns: minmax(265px, 1.4fr) minmax(110px, .55fr) minmax(125px, .6fr) minmax(125px, .65fr) 24px; align-items: center; gap: 16px; padding: 0 18px; }
.course-table-head { min-height: 41px; color: var(--muted); background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.course-row { min-height: 78px; border-bottom: 1px solid var(--line); font-size: 14px; transition: background .15s; }
.course-row:hover { background: var(--surface-2); }
.course-row > span { min-width: 0; color: var(--muted); }
.course-row > span:last-child { display: flex; justify-content: flex-end; }
.course-row > span:last-child .icon { width: 16px; }
.course-main { display: flex; align-items: center; gap: 11px; }
.course-main > span { display: flex; min-width: 0; flex-direction: column; }
.course-main strong { overflow: hidden; color: var(--text); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.course-main small { overflow: hidden; margin-top: 2px; text-overflow: ellipsis; white-space: nowrap; }
.course-color { display: grid; width: 38px; height: 38px; place-items: center; flex: 0 0 auto; color: #fff; background: #53717a; border-radius: 9px; font-style: normal; font-size: 11px; font-weight: 800; }
.course-color.teal { background: #197d76; } .course-color.blue { background: #386aab; } .course-color.amber { background: #a66823; } .course-color.violet { background: #6d59a6; }
.course-row > span:nth-child(3) { display: flex; align-items: center; gap: 8px; }
.course-row b { color: var(--text); font-size: 11px; }
.mini-progress { display: block; width: 54px; height: 5px; overflow: hidden; background: var(--surface-3); border-radius: 9px; }
.mini-progress i { display: block; height: 100%; background: var(--green); border-radius: inherit; }
.panel-footer { display: flex; min-height: 53px; align-items: center; justify-content: flex-end; padding: 0 17px; }
.text-button { display: inline-flex; align-items: center; gap: 5px; padding: 5px; color: var(--blue); background: transparent; font-size: 12px; font-weight: 700; cursor: pointer; }
.text-button .icon { width: 14px; }
.empty-state { padding: 35px 20px; color: var(--muted); text-align: center; }
.donut-wrap { display: flex; align-items: center; justify-content: center; gap: 24px; padding: 25px 18px; }
.donut { display: grid; width: 136px; height: 136px; place-items: center; flex: 0 0 auto; background: conic-gradient(var(--green) 0 95%, var(--amber) 95% 98.5%, var(--red) 98.5% 100%); border-radius: 50%; }
.donut::before { position: absolute; width: 96px; height: 96px; background: var(--surface); border-radius: 50%; content: ""; }
.donut > div { z-index: 1; display: flex; flex-direction: column; align-items: center; }
.donut strong { font-size: 21px; letter-spacing: -.04em; }
.donut span { color: var(--muted); font-size: 11px; }
.donut-legend { display: flex; flex-direction: column; gap: 10px; color: var(--muted); font-size: 11px; }
.donut-legend span { display: grid; grid-template-columns: 8px 35px auto; align-items: center; gap: 6px; }
.donut-legend i { width: 7px; height: 7px; border-radius: 50%; }
.donut-legend i.success { background: var(--green); }.donut-legend i.warning { background: var(--amber); }.donut-legend i.danger { background: var(--red); }
.donut-legend b { color: var(--text); }
.health-callout { display: flex; gap: 11px; margin: 0 16px 16px; padding: 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 11px; }
.health-callout .metric-icon { width: 36px; height: 36px; }
.health-callout div { min-width: 0; }
.health-callout strong { font-size: 12px; }.health-callout p { margin: 3px 0 6px; color: var(--muted); font-size: 11px; }.health-callout a { display: inline-flex; align-items: center; color: var(--blue); font-size: 11px; font-weight: 700; }.health-callout a .icon { width: 13px; }
.activity-strip { margin-top: 18px; }
.activity-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.activity-item { display: flex; gap: 11px; padding: 18px; border-right: 1px solid var(--line); }
.activity-item:last-child { border: 0; }
.activity-item .timeline-icon { width: 36px; height: 36px; }
.activity-item strong { display: block; font-size: 12px; }.activity-item p { margin: 3px 0 5px; color: var(--muted); font-size: 11px; }.activity-item time, .timeline-item time { color: var(--subtle); font-size: 10px; }

.table-filter { display: flex; min-width: 220px; height: 36px; align-items: center; gap: 8px; padding: 0 9px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; }
.table-filter .icon { width: 15px; color: var(--muted); }
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.data-table th { height: 42px; padding: 0 18px; color: var(--muted); background: var(--surface-2); border-bottom: 1px solid var(--line); text-align: left; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.data-table td { height: 72px; padding: 8px 18px; color: var(--muted); border-bottom: 1px solid var(--line); white-space: nowrap; }
.data-table tr:last-child td { border-bottom: 0; }
.table-title { display: flex; align-items: center; gap: 11px; }
.table-title div { display: flex; flex-direction: column; }
.table-title strong { color: var(--text); font-size: 13px; }.table-title small { margin-top: 2px; color: var(--subtle); font: 10px ui-monospace, monospace; }
.status-pill { display: inline-flex !important; align-items: center; gap: 6px; width: fit-content; padding: 4px 8px; border-radius: 999px; font-size: 10px !important; font-weight: 750 !important; }
.status-pill i { width: 6px; height: 6px; border-radius: 50%; }
.status-pill.success { color: var(--green); background: var(--green-soft); }.status-pill.success i { background: var(--green); }
.status-pill.warning { color: var(--amber); background: var(--amber-soft); }.status-pill.warning i { background: var(--amber); }
.row-action { display: inline-flex; align-items: center; gap: 4px; color: var(--blue); font-weight: 700; }.row-action .icon { width: 13px; }

.course-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; padding: 23px 24px; color: #eef8f8; background: linear-gradient(120deg, #17363a, #1f4a4f 55%, #2b5f5e); border-radius: 16px; box-shadow: var(--shadow); }
.course-hero p { margin: 8px 0 0; color: #c3d9da; font-size: 12px; }
.course-hero .secondary-button { color: #fff; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); }
.course-badges { display: flex; align-items: center; gap: 6px; margin-bottom: 11px; }
.course-badges > span:not(.status-pill) { padding: 4px 8px; color: #d8e9e9; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.1); border-radius: 999px; font-size: 10px; font-weight: 700; }
.course-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, .75fr); gap: 18px; margin-bottom: 18px; }
.coverage-total { color: var(--green); font-size: 23px; font-weight: 800; letter-spacing: -.04em; }
.coverage-list { padding: 6px 18px; }
.coverage-row { display: grid; min-height: 60px; grid-template-columns: minmax(180px,1fr) minmax(140px,1fr) 38px; align-items: center; gap: 18px; border-bottom: 1px solid var(--line); }
.coverage-row:last-child { border: 0; }
.coverage-row > div:first-child { display: flex; flex-direction: column; }.coverage-row strong { font-size: 12px; }.coverage-row span { color: var(--muted); font-size: 10px; }.coverage-row b { text-align: right; font-size: 11px; }
.progress-track { height: 6px; overflow: hidden; background: var(--surface-3); border-radius: 99px; }.progress-track i { display: block; height: 100%; background: linear-gradient(90deg, #15936a, #4fc29a); border-radius: inherit; }
.coverage-note { display: flex; gap: 10px; margin: 8px 18px 17px; padding: 12px; color: var(--amber); background: var(--amber-soft); border-radius: 9px; font-size: 11px; }.coverage-note .icon { width: 17px; }.coverage-note span { color: var(--muted); }.coverage-note strong { display: block; margin-bottom: 2px; color: var(--amber); }
.timeline { padding: 5px 18px; }
.timeline-item { position: relative; display: flex; gap: 11px; padding: 13px 0; }
.timeline-item:not(:last-child)::after { position: absolute; top: 49px; bottom: -8px; left: 17px; border-left: 1px solid var(--line); content: ""; }
.timeline-item .timeline-icon { width: 35px; height: 35px; }.timeline-item .timeline-icon .icon { width: 16px; }.timeline-item div:last-child { min-width: 0; }.timeline-item strong { display: block; font-size: 12px; }.timeline-item p { overflow: hidden; margin: 2px 0 4px; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.snapshot-list { padding: 0 18px; }
.snapshot-row { display: grid; min-height: 68px; grid-template-columns: auto minmax(170px,1fr) 110px 100px 90px 40px; align-items: center; gap: 13px; color: var(--muted); border-bottom: 1px solid var(--line); font-size: 11px; }
.snapshot-row:last-child { border: 0; }.snapshot-row > div { display: flex; flex-direction: column; }.snapshot-row strong { color: var(--text); font-size: 12px; }.snapshot-row small { margin-top: 2px; color: var(--subtle); font-size: 10px; }.snapshot-row .icon-button { width: 32px; height: 32px; border: 0; }
.snapshot-dot { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 50%; }.snapshot-dot.complete { color: var(--green); background: var(--green-soft); }.snapshot-dot.partial { color: var(--amber); background: var(--amber-soft); }.snapshot-dot .icon { width: 14px; }

/* Platform provisioning */
.provisioning-intro { align-items: center; }
.inline-back { display: inline-block; margin-bottom: 13px; color: var(--muted); font-size: 13px; font-weight: 700; }
.inline-back:hover { color: var(--text); }
.prototype-label { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; color: var(--amber); background: var(--amber-soft); border: 1px solid color-mix(in srgb, var(--amber) 24%, transparent); border-radius: 999px; font-size: 12px; font-weight: 750; white-space: nowrap; }
.prototype-label .icon { width: 15px; }
.provisioning-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); align-items: start; gap: 18px; }
.provisioning-panel { overflow: hidden; }
.step-track { display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: 12px; padding: 20px 24px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.step-track > span { display: inline-flex; align-items: center; gap: 8px; color: var(--subtle); font-size: 12px; font-weight: 750; }
.step-track > span i { display: grid; width: 26px; height: 26px; place-items: center; color: var(--muted); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 50%; font-style: normal; font-size: 11px; }
.step-track > span.active { color: var(--text); }
.step-track > span.active i, .step-track > span.complete i { color: var(--brand-contrast); background: var(--brand); border-color: var(--brand); }
.step-track > b { height: 1px; background: var(--line-strong); }
.provision-form, .provision-review, .provision-complete { padding: 25px 28px 27px; }
.form-section-heading { margin-bottom: 20px; }
.form-section-heading h3 { margin: 0; font-size: 18px; letter-spacing: -.02em; }
.form-section-heading p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.form-field { margin-bottom: 19px; }
.form-field > label { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 750; }
.form-field > input, .input-with-prefix { width: 100%; min-height: 46px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 10px; transition: border-color .15s, box-shadow .15s; }
.form-field > input { padding: 0 13px; outline: 0; }
.form-field > input:focus, .input-with-prefix:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 13%, transparent); }
.form-field > input[aria-invalid="true"], .input-with-prefix.has-error { border-color: var(--red); }
.input-with-prefix { display: flex; align-items: center; overflow: hidden; }
.input-with-prefix > span { display: flex; height: 44px; align-items: center; padding: 0 12px; color: var(--muted); background: var(--surface-2); border-right: 1px solid var(--line); font: 12px ui-monospace, SFMono-Regular, Consolas, monospace; }
.input-with-prefix > span .icon { width: 17px; }
.input-with-prefix input { width: 100%; min-width: 0; height: 44px; padding: 0 12px; outline: 0; background: transparent; border: 0; font: 13px ui-monospace, SFMono-Regular, Consolas, monospace; }
.form-field > small { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; }
code { padding: 2px 5px; color: var(--text); background: var(--surface-3); border-radius: 5px; font: .92em ui-monospace, SFMono-Regular, Consolas, monospace; }
.field-error { display: none; margin-top: 5px; color: var(--red); font-size: 12px; font-weight: 650; }
.field-error.show { display: block; }
.form-divider { margin: 25px 0; border-top: 1px solid var(--line); }
.template-card { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 11px; }
.template-card > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; }
.template-card small { color: var(--muted); font-size: 11px; }
.template-card strong { font: 700 14px ui-monospace, SFMono-Regular, Consolas, monospace; }
.template-card em { margin-top: 2px; color: var(--subtle); font-style: normal; font-size: 11px; }
.form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; margin-top: 26px; }
.provision-review-button .icon { width: 15px; }
.provisioning-aside { display: grid; gap: 14px; }
.provision-plan { display: grid; gap: 0; margin: 0; padding: 8px 18px 16px; list-style: none; }
.provision-plan li { position: relative; display: flex; gap: 12px; padding: 13px 0; }
.provision-plan li:not(:last-child)::after { position: absolute; top: 41px; bottom: -9px; left: 13px; border-left: 1px solid var(--line-strong); content: ""; }
.provision-plan li > i { z-index: 1; display: grid; width: 27px; height: 27px; place-items: center; flex: 0 0 auto; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: 50%; font-style: normal; font-size: 10px; font-weight: 800; }
.provision-plan li > span { display: flex; min-width: 0; flex-direction: column; }
.provision-plan strong { font-size: 13px; }
.provision-plan small { margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.security-note { display: flex; gap: 11px; padding: 15px; color: var(--green); background: var(--green-soft); border: 1px solid color-mix(in srgb, var(--green) 20%, transparent); border-radius: 12px; }
.security-note > .icon { width: 19px; }
.security-note div { color: var(--muted); }
.security-note strong { display: block; margin-bottom: 3px; color: var(--green); font-size: 13px; }
.security-note p { margin: 0; font-size: 12px; line-height: 1.5; }
.review-list { margin: 0; border: 1px solid var(--line); border-radius: 11px; }
.review-list div { display: grid; grid-template-columns: 180px minmax(0,1fr); gap: 18px; padding: 13px 15px; border-bottom: 1px solid var(--line); }
.review-list div:last-child { border-bottom: 0; }
.review-list dt { color: var(--muted); font-size: 12px; }
.review-list dd { margin: 0; font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.confirmation-check { display: block; margin-top: 18px; cursor: pointer; }
.confirmation-check > input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.confirmation-check > span { display: flex; align-items: flex-start; gap: 11px; padding: 14px; background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: 11px; transition: border-color .15s, box-shadow .15s; }
.confirmation-check > input:focus-visible + span { box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 15%, transparent); }
.confirmation-check > input:checked + span { background: var(--green-soft); border-color: color-mix(in srgb, var(--green) 45%, var(--line)); }
.confirmation-check > span > .icon { width: 20px; color: var(--green); }
.confirmation-check > span > span { display: flex; flex-direction: column; }
.confirmation-check strong { font-size: 13px; }.confirmation-check small { margin-top: 3px; color: var(--muted); font-size: 12px; }
.primary-button:disabled { cursor: not-allowed; opacity: .42; }
.provision-complete { text-align: center; }
.complete-mark { display: grid; width: 54px; height: 54px; place-items: center; margin: 4px auto 15px; color: var(--green); background: var(--green-soft); border-radius: 50%; }
.complete-mark .icon { width: 27px; }
.provision-complete h3 { margin: 0; font-size: 22px; letter-spacing: -.03em; }
.provision-complete > p:not(.eyebrow) { max-width: 620px; margin: 8px auto 20px; color: var(--muted); font-size: 13px; }
.simulated-log { display: grid; max-width: 620px; margin: 0 auto; padding: 9px 16px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 11px; text-align: left; }
.simulated-log > span { display: grid; grid-template-columns: 22px 66px minmax(0,1fr); align-items: center; gap: 7px; padding: 10px 0; color: var(--muted); border-bottom: 1px solid var(--line); font-size: 12px; }
.simulated-log > span:last-child { border-bottom: 0; }
.simulated-log .icon { width: 16px; color: var(--green); }
.simulated-log b { color: var(--text); }
.centered-actions { justify-content: center; }

.mobile-backdrop { display: none; position: fixed; inset: 0; z-index: 29; background: rgba(2,8,10,.55); backdrop-filter: blur(2px); }
.toast { position: fixed; right: 20px; bottom: 20px; z-index: 100; padding: 10px 14px; color: var(--brand-contrast); background: var(--brand); border-radius: 9px; box-shadow: 0 12px 30px rgba(0,0,0,.18); font-size: 12px; font-weight: 700; opacity: 0; transform: translateY(8px); pointer-events: none; transition: .2s ease; }
.toast.show { opacity: 1; transform: translateY(0); }

/* Authentication */
.login-page { display: grid; min-height: 100vh; grid-template-rows: auto 1fr auto; overflow-x: hidden; }
.login-page::before { position: fixed; z-index: -1; inset: 0; background:
    radial-gradient(circle at 16% 8%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 28rem),
    radial-gradient(circle at 88% 85%, color-mix(in srgb, var(--blue) 9%, transparent), transparent 32rem);
    content: ""; pointer-events: none; }
.login-header { display: flex; width: min(1180px, calc(100% - 48px)); min-height: 84px; align-items: center; justify-content: space-between; margin: 0 auto; }
.login-main { display: grid; width: min(1120px, calc(100% - 48px)); grid-template-columns: minmax(0, 1fr) minmax(390px, 470px); align-items: center; gap: clamp(48px, 8vw, 112px); margin: 34px auto 60px; }
.login-intro { max-width: 570px; }
.login-intro h1 { max-width: 550px; margin: 8px 0 18px; font-size: clamp(40px, 5vw, 68px); line-height: 1.02; letter-spacing: -.06em; }
.login-intro > p:not(.eyebrow) { max-width: 535px; margin: 0; color: var(--muted); font-size: 17px; line-height: 1.7; }
.login-assurances { display: grid; gap: 19px; margin: 38px 0 0; padding: 0; list-style: none; }
.login-assurances li { display: flex; align-items: flex-start; gap: 13px; }
.login-assurances > li > .icon { width: 19px; margin-top: 2px; color: var(--green); }
.login-assurances span { display: flex; flex-direction: column; }
.login-assurances strong { font-size: 14px; }
.login-assurances small { margin-top: 2px; color: var(--muted); font-size: 13px; }
.login-card { padding: 32px; background: color-mix(in srgb, var(--surface) 96%, transparent); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 25px 70px rgba(12, 24, 30, .1); }
.login-card-head { display: flex; align-items: center; gap: 13px; margin-bottom: 25px; }
.login-card-head .eyebrow { margin-bottom: 1px; }
.login-card-head h2 { margin: 0; font-size: 23px; letter-spacing: -.035em; }
.login-lock { display: grid; width: 46px; height: 46px; place-items: center; color: var(--brand-contrast); background: var(--brand); border-radius: 13px; }
.login-lock .icon { width: 20px; }
.login-notice { display: flex; align-items: flex-start; gap: 10px; margin: -5px 0 19px; padding: 12px 13px; color: var(--amber); background: var(--amber-soft); border: 1px solid color-mix(in srgb, var(--amber) 28%, transparent); border-radius: 10px; font-size: 13px; }
.login-notice .icon { width: 17px; margin-top: 1px; }
.login-form { display: grid; }
.login-form label, .developer-login form > label { margin-bottom: 7px; font-size: 13px; font-weight: 750; }
.login-form input, .developer-login select { width: 100%; min-height: 48px; padding: 0 13px; outline: 0; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 10px; }
.login-form input:focus, .developer-login select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 16%, transparent); }
.login-primary, .login-secondary { display: flex; width: 100%; min-height: 48px; align-items: center; justify-content: center; gap: 9px; margin-top: 12px; padding: 0 16px; border-radius: 10px; font-size: 14px; font-weight: 750; cursor: pointer; }
.login-primary { color: var(--brand-contrast); background: var(--brand); }
.login-primary:hover { opacity: .92; }
.login-primary .icon { width: 17px; }
.login-secondary { margin-top: 0; background: var(--surface-2); border: 1px solid var(--line-strong); }
.login-secondary:hover { background: var(--surface-3); }
.login-secondary .icon { width: 18px; }
.field-help { margin: 8px 0 0; color: var(--muted); font-size: 12px; text-align: center; }
.login-divider { display: flex; align-items: center; gap: 11px; margin: 23px 0; color: var(--subtle); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.login-divider::before, .login-divider::after { height: 1px; flex: 1; background: var(--line); content: ""; }
.developer-login { margin-top: 22px; padding-top: 19px; border-top: 1px solid var(--line); }
.developer-login summary { color: var(--muted); font-size: 12px; font-weight: 750; cursor: pointer; }
.developer-login form { display: grid; margin-top: 15px; }
.developer-login form > p { margin: 0 0 15px; color: var(--muted); font-size: 12px; }
.developer-login fieldset { display: grid; gap: 7px; margin: 0 0 16px; padding: 0; border: 0; }
.developer-login legend { margin-bottom: 7px; font-size: 13px; font-weight: 750; }
.developer-login fieldset label { position: relative; display: block; cursor: pointer; }
.developer-login fieldset input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.developer-login fieldset label > span { display: flex; flex-direction: column; padding: 9px 11px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; }
.developer-login fieldset input:checked + span { background: var(--blue-soft); border-color: color-mix(in srgb, var(--blue) 48%, var(--line)); }
.developer-login fieldset input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }
.developer-login fieldset strong { font-size: 12px; }
.developer-login fieldset small { color: var(--muted); font-size: 11px; }
.developer-login select { margin-bottom: 3px; }
.login-footer { display: flex; width: min(1180px, calc(100% - 48px)); min-height: 72px; align-items: center; justify-content: space-between; gap: 20px; margin: 0 auto; color: var(--muted); border-top: 1px solid var(--line); font-size: 12px; }

@media (max-width: 1180px) {
    .metric-grid { grid-template-columns: repeat(2, 1fr); }
    .dashboard-layout, .course-layout { grid-template-columns: 1fr; }
    .course-table-head, .course-row { grid-template-columns: minmax(250px, 1.4fr) minmax(100px,.6fr) minmax(115px,.6fr) 22px; }
    .course-table-head > span:nth-child(4), .course-row > span:nth-child(4) { display: none; }
    .health-panel { display: grid; grid-template-columns: 1fr 1fr; }
    .health-panel .panel-head { grid-column: 1/-1; }
    .health-callout { align-self: center; }
    .provisioning-layout { grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr); }
}

@media (max-width: 820px) {
    :root { --topbar: 66px; }
    .sidebar { transform: translateX(-101%); box-shadow: 16px 0 50px rgba(0,0,0,.2); transition: transform .22s ease; }
    body.sidebar-open { overflow: hidden; }
    body.sidebar-open .sidebar { transform: translateX(0); }
    body.sidebar-open .mobile-backdrop { display: block; }
    .sidebar-close, .menu-button { display: inline-grid !important; }
    .main-area { margin-left: 0; }
    .topbar { padding: 0 18px; }
    .content { padding: 22px 18px 38px; }
    .context-bar { padding-inline: 18px; }
    .search-control { width: 200px; }
    .search-control kbd { display: none; }
    .primary-button span { display: none; }
    .primary-button { width: 40px; padding: 0; }
    .provisioning-layout { grid-template-columns: 1fr; }
    .provisioning-aside { grid-template-columns: 1fr 1fr; }
    .provisioning-panel .primary-button { width: auto; padding: 0 14px; }
    .login-main { width: min(600px, calc(100% - 36px)); grid-template-columns: 1fr; gap: 34px; margin-top: 24px; }
    .login-intro { text-align: center; }
    .login-intro h1, .login-intro > p:not(.eyebrow) { margin-inline: auto; }
    .login-intro h1 { font-size: clamp(38px, 9vw, 58px); }
    .login-assurances { max-width: 470px; margin-inline: auto; text-align: left; }
}

@media (max-width: 620px) {
    .topbar { gap: 10px; }
    .topbar h1 { max-width: 45vw; font-size: 16px; }
    .crumb { display: none; }
    .topbar-actions { gap: 6px; }
    .search-control { width: 40px; padding: 0 10px; }
    .search-control input { position: absolute; inset: 58px 12px auto; display: none; width: calc(100vw - 24px); height: 43px; padding: 0 12px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 9px; box-shadow: var(--shadow); }
    .search-control:focus-within input { display: block; }
    .context-bar { align-items: flex-start; flex-direction: column; gap: 3px; padding-block: 9px; }
    .metric-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .metric-card { min-height: 126px; align-items: flex-start; flex-direction: column; gap: 9px; padding: 14px; }
    .metric-card strong { font-size: 19px; }
    .metric-icon { width: 37px; height: 37px; }
    .metric-icon .icon { width: 18px; }
    .panel-head { align-items: flex-start; min-height: 64px; }
    .course-table-head { display: none; }
    .course-row { grid-template-columns: minmax(0, 1fr) 20px; min-height: 82px; padding: 10px 14px; }
    .course-row > span:nth-child(2), .course-row > span:nth-child(3), .course-row > span:nth-child(4) { display: none; }
    .course-main strong { white-space: normal; }
    .course-main small { white-space: normal; }
    .health-panel { display: block; }
    .activity-grid { grid-template-columns: 1fr; }
    .activity-item { border-right: 0; border-bottom: 1px solid var(--line); }
    .split-intro, .course-hero { align-items: stretch; flex-direction: column; }
    .table-filter { display: none; }
    .course-hero { padding: 19px; }
    .course-hero .secondary-button { align-self: flex-start; }
    .course-badges { flex-wrap: wrap; }
    .coverage-row { grid-template-columns: minmax(150px,1fr) 32px; gap: 10px; padding: 9px 0; }
    .coverage-row .progress-track { grid-column: 1/-1; grid-row: 2; }
    .snapshot-list { padding: 0 14px; }
    .snapshot-row { grid-template-columns: auto minmax(0,1fr) auto; min-height: 67px; }
    .snapshot-row > span:nth-child(3), .snapshot-row > span:nth-child(4), .snapshot-row > span:nth-child(5) { display: none !important; }
    .panel-head .text-button { display: none; }
    .donut-wrap { gap: 18px; }
    .provisioning-aside { grid-template-columns: 1fr; }
    .provision-form, .provision-review, .provision-complete { padding: 21px 17px 22px; }
    .step-track { gap: 7px; padding: 16px 14px; }
    .step-track > span { font-size: 0; }
    .step-track > span i { font-size: 11px; }
    .review-list div { grid-template-columns: 1fr; gap: 3px; }
    .template-card { grid-template-columns: auto minmax(0,1fr); }
    .template-card > .status-pill { grid-column: 2; }
    .prototype-label { align-self: flex-start; }
    .simulated-log > span { grid-template-columns: 20px minmax(0,1fr); }
    .simulated-log b { grid-column: 2; }
    .login-header { width: calc(100% - 30px); min-height: 72px; }
    .login-main { width: calc(100% - 24px); gap: 27px; margin: 18px auto 38px; }
    .login-intro h1 { margin-bottom: 14px; font-size: clamp(35px, 12vw, 47px); }
    .login-intro > p:not(.eyebrow) { font-size: 15px; }
    .login-assurances { display: none; }
    .login-card { padding: 23px 18px; border-radius: 15px; }
    .login-card-head h2 { font-size: 20px; }
    .login-footer { width: calc(100% - 30px); align-items: flex-start; flex-direction: column; justify-content: center; gap: 3px; padding: 16px 0; }
}

@media (max-width: 390px) {
    .content { padding-inline: 12px; }
    .topbar { padding-inline: 12px; }
    .metric-grid { grid-template-columns: 1fr; }
    .metric-card { min-height: 96px; align-items: center; flex-direction: row; }
    .donut { width: 120px; height: 120px; }
    .donut::before { width: 84px; height: 84px; }
}

@media (forced-colors: active) {
    .brand-mark, .avatar, .course-color, .course-glyph, .tenant-logo, .mini-logo,
    .metric-icon, .timeline-icon, .status-pill, .complete-mark { border: 1px solid ButtonText; }
    .nav-item.active { outline: 2px solid Highlight; }
    .progress-track i, .mini-progress i { background: Highlight; }
    .context-bar { color: CanvasText; background: Canvas; border-block: 1px solid ButtonText; }
    .primary-button { color: ButtonText; background: ButtonFace; border: 1px solid ButtonText; }
    .login-primary, .login-secondary, .login-lock { color: ButtonText; background: ButtonFace; border: 1px solid ButtonText; }
}

@media (prefers-contrast: more) {
    :root { --line: #b4bac0; --line-strong: #7d858d; --muted: #414a53; --subtle: #59636d; }
    html[data-theme="dark"] { --line: #66717a; --line-strong: #89939b; --muted: #d5dadd; --subtle: #bdc5ca; }
    .panel, .metric-card, .tenant-card, .login-card { border-width: 2px; }
}

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