/* الصديقان — نموذج الشكل (المرحلة 2)
   الفكرة: بوتيك نباتي ملكي. أخضر غامق للمساحات المهمة، كريمي للورق، وخط ذهبي رفيع للإطارات والزخرفة بس.
   الخط: Cairo للكلام والعناوين (خط الموقع) · El Messiri وTajawal بدايل للعناوين من لوحة الشكل · Fraunces للأرقام. */
:root{
  --deep:#1A2E25; --site:#456449;
  --brand:#1A2E25; --brand-lo:#13231C; --touch:#456449;
  --bg:#FAF8F5; --paper:#FFFFFF; --sand:#F4EDDF; --mist:#EEF2EC;
  --ink:#1A2E25; --ink-2:#4A5B52; --sand-ink:#6F5327;
  --on-brand:#F6F0E4; --on-brand-2:#EAE7DA;
  --gold:#C5A880; --gold-rgb:197,168,128;
  --line:rgba(var(--gold-rgb),.62); --line-soft:rgba(var(--gold-rgb),.34);
  --rule:#E4DFD3; --field:#CFC9BB;
  --f-body:"Cairo","Segoe UI",Tahoma,sans-serif;
  --f-display:"Cairo","Segoe UI",Tahoma,sans-serif; --hs:.8; --hw:700; --hl:1.4;
  --f-num:"Fraunces","Cairo",Georgia,serif;
  --f-tag:var(--f-display); --tag-size:15px; --tag-style:normal; --tag-w:500;
  --shadow:0 1px 2px rgba(26,46,37,.04),0 14px 30px -18px rgba(26,46,37,.22);
  --r-card:20px; --r-ctl:14px;
  --tab-h:78px;
}
html[data-base="site"]{ --brand:#456449; --brand-lo:#3B573F; --touch:#1A2E25; }
html[data-gold="2"]{ --gold:#B39160; --gold-rgb:179,145,96; }
html[data-gold="3"]{ --gold:#D6BE98; --gold-rgb:214,190,152; }
html[data-font="2"]{ --f-display:"El Messiri","Cairo",sans-serif; --hs:.9; }
html[data-font="3"]{ --f-display:"Tajawal","Cairo",sans-serif; --hs:.88; --tag-size:16px; }

*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{height:100%;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{min-height:100%;background:var(--bg);color:var(--ink);font:500 17px/1.6 var(--f-body);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overflow-x:hidden}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:inherit;padding:0}
input,textarea,select{font:inherit;color:inherit;margin:0}
img{display:block;max-width:100%}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--touch);outline-offset:3px;border-radius:8px}

/* الأرقام: سيريف، من الشمال لليمين، ومعزولة جوه الجملة العربي */
.n{font-family:var(--f-num);font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1;direction:ltr;unicode-bidi:isolate;font-weight:600;letter-spacing:.01em;white-space:nowrap}
.cur{font-size:max(.72em,13px);font-weight:700;margin-inline-start:.26em}
.egp{white-space:nowrap}
.ic{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ic.s{width:20px;height:20px}
.ic.xs{width:17px;height:17px}

/* ---------- الهيكل ---------- */
#app{min-height:100vh;min-height:100dvh}
.side{display:none}
#view{max-width:720px;margin:0 auto;padding-bottom:calc(var(--tab-h) + 44px + env(safe-area-inset-bottom,0px))}
#view.no-tabs{padding-bottom:140px}
.page{padding:0 max(16px,env(safe-area-inset-left,0px)) 0 max(16px,env(safe-area-inset-right,0px));display:flex;flex-direction:column;gap:22px}
.enter{animation:rise .34s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.stagger>*{animation:rise .42s cubic-bezier(.2,.7,.2,1) both}
.stagger>*:nth-child(2){animation-delay:.04s}.stagger>*:nth-child(3){animation-delay:.08s}.stagger>*:nth-child(4){animation-delay:.12s}.stagger>*:nth-child(5){animation-delay:.16s}.stagger>*:nth-child(6){animation-delay:.2s}.stagger>*:nth-child(n+7){animation-delay:.24s}

/* شريط العنوان لكل الشاشات ما عدا الرئيسية */
.top{padding:22px 16px 6px;display:flex;align-items:center;gap:12px;min-height:76px}
.top h1{font:var(--hw) calc(33px*var(--hs))/var(--hl) var(--f-display);flex:1;min-width:0}
.top .sub{font-size:15px;color:var(--ink-2);font-weight:600}
.top-btn{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);background:var(--paper);flex:none}
.top-link{min-height:48px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:var(--paper);font-weight:700;font-size:15px;display:inline-flex;align-items:center;gap:8px;flex:none}
.orn{display:block;width:150px;height:14px;margin:2px 16px 14px;fill:none;stroke:var(--gold);stroke-width:1}
.orn.center{margin-inline:auto}

/* ---------- الرئيسية ---------- */
.hero{position:relative;overflow:hidden;color:var(--on-brand);background:linear-gradient(168deg,var(--brand) 0%,var(--brand) 46%,var(--brand-lo) 100%);padding:18px 16px 28px;border-radius:0 0 30px 30px;margin-bottom:24px}
.hero::before{content:"";position:absolute;inset-inline-end:-58px;top:-26px;width:250px;height:284px;background:var(--gold);-webkit-mask:var(--rose) center/contain no-repeat;mask:var(--rose) center/contain no-repeat;opacity:.17;pointer-events:none}
.hero-top{position:relative;display:flex;align-items:center;justify-content:space-between;min-height:56px}
.hero-logo{height:52px;width:auto}
.brand{display:flex;flex-direction:column;align-items:center;gap:1px}
.tagline{font-family:var(--f-tag);font-size:var(--tag-size);font-style:var(--tag-style);font-weight:var(--tag-w);line-height:1.5;color:var(--on-brand-2);text-align:center;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.hero-greet{position:relative;margin:20px 2px 20px}
.hero-greet p{font-size:15px;font-weight:600;color:var(--on-brand-2)}
.hero-greet h1{font:var(--hw) calc(38px*var(--hs))/var(--hl) var(--f-display);letter-spacing:0}
.squares{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sq{position:relative;aspect-ratio:1/1.08;min-height:192px;border-radius:24px;border:1px solid var(--line);background:rgba(255,255,255,.05);padding:19px 18px 17px;display:flex;flex-direction:column;color:var(--on-brand);transition:transform .2s,background .2s}
.sq::after{content:"";position:absolute;inset:5px;border-radius:19px;border:1px solid var(--line-soft);pointer-events:none}
.sq:active{transform:scale(.98);background:rgba(255,255,255,.09)}
.sq-lbl{display:flex;align-items:center;gap:8px;font-weight:700;font-size:16px;color:var(--on-brand-2)}
.sq-lbl .ic{color:var(--gold)}
.sq-num{font-size:56px;line-height:1.04;margin-top:auto;font-weight:500;text-align:right}
.sq-num.long{font-size:44px}
.sq-cap{font-size:15px;font-weight:600;color:var(--on-brand-2);margin-top:2px}
.sq-foot{margin-top:9px;padding-top:8px;border-top:1px solid var(--line-soft);font-size:15px;font-weight:600;display:flex;gap:6px 12px;flex-wrap:wrap;align-items:baseline}
.sq-foot b{font-weight:700}
.sq-foot .n{font-size:18px}
.sq-foot .soft{color:var(--on-brand-2)}

.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}
.sec-h h2{font:var(--hw) calc(28px*var(--hs))/var(--hl) var(--f-display)}
.sec-h a,.sec-h button{font-size:15px;font-weight:700;color:var(--touch);min-height:44px;display:inline-flex;align-items:center;gap:4px}

.days{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.day{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:14px 14px 12px;display:flex;flex-direction:column;box-shadow:var(--shadow);transition:transform .2s}
.day:active{transform:scale(.97)}
.day-lbl{font-size:16px;font-weight:700}
.day-date{font-size:14px;color:var(--ink-2);font-weight:600;line-height:1.3}
.day-num{font-size:40px;line-height:1.1;margin-top:8px;font-weight:500;text-align:right}
.day-cap{font-size:14px;color:var(--ink-2);font-weight:600}

.inc-card{display:flex;align-items:center;gap:14px;background:var(--sand);border-radius:var(--r-card);padding:16px;border:1px dashed rgba(111,83,39,.42);color:var(--sand-ink);width:100%}
.inc-card .n{font-size:34px;font-weight:500;line-height:1}
.inc-card b{display:block;font-size:17px;font-weight:700}
.inc-card small{display:block;font-size:15px;font-weight:600}
.inc-card .ic:last-child{margin-inline-start:auto}

/* أقرب الحجوزات: ساق ذهبي رفيع وعليه براعم */
.tl{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow);padding:6px 16px}
.tl-item{position:relative;display:grid;grid-template-columns:62px 14px minmax(0,1fr);column-gap:12px;padding:16px 0;width:100%;align-items:start}
.tl-item+.tl-item{border-top:1px solid var(--rule)}
.tl-time{text-align:center;line-height:1.15;padding-top:2px}
.tl-time .n{font-size:23px;font-weight:600;display:block}
.tl-time small{font-size:14px;font-weight:700;color:var(--ink-2)}
.tl-rail{position:relative;align-self:stretch}
.tl-rail::before{content:"";position:absolute;inset-inline-start:6px;top:-16px;bottom:-16px;width:1px;background:var(--line)}
.tl-item:first-child .tl-rail::before{top:10px}
.tl-item:last-child .tl-rail::before{bottom:calc(100% - 14px)}
.tl-rail::after{content:"";position:absolute;inset-inline-start:1px;top:8px;width:11px;height:11px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--paper);border:1.5px solid var(--gold)}
.tl-item.is-progress .tl-rail::after{background:var(--gold)}
.tl-body{min-width:0;display:flex;flex-direction:column;gap:5px}
.tl-name{font-size:18px;font-weight:700;line-height:1.35;overflow-wrap:anywhere}
.tl-prod{font-size:15px;color:var(--ink-2);font-weight:600;line-height:1.45}
.tl-meta{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;margin-top:3px}
.rem{color:var(--sand-ink);font-weight:700;font-size:15px}
.rem .n{font-size:17px}
.paid-ok{color:var(--touch);font-weight:700;font-size:15px;display:inline-flex;align-items:center;gap:4px}

/* شارات الحالة: درجة الأخضر بتزيد مع تقدم الحجز */
.chip{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:2px 11px;border-radius:999px;font-size:14px;font-weight:700;line-height:1.3;white-space:nowrap}
.chip::before{content:"";width:7px;height:7px;border-radius:50%;flex:none}
.st-new{border:1px solid #AEB8B0;color:#2B3D33;background:var(--paper)}
.st-new::before{border:1.5px solid #6C7B72}
.st-confirmed{background:#E4EDE2;color:#274131}
.st-confirmed::before{background:#456449}
.st-progress{background:#456449;color:#F6F0E4}
.st-progress::before{background:#F6F0E4}
.st-delivered{background:#1A2E25;color:#F6F0E4}
.st-delivered::before{background:var(--gold)}
.st-cancelled{background:#ECEBE7;color:#555C57}
.st-cancelled::before{background:#8A908B}
.tag{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:2px 10px;border-radius:999px;font-size:14px;font-weight:700;color:var(--ink-2);background:var(--mist);white-space:nowrap}
.tag .ic{width:16px;height:16px}
.tag.inc{background:var(--sand);color:var(--sand-ink);border:1px dashed rgba(111,83,39,.42)}

/* ---------- الحجوزات ---------- */
.search{position:relative}
.search .ic{position:absolute;inset-inline-start:16px;top:50%;transform:translateY(-50%);color:var(--ink-2)}
.search input{width:100%;height:56px;border-radius:999px;border:1px solid var(--field);background:var(--paper);padding-inline:50px 18px;font-size:17px;font-weight:600;outline:0;transition:border-color .2s,box-shadow .2s}
.search input:focus,.fld:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(var(--gold-rgb),.42)}
.search input::placeholder,.fld::placeholder{color:#6A776F;font-weight:500}
.tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--rule);margin-inline:-16px;padding-inline:16px}
.tabs::-webkit-scrollbar{display:none}
.tab{position:relative;min-height:52px;padding:0 13px;font-weight:700;font-size:16px;color:var(--ink-2);display:inline-flex;align-items:center;gap:7px;white-space:nowrap;flex:none}
.tab .n{font-size:14px;min-width:24px;height:24px;border-radius:999px;background:var(--mist);display:inline-grid;place-items:center;padding:0 6px;color:var(--ink-2)}
.tab.on{color:var(--ink)}
.tab.on::after{content:"";position:absolute;inset-inline:10px;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--brand)}
.tab.on .n{background:var(--brand);color:var(--on-brand)}
.filters{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding:2px 16px}
.filters::-webkit-scrollbar{display:none}
.fchip{min-height:44px;padding:0 15px;border-radius:999px;border:1px solid var(--field);background:var(--paper);font-size:15px;font-weight:700;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;flex:none;transition:background .2s,color .2s,border-color .2s}
.fchip.on{background:var(--brand);color:var(--on-brand);border-color:var(--brand)}
.fchip.due{border-style:dashed;border-color:rgba(111,83,39,.5);color:var(--sand-ink);background:var(--sand)}
.fchip.due.on{background:var(--sand-ink);color:#FBF6EC;border-style:solid;border-color:var(--sand-ink)}
.fsep{width:1px;background:var(--rule);flex:none;margin:8px 2px}
.due-sum{background:var(--sand);color:var(--sand-ink);border-radius:var(--r-card);padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.due-sum span{font-size:15px;font-weight:700}
.due-sum .big{font-size:32px;font-weight:500;line-height:1.1}
.grp-h{font-size:15px;font-weight:700;color:var(--ink-2);display:flex;align-items:center;gap:10px;margin:6px 2px -8px}
.grp-h::after{content:"";flex:1;height:1px;background:var(--line-soft)}
.list{display:grid;gap:12px}
.bk{display:grid;grid-template-columns:66px minmax(0,1fr);gap:14px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:14px;box-shadow:var(--shadow);width:100%;transition:transform .2s,box-shadow .2s}
.bk:active{transform:scale(.985)}
.bk.flash{animation:flash 1.6s ease-out}
@keyframes flash{0%,30%{box-shadow:0 0 0 3px rgba(var(--gold-rgb),.9),var(--shadow)}100%{box-shadow:var(--shadow)}}
.bk.is-cancelled{background:#F6F4F0;box-shadow:none;border-color:var(--rule)}
.bk.is-cancelled .arch img{filter:grayscale(1);opacity:.6}
.bk.is-cancelled .bk-name{color:#555C57}
.arch{width:66px;height:84px;border-radius:999px 999px 12px 12px;overflow:hidden;border:1px solid var(--line);background:var(--mist);display:grid;place-items:center;color:var(--touch);padding:3px;flex:none}
.arch img{width:100%;height:100%;object-fit:cover;border-radius:999px 999px 9px 9px}
.arch.sm{width:50px;height:64px}
.bk-main{min-width:0;display:flex;flex-direction:column;gap:5px}
.bk-r1{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.bk-name{font-size:18px;font-weight:700;line-height:1.35;min-width:0;overflow-wrap:anywhere}
.bk-time{font-size:15px;font-weight:700;white-space:nowrap;color:var(--ink)}
.bk-time .n{font-size:19px}
.bk-prod{font-size:15px;color:var(--ink-2);font-weight:600;line-height:1.45}
.bk-meta{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center}
.bk-foot{display:flex;justify-content:space-between;align-items:baseline;gap:10px;border-top:1px solid var(--rule);padding-top:8px;margin-top:4px;font-size:15px;font-weight:600;color:var(--ink-2)}
.inc-line{color:var(--sand-ink);font-size:15px;font-weight:700;line-height:1.45}
.empty{text-align:center;padding:34px 16px;color:var(--ink-2);font-weight:600}
.empty svg{width:70px;height:98px;margin:0 auto 10px;stroke:var(--gold);fill:none;stroke-width:1}
.empty b{display:block;font:var(--hw) calc(24px*var(--hs))/1.5 var(--f-display);color:var(--ink)}

/* ---------- بطاقات عامة ---------- */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow);padding:18px 16px}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.card-h h2{font:var(--hw) calc(26px*var(--hs))/var(--hl) var(--f-display)}
.card-h .hint{font-size:14px;font-weight:700;color:var(--ink-2)}
.lbl{font-size:15px;font-weight:700;color:var(--ink-2);display:block;margin-bottom:6px}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;font-weight:600}
.row+.row{border-top:1px solid var(--rule)}
.row>span:first-child{color:var(--ink-2)}
.row .n{font-size:19px}
.row.total{font-weight:800;font-size:18px}
.row.total>span:first-child{color:var(--ink)}
.row.total .n{font-size:24px}
.note-q{position:relative;font-size:18px;font-weight:600;line-height:1.7;padding:2px 14px 2px 0;border-inline-start:2px solid var(--gold)}
.muted{color:var(--ink-2)}
.small{font-size:15px;font-weight:600}
.calm{background:var(--sand);color:var(--sand-ink);border-radius:16px;padding:14px 16px;font-size:15px;font-weight:700;line-height:1.6;display:flex;gap:10px;align-items:flex-start}
.calm .ic{margin-top:2px}
.soft-note{background:var(--mist);color:#2F4337;border-radius:16px;padding:12px 16px;font-size:15px;font-weight:600;line-height:1.6;display:flex;gap:10px;align-items:flex-start}

/* أزرار */
.btn{min-height:56px;padding:0 22px;border-radius:16px;font-weight:700;font-size:18px;display:inline-flex;align-items:center;justify-content:center;gap:10px;transition:transform .15s,background .2s,opacity .2s;text-align:center;line-height:1.3}
.btn:active{transform:scale(.98)}
.btn.primary{background:var(--brand);color:var(--on-brand);box-shadow:inset 0 0 0 4px var(--brand),inset 0 0 0 5px var(--line)}
.btn.primary .ic{color:var(--gold)}
.btn.line{border:1px solid var(--brand);background:var(--paper)}
.btn.soft{background:var(--mist);color:var(--ink)}
.btn.quiet{color:var(--ink-2);font-size:16px;min-height:48px;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:6px}
.btn.wa{background:var(--paper);border:1px solid var(--touch);color:var(--touch)}
.btn.block{width:100%}
.btn.sm{min-height:48px;font-size:16px;padding:0 16px;border-radius:14px}
.btn[disabled]{opacity:.55;cursor:default}
.btn-row{display:flex;gap:10px;flex-wrap:wrap}
.btn-row>.btn{flex:1 1 150px}

/* ---------- تفاصيل الحجز ---------- */
.stepper{display:grid;grid-template-columns:repeat(4,1fr);margin:6px 0 16px}
.step{position:relative;text-align:center;font-size:14px;font-weight:700;color:var(--ink-2);padding-top:30px;line-height:1.35}
.step::before{content:"";position:absolute;top:10px;inset-inline:0;height:1px;background:var(--line)}
.step:first-child::before{inset-inline-start:50%}
.step:last-child::before{inset-inline-end:50%}
.step i{position:absolute;top:0;left:50%;margin-left:-11px;width:22px;height:22px;border-radius:50%;background:var(--paper);border:1.5px solid var(--gold);display:grid;place-items:center;color:var(--on-brand)}
.step i .ic{width:13px;height:13px;stroke-width:2.4;opacity:0}
.step.done i{background:var(--brand);border-color:var(--brand)}
.step.done i .ic{opacity:1}
.step.now{color:var(--ink)}
.step.now i{background:var(--brand);border-color:var(--brand);box-shadow:0 0 0 4px var(--paper),0 0 0 5px var(--gold)}
.cust{display:flex;align-items:center;gap:14px}
.cust-av{width:54px;height:54px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font:var(--hw) calc(26px*var(--hs))/1 var(--f-display);color:var(--touch);background:var(--mist);flex:none}
.av-btn{position:relative;flex:none;display:block}
.av-big{width:68px;height:68px}
.av-badge{position:absolute;bottom:-2px;inset-inline-start:-2px;width:28px;height:28px;border-radius:50%;background:var(--brand);color:var(--on-brand);display:grid;place-items:center;border:2px solid var(--paper)}
.cust-name{font-size:20px;font-weight:700;line-height:1.35}
.cust-ph{font-size:17px;color:var(--ink-2)}
.item{display:grid;grid-template-columns:50px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 0}
.item+.item{border-top:1px solid var(--rule)}
.item-name{font-weight:700;font-size:17px;line-height:1.4}
.item-sub{font-size:14px;color:var(--ink-2);font-weight:600;line-height:1.5}
.item-price{text-align:end;white-space:nowrap}
.item-price .n{font-size:19px}
.kv{display:grid;grid-template-columns:28px minmax(0,1fr);gap:4px 10px;align-items:start}
.kv .ic{color:var(--touch);margin-top:3px}
.kv>div{min-width:0;padding-bottom:10px}
.kv>div>b{font-weight:700;font-size:18px;display:block;line-height:1.5}
.kv>div>span{font-size:15px;color:var(--ink-2);font-weight:600;display:block}
.trio{display:grid;grid-template-columns:repeat(3,1fr);text-align:center;margin:4px 0 14px}
.trio>div{padding:4px 4px}
.trio>div+div{border-inline-start:1px solid var(--line)}
.trio small{display:block;font-size:14px;font-weight:700;color:var(--ink-2)}
.trio .n{font-size:28px;font-weight:500;display:block;line-height:1.25}
.trio .is-rem small,.trio .is-rem .n{color:var(--sand-ink)}
.pay{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 0;width:100%}
.pay+.pay{border-top:1px solid var(--rule)}
.pay-ic{width:40px;height:40px;border-radius:12px;background:var(--mist);display:grid;place-items:center;color:var(--touch)}
.pay b{font-size:16px;font-weight:700;display:block;line-height:1.4}
.pay small{font-size:14px;color:var(--ink-2);font-weight:600;display:block;line-height:1.5}
.pay .n{font-size:19px}
.pay.off b,.pay.off .n{text-decoration:line-through;color:#5A615C}
.final{background:linear-gradient(180deg,#FFFDF8,var(--paper));border-color:var(--gold)}
.final-res{background:var(--brand);color:var(--on-brand);border-radius:16px;padding:6px 16px;margin-top:14px;box-shadow:inset 0 0 0 4px var(--brand),inset 0 0 0 5px var(--line)}
.final-res .row{border-color:var(--line-soft)}
.final-res .row>span:first-child{color:var(--on-brand-2)}
.final-res .row.total>span:first-child{color:var(--on-brand)}
.est{font-size:14px;font-weight:700;color:var(--sand-ink);background:var(--sand);padding:1px 9px;border-radius:999px;margin-inline-start:6px}

/* ---------- الفورم ---------- */
.fld{width:100%;min-height:56px;border-radius:var(--r-ctl);border:1px solid var(--field);background:var(--paper);padding:12px 16px;font-size:18px;font-weight:600;outline:0;transition:border-color .2s,box-shadow .2s}
textarea.fld{resize:vertical;min-height:92px;line-height:1.7}
.fld.num{font-family:var(--f-num);direction:ltr;text-align:right;font-size:21px;letter-spacing:.03em}
.fld.err{border-color:var(--sand-ink);box-shadow:0 0 0 3px rgba(111,83,39,.18)}
.fgrp{display:flex;flex-direction:column}
.fgrp+.fgrp{margin-top:16px}
.fmsg{font-size:15px;font-weight:700;color:var(--sand-ink);margin-top:6px}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:10px}
.seg button{min-height:60px;border-radius:var(--r-ctl);border:1px solid var(--field);background:var(--paper);font-weight:700;font-size:17px;display:flex;align-items:center;justify-content:center;gap:9px;transition:background .2s,color .2s,border-color .2s;padding:6px 8px;line-height:1.3;text-align:center}
.seg button.on{background:var(--brand);color:var(--on-brand);border-color:var(--brand);box-shadow:inset 0 0 0 3px var(--brand),inset 0 0 0 4px var(--line)}
.seg button.on .ic{color:var(--gold)}
.seg.sm button{min-height:50px;font-size:16px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.step-no{width:30px;height:30px;border-radius:50%;border:1px solid var(--gold);display:inline-grid;place-items:center;font-size:16px;margin-left:14px;color:var(--ink);vertical-align:middle}
.chips.big .fchip{min-height:50px;font-size:16px;padding:0 17px}
.pickwrap{position:relative;display:inline-flex}
.ghost{position:absolute;inset-inline-start:0;bottom:0;width:1px;height:1px;opacity:0;pointer-events:none;border:0;padding:0}
.newarea{margin-top:12px;padding:14px 14px 4px;border-radius:16px;background:var(--mist);animation:rise .3s both}
.addarea{display:grid;grid-template-columns:minmax(0,1fr) 104px;gap:8px;margin-top:10px}
.addarea .mini{width:100%;min-height:56px}
.addarea .btn{grid-column:1/-1}
.found{display:flex;gap:12px;align-items:center;background:var(--mist);border-radius:14px;padding:12px 14px;margin-top:10px;animation:rise .3s both}
.found b{display:block;font-weight:700}
.found small{display:block;font-size:14px;color:var(--ink-2);font-weight:600}
.fitem{display:grid;grid-template-columns:50px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--rule)}
.qty{display:inline-flex;align-items:center;border:1px solid var(--field);border-radius:999px;background:var(--paper)}
.qty button{width:44px;height:44px;display:grid;place-items:center;font-size:22px;font-weight:600}
.qty .n{min-width:22px;text-align:center;font-size:18px}
.addbar{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.savebar{position:fixed;inset-inline:0;bottom:0;z-index:30;background:rgba(250,248,245,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:12px max(16px,env(safe-area-inset-left,0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-right,0px))}
.savebar-in{max-width:688px;margin:0 auto;display:flex;align-items:center;gap:14px}
.savebar .sum{flex:1;min-width:0;line-height:1.35}
.savebar .sum small{display:block;font-size:14px;font-weight:700;color:var(--ink-2)}
.savebar .sum .n{font-size:24px}
.savebar .btn{flex:none;min-width:136px}

/* ---------- المشتريات ---------- */
.buy-hero{background:linear-gradient(168deg,var(--brand),var(--brand-lo));color:var(--on-brand);border-radius:24px;padding:20px 18px;position:relative;overflow:hidden;box-shadow:inset 0 0 0 5px var(--brand),inset 0 0 0 6px var(--line-soft)}
.buy-hero h2{font:var(--hw) calc(28px*var(--hs))/var(--hl) var(--f-display)}
.buy-hero p{font-size:15px;font-weight:600;color:var(--on-brand-2)}
.buy-stats{display:flex;gap:22px;margin-top:14px;flex-wrap:wrap}
.buy-stats small{display:block;font-size:14px;font-weight:700;color:var(--on-brand-2)}
.buy-stats .n{font-size:30px;font-weight:500}
.prog{height:3px;border-radius:3px;background:rgba(255,255,255,.16);margin-top:14px;overflow:hidden}
.prog i{display:block;height:100%;background:var(--gold);border-radius:3px;transition:width .5s cubic-bezier(.2,.7,.2,1)}
.buy{display:grid;grid-template-columns:minmax(0,1fr) auto 56px;gap:12px;align-items:center;padding:14px 0}
.buy+.buy{border-top:1px solid var(--rule)}
.buy-name{font-size:19px;font-weight:700;line-height:1.35;transition:color .2s}
.buy-who{font-size:14px;color:var(--ink-2);font-weight:600;line-height:1.55}
.buy-qty{text-align:center;line-height:1.2;min-width:54px}
.buy-qty .n{font-size:30px;font-weight:500;display:block}
.buy-qty small{font-size:14px;font-weight:700;color:var(--ink-2)}
.tick{width:52px;height:52px;border-radius:50%;border:1.5px solid var(--gold);display:grid;place-items:center;color:var(--on-brand);background:var(--paper);transition:background .25s,border-color .25s,transform .25s}
.tick .ic{stroke-width:2.2;transform:scale(0);transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.buy.done .tick{background:var(--brand);border-color:var(--brand)}
.buy.done .tick .ic{transform:scale(1)}
.buy.done .buy-name{color:var(--ink-2)}
.buy.done .buy-qty .n{color:var(--ink-2)}
.tick-lbl{display:block;font-size:14px;font-weight:700;text-align:center;color:var(--ink-2);margin-top:2px}
.dashed{border-style:dashed;box-shadow:none;background:transparent}

/* ---------- الإعدادات ---------- */
.me{display:flex;align-items:center;gap:14px}
.acc{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow);overflow:hidden}
.acc-h{display:grid;grid-template-columns:46px minmax(0,1fr) 24px;gap:12px;align-items:center;padding:14px 16px;width:100%;min-height:76px}
.acc-ic{width:46px;height:46px;border-radius:50% 50% 14px 14px;border:1px solid var(--line);display:grid;place-items:center;color:var(--touch);background:var(--mist)}
.acc-h b{display:block;font-size:18px;font-weight:700;line-height:1.35}
.acc-h small{display:block;font-size:14px;color:var(--ink-2);font-weight:600;line-height:1.5}
.acc-h .chev{transition:transform .25s;color:var(--ink-2)}
.acc.open .chev{transform:rotate(-90deg)}
.acc-b{padding:2px 16px 18px;animation:rise .3s both}
.set-t{font-size:15px;font-weight:800;color:var(--ink);margin:18px 0 6px;display:flex;align-items:center;gap:10px}
.set-t::after{content:"";flex:1;height:1px;background:var(--line-soft)}
.srow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;min-height:54px;font-weight:600;font-size:16px}
.srow+.srow{border-top:1px solid var(--rule)}
.srow>span:first-child{min-width:0}
.srow small{display:block;font-size:14px;color:var(--ink-2);font-weight:600;line-height:1.5}
.srow .val{font-weight:700;text-align:end;white-space:nowrap}
.srow .val .n{font-size:18px}
.sw{position:relative;width:56px;height:34px;border-radius:999px;background:#C9CEC8;flex:none;transition:background .25s}
.sw::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:28px;height:28px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .25s cubic-bezier(.3,1.3,.5,1)}
.sw.on{background:var(--brand)}
.sw.on::after{transform:translateX(-22px)}
.mini{width:92px;min-height:46px;text-align:center;padding:6px 8px;font-size:19px}
.logos{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.logo-box{border-radius:16px;padding:18px 12px;display:grid;place-items:center;gap:8px;border:1px solid var(--line);text-align:center;font-size:14px;font-weight:700}
.logo-box img{height:46px;width:auto}
.logo-box.dark{background:var(--brand);color:var(--on-brand-2)}
.locked{background:var(--mist);border-radius:14px;padding:12px 14px;display:flex;gap:10px;align-items:center;font-size:15px;font-weight:700;margin-top:10px}

/* ---------- شريط التنقل ---------- */
.tabbar{position:fixed;inset-inline:0;bottom:0;z-index:20;background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:0 max(6px,env(safe-area-inset-left,0px)) env(safe-area-inset-bottom,0px) max(6px,env(safe-area-inset-right,0px))}
.tabbar-in{max-width:720px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr 92px 1fr 1fr;height:var(--tab-h);align-items:center}
.tb{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:100%;font-size:14px;font-weight:700;color:var(--ink-2);position:relative;transition:color .2s}
.tb.on{color:var(--ink)}
.tb.on::before{content:"";position:absolute;top:-1px;width:34px;height:3px;border-radius:0 0 3px 3px;background:var(--brand)}
.tb.on .ic{stroke-width:2}
.tb-new{display:flex;flex-direction:column;align-items:center;gap:1px;font-size:14px;font-weight:800;color:var(--ink);align-self:start;margin-top:-26px}
.tb-new i{width:68px;height:68px;border-radius:50%;background:var(--brand);color:var(--on-brand);display:grid;place-items:center;box-shadow:inset 0 0 0 4px var(--brand),inset 0 0 0 5px var(--line),0 0 0 5px var(--bg),0 10px 20px -8px rgba(26,46,37,.55);transition:transform .2s}
.tb-new i .ic{width:30px;height:30px;color:var(--gold);stroke-width:1.8}
.tb-new:active i{transform:scale(.94)}

/* ---------- الشيت والتوست ---------- */
.scrim{position:fixed;inset:0;z-index:50;background:rgba(15,28,22,.5);display:flex;align-items:flex-end;justify-content:center;animation:fade .2s both}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet{background:var(--bg);width:100%;max-width:560px;max-height:92vh;max-height:92dvh;overflow:auto;border-radius:26px 26px 0 0;padding:10px 18px calc(22px + env(safe-area-inset-bottom,0px));animation:up .32s cubic-bezier(.2,.8,.2,1) both;border-top:1px solid var(--gold)}
@keyframes up{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.sheet::before{content:"";display:block;width:44px;height:4px;border-radius:4px;background:var(--field);margin:0 auto 10px}
.sheet-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.sheet-h h2{font:var(--hw) calc(27px*var(--hs))/var(--hl) var(--f-display)}
.pgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pcard{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:8px 8px 12px;text-align:center;display:flex;flex-direction:column;gap:4px}
.pcard .ph{aspect-ratio:1/1.05;border-radius:999px 999px 12px 12px;overflow:hidden}
.pcard img{width:100%;height:100%;object-fit:cover}
.pcard b{font-size:15px;font-weight:700;line-height:1.45;padding:4px 4px 0}
.pcard .n{font-size:18px}
.bubble{background:#EAF1E7;border-radius:18px 18px 18px 4px;padding:14px 16px;font-size:16px;font-weight:600;line-height:1.85;white-space:pre-line;border:1px solid #CFDCCB;color:#1E3328}
.receipt{background:var(--paper);border:1px dashed var(--field);border-radius:16px;padding:18px;text-align:center;font-weight:600;color:var(--ink-2)}
.receipt .n{display:block;font-size:34px;color:var(--ink);font-weight:500}
#toast{position:fixed;inset-inline:16px;bottom:calc(var(--tab-h) + 40px + env(safe-area-inset-bottom,0px));z-index:70;display:flex;justify-content:center;pointer-events:none}
.toast{background:var(--deep);color:var(--on-brand);border-radius:16px;padding:13px 18px;font-weight:700;font-size:16px;line-height:1.6;max-width:520px;box-shadow:inset 0 0 0 1px var(--line),0 14px 30px -10px rgba(0,0,0,.4);animation:up .3s both;text-align:center}

/* ---------- لوحة اختيارات الشكل (للنموذج بس) ---------- */
.proto-btn{width:46px;height:46px;border-radius:50%;border:1.5px dashed rgba(111,83,39,.6);color:var(--sand-ink);background:var(--paper);display:grid;place-items:center;flex:none}
.hero .proto-btn{background:rgba(255,255,255,.06);border-color:var(--line);color:var(--on-brand-2)}
.tick-wrap{display:block;text-align:center}
.sw-row{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:10px}
.swatch{border:1px solid var(--field);border-radius:16px;padding:10px 8px 8px;text-align:center;font-size:14px;font-weight:700;background:var(--paper);display:flex;flex-direction:column;align-items:center;gap:6px;line-height:1.4}
.swatch i{display:block;width:100%;height:44px;border-radius:10px;border:1px solid rgba(0,0,0,.08)}
.swatch i.ln{height:44px;background:var(--paper);position:relative;border-color:var(--rule)}
.swatch i.ln::after{content:"";position:absolute;inset:8px;border:1.5px solid var(--c);border-radius:6px}
.swatch .smp{font-weight:700;font-size:21px;line-height:1.9;color:var(--ink);width:100%;border-radius:10px;background:var(--mist)}
.swatch code{font:600 14px/1 var(--f-num);direction:ltr;color:var(--ink-2)}
.swatch.on{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand)}
.proto-note{font-size:14px;font-weight:600;color:var(--ink-2);margin-top:14px;line-height:1.7}

/* ---------- الكمبيوتر ---------- */
@media (min-width:640px){
  .hero{border-radius:30px;margin:16px 16px 24px;padding:26px 26px 30px}
  .squares{max-width:460px}
  .sq{min-height:200px}
  .pgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .scrim{align-items:center;padding:20px}
  .sheet{border-radius:26px;border:1px solid var(--gold)}
  .sheet::before{display:none}
  .sheet{padding-top:22px}
}
@media (min-width:1000px){
  #app{display:grid;grid-template-columns:268px minmax(0,1fr)}
  .side{display:flex;flex-direction:column;gap:6px;position:sticky;top:0;height:100vh;padding:26px 18px 20px;color:var(--on-brand);background:linear-gradient(180deg,var(--brand),var(--brand-lo));overflow:hidden}
  .side::before{content:"";position:absolute;left:-70px;bottom:-30px;width:260px;height:300px;background:var(--gold);-webkit-mask:var(--rose) center/contain no-repeat;mask:var(--rose) center/contain no-repeat;opacity:.13;pointer-events:none}
  .side-logo{height:62px;width:auto;align-self:center;margin:4px 0 0}
  .side .tagline{position:relative;font-size:calc(var(--tag-size) + 1px);margin:2px 0}
  .side .orn{margin:8px auto 14px}
  .side-new{position:relative;min-height:60px;border-radius:16px;background:var(--on-brand);color:var(--deep);font-weight:800;font-size:18px;display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:14px;box-shadow:inset 0 0 0 4px var(--on-brand),inset 0 0 0 5px var(--gold)}
  .sn{position:relative;display:flex;align-items:center;gap:14px;min-height:54px;padding:0 16px;border-radius:14px;font-weight:700;font-size:17px;color:var(--on-brand-2);transition:background .2s,color .2s}
  .sn:hover{background:rgba(255,255,255,.06)}
  .sn.on{background:rgba(255,255,255,.09);color:var(--on-brand);box-shadow:inset 0 0 0 1px var(--line-soft)}
  .sn.on .ic{color:var(--gold)}
  .side-foot{position:relative;margin-top:auto;display:flex;flex-direction:column;gap:8px}
  .side-role{font-size:14px;font-weight:700;color:var(--on-brand-2);padding:0 6px}
  .side-proto{min-height:50px;border-radius:14px;border:1.5px dashed var(--line);display:flex;align-items:center;justify-content:center;gap:10px;font-weight:700;font-size:15px;color:var(--on-brand)}
  .tabbar,.proto-btn{display:none}
  .col-b{gap:16px}
  #view{max-width:1180px;width:100%;padding:14px 26px 60px}
  #view.no-tabs{padding-bottom:130px}
  .savebar{inset-inline-start:268px}
  #toast{bottom:28px;inset-inline-start:284px}
  .top{padding-top:26px}
  .top h1{font-size:calc(40px*var(--hs))}
  .hero{margin:12px 16px 28px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:30px;padding:34px 34px 34px}
  .hero-top{display:none}
  .hero-greet{margin:0 0 8px}
  .hero-greet h1{font-size:calc(54px*var(--hs))}
  .hero-greet p{font-size:17px}
  .hero::before{width:330px;height:370px;inset-inline-end:auto;inset-inline-start:36%;top:-40px}
  .squares{grid-template-columns:230px 230px;max-width:none;gap:16px}
  .sq-num{font-size:66px}.sq-num.long{font-size:54px}
  .home-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:28px;align-items:start}
  .home-grid .col-b{order:2;display:flex;flex-direction:column}
  .list.wide{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .list.wide .grp-h{grid-column:1/-1}
  .cols{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:24px;align-items:start}
  .cols>div{display:flex;flex-direction:column;gap:22px}
  .narrow{max-width:780px;width:100%;margin-inline:auto}
  .set-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
}
@media (max-width:999.98px){
  .cols,.cols>div,.home-grid,.home-grid>div,.set-grid{display:flex;flex-direction:column;gap:22px}
  .home-grid>.col-b{gap:14px}
  .set-grid{gap:12px}
}
@media (max-width:359.98px){
  .sq-num{font-size:46px}.sq-num.long{font-size:36px}
  .tabbar-in{grid-template-columns:1fr 1fr 80px 1fr 1fr}
  .tb{font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}