/* ParcelMatch self-hosted type. Not loaded from fonts.googleapis.com:
   that host is blocked in China and would silently fall back to a system face
   for our largest user base. Regenerate with scratchpad/getfonts.php. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600 800;font-display:swap;src:url(fonts/manrope-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600 800;font-display:swap;src:url(fonts/manrope-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/plexarabic-arabic.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
:root{
  --bg:#F5F6FB;--surface:#FFFFFF;--ink:#14173A;--slate:#6E7191;--line:#E6E7F2;
  --indigo:#B05C38;--indigo-deep:#A85A3F;--mint:#06D6A0;--mint-ink:#059c76;
  --coral:#FF6B5C;--coral-ink:#e5503f;
  --disp:Calibri,'Carlito',system-ui,sans-serif;--body:Calibri,'Carlito',system-ui,sans-serif;--mono:'IBM Plex Mono',ui-monospace,monospace;
  --shadow:0 12px 30px -16px rgba(20,23,58,.3);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:#E9EBF5;color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased}
#app{max-width:440px;margin:0 auto;min-height:100vh;background:var(--bg);display:flex;flex-direction:column;position:relative;box-shadow:0 0 60px -20px rgba(20,23,58,.35)}
.view{flex:1;display:flex;flex-direction:column;padding:22px 20px 100px;overflow-y:auto}
.center{justify-content:center}
.hidden{display:none!important}
.title{font-family:var(--disp);font-weight:700;letter-spacing:0;font-size:26px;line-height:1.05;margin:6px 0}
.sub{font-size:14px;color:var(--slate);line-height:1.55}
.mono{font-family:var(--mono)}.ind{color:var(--indigo)}.mint{color:var(--mint-ink)}.crl{color:var(--coral-ink)}.mut{color:var(--slate)}
.row{display:flex;gap:10px}.col{display:flex;flex-direction:column;gap:12px}.spacer{flex:1}

/* route strip — code big, city under */
.route{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;align-items:center;gap:10px;position:relative}
.route::before,.route::after{content:"";position:absolute;width:18px;height:18px;background:var(--bg);border-radius:50%;top:50%;transform:translateY(-50%)}
.route::before{left:-9px}.route::after{right:-9px}
.iata{font-family:var(--mono);font-weight:600;font-size:18px;line-height:1}
.city{font-size:9px;color:var(--slate);text-transform:uppercase;letter-spacing:.08em;margin-top:2px}
.arc{flex:1;height:20px}.arc svg{width:100%;height:100%;overflow:visible}

