:root{--sky:#1ea7e8;--navy:#2323d0;--bg:#eaf2fd;--card:#fff;--ink:#16213e;--mut:#8591ab;--line:#e3ebf7;--soft:#f3f8ff;--ok:#16a34a;--bad:#ef4444;--warn:#f59e0b;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#0c1430;--card:#141f45;--ink:#eaf0ff;--mut:#9aa8d0;--line:#26356b;--soft:#1a2754}}
*{box-sizing:border-box}html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;font-family:Cairo,Tahoma,sans-serif;background:var(--bg);color:var(--ink)}
header{background:var(--card);border-bottom:1px solid var(--line);padding:10px 16px;display:flex;justify-content:space-between;align-items:center;max-width:1000px;margin:auto}
.hw{background:var(--card);border-bottom:1px solid var(--line)}
.brand{display:flex;gap:10px;align-items:center}.brand img{width:38px;height:38px;border-radius:10px;object-fit:cover}.brand b{display:block;font-size:16px}.brand small{color:var(--mut);font-size:11px}
.usr{display:flex;gap:10px;align-items:center;font-size:12px;font-weight:600}.av{background:#d9eefb;color:var(--sky);width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:800}
.lk{color:var(--sky);font-weight:700;cursor:pointer;background:none;border:0;font:700 13px Cairo}
nav{display:flex;gap:6px;justify-content:center;overflow-x:auto;padding:8px;background:var(--card);border-bottom:1px solid var(--line)}
nav button{flex:none;border:0;background:none;color:var(--ink);padding:8px 14px;border-radius:12px;font:700 13px Cairo;cursor:pointer}nav button.on{background:var(--sky);color:#fff}
main{max-width:500px;margin:auto;padding:14px 12px 70px}main.w{max-width:880px}
h2{font-size:22px;margin:14px 4px}h3{margin:0 0 10px;font-size:16px}
.card{background:var(--card);border-radius:20px;padding:18px;margin:12px 0;box-shadow:0 4px 18px #1e3a8a14}
.ban{border-radius:22px;overflow:hidden;box-shadow:0 6px 22px #1e3a8a22}.ban img{width:100%;display:block}.ban div{background:linear-gradient(135deg,#2a7be4,#22b0ec);color:#fff;padding:16px 18px}.ban h1{margin:4px 0;font-size:25px;line-height:1.3}.ban p{margin:6px 0 0;font-size:12px;opacity:.9}
.st{border:1px solid #bbf0cc;background:#effcf3;color:#15803d;border-radius:14px;padding:12px;font-weight:700;font-size:13px;margin:12px 0}.st.c{border-color:#fbd0d0;background:#fff1f1;color:#b91c1c}
label{display:block;font-weight:700;font-size:12px;margin:10px 0 5px}
input,select,textarea{width:100%;padding:11px;border-radius:12px;border:1px solid var(--line);font:400 14px Cairo;background:var(--soft);color:var(--ink)}
.btn{background:var(--sky);color:#fff;border:0;border-radius:12px;padding:12px 16px;font:700 14px Cairo;cursor:pointer;width:100%}
.btn.n{background:var(--navy)}.btn.r{background:var(--bad)}.btn.d{background:#111827}.btn.w{background:#fff;color:var(--navy);border:1px solid var(--line)}.btn.g{background:var(--ok)}
.btn.s{width:auto;padding:6px 12px;font-size:12px;border-radius:9px}
.dash{border:1.5px dashed #9fd6f4;background:none;color:var(--sky)}
.row{display:flex;gap:8px}.row>*{flex:1;min-width:0}
.seg{display:flex;gap:8px}.seg button{flex:1;padding:11px;border-radius:12px;border:0;background:var(--soft);font:700 13px Cairo;color:var(--ink);cursor:pointer}.seg button.on{background:var(--sky);color:#fff}
.sub{border:1px solid var(--line);border-radius:16px;padding:14px;margin:10px 0}.num{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--sky);color:#fff;font-size:11px;margin-left:6px}
.bk{display:flex;gap:10px;align-items:center;justify-content:space-between}.ic{width:36px;height:36px;border-radius:10px;background:#e8e7ff;display:grid;place-items:center;color:var(--navy);font-weight:800;flex:none}
.hd{background:linear-gradient(90deg,#22b0ec,#2323d0);color:#fff;border-radius:14px 14px 0 0;padding:14px 16px;display:flex;justify-content:space-between;font-weight:800}.hd.t{background:linear-gradient(90deg,#6366f1,#2323d0)}
.pc{background:var(--card);border-radius:0 0 18px 18px;padding:12px;margin-bottom:12px}.pr{display:flex;justify-content:space-between;background:var(--soft);border-radius:10px;padding:11px;margin:7px 0;font-size:13px}
.ln{background:var(--card);border-radius:18px;margin:12px 0;overflow:hidden;box-shadow:0 4px 18px #1e3a8a14}.ln .hd{border-radius:0;background:linear-gradient(90deg,#2323d0,#2a52e0)}
.chip{background:#ffffff33;border-radius:10px;padding:2px 9px;font-size:11px}
.stat{background:var(--card);border-radius:16px;padding:14px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 3px 12px #1e3a8a10}.stat b{font-size:24px}.stat small{color:var(--mut);display:block}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0}.g4{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:10px 0}
.tag{padding:2px 10px;border-radius:10px;font-size:11px;font-weight:800;background:#fef3c7;color:#92400e}.tag.ok{background:#dcfce7;color:#15803d}.tag.bad{background:#fee2e2;color:#b91c1c}
.tabs{display:flex;gap:8px;overflow-x:auto;margin:10px 0}.tabs button{flex:none;border:0;background:var(--card);color:var(--ink);padding:9px 16px;border-radius:12px;font:700 13px Cairo;cursor:pointer;box-shadow:0 2px 8px #1e3a8a10}.tabs button.on{background:var(--sky);color:#fff}
.alert{background:#fffbeb;border:1px solid #fde68a;border-radius:16px;margin:12px 0;overflow:hidden}.alert>div{padding:12px 16px;border-top:1px solid #fde68a;font-size:13px;display:flex;justify-content:space-between;gap:8px;color:#16213e}
.bar{height:8px;border-radius:6px;background:var(--line);flex:1}.bar i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,#2dd4bf,#22b0ec)}
details{border-top:1px solid var(--line)}summary{padding:12px 16px;cursor:pointer;display:flex;gap:8px;align-items:center;font-weight:700;font-size:14px}
table{width:100%;border-collapse:collapse;font-size:13px}td,th{padding:7px 10px;text-align:right;border-top:1px solid var(--line)}
.li{display:flex;justify-content:space-between;align-items:center;background:var(--card);border-radius:14px;padding:13px 16px;margin:8px 0;font-weight:700;font-size:14px;gap:8px}
.modal{position:fixed;inset:0;background:#0009;display:grid;place-items:center;z-index:9;padding:12px}.modal .card{max-width:420px;width:100%;max-height:90vh;overflow:auto}
.toast{position:fixed;bottom:calc(20px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);background:#16213e;color:#fff;padding:10px 18px;border-radius:20px;z-index:20;font-size:13px}
.mut{color:var(--mut);font-size:12px}pre{white-space:pre-wrap;font:14px Cairo;line-height:1.9}
.sw{display:flex;gap:12px;align-items:center;justify-content:space-between}
@media print{header,nav,.np,.hw{display:none}body{background:#fff}}