:root{--pri:#f26a21;--pri2:#f58a47;--pri-soft:#fff1e8;--bg:#f4f6f9;--card:#fff;--line:#e5e9ef;--txt:#3a4452;--head:#0f1722;--mut:#697587;
--ok:#1f9d57;--ok-soft:#e6f6ec;--err:#d9363e;--err-soft:#fdeaea;--warn:#c76a00;--warn-soft:#fff3e2;--info:#0b84c6;--info-soft:#e4f3fb;
--r:14px;--shadow:0 1px 2px rgba(15,23,34,.05),0 6px 20px rgba(15,23,34,.04);--side:#0e141b;--side2:#151d27}
[data-theme=dark]{--bg:#0a0f15;--card:#121922;--line:#1e2833;--txt:#c6d1dd;--head:#eef3f8;--mut:#8996a7;
--pri-soft:#2a1a10;--ok:#3dd68c;--ok-soft:#12271d;--err:#ff6b6b;--err-soft:#2a1416;--warn:#f5b544;--warn-soft:#2a2111;--info:#5aa2ff;--info-soft:#102236;
--shadow:0 1px 0 rgba(255,255,255,.02) inset,0 8px 24px rgba(0,0,0,.28);--side:#0c1117;--side2:#141b24}
body{background:var(--bg);font-family:"IBM Plex Sans Arabic",Tahoma,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3,.topbar h1{font-family:"Cairo","IBM Plex Sans Arabic",sans-serif;letter-spacing:-.01em}
.side{background:var(--side)!important;background-image:none!important;box-shadow:none;border-inline-start:1px solid rgba(255,255,255,.06)}
.side .logo{padding:20px 20px 16px;border-bottom:1px solid rgba(255,255,255,.06)}
.side nav{padding:4px 12px}
.side .grp{color:#6f7d8e;font-size:11px;font-weight:600;letter-spacing:.4px;margin:20px 12px 6px}
.side nav a{color:#b9c4d1;font-weight:500;border-radius:10px;padding:9px 12px;margin-bottom:2px;transition:background .15s,color .15s}
.side nav a .ic{opacity:.75}
.side nav a:hover{background:var(--side2);color:#fff}
.side nav a.on{background:rgba(242,106,33,.14)!important;color:#ffb184!important;box-shadow:inset -3px 0 0 var(--pri)!important;font-weight:600}
.side nav a.on .ic{opacity:1;color:var(--pri2)}
.side .logout{border-color:rgba(255,255,255,.08);color:#ff8f86;border-radius:10px}
.side .logout:hover{background:var(--side2)}
.topbar{background:color-mix(in srgb,var(--card) 88%,transparent);backdrop-filter:blur(10px);box-shadow:none!important;border-bottom:1px solid var(--line);padding:10px 26px}
.tsearch{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:0 12px}
.tsearch:focus-within{border-color:var(--pri);box-shadow:0 0 0 3px rgba(242,106,33,.15)}
.ibtn{border-radius:10px}.ibtn:hover{background:var(--bg)}
.me .av{border-radius:10px;background:var(--side)!important}
main{padding:24px 26px 40px}
.card,.stat,.tbl,.qa,.sec{background:var(--card);border:1px solid var(--line)!important;border-radius:var(--r);box-shadow:var(--shadow)}
.card h3{font-size:16px;font-weight:700}
.stat{border-top:1px solid var(--line)!important;transition:transform .15s,border-color .15s}
.stat:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--pri) 40%,var(--line))!important}
.stat .si{border-radius:10px}
.qa:hover{border-color:var(--pri)!important;box-shadow:0 8px 20px rgba(242,106,33,.12)}
.btn{border-radius:10px;box-shadow:none!important;font-weight:600}
.btn:hover{filter:brightness(1.06)}
.pill{border-radius:999px}
.flash{border-radius:12px;border:1px solid var(--line)}
table.grid th{background:var(--bg)!important;color:var(--mut)!important;font-weight:600;border-bottom:1px solid var(--line)}
table.grid th:first-child,table.grid th:last-child{border-radius:0}
table.grid td{border-top:1px solid var(--line)}
table.grid tr:hover td{background:color-mix(in srgb,var(--pri) 4%,transparent)}
table.mini td,table.mini th{border-bottom:1px solid var(--line)}
input,select,textarea{border-radius:10px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--pri)!important;box-shadow:0 0 0 3px rgba(242,106,33,.15)}
*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--mut) 40%,transparent) transparent}