:root{--sky:#f5b800;--skyt:#a16100;--on:#2b1d00;--navy:#9a6400;--bg:#fbf6e6;--card:#fff;--ink:#241c0a;--mut:#8a8266;--line:#efe5c8;--soft:#fffaf0;--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)}

*{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{height:42px;width:auto;border-radius:0;object-fit:contain}.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:#fff0c2;color:var(--skyt);width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:800}
.lk{color:var(--skyt);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:var(--on)}
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 #7a5b0014}
.ban{border-radius:22px;overflow:hidden;box-shadow:0 6px 22px #7a5b0022;background:linear-gradient(180deg,#fff8dc,#ffeaa0)}.ban img{display:block;width:auto;max-width:100%;max-height:210px;margin:0 auto;padding:12px 0}.ban div{background:linear-gradient(135deg,#ffd84d,#f5b800);color:var(--on);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:var(--on);border:0;border-radius:12px;padding:12px 16px;font:700 14px Cairo;cursor:pointer;width:100%}
.btn.n{background:var(--navy);color:#fff}.btn.r{background:var(--bad);color:#fff}.btn.d{background:#111827;color:#fff}.btn.w{background:#fff;color:var(--navy);border:1px solid var(--line)}.btn.g{background:var(--ok);color:#fff}
.btn.s{width:auto;padding:6px 12px;font-size:12px;border-radius:9px}
.dash{border:1.5px dashed #e7c566;background:none;color:var(--skyt)}
.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:var(--on)}
.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:var(--on);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:#fff1c2;display:grid;place-items:center;color:var(--navy);font-weight:800;flex:none}
.hd{background:linear-gradient(90deg,#ffd84d,#f5b800);color:var(--on);border-radius:14px 14px 0 0;padding:14px 16px;display:flex;justify-content:space-between;font-weight:800}.hd.t{background:linear-gradient(90deg,#c98a00,#9a6400);color:#fff}
.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 #7a5b0014}.ln .hd{border-radius:0;background:linear-gradient(90deg,#9a6400,#c98a00);color:#fff}
.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 #7a5b0010}.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 #7a5b0010}.tabs button.on{background:var(--sky);color:var(--on)}
.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:#241c0a}
.bar{height:8px;border-radius:6px;background:var(--line);flex:1}.bar i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,#ffd84d,#f5b800)}
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;top:calc(12px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);background:#241c0a;color:#fff;padding:12px 18px;border-radius:16px;z-index:100;font-size:14px;font-weight:700;max-width:92vw;text-align:center;box-shadow:0 6px 24px #0005;line-height:1.6}
.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}}
html{-webkit-text-size-adjust:100%}nav button i{font-style:normal}
@media(min-width:701px){nav button i{display:inline;margin-left:5px}}
@media(max-width:700px){
body{font-size:14px}
header{padding:8px 10px;gap:6px}.brand{gap:7px;min-width:0}.brand img{height:38px;width:auto}.brand b{font-size:14px;white-space:nowrap}.brand small{font-size:10px;white-space:nowrap}
.usr{gap:6px;font-size:11px}.un{display:none}.av{width:26px;height:26px}.lk{font-size:11px;white-space:nowrap}
nav{position:fixed;bottom:0;left:0;right:0;z-index:30;justify-content:flex-start;gap:2px;padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);border-bottom:0;box-shadow:0 -4px 16px #7a5b0022}
nav button{flex:1 0 auto;min-width:62px;padding:6px 8px;font-size:11px;border-radius:12px}
nav button i{display:block;font-size:19px;line-height:1.2}
main,main.w{padding:10px 10px calc(92px + env(safe-area-inset-bottom,0px))}
h2{font-size:18px}.card{padding:14px;border-radius:18px}.ban h1{font-size:20px}
.stat{padding:11px}.stat b{font-size:20px}.stat small{font-size:11px}
.g4,.g2{grid-template-columns:1fr 1fr}
.hb{flex-wrap:wrap}.hb>:first-child{flex:1 1 100%!important}.hb .btn.s{flex:1 1 auto;padding:9px 10px}
.ln .hd{padding:11px 12px;font-size:14px}.tabs button{padding:8px 12px;font-size:12px}
table{font-size:12px}td,th{padding:6px}
}

.spin{width:34px;height:34px;border:4px solid var(--line);border-top-color:var(--sky);border-radius:50%;margin:10px auto;animation:sp .8s linear infinite}@keyframes sp{to{transform:rotate(360deg)}}