/* ---------- الدخول والإدارة ---------- */
.gate{max-width:380px;margin:12vh auto 0;text-align:center}
.gate .card{padding:26px 22px}
.gate h2{margin:6px 0 4px}.gate p{color:var(--mut);margin:0 0 16px}
.inp{width:100%;height:48px;border-radius:12px;border:1.5px solid var(--line);background:var(--bg2);color:var(--tx);padding:0 14px;font:500 16px 'IBM Plex Sans Arabic',system-ui;outline:none}
.inp:focus{border-color:var(--acc)}
.inp.ltr{direction:ltr;text-align:start}
.gate .inp{text-align:center;margin-bottom:12px;direction:ltr}
.err{color:var(--bad);font-size:14px;min-height:20px;margin-top:8px;font-weight:500}
dialog{border:1px solid var(--line);background:var(--bg2);color:var(--tx);border-radius:20px;padding:0;width:min(720px,calc(100vw - 20px));max-height:calc(100dvh - 24px);box-shadow:var(--shadow);overflow:hidden}
dialog::backdrop{background:rgba(2,16,22,.74);backdrop-filter:blur(4px)}
dialog[open]{display:flex;flex-direction:column;animation:up .25s ease both}
.dh{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line)}
.dh b{font-size:17px;font-weight:600}
.db{padding:18px;overflow:auto;flex:1}
.tabs{display:flex;gap:2px;padding:8px 10px 0;border-bottom:1px solid var(--line)}
.tab{flex:1;border:0;background:none;padding:10px 6px;font-size:14px;line-height:1.3;border-radius:10px 10px 0 0;font-weight:600;color:var(--mut);border-bottom:2.5px solid transparent;white-space:nowrap}
.tab.on{color:var(--acc);border-color:var(--acc)}
.form{display:flex;flex-direction:column;gap:12px}
.form label{font-size:13px;color:var(--mut);font-weight:500;display:block;margin-bottom:4px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-bottom:16px}
.kpi{border:1px solid var(--line);background:var(--surf2);border-radius:13px;padding:12px 14px}
.kpi small{color:var(--mut);font-size:12px;display:block}
.kpi b{font-size:28px;font-weight:700;line-height:1.2}
.kpi.acc b{color:var(--acc)}.kpi.bad b{color:var(--s2)}
.chart{border:1px solid var(--line);background:var(--surf2);border-radius:13px;padding:12px;margin-bottom:16px;direction:ltr}
.chart svg{width:100%;height:auto;display:block}
.chart text{fill:var(--mut);font:500 10px 'IBM Plex Sans Arabic',system-ui}
.chart .val{fill:var(--tx);font-weight:700}
.h4{font-size:13px;color:var(--mut);font-weight:600;margin:16px 0 8px}
.bar{display:grid;grid-template-columns:96px 1fr 44px;align-items:center;gap:10px;margin:5px 0;font-size:13.5px}
.bar span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.bar i{display:block;height:9px;border-radius:5px;background:var(--acc);min-width:3px;justify-self:start}
.bar em{font-style:normal;color:var(--mut);font-weight:600;font-size:12.5px;text-align:end}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl td,.tbl th{padding:7px 8px;border-bottom:1px solid var(--line);text-align:start}
.tbl th{color:var(--mut);font-size:12px;font-weight:500}
.note{padding:10px 14px;border-radius:12px;background:color-mix(in srgb,var(--acc) 10%,transparent);border:1px solid color-mix(in srgb,var(--acc) 30%,transparent);font-size:13.5px;margin-bottom:14px}
.note.warn{background:color-mix(in srgb,var(--s2) 12%,transparent);border-color:color-mix(in srgb,var(--s2) 40%,transparent)}
.drop{border:2px dashed var(--line);border-radius:16px;padding:26px 14px;text-align:center;color:var(--mut);cursor:pointer;transition:.15s}
.drop:hover,.drop.on{border-color:var(--acc);color:var(--acc)}
.drop b{display:block;color:var(--tx);font-size:16px;font-weight:600}
.row{display:flex;gap:10px;flex-wrap:wrap}
.row>*{flex:1;min-width:140px}
.sp{height:6px}
details{border:1px solid var(--line);border-radius:12px;padding:10px 14px;background:var(--surf2)}
summary{cursor:pointer;font-weight:600}