@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,600;0,700;1,600&display=swap');

:root { --ink:#102d2c; --ink-2:#1b4542; --paper:#f5f1e8; --cream:#fffdf8; --muted:#66726e; --line:#d9d5ca; --coral:#d6634a; --gold:#bd8b2b; --mint:#a8d5c2; --shadow:0 18px 50px rgba(16,45,44,.12); font-family:Manrope,system-ui,sans-serif; color:var(--ink); background:var(--paper); }
* { box-sizing:border-box } body { margin:0; min-height:100vh; } button,input,textarea,select { font:inherit } button { cursor:pointer } button:disabled { cursor:not-allowed; opacity:.48 }
.login { min-height:100vh; display:grid; grid-template-columns:1.15fr .85fr; }
.login__brand { padding:clamp(36px,7vw,100px); background:var(--ink); color:var(--paper); display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden; }
.corporate-logo { width:min(310px,100%); height:98px; object-fit:contain; object-position:left center; background:#fff; border-radius:10px; padding:9px 14px; position:relative; z-index:1; }
.login__brand:after { content:""; position:absolute; width:55vw; height:55vw; max-width:720px; max-height:720px; border:1px solid rgba(168,213,194,.42); border-radius:50%; right:-20vw; bottom:-32vw; }
.kicker { font:500 11px/1.2 'DM Mono',monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--gold) }.wordmark { font:700 24px/1 'Playfair Display',serif; letter-spacing:-.04em; }
h1 { max-width:640px; font:600 clamp(42px,6vw,78px)/.98 'Playfair Display',serif; margin:18px 0; letter-spacing:-.055em; position:relative; z-index:1; }.login__brand p { max-width:460px; color:#d5e0d8; line-height:1.7; position:relative; z-index:1 }
.login__form { align-self:center; width:min(410px,calc(100% - 44px)); margin:auto; }.login__form h2 { font:700 34px/1.1 'Playfair Display',serif; margin:12px 0 8px }.login__form > p { color:var(--muted); margin:0 0 28px; line-height:1.55 }
label { display:block; font-size:13px; font-weight:700; margin:15px 0 7px } input,textarea,select { width:100%; border:1px solid var(--line); border-radius:10px; background:var(--cream); padding:13px 14px; color:var(--ink); outline:none } input:focus,textarea:focus,select:focus { border-color:var(--ink-2); box-shadow:0 0 0 3px rgba(29,106,91,.12) } textarea { min-height:118px; resize:vertical; line-height:1.5 }
.primary,.secondary,.ghost { border:0; border-radius:9px; padding:12px 16px; font-weight:800; transition:transform .18s,background .18s; }.primary { background:var(--coral); color:white }.primary:hover { background:#bc513b; transform:translateY(-1px) }.secondary { background:var(--ink); color:var(--paper) }.ghost { background:transparent; color:var(--ink); border:1px solid var(--line) }.form-error { color:#a62f24; min-height:20px; font-size:13px; margin:12px 0 0 }
.shell { min-height:100vh }.topbar { height:76px; padding:0 clamp(20px,4vw,64px); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); background:rgba(245,241,232,.9); backdrop-filter:blur(12px); position:sticky; top:0; z-index:5 }.topbar__right { display:flex; gap:18px; align-items:center }.person { font-size:13px; text-align:right }.person strong { display:block }.person span { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.08em }.logout { font-size:12px; padding:8px 10px }
.dashboard { padding:clamp(30px,5vw,72px); max-width:1450px; margin:auto }.dashboard__intro { display:flex; justify-content:space-between; align-items:end; gap:28px; margin-bottom:42px }.dashboard h1 { font-size:clamp(36px,4.5vw,66px); margin:8px 0 0 }.progress { min-width:230px }.progress__line { height:8px; background:#ddd8cd; border-radius:8px; overflow:hidden; margin-top:9px }.progress__line i { display:block; height:100%; background:var(--coral); border-radius:8px }.progress small { color:var(--muted); font:500 11px 'DM Mono',monospace }
.actionbar { display:flex; gap:10px; flex-wrap:wrap; margin:0 0 26px }.course { margin-top:38px }.course__title { display:flex; gap:14px; align-items:baseline; margin-bottom:15px }.course__title h2 { margin:0; font:700 24px 'Playfair Display',serif }.course__title span { color:var(--muted); font-size:13px }.lesson-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px }.lesson-card { text-align:left; padding:19px; min-height:188px; display:flex; flex-direction:column; border-radius:13px; border:1px solid var(--line); background:var(--cream); color:var(--ink); transition:transform .2s,box-shadow .2s,border .2s }.lesson-card:not(:disabled):hover { transform:translateY(-3px); box-shadow:var(--shadow); border-color:#a8b7ae }.lesson-card--active { border:2px solid var(--coral); box-shadow:0 10px 25px rgba(214,99,74,.14) }.lesson-card--done { background:#edf6f0; border-color:#b4d7c1 }.lesson-card--locked { background:#ebe8df; color:#848b87 }.lesson-card__top { display:flex; justify-content:space-between; gap:10px; align-items:center; font:500 10px 'DM Mono',monospace; letter-spacing:.08em; text-transform:uppercase }.badge { padding:5px 7px; border-radius:99px; background:#e9e4d9; color:var(--ink) }.badge--active { background:#fde5df; color:#a83b29 }.badge--done { background:#ccead5; color:#16583a }.lesson-card h3 { font-size:18px; line-height:1.17; margin:20px 0 8px }.lesson-card p { font-size:13px; color:var(--muted); line-height:1.45; margin:0 }.lesson-card__bottom { margin-top:auto; padding-top:18px; display:flex; justify-content:space-between; color:var(--muted); font-size:12px }
.modal { position:fixed; inset:0; background:rgba(12,32,31,.52); z-index:10; padding:20px; display:grid; place-items:center; }.modal__card { background:var(--paper); border-radius:16px; width:min(930px,100%); max-height:calc(100vh - 40px); overflow:auto; box-shadow:0 30px 90px rgba(0,0,0,.26) }.modal__head { padding:24px 28px; display:flex; justify-content:space-between; align-items:flex-start; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--paper); z-index:1 }.modal__head h2 { font:700 30px/1.1 'Playfair Display',serif; margin:8px 0 0 }.icon { border:0; background:transparent; color:var(--ink); font-size:25px; line-height:1; padding:4px 8px }.lesson { padding:30px 28px 38px; display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:44px }.lesson__content { white-space:pre-wrap; line-height:1.72; font-size:15px }.lesson__content::first-line { font-weight:800 }.teacher-card { background:var(--cream); border:1px solid var(--line); padding:19px; border-radius:12px; height:max-content; position:sticky; top:96px }.teacher-row { display:flex; gap:12px; align-items:center }.avatar { flex:0 0 42px; width:42px; height:42px; display:grid; place-items:center; border-radius:50%; color:white; font:500 12px 'DM Mono',monospace }.teacher-card h3 { margin:0; font-size:15px }.teacher-card p { color:var(--muted); font-size:12px; line-height:1.45; margin:3px 0 14px }.chat-log { margin:14px 0; max-height:250px; overflow:auto; font-size:12px }.chat-bubble { padding:9px; background:#e7eee9; border-radius:8px; margin:7px 0; line-height:1.4 }.chat-bubble--user { background:#f4e1da }.chat-form { display:flex; gap:7px }.chat-form input { padding:9px; font-size:12px }.chat-form button { padding:8px 10px; font-size:12px }.exam { border-top:1px solid var(--line); margin-top:30px; padding-top:26px }.exam h3 { font:700 26px 'Playfair Display',serif; margin:0 0 6px }.exam > p { color:var(--muted); font-size:13px; line-height:1.5 }.question { padding:17px 0; border-bottom:1px solid var(--line) }.question strong { font-size:14px; line-height:1.5 }.exam-result { border-radius:10px; padding:15px; margin:18px 0; background:#e7eee9; line-height:1.5; font-size:14px }.exam-result--not_passed { background:#fbe7e2 }.exam-result--pending { background:#f8ecd4 }.exam-result ul { margin:8px 0 0; padding-left:18px }.hidden { display:none!important }
.review-list { display:grid; gap:12px }.review { border:1px solid var(--line); background:var(--cream); border-radius:12px; padding:17px }.review h3 { margin:0 0 4px; font:700 19px 'Playfair Display',serif }.review small { color:var(--muted) }.answers { margin:14px 0; background:#f2efe7; border-radius:8px; padding:12px; font-size:13px; line-height:1.5 }.answers p { margin:6px 0 }.review-actions { display:flex; align-items:end; gap:10px; flex-wrap:wrap }.review-actions label { margin:0; flex:1; min-width:200px }.review-actions input { margin-top:6px }.empty { padding:30px; background:var(--cream); border-radius:12px; color:var(--muted); text-align:center } #toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(100px); background:var(--ink); color:var(--paper); padding:12px 17px; border-radius:9px; font-size:13px; box-shadow:var(--shadow); transition:.25s; z-index:100; max-width:calc(100vw - 30px) } #toast.show { transform:translateX(-50%) translateY(0) }
.admin-shell { min-height:100vh; display:grid; grid-template-columns:248px minmax(0,1fr); background:#eef1ee }.admin-side { background:var(--ink); color:var(--paper); padding:28px 16px 20px; display:flex; flex-direction:column; min-height:100vh; position:sticky; top:0; height:100vh }.admin-brand { display:flex; align-items:center; gap:10px; padding:0 12px 30px; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:#b9c8c1 }.admin-brand .wordmark { color:white; font-size:29px }.admin-side nav { display:grid; gap:5px }.admin-side nav button { text-align:left; display:flex; justify-content:space-between; align-items:center; padding:12px; color:#d8e2dd; border:0; border-radius:8px; background:transparent; font-weight:700; font-size:13px }.admin-side nav button:hover,.admin-side nav button.active { background:#28514d; color:white }.admin-side nav b { border-radius:20px; padding:2px 7px; background:var(--coral); color:white; font:500 10px 'DM Mono',monospace }.admin-side__foot { margin-top:auto; padding:18px 12px 0; border-top:1px solid rgba(255,255,255,.14); display:grid; gap:4px; font-size:12px }.admin-side__foot span { color:#b9c8c1; font-size:11px; text-transform:uppercase; letter-spacing:.08em }.admin-side .logout { margin-top:12px; color:white; border-color:rgba(255,255,255,.25); width:max-content }.admin-main { min-width:0 }.admin-page { width:min(1280px,100%); margin:auto; padding:clamp(30px,5vw,66px) }.admin-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:32px }.admin-heading h1 { font-size:clamp(40px,5vw,66px); margin:7px 0 8px }.admin-heading p { max-width:650px; color:var(--muted); line-height:1.55; margin:0 }.metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; margin-bottom:28px }.metric,.admin-card,.manager-card { background:var(--cream); border:1px solid var(--line); border-radius:13px; box-shadow:0 5px 20px rgba(16,45,44,.035) }.metric { padding:20px }.metric span { display:block; color:var(--muted); font-size:12px; margin-bottom:8px }.metric strong { font:700 38px 'Playfair Display',serif }.admin-card { padding:24px; margin-bottom:18px }.admin-card h2 { font:700 24px 'Playfair Display',serif; margin:0 0 8px }.admin-card p { color:var(--muted); line-height:1.55; font-size:13px }.card-title { display:flex; align-items:start; justify-content:space-between; gap:16px; margin-bottom:17px }.card-title h2 { margin:0 }.card-title span { color:var(--muted); font-size:12px }.activity { display:grid }.activity > div { display:grid; grid-template-columns:minmax(140px,.8fr) minmax(180px,1.4fr) auto; gap:14px; align-items:center; border-top:1px solid var(--line); padding:12px 0; font-size:13px }.activity span,.activity time { color:var(--muted); font-size:12px }.catalog-list { display:grid; gap:7px }.catalog-list button { display:grid; grid-template-columns:110px minmax(0,1fr) auto; gap:15px; text-align:left; align-items:center; padding:12px 0; background:transparent; border:0; border-top:1px solid var(--line); color:var(--ink) }.catalog-list span { color:var(--gold); font:500 10px 'DM Mono',monospace; letter-spacing:.07em }.catalog-list strong { font-size:14px }.catalog-list small { color:var(--muted); text-align:right; font-size:11px }.manager-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:13px }.manager-card { padding:19px; display:grid; grid-template-columns:46px 1fr auto; gap:13px; align-items:center }.manager-card .avatar { width:46px; height:46px; flex-basis:46px }.manager-card small { color:var(--gold); font:500 10px 'DM Mono',monospace; text-transform:uppercase }.manager-card h2 { margin:4px 0; font:700 20px 'Playfair Display',serif }.manager-card p { margin:0; color:var(--muted); font-size:12px; line-height:1.4 }.table-card { padding:0; overflow:auto }.people-table { min-width:700px }.table-row { display:grid; grid-template-columns:2fr 1fr .6fr 1fr auto; gap:15px; align-items:center; padding:15px 20px; border-top:1px solid var(--line); font-size:13px }.table-row--head { border-top:0; color:var(--muted); font:500 10px 'DM Mono',monospace; letter-spacing:.08em; text-transform:uppercase }.table-row strong,.table-row small { display:block }.table-row small { color:var(--muted); margin-top:3px }.small { padding:7px 9px; font-size:11px }.state-dot { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:6px; background:#d3a29a }.state-dot--on { background:#3f9b68 }.settings-form { display:grid; gap:5px; max-width:800px }.settings-form textarea { min-height:160px }.maintenance-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px }.maintenance-grid .admin-card { margin:0 }.form-split { display:grid; grid-template-columns:1fr 1fr; gap:14px }.check { display:flex; align-items:center; gap:9px; font-size:13px }.check input { width:auto; margin:0 }.review-feedback { min-height:74px; margin-top:6px }
@media (max-width:760px) { .login { grid-template-columns:1fr }.login__brand { min-height:300px; padding:36px 28px }.login__form { padding:42px 0 60px }.dashboard { padding:32px 20px }.dashboard__intro { align-items:start; flex-direction:column; margin-bottom:28px }.topbar { height:66px; padding:0 18px }.person { display:none }.lesson { display:block; padding:22px }.teacher-card { position:static; margin:26px 0 }.modal { padding:0 }.modal__card { height:100vh; max-height:100vh; border-radius:0 }.modal__head { padding:19px 20px }.modal__head h2 { font-size:25px }.admin-shell { display:block }.admin-side { min-height:0; height:auto; position:static; padding:17px 14px }.admin-brand { padding:0 7px 13px }.admin-side nav { display:flex; overflow:auto; padding-bottom:3px }.admin-side nav button { white-space:nowrap; padding:9px 10px; font-size:12px }.admin-side__foot { display:none }.admin-page { padding:30px 18px }.admin-heading { display:block }.admin-heading .primary { margin-top:18px }.metric-grid { grid-template-columns:1fr 1fr }.metric strong { font-size:31px }.activity > div { grid-template-columns:1fr; gap:3px }.catalog-list button { grid-template-columns:1fr; gap:4px }.catalog-list small { text-align:left }.maintenance-grid { grid-template-columns:1fr }.manager-card { grid-template-columns:46px 1fr }.manager-card .ghost { grid-column:2; justify-self:start }.form-split { grid-template-columns:1fr } }