/* ============================================================
   Shawir Screen Kit — real app screens as animated components
   Source of truth: Figma "SHAWIR SCREENS" (file 21sX0m29aP4ajKUyNCtT2c)
   Screens: home · search · chat · vip-call · booking · wallet
   Usage:
     <link rel="stylesheet" href="screens/screen-kit.css">
     <script src="screens/screens.js"></script>
     <div data-screen="home" style="--sk-zoom:.8"></div>
     <script>ShawirScreens.auto()</script>
   ============================================================ */

:root{
  --sk-navy:#1B3664;
  --sk-navy-d:#122344;
  --sk-navy-l:#2A4A80;
  --sk-teal:#17B18C;
  --sk-teal-d:#0F9474;
  --sk-teal-t:#E3F5F3;
  --sk-gold:#F5B800;
  --sk-red:#D9414B;
  --sk-orange:#FB8B66;
  --sk-bg:#F6F8FB;
  --sk-card:#FFFFFF;
  --sk-border:#E4E8F1;
  --sk-ink:#22314F;
  --sk-gray:#8A93A2;
  --sk-blue-t:#E4EFFC;
  --sk-font:'Alexandria','Rubik',system-ui,sans-serif;
}

/* ---------- phone frame ----------
   Scaling uses transform (not zoom): zoom multiplies computed font sizes,
   so browsers with a minimum font size (Safari, Chrome w/ min-font pref)
   clamp the kit's small text back up and blow out the layout. The mount
   element reserves the scaled box; .sk-scale renders at 1:1 and shrinks. */
