/* 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}
}

/* ===== SPARK skin (2026-10-17): Spark fonts over the Pulse engine for signed-in pages. Product UI stays still:
   no looping animation here, transitions only (<=200ms). ===== */
body,.lm-app,.ln-app,input,select,textarea,button{font-family:"DM Sans","Segoe UI",system-ui,-apple-system,sans-serif}
h1,h2,h3,.ln-greet h1,.lm-title,.page-title{font-family:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;letter-spacing:-.02em}

/* =====================================================================
   SPARK app skin v2 (2026-10-17): signed-in pages, from the approved mockup (artifact 2zJYCbkGRR8MXPSegbJxJe).
   Visual only over the Pulse engine: ids, classes and scripts untouched. Product UI = no looping motion;
   hover/focus transitions <=200ms; every colour from --nv-accent. Overrides the PULSE rules above.
   ===================================================================== */
:root,html.nv-html{
  --sp-accent:var(--nv-accent,#2563eb);
  --sp-deep:color-mix(in oklab,var(--sp-accent) 72%,#050b1f);
  --sp-cool:color-mix(in oklab,var(--sp-accent) 78%,#22d3ee);
  --ln-canvas:#f3f6fb;--nv-bg:#f3f6fb;--nv-surface:#ffffff;--nv-surface-2:#f7f9fd;--nv-card:#ffffff;--ln-sunk:#f5f8fc;
  --nv-text:#0e1830;--nv-text-soft:#2a3550;--nv-muted:#5a6680;--ln-faint:#7a86a0;
  --nv-border:color-mix(in oklab,var(--sp-accent) 8%,#e2e8f1);--nv-border-2:color-mix(in oklab,var(--sp-accent) 14%,#d3dbe7);--ln-line-3:color-mix(in oklab,var(--sp-accent) 6%,#edf1f6);
  --nv-r:16px;--nv-r-sm:12px;--nv-r-lg:20px;
  --ln-display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --nv-font:"DM Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --ln-a-soft:color-mix(in oklab,var(--sp-accent) 10%,transparent);
  --ln-a-ring:color-mix(in oklab,var(--sp-accent) 22%,transparent);
  --nv-sh:0 1px 2px rgba(14,24,48,.05),0 6px 20px rgba(14,24,48,.06);
}
html.nv-dark{
  --sp-deep:color-mix(in oklab,var(--sp-accent) 50%,#030712);
  --sp-cool:color-mix(in oklab,var(--sp-accent) 60%,#0e7490);
  --ln-canvas:#0b1121;--nv-bg:#0b1121;--nv-surface:#121a2e;--nv-surface-2:#162038;--nv-card:#121a2e;--ln-sunk:#0f1628;
  --nv-text:#e7ecf6;--nv-text-soft:#c6cee0;--nv-muted:#9aa5bd;--ln-faint:#7d88a2;
  --nv-border:color-mix(in oklab,var(--sp-accent) 12%,#1f2a44);--nv-border-2:color-mix(in oklab,var(--sp-accent) 18%,#2a3654);--ln-line-3:color-mix(in oklab,var(--sp-accent) 8%,#18213a);
  --ln-a-soft:color-mix(in oklab,var(--sp-accent) 18%,transparent);
  --ln-a-ring:color-mix(in oklab,var(--sp-accent) 34%,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{font-family:var(--ln-display)}

/* ---------- sidebar: accent gradient, white text ---------- */
.nv-sidebar{
  color:#fff;border-inline-end:0;
  background:
    radial-gradient(320px 320px at 100% 0%,rgba(255,255,255,.16),transparent 70%),
    radial-gradient(120% 140px at 50% 100%,rgba(255,255,255,.12),transparent 70%),
    linear-gradient(170deg,var(--sp-deep) 0%,var(--sp-accent) 58%,var(--sp-cool) 100%)!important;
}
.nv-sidebar .nv-brand,.nv-sidebar .ln-bn,.nv-sidebar .ln-brand-l{color:#fff}
.nv-sidebar .ln-bm{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.32);color:#fff}
.nv-sidebar .nv-brand.ln-has-dark .pp-logo-light{display:none}
.nv-sidebar .nv-brand.ln-has-dark .pp-logo-dark{display:block}
.nv-sidebar .nv-brand:not(.ln-has-dark) .pp-logo-light{background:#fff;border-radius:10px;padding:4px 8px}
.nv-sidebar .lm-collapse-btn,.nv-sidebar .lm-drawer-x{color:#fff;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28)}
.nv-sidebar .ln-side-new{background:#fff!important;color:var(--sp-deep)!important;font-weight:800;border:0;box-shadow:0 8px 20px rgba(5,11,31,.22)}
.nv-sidebar .ln-side-new i{color:var(--sp-deep)!important}
.nv-sidebar .nv-nav-group{color:rgba(255,255,255,.7)}
.nv-sidebar .nv-nav a,.nv-sidebar .nv-sub-t{color:rgba(255,255,255,.88)}
.nv-sidebar .nv-nav a i,.nv-sidebar .nv-sub-t i{color:rgba(255,255,255,.9)}
.nv-sidebar .nv-nav a.active{background:#fff!important;color:var(--sp-deep)!important;box-shadow:0 6px 16px rgba(5,11,31,.18)!important}
.nv-sidebar .nv-nav a.active i{color:var(--sp-accent)!important}
.nv-sidebar .nv-nbadge{background:rgba(255,255,255,.22);color:#fff}
.nv-sidebar .nv-nav a.active .nv-nbadge{background:var(--ln-a-soft);color:var(--sp-deep)}
.nv-sidebar .nv-sub-m{border-color:rgba(255,255,255,.2)}
.nv-sidebar .lm-side-balance{background:rgba(255,255,255,.12)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.24)!important;color:#fff}
.nv-sidebar .lm-side-balance::after{display:none}
.nv-sidebar .lm-side-balance .l{color:rgba(255,255,255,.8)}
.nv-sidebar .lm-side-balance .v{color:#fff;font-family:var(--ln-display)}
.nv-sidebar .lm-side-balance a.ln-bal-add{background:#fff;color:var(--sp-deep)!important;border-radius:9px;padding:5px 10px;font-weight:700}
.nv-sidebar .lm-side-balance a.ln-bal-add i{color:var(--sp-deep)}
.nv-sidebar .lm-xp{background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);color:#fff}
.nv-sidebar .lm-xp-lvl,.nv-sidebar .lm-xp-lvl i{color:#fff}
.nv-sidebar .lm-xp-badge{background:rgba(255,255,255,.22);color:#fff}
.nv-sidebar .nv-side-foot{color:rgba(255,255,255,.75)}
.nv-sidebar .ln-theme-b{color:#fff}
@media (hover:hover) and (pointer:fine){
  .nv-sidebar .nv-nav a:not(.active):hover,.nv-sidebar .nv-sub-t:hover{background:rgba(255,255,255,.12)!important;color:#fff}
  .nv-sidebar .lm-xp:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
}

/* ---------- top bar ---------- */
.nv-topbar{background:color-mix(in oklab,var(--nv-bg) 88%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.nv-page-title .ln-pt{font-size:17px;font-weight:800}
.nv .nv-pill.nv-cur-hl{background:var(--ln-a-soft);color:var(--sp-accent);border-color:transparent}
.nv .ln-avatar{background:linear-gradient(140deg,var(--sp-deep),var(--sp-accent));color:#fff}

/* ---------- page header + summary strip ---------- */
.nv .ln-ph h1{font-size:32px;font-weight:800}
.ln-greet{color:var(--sp-accent)}
.ln-kpis{border-radius:18px}
.ln-kpi .v{font-family:var(--ln-display);font-size:21px}

/* ---------- cards + inputs ---------- */
.nv-card,.lm-sum-card,.dr-card{border-radius:20px}
.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:12px;border-width:1.5px}

/* New Order: numbered steps as gradient discs, chips with a ring */
.pl-n{width:26px;height:26px;border-radius:50%;background:linear-gradient(140deg,var(--sp-deep),var(--sp-accent));color:#fff;font-size:12.5px}
.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(--sp-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:14px;background:var(--nv-surface-2);box-shadow:inset 0 0 0 1px var(--nv-border)}
.nv #service_description{background:var(--ln-a-soft);border:1px dashed color-mix(in oklab,var(--sp-accent) 30%,transparent);color:var(--nv-text-soft)}
.pl-qq button{height:34px;border-radius:10px;font-weight:700;border-width:1.5px}
@media (hover:hover) and (pointer:fine){.pl-qq button:hover{border-color:var(--sp-accent);color:var(--nv-text)}}

/* Order summary: gradient total, strong place-order button */
.ln-rcpt .nv-os .row.total{color:#fff;border:0!important;position:relative;overflow:hidden;background:linear-gradient(140deg,var(--sp-deep),var(--sp-accent) 60%,var(--sp-cool))!important;border-radius:16px!important}
.ln-rcpt .nv-os .row.total *{color:#fff!important}
.nv .ln-submit{height:52px;border-radius:14px;background:var(--sp-accent)!important;color:#fff!important;border:0!important;font-weight:800;position:relative;overflow:hidden;box-shadow:0 10px 24px color-mix(in oklab,var(--sp-accent) 35%,transparent);transition:transform .15s ease}
.nv .ln-submit::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.4) 50%,transparent 65%);transform:translateX(-120%);pointer-events:none}
@media (hover:hover) and (pointer:fine){.nv .ln-submit:hover{transform:translateY(-1px)}.nv .ln-submit:hover::after{transform:translateX(120%);transition:transform .5s ease}}

/* Primary buttons everywhere follow the accent */
.nv .nv-btn:not(.soft):not(.ghost):not(.danger){border-radius:12px}

/* In progress cards */
.dw-h h3 .ln-count{background:var(--ln-a-soft);color:var(--sp-accent);box-shadow:none;font-family:var(--nv-font);font-weight:700}
.dw-h .lnk{color:var(--sp-accent);font-weight:700}
.ao-card{border-radius:16px;transition:transform .15s ease,box-shadow .15s ease}
.ao-bar{border-radius:999px;overflow:hidden}
.ao-bar>span{background:linear-gradient(90deg,var(--sp-accent),var(--sp-cool))!important;border-radius:inherit}
@media (hover:hover) and (pointer:fine){.ao-card:hover{transform:translateY(-2px);box-shadow:var(--nv-sh)}}

/* Phone bottom bar */
.nv-bottomnav a.active,.nv-bottomnav a[aria-current="page"]{color:var(--sp-accent)}
.lm-fab{background:linear-gradient(140deg,var(--sp-deep),var(--sp-accent))!important;color:#fff!important;box-shadow:0 8px 18px color-mix(in oklab,var(--sp-accent) 35%,transparent)!important}

@media (prefers-reduced-motion:reduce){
  .nv .ln-submit,.ao-card,.pl-qq button{transition:none!important}
  .nv .ln-submit::after{display:none}
}

/* SPARK app skin v2b: readable sidebar badge; Add funds stays a solid white button in dark mode too */
.nv-sidebar .nv-nbadge,html.nv-dark .nv-sidebar .nv-nbadge{background:#fff!important;color:var(--sp-deep)!important;font-weight:800}
.nv-sidebar .lm-side-balance a.ln-bal-add,html.nv-dark .nv-sidebar .lm-side-balance a.ln-bal-add{background:#fff!important;color:var(--sp-deep)!important;border:0!important;box-shadow:none!important}
.nv-sidebar .lm-side-balance a.ln-bal-add i,html.nv-dark .nv-sidebar .lm-side-balance a.ln-bal-add i{color:var(--sp-deep)!important}

/* =====================================================================
   SPARK layout v3 (2026-10-17, owner: "Pulse and Spark New Order page is same" + sidebars all look alike).
   CSS only over the Pulse engine; ids, classes and scripts untouched; every colour from --nv-accent.
   1. Sidebar = launchpad: the menu is a 2-column grid of glass tiles on the gradient (desktop and phone drawer).
   2. New Order = launch band: greeting + live numbers on glass chips inside a gradient band, the order card lifts
      out of it, platforms are tiles, and the order summary is a gradient boarding pass.
   ===================================================================== */

/* ---------- 1. launchpad sidebar ---------- */
.nv-sidebar .nv-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-content:start;padding-top:2px}
.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:10px 4px 2px!important}
.nv-sidebar .nv-nav>a{flex-direction:column;justify-content:center;gap:7px!important;height:auto!important;min-height:76px!important;padding:10px 6px!important;margin:0!important;border-radius:16px!important;background:rgba(255,255,255,.1)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)!important;text-align:center;font-size:12.5px!important;line-height:1.2}
.nv-sidebar .nv-nav>a span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal}
.nv-sidebar .nv-nav>a>i:first-child{width:34px!important;height:34px;border-radius:11px;display:grid;place-items:center;font-size:15px!important;background:rgba(255,255,255,.16)}
.nv-sidebar .nv-nav>a.active{background:#fff!important;box-shadow:0 10px 22px -10px rgba(5,11,31,.45)!important}
.nv-sidebar .nv-nav>a.active>i:first-child{background:linear-gradient(140deg,var(--sp-deep),var(--sp-accent));color:#fff!important}
.nv-sidebar .nv-nav>a .nv-nbadge{position:absolute;top:6px;inset-inline-end:6px;margin:0!important}
@media (hover:hover) and (pointer:fine){.nv-sidebar .nv-nav>a:not(.active):hover{background:rgba(255,255,255,.18)!important;transform:translateY(-1px)}}
.nv-sidebar .nv-nav>a{transition:background-color .15s ease,transform .15s ease}
/* the desktop collapse button turns the sidebar into a narrow rail: one tile per row, icon only */
body.lm-collapsed .nv-sidebar .nv-nav{grid-template-columns:1fr}
body.lm-collapsed .nv-sidebar .nv-nav>a{min-height:52px!important;padding:6px!important}

/* ---------- 2. New Order launch band ---------- */
#lnMain:has(#lm-order) .ln-ph{position:relative;isolation:isolate;overflow:hidden;align-items:flex-end;gap:22px;padding:30px 30px 98px;border-radius:26px;color:#fff;
  background:radial-gradient(520px 260px at 92% -10%,rgba(255,255,255,.22),transparent 70%),radial-gradient(420px 220px at 0% 120%,color-mix(in oklab,var(--sp-cool) 65%,transparent),transparent 70%),linear-gradient(135deg,var(--sp-deep) 0%,var(--sp-accent) 55%,var(--sp-cool) 100%)}
#lnMain:has(#lm-order) .ln-ph::after{content:"";position:absolute;z-index:-1;right:-50px;bottom:-80px;width:280px;height:280px;border-radius:50%;border:40px solid rgba(255,255,255,.08);pointer-events:none}
#lnMain:has(#lm-order) .ln-ph .ln-greet{color:rgba(255,255,255,.85)!important;letter-spacing:.12em;text-transform:uppercase;font-size:12px;font-weight:700}
#lnMain:has(#lm-order) .ln-ph h1{color:#fff;font-size:40px;letter-spacing:-.03em}
#lnMain:has(#lm-order) .ln-ph .sub{color:rgba(255,255,255,.82)}
#lnMain:has(#lm-order) .ln-ph .ln-kpis{display:grid!important;grid-template-columns:repeat(2,minmax(128px,1fr));gap:10px!important;background:none!important;border:0!important;box-shadow:none!important;padding:0!important;overflow:visible!important;border-radius:0}
#lnMain:has(#lm-order) .ln-ph .ln-kpi{display:flex!important;flex-direction:column;gap:2px;padding:12px 16px!important;border:1px solid rgba(255,255,255,.28)!important;border-radius:16px!important;background:rgba(255,255,255,.14)!important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff!important;text-decoration:none}
#lnMain:has(#lm-order) .ln-ph .ln-kpi .k{color:rgba(255,255,255,.78)!important}
#lnMain:has(#lm-order) .ln-ph .ln-kpi .v,#lnMain:has(#lm-order) .ln-ph .ln-kpi .v i{color:#fff!important}
#lnMain:has(#lm-order) .ln-ph .ln-kpi:first-child{background:#fff!important;border-color:#fff!important}
#lnMain:has(#lm-order) .ln-ph .ln-kpi:first-child .k{color:var(--nv-muted)!important}
#lnMain:has(#lm-order) .ln-ph .ln-kpi:first-child .v{color:var(--sp-deep)!important}
html.nv-dark #lnMain:has(#lm-order) .ln-ph .ln-kpi:first-child{background:var(--nv-surface)!important;border-color:var(--nv-surface)!important}
html.nv-dark #lnMain:has(#lm-order) .ln-ph .ln-kpi:first-child .v{color:var(--nv-text)!important}
@media (min-width:1101px){#lnMain:has(#lm-order) .ln-ph .ln-kpis{grid-template-columns:repeat(4,minmax(118px,1fr))}}
/* the order cards lift out of the band */
#lnMain:has(#lm-order) #lm-order{position:relative;z-index:1;margin-top:-72px;padding-inline:18px}
#lm-order .ln-fcard{box-shadow:0 24px 50px -28px rgba(14,24,48,.45)!important}

/* platforms as tiles */
#lm-order .lm-platforms{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(94px,1fr));gap:10px!important;padding:2px!important;overflow:visible!important;-webkit-mask-image:none!important;mask-image:none!important;background:none!important;border:0!important;box-shadow:none!important}
#lm-order .lm-plat{height:84px!important;min-width:0!important;padding:10px 6px!important;flex-direction:column!important;justify-content:center;gap:8px!important;border:2px solid transparent!important;border-radius:16px!important;background:var(--nv-surface-2)!important;box-shadow:inset 0 0 0 1px var(--nv-border)!important;font-weight:700!important;font-size:12.5px!important;color:var(--nv-text)!important;transition:transform .15s ease,box-shadow .15s ease}
#lm-order .lm-plat i{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:17px!important;background:var(--nv-surface);box-shadow:0 2px 6px rgba(14,24,48,.08)}
#lm-order .lm-plat.active{background:linear-gradient(var(--nv-surface),var(--nv-surface)) padding-box,linear-gradient(135deg,var(--sp-deep),var(--sp-accent),var(--sp-cool)) border-box!important;box-shadow:0 12px 24px -14px color-mix(in oklab,var(--sp-accent) 80%,transparent)!important;transform:translateY(-2px)}
#lm-order .lm-plat.active i,#lm-order .lm-platforms .lm-plat.active i.fa-layer-group{background:linear-gradient(140deg,var(--sp-deep),var(--sp-accent));color:#fff!important}
@media (hover:hover) and (pointer:fine){#lm-order .lm-plat:not(.active):hover{transform:translateY(-2px)}}

/* the summary as a gradient boarding pass */
#lm-order .ln-rcpt{position:relative;overflow:hidden;border:0!important;border-radius:24px!important;color:#fff;background:radial-gradient(300px 200px at 100% 0%,rgba(255,255,255,.2),transparent 70%),linear-gradient(160deg,var(--sp-deep) 0%,var(--sp-accent) 70%,var(--sp-cool) 135%)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 26px 50px -24px color-mix(in oklab,var(--sp-deep) 85%,transparent)!important}
#lm-order .ln-rcpt .lm-sum-head{border-bottom:2px dashed rgba(255,255,255,.3)!important;background:transparent!important}
#lm-order .ln-rcpt .lm-sum-head,#lm-order .ln-rcpt .lm-sum-head *{color:#fff!important}
#lm-order .ln-rcpt .ln-live{background:rgba(255,255,255,.16)!important}
#lm-order .ln-rcpt .ln-dot{background:#4ade80!important}
#lm-order .ln-rcpt .nv-os .row{border-color:rgba(255,255,255,.16)!important}
#lm-order .ln-rcpt .nv-os .row span,#lm-order .ln-rcpt .nv-os .row span i{color:rgba(255,255,255,.75)!important}
#lm-order .ln-rcpt .nv-os .row b{color:#fff!important}
#lm-order .ln-rcpt .nv-os .row.total{margin-top:12px;padding:16px!important;background:rgba(255,255,255,.12)!important;border:1px dashed rgba(255,255,255,.4)!important;border-radius:16px!important}
#lm-order .ln-rcpt .nv-os .row.total b{font-size:28px;font-family:var(--ln-display)}
#lm-order .ln-rcpt-foot .ln-submit{background:#fff!important;color:var(--sp-deep)!important;box-shadow:0 14px 26px -12px rgba(0,0,0,.45)!important}
#lm-order .ln-rcpt-foot .ln-submit i{color:var(--sp-accent)!important}
#lm-order .ln-rcpt-bal,#lm-order .ln-rcpt-bal *{color:rgba(255,255,255,.88)!important;border-color:rgba(255,255,255,.2)!important}
#lm-order .ln-rcpt-note,#lm-order .ln-rcpt-note *{color:rgba(255,255,255,.72)!important}

/* in-progress cards: a gradient top edge */
#lnMain:has(#lm-order) .ao-card{box-shadow:inset 0 3px 0 var(--sp-accent),var(--nv-sh)!important}

/* phones */
@media (max-width:860px){
  #lnMain:has(#lm-order) .ln-ph{padding:22px 18px 86px;border-radius:22px}
  #lnMain:has(#lm-order) .ln-ph h1{font-size:30px}
  #lnMain:has(#lm-order) #lm-order{margin-top:-66px;padding-inline:8px}
  #lm-order .lm-platforms{grid-template-columns:repeat(4,minmax(0,1fr))}
  #lm-order .lm-plat{height:76px!important;font-size:11.5px!important;gap:6px!important}
  #lm-order .lm-plat i{width:34px;height:34px;font-size:15px!important}
}
@media (prefers-reduced-motion:reduce){.nv-sidebar .nv-nav>a,#lm-order .lm-plat{transition:none!important}}

/* ---------- 3. every page head is a gradient band (Spark's landing hero), not only New Order ---------- */
#lnMain .ln-ph,#lnMain .lm-hero{position:relative;isolation:isolate;overflow:hidden;padding:24px 26px;border-radius:24px;color:#fff;
  background:radial-gradient(460px 220px at 95% -20%,rgba(255,255,255,.2),transparent 70%),linear-gradient(135deg,var(--sp-deep) 0%,var(--sp-accent) 58%,var(--sp-cool) 100%)}
#lnMain .ln-ph h1,#lnMain .lm-hero h1{color:#fff}
#lnMain .ln-ph .ln-greet,#lnMain .lm-hero .ln-greet{color:rgba(255,255,255,.85)!important;letter-spacing:.12em;text-transform:uppercase;font-size:12px;font-weight:700}
#lnMain .ln-ph .sub,#lnMain .ln-ph .ln-sub,#lnMain .lm-hero .sub,#lnMain .lm-hero .ln-sub,#lnMain .ln-ph p,#lnMain .lm-hero p{color:rgba(255,255,255,.82)!important}
#lnMain .ln-ph .ln-crumb,#lnMain .ln-ph .ln-crumb a,#lnMain .lm-hero .ln-crumb,#lnMain .lm-hero .ln-crumb a{color:rgba(255,255,255,.8)!important}
#lnMain .ln-ph .nv-btn:not(.ghost):not(.soft):not(.danger),#lnMain .lm-hero .nv-btn:not(.ghost):not(.soft):not(.danger){background:#fff!important;color:var(--sp-deep)!important;border:0!important;box-shadow:0 10px 20px -10px rgba(0,0,0,.4)!important}
#lnMain .ln-ph .nv-btn:not(.ghost):not(.soft):not(.danger) i,#lnMain .lm-hero .nv-btn:not(.ghost):not(.soft):not(.danger) i{color:var(--sp-accent)!important}
#lnMain .ln-ph .nv-btn.ghost,#lnMain .ln-ph .nv-btn.soft,#lnMain .lm-hero .nv-btn.ghost,#lnMain .lm-hero .nv-btn.soft{background:rgba(255,255,255,.14)!important;color:#fff!important;border:1px solid rgba(255,255,255,.32)!important;box-shadow:none!important}
#lnMain .ln-ph .nv-btn.ghost i,#lnMain .ln-ph .nv-btn.soft i,#lnMain .lm-hero .nv-btn.ghost i,#lnMain .lm-hero .nv-btn.soft i{color:#fff!important}
#lnMain .ln-ph .ln-tag,#lnMain .lm-hero .ln-tag{background:rgba(255,255,255,.18)!important;color:#fff!important;box-shadow:none!important}
#lnMain .ln-ph .ln-kpis,#lnMain .lm-hero .ln-kpis{box-shadow:0 12px 24px -14px rgba(0,0,0,.4)}
@media (max-width:860px){#lnMain .ln-ph,#lnMain .lm-hero{padding:20px 18px;border-radius:20px}}