/* ============ TOKENS ============ */
body{
  --page:#F7F6F3; --bg:#F7F6F3; --surface:#FFFFFF;
  --blob1:#E8D3A6; --blob2:#C7D3DE; --blob3:#EEDFCF;
  --glass:rgba(255,255,255,.56); --glass-strong:rgba(255,255,255,.84); --glass-border:rgba(255,255,255,.9);
  --hair:rgba(23,20,15,.08); --fill:rgba(23,20,15,.05);
  --ink:#17140F; --ink2:#463F35; --muted:#6C6458;
  --gold:#A27A2C; --gold-ink:#7C5B1B; --gold-soft:rgba(176,137,62,.15);
  --cta:#17140F; --cta-ink:#F7F2E8;
  --ok:#2C7553; --ok-soft:rgba(44,117,83,.12);
  --warn:#9A6210; --warn-soft:rgba(168,106,18,.14);
  --bad:#AA3E2B; --bad-soft:rgba(176,65,46,.11);
  --info:#355476; --info-soft:rgba(53,84,118,.11);
  --shadow:0 12px 32px rgba(70,52,22,.09), 0 1px 2px rgba(70,52,22,.06);
  --scrim:rgba(20,17,12,.42);
  --c1:#B08A3E; --c2:#2B2722; --c3:#D8C49C; --c4:#7D8FA0; --c5:#9AB197;
  --art-sky1:#EFE3CD; --art-sky2:#CDD6DE; --art-l:#D9D2C6; --art-r:#EEE9E0; --art-line:rgba(23,20,15,.16);
  --f:"Vazirmatn", Tahoma, system-ui, sans-serif;
  --f-brand:"Bodoni Moda", "Didot", Georgia, serif;
  --f-latin:"Inter", system-ui, sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:light;
}
body[data-mode="dark"]{
  --page:#0E0D0B; --bg:#0E0D0B; --surface:#171511;
  --blob1:#4B3B1B; --blob2:#18252F; --blob3:#2A2117;
  --glass:rgba(255,255,255,.06); --glass-strong:rgba(30,27,23,.9); --glass-border:rgba(255,255,255,.11);
  --hair:rgba(255,255,255,.09); --fill:rgba(255,255,255,.06);
  --ink:#F2EDE4; --ink2:#D3CBBE; --muted:#A39A8C;
  --gold:#D8B66F; --gold-ink:#E4C78A; --gold-soft:rgba(216,182,111,.15);
  --cta:#D8B66F; --cta-ink:#17140F;
  --ok:#74C9A0; --ok-soft:rgba(116,201,160,.13);
  --warn:#E5B465; --warn-soft:rgba(229,180,101,.13);
  --bad:#EE8A74; --bad-soft:rgba(238,138,116,.12);
  --info:#9BBADB; --info-soft:rgba(155,186,219,.12);
  --shadow:0 12px 32px rgba(0,0,0,.38);
  --scrim:rgba(0,0,0,.55);
  --c1:#D8B66F; --c2:#EEE7DB; --c3:#8C7650; --c4:#7F97AE; --c5:#92AF8E;
  --art-sky1:#2A2219; --art-sky2:#18222C; --art-l:#2B2823; --art-r:#3A352D; --art-line:rgba(255,255,255,.14);
  color-scheme:dark;
}

/* ============ PAGE / DEVICE ============ */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;background:var(--page);color:var(--ink);font-family:var(--f);transition:background .4s}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,textarea{font:inherit;color:inherit}
.app{position:fixed;inset:0;overflow:hidden;background:var(--bg);isolation:isolate;transition:background .4s}
.side-brand,.side-sub,.side-foot{display:none}

