:root{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,*:before,*:after{box-sizing:border-box}body{margin:0}a{color:inherit}main{min-height:calc(100vh - 80px)}:root{--bg: #f6f8fb;--card: #ffffff;--muted: #6b7280;--primary: #4f46e5;--accent: #6366f1;--success: #16a34a}body{background:var(--bg);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial;color:#111827}.app-shell{max-width:1100px;margin:0 auto;padding:2rem 1.5rem 3rem}.app-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;padding-bottom:.75rem;border-bottom:1px solid #e5e7eb}.app-brand{display:flex;flex-direction:column;gap:.35rem}.app-title{margin:0;font-size:1.7rem}.app-subtitle{margin:.25rem 0 0;font-size:.9rem;color:var(--muted)}.app-meta{display:flex;align-items:center;gap:.35rem;font-size:.8rem;color:#6b7280}.app-meta-section{text-transform:uppercase;letter-spacing:.08em;font-weight:600;color:#4f46e5}.app-meta-dot{width:4px;height:4px;border-radius:999px;background:#9ca3af}.app-meta-date{color:#6b7280}.app-header-right{display:flex;align-items:center;gap:.75rem}.user-pill{display:flex;align-items:center;gap:.6rem;padding:.3rem .6rem;border-radius:999px;background:#e0e7ff}.avatar-circle{width:28px;height:28px;border-radius:999px;background:#4f46e5;color:#fff;display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:600;box-shadow:0 0 0 2px #e5e7ff}.user-text{display:flex;flex-direction:column}.user-label{font-size:.7rem;color:#4b5563}.user-role{font-size:.85rem;font-weight:600;text-transform:capitalize;color:#111827}.container{max-width:900px;margin:2rem auto;padding:1rem}.card-panel{background:var(--card);border-radius:10px;box-shadow:0 6px 18px #0f172a0f;padding:1.5rem;text-align:left}.form-row{display:flex;flex-direction:column;gap:.75rem;margin-top:.5rem}.input{padding:.75rem 1rem;border-radius:8px;border:1px solid #e6eef8;background:#fff}.input:focus{outline:none;box-shadow:0 0 0 4px #6366f114;border-color:var(--accent)}.btn{background:var(--primary);color:#fff;padding:.6rem 1rem;border-radius:8px;border:none;cursor:pointer}.btn:disabled{opacity:.6;cursor:not-allowed}.small{font-size:.9rem;color:var(--muted)}.course-card{border-left:4px solid rgba(99,102,241,.1);padding:.75rem;margin:.75rem 0;border-radius:6px;background:linear-gradient(180deg,#fff,#fbfdff)}.progress-wrap{background:#eef2ff;border-radius:999px;height:12px;overflow:hidden}.progress-bar{height:100%;background:linear-gradient(90deg,var(--accent),var(--primary));width:0%;transition:width .4s ease}.actions{margin-top:.75rem}.muted{color:var(--muted)}.banner{margin:.75rem 0 1rem;padding:.5rem .75rem;border-radius:6px;background:#ecfdf3;color:#166534;font-size:.9rem}.grid-2{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:1.5rem}.section-title{margin:0 0 .75rem;font-size:1rem}.small-heading{margin:0 0 .5rem}.course-card.clickable{cursor:pointer;border-left-color:var(--accent)}.course-card.clickable.active{box-shadow:0 0 0 1px #4f46e533,0 8px 20px #0f172a14}.course-card-header{display:flex;justify-content:space-between;align-items:center;cursor:pointer;gap:1rem}.course-title{margin:0 0 .15rem}.course-header-right{display:flex;align-items:center;gap:.5rem}.chevron{font-size:.9rem;color:var(--muted)}.course-body{margin-top:.75rem;border-top:1px solid #e5e7eb;padding-top:.75rem}.chapter-row{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.5rem 0;border-bottom:1px dashed #e5e7eb}.chapter-main{display:flex;gap:.75rem;align-items:flex-start}.chapter-index{width:24px;height:24px;border-radius:999px;background:#eef2ff;color:#4338ca;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:600}.chapter-title{font-weight:500}.chapter-links{display:flex;gap:.75rem;margin-top:.25rem}.btn.secondary{background:#e5e7eb;color:#111827}.btn.danger{background:#fee2e2;color:#991b1b}.btn.small-btn{padding:.35rem .75rem;font-size:.8rem}.table{margin-top:1rem;border-radius:8px;border:1px solid #e5e7eb;background:#fff;overflow:hidden}.table-head,.table-row{display:grid;grid-template-columns:1.2fr 1.6fr .8fr 1.1fr 1.2fr;gap:.75rem;padding:.6rem .9rem;align-items:center;font-size:.9rem}.table-head{background:#f3f4ff;font-weight:500}.table-row:nth-child(2n){background:#f9fafb}.table-actions{display:flex;justify-content:flex-end;gap:.4rem}.dashboard-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;margin:1rem 0 1.25rem}.stat-card{padding:.7rem .9rem;border-radius:8px;background:#f9fafb;border:1px solid #e5e7eb}.stat-label{font-size:.8rem;color:var(--muted)}.stat-value{font-size:1.2rem;font-weight:600;margin-top:.15rem}.continue-card{margin-bottom:1.25rem;padding:.8rem 1rem;border-radius:10px;background:linear-gradient(135deg,#eef2ff,#e0f2fe);display:flex;align-items:center;justify-content:space-between;gap:1rem}.continue-title{font-size:1rem;font-weight:600;margin:.25rem 0 .1rem}.controls-row{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin:.75rem 0 .5rem}.controls-left{flex:1}.controls-right{display:flex;gap:.4rem}.chip{border-radius:999px;border:1px solid #e5e7eb;background:#f9fafb;padding:.25rem .75rem;font-size:.8rem;cursor:pointer}.chip-active{border-color:var(--accent);background:#eef2ff;color:#312e81}.analytics-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;margin:1rem 0 1.5rem}.analytics-card{padding:.75rem .9rem;border-radius:8px;background:#f9fafb;border:1px solid #e5e7eb}.analytics-label{font-size:.8rem;color:var(--muted)}.analytics-value{font-size:1.1rem;font-weight:600;margin-top:.2rem}@media(max-width:768px){.app-shell{padding:1.25rem .75rem 2rem}.app-header{flex-direction:column;align-items:flex-start;gap:.75rem}.grid-2{grid-template-columns:minmax(0,1fr)}.table-head,.table-row{grid-template-columns:1.2fr 1.4fr .9fr}.analytics-grid,.dashboard-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.continue-card{flex-direction:column;align-items:flex-start}.controls-row{flex-direction:column;align-items:stretch}.controls-right{justify-content:flex-start}}