:root{color-scheme:dark;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);--bg:#070b14;--c1:#101a2e;--c2:#0b1322;--b:rgba(255,255,255,.09);--gd:#d9a94e;--gd2:#ff8a3d;--t:#e8edf7;--m:#8191ad;--ok:#3ecf8e;--wn:#f0b429;--wk:#5b9dff;--op:#6b7a90;--er:#ff6b6b}
*{box-sizing:border-box}html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;color:var(--t);font:15px system-ui,Segoe UI,Tahoma,sans-serif;min-height:100vh;background:radial-gradient(900px 500px at 90% -10%,rgba(91,157,255,.18),transparent 60%),radial-gradient(700px 500px at 0 8%,rgba(217,169,78,.12),transparent 60%),var(--bg);background-attachment:fixed}
header{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;position:sticky;top:env(safe-area-inset-top,0px);background:rgba(7,11,20,.92);border-bottom:1px solid var(--b);z-index:5}
.br{display:flex;gap:10px;align-items:center}.bn1{font-weight:800;letter-spacing:3px;font-size:18px;background:linear-gradient(90deg,#ffffff,var(--gd2));-webkit-background-clip:text;background-clip:text;color:transparent}.bs{font-size:11px;color:var(--m);letter-spacing:1px}
main{padding:16px 16px 150px;max-width:720px;margin:auto}
button{font:inherit;color:#1b1203;background:linear-gradient(135deg,#f0c777,var(--gd2));border:0;border-radius:10px;padding:10px 16px;font-weight:700;cursor:pointer}
button.s{background:transparent;color:var(--t);border:1px solid var(--b);font-weight:500}button.d{background:#c94a4a;color:#fff}button.sm{padding:6px 12px;font-size:13px}button:disabled{opacity:.35}
input:not([type=checkbox]){width:100%;padding:11px;border-radius:10px;border:1px solid var(--b);background:#060a12;color:var(--t);font:inherit;margin:4px 0 10px}input:focus{outline:1px solid var(--gd)}
label{color:var(--m);font-size:12px}.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.m{color:var(--m)}
.card{background:linear-gradient(160deg,var(--c1),var(--c2));border:1px solid var(--b);border-radius:12px;padding:14px;margin-bottom:12px}
.menu{width:40px;height:40px;padding:0;display:grid;place-content:center;gap:5px;background:transparent;border:1px solid var(--b)}.menu i{display:block;width:18px;height:2px;background:var(--gd);border-radius:2px}
aside{position:fixed;top:0;bottom:0;inset-inline-start:0;width:280px;max-width:84vw;background:#0c1424;border-inline-end:1px solid var(--b);padding:calc(20px + env(safe-area-inset-top,0px)) 16px 20px;transform:translateX(-105%);transition:.25s;z-index:20;display:flex;flex-direction:column;gap:10px}
[dir=rtl] aside{transform:translateX(105%)}aside.o{transform:none!important}aside button{text-align:start}
.sh{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:15;display:none}.sh.o{display:block}
nav{position:fixed;bottom:0;left:0;right:0;display:flex;background:rgba(7,11,20,.96);border-top:1px solid var(--b);padding-bottom:env(safe-area-inset-bottom,0px);z-index:10}
nav button{flex:1;background:none;color:var(--m);border-radius:0;padding:15px 4px;font-weight:600;border-top:2px solid transparent}nav button.on{color:var(--gd);border-top-color:var(--gd)}
.fab{position:fixed;bottom:calc(66px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);padding:14px 38px;border-radius:30px;box-shadow:0 8px 28px rgba(217,169,78,.35);z-index:11;letter-spacing:1px}
.hero{display:flex;gap:18px;align-items:center;padding:16px;border:1px solid var(--b);border-radius:12px;background:linear-gradient(160deg,var(--c1),var(--c2));margin-bottom:14px}.hero svg{flex:none}
.leg{font-size:13px;display:grid;gap:6px}.leg i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-inline-end:7px}
.sec{margin-bottom:12px}.sec.fin{--c:var(--ok)}.sec.pnd{--c:var(--wn)}.sec.wk{--c:var(--wk)}.sec.open{--c:var(--op)}
.sh2{display:flex;width:100%;justify-content:space-between;background:none;border:0;border-bottom:1px solid var(--b);border-radius:0;color:var(--t);padding:8px 2px;margin-bottom:8px}.sh2 b{color:var(--c);margin-inline-start:8px}.sh2 em{color:var(--m);font-style:normal;font-size:12px;font-weight:400}
.rw{display:block;width:100%;text-align:start;background:var(--c1);border:1px solid var(--b);border-inline-start:3px solid var(--c);border-radius:8px;padding:11px 12px;margin-bottom:8px;color:var(--t);font-weight:400}
.cb{text-align:end;display:grid;gap:1px}.cb strong{font-size:26px;line-height:1.1}.cb small{font-size:14px;color:var(--m);font-weight:400}.cb em{font-style:normal;font-size:12px;color:var(--m)}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}.chip{background:rgba(240,180,41,.14);color:var(--wn);border-radius:4px;padding:2px 8px;font-size:12px}
.bar{height:5px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:8px}.bar i{display:block;height:100%;background:var(--c)}.e0{padding:6px 2px}
.md{position:fixed;inset:0;background:rgba(0,0,0,.7);display:none;align-items:flex-end;justify-content:center;z-index:30}.md.o{display:flex}
.md>div{background:#0e1627;border:1px solid var(--b);border-radius:18px 18px 0 0;padding:18px;width:100%;max-width:520px;max-height:92vh;overflow:auto}
.two{display:flex;gap:10px;margin:10px 0}.two div{flex:1;background:var(--c2);border:1px solid var(--b);border-radius:10px;padding:12px 6px;text-align:center}.two strong{display:block;font-size:38px;line-height:1.1}.two span{color:var(--m);font-size:12px}
.bnr{border-radius:8px;padding:10px;margin:10px 0;font-size:14px}.bnr.ok{background:rgba(62,207,142,.12);color:var(--ok)}.bnr.wn{background:rgba(240,180,41,.12);color:var(--wn)}
.en{display:grid;grid-template-columns:1fr 1fr;gap:0 8px;border:1px solid var(--b);border-radius:10px;padding:10px;margin-bottom:8px;background:var(--c2)}
.x{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center}.en .eb{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}.en .eb button{width:100%;min-height:48px;border-radius:12px;font-size:15px;padding:10px 8px}.en .eb [data-ek]{grid-column:1/-1}.en .eb .d{background:transparent;color:var(--er);border:1px solid color-mix(in srgb,var(--er) 55%,transparent);font-weight:600}.en .eb .s{font-weight:600}
.ck{display:flex;gap:8px;align-items:center;color:var(--t);font-size:14px}.ck input{width:auto;margin:0}
h4{margin:18px 0 8px;color:var(--gd);letter-spacing:1px}
#toast{position:fixed;top:calc(70px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);padding:12px 18px;border-radius:10px;background:#16233a;border:1px solid var(--gd);z-index:50;display:none;max-width:90vw;text-align:center}#toast.e{border-color:var(--er)}
table{width:100%;border-collapse:collapse;font-size:13px}th,td{padding:8px 6px;border-bottom:1px solid var(--b);text-align:start}.sc{overflow-x:auto}
.s_fin{color:var(--ok)}.s_pnd{color:var(--wn)}.s_wk{color:var(--wk)}
#pa{position:fixed;left:-9999px;top:0;width:794px;background:#fff;color:#111;padding:36px;font-family:Arial,Tahoma,sans-serif}
#pa .ph{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:3px solid #ff8a3d;padding-bottom:12px}#pa .pb{font-size:30px;font-weight:800;letter-spacing:4px;color:#0b1322}#pa .ps{color:#666;font-size:13px}
#pa .pm{display:flex;gap:30px;margin:16px 0;font-size:15px}#pa table{font-size:13px}#pa th{background:#0b1322;color:#fff;padding:8px}#pa td{border-bottom:1px solid #ccc;padding:7px 8px;color:#111}#pa .s_fin{color:#12805c}#pa .s_pnd{color:#b27a00}#pa .s_wk{color:#1f5fc4}
:root{--bg:#f3f4f8;--cd:#fff;--c2:#eef0f6;--ip:#eef0f6;--b:#e2e5ee;--t:#101828;--m:#667085;--pr:#0f766e;--prt:#fff;--hbg:#3b34c4;--dock:#111827;--ok:#0e8a5c;--wn:#b45309;--wk:#2563eb;--op:#667085;--er:#d92d20;--trk:#e4e7ef;--gd:#0f766e;color-scheme:light}
html[data-th=dark]{--bg:#0b0e17;--cd:#151a27;--c2:#1d2335;--ip:#1d2335;--b:#2a3147;--t:#eef1f8;--m:#98a2b8;--pr:#7c86ff;--prt:#0b0e17;--hbg:#262b66;--dock:#1d2335;--ok:#3ecf8e;--wn:#f0b429;--wk:#6aa8ff;--op:#8a96ad;--er:#ff7b7b;--trk:#2a3147;--gd:#7c86ff;color-scheme:dark}
html,body{overscroll-behavior-y:contain}
body{background:var(--bg);color:var(--t);font:15px/1.45 Roboto,"Segoe UI","Noto Sans Arabic",Tahoma,system-ui,sans-serif;-webkit-tap-highlight-color:transparent;-webkit-user-select:text;user-select:text}
input{-webkit-user-select:text;user-select:text}button,input{touch-action:manipulation}
header{background:color-mix(in srgb,var(--bg) 86%,transparent);border:0;padding:10px 16px}
.br{gap:12px}.lm{width:42px;height:42px;border-radius:13px;background:var(--pr);display:grid;place-items:center;flex:none}
.bn1{background:none;-webkit-text-fill-color:var(--t);color:var(--t);font-size:17px;font-weight:800;letter-spacing:1.5px}.bs{color:var(--m);font-size:11px;letter-spacing:.5px;margin-top:1px}
.hb{width:42px;height:42px;min-height:42px;padding:0;border-radius:50%;background:var(--cd);color:var(--t);border:1px solid var(--b);font-size:17px;display:grid;place-content:center;gap:4px}
#hlg{width:auto;padding:0 14px;border-radius:21px;font-size:13px;font-weight:700}
.menu i{width:16px;height:2px;background:var(--t)}.menu{gap:4px}
header .row{gap:8px}
main{max-width:760px;padding:6px 14px 100px}
button{background:var(--pr);color:var(--prt);border-radius:999px;min-height:46px;font-weight:700;padding:10px 22px;transition:transform .1s}
button:active{transform:scale(.97)}button:focus-visible{outline:3px solid color-mix(in srgb,var(--pr) 45%,transparent);outline-offset:2px}
button.s{background:var(--c2);color:var(--t);border:0}button.d{background:var(--er);color:#fff}
button.sm{min-height:36px;padding:6px 16px;font-size:13px}button:disabled{opacity:.4}
input:not([type=checkbox]){background:var(--ip);color:var(--t);border:2px solid transparent;border-radius:14px;font-size:16px;padding:13px 14px}
input:focus{outline:0;border-color:var(--pr);background:var(--cd)}input[type=checkbox]{accent-color:var(--pr)}
label{color:var(--m);font-weight:600;font-size:12px}
.card{background:var(--cd);border:1px solid var(--b);border-radius:22px;padding:16px;box-shadow:none}
#ls{background:var(--cd);border:1.5px dashed var(--b);border-radius:999px;text-align:center;font-weight:500;margin:6px 0 14px}
.hero{display:block;background:var(--hbg);color:#fff;border:0;border-radius:26px;padding:22px 20px 18px;margin-bottom:16px;box-shadow:none}
.ht{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}.pc{font-size:60px;font-weight:800;line-height:.95;letter-spacing:-2px}.pc small{font-size:26px;letter-spacing:0;margin-inline-start:2px;opacity:.8}
.pl{text-align:end;display:grid;gap:2px}.pl b{font-size:14px}.pl span{font-size:13px;opacity:.75}
.seg{display:flex;gap:3px;height:10px;margin:18px 0 16px}.seg i{display:block;border-radius:6px;min-width:6px}
.kp{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.kp>div{background:rgba(255,255,255,.12);border-radius:16px;padding:10px 6px;text-align:center}
.kp b{display:block;font-size:24px;line-height:1.1}.kp span{font-size:11px;opacity:.9;display:flex;justify-content:center;align-items:center;gap:5px}.kp i{width:7px;height:7px;border-radius:50%;display:inline-block}
.sec{background:var(--cd);border:1px solid var(--b);border-radius:24px;padding:4px 18px 6px;margin-bottom:14px}
.sh2{display:flex;align-items:center;min-height:54px;padding:6px 0;margin:0;background:none;color:var(--t);border:0;border-radius:0;font-weight:700;font-size:16px}
.sh2 span{display:flex;align-items:center;gap:10px}.sh2 span::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--c)}
.sh2 b{margin:0;background:color-mix(in srgb,var(--c) 16%,transparent);color:var(--c);padding:1px 11px;border-radius:99px;font-size:13px}
.sh2 em{color:var(--m);font-weight:500}
.rw{display:block;background:none;border:0;border-top:1px solid var(--b);border-radius:0;box-shadow:none;margin:0;padding:15px 0;color:var(--t);font-weight:400;min-height:0}
.rw b{font-size:16px}.rw:active{background:var(--c2);transform:none}
.cb strong{font-size:26px;font-weight:800}
.chip{background:color-mix(in srgb,var(--wn) 15%,transparent);color:var(--wn);border-radius:99px;padding:3px 11px;font-weight:600}
.bar{height:5px;background:var(--trk);margin-top:10px}
.md>div{background:var(--cd);border:0;border-radius:30px 30px 0 0;max-width:580px;padding:12px 20px 24px}
.md>div::before{content:"";display:block;width:44px;height:5px;border-radius:3px;background:var(--b);margin:0 auto 16px}
.md.o>div{animation:up .22s ease-out}@keyframes up{from{transform:translateY(50px);opacity:.3}to{transform:none;opacity:1}}
.md .rw{background:var(--c2);border:0;border-radius:20px;padding:14px;margin-top:10px}
.en{background:var(--c2);border:0;border-radius:18px;padding:12px}
.bnr{border-radius:16px;padding:12px 14px}.bnr.ok{background:color-mix(in srgb,var(--ok) 13%,transparent);color:var(--ok)}.bnr.wn{background:color-mix(in srgb,var(--wn) 13%,transparent);color:var(--wn)}.bnr.er{background:color-mix(in srgb,var(--er) 13%,transparent);color:var(--er)}
h4{color:var(--m);letter-spacing:0;font-size:13px;margin:22px 0 8px}
.pn{background:#f5b316;color:#2a1c00;border-radius:10px;min-width:54px;height:42px;box-shadow:none;font-size:19px;font-weight:800;border:2px dashed rgba(42,28,0,.35)}.pn.sm2{min-width:44px;height:36px;font-size:16px;border-radius:9px}
.pbn>div{background:color-mix(in srgb,var(--wn) 10%,transparent);border-radius:16px}.pbn b.nd i{color:var(--wk)}
.two>div{background:var(--c2);border:0;border-radius:20px}
.two .tr{background:var(--pr);box-shadow:none;border:0}.two .tr strong,.two .tr span{color:var(--prt)}.two .tr.z{background:var(--ok)}.two .tr.z strong,.two .tr.z span{color:#fff}
.two .tf{background:color-mix(in srgb,var(--ok) 12%,transparent);border:0}
.sg>div{background:var(--cd);border-radius:14px}
.sg .miss{background:var(--pr);box-shadow:none}.sg .miss b,.sg .miss span{color:var(--prt)}.sg .miss.z{background:var(--ok)}.sg .miss.z b,.sg .miss.z span{color:#fff}
nav{left:14px;right:14px;bottom:calc(12px + env(safe-area-inset-bottom,0px));background:var(--dock);border:0;border-radius:30px;padding:6px;gap:4px;box-shadow:0 12px 32px rgba(10,16,32,.35)}
nav span{display:none}
nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:56px;padding:6px 2px;margin:0;border:0;border-radius:24px;background:none;color:#9aa4b8;font-size:11px;font-weight:600}
nav button::before{content:"";width:22px;height:22px;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
nav button.on{background:var(--pr);color:var(--prt);margin:0;padding:6px 2px;border-radius:24px}
nav [data-t=home]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-8 9 8M5 10v10h14V10M10 20v-6h4v6'/%3E%3C/svg%3E")}
nav [data-t=val]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM8 12l3 3 5-6'/%3E%3C/svg%3E")}
nav [data-t=rep]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8zM14 3v5h5M9 13h6M9 17h6'/%3E%3C/svg%3E")}
nav [data-t=menu]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E")}
.fab{left:auto;inset-inline-end:16px;transform:none;bottom:calc(20px + env(safe-area-inset-bottom,0px));height:54px;min-height:54px;width:auto;padding:0 22px 0 18px;border-radius:999px;display:flex;align-items:center;gap:9px;font-size:15px;font-weight:700;letter-spacing:0;background:var(--pr);color:var(--prt);box-shadow:0 10px 26px rgba(67,56,202,.45)}
.fab::before{content:"";width:21px;height:21px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM21 21l-4.3-4.3'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM21 21l-4.3-4.3'/%3E%3C/svg%3E") center/contain no-repeat}
aside{background:var(--cd);border:0;border-radius:0 28px 28px 0;gap:6px}[dir=rtl] aside{border-radius:28px 0 0 28px}
aside h3{font-size:22px;margin-bottom:10px;color:var(--t)}
aside button,aside button.s{background:none;color:var(--t);border-radius:16px;justify-content:flex-start;padding:14px 12px;font-weight:600;border:0}aside button.d{background:color-mix(in srgb,var(--er) 12%,transparent);color:var(--er)}
.dlg{background:rgba(8,12,24,.55)}.dbx{background:var(--cd);border-radius:28px;padding:26px 18px 16px}
.dic{background:var(--pr);color:var(--prt);box-shadow:none}.dic.dg{background:var(--er);color:#fff;box-shadow:none}
.dbt{flex-direction:column-reverse}.dbt button{min-height:50px}
#toast{top:calc(74px + env(safe-area-inset-top,0px));background:var(--dock);color:#fff;border:0;border-radius:999px;padding:12px 22px;box-shadow:0 10px 28px rgba(0,0,0,.3)}#toast.e{background:var(--er)}
th{color:var(--m);font-weight:700;font-size:12px}td,th{border-bottom:1px solid var(--b)}
#pa .ph{border-bottom-color:#0f766e}#pa th{background:#1e1b4b}
.pn{flex:none}.pbn>div{gap:16px;padding:10px 14px}
.pbn>.pbi{display:flex;align-items:stretch;gap:0;padding:0;overflow:hidden;background:var(--cd);border-radius:18px;color:var(--t)}
.pbi .pt{background:#f5b316;color:#2a1c00;display:grid;align-content:center;justify-items:center;gap:0;padding:10px 18px;min-width:104px}
.pbi .pt small{font-size:12px;font-weight:700;color:#2a1c00}.pbi .pt b{font-size:38px;font-weight:800;line-height:1.1;color:#2a1c00}
.pbi .pr2{display:grid;align-content:center;gap:2px;padding:10px 18px}.pbi .pr2 small{font-size:12px;color:var(--m)}
.pbi .pr2 b{font-size:20px;color:var(--t)}.pbi .pr2 i{font-style:normal;font-size:34px;font-weight:800;color:var(--pr);margin-inline-end:4px}
.bnr.wn>b{display:block;margin-bottom:10px}
.stg{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.stg>div{background:var(--cd);border-radius:16px;padding:12px 10px;text-align:center;color:var(--t)}
.stg small{display:block;font-size:12px;font-weight:600;color:var(--m)}.stg b{font-size:15px;color:var(--t)}
.stg i{font-style:normal;font-size:34px;font-weight:800;margin-inline-end:4px;line-height:1.15}.stg>div:first-child i{color:var(--ok)}.stg>div:last-child i{color:var(--pr)}
.sn{font-size:12px;margin-top:10px;font-weight:600}.pbi .pr2 i{font-size:28px}
.pn{display:inline-grid;place-content:center;text-align:center}
.rch{margin:0 0 16px}.rct{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--m);margin:0 4px 8px}.rct b{background:var(--c2);color:var(--t);border-radius:99px;padding:1px 9px;font-size:12px}
.rcs{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 8px;scroll-snap-type:x proximity;scrollbar-width:none}.rcs::-webkit-scrollbar{display:none}
.rc{flex:none;scroll-snap-align:start;display:grid;gap:3px;min-width:148px;max-width:190px;min-height:0;text-align:start;padding:12px 14px;border-radius:18px;background:var(--cd);color:var(--t);border:1px solid var(--b);box-shadow:inset 0 4px 0 -0px var(--c);padding-top:15px;font-weight:400}
.rc b{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rc span{font-size:12px;color:var(--m)}.rc .bar{margin-top:6px}.rc:active{background:var(--c2)}
.rc.fin{--c:var(--ok)}.rc.pnd{--c:var(--wn)}.rc.wk{--c:var(--wk)}.rc.open{--c:var(--op)}
aside{overflow-y:auto}.rmt{display:flex;align-items:center;gap:8px;margin:14px 4px 2px;font-size:13px;font-weight:700;color:var(--m)}.rmt b{background:var(--c2);color:var(--t);border-radius:99px;padding:1px 9px;font-size:12px}
aside button.rm{display:flex;align-items:center;min-height:48px;padding:8px 12px;gap:10px;justify-content:space-between;background:var(--c2);flex:none;border:0}
.rm::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--c);flex:none}.rm .rn{flex:1;min-width:0;text-align:start}
.rm .rn{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rm .m{font-size:12px;font-weight:500;flex:none}
.rm.fin{--c:var(--ok)}.rm.pnd{--c:var(--wn)}.rm.wk{--c:var(--wk)}.rm.open{--c:var(--op)}
.dlg{position:fixed;inset:0;display:grid;place-items:center;z-index:60;padding:20px;}
.dbx{width:100%;max-width:360px;text-align:center;box-shadow:0 22px 54px rgba(0,0,0,.4);animation:dpop .18s ease-out}
@keyframes dpop{from{transform:scale(.92);opacity:0}to{transform:none;opacity:1}}
.dic{width:62px;height:62px;border-radius:50%;margin:0 auto 14px;display:grid;place-content:center;font-size:30px;font-weight:800}
.dtx{font-size:17px;line-height:1.55;margin-bottom:22px;font-weight:600}
.ck{margin:8px 0 16px;padding:8px 0;min-height:44px}.ck input{width:22px;height:22px}
.md>div{max-height:92dvh;padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
@media(min-width:900px){main{max-width:820px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
#lgn{position:fixed;inset:0;z-index:200;display:none;place-items:center;padding:20px;background:var(--bg)}
#lgn .lb{width:100%;max-width:360px;background:var(--cd);border:1px solid var(--b);border-radius:28px;padding:28px 22px}
#lgn .lm{margin:0 auto 14px;width:72px;height:72px;border-radius:22px;background:linear-gradient(145deg,#262b66,#6366f1);box-shadow:0 14px 30px -10px rgba(99,102,241,.6)}#lgn h2{text-align:center;margin:0 0 18px;letter-spacing:2px}
#lgn .er{color:var(--er);text-align:center;min-height:22px;font-size:14px;margin:4px 0 10px}
.rct button{min-height:32px;padding:4px 14px}
.sc2{text-align:start}.sc2 .two div{padding:10px 6px}.sc2 .two strong{font-size:32px}

.sx{position:relative;overflow:hidden;margin-top:14px;padding:18px;border-radius:26px;border:1px solid var(--b);background:linear-gradient(160deg,var(--c2),var(--cd));box-shadow:0 14px 34px -14px rgba(0,0,0,.55)}
.sx:before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:linear-gradient(90deg,#f5b416,#ff8a3d)}
.sx .top{display:flex;align-items:center;gap:14px}
.sx .pb{min-width:96px;text-align:center;padding:10px 14px;border-radius:20px;background:linear-gradient(145deg,#ffd45c,#f5a30f);color:#2b1b00;box-shadow:0 8px 22px -6px rgba(245,163,15,.55)}
.sx .pb small{display:block;font-size:12px;font-weight:700;letter-spacing:.5px;opacity:.8}
.sx .pb b{display:block;font-size:44px;line-height:1.05;font-weight:900}
.sx .big{flex:1;text-align:center;padding:12px 8px;border-radius:20px;background:var(--ip);border:1px solid var(--b)}
.sx .big small{display:block;color:var(--m);font-size:13px;font-weight:600}
.sx .big b{display:block;font-size:48px;line-height:1.1;font-weight:900;color:var(--pr)}
.sx .big b.z{color:var(--ok)}
.sx .big em{font-style:normal;color:var(--m);font-size:14px;font-weight:600}
.sx .dn{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding:10px 14px;border-radius:16px;background:var(--ip);color:var(--m);font-weight:600}
.sx .dn b{color:var(--ok);font-size:20px}
.cts{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.cts a{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:18px;background:var(--ip);border:1px solid var(--b);color:var(--t);text-decoration:none;font-weight:700;word-break:break-all;-webkit-user-select:text;user-select:text}
.cts a i{font-style:normal;display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:14px;background:var(--pr);color:var(--prt);font-size:20px}
.cts small{display:block;color:var(--m);font-weight:600;font-size:12px}
.cpr{text-align:center;color:var(--m);font-size:13px;margin-top:18px;line-height:1.7}
.cpr b{color:var(--t);font-size:15px}

aside{background:linear-gradient(180deg,var(--cd),var(--c2));width:306px;gap:0;padding-inline:14px}
aside .mh{display:flex;align-items:center;gap:12px;padding:6px 6px 18px;margin-bottom:6px;border-bottom:1px solid var(--b)}
aside .ml{display:grid;place-items:center;width:46px;height:46px;border-radius:15px;background:linear-gradient(145deg,var(--hbg),var(--pr))}
aside .mh b{display:block;font-size:19px;letter-spacing:2.5px;color:var(--t)}aside .mh small{color:var(--m);font-weight:600;letter-spacing:.8px;text-transform:uppercase;font-size:11px}
aside .mg{margin:18px 8px 8px;font-size:11px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--m)}
aside .mc{background:var(--ip);border:1px solid var(--b);border-radius:18px;overflow:hidden}
aside button.mi{display:flex;align-items:center;gap:10px;width:100%;min-height:54px;padding:0 16px;border-radius:0;background:none;color:var(--t);font-size:15px;font-weight:700;border:0;border-bottom:1px solid var(--b)}
aside .mc button.mi:last-child{border-bottom:0}
aside button.mi span{flex:1;text-align:start}aside button.mi em{font-style:normal;font-size:13px;font-weight:600;color:var(--m)}
aside button.mi i{width:8px;height:8px;border-top:2px solid var(--m);border-inline-end:2px solid var(--m);transform:rotate(45deg);flex:none;opacity:.7}
[dir=rtl] aside button.mi i{transform:rotate(-135deg)}
aside button.mi:active{background:var(--c2)}aside button.mi.dg{color:var(--er)}aside button.mi.dg i{border-color:var(--er)}
.cts a i.tg{width:auto;min-width:52px;height:34px;padding:0 10px;font-size:11px;font-weight:800;letter-spacing:1px;font-style:normal}
.dtx{white-space:pre-line;text-align:start}

html,body{overscroll-behavior:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-touch-callout:none}
body{-webkit-font-smoothing:antialiased;min-height:100dvh}
button,.rw,.rc{-webkit-tap-highlight-color:transparent;transition:transform .12s ease,background .2s}
button:active,.rw:active,.rc:active{transform:scale(.97)}
.scn{display:flex;align-items:center;gap:10px;margin:0 0 10px;padding:11px 16px;border-radius:16px;background:var(--ip);border:1px solid var(--b);font-weight:700;font-size:14px;color:var(--m);transition:.25s}
.scn i{width:11px;height:11px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 60%,transparent);}
.scn.hit{background:color-mix(in srgb,var(--ok) 20%,var(--ip));color:var(--t);border-color:var(--ok)}
@keyframes pl{70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}
#splash{position:fixed;inset:0;z-index:999;display:grid;place-items:center;background:var(--bg,#0b0e17);transition:opacity .8s ease,visibility .8s}
#splash.x{opacity:0;visibility:hidden}#splash{transition:opacity .6s ease,visibility .6s,background-color .9s ease}#splash::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 46%,rgba(99,102,241,.28),transparent 55%);animation:gl 2.4s ease-in-out infinite alternate;transition:opacity .6s}#splash.fly::before{opacity:0}#splash.fly{background-color:transparent}#splash>div{position:relative}#splash .lg{animation:plg 2.2s ease-in-out infinite alternate}#splash .lg svg path:nth-child(1){stroke-dasharray:1;stroke-dashoffset:1;animation:dr 1.4s .35s cubic-bezier(.65,0,.35,1) forwards}#splash .lg svg path:nth-child(2){stroke-dasharray:1;stroke-dashoffset:1;animation:dr .7s 1.55s ease forwards}#splash b{animation:tr 1.3s .9s cubic-bezier(.2,.8,.2,1) both;transition:opacity .35s ease}#splash.fly b{opacity:0}@keyframes dr{to{stroke-dashoffset:0}}@keyframes gl{from{opacity:.55;transform:scale(.96)}to{opacity:1;transform:scale(1.06)}}@keyframes plg{from{box-shadow:0 18px 40px -10px rgba(124,134,255,.45)}to{box-shadow:0 22px 60px -8px rgba(124,134,255,.85)}}@keyframes tr{from{opacity:0;letter-spacing:22px;transform:translateY(8px)}to{opacity:1;letter-spacing:7px;transform:none}}#lgn .lb{transition:background-color .9s ease,border-color .9s ease,box-shadow .9s ease}#lgn.pre .lb{background-color:transparent;border-color:transparent;box-shadow:none}#lgn .lb>*:not(.lm){transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}#lgn.pre .lb>*:not(.lm){opacity:0;transform:translateY(18px)}#lgn .lb>:nth-child(2){transition-delay:.25s}#lgn .lb>:nth-child(3){transition-delay:.32s}#lgn .lb>:nth-child(4){transition-delay:.39s}#lgn .lb>:nth-child(5){transition-delay:.46s}#lgn .lb>:nth-child(6){transition-delay:.53s}#lgn .lb>:nth-child(7){transition-delay:.6s}#lgn .lb>:nth-child(8){transition-delay:.67s}#lgn.hold .lm{opacity:0}@media(prefers-reduced-motion:reduce){#splash .lg svg path{stroke-dashoffset:0!important}}
#splash div{text-align:center;color:#eef1f8;animation:sp 1s ease both}
#splash .lg{display:grid;place-items:center;width:104px;height:104px;margin:0 auto 18px;border-radius:28px;background:linear-gradient(145deg,#262b66,#7c86ff);box-shadow:0 18px 40px -10px rgba(124,134,255,.6)}
#splash b{display:block;font-size:28px;letter-spacing:7px;font-weight:800;padding-inline-start:7px}#sub,#pa .ps{display:none}#splash small{display:block;margin-top:6px;color:#98a2b8;letter-spacing:2px;font-size:12px}
@keyframes sp{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}

aside{width:min(310px,88vw);height:100dvh;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
aside>*{flex:none}aside .mc{flex:none;min-height:min-content}aside button.mi{flex:none;height:auto}
@media (max-width:400px){
 header{flex-wrap:nowrap;gap:8px}header .br{min-width:0;flex:1;gap:8px}header .row{flex:none;flex-wrap:nowrap}
 .bn1{font-size:16px;letter-spacing:2px}.bs{font-size:10px;letter-spacing:.4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34vw}
 .hb{width:38px;height:38px;min-width:38px;padding:0;font-size:12px}
 html{font-size:15px}
 header{padding:8px 12px}header .row{gap:6px}
 aside .mh{padding-bottom:12px}aside .mh b{font-size:17px}aside .ml{width:40px;height:40px}
 aside button.mi{min-height:48px;padding:0 13px;font-size:14px}
 aside .mg{margin:14px 6px 6px}
 .sx{padding:14px;border-radius:22px}.sx .pb{min-width:78px;padding:8px 10px}.sx .pb b{font-size:36px}.sx .big b{font-size:40px}
 .sc2 .two strong{font-size:26px}
 .modal,.sheet{padding-left:12px;padding-right:12px}
 h3{font-size:18px}
 .cts a{padding:12px;gap:10px}
}
@media (max-width:340px),(max-height:620px){
 html{font-size:14px}
 aside button.mi{min-height:44px}aside .mh{margin-bottom:0}
 .sx .pb b{font-size:30px}.sx .big b{font-size:34px}
 #lgn .lb{padding:20px 16px}
}
#pa table{width:100%;border-collapse:collapse;table-layout:fixed}#pa th,#pa td{text-align:start;overflow-wrap:anywhere;word-break:break-word}#pa tr{page-break-inside:avoid;break-inside:avoid}#pa .ph,#pa .pm{break-inside:avoid;page-break-inside:avoid;break-after:avoid;page-break-after:avoid}#pa thead{break-after:avoid;page-break-after:avoid}#pa .pf{break-inside:avoid;page-break-inside:avoid}#pa .pf{text-align:center;color:#888;font-size:12px;margin-top:14px}
/* إعداد هوامش الصفحة المتوازنة */
@page{size:A4;margin:10mm 12mm 15mm 12mm}
@media print{html,body{height:auto!important;overflow:visible!important;background:#fff!important}
body>*{display:none!important}body>#pa{display:block!important;position:static!important;left:0!important;width:auto!important;padding:0!important;min-height:0!important;margin:0!important}
#pa .pg{position:relative;box-sizing:border-box;height:268mm;padding-bottom:15px;overflow:visible;break-inside:avoid;page-break-inside:avoid;page-break-after:always;break-after:page}#pa table{break-inside:auto;orphans:3;widows:3}#pa td,#pa th{orphans:2;widows:2}#pa .pg:last-child{page-break-after:auto;break-after:auto}#pa .pfx{position:absolute;left:0;right:0;bottom:0;text-align:center;color:#666;font-size:12px;border-top:1px solid #ccc;padding-top:6px}#pa tr{break-inside:avoid;page-break-inside:avoid}#pa thead{display:table-header-group}#pa th{-webkit-print-color-adjust:exact;print-color-adjust:exact}}

/* ضبط المسافة السفلية للحاوية */
#pa .pg{padding-bottom:15px!important;margin-bottom:0!important}
/* منع تقطيع الصفوف */
tr{page-break-inside:avoid;break-inside:avoid}

/* ===== Fokus-Modus: nur Laser-Scan ===== */
#mn .hmw{display:grid;grid-template-rows:1fr;transition:grid-template-rows .65s cubic-bezier(.4,0,.2,1),opacity .45s ease,transform .65s cubic-bezier(.4,0,.2,1)}
#mn .hmw>.hmi{overflow:hidden;min-height:0}
#mn.fx .hmw{grid-template-rows:0fr;opacity:0;transform:translateY(28px);pointer-events:none}
#mn #ls{max-height:200px;transition:max-height .5s ease,opacity .4s ease,padding .5s ease,margin .5s ease,border-width .5s}
#mn.fx #ls{max-height:0;opacity:0;padding-top:0;padding-bottom:0;margin:0;border-width:0}
.scn .sw{margin-inline-start:auto;display:flex;align-items:center;gap:8px;padding:5px 6px 5px 12px;border-radius:999px;background:var(--cd);color:var(--t);border:1px solid var(--b);font-size:12px;font-weight:800;letter-spacing:.3px;min-height:0;box-shadow:none}
[dir=rtl] .scn .sw{padding:5px 12px 5px 6px}
.scn .sw span{flex:none;font-size:12px;font-weight:800;color:inherit}
.scn .sw em.tk{position:relative;display:block;width:38px;height:22px;border-radius:999px;background:var(--b);transition:background .35s ease;font-style:normal}
.scn .sw em.tk::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.35);transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.scn .sw.on em.tk{background:var(--pr)}
.scn .sw.on em.tk::after{transform:translateX(16px)}
[dir=rtl] .scn .sw.on em.tk::after{transform:translateX(-16px)}
.lzr{position:relative;overflow:hidden;height:0;opacity:0;margin:0;border-radius:26px;border:1px solid var(--b);background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--pr) 22%,var(--ip)),var(--ip));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;transition:height .7s cubic-bezier(.4,0,.2,1),opacity .5s ease .1s,margin .6s ease}
#mn.fx .lzr{height:min(48dvh,440px);opacity:1;margin:0 0 12px}
.lzr .ln{position:absolute;left:8%;right:8%;top:14%;height:3px;border-radius:3px;background:linear-gradient(90deg,transparent,#ff3b4e 20%,#ff6b7a 50%,#ff3b4e 80%,transparent);box-shadow:0 0 18px 4px rgba(255,59,78,.55);animation:lzs 2.2s ease-in-out infinite alternate}
@keyframes lzs{from{top:14%}to{top:80%}}
.lzr .cr{position:absolute;width:34px;height:34px;border:3px solid var(--pr);opacity:.9;animation:lzc 2.4s ease-in-out infinite alternate}
.lzr .cr.a{top:16px;inset-inline-start:16px;border-right:0;border-bottom:0;border-top-left-radius:14px}
.lzr .cr.b{top:16px;inset-inline-end:16px;border-left:0;border-bottom:0;border-top-right-radius:14px}
.lzr .cr.c{bottom:16px;inset-inline-start:16px;border-right:0;border-top:0;border-bottom-left-radius:14px}
.lzr .cr.d{bottom:16px;inset-inline-end:16px;border-left:0;border-top:0;border-bottom-right-radius:14px}
[dir=rtl] .lzr .cr.a{border-right:3px solid var(--pr);border-left:0;border-top-left-radius:0;border-top-right-radius:14px}
[dir=rtl] .lzr .cr.b{border-left:3px solid var(--pr);border-right:0;border-top-right-radius:0;border-top-left-radius:14px}
[dir=rtl] .lzr .cr.c{border-right:3px solid var(--pr);border-left:0;border-bottom-left-radius:0;border-bottom-right-radius:14px}
[dir=rtl] .lzr .cr.d{border-left:3px solid var(--pr);border-right:0;border-bottom-right-radius:0;border-bottom-left-radius:14px}
@keyframes lzc{from{transform:scale(1)}to{transform:scale(.9)}}
.lzr .lzt{position:relative;z-index:1;display:grid;gap:6px}
.lzr .lzt b{font-size:22px;font-weight:800;color:var(--t)}
.lzr .lzt small{font-size:14px;color:var(--m);font-weight:700}
.lzr .lzt strong{font-size:40px;font-weight:900;color:var(--t);letter-spacing:1px}
.lzr .lzb{position:relative;z-index:1;padding:12px 22px;border-radius:999px;font-weight:800}
.lzr.hit{border-color:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 35%,transparent)}.lzr.hit .ln{background:linear-gradient(90deg,transparent,#22c55e 20%,#6ee7a0 50%,#22c55e 80%,transparent);box-shadow:0 0 22px 6px rgba(34,197,94,.6)}.lzr.hit .cr{border-color:var(--ok)}
@media(prefers-reduced-motion:reduce){.lzr .ln,.lzr .cr{animation:none}}
aside button.mi.on{background:var(--pr);color:var(--prt)}
aside button.mi.on i{border-color:currentColor}
#hrf{position:relative}#hrf.ok::after,#hrf.bad::after{content:none}#hrf svg{display:block}#hrf.spin svg{animation:rfs .8s linear infinite}@keyframes rfs{to{transform:rotate(360deg)}}

/* ===================== NEW DESIGN: Navy & Gold ===================== */
:root{--bg:#f4f6fa;--cd:#ffffff;--c2:#edf0f6;--ip:#f1f4f9;--b:#e1e6ef;--t:#0f1b2d;--m:#64748b;--pr:#0f766e;--prt:#ffffff;--hbg:#0f766e;--dock:#0f1b2d;--gold:#d4a94f;--gold2:#b8862c;--ok:#0b8f63;--wn:#b7791f;--wk:#2f6fdb;--op:#64748b;--er:#d63a32;--trk:#e1e6ef;--gd:#b8862c;--sh:0 1px 2px rgba(15,27,45,.05),0 10px 28px -18px rgba(15,27,45,.28)}
html[data-th=dark]{--bg:#0a1220;--cd:#111b2e;--c2:#182540;--ip:#162239;--b:#24334f;--t:#edf2fa;--m:#8fa0bd;--pr:#e2b75e;--prt:#1a1303;--hbg:#14233f;--dock:#15223a;--gold:#e2b75e;--gold2:#c8932f;--ok:#34d399;--wn:#f5b942;--wk:#6aa8ff;--op:#8a99b3;--er:#ff7b72;--trk:#24334f;--gd:#e2b75e;--sh:0 1px 0 rgba(255,255,255,.03) inset,0 14px 30px -20px rgba(0,0,0,.7)}
body{background:radial-gradient(900px 420px at 100% -8%,color-mix(in srgb,var(--pr) 9%,transparent),transparent 65%),var(--bg);font-family:"Inter","Segoe UI","Noto Sans Arabic",Tahoma,system-ui,sans-serif}

/* Header */
header{background:color-mix(in srgb,var(--bg) 82%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--b)}
.lm{background:linear-gradient(145deg,#0f766e,#1d4e89);border-radius:12px;box-shadow:0 6px 16px -6px rgba(15,47,87,.6),inset 0 0 0 1px rgba(212,169,79,.45)}
.bn1{letter-spacing:3px;font-weight:800}
.bs{text-transform:uppercase;letter-spacing:1.2px;font-weight:600}
.hb{border-radius:12px;background:var(--cd);border:1px solid var(--b);box-shadow:var(--sh)}
#hlg{border-radius:12px;padding:0 14px;font-weight:800;letter-spacing:.5px}
.menu i{background:var(--t)}

/* Buttons */
button{border-radius:14px;min-height:48px;padding:10px 22px;font-weight:700;letter-spacing:.2px;background:linear-gradient(180deg,color-mix(in srgb,var(--pr) 86%,#fff),var(--pr));color:var(--prt);box-shadow:0 8px 18px -10px color-mix(in srgb,var(--pr) 85%,transparent),inset 0 1px 0 rgba(255,255,255,.18);transition:transform .12s ease,box-shadow .2s,filter .2s}
button:hover{filter:brightness(1.06)}
button:active{transform:translateY(1px) scale(.985);box-shadow:none}
button.s{background:transparent;color:var(--t);border:1.5px solid var(--b);box-shadow:none}
button.s:hover{background:var(--c2);filter:none}
button.d{background:linear-gradient(180deg,color-mix(in srgb,var(--er) 86%,#fff),var(--er));color:#fff}
button.sm{min-height:38px;padding:6px 16px;border-radius:11px;font-size:13px}
button:disabled{opacity:.4;box-shadow:none;filter:grayscale(.4)}
nav button,aside button,.rw,.rc,.sh2,.hb,button.s,.menu{box-shadow:none}
.hb{box-shadow:var(--sh)}

/* Inputs */
input:not([type=checkbox]){border-radius:12px;border:1.5px solid var(--b);background:var(--ip);padding:13px 14px}
input:focus{border-color:var(--pr);background:var(--cd);box-shadow:0 0 0 4px color-mix(in srgb,var(--pr) 16%,transparent)}
label{letter-spacing:.3px;text-transform:uppercase;font-size:11px;font-weight:700}

/* Cards */
.card,.sec{border-radius:20px;border:1px solid var(--b);box-shadow:var(--sh)}
.sec{padding:4px 18px 8px}
.hero{background:linear-gradient(135deg,#0f766e 0%,#17487d 100%);border-radius:24px;box-shadow:0 22px 44px -22px rgba(15,47,87,.8),inset 0 1px 0 rgba(255,255,255,.14);position:relative;overflow:hidden}
html[data-th=dark] .hero{background:linear-gradient(135deg,#14233f 0%,#1f3d6d 100%);box-shadow:0 22px 44px -24px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.08)}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:3px;background:linear-gradient(90deg,var(--gold),var(--gold2),transparent)}
.kp>div{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.08);border-radius:14px}
.seg i{border-radius:4px}
.sh2 b{border-radius:8px;padding:2px 10px}
.chip{border-radius:8px}
.rw{transition:background .15s}
.rw:hover{background:color-mix(in srgb,var(--pr) 5%,transparent)}
.rc{border-radius:16px;box-shadow:var(--sh)}
.bar{border-radius:99px;height:6px}
#ls{border-radius:14px;border:1.5px dashed color-mix(in srgb,var(--pr) 40%,var(--b));background:color-mix(in srgb,var(--pr) 4%,var(--cd))}
.scn{border-radius:14px}
.two>div{border-radius:16px}
.en{border-radius:16px}
.bnr{border-radius:14px}
.pbn>div,.pbn>.pbi{border-radius:16px}
.stg>div,.sg>div{border-radius:14px}
.sx{border-radius:22px}
.sx .pb{border-radius:16px}.sx .big{border-radius:16px}.sx .dn{border-radius:14px}
.cts a{border-radius:14px}.cts a i{border-radius:11px}

/* Bottom navigation */
nav{background:var(--dock);border:1px solid rgba(255,255,255,.07);border-radius:22px;padding:6px;box-shadow:0 18px 40px -14px rgba(10,18,32,.55)}
nav button{border-radius:16px;color:#9fb0cc;background:none}
nav button.on{background:linear-gradient(135deg,#ecc977,#c8932f);color:#1a1303;box-shadow:0 6px 14px -6px rgba(200,147,47,.7)}

/* Floating action button */
.fab{border-radius:18px;height:54px;background:linear-gradient(135deg,#ecc977,#c8932f);color:#1a1303;box-shadow:0 14px 28px -10px rgba(200,147,47,.7),inset 0 1px 0 rgba(255,255,255,.35)}

/* Side menu */
aside{border-radius:0 24px 24px 0;box-shadow:0 0 60px rgba(0,0,0,.35)}[dir=rtl] aside{border-radius:24px 0 0 24px}
aside .ml{background:linear-gradient(145deg,#0f766e,#1d4e89);border-radius:13px;box-shadow:inset 0 0 0 1px rgba(212,169,79,.45)}
aside .mc{border-radius:16px}
aside button.mi{font-weight:700}
aside button.mi.on{background:linear-gradient(135deg,#ecc977,#c8932f);color:#1a1303}

/* Dialogs & sheets */
.md>div{border-radius:26px 26px 0 0}
.dbx{border-radius:24px}
.dic{border-radius:18px;background:linear-gradient(135deg,#ecc977,#c8932f);color:#1a1303}
.dic.dg{background:var(--er);color:#fff}
#toast{border-radius:14px;background:var(--dock);border:1px solid rgba(212,169,79,.5)}
#toast.e{background:var(--er);border-color:transparent}

/* Login & splash */
#lgn{background:radial-gradient(700px 420px at 50% -10%,color-mix(in srgb,var(--pr) 14%,transparent),transparent 70%),var(--bg)}
#lgn .lb{border-radius:24px;box-shadow:0 30px 60px -30px rgba(15,27,45,.5)}
#lgn .lm{background:linear-gradient(145deg,#0f766e,#1d4e89);border-radius:20px;box-shadow:0 14px 30px -10px rgba(15,47,87,.7),inset 0 0 0 1px rgba(212,169,79,.5)}
#splash::before{background:radial-gradient(circle at 50% 46%,rgba(212,169,79,.22),transparent 55%)}
#splash .lg{background:linear-gradient(145deg,#0f766e,#1d4e89);border-radius:26px;box-shadow:0 18px 40px -10px rgba(29,78,137,.7),inset 0 0 0 1px rgba(212,169,79,.5)}

/* Table & print */
th{letter-spacing:.4px;text-transform:uppercase}
#pa .ph{border-bottom-color:#c8932f}#pa th{background:#0f766e}

/* ===================== PASS 2: Spacing, Typography, Motion, Responsive ===================== */
:root{--ease:cubic-bezier(.2,.7,.2,1);--rad:14px;--rad-lg:20px}
html{font-size:16px}
body{font-size:16px;line-height:1.65;letter-spacing:.005em}
h1,h2,h3{letter-spacing:-.01em;line-height:1.25}h3{font-size:20px}

/* Layout & whitespace */
header{padding:14px 20px}
main{max-width:780px;padding:12px 20px 150px}
.card{padding:22px;margin-bottom:20px}
.sec{padding:6px 22px 10px;margin-bottom:20px}
.hero{padding:28px 24px 22px;margin-bottom:24px}
.sh2{min-height:60px;font-size:17px}
.rw{padding:18px 0}.rw b{font-size:17px}
.md .rw{padding:18px}
.md>div{padding:14px 24px 30px}
.rch{margin-bottom:24px}.rct{font-size:14px;margin-bottom:12px}
.rc{padding:16px 18px;min-width:164px}.rc b{font-size:16px}.rc span{font-size:13px}
.row{gap:12px}.two{gap:14px;margin:16px 0}.two>div{padding:18px 8px}
.en{padding:16px;margin-bottom:12px}
.bnr{padding:16px 18px;margin:16px 0;font-size:15px;line-height:1.6}
h4{font-size:14px;margin:30px 0 12px;font-weight:700;letter-spacing:.2px}
label{font-size:12px;display:block;margin-bottom:2px}
input:not([type=checkbox]){font-size:16px;padding:15px 16px;margin:6px 0 16px}
table{font-size:14.5px}th,td{padding:14px 10px}
.dtx{font-size:18px;line-height:1.7;margin-bottom:26px}
.dbx{padding:30px 22px 20px}.dbt{gap:10px}
aside{padding-inline:18px}
aside button.mi{min-height:58px;font-size:16px}
aside .mg{margin:24px 8px 10px}
.bs{font-size:11.5px}.bn1{font-size:18px}

/* Buttons */
button{min-height:52px;padding:12px 28px;font-size:15.5px;border-radius:14px}
button.sm{min-height:40px;padding:8px 18px;font-size:14px}
nav button{min-height:58px;font-size:12px}
.fab{height:58px;min-height:58px;padding:0 26px 0 22px;font-size:16px}
.hb{width:46px;height:46px;min-height:46px}
#hlg{width:auto;padding:0 16px}

/* Hover & focus effects (only on devices that hover) */
button,.rw,.rc,.card,.hb,aside button.mi,.cts a,nav button{transition:transform .22s var(--ease),box-shadow .22s var(--ease),background-color .2s,filter .2s,border-color .2s,color .2s}
@media (hover:hover){
 button:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 14px 26px -12px color-mix(in srgb,var(--pr) 80%,transparent);filter:brightness(1.07)}
 button.s:not(:disabled):hover{transform:translateY(-1px);box-shadow:none;border-color:var(--pr);background:color-mix(in srgb,var(--pr) 6%,transparent)}
 button.d:not(:disabled):hover{box-shadow:0 14px 26px -12px color-mix(in srgb,var(--er) 80%,transparent)}
 nav button:not(.on):hover{background:rgba(255,255,255,.07);color:#fff;transform:none;box-shadow:none}
 nav button.on:hover{transform:none}
 .fab:hover{transform:translateY(-3px)!important;box-shadow:0 20px 34px -12px rgba(200,147,47,.75)}
 .rw:hover{transform:none;box-shadow:none;background:color-mix(in srgb,var(--pr) 6%,transparent)}
 .rc:hover{transform:translateY(-3px);box-shadow:0 18px 32px -18px rgba(15,27,45,.45);border-color:color-mix(in srgb,var(--pr) 35%,var(--b))}
 .hb:hover{transform:translateY(-1px);border-color:var(--pr)}
 aside button.mi:hover{background:var(--c2);transform:none;box-shadow:none}
 .cts a:hover{transform:translateY(-2px);border-color:var(--pr)}
 .card:hover{border-color:color-mix(in srgb,var(--pr) 25%,var(--b))}
}
button:focus-visible,input:focus-visible,.rw:focus-visible,.rc:focus-visible{outline:3px solid color-mix(in srgb,var(--pr) 45%,transparent);outline-offset:3px}
button:active{transform:translateY(0) scale(.98)!important}

/* Tablet & desktop */
@media (min-width:700px){
 header{padding:16px 32px}
 main{max-width:860px;padding:20px 28px 160px}
 .hero{padding:34px 32px 26px}.pc{font-size:72px}
 .card{padding:28px}.sec{padding:8px 28px 12px}
 nav{left:50%;right:auto;width:min(560px,92vw);transform:translateX(-50%)}
 .fab{inset-inline-end:max(24px,calc(50% - 430px))}
}
@media (min-width:1100px){
 main{max-width:960px}
 body{font-size:16.5px}
 .md>div{max-width:620px}
 .md{align-items:center}.md>div{border-radius:26px;padding-top:26px}.md>div::before{display:none}
}

/* Small phones: keep comfortable but fit */
@media (max-width:400px){
 html{font-size:15.5px}
 header{padding:10px 14px}main{padding:8px 14px 150px}
 .card{padding:18px}.sec{padding:4px 16px 8px}.hero{padding:22px 18px 18px}
 button{padding:12px 22px}
 .bs{max-width:34vw}
}

/* ===================== PASS 3: Mobile-app & small-screen tuning ===================== */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{max-width:100%}
body{min-height:100dvh;padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
img,svg,canvas{max-width:100%}
*{min-width:0}
.rw,.rc b,.sh2 span,.cts a{overflow-wrap:anywhere}
.sc{-webkit-overflow-scrolling:touch}
table{min-width:420px}
main{padding-bottom:calc(120px + env(safe-area-inset-bottom,0px))}

/* fluid sizes so numbers never overflow */
.pc{font-size:clamp(44px,15vw,64px)}.pc small{font-size:clamp(20px,6vw,26px)}
.cb strong{font-size:clamp(22px,7vw,28px)}
.two strong{font-size:clamp(28px,10vw,40px)}
.sx .pb b{font-size:clamp(32px,11vw,46px)}.sx .big b{font-size:clamp(36px,12vw,50px)}
.lzr .lzt strong{font-size:clamp(30px,10vw,42px)}
.pbi .pt b{font-size:clamp(30px,10vw,40px)}
.dtx{font-size:clamp(16px,4.6vw,18px)}

/* thumb-friendly bottom nav and FAB: sit above the home indicator */
nav{left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));bottom:calc(10px + env(safe-area-inset-bottom,0px))}
nav button{min-height:56px}
.fab{bottom:calc(86px + env(safe-area-inset-bottom,0px))}
#toast{top:calc(72px + env(safe-area-inset-top,0px));width:max-content;max-width:calc(100vw - 32px)}
.dlg{padding:max(16px,env(safe-area-inset-top,0px)) 16px max(16px,env(safe-area-inset-bottom,0px))}
.dbx{max-width:min(380px,100%);max-height:90dvh;overflow:auto}
.md>div{max-height:90dvh;padding-bottom:calc(28px + env(safe-area-inset-bottom,0px));overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.md>div .row:first-child{position:sticky;top:-14px;z-index:2;background:var(--cd);padding:6px 0 10px}

/* phones <= 480px */
@media (max-width:480px){
 header{padding:10px 14px}
 main{padding:8px 14px calc(120px + env(safe-area-inset-bottom,0px))}
 .hero{border-radius:22px}
 .kp{gap:6px}.kp>div{padding:10px 4px;border-radius:12px}.kp b{font-size:20px}.kp span{font-size:10.5px;gap:4px}
 .two{gap:10px}
 .stg{gap:8px}
 .sec{border-radius:18px}
 .en{grid-template-columns:1fr}
 .row>button{flex:1 1 auto}
 .dbt button{width:100%}
 #lgn{padding:16px;align-items:start;padding-top:max(8vh,env(safe-area-inset-top,0px))}
 #lgn .lb{padding:24px 18px}
}

/* small phones <= 380px */
@media (max-width:380px){
 html{font-size:15px}
 header{padding:8px 12px;gap:6px}
 .lm{width:38px;height:38px;border-radius:11px}
 .bn1{font-size:16px;letter-spacing:2px}.bs{display:none}
 .hb{width:40px;height:40px;min-height:40px}#hlg{padding:0 12px;font-size:12px}
 main{padding:6px 12px calc(116px + env(safe-area-inset-bottom,0px))}
 .card{padding:16px;border-radius:18px}.sec{padding:2px 14px 6px}
 .hero{padding:20px 16px 16px}
 .sh2{min-height:54px;font-size:16px}.rw{padding:15px 0}.rw b{font-size:16px}
 button{padding:11px 18px;font-size:15px;min-height:48px}button.sm{min-height:38px;padding:7px 14px}
 input:not([type=checkbox]){padding:13px 14px}
 nav{padding:5px;gap:2px;border-radius:20px}
 nav button{min-height:52px;font-size:10.5px;border-radius:15px}
 nav button::before{width:20px;height:20px}
 .fab{height:52px;min-height:52px;padding:0 20px 0 16px;font-size:15px;inset-inline-end:12px}
 .rc{min-width:140px;padding:14px}
 aside{width:min(300px,90vw)}
 aside button.mi{min-height:52px;font-size:15px}
 .md>div{padding:12px 16px 24px}
 .dbx{padding:24px 16px 16px;border-radius:22px}
 .cts a{padding:12px;gap:10px}
}

/* very small phones <= 340px (e.g. iPhone SE 1st gen, small Androids) */
@media (max-width:340px){
 html{font-size:14px}
 .kp{grid-template-columns:repeat(2,1fr)}
 .lm{display:none}
 nav button{font-size:10px}
 .fab{padding:0 16px 0 13px;font-size:14px}
 .fab::before{width:18px;height:18px}
 .two strong{font-size:26px}
 .sx .top{flex-direction:column;align-items:stretch}.sx .pb{width:100%}
}

/* short screens / landscape phones */
@media (max-height:560px){
 header{position:static}
 nav{position:fixed}
 .fab{bottom:calc(76px + env(safe-area-inset-bottom,0px))}
 #mn.fx .lzr{height:min(60dvh,300px)}
 #lgn{align-items:start;overflow:auto}
}
@media (orientation:landscape) and (max-height:480px){
 main{padding-bottom:calc(100px + env(safe-area-inset-bottom,0px))}
 .md>div{max-width:640px;border-radius:22px 22px 0 0}
}

/* app-like feel */
button,.rw,.rc,nav,header,.fab{-webkit-user-select:none;user-select:none}
input{-webkit-user-select:text;user-select:text}
@media (hover:none){button:hover{filter:none;transform:none}}

/* ===================== PASS 4: Formal & simple (flat, no gradients, no glow) ===================== */
:root{--bg:#f3f5f8;--cd:#ffffff;--c2:#eceff4;--ip:#f6f7fa;--b:#d8dee8;--t:#1a2433;--m:#5b6778;--pr:#0f766e;--prt:#ffffff;--hbg:#0f766e;--dock:#1a2433;--gd:#0f766e;--ok:#1b7f5c;--wn:#a86a0a;--wk:#2457b3;--op:#6b7685;--er:#b3342d;--trk:#dde2ea;--sh:none}
html[data-th=dark]{--bg:#0f1722;--cd:#172131;--c2:#1f2b3d;--ip:#1b2738;--b:#2c3a50;--t:#e6ebf2;--m:#93a1b5;--pr:#7aa7e0;--prt:#0f1722;--hbg:#0f766e;--dock:#1f2b3d;--gd:#7aa7e0;--ok:#4cc38a;--wn:#e0a93a;--wk:#7aa7e0;--op:#8a99b3;--er:#ef7b73;--trk:#2c3a50;--sh:none}
body{background:var(--bg)}

/* Header */
header{background:var(--cd);-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:1px solid var(--b)}
.lm,aside .ml,#lgn .lm,#splash .lg{background:#0f766e;box-shadow:none;border-radius:10px}
#lgn .lm{border-radius:14px}#splash .lg{border-radius:20px}
#splash::before{background:none}
.bn1{letter-spacing:2px}
.bs{text-transform:none;letter-spacing:.3px}
.hb{border-radius:10px;box-shadow:none;background:var(--cd)}
#hlg{border-radius:10px}

/* Buttons: solid, square-ish, no motion */
button{background:var(--pr);color:var(--prt);border-radius:10px;box-shadow:none;letter-spacing:0;font-weight:600}
button.s{background:var(--cd);color:var(--t);border:1px solid var(--b)}
button.d{background:var(--er);color:#fff}
button.sm{border-radius:8px}
button:not(:disabled):hover{transform:none;box-shadow:none;filter:brightness(.92)}
button.s:not(:disabled):hover{filter:none;background:var(--c2);border-color:var(--m)}
button.d:not(:disabled):hover{box-shadow:none}
button:active{transform:none!important;filter:brightness(.85)}
button:disabled{filter:none;opacity:.45}

/* Cards & sections */
.card,.sec,.rc,.sx,.cts a,.two>div,.en,.stg>div,.sg>div,.pbn>.pbi{box-shadow:none;border-radius:12px}
.card,.sec{border:1px solid var(--b);background:var(--cd)}
.card:hover,.rc:hover,.cts a:hover,.hb:hover{transform:none;box-shadow:none}
.rc:hover{border-color:var(--m)}
.rw:hover{background:var(--c2)}
.hero{background:var(--hbg);border-radius:14px;box-shadow:none}
html[data-th=dark] .hero{background:#0f766e;box-shadow:none}
.hero::after{display:none}
.kp>div{background:rgba(255,255,255,.1);border:0;border-radius:8px}
.sx{background:var(--cd)}.sx:before{background:var(--pr);height:3px}
.sx .pb{background:#f5b316;box-shadow:none;border-radius:10px}
.sx .big,.sx .dn,.bnr,.scn{border-radius:8px}
.chip,.sh2 b{border-radius:6px}
#ls{border-radius:10px;border:1px dashed var(--m);background:var(--cd)}
.bar{border-radius:4px}

/* Inputs */
input:not([type=checkbox]){border-radius:8px;border:1px solid var(--b);background:var(--cd)}
input:focus{border-color:var(--pr);box-shadow:0 0 0 3px color-mix(in srgb,var(--pr) 18%,transparent);background:var(--cd)}
label,th{text-transform:none;letter-spacing:0}

/* Bottom navigation: flat full-width bar */
nav,nav[style]{left:0;right:0;bottom:0;width:auto;transform:none;border-radius:0;border:0;border-top:1px solid var(--b);background:var(--cd);box-shadow:none;padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));gap:0}
nav button{border-radius:8px;color:var(--m);background:none;box-shadow:none}
nav button:not(.on):hover{background:var(--c2);color:var(--t)}
nav button.on{background:color-mix(in srgb,var(--pr) 12%,transparent);color:var(--pr);box-shadow:none}
main{padding-bottom:calc(150px + env(safe-area-inset-bottom,0px))}

/* Floating button */
.fab{background:var(--pr);color:var(--prt);border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.18);bottom:calc(84px + env(safe-area-inset-bottom,0px))}
.fab:hover{transform:none!important;box-shadow:0 2px 8px rgba(0,0,0,.18);filter:brightness(.92)}

/* Side menu */
aside{background:var(--cd);border-radius:0;box-shadow:none;border-inline-end:1px solid var(--b)}[dir=rtl] aside{border-radius:0}
aside .mc{border-radius:10px}
aside button.mi.on{background:var(--pr);color:var(--prt)}

/* Dialogs */
.md>div{border-radius:16px 16px 0 0}
.dbx{border-radius:14px;box-shadow:0 8px 30px rgba(0,0,0,.25)}
.dic{background:var(--pr);color:var(--prt);border-radius:12px}.dic.dg{background:var(--er);color:#fff}
#toast{background:var(--dock);color:#fff;border:0;border-radius:10px}
#toast.e{background:var(--er)}

/* Login */
#lgn{background:var(--bg)}
#lgn .lb{border-radius:14px;box-shadow:none}

/* Print header */
#pa .ph{border-bottom-color:#0f766e}#pa th{background:#0f766e}

@media (min-width:700px){nav{left:0;right:0;width:auto;transform:none}.fab{inset-inline-end:max(24px,calc(50% - 430px))}}
@media (max-width:380px){nav{padding:4px 4px calc(4px + env(safe-area-inset-bottom,0px))}.fab{bottom:calc(76px + env(safe-area-inset-bottom,0px))}}

/* ===================== PASS 5: Teal color theme ===================== */
:root{--bg:#f1f6f5;--cd:#ffffff;--c2:#e6efed;--ip:#f5f9f8;--b:#d3e0dd;--t:#17302d;--m:#587370;--pr:#0f766e;--prt:#ffffff;--hbg:#0f766e;--dock:#17302d;--gd:#0f766e;--ok:#2f8f3e;--wn:#b36b00;--wk:#2563eb;--op:#6b8581;--er:#c0392b;--trk:#d9e5e2}
html[data-th=dark]{--bg:#0d1917;--cd:#142421;--c2:#1b302c;--ip:#182a27;--b:#2a4540;--t:#e4f1ee;--m:#8fb0aa;--pr:#3fd0bd;--prt:#07201c;--hbg:#0f766e;--dock:#1b302c;--gd:#3fd0bd;--ok:#5fd08a;--wn:#e0a93a;--wk:#7aa7e0;--op:#8aa7a1;--er:#ef7b73;--trk:#2a4540}
.hero,html[data-th=dark] .hero{background:#0f766e}
.hero .pc,.hero .pc small,.hero .pl,.hero .kp,.hero .kp *{color:#fff}

/* ===================== PASS 6: Eye-friendly dark mode (soft slate, low glare) ===================== */
html[data-th=dark]{--bg:#161a21;--cd:#1e232c;--c2:#262c37;--ip:#212732;--b:#323a47;--t:#d3d8e1;--m:#8b94a4;--pr:#8fa6cf;--prt:#141820;--hbg:#2c3b57;--dock:#262c37;--gd:#8fa6cf;--ok:#78c096;--wn:#d6b062;--wk:#8fa6cf;--op:#8791a1;--er:#e08c86;--trk:#323a47}
html[data-th=dark] .hero,html[data-th=dark] .lm,html[data-th=dark] aside .ml,html[data-th=dark] #lgn .lm,html[data-th=dark] #splash .lg{background:#2c3b57}
html[data-th=dark] .hero .pc,html[data-th=dark] .hero .pc small,html[data-th=dark] .hero .pl,html[data-th=dark] .hero .kp,html[data-th=dark] .hero .kp *{color:#e4e8ef}
html[data-th=dark] #splash{background:#161a21}
html[data-th=dark] #toast{color:#e4e8ef}
html[data-th=dark] input:focus{box-shadow:0 0 0 3px rgba(143,166,207,.2)}
html[data-th=dark] .fab{box-shadow:none}

/* Login success screen */
#lgn .okv{display:grid;justify-items:center;gap:14px;text-align:center;animation:okin .45s cubic-bezier(.2,.8,.2,1) both}
#lgn .okv .lm{margin:0;width:84px;height:84px;border-radius:20px;animation:okpop .6s cubic-bezier(.3,1.4,.5,1) both}
#lgn .okv h2{margin:0;letter-spacing:4px}
#lgn .okc{color:var(--ok);margin-top:6px}
#lgn .okc circle{stroke-dasharray:176;stroke-dashoffset:176;animation:okd .6s .25s ease forwards}
#lgn .okc path{stroke-dasharray:50;stroke-dashoffset:50;animation:okd .4s .75s ease forwards}
#lgn .adm{display:grid;gap:4px;justify-items:center;margin-top:4px;padding:10px 18px;border-radius:12px;border:1px solid var(--gd);background:rgba(217,169,78,.12);color:var(--t);font-size:13px;line-height:1.6;opacity:0;animation:okin .4s 1.2s ease forwards}#lgn .adm b{color:var(--gd);letter-spacing:3px;font-size:12px}
#lgn .okt{font-weight:700;line-height:1.7;color:var(--t);opacity:0;animation:okin .4s .9s ease forwards}
@keyframes okin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes okpop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
@keyframes okd{to{stroke-dashoffset:0}}

/* ===================== PASS 7: Arabic text from the right, controls never move ===================== */
/* The page frame (header, buttons, side menu, floating button) is always LTR, so nothing jumps when the language changes.
   Only the text content is laid out right-to-left in Arabic. */
html[lang=ar] main,html[lang=ar] #mdc{direction:rtl;text-align:start}
html[lang=ar] .row,html[lang=ar] .dbt{direction:ltr}
html[lang=ar] .row>:not(button):not(.row){direction:rtl;unicode-bidi:plaintext;text-align:start}
html[lang=ar] .bs,html[lang=ar] aside .mi span,html[lang=ar] aside .mg,html[lang=ar] aside .mh small,html[lang=ar] aside .rn,html[lang=ar] #toast,html[lang=ar] .dtx{unicode-bidi:plaintext}
html[lang=ar] aside .mi span{text-align:start}
/* Arabic content blocks that were written for RTL pages */
html[lang=ar] .scn .sw{padding:5px 12px 5px 6px}
html[lang=ar] .scn .sw.on em.tk::after{transform:translateX(-16px)}
html[lang=ar] .lzr .cr.a{border-right:3px solid var(--pr);border-left:0;border-top-left-radius:0;border-top-right-radius:14px}
html[lang=ar] .lzr .cr.b{border-left:3px solid var(--pr);border-right:0;border-top-right-radius:0;border-top-left-radius:14px}
html[lang=ar] .lzr .cr.c{border-right:3px solid var(--pr);border-left:0;border-bottom-left-radius:0;border-bottom-right-radius:14px}
html[lang=ar] .lzr .cr.d{border-left:3px solid var(--pr);border-right:0;border-bottom-right-radius:0;border-bottom-left-radius:14px}
html[lang=ar] body{font-family:"Segoe UI","Noto Sans Arabic","Noto Kufi Arabic",Tahoma,system-ui,sans-serif}

/* ===================== PASS 8: fixes (bottom space, pull-down, live remaining bar) ===================== */
html,body{overscroll-behavior:none!important;overscroll-behavior-y:none!important}
main{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))!important}
.fab{bottom:calc(20px + env(safe-area-inset-bottom,0px))!important}
.rmb{position:sticky;bottom:0;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;padding:12px 18px;border-radius:12px;background:var(--c2);border:1.5px solid var(--pr);color:var(--t);font-weight:700;box-shadow:0 -10px 20px -12px rgba(0,0,0,.4)}
.rmb .rl{font-size:14px;color:var(--m)}
.rmb .rv{display:flex;align-items:baseline;gap:8px}
.rmb b{font-size:34px;line-height:1;color:var(--pr);font-variant-numeric:tabular-nums}
.rmb small{font-size:14px;color:var(--m);font-weight:600}
.rmb.z{border-color:var(--ok)}.rmb.z b{color:var(--ok)}
.rmb.o{border-color:var(--er)}.rmb.o b{color:var(--er)}
#mdc input{scroll-margin-bottom:110px}

/* ===================== PASS 9: Login page & text boxes ===================== */
/* All text boxes */
input:not([type=checkbox]){min-height:52px;padding:13px 15px;font-size:16px;color:var(--t);background-color:var(--ip);border:1px solid var(--b);border-radius:10px;box-shadow:none;transition:border-color .15s,box-shadow .15s,background-color .15s}
input:not([type=checkbox])::placeholder{color:var(--m);opacity:.6}
input:not([type=checkbox]):hover{border-color:color-mix(in srgb,var(--pr) 45%,var(--b))}
input:not([type=checkbox]):focus{border-color:var(--pr);background-color:var(--cd);box-shadow:0 0 0 3px color-mix(in srgb,var(--pr) 18%,transparent)}
input:not([type=checkbox]):disabled{opacity:.5;background-color:var(--c2)}
input[type=number]{-moz-appearance:textfield;appearance:textfield;font-size:20px;font-weight:700;letter-spacing:.5px}
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
label{display:block;margin:0 2px 4px;font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--m)}
label.ck{display:flex;color:var(--t);font-size:15px;font-weight:600}

/* Login page */
#lgn{padding:20px;background:var(--bg)}
#lgn .lb{max-width:400px;padding:36px 28px 28px;background:var(--cd);border:1px solid var(--b);border-radius:16px;box-shadow:0 18px 44px -28px rgba(15,40,38,.45)}
#lgn .lm{width:76px;height:76px;margin:0 auto 16px;border-radius:18px;box-shadow:none}
#lgn h2{margin:0 0 28px;font-size:24px;font-weight:800;letter-spacing:5px;color:var(--t);text-align:center}
#lgn h2::after{content:"ALSHEHSBI.COM";display:block;margin-top:8px;font-size:11px;font-weight:600;letter-spacing:2.5px;color:var(--m)}
#lgn label{margin-top:0}
#lgn .fld{position:relative;margin:0 0 18px}
#lgn .fld input{margin:0;padding-inline-start:48px;background-repeat:no-repeat;background-position:15px center;background-size:20px}
#lgn .fld.u input{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238796a0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7'/%3E%3C/svg%3E")}
#lgn .fld.p input{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238796a0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2.5'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");padding-inline-end:52px}
#lgn .eye{position:absolute;inset-inline-end:6px;top:6px;width:40px;height:40px;min-height:0;padding:0;border:0;border-radius:8px;background:transparent;color:var(--m);box-shadow:none;filter:none;transform:none;display:grid;place-items:center}
#lgn .eye::before{content:"";width:22px;height:22px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center/contain no-repeat}
#lgn .eye.on::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l18 18M10.6 5.1A10 10 0 0 1 12 5c6.4 0 10 7 10 7a17 17 0 0 1-3.2 4.1M6.6 6.6C3.8 8.4 2 12 2 12s3.6 7 10 7c1.6 0 3-.4 4.3-1M9.9 9.9a3 3 0 0 0 4.2 4.2'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l18 18M10.6 5.1A10 10 0 0 1 12 5c6.4 0 10 7 10 7a17 17 0 0 1-3.2 4.1M6.6 6.6C3.8 8.4 2 12 2 12s3.6 7 10 7c1.6 0 3-.4 4.3-1M9.9 9.9a3 3 0 0 0 4.2 4.2'/%3E%3C/svg%3E")}
#lgn .eye:hover{background:var(--c2);filter:none;transform:none;color:var(--t)}
#lgn .er{min-height:20px;margin:-6px 0 12px;font-size:14px;font-weight:600;color:var(--er);text-align:center}
#lgn #lb{width:100%;min-height:54px;margin-top:2px;font-size:16px}
@media (max-width:380px){#lgn .lb{padding:28px 18px 22px}#lgn h2{font-size:21px;letter-spacing:4px}}

/* ===================== PASS 10: restore normal touch scrolling ===================== */
html{height:auto;overflow-y:auto!important;overflow-x:clip}
body{height:auto;overflow:visible!important;overflow-x:clip!important}
html,body{touch-action:pan-x pan-y!important}
main{overflow:visible}

/* ===================== PASS 11: website address ===================== */
#sub{display:block;font-size:11px;font-weight:600;letter-spacing:.8px;color:var(--m);white-space:nowrap;direction:ltr;text-align:start;unicode-bidi:isolate}
#lgn h2::after{letter-spacing:2px}

/* ===== compact, tidy "Seite" card ===== */
.sx{margin-top:8px!important;padding:10px 12px!important}
.sx .top{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;align-items:stretch!important}
.sx .pb,.sx .big{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:0!important;width:auto!important;min-width:0!important;padding:8px 6px!important;text-align:center!important;box-shadow:none!important}
.sx .big{background:transparent!important;border:1px solid var(--b)!important}
.sx .pb small,.sx .big small{display:block!important;font-size:12px!important;line-height:1.2!important;margin:0 0 2px!important}
.sx .pb b,.sx .big b{display:block!important;font-size:34px!important;line-height:1.1!important}
.sx .big em{display:block!important;font-size:11px!important;margin:0!important}
.sx .bnr{margin:8px 0 0!important;padding:8px 10px!important;font-size:12px!important;line-height:1.4!important}
.sx label{margin-top:8px!important}
.sx input:not([type=checkbox]){padding:8px 10px!important;margin:2px 0 6px!important}
.sx button{padding:9px 12px!important}

/* ===== remaining-cartons counter: number only, right screen edge, transparent, only while typing a count ===== */
.rmb{display:none!important;position:fixed!important;right:4px!important;top:50%!important;bottom:auto!important;transform:translateY(-50%)!important;margin:0!important;width:auto!important;height:auto!important;min-width:0!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important;pointer-events:none!important;z-index:60!important}
.rmb[data-on="1"]{display:flex!important}
.rmb .rl,.rmb small{display:none!important}
.rmb .rv{gap:0!important}
.rmb b{font-size:24px!important;font-weight:900;text-shadow:0 0 4px var(--bg),0 0 8px var(--bg)}