:root {
  --orange: #E34802; --orange-deep: #DE3300; --orange-light: #E85D04;
  --navy: #03071E; --cream: #FDEFE6; --white: #fff;
  --gray: #6b7080; --green: #21a052; --amber: #d99a19;
  --line: #eee2d8;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Hanken Grotesk', system-ui, sans-serif; background: var(--cream); color: var(--navy); }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; }
.btn { background: var(--orange); color: #fff; border-radius: 10px; padding: 14px 24px; font-size: 15px; font-weight: 600; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-ghost { background: #fff; color: var(--navy); border: 1px solid #ded4ca; }
.card { background: #fff; border-radius: 16px; padding: 24px; }
.tag { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.progress-track { background: var(--cream); border-radius: 100px; height: 9px; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 100px; background: var(--orange); transition: width .4s; }
input, select { font-family: inherit; font-size: 15px; padding: 13px 15px; border: 1px solid #ded4ca; border-radius: 10px; background: #fdfaf7; width: 100%; }
input:focus, select:focus { outline: 2px solid var(--orange); border-color: transparent; }
.lockup-row { display: flex; align-items: center; gap: 10px; }
.lockup-tag { color: #9aa0ae; font-size: 13px; margin-top: 2px; }
.shell { display: flex; min-height: 100vh; }
.sidebar { width: 250px; background: var(--navy); color: #fff; padding: 28px 20px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; height: 100vh; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 10px; color: #c5c9d4; font-size: 14px; }
.nav-item.active { background: var(--orange); color: #fff; font-weight: 600; }
.main { flex: 1; padding: 44px 48px; max-width: 1100px; }
.module-row { display: flex; align-items: center; gap: 14px; background: #fff; border-radius: 12px; padding: 16px 20px; margin-bottom: 10px; }
.module-row.locked { opacity: .55; }
.dot { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; }
.quiz-opt { display: flex; gap: 13px; align-items: flex-start; border: 1px solid var(--line); background: #fdfaf7; border-radius: 12px; padding: 16px 18px; margin-bottom: 10px; cursor: pointer; font-size: 15px; }
.quiz-opt.sel { border: 2px solid var(--orange); background: var(--cream); font-weight: 600; }
.quiz-opt.right { border: 2px solid var(--green); background: #eaf7ef; }
.quiz-opt.wrong { border: 2px solid #c0392b; background: #fbeeec; }
.callout { background: var(--cream); border-left: 4px solid var(--orange); border-radius: 12px; padding: 20px 24px; margin: 18px 0; }
.callout p { font-size: 15px !important; }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.kpi { background: #fff; border-radius: 16px; padding: 22px; }
table.admin { width: 100%; border-collapse: collapse; background: #fff; border-radius: 16px; overflow: hidden; }
table.admin th { background: var(--cream); text-align: left; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--gray); padding: 14px 18px; }
table.admin td { padding: 13px 18px; border-top: 1px solid #f6ede5; font-size: 14px; }
h1 { font-size: 32px; font-weight: 800; }
h2 { font-size: 22px; font-weight: 700; margin: 26px 0 10px; }
.lesson p { font-size: 16.5px; line-height: 1.65; color: #2f3340; margin-bottom: 14px; }
.muted { color: var(--gray); }
.err { background: #fbeeec; color: #90281c; border-radius: 10px; padding: 12px 16px; font-size: 14px; margin: 10px 0; }
@media (max-width: 860px) { .shell { flex-direction: column; } .sidebar { width: 100%; height: auto; position: static; flex-direction: row; overflow-x: auto; } .main { padding: 24px 18px; } }