:root{
  --bg1:#eef3fb;--bg2:#f8f4ee;--ink:#1c1c1e;--ink2:#636366;--ink3:#8e8e93;
  --glass:rgba(255,255,255,.62);--glass2:rgba(255,255,255,.82);--line:rgba(60,60,67,.12);
  --blue:#007aff;--green:#34c759;--orange:#ff9500;--red:#ff3b30;--indigo:#5856d6;
  --r:18px;--shadow:0 8px 30px rgba(31,45,61,.08);
  --sat:env(safe-area-inset-top);--sab:env(safe-area-inset-bottom);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;color:var(--ink);background:var(--bg1);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"SF Arabic","Geeza Pro","Segoe UI",Tahoma,sans-serif;
  padding-bottom:calc(86px + var(--sab))}
body::before{content:"";position:fixed;inset:0;z-index:-1;
  background:radial-gradient(60vmax 60vmax at 90% -10%,#cfe0ff 0,transparent 60%),
             radial-gradient(50vmax 50vmax at -10% 30%,#ffe3cc 0,transparent 60%),
             radial-gradient(50vmax 50vmax at 70% 110%,#d9f5e4 0,transparent 60%),
             linear-gradient(160deg,var(--bg1),var(--bg2))}
a{color:var(--blue);text-decoration:none}
.glass{background:var(--glass);-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);
  border:1px solid rgba(255,255,255,.7);border-radius:var(--r);box-shadow:var(--shadow)}
header.top{position:sticky;top:0;z-index:20;padding:calc(10px + var(--sat)) 16px 10px;
  background:rgba(248,248,252,.72);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
header.top h1{font-size:19px;margin:0;font-weight:700;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
main{max-width:1100px;margin:0 auto;padding:16px}
.tabbar{position:fixed;bottom:0;left:0;right:0;z-index:30;display:flex;justify-content:space-around;
  padding:6px 4px calc(6px + var(--sab));background:rgba(248,248,252,.8);
  -webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);border-top:1px solid var(--line)}
.tabbar a{flex:1;max-width:120px;display:flex;flex-direction:column;align-items:center;gap:1px;color:var(--ink3);font-size:10.5px;padding:4px 0}
.tabbar a span{font-size:22px;line-height:1.1;filter:grayscale(1) opacity(.65)}
.tabbar a.on{color:var(--blue)}.tabbar a.on span{filter:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:12px;padding:10px 16px;
  font:600 15px/1.2 inherit;font-family:inherit;cursor:pointer;background:var(--blue);color:#fff;white-space:nowrap}
.btn.sec{background:rgba(118,118,128,.12);color:var(--blue)}
.btn.danger{background:rgba(255,59,48,.12);color:var(--red)}
.btn.sm{padding:7px 12px;font-size:14px;border-radius:10px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.grow{flex:1}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.stat{padding:14px 16px}.stat b{display:block;font-size:26px;font-weight:700;letter-spacing:-.5px}
.stat small{color:var(--ink2)}
h2{font-size:17px;margin:20px 4px 10px;font-weight:700}
.list{overflow:hidden}
.item{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);color:inherit}
.item:last-child{border-bottom:0}
.item .t{font-weight:600}.item .s{color:var(--ink2);font-size:13px}
.item .end{margin-inline-start:auto;text-align:left;color:var(--ink2);font-size:13px;white-space:nowrap}
.dot{width:10px;height:10px;border-radius:50%;flex:none}
.dot.red{background:var(--red)}.dot.orange{background:var(--orange)}.dot.blue{background:var(--blue)}.dot.green{background:var(--green)}
.pill{display:inline-block;padding:2px 9px;border-radius:99px;font-size:12px;font-weight:600;background:rgba(118,118,128,.12);color:var(--ink2)}
.pill.green{background:rgba(52,199,89,.15);color:#248a3d}.pill.red{background:rgba(255,59,48,.12);color:#d70015}
.pill.orange{background:rgba(255,149,0,.15);color:#c93400}.pill.blue{background:rgba(0,122,255,.12);color:#0062cc}
table{width:100%;border-collapse:collapse}
th,td{padding:11px 14px;text-align:right;border-bottom:1px solid var(--line);vertical-align:middle}
th{font-size:12.5px;color:var(--ink2);font-weight:600;background:rgba(255,255,255,.35)}
tr:last-child td{border-bottom:0}
tbody tr{cursor:pointer}tbody tr:active{background:rgba(0,0,0,.04)}
@media (max-width:720px){
  table.cards thead{display:none}
  table.cards,table.cards tbody,table.cards tr,table.cards td{display:block;width:100%}
  table.cards tr{padding:10px 14px;border-bottom:1px solid var(--line)}
  table.cards td{border:0;padding:2px 0;display:flex;gap:8px}
  table.cards td::before{content:attr(data-l);color:var(--ink3);font-size:12.5px;min-width:96px}
  table.cards td:first-child{font-weight:700;font-size:16px}
  table.cards td:first-child::before{display:none}
}
.filters{padding:10px;margin-bottom:12px}
input,select,textarea{width:100%;font:16px/1.3 inherit;font-family:inherit;color:var(--ink);
  background:rgba(255,255,255,.85);border:1px solid var(--line);border-radius:12px;padding:11px 12px;-webkit-appearance:none;appearance:none}
select{background-image:linear-gradient(45deg,transparent 50%,#8e8e93 50%),linear-gradient(135deg,#8e8e93 50%,transparent 50%);
  background-position:14px 55%,20px 55%;background-size:6px 6px;background-repeat:no-repeat;padding-left:32px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,122,255,.18)}
textarea{min-height:80px}
.form{padding:6px 16px 16px}
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:4px 16px}
.field{padding:10px 0}
.field label{display:block;font-size:13px;color:var(--ink2);margin-bottom:5px;font-weight:600}
.field label .req{color:var(--red)}
.field .hint{font-size:12px;color:var(--ink3);margin-top:3px}
.field.wide{grid-column:1/-1}
.flash{padding:12px 16px;margin-bottom:12px;font-weight:600}
.flash.ok{color:#248a3d}.flash.err{color:#d70015}
.errs{padding:12px 16px;margin-bottom:12px;color:#d70015}.errs ul{margin:0;padding-inline-start:18px}
.empty{padding:28px 16px;text-align:center;color:var(--ink3)}
.login{max-width:380px;margin:12vh auto 0;padding:28px 22px}
.login .logo{font-size:44px;text-align:center}
.login h1{text-align:center;font-size:22px;margin:6px 0 18px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;padding:14px 16px}
.kv dt{color:var(--ink3);font-size:13px}.kv dd{margin:0;font-weight:500}
.perm td,.perm th{padding:8px 10px}
.perm select{padding:8px 10px;padding-left:28px;font-size:15px}
.switch{display:flex;align-items:center;gap:10px;padding:10px 0;font-weight:600}
.switch input{width:auto;-webkit-appearance:auto;appearance:auto;transform:scale(1.25)}
.muted{color:var(--ink3);font-size:13px}
.more{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.more a{padding:18px;text-align:center;color:var(--ink);font-weight:600}.more a span{display:block;font-size:30px}