@font-face{font-family:'Plex';src:url(fonts/plex-arabic-400.woff2) format('woff2');font-weight:400;unicode-range:U+0600-06FF,U+FB50-FDFF,U+FE70-FEFF;font-display:swap}
@font-face{font-family:'Plex';src:url(fonts/plex-arabic-600.woff2) format('woff2');font-weight:600;unicode-range:U+0600-06FF,U+FB50-FDFF,U+FE70-FEFF;font-display:swap}
@font-face{font-family:'Plex';src:url(fonts/plex-arabic-700.woff2) format('woff2');font-weight:700;unicode-range:U+0600-06FF,U+FB50-FDFF,U+FE70-FEFF;font-display:swap}
@font-face{font-family:'Plex';src:url(fonts/plex-latin-400.woff2) format('woff2');font-weight:400;unicode-range:U+0000-00FF;font-display:swap}
@font-face{font-family:'Amiri';src:url(fonts/amiri-arabic-700.woff2) format('woff2');font-weight:700;font-display:swap}
:root{--navy:#283593;--navy-d:#1a237e;--navy-l:#e8eaf6;--beige:#f7f2e8;--line:#ebe3d2;--gold:#b8913a;--gold-l:#f4e9cf;--teal:#2e7d7a;--teal-l:#dcefee;--ink:#1d2033;--muted:#80849a;--card:#fff;--danger:#b3261e;--danger-l:#fbe9e7;
--pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.09' stroke-width='1'%3E%3Cpath d='M28 6l6 16 16 6-16 6-6 16-6-16-16-6 16-6z'/%3E%3Crect x='17' y='17' width='22' height='22' transform='rotate(45 28 28)'/%3E%3C/g%3E%3C/svg%3E")}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Plex',system-ui,sans-serif;background:var(--beige);color:var(--ink);min-height:100vh;-webkit-font-smoothing:antialiased}
button,input{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
[hidden]{display:none!important}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:44px;height:44px;border-radius:13px;background:var(--navy);background-image:var(--pattern);display:grid;place-items:center;flex-shrink:0}
.logo svg{width:24px;height:24px}
.brand b{font-family:'Amiri',serif;font-size:26px;color:var(--navy-d);line-height:1}
.brand small{display:block;color:var(--muted);font-size:12px;margin-top:3px}

