/* THE NEW LOOK (2026-11-04, Jeff: "change the website and mobile to match the new look with UX/UI").
   Source of truth is the app's locked line-up (DESIGN.md, 2026-11-03/04): Green Chrome = Free · Gold Chrome = Gold · BURNT CHROME = Ultra.
   ROUND 2 (Jeff, 11-04): the SITE'S OWN look is Green Chrome (CTAs, logo, icon, accent #2DEC86); Gold and Burnt Chrome live where they mean a
   plan (pricing cards, the tier chapter, the buttons section). Burnt Chrome runs ONE WAY — polished chrome on the left, straw / gold / rose /
   violet through the middle, deep blue on the right, slanted like the H's legs; its accent is blurple #6B78FF. HYBRID, like the app: 3D metal
   everywhere, FLAT glass while routing (the Two-screens phone). Dark UI only. Buttons are the app's own rendered metal
   (assets/newlook/metal/*.webp, copied from the app) or, for secondary actions, the app's FLAT look: opaque #18191D glass, a top sheen,
   a hairline, accent-coloured label.
   Loads AFTER energy.css on / and /phone/. Purely a re-skin: remove the <link> and the site is what it was. Every selector starts with
   `html` so it outranks the page's own inline rules without !important. Art paths are absolute (the root page has <base href="spike/">). */


