:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);--page:#E4E8F0;--bg:#F5F7FB;--surface:#FFFFFF;--ink:#1B2744;--muted:#5A6684;--line:#DCE2EE;--brand:#2C3A57;--brand-ink:#FFFFFF;--strong:#2C3A57;--soft:#E9EDF6;--me:#DCE3F2;--chrome:#1B2744;--hero:#D7AF6A;--hero-ink:#1B2744;--hi:#D7AF6A;--ok:#1B7A5C;--ok-bg:#DAF1E7;--bad:#B3303F;--bad-bg:#FBE3E6;--warn:#7A5410;--warn-bg:#F6EAD0;--wa:#128C4A;--c-p:#A8405F;--c-m:#2F5D9E;--c-s:#1F7A68;--c-q:#A87618;--c-u:#5B4B8A;--shadow:0 2px 0 rgba(27,20,69,.04)}
*,*::before,*::after{box-sizing:inherit}
html,body{height:100%;margin:0}
html{scroll-padding-top:env(safe-area-inset-top,0px);background:var(--page)}
body{background:var(--bg);color:var(--ink);font-family:"IBM Plex Sans Arabic",Tajawal,system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;font-size:15px;line-height:1.65;-webkit-tap-highlight-color:transparent;display:flex;justify-content:center;align-items:stretch}
button,input,select,textarea{font:inherit;color:inherit}
button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
#app{position:relative;width:100%;height:100%;display:flex;flex-direction:column;background:var(--bg);overflow:hidden}
@supports (height:100dvh){html,body,#app{height:100dvh}}
@media (min-width:520px){body{align-items:center;background:var(--page)}#app{width:390px;height:min(844px,calc(100% - 32px));border-radius:40px;border:7px solid var(--chrome);box-shadow:0 20px 50px rgba(10,16,32,.28)}}
.disp,header h1,.wtop h1,.price,.stat b,.hero h2,.sheet h3,.h2{font-family:Amiri,"IBM Plex Sans Arabic",Tajawal,serif;font-weight:700;letter-spacing:0}
header{display:flex;align-items:center;gap:12px;padding:14px 16px 18px;background:var(--chrome);color:#fff;border-radius:0 0 24px 24px;box-shadow:0 3px 0 var(--hi);flex:none;position:relative;z-index:2}
header h1{font-size:25px;margin:0;flex:1;line-height:1.3}
.lg{width:46px;height:46px;display:block;flex:none;object-fit:contain}
.pill{display:inline-flex;align-items:center;gap:4px;border:0;background:rgba(255,255,255,.14);color:#fff;border-radius:999px;padding:6px 8px 6px 13px;font-size:13px;cursor:pointer}
.pill svg.i{width:16px;height:16px}
.back{width:40px;height:40px;border-radius:14px;border:0;background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;cursor:pointer;flex:none}
main{flex:1;overflow-y:auto;padding:18px 16px 16px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
main>*+*{margin-top:12px}
nav{display:flex;flex:none;gap:4px;background:var(--chrome);margin:0 12px 12px;padding:6px;border-radius:26px}
nav button{flex:1;min-width:0;border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:1px;padding:7px 0 6px;font-size:11.5px;color:#AEB8D3;cursor:pointer;border-radius:20px;transition:background .15s,color .15s}
nav button.on{background:var(--hi);color:#1B2744;font-weight:600}
nav button.on svg.i{stroke-width:2.2}
svg.i{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:15px;box-shadow:var(--shadow)}
.card.tap{cursor:pointer}.card.tap:active{background:var(--soft)}
.card.tap>svg.i{color:var(--muted);transform:scaleX(-1)}
.card.course{border-inline-start:6px solid var(--cat,var(--brand))}
.c-p{--cat:var(--c-p)}.c-m{--cat:var(--c-m)}.c-s{--cat:var(--c-s)}.c-q{--cat:var(--c-q)}.c-u{--cat:var(--c-u)}
.ico{width:50px;height:50px;border-radius:16px 16px 16px 6px;background:color-mix(in srgb,var(--cat,var(--brand)) 15%,var(--surface));color:var(--cat,var(--brand));display:grid;place-items:center;flex:none}
.ico svg.i{width:26px;height:26px;stroke-width:1.8}
.row{display:flex;align-items:center;gap:10px}.row.sp{justify-content:space-between}.grow{flex:1;min-width:0}
.t1{font-weight:600}.t2{color:var(--muted);font-size:13.5px}
.price{color:var(--strong);font-size:26px;white-space:nowrap;line-height:1.3}
.price small{font-family:"IBM Plex Sans Arabic",Tajawal,sans-serif;font-size:12px;color:var(--muted)}
.h2{font-size:21px;margin:6px 0 0;display:flex;align-items:center;gap:8px}
.h2 svg.i{color:var(--strong);width:20px;height:20px}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;border:0;padding:11px 16px;font-weight:600;cursor:pointer;background:var(--brand);color:var(--brand-ink);border-radius:16px 16px 16px 6px}
.btn svg.i{width:18px;height:18px}
.btn:active{opacity:.88}
.btn.acc{background:var(--soft);color:var(--strong)}
.btn.out{background:var(--surface);color:var(--ink);border:1.5px solid var(--line)}
.btn.wa{background:var(--wa);color:#fff}
.btn.ghost{background:transparent;color:var(--strong);border:1.5px solid var(--brand)}
.btn.danger{background:var(--bad-bg);color:var(--bad)}
.btn.sm{min-height:0;width:auto;padding:8px 14px;font-size:14px;border-radius:13px 13px 13px 5px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.chip{display:inline-block;border-radius:999px;padding:3px 12px;font-size:12.5px;font-weight:600;background:var(--soft);color:var(--strong);white-space:nowrap}
.chip.ok{background:var(--ok-bg);color:var(--ok)}.chip.bad{background:var(--bad-bg);color:var(--bad)}.chip.warn{background:var(--warn-bg);color:var(--warn)}.chip.mut{background:var(--bg);color:var(--muted)}
.scroller{display:flex;gap:8px;overflow-x:auto;padding:2px 16px 6px;margin-inline:-16px;scrollbar-width:none}
.scroller::-webkit-scrollbar{display:none}
.scroller button,.seg button{border:1.5px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 15px;font-size:14px;white-space:nowrap;cursor:pointer}
.scroller button.on,.seg button.on{background:var(--brand);color:var(--brand-ink);border-color:var(--brand);font-weight:600}
.seg{display:flex;gap:8px}.seg button{flex:1}
.seg button.on.okb{background:var(--ok);border-color:var(--ok);color:#fff}
.seg button.on.badb{background:var(--bad);border-color:var(--bad);color:#fff}
.seg button.on.wnb{background:var(--hi);border-color:var(--hi);color:#1B2744}
.hero{position:relative;overflow:hidden;background:var(--hero);color:var(--hero-ink);border-radius:26px 26px 26px 8px;padding:20px}
.hero>*{position:relative}
.hero h2{margin:0 0 6px;font-size:29px;line-height:1.3}
.hero p{margin:0 0 14px;font-size:14px;max-width:100%}
.hero .badge{background:var(--chrome);color:#fff;border:0}
.badge{display:inline-flex;align-items:center;gap:8px;background:var(--surface);color:var(--strong);border-radius:999px;padding:5px 13px;font-size:13px;font-weight:600}
.banner{background:var(--warn-bg);color:var(--warn);border-radius:14px;padding:10px 12px;font-size:14px}
.note{font-size:13px;color:var(--muted)}
.empty{text-align:center;color:var(--muted);padding:28px 12px;border:1.5px dashed var(--line);border-radius:20px}
.field{display:flex;flex-direction:column;gap:4px;margin-top:10px}.field label{font-size:13.5px;color:var(--muted)}
.field input,.field select,.field textarea,.inl{border:1.5px solid var(--line);background:var(--surface);border-radius:14px;padding:10px 12px;width:100%;min-width:0}
.inl{width:auto}
.field input:focus,.field select:focus,.field textarea:focus,.inl:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent)}
.days{display:flex;flex-wrap:wrap;gap:6px}
.days button{border:1.5px solid var(--line);background:var(--surface);border-radius:11px;padding:5px 11px;font-size:14px;cursor:pointer}
.days button.on{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}
.days button svg.i{width:12px;height:12px;vertical-align:-1px}
.bubble{background:var(--surface);color:var(--ink);border-radius:16px 16px 4px 16px;padding:12px 14px;white-space:pre-line;font-size:14.5px;line-height:1.8}
.chatbg{background:color-mix(in srgb,var(--wa) 16%,var(--bg));border-radius:18px;padding:14px;margin-top:10px}
.avatar{width:40px;height:40px;border-radius:14px 14px 14px 5px;background:var(--soft);color:var(--strong);display:grid;place-items:center;font-weight:700;flex:none}
.stat{display:flex;gap:8px}
.stat div{flex:1;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:10px 6px;text-align:center}
.stat b{display:block;font-size:29px;line-height:1.3;color:var(--strong)}
.stat span{font-size:12.5px;color:var(--muted)}
.segs{display:flex;gap:3px}
.segs i{flex:1;height:9px;border-radius:5px 5px 5px 2px;background:var(--soft)}
.segs i.on{background:var(--cat,var(--brand))}
.bar{height:9px;border-radius:99px;background:var(--soft);overflow:hidden}
.bar i{display:block;height:100%;background:var(--brand);border-radius:99px}
.search{display:flex;align-items:center;gap:8px;background:var(--surface);border:1.5px solid var(--line);border-radius:16px;padding:0 12px;color:var(--muted)}
.search:focus-within{border-color:var(--brand)}
.search input{flex:1;min-width:0;border:0;background:none;padding:10px 0;outline:none;color:var(--ink)}
.msgs{display:flex;flex-direction:column;gap:8px}
.m{max-width:84%;padding:8px 12px;border-radius:18px;border-end-end-radius:5px;font-size:14.5px;line-height:1.6;background:var(--surface);border:1px solid var(--line);align-self:flex-end;overflow-wrap:anywhere}
.m.me{align-self:flex-start;background:var(--me);border-color:transparent;border-end-end-radius:18px;border-end-start-radius:5px}
.m small{display:block;font-size:11.5px;opacity:.7;margin-top:2px}
.m .who{font-weight:600;font-size:12.5px;color:var(--strong);opacity:1;margin:0 0 2px}
.att{display:flex;align-items:center;gap:10px;background:var(--soft);border-radius:14px;padding:8px 10px}
.att .ae{display:grid;color:var(--strong)}.att .ae svg.i{width:24px;height:24px}
.m.me .att{background:var(--surface)}
.lk{direction:ltr;text-align:left;font-size:12.5px;opacity:.85;word-break:break-all}
.sysm{align-self:center;background:var(--soft);color:var(--muted);font-size:12.5px;border-radius:999px;padding:3px 12px;text-align:center}
.comp{position:sticky;bottom:-16px;margin:0 -16px -16px;padding:12px 16px;background:var(--surface);border-top:1px solid var(--line)}
.ov{position:absolute;inset:0;background:rgba(10,16,32,.6);display:flex;align-items:flex-end;z-index:20}
.sheet{background:var(--surface);width:100%;max-height:90%;overflow-y:auto;border-radius:30px 30px 0 0;padding:10px 18px 20px;animation:up .2s ease-out}
@keyframes up{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
.grab{width:44px;height:5px;border-radius:5px;background:var(--hi);margin:0 auto 14px}
.sheet h3{margin:0 0 4px;font-size:25px}
.toast{position:absolute;inset-inline:16px;bottom:92px;background:var(--chrome);border-inline-start:5px solid var(--hi);color:#fff;border-radius:16px;padding:11px 14px;font-size:14px;z-index:30}
.welcome{flex:1;overflow-y:auto;display:flex;flex-direction:column}
.wtop{background:var(--chrome);color:#fff;padding:40px 22px 66px;border-radius:0 0 40px 40px;box-shadow:0 3px 0 var(--hi);flex:none;text-align:center}
.wtop .lg{width:128px;height:128px;margin:0 auto}

.wtop h1{margin:12px 0 2px;font-size:40px;line-height:1.2}
.wtop p{margin:0;color:#E3C98F;font-size:15px}
.wbody{padding:0 18px 22px;display:flex;flex-direction:column;gap:12px;margin-top:-34px;position:relative;z-index:2}
.wbody .intro{background:var(--hero);color:#1B2744;border-radius:16px 16px 16px 5px;padding:9px 14px;font-size:13.5px;font-weight:500}
@media (prefers-reduced-motion:reduce){.sheet,.wtop .lg{animation:none}nav button{transition:none}}
.splash{flex:1;background:var(--chrome);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;cursor:pointer;text-align:center;padding:24px}
.sp-frame{position:absolute;inset:14px;border:1px solid color-mix(in srgb,var(--hi) 55%,transparent);border-radius:30px 30px 130px 130px/30px 30px 100px 100px;animation:fade 1s .1s both}
.sp-logo{width:250px;height:250px;object-fit:contain;animation:rise 1.1s cubic-bezier(.2,.8,.2,1) both}
.sp-name{font-family:Amiri,serif;font-weight:700;font-size:40px;line-height:1.3;margin-top:16px;animation:fade .8s .75s both}
.sp-sub{color:var(--hi);font-size:15px;animation:fade .8s 1s both}
.sp-load{position:absolute;bottom:58px;width:120px;height:3px;border-radius:3px;background:rgba(255,255,255,.16);overflow:hidden}
.sp-load i{display:block;height:100%;background:var(--hi);transform-origin:right;animation:load 2.7s linear both}
.sp-skip{position:absolute;bottom:26px;font-size:12px;color:#8F9BB8;animation:fade .6s 1.5s both}
@keyframes rise{from{opacity:0;transform:translateY(20px) scale(.9)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes load{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.sp-frame,.sp-logo,.sp-name,.sp-sub,.sp-skip,.sp-load i{animation:none}}

/* ===== Figma-style balanced teal theme ===== */
:root{--page:#E1E8ED;--bg:#EEF3F6;--surface:#FFFFFF;--ink:#1D2E3C;--muted:#5F6F7C;--line:#DCE5EA;--brand:#2F7A93;--brand-ink:#fff;--strong:#1F5A73;--soft:#E4F0F4;--me:#D6E7ED;--chrome:#FFFFFF;--hero:#DCEBF1;--hero-ink:#1D2E3C;--hi:#2F7A93;--ok:#16825F;--ok-bg:#DDF4EA;--bad:#C23B54;--bad-bg:#FDE6EA;--warn:#8A5A0B;--warn-bg:#FBEFD5;--c-p:#D98C4A;--c-m:#4A86C5;--c-s:#2FA58C;--c-q:#E39A2D;--c-u:#7A7FB8;--shadow:0 6px 18px rgba(31,90,115,.08)}
html,body{background:var(--page)}
body{background:linear-gradient(180deg,#F3F7F9,#E6EEF2)}
#app{background:linear-gradient(180deg,#F4F8FA 0%,#E6EEF2 100%)}
@media (min-width:520px){#app{border:7px solid #fff;box-shadow:0 20px 50px rgba(31,90,115,.22)}}
header{background:rgba(255,255,255,.85);color:var(--ink);border-radius:0 0 26px 26px;box-shadow:0 6px 18px rgba(31,90,115,.08);backdrop-filter:blur(8px)}
header h1{color:var(--ink);font-size:24px}
.lg{border-radius:14px}
.pill,.back{background:var(--soft);color:var(--strong)}
.card{border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow)}
.card.tap:active{background:#F2F8FA}
.card.course{border-inline-start:0}
.ico{border-radius:16px;background:color-mix(in srgb,var(--cat,var(--brand)) 14%,#fff)}
.btn{border-radius:16px;background:linear-gradient(135deg,#3E90A8,#266E88);box-shadow:0 8px 16px rgba(38,110,136,.28)}
.btn.acc{background:var(--soft);color:var(--strong);box-shadow:none}
.btn.out{background:#fff;box-shadow:none}
.btn.ghost{background:#fff;color:var(--strong);border:1.5px solid #BBD3DC;box-shadow:none}
.btn.danger{background:var(--bad-bg);color:var(--bad);box-shadow:none}
.btn.wa{background:linear-gradient(135deg,#1FA463,#128C4A);box-shadow:0 8px 16px rgba(18,140,74,.25)}
.btn.sm{border-radius:14px}
.btn[disabled]{box-shadow:none}
.price{color:var(--strong)}
.chip{background:var(--soft);color:var(--strong)}
nav{background:#fff;border-radius:24px;box-shadow:0 8px 24px rgba(31,90,115,.14);margin:0 14px 14px}
nav button{color:#8A9AA6}
nav button.on{background:var(--soft);color:var(--strong)}
.scroller button,.seg button{background:#fff;border-color:var(--line);color:var(--muted)}
.scroller button.on,.seg button.on{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 6px 12px rgba(47,122,147,.25)}
.seg button.on.wnb{background:var(--c-q);border-color:var(--c-q);color:#fff}
.days button.on{background:var(--brand);border-color:var(--brand)}
.hero{background:linear-gradient(135deg,#DCEBF1,#E3EFE8);border-radius:26px;color:var(--ink);box-shadow:var(--shadow)}
.hero h2{color:var(--strong)}
.hero .badge{background:#fff;color:var(--strong)}
.badge{background:#fff;color:var(--strong)}
.stat div{border-radius:18px;box-shadow:var(--shadow)}
.stat b{color:var(--strong)}
.search,.field input,.field select,.field textarea,.inl{border-radius:16px;background:#fff}
.bubble,.m{border-radius:18px}
.m.me{background:var(--me)}
.avatar{background:var(--soft);color:var(--strong);border-radius:14px}
.segs i.on,.bar i{background:linear-gradient(90deg,#3E90A8,#266E88)}
.grab{background:#BBD3DC}
.sheet{border-radius:30px 30px 0 0}
.toast{background:#1D2E3C;color:#fff;border-inline-start:5px solid var(--brand)}
.empty{background:rgba(255,255,255,.6);border-color:#BBD3DC}
.sp-load i{background:#fff}
/* splash + welcome */
.splash{background:linear-gradient(180deg,#3E90A8,#1F5A73);color:#fff}
.sp-frame{border-color:rgba(255,255,255,.35)}
.sp-sub{color:#DCEBF1}
.sp-skip{color:#CFE0E6}
.sp-load{background:rgba(255,255,255,.25)}
.welcome{background:transparent}
.wtop{background:transparent;box-shadow:none;color:var(--ink);padding:18px 18px 0;text-align:right;display:flex;align-items:center;gap:10px;border-radius:0}
.wtop .lg{width:44px;height:44px;margin:0}
.wtop h1{font-size:22px;margin:0;flex:1}
.wtop .tag{width:34px;height:34px;border-radius:50%;background:var(--soft);color:var(--strong);display:grid;place-items:center;font-weight:700}
.wbody{margin-top:0;padding-top:10px}
.w-ill{background:linear-gradient(135deg,#E1EEF2,#E6F0EA);border-radius:28px;padding:10px 10px 4px;box-shadow:var(--shadow);border:1px solid #fff}
.w-ill svg{width:100%;height:auto;display:block}
.w-title{font-family:Amiri,serif;font-weight:700;font-size:30px;text-align:center;color:var(--strong);margin:6px 0 0;line-height:1.3}
.w-sub{text-align:center;color:var(--muted);font-size:14px;margin:0 8px}
.wbody .intro{background:#fff;color:var(--ink);border-radius:16px;box-shadow:var(--shadow);text-align:center}
.cnt{direction:ltr;display:flex;align-items:baseline;gap:4px;flex:none}
.cnt b{font-family:Amiri,serif;font-size:36px;line-height:1;color:var(--strong)}
.cnt span{font-size:14px;color:var(--muted)}
.trk{background:var(--soft);border:1.5px solid var(--brand);border-radius:18px;padding:12px;margin-bottom:10px}
.btn.yes{background:var(--ok);box-shadow:none;color:#fff}
.sysm.ok{background:var(--ok-bg);color:var(--ok);font-weight:600}
.sysm.bad{background:var(--bad-bg);color:var(--bad);font-weight:600}