/* Splitto v5 prototype. Design System v2.0 tokens (proposal). Names follow DS v1.2; lines marked NEW are v2.0 additions. */
.phone{
  --font:"Readex Pro","Segoe UI",system-ui,-apple-system,Tahoma,sans-serif;
  /* colour: light (default look) */
  --c-bg:#F3F8F9; --c-surface:#FFFFFF; --c-fill:#E9F0F2; --c-ink:#0F1F24; --c-ink2:#475A60; --c-ink3:#8A9DA3; --c-field:#6A7F85; --c-line:#DCE6E8;
  --c-primary:#0B7285; --c-on-primary:#FFFFFF; --c-primary-strong:#085564; --c-primary-soft:#DDF1F4;
  --c-accent:#F7B733; --c-on-accent:#2F2200; --c-sword:#B87000;
  --c-owed-bg:#E9EEF0; --c-owed-fg:#2F4047; --c-wait-bg:#FFF0C7; --c-wait-fg:#5E3F00; --c-paid-bg:#D6F4E0; --c-paid-fg:#125A2B;
  --c-bad-bg:#FFE1DD; --c-bad-fg:#86190F; --c-bad-line:#C0392B; --c-ok:#125A2B; --c-on-ok:#FFFFFF;
  --c-focus:#085564; --c-scrim:rgba(8,14,16,.5);
  --hero-bg:#085564; --hero-ink:#FFFFFF; --hero-ink2:#DDF1F4;   /* NEW: hero uses primary-strong */
  --logo-word:#FFFFFF; --logo-sword:#F7B733; --mark-bg:#FFFFFF; --mark-fg:#085564; --mark-sw:#F7B733;
  /* NEW v2.0: radius, elevation, type, motion */
  --r-xs:6px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-2xl:28px; --r-pill:999px;
  --shadow-card:0 6px 18px rgba(8,85,100,.10),0 1px 2px rgba(8,85,100,.08);
  --shadow-float:0 6px 14px rgba(8,85,100,.28);
  --fs-display:32px; --lh-display:38px; --lh-display-ar:52px;
  --fs-cta:20px; --lh-cta:26px; --lh-cta-ar:34px;
  --dur-press:140ms; --dur-enter:300ms; --dur-stagger:50ms; --dur-sheet:280ms; --dur-screen:240ms; --dur-success:300ms; --dur-logo:1100ms; --dur-count:750ms;
  --ease:cubic-bezier(.2,0,0,1); --ease-decel:cubic-bezier(0,0,.2,1); --ease-accel:cubic-bezier(.4,0,1,1); --ease-settle:cubic-bezier(.3,1.3,.5,1);
  --move-rise:12px; --move-screen:16px;
  --safe-t:47px; --safe-b:24px; --focus-ring:3px;
}
.phone[data-theme="dark"]{
  --c-bg:#0B1518; --c-surface:#13232A; --c-fill:#1C3038; --c-ink:#E8F1F3; --c-ink2:#A5B9BE; --c-ink3:#5F7880; --c-field:#6F8A92; --c-line:#264049;
  --c-primary:#4CC3D9; --c-on-primary:#04262D; --c-primary-strong:#7DD6E6; --c-primary-soft:#12353D; --c-sword:#F7B733;
  --c-owed-bg:#22313A; --c-owed-fg:#CBD8DD; --c-wait-bg:#3D3010; --c-wait-fg:#FFD983; --c-paid-bg:#113620; --c-paid-fg:#8FE5AB;
  --c-bad-bg:#471A16; --c-bad-fg:#FFB4AB; --c-bad-line:#FF8A7D; --c-ok:#8FE5AB; --c-on-ok:#062312; --c-focus:#7DD6E6; --c-scrim:rgba(0,0,0,.6);
  --shadow-card:0 6px 18px rgba(0,0,0,.35); --shadow-float:0 6px 14px rgba(0,0,0,.45);
  --hero-bg:#0E3640; --hero-ink:#E8F1F3; --hero-ink2:#B9D3D9;
  --logo-word:#E8F1F3; --mark-bg:#4CC3D9; --mark-fg:#04262D;
}