/* ambient light behind glass */
.blobs{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.blobs span{position:absolute;border-radius:50%;filter:blur(70px);opacity:.9}
.blobs span:nth-child(1){width:42vmax;height:42vmax;background:var(--blob1);top:-12vmax;left:-14vmax}
.blobs span:nth-child(2){width:38vmax;height:38vmax;background:var(--blob2);top:35%;right:-16vmax}
.blobs span:nth-child(3){width:34vmax;height:34vmax;background:var(--blob3);bottom:-10vmax;left:10%}

html,body{height:100%}
.err{font-size:12.5px;color:var(--bad);display:flex;gap:6px;align-items:center}
.err:empty{display:none}
.input.bad{border-color:var(--bad)}
.thumbs{display:flex;gap:10px;flex-wrap:wrap}
.thumbs img{width:84px;height:84px;border-radius:20px;object-fit:cover}
.upl{width:84px;height:84px;border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:11px;color:var(--gold-ink);background:var(--gold-soft);cursor:pointer}
.upl input{display:none}
.spin{width:44px;height:44px;border-radius:50%;border:3px solid var(--hair);border-top-color:var(--gold);animation:rot .9s linear infinite;margin:20px auto}
@keyframes rot{to{transform:rotate(360deg)}}
.empty{text-align:center;padding:28px 16px;color:var(--muted);font-size:14px}
.btn[disabled]{opacity:.4;pointer-events:none}
.rule h3{font-size:15px;margin:0 0 6px}
.rule p{margin:0;font-size:13.5px;line-height:1.8;color:var(--ink2)}

/* ============ APP SHELL ============ */
.view{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;padding:calc(env(safe-area-inset-top,0px) + 16px) 20px calc(env(safe-area-inset-bottom,0px) + 120px);scrollbar-width:none;display:flex;flex-direction:column;gap:22px}
.view::-webkit-scrollbar{display:none}
.view > *{flex-shrink:0}
.view.flow{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 140px)}
.view.enter{animation:enter .34s var(--ease)}
.view.back{animation:back .3s var(--ease)}
@keyframes enter{from{opacity:0;transform:translateX(-22px)}to{opacity:1;transform:none}}
@keyframes back{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}
.glass{background:var(--glass);-webkit-backdrop-filter:blur(26px) saturate(170%);backdrop-filter:blur(26px) saturate(170%);border:1px solid var(--glass-border);box-shadow:var(--shadow)}
.card{border-radius:24px;padding:18px}
.tabbar{position:absolute;left:12px;right:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 10px);margin-inline:auto;max-width:520px;height:68px;border-radius:26px;display:flex;justify-content:space-around;align-items:center;z-index:20;transition:transform .35s var(--ease),opacity .25s}
.tabbar.hide{transform:translateY(130%);opacity:0;pointer-events:none}
.tab{flex:1;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:10.5px;color:var(--muted);position:relative}
.tab svg{width:23px;height:23px}
.tab.on{color:var(--ink);font-weight:600}
.tab.on::after{content:"";position:absolute;bottom:7px;width:4px;height:4px;border-radius:50%;background:var(--gold)}
.tab:focus-visible{outline:2px solid var(--gold);outline-offset:-6px;border-radius:18px}

/* ============ TYPE & PRIMITIVES ============ */
.ico{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ico.sm{width:18px;height:18px}.ico.xs{width:15px;height:15px}
.eyebrow{font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--gold-ink)}
.h-xl{font-size:28px;font-weight:300;line-height:1.35;margin:0;letter-spacing:-.01em}
.h-xl b{font-weight:600}
.h-xl span{color:var(--muted)}
.h-l{font-size:22px;font-weight:600;margin:0}
.h-m{font-size:17px;font-weight:600;margin:0}
.sub{font-size:13.5px;color:var(--muted);margin:0;line-height:1.6}
.num{font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.big-num{font-size:38px;font-weight:200;line-height:1;letter-spacing:-.02em}
.big-num small{font-size:14px;font-weight:400;color:var(--muted);margin-inline-start:6px;letter-spacing:0}
.sec{display:flex;flex-direction:column;gap:12px}
.sec-h{display:flex;justify-content:space-between;align-items:baseline}
.link{font-size:13px;color:var(--gold-ink);font-weight:500;display:inline-flex;align-items:center;gap:2px;min-height:32px}
.row{display:flex;align-items:center;gap:12px}
.between{display:flex;align-items:center;justify-content:space-between;gap:12px}
.stack{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.t{font-size:15px;font-weight:500}
.m{font-size:12.5px;color:var(--muted)}
.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.btn{height:52px;border-radius:17px;padding:0 20px;display:inline-flex;white-space:nowrap;align-items:center;justify-content:center;gap:8px;font-size:15px;font-weight:600;transition:transform .15s,opacity .2s}
.btn:active{transform:scale(.97)}
.btn.pri{background:var(--cta);color:var(--cta-ink)}
.btn.sec{background:var(--fill);color:var(--ink);border:1px solid var(--hair)}
.btn.sm{height:42px;border-radius:14px;font-size:14px;padding:0 14px;flex-direction:row}
.btn.block{width:100%}
.btn:focus-visible,.press:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.icon-btn{width:44px;height:44px;border-radius:15px;display:inline-flex;align-items:center;justify-content:center;position:relative;flex:none}
.icon-btn .dot{position:absolute;top:10px;left:11px;width:8px;height:8px;border-radius:50%;background:var(--gold);border:2px solid var(--bg)}
.press{transition:transform .15s var(--ease)}
.press:active{transform:scale(.975)}
.pill{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:999px;font-size:11.5px;font-weight:600;white-space:nowrap;flex:none}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.ok{background:var(--ok-soft);color:var(--ok)}
.pill.wait{background:var(--warn-soft);color:var(--warn)}
.pill.live{background:var(--gold-soft);color:var(--gold-ink)}
.pill.live::before{animation:pulse 1.6s infinite}
.pill.done{background:var(--fill);color:var(--muted)}
.pill.bad{background:var(--bad-soft);color:var(--bad)}
@keyframes pulse{50%{opacity:.25}}
.tile-ic{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:var(--gold-soft);color:var(--gold-ink);flex:none}
.tile-ic.neutral{background:var(--fill);color:var(--ink)}
.avatar{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:15px;background:linear-gradient(135deg,var(--c3),var(--c1));color:#fff;flex:none;box-shadow:0 0 0 2px var(--bg),0 0 0 3px var(--gold-soft)}
.divider{height:1px;background:var(--hair)}
.list{border-radius:22px;overflow:hidden}
.list > *{display:flex;align-items:center;gap:12px;padding:14px 16px;min-height:60px;width:100%;text-align:right;border-top:1px solid var(--hair)}
.list > *:first-child{border-top:0}
.chev{color:var(--muted)}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -20px;padding:2px 20px}
.chips::-webkit-scrollbar{display:none}
.chip{height:36px;padding:0 15px;border-radius:999px;font-size:13.5px;white-space:nowrap;border:1px solid var(--hair);background:var(--glass);flex:none;display:inline-flex;align-items:center;gap:6px}
.chip.on{background:var(--cta);color:var(--cta-ink);border-color:var(--cta)}
.seg{display:flex;padding:4px;border-radius:16px;background:var(--fill);border:1px solid var(--hair)}
.seg button{flex:1;height:38px;border-radius:12px;font-size:13.5px;color:var(--muted);font-weight:500;white-space:nowrap;padding:0 10px}
.seg button.on{background:var(--glass-strong);color:var(--ink);box-shadow:0 2px 8px rgba(0,0,0,.08)}
.amt{font-weight:600;font-size:15px;white-space:nowrap}
.amt.in{color:var(--ok)}
.amt small{font-size:11px;font-weight:400;color:var(--muted);margin-inline-start:3px}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:13px;font-weight:500;color:var(--ink2)}
.input{height:52px;border-radius:16px;padding:0 16px;border:1px solid var(--hair);background:var(--glass-strong);font-size:15px;outline:none;width:100%}
.input:focus{border-color:var(--gold)}
textarea.input{height:110px;padding:14px 16px;resize:none;line-height:1.6}
.help{font-size:12px;color:var(--muted)}
.toggle{width:51px;height:31px;border-radius:999px;background:var(--fill);border:1px solid var(--hair);position:relative;flex:none;transition:background .2s}
.toggle::after{content:"";position:absolute;top:2px;right:2px;width:25px;height:25px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.2);transition:transform .25s var(--ease)}
.toggle[aria-checked="true"]{background:var(--ok)}
.toggle[aria-checked="true"]::after{transform:translateX(-20px)}
.note{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:16px;background:var(--gold-soft);font-size:13px;line-height:1.6;color:var(--ink2)}
.note .ico{color:var(--gold-ink);margin-top:2px}

