/* cust.css — customer app v2 (RASD navy/gold palette). Loaded only by index.html, after style.css */
body.cust{--t1:#1b5566;--t2:#1b5566;--t3:#0d2c3a;--tl:#F7F3EA;--tl2:#efe2c9;--teal:#1b5566;--navy:#0d2c3a;--ink:#0d2c3a;--muted:#5f7780;--line:#ebe4d6;--bg:#F7F3EA;--gold:#d9b07a;--gold3:#b0844c;
  --sh:0 6px 18px rgba(13,44,58,.08);background:var(--bg);color:var(--ink)}
.cust .ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
.cust .demo{background:#0d2c3a;color:#d9b07a;font-weight:500;font-size:12px;padding:3px 8px}
.cust .btn.gold{background:var(--t3);color:#fff;box-shadow:inset 0 -3px 0 #d9b07a}
.cust .btn.gold:hover{background:var(--t1)}
.cust .btn.wa{background:#fff;color:var(--t3)}
.cust .btn.line{color:var(--t3)}
.cust .btn svg{width:20px;height:20px}
.cust .wrap{max-width:560px;margin:0 auto;padding:0 16px 120px}
.cust .wrap.sub{padding-top:14px;padding-bottom:40px}
.cust .wrap.tab{padding-top:14px}
.cust :focus-visible{outline:3px solid #d9b07a;outline-offset:2px}

/* header buttons */
.hbtn{position:relative;flex:none;width:42px;height:42px;border-radius:14px;border:0;background:rgba(255,255,255,.16);color:#fff;display:grid;place-items:center;cursor:pointer}
.hbtn svg{width:24px;height:24px}
.hbtn .badge{background:#d9b07a;color:#0d2c3a;top:-5px;left:-5px}

/* home header */
.hd{background:linear-gradient(160deg,#1b5566 0%,#14435a 40%,#0d2c3a 100%);color:#fff;padding:12px 16px 58px;border-radius:0 0 30px 30px;position:relative;overflow:hidden}
.hd:before{content:"";position:absolute;width:240px;height:240px;border-radius:50%;background:rgba(217,176,122,.10);left:-80px;top:-110px}
.hd:after{content:"";position:absolute;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,.06);right:-50px;bottom:-70px}
.hd-in{max-width:560px;margin:0 auto;position:relative;z-index:1}
.hd-top{display:flex;align-items:center;gap:10px}
.hd-brand{flex:1;text-align:center;font-weight:800;font-size:18px;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hd-user{display:flex;align-items:center;gap:12px;margin-top:16px;min-width:0}
.avatar{flex:none;width:54px;height:54px;border-radius:50%;background:#fff;color:var(--t3);display:grid;place-items:center;font-weight:800;font-size:22px;text-decoration:none;box-shadow:0 0 0 3px #d9b07a}
.avatar.lg{width:64px;height:64px;font-size:26px}
.avatar.xl{width:84px;height:84px;font-size:34px;box-shadow:0 0 0 4px var(--tl2)}
.hd-id{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.hd-name{font-size:19px;font-weight:800;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hd-id small{font-size:13.5px;opacity:.9;line-height:1.3}
.hd-bal{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:16px;padding-top:14px;border-top:1px solid rgba(217,176,122,.35)}
.hd-bal-l{min-width:0;flex:1}
.hd-bal .lbl{display:block;font-size:14px;font-weight:700;opacity:.92;line-height:1.2}
.hd-bal .amt{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;line-height:1.15;margin-top:4px}
.hd-bal .amt b{font-size:34px;font-weight:800;color:#d9b07a;direction:ltr;unicode-bidi:isolate;letter-spacing:.3px}
.hd-bal .cur{font-size:15px;font-weight:500;opacity:.92}
.eye{border:0;background:none;color:#fff;opacity:.85;padding:4px;cursor:pointer;align-self:center}
.eye svg{width:20px;height:20px}
.rld{border:1px solid rgba(217,176,122,.55);background:rgba(255,255,255,.08);color:#d9b07a;border-radius:50%;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;padding:0;cursor:pointer;align-self:center;margin-inline-start:6px}
.rld svg{width:19px;height:19px}
.rld.spin svg{animation:rldspin .8s linear infinite}
@keyframes rldspin{to{transform:rotate(360deg)}}
.rld:active{opacity:.6}
.topup-pill{flex:none;display:inline-flex;align-items:center;gap:4px;background:#fff;color:var(--t3);font-weight:800;text-decoration:none;padding:7px 13px;border:2px solid #d9b07a;border-radius:22px;font-size:15px;box-shadow:0 4px 14px rgba(0,0,0,.12)}
.topup-pill svg{width:18px;height:18px;color:var(--gold3)}

/* announcement card */
.ann{display:flex;align-items:center;gap:12px;background:#fff;border-radius:20px;padding:13px 14px;margin-top:-34px;position:relative;z-index:2;box-shadow:0 10px 26px rgba(13,44,58,.12)}
.annic{flex:none;width:40px;height:40px;border-radius:12px;background:#0d2c3a;color:#d9b07a;display:grid;place-items:center}
.annic svg{width:22px;height:22px}
.ann p{margin:0;font-weight:700;font-size:15px;line-height:1.45;color:var(--ink)}
.home .ann + .pendline,.home .pendline:first-child{margin-top:10px}
.home > .favsec:first-child{margin-top:-34px;position:relative;z-index:2}
.pendline{display:block;background:#fff6e0;color:#8a5a00;border-radius:14px;padding:9px 12px;font-size:14px;font-weight:700;text-decoration:none;margin-top:10px}

/* section headers */
.sech{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:18px 2px 10px}
.sech h2{margin:0;font-size:17px;font-weight:800;color:var(--ink);border-right:4px solid #d9b07a;padding-right:8px;line-height:1.2}
.lnk{border:0;background:none;color:var(--t1);font-weight:700;font-size:14px;text-decoration:none;cursor:pointer;padding:4px 2px}

/* favourites */
.favsec{background:#fff;border-radius:28px 28px 22px 22px;padding:4px 14px 14px;margin-top:14px;box-shadow:var(--sh)}
.favsec .sech{margin:14px 2px 10px}
.favrow{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 0 2px;margin:0 -4px}
.favrow::-webkit-scrollbar{display:none}
.fav{position:relative;flex:none;width:76px;display:flex;flex-direction:column;align-items:center;gap:6px;border:0;background:none;cursor:pointer;padding:2px 0;color:var(--ink)}
.fav .fc{width:58px;height:58px;border-radius:50%;background:var(--tl);color:var(--t1);display:grid;place-items:center;border:2px solid var(--tl2)}
.fav .fc svg{width:28px;height:28px}
.fav.add .fc{background:#fff;border:2px dashed #d9b07a;color:var(--gold3)}
.fav .fl{font-size:12.5px;font-weight:700;line-height:1.3;text-align:center;max-width:76px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:2.6em}
.fav.add .fl{color:var(--muted);font-weight:500}
.fav .ndot{position:absolute;top:4px;left:12px;width:12px;height:12px;border-radius:50%;border:2px solid #fff}

/* service tiles */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tile{position:relative;background:#fff;border:0;border-radius:18px;box-shadow:var(--sh);padding:16px 6px 13px;min-height:112px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:7px;cursor:pointer;color:var(--ink);text-align:center;transition:transform .08s}
.tile:active{transform:scale(.97)}
.tile .tic{width:46px;height:46px;display:grid;place-items:center;color:var(--t1)}
.tile .tic svg{width:38px;height:38px;stroke-width:1.6}
.tile b{font-size:14.5px;font-weight:800;line-height:1.25}
.tile small{font-size:12px;color:var(--muted);line-height:1.2;margin-top:-4px}
.tile .ndot{position:absolute;top:10px;left:10px;width:10px;height:10px;border-radius:50%}
.tile.soon{cursor:not-allowed;background:#faf8f3;box-shadow:none;border:1.5px dashed #e3dccd}
.tile.soon .tic,.tile.soon b{opacity:.45}
.soonb{position:absolute;top:8px;left:8px;font-style:normal;font-size:11px;font-weight:800;background:#fff1d6;color:#8a5a00;border-radius:10px;padding:1px 7px}

/* lists */
.cust .list{border-radius:18px}
.cust .item .ic{border-radius:14px}
.cust .item .ic.in{background:var(--tl);color:var(--t1);font-size:20px}
.cust .item .ic.out{background:#fdecea;color:#c0392b;font-size:20px}
.cust .chip.st-pending{background:#fff3dc;color:#8a5a00}

/* inner page bar */
.pbar{background:linear-gradient(160deg,#1b5566,#14435a 50%,#0d2c3a);border-bottom:3px solid #d9b07a;color:#fff;padding:10px 16px 14px;border-radius:0 0 22px 22px;position:sticky;top:0;z-index:15;box-shadow:0 6px 16px rgba(13,44,58,.15)}
.pbar-in{max-width:560px;margin:0 auto;display:flex;align-items:center;gap:10px}
.pbar h1{flex:1;margin:0;font-size:19px;font-weight:800;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* statement card */
.cust .balance{background:linear-gradient(140deg,#1b5566,#14435a 50%,#0d2c3a);margin-top:0;border-radius:22px;box-shadow:0 10px 24px rgba(13,44,58,.18)}
.cust .balance:after{background:rgba(255,255,255,.1)}
.cust .balance .amt{color:#d9b07a;direction:ltr;text-align:right;unicode-bidi:plaintext}
.cust .balance .amt span{margin-left:6px;margin-right:0}

/* bottom nav */
.bnav{position:fixed;bottom:0;left:0;right:0;z-index:20;background:#fff;display:flex;justify-content:space-around;padding:6px 4px calc(8px + env(safe-area-inset-bottom));border-radius:22px 22px 0 0;box-shadow:0 -6px 20px rgba(13,44,58,.1)}
.bnav a{flex:1;max-width:96px;display:flex;flex-direction:column;align-items:center;gap:2px;text-decoration:none;color:#8a9aa1;font-size:12px;font-weight:700;padding:2px 0}
.bnav .pill{width:52px;height:32px;border-radius:16px;display:grid;place-items:center;transition:background .15s}
.bnav svg{width:24px;height:24px}
.bnav a.on{color:var(--gold3)}
.bnav a.on .pill{background:#d9b07a;color:#0d2c3a}

/* floating support button */
.fab{position:fixed;left:14px;bottom:calc(84px + env(safe-area-inset-bottom));z-index:19;width:56px;height:56px;border-radius:50%;border:3px solid #d9b07a;background:linear-gradient(150deg,#1b5566,#0d2c3a);color:#fff;display:grid;place-items:center;box-shadow:0 8px 22px rgba(13,44,58,.32);cursor:pointer}
.fab svg{width:27px;height:27px;color:#fff}
@media(min-width:600px){.fab{left:calc(50% - 280px + 14px)}}

/* side drawer */
.drawer-bg{position:fixed;inset:0;z-index:60;background:rgba(13,44,58,.5);animation:fade .15s}
.drawer-bg.out{opacity:0;transition:opacity .18s}
.drawer{position:absolute;top:0;bottom:0;right:0;width:min(84vw,320px);background:#fff;display:flex;flex-direction:column;animation:slin .2s ease-out;box-shadow:-10px 0 30px rgba(0,0,0,.18)}
@keyframes slin{from{transform:translateX(100%)}}
.dhead{background:linear-gradient(160deg,#1b5566,#14435a 50%,#0d2c3a);border-bottom:3px solid #d9b07a;color:#fff;padding:26px 18px 20px;display:flex;flex-direction:column;align-items:flex-start;gap:6px;position:relative}
.dhead b{font-size:19px;font-weight:800;margin-top:6px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dhead small{opacity:.9;font-size:14px}
.dclose{position:absolute;top:14px;left:14px;width:38px;height:38px;border-radius:12px;border:0;background:rgba(255,255,255,.16);color:#fff;display:grid;place-items:center;cursor:pointer}
.dclose svg{width:22px;height:22px}
.dlist{flex:1;overflow:auto;padding:8px 0}
.ditem{width:100%;display:flex;align-items:center;gap:14px;border:0;background:none;padding:14px 20px;font-size:16px;font-weight:700;color:var(--ink);cursor:pointer;text-align:right}
.ditem:hover{background:var(--tl)}
.ditem > svg:first-child{width:24px;height:24px;color:var(--t1);flex:none}
.ditem span{flex:1}
.ditem > svg:last-child:not(:first-child){width:18px;height:18px;color:#a7b4ba}
.ditem.danger{color:#c0392b;border-top:1px solid var(--line);margin-top:6px}
.ditem.danger > svg{color:#c0392b}
.dfoot{padding:14px 20px calc(14px + env(safe-area-inset-bottom));color:var(--muted);font-size:13px;border-top:1px solid var(--line)}

/* account / more */
.profile{background:#fff;border-radius:22px;box-shadow:var(--sh);padding:22px 16px 16px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;margin-bottom:14px}
.pname{font-size:21px;font-weight:800;margin-top:6px}
.pmeta{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px;color:var(--muted);font-size:14px}
.pmeta b{color:var(--ink)}
.pstats{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;margin-top:12px}
.pstats div{background:var(--tl);border-radius:14px;padding:10px}
.pstats small{display:block;color:var(--muted);font-size:12.5px}
.pstats b{font-size:16px;font-weight:800;color:var(--t3)}
.pstats div:first-child b{color:var(--gold3)}
.pstats i{font-style:normal;font-weight:500;font-size:13px}
.list.menu .item.row{width:100%;border:0;border-bottom:1px solid var(--line);background:#fff;text-align:right;cursor:pointer;font:inherit;color:inherit}
.list.menu .item.row:last-child{border-bottom:0}
.ric{flex:none;width:40px;height:40px;border-radius:12px;background:var(--tl);color:var(--t1);display:grid;place-items:center}
.ric svg{width:22px;height:22px}
.list.menu .item.row > svg{width:18px;height:18px;color:#a7b4ba;flex:none}
.list.menu .item.row.danger b{color:#c0392b}
.list.menu .item.row.danger .ric{background:#fdecea;color:#c0392b}

/* favourites picker */
.favpick{display:grid;gap:8px}
.fp{display:flex;align-items:center;gap:12px;border:1.5px solid var(--line);background:#fff;border-radius:14px;padding:10px 12px;cursor:pointer;text-align:right;font-weight:700}
.fp .tic{color:var(--t1);width:30px;height:30px;display:grid;place-items:center}.fp .tic svg{width:26px;height:26px}
.fp .mid{flex:1}
.fp .ck{width:24px;height:24px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;color:transparent}
.fp .ck svg{width:16px;height:16px}
.fp.on{border-color:var(--t1);background:var(--tl)}
.fp.on .ck{background:var(--t1);border-color:var(--t1);color:#fff}

/* auth */
.cust .auth{background:linear-gradient(165deg,#1b5566,#14435a 40%,#0d2c3a)}
.cust .auth .logo small{color:#d9b07a;letter-spacing:0}
.cust .auth a{color:#fff}
.cust .auth .card a{color:var(--t1)!important}
.cust .auth .hint[style*="b9c9cf"]{color:#f3ece0!important}
.cust .code{background:var(--tl);border-color:var(--t1);color:var(--t3)}
.cust .toast{background:var(--t3)}
.cust .toast.bad{background:var(--bad)}
.cust .filebtn{border-color:var(--t1);color:var(--t1);background:#fbf8f1}
.cust .methinfo{background:var(--tl)}
.cust .notif.unread{border-right-color:var(--t1);background:#fbf8f1}
.cust .sheet-bg{background:rgba(13,44,58,.55)}
@media (max-width:350px){.tiles{gap:8px}.tile b{font-size:13.5px}.hd-bal .amt b{font-size:30px}}

/* ---------- v3: bundles screen ---------- */
.bx-mode{display:flex;gap:6px;background:#fff;border-radius:16px;padding:5px;box-shadow:var(--sh);margin-bottom:12px}
.bx-mode a{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 6px;border-radius:12px;font-weight:800;font-size:15px;color:var(--muted);text-decoration:none}
.bx-mode a svg{width:19px;height:19px}
.bx-mode a.on{background:linear-gradient(150deg,#0d2c3a,#1b5566);color:#fff;box-shadow:inset 0 -3px 0 #d9b07a}
.bx-mode a.on svg{color:#d9b07a}
.bx-nets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-bottom:12px}
.bx-nets a{display:flex;align-items:center;justify-content:center;gap:5px;padding:9px 4px;border-radius:12px;background:#fff;border:1.5px solid var(--line);font-weight:800;font-size:13px;color:var(--ink);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.bx-nets a i{flex:none;width:9px;height:9px;border-radius:50%}
.bx-nets a.on{border-color:#d9b07a;background:#fffaf1;box-shadow:0 0 0 2px rgba(217,176,122,.3)}
.bx-num .bx-info{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.bx-info>div{background:var(--bg);border-radius:12px;padding:8px 10px;display:flex;flex-direction:column;gap:2px;min-width:0}
.bx-info span{font-size:12px;color:var(--muted);font-weight:700}
.bx-info b{font-size:15px;font-weight:800;display:flex;align-items:center;gap:6px}
.bx-info b.gold{color:#b0844c}.bx-info b small{font-size:11px}
.bx-info .nd{width:9px;height:9px;border-radius:50%;display:inline-block}
.bx-recent{display:flex;flex-direction:column;gap:8px}
.bx-rc{display:flex;align-items:center;gap:10px;background:#fff;border-radius:14px;padding:10px 12px;box-shadow:var(--sh)}
.rc-ic{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--bg);color:#b0844c}
.rc-ic svg{width:19px;height:19px}
.rc-t{flex:1;min-width:0;display:flex;flex-direction:column}
.rc-t b{font-size:14px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-t small{font-size:12px;color:var(--muted)}
.bx-rc .btn.sm{padding:8px 14px}
.cust .muted{color:var(--muted);font-size:12px;font-weight:700}
.bx-lines{display:flex;gap:6px;flex-wrap:wrap;margin:-2px 0 10px}
.bx-lines button{border:1.5px solid var(--line);background:#fff;border-radius:20px;padding:6px 14px;font:inherit;font-weight:800;font-size:13px;color:var(--muted);cursor:pointer}
.bx-lines button.on{background:#0d2c3a;border-color:#0d2c3a;color:#d9b07a}
.bx-search{position:relative;margin-bottom:10px}
.bx-search svg{position:absolute;right:13px;top:50%;transform:translateY(-50%);width:19px;height:19px;color:var(--muted);pointer-events:none}
.bx-search .in{padding-right:40px}
.acc{margin-bottom:10px;border-radius:16px;background:#fff;box-shadow:var(--sh);overflow:hidden}
.acc-h{width:100%;display:flex;align-items:center;gap:10px;border:0;cursor:pointer;font:inherit;text-align:right;padding:11px 12px;background:linear-gradient(150deg,#0d2c3a 0%,#1b5566 100%);color:#fff}
.acc-ic{flex:none;width:34px;height:34px;border-radius:10px;background:#d9b07a;color:#0d2c3a;display:grid;place-items:center}
.acc-ic svg{width:19px;height:19px}
.acc-t{flex:1;min-width:0;font-weight:800;font-size:16px}
.acc-n{flex:none;background:rgba(217,176,122,.22);color:#f1d9b3;border-radius:20px;padding:2px 9px;font-size:12px;font-weight:800}
.acc-ch{flex:none;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.14);display:grid;place-items:center;transition:transform .2s}
.acc-ch svg{width:18px;height:18px}
.acc.open .acc-ch{transform:rotate(180deg)}
.acc-b{padding:0 10px}
.acc.open .acc-b,.acc>.acc-b{padding:10px 10px 2px;background:#fbf8f2}
.sheet .bcard{cursor:default;margin-top:4px}
.sheet .bcard:active{transform:none}

/* ---------- v4: welcome / login landing ---------- */
.welcome{position:relative;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;color:#fff;overflow:hidden;
  background:radial-gradient(120% 60% at 50% 0%,rgba(217,176,122,.16),transparent 60%),linear-gradient(170deg,#1b5566 0%,#14435a 42%,#0d2c3a 100%);
  padding:calc(env(safe-area-inset-top) + 34px) 22px 0}
.welcome::before{content:"";position:absolute;inset:auto -30% 18% -30%;height:220px;border-radius:50%;background:rgba(255,255,255,.035);pointer-events:none}
.wkebab{position:absolute;top:calc(env(safe-area-inset-top) + 12px);left:12px;width:44px;height:44px;border-radius:14px;border:0;background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center;cursor:pointer}
.wkebab svg{width:22px;height:22px}
.wtop{display:flex;flex-direction:column;align-items:center;text-align:center;width:100%;max-width:380px}
.wbadge{width:124px;height:124px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 0 0 5px rgba(217,176,122,.55),0 14px 34px rgba(0,0,0,.35);margin-top:8px}
.wbadge img{width:92px;height:92px;border-radius:24px;object-fit:cover}
.wname{margin:22px 0 0;font-size:25px;line-height:1.45;font-weight:800;color:#fff}
.wname span{white-space:nowrap}
.wtop::after{content:"";display:block;width:64px;height:3px;border-radius:3px;background:#d9b07a;margin-top:12px}
.wbtns{width:100%;max-width:380px;display:flex;flex-direction:column;gap:14px;margin-top:30px}
.wbtn{display:flex;align-items:center;justify-content:center;height:58px;border-radius:18px;font-size:20px;font-weight:800;text-decoration:none;transition:transform .08s}
.wbtn:active{transform:scale(.98)}
.wbtn.fill{background:#fff;color:#0d2c3a;box-shadow:0 8px 22px rgba(0,0,0,.22),inset 0 -3px 0 #d9b07a}
.wbtn.out{border:2px solid #fff;color:#fff;background:rgba(255,255,255,.04)}
.wbio{display:flex;flex-direction:column;align-items:center;margin-top:30px;width:100%;max-width:380px}
.wbio-t{display:flex;align-items:center;gap:12px;width:100%;color:#f3ece0;font-weight:700;font-size:15px}
.wbio-t::before,.wbio-t::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.22)}
.wfinger{width:96px;height:96px;border-radius:50%;border:2px solid rgba(217,176,122,.75);background:rgba(255,255,255,.07);color:#d9b07a;display:grid;place-items:center;cursor:pointer;margin-top:16px;transition:transform .1s,background .2s}
.wfinger svg{width:58px;height:58px}
.wfinger:active{transform:scale(.95);background:rgba(217,176,122,.18)}
.wfinger.busy{animation:wpulse 1s ease-in-out infinite}
@keyframes wpulse{50%{box-shadow:0 0 0 10px rgba(217,176,122,.18)}}
.wbio>b{margin-top:8px;font-size:17px;font-weight:800}
.wpills{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:26px 0 22px;width:100%;max-width:380px}
.wpill{display:inline-flex;align-items:center;gap:7px;padding:10px 16px;border-radius:999px;border:1.5px solid rgba(255,255,255,.55);background:rgba(255,255,255,.1);color:#fff!important;font:inherit;font-weight:700;font-size:14.5px;text-decoration:none;cursor:pointer}
.wpill svg{width:19px;height:19px;color:#d9b07a;flex:none}
.wpill b{color:#d9b07a;font-weight:800}
.wfoot{margin-top:auto;width:calc(100% + 44px);background:rgba(4,20,28,.55);border-top:2px solid #d9b07a;color:#d9b07a;text-align:center;font-weight:800;font-size:13.5px;letter-spacing:.2px;
  padding:12px 10px calc(12px + env(safe-area-inset-bottom))}
@media (max-height:700px){.welcome{padding-top:calc(env(safe-area-inset-top) + 20px)}.wbadge{width:104px;height:104px}.wbadge img{width:76px;height:76px}.wbtns{margin-top:22px}.wbio{margin-top:20px}.wfinger{width:84px;height:84px}}
/* ⋮ dropdown */
.wmenu-bg{position:fixed;inset:0;z-index:60;background:rgba(4,20,28,.25);animation:fade .15s}
.wmenu{position:absolute;top:calc(env(safe-area-inset-top) + 60px);left:12px;min-width:210px;background:#fff;border-radius:16px;box-shadow:0 14px 40px rgba(0,0,0,.3);padding:6px;animation:up .15s}
.wmenu button{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;padding:13px 12px;border-radius:12px;font:inherit;font-weight:700;font-size:15.5px;color:#0d2c3a;cursor:pointer;text-align:right}
.wmenu button:hover,.wmenu button:focus-visible{background:#F7F3EA}
.wmenu svg{width:21px;height:21px;color:#1b5566}
/* message sheets */
.msgs{text-align:center;padding:4px 4px 8px}
.msgs-ic{width:66px;height:66px;margin:2px auto 10px;border-radius:50%;background:#F7F3EA;color:#1b5566;display:grid;place-items:center;border:2px solid #d9b07a}
.msgs-ic svg{width:36px;height:36px}
.msgs-logo{width:70px;height:70px;border-radius:20px;margin:0 auto 8px;display:block}
.msgs .hint{line-height:1.8}
.wnum{font-size:22px;font-weight:800;color:#0d2c3a;margin:6px 0 14px}
.sheet .row2 .btn svg{width:20px;height:20px}
.wfinger.dark{margin:4px auto 12px;background:#F7F3EA;color:#1b5566;border-color:#d9b07a}
.bio-step h3{margin-top:0}
/* back button on login / sign-up */
.aback{width:42px;height:42px;border-radius:14px;border:0;background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;cursor:pointer;margin-bottom:-30px;position:relative;z-index:2}
.aback svg{width:22px;height:22px}
/* privacy page */
.privacy{padding:18px 18px 10px;line-height:1.9}
.privacy .ptitle{display:flex;align-items:center;gap:10px;font-size:21px;margin:0 0 6px;color:#0d2c3a}
.privacy .ptitle svg{width:28px;height:28px;color:#d9b07a}
.privacy h2{font-size:16.5px;margin:16px 0 4px;color:#1b5566;padding-right:10px;border-right:3px solid #d9b07a}
.privacy p,.privacy li{color:#29434d;font-size:15px;margin:4px 0}
.privacy ul{padding-right:20px;margin:4px 0}
.privacy .pcredit{text-align:center;margin-top:18px;font-weight:700}

/* v5 account opening (KYC) */
.kbar .hsp{width:42px;flex:none}
.kycw{padding-bottom:60px}
.kintro{display:flex;gap:12px;align-items:center;background:#fff;border-radius:18px;padding:12px 14px;box-shadow:var(--sh);margin-bottom:4px}
.kintro img{width:46px;height:46px;border-radius:12px;flex:none}
.kintro b{display:block;font-size:16px;color:var(--t3)}.kintro small{display:block;color:var(--muted);font-size:13px;line-height:1.45}
.ksec{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:800;color:var(--t3);margin:20px 2px 10px}
.ksec:before{content:"";width:4px;height:18px;border-radius:3px;background:#d9b07a}
.kcards{display:flex;flex-direction:column;gap:10px}
.kf{display:flex;align-items:center;gap:12px;background:#fff;border-radius:16px;padding:9px 14px;box-shadow:0 3px 12px rgba(13,44,58,.06);border:1.5px solid transparent;transition:border .15s;cursor:text}
.kf:focus-within{border-color:#d9b07a}
.kf .kic{flex:none;width:40px;height:40px;border-radius:12px;background:#F7F3EA;color:#1b5566;display:grid;place-items:center}
.kf .kic svg{width:22px;height:22px}
.kf .kb{flex:1;min-width:0;display:flex;flex-direction:column}
.kf small{font-size:12.5px;color:var(--muted);font-weight:700}.kf small i{color:#c0392b;font-style:normal}
.kin{border:0;outline:0;background:transparent;padding:3px 0 2px;width:100%;font-size:16.5px;font-weight:700;color:var(--t3);min-width:0}
.kin::placeholder{color:#a9b5b9;font-weight:500;font-size:14.5px}
.kin.ltr{direction:ltr;text-align:right;letter-spacing:.6px;display:block}
.kpinh{margin:8px 4px 0;font-size:12.5px}
.dtabs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;background:#fff;border-radius:16px;padding:5px;box-shadow:0 3px 12px rgba(13,44,58,.06)}
.dtabs button{border:0;background:transparent;border-radius:12px;padding:9px 2px 7px;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--muted);font-weight:700;font-size:12.5px;cursor:pointer;min-width:0;line-height:1.25}
.dtabs button svg{width:22px;height:22px}
.dtabs button.on{background:linear-gradient(160deg,#1b5566,#0d2c3a);color:#fff;box-shadow:inset 0 -3px 0 #d9b07a}
.dtabs button.on svg{color:#d9b07a}
.dboxes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.dbox{position:relative;min-height:150px;border-radius:16px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:3px;padding:12px 8px;min-width:0;overflow:hidden}
.dbox.empty{border:2px dashed #d9b07a;cursor:pointer;color:var(--t3);font-family:inherit}
.dbox.empty .dic,.dbox.file .dic{width:46px;height:46px;border-radius:50%;background:#F7F3EA;color:#1b5566;display:grid;place-items:center;margin-bottom:4px}
.dbox .dic svg{width:24px;height:24px}
.dbox b{font-size:14px;color:var(--t3);line-height:1.3}.dbox small{font-size:12px;color:var(--muted)}
.dbox em{font-style:normal;font-size:11.5px;color:#b0844c;font-weight:700;margin-top:4px}
.dbox.file{border:2px solid #1b5566}.dbox.file .dic{background:#1b5566;color:#fff}
.dbox.has{padding:0;justify-content:flex-start;box-shadow:0 3px 12px rgba(13,44,58,.1);border:2px solid #d9b07a}
.dbox.has img{width:100%;height:112px;object-fit:cover;display:block;background:#eee}
.dbox .dcap{padding:6px 6px 0}
.dbtns{display:flex;gap:6px;padding:6px;width:100%}
.dbtns button{flex:1;display:flex;align-items:center;justify-content:center;gap:3px;border:0;border-radius:10px;background:#F7F3EA;color:var(--t3);font-weight:700;font-size:12.5px;padding:7px 2px;cursor:pointer;font-family:inherit}
.dbtns button svg{width:15px;height:15px}
.dbtns [data-del]{color:#c0392b;background:#fbe9e7}
.kdh{margin:8px 4px 0;font-size:12.5px}
.kagree{display:flex;gap:10px;align-items:flex-start;margin:16px 4px 4px;font-weight:700;font-size:14px;color:var(--t3);cursor:pointer}
.kagree input{width:20px;height:20px;flex:none;margin-top:1px;accent-color:#1b5566}
.kerr{min-height:20px;text-align:center;font-weight:700}
.kycw #ksend{margin-top:8px}
.pickrow{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}.pickrow .btn{display:flex;gap:6px;align-items:center;justify-content:center}
.kstat{border-radius:16px;padding:12px 14px;margin-bottom:6px;border-right:5px solid #d9b07a;background:#fff;box-shadow:var(--sh)}
.kstat b{display:block;font-size:15.5px;color:var(--t3)}.kstat small{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.ks-pending.kstat{border-right-color:#b7791f;background:#fdf6ea}.ks-rejected.kstat{border-right-color:#c0392b;background:#fdf0ee}.ks-resubmit.kstat{border-right-color:#3b4f9a;background:#f1f3fb}.ks-verified.kstat{border-right-color:#1b5566}
.kycban{display:flex;align-items:center;gap:12px;background:#fff;border-radius:18px;padding:12px 14px;margin:12px 0 0;box-shadow:var(--sh);text-decoration:none;color:var(--t3);border-right:5px solid #b7791f;position:relative}
.kycban .kbic{flex:none;width:40px;height:40px;border-radius:12px;background:#fdf3e1;color:#b7791f;display:grid;place-items:center}.kycban .kbic svg{width:22px;height:22px}
.kycban .kbt{flex:1;min-width:0}.kycban b{display:block;font-size:15px}.kycban small{display:block;font-size:12.5px;color:var(--muted);line-height:1.4}
.kycban>svg{width:18px;height:18px;flex:none;color:var(--muted)}
.kycban.ks-rejected{border-right-color:#c0392b}.kycban.ks-rejected .kbic{background:#fbe9e7;color:#c0392b}
.kycban.ks-resubmit{border-right-color:#3b4f9a}.kycban.ks-resubmit .kbic{background:#eef1fb;color:#3b4f9a}
.kchip{display:inline-flex;align-items:center;gap:4px;margin:6px auto 0;padding:3px 10px;border-radius:20px;font-size:12.5px;font-weight:800;text-decoration:none;background:#fdf3e1;color:#b7791f}
.kchip svg{width:14px;height:14px}.kchip.ks-verified{background:#e3eef1;color:#1b5566}.kchip.ks-rejected{background:#fbe9e7;color:#c0392b}.kchip.ks-resubmit{background:#eef1fb;color:#3b4f9a}
.krow{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:15px}.krow:last-child{border:0}.krow span{color:var(--muted);flex:none}.krow b{text-align:left;min-width:0;overflow-wrap:anywhere}

/* v5 WhatsApp activation lock */
.walock{min-height:100vh;background:linear-gradient(165deg,#1b5566,#14435a 40%,#0d2c3a);color:#fff;padding:26px 16px 24px}
.wl-in{max-width:460px;margin:0 auto;display:flex;flex-direction:column;align-items:center}
.wl-logo{width:84px;height:84px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 0 0 4px rgba(217,176,122,.6)}
.wl-logo img{width:62px;height:62px;border-radius:14px}
.wl-brand{font-size:21px;font-weight:800;margin:10px 0 14px}
.wl-card{background:#fff;color:#0d2c3a;border-radius:22px;padding:20px 16px 14px;width:100%;text-align:center;box-shadow:0 14px 40px rgba(0,0,0,.25)}
.wl-ic{width:54px;height:54px;border-radius:50%;background:#e7f6ec;color:#1d9b50;display:inline-grid;place-items:center}.wl-ic svg{width:30px;height:30px}
.wl-card h2{font-size:19px;line-height:1.45;margin:10px 0 6px;color:#0d2c3a}
.wl-code{display:block;margin:14px 0 10px;background:#F7F3EA;border:2px dashed #d9b07a;border-radius:14px;padding:12px 6px;font-family:ui-monospace,Menlo,monospace;font-size:13px;font-weight:700;color:#0d2c3a;word-break:break-all;line-height:1.5;text-align:center}
.btn.wl-wa{background:#1fa855;color:#fff;margin-top:10px;font-size:18px;padding:15px;display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;box-shadow:0 6px 16px rgba(31,168,85,.3)}
.btn.wl-wa svg{width:24px;height:24px}
.wl-steps{text-align:right;margin:14px 0 12px;padding:0 20px 0 0;font-size:14px;color:#5f7780;line-height:1.7}
.wl-out{margin-top:18px;background:rgba(255,255,255,.12);border:0;color:#fff;border-radius:14px;padding:11px 18px;font-weight:700;display:flex;gap:8px;align-items:center;cursor:pointer;font-family:inherit}
.wl-out svg{width:20px;height:20px}
.wl-credit{color:#d9b07a;font-size:12.5px;font-weight:700;margin-top:18px}

/* ===== v6.1 performance + instant tap feedback (look unchanged) ===== */
html{touch-action:manipulation}
a,button,label,[data-go],[data-act]{touch-action:manipulation}
.bnav a:active .pill,.fav:active .fc,.hbtn:active,.dclose:active,.ditem:active,.topup-pill:active,.avatar:active,.tabs button:active,.seg button:active,.fab:active,.eye:active{opacity:.6}
.fav:active,.ditem:active,.topup-pill:active,.bnav a:active{transform:scale(.96)}
.pbar,.bnav,.fab{will-change:transform}
#navbusy{position:fixed;top:0;left:0;right:0;height:3px;z-index:100;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .12s}
#navbusy.on{opacity:1}
#navbusy.on:before{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;background:#d9b07a;animation:nbusy .9s linear infinite}
@keyframes nbusy{from{transform:translateX(250%)}to{transform:translateX(-100%)}}

/* ---------- v6.2: one charge screen (number → detected network → service tabs → query card → categories) ---------- */
.cx-num{padding-bottom:12px}
.cx-row{display:flex;align-items:center;gap:8px}
.cx-row .in{flex:1;min-width:0;font-size:20px;font-weight:800;letter-spacing:.5px;height:52px}
.cx-row .btn.sm{flex:none;height:52px;padding:0 14px}
.cx-op{flex:none;position:relative;width:56px;height:56px;border-radius:50%;border:0;padding:0;background:#fff;cursor:pointer;display:grid;place-items:center;box-shadow:0 0 0 2px #d9b07a,0 4px 12px rgba(13,44,58,.14)}
.cx-logo{width:46px;height:46px;border-radius:50%;background:var(--nc,#1b5566);color:var(--ni,#fff);display:grid;place-items:center;font-weight:800;font-size:14px;line-height:1;letter-spacing:.2px;transition:background .25s}
.cx-logo.sm{width:38px;height:38px;font-size:12.5px;flex:none}
.cx-chev{position:absolute;bottom:-3px;left:-3px;width:20px;height:20px;border-radius:50%;background:#0d2c3a;color:#d9b07a;display:grid;place-items:center;border:2px solid #fff}
.cx-chev svg{width:12px;height:12px}
.cx-net{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;font-size:13px;flex-wrap:wrap}
.cx-nn{display:flex;align-items:center;gap:6px;min-width:0}
.cx-nn i{width:9px;height:9px;border-radius:50%;flex:none}
.cx-nn b{font-weight:800;font-size:14px}
.cx-nn em{font-style:normal;font-weight:700;color:var(--ok,#1e8e5a);font-size:12.5px}
.cx-nn em.muted{color:var(--muted)}
.cx-wal{color:var(--muted);font-weight:700;white-space:nowrap}
.cx-wal b{color:#b0844c;font-weight:800}
.cx-num .hint:empty{display:none}
.cx-tabs{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.cx-tabs::-webkit-scrollbar{display:none}
.cx-tabs a{flex:1 0 auto;min-width:92px;scroll-snap-align:start;white-space:nowrap}
.cx-nlist{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.cx-nlist button{display:flex;align-items:center;gap:12px;border:1.5px solid var(--line);background:#fff;border-radius:14px;padding:9px 12px;font:inherit;cursor:pointer;text-align:right}
.cx-nlist button b{flex:1;font-size:16px;font-weight:800;color:var(--ink)}
.cx-nlist button small{color:var(--muted);font-weight:700}
.cx-nlist button.on{border-color:#d9b07a;background:#fffaf1}
/* query card */
.qc{padding:12px 14px;border:1.5px solid rgba(217,176,122,.55);background:linear-gradient(180deg,#fff 0%,#fffcf6 100%)}
.qc-h{display:flex;align-items:center;gap:8px}
.qc-h>b{font-size:16px;font-weight:800;flex:1}
.qc-ic{flex:none;width:32px;height:32px;border-radius:10px;background:#0d2c3a;color:#d9b07a;display:grid;place-items:center}
.qc-ic svg{width:19px;height:19px}
.qc-num{font-weight:800;color:var(--t1);font-size:14px}
.qc-r{flex:none;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--line);background:#fff;color:var(--t1);display:grid;place-items:center;cursor:pointer}
.qc-r svg{width:18px;height:18px}
.qc-r:active{transform:rotate(90deg)}
.qc-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.qc-grid>div{background:var(--bg);border-radius:12px;padding:8px 10px;display:flex;flex-direction:column;gap:2px;min-width:0}
.qc-grid span{font-size:12px;color:var(--muted);font-weight:700}
.qc-grid b{font-size:16px;font-weight:800;direction:rtl}
.qc-grid b.gold{color:#b0844c}.qc-grid b small{font-size:11px}
.qc-sub{display:flex;align-items:center;gap:6px;margin:14px 0 6px;font-size:14px}
.qc-sub small{background:#0d2c3a;color:#d9b07a;border-radius:20px;padding:0 8px;font-weight:800;font-size:12px;line-height:20px}
.qc-sub small:empty{display:none}
.qc-list{display:flex;flex-direction:column;gap:6px}
.qc-o{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px 10px}
.qc-dot{flex:none;width:9px;height:9px;border-radius:50%;background:#2e9e6a;box-shadow:0 0 0 3px rgba(46,158,106,.15)}
.qc-o.ended .qc-dot{background:#b9b2a5;box-shadow:none}
.qc-t{flex:1;min-width:0;display:flex;flex-direction:column}
.qc-t b{font-size:14px;font-weight:800;overflow-wrap:anywhere}
.qc-t small{font-size:12px;color:var(--muted)}
.qc-o .btn.sm{flex:none;padding:7px 12px}
.qc-foot{margin-top:8px;font-size:11.5px;color:var(--muted);text-align:left}
.qc-idle{margin-top:8px;font-size:13.5px;color:var(--muted);line-height:1.6}
.qc-off{display:flex;align-items:flex-start;gap:10px;margin-top:10px;background:var(--bg);border-radius:12px;padding:10px 12px}
.qc-off>svg{flex:none;width:22px;height:22px;color:#b0844c;margin-top:1px}
.qc-off b{display:block;font-size:14.5px;font-weight:800}
.qc-off small{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.qc-off.bad>svg{color:var(--bad)}
.qc.off{border-style:dashed}
.qc-grid.sk>div{height:52px}
.qc-grid.sk>div,.qc-skl{background:linear-gradient(90deg,#f1ece2 25%,#faf6ee 50%,#f1ece2 75%);background-size:200% 100%;animation:qcsk 1.1s linear infinite}
.qc-skl{height:40px;border-radius:12px;margin-top:8px}
@keyframes qcsk{to{background-position:-200% 0}}

/* ---------- v6.3: «الخدمات» hub ---------- */
.hub .bx-search{margin:2px 0 14px}
.tile .tic img{width:42px;height:42px;object-fit:contain;border-radius:10px}
.svres{display:grid;gap:8px}
.srow{display:flex;align-items:center;gap:12px;width:100%;background:#fff;border:0;border-radius:16px;box-shadow:var(--sh);padding:11px 12px;text-align:right;cursor:pointer;color:var(--ink)}
.srow .sic{flex:none;width:42px;height:42px;border-radius:12px;background:var(--tl);color:var(--t1);display:grid;place-items:center}
.srow .sic svg{width:26px;height:26px}.srow .sic img{width:34px;height:34px;object-fit:contain;border-radius:8px}
.srow .mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.srow .mid b{font-size:15px;font-weight:800}.srow .mid small{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srow > svg:last-child{width:18px;height:18px;color:var(--muted);flex:none}
.svhead{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,var(--navy),var(--teal));color:#fff;border-radius:18px;padding:14px;margin-bottom:10px}
.svhead .svic{flex:none;width:52px;height:52px;border-radius:14px;background:rgba(255,255,255,.12);color:var(--gold);display:grid;place-items:center}
.svhead .svic svg{width:32px;height:32px}.svhead .svic img{width:44px;height:44px;object-fit:contain;border-radius:10px}
.svhead .mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}.svhead .mid b{font-size:16.5px;font-weight:800;line-height:1.3}.svhead .mid small{font-size:12.5px;opacity:.75}
.svbal{flex:none;display:flex;flex-direction:column;align-items:center;font-size:11.5px;opacity:.9;background:rgba(0,0,0,.18);border-radius:12px;padding:6px 10px}.svbal b{font-size:15px;color:var(--gold);font-weight:800}
.manual{display:flex;gap:10px;align-items:flex-start;background:#fff8ea;border:1.5px solid #f0dfbd;color:#6b4a14;border-radius:14px;padding:10px 12px;font-size:13px;line-height:1.55;margin-bottom:12px}
.manual svg{flex:none;width:20px;height:20px;margin-top:2px;color:var(--gold3)}.manual b{display:block;font-size:14px;color:#5a3c0c}
/* v7.9: item picker = full-width rows like the bundle category rows (.acc-h): navy→teal row, gold icon tile on the right, name, price pill on the left */
.svitems{display:flex;flex-direction:column;gap:10px}
.svitem{position:relative;width:100%;display:flex;flex-direction:row;align-items:center;gap:10px;min-height:58px;padding:9px 12px;border:0;border-radius:16px;background:linear-gradient(150deg,#0d2c3a 0%,#1b5566 100%);color:#fff;text-align:right;font:inherit;cursor:pointer;box-shadow:var(--sh)}
.svitem .sv-ic{flex:none;width:38px;height:38px;border-radius:11px;background:#d9b07a;color:#0d2c3a;display:grid;place-items:center;overflow:hidden}
.svitem .sv-ic svg{width:21px;height:21px}
.svitem .sv-ic img{width:100%;height:100%;object-fit:cover;border-radius:0}
.svitem .sv-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.svitem b{font-size:15px;font-weight:800;line-height:1.35;overflow-wrap:anywhere}
.svitem .nt{font-size:11.5px;color:rgba(255,255,255,.72);line-height:1.3}
.svitem .pr{flex:none;min-width:64px;display:flex;flex-direction:column;align-items:center;white-space:nowrap;background:rgba(217,176,122,.22);color:#f1d9b3;border-radius:12px;padding:5px 9px;font-size:15px;font-weight:800;line-height:1.15}.svitem .pr small{font-size:10px;font-weight:700;opacity:.9}
.svitem.on{box-shadow:0 0 0 2.5px #d9b07a,0 6px 18px rgba(13,44,58,.22)}
.svitem.on .pr{background:#d9b07a;color:#0d2c3a}
.svitem.on::after{content:'✓';position:absolute;top:-7px;left:-5px;width:20px;height:20px;border-radius:50%;background:#d9b07a;color:#0d2c3a;font-size:12px;font-weight:800;display:grid;place-items:center;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.svitem[hidden],.tile[hidden]{display:none}
.svfixed{display:flex;justify-content:space-between;align-items:center;background:var(--tl);border-radius:12px;padding:12px 14px}.svfixed b{font-size:18px;color:var(--t1)}
.svform .req{color:#c0392b;font-style:normal}
#svsum .neg{color:#c0392b}
.cust .item .ic.svc{background:var(--tl);color:var(--t1)}.cust .item .ic.svc svg{width:24px;height:24px}.cust .item .ic.svc img{width:30px;height:30px;object-fit:contain;border-radius:6px}
.svcode{display:flex;align-items:center;gap:8px;margin-top:6px;background:#f2f8f5;border:1.5px dashed #9cc9b4;border-radius:10px;padding:6px 10px}
.svcode span{font-size:12px;color:var(--muted)}.svcode b{flex:1;font-size:15px;letter-spacing:.5px;word-break:break-all}
.svcode .cpy{border:0;background:none;color:var(--t1);cursor:pointer;padding:2px;display:grid;place-items:center}.svcode .cpy svg{width:18px;height:18px}

.hd-acts{display:flex;align-items:center;gap:8px;flex:none}
#thm svg{width:21px;height:21px}

/* v7.3: profile picture */
.avatar.has-av{background:#0d2c3a;overflow:hidden}
.avatar>img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;pointer-events:none}
.avwrap{position:relative;display:inline-block;cursor:pointer;-webkit-tap-highlight-color:transparent}
.avbtn{border:0;padding:0;font-family:inherit;cursor:pointer}
.avcam{position:absolute;bottom:-2px;inset-inline-end:-4px;width:30px;height:30px;border-radius:50%;background:#0d2c3a;color:#d9b07a;display:grid;place-items:center;border:2.5px solid #fff;box-shadow:0 2px 6px rgba(13,44,58,.25)}
.avcam svg{width:16px;height:16px}
.avwrap:active{opacity:.7}
.avpick{display:flex;gap:8px;align-items:center;justify-content:center;margin-top:14px;cursor:pointer}
.avpick svg{width:20px;height:20px}
.avsec{font-weight:700;font-size:14px;color:var(--muted);margin:16px 2px 0}
.avgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 12px;margin:10px 4px 16px}
.avopt{aspect-ratio:1;border-radius:50%;border:0;padding:0;background:none;cursor:pointer;transition:transform .12s,box-shadow .12s;box-shadow:0 1px 4px rgba(13,44,58,.18)}
.avopt img{width:100%;height:100%;border-radius:50%;display:block}
.avopt:active{transform:scale(.94)}
.avopt.on{box-shadow:0 0 0 3px #fff,0 0 0 6px #d9b07a}
.avrm{color:#c0392b}
.avrm[disabled]{opacity:.45}
.sheet.busy{pointer-events:none;opacity:.7}
html[data-theme=dark] .avcam{border-color:#12303c;background:#d9b07a;color:#0d2c3a}
html[data-theme=dark] .avopt.on{box-shadow:0 0 0 3px #12303c,0 0 0 6px #d9b07a}
html[data-theme=dark] .avrm{color:#ff8a7a}

/* v7.3: «كبينة السداد» */
.kablist .kabrow{width:100%}
.kabdot{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;font-size:13px;letter-spacing:.2px;box-shadow:0 2px 6px rgba(13,44,58,.18)}
.kabrow .mid{flex:1;display:flex;flex-direction:column;text-align:start}
.kabrow .mid small{color:var(--muted);font-size:12.5px}
/* v7.3: «الحالات» */
.stcount{background:#d9b07a;color:#0d2c3a;border-radius:10px;padding:1px 9px;font-size:12px;font-weight:800}
.stbanner{display:block;width:100%;border:0;padding:0;background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 6px 18px rgba(13,44,58,.14);cursor:pointer;text-align:start;font-family:inherit;color:inherit;margin-top:2px}
.stbanner:active{transform:scale(.99)}
.stprev{height:168px;background:#0d2c3a;overflow:hidden}
.stprev img{width:100%;height:100%;object-fit:cover;display:block}
.sttxt{height:100%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:19px;padding:0 22px;text-align:center;line-height:1.7}
.sttxt span{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;white-space:pre-wrap}
.stbar{display:flex;align-items:center;gap:10px;padding:10px 12px}
.stbar .mid{flex:1;display:flex;flex-direction:column;min-width:0}
.stbar small{color:var(--muted);font-size:12.5px}
.stbar>svg{width:18px;height:18px;color:var(--muted);flex:none}
.string{flex:none;width:42px;height:42px;border-radius:50%;padding:2px;background:#fff;box-shadow:0 0 0 2.5px #b9c3c7;display:grid;place-items:center}
.string.new{box-shadow:0 0 0 2.5px #d9b07a}
.string img{width:100%;height:100%;border-radius:50%;display:block}
body.noscroll{overflow:hidden}
.stv{position:fixed;inset:0;z-index:300;display:flex;flex-direction:column;color:#fff;touch-action:none;-webkit-user-select:none;user-select:none;background:#000;animation:fade .15s}
.stv-top{position:absolute;top:0;left:0;right:0;padding:calc(10px + env(safe-area-inset-top)) 10px 22px;background:linear-gradient(rgba(0,0,0,.42),transparent);z-index:2}
.stv-bars{display:flex;gap:4px}
.stv-bars i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.35);overflow:hidden;display:block}
.stv-bars b{display:block;height:100%;width:0;background:#fff}
.stv-head{display:flex;align-items:center;gap:10px;margin-top:12px}
.stv-head img{width:38px;height:38px;border-radius:50%;box-shadow:0 0 0 2px #d9b07a;background:#fff}
.stv-head .mid{display:flex;flex-direction:column}
.stv-head small{opacity:.8;font-size:12.5px}
.stv-x{background:none;border:0;color:#fff;width:38px;height:38px;display:grid;place-items:center;padding:0;cursor:pointer}
.stv-x svg{width:26px;height:26px}
.stv-body{flex:1;display:flex;align-items:center;justify-content:center;min-height:0}
.stv-body.img img{width:100%;max-height:100%;object-fit:contain;display:block;pointer-events:none}
.stv-body.txt p{font-size:27px;font-weight:800;line-height:1.7;text-align:center;padding:0 30px;white-space:pre-wrap;margin:0;text-shadow:0 1px 2px rgba(0,0,0,.15)}
.stv-foot{position:absolute;bottom:0;left:0;right:0;padding:18px 18px calc(24px + env(safe-area-inset-bottom));background:linear-gradient(transparent,rgba(0,0,0,.5));text-align:center;z-index:2}
.stv-foot:empty{display:none}
.stv-cap{margin:0 0 12px;font-size:16px;line-height:1.7;white-space:pre-wrap}
.stv-link{display:inline-flex;min-width:62%;justify-content:center;text-decoration:none}
html[data-theme=dark] .stbanner{background:#15323f;color:#e9f0f2}
html[data-theme=dark] .string{background:#15323f}

/* v7.3: «الواجهة الإعلانية» ad slider */
#adhome:not(:empty){margin-top:18px}
.adwrap{position:relative}
.adtrack{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;direction:ltr;scrollbar-width:none;border-radius:18px;box-shadow:0 6px 18px rgba(13,44,58,.14);background:#fff;-webkit-overflow-scrolling:touch}
.adtrack::-webkit-scrollbar{display:none}
.adslide{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always;direction:rtl;cursor:default}
.adslide[data-link]{cursor:pointer}
.adimg{aspect-ratio:16/7;background:#e9e2d3;overflow:hidden}
.adimg img{width:100%;height:100%;object-fit:cover;display:block;-webkit-user-drag:none}
.adcap{padding:9px 14px 10px;font-weight:700;font-size:14px;color:var(--t3);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.addots{display:flex;justify-content:center;gap:6px;margin-top:8px}
.addots i{width:7px;height:7px;border-radius:4px;background:#cdd5d8;transition:width .2s,background .2s}
.addots i.on{width:18px;background:#d9b07a}
html[data-theme=dark] .adtrack{background:#15323f}
html[data-theme=dark] .adcap{color:#e9f0f2}
html[data-theme=dark] .adimg{background:#0f2731}
html[data-theme=dark] .addots i{background:#3a5560}
.cust .btn.line.avrm{color:#c0392b}
html[data-theme=dark] .cust .btn.line.avrm,html[data-theme=dark] .btn.line.avrm{color:#ff8a7a}

/* v7.3: «التوثيق المباشر» card on the KYC screen */
.kdirect{background:#fff;border-radius:16px;padding:14px;margin:0 0 14px;box-shadow:0 2px 10px rgba(13,44,58,.08);border:1.5px solid #efe2c9}
.kdhd{display:flex;gap:10px;align-items:center}
.kdhd>div{display:flex;flex-direction:column}
.kdhd small{color:var(--muted);font-size:13px}
.kdic{flex:none;width:38px;height:38px;border-radius:12px;background:#F7F3EA;color:#b0844c;display:grid;place-items:center}
.kdic svg{width:20px;height:20px}
.kdnum{font-size:24px;font-weight:800;letter-spacing:1.5px;text-align:center;margin:10px 0;color:var(--t3)}
.kdbtns{display:flex;gap:8px}
.kdbtns .btn{flex:1;display:flex;gap:6px;align-items:center;justify-content:center;text-decoration:none}
.kdbtns .btn svg{width:19px;height:19px}
html[data-theme=dark] .kdirect{background:#15323f;border-color:#24485a}
html[data-theme=dark] .kdic{background:#0f2731}
html[data-theme=dark] .kdnum{color:#e9f0f2}
.kdbtns .btn.wa{background:#1faa59;color:#fff;border:0}

/* v7.4: «كبينة السداد» v2 — number first, the screen takes the detected network's colour (--kc / --ki set on .kbx) */
.kbx{--kc:#1b5566;--ki:#fff}
.kb-hd{position:sticky;top:0;z-index:15;color:var(--ki);background-color:var(--kc);background-image:linear-gradient(160deg,rgba(255,255,255,.12),rgba(13,44,58,.10) 55%,rgba(13,44,58,.30));border-bottom:3px solid #d9b07a;border-radius:0 0 24px 24px;padding:10px 16px 16px;box-shadow:0 6px 16px rgba(13,44,58,.15);transition:background-color .45s ease,color .45s ease}
.kbx:not(.on) .kb-hd{background-image:linear-gradient(160deg,#1b5566,#14435a 50%,#0d2c3a)}
.kb-hd h1{flex:1;margin:0;font-size:16px;font-weight:800;text-align:center;line-height:1.35}
.kb-hd .hbtn{color:inherit}
.kb-nets{max-width:560px;margin:12px auto 0;display:flex;justify-content:center;gap:12px}
.kb-nb{border:0;background:none;padding:0;cursor:pointer;border-radius:50%;transition:transform .25s,box-shadow .25s,opacity .25s;opacity:.92;-webkit-tap-highlight-color:transparent}
.kbx.on .kb-nb{opacity:.6}
.kb-nb.on,.kbx.on .kb-nb.on{opacity:1;transform:scale(1.14);box-shadow:0 0 0 2.5px #fff,0 0 0 4.5px rgba(13,44,58,.25)}
.kb-logo{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--nc);color:var(--ni);font-weight:800;font-size:12px;letter-spacing:.2px;border:2px solid rgba(255,255,255,.85);box-shadow:0 2px 6px rgba(13,44,58,.2);line-height:1}
.kb-logo.big{width:46px;height:46px;font-size:14px;border:0;animation:kbpop .35s ease}
.kb-logo.none{background:#F7F3EA;color:#b0844c;animation:none}
.kb-logo.none svg{width:22px;height:22px}
@keyframes kbpop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
.kb{padding-top:0}
.kb-card{position:relative;margin-top:14px;border-top:4px solid var(--kc);transition:border-color .45s;padding:14px 12px 12px}
.kbx:not(.on) .kb-card{border-top-color:#d9b07a}
.kb-row{display:flex;align-items:center;gap:8px}
.kb-op{flex:none;display:grid;place-items:center}
.kb-field{flex:1;min-width:0;display:flex;flex-direction:column;border-bottom:2px solid var(--line);padding-bottom:2px;transition:border-color .45s}
.kbx.on .kb-field{border-bottom-color:var(--kc)}
.kb-field label{font-size:12.5px;color:var(--muted);font-weight:700}
.kb-in{display:flex;align-items:center;gap:6px;direction:ltr}
.kb-cc{flex:none;font-weight:800;color:var(--muted);font-size:16px}
.kb-in input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:21px;font-weight:800;letter-spacing:1px;color:var(--ink);padding:2px 0;direction:ltr;text-align:left}
.kb-in input::placeholder{color:#b9c3c7;font-weight:700;letter-spacing:.5px}
.kb-ib{flex:none;width:36px;height:36px;border-radius:50%;border:0;background:#f1f4f5;color:var(--muted);display:grid;place-items:center;cursor:pointer;padding:0}
.kb-ib svg{width:19px;height:19px}
.kb-ib[hidden]{display:none}
#kbclr{width:28px;height:28px;background:transparent}
#kbclr svg{width:16px;height:16px}
.kb-heart.on{color:#e0245e;background:#fde8ee}
.kb-heart.on svg{fill:currentColor}
.kb-hint{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 10px;font-size:13px;color:var(--muted);margin:9px 2px 0;min-height:20px}
.kb-hint.bad{color:var(--bad,#c0392b);font-weight:700;justify-content:flex-start}
.kb-hint.warn{color:#9a6a1f;font-weight:700}
.kb-hint .ok{color:var(--ok,#1e8e5a);font-weight:700}
.kb-nn{display:inline-flex;align-items:center;gap:6px}
.kb-nn i{width:9px;height:9px;border-radius:50%;background:var(--kc);display:inline-block}
.kb-nn b{color:var(--ink)}
.kb-nn em{font-style:normal;font-size:12px;color:var(--ok,#1e8e5a)}
.kb-swbtn{border:0;border-radius:20px;padding:5px 12px;font:inherit;font-size:13px;font-weight:800;background:var(--nc);color:var(--ni);cursor:pointer;box-shadow:0 2px 6px rgba(13,44,58,.15)}
.hint .kb-swbtn{margin-top:6px}
.kb-north{display:flex;align-items:center;gap:10px;margin-top:12px;padding-top:10px;border-top:1px dashed var(--line);cursor:pointer;-webkit-tap-highlight-color:transparent}
.kb-nt{flex:1;display:flex;flex-direction:column}
.kb-nt b{font-size:14.5px}
.kb-nt small{color:var(--muted);font-size:12px}
.kb-north input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.kb-sw{flex:none;width:46px;height:26px;border-radius:13px;background:#cdd5d8;position:relative;transition:background .25s}
.kb-sw::after{content:'';position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:right .25s}
.kb-north input:checked+.kb-sw{background:#d9b07a}
.kb-north input:checked+.kb-sw::after{right:23px}
.kb-north input:focus-visible+.kb-sw{outline:2px solid var(--kc);outline-offset:2px}
.kb-nlab{display:inline-block;background:#F7F3EA;color:#8a5f2a;border:1px solid #e6cfa8;border-radius:10px;padding:1px 8px;font-size:12px;font-weight:800;white-space:nowrap}
.kb-nlab.sheet{margin:-4px 0 10px}
.kb-rcrow{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:12px 0 0;padding:2px 2px 4px;align-items:center}
.kb-rcrow::-webkit-scrollbar{display:none}
.kb-rct{flex:none;font-size:12.5px;color:var(--muted);font-weight:700}
.kb-rc{flex:none;display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--nc);background:#fff;border-radius:18px;padding:5px 11px;font:inherit;font-size:13.5px;font-weight:800;color:var(--ink);cursor:pointer}
.kb-rc i{width:8px;height:8px;border-radius:50%;background:var(--nc)}
.kb-rc.fav{--nc:#d9b07a;color:#8a5f2a}
.kb-rc.fav svg{width:15px;height:15px}
.kb-tabs{display:flex;flex-direction:column;gap:6px;overflow:visible;scrollbar-width:none;margin-top:14px;padding:6px;border-radius:16px;background:#eef1f2;background:color-mix(in srgb,var(--kc) 14%,#fff);transition:background .45s;animation:fade .25s}
.kb-tabs::-webkit-scrollbar{display:none}
.kb-tabs button{flex:none;width:100%;text-align:right;border:0;background:rgba(255,255,255,.55);border-radius:12px;padding:13px 16px;font:inherit;font-size:15px;font-weight:800;color:#0d2c3a;cursor:pointer;white-space:normal;transition:background .2s,color .2s}
.kb-tabs button.on{background:var(--kc);color:var(--ki);box-shadow:0 2px 8px rgba(13,44,58,.18)}
.kb-pane{margin-top:12px}
.kb-ph{display:flex;align-items:center;justify-content:space-between;gap:8px}
.kb-ph b{font-size:16px}
.kb-sech{margin-top:14px}
.kb-sech h2{border-right-color:var(--kc)}
.kb-sech .kb-nlab{margin-inline-start:auto}
.kb-packs{display:flex;flex-direction:column;gap:10px;animation:fade .2s}
.kbx .chips button.on{border-color:var(--kc);background:#eef1f2;background:color-mix(in srgb,var(--kc) 12%,#fff);color:#0d2c3a}
html[data-theme=dark] .kb-hd{background-image:linear-gradient(160deg,rgba(255,255,255,.06),rgba(8,22,29,.25) 55%,rgba(8,22,29,.5));border-bottom-color:#23414d}
html[data-theme=dark] .kbx:not(.on) .kb-hd{background-image:none;background-color:#0d2c3a}
html[data-theme=dark] .kb-in input{background:transparent;color:#e9f0f2;border:0}
html[data-theme=dark] .kb-in input::placeholder{color:#55717b}
html[data-theme=dark] .kb-field{border-bottom-color:#2d5261}
html[data-theme=dark] .kbx.on .kb-field{border-bottom-color:var(--kc)}
html[data-theme=dark] .kb-ib{background:#0f2833;color:#9fb4bb}
html[data-theme=dark] #kbclr{background:transparent}
html[data-theme=dark] .kb-heart.on{background:#3a1d29;color:#ff6b93}
html[data-theme=dark] .kb-nn b{color:#e9f0f2}
html[data-theme=dark] .kb-hint.warn{color:#e8c07a}
html[data-theme=dark] .kb-rc{background:#15323f;color:#e9f0f2}
html[data-theme=dark] .kb-rc.fav{color:#e8c07a}
html[data-theme=dark] .kb-tabs{background:#15323f;background:color-mix(in srgb,var(--kc) 22%,#12303c)}
html[data-theme=dark] .kb-tabs button{color:#e9f0f2}
html[data-theme=dark] .kb-tabs button.on{color:var(--ki)}
html[data-theme=dark] .kb-logo.none{background:#0f2833;color:#d9b07a}
html[data-theme=dark] .kb-nlab{background:#2a2a1f;color:#e8c07a;border-color:#5a4a2a}
html[data-theme=dark] .kb-sw{background:#2d5261}
html[data-theme=dark] .kb-north{border-top-color:#2d5261}
html[data-theme=dark] .kbx .chips button.on{background:color-mix(in srgb,var(--kc) 25%,#15323f);color:#e9f0f2}
.kb-wal{position:absolute;top:12px;left:14px;font-size:12px;color:var(--muted)}
.kb-wal b{color:var(--ink);font-size:13px}
html[data-theme=dark] .kb-wal b{color:#e9f0f2}
html[data-theme=dark] .kb-hint .ok,html[data-theme=dark] .kb-nn em{color:#7fd1b0}
.msgs-logo.full{width:180px;height:auto;border-radius:22px;box-shadow:0 4px 14px rgba(13,44,58,.12)}

/* v7.4: welcome splash (index.html) — each element enters on its own, in a wave (≈250 ms apart), then the whole screen fades into the app */
.spl{position:fixed;inset:0;z-index:1000;background:linear-gradient(180deg,#0e4f5c 0%,#0c3f4b 45%,#0a2f3a 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;transition:opacity .35s ease,visibility .35s;color:#fff;direction:rtl;font-family:'Tajawal',system-ui,sans-serif}
.spl.out{opacity:0;visibility:hidden}
html.spl-on,html.spl-on body{overflow:hidden}
.spl-c{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;margin-top:-16vh}
.spl-mark{position:relative;width:min(56vw,236px);aspect-ratio:422/352}
.spl-mark img{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;-webkit-user-drag:none}
.spl-mark .a1,.spl-mark .a2,.spl-mark .a3{transform-origin:67% 38%;animation:splArc 0.25s cubic-bezier(.2,.8,.3,1.2) forwards}
.spl-mark .a1{animation-delay:0.04s}.spl-mark .a2{animation-delay:0.15s}.spl-mark .a3{animation-delay:0.25s}
.spl-mark .rb{transform-origin:50% 80%;animation:splRise 0.29s cubic-bezier(.2,.8,.25,1) 0.36s forwards}
.spl-name{margin-top:18px;font-size:clamp(30px,9vw,40px);font-weight:800;line-height:1.2;white-space:nowrap}
.spl-name span{display:inline-block;opacity:0}
.spl-name .w1{color:#fff;animation:splInR 0.23s cubic-bezier(.2,.8,.25,1) 0.46s forwards}
.spl-name .w2{color:#d9b07a;animation:splInL 0.23s cubic-bezier(.2,.8,.25,1) 0.57s forwards}
.spl-en{margin-top:8px;font-size:12.5px;font-weight:700;letter-spacing:4px;color:#cfe0e3;opacity:0;direction:ltr;animation:splFade 0.29s ease 0.67s forwards}
.spl-mt{position:absolute;left:0;right:0;bottom:0;width:100%;height:34vh;z-index:1}
.spl-mt .m1,.spl-mt .m2,.spl-mt .m2s,.spl-mt .m3{transform:translateY(100%);animation:splUp 0.34s cubic-bezier(.2,.8,.25,1) forwards}
.spl-mt .m1{animation-delay:0.78s}.spl-mt .m2,.spl-mt .m2s{animation-delay:0.83s}.spl-mt .m3{animation-delay:0.88s}
.spl-mt .sw{stroke-dasharray:1;stroke-dashoffset:1;animation:splDraw 0.32s ease-out 0.9s forwards}
.spl-mt .sw2{animation-delay:0.97s}
@keyframes splArc{0%{opacity:0;transform:scale(.55)}60%{opacity:1}100%{opacity:1;transform:scale(1)}}
@keyframes splRise{0%{opacity:0;transform:translateY(26px) scale(.86)}100%{opacity:1;transform:none}}
@keyframes splInR{0%{opacity:0;transform:translateX(36px)}100%{opacity:1;transform:none}}
@keyframes splInL{0%{opacity:0;transform:translateX(-36px)}100%{opacity:1;transform:none}}
@keyframes splFade{0%{opacity:0;letter-spacing:1px}100%{opacity:1;letter-spacing:4px}}
@keyframes splUp{to{transform:translateY(0)}}
@keyframes splDraw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion: reduce){
  .spl-mark img,.spl-name span,.spl-en{animation:none!important;opacity:1}
  .spl-mt .m1,.spl-mt .m2,.spl-mt .m2s,.spl-mt .m3{animation:none!important;transform:none}
  .spl-mt .sw{animation:none!important;stroke-dashoffset:0}
}

html[data-theme=dark] .kb-tabs button{background:rgba(255,255,255,.05)}
.kb-tabs button::after{content:'‹';float:left;opacity:.5}
.kb-acc{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.kb-acc .acc-b #kbbody{padding:4px 2px 8px}
.kb-acc .kb-sech h2,.kb-acc .kb-ph b{display:none}

/* ---------- v7.5 smoothness: instant tap feedback, short screen fade, folding accordions, skeletons ---------- */
a,button,[role=button],label,summary,.bcard,.item,.tile,.acc-h{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.btn,.acc-h,.bcard,.tile,.fav,.ditem,.chips button,.bx-lines button,.seg button,.tabs button,.kb-rc,.kb-ib,.kb-nb,.bx-rc,.svitem,.svc,.notif,.list .item,.hbtn,.lnk,.bnav a,.topup-pill,.stbanner,.adimg,.kb-swbtn,.pill,.eye,.rld{transition:transform .12s ease,opacity .12s ease}
.acc-h:active,.chips button:active,.bx-lines button:active,.kb-rc:active,.bx-rc:active,.svitem:active,.list .item:active,.notif:active,.kb-swbtn:active,.lnk:active{opacity:.75}
.acc-h:active{transform:scale(.985)}
.chips button:active,.bx-lines button:active,.kb-rc:active,.bx-rc:active{transform:scale(.96)}
.svitem:active{transform:scale(.985)}
.bcard:active{transform:scale(.985);opacity:.85}
.btn:active:not(:disabled){transform:scale(.97);opacity:.88}
/* screen switch: the content fades up in 180 ms (header/bars stay put, so nothing blinks); a background refresh does not animate */
@keyframes scrIn{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:none}}
#app:not(.noanim)>.wrap,#app:not(.noanim)>.skel>.wrap{animation:scrIn .18s ease-out both}
/* accordions («الشحن والباقات» + «كبينة السداد»): the body folds open/closed — grid rows 0fr→1fr, no height measuring */
.acc{display:grid;grid-template-rows:auto 0fr;transition:grid-template-rows .22s cubic-bezier(.2,.8,.25,1)}
.acc.open{grid-template-rows:auto 1fr}
.acc>.acc-b{min-height:0;overflow:hidden;padding:0 10px;transition:padding .22s cubic-bezier(.2,.8,.25,1),opacity .18s ease;opacity:0}
.acc.open>.acc-b{padding:10px 10px 2px;opacity:1}
.acc-ch{transition:transform .22s cubic-bezier(.2,.8,.25,1)}
/* skeleton placeholders (shown only when a screen's data is still on its way) */
@keyframes skSh{0%{background-position:100% 0}100%{background-position:-100% 0}}
.skel .sk-l,.skel .sk-c{display:block;border-radius:8px;background:linear-gradient(90deg,#ece4d4 25%,#f6f0e4 50%,#ece4d4 75%);background-size:200% 100%;animation:skSh 1.2s linear infinite}
.sk-hd{height:262px;background:linear-gradient(160deg,#1b5566 0%,#14435a 40%,#0d2c3a 100%);border-radius:0 0 30px 30px;padding:70px 20px 0;display:flex;flex-direction:column;gap:14px}
.sk-bar{height:64px;background:linear-gradient(160deg,#1b5566,#14435a 50%,#0d2c3a);border-bottom:3px solid #d9b07a;border-radius:0 0 22px 22px;display:flex;align-items:center;justify-content:center}
.skel .sk-hd .sk-l,.skel .sk-bar .sk-l{background:rgba(255,255,255,.14);animation:none;height:14px}
.sk-bar .sk-l{width:120px}.sk-hd .w1{width:42%}.sk-hd .w2{width:30%}.sk-hd .w3{width:58%;height:34px!important;margin-top:18px}
.sk-wrap{padding-top:16px}
.sk-card{background:#fff;border-radius:16px;box-shadow:var(--sh);padding:6px 14px;margin-bottom:14px}
.sk-row{display:flex;align-items:center;gap:12px;padding:12px 0}
.sk-row+.sk-row{border-top:1px solid var(--line)}
.sk-row span{flex:1;display:flex;flex-direction:column;gap:8px}
.skel .sk-c{flex:none;width:40px;height:40px;border-radius:12px}
.skel .sk-l{height:12px;width:72%}.skel .sk-l.s{width:44%;height:10px}
html[data-theme=dark] .sk-card{background:#15323f}
html[data-theme=dark] .skel .sk-wrap .sk-l,html[data-theme=dark] .skel .sk-c{background:linear-gradient(90deg,#1c3b47 25%,#244855 50%,#1c3b47 75%);background-size:200% 100%}
/* the very first paint (before the app script has drawn anything) is the home skeleton, not a spinner */
#app>.skel0{min-height:100vh}
@media (prefers-reduced-motion: reduce){
  #app>.wrap,#app>.skel>.wrap{animation:none!important}
  .acc,.acc>.acc-b,.acc-ch{transition:none!important}
  .skel .sk-l,.skel .sk-c{animation:none!important}
}

/* v7.5 connection pill (weak line / offline / checking an order) — small, top centre, never blocks taps */
.netpill{position:fixed;top:calc(8px + env(safe-area-inset-top));left:50%;z-index:400;transform:translate3d(-50%,-14px,0);opacity:0;transition:transform .2s ease,opacity .2s ease;
  background:#0d2c3a;color:#F7F3EA;border:1px solid rgba(217,176,122,.55);border-radius:20px;padding:6px 14px;font-size:12.5px;font-weight:700;white-space:nowrap;max-width:92vw;overflow:hidden;text-overflow:ellipsis;pointer-events:none;box-shadow:0 4px 12px rgba(0,0,0,.18)}
.netpill.on{transform:translate3d(-50%,0,0);opacity:1}
#netchk{top:calc(44px + env(safe-area-inset-top));background:#d9b07a;color:#0d2c3a;border-color:#d9b07a}
html[data-theme=dark] .netpill{background:#15323f}
html[data-theme=dark] #netchk{background:#d9b07a;color:#0d2c3a}
@media (prefers-reduced-motion: reduce){.netpill{transition:none}}

.hbtn.rld2.spin svg{animation:rldspin .8s linear infinite}

/* v7.9: ✕ close button in the top-left corner of every sheet (RTL), light + dark */
.cust .sheet{position:relative}
.cust .sheet-x{position:absolute;top:12px;left:12px;z-index:3;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:rgba(13,44,58,.08);color:#0d2c3a;display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .12s,background .12s}
.cust .sheet-x svg{width:18px;height:18px}
.cust .sheet-x:active{transform:scale(.9);background:rgba(13,44,58,.16)}
.cust .sheet-x+h3{padding-left:44px;min-height:30px}
html[data-theme=dark] .cust .sheet-x{background:rgba(255,255,255,.12);color:#e9f0f2}
html[data-theme=dark] .cust .sheet-x:active{background:rgba(255,255,255,.2)}