:root{
  --bg:#070b12;
  --bg-soft:#0a1019;
  --panel:#0f1724;
  --panel-2:#121d2d;
  --panel-3:#0b121d;
  --line:#1e2c41;
  --line-bright:#2a405e;
  --text:#f5f8ff;
  --muted:#8290aa;
  --muted-2:#5f6d86;
  --cyan:#4ce5dc;
  --blue:#5f8cff;
  --violet:#8b6cff;
  --green:#68e38a;
  --amber:#ffc86b;
  --danger:#ff6c7a;
  --shadow:0 24px 70px rgba(0,0,0,.38);
  --radius-lg:28px;
  --radius-md:20px;
  --radius-sm:14px;
}
*{box-sizing:border-box}
html{background:var(--bg)}
html,body{margin:0;color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
body{min-height:100vh;background:radial-gradient(circle at 15% -10%,rgba(76,229,220,.06),transparent 35%),radial-gradient(circle at 100% 15%,rgba(139,108,255,.08),transparent 30%),var(--bg);padding-bottom:106px;overflow-x:hidden}
button,input{font:inherit}
button{cursor:pointer}
.hidden{display:none!important}
.grow{flex:1;min-width:0}
.ambient{position:fixed;pointer-events:none;filter:blur(90px);opacity:.17;z-index:0;border-radius:50%}
.ambient-a{width:240px;height:240px;background:var(--cyan);top:-110px;left:-120px}
.ambient-b{width:280px;height:280px;background:var(--violet);right:-190px;top:220px}
.app-shell{position:relative;z-index:1;width:min(100%,760px);margin:0 auto;padding:24px 20px 126px}
.muted{color:var(--muted);margin:0}.small{font-size:13px}.mini-label{margin:0 0 5px;font-size:10px;line-height:1.2;letter-spacing:.16em;font-weight:900;color:#647692}
.topbar{height:56px;display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:27px}
.brand-block{display:flex;align-items:center;gap:11px}.brand-mark{position:relative;width:42px;height:42px;border-radius:15px;background:linear-gradient(135deg,#122a38,#17213e);border:1px solid rgba(76,229,220,.22);box-shadow:inset 0 0 0 1px rgba(255,255,255,.02),0 8px 24px rgba(0,0,0,.25);display:grid;place-items:center;overflow:hidden}.brand-mark:before{content:"";position:absolute;width:24px;height:24px;background:linear-gradient(135deg,var(--cyan),var(--blue));border-radius:9px;transform:rotate(18deg);opacity:.18}.brand-mark span{position:relative;font-weight:950;color:var(--cyan);font-size:19px;font-style:italic}.brand-name{font-size:17px;font-weight:900;letter-spacing:.02em}.brand-name b{color:var(--cyan)}.brand-tag{font-size:8px;letter-spacing:.23em;color:#53637e;margin:2px 0 0;font-weight:800}
.account-btn{height:42px;padding:0 15px;border-radius:14px;border:1px solid var(--line);background:rgba(15,23,36,.86);color:var(--text);display:flex;align-items:center;gap:8px;font-size:13px;font-weight:850;box-shadow:0 8px 24px rgba(0,0,0,.18)}.account-dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px rgba(76,229,220,.75)}
.page{display:none}.page.active{display:block}.welcome-row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px}.welcome-row h1,.page-topline h1{margin:0 0 6px;font-size:29px;line-height:1.05;letter-spacing:-.035em}.welcome-row .muted{font-size:14px;line-height:1.5;max-width:440px}.live-pill{flex:0 0 auto;padding:8px 10px;border-radius:999px;border:1px solid rgba(104,227,138,.16);background:rgba(104,227,138,.07);color:#8aefa5;font-size:9px;font-weight:900;letter-spacing:.13em}.live-pill span{display:inline-block;width:6px;height:6px;background:var(--green);border-radius:50%;margin-right:5px;box-shadow:0 0 9px rgba(104,227,138,.7)}
.wallet-card{position:relative;overflow:hidden;background:linear-gradient(145deg,#101b2a 0%,#0d1623 57%,#101a2d 100%);border:1px solid #1c3147;border-radius:var(--radius-lg);padding:22px;margin-bottom:26px;box-shadow:var(--shadow)}.wallet-card:before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(76,229,220,.07),transparent 28%,transparent 70%,rgba(139,108,255,.09));pointer-events:none}.wallet-glow{position:absolute;width:150px;height:150px;border-radius:50%;background:var(--cyan);filter:blur(85px);opacity:.10;right:-40px;top:-70px}.wallet-head{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:20px}.wallet-kicker{margin:0 0 9px;color:#687c98;font-size:10px;letter-spacing:.17em;font-weight:900}.balance{font-size:34px;line-height:1;font-weight:950;letter-spacing:-.04em;margin-bottom:9px}.wallet-caption{margin:0;color:#71829d;font-size:12px}.wallet-symbol{width:50px;height:50px;border-radius:17px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(76,229,220,.17),rgba(95,140,255,.12));border:1px solid rgba(76,229,220,.17);color:var(--cyan);font-size:22px;font-weight:950;font-style:italic}.wallet-footer{position:relative;display:grid;grid-template-columns:1fr 1fr auto;gap:10px;margin-top:22px;padding-top:17px;border-top:1px solid rgba(129,155,187,.12)}.metric-chip{min-width:0}.metric-chip span{display:block;color:#5f708b;font-size:10px;margin-bottom:5px}.metric-chip strong{font-size:16px}.wallet-action{align-self:center;border:1px solid #29425d;background:#132235;color:#b9c8dc;border-radius:12px;padding:10px 12px;font-size:11px;font-weight:850}.wallet-action span{color:var(--cyan);margin-left:4px}
.quick-section{margin-bottom:23px}.section-title{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin:0 0 13px}.section-title h2{margin:0;font-size:19px;letter-spacing:-.02em}.compact-title{align-items:center}.section-note{font-size:11px;color:#566782}.quick-services{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(112px,1fr);gap:10px;overflow-x:auto;padding-bottom:3px;scrollbar-width:none}.quick-services::-webkit-scrollbar{display:none}.quick-card{min-width:112px;border:1px solid var(--line);background:linear-gradient(150deg,#101927,#0d141f);border-radius:18px;padding:14px;text-align:left;color:var(--text);transition:.18s ease}.quick-card:active{transform:scale(.98)}.quick-icon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:16px;font-weight:950;margin-bottom:13px;background:color-mix(in srgb,var(--svc) 14%,#0e1723);color:var(--svc);border:1px solid color-mix(in srgb,var(--svc) 25%,transparent)}.quick-card strong{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.quick-card span{display:block;color:#596b85;font-size:10px;margin-top:4px}.quick-skeleton{height:98px;border-radius:18px;background:linear-gradient(90deg,#0e1723,#142033,#0e1723);background-size:200% 100%;animation:shine 1.25s infinite}
.search{height:58px;border-radius:18px;background:rgba(13,20,31,.92);border:1px solid var(--line);display:flex;align-items:center;padding:0 16px;gap:12px;margin-bottom:24px;transition:.2s}.search:focus-within{border-color:#2d5068;box-shadow:0 0 0 3px rgba(76,229,220,.04)}.search-icon{position:relative;width:18px;height:18px;border:2px solid #6f819d;border-radius:50%;flex:0 0 auto}.search-icon:after{content:"";position:absolute;width:7px;height:2px;border-radius:2px;background:#6f819d;right:-5px;bottom:-2px;transform:rotate(45deg)}.search input{border:0;outline:0;background:transparent;color:var(--text);width:100%;font-size:14px}.search input::placeholder{color:#516079}.search-key{padding:4px 6px;border:1px solid #24354d;border-radius:7px;color:#52617a;font-size:9px;font-weight:800}.service-heading{align-items:center}.refresh-btn{border:0;background:transparent;color:#6f829e;font-size:11px;font-weight:850;padding:8px}.refresh-btn span{color:var(--cyan);font-size:15px;margin-right:3px}
.service-grid,.selection-stack,.route-stack,.stack{display:flex;flex-direction:column;gap:10px}.item-card,.service-row,.product-card,.order-row,.ledger-row{border:1px solid var(--line);background:linear-gradient(145deg,#101926,#0d151f);border-radius:20px;min-height:78px;box-shadow:0 10px 30px rgba(0,0,0,.11)}.service-row,.item-card,.order-row{width:100%;color:var(--text);text-align:left;padding:14px 15px;display:flex;align-items:center;gap:13px}.service-row{position:relative;overflow:hidden}.service-row:before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:2px;border-radius:5px;background:var(--svc);opacity:.8}.item-icon,.service-logo,.flag{width:48px;height:48px;border-radius:15px;background:#0a121c;display:grid;place-items:center;flex:0 0 auto;font-size:23px;border:1px solid #19283b}.service-row .item-icon{background:color-mix(in srgb,var(--svc) 10%,#0b131e);border-color:color-mix(in srgb,var(--svc) 20%,#18273a);color:var(--svc);font-weight:950;font-size:18px}.item-copy{min-width:0;flex:1}.item-copy h3{margin:0 0 4px;font-size:15px;letter-spacing:-.01em}.item-copy p{margin:0;color:#62738d;font-size:11px}.item-arrow{width:30px;height:30px;border-radius:10px;background:#121f30;display:grid;place-items:center;color:#7385a0;font-size:18px}.service-badge{display:inline-flex;align-items:center;gap:4px;margin-top:6px;padding:4px 7px;border-radius:999px;background:rgba(104,227,138,.06);color:#72d991;font-size:8px;font-weight:900;letter-spacing:.08em}.service-badge i{width:5px;height:5px;border-radius:50%;background:var(--green)}
.skeleton-card{height:78px;border-radius:20px;background:linear-gradient(90deg,#0e1723,#142033,#0e1723);background-size:200% 100%;animation:shine 1.25s infinite}@keyframes shine{to{background-position:-200% 0}}
.page-nav{display:grid;grid-template-columns:42px 1fr auto;gap:12px;align-items:center;margin-bottom:24px}.back-btn{width:42px;height:42px;border-radius:14px;background:#0e1723;border:1px solid var(--line);color:#a5b4c9;font-size:18px}.page-nav-copy{display:flex;flex-direction:column;gap:2px}.page-nav-copy .mini-label{margin:0}.page-nav-copy strong{font-size:14px}.step-badge{padding:7px 9px;border-radius:10px;background:#101b29;border:1px solid #203248;color:#627590;font-size:10px;font-weight:900}.selection-hero{display:flex;align-items:center;gap:14px;padding:17px;background:linear-gradient(145deg,#101a28,#0d151f);border:1px solid var(--line);border-radius:22px;margin-bottom:16px}.selection-hero h2{margin:0 0 4px;font-size:19px}.service-logo{color:var(--cyan);font-weight:950;font-size:18px;background:linear-gradient(135deg,rgba(76,229,220,.1),rgba(95,140,255,.08));border-color:rgba(76,229,220,.16)}.route-hero{align-items:center}.pulse-label{font-size:8px;letter-spacing:.12em;color:#79dea0;font-weight:900;white-space:nowrap}.pulse-label i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);margin-right:5px;box-shadow:0 0 10px rgba(104,227,138,.65)}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 10px rgba(104,227,138,.4);flex:0 0 auto}.operator-row .item-copy h3{font-size:14px}.product-card{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:12px;padding:14px 14px 14px 16px}.product-main{display:flex;align-items:center;gap:12px;min-width:0}.product-meta h3{margin:0 0 4px;font-size:14px}.product-meta p{margin:0;color:#60718a;font-size:10px}.product-price{font-weight:900;font-size:14px;white-space:nowrap}.buy-btn,.primary-btn,.danger-btn,.secondary-btn{border:0;border-radius:13px;padding:12px 15px;font-weight:900;font-size:12px;transition:.18s}.buy-btn,.primary-btn{background:linear-gradient(135deg,#3dd8d0,#4d8eff);color:#061018;box-shadow:0 8px 22px rgba(76,229,220,.12)}.buy-btn:active,.primary-btn:active{transform:translateY(1px)}.danger-btn{background:#28151b;color:#ff8d98;border:1px solid #48232c}.secondary-btn{background:#121e2e;color:#a8b7ca;border:1px solid #23364e}.full{width:100%}
.page-topline{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:24px}.page-topline h1{font-size:28px}.round-action{width:42px;height:42px;border-radius:14px;border:1px solid var(--line);background:#0f1825;color:var(--cyan);font-size:18px}.subheading{margin-top:23px}.order-detail{background:linear-gradient(150deg,#101b29,#0b131e);border:1px solid #1f3047;border-radius:24px;padding:18px;margin-bottom:16px;box-shadow:var(--shadow)}.order-detail-top{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}.order-detail h3{margin:0 0 5px;font-size:18px}.badge{display:inline-flex;align-items:center;padding:6px 9px;border-radius:999px;background:#17253a;color:#84a4ca;font-size:8px;font-weight:950;letter-spacing:.08em}.badge.success{background:rgba(104,227,138,.10);color:#8de8a5}.badge.warn{background:rgba(255,200,107,.09);color:#ffd28a}.badge.danger{background:rgba(255,108,122,.09);color:#ff98a2}.data-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:16px}.data-box{background:#0b131d;border:1px solid #172536;border-radius:15px;padding:12px;min-width:0}.data-box span{display:block;color:#5f718b;font-size:9px;margin-bottom:5px;text-transform:uppercase;letter-spacing:.08em}.data-box strong{display:block;font-size:12px;overflow-wrap:anywhere}.otp-box{margin-top:10px;border:1px dashed #29425d;background:#0a121c;border-radius:16px;padding:14px}.otp-box .otp-code{font-size:25px;letter-spacing:.08em;font-weight:950;margin:4px 0}.action-row{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:13px}.order-row{padding:13px 14px;display:flex;align-items:center;gap:12px;cursor:pointer}.order-row .item-copy h3{font-size:14px}.order-row .order-price{font-weight:900;font-size:13px;white-space:nowrap}.order-row-meta{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-top:5px}
.wallet-summary{position:relative;overflow:hidden;background:linear-gradient(145deg,#111d2d,#0c151f);border:1px solid #1f344b;border-radius:24px;padding:22px;display:flex;justify-content:space-between;align-items:center;gap:18px;box-shadow:var(--shadow)}.wallet-summary:after{content:"";position:absolute;width:130px;height:130px;border-radius:50%;right:-35px;top:-65px;background:var(--violet);filter:blur(75px);opacity:.10}.wallet-summary strong{font-size:30px;letter-spacing:-.04em}.wallet-summary-mark{position:relative;width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:#101f30;border:1px solid #263c55;color:var(--cyan);font-weight:950;font-style:italic}.ledger-row{min-height:72px;padding:13px 14px;display:flex;align-items:center;gap:12px}.ledger-main{flex:1}.ledger-main strong{display:block;margin-bottom:4px;font-size:13px}.ledger-amount{font-weight:900;font-size:12px}.ledger-amount.plus{color:#85e7a0}.ledger-amount.minus{color:#ff939d}
.profile-card{background:linear-gradient(145deg,#101a28,#0d151f);border:1px solid var(--line);border-radius:25px;padding:22px;text-align:left}.profile-avatar{width:62px;height:62px;border-radius:19px;background:linear-gradient(135deg,rgba(76,229,220,.13),rgba(139,108,255,.12));border:1px solid rgba(76,229,220,.14);display:grid;place-items:center;margin-bottom:17px}.profile-avatar span{font-size:25px;font-weight:950;color:var(--cyan);font-style:italic}.profile-copy h2{margin:0 0 4px;font-size:21px}.profile-card .primary-btn,.profile-card .danger-btn{margin-top:18px}.info-card{display:flex;align-items:center;gap:13px;background:#0c141f;border:1px solid var(--line);padding:15px;border-radius:18px;margin-top:12px}.info-icon{width:38px;height:38px;border-radius:12px;background:#111e2c;border:1px solid #20364d;display:grid;place-items:center;color:var(--cyan)}
.bottom-nav{position:fixed;z-index:20;left:50%;transform:translateX(-50%);bottom:0;width:min(100%,760px);padding:0 13px calc(9px + env(safe-area-inset-bottom));background:linear-gradient(180deg,transparent,rgba(7,11,18,.96) 28%)}.nav-shell{height:72px;border-radius:22px;background:rgba(13,20,31,.96);border:1px solid #1c2b3f;box-shadow:0 16px 45px rgba(0,0,0,.45);display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:7px;backdrop-filter:blur(18px)}.nav-item{position:relative;border:0;border-radius:15px;background:transparent;color:#586881;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}.nav-item b{font-size:9px}.nav-icon{font-size:18px;line-height:1}.nav-item.active{background:linear-gradient(145deg,#132236,#101b2a);color:#c7d5e7}.nav-item.active:before{content:"";position:absolute;top:5px;width:18px;height:2px;border-radius:4px;background:linear-gradient(90deg,var(--cyan),var(--blue));box-shadow:0 0 10px rgba(76,229,220,.42)}.nav-item.active .nav-icon{color:var(--cyan)}
.modal{position:fixed;z-index:40;inset:0;display:flex;align-items:flex-end;justify-content:center}.modal-backdrop{position:absolute;inset:0;background:rgba(2,5,9,.76);backdrop-filter:blur(5px)}.sheet{position:relative;z-index:2;width:min(100%,760px);background:linear-gradient(180deg,#101925,#0a111a);border:1px solid #24364d;border-radius:28px 28px 0 0;padding:12px 20px calc(24px + env(safe-area-inset-bottom));box-shadow:0 -24px 70px rgba(0,0,0,.55)}.sheet-handle{width:54px;height:5px;border-radius:99px;background:#2b394c;margin:0 auto 17px}.sheet-brand{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:900;color:#9aabc0;margin-bottom:16px}.small-mark{width:28px;height:28px;border-radius:9px}.small-mark span{font-size:13px}.sheet-title{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:17px}.sheet-title h2{margin:0 0 5px;font-size:22px}.close-btn{border:0;background:#101b28;color:#70819a;width:36px;height:36px;border-radius:12px;font-size:24px}.tabbar{display:grid;grid-template-columns:1fr 1fr;background:#0a121c;border:1px solid #18273a;border-radius:14px;padding:4px;margin-bottom:16px}.tab{border:0;background:transparent;color:#5e6f88;padding:11px;border-radius:10px;font-weight:850;font-size:12px}.tab.active{background:#142235;color:#a8d3ef}.auth-form{display:flex;flex-direction:column;gap:12px}.auth-form label{display:flex;flex-direction:column;gap:7px;color:#8fa0b8;font-size:10px;font-weight:850;text-transform:uppercase;letter-spacing:.08em}.auth-form input{height:50px;border-radius:14px;border:1px solid #203147;background:#09111a;color:var(--text);padding:0 14px;outline:none;text-transform:none;letter-spacing:normal}.auth-form input:focus{border-color:#31536e;box-shadow:0 0 0 3px rgba(76,229,220,.035)}.buy-summary{display:flex;flex-direction:column;gap:11px;background:#0b131d;border:1px solid #19283b;border-radius:18px;padding:15px;margin-bottom:14px}.summary-row{display:flex;justify-content:space-between;gap:18px;font-size:12px}.summary-row span{color:#667790}.summary-row strong{text-align:right}.toast{position:fixed;z-index:50;left:50%;bottom:98px;transform:translate(-50%,18px);background:#111d2c;border:1px solid #29405a;color:#e8f2ff;padding:12px 16px;border-radius:14px;opacity:0;pointer-events:none;transition:.2s;max-width:calc(100% - 34px);text-align:center;box-shadow:var(--shadow);font-size:12px}.toast.show{opacity:1;transform:translate(-50%,0)}.error-card{padding:15px;border-radius:16px;border:1px solid rgba(255,108,122,.28);background:rgba(255,108,122,.055);color:#ff9ca5;font-size:12px;line-height:1.5}.empty-card{padding:28px 18px;border-radius:18px;background:#0d151f;border:1px solid var(--line);text-align:center;color:#62738d;font-size:12px}
@media(max-width:520px){.app-shell{padding-left:16px;padding-right:16px}.wallet-card{padding:20px}.wallet-footer{grid-template-columns:1fr 1fr auto}.wallet-action{padding:9px 10px}.welcome-row h1,.page-topline h1{font-size:27px}.service-row,.item-card{min-height:74px}.product-card{grid-template-columns:1fr auto auto}.data-grid{grid-template-columns:1fr 1fr}.quick-services{grid-auto-columns:108px}}
@media(max-width:380px){.wallet-footer{grid-template-columns:1fr 1fr}.wallet-action{grid-column:1/-1}.product-card{grid-template-columns:1fr auto}.product-price{grid-column:1/2}.buy-btn{grid-column:2/3;grid-row:1/3}.data-grid{grid-template-columns:1fr}.live-pill{display:none}}

/* =========================================================
   NDOO OTP DARK V1.1 — POLISH EDITION
   visual-only overrides; backend/API flow stays unchanged
   ========================================================= */
body{
  padding-bottom:92px;
  background:
    radial-gradient(circle at 8% -8%,rgba(76,229,220,.035),transparent 31%),
    radial-gradient(circle at 105% 22%,rgba(139,108,255,.045),transparent 27%),
    var(--bg);
}
.ambient{opacity:.085;filter:blur(110px)}
.app-shell{padding:20px 18px 108px}
.topbar{height:52px;margin-bottom:22px}
.brand-mark{width:40px;height:40px;border-radius:14px}
.brand-name{font-size:16px}.brand-tag{font-size:7.5px;letter-spacing:.20em}
.account-btn{height:40px;border-radius:13px;padding:0 14px}
.welcome-row{margin-bottom:18px;align-items:center}
.welcome-row h1,.page-topline h1{font-size:28px}
.welcome-row .muted{font-size:13px;max-width:390px}
.live-pill{padding:7px 9px}
.wallet-card{padding:18px 19px;border-radius:24px;margin-bottom:20px;box-shadow:0 18px 52px rgba(0,0,0,.30)}
.wallet-kicker{margin-bottom:7px}.balance{font-size:31px;margin-bottom:7px}.wallet-caption{font-size:11px}
.wallet-symbol{width:46px;height:46px;border-radius:15px;font-size:20px}
.wallet-footer{margin-top:16px;padding-top:14px;gap:8px}
.metric-chip span{font-size:9px}.metric-chip strong{font-size:15px}
.wallet-action{padding:8px 10px;border-radius:11px;font-size:10px}
.quick-section{margin-bottom:19px}
.section-title{margin-bottom:11px}.section-title h2{font-size:18px}
.quick-services{grid-auto-flow:unset;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;overflow:visible;padding-bottom:0}
.quick-card{min-width:0;width:100%;border-radius:17px;padding:12px;min-height:101px}
.quick-icon{width:36px;height:36px;border-radius:11px;margin-bottom:10px;font-size:15px}
.quick-card strong{font-size:12px}.quick-card span{font-size:9px;margin-top:3px}
.search{height:52px;border-radius:16px;padding:0 15px;gap:11px;margin-bottom:20px}
.search input{font-size:13px}.search-key{font-size:8px}
.service-grid,.selection-stack,.route-stack,.stack{gap:8px}
.item-card,.service-row,.product-card,.order-row,.ledger-row{border-radius:18px;min-height:72px}
.service-row,.item-card,.order-row{padding:12px 14px;gap:12px}
.service-row:before{top:15px;bottom:15px}
.item-icon,.service-logo,.flag{width:44px;height:44px;border-radius:14px}
.service-row .item-icon{font-size:17px}
.item-copy h3{font-size:14px;margin-bottom:3px}.item-copy p{font-size:10px}
.item-arrow{width:28px;height:28px;border-radius:9px;font-size:16px}
.service-badge{margin-top:5px;padding:3px 6px;font-size:7px}
.page.active{animation:ndooPageIn .18s ease both}
@keyframes ndooPageIn{from{opacity:.25;transform:translateY(3px)}to{opacity:1;transform:none}}
.selection-hero{padding:15px;border-radius:20px;margin-bottom:14px}
.product-card{padding:12px 12px 12px 14px;gap:10px}
.product-meta h3{font-size:13px}.product-price{font-size:13px}
.buy-btn,.primary-btn,.danger-btn,.secondary-btn{border-radius:12px;padding:11px 14px;font-size:11px}
.bottom-nav{padding:0 12px calc(7px + env(safe-area-inset-bottom));background:linear-gradient(180deg,transparent,rgba(7,11,18,.985) 34%)}
.nav-shell{height:64px;border-radius:20px;padding:6px;gap:3px}
.nav-item{border-radius:14px;gap:2px}.nav-icon{font-size:17px}.nav-item b{font-size:8.5px}
.nav-item.active:before{top:4px;width:17px}
.toast{bottom:86px}
.svc-svg{width:22px;height:22px;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.quick-icon .svc-svg{width:20px;height:20px}.service-logo .svc-svg{width:21px;height:21px}
.svc-svg .svc-fill{fill:currentColor;stroke:none}
.svc-letter,.mono-mark{display:block;font-weight:950;font-size:17px;line-height:1;letter-spacing:-.04em}
.svc-letter-x{font-size:14px;letter-spacing:0}
.service-logo{background:color-mix(in srgb,var(--svc,#4ce5dc) 9%,#0b131e);border-color:color-mix(in srgb,var(--svc,#4ce5dc) 18%,#19283b)}

@media(max-width:520px){
  .app-shell{padding-left:15px;padding-right:15px}
  .wallet-card{padding:17px 18px}
  .quick-services{grid-template-columns:repeat(3,minmax(0,1fr))}
  .quick-card{padding:11px;min-height:98px}
  .search-key{display:none}
  .service-row,.item-card{min-height:70px}
}
@media(max-width:360px){
  .app-shell{padding-left:13px;padding-right:13px}
  .quick-card{padding:10px;min-height:94px}
  .quick-card strong{font-size:11px}
  .wallet-footer{grid-template-columns:1fr 1fr auto}
  .wallet-action{grid-column:auto}
}


/* =========================================================
   NDOO OTP DARK V1.2 — PRODUCTION POLISH
   Bottom navigation position/size is intentionally LOCKED.
   This section does not alter .bottom-nav or .nav-shell.
   ========================================================= */

html{
  scroll-behavior:smooth;
  scroll-padding-bottom:104px;
}

button,
.item-card,
.quick-card,
.buy-btn,
.primary-btn,
.secondary-btn,
.danger-btn,
.wallet-action,
.account-btn{
  -webkit-tap-highlight-color:transparent;
}

button:active,
.item-card:active,
.quick-card:active{
  transform:scale(.985);
}

.section-title{
  gap:14px;
  min-width:0;
}

.section-title > div{
  min-width:0;
}

.section-note{
  flex:0 0 auto;
  white-space:nowrap;
  max-width:44%;
  overflow:hidden;
  text-overflow:ellipsis;
  text-align:right;
  padding-left:6px;
}

.service-heading{
  align-items:flex-end;
}

.refresh-btn{
  flex:0 0 auto;
  white-space:nowrap;
}

.service-row{
  isolation:isolate;
  overflow:hidden;
  transition:border-color .16s ease,background .16s ease,transform .12s ease;
}

.service-row:after{
  content:"";
  position:absolute;
  inset:auto -28px -45px auto;
  width:100px;
  height:100px;
  border-radius:50%;
  background:var(--svc,#4ce5dc);
  opacity:.018;
  filter:blur(20px);
  pointer-events:none;
}

.service-row .item-copy p{
  color:#6f809a;
}

.service-badge{
  letter-spacing:.08em;
}

.service-badge i{
  box-shadow:0 0 10px rgba(86,225,136,.36);
}

.selection-stack,
.route-stack,
#serviceList,
#ordersList,
#ledgerList{
  padding-bottom:84px;
}

.empty-state{
  position:relative;
  overflow:hidden;
  min-height:150px;
  padding:24px 20px;
  border:1px solid #1b2b3e;
  border-radius:22px;
  background:
    radial-gradient(circle at 80% 15%,rgba(76,229,220,.045),transparent 34%),
    linear-gradient(145deg,#0e1824,#0b131d);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.empty-state:after{
  content:"";
  position:absolute;
  width:120px;
  height:120px;
  border-radius:50%;
  right:-52px;
  bottom:-62px;
  background:rgba(139,108,255,.035);
  filter:blur(10px);
}

.empty-state-icon{
  width:46px;
  height:46px;
  border-radius:15px;
  display:grid;
  place-items:center;
  margin-bottom:13px;
  border:1px solid #21364c;
  background:linear-gradient(145deg,#111f2d,#0e1925);
  color:#69ddd7;
  font-size:20px;
  font-weight:900;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}

.empty-state-copy{
  position:relative;
  z-index:1;
  max-width:300px;
}

.empty-state-copy strong{
  display:block;
  color:#dce7f5;
  font-size:14px;
  margin-bottom:6px;
}

.empty-state-copy p{
  margin:0;
  color:#667992;
  font-size:11px;
  line-height:1.55;
}

.empty-state-action{
  position:relative;
  z-index:1;
  margin-top:15px;
  min-width:112px;
  height:38px;
  padding:0 16px;
  border:1px solid #28435b;
  border-radius:12px;
  background:linear-gradient(145deg,#132438,#102031);
  color:#9edfe0;
  font-size:10px;
  font-weight:900;
  letter-spacing:.02em;
}

.order-row .badge,
.order-detail .badge{
  text-transform:none;
  letter-spacing:.02em;
}

.order-row-meta{
  row-gap:5px;
}

.order-detail{
  box-shadow:0 18px 45px rgba(0,0,0,.18);
}

.data-box{
  border:1px solid rgba(255,255,255,.025);
}

.otp-box{
  background:
    radial-gradient(circle at 100% 0,rgba(76,229,220,.035),transparent 40%),
    #0c151f;
}

.wallet-summary{
  position:relative;
  overflow:hidden;
}

.wallet-summary:after{
  content:"";
  position:absolute;
  width:150px;
  height:150px;
  border-radius:50%;
  right:-70px;
  bottom:-90px;
  background:rgba(76,229,220,.035);
  filter:blur(6px);
}

.profile-card,
.info-card{
  box-shadow:0 15px 42px rgba(0,0,0,.12);
}

@media(max-width:420px){
  .section-note{
    max-width:39%;
    font-size:9px;
  }
  .empty-state{
    min-height:142px;
    padding:22px 17px;
  }
}

@media(max-width:360px){
  .section-note{
    max-width:34%;
  }
}


/* NDOO OTP DARK V1.3 — FLOW POLISH */

.flow-progress{
  display:grid;
  grid-template-columns:30px 1fr 30px 1fr 30px;
  align-items:center;
  gap:7px;
  margin:2px 4px 15px;
}
.flow-progress i{
  height:2px;
  border-radius:999px;
  background:#172437;
  overflow:hidden;
}
.flow-progress i.active{
  background:linear-gradient(90deg,rgba(76,229,220,.75),rgba(90,150,255,.65));
  box-shadow:0 0 12px rgba(76,229,220,.08);
}
.flow-dot{
  width:30px;
  height:30px;
  border-radius:10px;
  display:grid;
  place-items:center;
  border:1px solid #203149;
  background:#0c1521;
  color:#52657e;
  font-size:9px;
  font-weight:900;
}
.flow-dot.active{
  color:#73e1dc;
  border-color:#285468;
  background:linear-gradient(145deg,#102534,#101c2c);
  box-shadow:0 8px 22px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.025);
}
.flow-dot.done{
  color:#66dd9b;
  border-color:#244d45;
  background:#0c201d;
}

.context-chip{
  flex:0 0 auto;
  min-width:34px;
  height:28px;
  padding:0 9px;
  border:1px solid #20364c;
  border-radius:10px;
  display:grid;
  place-items:center;
  color:#5eddd6;
  background:#0c1925;
  font-size:8px;
  font-weight:900;
  letter-spacing:.1em;
}

.flow-hint{
  display:flex;
  align-items:center;
  gap:11px;
  margin:-3px 2px 14px;
  padding:10px 12px;
  border:1px solid rgba(67,112,142,.18);
  border-radius:15px;
  background:linear-gradient(145deg,rgba(14,26,39,.68),rgba(9,17,27,.68));
}
.flow-hint-icon{
  width:31px;
  height:31px;
  flex:0 0 auto;
  border-radius:10px;
  display:grid;
  place-items:center;
  background:#102130;
  border:1px solid #1e364d;
  color:#65dcd6;
  font-weight:900;
}
.flow-hint strong{
  display:block;
  font-size:10px;
  color:#c8d5e5;
  margin-bottom:2px;
}
.flow-hint p{
  margin:0;
  color:#657790;
  font-size:9px;
  line-height:1.4;
}

.country-code{
  flex:0 0 auto;
  padding:5px 7px;
  border-radius:8px;
  background:#0c1723;
  border:1px solid #192a3e;
  color:#647895;
  font-size:8px;
  font-weight:900;
  letter-spacing:.08em;
}

.operator-any{
  border-color:#21463e;
  background:
    radial-gradient(circle at 86% 10%,rgba(85,227,139,.035),transparent 30%),
    #0d1722;
}
.operator-pill{
  flex:0 0 auto;
  padding:5px 7px;
  border-radius:8px;
  background:rgba(85,227,139,.07);
  border:1px solid rgba(85,227,139,.13);
  color:#6ee19e;
  font-size:7px;
  font-weight:900;
  letter-spacing:.08em;
}

.flow-summary{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin:-2px 0 14px;
}
.flow-summary > div{
  min-width:0;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid #17283b;
  background:#0a131e;
}
.flow-summary span{
  display:block;
  color:#5d708a;
  font-size:8px;
  margin-bottom:3px;
}
.flow-summary strong{
  display:block;
  color:#c7d4e4;
  font-size:9px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.route-card{
  grid-template-columns:35px minmax(0,1fr) auto auto;
  align-items:center;
}
.route-index{
  width:32px;
  height:32px;
  border-radius:10px;
  display:grid;
  place-items:center;
  background:#0d1b29;
  border:1px solid #1a3248;
  color:#57d5cf;
  font-size:8px;
  font-weight:950;
  letter-spacing:.06em;
}
.route-price-block{
  text-align:right;
  min-width:72px;
}
.route-price-block > span{
  display:block;
  margin-bottom:2px;
  color:#546985;
  font-size:7px;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.route-card .product-price{white-space:nowrap}
.route-card .buy-btn{min-width:70px}

.checkout-head{
  display:flex;
  gap:11px;
  align-items:center;
  padding:11px;
  margin-bottom:4px;
  border-radius:15px;
  border:1px solid #1b3045;
  background:linear-gradient(145deg,#0d1b29,#0b151f);
}
.checkout-badge{
  width:36px;
  height:36px;
  flex:0 0 auto;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,rgba(76,229,220,.16),rgba(92,101,255,.12));
  border:1px solid rgba(76,229,220,.16);
  color:#5be0da;
  font-style:italic;
  font-weight:950;
}
.checkout-head strong{
  display:block;
  color:#d6e2ef;
  font-size:11px;
  margin-bottom:3px;
}
.checkout-head p{
  margin:0;
  color:#62758e;
  font-size:8px;
  line-height:1.45;
}
.summary-price{
  padding-top:10px;
  margin-top:3px;
  border-top:1px dashed #1a2a3e;
}
.summary-price strong{color:#73e1dc}
.checkout-note{
  display:flex;
  gap:8px;
  align-items:flex-start;
  margin-top:5px;
  padding:9px 10px;
  border-radius:12px;
  background:rgba(85,165,255,.035);
  border:1px solid rgba(85,165,255,.08);
}
.checkout-note span{
  width:18px;
  height:18px;
  flex:0 0 auto;
  border-radius:6px;
  display:grid;
  place-items:center;
  background:#10243a;
  color:#6aaeff;
  font-size:8px;
  font-weight:950;
}
.checkout-note p{
  margin:0;
  color:#63758c;
  font-size:8px;
  line-height:1.45;
}

@media(max-width:420px){
  .route-card{
    grid-template-columns:32px minmax(0,1fr) auto;
  }
  .route-price-block{
    grid-column:2/3;
    grid-row:2;
    text-align:left;
    margin-top:4px;
  }
  .route-card .buy-btn{
    grid-column:3/4;
    grid-row:1/3;
    align-self:stretch;
  }
  .route-price-block > span{display:none}
}

@media(max-width:350px){
  .flow-summary{grid-template-columns:1fr}
  .country-code,.operator-pill{display:none}
}


/* V1.5 Auth Reliability */
.auth-note{margin:-2px 1px 2px;color:#667891;font-size:9px;line-height:1.45}
.auth-form input:focus{border-color:#31536b;box-shadow:0 0 0 3px rgba(76,229,220,.035)}


/* V1.6 — Admin shortcut (bottom navigation untouched) */
.profile-card .profile-admin-btn,
.profile-card #adminPanelButton{margin-top:10px}


/* V1.7 — Order lifecycle polish. Bottom navigation intentionally untouched. */
#activeOrderDetail{margin-bottom:18px}
#activeOrderDetail .empty-state{min-height:132px;margin-bottom:6px}
.order-row.is-history-order{cursor:default}
.order-row.is-history-order:active{transform:none}
.order-row.is-history-order .item-arrow{display:none}
.order-row.is-active-order{border-color:#234057}

.action-sheet{padding-bottom:calc(22px + env(safe-area-inset-bottom))}
.action-summary{
  padding:15px;
  border:1px solid #1d3045;
  border-radius:18px;
  background:linear-gradient(145deg,#0c1621,#09121c);
  margin-bottom:14px;
}
.action-summary-head{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.action-summary-mark{
  width:40px;height:40px;border-radius:13px;display:grid;place-items:center;
  background:linear-gradient(145deg,rgba(76,229,220,.12),rgba(73,113,255,.10));
  border:1px solid rgba(76,229,220,.14);color:var(--cyan);font-weight:950;font-style:italic
}
.action-summary-head strong{display:block;font-size:13px;margin-bottom:3px}
.action-summary-head p{margin:0;color:#687a93;font-size:10px}
.action-summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.action-summary-grid>div{padding:11px 12px;border-radius:12px;background:#09111a;border:1px solid #17273a;min-width:0}
.action-summary-grid span{display:block;color:#61738c;font-size:9px;margin-bottom:5px;text-transform:uppercase;letter-spacing:.06em}
.action-summary-grid strong{display:block;color:#e5edf8;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.action-modal-buttons{display:grid;grid-template-columns:1fr 1.25fr;gap:10px}
.action-modal-buttons .primary-btn,.action-modal-buttons .danger-btn,.action-modal-buttons .secondary-btn{width:100%;margin:0;min-height:46px}

@media(max-width:380px){
  .action-modal-buttons{grid-template-columns:1fr}
}

/* NDOO OTP V1.8 — Active order countdown */
.order-status-stack{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:7px;
  flex:0 0 auto;
}
.active-order-countdown{
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-width:86px;
  justify-content:flex-end;
  color:#9aabc3;
  font-size:9px;
  line-height:1;
  white-space:nowrap;
}
.active-order-countdown strong{
  color:#dbe8f7;
  font-size:12px;
  letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
}
.active-order-countdown small{
  color:#61738e;
  font-size:8px;
}
.countdown-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 10px rgba(76,229,220,.45);
}
#cancelOrderBtn:disabled{
  opacity:.55;
  cursor:not-allowed;
  filter:saturate(.65);
}
@media (max-width:420px){
  .active-order-countdown small{display:none}
  .active-order-countdown{min-width:auto}
}


/* =========================================================
   NDOO OTP DARK V1.9 — ORDER EXPERIENCE POLISH
   Bottom navigation is LOCKED and not modified here.
   ========================================================= */

.data-box-copy{
  position:relative;
}

.data-value-row{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}

.data-value-row strong{
  flex:1;
  min-width:0;
}

.copy-mini-btn,
.otp-copy-btn{
  flex:0 0 auto;
  border:1px solid #24425a;
  background:#102131;
  color:#76deda;
  border-radius:9px;
  font-size:8px;
  font-weight:900;
  letter-spacing:.02em;
}

.copy-mini-btn{
  min-width:43px;
  height:27px;
  padding:0 8px;
}

.otp-box-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.otp-copy-btn{
  height:29px;
  padding:0 10px;
}

.otp-auto-badge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:5px 8px;
  border-radius:999px;
  border:1px solid #20384d;
  background:#0d1b28;
  color:#657d9a;
  font-size:7px;
  font-weight:950;
  letter-spacing:.09em;
}

.otp-auto-badge i,
.auto-sync-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#59db95;
  box-shadow:0 0 9px rgba(89,219,149,.38);
}

.otp-box.otp-ready{
  border-style:solid;
  border-color:rgba(82,224,180,.28);
  background:
    radial-gradient(circle at 92% 12%,rgba(82,224,180,.08),transparent 34%),
    #0a151c;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018);
}

.otp-box.otp-ready .otp-code{
  color:#8cf2c1;
  text-shadow:0 0 18px rgba(82,224,180,.10);
}

.order-detail.has-otp{
  border-color:#24483f;
}

.order-auto-sync{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:11px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid #16263a;
  background:#09121b;
  color:#60748e;
  font-size:8px;
}

.order-auto-sync-left{
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
}

.order-auto-sync small{
  flex:0 0 auto;
  color:#50647d;
  font-size:7px;
  white-space:nowrap;
}

.copy-mini-btn:active,
.otp-copy-btn:active{
  transform:scale(.97);
}

@media(max-width:370px){
  .order-auto-sync{
    align-items:flex-start;
    flex-direction:column;
    gap:5px;
  }

  .order-auto-sync small{
    padding-left:13px;
  }
}


/* =========================================================
   NDOO OTP DARK V1.9.2 — PHONE NUMBER UI HOTFIX
   Keeps long phone numbers on one line without changing card layout.
   Bottom navigation remains LOCKED.
   ========================================================= */

.data-box-copy .data-value-row{
  gap:5px;
}

.data-box-copy .data-value-row strong{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:clip;
  overflow-wrap:normal;
  word-break:normal;
  font-size:clamp(9.5px,2.8vw,12px);
  letter-spacing:-.025em;
}

.data-box-copy .copy-mini-btn{
  min-width:34px;
  height:25px;
  padding:0 6px;
  border-radius:8px;
  font-size:7.5px;
}

@media(max-width:380px){
  .data-box-copy{
    padding-left:10px;
    padding-right:9px;
  }

  .data-box-copy .data-value-row{
    gap:4px;
  }

  .data-box-copy .data-value-row strong{
    font-size:10px;
    letter-spacing:-.035em;
  }

  .data-box-copy .copy-mini-btn{
    min-width:31px;
    height:24px;
    padding:0 5px;
    font-size:7px;
  }
}


/* =========================================================
   NDOO OTP DARK V1.9.3 — PHONE ONE-LINE FIX
   Robust override for long numbers on narrow mobile screens.
   Bottom navigation remains LOCKED.
   ========================================================= */

.data-box-copy .data-value-row{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:center !important;
  column-gap:4px !important;
}

.data-box-copy .order-phone-number{
  display:block !important;
  min-width:0 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:clip !important;
  overflow-wrap:normal !important;
  word-break:keep-all !important;
  font-size:clamp(8.4px,2.45vw,10.5px) !important;
  line-height:1.15 !important;
  letter-spacing:-.045em !important;
}

.data-box-copy .copy-mini-btn{
  min-width:29px !important;
  width:auto !important;
  height:24px !important;
  padding:0 5px !important;
  font-size:6.8px !important;
  border-radius:8px !important;
}

@media(max-width:360px){
  .data-box-copy{
    padding-left:9px !important;
    padding-right:8px !important;
  }

  .data-box-copy .order-phone-number{
    font-size:8.2px !important;
  }

  .data-box-copy .copy-mini-btn{
    min-width:27px !important;
    padding:0 4px !important;
    font-size:6.5px !important;
  }
}


/* =========================================================
   NDOO OTP DARK V1.9.4 — PHONE LAYOUT FIX
   Copy button moved to the label row so the number gets full width.
   Bottom navigation remains LOCKED.
   ========================================================= */

.data-box-copy{
  overflow:hidden;
}

.data-box-copy .phone-box-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:6px;
}

.data-box-copy .phone-box-head > span{
  margin:0 !important;
}

.data-box-copy .order-phone-number{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:clip !important;
  word-break:keep-all !important;
  overflow-wrap:normal !important;
  font-size:11px !important;
  line-height:1.2 !important;
  letter-spacing:-.015em !important;
}

.data-box-copy .copy-mini-btn{
  flex:0 0 auto !important;
  min-width:36px !important;
  height:23px !important;
  padding:0 7px !important;
  font-size:7px !important;
  border-radius:8px !important;
}

@media(max-width:380px){
  .data-box-copy .order-phone-number{
    font-size:10.5px !important;
    letter-spacing:-.025em !important;
  }
}


/* =========================================================
   NDOO OTP DARK V1.10 — OTP FOCUS POLISH
   Visual polish for OTP-received state only.
   Bottom navigation remains LOCKED.
   ========================================================= */

.otp-box.otp-focus{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(86,232,174,.34);
  background:
    radial-gradient(circle at 90% 8%,rgba(86,232,174,.13),transparent 30%),
    linear-gradient(145deg,#0a1718,#091319 60%,#0a151c);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 14px 34px rgba(0,0,0,.16);
}

.otp-box.otp-focus:after{
  content:"";
  position:absolute;
  width:90px;
  height:90px;
  right:-32px;
  top:-36px;
  border-radius:50%;
  background:rgba(86,232,174,.12);
  filter:blur(28px);
  pointer-events:none;
}

.otp-ready-label{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:#8cefc1;
  font-size:8px;
  font-weight:950;
  letter-spacing:.13em;
}

.otp-ready-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#59db95;
  box-shadow:0 0 0 4px rgba(89,219,149,.08),0 0 13px rgba(89,219,149,.48);
  animation:otpReadyPulse 1.8s ease-in-out infinite;
}

@keyframes otpReadyPulse{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(.82);opacity:.72}
}

.otp-box.otp-focus .otp-copy-btn{
  position:relative;
  z-index:1;
  min-width:74px;
  height:31px;
  border-color:rgba(86,232,174,.26);
  background:rgba(86,232,174,.09);
  color:#98f0c5;
  font-size:8px;
}

.otp-value-wrap{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-top:12px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(86,232,174,.11);
}

.otp-box.otp-focus .otp-code{
  margin:0;
  color:#9cf3c8;
  font-size:34px;
  line-height:1;
  letter-spacing:.12em;
  font-weight:950;
  text-shadow:0 0 18px rgba(86,232,174,.12);
}

.otp-ready-caption{
  flex:0 0 auto;
  padding-bottom:3px;
  color:#5e927b;
  font-size:7px;
  font-weight:850;
  white-space:nowrap;
}

.otp-message{
  margin:11px 0 0;
  color:#9eb6ad;
  font-size:10px;
  line-height:1.55;
  overflow-wrap:anywhere;
}

.otp-tip{
  margin-top:10px;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid rgba(86,232,174,.10);
  background:rgba(86,232,174,.045);
  color:#668b7d;
  font-size:8px;
  line-height:1.45;
}

.finish-otp-btn{
  background:linear-gradient(135deg,#58dfa0,#49c98f) !important;
  color:#06140e !important;
  box-shadow:0 10px 24px rgba(73,201,143,.14) !important;
}

.finish-otp-btn span{
  display:inline-block;
  margin-right:5px;
  font-weight:950;
}

.order-auto-sync.otp-sync-ready{
  border-color:rgba(86,232,174,.17);
  background:rgba(86,232,174,.035);
}

.order-auto-sync.otp-sync-ready .auto-sync-dot{
  background:#59db95;
  box-shadow:0 0 10px rgba(89,219,149,.48);
}

@media(max-width:380px){
  .otp-box.otp-focus .otp-code{
    font-size:30px;
    letter-spacing:.10em;
  }

  .otp-ready-caption{
    display:none;
  }

  .otp-box.otp-focus .otp-copy-btn{
    min-width:67px;
  }
}




/* =========================================================
   NDOO OTP DARK V1.10.2 — INLINE OTP MESSAGE HISTORY
   Previous SMS messages appear directly under the latest SMS.
   No copy buttons, no extra history card.
   Bottom navigation remains LOCKED.
   ========================================================= */

.otp-message-history{
  margin-top:2px;
}

.otp-history-message{
  margin-top:5px !important;
  margin-bottom:0 !important;
  color:#72877f !important;
}


/* =========================================================
   NDOO OTP V1.15.5 — MEMBER DEPOSIT QRIS UI
   Wallet-only feature. Bottom navigation remains LOCKED.
   ========================================================= */
.deposit-entry-btn{
  width:100%;
  margin:12px 0 18px;
  padding:13px 14px;
  display:flex;
  align-items:center;
  gap:11px;
  border:1px solid rgba(76,229,220,.16);
  border-radius:17px;
  background:linear-gradient(145deg,rgba(76,229,220,.065),rgba(77,142,255,.035)),#0c151f;
  color:var(--text);
  text-align:left;
}
.deposit-entry-btn:active{transform:translateY(1px)}
.deposit-entry-btn > span:nth-child(2){flex:1;min-width:0}
.deposit-entry-btn strong{display:block;font-size:12px;margin-bottom:3px}
.deposit-entry-btn small{display:block;color:#667b96;font-size:9px}
.deposit-entry-btn > b{color:var(--cyan);font-size:16px}
.deposit-entry-icon{
  width:37px;height:37px;border-radius:12px;display:grid;place-items:center;
  background:#0d2027;border:1px solid rgba(76,229,220,.18);color:var(--cyan);font-size:19px;font-weight:800;
}
.deposit-entry-btn.guest{opacity:.82}
.deposit-status-wrap{margin-bottom:18px}
.deposit-title{margin-top:0}
.deposit-status-card{
  min-height:76px;padding:13px 14px;display:flex;align-items:center;gap:12px;
  border:1px solid var(--line);border-radius:18px;background:#0c141f;
}
.deposit-status-main{flex:1;min-width:0}
.deposit-status-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.deposit-status-top strong{font-size:13px}
.deposit-status-top span{font-size:9px;font-weight:900;color:#e3bd68}
.deposit-status-card.approved .deposit-status-top span{color:#79dfa0}
.deposit-status-card.rejected .deposit-status-top span{color:#ff8e9a}
.deposit-status-main p{margin:4px 0 0;color:#637590;font-size:9px}
.deposit-status-main small{display:block;margin-top:5px;color:#7e8fa7;font-size:8px;line-height:1.45}
.deposit-continue-btn{
  flex:0 0 auto;border:1px solid rgba(76,229,220,.22);background:rgba(76,229,220,.07);
  color:#80e7df;border-radius:10px;padding:8px 10px;font-size:8px;font-weight:900;
}
.deposit-sheet{max-height:min(92dvh,820px);overflow-y:auto;overscroll-behavior:contain}
.deposit-pending-notice{
  display:flex;flex-direction:column;gap:4px;margin-bottom:12px;padding:11px 12px;
  border-radius:14px;border:1px solid rgba(232,190,105,.18);background:rgba(232,190,105,.055)
}
.deposit-pending-notice strong{font-size:11px;color:#e5c47d}
.deposit-pending-notice span{font-size:9px;line-height:1.5;color:#8d8067}
.deposit-qris-card{
  padding:13px;border-radius:18px;border:1px solid #1d3045;background:#0a131d;margin-bottom:14px;text-align:center;
}
.deposit-qris-head{display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;margin-bottom:11px}
.deposit-qris-head strong{display:block;font-size:11px}
.deposit-qris-head span{display:block;margin-top:3px;color:#62758f;font-size:8px}
.deposit-qris-badge{margin:0!important;padding:5px 7px;border-radius:8px;background:#f5f7fa;color:#111!important;font-weight:950!important;font-size:8px!important}
.deposit-qris-image{display:block;width:min(100%,310px);height:auto;margin:0 auto;border-radius:15px;background:#fff}
.deposit-qris-card > p{margin:10px auto 0;max-width:340px;color:#6f8199;font-size:9px;line-height:1.5}
.deposit-form{display:flex;flex-direction:column;gap:12px}
.deposit-form label{display:flex;flex-direction:column;gap:7px;color:#8fa0b8;font-size:9px;font-weight:850;text-transform:uppercase;letter-spacing:.07em}
.deposit-form input{min-height:48px;border-radius:14px;border:1px solid #203147;background:#09111a;color:var(--text);padding:0 13px;outline:none;text-transform:none;letter-spacing:normal}
.deposit-form input:focus{border-color:#31536e;box-shadow:0 0 0 3px rgba(76,229,220,.035)}
.deposit-form input:disabled{opacity:.62}
.deposit-money-input{display:flex;align-items:center;border:1px solid #203147;background:#09111a;border-radius:14px;overflow:hidden}
.deposit-money-input:focus-within{border-color:#31536e;box-shadow:0 0 0 3px rgba(76,229,220,.035)}
.deposit-money-input > span{padding-left:13px;color:#6d819c;font-size:11px;font-weight:900}
.deposit-money-input input{flex:1;min-width:0;border:0!important;box-shadow:none!important;background:transparent;padding-left:7px}
.deposit-quick-amounts{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:-4px}
.deposit-quick-amounts button{height:34px;border-radius:10px;border:1px solid #1f3146;background:#0d1722;color:#8092aa;font-size:9px;font-weight:900}
.deposit-quick-amounts button:disabled{opacity:.45}
.deposit-quick-amounts button:active:not(:disabled){border-color:#31536e;color:#a8e8e4}
.deposit-optional{font-weight:700;text-transform:none;letter-spacing:0;color:#53657d}
.deposit-file-input{padding:9px!important;height:auto!important;font-size:9px}
.deposit-payment-hint{margin:-4px 0 0;color:#5f7189;font-size:8px;line-height:1.45}
@media(max-width:380px){
  .deposit-qris-image{width:min(100%,270px)}
  .deposit-quick-amounts{gap:5px}
}


/* =========================================================
   NDOO OTP V1.16.11 — Unified confirmation sheets
   Confirmation-only. Bottom navigation remains LOCKED.
   ========================================================= */
.ndoo-confirm-sheet{
  max-width:520px;
  margin:0 auto;
  padding-top:18px;
}
.ndoo-confirm-icon{
  width:48px;
  height:48px;
  border-radius:15px;
  display:grid;
  place-items:center;
  margin-bottom:14px;
  border:1px solid rgba(76,229,220,.22);
  background:linear-gradient(145deg,rgba(76,229,220,.12),rgba(51,100,255,.10));
  color:#67e5df;
  font-size:22px;
  font-weight:950;
}
.ndoo-confirm-icon.danger{
  border-color:rgba(228,95,112,.26);
  background:rgba(228,95,112,.09);
  color:#ef8996;
}
.ndoo-confirm-kicker{
  margin-bottom:7px;
}
.ndoo-confirm-title{
  margin:0 0 8px;
  font-size:22px;
  line-height:1.15;
  letter-spacing:-.025em;
}
.ndoo-confirm-message{
  margin:0 0 16px;
  color:#8b9ab2;
  font-size:13px;
  line-height:1.55;
}
.ndoo-confirm-actions{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:10px;
  margin-top:16px;
}
.ndoo-confirm-actions button{
  width:100%;
  min-height:48px;
}
.ndoo-confirm-cancel{
  border:1px solid rgba(76,229,220,.34) !important;
  background:rgba(13,28,39,.88) !important;
  color:#7ee7e1 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.ndoo-confirm-cancel:active{
  transform:scale(.985);
  background:rgba(18,43,55,.96) !important;
}
.ndoo-confirm-sheet .buy-summary,
.ndoo-confirm-sheet .action-summary{
  margin-top:0;
  margin-bottom:0;
}
@media(max-width:380px){
  .ndoo-confirm-actions{grid-template-columns:1fr}
}

/* =========================================================
   NDOO OTP DARK V1.11.1 — MULTI ACTIVE ORDERS
   Active orders are separated from history and can be opened.
   Bottom navigation remains LOCKED.
   ========================================================= */

.active-orders-switcher{
  margin-top:4px;
}

.active-switcher-heading{
  align-items:flex-end;
}

.active-switch-order{
  position:relative;
  width:100%;
  min-height:92px;
  padding:13px 14px;
  text-align:left;
  border-color:#24445a !important;
  background:
    linear-gradient(145deg,rgba(14,31,42,.96),rgba(9,20,30,.96)) !important;
  box-shadow:0 10px 28px rgba(0,0,0,.12);
}

.active-switch-order:active{
  transform:scale(.992);
}

.active-switch-main{
  min-width:0;
  flex:1;
}

.active-switch-topline{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:7px;
}

.active-switch-topline h3{
  flex:1;
  min-width:0;
  margin:0;
  color:#eef8ff;
  font-size:14px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.active-switch-topline .badge{
  flex:0 0 auto;
}

.active-switch-meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:5px;
  color:#7890a2;
  font-size:9px;
  line-height:1.35;
}

.active-switch-meta i{
  opacity:.45;
  font-style:normal;
}

.active-switch-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:9px;
}

.active-switch-clock{
  color:#55cfc5;
  font-size:8px;
  font-weight:850;
}

.active-switch-bottom strong{
  color:#d9e7ef;
  font-size:11px;
}

.active-switch-open{
  flex:0 0 auto;
  align-self:center;
  margin-left:8px;
  padding:8px 9px;
  border-radius:10px;
  border:1px solid rgba(76,229,220,.16);
  background:rgba(76,229,220,.055);
  color:#69cfc8;
  font-size:8px;
  font-weight:900;
  white-space:nowrap;
}

.history-empty-inline{
  padding:16px 14px;
  border:1px dashed #1e3044;
  border-radius:16px;
  background:rgba(10,18,28,.58);
  color:#617188;
  font-size:10px;
  line-height:1.5;
  text-align:center;
}

@media(max-width:380px){
  .active-switch-order{
    min-height:88px;
    padding:12px;
  }

  .active-switch-meta{
    font-size:8px;
  }

  .active-switch-open{
    padding:7px 8px;
  }
}


/* =========================================================
   NDOO OTP — ORDERS VIEW TABS
   Bottom navigation remains LOCKED.
   ========================================================= */
.orders-view-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5px;
  margin:0 0 16px;
  padding:5px;
  border:1px solid #1d3044;
  border-radius:16px;
  background:#0a121c;
}

.orders-view-tab{
  min-width:0;
  min-height:44px;
  padding:8px 10px;
  border:0;
  border-radius:12px;
  background:transparent;
  color:#62758e;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  font-size:11px;
  font-weight:900;
  transition:.16s ease;
}

.orders-view-tab b{
  min-width:21px;
  height:21px;
  padding:0 6px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:#111d2a;
  border:1px solid #203449;
  color:#71849e;
  font-size:9px;
}

.orders-view-tab.active{
  color:#dff9fa;
  background:linear-gradient(135deg,rgba(76,229,220,.13),rgba(77,142,255,.10));
  box-shadow:inset 0 0 0 1px rgba(76,229,220,.16);
}

.orders-view-tab.active b{
  color:#73ddd6;
  border-color:rgba(76,229,220,.22);
  background:rgba(76,229,220,.08);
}

.orders-view-tab:active{
  transform:scale(.985);
}

#activeOrdersView.hidden,
#historyOrdersView.hidden{
  display:none!important;
}


/* NDOO OTP — ORDERS ACTIVE TAB EMPHASIS */
.orders-view-tab.active{
  color:#f1ffff;
  background:
    linear-gradient(135deg,rgba(76,229,220,.24),rgba(77,142,255,.18));
  box-shadow:
    inset 0 0 0 1px rgba(76,229,220,.34),
    0 6px 18px rgba(34,160,180,.10);
}

.orders-view-tab.active span{
  color:#f1ffff;
}

.orders-view-tab.active b{
  color:#8af3ec;
  background:rgba(76,229,220,.14);
  border-color:rgba(76,229,220,.38);
  box-shadow:0 0 10px rgba(76,229,220,.10);
}


/* =========================================================
   NDOO OTP — PREMIUM PROFILE
   Bottom navigation remains LOCKED.
   ========================================================= */
.profile-card-premium{
  position:relative;
  overflow:hidden;
  padding:20px;
  border-color:#20364c;
  background:
    radial-gradient(circle at 92% 8%,rgba(76,229,220,.08),transparent 30%),
    linear-gradient(145deg,#101b29,#0b141f);
  box-shadow:0 18px 46px rgba(0,0,0,.20);
}

.profile-card-glow{
  position:absolute;
  width:150px;
  height:150px;
  right:-70px;
  top:-80px;
  border-radius:50%;
  background:rgba(76,229,220,.05);
  filter:blur(18px);
  pointer-events:none;
}

.profile-head{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:13px;
}

.profile-card-premium .profile-avatar{
  width:56px;
  height:56px;
  flex:0 0 auto;
  margin:0;
  border-radius:17px;
  background:linear-gradient(135deg,rgba(76,229,220,.16),rgba(95,140,255,.11));
  border-color:rgba(76,229,220,.22);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.015);
}

.profile-card-premium .profile-avatar span{
  font-size:23px;
}

.profile-card-premium .profile-copy{
  flex:1;
  min-width:0;
}

.profile-card-premium .profile-copy .mini-label{
  margin-bottom:4px;
  color:#617a94;
}

.profile-card-premium .profile-copy h2{
  margin:0 0 3px;
  font-size:19px;
  line-height:1.15;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.profile-card-premium .profile-copy .muted{
  font-size:10px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.profile-role-badge{
  flex:0 0 auto;
  padding:6px 8px;
  border-radius:999px;
  border:1px solid #263b52;
  background:#101c29;
  color:#7489a2;
  font-size:8px;
  font-weight:950;
  letter-spacing:.08em;
}

.profile-role-badge.member{
  color:#69ddd5;
  border-color:rgba(76,229,220,.22);
  background:rgba(76,229,220,.07);
}

.profile-role-badge.admin{
  color:#d6c1ff;
  border-color:rgba(139,108,255,.26);
  background:rgba(139,108,255,.09);
}

.profile-meta-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  margin-top:18px;
}

.profile-meta-item{
  min-width:0;
  padding:12px;
  border-radius:14px;
  border:1px solid #182a3d;
  background:rgba(8,16,25,.66);
}

.profile-meta-item span{
  display:block;
  margin-bottom:5px;
  color:#566a83;
  font-size:8px;
  font-weight:900;
  letter-spacing:.08em;
}

.profile-meta-item strong{
  display:block;
  color:#d8e5f3;
  font-size:11px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.profile-actions{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  gap:9px;
  margin-top:16px;
  padding-top:15px;
  border-top:1px solid rgba(129,155,187,.10);
}

.profile-card-premium .profile-actions .primary-btn,
.profile-card-premium .profile-actions .secondary-btn,
.profile-card-premium .profile-actions .danger-btn,
.profile-card-premium #adminPanelButton{
  margin:0;
  min-height:44px;
}

@media(max-width:380px){
  .profile-card-premium{
    padding:17px;
  }

  .profile-head{
    gap:10px;
  }

  .profile-card-premium .profile-avatar{
    width:50px;
    height:50px;
  }

  .profile-role-badge{
    padding:5px 7px;
    font-size:7px;
  }

  .profile-meta-grid{
    gap:7px;
  }
}


/* =========================================================
   NDOO OTP — PROFILE INFO POLISH
   Bottom navigation remains LOCKED.
   ========================================================= */

.profile-info-card{
  position:relative;
  overflow:hidden;
  margin-top:12px;
  padding:16px;
  border-color:#1d3147;
  background:
    linear-gradient(145deg,rgba(76,229,220,.035),transparent 42%),
    #0b141f;
  box-shadow:0 14px 36px rgba(0,0,0,.14);
}

.profile-info-card:after{
  content:"";
  position:absolute;
  width:90px;
  height:90px;
  right:-42px;
  top:-46px;
  border-radius:50%;
  background:rgba(76,229,220,.055);
  filter:blur(12px);
  pointer-events:none;
}

.profile-info-card .info-icon{
  position:relative;
  z-index:1;
  flex:0 0 auto;
  width:42px;
  height:42px;
  border-radius:13px;
  background:linear-gradient(145deg,rgba(76,229,220,.10),rgba(77,142,255,.07));
  border-color:rgba(76,229,220,.20);
  color:#63ded7;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.015);
}

.profile-info-copy{
  position:relative;
  z-index:1;
  min-width:0;
  flex:1;
}

.profile-info-kicker{
  display:block;
  margin-bottom:3px;
  color:#566d87;
  font-size:7px;
  font-weight:950;
  letter-spacing:.15em;
}

.profile-info-copy strong{
  display:block;
  margin-bottom:4px;
  color:#e3edf8;
  font-size:14px;
}

.profile-info-copy p{
  margin:0;
  color:#71839b;
  font-size:10px;
  line-height:1.5;
}

/* Admin action must look active, not disabled */
.profile-card-premium #adminPanelButton{
  color:#b8ece9;
  border-color:rgba(76,229,220,.22);
  background:
    linear-gradient(135deg,rgba(76,229,220,.11),rgba(77,142,255,.08)),
    #111d2b;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.01);
}

.profile-card-premium #adminPanelButton:active{
  transform:translateY(1px);
  background:
    linear-gradient(135deg,rgba(76,229,220,.16),rgba(77,142,255,.11)),
    #111d2b;
}


/* =========================================================
   NDOO OTP — HOME WALLET CTA POLISH
   Bottom navigation remains LOCKED.
   ========================================================= */
.wallet-card .wallet-action{
  color:#bff5f1;
  border-color:rgba(76,229,220,.24);
  background:
    linear-gradient(135deg,rgba(76,229,220,.12),rgba(77,142,255,.08)),
    #111d2b;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.012),
    0 7px 18px rgba(27,134,151,.08);
}

.wallet-card .wallet-action span{
  color:#58e3da;
}

.wallet-card .wallet-action:active{
  transform:translateY(1px);
  background:
    linear-gradient(135deg,rgba(76,229,220,.18),rgba(77,142,255,.12)),
    #111d2b;
}


/* =========================================================
   NDOO OTP — FAVORITES COMPACT POLISH
   Bottom navigation remains LOCKED.
   ========================================================= */
.quick-section .quick-services{
  gap:8px;
}

.quick-section .quick-card{
  min-height:86px;
  padding:10px 11px;
  border-radius:16px;
}

.quick-section .quick-icon{
  width:33px;
  height:33px;
  margin-bottom:8px;
  border-radius:10px;
}

.quick-section .quick-icon .svc-svg{
  width:18px;
  height:18px;
}

.quick-section .quick-card strong{
  font-size:11.5px;
}

.quick-section .quick-card span{
  margin-top:2px;
  font-size:8.5px;
}

@media(max-width:360px){
  .quick-section .quick-card{
    min-height:82px;
    padding:9px;
  }

  .quick-section .quick-icon{
    width:31px;
    height:31px;
    margin-bottom:7px;
  }
}


/* =========================================================
   NDOO OTP — ACTIVE ORDER DETAIL POLISH
   Visual only. OTP/actions/bottom navigation untouched.
   ========================================================= */
.order-detail{
  position:relative;
  overflow:hidden;
  padding:19px;
  border-color:#20374e;
  background:
    radial-gradient(circle at 95% 4%,rgba(76,229,220,.055),transparent 28%),
    linear-gradient(150deg,#101b29,#0a131d);
  box-shadow:0 18px 48px rgba(0,0,0,.20);
}

.order-detail:before{
  content:"";
  position:absolute;
  width:150px;
  height:150px;
  right:-85px;
  top:-90px;
  border-radius:50%;
  background:rgba(77,142,255,.045);
  filter:blur(12px);
  pointer-events:none;
}

.order-detail-top{
  position:relative;
  z-index:1;
  align-items:flex-start;
  padding-bottom:15px;
  border-bottom:1px solid rgba(129,155,187,.09);
}

.order-detail-top > div:first-child{
  min-width:0;
  flex:1;
}

.order-detail h3{
  margin:0 0 5px;
  color:#edf5ff;
  font-size:19px;
  letter-spacing:-.02em;
}

.order-detail-top .muted{
  color:#71859f;
  line-height:1.45;
}

.order-status-stack{
  position:relative;
  z-index:1;
}

.order-detail .badge{
  border:1px solid rgba(132,164,202,.10);
}

.active-order-countdown{
  padding:5px 7px;
  border-radius:9px;
  background:rgba(9,18,28,.58);
  border:1px solid rgba(129,155,187,.08);
}

.data-grid{
  position:relative;
  z-index:1;
  gap:8px;
  margin-top:14px;
}

.order-detail .data-box{
  min-height:61px;
  padding:11px 12px;
  border-radius:14px;
  border-color:#192a3d;
  background:rgba(8,16,25,.70);
}

.order-detail .data-box span{
  margin-bottom:6px;
  color:#536981;
  font-size:8px;
  font-weight:900;
  letter-spacing:.09em;
}

.order-detail .data-box strong{
  color:#dce7f4;
  font-size:11.5px;
  line-height:1.35;
}

.order-detail .data-box-copy{
  border-color:#192a3d;
  background:
    linear-gradient(145deg,rgba(76,229,220,.035),transparent),
    rgba(8,16,25,.72);
}

.order-detail .order-phone-number{
  color:#eefcff;
  font-size:13px;
  letter-spacing:.02em;
}

@media(max-width:380px){
  .order-detail{
    padding:16px;
  }

  .order-detail h3{
    font-size:17px;
  }

  .order-detail .data-box{
    min-height:58px;
    padding:10px;
  }
}


/* =========================================================
   NDOO OTP — OTP WAITING POLISH
   Only waiting state. OTP received state remains untouched.
   ========================================================= */
.order-detail .otp-box.otp-waiting{
  margin-top:10px;
  padding:14px 15px;
  border-style:solid;
  border-color:#1c3044;
  border-radius:16px;
  background:
    radial-gradient(circle at 94% 5%,rgba(76,229,220,.04),transparent 32%),
    rgba(7,15,24,.70);
}

.order-detail .otp-waiting .otp-box-head{
  margin-bottom:12px;
}

.order-detail .otp-waiting .otp-box-head > .muted{
  color:#8292a8;
  font-size:9px;
  font-weight:850;
}

.order-detail .otp-waiting .otp-code{
  margin:0 0 5px;
  color:#8ba0ba;
  font-size:23px;
  line-height:1;
  letter-spacing:0;
}

.order-detail .otp-waiting > .muted{
  margin:0;
  color:#657a94;
  font-size:10px;
  line-height:1.45;
}

.order-detail .otp-waiting .otp-auto-badge{
  border-color:rgba(89,219,149,.17);
  background:rgba(89,219,149,.045);
  color:#83a99a;
}

@media(max-width:380px){
  .order-detail .otp-box.otp-waiting{
    padding:13px;
  }
}


/* =========================================================
   NDOO OTP — ORDER ACTION BUTTON POLISH
   Visual only. Action logic and disabled states untouched.
   ========================================================= */
.order-detail .action-row button{
  min-height:45px;
  border-radius:13px;
  font-weight:900;
}

/* Refresh */
.order-detail #refreshOrderBtn{
  color:#bdf4ef;
  border-color:rgba(76,229,220,.22);
  background:
    linear-gradient(135deg,rgba(76,229,220,.11),rgba(77,142,255,.07)),
    #111d2b;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.01);
}

/* Cancel */
.order-detail #cancelOrderBtn:not(:disabled){
  color:#ff9ca6;
  border-color:rgba(255,108,122,.25);
  background:
    linear-gradient(135deg,rgba(255,108,122,.10),rgba(255,108,122,.045)),
    #24151a;
}

/* Resend OTP */
.order-detail #resendOtpBtn:not(:disabled){
  color:#a9dcff;
  border-color:rgba(91,164,255,.24);
  background:
    linear-gradient(135deg,rgba(76,229,220,.07),rgba(77,142,255,.12)),
    #111b2a;
}

/* Keep disabled actions visibly disabled */
.order-detail .action-row button:disabled{
  opacity:.48;
  cursor:not-allowed;
  filter:saturate(.58);
  box-shadow:none;
}

/* Finish keeps its existing green OTP-ready style */
.order-detail .finish-otp-btn:not(:disabled){
  opacity:1;
}


/* =========================================================
   NDOO OTP — OTP ACTION LAYOUT
   Visual only. Resend remains direct one-click.
   ========================================================= */
.order-detail .action-row.otp-action-row{
  grid-template-columns:1fr 1fr;
}

.order-detail .action-row.otp-action-row.has-resend-action #resendOtpBtn{
  grid-column:1 / -1;
  min-height:42px;
}

.order-detail .resend-otp-btn{
  color:#a9dcff;
  border-color:rgba(91,164,255,.22);
  background:
    linear-gradient(135deg,rgba(76,229,220,.055),rgba(77,142,255,.10)),
    #101a28;
}


/* =========================================================
   NDOO OTP — ORDER HISTORY POLISH
   Visual only. Order data and logic untouched.
   ========================================================= */
.order-row.is-history-order{
  min-height:68px;
  padding:12px 14px;
  border-color:#1c3044;
  background:
    linear-gradient(145deg,rgba(76,229,220,.018),transparent 45%),
    #0b141f;
  box-shadow:0 10px 28px rgba(0,0,0,.10);
}

.order-row.is-history-order .item-copy h3{
  margin-bottom:5px;
  color:#e5edf8;
  font-size:13.5px;
  letter-spacing:-.01em;
}

.order-row.is-history-order .order-row-meta{
  gap:8px;
  margin-top:3px;
}

.order-row.is-history-order .order-row-meta .muted{
  color:#71829a;
  font-size:9px;
}

.order-row.is-history-order .badge{
  padding:5px 8px;
  font-size:7.5px;
}

.order-row.is-history-order .order-price{
  color:#eef5ff;
  font-size:13px;
  font-weight:950;
}

@media(max-width:380px){
  .order-row.is-history-order{
    min-height:65px;
    padding:11px 12px;
  }

  .order-row.is-history-order .item-copy h3{
    font-size:13px;
  }
}


/* =========================================================
   NDOO OTP — AUTH TAB POLISH
   Visual only. Login/register logic untouched.
   ========================================================= */
#authModal .tabbar{
  border-color:#263b55;
  background:#08111c;
}

#authModal .tab{
  color:#8d9bb0;
}

#authModal .tab.active{
  color:#eaf7ff;
  background:
    linear-gradient(135deg,rgba(76,229,220,.10),rgba(77,142,255,.13)),
    #17283b;
  box-shadow:
    inset 0 0 0 1px rgba(76,229,220,.08),
    0 5px 14px rgba(0,0,0,.12);
}


/* ==========================================================
   NDOO OTP V1.16.25 — Email verification UX
   Auth only. Bottom navigation remains LOCKED.
   ========================================================== */
.auth-verify-panel{
  padding:8px 0 2px;
  text-align:center;
}
.auth-verify-icon{
  width:68px;
  height:68px;
  margin:4px auto 16px;
  border-radius:22px;
  display:grid;
  place-items:center;
  font-size:30px;
  color:#72f4e8;
  background:
    linear-gradient(145deg,rgba(0,209,178,.16),rgba(31,77,255,.12));
  border:1px solid rgba(99,184,255,.20);
  box-shadow:0 14px 40px rgba(0,0,0,.18);
}
.auth-verify-icon.success{
  color:#82f7b0;
}
.auth-verify-kicker{
  margin-bottom:7px;
}
.auth-verify-panel h3{
  margin:0;
  font-size:25px;
  line-height:1.2;
  letter-spacing:-.025em;
}
.auth-verify-message{
  max-width:420px;
  margin:10px auto 0;
  line-height:1.6;
}
.auth-verify-address{
  margin:16px 0 0;
  padding:14px 16px;
  border-radius:16px;
  overflow-wrap:anywhere;
  font-weight:800;
  font-size:14px;
  color:#f3f7ff;
  background:rgba(14,27,43,.78);
  border:1px solid rgba(130,161,199,.28);
}
.auth-verify-address:empty{
  display:none;
}
.auth-verify-info{
  display:flex;
  gap:10px;
  text-align:left;
  align-items:flex-start;
  margin:14px 0 0;
  padding:13px 14px;
  border-radius:15px;
  background:rgba(19,72,88,.18);
  border:1px solid rgba(70,190,194,.15);
}
.auth-verify-info span{
  flex:0 0 auto;
  font-weight:900;
  color:#68e7db;
}
.auth-verify-info p{
  margin:0;
  color:#93a3ba;
  font-size:12px;
  line-height:1.55;
}
.auth-verify-actions{
  display:grid;
  gap:10px;
  margin-top:18px;
}


/* ==========================================================
   NDOO OTP V1.16.26 — Auth identity + password visibility
   Auth only. Bottom navigation remains LOCKED.
   ========================================================== */
.password-wrap{
  position:relative;
  display:block;
  width:100%;
}

.password-wrap > input{
  width:100%;
  padding-right:52px !important;
}

.auth-form .password-toggle{
  position:absolute !important;
  right:5px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:42px !important;
  height:38px !important;
  min-width:42px !important;
  min-height:38px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:11px !important;
  background-color:transparent !important;
  background-image:url("/assets/icons/eye.svg") !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:20px 20px !important;
  box-shadow:none !important;
  opacity:.72;
  cursor:pointer;
  z-index:2;
}

.auth-form .password-toggle:hover,
.auth-form .password-toggle:focus-visible,
.auth-form .password-toggle.is-visible{
  opacity:1;
  background-color:rgba(91,120,157,.08) !important;
}

.auth-form .password-toggle:focus-visible{
  outline:2px solid rgba(85,172,255,.35) !important;
  outline-offset:1px;
}


/* ==========================================================
   NDOO OTP V1.16.27 — Verification success redirect
   ========================================================== */

/* Pending state: mail only, absolutely no check mark. */
#verifyEmailIcon{
  font-size:0 !important;
  background-image:url("/assets/icons/verify-mail.svg") !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:34px 34px !important;
}

#verifyEmailPanel:not(.is-verified) .auth-verify-info-icon{
  display:none !important;
}

/* Verified state: mail changes into check. */
#verifyEmailPanel.is-verified #verifyEmailIcon{
  background-image:url("/assets/icons/verify-check.svg") !important;
}

#verifyEmailPanel.is-verified .auth-verify-info-icon{
  display:inline-block !important;
  width:24px;
  height:24px;
  min-width:24px;
  background-image:url("/assets/icons/verify-check.svg");
  background-repeat:no-repeat;
  background-position:center;
  background-size:22px 22px;
}

#verifyEmailPanel.is-verified .auth-verify-info{
  border-color:rgba(99,216,209,.28);
  background:rgba(44,184,177,.07);
}


/* NDOO OTP PASSWORD RECOVERY */
.auth-forgot-row{
  display:flex;
  justify-content:flex-end;
  margin:-3px 2px 3px;
}

.auth-text-btn{
  border:0;
  padding:5px 0;
  background:transparent;
  color:#73deda;
  font-size:11px;
  font-weight:800;
  cursor:pointer;
}

.auth-recovery-panel{
  padding-top:4px;
}

.auth-recovery-panel h3{
  margin:7px 0 7px;
  font-size:25px;
}

.auth-recovery-copy{
  margin:0 0 17px;
  line-height:1.6;
}

.auth-recovery-icon{
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  margin-bottom:13px;
  border-radius:17px;
  border:1px solid rgba(62,215,209,.18);
  background:
    linear-gradient(
      145deg,
      rgba(62,215,209,.10),
      rgba(71,104,255,.08)
    );
  color:#59ddd7;
  font-size:23px;
  font-weight:900;
}

.auth-recovery-message{
  min-height:19px;
  margin:12px 4px;
  color:#8fa3bc;
  font-size:11px;
  line-height:1.5;
  text-align:center;
}

/*
 * Semua field password memakai ikon yang sama.
 * Ketika password terlihat, garis diagonal menjadikannya
 * bentuk "eye-off" tanpa emoji atau asset tambahan.
 */
.auth-form .password-toggle{
  overflow:hidden;
}

.auth-form .password-toggle::after{
  content:"";
  position:absolute;
  width:22px;
  height:2px;
  left:10px;
  top:18px;
  border-radius:999px;
  background:#7188a6;
  transform:rotate(45deg) scaleX(0);
  opacity:0;
  transition:
    transform .16s ease,
    opacity .16s ease;
}

.auth-form .password-toggle.is-visible::after{
  transform:rotate(45deg) scaleX(1);
  opacity:.95;
}

/* NDOO OTP — GLOBAL TEXT SELECTION OFF
   Mencegah accidental text selection / Touch to Search pada UI.
   Field input/textarea tetap selectable.
*/
html,
body,
body * {
  -webkit-user-select: none;
  user-select: none;
}

input,
textarea,
select,
option,
[contenteditable="true"],
[contenteditable=""],
[contenteditable="plaintext-only"] {
  -webkit-user-select: text !important;
  user-select: text !important;
}