*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{--bg:#f4f5fb;--sf:#fff;--bd:#e5e7f0;--tx:#111827;--mt:#6b7280;--pr:#4f46e5;--ok:#10b981;--er:#ef4444;--ft:#f1f2f9;--tl:93%;--tf:40%;--sh:0 1px 2px rgba(17,24,39,.05)}
@media(prefers-color-scheme:dark){:root{--bg:#0e1118;--sf:#171b26;--bd:#272c3a;--tx:#e8eaf2;--mt:#8b93a7;--pr:#818cf8;--ft:#1f2433;--tl:24%;--tf:80%;--sh:none}}
html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--tx);overscroll-behavior:none}
body{font-family:system-ui,-apple-system,"Segoe UI",Tahoma,Arial,sans-serif;font-size:14px;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased;padding-bottom:env(safe-area-inset-bottom)}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit;touch-action:manipulation}
input,select{font:inherit;color:inherit}
svg{width:16px;height:16px;flex-shrink:0}
[hidden]{display:none!important}
/* header */
.hd{display:flex;align-items:center;gap:6px;padding:3px 8px;padding-top:calc(3px + env(safe-area-inset-top));background:var(--sf);border-bottom:1px solid var(--bd);flex-shrink:0;z-index:30}
.ib{width:28px;height:28px;border-radius:8px;background:var(--ft);color:var(--mt);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .1s,background .15s}
.ib:active{transform:scale(.9)}
.ib.pr{background:var(--pr);color:#fff}
.ib.spin svg{animation:sp .8s linear infinite}
.br{display:flex;align-items:center;gap:7px;min-width:0}
.lg{width:24px;height:24px;border-radius:7px;background:var(--ft);color:var(--tx);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.lg svg{width:13px;height:13px}
.br b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tools{width:100%;max-width:1200px;margin:0 auto;padding:10px 10px 0;flex-shrink:0}
.sb{display:flex;align-items:center;gap:8px;height:40px;padding:0 12px;border-radius:12px;background:var(--sf);border:1.5px solid var(--bd);color:var(--mt);margin-bottom:8px;transition:border-color .15s}
.sb:focus-within{border-color:var(--pr)}
.sb input{flex:1;min-width:0;border:0;outline:0;background:none;font-size:14px}
.sb .cl{width:20px;height:20px;border-radius:50%;background:var(--bd);font-size:14px;line-height:1;color:var(--mt)}
.sp{flex:1}
.ha{display:flex;gap:4px;margin-inline-start:auto}
body:not([data-v=portal]) .op,body:not([data-v=app]) .oa,body:not([data-v=admin]) .od{display:none!important}
@media(min-width:640px){.hd{padding-inline:12px}}
/* views */
.vw{display:none;flex:1;min-height:0;flex-direction:column}
.vw.on{display:flex;animation:fi .16s ease}
@keyframes fi{from{opacity:.5}}
@keyframes sp{to{transform:rotate(360deg)}}
.sc{flex:1;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:10px;width:100%;max-width:1200px;margin:0 auto}
.cats{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:8px}
.cats::-webkit-scrollbar{display:none}
.pill{padding:5px 12px;border-radius:99px;background:var(--sf);border:1px solid var(--bd);color:var(--mt);font-size:12px;font-weight:600;white-space:nowrap;flex-shrink:0}
.pill small{opacity:.65;margin-inline-start:4px;font-size:10px}
.pill.sel{background:var(--pr);border-color:var(--pr);color:#fff}
/* tiles & cards */
.ti{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;background:hsl(var(--h,230) 80% var(--tl));color:hsl(var(--h,230) 55% var(--tf))}
.ti svg{width:20px;height:20px}
.ti img{width:100%;height:100%;object-fit:contain;background:#fff}
.gr{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.cd{position:relative;display:flex;align-items:center;gap:11px;padding:10px 12px;background:var(--sf);border:1px solid var(--bd);border-radius:14px;text-align:right;box-shadow:var(--sh);content-visibility:auto;contain-intrinsic-size:auto 62px;transition:transform .12s,box-shadow .12s,border-color .12s}
.cd:active{transform:scale(.98)}
@media(hover:hover){.cd:hover{transform:translateY(-2px);border-color:var(--pr);box-shadow:0 8px 20px rgba(79,70,229,.12)}}
.st{width:26px;height:26px;display:flex;align-items:center;justify-content:center;color:var(--bd);border-radius:8px;flex-shrink:0}
.st.on{color:#f59e0b}.st.on svg{fill:currentColor}
@media(hover:hover){.st:hover{color:#f59e0b}}
.gr.compact .st{position:absolute;top:2px;left:2px;width:22px;height:22px}
.ct{min-width:0;flex:1}
.ct b{display:block;font-size:13.5px;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ls{display:block;font-size:10.5px;color:var(--mt);margin-top:2px;opacity:.85}
.gr.compact .ls{font-size:9.5px}
.ct p{font-size:11.5px;color:var(--mt);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gr.list{grid-template-columns:1fr;gap:5px}
.gr.list .cd{padding:7px 12px;border-radius:12px}
.gr.list .ti{width:34px;height:34px;border-radius:10px}
.gr.compact{grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.gr.compact .cd{flex-direction:column;gap:6px;padding:12px 6px 9px;text-align:center}
.gr.compact .ct{width:100%;flex:none}
.gr.compact .ct b{font-size:11.5px;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.gr.compact .ct p{display:none}
@media(max-width:640px){.gr.compact{grid-template-columns:repeat(3,1fr)}.gr.list .ct p{display:none}}
.msg{grid-column:1/-1;text-align:center;padding:48px 20px;color:var(--mt);font-size:13px}
.msg b{display:block;color:var(--tx);font-size:14px;margin-bottom:4px}
.msg button{margin-top:12px;padding:7px 18px;border-radius:8px;background:var(--pr);color:#fff;font-weight:700}
.sk{height:62px;border-radius:14px;background:linear-gradient(90deg,var(--ft) 25%,var(--bd) 50%,var(--ft) 75%);background-size:200% 100%;animation:sh 1.3s linear infinite}
@keyframes sh{to{background-position:-200% 0}}
/* app */
#stack{flex:1;position:relative;min-height:0}
#stack iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff;visibility:hidden;pointer-events:none}
#stack iframe.show{visibility:visible;pointer-events:auto}
#ld{position:absolute;inset:0;z-index:5;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--mt);font-size:13px;font-weight:600;pointer-events:none}
.spn{width:34px;height:34px;border:3px solid var(--bd);border-top-color:var(--pr);border-radius:50%;animation:sp .7s linear infinite}
/* admin */
.pn{background:var(--sf);border:1px solid var(--bd);border-radius:14px;overflow:hidden}
.ph{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--bd)}
.bt{display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:7px 13px;border-radius:9px;font-weight:700;font-size:12.5px;background:var(--ft);color:var(--tx);position:relative}
.bt:active{opacity:.7}
.bt.pr{background:var(--pr);color:#fff}.bt.dg{background:var(--er);color:#fff}
.bt.ld{color:transparent!important;pointer-events:none}
.bt.ld::after{content:"";position:absolute;width:15px;height:15px;border:2px solid #fff;border-top-color:transparent;border-radius:50%;animation:sp .7s linear infinite}
.rw{display:flex;align-items:center;gap:9px;padding:8px 12px;border-bottom:1px solid var(--bd)}
.rw:last-child{border:0}
.rw .ti{width:34px;height:34px;border-radius:10px}
.rm{flex:1;min-width:0}
.rm b{display:flex;align-items:center;font-size:13px}
.rm b span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rm small{display:block;font-size:10.5px;color:var(--mt);direction:ltr;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gh{width:22px;height:34px;color:var(--mt);touch-action:none;cursor:grab;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-inline-end:-4px;border-radius:6px}
.gh:active{cursor:grabbing;color:var(--pr)}
#list{user-select:none;-webkit-user-select:none}
.rw.drag{background:var(--ft);box-shadow:0 8px 22px rgba(0,0,0,.22);position:relative;z-index:2;border-radius:12px;opacity:.95}
.ex{font-style:normal;color:var(--mt);margin-inline-start:5px;font-size:12px}
.cd[data-x] .ct b::after{content:" ↗";color:var(--mt);font-weight:400}
#vApp{position:relative}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
.stats button{background:var(--sf);border:1.5px solid var(--bd);border-radius:12px;padding:7px;font-size:11.5px;color:var(--mt);text-align:center;transition:border-color .15s}
.stats button b{display:block;font-size:19px;line-height:1.2;color:var(--tx)}
.stats button.sel{border-color:var(--pr);background:var(--ft)}
.ph .sb{flex:1;margin:0;height:34px;border-radius:10px;background:var(--ft);border-color:transparent}
.ph .sb input{font-size:13px}
.rw.dim .ti,.rw.dim .rm{opacity:.45}
.ud{display:flex;flex-direction:column;gap:2px}
.ra .ud button{width:26px;height:13px;font-size:8px;border-radius:5px}
.rw .sw input{width:30px;height:18px}.rw .sw input::after{width:14px;height:14px}.rw .sw input:checked::after{transform:translateX(-12px)}
.cc{font-size:11px;color:var(--mt);background:var(--ft);padding:2px 8px;border-radius:99px;white-space:nowrap}
.ra{display:flex;gap:3px}
.ra button{width:28px;height:28px;border-radius:8px;background:var(--ft);color:var(--mt);font-size:10px;display:flex;align-items:center;justify-content:center}
.ra button:active{opacity:.6}.ra button.x:active{background:var(--er);color:#fff}
@media(max-width:640px){.cc{display:none}.ra button{width:26px;height:26px}.ra{gap:2px}}
/* modals */
.mo{position:fixed;inset:0;z-index:100;background:rgba(10,12,22,.6);display:flex;align-items:center;justify-content:center;padding:12px;animation:fi .15s}
.mc{position:relative;background:var(--sf);border-radius:18px;padding:16px;width:100%;max-width:520px;max-height:100dvh;overflow-y:auto;box-shadow:0 20px 50px rgba(0,0,0,.3);animation:up .2s cubic-bezier(.3,1.3,.5,1)}
.mc.sm{max-width:340px}
@keyframes up{from{opacity:0;transform:translateY(14px) scale(.97)}}
.mt{font-size:15px;font-weight:800;margin-bottom:10px;padding-inline-end:34px}
.x{position:absolute;top:10px;left:10px}
.fg{margin-bottom:9px}
.fl{display:block;font-size:11px;font-weight:700;color:var(--mt);margin-bottom:3px}
.in{width:100%;height:36px;padding:0 10px;border:1.5px solid var(--bd);border-radius:10px;background:var(--ft);outline:0;font-size:13px;transition:border-color .15s}
.in:focus{border-color:var(--pr);background:var(--sf)}
.r2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ltr{direction:ltr;text-align:left}
.pwb{position:relative}.pwb .in{padding-left:42px}.pwb .ib{position:absolute;left:4px;top:4px;background:none}
.ics{background:var(--ft);border-radius:12px;padding:8px;margin-bottom:9px}
.ict{display:flex;align-items:center;gap:7px;margin-bottom:7px}
.ict .ti{width:34px;height:34px;border-radius:10px}
.seg{display:flex;background:var(--bd);border-radius:9px;padding:2px;flex-shrink:0}
.seg button{padding:5px 10px;border-radius:7px;font-size:11.5px;font-weight:700;color:var(--mt)}
.seg button.sel{background:var(--sf);color:var(--pr);box-shadow:var(--sh)}
.ict .in{height:30px;font-size:12px;flex:1;min-width:0;background:var(--sf)}
.ia{height:112px}
#ig{height:100%;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(36px,1fr));gap:4px;align-content:start;overscroll-behavior:contain}
.ip{aspect-ratio:1;border-radius:9px;background:var(--sf);color:var(--mt);display:flex;align-items:center;justify-content:center;border:1.5px solid transparent}
.ip.sel{background:var(--pr);color:#fff}
#imf{height:100%;display:flex;flex-direction:column;gap:6px;justify-content:center}
#imf .in{background:var(--sf)}
#imf input[type=file]{padding-top:6px;font-size:12px}
.fb{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.sw{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;white-space:nowrap;cursor:pointer}
.sw input{appearance:none;width:34px;height:20px;border-radius:99px;background:var(--bd);position:relative;transition:background .15s;cursor:pointer;flex-shrink:0}
.sw input::after{content:"";position:absolute;top:2px;right:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .15s}
.sw input:checked{background:var(--ok)}.sw input:checked::after{transform:translateX(-14px)}
.fe{display:none;background:rgba(239,68,68,.12);color:var(--er);padding:7px 10px;border-radius:9px;font-size:12px;font-weight:700;margin-bottom:8px}
.ac{display:flex;gap:8px}.ac .bt{flex:1;height:38px}
.ac .bt:last-child{flex:2}
@media(max-width:640px){.mo{align-items:flex-end;padding:0}.mc{border-radius:20px 20px 0 0;padding-bottom:calc(14px + env(safe-area-inset-bottom))}}
@media(max-height:520px) and (min-width:560px){
 .mc.fm{max-width:720px}
 #af{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;grid-template-areas:"a b""c b""d b"}
 .f1{grid-area:a}.f2{grid-area:b}.f3{grid-area:c}.ac{grid-area:d;align-self:end}.fe{grid-column:1/-1}
 .ia{height:140px}}
#toast{position:fixed;bottom:calc(20px + env(safe-area-inset-bottom));left:50%;transform:translate(-50%,10px);background:rgba(17,24,39,.94);color:#fff;padding:8px 16px;border-radius:99px;font-size:12.5px;font-weight:600;z-index:999;opacity:0;pointer-events:none;transition:.2s}
#toast.show{opacity:1;transform:translate(-50%,0)}
button:focus-visible,.in:focus-visible{outline:2px solid var(--pr);outline-offset:1px}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ═══ نسخة مريحة للعين: تباين أوضح، أحجام أكبر، ألوان أهدأ ═══ */
:root{--bg:#eceff5;--bd:#cfd5e3;--tx:#0f172a;--mt:#4b5565;--tl:92%;--tf:30%;--ln:#047857;--lh:#1d4ed8;--ld:#b45309;--lo:#6b7280}
@media(prefers-color-scheme:dark){:root{--bg:#12151d;--sf:#1b1f2b;--ft:#242938;--bd:#333a4e;--tx:#e4e7f0;--mt:#a3abbf;--tl:26%;--tf:80%;--ln:#4ade80;--lh:#7db4ff;--ld:#fbbf24;--lo:#9ca3af}}
body{font-size:15px;line-height:1.5}
.ti{background:hsl(var(--h,230) 50% var(--tl));color:hsl(var(--h,230) 55% var(--tf))}
.cd{padding:12px 14px;border-color:var(--bd);gap:12px}
.ti{width:44px;height:44px}
.ct b{font-size:15px;font-weight:700}
.ct p{font-size:12.5px;margin-top:2px}
@media(hover:hover){.cd:hover{transform:none;box-shadow:0 2px 10px rgba(79,70,229,.14)}}
.gr.list .ti{width:38px;height:38px}
.gr.compact .ct b{font-size:12.5px}
.gr.compact .ti{width:42px;height:42px}
.st{color:#aab1c2}
.ls{font-size:12px;font-weight:600;opacity:1;margin-top:3px}
.ls::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:currentColor;margin-inline-end:5px;vertical-align:1px}
.l-n{color:var(--ln)}.l-h{color:var(--lh)}.l-d{color:var(--ld)}.l-o{color:var(--lo)}
.gr.compact .ls{font-size:11px}
.sb{height:46px;border-color:var(--bd)}.sb input{font-size:15px}
.pill{padding:7px 15px;font-size:13px;border-color:var(--bd)}
.br b{font-size:14px}
.msg{font-size:14px}
.in{height:44px;font-size:14.5px;border-color:var(--bd)}
.in:focus{box-shadow:0 0 0 3px rgba(99,102,241,.2)}
.fl{font-size:12px}
.mt{font-size:16px}
.ict .in{height:34px;font-size:13px}
.sw{font-size:13px}
.bt{padding:9px 15px;font-size:13.5px;min-height:38px}
.ac .bt{height:46px;font-size:14px}
.ph .sb{height:40px}
.stats button{font-size:12.5px;padding:8px;border-color:var(--bd)}
.stats button b{font-size:20px}
.rw{padding:10px 12px}
.rw .ti{width:38px;height:38px}
.rm b{font-size:14px}
.rm small{font-size:11.5px}
.cc{font-size:12px}
.ra button{width:30px;height:30px}
@media(max-width:640px){.ra button{width:28px;height:28px}.ra{gap:2px}}
#bn{display:flex;align-items:center;gap:8px;width:calc(100% - 20px);max-width:1180px;margin:0 auto 6px;background:#fef3c7;color:#78350f;padding:8px 12px;border-radius:10px;font-size:12.5px;line-height:1.6}
#bn span{flex:1}#bn button{padding:3px 10px;border-radius:7px;background:rgba(0,0,0,.1);font-weight:700;font-size:12px}
@media(prefers-color-scheme:dark){#bn{background:#3a2e10;color:#fcd34d}#bn button{background:rgba(255,255,255,.12)}}
.hd{box-shadow:0 1px 8px rgba(15,23,42,.07)}
.cd{border-radius:16px;box-shadow:0 1px 3px rgba(15,23,42,.06)}
.cd:active{transform:scale(.985);background:var(--ft)}
.ti{border-radius:13px;box-shadow:inset 0 0 0 1px hsl(var(--h,230) 45% 50%/.14)}
.pill{box-shadow:var(--sh);transition:background .15s,color .15s}
.pill.sel{box-shadow:0 3px 10px rgba(79,70,229,.32)}
.sb{box-shadow:var(--sh)}
.pn{overflow:hidden;overflow:clip;border-radius:16px}
.pn .ph{position:sticky;top:0;z-index:3;background:var(--sf);padding:10px 12px}
.rw{cursor:pointer;content-visibility:auto;contain-intrinsic-size:auto 58px;transition:background .12s}
.rw.drag{content-visibility:visible}
@media(hover:hover){.rw:hover{background:var(--ft)}}
.rw:active{background:var(--ft)}
.cc{background:hsl(var(--h,230) 50% var(--tl));color:hsl(var(--h,230) 55% var(--tf));font-weight:600}
.stats button{border-radius:14px;box-shadow:var(--sh)}
.stats button.sel{box-shadow:0 0 0 2px var(--pr)}
.mc{border-radius:20px}
.mt{letter-spacing:.2px}
.msg{padding:56px 20px}
.msg b{font-size:15px}
.lk{display:block;margin:2px auto 12px;font-size:12.5px;font-weight:700;color:var(--pr);text-decoration:underline;text-underline-offset:3px}
.hn{font-size:12.5px;color:var(--mt);line-height:1.8;margin-bottom:10px}
.cdi{letter-spacing:8px;text-align:center;font-size:20px;font-weight:800;direction:ltr}

#bInst{background:var(--pr);color:#fff}
@media(display-mode:standalone){#bInst{display:none!important}}