/* NX_BASE_V1 - minimal dark theme without bleed */
:root{
  color-scheme:dark;
  --bg:#0B0B0F; --card:#12121A; --soft:#181822;
  --text:#EAEAF2; --muted:#A8A8B3; --brand:#4f46e5;
  --border:rgba(255,255,255,.14); --danger:#ef4444;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body.nx-body{background:var(--bg);color:var(--text);font:16px/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial;min-height:100vh;display:flex;flex-direction:column}
a{color:#a8b4ff;text-decoration:none}
a:hover{color:#fff}
.nx-wrap{max-width:1120px;margin:0 auto;padding:0 20px}

/* Header */
.nx-header{position:sticky;top:0;z-index:50;background:linear-gradient(180deg,#0b0b0fee,#0b0b0fcc 60%,transparent);backdrop-filter:saturate(1.2) blur(6px);border-bottom:1px solid var(--border)}
.nx-header .nx-wrap{display:flex;align-items:center;justify-content:space-between;height:56px}
/* 2026-05-27 (iter 11 hotfix #3): on mobile, backdrop-filter:blur on a
   sticky element forces the GPU to sample-and-blur the page behind it
   for every paint frame. On Samsung Internet (and other mobile
   Chromium-derived browsers on lower-end SoCs) this produces visible
   GPU buffer-bleed stripes mid-scroll on long pages -- the missionboard
   in particular triggered it because the page is dense and tall. Drop
   the blur + alpha-gradient on mobile in favour of a solid opaque
   background; the glass effect is barely perceptible on a small screen
   and the per-frame GPU saving eliminates the corruption. Desktop keeps
   the original appearance because hover-capable pointer devices imply
   a desktop GPU that handles the blur fine. */
@media (max-width:640px){
  .nx-header{
    background:#0b0b0f;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
}
.nx-brand{display:flex;align-items:center;gap:10px}
.nx-badge{width:22px;height:22px;border-radius:6px;background:#244cf5;display:inline-flex;align-items:center;justify-content:center;line-height:1;color:#fff;font-weight:700}
.nx-name{font-weight:700;color:var(--text);user-select:none;-webkit-user-select:none}
.nx-brand:hover .nx-name{color:var(--text)}
.nx-nav{display:flex;align-items:center;gap:12px}
.nx-link{opacity:.9}
.nx-link:hover{opacity:1}
.nx-pill, .nx-pill button{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid var(--border);background:transparent;color:var(--text);cursor:pointer}
.nx-pill.danger, .nx-pill.danger button{border-color:#7a1010;color:#ffd2d2}
.nx-pill button{background:none;border:none}

/* Main/sections */
.nx-main{flex:1}
.nx-hero{max-width:1120px;margin:32px auto;padding:0 20px}
.nx-section{max-width:1120px;margin:24px auto;padding:0 20px}
.nx-muted{color:var(--muted)}
.nx-chip{display:inline-block;padding:2px 8px;border-radius:8px;border:1px solid var(--border);background:var(--soft);color:var(--text)}

/* Cards */
.nx-card{display:grid;grid-template-columns:320px 1fr;background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden}
.nx-card__media img{display:block;width:100%;height:100%;object-fit:cover}
.nx-card__body{padding:16px}
.nx-eyebrow{font-size:12px;letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.nx-actions{display:flex;gap:10px;margin-top:12px}
.nx-btn{padding:8px 12px;border-radius:10px;background:var(--brand);color:#fff;display:inline-block}
.nx-btn.ghost{background:transparent;border:1px solid var(--border);color:var(--text)}
.nx-card--mini{display:block;background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.nx-card--mini img{width:100%;height:180px;object-fit:cover;display:block}
.nx-card--mini .nx-title{padding:8px 10px 0;font-weight:600}
.nx-card--mini .nx-price{padding:0 10px 10px;color:#cfd3ff}

/* Grid */
.nx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}

/* Product page */
.nx-product{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.nx-product__media img{width:100%;height:400px;object-fit:cover;border-radius:12px}

/* Footer */
.nx-footer{border-top:1px solid var(--border);margin-top:auto;color:var(--muted);font-size:.8rem;text-align:center;padding:6px 0}
.nx-footer .nx-wrap{display:flex;align-items:center;justify-content:center;color:var(--muted)}



/* Native <select> dropdown - force a dark, readable option list. :root sets
   color-scheme:dark, but some browsers (and OS-themed native popups) still
   paint the option list white while inheriting the page's muted grey text,
   giving grey-on-white that's nearly unreadable. Explicit option colors fix it
   on every <select> site-wide. */
select{color-scheme:dark}
select option,select optgroup{background-color:#181822;color:#EAEAF2}
/* Native single <select>: replace the cramped browser arrow with a custom
   chevron that has breathing room from the right border, and vertically
   centre the text. !important so it wins over per-select inline `background`
   (a shorthand that would otherwise wipe the chevron) and inline `padding`
   shorthands (e.g. the support "Assigned" dropdown). Multi-selects opt out. */
select:not([multiple]){
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23cbd5e1' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:right .7rem center !important;
  background-size:.7rem auto !important;
  padding-right:2rem !important;
  line-height:1.4;
}