*{box-sizing:border-box}
:root{--primary:#5838e8;--primary2:#6c4cff;--text:#171824;--muted:#798091;--bg:#f6f7fb;--card:#fff;--border:#e8e9f1;--nav:#171b2b}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Arial,Tahoma,sans-serif}
body{min-height:100vh}
a{color:inherit}
.topbar{height:72px;background:rgba(255,255,255,.96);backdrop-filter:blur(9px);display:flex;align-items:center;justify-content:space-between;padding:0 28px;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50}
.brand{display:flex;gap:9px;align-items:center;text-decoration:none;font-weight:800;font-size:23px;color:#222}
.brand-mark{width:31px;height:31px;display:grid;place-items:center;border-radius:10px;background:linear-gradient(135deg,#4b33d7,#8a64ff);color:#fff;font-weight:900}
.top-actions{display:flex;align-items:center;gap:11px}
.lang-link{font-size:14px;text-decoration:none;color:#505666}.icon-btn{border:1px solid var(--border);background:#fff;border-radius:12px;padding:8px 11px;cursor:pointer}
.bell{position:relative;text-decoration:none}.bell span{position:absolute;top:-10px;right:-9px;background:#ef5066;color:#fff;font-size:10px;border-radius:999px;padding:2px 5px}
.logout{text-decoration:none;font-size:14px}
.container{max-width:1240px;margin:0 auto;padding:22px 22px 10px}
.hero{padding:36px 0 18px}.hero h1{font-size:52px;line-height:1.08;margin:8px 0}.hero p{font-size:19px;line-height:1.75;color:var(--muted);max-width:800px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:19px;box-shadow:0 10px 35px rgba(32,28,70,.05)}
.card h2,.card h3{margin-top:0}.kpi{font-size:29px;font-weight:850;margin-top:8px}.muted{color:var(--muted)}
.icon-box{width:43px;height:43px;border-radius:13px;background:#f0edff;color:var(--primary);display:grid;place-items:center;font-weight:900}
.btn{display:inline-block;border:0;text-decoration:none;background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff;border-radius:11px;padding:11px 15px;cursor:pointer}.btn.alt{background:#f0f1f6;color:#252733}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.form{max-width:760px}.form label{display:block;font-weight:700;margin:14px 0 7px}.form input,.form select,.form textarea{width:100%;padding:12px 13px;border:1px solid #dedfea;border-radius:10px;background:#fff;color:#222}
.table-wrap{overflow:auto}.table{width:100%;border-collapse:collapse}.table th,.table td{padding:13px;border-bottom:1px solid var(--border);text-align:start;white-space:nowrap}.table th{font-size:13px;color:#757b8a}
.badge{display:inline-flex;align-items:center;border-radius:999px;padding:5px 9px;font-size:12px;font-weight:800}.badge.green{background:#dff7e5;color:#1b8a43}.badge.yellow{background:#fff2c9;color:#927100}.badge.red{background:#ffe1e1;color:#a12828}.badge.blue{background:#e3edff;color:#2e61c7}
.code{background:#10131c;color:#dfe6ff;border-radius:13px;padding:15px;overflow:auto;direction:ltr;text-align:left;white-space:pre-wrap}
.notice{padding:12px 14px;border-radius:10px;background:#fff3ca;margin:12px 0}.success{background:#ddf5e3}.danger{background:#ffe3e3}
.footer{text-align:center;color:#8a8f9b;padding:40px 0}
.dashboard-shell{display:grid;grid-template-columns:235px 1fr;gap:18px}.sidebar{background:var(--nav);color:#fff;border-radius:18px;padding:15px;height:fit-content;position:sticky;top:90px}.sidebar .side-title{font-weight:800;font-size:18px;padding:10px 11px 17px}.sidebar a{display:flex;gap:10px;align-items:center;color:#fff;text-decoration:none;padding:11px 12px;border-radius:10px;margin:3px 0}.sidebar a.active,.sidebar a:hover{background:#2e2b60}.dashboard-content{min-width:0}
.chart{height:170px;display:flex;align-items:end;gap:11px;padding:20px 5px 5px}.bar{flex:1;background:linear-gradient(to top,#5e3be6,#9e89ff);border-radius:7px 7px 2px 2px;min-height:12px}
.profile-line{display:flex;align-items:center;gap:12px}.avatar{width:43px;height:43px;border-radius:50%;background:linear-gradient(135deg,#6b50ee,#9f88ff);color:#fff;display:grid;place-items:center;font-weight:800}
@media(max-width:1000px){.grid-4{grid-template-columns:repeat(2,1fr)}.dashboard-shell{grid-template-columns:1fr}.sidebar{position:static}.grid-3{grid-template-columns:1fr 1fr}}
@media(max-width:650px){.grid-4,.grid-3,.grid-2{grid-template-columns:1fr}.topbar{padding:0 13px}.container{padding:16px 12px}.hero h1{font-size:35px}.brand{font-size:19px}.top-actions{gap:7px}}
html.dark{--text:#f4f5fb;--muted:#a7adbf;--bg:#0f1118;--card:#181b26;--border:#2a2e3c}html.dark .topbar{background:#151822}html.dark .icon-btn,html.dark .form input,html.dark .form select,html.dark .form textarea{background:#12151d;color:#fff;border-color:#303544}html.dark .btn.alt{background:#262a36;color:#fff}