/* header */
.top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.unit-chip{height:40px;padding:0 12px 0 10px;border-radius:14px;display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500}
.unit-chip .ico{color:var(--gold-ink)}
.bar{display:flex;align-items:center;gap:10px;min-height:44px}
.bar .h-m{flex:1}

/* home */
.bal-card{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:14px}
.bal-card .art{position:absolute;inset:0;opacity:.55;pointer-events:none}
.ticks{display:flex;align-items:flex-end;gap:3px;height:42px;direction:ltr}
.ticks i{flex:1;background:var(--ink);opacity:.18;border-radius:2px;min-height:4px}
.ticks i.past{opacity:.38}
.ticks i.today{background:var(--gold);opacity:1}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.steps div{display:flex;flex-direction:column;gap:6px;font-size:10.5px;color:var(--muted)}
.steps div::before{content:"";height:3px;border-radius:2px;background:var(--hair)}
.steps div.done::before{background:var(--ink)}
.steps div.cur::before{background:linear-gradient(to left,var(--gold) 55%,var(--hair) 55%)}
.steps div.done,.steps div.cur{color:var(--ink)}
.date-blk{width:48px;height:52px;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--fill);flex:none;line-height:1.1}
.date-blk b{font-size:18px;font-weight:600}
.date-blk span{font-size:10.5px;color:var(--muted)}
.qs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.qs button{display:flex;flex-direction:column;align-items:center;gap:7px;font-size:11.5px;color:var(--ink2)}
.qs .tile-ic{width:58px;height:58px;border-radius:19px}

/* services */
.svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.svc{border-radius:22px;padding:16px;display:flex;flex-direction:column;gap:22px;text-align:right;min-height:132px}
.svc .t{font-size:15px;font-weight:600}
.feature{position:relative;overflow:hidden;border-radius:26px;min-height:190px;display:flex;align-items:flex-end;text-align:right;padding:0}
.feature .art{position:absolute;inset:0}
.feature .cap{position:relative;margin:12px;padding:14px 16px;border-radius:20px;width:calc(100% - 24px);display:flex;justify-content:space-between;align-items:center;gap:10px}
.search{height:50px;border-radius:17px;display:flex;align-items:center;gap:10px;padding:0 16px;color:var(--muted);font-size:14.5px}

/* provider */
.prov{border-radius:24px;padding:16px;display:flex;flex-direction:column;gap:12px;text-align:right;width:100%}
.prov .thumb{width:56px;height:56px;border-radius:18px;overflow:hidden;flex:none}
.tags{display:flex;gap:6px;flex-wrap:wrap}
.tag{height:26px;padding:0 10px;border-radius:9px;font-size:11.5px;display:inline-flex;align-items:center;gap:5px;background:var(--fill);color:var(--ink2)}
.tag.gold{background:var(--gold-soft);color:var(--gold-ink)}
.star{color:var(--gold)}

