:root{--paper: #F4F1EA;--ink: #1A1A1A;--dust: #5A574E;--accent: #C8913A;--accent-dark: #a87830;--accent-light: rgba(200,145,58,.12);--bg: #FFFFFF;--bg-soft: #FAF8F3;--bg-warm: #F4F1EA;--bg-dark: #1A1A1A;--bg-dark2: #222222;--bg-dark3: #2A2A2A;--fg: #1A1A1A;--fg-muted: #5A574E;--fg-subtle: #9E9B93;--dark-fg: #F4F1EA;--dark-muted: rgba(244,241,234,.55);--dark-subtle: rgba(244,241,234,.3);--hairline: rgba(26,26,26,.08);--hairline-strong: rgba(26,26,26,.14);--dark-hairline: rgba(244,241,234,.08);--dark-hairline-strong: rgba(244,241,234,.14);--ok: #2a8f5f;--ok-light: rgba(42,143,95,.1);--warn: #c87a1a;--warn-light: rgba(200,122,26,.12);--bad: #b94232;--bad-light: rgba(185,66,50,.1);--info: #3a6fa5;--info-light: rgba(58,111,165,.1);--sans: "Inter", "Segoe UI", system-ui, sans-serif;--mono: "JetBrains Mono", "SF Mono", "Fira Code", monospace}*,*:before,*:after{box-sizing:border-box}*{margin:0;padding:0}html,body,#root{height:100%;overflow:hidden}body{font-family:var(--sans);font-size:14px;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.5}a{color:inherit;text-decoration:none}button{font-family:inherit;cursor:pointer;background:none;border:none}input,textarea,select{font-family:inherit}ul,ol{list-style:none}h1,h2,h3,h4{font-weight:500;letter-spacing:-.01em}.mono{font-family:var(--mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--fg-subtle)}.app{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;grid-template-columns:240px 1fr;grid-template-rows:56px 1fr}.topbar{grid-column:1 / -1;grid-row:1;display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-bottom:1px solid var(--hairline);background:var(--bg);z-index:10}.topbar-left{display:flex;align-items:center;gap:14px}.topbar-right{display:flex;align-items:center;gap:10px}.role-pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:99px;background:var(--accent-light);color:var(--accent);font-family:var(--mono);font-size:10px;letter-spacing:.06em}.role-pill .dot{width:5px;height:5px;border-radius:50%;background:var(--accent);animation:pulse 2s ease-in-out infinite}.sidebar{grid-column:1;grid-row:2;background:var(--bg-soft);border-right:1px solid var(--hairline);overflow-y:auto;display:flex;flex-direction:column;padding-bottom:16px}.side-section{padding:16px 12px 8px;display:flex;flex-direction:column;gap:4px}.side-section>.mono{padding:0 10px;margin-bottom:4px}.nav-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:6px;color:var(--fg-muted);font-size:13px;font-weight:500;cursor:pointer;transition:background .12s,color .12s;-webkit-user-select:none;user-select:none}.nav-item:hover{background:#1a1a1a0d;color:var(--ink)}.nav-item.active{background:var(--ink);color:var(--paper)}.nav-item .ic{width:16px;height:16px;flex-shrink:0}.nav-item .badge{margin-left:auto;background:var(--accent);color:var(--ink);font-size:10px;font-weight:500;padding:1px 6px;border-radius:99px;font-family:var(--mono)}.nav-item.active .badge{background:#f4f1ea33;color:var(--paper)}.main{grid-column:2;grid-row:2;overflow-y:auto;overflow-x:hidden;background:var(--bg)}.page{max-width:1280px;margin:0 auto;padding:32px 40px 80px}.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:28px;flex-wrap:wrap}.page-head .ph-left .crumb{color:var(--fg-subtle);font-size:12px;margin-bottom:8px}.page-head h1{font-size:28px;letter-spacing:-.02em}.page-head .sub{margin-top:6px;color:var(--fg-muted);font-size:14px;max-width:600px}.card{background:var(--bg);border:1px solid var(--hairline);border-radius:8px;padding:20px}.card-warm{background:var(--bg-warm);border:1px solid var(--hairline);border-radius:8px;padding:20px}.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:12px}.card-head h3{font-size:15px;letter-spacing:-.01em}.btn{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;transition:background .15s,transform .1s,border-color .15s,color .15s;white-space:nowrap;border:1px solid transparent}.btn-primary{background:var(--accent);color:var(--ink)}.btn-primary:hover{background:var(--accent-dark)}.btn-primary:active{transform:translateY(1px)}.btn-ink{background:var(--ink);color:var(--paper)}.btn-ink:hover{background:#000}.btn-ghost{background:transparent;border:1px solid var(--hairline-strong);color:var(--fg)}.btn-ghost:hover{border-color:var(--ink)}.btn-quiet{background:transparent;color:var(--fg-muted);padding:7px 10px;font-size:13px}.btn-quiet:hover{background:#1a1a1a0a;color:var(--ink)}.btn-sm{padding:6px 11px;font-size:12px}.btn-lg{padding:12px 22px;font-size:14px}.input,.textarea,.select{width:100%;padding:9px 12px;border:1px solid var(--hairline-strong);border-radius:6px;background:var(--bg);font-size:13.5px;color:var(--fg);transition:border-color .15s,box-shadow .15s;outline:none}.input:focus,.textarea:focus,.select:focus{border-color:var(--ink);box-shadow:0 0 0 3px #1a1a1a0f}.textarea{resize:vertical;min-height:80px}.field-label{display:block;font-size:12px;font-weight:500;color:var(--fg-muted);margin-bottom:6px}.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:99px;font-size:11px;font-weight:500;background:var(--bg-warm);border:1px solid var(--hairline);color:var(--fg-muted);white-space:nowrap}.chip.mono{font-family:var(--mono);letter-spacing:.05em}.chip-accent{background:var(--accent-light);color:var(--accent);border-color:transparent}.chip-ok{background:var(--ok-light);color:var(--ok);border-color:transparent}.chip-warn{background:var(--warn-light);color:var(--warn);border-color:transparent}.chip-bad{background:var(--bad-light);color:var(--bad);border-color:transparent}.chip-info{background:var(--info-light);color:var(--info);border-color:transparent}.chip-ink{background:var(--ink);color:var(--paper);border-color:transparent}.table-wrap{border:1px solid var(--hairline);border-radius:8px;overflow:hidden;background:var(--bg)}.table{width:100%;border-collapse:collapse;font-size:13px}.table th{text-align:left;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:500;color:var(--fg-subtle);padding:11px 16px;background:var(--bg-soft);border-bottom:1px solid var(--hairline)}.table td{padding:13px 16px;border-bottom:1px solid var(--hairline);color:var(--fg);vertical-align:middle}.table tr:last-child td{border-bottom:none}.table tr:hover td{background:#1a1a1a05}.progress{height:5px;background:var(--hairline);border-radius:99px;overflow:hidden}.progress-fill{height:100%;background:var(--accent);border-radius:99px;transition:width .4s ease}.code{background:#0d1117;color:#f4f1ead9;font-family:var(--mono);font-size:12.5px;line-height:1.7;padding:20px 24px;border-radius:6px;overflow-x:auto;white-space:pre}.code .c-comment{color:#f4f1ea4d}.code .c-keyword{color:#79c0ff}.code .c-string{color:#a5d6ff}.code .c-func{color:#d2a8ff}.code .c-type{color:#ffa657}.tabs{display:flex;gap:4px;border-bottom:1px solid var(--hairline)}.tab{padding:10px 14px;font-size:13px;color:var(--fg-muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s,border-color .15s}.tab:hover{color:var(--ink)}.tab.active{color:var(--ink);border-bottom-color:var(--ink)}.row-g{display:flex;align-items:center;gap:12px}.col-g{display:flex;flex-direction:column;gap:12px}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.avatar{width:28px;height:28px;border-radius:50%;background:var(--accent-light);color:var(--accent);display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:500;flex-shrink:0}.avatar.lg{width:40px;height:40px;font-size:14px}.avatar.sm{width:22px;height:22px;font-size:9px}.scrim{position:fixed;top:0;right:0;bottom:0;left:0;background:#1a1a1a66;z-index:60;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:scrim-in .18s ease}@keyframes scrim-in{0%{opacity:0}to{opacity:1}}.drawer{position:fixed;top:0;right:0;bottom:0;width:600px;max-width:92vw;background:var(--bg);z-index:61;display:flex;flex-direction:column;box-shadow:-16px 0 40px #0000002e;animation:drawer-in .22s ease}@keyframes drawer-in{0%{transform:translate(20px);opacity:0}to{transform:none;opacity:1}}.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border-bottom:1px solid var(--hairline)}.drawer-body{flex:1;overflow-y:auto;padding:24px}.drawer-foot{padding:16px 24px;border-top:1px solid var(--hairline);display:flex;justify-content:flex-end;gap:8px}.kpi{background:var(--bg);border:1px solid var(--hairline);border-radius:8px;padding:18px 20px;display:flex;flex-direction:column;gap:4px}.kpi .label{font-family:var(--mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--fg-subtle)}.kpi .value{font-size:28px;font-weight:500;letter-spacing:-.02em;color:var(--ink);line-height:1.1}.kpi .trend{font-size:11px;color:var(--ok)}.kpi .trend.down{color:var(--bad)}.dot-status{width:7px;height:7px;border-radius:50%;background:var(--accent);flex-shrink:0}.dot-status.ok{background:var(--ok)}.dot-status.warn{background:var(--warn)}.dot-status.bad{background:var(--bad)}.dot-status.pulse{animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.35}}.empty{text-align:center;padding:48px 24px;color:var(--fg-subtle)}.empty .title{font-size:15px;font-weight:500;color:var(--fg-muted);margin-bottom:6px}.lesson-frame{display:grid;grid-template-columns:1fr 340px;gap:24px}.drop{display:flex;flex-direction:column;align-items:center;justify-content:center;border:1.5px dashed var(--hairline-strong);border-radius:8px;padding:40px 32px;text-align:center;background:var(--bg-soft);transition:border-color .15s,background .15s;cursor:pointer;width:100%}.drop:hover{border-color:var(--accent);background:var(--accent-light)}.quiz-shell{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--bg-dark);color:var(--dark-fg);display:grid;grid-template-rows:56px 1fr 72px;z-index:40}.quiz-topbar{display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-bottom:1px solid var(--dark-hairline);color:var(--dark-fg)}.quiz-body{overflow-y:auto;padding:40px}.quiz-foot{border-top:1px solid var(--dark-hairline);padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;color:var(--dark-fg)}.quiz-timer{font-family:var(--mono);font-size:14px;display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:6px;background:var(--accent-light);color:var(--accent);font-weight:500}.quiz-timer.warn{background:var(--bad-light);color:var(--bad)}.q-option{display:flex;align-items:flex-start;gap:14px;padding:14px 16px;border:1px solid var(--dark-hairline-strong);border-radius:8px;cursor:pointer;transition:border-color .15s,background .15s;width:100%;text-align:left;background:transparent;color:var(--dark-fg)}.q-option:hover{border-color:var(--dark-fg)}.q-option.selected{border-color:var(--accent);background:var(--accent-light)}.q-option .marker{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--dark-hairline-strong);display:inline-flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:10px;color:var(--dark-muted);flex-shrink:0;margin-top:1px;background:transparent;transition:all .15s}.q-option.selected .marker{background:var(--accent);border-color:var(--accent);color:var(--ink)}.q-option.correct{border-color:var(--ok);background:var(--ok-light)}.q-option.correct .marker{background:var(--ok);border-color:var(--ok);color:#fff}.q-option.incorrect{border-color:var(--bad);background:var(--bad-light)}.q-option.incorrect .marker{background:var(--bad);border-color:var(--bad);color:#fff}.q-nav-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:6px}.q-nav-cell{aspect-ratio:1;border-radius:5px;background:#f4f1ea0f;border:1px solid var(--dark-hairline-strong);color:var(--dark-muted);font-size:12px;font-family:var(--mono);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .12s}.q-nav-cell:hover{border-color:var(--dark-fg)}.q-nav-cell.answered{background:var(--accent-light);border-color:var(--accent);color:var(--accent)}.q-nav-cell.current{background:var(--accent);border-color:var(--accent);color:var(--ink)}.q-nav-cell.flagged{border-color:var(--warn)}.lock-overlay{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:#1a1a1a0f;color:var(--fg-subtle)}.wordmark{display:inline-flex;align-items:baseline;gap:.08em;font-weight:500;letter-spacing:-.03em;line-height:1}.wordmark .sq{display:inline-block;width:.35em;height:.35em;background:var(--accent);transform:translateY(-.1em);flex-shrink:0}.wordmark .sub{font-size:.65em;font-weight:400;color:var(--fg-muted);letter-spacing:-.01em}.wordmark.dark .sub{color:var(--dark-muted)}.sq-bullet{display:inline-block;width:.5em;height:.5em;background:var(--fg-subtle);transform:translateY(.05em);flex-shrink:0}.sq-bullet.accent{background:var(--accent)}@keyframes fade-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}.fade-in{animation:fade-in .22s ease}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#1a1a1a2e;border-radius:99px;border:2px solid var(--bg)}::-webkit-scrollbar-thumb:hover{background:#1a1a1a59}