/* ───────────── 1 · tokens: the site's own look is GREEN CHROME ───────────── */
:root {
  --acc: #2DEC86; --acc-light: #8CFFC4; --acc-rgb: 45,236,134;       /* TIER_SKIN.brand.accent */
  --bc-accent: #6B78FF; --bc-light: #DDE1FF;                         /* Burnt Chrome's own accent (tier chapter, pricing, buttons section) */
  /* green chrome as TEXT (headline words): the emerald render's ramp — bright aqua at the left running to deep emerald — slanted */
  --gc-text: linear-gradient(105deg, #CFFFFB 0%, #7DFFE0 22%, #4FF8A0 48%, #2DEC86 72%, #1FB86E 100%);
    --bc-surface: linear-gradient(105deg, #EAEAEB 0%, #EAEAEB 30%, #E7DDC2 42%, #EFC569 49%, #DD6595 55%, #9E4BDF 62%, #595DF3 74%, #3055D4 100%);

  --ice: #2DEC86; --icergb: 45,236,134;
  --icefade: var(--gc-text);
  --ctabg: linear-gradient(105deg, #AAFEFF 0%, #58FEAA 40%, #2FA165 100%); --ctaink: #04140C;
  --macc: #2DEC86; --mrgb: 45,236,134; --mink: #04140C; --mrim: rgba(150,255,200,.55);
  --amb: #2DEC86;

  /* the app's flat glass */
  --flat-bg: #18191D; --flat-hair: rgba(255,255,255,.14);
  --flat-sheen: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,0) 52%);
  --press: cubic-bezier(.2,.9,.3,1.2);
}

/* ───────────── 2 · the primary button: every .cta is a Green Chrome pill (the app's rendered metal, 3-piece strip) ─────────────
   Caps are square at the button's HEIGHT (--h), like the app (metalGeometry.ts); a box narrower than two caps lets the left cap lie over the
   right one. A 1 px overlap hides the seam. */
html .cta {
  --h: 40px;
  --mt-l: url(/assets/newlook/metal/green-pill-l.webp); --mt-m: url(/assets/newlook/metal/green-pill-m.webp); --mt-r: url(/assets/newlook/metal/green-pill-r.webp);
  height: var(--h); padding: 0 calc(var(--h) * .62);
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
  border: 0; border-radius: 999px; color: var(--ctaink); font-weight: 700; letter-spacing: -.005em; text-shadow: 0 1px 0 rgba(255,255,255,.22);
  background-color: transparent; box-shadow: 0 10px 28px -8px rgba(var(--acc-rgb),.5), 0 2px 6px rgba(0,0,0,.4);
  background-image: var(--mt-l), var(--mt-r), var(--mt-m); background-repeat: no-repeat;
  background-size: var(--h) 100%, var(--h) 100%, max(0px, calc(100% - 2 * var(--h) + 2px)) 100%;
  background-position: left center, right center, calc(var(--h) - 1px) center;
  transition: transform .14s var(--press), filter .14s ease-out, box-shadow .2s ease-out;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
html .cta.big { --h: 52px; font-size: 17px; }
html .cta.prGet { --h: 46px; display: flex; width: 100%; }
@media (hover: hover) {
  html .cta:hover { filter: brightness(1.07) saturate(1.06); transform: translateY(-1px); box-shadow: 0 14px 34px -8px rgba(var(--acc-rgb),.6), 0 2px 6px rgba(0,0,0,.4); }
}
html .cta:active { transform: scale(.965); filter: brightness(.93); transition-duration: .06s; box-shadow: 0 4px 14px -6px rgba(var(--acc-rgb),.5); }
html .cta:focus-visible, html .pv-hint:focus-visible, html .try:focus-visible, html .metal:focus-visible, html .tod:focus-visible, html .pv-menu:focus-visible,
html header nav a:focus-visible, html .pw-seg input:focus-visible + label, html .prLinks a:focus-visible, html .nb-ctl button:focus-visible { outline: 2px solid var(--acc-light); outline-offset: 3px; }
html header .cta { --h: 38px; font-size: 14px; }
@media (max-width: 760px) {
  html header .cta { --h: 36px; font-size: 14px; }
  html .cta.big { --h: 44px; font-size: 15px; padding: 0 calc(var(--h) * .55); }
  html .pv-hint { height: 44px; padding: 0 13px; font-size: 13px; gap: 6px; }
  html .pv-heroact { gap: 8px; }
  html header { gap: 10px; }
  html header .pv-logo img, html header img { height: 24px; }
}

/* the plan's own button wears its plan's metal (the line-up, not the site): Free = Green Chrome, Gold = Gold Chrome, Ultra = Burnt Chrome.
   Burnt's one-way burn eats a centred label, so its label sits on the polished side. */
html .prCard.m-gold .cta.prGet { --mt-l: url(/assets/newlook/metal/gold-b-pill-l.webp); --mt-m: url(/assets/newlook/metal/gold-b-pill-m.webp); --mt-r: url(/assets/newlook/metal/gold-b-pill-r.webp);
  color: #1d1400; box-shadow: 0 10px 28px -8px rgba(224,169,62,.5), 0 2px 6px rgba(0,0,0,.4); }
html .prCard.m-burnt .cta.prGet { --mt-l: url(/assets/newlook/metal/titanium-g-pill-l.webp); --mt-m: url(/assets/newlook/metal/titanium-g-pill-m.webp); --mt-r: url(/assets/newlook/metal/titanium-g-pill-r.webp);
  color: #050506; justify-content: flex-start; padding: 0 calc(var(--h) * 1.1) 0 calc(var(--h) * .6); box-shadow: 0 10px 28px -8px rgba(107,120,255,.5), 0 2px 6px rgba(0,0,0,.4); }

/* ───────────── 3 · the flat look (small utility buttons): opaque glass, sheen, hairline, accent-coloured label ───────────── */
html .pv-hint, html .pv-menu, html .try, html .tod, html .pw-seg label {
  background: var(--flat-sheen), var(--flat-bg); box-shadow: inset 0 0 0 1px var(--flat-hair), 0 1px 0 rgba(255,255,255,.04);
}
html .pv-hint { color: var(--acc); font-weight: 650; transition: transform .14s var(--press), filter .14s, box-shadow .2s; }
html .pv-hint .eq i { background: var(--acc); }
@media (hover: hover) { html .pv-hint:hover, html .try:hover { filter: brightness(1.18); } }
html .pv-hint:active, html .try:active, html .tod:active, html .pv-menu:active { transform: scale(.97); filter: brightness(.9); }
html .pv-menu { backdrop-filter: none; }
html .pv-menu i { background: var(--acc-light); }
html .try { color: var(--fg); }
html .try i { background: var(--gc-text); color: #04140C; }
html .try.on, html .tod.on { background: var(--flat-sheen), var(--flat-bg); box-shadow: inset 0 0 0 1.5px var(--acc); }
html .tod.on { color: var(--acc); }
html .tod { -webkit-backdrop-filter: none; backdrop-filter: none; }
html .pw-seg input:checked + label { box-shadow: inset 0 0 0 1.5px var(--acc); color: var(--acc-light); }
html .pv-hint::before { background: var(--acc); box-shadow: 0 0 10px rgba(var(--acc-rgb),.7); }

/* ───────────── 4 · header, logo: the green chrome shiny wordmark ───────────── */
html .pv-logo img, html header img { height: 30px; width: auto; display: block; filter: drop-shadow(0 2px 10px rgba(var(--acc-rgb),.22)); }
html header nav a { transition: color .15s; } html header nav a:hover { color: var(--acc-light); }
html .pv-menu-l a:active { background: rgba(255,255,255,.08); }

/* ───────────── 5 · the tier chapter's chips: the app's rendered round metal ───────────── */
html .metal i { box-shadow: 0 8px 22px rgba(0,0,0,.5); background-size: 100% 100% !important; background-repeat: no-repeat; }
html .metal.on i { box-shadow: 0 0 0 3px var(--ink), 0 0 0 5px var(--acc-light), 0 10px 26px rgba(0,0,0,.5); }
html .metal[data-m="green"] i   { background: url(/assets/newlook/metal/green-round.webp) !important; }
html .metal[data-m="gold"] i    { background: url(/assets/newlook/metal/gold-b-round.webp) !important; }
html .metal[data-m="burnt"] i { background: url(/assets/newlook/metal/titanium-g-round.webp) !important; }
html .metal:active i { transform: scale(.92); }
html .metal small { font-size: 11px; color: rgba(244,247,250,.55); }

/* ───────────── 6 · pricing: each card keeps its own metal — Free green, Gold gold, Ultra Burnt Chrome ───────────── */
html .m-burnt { --m-light: #DDE1FF; --m-mid: #6B78FF; --m-deep: #3055D4; --m-rim: rgba(160,170,255,.6); --m-ink: #050506; --m-edge: rgba(107,120,255,.42); --m-glow: rgba(107,120,255,.42); }
html .prCard.m-burnt::before { background: var(--bc-surface); height: 3px; }
html .prCard.m-brand::before { background: linear-gradient(90deg, #0E9B58, #2DEC86, #8CFFC4); }
html .prPill { height: 28px; display: inline-flex; align-items: center; padding: 0 18px; border-radius: 999px; font-weight: 800; box-shadow: none; --h: 28px;
  background-color: transparent; color: #050506; text-shadow: 0 1px 0 rgba(255,255,255,.25);
  background-image: var(--mt-l), var(--mt-r), var(--mt-m); background-repeat: no-repeat;
  background-size: var(--h) 100%, var(--h) 100%, max(0px, calc(100% - 2 * var(--h) + 2px)) 100%;
  background-position: left center, right center, calc(var(--h) - 1px) center; }
html .m-brand .prPill { --mt-l: url(/assets/newlook/metal/green-pill-l.webp); --mt-m: url(/assets/newlook/metal/green-pill-m.webp); --mt-r: url(/assets/newlook/metal/green-pill-r.webp); color: #04140C; }
html .m-gold .prPill  { --mt-l: url(/assets/newlook/metal/gold-b-pill-l.webp); --mt-m: url(/assets/newlook/metal/gold-b-pill-m.webp); --mt-r: url(/assets/newlook/metal/gold-b-pill-r.webp); color: #1d1400; }
html .m-burnt .prPill { --mt-l: url(/assets/newlook/metal/titanium-g-pill-s-l.webp); --mt-m: url(/assets/newlook/metal/titanium-g-pill-s-m.webp); --mt-r: url(/assets/newlook/metal/titanium-g-pill-s-r.webp); padding: 0 calc(28px * 1.3) 0 calc(28px * .6); }
html .prFine b { color: var(--acc-light); }

/* ───────────── 7 · "Two screens": the phone while CarPlay navigates — the ROUTING screen, so HYBRID makes it FLAT ─────────────
   src/CarDriveList.tsx in the app's flat look (buttonLook.ts FlatDriveZone): opaque #18191D glass, a top sheen, a white .16 hairline, the turn
   arrow painted in the skin's accent (Green Chrome here), every action word in its own colour (metalArt ACTION_FLAT). */
html .cpd-sq, html .cpd-sq2 { background: var(--flat-sheen), var(--flat-bg); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
html .cpd-sq svg, html .cpd-sq2 svg { stroke: #2DEC86; }
html .cpd-am span, html .cpd-act span, html .cpd-act .m, html .cpd-act .a, html .cpd-act .r, html .cpd-act .e { background: var(--flat-sheen), var(--flat-bg); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); text-shadow: none; }
html .cpd-act span::after { display: none; }
html .cpd-am span { color: #FF375F; } html .cpd-am .ion { color: #FF375F; }
html .cpd-act .m { color: #2F8CFF; } html .cpd-act .a { color: #2DEC86; } html .cpd-act .r { color: #FF8A00; } html .cpd-act .e { color: #FF3B4E; }
html .cpd-logo img { width: 40px; height: auto; border-radius: 0; }

/* ───────────── 8 · leftovers that were Hairpin green stay green; the Scout label was purple ───────────── */
html .sayq small { color: var(--acc); }


/* ───────────── 9 · "Your buttons, your way": Look (Flat · 3D · Hybrid) × Metal (Green · Gold · Burnt Chrome) ─────────────
   A DOM replica of the app's buttons (src/buttonLook.ts, metalArt.ts, MapFabFace.tsx, CarDriveList.tsx). Two zones, as in the app:
   "On a route" (the drive screen: turn square + Show map / Add stop / Arrived / End) and "Everywhere else" (Start, the round map buttons, the
   Crew pill). Flat = both flat; 3D = both rendered metal; HYBRID = 3D everywhere, FLAT while routing. newlook.js sets data-look on each zone.
   Every skinned part draws two layers — flat glass (::before) and the rendered metal (::after) — and cross-fades. */
html .nb-ctl { display: flex; gap: 6px; padding: 4px; margin-top: 8px; border-radius: 999px; width: max-content; max-width: 100%;
  background: var(--flat-sheen), var(--flat-bg); box-shadow: inset 0 0 0 1px var(--flat-hair); }
html .nb-ctl button { min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; color: var(--dim); cursor: pointer;
  font: 650 15px/1 var(--sys); letter-spacing: -.005em; transition: background .2s, color .2s, transform .12s var(--press), box-shadow .2s; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
html .nb-ctl button[aria-checked="true"] { color: #fff; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1.5px var(--acc); }
@media (hover: hover) { html .nb-ctl button:hover { color: #fff; } }
html .nb-ctl button:active { transform: scale(.96); }
html .nb-k { display: block; margin: 16px 0 0; font: 700 11px/1 var(--sys); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
html .nb-ctl.nb-metals { background: none; box-shadow: none; padding: 0; gap: 14px; margin-top: 10px; }
html .nb-metals button { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 0 2px; min-height: 44px; border-radius: 12px; background: none !important; box-shadow: none !important; font-size: 12.5px; color: var(--dim); }
html .nb-metals button i { display: block; width: 46px; height: 46px; border-radius: 50%; background-size: 100% 100%; background-repeat: no-repeat; box-shadow: 0 8px 22px rgba(0,0,0,.5); transition: transform .25s var(--press), box-shadow .2s; }
html .nb-metals button[data-v="green"] i { background-image: url(/assets/newlook/metal/green-round.webp); }
html .nb-metals button[data-v="gold"] i  { background-image: url(/assets/newlook/metal/gold-b-round.webp); }
html .nb-metals button[data-v="burnt"] i { background-image: url(/assets/newlook/metal/titanium-g-round.webp); }
html .nb-metals button[aria-checked="true"] { color: #fff; }
html .nb-metals button[aria-checked="true"] i { box-shadow: 0 0 0 3px var(--ink), 0 0 0 5px var(--acc-light), 0 10px 26px rgba(0,0,0,.5); }
html .nb-metals button:active i { transform: scale(.92); }
html .nb-note { margin-top: 14px; min-height: 2.9em; max-width: 30em; font: 500 14px/1.45 var(--sys); color: var(--dim); }
html .nb-note b { color: var(--fg); font-weight: 650; }

html .nb-media { width: 100%; display: grid; place-items: center; }
html .nbx { width: min(100%, 520px); padding: 18px; border-radius: 26px; display: grid; gap: 20px; color: #fff; font-family: var(--sys); text-align: left;
  background: #0b0c0f; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 30px 70px -30px rgba(0,0,0,.8); }
html .nbx[data-metal="green"] { --macc: #2DEC86; --mrgb: 45,236,134; --ink: #04140C; --turn: linear-gradient(180deg,#8CFFC4 0%,#2DEC86 45%,#0E9B58 100%); --turnrim: rgba(150,255,200,.55);
  --arrowbg: #2DEC86; --arrow3d: #04150B; --hair: rgba(45,236,134,.5);
  --pl: url(/assets/newlook/metal/green-pill-l.webp); --pm: url(/assets/newlook/metal/green-pill-m.webp); --pr: url(/assets/newlook/metal/green-pill-r.webp); --round: url(/assets/newlook/metal/green-round.webp);
  --g-haz: url(/assets/newlook/glyph/hazard-green.png); --g-2d: url(/assets/newlook/glyph/view2d-green.png); }
html .nbx[data-metal="gold"] { --macc: #E0A93E; --mrgb: 224,169,62; --ink: #3A2A05; --turn: linear-gradient(180deg,#F6D77A 0%,#E0A93E 45%,#B97F1F 100%); --turnrim: rgba(255,231,163,.62);
  --arrowbg: #E0A93E; --arrow3d: #3A2A05; --hair: rgba(224,169,62,.5);
  --pl: url(/assets/newlook/metal/gold-b-pill-l.webp); --pm: url(/assets/newlook/metal/gold-b-pill-m.webp); --pr: url(/assets/newlook/metal/gold-b-pill-r.webp); --round: url(/assets/newlook/metal/gold-b-round.webp);
  --g-haz: url(/assets/newlook/glyph/hazard-gold.png); --g-2d: url(/assets/newlook/glyph/view2d-gold.png); }
html .nbx[data-metal="burnt"] { --macc: #6B78FF; --mrgb: 107,120,255; --ink: #050506; --turn: url(/assets/newlook/metal/titanium-g-turn.webp) center / 100% 100% no-repeat; --turnrim: transparent;
  --arrowbg: linear-gradient(66deg, #EAEAEB 14%, #EAEAEB 28%, #E7DDC2 40%, #EFC569 48%, #DD6595 55%, #9E4BDF 62%, #595DF3 74%, #3055D4 92%); --arrow3d: #050506; --hair: rgba(107,120,255,.5);
  --pl: url(/assets/newlook/metal/titanium-g-pill-l.webp); --pm: url(/assets/newlook/metal/titanium-g-pill-m.webp); --pr: url(/assets/newlook/metal/titanium-g-pill-r.webp); --round: url(/assets/newlook/metal/titanium-g-round.webp);
  --g-haz: url(/assets/newlook/glyph/hazard-burnt.png); --g-2d: url(/assets/newlook/glyph/view2d-burnt.png); }

html .nb-grp { display: grid; gap: 12px; }
html .nb-lbl { display: flex; align-items: center; gap: 10px; font: 700 11px/1 var(--sys); letter-spacing: .14em; text-transform: uppercase; color: #9BA1A6; }
html .nb-lbl em { font-style: normal; letter-spacing: .08em; padding: 4px 8px 3px; border-radius: 999px; color: #fff; background: rgba(255,255,255,.1); transition: background .2s; }

/* a skinned part: flat glass under, rendered metal over, cross-fading */
html .nb-fx { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; }
html .nb-fx::before, html .nb-fx::after { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none; transition: opacity .26s var(--press); }
html .nb-fx::before { background: var(--flat-sheen), var(--flat-bg); box-shadow: inset 0 0 0 1px var(--fxhair, rgba(255,255,255,.16)); opacity: 1; }
html .nb-fx::after { opacity: 0; background-repeat: no-repeat; }
html [data-look="3d"] .nb-fx::before { opacity: 0; } html [data-look="3d"] .nb-fx::after { opacity: 1; }
html .nb-t { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; color: var(--flatc, var(--macc)); transition: color .26s; white-space: nowrap; }
html [data-look="3d"] .nb-t { color: var(--inkc, var(--ink)); }

/* the three-piece strip for pills, bars */
html .nb-strip::after { background-image: var(--sl), var(--sr), var(--sm);
  background-size: var(--h) 100%, var(--h) 100%, max(0px, calc(100% - 2 * var(--h) + 2px)) 100%; background-position: left center, right center, calc(var(--h) - 1px) center; }
html .nb-banner { display: flex; align-items: center; gap: 14px; padding: 12px 14px 12px 12px; border-radius: 12px; border-left: 4px solid var(--macc);
  background: linear-gradient(90deg, rgba(var(--mrgb),.22), rgba(var(--mrgb),.03)); transition: border-color .26s, background .26s; }
html .nb-sq { width: 52px; height: 52px; border-radius: 13px; flex: none; --fxhair: rgba(255,255,255,.16); }
html [data-look="3d"] .nb-sq::after { background: var(--turn); box-shadow: inset 0 0 0 1px var(--turnrim); border-radius: inherit; }
html .nb-arr { position: relative; z-index: 1; width: 34px; height: 34px; }
html .nb-arr i { position: absolute; inset: 0; transition: opacity .26s; -webkit-mask: url(/assets/newlook/arrow-turn-right.svg) center / contain no-repeat; mask: url(/assets/newlook/arrow-turn-right.svg) center / contain no-repeat; }
html .nb-arr .af { background: var(--arrowbg); opacity: 1; } html .nb-arr .a3 { background: var(--arrow3d); opacity: 0; }
html [data-look="3d"] .nb-arr .af { opacity: 0; } html [data-look="3d"] .nb-arr .a3 { opacity: 1; }
html .nb-bt { min-width: 0; } html .nb-bt b { display: block; font: 800 28px/1.05 var(--disp); letter-spacing: -.02em; color: var(--macc); transition: color .26s; }
html .nb-bt span { display: block; margin-top: 3px; font: 700 15px/1.25 var(--sys); color: #fff; }
html .nb-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
html .nb-btn { --h: 46px; height: var(--h); border-radius: 14px; font: 800 13.5px/1 var(--sys); padding: 0 4px; }
html .nb-b-blue   { --flatc: #2F8CFF; --inkc: #04101f; --sl: url(/assets/newlook/metal/act-blue-bar-l.webp);   --sm: url(/assets/newlook/metal/act-blue-bar-m.webp);   --sr: url(/assets/newlook/metal/act-blue-bar-r.webp); }
html .nb-b-green  { --flatc: #2DEC86; --inkc: #04140C; --sl: url(/assets/newlook/metal/green-bar-l.webp);      --sm: url(/assets/newlook/metal/green-bar-m.webp);      --sr: url(/assets/newlook/metal/green-bar-r.webp); }
html .nb-b-orange { --flatc: #FF8A00; --inkc: #2A1200; --sl: url(/assets/newlook/metal/act-orange-bar-l.webp); --sm: url(/assets/newlook/metal/act-orange-bar-m.webp); --sr: url(/assets/newlook/metal/act-orange-bar-r.webp); }
html .nb-b-red    { --flatc: #FF3B4E; --inkc: #1a0006;    --sl: url(/assets/newlook/metal/act-red-bar-l.webp);    --sm: url(/assets/newlook/metal/act-red-bar-m.webp);    --sr: url(/assets/newlook/metal/act-red-bar-r.webp); }
html .nb-pill { --h: 50px; height: var(--h); border-radius: 999px; font: 800 17px/1 var(--sys); --sl: var(--pl); --sm: var(--pm); --sr: var(--pr); --fxhair: var(--hair); }
html .nb-pill .nb-t svg { width: 18px; height: 18px; fill: currentColor; }
html .nb-line { display: flex; align-items: center; gap: 12px; }
html .nb-fab { width: 64px; height: 64px; border-radius: 50%; flex: none; flex-direction: column; gap: 3px; --fxhair: rgba(255,255,255,.14); }
html .nb-fab::after { background: var(--round) center / 100% 100% no-repeat; }
html .nb-gl { position: relative; z-index: 1; display: block; width: 26px; height: 26px; }
html .nb-gl b { position: absolute; inset: 0; transition: opacity .26s; background-repeat: no-repeat; background-position: center; background-size: contain; }
html .nb-gl b.f { opacity: 1; } html .nb-gl b.m { opacity: 0; background: var(--ink); }
html [data-look="3d"] .nb-gl b.f { opacity: 0; } html [data-look="3d"] .nb-gl b.m { opacity: 1; }
html .nb-g-haz b.f { background-image: var(--g-haz); } html .nb-g-2d b.f { background-image: var(--g-2d); }
html .nb-g-haz b.m { -webkit-mask: var(--g-haz) center / contain no-repeat; mask: var(--g-haz) center / contain no-repeat; }
html .nb-g-2d b.m  { -webkit-mask: var(--g-2d) center / contain no-repeat;  mask: var(--g-2d) center / contain no-repeat; }
html .nb-fab .nb-t { font: 700 9px/1 var(--sys); letter-spacing: 0; color: #fff; }
html .nb-fab.nb-solo .nb-gl { width: 34px; height: 34px; }
html [data-look="3d"] .nb-fab .nb-t { color: var(--lbl, var(--ink)); }
html .nbx[data-metal="gold"] { --lbl: #1a1200; }
html .nb-crew { --h: 38px; height: var(--h); margin-left: auto; padding: 0 22px; border-radius: 8px; font: 700 14px/1 var(--sys); --fxhair: rgba(45,236,134,.6);
  --sl: url(/assets/newlook/metal/green-bar-l.webp); --sm: url(/assets/newlook/metal/green-bar-m.webp); --sr: url(/assets/newlook/metal/green-bar-r.webp); }
html .nb-crew::before { background: linear-gradient(rgba(45,236,134,.34), rgba(45,236,134,.34)), var(--flat-bg); }
html .nb-crew .nb-t { color: #E9FFF3; } html [data-look="3d"] .nb-crew .nb-t { color: #04140C; }
html .nb-pop .nb-fx { animation: nbPop .4s var(--press); }
@keyframes nbPop { 0% { transform: scale(.965); } 55% { transform: scale(1.018); } 100% { transform: scale(1); } }
@media (max-width: 420px) {
  html .nbx { padding: 14px; gap: 16px; border-radius: 22px; }
  html .nb-btn { font-size: 11.5px; --h: 44px; height: 44px; border-radius: 12px; }
  html .nb-row { gap: 6px; }
  html .nb-bt b { font-size: 24px; } html .nb-bt span { font-size: 13.5px; }
  html .nb-crew { padding: 0 16px; }
  html .nb-ctl button { padding: 0 15px; }
  html .nb-metals button { font-size: 11.5px; }
  html .nb-ctl.nb-metals { gap: 8px; }
}
@media (max-width: 340px) { html .nb-ctl button { padding: 0 11px; font-size: 14px; } html .nb-fab { width: 56px; height: 56px; } }

/* ───────────── 10 · motion and preferences ───────────── */
@media (prefers-reduced-motion: reduce) {
  html .cta, html .pv-hint, html .try, html .tod, html .metal i, html .nb-ctl button, html .nb-metals button i { transition: none !important; }
  html .cta:hover { transform: none; }
  html .nb-fx::before, html .nb-fx::after, html .nb-gl b, html .nb-arr i, html .nb-t { transition-duration: .01ms !important; }
  html .nb-pop .nb-fx { animation: none; }
}
@media (prefers-reduced-transparency: reduce) { html .pv-menu-l { background: #0e1014; -webkit-backdrop-filter: none; backdrop-filter: none; } }
@media (prefers-contrast: more) { html .pv-hint, html .try, html .tod { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.5); } html .nb-ctl button[aria-checked="true"] { background: #fff; color: #000; } }
@media (max-width: 760px) { html .nb-media { margin-top: 16px; } html .nb-k { margin-top: 14px; } }