.auth{min-height:100vh;display:grid;place-items:center;padding:20px;background:var(--navy);background-image:var(--pattern),linear-gradient(160deg,#2f3ea8,#1a237e)}
.auth-card{width:100%;max-width:400px;background:var(--card);border-radius:22px;padding:28px 24px;box-shadow:0 30px 70px rgba(10,10,50,.35)}
.auth-card .brand{margin-bottom:22px}
.auth-card h2{font-size:20px;margin-bottom:8px}
.sub{color:var(--muted);font-size:13px;line-height:1.8;margin-bottom:12px}
.field{display:block;margin-bottom:14px}
.field span{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.field input{width:100%;padding:13px;border-radius:12px;border:1.5px solid var(--line);background:#fff;font-size:15px;outline:none}
.field input:focus{border-color:var(--navy)}
.code{text-align:center;font-size:24px!important;letter-spacing:.4em}
.btn{width:100%;padding:13px;border-radius:12px;background:var(--navy);color:#fff;font-weight:700;margin-top:4px}
.btn:disabled{opacity:.55}
.btn.ghost{background:none;color:var(--muted);font-weight:600}
.err{background:var(--danger-l);color:var(--danger);border-radius:10px;padding:10px 12px;font-size:13px;margin-bottom:14px}
.qr{display:grid;place-items:center;margin:8px 0 12px}
.qr img,.qr svg{width:200px;height:200px;image-rendering:pixelated;border-radius:8px;border:8px solid #fff;box-shadow:0 0 0 1px var(--line)}
.secret{display:block;background:var(--navy-l);color:var(--navy-d);border-radius:10px;padding:10px;font-size:14px;text-align:center;word-break:break-all;margin-bottom:16px;letter-spacing:.08em;font-family:ui-monospace,Menlo,monospace}

.shell{display:flex;min-height:100vh}
.nav{width:240px;background:var(--card);border-left:1px solid var(--line);padding:24px 14px;display:flex;flex-direction:column;gap:4px;position:sticky;top:0;height:100vh;flex-shrink:0}
.nav .brand{margin:0 6px 22px}
.nav a{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:12px;color:var(--muted);font-weight:600;font-size:14px;cursor:pointer}
.nav a svg{width:19px;height:19px}
.nav a:hover{background:var(--navy-l)}
.nav a.on{background:var(--navy-l);color:var(--navy)}
.nav-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;padding:12px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.nav-foot button{color:var(--danger);font-weight:600}
.content{flex:1;padding:28px 32px;min-width:0}
.ph{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:18px;gap:10px;flex-wrap:wrap}
.ph h1{font-size:22px}
.ph small{color:var(--muted);font-size:12px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin-bottom:16px}
.cardx{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px}
.cardx span{display:block;color:var(--muted);font-size:12.5px;margin-bottom:6px}
.cardx b{font-size:26px;font-feature-settings:'tnum'}
.cardx small{display:block;color:var(--muted);font-size:11.5px;margin-top:4px}
.cardx.hl{background:var(--navy);background-image:var(--pattern),linear-gradient(135deg,#2c3a9e,#1a237e);color:#fff;border:0}
.cardx.hl span,.cardx.hl small{color:rgba(255,255,255,.75)}
.panel{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px}
.panel.nopad{padding:0;overflow:hidden}
.panel-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;flex-wrap:wrap;gap:8px}
.panel-h h3{font-size:15px}
.legend{display:flex;gap:14px;font-size:12px;color:var(--muted)}
.lg:before{content:'';display:inline-block;width:10px;height:10px;border-radius:3px;margin-left:5px;vertical-align:-1px}
.lg-p:before{background:var(--navy)}.lg-a:before{background:var(--teal)}.lg-n:before{background:var(--gold)}
.chart{display:flex;align-items:flex-end;gap:6px;height:220px;padding-top:20px;overflow-x:auto}
.day{flex:1;min-width:34px;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;justify-content:flex-end}
.bars{display:flex;align-items:flex-end;gap:2px;height:100%;width:100%;justify-content:center}
.bars i{display:block;width:30%;max-width:12px;border-radius:4px 4px 0 0;height:var(--h,0%);min-height:2px;position:relative}
.bars i.p{background:var(--navy)}.bars i.a{background:var(--teal)}.bars i.n{background:var(--gold)}
.day small{font-size:10px;color:var(--muted);white-space:nowrap}
.toolbar{margin-bottom:12px}
.toolbar input{width:100%;max-width:380px;padding:11px 14px;border-radius:12px;border:1.5px solid var(--line);background:#fff;outline:none}
.toolbar input:focus{border-color:var(--navy)}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13px;white-space:nowrap}
th,td{padding:11px 12px;text-align:right;border-bottom:1px solid var(--line)}
th{background:#faf7f0;color:var(--muted);font-weight:600;font-size:12px}
td.num{font-feature-settings:'tnum'}
tr:last-child td{border-bottom:0}
.st{font-size:11px;padding:3px 9px;border-radius:20px;font-weight:600}
.st.active{background:var(--teal-l);color:var(--teal)}.st.blocked{background:var(--danger-l);color:var(--danger)}
.empty-row td{text-align:center;color:var(--muted);padding:30px}
.pager{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:14px;font-size:13px;color:var(--muted)}
.pager button{padding:8px 14px;border-radius:10px;background:var(--card);border:1px solid var(--line);font-weight:600;color:var(--ink)}
.pager button:disabled{opacity:.4}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:10px 16px;border-radius:12px;font-size:13px;opacity:0;transition:.3s;pointer-events:none;z-index:50}
.toast.show{opacity:1;transform:translateX(-50%)}
@media (max-width:820px){
  .shell{flex-direction:column}
  .nav{width:100%;height:auto;position:static;flex-direction:row;flex-wrap:wrap;align-items:center;padding:12px;border-left:0;border-bottom:1px solid var(--line)}
  .nav .brand{margin:0 4px 0 auto;order:-1;width:100%;margin-bottom:8px}
  .nav-foot{margin:0 auto 0 0;border:0;padding:8px}
  .content{padding:18px 14px}
}

/* حسابي والأمان */
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px;align-items:start}
.panel h3{font-size:16px;margin-bottom:6px}
.btn.danger{background:var(--danger)}
.muted{display:block;color:var(--muted);font-size:12px;margin-top:10px}
.state{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;padding:10px 12px;border-radius:12px;margin:8px 0 12px}
.state.on{background:var(--teal-l);color:var(--teal)}
.state.off{background:var(--gold-l);color:#8a6a1f}
.state.req{background:var(--navy-l);color:var(--navy-d)}
.warn{background:var(--gold-l);color:#6d5313;border:1px solid #e8d6a8;border-radius:14px;padding:12px 14px;font-size:13px;margin-bottom:14px;line-height:1.8}
.warn b{font-weight:700}