:root{
  --bg:#f4f7fb;
  --panel:#ffffff;
  --ink:#0b1220;
  --muted:#64748b;
  --soft:#e7edf6;
  --line:#d9e2ef;
  --nav:#0d1728;
  --nav2:#14233a;
  --blue:#2563eb;
  --blue2:#eaf2ff;
  --green:#16a34a;
  --green2:#dcfce7;
  --amber:#f59e0b;
  --amber2:#fff7ed;
  --red:#dc2626;
  --red2:#fee2e2;
  --violet:#7c3aed;
  --violet2:#f3e8ff;
  --shadow:0 18px 45px rgba(15,23,42,.09);
  --radius:18px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-size:15px;line-height:1.55}
button,input{font:inherit}
.app-shell{display:grid;grid-template-columns:260px minmax(0,1fr);min-height:100vh}
.sidebar{background:linear-gradient(180deg,var(--nav),#0b1220);color:#fff;padding:22px 16px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:22px}
.brand{display:flex;align-items:center;gap:12px;padding:8px 6px 18px}
.brand-mark{width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,#22c55e,#3b82f6);display:grid;place-items:center;font-weight:900;letter-spacing:.03em}
.brand span{display:block;color:#b8c6d8;font-size:12px;margin-top:2px}
.nav-group{display:flex;flex-direction:column;gap:8px}
.nav-link{border:0;background:transparent;color:#dce7f8;text-align:left;padding:12px 14px;border-radius:12px;cursor:pointer;transition:.18s}
.nav-link:hover,.nav-link.active{background:rgba(255,255,255,.11);color:#fff}
.side-card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:15px}
.side-card strong{display:block;font-size:15px;margin-top:4px}
.side-card span{display:block;color:#b8c6d8;font-size:13px;margin-top:2px}
.small-label{text-transform:uppercase;letter-spacing:.12em;color:#9fb4d1;font-weight:700;font-size:10px}
.due-row{border-top:1px solid rgba(255,255,255,.12);margin-top:12px;padding-top:12px;display:flex;justify-content:space-between;gap:8px;font-size:13px;color:#dbeafe}
.due-row strong{margin:0;font-size:13px;color:#fff}
.muted-card p{margin:.45rem 0 0;color:#cbd5e1;font-size:13px}
.workspace{padding:28px 34px 42px;max-width:1680px;width:100%;margin:0 auto}
.topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:24px}
.eyebrow{text-transform:uppercase;letter-spacing:.14em;color:#64748b;font-weight:800;font-size:11px;margin-bottom:5px}
h1{font-size:30px;line-height:1.15;margin:0 0 8px;font-weight:850;letter-spacing:-.025em} h2{margin:0 0 8px;font-size:20px;line-height:1.25;letter-spacing:-.015em} h3{margin:0 0 8px;font-size:16px}
.topbar p{max-width:940px;color:#5c6b82;margin:0}
.status-card{width:178px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:15px;box-shadow:var(--shadow);text-align:center;flex:0 0 auto}
.status-title{color:#64748b;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.progress-ring{width:76px;height:76px;border-radius:50%;margin:12px auto 7px;background:conic-gradient(var(--blue) 0deg,#e5edfb 0deg);display:grid;place-items:center;font-weight:850;color:#0f172a;border:7px solid #fff;box-shadow:inset 0 0 0 1px #dce6f5}
.status-meta{font-size:13px;color:#64748b}
.view{display:none}.active-view{display:block}
.course-grid{display:grid;grid-template-columns:310px minmax(500px,1fr) 340px;gap:18px;align-items:start}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.lessons-panel{padding:16px}.lesson-content{padding:0;overflow:hidden}.wide-panel{padding:22px}
.panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}.panel-head p{margin:4px 0 0;color:#64748b}.split{align-items:center}
.pill{border:1px solid var(--line);background:#f8fafc;color:#475569;border-radius:999px;padding:5px 10px;font-size:12px;font-weight:750;white-space:nowrap}.pill.strong{background:#eef6ff;color:#1e40af;border-color:#bfdbfe}
.lesson-list{display:flex;flex-direction:column;gap:9px}.lesson-btn{width:100%;border:1px solid var(--line);background:#fff;border-radius:14px;padding:12px;display:grid;grid-template-columns:34px 1fr auto;gap:11px;align-items:center;text-align:left;cursor:pointer;transition:.18s}.lesson-btn:hover{border-color:#9fc1ff;transform:translateY(-1px)}.lesson-btn.active{background:#eef6ff;border-color:#93c5fd}.lesson-state{width:24px;height:24px;border-radius:50%;border:2px solid #cbd5e1;display:grid;place-items:center;color:white;font-size:12px;font-weight:800}.lesson-state.done{background:var(--green);border-color:var(--green)}.lesson-state.now{background:var(--blue);border-color:var(--blue)}.lesson-name{font-weight:850;color:#0f172a}.lesson-meta{font-size:12px;color:#64748b}.lesson-tag{font-size:11px;border-radius:999px;padding:4px 8px;background:#f8fafc;border:1px solid var(--line);color:#64748b;white-space:nowrap}.lesson-btn.active .lesson-tag{background:#dbeafe;border-color:#93c5fd;color:#1d4ed8}.module-rule{margin-top:14px;border:1px solid var(--line);border-radius:14px;padding:13px;background:#fbfdff}.module-rule p{margin:5px 0 0;color:#475569;font-size:13px}
.lesson-hero{padding:24px 26px;border-bottom:1px solid var(--line);background:linear-gradient(135deg,#ffffff,#f7fbff)}.lesson-title-row{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.lesson-hero h2{font-size:26px}.lesson-hero p{margin:0;color:#4b5c73}.lesson-body{padding:22px 26px 28px}.lesson-section{margin-top:20px}.section-title{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:#64748b;font-weight:900;margin:0 0 8px}.goal-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}.goal-card{border:1px solid var(--line);border-radius:14px;padding:13px;background:#fff}.goal-card b{display:block;margin-bottom:4px}.goal-card p{margin:0;color:#64748b;font-size:13px}.rule-core{border-left:5px solid var(--blue);background:var(--blue2);padding:16px;border-radius:14px;margin-top:12px}.rule-core strong{display:block;margin-bottom:4px}.steps{counter-reset:step;display:flex;flex-direction:column;gap:10px}.step{display:grid;grid-template-columns:34px 1fr;gap:12px;border:1px solid var(--line);border-radius:14px;padding:13px;background:#fff}.step:before{counter-increment:step;content:counter(step);width:28px;height:28px;border-radius:10px;background:#eaf2ff;color:#1d4ed8;display:grid;place-items:center;font-weight:900}.step b{display:block}.step span{color:#64748b}.two-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}.callout{border-radius:14px;padding:14px;border:1px solid var(--line);background:#fff}.callout.green{background:#f0fdf4;border-color:#bbf7d0}.callout.amber{background:#fff7ed;border-color:#fed7aa}.callout.red{background:#fef2f2;border-color:#fecaca}.callout.violet{background:#faf5ff;border-color:#e9d5ff}.callout ul{margin:8px 0 0 18px;padding:0}.callout li{margin:4px 0}.checklist{display:grid;gap:8px}.check-item{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:12px;padding:10px;background:#fff}.check-item input{margin-top:3px}.practice{border:1px dashed #93c5fd;background:#f8fbff;border-radius:15px;padding:15px}.practice p{margin:0 0 8px;color:#475569}.source-note{font-size:12px;color:#64748b;border-top:1px solid var(--line);padding-top:12px;margin-top:18px}.complete-row{display:flex;justify-content:flex-end;margin-top:18px}.primary-btn{border:0;background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;border-radius:12px;padding:11px 16px;font-weight:850;cursor:pointer;box-shadow:0 10px 25px rgba(37,99,235,.22)}.primary-btn:hover{filter:brightness(.97)}
.mock-window{border:1px solid #b9c8dc;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 12px 30px rgba(15,23,42,.12);margin:12px 0}.mock-title{height:32px;background:#f1f5f9;border-bottom:1px solid #d7e0ee;display:flex;align-items:center;gap:8px;padding:0 12px;color:#475569;font-size:12px;font-weight:800}.dot{width:10px;height:10px;border-radius:50%;background:#cbd5e1}.mock-menu{height:34px;background:#fff;display:flex;align-items:center;gap:14px;padding:0 12px;border-bottom:1px solid #e2e8f0;font-size:12px;color:#475569}.mock-toolbar{height:38px;background:#f8fafc;display:flex;align-items:center;gap:8px;padding:0 12px;border-bottom:1px solid #e2e8f0}.tool{height:24px;border:1px solid #cbd5e1;background:#fff;border-radius:7px;padding:3px 8px;font-size:11px;color:#334155}.mock-content{display:grid;grid-template-columns:1fr 250px;min-height:270px}.mock-table{padding:12px}.mock-side{border-left:1px solid #e2e8f0;background:#fbfdff;padding:12px}.mock-field{border:1px solid #cbd5e1;border-radius:8px;background:#fff;padding:8px;margin-bottom:8px}.mock-field label{display:block;font-size:10px;text-transform:uppercase;color:#64748b;font-weight:800}.mock-field div{font-weight:750;color:#0f172a}.mini-table{border:1px solid #d6e0ef;border-radius:12px;overflow:hidden}.mini-row{display:grid;grid-template-columns:110px 1fr 95px;border-bottom:1px solid #e2e8f0}.mini-row:last-child{border-bottom:0}.mini-row>div{padding:8px 9px;font-size:12px}.mini-row.header{background:#eff6ff;color:#1e40af;font-weight:900}.mini-row.selected{background:#dbeafe}.green-strip{background:#dcfce7;color:#166534;font-weight:800;border-radius:9px;padding:8px;margin:8px 0;font-size:12px}.orange-frame{outline:3px solid #fb923c;outline-offset:2px}.statusbar{height:28px;background:#f8fafc;border-top:1px solid #e2e8f0;display:flex;align-items:center;justify-content:space-between;padding:0 12px;font-size:11px;color:#64748b}.status-pill{border-radius:999px;background:#fef3c7;color:#92400e;padding:3px 8px;font-weight:900}.status-pill.edit{background:#fef08a;color:#713f12}.status-pill.read{background:#fff7ed;color:#9a3412}.status-pill.done{background:#dcfce7;color:#166534}.label-pin{display:inline-block;background:#111827;color:#fff;border-radius:999px;padding:3px 8px;font-size:11px;font-weight:850;margin-right:5px}.screen-note{font-size:12px;color:#475569;background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:10px;margin-top:10px}
.ai-panel{position:sticky;top:18px;background:#111827;color:white;border-radius:18px;box-shadow:var(--shadow);overflow:hidden}.ai-head{padding:16px;border-bottom:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;gap:10px}.ai-head h2{font-size:16px;margin:0}.ai-head p{font-size:12px;color:#bfdbfe;margin:3px 0 0}.ai-badge{align-self:flex-start;background:#312e81;color:#c4b5fd;border:1px solid #6d5efc;border-radius:999px;padding:3px 8px;font-size:10px;font-weight:900;text-transform:uppercase}.ai-transcript{height:300px;overflow:auto;background:#0b1220;padding:12px;display:flex;flex-direction:column;gap:9px}.ai-msg{border-radius:13px;padding:10px 12px;font-size:13px}.ai-msg.system{background:#1f2937;color:#dbeafe}.ai-msg.user{background:#dbeafe;color:#0b1220;align-self:flex-end}.ai-msg.bot{background:#fff;color:#0b1220}.ai-msg.bot b{color:#1d4ed8}.ai-quick{display:flex;flex-wrap:wrap;gap:7px;padding:12px;background:#111827}.ai-quick button{border:1px solid rgba(255,255,255,.18);background:#172134;color:#e5edf7;border-radius:999px;padding:7px 9px;font-size:12px;cursor:pointer}.ai-input-row{display:grid;grid-template-columns:1fr auto;gap:8px;padding:12px;background:#111827;border-top:1px solid rgba(255,255,255,.12)}.ai-input-row input{border:1px solid #334155;border-radius:11px;background:#fff;color:#0f172a;padding:10px;min-width:0}.ai-input-row button{border:0;border-radius:11px;background:#2563eb;color:#fff;font-weight:850;padding:10px 12px;cursor:pointer}
.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.knowledge-card{border:1px solid var(--line);border-radius:17px;padding:16px;background:#fff}.knowledge-card h3{font-size:16px}.card-meta{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 10px}.tag{font-size:11px;border-radius:999px;padding:4px 8px;background:#f1f5f9;color:#475569;font-weight:800}.tag.k{background:#e0f2fe;color:#075985}.tag.p{background:#fef3c7;color:#92400e}.tag.ai{background:#f3e8ff;color:#6d28d9}.knowledge-card p{color:#64748b;margin:0 0 12px}.card-rule{font-size:13px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:10px}.search-input{border:1px solid var(--line);border-radius:12px;padding:11px 13px;min-width:300px}.exam-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:22px}.exam-questions{display:grid;gap:14px;margin:18px 0}.question{border:1px solid var(--line);border-radius:16px;padding:15px;background:#fff}.question b{display:block;margin-bottom:10px}.option{display:block;border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:8px 0;background:#fbfdff;cursor:pointer}.option input{margin-right:8px}.exam-result{margin-top:14px;border-radius:14px;padding:14px;display:none}.exam-result.pass{display:block;background:#f0fdf4;border:1px solid #bbf7d0;color:#166534}.exam-result.fail{display:block;background:#fff7ed;border:1px solid #fed7aa;color:#92400e}.practice-box{background:#f8fbff;border:1px solid #bfdbfe;border-radius:18px;padding:18px}.practice-box ol{padding-left:20px}.note{font-size:13px;color:#475569}.instructor-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:18px 0}.metric-card{border:1px solid var(--line);border-radius:16px;padding:15px;background:#fff}.metric-card span{display:block;color:#64748b;font-size:12px;text-transform:uppercase;font-weight:850;letter-spacing:.08em}.metric-card strong{display:block;font-size:22px;margin:5px 0}.metric-card p{margin:0;color:#64748b;font-size:13px}.review-table-wrap{overflow:auto}.review-table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff}.review-table th,.review-table td{padding:12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}.review-table tr:last-child td{border-bottom:0}.review-table th{background:#f8fafc;color:#475569;font-size:12px;text-transform:uppercase;letter-spacing:.08em}
@media(max-width:1280px){.course-grid{grid-template-columns:290px minmax(0,1fr)}.ai-panel{position:relative;top:auto;grid-column:1/-1}.card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.app-shell{grid-template-columns:1fr}.sidebar{height:auto;position:relative}.workspace{padding:22px 16px}.course-grid,.exam-layout{grid-template-columns:1fr}.topbar{flex-direction:column}.status-card{width:100%}.goal-grid,.two-col,.card-grid,.instructor-grid{grid-template-columns:1fr}.mock-content{grid-template-columns:1fr}.mock-side{border-left:0;border-top:1px solid #e2e8f0}}