/* account (Me) grouped settings */
.mesec{font-size:10.5px;color:#9AA0B8;font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;margin:2px 4px 6px}
.megrp{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:14px}
.merow{display:flex;align-items:center;gap:11px;padding:13px 14px;border-bottom:1px solid #F1F2F8;font-size:14px;cursor:pointer}
.merow:last-child{border-bottom:0}
.meic{width:28px;height:28px;border-radius:8px;background:#EEF0FB;color:#A85A3F;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.meval{margin-left:auto;color:#9AA0B8;font-size:12.5px;display:flex;align-items:center;gap:5px}
/* collapsible account sections (droplist -> sublist) */
.acc{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:11px}
.acch{display:flex;align-items:center;gap:11px;padding:14px;font-size:15px;font-weight:700;color:#14173A;cursor:pointer;user-select:none}
.accv{margin-left:auto;transition:transform .2s;display:flex}
.acc.open .accv{transform:rotate(90deg)}
.accb{max-height:0;overflow:hidden;transition:max-height .28s ease}
.acc.open .accb{max-height:1600px}
.asub{display:flex;align-items:center;gap:11px;padding:12px 14px 12px 15px;border-top:1px solid #F1F2F8;font-size:14px;color:#2f3358;cursor:pointer}
.asubic{width:26px;color:#B05C38;display:flex;justify-content:center;flex-shrink:0}
.asubv{margin-left:auto;color:#9AA0B8;font-size:12.5px;display:flex;align-items:center;gap:5px}
.pwpanel{max-height:0;overflow:hidden;transition:max-height .28s ease;background:#FAFAFE;border-top:1px solid #F1F2F8}
.pwpanel.open{max-height:760px}
.pwpanel .inr{padding:11px 15px 14px}
.pwseg{display:flex;gap:7px;margin:8px 0}
.pwseg button{flex:1;border:1px solid #E2E3EE;background:#fff;border-radius:9px;padding:9px;font-size:13px;cursor:pointer;color:#3A3E63}
.pwseg button.on{border-color:var(--indigo);background:#F1EFFF;color:#A85A3F;font-weight:700}
/* rating tag/flag chips */
.rchip{font-size:12px;padding:5px 10px;border-radius:20px;border:1px solid var(--line);color:#4a4f6b;background:#fff;cursor:pointer;user-select:none}
.rchip.on{background:rgba(204,120,92,.10);border-color:var(--indigo);color:var(--indigo-deep);font-weight:700}
.rchip.neg{border-color:#F0997B;color:#993C1D;background:#FAECE7}
.rchip.neg.on{background:#F5C4B3;border-color:#D85A30;color:#712B13}
/* controls */
.btn{border:0;border-radius:12px;padding:14px;font-family:var(--body);font-weight:600;font-size:15px;width:100%;cursor:pointer;transition:transform .05s}
.btn:active{transform:scale(.985)}
.btn-p{background:var(--indigo);color:#fff;box-shadow:0 8px 18px -8px rgba(204,120,92,.6)}
.btn-g{background:#fff;color:var(--indigo);border:1px solid var(--line)}
.btn-sm{width:auto;padding:9px 16px;font-size:13px;border-radius:10px}
.field{background:#fff;border:1px solid var(--line);border-radius:11px;padding:9px 13px;position:relative}
.field label{font-size:9px;color:#9aa0b8;font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;display:block;margin-bottom:4px}
.field input,.field select{border:0;outline:0;width:100%;font-family:var(--body);font-size:15px;color:var(--ink);background:transparent}
.field .guide{font-size:9.5px;color:#b3b8ca;margin-top:4px}
.field.err{border-color:var(--alert);box-shadow:0 0 0 3px var(--alert-bg);animation:shake .3s}
.field.err label{color:var(--alert)}
.errmsg{font-size:10.5px;color:var(--alert);margin-top:5px;display:flex;gap:5px;align-items:center}
/* Live mismatch state on a field (e.g. confirm-password): red border, no shake. */
.field.nomatch{border-color:var(--alert);box-shadow:0 0 0 3px var(--alert-bg)}
.field.nomatch label{color:var(--alert)}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

/* country select for phone */
.phonewrap{display:flex;gap:8px}
.ccsel{width:118px}
.ccsel select{font-family:var(--body);font-weight:600}

/* city-first airport picker */
.picker{position:relative}
.dd{position:fixed;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 44px -14px rgba(20,23,58,.5);overflow-y:auto;z-index:85;max-height:42vh}
.dd .cityhdr{padding:9px 12px 4px;font-size:14px;font-weight:700}
.dd .cityhdr .cc{font-size:10px;color:var(--slate);font-weight:400;margin-left:5px}
.dd .apt{padding:9px 12px 9px 22px;font-size:13px;display:flex;align-items:center;gap:8px;border-top:1px solid var(--line);color:#3a3e63;cursor:pointer}
.dd .apt:hover,.dd .apt.hi{background:rgba(204,120,92,.06)}
.dd .apt .code{font-family:var(--mono);color:var(--slate);font-size:11px;margin-left:auto}
.dd .single{padding:10px 12px;font-size:13px;display:flex;align-items:center;gap:8px;border-top:1px solid var(--line);cursor:pointer}
.dd .single:hover{background:rgba(204,120,92,.06)}
.dd .single .name{font-weight:600}.dd .single .cc{color:var(--slate);font-size:11px}
.dd .single .code{font-family:var(--mono);color:var(--slate);font-size:11px;margin-left:auto}
.dd .empty{padding:12px;color:var(--slate);font-size:12px;text-align:center}
.chosen{display:flex;align-items:baseline;gap:6px}
.chosen .cname{font-size:15px;font-weight:600}.chosen .ccode{font-family:var(--mono);font-size:11px;color:var(--slate)}

/* segmented envelope/parcel */
.seg{display:flex;background:#fff;border:1px solid var(--line);border-radius:11px;padding:3px;gap:3px}
.seg button{flex:1;border:0;background:none;padding:11px;border-radius:8px;font-family:var(--body);font-weight:600;font-size:14px;color:var(--slate);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px}
.seg button.on{background:var(--indigo);color:#fff}
.seg .ic{font-size:20px}

.pill{font-family:var(--mono);font-size:11px;padding:5px 11px;border-radius:16px;display:inline-flex;gap:5px;align-items:center}
.pill-v{background:rgba(6,214,160,.14);color:var(--mint-ink);border:1px solid rgba(6,214,160,.4)}
.pill-p{background:var(--alert-bg);color:var(--alert);border:1px solid var(--alert-bd)}
.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px;box-shadow:var(--shadow)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:#4A4E73;cursor:pointer}
.check input{margin-top:2px;width:18px;height:18px;accent-color:var(--indigo)}
.money{font-family:var(--disp);font-weight:800;font-size:36px;line-height:1}
.money .c{font-family:var(--mono);font-size:15px;color:var(--slate);font-weight:500}
.banner{background:rgba(255,107,92,.1);border:1px solid rgba(255,107,92,.35);border-radius:11px;padding:11px 13px;font-size:13px;color:#b23c2e;display:flex;justify-content:space-between;align-items:center;gap:10px}
.banner-i{background:rgba(204,120,92,.08);border-color:rgba(204,120,92,.3);color:var(--indigo)}
/* Type-aware alert banner: drops from the top, above sheets (z 200 > sheet 90).
   Colour follows the message kind — red error / green success / indigo info. */
.toast{position:fixed;top:calc(env(safe-area-inset-top,0px) + 12px);left:50%;
  transform:translateX(-50%) translateY(-150%);width:calc(100% - 26px);max-width:414px;z-index:200;
  display:flex;align-items:center;gap:11px;padding:12px 14px;border-radius:14px;
  font-size:13px;font-weight:500;line-height:1.35;text-align:left;
  box-shadow:0 14px 32px -10px rgba(25,22,39,.45);opacity:0;
  transition:transform .34s cubic-bezier(.2,.9,.2,1),opacity .3s}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}
.toast.out{transform:translateX(-50%) translateY(-150%);opacity:0}
.toast .tic{flex:none;width:28px;height:28px;border-radius:9px;display:flex;align-items:center;justify-content:center}
.toast .tmsg{flex:1;min-width:0}
.toast.err{background:#FCECEA;color:#8f221c;border:1px solid #F3C7C2}
.toast.err .tic{background:#F5D4D0;color:#C62F27}
.toast.ok{background:#E4F6EF;color:#0c5f47;border:1px solid #BEE7D6}
.toast.ok .tic{background:#CDEEE0;color:#0F6E56}
.toast.info{background:#F5EBE4;color:#3b32a6;border:1px solid #D6D2F6}
.toast.info .tic{background:#DCD8F8;color:#B05C38}
[dir="rtl"] .toast{text-align:right}
.dots{display:flex;gap:6px;justify-content:center;margin:16px 0}
.dot{width:7px;height:7px;border-radius:50%;background:#c9cbe0}
.dot.on{background:var(--indigo);width:20px;border-radius:6px}

/* orders tabs + statuses */
.tabs{display:flex;gap:6px;overflow-x:auto;margin-bottom:12px;padding-bottom:2px}
.tabs button{border:0;background:#fff;border:1px solid var(--line);color:var(--slate);font-family:var(--body);font-size:12px;font-weight:600;padding:8px 13px;border-radius:16px;white-space:nowrap;cursor:pointer}
.tabs button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.st{font-family:var(--mono);font-size:9px;padding:3px 8px;border-radius:14px}
.st-pending{background:rgba(240,165,0,.14);color:#b57d00;border:1px solid rgba(240,165,0,.3)}
.st-active{background:rgba(204,120,92,.12);color:var(--indigo);border:1px solid rgba(204,120,92,.28)}
.st-completed{background:rgba(6,214,160,.14);color:var(--mint-ink);border:1px solid rgba(6,214,160,.4)}
.st-cancelled{background:rgba(110,113,145,.14);color:var(--slate);border:1px solid rgba(110,113,145,.3)}

/* BIGGER bottom nav + central round Post */
.navwrap{position:absolute;bottom:0;left:0;right:0;height:74px}
.navbar{position:absolute;bottom:0;left:0;right:0;height:66px;background:#fff;border-top:1px solid var(--line);display:flex;align-items:center;padding:0 6px max(0px,env(safe-area-inset-bottom))}
.navbar .item{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;font-family:var(--body);font-size:11px;font-weight:700;color:var(--slate);cursor:pointer;background:none;border:0}
.navbar .item .ic{font-size:21px;line-height:1}
.navbar .item .ic.cur{font-family:var(--body);font-weight:700;font-size:22px}
.navbar .item .person{width:22px;height:22px}
.navbar .item.on{color:var(--indigo)}
.navbar .gap{flex:0 0 64px}
.fab{position:absolute;bottom:38px;left:50%;transform:translateX(-50%);width:56px;height:56px;border-radius:50%;background:var(--indigo);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 12px 24px -6px rgba(204,120,92,.75);border:5px solid var(--bg);z-index:6;cursor:pointer}
.fab .plus{display:block;margin-bottom:2px}
.fab .lbl{font-family:var(--body);font-size:8px;font-weight:700;letter-spacing:.04em}

/* login method tabs */
.mtabs{display:flex;background:#fff;border:1px solid var(--line);border-radius:11px;padding:3px;gap:3px;margin-bottom:12px}
.mtabs button{flex:1;border:0;background:none;padding:10px;border-radius:8px;font-family:var(--body);font-weight:700;font-size:14px;color:var(--slate);cursor:pointer}
.mtabs button.on{background:var(--indigo);color:#fff}

/* dropdown popup rows must state their font explicitly */
select,option{font-family:Calibri,'Carlito',system-ui,sans-serif;font-size:15px;color:var(--ink)}

/* ===== v9: unified icon system ===== */
.ic-svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-5px}
.ic-sm{width:17px;height:17px;vertical-align:-3px}

/* ===== v9: splash ===== */
.splash{position:fixed;inset:0;background:var(--indigo);display:flex;align-items:center;justify-content:center;z-index:100;flex-direction:column}
.splash .ring{width:74px;height:74px;border-radius:50%;border:5px solid rgba(255,255,255,.25);border-top-color:#fff;animation:spinup 1.15s cubic-bezier(.6,.1,.4,.9) forwards}
.splash .logoTxt{color:#fff;font-weight:700;font-size:13px;letter-spacing:.16em;margin-top:20px;animation:fadeTxt 1.15s ease forwards}
@keyframes spinup{0%{transform:rotate(0)}55%{transform:rotate(720deg) scale(1)}72%{transform:rotate(770deg) scale(1.12)}100%{transform:rotate(790deg) scale(28);opacity:0}}
@keyframes fadeTxt{0%,55%{opacity:1}80%,100%{opacity:0}}
.splash.done{animation:splashFade .3s ease forwards}
@keyframes splashFade{to{opacity:0;visibility:hidden}}
.enter .card,.enter .route,.enter .field,.enter .banner{animation:cardIn .55s cubic-bezier(.2,.8,.2,1) both}
.enter .card:nth-child(2){animation-delay:.07s}.enter .card:nth-child(3){animation-delay:.14s}.enter .card:nth-child(4){animation-delay:.21s}
@keyframes cardIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ===== v9: bottom bar active state (dark icon + top indigo line) ===== */
.navbar .item{color:#A9AFC6}
.navbar .item .topline{position:absolute;top:0;left:22%;right:22%;height:3px;border-radius:0 0 4px 4px;background:transparent;transition:background .25s}
.navbar .item{position:relative}
.navbar .item.on{color:var(--ink)}
.navbar .item.on .topline{background:var(--indigo)}
.navbar .item .ic-svg{transition:stroke .25s}
.navbar .item .cur{color:#A9AFC6;transition:color .25s}
.navbar .item.on .cur{color:var(--ink)}

/* ===== v9: country bottom sheet ===== */
.dim{position:fixed;inset:0;background:rgba(20,23,58,.35);z-index:80;animation:dimIn .25s ease both}
@keyframes dimIn{from{opacity:0}to{opacity:1}}
.sheet{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:440px;height:66%;background:#fff;border-radius:20px 20px 0 0;z-index:90;display:flex;flex-direction:column;box-shadow:0 -14px 40px -18px rgba(20,23,58,.5);animation:sheetUp .4s cubic-bezier(.2,.8,.2,1) both}
@keyframes sheetUp{from{transform:translate(-50%,100%)}to{transform:translate(-50%,0)}}
.grab{width:40px;height:4px;border-radius:4px;background:#D9DBEB;margin:10px auto 6px;flex:none}
.sheet .ssearch{margin:6px 14px 10px;background:var(--bg);border:1px solid var(--line);border-radius:11px;padding:10px 12px;display:flex;gap:8px;align-items:center;flex:none}
.sheet .ssearch input{border:0;outline:0;background:none;font-family:var(--body);font-size:15px;flex:1;color:var(--ink)}
.clist{flex:1;overflow-y:auto;padding:0 8px 12px}
.crow{display:flex;align-items:center;gap:12px;padding:12px;border-bottom:1px solid var(--line);font-size:15px;cursor:pointer}
.crow:active{background:rgba(204,120,92,.06)}
.crow .flag{font-size:20px;flex:none}
.crow .code{font-family:var(--mono);color:var(--indigo);font-weight:600;flex:none}

/* ===== v9: google button ===== */
.btn-google{display:flex;align-items:center;justify-content:center;gap:10px;background:#fff;border:1px solid #dadce0;color:#3c4043;font-weight:700}
.gmark{width:18px;height:18px;flex:none}

/* small links row */
.linkrow{display:flex;justify-content:space-between;font-size:13px;margin:2px 0 4px}
.linkrow a{color:var(--indigo);font-weight:700;cursor:pointer}

/* ===== v14: signup / login ===== */
.steps{display:flex;gap:6px;margin:12px 0 16px}
.step{flex:1;height:4px;border-radius:4px;background:#DADCEE;transition:background .3s}
.step.on{background:var(--indigo)}
.codebox{display:flex;gap:6px;justify-content:center;margin:16px 0}
.codebox input{width:44px;height:52px;background:#fff;border:1.5px solid var(--line);border-radius:10px;text-align:center;font-family:var(--mono);font-size:22px;font-weight:600;color:var(--ink);outline:none}
.codebox input:focus{border-color:var(--indigo);box-shadow:0 0 0 3px rgba(204,120,92,.15)}
/* Unmet requirements read as an alert until satisfied; met ones turn green.
   Explicit red (not --coral-ink: the active "Ink & Air" theme flattens that to ink).
   #C62F27 clears 5:1 on white, so it stays legible at 13px. */
.rule{display:flex;gap:7px;align-items:center;font-size:13px;color:var(--alert);font-weight:500;margin-top:6px;transition:color .2s}
.rule.ok{color:var(--mint-ink);font-weight:400}
.rule .tick{width:15px;display:inline-block}
.or{display:flex;align-items:center;gap:10px;margin:14px 0}
.or div{flex:1;height:1px;background:var(--line)}.or span{font-size:12.5px;color:var(--slate)}
.foot{text-align:center;font-size:14px;color:var(--slate);padding-top:14px}
.foot b{color:var(--indigo);cursor:pointer}

/* ===== v25: marketplace ===== */
.lvb{display:inline-flex;align-items:center;gap:3px;font-family:var(--mono);font-weight:600;font-size:9px;padding:2px 8px;border-radius:11px;border:1px solid}
.lvb1{background:#F0F1F7;color:#6E7191;border-color:#D9DBEB}
.lvb2{background:#EFF6FF;color:#2563EB;border-color:#BFDBFE}
.lvb3{background:rgba(6,214,160,.12);color:var(--mint-ink);border-color:rgba(6,214,160,.4)}
.lvb4{background:rgba(204,120,92,.12);color:var(--indigo);border-color:rgba(204,120,92,.4)}
.lvb5{background:linear-gradient(135deg,#FFF7E0,#FFE9A8);color:#B8860B;border-color:#F7C948}
.card.gold{border-color:#F7C948;box-shadow:0 8px 24px -10px rgba(247,201,72,.5)}
.fno{display:inline-flex;gap:5px;align-items:center;background:rgba(204,120,92,.07);border:1px dashed rgba(204,120,92,.35);border-radius:8px;padding:3px 8px;font-family:var(--mono);font-size:10.5px;color:var(--indigo)}
.feedseg{display:flex;background:#fff;border:1px solid var(--line);border-radius:11px;padding:3px;gap:3px;margin-bottom:12px}
.feedseg button{flex:1;border:0;background:none;padding:9px;border-radius:8px;font-family:var(--body);font-weight:700;font-size:13px;color:var(--slate);cursor:pointer}
.feedseg button.on{background:var(--ink);color:#fff}
.cur4{display:flex;gap:5px}
.cur4 button{flex:1;text-align:center;border:1px solid var(--line);background:#fff;border-radius:8px;padding:8px 0;font-family:var(--mono);font-size:12px;cursor:pointer;color:var(--ink)}
.cur4 button.on{background:var(--indigo);color:#fff;border-color:var(--indigo)}
.chooser{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:440px;background:#fff;border-radius:20px 20px 0 0;z-index:90;padding:12px 16px 22px;box-shadow:0 -14px 40px -18px rgba(20,23,58,.5);animation:sheetUp .35s cubic-bezier(.2,.8,.2,1) both}
.chooser .opt{display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-radius:13px;padding:14px;margin-top:10px;cursor:pointer}
.chooser .opt:active{background:rgba(204,120,92,.06)}
.chooser .opt .ic2{width:42px;height:42px;border-radius:11px;background:rgba(204,120,92,.1);display:flex;align-items:center;justify-content:center;flex:none}
.reqcard{border-color:rgba(240,165,0,.45)}
.callrow{display:flex;gap:6px;margin-top:8px}
.callrow a{flex:1;text-align:center;text-decoration:none;border-radius:10px;padding:9px;font-weight:700;font-size:12.5px}
.call-tel{background:var(--mint);color:#fff}
.call-copy{background:#fff;color:var(--indigo);border:1px solid var(--line)}

/* ===== v26: chats + level + language ===== */
.chatrow{display:flex;gap:10px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:11px;margin-bottom:8px;cursor:pointer}
.chatrow .av{width:38px;height:38px;border-radius:50%;background:rgba(204,120,92,.14);color:var(--indigo);display:flex;align-items:center;justify-content:center;font-weight:700;flex:none}
.chatrow .last{font-size:11px;color:var(--slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.chatrow .meta{margin-left:auto;text-align:right;flex:none}
.chatrow .time{font-family:var(--mono);font-size:9px;color:var(--slate)}
.unreadN{background:var(--coral);color:#fff;font-family:var(--mono);font-size:9px;min-width:17px;height:17px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px;margin-top:3px}
.navbadge{position:absolute;top:6px;right:22%;background:var(--coral);color:#fff;font-family:var(--mono);font-size:8px;min-width:14px;height:14px;border-radius:7px;display:flex;align-items:center;justify-content:center;padding:0 3px}
.chatlog{display:flex;flex-direction:column;gap:6px;flex:1;overflow-y:auto;padding:4px 0;min-height:200px}
.msg{max-width:80%;padding:8px 11px;border-radius:13px;font-size:13px;line-height:1.45;word-break:break-word}
.msg.them{background:#fff;border:1px solid var(--line);align-self:flex-start;border-bottom-left-radius:4px}
.msg.mine{background:var(--indigo);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.msg .at{display:block;font-family:var(--mono);font-size:8px;opacity:.6;margin-top:3px}
.chatbar{display:flex;gap:6px;align-items:center;padding-top:8px}
/* Chat thread: bound the view to the screen so only the log scrolls and the composer stays pinned above the nav bar */
.view.chatview{height:100vh;height:100dvh;max-height:100vh;max-height:100dvh;overflow:hidden;padding-top:16px;padding-bottom:0}
.view.chatview .chatlog{flex:1 1 auto;min-height:0}
.view.chatview .chatbar{flex:0 0 auto;background:var(--bg);position:relative;z-index:5;padding:8px 0 calc(82px + env(safe-area-inset-bottom))}
.chatbar input{flex:1;border:1px solid var(--line);border-radius:18px;padding:10px 13px;font-size:13px;outline:0;font-family:var(--body);background:#fff}
.sendbtn{width:38px;height:38px;border-radius:50%;background:var(--indigo);color:#fff;display:flex;align-items:center;justify-content:center;flex:none;border:0;font-size:15px;cursor:pointer}
.photobtn{width:38px;height:38px;border-radius:50%;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;flex:none;cursor:pointer;padding:0}
.msg.photo{padding:3px;background:transparent;border:0}
.msg.photo.them{border:0}
.msgimg{max-width:210px;width:100%;border-radius:11px;display:block;cursor:pointer}
.photowrap{position:relative;display:inline-block;line-height:0}
.evtag{position:absolute;top:6px;left:6px;background:#E7F8F1;color:#059C76;font-family:var(--mono);font-size:9.5px;font-weight:700;padding:2px 7px;border-radius:6px;line-height:1.3}
.lvcard{text-align:center;padding:16px}
.lvbig{transform:scale(1.5);display:inline-flex;margin:4px 0 8px}
.prog{height:7px;background:#E6E7F2;border-radius:6px;overflow:hidden;margin:10px 0 5px}
.prog i{display:block;height:100%;background:linear-gradient(90deg,var(--indigo),#8F86F3);border-radius:6px}
.langdd{background:#fff;border:1px solid var(--line);border-radius:11px;overflow:hidden;margin-top:6px}
.langdd div{padding:12px 14px;font-size:15px;border-bottom:1px solid #F1F2F8;cursor:pointer}
.langdd div:last-child{border-bottom:0}
.langdd .on{background:rgba(204,120,92,.07);font-weight:700;color:var(--indigo)}

/* ===== v27: byline on feed cards ===== */
.byline{display:flex;align-items:center;gap:6px;margin-top:8px;padding-top:7px;border-top:1px dashed var(--line)}
.byline .av2{width:22px;height:22px;border-radius:50%;background:rgba(204,120,92,.14);color:var(--indigo);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:10px;flex:none}
.byline .who{font-size:11px;font-weight:700}
.byline .rt{font-family:var(--mono);font-size:10px;color:var(--slate)}
.byline .right{margin-left:auto}

/* ============ DESIGN A · Ink & Air ============ */
/* --slate was #9AA0AE, only 2.6:1 on white -- below the 4.5:1 minimum for body text.
   Raised to #6B6862 (5.3:1); --slate-2 keeps a lighter tone for true hints. */
:root{--ink:#1A1915;--slate:#6B6862;--coral-ink:#1A1915}
body,.title,.sub2,.card,.field .val{color:var(--ink)}
.mut{color:var(--slate)}
.sub{color:var(--ink)}
.field label,.lab-sm{color:var(--slate)}
::placeholder{color:var(--slate);opacity:1}
/* password placeholder dots must read as EMPTY (light) — real typed dots stay dark (input ink) */
input[type=password]::placeholder{color:#C7CBDA;opacity:1;letter-spacing:2px}
.ind{color:var(--ink)} .mint{color:var(--ink)}
.btn-p{background:var(--indigo);color:#fff}
.btn-g{background:#fff;color:var(--ink);border:1.5px solid var(--line)}
.card{border-width:1.5px}
.field{border-width:1.5px}
/* onboarding photo slides */
.obphoto{flex:1;min-height:220px;background:linear-gradient(135deg,#c7d2e8,#8fa3c8);background-size:cover;background-position:center;border-radius:0}
.obbody{padding:18px 18px 22px;background:#fff}
.obtitle{font-weight:700;font-size:24px;line-height:1.12;color:var(--ink)}
.obtext{font-size:13px;color:var(--slate);margin:8px 0 14px;line-height:1.5}
.obdots{margin-bottom:14px}
.obdots span{display:inline-block;width:6px;height:6px;border-radius:50%;background:#D6D9E4;margin-right:5px;transition:all .25s}
.obdots span.on{width:18px;border-radius:4px;background:var(--indigo)}
/* wizard */
.wizstep{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--slate)}
.wizprog{height:4px;background:#F1F2F7;border-radius:4px;margin:8px 0 18px}
.wizprog i{display:block;height:100%;background:var(--indigo);border-radius:4px;transition:width .3s}
.wizh{font-weight:700;font-size:23px;line-height:1.12;color:var(--ink)}
.wizsub{font-size:12.5px;color:var(--slate);margin:5px 0 16px}
.wizfoot{display:flex;gap:8px;margin-top:auto;padding-top:14px}
.pick2{display:flex;gap:8px}
.pick2 .opt2{flex:1;border:2px solid var(--line);border-radius:14px;padding:13px;text-align:center;font-weight:700;color:var(--slate);cursor:pointer;background:#fff}
.pick2 .opt2.on{border-color:var(--ink);color:var(--ink);box-shadow:3px 3px 0 rgba(17,19,24,.12)}
.okbox{display:flex;gap:9px;align-items:flex-start;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:11px}
.okbox input{width:18px;height:18px;accent-color:var(--indigo);flex:none;margin-top:1px}
.okbox .t{font-size:12px;color:var(--ink);line-height:1.5}
/* empty states */
.empty{background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:22px 16px;text-align:center}
.empty .eico{font-size:26px;color:var(--slate)}
.empty b{display:block;font-size:14px;margin:6px 0 3px;color:var(--ink)}
.empty p{font-size:12px;color:var(--slate);margin-bottom:12px}
/* coach mark */
.coach{position:fixed;left:50%;transform:translateX(-50%);bottom:84px;background:var(--ink);color:#fff;border-radius:12px;padding:10px 14px;font-size:12px;z-index:80;max-width:320px;box-shadow:0 14px 34px -14px rgba(0,0,0,.5)}
.coach b{color:#fff}
/* primer modal */
.primer{position:fixed;inset:0;background:rgba(17,19,24,.45);z-index:95;display:flex;align-items:center;justify-content:center;padding:22px}
.primerbox{background:#fff;border-radius:18px;padding:22px 18px;max-width:340px;text-align:center}
.primerbox .pico{width:56px;height:56px;border-radius:50%;background:#EFEDFF;display:inline-flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:10px}
.primerbox b{font-size:17px;color:var(--ink)}
.primerbox p{font-size:12.5px;color:var(--slate);margin:8px 0 16px;line-height:1.55}

/* ===== v32: device-fit fixes ===== */
/* dynamic viewport height: URL bar on iOS Safari / Chrome Android */
#app{min-height:100vh;min-height:100dvh}
/* iOS zooms any focused input under 16px — force 16 everywhere */
input,select,textarea{font-size:16px !important}
.codebox input{font-size:22px !important}
/* onboarding photo: never collapse on short phones, never devour tall ones */
.obphoto{min-height:200px;max-height:58dvh}
/* content clears the bar + iPhone home indicator */
.view{padding-bottom:calc(96px + env(safe-area-inset-bottom))}

/* ===== v33: true device fit ===== */
@media (max-width: 768px){
  #app,.sheet,.chooser{max-width:100% !important}
  #app{box-shadow:none}
}
@media (min-width: 769px){
  #app,.sheet,.chooser{max-width:520px !important}
}

/* ===== v33: navy ad banner ===== */
.adwrap{margin:12px 0 2px}
.adview{position:relative;width:100%;aspect-ratio:5/2;border-radius:14px;overflow:hidden;background:linear-gradient(120deg,#0E1B4D,#25348a)}
.adtrack{display:flex;height:100%;will-change:transform}
.adtrack.anim{transition:transform .62s cubic-bezier(.4,0,.2,1)}
.adslide{position:relative;flex:0 0 100%;height:100%;display:block}
.adslide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85}
.adslide .adtxt{position:absolute;left:12px;bottom:10px;right:12px;color:#fff;font-weight:700;font-size:15px;text-shadow:0 2px 8px rgba(0,0,0,.55)}
.adslide .adtag{position:absolute;top:8px;right:10px;font-family:var(--mono);font-size:7.5px;background:rgba(255,255,255,.22);color:#fff;padding:2px 7px;border-radius:7px;letter-spacing:.12em}
.addots{text-align:center;margin-top:7px}
.addots span{display:inline-block;width:5px;height:5px;border-radius:50%;background:#C9CEE2;margin:0 2px;transition:all .25s}
.addots span.on{background:#0E1B4D;width:14px;border-radius:3px}

/* ===== v35: iPhone fixes ===== */
/* bar + FAB pinned to the SCREEN, not the page */
.navbar{position:fixed !important;left:50% !important;right:auto !important;transform:translateX(-50%);width:100%;bottom:0;z-index:40;height:calc(66px + env(safe-area-inset-bottom));padding-bottom:max(4px,env(safe-area-inset-bottom))}
.fab{position:fixed !important;bottom:calc(34px + env(safe-area-inset-bottom)) !important;z-index:41}
@media (max-width:768px){.navbar{max-width:100%}}
@media (min-width:769px){.navbar{max-width:520px}}
/* airport dropdown: page-anchored (iOS keyboard-safe), always BELOW the input */
.dd{position:absolute !important;z-index:70;max-height:42vh;overflow-y:auto}

/* ===== v36: notifications ===== */
.bellbtn{position:relative;width:38px;height:38px;border-radius:50%;background:#fff;border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:17px}
.bellbadge{position:absolute;top:-4px;right:-4px;background:var(--coral);color:#fff;font-family:var(--mono);font-size:8.5px;min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 4px}
.nrow{display:flex;gap:10px;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:11px;margin-bottom:8px;align-items:flex-start}
.nrow .nic{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex:none;font-size:15px;background:#F1F2F7}
.nrow.match .nic{background:#0E1B4D;color:#fff}
.nrow b{font-size:12.5px;color:var(--ink)}
.nrow .nb{font-size:11px;color:var(--slate);margin-top:1px;line-height:1.45}
.nrow .nt{font-family:var(--mono);font-size:8.5px;color:var(--slate);margin-left:auto;white-space:nowrap}
.nrow.unread{border-color:rgba(204,120,92,.45)}

/* ===== v37: status timeline + arrival card ===== */
.tl{display:flex;align-items:flex-start;gap:0;margin:10px 0 4px}
.tl .st1{flex:1;text-align:center;position:relative}
.tl .st1::before{content:"";position:absolute;top:7px;left:-50%;width:100%;height:2.5px;background:var(--line)}
.tl .st1:first-child::before{display:none}
.tl .st1.on::before{background:var(--indigo)}
.tl .st1 .d1{width:15px;height:15px;border-radius:50%;background:#fff;border:2.5px solid var(--line);margin:0 auto;position:relative;z-index:1}
.tl .st1.on .d1{border-color:var(--indigo);background:var(--indigo)}
.tl .st1.now .d1{box-shadow:0 0 0 4px rgba(204,120,92,.18)}
.tl .st1 .l1{font-size:7.5px;font-weight:700;color:var(--slate);margin-top:4px;line-height:1.25}
.tl .st1.on .l1{color:var(--ink)}
.tl .st1 .l2{font-size:8px;color:var(--slate);direction:rtl}
.arrival{background:linear-gradient(135deg,#0E1B4D,#25348a);border-radius:14px;padding:14px;color:#fff;margin-bottom:10px}
.arrival b{color:#fff}
.arrival .arow{display:flex;justify-content:space-between;font-size:12px;padding:3px 0;border-bottom:1px dashed rgba(255,255,255,.22)}
.arrival .arow:last-of-type{border-bottom:0}
.arrival .mut2{color:rgba(255,255,255,.75)}

/* ===== v38 ===== */
input[type="date"]{-webkit-appearance:none;appearance:none;min-height:24px;background:transparent;display:block;width:100%;
  color-scheme:light;color:var(--ink);font-family:var(--body);font-size:15px}
/* Android/OnePlus fix: in phone dark mode the native date control renders its mm/dd/yyyy text light on our
   white field, so it looks blank and is easy to miss. color-scheme:light forces the native control to
   light rendering, and these force the mm/dd/yyyy text to a clearly-visible grey on every Android build. */
input[type="date"]::-webkit-datetime-edit,
input[type="date"]::-webkit-datetime-edit-fields-wrapper,
input[type="date"]::-webkit-datetime-edit-text,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-year-field{color:#8b90a6}
/* once a real date is chosen, JS adds .hasval and the value shows in strong ink */
input[type="date"].hasval::-webkit-datetime-edit,
input[type="date"].hasval::-webkit-datetime-edit-text,
input[type="date"].hasval::-webkit-datetime-edit-month-field,
input[type="date"].hasval::-webkit-datetime-edit-day-field,
input[type="date"].hasval::-webkit-datetime-edit-year-field{color:var(--ink)}
input[type="date"]::-webkit-calendar-picker-indicator{opacity:.85}
.editbox{background:#FFF8E6;border:1.5px solid #F0C64D;border-radius:12px;padding:11px;margin-top:9px}
.editbox b{font-size:12.5px}
.editbox .ch{font-size:11.5px;color:#6b5200;margin:2px 0}
.locchip{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1.5px solid var(--line);border-radius:20px;padding:7px 13px;font-size:12px;font-weight:700;cursor:pointer;margin-bottom:10px}

/* ===== v38.1: visible back chip ===== */
.backchip{width:38px;height:38px;border-radius:50%;background:#fff;border:1.5px solid #C9CDDA;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:none;box-shadow:0 2px 8px -4px rgba(17,19,24,.25);font-size:0}
.backchip svg{display:block}

/* ===== v39 ===== */
.pwwrap{position:relative}
.pweye{position:absolute;right:12px;top:50%;transform:translateY(-50%);cursor:pointer;font-size:16px;z-index:2}
.codeline{font-family:var(--mono);font-size:clamp(22px,7vw,30px);font-weight:600;letter-spacing:.28em;white-space:nowrap;color:#fff;margin-top:5px}
.warmbox{background:#FFF3E6;border:1.5px solid #F2B266;border-radius:11px;padding:10px;font-size:12px;color:#7a4a00;line-height:1.55;margin-bottom:9px}
.navdot{position:absolute;top:6px;right:calc(50% - 14px);width:8px;height:8px;border-radius:50%;background:var(--coral);border:1.5px solid #fff}
.ratestars{font-size:30px;letter-spacing:8px;cursor:pointer;user-select:none}

/* ===== v40: share ===== */
.shr{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:14px;border:1.5px solid var(--line);background:#fff;margin-left:5px;cursor:pointer}
.shmsg{background:#F1F2F7;border-radius:11px;padding:10px;font-size:12px;line-height:1.6;font-family:var(--mono);white-space:pre-wrap;text-align:left}
.btnwa{background:#25D366;color:#fff;border:0;border-radius:11px;padding:11px;font-weight:700;width:100%;font-family:var(--body)}
.btnwc{background:#07C160;color:#fff;border:0;border-radius:11px;padding:11px;font-weight:700;width:100%;font-family:var(--body)}

/* ===== v41/42 ===== */
.fxchip{display:inline-block;font-family:var(--mono);font-size:9px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:2px 8px;margin-top:6px;color:#555}
.fxchip.warn{background:#FFF8E6;border-color:#F0C64D;color:#6b5200}

/* ===== v42: strict chain ===== */
.btnrow svg,.btn svg{display:inline-block;vertical-align:-2.5px;margin-right:6px}
.waitchip{background:#FFF8E6;border:1.5px solid #F0C64D;border-radius:11px;padding:9px;font-size:11px;color:#6b5200;text-align:center;margin-top:9px}
.waitchip svg{vertical-align:-2.5px;margin-right:5px}
.lockchip{background:#F1F2F7;border:1.5px dashed #C9CDDA;border-radius:11px;padding:9px;font-size:11px;color:#555;text-align:center;margin-top:9px}
.lockchip .cdn{font-family:var(--mono);font-size:17px;font-weight:600;color:var(--navy);display:block;margin-top:2px}
.btn.dis{background:#E9EAF2!important;color:#9AA0AE!important;box-shadow:none!important;pointer-events:none}
.pweye svg{display:block}

/* ============================================================
   TYPE SYSTEM v1 — Calibri two-tone (authoritative layer)
   Ink = what you read · Slate = context · Muted = meta
   Mirrors the dashboard guide, scaled for the mobile app.
   ============================================================ */
:root{--ink:#14161F;--slate:#5B6172;--muted:#9AA0B4}
body{color:var(--ink);font-family:var(--body)}
/* Title / subtitle */
.title{color:var(--ink);font-weight:700}
.sub,.wizsub,.obtext,.primerbox p,.empty p{color:var(--slate)}
.mut{color:var(--slate)}
/* Label title — sentence case, Calibri (was 9px uppercase mono) */
.field label{font-family:var(--body)!important;text-transform:none!important;letter-spacing:0!important;font-size:12px!important;font-weight:600;color:var(--muted)}
/* Label content / values */
.field input,.field select,.chosen .cname{color:var(--ink)}
/* Notes / helper — italic allowed for asides */
.field .guide{color:var(--slate);font-size:11px;font-style:italic}
/* Group eyebrows / meta → muted tier */
.mesec,.wizstep{color:var(--muted)}
/* Buttons bold */
.btn{font-weight:700}
/* Emphasis: underline reserved for links only */
.linkrow a,.foot b{text-decoration:none}

/* ============================================================
   TOGGLE v1 — unified on/off (indigo · slider + status chip)
   Shared component; use .tgl / .tgl.sm anywhere an on/off is needed.
   ============================================================ */
.tgl{display:inline-flex;align-items:center;gap:11px;cursor:pointer;user-select:none;vertical-align:middle}
.tgl .trk{width:48px;height:27px;border-radius:20px;background:#CBD0E0;position:relative;transition:background .2s;flex:none}
.tgl .knb{position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(20,23,58,.3)}
.tgl .cap{font-size:13px;font-weight:700;padding:4px 12px;border-radius:20px;background:var(--soft,#EEF0F6);color:var(--muted);display:inline-flex;align-items:center;gap:7px;min-width:56px}
.tgl .cap:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--muted);flex:none}
.tgl.on .trk{background:var(--indigo)}
.tgl.on .knb{transform:translateX(21px)}
.tgl.on .cap{background:#EEECFC;color:var(--indigo)}
.tgl.on .cap:before{background:var(--indigo)}
.tgl.sm .trk{width:42px;height:24px}.tgl.sm .knb{width:18px;height:18px}.tgl.sm.on .knb{transform:translateX(18px)}
.tgl.sm .cap{font-size:11.5px;padding:3px 10px;min-width:52px}

/* KYC "photo attached" card (verify sheet) */
.kycatt{display:flex;align-items:center;gap:11px;background:#EAF8F1;border:1.5px solid #BFE7D3;border-radius:13px;padding:10px}
.kycatt-th{width:44px;height:56px;border-radius:8px;background:#c7d2e8 center/cover no-repeat;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.kycatt-tx{flex:1;min-width:0}
.kycatt-tx b{font-size:14px;color:#0a7d5f;display:flex;align-items:center;gap:6px}
.kycatt-tx span{font-size:11.5px;color:var(--slate);display:block;margin-top:1px}
.kycatt-chk{width:18px;height:18px;border-radius:50%;background:#0AA079;display:inline-flex;align-items:center;justify-content:center;flex:none}
.kycatt-chk svg{width:12px;height:12px;stroke:#fff;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.kycatt-rep{font-size:13px;font-weight:700;color:var(--indigo);background:#fff;border:1px solid var(--line);border-radius:9px;padding:8px 12px;cursor:pointer;flex:none}

/* minimized completed order row (Orders page) */
.card.ordmin{padding:0;overflow:hidden}
.ordmin-head{display:flex;align-items:center;gap:9px;padding:13px 14px;cursor:pointer;user-select:none}
.ordmin-head .ordmin-rt{font-weight:600;font-size:13px;flex:none}
.ordmin-head .ordmin-it{flex:1;min-width:0;font-size:13px;color:var(--slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ordmin-head .ordmin-amt{font-family:var(--mono);font-size:13px;font-weight:700;flex:none}
.ordmin-head .ordchev{width:16px;height:16px;color:var(--slate);transition:transform .2s;flex:none}
.ordmin-head.open .ordchev{transform:rotate(90deg)}
.ordmin-body{padding:2px 14px 14px}

/* ============================================================
   SHADCN THEME LAYER — colorful, brand palette (LAST block wins)
   Re-skins the app's primitives to the shadcn/ui look: hairline
   borders, a --radius scale, flat shadows, and focus rings.
   Colour comes from our palette only: indigo / mint / coral.
   ============================================================ */
:root{
  --radius:12px;       /* cards, sheets */
  --radius-md:10px;    /* buttons, inputs */
  --radius-sm:8px;     /* badges, chips */
  --ring:204,120,92;                 /* indigo (rgb) for focus rings */
  --muted:#F2F3FB;                  /* shadcn bg-muted */
  --muted-fg:#6E7191;
  --input:#DADCEA;                  /* border-input */
  --shadow:0 1px 3px 0 rgba(20,23,58,.08),0 1px 2px -1px rgba(20,23,58,.07);
  --sh-sm:0 1px 2px 0 rgba(20,23,58,.06);
  --sh-lg:0 24px 50px -24px rgba(20,23,58,.34);
}

/* focus-visible ring — the shadcn signature */
:where(button,a,input,select,textarea,[tabindex]):focus-visible,
.tgl:focus-visible,.rchip:focus-visible,.seg button:focus-visible{
  outline:none;box-shadow:0 0 0 2px var(--surface),0 0 0 4px rgba(var(--ring),.5)}

/* ---- Buttons ---- */
.btn{border-radius:var(--radius-md);font-weight:600;letter-spacing:.01em;
  transition:background .15s,color .15s,border-color .15s,box-shadow .15s,transform .05s}
.btn-p{background:var(--indigo);box-shadow:var(--sh-sm)}
.btn-p:hover{background:var(--indigo-deep)}
.btn-g{background:var(--surface);color:var(--ink);border:1px solid var(--input)}
.btn-g:hover{background:var(--muted)}
.btn-sm{border-radius:var(--radius-sm)}
.btn-mint{background:var(--mint);color:#04342C}
.btn-mint:hover{filter:brightness(.96)}
.btn-coral{background:var(--coral);color:#fff}
.btn-danger{background:#fff;color:var(--alert);border:1px solid var(--alert-bd)}
.btn-danger:hover{background:#FDECE8}

/* ---- Inputs / fields ---- */
.field{border-radius:var(--radius-md);border:1px solid var(--input);
  transition:border-color .15s,box-shadow .15s}
.field:focus-within{border-color:var(--indigo);box-shadow:0 0 0 3px rgba(var(--ring),.18)}
.field label{font-family:var(--body);font-size:12px;font-weight:600;letter-spacing:0;
  text-transform:none;color:var(--muted-fg)}
.field .guide{font-size:11px;color:#9AA0B8}
.field.err{border-color:var(--alert);box-shadow:0 0 0 3px var(--alert-bg)}

/* ---- Cards ---- */
.card{border-radius:var(--radius);border:1px solid var(--line);box-shadow:var(--shadow)}

/* ---- Segmented control = shadcn Tabs (muted track, indigo active) ---- */
.seg{background:var(--muted);border:0;border-radius:var(--radius-md);padding:4px;gap:4px}
.seg button{border-radius:var(--radius-sm);color:var(--muted-fg);font-weight:600;
  transition:background .15s,color .15s}
.seg button.on{background:var(--indigo);color:#fff;box-shadow:var(--sh-sm)}
.tabs button{border-radius:var(--radius-sm);border-color:var(--input);
  transition:background .15s,color .15s,border-color .15s}
.tabs button:hover{background:var(--muted)}
.tabs button.on{background:var(--indigo);border-color:var(--indigo);color:#fff}

/* ---- Badges / status / level chips ---- */
.pill,.st,.lvb{border-radius:var(--radius-sm)}
.st{font-weight:600}

/* ---- Sheets & dialogs ---- */
.sheet{border-radius:16px 16px 0 0;box-shadow:var(--sh-lg)}
.primerbox{border-radius:var(--radius);box-shadow:var(--sh-lg);border:1px solid var(--line)}

/* ---- Me rows / accordions: muted hover + radius ---- */
.megrp,.acc{border-radius:var(--radius)}
.merow:hover,.asub:hover,.acch:hover{background:var(--muted)}
.meic{border-radius:var(--radius-sm)}

/* ---- Colourful section-accent utilities (opt-in) ---- */
.accent-indigo{border-left:3px solid var(--indigo);border-radius:0 var(--radius) var(--radius) 0}
.accent-mint{border-left:3px solid var(--mint);border-radius:0 var(--radius) var(--radius) 0}
.accent-coral{border-left:3px solid var(--coral);border-radius:0 var(--radius) var(--radius) 0}

/* ---- visitor landing (#5): full-width, responsive entry ---- */
#app.wide{max-width:100%;background:transparent;box-shadow:none;padding:0}
#app.wide .lp{width:100%;min-height:100vh;background:var(--bg)}
.lp .lpin{max-width:1040px;margin:0 auto;padding:0 22px}
.lp .lpcta{border:0;border-radius:11px;padding:13px 24px;font-family:var(--body);font-weight:700;font-size:15px;cursor:pointer;transition:filter .15s,background .15s}
.lp .lpcta.pri{background:var(--indigo);color:#fff;box-shadow:0 8px 18px -8px rgba(204,120,92,.6)}
.lp .lpcta.pri:hover{background:var(--indigo-deep)}
.lp .lpcta.gho{background:#fff;color:var(--ink);border:1px solid var(--input)}
.lp .lpcta.gho:hover{background:var(--muted)}
.lp .lpgrid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}

/* ---- bottom nav: Option-2 balanced halves + Treatment-2 (soft 3D) half-docked POST ---- */
.navbar{justify-content:space-between}
.navhalf{flex:1;display:flex;justify-content:space-evenly;align-items:center}
.navhalf .item{flex:0 1 auto}
.navbar .gap{flex:0 0 74px}
.fab{border:4px solid var(--bg);box-shadow:0 5px 12px -3px rgba(20,23,58,.28)}

/* ---- v-final: POST fully docked INSIDE the 66px bar (clears the chat composer) ---- */
.fab{bottom:calc(6px + env(safe-area-inset-bottom)) !important;width:54px;height:54px;border:3px solid #fff;box-shadow:0 4px 11px -3px rgba(20,23,58,.34),0 0 0 1.5px rgba(204,120,92,.28),inset 0 1.5px 0 rgba(255,255,255,.32)}
.fab .plus{font-size:24px}
.navbar .gap{flex:0 0 70px}

/* ---- RTL (Arabic) : flex rows auto-reverse under dir=rtl; keep codes/prices LTR ---- */
html[dir="rtl"] body{direction:rtl}
.rtl .mono,.rtl [class*="iata"],.rtl input[inputmode="tel"],.rtl input[inputmode="numeric"],.rtl input[inputmode="decimal"]{direction:ltr;unicode-bidi:plaintext}
.rtl input,.rtl textarea,.rtl select{text-align:right}
.rtl .field label,.rtl .guide,.rtl .sub{text-align:right}
.rtl .navbar,.rtl .navhalf{direction:rtl}

/* v: inline highlight bold inside running text keeps the sentence's size (bold weight only) */
.guide b,.hint b,.sub b,.wizsub b,.obtext b,.field p b,.note b,p b{font-size:inherit;font-weight:700}

/* v: smooth order progress bar (replaces the .tl dot stepper) */
.prog2{margin:13px 2px 4px}
.bar2{height:6px;border-radius:6px;background:#EEF0F6;position:relative;overflow:hidden}
.fill2{position:absolute;left:0;top:0;bottom:0;background:var(--indigo);border-radius:6px;transition:width .45s ease}
.steps2{display:flex;justify-content:space-between;margin-top:7px;font-size:9.5px;color:#9AA0B4;text-transform:capitalize;letter-spacing:.01em}
.steps2 .cur{color:var(--indigo);font-weight:700}
.steps2 .done{color:#7d84a8}

/* field labels softened to 50% opacity — they read too dark otherwise */
.field label{opacity:.5}

/* ===== v1: role slider — two worlds, one account =====================
   Sender = violet (you are spending) · Traveler = teal (you are earning).
   The header bleeds past .view's 20px padding so the colour reaches the edges. */
.modehdr{margin:-22px -20px 14px;padding:13px 12px;transition:background .32s ease}
.modehdr.send{background:linear-gradient(150deg,#1A1915 0%,#1A1915 55%,#1A1915 100%)}
.modehdr.carry{background:linear-gradient(150deg,#1A1915 0%,#1A1915 55%,#1A1915 100%)}
.moderow{display:flex;align-items:center;gap:9px}
/* recessed track */
.rtrack{flex:1;min-width:0;height:46px;border-radius:25px;background:rgba(0,0,0,.24);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.3),inset 0 -1px 0 rgba(255,255,255,.06);
  position:relative;display:flex;align-items:center;padding:4px;cursor:pointer;
  touch-action:pan-y;-webkit-user-select:none;user-select:none}
/* raised knob */
.rknob{position:absolute;top:4px;height:38px;width:calc(50% - 4px);border-radius:21px;
  background:linear-gradient(180deg,#fff 0%,#F2F3F9 100%);
  box-shadow:0 7px 16px rgba(0,0,0,.3),0 1px 3px rgba(0,0,0,.22),inset 0 1px 0 #fff;
  left:4px;transition:left .32s cubic-bezier(.4,0,.2,1)}
.rtrack.right .rknob{left:50%}
.rtrack.dragging .rknob{transition:none}
.rhalf{position:relative;z-index:2;flex:1;text-align:center;font-size:14px;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 4px;letter-spacing:-.1px;
  color:rgba(255,255,255,.68);transition:color .32s ease}
.rtrack:not(.right) .rhalf.a{color:#1A1915}
.rtrack.right .rhalf.b{color:#1A1915}
/* header icon buttons (refresh / bell) on the coloured band */
.mbtn{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;
  color:#fff;flex:none;position:relative;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.14)}
.mbtn svg{stroke:#fff}
.mbtn .bellbadge{top:-4px;right:-4px}

/* ===== v1: section headers — icon + words + count ====================
   Replaces quiet mono ALL-CAPS labels. Sections are NOT equal: one that needs
   the user to act carries an accent icon and a red count; ongoing ones stay grey,
   so only what needs attention competes for the eye. */
.sechdr{display:flex;align-items:center;gap:8px;margin:16px 2px 9px}
.sechdr:first-child{margin-top:2px}
.sechdr .si{width:26px;height:26px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex:none;color:#fff}
.sechdr .si svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sechdr.act .si{background:linear-gradient(160deg,#1ECFA0,#0A9578);box-shadow:0 3px 9px rgba(15,176,136,.35)}
.sechdr.neu .si{background:linear-gradient(160deg,#9AA1BC,#7B839F);box-shadow:0 3px 9px rgba(123,131,159,.28)}
.sechdr.snd .si{background:linear-gradient(160deg,#7A6EF6,#4A3FD4);box-shadow:0 3px 9px rgba(204,120,92,.32)}
.sechdr .st{font-size:14px;font-weight:700;color:var(--ink);letter-spacing:-.2px}
.sechdr .sc{font-family:var(--mono);font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px;background:#E4E7F1;color:#5A6079}
.sechdr .sc.hot{background:linear-gradient(180deg,#FF8073,#F2533F);color:#fff;box-shadow:0 2px 6px rgba(242,83,63,.4)}

/* ============ OTP CHANNEL PICKER ============
   Shared by signup, login and Me > Account > Phone. */
.chpick{margin:2px 0 12px;display:flex;flex-direction:column;gap:7px}
.chlab{font-size:12px;color:var(--slate);margin-bottom:1px}
.chopt{display:flex;align-items:center;gap:11px;width:100%;text-align:left;cursor:pointer;
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius-m);
  padding:11px 12px;font-family:var(--body);box-shadow:var(--e1);
  transition:border-color .16s,box-shadow .16s,background .16s}
.chopt:hover{border-color:#CFCBE0}
.chopt.on{border-color:var(--indigo);box-shadow:0 0 0 3px rgba(var(--ring),.18)}
.chic{flex:none;display:flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:10px;background:var(--surface-2)}
.chopt.on .chic{background:rgba(204,120,92,.09)}
.chtx{display:flex;flex-direction:column;gap:1px;min-width:0}
.chtx b{font-size:14px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.chtx i{font-size:11.5px;font-style:normal;color:var(--slate)}
.chrd{margin-left:auto;flex:none;width:19px;height:19px;border-radius:50%;
  border:1.6px solid var(--line-2);position:relative;transition:border-color .16s}
.chopt.on .chrd{border-color:var(--indigo)}
.chopt.on .chrd::after{content:"";position:absolute;inset:3.4px;border-radius:50%;background:var(--indigo)}
[dir="rtl"] .chopt{text-align:right}
[dir="rtl"] .chrd{margin-left:0;margin-right:auto}

/* ============ ME · GROUPED CARDS ============ */
.megrp{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-l);
  padding:2px 13px;margin-bottom:10px;box-shadow:var(--e1)}
.megh{display:flex;align-items:center;gap:9px;padding:12px 0 9px}
.megi{flex:none;width:24px;height:24px;border-radius:8px;display:flex;align-items:center;
  justify-content:center;background:rgba(204,120,92,.09);color:var(--indigo)}
.megi svg{width:14px;height:14px}
.megt{font-family:var(--disp);font-size:13px;font-weight:700;letter-spacing:-.005em;color:var(--ink)}
.megrp .asub{border-top:1px solid var(--line);border-bottom:none;padding:12px 0}
.megrp .asub:first-of-type{border-top:none}

/* ============ PREMIUM PASS ============
   Type, neutrals, radius and elevation as one small token set. Declared after the
   legacy :root blocks above so these values are the ones that actually apply.
   Arabic gets Plex Arabic ahead of Inter; CJK falls through to the system face
   because a Chinese webfont is 4-6 MB and unusable on mobile data in China. */
:root{
  --disp:'Manrope','Inter',system-ui,'PingFang SC','Microsoft YaHei',sans-serif;
  --body:'Inter','IBM Plex Sans Arabic',system-ui,'PingFang SC','Microsoft YaHei',sans-serif;

  /* Alert red — for genuine error / incomplete / rejected states ONLY.
     Kept separate from --coral-ink, which this theme uses for money accents
     (earnings, rates) that must NOT read as errors. 5:1 on white. */
  --alert:#C62F27;--alert-bg:rgba(198,47,39,.10);--alert-bd:rgba(198,47,39,.32);

  /* neutrals, biased a few degrees toward the indigo brand so they read as chosen */
  --bg:#F5F4EE;--surface:#FFFFFF;--surface-2:#F4F4F8;
  --ink:#1A1915;--slate:#6B6862;--slate-2:#8E8BA3;--line:#EBEAF2;--line-2:#DEDCE9;

  --radius-s:8px;--radius-m:12px;--radius-l:16px;--radius-xl:22px;

  /* one elevation ramp: contact shadow + diffused drop, low opacity */
  --e1:0 1px 2px rgba(25,22,39,.05),0 1px 1px rgba(25,22,39,.03);
  --e2:0 2px 6px rgba(25,22,39,.06),0 4px 14px -6px rgba(25,22,39,.08);
  --e3:0 6px 16px rgba(25,22,39,.07),0 14px 34px -12px rgba(25,22,39,.14);
  --e4:0 18px 44px -14px rgba(25,22,39,.28);
  --shadow:var(--e3);
}
body{font-family:var(--body);letter-spacing:-.006em}
.title{font-family:var(--disp);font-weight:700;letter-spacing:-.021em}
/* digits that sit in columns (prices, balances, counts) should not jitter */
.mono,.amt,.bal,.tok,.price,.asubv,td,th{font-variant-numeric:tabular-nums}
[dir="rtl"] body{letter-spacing:0}
[dir="rtl"] .title{letter-spacing:0}

/* ============ ME PROMO CARDS (M2) ============
   Compact by default; detail slides open when the button is first tapped. */
.mepromo-d{display:none;margin-top:9px;padding-top:8px;border-top:1px dashed rgba(0,0,0,.12)}
.mepromo.op .mepromo-d{display:block}

/* ============ ME · INDIGO HEADER ============
   Full-bleed indigo banner (negative margins cancel the .view padding). */
.mehdr{background:#1A1915;color:#fff;border-radius:0 0 20px 20px;margin:-22px -20px 14px;padding:20px 18px 16px;display:flex;align-items:center;gap:12px}
.mehav{position:relative;flex:none}
.mehavimg{width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.18);color:#fff;font-size:19px;font-weight:700;display:flex;align-items:center;justify-content:center;overflow:hidden;background-size:cover;background-position:center}
.mehavedit{position:absolute;right:-3px;bottom:-3px;width:19px;height:19px;border-radius:50%;background:#fff;color:#B05C38;display:flex;align-items:center;justify-content:center;cursor:pointer;border:2px solid #1A1915;font-size:10px}
.mehinfo{flex:1;min-width:0}
.mehname{width:100%;border:0;border-bottom:1px solid rgba(255,255,255,.3);outline:0;font-family:var(--disp);font-size:17px;font-weight:700;padding:1px 0 3px;background:transparent;color:#fff;letter-spacing:-.01em}
.mehname::placeholder{color:rgba(255,255,255,.6)}
.mehsub{display:flex;align-items:center;gap:8px;margin-top:5px;flex-wrap:wrap}
.mehid{font-family:var(--mono);font-size:11.5px;font-weight:500;color:rgba(255,255,255,.92);cursor:pointer}
.mehpill{font-size:10px;font-weight:500;padding:1px 8px;border-radius:20px}
.mehpill.mv{background:rgba(255,255,255,.92);color:#0F6E56}
.mehpill.mn{background:#fff;color:#C62F27}
.mehbtns{display:flex;gap:2px;align-self:flex-start;flex:none}
.mehbtn{background:transparent;border:0;padding:5px;cursor:pointer;color:#fff;position:relative;display:inline-flex;line-height:0}
.mehbtn .bellbadge{position:absolute;top:2px;right:2px}

/* ============ VERIFY BAR (M3) ============
   Sticky prompt docked above the bottom nav, clearing the FAB. */
.verifybar{position:fixed;left:50%;transform:translateX(-50%);width:calc(100% - 24px);max-width:416px;bottom:calc(78px + env(safe-area-inset-bottom));z-index:39;display:flex;align-items:center;gap:10px;background:#FCECEA;border:1px solid #F3C7C2;border-radius:14px;padding:10px 11px;box-shadow:0 10px 24px -10px rgba(25,22,39,.35)}
.verifybar .vbi{flex:none;width:26px;height:26px;border-radius:8px;background:rgba(255,255,255,.6);display:flex;align-items:center;justify-content:center;color:#C62F27}
.verifybar .vbt{flex:1;min-width:0;font-size:12px;font-weight:500;color:#8f221c;line-height:1.25}
.verifybar .vbb{flex:none;background:#B05C38;color:#fff;font-size:12px;font-weight:600;padding:7px 14px;border-radius:9px;border:0;cursor:pointer}
.verifybar.vinfo{background:#F5EBE4;border-color:#D6D2F6}
.verifybar.vinfo .vbi{color:#B05C38}
.verifybar.vinfo .vbt{color:#3b32a6}
[dir="rtl"] .verifybar{text-align:right}

/* ============ PERMISSIONS PANEL ============ */
.permitem{display:flex;align-items:center;gap:11px;padding:11px 0;border-top:1px solid var(--line)}
.permitem:first-child{border-top:none}
.permcta{flex:none;background:var(--indigo);color:#fff;border:0;font-size:12px;font-weight:600;padding:6px 14px;border-radius:9px;cursor:pointer}

/* ============================================================
   CLAUDE CLAY THEME  (warm cream + clay-coral accent + warm ink)
   Brand hexes were remapped in source: accent -> #B05C38, ink/header -> #1A1915,
   tints -> #F5EBE4, lines -> #EAE3D7. This block sets the neutral tokens.
   The token symbol (tokenMark) keeps its shape and inherits colour via currentColor.
   To REVERT: delete this block AND restore app.js/styles.css from _backups/.
   ============================================================ */
:root{
  --bg:#F5F4EE;            /* warm cream canvas */
  --surface:#FFFFFF;--surface-2:#FAF8F2;
  --ink:#1A1915;          /* warm near-black */
  --slate:#6B6862;--slate-2:#8E897E;
  --line:#EAE3D7;--line-2:#E4DCCE;
  --indigo:#B05C38;--indigo-deep:#A85A3F;--ring:204,120,92;   /* accent = clay coral */
  --e1:0 1px 2px rgba(40,25,10,.05);
  --e2:0 2px 6px rgba(40,25,10,.06),0 4px 14px -6px rgba(40,25,10,.08);
  --e3:0 4px 14px rgba(40,25,10,.06),0 12px 30px -12px rgba(40,25,10,.12);
  --shadow:var(--e3);
}
body{background:#E9E5DB}
/* Header bands (Me + Home/Orders mode band) -> warm ink */
.mehdr{background:#1A1915}
.mehavimg{background:rgba(255,255,255,.16)}
.mehavedit{border-color:#1A1915;color:#1A1915}
.mehid{color:rgba(255,255,255,.85)}
/* Primary buttons + FAB inherit --indigo (now blue); soften their glow to neutral */
.btn-p{box-shadow:0 8px 18px -8px rgba(0,0,0,.28)!important}
.fab{background:#1A1915!important;box-shadow:0 10px 24px -8px rgba(0,0,0,.4)!important}
/* Promo cards join the system: quiet white cards, colour only on icon + a blue CTA.
   Their gold/green fills were the last things that read "off-theme". */
#memberCard{background:#fff!important;border-color:#E5E5EA!important}
#inviteCard{background:#fff!important;border-color:#E5E5EA!important}
#memBtn{background:#1A1915!important;color:#fff!important}
#memTitle{color:#1A1915!important}
#inviteCard b{color:#1A1915!important}