/* ==========================================================================
   CloudyBoost design system
   Tokens -> base -> components -> public site -> customer app -> admin panel
   ========================================================================== */
:root{
  color-scheme:light;
  --p-50:#f3f0ff;--p-100:#e8e3ff;--p-200:#d2c9ff;--p-300:#b3a3ff;--p-400:#8f78fb;--p-500:#7256f6;--p-600:#5b3df0;--p-700:#4a2fd0;--p-800:#3a25a3;
  --navy:#0e0a2e;--navy-2:#170f47;--navy-3:#241a63;
  --ink:#151a42;--ink-soft:#3b416a;--muted:#6b7194;
  --bg:#f6f6fc;--surface:#fff;--surface-2:#f8f7fe;--line:#e8e6f5;--line-2:#f0eefa;
  --ok:#16a34a;--ok-bg:#dcfce7;--ok-ink:#166534;--warn:#d97706;--warn-bg:#fef3c7;--warn-ink:#92400e;--err:#dc2626;--err-bg:#fee2e2;--err-ink:#991b1b;--info-bg:#e0e7ff;--info-ink:#3730a3;
  --grad:linear-gradient(135deg,#5b3df0,#8a5cff);
  --r-sm:8px;--r-md:12px;--r-lg:18px;--r-xl:24px;
  --sh-sm:0 1px 2px rgba(21,26,66,.06);--sh-md:0 8px 24px rgba(58,37,163,.08);--sh-lg:0 22px 50px rgba(58,37,163,.16);
  --font:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  /* legacy names still used by older pages */
  --brand-50:var(--p-50);--brand-100:var(--p-100);--brand-200:var(--p-200);--brand-300:var(--p-300);--brand-400:var(--p-400);--brand-500:var(--p-500);--brand-600:var(--p-600);--brand-700:var(--p-700);--ink-muted:var(--muted);--white:var(--surface);
  --safe-b:env(safe-area-inset-bottom,0px);
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0a0920;--surface:#141230;--surface-2:#1a1740;--line:#2a2657;--line-2:#211e48;
  --ink:#eeecff;--ink-soft:#c9c6ee;--muted:#9c99c6;
  --p-50:#221c55;--p-100:#2d2570;--p-200:#40368f;--p-700:#a999ff;
  --ok-bg:#12351f;--ok-ink:#86efac;--warn-bg:#3b2a0c;--warn-ink:#fcd34d;--err-bg:#3f1414;--err-ink:#fca5a5;--info-bg:#25235e;--info-ink:#c7c9ff;
  --sh-sm:none;--sh-md:0 8px 24px rgba(0,0,0,.35);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);background:var(--bg);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}img{display:block}
a{color:var(--p-600);text-decoration:none}a:hover{color:var(--p-700)}
h1,h2,h3,h4{line-height:1.2;margin:0 0 .5em;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
h1{font-size:clamp(1.9rem,4.6vw,3.3rem)}h2{font-size:clamp(1.4rem,2.8vw,2rem)}h3{font-size:1.1rem}h4{font-size:.95rem}
p{margin:0 0 1em}.muted{color:var(--muted)}.center{text-align:center}
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 20px}
.icon{flex:none;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
:focus-visible{outline:3px solid var(--p-300);outline-offset:2px;border-radius:6px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;justify-content:center;font:700 .92rem var(--font);padding:11px 20px;border-radius:12px;border:1px solid transparent;cursor:pointer;transition:background .15s,box-shadow .15s,transform .15s;text-decoration:none;line-height:1.2}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 8px 20px rgba(91,61,240,.28)}.btn-primary:hover{color:#fff;box-shadow:0 10px 26px rgba(91,61,240,.4)}
.btn-secondary{background:var(--p-50);color:var(--p-700);border-color:var(--p-100)}.btn-secondary:hover{background:var(--p-100);color:var(--p-700)}
.btn-outline{background:transparent;color:var(--p-600);border-color:var(--p-300)}.btn-outline:hover{background:var(--p-50)}
.btn-ghost{background:transparent;color:var(--ink-soft)}.btn-ghost:hover{background:var(--p-50);color:var(--p-700)}
.btn-danger{background:var(--err-bg);color:var(--err-ink);border-color:transparent}
.btn-light{background:#fff;color:var(--p-700)}.btn-light:hover{background:var(--p-50);color:var(--p-700)}
.btn-glass{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.35)}.btn-glass:hover{background:rgba(255,255,255,.16);color:#fff}
.btn-sm{padding:7px 13px;font-size:.8rem;border-radius:10px}.btn-lg{padding:14px 26px;font-size:1rem}.btn-block{width:100%}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.icon-btn{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);cursor:pointer;position:relative}
.icon-btn:hover{background:var(--p-50);color:var(--p-700)}
.icon-btn .dot{position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;border-radius:99px;background:var(--err);color:#fff;font-size:.62rem;font-weight:800;display:grid;place-items:center;padding:0 4px}

/* ---------- brand tiles ---------- */
.brand{display:inline-grid;place-items:center;border-radius:28%;color:#fff;flex:none}
.brand svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.brand-whatsapp{background:#25d366}.brand-telegram{background:#2aa3e0}.brand-facebook{background:#1877f2}.brand-tiktok{background:#111}
.brand-google{background:#fff;color:#4285f4;box-shadow:inset 0 0 0 1px var(--line)}
.brand-instagram{background:linear-gradient(45deg,#f9a03f,#e1306c 50%,#833ab4)}
.brand-generic{background:var(--grad)}

/* ---------- forms ---------- */
input[type=text],input[type=email],input[type=password],input[type=number],input[type=url],input[type=search],input[type=tel],input[type=datetime-local],input[type=date],input[type=file],select,textarea{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:12px;font:inherit;background:var(--surface);color:var(--ink)}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.8}
input:focus,select:focus,textarea:focus{outline:3px solid var(--p-100);border-color:var(--p-500)}
textarea{min-height:110px;resize:vertical}label{display:block;font-weight:700;font-size:.84rem;margin:0 0 6px;color:var(--ink-soft)}
.field{margin-bottom:16px}.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.check{display:flex;align-items:center;gap:8px;font-weight:500}.check input,input[type=checkbox],input[type=radio]{width:auto;accent-color:var(--p-600)}
.form-narrow{max-width:440px;margin:60px auto}.hint{font-size:.78rem;color:var(--muted);margin-top:6px}
.password-wrap{position:relative}.password-wrap input{padding-right:48px}
.password-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--muted);cursor:pointer;padding:7px;display:grid;place-items:center;border-radius:8px}
.password-toggle:hover{color:var(--p-600)}.password-hint{font-size:.74rem;color:var(--muted);margin-top:5px}
.search-field{position:relative}.search-field .icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}.search-field input{padding-left:40px}
.switch{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid var(--line-2);font-weight:600;font-size:.9rem}

/* ---------- cards, tables, badges ---------- */
.section{padding:72px 0}.section.alt{background:var(--surface);border-block:1px solid var(--line)}
.section-head{max-width:640px;margin:0 auto 36px;text-align:center}.section-head p{color:var(--muted)}
.grid{display:grid;gap:20px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;display:block;color:inherit;box-shadow:var(--sh-sm)}
.card h3{margin-bottom:.6em}
a.card{transition:transform .18s,box-shadow .18s,border-color .18s}a.card:hover{transform:translateY(-2px);box-shadow:var(--sh-md);border-color:var(--p-200);color:inherit}
.card-icon{width:46px;height:46px;border-radius:14px;background:var(--p-50);color:var(--p-600);display:grid;place-items:center;margin-bottom:14px}
.product-card{padding:0;overflow:hidden}
.product-img{aspect-ratio:4/3;background:var(--p-50);overflow:hidden}.product-img img{width:100%;height:100%;object-fit:cover}
.product-body{padding:16px 18px 18px}
.product-cat{display:inline-block;font-size:.72rem;font-weight:700;color:var(--p-700);background:var(--p-50);padding:3px 10px;border-radius:99px;margin-bottom:8px}
.product-title{margin:0 0 6px;color:var(--ink);font-size:1rem}.product-desc{color:var(--muted);font-size:.86rem;margin-bottom:12px}
.product-foot{display:flex;align-items:center;justify-content:space-between;gap:8px}
.product-price{font-weight:800;font-size:1.1rem;color:var(--ink)}.product-price s{color:var(--muted);font-weight:500;font-size:.85rem}
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:99px;font-size:.74rem;font-weight:700;background:var(--p-50);color:var(--p-700);white-space:nowrap}
.badge-completed,.badge-paid,.badge-active,.badge-confirmed,.badge-approved,.badge-success,.badge-open,.badge-online{background:var(--ok-bg);color:var(--ok-ink)}
.badge-pending,.badge-processing,.badge-new,.badge-in_progress,.badge-unpaid,.badge-sale{background:var(--warn-bg);color:var(--warn-ink)}
.badge-cancelled,.badge-rejected,.badge-failed,.badge-expired,.badge-banned,.badge-closed,.badge-refunded,.badge-offline{background:var(--err-bg);color:var(--err-ink)}
.flash{margin:16px 0 0;padding:13px 18px;border-radius:12px;font-weight:600;transition:opacity .4s;display:flex;gap:10px;align-items:center}
.flash-success{background:var(--ok-bg);color:var(--ok-ink)}.flash-error{background:var(--err-bg);color:var(--err-ink)}.flash-info{background:var(--info-bg);color:var(--info-ink)}
.table-wrap{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
table{width:100%;border-collapse:collapse;font-size:.9rem}th,td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line-2);vertical-align:middle}
th{font-size:.74rem;font-weight:700;color:var(--muted);background:var(--surface-2);white-space:nowrap}tr:last-child td{border-bottom:0}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.pills a{padding:6px 14px;border-radius:99px;background:var(--surface);border:1px solid var(--line);font-size:.86rem;font-weight:600;color:var(--ink-soft)}.pills a.active,.pills a:hover{background:var(--p-600);border-color:var(--p-600);color:#fff}
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 6px;scrollbar-width:none}.chips::-webkit-scrollbar{display:none}
.chip{padding:7px 16px;border-radius:99px;background:var(--surface);border:1px solid var(--line);font-size:.82rem;font-weight:700;color:var(--muted);white-space:nowrap;cursor:pointer}
.chip.active{background:var(--p-600);border-color:var(--p-600);color:#fff}
.pagination{display:flex;gap:6px;flex-wrap:wrap;margin:28px 0}.pagination a{padding:7px 13px;border-radius:10px;background:var(--surface);border:1px solid var(--line);font-weight:700;color:var(--ink-soft)}.pagination a.active{background:var(--p-600);border-color:var(--p-600);color:#fff}
.page-head{padding:44px 0 22px}.breadcrumb{font-size:.86rem;color:var(--muted);margin-bottom:12px}
.layout-side{display:grid;grid-template-columns:240px 1fr;gap:26px;align-items:start}
.side-list a{display:block;padding:9px 12px;border-radius:10px;color:var(--ink-soft);font-weight:600;font-size:.9rem}.side-list a:hover,.side-list a.active{background:var(--p-50);color:var(--p-700)}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}
.gallery-main{border-radius:var(--r-lg);border:1px solid var(--line);width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--p-50)}
.thumbs{display:flex;gap:10px;margin-top:10px}.thumbs img{width:72px;height:54px;object-fit:cover;border-radius:10px;border:1px solid var(--line);cursor:pointer}
.price-big{font-size:2rem;font-weight:800}.price-big s{font-size:1.05rem;color:var(--muted);font-weight:500}
.delivery-box{background:var(--p-50);border:1px solid var(--p-100);border-radius:12px;padding:14px;white-space:pre-wrap;word-break:break-word;font-family:ui-monospace,Menlo,monospace;font-size:.88rem}
.stack>*+*{margin-top:20px}.inline{display:inline}.actions{display:flex;gap:6px;flex-wrap:wrap}
.tree ul{list-style:none;padding-left:22px;margin:4px 0}.tree>ul{padding-left:0}
.msg{padding:12px 14px;border-radius:14px;background:var(--surface);border:1px solid var(--line);margin-bottom:10px}.msg.staff{background:var(--p-50)}
code,.mono{font-family:ui-monospace,Menlo,monospace;font-size:.88em;background:var(--p-50);padding:2px 6px;border-radius:6px}
.countdown{font-variant-numeric:tabular-nums;font-weight:800;color:var(--p-700)}
.bars{display:flex;align-items:flex-end;gap:4px;height:160px;padding:10px 0}.bars div{flex:1;background:var(--p-500);border-radius:4px 4px 0 0;min-height:2px}
.reveal-box{border:1px solid var(--p-100);background:var(--p-50);border-radius:16px;padding:16px}
.reveal-value{font-family:ui-monospace,monospace;font-size:1.05rem;white-space:pre-wrap;word-break:break-word;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px}
.reveal-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}