/* booking */
.stepper{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stepper div{font-size:11.5px;color:var(--muted);display:flex;flex-direction:column;gap:7px}
.stepper div::before{content:"";height:2px;background:var(--hair);border-radius:2px}
.stepper div.on{color:var(--ink);font-weight:600}
.stepper div.on::before,.stepper div.done::before{background:var(--gold)}
.days{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.day{height:70px;border-radius:17px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:1px solid var(--hair);background:var(--glass)}
.day span{font-size:10.5px;color:var(--muted)}
.day b{font-size:19px;font-weight:500}
.day i{width:5px;height:5px;border-radius:50%;background:var(--ok)}
.day.full i{background:transparent}
.day.on{background:var(--cta);color:var(--cta-ink);border-color:var(--cta)}
.day.on span{color:inherit;opacity:.7}
.day.on i{background:var(--gold)}
.day:disabled{opacity:.4;cursor:not-allowed}
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.slot{height:50px;border-radius:15px;border:1px solid var(--hair);background:var(--glass);font-size:15px;font-weight:500;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.15}
.slot small{font-size:10px;font-weight:400;color:var(--muted)}
.slot.on{background:var(--cta);color:var(--cta-ink);border-color:var(--cta)}
.slot:disabled{opacity:.45;text-decoration:line-through;cursor:not-allowed}
.cta-bar{position:absolute;left:0;right:0;bottom:0;padding:14px max(20px,calc((100% - 680px)/2)) calc(env(safe-area-inset-bottom,0px) + 16px);z-index:15;border-radius:28px 28px 0 0;display:flex;flex-direction:column;gap:6px}
.cta-bar .m{text-align:center}
.sum-row{display:flex;justify-content:space-between;font-size:14px;padding:4px 0}
.sum-row span:first-child{color:var(--muted)}
.sum-total{display:flex;justify-content:space-between;align-items:baseline;padding-top:10px;border-top:1px solid var(--hair);margin-top:6px}
.radio-card{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:20px;border:1.5px solid var(--hair);background:var(--glass);text-align:right;width:100%}
.radio-card.on{border-color:var(--gold)}
.radio-card .rd{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--muted);margin-inline-start:auto;flex:none;display:flex;align-items:center;justify-content:center}
.radio-card.on .rd{border-color:var(--gold)}
.radio-card.on .rd::after{content:"";width:12px;height:12px;border-radius:50%;background:var(--gold)}

/* success */
.done-mark{width:96px;height:96px;border-radius:50%;margin:30px auto 6px;display:flex;align-items:center;justify-content:center;color:var(--gold-ink);background:var(--gold-soft);box-shadow:0 0 0 10px var(--gold-soft)}
.done-mark .ico{width:44px;height:44px;stroke-width:1.8}

/* cafe */
.item{display:flex;gap:12px;align-items:center;padding:14px 0;border-top:1px solid var(--hair)}
.item:first-child{border-top:0}
.add{width:40px;height:40px;border-radius:13px;background:var(--cta);color:var(--cta-ink);display:flex;align-items:center;justify-content:center;flex:none}
.qty{display:flex;align-items:center;gap:8px;flex:none}
.qty button{width:36px;height:36px;border-radius:12px;background:var(--fill);display:flex;align-items:center;justify-content:center}
.qty b{min-width:18px;text-align:center;font-weight:600}
.cartbar{position:absolute;left:12px;right:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 10px);margin-inline:auto;max-width:520px;height:64px;border-radius:22px;z-index:15;background:var(--cta);color:var(--cta-ink);display:flex;align-items:center;justify-content:space-between;padding:0 20px;font-weight:600;box-shadow:var(--shadow);transition:transform .35s var(--ease)}
.cartbar.hide{transform:translateY(150%)}
.cartbar .badge{width:28px;height:28px;border-radius:50%;background:var(--gold);color:#17140F;display:inline-flex;align-items:center;justify-content:center;font-size:13px;margin-inline-end:8px}

/* activity */
.act{display:flex;gap:12px;align-items:center;padding:14px 16px;width:100%;text-align:right;border-top:1px solid var(--hair)}
.act:first-child{border-top:0}
.timeline{display:flex;flex-direction:column}
.tl{display:flex;gap:14px;position:relative;padding-bottom:18px}
.tl:last-child{padding-bottom:0}
.tl::before{content:"";position:absolute;right:9px;top:22px;bottom:2px;width:1.5px;background:var(--hair)}
.tl:last-child::before{display:none}
.tl .dotc{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--hair);background:var(--bg);flex:none;display:flex;align-items:center;justify-content:center;margin-top:1px}
.tl.done .dotc{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.tl.cur .dotc{border-color:var(--gold)}
.tl.cur .dotc::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--gold)}
.tl.done::before{background:var(--ink)}
.kv{display:flex;justify-content:space-between;gap:12px;font-size:14px;padding:11px 0;border-top:1px solid var(--hair)}
.kv:first-child{border-top:0}
.kv span:first-child{color:var(--muted)}
.kv span:last-child{text-align:left;font-weight:500}

