:root{--bg:#f4f6f8;--panel:#fff;--text:#18212b;--muted:#667085;--primary:#165dff;--ok:#17803d;--warn:#b54708;--danger:#b42318;--border:#e4e7ec;--nav:#111827}
*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text)}header{height:72px;background:#0f172a;color:#fff;padding:16px 24px;display:flex;justify-content:space-between;align-items:center}header b{font-size:20px}header span{color:#7dd3fc}header small{display:block;color:#cbd5e1}.user{font-size:13px}.user a{color:#fff}.layout{display:grid;grid-template-columns:240px 1fr;min-height:calc(100vh - 72px)}nav{background:var(--nav);padding:16px}nav a{display:block;color:#d1d5db;text-decoration:none;padding:12px;border-radius:8px;margin:4px 0}nav a:hover{background:#1f2937;color:#fff}main{padding:24px;max-width:1500px;width:100%;margin:auto}.loginmain{max-width:none}.loginbox{max-width:430px;margin:70px auto;background:#fff;border:1px solid var(--border);padding:28px;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.08)}h1{margin-top:0}.lead{color:var(--muted);line-height:1.55}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.grid.four{grid-template-columns:repeat(4,1fr)}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:18px;margin-bottom:16px;box-shadow:0 6px 20px rgba(16,24,40,.06)}.kpi b{font-size:30px;display:block}.kpi span{color:var(--muted);font-size:13px}.btn,button{display:inline-block;border:0;border-radius:8px;padding:10px 13px;background:#eef2f6;color:#344054;text-decoration:none;font-weight:700;cursor:pointer}.primary,.btn.primary{background:var(--primary);color:#fff}.dangerbtn{background:#fee4e2;color:var(--danger)}.actions{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}.form{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}label{display:block;font-size:12px;font-weight:700;color:#475467;margin-bottom:4px}input,select,textarea{width:100%;padding:10px;border:1px solid #d0d5dd;border-radius:8px;margin-bottom:12px;font:inherit}table{width:100%;border-collapse:collapse;font-size:14px}th,td{text-align:left;padding:10px;border-bottom:1px solid var(--border);vertical-align:top}th{font-size:12px;color:#475467}.badge{display:inline-block;padding:5px 8px;border-radius:999px;background:#eee;text-decoration:none;color:#344054;font-size:12px;font-weight:700;border:0}.badge.ok{background:#dcfae6;color:var(--ok)}.badge.warn{background:#fff3e0;color:var(--warn)}.badge.danger{background:#fee4e2;color:var(--danger)}.badge.info{background:#e8f1ff;color:#175cd3}.flash{padding:12px;border-radius:8px;margin-bottom:12px}.flash.ok{background:#dcfae6;color:var(--ok)}.flash.error{background:#fee4e2;color:var(--danger)}.lesson{line-height:1.7}.lesson h2{margin-top:0}.lesson-nav{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:15px}.lesson-nav a{padding:8px 10px;border-radius:8px;background:#eef2f6;text-decoration:none;color:#344054}.lesson-nav a.done{background:#dcfae6;color:var(--ok)}.quiz-option{display:block;padding:10px;border:1px solid #d0d5dd;border-radius:8px;margin:7px 0;font-size:14px;font-weight:400}.certificate{max-width:850px;margin:auto;background:#fff;padding:40px;border:2px solid #98a2b3}.certificate h1,.certificate h3{text-align:center}.certificate dl{display:grid;grid-template-columns:220px 1fr}.certificate dt,.certificate dd{padding:10px;border-bottom:1px solid #eee;margin:0}.certificate dt{font-weight:bold}.scroll{overflow:auto}.small{font-size:12px;color:var(--muted)}@media(max-width:900px){.layout{grid-template-columns:1fr}nav{display:flex;overflow:auto}nav a{min-width:max-content}.grid,.grid.four,.cards,.form{grid-template-columns:1fr}main{padding:16px}}