/* ---------- public header ---------- */
.nav{position:sticky;top:0;z-index:60;background:var(--navy);border-bottom:1px solid rgba(255,255,255,.08);color:#fff}
.nav-inner{display:flex;align-items:center;gap:18px;height:68px}
.logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:1.2rem;color:var(--ink);letter-spacing:-.02em}
.logo .icon{color:var(--p-600)}
.nav .logo{color:#fff}.nav .logo .icon{color:#9b82ff}
.nav-links{display:flex;gap:2px;flex:1;align-items:center}
.nav-links>a,.nav-drop>button{color:#d5d1f5;font:600 .88rem var(--font);padding:9px 12px;border-radius:10px;background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:4px;position:relative}
.nav-links>a:hover,.nav-drop>button:hover,.nav-links>a.active{color:#fff;background:rgba(255,255,255,.08)}
.nav-links>a.active::after{content:"";position:absolute;left:12px;right:12px;bottom:2px;height:2px;border-radius:2px;background:#9b82ff}
.nav-drop{position:relative}
.nav-drop-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:230px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:8px;box-shadow:var(--sh-lg);display:none}
.nav-drop:hover .nav-drop-menu,.nav-drop:focus-within .nav-drop-menu{display:block}
.nav-drop-menu a{display:flex;gap:10px;align-items:center;padding:9px 12px;border-radius:10px;color:var(--ink-soft);font-weight:600;font-size:.88rem}.nav-drop-menu a:hover{background:var(--p-50);color:var(--p-700)}
.nav-search{position:relative;width:230px}.nav-search input{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:#fff;padding:9px 12px 9px 38px;font-size:.84rem;border-radius:12px}
.nav-search input::placeholder{color:#a7a2d6}.nav-search .icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#a7a2d6}
.nav-actions{display:flex;align-items:center;gap:8px}
.nav .btn-ghost{color:#e6e3ff}.nav .btn-ghost:hover{background:rgba(255,255,255,.1);color:#fff}
.nav .btn-secondary{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.14);color:#fff}
.cur-form select{border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);color:#fff;border-radius:10px;padding:7px 8px;font:600 .8rem var(--font);width:auto}
.cur-form select option{color:#111}
.cart-link{position:relative}.nav .icon-btn{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:#fff}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;color:#fff;margin-left:auto;padding:6px}
.mobile-only{display:none}

/* ---------- home ---------- */
.hero2{position:relative;overflow:hidden;color:#fff;background:radial-gradient(circle at 78% 30%,rgba(114,86,246,.45),transparent 38%),linear-gradient(120deg,#0e0a2e 0%,#241468 52%,#4b1d96 100%)}
.hero2-bg{position:absolute;inset:0;background-size:cover;background-position:center}
.hero2-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,10,46,var(--ov,.82)) 0%,rgba(14,10,46,calc(var(--ov,.82) - .25)) 55%,rgba(14,10,46,calc(var(--ov,.82) - .45)) 100%)}
.hero2-grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:30px;align-items:center;min-height:540px}
.hero2-grid.no-art{grid-template-columns:1fr;min-height:480px}
.hero2-copy{padding:72px 0}
.pill-tag{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);color:#e9e4ff;border-radius:99px;padding:6px 14px;font-size:.74rem;font-weight:700}
.hero2 h1{color:#fff;font-size:clamp(2.4rem,5.4vw,4.1rem);line-height:1.02;margin:18px 0;letter-spacing:-.035em}
.hero2 h1 .accent{color:#a58bff;display:block}
.hero2 p.lead{max-width:540px;color:#dedaf7;font-size:1.05rem}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0}
.trust-row{display:flex;gap:22px;flex-wrap:wrap;color:#d6d1f5;font-size:.84rem;font-weight:600}.trust-row span{display:inline-flex;align-items:center;gap:8px}.trust-row .icon{color:#a58bff}
.hero2-art{position:relative;min-height:470px;display:grid;place-items:center}
.phone{width:262px;border-radius:38px;padding:14px;background:linear-gradient(160deg,#1c1450,#0a0726);border:2px solid rgba(255,255,255,.18);box-shadow:0 40px 80px rgba(0,0,0,.45),inset 0 0 0 5px #05031a;transform:rotate(4deg)}
.phone-screen{background:linear-gradient(180deg,#2a1c7c,#150e46);border-radius:26px;padding:22px 16px 20px;min-height:440px;display:flex;flex-direction:column;gap:14px}
.phone-brand{display:flex;align-items:center;gap:8px;font-weight:800;justify-content:center;font-size:.95rem}
.phone-card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:14px;font-size:.78rem}
.phone-card small{color:#cfc9f7;display:block}.phone-card b{display:block;font-size:.86rem;margin:2px 0}
.phone-code{margin-top:6px;background:linear-gradient(135deg,#5b3df0,#7b5cff);border-radius:14px;padding:14px;text-align:center}
.phone-code span{display:block;font-size:.66rem;opacity:.85}.phone-code strong{font-size:1.7rem;letter-spacing:.14em;font-variant-numeric:tabular-nums}
.phone-ok{display:flex;align-items:center;gap:6px;justify-content:center;color:#8be7ac;font-size:.76rem;font-weight:700}
.float-brand{position:absolute;box-shadow:0 14px 30px rgba(0,0,0,.35);animation:bob 6s ease-in-out infinite}
.float-brand.a{left:8%;top:14%}.float-brand.b{left:2%;top:48%;animation-delay:-2s}.float-brand.c{right:6%;top:26%;animation-delay:-3.5s}.float-brand.d{right:10%;bottom:12%;animation-delay:-1s}
@keyframes bob{50%{transform:translateY(-10px)}}
.hero-note{position:absolute;right:0;top:4%;font-size:.86rem;font-style:italic;color:#d9d3ff;text-align:right;line-height:1.5}
.stat-bar{background:var(--surface);border-bottom:1px solid var(--line);box-shadow:0 5px 24px rgba(58,37,163,.05)}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);padding:20px 0}
.stat-grid>div{display:flex;align-items:center;gap:14px;padding:4px 20px;border-right:1px solid var(--line-2)}.stat-grid>div:last-child{border-right:0}
.stat-ic{width:46px;height:46px;border-radius:50%;background:var(--p-50);color:var(--p-600);display:grid;place-items:center;flex:none}
.stat-grid strong{display:block;font-size:1.25rem;line-height:1.1}.stat-grid span{color:var(--muted);font-size:.78rem}
.eyebrow{display:block;color:var(--p-600);font-weight:800;font-size:.8rem;margin-bottom:6px}
.sec-head{margin-bottom:26px}.sec-head.center{max-width:680px;margin-inline:auto}.sec-head p{color:var(--muted);margin:0}
.svc-layout{display:grid;grid-template-columns:1.2fr .9fr;gap:22px;align-items:start}
.svc-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.svc-card{border:1px solid var(--line);border-radius:16px;padding:18px;background:var(--surface);color:var(--ink);display:flex;flex-direction:column;gap:6px;transition:transform .18s,box-shadow .18s}
.svc-card:hover{transform:translateY(-3px);box-shadow:var(--sh-md);color:var(--ink)}
.svc-card h3{font-size:.95rem;margin:6px 0 0}.svc-card p{font-size:.78rem;color:var(--muted);margin:0;flex:1}.svc-card b{font-size:.78rem;color:var(--p-600);display:inline-flex;gap:4px;align-items:center}
.svc-ic{width:44px;height:44px;border-radius:13px;background:var(--p-50);color:var(--p-600);display:grid;place-items:center}
.pop{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:20px}
.pop-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px}.pop-head h3{margin:0;font-size:1rem}.pop-head a{font-size:.78rem;font-weight:700;display:inline-flex;gap:4px;align-items:center}
.pop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pop-item{border:1px solid var(--line);border-radius:14px;padding:14px 8px;text-align:center;color:var(--ink);display:flex;flex-direction:column;align-items:center;gap:4px}
.pop-item:hover{border-color:var(--p-300);color:var(--ink)}.pop-item b{font-size:.84rem}.pop-item small{color:var(--muted);font-size:.72rem}
.pop-item .btn{margin-top:6px;width:100%}
.how{background:var(--p-50);border-radius:20px;padding:26px 28px;display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center}
.how-steps{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.how-step{display:flex;align-items:center;gap:12px}.how-step .n{width:44px;height:44px;border-radius:50%;background:var(--surface);color:var(--p-600);display:grid;place-items:center;font-weight:800;box-shadow:var(--sh-sm)}
.how-step b{display:block;font-size:.88rem}.how-step small{color:var(--muted);font-size:.74rem}.how-arrow{color:var(--p-400)}
.flash-strip{background:linear-gradient(110deg,#2a1268,#5b2bd6 55%,#7a45ff);color:#fff;border-radius:20px;padding:20px 26px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.flash-strip .fl-ic{width:64px;height:64px;border-radius:18px;background:rgba(255,255,255,.14);display:grid;place-items:center;color:#ffb36b}
.flash-strip h3{color:#fff;font-size:1.4rem;margin:0}.flash-strip p{margin:0;color:#e0d9ff;font-size:.9rem}
.flash-strip .fl-copy{flex:1;min-width:220px}.fl-timer{display:flex;gap:8px}.fl-timer div{background:rgba(255,255,255,.14);border-radius:12px;padding:8px 12px;text-align:center;min-width:58px}.fl-timer strong{display:block;font-size:1.25rem;font-variant-numeric:tabular-nums}.fl-timer small{font-size:.62rem;opacity:.85}
.fl-offer{background:#fff;color:var(--navy);border-radius:16px;padding:12px 16px;display:flex;align-items:center;gap:12px}.fl-offer small{display:block;color:#6b7194;font-size:.72rem}.fl-offer s{color:#8b8fae;font-size:.8rem}.fl-offer strong{font-size:1.25rem}
.more-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.more-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px;display:flex;gap:12px;align-items:center;color:var(--ink)}.more-card:hover{border-color:var(--p-300);color:var(--ink)}
.more-card b{display:block;font-size:.9rem}.more-card small{color:var(--muted);font-size:.76rem}
.web-strip{background:var(--p-50);border-radius:22px;padding:28px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.web-strip h2{margin:2px 0 6px}.web-strip p{margin:0 0 12px;color:var(--muted)}
.check-list{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.84rem;font-weight:600;color:var(--ink-soft)}.check-list span{display:inline-flex;gap:6px;align-items:center}.check-list .icon{color:var(--ok)}
.review-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px}
.review{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px}
.review .who{display:flex;gap:12px;align-items:center;margin-bottom:10px}.avatar{width:42px;height:42px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-weight:800;flex:none}
.stars{display:flex;gap:2px;color:#f5a524}.stars .icon{fill:currentColor}.stars .off{color:var(--line);}
.faq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.faq-grid details{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:0}
.faq-grid summary{cursor:pointer;font-weight:700;font-size:.9rem;padding:15px 18px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:10px}
.faq-grid summary::-webkit-details-marker{display:none}.faq-grid summary .icon{transition:transform .2s;color:var(--p-600)}
.faq-grid details[open] summary .icon{transform:rotate(45deg)}.faq-grid p{font-size:.86rem;color:var(--muted);margin:0;padding:0 18px 16px}
.cta-band{background:var(--grad);color:#fff;border-radius:22px;padding:34px 36px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;position:relative;overflow:hidden}
.cta-band h2{color:#fff;margin:0 0 4px}.cta-band p{margin:0;color:#e9e4ff}

/* ---------- footer ---------- */
.footer{background:var(--navy);color:#b7b3dc;padding:56px 0 0}
.footer .logo{color:#fff}.footer .logo .icon{color:#9b82ff}.footer h4{color:#fff;font-size:.9rem;margin-bottom:14px}
.footer a{color:#b7b3dc}.footer a:hover{color:#fff}
.footer-grid{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:32px}
.footer-grid div a{display:block;margin-bottom:9px;font-size:.88rem}
.footer p.about{font-size:.86rem;margin:14px 0}
.social{display:flex;gap:8px}.social a{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.08);margin:0!important}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:36px;padding:20px;font-size:.8rem;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.pay-chips{display:flex;gap:8px;flex-wrap:wrap}.pay-chips span{display:inline-flex;gap:6px;align-items:center;background:rgba(255,255,255,.08);border-radius:8px;padding:5px 10px;color:#e0ddff;font-weight:600;font-size:.74rem}
.footer-legal{display:flex;gap:16px;flex-wrap:wrap}.footer-legal a,.footer-legal button{font:inherit;color:#b7b3dc;background:none;border:0;padding:0;cursor:pointer}.footer-legal button:hover{color:#fff}
.to-top{position:fixed;right:18px;bottom:calc(18px + var(--safe-b));width:42px;height:42px;border-radius:50%;border:0;background:var(--grad);color:#fff;display:none;place-items:center;cursor:pointer;box-shadow:var(--sh-lg);z-index:40}.to-top.show{display:grid}

/* ---------- cookie consent ---------- */
.cc{position:fixed;left:20px;bottom:calc(20px + var(--safe-b));z-index:200;width:min(420px,calc(100vw - 32px));background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:20px;box-shadow:0 24px 60px rgba(14,10,46,.28);padding:20px;display:none}
.cc.show{display:block;animation:ccIn .35s ease-out}
@keyframes ccIn{from{opacity:0;transform:translateY(14px)}}
.cc-head{display:flex;gap:12px;align-items:center;margin-bottom:8px}.cc-head .ic{width:40px;height:40px;border-radius:12px;background:var(--p-50);color:var(--p-600);display:grid;place-items:center;flex:none}.cc-head h3{margin:0;font-size:1.02rem}
.cc p{font-size:.84rem;color:var(--muted);margin:0 0 14px}
.cc-actions{display:flex;gap:8px;flex-wrap:wrap}.cc-actions .btn{flex:1;min-width:120px}
.cc-modal{position:fixed;inset:0;z-index:210;background:rgba(14,10,46,.6);display:none;align-items:center;justify-content:center;padding:16px}.cc-modal.show{display:flex}
.cc-panel{background:var(--surface);border-radius:22px;max-width:520px;width:100%;max-height:90vh;overflow:auto;padding:24px}
.cc-panel header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.cc-panel h3{margin:0}
.cc-opt{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--line-2)}.cc-opt b{display:block;font-size:.92rem}.cc-opt small{color:var(--muted);font-size:.8rem}
.tgl{position:relative;width:44px;height:26px;flex:none}.tgl input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer;margin:0}
.tgl i{position:absolute;inset:0;border-radius:99px;background:var(--line);transition:.2s}.tgl i::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.tgl input:checked+i{background:var(--p-600)}.tgl input:checked+i::after{transform:translateX(18px)}.tgl input:disabled+i{opacity:.55}.tgl input:focus-visible+i{outline:3px solid var(--p-300);outline-offset:2px}

/* ---------- legal pages ---------- */
.legal-hero{background:linear-gradient(120deg,var(--navy),var(--navy-3));color:#fff;padding:48px 0}
.legal-hero h1{color:#fff;font-size:clamp(1.8rem,4vw,2.6rem);margin:8px 0}.legal-hero p{color:#d5d0f7;margin:0}
.legal-hero .breadcrumb{color:#b3aee0}.legal-hero .breadcrumb a{color:#d5d0f7}
.legal{display:grid;grid-template-columns:250px minmax(0,1fr);gap:36px;padding:40px 0 80px;align-items:start}
.legal-toc{position:sticky;top:90px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:14px}
.legal-toc h4{margin:4px 10px 8px;font-size:.78rem;color:var(--muted)}
.legal-toc a{display:block;padding:7px 10px;border-radius:9px;font-size:.84rem;font-weight:600;color:var(--ink-soft)}.legal-toc a:hover{background:var(--p-50);color:var(--p-700)}
.legal-toc .sep{height:1px;background:var(--line);margin:10px 4px}
.legal-body{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:34px 38px;max-width:820px}
.legal-body h2{font-size:1.2rem;margin:2em 0 .6em;scroll-margin-top:90px}.legal-body h2:first-of-type{margin-top:0}
.legal-body p,.legal-body li{color:var(--ink-soft);font-size:.94rem}.legal-body ul{padding-left:1.2em;margin:0 0 1em}.legal-body li{margin-bottom:.35em}
.legal-note{background:var(--warn-bg);color:var(--warn-ink);border-radius:12px;padding:12px 14px;font-size:.84rem;margin-bottom:22px}

/* ---------- customer app ---------- */
.dash{display:grid;grid-template-columns:240px minmax(0,1fr);gap:26px;padding:32px 0 80px;align-items:start}
.dash-nav{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:10px;position:sticky;top:88px;box-shadow:var(--sh-sm)}
.dash-nav a{display:flex;gap:11px;align-items:center;padding:10px 12px;border-radius:12px;color:var(--ink-soft);font-weight:600;font-size:.88rem}
.dash-nav a:hover{background:var(--p-50);color:var(--p-700)}.dash-nav a.active{background:var(--grad);color:#fff;box-shadow:0 8px 18px rgba(91,61,240,.28)}
.dash-nav h5{margin:14px 12px 4px;font-size:.72rem;color:var(--muted);font-weight:700}
.app-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}.app-top h1{font-size:1.5rem;margin:0}.app-top p{font-size:.84rem;color:var(--muted);margin:4px 0 0}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:var(--sh-sm)}.tile span{font-size:.8rem;color:var(--muted);font-weight:600}.tile strong{display:block;font-size:1.6rem;font-weight:800}
.wallet-card{background:linear-gradient(135deg,#4b2fe0,#7b5cff 60%,#9a7bff);color:#fff;border-radius:22px;padding:22px;position:relative;overflow:hidden;box-shadow:0 18px 40px rgba(91,61,240,.35)}
.wallet-card::after{content:"";position:absolute;width:220px;height:220px;border-radius:50%;right:-60px;top:-80px;background:rgba(255,255,255,.12)}
.wallet-card small{opacity:.85;font-weight:600}.wallet-card strong{display:block;font-size:2.2rem;letter-spacing:-.03em;margin:2px 0 14px}
.wallet-card .btn{position:relative;z-index:1}
.qa{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.qa a{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 8px;border-radius:16px;background:var(--surface);border:1px solid var(--line);font-size:.8rem;font-weight:700;color:var(--ink-soft)}
.qa a span{width:44px;height:44px;border-radius:14px;background:var(--p-50);color:var(--p-600);display:grid;place-items:center}
.list-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.list-row{display:flex;gap:12px;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line-2);color:var(--ink)}.list-row:last-child{border-bottom:0}
.list-row .grow{flex:1;min-width:0}.list-row b{display:block;font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.list-row small{color:var(--muted);font-size:.76rem}
.amt-in{color:var(--ok);font-weight:800}.amt-out{color:var(--err);font-weight:800}
.section-title{display:flex;justify-content:space-between;align-items:center;margin:0 0 10px}.section-title h2{font-size:1.05rem;margin:0}.section-title a{font-size:.8rem;font-weight:700}
.bottom-nav{display:none}
.summary{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:18px}.summary .line{display:flex;justify-content:space-between;padding:6px 0;font-size:.9rem;color:var(--ink-soft)}.summary .total{border-top:1px solid var(--line);margin-top:8px;padding-top:12px;font-weight:800;font-size:1.1rem;color:var(--ink)}
.cart-item{display:flex;gap:14px;align-items:center;padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:18px;margin-bottom:12px}
.cart-item .grow{flex:1;min-width:0}.cart-item h3{margin:0;font-size:.98rem}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:12px;overflow:hidden}.qty button{width:34px;height:34px;border:0;background:var(--surface-2);cursor:pointer;color:var(--ink);display:grid;place-items:center}.qty input{width:44px;text-align:center;border:0;border-radius:0;padding:6px;background:var(--surface)}
.pay-opt{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1.5px solid var(--line);border-radius:16px;background:var(--surface);margin-bottom:10px;cursor:pointer}
.pay-opt.sel{border-color:var(--p-500);background:var(--p-50)}.pay-opt .grow{flex:1}.pay-opt b{display:block;font-size:.92rem}.pay-opt small{color:var(--muted)}
.success{text-align:center;max-width:520px;margin:20px auto}.success .tick{width:92px;height:92px;border-radius:50%;background:var(--ok-bg);color:var(--ok);display:grid;place-items:center;margin:0 auto 16px;box-shadow:0 0 0 12px rgba(22,163,74,.08)}
.sms-code{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:22px;text-align:center}.sms-code .code{font-size:2.4rem;font-weight:800;letter-spacing:.16em;color:var(--p-600);font-variant-numeric:tabular-nums;margin:6px 0 12px}
.status-line{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:700;padding:5px 12px;border-radius:99px}.status-line.wait{background:var(--ok-bg);color:var(--ok-ink)}
.progress{height:6px;border-radius:99px;background:var(--line-2);overflow:hidden}.progress i{display:block;height:100%;border-radius:99px;background:var(--p-500)}

/* ---------- admin ---------- */
.adm{display:grid;grid-template-columns:250px minmax(0,1fr);min-height:100vh;background:var(--bg)}
.adm-side{background:var(--navy);color:#fff;padding:20px 12px;position:sticky;top:0;height:100vh;overflow-y:auto;scrollbar-width:thin}
.adm-side .logo{color:#fff;padding:2px 10px 4px;font-size:1.25rem}.adm-side .logo .icon{color:#9b82ff}.adm-side .sub{padding:0 10px 14px;font-size:.66rem;color:#8e8aa8;font-weight:700;letter-spacing:.05em}
.adm-side .group-title{font-size:.68rem;color:#8b87b5;font-weight:700;padding:16px 12px 6px}
.adm-side a{display:flex;gap:11px;align-items:center;padding:9px 12px;border-radius:11px;color:#c9c5ea;font-size:.84rem;font-weight:600}
.adm-side a:hover{background:rgba(255,255,255,.07);color:#fff}.adm-side a.active{background:var(--p-600);color:#fff;box-shadow:0 8px 18px rgba(91,61,240,.35)}
.adm-online{margin-top:18px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.06);font-size:.78rem;font-weight:600;color:#d5d1f5;display:flex;align-items:center;gap:8px}.adm-online i{width:9px;height:9px;border-radius:50%;background:#34d399;box-shadow:0 0 0 4px rgba(52,211,153,.2)}
.adm-main{padding:0 26px 40px;min-width:0}
.adm-top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px;padding:14px 0;background:var(--bg)}
.adm-top .search-field{flex:1;max-width:560px}.adm-top .grow{flex:1}
.adm-user{display:flex;align-items:center;gap:10px}.adm-user b{display:block;font-size:.84rem;line-height:1.1}.adm-user small{font-size:.7rem;color:var(--muted)}
.adm-hello{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap;margin:10px 0 20px}.adm-hello h1{font-size:1.7rem;margin:0}.adm-hello p{color:var(--muted);margin:2px 0 0;font-size:.9rem}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:18px;display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:center;box-shadow:var(--sh-sm)}
.kpi-ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;grid-row:span 3;color:#fff}
.kpi small{color:var(--muted);font-size:.8rem;font-weight:600}.kpi strong{font-size:1.5rem;line-height:1.1;letter-spacing:-.02em}.kpi em{font-style:normal;font-size:.74rem;color:var(--muted)}
.kpi em b{color:var(--ok);display:inline-flex;align-items:center;gap:2px}.kpi em b.down{color:var(--err)}
.kpi .spark{grid-column:1 / -1;height:34px;margin-top:6px}
.k-purple{background:linear-gradient(135deg,#6d4cf5,#8d6bff)}.k-blue{background:linear-gradient(135deg,#3b6cf5,#5b8bff)}.k-green{background:linear-gradient(135deg,#16a34a,#34d07a)}.k-pink{background:linear-gradient(135deg,#e0359f,#ff5fc0)}
.grid-adm{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;margin-bottom:16px}.grid-adm.three{grid-template-columns:1.1fr 1fr 1fr}.grid-adm.eq{grid-template-columns:1fr 1fr}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:var(--sh-sm);min-width:0}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px}.panel-head h2{font-size:1.02rem;margin:0}.panel-head a{font-size:.78rem;font-weight:700}
.panel-head .badge{gap:6px}
.chart-wrap{width:100%;height:230px}.chart-wrap svg{width:100%;height:100%}
.donut-wrap{display:flex;align-items:center;gap:20px;flex-wrap:wrap;justify-content:center}.donut{position:relative;width:170px;height:170px}.donut svg{width:100%;height:100%;transform:rotate(-90deg)}
.donut .mid{position:absolute;inset:0;display:grid;place-content:center;text-align:center}.donut .mid strong{font-size:1.4rem;line-height:1}.donut .mid small{color:var(--muted);font-size:.72rem}
.legend{display:grid;gap:10px;font-size:.84rem;min-width:170px}.legend div{display:flex;align-items:center;gap:8px}.legend i{width:10px;height:10px;border-radius:50%;flex:none}.legend span{flex:1;color:var(--ink-soft)}.legend b{font-weight:700}
.data-tbl{width:100%;font-size:.84rem}.data-tbl th{background:none;padding:8px 10px;font-size:.74rem}.data-tbl td{padding:10px}
.who{display:flex;align-items:center;gap:10px}.who b{font-size:.84rem}
.dot-status{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:.78rem}.dot-status i{width:8px;height:8px;border-radius:50%;background:var(--ok)}.dot-status.off i{background:var(--err)}
.qa-adm{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}.qa-adm a{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;font-size:.74rem;font-weight:700;color:var(--ink-soft);padding:8px 2px;border-radius:12px}
.qa-adm a span{width:46px;height:46px;border-radius:50%;background:var(--p-50);color:var(--p-600);display:grid;place-items:center}
.promo{background:linear-gradient(120deg,#3a1fbc,#7a4dff);color:#fff;border-radius:16px;padding:16px 18px;display:flex;align-items:center;gap:14px}.promo b{display:block}.promo small{opacity:.85}.promo .grow{flex:1}
.adm-mobile-bar{display:none}
.adm-main .card,.adm-main .table-wrap{margin-bottom:16px}
.adm-main .table-wrap table td .btn,.adm-main .table-wrap table td form{margin:2px 0}
.up-box{border:2px dashed var(--p-200);border-radius:18px;background:var(--p-50);padding:16px;display:grid;grid-template-columns:200px 1fr;gap:18px;align-items:center}
.up-preview{aspect-ratio:16/9;border-radius:14px;background:linear-gradient(120deg,var(--navy),#4b1d96) center/cover;border:1px solid var(--line);display:grid;place-items:center;color:#cfc9f7;font-size:.74rem;text-align:center;padding:8px}
.range{width:100%;accent-color:var(--p-600)}

/* ---------- responsive ---------- */
@media(max-width:1100px){
  .nav-search{display:none}.kpis{grid-template-columns:repeat(2,1fr)}.grid-adm,.grid-adm.three,.grid-adm.eq{grid-template-columns:1fr}
  .more-grid{grid-template-columns:repeat(2,1fr)}.svc-layout{grid-template-columns:1fr}.how{grid-template-columns:1fr}
}
@media(max-width:900px){
  .nav-inner{height:60px}.nav-toggle{display:block}.nav-actions{display:none}
  .nav-links{display:none;position:absolute;top:60px;left:0;right:0;flex-direction:column;align-items:stretch;background:var(--navy);border-bottom:1px solid rgba(255,255,255,.1);padding:10px 16px 16px;gap:2px}
  .nav-links.open{display:flex}.nav-links .mobile-only{display:flex}.nav-drop-menu{position:static;display:block;background:transparent;border:0;box-shadow:none;padding:0 0 0 12px}.nav-drop-menu a{color:#d5d1f5}.nav-drop>button{display:none}
  .layout-side{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr}.footer-grid>div:first-child{grid-column:1/-1}
  .hero2-grid{grid-template-columns:1fr;min-height:auto}.hero2-copy{padding:48px 0 8px}.hero2-art{min-height:440px}.hero-note{display:none}
  .stat-grid{grid-template-columns:repeat(2,1fr)}.stat-grid>div{padding:12px 8px;border-bottom:1px solid var(--line-2)}.stat-grid>div:nth-child(2){border-right:0}
  .svc-cards{grid-template-columns:repeat(2,1fr)}.faq-grid{grid-template-columns:1fr}
  .legal{grid-template-columns:1fr}.legal-toc{position:static}.legal-body{padding:24px 20px}
  /* customer app becomes a phone-style app */
  .dash{grid-template-columns:1fr;padding:18px 0 calc(90px + var(--safe-b))}.dash-nav{display:none}
  .bottom-nav{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--surface);border-top:1px solid var(--line);padding:6px 4px calc(6px + var(--safe-b));box-shadow:0 -8px 24px rgba(14,10,46,.08)}
  .bottom-nav a{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:.66rem;font-weight:700;color:var(--muted);padding:6px 0}.bottom-nav a.active{color:var(--p-600)}
  .to-top{bottom:calc(84px + var(--safe-b))}
  .cc{left:12px;bottom:calc(84px + var(--safe-b))}
  .cb-user-page .footer{display:none}
  /* admin */
  .adm{grid-template-columns:1fr}.adm-side{display:none}.adm-main{padding:0 14px calc(84px + var(--safe-b))}
  .adm-mobile-bar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--surface);border-top:1px solid var(--line);padding:6px 4px calc(6px + var(--safe-b))}
  .adm-mobile-bar a{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:.66rem;font-weight:700;color:var(--muted);padding:6px 0}.adm-mobile-bar a.active{color:var(--p-600)}
  .adm-top{padding:12px 0}.adm-top .search-field,.adm-user div{display:none}.adm-mobile-menu{display:inline-grid!important}
  .up-box{grid-template-columns:1fr}
}
@media(max-width:600px){
  .section{padding:52px 0}.container{padding:0 16px}.footer-grid{grid-template-columns:1fr}
  .svc-cards{grid-template-columns:1fr 1fr}.pop-grid{grid-template-columns:repeat(2,1fr)}.more-grid{grid-template-columns:1fr}
  .hero2-art{min-height:390px}.phone{width:220px}.phone-screen{min-height:380px}.trust-row{gap:12px;font-size:.76rem}
  .kpis{gap:10px}.kpi{grid-template-columns:1fr;padding:14px}.kpi-ic{grid-row:auto;width:38px;height:38px}.kpi strong{font-size:1.25rem}
  .app-top h1{font-size:1.3rem}.qa-adm{grid-template-columns:repeat(4,1fr)}.web-strip,.cta-band,.flash-strip{padding:22px 20px}
  .fl-timer div{min-width:50px;padding:6px 8px}
}
.adm-mobile-menu{display:none}

@media(max-width:900px){.adm-side{display:block;position:fixed;left:0;top:0;bottom:0;width:270px;z-index:90;transform:translateX(-100%);transition:transform .22s ease}.adm-side.open{transform:none;box-shadow:0 0 0 100vmax rgba(14,10,46,.55)}}

/* ==========================================================================
   Customer app v2 (matches cloudyboost_layouts_hd screens)
   App bar + bottom tabs on phones, sidebar on desktop. No public header here.
   ========================================================================== */
.cb-user-page{background:var(--bg)}
.app-shell{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100vh}
.app-side{background:var(--surface);border-right:1px solid var(--line);padding:18px 12px 24px;position:sticky;top:0;height:100vh;overflow-y:auto;scrollbar-width:thin}
.app-side .logo{padding:4px 10px 12px;font-size:1.2rem}
.app-side h5{margin:14px 12px 4px;font-size:.72rem;color:var(--muted);font-weight:700}
.app-side a.nav-i{display:flex;gap:11px;align-items:center;padding:10px 12px;border-radius:12px;color:var(--ink-soft);font-weight:600;font-size:.88rem}
.app-side a.nav-i:hover{background:var(--p-50);color:var(--p-700)}
.app-side a.nav-i.active{background:#5a58f2;color:#fff}
.app-main{min-width:0;display:flex;flex-direction:column}
.app-bar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:10px;min-height:64px;padding:10px 28px;background:var(--surface);border-bottom:1px solid var(--line-2)}
.app-bar h1{font-size:1.15rem;margin:0;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:-.01em;color:#1a1f5c}
:root[data-theme="dark"] .app-bar h1{color:var(--ink)}
.app-back{display:none;width:40px;height:40px;place-items:center;border-radius:12px;color:#1a1f5c;margin-left:-8px}
:root[data-theme="dark"] .app-back{color:var(--ink)}
.app-brand{display:none;color:var(--p-600)}
.app-bar-actions{display:flex;align-items:center;gap:8px}
.app-wallet{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:.84rem;padding:8px 12px;border-radius:12px;background:var(--p-50);color:var(--p-700)}
.link-btn{background:none;border:0;padding:6px 2px;font:700 .9rem var(--font);color:#5a58f2;cursor:pointer}
.app-content{width:100%;max-width:820px;margin:0 auto;padding:26px 28px 70px}

/* controls in the app */
.app-shell .btn-primary{background:#5a58f2;box-shadow:none}
.app-shell .btn-primary:hover{background:#4c4ae0;box-shadow:none}
.app-shell .btn-outline{color:#4c4ae0;border-color:#8f8df5;background:var(--surface)}
.btn-app{width:100%;padding:15px 20px;border-radius:14px;font-size:1rem;font-weight:700}
.app-shell .btn-cart{background:#3d5af1;color:#fff}.app-shell .btn-cart:hover{background:#3149d6;color:#fff}
.app-shell .btn-buy{background:#7c62f5;color:#fff}.app-shell .btn-buy:hover{background:#6a4ee6;color:#fff}
.app-content .search-field input{border-radius:14px;padding:13px 14px 13px 42px;background:var(--surface)}
.app-content select{border-radius:14px;padding:14px 14px;background:var(--surface)}
.app-content label{color:#1a1f5c;font-size:.95rem}
:root[data-theme="dark"] .app-content label{color:var(--ink)}
.lbl{font-size:.95rem;margin:0 0 8px}.lbl-lg{font-size:1.15rem;margin:0 0 12px}
.app-content .chip{background:var(--p-50);border-color:transparent;color:var(--muted);padding:9px 18px}
.app-content .chip.active{background:#5a58f2;color:#fff}
.app-content .card,.app-content .list-card,.app-content .tile{border-radius:18px;box-shadow:none}

/* wallet card + round actions */
.wallet-card{background:linear-gradient(135deg,#4d47e8,#7a63f7);box-shadow:none;border-radius:20px;padding:20px}
.wallet-card strong{font-size:2.4rem;margin:2px 0 14px}
.wallet-card .btn-block{width:100%;padding:14px;border-radius:12px;color:#4c4ae0}
.ra{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}
.ra a{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:.86rem;font-weight:600;color:var(--muted)}
.ra a span{width:60px;height:60px;border-radius:50%;background:var(--p-50);color:#4c4ae0;display:grid;place-items:center}
.flat-list{display:grid}
.flat-row{display:flex;align-items:center;gap:14px;padding:12px 0}
.flat-row .grow{flex:1;min-width:0}.flat-row b{display:block;font-size:.95rem;font-weight:600;color:var(--ink-soft)}.flat-row small{color:var(--muted);font-size:.8rem}
.tx-ic{width:44px;height:44px;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center;flex:none;box-shadow:0 0 0 5px var(--ok-bg)}
.row-price{text-align:right;display:grid;gap:4px;justify-items:end}.row-price b{font-size:.95rem}
.row-btn{width:100%;background:none;border:0;border-bottom:1px solid var(--line-2);font:inherit;text-align:left;cursor:pointer}
.svc-chev{color:#4c4ae0;display:inline-grid;place-items:center}
.more-user{display:flex;gap:14px;align-items:center}.more-user b{display:block}.more-user small{display:block}

/* buy + service tiles */
.pd-head{display:flex;gap:16px;align-items:center}
.pd-rating{margin:0;display:flex;gap:6px;align-items:center;font-size:.95rem;color:var(--ink-soft)}
.star-on{color:#f5a524;display:inline-grid}.star-on .icon{fill:currentColor}
.buy-form .field{margin-bottom:14px}
.svc-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.svc-tile{display:flex;flex-direction:column;gap:4px;padding:16px;border:1px solid var(--line);border-radius:18px;background:var(--surface);color:var(--ink);min-width:0}
.svc-tile:hover{border-color:var(--p-300);color:var(--ink)}
.svc-tile-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px}
.svc-tile b{font-size:.98rem;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:#1a1f5c}
:root[data-theme="dark"] .svc-tile b{color:var(--ink)}
.svc-tile small{color:var(--muted);font-size:.9rem}

/* product details */
.pd-price{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pd-now{font-size:2.3rem;font-weight:800;letter-spacing:-.03em;line-height:1.1;color:#10143f}
:root[data-theme="dark"] .pd-now{color:var(--ink)}
.pd-was{color:var(--muted);font-size:1.15rem;font-weight:600}
.pill-off{background:#5a4cf0;color:#fff;border-radius:99px;padding:9px 20px;font-weight:800;font-size:.9rem}
.soft-pills{display:flex;gap:10px;flex-wrap:wrap}
.soft-pill{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:99px;background:var(--ok-bg);color:var(--ok-ink);font-weight:700;font-size:.92rem}
.soft-pill.bad{background:var(--err-bg);color:var(--err-ink)}.soft-pill.warn{background:var(--warn-bg);color:var(--warn-ink)}
.pd-buy{display:grid;gap:12px}
.pd-buy .field{margin-bottom:2px}
.qty{border-radius:14px;background:var(--surface)}
.app-content .qty button{background:transparent;width:44px;height:44px}
.app-content .qty button:disabled{opacity:.4;cursor:not-allowed}
.app-content .qty input{width:56px;font-weight:700;padding:8px 0;-moz-appearance:textfield}
.qty .qv{min-width:44px;text-align:center;font-weight:700}
.info-list{background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.info-row{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--line-2);color:var(--ink)}
.info-row:last-child{border-bottom:0}
.info-row span{flex:1;font-weight:600;color:#1a1f5c;font-size:.95rem}
:root[data-theme="dark"] .info-row span{color:var(--ink)}
.info-row b{font-weight:500;color:var(--muted);font-size:.95rem;text-align:right}
.info-row .icon{color:var(--muted)}

/* cart */
.ci-list{display:grid;gap:12px}
.ci{display:flex;gap:14px;align-items:center;padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:18px}
.ci-body{flex:1;min-width:0;display:grid;gap:4px;justify-items:start}
.ci-name{font-weight:700;color:#1a1f5c;line-height:1.3}
:root[data-theme="dark"] .ci-name{color:var(--ink)}
.ci-meta{font-size:.84rem;color:var(--muted)}
.ci-price{font-size:1.02rem}
.qty-form{margin-top:6px}
.ci-del{background:none;border:0;color:#10143f;cursor:pointer;padding:8px;border-radius:10px}
.ci-del:hover{background:var(--err-bg);color:var(--err)}
:root[data-theme="dark"] .ci-del{color:var(--ink-soft)}
.coupon-row{display:flex;gap:10px}.coupon-row input{flex:1;border-radius:14px}
.coupon-row .btn{padding:0 26px;border-radius:14px}
.sum{display:grid;gap:2px;padding:4px 2px}
.sum .line{display:flex;justify-content:space-between;padding:8px 2px;color:var(--muted);font-size:1rem}
.sum .disc{color:var(--ok);font-weight:600}
.sum .total{border-top:1px solid var(--line);margin-top:6px;padding-top:14px;color:#10143f;font-weight:800;font-size:1.25rem}
:root[data-theme="dark"] .sum .total{color:var(--ink)}
.empty-state{text-align:center;padding:40px 20px}
.empty-ic{width:68px;height:68px;border-radius:50%;background:var(--p-50);color:var(--p-600);display:grid;place-items:center;margin:0 auto 14px}

/* checkout */
.pay-opt{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1.5px solid var(--line);border-radius:16px;background:var(--surface);margin-bottom:12px;cursor:pointer;color:var(--ink)}
.pay-opt.sel{border-color:#6c6af5;background:var(--p-50)}
.pay-opt input[type=radio]{position:absolute;opacity:0;pointer-events:none}
.pay-radio{width:26px;height:26px;border-radius:50%;border:2px solid #4c4ae0;display:grid;place-items:center;flex:none}
.pay-radio::after{content:"";width:12px;height:12px;border-radius:50%;background:#4c4ae0}
.pay-opt .grow{flex:1}.pay-opt b{display:block;font-size:1.02rem}.pay-opt small{color:var(--muted);font-size:.95rem}.pay-opt small.bad{color:var(--err)}
.pay-opt .icon{color:#4c4ae0}
details.pay-opt{display:block;padding:0}
details.pay-opt summary{display:flex;align-items:center;gap:14px;padding:16px 18px;cursor:pointer;list-style:none;font-weight:600;color:var(--ink-soft)}
details.pay-opt summary::-webkit-details-marker{display:none}
details.pay-opt summary .grow{flex:1}
details.pay-opt[open] summary .icon:last-child{transform:rotate(180deg)}
details.pay-opt p{margin:0;padding:0 18px 10px;color:var(--muted);font-size:.9rem}
details.pay-opt .btn{margin:0 18px 16px}
.secure-note{display:flex;justify-content:center;align-items:center;gap:8px;color:var(--muted);font-size:.86rem;margin:0}
.secure-note .icon{color:#1a1f5c}

/* order success */
.success-hero{text-align:center;position:relative;padding-top:10px}
.success-hero h2{font-size:1.5rem;margin:18px 0 8px;color:#1a1f5c}
:root[data-theme="dark"] .success-hero h2{color:var(--ink)}
.tick-wrap{width:150px;height:150px;border-radius:50%;background:var(--ok-bg);display:grid;place-items:center;margin:0 auto}
.tick{width:104px;height:104px;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center}
.tick .icon{stroke-width:3}
.confetti{position:absolute;left:50%;top:0;width:260px;height:190px;transform:translateX(-50%);pointer-events:none}
.confetti i{position:absolute;width:10px;height:10px;border-radius:2px;background:#5a58f2}
.confetti i:nth-child(1){left:14%;top:18%;background:#22c55e;transform:rotate(30deg);width:14px;height:8px}
.confetti i:nth-child(2){left:44%;top:2%;background:#4f7cff}
.confetti i:nth-child(3){left:80%;top:4%;background:#3b82f6;width:16px;height:8px;transform:rotate(-35deg)}
.confetti i:nth-child(4){left:26%;top:30%;background:#a855f7;transform:rotate(20deg)}
.confetti i:nth-child(5){left:6%;top:50%;background:#ef4444;width:14px;height:8px;transform:rotate(-40deg)}
.confetti i:nth-child(6){left:88%;top:30%;background:#f59e0b;border-radius:50%}
.confetti i:nth-child(7){left:96%;top:48%;background:#a855f7;transform:rotate(45deg)}
.confetti i:nth-child(8){left:24%;top:80%;background:#3b82f6;width:6px;height:6px;border-radius:50%}
.confetti i:nth-child(9){left:78%;top:82%;background:#22c55e;width:6px;height:6px;border-radius:50%}
.confetti i:nth-child(10){left:60%;top:0;background:#ef4444;width:6px;height:6px;border-radius:50%}
.os-card{padding:20px}
.os-top{display:flex;gap:16px;align-items:center;padding-bottom:16px;border-bottom:1px solid var(--line-2)}
.os-top b{display:block;font-size:1.05rem;color:#1a1f5c}.os-top span{display:block}
:root[data-theme="dark"] .os-top b{color:var(--ink)}
.os-bottom{display:flex;justify-content:space-between;padding-top:14px}
.os-bottom small{display:block;color:var(--muted)}.os-bottom b{font-size:1.15rem}

/* my orders */
.oc-list{display:grid;gap:14px}
.oc{display:flex;gap:14px;align-items:center;padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:18px}
.oc-body{flex:1;min-width:0;display:grid;gap:2px}
.oc-body b{font-size:1.02rem;color:#1a1f5c}
:root[data-theme="dark"] .oc-body b{color:var(--ink)}
.oc-name{color:var(--ink-soft);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oc-sub{color:var(--muted);font-size:.9rem}.oc-body small{color:var(--muted);font-size:.86rem}
.oc-side{display:grid;gap:10px;justify-items:end;flex:none}
.oc-side .badge{padding:7px 14px;font-size:.82rem}
.oc-side .btn{padding:9px 24px;border-radius:12px;font-size:.95rem}
.oc-sum{display:grid;gap:12px}.oc-sum-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.oc-sum-row .muted:last-child{margin-left:auto}

/* active number / order delivery */
.an-card{display:grid;gap:16px}
.status-pill{display:inline-flex;align-items:center;gap:6px;justify-self:start;padding:8px 16px;border-radius:99px;background:var(--ok-bg);color:var(--ok-ink);font-weight:700;font-size:.9rem}
.status-pill.muted-pill{background:var(--line-2);color:var(--muted)}
.an-head{display:flex;gap:16px;align-items:center}.an-head b{display:block;font-size:1.05rem;color:#1a1f5c}.an-head span{font-size:.9rem}
:root[data-theme="dark"] .an-head b{color:var(--ink)}
.code-box{background:var(--p-50);border:1px solid var(--p-100);border-radius:18px;padding:20px;text-align:center}
.code-label{display:block;font-size:.85rem;font-weight:700;color:var(--muted);letter-spacing:.04em}
.code-val{font-size:2.5rem;font-weight:800;letter-spacing:.08em;color:#2f3ee8;margin:6px 0 14px;word-break:break-word;font-variant-numeric:tabular-nums}
.code-box .btn{padding:13px 34px;border-radius:12px}
.wait-row{display:flex;justify-content:space-between;align-items:flex-end;gap:14px}
.timer-box{display:inline-block;font-size:1.3rem;font-weight:800;padding:14px 22px;border:1px solid var(--line);border-radius:14px;background:var(--surface);font-variant-numeric:tabular-nums;color:#1a1f5c}
:root[data-theme="dark"] .timer-box{color:var(--ink)}
.wait-row .btn{padding:13px 26px;border-radius:12px}
.info-note{display:flex;gap:12px;align-items:flex-start;padding:16px;background:var(--p-50);border-radius:14px;color:var(--muted);font-size:.95rem}
.info-note .icon{margin-top:2px;flex:none}
.is-loading{opacity:.6;pointer-events:none}

/* tablet + phone: app bar with back arrow, bottom tabs, no sidebar */
@media(max-width:900px){
  .app-shell{display:block}
  .app-side{display:none}
  .app-bar{padding:calc(10px + env(safe-area-inset-top,0px)) 16px 10px;min-height:0}
  .app-back{display:grid}
  .app-brand{display:grid}
  .app-wallet{display:none}
  .app-content{padding:16px 16px calc(96px + var(--safe-b))}
}
@media(max-width:420px){
  .pd-now{font-size:2rem}
  .svc-tiles{gap:10px}
  .code-val{font-size:2.1rem}
}


/* ==========================================================================
   Admin v2 - matches cloudyboost_desktop_dashboard / cloudyboost_mobile_dashboard
   ========================================================================== */
@media(min-width:901px){.adm{grid-template-columns:232px minmax(0,1fr)}}
.adm-side{background:linear-gradient(180deg,#1b1259 0%,#120b45 55%,#0d0836 100%);padding:18px 14px 16px;display:flex;flex-direction:column;gap:2px}
.adm-side .logo{display:flex;align-items:center;gap:10px;padding:2px 8px 14px;color:#fff}
.adm-side .logo .icon{color:#8b6bff}
.adm-side .logo span{font-size:1.3rem;font-weight:800;line-height:1.05;letter-spacing:-.02em}
.adm-side .logo small{display:block;font-size:.64rem;letter-spacing:.07em;color:#8f7bff;font-weight:700;margin-top:3px}
.adm-side .group-title{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:#8f95d6;padding:16px 10px 6px;font-weight:700}
.adm-side .nav-i{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:10px;color:#d7d9f7;font-weight:600;font-size:.86rem}
.adm-side .nav-i span{flex:1}.adm-side .nav-i .chev{opacity:.6;display:grid}
.adm-side .nav-i:hover{background:rgba(255,255,255,.07);color:#fff}
.adm-side .nav-i.active{background:linear-gradient(90deg,#7a5cff,#6a4af5);color:#fff;box-shadow:0 8px 18px rgba(106,74,245,.4)}
.adm-online{margin-top:auto;background:none;border-radius:0;border-top:1px solid rgba(255,255,255,.1);padding:16px 8px 4px}
.adm-side>.group-title:first-of-type{padding-top:14px}
.adm-main{padding:0 28px 40px}
.adm-top{background:var(--surface);margin:0 -28px 22px;padding:12px 28px;border-bottom:1px solid var(--line);gap:14px}
.adm-top .icon-btn{border:0;background:none;color:var(--ink-soft)}.adm-top .icon-btn:hover{background:var(--p-50);color:var(--p-700)}
.adm-menu-btn{margin-right:-4px}
.adm-top .search-field{flex:0 1 400px}.adm-top .search-field input{background:var(--surface-2);border-color:transparent}
.adm-bell .dot{top:2px;right:2px}
.adm-user{position:relative}
.adm-user summary{list-style:none;display:flex;align-items:center;gap:10px;cursor:pointer}.adm-user summary::-webkit-details-marker{display:none}
.adm-user .avatar{width:38px;height:38px;flex:none;background:#0e0a2e;color:#fff;border-radius:50%;display:grid;place-items:center;font-weight:800}
.who-txt b{display:block;font-size:.86rem;line-height:1.15}.who-txt small{color:var(--muted);font-size:.72rem}.caret{color:var(--muted);display:grid}
.adm-user:not([open]) .adm-menu{display:none}
.adm-user[open] .adm-menu{display:block}
.adm-menu{position:absolute;right:0;top:calc(100% + 10px);min-width:200px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-lg);padding:6px;z-index:60}
.adm-menu a,.adm-menu button{display:flex;gap:10px;align-items:center;width:100%;padding:10px 12px;border-radius:9px;border:0;background:none;color:var(--ink-soft);font:600 .86rem var(--font);cursor:pointer;text-align:left}
.adm-menu a:hover,.adm-menu button:hover{background:var(--p-50);color:var(--p-700)}
.m-logo,.show-m{display:none}
.adm.collapsed{grid-template-columns:minmax(0,1fr)}.adm.collapsed .adm-side{display:none}
.adm-hello{align-items:center;margin:4px 0 20px}.adm-hello h1{font-size:1.65rem}
.hello-right{display:flex;align-items:center;gap:18px}
.hello-date{text-align:right;font-size:.86rem;color:var(--ink-soft);font-weight:600;line-height:1.3}.hello-date small{display:block;color:var(--muted);font-weight:500;font-size:.78rem}
.kpi{display:flex;align-items:flex-start;gap:14px;position:relative;padding:18px}
.kpi-ic{grid-row:auto;flex:none;width:52px;height:52px;border-radius:14px}
.kpi-body{min-width:0}.kpi-body small{display:block;color:var(--ink-soft);font-weight:600;font-size:.84rem}
.kpi-body strong{display:block;font-size:1.7rem;margin:2px 0 6px;color:var(--ink)}
.kpi em{display:block;font-style:normal;font-size:.76rem;color:var(--muted);line-height:1.35}
.kpi em b{display:block;font-size:.84rem}.kpi em b.up{color:var(--ok)}.kpi em b.down{color:var(--err)}
.kpi .spark{position:absolute;right:16px;bottom:16px;width:96px;height:38px;margin:0}
.panel-head h2{font-size:1.05rem}
.range-pick{position:relative}
.range-pick select{appearance:none;-webkit-appearance:none;border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:7px 30px 7px 12px;font:600 .8rem var(--font);color:var(--ink);cursor:pointer}
.range-pick span{position:absolute;right:9px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--muted);display:grid}
.donut{width:160px;height:160px}.legend{flex:1;min-width:190px;gap:14px}.legend b em{font-style:normal;color:var(--muted);font-weight:600}
.data-tbl th{background:var(--surface-2);color:var(--ink-soft);font-size:.76rem;font-weight:700;text-transform:none;letter-spacing:0;border-bottom:0}
.data-tbl th:first-child{border-radius:10px 0 0 10px}.data-tbl th:last-child{border-radius:0 10px 10px 0}
.data-tbl td{border-bottom:1px solid var(--line-2)}.data-tbl tr:last-child td{border-bottom:0}
.btn-view{display:inline-block;padding:5px 16px;border-radius:8px;background:var(--p-50);color:var(--p-700);font-weight:700;font-size:.76rem}.btn-view:hover{background:var(--p-100)}
.pill{display:inline-flex;gap:6px;align-items:center;padding:3px 10px;border-radius:99px;font-size:.74rem;font-weight:700}.pill i{width:7px;height:7px;border-radius:50%}
.pill.on{background:var(--ok-bg);color:var(--ok-ink)}.pill.on i{background:var(--ok)}.pill.off{background:var(--err-bg);color:var(--err-ink)}.pill.off i{background:var(--err)}
.pv-ic{width:26px;height:26px;border-radius:8px;background:var(--p-50);color:var(--p-700);display:grid;place-items:center;font-weight:800;font-size:.72rem;flex:none}
.qa-adm a span{border-radius:14px;background:var(--surface);border:1px solid var(--line);color:var(--ink)}
.promo{background:linear-gradient(120deg,#3417b3,#6d4cf5);border-radius:14px}.promo small{display:block;margin-bottom:10px}
.only-mob{display:none!important}
.m-list{display:block}.m-row{display:grid;grid-template-columns:38px 1fr auto auto;column-gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line-2);color:var(--ink)}
.m-row:last-child{border-bottom:0}.m-row>:nth-child(1),.m-row>:nth-child(2),.m-row>:nth-child(3){grid-row:1 / 3}
.m-row .grow b{display:block;font-size:.84rem}.m-row .grow small{color:var(--muted);font-size:.78rem}.m-amt{text-align:right;font-size:.86rem}
.m-row .badge{grid-column:4;grid-row:1;justify-self:end}.m-time{grid-column:4;grid-row:2;justify-self:end;font-size:.72rem}
.adm-mobile-bar button{background:none;border:0;cursor:pointer;font-family:var(--font)}

@media(min-width:901px){.adm.collapsed{grid-template-columns:minmax(0,1fr)}}
@media(max-width:900px){
  .adm,.adm.collapsed{grid-template-columns:1fr}
  .adm-side,.adm.collapsed .adm-side{display:flex;position:fixed;left:0;top:0;bottom:0;height:auto;width:270px;z-index:90;transform:translateX(-100%);transition:transform .22s ease}
  .adm-side.open{transform:none;box-shadow:0 0 0 100vmax rgba(14,10,46,.55)}
  .adm-main{padding:0 14px calc(84px + var(--safe-b))}
  .adm-top{background:var(--navy);color:#fff;margin:0 -14px 16px;padding:calc(10px + env(safe-area-inset-top,0px)) 14px 10px;border-bottom:0;gap:10px}
  .adm-top .icon-btn{color:#fff}.adm-top .icon-btn:hover{background:rgba(255,255,255,.1);color:#fff}
  .adm-top .search-field,.hide-m,.who-txt,.caret{display:none}
  .m-logo{display:flex;align-items:center;gap:8px;color:#fff}.m-logo .icon{color:#8b6bff}
  .m-logo span{font-weight:800;font-size:1.05rem;line-height:1.05}.m-logo small{display:block;font-size:.58rem;letter-spacing:.06em;color:#a99bff}
  .adm-user .avatar{background:var(--p-500)}
  .show-m{display:flex}
  .adm-hello h1{font-size:1.3rem}.hello-right{width:100%;justify-content:space-between}.adm-hello .btn{padding:9px 16px}
  .only-desk{display:none}.only-mob{display:block!important}
  .adm-mobile-bar{grid-template-columns:repeat(4,1fr);background:linear-gradient(180deg,#1a1150,#120b45);border-top:0}
  .adm-mobile-bar a,.adm-mobile-bar button{color:#b9b6e6}.adm-mobile-bar a.active{color:#a58bff}
  .adm-mobile-bar a,.adm-mobile-bar button{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:.68rem;font-weight:700;padding:6px 0}
}
@media(max-width:600px){
  .kpi{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;align-items:center;padding:12px}
  .kpi-body{display:contents}
  .kpi-ic{width:32px;height:32px;border-radius:10px;grid-row:1}
  .kpi-body small{grid-column:2;grid-row:1;font-size:.8rem}
  .kpi-body strong{grid-column:1 / -1;font-size:1.35rem;margin:2px 0 0}
  .kpi em{grid-column:1 / -1}.kpi em span{display:none}
  .kpi .spark{width:62px;height:28px;right:12px;bottom:12px}
  .donut{width:130px;height:130px}.donut-wrap{flex-wrap:nowrap;gap:14px}.legend{min-width:0}
}

/* ---------- customer app additions: currency picker, bell, theme switcher ---------- */
.wallet-card .wc-amount{display:flex;align-items:center;gap:12px;margin:2px 0 14px;position:relative;z-index:1}
.wallet-card .wc-amount strong{margin:0}
.cur-pick{position:relative;flex:none}
.cur-pick select{appearance:none;-webkit-appearance:none;background:rgba(255,255,255,.2);color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:99px;padding:6px 30px 6px 14px;font:700 .85rem var(--font);cursor:pointer}
.cur-pick select option{color:#151a42;background:#fff}
.cur-pick select:focus-visible{outline:3px solid rgba(255,255,255,.5)}
.cur-chev{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none;color:#fff;display:grid}
.ic-sun,.ic-moon{display:inline-grid;place-items:center}
.theme-btn .ic-moon{display:none}
:root[data-theme="dark"] .theme-btn .ic-sun{display:none}
:root[data-theme="dark"] .theme-btn .ic-moon{display:inline-grid}
.nav-theme{flex:none}
@media(max-width:900px){.nav-theme{margin-left:auto}.nav-toggle{margin-left:4px}}
.app-bar-actions .theme-btn{color:var(--p-600)}

.kpi .spark{width:74px;height:32px;right:14px;bottom:14px}
.grid-adm.wide{grid-template-columns:2fr 1fr}
.tbl-scroll{overflow-x:auto}
.data-tbl th,.data-tbl td{white-space:nowrap;padding:10px 8px}
.grid-adm.three .data-tbl{font-size:.78rem}
@media(max-width:1100px){.grid-adm.wide{grid-template-columns:1fr}}

/* tighter admin sizing so the dashboard fits ~1280px laptops */
@media(min-width:901px){.adm{grid-template-columns:220px minmax(0,1fr)}}
.adm-main{padding:0 22px 36px}.adm-top{margin:0 -22px 20px;padding:12px 22px}
.data-tbl{font-size:.78rem}.data-tbl th,.data-tbl td{padding:9px 6px}
.data-tbl .who{gap:8px}
.kpi{container-type:inline-size}
@media(min-width:601px){
  @container (max-width:245px){.kpi{gap:12px}.kpi-ic{width:46px;height:46px}.kpi .spark{width:54px;height:28px}.kpi-body strong{font-size:1.5rem}}
  @container (max-width:185px){.kpi .spark{display:none}}
}
.grid-adm.wide .data-tbl{font-size:.75rem}.grid-adm.wide .data-tbl th,.grid-adm.wide .data-tbl td{padding:9px 5px}
.grid-adm.wide{grid-template-columns:2.05fr 1fr}
.btn-view{padding:4px 12px}

/* ==========================================================================
   v3: sign-in dialogs, admin polish, payment + provider settings
   ========================================================================== */
/* ---------- sign-in pages and dialog ---------- */
.cb-auth-page{background:radial-gradient(1200px 500px at 50% -10%,var(--p-100),transparent 70%),var(--bg)}
:root[data-theme="dark"] .cb-auth-page{background:radial-gradient(1000px 500px at 50% -10%,#2a1f7a55,transparent 70%),var(--bg)}
.auth-stage{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px 16px calc(24px + var(--safe-b))}
.auth-brand{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:800;font-size:1.35rem;letter-spacing:-.02em}.auth-brand .icon{color:var(--p-500)}
.auth-brand span{display:flex;flex-direction:column;line-height:1.05}.auth-brand small{font-size:.62rem;letter-spacing:.09em;color:var(--p-500);font-weight:700;margin-top:3px}
.auth-back{display:inline-flex;gap:6px;align-items:center;font-size:.86rem;font-weight:600;color:var(--muted)}.auth-back:hover{color:var(--p-600)}
.auth-dialog{position:relative;width:100%;max-width:430px;background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:28px 26px 24px;box-shadow:var(--sh-lg)}
.auth-head{text-align:center;margin-bottom:18px}.auth-head h1,.auth-head h2{font-size:1.5rem;margin:12px 0 4px}.auth-head p{margin:0;font-size:.9rem}
.auth-logo{display:inline-grid;place-items:center;width:54px;height:54px;border-radius:16px;background:var(--p-50);color:var(--p-600)}
.is-admin .auth-logo{background:var(--navy);color:#a58bff}
.is-admin .auth-dialog{border-top:4px solid var(--p-500)}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--surface-2);border:1px solid var(--line);padding:4px;border-radius:14px;margin-bottom:18px}
.auth-tabs a,.auth-tabs button{display:block;text-align:center;padding:10px;border-radius:10px;border:0;background:none;font:700 .9rem var(--font);color:var(--muted);cursor:pointer}
.auth-tabs .active{background:var(--surface);color:var(--p-700);box-shadow:0 1px 4px rgba(21,26,66,.12)}
.auth-form .field{margin-bottom:14px}.auth-form label{font-weight:700;font-size:.86rem;display:block;margin-bottom:6px}
.auth-form input{width:100%;padding:13px 14px;border-radius:12px;font-size:1rem}
.auth-row{display:flex;justify-content:space-between;margin:-4px 0 14px;font-size:.84rem;font-weight:600}
.auth-legal{margin:14px 0 0;text-align:center;font-size:.78rem;color:var(--muted)}
.auth-dialog .flash{margin:0 0 14px}
.btn-google{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:13px 16px;border-radius:12px;background:#fff;color:#1f2350;border:1px solid #dadce0;font:700 .95rem var(--font);transition:box-shadow .15s,background .15s}
.btn-google:hover{background:#f8f9fb;color:#1f2350;box-shadow:0 2px 10px rgba(21,26,66,.12)}
.auth-or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:.78rem;margin:16px 0}.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:var(--line)}
.auth-modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:16px;overflow-y:auto}.auth-modal[hidden]{display:none}
.auth-backdrop{position:fixed;inset:0;background:rgba(14,10,46,.6);backdrop-filter:blur(3px)}
.auth-modal .auth-dialog{z-index:1;margin:auto;animation:authIn .2s ease}
.auth-x{position:absolute;right:14px;top:14px;width:36px;height:36px;border-radius:50%;border:0;background:var(--surface-2);color:var(--ink-soft);cursor:pointer;display:grid;place-items:center}.auth-x:hover{background:var(--p-50);color:var(--p-700)}
@keyframes authIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
body.auth-open{overflow:hidden}
@media(max-width:480px){.auth-dialog{padding:22px 18px;border-radius:20px}.auth-modal{align-items:end;padding:0}.auth-modal .auth-dialog{max-width:none;border-radius:24px 24px 0 0;max-height:92dvh;overflow-y:auto}}

/* ---------- admin: page header, forms and shared bits ---------- */
.adm-pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:2px 0 18px}
.adm-pagehead h1{font-size:1.55rem;margin:0}.adm-pagehead p{margin:4px 0 0;color:var(--muted);font-size:.9rem;max-width:62ch}
.adm-content>.card,.adm-content>form.card{max-width:980px}
.adm-content input,.adm-content select,.adm-content textarea{max-width:100%}
.adm-content .field label{font-weight:700;font-size:.84rem;color:var(--ink-soft);display:block;margin-bottom:6px}
.btn-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:6px}
.copy-row{display:flex;gap:8px}.copy-row input{flex:1;min-width:0;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.82rem}
.adm-content .password-wrap{position:relative}
code{background:var(--p-50);color:var(--p-700);padding:2px 6px;border-radius:6px;font-size:.84em;word-break:break-all}
.steps{margin:0 0 12px;padding-left:20px}.steps li{margin:0 0 10px;line-height:1.55}
.adv{margin:0 0 14px}.adv summary{cursor:pointer;font-weight:700;font-size:.86rem;color:var(--p-700);padding:6px 0}
.inline{display:inline}
td.actions{white-space:normal}td.actions .btn{margin:2px 2px 2px 0}
/* setting rows with toggles */
.set-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line-2)}
.set-row:last-of-type{border-bottom:0}.set-row b{display:block;font-size:.92rem}.set-row small{display:block;color:var(--muted);font-size:.8rem;margin-top:2px}
.set-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:16px}
.set-chip{display:flex;flex-direction:column;gap:2px;position:relative;padding:12px 14px 12px 34px;border-radius:14px;border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.set-chip b{font-size:.9rem}.set-chip small{color:var(--muted);font-size:.76rem}
.set-chip .dot{position:absolute;left:14px;top:17px;width:10px;height:10px;border-radius:50%;background:var(--line)}
.set-chip.on .dot{background:var(--ok);box-shadow:0 0 0 4px var(--ok-bg)}.set-chip.off .dot{background:var(--warn)}
.set-chip.link{padding-left:14px}.set-chip:hover{border-color:var(--p-300);color:var(--ink)}
/* gateway cards */
.gw{padding:0;overflow:hidden;margin-bottom:12px}
.gw>summary{list-style:none;display:flex;align-items:center;gap:14px;padding:16px 18px;cursor:pointer}.gw>summary::-webkit-details-marker{display:none}
.gw-ic{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:13px;background:var(--p-50);color:var(--p-600)}
.gw-t{flex:1;min-width:0}.gw-t b{display:block;font-size:1rem}.gw-t small{display:block;color:var(--muted);font-size:.8rem;line-height:1.35}
.gw-caret{color:var(--muted);transition:transform .2s;display:grid}.gw[open] .gw-caret{transform:rotate(180deg)}
.gw-body{padding:4px 18px 20px;border-top:1px solid var(--line-2)}.gw-body .row{margin-top:14px}
.gw-static{padding:6px 20px 20px}
.pay-help{background:var(--p-50);border:1px solid var(--p-100);border-radius:12px;padding:12px 14px;margin:0 0 14px;font-size:.88rem;line-height:1.5}
.pay-btns{display:grid;gap:10px}.pay-btns .btn{justify-content:flex-start;text-align:left;padding:13px 16px;border-radius:14px}
.pay-btns .btn span{display:flex;flex-direction:column;line-height:1.25}.pay-btns .btn small{font-weight:500;font-size:.76rem;opacity:.85}
.pay-online .field{margin-bottom:12px}

/* ---------- wallet payment provider cards ---------- */
.wallet-topup-section{margin-top:26px}
.pay-provider-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,310px),1fr));gap:16px;align-items:stretch}
.pay-provider-card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:20px;box-shadow:var(--sh-sm);display:flex;flex-direction:column;min-width:0;transition:border-color .18s,box-shadow .18s,transform .18s}
.pay-provider-card:hover{border-color:var(--p-200);box-shadow:var(--sh-md);transform:translateY(-1px)}
.pay-provider-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.pay-provider-icon{width:46px;height:46px;border-radius:14px;background:var(--p-50);color:var(--p-600);display:grid;place-items:center;flex:none}
.pay-provider-head h3{margin:0 0 3px;font-size:1rem}
.pay-provider-head small{display:block;color:var(--muted);font-size:.78rem;line-height:1.35}
.pay-provider-copy{font-size:.84rem;color:var(--muted);line-height:1.5;margin-bottom:16px;min-height:50px}
.pay-provider-card .field{margin-bottom:12px}.pay-provider-card .hint{display:block}
.pay-xaf-hint{color:var(--p-700);font-weight:700}
.pay-provider-submit{margin-top:auto;min-height:46px}
@media(max-width:700px){.pay-provider-grid{grid-template-columns:1fr}.pay-provider-card{padding:18px}.pay-provider-copy{min-height:0}}

/* ---------- admin on phones: fill the screen, comfortable touch targets ---------- */
@media(max-width:900px){
  .adm{display:block}
  .adm-main{width:100%;max-width:100%;overflow-x:hidden}
  .adm-content>.card,.adm-content>form.card{max-width:none}
  .adm-content input,.adm-content select,.adm-content textarea{font-size:16px;min-height:46px;border-radius:12px}
  .adm-content textarea{min-height:90px}
  .adm-pagehead h1{font-size:1.3rem}
  .card{padding:16px}
  .row{grid-template-columns:1fr}
  .btn-row .btn{flex:1 1 auto}
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .gw>summary{padding:14px}.gw-body{padding:2px 14px 18px}
  .set-summary{grid-template-columns:1fr 1fr}
  .adm-top{position:sticky;top:0}
  .hello-right{flex-wrap:wrap}
}
@media(max-width:600px){
  .kpis{grid-template-columns:1fr 1fr;gap:10px}
  .grid-adm,.grid-adm.wide,.grid-adm.three{grid-template-columns:1fr}
  .adm-hello{margin:6px 0 14px}.adm-hello p{font-size:.86rem}
  .hello-date{text-align:left}
  .panel{padding:16px}
  .qa-adm{grid-template-columns:repeat(4,1fr);gap:8px}.qa-adm a{font-size:.72rem;text-align:center}
  .promo{flex-wrap:wrap}
  .copy-row{flex-direction:column}
}
:root[data-theme="dark"] .adm-top{background:var(--surface)}
:root[data-theme="dark"] .btn-google{background:#fff;color:#1f2350}

/* ===== Sliders: reviews (home) and category cards (marketplace) ===== */
.rv-slider,.cat-slider{position:relative}
.rv-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;padding:4px 0 10px}
.rv-track::-webkit-scrollbar{display:none}
.rv-slide{flex:0 0 100%;min-width:0;scroll-snap-align:start}
@media(min-width:600px){.rv-slide{flex-basis:calc((100% - 16px)/2)}}
@media(min-width:900px){.rv-slide{flex-basis:calc((100% - 32px)/3)}}
.rv-dots{display:flex;justify-content:center;gap:8px;margin-top:10px}
.rv-dots button{width:8px;height:8px;padding:0;border:0;border-radius:99px;background:var(--line);cursor:pointer;transition:width .25s,background .25s}
.rv-dots button.on{width:24px;background:var(--p-600)}
.cat-slider{margin-bottom:22px}
.cat-track{gap:12px}
.cat-card{flex:0 0 140px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:18px 10px 14px;background:var(--surface);border:1px solid var(--line);border-radius:18px;color:var(--ink);transition:transform .2s,border-color .2s,box-shadow .2s,background .2s}
.cat-card:hover,.cat-card.active{border-color:var(--p-400);box-shadow:0 10px 26px rgba(91,61,240,.16);transform:translateY(-2px);color:var(--ink)}
.cat-card.active{background:var(--p-50)}
.cat-card b{font-size:.92rem;line-height:1.25}.cat-card small{color:var(--muted);font-size:.76rem}
.cat-ic{position:relative;width:56px;height:56px;border-radius:18px;background:var(--grad);color:#fff;display:grid;place-items:center;animation:catFloat 3.2s ease-in-out infinite;animation-delay:calc(var(--i,0) * -.45s)}
.cat-ic::after{content:"";position:absolute;inset:-5px;border-radius:22px;border:2px solid var(--p-300);opacity:0;animation:catPulse 3.2s ease-out infinite;animation-delay:calc(var(--i,0) * -.45s)}
.cat-ic .icon{animation:catWiggle 3.2s ease-in-out infinite;animation-delay:calc(var(--i,0) * -.45s)}
@keyframes catFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes catPulse{0%{opacity:.55;transform:scale(.92)}70%,100%{opacity:0;transform:scale(1.2)}}
@keyframes catWiggle{0%,78%,100%{transform:rotate(0)}84%{transform:rotate(-10deg)}92%{transform:rotate(9deg)}}
@media(min-width:900px){.cat-card{flex-basis:158px}}

/* ===== Page-to-page navigation without reload ===== */
#pj{display:contents}
#pj-bar{position:fixed;top:0;left:0;height:3px;width:0;background:var(--grad);z-index:9999;opacity:0;transition:width .35s ease,opacity .25s ease;pointer-events:none}
html.pj-busy{cursor:progress}

/* ===== Wallet / receipts ===== */
.ra.ra-2{grid-template-columns:repeat(2,1fr)}
.rcpt-btn{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--p-50);color:var(--p-700);flex:none}.rcpt-btn:hover{background:var(--p-100)}
.oc-sum-btns{display:flex;gap:8px;flex-wrap:wrap}
.oc-side .btn-secondary{padding:9px 16px}

/* ===== Virtual numbers: country -> service -> confirm ===== */
.nm-panel,.nm-confirm{padding:20px;display:grid;gap:16px;align-content:start}
.nm-tabs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.nm-tab{display:flex;align-items:center;justify-content:center;gap:8px;text-align:center;padding:14px 10px;border-radius:16px;background:var(--p-50);border:1px solid var(--line);font-weight:700;font-size:.95rem;line-height:1.3;color:var(--muted)}
.nm-tab:hover{color:var(--p-700)}
.nm-tab.active{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 8px 20px rgba(91,61,240,.28)}
.nm-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:600px){.nm-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}}
.nm-country{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:16px;border:1px solid var(--line);border-radius:20px;background:var(--surface);color:var(--ink);transition:background .2s,border-color .2s,box-shadow .2s}
.nm-country:hover{background:var(--p-50);border-color:var(--p-300);box-shadow:0 10px 24px rgba(91,61,240,.12);color:var(--ink)}
.nm-country b{font-size:1rem;margin-top:8px;line-height:1.25}.nm-country small{color:var(--muted);font-size:.8rem}
.nm-country[hidden],.nm-row[hidden]{display:none}
.nflag{display:inline-grid;place-items:center;border-radius:14px;background:var(--surface);border:1px solid var(--line);overflow:hidden;flex:none}
.nflag img{width:72%;height:auto;border-radius:4px;display:block}
.nflag-x{background:var(--p-50);color:var(--p-600)}
.nm-list{display:grid;gap:10px}
.nm-row{display:flex;align-items:center;gap:14px;padding:12px 16px;border:1px solid var(--line);border-radius:18px;background:var(--surface);color:var(--ink);transition:background .2s,border-color .2s}
.nm-row:hover{background:var(--p-50);border-color:var(--p-300);color:var(--ink)}
.nm-row .grow{flex:1;min-width:0}.nm-row b{display:block;font-size:1rem;font-weight:600}.nm-row small{color:var(--muted);font-size:.78rem}
.nm-row>.icon{color:var(--muted);flex:none}.nm-price{font-weight:800;color:var(--p-700);white-space:nowrap}
.nm-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.nm-title{display:flex;align-items:center;gap:12px;font-size:1.15rem;min-width:0}.nm-title b{overflow:hidden;text-overflow:ellipsis}
.nm-backlink{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-weight:700;width:max-content}
.nm-rows{margin:0;display:grid}.nm-rows>div{display:flex;justify-content:space-between;gap:12px;padding:16px 0;border-bottom:1px solid var(--line)}
.nm-rows dt{color:var(--muted)}.nm-rows dd{margin:0;font-weight:700;text-align:right}.nm-pcs{color:var(--p-600)}
.nm-total{display:flex;justify-content:space-between;align-items:center;border-top:2px dashed var(--line);padding-top:18px}.nm-total b{font-size:1.05rem}.nm-total strong{font-size:1.7rem;color:var(--ok)}
.nm-actions{display:grid;grid-template-columns:1fr 1.2fr;gap:12px}.nm-actions .btn{justify-content:center;width:100%}
.nm-actions .btn[disabled]{opacity:.5;pointer-events:none}
@media(min-width:900px){.nm-panel,.nm-confirm{max-width:760px}}

/* ===== Admin v4: icon buttons, responsive tables, bulk actions, category icons ===== */
.btn-ico{min-width:38px;height:38px;padding:0 10px;gap:4px;border-radius:12px}
.btn-sm.btn-ico{min-width:36px;height:36px;padding:0 9px;border-radius:11px}
.btn-ico .icon{display:block}
.btn-ico.is-on .icon{fill:currentColor}
.btn-ico .bulk-n{font-size:.8rem;font-weight:800}.btn-ico .bulk-n:empty{display:none}
.grow{flex:1}
.cat-mini{width:38px;height:38px;flex:none;border-radius:12px;background:var(--p-50);color:var(--p-600);display:inline-grid;place-items:center}
.cb{display:inline-grid;place-items:center;width:30px;height:30px;margin:0;cursor:pointer;flex:none}
.cb input{width:19px;height:19px;margin:0;cursor:pointer}
.bulk-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:0 0 12px;margin:0 0 4px;border-bottom:1px solid var(--line-2)}
.bulk-count{font-size:.86rem;font-weight:700;color:var(--ink-soft)}
.bulk-force{font-size:.78rem;color:var(--muted);font-weight:600}
.bulk-clear{border-bottom:0;margin:0}
.cat-list{padding-bottom:10px}
.cat-row{display:flex;align-items:center;gap:12px;padding:10px 0 10px calc(var(--d,0) * 22px);border-bottom:1px solid var(--line-2)}
.cat-row:last-child{border-bottom:0}
.cat-row[style*="--d:1"] .cat-mini,.cat-row[style*="--d:2"] .cat-mini{width:32px;height:32px;border-radius:10px}
.cat-name{flex:1;min-width:0}.cat-name b{display:block;font-size:.95rem;line-height:1.25;overflow-wrap:anywhere}.cat-name small{color:var(--muted);font-size:.78rem}
.row-actions{display:flex;align-items:center;gap:6px;flex:none}.row-actions form{display:inline-flex;margin:0}
.icon-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:8px}
.icon-pick .ip{position:relative;margin:0;display:block}
.icon-pick .ip input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.icon-pick .ip span{display:grid;place-items:center;height:46px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);transition:background .15s,color .15s,border-color .15s}
.icon-pick .ip:hover span{border-color:var(--p-300);color:var(--p-700)}
.icon-pick .ip input:checked+span{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 6px 14px rgba(91,61,240,.3)}
.icon-pick .ip input:focus-visible+span{outline:3px solid var(--p-300);outline-offset:2px}
.pills-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.prod-tools select{flex:1 1 150px;width:auto;min-width:0}
.prod-tools .btn-ico,.toolbar .btn-ico{flex:none}
.wallet-form{display:flex;align-items:center;gap:8px;margin:0;flex-wrap:nowrap}
.wallet-form input[type=number]{width:104px;min-width:0}.wallet-form input[type=text]{width:140px;min-width:0}
.amt-neg{color:var(--err)}.amt-pos{color:var(--ok-ink)}
.custom-api{border-top:1px dashed var(--line);margin:4px 0 14px;padding-top:16px}.custom-api[hidden]{display:none}
.custom-api h4{display:flex;align-items:center;gap:8px}
.quick-add h3{display:flex;align-items:center;gap:8px}
.rt-wrap table.rt td.rt-actions{white-space:nowrap}
.rt-wrap table.rt td.rt-actions form{display:inline-flex;margin:0}

/* Tables become one card per row on phones and small tablets: nothing hides off-screen to the right */
@media(max-width:900px){
  .rt-wrap{background:none;border:0;border-radius:0;overflow:visible!important}
  table.rt,.rt tbody{display:block;width:100%}
  .rt thead{display:none}
  .rt tr{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px 16px;margin-bottom:12px;box-shadow:var(--sh-sm)}
  .rt td{display:block;padding:0;border:0;min-width:0;font-size:.92rem;overflow-wrap:anywhere}
  .rt td[data-label]::before{content:attr(data-label);display:block;font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:2px}
  .rt td.rt-title,.rt td.rt-wide,.rt td.rt-actions,.rt td[data-label="Details"],.rt td[data-label="Note"],.rt td[data-label="Message"],.rt td[data-label="Name"]{grid-column:1/-1}
  .rt td.rt-title{font-size:1rem}
  .rt td.rt-id{font-weight:800;color:var(--p-600)}
  .rt td.rt-actions{display:flex;flex-wrap:wrap;gap:8px;padding-top:12px;border-top:1px solid var(--line-2)}
  .rt td.rt-actions:empty{display:none}
  .rt td.rt-actions .btn-ico{min-width:44px;height:44px}
  .rt td.rt-sel{position:absolute;top:10px;right:10px}
  .rt tr.rt-empty{display:block;text-align:center;padding:22px}.rt tr.rt-empty td{display:block}
  .wallet-form{gap:8px}.wallet-form input[type=number]{flex:1 1 0;width:auto}.wallet-form input[type=text]{flex:1.4 1 0;width:auto}
  .wallet-form .btn-ico{min-width:46px;height:46px}
  .toolbar .btn-ico{min-width:46px;height:46px}
  .cat-row .btn-ico{min-width:42px;height:42px}
  .bulk-bar .btn-ico{min-width:42px;height:42px}
}
@media(max-width:600px){
  .bulk-force{order:10;flex:1 0 100%}
  .row-actions{gap:4px}
  .cat-row{gap:8px}
  .icon-pick{grid-template-columns:repeat(auto-fill,minmax(42px,1fr))}.icon-pick .ip span{height:42px}
}

/* Category chips and tiles with icons (customer dashboard and Buy page) */
.chip{display:inline-flex;align-items:center;gap:8px}
.chip .cat-mini{width:26px;height:26px;border-radius:9px;background:var(--grad);color:#fff}
.chip .cat-mini .icon{width:15px;height:15px}
.chip.active .cat-mini{background:rgba(255,255,255,.22)}
.app-content .chip{padding:7px 16px 7px 8px}
.cat-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px}
.cat-tile{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:14px 6px 12px;border:1px solid var(--line);border-radius:18px;background:var(--surface);color:var(--ink);font-size:.78rem;font-weight:700;line-height:1.25;min-width:0}
.cat-tile:hover,.cat-tile.active{border-color:var(--p-300);color:var(--ink);background:var(--p-50)}
.cat-tile .cat-mini{width:46px;height:46px;border-radius:15px;background:var(--grad);color:#fff;box-shadow:0 8px 18px rgba(91,61,240,.25)}
.cat-tile span:last-child{overflow-wrap:anywhere}
@media(max-width:900px){.card>.rt-wrap{padding:12px 12px 2px}}

/* ===== Live number order: waiting for the code ===== */
.nm-status{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.85rem;color:var(--muted);white-space:nowrap}
.nm-spin{display:none;width:14px;height:14px;border-radius:50%;border:2px solid var(--p-200,#d9d7fb);border-top-color:var(--p-600);animation:nmspin .8s linear infinite}
#sms-live[data-state="WAITING_FOR_OTP"] .nm-spin,#sms-live[data-state="PROVIDER_REQUESTED"] .nm-spin,#sms-live[data-state="PAYMENT_RESERVED"] .nm-spin{display:inline-block}
@keyframes nmspin{to{transform:rotate(360deg)}}
.nm-codebox{display:grid;gap:8px;justify-items:center;text-align:center;padding:20px;border:2px dashed var(--line);border-radius:20px;background:var(--p-50)}
.nm-codebox small{color:var(--muted);font-weight:700}.nm-codebox b{font-size:1.9rem;letter-spacing:4px;word-break:break-all}
#sms-live[data-state="OTP_RECEIVED"] .nm-codebox,#sms-live[data-state="COMPLETED"] .nm-codebox{border-style:solid;border-color:var(--ok);background:var(--ok-bg,var(--p-50))}
#sms-live[data-state="OTP_RECEIVED"] .nm-codebox b{color:var(--ok)}
.nm-codebox [data-f=copycode]{display:none}
#sms-live[data-state="OTP_RECEIVED"] .nm-codebox [data-f=copycode],#sms-live[data-state="COMPLETED"] .nm-codebox [data-f=copycode]{display:inline-flex}
#sms-live .nm-actions{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}

/* service logos share the flag box */
.nflag-svc img{width:62%;height:62%;object-fit:contain;border-radius:0}
.nflag-x.nflag-svc,.nflag-x{font-weight:800;color:var(--p-600)}
.nm-rows dd .nflag{vertical-align:middle;margin-right:6px;border-radius:8px}
/* speed: long service/country lists only render the rows that are on screen */
.nm-row{content-visibility:auto;contain-intrinsic-size:auto 72px}
.nm-updating{margin:4px 2px 10px;font-size:.82rem}

/* Service logos always sit on white so dark logos stay visible in dark theme */
.nflag-svc{background:#fff}
.nflag-svc.nflag-x{background:var(--p-50)}

/* brand logo image (header + footer): fixed height so it always fits */
.logo-img{display:block;height:40px;width:auto;max-width:100%}
.footer .logo-img{height:44px}
@media(max-width:600px){.nav .logo-img{height:34px}.footer .logo-img{height:40px}}

/* ==========================================================================
   Toast messages (success / error / warning / info), password strength, notification centre, upload progress
   ========================================================================== */
.toasts{position:fixed;top:16px;right:16px;z-index:3000;display:flex;flex-direction:column;gap:12px;width:min(390px,calc(100vw - 32px));pointer-events:none}
.toast{--tc:#3b82f6;--tc-rgb:59,130,246;pointer-events:auto;display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:12px;padding:14px 14px 14px 14px;border-radius:18px;border:1px solid rgba(255,255,255,.75);background:linear-gradient(180deg,rgba(var(--tc-rgb),.17),rgba(var(--tc-rgb),0) 92%),var(--surface);box-shadow:0 12px 32px rgba(21,26,66,.14),0 0 0 1px rgba(var(--tc-rgb),.07);animation:toast-in .28s cubic-bezier(.2,.8,.3,1);transition:opacity .25s,transform .25s}
.toast.out{opacity:0;transform:translateX(18px)}
.toast-success{--tc:#16a34a;--tc-rgb:22,163,74}
.toast-error{--tc:#ef4444;--tc-rgb:239,68,68}
.toast-warning{--tc:#f59e0b;--tc-rgb:245,158,11}
.toast-info{--tc:#3b82f6;--tc-rgb:59,130,246}
.toast-ic{width:40px;height:40px;border-radius:50%;background:var(--surface);color:var(--tc);display:grid;place-items:center;box-shadow:0 2px 8px rgba(21,26,66,.12)}
.toast-ic .icon{stroke-width:2}
.toast-main{min-width:0;padding-top:1px}
.toast-main b{display:block;font-size:.95rem;line-height:1.3;color:var(--ink)}
.toast-main p{margin:2px 0 0;font-size:.86rem;line-height:1.45;color:var(--muted);overflow-wrap:anywhere}
.toast-main p a{font-weight:700;text-decoration:underline}
.toast-x{width:28px;height:28px;border:0;border-radius:8px;background:transparent;color:var(--muted);display:grid;place-items:center;cursor:pointer;margin:-2px -2px 0 0}
.toast-x:hover{background:rgba(var(--tc-rgb),.14);color:var(--ink)}
:root[data-theme="dark"] .toast{border-color:rgba(255,255,255,.08);box-shadow:0 12px 32px rgba(0,0,0,.45)}
:root[data-theme="dark"] .toast-ic{box-shadow:none;background:var(--surface-2)}
@keyframes toast-in{from{opacity:0;transform:translateY(-10px) scale(.97)}to{opacity:1;transform:none}}
@media(max-width:640px){.toasts{top:max(10px,env(safe-area-inset-top));right:12px;left:12px;width:auto}}

/* Password strength meter (sign-up) */
.pw-meter{margin-top:10px;--pc:var(--line)}
.pw-meter[hidden]{display:none}
.pw-track{height:6px;border-radius:99px;background:var(--line);overflow:hidden}
.pw-fill{display:block;height:100%;width:0;border-radius:inherit;background:var(--pc);transition:width .28s ease,background-color .28s ease}
.pw-row{display:flex;justify-content:space-between;gap:10px;margin-top:6px;font-size:.78rem}
.pw-label{font-weight:700;color:var(--pc)}.pw-tip{color:var(--muted);text-align:right}
.pw-meter[data-level="0"] .pw-label{color:var(--muted)}
.pw-meter[data-level="1"]{--pc:#ef4444}.pw-meter[data-level="2"]{--pc:#f59e0b}.pw-meter[data-level="3"]{--pc:#3b82f6}.pw-meter[data-level="4"]{--pc:#16a34a}

/* Notification centre */
.nf-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh-md);overflow:hidden;max-width:860px}
.nf-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:20px 22px 18px;position:relative}
.nf-head h2{margin:0 0 2px;font-size:1.05rem}.nf-head p{margin:0;color:var(--muted);font-size:.92rem}
.nf-inbox{color:var(--muted);flex:none}
.nf-head::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:8px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='8' viewBox='0 0 16 8'%3E%3Cpath d='M0 4c4-4 4-4 8 0s4 4 8 0' fill='none' stroke='%23a3a8c8' stroke-opacity='.55' stroke-width='1.1'/%3E%3C/svg%3E") repeat-x center bottom}
.nf-list{list-style:none;margin:0;padding:10px 0 8px}
.nf-item{--tc:#3b82f6;position:relative}
.tone-success{--tc:#16a34a}.tone-info{--tc:#3b82f6}.tone-warning{--tc:#f2a900}.tone-danger{--tc:#ef4444}.tone-message{--tc:#f08a24}
.nf-item>a{display:grid;grid-template-columns:44px 1fr auto;gap:14px;align-items:start;padding:14px 22px;color:inherit;text-decoration:none}
.nf-item>a:hover{background:var(--surface-2)}
.nf-item:not(:last-child)::after{content:"";position:absolute;left:41px;top:58px;bottom:-14px;width:8px;pointer-events:none;opacity:.7;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='12' viewBox='0 0 8 12'%3E%3Cpath d='M4 0c3 3-3 3 0 6s-3 3 0 6' fill='none' stroke='%23a3a8c8' stroke-width='1.1'/%3E%3C/svg%3E") repeat-y center top}
.nf-ic{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--tc);display:grid;place-items:center;position:relative;z-index:1}
.nf-main{display:flex;flex-direction:column;min-width:0;padding-top:1px}
.nf-main b{font-size:.98rem;color:var(--ink);display:flex;align-items:center;gap:8px}
.nf-main span{color:var(--muted);font-size:.9rem;overflow-wrap:anywhere}
.nf-item.is-new .nf-ic{box-shadow:0 0 0 3px rgba(114,86,246,.12)}
.nf-dot{width:8px;height:8px;border-radius:50%;background:var(--p-500);flex:none}
.nf-item time{color:var(--muted);font-size:.9rem;white-space:nowrap;padding-top:1px}
.nf-empty{padding:42px 22px;text-align:center;color:var(--muted)}.nf-empty .icon{margin-bottom:8px}.nf-empty p{margin:0}
@media(max-width:560px){.nf-item>a{grid-template-columns:44px 1fr;padding:14px 16px}.nf-item time{grid-column:2;padding:0;font-size:.8rem}.nf-item:not(:last-child)::after{left:35px}.nf-head{padding:18px 16px}}

/* Upload progress: red while uploading, green when uploaded (under review), blue once admin verified */
.up-card{position:relative;display:grid;grid-template-columns:auto 1fr;gap:6px 16px;padding:18px 48px 16px 18px;margin:16px 0;border-radius:20px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-md)}
.up-card[hidden]{display:none}
.up-ic{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);color:#3b6cf6;box-shadow:0 2px 8px rgba(21,26,66,.1);grid-row:span 3}
.up-card[data-state="uploading"] .up-ic{color:#ef4444}.up-card[data-state="uploaded"] .up-ic{color:#16a34a}
.up-title{font-weight:800;color:var(--ink)}.up-title em{font-style:normal;color:#3b6cf6;overflow-wrap:anywhere}
.up-sub{color:var(--muted);font-size:.9rem;margin:0}
.up-x{position:absolute;top:12px;right:12px;width:30px;height:30px;border:0;background:transparent;border-radius:8px;color:var(--muted);display:grid;place-items:center;cursor:pointer}
.up-x:hover{background:var(--surface-2);color:var(--ink)}
.up-bar{height:8px;border-radius:99px;background:var(--line);overflow:hidden;min-width:90px}
.up-fill,.up-bar>i{display:block;height:100%;width:0;border-radius:inherit;background:#ef4444;transition:width .2s linear,background-color .35s ease}
.up-card[data-state="uploaded"] .up-fill{background:#16a34a}
.up-bar.is-red>i{background:#ef4444}.up-bar.is-green>i{background:#16a34a}.up-bar.is-blue>i{background:#3b6cf6}
.up-bar>i{width:100%}
.up-pct{font-size:.84rem;color:var(--muted);margin:0}
.up-actions{display:flex;gap:18px;margin-top:2px}
.up-actions button{border:0;background:none;padding:2px 0;font:inherit;font-weight:700;cursor:pointer;color:var(--muted)}
.up-actions button:hover{color:var(--ink)}.up-actions [data-up-more]{color:var(--ink)}
.up-actions [hidden]{display:none}
.up-err{color:var(--err-ink);font-size:.86rem;margin:0;font-weight:600}
.up-state{display:flex;flex-direction:column;gap:5px;min-width:130px}
.up-state small{font-size:.78rem;font-weight:700}
.up-state .is-red~small{color:#dc2626}.up-state .is-green~small{color:#15803d}.up-state .is-blue~small{color:#2f58d8}
@media(max-width:560px){.up-card{padding-right:42px}}

/* floating Telegram support button (home page, bottom left) */
.tg-float{position:fixed;left:18px;bottom:calc(18px + var(--safe-b));z-index:39;display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 18px 0 14px;border-radius:99px;background:#229ed9;color:#fff;font:700 .9rem var(--font);box-shadow:0 10px 26px rgba(34,158,217,.45);text-decoration:none;transition:transform .2s,box-shadow .2s}
.tg-float:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(34,158,217,.55);color:#fff}
.tg-float .icon{stroke:#fff}
.tg-float-setup{background:#475569;box-shadow:0 10px 26px rgba(71,85,105,.4)}
@media(max-width:900px){.tg-float{bottom:calc(84px + var(--safe-b));left:12px;height:46px}}
@media(max-width:380px){.tg-float span{display:none}.tg-float{width:46px;padding:0;justify-content:center}}
/* sections reached from the menu (#how-it-works, #faq ...) stop below the sticky header */
section[id]{scroll-margin-top:84px}