/* Kometa Bonus: poster screens.
   Every tab is a brand poster in its own colour, carrying the brand's
   supporting arcs at merchandise scale, with the customer's content on a white
   sheet that slides over it. Colour, type and the arcs follow the KOMETA
   guidelines (Dec 2022) and "kometa yordamchi elementlar.ai". */
@font-face{font-family:'Fact';src:url('/fonts/Fact-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Fact';src:url('/fonts/Fact-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Grandis Extended';src:url('/fonts/GrandisExtended-Bold.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  --fb:'Fact',system-ui,-apple-system,sans-serif;
  --fd:'Grandis Extended','Fact',system-ui,sans-serif;
  /* Brand colours as specified. Lime and yellow are graphic colours on white
     (2.0:1 and 1.5:1); the -d siblings are for when they must be read. */
  --g:#004B34; --gd:#003825; --lime:#99C61E; --yel:#FECA05; --org:#F49529;
  --lime-d:#627F13; --yel-d:#907201; --org-d:#9C5607;
  --g-t:#E6EDEB; --lime-t:#F5F9E8; --yel-t:#FFFAE6; --org-t:#FEF4EA; --on-g:#A9D8BF;
  --ink:#0E2B21; --muted:#5F736A; --line:#E4EAE7; --page:#F4F6F4; --red:#C4402B;
  --ease:cubic-bezier(.2,.8,.2,1);
  --safe-b:env(safe-area-inset-bottom,0px);
  --bar-h:calc(68px + var(--safe-b));
  --ground:#004B34;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{background:var(--ground);color:var(--ink);font-family:var(--fb);line-height:1.5;-webkit-font-smoothing:antialiased;overflow:hidden}
body[data-tone=green]{--ground:#004B34}
body[data-tone=deep]{--ground:#003825}
body[data-tone=yellow]{--ground:#FECA05}
body[data-tone=lime]{--ground:#99C61E}
body[data-tone=orange]{--ground:#F49529}
button,input{font-family:inherit;font-size:inherit;color:inherit}
button{border:0;background:none;cursor:pointer;text-align:inherit}
a{color:inherit;text-decoration:none}
iconify-icon,.ico{display:inline-block;line-height:0;flex:none;vertical-align:middle}
/* Reserve each icon's box before it loads so nothing shifts under the thumb. */
iconify-icon[width="14"]{width:14px;height:14px}iconify-icon[width="16"]{width:16px;height:16px}
iconify-icon[width="18"]{width:18px;height:18px}iconify-icon[width="20"]{width:20px;height:20px}
iconify-icon[width="22"]{width:22px;height:22px}iconify-icon[width="24"]{width:24px;height:24px}
iconify-icon[width="26"]{width:26px;height:26px}iconify-icon[width="32"]{width:32px;height:32px}
iconify-icon[width="40"]{width:40px;height:40px}iconify-icon[width="84"]{width:84px;height:84px}
iconify-icon[width="96"]{width:96px;height:96px}iconify-icon[width="56"]{width:56px;height:56px}
/* Rings belong to the keyboard (app.js sets .kbd on Tab): Telegram Desktop
   matched :focus-visible on plain clicks and ringed the tapped tab. Lime reads
   on the green posters; on white it is too faint, so it turns green there. */
:focus-visible{outline:none}
.kbd :focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.kbd .sht :focus-visible,.kbd .bar :focus-visible,.kbd .cmp :focus-visible{outline-color:#004B34}
/* lime on the lime, yellow and orange posters would vanish (about 1.1:1) */
.kbd .tone-yellow :focus-visible,.kbd .tone-lime :focus-visible,.kbd .tone-orange :focus-visible{outline-color:#003825}
/* read by screen readers, not drawn */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* ---------------------------------------------------------------- shell */
.app{position:relative;height:100%}
/* The scroll container. Its own background is the poster colour above and
   white below, so an overscroll at either end shows the right colour. */
.view{position:fixed;left:0;right:0;top:0;bottom:var(--bar-h);overflow-y:auto;overflow-x:hidden;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  background:linear-gradient(var(--ground) 50%,#fff 50%)}
.view::-webkit-scrollbar{display:none}
body.nobar .view{bottom:0}
body.nobar .bar{display:none}
.view.enter{animation:viewIn .2s var(--ease)}
.view.fwd{animation:viewFwd .26s var(--ease)}
@keyframes viewIn{from{opacity:0}to{opacity:1}}
@keyframes viewFwd{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}

/* tone grounds: one colour per tab */
.tone-green{background:#004B34;color:#fff}
.tone-deep{background:#003825;color:#fff}
.tone-yellow{background:#FECA05;color:#004B34}
.tone-lime{background:#99C61E;color:#003825}
.tone-orange{background:#F49529;color:#003825}

/* ---------------------------------------------------------------- poster */
.pst{position:sticky;top:0;z-index:1;height:300px;overflow:hidden}
.pst.compact{height:176px}
.pst.tall{height:330px}
.pst.full{position:relative;min-height:100%;height:auto;display:flex;flex-direction:column}
.arcs{position:absolute;top:0;right:0;overflow:visible;pointer-events:none}
.arcs.at-b{top:auto;bottom:0}
.arcs .orb{transform-box:view-box}
/* A tab change's one moment: the arcs come round their own orbit into place,
   clockwise, the way the comet travels, the inner band a beat behind. */
.view.enter .arcs .orb,.view.fwd .arcs .orb{animation:orbit .62s var(--ease) both}
.view.enter .arcs .o2,.view.fwd .arcs .o2{animation-delay:.07s}
@keyframes orbit{from{transform:rotate(-11deg);opacity:0}40%{opacity:1}to{transform:none;opacity:1}}
.pin{position:relative;z-index:1;padding:18px 22px}
.p-top{display:flex;justify-content:space-between;align-items:center;min-height:44px;gap:12px}
.p-hi{font:700 15px/1.3 var(--fb)}
.tone-green .p-hi,.tone-deep .p-hi{color:var(--on-g)}
.bell{position:relative;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:#003825;color:#fff;flex:none}
.bell i{position:absolute;top:10px;right:11px;width:9px;height:9px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 2px #003825}
.p-big{font:700 clamp(46px,16vw,60px)/1 var(--fd);letter-spacing:-.01em;margin-top:10px;font-variant-numeric:tabular-nums;white-space:nowrap}
.p-big.sm{font-size:clamp(34px,11.5vw,44px)}
.p-big.sm2{font-size:clamp(26px,8.5vw,32px);margin-top:6px}
.p-big.xs{font-size:clamp(30px,10.5vw,40px)}
.p-urow{display:flex;align-items:center;gap:16px;margin-top:6px}
.p-unit{font:700 18px var(--fb);color:var(--lime)}
.tone-lime .p-unit,.tone-yellow .p-unit,.tone-orange .p-unit{color:inherit}
/* The balance carries the time it was last synced, stamped like a receipt:
   a number the customer cannot check at least says how fresh it is. */
.stamp{display:inline-flex;flex-direction:column;align-items:center;border:2px solid var(--lime);color:var(--lime);
  border-radius:10px;padding:4px 10px 3px;font:700 11px/1.2 var(--fb);letter-spacing:.06em;text-transform:uppercase}
.stamp b{font:700 15px var(--fd);letter-spacing:0;text-transform:none}
.p-line{font:700 14px/1.4 var(--fb);color:var(--on-g);margin-top:12px;max-width:19ch}
.tone-lime .p-line,.tone-yellow .p-line,.tone-orange .p-line{color:inherit}
.p-line.wide{max-width:24ch}
.h-p{font:700 26px/1.12 var(--fd);max-width:12ch;margin-top:4px}
.h-p.big{font-size:clamp(25px,8.2vw,30px);max-width:11ch}
.h-p.nb{margin:22px 0 2px;color:#fff}
/* narrow enough that the yellow posters' titles stop short of the arcs */
.tone-yellow .pin .h-p{max-width:9ch}
.tone-yellow .pin .h-p.big{max-width:8ch}
.tone-yellow .pin .h-p.lw{font-size:21px;max-width:11ch}
.tone-yellow .pin .h-p.big.lw{font-size:clamp(21px,6.4vw,24px);max-width:10ch}
.p-p{font:400 14.5px/1.45 var(--fb);margin-top:8px;max-width:25ch}
.tone-green .p-p,.tone-deep .p-p{color:var(--on-g)}
.bk{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;margin:-2px 0 10px -4px;background:rgba(255,255,255,.14)}
.tone-yellow .bk,.tone-lime .bk,.tone-orange .bk{background:rgba(0,56,37,.1)}

/* ---------------------------------------------------------------- sheet */
.sht{position:relative;z-index:2;background:#fff;color:var(--ink);border-radius:28px 28px 0 0;margin-top:-20px;
  padding:8px 18px 28px;min-height:calc(100% - 280px)}
.pst.compact+.sht{margin-top:-16px;min-height:calc(100% - 160px);padding-top:18px}
.pst.tall+.sht{margin-top:-24px;min-height:calc(100% - 306px)}
.grab{width:36px;height:4px;border-radius:2px;background:#D5DDD9;margin:0 auto 12px}
.sh-h{display:flex;justify-content:space-between;align-items:baseline;margin:18px 0 2px;gap:12px}
.sh-h h2{font:700 16px var(--fd);color:var(--g)}
.sh-h button{font:700 14px var(--fb);color:var(--g);min-height:44px;padding:0 2px}
.grp{font:700 13px var(--fb);color:var(--muted);margin:16px 0 0}
.chip{display:inline-block;font:700 12.5px var(--fb);padding:4px 9px;border-radius:99px;white-space:nowrap}
.chip.lime{background:var(--lime);color:#004B34}
.chip.org{background:var(--org-t);color:var(--org-d)}
.note{display:flex;align-items:center;gap:8px;font:700 13.5px var(--fb);color:var(--muted);background:var(--page);border-radius:12px;padding:11px 12px;margin-top:4px}
.offl{display:flex;align-items:center;gap:10px;background:var(--yel);color:#004B34;border-radius:14px;padding:10px 12px;margin-bottom:12px;text-align:left}
.offl span{display:flex;flex-direction:column;font-size:13px;line-height:1.35}
.offl b{font-size:14.5px}

/* product emoji, stacked like the goods in a bag */
.ems{display:inline-flex;align-items:center;flex:none}
.ems i{width:32px;height:32px;border-radius:50%;background:var(--page);display:grid;place-items:center;border:2px solid #fff;margin-left:-9px;
  font:700 13px var(--fd);font-style:normal;color:var(--muted)}
.ems i:first-child{margin-left:0}
.ems b{font:700 12px var(--fb);color:var(--muted);margin-left:5px}
.ems.big i{width:40px;height:40px;background:#fff;border-color:var(--lime-t);margin-left:-8px;font-size:15px}
.ems.big i:first-child{margin-left:0}

.last{display:block;width:100%;background:var(--lime-t);border-radius:20px;padding:14px 16px}
.last .lt{display:block;font:700 13.5px var(--fb);color:var(--muted);margin-top:10px}
.last .lr{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px 10px;margin-top:4px}
.last .lr b{font:700 22px var(--fd);color:var(--ink);white-space:nowrap}
/* the month so far and how often they shop here */
.moms{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.mom{border-radius:20px;padding:13px 14px;min-width:0}
.mom.yel{background:var(--yel);color:#004B34}
.mom.grn{background:#004B34;color:#fff}
.mom small{display:block;font:700 12.5px var(--fb)}
.mom b{display:block;font:700 clamp(17px,5.6vw,21px)/1.1 var(--fd);margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mom span{display:block;font:700 13px var(--fb);margin-top:3px}
.mom.grn small,.mom.grn span{color:var(--on-g)}
.nudge{display:flex;align-items:center;gap:12px;width:100%;margin-top:10px;background:var(--org-t);border-radius:18px;padding:12px 14px;text-align:left}
.nudge .ni{width:40px;height:40px;border-radius:12px;background:var(--org);color:#003825;display:grid;place-items:center;flex:none}
.nudge .md{flex:1;display:flex;flex-direction:column;font:700 14.5px var(--fb)}
.nudge .md span{font:400 13px var(--fb);color:var(--muted)}
.rr{display:flex;align-items:center;gap:12px;width:100%;padding:12px 0;border-bottom:1px solid var(--line);text-align:left}
.rr .md{flex:1;min-width:0;display:flex;flex-direction:column}
.rr .md b{font-size:15px}
.rr .md span{font-size:13px;color:var(--muted);margin-top:1px}
.rr .am{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.rr .am b{font:700 16px var(--fd);white-space:nowrap}
.tease{display:flex;align-items:center;gap:12px;width:100%;margin-top:14px;background:var(--yel);color:#004B34;border-radius:18px;padding:12px 14px;text-align:left}
.tease b{font:700 24px var(--fd);white-space:nowrap}
.tease span{flex:1;min-width:0;display:flex;flex-direction:column;font:700 14.5px var(--fb)}
.tease small{font:700 12.5px var(--fb);opacity:.85;margin-top:1px}
.h-s{font:700 17px var(--fd);color:var(--g);margin:6px 0 4px}
.steps{list-style:none;margin-top:6px}
.steps li{display:flex;gap:14px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line)}
.steps li>b{width:34px;height:34px;border-radius:50%;background:#003825;color:#fff;display:grid;place-items:center;font:700 14px var(--fd);flex:none}
.steps li>span{display:flex;flex-direction:column;font-size:13.5px;color:var(--muted)}
.steps strong{font-size:15px;color:var(--ink);margin-bottom:2px}
.cta{display:flex;align-items:center;justify-content:center;gap:10px;min-height:54px;border-radius:16px;font:700 16px var(--fb);padding:0 20px;width:100%}
.cta.wide{margin-top:18px}
.cta.deep{background:#003825;color:#fff}
.cta.yel{background:var(--yel);color:#004B34}
.cta[disabled]{opacity:.55}
.gift{display:flex;align-items:center;gap:12px;background:var(--yel-t);border-radius:18px;padding:12px 14px;margin-bottom:10px}
.gift .md{display:flex;flex-direction:column;font:700 15px var(--fb);color:var(--ink)}
.gift .md span{font:400 13.5px var(--fb);color:#52665D}
.balrow{display:flex;justify-content:space-between;align-items:baseline;gap:12px;background:var(--g-t);border-radius:16px;padding:14px 16px}
.balrow span{font:700 14px var(--fb);color:var(--muted)}
.balrow b{font:700 20px var(--fd);color:var(--g);white-space:nowrap}
.empty{text-align:center;padding:26px 8px 8px;color:var(--muted);font-size:13.5px}
.empty b{display:block;font:700 15px var(--fb);color:var(--ink);margin-bottom:4px}

/* ---------------------------------------------------------------- home fold */
.mini{position:fixed;left:0;right:0;top:0;height:56px;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:0 20px;opacity:0;visibility:hidden;pointer-events:none}
.mini span{font:700 14px var(--fb);color:var(--on-g);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mini b{font:700 20px var(--fd);color:#fff;white-space:nowrap}
.mini.tone-yellow span,.mini.tone-yellow b{color:#004B34}
.home .pst .pin{transform:translateY(calc(var(--p,0) * -34px));opacity:calc(1 - var(--p,0) * 1.4)}

/* ---------------------------------------------------------------- onboarding */
.blogo{position:absolute;left:50%;top:50%;width:200px;height:auto;transform:translate(-50%,-60%)}
/* The logo leads the first screen; the arcs sit behind it at the right. */
.ologo{position:relative;z-index:1;display:block;width:min(224px,60%);height:auto;margin:44px 0 0 24px}
.ob{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;justify-content:flex-end;padding:40px 24px calc(20px + var(--safe-b))}
.ob-h{font:700 clamp(28px,9vw,34px)/1.06 var(--fd);max-width:12ch}
.ob-p{font-size:15px;line-height:1.5;color:var(--on-g);margin-top:12px;max-width:30ch}
.ob-l{list-style:none;margin-top:16px}
.ob-l li{display:flex;align-items:center;gap:12px;font:700 15px var(--fb);padding:7px 0}
.ob-l .ico{color:var(--lime)}
.ob .cta{margin-top:22px}
.ob-f{font-size:13px;color:var(--on-g);margin-top:10px}

/* ---------------------------------------------------------------- birthday */
.bday .conf{position:absolute;inset:0;z-index:1;pointer-events:none}
.bday .conf i{position:absolute;width:9px;height:14px;border-radius:2px}
.bd-art{display:block}
.bday .h-p{font-size:28px}

/* ---------------------------------------------------------------- promos */
/* the art leads the text column and stays off the arcs (nothing is drawn on them) */
.pr-art{display:block;line-height:0;margin:2px 0 4px}
.left-pill{display:inline-flex;align-items:center;gap:6px;margin-top:14px;background:#004B34;color:#fff;border-radius:99px;padding:8px 13px;font:700 13px var(--fb)}
.left-pill .star{width:15px;height:15px;fill:var(--yel)}
.left-pill.urgent{background:#B42318}
/* further offers as small posters: flat grounds, the arcs, the figure */
.mps{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}
.mp{position:relative;overflow:hidden;border-radius:22px;padding:14px;min-height:178px;display:flex;flex-direction:column;justify-content:flex-end;text-align:left}
.mp-art{position:absolute;top:12px;left:12px;z-index:1}
.mp-f{position:relative;font:700 34px/1 var(--fd);white-space:nowrap}
.mp-t{position:relative;font:700 13.5px/1.3 var(--fb);margin-top:6px;max-width:12ch}
.mp.nofig .mp-t{font:700 17px/1.2 var(--fd);max-width:9ch}
.mp.nofig.lw .mp-t{font-size:14px;max-width:11ch}
.mp-l{position:relative;align-self:flex-start;font:700 12px var(--fb);font-style:normal;margin-top:8px;background:#003825;color:#fff;border-radius:99px;padding:4px 9px}
.tog{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--line);width:100%;text-align:left}
.tog:last-child{border-bottom:0}
.tog .md{flex:1;display:flex;flex-direction:column}
.tog .md b{font-size:15px}
.tog .md span{font-size:13px;color:var(--muted);margin-top:2px}
.sw{width:50px;height:30px;border-radius:99px;background:#7F9189;position:relative;flex:none;transition:background-color .2s var(--ease)}
.sw i{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;transition:transform .2s var(--ease)}
.sw.on{background:#004B34}
.sw.on i{transform:translateX(20px)}

/* ---------------------------------------------------------------- card */
.pin.c{text-align:center;padding:16px 20px 28px}
.cd-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:2px 2px 6px}
.cd-logo{width:118px;height:auto;flex:none}
.cd-name{font:700 14px var(--fb);color:var(--lime);text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0 2px 12px}
.cd-bal{background:#004B34;color:#fff;border-radius:99px;padding:6px 12px;font:700 14px var(--fd);white-space:nowrap}
/* Scan symbols stay pure black on pure white with intact quiet zones. */
.tk{position:relative;background:#fff;border-radius:20px;padding:16px 16px 14px;color:var(--ink);max-width:360px;margin:0 auto}
.tk canvas.qr{display:block;margin:0 auto}
.tk-sep{border-top:2px dashed #DCE3DD;margin:12px 2px}
.tk canvas.bc{display:block;width:100%;height:78px}
.tk-num{margin-top:8px;font:700 16px var(--fb);letter-spacing:.2em;font-variant-numeric:tabular-nums}
.tk .ph-q{font:700 14px var(--fb);color:var(--muted);padding-top:6px}
.tk .ph-n{font:700 26px var(--fd);margin:10px 0 6px;white-space:nowrap}
.tk .ph-s{font-size:13px;color:var(--muted);padding-bottom:4px}
.hint{display:inline-flex;align-items:center;gap:6px;margin-top:14px;background:#004B34;color:var(--lime);border-radius:99px;padding:8px 14px;font:700 12.5px var(--fb)}

/* ---------------------------------------------------------------- history */
.mchips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin-right:-22px;padding-right:22px}
.mchips::-webkit-scrollbar{display:none}
.mc{height:44px;padding:0 16px;border-radius:99px;background:rgba(0,56,37,.12);color:#003825;font:700 14px var(--fb);flex:none}
.mc.on{background:#003825;color:#fff}
/* The month as a poster timeline: a dot per shopping day. A few days carry
   their dates above; a busy month shows the dots alone. Today is ringed. */
.tline{position:relative;width:206px;height:46px;margin-top:14px}
.tline.dense{height:30px}
.tl-base{position:absolute;left:0;right:0;bottom:15px;height:2px;border-radius:1px;background:rgba(0,56,37,.3)}
.tl-d{position:absolute;bottom:10px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:4px}
.tl-d b{font:700 13px var(--fd);color:#003825;line-height:1}
.tl-d i{width:12px;height:12px;border-radius:50%;background:#003825}
.tline.dense .tl-d{bottom:12px}
.tline.dense .tl-d i{width:8px;height:8px}
.tl-d.today i{box-shadow:0 0 0 3px var(--lime),0 0 0 5px #003825}
.tl-d.low{flex-direction:column-reverse;bottom:auto;top:24px}
.tl-e{position:absolute;bottom:-6px;font:700 12px var(--fb);color:#003825}
.tl-e.s{left:0}.tl-e.e{right:0}

/* ---------------------------------------------------------------- receipt */
/* The receipt is drawn as the paper it replaces. */
body[data-tone=deep] .view.rcpt{background:#003825}
.pst.compact+.sht.paper{margin:-26px 14px 24px;min-height:0;border-radius:0;background:#FFFEFA;padding:16px 16px 18px}
.zz,.zt{position:absolute;left:0;right:0;height:8px;background-repeat:repeat-x}
.zz{bottom:-8px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M0 0h12L6 8z' fill='%23FFFEFA'/%3E%3C/svg%3E")}
.zt{top:-8px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M0 8h12L6 0z' fill='%23FFFEFA'/%3E%3C/svg%3E")}
.rh{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.rh-logo{width:132px;height:auto;margin-bottom:4px}
.rh span{font-size:12.5px;color:var(--muted)}
.dash{border-top:2px dashed #DCE3DD;margin:10px 0}
.it{display:flex;align-items:center;gap:12px;padding:8px 0}
.it i{width:42px;height:42px;border-radius:12px;background:var(--page);display:grid;place-items:center;flex:none;font:700 16px var(--fd);font-style:normal;color:var(--muted)}
.it .md{flex:1;min-width:0;display:flex;flex-direction:column}
.it .md b{font-size:14.5px;line-height:1.3}
.it .md span{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.it .a{font-size:14.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.tot{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:4px 0}
.tot span{font:700 15px var(--fb)}
.tot b{font:700 18px var(--fd);white-space:nowrap}
.tot.ret span,.tot.ret b{color:var(--org-d);font-size:14px}
.stk-row{display:flex;justify-content:flex-end;margin-top:8px}
.sticker{display:inline-block;background:var(--lime);color:#004B34;font:700 15px var(--fd);padding:8px 12px;border-radius:10px}
.sticker.used{background:var(--org);color:#003825}

/* ---------------------------------------------------------------- profile */
.av{width:68px;height:68px;border-radius:22px;background:#003825;color:var(--org);display:grid;place-items:center;font:700 32px var(--fd)}
.p-name{font:700 clamp(25px,8vw,30px)/1.08 var(--fd);margin-top:12px;max-width:10ch;overflow-wrap:anywhere}
.lr2{display:flex;align-items:center;gap:14px;width:100%;padding:11px 0;border-bottom:1px solid var(--line);text-align:left}
.li{width:44px;height:44px;border-radius:14px;background:var(--org-t);color:var(--org-d);display:grid;place-items:center;flex:none}
.lr2 .md{flex:1;min-width:0;display:flex;flex-direction:column}
.lr2 .md b{font-size:15px}
.lr2 .md span{font-size:13px;color:var(--muted);margin-top:1px}
.lr2>.ico{color:var(--muted)}
/* deleting the account reads as the one destructive row, apart from the rest */
.lr2.del{margin-top:22px;border-bottom:0}
.lr2.del .li{background:#FCEEEB;color:#B8402C}
.lr2.del .md b{color:#B8402C}

/* ---------------------------------------------------------------- forms */
.fl,.fl-g{display:block;margin-top:12px}
.fl>span,.fl-g>span{font:700 13px var(--fb);color:var(--muted)}
.fl input{display:block;width:100%;height:52px;border-radius:14px;border:1.5px solid #DCE3DD;padding:0 14px;font:700 16px var(--fb);color:var(--ink);margin-top:6px;background:#fff;
  -webkit-appearance:none;appearance:none}
.fl input::placeholder{color:#66776F;font-weight:400}
.fl input:focus{outline:none;border-color:#004B34}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
.seg button{height:52px;border-radius:14px;border:1.5px solid #DCE3DD;font:700 15px var(--fb);text-align:center}
.seg button.on{background:#004B34;border-color:#004B34;color:#fff}
.f-err{min-height:20px;margin-top:10px;font:700 13.5px var(--fb);color:var(--red)}
.lnk{display:block;margin:10px auto 0;font:700 14px var(--fb);color:#004B34;min-height:44px}

/* ---------------------------------------------------------------- notifications */
.nt{display:flex;align-items:flex-start;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}
.ni{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none}
.ni.lime{background:var(--lime-t);color:var(--lime-d)}.ni.yel{background:var(--yel-t);color:var(--yel-d)}.ni.org{background:var(--org-t);color:var(--org-d)}.ni.grn{background:var(--g-t);color:var(--g)}
.nt .md{flex:1;min-width:0;display:flex;flex-direction:column}
.nt .md b{font-size:15px}
.nt .md span{font-size:13.5px;color:var(--muted);margin-top:2px;line-height:1.4}
.nt .md em{font:700 12px var(--fb);font-style:normal;color:var(--muted);margin-top:5px}
.nt .dot{width:10px;height:10px;border-radius:50%;background:var(--lime-d);margin-top:6px;flex:none}
button.nt{width:100%;text-align:left}
.nt.go>.ico{color:var(--muted);align-self:center}
.nt.go:active{background:var(--page)}

/* ---------------------------------------------------------------- bottom bar */
/* One rule: a filled shape means "you are here". The fill is a swatch of the
   poster; it travels to the tab you tap while the poster changes colour, so
   bar and poster move as one. Karta is the only other shape, outlined: the
   card you show at the till. Every icon sits in the same 56x32 slot, so the
   five labels share one baseline. */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:6;height:var(--bar-h);display:grid;grid-template-columns:repeat(5,1fr);align-content:start;
  background:#fff;border-top:1px solid var(--line);padding:8px 6px var(--safe-b)}
.swatch{position:absolute;left:0;right:0;top:8px;height:32px;background:#004B34;clip-path:inset(0 100% 0 0 round 16px);pointer-events:none}
.nv{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;min-height:56px;touch-action:manipulation}
.nv[data-tone=green]{--sw:#004B34}.nv[data-tone=yellow]{--sw:#FECA05}.nv[data-tone=deep]{--sw:#003825}
.nv[data-tone=lime]{--sw:#99C61E}.nv[data-tone=orange]{--sw:#F49529}
.nv .pill{width:56px;height:32px;border-radius:16px;display:grid;place-items:center;color:var(--muted);transition:color .16s var(--ease),transform .14s var(--ease)}
.nv .lb{font:700 12px/1.2 var(--fb);color:var(--muted);transition:color .16s var(--ease)}
.nv.on .lb{color:var(--ink)}
/* the icon turns as the swatch arrives under it, not before */
.nv.on .pill{transition-delay:.12s,0s}
.nv.on[data-tone=green] .pill,.nv.on[data-tone=deep] .pill{color:#fff}
.nv.on[data-tone=yellow] .pill,.nv.on[data-tone=lime] .pill{color:#004B34}
.nv.on[data-tone=orange] .pill{color:#003825}
.nv-card .pill{color:#003825;box-shadow:inset 0 0 0 2px #003825}
.bar:not(.ready) .nv.on .pill{background:var(--sw)}
.nv:active .pill{transform:scale(.9)}
.cta:active,.rr:active,.last:active,.tease:active,.lr2:active,.mp:active,.nudge:active,.reply:active,.rc-ask:active{transform:scale(.98)}

/* ---------------------------------------------------------------- chat */
/* Taklif va shikoyatlar reads like a messenger: the store on the left in a
   pale green bubble behind its comet, the customer on the right in KOMETA
   green, and a composer pinned where the tab bar sits on the other screens. */
.view.chat .sht{padding:16px 14px 18px}
.msgs{padding-bottom:6px}
.m{display:flex;align-items:flex-end;gap:8px;margin-top:10px}
.m.run{margin-top:3px}
.m.me{justify-content:flex-end}
.ka{width:30px;height:30px;border-radius:50%;background:#004B34;display:grid;place-items:center;flex:none}
.ka svg{width:76%;height:auto;display:block}
.ka.gh{visibility:hidden}
.bb{max-width:min(80%,330px);border-radius:20px;padding:8px 13px 6px;font-size:15px;line-height:1.42;overflow-wrap:anywhere;min-width:0}
.m.st .bb{background:var(--g-t);color:var(--ink);border-bottom-left-radius:6px}
.m.me .bb{background:#004B34;color:#fff;border-bottom-right-radius:6px}
.m.st.run .bb{border-top-left-radius:6px}
.m.me.run .bb{border-top-right-radius:6px}
.bb .who{display:block;font:700 12.5px var(--fb);color:#004B34}
.bb .tp{display:block;font:700 12.5px var(--fb);color:var(--lime)}
.bb .tx{display:block;white-space:pre-wrap}
.bb .tm{display:block;text-align:right;font:700 11px var(--fb);font-style:normal;color:#52665D;margin-top:2px;font-variant-numeric:tabular-nums}
.m.me .bb .tm{color:var(--on-g)}
.m-ck{display:flex;align-items:center;gap:9px;border-radius:14px;padding:7px 10px 7px 8px;margin:4px -5px 6px;background:rgba(255,255,255,.12)}
.m.st .m-ck{background:#fff}
.m-ck>span:last-child{display:flex;flex-direction:column;font-size:13px;line-height:1.3}
.m-ck b{font-size:13.5px}
.m-ck .ems i{width:28px;height:28px;border-color:transparent}
.m-ph{display:block;margin:4px -8px 6px;border-radius:15px;overflow:hidden;background:rgba(255,255,255,.12);min-height:120px;min-width:180px}
.m.st .m-ph{background:#fff}
.m-ph img{display:block;width:100%;max-width:260px;max-height:320px;object-fit:cover}
.m-ph.gone{display:none}
.m-st{text-align:right;font:700 12px var(--fb);color:var(--muted);margin:4px 4px 0}
.m-retry{display:inline-flex;align-items:center;gap:5px;color:var(--red);font:700 13px var(--fb);min-height:36px}
.m-day{display:flex;justify-content:center;margin:18px 0 4px}
.m-day span{font:700 12px var(--fb);color:var(--muted);background:var(--page);border-radius:99px;padding:4px 11px}
.m-sys{display:flex;align-items:flex-start;gap:8px;margin:14px auto 4px;max-width:34ch;background:var(--lime-t);color:#3F5410;border-radius:16px;padding:10px 13px;font:700 13.5px/1.4 var(--fb)}
.m-sys .ico{color:var(--lime-d);margin-top:1px}
.m-wait{text-align:center;color:var(--muted);font-size:13.5px;padding:18px 0}

.cmp{display:none;position:fixed;left:0;right:0;bottom:var(--kb,0px);z-index:6;background:#fff;border-top:1px solid var(--line);
  padding:8px 10px calc(8px + var(--safe-b))}
body.chatting .cmp{display:block}
body.chatting .view{bottom:calc(var(--cmp-h,62px) + var(--kb,0px))}
.c-row{display:flex;align-items:flex-end;gap:8px}
.c-att{width:44px;height:44px;border-radius:14px;background:var(--g-t);color:#004B34;display:grid;place-items:center;flex:none}
.c-att[disabled]{opacity:.45}
.cmp textarea{flex:1;min-width:0;display:block;height:44px;min-height:44px;max-height:132px;resize:none;border:1.5px solid #DCE3DD;border-radius:22px;
  padding:9px 16px;font:400 16px/1.4 var(--fb);color:var(--ink);background:#fff;outline:none;-webkit-appearance:none;appearance:none;
  overflow-y:hidden;scrollbar-width:thin;scrollbar-color:#C9D3CE transparent;caret-color:#004B34}
.cmp textarea::selection{background:var(--lime-t)}
.cmp textarea::placeholder{color:#66776F}
.cmp textarea:focus{border-color:#004B34}
.c-send{width:44px;height:44px;border-radius:50%;background:#004B34;color:#fff;display:grid;place-items:center;flex:none;
  transition:background-color .15s var(--ease),transform .12s var(--ease)}
.c-send[disabled]{background:#D5DDD9;cursor:default}
.c-send:not([disabled]):active{transform:scale(.92)}
.c-top{display:flex;flex-direction:column;gap:8px;padding-bottom:8px}
.c-top:empty{display:none}
.c-tp{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -10px;padding:0 10px}
.c-tp::-webkit-scrollbar{display:none}
.tpc{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 15px;border-radius:99px;background:var(--page);color:var(--ink);font:700 14px var(--fb);flex:none}
.tpc .ico{color:#004B34}
.tpc[aria-pressed=true]{background:#004B34;color:#fff}
.tpc[aria-pressed=true] .ico{color:var(--lime)}
.c-ck{display:flex;align-items:center;gap:10px;background:var(--lime-t);border-radius:16px;padding:4px 0 4px 10px}
.c-ck .md{flex:1;min-width:0;display:flex;flex-direction:column;font-size:13px;color:var(--muted);line-height:1.3}
.c-ck .md b{font-size:14px;color:var(--ink)}
.c-x{width:44px;height:44px;display:grid;place-items:center;color:var(--muted);flex:none;border-radius:12px}
.c-ph{position:relative;align-self:flex-start}
.c-ph img{display:block;width:72px;height:72px;object-fit:cover;border-radius:14px}
.c-ph .c-x{position:absolute;top:-8px;right:-8px;width:30px;height:30px;border-radius:50%;background:#003825;color:#fff}
.c-ph .c-x::after{content:'';position:absolute;inset:-7px}
.c-off{display:flex;align-items:center;gap:8px;font:700 13px var(--fb);color:#004B34;background:var(--yel);border-radius:12px;padding:9px 11px}

/* an answer waiting on the home sheet, and the way in from a receipt */
.reply{display:flex;align-items:center;gap:12px;width:100%;margin-bottom:10px;background:var(--g-t);border-radius:18px;padding:12px 14px;text-align:left}
.reply .ka{width:40px;height:40px}
.reply .md{flex:1;min-width:0;display:flex;flex-direction:column;font:700 15px var(--fb)}
.reply .md span{font:400 13px var(--fb);color:#52665D}
.reply>.ico{color:#004B34}
.bdg{min-width:24px;height:24px;border-radius:12px;background:#004B34;color:#fff;font:700 12.5px/24px var(--fb);font-style:normal;text-align:center;padding:0 7px;flex:none}
.lr2 .md strong{color:#004B34}
.rc-ask{display:flex;align-items:center;justify-content:center;gap:8px;width:calc(100% - 28px);min-height:50px;margin:0 14px calc(24px + var(--safe-b));
  border-radius:16px;background:rgba(255,255,255,.1);color:#fff;font:700 15px var(--fb)}
.rc-ask .ico{color:var(--lime)}

/* a photo from the chat, full screen */
.pv{position:fixed;inset:0;z-index:20;background:rgba(0,26,18,.94);display:grid;place-items:center;padding:16px}
.pv img{max-width:100%;max-height:100%;border-radius:12px}
.pv-x{position:absolute;top:calc(12px + env(safe-area-inset-top,0px));right:12px;width:44px;height:44px;border-radius:14px;background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center}

.toast{position:fixed;left:50%;bottom:calc(var(--bar-h) + 14px);transform:translate(-50%,20px);z-index:9;background:#003825;color:#fff;
  font:700 14px var(--fb);padding:11px 16px;border-radius:14px;opacity:0;pointer-events:none;transition:opacity .2s var(--ease),transform .2s var(--ease);max-width:calc(100% - 40px)}
.toast.on{opacity:1;transform:translate(-50%,0)}
body.nobar .toast{bottom:24px}
body.chatting .toast{bottom:calc(var(--cmp-h,62px) + var(--kb,0px) + 12px)}

/* Small phones: the arcs keep their crop but shrink a little, so the big
   figures on the left keep clear of them. */
@media (max-width:359px){.pst .arcs{transform:scale(.86);transform-origin:100% 0}.pst .arcs.at-b{transform-origin:100% 100%}
  /* the words keep clear of the arcs on the narrowest phones */
  .p-p{max-width:20ch}.h-p{font-size:23px}.tone-yellow .pin .h-p.big{font-size:22px}}

@media (prefers-reduced-motion:reduce){
  .view.enter,.view.fwd,.view .arcs .orb{animation:none!important}
  .nv .pill,.nv .lb,.sw,.sw i,.toast,.c-send{transition:none!important}
  .cta:active,.rr:active,.last:active,.tease:active,.lr2:active,.mp:active,.nudge:active,.reply:active,.rc-ask:active,.nv:active .pill,.c-send:active{transform:none}
}