/* finance */
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kpi{border-radius:20px;padding:14px;display:flex;flex-direction:column;gap:6px}
.kpi .v{font-size:20px;font-weight:300}
.kpi .v small{font-size:11px;color:var(--muted)}
.delta{font-size:11.5px;font-weight:600;display:inline-flex;align-items:center;gap:3px}
.delta.up{color:var(--bad)}.delta.down{color:var(--ok)}
.chart{width:100%;height:auto;display:block;direction:ltr;overflow:visible}
.chart text{font-family:var(--f);font-size:10px;fill:var(--muted)}
.chart .grid{stroke:var(--hair);stroke-dasharray:3 4}
.chart .line{fill:none;stroke:var(--gold);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.chart .hit{fill:transparent;cursor:pointer}
.chart .pt{fill:var(--bg);stroke:var(--gold);stroke-width:2}
.chart .pt.on{fill:var(--gold)}
.readout{display:flex;justify-content:space-between;align-items:baseline;min-height:24px}
.readout b{font-size:15px;font-weight:600}
.legend{display:flex;flex-direction:column;gap:2px}
.leg{display:flex;align-items:center;gap:10px;padding:9px 0;font-size:13.5px;border-top:1px solid var(--hair)}
.leg:first-child{border-top:0}
.sw{width:10px;height:10px;border-radius:3px;flex:none}
.leg .pct{color:var(--muted);font-size:12.5px;width:36px;text-align:left}
.leg .amt{font-size:13.5px;font-weight:500;margin-inline-start:auto}
.donut-wrap{display:flex;align-items:center;gap:18px}
.donut-wrap svg{width:132px;height:132px;flex:none}
.fac{display:flex;flex-direction:column;gap:8px;padding:13px 0;border-top:1px solid var(--hair);width:100%;text-align:right}
.fac:first-child{border-top:0}
.track{height:8px;border-radius:5px;background:var(--fill);overflow:hidden;direction:rtl}
.track i{display:block;height:100%;border-radius:5px;background:var(--gold)}
.track i.neg{background:var(--bad);opacity:.75}
.month-sel{height:40px;border-radius:14px;padding:0 14px;display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:500}
.tx-group{font-size:12px;color:var(--muted);font-weight:500;padding:4px 4px 0}

/* report */
.pages{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -20px;padding:6px 20px 10px;scrollbar-width:none}
.pages::-webkit-scrollbar{display:none}
.paper{flex:none;width:260px;aspect-ratio:1/1.414;background:#FFFEFB;color:#17140F;border-radius:6px;scroll-snap-align:center;box-shadow:0 18px 40px rgba(40,30,10,.18),0 0 0 1px rgba(0,0,0,.05);padding:18px 16px;display:flex;flex-direction:column;gap:9px;font-size:7.5px;line-height:1.5;overflow:hidden;position:relative;--muted:#6C6458;--hair:rgba(23,20,15,.1);--fill:rgba(23,20,15,.05);--gold:#A27A2C;--gold-ink:#7C5B1B;--ink:#17140F;--bg:#FFFEFB;--c1:#B08A3E;--c2:#2B2722;--c3:#D8C49C;--c4:#7D8FA0;--c5:#9AB197;--ok:#2C7553;--bad:#AA3E2B}
.paper .pbrand{font:500 13px/1 var(--f-brand);letter-spacing:.2em;color:#A27A2C;direction:ltr;text-align:left}
.paper h4{font-size:12px;margin:0;font-weight:600}
.paper .pk{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.paper .pk div{border:1px solid rgba(23,20,15,.1);border-radius:5px;padding:5px 6px;display:flex;flex-direction:column}
.paper .pk b{font-size:10px;font-weight:600}
.paper .prow{display:flex;justify-content:space-between;border-top:1px solid rgba(23,20,15,.08);padding:3px 0}
.paper .pfoot{margin-top:auto;display:flex;justify-content:space-between;color:#6C6458;font-size:6.5px;border-top:1px solid rgba(23,20,15,.1);padding-top:5px}
.paper .chart text{font-size:7px;fill:#6C6458}
.pdots{display:flex;gap:6px;justify-content:center}
.pdots i{width:6px;height:6px;border-radius:50%;background:var(--hair)}
.pdots i.on{background:var(--gold);width:18px;border-radius:3px}

/* profile */
.pro-head{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding-top:8px}
.pro-head .avatar{width:84px;height:84px;font-size:28px}

/* sheet */
.scrim{position:absolute;inset:0;background:var(--scrim);z-index:50;opacity:0;transition:opacity .28s}
.scrim.show{opacity:1}
.sheet{position:absolute;left:0;right:0;bottom:0;margin-inline:auto;max-width:640px;z-index:51;max-height:86%;border-radius:32px 32px 0 0;background:var(--glass-strong);-webkit-backdrop-filter:blur(30px) saturate(170%);backdrop-filter:blur(30px) saturate(170%);border-top:1px solid var(--glass-border);transform:translateY(100%);transition:transform .34s var(--ease);display:flex;flex-direction:column}
.sheet.show{transform:none}
.sheet .grab{width:38px;height:5px;border-radius:3px;background:var(--hair);margin:9px auto 0;flex:none}
.sheet-h{display:flex;align-items:center;justify-content:space-between;padding:8px 20px 4px;gap:10px}
.sheet-b{overflow-y:auto;padding:8px 20px calc(env(safe-area-inset-bottom,0px) + 28px);display:flex;flex-direction:column;gap:16px}
.toast{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 96px);transform:translate(-50%,20px);z-index:60;padding:12px 18px;border-radius:16px;font-size:13.5px;font-weight:500;opacity:0;transition:all .3s var(--ease);white-space:nowrap;display:flex;gap:8px;align-items:center}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* login */
.login{padding:0!important;gap:0!important}
.login .hero{position:relative;height:430px;flex:none;overflow:hidden}
.login .hero .art{position:absolute;inset:0}
.login .hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,transparent 55%,var(--bg))}
.login .wm{position:absolute;bottom:56px;left:0;right:0;text-align:center;z-index:2}
.wm-word{font:500 34px/1 var(--f-brand);letter-spacing:.24em;color:var(--gold);direction:ltr;padding-left:.24em}
.login form{margin:-24px 20px 0;position:relative;z-index:3;display:flex;flex-direction:column;gap:14px;padding:22px}
.chk{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--ink2);line-height:1.6;text-align:right}
.chk .box{width:22px;height:22px;border-radius:7px;border:1.5px solid var(--muted);flex:none;display:flex;align-items:center;justify-content:center;margin-top:1px}
.chk[aria-checked="true"] .box{background:var(--cta);border-color:var(--cta);color:var(--cta-ink)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ============ TABLET (≥ 700px) ============ */
@media (min-width:700px){
  .view{padding-inline:max(28px,calc((100% - 760px)/2))}
  .svc-grid{grid-template-columns:repeat(3,1fr)}
  .login .hero{height:52vh}
  .login form{max-width:460px;margin-inline:auto;width:calc(100% - 40px)}
}

/* ============ DESKTOP (≥ 1024px): sidebar + dashboard grid ============ */
@media (min-width:1024px){
  .tabbar{top:16px;bottom:16px;right:16px;left:auto;width:244px;max-width:none;height:auto;margin:0;flex-direction:column;justify-content:flex-start;align-items:stretch;padding:30px 14px 16px;gap:4px;border-radius:28px}
  .tabbar.hide{transform:none;opacity:1;pointer-events:auto}
  .side-brand{display:block;font:500 22px/1 var(--f-brand);letter-spacing:.22em;color:var(--gold);padding:0 14px;direction:ltr;text-align:right}
  .side-sub{display:block;font-size:12px;color:var(--muted);padding:8px 14px 24px}
  .tab{flex:none;height:50px;flex-direction:row;justify-content:flex-start;gap:12px;padding:0 14px;font-size:14.5px;border-radius:15px}
  .tab:hover{background:var(--fill)}
  .tab.on{background:var(--fill)}
  .tab.on::after{bottom:auto;top:50%;left:16px;transform:translateY(-50%)}
  .side-foot{display:flex;flex-direction:column;gap:10px;margin-top:auto;padding:14px;border-top:1px solid var(--hair)}
  .side-foot .who{display:flex;align-items:center;gap:10px;font-size:13px}
  .side-foot .who .avatar{width:36px;height:36px;font-size:14px}
  .view{right:276px;padding:40px max(36px,calc((100% - 1100px)/2)) 64px}
  .view.narrow{padding-inline:max(36px,calc((100% - 720px)/2));padding-bottom:150px}
  .view.dash{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-content:start;align-items:start}
  .view.dash > .top,.view.dash > .h-xl,.view.dash > .seg,.view.dash > .kpis,.view.dash > .svc-grid,.view.dash > .feature,.view.dash > .pro-head,.view.dash > .chips,.view.dash > .search,.view.dash > .between,.view.dash > .stack,.view.dash > .full{grid-column:1/-1}
  .view.dash > .seg{max-width:520px}
  .svc-grid{grid-template-columns:repeat(4,1fr)}
  .feature{min-height:260px}
  .h-xl{font-size:34px}
  .cta-bar{right:276px;border-radius:0;padding:16px max(36px,calc((100% - 720px)/2)) 24px}
  .cartbar{right:276px;left:0;bottom:24px;max-width:440px}
  .toast{left:calc((100% - 276px)/2);bottom:36px}
  .sheet{left:50%;right:auto;top:50%;bottom:auto;width:min(540px,90vw);max-width:none;max-height:84vh;border-radius:28px;border:1px solid var(--glass-border);opacity:0;transform:translate(-50%,-46%) scale(.97);transition:transform .3s var(--ease),opacity .25s;box-shadow:0 30px 80px rgba(0,0,0,.25)}
  .sheet.show{opacity:1;transform:translate(-50%,-50%)}
  .sheet .grab{display:none}
  .sheet-h{padding-top:18px}
  .pages .paper{width:300px}
  /* login: split screen */
  .app[data-route="login"] .tabbar{display:none}
  .app[data-route="login"] .view{right:0}
  .view.login{display:grid;grid-template-columns:1.15fr 1fr;padding:0!important}
  .view.login .hero{height:100vh}
  .view.login .hero::after{background:linear-gradient(to left,transparent 60%,var(--bg))}
  .view.login form{margin:auto;width:min(440px,86%)}
  .view.login .wm{bottom:auto;top:50%;transform:translateY(-50%)}
  .wm-word{font-size:46px}
}

/* ============ ONBOARDING & TOUR ============ */
.onb{position:absolute;inset:0;z-index:90;background:var(--scrim);display:flex;align-items:center;justify-content:center;animation:fade .25s}
.onb-card{width:100%;height:100%;border-radius:0;background:var(--glass-strong);display:flex;flex-direction:column;overflow:hidden}
.onb-art{position:relative;flex:1;min-height:200px;max-height:52vh;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--gold-soft)}
.onb-art .art{position:absolute;inset:0;width:100%;height:100%}
.onb-ic{width:120px;height:120px;border-radius:40px;display:flex;align-items:center;justify-content:center;background:var(--glass-strong);color:var(--gold-ink);box-shadow:var(--shadow)}
.onb-ic .ico{width:52px;height:52px;stroke-width:1.3}
.onb-body{padding:28px 24px calc(env(safe-area-inset-bottom,0px) + 28px);display:flex;flex-direction:column;gap:12px}
.onb-body .pdots{margin-top:4px}
@media (min-width:700px){.onb-card{width:min(460px,92vw);height:auto;max-height:92vh;border-radius:30px}.onb-art{flex:none;height:260px}}
.tour-block{position:absolute;inset:0;z-index:85}
.tour-spot{position:absolute;border-radius:22px;box-shadow:0 0 0 9999px rgba(10,8,5,.6);transition:all .35s var(--ease);pointer-events:none;outline:2px solid var(--gold);outline-offset:2px}
.tour-tip{position:absolute;padding:16px;border-radius:22px;background:var(--glass-strong);display:flex;flex-direction:column;gap:6px;transition:top .3s var(--ease),left .3s var(--ease)}
@keyframes fade{from{opacity:0}to{opacity:1}}
/* minimal: quieter cards */
.bal-card .big-num small{display:block;margin:8px 0 0;font-size:13px}
.svc{min-height:112px;gap:14px}
.qs .tile-ic{width:56px;height:56px}

/* ============ MINIMAL ============ */
.blobs{display:none}
.glass{background:var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none;border:1px solid var(--hair);box-shadow:none}
.card{box-shadow:none;border-radius:20px;padding:20px}
.view{gap:28px}
.eyebrow{color:var(--muted);font-weight:500;font-size:12.5px}
.h-xl{font-size:26px;font-weight:300}
.h-xl b{font-weight:500}
.h-l{font-weight:500}
.h-m{font-weight:500;font-size:16px}
.big-num{font-weight:200}
.tile-ic,.tile-ic.neutral{background:none;color:var(--ink);width:28px;height:28px;border-radius:0}
.qs .tile-ic{width:56px;height:56px;border-radius:50%;border:1px solid var(--hair);background:var(--surface)}
.qs button{color:var(--ink2);font-size:12px}
.svc{min-height:96px;padding:16px;gap:18px}
.svc .t{font-weight:500}
.pill{background:none!important;padding:0;height:auto;font-weight:500;font-size:12px}
.pill.live::before{animation:none}
.avatar{box-shadow:none;background:var(--fill);color:var(--ink);font-weight:500}
.date-blk{background:none;border:1px solid var(--hair)}
.note{background:none;border:1px solid var(--hair);color:var(--muted)}
.note .ico{color:var(--muted)}
.btn.sec{background:transparent}
.chip{background:transparent}
.icon-btn.glass{border:0;background:none}
.unit-chip.glass{border:0;background:none;padding:0}
.list > *{min-height:58px}
.t{font-weight:400}
.amt{font-weight:500}
.kpi.glass{border:0;background:var(--fill)}
.prov{padding:16px 18px}
.sheet{background:var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none}
.cta-bar.glass{border:0;border-top:1px solid var(--hair);border-radius:0}
.tab.on::after{display:none}
.tab{color:var(--muted)}
.tab.on{color:var(--ink);font-weight:500}
.tour-spot{outline:0}
.onb-art{background:var(--fill)}
.onb-ic{box-shadow:none;background:none;border:1px solid var(--hair)}
@media (max-width:1023px){
  .tabbar.glass{left:0;right:0;bottom:0;max-width:none;margin:0;border-radius:0;border:0;border-top:1px solid var(--hair);height:calc(62px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);background:var(--surface)}
  .tab svg{width:22px;height:22px}
  .view{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 100px)}
  .cartbar{bottom:calc(env(safe-area-inset-bottom,0px) + 12px)}
  .toast{bottom:calc(env(safe-area-inset-bottom,0px) + 80px)}
}
@media (min-width:1024px){
  .tabbar.glass{top:0;bottom:0;right:0;border-radius:0;border:0;border-left:1px solid var(--hair);background:var(--surface);width:260px}
  .view{right:260px}
  .cta-bar{right:260px}
  .cartbar{right:260px}
  .tab.on{background:var(--fill)}
}

/* ============ MANAGER ============ */
.tbadge{position:absolute;top:6px;left:calc(50% + 4px);min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--bad);color:#fff;font-size:11px;font-weight:600;display:inline-flex;align-items:center;justify-content:center}
.seg.sm4 button{font-size:12px;padding:0 4px}
select.input{appearance:none;-webkit-appearance:none;cursor:pointer}
@media (min-width:1024px){.tbadge{position:static;margin-inline-start:auto}}

/* ============ آف‌بات (chat start page) ============ */
.view.chatpage{gap:14px;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 150px)}
.sumstrip{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -20px;padding:2px 20px}
.sumstrip::-webkit-scrollbar{display:none}
.sumchip{flex:none;max-width:70%;display:inline-flex;align-items:baseline;gap:6px;padding:8px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--hair);font-size:13px}
.sumchip b{font-weight:600;font-size:14px}
.thread{display:flex;flex-direction:column;gap:12px;min-height:40vh}
.cm{display:flex;gap:8px;align-items:flex-end;max-width:100%}
.cm.u{justify-content:flex-start}
.cm.a{justify-content:flex-start}
.cm.u{flex-direction:row}
.cm.a{flex-direction:row-reverse;align-self:flex-end}
.cm.a .cstack{align-items:flex-end}
.cav{flex:none;width:28px;height:28px;border-radius:50%;background:var(--gold-soft);color:var(--gold-ink);display:inline-flex;align-items:center;justify-content:center}
.cstack{display:flex;flex-direction:column;gap:8px;min-width:0;max-width:calc(100% - 40px)}
.cb{padding:10px 14px;border-radius:18px;font-size:15px;line-height:1.75;word-break:break-word}
.cb ul{margin:4px 0;padding-inline-start:20px}
.cm.u .cb{background:var(--cta);color:var(--cta-ink);border-end-end-radius:6px}
.cm.a .cb{background:var(--surface);border:1px solid var(--hair);border-end-start-radius:6px}
.typing{display:inline-flex;gap:5px;align-items:center;padding:14px 16px}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.18s}.typing i:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
.qrow{display:flex;gap:8px;flex-wrap:wrap}
.cm.a .qrow{justify-content:flex-end}
.qchip{height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--gold);color:var(--gold-ink);background:transparent;font-size:14px;display:inline-flex;align-items:center;gap:4px;cursor:pointer}
.qchip:hover{background:var(--gold-soft)}
.qchip.go{border-color:var(--hair);color:var(--ink)}
.pcard{border:1px solid var(--gold);border-radius:18px;padding:14px 16px;background:var(--surface);display:flex;flex-direction:column;gap:10px;width:min(100%,380px)}
.pcard .pt{font-size:16px;font-weight:600}
.pcard dl{margin:0;display:grid;gap:7px}
.pcard dl div{display:flex;justify-content:space-between;gap:14px;font-size:14px}
.pcard dt{color:var(--muted);flex:none}
.pcard dd{margin:0;text-align:end;font-weight:500;min-width:0}
.pbtns{display:flex;gap:8px}.pbtns .btn{flex:1}
.pcard.approved{border-color:var(--ok)}
.pcard.rejected,.pcard.expired,.pcard.failed{border-color:var(--hair);opacity:.8}
.pdone{color:var(--ok);font-weight:600;font-size:14px;display:inline-flex;gap:6px;align-items:center}
.perr{color:var(--bad);font-size:13.5px}
.chatbar{position:absolute;left:12px;right:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 72px);margin-inline:auto;max-width:700px;z-index:15;display:flex;gap:8px;align-items:flex-end;padding:8px 8px 8px 8px;border-radius:26px;background:var(--surface);border:1px solid var(--hair);box-shadow:0 8px 24px rgba(0,0,0,.08)}
.chatbar textarea{flex:1;min-width:0;border:0;outline:0;resize:none;background:transparent;font:inherit;font-size:16px;line-height:1.6;padding:9px 12px;max-height:130px;color:var(--ink)}
.chatbar .send{flex:none;width:44px;height:44px;border-radius:50%;background:var(--cta);color:var(--cta-ink);display:inline-flex;align-items:center;justify-content:center}
.chatbar .send:active{transform:scale(.95)}
@media (min-width:1024px){.chatbar{right:276px;left:16px;bottom:22px}.view.chatpage{padding-bottom:130px}}
/* onboarding question */
.onb-ask{justify-content:center;align-items:center}
.onb-ask .onb-body{align-items:center;text-align:center;max-width:420px;margin:auto}
.onb-ask .onb-ic{margin-bottom:6px}