:root{--pri:#4f46e5;--pri2:#6366f1;--ink:#0f172a;--mut:#64748b;--line:#e5e9f2;--bg:#f4f6fb;--card:#fff;--ok:#059669;--warn:#d97706;--bad:#dc2626;--info:#0284c7;--side:#0f172a;--r:14px}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--ink);font-size:14.5px;line-height:1.5}
a{color:var(--pri);text-decoration:none}a:hover{text-decoration:underline}
h1,h2,h3{margin:0 0 .5em;line-height:1.25}h1{font-size:1.5rem}h2{font-size:1.15rem}h3{font-size:1rem}
.shell{display:flex;min-height:100vh}
.side{width:240px;background:var(--side);color:#cbd5e1;flex-shrink:0;position:sticky;top:0;height:100vh;overflow:auto;padding:16px 10px;display:flex;flex-direction:column}
.side .brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:700;font-size:1.05rem;padding:6px 10px 16px}
.side .brand i{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--pri),#22d3ee);display:grid;place-items:center;font-style:normal}
.side .grp{font-size:.68rem;text-transform:uppercase;letter-spacing:.09em;color:#64748b;margin:14px 10px 4px}
.side a.nav{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:9px;color:#cbd5e1;font-weight:500}
.side a.nav:hover{background:#1e293b;text-decoration:none;color:#fff}
.side a.nav.on{background:var(--pri);color:#fff}
.side a.nav span.ic{width:20px;text-align:center}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.top{background:#fff;border-bottom:1px solid var(--line);padding:10px 22px;display:flex;align-items:center;gap:14px;position:sticky;top:0;z-index:20}
.top .grow{flex:1}.top h1{margin:0;font-size:1.15rem}
.burger{display:none;background:none;border:0;font-size:1.5rem;cursor:pointer}
.content{padding:22px;max-width:1400px;width:100%}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;margin-bottom:18px;box-shadow:0 1px 2px #0f172a08}
.card>h2:first-child,.card>.ch:first-child{margin-top:0}
.ch{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}.ch h2{margin:0}
.grid{display:grid;gap:16px}.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:2fr 1fr;gap:18px;align-items:start}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;display:flex;gap:14px;align-items:center}
.stat .n{font-size:1.6rem;font-weight:700;line-height:1}.stat .l{color:var(--mut);font-size:.82rem;margin-top:4px}
.stat .ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:1.3rem;background:#eef2ff}
.btn,button.btn{display:inline-flex;align-items:center;gap:6px;background:var(--pri);color:#fff;border:0;border-radius:9px;padding:8px 14px;font-weight:600;cursor:pointer;font-size:.9rem;font-family:inherit}
.btn:hover{background:#4338ca;text-decoration:none}.btn.sm{padding:4px 10px;font-size:.8rem}
.btn.ghost{background:#eef2ff;color:var(--pri)}.btn.ok{background:var(--ok)}.btn.bad{background:var(--bad)}.btn.warn{background:var(--warn)}.btn.gray{background:#e2e8f0;color:#334155}
table{width:100%;border-collapse:collapse}
th{font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);white-space:nowrap;background:#f8fafc}
td{padding:10px;border-bottom:1px solid #eef1f7;vertical-align:middle}
tr:hover td{background:#fafbff}
.tw{overflow-x:auto}
.badge{display:inline-block;padding:2px 9px;border-radius:99px;font-size:.74rem;font-weight:600;white-space:nowrap}
.badge.ok{background:#d1fae5;color:#065f46}.badge.warn{background:#fef3c7;color:#92400e}.badge.bad{background:#fee2e2;color:#991b1b}.badge.info{background:#e0f2fe;color:#075985}.badge.mute{background:#e2e8f0;color:#475569}
label{display:block;font-weight:600;font-size:.82rem;margin:0 0 4px;color:#334155}
input,select,textarea{width:100%;padding:9px 11px;border:1px solid #cbd5e1;border-radius:9px;font:inherit;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid #c7d2fe;border-color:var(--pri)}
input[type=checkbox]{width:auto}textarea{min-height:80px;resize:vertical}
.fg{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}.fg .full{grid-column:1/-1}
.help{font-size:.75rem;color:var(--mut);margin-top:2px}
.alert{padding:11px 14px;border-radius:10px;margin-bottom:14px;font-weight:500}
.alert.ok{background:#d1fae5;color:#065f46}.alert.err{background:#fee2e2;color:#991b1b}.alert.info{background:#e0f2fe;color:#075985}
.av{border-radius:50%;object-fit:cover;display:inline-grid;place-items:center;color:#fff;font-weight:700;flex-shrink:0;vertical-align:middle}
.who{display:flex;align-items:center;gap:10px}.who small{color:var(--mut);display:block}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;align-items:end}.filters>div{min-width:150px}
.muted{color:var(--mut)}.right{text-align:right}.nowrap{white-space:nowrap}
.tabs{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap}.tabs a{padding:7px 14px;border-radius:99px;background:#fff;border:1px solid var(--line);color:#334155;font-weight:600;font-size:.86rem}
.tabs a.on{background:var(--pri);color:#fff;border-color:var(--pri)}.tabs a:hover{text-decoration:none}
.bar{height:8px;background:#e2e8f0;border-radius:9px;overflow:hidden}.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--pri),#22d3ee)}
.post{border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:16px;margin-bottom:14px}
.post .hd{display:flex;gap:10px;align-items:center;margin-bottom:8px}.post .hd small{color:var(--mut);display:block}
.post .body{white-space:pre-wrap;word-break:break-word}.post img.pi{max-width:100%;border-radius:12px;margin-top:10px;display:block}
.post .acts{display:flex;gap:16px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line);align-items:center}
.post .acts button{background:none;border:0;color:var(--mut);font-weight:600;cursor:pointer;font-family:inherit}.post .acts button.liked{color:var(--pri)}
.cm{display:flex;gap:8px;margin-top:8px;font-size:.9rem}.cm .bub{background:#f1f5f9;border-radius:12px;padding:6px 12px}
.tag{font-size:.7rem;font-weight:700;padding:2px 8px;border-radius:6px;background:#eef2ff;color:var(--pri);text-transform:uppercase;letter-spacing:.04em}
.tag.rec{background:#fef3c7;color:#92400e}.tag.ann{background:#fee2e2;color:#991b1b}
.lb li{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid #eef1f7;list-style:none}.lb{padding:0;margin:0}
.rank{width:26px;height:26px;border-radius:50%;background:#eef2ff;color:var(--pri);display:grid;place-items:center;font-weight:700;font-size:.8rem;flex-shrink:0}
.lb li:first-child .rank{background:#fbbf24;color:#78350f}
.punch{text-align:center;padding:24px}.punch .clock{font-size:2.4rem;font-weight:800;letter-spacing:.02em}
.login-wrap{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#0f172a,#312e81);padding:20px}
.login-box{background:#fff;border-radius:20px;padding:34px;width:100%;max-width:400px;box-shadow:0 30px 80px #0006}
.notif{position:relative}.notif b{position:absolute;top:-6px;right:-8px;background:var(--bad);color:#fff;border-radius:99px;font-size:.65rem;padding:1px 6px}
.paper{background:#fff;border:1px solid var(--line);padding:30px;max-width:820px;margin:auto}
.paper table td,.paper table th{padding:6px 8px}
@media print{.side,.top,.noprint{display:none!important}.content{padding:0}.paper{border:0}body{background:#fff}}
@media(max-width:980px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}.split{grid-template-columns:1fr}}
@media(max-width:760px){
 .side{position:fixed;left:-260px;top:0;z-index:50;transition:left .2s;width:250px}.side.open{left:0;box-shadow:0 0 0 100vmax #0006}
 .burger{display:block}.content{padding:14px}.g2,.g3,.g4{grid-template-columns:1fr 1fr}.top{padding:10px 14px}
 .stat{padding:12px}.stat .n{font-size:1.25rem}.top .who span{display:none}
}
@media(max-width:480px){.g2,.g3,.g4{grid-template-columns:1fr}}
/* ---- RTL (Urdu) ---- */
[dir=rtl] body{font-family:"Noto Naskh Arabic","Segoe UI",Tahoma,Arial,sans-serif;font-size:15.5px;line-height:1.75}
[dir=rtl] th{text-align:right}[dir=rtl] .right{text-align:left}
[dir=rtl] .top .who small,[dir=rtl] .who small{text-align:right}
[dir=rtl] .cm .bub{text-align:right}
[dir=rtl] .split,[dir=rtl] .grid,[dir=rtl] .fg{direction:rtl}
[dir=rtl] input[type=number],[dir=rtl] input[type=date],[dir=rtl] input[type=time],[dir=rtl] input[type=month],[dir=rtl] input[type=tel],[dir=rtl] input[type=datetime-local],[dir=rtl] input[type=email]{direction:ltr;text-align:right}
@media(max-width:760px){[dir=rtl] .side{left:auto;right:-260px;transition:right .2s}[dir=rtl] .side.open{right:0;left:auto}}
.langsw a{color:inherit}

.ur{font-family:'Noto Naskh Arabic','Segoe UI',Tahoma,Arial,sans-serif}

/* sidebar groups */
.side details.mg{margin-top:4px}.side summary.grp{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;user-select:none}.side summary.grp::-webkit-details-marker{display:none}.side summary.grp::after{content:'▸';opacity:.6}.side details[open]>summary.grp::after{content:'▾'}.side a.nav.sub{padding-left:26px;font-size:.88rem;opacity:.92}[dir=rtl] .side a.nav.sub{padding-left:10px;padding-right:26px}