.sk-phone{position:relative;width:calc(320px * var(--sk-zoom,1));height:calc(670px * var(--sk-zoom,1));flex-shrink:0}
.sk-phone .sk-scale{position:absolute;left:0;top:0;transform:scale(var(--sk-zoom,1));transform-origin:top left;width:320px;background:#0E1524;border-radius:44px;padding:10px;box-shadow:0 24px 70px rgba(27,54,100,.18)}
.sk-screen{position:relative;width:300px;height:650px;border-radius:36px;overflow:hidden;background:var(--sk-bg);display:flex;flex-direction:column;font-family:var(--sk-font);font-size:12px;color:var(--sk-ink);line-height:1.5;direction:rtl;text-align:right}
.sk-screen *{margin:0;padding:0;box-sizing:border-box}
.sk-notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:92px;height:22px;background:#0E1524;border-radius:0 0 14px 14px;z-index:50}

/* ---------- status bar ---------- */
.sk-status{direction:ltr;display:flex;justify-content:space-between;align-items:center;padding:10px 22px 4px;font-size:11px;font-weight:600;flex-shrink:0}
.sk-status svg{width:46px;height:11px;display:block}
.sk-status.dark{color:#fff}
.sk-status.light{color:var(--sk-ink)}

/* ---------- generic entrance states ---------- */
.sk-pop{opacity:0;transform:translateY(14px) scale(.94);transition:opacity .45s ease,transform .5s cubic-bezier(.34,1.56,.64,1)}
.sk-pop.go{opacity:1;transform:none}
.sk-fade{opacity:0;transition:opacity .5s ease}
.sk-fade.go{opacity:1}
.sk-rise{opacity:0;transform:translateY(22px);transition:opacity .5s ease,transform .55s cubic-bezier(.22,1,.36,1)}
.sk-rise.go{opacity:1;transform:none}

/* ---------- shared bits ---------- */
/* points icon = public/images/other-images/points_icon.svg, inlined so the kit stays a 2-file drop-in */
.sk-coin{display:inline-block;width:14px;height:14px;background:url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23FFF6C3'/%3E%3Ccircle opacity='.4' cx='12' cy='12' r='8' fill='%23fff'/%3E%3Cg filter='url(%23a)'%3E%3Ccircle cx='12' cy='12' r='8' fill='%23ECC716'/%3E%3C/g%3E%3Cpath d='M13.234 8.184c0 .654-.524 1.184-1.17 1.184-.645 0-1.168-.53-1.168-1.184 0-.654.523-1.184 1.169-1.184s1.169.53 1.169 1.184ZM8.948 10.75a.98.98 0 0 1-.974.987A.98.98 0 0 1 7 10.75a.98.98 0 0 1 .974-.987.98.98 0 0 1 .974.987ZM17 10.75a.98.98 0 0 1-.974.987.98.98 0 0 1-.974-.987.98.98 0 0 1 .974-.987.98.98 0 0 1 .974.987ZM14.403 10.904c-1.806-1.13-2.828-1.21-4.676 0 .187 2.61.87 3.894 2.363 6.096 1.506-2.184 2.108-3.488 2.313-6.096Z' fill='%23FBF0B2'/%3E%3Cpath d='M14.551 11.737c-.388 2.23-.862 3.387-2.226 5.263 1.93-.724 2.862-1.365 4.155-3.087-.32-.97-.794-1.433-1.929-2.176ZM9.579 11.737c.388 2.23.862 3.387 2.226 5.263-1.93-.724-2.862-1.365-4.156-3.087.321-.97.795-1.433 1.93-2.176Z' fill='%23FBF0B2'/%3E%3Cdefs%3E%3Cfilter id='a' x='4' y='4' width='16' height='16' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeColorMatrix in='SourceAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='1'/%3E%3CfeComposite in2='hardAlpha' operator='arithmetic' k2='-1' k3='1'/%3E%3CfeColorMatrix values='0 0 0 0 0.891247 0 0 0 0 0.752926 0 0 0 0 0.0912263 0 0 0 1 0'/%3E%3CfeBlend in2='shape' result='effect1_innerShadow_161_1272'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E") center/contain no-repeat;vertical-align:-2.5px;flex-shrink:0}
.sk-avatar{border-radius:50%;background:linear-gradient(135deg,var(--sk-teal),#0d8f70);color:#fff;display:grid;place-items:center;font-weight:700;flex-shrink:0}
.sk-avatar.nv{background:linear-gradient(135deg,var(--sk-navy),var(--sk-navy-l))}
.sk-avatar.or{background:linear-gradient(135deg,#F0A81E,#D9820A)}
.sk-avatar.bl{background:linear-gradient(135deg,#1C74F2,var(--sk-navy))}
.sk-avatar.gr{background:linear-gradient(135deg,#8A93A2,#5C6B84)}

/* app header (navy) */
.sk-apphead{background:var(--sk-navy);color:#fff;padding:6px 16px 12px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.sk-apphead .ttl{font-size:15px;font-weight:700}
.sk-apphead .tools{display:flex;align-items:center;gap:8px}
.sk-apphead .bell{width:30px;height:30px;border-radius:50%;border:1.4px solid rgba(255,255,255,.4);display:grid;place-items:center}
.sk-apphead .bell svg{width:15px;height:15px}
.sk-coinpill{display:flex;align-items:center;gap:6px;background:var(--sk-navy-d);border-radius:100px;padding:5px 12px;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.sk-coinpill .sk-coin{width:15px;height:15px}

/* bottom nav */
.sk-nav{margin-top:auto;background:#fff;border-top:1px solid var(--sk-border);display:flex;justify-content:space-around;padding:9px 6px 16px;flex-shrink:0}
.sk-nav div{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:8.5px;color:var(--sk-gray);transition:color .3s;min-width:44px}
.sk-nav svg{width:19px;height:19px}
.sk-nav div.on{color:var(--sk-navy);font-weight:700}
.sk-homebar{position:absolute;bottom:5px;left:50%;transform:translateX(-50%);width:100px;height:4px;border-radius:4px;background:#0E1524;z-index:40}

/* creator result card (home + search) */
.sk-ccard{background:#fff;border-radius:16px;padding:12px;box-shadow:0 4px 18px rgba(27,54,100,.07);display:flex;gap:10px;align-items:center}
.sk-ccard .ring{width:64px;height:64px;border-radius:50%;padding:2.5px;background:conic-gradient(#F5B800,#F07B3F,#F5B800);position:relative;flex-shrink:0}
.sk-ccard .ring .sk-avatar{width:100%;height:100%;font-size:18px;border:2px solid #fff}
.sk-ccard .dot{position:absolute;bottom:3px;left:3px;width:11px;height:11px;border-radius:50%;background:#12C48B;border:2px solid #fff}
.sk-ccard .inf{flex:1;min-width:0}
.sk-ccard .spec{color:var(--sk-teal);font-size:9.5px;font-weight:600}
.sk-ccard .nm{font-size:13px;font-weight:700;color:var(--sk-ink);margin:1px 0}
.sk-ccard .rate{font-size:9.5px;color:var(--sk-gray);display:flex;align-items:center;gap:3px}
.sk-ccard .rate b{color:var(--sk-ink)}
.sk-ccard .rate .st{color:var(--sk-gold);font-size:11px}
.sk-ccard .loc{font-size:9.5px;color:var(--sk-ink);display:flex;align-items:center;gap:3px;margin-top:1px}
.sk-ccard .loc svg{width:10px;height:10px;color:var(--sk-teal)}
.sk-ccard .side{display:flex;flex-direction:column;align-items:center;gap:7px;flex-shrink:0}
.sk-ccard .prc{display:flex;align-items:center;gap:4px;font-size:10px;color:var(--sk-teal);font-weight:700}
.sk-bookbtn{background:var(--sk-teal);color:#fff;font-size:10px;font-weight:700;border-radius:10px;padding:7px 14px;font-family:inherit;border:none}
.sk-bookbtn.plse{animation:sk-btnpulse 1.6s ease-in-out infinite}
@keyframes sk-btnpulse{0%,100%{box-shadow:0 0 0 0 rgba(23,177,140,.45)}55%{box-shadow:0 0 0 9px rgba(23,177,140,0)}}

/* ============ HOME ============ */
.sk-home .hero-band{background:var(--sk-navy);padding-bottom:14px;flex-shrink:0}
.sk-home .stories{display:flex;gap:11px;padding:8px 14px 0;overflow:hidden}
.sk-home .story{display:flex;flex-direction:column;align-items:center;gap:4px;width:52px;flex-shrink:0}
.sk-home .story .rng{width:50px;height:50px;border-radius:50%;padding:2.5px;background:conic-gradient(#5FE3C0,#1C74F2,#5FE3C0);transition:box-shadow .4s}
.sk-home .story.brand .rng{background:conic-gradient(var(--sk-gold),#F07B3F,var(--sk-gold))}
.sk-home .story .rng .sk-avatar{width:100%;height:100%;font-size:13px;border:2px solid var(--sk-navy)}
.sk-home .story span{font-size:8px;color:#fff;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52px}
.sk-home .story.watch .rng{box-shadow:0 0 0 3px rgba(95,227,192,.35);animation:sk-storyglow 1.1s ease-in-out infinite alternate}
@keyframes sk-storyglow{from{box-shadow:0 0 0 3px rgba(95,227,192,.15)}to{box-shadow:0 0 0 4px rgba(95,227,192,.5)}}
.sk-home .cats{display:flex;gap:8px;padding:12px 14px 2px;overflow:hidden}
.sk-home .cat{width:56px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:4px}
.sk-home .cat .bx{width:52px;height:44px;border-radius:13px;display:grid;place-items:center;font-size:19px;border:1.6px solid}
.sk-home .cat span{font-size:7.5px;font-weight:700}
.sk-home .cat.c1 .bx{background:#EAF7EF;border-color:#2F9E63}.sk-home .cat.c1 span{color:#2F9E63}
.sk-home .cat.c2 .bx{background:#E7F0FD;border-color:#1C74F2}.sk-home .cat.c2 span{color:#1C74F2}
.sk-home .cat.c3 .bx{background:#EAF7EF;border-color:#2F9E63}.sk-home .cat.c3 span{color:#2F9E63}
.sk-home .cat.c4 .bx{background:#FDF1E3;border-color:#F0A81E}.sk-home .cat.c4 span{color:#E08900}
.sk-home .cat.c5 .bx{background:#FDEAEA;border-color:#E2555E}.sk-home .cat.c5 span{color:#E2555E}
.sk-home .chips{display:flex;gap:7px;padding:12px 14px 4px}
.sk-home .chip{font-size:9px;font-weight:600;padding:6px 13px;border-radius:100px;border:1.2px solid var(--sk-navy);color:var(--sk-navy);background:#fff;transition:background .3s,color .3s;white-space:nowrap}
.sk-home .chip.on{background:var(--sk-navy);color:#fff}
.sk-home .feed{padding:10px 14px;display:flex;flex-direction:column;gap:10px;overflow:hidden}
/* expanded card */
.sk-xcard{background:#fff;border-radius:16px;padding:12px;box-shadow:0 4px 18px rgba(27,54,100,.07)}
.sk-xcard .hd{display:flex;align-items:center;gap:9px}
.sk-xcard .hd .ring{width:40px;height:40px;border-radius:50%;padding:2px;background:conic-gradient(#F5B800,#F07B3F,#F5B800)}
.sk-xcard .hd .ring .sk-avatar{width:100%;height:100%;font-size:12px;border:1.5px solid #fff}
.sk-xcard .hd .inf{flex:1}
.sk-xcard .hd .spec{color:var(--sk-teal);font-size:9px;font-weight:600}
.sk-xcard .hd .nm{font-size:12.5px;font-weight:700}
.sk-xcard .hd .rt{font-size:9.5px;color:var(--sk-gray);display:flex;align-items:center;gap:3px}
.sk-xcard .hd .rt .st{color:var(--sk-gold)}
.sk-xcard .rows{display:flex;flex-direction:column;gap:7px;margin-top:11px}
.sk-xrow{display:flex;align-items:center;gap:8px;border-radius:11px;padding:8px 11px;font-size:10.5px;font-weight:700;background:#EDEFF3;color:var(--sk-ink)}
.sk-xrow.tl{background:var(--sk-teal-t);color:var(--sk-teal-d)}
.sk-xrow svg{width:14px;height:14px;flex-shrink:0}
.sk-xrow .amt{margin-right:auto;display:flex;align-items:center;gap:4px;font-variant-numeric:tabular-nums}

/* ============ SEARCH ============ */
.sk-search .bar-wrap{background:#fff;border-radius:16px;margin:12px 14px 2px;padding:10px;display:flex;gap:9px;align-items:center;box-shadow:0 4px 18px rgba(27,54,100,.07);flex-shrink:0}
.sk-search .flt{width:40px;height:40px;border-radius:12px;background:var(--sk-teal);display:grid;place-items:center;color:#fff;flex-shrink:0;transition:transform .3s}
.sk-search .flt svg{width:17px;height:17px}
.sk-search .flt.tap{transform:scale(.88)}
.sk-search .inp{flex:1;background:var(--sk-bg);border:1.4px solid var(--sk-border);border-radius:11px;padding:10px 12px;font-size:11px;color:var(--sk-gray);display:flex;align-items:center;transition:border-color .3s}
.sk-search .inp.focus{border-color:var(--sk-teal)}
.sk-search .inp .typed{color:var(--sk-ink);font-weight:600;white-space:nowrap}
.sk-search .inp .caret{width:1.5px;height:13px;background:var(--sk-teal);margin-right:2px;opacity:0}
.sk-search .inp.focus .caret{animation:sk-caret 1s steps(2) infinite}
@keyframes sk-caret{0%,49%{opacity:1}50%,100%{opacity:0}}
.sk-search .cnt{font-size:9px;color:var(--sk-gray);padding:4px 22px 0;flex-shrink:0}
.sk-search .results{padding:8px 14px;display:flex;flex-direction:column;gap:10px;overflow:hidden}

/* ============ CHAT ============ */
.sk-chat{background:#FBFCFF}
.sk-chat .chead{display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 0 12px;border-bottom:1px solid var(--sk-border);flex-shrink:0}
.sk-chat .chead .sk-avatar{width:34px;height:34px;font-size:12px}
.sk-chat .chead b{font-size:13px;color:var(--sk-ink)}
.sk-chat .flow{flex:1;padding:12px 14px;display:flex;flex-direction:column;gap:9px;justify-content:flex-start;overflow:hidden}
.sk-chat .info{background:var(--sk-blue-t);border-radius:12px;padding:10px 12px;font-size:9.5px;color:#3C5A82;line-height:1.7}
.sk-chat .day{align-self:center;background:#EDEFF3;color:var(--sk-gray);font-size:9px;padding:4px 12px;border-radius:100px}
.sk-chat .banner{border-radius:12px;padding:11px;text-align:center;color:#fff;font-size:12px;font-weight:700}
.sk-chat .banner.start{background:linear-gradient(135deg,#FF9E77,var(--sk-orange))}
.sk-chat .banner.done{background:linear-gradient(135deg,#1FBF97,var(--sk-teal-d))}
.sk-chat .bbl{max-width:78%;border-radius:13px;padding:8px 11px;font-size:10.5px;line-height:1.6;position:relative}
.sk-chat .bbl.fan{align-self:flex-start;background:#EDF5FB;border-top-right-radius:4px}
.sk-chat .bbl.cr{align-self:flex-end;background:var(--sk-teal-t);border-top-left-radius:4px}
.sk-chat .bbl .mt{display:flex;align-items:center;gap:3px;font-size:8px;color:var(--sk-gray);margin-top:3px;justify-content:flex-end;direction:ltr}
.sk-chat .bbl .mt .ck{color:var(--sk-teal);letter-spacing:-2px}
.sk-chat .bbl .dots{display:none;gap:3px;padding:3px 2px}
.sk-chat .bbl .dots i{width:5px;height:5px;border-radius:50%;background:var(--sk-gray);animation:sk-dot 1s ease-in-out infinite}
.sk-chat .bbl .dots i:nth-child(2){animation-delay:.15s}
.sk-chat .bbl .dots i:nth-child(3){animation-delay:.3s}
@keyframes sk-dot{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-4px);opacity:1}}
.sk-chat .bbl.typing .dots{display:flex}
.sk-chat .bbl.typing .txt,.sk-chat .bbl.typing .mt{display:none}

/* ============ VIP CALL ============ */
.sk-call{background:var(--sk-navy);color:#fff;align-items:center}
.sk-call .lbl{font-size:10px;opacity:.75;text-align:center}
.sk-call .top{margin-top:40px;display:flex;flex-direction:column;gap:8px;align-items:center}
.sk-call .pill{background:var(--sk-navy-d);border-radius:12px;padding:8px 22px;font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;direction:ltr}
.sk-call .pill.rem{color:#2EE6B0}
.sk-call .pill.dur{color:#fff;display:flex;align-items:center;gap:8px}
.sk-call .pill.dur i{width:8px;height:8px;border-radius:50%;background:#EF3B4A;animation:sk-blink 1.2s ease-in-out infinite}
@keyframes sk-blink{0%,100%{opacity:1}50%{opacity:.25}}
.sk-call .stage{flex:1;display:flex;align-items:center;justify-content:center;position:relative;width:100%}
.sk-call .rings{position:relative;width:230px;height:230px;display:grid;place-items:center}
.sk-call .rings::before,.sk-call .rings::after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.045)}
.sk-call .rings::before{inset:0}
.sk-call .rings::after{inset:38px}
.sk-call .core{position:relative;width:118px;height:118px;border-radius:50%;background:rgba(255,255,255,.06);display:grid;place-items:center}
.sk-call .core .sk-avatar{width:104px;height:104px;font-size:34px}
.sk-call .ripple::before,.sk-call .ripple::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:1.6px solid rgba(95,227,192,.45);animation:sk-rip 2.6s ease-out infinite}
.sk-call .ripple::after{animation-delay:1.3s}
@keyframes sk-rip{0%{transform:scale(.9);opacity:1}100%{transform:scale(1.75);opacity:0}}
.sk-call .mid{display:flex;flex-direction:column;gap:8px;align-items:center;margin-bottom:26px}
.sk-call .ctls{display:flex;gap:26px;margin-bottom:44px}
.sk-call .ctl{display:flex;flex-direction:column;align-items:center;gap:7px;font-size:9.5px;opacity:.9}
.sk-call .ctl .cbtn{width:52px;height:52px;border-radius:50%;background:#1B457C;display:grid;place-items:center;transition:transform .25s}
.sk-call .ctl .cbtn svg{width:21px;height:21px}
.sk-call .ctl.end .cbtn{background:rgba(217,65,75,.28);border:1.4px solid rgba(239,59,74,.5)}
.sk-call .ctl.end{color:#FF8B93}
.sk-call .ctl .cbtn.tap{transform:scale(.86)}

/* ============ BOOKING ============ */
.sk-book .bhead{background:var(--sk-navy);color:#fff;padding:4px 16px 14px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.sk-book .bhead b{font-size:14px}
.sk-book .bhead .ic{width:24px;height:24px;border-radius:50%;border:1.3px solid rgba(255,255,255,.5);display:grid;place-items:center;font-size:11px;font-style:normal}
.sk-book .bwin{flex:1;overflow:hidden;position:relative;background:#fff;border-radius:22px 22px 0 0;margin-top:-8px}
.sk-book .bscroll{padding:16px 16px 90px;display:flex;flex-direction:column;gap:13px;transition:transform 1s cubic-bezier(.5,0,.15,1)}
.sk-book .who .spec{color:var(--sk-teal);font-size:11px;font-weight:700}
.sk-book .who .nm{font-size:14.5px;font-weight:700;margin-top:2px}
.sk-book .bcard{border:1.4px solid var(--sk-border);border-radius:14px;padding:12px}
.sk-book .bcard .cttl{display:flex;align-items:center;justify-content:space-between;font-size:11.5px;font-weight:700;padding-bottom:10px;border-bottom:1px solid var(--sk-border)}
.sk-book .cttl .clk{width:18px;height:18px;border-radius:50%;background:var(--sk-teal-t);color:var(--sk-teal);display:grid;place-items:center}
.sk-book .cttl .clk svg{width:11px;height:11px}
.sk-book .opt{display:flex;align-items:center;gap:9px;padding:11px 2px 2px;font-size:11.5px;font-weight:600}
.sk-book .opt svg{width:16px;height:16px;color:var(--sk-teal)}
.sk-book .opt .amt{margin-right:auto;display:flex;align-items:center;gap:5px;font-weight:700;font-variant-numeric:tabular-nums}
.sk-book .opt .rdo{width:17px;height:17px;border-radius:50%;border:1.6px solid #C6CDDD;transition:all .3s;position:relative;flex-shrink:0}
.sk-book .opt.sel .rdo{border-color:var(--sk-teal);background:var(--sk-teal)}
.sk-book .opt.sel .rdo::after{content:"";position:absolute;inset:4.5px;border-radius:50%;background:#fff}
.sk-book .cal .cttl2{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:700;margin-bottom:10px}
.sk-book .cal .mo{color:var(--sk-ink);font-size:11.5px}
.sk-book .cal .arr{color:var(--sk-gray);letter-spacing:3px;font-size:12px}
.sk-book .grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center;font-size:9.5px}
.sk-book .grid .wd{color:var(--sk-gray);font-size:8px;font-weight:600;padding:3px 0}
.sk-book .grid .dy{padding:5px 0;border-radius:50%;font-variant-numeric:tabular-nums;transition:background .35s,color .35s;position:relative}
.sk-book .grid .dy.off{color:#C6CDDD}
.sk-book .grid .dy.sel{background:var(--sk-teal);color:#fff;font-weight:700}
.sk-book .grid .dy.sel.pop{animation:sk-daypop .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes sk-daypop{0%{transform:scale(.4)}100%{transform:scale(1)}}
.sk-book .sttl{font-size:12.5px;font-weight:700}
.sk-book .ampm{display:flex;gap:9px}
.sk-book .ampm div{flex:1;text-align:center;border-radius:100px;padding:9px;font-size:11px;font-weight:700;border:1.4px solid var(--sk-border);color:#C6CDDD;transition:all .35s}
.sk-book .ampm div.on{background:var(--sk-teal);border-color:var(--sk-teal);color:#fff}
.sk-book .slots{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.sk-book .slot{background:#F8F9FC;border-radius:9px;padding:8px 2px;text-align:center;font-size:9px;font-weight:600;font-variant-numeric:tabular-nums;transition:all .3s;border:1.2px solid transparent}
.sk-book .slot.sel{background:var(--sk-teal);color:#fff;font-weight:700;transform:scale(1.06)}
.sk-book .bbar{position:absolute;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--sk-border);border-radius:18px 18px 0 0;box-shadow:0 -10px 30px rgba(27,54,100,.10);padding:11px 14px 14px;display:flex;flex-direction:column;gap:9px;transform:translateY(105%);transition:transform .6s cubic-bezier(.22,1,.36,1)}
.sk-book .bbar.up{transform:none}
.sk-book .bbar .sel-ttl{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700}
.sk-book .bbar .sel-ttl svg{width:15px;height:15px;color:var(--sk-teal);flex-shrink:0}
.sk-book .bbar .sel-ttl .n{width:16px;height:16px;border-radius:50%;background:var(--sk-teal);color:#fff;font-size:9px;display:grid;place-items:center}
.sk-book .bbar .sel-row{background:#F8F9FC;border-radius:10px;padding:9px 11px;font-size:9.5px;display:flex;justify-content:space-between;align-items:center;color:var(--sk-ink)}
.sk-book .bbar .sel-row .x{color:var(--sk-gray)}
.sk-book .cta{background:var(--sk-navy);color:#fff;border-radius:12px;padding:12px;text-align:center;font-size:12.5px;font-weight:700;display:flex;justify-content:center;align-items:center;gap:7px}
.sk-book .cta.plse{animation:sk-ctapulse 1.7s ease-in-out infinite}
@keyframes sk-ctapulse{0%,100%{box-shadow:0 0 0 0 rgba(27,54,100,.4)}55%{box-shadow:0 0 0 10px rgba(27,54,100,0)}}

/* ============ WALLET ============ */
.sk-wallet .whead{background:linear-gradient(135deg,var(--sk-navy),var(--sk-navy-l));color:#fff;padding:8px 18px 22px;flex-shrink:0}
.sk-wallet .whead .lb{font-size:10px;letter-spacing:.08em;opacity:.75}
.sk-wallet .whead .amt{font-size:30px;font-weight:800;font-variant-numeric:tabular-nums;margin-top:3px;display:flex;align-items:center;gap:9px}
.sk-wallet .whead .usd{font-size:9.5px;opacity:.72;margin-top:2px;font-variant-numeric:tabular-nums;direction:ltr}
.sk-wallet .whead .amt .sk-coin{width:22px;height:22px}
.sk-wallet .whead .chip{display:inline-flex;align-items:center;gap:5px;margin-top:9px;font-size:9.5px;font-weight:700;background:rgba(95,227,192,.16);color:#5FE3C0;padding:5px 12px;border-radius:100px}
.sk-wallet .txs{padding:12px 14px;display:flex;flex-direction:column;gap:9px}
.sk-wallet .tx{background:#fff;border-radius:13px;padding:10px 12px;display:flex;align-items:center;gap:10px;box-shadow:0 4px 14px rgba(27,54,100,.06)}
.sk-wallet .tx .ic{width:34px;height:34px;border-radius:10px;background:var(--sk-teal-t);color:var(--sk-teal-d);display:grid;place-items:center;flex-shrink:0}
.sk-wallet .tx .ic svg{width:16px;height:16px}
.sk-wallet .tx .inf{flex:1;min-width:0}
.sk-wallet .tx .inf b{font-size:10.5px;display:block}
.sk-wallet .tx .inf span{font-size:8.5px;color:var(--sk-gray)}
.sk-wallet .tx .plus{display:flex;align-items:center;gap:4px;font-size:11px;font-weight:800;color:var(--sk-teal);font-variant-numeric:tabular-nums;direction:ltr}
.sk-wallet .zero{margin:4px 14px;background:var(--sk-teal-t);border-radius:12px;padding:11px;font-size:10.5px;font-weight:700;color:var(--sk-teal-d);text-align:center}
.sk-wallet .toast{position:absolute;top:30px;left:12px;right:12px;background:#fff;border:1px solid var(--sk-border);border-right:4px solid var(--sk-teal);border-radius:13px;padding:10px 13px;display:flex;gap:10px;align-items:center;box-shadow:0 12px 32px rgba(27,54,100,.18);transform:translateY(-130%);transition:transform .55s cubic-bezier(.34,1.4,.64,1);z-index:20}
.sk-wallet .toast.show{transform:none}
.sk-wallet .toast .ic{width:30px;height:30px;border-radius:9px;background:var(--sk-teal-t);display:grid;place-items:center;color:var(--sk-teal-d);font-weight:800;font-size:13px}
.sk-wallet .toast b{font-size:10.5px;color:var(--sk-navy);display:block}
.sk-wallet .toast span{font-size:9px;color:var(--sk-gray)}

/* ============ LTR (English) variant ============ */
/* .sk-ltr is set on .sk-screen when mounted with lang:'en' / data-screen-lang="en".
   Flexbox flips with `direction`; the rules below mirror the few physical
   left/right properties the RTL build relies on. */
.sk-screen.sk-ltr{direction:ltr;text-align:left}
.sk-ltr .sk-ccard .dot{left:auto;right:3px}
.sk-ltr .sk-xrow .amt{margin-right:0;margin-left:auto}
.sk-book.sk-ltr .opt .amt{margin-right:0;margin-left:auto}
.sk-search.sk-ltr .inp .caret{margin-right:0;margin-left:2px}
.sk-chat.sk-ltr .bbl.fan{border-top-right-radius:13px;border-top-left-radius:4px}
.sk-chat.sk-ltr .bbl.cr{border-top-left-radius:13px;border-top-right-radius:4px}
.sk-wallet.sk-ltr .toast{border-right:1px solid var(--sk-border);border-left:4px solid var(--sk-teal)}

/* reduced motion: land on final state, no loops */
@media (prefers-reduced-motion: reduce){
  .sk-screen *{animation:none!important;transition:none!important}
}