@font-face{font-family:Kufi;font-weight:100 900;font-display:swap;src:url(../fonts/kufi.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:Plex;font-weight:400;font-display:swap;src:url(../fonts/plex-arabic-400.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200E,U+2010-2011,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:Plex;font-weight:500;font-display:swap;src:url(../fonts/plex-arabic-500.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200E,U+2010-2011,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:Plex;font-weight:700;font-display:swap;src:url(../fonts/plex-arabic-700.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200E,U+2010-2011,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:Plex;font-weight:400 700;font-display:swap;src:url(../fonts/plex-latin-500.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2212}


:root{
  --bg:#071211;--bg2:#0a1917;--card:#0e201d;--card2:#122824;--line:rgba(244,236,223,.09);--line2:rgba(244,236,223,.16);
  --ink:#F4ECDF;--muted:rgba(244,236,223,.64);--faint:rgba(244,236,223,.40);
  --gold:#D9A85B;--gold2:#F2D296;--teal:#3BA191;--teal2:#7FD3C3;--red:#E07A6A;--amber:#E7B65C;--blue:#7BA7E8;--violet:#B79AE8;
  --brand:#1E5A55;--brand-ink:#fff;--brand-soft:rgba(30,90,85,.18);--brand-l:#3a8a83;
  --display:Kufi,Plex,system-ui,sans-serif;--body:Plex,system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:18px;--ease:cubic-bezier(.2,.7,.1,1);--side:256px;
  --sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--bg)}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;-webkit-tap-highlight-color:transparent}
body.lock{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
[hidden]{display:none!important}
.ic{width:1.2em;height:1.2em;flex:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:10px}
.num{font-variant-numeric:tabular-nums}

/* shell */
.shell{min-height:100vh;min-height:100dvh}
.side{position:fixed;inset:0 0 0 auto;width:var(--side);background:linear-gradient(180deg,#0a1a18,#071211);border-inline-start:1px solid var(--line);display:none;flex-direction:column;padding:18px 14px;z-index:30}
.biz{display:flex;align-items:center;gap:12px;padding:8px 8px 18px;border-bottom:1px solid var(--line);margin-bottom:14px}
.biz-logo{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--brand);color:var(--brand-ink);font-family:var(--display);font-weight:700;font-size:21px;flex:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 8px 20px -10px var(--brand);transition:background .4s}
.biz-logo.sm{width:34px;height:34px;border-radius:11px;font-size:16px}
.biz-logo.lg{width:64px;height:64px;border-radius:20px;font-size:30px}
.biz-t{min-width:0}.biz-t b{display:block;font-size:15.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.biz-t small{color:var(--faint);font-size:12.5px}
.nav{display:flex;flex-direction:column;gap:2px}
.nv{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;color:var(--muted);font-size:14.5px;font-weight:500;transition:background .25s,color .25s;position:relative}
.nv:hover{background:rgba(244,236,223,.04);color:var(--ink)}
.nv.on{background:linear-gradient(90deg,rgba(217,168,91,.06),rgba(217,168,91,.14));color:var(--ink)}
.nv.on::before{content:"";position:absolute;inset-inline-start:-14px;top:9px;bottom:9px;width:3px;border-radius:3px;background:var(--gold)}
.nv.on .ic{color:var(--gold)}
.nv-b{margin-inline-start:auto;font-style:normal;font-size:11.5px;min-width:22px;height:20px;border-radius:99px;background:rgba(217,168,91,.16);color:var(--gold2);display:grid;place-items:center;padding:0 6px}
.nv-b:empty{display:none}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:10px;padding:14px 6px 0;border-top:1px solid var(--line)}
.side-link{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted)}.side-link:hover{color:var(--ink)}
.powered{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--faint)}.powered b{color:var(--muted);font-weight:500}
.pw-mark{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;color:var(--gold);border:1px solid rgba(217,168,91,.3)}.pw-mark svg{width:15px}
.credit{font-size:11.5px;color:var(--faint)}
.sync{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted)}
.sync i{width:8px;height:8px;border-radius:50%;background:var(--faint)}
.sync.ok i{background:var(--teal2);box-shadow:0 0 0 4px rgba(127,211,195,.12)}
.sync.local i{background:var(--amber)}
.sync.busy i{background:var(--gold);animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.3}}

.main{min-height:100vh;min-height:100dvh;padding-bottom:calc(76px + var(--sab))}
.bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;padding:calc(10px + var(--sat)) 16px 10px;background:rgba(7,18,17,.82);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);border-bottom:1px solid var(--line)}
.bar-biz{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.bar-biz b{font-size:15.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-title{display:none}
.bar-title h1{font-family:var(--display);font-weight:700;font-size:22px;line-height:1.3}
.bar-title p{font-size:13px;color:var(--faint)}
.bar-acts{display:flex;align-items:center;gap:8px;margin-inline-start:auto}
.demo-tag{font-size:11.5px;color:var(--faint);border:1px dashed var(--line2);border-radius:99px;padding:2px 10px;white-space:nowrap}
.live{display:none;align-items:center;gap:7px;font-size:12.5px;color:var(--teal2);background:rgba(59,161,145,.1);border-radius:99px;padding:4px 11px}
.live i{width:7px;height:7px;border-radius:50%;background:var(--teal2);animation:pulse 1.6s infinite}
.icon-btn{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;border:1px solid var(--line);background:rgba(244,236,223,.03);color:var(--muted);transition:background .2s,color .2s}
.icon-btn:hover{background:rgba(244,236,223,.08);color:var(--ink)}
.view{padding:18px 16px 30px;max-width:1320px;margin:0 auto;outline:none}
.v-in{animation:vin .45s var(--ease) both}
@keyframes vin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.m-head{margin:4px 0 16px}
.m-head h2{font-family:var(--display);font-size:24px;font-weight:700;line-height:1.35}
.m-head p{color:var(--faint);font-size:13.5px}

/* tab bar */
.tabbar{position:fixed;inset:auto 0 0;z-index:25;display:grid;grid-template-columns:repeat(5,1fr);padding:6px 6px calc(6px + var(--sab));background:rgba(9,22,20,.9);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border-top:1px solid var(--line)}
.tb{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0;font-size:11px;color:var(--faint);border-radius:12px;transition:color .2s}
.tb .ic{width:23px;height:23px}
.tb.on{color:var(--gold2)}

/* cards & grid */
.card{background:linear-gradient(180deg,var(--card),#0c1c1a);border:1px solid var(--line);border-radius:var(--r);padding:16px;position:relative;min-width:0}
.card-h{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.card-h h3{font-size:15.5px;font-weight:700}
.card-h .sub{color:var(--faint);font-size:12.5px}
.card-h .end{margin-inline-start:auto;display:flex;gap:6px;align-items:center}
.link{color:var(--gold);font-size:13px;font-weight:500;display:inline-flex;align-items:center;gap:4px}
.link:hover{color:var(--gold2)}
.grid{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
.grid>*{min-width:0}
.dash .col{display:grid;gap:14px;min-width:0;grid-template-columns:minmax(0,1fr)}
.kpis{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin-bottom:14px}
.kpi{padding:14px;border-radius:16px;background:var(--card);border:1px solid var(--line);position:relative;overflow:hidden}
.kpi small{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:12.5px}
.kpi small .ic{color:var(--gold)}
.kpi b{display:block;font-family:var(--display);font-size:26px;font-weight:700;line-height:1.3;margin-top:6px;font-variant-numeric:tabular-nums}
.kpi b.mn{font-size:21px}
.kpi em{font-style:normal;font-size:12px;color:var(--faint)}
.kpi.hl{background:linear-gradient(150deg,rgba(217,168,91,.16),rgba(217,168,91,.03) 60%),var(--card);border-color:rgba(217,168,91,.25)}

/* morning */
.morning{display:flex;gap:14px;align-items:flex-start;padding:16px;border-radius:var(--r);margin-bottom:14px;background:radial-gradient(120% 140% at 100% 0%,rgba(217,168,91,.18),transparent 55%),linear-gradient(180deg,#10241f,#0c1c1a);border:1px solid rgba(217,168,91,.2)}
.mo-av{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(160deg,#E8BC72,#B98637);color:#1b1306;flex:none}
.morning small{color:var(--gold);font-size:12.5px;font-weight:500}
.morning p{font-size:15px;line-height:1.85;margin-top:2px}
.morning p b{color:var(--gold2);font-weight:500}
.mo-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:40px;padding:0 16px;border-radius:12px;font-size:14px;font-weight:500;white-space:nowrap;transition:transform .2s var(--ease),background .25s,border-color .25s,color .25s;user-select:none;-webkit-user-select:none}
.btn:active{transform:scale(.97)}
.btn-gold{background:linear-gradient(180deg,#E8BC72,#D09A47);color:#1b1306;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 22px -12px rgba(217,168,91,.7)}
.btn-gold:hover{filter:brightness(1.06)}
.btn-ghost{border:1px solid var(--line2);background:rgba(244,236,223,.03)}
.btn-ghost:hover{background:rgba(244,236,223,.08)}
.btn-brand{background:var(--brand);color:var(--brand-ink)}
.btn-danger{border:1px solid rgba(224,122,106,.35);color:#F0A598;background:rgba(224,122,106,.06)}
.btn-danger:hover{background:rgba(224,122,106,.14)}
.btn-sm{height:32px;padding:0 11px;font-size:13px;border-radius:10px}
.btn-block{width:100%}
.btn[disabled]{opacity:.45;pointer-events:none}

/* chips & status */
.chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px;margin-bottom:12px}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;height:34px;padding:0 13px;border-radius:99px;border:1px solid var(--line2);color:var(--muted);font-size:13px;display:inline-flex;align-items:center;gap:6px;transition:all .2s;white-space:nowrap}
.chip:hover{color:var(--ink)}
.chip.on{background:var(--ink);color:#0b1a18;border-color:var(--ink)}
.chip .n{font-size:11.5px;opacity:.7}
.st{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;border-radius:99px;padding:2px 10px;white-space:nowrap;--c:var(--muted);color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent)}
.st::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.st.new{--c:var(--blue)}.st.confirmed{--c:var(--teal2)}.st.preparing{--c:var(--amber)}.st.ready{--c:var(--gold2)}.st.done{--c:rgba(244,236,223,.55)}.st.cancelled{--c:var(--red)}
.st.draft{--c:var(--amber)}.st.sent{--c:var(--blue)}.st.accepted{--c:var(--teal2)}.st.declined{--c:var(--red)}
.st.on{--c:var(--teal2)}.st.off{--c:var(--red)}
.tag{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--faint);border:1px solid var(--line);border-radius:8px;padding:1px 8px;white-space:nowrap}
.tag.m{color:var(--gold);border-color:rgba(217,168,91,.25)}
.tag .ic{width:12px;height:12px}

/* lists */
.rows{display:flex;flex-direction:column}
.row{display:flex;align-items:center;gap:12px;padding:12px 4px;border-top:1px solid var(--line);cursor:pointer;border-radius:12px;transition:background .2s}
.row:first-child{border-top:0}
.row:hover{background:rgba(244,236,223,.03)}
.row.flash{animation:flash 1.4s var(--ease)}
@keyframes flash{0%{background:rgba(217,168,91,.22)}100%{background:transparent}}
.r-time{width:54px;flex:none;text-align:center;font-variant-numeric:tabular-nums}
.r-time b{display:block;font-size:15px;font-weight:700}.r-time small{font-size:11px;color:var(--faint)}
.r-ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:rgba(244,236,223,.05);color:var(--gold);flex:none}
.r-main{min-width:0;flex:1}
.r-main b{display:block;font-size:14.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.r-main small{display:block;color:var(--faint);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.r-end{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:none}
.r-end .p{font-size:13.5px;font-variant-numeric:tabular-nums;color:var(--muted)}
.r-acts{display:flex;gap:6px;flex:none}
.empty{padding:28px 10px;text-align:center;color:var(--faint);font-size:14px}
.empty .ic{width:30px;height:30px;margin:0 auto 8px;display:block;color:var(--line2)}

/* log */
.log{list-style:none;position:relative}
.log li{display:flex;gap:12px;padding:9px 0;position:relative}
.log li::before{content:"";position:absolute;inset-inline-start:15px;top:40px;bottom:-6px;width:1px;background:var(--line)}
.log li:last-child::before{display:none}
.log .li-ic{width:31px;height:31px;border-radius:10px;display:grid;place-items:center;background:rgba(59,161,145,.12);color:var(--teal2);flex:none}
.log .li-ic.you{background:rgba(217,168,91,.14);color:var(--gold)}
.log p{font-size:14px;line-height:1.55;flex:1;min-width:0}
.log p small{display:block;color:var(--faint);font-size:12.5px}
.log time{font-size:12px;color:var(--faint);white-space:nowrap;font-variant-numeric:tabular-nums}
.log li.new{animation:lin .7s var(--ease)}
@keyframes lin{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* charts */
.chart{width:100%;height:auto;display:block;overflow:visible}
.chart text{font-family:var(--body);font-size:11px;fill:var(--faint)}
.chart .bar-r{fill:url(#gBar)}
.chart .bar-r.today{fill:url(#gBarT)}
.chart .grid-l{stroke:var(--line);stroke-dasharray:3 4}
.chart .ln{fill:none;stroke:var(--teal2);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.chart .ar{fill:url(#gArea)}
.chart .dot{fill:var(--bg);stroke:var(--teal2);stroke-width:2}
.chart .val{fill:var(--ink);font-weight:500;font-size:11.5px}
.ch-legend{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:6px}
.ch-legend b{font-family:var(--display);font-size:22px;font-variant-numeric:tabular-nums}
.ch-legend small{color:var(--faint);font-size:12px;display:block}

/* opps */
.opp{display:flex;gap:12px;padding:12px;border-radius:14px;border:1px solid var(--line);background:rgba(244,236,223,.02);margin-top:10px}
.opp:first-of-type{margin-top:0}
.opp .r-ic{color:var(--teal2);background:rgba(59,161,145,.12)}
.opp b{display:block;font-size:14px;font-weight:500;line-height:1.5}
.opp small{display:block;color:var(--faint);font-size:12.5px}
.opp .acts{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.opp.done{opacity:.55}

/* tables (desktop) */
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{font-weight:500;color:var(--faint);font-size:12.5px;text-align:start;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr{cursor:pointer;transition:background .2s}
.tbl tbody tr:hover{background:rgba(244,236,223,.03)}

/* toolbar */
.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.search{flex:1;min-width:180px;position:relative}
.search .ic{position:absolute;inset-inline-start:12px;top:50%;transform:translateY(-50%);color:var(--faint)}
.search input{width:100%;height:40px;border-radius:12px;border:1px solid var(--line2);background:rgba(244,236,223,.03);padding:0 38px 0 12px;font-size:14px}
.search input::placeholder{color:var(--faint)}
.date-in{height:40px;border-radius:12px;border:1px solid var(--line2);background:rgba(244,236,223,.03);padding:0 10px;font-size:13.5px;color-scheme:dark}

/* menu manager */
.cats{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin-bottom:14px;align-items:center}
.cats::-webkit-scrollbar{display:none}
.prods{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.prods>*{min-width:0}
.prod{display:flex;gap:12px;padding:10px;border-radius:16px;border:1px solid var(--line);background:var(--card);align-items:center;transition:border-color .25s,opacity .25s;position:relative}
.prod:hover{border-color:var(--line2)}
.prod.off{opacity:.62}
.prod.off .p-img{filter:grayscale(.8)}
.p-img{width:76px;height:76px;border-radius:13px;object-fit:cover;flex:none;background:#1a2c28}
.p-main{flex:1;min-width:0}
.p-main b{display:block;font-size:14.5px;font-weight:500;line-height:1.45}
.p-main small{display:block;color:var(--faint);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-price{display:flex;align-items:baseline;gap:8px;margin-top:4px;flex-wrap:wrap}
.p-price b{font-family:var(--display);font-size:17px;font-variant-numeric:tabular-nums;display:inline}
.p-price em{font-style:normal;font-size:12px;color:var(--faint)}
.p-side{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex:none}
.p-acts{display:flex;gap:4px}
.p-acts .icon-btn{width:34px;height:34px;border-radius:10px}
.prod.flash{animation:flash 1.4s var(--ease)}
.menu-note{display:flex;gap:10px;align-items:center;padding:12px 14px;border-radius:14px;background:rgba(59,161,145,.08);border:1px solid rgba(59,161,145,.2);color:var(--teal2);font-size:13.5px;margin-bottom:14px}
.menu-note .ic{flex:none}

/* switch */
.sw{position:relative;width:44px;height:26px;flex:none;display:inline-block}
.sw input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer;z-index:1}
.sw span{position:absolute;inset:0;border-radius:99px;background:rgba(244,236,223,.16);transition:background .25s}
.sw span::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .3s var(--ease);box-shadow:0 2px 6px rgba(0,0,0,.3)}
.sw input:checked+span{background:var(--teal)}
.sw input:checked+span::after{transform:translateX(-18px)}
.sw input:focus-visible+span{outline:2px solid var(--gold);outline-offset:2px}

/* forms */
.fld{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.fld>span{font-size:13px;color:var(--muted);font-weight:500}
.fld input,.fld select,.fld textarea{width:100%;min-height:44px;border-radius:12px;border:1px solid var(--line2);background:rgba(244,236,223,.04);padding:9px 12px;font-size:16px;color-scheme:dark;transition:border-color .2s}
.fld textarea{min-height:76px;resize:vertical;line-height:1.6}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:rgba(217,168,91,.6);outline:none;background:rgba(244,236,223,.06)}
.fld small{font-size:12px;color:var(--faint)}
.fld .vat{color:var(--gold2);font-size:12.5px}
.f2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.f2>*{min-width:0}
.ltr{direction:ltr;text-align:right}
.img-pick{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.img-pick button{aspect-ratio:1;border-radius:11px;overflow:hidden;border:2px solid transparent;padding:0;position:relative;background:#1a2c28}
.img-pick button img{width:100%;height:100%;object-fit:cover}
.img-pick button[aria-pressed=true]{border-color:var(--gold)}
.img-pick button[aria-pressed=true]::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 2px rgba(0,0,0,.4)}
.up-btn{display:grid;place-items:center;color:var(--muted);border:1.5px dashed var(--line2)!important;font-size:11px;gap:2px}
.up-btn .ic{width:20px;height:20px}
.img-prev{display:flex;gap:12px;align-items:center;margin-bottom:10px}
.img-prev img{width:72px;height:72px;border-radius:14px;object-fit:cover}
.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:14px;border:1px solid var(--line);margin-bottom:14px}
.toggle-row b{font-size:14px;font-weight:500;display:block}.toggle-row small{color:var(--faint);font-size:12.5px}
.swatches{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.swatches button{width:36px;height:36px;border-radius:50%;background:var(--c);border:2px solid transparent;box-shadow:inset 0 0 0 2px rgba(0,0,0,.2)}
.swatches button[aria-pressed=true]{border-color:var(--ink);box-shadow:0 0 0 3px rgba(244,236,223,.15)}
.swatches label{width:36px;height:36px;border-radius:50%;border:1.5px dashed var(--line2);display:grid;place-items:center;position:relative;overflow:hidden;color:var(--muted)}
.swatches label input{position:absolute;inset:0;opacity:0;cursor:pointer}
.items-ed{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.it-row{display:flex;align-items:center;gap:8px;padding:8px;border-radius:12px;border:1px solid var(--line);background:rgba(244,236,223,.02)}
.it-row img{width:40px;height:40px;border-radius:10px;object-fit:cover;flex:none}
.it-row .it-n{flex:1;min-width:0;font-size:13.5px;line-height:1.4}
.it-row .it-n small{display:block;color:var(--faint);font-size:12px}
.qty{display:flex;align-items:center;border:1px solid var(--line2);border-radius:10px;overflow:hidden;flex:none}
.qty button{width:30px;height:32px;display:grid;place-items:center;color:var(--muted)}
.qty input{width:46px;height:32px;border:0;background:transparent;text-align:center;font-size:14px;-moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none}
.add-item{display:flex;gap:8px}
.add-item select{flex:1;min-height:40px;border-radius:12px;border:1px solid var(--line2);background:rgba(244,236,223,.04);padding:0 10px;font-size:15px;color-scheme:dark}
.sum{border-radius:14px;background:rgba(244,236,223,.03);border:1px solid var(--line);padding:12px 14px;font-size:14px;font-variant-numeric:tabular-nums}
.sum div{display:flex;justify-content:space-between;padding:3px 0;color:var(--muted)}
.sum .tot{color:var(--ink);font-weight:700;font-size:16px;border-top:1px solid var(--line);margin-top:6px;padding-top:9px}

/* drawer */
.scrim{position:fixed;inset:0;background:rgba(2,8,7,.6);z-index:60;opacity:0;transition:opacity .3s}
.scrim.on{opacity:1}
.drawer{position:fixed;z-index:61;inset:auto 0 0 0;max-height:92vh;max-height:92dvh;background:#0c1d1a;border:1px solid var(--line2);border-radius:24px 24px 0 0;display:flex;flex-direction:column;transform:translateY(100%);transition:transform .45s var(--ease);box-shadow:0 -30px 80px -20px rgba(0,0,0,.6)}
.drawer.on{transform:none}
.dw-grab{width:40px;height:5px;border-radius:9px;background:var(--line2);margin:8px auto 0;flex:none}
.dw-head{flex:none;display:flex;align-items:center;gap:10px;padding:10px 18px 12px;border-bottom:1px solid var(--line)}
.dw-head h2{font-size:17px;font-weight:700;flex:1;line-height:1.4}
.dw-body{min-height:0;padding:16px 18px;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;flex:1}
.dw-foot{flex:none;padding:12px 18px calc(12px + var(--sab));border-top:1px solid var(--line);display:flex;gap:8px;flex-wrap:wrap}
.dw-foot:empty{display:none}
.dw-foot .btn{flex:1}
.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:14px;margin-bottom:16px}
.kv dt{color:var(--faint)}.kv dd{font-weight:500}
.steps{display:flex;gap:4px;margin:4px 0 16px}
.steps button{flex:1;padding:8px 2px;border-radius:10px;border:1px solid var(--line);font-size:12px;color:var(--faint);display:flex;flex-direction:column;align-items:center;gap:4px;line-height:1.3}
.steps button i{width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.5}
.steps button.past{color:var(--teal2);border-color:rgba(127,211,195,.25)}
.steps button.cur{color:#0b1a18;background:var(--teal2);border-color:var(--teal2)}
.steps button.cur i{background:#0b1a18;opacity:1}
.sec-t{font-size:13px;color:var(--muted);font-weight:500;margin:16px 0 8px}
.mini-list{display:flex;flex-direction:column;gap:6px}
.mini-list div{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;padding:8px 10px;border-radius:10px;background:rgba(244,236,223,.03)}
.mini-list span:last-child{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.cust-h{display:flex;gap:14px;align-items:center;margin-bottom:16px}
.av{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:rgba(217,168,91,.14);color:var(--gold2);font-weight:700;font-size:17px;flex:none}
.av.co{border-radius:14px;background:rgba(123,167,232,.14);color:var(--blue)}
.occ{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;border:1px solid rgba(217,168,91,.2);background:rgba(217,168,91,.05);margin-bottom:8px;font-size:13.5px}
.occ .ic{color:var(--gold)}
.occ b{font-weight:500}

/* quote preview (customer-facing, light) */
.qprev{background:#FBF8F2;color:#1A1916;border-radius:18px;overflow:hidden;font-size:13.5px;margin-top:6px;box-shadow:0 20px 50px -24px rgba(0,0,0,.6)}
.qp-h{display:flex;align-items:center;gap:10px;padding:14px;background:var(--brand);color:var(--brand-ink)}
.qp-h .biz-logo{background:rgba(255,255,255,.18);color:var(--brand-ink);width:38px;height:38px;font-size:18px;box-shadow:none}
.qp-h b{display:block;font-size:14.5px}.qp-h small{opacity:.8;font-size:12px}
.qp-r{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid #EEE6D8}
.qp-r img{width:36px;height:36px;border-radius:9px;object-fit:cover}
.qp-r div{flex:1;min-width:0;line-height:1.4}.qp-r small{display:block;color:#7a7266;font-size:11.5px}
.qp-r span{font-variant-numeric:tabular-nums;white-space:nowrap}
.qp-s{padding:10px 14px;font-variant-numeric:tabular-nums}
.qp-s div{display:flex;justify-content:space-between;padding:2px 0;color:#5F5A51}
.qp-s .tot{color:#1A1916;font-weight:700;font-size:15.5px;border-top:1px solid #EEE6D8;margin-top:6px;padding-top:8px}

/* mudheef chat */
.mchat{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
.mchat>*{min-width:0}
.phone{background:#0b1513;border:1px solid var(--line2);border-radius:28px;overflow:hidden;display:flex;flex-direction:column;height:min(640px,calc(100dvh - 230px));min-height:460px}
.wa-head{display:flex;align-items:center;gap:10px;padding:12px 14px;background:#12302b;border-bottom:1px solid var(--line)}
.wa-head .biz-logo{width:36px;height:36px;font-size:16px;border-radius:50%}
.wa-head b{display:block;font-size:14.5px}.wa-head small{color:var(--teal2);font-size:12px}
.wa-body{flex:1;overflow-y:auto;padding:14px 12px;display:flex;flex-direction:column;gap:8px;background:radial-gradient(circle at 20% 10%,rgba(59,161,145,.06),transparent 40%),#0a1412;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.m{max-width:84%;padding:8px 11px 6px;border-radius:14px;font-size:14px;line-height:1.65;position:relative;animation:min .35s var(--ease) both}
@keyframes min{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}
.m time{display:block;font-size:10.5px;opacity:.55;text-align:left;margin-top:2px}
.m.out{align-self:flex-end;background:#1d5c50;border-start-end-radius:4px}
.m.in{align-self:flex-start;background:#18241f;border:1px solid var(--line);border-start-start-radius:4px}
.m.in .who{display:flex;align-items:center;gap:4px;font-size:11.5px;color:var(--gold);font-weight:500;margin-bottom:2px}
.m.in .who .ic{width:12px;height:12px}
.m.card{padding:0;background:transparent;border:0;width:min(330px,92%);max-width:92%}
.m.card .qprev{margin:0}
.m.typing{display:flex;gap:4px;padding:12px 14px}
.m.typing i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:ty 1s infinite}
.m.typing i:nth-child(2){animation-delay:.15s}.m.typing i:nth-child(3){animation-delay:.3s}
@keyframes ty{0%,60%,100%{opacity:.25;transform:none}30%{opacity:1;transform:translateY(-3px)}}
.m .acts{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.sugg{display:flex;gap:6px;overflow-x:auto;padding:8px 10px 0;scrollbar-width:none;background:#0a1412}
.sugg::-webkit-scrollbar{display:none}
.sugg button{flex:none;font-size:12.5px;padding:6px 11px;border-radius:99px;border:1px solid rgba(127,211,195,.3);color:var(--teal2);background:rgba(59,161,145,.06)}
.wa-in{display:flex;gap:8px;padding:10px;background:#0a1412;border-top:1px solid var(--line)}
.wa-in input{flex:1;min-width:0;height:42px;border-radius:99px;border:1px solid var(--line2);background:#13201d;padding:0 16px;font-size:16px}
.wa-in button{width:42px;height:42px;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center;flex:none}
.wa-in button .ic{transform:scaleX(-1)}
.explain{font-size:13.5px;color:var(--muted);line-height:1.8}
.explain ol{padding-inline-start:18px;margin-top:8px}
.explain li{margin-bottom:6px}

/* settings */
.brand-prev{display:flex;align-items:center;gap:14px;padding:16px;border-radius:18px;background:linear-gradient(135deg,var(--brand),color-mix(in srgb,var(--brand) 55%,#000));color:var(--brand-ink);margin-bottom:16px;transition:background .4s}
.brand-prev .biz-logo{background:rgba(255,255,255,.16);color:var(--brand-ink);box-shadow:none}
.brand-prev b{display:block;font-size:17px;font-family:var(--display)}.brand-prev small{opacity:.8;font-size:12.5px}
.danger-zone{border-color:rgba(224,122,106,.2)}

.toast{position:fixed;left:50%;bottom:calc(92px + var(--sab));transform:translate(-50%,20px);background:#F4ECDF;color:#0b1a18;padding:10px 18px;border-radius:99px;font-size:14px;font-weight:500;opacity:0;pointer-events:none;transition:all .35s var(--ease);z-index:80;white-space:nowrap;box-shadow:0 14px 40px -12px rgba(0,0,0,.5);display:flex;align-items:center;gap:8px}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast .ic{color:var(--teal)}
.mt{margin-top:14px}
.muted{color:var(--muted)}.faint{color:var(--faint)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.hide-m{display:none}

@media (min-width:640px){
  .prods{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:1040px){
  .side{display:flex}
  .main{margin-inline-start:var(--side);padding-bottom:0}
  .tabbar{display:none}
  .bar{padding:14px 28px}
  .bar-biz{display:none}
  .bar-title{display:block;flex:1}
  .live{display:inline-flex}
  .view{padding:24px 28px 40px}
  .m-head{display:none}
  .dash{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);align-items:start}
  .dash .col{display:grid;gap:14px;min-width:0}
  .drawer{inset:0 auto 0 0;width:min(480px,92vw);max-height:none;border-radius:0 24px 24px 0;transform:translateX(-100%)}
  .drawer.on{transform:none}
  .dw-grab{display:none}
  .toast{bottom:28px}
  .hide-m{display:initial}
  .hide-d{display:none!important}
  .prods{grid-template-columns:repeat(3,minmax(0,1fr))}
  .prod{flex-direction:column;align-items:stretch;padding:0;overflow:hidden}
  .prod .p-img{width:100%;height:150px;border-radius:0}
  .prod .p-main{padding:12px 14px 4px}
  .prod .p-side{flex-direction:row;justify-content:space-between;align-items:center;padding:0 14px 12px}
  .mchat{grid-template-columns:minmax(360px,420px) 1fr;align-items:start}
  .set-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:14px;align-items:start}
}
@media (min-width:1300px){ .prods{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} }

.charts{display:grid;grid-template-columns:1fr;gap:18px}
@media (min-width:560px){.charts{grid-template-columns:1fr 1fr}}
.sys-note{align-self:center;display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--teal2);background:rgba(59,161,145,.1);border:1px solid rgba(59,161,145,.2);border-radius:99px;padding:4px 12px;margin:2px 0;animation:min .35s var(--ease) both;text-align:center}
.sys-note .ic{width:14px;height:14px}
@media (max-width:430px){.hide-xs{display:none}.row{gap:10px}.r-acts .btn-sm{padding:0 9px}}
.m .qprev{box-shadow:none}
.wa-body .m.card .qp-h{padding:11px 12px}

@media (max-width:639px){.toolbar .search{flex:1 1 100%}.toolbar .date-in{flex:1;min-width:0}}
.mchat .phone{min-width:0}
.wa-body{overflow-x:hidden}

.fld select{text-overflow:ellipsis}
.drawer{max-width:100vw}

/* plans, tour, locked */
.nv-g{font-size:11.5px;color:var(--faint);margin:14px 12px 4px;letter-spacing:.02em}
.nv-lock{display:none;width:14px;height:14px;color:var(--faint);margin-inline-start:auto}
.nv.locked{color:var(--faint)}
.nv.locked .nv-lock{display:block}
.nv.locked .nv-b{display:none}
.side{overflow-y:auto;scrollbar-width:none}
.side::-webkit-scrollbar{display:none}
.plan-pill{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:9px 12px;border-radius:12px;border:1px solid rgba(217,168,91,.28);background:linear-gradient(90deg,rgba(217,168,91,.04),rgba(217,168,91,.12));font-size:13px;color:var(--muted);margin:-4px 0 12px}
.plan-pill b{color:var(--gold2);font-weight:700}
.plan-pill em{font-style:normal;font-size:12px;color:var(--gold)}
.branch{height:34px;border-radius:10px;border:1px solid var(--line2);background:rgba(244,236,223,.04);padding:0 8px;font-size:13px;color-scheme:dark;max-width:140px}
.tour-btn{height:34px}
@media (max-width:640px){.tour-btn span{display:none}.tour-btn{width:38px;padding:0}.demo-tag{display:none}.branch{max-width:110px}}
.ov{position:fixed;inset:0;z-index:90;background:radial-gradient(120% 80% at 50% 0%,#10302b,#061110 60%);overflow-y:auto;-webkit-overflow-scrolling:touch;padding:calc(24px + var(--sat)) 16px calc(30px + var(--sab));animation:vin .5s var(--ease) both}
.ov-in{max-width:1080px;margin:0 auto}
.ov-top{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.ov-top .x{margin-inline-start:auto}
.ov h2{font-family:var(--display);font-weight:700;font-size:clamp(26px,5vw,40px);line-height:1.35;text-align:center}
.ov .lead{color:var(--muted);text-align:center;margin:8px auto 26px;max-width:34em;font-size:15.5px}
.pcards{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
@media (min-width:900px){.pcards{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pcard{position:relative;border-radius:22px;padding:22px 20px;background:linear-gradient(180deg,#0f2420,#0b1b18);border:1px solid var(--line2);display:flex;flex-direction:column;gap:10px;text-align:start;transition:transform .3s var(--ease),border-color .3s}
.pcard:hover{transform:translateY(-3px);border-color:rgba(217,168,91,.45)}
.pcard.hot{border-color:rgba(217,168,91,.55);background:radial-gradient(120% 70% at 100% 0%,rgba(217,168,91,.16),transparent 60%),linear-gradient(180deg,#12291f,#0b1b18)}
.pcard .badge{position:absolute;top:16px;inset-inline-end:16px;font-size:11.5px;background:var(--gold);color:#1b1306;border-radius:99px;padding:2px 10px;font-weight:500}
.pcard h3{font-family:var(--display);font-size:24px}
.pcard .ps{color:var(--muted);font-size:13.5px;margin-top:-6px}
.pcard ul{list-style:none;display:flex;flex-direction:column;gap:7px;margin:6px 0 10px;font-size:14px}
.pcard li{display:flex;gap:8px;align-items:flex-start;line-height:1.6}
.pcard li .ic{color:var(--teal2);margin-top:3px;width:16px;height:16px}
.pcard li.inh{color:var(--gold2)}
.pcard .btn{margin-top:auto;height:46px}
.ov-note{text-align:center;color:var(--faint);font-size:12.5px;margin-top:18px}
/* wizard */
.wiz{max-width:520px;margin:6vh auto 0;text-align:center}
.wiz .biz-logo{margin:0 auto 18px;width:84px;height:84px;border-radius:26px;font-size:40px;animation:pop 1s var(--ease) both}
@keyframes pop{from{transform:scale(.4) rotate(-20deg);opacity:0}to{transform:none;opacity:1}}
.wiz h2{font-size:clamp(22px,4.5vw,30px)}
.wiz-steps{list-style:none;text-align:start;margin:26px auto 22px;display:flex;flex-direction:column;gap:10px;max-width:420px}
.wiz-steps li{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:rgba(244,236,223,.02);color:var(--faint);transition:all .4s var(--ease);font-size:15px}
.wiz-steps li .k{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--line2);display:grid;place-items:center;flex:none;transition:all .4s}
.wiz-steps li .k .ic{width:15px;height:15px;opacity:0;transition:opacity .3s}
.wiz-steps li.on{color:var(--ink);border-color:rgba(217,168,91,.35);background:rgba(217,168,91,.06)}
.wiz-steps li.on .k{border-color:var(--gold);border-top-color:transparent;animation:spin .8s linear infinite}
.wiz-steps li.done{color:var(--ink)}
.wiz-steps li.done .k{background:var(--teal);border-color:var(--teal);animation:none;color:#fff}
.wiz-steps li.done .k .ic{opacity:1}
@keyframes spin{to{transform:rotate(360deg)}}
.wiz-bar{height:4px;border-radius:4px;background:rgba(244,236,223,.08);overflow:hidden;max-width:420px;margin:0 auto}
.wiz-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--gold2));transition:width .5s var(--ease)}
.wiz-skip{margin-top:18px;color:var(--muted);font-size:13.5px;text-decoration:underline;text-underline-offset:3px}
.wiz-done .btn{margin:6px}
/* tour */
.tour{position:fixed;inset:0;z-index:95}
.tour-hole{position:fixed;border-radius:16px;box-shadow:0 0 0 9999px rgba(2,8,7,.72);transition:all .45s var(--ease);pointer-events:none;outline:2px solid rgba(242,210,150,.8);outline-offset:3px}
.tour-card{position:fixed;width:min(360px,calc(100vw - 24px));background:#F7F1E6;color:#1A1916;border-radius:20px;padding:18px 18px 14px;box-shadow:0 30px 70px -20px rgba(0,0,0,.6);transition:top .45s var(--ease),left .45s var(--ease),opacity .3s}
.tour-card small{color:#9C7232;font-weight:500;font-size:12.5px}
.tour-card h4{font-size:17px;font-weight:700;margin:2px 0 6px;line-height:1.5}
.tour-card p{font-size:14.5px;line-height:1.85;color:#3d3a34}
.tour-acts{display:flex;align-items:center;gap:8px;margin-top:14px}
.tour-acts .sp{flex:1}
.tour-acts .btn-ghost{color:#1A1916;border-color:rgba(26,25,22,.2)}
.tour-dots{display:flex;gap:4px}
.tour-dots i{width:6px;height:6px;border-radius:50%;background:rgba(26,25,22,.2)}
.tour-dots i.on{background:#9C7232;width:16px;border-radius:6px}
@media (max-width:1039px){.tour-card{left:12px!important;right:12px;width:auto;top:auto!important;bottom:calc(84px + var(--sab))}}
/* locked */
.locked-v{position:relative;border-radius:22px;overflow:hidden;border:1px solid var(--line)}
.locked-v .ghost{filter:blur(5px) saturate(.6);opacity:.45;pointer-events:none;padding:16px}
.locked-v .lk{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:20px;background:linear-gradient(180deg,rgba(7,18,17,.2),rgba(7,18,17,.85))}
.lk-in{max-width:380px}
.lk-ic{width:54px;height:54px;border-radius:18px;display:grid;place-items:center;margin:0 auto 12px;background:rgba(217,168,91,.14);color:var(--gold2)}
.lk-ic .ic{width:26px;height:26px}
.lk h3{font-family:var(--display);font-size:21px;margin-bottom:6px}
.lk p{color:var(--muted);font-size:14px;line-height:1.8;margin-bottom:14px}
.lk-mini{display:flex;align-items:center;gap:12px;padding:14px;border-radius:var(--r);border:1px dashed rgba(217,168,91,.3);background:rgba(217,168,91,.04)}
.lk-mini b{display:block;font-size:14px}.lk-mini small{color:var(--faint);font-size:12.5px}
.lk-mini .lk-ic{width:40px;height:40px;border-radius:13px;margin:0;flex:none}
.lk-mini .lk-ic .ic{width:19px;height:19px}
.lk-mini .btn{margin-inline-start:auto;flex:none}
/* public site preview */
.ms-wrap{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
@media (min-width:1040px){.ms-wrap{grid-template-columns:minmax(360px,430px) minmax(0,1fr);align-items:start}}
.pub{background:#FBF8F2;color:#1A1916;border-radius:26px;overflow:hidden;border:1px solid var(--line2)}
.pub-bar{display:flex;align-items:center;gap:6px;padding:9px 14px;background:#EFE8DB;font-size:12px;color:#7a7266;direction:ltr}
.pub-bar i{width:8px;height:8px;border-radius:50%;background:#d5cbb9}
.pub-bar span{margin-left:8px;flex:1;text-align:center;background:#fff;border-radius:8px;padding:2px 8px}
.pub-hero{padding:22px 18px 16px;background:linear-gradient(160deg,var(--brand),color-mix(in srgb,var(--brand) 60%,#000));color:var(--brand-ink);display:flex;gap:14px;align-items:center}
.pub-hero .biz-logo{background:rgba(255,255,255,.16);color:var(--brand-ink);box-shadow:none}
.pub-hero h3{font-family:var(--display);font-size:21px;line-height:1.35}
.pub-hero p{font-size:12.5px;opacity:.85}
.pub-cat{padding:12px 16px 4px;font-weight:700;font-size:14px;color:#5F5A51}
.pub-it{display:flex;gap:10px;align-items:center;padding:9px 16px}
.pub-it img{width:52px;height:52px;border-radius:12px;object-fit:cover}
.pub-it div{flex:1;min-width:0;line-height:1.45;font-size:14px}
.pub-it small{display:block;color:#7a7266;font-size:12px}
.pub-it .pr{font-size:13px;color:#1A1916;font-weight:500;white-space:nowrap}
.pub-add{width:32px;height:32px;border-radius:10px;background:var(--brand);color:var(--brand-ink);display:grid;place-items:center;flex:none;font-size:18px;line-height:1}
.pub-cart{position:sticky;bottom:0;padding:12px 16px;background:#fff;border-top:1px solid #EEE6D8;display:flex;align-items:center;gap:10px}
.pub-cart b{font-size:14px;flex:1}
.pub-cart .btn{background:var(--brand);color:var(--brand-ink)}
.pub-body{max-height:560px;overflow-y:auto;-webkit-overflow-scrolling:touch}
/* inbox */
.conv{display:flex;gap:12px;align-items:center;padding:12px 4px;border-top:1px solid var(--line);cursor:pointer;border-radius:12px}
.conv:first-child{border-top:0}
.conv:hover{background:rgba(244,236,223,.03)}
.conv .r-main small{white-space:nowrap}
.cv-tag{font-size:11.5px;border-radius:99px;padding:2px 9px;white-space:nowrap}
.cv-tag.ok{color:var(--teal2);background:rgba(127,211,195,.12)}.cv-tag.q{color:var(--blue);background:rgba(123,167,232,.12)}.cv-tag.h{color:var(--amber);background:rgba(231,182,92,.14)}
.thread{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:18px;background:#0a1412;border:1px solid var(--line)}
/* reports */
.bars{display:flex;flex-direction:column;gap:10px}
.bar-l{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;font-size:13.5px}
.bar-l .tr{grid-column:1/-1;height:8px;border-radius:8px;background:rgba(244,236,223,.06);overflow:hidden}
.bar-l .tr i{display:block;height:100%;border-radius:8px;background:linear-gradient(90deg,var(--teal),var(--teal2))}
.bar-l span:nth-child(2){color:var(--muted);font-variant-numeric:tabular-nums}
.big-n{font-family:var(--display);font-size:34px;font-weight:700;font-variant-numeric:tabular-nums}
/* seasons */
.seas{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
@media (min-width:760px){.seas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1300px){.seas{grid-template-columns:repeat(3,minmax(0,1fr))}}
.sea{padding:16px;border-radius:var(--r);border:1px solid var(--line);background:var(--card);display:flex;flex-direction:column;gap:8px}
.sea-h{display:flex;align-items:center;gap:10px}
.sea-h .r-ic{color:var(--gold2);background:rgba(217,168,91,.12)}
.sea-h b{font-size:15.5px}
.sea p{font-size:13.5px;color:var(--muted);line-height:1.8}
.sea .meta{display:flex;gap:6px;flex-wrap:wrap}
.sea .btn{align-self:flex-start;margin-top:4px}
.staff{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--line);font-size:14px}
.staff:first-of-type{border-top:0}
.staff .av{width:36px;height:36px;font-size:14px}
.staff div{flex:1;min-width:0}
.staff small{display:block;color:var(--faint);font-size:12px}

/* ===== simplified v5 ===== */
.subtabs{display:flex;gap:4px;padding:4px;margin:0 0 16px;border-radius:14px;background:rgba(244,236,223,.04);border:1px solid var(--line);overflow-x:auto;scrollbar-width:none;width:max-content;max-width:100%}
.subtabs::-webkit-scrollbar{display:none}
.subtabs .stb{flex:none;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:10px;font-size:14px;color:var(--muted);font-weight:500;transition:background .25s,color .25s;white-space:nowrap}
.subtabs .stb.on{background:linear-gradient(180deg,rgba(217,168,91,.22),rgba(217,168,91,.12));color:var(--ink);box-shadow:inset 0 0 0 1px rgba(217,168,91,.35)}
.subtabs .stb .ic{width:12px;height:12px;color:var(--gold);opacity:.8}
.subtabs .stb.lk{color:var(--faint)}
.subtabs .nv-b:empty{display:none}
.lk-card{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.lk-card>div{flex:1;min-width:180px}.lk-card b{font-size:15.5px}.lk-card p{color:var(--faint);font-size:13.5px;margin-top:2px}
.lk-card .lk-ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:rgba(217,168,91,.12);color:var(--gold)}
.lk-card .lk-ic .ic{width:18px;height:18px}
.lk-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.lk-row .tag{cursor:pointer;height:28px}
details.custom{margin-top:4px;border-top:1px solid var(--line);padding-top:12px}
details.custom summary{list-style:none;display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:13.5px;cursor:pointer}
details.custom summary::-webkit-details-marker{display:none}
details.custom summary .ic{width:15px;height:15px}
details.custom[open] summary{color:var(--gold);margin-bottom:12px}
.plan-f{list-style:none;display:grid;gap:6px;font-size:14px;color:var(--muted)}
.plan-f li{display:flex;gap:8px;align-items:center}.plan-f .ic{width:15px;height:15px;color:var(--teal2)}
.set-foot{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.set-foot small{color:var(--faint);font-size:12px;flex-basis:100%}
/* checkout */
.co-demo{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--faint);border:1px solid var(--line);border-radius:99px;padding:2px 9px;margin-inline-start:auto}
.co-demo .ic{width:11px;height:11px}
.ov-top .co-demo+.x{margin-inline-start:6px}
.co-steps{list-style:none;display:flex;justify-content:center;gap:6px;margin:0 auto 20px;flex-wrap:wrap}
.co-steps li{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--faint);padding:5px 12px 5px 8px;border-radius:99px;border:1px solid var(--line)}
.co-steps li span{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;border:1px solid var(--line2)}
.co-steps li span .ic{width:12px;height:12px}
.co-steps li.on{color:var(--ink);border-color:rgba(217,168,91,.45);background:rgba(217,168,91,.08)}
.co-steps li.on span{background:var(--gold);color:#1b1306;border-color:var(--gold)}
.co-steps li.done{color:var(--teal2)}.co-steps li.done span{background:rgba(59,161,145,.2);border-color:transparent;color:var(--teal2)}
.cyc{display:flex;gap:4px;padding:4px;border-radius:14px;background:rgba(244,236,223,.05);border:1px solid var(--line);width:max-content;margin:14px auto 22px}
.cyc button{height:38px;padding:0 16px;border-radius:10px;color:var(--muted);font-size:14px;font-weight:500;display:inline-flex;align-items:center;gap:8px}
.cyc button em{font-style:normal;font-size:11px;color:#1b1306;background:var(--gold2);border-radius:99px;padding:1px 8px}
.cyc button[aria-checked=true]{background:rgba(244,236,223,.1);color:var(--ink)}
.pprice{display:flex;align-items:baseline;gap:6px}
.pprice b{font-family:var(--display);font-size:32px;font-weight:700;color:var(--gold2)}
.pprice span{color:var(--faint);font-size:13px}
.co-pay{display:grid;gap:14px;max-width:920px;margin:0 auto}
@media(min-width:900px){.co-pay{grid-template-columns:1fr 1.05fr;align-items:start}}
.co-card{border-radius:22px;padding:20px;background:linear-gradient(180deg,#0f2420,#0b1b18);border:1px solid var(--line2)}
.co-card h3{font-family:var(--display);font-size:20px;margin-bottom:14px}
.co-sum{border-radius:16px;background:rgba(244,236,223,.04);border:1px solid var(--line);padding:14px;position:relative}
.co-sum .cyc{margin:10px 0 12px}
.co-pl{display:flex;align-items:center;justify-content:space-between}
.co-pl b{font-size:16px}
.co-pl .link{background:none;border:0;cursor:pointer}
.co-row{display:flex;justify-content:space-between;font-size:14px;color:var(--muted);padding:3px 0}
.co-row.tot{color:var(--ink);font-weight:700;font-size:17px;border-top:1px solid var(--line);margin-top:6px;padding-top:9px}
.co-ill{position:absolute;top:14px;inset-inline-end:62px;font-size:11px;color:var(--faint)}
.pay-m{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:14px 0 8px}
@media(min-width:520px){.pay-m{grid-template-columns:repeat(4,minmax(0,1fr))}}
.pay-m button{height:52px;border-radius:14px;border:1px solid var(--line2);background:rgba(244,236,223,.03);display:grid;place-items:center;transition:border-color .25s,background .25s;color:var(--ink)}
.pay-m button[aria-checked=true]{border-color:var(--gold);background:rgba(217,168,91,.1);box-shadow:inset 0 0 0 1px var(--gold)}
.pm-mada{font-weight:700;font-size:17px;letter-spacing:.02em;color:#7FD3C3}
.pm-apple{display:inline-flex;align-items:center;gap:2px;font-weight:600;font-size:17px;font-family:-apple-system,system-ui,sans-serif}
.pm-apple svg{width:18px;height:18px;margin-top:-3px}
.pm-card{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500}
.pm-card .ic{width:16px;height:16px}
.pm-stc{font-weight:700;font-size:15px;color:#c9a6ff;font-family:system-ui,sans-serif}
.co-cardline{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--faint);margin:4px 0 14px}
.co-cardline .ic{width:13px;height:13px}
.co-go{height:52px;font-size:16px}
.co-go.apple{background:#000;color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.25)}
.co-go .spin{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;animation:cospin .8s linear infinite;display:inline-block}
@keyframes cospin{to{transform:rotate(360deg)}}
.co-done{max-width:460px;margin:2vh auto 0;text-align:center}
.ok-ring{width:84px;height:84px;border-radius:50%;margin:0 auto 16px;display:grid;place-items:center;background:radial-gradient(circle,rgba(59,161,145,.35),rgba(59,161,145,.08));box-shadow:0 0 0 1px rgba(127,211,195,.4),0 0 60px rgba(59,161,145,.35);color:#eafff8;animation:pop .9s var(--ease) both}
.ok-ring .ic{width:38px;height:38px;stroke-width:2.4}
.co-setup{list-style:none;display:grid;gap:8px;text-align:start;margin:0 auto 20px;max-width:340px}
.co-setup li{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);color:var(--faint);font-size:14.5px;transition:all .4s var(--ease)}
.co-setup li .k{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--line2);display:grid;place-items:center;flex:none;transition:all .4s}
.co-setup li .k .ic{width:13px;height:13px;opacity:0;transition:opacity .3s}
.co-setup li.done{color:var(--ink);border-color:rgba(127,211,195,.3)}
.co-setup li.done .k{background:var(--teal);border-color:var(--teal);color:#fff}.co-setup li.done .k .ic{opacity:1}
.co-acts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
@media(max-width:520px){.subtabs .stb{padding:0 11px;font-size:13.5px;height:34px}}

/* تفاصيل الباقة */
.co-pay{max-width:1040px}
.co-main{display:grid;gap:14px;min-width:0}
@media(min-width:900px){.co-pay{grid-template-columns:minmax(0,1fr) 340px}.co-main{grid-column:1;grid-row:1}.pd-box{grid-column:2;grid-row:1;position:sticky;top:12px}.pd-sum{pointer-events:none}.pd-sum .pd-mini,.pd-sum>.ic{display:none}}
.pd-box{border-radius:22px;background:radial-gradient(120% 60% at 100% 0%,rgba(217,168,91,.12),transparent 60%),linear-gradient(180deg,#10261f,#0b1b18);border:1px solid rgba(217,168,91,.38);min-width:0}
.pd-sum{list-style:none;display:flex;align-items:center;gap:10px;padding:14px 18px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pd-sum::-webkit-details-marker{display:none}
.pd-t{font-family:var(--display);font-size:17px;font-weight:700}
.pd-mini{margin-inline-start:auto;display:inline-flex;align-items:baseline;gap:8px;font-size:13px;color:var(--muted);opacity:0;transition:opacity .25s}
.pd-mini i{font-style:normal;color:var(--gold2);font-weight:600}
.pd-box:not([open]) .pd-mini{opacity:1}
.pd-sum>.ic{width:16px;height:16px;color:var(--faint);transform:rotate(-90deg);transition:transform .3s var(--ease)}
.pd-box[open] .pd-sum>.ic{transform:rotate(90deg)}
.pd-box[open] .pd-sum .pd-mini{display:none}
.pd-box[open] .pd-sum>.ic{margin-inline-start:auto}
.pd-body{padding:0 18px 16px;position:relative;animation:vin .35s var(--ease) both}
.pd-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.pd-name{display:block;font-size:16px;color:var(--gold2)}
.pd-biz{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pd-chg{background:none;border:0;cursor:pointer;flex:none;padding:2px 0}
.pd-sw{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;margin-top:12px;border-radius:12px;background:rgba(244,236,223,.05);border:1px solid var(--line)}
.pd-sw[hidden]{display:none}
.pd-sw button{height:34px;border-radius:9px;font-size:13.5px;color:var(--muted)}
.pd-sw button[aria-checked=true]{background:rgba(217,168,91,.16);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(217,168,91,.5)}
.pd-inc,.pd-out{list-style:none;display:grid;gap:7px;margin:12px 0 0}
.pd-inc li{display:flex;align-items:flex-start;gap:8px;font-size:13.5px;line-height:1.6}
.pd-inc .ic{width:15px;height:15px;color:var(--gold);flex:none;margin-top:3px}
.pd-out{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}
.pd-out li{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;line-height:1.6;color:var(--faint)}
.pd-out .ic{width:13px;height:13px;flex:none;margin-top:4px;opacity:.7}
.pd-out em{font-style:normal;display:block;font-size:11.5px;color:var(--muted);opacity:.8}
.pd-cyc .cyc{margin:14px 0 10px}
.pd-ill{display:block;text-align:end;font-size:11px;color:var(--faint);margin-top:6px}
.co-due{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;color:var(--muted);margin:0 0 12px}
.co-due b{color:var(--ink);font-size:17px}

/* ---------- ما أنجزه مُضيف لك اليوم ---------- */
.dt-card{position:relative;padding:18px;border-radius:var(--r);margin-bottom:14px;overflow:hidden;background:radial-gradient(120% 120% at 100% 0%,rgba(217,168,91,.22),transparent 55%),linear-gradient(180deg,#132a25,#0c1c1a);border:1px solid rgba(217,168,91,.32);box-shadow:0 30px 70px -45px rgba(0,0,0,.9)}
.dt-card::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg,transparent,rgba(242,210,150,.7),transparent)}
.dt-h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.dt-h h3{font-family:var(--display);font-size:20px;font-weight:700;line-height:1.4;margin-top:6px}
.dt-demo{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:500;color:var(--gold2);background:rgba(217,168,91,.12);border:1px solid rgba(217,168,91,.3);padding:2px 9px;border-radius:99px}
.dt-demo .ic{width:13px;height:13px}
.dt-h .btn{flex:none;white-space:nowrap}
.dt-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.dt-n{padding:14px 12px;border-radius:16px;background:rgba(7,18,17,.55);border:1px solid var(--line);display:flex;flex-direction:column;min-width:0}
.dt-ic{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:rgba(217,168,91,.15);color:var(--gold2);margin-bottom:8px}
.dt-ic .ic{width:16px;height:16px}
.dt-n b{font-family:var(--display);font-size:34px;font-weight:800;line-height:1.15;color:var(--gold2);font-variant-numeric:tabular-nums}
.dt-n strong{font-size:14px;font-weight:600;line-height:1.45;margin-top:2px}
.dt-n em{font-style:normal;font-size:12px;line-height:1.55;color:var(--faint);margin-top:2px}
.dt-lk .dt-n{opacity:.55}
@media(max-width:420px){.dt-h{flex-direction:column;gap:10px}.dt-h .btn{align-self:stretch;justify-content:center}}
@media(min-width:1040px){.dt-card{padding:24px 26px}.dt-h h3{font-size:24px}.dt-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.dt-n{padding:18px}.dt-n b{font-size:44px}.dt-n strong{font-size:15px}}
.dt-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}
.dt-foot p{font-size:12.5px;color:var(--faint);line-height:1.5}
.dt-foot .btn{flex:none;white-space:nowrap}

/* quote drawer: wide on desktop, form + live preview side by side */
.dw-q .qdoc{margin-top:4px}
@media (min-width:1040px){
  .drawer.dw-wide{width:min(1180px,96vw)}
  .dw-wide .qf-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr);gap:24px;align-items:start}
  .dw-wide .qf-prev{position:sticky;top:0}
  .dw-q .dw-body>.kv,.dw-q .dw-body>.menu-note,.dw-q .dw-body>.sec-t,.dw-q .dw-body>.qdoc{max-width:860px;margin-inline:auto}
}

/* مُضيف الحقيقي */
.mu-honest{display:flex;align-items:center;justify-content:center;gap:6px;margin:0;padding:6px 10px;font-size:11.5px;color:var(--gold2);background:rgba(217,168,91,.08);border-bottom:1px solid var(--line);text-align:center;line-height:1.5}
.mu-honest .ic{width:12px;height:12px;flex:none}
.mu-card .qp-s div{gap:10px;align-items:baseline}
.mu-card .qp-s div>span:first-child{min-width:0}
.mu-card .qp-s div>span:last-child{white-space:nowrap;flex:none}
.mu-card .qp-s .sub{font-size:12.5px;color:#8A8377}
.mu-card .qp-s .qx{color:var(--brand);font-weight:700;margin-inline-end:2px}
.mu-menu div{border-bottom:1px dashed #EEE6D8;padding:5px 0}
.mu-menu div:last-child{border-bottom:0}
.mu-open{margin:4px 14px 14px;width:calc(100% - 28px);justify-content:center}
.nv.ping,.tb.ping{position:relative}
.nv.ping::after,.tb.ping::after{content:"";position:absolute;width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 0 rgba(217,168,91,.7);animation:muPing 1.6s infinite;inset-inline-start:26px;top:8px}
.tb.ping::after{inset-inline-start:auto;inset-inline-end:calc(50% - 18px);top:4px}
@keyframes muPing{0%{box-shadow:0 0 0 0 rgba(217,168,91,.7)}70%{box-shadow:0 0 0 9px rgba(217,168,91,0)}100%{box-shadow:0 0 0 0 rgba(217,168,91,0)}}
.mu-new{display:inline-block;font-style:normal;font-size:11px;font-weight:500;color:var(--gold2);background:rgba(217,168,91,.14);border-radius:99px;padding:1px 8px;margin-inline-start:6px;vertical-align:middle}
.row.is-fresh{box-shadow:inset 3px 0 0 var(--gold)}
.mu-fresh{margin-bottom:14px;border-color:rgba(217,168,91,.35)}
@media (prefers-reduced-motion:reduce){.nv.ping::after,.tb.ping::after{animation:none}}

/* منيو QR */
.qr-wrap{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){.qr-wrap{grid-template-columns:minmax(300px,360px) 1fr;align-items:start}}
.qr-stage{display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px;border-radius:22px;background:radial-gradient(circle at 50% 0,rgba(217,168,91,.12),transparent 60%),rgba(255,255,255,.02);border:1px solid var(--line)}
.qr-size{font-size:12px;color:var(--faint)}
.qr-card{width:100%;max-width:300px;aspect-ratio:105/148;background:#FBF7F0;color:#1F1B16;border-radius:16px;overflow:hidden;display:flex;flex-direction:column;align-items:center;box-shadow:0 30px 60px -30px rgba(0,0,0,.7);font-family:var(--body,Plex),sans-serif}
.qc-top{width:100%;background:var(--brand);color:var(--brand-ink,#fff);display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 12px 14px;text-align:center}
.qc-logo{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.18);display:grid;place-items:center;font-family:Kufi,serif;font-weight:700;font-size:21px}
.qc-n b{display:block;font-family:Kufi,serif;font-size:18px;line-height:1.35}
.qc-n small{font-size:11.5px;opacity:.8}
.qc-code{width:64%;margin:16px auto 8px;background:#fff;padding:6px;border-radius:10px;box-shadow:0 6px 18px -10px rgba(0,0,0,.25)}
.qc-code svg{display:block;width:100%;height:auto}
.qc-cta{font-family:Kufi,serif;font-weight:700;font-size:16px;margin-top:6px;text-align:center}
.qc-sub{font-size:12px;color:#6E665A}
.qc-foot{margin-top:auto;padding-bottom:12px;font-family:Kufi,serif;font-weight:700;font-size:12px;color:#B98A3E}
.qr-acts{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.qr-url input{font-size:12.5px}

/* دورة الاشتراك */
.sub-ban{display:flex;align-items:center;gap:12px;border-radius:16px;padding:12px 14px;margin:0 0 14px;border:1px solid var(--line2);background:var(--card)}
.sub-ban>.ic{width:22px;height:22px;flex:none}
.sub-ban>div{flex:1;min-width:0}.sub-ban b{display:block;font-size:14px;line-height:1.5}.sub-ban small{display:block;color:var(--muted);font-size:12px;line-height:1.6;margin-top:2px}
.sub-ban .btn{flex:none}
.sub-ban.warn{background:rgba(231,182,92,.12);border-color:rgba(231,182,92,.42)}.sub-ban.warn>.ic,.sub-ban.warn b{color:var(--amber)}
.sub-ban.bad{background:rgba(224,122,106,.13);border-color:rgba(224,122,106,.45)}.sub-ban.bad>.ic,.sub-ban.bad b{color:var(--red)}
.sub-ban.off{background:rgba(244,236,223,.06)}.sub-ban.off>.ic{color:var(--gold)}
.sub-ban.info{padding:10px 14px}.sub-ban.info>.ic{color:var(--gold)}
@media(max-width:560px){.sub-ban{flex-wrap:wrap}.sub-ban .btn{width:100%;justify-content:center}}
.sub-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;border-radius:99px;padding:4px 11px;white-space:nowrap;border:1px solid}
.sub-chip i{width:7px;height:7px;border-radius:50%;background:currentColor}
.sub-chip.ok{color:var(--teal2);background:rgba(59,161,145,.12);border-color:rgba(59,161,145,.3)}
.sub-chip.warn{color:var(--amber);background:rgba(231,182,92,.12);border-color:rgba(231,182,92,.35)}
.sub-chip.bad{color:var(--red);background:rgba(224,122,106,.12);border-color:rgba(224,122,106,.35)}
.sub-chip.free{color:var(--ink);background:rgba(244,236,223,.07);border-color:var(--line2)}
.card-h .end{display:flex;align-items:center;gap:8px}
.sub-was{font-size:12px;color:var(--muted);font-weight:500}
.sub-kv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0}
.sub-kv div{background:rgba(244,236,223,.04);border:1px solid var(--line);border-radius:12px;padding:10px}
.sub-kv dt{font-size:11.5px;color:var(--muted)}.sub-kv dd{margin:4px 0 0;font-weight:700;font-size:13.5px}
.sub-acts{display:flex;flex-wrap:wrap;gap:8px}
.wa-prev{background:#0b1714;border-radius:14px;padding:14px;border:1px solid var(--line)}
.wa-b{background:#1f3a33;border-radius:12px 12px 12px 4px;padding:10px 12px;max-width:340px;position:relative}
.wa-b b{color:var(--gold2);font-size:12.5px}.wa-b p{margin:4px 0 8px;font-size:13.5px;line-height:1.7}
.wa-btn{display:block;text-align:center;border-top:1px solid rgba(244,236,223,.12);padding-top:8px;color:var(--teal2);font-weight:700;font-size:13px}
.wa-b time{position:absolute;left:10px;top:10px;font-size:10.5px;color:var(--faint)}
.inv{display:flex;flex-direction:column}
.inv-r{display:grid;grid-template-columns:1.2fr 1fr 1fr auto;gap:8px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);font-size:13px}
.inv-r:last-child{border-bottom:0}
@media(max-width:560px){.inv-r{grid-template-columns:1fr auto;row-gap:2px}.inv-r span:nth-child(2){color:var(--muted);font-size:12px}}
.cyc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;counter-reset:c}
.cyc-list li{position:relative;padding:8px 34px 8px 0;border-radius:10px;counter-increment:c}
.cyc-list li::before{content:counter(c);position:absolute;right:4px;top:9px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;background:rgba(244,236,223,.07);color:var(--muted)}
.cyc-list li b{display:block;font-size:13.5px}.cyc-list li span{display:block;font-size:12.5px;color:var(--muted);line-height:1.6}
.cyc-list li.on{background:rgba(217,168,91,.09)}.cyc-list li.on::before{background:var(--gold);color:#1a1307}
.sim-card{border-style:dashed}
.sim-btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.sim-btns .btn{justify-content:center}
.mo-off{display:grid;gap:16px}
.mo-chat{display:flex;flex-direction:column;gap:10px;background:rgba(0,0,0,.18);border-radius:14px;padding:14px;border:1px solid var(--line)}
.mo-chat .m.out{align-self:flex-start;max-width:85%}
.mo-stop{align-self:center;display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--amber);background:rgba(231,182,92,.1);border:1px solid rgba(231,182,92,.35);border-radius:99px;padding:6px 14px;text-align:center}
.mo-cta{display:flex;flex-direction:column;align-items:flex-start;gap:8px}.mo-cta b{font-size:15px}.mo-cta p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.7}
.co-free{max-width:520px;margin:0 auto;display:grid;gap:14px}
.cf-plan{display:flex;align-items:center;gap:12px;justify-content:space-between;background:rgba(217,168,91,.08);border:1px solid rgba(217,168,91,.3);border-radius:14px;padding:14px}
.cf-plan b{display:block}.cf-plan small{display:block;color:var(--muted);font-size:12.5px;line-height:1.6;margin-top:2px}.cf-p{font-family:var(--display);font-weight:800;font-size:22px;color:var(--gold2);white-space:nowrap}
.rn-amt{font-family:var(--display);font-weight:800;font-size:30px;color:var(--gold2);margin:4px 0 10px}
.rn-box .co-acts{width:100%;max-width:360px;margin-inline:auto}

/* ===== v10: trial, welcome, end card, nudge, onboarding, demo mode ===== */
.pcards.two{max-width:820px;margin-inline:auto}
@media (min-width:900px){.pcards.two{grid-template-columns:repeat(2,minmax(0,1fr))}}
.co-trialline{max-width:820px;margin:16px auto 0;display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px dashed rgba(217,168,91,.45);border-radius:16px;background:rgba(217,168,91,.06)}
.co-trialline>div{flex:1;min-width:0}.co-trialline b{display:block;font-size:15px;color:var(--gold2)}.co-trialline small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px;line-height:1.6}
@media (max-width:520px){.co-trialline{flex-direction:column;align-items:stretch;text-align:center}}
.trial-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:#1b1306;background:linear-gradient(180deg,#F2D296,#D9A85B);border-radius:99px;padding:3px 11px;white-space:nowrap}
.trial-chip[hidden]{display:none}
.trial-chip .ic{width:13px;height:13px}
@media (max-width:640px){.trial-chip{font-size:11px;padding:3px 9px;max-width:46vw;overflow:hidden;text-overflow:ellipsis}.trial-chip span{overflow:hidden;text-overflow:ellipsis}}
.bar .live.off{display:none!important}
.sub-ban.trial{border-color:rgba(217,168,91,.4);background:linear-gradient(90deg,rgba(217,168,91,.12),rgba(217,168,91,.03))}
.sub-ban.trial>.ic{color:var(--gold2)}
.sub-chip.trial{color:#1b1306;background:linear-gradient(180deg,#F2D296,#D9A85B)}
.sub-chip.trial i{background:#1b1306}
.tr-meter{height:6px;border-radius:9px;background:rgba(244,236,223,.08);margin:4px 0 14px;overflow:hidden}
.tr-meter i{display:block;height:100%;background:linear-gradient(90deg,#D9A85B,#F2D296);border-radius:9px}
.sim-lab{font-size:12px;color:var(--faint);margin:10px 0 6px}
.dt-sub{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
/* welcome & end card */
.ov.ov-wl{display:flex;align-items:flex-start;justify-content:center}
.ov.ov-wl .ov-in{width:100%}
.wl{display:flex;justify-content:center;padding:2vh 0}
.wl-card{position:relative;width:100%;max-width:880px;border-radius:28px;padding:26px 20px 22px;background:radial-gradient(120% 90% at 100% 0%,rgba(217,168,91,.20),transparent 55%),linear-gradient(180deg,#132a25,#0b1a18);border:1px solid rgba(217,168,91,.32);box-shadow:0 40px 90px -40px rgba(0,0,0,.8);overflow:hidden;animation:wlIn .6s var(--ease) both}
.wl-card::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg,transparent,rgba(242,210,150,.8),transparent)}
@keyframes wlIn{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
.wl-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.wl-logo{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:22px;background:var(--brand);color:var(--brand-ink);box-shadow:0 0 0 3px rgba(217,168,91,.25)}
.wl-tag{font-size:12.5px;font-weight:600;color:#1b1306;background:linear-gradient(180deg,#F2D296,#D9A85B);border-radius:99px;padding:4px 12px}
.wl-tag.bad{color:#fff;background:rgba(224,122,106,.9)}
.ov .wl-h{font-family:var(--display);font-size:clamp(25px,5.4vw,40px);line-height:1.4;text-align:right;margin:0 0 4px}
.wl-h span{color:var(--gold2)}
.wl-lead{color:var(--muted);font-size:15px;margin:6px 0 4px;max-width:40em}
.wl-grid{display:grid;gap:14px;margin-top:18px}
@media (min-width:820px){.wl-grid{grid-template-columns:1fr 1fr;gap:18px}.wl-card{padding:34px 36px 28px}}
.wl-grid section{background:rgba(244,236,223,.035);border:1px solid var(--line);border-radius:20px;padding:16px}
.wl-grid h3{font-size:14px;color:var(--gold2);font-weight:600;margin-bottom:10px}
.wl-on{list-style:none;display:grid;gap:9px}
.wl-on li{display:flex;align-items:flex-start;gap:9px;font-size:14.5px;line-height:1.55;animation:wlLi .5s var(--ease) both}
.wl-on li .ic{width:18px;height:18px;flex:none;margin-top:2px;color:var(--teal2)}
.end-stop .wl-on li .ic{color:var(--red)}
@keyframes wlLi{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
.wl-kv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:14px}
.wl-kv div{background:rgba(0,0,0,.18);border:1px solid var(--line);border-radius:14px;padding:9px 10px;min-width:0}
.wl-kv small{display:block;font-size:11.5px;color:var(--faint)}
.wl-kv b{display:block;font-size:13.5px;line-height:1.5;margin-top:2px}
.wl-fine{font-size:12px;color:var(--faint);margin-top:10px;line-height:1.7}
.wl-steps{list-style:none;display:grid;gap:10px}
.wl-steps li{display:flex;gap:12px;align-items:flex-start;animation:wlLi .5s var(--ease) both}
.wl-steps li>span{width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;font-weight:700;color:#1b1306;background:linear-gradient(180deg,#F2D296,#D9A85B)}
.wl-steps b{display:block;font-size:14.5px}.wl-steps small{display:block;color:var(--muted);font-size:12.5px;line-height:1.6}
.wl-acts{display:flex;gap:10px;justify-content:center;margin-top:20px;flex-wrap:wrap}
.wl-acts .btn{min-width:150px;justify-content:center}
#wlGo{min-width:220px;font-size:16px}
/* onboarding */
.onb{margin-bottom:14px;border-color:rgba(217,168,91,.3)}
.onb .card-h{flex-wrap:wrap}
.onb-bar{flex:1 1 100%;height:5px;border-radius:9px;background:rgba(244,236,223,.08);overflow:hidden;margin-top:8px}
.onb-bar i{display:block;height:100%;background:linear-gradient(90deg,#D9A85B,#F2D296);transition:width .5s var(--ease)}
.onb-l{list-style:none;display:grid;gap:8px}
@media (min-width:900px){.onb-l{grid-template-columns:repeat(3,minmax(0,1fr))}}
.onb-l button{width:100%;display:flex;align-items:center;gap:11px;text-align:right;background:rgba(244,236,223,.03);border:1px solid var(--line);border-radius:14px;padding:11px 12px;color:inherit;font:inherit;cursor:pointer}
.onb-l button:hover{border-color:rgba(217,168,91,.4)}
.onb-l .k{width:28px;height:28px;flex:none;border-radius:50%;display:grid;place-items:center;font-weight:700;border:1px solid rgba(217,168,91,.5);color:var(--gold2)}
.onb-l .k .ic{width:15px;height:15px}
.onb-l div{flex:1;min-width:0}.onb-l b{display:block;font-size:14px}.onb-l small{display:block;font-size:12px;color:var(--muted);line-height:1.5}
.onb-l button>.ic{width:16px;height:16px;color:var(--faint);flex:none}
.onb-l li.done button{opacity:.7}.onb-l li.done .k{background:var(--teal);border-color:var(--teal);color:#fff}.onb-l li.done b{text-decoration:line-through;text-decoration-color:rgba(244,236,223,.35)}
.wa-conn{text-align:center}.wa-conn p{color:var(--muted);margin:8px 0 14px}.wa-conn .fld{text-align:right}
.wa-note{display:flex;gap:8px;align-items:flex-start;text-align:right;font-size:13px;color:var(--gold2);background:rgba(217,168,91,.08);border:1px solid rgba(217,168,91,.25);border-radius:12px;padding:10px 12px;margin-top:12px}
.wa-note .ic{width:16px;height:16px;flex:none;margin-top:2px}
/* nudge */
.nudge{margin-bottom:14px;border-color:rgba(224,122,106,.35);background:radial-gradient(110% 100% at 100% 0%,rgba(224,122,106,.12),transparent 60%),var(--card)}
.nd-h h3{font-family:var(--display);font-size:20px;line-height:1.45;margin:8px 0 2px}
.nd-h p{color:var(--muted);font-size:13.5px}
.nd-list{display:grid;gap:8px;margin:14px 0}
.nd-m{display:flex;align-items:center;gap:10px;background:rgba(0,0,0,.16);border:1px solid var(--line);border-radius:14px;padding:10px 12px}
.nd-m>div{flex:1;min-width:0}.nd-m b{display:block;font-size:13.5px;font-weight:500;line-height:1.5}.nd-m small{display:block;font-size:11.5px;color:var(--faint)}
.nd-av{width:32px;height:32px;flex:none;border-radius:50%;display:grid;place-items:center;background:rgba(244,236,223,.06);color:var(--muted)}.nd-av .ic{width:16px;height:16px}
.nd-x{font-size:11px;color:var(--red);border:1px solid rgba(224,122,106,.4);border-radius:99px;padding:1px 8px;white-space:nowrap}
.nd-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.nd-foot small{color:var(--faint);font-size:12px}
@media (min-width:1040px){.nd-h h3{font-size:24px}}
/* demo mode */
.demo-fab{position:fixed;z-index:26;left:14px;bottom:calc(78px + var(--sab));display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:99px;font:inherit;font-size:12.5px;color:var(--muted);background:rgba(9,22,20,.78);border:1px solid var(--line2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);cursor:pointer;opacity:.72;transition:opacity .2s}
.demo-fab:hover{opacity:1;color:var(--gold2)}.demo-fab .ic{width:15px;height:15px}
@media (min-width:1040px){.demo-fab{bottom:18px;left:18px}}
.demo-hdr{display:none}
@media (max-width:1039.98px){.demo-fab{display:none}.demo-hdr{display:inline-flex}}
body[data-v="mudheef"] .demo-fab{display:none}
body.demo-on .demo-hdr{display:none}
input[aria-invalid="true"]{border-color:#c0564b!important;box-shadow:0 0 0 3px rgba(192,86,75,.18)}
.sub-cxl{color:var(--muted)}
body.demo-on .demo-fab,body.demo-on .tabbar,body.demo-on .toast{display:none}
body.demo-on .view{padding-bottom:calc(var(--demoH,180px) + 24px)}
body.demo-on .drawer{bottom:var(--demoH,180px);max-height:calc(100dvh - var(--demoH,180px) - 10px)}
.demo-bar{position:fixed;z-index:80;inset:auto 0 0 0;padding:10px 10px calc(10px + var(--sab));background:linear-gradient(180deg,rgba(6,16,15,.94),#061110);border-top:1px solid rgba(217,168,91,.35);box-shadow:0 -20px 40px -20px rgba(0,0,0,.7);animation:dbIn .45s var(--ease) both}
.demo-bar[hidden]{display:none}
@keyframes dbIn{from{transform:translateY(100%)}to{transform:none}}
.db-in{max-width:1100px;margin:0 auto}
.db-top{display:flex;align-items:center;gap:8px}
.db-lab{font-size:11.5px;color:var(--gold2);white-space:nowrap;display:none}
.db-dots{list-style:none;display:flex;gap:5px;flex:1;min-width:0}
.db-dots li{flex:1;min-width:0}
.db-dots button{width:100%;height:26px;border-radius:9px;border:1px solid var(--line2);background:rgba(244,236,223,.04);color:var(--muted);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.db-dots button.done{background:rgba(59,161,145,.18);border-color:rgba(59,161,145,.45);color:var(--teal2)}
.db-dots button.on{background:linear-gradient(180deg,#F2D296,#D9A85B);border-color:transparent;color:#1b1306}
.db-end{flex:none;height:26px;padding:0 10px;border-radius:9px;border:1px solid var(--line2);background:transparent;color:var(--muted);font:inherit;font-size:12px;cursor:pointer;white-space:nowrap}
.db-end:hover{color:var(--ink)}
.db-main{display:flex;align-items:center;gap:8px;margin-top:9px}
.db-cap{flex:1;min-width:0}
.db-n{display:block;font-size:12px;color:var(--gold2);font-weight:600}
.db-cap b{display:block;font-family:var(--display);font-size:18px;line-height:1.45}
.db-cap p{color:var(--muted);font-size:13.5px;line-height:1.6;margin-top:2px}
.db-nav{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line2);background:rgba(244,236,223,.05);color:var(--ink);cursor:pointer}
.db-nav .ic{width:20px;height:20px;transform:scaleX(-1)}
.db-nav.nx{background:linear-gradient(180deg,#E8BC72,#D09A47);color:#1b1306;border-color:transparent}
.db-nav.nx .ic{transform:none}
.db-nav.nx.fin{width:auto;padding:0 14px;border-radius:99px}
.db-nav:disabled{opacity:.3;cursor:default}
@media (min-width:1040px){
  .demo-bar{inset:auto 0 18px 0;margin:0 auto;width:min(1080px,calc(100vw - var(--side) - 48px));margin-inline-start:calc(var(--side) + 24px);border:1px solid rgba(217,168,91,.4);border-radius:22px;padding:14px 18px}
  .db-lab{display:inline}
  .db-dots button{height:32px;font-size:15px}
  .db-end{height:32px;font-size:13px}
  .db-main{margin-top:12px;gap:14px}
  .db-n{font-size:14px}
  .db-cap b{font-size:28px}
  .db-cap p{font-size:17px}
  .db-nav{width:56px;height:56px}
}
.demo-hl{position:relative;outline:2px solid rgba(242,210,150,.95)!important;outline-offset:4px;border-radius:16px;box-shadow:0 0 0 8px rgba(217,168,91,.16),0 0 46px -6px rgba(217,168,91,.55)!important;animation:dhl 1.8s ease-in-out infinite}
@keyframes dhl{50%{outline-color:rgba(242,210,150,.45);box-shadow:0 0 0 12px rgba(217,168,91,.08),0 0 30px -10px rgba(217,168,91,.4)}}

/* radar */
.rd-head{display:flex;align-items:center;gap:16px;margin-bottom:14px;border-color:rgba(217,168,91,.3);background:radial-gradient(120% 120% at 100% 0%,rgba(217,168,91,.16),transparent 55%),var(--card)}
.rd-head h3{font-family:var(--display);font-size:20px;line-height:1.45;margin-top:6px}.rd-head p{color:var(--muted);font-size:13px}
.rd-score{flex:none;width:84px;height:84px;border-radius:50%;display:grid;place-content:center;text-align:center;border:3px solid rgba(217,168,91,.7);box-shadow:inset 0 0 0 6px rgba(217,168,91,.08)}
.rd-score b{font-family:var(--display);font-size:30px;line-height:1;color:var(--gold2)}.rd-score small{font-size:11px;color:var(--faint)}
.rd-grid{display:grid;gap:14px;margin-bottom:14px}
@media (min-width:1040px){.rd-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}}
.rd-col{display:grid;gap:14px;align-content:start}
.rd-svg{display:block;width:100%;max-width:380px;margin:0 auto;overflow:visible}
.rd-svg .rg{fill:none;stroke:rgba(244,236,223,.12);stroke-width:1}
.rd-svg .rp{fill:rgba(217,168,91,.22);stroke:#E8BC72;stroke-width:2;stroke-linejoin:round}
.rd-svg .rd{fill:#F2D296}
.rd-svg .rl{fill:rgba(244,236,223,.78);font-size:12.5px;font-family:var(--body)}
.rd-svg .rv{fill:#F2D296;font-size:12px;font-weight:700;font-family:var(--body)}
.rd-ax{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}
@media (min-width:560px){.rd-ax{grid-template-columns:repeat(3,minmax(0,1fr))}}
.rd-ax div{background:rgba(244,236,223,.03);border:1px solid var(--line);border-radius:12px;padding:8px 10px;min-width:0}
.rd-ax small{display:block;font-size:11.5px;color:var(--faint)}.rd-ax b{display:block;font-size:13.5px}
.rd-spk{display:grid;gap:10px}
.rd-spk>div{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:center;column-gap:12px;padding:8px 0;border-bottom:1px solid var(--line)}
.rd-spk>div:last-child{border-bottom:0}
.rd-spk small{font-size:12px;color:var(--muted)}.rd-spk b{font-size:17px}
.rd-spk .spk{grid-column:2;grid-row:1/3;width:120px;height:34px}
.spk polyline{fill:none;stroke:var(--teal2);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.rd-top{display:grid;gap:9px}
.rd-t{display:grid;grid-template-columns:22px minmax(0,1.2fr) minmax(0,1fr) auto;gap:10px;align-items:center;font-size:13.5px}
.rd-t .n{color:var(--gold2);font-weight:700}.rd-t .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rd-t .rd-b{height:7px;border-radius:9px;background:rgba(244,236,223,.07);overflow:hidden}.rd-t .rd-b i{display:block;height:100%;background:linear-gradient(90deg,#D9A85B,#F2D296);border-radius:9px}
.rd-heat-c{margin-bottom:14px}
.rd-heat-w{overflow-x:auto}
.rd-heat{width:100%;border-collapse:separate;border-spacing:4px;font-size:11.5px;min-width:320px}
.rd-heat th{color:var(--faint);font-weight:500;padding:0 2px;white-space:nowrap}
.rd-heat tbody th{text-align:start;font-size:12px;color:var(--muted)}
.rd-heat td{height:26px;padding:0}.rd-heat td i{display:block;height:100%;border-radius:6px;background:#D9A85B}
.rd-recs{margin-bottom:14px}.rd-rh{display:flex;align-items:center;gap:8px;font-size:16px;margin:4px 2px 10px;color:var(--gold2)}.rd-rh .ic{width:18px;height:18px}
.rd-rg{display:grid;gap:12px}
@media (min-width:900px){.rd-rg{grid-template-columns:repeat(3,minmax(0,1fr))}}
.rd-rec{display:flex;flex-direction:column;gap:6px}.rd-rec b{font-size:15px;line-height:1.5}.rd-rec p{color:var(--muted);font-size:13px;flex:1}.rd-rec .btn{align-self:flex-start;margin-top:4px}
.rd-mini{display:flex;align-items:center;gap:16px;margin:0 0 14px;color:inherit;text-decoration:none;border-color:rgba(217,168,91,.28)}
.rd-mini:hover{border-color:rgba(217,168,91,.55)}
.rd-mini-s{flex:none;width:130px}.rd-mini-s .rd-svg .rl,.rd-mini-s .rd-svg .rv{display:none}
.rd-mini h3{font-size:17px;margin:6px 0 2px}.rd-mini p{color:var(--muted);font-size:13px}.rd-mini p b{color:var(--gold2)}.rd-mini .link{display:inline-flex;align-items:center;gap:4px;margin-top:6px;font-size:13px}
.demo-offer{position:fixed;z-index:27;left:14px;right:14px;bottom:calc(122px + var(--sab));max-width:380px;padding:14px 16px;border-radius:18px;background:linear-gradient(180deg,#14302a,#0c1d1a);border:1px solid rgba(217,168,91,.45);box-shadow:0 24px 50px -20px rgba(0,0,0,.8);animation:wlIn .5s var(--ease) both}
.demo-offer b{display:block;font-size:15px;color:var(--gold2)}.demo-offer p{font-size:13px;color:var(--muted);margin:4px 0 10px}.demo-offer>div{display:flex;gap:8px;flex-wrap:wrap}
@media (min-width:1040px){.demo-offer{left:18px;right:auto;bottom:64px}}

.demo-bar{background:#061110}
@media (min-width:1040px){.demo-bar{background:linear-gradient(180deg,#0b1d1a,#061110)}}
.wl-kv{grid-template-columns:repeat(auto-fit,minmax(96px,1fr))}

.cyc-list li::before{content:counter(c,arabic-indic)}
.db-nav.nx.fin{font:inherit;font-weight:700;font-size:15px}

/* hidden until styled */
.dec{display:none!important}

/* ===== موشن الترحيب ===== */
.wx{position:fixed;inset:0;z-index:120;background:radial-gradient(120% 80% at 50% 0%,#14302b 0%,#071211 55%,#040b0a 100%);display:flex;align-items:center;justify-content:center;overflow:hidden;opacity:0;transition:opacity .6s var(--ease)}
.wx.on{opacity:1}.wx.out{opacity:0;transform:scale(1.02);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.wx-glow{position:absolute;width:620px;height:620px;border-radius:50%;background:radial-gradient(circle,rgba(217,168,91,.22),transparent 65%);top:-180px;left:50%;transform:translateX(-50%);animation:wxG 6s ease-in-out infinite alternate}
.wx-ring{position:absolute;width:520px;height:520px;border:1px solid rgba(217,168,91,.14);border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%) scale(.6);opacity:0;animation:wxR 2.4s .2s var(--ease) forwards}
.wx-ring.r2{width:760px;height:760px;animation-delay:.5s;border-color:rgba(217,168,91,.08)}
.wx-skip{position:absolute;top:calc(18px + var(--sat));left:18px;color:var(--muted);font-size:13px;padding:8px 14px;border:1px solid var(--line2);border-radius:99px;background:rgba(244,236,223,.04);z-index:2}
.wx-in{position:relative;z-index:1;width:min(560px,90vw);text-align:center;padding:24px 0}
.wx-tag{display:inline-block;font-size:12.5px;color:var(--gold2);border:1px solid rgba(217,168,91,.35);background:rgba(217,168,91,.1);padding:5px 14px;border-radius:99px;opacity:0;animation:wxU .6s .1s var(--ease) forwards}
.wx-h{font-family:var(--display);margin:18px 0 10px;line-height:1.25}
.wx-l1{display:block;font-size:clamp(22px,5.2vw,30px);color:var(--ink);opacity:0;animation:wxU .7s .2s var(--ease) forwards}
.wx-l2{display:block;font-size:clamp(34px,9vw,58px);background:linear-gradient(90deg,#b9853b,#F2D296 45%,#D9A85B);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:0;filter:blur(8px);animation:wxN .9s .35s var(--ease) forwards}
.wx-p{color:var(--muted);font-size:14.5px;opacity:0;animation:wxU .6s .5s var(--ease) forwards}
.wx-f{list-style:none;padding:0;margin:16px auto 0;display:grid;gap:9px;max-width:420px;text-align:right}
.wx-f li{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:14px;background:linear-gradient(180deg,rgba(244,236,223,.06),rgba(244,236,223,.02));border:1px solid var(--line2);font-size:14.5px;opacity:0;transform:translateY(12px);animation:wxU .6s var(--d) var(--ease) forwards}
.wx-f li .ic{width:18px;height:18px;color:#0b1a18;background:var(--gold);border-radius:50%;padding:3px;flex:none}
.wx-n{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px auto 0;max-width:420px;opacity:0;animation:wxU .7s var(--d) var(--ease) forwards}
.wx-n div{padding:12px;border-radius:14px;border:1px solid rgba(217,168,91,.3);background:rgba(217,168,91,.07)}
.wx-n b{display:block;font-family:var(--display);font-size:30px;color:var(--gold2)}.wx-n small{color:var(--muted);font-size:12px}
.wx-go{margin-top:20px;min-width:220px;height:50px;font-size:16px;opacity:0;animation:wxU .7s var(--d) var(--ease) forwards,wxP 2.4s calc(var(--d) + .8s) ease-in-out infinite}
.wx-fine{color:var(--faint);font-size:11.5px;margin-top:10px}
.wx-rm *{animation:none!important;opacity:1!important;transform:none!important;filter:none!important}
@keyframes wxU{to{opacity:1;transform:none}}
@keyframes wxN{to{opacity:1;filter:none}}
@keyframes wxR{to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes wxG{to{transform:translateX(-50%) translateY(40px) scale(1.1)}}
@keyframes wxP{0%,100%{box-shadow:0 0 0 0 rgba(217,168,91,.45)}50%{box-shadow:0 0 0 10px rgba(217,168,91,0)}}
/* ===== أرقام مُضيف في الرئيسية ===== */
.hx{margin:0 0 14px;padding:18px;border-radius:var(--r);border:1px solid rgba(217,168,91,.28);background:radial-gradient(100% 140% at 100% 0%,rgba(217,168,91,.14),transparent 60%),linear-gradient(180deg,var(--card2),#0b1a18);overflow:hidden}
.hx-h{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:14px}
.hx-h small{color:var(--gold2);font-size:12px}.hx-h h3{font-family:var(--display);font-size:17px;margin-top:3px}
.hx-g{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.hx-c{position:relative;padding:14px;border-radius:16px;background:rgba(244,236,223,.035);border:1px solid var(--line);opacity:0;transform:translateY(14px);animation:wxU .7s calc(var(--d) + 120ms) var(--ease) forwards}
.hx-c:first-child{border-color:rgba(217,168,91,.4);background:rgba(217,168,91,.08)}
.hx-ic{display:inline-flex;width:30px;height:30px;border-radius:10px;align-items:center;justify-content:center;background:rgba(217,168,91,.14);color:var(--gold)}
.hx-c b{display:inline-block;font-family:var(--display);font-size:30px;margin-top:10px;color:var(--ink)}
.hx-c:first-child b{color:var(--gold2)}.hx-c em{font-style:normal;color:var(--muted);font-size:12.5px;margin-inline-start:5px}
.hx-c small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
@media (max-width:760px){.hx-g{grid-template-columns:1fr 1fr}.hx-c b{font-size:26px}.hx-h{flex-direction:column}}
@media (prefers-reduced-motion:reduce){.hx-c{opacity:1;transform:none;animation:none}}

/* ===== motion polish: light, fast, transform/opacity only (no layout shift) ===== */
.v-in{animation:vfade .28s ease-out both}
@keyframes vfade{from{opacity:0}to{opacity:1}}
.st-in{animation:vin .5s var(--ease) both;animation-delay:calc(var(--si,0) * 55ms)}
.card,.kpi,.hx-c,.opp,.occ{transition:transform .25s var(--ease),border-color .25s,box-shadow .25s,background .25s}
@media (hover:hover){
  .kpi:hover,.hx-c:hover,.opp:hover,.occ:hover{transform:translateY(-2px);border-color:var(--line2);box-shadow:0 14px 30px -20px rgba(0,0,0,.7)}
  .card:hover{border-color:var(--line2)}
  .btn:hover{transform:translateY(-1px)}
  .btn-gold:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 12px 26px -12px rgba(217,168,91,.85)}
}
.btn:active,.icon-btn:active,.tb:active,.stb:active{transform:scale(.97)}
.row:active{transform:scale(.995)}
/* gold shimmer on primary CTAs */
.btn-gold{position:relative;overflow:hidden;isolation:isolate}
.btn-gold::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);transform:translateX(-120%);animation:shim 4.8s 1.2s ease-in-out infinite}
@keyframes shim{0%{transform:translateX(-120%)}22%,100%{transform:translateX(120%)}}
.btn-gold:disabled::after{animation:none}
/* nav indicators slide instead of popping */
.nv::before{content:"";position:absolute;inset-inline-start:-14px;top:9px;bottom:9px;width:3px;border-radius:3px;background:var(--gold);transform:scaleY(0);opacity:0;transition:transform .3s var(--ease),opacity .3s}
.nv.on::before{transform:scaleY(1);opacity:1}
.tb{position:relative}
.tb::before{content:"";position:absolute;top:-1px;left:30%;right:30%;height:2px;border-radius:2px;background:var(--gold);transform:scaleX(0);transition:transform .3s var(--ease)}
.tb.on::before{transform:scaleX(1)}
.tb .ic{transition:transform .3s var(--ease)}
.tb.on .ic{transform:translateY(-1px)}
.subtabs .stb{transition:background .3s var(--ease),color .3s,box-shadow .3s}
/* chat: soft rise for every bubble */
.mchat .m,#cBody .m{animation:min .38s var(--ease) both}
@media (prefers-reduced-motion:reduce){
  .v-in,.st-in,.mchat .m,#cBody .m{animation:none!important}
  .btn-gold::after{display:none}
  .card,.kpi,.hx-c,.opp,.occ,.btn,.nv::before,.tb::before{transition:none!important}
}
@media (max-width:899px){ .phone{height:calc(100dvh - 150px - var(--sab));min-height:420px;max-height:640px} }

/* round 3: iPhone top bar — readable shop name, short trial chip, honesty label visible */
.trial-chip .tc-s{display:none}
@media (max-width:640px){
  .bar{flex-wrap:wrap;row-gap:4px;gap:8px}
  .bar-biz{flex:1 1 0;min-width:0}
  .bar-biz b{font-size:17px;line-height:1.25;white-space:normal;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word;text-overflow:ellipsis}
  .bar-acts{gap:6px;flex:none}
  .trial-chip{max-width:none;padding:3px 8px}
  .trial-chip .tc-l{display:none}
  .trial-chip .tc-s{display:inline}
  .bar-acts .icon-btn{width:36px;height:36px}
  .tour-btn{width:36px}
  .bar .demo-tag{display:block;order:9;flex:0 0 100%;text-align:center;border:0;padding:0;font-size:11px;line-height:1.4;color:var(--faint)}
}

.m.in.prop{border:1px solid rgba(217,168,91,.45);background:#1c2a22;white-space:normal}
.m.in.prop .who{color:var(--gold2)}

/* v19: اقتراحات فارغة، رمز الدخول */
.sugg.is-empty,.sugg:empty{padding:0;height:0;overflow:hidden}
.pin-locked>*:not(#pinOv):not(#toast){visibility:hidden!important}
.pin-ov{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:20px;background:radial-gradient(ellipse at 50% 0%,rgba(217,168,91,.12),transparent 60%),#071211;overflow-y:auto}
.pin-card{width:100%;max-width:380px;padding:28px 22px 22px;border-radius:24px;background:#0c1c1a;border:1px solid rgba(244,236,223,.12);box-shadow:0 40px 90px -40px rgba(0,0,0,.7);text-align:center;color:#F4ECDF}
.pin-card .biz-logo{margin:0 auto 12px;width:52px;height:52px;font-size:22px}
.pin-card h2{font-size:20px;font-weight:700;line-height:1.45}
.pin-sub{margin:4px 0 18px;font-size:13.5px;color:rgba(244,236,223,.66)}
.pin-l{display:block;text-align:start;margin-bottom:12px}
.pin-l span{display:block;font-size:13px;margin-bottom:6px;color:rgba(244,236,223,.78)}
.pin-in{width:100%;height:54px;border-radius:14px;border:1px solid rgba(244,236,223,.18);background:#071211;color:#F4ECDF;font-size:24px;letter-spacing:.6em;text-align:center;direction:ltr;font-family:inherit}
.pin-in:focus{outline:2px solid rgba(217,168,91,.6);outline-offset:1px}
.pin-err{margin:-2px 0 12px;font-size:13.5px;color:#f0a39a}
.pin-err[hidden]{display:none}
.pin-note{display:flex;gap:7px;align-items:flex-start;justify-content:center;margin-top:16px;font-size:12px;line-height:1.6;color:rgba(244,236,223,.6);text-align:start}
.pin-note .ic{width:14px;height:14px;flex:none;margin-top:3px}
.site-pub{display:flex;flex-wrap:wrap;gap:8px;align-items:center}