:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, sans-serif; color: #13132b; background: #f7f5ff; --purple: #6043ff; --purple-dark: #292342; --line: #e3e0ee; --muted: #6d6981; --green: #0a9b63; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: #f7f5ff; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
.is-hidden { display: none !important; }
.eyebrow { color: var(--purple); font-size: .72rem; font-weight: 850; letter-spacing: .12em; margin: 0 0 10px; text-transform: uppercase; }
.primary, .secondary { border: 0; border-radius: 12px; font-weight: 820; padding: 13px 18px; }
.primary { background: var(--purple); color: #fff; }.primary:hover { background: #4c31e5; }.secondary { background: #eeeaff; color: #4d35da; }.quiet, .link-button { border: 0; background: transparent; color: #5b46d9; font-weight: 780; }
.card, .panel { border: 1px solid var(--line); background: #fff; box-shadow: 0 18px 55px rgba(48, 35, 101, .08); border-radius: 22px; }

.auth-shell { width: min(1120px, calc(100% - 40px)); margin: auto; padding: 52px 0 80px; }
.hero { max-width: 680px; margin-bottom: 34px; }.brand { width: 164px; height: auto; display: block; margin-bottom: 38px; }.hero h1 { font-size: clamp(2.4rem, 6vw, 4.8rem); line-height: .98; letter-spacing: -.06em; margin: 0 0 18px; }.hero h1 em { color: var(--purple); font-weight: 500; }.lead { max-width: 520px; color: #5b5b76; font-size: 1.08rem; line-height: 1.55; }.auth-card { width: min(100%, 490px); padding: 28px; }.tabs { display: flex; gap: 8px; border-bottom: 1px solid #e8e5f2; margin-bottom: 24px; }.tab { border: 0; background: transparent; color: #65627e; font-weight: 750; padding: 11px 12px; }.tab.is-active { color: #4d34dd; border-bottom: 3px solid var(--purple); }.form { display: grid; gap: 15px; }.form label, .stack-form label, .exercise-form > label { display: grid; gap: 7px; font-size: .88rem; font-weight: 720; }.form input, .stack-form input, .inline-form input, .exercise-form input, .exercise-form textarea { width: 100%; border: 1px solid #d8d3e9; border-radius: 12px; padding: 13px 14px; outline: none; background: #fff; color: #15142d; }.form input:focus, .stack-form input:focus, .inline-form input:focus, .exercise-form input:focus, .exercise-form textarea:focus { border-color: var(--purple); box-shadow: 0 0 0 3px #ece8ff; }.exercise-form textarea { min-height: 82px; resize: vertical; }.hint, .message, .empty { color: var(--muted); font-size: .86rem; line-height: 1.45; }.message { min-height: 1.2em; margin: 16px 0 0; }.message.error { color: #ae2d2d; }

.portal { min-height: 100vh; display: grid; grid-template-columns: 252px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; background: var(--purple-dark); color: #fff; padding: 30px 17px 18px; z-index: 30; }.sidebar-brand { text-align: center; }.sidebar-brand img { width: 140px; display: block; margin: 0 auto 18px; }.sidebar-brand small { color: #c8c0eb; font-size: .61rem; font-weight: 850; letter-spacing: .09em; }.teacher-card { display: grid; gap: 5px; margin: 28px 0; padding: 16px 14px; border-radius: 16px; background: #3b345e; }.teacher-card strong { font-size: .95rem; }.teacher-card span { color: #d9d4ef; font-size: .72rem; overflow: hidden; text-overflow: ellipsis; }.teacher-card small { color: #91f2b7; font-size: .66rem; }.main-nav { display: grid; gap: 6px; }.nav-item { display: grid; grid-template-columns: 26px 1fr; align-items: center; width: 100%; padding: 12px 12px; border: 0; border-radius: 12px; background: transparent; color: #eeeafa; text-align: left; font-size: .88rem; }.nav-item span { color: #bcb3ee; font-size: .78rem; }.nav-item:hover, .nav-item.is-active { background: #494170; color: #fff; font-weight: 750; }.student-preview { margin-top: auto; border: 1px solid #77709a; border-radius: 12px; background: transparent; color: #fff; padding: 12px; }.student-preview.is-active { background: #fff; color: var(--purple-dark); }
.portal-body { min-width: 0; }.topbar { height: 76px; position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; padding: 0 34px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.94); backdrop-filter: blur(14px); }.topbar-actions { display: flex; align-items: center; gap: 14px; }.demo-badge, .soft-badge { border-radius: 999px; padding: 6px 9px; background: #eafaf2; color: #08724c; font-size: .68rem; font-weight: 800; }.soft-badge { color: #6043ff; background: #eeeaff; }.avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #ffe9d7; color: #bc5e18; font-weight: 850; }.menu-toggle { display: none; border: 0; background: transparent; font-size: 1.4rem; }
.page-container { width: min(1480px, calc(100% - 64px)); margin: auto; padding: 60px 0 90px; }.page-hero, .section-hero { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 38px; }.page-hero h2, .section-hero h2 { margin: 0 0 12px; font-size: clamp(2.25rem, 4vw, 3.45rem); letter-spacing: -.055em; line-height: 1; }.page-hero h2 em { color: var(--purple); font-weight: 480; }.page-hero p:last-child, .section-hero p:last-child { color: var(--muted); margin: 0; }.hero-action { min-width: 155px; }
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }.metric-card { min-height: 135px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 18px; background: #fff; padding: 22px; box-shadow: 0 12px 38px rgba(43, 34, 83, .06); }.metric-card > span { color: var(--muted); font-size: .78rem; }.metric-card strong { display: block; margin: 9px 0 3px; font-size: 1.9rem; letter-spacing: -.04em; }.metric-card small { color: var(--green); font-size: .7rem; font-weight: 700; }
.overview-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr); gap: 20px; }.panel { padding: 24px; }.panel-heading { display: flex; justify-content: space-between; align-items: start; gap: 18px; margin-bottom: 20px; }.panel-heading h3 { margin: 0 0 6px; font-size: 1rem; }.panel-heading p { color: var(--muted); font-size: .8rem; margin: 0; }.chart-panel { min-height: 360px; }.bar-chart { height: 230px; display: grid; grid-template-columns: repeat(7, 1fr); align-items: end; gap: 10px; padding-top: 18px; border-bottom: 1px solid #ded9ef; }.bar-column { height: 100%; display: flex; flex-direction: column; justify-content: end; align-items: stretch; gap: 8px; }.bar-column span { color: #77728d; font-size: .65rem; text-align: center; }.bar { min-height: 5px; border-radius: 10px 10px 2px 2px; background: linear-gradient(#6244ff, #a493ff); }.bar.level-0 { height: 4%; background: #e7e2f8; }.bar.level-1 { height: 18%; }.bar.level-2 { height: 31%; }.bar.level-3 { height: 44%; }.bar.level-4 { height: 58%; }.bar.level-5 { height: 72%; }.bar.level-6 { height: 88%; }.release-list { display: grid; gap: 10px; }.release-item { display: grid; grid-template-columns: 92px 1fr; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 14px; padding: 12px; }.release-item time { color: var(--purple); font-size: .73rem; font-weight: 820; }.release-item div { display: grid; gap: 3px; }.release-item strong { font-size: .82rem; }.release-item span { color: var(--muted); font-size: .68rem; }

.section-hero { align-items: center; }.section-hero h2 { font-size: clamp(2rem, 3.5vw, 3rem); }.content-layout { display: grid; grid-template-columns: minmax(280px, .75fr) minmax(0, 1.35fr); gap: 20px; margin-bottom: 20px; }.courses-panel, .course-detail { min-height: 440px; }.stack-form { display: grid; gap: 10px; border-radius: 16px; background: #f7f5ff; padding: 14px; margin-bottom: 16px; }.course-list, .module-list, .exercise-list { display: grid; gap: 9px; }.course-item { display: flex; align-items: center; justify-content: space-between; width: 100%; border: 1px solid var(--line); border-radius: 13px; background: #fff; color: #19172d; padding: 14px; text-align: left; }.course-item:hover, .course-item.is-selected { border-color: #7d68f7; background: #f3f0ff; }.course-item > span { display: grid; gap: 4px; }.course-item small, .module-item small, .exercise-item small { color: var(--muted); font-size: .69rem; }.course-item b { color: var(--purple); font-size: 1.4rem; }.empty-state { min-height: 260px; display: grid; place-content: center; justify-items: center; text-align: center; color: var(--muted); }.empty-state > span { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: #eeeaff; color: var(--purple); font-size: 1.4rem; }.empty-state h3 { color: #26233b; margin: 14px 0 4px; }.empty-state p { max-width: 310px; font-size: .8rem; margin: 0; }.empty-state.compact { min-height: 210px; }.empty-state.compact strong { color: #27243d; }.inline-form { display: flex; gap: 10px; padding: 15px 0 18px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }.module-item { display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 13px; padding: 13px; }.module-item > span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: #eeeaff; color: var(--purple); font-weight: 820; }.module-item > div { display: grid; gap: 3px; }.library-panel { min-height: 180px; }.exercise-list { grid-template-columns: repeat(3, 1fr); }.exercise-item { display: flex; align-items: center; gap: 11px; border: 1px solid var(--line); border-radius: 13px; padding: 14px; }.exercise-item > div { display: grid; gap: 3px; }.status-dot { width: 10px; height: 10px; border-radius: 50%; background: #a49fb6; }.status-dot.published { background: #19ad72; }.roadmap-panel { max-width: 760px; padding: 32px; border-left: 5px solid var(--purple); }.roadmap-panel strong { color: var(--purple); }.roadmap-panel p { color: var(--muted); line-height: 1.6; margin: 9px 0 0; }.student-phone { width: min(380px, 100%); min-height: 520px; margin: 20px auto; border: 12px solid #252039; border-radius: 42px; background: #fff; padding: 30px 24px; box-shadow: 0 28px 70px rgba(42, 31, 93, .18); }.student-phone > span { color: var(--purple); font-size: .67rem; font-weight: 850; letter-spacing: .08em; }.student-phone h3 { font-size: 2rem; margin: 36px 0 12px; }.student-phone p { color: var(--muted); line-height: 1.55; }.student-phone button { width: 100%; margin-top: 34px; border: 0; border-radius: 13px; padding: 14px; background: #ded9f2; color: #817b98; }

.exercise-dialog { width: min(760px, calc(100% - 28px)); max-height: 92vh; border: 0; border-radius: 24px; padding: 0; box-shadow: 0 28px 90px rgba(27, 21, 57, .3); }.exercise-dialog::backdrop { background: rgba(26, 22, 49, .62); }.exercise-form { display: grid; gap: 17px; padding: 28px; }.dialog-heading { display: flex; justify-content: space-between; gap: 18px; }.dialog-heading h2 { margin: 0 0 6px; font-size: 1.6rem; }.dialog-heading p:last-child { color: var(--muted); font-size: .8rem; margin: 0; }.dialog-close { width: 38px; height: 38px; border: 0; border-radius: 50%; background: #f1eef9; color: #5d5870; font-size: 1.4rem; }.exercise-form fieldset { border: 1px solid var(--line); border-radius: 16px; padding: 16px; }.exercise-form legend { font-weight: 820; padding: 0 7px; }.exercise-form fieldset > p { color: var(--muted); font-size: .78rem; }.option-row { display: grid; grid-template-columns: 22px 1fr 1.25fr; align-items: center; gap: 9px; margin-top: 9px; }.option-row input[type=radio] { box-shadow: none; }.check-row { display: flex !important; grid-template-columns: none; flex-direction: row; align-items: center; }.check-row input { width: auto; }.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 4px; }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 100; max-width: min(390px, calc(100% - 48px)); border-radius: 14px; background: #24203d; color: #fff; padding: 14px 17px; box-shadow: 0 16px 45px rgba(25, 18, 62, .25); font-size: .82rem; }.toast.error { background: #8f2c35; }

.stack-form select, .exercise-form select { width: 100%; border: 1px solid #d8d3e9; border-radius: 12px; padding: 13px 14px; outline: none; background: #fff; color: #15142d; }.stack-form select:focus, .exercise-form select:focus { border-color: var(--purple); box-shadow: 0 0 0 3px #ece8ff; }
.mini-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }.mini-metrics article { display: flex; align-items: center; justify-content: space-between; min-height: 86px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 17px; background: #fff; }.mini-metrics span { color: var(--muted); font-size: .78rem; }.mini-metrics strong { font-size: 1.55rem; }.people-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, .75fr); gap: 20px; margin-bottom: 20px; }.table-wrap { overflow-x: auto; }table { width: 100%; border-collapse: collapse; }th, td { padding: 13px 11px; border-bottom: 1px solid #ece9f4; text-align: left; font-size: .78rem; vertical-align: top; }th { color: var(--muted); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; }td strong, td small { display: block; }td small { color: var(--muted); margin-top: 3px; }.status-chip { display: inline-flex; border-radius: 999px; padding: 5px 8px; background: #e9f9f1; color: #08734d; font-size: .67rem; font-weight: 800; }.status-chip.pending { background: #fff3d9; color: #885d07; }.status-chip.expired, .status-chip.revoked { background: #f9e7e9; color: #9d3039; }.cohort-list, .invite-list { display: grid; gap: 9px; }.cohort-item, .invite-item { display: flex; justify-content: space-between; gap: 14px; align-items: center; border: 1px solid var(--line); border-radius: 13px; padding: 13px; }.cohort-item div, .invite-item div { display: grid; gap: 3px; }.cohort-item small, .invite-item small { color: var(--muted); font-size: .69rem; }.invite-panel { min-height: 150px; }.notice { border: 1px solid #ead9a1; border-radius: 13px; background: #fff8e7; color: #765a18; padding: 12px 14px; font-size: .76rem; line-height: 1.5; }

@media (max-width: 1050px) { .metric-grid { grid-template-columns: repeat(2, 1fr); }.overview-grid, .content-layout, .people-layout { grid-template-columns: 1fr; }.exercise-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .portal { display: block; }.sidebar { position: fixed; left: -270px; transition: left .2s ease; width: 252px; }.sidebar.is-open { left: 0; box-shadow: 14px 0 50px rgba(24, 18, 53, .35); }.menu-toggle { display: block; }.topbar { height: 66px; padding: 0 16px; }.topbar > strong { margin-right: auto; }.topbar-actions .demo-badge { display: none; }.page-container { width: min(100% - 28px, 1480px); padding-top: 36px; }.page-hero, .section-hero { align-items: stretch; flex-direction: column; }.metric-grid, .mini-metrics, .exercise-list { grid-template-columns: 1fr; }.hero-action { align-self: start; }.auth-shell { width: min(100% - 28px, 1120px); padding-top: 28px; }.brand { margin-bottom: 26px; }.inline-form, .option-row { grid-template-columns: 1fr; display: grid; }.option-row { padding-bottom: 12px; border-bottom: 1px solid var(--line); } }