@font-face{font-family:"Camel";src:url("assets/TheYearofTheCamel-Bold.otf") format("opentype");font-weight:700;font-display:swap}
:root{
  --cream:#E7D8C5;--sand:#CBB79C;--olive:#899064;--deep:#374025;--brown:#4B3D1A;
  --paper:#FBF8F3;--mist:#F3ECE1;--line:#E4D8C6;--ink:#2E2A22;--muted:#6E6656;--red:#B5482F;--white:#FFFFFF;
  --safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--paper);color:var(--ink);font-family:"IBM Plex Sans Arabic",system-ui,sans-serif;-webkit-tap-highlight-color:transparent}
body{min-height:100dvh}
a{color:var(--deep);text-decoration:none}
button{font-family:inherit;cursor:pointer}
.camel{font-family:Camel,"IBM Plex Sans Arabic",serif;font-weight:700}
#app{max-width:480px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;background:var(--paper);position:relative}
.splash{flex:1;display:flex;align-items:center;justify-content:center;background:var(--deep)}
.splash-logo{width:160px;filter:brightness(0) invert(1);opacity:.95;animation:breathe 1.6s ease-in-out infinite}
@keyframes breathe{50%{opacity:.6}}

/* login */
.login-top{height:300px;background:var(--deep);border-radius:0 0 50% 50%/0 0 80px 80px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--paper);padding-top:var(--safe-top)}
.login-top img{width:170px;filter:brightness(0) invert(1)}
.login-top .tag{font-family:Outfit,sans-serif;font-size:13px;letter-spacing:1px;color:var(--sand)}
.login-body{flex:1;padding:30px 24px 24px;display:flex;flex-direction:column;gap:16px}
.login-body h1{margin:0;text-align:center;color:var(--deep);font-size:28px}
.field{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600}
.field input{height:52px;border-radius:14px;border:1px solid var(--line);background:var(--white);padding:0 14px;font-size:16px;font-family:Outfit,"IBM Plex Sans Arabic",sans-serif;direction:ltr;text-align:left;color:var(--ink)}
.field input:focus{outline:2px solid var(--olive);outline-offset:1px}
.btn{min-height:52px;border-radius:14px;border:none;background:var(--deep);color:var(--paper);font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 16px}
.btn[disabled]{background:var(--line);color:var(--muted);cursor:default}
.btn.ghost{background:transparent;border:1px solid var(--sand);color:var(--brown);font-weight:600}
.err{background:#F6E3DE;color:var(--red);border-radius:12px;padding:10px 12px;font-size:14px}
.hint{font-size:13px;color:var(--muted);text-align:center;line-height:1.6}

/* header */
.top{background:var(--deep);color:var(--paper);padding:calc(18px + var(--safe-top)) 18px 20px;display:flex;flex-direction:column;gap:14px}
.top-row{display:flex;align-items:center;justify-content:space-between}
.top-row img{height:34px;filter:brightness(0) invert(1)}
.iconbtn{width:44px;height:44px;border-radius:22px;border:1px solid rgba(251,248,243,.25);background:transparent;color:var(--paper);display:flex;align-items:center;justify-content:center}
.top .small{font-size:13px;color:var(--sand)}
.top h1{margin:2px 0 0;font-size:30px;line-height:1.2}
.kids{display:flex;gap:8px;flex-wrap:wrap}
.kid{flex:1;min-width:96px;min-height:44px;border-radius:14px;background:rgba(251,248,243,.1);border:1px solid rgba(251,248,243,.18);display:flex;align-items:center;gap:8px;padding:6px 8px;color:var(--paper)}
.kid .ini{width:30px;height:30px;border-radius:15px;background:var(--sand);color:var(--deep);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex-shrink:0}
.kid b{font-size:14px;font-weight:600}

main{flex:1;padding:18px 16px 96px;display:flex;flex-direction:column;gap:14px}
.card{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:14px 16px}
.arch{border-radius:120px 120px 22px 22px;padding:30px 20px 18px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.eyebrow{font-size:12px;font-weight:600;color:var(--olive);letter-spacing:.5px}
.big{font-size:26px;color:var(--deep)}
.count{display:flex;gap:6px;margin:8px 0 4px}
.count div{background:var(--mist);border-radius:10px;padding:6px 10px;min-width:48px}
.count b{display:block;font-size:18px;color:var(--deep)}
.count span{font-size:11px;color:var(--muted)}
.row2{display:flex;gap:8px;width:100%}
.row2 .btn{flex:2}.row2 .ghost{flex:1}
.tiny{font-size:11px;color:var(--muted)}
.pkg{display:flex;align-items:center;gap:14px;color:var(--ink)}
.ring{border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ring > div{border-radius:50%;background:var(--white);display:flex;align-items:center;justify-content:center;flex-direction:column;font-weight:700;color:var(--deep)}
.flex1{flex:1}
.t15{font-size:15px;font-weight:600}
.t12{font-size:12px;color:var(--muted)}
.pill{font-size:11px;font-weight:600;color:var(--deep);background:var(--cream);border-radius:8px;padding:3px 8px;white-space:nowrap}
.list{display:flex;flex-direction:column}
.li{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--mist);font-size:13px}
.li:first-child{border-top:none}
.stampcard{background:var(--mist);border-radius:18px;padding:12px 14px;display:flex;align-items:center;gap:12px}
.stampcard img{width:46px;height:46px}
.section-h{display:flex;align-items:center;justify-content:space-between}

/* package */
.back{display:flex;align-items:center;gap:10px;padding:calc(16px + var(--safe-top)) 16px 4px}
.back a{width:44px;height:44px;border-radius:22px;border:1px solid var(--line);background:var(--white);display:flex;align-items:center;justify-content:center}
.back h1{margin:0;font-size:24px;color:var(--deep)}
.hero{background:var(--deep);color:var(--paper);border-radius:22px;padding:20px;display:flex;align-items:center;gap:18px}
.hero .ring > div{background:var(--deep);color:var(--paper)}
.bar{flex:1;height:8px;border-radius:4px;background:var(--mist);overflow:hidden}
.bar i{display:block;height:8px;background:var(--olive)}

/* child */
.child-top{background:var(--cream);padding:calc(18px + var(--safe-top)) 18px 0;display:flex;align-items:flex-end;gap:12px}
.child-top img{width:120px;height:150px;object-fit:cover;border-radius:60px 60px 18px 18px;border:3px solid var(--paper)}
.bubble{flex:1;background:var(--paper);border-radius:22px 22px 6px 22px;padding:14px 16px;margin-bottom:18px}
.bubble .camel{font-size:24px;color:var(--deep)}
.sheet{flex:1;background:var(--paper);border-radius:32px 32px 0 0;margin-top:-8px;padding:22px 18px 96px;display:flex;flex-direction:column;gap:16px}
.grid5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.slot{aspect-ratio:1;border-radius:50%;border:2px dashed var(--sand);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:var(--sand)}
.slot.on{border-color:var(--olive);background:var(--mist)}
.slot.on img{width:88%;height:88%}

/* nav */
nav.tabs{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;background:var(--white);border-top:1px solid var(--line);display:flex;padding:6px 6px calc(10px + var(--safe-bottom));z-index:5}
nav.tabs a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--muted);font-size:11px;min-height:52px}
nav.tabs a.on{color:var(--deep);font-weight:700}

.install{background:var(--white);border:1px dashed var(--olive);border-radius:18px;padding:12px 14px;display:flex;gap:12px;align-items:center;font-size:13px;line-height:1.6}
.install b{color:var(--deep)}
.soon{opacity:.55}

/* الحسابات المحفوظة */
.remember{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--brown);min-height:44px}
.remember input{width:22px;height:22px;accent-color:var(--deep)}
.accs{display:flex;flex-direction:column;gap:10px}
.acc{display:flex;align-items:center;gap:8px;background:var(--white);border:1px solid var(--line);border-radius:18px;padding:6px 6px 6px 10px}
.acc-main{flex:1;display:flex;align-items:center;gap:12px;background:none;border:none;padding:8px;color:var(--ink);font-size:15px;min-height:56px;text-align:right}
.acc-ini{width:44px;height:44px;border-radius:22px;background:var(--deep);color:var(--paper);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;flex-shrink:0}
.acc-x{width:40px;height:40px;border-radius:20px;border:none;background:var(--mist);color:var(--muted);font-size:20px}