/* ===== Prototype chrome (not part of the design) ===== */
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:"Readex Pro","Segoe UI",system-ui,sans-serif;background:#E3EAEC;color:#0F1F24;-webkit-text-size-adjust:100%}
body.pagedark{background:#050A0C;color:#E8F1F3}
.pc{max-width:1100px;margin:0 auto;padding:12px 16px 0;display:flex;flex-wrap:wrap;gap:8px 18px;align-items:flex-end}
.pc h1{flex:1 1 100%;margin:0;font-size:17px;line-height:24px}
.pc p{flex:1 1 100%;margin:0;font-size:13px;line-height:19px;color:#475A60}
body.pagedark .pc p{color:#A5B9BE}
.pgrp{border:0;margin:0;padding:0}
.pgrp legend{font-size:12px;line-height:16px;font-weight:600;padding:0 0 3px;color:#475A60}
body.pagedark .pgrp legend{color:#A5B9BE}
.pseg{display:inline-flex;background:#fff;border:1.5px solid #6A7F85;border-radius:12px;overflow:hidden}
body.pagedark .pseg{background:#13232A;border-color:#6F8A92}
.pseg button,.pbtn{font:600 14px/20px "Readex Pro",system-ui,sans-serif;min-height:44px;min-width:44px;padding:0 14px;border:0;background:transparent;color:inherit;cursor:pointer}
.pseg button[aria-pressed="true"]{background:#085564;color:#fff}
body.pagedark .pseg button[aria-pressed="true"]{background:#7DD6E6;color:#04262D}
.pbtn{border:1.5px solid #085564;border-radius:12px;color:#085564}
body.pagedark .pbtn{color:#7DD6E6;border-color:#7DD6E6}
.pseg button:focus-visible,.pbtn:focus-visible{outline:3px solid #085564;outline-offset:2px;position:relative;z-index:1}
.stage{display:flex;justify-content:center;padding:14px 16px 40px}
.stagehint{max-width:420px;margin:0 auto;padding:0 16px 24px;font-size:13px;line-height:19px;color:#475A60;text-align:center}
body.pagedark .stagehint{color:#A5B9BE}

/* ===== Phone frame; under 521 px it is full-bleed (Emad's real phone) ===== */
.phone{position:relative;box-sizing:content-box;width:var(--w,390px);height:var(--h,844px);border:10px solid #10181b;border-radius:48px;overflow:hidden;background:var(--c-bg);color:var(--c-ink);font-family:var(--font);font-size:16px;line-height:22px;-webkit-font-smoothing:antialiased;isolation:isolate}
.phone[dir="rtl"]{line-height:28px}
.phone *{box-sizing:border-box}
.statusbar{position:absolute;top:0;inset-inline:0;height:var(--safe-t);display:flex;justify-content:space-between;align-items:flex-end;padding:0 32px 8px;font:600 15px/18px var(--font);z-index:60;direction:ltr;pointer-events:none;color:var(--sb,var(--c-ink))}
.homebar{position:absolute;bottom:8px;left:50%;width:134px;height:5px;margin-left:-67px;border-radius:3px;background:var(--c-ink);opacity:.9;z-index:80;pointer-events:none}
@media (max-width:520px){
  body,body.pagedark{background:var(--pbg,#F3F8F9)}
  .pc,.stagehint{display:none}
  .stage{padding:0;display:block}
  .phone{position:fixed;inset:0;width:auto!important;height:auto!important;border:0;border-radius:0;--safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px)}
  .statusbar,.homebar,.only-wide{display:none}
}

/* ===== Views, scrolling, bars ===== */
.view{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--c-bg)}
.scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.scroll::-webkit-scrollbar{display:none}
.pad{padding:0 16px}
.stack{display:flex;flex-direction:column}
.g8{gap:8px}.g12{gap:12px}.g16{gap:16px}.g24{gap:24px}
.pt-safe{padding-top:calc(var(--safe-t) + 8px)}
.bar{flex:none;background:var(--c-surface);box-shadow:0 -1px 0 var(--c-line);padding:10px 16px calc(10px + var(--safe-b));display:flex;flex-direction:column;gap:8px;z-index:6}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.phone a,.phone button{font-family:inherit;color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
.phone :focus-visible{outline:var(--focus-ring) solid var(--c-focus);outline-offset:2px}
.phone [tabindex="-1"]:focus,.phone [tabindex="-1"]:focus-visible{outline:none} /* focus targets moved to by script (titles), not controls */
.phone button{cursor:pointer}
.phone [hidden]{display:none!important}
svg.i{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
svg.i.s{width:18px;height:18px}
[dir="rtl"] .flip{transform:scaleX(-1)}
.num{direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums;white-space:nowrap}
.muted{color:var(--c-ink2)}
.small{font-size:14px;line-height:20px}.phone[dir="rtl"] .small{line-height:26px}
.cap{font-size:12px;line-height:16px;font-weight:600}.phone[dir="rtl"] .cap{line-height:22px}
h1,h2,h3,h4{margin:0}
.t-title{font-size:24px;line-height:30px;font-weight:700}.phone[dir="rtl"] .t-title{line-height:42px}
.t-sec{font-size:20px;line-height:26px;font-weight:700}.phone[dir="rtl"] .t-sec{line-height:36px}
.t-md{font-size:18px;line-height:24px;font-weight:700}.phone[dir="rtl"] .t-md{line-height:32px}
.t-amount{font-size:36px;line-height:42px;font-weight:700}.phone[dir="rtl"] .t-amount{line-height:50px}
.unit{font-size:.45em;font-weight:600;color:var(--c-ink2);margin-inline-start:4px}
.unit-s{font-size:12px;font-weight:600;color:var(--c-ink2);margin-inline-start:3px}
.amt{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ===== Motion ===== */
@keyframes enter{from{opacity:0;transform:translateY(var(--move-rise))}}
@keyframes viewin{from{opacity:0;transform:translateX(var(--mx,16px))}}
@keyframes viewback{from{opacity:0;transform:translateX(calc(var(--mx,16px) * -1))}}
@keyframes sheetin{from{transform:translateY(100%)}}
@keyframes scrimin{from{opacity:0}}
@keyframes pop{from{transform:scale(.4);opacity:0}}
@keyframes wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes drop{from{transform:translateY(-45%) rotate(-24deg) scale(.5);opacity:0}}
@keyframes check{from{transform:scale(.6);opacity:0}}
@keyframes toastin{from{transform:translateY(-12px);opacity:0}}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
@keyframes scanline{0%{transform:translateY(0)}100%{transform:translateY(100%)}}
@keyframes beat{0%,100%{opacity:.35}50%{opacity:1}}
.enter{animation:enter var(--dur-enter) var(--ease-decel) backwards;animation-delay:calc(var(--i,0) * var(--dur-stagger))}
.view.fwd{animation:viewin var(--dur-screen) var(--ease-decel)}
.view.bck{animation:viewback var(--dur-screen) var(--ease-decel)}
.phone[dir="rtl"] .view{--mx:-16px}
.view.nofx{animation:none}
.press{transition:transform var(--dur-press) var(--ease),opacity var(--dur-press) var(--ease)}
.press:active{transform:scale(.96)}
.checkpop{animation:check var(--dur-success) var(--ease-settle)}
.rm .phone *,.rm .phone *::before,.rm .phone *::after{animation:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){.phone *,.phone *::before,.phone *::after{animation:none!important;transition:none!important}}

/* ===== Logo ===== */
.logo{display:flex;width:fit-content;align-items:center;gap:10px;direction:ltr}
.logo .tile{width:38px;height:38px;border-radius:11px;display:block;animation:pop 480ms var(--ease-settle) backwards}
.logo .wm{position:relative;height:30px;aspect-ratio:3366/1066;display:block}
.logo .wm svg{position:absolute;inset:0;width:100%;height:100%}
.logo .wm .w{animation:wipe 600ms var(--ease-decel) 150ms backwards}
.logo .wm .s{animation:drop 480ms var(--ease-settle) 600ms backwards;transform-origin:72% 50%}
.logo.still *{animation:none!important}
.logo.sm{gap:7px}.logo.sm .tile{width:28px;height:28px;border-radius:8px}.logo.sm .wm{height:22px}
.lt .logo{--logo-word:var(--c-primary-strong);--logo-sword:var(--c-sword);--mark-bg:var(--c-primary-strong);--mark-fg:#fff}
.phone[data-theme="dark"] .lt .logo{--mark-bg:#4CC3D9;--mark-fg:#04262D}

/* ===== App bar ===== */
.appbar{display:flex;align-items:center;gap:8px;padding:calc(var(--safe-t) + 6px) 12px 6px;min-height:calc(var(--safe-t) + 56px);background:var(--c-bg)}
.appbar h1{flex:1;min-width:0;font-size:20px;line-height:26px;font-weight:700}
.phone[dir="rtl"] .appbar h1{line-height:34px}
.appbar .sub{display:block;font-size:12px;line-height:16px;font-weight:600;color:var(--c-ink2)}
.phone[dir="rtl"] .appbar .sub{line-height:22px}
.ibtn{width:44px;height:44px;border-radius:50%;border:0;background:var(--c-surface);box-shadow:0 1px 0 var(--c-line),0 0 0 1px var(--c-line);display:grid;place-items:center;color:var(--c-ink);flex:none}
.ibtn.plain{background:transparent;box-shadow:none}
.ibtn.sm{width:44px}
.tbtn{min-height:44px;min-width:44px;padding:0 12px;border:0;background:transparent;color:var(--c-primary-strong);font-size:15px;font-weight:600;border-radius:var(--r-md);display:inline-flex;align-items:center;justify-content:center;gap:6px}
.tbtn.danger{color:var(--c-bad-fg)}
.tbtn.ink{color:var(--c-ink)}

/* ===== Buttons ===== */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:56px;padding:12px 20px;border:0;border-radius:var(--r-xl);font-size:17px;line-height:22px;font-weight:700;background:var(--c-primary);color:var(--c-on-primary);text-align:center}
.phone[dir="rtl"] .btn{line-height:28px}
.btn[disabled],.btn[aria-disabled="true"]{background:var(--c-fill);color:var(--c-ink3);cursor:not-allowed}
.btn.sec{background:transparent;color:var(--c-primary-strong);box-shadow:inset 0 0 0 1.5px var(--c-primary-strong)}
.btn.sec[disabled]{box-shadow:inset 0 0 0 1.5px var(--c-line);color:var(--c-ink3)}
.btn.sun{background:var(--c-accent);color:var(--c-on-accent)}
.btn.danger{background:var(--c-bad-bg);color:var(--c-bad-fg);box-shadow:inset 0 0 0 1.5px var(--c-bad-line)}
.btn.soft{background:var(--c-primary-soft);color:var(--c-primary-strong)}
.btn.sm{min-height:44px;width:auto;padding:8px 16px;border-radius:var(--r-pill);font-size:15px}
.btn.wa{background:#fff;color:#0F1F24;box-shadow:inset 0 0 0 1.5px #6A7F85}
.row2{display:flex;gap:8px}.row2>*{flex:1}
.reason{font-size:14px;line-height:20px;color:var(--c-ink2);text-align:center;margin:0}

/* ===== Cards, rows ===== */
.card{background:var(--c-surface);border-radius:var(--r-xl);box-shadow:var(--shadow-card);padding:16px}
.card.flat{box-shadow:none}
.card.tight{padding:4px 0}
.sechead{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px}
.sechead h2{font-size:20px;line-height:26px;font-weight:700}
.phone[dir="rtl"] .sechead h2{line-height:34px}
.rowi{display:flex;align-items:center;gap:12px;min-height:64px;padding:10px 16px;width:100%;background:transparent;border:0;text-align:start;color:var(--c-ink)}
.rowi+.rowi,.divs>*+*{border-top:1px solid var(--c-line)}
.rowi .grow,.grow{flex:1;min-width:0}
.rt{font-size:16px;line-height:22px;font-weight:600}
.phone[dir="rtl"] .rt{line-height:28px}
.tile{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:16px}
.t-bill{background:var(--c-primary-soft);color:var(--c-primary-strong)}
.t-trip{background:var(--c-wait-bg);color:var(--c-wait-fg)}
.t-neutral{background:var(--c-fill);color:var(--c-ink)}
.avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none;font-weight:700;font-size:16px;background:var(--c-primary-soft);color:var(--c-primary-strong)}
.avatar.host{background:var(--c-primary);color:var(--c-on-primary)}
.avatar.sm{width:32px;height:32px;font-size:14px}
.chip{display:inline-flex;align-items:center;gap:4px;font-size:12px;line-height:16px;font-weight:700;padding:3px 10px;border-radius:var(--r-pill);white-space:nowrap}
.phone[dir="rtl"] .chip{line-height:20px}
.chip svg{width:14px;height:14px;stroke-width:2.4}
.c-wait{background:var(--c-wait-bg);color:var(--c-wait-fg)}
.c-owed{background:var(--c-owed-bg);color:var(--c-owed-fg)}
.c-paid{background:var(--c-paid-bg);color:var(--c-paid-fg)}
.c-bad{background:var(--c-bad-bg);color:var(--c-bad-fg)}
.c-info{background:var(--c-primary-soft);color:var(--c-primary-strong)}
.tag{display:inline-block;font-size:12px;line-height:16px;font-weight:700;padding:1px 8px;border-radius:var(--r-pill);background:var(--c-primary-soft);color:var(--c-primary-strong);vertical-align:1px}
.tag.free{background:var(--c-paid-bg);color:var(--c-paid-fg)}
.tag.fixed{background:var(--c-wait-bg);color:var(--c-wait-fg)}

/* ===== Chips (choice) ===== */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips.scrollx{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;margin-inline:-16px;padding-inline:16px}
.chips.scrollx::-webkit-scrollbar{display:none}
.fchip{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border-radius:var(--r-pill);border:1.5px solid var(--c-field);background:var(--c-surface);color:var(--c-ink);font-size:15px;font-weight:600;white-space:nowrap;flex:none}
.fchip[aria-pressed="true"],.fchip[aria-checked="true"]{background:var(--c-primary-soft);border-color:var(--c-primary-strong);color:var(--c-primary-strong)}
.fchip svg{width:18px;height:18px}
.fchip.add{border-style:dashed;color:var(--c-primary-strong)}
.fchip.sm{padding:0 12px;font-size:14px}
.fchip:active{transform:scale(.96)}
.fchip[aria-pressed="true"] .ck,.fchip[aria-checked="true"] .ck{animation:check var(--dur-success) var(--ease-settle)}

/* ===== Fields ===== */
.field{display:flex;flex-direction:column;gap:6px}
.field label,.flabel{font-size:14px;line-height:20px;font-weight:600;color:var(--c-ink)}
.phone[dir="rtl"] .field label,.phone[dir="rtl"] .flabel{line-height:26px}
.field .hint{font-size:14px;line-height:20px;color:var(--c-ink2)}
.phone[dir="rtl"] .field .hint{line-height:26px}
.inp,.field input,.field textarea,.field select{width:100%;min-height:52px;padding:10px 14px;border:1.5px solid var(--c-field);border-radius:var(--r-md);background:var(--c-surface);color:var(--c-ink);font:inherit;font-size:16px}
.field textarea{min-height:110px;resize:none;line-height:22px}
.phone[dir="rtl"] .field textarea{line-height:28px}
.field input:focus,.field textarea:focus{outline:var(--focus-ring) solid var(--c-focus);outline-offset:1px}
.field.err input,.field.err textarea{border-color:var(--c-bad-line)}
.field .errt{display:flex;gap:6px;align-items:flex-start;font-size:14px;line-height:20px;color:var(--c-bad-fg);font-weight:600}
.phone[dir="rtl"] .field .errt{line-height:26px}
.field .errt svg{width:18px;height:18px;margin-top:1px}
.field input[readonly]{background:var(--c-fill);border-color:var(--c-line);color:var(--c-ink2)}
.inp-suffix{position:relative}
.inp-suffix input{padding-inline-end:56px}
.inp-suffix .sfx{position:absolute;inset-inline-end:14px;top:50%;transform:translateY(-50%);font-size:14px;font-weight:600;color:var(--c-ink2);pointer-events:none}
.numin{width:112px!important;min-height:48px;text-align:end;direction:ltr;padding:8px 12px}
.sw{position:relative;flex:none;width:52px;height:32px;border-radius:16px;border:0;background:var(--c-field);transition:background var(--dur-press)}
.sw::after{content:"";position:absolute;top:4px;inset-inline-start:4px;width:24px;height:24px;border-radius:50%;background:#fff;transition:inset-inline-start var(--dur-press) var(--ease)}
.sw[aria-checked="true"]{background:var(--c-primary)}
.phone[data-theme="dark"] .sw[aria-checked="true"]{background:var(--c-primary)}
.sw[aria-checked="true"]::after{inset-inline-start:24px}
.swrap{display:inline-flex;align-items:center;justify-content:center;min-width:52px;min-height:44px;background:transparent;border:0;padding:0}
.seg{display:flex;background:var(--c-fill);border-radius:var(--r-pill);padding:4px;gap:4px}
.seg button{flex:1;min-height:44px;padding:0 12px;border:0;border-radius:var(--r-pill);background:transparent;color:var(--c-ink2);font-size:15px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:6px}
.seg button[aria-pressed="true"],.seg button[aria-checked="true"]{background:var(--c-surface);color:var(--c-primary-strong);box-shadow:0 1px 3px rgba(8,85,100,.25)}
.seg button svg{width:18px;height:18px}

/* ===== Banners ===== */
.banner{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--r-lg);font-size:14px;line-height:20px;background:var(--c-primary-soft);color:var(--c-primary-strong)}
.phone[dir="rtl"] .banner{line-height:26px}
.banner svg{margin-top:1px}
.banner .bt{flex:1;min-width:0}
.banner b{display:block;font-size:15px;font-weight:700}
.banner.warn{background:var(--c-wait-bg);color:var(--c-wait-fg)}
.banner.ok{background:var(--c-paid-bg);color:var(--c-paid-fg)}
.banner.bad{background:var(--c-bad-bg);color:var(--c-bad-fg)}
.banner.neutral{background:var(--c-fill);color:var(--c-ink)}
.banner .bact{display:block;margin-top:6px;margin-inline-start:-12px}
.banner.wrapact{flex-wrap:wrap}

/* ===== Sheets and toast ===== */
.sheetwrap{position:absolute;inset:0;z-index:40;display:flex;align-items:flex-end}
.scrim{position:absolute;inset:0;background:var(--c-scrim);animation:scrimin var(--dur-sheet) var(--ease-decel);border:0;padding:0;width:100%}
.sheet{position:relative;width:100%;max-height:92%;display:flex;flex-direction:column;background:var(--c-surface);border-radius:var(--r-xl) var(--r-xl) 0 0;animation:sheetin var(--dur-sheet) var(--ease-decel);padding-bottom:var(--safe-b)}
.sheet.full{height:calc(100% - var(--safe-t) - 12px)}
.grab{width:36px;height:4px;border-radius:2px;background:var(--c-field);opacity:.5;margin:10px auto 2px;flex:none}
.sheet header{display:flex;align-items:center;gap:8px;padding:6px 8px 6px 20px;flex:none}
.phone[dir="rtl"] .sheet header{padding:6px 20px 6px 8px}
.sheet header h2{flex:1;font-size:20px;line-height:26px;font-weight:700}
.phone[dir="rtl"] .sheet header h2{line-height:34px}
.sheet .sbody{flex:1;min-height:0;overflow-y:auto;padding:8px 20px 16px;overscroll-behavior:contain}
.sheet .sfoot{flex:none;padding:8px 20px 12px;display:flex;flex-direction:column;gap:8px}
.toast{position:absolute;inset-inline:16px;top:calc(var(--safe-t) + 8px);z-index:70;background:var(--c-ink);color:var(--c-bg);border-radius:var(--r-lg);padding:12px 16px;font-size:14px;line-height:20px;font-weight:600;display:flex;gap:10px;align-items:center;animation:toastin var(--dur-enter) var(--ease-decel)}
.phone[dir="rtl"] .toast{line-height:26px}
.toast span{flex:1}
.toast button{min-height:44px;min-width:44px;border:0;background:transparent;color:var(--c-primary);font-weight:700;font-size:14px;padding:0 8px}
.phone .toast button{color:var(--c-accent)}

/* ===== Nav bar (Home / Scan / Profile) ===== */
.nav{position:relative;flex:none;z-index:10;background:var(--c-surface);box-shadow:0 -1px 0 var(--c-line);padding-bottom:var(--safe-b)}
.nav ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 96px 1fr;height:64px}
.nav li{display:flex;justify-content:center}
.nav a,.nav button.nv{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:64px;min-height:56px;padding:4px 8px;font-size:12px;line-height:16px;font-weight:600;color:var(--c-ink2);border-radius:14px;align-self:center;background:transparent;border:0}
.phone[dir="rtl"] .nav a,.phone[dir="rtl"] .nav button.nv{line-height:20px}
.nav .ic{display:grid;place-items:center;width:56px;height:30px;border-radius:999px}
.nav [aria-current="page"]{color:var(--c-primary-strong)}
.nav [aria-current="page"] .ic{background:var(--c-primary-soft)}
.nav [aria-current="page"] svg{fill:currentColor;fill-opacity:.2}
.nav .scan{position:relative;justify-content:flex-end;padding:0 0 6px;min-width:80px}
.nav .scan .sb{position:absolute;top:-32px;left:50%;margin-left:-32px;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--c-primary);color:var(--c-on-primary);border:5px solid var(--c-bg);box-shadow:var(--shadow-float)}
.nav .scan .sb svg{width:28px;height:28px}

/* ===== Home (Direction A "Lagoon hero") ===== */
.hero{position:relative;overflow:hidden;background:var(--hero-bg);color:var(--hero-ink);padding:calc(var(--safe-t) + 12px) 20px 76px;border-radius:0 0 36px 36px}
.hero .mark-wm{position:absolute;inset-inline-end:-46px;top:calc(var(--safe-t) + 40px);width:210px;height:210px;opacity:.10;pointer-events:none;direction:ltr}
.hero .logo{margin-bottom:22px}
.greet{margin:0;font-size:var(--fs-display);line-height:var(--lh-display);font-weight:700;letter-spacing:-.3px}
.phone[dir="rtl"] .greet{line-height:var(--lh-display-ar);letter-spacing:0}
.slogan{margin:6px 0 0;font-size:16px;line-height:22px;color:var(--hero-ink2);max-width:300px}
.phone[dir="rtl"] .slogan{line-height:28px}
.ctas{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 16px;margin-top:-52px}
.ctas.one{grid-template-columns:1fr}
.cta{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-height:150px;padding:16px;border-radius:var(--r-xl);box-shadow:var(--shadow-card);text-align:start;border:0}
.ctas.one .cta{min-height:0;flex-direction:row;align-items:center;gap:14px;min-height:96px}
.cta .tile{width:52px;height:52px;border-radius:18px}
.cta .tile svg{width:28px;height:28px}
.cta .lbl{display:block;font-size:var(--fs-cta);line-height:var(--lh-cta);font-weight:700}
.phone[dir="rtl"] .cta .lbl{line-height:var(--lh-cta-ar)}
.cta .sub{display:block;font-size:14px;line-height:20px;font-weight:500}
.phone[dir="rtl"] .cta .sub{line-height:26px}
.cta-bill{background:var(--c-accent);color:var(--c-on-accent)}
.cta-bill .tile{background:var(--c-on-accent);color:var(--c-accent)}
.cta-trip{background:var(--c-surface);color:var(--c-ink)}
.cta-trip .tile{background:var(--c-primary);color:var(--c-on-primary)}
.cta-trip .sub{color:var(--c-ink2)}
.last{padding:28px 16px 24px}
.list{margin:8px 0 0;padding:4px 0;list-style:none;background:var(--c-surface);border-radius:var(--r-xl);box-shadow:var(--shadow-card);overflow:hidden}
.list li+li{border-top:1px solid var(--c-line);margin-inline:16px}
.list li+li .hrow{margin-inline:-16px}
.hrow{display:flex;align-items:center;gap:12px;min-height:76px;padding:12px 16px;width:100%;background:transparent;border:0;text-align:start;color:var(--c-ink)}
.hrow .tile{width:48px;height:48px}
.hrow .rmain{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.hrow .rtitle{font-size:16px;line-height:22px;font-weight:700}
.phone[dir="rtl"] .hrow .rtitle{line-height:28px}
.hrow .rev{font-size:14px;line-height:20px;color:var(--c-ink2)}
.phone[dir="rtl"] .hrow .rev{line-height:24px}
.hrow .rend{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none;text-align:end}
.hrow .amt{font-size:17px;line-height:22px}
.xs .hrow{flex-wrap:wrap;row-gap:6px;min-height:0}
.xs .hrow .tile{width:44px;height:44px}
.xs .hrow .rend{flex:1 1 100%;flex-direction:row;align-items:center;justify-content:space-between;padding-inline-start:56px;text-align:start}
.xs .greet{font-size:28px;line-height:34px}.xs[dir="rtl"] .greet{line-height:46px}
.xs .cta{padding:14px 12px;min-height:140px}.xs .cta .lbl{font-size:18px;line-height:24px}
.xs .hero{padding-inline:16px}
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:28px 24px;border-radius:var(--r-xl);border:2px dashed var(--c-line)}
.empty .tile{width:64px;height:64px;border-radius:50%}
.empty h3{font-size:18px;line-height:24px;font-weight:700;margin-top:4px}
.phone[dir="rtl"] .empty h3{line-height:32px}
.empty p{margin:0;font-size:14px;line-height:20px;color:var(--c-ink2)}
.phone[dir="rtl"] .empty p{line-height:26px}
.skel{border-radius:var(--r-md);background:linear-gradient(90deg,var(--c-fill) 25%,var(--c-line) 50%,var(--c-fill) 75%);background-size:300% 100%;animation:shimmer 1.2s linear infinite}

/* ===== Scan / reading ===== */
.srcrow{display:flex;align-items:center;gap:14px;min-height:68px;padding:10px 12px;width:100%;border:0;border-radius:var(--r-lg);background:var(--c-fill);text-align:start;color:var(--c-ink)}
.srcrow .tile{width:48px;height:48px;background:var(--c-surface);color:var(--c-primary-strong)}
.rcpgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.rcpbtn{display:flex;flex-direction:column;gap:6px;padding:8px;border-radius:var(--r-lg);border:1.5px solid var(--c-line);background:var(--c-surface);text-align:start;min-height:44px;color:var(--c-ink)}
.rcpbtn img{width:100%;height:96px;object-fit:cover;object-position:top;border-radius:var(--r-sm);background:var(--c-fill)}
.reading{position:relative;overflow:hidden;border-radius:var(--r-xl);height:260px;background:var(--c-fill)}
.reading img{width:100%;height:100%;object-fit:cover;object-position:top;opacity:.85}
.reading .line{position:absolute;inset-inline:0;top:0;height:100%;animation:scanline 1.4s var(--ease) infinite alternate}
.reading .line::after{content:"";position:absolute;inset-inline:0;bottom:0;height:4px;background:var(--c-accent);box-shadow:0 0 14px var(--c-accent)}
.prog{height:8px;border-radius:4px;background:var(--c-fill);overflow:hidden}
.prog i{display:block;height:100%;background:var(--c-primary);border-radius:4px;transition:width .5s var(--ease)}

/* ===== Step bar & bill flow ===== */
.stepbar{display:flex;align-items:center;gap:6px;padding:0 16px 8px}
.stepbar button,.stepbar span.sp{flex:1;height:8px;border-radius:4px;background:var(--c-fill);border:0;padding:0;position:relative}
.stepbar button::before{content:"";position:absolute;inset:-18px 0}
.stepbar .done{background:var(--c-primary)}
.stepbar span.sp.cur{background:var(--c-primary-strong)}
.itemrow{display:flex;align-items:flex-start;gap:8px;padding:10px 6px 10px 16px;min-height:60px}
.phone[dir="rtl"] .itemrow{padding:10px 16px 10px 6px}
.itemrow+.itemrow{border-top:1px solid var(--c-line)}
.itemrow .nm{font-size:16px;line-height:22px;font-weight:600}
.phone[dir="rtl"] .itemrow .nm{line-height:28px}
.itemrow .det{font-size:14px;line-height:20px;color:var(--c-ink2)}
.phone[dir="rtl"] .itemrow .det{line-height:24px}
.qty{display:inline-block;font-size:12px;line-height:16px;font-weight:700;padding:1px 7px;border-radius:var(--r-pill);background:var(--c-fill);color:var(--c-ink);margin-inline-end:6px}
.itemmain{flex:1;min-width:0;background:transparent;border:0;text-align:start;padding:0;min-height:44px;color:var(--c-ink)}
.itemprice{text-align:end;flex:none;padding-top:1px}
.chgrow{display:flex;align-items:center;gap:12px;min-height:64px;padding:8px 16px}
.chgrow+.chgrow,.chgrow+.fold,.fold+.chgrow{border-top:1px solid var(--c-line)}
.chgrow .lbl{flex:1;min-width:0;font-size:16px;font-weight:600}
.chgrow .calc{font-size:13px;line-height:18px;color:var(--c-ink2);font-weight:500;display:block}
.fold{padding:0}
.foldhead{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:8px 16px;background:transparent;border:0;text-align:start;color:var(--c-ink)}
.foldhead .chev{transition:transform var(--dur-press) var(--ease)}
.foldhead[aria-expanded="true"] .chev{transform:rotate(180deg)}
.foldbody{padding:0 16px 14px;display:flex;flex-direction:column;gap:12px;animation:enter var(--dur-enter) var(--ease-decel)}
.matchrow{display:flex;align-items:center;justify-content:space-between;gap:8px}
.strip{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding:0 16px 2px}
.strip::-webkit-scrollbar{display:none}
.stile{flex:none;min-width:92px;background:var(--c-fill);border-radius:var(--r-md);padding:6px 10px;display:flex;flex-direction:column;gap:0;min-height:44px;transition:background var(--dur-press)}
.stile .sn{font-size:12px;line-height:16px;font-weight:600;color:var(--c-ink2)}
.stile .sv{font-size:15px;line-height:20px;font-weight:700}
.stile.flash{background:var(--c-primary-soft)}
.asgrow{padding:12px 16px;display:flex;flex-direction:column;gap:8px}
.asgrow+.asgrow{border-top:1px solid var(--c-line)}
.asgrow .top{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.asgrow.need{box-shadow:inset 3px 0 0 var(--c-wait-fg)}
[dir="rtl"] .asgrow.need{box-shadow:inset -3px 0 0 var(--c-wait-fg)}
.pcard{padding:12px 16px}
.pcard+.pcard{border-top:1px solid var(--c-line)}
.pcard .head{display:flex;align-items:center;gap:12px;width:100%;background:transparent;border:0;padding:0;min-height:48px;text-align:start;color:var(--c-ink)}
.bkdn{padding:8px 0 0 52px;display:flex;flex-direction:column;gap:4px}
.phone[dir="rtl"] .bkdn{padding:8px 52px 0 0}
.bkdn div{display:flex;justify-content:space-between;gap:8px;font-size:14px;line-height:20px;color:var(--c-ink2)}
.bkdn div b{color:var(--c-ink);font-weight:600}
.mrow{display:flex;align-items:center;gap:12px;min-height:56px;padding:6px 0}
.mrow+.mrow{border-top:1px solid var(--c-line)}
.chk{width:24px;height:24px;border-radius:var(--r-xs);border:2px solid var(--c-field);display:grid;place-items:center;flex:none;color:transparent;background:var(--c-surface)}
.chk.on{background:var(--c-primary);border-color:var(--c-primary);color:var(--c-on-primary)}
.chk svg{width:16px;height:16px;stroke-width:3}
.linkbox{display:flex;align-items:center;gap:8px;background:var(--c-fill);border-radius:var(--r-md);padding:10px 12px;font-size:14px;direction:ltr;word-break:break-all}

/* ===== Board ===== */
.progcard{background:var(--c-surface);border-radius:var(--r-xl);box-shadow:var(--shadow-card);padding:16px;display:flex;flex-direction:column;gap:10px}
.meter{display:flex;height:12px;border-radius:6px;overflow:hidden;background:var(--c-fill)}
.meter i{display:block;height:100%}
.meter .m-paid{background:var(--c-ok)}
.meter .m-wait{background:repeating-linear-gradient(45deg,var(--c-accent) 0 6px,#d99a1c 6px 12px)}
.attn{background:var(--c-surface);border-radius:var(--r-xl);box-shadow:var(--shadow-card),inset 4px 0 0 var(--c-accent);padding:16px;display:flex;flex-direction:column;gap:12px}
[dir="rtl"] .attn{box-shadow:var(--shadow-card),inset -4px 0 0 var(--c-accent)}
.prow{display:flex;align-items:center;gap:12px;padding:12px 16px;flex-wrap:wrap;min-height:68px}
.prow+.prow{border-top:1px solid var(--c-line)}
.prow .pm{flex:1 1 140px;min-width:0}
.prow .pe{display:flex;align-items:center;gap:8px;flex:0 1 auto;flex-wrap:wrap;justify-content:flex-end}
.xs .prow .pe{flex:1 1 100%;justify-content:space-between;padding-inline-start:52px}
.prevrow{display:flex;justify-content:space-between;gap:8px;padding:8px 0;font-size:15px;line-height:20px}
.prevrow+.prevrow{border-top:1px solid var(--c-line)}
.prevrow .d{font-weight:700}

/* ===== History ===== */
.ovcard{background:var(--c-primary-strong);color:#fff;border-radius:var(--r-xl);padding:16px;display:grid;grid-template-columns:1fr 1fr;gap:12px;box-shadow:var(--shadow-card)}
.phone[data-theme="dark"] .ovcard{background:#0E3640;color:var(--c-ink)}
.ovcard .k{font-size:13px;line-height:18px;color:#DDF1F4;font-weight:500}
.phone[data-theme="dark"] .ovcard .k{color:var(--c-ink2)}
.ovcard .v{font-size:20px;line-height:26px;font-weight:700}
.ovcard .unit{color:#DDF1F4}
.mon{font-size:14px;line-height:20px;font-weight:700;color:var(--c-ink2);padding:16px 4px 6px;text-transform:none}
.searchbox{display:flex;align-items:center;gap:8px;background:var(--c-fill);border-radius:var(--r-pill);padding:0 14px;min-height:48px}
.searchbox input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:16px;color:var(--c-ink);min-height:44px;outline-offset:6px}
.searchbox svg{color:var(--c-ink2)}

/* ===== Profile ===== */
.prof-head{display:flex;align-items:center;gap:14px;padding:calc(var(--safe-t) + 14px) 20px 18px}
.bigav{width:64px;height:64px;border-radius:50%;background:var(--c-primary);color:var(--c-on-primary);display:grid;place-items:center;font-size:28px;font-weight:700;flex:none}
.badge{min-width:22px;height:22px;border-radius:11px;padding:0 6px;background:var(--c-primary);color:var(--c-on-primary);font-size:12px;font-weight:700;display:inline-grid;place-items:center}
details.faq{border-top:1px solid var(--c-line)}
details.faq:first-of-type{border-top:0}
details.faq summary{list-style:none;display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 16px;font-weight:600;cursor:pointer}
details.faq summary::-webkit-details-marker{display:none}
details.faq[open] summary svg{transform:rotate(180deg)}
details.faq p{margin:0;padding:0 16px 14px;font-size:15px;line-height:22px;color:var(--c-ink2)}
.phone[dir="rtl"] details.faq p{line-height:28px}
.counter{font-size:13px;color:var(--c-ink2);text-align:end;direction:ltr}
.msg{padding:14px 16px}
.msg+.msg{border-top:1px solid var(--c-line)}
.msg.unread{box-shadow:inset 4px 0 0 var(--c-primary)}
[dir="rtl"] .msg.unread{box-shadow:inset -4px 0 0 var(--c-primary)}

/* ===== Trips ===== */
.tabs{display:flex;gap:4px;background:var(--c-fill);border-radius:var(--r-pill);padding:4px;margin:0 16px}
.tabs button{flex:1;min-height:44px;border:0;border-radius:var(--r-pill);background:transparent;font-size:15px;font-weight:600;color:var(--c-ink2)}
.tabs button[aria-selected="true"]{background:var(--c-surface);color:var(--c-primary-strong);box-shadow:0 1px 3px rgba(8,85,100,.25)}
.poscard{border-radius:var(--r-xl);padding:16px;display:flex;flex-direction:column;gap:4px;background:var(--c-primary-strong);color:#fff;box-shadow:var(--shadow-card)}
.phone[data-theme="dark"] .poscard{background:#0E3640;color:var(--c-ink)}
.poscard .unit{color:#DDF1F4}
.phone[data-theme="dark"] .poscard .unit{color:var(--c-ink2)}
.bigamt{width:100%;border:0;background:transparent;font:inherit;font-size:44px;line-height:52px;font-weight:700;color:var(--c-ink);text-align:center;direction:ltr;min-height:60px;outline-offset:4px}
.dayhd{font-size:14px;line-height:20px;font-weight:700;color:var(--c-ink2);padding:14px 4px 6px}
.exrow{display:flex;align-items:center;gap:12px;padding:10px 16px;min-height:68px;width:100%;background:transparent;border:0;text-align:start;color:var(--c-ink)}
.exrow+.exrow{border-top:1px solid var(--c-line)}
.exrow .tile{width:44px;height:44px;border-radius:50%}
.pay-line{display:flex;align-items:center;gap:10px;padding:12px 16px;flex-wrap:wrap}
.pay-line+.pay-line{border-top:1px solid var(--c-line)}
.pay-line .who{flex:1 1 150px;min-width:0}
.balrow{display:flex;align-items:center;gap:12px;padding:10px 16px;min-height:60px}
.balrow+.balrow{border-top:1px solid var(--c-line)}
.pos{color:var(--c-paid-fg)}.neg{color:var(--c-wait-fg)}
.phone[data-theme="dark"] .pos{color:var(--c-paid-fg)}

/* ===== Friend page (always light, own shell) ===== */
.fhead{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:calc(var(--safe-t) + 8px) 16px 8px}
.fhead .globe{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:var(--r-pill);background:var(--c-surface);box-shadow:0 0 0 1px var(--c-line);font-size:14px;font-weight:600;color:var(--c-ink)}
.fhero{background:var(--c-primary-strong);color:#fff;border-radius:var(--r-xl);padding:20px;display:flex;flex-direction:column;gap:4px;box-shadow:var(--shadow-card)}
.fhero .unit{color:#DDF1F4}
.namerow{display:flex;align-items:center;gap:12px;min-height:64px;padding:10px 16px;width:100%;border:0;background:transparent;text-align:start;color:var(--c-ink)}
.namerow+.namerow{border-top:1px solid var(--c-line)}
.namerow[disabled]{color:var(--c-ink2)}
.mcard{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:var(--r-lg);border:1.5px solid var(--c-field);background:var(--c-surface);text-align:start;width:100%;color:var(--c-ink)}
.mcard[aria-checked="true"]{border-color:var(--c-primary-strong);border-width:2px;background:var(--c-primary-soft)}
.mhead{display:flex;align-items:center;gap:12px}
.radio{width:24px;height:24px;border-radius:50%;border:2px solid var(--c-field);display:grid;place-items:center;flex:none;background:var(--c-surface)}
.mcard[aria-checked="true"] .radio{border-color:var(--c-primary-strong)}
.mcard[aria-checked="true"] .radio::after{content:"";width:12px;height:12px;border-radius:50%;background:var(--c-primary-strong)}
.valbox{display:flex;align-items:center;gap:8px;border:2px dashed var(--c-primary-strong);border-radius:var(--r-md);padding:10px 12px;background:var(--c-surface)}
.valbox .v{flex:1;min-width:0;font-size:20px;line-height:26px;font-weight:700;direction:ltr;text-align:start;word-break:break-all}
.copybtn{min-height:44px;min-width:44px;padding:0 12px;border-radius:var(--r-pill);border:1.5px solid var(--c-primary-strong);background:transparent;color:var(--c-primary-strong);font-weight:700;font-size:14px;display:inline-flex;align-items:center;gap:6px}
.steps{margin:0;padding-inline-start:20px;font-size:14px;line-height:20px;color:var(--c-ink2)}
.phone[dir="rtl"] .steps{line-height:26px}
.getcard{display:flex;gap:12px;align-items:center;padding:14px 16px;border-radius:var(--r-xl);background:var(--c-fill)}
.itemrow.ro{padding-inline:16px}

/* ===== Misc ===== */
.divd{height:1px;background:var(--c-line);margin:0}
.rowbtn{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:8px 16px;background:transparent;border:0;text-align:start;color:var(--c-ink)}
.rowbtn+.rowbtn,.rowbtn+.divs{border-top:1px solid var(--c-line)}
.wm-note{font-size:12px;line-height:16px;color:var(--c-ink2)}
.pill-hint{display:inline-flex;gap:6px;align-items:center}
.dots{display:inline-flex;gap:3px;vertical-align:middle}.dots i{width:5px;height:5px;border-radius:50%;background:currentColor;animation:beat .9s infinite}.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
.offline{background:var(--c-fill);color:var(--c-ink);border-radius:var(--r-lg);padding:10px 14px;font-size:14px}
.xs .btn{font-size:16px}
/* prototype menu */
.pmenu-btn{display:none;position:absolute;z-index:90;inset-inline-end:0;top:38%;width:22px;height:56px;margin-top:-28px;border-radius:12px 0 0 12px;border:0;background:rgba(15,31,36,.78);color:#fff;place-items:center;font-size:12px;font-weight:700;opacity:.82}
[dir="rtl"] .pmenu-btn{border-radius:0 12px 12px 0;inset-inline-end:auto;inset-inline-start:0}
@media (max-width:520px){.pmenu-btn{display:grid}} /* phones only; the panel above the frame does this on wider screens */
.pmenu{position:absolute;inset:0;z-index:100;background:var(--c-bg);color:var(--c-ink);display:flex;flex-direction:column}
.pmenu .sbody{flex:1;overflow-y:auto;padding:calc(var(--safe-t) + 8px) 16px 24px}
.pmenu h3{font-size:13px;line-height:18px;text-transform:uppercase;letter-spacing:.5px;color:var(--c-ink2);margin:18px 0 6px}
.phone[dir="rtl"] .pmenu h3{letter-spacing:0}
.pmenu .jl{display:flex;flex-wrap:wrap;gap:8px}
.pmenu .jl button{min-height:44px;padding:0 14px;border-radius:var(--r-pill);border:1.5px solid var(--c-field);background:var(--c-surface);color:var(--c-ink);font-size:14px;font-weight:600}
.pmenu .jl button.cur{background:var(--c-primary-soft);border-color:var(--c-primary-strong);color:var(--c-primary-strong)}
/* date field + calendar sheet */
.datefield{width:100%;min-height:52px;display:flex;align-items:center;gap:10px;padding:10px 14px;border:1.5px solid var(--c-field);border-radius:var(--r-md);background:var(--c-surface);color:var(--c-ink);font:inherit;font-weight:600;text-align:start}
.datefield svg{width:20px;height:20px;flex:none;color:var(--c-primary-strong)}
.datefield.unset{color:var(--c-ink3);font-weight:500}
.field.err .datefield{border-color:var(--c-bad-line)}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.cal-head b{font-size:17px}
.cal-prev svg{transform:scaleX(-1)}[dir="rtl"] .cal-prev svg{transform:none}[dir="rtl"] .cal-next svg{transform:scaleX(-1)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px 0;text-align:center}
.cal-wd{font-size:13px;line-height:28px;font-weight:600;color:var(--c-ink2)}
.cal-d{height:44px;border:0;background:transparent;color:var(--c-ink);font:inherit;font-weight:600;border-radius:var(--r-pill)}
.cal-d.rng{background:var(--c-primary-soft);border-radius:0}
.cal-d.today{box-shadow:inset 0 0 0 1.5px var(--c-primary)}
.cal-d.sel{background:var(--c-primary);color:var(--c-on-primary);border-radius:var(--r-pill)}
.cal-d:disabled{color:var(--c-ink3);opacity:.5}
.xs .datefield{padding:10px;gap:6px;font-size:14px;white-space:nowrap}.xs .datefield svg{width:18px;height:18px}