/* Pulse: signed-in app skin. Loaded after
   the engine (/public/Pulse/pulse-engine.css). Pulse re-points its tokens and refines
   a few components; ids, classes and scripts are untouched. */

/* ---------------------------------------------------------------- tokens */
:root,html.nv-html{
  --ln-canvas:#f5f6fa;
  --nv-bg:#f5f6fa; --nv-surface:#ffffff; --nv-surface-2:#f0f2f7; --nv-card:#ffffff;
  --ln-sunk:#f7f8fb;
  --nv-text:#0c1222; --nv-text-soft:#2b3447; --nv-muted:#535e76; --ln-faint:#7a849a;
  --nv-border:#e4e7ef; --nv-border-2:#d5dae5; --ln-line-3:#eef0f5;
  --nv-ok:#0b8f63; --nv-okbg:#e3f5ed;
  --nv-warn:#b45309; --nv-warnbg:#fdf1e2;
  --nv-bad:#c2410c; --nv-badbg:#fdeee6;
  --nv-info:#2563eb; --nv-infobg:#e7efff;
  --nv-r:14px; --nv-r-sm:11px; --nv-r-lg:16px;
  --nv-sh:0 1px 2px rgba(12,18,34,.05),0 10px 26px -16px rgba(12,18,34,.16);
  --nv-sh-lg:0 0 0 1px rgba(12,18,34,.05),0 12px 28px -10px rgba(12,18,34,.16),0 36px 70px -30px rgba(12,18,34,.28);
  --nv-sb:252px; --nv-tb:64px;
  --ln-display:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --ln-a-soft:color-mix(in srgb,var(--nv-accent,#4f46e5) 10%,transparent);
  --ln-a-ring:color-mix(in srgb,var(--nv-accent,#4f46e5) 22%,transparent);
  --pl-a-line:color-mix(in srgb,var(--nv-accent,#4f46e5) 32%,transparent);
}
html.nv-dark{
  --ln-canvas:#0a0c12;
  --nv-bg:#0a0c12; --nv-surface:#11141d; --nv-surface-2:#171b27; --nv-card:#11141d;
  --ln-sunk:#0e1119;
  --nv-text:#eef0f6; --nv-text-soft:#c9cfdc; --nv-muted:#a3abbf; --ln-faint:#7f889e;
  --nv-border:#232838; --nv-border-2:#2e3448; --ln-line-3:#1b1f2c;
  --nv-ok:#34d399; --nv-okbg:rgba(52,211,153,.12);
  --nv-warn:#fbbf24; --nv-warnbg:rgba(251,191,36,.12);
  --nv-bad:#fb923c; --nv-badbg:rgba(251,146,60,.12);
  --nv-info:#7aa7ff; --nv-infobg:rgba(122,167,255,.13);
  --nv-sh:0 1px 0 rgba(255,255,255,.03) inset,0 12px 30px -16px rgba(0,0,0,.7);
  --nv-sh-lg:0 0 0 1px rgba(255,255,255,.06),0 16px 34px -12px rgba(0,0,0,.7),0 40px 80px -32px rgba(0,0,0,.8);
  --ln-a-soft:color-mix(in srgb,var(--nv-accent,#4f46e5) 18%,transparent);
  --ln-a-ring:color-mix(in srgb,var(--nv-accent,#4f46e5) 34%,transparent);
}
body.nv{background:var(--nv-bg);letter-spacing:0}

/* ------------------------------------------------------------ components */
/* Sidebar: the current page is tinted in the panel's own colour. */
.nv-nav a.active{background:var(--ln-a-soft);color:var(--nv-text);box-shadow:none;font-weight:650}
.nv-nav a.active i{color:var(--ln-a)}
html.nv-dark .nv-nav a.active{background:var(--ln-a-soft);box-shadow:none}
.ln-side-new{height:42px;border-radius:11px;justify-content:center;box-shadow:0 10px 22px -10px var(--ln-a)}
/* Order steps: the active step carries the panel colour. */
.ln-steps .lm-step.on::before{background:var(--ln-a);box-shadow:none}
.lm-step.on .n{background:var(--ln-a);color:#fff}
/* Order summary: the total sits in a tinted block; a bigger place-order button. */
.ln-rcpt .nv-os .row.total{margin:12px 0 4px;padding:14px 16px;border-radius:13px;background:var(--ln-a-soft);border:1px solid var(--pl-a-line)}
.nv .ln-submit{height:50px;border-radius:12px;font-size:15.5px}

/* =====================================================================
   PULSE v3 (2026-10-09): deeper redesign of the signed-in app.
   Visual only: sizes, surfaces, spacing. No layout engine rules change,
   so every page and script keeps working.
   ===================================================================== */
/* Type: one notch larger and calmer. */
body.nv{font-size:14.5px}
.nv .nv-content{padding:28px 32px 56px}
@media (max-width:860px){.nv .nv-content{padding:18px 16px 96px}}

/* Sidebar: a real panel (surface + border) with clearer items. */
.nv-sidebar{background:var(--nv-surface);border-inline-end:1px solid var(--nv-border)}
.nv-nav a{min-height:40px;font-size:14px;font-weight:550;border-radius:10px}
.nv-nav a i{width:18px;text-align:center}
.nv-nav-group{font-family:var(--ln-mono);font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ln-faint)}
.ln-side-new{height:44px;font-size:14.5px}

/* Balance card: the number first, one clear Add funds action. */
.lm-side-balance{padding:14px;border-radius:14px;background:var(--nv-surface-2);box-shadow:inset 0 0 0 1px var(--nv-border)}
html.nv-dark .lm-side-balance{background:var(--nv-surface-2)}
.lm-side-balance .v{font-size:24px;font-weight:800;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.lm-side-balance .ln-bal-add{color:var(--ln-a);font-weight:650}
/* XP: one compact line instead of a bar, counters and a button. The full
   levels window still opens when it is clicked (same #lmXp trigger). */
.lm-xp .lm-xp-bar,.lm-xp .lm-xp-meta,.lm-xp .lm-xp-more{display:none!important}
.lm-xp{margin-top:10px;padding:8px 10px;border-radius:10px;background:var(--nv-surface);box-shadow:inset 0 0 0 1px var(--nv-border);cursor:pointer}
.lm-xp:hover{box-shadow:inset 0 0 0 1px var(--nv-border-2)}
.lm-xp-top{display:flex;align-items:center;gap:8px;font-size:12.5px}
.lm-xp-top .lm-xp-badge{margin-inline-start:auto}

/* Top bar: just the page title (the panel name is already in the sidebar). */
.nv-topbar{border-bottom:1px solid var(--nv-border)}
.nv-page-title .ln-crumb,.nv-page-title .ln-sl{display:none}
.nv-page-title .ln-pt{font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--nv-text)}
.ln-cmd{height:40px;border-radius:11px}

/* Page headers: bigger titles, a small coloured label above. */
.nv .ln-ph h1{font-size:30px;font-weight:800;letter-spacing:-.03em}
.ln-ph .sub{font-size:15px}
.ln-greet{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ln-a)}
@media (max-width:860px){.nv .ln-ph h1{font-size:24px}}

/* Account summary strip. */
.ln-kpis{border-radius:14px}
.ln-kpi{padding:12px 20px}
.ln-kpi .k{font-size:12px;font-weight:600;color:var(--nv-muted)}
.ln-kpi .v{font-size:20px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}

/* Cards. */
.nv-card,.lm-sum-card,.dr-card{border-radius:16px}
.ord-card{border-radius:14px}

/* Inputs: taller, rounder, a clear focus ring in the panel colour. */
.nv #neworder_fields input:not([type=checkbox]):not([type=radio]),.nv #neworder_fields select,
.nv #addfunds_fields input:not([type=checkbox]):not([type=radio]),.nv #addfunds_fields select,
.nv .nv-input,.nv .nv-select,.nv .form-control{height:46px;min-height:46px;border-radius:11px;font-size:14.5px}
.nv .nv-textarea,.nv #neworder_fields textarea,.nv #addfunds_fields textarea{border-radius:11px;font-size:14.5px}
.nv #neworder_fields input:focus,.nv #neworder_fields select:focus,.nv #addfunds_fields input:focus,.nv #addfunds_fields select:focus,
.nv .nv-input:focus,.nv .nv-select:focus,.nv .nv-textarea:focus,.nv .form-control:focus{border-color:var(--ln-a);box-shadow:0 0 0 4px var(--ln-a-ring);outline:none}

/* Buttons, tabs, platform chips. */
.nv .nv-btn{border-radius:11px;font-weight:650}
.nv .nv-btn:not(.sm){min-height:44px}
.nv-tab{min-height:38px;border-radius:9px;font-weight:650}
.lm-plat{min-height:40px;border-radius:11px;font-weight:600}
.ln-order .lm-plat.active,.lm-plat.active{background:var(--ln-a-soft);color:var(--nv-text);box-shadow:inset 0 0 0 1px var(--ln-a)}

/* Tables: quiet uppercase headers, roomier rows, hover. */
.ln-tbl th,.svc-table th{font-family:var(--ln-mono);font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ln-faint)}
.ln-tbl td,.svc-table td{padding-top:13px;padding-bottom:13px}
.ln-tbl tbody tr:hover td,.svc-table tbody tr:hover td{background:var(--ln-sunk)}

/* Status badges. */
.nv-badge,.ln-tag{border-radius:999px;font-weight:650}

/* New Order: quick quantity buttons (added by the page script). */
.pl-qq{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 2px}
.pl-qq button{height:30px;padding:0 11px;border-radius:8px;border:1px solid var(--nv-border);background:var(--nv-surface);color:var(--nv-muted);font:600 12.5px/1 var(--nv-font);cursor:pointer}
.pl-qq button:hover{color:var(--nv-text);border-color:var(--nv-border-2)}
.pl-qq button[disabled]{opacity:.4;cursor:not-allowed}

/* =====================================================================
   PULSE v4 (2026-10-09): New Order layout. Numbered sections, service
   info tiles, Link + Quantity side by side on desktop.
   ===================================================================== */
.ln-order .ln-steps{display:none!important}   /* the engine sets display:grid!important */
.pl-n{display:inline-grid;place-items:center;width:22px;height:22px;margin-inline-end:9px;border-radius:7px;background:var(--ln-a-soft);color:var(--ln-a);font-size:12px;font-weight:800;vertical-align:1px}
.pl-sec{display:flex;align-items:center;margin:18px 0 8px}
.pl-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin:12px 0 4px}
.pl-fact{padding:10px 12px;border-radius:11px;background:var(--nv-surface-2);box-shadow:inset 0 0 0 1px var(--ln-line-3)}
.pl-fact .k{display:block;font-size:11.5px;font-weight:600;color:var(--nv-muted)}
.pl-fact .v{display:block;margin-top:2px;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--nv-text)}
.pl-fact .v.ok{color:var(--nv-ok)}
.nv #service_description{background:var(--nv-surface-2);border:0;border-radius:11px;color:var(--nv-muted);font-size:13.5px}
@media (min-width:861px){
  #neworder_fields{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);column-gap:14px}
  #neworder_fields>*{grid-column:1/-1}
  #neworder_fields>#order_link{grid-column:1}
  #neworder_fields>#order_quantity{grid-column:2}
}

/* =====================================================================
   MOSAIC app skin (2026-10-17): signed-in pages from the approved Mosaic mockup (artifact GqkrkcBgxHCfnjjUGHwdcX).
   Visual only over the Pulse engine. Desktop: a slim floating icon rail with colourful icon tiles; phones: the
   engine's drawer + a floating dock. Product UI = no looping motion; hover/focus <=200ms. Overrides PULSE above.
   ===================================================================== */
:root,html.nv-html{
  --mo-accent:var(--nv-accent,#6d28d9);
  --mo-deep:color-mix(in oklab,var(--mo-accent) 70%,#0a0620);
  --mo-pop:#f59e0b;
  --ln-canvas:#f1f2f7;--nv-bg:#f1f2f7;--nv-surface:#ffffff;--nv-surface-2:#f6f7fb;--nv-card:#ffffff;--ln-sunk:#f4f5fa;
  --nv-text:#111326;--nv-text-soft:#2c2f48;--nv-muted:#5d6178;--ln-faint:#7f8399;
  --nv-border:color-mix(in oklab,var(--mo-accent) 7%,#e3e5ee);--nv-border-2:color-mix(in oklab,var(--mo-accent) 12%,#d5d8e4);--ln-line-3:color-mix(in oklab,var(--mo-accent) 5%,#eceef5);
  --nv-r:20px;--nv-r-sm:14px;--nv-r-lg:22px;
  --ln-display:"Unbounded","Segoe UI",system-ui,sans-serif;
  --nv-font:"Manrope","Segoe UI",system-ui,-apple-system,sans-serif;
  --ln-a-soft:color-mix(in oklab,var(--mo-accent) 10%,transparent);
  --ln-a-ring:color-mix(in oklab,var(--mo-accent) 22%,transparent);
  --nv-sh:0 1px 2px rgba(17,19,38,.05),0 10px 30px -12px rgba(17,19,38,.16);
}
html.nv-dark{
  --mo-deep:color-mix(in oklab,var(--mo-accent) 45%,#05030f);
  --ln-canvas:#0a0b14;--nv-bg:#0a0b14;--nv-surface:#13152a;--nv-surface-2:#181b33;--nv-card:#13152a;--ln-sunk:#101226;
  --nv-text:#eceefa;--nv-text-soft:#c9cce3;--nv-muted:#a0a4bf;--ln-faint:#7d81a0;
  --nv-border:color-mix(in oklab,var(--mo-accent) 12%,#21243d);--nv-border-2:color-mix(in oklab,var(--mo-accent) 18%,#2b2f4d);--ln-line-3:color-mix(in oklab,var(--mo-accent) 8%,#1a1d35);
  --ln-a-soft:color-mix(in oklab,var(--mo-accent) 18%,transparent);
  --ln-a-ring:color-mix(in oklab,var(--mo-accent) 36%,transparent);
}
body.nv{font-family:var(--nv-font)}
.nv h1,.nv h2,.nv h3,.nv .ln-ph h1,.nv .dw-h h3,.nv-page-title .ln-pt,.ln-kpi .v{font-family:var(--ln-display)}

/* ---------- colourful menu icons (every width) ---------- */
.nv-nav a,.nv-nav .nv-sub-t,.nv-bottomnav a{--ic:var(--mo-accent)}
.nv-nav>a:nth-of-type(9n+2){--ic:#2563eb}.nv-nav>a:nth-of-type(9n+3){--ic:#7c3aed}.nv-nav>a:nth-of-type(9n+4){--ic:#16a34a}
.nv-nav>a:nth-of-type(9n+5){--ic:#ea580c}.nv-nav>a:nth-of-type(9n+6){--ic:#0891b2}.nv-nav>a:nth-of-type(9n+7){--ic:#db2777}
.nv-nav>a:nth-of-type(9n+8){--ic:#d97706}.nv-nav>a:nth-of-type(9n){--ic:#0d9488}
.nv-nav a[href$="neworder"],.nv-bottomnav a[href$="neworder"]{--ic:var(--mo-accent)}
.nv-nav a[href$="orders"],.nv-bottomnav a[href$="orders"]{--ic:#2563eb}
.nv-nav a[href$="services"],.nv-bottomnav a[href$="services"]{--ic:#7c3aed}
.nv-nav a[href$="addfunds"],.nv-bottomnav a[href$="addfunds"]{--ic:#16a34a}
.nv-nav a[href*="ticket"],.nv-bottomnav a[href*="ticket"]{--ic:#ea580c}
.nv-nav a[href$="api"],.nv-nav a[href*="smm-api"]{--ic:#0891b2}
.nv-nav a[href*="child"]{--ic:#db2777}
.nv-nav a[href*="refer"],.nv-nav a[href*="affiliate"]{--ic:#d97706}
.nv-nav a[href*="dripfeed"]{--ic:#0d9488}
.nv-nav a[href*="refill"]{--ic:#059669}
.nv-nav a[href*="reward"]{--ic:#e11d48}
.nv-nav a[href*="earn"]{--ic:#ca8a04}
.nv-nav a[href*="transfer"]{--ic:#0284c7}
.nv-nav a[href*="blog"],.nv-nav a[href*="account"],.nv-bottomnav a[href*="account"]{--ic:#64748b}
.nv-nav a i,.nv-nav .nv-sub-t>i:first-child{color:var(--ic)!important}
.nv-nav a.active{background:color-mix(in oklab,var(--ic) 14%,transparent)!important;color:var(--nv-text)!important;box-shadow:none!important}

/* ---------- desktop: slim floating rail ---------- */
@media (min-width:861px){
  body.nv{--nv-sb:104px}
  .nv-sidebar{width:76px!important;top:14px!important;bottom:14px!important;height:calc(100vh - 28px)!important;inset-inline-start:14px!important;padding:12px 0!important;border-radius:26px;background:var(--nv-surface)!important;border:1px solid var(--nv-border)!important;box-shadow:var(--nv-sh);align-items:center}
  .nv-sidebar .nv-brand{justify-content:center;padding:0;min-height:52px}
  .nv-sidebar .nv-brand .ln-bn,.nv-sidebar .lm-collapse-btn,.nv-sidebar .lm-drawer-x{display:none!important}
  .nv-sidebar .nv-brand img{max-width:48px;max-height:40px;object-fit:contain}
  .nv-sidebar .ln-bm{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;color:#fff;background:conic-gradient(from 210deg,var(--mo-deep),var(--mo-accent),var(--mo-pop),var(--mo-accent))}
  .nv-sidebar .ln-side-new{width:48px;height:48px;min-height:48px;padding:0!important;margin:6px auto 10px;border-radius:16px;justify-content:center;font-size:0!important;gap:0;background:var(--mo-accent)!important;color:#fff!important;box-shadow:0 8px 18px -6px color-mix(in oklab,var(--mo-accent) 65%,transparent)}
  .nv-sidebar .ln-side-new i{font-size:17px;color:#fff!important}
  .nv-sidebar .ln-side-new span,.nv-sidebar .ln-side-new kbd{display:none}
  .nv-sidebar .nv-nav{width:100%;display:flex;flex-direction:column;align-items:center;gap:6px;margin:0;padding:2px 0 8px}
  .nv-sidebar .nv-nav-group{font-size:0!important;width:28px;height:1px;padding:0!important;margin:6px auto!important;background:var(--nv-border);border:0!important}
  .nv-sidebar .nv-nav a,.nv-sidebar .nv-sub-t{width:48px;height:48px;min-height:48px;padding:0!important;margin:0;justify-content:center;border-radius:16px;background:color-mix(in oklab,var(--ic) 13%,transparent)}
  .nv-sidebar .nv-nav a span,.nv-sidebar .nv-sub-t span,.nv-sidebar .nv-sub-ar{display:none!important}
  .nv-sidebar .nv-nav a i,.nv-sidebar .nv-sub-t i{width:auto;font-size:17px}
  .nv-sidebar .nv-nav a.active{background:var(--ic)!important;box-shadow:0 8px 18px -6px color-mix(in oklab,var(--ic) 65%,transparent)!important}
  .nv-sidebar .nv-nav a.active i{color:#fff!important}
  .nv-sidebar .nv-nbadge{position:absolute;top:4px;inset-inline-end:4px;min-width:16px;height:16px;padding:0 4px;font-size:10px;border-radius:999px;background:var(--mo-pop)!important;color:#111!important;display:grid;place-items:center}
  .nv-sidebar .nv-sub-m{margin:0!important;padding:0!important;border:0!important;display:flex;flex-direction:column;align-items:center;gap:6px}
  .nv-sidebar .lm-side-balance,.nv-sidebar .nv-side-foot span{display:none!important}
  .nv-sidebar .nv-side-foot{justify-content:center;padding:8px 0 0}
  .nv-sidebar .ln-theme-b{width:44px;height:44px;border-radius:14px;background:color-mix(in oklab,#64748b 13%,transparent);color:#64748b}
  .nv-shell{margin-inline-start:var(--nv-sb)!important}
  .nv-sidebar .nv-nav{scrollbar-width:none}
  .nv-sidebar .nv-nav::-webkit-scrollbar{display:none}
}
@media (min-width:861px) and (max-height:820px){
  .nv-sidebar .nv-nav{gap:4px}
  .nv-sidebar .nv-nav a,.nv-sidebar .nv-sub-t{width:44px;height:44px;min-height:44px;border-radius:14px}
  .nv-sidebar .ln-side-new{width:44px;height:44px;min-height:44px;margin:4px auto 6px}
}
@media (min-width:861px) and (hover:hover) and (pointer:fine){
  .nv-sidebar .nv-nav a:not(.active):hover,.nv-sidebar .nv-sub-t:hover{background:color-mix(in oklab,var(--ic) 24%,transparent)!important;transform:translateY(-1px)}
}
.mo-tip{position:fixed;z-index:200;padding:6px 10px;border-radius:9px;background:var(--nv-text);color:var(--nv-bg);font:700 12.5px/1.2 var(--nv-font);white-space:nowrap;pointer-events:none;transform:translateY(-50%)}

/* ---------- top bar + balance chip ---------- */
.nv-topbar{background:color-mix(in oklab,var(--nv-bg) 86%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.nv-page-title .ln-pt{font-size:16px;font-weight:700}
.mo-balchip{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:999px;background:var(--ln-a-soft);color:var(--nv-text);font-weight:800;font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap}
.mo-balchip i{color:var(--mo-accent)}
.mo-balchip .plus{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--mo-accent);color:#fff!important;font-size:11px}
.mo-balchip .plus i{color:#fff}
@media (max-width:560px){.mo-balchip .lbl{display:none}}
.nv .ln-avatar{background:conic-gradient(from 210deg,var(--mo-deep),var(--mo-accent),var(--mo-pop),var(--mo-accent));color:#fff}

/* ---------- bento tiles ---------- */
.nv .ln-ph h1{font-size:28px;font-weight:700}
.ln-greet{color:var(--mo-accent)}
.ln-kpis{border-radius:22px;overflow:hidden}
.ln-kpi:first-child{background:linear-gradient(150deg,var(--mo-deep),var(--mo-accent) 70%,color-mix(in oklab,var(--mo-accent) 70%,var(--mo-pop)));color:#fff}
.ln-kpi:first-child .k,.ln-kpi:first-child .v,.ln-kpi:first-child .v i{color:#fff!important}
.ln-kpi .v{font-size:20px;font-weight:800}
/* New Order KPI bento (markup in Mosaic/neworder.twig) */
.mo-kpis{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.5fr);gap:14px;margin:0 0 16px}
.mo-kpis.no-lvl{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr)}
.mo-k{display:block;min-width:0;background:var(--nv-surface);border:1px solid var(--nv-border);border-radius:22px;box-shadow:var(--nv-sh);color:var(--nv-text);text-decoration:none}
.mo-k .k{display:block;font-size:12.5px;font-weight:700;color:var(--nv-muted)}
.mo-k .v{display:block;font-family:var(--ln-display);font-size:20px;font-weight:800;line-height:1.2;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.mo-k-bal{padding:20px 22px;border:0;color:#fff;background:linear-gradient(150deg,var(--mo-deep),var(--mo-accent) 70%,color-mix(in oklab,var(--mo-accent) 70%,var(--mo-pop)))}
.mo-k-bal .k{color:rgba(255,255,255,.85);font-size:13px}
.mo-k-bal .v{font-size:32px;margin:4px 0 14px}
.mo-k-bal .btns{display:flex;flex-wrap:wrap;gap:8px}
.mo-kb{display:inline-flex;align-items:center;gap:8px;height:38px;padding-inline:16px;border-radius:999px;font-weight:800;font-size:13.5px;text-decoration:none;white-space:nowrap}
.mo-kb.white{background:#fff;color:var(--mo-deep)}
.mo-kb.white i{color:var(--mo-accent)}
.mo-kb.line{border:1.5px solid rgba(255,255,255,.55);color:#fff}
.mo-k-sm{padding:18px;display:flex;flex-direction:column;justify-content:space-between;gap:12px}
.mo-k-sm .ki{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:var(--ln-a-soft);color:var(--mo-accent);font-size:16px}
.mo-k-sm.c2 .ki{background:color-mix(in oklab,#16a34a 13%,transparent);color:#16a34a}
.mo-k-lvl{padding:18px;display:flex;align-items:center;gap:16px;cursor:pointer}
.mo-k-lvl small{display:block;color:var(--nv-muted);font-size:12.5px;margin-top:2px}
.mo-ringp{--p:0;width:78px;height:78px;flex:none;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--mo-accent) calc(var(--p)*1%),var(--nv-surface-2) 0)}
.mo-ringp>span{width:60px;height:60px;border-radius:50%;background:var(--nv-surface);display:grid;place-items:center;font-family:var(--ln-display);font-weight:800;font-size:14px}
@media (hover:hover) and (pointer:fine){a.mo-k-sm:hover,.mo-k-lvl:hover{border-color:var(--nv-border-2);transform:translateY(-2px)}a.mo-k-sm,.mo-k-lvl{transition:transform .15s ease,border-color .15s ease}.mo-kb.line:hover{background:rgba(255,255,255,.12)}}
@media (max-width:1180px){.mo-kpis,.mo-kpis.no-lvl{grid-template-columns:repeat(2,minmax(0,1fr))}.mo-kpis.no-lvl .mo-k-bal{grid-column:1/-1}}
@media (max-width:560px){.mo-kpis{gap:10px}.mo-k-bal,.mo-k-lvl{grid-column:1/-1}.mo-k-bal .v{font-size:28px}.mo-k-sm{padding:14px}.mo-k-sm .v{font-size:17px}}
.nv-card,.lm-sum-card,.dr-card{border-radius:22px}
.nv #neworder_fields input:not([type=checkbox]):not([type=radio]),.nv #neworder_fields select,.nv #addfunds_fields input:not([type=checkbox]):not([type=radio]),.nv #addfunds_fields select,.nv .nv-input,.nv .nv-select,.nv .form-control{height:48px;min-height:48px;border-radius:14px;border-width:1.5px}
.pl-n{width:26px;height:26px;border-radius:9px;background:var(--mo-accent);color:#fff;font-family:var(--ln-display);font-size:12px}
.ln-order .lm-platforms{gap:8px}
.ln-order .lm-plat{flex-direction:column;justify-content:center;gap:6px;min-width:84px;height:80px;padding:0 10px;border-radius:18px;font-size:12px;font-weight:800}
.ln-order .lm-plat i{font-size:21px}
.ln-order .lm-plat.active,.lm-plat.active{background:var(--ln-a-soft)!important;color:var(--nv-text)!important;box-shadow:inset 0 0 0 1.5px var(--mo-accent),0 0 0 3px var(--ln-a-ring)!important}
.ln-order .lm-plat.active i.fa-layer-group{color:var(--nv-text)!important}
.pl-fact{border-radius:16px}
.nv #service_description{border-radius:14px}
.pl-qq button{height:32px;border-radius:999px;font-weight:800;border-width:1.5px}
@media (hover:hover) and (pointer:fine){.ln-order .lm-plat:hover{transform:translateY(-2px)}.pl-qq button:hover{border-color:var(--mo-accent);color:var(--nv-text)}}
.ln-rcpt .nv-os .row.total{background:var(--nv-text)!important;border:0!important;border-radius:18px!important;color:var(--nv-bg)!important}
.ln-rcpt .nv-os .row.total *{color:var(--nv-bg)!important}
html.nv-dark .ln-rcpt .nv-os .row.total{background:color-mix(in oklab,var(--mo-accent) 20%,var(--nv-surface))!important;border:1px solid color-mix(in oklab,var(--mo-accent) 38%,transparent)!important;color:var(--nv-text)!important}
html.nv-dark .ln-rcpt .nv-os .row.total *{color:var(--nv-text)!important}
html.nv-dark .nv-nav a:not(.active) i,html.nv-dark .nv-nav .nv-sub-t>i:first-child{color:color-mix(in oklab,var(--ic) 72%,#fff)!important}
@media (min-width:861px){html.nv-dark .nv-sidebar .nv-nav a:not(.active),html.nv-dark .nv-sidebar .nv-sub-t{background:color-mix(in oklab,var(--ic) 20%,transparent)}}
.nv .ln-submit{height:54px;border-radius:999px;background:var(--mo-accent)!important;color:#fff!important;border:0!important;font-weight:800;box-shadow:0 10px 24px -8px color-mix(in oklab,var(--mo-accent) 60%,transparent);transition:transform .15s ease}
@media (hover:hover) and (pointer:fine){.nv .ln-submit:hover{transform:translateY(-1px)}}
.nv .nv-btn:not(.soft):not(.ghost):not(.danger){border-radius:999px}
.nv-tab{border-radius:999px}

/* in progress: progress rings (markup added in Mosaic/neworder.twig) */
.dw-h h3 .ln-count{background:var(--ln-a-soft);color:var(--mo-accent);box-shadow:none;font-family:var(--nv-font);font-weight:800}
.dw-h .lnk{color:var(--mo-accent);font-weight:800}
.ln-ao:has(.mo-prow){display:block!important;padding:4px 18px;background:var(--nv-surface);border:1px solid var(--nv-border);border-radius:22px;box-shadow:var(--nv-sh)}
.ao-card.mo-prow{display:grid!important;grid-template-columns:52px minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 0!important;margin:0!important;background:transparent!important;border:0!important;border-top:1px dashed var(--nv-border)!important;border-radius:0!important;box-shadow:none!important;color:var(--nv-text)!important;text-decoration:none;transform:none!important}
.ao-card.mo-prow:first-child{border-top:0!important}
.mo-prow .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:800;font-size:14.5px}
.mo-prow .nm small{display:block;margin-top:1px;font-weight:600;font-size:12.5px;color:var(--nv-muted);font-variant-numeric:tabular-nums}
.mo-prow .st{white-space:nowrap;text-transform:capitalize}
.mo-ring{--p:0;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--mo-accent) calc(var(--p)*1%),var(--nv-surface-2) 0)}
.mo-ring>span{width:36px;height:36px;border-radius:50%;background:var(--nv-surface);display:grid;place-items:center;font-size:11px;font-weight:800;font-variant-numeric:tabular-nums}
@media (hover:hover) and (pointer:fine){.ao-card.mo-prow:hover .nm{color:var(--mo-accent)}}

/* ---------- v2: page frame, order card, platforms, form grid (mockup) ---------- */
body.nv{background:var(--nv-bg)}
@media (min-width:861px){
  .nv-shell{margin:0!important;margin-inline-start:var(--nv-sb)!important;box-shadow:none!important;border-radius:0!important;background:transparent!important;min-height:100vh}
  .nv-topbar{top:0!important;border-bottom:0!important;border-radius:0!important;padding-inline:26px 20px!important;background:color-mix(in oklab,var(--nv-bg) 92%,transparent)!important}
  .nv-page-title{font-size:13px}
  .nv-page-title .ln-crumb,.nv-page-title .ln-sl{color:var(--nv-muted)}
  .nv-topbar .ln-cmd{height:46px;border-radius:999px;background:var(--nv-surface);border:1px solid var(--nv-border);min-width:260px}
  .nv-topbar .nv-icon-btn{width:44px;height:44px;border-radius:50%;background:var(--nv-surface);border:1px solid var(--nv-border)}
  .nv-sidebar .nv-side-foot{display:flex!important;flex-direction:column;align-items:center;margin-top:auto;padding:8px 0 0!important}
  .nv-sidebar .nv-side-foot .ln-theme-b{display:grid!important;place-items:center;font-size:16px}
}
.ln-fcard{padding:0!important;overflow:visible}
.ln-fc-head{display:flex!important;flex-wrap:wrap;align-items:center;gap:12px;padding:16px 18px!important;margin:0!important;border-bottom:1px solid var(--nv-border)}
.mo-oh{flex:1 1 auto;margin:0;font-family:var(--ln-display);font-size:18px;font-weight:700;color:var(--nv-text)}
.ln-fc-head .nv-tabs{margin:0!important;padding:4px!important;gap:4px;border-radius:999px!important;background:var(--nv-surface-2)!important;border:1px solid var(--nv-border)!important;width:auto!important;flex:none}
.ln-fc-head .nv-tab{height:36px;padding-inline:16px!important;border-radius:999px!important;font-weight:800;color:var(--nv-muted)}
.ln-fc-head .nv-tab.active{background:var(--nv-surface)!important;color:var(--nv-text)!important;box-shadow:var(--nv-sh)!important}
.ln-fc-head .lm-search-wrap{flex:1 1 100%;order:3;margin:0!important;max-width:none!important}
.ln-fc-body{padding:18px!important}
#svcDDBtn .cur .nm{flex:1 1 auto}
#svcDDBtn .cur .pr{flex:none;overflow:visible}
.ln-order .lm-platforms{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:8px!important;overflow:visible!important;flex-wrap:wrap;padding:2px!important;-webkit-mask-image:none!important;mask-image:none!important}
.ln-order .lm-plat{aspect-ratio:1/1;width:auto!important;min-width:0!important;height:auto!important;padding:6px!important;border-radius:18px!important;border:1.5px solid var(--nv-border)!important;background:var(--nv-surface-2)!important;color:var(--nv-muted)!important;flex-direction:column;justify-content:center;gap:6px;font-size:12px;font-weight:800;box-shadow:none}
.ln-order .lm-plat i{font-size:22px!important}
.ln-order .lm-plat.active{border-color:var(--mo-accent)!important;background:var(--ln-a-soft)!important;color:var(--nv-text)!important;box-shadow:0 0 0 3px var(--ln-a-ring)!important}
@media (max-width:560px){.ln-order .lm-platforms{grid-template-columns:repeat(4,minmax(0,1fr))}.ln-order .lm-plat{border-radius:14px!important;font-size:11px;gap:4px;padding:4px!important}.ln-order .lm-plat i{font-size:19px!important}.mo-oh{font-size:16px}}
html.nv-dark .ln-order .lm-plat i.fa-tiktok,html.nv-dark .ln-order .lm-plat i.fa-x-twitter,html.nv-dark .ln-order .lm-plat i.fa-threads{color:var(--nv-text)!important}
@media (min-width:1180px){
  #lnOrderForm{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:12px;position:relative}
  #lnOrderForm>*{grid-column:1/-1}
  #lnOrderForm>.nv-field:has(#neworder_category),#lnOrderForm>.nv-field:has(#neworder_services){grid-column:auto;position:static}
  #lnOrderForm #svcDD{position:static}
  #lnOrderForm #svcDD .nv-catdd-menu{top:auto!important;left:0!important;right:0!important;width:auto!important;max-width:none!important;margin-top:6px}
}

/* ---------- phones: floating dock ---------- */
@media (max-width:860px){
  .nv-bottomnav{left:max(12px,env(safe-area-inset-left,0px))!important;right:max(12px,env(safe-area-inset-right,0px))!important;bottom:calc(10px + env(safe-area-inset-bottom,0px))!important;border-radius:24px;border:1px solid var(--nv-border)!important;box-shadow:var(--nv-sh);padding:6px!important}
  .nv-bottomnav a{color:var(--ic)!important}
  .nv-bottomnav a.active{background:color-mix(in oklab,var(--ic) 15%,transparent);border-radius:14px}
  .nv-bottomnav a.active::before{display:none}
  .nv-bottomnav a.lm-fab{background:conic-gradient(from 210deg,var(--mo-deep),var(--mo-accent),var(--mo-pop),var(--mo-accent))!important;border-radius:16px!important;color:#fff!important}
  .nv-bottomnav a.lm-fab i{color:#fff!important}
  .nv-sidebar .nv-nav a{border-radius:12px}
}

@media (prefers-reduced-motion:reduce){
  .nv .ln-submit,.ao-card,.pl-qq button,.ln-order .lm-plat,.nv-sidebar .nv-nav a,a.mo-k-sm,.mo-k-lvl{transition:none!important}
}

/* MOSAIC XPFIX (2026-10-17): keep the XP levels dialog reachable from the New Order Level tile on desktop.
   The rail hid the whole balance box, and the dialog lives inside it, so it opened at 0x0. */
@media (min-width:861px){
  .nv-sidebar .lm-side-balance{display:block!important;position:absolute!important;width:0!important;height:0!important;padding:0!important;margin:0!important;border:0!important;background:none!important;box-shadow:none!important;overflow:visible!important}
  .nv-sidebar .lm-side-balance>:not(.lmxpm-ov){display:none!important}
}
/* MOSAIC audit fix (2026-10-17): rail sub-menus (owner menus with children, e.g. the guest "Platforms" group) showed
   empty tiles: show the item's initial; the full name is the link's title/label on hover. */
@media (min-width:861px){
  .nv-sidebar .nv-sub-m a span{display:block!important;font-size:0!important;line-height:1}
  .nv-sidebar .nv-sub-m a span::first-letter{font-size:14px;font-weight:800;text-transform:uppercase}
  .nv-sidebar .nv-sub-m a:has(>i) span{display:none!important}
  .nv-sidebar .nv-sub-m a>i{display:inline-block!important;width:auto!important;font-size:15px!important;color:inherit!important}
}

/* MOSAIC phone drawer (2026-10-17, owner: sidebars looked alike): a bento launcher, the menu as a 3-column grid of
   tinted tiles, each with its own colour square (the rail colours); the current page is a solid tile */
@media (max-width:860px){
  .nv-sidebar .nv-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;align-content:start;padding:6px 0 16px}
  .nv-sidebar .nv-nav>.nv-nav-group,.nv-sidebar .nv-nav>.nv-sub{grid-column:1/-1}
  .nv-sidebar .nv-nav>.nv-nav-group{padding:8px 4px 0!important}
  .nv-sidebar .nv-nav>a{flex-direction:column;justify-content:center;align-items:flex-start;gap:8px!important;height:auto!important;min-height:84px!important;padding:10px!important;margin:0!important;border-radius:18px!important;background:color-mix(in oklab,var(--ic) 11%,var(--nv-surface))!important;box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--ic) 18%,transparent)!important;font-size:12px!important;font-weight:700;line-height:1.2;color:var(--nv-text)!important}
  .nv-sidebar .nv-nav>a span{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .nv-sidebar .nv-nav>a>i:first-child{width:32px!important;height:32px;border-radius:10px;display:grid;place-items:center;font-size:14px!important;background:var(--ic);color:#fff!important}
  .nv-sidebar .nv-nav>a.active{background:var(--ic)!important;color:#fff!important;box-shadow:0 12px 22px -12px var(--ic)!important}
  .nv-sidebar .nv-nav>a.active>i:first-child{background:rgba(255,255,255,.22)}
  .nv-sidebar .nv-nav>a .nv-nbadge{position:absolute;top:8px;inset-inline-end:8px;margin:0!important}
}
/* AUDIT-FIX2 (2026-10-18): signed-in audit, light + dark - phone bottom bar: the orange/green active items on their own tint were under 3:1 */
html:not(.nv-dark) .nv-bottomnav a[href*="ticket"]{--ic:#c2410c}html:not(.nv-dark) .nv-bottomnav a[href$="addfunds"]{--ic:#15803d}