/* ══ Loading video — the login→home auth transition ONLY (the boot splash
   is a start animation, not a "loading" state — keeps its own image).
   Auto-discovered and warmed into Cache Storage by app/js/part051.js
   (it scans every <video src>), so sw.js serves it instantly from cache
   on return visits; first-ever load just streams it normally. ══ */
/* #authLoader is pointer-events:none while hidden, but app.css sets a global
   `img,video{pointer-events:auto}` which overrides that inheritance — so the
   loader's videos stayed tappable and silently swallowed taps across the
   middle of the screen at z-index 9999 (Quick Access needing several taps
   to open was this). Force the whole subtree inert unless it's visible. */
#authLoader:not(.visible),
#authLoader:not(.visible) * { pointer-events: none !important; }

.auth-loader-text-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.auth-loader-please { font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 700; color: #fff; letter-spacing: 0.3px; }
.auth-loader-sub {
  font-family: 'DM Sans', sans-serif; font-size: 11.5px; font-weight: 300; letter-spacing: 0.4px;
  color: var(--text-secondary); transition: opacity 0.25s ease;
}
/* Exact same footprint as the app's standard .nmh-video-banner: that banner
   is width:100% inside .nmh-wrap's fixed 20px/side padding, so it renders
   at (viewport - 40px) wide with a 1080:411 aspect ratio. #authLoader has
   no side padding of its own, so replicate the same 40px inset directly
   here — this is a real pixel match, not just the same aspect-ratio. */
.auth-loader-vid-wrap { position: relative; width: calc(100% - 40px); aspect-ratio: 1080 / 411; border-radius: 28px !important; overflow: hidden; }
.auth-loader-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 0.6s ease;
}
.auth-loader-video.active { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════
   NowssB Normal-Home (Neumorphism) skin
   Light = day mode (cream #f0f2f7) · Dark = night (#0c0c20 navy)
   Dark variants scoped under #home-nm.nm-dark
═══════════════════════════════════════════════════════════════ */

/* ── Header button group (settings + day/night) ── */
.nmh-btn-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Settings gear button — same neumorphism as the mode button */
.nmh-settings-btn {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  border-radius: 50%;
  border: none;
  background: #f0f2f7;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  box-shadow: 5px 5px 12px rgba(0,0,0,0.2), -4px -4px 10px rgba(255,255,255,1);
  transition: box-shadow .15s, transform .1s;
}
.nmh-settings-btn:active {
  box-shadow: inset 3px 3px 7px rgba(0,0,0,0.2), inset -2px -2px 6px rgba(255,255,255,1);
  transform: scale(.95);
}
.nmh-settings-btn svg path,
.nmh-settings-btn svg circle { stroke: #1a1a2e; }

#home-nm.nm-dark .nmh-settings-btn {
  background: #16163c;
  box-shadow: 5px 5px 13px rgba(0,0,0,0.85), -3px -3px 10px rgba(50,50,110,0.3);
}
#home-nm.nm-dark .nmh-settings-btn:active {
  box-shadow: inset 3px 3px 8px rgba(0,0,0,0.85), inset -2px -2px 6px rgba(50,50,110,0.3);
}
#home-nm.nm-dark .nmh-settings-btn svg path,
#home-nm.nm-dark .nmh-settings-btn svg circle { stroke: rgba(232,213,163,0.9); }

/* ── Storefront section heading ── */
.nmh-store-section { margin-top: 4px; }

.nmh-store-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 2px 12px;
}
.nmh-store-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: #1a1a2e;
  letter-spacing: .2px;
}
.nmh-store-title .accent { color: #c8a96e; }
.nmh-store-link {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(0,0,0,0.32);
  cursor: pointer;
}
#home-nm.nm-dark .nmh-store-title { color: #fff; }
#home-nm.nm-dark .nmh-store-title .accent { color: #e8d5a3; }
#home-nm.nm-dark .nmh-store-link { color: rgba(232,213,163,0.55); }

/* ── Horizontal scroll rows ── */
.nmh-hscroll {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 4px 2px 10px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.nmh-hscroll::-webkit-scrollbar { display: none; }

/* ── Trending card ── */
.nmh-trend-card {
  flex: 0 0 188px;
  scroll-snap-align: start;
  border-radius: 22px;
  background: #f0f2f7;
  box-shadow: 7px 7px 18px rgba(0,0,0,0.14), -5px -5px 14px rgba(255,255,255,0.97);
  padding: 18px 18px 16px;
  cursor: pointer;
  position: relative;
  box-sizing: border-box;
  transition: transform .1s, box-shadow .15s;
}
.nmh-trend-card:active {
  transform: scale(.985);
  box-shadow: inset 5px 5px 12px rgba(0,0,0,0.13), inset -4px -4px 10px rgba(255,255,255,0.95);
}
.nmh-trend-badge {
  display: inline-block;
  font-family: 'DM Sans', sans-serif;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #c8a96e;
  background: rgba(200,169,110,0.12);
  padding: 4px 9px;
  border-radius: 20px;
  margin-bottom: 12px;
}
.nmh-trend-word {
  font-family: 'DM Sans', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: #1a1a2e;
  letter-spacing: .3px;
  line-height: 1.05;
}
.nmh-trend-organ {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #c8a96e;
  margin-top: 3px;
}
.nmh-trend-benefit {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: rgba(0,0,0,0.5);
  line-height: 1.4;
  margin-top: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nmh-trend-cta {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #1a1a2e;
  margin-top: 14px;
  letter-spacing: .2px;
}

#home-nm.nm-dark .nmh-trend-card {
  background: #16163c;
  box-shadow: 8px 8px 22px rgba(0,0,0,0.88), -4px -4px 14px rgba(50,50,110,0.32);
}
#home-nm.nm-dark .nmh-trend-card:active {
  box-shadow: inset 6px 6px 14px rgba(0,0,0,0.85), inset -3px -3px 10px rgba(50,50,110,0.3);
}
#home-nm.nm-dark .nmh-trend-badge { color: #e8d5a3; background: rgba(232,213,163,0.12); }
#home-nm.nm-dark .nmh-trend-word { color: #fff; }
#home-nm.nm-dark .nmh-trend-organ { color: #e8d5a3; }
#home-nm.nm-dark .nmh-trend-benefit { color: rgba(255,255,255,0.55); }
#home-nm.nm-dark .nmh-trend-cta { color: #e8d5a3; }

/* ── Offer card ── */
.nmh-offer-card {
  flex: 0 0 156px;
  scroll-snap-align: start;
  border-radius: 22px;
  background: #f0f2f7;
  box-shadow: 7px 7px 18px rgba(0,0,0,0.14), -5px -5px 14px rgba(255,255,255,0.97);
  padding: 16px 16px 14px;
  cursor: pointer;
  position: relative;
  box-sizing: border-box;
  transition: transform .1s, box-shadow .15s;
}
.nmh-offer-card:active {
  transform: scale(.985);
  box-shadow: inset 5px 5px 12px rgba(0,0,0,0.13), inset -4px -4px 10px rgba(255,255,255,0.95);
}
.nmh-offer-badge {
  position: absolute;
  top: 12px; right: 12px;
  font-family: 'DM Sans', sans-serif;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .3px;
  color: #fff;
  background: linear-gradient(135deg, #e0644b, #c8442e);
  padding: 4px 9px;
  border-radius: 20px;
}
.nmh-offer-word {
  font-family: 'DM Sans', sans-serif;
  font-size: 19px;
  font-weight: 800;
  color: #1a1a2e;
  letter-spacing: .3px;
  margin-top: 26px;
}
.nmh-offer-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 10px;
}
.nmh-offer-now {
  font-family: 'DM Sans', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: #c8a96e;
}
.nmh-offer-was {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: rgba(0,0,0,0.32);
  text-decoration: line-through;
}
.nmh-offer-cta {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #1a1a2e;
  margin-top: 14px;
}

#home-nm.nm-dark .nmh-offer-card {
  background: #16163c;
  box-shadow: 8px 8px 22px rgba(0,0,0,0.88), -4px -4px 14px rgba(50,50,110,0.32);
}
#home-nm.nm-dark .nmh-offer-card:active {
  box-shadow: inset 6px 6px 14px rgba(0,0,0,0.85), inset -3px -3px 10px rgba(50,50,110,0.3);
}
#home-nm.nm-dark .nmh-offer-word { color: #fff; }
#home-nm.nm-dark .nmh-offer-now  { color: #e8d5a3; }
#home-nm.nm-dark .nmh-offer-was  { color: rgba(255,255,255,0.32); }
#home-nm.nm-dark .nmh-offer-cta  { color: #e8d5a3; }

/* ═══════════════════════════════════════════════════════════════
   INNER PAGE 1 — SOUND LIBRARY  (#sub-sound-library)
   Neumorphism skin · light = day, dark = night (body.nm-night)
═══════════════════════════════════════════════════════════════ */

/* Hide the cinematic photo layers */
body.nm-mode #sub-sound-library .sl-bg,
body.nm-mode #sub-sound-library .sl-bg-overlay,
body.nm-mode #sub-sound-library .sl-banner-img,
body.nm-mode #sub-sound-library .sl-banner-fade { display: none !important; }

/* Screen surface */
body.nm-mode #sub-sound-library .sl-screen { background: #f0f2f7 !important; }
body.nm-night #sub-sound-library .sl-screen { background: #0c0c20 !important; }

/* Banner header → clean panel */
body.nm-mode #sub-sound-library .sl-banner { height: 150px !important; background: transparent !important; }
body.nm-mode #sub-sound-library .sl-back-btn svg path,
body.nm-mode #sub-sound-library .sl-back-btn svg line { stroke: #1a1a2e !important; }
body.nm-night #sub-sound-library .sl-back-btn svg path,
body.nm-night #sub-sound-library .sl-back-btn svg line { stroke: rgba(232,213,163,0.9) !important; }

body.nm-mode #sub-sound-library .sl-eyebrow { color: #c8a96e !important; }
body.nm-night #sub-sound-library .sl-eyebrow { color: #e8d5a3 !important; }
body.nm-mode #sub-sound-library .sl-banner-title { color: #1a1a2e !important; text-shadow: none !important; }
body.nm-night #sub-sound-library .sl-banner-title { color: #fff !important; }
body.nm-mode #sub-sound-library .sl-stat { color: rgba(0,0,0,0.45) !important; }
body.nm-mode #sub-sound-library .sl-stat strong { color: #1a1a2e !important; }
body.nm-mode #sub-sound-library .sl-stat-sep { color: rgba(0,0,0,0.2) !important; }
body.nm-night #sub-sound-library .sl-stat { color: rgba(255,255,255,0.5) !important; }
body.nm-night #sub-sound-library .sl-stat strong { color: rgba(255,255,255,0.85) !important; }
body.nm-night #sub-sound-library .sl-stat-sep { color: rgba(255,255,255,0.2) !important; }

/* Tab bar */
body.nm-mode #sub-sound-library .sl-tabs {
  background: #f0f2f7 !important;
  border-bottom: none !important;
  box-shadow: 0 6px 14px rgba(0,0,0,0.08) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
body.nm-night #sub-sound-library .sl-tabs {
  background: #0c0c20 !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.6) !important;
}
body.nm-mode #sub-sound-library .sl-tab { color: rgba(0,0,0,0.35) !important; }
body.nm-mode #sub-sound-library .sl-tab.active { color: #c8a96e !important; border-bottom-color: #c8a96e !important; }
body.nm-night #sub-sound-library .sl-tab { color: rgba(255,255,255,0.32) !important; }
body.nm-night #sub-sound-library .sl-tab.active { color: #e8d5a3 !important; border-bottom-color: #e8d5a3 !important; }
body.nm-mode #sub-sound-library .sl-tab-badge { background: rgba(0,0,0,0.06) !important; color: rgba(0,0,0,0.4) !important; border-radius: 20px !important; }
body.nm-mode #sub-sound-library .sl-tab.active .sl-tab-badge { background: rgba(200,169,110,0.18) !important; color: #c8a96e !important; }
body.nm-night #sub-sound-library .sl-tab-badge { background: rgba(255,255,255,0.08) !important; color: rgba(255,255,255,0.4) !important; }
body.nm-night #sub-sound-library .sl-tab.active .sl-tab-badge { background: rgba(232,213,163,0.18) !important; color: #e8d5a3 !important; }

/* Content surface */
body.nm-mode #sub-sound-library .sl-content { background: transparent !important; }

/* Sort row + buttons */
body.nm-mode #sub-sound-library .sl-sort-label { color: rgba(0,0,0,0.32) !important; }
body.nm-night #sub-sound-library .sl-sort-label { color: rgba(255,255,255,0.3) !important; }
body.nm-mode #sub-sound-library .sl-sort-btn {
  background: #f0f2f7 !important; border: none !important; color: rgba(0,0,0,0.4) !important;
  border-radius: 12px !important; box-shadow: 3px 3px 7px rgba(0,0,0,0.12),-2px -2px 6px rgba(255,255,255,0.95) !important;
}
body.nm-mode #sub-sound-library .sl-sort-btn.active { color: #c8a96e !important; box-shadow: inset 2px 2px 5px rgba(0,0,0,0.12),inset -2px -2px 5px rgba(255,255,255,0.95) !important; }
body.nm-night #sub-sound-library .sl-sort-btn {
  background: #16163c !important; border: none !important; color: rgba(255,255,255,0.4) !important;
  border-radius: 12px !important; box-shadow: 3px 3px 8px rgba(0,0,0,0.85),-2px -2px 6px rgba(50,50,110,0.3) !important;
}
body.nm-night #sub-sound-library .sl-sort-btn.active { color: #e8d5a3 !important; box-shadow: inset 2px 2px 6px rgba(0,0,0,0.85),inset -2px -2px 5px rgba(50,50,110,0.3) !important; }

/* Sentence cards → neumorphic raised */
body.nm-mode #sub-sound-library .sl-sentence-card {
  background: #f0f2f7 !important; border: none !important; border-radius: 20px !important;
  box-shadow: 7px 7px 18px rgba(0,0,0,0.13),-5px -5px 14px rgba(255,255,255,0.97) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
body.nm-mode #sub-sound-library .sl-sentence-card::before { display: none !important; }
body.nm-night #sub-sound-library .sl-sentence-card {
  background: #16163c !important; border: none !important; border-radius: 20px !important;
  box-shadow: 8px 8px 22px rgba(0,0,0,0.88),-4px -4px 14px rgba(50,50,110,0.32) !important;
}
body.nm-mode #sub-sound-library .sl-sentence-eyebrow { color: #c8a96e !important; }
body.nm-night #sub-sound-library .sl-sentence-eyebrow { color: #e8d5a3 !important; }
body.nm-mode #sub-sound-library .sl-sentence-date { color: rgba(0,0,0,0.3) !important; }
body.nm-mode #sub-sound-library .sl-sentence-text { color: rgba(0,0,0,0.78) !important; }
body.nm-mode #sub-sound-library .sl-sentence-text .sl-word-hl { color: #c8a96e !important; border-bottom-color: rgba(200,169,110,0.35) !important; }
body.nm-night #sub-sound-library .sl-sentence-text { color: rgba(255,255,255,0.86) !important; }
body.nm-mode #sub-sound-library .sl-sentence-chip { color: #a8854a !important; border-color: rgba(200,169,110,0.3) !important; background: rgba(200,169,110,0.07) !important; border-radius: 12px !important; }
body.nm-night #sub-sound-library .sl-sentence-chip { border-radius: 12px !important; }
body.nm-mode #sub-sound-library .sl-sentence-footer { border-top-color: rgba(0,0,0,0.08) !important; }
body.nm-mode #sub-sound-library .sl-sentence-meta { color: rgba(0,0,0,0.3) !important; }
body.nm-mode #sub-sound-library .sl-sentence-play-btn {
  background: #f0f2f7 !important; border: none !important; border-radius: 12px !important;
  box-shadow: 3px 3px 8px rgba(0,0,0,0.13),-2px -2px 6px rgba(255,255,255,0.95) !important;
}
body.nm-night #sub-sound-library .sl-sentence-play-btn { border-radius: 12px !important; }
body.nm-mode #sub-sound-library .sl-sentence-play-btn svg path,
body.nm-mode #sub-sound-library .sl-sentence-play-btn svg polygon { stroke: #c8a96e !important; fill: #c8a96e !important; }
body.nm-mode #sub-sound-library .sl-sentence-delete-btn {
  background: #f0f2f7 !important; border: none !important; border-radius: 12px !important;
  box-shadow: 3px 3px 8px rgba(0,0,0,0.13),-2px -2px 6px rgba(255,255,255,0.95) !important;
}
body.nm-night #sub-sound-library .sl-sentence-delete-btn { border-radius: 12px !important; }

/* Word cards */
body.nm-mode #sub-sound-library .sl-word-card { border-bottom-color: rgba(0,0,0,0.07) !important; }
body.nm-mode #sub-sound-library .sl-word-card:active { background: rgba(0,0,0,0.03) !important; }
body.nm-mode #sub-sound-library .sl-word-disc {
  background: #f0f2f7 !important; border: none !important; border-radius: 14px !important;
  box-shadow: inset 2px 2px 6px rgba(0,0,0,0.13),inset -2px -2px 5px rgba(255,255,255,0.95) !important;
}
body.nm-night #sub-sound-library .sl-word-disc { background: #16163c !important; border: none !important; border-radius: 14px !important; box-shadow: inset 2px 2px 6px rgba(0,0,0,0.85),inset -2px -2px 5px rgba(50,50,110,0.3) !important; }
body.nm-mode #sub-sound-library .sl-word-disc::after { display: none !important; }
body.nm-mode #sub-sound-library .sl-word-disc-letter { color: rgba(0,0,0,0.4) !important; }
body.nm-mode #sub-sound-library .sl-word-name { color: #1a1a2e !important; }
body.nm-mode #sub-sound-library .sl-word-phonetic { color: rgba(0,0,0,0.35) !important; }
body.nm-night #sub-sound-library .sl-word-name { color: #fff !important; }
body.nm-night #sub-sound-library .sl-word-phonetic { color: rgba(255,255,255,0.35) !important; }
body.nm-mode #sub-sound-library .sl-word-organ { color: rgba(0,0,0,0.25) !important; }
body.nm-mode #sub-sound-library .sl-badge-sub { color: #5a8fa8 !important; border-color: rgba(90,143,168,0.3) !important; background: rgba(90,143,168,0.07) !important; border-radius: 10px !important; }
body.nm-mode #sub-sound-library .sl-badge-buy { color: #a8854a !important; border-color: rgba(200,169,110,0.3) !important; background: rgba(200,169,110,0.07) !important; border-radius: 10px !important; }
body.nm-night #sub-sound-library .sl-word-badge { border-radius: 10px !important; }
body.nm-mode #sub-sound-library .sl-purchased-date { color: rgba(200,169,110,0.55) !important; }

/* Filter chips */
body.nm-mode #sub-sound-library .sl-filter-chip {
  background: #f0f2f7 !important; border: none !important; color: rgba(0,0,0,0.4) !important; border-radius: 20px !important;
  box-shadow: 3px 3px 7px rgba(0,0,0,0.11),-2px -2px 6px rgba(255,255,255,0.95) !important;
}
body.nm-mode #sub-sound-library .sl-filter-chip.active { color: #c8a96e !important; box-shadow: inset 2px 2px 5px rgba(0,0,0,0.12),inset -2px -2px 5px rgba(255,255,255,0.95) !important; }
body.nm-night #sub-sound-library .sl-filter-chip {
  background: #16163c !important; border: none !important; color: rgba(255,255,255,0.4) !important; border-radius: 20px !important;
  box-shadow: 3px 3px 8px rgba(0,0,0,0.85),-2px -2px 6px rgba(50,50,110,0.3) !important;
}
body.nm-night #sub-sound-library .sl-filter-chip.active { color: #e8d5a3 !important; box-shadow: inset 2px 2px 6px rgba(0,0,0,0.85),inset -2px -2px 5px rgba(50,50,110,0.3) !important; }
body.nm-mode #sub-sound-library .sl-word-count-label { color: rgba(0,0,0,0.3) !important; }
body.nm-mode #sub-sound-library .sl-word-count-label span { color: rgba(0,0,0,0.55) !important; }

/* Empty state */
body.nm-mode #sub-sound-library .sl-empty-title { color: rgba(0,0,0,0.45) !important; }
body.nm-mode #sub-sound-library .sl-empty-text { color: rgba(0,0,0,0.3) !important; }
body.nm-mode #sub-sound-library .sl-empty-cta {
  background: #f0f2f7 !important; border: none !important; color: #c8a96e !important; border-radius: 14px !important;
  box-shadow: 4px 4px 10px rgba(0,0,0,0.13),-3px -3px 8px rgba(255,255,255,0.95) !important;
}
body.nm-night #sub-sound-library .sl-empty-cta { background: #16163c !important; border: none !important; color: #e8d5a3 !important; border-radius: 14px !important; box-shadow: 4px 4px 12px rgba(0,0,0,0.85),-3px -3px 8px rgba(50,50,110,0.3) !important; }

/* Upgrade banner */
body.nm-mode #sub-sound-library .sl-upgrade-banner {
  background: #f0f2f7 !important; border: none !important; border-radius: 20px !important;
  box-shadow: 7px 7px 18px rgba(0,0,0,0.13),-5px -5px 14px rgba(255,255,255,0.97) !important;
}
body.nm-mode #sub-sound-library .sl-upgrade-banner::before { display: none !important; }
body.nm-night #sub-sound-library .sl-upgrade-banner { background: #16163c !important; border: none !important; border-radius: 20px !important; box-shadow: 8px 8px 22px rgba(0,0,0,0.88),-4px -4px 14px rgba(50,50,110,0.32) !important; }
body.nm-mode #sub-sound-library .sl-upgrade-label { color: #c8a96e !important; }
body.nm-night #sub-sound-library .sl-upgrade-label { color: #e8d5a3 !important; }
body.nm-mode #sub-sound-library .sl-upgrade-title { color: #1a1a2e !important; }
body.nm-mode #sub-sound-library .sl-upgrade-text { color: rgba(0,0,0,0.5) !important; }
body.nm-mode #sub-sound-library .sl-upgrade-btn {
  background: #f0f2f7 !important; border: none !important; color: #c8a96e !important; border-radius: 14px !important;
  box-shadow: 4px 4px 10px rgba(0,0,0,0.13),-3px -3px 8px rgba(255,255,255,0.95) !important;
}
body.nm-night #sub-sound-library .sl-upgrade-btn { background: #16163c !important; border: none !important; color: #e8d5a3 !important; border-radius: 14px !important; box-shadow: 4px 4px 12px rgba(0,0,0,0.85),-3px -3px 8px rgba(50,50,110,0.3) !important; }

/* ═══════════════════════════════════════════════════════════════
   SETTINGS  (#sub-social) — full neumorphism redesign
   No images · clean sections · light=day, dark=night
═══════════════════════════════════════════════════════════════ */

/* Screen surface */
body.nm-mode #sub-social { background: #f0f2f7 !important; }
body.nm-night #sub-social { background: #0c0c20 !important; }
body.nm-mode #sub-social .ss-wrap,
body.nm-mode #sub-social .ss-tab-content { background: transparent !important; }

/* The Fashion settings page is the page — same rows, same icons, same order.
   The row icons used to be hidden here, which is most of why the two looked
   like different apps. They are shown, and set into the surface the way
   every other icon on a neumorphic screen is. */
body.nm-mode #sub-social .menu-banner { display: none !important; }
body.nm-mode #sub-social .ss-search-ico { display: none !important; }
body.nm-mode #sub-social .sr-icon {
  display: flex !important;
  background: #eef1f7 !important; border: none !important;
  box-shadow: inset 3px 3px 7px rgba(0,0,0,0.13), inset -2px -2px 6px rgba(255,255,255,1) !important;
}
body.nm-night #sub-social .sr-icon {
  background: #12122e !important; border: none !important;
  box-shadow: inset 3px 3px 8px rgba(0,0,0,0.85), inset -2px -2px 6px rgba(50,50,110,0.3) !important;
}
/* The rows keep the Fashion page's own side padding rather than being
   flattened to the screen edge. */
body[class] #sub-social #ss-main-view .sr {
  padding-left: 20px !important; padding-right: 20px !important;
}

/* Back button → neumorphic pill */
/* ── The header ──
   It carries its dark colour as an inline style on the element, so these
   need the weight to reach it. Same surface as the page, with a soft lip
   under it instead of a hairline. */
body.nm-mode #sub-social .sub-header.nav-bar {
  background: #eef1f7 !important;
  border-bottom: none !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.07) !important;
}
body.nm-night #sub-social .sub-header.nav-bar {
  background: #0c0c20 !important;
  border-bottom: none !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.6) !important;
}
/* Both words are inline-styled too — gold and white, written for a dark bar.
   They also carry a 12px black glow, which on a light surface is not a glow
   but a grey smudge behind the word. */
body.nm-mode #sub-social .sub-header .sub-title span { text-shadow: none !important; }
body.nm-mode #sub-social .sub-header .sub-title span:first-child { color: #9a7c3f !important; }
body.nm-mode #sub-social .sub-header .sub-title span:last-child  { color: #1a1a2e !important; }
body.nm-night #sub-social .sub-header .sub-title span:first-child { color: #e8d5a3 !important; }
body.nm-night #sub-social .sub-header .sub-title span:last-child  { color: #fff !important; }

/* ── The back button ──
   A raised circle with a plain arrow in it. app/app.css injects a glass
   sphere PNG into every back button in the app through a ::before — that
   is the sphere that was sitting in this header. Here the ::before becomes
   a mask instead of a picture, so the arrow is a flat shape that takes its
   colour from the theme rather than an image with its own lighting. */
body.nm-mode #sub-social .sub-back,
body.nm-night #sub-social .sub-back {
  width: 44px !important; height: 44px !important;
  border: none !important;
  border-radius: 50% !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
}
body.nm-mode #sub-social .sub-back {
  background: #eef1f7 !important; color: #1a1a2e !important;
  box-shadow: 5px 5px 12px rgba(0,0,0,0.14), -4px -4px 10px rgba(255,255,255,0.98) !important;
}
body.nm-night #sub-social .sub-back {
  background: #16163c !important; color: #e8d5a3 !important;
  box-shadow: 5px 5px 14px rgba(0,0,0,0.85), -4px -4px 10px rgba(50,50,110,0.32) !important;
}
body.nm-mode #sub-social .sub-back:active,
body.nm-night #sub-social .sub-back:active { transform: scale(.94); }
body.nm-mode #sub-social .sub-back:active {
  box-shadow: inset 4px 4px 9px rgba(0,0,0,0.13), inset -3px -3px 8px rgba(255,255,255,0.95) !important;
}
body.nm-night #sub-social .sub-back:active {
  box-shadow: inset 4px 4px 10px rgba(0,0,0,0.85), inset -3px -3px 8px rgba(50,50,110,0.3) !important;
}
body.nm-mode #sub-social .sub-back::before,
body.nm-night #sub-social .sub-back::before {
  content: '' !important;
  width: 20px !important; height: 20px !important;
  background-image: none !important;
  filter: none !important;
  background-color: currentColor !important;
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='M12 19l-7-7 7-7'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='M12 19l-7-7 7-7'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Tab bar (Settings / Discover) */
body.nm-mode #sub-social .ss-tabs {
  background: #f0f2f7 !important; border-bottom: none !important;
  box-shadow: 0 6px 14px rgba(0,0,0,0.07) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
body.nm-night #sub-social .ss-tabs { background: #0c0c20 !important; box-shadow: 0 6px 16px rgba(0,0,0,0.6) !important; }
body.nm-mode #sub-social .ss-tab { color: rgba(0,0,0,0.35) !important; }
body.nm-mode #sub-social .ss-tab.active { color: #c8a96e !important; border-bottom-color: #c8a96e !important; }
body.nm-night #sub-social .ss-tab { color: rgba(255,255,255,0.32) !important; }
body.nm-night #sub-social .ss-tab.active { color: #e8d5a3 !important; border-bottom-color: #e8d5a3 !important; }

/* Section labels */
body.nm-mode #sub-social .slbl { color: rgba(0,0,0,0.4) !important; }
body.nm-night #sub-social .slbl { color: rgba(255,255,255,0.32) !important; }

/* Section groups → neumorphic raised cards */
body.nm-mode #sub-social .sg {
  background: #f0f2f7 !important; border: none !important; border-radius: 20px !important;
  box-shadow: 7px 7px 18px rgba(0,0,0,0.12), -5px -5px 14px rgba(255,255,255,0.97) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  padding: 4px 18px !important;
}
body.nm-night #sub-social .sg {
  background: #16163c !important; border: none !important; border-radius: 20px !important;
  box-shadow: 8px 8px 22px rgba(0,0,0,0.88), -4px -4px 14px rgba(50,50,110,0.32) !important;
  padding: 4px 18px !important;
}

/* Profile card */
body.nm-mode #sub-social .ss-profile-card { padding: 16px 18px !important; }
body.nm-mode #sub-social #ss-prof-name { color: #1a1a2e !important; }
body.nm-mode #sub-social #ss-prof-email { color: rgba(0,0,0,0.45) !important; }
body.nm-night #sub-social #ss-prof-name { color: #fff !important; }
body.nm-night #sub-social #ss-prof-email { color: rgba(255,255,255,0.5) !important; }

/* Rows */
body.nm-mode #sub-social .sr { border-bottom-color: rgba(0,0,0,0.07) !important; padding-left: 0 !important; padding-right: 0 !important; }
body.nm-mode #sub-social .sr:active { background: rgba(0,0,0,0.03) !important; }
body.nm-night #sub-social .sr { border-bottom-color: rgba(255,255,255,0.07) !important; padding-left: 0 !important; padding-right: 0 !important; }
body.nm-mode #sub-social .sr-label { color: #1a1a2e !important; }
body.nm-mode #sub-social .sr-sub { color: rgba(0,0,0,0.45) !important; }
body.nm-mode #sub-social .sr-chev { color: rgba(0,0,0,0.25) !important; }
body.nm-night #sub-social .sr-label { color: #fff !important; }
body.nm-night #sub-social .sr-sub { color: rgba(255,255,255,0.45) !important; }
body.nm-night #sub-social .sr-chev { color: rgba(255,255,255,0.25) !important; }
body.nm-mode #sub-social .sr-label.danger,
body.nm-mode #sub-social .sr-label.red { color: #d04545 !important; }

/* Value pills (Voice / Speed / etc.) → neumorphic inset chips */
body.nm-mode #sub-social [id$="-pill"],
body.nm-mode #sub-social .sr-val {
  color: #a8854a !important;
  background: #f0f2f7 !important;
  border-radius: 12px !important;
  box-shadow: inset 2px 2px 5px rgba(0,0,0,0.12), inset -2px -2px 5px rgba(255,255,255,0.95) !important;
}
body.nm-night #sub-social [id$="-pill"],
body.nm-night #sub-social .sr-val {
  color: #e8d5a3 !important;
  background: #16163c !important;
  border-radius: 12px !important;
  box-shadow: inset 2px 2px 6px rgba(0,0,0,0.85), inset -2px -2px 5px rgba(50,50,110,0.3) !important;
}

/* Toggle track → neumorphic groove (knob colour still driven by JS) */
body.nm-mode #sub-social .stgl { box-shadow: inset 2px 2px 5px rgba(0,0,0,0.14), inset -2px -2px 5px rgba(255,255,255,0.92) !important; }
body.nm-night #sub-social .stgl { box-shadow: inset 2px 2px 6px rgba(0,0,0,0.85), inset -2px -2px 5px rgba(50,50,110,0.3) !important; }

/* Search field → neumorphic inset */
body.nm-mode #sub-social .ss-search {
  background: #f0f2f7 !important; border: none !important; color: #1a1a2e !important;
  border-radius: 14px !important; padding-left: 16px !important;
  box-shadow: inset 3px 3px 8px rgba(0,0,0,0.12), inset -2px -2px 6px rgba(255,255,255,0.95) !important;
  backdrop-filter: none !important;
}
body.nm-night #sub-social .ss-search {
  background: #16163c !important; border: none !important; color: #fff !important;
  border-radius: 14px !important; padding-left: 16px !important;
  box-shadow: inset 3px 3px 8px rgba(0,0,0,0.85), inset -2px -2px 6px rgba(50,50,110,0.3) !important;
}
body.nm-mode #sub-social .ss-search::placeholder { color: rgba(0,0,0,0.3) !important; }

/* ── Sliding panels → WHITE NEUMORPHISM ──
   Inline white text is recolored to dark and gold accents to deep-gold via
   [style*=] attribute selectors; dark-background buttons are re-whitened so
   they stay readable. */
body.nm-mode #sub-social .ss-panel { background: #f0f2f7 !important; }

/* Skip the subscription cinematic intro overlay */
body.nm-mode #sub-social #sub-intro-page { display: none !important; }

/* White inline text → dark */
body.nm-mode #sub-social .ss-panel [style*="#fff"],
body.nm-mode #sub-social .ss-panel [style*="255,255,255"],
body.nm-mode #sub-social .ss-panel [style*="255, 255, 255"] { color: #2a2533 !important; }

/* Gold / accent inline text → deep gold (keeps the accent on cream) */
body.nm-mode #sub-social .ss-panel [style*="e8d5a3"],
body.nm-mode #sub-social .ss-panel [style*="accent-gold"],
body.nm-mode #sub-social .ss-panel [style*="var(--accent"] { color: #a8854a !important; }

/* Re-whiten buttons that have a dark background (so their label stays visible) */
body.nm-mode #sub-social .ss-panel button[style*="rgba(0,0,0"],
body.nm-mode #sub-social .ss-panel button[style*="background:#060c18"],
body.nm-mode #sub-social .ss-panel button[style*="135deg,#e8d5a3"] { color: #060c18 !important; }

/* Panel headings / sub (class-based) */
body.nm-mode #sub-social .ss-panel-title { color: #1a1a2e !important; }
body.nm-mode #sub-social .ss-panel-sub { color: rgba(0,0,0,0.5) !important; }
body.nm-mode #sub-social .ss-panel-header { border-bottom-color: rgba(0,0,0,0.07) !important; }

/* Back button */
body.nm-mode #sub-social .ss-back, body.nm-mode #sub-social .ss-panel-back { color: #1a1a2e !important; }
body.nm-mode #sub-social .ss-back svg { stroke: #1a1a2e !important; }

/* Inputs / textareas → neumorphic inset */
body.nm-mode #sub-social .ss-panel input,
body.nm-mode #sub-social .ss-panel textarea,
body.nm-mode #sub-social .ss-input {
  background: #f0f2f7 !important; border: none !important; color: #1a1a2e !important; border-radius: 14px !important;
  box-shadow: inset 3px 3px 8px rgba(0,0,0,0.12), inset -2px -2px 6px rgba(255,255,255,0.95) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
body.nm-mode #sub-social .ss-panel input::placeholder,
body.nm-mode #sub-social .ss-panel textarea::placeholder { color: rgba(0,0,0,0.3) !important; }

/* Billing toggle */
body.nm-mode #sub-social .bill-toggle {
  background: #f0f2f7 !important; border: none !important;
  box-shadow: inset 3px 3px 8px rgba(0,0,0,0.12), inset -2px -2px 6px rgba(255,255,255,0.95) !important;
}
body.nm-mode #sub-social .bill-btn { color: rgba(0,0,0,0.5) !important; }
body.nm-mode #sub-social .bill-btn[style*="background:rgba(255,255,255"] {
  background: #f0f2f7 !important; color: #1a1a2e !important;
  box-shadow: 3px 3px 8px rgba(0,0,0,0.13), -2px -2px 6px rgba(255,255,255,0.95) !important;
}

/* Plan cards + option rows + checks */
body.nm-mode #sub-social .ss-plan-card {
  background: #f0f2f7 !important; border: none !important; border-radius: 18px !important;
  box-shadow: 7px 7px 18px rgba(0,0,0,0.12), -5px -5px 14px rgba(255,255,255,0.97) !important;
}
body.nm-mode #sub-social .ss-option { border-bottom-color: rgba(0,0,0,0.07) !important; }
body.nm-mode #sub-social .ss-option-label { color: #1a1a2e !important; }
body.nm-mode #sub-social .ss-option-sub { color: rgba(0,0,0,0.45) !important; }
body.nm-mode #sub-social .ss-check { border-color: rgba(0,0,0,0.25) !important; }

/* Subscription screen is explicitly excluded from the block above — it
   must render identically whether opened from normal or Fashion home, no
   neumorphic reskin. ID selector beats the .ss-panel/attribute-selector
   rules above regardless of source order. Opaque fallback color only —
   the actual background image + dark gradient is set by ssSubBgSync() in
   part032.js (background-image alone can't safely be !important-free here
   without risking the .ss-panel rule winning back, and a separate
   absolutely-positioned image layer risks bleeding through to whatever
   sits behind the panel, which is exactly the ghosting bug this replaced). */
#sub-social #ss-panel-subscription { background-color: #060c18 !important; }
body.nm-mode #sub-social #ss-panel-subscription [style*="#fff"],
body.nm-mode #sub-social #ss-panel-subscription [style*="255,255,255"],
body.nm-mode #sub-social #ss-panel-subscription [style*="255, 255, 255"] { color: #fff !important; }
body.nm-mode #sub-social #ss-panel-subscription [style*="e8d5a3"],
body.nm-mode #sub-social #ss-panel-subscription [style*="accent-gold"],
body.nm-mode #sub-social #ss-panel-subscription [style*="var(--accent"] { color: #e8d5a3 !important; }
body.nm-mode #sub-social #ss-panel-subscription button[style*="rgba(0,0,0"],
body.nm-mode #sub-social #ss-panel-subscription button[style*="background:#060c18"],
body.nm-mode #sub-social #ss-panel-subscription button[style*="135deg,#e8d5a3"] { color: #060c18 !important; }
body.nm-mode #sub-social #ss-panel-subscription .ss-panel-title { color: #fff !important; }
body.nm-mode #sub-social #ss-panel-subscription .ss-panel-sub { color: rgba(255,255,255,0.52) !important; }
body.nm-mode #sub-social #ss-panel-subscription .ss-back,
body.nm-mode #sub-social #ss-panel-subscription .ss-panel-back { color: #fff !important; }
body.nm-mode #sub-social #ss-panel-subscription .bill-toggle {
  background: rgba(255,255,255,0.05) !important; border: none !important; box-shadow: none !important;
}
body.nm-mode #sub-social #ss-panel-subscription .bill-btn { color: rgba(255,255,255,0.52) !important; }
body.nm-mode #sub-social #ss-panel-subscription .bill-btn[style*="background:rgba(255,255,255"] {
  background: rgba(255,255,255,0.07) !important; color: #fff !important; box-shadow: none !important;
}

/* Gold gradient CTA buttons keep dark text (already dark via re-whiten rule) */
body.nm-mode #sub-social .ss-btn-primary { color: #060c18 !important; }

/* Fashion Background picker — same dark-panel-in-nm-mode leak as the
   subscription screen had: #sub-social's broad nm-mode rules were forcing
   this panel's white text dark against its own still-dark backdrop,
   making it unreadable. Same fix, same pattern. */
#sub-social #ss-panel-fashionbg { background-color: #060c18 !important; }
body.nm-mode #sub-social #ss-panel-fashionbg [style*="#fff"],
body.nm-mode #sub-social #ss-panel-fashionbg [style*="255,255,255"],
body.nm-mode #sub-social #ss-panel-fashionbg [style*="255, 255, 255"] { color: #fff !important; }
body.nm-mode #sub-social #ss-panel-fashionbg [style*="e8d5a3"] { color: #e8d5a3 !important; }
body.nm-mode #sub-social #ss-panel-fashionbg button[style*="background:#e8d5a3"] { color: #060c18 !important; }

/* ═══════════════════════════════════════════════════════════════
   INNER PAGE 4 — ROUTINES  (#sub-routines + #sub-routine-detail)
   No neumorphic reskin here — the Daily Practice flow renders
   identically to NowssB Fashion regardless of which home it was
   opened from (images, cards, everything stays the same).
═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   SETTINGS — purpose-built neumorphic UI (#nm-settings-view)
   Replaces the reskinned fashion list in normal-home mode.
═══════════════════════════════════════════════════════════════ */

/* View switch — retired. Both homes show #ss-main-view now.
   The rule that used to sit here, `body.nm-mode #sub-social #ss-main-view
   { display: none !important }`, is the reason turning the swap off in
   nowssb-nm.js was not enough on its own: an !important declaration in a
   stylesheet beats a plain inline style, so the JS said flex and the page
   stayed hidden. Both it and the panel it revealed are gone. */
#nm-settings-view { display: none !important; }
#nm-settings-view::-webkit-scrollbar { display: none; }

/* Header */
.nmset-top { display: flex; align-items: center; gap: 14px; padding: 18px 0 8px; position: sticky; top: 0; z-index: 5;
  background: #f0f2f7; }
body.nm-night #nm-settings-view .nmset-top { background: #0c0c20; }
.nmset-back {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; border: none; cursor: pointer;
  background: #f0f2f7; display: flex; align-items: center; justify-content: center;
  box-shadow: 5px 5px 12px rgba(0,0,0,0.16), -4px -4px 10px rgba(255,255,255,0.95);
}
.nmset-back:active { box-shadow: inset 3px 3px 7px rgba(0,0,0,0.16), inset -2px -2px 6px rgba(255,255,255,0.95); }
.nmset-back svg { stroke: #1a1a2e; }
body.nm-night #nm-settings-view .nmset-back { background: #16163c; box-shadow: 5px 5px 13px rgba(0,0,0,0.85), -3px -3px 10px rgba(50,50,110,0.3); }
body.nm-night #nm-settings-view .nmset-back svg { stroke: #e8d5a3; }
.nmset-title { font-family: 'DM Sans', sans-serif; font-size: 26px; font-weight: 800; color: #1a1a2e; letter-spacing: -0.5px; }
body.nm-night #nm-settings-view .nmset-title { color: #fff; }

/* Profile hero card */
.nmset-hero {
  display: flex; align-items: center; gap: 16px; margin: 16px 0 8px; padding: 20px; cursor: pointer;
  border-radius: 24px; background: #f0f2f7;
  box-shadow: 9px 9px 22px rgba(0,0,0,0.14), -7px -7px 18px rgba(255,255,255,0.97);
}
.nmset-hero:active { box-shadow: inset 6px 6px 14px rgba(0,0,0,0.12), inset -5px -5px 12px rgba(255,255,255,0.95); }
body.nm-night #nm-settings-view .nmset-hero { background: #16163c; box-shadow: 9px 9px 24px rgba(0,0,0,0.88), -5px -5px 16px rgba(50,50,110,0.32); }
.nmset-hero-av {
  width: 60px; height: 60px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #e8d5a3, #c8e8f5); color: #060c18; font-family: 'DM Sans', sans-serif; font-size: 24px; font-weight: 800;
  box-shadow: 4px 4px 10px rgba(0,0,0,0.18);
}
.nmset-hero-info { flex: 1; min-width: 0; }
.nmset-hero-name { font-family: 'DM Sans', sans-serif; font-size: 19px; font-weight: 800; color: #1a1a2e; }
body.nm-night #nm-settings-view .nmset-hero-name { color: #fff; }
.nmset-hero-email { font-family: 'DM Sans', sans-serif; font-size: 13px; color: rgba(0,0,0,0.45); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.nm-night #nm-settings-view .nmset-hero-email { color: rgba(255,255,255,0.5); }
.nmset-hero-badge { display: inline-block; margin-top: 8px; font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: #a8854a; background: rgba(200,169,110,0.14); padding: 4px 11px; border-radius: 20px; }
body.nm-night #nm-settings-view .nmset-hero-badge { color: #e8d5a3; background: rgba(232,213,163,0.14); }
.nmset-hero-chev { flex-shrink: 0; }
.nmset-hero-chev svg { stroke: rgba(0,0,0,0.25); }
body.nm-night #nm-settings-view .nmset-hero-chev svg { stroke: rgba(255,255,255,0.3); }

/* Quick-action grid (Flipkart-style) */
.nmset-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 14px 0 6px; }
.nmset-qtile { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 6px; cursor: pointer;
  border-radius: 20px; background: #f0f2f7; box-shadow: 6px 6px 14px rgba(0,0,0,0.12), -5px -5px 12px rgba(255,255,255,0.96); }
.nmset-qtile:active { box-shadow: inset 4px 4px 10px rgba(0,0,0,0.12), inset -3px -3px 8px rgba(255,255,255,0.95); }
body.nm-night #nm-settings-view .nmset-qtile { background: #16163c; box-shadow: 6px 6px 16px rgba(0,0,0,0.85), -4px -4px 12px rgba(50,50,110,0.3); }
.nmset-qtile-ico { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; }
.nmset-qtile-ico svg { stroke: #c8a96e; }
body.nm-night #nm-settings-view .nmset-qtile-ico svg { stroke: #e8d5a3; }
.nmset-qtile-label { font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .3px; color: #1a1a2e; text-align: center; }
body.nm-night #nm-settings-view .nmset-qtile-label { color: rgba(255,255,255,0.85); }

/* Sections */
.nmset-sec-label { font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: rgba(0,0,0,0.38); margin: 24px 6px 12px; }
body.nm-night #nm-settings-view .nmset-sec-label { color: rgba(255,255,255,0.35); }

/* Section card */
.nmset-card { border-radius: 22px; background: #f0f2f7; padding: 6px 18px; box-shadow: 8px 8px 20px rgba(0,0,0,0.12), -6px -6px 16px rgba(255,255,255,0.97); }
body.nm-night #nm-settings-view .nmset-card { background: #16163c; box-shadow: 8px 8px 22px rgba(0,0,0,0.88), -4px -4px 14px rgba(50,50,110,0.32); }

/* Row */
.nmset-row { display: flex; align-items: center; gap: 14px; padding: 15px 0; cursor: pointer; border-bottom: 1px solid rgba(0,0,0,0.06); }
body.nm-night #nm-settings-view .nmset-row { border-bottom-color: rgba(255,255,255,0.07); }
.nmset-row:last-child { border-bottom: none; }
.nmset-row:active { opacity: 0.7; }
.nmset-ico { width: 40px; height: 40px; border-radius: 13px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: #f0f2f7; box-shadow: inset 3px 3px 7px rgba(0,0,0,0.13), inset -2px -2px 6px rgba(255,255,255,0.95); }
.nmset-ico svg { stroke: #c8a96e; }
body.nm-night #nm-settings-view .nmset-ico { background: #16163c; box-shadow: inset 3px 3px 8px rgba(0,0,0,0.85), inset -2px -2px 5px rgba(50,50,110,0.3); }
body.nm-night #nm-settings-view .nmset-ico svg { stroke: #e8d5a3; }
.nmset-text { flex: 1; min-width: 0; }
.nmset-label { font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 600; color: #1a1a2e; }
body.nm-night #nm-settings-view .nmset-label { color: #fff; }
.nmset-sub { font-family: 'DM Sans', sans-serif; font-size: 12px; color: rgba(0,0,0,0.45); margin-top: 2px; }
body.nm-night #nm-settings-view .nmset-sub { color: rgba(255,255,255,0.45); }
.nmset-val { flex-shrink: 0; font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 800; color: #a8854a; background: #f0f2f7; padding: 6px 14px; border-radius: 20px;
  box-shadow: inset 2px 2px 5px rgba(0,0,0,0.12), inset -2px -2px 5px rgba(255,255,255,0.95); }
body.nm-night #nm-settings-view .nmset-val { color: #e8d5a3; background: #16163c; box-shadow: inset 2px 2px 6px rgba(0,0,0,0.85), inset -2px -2px 5px rgba(50,50,110,0.3); }
.nmset-chev { flex-shrink: 0; }
.nmset-chev svg { stroke: rgba(0,0,0,0.25); }
body.nm-night #nm-settings-view .nmset-chev svg { stroke: rgba(255,255,255,0.28); }

/* Toggle — thin pill */
.nmset-tgl { width: 42px; height: 18px; border-radius: 9px !important; flex-shrink: 0; position: relative; cursor: pointer; transition: background .2s;
  background: #e6e9f0; box-shadow: inset 1px 1px 3px rgba(0,0,0,0.18), inset -1px -1px 2px rgba(255,255,255,0.92); }
body.nm-night #nm-settings-view .nmset-tgl { background: #16163c; box-shadow: inset 1px 1px 3px rgba(0,0,0,0.85), inset -1px -1px 2px rgba(50,50,110,0.3); }
.nmset-tgl.on { background: linear-gradient(135deg, #e8d5a3, #c4a35a); box-shadow: inset 1px 1px 3px rgba(140,110,40,0.4); }
.nmset-knob { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50% !important; background: #fff; transition: left .2s;
  box-shadow: 1px 1px 3px rgba(0,0,0,0.3); }
.nmset-tgl.on .nmset-knob { left: 26px; background: #060c18; }

/* Danger */
.nmset-row.danger .nmset-label { color: #d04545; }
.nmset-row.danger .nmset-ico svg { stroke: #d04545; }

/* Sign-out button */
.nmset-signout { width: 100%; margin: 22px 0 8px; padding: 16px; border: none; cursor: pointer; border-radius: 18px;
  font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 800; letter-spacing: .5px; color: #d04545;
  background: #f0f2f7; box-shadow: 6px 6px 14px rgba(0,0,0,0.12), -5px -5px 12px rgba(255,255,255,0.96); }
.nmset-signout:active { box-shadow: inset 4px 4px 10px rgba(0,0,0,0.12), inset -3px -3px 8px rgba(255,255,255,0.95); }
body.nm-night #nm-settings-view .nmset-signout { background: #16163c; box-shadow: 6px 6px 16px rgba(0,0,0,0.85), -4px -4px 12px rgba(50,50,110,0.3); }
.nmset-foot { text-align: center; font-family: 'DM Sans', sans-serif; font-size: 11px; color: rgba(0,0,0,0.3); padding: 10px 0 4px; }
body.nm-night #nm-settings-view .nmset-foot { color: rgba(255,255,255,0.25); }

/* Sound Library — fix filter chip / sort button height + centering (nm mode) */
body.nm-mode #sub-sound-library .sl-filter-row { align-items: center !important; }
body.nm-mode #sub-sound-library .sl-filter-chip {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  height: 38px !important; min-height: 38px !important; padding: 0 16px !important; box-sizing: border-box !important;
  white-space: nowrap !important;
}
body.nm-mode #sub-sound-library .sl-sort-btn {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  height: 34px !important; min-height: 34px !important; padding: 0 16px !important; box-sizing: border-box !important;
  white-space: nowrap !important;
}
body.nm-mode #sub-sound-library .sl-sort-row { align-items: center !important; }

/* ═══════════════════════════════════════════════════════════════
   INNER PAGE 5 — HEALTH  (#sub-health-journey / -male / -female / -category)
   Neumorphism · light=day, dark=night
═══════════════════════════════════════════════════════════════ */

/* Hide photographic backgrounds + surface */
body.nm-mode #sub-health-journey .sub-screen-bg,
body.nm-mode #sub-health-male .sub-screen-bg,
body.nm-mode #sub-health-female .sub-screen-bg,
body.nm-DIS #sub-health-category .sub-screen-bg { display: none !important; }
body.nm-mode #sub-health-journey,
body.nm-mode #sub-health-male,
body.nm-mode #sub-health-female,
body.nm-DIS #sub-health-category { background: #f0f2f7 !important; }
body.nm-night #sub-health-journey,
body.nm-night #sub-health-male,
body.nm-night #sub-health-female,
body.nm-DIS #sub-health-category { background: #0c0c20 !important; }

/* Shared header */
body.nm-mode #sub-health-journey .sub-title, body.nm-mode #sub-health-journey .sub-title span,
body.nm-mode #sub-health-male .sub-title, body.nm-mode #sub-health-male .sub-title span,
body.nm-mode #sub-health-female .sub-title, body.nm-mode #sub-health-female .sub-title span,
body.nm-DIS #sub-health-category .sub-title, body.nm-DIS #sub-health-category .sub-title span { color: #1a1a2e !important; }
body.nm-night #sub-health-journey .sub-title, body.nm-night #sub-health-journey .sub-title span,
body.nm-night #sub-health-male .sub-title, body.nm-night #sub-health-male .sub-title span,
body.nm-night #sub-health-female .sub-title, body.nm-night #sub-health-female .sub-title span,
body.nm-DIS #sub-health-category .sub-title, body.nm-DIS #sub-health-category .sub-title span { color: #fff !important; }
body.nm-mode #sub-health-journey .sub-back svg path, body.nm-mode #sub-health-journey .sub-back svg line,
body.nm-mode #sub-health-male .sub-back svg path, body.nm-mode #sub-health-male .sub-back svg line,
body.nm-mode #sub-health-female .sub-back svg path, body.nm-mode #sub-health-female .sub-back svg line,
body.nm-DIS #sub-health-category .sub-back svg path, body.nm-DIS #sub-health-category .sub-back svg line { stroke: #1a1a2e !important; }
body.nm-night #sub-health-journey .sub-back svg path, body.nm-night #sub-health-journey .sub-back svg line,
body.nm-night #sub-health-male .sub-back svg path, body.nm-night #sub-health-male .sub-back svg line,
body.nm-night #sub-health-female .sub-back svg path, body.nm-night #sub-health-female .sub-back svg line,
body.nm-DIS #sub-health-category .sub-back svg path, body.nm-DIS #sub-health-category .sub-back svg line { stroke: #e8d5a3 !important; }

/* Gender select */
body.nm-mode #sub-health-journey .gsel-eyebrow { color: #c8a96e !important; }
body.nm-night #sub-health-journey .gsel-eyebrow { color: #e8d5a3 !important; }
body.nm-mode #sub-health-journey .gsel-title { color: #1a1a2e !important; }
body.nm-night #sub-health-journey .gsel-title { color: #fff !important; }
body.nm-mode #sub-health-journey .gsel-sub { color: rgba(0,0,0,0.5) !important; }
body.nm-night #sub-health-journey .gsel-sub { color: rgba(255,255,255,0.6) !important; }
body.nm-mode #sub-health-journey .gsel-card {
  border: none !important; border-radius: 20px !important;
  box-shadow: 7px 7px 18px rgba(0,0,0,0.16), -5px -5px 14px rgba(255,255,255,0.9) !important;
}
body.nm-night #sub-health-journey .gsel-card {
  border: none !important; border-radius: 20px !important;
  box-shadow: 8px 8px 22px rgba(0,0,0,0.88), -4px -4px 14px rgba(50,50,110,0.32) !important;
}
body.nm-mode #sub-health-journey .brand-name { color: #1a1a2e !important; }

/* Category grids — hero band + items */
body.nm-mode #sub-health-male .hcat-hero-img, body.nm-mode #sub-health-female .hcat-hero-img { display: none !important; }
body.nm-mode #sub-health-male .hcat-hero, body.nm-mode #sub-health-female .hcat-hero {
  height: 120px !important; border: none !important; background: transparent !important;
}
body.nm-mode #sub-health-male .hcat-hero::after, body.nm-mode #sub-health-female .hcat-hero::after { display: none !important; }
body.nm-mode #sub-health-male .hcat-hero-label, body.nm-mode #sub-health-female .hcat-hero-label { color: #c8a96e !important; }
body.nm-night #sub-health-male .hcat-hero-label, body.nm-night #sub-health-female .hcat-hero-label { color: #e8d5a3 !important; }
body.nm-mode #sub-health-male .hcat-hero-name, body.nm-mode #sub-health-female .hcat-hero-name { color: #1a1a2e !important; }
body.nm-night #sub-health-male .hcat-hero-name, body.nm-night #sub-health-female .hcat-hero-name { color: #fff !important; }
body.nm-mode #sub-health-male .hcat-section-label, body.nm-mode #sub-health-female .hcat-section-label { color: rgba(0,0,0,0.4) !important; }
body.nm-night #sub-health-male .hcat-section-label, body.nm-night #sub-health-female .hcat-section-label { color: rgba(255,255,255,0.4) !important; }

body.nm-mode #sub-health-male .hcat-item, body.nm-mode #sub-health-female .hcat-item {
  background: #f0f2f7 !important; border: none !important; border-radius: 18px !important;
  box-shadow: 6px 6px 15px rgba(0,0,0,0.12), -5px -5px 12px rgba(255,255,255,0.96) !important;
}
body.nm-mode #sub-health-male .hcat-item:active, body.nm-mode #sub-health-female .hcat-item:active {
  box-shadow: inset 4px 4px 10px rgba(0,0,0,0.12), inset -3px -3px 8px rgba(255,255,255,0.95) !important;
}
body.nm-night #sub-health-male .hcat-item, body.nm-night #sub-health-female .hcat-item {
  background: #16163c !important; border: none !important; border-radius: 18px !important;
  box-shadow: 6px 6px 16px rgba(0,0,0,0.85), -4px -4px 12px rgba(50,50,110,0.3) !important;
}
body.nm-mode #sub-health-male .hcat-item-icon, body.nm-mode #sub-health-female .hcat-item-icon { color: #c8a96e !important; }
body.nm-night #sub-health-male .hcat-item-icon, body.nm-night #sub-health-female .hcat-item-icon { color: #e8d5a3 !important; }
body.nm-mode #sub-health-male .hcat-item-title, body.nm-mode #sub-health-female .hcat-item-title { color: #1a1a2e !important; }
body.nm-night #sub-health-male .hcat-item-title, body.nm-night #sub-health-female .hcat-item-title { color: #fff !important; }
body.nm-mode #sub-health-male .hcat-item-sub, body.nm-mode #sub-health-female .hcat-item-sub { color: rgba(0,0,0,0.42) !important; }
body.nm-night #sub-health-male .hcat-item-sub, body.nm-night #sub-health-female .hcat-item-sub { color: rgba(255,255,255,0.42) !important; }
body.nm-mode #sub-health-male .hcat-item-arr, body.nm-mode #sub-health-female .hcat-item-arr { color: #c8a96e !important; }

/* Category page */
body.nm-DIS #sub-health-category #hcp-banner-img { background-image: none !important; background-color: #f0f2f7 !important; height: 130px !important; }
body.nm-DIS #sub-health-category #hcp-banner-img { background-color: #0c0c20 !important; }
body.nm-DIS #sub-health-category #hcp-banner-img > div:first-child { display: none !important; }
body.nm-DIS #sub-health-category #hcp-organ-tag { color: #c8a96e !important; opacity: 1 !important; }
body.nm-DIS #sub-health-category #hcp-desc { color: rgba(0,0,0,0.6) !important; }
body.nm-DIS #sub-health-category #hcp-desc { color: rgba(255,255,255,0.7) !important; }
body.nm-DIS #sub-health-category .rtd-tabs {
  background: #f0f2f7 !important; border-top: none !important; border-bottom: none !important;
  box-shadow: 0 6px 14px rgba(0,0,0,0.07) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
body.nm-DIS #sub-health-category .rtd-tabs { background: #0c0c20 !important; box-shadow: 0 6px 16px rgba(0,0,0,0.6) !important; }
body.nm-DIS #sub-health-category .rtd-tab { color: rgba(0,0,0,0.35) !important; }
body.nm-DIS #sub-health-category .rtd-tab.active { color: #c8a96e !important; }
body.nm-DIS #sub-health-category .rtd-tab.active::after { background: #c8a96e !important; }
body.nm-DIS #sub-health-category .rtd-tab { color: rgba(255,255,255,0.32) !important; }
body.nm-DIS #sub-health-category .rtd-tab.active { color: #e8d5a3 !important; }
body.nm-DIS #sub-health-category .rtd-tab.active::after { background: #e8d5a3 !important; }
body.nm-DIS #sub-health-category .rtd-word-row { border-bottom-color: rgba(0,0,0,0.07) !important; }
body.nm-DIS #sub-health-category .rtd-word-row { border-bottom-color: rgba(255,255,255,0.07) !important; }
body.nm-DIS #sub-health-category .rtd-word-name { color: #1a1a2e !important; }
body.nm-DIS #sub-health-category .rtd-word-name { color: #fff !important; }
body.nm-DIS #sub-health-category .rtd-bottom {
  background: #f0f2f7 !important; border-top: none !important;
  box-shadow: 0 -6px 16px rgba(0,0,0,0.08) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
body.nm-DIS #sub-health-category .rtd-bottom { background: #0c0c20 !important; box-shadow: 0 -6px 18px rgba(0,0,0,0.6) !important; }
body.nm-DIS #sub-health-category .rtd-session-btn,
body.nm-DIS #sub-health-category .rtd-session-btn {
  background: linear-gradient(135deg,#e8d5a3,#c4a35a) !important; border: none !important; color: #060c18 !important; border-radius: 14px !important;
}

/* ═══════════════════════════════════════════════════════════════
   INNER PAGE 6 — COMMUNITY (social) → WHITE NEUMORPHISM
   Overrides the dark NowssB social design when in normal-home mode.
   Day-only (no night). Scoped to the social screens + social nav.
═══════════════════════════════════════════════════════════════ */

/* Screen surfaces + kill the dark ambient glow */
body.nm-mode #sub-people,
body:not(.nwsb-soc-glass) #sub-ig-profile,
body.nm-mode:not(.nwsb-soc-glass) #sub-social-home,
body.nm-mode #sub-reels-feed { background: #f0f2f7 !important; }
body.nm-mode #sub-people::before,
body:not(.nwsb-soc-glass) #sub-ig-profile::before,
body.nm-mode:not(.nwsb-soc-glass) #sub-social-home::before { display: none !important; }
body.nm-mode #sub-people .ig,
body:not(.nwsb-soc-glass) #sub-ig-profile .ig { background: #f0f2f7 !important; }

/* ── KILL THE DARK BAND BEHIND THE BOTTOM NAV ──
   .sub-screen base bg is #060c18 and #sub-ig-profile is #000.  The scroll
   inside has a tall bottom padding, so that dark colour bleeds through under
   and just above the bottom nav as a "shadow / vignette".  The social section
   is always a LIGHT surface (neumorphic or bright glass), so paint every
   social sub-screen light — no dark band, nav icons fully visible. */
#sub-ig-profile,
#sub-ig-feed,
#sub-people,
#sub-social-home,
#sub-reels-feed { background: #eef1f6 !important; }

/* Top bar */
body.nm-mode #sub-people .ig-topbar,
body:not(.nwsb-soc-glass) #sub-ig-profile .ig-topbar,
body.nm-mode:not(.nwsb-soc-glass) #sub-social-home .ig-topbar,
body.nm-mode #sub-reels-feed .ig-topbar {
  background: #f0f2f7 !important; border-bottom: none !important;
  box-shadow: 0 5px 13px rgba(0,0,0,0.07) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
body.nm-mode #sub-people .ig-username,
body:not(.nwsb-soc-glass) #sub-ig-profile .ig-username,
body.nm-mode:not(.nwsb-soc-glass) #sub-social-home .ig-username,
body.nm-mode #sub-reels-feed .ig-username { color: #1a1a2e !important; }
body:not(.nwsb-soc-glass) #sub-ig-profile .ig-iconbtn svg { color: #1a1a2e !important; stroke: #1a1a2e !important; }
/* Topbar/nav icon images are white-filtered → make them dark on cream */
body.nm-mode #sub-people .ig-topbar img,
body:not(.nwsb-soc-glass) #sub-ig-profile .ig-topbar img,
body.nm-mode:not(.nwsb-soc-glass) #sub-social-home .ig-topbar img { filter: brightness(0) opacity(0.82) !important; }
/* the verified badge must keep its true colours in the header (not be blackened).
   Needs higher specificity than the .ig-topbar img blackening rule above. */
body:not(.nwsb-soc-glass) #sub-ig-profile .ig-topbar .ig-vbadge img,
body.nwsb-soc-glass #sub-ig-profile .ig-topbar .ig-vbadge img,
body #sub-people .ig-topbar .ig-vbadge img,
body #sub-social-home .ig-topbar .ig-vbadge img { filter: none !important; opacity: 1 !important; }
/* Shop-Verified header button — keep the true-colour badge in every mode */
body #sub-ig-profile .ig-topbar .ig-vshop img,
body.nwsb-soc-glass #sub-ig-profile .ig-topbar .ig-vshop img,
body:not(.nwsb-soc-glass) #sub-ig-profile .ig-topbar .ig-vshop img { filter: none !important; opacity: 1 !important; }
/* the neumorphic circle wrapper of the header badge */
#sub-ig-profile .ig-topbar .ig-vbadge { vertical-align: middle !important; }

/* Search */
body.nm-mode #sub-people .ig-searchwrap { background: #f0f2f7 !important; }
body.nm-mode #sub-people .ig-searchbar {
  background: #f0f2f7 !important; border: none !important;
  box-shadow: inset 3px 3px 8px rgba(0,0,0,0.12), inset -2px -2px 6px rgba(255,255,255,0.95) !important;
  color: rgba(0,0,0,0.55) !important;
}
body.nm-mode #sub-people .ig-searchbar input { color: #1a1a2e !important; }
body.nm-mode #sub-people .ig-searchbar input::placeholder { color: rgba(0,0,0,0.3) !important; }
body.nm-mode #sub-people .nwsb-search-icon { filter: brightness(0) opacity(0.55) !important; }

/* Explore tiles — neumorphic frame (images kept) */
body.nm-mode #sub-people .ig-tile,
body:not(.nwsb-soc-glass) #sub-ig-profile .ig-tile {
  background: #f0f2f7 !important; border-radius: 16px !important;
  box-shadow: 5px 5px 12px rgba(0,0,0,0.12), -4px -4px 10px rgba(255,255,255,0.95) !important;
}

/* User rows — raised cards */
body.nm-mode #sub-people .ig-userrow,
body.nm-mode:not(.nwsb-soc-glass) #sub-social-home .ig-userrow {
  background: #f0f2f7 !important; border: none !important; border-radius: 16px !important;
  box-shadow: 6px 6px 14px rgba(0,0,0,0.1), -5px -5px 12px rgba(255,255,255,0.96) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
body.nm-mode #sub-people .ig-userrow .ig-u,
body.nm-mode:not(.nwsb-soc-glass) #sub-social-home .ig-userrow .ig-u { color: #1a1a2e !important; }
body.nm-mode #sub-people .ig-userrow .ig-n,
body.nm-mode:not(.nwsb-soc-glass) #sub-social-home .ig-userrow .ig-n { color: rgba(0,0,0,0.45) !important; }

/* Profile page */
/* Placeholder gradient ONLY when no banner image is set — otherwise the
   !important here would clobber the inline background-image (uploaded/prebuilt banner) */
body:not(.nwsb-soc-glass) #sub-ig-profile .ig-prof-banner:not([style*="url"]) { background: linear-gradient(160deg, #e8eef7 0%, #dfe6f2 55%, #f0f2f7 100%) !important; }
body:not(.nwsb-soc-glass) #sub-ig-profile .ig-prof-top { background: #f0f2f7 !important; }
body:not(.nwsb-soc-glass) #sub-ig-profile .ig-prof-name { color: #1a1a2e !important; }
body:not(.nwsb-soc-glass) #sub-ig-profile .ig-vshop-title { color: #1a1a2e !important; }
body:not(.nwsb-soc-glass) #sub-ig-profile .ig-vshop-sub { color: rgba(26,26,46,0.55) !important; }
body:not(.nwsb-soc-glass) #sub-ig-profile .ig-vshop-pill {
  background: #f0f2f7 !important;
  box-shadow: 4px 4px 10px rgba(0,0,0,0.12), -3px -3px 8px rgba(255,255,255,0.95) !important;
}
body:not(.nwsb-soc-glass) #sub-ig-profile .ig-vshop-dimple {
  background: #f0f2f7 !important;
  box-shadow: inset 3px 3px 6px rgba(0,0,0,0.12), inset -2px -2px 5px rgba(255,255,255,0.9) !important;
}
body:not(.nwsb-soc-glass) #sub-ig-profile .ig-prof-cat { color: #a8854a !important; }
body:not(.nwsb-soc-glass) #sub-ig-profile .ig-prof-bio,
body:not(.nwsb-soc-glass) #sub-ig-profile .ig-prof-biotext { color: rgba(0,0,0,0.7) !important; }
body:not(.nwsb-soc-glass) #sub-ig-profile .ig-stat .n { color: #a8854a !important; }
body:not(.nwsb-soc-glass) #sub-ig-profile .ig-stat .l { color: rgba(0,0,0,0.4) !important; }
body:not(.nwsb-soc-glass) #sub-ig-profile .ig-prof-initials { background: #e6e9f1 !important; color: #c8a96e !important; border: 3px solid #f0f2f7 !important; }
body:not(.nwsb-soc-glass) #sub-ig-profile .ig-prof-plan-badge { color: #a8854a !important; background: rgba(200,169,110,0.14) !important; border-color: rgba(200,169,110,0.3) !important; }
body:not(.nwsb-soc-glass) #sub-ig-profile .ig-prof-rank { color: rgba(0,0,0,0.45) !important; }
/* nowssb.com link — was near-white (#e0f1ff), invisible on the light profile */
#sub-ig-profile .ig-prof-link { color: #3a6ea5 !important; font-weight: 700 !important; }

/* Action buttons */
body:not(.nwsb-soc-glass) #sub-ig-profile .ig-btn.gray,
body:not(.nwsb-soc-glass) #sub-ig-profile .ig-btn.icon {
  background: #f0f2f7 !important; border: none !important; color: #1a1a2e !important; border-radius: 14px !important;
  box-shadow: 4px 4px 10px rgba(0,0,0,0.12), -3px -3px 8px rgba(255,255,255,0.95) !important;
}
body:not(.nwsb-soc-glass) #sub-ig-profile .ig-btn.gray svg { stroke: #1a1a2e !important; }

/* Tabs */
body:not(.nwsb-soc-glass) #sub-ig-profile .ig-tabs { background: #f0f2f7 !important; border-top-color: rgba(0,0,0,0.08) !important; }
body:not(.nwsb-soc-glass) #sub-ig-profile .ig-tab { color: rgba(0,0,0,0.3) !important; }
body:not(.nwsb-soc-glass) #sub-ig-profile .ig-tab.active { color: #c8a96e !important; border-bottom-color: #c8a96e !important; }
body:not(.nwsb-soc-glass) #sub-ig-profile .ig-tab svg { stroke: currentColor !important; }
body:not(.nwsb-soc-glass) #sub-ig-profile .ig-tab-img { filter: brightness(0) opacity(0.7) !important; }
body:not(.nwsb-soc-glass) #sub-ig-profile .ig-tab.active .ig-tab-img { filter: brightness(0) saturate(100%) invert(70%) sepia(30%) saturate(500%) hue-rotate(2deg) brightness(90%) !important; }

/* Highlights */
body:not(.nwsb-soc-glass) #sub-ig-profile .ig-hl-circle { background: #f0f2f7 !important; border: none !important;
  box-shadow: 4px 4px 10px rgba(0,0,0,0.12), -3px -3px 8px rgba(255,255,255,0.95) !important; }
body:not(.nwsb-soc-glass) #sub-ig-profile .ig-hl-circle svg { stroke: #c8a96e !important; }
body:not(.nwsb-soc-glass) #sub-ig-profile .ig-hl-label { color: rgba(0,0,0,0.5) !important; }

/* Social bottom nav */
#ig-social-nav {
  background: #f0f2f7 !important; border-top: 1px solid rgba(0,0,0,0.05) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
/* Solid, clearly-visible dark grey, larger (brightness keeps the icon detail,
   full opacity so they don't fade out) */
#ig-social-nav .ig-social-img {
  filter: brightness(0.3) contrast(1.15) !important; opacity: 1 !important;
  width: 28px !important; height: 28px !important;
}
#ig-social-nav .ig-social-btn.active .ig-social-img { filter: brightness(0) saturate(100%) invert(70%) sepia(30%) saturate(500%) hue-rotate(2deg) brightness(90%) !important; }
/* Profile-tab avatar — circular, light fallback (was a black square) */
#ig-social-nav #igsn-me-av { border-radius: 50% !important; background-color: #dfe3ec !important; width: 28px !important; height: 28px !important; }
#ig-social-nav #igsn-me-av svg { stroke: rgba(0,0,0,0.45) !important; }
#ig-social-nav .ig-social-btn span { color: rgba(0,0,0,0.4) !important; }
#ig-social-nav .ig-social-btn.active span { color: #c8a96e !important; }

/* Social home hero / stat cube → light neumorphic */
body.nm-mode:not(.nwsb-soc-glass) #sub-social-home .nwsb-hero { background: #f0f2f7 !important; border: none !important;
  box-shadow: 8px 8px 20px rgba(0,0,0,0.12), -6px -6px 16px rgba(255,255,255,0.97) !important; }
body.nm-mode:not(.nwsb-soc-glass) #sub-social-home .nwsb-hero-title { color: #1a1a2e !important; }
body.nm-mode:not(.nwsb-soc-glass) #sub-social-home .nwsb-hero-sub { color: rgba(0,0,0,0.45) !important; }
body.nm-mode:not(.nwsb-soc-glass) #sub-social-home .nwsb-hero-stat-num { color: #a8854a !important; }
body.nm-mode:not(.nwsb-soc-glass) #sub-social-home .nwsb-hero-stat-lbl { color: rgba(0,0,0,0.4) !important; }
body.nm-mode:not(.nwsb-soc-glass) #sub-social-home .nwsb-section-hd { color: rgba(0,0,0,0.4) !important; }

/* Reels feed — keep photo cards; lighten the empty/loading states */
body.nm-mode #sub-reels-feed .nwsb-reels-empty-title { color: rgba(0,0,0,0.55) !important; }
body.nm-mode #sub-reels-feed .nwsb-reels-empty-sub { color: rgba(0,0,0,0.35) !important; }

/* ═══════════════════════════════════════════════════════════════
   INNER PAGE 7 — SOUND BATH  (#sub-sound-bath)
   Neumorphism (light) · intro auto-skipped in nm-mode
═══════════════════════════════════════════════════════════════ */

/* Player surface (drop the dark radial bg) */
body.nm-mode #sub-sound-bath .sb-player-bg { background: #f0f2f7 !important; }

/* Top bar */
body.nm-mode #sub-sound-bath .sb-back-btn {
  background: #f0f2f7 !important; border: none !important;
  box-shadow: 4px 4px 10px rgba(0,0,0,0.13), -3px -3px 8px rgba(255,255,255,0.95) !important;
}
body.nm-mode #sub-sound-bath .sb-back-btn svg path,
body.nm-mode #sub-sound-bath .sb-back-btn svg line { stroke: #1a1a2e !important; }
body.nm-mode #sub-sound-bath .sb-timer-display { color: rgba(0,0,0,0.5) !important; }

/* Mode buttons → neumorphic */
body.nm-mode #sub-sound-bath .sb-mode-btn {
  background: #f0f2f7 !important; border: none !important; border-radius: 16px !important;
  box-shadow: 5px 5px 12px rgba(0,0,0,0.12), -4px -4px 10px rgba(255,255,255,0.96) !important;
}
body.nm-mode #sub-sound-bath .sb-mode-btn.active {
  background: #f0f2f7 !important;
  box-shadow: inset 4px 4px 9px rgba(0,0,0,0.13), inset -3px -3px 7px rgba(255,255,255,0.95) !important;
}
body.nm-mode #sub-sound-bath .sb-mode-label { color: rgba(0,0,0,0.45) !important; }
body.nm-mode #sub-sound-bath .sb-mode-btn.active .sb-mode-label { color: #c8a96e !important; }

/* Center text */
body.nm-mode #sub-sound-bath .sb-mode-title { color: #1a1a2e !important; }
body.nm-mode #sub-sound-bath .sb-mode-desc { color: rgba(0,0,0,0.5) !important; }

/* Play button — keep gold accent, add neumorphic lift */
body.nm-mode #sub-sound-bath .sb-play-btn {
  box-shadow: 6px 6px 16px rgba(0,0,0,0.18), -4px -4px 12px rgba(255,255,255,0.85) !important;
}

/* ═══════════════════════════════════════════════════════════════
   INNER PAGE 8 — MY PROGRESS  (#sub-my-progress)
   Neumorphism (light) · intro auto-skipped in nm-mode
═══════════════════════════════════════════════════════════════ */

/* Surface + drop photo bg + kill legibility text-shadows */
body.nm-DISABLED #sub-my-progress { background: #f0f2f7 !important; }
body.nm-DISABLED #sub-my-progress #mpBg,
body.nm-DISABLED #sub-my-progress .sub-screen-bg { display: none !important; }
body.nm-DISABLED #sub-my-progress * { text-shadow: none !important; }

/* Header */
body.nm-DISABLED #sub-my-progress .sub-title, body.nm-DISABLED #sub-my-progress .sub-title span { color: #1a1a2e !important; }
body.nm-DISABLED #sub-my-progress .sub-back svg path, body.nm-DISABLED #sub-my-progress .sub-back svg line { stroke: #1a1a2e !important; }

/* Greeting card */
body.nm-DISABLED #sub-my-progress .mp-greeting {
  background: #f0f2f7 !important; border: none !important; border-radius: 20px !important;
  box-shadow: 7px 7px 18px rgba(0,0,0,0.12), -5px -5px 14px rgba(255,255,255,0.97) !important;
}
body.nm-DISABLED #sub-my-progress .mp-greeting::before { display: none !important; }
body.nm-DISABLED #sub-my-progress .mp-greeting-name { color: #c8a96e !important; }
body.nm-DISABLED #sub-my-progress .mp-greeting-msg { color: #1a1a2e !important; }
body.nm-DISABLED #sub-my-progress .mp-greeting-sub { color: rgba(0,0,0,0.5) !important; }
body.nm-DISABLED #sub-my-progress .mp-last-practiced { color: rgba(0,0,0,0.45) !important; }

/* Stat boxes */
body.nm-DISABLED #sub-my-progress .mp-stat-box {
  background: #f0f2f7 !important; border: none !important; border-radius: 16px !important;
  box-shadow: 6px 6px 14px rgba(0,0,0,0.11), -4px -4px 10px rgba(255,255,255,0.96) !important;
}
body.nm-DISABLED #sub-my-progress .mp-stat-box::after { display: none !important; }
body.nm-DISABLED #sub-my-progress .mp-stat-num { color: #c8a96e !important; }
body.nm-DISABLED #sub-my-progress .mp-stat-label { color: rgba(0,0,0,0.45) !important; }
body.nm-DISABLED #sub-my-progress .mp-stat-sub { color: rgba(0,0,0,0.32) !important; }

/* Week grid */
body.nm-DISABLED #sub-my-progress .mp-week-dot {
  background: #f0f2f7 !important; border: none !important; color: rgba(0,0,0,0.3) !important; border-radius: 12px !important;
  box-shadow: inset 2px 2px 5px rgba(0,0,0,0.12), inset -2px -2px 5px rgba(255,255,255,0.95) !important;
}
body.nm-DISABLED #sub-my-progress .mp-week-dot.done { color: #5a8fa8 !important; box-shadow: 3px 3px 7px rgba(0,0,0,0.12), -2px -2px 6px rgba(255,255,255,0.95) !important; }
body.nm-DISABLED #sub-my-progress .mp-week-dot.done::after { background: #5a8fa8 !important; }
body.nm-DISABLED #sub-my-progress .mp-week-dot.today { color: #c8a96e !important; box-shadow: 3px 3px 7px rgba(0,0,0,0.13), -2px -2px 6px rgba(255,255,255,0.95) !important; }
body.nm-DISABLED #sub-my-progress .mp-week-name { color: rgba(0,0,0,0.35) !important; }

/* Session rows */
body.nm-DISABLED #sub-my-progress .mp-session-row {
  background: #f0f2f7 !important; border: none !important; border-radius: 14px !important; margin-bottom: 8px !important;
  box-shadow: 5px 5px 12px rgba(0,0,0,0.1), -4px -4px 10px rgba(255,255,255,0.95) !important;
}
body.nm-DISABLED #sub-my-progress .mp-session-disc {
  background: #f0f2f7 !important; border: none !important; color: #c8a96e !important;
  box-shadow: inset 2px 2px 5px rgba(0,0,0,0.12), inset -2px -2px 5px rgba(255,255,255,0.95) !important;
}
body.nm-DISABLED #sub-my-progress .mp-session-word { color: #1a1a2e !important; }
body.nm-DISABLED #sub-my-progress .mp-session-reps { color: #c8a96e !important; }
body.nm-DISABLED #sub-my-progress .mp-session-reps-label { color: rgba(0,0,0,0.35) !important; }
body.nm-DISABLED #sub-my-progress .mp-session-detail { color: rgba(0,0,0,0.45) !important; }

/* Milestones */
body.nm-DISABLED #sub-my-progress .mp-milestone {
  background: #f0f2f7 !important; border: none !important; border-radius: 16px !important;
  box-shadow: 6px 6px 14px rgba(0,0,0,0.11), -4px -4px 10px rgba(255,255,255,0.96) !important;
}
body.nm-DISABLED #sub-my-progress .mp-milestone-name { color: #1a1a2e !important; }
body.nm-DISABLED #sub-my-progress .mp-milestone-cond { color: rgba(0,0,0,0.45) !important; }
body.nm-DISABLED #sub-my-progress .mp-milestone-icon { color: #c8a96e !important; }

/* Insight */
body.nm-DISABLED #sub-my-progress .mp-insight-wrap {
  background: #f0f2f7 !important; border: none !important; border-radius: 16px !important;
  box-shadow: 6px 6px 14px rgba(0,0,0,0.11), -4px -4px 10px rgba(255,255,255,0.96) !important;
}
body.nm-DISABLED #sub-my-progress .mp-insight-eyebrow { color: #c8a96e !important; }
body.nm-DISABLED #sub-my-progress .mp-insight-text { color: rgba(0,0,0,0.7) !important; }

/* Feedback */
body.nm-DISABLED #sub-my-progress .mp-feedback-question { color: #1a1a2e !important; }
body.nm-DISABLED #sub-my-progress .mp-chip {
  background: #f0f2f7 !important; border: none !important; color: rgba(0,0,0,0.5) !important; border-radius: 20px !important;
  box-shadow: 3px 3px 7px rgba(0,0,0,0.11), -2px -2px 6px rgba(255,255,255,0.95) !important;
}
body.nm-DISABLED #sub-my-progress .mp-chip.selected,
body.nm-DISABLED #sub-my-progress .mp-chip.selected-gold { color: #c8a96e !important; box-shadow: inset 2px 2px 5px rgba(0,0,0,0.12), inset -2px -2px 5px rgba(255,255,255,0.95) !important; }
body.nm-DISABLED #sub-my-progress .mp-feedback-textarea {
  background: #f0f2f7 !important; border: none !important; color: #1a1a2e !important; border-radius: 14px !important;
  box-shadow: inset 3px 3px 8px rgba(0,0,0,0.12), inset -2px -2px 6px rgba(255,255,255,0.95) !important;
}
body.nm-DISABLED #sub-my-progress .mp-submit-btn {
  background: linear-gradient(135deg,#e8d5a3,#c4a35a) !important; border: none !important; color: #060c18 !important; border-radius: 14px !important;
}
body.nm-DISABLED #sub-my-progress .mp-feedback-saved-title { color: #1a1a2e !important; }
body.nm-DISABLED #sub-my-progress .mp-feedback-saved-sub { color: rgba(0,0,0,0.45) !important; }

/* Empty + loading */
body.nm-DISABLED #sub-my-progress .mp-empty-title { color: rgba(0,0,0,0.5) !important; }
body.nm-DISABLED #sub-my-progress .mp-empty-text { color: rgba(0,0,0,0.32) !important; }
body.nm-DISABLED #sub-my-progress .mp-loading-text { color: rgba(0,0,0,0.4) !important; }

/* ═══════════════════════════════════════════════════════════════
   INNER PAGE 9 — WORD SCIENCE  (#sub-word-science)
   Neumorphism (light) · intro auto-skipped in nm-mode
═══════════════════════════════════════════════════════════════ */

/* Surface */
body.nm-DISABLED #sub-word-science { background: #f0f2f7 !important; }
body.nm-DISABLED #sub-word-science #wsMainContent .sub-screen-bg { display: none !important; }
body.nm-DISABLED #sub-word-science #wsMainContent { background: #f0f2f7 !important; }
body.nm-DISABLED #sub-word-science #wsPanelContainer { background: #f0f2f7 !important; }
body.nm-DISABLED #sub-word-science * { text-shadow: none !important; }

/* Banner header */
body.nm-DISABLED #sub-word-science .sub-header { background-image: none !important; background-color: #f0f2f7 !important; box-shadow: 0 5px 14px rgba(0,0,0,0.07) !important; }
body.nm-DISABLED #sub-word-science .sub-header-title { color: #1a1a2e !important; }
body.nm-DISABLED #sub-word-science .sub-header-tag { color: #c8a96e !important; }
body.nm-DISABLED #sub-word-science .sub-back svg path { stroke: #1a1a2e !important; }

/* Tabs */
body.nm-DISABLED #sub-word-science #wsTabs {
  background: #f0f2f7 !important; border-bottom: none !important;
  box-shadow: 0 5px 13px rgba(0,0,0,0.06) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
body.nm-DISABLED #sub-word-science .ws-tab { color: rgba(0,0,0,0.4) !important; }
body.nm-DISABLED #sub-word-science .ws-tab.ws-active { color: #c8a96e !important; border-bottom-color: #c8a96e !important; }

/* Info / quote / highlight / effect / organ cards → neumorphic raised */
body.nm-DISABLED #sub-word-science .ws-info,
body.nm-DISABLED #sub-word-science .ws-organ-card,
body.nm-DISABLED #sub-word-science .ws-quote,
body.nm-DISABLED #sub-word-science .ws-highlight,
body.nm-DISABLED #sub-word-science .ws-effect-row,
body.nm-DISABLED #sub-word-science .ws-action-tile {
  background: #f0f2f7 !important; border: none !important; border-radius: 18px !important;
  box-shadow: 6px 6px 15px rgba(0,0,0,0.11), -5px -5px 12px rgba(255,255,255,0.96) !important;
}
body.nm-DISABLED #sub-word-science .ws-info::before,
body.nm-DISABLED #sub-word-science .ws-organ-card::before { display: none !important; }
body.nm-DISABLED #sub-word-science .ws-quote { border-left: 3px solid #c8a96e !important; }

body.nm-DISABLED #sub-word-science .ws-info-eyebrow { color: #c8a96e !important; }
body.nm-DISABLED #sub-word-science .ws-info-title { color: #1a1a2e !important; }
body.nm-DISABLED #sub-word-science .ws-info-body { color: rgba(0,0,0,0.68) !important; }
body.nm-DISABLED #sub-word-science .ws-organ-icon { color: #c8a96e !important; }
body.nm-DISABLED #sub-word-science .ws-organ-name { color: #a8854a !important; }
body.nm-DISABLED #sub-word-science .ws-organ-desc { color: rgba(0,0,0,0.62) !important; }
body.nm-DISABLED #sub-word-science .ws-quote { color: rgba(0,0,0,0.8) !important; }
body.nm-DISABLED #sub-word-science .ws-quote-src { color: #a8854a !important; }
body.nm-DISABLED #sub-word-science .ws-highlight-num { color: #c8a96e !important; }
body.nm-DISABLED #sub-word-science .ws-highlight-label { color: #a8854a !important; }
body.nm-DISABLED #sub-word-science .ws-highlight-sub { color: rgba(0,0,0,0.6) !important; }
body.nm-DISABLED #sub-word-science .ws-effect-label { color: #a8854a !important; }
body.nm-DISABLED #sub-word-science .ws-effect-body { color: rgba(0,0,0,0.65) !important; }
body.nm-DISABLED #sub-word-science .ws-effect-dot { background: #c8a96e !important; }

/* Phoneme chips */
body.nm-DISABLED #sub-word-science .ws-phoneme {
  background: #f0f2f7 !important; border: none !important; color: #a8854a !important; border-radius: 12px !important;
  box-shadow: 3px 3px 8px rgba(0,0,0,0.12), -2px -2px 6px rgba(255,255,255,0.95) !important;
}
body.nm-DISABLED #sub-word-science .ws-phoneme-label { color: rgba(0,0,0,0.4) !important; }

/* Action tiles */
body.nm-DISABLED #sub-word-science .ws-action-tile-head { color: #a8854a !important; }
body.nm-DISABLED #sub-word-science .ws-action-tile-title { color: #1a1a2e !important; }
body.nm-DISABLED #sub-word-science .ws-action-tile-sub { color: rgba(0,0,0,0.5) !important; }

/* Atelier search page */
body.nm-DISABLED #sub-word-science .ws-page-input { color: #1a1a2e !important; }
body.nm-DISABLED #sub-word-science .ws-page-input::placeholder { color: rgba(0,0,0,0.3) !important; }
body.nm-DISABLED #sub-word-science .ws-page-chip {
  background: #f0f2f7 !important; border: none !important; color: #a8854a !important;
  box-shadow: 3px 3px 7px rgba(0,0,0,0.11), -2px -2px 6px rgba(255,255,255,0.95) !important;
}
body.nm-DISABLED #sub-word-science .ws-page-tagline { color: rgba(0,0,0,0.5) !important; }
body.nm-DISABLED #sub-word-science .ws-page-brand { color: #1a1a2e !important; }

/* ── Community profile: neumorphic circles (avatar + stats) + icon depth ── */

/* Avatar → raised neumorphic CIRCLE (cream), not the flat gold square */
body:not(.nwsb-soc-glass) #sub-ig-profile .ig-prof-avatar-ring {
  background: #f0f2f7 !important;
  border-radius: 50% !important;
  padding: 6px !important;
  box-shadow: 7px 7px 16px rgba(0,0,0,0.16), -5px -5px 13px rgba(255,255,255,0.95) !important;
}
body:not(.nwsb-soc-glass) #sub-ig-profile .ig-prof-avatar,
body:not(.nwsb-soc-glass) #sub-ig-profile .ig-prof-avatar-ring img {
  border: none !important;
  border-radius: 50% !important;
}
body:not(.nwsb-soc-glass) #sub-ig-profile .ig-prof-initials {
  background: #f0f2f7 !important;
  color: #c8a96e !important;
  border: none !important;
  border-radius: 50% !important;
  box-shadow: inset 3px 3px 7px rgba(0,0,0,0.12), inset -2px -2px 5px rgba(255,255,255,0.9) !important;
}

/* Stat numbers → neumorphic circles */
body:not(.nwsb-soc-glass) #sub-ig-profile .ig-stats { gap: 6px !important; }
body:not(.nwsb-soc-glass) #sub-ig-profile .ig-stat .n {
  width: 54px; height: 54px;
  border-radius: 50% !important;
  display: flex; align-items: center; justify-content: center;
  background: #f0f2f7 !important;
  color: #c8a96e !important;
  font-size: 17px !important;
  margin: 0 auto 7px !important;
  box-shadow: 6px 6px 13px rgba(0,0,0,0.13), -4px -4px 10px rgba(255,255,255,0.95) !important;
}

/* Topbar icon buttons (chat / menu) → neumorphic raised circles */
body:not(.nwsb-soc-glass) #sub-ig-profile .ig-iconbtn {
  background: #f0f2f7 !important;
  border-radius: 50% !important;
  width: 40px !important; height: 40px !important;
  min-width: 40px !important; min-height: 40px !important;
  box-shadow: 4px 4px 10px rgba(0,0,0,0.13), -3px -3px 8px rgba(255,255,255,0.95) !important;
}
body:not(.nwsb-soc-glass) #sub-ig-profile .ig-iconbtn svg { stroke: #1a1a2e !important; }
body:not(.nwsb-soc-glass) #sub-ig-profile .ig-iconbtn img { filter: brightness(0) opacity(0.82) !important; }

/* Profile tab icons → neumorphic depth tiles */
body:not(.nwsb-soc-glass) #sub-ig-profile .ig-tab {
  margin: 6px 4px !important;
}
body:not(.nwsb-soc-glass) #sub-ig-profile .ig-tab svg,
body:not(.nwsb-soc-glass) #sub-ig-profile .ig-tab .ig-tab-img {
  padding: 8px !important;
  border-radius: 14px !important;
  box-sizing: content-box !important;
  background: #f0f2f7 !important;
  box-shadow: 4px 4px 9px rgba(0,0,0,0.12), -3px -3px 7px rgba(255,255,255,0.95) !important;
}
body:not(.nwsb-soc-glass) #sub-ig-profile .ig-tab.active svg,
body:not(.nwsb-soc-glass) #sub-ig-profile .ig-tab.active .ig-tab-img {
  box-shadow: inset 3px 3px 7px rgba(0,0,0,0.13), inset -2px -2px 5px rgba(255,255,255,0.95) !important;
}

/* Reels tab icon is a filled raster (becomes a black blob with the dark filter)
   — shrink it and tint gold so it matches the line-icon tabs */
body:not(.nwsb-soc-glass) #sub-ig-profile #ig-tab-reels .ig-tab-img {
  width: 20px !important; height: 20px !important; object-fit: contain !important;
  filter: brightness(0) saturate(100%) invert(72%) sepia(28%) saturate(560%) hue-rotate(2deg) brightness(92%) opacity(0.85) !important;
}

/* ── Follow buttons → neumorphism (white raised pill, gold text) ── */
body.nm-mode .ig-mini-follow,
body:not(.nwsb-soc-glass) #sub-ig-profile .ig-btn.primary {
  background: #f0f2f7 !important;
  color: #c8a96e !important;
  border: none !important;
  box-shadow: 4px 4px 10px rgba(0,0,0,0.13), -3px -3px 8px rgba(255,255,255,0.95) !important;
}
body.nm-mode .ig-mini-follow.following,
body:not(.nwsb-soc-glass) #sub-ig-profile .ig-btn.primary.following {
  color: rgba(0,0,0,0.5) !important;
  box-shadow: inset 3px 3px 7px rgba(0,0,0,0.13), inset -2px -2px 5px rgba(255,255,255,0.95) !important;
}
body.nm-mode .ig-mini-follow:active,
body:not(.nwsb-soc-glass) #sub-ig-profile .ig-btn.primary:active {
  box-shadow: inset 3px 3px 7px rgba(0,0,0,0.13), inset -2px -2px 5px rgba(255,255,255,0.95) !important;
}

/* ── Social home (Stats): fix faint loading text + broken dashed slots ── */
body.nm-mode:not(.nwsb-soc-glass) #sub-social-home #nwsb-home-reels-strip,
body.nm-mode:not(.nwsb-soc-glass) #sub-social-home #nwsb-home-reels-strip div { color: rgba(0,0,0,0.4) !important; }

/* Image-explainer slots → neumorphic inset drop-zones, ONLY when empty.
   Slots with a real image (.has-img) must keep their inline background-image. */
body.nm-mode:not(.nwsb-soc-glass) #sub-social-home .nwsb-explainer-slot:not(.has-img) {
  background: #f0f2f7 !important;
  border: none !important;
  box-shadow: inset 4px 4px 9px rgba(0,0,0,0.1), inset -3px -3px 7px rgba(255,255,255,0.9) !important;
}
body.nm-mode:not(.nwsb-soc-glass) #sub-social-home .nwsb-explainer-slot:not(.has-img) span { color: #a8854a !important; }

/* STATS topbar icon buttons (back / chat) → neumorphic raised circles */
body.nm-mode:not(.nwsb-soc-glass) #sub-social-home .ig-iconbtn {
  background: #f0f2f7 !important;
  border-radius: 50% !important;
  width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important;
  box-shadow: 4px 4px 10px rgba(0,0,0,0.13), -3px -3px 8px rgba(255,255,255,0.95) !important;
}
body.nm-mode:not(.nwsb-soc-glass) #sub-social-home .ig-iconbtn:active {
  box-shadow: inset 3px 3px 7px rgba(0,0,0,0.13), inset -2px -2px 5px rgba(255,255,255,0.92) !important;
}
body.nm-mode:not(.nwsb-soc-glass) #sub-social-home .ig-iconbtn svg { stroke: #1a1a2e !important; }
body.nm-mode:not(.nwsb-soc-glass) #sub-social-home .ig-iconbtn img { filter: brightness(0) opacity(0.8) !important; }

/* Hero stat-cube text already cream-styled; keep its label readable */
body.nm-mode:not(.nwsb-soc-glass) #sub-social-home .nwsb-section-hd { color: rgba(0,0,0,0.42) !important; }

/* ═══════════════════════════════════════════════════════════════
   EDIT PROFILE (social) — follows the App Theme (neo default / glass)
═══════════════════════════════════════════════════════════════ */

/* Panel surface — ALWAYS light neumorphism (was dark #060c18, making the
   dark text invisible in Fashion mode). */
#ss-panel-profile-edit { background: #f0f2f7 !important; }
#ss-panel-profile-edit .ss-panel-header { border-bottom-color: rgba(0,0,0,.06) !important; }
/* Banner is full-bleed: cancel the panel's 20px horizontal padding so the
   cover image runs edge-to-edge while the rest of the content stays inset. */
#ss-panel-profile-edit .nwsb-pe-cover {
  width: calc(100% + 40px) !important;
  margin-left: -20px !important;
  margin-right: -20px !important;
  margin-top: 0 !important;
}

/* Text colors (both themes) */
#ss-panel-profile-edit .ss-panel-title { color: #1a1a2e !important; }
#ss-panel-profile-edit .ss-panel-sub { color: rgba(0,0,0,.5) !important; }
#ss-panel-profile-edit .ss-panel-back { color: #1a1a2e !important; }
#ss-panel-profile-edit .ss-panel-back svg { stroke: #1a1a2e !important; }
#ss-panel-profile-edit .slbl { color: rgba(0,0,0,.45) !important; }
#ss-panel-profile-edit .nwsb-pe-label { color: #1a1a2e !important; }
#ss-panel-profile-edit .nwsb-pe-banner-txt { color: #a8854a !important; }

/* Inputs — flat light fields.
   NOTE: inset box-shadow + backdrop-filter on <input>/<textarea> render as a
   solid BLACK box on many Android/Chrome GPUs. So: NO inset shadow, NO
   backdrop-filter — just a clean recessed-tone field with a hairline border. */
#ss-panel-profile-edit input.ss-input,
#ss-panel-profile-edit textarea.ss-input,
#ss-panel-profile-edit .ss-input {
  background-color: #e7eaf1 !important; background-image: none !important;
  border: 1px solid rgba(0,0,0,0.07) !important; color: #1a1a2e !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  filter: none !important;
  box-shadow: none !important;
}
#ss-panel-profile-edit .ss-input::placeholder { color: rgba(0,0,0,.4) !important; }

/* ── NEUMORPHISM (default) ── */
#ss-panel-profile-edit .nwsb-pe-avatar {
  width: 92px !important; height: 92px !important; border-radius: 50% !important;
  background-color: #f0f2f7 !important; border: none !important;
  box-shadow: 8px 8px 18px rgba(0,0,0,.16), -6px -6px 14px rgba(255,255,255,.96) !important;
}
#ss-panel-profile-edit .nwsb-pe-btn {
  background: #f0f2f7 !important; border: none !important; color: #a8854a !important; border-radius: 14px !important;
  box-shadow: 4px 4px 10px rgba(0,0,0,.14), -3px -3px 8px rgba(255,255,255,.95) !important;
}
#ss-panel-profile-edit .nwsb-pe-banner {
  background-color: #f0f2f7 !important; border: none !important; border-radius: 18px !important;
  box-shadow: inset 3px 3px 7px rgba(0,0,0,.08) !important;
}
/* Once a banner image is set, drop the inset shadow entirely (the white glow
   bled onto the dark image) — clean edges. */
#ss-panel-profile-edit .nwsb-pe-banner[style*="url"] {
  box-shadow: none !important;
}
#ss-panel-profile-edit .nwsb-pe-banner-ico {
  background: rgba(255,255,255,.35) !important;
  border: 1px solid rgba(255,255,255,.55) !important;
  box-shadow: none !important;
}
#ss-panel-profile-edit .nwsb-pe-save {
  background: linear-gradient(135deg,#e8d5a3,#c4a35a) !important; border: none !important; color: #060c18 !important; border-radius: 16px !important;
  box-shadow: 5px 5px 14px rgba(0,0,0,.16), -4px -4px 10px rgba(255,255,255,.7) !important;
}
/* ── GLASSMORPHISM (glass theme only) ── */
body.nm-glass #ss-panel-profile-edit {
  background:
    radial-gradient(circle at 16% 10%, rgba(232,213,163,.32), transparent 42%),
    radial-gradient(circle at 86% 78%, rgba(200,232,245,.34), transparent 46%),
    linear-gradient(160deg, #e4ebf6 0%, #eef1f7 50%, #f2ece1 100%) !important;
}
body.nm-glass #ss-panel-profile-edit .nwsb-pe-avatar {
  background-color: rgba(255,255,255,.42) !important; border: 1.5px solid rgba(255,255,255,.85) !important;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  box-shadow: 0 10px 30px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.8) !important;
}
body.nm-glass #ss-panel-profile-edit .nwsb-pe-btn {
  background: rgba(255,255,255,.4) !important; border: 1px solid rgba(255,255,255,.7) !important; color: #a8854a !important;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  box-shadow: 0 6px 18px rgba(0,0,0,.08) !important;
}
body.nm-glass #ss-panel-profile-edit .ss-input {
  background: rgba(255,255,255,.45) !important; border: 1px solid rgba(255,255,255,.72) !important; color: #1a1a2e !important;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  box-shadow: 0 8px 24px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.6) !important;
}
body.nm-glass #ss-panel-profile-edit .nwsb-pe-banner {
  background-color: rgba(255,255,255,.35) !important; border: 1.5px dashed rgba(200,169,110,.7) !important;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  box-shadow: 0 8px 24px rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.6) !important;
}
body.nm-glass #ss-panel-profile-edit .nwsb-pe-banner-ico {
  background: rgba(255,255,255,.5) !important; box-shadow: 0 4px 12px rgba(0,0,0,.1) !important;
}
body.nm-glass #ss-panel-profile-edit .nwsb-pe-save {
  background: linear-gradient(135deg, rgba(232,213,163,.95), rgba(196,163,90,.95)) !important;
  backdrop-filter:none; box-shadow: 0 10px 28px rgba(232,213,163,.4) !important;
}
/* ═══════════════════════════════════════════════════════════════
   APP THEME: GLASSMORPHISM  (body.nm-glass)
   A second normal-mode theme alongside neumorphism.
═══════════════════════════════════════════════════════════════ */

/* Shared glass-surface gradient for normal-mode screens */
body.nm-glass.nm-mode #home-nm,
body.nm-glass #nm-settings-view,
body.nm-glass #sub-sound-library .sl-screen,
body.nm-glass #sub-nowssb-store .nss-body,
body.nm-glass #sub-practice .sp-player,
body.nm-glass #sub-routines .rt-screen,
body.nm-glass #sub-routine-detail .rt-screen,
body.nm-glass #sub-health-journey, body.nm-glass #sub-health-male,
body.nm-glass #sub-health-female, body.nm-DIS #sub-health-category,
body.nm-glass #sub-sound-bath .sb-player-bg,
body.nm-glass #sub-my-progress,
body.nm-glass #sub-word-science #wsMainContent,
body.nm-glass #sub-word-science #wsPanelContainer,
body.nm-glass #sub-profile #profileMainContent,
body.nm-glass #sub-people, body.nm-glass #sub-ig-profile,
body.nm-glass #sub-social-home, body.nm-glass #sub-reels-feed,
body.nm-glass #sub-social #nm-settings-view {
  background:
    radial-gradient(circle at 14% 8%, rgba(232,213,163,.22), transparent 40%),
    radial-gradient(circle at 88% 86%, rgba(200,232,245,.26), transparent 44%),
    linear-gradient(160deg, #e4ebf6 0%, #eef1f7 50%, #f2ece1 100%) !important;
}

/* Convert the major neumorphic cards/buttons to frosted glass */
body.nm-glass .nmh-streak-bar, body.nm-glass .nmh-practice, body.nm-glass .nmh-tile,
body.nm-glass .nmh-routine, body.nm-glass .nmh-quick-btn, body.nm-glass .nmh-trend-card,
body.nm-glass .nmh-offer-card, body.nm-glass .nmh-settings-btn, body.nm-glass .nmh-mode-btn,
body.nm-glass .nmh-logo,
body.nm-glass .nmset-hero, body.nm-glass .nmset-qtile, body.nm-glass .nmset-card,
body.nm-glass .nmset-back, body.nm-glass .nmset-signout,
body.nm-glass #sub-sound-library .sl-sentence-card,
body.nm-glass #sub-sound-library .sl-upgrade-banner,
body.nm-glass #sub-nowssb-store .ws-store-section, body.nm-glass #sub-nowssb-store .ms-home-card,
body.nm-glass #sub-practice .sp-glass-ring, body.nm-glass #sub-practice .sp-info-cell,
body.nm-glass #sub-practice .sp-listen-tip,
body.nm-glass #sub-routines .rt-card, body.nm-glass #sub-routine-detail .rt-card,
body.nm-glass #sub-health-journey .gsel-card,
body.nm-glass #sub-health-male .hcat-item, body.nm-glass #sub-health-female .hcat-item,
body.nm-glass #sub-my-progress .mp-greeting, body.nm-glass #sub-my-progress .mp-stat-box,
body.nm-glass #sub-my-progress .mp-session-row, body.nm-glass #sub-my-progress .mp-milestone,
body.nm-glass #sub-my-progress .mp-insight-wrap,
body.nm-glass #sub-word-science .ws-info, body.nm-glass #sub-word-science .ws-organ-card,
body.nm-glass #sub-word-science .ws-quote, body.nm-glass #sub-word-science .ws-highlight,
body.nm-glass #sub-word-science .ws-effect-row, body.nm-glass #sub-word-science .ws-action-tile,
body.nm-glass #sub-profile .sub-card,
body.nm-glass #sub-people .ig-userrow, body.nm-glass #sub-social-home .ig-userrow,
body.nm-glass #sub-social-home .nwsb-hero {
  background: rgba(255,255,255,.42) !important;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border: 1px solid rgba(255,255,255,.72) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.6) !important;
}

/* Glass section cards (settings groups) keep inner dividers subtle */
body.nm-glass .nmset-card .nmset-row { border-bottom-color: rgba(0,0,0,.06) !important; }

/* Glass icon tiles / pills → translucent */
body.nm-glass .nmset-ico, body.nm-glass .nmset-val,
body.nm-glass #sub-ig-profile .ig-stat .n,
body.nm-glass #sub-ig-profile .ig-prof-avatar-ring {
  background: rgba(255,255,255,.4) !important;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  border: 1px solid rgba(255,255,255,.6) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.08) !important;
}

/* Photo chooser + avatar picker sheets: lift above the bottom nav and add
   nav-height clearance so their bottom options aren't cut off */
#profilePhotoSheet  { z-index: 10000 !important; }
#profileAvatarPicker { z-index: 10001 !important; }
.pps-card, .pap-card {
  padding-bottom: calc(var(--nav-height, 58px) + max(env(safe-area-inset-bottom, 20px), 20px) + 22px) !important;
}

/* IG profile topbar: move the (other-user) back button onto the banner top-left
   so it's out of the topbar flow, and let the username shrink so the chat +
   hamburger buttons never get cut off */
body:not(.nwsb-soc-glass) #sub-ig-profile .ig-topbar { overflow: visible !important; padding-right: 8px !important; }
body:not(.nwsb-soc-glass) #sub-ig-profile #ig-prof-back {
  position: absolute !important;
  top: 56px !important;
  left: 14px !important;
  z-index: 25 !important;
  width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important;
  /* sits over the dark banner — drop the neumorphic white glow, use a clean dark shadow */
  background: rgba(255,255,255,0.92) !important;
  box-shadow: 0 2px 9px rgba(0,0,0,0.32) !important;
}
body.nwsb-soc-glass #sub-ig-profile #ig-prof-back {
  background: rgba(255,255,255,0.1) !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  border-radius: 50% !important;
  box-shadow: none !important;
}
body.nwsb-soc-glass #sub-ig-profile #ig-prof-back svg { stroke: #fff !important; }
body:not(.nwsb-soc-glass) #sub-ig-profile .ig-username {
  min-width: 0 !important;
  flex-shrink: 1 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* IG profile tabs: stay attached to the content (don't stick & overlap the
   banner/grid on scroll) */
body:not(.nwsb-soc-glass) #sub-ig-profile .ig-tabs { position: static !important; top: auto !important; }

/* Reels feed (incl. gated / empty state) → neumorphism */
body.nm-mode #sub-reels-feed { background: #f0f2f7 !important; }
body.nm-mode #sub-reels-feed .nwsb-reels-empty-title { color: #1a1a2e !important; }
body.nm-mode #sub-reels-feed .nwsb-reels-empty-sub { color: rgba(0,0,0,0.45) !important; }
body.nm-mode #sub-reels-feed .nwsb-post-reel-btn,
body.nm-mode:not(.nwsb-soc-glass) #sub-social-home .nwsb-post-reel-btn {
  background: #f0f2f7 !important;
  border: none !important;
  color: #c8a96e !important;
  border-radius: 16px !important;
  box-shadow: 6px 6px 14px rgba(0,0,0,0.13), -5px -5px 12px rgba(255,255,255,0.96) !important;
}
body.nm-mode #sub-reels-feed .nwsb-post-reel-btn:active,
body.nm-mode:not(.nwsb-soc-glass) #sub-social-home .nwsb-post-reel-btn:active {
  box-shadow: inset 4px 4px 10px rgba(0,0,0,0.13), inset -3px -3px 8px rgba(255,255,255,0.95) !important;
}
/* Reel cards → raised neumorphic frame (photo stays) */
body.nm-mode #sub-reels-feed .nwsb-reel-card,
body:not(.nwsb-soc-glass) #sub-ig-profile .nwsb-reel-card {
  border: none !important;
  box-shadow: 8px 8px 20px rgba(0,0,0,0.16), -5px -5px 14px rgba(255,255,255,0.9) !important;
}

/* ── Logo wrappers must be true neumorphic CIRCLES (defeat the global
   *{border-radius:0!important} reset that was squaring them) ── */
.nmh-logo{
  width:62px !important;
  height:62px !important;
  border-radius:50% !important;
  background-color:#f0f2f7 !important;
  /* contain (not cover) so the whole headphones logo shows without being cropped by the circle */
  background-size:84% !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  box-shadow:6px 6px 15px rgba(0,0,0,0.16), -5px -5px 13px rgba(255,255,255,0.98) !important;
}
.nm-logo-ring{
  border-radius:50% !important;
  background-color:#e4e6ed !important;
}

/* ═══════════════════════════════════════════════════════════════
   Kill the dark bar / shadow at the very bottom in NEUMORPHISM mode.
   The main bottom nav (#ig-bottomnav) is dark navy by default and the
   dark body shows through at the safe-area — both read as a "black shadow".
═══════════════════════════════════════════════════════════════ */
body.nm-mode { background: #f0f2f7 !important; }
body.nm-mode #ig-bottomnav {
  background: #f0f2f7 !important;
  border-top: 1px solid rgba(0,0,0,0.05) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
body.nm-mode #ig-bottomnav .ig-nav-label { color: rgba(0,0,0,0.42) !important; }
body.nm-mode #ig-bottomnav .ig-nav-btn.active .ig-nav-label { color: #c8a96e !important; }

/* Unconditional, theme-independent: the frosted-glass blur behind a
   semi-transparent dark nav is what reads as a smudged "shadow" sitting on
   top of the page content. Kill the blur + any shadow on BOTH bottom nav
   bars in every mode/theme, not just nm-mode, so this can't resurface. */
#ig-bottomnav, #ig-social-nav {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  box-shadow: none !important;
}
body:not(.nm-mode) #ig-bottomnav, body:not(.nm-mode) #ig-social-nav {
  background: #060c18 !important;
}
/* Fashion (dark) mode: the social nav is dark navy, so its LABELS and ICONS
   must be light — the global light-nav styling (black text, dark icons) was
   invisible on the dark bar. */
body:not(.nm-mode) #ig-social-nav .ig-social-btn span { color: rgba(255,255,255,0.72) !important; }
body:not(.nm-mode) #ig-social-nav .ig-social-btn.active span { color: #e8d5a3 !important; }
body:not(.nm-mode) #ig-social-nav .ig-social-img { filter: brightness(0) invert(1) !important; opacity: 0.72 !important; }
body:not(.nm-mode) #ig-social-nav .ig-social-btn.active .ig-social-img { filter: brightness(0) saturate(100%) invert(78%) sepia(35%) saturate(520%) hue-rotate(2deg) brightness(95%) !important; opacity: 1 !important; }
body:not(.nm-mode) #ig-social-nav #igsn-me-av svg { stroke: rgba(255,255,255,0.72) !important; }

/* Kill the dark app-bg vignette in neumorphism mode (it bled a dark band at
   the bottom of light screens / splash). */
body.nm-mode .app-bg::after { display:none !important; }
body.nm-mode .app-bg { background-color:#f0f2f7 !important; }
/* ── The black band at the bottom of LIGHT screens ──────────────────────────
   The root html/body bg is dark (#060c18) and the app-bg has a dark vignette,
   needed for the Fashion (dark) screens. On light screens (login, signup,
   onboarding, neumorphism home) the screen is capped at --full-height, and the
   bottom gap showed that dark bg as a black band. `:has()` isn't supported on
   older Android WebViews, so a plain body class (toggled in goTo) drives it: on
   any light screen the whole fallback stack — html, body, app-bg — goes light
   and the dark vignette is killed, so no gap can ever read as a black band. */
html.nwsb-lightbg, body.nwsb-lightbg { background:#e4e6ed !important; }
body.nwsb-lightbg .app-bg::after,
body.nwsb-lightbg .app-bg::before { display:none !important; }
body.nwsb-lightbg .app-bg { background:#e4e6ed !important; opacity:1 !important; background-image:none !important; }
body.nwsb-lightbg .app-bg-layer2 { background:#e4e6ed !important; opacity:0 !important; background-image:none !important; }

/* ── THE actual "black band at the bottom, everywhere" ─────────────────────
   The guide bottom-sheets (#pgGuide, .wl-overlay) live at body level and sit
   slid off-screen at the bottom when closed (transform:translateY(100%)). Their
   dark panels carry a big UPWARD box-shadow (0 -12px 48px rgba(0,0,0,.75)) that
   still cast a dark band up into the viewport on EVERY screen. Hide the closed
   sheet entirely (kills its shadow); delay the visibility flip on close so the
   slide-out still animates. */
#pgGuide { visibility:hidden; transition:transform .38s cubic-bezier(0.32,0.72,0,1), visibility 0s .38s; }
#pgGuide.open { visibility:visible; transition:transform .38s cubic-bezier(0.32,0.72,0,1), visibility 0s 0s; }
.wl-overlay { visibility:hidden; transition:background .38s cubic-bezier(0.4,0,0.2,1), visibility 0s .38s; }
.wl-overlay.open { visibility:visible; transition:background .38s cubic-bezier(0.4,0,0.2,1), visibility 0s 0s; }

/* ── Fashion-home tile icons: glass wrapper, IN-FLOW (no overlap), original icon size ── */
.home-tile-icon {
  position: relative !important; z-index: 3 !important;
  width: 52px !important; height: 52px !important; margin: 0 0 10px 0 !important;
  padding: 8px !important; box-sizing: border-box !important; border-radius: 14px !important; opacity: 1 !important;
  background: rgba(255,255,255,0.13) !important;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  border: 1px solid rgba(255,255,255,0.26) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.32) !important;
  display: inline-flex !important; align-items: center; justify-content: center; flex-shrink: 0;
}
.home-tile-icon img { width: 36px !important; height: 36px !important; object-fit: contain !important; }

/* ════════ STORE / ARCHIVE pages: stop the bottom nav (58px) from overlapping
   CTAs, and fix the cart action buttons that stretched tall ════════ */
/* Cart ♡ / ✕ buttons — force square (flex was stretching them tall) */
.cwp-item-btn {
  width: 38px !important; height: 38px !important; border-radius: 10px !important;
  align-self: center !important; flex-shrink: 0 !important; padding: 0 !important;
}
/* Lift the cart checkout bar above the bottom nav */
.cwp-checkout-bar { bottom: calc(58px + env(safe-area-inset-bottom, 0px)) !important; }
/* Archive / wishlist / order-history intro CTAs — clear the nav */
.oh-cat-bottom, .wish-cat-bottom, .cart-intro-bottom {
  padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px) + 28px) !important;
}

/* ── Subscription plan banner — video, text on the right-middle, same
   language as the Today's Trending banner (.nmh-trend-banner). ── */
.ss-plan-banner {
  position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 22px !important;
  overflow: hidden; margin: 16px 0; border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 14px 36px rgba(0,0,0,0.42);
}
.ss-plan-banner-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ss-plan-banner-fade { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 45%, rgba(4,10,24,0.4) 100%); pointer-events: none; }
.ss-plan-banner-text { position: absolute; top: 50%; right: 8%; transform: translateY(-50%); z-index: 2; text-align: right; max-width: 50%; }
.ss-plan-banner-name {
  font-family: 'DM Sans', sans-serif; font-size: 19px; font-weight: 800; color: #fff;
  line-height: 1.3; text-shadow: 0 2px 10px rgba(0,0,0,0.6);
}
.ss-plan-banner-price {
  font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 600; color: #e8d5a3;
  margin-top: 3px; text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

/* ── Word Atelier — video banner: square corners (no rounding), with a
   plain store-icon+text label (no pill background) parked middle-right —
   same bare icon/word treatment as the Today's Trending banner. ── */
.nss-vid-banner {
  position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
  flex-shrink: 0; background: #000; border-radius: 0 !important;
}
.nss-vid-banner-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.nss-vid-banner-fade { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 45%, rgba(4,10,24,0.45) 100%); pointer-events: none; }
/* Icon stays on the LEFT of the text (natural flex order, both vertically
   centered together the normal way). The wrap is anchored from the LEFT
   instead of the right, so the icon's position never depends on how long
   the tagline is — only the text grows further right as it cycles. */
.nss-vid-banner-pill-wrap { position: absolute; top: 50%; left: 56%; transform: translateY(-50%); z-index: 2; }
.nss-vid-banner-pill { display: flex; align-items: center; gap: 8px; }
.nss-vid-banner-pill-icon { width: 24px; height: 24px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5)); }
.nss-vid-banner-pill-text {
  font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 800; color: #fff;
  white-space: nowrap; text-shadow: 0 2px 10px rgba(0,0,0,0.6);
}
/* Icon stays put — only the text cycles, dashing in from the right on
   each change. Reuses the Shop Now banner's dash-in keyframe. */
.nss-vid-banner-pill-text.dash-in { animation: nmhTrendWordDash .6s cubic-bezier(.34,1.56,.64,1) both; }
/* AI Prescription's taglines are longer than the short 1-2 word labels
   this component was built for (Buy Words, Request Words…) — smaller,
   wrapping text so it never runs off the right edge of the video. */
#rxVidBannerText { font-size: 12px !important; white-space: normal !important; max-width: 130px; line-height: 1.3; }

/* ── Word Atelier — "Request a Word" banner (replaces the removed giant
   All Words pill grid) plus the page-end disclaimer/footer block. ── */
.rm-req-banner {
  display: flex; align-items: center; gap: 14px;
  background: #000; border: 1px solid rgba(232,213,163,0.16);
  border-radius: 20px !important; padding: 18px 16px;
  margin: 20px 0; cursor: pointer; box-shadow: 0 10px 28px rgba(0,0,0,0.4);
}
.rm-req-banner-icon {
  width: 44px; height: 44px; border-radius: 50% !important; flex-shrink: 0;
  background: rgba(232,213,163,0.1); border: 1px solid rgba(232,213,163,0.28);
  display: flex; align-items: center; justify-content: center;
}
.rm-req-banner-text { flex: 1; min-width: 0; }
.rm-req-banner-eyebrow {
  font-family: 'DM Sans', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: rgba(232,213,163,0.7); margin-bottom: 4px;
}
.rm-req-banner-title { font-family: 'DM Sans', sans-serif; font-size: 17px; font-weight: 800; color: #fff; }
.rm-req-banner-sub { font-family: 'DM Sans', sans-serif; font-size: 11.5px; color: rgba(255,255,255,0.45); margin-top: 2px; }
.rm-req-banner-btn {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
  border: none; border-radius: 999px !important; background: #e8d5a3; color: #060c18;
  font-family: 'DM Sans', sans-serif; font-size: 12.5px; font-weight: 700; padding: 10px 14px; cursor: pointer;
}

/* ── Header "customize background" icon — opens the same Fashion
   background picker used in Settings, applied as this screen's own
   backdrop (#rmBg / #msBg) once chosen. ── */
.rm-bg-customize-btn, .ms-bg-customize-btn {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px !important; overflow: hidden;
  border: 1px solid rgba(232,213,163,0.32); background: rgba(255,255,255,0.06);
  padding: 0; cursor: pointer;
}
.rm-bg-customize-btn img, .ms-bg-customize-btn img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Header cart icon, left of customize — same footprint as the customize
   button so the two sit evenly in the header's icon group. */
.rm-cart-btn, .ms-cart-btn {
  position: relative; width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px !important;
  border: 1px solid rgba(232,213,163,0.32); background: rgba(255,255,255,0.06);
  padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.rm-cart-btn .nss-icon-badge, .ms-cart-btn .nss-icon-badge { top: -4px; right: -4px; }
/* Meaning Store's header centers its title between two equal-width side
   buttons (back + customize) — match the customize icon to the back
   button's 44px so the middle title lands on the row's true center. */
#sub-meaning-store .sub-header.nav-bar .ms-bg-customize-btn {
  width: 44px; height: 44px; border-radius: 50% !important;
}

/* Fashion Background picker — Default/Black toggle switch */
.fbg-mode-cards {
  display: flex; gap: 12px; margin-top: 16px;
  overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
}
.fbg-mode-cards::-webkit-scrollbar { display: none; }
.fbg-mode-card {
  flex: 0 0 calc(50% - 6px); scroll-snap-align: start; min-width: 0;
  border-radius: 14px !important; padding: 16px 14px; cursor: pointer;
  border: 1px solid rgba(255,255,255,0.14); transition: border-color 0.2s, box-shadow 0.2s;
}
.fbg-mode-card-default {
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.fbg-mode-card-black {
  background: #000; border-color: rgba(255,255,255,0.1);
}
.fbg-mode-card.on { border-color: #e8d5a3; box-shadow: 0 0 0 1px rgba(232,213,163,0.35); }
.fbg-mode-card-icon {
  width: 34px; height: 34px; min-width: 0 !important; min-height: 0 !important;
  border-radius: 50% !important; background: rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center; margin-bottom: 10px;
}
.fbg-mode-card-label { font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 700; color: #fff; }
.fbg-mode-card-sub { font-family: 'DM Sans', sans-serif; font-size: 10.5px; color: rgba(255,255,255,.45); margin-top: 2px; }

/* ── Fashion Background apply toast — black pill, customize icon on the
   left, gold checkmark badge instead of a bare "✓" character. ── */
.fbg-toast {
  position: fixed; left: 50%; bottom: 90px; z-index: 99999;
  display: flex; align-items: center; gap: 10px;
  background: #000; border: 1px solid rgba(255,255,255,0.1);
  padding: 8px 16px 8px 8px; border-radius: 30px !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.5);
  max-width: calc(100vw - 40px);
  opacity: 0; transform: translateX(-50%) translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}
.fbg-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.fbg-toast-icon {
  width: 30px; height: 30px; min-width: 0 !important; min-height: 0 !important;
  border-radius: 50% !important; overflow: hidden; flex-shrink: 0;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(232,213,163,0.3);
  display: flex; align-items: center; justify-content: center;
}
.fbg-toast-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fbg-toast-text { font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 700; color: #fff; white-space: nowrap; }
.fbg-toast-check {
  width: 20px; height: 20px; min-width: 0 !important; min-height: 0 !important;
  border-radius: 50% !important; background: #e8d5a3; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
/* Theme-switch toast — white pill (matches the "Background updated"
   Fashion Background toast style), real theme-preview thumbnail on the
   left instead of a generic icon, gold checkmark on the right. */
.nwsb-theme-toast {
  position: fixed; left: 50%; bottom: 90px; z-index: 99999;
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid rgba(0,0,0,0.06);
  padding: 8px 16px 8px 8px; border-radius: 30px !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.35);
  max-width: calc(100vw - 40px);
  opacity: 0; transform: translateX(-50%) translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}
.nwsb-theme-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.nwsb-theme-toast-icon {
  width: 30px; height: 30px; min-width: 0 !important; min-height: 0 !important;
  border-radius: 50% !important; overflow: hidden; flex-shrink: 0;
  background: #060c18; border: 1px solid rgba(0,0,0,0.1);
  display: flex; align-items: center; justify-content: center;
}
.nwsb-theme-toast-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nwsb-theme-toast-text { font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 700; color: #060c18; white-space: nowrap; }
.nwsb-theme-toast-check {
  width: 20px; height: 20px; min-width: 0 !important; min-height: 0 !important;
  border-radius: 50% !important; background: #e8d5a3; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.rm-disclaimer { margin: 28px 0 0; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.08); }
.rm-disclaimer-title {
  font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: rgba(255,255,255,0.4); margin-bottom: 8px;
}
.rm-disclaimer-text { font-family: 'DM Sans', sans-serif; font-size: 11px; line-height: 1.7; color: rgba(255,255,255,0.32); }
.rm-footer {
  margin: 24px 0 4px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.06);
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
}
.rm-footer-brand { font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 800; }
.rm-footer-brand .b { color: #fff; }
.rm-footer-brand .t { color: #e8d5a3; }
.rm-footer-copy { font-family: 'DM Sans', sans-serif; font-size: 10.5px; color: rgba(255,255,255,0.3); }

/* ── Store chooser — Verification/Ebooks/Subscription quick-access cards.
   Same black-banner language as the request/category banners elsewhere. ── */
.nss-mini-card {
  display: flex; align-items: center; gap: 14px;
  background: #000; border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px !important; padding: 16px; margin: 0 0 12px;
  cursor: pointer; box-shadow: 0 8px 22px rgba(0,0,0,0.32);
}
.nss-mini-card-icon {
  width: 44px; height: 44px; border-radius: 12px !important; flex-shrink: 0;
  background: rgba(232,213,163,0.1); border: 1px solid rgba(232,213,163,0.28);
  display: flex; align-items: center; justify-content: center;
}
/* Cards whose icon is a real image (not a line SVG) get a bigger wrapper and
   a taller card, so the artwork reads properly instead of being squeezed
   into a 44px chip. */
.nss-mini-card:has(.nss-mini-card-icon img) { padding: 20px 16px; }
.nss-mini-card-icon:has(img) {
  width: 74px; height: 74px; border-radius: 16px !important;
  background: transparent; border: none; overflow: hidden;
}
.nss-mini-card-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nss-mini-card-text { flex: 1; min-width: 0; }
.nss-mini-card-eyebrow {
  font-family: 'DM Sans', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: rgba(232,213,163,0.7); margin-bottom: 4px;
}
.nss-mini-card-title { font-family: 'DM Sans', sans-serif; font-size: 16px; font-weight: 800; color: #fff; }
.nss-mini-card-sub { font-family: 'DM Sans', sans-serif; font-size: 11px; color: rgba(255,255,255,0.45); margin-top: 2px; line-height: 1.4; }
.nss-mini-card-arrow { flex-shrink: 0; color: rgba(255,255,255,0.3); }

/* ── Word Atelier — category section headers: a plain black banner card
   (replaces the old rotating character/photo banners) with the title set
   in the same font treatment as the home hero ("Begin Your Healing Path")
   and the subtitle in that hero's small caps tagline style. ── */
.rm-cat-banner {
  background: #000; border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px !important; padding: 18px;
  margin: 22px 0 12px; box-shadow: 0 8px 22px rgba(0,0,0,0.32);
  display: flex; align-items: center; gap: 14px;
}
/* The clip heading every meaning's page (app/js/part026.js), on the same
   16px corners and 20px rhythm as the banners stacked below it. */
.ms-meaning-vid {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  overflow: hidden; box-sizing: border-box;
  margin: 0 0 20px; background: #000;
  border-radius: 16px !important;
}
.ms-meaning-vid video {
  position: absolute; inset: 0;
  width: 100% !important; height: 100% !important;
  object-fit: cover; display: block;
}

/* The word page's top banner is a clip (app/js/part012.js). The still it
   replaced set the slider's height from its own intrinsic size; a video
   has none to give, so the frame is stated here. */
.rmd-slide video {
  width: 100%; aspect-ratio: 16 / 9;
  display: block; object-fit: cover;
}

/* A clip after every fifth category row (app/js/part010.js), wearing the
   same frame and corners as the banner that heads each row so it reads as
   part of the same column. */
.rm-row-vid {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  overflow: hidden; box-sizing: border-box;
  margin: 22px 0 12px; background: #000;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px !important; box-shadow: 0 8px 22px rgba(0,0,0,0.32);
}
.rm-row-vid video {
  position: absolute; inset: 0;
  width: 100% !important; height: 100% !important;
  object-fit: cover; display: block;
}
.rm-cat-banner-logo {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 50% !important; overflow: hidden;
  background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center;
}
.rm-cat-banner-logo img { width: 60%; height: 60%; object-fit: contain; display: block; }
.rm-cat-banner-divider { width: 1px; align-self: stretch; margin: 4px 0; background: rgba(255,255,255,0.25); flex-shrink: 0; }
.rm-cat-banner-text { flex: 1; min-width: 0; }
.rm-cat-banner-title {
  font-family: var(--font-primary, 'Quattrocento Sans', 'DM Sans', sans-serif);
  font-size: 22px; font-weight: 500; color: #fff; line-height: 1.2;
}
.rm-cat-banner-sub {
  font-size: 11px; font-weight: 300; letter-spacing: 2px; text-transform: uppercase;
  color: rgba(255,255,255,0.4); margin-top: 6px;
}

/* ── Meaning Store's description banner — black card that rotates: the
   full overview first, then each step, dash-in from the right, dots to
   show progress. Same visual family as the category banners. ── */
.rm-desc-banner {
  background: #000; border: 1px solid rgba(255,255,255,0.07);
  border-radius: 18px !important; padding: 18px; margin: 16px 0;
  box-shadow: 0 8px 22px rgba(0,0,0,0.32);
  position: relative; overflow: hidden;
}
.rm-desc-banner-row { display: flex; align-items: flex-start; gap: 14px; position: relative; }
.rm-desc-banner-left { position: relative; width: 40px; flex-shrink: 0; }
.rm-desc-banner-logo {
  width: 40px; height: 40px; min-width: 0 !important; min-height: 0 !important;
  border-radius: 50% !important; overflow: hidden;
  background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 2;
}
.rm-desc-banner-logo img { width: 60%; height: 60%; object-fit: contain; display: block; }
/* Bare, oversized step number/star — no chip or wrapper, sits behind the
   icon and deliberately bleeds past the banner's own edge so it reads as
   cut off, confined to the left column only (never crosses the divider). */
.rm-desc-banner-bignum {
  position: absolute; top: 26px; left: -8px; z-index: 1;
  font-family: 'DM Sans', sans-serif; font-weight: 800; font-size: 92px; line-height: 0.8;
  color: rgba(232,213,163,0.28); white-space: nowrap; pointer-events: none;
}
.rm-desc-banner-divider { width: 1px; align-self: stretch; margin: 2px 0; background: rgba(255,255,255,0.15); flex-shrink: 0; position: relative; z-index: 2; }
.rm-desc-banner-body { flex: 1; min-width: 0; }
.rm-desc-banner-eyebrow {
  font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: #e8d5a3; margin-bottom: 8px;
}
.rm-desc-banner-text {
  font-family: 'DM Sans', sans-serif; font-size: 13px; line-height: 1.7;
  color: rgba(255,255,255,0.62); min-height: 66px;
}
.rm-desc-banner-text.dash-in { animation: nmhTrendWordDash .6s cubic-bezier(.34,1.56,.64,1) both; }
.rm-desc-banner-dots {
  display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 14px;
}
.rm-desc-banner-dots .rm-desc-dot {
  width: 5px; height: 5px; min-width: 0; min-height: 0; flex-shrink: 0;
  border-radius: 50% !important; background: rgba(255,255,255,0.25); transition: all 0.25s;
}
.rm-desc-banner-dots .rm-desc-dot.on { background: #e8d5a3; width: 16px; border-radius: 3px !important; }

/* ── Meaning Store's "locked" preview — a real product page shown in the
   same full-page #msDetailPanel an unlocked word's real content later
   replaces: hero image, description, Add to Cart / Wishlist, request
   banner, disclaimer, footer — same sections as the rest of the store. ── */
.ms-locked-page { display: flex; flex-direction: column; }
/* Image on the left, divider, word + one-line blurb on the right — same
   horizontal "icon + divider + text" language as the other banners. */
.ms-locked-hero-banner {
  display: flex; align-items: center; gap: 14px; margin-bottom: 20px;
  background: #000; border: 1px solid rgba(255,255,255,0.07); border-radius: 16px !important; padding: 14px;
}
.ms-locked-hero-imgwrap {
  position: relative; width: 92px; aspect-ratio: 4 / 5; border-radius: 12px !important;
  overflow: hidden; background: #0a1120; border: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
}
.ms-locked-hero-imgwrap img { width: 100%; height: 100%; object-fit: contain; display: block; opacity: 0.95; }
.ms-locked-hero-badge {
  position: absolute; top: 6px; left: 6px; display: flex; align-items: center; gap: 4px;
  background: rgba(6,12,24,0.75); border: 1px solid rgba(232,213,163,0.3); border-radius: 20px !important;
  padding: 4px 8px 4px 6px; font-family: 'DM Sans', sans-serif; font-size: 9px; font-weight: 700;
  letter-spacing: 0.4px; color: #e8d5a3;
}
.ms-locked-hero-divider { width: 1px; align-self: stretch; background: rgba(255,255,255,0.1); flex-shrink: 0; }
.ms-locked-hero-textcol { flex: 1; min-width: 0; }
.ms-locked-hero-word { font-family: 'DM Sans', sans-serif; font-size: 22px; font-weight: 800; color: #e8d5a3; margin-bottom: 6px; line-height: 1.1; }
.ms-locked-hero-blurb { font-family: 'DM Sans', sans-serif; font-size: 12px; color: rgba(255,255,255,0.5); line-height: 1.55; }
.ms-locked-info { margin-bottom: 24px; }
.ms-locked-eyebrow {
  font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: rgba(200,232,245,0.4); margin-bottom: 8px;
}
.ms-locked-price { font-family: 'DM Sans', sans-serif; font-size: 24px; font-weight: 800; color: #e8d5a3; margin-bottom: 14px; }
.ms-locked-desc { font-family: 'DM Sans', sans-serif; font-size: 13px; color: rgba(255,255,255,0.55); line-height: 1.7; margin-bottom: 22px; }
.ms-locked-actions { display: flex; align-items: stretch; gap: 10px; }
.ms-locked-wish-btn {
  width: 52px; height: 52px; min-width: 0 !important; min-height: 0 !important; flex-shrink: 0;
  border-radius: 14px !important; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.ms-locked-wish-btn.wishlisted { background: rgba(220,80,80,0.12); border-color: rgba(220,80,80,0.4); }
.ms-locked-cart-btn {
  flex: 1; min-width: 0; background: #e8d5a3; border: none; border-radius: 0 !important;
  font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 700; color: #060c18;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
}
.ms-locked-cart-btn.carted { background: rgba(255,255,255,0.1); color: #fff; border: 1px solid rgba(255,255,255,0.15); }
.ms-locked-cart-btn-add, .ms-locked-cart-btn-in { display: none; align-items: center; gap: 8px; }
.ms-locked-cart-btn-add { display: inline-flex; }
.ms-locked-cart-btn.carted .ms-locked-cart-btn-add { display: none; }
.ms-locked-cart-btn.carted .ms-locked-cart-btn-in { display: inline-flex; }
.ms-locked-buynow-btn {
  width: 100%; margin-top: 10px; background: #fff; border: none; border-radius: 0 !important;
  padding: 15px 20px; font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 700; color: #060c18;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
}


/* ── Signature word card — the most expensive item in each category,
   using that category's old banner photo as its own product image. Gold
   glassmorphism sets it apart from the plain word cards beside it. ── */
.rm-word-card-signature {
  border: 1.5px solid rgba(232,213,163,0.55) !important;
  box-shadow: 0 6px 24px rgba(0,0,0,0.5), 0 0 22px rgba(232,213,163,0.28), inset 0 1px 0 rgba(255,255,255,0.25);
}
.rm-word-card-signature .rm-word-card-body {
  background: rgba(232,213,163,0.14) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(232,213,163,0.35) !important;
}
.rm-word-card-signature .rm-word-card-name { color: #f5e6c8; }
.rm-word-card-signature .rm-word-card-root { color: rgba(232,213,163,0.8); }
.rm-word-card-signature-tag {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  font-family: 'DM Sans', sans-serif; font-size: 8px; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase; color: #060c18; background: #e8d5a3;
  padding: 3px 8px; border-radius: 999px !important;
}

/* ── Meaning Store's own signature card — same gold-glass treatment,
   scoped to .ms-card's own child class names. ── */
.ms-card-signature {
  border: 1.5px solid rgba(232,213,163,0.55) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4), 0 0 18px rgba(232,213,163,0.25);
}
.ms-card-signature .ms-card-word { color: #f5e6c8; }
.ms-card-signature .ms-card-root { color: rgba(232,213,163,0.65); }
.ms-card-signature-tag {
  position: absolute; top: 6px; left: 6px; z-index: 2;
  font-family: 'DM Sans', sans-serif; font-size: 7px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: #060c18; background: #e8d5a3;
  padding: 2px 6px; border-radius: 999px !important;
}

/* ── Meaning Store card grid: horizontal-scrolling row (like the Word
   Atelier's rows) instead of a static 3-column grid, and full-opacity
   product images — the default 0.3/0.48 opacity read as "images aren't
   loading at all" once a custom page background was showing through. ── */
#msMeaningGrid .ms-grid {
  display: flex !important; flex-wrap: nowrap !important; gap: 12px !important;
  overflow-x: auto !important; overflow-y: visible !important;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  padding: 6px 0 10px !important; margin: 0 -20px !important;
  padding-left: 20px !important; padding-right: 20px !important;
}
#msMeaningGrid .ms-card { flex: 0 0 128px !important; width: 128px !important; scroll-snap-align: start; }
#msMeaningGrid .ms-card-img,
#msMeaningGrid .ms-card.unlocked .ms-card-img,
#msMeaningGrid .ms-card-signature .ms-card-img,
#msMeaningGrid .ms-card-signature.unlocked .ms-card-img { opacity: 1 !important; }

/* ── Subscription plans: plain horizontal swipe carousel — no 3D/perspective,
   just a normal scroll-snap row. Same on normal home and Fashion home;
   this screen doesn't take on the neumorphic theme either way. ── */
#ss-plan-cards {
  display: flex !important; flex-direction: row !important; gap: 14px !important;
  overflow-x: auto !important; overflow-y: visible;
  -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory;
  padding: 6px 2px 16px !important; scrollbar-width: none; margin: 6px 0 16px;
}
#ss-plan-cards::-webkit-scrollbar { display: none; }
#ss-plan-cards .plan-card {
  flex: 0 0 100% !important; max-width: none; margin-bottom: 0 !important;
  scroll-snap-align: center; box-sizing: border-box; align-self: flex-start;
}
.ss-plan-dots {
  display: flex !important; align-items: center; justify-content: center; gap: 6px;
  margin: -8px 0 16px;
}
.ss-plan-dots .ss-plan-dot {
  width: 6px; height: 6px; min-width: 0; min-height: 0; flex-shrink: 0;
  border-radius: 50% !important; background: rgba(255,255,255,0.25); transition: all 0.25s; cursor: pointer;
}
.ss-plan-dots .ss-plan-dot.on { background: #e8d5a3; width: 18px; border-radius: 3px !important; }

/* ── Hide scrollbars app-wide (scrolling still works via touch) ── */
*::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; }
* { scrollbar-width: none !important; -ms-overflow-style: none !important; }

/* #msMeaningBody/#mpBody/#routinesBody/#routineDetailBody are display:flex;
   flex-direction:column (app.css) so a footer-style element can margin-top:auto
   to the bottom on short content. Flex items default to flex-shrink:1 though,
   so on TALL content (more common — banners, grids, cards) every child gets
   squeezed to fit the viewport instead of the page just scrolling, which on
   a low min-height child (e.g. a request banner pinned to 44px by the
   accessibility min-height rule) crushes it down to that floor and spills
   its real content out above/below the collapsed box. Scrollable columns
   should never shrink their children below natural size — pin it here once
   instead of chasing flex-shrink:0 onto every individual child. */
#msMeaningBody > *, #mpBody > *, #routinesBody > *, #routineDetailBody > * { flex-shrink: 0 !important; }
/* Same flex-column-scroll shape (.nss-body is display:flex;flex-direction:
   column;overflow-y:auto, and .nss-sections nested inside it is too) — the
   Store chooser page gained enough new content (3 more cards + disclaimer +
   footer) to risk the identical shrink-to-fit bug. */
.nss-body > *, .nss-sections > * { flex-shrink: 0 !important; }
/* ── Profile avatar edit pencil — always a perfect circle ── */
#profilePhotoPencil, .ps-avatar-pencil {
  width: 30px !important; height: 30px !important; border-radius: 50% !important;
  top: auto !important; flex-shrink: 0 !important;
}

/* ════════ HEALING BODY MAP — glass image + glowing organ points ════════ */
.hbm-figure {
  position: relative; width: 100%; max-width: 280px !important; margin: 0 auto;
  aspect-ratio: 788 / 1182;
  background-size: contain; background-position: center; background-repeat: no-repeat;
  /* the body PNG is transparent glass — give it a bright outline + glow so it is clearly visible */
  filter: brightness(1.28) contrast(1.12)
          drop-shadow(0 0 1px rgba(190,225,255,.95))
          drop-shadow(0 0 16px rgba(120,180,255,.55));
}
/* no backdrop glow behind the body — the glass image reads fine on the dark bg */
.hbm-figure::before { display: none !important; }
.hbm-figure.mini { max-width: 118px; }
.hbm-figure.mini::before { display: none !important; }
.hbm-point {
  position: absolute; transform: translate(-50%, -50%); aspect-ratio: 1 / 1;
  border-radius: 50% !important; cursor: pointer;
  /* soft glow via the radial gradient itself — NO filter:blur (it re-blurred
     every frame while pulsing, hammering the GPU over the organ video). */
  background: radial-gradient(circle, var(--organ-color) 0%, var(--organ-color) 10%, rgba(0,0,0,0) 62%);
  opacity: 0; transition: opacity .5s ease; pointer-events: auto;
}
.hbm-figure.mini .hbm-point { pointer-events: none; }
.hbm-point.active { opacity: .9; animation: hbmPointPulse 2.6s ease-in-out infinite; }
@keyframes hbmPointPulse {
  0%, 100% { opacity: .42; transform: translate(-50%, -50%) scale(.82); }
  50%      { opacity: .95; transform: translate(-50%, -50%) scale(1.14); }
}
/* give the glass body image more room than the old 180px SVG */
.hbm-svg-wrap { width: min(76vw, 280px) !important; margin: 0 auto 16px !important; }

/* ── Store/archive back buttons: the same white disc as everywhere else.
   They used to carry the glass back-sphere photograph. ── */
.cwp-back, .oh-cat-back, .wish-cat-back, .cart-intro-back {
  background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M15 5l-7 7 7 7' stroke='%230a0a12' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/21px !important;
  border: none !important; border-radius: 50% !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.34), 0 2px 6px rgba(0,0,0,.22) !important;
}
.cwp-back svg, .oh-cat-back svg, .wish-cat-back svg, .cart-intro-back svg { display: none !important; }

/* ── Shabdapathy video banner: give the tall text room so the eyebrow isn't clipped ── */
/* ── The Shabdapathy clip, on the wordmark tablet ──
   The frame WRAPS the banner instead of being it. dev-tab-l builds its
   bezel out of percentage padding and sets no ratio, and app/app.css
   gives this banner height:0 with padding-bottom — the old padding-box
   ratio trick, which a height of zero makes immovable. Two ratio
   mechanisms cannot share one box, so they get one each.

   The inner padding-bottom is the aperture's height as a fraction of the
   aperture's WIDTH, not the frame's: the render is 1339x875, its bezel
   takes 3.510% each side and 4.854%/3.734% top and bottom, so the screen
   is 0.5675 of the frame's width tall and 0.9298 of it wide —
   0.5675 / 0.9298 = 61.03%. */
.hvb-frame { width: 100%; box-sizing: border-box; }
.home-video-banner { padding-bottom: 61.03% !important; }
.hvb-text { top: 50% !important; }

/* ── Hide the bottom nav while inside the full-screen store/archive flows
   (they have their own back button) so nothing gets cut off at the bottom ── */
body:has(.cwp-screen.open) #ig-bottomnav,
body:has(.cwp-screen.open) #ig-social-nav,
body:has(#sub-nowssb-store.open) #ig-bottomnav,
body:has(#sub-nowssb-store.open) #ig-social-nav,
body:has(#sub-real-meaning.open) #ig-bottomnav,
body:has(#sub-practice.open) #ig-bottomnav,
body:has(#sub-practice.open) #ig-social-nav,
body:has(#sub-meaning-store.open) #ig-bottomnav {
  display: none !important;
}

/* store-header cart/wishlist image icons (replaced the SVGs) */
.nss-store-icon-img { width: 18px !important; height: 18px !important; object-fit: contain; display: block; }

/* ── Profile avatar edit pencil — force a perfect circle (was rendering as a tall oval) ── */
#profilePhotoPencil {
  width: 30px !important; height: 30px !important;
  min-width: 30px !important; min-height: 30px !important;
  aspect-ratio: 1 / 1 !important; border-radius: 50% !important;
  box-sizing: border-box !important;
  top: auto !important; left: auto !important; bottom: 4px !important; right: 4px !important;
  flex-shrink: 0 !important;
}
#profilePhotoPencil svg { width: 13px !important; height: 13px !important; }

/* ===== HOME PAGE — TIME-OF-DAY GREETING IMAGE ===== */
/* Restored time-based greeting block at the top of Normal Home */
.nmh-greet-block { margin: 4px 0 18px; }
.nmh-greet-hello { font-family: 'DM Sans', sans-serif; font-size: 27px; font-weight: 800; color: #1a1a2e; letter-spacing: -0.6px; line-height: 1.12; }
.nmh-greet-line { font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 400; color: rgba(26,26,46,0.55); margin-top: 6px; }
#home-nm.nm-dark .nmh-greet-hello { color: #fff; }
#home-nm.nm-dark .nmh-greet-line { color: rgba(255,255,255,0.6); }
/* Combined "Today's Offer" section — coupon image on top, the offer
   banner below it, both fitted inside one padded neumorphic card
   (same white-card recipe as .nmh-streak-section) instead of two
   separate floating cards. */
.nmh-offer-section {
  width: 100%; border-radius: 22px !important; background: #f0f2f7; padding: 18px;
  box-shadow: 7px 7px 16px rgba(0,0,0,0.14), -5px -5px 12px rgba(255,255,255,0.97); box-sizing: border-box;
  margin-top: 8px;
}
#home-nm.nm-dark .nmh-offer-section { background: #16163c; box-shadow: 8px 8px 22px rgba(0,0,0,0.88), -4px -4px 14px rgba(50,50,110,0.32); }
.nmh-offer-section .nmh-banner-wrap { margin-bottom: 14px; }
.nmh-offer-section .nmh-greet-img { margin-bottom: 0 !important; box-shadow: none !important; }
.nmh-offer-section .nmh-offer-banner { margin: 0 !important; box-shadow: none !important; }
/* AI Prescription section — AI Prescription banner, photo banner and
   video banner sit edge-to-edge (zero gap) as one connected block, no
   rounded corners anywhere. */
/* The whole stack sits a little further left (trimmed left padding) so it
   lines up closer to the bottom nav, and the video no longer overhangs:
   all three pieces share one flush left edge. */
.nmh-rx-section { border-radius: 0 !important; padding-left: 8px !important; }
.nmh-rx-section .nmh-rx-video {
  margin: 0 !important; width: 100% !important;
  border: none !important; box-shadow: none !important;
  border-radius: 0 !important; aspect-ratio: 1080 / 335 !important;
}
.nmh-rx-banner-img { display: block; width: 100%; height: 150px; object-fit: cover; border-radius: 0 !important; margin: 0; cursor: pointer; }
.nmh-rx-section .nmh-offer-banner { border-radius: 0 !important; margin: 0 !important; }
/* Inset the whole row so its icon lines up with the NowssB logo that's
   baked into the video banner above (that logo sits ~30px in from the
   frame's left edge, not flush with it). */
.nmh-rx-cta { padding-left: 48px !important; }
/* Enter pill under the text — replaces the old right-hand arrow, which is
   what freed the horizontal space for the inset above. */
.nmh-rx-enter {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 12px;
  background: #fff; border-radius: 30px !important; padding: 6px 6px 6px 16px;
  align-self: flex-end;   /* sits at the right end of the row */
}
/* Icon rides up next to the title instead of centering against the taller
   row the Enter pill creates. */
.nmh-rx-cta .nmh-sec-banner-icon { align-self: flex-start; margin-top: 2px; }
.nmh-rx-enter-lbl { font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 800; color: #060c18; letter-spacing: 0.3px; }
.nmh-rx-enter-go {
  width: 26px; height: 26px; border-radius: 50% !important; flex-shrink: 0;
  background: rgba(6,12,24,0.1); display: flex; align-items: center; justify-content: center;
}
.nmh-rx-enter-go svg { width: 14px; height: 14px; display: block; }
/* .nmh-sec-banner-txt is a flex column, so keep the pill from stretching */
.nmh-rx-cta .nmh-sec-banner-txt { align-items: flex-start; }
/* Disclaimer — separated from the connected block above it */
.nmh-rx-disclaimer {
  font-family: 'DM Sans', sans-serif; font-size: 10.5px; font-weight: 400; font-style: italic;
  color: rgba(0,0,0,0.4); line-height: 1.5; text-align: center; margin-top: 14px;
}
#home-nm.nm-dark .nmh-rx-disclaimer { color: rgba(255,255,255,0.4); }

/* Heading above the AI Prescription section — icon + vertical divider +
   title/sub, sunk into the page as a neumorphic dimple (inset shadow:
   dark on the top-left, white highlight on the bottom-right, the inverse
   of the raised cards elsewhere on this screen). */
.nmh-rx-heading {
  width: 100%; display: flex; align-items: center; gap: 14px; margin: 16px 0 10px;
  padding: 14px 18px; box-sizing: border-box; background: #eceef4;
  border-radius: 20px !important;
  box-shadow: inset 5px 5px 11px rgba(163,177,198,0.55), inset -5px -5px 11px rgba(255,255,255,0.95);
}
#home-nm.nm-dark .nmh-rx-heading {
  background: #0d0d24;
  box-shadow: inset 5px 5px 12px rgba(0,0,0,0.85), inset -4px -4px 10px rgba(50,50,110,0.28);
}
/* Icon sits in its own little raised puck so it reads above the dimple */
.nmh-rx-heading-icon { width: 38px; height: 38px; border-radius: 50% !important; overflow: hidden; flex-shrink: 0;
  box-shadow: 2px 2px 5px rgba(163,177,198,0.6), -2px -2px 5px rgba(255,255,255,0.9); }
#home-nm.nm-dark .nmh-rx-heading-icon { box-shadow: 2px 2px 6px rgba(0,0,0,0.7), -2px -2px 5px rgba(50,50,110,0.3); }
.nmh-rx-heading-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nmh-rx-heading-divider { width: 1px; align-self: stretch; background: rgba(0,0,0,0.14); flex-shrink: 0; }
#home-nm.nm-dark .nmh-rx-heading-divider { background: rgba(255,255,255,0.18); }
.nmh-rx-heading-txt { flex: 1; min-width: 0; }
.nmh-rx-heading-title { font-family: 'DM Sans', sans-serif; font-size: 16px; font-weight: 800; color: #1a1a2e; letter-spacing: -0.2px; }
.nmh-rx-heading-sub { font-family: 'DM Sans', sans-serif; font-size: 11.5px; font-weight: 400; color: rgba(0,0,0,0.45); margin-top: 2px; }
#home-nm.nm-dark .nmh-rx-heading-title { color: #fff; }
#home-nm.nm-dark .nmh-rx-heading-sub { color: rgba(255,255,255,0.45); }
.nmh-greet-img{
  display:block !important;
  width:100% !important;
  aspect-ratio:16/9 !important;
  height:auto !important;
  object-fit:cover !important;
  object-position:center !important;
  border-radius:22px !important;
  background-color:#e9e2d4 !important;
  box-shadow:0 10px 28px rgba(40,30,15,.18) !important;
  margin-bottom:2px !important;
  pointer-events:auto !important;   /* coupon banner is tappable — opens the store */
  cursor:pointer;
  -webkit-user-select:none !important;
  user-select:none !important;
  -webkit-touch-callout:none !important;
  transition:opacity .3s ease !important;
}
.nmh-greet-img:not([src]){ display:none !important; }

/* ══ ANIMATED PROMO CARDS (normal home) — Connect (blue) + Store (purple) ══ */
.npc-card {
  position: relative; width: 100%; margin: 4px 0;
  aspect-ratio: 1080 / 411; border-radius: 28px !important; overflow: hidden;
  display: flex; align-items: center; padding: 0 5.5%; cursor: pointer;
  font-family: 'DM Sans', -apple-system, sans-serif;
  /* same raised neumorphic plate as the other normal-home sections */
  border: 10px solid #f0f2f7 !important;
  box-shadow: 12px 12px 28px rgba(163,177,198,0.7), -9px -9px 22px #ffffff;
}
#home-nm.nm-dark .npc-card {
  border-color:#0c0c20 !important;
  box-shadow:10px 10px 28px rgba(0,0,0,0.88), -5px -5px 18px rgba(50,50,110,0.32);
}
/* Video banner between Today's Practice and the tile grid — SAME height as
   the animated promo cards above (identical aspect-ratio + plate frame). */
.nmh-video-banner {
  position: relative; width: 100%; margin: 4px 0;
  aspect-ratio: 1080 / 411; border-radius: 28px !important; overflow: hidden;
  border: 10px solid #f0f2f7 !important;
  box-shadow: 12px 12px 28px rgba(163,177,198,0.7), -9px -9px 22px #ffffff;
}
#home-nm.nm-dark .nmh-video-banner {
  border-color:#0c0c20 !important;
  box-shadow:10px 10px 28px rgba(0,0,0,0.88), -5px -5px 18px rgba(50,50,110,0.32);
}
.nmh-video-banner video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* Subscription video banner — taller so its baked-in "NowssB Subscription
   Home" text isn't cropped by the short default banner ratio. */
.nmh-video-banner.nmh-vb-tall { aspect-ratio: 1080 / 620 !important; }
/* Today Trending banner — true 16:9 (source video's own ratio), so
   object-fit:cover never actually crops anything, it just fills. */
.nmh-trend-banner {
  position: relative; width: 100%; margin: 4px 0;
  aspect-ratio: 16 / 9; border-radius: 22px !important; overflow: hidden;
  cursor: pointer;
  box-shadow: 8px 8px 20px rgba(163,177,198,0.5), -6px -6px 14px #ffffff;
}
.nmh-trend-banner-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.nmh-trend-banner-fade { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 45%, rgba(4,10,24,0.4) 100%); pointer-events: none; }
/* Text sits over the video's own liquid-glass swirl (roughly its middle-right
   third), cycling one trending word at a time instead of a stacked list. */
.nmh-trend-banner-text { position: absolute; top: 50%; right: 14%; transform: translateY(-50%); z-index: 2; text-align: right; max-width: 46%; }
.nmh-trend-banner-item { display: flex; align-items: center; justify-content: flex-end; gap: 10px; transition: opacity .4s ease; }
.nmh-trend-banner-word {
  font-family: 'DM Sans', sans-serif; font-size: 19px; font-weight: 800; color: #fff;
  line-height: 1.3; text-shadow: 0 2px 10px rgba(0,0,0,0.6); cursor: pointer;
}
.nmh-trend-banner-icon { width: 24px; height: 24px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5)); }
/* Second banner right below the video one — same black-card look as the
   Connect features carousel (.ncb-carousel). Cycles independently from the
   video banner above (its own timer, not synced), word slides in from the
   right with a wiggle-settle, and dots let you jump straight to any word's
   store page. */
.nmh-trend-shop-banner {
  width: 100%; border-radius: 22px !important; overflow: hidden; cursor: pointer; position: relative;
  background: #000; box-shadow: 8px 8px 20px rgba(163,177,198,0.5), -6px -6px 14px #ffffff;
  display: flex; align-items: center; gap: 14px; padding: 26px 20px 36px; margin: 4px 0 0; box-sizing: border-box;
}
.nmh-trend-shop-logo {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 50% !important; overflow: hidden;
  background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center;
}
.nmh-trend-shop-logo img { width: 60%; height: 60%; object-fit: contain; display: block; }
.nmh-trend-shop-text { flex: 1; min-width: 0; overflow: hidden; }
.nmh-trend-shop-label {
  font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: #fff; margin-bottom: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nmh-trend-shop-word {
  font-family: 'DM Sans', sans-serif; font-size: 18px; font-weight: 800; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@keyframes nmhTrendWordDash {
  0%   { transform: translateX(50px); opacity: 0; }
  55%  { transform: translateX(-7px); opacity: 1; }
  70%  { transform: translateX(4px); }
  85%  { transform: translateX(-2px); }
  100% { transform: translateX(0); }
}
.nmh-trend-shop-word.dash-in { animation: nmhTrendWordDash .6s cubic-bezier(.34,1.56,.64,1) both; }
.nmh-trend-shop-divider { width: 1px; align-self: stretch; margin: 6px 0; background: rgba(255,255,255,0.25); flex-shrink: 0; }
.nmh-trend-shop-btn {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
  border: none; border-radius: 999px !important; background: #e8d5a3; color: #060c18;
  font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 700; padding: 10px 16px; cursor: pointer;
}
.nmh-trend-shop-cart { width: 15px; height: 15px; flex-shrink: 0; }
.nmh-trend-shop-dots { position: absolute; bottom: 12px; left: 0; right: 0; height: 5px; display: flex; align-items: center; justify-content: center; gap: 5px; z-index: 2; }
.nmh-trend-shop-dot {
  width: 5px; height: 5px; min-width: 0; min-height: 0; flex-shrink: 0;
  border-radius: 50% !important; background: rgba(255,255,255,0.28); transition: all 0.3s; cursor: pointer;
}
.nmh-trend-shop-dot.on { background: #e8d5a3; width: 15px; border-radius: 3px !important; }

/* Normal Home — section identifier banner. Same card language as the
   Connect features carousel (.ncb-*, the "Reels" card): solid black,
   rounded icon box on the left, bold title + explanatory subtitle in the
   middle, circular arrow button on the right that jumps to the section
   this banner introduces. Same markup dropped above every #home-nm
   section that didn't already carry its own distinct heading.
   Deliberately theme-independent (stays #000 in both light and dark
   #home-nm modes). */
.nmh-sec-banner {
  width: 100%; display: flex; align-items: center; gap: 14px; cursor: pointer;
  background: #000; border-radius: 22px !important; padding: 20px 18px;
  margin: 16px 0 8px; box-sizing: border-box;
  /* Plain dark drop shadow, not the light-mode neumorphic white-highlight
     formula (8px 8px 20px rgba(163,177,198,.5), -6px -6px 14px #fff) this
     used to have — that reads as a wrong white glow on every dark screen
     this component gets reused on (already happened twice: Features menu,
     AI Prescription). A solid card still reads fine on Normal Home's light
     background with just a dark shadow, and it's correct everywhere else. */
  box-shadow: 0 14px 32px rgba(0,0,0,0.4);
}
/* Quick Access banner — inset from the sides, extra space below, square
   corners (per request). */
.nmh-sec-banner.nmh-qa-banner {
  width: auto !important; margin: 16px 16px 22px !important; border-radius: 0 !important;
}
.nmh-sec-banner-icon {
  width: 54px; height: 54px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  border-radius: 15px !important; background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.15);
}
.nmh-sec-banner-icon svg { width: 27px; height: 27px; display: block; }
.nmh-sec-banner-divider { width: 1px; align-self: stretch; margin: 2px 0; background: rgba(255,255,255,0.2); flex-shrink: 0; }
.nmh-sec-banner-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.nmh-sec-banner-title { font-family: 'DM Sans', sans-serif; font-size: 15.5px; font-weight: 800; color: #fff; letter-spacing: -0.2px; }
.nmh-sec-banner-sub { font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 400; color: rgba(255,255,255,0.62); line-height: 1.35; }
.nmh-sec-banner-arrow {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 50% !important; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.24);
}
.nmh-sec-banner-arrow svg { width: 17px; height: 17px; display: block; }

/* Inverted variant — white background, black text/icon/divider/arrow.
   Same component, same height, colors flipped. Icon SVGs on inverted
   banners are authored with dark stroke/fill directly in the markup
   (not overridden here) since the icons are inline, not CSS-driven. */
.nmh-sec-banner-inverse { background: #fff; box-shadow: 0 14px 32px rgba(0,0,0,0.35); }
.nmh-sec-banner-inverse .nmh-sec-banner-icon { background: rgba(6,12,24,0.06); border-color: rgba(6,12,24,0.12); }
.nmh-sec-banner-inverse .nmh-sec-banner-divider { background: rgba(6,12,24,0.15); }
.nmh-sec-banner-inverse .nmh-sec-banner-title { color: #060c18; }
.nmh-sec-banner-inverse .nmh-sec-banner-sub { color: rgba(6,12,24,0.6); }
.nmh-sec-banner-inverse .nmh-sec-banner-arrow { background: rgba(6,12,24,0.06); }

/* Fashion home — same two banners, styled to match its sharp-corner dark
   cards instead of the light neumorphic frame. */
.fash-trend-banner {
  border-radius: 0 !important; width: calc(100% - 32px) !important; margin: 16px 16px 6px !important;
  box-shadow: 0 14px 36px rgba(0,0,0,.42) !important; border: 1px solid rgba(255,255,255,.08);
}

/* ══════════════════════════════════════════════════════════
   BLACK/GOLD DEDICATED PAGES (.bgp-*) — Today's Offer, Daily
   Streak and Quick Access each get their own full sub-screen
   instead of redirecting into an unrelated existing screen.
   Shared fixed-header/scrolling-body/hero-banner skeleton,
   same mechanic as #sub-checkout's .chk-* pages, always solid
   black + gold regardless of light/dark home mode.
   ══════════════════════════════════════════════════════════ */
/* No position override here — .sub-screen's own position:fixed (with inset:0)
   is exactly what .bgp-header-fixed/.bgp-body (position:absolute) need as
   their positioning context; overriding it to relative collapses the whole
   screen to 0 height since it loses its definite viewport-anchored size. */
.bgp-screen { background: #060c18; overflow: hidden; }
.bgp-header-fixed {
  position: absolute; top: 0; left: 0; right: 0; z-index: 10; display: flex; align-items: center; gap: 14px;
  padding: max(env(safe-area-inset-top,20px),20px) 18px 16px;
  background: linear-gradient(to bottom, rgba(6,12,24,.92) 0%, rgba(6,12,24,.6) 70%, transparent 100%);
}
.bgp-back {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 50% !important;
  background: rgba(232,213,163,0.12); border: 1px solid rgba(232,213,163,0.3);
  display: flex; align-items: center; justify-content: center; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.bgp-back:active { background: rgba(232,213,163,0.22); }
/* AI Prescription page's back button — solid white, forced perfect
   circle (equal fixed width/height, no stretching from the flex row). */
.bgp-back-white {
  width: 38px !important; height: 38px !important; min-width: 38px !important; max-width: 38px !important;
  min-height: 38px !important; max-height: 38px !important; box-sizing: border-box !important;
  background: #fff !important; border: none !important;
}
.bgp-back-white:active { background: rgba(255,255,255,0.85) !important; }
.bgp-header-title { font-family: 'DM Sans', sans-serif; font-size: 17px; font-weight: 800; color: #fff; letter-spacing: -0.2px; }
.bgp-body { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
.bgp-hero {
  position: relative; padding: 104px 20px 30px; text-align: center;
  background: radial-gradient(ellipse at top, rgba(232,213,163,0.16) 0%, transparent 65%), #060c18;
}
.bgp-hero-icon {
  width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 20px !important;
  background: rgba(232,213,163,0.1); border: 1px solid rgba(232,213,163,0.28);
  display: flex; align-items: center; justify-content: center;
}
.bgp-hero-icon svg { width: 30px; height: 30px; display: block; }
.bgp-hero-title { font-family: 'DM Sans', sans-serif; font-size: 25px; font-weight: 800; color: #fff; letter-spacing: -0.3px; }
.bgp-hero-sub { font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 400; color: rgba(255,255,255,0.55); margin-top: 6px; }
.bgp-content { padding: 8px 18px 60px; }
.bgp-section-label {
  font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: #e8d5a3; margin: 26px 0 12px;
}
.bgp-content > .bgp-section-label:first-child { margin-top: 4px; }
.bgp-cta-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 16px;
  border-radius: 16px !important; background: linear-gradient(135deg,#e8d5a3,#c8a96e); color: #060c18;
  font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 800; cursor: pointer; margin-top: 18px; border: none;
  -webkit-tap-highlight-color: transparent;
}
.bgp-cta-btn:active { filter: brightness(0.94); }

/* Coupon/bundle shop pages (app/js/part055.js) — fluid 2-column grid
   (same 1fr/1fr pattern already proven bug-free on .bgp-offers-grid,
   the sibling Offers hub) so cards fill the row instead of leaving a
   dead gap on the right — unlike the real store's horizontal-scroll
   .rm-word-row, these are short curated lists shown all at once,
   shop-grid style. Overrides .rm-word-card's fixed 148px scroll-row
   width so each card stretches to fill its grid cell. */
.bgp-word-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 4px 0 6px; }
.bgp-word-grid .rm-word-card { width: 100%; flex-shrink: unset; }
/* Real store header/hero reused inline (not absolute-overlaid) on these
   pages — no longer needs the fixed-header top-clearance padding or
   full-bleed radial background .bgp-hero normally carries. */
.bgp-hero-inline { padding: 8px 0 22px; background: none; }
.bgp-toggle-row { display: flex; gap: 8px; margin: 4px 0 6px; }
.bgp-toggle-btn {
  flex: 1; padding: 11px; text-align: center; border-radius: 14px !important;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.55); font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 700;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.bgp-toggle-btn.active { background: linear-gradient(135deg,#e8d5a3,#c8a96e); color: #060c18; border-color: transparent; }
/* Opened from #sub-offers (which stays open underneath) — must layer above
   it, same treatment as #sub-explore-choice/#sub-search-choice below. */
#sub-coupon-individual, #sub-coupon-bundle5, #sub-coupon-signature, #sub-coupon-bundle20 { z-index: 700 !important; }
/* Quick Access opens from the Settings page (#sub-social) too — layer it
   above so Settings stays underneath and Back returns there. */
#sub-quick-access { z-index: 720 !important; }

/* Offers page */
.bgp-promo-scroll { display: flex; gap: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
.bgp-promo-scroll::-webkit-scrollbar { display: none; }
.bgp-promo-card { flex: 0 0 240px; height: 135px; border-radius: 16px; object-fit: cover; cursor: pointer; scroll-snap-align: start; }
.bgp-coupon-card { background: #000; border: 1px solid rgba(232,213,163,0.18); border-radius: 18px; padding: 16px 18px; margin-bottom: 12px; display: flex; align-items: flex-start; gap: 12px; }
/* Word image on the left of each coupon */
.bgp-coupon-img { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; flex-shrink: 0; background: rgba(255,255,255,0.06); margin-top: 2px; }
.bgp-coupon-main { flex: 1; min-width: 0; }
/* Bottom row: smaller white pill "Apply Coupon" + circular Cart button */
.bgp-coupon-actions { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.bgp-coupon-apply-btn {
  display: flex; align-items: center; justify-content: center; flex: 1; padding: 9px 14px;
  border-radius: 30px !important; background: #fff;
  color: #060c18; font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 800; letter-spacing: 0.2px;
  cursor: pointer; border: none; -webkit-tap-highlight-color: transparent;
}
.bgp-coupon-apply-btn:active { filter: brightness(0.94); }
/* 44 square, not 38: app/app.css enforces a 44px min-height tap target on
   buttons, so a 38px height rendered 38 wide by 44 tall — an oval. Matching
   the enforced size keeps it a true circle AND the same height as the Apply
   pill beside it, which that rule sizes too. */
.bgp-coupon-cart-btn {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 50% !important; background: #fff; border: none;
  display: flex; align-items: center; justify-content: center; cursor: pointer; -webkit-tap-highlight-color: transparent;
  padding: 0;
}
.bgp-coupon-cart-btn:active { filter: brightness(0.94); }
.bgp-coupon-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bgp-coupon-code { font-family: 'DM Sans', sans-serif; font-weight: 800; font-size: 15px; color: #fff; letter-spacing: 0.3px; }
.bgp-coupon-pct { font-family: 'DM Sans', sans-serif; font-weight: 800; font-size: 15px; color: #e8d5a3; flex-shrink: 0; }
.bgp-coupon-req { font-size: 11px; color: rgba(255,255,255,0.5); margin-top: 4px; }
.bgp-coupon-bar-track { height: 6px; border-radius: 3px; background: rgba(255,255,255,0.08); margin-top: 12px; overflow: hidden; }
.bgp-coupon-bar-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg,#c8a96e,#e8d5a3); transition: width 0.4s; }
.bgp-coupon-status { font-size: 11px; font-weight: 700; margin-top: 8px; }
.bgp-coupon-status.unlocked { color: #8ce6aa; }
.bgp-coupon-status.locked { color: rgba(255,255,255,0.4); }
/* Coupon tier cards on the offers hub each open their own dedicated
   coupon/bundle page (app/js/part055.js) instead of just showing progress. */
.bgp-coupon-card-link { position: relative; cursor: pointer; padding-right: 30px; }
.bgp-coupon-chevron { position: absolute; right: 16px; top: 20px; opacity: 0.7; }
.bgp-offers-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bgp-offer-card {
  background: #000; border: 1px solid rgba(255,255,255,0.08); border-radius: 18px;
  padding: 16px 14px 14px; position: relative; cursor: pointer; box-sizing: border-box;
}
.bgp-offer-card.bgp-hidden-extra { display: none; }
.bgp-offer-badge {
  position: absolute; top: 12px; right: 12px; font-family: 'DM Sans', sans-serif; font-size: 9px; font-weight: 800;
  letter-spacing: .3px; color: #fff; background: linear-gradient(135deg,#e0644b,#c8442e); padding: 4px 9px; border-radius: 20px !important;
}
/* Left image + vertical divider + (word/price/CTA stacked) split — the
   whole card is divided into an image column and a text column by one
   vertical line, "Grab Deal" living inside the text column so it sits to
   the right of that same divider, not as a separate full-width row. */
.bgp-offer-split { display: flex; align-items: stretch; gap: 8px; margin-top: 22px; }
.bgp-offer-img { width: 32px; height: 32px; border-radius: 6px; object-fit: cover; flex-shrink: 0; align-self: center; background: rgba(255,255,255,0.06); }
.bgp-offer-divider { width: 1px; align-self: stretch; background: rgba(255,255,255,0.15); flex-shrink: 0; }
.bgp-offer-info { flex: 1; min-width: 0; }
.bgp-offer-word { font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 800; color: #fff; letter-spacing: .3px; margin-top: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bgp-offer-price { display: flex; align-items: baseline; gap: 6px; margin-top: 4px; }
.bgp-offer-now { font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 800; color: #e8d5a3; }
.bgp-offer-was { font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 500; color: rgba(255,255,255,0.32); text-decoration: line-through; }
.bgp-offer-cta {
  display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 8px;
  padding: 6px; border-radius: 0 !important; background: #fff; color: #060c18;
  font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 800;
}
.bgp-showmore-btn {
  width: 100%; padding: 14px; border-radius: 14px !important; background: rgba(232,213,163,0.08);
  border: 1px solid rgba(232,213,163,0.25); color: #e8d5a3; font-family: 'DM Sans', sans-serif;
  font-weight: 700; font-size: 13px; text-align: center; cursor: pointer; margin-top: 4px; -webkit-tap-highlight-color: transparent;
}
.bgp-showmore-btn.bgp-hidden-extra { display: none; }
#rxOrganRow .bgp-hidden-extra { display: none; }

/* Streak page */
.bgp-streak-num { font-family: 'DM Sans', sans-serif; font-size: 60px; font-weight: 800; color: #e8d5a3; line-height: 1; }
.bgp-streak-cal { display: grid; grid-template-columns: repeat(7,1fr); gap: 8px; }
.bgp-streak-day {
  aspect-ratio: 1; border-radius: 10px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-family: 'DM Sans', sans-serif; font-size: 9px; font-weight: 700; color: rgba(255,255,255,0.35);
}
.bgp-streak-day-label { font-size: 8px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; }
.bgp-streak-day.bgp-done { background: linear-gradient(135deg,#c8a96e,#e8d5a3); color: #060c18; border-color: transparent; }
.bgp-milestone-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
.bgp-milestone-row:last-child { border-bottom: none; }
.bgp-milestone-badge {
  width: 44px; height: 44px; border-radius: 50% !important; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
  font-family: 'DM Sans', sans-serif; font-weight: 800; font-size: 12px; color: rgba(255,255,255,0.4);
}
.bgp-milestone-badge.bgp-unlocked { background: linear-gradient(135deg,#c8a96e,#e8d5a3); border-color: transparent; color: #060c18; }
.bgp-milestone-title { font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 14px; color: #fff; }
.bgp-milestone-desc { font-size: 11px; color: rgba(255,255,255,0.5); margin-top: 2px; }

/* ══════════════════════════════════════════════════════════
   QUICK ACCESS = bottom nav-bar customizer (app/js/part057.js).
   Live shape/colour overrides for the real bottom nav (#ig-bottomnav
   + #ig-social-nav) plus the customizer UI on the page itself.
   ══════════════════════════════════════════════════════════ */

/* ── Live nav SHAPE — floating pill / floating rectangle (default = no
   override, stays full-width bottom-anchored). !important beats both the
   base #ig-bottomnav rules and #ig-social-nav's inline styles. Labels stay
   visible on the floating shapes (taller bar). ── */
body.navshape-pill #ig-bottomnav, body.navshape-pill #ig-social-nav {
  left: 16px !important; right: 16px !important;
  bottom: calc(14px + env(safe-area-inset-bottom,0px)) !important;
  height: 62px !important; padding-bottom: 0 !important;
  border-radius: 34px !important; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.13) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,0.5) !important;
}
body.navshape-rect #ig-bottomnav, body.navshape-rect #ig-social-nav {
  left: 12px !important; right: 12px !important;
  bottom: calc(12px + env(safe-area-inset-bottom,0px)) !important;
  height: 62px !important; padding-bottom: 0 !important;
  border-radius: 14px !important; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.13) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,0.5) !important;
}
/* Rectangle corner variant — Edge = sharp corners */
body.navshape-rect.navcorner-edge #ig-bottomnav, body.navshape-rect.navcorner-edge #ig-social-nav { border-radius: 0 !important; }
/* Nav labels always visible (never hidden on inactive tabs). Doubled-id
   selector (id=2) beats body.nm-mode #ig-bottomnav .ig-nav-label (id=1),
   which otherwise paints inactive labels near-black — invisible on the
   dark/black nav bar. */
#ig-bottomnav#ig-bottomnav .ig-nav-label { color: rgba(255,255,255,0.72) !important; opacity: 1 !important; display: block !important; }
#ig-bottomnav#ig-bottomnav .ig-nav-btn.active .ig-nav-label { color: #e8d5a3 !important; }

/* ── Live nav COLOUR — black (default = glass, no override). Doubled-id
   selector deliberately out-specifies the base glass rule
   (body:not(.nav-neo):not(.nav-solid) #ig-bottomnav) so black wins no
   matter which Settings nav-style (glass/neo/solid) is also active. ── */
body.navcolor-black #ig-bottomnav#ig-bottomnav,
body.navcolor-black #ig-social-nav#ig-social-nav {
  background: #000 !important;
  border-color: rgba(255,255,255,0.08) !important;
  border-top-color: rgba(255,255,255,0.08) !important;
}

/* ── Customizer UI ── */
#sub-quick-access .bgp-content { padding-bottom: 60px; }
/* Title takes the slack so the customize + Reset buttons sit in the
   top-right corner, together. */
#sub-quick-access .bgp-header-title { flex: 1; }
.qa-hdr-cust { flex-shrink: 0; }
.qa-reset-hdr {
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16);
  color: #e8d5a3; font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 700;
  padding: 7px 14px; border-radius: 0 !important; cursor: pointer; -webkit-tap-highlight-color: transparent; flex-shrink: 0;
}
/* Bigger NowssB Connect logo everywhere it appears */
.ig-nav-img-connect { width: 30px !important; height: 30px !important; }
.qa-feat-connect .qa-feat-ic img { width: 40px; height: 40px; }
.qa-prev-connect img { width: 26px !important; height: 26px !important; }
.qa-hint { font-size: 12px; color: rgba(255,255,255,0.45); line-height: 1.5; margin-bottom: 12px; }

/* Explainer banner */
.qa-explain {
  display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; margin: 2px 0 10px;
  background: #000; border: 1px solid rgba(232,213,163,0.2); border-radius: 16px !important;
}
.qa-explain-ic {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 50% !important;
  background: rgba(232,213,163,0.1); border: 1px solid rgba(232,213,163,0.25);
  display: flex; align-items: center; justify-content: center;
}
.qa-explain-ic svg { width: 18px; height: 18px; }
.qa-explain-txt { font-family: 'DM Sans', sans-serif; font-size: 12px; line-height: 1.55; color: rgba(255,255,255,0.62); }
.qa-explain-txt b { color: #e8d5a3; font-weight: 700; }

/* Live preview strip — larger, faithfully reflects shape + corner + colour */
.qa-nav-preview { margin-bottom: 4px; background: rgba(255,255,255,0.03); border-radius: 16px !important; padding: 10px; }
.qa-prevcol-black.qa-nav-preview { background: rgba(255,255,255,0.06); }
.qa-prev-bar {
  display: flex; align-items: center; justify-content: space-around; height: 72px;
  background: rgba(6,12,24,0.55); border: 1px solid rgba(255,255,255,0.14);
}
.qa-prevcol-black .qa-prev-bar { background: #000; }
/* border-radius needs !important to beat app.css's global *{border-radius:0!important} reset */
.qa-prev-default .qa-prev-bar { border-radius: 0 !important; }
.qa-prev-pill .qa-prev-bar { border-radius: 36px !important; margin: 2px 14px; box-shadow: 0 10px 24px rgba(0,0,0,0.55); }
.qa-prev-rect .qa-prev-bar { border-radius: 16px !important; margin: 2px 8px; box-shadow: 0 10px 24px rgba(0,0,0,0.55); }
.qa-prev-rect.qa-prevcorner-edge .qa-prev-bar { border-radius: 0 !important; }
.qa-prev-item { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; min-width: 0; }
.qa-prev-puck { width: 30px; height: 30px; border-radius: 50% !important; background: #000; display: flex; align-items: center; justify-content: center; }
.qa-prev-puck.qa-prev-connect { background: rgba(232,213,163,0.14); }
.qa-prev-puck img { width: 20px; height: 20px; object-fit: contain; display: block; }
.qa-prev-lbl { font-family: 'DM Sans', sans-serif; font-size: 9px; font-weight: 500; color: rgba(255,255,255,0.62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60px; }

/* Shape / corner / colour option chips */
.qa-opt-row { display: flex; gap: 8px; flex-wrap: wrap; }
.qa-corner-row { margin-top: 8px; }
.qa-opt {
  flex: 1; min-width: 88px; text-align: center; padding: 12px 8px; border-radius: 0 !important;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.6);
  font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 700; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.qa-opt.active { background: #fff; color: #060c18; border-color: #fff; }

/* Feature grouping — In-Nav vs Available, split by a thin divider, each
   under its own black banner. */
.qa-group-banner {
  background: #000; border: 1px solid rgba(232,213,163,0.18); border-radius: 0 !important;
  padding: 9px 14px; margin-bottom: 10px;
  font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 800; letter-spacing: 1.5px;
  text-transform: uppercase; color: #e8d5a3;
}
.qa-group-divider { height: 1px; background: rgba(255,255,255,0.14); margin: 18px 0; }

/* Feature-icon grid */
.qa-feat-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-bottom: 4px; }
.qa-feat-empty { grid-column: 1 / -1; font-family: 'DM Sans', sans-serif; font-size: 12px; color: rgba(255,255,255,0.4); padding: 8px 0; }
.qa-feat {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 4px 12px;
  border-radius: 0 !important; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.qa-feat.sel { background: #fff; border-color: #fff; }
/* Icon wrapper is a completely black circle — except Connect, which keeps
   its gold-tint puck. */
.qa-feat-ic {
  width: 46px; height: 46px; border-radius: 50% !important; flex-shrink: 0;
  background: #000; display: flex; align-items: center; justify-content: center;
}
.qa-feat-connect .qa-feat-ic { background: rgba(232,213,163,0.14); }
.qa-feat-ic img { width: 34px; height: 34px; object-fit: contain; display: block; }
.qa-feat-lbl { font-family: 'DM Sans', sans-serif; font-size: 9.5px; font-weight: 700; color: rgba(255,255,255,0.7); text-align: center; line-height: 1.2; }
.qa-feat.sel .qa-feat-lbl { color: #060c18; }
.qa-feat-num {
  position: absolute; top: 5px; right: 5px; width: 16px; height: 16px; border-radius: 50%;
  background: #c8a96e; color: #060c18; font-size: 9px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; font-family: 'DM Sans', sans-serif;
}
/* Pencil edit affordance on every tile (selected + unselected) */
.qa-feat-edit { position: absolute; top: 5px; left: 5px; width: 13px; height: 13px; color: rgba(255,255,255,0.4); }
.qa-feat.sel .qa-feat-edit { color: rgba(6,12,24,0.5); }
.qa-feat-edit svg { width: 13px; height: 13px; display: block; }

.qa-apply-cta { margin-top: 24px; }

/* Custom background layer — shown only when a custom Fashion Background is
   active (header customize button → body.nwsb-custom-fashion-bg + CSS vars).
   Sits behind the page content; the screen's solid bg + hero radial go
   transparent so the chosen image/black shows through, with a scrim for
   legibility. */
#sub-quick-access .qa-page-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; pointer-events: none; display: none; }
body.nwsb-custom-fashion-bg #sub-quick-access .qa-page-bg {
  display: block; background-image: var(--nwsb-custom-bg-url); background-color: var(--nwsb-custom-bg-color);
}
body.nwsb-custom-fashion-bg #sub-quick-access .qa-page-bg::after { content: ''; position: absolute; inset: 0; background: rgba(6,12,24,0.72); }
body.nwsb-custom-fashion-bg #sub-quick-access.bgp-screen { background: transparent !important; }
body.nwsb-custom-fashion-bg #sub-quick-access .bgp-hero { background: none !important; }

/* Toast — matches the Fashion-Background "applied" toast: circle-wrapped
   icon on the left, text, and a check on the right. */
.qa-toast {
  position: absolute; left: 50%; bottom: 90px; transform: translate(-50%, 12px);
  display: flex; align-items: center; gap: 10px;
  background: #000; border: 1px solid rgba(255,255,255,0.1);
  padding: 8px 16px 8px 8px; border-radius: 30px !important; box-shadow: 0 10px 28px rgba(0,0,0,0.55);
  max-width: calc(100% - 40px);
  opacity: 0; pointer-events: none; transition: opacity .22s ease, transform .22s ease; z-index: 40;
}
.qa-toast.show { opacity: 1; transform: translate(-50%, 0); }
.qa-toast-icon {
  width: 30px; height: 30px; border-radius: 50% !important; overflow: hidden; flex-shrink: 0;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(232,213,163,0.3);
  display: flex; align-items: center; justify-content: center;
}
.qa-toast-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qa-toast-text { font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 700; color: #fff; white-space: nowrap; }
.qa-toast-check {
  width: 20px; height: 20px; border-radius: 50% !important; flex-shrink: 0;
  background: #e8d5a3; display: flex; align-items: center; justify-content: center;
}

/* Restore Streak — real purchase card */
.bgp-restore-card { background: rgba(232,213,163,0.08); border: 1px solid rgba(232,213,163,0.25); border-radius: 18px !important; padding: 18px; margin-bottom: 14px; }
.bgp-restore-price { font-family: 'DM Sans', sans-serif; font-size: 26px; font-weight: 800; color: #e8d5a3; }
.bgp-restore-desc { font-family: 'DM Sans', sans-serif; font-size: 12px; color: rgba(255,255,255,0.55); margin-top: 6px; line-height: 1.5; }

/* Settings toggles */
.bgp-toggle-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px !important;
  margin-bottom: 10px; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.bgp-toggle-label { font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 14px; color: #fff; }
.bgp-toggle-sub { font-family: 'DM Sans', sans-serif; font-size: 11.5px; color: rgba(255,255,255,0.5); margin-top: 3px; line-height: 1.4; }
.bgp-toggle-switch { width: 44px; height: 26px; border-radius: 14px !important; background: rgba(255,255,255,0.15); position: relative; flex-shrink: 0; transition: background 0.2s; }
.bgp-toggle-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50% !important; background: #fff; transition: transform 0.2s; }
.bgp-toggle-switch.on { background: #e8d5a3; }
.bgp-toggle-switch.on::after { transform: translateX(18px); background: #060c18; }

/* Quick Access page */
.bgp-qa-row {
  display: flex; align-items: center; gap: 16px; padding: 18px; border-radius: 18px !important;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); margin-bottom: 12px;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.bgp-qa-row:active { background: rgba(255,255,255,0.07); }
.bgp-qa-icon {
  width: 50px; height: 50px; border-radius: 15px !important; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(232,213,163,0.1); border: 1px solid rgba(232,213,163,0.25);
}
.bgp-qa-title { font-family: 'DM Sans', sans-serif; font-weight: 800; font-size: 15.5px; color: #fff; }
.bgp-qa-sub { font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 400; color: rgba(255,255,255,0.55); margin-top: 2px; }
.bgp-qa-arrow {
  width: 32px; height: 32px; border-radius: 50% !important; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.06);
}

/* AI Prescription page */
.bgp-rx-reason { font-family: 'DM Sans', sans-serif; font-style: italic; font-size: 13px; color: rgba(255,255,255,0.6); line-height: 1.55; margin-bottom: 16px; }
.bgp-rx-words { display: flex; flex-direction: column; gap: 10px; }
.bgp-rx-word-card {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(232,213,163,0.18); border-radius: 16px !important;
  padding: 16px 18px; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.bgp-rx-word-card:active { background: rgba(255,255,255,0.07); }
.bgp-rx-word-name { font-family: 'DM Sans', sans-serif; font-weight: 800; font-size: 16px; color: #fff; }
.bgp-rx-word-organ { font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 600; color: #e8d5a3; margin-top: 3px; }
.bgp-rx-word-why { font-family: 'DM Sans', sans-serif; font-size: 11.5px; color: rgba(255,255,255,0.5); margin-top: 5px; line-height: 1.4; }
.bgp-rx-word-play {
  width: 36px; height: 36px; border-radius: 50% !important; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(232,213,163,0.12); border: 1px solid rgba(232,213,163,0.3);
}
.bgp-rx-loading { font-family: 'DM Sans', sans-serif; font-size: 13px; color: rgba(255,255,255,0.4); text-align: center; padding: 30px 0; }

/* Pure black + glassmorphism variant for THIS page specifically (PS5/Bravia
   dashboard reference) — other .bgp-screen pages keep the near-black
   #060c18 they already had. */
.bgp-rx-screen, .bgp-rx-screen .bgp-body,
.bgp-streak-screen, .bgp-streak-screen .bgp-body { background: #000; }
/* Header "customize background" button (SS.open('fashionbg')) writes a
   --nwsb-custom-bg-url variable + nwsb-custom-fashion-bg body class onto
   <body> — the same mechanism Fashion Home/Profile already consume. This
   page never read either, so the picker worked but visibly did nothing
   here. The glassmorphism cards were built to sit on top of exactly this
   kind of photo backdrop, so wiring it in is a straight fit, not a retrofit. */
body.nwsb-custom-fashion-bg .bgp-rx-screen,
body.nwsb-custom-fashion-bg .bgp-rx-screen .bgp-body,
body.nwsb-custom-fashion-bg .bgp-streak-screen,
body.nwsb-custom-fashion-bg .bgp-streak-screen .bgp-body {
  background-image: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.72) 40%, rgba(0,0,0,0.92) 100%), var(--nwsb-custom-bg-url) !important;
  background-color: var(--nwsb-custom-bg-color, #000) !important;
  background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}
/* "For Every Organ" — vertical list of standard icon+divider+text banners
   (same component/height as every other banner on this page), not a
   horizontal-scroll row. */
.bgp-rx-organ-list { display: flex; flex-direction: column; gap: 10px; }
.bgp-rx-organ-list .nmh-sec-banner { margin: 0; }
.nmh-sec-banner-icon img { width: 60%; height: 60%; object-fit: contain; display: block; }

/* PS5/Bravia-style horizontal tile row */
.bgp-rx-scroll-row { display: flex; gap: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 2px 2px 6px; }
.bgp-rx-scroll-row::-webkit-scrollbar { display: none; }
.bgp-rx-tile {
  flex: 0 0 128px; scroll-snap-align: start; border-radius: 18px !important; padding: 16px 14px;
  background: rgba(255,255,255,0.06); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.12); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.bgp-rx-tile:active { background: rgba(255,255,255,0.1); }
.bgp-rx-tile-organ { font-family: 'DM Sans', sans-serif; font-size: 9.5px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: #e8d5a3; }
.bgp-rx-tile-word { font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 800; color: #fff; margin-top: 8px; }
.bgp-rx-tile-benefit { font-family: 'DM Sans', sans-serif; font-size: 10.5px; color: rgba(255,255,255,0.5); margin-top: 6px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Meaning recommendation tile — image-led */
.bgp-rx-mtile { flex: 0 0 108px; }
.bgp-rx-mtile-img { width: 100%; aspect-ratio: 1; border-radius: 14px !important; object-fit: contain; display: block; margin-bottom: 8px; background: rgba(255,255,255,0.06); padding: 14px; box-sizing: border-box; }
.bgp-rx-mtile-name { font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 800; color: #fff; }
.bgp-rx-mtile-price { font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 700; color: #e8d5a3; margin-top: 3px; }

/* Single rotating word — big glass hero tile with dots, cycling */
.bgp-rx-rotator { position: relative; border-radius: 22px !important; overflow: hidden; background: rgba(255,255,255,0.05); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid rgba(255,255,255,0.12); }
.bgp-rx-rotator-track { display: flex; transition: transform 0.6s cubic-bezier(0.4,0,0.2,1); }
.bgp-rx-rotator-slide { flex: 0 0 100%; box-sizing: border-box; padding: 26px 22px 32px; text-align: center; cursor: pointer; }
.bgp-rx-rotator-icon {
  width: 44px; height: 44px; margin: 0 auto 12px; border-radius: 14px !important;
  background: rgba(232,213,163,0.1); border: 1px solid rgba(232,213,163,0.25);
  display: flex; align-items: center; justify-content: center;
}
.bgp-rx-rotator-icon img { width: 60%; height: 60%; object-fit: contain; display: block; }
.bgp-rx-rotator-organ { font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #e8d5a3; }
.bgp-rx-rotator-word { font-family: 'DM Sans', sans-serif; font-size: 30px; font-weight: 800; color: #fff; margin-top: 8px; letter-spacing: -0.5px; }
.bgp-rx-rotator-benefit { font-family: 'DM Sans', sans-serif; font-size: 12px; color: rgba(255,255,255,0.55); margin-top: 8px; line-height: 1.5; max-width: 300px; margin-left: auto; margin-right: auto; }
.bgp-rx-rotator-dots { display: flex; justify-content: center; gap: 5px; padding-bottom: 14px; }
.bgp-rx-rotator-dot { width: 5px; height: 5px; border-radius: 50% !important; background: rgba(255,255,255,0.25); transition: all 0.3s; }
.bgp-rx-rotator-dot.on { background: #e8d5a3; width: 15px; border-radius: 3px !important; }

.fash-trend-shop-banner {
  border-radius: 0 !important; width: calc(100% - 32px) !important; margin: 0 16px 16px !important;
  box-shadow: 0 14px 36px rgba(0,0,0,.42) !important; border: 1px solid rgba(255,255,255,.08);
}
/* small word-search bar overlaid on the right side of a video banner */
.nmh-video-banner-search { cursor: pointer; }
.nmh-vbs-search {
  position: absolute; top: 50%; right: 5%; transform: translateY(-50%); z-index: 2;
  display: flex; align-items: center; gap: 6px;
  width: 46%; max-width: 190px; height: 36px; padding: 0 5px 0 12px;
  border-radius: 20px !important; background: rgba(6,10,20,0.55);
  border: 1px solid rgba(255,255,255,0.25); box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}
.nmh-vbs-input {
  flex: 1; min-width: 0; background: none; border: none; outline: none;
  font-family: 'DM Sans', sans-serif; font-size: 12px; color: #fff;
}
.nmh-vbs-input::placeholder { color: rgba(255,255,255,0.55); }
.nmh-vbs-btn {
  width: 28px; height: 28px; min-height: 0 !important; flex-shrink: 0; border-radius: 50% !important;
  border: none; background: rgba(255,255,255,0.16); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.nmh-vbs-btn img { width: 14px; height: 14px; object-fit: contain; opacity: 0.9; }

/* ── Fashion (dark) home — same video banners, styled to match the page's
   sharp-corner dark cards (.home-fashbanner) instead of the light neumorphic
   frame used on the normal home. ── */
.fash-video-banner {
  position: relative; width: calc(100% - 32px); margin: 16px 16px 6px;
  aspect-ratio: 1080 / 411; overflow: hidden; background: #0a0a12;
  border-radius: 0 !important; box-shadow: 0 14px 36px rgba(0,0,0,.42);
  border: 1px solid rgba(255,255,255,.08);
}
.fash-video-banner video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* Subscription video banner — taller (see .nmh-vb-tall). */
.fash-video-banner.fash-vb-tall { aspect-ratio: 1080 / 620 !important; }
.fash-video-banner-search { cursor: pointer; }

/* ── Shop Now / Subscribe Today CTA buttons overlaid on the coupon + video
   banners. The coupon banner is a plain <img>, so it needs a position:relative
   wrapper for the button to sit inside; the video banners are already
   position:relative. Glassmorphism look — translucent fill + border, NO
   backdrop-filter (kept off for GPU cost, matches the rest of the app's
   "glass" buttons like .wsg-search-go). ── */
.nmh-banner-wrap, .fash-banner-wrap { position: relative; }
/* CTA buttons styled EXACTLY like the search bar: dark glass pill + the same
   sequential traveling-light border, with a round cart button on the right. */
.nmh-banner-cta, .fash-banner-cta {
  position: absolute; z-index: 3; cursor: pointer;
  display: flex; align-items: center; gap: 9px;
  padding: 4px 4px 4px 15px; min-height: 0 !important; border-radius: 999px !important;
  background: rgba(5,7,12,0.62); border: 1px solid rgba(255,255,255,0.26);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  color: #fff; font-family: 'DM Sans', sans-serif;
  font-size: 12.5px; font-weight: 800; letter-spacing: 0.3px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 6px 18px rgba(0,0,0,0.35);
}
.nmh-cta-lbl { position: relative; z-index: 2; white-space: nowrap; }
.nmh-cta-go {
  width: 28px; height: 28px; flex-shrink: 0; border-radius: 50% !important;
  display: flex; align-items: center; justify-content: center; position: relative; z-index: 2;
  background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.22);
}
.nmh-cta-go svg { width: 16px; height: 16px; display: block; }
/* Coupon Shop Now is VISIBLE by default (so stale JS can never hide it); JS adds
   this class only while the 1st, button-less coupon image is showing. */
.nmh-cta-hidden { display: none !important; }
/* ── Traveling light — same masked conic-gradient + @property sweep as the search
   bar: the pill lights during the 1st half of the cycle, the round button during
   the 2nd (sequential, never together). ── */
@property --ctang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.nmh-banner-cta::before, .fash-banner-cta::before {
  content: ''; position: absolute; inset: 0; border-radius: 999px; padding: 1.6px;
  pointer-events: none; z-index: 1;
  background: conic-gradient(from var(--ctang),
    transparent 0deg, transparent 248deg,
    rgba(255,214,150,0.5) 312deg, #fff4e2 344deg, rgba(255,214,150,0.5) 352deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: ctaBarSeq 5s linear infinite; will-change: --ctang, opacity;
}
.nmh-cta-go::before {
  content: ''; position: absolute; inset: -1px; border-radius: 50%; padding: 1.6px;
  pointer-events: none; z-index: 1;
  background: conic-gradient(from var(--ctang),
    transparent 0deg, transparent 230deg,
    rgba(255,214,150,0.55) 300deg, #fff4e2 340deg, rgba(255,214,150,0.55) 352deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: ctaGoSeq 5s linear infinite; will-change: --ctang, opacity;
}
@keyframes ctaBarSeq {
  0% { --ctang: 0deg; opacity: 1; } 46% { --ctang: 360deg; opacity: 1; }
  50% { --ctang: 360deg; opacity: 0; } 100% { --ctang: 360deg; opacity: 0; }
}
@keyframes ctaGoSeq {
  0% { --ctang: 0deg; opacity: 0; } 50% { --ctang: 0deg; opacity: 0; }
  54% { --ctang: 0deg; opacity: 1; } 96% { --ctang: 360deg; opacity: 1; }
  100% { --ctang: 360deg; opacity: 0; }
}
.nmh-banner-cta-r:active, .fash-banner-cta-r:active { transform: translateY(-50%) scale(0.96); }
/* left-aligned, sitting directly above "Exclusive Coupon for you!" on the
   coupon banner — NOT centered on the whole banner width. */
/* Sits directly ABOVE the "Exclusive Coupon for you!" text baked into the
   coupon images (text top ≈44% down, centered at ≈27% of the width). */
.nmh-banner-cta-tc, .fash-banner-cta-tc { top: auto; bottom: 62%; left: 27%; transform: translateX(-50%); }
.nmh-banner-cta-tc:active, .fash-banner-cta-tc:active { transform: translateX(-50%) scale(0.96); }
.nmh-banner-cta-r, .fash-banner-cta-r { top: 50%; right: 12px; transform: translateY(-50%); }
/* Coupon Shop Now dashes IN together with the coupon image (same easing as the
   image), preserving the translateX(-50%) horizontal centring. */
@keyframes couponDashCta {
  0%   { transform: translateX(calc(-50% + 72px)); opacity: 0; }
  55%  { transform: translateX(calc(-50% - 6px)); opacity: 1; }
  76%  { transform: translateX(calc(-50% + 2.5px)); }
  100% { transform: translateX(-50%); }
}
.nmh-banner-cta-tc.coupon-dash-cta, .fash-banner-cta-tc.coupon-dash-cta { animation: couponDashCta 0.6s cubic-bezier(.2,.7,.3,1); }

/* Normal-home footer — edge to edge (cancel .nmh-wrap's 20px side padding)
   and solid black instead of the rotating carousel image bleeding through as
   a colored background at the top. */
#homeFooterNm {
  width: calc(100% + 40px) !important;
  margin-left: -20px !important; margin-right: -20px !important;
  background: #000 !important;
}
#homeFooterNm .footer-bg-img { display: none !important; }
.npc-fabric { position: absolute; inset: -10%; }
.npc-blue   .npc-fabric { background: linear-gradient(100deg,#041022 0%,#082a52 26%,#0d4b8f 50%,#1673c9 72%,#4aa3ec 100%); filter: url(#npcRippleBlue); }
.npc-purple .npc-fabric { background: linear-gradient(100deg,#150f3a 0%,#2c1a5c 28%,#5a3184 52%,#7d4a9e 72%,#9e6fae 100%); filter: url(#npcRipplePurple); }
.npc-ambient {
  position: absolute; top: 50%; left: 17%; width: 78%; height: 220%;
  transform: translate(-50%,-50%); pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,0.17) 0%, rgba(255,255,255,0.06) 35%, transparent 65%);
}
.npc-ripples { position: absolute; left: 16%; top: 50%; width: 1px; height: 1px; z-index: 1; pointer-events: none; }
.npc-wave {
  position: absolute; top: 50%; left: 50%; width: 118px; height: 118px;
  border-radius: 50% !important; border: 6px solid rgba(255,255,255,0.6);
  transform: translate(-50%,-50%) scale(1); opacity: 0.75;
  animation: npcWave 4.2s linear infinite;
}
.npc-blue   .npc-w2 { animation-delay: -1.4s; border-color: rgba(120,200,255,0.55); }
.npc-blue   .npc-w3 { animation-delay: -2.8s; border-color: rgba(160,230,255,0.45); }
.npc-purple .npc-w2 { animation-delay: -1.4s; border-color: rgba(180,210,255,0.5); }
.npc-purple .npc-w3 { animation-delay: -2.8s; border-color: rgba(255,200,235,0.45); }
@keyframes npcWave {
  0%   { transform: translate(-50%,-50%) scale(1); opacity: 0.75; border-width: 6px; }
  55%  { opacity: 0.4; border-width: 3px; }
  100% { transform: translate(-50%,-50%) scale(7); opacity: 0; border-width: 1px; }
}
.npc-stage {
  position: relative; z-index: 2; width: 21%; aspect-ratio: 1/1; min-width: 74px;
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
}
.npc-stage.npc-exit-right { animation: npcOutRight 0.5s cubic-bezier(.5,0,.85,.3) forwards; }
.npc-stage.npc-enter-left { animation: npcInLeft 0.5s cubic-bezier(.15,.8,.25,1) forwards; }
@keyframes npcOutRight { from { opacity:1; transform:translateX(0); } to { opacity:0; transform:translateX(90px); } }
@keyframes npcInLeft  { from { opacity:0; transform:translateX(-90px); } to { opacity:1; transform:translateX(0); } }
.npc-ring {
  position: absolute; inset: -6%; border-radius: 50% !important; padding: 3px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  animation: npcSpin 4s linear infinite; opacity: 0.9;
}
.npc-blue   .npc-ring { background: conic-gradient(from 0deg,#7ee0ff 0deg,#3b82f6 90deg,#1e40af 180deg,#60d3ff 270deg,#7ee0ff 360deg); }
.npc-purple .npc-ring { background: conic-gradient(from 0deg,#38b6ff 0deg,#7b5cff 90deg,#ff5cb8 180deg,#ffb35c 270deg,#38b6ff 360deg); }
@keyframes npcSpin { to { transform: rotate(360deg); } }
.npc-disc {
  position: relative; width: 100%; height: 100%; border-radius: 50% !important;
  background: radial-gradient(circle at 38% 32%, #0e1a2c 0%, #030812 70%);
  box-shadow: 0 6px 22px rgba(0,0,0,0.45); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.npc-disc img { width: 78%; height: 78%; object-fit: contain; }
.npc-flash {
  position: absolute; inset: -6%; border-radius: 50% !important; z-index: 5;
  opacity: 0; pointer-events: none;
}
.npc-blue   .npc-flash { background: radial-gradient(circle,#3b82f6 0%,#1d4ed8 55%,rgba(29,78,216,0) 80%); }
.npc-purple .npc-flash { background: radial-gradient(circle,#7b5cff 0%,#5a3184 55%,rgba(90,49,132,0) 80%); }
.npc-flash.npc-pulse { animation: npcFlash 0.55s ease-in-out; }
@keyframes npcFlash { 0% { opacity:0; } 45% { opacity:1; } 100% { opacity:0; } }
.npc-text {
  position: relative; z-index: 2; margin-left: 6.5%; flex: 1 1 auto;
  height: 2.9em; overflow: hidden; display: flex; align-items: center;
}
.npc-line {
  position: absolute; left: 0; color: #fff;
  font-size: clamp(14px, 3.4vw, 21px); font-weight: 700; line-height: 1.28;
  letter-spacing: 0.1px; max-width: 92%; opacity: 0; transform: translateX(-26px);
}
.npc-line.npc-enter    { animation: npcSlideIn 0.42s cubic-bezier(.2,.7,.25,1) forwards; }
.npc-line.npc-exit     { animation: npcSlideOut 0.28s ease-in forwards; }
.npc-line.npc-exit-big { animation: npcSlideOutBig 0.5s cubic-bezier(.5,0,.85,.3) forwards; }
@keyframes npcSlideIn    { from { opacity:0; transform:translateX(-26px); } to { opacity:1; transform:translateX(0); } }
@keyframes npcSlideOut   { from { opacity:1; transform:translateX(0); } to { opacity:0; transform:translateX(18px); } }
@keyframes npcSlideOutBig{ from { opacity:1; transform:translateX(0); } to { opacity:0; transform:translateX(90px); } }

/* ── Coupon banner swap: dash in from the right with a very slight wiggle ── */
@keyframes couponDash {
  0%   { transform: translateX(72px);  opacity: 0; }
  55%  { transform: translateX(-6px);  opacity: 1; }
  76%  { transform: translateX(2.5px); }
  100% { transform: translateX(0); }
}
.coupon-dash { animation: couponDash 0.6s cubic-bezier(.2,.7,.3,1); }

/* ── Fashion home: rotating store-coupon banner ── */
:is(#home, .stw-prev-stage) .fash-coupon-img {
  display:block; width:calc(100% - 32px); margin:24px 16px 0; aspect-ratio:16/9;
  object-fit:cover; cursor:pointer; border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 14px 36px rgba(0,0,0,0.42); transition:opacity .3s ease;
}
:is(#home, .stw-prev-stage) .fash-coupon-img:not([src]) { display:none; }

/* ── Checkout coupon field ── */
.chk-coupon-row { display: flex; gap: 10px; align-items: stretch; }
.chk-coupon-row .chk-field-input { flex: 1; min-width: 0; text-transform: uppercase; }
.chk-coupon-apply {
  flex-shrink: 0; padding: 0 22px; min-height: 0 !important; border: 1px solid rgba(232,213,163,0.4);
  background: rgba(232,213,163,0.1); color: #e8d5a3; cursor: pointer;
  font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
}
.chk-coupon-apply:active { background: rgba(232,213,163,0.22); }
.chk-coupon-suggest { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.chk-coupon-chip {
  padding: 8px 14px; min-height: 0 !important; border: 1px solid rgba(232,213,163,0.28);
  background: rgba(232,213,163,0.08); color: #e8d5a3; cursor: pointer;
  font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.3px;
  -webkit-tap-highlight-color: transparent;
}
.chk-coupon-chip:active { background: rgba(232,213,163,0.18); }
.chk-coupon-msg { font-family: 'DM Sans', sans-serif; font-size: 12px; margin-top: 8px; min-height: 14px; }

/* ===== PILL TOGGLES — force true pill/tube shape (beats *{border-radius:0!important}) ===== */
.nwsb-pill-toggle{ border-radius:999px !important; }
.nwsb-pill-toggle .nwsb-pill-knob{ border-radius:50% !important; }

/* ===== PAGE GUIDE (#pgGuide) — short card, tall banner, horizontal tips.
   Heights/scroll are also set inline in pgShow() (JS) — these just keep the
   pieces from stretching. Banner height is left to JS so it isn't forced. ===== */
#pgGuide-inner{ max-height:82vh !important; overflow:hidden !important; display:flex !important; flex-direction:column !important; }
#pgGuide .pgg-banner{ flex-shrink:0 !important; }
#pgGuide .pgg-drag, #pgGuide .pgg-eyebrow, #pgGuide .pgg-title, #pgGuide .pgg-body, #pgGuide .pgg-foot, #pgGuide .pgg-rows{ flex-shrink:0 !important; }
#pgGuide .pgg-rows::-webkit-scrollbar{ display:none !important; }

/* ===== TOGGLE FIX — the global [onclick]{min-height:44px} was forcing every
   toggle to 44px tall, turning the thin pills into squares. Undo it. ===== */
.nwsb-pill-toggle, #pref-sound-toggle, #piToggle, .rt-intro-toggle, .nmset-tgl,
#pref-sound-toggle[onclick], .nwsb-pill-toggle[onclick] { min-height:0 !important; }

/* ===== HEALING BODY MAP — remove the wrapper boxes around the figure ===== */
#hbm-profile-mini{ background:transparent !important; border:none !important; padding:0 !important; }

/* ===== HEALTH MALE/FEMALE CATEGORY LISTS — force the dark "Fashion" style
   (image shown, dark glass cards) instead of the nm white-neumorphism look.
   Scoped to male/female only — Choose Your Path (#sub-health-journey) unchanged. ===== */
body.nm-mode #sub-health-male, body.nm-mode #sub-health-female,
body.nm-night #sub-health-male, body.nm-night #sub-health-female,
body.nm-glass #sub-health-male, body.nm-glass #sub-health-female { background:#060c18 !important; }
body.nm-mode #sub-health-male .sub-screen-bg, body.nm-mode #sub-health-female .sub-screen-bg,
body.nm-night #sub-health-male .sub-screen-bg, body.nm-night #sub-health-female .sub-screen-bg { display:block !important; }
body.nm-mode #sub-health-male .hcat-hero-img, body.nm-mode #sub-health-female .hcat-hero-img,
body.nm-night #sub-health-male .hcat-hero-img, body.nm-night #sub-health-female .hcat-hero-img { display:block !important; }
body.nm-mode #sub-health-male .hcat-hero, body.nm-mode #sub-health-female .hcat-hero { background:transparent !important; }
body.nm-mode #sub-health-male .hcat-hero-name, body.nm-mode #sub-health-female .hcat-hero-name,
body.nm-night #sub-health-male .hcat-hero-name, body.nm-night #sub-health-female .hcat-hero-name { color:#fff !important; }
body.nm-mode #sub-health-male .hcat-hero-label, body.nm-mode #sub-health-female .hcat-hero-label { color:#e8d5a3 !important; }
body.nm-mode #sub-health-male .hcat-section-label, body.nm-mode #sub-health-female .hcat-section-label { color:rgba(255,255,255,0.4) !important; }
body.nm-mode #sub-health-male .hcat-item, body.nm-mode #sub-health-female .hcat-item,
body.nm-night #sub-health-male .hcat-item, body.nm-night #sub-health-female .hcat-item,
body.nm-glass #sub-health-male .hcat-item, body.nm-glass #sub-health-female .hcat-item {
  background:rgba(255,255,255,0.05) !important;
  border:1px solid rgba(255,255,255,0.1) !important;
  box-shadow:0 6px 18px rgba(0,0,0,0.3) !important;
}
body.nm-mode #sub-health-male .hcat-item-title, body.nm-mode #sub-health-female .hcat-item-title,
body.nm-night #sub-health-male .hcat-item-title, body.nm-night #sub-health-female .hcat-item-title { color:#fff !important; }
body.nm-mode #sub-health-male .hcat-item-sub, body.nm-mode #sub-health-female .hcat-item-sub,
body.nm-night #sub-health-male .hcat-item-sub, body.nm-night #sub-health-female .hcat-item-sub { color:rgba(255,255,255,0.42) !important; }
body.nm-mode #sub-health-male .hcat-item-icon, body.nm-mode #sub-health-female .hcat-item-icon { color:#e8d5a3 !important; }

/* ===== Remove the big hero banner on My Progress + Word Science — collapse the
   header to a compact bar (back button + title) so the content gets the space ===== */
#sub-my-progress .sub-header, #sub-word-science .sub-header {
  height:auto !important; min-height:0 !important;
  background-image:none !important; background:#060c18 !important;
  padding:12px 18px !important; box-shadow:none !important;
  border-bottom:1px solid rgba(255,255,255,0.06) !important;
  display:flex !important; flex-direction:row !important; align-items:center !important;
  justify-content:flex-start !important; gap:14px !important;
}
#sub-my-progress .sub-header::after, #sub-word-science .sub-header::after,
#sub-my-progress .sub-header::before, #sub-word-science .sub-header::before { display:none !important; }
/* back button in-flow first, so the title starts AFTER it (no overlap) */
#sub-my-progress .sub-header .sub-back, #sub-word-science .sub-header .sub-back {
  position:static !important; top:auto !important; left:auto !important;
  margin:0 !important; flex-shrink:0 !important;
}
#sub-my-progress .sub-header-title, #sub-word-science .sub-header-title { font-size:22px !important; }

/* ===== EXPLORE/SEARCH (#sub-people) — white neumorphic circle avatar + back
   button. The page background here is always light (#eef1f6), so these must
   be styled light unconditionally — not gated behind nm-glass (that class
   wasn't the one active; nm-mode was), which is why they rendered as plain
   black circles/ovals before. ===== */
#sub-people .ig-searchwrap { padding:12px 12px 4px !important; gap:8px !important; }
#sub-people .ig-searchbar { flex:1 1 auto !important; max-width:none !important; height:38px !important; }
#ig-explore-myavatar, #ig-explore-myavatar > img { border-radius:50% !important; }
#ig-explore-myavatar {
  width:34px !important; height:34px !important; min-height:0 !important;
  border:none !important; background:#f0f2f7 !important;
  box-shadow:4px 4px 10px rgba(0,0,0,.13), -3px -3px 8px rgba(255,255,255,.95) !important;
}
#ig-explore-myavatar-init { color:#a8854a !important; }
.ig-people-back {
  width:34px !important; height:34px !important; min-height:0 !important;
  border-radius:50% !important; flex-shrink:0; cursor:pointer;
  border:none !important; background:#f0f2f7 !important;
  box-shadow:4px 4px 10px rgba(0,0,0,.13), -3px -3px 8px rgba(255,255,255,.95) !important;
  display:flex; align-items:center; justify-content:center;
  -webkit-tap-highlight-color:transparent; padding:0 !important;
}
.ig-people-back svg path { stroke:#1a1a2e !important; }
.ig-people-back:active {
  box-shadow:inset 3px 3px 7px rgba(0,0,0,.13), inset -2px -2px 5px rgba(255,255,255,.92) !important;
}

/* Explore grid empty state — centered neumorphic circle, nothing weird below */
.ig-explore-empty {
  grid-column:1 / -1; display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; padding:70px 30px 40px; gap:14px;
}
.ig-explore-empty-circle {
  width:64px; height:64px; border-radius:50% !important; background:#f0f2f7;
  color:rgba(0,0,0,.32); display:flex; align-items:center; justify-content:center;
  box-shadow:6px 6px 14px rgba(0,0,0,.12), -5px -5px 12px rgba(255,255,255,.95);
}
.ig-explore-empty-title { font-size:14px; font-weight:700; color:#1a1a2e; font-family:'DM Sans',sans-serif; }
.ig-explore-empty-sub { font-size:12px; color:rgba(0,0,0,.42); font-family:'DM Sans',sans-serif; max-width:220px; line-height:1.5; }

/* ===== Choose Your Path (#sub-health-journey) — dark "Fashion" style, not white
   neumorphism. Matches the male/female lists. ===== */
body.nm-mode #sub-health-journey, body.nm-night #sub-health-journey,
body.nm-glass #sub-health-journey { background:#060c18 !important; }
body.nm-mode #sub-health-journey .sub-screen-bg, body.nm-night #sub-health-journey .sub-screen-bg { display:block !important; }
body.nm-mode #sub-health-journey .gsel-title, body.nm-mode #sub-health-journey .sub-title,
body.nm-mode #sub-health-journey .sub-title span { color:#fff !important; }
body.nm-mode #sub-health-journey .gsel-sub { color:rgba(255,255,255,0.6) !important; }
body.nm-mode #sub-health-journey .gsel-eyebrow { color:#e8d5a3 !important; }
body.nm-mode #sub-health-journey .brand-name, body.nm-mode #sub-health-journey .brand-name .b,
body.nm-mode #sub-health-journey .brand-name .t { color:#fff !important; }
body.nm-mode #sub-health-journey .gsel-card, body.nm-night #sub-health-journey .gsel-card,
body.nm-glass #sub-health-journey .gsel-card {
  background:transparent !important; border:none !important;
  box-shadow:0 10px 30px rgba(0,0,0,0.45) !important;
}

/* ===== INTRO PAGES — remove the black bottom shadow (it blacked out the
   bottom nav and its icons). Keep only a faint top scrim. ===== */
.sl-intro-vignette{
  background:linear-gradient(to bottom,
    rgba(6,12,24,0.30) 0%, rgba(6,12,24,0.02) 18%, rgba(6,12,24,0) 36%) !important;
}

/* Remove the intro-page shadow overlay COMPLETELY — every intro page across
   the app uses its own *-intro-vignette class (store, cart, wishlist, orders,
   sound bath, word origins, etc). Kill them ALL, not just sl-intro-vignette. */
.sl-intro-vignette, .cart-intro-vignette, .ms-intro-vignette, .nss-intro-vignette,
.oh-intro-vignette, .orders-intro-vignette, .rm-intro-vignette, .sb-intro-vignette,
.wish-intro-vignette {
  display:none !important; background:none !important;
}

/* ===== DOWNLOAD/INSTALL POPUP — must sit ABOVE the settings sub-screen.
   .dl-overlay was z-index:300 in app.css but .sub-screen (Settings) is
   z-index:600, so tapping "Download App" opened the popup invisibly BEHIND
   the settings page. Force it to the very top. ===== */
.dl-overlay { z-index: 2147483000 !important; }
.dl-sheet   { z-index: 2147483001 !important; position: relative; }

/* ===== DOWNLOAD APP — full neumorphic PAGE (play-store style) ===== */
.dl-overlay {
  align-items:stretch !important; justify-content:stretch !important;
  padding:0 !important; background:#e6eaf1 !important;
}
.dl-sheet {
  width:100% !important; max-width:none !important; min-height:100% !important; flex:1 !important;
  border-radius:0 !important; box-shadow:none !important; background:#e6eaf1 !important;
  transform:none !important; animation:none !important;
  display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important;
  padding:48px 30px calc(env(safe-area-inset-bottom,28px) + 44px) !important;
}
.dl-handle { display:none !important; }

/* App logo in a raised neumorphic rounded-square wrapper */
.dl-icon-wrap {
  width:124px !important; height:124px !important; border-radius:32px !important;
  background:#e6eaf1 !important; background-image:none !important; padding:12px !important;
  box-shadow:14px 14px 30px rgba(0,0,0,.16), -12px -12px 26px rgba(255,255,255,.95) !important;
  margin:0 auto 22px !important; overflow:visible !important;
  display:flex; align-items:center; justify-content:center;
}
.dl-app-logo {
  width:100% !important; height:100% !important; object-fit:contain !important; display:block !important;
  border-radius:0 !important; box-shadow:none !important;
}
.dl-eyebrow { font-size:10px !important; letter-spacing:3px !important; color:#a8854a !important; font-weight:700 !important; text-align:center !important; margin-bottom:6px !important; font-family:'DM Sans',sans-serif !important; }
.dl-title { font-size:30px !important; font-weight:800 !important; color:#1a1a2e !important; margin-bottom:6px !important; }
.dl-sub { font-size:12.5px !important; color:rgba(0,0,0,.5) !important; max-width:320px !important; margin:0 auto 20px !important; }

/* play-store style feature row — neumorphic chips */
.dl-features { display:flex; gap:12px; justify-content:center; margin:0 auto 26px; width:100%; max-width:360px; }
.dl-feat { flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 6px; border-radius:18px !important;
  background:#e6eaf1; box-shadow:6px 6px 14px rgba(0,0,0,.13), -5px -5px 12px rgba(255,255,255,.95); }
.dl-feat-ico { width:40px; height:40px; border-radius:50% !important; display:flex; align-items:center; justify-content:center;
  background:#e6eaf1; box-shadow:inset 3px 3px 7px rgba(0,0,0,.12), inset -2px -2px 5px rgba(255,255,255,.92); }
.dl-feat-lbl { font-size:10px; font-weight:700; letter-spacing:.4px; color:rgba(0,0,0,.55); font-family:'DM Sans',sans-serif; text-transform:uppercase; }

#dlViewInstall, #dlViewIOS { width:100% !important; max-width:380px !important; display:flex; flex-direction:column; align-items:center; }

/* big neumorphic gold "Download App" button */
.dl-btn {
  width:100% !important; height:56px !important; margin:0 0 4px !important;
  border-radius:18px !important; border:none !important; cursor:pointer;
  background:linear-gradient(135deg,#e0c085,#c8a96e) !important; color:#07101f !important;
  font-family:'DM Sans',sans-serif !important; font-size:13px !important; font-weight:800 !important;
  letter-spacing:1.5px !important; text-transform:uppercase !important;
  display:flex !important; align-items:center; justify-content:center; gap:9px;
  box-shadow:8px 8px 18px rgba(160,133,74,.35), -6px -6px 14px rgba(255,255,255,.9) !important;
}
.dl-btn:active { box-shadow:inset 4px 4px 9px rgba(120,98,52,.4), inset -3px -3px 7px rgba(255,255,255,.35) !important; }
.dl-cancel { height:44px !important; margin-top:8px !important; color:rgba(0,0,0,.42) !important; font-weight:600 !important; letter-spacing:.5px; }

/* iOS step cards → neumorphic */
.dl-ios-step { border-bottom:none !important; }
.dl-step-num { background:#e6eaf1 !important; box-shadow:4px 4px 9px rgba(0,0,0,.13), -3px -3px 7px rgba(255,255,255,.95) !important; color:#a8854a !important; }
.dl-step-text { color:rgba(0,0,0,.66) !important; }

/* back button on the full-page Download App screen */
.dl-page-back {
  position:absolute !important; top:max(env(safe-area-inset-top,16px),16px) !important; left:16px !important;
  width:44px; height:44px; border:none; border-radius:50% !important; cursor:pointer;
  background:#e6eaf1; box-shadow:5px 5px 12px rgba(0,0,0,.14), -4px -4px 9px rgba(255,255,255,.95);
  display:flex; align-items:center; justify-content:center; z-index:2;
}
.dl-page-back:active { box-shadow:inset 3px 3px 7px rgba(0,0,0,.13), inset -2px -2px 5px rgba(255,255,255,.92); }

/* Cycling caption inside the white store-case interior (above the 4 buttons).
   Reference style: faint eyebrow, bold dark line, gold accent word. One line at
   a time — the JS fades it out and swaps in the next phrase. */
.cwc {
  position:absolute; bottom:51.5%; left:9%; right:9%; z-index:2; text-align:center; pointer-events:none;
}
.cwc-eyebrow {
  font-family:'DM Sans',sans-serif; font-size:9px; font-weight:800; letter-spacing:3px;
  text-transform:uppercase; color:rgba(20,20,32,.38); margin-bottom:4px;
}
.cwc-line {
  font-family:'DM Sans',sans-serif; font-size:19px; font-weight:800; line-height:1.15;
  opacity:1; transform:translateY(0); transition:opacity .4s ease, transform .4s ease;
}
.cwc-line.out { opacity:0; transform:translateY(-8px); }
.cwc-b { color:#15151f; }                                     /* bold dark */
.cwc-g { color:#ffffff; text-shadow:0 1px 4px rgba(0,0,0,.45); }  /* white accent */

/* Fashion / Trend rotating banner on the normal home (above the Fashion button) */
.nmh-fashbanner {
  position:relative; width:100%; margin-top:16px; aspect-ratio:16/9;
  border-radius:22px !important; overflow:hidden; background:#0a0a12; cursor:pointer;
  box-shadow:6px 6px 16px rgba(0,0,0,.22), -3px -3px 8px rgba(255,255,255,.7);
}
.nmh-fashbanner-img {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  opacity:1; transition:opacity .34s ease;
}
.nmh-fashbanner:active { transform:scale(.99); }

/* Same rotating banner on the Fashion (dark) home — dark-theme styling.
   Inset from all edges (padding) and SHARP corners (no border-radius). */
.home-fashbanner {
  position:relative; width:calc(100% - 32px); margin:16px 16px 6px !important;
  aspect-ratio:16/9; overflow:hidden; background:#0a0a12; border-radius:0 !important;
  box-shadow:0 14px 36px rgba(0,0,0,.42); border:1px solid rgba(255,255,255,.08);
}
.home-fashbanner-img {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  opacity:1; transition:opacity .34s ease; border-radius:0 !important;
}

/* ── Animated text overlay shared by both banners ── */
.fb-scrim {
  position:absolute; inset:0; pointer-events:none; z-index:1;
  background:linear-gradient(to bottom, rgba(6,10,20,.80) 0%, rgba(6,10,20,.32) 32%, rgba(6,10,20,0) 60%);
}
.fb-ov {
  position:absolute; left:18px; right:18px; top:16px; z-index:2; pointer-events:none; text-align:left;
}
.fb-eyebrow {
  font-family:'DM Sans',sans-serif; font-size:9px; font-weight:800; letter-spacing:3px;
  color:#e8d5a3; margin-bottom:5px; opacity:1; text-shadow:0 2px 8px rgba(0,0,0,.6);
}
.fb-title {
  font-family:'DM Sans',sans-serif; font-size:14px; font-weight:800; line-height:1.2;
  color:#ffffff; letter-spacing:.2px; opacity:1; max-width:70%;
  /* static gold glow — was an infinite text-shadow animation (repaint every frame) */
  text-shadow:0 2px 12px rgba(0,0,0,.7), 0 0 12px rgba(232,213,163,.42);
}
/* entrance — re-triggered on every image change by toggling .in. NO fill-mode:
   text stays at its base opacity:1 when the entrance isn't actively playing, so
   it can never get stuck invisible. */
@keyframes fbTextIn { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
.fb-ov.in .fb-eyebrow { animation:fbTextIn .55s cubic-bezier(.16,1,.3,1); }
.fb-ov.in .fb-title   { animation:fbTextIn .6s .06s cubic-bezier(.16,1,.3,1); }

/* ═══ TRUE NEUMORPHISM RESTORE (normal home) ═══
   app.css has a global *{border-radius:0 !important} reset which flattened the
   corners of EVERY nmh card (computed radius was 0) — square edge-to-edge cards
   read completely flat no matter the shadow. Re-force every radius (class
   specificity beats * among !important rules) and deepen the light-mode dual
   shadows so the soft-extruded depth is unmistakable. */
.nmh-practice { border-radius:26px !important; position: relative; }
/* Today's Practice artwork sits like a BACKGROUND on the right — BEHIND the text,
   which keeps its original full-width position and may overlap the art. */
.nmh-practice > .nmh-practice-label,
.nmh-practice > .nmh-practice-icon,
.nmh-practice > .nmh-practice-word,
.nmh-practice > .nmh-practice-meaning,
.nmh-practice > .nmh-practice-footer { position: relative; z-index: 2; }
.nmh-practice-img {
  position: absolute; right: 8px; top: 30%; transform: translateY(-50%);
  width: 28%; max-width: 138px; object-fit: contain; display: block;
  z-index: 1; pointer-events: none;
  filter: drop-shadow(3px 4px 6px rgba(163,177,198,0.55)) drop-shadow(-2px -3px 5px rgba(255,255,255,0.72));
}
.nmh-tile { border-radius:22px !important; }
/* ── NowssB Connect features carousel — auto-sliding, one feature at a time ── */
.ncb-carousel {
  width: 100%; border-radius: 22px !important; overflow: hidden; cursor: pointer; position: relative;
  background: #000; box-shadow: 8px 8px 20px rgba(163,177,198,0.5), -6px -6px 14px #ffffff;
}
/* Welcome variant sits inline with margin:0 20px — margin is outside the
   box model, so plain width:100% would overflow past the viewport edge
   (same clash .fash-ncb already solves below). Shrink the width to match. */
#ncbCarouselWelcome { width: calc(100% - 40px) !important; }
.ncb-track { display: flex; transition: transform 0.55s cubic-bezier(0.4,0,0.2,1); will-change: transform; }
.ncb-slide { flex: 0 0 100%; box-sizing: border-box; display: flex; align-items: center; gap: 14px; padding: 24px 20px 30px; }
.ncb-ico { width: 54px; height: 54px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  border-radius: 15px !important; background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.15); }
.ncb-ico svg { width: 27px; height: 27px; display: block; }
.ncb-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ncb-name { font-family: 'DM Sans', sans-serif; font-size: 15.5px; font-weight: 800; color: #fff; letter-spacing: -0.2px; }
.ncb-sub { font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 400; color: rgba(255,255,255,0.62); line-height: 1.35; }
.ncb-btn { width: 38px; height: 38px; flex-shrink: 0; border-radius: 50% !important; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.24); }
.ncb-btn svg { width: 17px; height: 17px; display: block; }
.ncb-dots { position: absolute; bottom: 10px; left: 0; right: 0; display: flex; justify-content: center; gap: 5px; z-index: 2; }
.ncb-dot { width: 5px; height: 5px; border-radius: 50% !important; background: rgba(255,255,255,0.28); transition: all 0.3s; }
.ncb-dot.on { background: #e8d5a3; width: 15px; border-radius: 3px !important; }
/* Fashion variant — square corners + fash width/margins + dark shadow */
.fash-ncb { border-radius: 0 !important; width: calc(100% - 32px) !important; margin: 16px 16px 8px !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.42) !important; border: 1px solid rgba(255,255,255,0.08); }
.nmh-connect-sec {
  width: 100%; border-radius: 24px !important; overflow: hidden; position: relative; cursor: pointer;
  min-height: 470px; padding: 44px 22px 36px;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end;
  background: #0a0e1a;
  box-shadow: 9px 9px 22px rgba(163,177,198,0.55), -7px -7px 16px #ffffff;
}
.nmh-connect-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.nmh-connect-scrim { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(rgba(6,10,22,0.2) 0%, rgba(6,10,22,0.36) 48%, rgba(6,10,22,0.72) 100%); }
.nmh-connect-logo { position: relative; z-index: 2; width: 84px; height: 84px; border-radius: 50% !important; object-fit: cover; margin-bottom: 14px; box-shadow: 0 8px 22px rgba(0,0,0,0.5); }
.nmh-connect-sec .nmh-connect-title, .nmh-connect-sec .nmh-connect-desc, .nmh-connect-sec .nmh-connect-enter { position: relative; z-index: 2; }
.nmh-connect-title { font-family: 'DM Sans', sans-serif; font-size: 21px; font-weight: 800; color: #fff; letter-spacing: -0.3px; text-shadow: 0 2px 12px rgba(0,0,0,0.65); margin-bottom: 8px; }
.nmh-connect-title .accent { color: #e8d5a3; }
.nmh-connect-desc { font-family: 'DM Sans', sans-serif; font-size: 12.5px; font-weight: 400; line-height: 1.6; color: rgba(255,255,255,0.82); text-shadow: 0 1px 6px rgba(0,0,0,0.6); margin-bottom: 18px; max-width: 300px; }
.nmh-connect-enter {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; border: none;
  font-family: 'DM Sans', sans-serif; font-size: 12.5px; font-weight: 800; color: #060c18;
  background: #e8d5a3; padding: 11px 20px; border-radius: 100px !important; min-height: 0 !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.35);
}
.nmh-connect-enter svg { width: 16px; height: 16px; display: block; }
.nmh-connect-enter:active { transform: scale(0.96); }
/* Fashion-home variants — SQUARE corners (match the fashion aesthetic), dark
   shadow + fash width/margins (not neumorphic) */
.fash-connect, .fash-connect-banner { width: calc(100% - 32px) !important; margin-left: 16px !important; margin-right: 16px !important; border-radius: 0 !important; }
.fash-connect-banner img { border-radius: 0 !important; }
.fash-connect { box-shadow: 0 14px 36px rgba(0,0,0,0.45) !important; border: 1px solid rgba(255,255,255,0.08); }
.fash-connect-banner { margin-top: 16px !important; margin-bottom: 8px !important; box-shadow: 0 12px 30px rgba(0,0,0,0.42) !important; border: 1px solid rgba(255,255,255,0.08); }
/* ══════════════════════════════════════════════════════════════════
   NORMAL HOME · the four tiles (.nmh-tile.nmh-tile-art) — three looks,
   picked from Quick Access → Normal Home Tiles and driven by body.nmtile-*:
     nmtile-neuro  — the ORIGINAL neumorphic card (default): soft light
                     surface, gold line SVG in a raised puck, dark text
     nmtile-black  — black card, real feature artwork in a round puck,
                     vertical rule, white Enter pill (no neumorphic halo)
     nmtile-image  — the 16:9 cover artwork
   The Fashion Home has its own independent body.fashtile-* set below.
   ══════════════════════════════════════════════════════════════════ */
.nmh-tile-rule { display: none; width: 1px; align-self: stretch; background: rgba(255,255,255,0.18); }
.nmh-tile-txt { min-width: 0; }
.nmh-tile-picon { display: none !important; width: 100%; height: 100%; object-fit: cover; }

/* ── NEURO (default) — everything the black banner added is off, so the
   base .nmh-tile neumorphic card in app/app.css shows through. Only the
   Enter pill needs styling, since that markup is newer than the card. ── */
/* Standard card. It carries the real feature artwork in its puck, same as the
   Artwork look and the picker's preview — the line SVG the base markup ships
   with is hidden rather than removed, so the other looks can still use it.
   Tighter padding and a smaller puck too: at 24px/48px with a 52px puck the
   card stood 171px tall against 169px wide for three short lines of content. */
body.nmtile-neuro .nmh-tile.nmh-tile-art { position: relative; padding: 18px 16px 44px; }
body.nmtile-neuro .nmh-tile.nmh-tile-art .nmh-tile-icon {
  width: 44px; height: 44px; margin-bottom: 10px !important; overflow: hidden;
}
body.nmtile-neuro .nmh-tile.nmh-tile-art .nmh-tile-icon svg { display: none; }
body.nmtile-neuro .nmh-tile-picon { display: block !important; }
body.nmtile-neuro .nmh-tile-enter {
  position: absolute; right: 14px; bottom: 14px; z-index: 3;
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  background: #f0f2f7; border: none; padding: 6px 12px; border-radius: 20px !important;
  box-shadow: 3px 3px 7px rgba(163,177,198,0.6), -3px -3px 7px #ffffff;
}
body.nmtile-neuro #home-nm.nm-dark .nmh-tile-enter {
  background: #0c0c20; box-shadow: 3px 3px 8px rgba(0,0,0,0.7), -2px -2px 6px rgba(50,50,110,0.28);
}
body.nmtile-neuro .nmh-tile-enter-lbl {
  font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 800;
  letter-spacing: 0.3px; color: #c8a96e;
}
body.nmtile-neuro #home-nm.nm-dark .nmh-tile-enter-lbl { color: #e8d5a3; }
body.nmtile-neuro .nmh-tile-enter-go {
  width: 11px; height: 11px; flex-shrink: 0; border-radius: 0 !important;
  background: none; display: flex; align-items: center; justify-content: center;
}
body.nmtile-neuro .nmh-tile-enter-go svg { width: 11px; height: 11px; display: block; }
body.nmtile-neuro .nmh-tile-enter-go svg path { stroke: #c8a96e; }

/* ── BLACK — the banner card. Same language as .nmh-sec-banner (black card,
   icon, vertical rule, text) stacked to fit the 2x2 grid, Enter pill pinned
   bottom-right. ── */
body.nmtile-black .nmh-tile.nmh-tile-art,
body.nmtile-image .nmh-tile.nmh-tile-art {
  position: relative; padding: 16px 14px 50px; min-height: 150px; overflow: hidden;
  background: #000 !important; border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 10px 26px rgba(0,0,0,0.38) !important;
  display: grid; grid-template-columns: auto 1px 1fr; align-items: center; gap: 11px;
  align-content: start;
}
body.nmtile-black #home-nm.nm-dark .nmh-tile.nmh-tile-art,
body.nmtile-image #home-nm.nm-dark .nmh-tile.nmh-tile-art { box-shadow: 0 10px 26px rgba(0,0,0,0.7) !important; }
/* Glass mode paints .nmh-tile translucent white with !important — these four
   are deliberately black banners in every mode, so out-specify it. */
body.nm-glass.nmtile-black .nmh-tile.nmh-tile-art,
body.nm-glass.nmtile-image .nmh-tile.nmh-tile-art {
  background: #000 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}
body.nmtile-black .nmh-tile-rule { display: block; }
body.nmtile-black .nmh-tile.nmh-tile-art .nmh-tile-title,
body.nmtile-image .nmh-tile.nmh-tile-art .nmh-tile-title { font-size: 13.5px; font-weight: 800; color: #fff; line-height: 1.25; }
body.nmtile-black .nmh-tile.nmh-tile-art .nmh-tile-sub,
body.nmtile-image .nmh-tile.nmh-tile-art .nmh-tile-sub { font-size: 10.5px; color: rgba(255,255,255,0.5); line-height: 1.4; margin-top: 3px; }
/* Round puck carrying the real feature artwork. box-shadow:none kills the
   neumorphic white halo #home-nm:not(.nm-dark) .nmh-tile-icon paints — on a
   black card that inner light reads as a glow ring around every icon. */
body.nmtile-black .nmh-tile.nmh-tile-art .nmh-tile-icon {
  width: 42px; height: 42px; flex-shrink: 0; margin-bottom: 0 !important;
  border-radius: 50% !important; overflow: hidden;
  background: rgba(232,213,163,0.1) !important; border: 1px solid rgba(232,213,163,0.24);
  box-shadow: none !important; display: flex; align-items: center; justify-content: center;
}
body.nmtile-black .nmh-tile.nmh-tile-art .nmh-tile-icon svg { display: none; }
/* #home-nm:not(.nm-dark) .nmh-tile-icon paints the neumorphic halo from an ID
   selector, so killing it needs an ID in the selector too — otherwise the
   white inner light survives and rings every icon on the black card. */
body.nmtile-black #home-nm .nmh-tile.nmh-tile-art .nmh-tile-icon,
body.nmtile-image #home-nm .nmh-tile.nmh-tile-art .nmh-tile-icon { box-shadow: none !important; }
body.nmtile-black .nmh-tile-picon { display: block !important; }
/* The card itself must lose the neumorphic halo too */
body.nmtile-black #home-nm:not(.nm-dark) .nmh-tile.nmh-tile-art,
body.nmtile-image #home-nm:not(.nm-dark) .nmh-tile.nmh-tile-art { box-shadow: 0 10px 26px rgba(0,0,0,0.38) !important; }
/* White Enter pill with the arrow in its own circle wrapper */
body.nmtile-black .nmh-tile-enter, body.nmtile-image .nmh-tile-enter {
  position: absolute; right: 10px; bottom: 10px; z-index: 3;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  background: #fff; border: none; padding: 4px 4px 4px 11px; border-radius: 30px !important;
  box-shadow: none;
}
body.nmtile-black .nmh-tile-enter-lbl, body.nmtile-image .nmh-tile-enter-lbl {
  font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 800;
  letter-spacing: 0.3px; color: #060c18;
}
body.nmtile-black .nmh-tile-enter-go, body.nmtile-image .nmh-tile-enter-go {
  width: 20px; height: 20px; flex-shrink: 0; border-radius: 50% !important;
  background: rgba(6,12,24,0.1); display: flex; align-items: center; justify-content: center;
}
body.nmtile-black .nmh-tile-enter-go svg, body.nmtile-image .nmh-tile-enter-go svg { width: 10px; height: 10px; display: block; }
body.nmtile-black .nmh-tile-enter-go svg path, body.nmtile-image .nmh-tile-enter-go svg path { stroke: #060c18; }

/* ── IMAGE — the 16:9 cover artwork; the icon, rule and DOM text step aside
   because each cover already carries its own title. ── */
body.nmtile-image .nmh-tile.nmh-tile-art {
  display: block !important; padding: 0 !important;
  min-height: 0 !important; aspect-ratio: 16 / 9 !important;
}
body.nmtile-image .nmh-tile-cover, body.nmtile-image .nmh-tile-cover-scrim { display: block; }
body.nmtile-image .nmh-tile-icon, body.nmtile-image .nmh-tile-rule, body.nmtile-image .nmh-tile-txt { display: none !important; }
body.nmtile-image .nmh-tile-enter { bottom: 8px; right: 8px; }

/* ── CORNERS (Normal Home) ── */
body.nmcorner-rounded .nmh-tile.nmh-tile-art { border-radius: 22px !important; }
body.nmcorner-edge .nmh-tile.nmh-tile-art { border-radius: 0 !important; }
/* Traveling gold light — SEQUENTIAL relay: only ONE tile's ring sweeps at a
   time; when it finishes, the next tile's ring starts, and so on. Each tile runs
   the same 10s cycle but the sweep only happens during its own 1/4 slot (0-25%);
   the other 75% it's hidden. Staggered by 2.5s so the four take turns. */
@keyframes tileSeq {
  0%    { --ctang: 0deg;   opacity: 0; }
  0.6%  { --ctang: 0deg;   opacity: 1; }
  25%   { --ctang: 360deg; opacity: 1; }
  25.6% { --ctang: 360deg; opacity: 0; }
  100%  { --ctang: 360deg; opacity: 0; }
}
/* Traveling gold-light ring removed per request. */
.nmh-tile.nmh-tile-art::after { display: none !important; }
.nmh-grid .nmh-tile-art:nth-child(1)::after { animation-delay: 0s; }
.nmh-grid .nmh-tile-art:nth-child(2)::after { animation-delay: 2.25s; }
.nmh-grid .nmh-tile-art:nth-child(3)::after { animation-delay: 4.5s; }
.nmh-grid .nmh-tile-art:nth-child(4)::after { animation-delay: 6.75s; }
.nmh-streak-bar { border-radius:16px !important; }
.nmh-routine { border-radius:20px !important; }
.nmh-quick-btn { border-radius:16px !important; }
.nmh-practice-icon { border-radius:18px !important; }
.nmh-tile-icon { border-radius:16px !important; }
.nmh-logo, .nmh-mode-btn, .nmh-streak-icon, .nmh-practice-arrow, .nmh-routine-arrow { border-radius:50% !important; }
/* stronger classic neumorphic shadows — light theme only (dark keeps its own) */
#home-nm:not(.nm-dark) .nmh-practice { box-shadow:12px 12px 28px rgba(163,177,198,0.62), -9px -9px 22px #ffffff !important; }
#home-nm:not(.nm-dark) .nmh-tile { box-shadow:9px 9px 22px rgba(163,177,198,0.6), -7px -7px 16px #ffffff !important; }
#home-nm:not(.nm-dark) .nmh-streak-bar { box-shadow:8px 8px 18px rgba(163,177,198,0.6), -6px -6px 14px #ffffff !important; }
#home-nm:not(.nm-dark) .nmh-practice-icon,
#home-nm:not(.nm-dark) .nmh-tile-icon { box-shadow:5px 5px 12px rgba(163,177,198,0.55), -4px -4px 10px #ffffff !important; }

/* ===== FASHION SECTIONS EMBEDDED IN THE NORMAL HOME ===== */
/* full-width within nmh-wrap + rounded to match the neumorphic cards, and the
   SAME raised neumorphic dual shadow the practice/tile cards use — every
   section on the normal home reads as soft-extruded, not flat */
#home-nm .word-search-section, #home-nm .krm-section, #home-nm .nss-store-trigger,
#home-nm .nmh-fsec, #home-nm .nmh-greet-img, #home-nm .health-journey-card {
  width:100% !important; margin-left:0 !important; margin-right:0 !important; margin-bottom:0 !important;
  /* every section sits INSIDE a raised neumorphic plate: a surface-colored
     frame + rounded corners + the dual shadow, so the plate is the extruded
     element and the dark content is inset in it */
  border:12px solid #f0f2f7 !important;
  border-radius:28px !important;
  box-shadow:12px 12px 28px rgba(163,177,198,0.7), -9px -9px 22px #ffffff !important;
}
/* dark mode: dark surface frame + the practice card's dark neumorphic shadows */
#home-nm.nm-dark .word-search-section, #home-nm.nm-dark .krm-section,
#home-nm.nm-dark .nss-store-trigger, #home-nm.nm-dark .nmh-fsec, #home-nm.nm-dark .nmh-greet-img {
  border-color:#0c0c20 !important;
  box-shadow:10px 10px 28px rgba(0,0,0,0.88), -5px -5px 18px rgba(50,50,110,0.32) !important;
}
/* the coupon banner sits INSIDE a raised neumorphic plate — a surface-colored
   frame around the image so the card itself is the extruded element */
#home-nm .nmh-greet-img {
  border:12px solid #f0f2f7 !important;
  border-radius:28px !important;
  background-color:#f0f2f7 !important;
}
#home-nm.nm-dark .nmh-greet-img {
  border-color:#0c0c20 !important;
  background-color:#0c0c20 !important;
}
#home-nm .nss-store-trigger { aspect-ratio:3 / 4 !important; }   /* less extreme than the 9:16 on Fashion */

/* Subscription card (normal home) — exact same structure/styling as the
   Fashion Home version (#sub-promo-card inline styles): min-height only
   (no forced aspect-ratio), content-driven so it never clips. */
/* Same 560px as .health-journey-card, so the two big sections stand equal on
   both homes. 9:16 made it 622px — taller than that card — and the old 480px
   was sized for the crossfading stills this used to hold. min-height rather
   than a fixed height because every child is absolutely positioned, so the
   box has nothing to size itself from. */
.nmh-fsec {
  position:relative; width:100%; border-radius:16px !important; overflow:hidden; cursor:pointer;
  min-height:560px; background:#060c18; border:1px solid rgba(232,213,163,0.2);
}
.nmh-fsec-bg { position:absolute; inset:0; background-size:cover; background-position:center; }
.nmh-fsec-fade { position:absolute; inset:0; background:linear-gradient(to bottom, rgba(6,12,24,0.0) 0%, rgba(6,12,24,0.15) 40%, rgba(6,12,24,0.72) 100%); }

/* Fashion-Home quick-tiles (Sound Library / My Progress / Word Science /
   Profile) — 2x2, and built like the app's black banners: black card,
   icon puck, vertical rule, title + subtitle, Enter pill bottom-right.
   The 16:9 cover artwork these used to carry is gone. */
.home-grid { grid-template-columns: 1fr 1fr !important; }
.home-tile {
  position: relative; aspect-ratio: auto !important; min-height: 132px !important;
  padding: 14px 12px 44px !important; overflow: hidden;
  background: #000 !important; border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 18px !important; box-shadow: 0 10px 26px rgba(0,0,0,0.42) !important;
  display: grid !important; grid-template-columns: auto 1px 1fr; align-items: center; gap: 10px;
  align-content: start;
}
/* Round wrapper holding the real feature artwork (from the Everything on
   NowssB page) instead of a line SVG. */
.home-tile-icon {
  width: 42px; height: 42px; flex-shrink: 0; border-radius: 50% !important;
  background: rgba(232,213,163,0.1); border: 1px solid rgba(232,213,163,0.24);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.home-tile-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-tile-rule { width: 1px; align-self: stretch; background: rgba(255,255,255,0.18); }
.home-tile-txt { min-width: 0; }
.home-tile-title { font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 800; color: #fff; line-height: 1.25; }
.home-tile-sub { font-family: 'DM Sans', sans-serif; font-size: 10px; color: rgba(255,255,255,0.5); line-height: 1.4; margin-top: 3px; }
/* White Enter pill with the arrow in its own circle wrapper */
.home-tile-enter {
  position: absolute; bottom: 10px; right: 10px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  background: #fff; border: none;
  padding: 4px 4px 4px 11px; border-radius: 30px !important;
}
.home-tile-enter-lbl {
  font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 800;
  letter-spacing: 0.3px; color: #060c18;
}
.home-tile-enter-go {
  width: 20px; height: 20px; flex-shrink: 0; border-radius: 50% !important;
  background: rgba(6,12,24,0.1); display: flex; align-items: center; justify-content: center;
}
.home-tile-enter-go svg { width: 10px; height: 10px; display: block; }

/* ===== EXPLORE (#sub-people) — header + search below + centered empty ===== */
/* the scroll area flows BELOW the header/search now (was absolute-filling) */
#sub-people .ig-scroll {
  position:relative !important; inset:auto !important; top:auto !important; left:auto !important; right:auto !important; bottom:auto !important;
  flex:1 1 auto !important; min-height:0 !important; padding-top:6px !important;
}
.ig-people-header {
  display:flex; align-items:center; gap:12px; flex-shrink:0;
  padding:max(env(safe-area-inset-top,12px),12px) 16px 8px; background:#eef1f6;
}
.ig-people-htitle { flex:1; font-family:'DM Sans',sans-serif; font-size:20px; font-weight:800; color:#1a1a2e; letter-spacing:.2px; }
.ig-people-htitle span { color:#c8a96e; }
.ig-people-back { color:#1a1a2e; }
.ig-people-searchrow { flex-shrink:0; padding:2px 16px 12px; background:#eef1f6; }
.ig-people-searchrow .ig-searchbar { width:100% !important; flex:1 1 auto !important; height:40px !important; }
/* header avatar keeps its neumorphic circle */
#sub-people .ig-people-header #ig-explore-myavatar { width:38px !important; height:38px !important; }

/* empty state vertically centered in the remaining space */
#sub-people .ig-explore-empty { min-height:calc(100vh - 240px) !important; justify-content:center !important; }

/* ══ GLASS BLUR RESTORED — header + bottom nav bars ONLY ═════════════════════
   The blanket blur removal (perf) fixed the Fashion-home stutter, but the user
   wants the frosted glass back on the fixed header and the bottom nav bars.
   These are small, always-fixed areas, so the blur cost is negligible.
   Appended at end-of-file so it beats the earlier `backdrop-filter:none` rules.
   Blur amount later turned down from 14px to 6px — these bars stay mounted
   over scrolling content the whole time (Connect feed, Fashion home), so the
   browser has to recompute the blur against whatever's behind them on every
   scroll frame; a heavy blur radius there was the main cause of the jank. */
.home-header {
  -webkit-backdrop-filter: blur(6px) saturate(1.3) !important;
          backdrop-filter: blur(6px) saturate(1.3) !important;
}
/* Fashion (dark) nav — translucent so the glass reads */
body:not(.nm-mode) #ig-bottomnav, body:not(.nm-mode) #ig-social-nav {
  background: rgba(8,12,22,0.64) !important;
  -webkit-backdrop-filter: blur(6px) saturate(1.2) !important;
          backdrop-filter: blur(6px) saturate(1.2) !important;
}
/* Neumorphism (light) nav — translucent light glass */
body.nm-mode #ig-bottomnav, body.nm-mode #ig-social-nav {
  background: rgba(240,242,247,0.70) !important;
  -webkit-backdrop-filter: blur(6px) saturate(1.2) !important;
          backdrop-filter: blur(6px) saturate(1.2) !important;
}
/* Nav icons: show the ORIGINAL images with NO tint/effect in BOTH themes
   (Fashion + neumorphism) so Connect looks identical from either home. Active
   is indicated by the gold LABEL text only, not a gold icon. */
#ig-social-nav .ig-social-img, #ig-bottomnav .ig-nav-img,
body:not(.nm-mode) #ig-social-nav .ig-social-img, body:not(.nm-mode) #ig-bottomnav .ig-nav-img,
body.nm-mode #ig-social-nav .ig-social-img, body.nm-mode #ig-bottomnav .ig-nav-img,
body:not(.nm-mode) #ig-social-nav .ig-social-btn.active .ig-social-img,
body:not(.nm-mode) #ig-bottomnav .ig-nav-btn.active .ig-nav-img,
body.nm-mode #ig-social-nav .ig-social-btn.active .ig-social-img,
body.nm-mode #ig-bottomnav .ig-nav-btn.active .ig-nav-img {
  filter: none !important;
  opacity: 1 !important;
}
/* profile avatar in the social nav — bigger so it's clearly visible */
body.nm-mode #ig-social-nav #igsn-me-av,
#ig-social-nav #igsn-me-av { width: 32px !important; height: 32px !important; border: 1.5px solid rgba(0,0,0,0.18) !important; }

/* Settings: NO blur (a glass background image is used there instead) */
#sub-social .sg, .ss-section {
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
}
/* Static glass background for the settings screen — a single paint, so it gives
   the frosted-glass look with ZERO per-frame GPU cost (unlike backdrop blur).
   #sub-social is position:fixed, so the image stays put while the list scrolls
   over it (no scroll repaint). A dark scrim keeps the white text readable. */
#sub-social {
  background:
    linear-gradient(rgba(6,10,20,0.34), rgba(6,10,20,0.46)),
    url('assets/media/image/5e423130c989f85a3ea9b85d2c9e2d4fad7e62803a9fe672-00a26ad7.webp') center center / cover no-repeat !important;
}
#sub-social #ss-main-view, #sub-social .ss-tab-content, #sub-social #ss-content-settings {
  background: transparent !important;
}
/* Fashion settings: hide the opaque photo banner so the glass image shows from
   the top of the screen (nm-mode already hides it). */
body:not(.nm-mode):not(.nm-night) #sub-social .menu-banner { display: none !important; }
/* Custom background behind the hamburger menu — FASHION (dark) home only.
   menu-drawer is position:fixed → static, no scroll repaint, no GPU cost.
   Neumorphism (light) home keeps its default menu background. */
body:not(.nm-mode) #menuDrawer.menu-drawer {
  background:
    linear-gradient(rgba(6,10,20,0.58), rgba(6,10,20,0.7)),
    url('assets/media/image/e63a406321939307b4f5766455fb40da4824ca464c5af1da-68cce823.webp') center center / cover no-repeat !important;
}
/* Custom background behind the Settings screen — FASHION (dark) home only.
   #sub-social's default background is a 72%-opacity black (glass overlay),
   which let the Fashion home hero bleed through underneath it; this replaces
   that with an opaque image + legibility gradient. */
body:not(.nm-mode):not(.nm-night) #sub-social {
  background:
    linear-gradient(rgba(6,10,20,0.58), rgba(6,10,20,0.7)),
    url('assets/media/image/aecc28bf1c4647509602fe0fd559f4ec7ead515042a54d4e-1d7fd108.webp') center center / cover no-repeat !important;
}
/* Inset the menu rows so they sit INSIDE the glass panel (L/R padding).
   Fashion (dark) menu only — the glass block image is centered, the rows must
   not spill past its edges. Rounds each section group into a floating pill. */
body:not(.nm-mode) #menuDrawer .menu-section-group {
  margin-left: 24px !important; margin-right: 24px !important;
  border-radius: 20px !important; overflow: hidden !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
}
body:not(.nm-mode) #menuDrawer .menu-section-label { padding-left: 32px !important; }
body:not(.nm-mode) #menuDrawer .menu-footer-note {
  padding-left: 24px !important; padding-right: 24px !important;
}

/* ═══════════════════════════════════════════════════════════════
   THE NORMAL HOME'S MENU
   Same page as the Fashion menu — floating section groups inset from the
   edge, the same label and footer padding — wearing neumorphism instead of
   dark glass. Before this it was full-bleed rows on a 72%-opaque panel, so
   the home page underneath showed straight through the list.
═══════════════════════════════════════════════════════════════ */
/* Opaque, so nothing behind it reads through. */
body.nm-mode #menuDrawer.menu-drawer {
  background: #eef1f7 !important;
}
body.nm-night #menuDrawer.menu-drawer {
  background: #0c0c20 !important;
}
/* The sticky header row carries its dark colour as an inline style, which
   only a rule this specific can reach. */
body.nm-mode #menuDrawer > div[style*="sticky"] {
  background: #eef1f7 !important;
  border-bottom: 1px solid rgba(0,0,0,0.07) !important;
}
body.nm-night #menuDrawer > div[style*="sticky"] {
  background: #0c0c20 !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
}
body.nm-mode #menuDrawer > div[style*="sticky"] span:last-child { color: #1a1a2e !important; }
body.nm-mode #menuDrawer .nwsb-back-ico { filter: invert(1) brightness(0.35); }

/* The same floating groups as Fashion, raised rather than outlined. */
body.nm-mode #menuDrawer .menu-section-group {
  margin-left: 24px !important; margin-right: 24px !important;
  border-radius: 20px !important; overflow: hidden !important;
  border: none !important;
  background: #f0f2f7 !important;
  box-shadow: 7px 7px 18px rgba(0,0,0,0.14), -5px -5px 14px rgba(255,255,255,0.97) !important;
}
body.nm-night #menuDrawer .menu-section-group {
  background: #16163c !important;
  box-shadow: 8px 8px 22px rgba(0,0,0,0.88), -4px -4px 14px rgba(50,50,110,0.32) !important;
}
body.nm-mode #menuDrawer .menu-section-label { padding-left: 32px !important; color: #c8a96e !important; }
body.nm-night #menuDrawer .menu-section-label { color: #e8d5a3 !important; }
body.nm-mode #menuDrawer .menu-footer-note {
  padding-left: 24px !important; padding-right: 24px !important;
}

/* The rows themselves: on a raised card the row needs no fill of its own,
   and the divider is a hairline in the surface rather than a light seam. */
body.nm-mode #menuDrawer .menu-nav-item {
  background: transparent !important;
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
}
body.nm-night #menuDrawer .menu-nav-item {
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
body[class] #menuDrawer .menu-section-group .menu-nav-item:last-child { border-bottom: none !important; }
body.nm-mode #menuDrawer .menu-nav-item:active {
  box-shadow: inset 5px 5px 12px rgba(0,0,0,0.10), inset -4px -4px 10px rgba(255,255,255,0.95) !important;
}
body.nm-night #menuDrawer .menu-nav-item:active {
  box-shadow: inset 6px 6px 14px rgba(0,0,0,0.85), inset -3px -3px 10px rgba(50,50,110,0.3) !important;
}
body.nm-mode #menuDrawer .menu-nav-label { color: #1a1a2e !important; }
body.nm-mode #menuDrawer .menu-nav-sub   { color: rgba(0,0,0,0.45) !important; }
body.nm-mode #menuDrawer .menu-nav-chev  { color: rgba(0,0,0,0.28) !important; }
body.nm-night #menuDrawer .menu-nav-label { color: #fff !important; }
body.nm-night #menuDrawer .menu-nav-sub   { color: rgba(255,255,255,0.5) !important; }
body.nm-night #menuDrawer .menu-nav-chev  { color: rgba(255,255,255,0.3) !important; }
body.nm-mode #menuDrawer .menu-footer-note { color: rgba(0,0,0,0.4) !important; }
body.nm-night #menuDrawer .menu-footer-note { color: rgba(255,255,255,0.4) !important; }
/* The icon tiles read as pressed-in wells, the way every other icon on the
   neumorphic home does. */
body.nm-mode #menuDrawer .menu-nav-icon {
  background: #eef1f7 !important; border: none !important;
  box-shadow: inset 3px 3px 7px rgba(0,0,0,0.13), inset -2px -2px 6px rgba(255,255,255,1) !important;
}
body.nm-night #menuDrawer .menu-nav-icon {
  background: #12122e !important; border: none !important;
  box-shadow: inset 3px 3px 8px rgba(0,0,0,0.85), inset -2px -2px 6px rgba(50,50,110,0.3) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   WORD / MEANING SEARCH — glassmorphism reskin matching the reference EXACTLY:
   black + floating-crystal page bg, one transparent frosted glass panel with
   logo+title top row, divider, search pill, "Focus on details" gem card and an
   Explore button. No backdrop blur (static images only) = no GPU cost. */
#sub-word-search, #sub-meaning-search, #sub-explore-choice, #sub-search-choice {
  background:
    linear-gradient(rgba(0,0,0,0.66), rgba(0,0,0,0.66)),
    url('assets/media/image/1c12cb9573b3f16c3cbc50dcc52ff8d657e730134b46965f-7e48543a.webp') center center / cover no-repeat #000 !important;
}
#sub-word-search .ws-page-body, #sub-meaning-search .ms-page-body { background: transparent !important; }
#sub-word-search .sub-header, #sub-meaning-search .sub-header {
  background: transparent !important; border-bottom: none !important;
}

/* Transparent frosted GLASS PANEL — real backdrop-filter:blur over the
   screen's own crystal background, no baked-in photo. Bigger card (small
   margins), strongly rounded corners + overflow:hidden so the glass fills
   edge-to-edge as a CURVED panel. A faint frost overlay keeps it uniform. */
.wsg-card {
  position: relative; margin: 6px 16px 12px; border-radius: 26px !important;
  padding: 44px 24px 44px; overflow: hidden;
  min-height: calc(var(--full-height, 100vh) - 190px);
  display: flex; flex-direction: column; justify-content: center; gap: 30px;
  background: transparent;
  /* just a dark float shadow — the AMBIENT light is the traveling arc below,
     not a pulsating halo */
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}
/* traveling light — a conic-gradient arc spinning behind the panel. The card
   clips it (overflow:hidden + rounded), and ::after re-draws the glass inset by
   2px, so only a thin ring of moving light shows around the panel edge. Uses
   transform:rotate only (works in every WebView; no @property / mask needed). */
.wsg-card::before {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  top: 50%; left: 50%; width: 240%; height: 240%; transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg,
    rgba(140,190,255,0) 0deg,
    rgba(140,190,255,0) 205deg,
    rgba(140,190,255,0.35) 270deg,
    rgba(185,220,255,0.8) 320deg,
    rgba(255,255,255,1) 345deg,
    rgba(185,220,255,0.8) 359deg,
    rgba(140,190,255,0) 360deg);
  animation: wsgTravel 5s linear infinite;
  will-change: transform;
}
.wsg-card::after {
  content: ''; position: absolute; z-index: 1; inset: 2px; border-radius: 24px; pointer-events: none;
  background:
    linear-gradient(rgba(4,8,16,0.45), rgba(4,8,16,0.45)),
    linear-gradient(155deg, rgba(244,248,253,0.16), rgba(214,228,244,0.06) 55%, rgba(244,248,253,0.13));
  background-color: rgba(230,238,248,0.09);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 0 90px rgba(255,255,255,0.07);
}
.wsg-card > * { position: relative; z-index: 2; flex-shrink: 0; }   /* pills keep their height — never squished/cropped */
@keyframes wsgTravel { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* top row: circular glass logo + NowssB title / by Nowsbansiu, subtitle */
.wsg-top { display: flex; align-items: center; gap: 16px; }
.wsg-logo {
  position: relative;
  width: 94px; height: 94px; flex-shrink: 0; border-radius: 50% !important;
  display: flex; align-items: center; justify-content: center;
  /* dark glass crystal ball (provided asset) — zoomed in (135%). border-radius
     clips the ball to a circle; NO overflow:hidden so the ripple rings can
     expand outward past the ball. */
  background: url('assets/media/image/09a1f93144857e23fdb16609076df899fa8fc93d338027d4-952fd52d.webp') center center / 135% no-repeat;
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
}
.wsg-logo img { position: relative; z-index: 2; width: 62px; height: 62px; object-fit: contain; opacity: 1; }
/* PRACTICE-BUTTON animation — the same expanding sonar rings the player's play
   orb uses (.sp-wm-ripple / @keyframes ripple), two staggered rings. */
.wsg-logo::before, .wsg-logo::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; z-index: 1;
  border: 1.5px solid rgba(200,232,245,0.30);
  animation: wsgRipple 3.2s ease-out infinite;
}
.wsg-logo::after { animation-delay: 1.6s; }
@keyframes wsgRipple {
  0%   { transform: scale(0.92); border-color: rgba(200,232,245,0.32); opacity: 1; }
  60%  { transform: scale(1.14); border-color: rgba(200,232,245,0.10); }
  100% { transform: scale(1.3);  border-color: rgba(200,232,245,0);    opacity: 0; }
}
.wsg-brandcol {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; text-align: left;
  padding: 0; background: none; border: none;
}
/* stylized NowssB wordmark image — replaces the plain text + glass box frame.
   Big + sharp: fetched at h_600/q_auto:best (see index.html) so it stays
   crisp at this display size instead of upscaling a small source. */
.wsg-logo-img { height: 148px; width: auto; max-width: 260px; object-fit: contain; display: block; }
/* header block: tagline + logo/brand row + instruction — brand styling, one line */
.wsg-head { display: flex; flex-direction: column; gap: 12px; }
.wsg-tagline {
  font-size: 13.5px !important; font-weight: 600 !important; letter-spacing: 0.8px !important;
  color: #f0dcae !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-align: center; text-shadow: 0 1px 5px rgba(0,0,0,0.65);
}
.wsg-tagline strong { color: #ffe9b8 !important; font-weight: 800; }
/* caption pinned to the BOTTOM of the glass panel — absolute so it never shifts
   the pills / flex layout of the card (and doesn't grow the card) */
.wsg-below {
  position: absolute; left: 0; right: 0; bottom: 16px; z-index: 3; margin: 0;
  text-align: center; font-family: 'DM Sans', sans-serif;
  font-size: 13px; letter-spacing: 2px; text-transform: uppercase; font-weight: 800;
  color: rgba(255,255,255,0.92); text-shadow: 0 1px 8px rgba(0,0,0,0.85); pointer-events: none;
}
.ws-page-hint, .ms-page-hint {
  text-align: center; margin: 16px 24px calc(env(safe-area-inset-bottom,20px) + 24px) !important; font-family: 'DM Sans', sans-serif;
  font-size: 12.5px !important; line-height: 1.45 !important; color: rgba(255,255,255,0.5) !important;
  white-space: normal; overflow: visible; text-overflow: clip;
}
.ws-page-hint strong, .ms-page-hint strong { color: rgba(255,255,255,0.8) !important; font-weight: 700; }
.wsg-title {
  font-family: 'DM Sans', sans-serif; font-weight: 800; letter-spacing: -0.5px;
  font-size: 33px; line-height: 1; color: #f4f7fb;
  text-shadow: 0 2px 12px rgba(0,0,0,0.35);
}
.wsg-sub {
  font-family: 'DM Sans', sans-serif; font-weight: 400; font-size: 13px;
  color: rgba(255,255,255,0.6); margin-top: 4px; white-space: nowrap;
}
.wsg-instr {
  font-size: 12.5px !important; font-weight: 300 !important; letter-spacing: 0.4px !important;
  color: rgba(255,255,255,0.62) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-align: center;
}
.wsg-instr strong { color: #ffffff !important; font-weight: 700; }
/* consolidated tagline stack — the fashion trend + "without a dictionary" +
   "enter a word" lines all sit here, one after another, below the brand. */
.wsg-lines { display: flex; flex-direction: column; align-items: center; gap: 5px; margin-top: 2px; }
.wsg-lines .wsg-instr { margin-top: 7px; }   /* "enter a word" a little below the cycling tagline */
/* the tagline is a single line that CYCLES through phrases one after another
   (fade out → swap → fade in), so it never adds height / shifts the pills */
.wsg-cycle { transition: opacity 0.4s ease; }
/* header Words|Meaning switch — compact segmented toggle, white active segment */
.wsg-switch {
  display: flex; gap: 3px; margin: 0 auto; padding: 3px;
  border-radius: 9px !important; background: rgba(255,255,255,0.10); border: none;
}
.wsg-switch-btn {
  border: none; cursor: pointer; padding: 6px 16px; border-radius: 6px !important;
  min-height: 0 !important; height: auto !important;
  font-family: 'DM Sans', sans-serif; font-size: 12.5px; font-weight: 700; line-height: 1;
  color: rgba(255,255,255,0.6); background: transparent;
}
.wsg-switch-btn.active { color: #06101f; background: #ffffff; }
/* choosers must sit ABOVE the search page they open from (same .sub-screen
   z-index + earlier in DOM = they were opening BEHIND it). */
#sub-explore-choice, #sub-search-choice { z-index: 700 !important; }

/* thin divider line under the header row */
.wsg-divider { height: 1px; background: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.28), rgba(255,255,255,0.02)); }

/* search pill: dot icon + "Enter something…" + chevron.
   Smoky-glass fill so the pill reads clearly on the bright glass panel. */
.wsg-search {
  display: flex; align-items: center; gap: 12px; padding: 0 8px 0 20px;
  height: 62px; border-radius: 31px !important;
  background: rgba(5,7,12,0.62);
  border: 1px solid rgba(255,255,255,0.26);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 6px 20px rgba(0,0,0,0.3);
}
.wsg-search-dot {
  width: 16px; height: 16px; flex-shrink: 0; border-radius: 50% !important;
  border: 4px solid rgba(255,255,255,0.55); box-sizing: border-box;
}
.wsg-search input {
  flex: 1; min-width: 0; background: transparent; border: none; outline: none;
  font-family: 'DM Sans', sans-serif; font-size: 17px; color: #eef3f8;
}
.wsg-search input::placeholder { color: rgba(255,255,255,0.5); }
.wsg-search-go {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 50% !important;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.22);
}
.wsg-search-go:active { background: rgba(255,255,255,0.22); }

/* ── Traveling light — SEQUENTIAL: the arc sweeps all the way around the search
   bar, and only once it finishes does the round button's arc sweep, then back to
   the bar (they never run together). Warm-white light. Masked conic-gradient
   border ring + @property angle sweep (WebView-safe, same trick as the menu). */
@property --wsgang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
/* bar lit during the first half of the 5s cycle, hidden during the second half */
@keyframes wsgBarSeq {
  0%   { --wsgang: 0deg;   opacity: 1; }
  46%  { --wsgang: 360deg; opacity: 1; }
  50%  { --wsgang: 360deg; opacity: 0; }
  100% { --wsgang: 360deg; opacity: 0; }
}
/* button lit during the second half, hidden during the first */
@keyframes wsgGoSeq {
  0%   { --wsgang: 0deg;   opacity: 0; }
  50%  { --wsgang: 0deg;   opacity: 0; }
  54%  { --wsgang: 0deg;   opacity: 1; }
  96%  { --wsgang: 360deg; opacity: 1; }
  100% { --wsgang: 360deg; opacity: 0; }
}
.wsg-search { position: relative; }
.wsg-search > * { position: relative; z-index: 2; }
.wsg-search::before {
  content: ''; position: absolute; inset: 0; border-radius: 31px; padding: 1.6px;
  pointer-events: none; z-index: 1;
  background: conic-gradient(from var(--wsgang),
    transparent 0deg, transparent 248deg,
    rgba(255,214,150,0.5) 312deg, #fff4e2 344deg, rgba(255,214,150,0.5) 352deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: wsgBarSeq 5s linear infinite; will-change: --wsgang, opacity;
}
.wsg-search-go { position: relative; }
.wsg-search-go img { position: relative; z-index: 2; }
.wsg-search-go::before {
  content: ''; position: absolute; inset: -1px; border-radius: 50%; padding: 1.6px;
  pointer-events: none; z-index: 1;
  background: conic-gradient(from var(--wsgang),
    transparent 0deg, transparent 230deg,
    rgba(255,214,150,0.55) 300deg, #fff4e2 340deg, rgba(255,214,150,0.55) 352deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: wsgGoSeq 5s linear infinite; will-change: --wsgang, opacity;
}

/* suggestion card — now a horizontal, auto-rotating, user-scrollable carousel:
   the card is the fixed frame; slides scroll inside it, one word at a time. */
.wsg-detail {
  padding: 0 !important; overflow: hidden;
  border-radius: 28px !important;
  background: rgba(5,7,12,0.62);
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.24), 0 6px 20px rgba(0,0,0,0.28);
}
.wsg-carousel {
  display: flex; width: 100%; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; -ms-overflow-style: none;
}
.wsg-carousel::-webkit-scrollbar { display: none; height: 0; }
.wsg-slide {
  flex: 0 0 100%; box-sizing: border-box; scroll-snap-align: center;
  display: flex; align-items: center; gap: 18px; padding: 22px 22px; cursor: pointer;
}
/* diamond gem — the source PNG has a BLACK background; mix-blend-mode:screen
   knocks the black out so only the bright crystal shows (matches reference,
   no black box). border-radius rounds the corners as a fallback. */
.wsg-gem {
  width: 78px; height: 84px; flex-shrink: 0; border-radius: 20px !important;
  overflow: hidden;
  background: url('assets/media/image/7446c532b9653961e0359e282fcd08e3e5ee5b119ca584a5-89bba1aa.webp') center center / cover no-repeat;
}
/* themed SVG icon (used on every slide except the first "Focus"/diamond one) */
.wsg-ico {
  width: 92px; height: 120px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.wsg-ico-svg {
  width: 62px; height: 62px;
  filter: drop-shadow(0 4px 14px rgba(255,255,255,0.18)) drop-shadow(0 2px 8px rgba(0,0,0,0.4));
}
.wsg-detail-title { font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 20px; color: #f2f6fa; }
.wsg-detail-sub { font-family: 'DM Sans', sans-serif; font-weight: 400; font-size: 16px; line-height: 1.35; color: rgba(255,255,255,0.6); margin-top: 4px; }

/* ══ EXPLORE CHOOSER PAGE (#sub-explore-choice) — Words vs Meaning ══ */
#sub-explore-choice .exc-body, #sub-search-choice .exc-body {
  position: relative; z-index: 1; display: flex; flex-direction: column;
  flex: 1 1 auto; min-height: 0; box-sizing: border-box;
  padding: 12px 22px calc(env(safe-area-inset-bottom,24px) + 34px);
}
#sub-explore-choice .exc-hero, #sub-search-choice .exc-hero { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 28px; }
#sub-explore-choice .exc-eyebrow, #sub-search-choice .exc-eyebrow {
  font-family: 'DM Sans', sans-serif; font-size: 11px; letter-spacing: 3px; text-transform: uppercase;
  color: rgba(255,255,255,0.5); margin-bottom: 12px;
}
#sub-explore-choice .exc-title, #sub-search-choice .exc-title {
  font-family: 'DM Sans', sans-serif; font-weight: 800; font-size: 40px; line-height: 1.05;
  letter-spacing: -0.5px; color: #f4f7fb; text-shadow: 0 2px 16px rgba(0,0,0,0.5);
}
#sub-explore-choice .exc-sub, #sub-search-choice .exc-sub {
  font-family: 'DM Sans', sans-serif; font-size: 16px; color: rgba(255,255,255,0.6); margin-top: 12px; max-width: 300px;
}
#sub-explore-choice .exc-options, #sub-search-choice .exc-options { display: flex; flex-direction: column; gap: 16px; }
#sub-explore-choice .exc-opt, #sub-search-choice .exc-opt {
  display: flex; align-items: center; gap: 16px; width: 100%; text-align: left; cursor: pointer;
  padding: 22px 22px; border-radius: 0 !important;
  background: rgba(5,7,12,0.55); border: 1px solid rgba(255,255,255,0.24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.26), 0 10px 30px rgba(0,0,0,0.4);
}
#sub-explore-choice .exc-opt:active, #sub-search-choice .exc-opt:active { background: rgba(20,26,36,0.7); }
#sub-explore-choice .exc-opt-ico, #sub-search-choice .exc-opt-ico {
  width: 40px; height: 40px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
#sub-explore-choice .exc-opt-ico img, #sub-search-choice .exc-opt-ico img { width: 100%; height: 100%; object-fit: contain; display: block; }
#sub-explore-choice .exc-opt-divider, #sub-search-choice .exc-opt-divider { width: 1px; align-self: stretch; background: rgba(255,255,255,0.18); flex-shrink: 0; }
#sub-explore-choice .exc-opt-txt, #sub-search-choice .exc-opt-txt { flex: 1; min-width: 0; }
#sub-explore-choice .exc-opt-title, #sub-search-choice .exc-opt-title { font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 21px; color: #f2f6fa; }
#sub-explore-choice .exc-opt-sub, #sub-search-choice .exc-opt-sub { font-family: 'DM Sans', sans-serif; font-size: 14px; color: rgba(255,255,255,0.55); margin-top: 3px; }
#sub-explore-choice .exc-opt-chev, #sub-search-choice .exc-opt-chev { flex-shrink: 0; color: rgba(255,255,255,0.4); }

/* Explore button */
.wsg-explore {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  width: 100%; height: 64px; border-radius: 32px !important; cursor: pointer;
  font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 20px; color: #f4f7fb;
  background: rgba(5,7,12,0.62);
  border: 1px solid rgba(255,255,255,0.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 8px 24px rgba(0,0,0,0.32);
}
.wsg-explore:active { background: rgba(255,255,255,0.2); }
.wsg-explore svg { display: block; }

/* ══════════════════════════════════════════════════════════════════════════
   FASHION HERO — "all features" icon button (right of the NowssB title) with a
   traveling light ring, and the features menu it opens (#sub-features). */
.hero-feat-btn {
  position: relative; width: 68px; height: 68px; flex-shrink: 0;
  border: none; padding: 0; cursor: pointer;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 6px 18px rgba(0,0,0,0.35);
  display: flex; align-items: center; justify-content: center;
}
/* traveling light RING (masked to an annulus) around the circular wrapper. */
.hero-feat-btn::before {
  content: ''; position: absolute; inset: -3px; border-radius: 50%; z-index: 0; pointer-events: none;
  background: conic-gradient(from 0deg,
    rgba(232,213,163,0) 0deg, rgba(232,213,163,0) 250deg,
    rgba(232,213,163,0.6) 312deg, rgba(255,255,255,1) 345deg,
    rgba(232,213,163,0.6) 354deg, rgba(232,213,163,0) 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  animation: wsgSpinBtn 3.4s linear infinite; will-change: transform;
}
.hero-feat-btn img { position: relative; z-index: 1; width: 60px; height: 60px; object-fit: contain; display: block; border-radius: 50% !important; }
@keyframes wsgSpinBtn { to { transform: rotate(360deg); } }

/* The page's backdrop is a clip rather than a still now. #sub-features is
   position:fixed (the shared .sub-screen base), so the video and its scrim
   anchor to it directly; .feat-scroll already sits above at z-index 1. The
   scrim keeps the two values the old image's gradient carried. */
#sub-features { background: #060c18 !important; }
#sub-features .feat-bgvid {
  position: absolute; inset: 0; z-index: 0;
  width: 100% !important; height: 100% !important;
  object-fit: cover; display: block; pointer-events: none;
}
#sub-features .feat-bgvid-scrim {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(rgba(6,10,20,0.55), rgba(6,10,20,0.68));
}
#sub-features .feat-scroll {
  position: relative; z-index: 1; height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  padding: calc(env(safe-area-inset-top,20px) + 16px) 18px calc(var(--nav-height,58px) + 44px);
}
#sub-features .feat-topbar { display: flex; align-items: center; gap: 14px; margin: 2px 0 16px; }
/* ── Canonical back button: player icon inside a glass circle ── */
.nwsb-back {
  width: 42px; height: 42px; min-width: 42px; min-height: 42px; flex-shrink: 0;
  border: none; border-radius: 50% !important;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(0,0,0,.34), 0 2px 6px rgba(0,0,0,.22);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; box-sizing: border-box; overflow: hidden;
}
.nwsb-back-ico {
  width: 21px; height: 21px; display: block; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M15 5l-7 7 7 7' stroke='%230a0a12' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  filter: none;
}
#sub-features .feat-back {
  width: 42px; height: 42px; flex-shrink: 0; cursor: pointer; padding: 0;
  border: none; border-radius: 50% !important;
  background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M15 5l-7 7 7 7' stroke='%230a0a12' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/21px no-repeat;
  box-shadow: 0 8px 20px rgba(0,0,0,.34), 0 2px 6px rgba(0,0,0,.22);
}
/* header text sits INSIDE the player's glass tube/capsule image (stretched) */
#sub-features .feat-tube {
  position: relative; margin: 0 0 24px; padding: 26px 30px 30px;
  background: url('assets/media/image/79ef322d3d1d5df94f0eedbd96af959425b14de0f7a22198-4b58c8a6.webp') center/100% 100% no-repeat;
  filter: drop-shadow(0 14px 30px rgba(0,0,0,0.5));
}
#sub-features .feat-eyebrow { font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: #c8a96e; margin: 0; }
#sub-features .feat-title { font-family: 'DM Sans', sans-serif; font-weight: 200; font-size: 27px; line-height: 1.05; color: rgba(255,255,255,0.9); white-space: nowrap; }
#sub-features .feat-title .brand-name { font-size: 27px !important; text-shadow: none !important; }
#sub-features .feat-hsub { font-size: 13px; margin-top: 10px; }

/* Black/gold explainer carousel below the glass tube — one card at a time,
   auto-cycling with dots, explaining what this menu is and then each
   feature below it one by one. Mirrored from the Connect features
   carousel (.ncb-*): icon on the RIGHT here instead of the left (just DOM
   order reversed — text block first, icon last), no arrow/button since
   these aren't individually tappable links, just explanations. */
#sub-features .feat-banner-carousel {
  width: 100%; border-radius: 22px !important; overflow: hidden; position: relative;
  background: #000; border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 14px 32px rgba(0,0,0,0.5);
  margin: 4px 0 24px;
}
#sub-features .feat-banner-track { display: flex; transition: transform 0.55s cubic-bezier(0.4,0,0.2,1); will-change: transform; }
#sub-features .feat-banner-slide { flex: 0 0 100%; box-sizing: border-box; display: flex; align-items: center; gap: 14px; padding: 24px 20px 30px; }
#sub-features .feat-banner-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
#sub-features .feat-banner-name { font-family: 'DM Sans', sans-serif; font-size: 15.5px; font-weight: 800; color: #fff; letter-spacing: -0.2px; }
#sub-features .feat-banner-sub { font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 400; color: rgba(255,255,255,0.62); line-height: 1.35; }
#sub-features .feat-banner-ico {
  width: 54px; height: 54px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  border-radius: 15px !important; background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.15);
}
#sub-features .feat-banner-ico img { width: 62%; height: 62%; object-fit: contain; display: block; }
#sub-features .feat-banner-dots { position: absolute; bottom: 10px; left: 0; right: 0; display: flex; justify-content: center; gap: 5px; z-index: 2; }
#sub-features .feat-banner-dot { width: 5px; height: 5px; border-radius: 50% !important; background: rgba(255,255,255,0.28); transition: all 0.3s; }
#sub-features .feat-banner-dot.on { background: #e8d5a3; width: 15px; border-radius: 3px !important; }

/* vertical LIST: each row = big icon on the left, text on the right, NO pill,
   with a soft glassmorphism divider line between rows */
#sub-features .feat-grid { display: flex; flex-direction: column; gap: 0; }
#sub-features .feat-card {
  position: relative;
  display: grid; grid-template-columns: auto auto 1fr; grid-template-rows: auto auto;
  align-items: center; column-gap: 14px; text-align: left; cursor: pointer;
  padding: 13px 30px 13px 4px; border: none !important; background: transparent !important; box-shadow: none !important;
}
#sub-features .feat-card-divider { grid-row: 1 / 3; grid-column: 2; align-self: stretch; width: 1px; margin: 6px 0; background: rgba(255,255,255,0.14); }
#sub-features .feat-card:not(:last-child)::after {
  content: ''; position: absolute; left: 4px; right: 4px; bottom: 0; height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.22) 20%, rgba(255,255,255,0.22) 80%, rgba(255,255,255,0));
  box-shadow: 0 1px 0 rgba(0,0,0,0.25);
}
/* chevron "enter" arrow on the right of each row (like the home menu items) */
#sub-features .feat-card::before {
  content: ''; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 9px; height: 15px; pointer-events: none; z-index: 2;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='15' viewBox='0 0 9 15' fill='none'%3E%3Cpath d='M1.5 1.5l6 6-6 6' stroke='%23ffffff' stroke-opacity='0.55' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
#sub-features .feat-card:active { background: rgba(255,255,255,0.06) !important; border-radius: 16px !important; }
#sub-features .feat-card:active::before { transform: translateY(-50%) translateX(2px); }
#sub-features .feat-ico {
  position: relative;
  grid-row: 1 / 3; grid-column: 1; align-self: center;
  width: 68px; height: 68px; border-radius: 18px !important; margin: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(232,213,163,0.10); border: 1px solid rgba(255,255,255,0.14);
}
#sub-features .feat-ico svg { width: 34px; height: 34px; }
/* traveling light ring around an icon — border-mask trick; hidden until a JS
   sequencer adds .feat-anim, then it plays ONE sweep. Only one icon lit at a
   time, cycling icon-to-icon (see part049.js). */
@property --featang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
#sub-features .feat-ico::after {
  content: ''; position: absolute; inset: -2px; border-radius: 20px; padding: 2px;
  pointer-events: none; z-index: 3; opacity: 0;
  background: conic-gradient(from var(--featang),
    transparent 0deg, transparent 210deg,
    rgba(255,255,255,0.06) 250deg, #e8d5a3 300deg, #ffffff 332deg,
    #e8d5a3 352deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  will-change: --featang;
}
#sub-features .feat-ico.feat-anim::after { opacity: 1; animation: featTravel 1.5s linear 1; }
@keyframes featTravel { to { --featang: 360deg; } }
#sub-features .feat-name { grid-column: 3; grid-row: 1; align-self: end; font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 18px; color: #f2f6fa; }
#sub-features .feat-sub { grid-column: 3; grid-row: 2; align-self: start; font-family: 'DM Sans', sans-serif; font-size: 13px; color: rgba(255,255,255,0.48); margin-top: 2px; }

/* feature icon that uses a full image (e.g. NowssB Connect logo) — fill the box */
#sub-features .feat-ico-img { background: transparent; border: none; padding: 0; overflow: visible; }
#sub-features .feat-ico-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 18px !important; display: block; }

/* ══════════════════════════════════════════════════════════════════════════
   NOWSSB CONNECT — CREATE (neumorphism sheet, FAB, tiles, viewer, toast) */
.nwsb-cr-fab {
  position: absolute; right: 18px; bottom: calc(var(--nav-height,58px) + env(safe-area-inset-bottom,0px) + 18px);
  z-index: 40; width: 58px; height: 58px; border-radius: 50% !important; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: #c8a96e;
  background: #eef1f6; box-shadow: 6px 6px 14px #cdd2de, -6px -6px 14px #ffffff;
}
.nwsb-cr-fab:active { box-shadow: inset 4px 4px 10px #cdd2de, inset -4px -4px 10px #ffffff; }

.nwsb-cr-wrap { position: fixed; inset: 0; z-index: 100000; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s ease, visibility 0s .25s; }
.nwsb-cr-wrap.open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .25s ease; }
.nwsb-cr-scrim { position: absolute; inset: 0; background: rgba(6,10,20,0.5); }
.nwsb-cr-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; box-sizing: border-box;
  background: #eef1f6; border-radius: 26px 26px 0 0; padding: 12px 18px calc(env(safe-area-inset-bottom,16px) + 20px);
  transform: translateY(100%); transition: transform .32s cubic-bezier(.16,1,.3,1);
  box-shadow: 0 -12px 40px rgba(0,0,0,0.28);
}
.nwsb-cr-wrap.open .nwsb-cr-sheet { transform: translateY(0); }
.nwsb-cr-grip { width: 42px; height: 5px; border-radius: 3px; background: #d3d8e2; margin: 4px auto 14px; }
.nwsb-cr-title { font-family: 'DM Sans', sans-serif; font-weight: 800; font-size: 20px; color: #1a1f2b; margin: 0 4px 14px; }
.nwsb-cr-opt {
  display: flex; align-items: center; gap: 16px; width: 100%; text-align: left; cursor: pointer;
  padding: 15px 18px; margin-bottom: 12px; border: none; border-radius: 20px !important;
  background: #eef1f6; box-shadow: 5px 5px 12px #cdd2de, -5px -5px 12px #ffffff;
}
.nwsb-cr-opt:active { box-shadow: inset 4px 4px 9px #cdd2de, inset -4px -4px 9px #ffffff; }
.nwsb-cr-ic {
  width: 46px; height: 46px; flex-shrink: 0; border-radius: 14px !important; color: #c8a96e;
  display: flex; align-items: center; justify-content: center;
  background: #eef1f6; box-shadow: inset 3px 3px 7px #cdd2de, inset -3px -3px 7px #ffffff;
}
.nwsb-cr-tx { flex: 1; display: flex; flex-direction: column; }
.nwsb-cr-tx b { font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 16px; color: #1a1f2b; }
.nwsb-cr-tx i { font-family: 'DM Sans', sans-serif; font-style: normal; font-size: 12.5px; color: rgba(0,0,0,0.42); margin-top: 2px; }
.nwsb-cr-chev { color: rgba(0,0,0,0.28); flex-shrink: 0; }
.nwsb-cr-cancel {
  width: 100%; margin-top: 4px; padding: 15px; border: none; border-radius: 18px !important; cursor: pointer;
  font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 15px; color: rgba(0,0,0,0.5);
  background: #eef1f6; box-shadow: 5px 5px 12px #cdd2de, -5px -5px 12px #ffffff;
}
.nwsb-cr-cancel:active { box-shadow: inset 4px 4px 9px #cdd2de, inset -4px -4px 9px #ffffff; }

/* create tile + video badge in the profile grid */
.ig-tile.nwsb-cr-tile { display: flex; align-items: center; justify-content: center; color: #c8a96e;
  background: #eef1f6 !important; box-shadow: inset 4px 4px 10px #d6dbe6, inset -4px -4px 10px #ffffff; cursor: pointer; }
.nwsb-tile-badge { position: absolute; top: 6px; right: 6px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6)); }

/* toast */
.nwsb-toast {
  position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%) translateY(10px); z-index: 100001;
  background: rgba(20,24,34,0.94); color: #fff; font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 600;
  padding: 12px 20px; border-radius: 14px; opacity: 0; transition: opacity .3s, transform .3s;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.nwsb-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* created-post viewer */
.nwsb-pv-wrap { position: fixed; inset: 0; z-index: 100002; display: flex; align-items: center; justify-content: center; }
.nwsb-pv-scrim { position: absolute; inset: 0; background: rgba(6,10,20,0.9); }
.nwsb-pv-card { position: relative; z-index: 1; width: min(92vw, 460px); }
.nwsb-pv-media { width: 100%; max-height: 74vh; object-fit: contain; border-radius: 18px; display: block; background: #000; }
.nwsb-pv-row { display: flex; gap: 12px; margin-top: 14px; }
.nwsb-pv-row button { flex: 1; padding: 13px; border: none; border-radius: 14px !important; cursor: pointer; font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 14px; }
.nwsb-pv-del { background: rgba(255,80,80,0.16); color: #ff8a8a; }
.nwsb-pv-close { background: rgba(255,255,255,0.12); color: #fff; }

/* story ring indicator when you have a story */
.nwsbf-you.nwsb-has-story .nwsbf-story-ring, .nwsbf-story-ring.nwsbf-you.nwsb-has-story {
  background: linear-gradient(45deg,#c8a96e,#e8d5a3,#c8a96e) !important;
}

/* ══ INSTAGRAM-STYLE COMPOSE EDITOR (caption + location + share) ══ */
.nwsb-cp-wrap { position: fixed; inset: 0; z-index: 100003; background: #f6f7fa;
  transform: translateY(100%); transition: transform .32s cubic-bezier(.16,1,.3,1);
  display: flex; flex-direction: column; }
.nwsb-cp-wrap.open { transform: translateY(0); }
.nwsb-cp-head { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
  padding: calc(env(safe-area-inset-top,16px) + 12px) 18px 12px; border-bottom: 1px solid rgba(0,0,0,0.08); background: #fff; }
.nwsb-cp-x { background: none; border: none; font-size: 19px; color: #1a1f2b; cursor: pointer; line-height: 1; padding: 4px; }
.nwsb-cp-title { font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 16px; color: #1a1f2b; }
.nwsb-cp-share { background: none; border: none; color: #c8a96e; font-weight: 800; font-size: 15px; cursor: pointer; font-family: 'DM Sans', sans-serif; padding: 4px 2px; }
.nwsb-cp-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px 18px calc(env(safe-area-inset-bottom,16px) + 24px); }
.nwsb-cp-preview { position: relative; width: 100%; border-radius: 16px; overflow: hidden; margin-bottom: 16px; box-shadow: 0 6px 20px rgba(0,0,0,0.12); background: #000; }
.nwsb-cp-preview.sq { padding-bottom: 100%; }   /* 1:1 square */
.nwsb-cp-preview.pt { padding-bottom: 125%; }   /* 4:5 full length */
.nwsb-cp-track { position: absolute; inset: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.nwsb-cp-track::-webkit-scrollbar { display: none; }
.nwsb-cp-slide { flex: 0 0 100%; height: 100%; scroll-snap-align: center; background-size: cover; background-position: center; }
.nwsb-cp-slide video { width: 100%; height: 100%; object-fit: cover; display: block; }
.nwsb-cp-ratio, .nwsb-cp-addmore { position: absolute; z-index: 2; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.55); color: #fff; }
.nwsb-cp-ratio { left: 12px; bottom: 12px; width: 34px; height: 34px; border-radius: 10px !important; }
.nwsb-cp-addmore { right: 12px; bottom: 12px; width: 34px; height: 34px; border-radius: 50% !important; font-size: 22px; line-height: 1; padding-bottom: 2px; }
.nwsb-cp-count { position: absolute; top: 12px; right: 12px; z-index: 2; background: rgba(0,0,0,0.6); color: #fff; font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 12px; }
.nwsb-cp-dots { position: absolute; bottom: 14px; left: 0; right: 0; z-index: 2; display: flex; justify-content: center; gap: 5px; pointer-events: none; }
.nwsb-cp-dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.5); }
.nwsb-cp-dots span.on { background: #fff; }
.nwsb-cp-opt { cursor: pointer; }
.nwsb-cp-chev2 { flex-shrink: 0; }
.nwsb-cp-footer { text-align: center; margin-top: 28px; font-family: 'DM Sans', sans-serif; font-weight: 800; font-size: 15px; color: #1a1f2b; letter-spacing: 0.3px; }
.nwsb-cp-footer span { color: #c8a96e; }
.nwsb-cp-caption { width: 100%; box-sizing: border-box; min-height: 84px; border: none; resize: none; outline: none;
  font-family: 'DM Sans', sans-serif; font-size: 15px; color: #1a1f2b; background: transparent; padding: 2px 0 14px; border-bottom: 1px solid rgba(0,0,0,0.09); }
.nwsb-cp-caption::placeholder { color: rgba(0,0,0,0.35); }
.nwsb-cp-field { display: flex; align-items: center; gap: 12px; padding: 15px 2px; border-bottom: 1px solid rgba(0,0,0,0.08); }
.nwsb-cp-ic { color: #737a86; display: flex; flex-shrink: 0; }
.nwsb-cp-loc { flex: 1; border: none; outline: none; background: transparent; font-family: 'DM Sans', sans-serif; font-size: 15px; color: #1a1f2b; }
.nwsb-cp-loc::placeholder { color: rgba(0,0,0,0.4); }
.nwsb-cp-toggle-tx { flex: 1; font-family: 'DM Sans', sans-serif; font-size: 15px; color: #1a1f2b; }
.nwsb-cp-sw { width: 44px; height: 26px; border-radius: 13px; background: #d3d8e2; position: relative; cursor: pointer; transition: background .2s; flex-shrink: 0; }
.nwsb-cp-sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left .2s; box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
.nwsb-cp-sw[data-on="1"] { background: #c8a96e; }
.nwsb-cp-sw[data-on="1"]::after { left: 21px; }

/* ══ WORD/MEANING SWIPE INDICATOR ══ */
.wsg-swipe {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 14px auto 4px; padding: 8px 16px; width: fit-content;
  border-radius: 20px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14);
  font-family: 'DM Sans', sans-serif; font-size: 12px; color: rgba(255,255,255,0.6);
}
.wsg-swipe .wsg-swipe-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.3); }
.wsg-swipe .wsg-swipe-dot.on { background: #c8a96e; width: 18px; border-radius: 3px; }
.wsg-swipe svg { opacity: 0.7; animation: wsgSwipeNudge 1.6s ease-in-out infinite; }
@keyframes wsgSwipeNudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
.nwsb-pv-meta { margin-top: 12px; font-family: 'DM Sans', sans-serif; }
.nwsb-pv-loc { font-size: 13px; color: #e8d5a3; margin-bottom: 6px; }
.nwsb-pv-cap { font-size: 14px; color: rgba(255,255,255,0.85); line-height: 1.5; }
.nwsb-pv-carousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; border-radius: 18px; scrollbar-width: none; }
.nwsb-pv-carousel::-webkit-scrollbar { display: none; }
.nwsb-pv-carousel .nwsb-pv-media { flex: 0 0 100%; scroll-snap-align: center; }

/* ══ Streak: three glass boxes (label · number · keep). Global — same real
   shared image asset + markup reused wherever the streak is shown
   (Fashion Home, Normal Home, and the dedicated Daily Streak page), not
   a duplicate. Un-scoped deliberately so it doesn't need re-extending to
   a selector list every time it's reused somewhere new. ══ */
.fash-streak {
  position: relative; display: block; box-sizing: border-box; overflow: hidden;
  width: calc(100% - 32px) !important; margin: 16px 16px 20px; padding: 0; border: none; cursor: pointer;
  /* show only the middle band with the glass boxes — crop the metallic top/bottom */
  aspect-ratio: 1536 / 450;
  background: url('assets/media/image/9114f144ccee28a086ff0c9f94e474ce1fccd2c9c5700fa4-49ddc8db.webp') center center / 100% auto no-repeat;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.38));
}
.fash-streak:active { filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4)) brightness(1.06); }
/* each label/number/cta centered over its glass box */
.fash-streak-box {
  position: absolute; top: 46%; transform: translate(-50%,-50%);
  display: flex; align-items: center; justify-content: center; text-align: center;
  width: 26%;
}
.fash-streak-box1 { left: 17%; }
.fash-streak-box2 { left: 50%; }
.fash-streak-box3 { left: 83%; }
.fash-streak-num {
  font-family: 'DM Sans', sans-serif; font-weight: 800; font-size: 40px; line-height: 1;
  color: #1a2230; text-shadow: 0 1px 1px rgba(255,255,255,0.6);
}
.fash-streak-label,
.fash-streak-cta {
  font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 800; line-height: 1.15;
  letter-spacing: 1.5px; text-transform: uppercase; text-shadow: 0 1px 1px rgba(255,255,255,0.6);
}
.fash-streak-label { color: #2a3140; }
.fash-streak-cta { color: #9c7b3a; }

/* Streak section heading + card (Normal Home / Daily Streak page: solid
   light card; Fashion Home: glassmorphism card — see
   .nmh-streak-glass-section below) */
.nmh-streak-section {
  width: 100%; border-radius: 22px !important; background: #f0f2f7; padding: 22px 20px 20px;
  box-shadow: 7px 7px 16px rgba(0,0,0,0.14), -5px -5px 12px rgba(255,255,255,0.97); box-sizing: border-box;
}
#home-nm.nm-dark .nmh-streak-section { background: #16163c; box-shadow: 8px 8px 22px rgba(0,0,0,0.88), -4px -4px 14px rgba(50,50,110,0.32); }
.nmh-streak-heading { font-family: 'DM Sans', sans-serif; font-size: 19px; font-weight: 800; color: #1a1a2e; line-height: 1.25; }
.nmh-streak-subheading { font-family: 'DM Sans', sans-serif; font-size: 12.5px; font-weight: 400; color: rgba(0,0,0,0.45); margin-top: 6px; line-height: 1.5; }
#home-nm.nm-dark .nmh-streak-heading { color: #fff; }
#home-nm.nm-dark .nmh-streak-subheading { color: rgba(255,255,255,0.4); }
/* Dark variant — light text, used inside .nmh-streak-glass-section below */
.nmh-streak-heading-dark { color: #fff; }
.nmh-streak-subheading-dark { color: rgba(255,255,255,0.55); }

/* Fashion Home — glassmorphism version of .nmh-streak-section: heading +
   subheading + the 3-cube visual together inside one translucent card,
   matching the AI Prescription page's glass hero treatment. Own explicit
   width/margin (not the ambiguous shared .w100 utility, which has several
   conflicting same-name definitions elsewhere and was stripping this
   element's padding/corners). */
.nmh-streak-glass-section {
  width: calc(100% - 32px); margin: 16px 16px 20px; padding: 22px 20px 20px; box-sizing: border-box;
  border-radius: 22px !important; background: rgba(255,255,255,0.06);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 20px 50px rgba(0,0,0,0.6);
}
/* Heading row inside the glass card — icon + divider + text, same pieces
   as .nmh-sec-banner (.nmh-sec-banner-icon/-divider/-txt are already
   standalone/reusable), just without a banner's own background/padding
   since the glass card already provides those. */
.nmh-streak-glass-header { display: flex; align-items: center; gap: 14px; }

/* ══ SEARCH RESULT — separate full-screen page (was dumped below the card) ══ */
.ws-result-page {
  position: fixed; inset: 0; z-index: 720; display: flex; flex-direction: column;
  background:
    linear-gradient(rgba(0,0,0,0.72), rgba(0,0,0,0.72)),
    url('assets/media/image/1c12cb9573b3f16c3cbc50dcc52ff8d657e730134b46965f-7e48543a.webp') center center / cover no-repeat #000;
  transform: translateX(100%); transition: transform .34s cubic-bezier(.16,1,.3,1);
  visibility: hidden;
}
.ws-result-page.show { transform: translateX(0); visibility: visible; }
.ws-result-topbar {
  display: flex; align-items: center; gap: 14px; flex-shrink: 0;
  padding: calc(env(safe-area-inset-top,14px) + 12px) 18px 12px;
}
.ws-result-back {
  width: 42px; height: 42px; flex-shrink: 0; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50% !important; border: none;
  background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M15 5l-7 7 7 7' stroke='%230a0a12' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/21px no-repeat;
  box-shadow: 0 8px 20px rgba(0,0,0,.34), 0 2px 6px rgba(0,0,0,.22);
}
.ws-result-back svg, .ws-result-back > * { display: none !important; }
.ws-result-toptitle { font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 600; color: rgba(255,255,255,0.75); }
.ws-result-scroll {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 4px 0 calc(env(safe-area-inset-bottom,24px) + 30px);
}
/* the inner result cards no longer need their own show-animation margins */
.ws-result-page .ws-page-result { margin: 8px 20px 0 !important; }

/* Request disclaimer — subtle line under the action tiles */
.ws-result-disclaimer {
  margin: 14px 20px 0; font-family: 'DM Sans', sans-serif; font-size: 11px;
  font-weight: 300; line-height: 1.55; color: rgba(255,255,255,0.5);
  letter-spacing: .2px; display: flex; align-items: center; flex-wrap: wrap; gap: 7px;
}
.ws-result-disclaimer-badge {
  font-size: 9px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  color: #e8d5a3; padding: 3px 8px; border: 1px solid rgba(232,213,163,0.35);
  border-radius: 20px !important; background: rgba(232,213,163,0.08); flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   NOWSSB CONNECT — COMPLETE GLASSMORPHISM THEME ("NowssB Fashion" option).
   ALL five Connect pages. True dark glass: each page's photo background stays
   clearly visible under a light dark tint; every surface is translucent dark
   glass (light border + inner highlight); all text white. The `html body.…`
   + screen-id selectors out-rank every neumorphism rule (nm-mode, the feed's
   runtime-injected styles, the old light-glass profile) regardless of order.
   Default neumorphism untouched — everything is gated on .nwsb-soc-glass.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── PAGE BACKGROUNDS (images clearly visible) ── */
html body.nwsb-soc-glass #sub-ig-feed {
  background: linear-gradient(rgba(4,8,18,0.22) 0%, rgba(4,8,18,0.34) 55%, rgba(4,8,18,0.52) 100%),
    url('assets/media/image/fbfd371d5535cf5032af352b1c5f69eacffced60b2979b0a-1f7fd285.webp') center/cover no-repeat !important;
}
html body.nwsb-soc-glass #sub-reels-feed {
  background: linear-gradient(rgba(4,8,18,0.2) 0%, rgba(4,8,18,0.32) 55%, rgba(4,8,18,0.5) 100%),
    url('assets/media/image/0137012f27d1ff4dc41891b0ba674ff41d2aa7d2aaf5ce5d-5e1a96af.webp') center/cover no-repeat !important;
}
html body.nwsb-soc-glass #sub-people {
  background: linear-gradient(rgba(4,8,18,0.22) 0%, rgba(4,8,18,0.34) 55%, rgba(4,8,18,0.52) 100%),
    url('assets/media/image/fd027c5b6ce59363c694ab8bf2eed2d7a1d9ed68a30fe16f-da533b17.webp') center/cover no-repeat !important;
}
/* Profile: NO background photo — plain dark glass only (per request). A photo
   here was also the cause of the "white glow" around every round button: its
   bright swirls were bleeding through the translucent circles. */
html body.nwsb-soc-glass #sub-ig-profile,
html body.nwsb-soc-glass #sub-ig-profile .ig {
  background: linear-gradient(160deg, #14182a 0%, #0d1020 55%, #0a0c18 100%) !important;
}
html body.nwsb-soc-glass #sub-social-home {
  background: linear-gradient(rgba(4,8,18,0.2) 0%, rgba(4,8,18,0.32) 55%, rgba(4,8,18,0.5) 100%),
    url('assets/media/image/b8736b76b90cdd421b4603f101bea1187832ce43f6ff9ed3-c2a2463d.webp') center/cover no-repeat !important;
}
html body.nwsb-soc-glass #sub-people::before,
html body.nwsb-soc-glass #sub-social-home::before { display: none !important; }

/* ═══ 1. COMMUNITY FEED (#sub-ig-feed) ═══ */
html body.nwsb-soc-glass #sub-ig-feed .nwsbf-top {
  background: rgba(6,10,20,0.64) !important;
  border-bottom: 1px solid rgba(255,255,255,0.16) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,0.32) !important;
}
html body.nwsb-soc-glass #sub-ig-feed .nwsbf-logo { color: #fff !important; }
html body.nwsb-soc-glass #sub-ig-feed .nwsbf-icon,
html body.nwsb-soc-glass #sub-ig-feed .nwsbf-act,
html body.nwsb-soc-glass #sub-ig-feed .nwsbf-brandlogo {
  background: rgba(255,255,255,0.1) !important;
  border: 1px solid rgba(255,255,255,0.24) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 4px 14px rgba(0,0,0,0.3) !important;
}
html body.nwsb-soc-glass #sub-ig-feed .nwsbf-iconimg { filter: brightness(0) invert(1) opacity(0.85) !important; }
html body.nwsb-soc-glass #sub-ig-feed .nwsbf-story-ring {
  background: rgba(255,255,255,0.09) !important;
  border: 1.5px solid rgba(232,213,163,0.55) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3) !important;
}
html body.nwsb-soc-glass #sub-ig-feed .nwsbf-story-av { background-color: rgba(255,255,255,0.12) !important; }
html body.nwsb-soc-glass #sub-ig-feed .nwsbf-story span,
html body.nwsb-soc-glass #sub-ig-feed .nwsbf-story { color: rgba(255,255,255,0.85) !important; }
html body.nwsb-soc-glass #sub-ig-feed .nwsbf-post {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 8px 32px rgba(0,0,0,0.36) !important;
}
html body.nwsb-soc-glass #sub-ig-feed .nwsbf-post-av {
  /* longhand background-color only — the base rule sets the avatar photo via
     inline background-image; the shorthand `background` property used to
     reset that to none and blank out every post's profile picture */
  background-color: rgba(255,255,255,0.12) !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  box-shadow: none !important;
}
html body.nwsb-soc-glass #sub-ig-feed .nwsbf-post-name { color: #fff !important; }
html body.nwsb-soc-glass #sub-ig-feed .nwsbf-post-loc { color: rgba(255,255,255,0.6) !important; }
html body.nwsb-soc-glass #sub-ig-feed .nwsbf-post-likes { color: #fff !important; }
html body.nwsb-soc-glass #sub-ig-feed .nwsbf-post-cap { color: rgba(255,255,255,0.85) !important; }
html body.nwsb-soc-glass #sub-ig-feed .nwsbf-post-cap b,
html body.nwsb-soc-glass #sub-ig-feed .nwsbf-post-cap strong { color: #fff !important; }
/* like/comment/send/save icons are hardcoded stroke="#1a1a2e" (dark navy) —
   correct on the default theme's light feed bg, invisible on dark glass. */
html body.nwsb-soc-glass #sub-ig-feed .nwsbf-act svg path { stroke: #fff !important; }
html body.nwsb-soc-glass #sub-ig-feed .nwsbf-like-btn.on svg path { fill: #ff3040 !important; stroke: #ff3040 !important; }
html body.nwsb-soc-glass #sub-ig-feed .nwsbf-save-btn.on svg path { fill: #fff !important; stroke: #fff !important; }
html body.nwsb-soc-glass #sub-ig-feed .nwsbf-post-comments span { color: rgba(255,255,255,0.55) !important; cursor: pointer; font-size: 13px; }

/* ═══ 2. REELS (#sub-reels-feed) ═══ */
html body.nwsb-soc-glass #sub-reels-feed .nwsb-reel-card {
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.24) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 8px 32px rgba(0,0,0,0.38) !important;
}
html body.nwsb-soc-glass .nwsb-reel-thumb {
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.24) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.32) !important;
}
html body.nwsb-soc-glass .nwsb-reel-score-pill,
html body.nwsb-soc-glass .nwsb-reel-claim-btn {
  background: rgba(255,255,255,0.12) !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  color: #fff !important;
}
html body.nwsb-soc-glass #sub-reels-feed .nwsb-reel-word,
html body.nwsb-soc-glass #sub-reels-feed .nwsb-reel-username,
html body.nwsb-soc-glass #sub-reels-feed .nwsb-reel-score-num { color: #fff !important; }
html body.nwsb-soc-glass #sub-reels-feed .nwsb-reels-empty-title { color: #fff !important; }
html body.nwsb-soc-glass #sub-reels-feed .nwsb-reels-empty-sub { color: rgba(255,255,255,0.66) !important; }
html body.nwsb-soc-glass #sub-reels-feed .nwsb-reels-empty .ig-btn,
html body.nwsb-soc-glass #sub-reels-feed button {
  background: rgba(255,255,255,0.12) !important;
  border: 1px solid rgba(232,213,163,0.5) !important;
  color: #e8d5a3 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 6px 18px rgba(0,0,0,0.32) !important;
}

/* ═══ 3. DISCOVER (#sub-people) ═══ */
html body.nwsb-soc-glass #sub-people .ig-people-header {
  background: rgba(10,14,26,0.4) !important;
  border-bottom: 1px solid rgba(255,255,255,0.16) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,0.3) !important;
}
html body.nwsb-soc-glass #sub-people .ig-people-htitle { color: #fff !important; }
html body.nwsb-soc-glass #sub-people .ig-people-htitle span { color: #e8d5a3 !important; }
html body.nwsb-soc-glass #sub-people .ig-people-back {
  background: rgba(255,255,255,0.1) !important;
  border: 1px solid rgba(255,255,255,0.24) !important;
  box-shadow: none !important;
}
html body.nwsb-soc-glass #sub-people .ig-people-back svg path { stroke: #fff !important; }
html body.nwsb-soc-glass #sub-people .ig-searchwrap { background: transparent !important; }
html body.nwsb-soc-glass #sub-people .ig-searchbar {
  background: rgba(255,255,255,0.1) !important;
  border: 1px solid rgba(255,255,255,0.26) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 4px 14px rgba(0,0,0,0.28) !important;
  color: #fff !important;
}
html body.nwsb-soc-glass #sub-people .ig-searchbar input { color: #fff !important; }
html body.nwsb-soc-glass #sub-people .ig-searchbar input::placeholder { color: rgba(255,255,255,0.5) !important; }
html body.nwsb-soc-glass #sub-people .nwsb-search-icon { filter: brightness(0) invert(1) opacity(0.7) !important; }
/* a bit more breathing room under the header, and a touch taller */
html body.nwsb-soc-glass #sub-people .ig-people-searchrow { padding: 16px 12px 8px !important; }
html body.nwsb-soc-glass #sub-people .ig-searchbar { height: 42px !important; }
/* header profile avatar was an unconditional light neumorphic circle (white
   highlight shadow) regardless of theme — glass it too */
html body.nwsb-soc-glass #ig-explore-myavatar {
  background: rgba(255,255,255,0.12) !important;
  box-shadow: 0 3px 10px rgba(0,0,0,0.3) !important;
}
html body.nwsb-soc-glass #sub-people .ig-tile {
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.32) !important;
}
html body.nwsb-soc-glass #sub-people .ig-userrow,
html body.nwsb-soc-glass #sub-social-home .ig-userrow {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  border-radius: 16px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 6px 20px rgba(0,0,0,0.3) !important;
}
html body.nwsb-soc-glass #sub-people .ig-userrow .ig-u,
html body.nwsb-soc-glass #sub-social-home .ig-userrow .ig-u { color: #fff !important; }
html body.nwsb-soc-glass #sub-people .ig-userrow .ig-n,
html body.nwsb-soc-glass #sub-social-home .ig-userrow .ig-n { color: rgba(255,255,255,0.6) !important; }
html body.nwsb-soc-glass .ig-mini-follow {
  background: rgba(232,213,163,0.16) !important;
  border: 1px solid rgba(232,213,163,0.45) !important;
  color: #e8d5a3 !important;
}
html body.nwsb-soc-glass #sub-people .ig-explore-empty-title { color: #fff !important; }
html body.nwsb-soc-glass #sub-people .ig-explore-empty-sub { color: rgba(255,255,255,0.6) !important; }
html body.nwsb-soc-glass #sub-people .ig-explore-empty-circle {
  background: rgba(255,255,255,0.09) !important;
  border: 1px solid rgba(255,255,255,0.24) !important;
  box-shadow: none !important;
}

/* ═══ 4. PROFILE (#sub-ig-profile) — replaces the old light-glass skin ═══ */
html body.nwsb-soc-glass #sub-ig-profile .ig-topbar {
  background: rgba(10,14,26,0.4) !important;
  border-bottom: 1px solid rgba(255,255,255,0.16) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,0.3) !important;
}
html body.nwsb-soc-glass #sub-ig-profile .ig-username { color: #fff !important; }
html body.nwsb-soc-glass #sub-ig-profile .ig-prof-top { background: transparent !important; }
html body.nwsb-soc-glass #sub-ig-profile .ig-iconbtn {
  background: rgba(255,255,255,0.1) !important;
  border: 1px solid rgba(255,255,255,0.24) !important;
  border-radius: 50% !important;
  width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 4px 14px rgba(0,0,0,0.28) !important;
}
/* Verified badge is already a self-contained colored graphic — no glass frame */
html body.nwsb-soc-glass #sub-ig-profile .ig-vshop {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: 24px !important; height: 24px !important; min-width: 24px !important; min-height: 24px !important;
}
html body.nwsb-soc-glass #sub-ig-profile .ig-prof-avatar-ring {
  background: rgba(255,255,255,0.12) !important;
  border: 1.5px solid rgba(232,213,163,0.55) !important;
  border-radius: 50% !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35) !important;
}
html body.nwsb-soc-glass #sub-ig-profile .ig-prof-avatar,
html body.nwsb-soc-glass #sub-ig-profile .ig-prof-avatar-ring img {
  border: none !important;
  border-radius: 50% !important;
}
html body.nwsb-soc-glass #sub-ig-profile .ig-stat {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
html body.nwsb-soc-glass #sub-ig-profile .ig-stat .n { color: #fff !important; }
html body.nwsb-soc-glass #sub-ig-profile .ig-stat .l { color: rgba(255,255,255,0.62) !important; }
html body.nwsb-soc-glass #sub-ig-profile .ig-prof-name { color: #fff !important; }
html body.nwsb-soc-glass #sub-ig-profile .ig-vshop-title { color: #fff !important; }
html body.nwsb-soc-glass #sub-ig-profile .ig-vshop-sub { color: rgba(255,255,255,0.45) !important; }
html body.nwsb-soc-glass #sub-ig-profile .ig-vshop-pill {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  box-shadow: none !important;
}
html body.nwsb-soc-glass #sub-ig-profile .ig-vshop-dimple {
  background: rgba(0,0,0,0.25) !important;
  box-shadow: inset 2px 2px 5px rgba(0,0,0,0.4) !important;
}
html body.nwsb-soc-glass #sub-ig-profile .ig-prof-cat { color: rgba(255,255,255,0.66) !important; }
html body.nwsb-soc-glass #sub-ig-profile .ig-btn.gray,
html body.nwsb-soc-glass #sub-ig-profile .ig-btn.icon {
  background: rgba(255,255,255,0.1) !important;
  border: 1px solid rgba(255,255,255,0.26) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 6px 18px rgba(0,0,0,0.3) !important;
}
html body.nwsb-soc-glass #sub-ig-profile .ig-btn.primary {
  background: rgba(232,213,163,0.2) !important;
  border: 1px solid rgba(232,213,163,0.55) !important;
  color: #e8d5a3 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 6px 18px rgba(0,0,0,0.3) !important;
}
html body.nwsb-soc-glass #sub-ig-profile .ig-hl-circle {
  background: rgba(255,255,255,0.09) !important;
  border: 1px solid rgba(255,255,255,0.26) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3) !important;
}
html body.nwsb-soc-glass #sub-ig-profile .ig-hl-label { color: rgba(255,255,255,0.78) !important; }
html body.nwsb-soc-glass #sub-ig-profile .ig-tabs {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3) !important;
}
html body.nwsb-soc-glass #sub-ig-profile .ig-tab {
  background: transparent !important; color: rgba(255,255,255,0.7) !important;
  box-shadow: none !important;
}
html body.nwsb-soc-glass #sub-ig-profile .ig-tab.active {
  background: rgba(255,255,255,0.14) !important; color: #e8d5a3 !important;
  border-bottom: 2px solid #e8d5a3 !important;
}
html body.nwsb-soc-glass #sub-ig-profile .ig-tile {
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3) !important;
}

/* ═══ 5. CONNECT HOME (#sub-social-home) ═══ */
html body.nwsb-soc-glass #sub-social-home .ig-topbar {
  background: rgba(10,14,26,0.4) !important;
  border-bottom: 1px solid rgba(255,255,255,0.16) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,0.3) !important;
}
/* Scoped to this one screen only — the shared .ig-topbar height (48px, no
   safe-area padding) crowds the back button and the chat icon against the
   status bar/notch here. Taller + safe-area padding, other .ig-topbar
   screens (People, Profile, Reels) untouched. */
#sub-social-home .ig-topbar {
  height: calc(52px + env(safe-area-inset-top, 0px)) !important;
  padding-top: env(safe-area-inset-top, 0px) !important;
  box-sizing: border-box !important;
}
html body.nwsb-soc-glass #sub-social-home .ig-username { color: #fff !important; }
html body.nwsb-soc-glass #sub-social-home .ig-iconbtn {
  background: rgba(255,255,255,0.1) !important;
  border: 1px solid rgba(255,255,255,0.24) !important;
  border-radius: 50% !important; color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 4px 14px rgba(0,0,0,0.3) !important;
}
html body.nwsb-soc-glass #sub-social-home .nwsb-hero {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 8px 32px rgba(0,0,0,0.38) !important;
}
html body.nwsb-soc-glass #sub-social-home .nwsb-hero-title { color: #fff !important; }
html body.nwsb-soc-glass #sub-social-home .nwsb-hero-sub { color: rgba(255,255,255,0.72) !important; }
html body.nwsb-soc-glass #sub-social-home .nwsb-hero-tag {
  background: rgba(255,255,255,0.12) !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  color: #fff !important;
}
html body.nwsb-soc-glass #sub-social-home .nwsb-hero-stat {
  background: rgba(255,255,255,0.09) !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 6px 20px rgba(0,0,0,0.3) !important;
}
html body.nwsb-soc-glass #sub-social-home .nwsb-hero-stat-num { color: #fff !important; }
html body.nwsb-soc-glass #sub-social-home .nwsb-hero-stat-lbl { color: rgba(255,255,255,0.6) !important; }
html body.nwsb-soc-glass #sub-social-home .nwsb-explainer-slot {
  /* longhand only -- each tile has its own inline background-image (Origin/
     Evolution/Frequency/Healing); the `background` shorthand was resetting
     that to none, so all four tiles showed the page bg bleeding through
     instead of their own distinct photo. */
  background-color: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 6px 20px rgba(0,0,0,0.28) !important;
}
html body.nwsb-soc-glass #sub-social-home .nwsb-section-hd,
html body.nwsb-soc-glass #sub-people .nwsb-section-hd {
  color: #fff !important; text-shadow: 0 2px 10px rgba(0,0,0,0.6) !important;
}
html body.nwsb-soc-glass #sub-social-home .nwsb-reel-thumb-word { color: #fff !important; }

/* ═══ GLASS THEME PATCH — elements the old light-glass block left white ═══ */

/* REELS header + empty-state button (the header was never targeted) */
html body.nwsb-soc-glass #sub-reels-feed .ig-topbar {
  background: rgba(10,14,26,0.4) !important;
  border-bottom: 1px solid rgba(255,255,255,0.16) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,0.3) !important;
}
html body.nwsb-soc-glass #sub-reels-feed .ig-username { color: #fff !important; }
html body.nwsb-soc-glass #sub-reels-feed .nwsb-post-reel-btn,
html body.nwsb-soc-glass #sub-social-home .nwsb-post-reel-btn {
  background: rgba(232,213,163,0.18) !important;
  border: 1px solid rgba(232,213,163,0.55) !important;
  color: #e8d5a3 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 6px 18px rgba(0,0,0,0.32) !important;
}

/* PROFILE — everything the old light-glass block still owned */
html body.nwsb-soc-glass #sub-ig-profile .ig-iconbtn svg { stroke: #fff !important; }
html body.nwsb-soc-glass #sub-ig-profile .ig-btn.gray svg,
html body.nwsb-soc-glass #sub-ig-profile .ig-btn.icon svg { stroke: #fff !important; }
html body.nwsb-soc-glass #sub-ig-profile .ig-prof-bio,
html body.nwsb-soc-glass #sub-ig-profile .ig-prof-biotext { color: rgba(255,255,255,0.82) !important; }
html body.nwsb-soc-glass #sub-ig-profile .ig-prof-rank { color: rgba(255,255,255,0.6) !important; }
html body.nwsb-soc-glass #sub-ig-profile .ig-prof-plan { background: transparent !important; border: none !important; }
html body.nwsb-soc-glass #sub-ig-profile .ig-prof-plan-badge {
  color: #e8d5a3 !important;
  background: rgba(232,213,163,0.16) !important;
  border-color: rgba(232,213,163,0.4) !important;
}
html body.nwsb-soc-glass #sub-ig-profile .ig-tab { background: transparent !important; }
html body.nwsb-soc-glass #sub-ig-profile .ig-tab svg { stroke: rgba(255,255,255,0.62) !important; }
html body.nwsb-soc-glass #sub-ig-profile .ig-tab.active svg { stroke: #e8d5a3 !important; }
html body.nwsb-soc-glass #sub-ig-profile .ig-hl-circle svg { stroke: #e8d5a3 !important; }

/* "Share Photos" empty state + create tile + create FAB (were all white) */
/* Default (non-glass) theme sizing for the "Share Photos" placeholder — this
   was accidentally deleted along with the old light-glass block; restored. */
body:not(.nwsb-soc-glass) #sub-ig-profile .nwsb-empty-ico {
  width: 78px; height: 78px; margin: 0 auto 18px; border-radius: 50% !important;
  display: flex; align-items: center; justify-content: center;
  background: #f0f2f7; color: #c8a96e;
  box-shadow: 7px 7px 16px rgba(0,0,0,0.14), -5px -5px 13px rgba(255,255,255,0.97),
              inset 1px 1px 2px rgba(255,255,255,0.6);
}
body:not(.nwsb-soc-glass) #sub-ig-profile .nwsb-empty-title {
  font-family: 'DM Sans', sans-serif; font-size: 20px; font-weight: 800; color: #1a1a2e;
}
html body.nwsb-soc-glass #sub-ig-profile .nwsb-empty-ico {
  width: 78px !important; height: 78px !important; margin: 0 auto 18px !important;
  border-radius: 50% !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  background: rgba(255,255,255,0.09) !important; color: #e8d5a3 !important;
  border: 1px solid rgba(255,255,255,0.24) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 6px 20px rgba(0,0,0,0.32) !important;
}
html body.nwsb-soc-glass #sub-ig-profile .nwsb-empty-title { color: #fff !important; }
html body.nwsb-soc-glass #sub-ig-profile .ig-tile.nwsb-cr-tile {
  background: rgba(255,255,255,0.08) !important; color: #e8d5a3 !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3) !important;
}
html body.nwsb-soc-glass #sub-ig-profile .nwsb-cr-fab {
  background: rgba(232,213,163,0.2) !important; color: #e8d5a3 !important;
  border: 1px solid rgba(232,213,163,0.55) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 8px 22px rgba(0,0,0,0.4) !important;
}

/* ═══ GLASS PATCH 2 — search row white + neumorphic-shadow leakage ═══ */
/* The search row had a hardcoded white bg; the search bar's glass sat over it. */
html body.nwsb-soc-glass #sub-people .ig-people-searchrow,
html body.nwsb-soc-glass #sub-people .ig-searchwrap { background: transparent !important; }
/* body.nm-mode (from the normal home) is active at the same time as the glass
   class, so its neumorphic shadows leak onto Connect surfaces — flatten them. */
html body.nwsb-soc-glass #sub-people .ig-userrow,
html body.nwsb-soc-glass #sub-social-home .ig-userrow {
  box-shadow: 0 4px 16px rgba(0,0,0,0.28) !important;
}
html body.nwsb-soc-glass .ig-mini-follow {
  box-shadow: none !important;
}
html body.nwsb-soc-glass #sub-social-home .nwsb-explainer-slot,
html body.nwsb-soc-glass #sub-social-home .nwsb-hero,
html body.nwsb-soc-glass #sub-social-home .nwsb-hero-stat {
  box-shadow: 0 6px 20px rgba(0,0,0,0.3) !important;
}

/* Main Settings toggle switches (#sub-social .stgl / .stgl-knob) were losing
   their pill/circle radius to the global *{border-radius:0!important} reset
   -- the base rule in app.css never had !important. Same defect class as the
   Social Settings sheet toggles. */
#sub-social .stgl { border-radius: 13px !important; }
#sub-social .stgl-knob { border-radius: 50% !important; }

/* ═══════════════════════════════════════════════════════════════════════
   NOWSSB CONNECT HUB (#sub-connect-hub) — Saved / Liked / Settings / Theme.
   Reached from the main hamburger. Always dark glass over a Connect photo,
   independent of the nwsb-soc-glass toggle (which only affects the 5 Connect
   screens themselves — the switch to control that toggle lives ON this page).
   ═══════════════════════════════════════════════════════════════════════ */
/* NOT setting position here -- .sub-screen already provides position:fixed
   with higher priority needed; an id-selector override here would beat it
   (id specificity > class) and break full-screen coverage/animation. */
#sub-connect-hub { background: #0a0e1a; }
#sub-connect-hub .nch-bg {
  position: absolute; inset: 0; z-index: 0;
  background: url('assets/media/image/aecc28bf1c4647509602fe0fd559f4ec7ead515042a54d4e-1d7fd108.webp') center/cover no-repeat;
}
#sub-connect-hub .nch-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(rgba(4,8,18,0.5) 0%, rgba(4,8,18,0.68) 40%, rgba(4,8,18,0.92) 100%);
}
#sub-connect-hub .nch-top {
  position: relative; z-index: 2; flex-shrink: 0;
  display: flex; align-items: center; gap: 12px;
  padding: max(env(safe-area-inset-top,16px),16px) 18px 16px;
}
#sub-connect-hub .nch-back {
  width: 38px; height: 38px; min-width: 38px; min-height: 38px; flex-shrink: 0;
  border-radius: 50% !important; border: 1px solid rgba(255,255,255,0.24);
  background: rgba(255,255,255,0.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 4px 14px rgba(0,0,0,0.3);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
#sub-connect-hub .nch-logo { width: 34px; height: 34px; border-radius: 50% !important; object-fit: cover; flex-shrink: 0; }
#sub-connect-hub .nch-title { font-family: 'DM Sans', sans-serif; font-size: 19px; font-weight: 800; color: #fff; }
#sub-connect-hub .nch-scroll {
  position: relative; z-index: 2; flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  /* was missing the safe-area inset the bottom nav itself reserves, so on
     gesture-nav devices the last row sat partly behind the nav bar and the
     scroller's max-scroll never revealed the rest of it */
  padding: 4px 18px calc(var(--nav-height,58px) + max(env(safe-area-inset-bottom,20px),20px) + 40px);
}
#sub-connect-hub .nch-row {
  display: flex; align-items: center; gap: 14px; cursor: pointer;
  padding: 16px; margin-bottom: 10px; border-radius: 18px !important;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 6px 20px rgba(0,0,0,0.3);
}
#sub-connect-hub .nch-row-ico {
  width: 40px; height: 40px; min-width: 40px; flex-shrink: 0; border-radius: 12px !important;
  display: flex; align-items: center; justify-content: center;
  background: rgba(232,213,163,0.12); border: 1px solid rgba(232,213,163,0.3);
}
#sub-connect-hub .nch-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
#sub-connect-hub .nch-row-label { font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 700; color: #fff; }
#sub-connect-hub .nch-row-sub { font-family: 'DM Sans', sans-serif; font-size: 12px; color: rgba(255,255,255,0.55); }
#sub-connect-hub .nch-row-chev { flex-shrink: 0; }
#sub-connect-hub .nch-sec-label {
  font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 2.5px;
  text-transform: uppercase; color: rgba(232,213,163,0.75); margin: 22px 4px 10px;
}
#sub-connect-hub .nch-theme-row {
  display: flex; gap: 10px; padding: 0;
}
#sub-connect-hub .nch-theme-hint {
  font-family: 'DM Sans', sans-serif; font-size: 12px; color: rgba(255,255,255,0.45);
  margin: 10px 4px 0; line-height: 1.5;
}

/* Settings rows rendered INLINE on the Hub page (reuses .nwsb-ss-row from the
   legacy sheet) -- wrap them in one glass card matching the other nch-rows. */
#sub-connect-hub .nch-settings-block {
  border-radius: 18px !important; overflow: hidden; margin-bottom: 10px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 6px 20px rgba(0,0,0,0.3);
}
#sub-connect-hub .nch-settings-block .nwsb-ss-row { padding: 15px 16px; border-top-color: rgba(255,255,255,0.1); }
#sub-connect-hub .nch-settings-block .nwsb-ss-row:first-child { border-top: none; }

/* ═══════════════════════════════════════════════════════════════
   FASHION HOME — custom background photo picker (Settings)
   Carousel styled to match the Black Edition picker (part048.js's
   .beci/.becd pattern) — same 3D perspective transform, tap-to-preview-
   tap-again-to-apply interaction, dots, Apply button. Square corners on
   purpose (no border-radius, unlike .beci which is also square).
   Layers on top of whichever Black-Edition theme (default/black/neo/
   glass-black — app.css) is active: same selector shape and specificity
   (body.fashion-home-active.<class> #appBg) as those theme overrides, and
   this file loads after app.css, so source order lets a chosen photo win
   over the current theme's own background without touching app.css. ── */
/* The card IS a phone. A different render from the one Fashion Plus's big
   phone wears: this one's screen is genuinely transparent — 1.47M of its
   1.57M pixels are, against a bezel of 16k — so the frame goes ON TOP and
   the wallpaper sits under it, which is the right way round and also lets
   the render draw its own camera pill over the picture.
   Trimmed to its silhouette at 681x1461 (the side buttons are part of it);
   screen at x 30-650, y 20-1436. */
.fbgci {
  position: absolute;
  width: 170px; height: 365px;          /* 170 / (681/1461) */
  top: 50%; left: 50%;
  margin-left: -85px; margin-top: -182px;
  overflow: visible;
  border: none;
  border-radius: 0 !important;
  background: none;
  cursor: pointer;
  will-change: transform, opacity;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  opacity: 0;
  /* No glow and no drop-shadow — the phone is the object, a halo behind it
     just reads as fuzz. */
}
.fbgci::before {
  content: ''; position: absolute; inset: 0; z-index: 3;
  background: url('assets/media/image/phone-frame-2-61f7103c.webp') center / 100% 100% no-repeat;
  pointer-events: none;
}
/* The picture, in the glass. Offsets rather than padding: left and right
   against the box's width, top and bottom against its height. */
.fbgci-wall {
  position: absolute; z-index: 1;
  left: 4.4053%; right: 4.4053%; top: 1.3689%; bottom: 1.6427%;
  border-radius: 5.5% / 2.6% !important;
  overflow: hidden;
  background: #06080f center / cover no-repeat;
}
/* The same fall of light down the glass the big phone has. */
.fbgci-wall::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,0.24) 0%,
    rgba(0,0,0,0.02) 26%, rgba(0,0,0,0.06) 52%, rgba(0,0,0,0.5) 100%);
}

body.fashion-home-active.nwsb-custom-fashion-bg #appBg {
  background-image: var(--nwsb-custom-bg-url) !important;
  background-color: var(--nwsb-custom-bg-color, transparent) !important;
  background-size: cover !important;
  background-position: center !important;
}
body.nwsb-custom-fashion-bg #appBgLayer2 { opacity: 0 !important; transition: none !important; }

/* Profile screen — same custom Fashion background the user picked in
   Settings > Fashion Background, shown behind the progress/stats content.
   No selection yet = #profileBgLayer stays without a background-image, so
   the plain #060c18 on #profileMainContent shows through untouched. */
body.fashion-home-active.nwsb-custom-fashion-bg #profileBgLayer {
  background-image: var(--nwsb-custom-bg-url) !important;
  background-color: var(--nwsb-custom-bg-color, transparent) !important;
}

/* NowssB Connect Home — custom background. Extra class on top of the
   existing html body.nwsb-soc-glass #sub-social-home rule (nowssb-nm.css,
   the glass theme block) gives this strictly higher specificity, so it
   wins outright — no source-order dependency needed. Never applies under
   the neu theme (no nwsb-soc-glass class there = selector never matches). */
html body.nwsb-soc-glass.nwsb-custom-connect-bg #sub-social-home {
  background: linear-gradient(rgba(4,8,18,0.2) 0%, rgba(4,8,18,0.32) 55%, rgba(4,8,18,0.5) 100%),
    var(--nwsb-connect-bg-url) center/cover no-repeat !important;
}
/* #sub-social-home was repurposed into the Stats screen (see nowssb-social.js,
   "STATS SCREEN — opened from Profile (the old social-home content)") — the
   actual live NowssB Connect home feed today is #sub-ig-feed, built fresh by
   IG.openFeed() every time the Home tab is tapped. innerHTML rebuilds only
   replace the element's children, never its own attributes, so this rule
   survives every re-render. */
html body.nwsb-soc-glass.nwsb-custom-connect-bg #sub-ig-feed {
  background: linear-gradient(rgba(4,8,18,0.2) 0%, rgba(4,8,18,0.32) 55%, rgba(4,8,18,0.5) 100%),
    var(--nwsb-connect-bg-url) center/cover no-repeat !important;
}
/* My Profile (#sub-ig-profile) — same Connect background, very low
   visibility (0.16 opacity on #igProfileBgLayer, see index.html). No
   selection yet = no background-image, plain #000 shows through untouched.
   Fashion (glass) theme ONLY — the neumorphism theme must never be touched
   by this at all, not even the .sub-screen-bg::after dark gradient that
   normally comes free with that shared class, since neumorphism is a
   completely different, plain-light-background design. */
html body:not(.nwsb-soc-glass) #igProfileBgLayer {
  display: none !important;
}
html body.nwsb-soc-glass.nwsb-custom-connect-bg #igProfileBgLayer {
  background-image: var(--nwsb-connect-bg-url) !important;
}

/* ═══ POST VIEWER (#nwsb-postviewer) — glassmorphism under Fashion/glass theme ═══
   Built entirely in JS (part033.js openExplorePost) with its own injected
   <style> tag hardcoded to a light neumorphic look — it never had a dark
   variant. These rules load after that injected stylesheet and use matching
   class selectors + !important, so they win regardless of DOM insertion
   order. Neumorphism (non-glass) is untouched. */
body.nwsb-soc-glass #nwsb-postviewer {
  background: linear-gradient(160deg, #10131f 0%, #0a0c16 100%) !important;
}
body.nwsb-soc-glass #nwsb-postviewer .nwsb-pv-top {
  background: rgba(10,14,26,0.7) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
body.nwsb-soc-glass #nwsb-postviewer .nwsb-pv-close {
  background: rgba(255,255,255,0.1) !important;
  color: #fff !important;
  box-shadow: none !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
}
body.nwsb-soc-glass #nwsb-postviewer .nwsb-pv-name { color: #fff !important; }
body.nwsb-soc-glass #nwsb-postviewer .nwsb-pv-uname { color: rgba(255,255,255,0.55) !important; }
body.nwsb-soc-glass #nwsb-postviewer .nwsb-pv-loc { color: rgba(255,255,255,0.65) !important; }
body.nwsb-soc-glass #nwsb-postviewer .nwsb-pv-loc svg { stroke: rgba(255,255,255,0.55) !important; }
body.nwsb-soc-glass #nwsb-postviewer .nwsb-pv-card {
  background: rgba(255,255,255,0.06) !important;
  box-shadow: none !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
}
body.nwsb-soc-glass #nwsb-postviewer .nwsb-pv-av { box-shadow: none !important; border: 1px solid rgba(255,255,255,0.2) !important; }
body.nwsb-soc-glass #nwsb-postviewer .nwsb-pv-av-init { background: rgba(255,255,255,0.1) !important; color: #e8d5a3 !important; }
body.nwsb-soc-glass #nwsb-postviewer .nwsb-pv-act {
  background: rgba(255,255,255,0.08) !important;
  box-shadow: none !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
}
body.nwsb-soc-glass #nwsb-postviewer .nwsb-pv-act svg { stroke: #fff !important; }
body.nwsb-soc-glass #nwsb-postviewer .nwsb-pv-likes { color: #fff !important; }
body.nwsb-soc-glass #nwsb-postviewer .nwsb-pv-caption { color: rgba(255,255,255,0.85) !important; }
body.nwsb-soc-glass #nwsb-postviewer .nwsb-pv-dot { background: rgba(255,255,255,0.22) !important; }
body.nwsb-soc-glass #nwsb-postviewer .nwsb-pv-dot.on { background: #e8d5a3 !important; }

/* ── Location access prompt — one-time bottom sheet, pure black banner.
   Left column: NowssB logo above a location pin, same "icon + vertical
   divider" language as the category/description banners elsewhere. ── */
.nwsb-loc-overlay {
  position: fixed; inset: 0; z-index: 99998;
  background: rgba(0,0,0,0.6);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.nwsb-loc-overlay.open { opacity: 1; pointer-events: auto; }
.nwsb-loc-sheet {
  position: relative; width: 100%; max-width: 480px;
  background: #000; border: 1px solid rgba(255,255,255,0.08);
  border-radius: 24px 24px 0 0 !important;
  padding: 20px 20px max(env(safe-area-inset-bottom,20px),20px);
  transform: translateY(100%); transition: transform 0.35s cubic-bezier(0.25,0.46,0.45,0.94);
}
.nwsb-loc-overlay.open .nwsb-loc-sheet { transform: translateY(0); }
.nwsb-loc-close {
  position: absolute; top: 14px; right: 14px; width: 30px; height: 30px;
  min-width: 0 !important; min-height: 0 !important; border-radius: 50% !important;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2;
}
.nwsb-loc-row { display: flex; align-items: flex-start; gap: 14px; padding-top: 20px; }
.nwsb-loc-left { display: flex; flex-direction: column; align-items: center; gap: 10px; flex-shrink: 0; }
.nwsb-loc-logo {
  width: 40px; height: 40px; min-width: 0 !important; min-height: 0 !important;
  border-radius: 50% !important; overflow: hidden;
  background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center;
}
.nwsb-loc-logo img { width: 60%; height: 60%; object-fit: contain; display: block; }
.nwsb-loc-pin {
  width: 34px; height: 34px; min-width: 0 !important; min-height: 0 !important;
  border-radius: 50% !important; background: rgba(232,213,163,0.1); border: 1px solid rgba(232,213,163,0.25);
  display: flex; align-items: center; justify-content: center;
}
.nwsb-loc-divider-v { width: 1px; align-self: stretch; background: rgba(255,255,255,0.12); flex-shrink: 0; margin-bottom: 4px; }
.nwsb-loc-title-wrap { flex: 1; min-width: 0; }
.nwsb-loc-title { font-family: 'DM Sans', sans-serif; font-size: 18px; font-weight: 800; color: #fff; margin-bottom: 8px; }
.nwsb-loc-sub { font-family: 'DM Sans', sans-serif; font-size: 12.5px; color: rgba(255,255,255,0.5); line-height: 1.6; }
/* Sits below the icon+divider+title row, full width (not indented under
   the title — the icon column doesn't run this far down, so indenting
   left an empty gap on the left). The vertical divider itself only spans
   the title/sub above, ending before these pills and buttons start. */
.nwsb-loc-bottom { margin: 20px 0 0; }
.nwsb-loc-features { display: flex; gap: 10px; margin-bottom: 20px; }
.nwsb-loc-feature {
  flex: 1; min-width: 0; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 0 !important; padding: 14px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  font-family: 'DM Sans', sans-serif; font-size: 11.5px; font-weight: 700; color: rgba(255,255,255,0.75);
}
.nwsb-loc-cta {
  width: 100%; background: #e8d5a3; border: none; border-radius: 0 !important;
  padding: 15px 20px; font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 700;
  color: #060c18; cursor: pointer; margin-bottom: 10px;
}
.nwsb-loc-skip { font-family: 'DM Sans', sans-serif; font-size: 12.5px; color: rgba(255,255,255,0.4); cursor: pointer; text-align: center; }

/* ── Player Guide (one-time-ever tutorial before the practice player,
     first entry) — dark navy-to-black vertical gradient, matching the
     Motorola "Getting started" onboarding reference the user supplied.
     The illustration is a contained, rounded-corner card (not a
     full-bleed edge-to-edge photo) — header/footer sit in normal flex
     flow above/below it, so nothing ever overlaps. ── */
/* Full-bleed edge-to-edge photography behind a floating header and
   bottom-anchored text, matching the Moto-essentials reference the user
   asked to match — not a small bordered card with dead space around it. */
.pwg-screen {
  position: absolute; inset: 0; background: #060c18;
  display: flex; flex-direction: column; overflow: hidden;
}
.pwg-slides-wrap { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.pwg-slide { display: none; position: absolute; inset: 0; }
.pwg-slide.active { display: block; }
.pwg-illus-bg {
  position: absolute; inset: 0; background-size: cover; background-position: center top;
  background-color: #060c18;
}
.pwg-illus-fade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(6,12,24,0.15) 0%, rgba(6,12,24,0.05) 28%,
    rgba(6,12,24,0.5) 60%, rgba(6,12,24,0.92) 84%, #060c18 100%);
}
.pwg-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; align-items: center; gap: 14px;
  padding: max(env(safe-area-inset-top,20px),20px) 20px 30px;
  background: linear-gradient(to bottom, rgba(4,10,24,0.6) 0%, rgba(4,10,24,0.25) 55%, transparent 100%);
}
.pwg-close {
  width: 34px; height: 34px; min-width: 34px; min-height: 34px; max-width: 34px; max-height: 34px;
  box-sizing: border-box; border-radius: 50% !important; background: rgba(10,14,26,0.4); border: 1.5px solid #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
}
.pwg-title { font-family: 'DM Sans', sans-serif; font-size: 19px; font-weight: 800; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.pwg-header-icon {
  width: 58px; height: 58px; flex-shrink: 0; box-sizing: border-box;
  border-radius: 50% !important; background: rgba(232,213,163,0.14); border: 1px solid rgba(232,213,163,0.4);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}
/* object-fit:cover + filling the whole circle so the circular clip-mask
   (overflow:hidden above) crops away the source images' own square
   black canvas instead of showing it as a visible black box. SVGs
   (welcome/flame, no baked-in background) stay smaller via contain. */
.pwg-header-icon img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.pwg-header-icon svg { width: 30px !important; height: 30px !important; object-fit: contain; }
.pwg-text { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 0 26px 22px; }
.pwg-heading { font-family: 'DM Sans', sans-serif; font-size: 29px; font-weight: 800; color: #fff; line-height: 1.16; margin-bottom: 12px; text-shadow: 0 2px 14px rgba(0,0,0,0.5); }
.pwg-desc { font-family: 'DM Sans', sans-serif; font-size: 14.5px; font-weight: 300; line-height: 1.6; color: rgba(255,255,255,0.78); text-shadow: 0 1px 10px rgba(0,0,0,0.5); }
.pwg-try-link {
  display: flex; align-items: center; gap: 8px; margin-top: 18px; margin-bottom: 6px; cursor: pointer;
  font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 700; color: #fff;
}
.pwg-footer {
  display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
  padding: 16px 24px max(env(safe-area-inset-bottom,20px),20px); background: #060c18;
}
.pwg-dots { display: flex; align-items: center; gap: 6px; }
.pwg-dot { width: 7px; height: 7px; border-radius: 50% !important; background: rgba(255,255,255,0.25); transition: all 0.25s; }
.pwg-dot.active { width: 20px; border-radius: 4px !important; background: #fff; }
.pwg-nav { display: flex; align-items: center; gap: 12px; }
.pwg-nav-btn {
  width: 52px; height: 52px; box-sizing: border-box; border-radius: 50% !important;
  display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
}
.pwg-nav-back { background: transparent; border: 1.5px solid #fff; }
.pwg-nav-fwd { background: #fff; border: none; }
.pwg-final-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 26px;
  box-sizing: border-box; border-radius: 999px !important; background: #fff; color: #060c18; flex-shrink: 0;
  font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 800; cursor: pointer; border: none;
}

/* ══════════════════════════════════════════════════════════
   PERFORMANCE — stop off-screen work.
   The app keeps every screen in the DOM (11k nodes, 50 <video>,
   76 infinite animations). Closed screens already get
   contain:strict + visibility:hidden, but their CSS animations
   still run on the compositor every frame, which is what makes
   the phone heat up / stutter. Pausing them costs nothing
   visually (they're invisible) and they resume the instant the
   screen opens.
   ══════════════════════════════════════════════════════════ */
.sub-screen:not(.open) *,
.sub-screen:not(.open) *::before,
.sub-screen:not(.open) *::after,
.screen:not(.active) *,
.screen:not(.active) *::before,
.screen:not(.active) *::after {
  animation-play-state: paused !important;
}

/* ══════════════════════════════════════════════════════════
   EBOOKS — list rows + per-book detail page (app/js/part017.js)
   ══════════════════════════════════════════════════════════ */

/* One card per book. Top band: cover | vertical rule | the book name in
   big bold type. Everything else runs full width underneath. */
.eb-row {
  background: #000; border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px !important; padding: 16px; margin-bottom: 14px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.35);
}
.eb-row-head { display: flex; gap: 14px; align-items: center; }
/* The covers are square source images. A 3:4 box with object-fit:cover was
   slicing their sides off and zooming in — keep the box 1:1 and use
   `contain` so the whole cover is always visible, never cropped. */
.eb-cover-wrap {
  width: 92px; height: 92px; flex-shrink: 0; border-radius: 12px !important;
  overflow: hidden; background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1); padding: 6px; box-sizing: border-box;
}
.eb-cover-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.eb-row-rule { width: 1px; align-self: stretch; background: rgba(255,255,255,0.16); flex-shrink: 0; }
.eb-row-meta { margin-top: 14px; }
.eb-row-title {
  flex: 1; min-width: 0;
  font-family: 'DM Sans', sans-serif; font-size: 20px; font-weight: 800; color: #fff;
  line-height: 1.2; letter-spacing: -0.4px;
}
.eb-row-sub { font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 600; color: #e8d5a3; margin-top: 4px; }
.eb-row-about { font-family: 'DM Sans', sans-serif; font-size: 11.5px; color: rgba(255,255,255,0.55); line-height: 1.5; margin-top: 8px; }
.eb-row-disc {
  font-family: 'DM Sans', sans-serif; font-size: 9.5px; font-style: italic;
  color: rgba(255,255,255,0.35); line-height: 1.45; margin-top: 8px;
}
.eb-row-foot { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
/* margin-right:auto eats the slack, so the price stays hard left and the rule
   + pill are pushed to the right edge — the gap lands between the price and
   the rule, which is where it belongs. */
.eb-row-price {
  font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 800; color: #e8d5a3;
  margin-right: auto; line-height: 1;
}
.eb-row-owned { margin-right: auto; }
/* Compact pill, not a full-width bar: flex:1 was stretching it across the
   whole row. min-height is overridden because app/app.css floors buttons at a
   44px tap target, which would keep it tall however little padding it has. */
.eb-get-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: #fff; color: #060c18; border: none; cursor: pointer;
  font-family: 'DM Sans', sans-serif; font-size: 11.5px; font-weight: 800; letter-spacing: 0.3px;
  padding: 0 16px; height: 38px; min-height: 0 !important;
  border-radius: 30px !important; -webkit-tap-highlight-color: transparent;
}
/* Divider, sitting immediately left of the pill and centred against it —
   its own height is what centres it, so it matches the pill's 38px box. */
.eb-row-rule {
  width: 1px; height: 24px; flex-shrink: 0; display: block; align-self: center;
  background: rgba(255,255,255,0.2);
}
.eb-get-btn:active { filter: brightness(0.93); }
.eb-row-owned { font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 800; color: #8ce6aa; }

/* ── Detail page — same head as a list row (cover | rule | name) ── */
.ebd-head { margin-bottom: 4px; }
.ebd-cover-wrap { width: 116px; height: 116px; }
.ebd-eyebrow { font-family: 'DM Sans', sans-serif; font-size: 10px; letter-spacing: 3px; font-weight: 700; text-transform: uppercase; color: #e8d5a3; margin-bottom: 6px; }
.ebd-title { font-family: 'DM Sans', sans-serif; font-size: 23px; font-weight: 800; color: #fff; line-height: 1.15; letter-spacing: -0.5px; }
.ebd-sub { font-family: 'DM Sans', sans-serif; font-size: 13px; color: rgba(255,255,255,0.6); margin-top: 14px; line-height: 1.5; }
.ebd-label {
  font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: #e8d5a3; margin: 22px 0 8px;
}
.ebd-text { font-family: 'DM Sans', sans-serif; font-size: 13px; color: rgba(255,255,255,0.65); line-height: 1.65; }
.ebd-list { list-style: none; padding: 0; margin: 0; }
.ebd-list li {
  font-family: 'DM Sans', sans-serif; font-size: 12.5px; color: rgba(255,255,255,0.62);
  line-height: 1.5; padding: 8px 0 8px 20px; position: relative;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ebd-list li:last-child { border-bottom: none; }
.ebd-list li::before { content: '·'; position: absolute; left: 6px; color: #e8d5a3; font-weight: 800; }
.ebd-price-row { display: flex; align-items: baseline; gap: 10px; margin: 20px 0 12px; }
.ebd-price { font-family: 'DM Sans', sans-serif; font-size: 30px; font-weight: 800; color: #e8d5a3; }
.ebd-price-note { font-family: 'DM Sans', sans-serif; font-size: 11px; color: rgba(255,255,255,0.4); }
.ebd-buy-btn {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(135deg,#e8d5a3,#c8a96e); color: #060c18; border: none; cursor: pointer;
  font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 800; letter-spacing: 0.4px;
  padding: 16px; border-radius: 30px !important; -webkit-tap-highlight-color: transparent;
}
.ebd-buy-btn:active { filter: brightness(0.94); }
.ebd-action-row { display: flex; gap: 10px; margin-top: 10px; }
.ebd-action-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); color: #fff; cursor: pointer;
  font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 700;
  padding: 13px; border-radius: 30px !important; -webkit-tap-highlight-color: transparent;
}
.ebd-action-btn:active { background: rgba(255,255,255,0.12); }
.ebd-owned-note {
  text-align: center; font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 800;
  color: #8ce6aa; padding: 16px; border: 1px solid rgba(140,230,170,0.3);
  border-radius: 30px !important; background: rgba(140,230,170,0.07);
}

/* ══════════════════════════════════════════════════════════
   MY PROGRESS (#sub-my-progress) — black BOXES only, brighter text.
   (An earlier pass blackened the section WRAPPERS too, which turned
   whole regions into one big slab. Only the individual tiles/boxes
   below get a solid black surface; the sections around them stay
   transparent.)
   ══════════════════════════════════════════════════════════ */
#sub-my-progress .mp-greeting,
#sub-my-progress .mp-stat-box,
#sub-my-progress .mp-week-cell > div:first-child,
#sub-my-progress .mp-session-row,
#sub-my-progress .mp-milestones-grid > *,
#sub-my-progress .mp-insight-card,
#sub-my-progress .mp-empty-state,
#sub-my-progress .mp-chip,
#sub-my-progress .mp-feedback-textarea,
#sub-my-progress .hbm-chip {
  background: #000 !important;
  background-image: none !important;
  border-color: rgba(255,255,255,0.14) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
#sub-my-progress .mp-greeting::before { display: none !important; }
#sub-my-progress .hbm-chip.active,
#sub-my-progress .mp-chip.active { border-color: rgba(232,213,163,0.6) !important; }

/* Text was barely legible on the darkened surfaces — lift every muted tone. */
#sub-my-progress .mp-chip,
#sub-my-progress .hbm-chip-label,
#sub-my-progress .mp-week-name,
#sub-my-progress .mp-stat-sub,
#sub-my-progress .mp-session-disc,
#sub-my-progress .hbm-total { color: rgba(255,255,255,0.75) !important; }
#sub-my-progress .mp-empty-text,
#sub-my-progress .mp-session-reps-label,
#sub-my-progress .mp-insight-eyebrow { color: rgba(255,255,255,0.62) !important; }
#sub-my-progress .mp-milestone-name,
#sub-my-progress .mp-feedback-question,
#sub-my-progress .mp-empty-title,
#sub-my-progress .mp-session-word,
#sub-my-progress .hbm-title { color: #fff !important; }
#sub-my-progress .mp-stat-label,
#sub-my-progress .sub-section-label { color: #e8d5a3 !important; }
#sub-my-progress .mp-feedback-textarea::placeholder { color: rgba(255,255,255,0.45) !important; }

/* Buttons — white */
#sub-my-progress .mp-submit-btn,
#sub-my-progress .mp-empty-cta {
  background: #fff !important; border-color: #fff !important; color: #060c18 !important;
}
#sub-my-progress .mp-submit-btn:active,
#sub-my-progress .mp-empty-cta:active { background: #eee !important; }
#sub-my-progress .mp-submit-btn svg path,
#sub-my-progress .mp-empty-cta svg path { stroke: #060c18 !important; }

/* Body map: the 1px drop-shadow traced the body PNG's alpha edge, and the
   artwork is cropped flat on its left — so that outline drew a hard vertical
   line down the left of the figure. Keep the soft glow, drop the outline. */
#sub-my-progress .hbm-figure {
  filter: brightness(1.22) contrast(1.1) drop-shadow(0 0 16px rgba(120,180,255,.55)) !important;
}

/* Scrolling: keep vertical panning working everywhere on this page, and stop
   the feedback textarea from swallowing an upward swipe near the bottom. */
#sub-my-progress .sub-body { touch-action: pan-y; overscroll-behavior-y: contain; }
#sub-my-progress .mp-feedback-textarea { min-height: 96px; max-height: 140px; touch-action: pan-y; }

/* Loading state — our loading video instead of the spinner ring */
.mp-loading-video {
  width: calc(100% - 40px); max-width: 320px; aspect-ratio: 1080 / 411;
  object-fit: cover; display: block; border-radius: 16px !important;
}

/* ══════════════════════════════════════════════════════════════════
   FASHION HOME · the four tiles (.home-tile) — four looks, picked from
   Quick Access → Fashion Home Tiles and driven by body.fashtile-*:
     fashtile-black   — black banner card (default)
     fashtile-image   — 16:9 cover artwork
     fashtile-artwork — per-tile photo background + its own icon artwork
     fashtile-classic — glass card, icon stacked over the text
   plus body.fashcorner-rounded | body.fashcorner-edge. Every tile carries
   all four looks' pieces in its markup, so switching is a class swap only.
   ══════════════════════════════════════════════════════════════════ */

/* Cover artwork layers — carried by every tile, only painted in image mode */
.nmh-tile-cover, .home-tile-cover {
  display: none; position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.nmh-tile-cover-scrim, .home-tile-cover-scrim {
  display: none; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.28) 58%, rgba(0,0,0,0.66) 100%);
}

/* ── COVER IMAGE — the artwork already carries its own title, so the icon
   puck, vertical rule and DOM text all step aside. ── */
body.fashtile-image .home-tile {
  display: block !important; padding: 0 !important;
  min-height: 0 !important; aspect-ratio: 16 / 9 !important;
  background: #000 !important;
}
body.fashtile-image .home-tile-cover, body.fashtile-image .home-tile-cover-scrim { display: block; }
body.fashtile-image .home-tile-icon, body.fashtile-image .home-tile-rule,
body.fashtile-image .home-tile-txt { display: none !important; }
body.fashtile-image .home-tile-enter { bottom: 8px; right: 8px; }

/* ── CLASSIC — the pre-banner look: glass card, icon puck stacked above the
   title, no vertical rule, gold outline Enter pill. ── */
body.fashtile-classic .home-tile {
  display: flex !important; flex-direction: column; align-items: flex-start;
  aspect-ratio: auto !important; min-height: 148px !important;
  padding: 16px 14px 48px !important;
  background: rgba(255,255,255,0.055) !important;
  border: 1px solid rgba(232,213,163,0.18) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 10px 26px rgba(0,0,0,0.32) !important;
}
body.fashtile-classic .home-tile-rule { display: none !important; }
body.fashtile-classic .home-tile-icon {
  width: 44px !important; height: 44px !important; margin-bottom: 12px !important;
  border-radius: 15px !important;
}
body.fashtile-classic .home-tile-title { font-size: 14px !important; }
body.fashtile-classic .home-tile-enter {
  background: rgba(255,255,255,0.08) !important; border: 1px solid rgba(232,213,163,0.3) !important;
  padding: 5px 6px 5px 12px !important;
}
body.fashtile-classic .home-tile-enter-lbl { color: #e8d5a3 !important; }
body.fashtile-classic .home-tile-enter-go {
  width: 17px !important; height: 17px !important; background: rgba(232,213,163,0.14) !important;
}
body.fashtile-classic .home-tile-enter-go svg path { stroke: #e8d5a3 !important; }

/* ── ARTWORK — the look that came before the cover tiles: a full photo
   background per tile with its own trimmed icon artwork stacked over title
   + subtitle. Four different photos, four different icons. ── */
.nmh-tile-photo, .home-tile-photo {
  display: none; position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-repeat: no-repeat;
}
.nmh-tile-photo-scrim, .home-tile-photo-scrim {
  display: none; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(160deg, rgba(6,12,24,0.28) 0%, rgba(6,12,24,0.66) 100%);
}
.nmh-tile-articon, .home-tile-articon {
  display: none; position: relative; z-index: 2;
  width: 36px; height: 36px; object-fit: contain;
}
body.fashtile-artwork .home-tile {
  display: flex !important; flex-direction: column; align-items: flex-start;
  aspect-ratio: auto !important; min-height: 148px !important;
  padding: 16px 14px 48px !important;
  background: #060c18 !important; border: 1px solid rgba(255,255,255,0.08) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
body.fashtile-artwork .home-tile-photo, body.fashtile-artwork .home-tile-photo-scrim { display: block; }
body.fashtile-artwork .home-tile-articon { display: block; margin-bottom: 10px; }
body.fashtile-artwork .home-tile-icon, body.fashtile-artwork .home-tile-rule { display: none !important; }
body.fashtile-artwork .home-tile-txt { position: relative; z-index: 2; }
body.fashtile-artwork .home-tile-title { font-size: 14px !important; }
body.fashtile-artwork .home-tile-sub { color: rgba(255,255,255,0.66) !important; }

/* ── CORNERS (Fashion Home) ── (app/app.css resets every radius with
   *{border-radius:0 !important}, so both variants need !important too) */
body.fashcorner-rounded .home-tile { border-radius: 18px !important; }
body.fashcorner-edge .home-tile { border-radius: 0 !important; }

/* ══════════════════════════════════════════════════════════════════
   QUICK ACCESS → HOME TILES picker. A big glassmorphism plate holding a
   scaled-down 2x2 of the four home buttons, then the style + corner chips.
   The preview lives in its own .qat-* namespace so it can shrink freely
   without inheriting the live tiles' sizing.
   ══════════════════════════════════════════════════════════════════ */
.qat-plate {
  position: relative; padding: 16px 14px; margin-bottom: 4px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12); border-radius: 20px !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3);
  box-shadow: 0 14px 34px rgba(0,0,0,0.38);
}
.qat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.qat-tile {
  position: relative; overflow: hidden; min-height: 92px;
  padding: 10px 9px 30px; background: #000;
  border: 1px solid rgba(255,255,255,0.08); border-radius: 13px !important;
  display: grid; grid-template-columns: auto 1px 1fr; align-items: center; gap: 7px; align-content: start;
}
.qat-cover { display: none; position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; }
.qat-scrim { display: none; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.28) 58%, rgba(0,0,0,0.66) 100%); }
.qat-ic {
  display: block; width: 27px; height: 27px; flex-shrink: 0; border-radius: 50% !important; overflow: hidden;
  background: rgba(232,213,163,0.1); border: 1px solid rgba(232,213,163,0.24);
}
.qat-ic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qat-rule { display: block; width: 1px; align-self: stretch; background: rgba(255,255,255,0.18); }
.qat-txt { display: block; min-width: 0; }
.qat-name { display: block; font-family: 'DM Sans', sans-serif; font-size: 9px; font-weight: 800; color: #fff; line-height: 1.2; }
.qat-sub { display: block; font-family: 'DM Sans', sans-serif; font-size: 7.5px; color: rgba(255,255,255,0.5); line-height: 1.35; margin-top: 2px; }
.qat-enter {
  position: absolute; bottom: 7px; right: 7px; z-index: 2;
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  background: #fff; padding: 3px 3px 3px 8px; border-radius: 30px !important;
}
.qat-enter-lbl { font-family: 'DM Sans', sans-serif; font-size: 7px; font-weight: 800; letter-spacing: 0.3px; color: #060c18; }
.qat-enter-go { width: 13px; height: 13px; flex-shrink: 0; border-radius: 50% !important;
  background: rgba(6,12,24,0.1); display: flex; align-items: center; justify-content: center; }
.qat-enter-go svg { width: 7px; height: 7px; display: block; }

/* preview · cover-image variant */
.qat-grid.qat-image .qat-tile { display: block; padding: 0; min-height: 0; aspect-ratio: 16 / 9; }
.qat-grid.qat-image .qat-cover, .qat-grid.qat-image .qat-scrim { display: block; }
.qat-grid.qat-image .qat-ic, .qat-grid.qat-image .qat-rule, .qat-grid.qat-image .qat-txt { display: none; }
.qat-grid.qat-image .qat-enter { bottom: 5px; right: 5px; }

/* preview · classic variant */
.qat-grid.qat-classic .qat-tile {
  display: flex; flex-direction: column; align-items: flex-start;
  aspect-ratio: auto; min-height: 100px; padding: 11px 10px 32px;
  background: rgba(255,255,255,0.055); border: 1px solid rgba(232,213,163,0.18);
}
.qat-grid.qat-classic .qat-rule { display: none; }
.qat-grid.qat-classic .qat-ic { width: 29px; height: 29px; border-radius: 10px !important; margin-bottom: 8px; }
.qat-grid.qat-classic .qat-enter { background: rgba(255,255,255,0.08); border: 1px solid rgba(232,213,163,0.3); }
.qat-grid.qat-classic .qat-enter-lbl { color: #e8d5a3; }
.qat-grid.qat-classic .qat-enter-go { background: rgba(232,213,163,0.14); }
.qat-grid.qat-classic .qat-enter-go svg path { stroke: #e8d5a3; }

/* preview · corners */
.qat-grid.qat-corner-edge .qat-tile { border-radius: 0 !important; }

/* ══════════════════════════════════════════════════════════════════
   SHABDAPATHY · FOUNDATIONS (#sub-shabdapathy) — the image hero banner and
   the full-bleed background artwork are gone: the page is plain black with a
   slim persistent header (back · heading · customize-background) and our
   black banners. A custom background only appears if the user picks one.
   ══════════════════════════════════════════════════════════════════ */
#shabdaMainContent { background: #000; position: relative; }
#sub-shabdapathy .sub-header.nav-bar {
  position: relative; z-index: 2; flex-shrink: 0;
  background: #000 !important; background-image: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
#sub-shabdapathy .sub-body { position: relative; z-index: 1; background: transparent; }
/* Custom-background layer — hidden unless the user set one */
#sub-shabdapathy .sc-page-bg {
  display: none; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-size: cover; background-position: center;
}
body.nwsb-custom-fashion-bg #sub-shabdapathy .sc-page-bg {
  display: block; background-image: var(--nwsb-custom-bg-url);
}
body.nwsb-custom-fashion-bg #sub-shabdapathy .sc-page-bg::after {
  content: ''; position: absolute; inset: 0; background: rgba(6,12,24,0.72);
}
body.nwsb-custom-fashion-bg #shabdaMainContent { background: transparent; }
/* The banners sit inside .sub-body's own padding, so drop their side margins */
#sub-shabdapathy .sc-banner { margin: 0 0 12px; }
#sub-shabdapathy .sc-banner:first-child { margin-top: 4px; }
#sub-shabdapathy .sc-banner .nmh-sec-banner-sub { font-size: 11.5px; }
/* The mid-list eBook banner acts as a divider inside the chapter run */
#sub-shabdapathy .sc-banner-mid { margin: 20px 0 20px; }

/* preview · artwork variant */
.qat-art { display: none; position: relative; z-index: 2; width: 24px; height: 24px; object-fit: contain; }
.qat-photo { display: none; position: absolute; inset: 0; z-index: 0; background-size: cover; background-repeat: no-repeat; }
.qat-photo-scrim { display: none; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(160deg, rgba(6,12,24,0.28) 0%, rgba(6,12,24,0.66) 100%); }
.qat-grid.qat-artwork .qat-tile {
  display: flex; flex-direction: column; align-items: flex-start;
  aspect-ratio: auto; min-height: 100px; padding: 11px 10px 32px; background: #060c18;
}
.qat-grid.qat-artwork .qat-photo, .qat-grid.qat-artwork .qat-photo-scrim { display: block; }
.qat-grid.qat-artwork .qat-art { display: block; margin-bottom: 7px; }
.qat-grid.qat-artwork .qat-ic, .qat-grid.qat-artwork .qat-rule { display: none; }
.qat-grid.qat-artwork .qat-txt { position: relative; z-index: 2; }

/* preview · neumorphic variant (the Normal Home's default) */
.qat-grid.qat-neuro .qat-tile {
  display: flex; flex-direction: column; align-items: flex-start;
  aspect-ratio: auto; min-height: 100px; padding: 13px 12px 32px;
  background: #f0f2f7; border: none;
  box-shadow: 5px 5px 12px rgba(163,177,198,0.55), -4px -4px 10px #ffffff;
}
.qat-grid.qat-neuro .qat-rule { display: none; }
.qat-grid.qat-neuro .qat-ic {
  width: 30px; height: 30px; border-radius: 9px !important; margin-bottom: 8px;
  background: #f0f2f7; border: none;
  box-shadow: 3px 3px 7px rgba(163,177,198,0.5), -2px -2px 6px #ffffff;
}
.qat-grid.qat-neuro .qat-name { color: #1a1a2e; }
.qat-grid.qat-neuro .qat-sub { color: rgba(0,0,0,0.42); }
.qat-grid.qat-neuro .qat-enter {
  background: #f0f2f7; box-shadow: 2px 2px 5px rgba(163,177,198,0.6), -2px -2px 5px #ffffff;
}
.qat-grid.qat-neuro .qat-enter-lbl { color: #c8a96e; }
.qat-grid.qat-neuro .qat-enter-go { background: none; width: 8px; height: 8px; border-radius: 0 !important; }
.qat-grid.qat-neuro .qat-enter-go svg path { stroke: #c8a96e; }

/* ══════════════════════════════════════════════════════════════════
   TIP RAIL — sits above the four home buttons on both homes. The black
   settings circle (the NowssB player's settings icon) is pinned LEFT and
   opens the Home Tiles page; everything grows rightward from it: first a
   pill that opens one tile at a time explaining what that button is, then
   the circle itself into a pill with two chevrons pointing back at it, then
   a closing pill parked on the far right. Growing away from the circle is
   what keeps the two from ever colliding.
   ══════════════════════════════════════════════════════════════════ */
.htg-rail {
  width: 100%; display: flex; justify-content: flex-start; align-items: center;
  gap: 8px; min-height: 40px; margin-bottom: 10px; box-sizing: border-box; overflow: hidden;
}
.htg-set {
  position: relative;
  display: flex; align-items: center; flex-shrink: 0; cursor: pointer;
  padding: 3px; background: #000;
  border: 1px solid rgba(255,255,255,0.1); border-radius: 999px !important;
  /* No drop shadow: on the Normal Home's light surface a soft dark shadow
     reads as a grey rectangle sitting behind the pill. The pill is solid
     black — it needs no lift. */
  box-shadow: none;
  /* Collapsed it must be a true CIRCLE, so height and width are pinned to the
     same value with !important — plain `height` was resolving to 44px against
     the 40px box and rendering an oval. */
  height: 40px !important; min-height: 40px; box-sizing: border-box;
}
.htg-set:not(.open) { width: 40px !important; }
/* Traveling gold light — the same masked conic-gradient + --ctang sweep the
   home banners use, wrapped around the settings pill. */
.htg-set::before {
  content: ''; position: absolute; inset: -1px; border-radius: 999px; padding: 1.6px;
  pointer-events: none; z-index: 2;
  background: conic-gradient(from var(--ctang),
    transparent 0deg, transparent 230deg,
    rgba(255,214,150,0.55) 300deg, #fff4e2 340deg, rgba(255,214,150,0.55) 352deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: htgRingSeq 4.5s linear infinite; will-change: --ctang;
}
@keyframes htgRingSeq {
  0%   { --ctang: 0deg;   opacity: 1; }
  78%  { --ctang: 360deg; opacity: 1; }
  82%  { --ctang: 360deg; opacity: 0; }
  100% { --ctang: 360deg; opacity: 0; }
}
.htg-set-ic { width: 32px; height: 32px; flex-shrink: 0; border-radius: 50% !important; overflow: hidden; display: block; }
.htg-set-ic img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The label sits to the RIGHT of the icon and grows rightward, so the pill
   never travels back over the circle. */
.htg-set-lbl {
  display: flex; align-items: center; gap: 6px; overflow: hidden; white-space: nowrap;
  max-width: 0; opacity: 0; margin-right: 0;
  transition: max-width 0.9s cubic-bezier(0.4,0,0.2,1),
              margin-right 0.9s cubic-bezier(0.4,0,0.2,1),
              opacity 0.35s ease 0.15s;
}
.htg-set.open .htg-set-lbl { max-width: 260px; opacity: 1; margin-right: 8px; }
/* Two chevrons pointing back left at the settings icon */
.htg-set-arrows { display: flex; align-items: center; gap: 1px; flex-shrink: 0; margin-left: 9px; }
.htg-set-arrows svg { width: 10px; height: 10px; display: block; }
.htg-set-arrows svg:last-child { opacity: 0.45; }
.htg-set-txt {
  font-family: 'DM Sans', sans-serif; font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.2px; color: #e8d5a3;
}
.htg-tip {
  display: flex; align-items: center; gap: 0; height: 34px; min-width: 0;
  background: #000; border: 1px solid rgba(255,255,255,0.1);
  border-radius: 30px !important; overflow: hidden;
  max-width: 0; padding: 0; opacity: 0;
  transition: max-width 0.9s cubic-bezier(0.4,0,0.2,1),
              padding   0.9s cubic-bezier(0.4,0,0.2,1),
              gap       0.9s cubic-bezier(0.4,0,0.2,1),
              opacity   0.35s ease;
}
.htg-tip:not(.open) { border-width: 0; }   /* else the 1px borders leave a 2px sliver at max-width:0 */
.htg-tip.open { max-width: 380px; padding: 0 14px 0 5px; gap: 9px; opacity: 1; }
.htg-tip-ic {
  width: 24px; height: 24px; flex-shrink: 0; border-radius: 50% !important; overflow: hidden;
  background: rgba(232,213,163,0.1); border: 1px solid rgba(232,213,163,0.24); display: block;
}
.htg-tip-ic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.htg-tip-rule { width: 1px; height: 17px; flex-shrink: 0; background: rgba(255,255,255,0.22); display: block; }
.htg-tip-txt {
  font-family: 'DM Sans', sans-serif; font-size: 10.5px; font-weight: 700;
  color: rgba(255,255,255,0.9); white-space: nowrap; display: block;
}
/* Closing pill — parked on the far right, opens last */
.htg-end {
  margin-left: auto; flex-shrink: 0; height: 34px; display: flex; align-items: center; gap: 0;
  background: #000; border: 1px solid rgba(255,255,255,0.1);
  border-radius: 30px !important; overflow: hidden;
  max-width: 0; padding: 0; opacity: 0;
  transition: max-width 0.9s cubic-bezier(0.4,0,0.2,1),
              padding   0.9s cubic-bezier(0.4,0,0.2,1),
              opacity   0.35s ease;
}
.htg-end:not(.open) { border-width: 0; }
.htg-end.open { max-width: 300px; padding: 0 10px 0 8px; opacity: 1; gap: 7px; }
/* Vertical rule down the pill's left side, same divider the black banners use */
.htg-end-rule { width: 1px; height: 17px; flex-shrink: 0; background: rgba(232,213,163,0.4); display: block; }
.htg-end-txt {
  font-family: 'DM Sans', sans-serif; font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.2px; color: #e8d5a3; white-space: nowrap; display: block;
}
#home-nm .htg-rail { margin-bottom: 12px; }
/* The Fashion Home's rail is a direct child of .home-body, which is
   full-bleed — inset it to the same 16px the tile grid uses so the circle
   and the closing pill aren't cut off at the screen edges. */
:is(#home, .stw-prev-stage) .htg-rail { padding: 0 16px; }

/* Home Tiles page — same custom-background behaviour as Quick Access */
#sub-home-tiles .qa-page-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; pointer-events: none; display: none; }
body.nwsb-custom-fashion-bg #sub-home-tiles .qa-page-bg {
  display: block; background-image: var(--nwsb-custom-bg-url); background-color: var(--nwsb-custom-bg-color);
}
body.nwsb-custom-fashion-bg #sub-home-tiles .qa-page-bg::after { content: ''; position: absolute; inset: 0; background: rgba(6,12,24,0.72); }
body.nwsb-custom-fashion-bg #sub-home-tiles.bgp-screen { background: transparent !important; }
body.nwsb-custom-fashion-bg #sub-home-tiles .bgp-hero { background: none !important; }

/* ══════════════════════════════════════════════════════════════════
   NORMAL HOME · ARTWORK — the soft raised card with the big per-tile
   artwork on the right. Same card as Standard, but the icon puck carries
   the real feature image instead of a line SVG, and the Enter pill keeps
   its arrow. .nmh-tile-articon doubles as the large right-hand art here
   (it's the small stacked icon in the Fashion Home's artwork look).
   ══════════════════════════════════════════════════════════════════ */
body.nmtile-artwork .nmh-tile.nmh-tile-art {
  position: relative; overflow: hidden;
  padding: 18px 60% 46px 18px; min-height: 158px;
}
body.nmtile-artwork .nmh-tile.nmh-tile-art .nmh-tile-icon svg { display: none; }
body.nmtile-artwork .nmh-tile-picon { display: block !important; }
body.nmtile-artwork .nmh-tile.nmh-tile-art .nmh-tile-icon { overflow: hidden; margin-bottom: 12px !important; }
body.nmtile-artwork .nmh-tile-txt { position: relative; z-index: 2; }
body.nmtile-artwork .nmh-tile.nmh-tile-art .nmh-tile-title { font-size: 13px; }
body.nmtile-artwork .nmh-tile-articon {
  display: block; position: absolute; right: -6px; top: 40%; transform: translateY(-50%);
  width: 68%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; z-index: 1; pointer-events: none;
  filter: drop-shadow(3px 4px 6px rgba(163,177,198,0.5)) drop-shadow(-2px -2px 4px rgba(255,255,255,0.66));
}
body.nmtile-artwork #home-nm.nm-dark .nmh-tile-articon {
  filter: drop-shadow(3px 4px 7px rgba(0,0,0,0.6)) drop-shadow(-2px -2px 5px rgba(50,50,110,0.28));
}
/* Artwork shares Standard's Enter pill */
body.nmtile-artwork .nmh-tile-enter {
  position: absolute; right: 14px; bottom: 14px; z-index: 3;
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  background: #f0f2f7; border: none; padding: 6px 12px; border-radius: 20px !important;
  box-shadow: 3px 3px 7px rgba(163,177,198,0.6), -3px -3px 7px #ffffff;
}
body.nmtile-artwork .nmh-tile-enter-lbl {
  font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 800;
  letter-spacing: 0.3px; color: #c8a96e;
}
body.nmtile-artwork .nmh-tile-enter-go {
  width: 11px; height: 11px; flex-shrink: 0; border-radius: 0 !important;
  background: none; display: flex; align-items: center; justify-content: center;
}
body.nmtile-artwork .nmh-tile-enter-go svg { width: 11px; height: 11px; display: block; }
body.nmtile-artwork .nmh-tile-enter-go svg path { stroke: #c8a96e; }

/* ── CONCAVE (dimple) vs CONVEX (raised) — only meaningful on the two
   soft-surface looks. Convex is the default raised card; concave presses the
   same card and its icon puck into the surface with inset shadows. The base
   rules use an ID (#home-nm:not(.nm-dark)) so these need one too. ── */
body.nmsurface-concave.nmtile-neuro #home-nm:not(.nm-dark) .nmh-tile.nmh-tile-art,
body.nmsurface-concave.nmtile-artwork #home-nm:not(.nm-dark) .nmh-tile.nmh-tile-art {
  box-shadow: inset 8px 8px 18px rgba(163,177,198,0.62), inset -7px -7px 16px #ffffff !important;
}
body.nmsurface-concave.nmtile-neuro #home-nm:not(.nm-dark) .nmh-tile.nmh-tile-art .nmh-tile-icon,
body.nmsurface-concave.nmtile-artwork #home-nm:not(.nm-dark) .nmh-tile.nmh-tile-art .nmh-tile-icon {
  box-shadow: inset 4px 4px 10px rgba(163,177,198,0.6), inset -3px -3px 8px #ffffff !important;
}
body.nmsurface-concave.nmtile-neuro #home-nm.nm-dark .nmh-tile.nmh-tile-art,
body.nmsurface-concave.nmtile-artwork #home-nm.nm-dark .nmh-tile.nmh-tile-art {
  box-shadow: inset 7px 7px 18px rgba(0,0,0,0.88), inset -4px -4px 13px rgba(50,50,110,0.32) !important;
}
body.nmsurface-concave.nmtile-neuro .nmh-tile-enter,
body.nmsurface-concave.nmtile-artwork .nmh-tile-enter {
  box-shadow: inset 2px 2px 5px rgba(163,177,198,0.6), inset -2px -2px 5px #ffffff;
}

/* ── Section head: label left, scoped Default button right ── */
.ht-sec-head { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.ht-sec-head .bgp-section-label { flex: 1; min-width: 0; margin: 0; }
.ht-default-btn {
  flex-shrink: 0; cursor: pointer;
  font-family: 'DM Sans', sans-serif; font-size: 10.5px; font-weight: 800; letter-spacing: 0.3px;
  color: #e8d5a3; background: rgba(255,255,255,0.07);
  border: 1px solid rgba(232,213,163,0.28); border-radius: 20px !important;
  padding: 6px 14px;
}
.ht-default-btn:active { background: rgba(255,255,255,0.14); }
/* Two Apply buttons now, one per home — give each some breathing room */
#sub-home-tiles .qa-apply-cta { margin-bottom: 26px; }

/* ── Header: Reset and the customize-background button belong in the right
   corner, not crowded against the title. ── */
#sub-home-tiles .bgp-header-fixed .bgp-header-title { flex: 1; min-width: 0; }
#sub-home-tiles .bgp-header-fixed .qa-hdr-cust { margin-left: auto; }

/* ── Preview variants for the Normal Home (own prefix: its looks are soft
   cards, not the Fashion Home's dark ones) ── */
.qat-grid.qat-nm-image .qat-tile { display: block; padding: 0; min-height: 0; aspect-ratio: 16 / 9; }
.qat-grid.qat-nm-image .qat-cover, .qat-grid.qat-nm-image .qat-scrim { display: block; }
.qat-grid.qat-nm-image .qat-ic, .qat-grid.qat-nm-image .qat-rule, .qat-grid.qat-nm-image .qat-txt { display: none; }
.qat-grid.qat-nm-image .qat-enter { bottom: 5px; right: 5px; }
/* qat-nm-black needs nothing — the base .qat-tile already is the black card */

.qat-grid.qat-nm-neuro .qat-tile, .qat-grid.qat-nm-artwork .qat-tile {
  display: flex; flex-direction: column; align-items: flex-start;
  aspect-ratio: auto; min-height: 100px; padding: 13px 12px 32px;
  background: #f0f2f7; border: none;
  box-shadow: 5px 5px 12px rgba(163,177,198,0.55), -4px -4px 10px #ffffff;
}
.qat-grid.qat-nm-neuro .qat-rule, .qat-grid.qat-nm-artwork .qat-rule { display: none; }
.qat-grid.qat-nm-neuro .qat-ic, .qat-grid.qat-nm-artwork .qat-ic {
  width: 30px; height: 30px; border-radius: 9px !important; margin-bottom: 8px;
  background: #f0f2f7; border: none;
  box-shadow: 3px 3px 7px rgba(163,177,198,0.5), -2px -2px 6px #ffffff;
}
.qat-grid.qat-nm-neuro .qat-name, .qat-grid.qat-nm-artwork .qat-name { color: #1a1a2e; }
.qat-grid.qat-nm-neuro .qat-sub, .qat-grid.qat-nm-artwork .qat-sub { color: rgba(0,0,0,0.42); }
.qat-grid.qat-nm-neuro .qat-enter, .qat-grid.qat-nm-artwork .qat-enter {
  background: #f0f2f7; box-shadow: 2px 2px 5px rgba(163,177,198,0.6), -2px -2px 5px #ffffff;
}
.qat-grid.qat-nm-neuro .qat-enter-lbl, .qat-grid.qat-nm-artwork .qat-enter-lbl { color: #c8a96e; }
.qat-grid.qat-nm-neuro .qat-enter-go, .qat-grid.qat-nm-artwork .qat-enter-go {
  background: none; width: 8px; height: 8px; border-radius: 0 !important;
}
.qat-grid.qat-nm-neuro .qat-enter-go svg path, .qat-grid.qat-nm-artwork .qat-enter-go svg path { stroke: #c8a96e; }
/* artwork preview: art on the right, text column narrowed to clear it */
.qat-grid.qat-nm-artwork .qat-tile { padding-right: 55%; }
.qat-grid.qat-nm-artwork .qat-txt { position: relative; z-index: 2; }
.qat-grid.qat-nm-artwork .qat-art {
  display: block; position: absolute; right: -4px; top: 40%; transform: translateY(-50%);
  width: 62%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; z-index: 1;
  filter: drop-shadow(2px 3px 5px rgba(163,177,198,0.5));
}
/* concave preview */
.qat-grid.qat-surf-concave.qat-nm-neuro .qat-tile,
.qat-grid.qat-surf-concave.qat-nm-artwork .qat-tile {
  box-shadow: inset 5px 5px 12px rgba(163,177,198,0.62), inset -4px -4px 10px #ffffff;
}
.qat-grid.qat-surf-concave.qat-nm-neuro .qat-ic,
.qat-grid.qat-surf-concave.qat-nm-artwork .qat-ic {
  box-shadow: inset 3px 3px 7px rgba(163,177,198,0.6), inset -2px -2px 6px #ffffff;
}

/* ══════════════════════════════════════════════════════════════════
   HOME TILES page — labelled section furniture. A centred tag under each
   preview plate, then a tagged rule introducing each group of options.
   ══════════════════════════════════════════════════════════════════ */
.ht-tag-pill {
  display: inline-flex; align-items: center; flex-shrink: 0; white-space: nowrap;
  background: #000; border: 1px solid rgba(232,213,163,0.28);
  border-radius: 999px !important; padding: 6px 16px;
  font-family: 'DM Sans', sans-serif; font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.3px; color: #e8d5a3; line-height: 1;
}
.ht-preview-tag { display: flex; justify-content: center; margin: 14px 0 0; }
/* Tag on the left, thin rule running out to the right edge */
.ht-divider { display: flex; align-items: center; gap: 12px; margin: 24px 0 12px; }
.ht-divider::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.14); }
/* The scoped Default button was running tall next to the heading — the app's
   global 44px tap-target min-height was setting its height, not the padding. */
.ht-default-btn { padding: 5px 13px; line-height: 1; align-self: center; min-height: 0 !important; height: 30px; }

/* ── Third corner option, Normal Home only: full radius, which lands as a
   clean circle on that card. The Fashion Home's taller cards warp into a
   stadium at the same radius, so it isn't offered there. ── */
body.nmcorner-circle .nmh-tile.nmh-tile-art { border-radius: 999px !important; }
.qat-grid.qat-corner-circle .qat-tile { border-radius: 999px !important; }

/* Last-resort net so a label can never spill out of the rail on any width */
.htg-end { min-width: 0; }
.htg-end-txt { overflow: hidden; text-overflow: ellipsis; }

/* ── Logo on the far left of the closing pill, before its divider ── */
.htg-end-logo { width: 20px; height: 20px; flex-shrink: 0; display: block; }
.htg-end-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Subscription section — the card's backdrop is a video now, not the three
   crossfading stills. It sits under the existing gradient scrim (z-index 0),
   so the labels, copy and Upgrade button (z-index 2) read exactly as before. */
/* width/height are explicit, not just inset:0 — a <video> is a replaced
   element, so with auto sizing it falls back to its intrinsic 300px instead
   of stretching. 100% resolves against the card's padding box, which sits
   inside the Normal Home's 12px neumorphic frame, exactly as intended. */
.fsec-video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none;
}

/* Today's Practice CTA — one white pill holding the label and the arrow, the
   arrow in its own circle, matching the Enter pill on the home tiles. It was
   a bare label plus a separate square arrow box before. */
.tp-enter {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  background: #fff; border: none; padding: 4px 4px 4px 12px; border-radius: 30px !important;
}
.tp-enter-lbl {
  font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 800;
  letter-spacing: 0.3px; color: #060c18;
}
.tp-enter-go {
  width: 22px; height: 22px; flex-shrink: 0; border-radius: 50% !important;
  background: rgba(6,12,24,0.1); display: flex; align-items: center; justify-content: center;
}
.tp-enter-go svg { width: 11px; height: 11px; display: block; }

/* Health Journey on the Normal Home — the Fashion Home's own margins would
   fight that page's neumorphic plate, so it sits flush in the column like
   every other section embedded there. */
#home-nm .health-journey-card { margin: 0 !important; }
/* The card is sized by .hjc-content's own min-height:560px, not by the card
   box, so whatever border frames it stacks on top: 562 on Fashion (1px) and
   584 on the Normal Home (the plate's 12px). Subtract the frame from the
   content so BOTH land on 560 outer, matching the subscription sections.
   .hjc-content is a space-between flex column, so trimming it just closes the
   gap between the label row and the copy — nothing clips. */
:is(#home, .stw-prev-stage) .health-journey-card .hjc-content { min-height: 558px; }
#home-nm .health-journey-card .hjc-content { min-height: 536px; }

/* Today's Offer banner on the Fashion Home — inset to the same 16px the coupon
   art above it uses, with a gap between the two (the Normal Home's version has
   the same 14px) and square corners. The radius needs the :is(#home, .stw-prev-stage) scope: both
   .nmh-sec-banner's 22px and .nmh-offer-banner's 0 are !important at equal
   specificity, so source order was deciding it and the round one was winning. */
:is(#home, .stw-prev-stage) .fash-offer-banner {
  width: calc(100% - 32px) !important;
  margin: 14px 16px 20px !important;
  border-radius: 0 !important;
  box-sizing: border-box;
}

/* ══════════════════════════════════════════════════════════════════
   Intro pages are full-bleed cinematic covers with their own CTA pinned to
   the bottom, but #ig-bottomnav is position:fixed at z-index 1000 while an
   intro sits at z-index 30 inside a z-index 600 .sub-screen — so the nav
   always painted over them and covered the Enter button.

   Keyed off .sl-intro-hidden / .rm-intro-hidden, which is what every enter
   function adds on dismissal (it resolves to display:none), plus the inline
   display:none some screens use instead. Browsers without :has() simply
   ignore the rule and behave exactly as before, so this can't break them.
   ══════════════════════════════════════════════════════════════════ */
body:has(.sub-screen.open .sl-intro-page:not(.sl-intro-hidden):not([style*="display:none"]):not([style*="display: none"])) #ig-bottomnav,
body:has(.sub-screen.open .rm-intro-page:not(.rm-intro-hidden):not([style*="display:none"]):not([style*="display: none"])) #ig-bottomnav,
body:has(.sub-screen.open .ms-intro-page:not(.sl-intro-hidden):not([style*="display:none"]):not([style*="display: none"])) #ig-bottomnav {
  display: none !important;
}
/* The subscription intro is a bare #sub-intro-page with none of those classes,
   and it dismisses by hand — opacity/pointer-events first, display:none 500ms
   later. Keyed on pointer-events so the nav comes back as the fade starts
   rather than half a second after it. */
body:has(.sub-screen.open #sub-intro-page:not([style*="pointer-events: none"]):not([style*="display:none"]):not([style*="display: none"])) #ig-bottomnav {
  display: none !important;
}

/* Sound Library intro — the art is sized to 88% of the height (zoomed out from
   cover), so the shared .sl-intro-vignette, which only reaches 0.95 at the very
   bottom, left a visible step where the photo stopped. This one fades to fully
   solid AT 88%, so the bottom reads as the vignette closing out rather than the
   image running out. */
#slIntroPage .sl-intro-vignette {
  background: linear-gradient(to bottom,
    rgba(6,12,24,0.30) 0%,
    rgba(6,12,24,0.02) 18%,
    rgba(6,12,24,0.00) 36%,
    rgba(6,12,24,0.10) 52%,
    rgba(6,12,24,0.52) 70%,
    rgba(6,12,24,0.88) 82%,
    #060c18 88%,
    #060c18 100%) !important;
}

/* ══════════════════════════════════════════════════════════════════
   INTRO PAGES — readability + bottom spacing
   ══════════════════════════════════════════════════════════════════ */
/* The bottom block reserved var(--nav-height) for a nav bar that is now
   hidden while an intro is showing, so the button and stats floated ~58px
   higher than they needed to. That space is theirs again — but 22px put the
   Enter button hard against the bottom edge of the screen, which on a phone
   is also where the gesture bar is. Enough to sit above it and read as a
   button on a page rather than a bar stuck to the frame. */
.sl-intro-bottom {
  padding-bottom: calc(max(env(safe-area-inset-bottom, 0px), 8px) + 40px) !important;
}
/* Subtitles were rgba(255,255,255,0.52) at weight 300 with no shadow — over
   busy photography that reads as unreadable on every intro page. Brighter,
   slightly heavier, and carrying their own shadow so contrast no longer
   depends on whatever happens to be behind them. */
.sl-intro-desc {
  color: rgba(255,255,255,0.92) !important;
  font-weight: 400 !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 2px 16px rgba(0,0,0,0.8), 0 0 30px rgba(0,0,0,0.6);
}
/* Same problem, same page: the eyebrow above the title. */
.sl-intro-eyebrow {
  text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 2px 14px rgba(0,0,0,0.75);
}
/* …and the stat row under the CTA. */
.sl-intro-stat, .sl-intro-stat-sep {
  text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 2px 12px rgba(0,0,0,0.7);
}

/* Shabdapathy Foundations feature card — a scrim behind the bottom block so
   the title and subtitle stay readable over the busy photography, and the
   same white Enter pill as Today's Practice and the home tiles. */
.shabda-featured-card {
  /* 16:9 like the other media cards. It was a fixed 300px, which at 358px
     wide is ~1.2:1 — far taller than the art was cropped for, so `cover`
     zoomed in hard to fill it. */
  aspect-ratio: 16 / 9;
  min-height: 0 !important;
  height: auto !important;
}
.shabda-featured-card .home-card-bottom {
  position: relative; z-index: 2;
  padding: 40px 0 0;
}
.shabda-featured-card .home-card-bottom::before {
  content: ''; position: absolute; left: -20px; right: -20px; bottom: -20px; top: 0;
  z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(6,12,24,0) 0%, rgba(6,12,24,0.62) 45%, rgba(6,12,24,0.9) 100%);
}
.shabda-featured-card .home-card-sub { flex: 1; min-width: 0; }

/* ══════════════════════════════════════════════════════════════════
   QUICK LINKS — the banner under the store section, the glassmorphism sheet
   it lifts up (list + settings panes), and the floating button.
   ══════════════════════════════════════════════════════════════════ */
#home-nm .nmh-qlinks-banner { margin: 16px 0 8px; }

.ql-overlay {
  position: fixed; inset: 0; z-index: 4000;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(4,8,18,0.72);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none; transition: opacity 0.28s ease;
}
.ql-overlay.open { opacity: 1; pointer-events: auto; }
.ql-box {
  width: 100%; max-width: 420px; max-height: 78vh;
  display: flex; flex-direction: column; overflow: hidden;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14); border-radius: 24px !important;
  -webkit-backdrop-filter: blur(26px) saturate(1.35); backdrop-filter: blur(26px) saturate(1.35);
  box-shadow: 0 26px 60px rgba(0,0,0,0.55);
  transform: translateY(14px) scale(0.98); transition: transform 0.32s cubic-bezier(0.4,0,0.2,1);
}
.ql-overlay.open .ql-box { transform: translateY(0) scale(1); }

.ql-head {
  flex-shrink: 0; display: flex; align-items: center; gap: 10px;
  padding: 18px 16px 14px; border-bottom: 1px solid rgba(255,255,255,0.1);
}
.ql-head-txt { flex: 1; min-width: 0; }
.ql-head-title { font-family: 'DM Sans', sans-serif; font-size: 17px; font-weight: 800; color: #fff; letter-spacing: -0.2px; }
.ql-head-sub { font-family: 'DM Sans', sans-serif; font-size: 11.5px; color: rgba(255,255,255,0.6); margin-top: 3px; }
.ql-hbtn {
  width: 34px; height: 34px; min-width: 34px; min-height: 0 !important; flex-shrink: 0;
  padding: 0; border: none; cursor: pointer; border-radius: 50% !important; overflow: hidden;
  background: #fff; display: flex; align-items: center; justify-content: center;
}
.ql-hbtn svg { width: 15px; height: 15px; display: block; }
.ql-gear { background: #000; border: 1px solid rgba(255,255,255,0.16); }
.ql-gear img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Back only exists in the settings pane; the gear only in the list pane. */
.ql-back { display: none; }
.ql-box.settings .ql-back { display: flex; }
.ql-box.settings .ql-gear { display: none; }
.ql-box.settings .ql-head-title::after { content: ' · Settings'; font-weight: 600; color: rgba(255,255,255,0.55); }

.ql-scroll {
  flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 14px; display: flex; flex-direction: column; gap: 10px;
  touch-action: pan-y; scrollbar-width: none;
}
.ql-scroll::-webkit-scrollbar { display: none; }
.ql-pane-set { display: none; }
.ql-box.settings .ql-pane-list { display: none; }
.ql-box.settings .ql-pane-set { display: flex; }

/* Rows are the app's own black banner, tightened for a list */
.ql-overlay .ql-item {
  margin: 0 !important; padding: 14px 14px !important;
  border-radius: 16px !important; box-shadow: none !important;
}
.ql-overlay .ql-item .nmh-sec-banner-icon { width: 42px; height: 42px; overflow: hidden; }
.ql-overlay .ql-item .nmh-sec-banner-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ql-overlay .ql-item .nmh-sec-banner-title { font-size: 14px; }
.ql-overlay .ql-item .nmh-sec-banner-sub { font-size: 11px; }
.ql-overlay .ql-item .nmh-sec-banner-arrow { width: 32px; height: 32px; }
.ql-overlay .ql-item .nmh-sec-banner-arrow svg { width: 15px; height: 15px; }

/* ── settings pane ── */
.ql-float-row {
  display: flex; align-items: center; gap: 14px; cursor: pointer; flex-shrink: 0;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px !important; padding: 14px;
}
.ql-float-txt { flex: 1; min-width: 0; display: block; }
.ql-float-t { display: block; font-family: 'DM Sans', sans-serif; font-size: 13.5px; font-weight: 800; color: #fff; }
.ql-float-s { display: block; font-family: 'DM Sans', sans-serif; font-size: 11px; color: rgba(255,255,255,0.55); line-height: 1.45; margin-top: 3px; }
.ql-switch {
  width: 46px; height: 27px; flex-shrink: 0; border-radius: 30px !important;
  background: rgba(255,255,255,0.16); position: relative; transition: background 0.22s ease; display: block;
}
.ql-switch.on { background: #e8d5a3; }
.ql-switch-knob {
  position: absolute; top: 3px; left: 3px; width: 21px; height: 21px;
  border-radius: 50% !important; background: #fff; display: block;
  transition: transform 0.22s cubic-bezier(0.4,0,0.2,1);
}
.ql-switch.on .ql-switch-knob { transform: translateX(19px); }
.ql-set-label {
  flex-shrink: 0;
  font-family: 'DM Sans', sans-serif; font-size: 9.5px; font-weight: 700;
  letter-spacing: 2.4px; text-transform: uppercase; color: #e8d5a3; margin: 6px 2px 0;
}
/* The picks sit in their own container, so .ql-scroll's gap doesn't reach
   them — they were rendering flush against each other. */
#qlSetList { display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; }
.ql-pick {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09);
  border-radius: 14px !important; padding: 10px 12px;
}
.ql-pick.on { background: rgba(232,213,163,0.12); border-color: rgba(232,213,163,0.34); }
.ql-pick-ic {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 50% !important; overflow: hidden; display: block;
  background: rgba(232,213,163,0.1); border: 1px solid rgba(232,213,163,0.24);
}
.ql-pick-ic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ql-pick-txt { flex: 1; min-width: 0; display: block; }
.ql-pick-t { display: block; font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 700; color: #fff; }
.ql-pick-s { display: block; font-family: 'DM Sans', sans-serif; font-size: 10.5px; color: rgba(255,255,255,0.48); margin-top: 2px; }
.ql-pick-box {
  width: 24px; height: 24px; flex-shrink: 0; border-radius: 50% !important;
  border: 1.5px solid rgba(255,255,255,0.28); display: flex; align-items: center; justify-content: center;
}
.ql-pick.on .ql-pick-box { background: #e8d5a3; border-color: #e8d5a3; }
.ql-pick-box svg { width: 12px; height: 12px; display: block; }

/* ── floating button — rides above every screen, under the sheet itself ── */
/* overflow stays VISIBLE: the travelling ring is a ::before at inset:-2px, so
   clipping the wrapper hid it entirely. The image rounds itself instead. */
.ql-fab {
  position: fixed; z-index: 3900; width: 54px; height: 54px;
  align-items: center; justify-content: center; cursor: pointer;
  border-radius: 50% !important; overflow: visible;
  background: rgba(6,12,24,0.55); border: 1px solid rgba(255,255,255,0.18);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 10px 26px rgba(0,0,0,0.5);
  opacity: 0.97; touch-action: none; -webkit-tap-highlight-color: transparent;
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.ql-fab img {
  width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none;
  border-radius: 50% !important;
}
.ql-fab.dragging { transform: scale(1.08); opacity: 1; transition: none; }
.ql-fab:active { transform: scale(0.94); }

/* ── Drag-to-remove — appears while the floating button is held ── */
.ql-drop {
  position: fixed; left: 0; right: 0; bottom: 0; height: 56vh; z-index: 3890;
  /* Anchored from the TOP, not the bottom: with flex-end a full-height image
     would push its own top (the bin) back up into the mask ramp on a real
     device. From the top the bin always lands the same distance down, and any
     excess just runs off the bottom edge, which is black anyway. */
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
  padding-top: 14vh; padding-bottom: 0; overflow: hidden;
  pointer-events: none; opacity: 0; transition: opacity 0.24s ease;
  /* Solid black from just under halfway down, so everything below the artwork
     is black rather than the page showing through. */
  background: linear-gradient(to bottom,
    rgba(4,8,18,0) 0%, rgba(4,8,18,0.5) 16%, rgba(4,8,18,0.9) 30%, #000 44%, #000 100%);
  /* The mask ramp finishes high up, well above where the bin now sits, so the
     bin isn't faded out by the zone's own edge. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 13%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 13%);
  /* No backdrop-filter until it's actually shown. A 46vh blur layer sitting
     in the page permanently forces the compositor to re-render that region on
     every frame, which is what made scrolling stutter. content-visibility
     keeps it out of layout entirely while hidden. */
  visibility: hidden; content-visibility: hidden;
}
.ql-drop.show {
  opacity: 1; visibility: visible; content-visibility: visible;
  -webkit-backdrop-filter: blur(14px) saturate(0.9); backdrop-filter: blur(14px) saturate(0.9);
}
/* The bin artwork runs edge to edge; the vignette over it feathers all four
   sides so the art has no visible box, it just emerges out of the darkened
   zone. No red on arming — it simply gets removed when it's close enough. */
.ql-drop-target {
  position: relative; width: 100%; display: block; margin-top: 0;
  /* floor so the box (and the hotspot's % offset) still resolves if the
     artwork hasn't decoded yet */
  min-height: 220px;
  transition: transform 0.24s cubic-bezier(0.34,1.4,0.64,1);
}
.ql-drop-target img { width: 100%; height: auto; display: block; }
.ql-drop-vignette {
  position: absolute; inset: 0; pointer-events: none; display: block;
  /* The bin sits in the TOP fifth of the artwork, so the top feather starts
     well above it — it was washing the bin out before. */
  background:
    linear-gradient(to right,  rgba(4,8,18,0.98) 0%, rgba(4,8,18,0) 24%, rgba(4,8,18,0) 76%, rgba(4,8,18,0.98) 100%),
    linear-gradient(to bottom, rgba(4,8,18,0.55) 0%, rgba(4,8,18,0) 4%, rgba(4,8,18,0) 74%, #000 100%);
}
/* Invisible hotspot over the bin itself. The magnet aims at THIS, not the
   middle of the artwork — the centre of the image is her lap, which is why
   the button was being pulled onto her face instead of into the bin. */
.ql-drop-hot {
  position: absolute; left: 50%; top: 17%; width: 96px; height: 96px;
  transform: translate(-50%, -50%); pointer-events: none; display: block;
}
.ql-drop.armed .ql-drop-target { transform: scale(1.06); }
.ql-drop-label {
  position: absolute; left: 0; right: 0;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
  text-align: center; margin-top: 0; font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase; color: rgba(255,255,255,0.7);
  transition: color 0.2s ease;
}
.ql-drop.armed .ql-drop-label { color: rgba(255,255,255,0.95); }
/* While held, the button shrinks a touch as it nears the target */
.ql-fab.arming { transform: scale(0.82); opacity: 1; }

/* ── Floating-button face picker + its tracing ring ── */
.ql-face-row { display: flex; gap: 10px; flex-shrink: 0; }
.ql-face {
  flex: 1; min-width: 0; cursor: pointer; display: flex; flex-direction: column;
  align-items: center; gap: 7px; padding: 10px 6px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09);
  border-radius: 14px !important;
}
.ql-face.on { background: rgba(255,255,255,0.09); border-color: var(--ql-ring, #e8d5a3); }
.ql-face-orb {
  position: relative; width: 42px; height: 42px; flex-shrink: 0; display: block;
  border-radius: 50% !important; overflow: hidden; background: #000;
}
.ql-face-orb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ql-face-lbl {
  font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 700;
  letter-spacing: 0.3px; color: rgba(255,255,255,0.72);
}
/* Explicit select control, matching the tick the shortcut rows use — the
   highlighted border alone wasn't reading as "this one is chosen". */
.ql-face-pick {
  width: 20px; height: 20px; flex-shrink: 0; border-radius: 50% !important;
  border: 1.5px solid rgba(255,255,255,0.3); display: flex; align-items: center; justify-content: center;
}
.ql-face.on .ql-face-pick { background: var(--ql-ring, #e8d5a3); border-color: var(--ql-ring, #e8d5a3); }
.ql-face-pick svg { width: 11px; height: 11px; display: block; }
.ql-face.on .ql-face-lbl { color: var(--ql-ring, #e8d5a3); }

/* Each face carries its own accent, used by the picker's border and by the
   travelling ring around the floating button. */
.ic-blue   { --ql-ring: #5ab6ff; --ql-ring-soft: rgba(90,182,255,0.5); }
.ic-yellow { --ql-ring: #ffe14d; --ql-ring-soft: rgba(255,225,77,0.5); }
.ic-red    { --ql-ring: #ff5a5a; --ql-ring-soft: rgba(255,90,90,0.5); }
.ic-purple { --ql-ring: #b06bff; --ql-ring-soft: rgba(176,107,255,0.5); }

/* Travelling light around the wrapper — the same masked conic-gradient and
   --ctang sweep the home banners use, tinted to the chosen face. */
.ql-fab::before {
  content: ''; position: absolute; inset: -2px; border-radius: 50%; padding: 2px;
  pointer-events: none; z-index: 2;
  background: conic-gradient(from var(--ctang),
    transparent 0deg, transparent 232deg,
    var(--ql-ring-soft, rgba(255,255,255,0.5)) 300deg,
    var(--ql-ring, #fff) 340deg,
    var(--ql-ring-soft, rgba(255,255,255,0.5)) 352deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: qlFabRing 3.6s linear infinite; will-change: --ctang;
}
@keyframes qlFabRing { from { --ctang: 0deg; } to { --ctang: 360deg; } }

/* ── NowssB Connect bottom nav — back to the app home, far left ──
   A plain white circle: no shadow of any kind, since the bar it sits in is
   flat too. The rule after it separates it from the nav items. */
#ig-social-nav .ig-social-back {
  width: 30px; height: 30px; min-width: 30px; min-height: 0 !important;
  flex-shrink: 0; margin-left: 14px; padding: 0; border: none; cursor: pointer;
  border-radius: 50% !important; background: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: none !important; filter: none;
  -webkit-tap-highlight-color: transparent;
}
#ig-social-nav .ig-social-back svg { width: 15px; height: 15px; display: block; }
#ig-social-nav .ig-social-back:active { filter: brightness(0.92); }
#ig-social-nav .ig-social-backrule {
  width: 1px; height: 24px; flex-shrink: 0; display: block;
  background: rgba(255,255,255,0.18); margin: 0 2px 0 12px;
}

/* Connect nav labels were computing to rgba(0,0,0,0.4) — black text on the
   black bar, so only the gold active one was legible. Doubled id to outrank
   whatever mode rule is setting that, exactly as #ig-bottomnav needed. */
#ig-social-nav#ig-social-nav .ig-social-btn span:not(.ig-social-img) {
  color: rgba(255,255,255,0.72) !important; display: block !important; opacity: 1 !important;
}
#ig-social-nav#ig-social-nav .ig-social-btn.active span:not(.ig-social-img),
#ig-social-nav#ig-social-nav .ig-social-btn.on span:not(.ig-social-img) {
  color: #e8d5a3 !important;
}

/* Quick Links banner on the Fashion Home — square corners and inset to the
   same 16px the tile grid uses, with clear air above and below. */
:is(#home, .stw-prev-stage) .fash-qlinks-banner {
  width: calc(100% - 32px) !important;
  margin: 18px 16px 22px !important;
  border-radius: 0 !important;
  box-sizing: border-box;
}

/* ══════════════════════════════════════════════════════════════════
   SET AS YOU LIKE — the home layout editor (app/js/part062.js).

   Same glass language as the Quick Links sheet so the two Appearance
   surfaces read as one family: a blurred scrim, a translucent card, and
   rows that are legible over whatever home is behind them.
   ══════════════════════════════════════════════════════════════════ */

/* The entry banner, matched to the Quick Links banner on both homes. */
:is(#home, .stw-prev-stage) .fash-layout-banner {
  width: calc(100% - 32px) !important;
  margin: 0 16px 22px !important;
  border-radius: 0 !important;
  box-sizing: border-box;
}
#home-nm .nmh-layout-banner { margin: 0 0 8px; }

/* A section switched off keeps its node in the wrap so turning it back on is
   a class flip, not a re-render — but nothing about it may take up space. */
.hl-off { display: none !important; }

.hl-overlay {
  position: fixed; inset: 0; z-index: 4000;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(4,8,18,0.72);
  opacity: 0; pointer-events: none; transition: opacity 0.28s ease;
  content-visibility: hidden;
}
/* Blur only while open. A backdrop-filter that is always mounted makes the
   compositor re-render the layer behind it every frame — that is exactly what
   froze scrolling when the Quick Links drop zone carried one full time. */
.hl-overlay.open {
  opacity: 1; pointer-events: auto; content-visibility: visible;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

.hl-box {
  position: relative;
  width: 100%; max-width: 420px; max-height: 82vh;
  display: flex; flex-direction: column; overflow: hidden;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14); border-radius: 24px !important;
  -webkit-backdrop-filter: blur(26px) saturate(1.35); backdrop-filter: blur(26px) saturate(1.35);
  box-shadow: 0 26px 60px rgba(0,0,0,0.55);
  transform: translateY(14px) scale(0.98); transition: transform 0.32s cubic-bezier(0.4,0,0.2,1);
}
.hl-overlay.open .hl-box { transform: translateY(0) scale(1); }

.hl-head {
  flex-shrink: 0; display: flex; align-items: center; gap: 12px;
  padding: 18px 16px 14px; border-bottom: 1px solid rgba(255,255,255,0.1);
}
.hl-head-icon {
  width: 38px; height: 38px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.42); border: 1px solid rgba(255,255,255,0.16);
  border-radius: 12px !important;
}
.hl-head-icon svg { width: 20px; height: 20px; }
.hl-head-txt { flex: 1; min-width: 0; }
.hl-head-title {
  font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 700;
  color: #fff; letter-spacing: 0.2px;
}
.hl-head-sub {
  font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 300;
  color: rgba(255,255,255,0.5); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hl-close {
  width: 34px !important; height: 34px !important; min-height: 34px !important;
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.13);
  border-radius: 50% !important; cursor: pointer;
}
.hl-close svg { width: 15px; height: 15px; }

.hl-tabs {
  flex-shrink: 0; display: flex; gap: 8px; padding: 12px 16px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.hl-tab {
  flex: 1; text-align: center; cursor: pointer;
  padding: 9px 6px; min-height: 0 !important;
  font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase;
  color: rgba(255,255,255,0.42);
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px !important; transition: all 0.2s;
}
.hl-tab.on {
  color: #060c18; background: #e8d5a3; border-color: #e8d5a3;
}

.hl-list {
  flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 10px 12px 14px; scrollbar-width: none;
}
.hl-list::-webkit-scrollbar { display: none; }

.hl-row {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 12px; margin-bottom: 8px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 14px !important;
}
.hl-row-locked { background: rgba(255,255,255,0.03); border-style: dashed; }
.hl-row-off { opacity: 0.42; }

.hl-num {
  width: 30px !important; height: 30px !important; min-height: 30px !important;
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(232,213,163,0.14); border: 1px solid rgba(232,213,163,0.34);
  border-radius: 9px !important; cursor: pointer;
  font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 700;
  color: #e8d5a3;
}
.hl-num:active { background: rgba(232,213,163,0.28); }
.hl-num-lock { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.12); cursor: default; }
.hl-num-lock svg { width: 15px; height: 15px; }

.hl-body { flex: 1; min-width: 0; }
.hl-label {
  font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600;
  color: #fff; display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.hl-sub {
  font-family: 'DM Sans', sans-serif; font-size: 10.5px; font-weight: 300;
  color: rgba(255,255,255,0.44); margin-top: 2px; line-height: 1.4;
}
.hl-chip {
  font-size: 7.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  padding: 2px 6px; border-radius: 5px !important; flex-shrink: 0;
}
.hl-chip-ban  { color: rgba(200,232,245,0.85); background: rgba(200,232,245,0.1); border: 1px solid rgba(200,232,245,0.25); }
.hl-chip-lock { color: rgba(255,255,255,0.5);  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); }

.hl-arrows { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }
.hl-arw {
  width: 26px !important; height: 21px !important; min-height: 21px !important;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.13);
  border-radius: 7px !important; cursor: pointer; color: rgba(255,255,255,0.8);
}
.hl-arw svg { width: 12px; height: 12px; }
.hl-arw:active { background: rgba(255,255,255,0.16); }
.hl-arw-off { opacity: 0.22; pointer-events: none; }

.hl-eye {
  width: 42px !important; height: 24px !important; min-height: 24px !important;
  flex-shrink: 0; position: relative; cursor: pointer;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px !important; transition: background 0.22s, border-color 0.22s;
}
.hl-eye.on { background: rgba(232,213,163,0.85); border-color: rgba(232,213,163,0.95); }
.hl-eye-knob {
  position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 50% !important; background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3); transition: left 0.22s;
}
.hl-eye.on .hl-eye-knob { left: 20px; }
.hl-eye-fixed { width: 42px; height: 24px; flex-shrink: 0; }

.hl-foot {
  flex-shrink: 0; display: flex; gap: 10px; padding: 12px 16px 16px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.hl-reset, .hl-done {
  flex: 1; text-align: center; cursor: pointer; padding: 13px 6px;
  font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase; border-radius: 12px !important;
}
.hl-reset { color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.13); }
.hl-done  { color: #060c18; background: #fff; border: 1px solid #fff; }

/* Move-to-position sheet — sits inside the box so it can't be scrolled away
   from the row that opened it. */
.hl-picker {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  /* Solid on purpose: translucent, the Reset/Done row and the list rows
     underneath stayed legible straight through and read as a second layout
     competing with the number grid. Solid also means no backdrop-filter,
     so this sheet costs nothing while it sits closed. */
  background: #080d1a;
  border-top: 1px solid rgba(255,255,255,0.14);
  border-radius: 22px 22px 24px 24px !important;
  transform: translateY(102%); transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
}
.hl-picker.open { transform: translateY(0); }
.hl-picker-head {
  font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase; line-height: 1.6;
  color: rgba(255,255,255,0.55); margin: 0 6px 12px; text-align: center;
  overflow-wrap: anywhere;
}
.hl-picker-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px;
  max-height: 34vh; overflow-y: auto; scrollbar-width: none;
}
.hl-picker-grid::-webkit-scrollbar { display: none; }
.hl-pn {
  height: 40px !important; min-height: 40px !important;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 11px !important;
  font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 700;
  color: rgba(255,255,255,0.82);
}
.hl-pn.on { background: #e8d5a3; border-color: #e8d5a3; color: #060c18; }
.hl-pn:active { background: rgba(255,255,255,0.16); }
.hl-picker-cancel {
  margin-top: 12px; text-align: center; cursor: pointer; padding: 12px;
  font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px !important;
}

/* ══════════════════════════════════════════════════════════════════
   CUSTOMIZE HUB — every appearance control behind one tap
   (app/js/part063.js). Same glass shell as Set As You Like and Quick
   Links; the body is a 2-up card grid rather than a list because these
   are destinations, not settings with state.
   ══════════════════════════════════════════════════════════════════ */
.cu-overlay {
  position: fixed; inset: 0; z-index: 4000;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(4,8,18,0.72);
  opacity: 0; pointer-events: none; transition: opacity 0.28s ease;
  content-visibility: hidden;
}
/* Blur only while open — an always-mounted backdrop-filter re-composites the
   whole page every frame, which is what froze scrolling once already. */
.cu-overlay.open {
  opacity: 1; pointer-events: auto; content-visibility: visible;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

.cu-box {
  width: 100%; max-width: 420px; max-height: 82vh;
  display: flex; flex-direction: column; overflow: hidden;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14); border-radius: 24px !important;
  -webkit-backdrop-filter: blur(26px) saturate(1.35); backdrop-filter: blur(26px) saturate(1.35);
  box-shadow: 0 26px 60px rgba(0,0,0,0.55);
  transform: translateY(14px) scale(0.98); transition: transform 0.32s cubic-bezier(0.4,0,0.2,1);
}
.cu-overlay.open .cu-box { transform: translateY(0) scale(1); }

.cu-head {
  flex-shrink: 0; display: flex; align-items: center; gap: 12px;
  padding: 18px 16px 14px; border-bottom: 1px solid rgba(255,255,255,0.1);
}
.cu-head-icon {
  width: 38px; height: 38px; flex-shrink: 0; overflow: hidden;
  background: rgba(0,0,0,0.42); border: 1px solid rgba(255,255,255,0.16);
  border-radius: 12px !important;
}
.cu-head-txt { flex: 1; min-width: 0; }
.cu-head-title {
  font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 700;
  color: #fff; letter-spacing: 0.2px;
}
.cu-head-sub {
  font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 300;
  color: rgba(255,255,255,0.5); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cu-close {
  width: 34px !important; height: 34px !important; min-height: 34px !important;
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.13);
  border-radius: 50% !important; cursor: pointer;
}
.cu-close svg { width: 15px; height: 15px; }

.cu-grid {
  flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding: 14px 14px 18px; scrollbar-width: none;
}
.cu-grid::-webkit-scrollbar { display: none; }

.cu-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 14px 13px 15px; cursor: pointer;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px !important; transition: background 0.18s, border-color 0.18s;
}
.cu-card:active { background: rgba(255,255,255,0.13); border-color: rgba(232,213,163,0.4); }
.cu-card-icon {
  width: 40px; height: 40px; margin-bottom: 9px; overflow: hidden; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.42); border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px !important;
}
.cu-card-icon svg { width: 21px; height: 21px; }
.cu-card-label {
  font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 700;
  color: #fff; letter-spacing: 0.1px; line-height: 1.25;
}
.cu-card-sub {
  font-family: 'DM Sans', sans-serif; font-size: 10.5px; font-weight: 300;
  color: rgba(255,255,255,0.45); line-height: 1.35;
}

/* Header entry points. The Normal home's group already styles its buttons
   via .nmh-settings-btn; the Fashion hero needs its own, matched to the
   All-features button that sits beside it. */
.hero-cust-btn {
  width: 44px !important; height: 44px !important; min-height: 44px !important;
  flex-shrink: 0; padding: 0; cursor: pointer; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6,12,24,0.42); border: 1px solid rgba(232,213,163,0.32);
  /* Round, to read as the smaller sibling of the round All-features button
     it sits next to rather than a different kind of control. */
  border-radius: 50% !important;
}
.hero-cust-btn img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Three header buttons instead of two left "NOWSBANSIU EDITION" about two
   pixels short of fitting on one line, so it wrapped. Tightening the group's
   gap hands those pixels back to the brand text. */
.nmh-toprow .nmh-btn-group { gap: 6px; }
.nmh-brand-sub { white-space: nowrap; letter-spacing: 1.6px; }

/* ══════════════════════════════════════════════════════════════════
   CUSTOMIZE PANEL — Quick Access, Quick Links and Set As You Like in one
   glass card on each home, instead of three black banners spread down the
   page. The header row opens the full Customize hub.
   ══════════════════════════════════════════════════════════════════ */
.cust-panel {
  box-sizing: border-box; overflow: hidden;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 22px !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.25); backdrop-filter: blur(18px) saturate(1.25);
  box-shadow: 0 16px 40px rgba(0,0,0,0.34);
}
/* Normal home sits inside .nmh-wrap's own 20px padding; the Fashion home
   insets to the same 16px its tile grid uses. */
#home-nm .nmh-cust-panel { width: 100%; margin: 16px 0 8px; }
/* Square by default, because every other section on the Fashion home is —
   the Corners option in the hub is what rounds it, not this. */
:is(#home, .stw-prev-stage) .fash-cust-panel {
  width: calc(100% - 32px); margin: 18px 16px 22px;
  border-radius: 0 !important;
}

.cust-panel-head {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  padding: 15px 16px 14px; border-bottom: 1px solid rgba(255,255,255,0.1);
  background: rgba(0,0,0,0.18);
}
.cust-panel-head:active { background: rgba(0,0,0,0.3); }
.cust-panel-icon {
  width: 38px; height: 38px; flex-shrink: 0; overflow: hidden;
  background: rgba(0,0,0,0.45); border: 1px solid rgba(255,255,255,0.16);
  border-radius: 12px !important;
}
.cust-panel-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cust-panel-txt { flex: 1; min-width: 0; }
.cust-panel-title {
  font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 700;
  color: #fff; letter-spacing: 0.2px;
}
.cust-panel-sub {
  font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 300;
  color: rgba(255,255,255,0.5); margin-top: 2px;
}
.cust-panel-more { width: 20px; height: 20px; flex-shrink: 0; }
.cust-panel-more svg { width: 100%; height: 100%; display: block; }

.cust-row {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,0.07);
}
.cust-row:last-child { border-bottom: none; }
.cust-row:active { background: rgba(255,255,255,0.06); }
.cust-row-icon {
  width: 38px !important; height: 38px !important; flex-shrink: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: #000; border: 1px solid rgba(255,255,255,0.16);
  border-radius: 11px !important;
}
.cust-row-icon svg { width: 19px; height: 19px; }
.cust-row-divider { width: 1px; align-self: stretch; flex-shrink: 0; background: rgba(255,255,255,0.14); }
.cust-row-txt { flex: 1; min-width: 0; }
.cust-row-title {
  font-family: 'DM Sans', sans-serif; font-size: 13.5px; font-weight: 600;
  color: #fff; letter-spacing: 0.1px;
}
.cust-row-sub {
  font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 300;
  color: rgba(255,255,255,0.45); margin-top: 2px; line-height: 1.4;
}
.cust-row-arrow {
  width: 30px !important; height: 30px !important; min-height: 30px !important;
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
  border-radius: 50% !important;
}
.cust-row-arrow svg { width: 14px; height: 14px; }

/* ══════════════════════════════════════════════════════════════════
   CUSTOMIZE, ON THE NORMAL HOME — neumorphic, like everything around it.

   This was a dark navy card dropped into a light cream page: readable,
   but plainly a visitor from the Fashion home. It is the same panel and
   the same rows; only the surface changes. The head now reads exactly
   like the greeting at the top of this page — a round raised orb, the
   heavy name, the quiet line under it — because that is the type
   hierarchy this home already uses to introduce a section.

   The Fashion home and the night skin are untouched; both keep the glass.
   ══════════════════════════════════════════════════════════════════ */
#home-nm:not(.nm-dark) .nmh-cust-panel {
  background: #f0f2f7; border: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 7px 7px 16px rgba(0,0,0,0.14), -5px -5px 12px rgba(255,255,255,0.97);
  padding-bottom: 4px;
  /* .cust-panel clips its children so the glass card's corners cut cleanly.
     A neumorphic child casts its shadow OUTSIDE itself, so that clip would
     shear every row's shadow into a straight edge and flatten the whole
     thing — the same way overflow:hidden squared off the player wrapper.
     Nothing here needs clipping: the scroller below does its own. */
  overflow: visible;
}

/* ── The head ── */
#home-nm:not(.nm-dark) .nmh-cust-panel .cust-panel-head {
  background: transparent; border-bottom: none;
  align-items: flex-start; gap: 14px; padding: 18px 18px 12px;
}
#home-nm:not(.nm-dark) .nmh-cust-panel .cust-panel-head:active { background: transparent; }

/* Round, raised, the same disc the greeting orb is. */
#home-nm:not(.nm-dark) .nmh-cust-panel .cust-panel-icon {
  width: 54px; height: 54px; margin-top: 2px;
  background: #f0f2f7; border: none;
  border-radius: 50% !important;
  box-shadow: 6px 6px 14px rgba(163,177,198,0.6), -5px -5px 12px #ffffff;
}
/* Inset a little so the artwork sits inside the disc rather than becoming
   its edge — a photo bled to the rim loses the neumorphic lift entirely. */
#home-nm:not(.nm-dark) .nmh-cust-panel .cust-panel-icon img {
  width: 78%; height: 78%; margin: 11%; border-radius: 50%;
}

/* "Customize" takes the greeting's heavy name treatment, the line under it
   the quiet one — the same pair as "Healer / Ready for today's practice?". */
#home-nm:not(.nm-dark) .nmh-cust-panel .cust-panel-title {
  font-size: 27px; font-weight: 800; color: #1a1a2e;
  letter-spacing: -0.6px; line-height: 1.12;
}
#home-nm:not(.nm-dark) .nmh-cust-panel .cust-panel-sub {
  font-size: 13px; font-weight: 400; color: rgba(26,26,46,0.55); margin-top: 6px;
}
#home-nm:not(.nm-dark) .nmh-cust-panel .cust-panel-more { margin-top: 16px; }
/* The chevron's colour is an attribute on the path, so it has to be
   overridden rather than inherited. */
#home-nm:not(.nm-dark) .nmh-cust-panel .cust-panel-more svg path {
  stroke: rgba(26,26,46,0.45);
}

/* ── The vertical scroll section below it ──
   Padding wide enough to hold a row's shadow: the scroller clips at its
   padding edge, and a 5px offset with a 12px blur reaches 17px out. */
#home-nm:not(.nm-dark) .nmh-cust-panel .cust-scroll { padding: 6px 18px 18px; }
#home-nm:not(.nm-dark) .nmh-cust-panel .cust-rows { gap: 14px; }

#home-nm:not(.nm-dark) .nmh-cust-panel .cust-row {
  background: #f0f2f7; border: none; border-bottom: none;
  border-radius: 18px !important; padding: 13px 14px;
  box-shadow: 5px 5px 12px rgba(163,177,198,0.5), -4px -4px 10px #ffffff;
}
#home-nm:not(.nm-dark) .nmh-cust-panel .cust-row:active {
  background: #f0f2f7;
  box-shadow: inset 3px 3px 8px rgba(163,177,198,0.55), inset -2px -2px 6px #ffffff;
}
#home-nm:not(.nm-dark) .nmh-cust-panel .cust-row-icon {
  width: 44px !important; height: 44px !important;
  background: #f0f2f7; border: none; border-radius: 50% !important;
  box-shadow: inset 3px 3px 7px rgba(163,177,198,0.55), inset -2px -2px 6px #ffffff;
}
#home-nm:not(.nm-dark) .nmh-cust-panel .cust-row-icon img,
#home-nm:not(.nm-dark) .nmh-cust-panel .cust-row-icon svg {
  width: 74%; height: 74%; border-radius: 50%;
}
#home-nm:not(.nm-dark) .nmh-cust-panel .cust-row-divider { background: rgba(26,26,46,0.1); }
#home-nm:not(.nm-dark) .nmh-cust-panel .cust-row-title { color: #1a1a2e; font-weight: 700; }
#home-nm:not(.nm-dark) .nmh-cust-panel .cust-row-sub { color: rgba(26,26,46,0.5); }
#home-nm:not(.nm-dark) .nmh-cust-panel .cust-row-arrow {
  width: 34px !important; height: 34px !important; min-height: 34px !important;
  background: #f0f2f7; border: none;
  box-shadow: 4px 4px 9px rgba(163,177,198,0.5), -3px -3px 8px #ffffff;
}
#home-nm:not(.nm-dark) .nmh-cust-panel .cust-row-arrow svg path { stroke: #1a1a2e; }
#home-nm:not(.nm-dark) .nmh-cust-panel .cust-scrollbar { background: rgba(26,26,46,0.09); }
#home-nm:not(.nm-dark) .nmh-cust-panel .cust-scrollthumb { background: rgba(200,169,110,0.85); }

/* The switch rows (mode toggles) sit on the same cards. */
#home-nm:not(.nm-dark) .nmh-cust-panel .cust-mode-sw {
  background: #f0f2f7; border: none;
  box-shadow: inset 3px 3px 7px rgba(163,177,198,0.6), inset -2px -2px 6px #ffffff;
}
#home-nm:not(.nm-dark) .nmh-cust-panel .cust-mode-sw.on {
  background: rgba(200,169,110,0.9);
  box-shadow: inset 2px 2px 5px rgba(140,110,60,0.45), inset -2px -2px 5px rgba(255,255,255,0.5);
}

/* ── Corners — one choice, every top-level section, both homes ──────
   Scoped to the wraps' direct children (plus the handful of section
   wrappers whose visible box is one level in), so this changes section
   corners without reaching into icons, pills and badges nested deeper. */
body.homecorner-edge #home-nm .nmh-wrap > *,
body.homecorner-edge :is(#home, .stw-prev-stage) .home-body > *,
body.homecorner-edge :is(#home, .stw-prev-stage) .home-body > #fashPromoVid > *,
body.homecorner-edge :is(#home, .stw-prev-stage) .home-body > #fashCubeSec > *,
body.homecorner-edge :is(#home, .stw-prev-stage) .home-body > .section-glass-wrap > *,
body.homecorner-edge :is(#home, .stw-prev-stage) .home-body > .hvb-glass-wrap > *,
body.homecorner-edge :is(#home, .stw-prev-stage) .home-body > .fash-banner-wrap > *,
body.homecorner-edge :is(#home, .stw-prev-stage) .home-body > #rxCardWrap > * {
  border-radius: 0 !important;
}
body.homecorner-round #home-nm .nmh-wrap > *,
body.homecorner-round :is(#home, .stw-prev-stage) .home-body > *,
body.homecorner-round :is(#home, .stw-prev-stage) .home-body > #fashPromoVid > *,
body.homecorner-round :is(#home, .stw-prev-stage) .home-body > #fashCubeSec > *,
body.homecorner-round :is(#home, .stw-prev-stage) .home-body > .section-glass-wrap > *,
body.homecorner-round :is(#home, .stw-prev-stage) .home-body > .hvb-glass-wrap > *,
body.homecorner-round :is(#home, .stw-prev-stage) .home-body > .fash-banner-wrap > *,
body.homecorner-round :is(#home, .stw-prev-stage) .home-body > #rxCardWrap > * {
  border-radius: 22px !important;
}
/* The tip rail above the four tiles is a pill by design and the greeting /
   tagline are bare text — neither is a "section" the user means here. */
body.homecorner-round #home-nm .nmh-wrap > .htg-rail,
body.homecorner-round :is(#home, .stw-prev-stage) .home-body > .htg-rail,
body.homecorner-round :is(#home, .stw-prev-stage) .home-body > .home-greeting,
body.homecorner-round :is(#home, .stw-prev-stage) .home-body > .home-tagline,
body.homecorner-round #home-nm .nmh-wrap > .nmh-greet-block {
  border-radius: 0 !important;
}

/* Corner chips in the hub */
.cu-corners {
  flex-shrink: 0; padding: 14px 14px 16px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.cu-corners-label {
  font-family: 'DM Sans', sans-serif; font-size: 9px; font-weight: 700;
  letter-spacing: 1.6px; text-transform: uppercase;
  color: rgba(255,255,255,0.4); margin-bottom: 10px;
}
.cu-corners-row { display: flex; gap: 8px; }
.cu-corner-chip {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  cursor: pointer; padding: 11px 6px; min-height: 0 !important;
  font-family: 'DM Sans', sans-serif; font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.6px; color: rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px !important; transition: all 0.2s;
}
.cu-corner-chip.on { color: #060c18; background: #e8d5a3; border-color: #e8d5a3; }
.cu-corner-swatch {
  width: 14px; height: 14px; flex-shrink: 0;
  border: 1.6px solid currentColor; opacity: 0.85;
}
.cu-corner-swatch-round { border-radius: 5px !important; }
.cu-corner-swatch-edge  { border-radius: 0 !important; }

/* ══════════════════════════════════════════════════════════════════
   NOTIFICATIONS (app/js/part064.js) — the bell in the Fashion home's
   fixed header, and the page behind it.
   ══════════════════════════════════════════════════════════════════ */
/* Push Clear to the far right — .bgp-header-fixed is a plain flex row and
   .bgp-header-title does not grow, so without this it sat against the title. */
#sub-notifications .bgp-header-fixed .qa-reset-hdr { margin-left: auto; }

.nt-badge {
  position: absolute; top: -6px; right: -6px;
  min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  background: #e8434f; border: 1.5px solid #060c18;
  border-radius: 999px !important;
  font-family: 'DM Sans', sans-serif; font-size: 9.5px; font-weight: 800;
  color: #fff; line-height: 1; pointer-events: none;
}

/* The bell on the Normal home. .nmh-settings-btn has no position of its own
   and .nt-badge is absolutely positioned, so it would otherwise anchor to the
   page. The badge's dark ring is drawn for the Fashion header's near-black
   bar; against this light neumorphic one it needs a light ring instead. */
.nmh-notif-btn { position: relative; }
#home-nm .nmh-notif-btn .nt-badge { border-color: #f0f2f7; }
#home-nm.nm-dark .nmh-notif-btn .nt-badge { border-color: #16163c; }

/* ── Notifications on this phone ────────────────────────────────────
   Sits directly under the master switch and reports the browser permission,
   which is a different thing from the app's own preference. Rendered by
   app/js/part068.js into the slot part064.js leaves for it. */
.nt-phone {
  display: flex; align-items: center; gap: 13px;
  padding: 14px 16px; margin: 0 0 6px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 18px !important;
}
.nt-phone.on { border-color: rgba(120,220,170,0.3); background: rgba(120,220,170,0.06); }
.nt-phone.nt-phone-blocked { border-color: rgba(232,67,79,0.32); background: rgba(232,67,79,0.06); }
.nt-phone-icon {
  width: 40px; height: 40px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.14);
  border-radius: 13px !important; color: rgba(255,255,255,0.55);
}
.nt-phone.on .nt-phone-icon { color: #8fe0b8; border-color: rgba(120,220,170,0.35); }
.nt-phone.nt-phone-blocked .nt-phone-icon { color: #f08b92; border-color: rgba(232,67,79,0.35); }
.nt-phone-icon svg { width: 20px; height: 20px; }
.nt-phone-txt { flex: 1; min-width: 0; }
.nt-phone-title {
  font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 700; color: #fff;
}
.nt-phone-sub {
  font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 300;
  color: rgba(255,255,255,0.48); margin-top: 3px; line-height: 1.5;
}
/* app.css floors every [onclick] at 44px tall, which would make this chip the
   height of the whole row. */
.nt-phone-btn {
  flex-shrink: 0; cursor: pointer;
  height: 32px !important; min-height: 32px !important;
  display: inline-flex; align-items: center;
  padding: 0 14px; border-radius: 999px !important;
  font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase; white-space: nowrap;
  color: #060c18; background: #e8d5a3; border: 1px solid rgba(232,213,163,0.6);
}
.nt-phone-btn:active { transform: scale(0.96); }

/* Master switch — the one that mutes everything below it. */
.nt-master {
  display: flex; align-items: center; gap: 13px;
  padding: 16px; margin: 4px 0 6px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 18px !important;
}
.nt-master.on { border-color: rgba(232,213,163,0.32); background: rgba(232,213,163,0.07); }
.nt-master-icon {
  width: 40px; height: 40px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.14);
  border-radius: 13px !important; color: rgba(255,255,255,0.55);
}
.nt-master.on .nt-master-icon { color: #e8d5a3; border-color: rgba(232,213,163,0.35); }
.nt-master-icon svg { width: 21px; height: 21px; }
.nt-master-txt { flex: 1; min-width: 0; }
.nt-master-title {
  font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 700; color: #fff;
}
.nt-master-sub {
  font-family: 'DM Sans', sans-serif; font-size: 11.5px; font-weight: 300;
  color: rgba(255,255,255,0.48); margin-top: 2px;
}

/* The page body renders straight into .bgp-body, which carries no side
   padding of its own — without this the section labels and cards ran off
   both edges. */
#ntBody { padding: 0 16px calc(110px + env(safe-area-inset-bottom, 0px)); }

.nt-sec-head {
  display: flex; align-items: center; justify-content: space-between;
  margin: 22px 0 10px;
  font-family: 'DM Sans', sans-serif; font-size: 9px; font-weight: 700;
  letter-spacing: 2.4px; text-transform: uppercase; color: rgba(255,255,255,0.38);
}
/* app.css floors every [onclick] at min-height:44px, which blew this chip up
   to the height of a button and pushed the section label out of line. */
.nt-clear {
  cursor: pointer; letter-spacing: 1.4px; color: #e8d5a3;
  height: 26px !important; min-height: 26px !important;
  display: inline-flex; align-items: center;
  padding: 0 12px; border-radius: 999px !important;
  background: rgba(232,213,163,0.1); border: 1px solid rgba(232,213,163,0.3);
}
.nt-clear:active { background: rgba(232,213,163,0.24); }

/* Updates list */
.nt-list {
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 18px !important;
}
.nt-item {
  display: flex; align-items: flex-start; gap: 12px; cursor: pointer;
  padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.nt-item:last-child { border-bottom: none; }
.nt-item:active { background: rgba(255,255,255,0.05); }
/* Each row wears its section's icon, so where a notification came from is
   readable before the words are. */
.nt-item-icon, .nt-row-icon {
  width: 38px !important; height: 38px !important; flex-shrink: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: #000; border: 1px solid rgba(255,255,255,0.16);
  border-radius: 11px !important; color: rgba(232,213,163,0.9);
}
.nt-item-icon svg, .nt-row-icon svg { width: 19px; height: 19px; }
.nt-item-icon img, .nt-row-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nt-item-dot {
  display: inline-block; width: 7px; height: 7px; margin-right: 7px;
  vertical-align: middle; flex-shrink: 0;
  border-radius: 50% !important; background: #e8d5a3;
  box-shadow: 0 0 8px rgba(232,213,163,0.6);
}
.nt-item-txt { flex: 1; min-width: 0; }
.nt-item-title {
  font-family: 'DM Sans', sans-serif; font-size: 13.5px; font-weight: 600;
  color: rgba(255,255,255,0.72);
}
.nt-item.unread .nt-item-title { color: #fff; font-weight: 700; }
.nt-item-body {
  font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 300;
  color: rgba(255,255,255,0.5); margin-top: 3px; line-height: 1.5;
}
.nt-item-meta {
  font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 500;
  letter-spacing: 0.4px; color: rgba(255,255,255,0.32); margin-top: 5px;
}

.nt-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 34px 24px;
  background: rgba(255,255,255,0.03);
  border: 1px dashed rgba(255,255,255,0.12);
  border-radius: 18px !important;
}
.nt-empty-icon { width: 40px; height: 40px; margin-bottom: 12px; }
.nt-empty-icon svg { width: 100%; height: 100%; display: block; }
.nt-empty-title {
  font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 700;
  color: rgba(255,255,255,0.62);
}
.nt-empty-sub {
  font-family: 'DM Sans', sans-serif; font-size: 11.5px; font-weight: 300;
  color: rgba(255,255,255,0.38); margin-top: 6px; line-height: 1.6; max-width: 250px;
}

/* Per-kind switches */
.nt-group-label {
  font-family: 'DM Sans', sans-serif; font-size: 9px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: rgba(232,213,163,0.6); margin: 16px 0 8px 4px;
}
.nt-group {
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 18px !important;
}
.nt-row {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.nt-row:last-child { border-bottom: none; }
.nt-row-muted { opacity: 0.42; }
.nt-row-txt { flex: 1; min-width: 0; }
.nt-row-title {
  font-family: 'DM Sans', sans-serif; font-size: 13.5px; font-weight: 600; color: #fff;
}
.nt-row-sub {
  font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 300;
  color: rgba(255,255,255,0.42); margin-top: 2px; line-height: 1.4;
}

.nt-sw {
  width: 46px !important; height: 26px !important; min-height: 26px !important;
  flex-shrink: 0; position: relative; cursor: pointer;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px !important; transition: background 0.22s, border-color 0.22s;
}
.nt-sw.on { background: rgba(232,213,163,0.9); border-color: rgba(232,213,163,0.95); }
.nt-sw-knob {
  position: absolute; top: 2px; left: 2px; width: 20px; height: 20px;
  border-radius: 50% !important; background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3); transition: left 0.22s;
}
.nt-sw.on .nt-sw-knob { left: 22px; }

/* ── Customize hub: card Enter pills, staged Corners, Applied toast ──── */

/* Every card carries the same white Enter pill the home cards use, pinned to
   the bottom so the pills line up across a row whatever the copy length. */
/* align-content:start is load-bearing. .cu-grid is a scrollable flex child,
   so its rows were being stretched to a single shared height computed before
   the pill existed — the pills then spilled out of the bottom of every card
   and landed in the gap over the row below. */
.cu-grid { align-content: start; }
.cu-card { position: relative; }
.cu-card-enter { align-self: flex-start; margin-top: auto; padding-top: 2px; }
.cu-card .cu-card-sub { margin-bottom: 10px; }

/* Icon boxes render an <img> or an <svg> — same box, same optical weight, so
   a mixed grid doesn't read as two different kinds of card. */
.cu-card-icon svg { width: 21px; height: 21px; display: block; }
.cu-card-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cu-apply {
  margin-top: 10px; text-align: center; cursor: pointer;
  padding: 12px 6px; min-height: 0 !important;
  font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  border-radius: 12px !important; transition: all 0.2s;
  /* Nothing staged yet — reads as "already applied", not as a live button. */
  color: rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
}
.cu-apply.on {
  color: #060c18; background: #fff; border-color: #fff;
}
.cu-apply.on:active { background: #e8d5a3; border-color: #e8d5a3; }

.cu-toast {
  position: absolute; left: 50%; bottom: 84px; z-index: 6;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px 10px 10px;
  background: #fff; border-radius: 999px !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.45);
  font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 800;
  letter-spacing: 1.4px; text-transform: uppercase; color: #060c18;
  white-space: nowrap; pointer-events: none;
  transform: translate(-50%, 10px); opacity: 0;
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.4,0,0.2,1);
}
.cu-toast.show { opacity: 1; transform: translate(-50%, 0); }
.cu-toast-tick {
  width: 20px; height: 20px; flex-shrink: 0; border-radius: 50% !important;
  background: #e8d5a3; display: flex; align-items: center; justify-content: center;
}
.cu-toast-tick svg { width: 11px; height: 11px; display: block; }

/* ══════════════════════════════════════════════════════════════════
   Appearance panels opened from the NORMAL home.

   #sub-social's panels are dark surfaces, but the Normal home's light
   neumorphic skin (body.nm-mode) repaints text dark — so Black Edition and
   Start Page Image came up as navy text on navy, a cream label on a cream
   button, and a strip of light body showing under a short panel. Exactly
   what #ss-panel-fashionbg already needed; same fix, extended to the other
   two so all three read as the Fashion home wherever they were opened from.
   ══════════════════════════════════════════════════════════════════ */
#sub-social #ss-panel-blackedition,
#sub-social #ss-panel-startbg {
  background-color: #060c18 !important;
  min-height: 100% !important;
}
body.nm-mode #sub-social #ss-panel-blackedition [style*="#fff"],
body.nm-mode #sub-social #ss-panel-blackedition [style*="255,255,255"],
body.nm-mode #sub-social #ss-panel-blackedition [style*="255, 255, 255"],
body.nm-mode #sub-social #ss-panel-startbg [style*="#fff"],
body.nm-mode #sub-social #ss-panel-startbg [style*="255,255,255"],
body.nm-mode #sub-social #ss-panel-startbg [style*="255, 255, 255"] { color: #fff !important; }
body.nm-mode #sub-social #ss-panel-blackedition [style*="e8d5a3"],
body.nm-mode #sub-social #ss-panel-startbg [style*="e8d5a3"] { color: #e8d5a3 !important; }
body.nm-mode #sub-social #ss-panel-blackedition button[style*="background:#e8d5a3"],
body.nm-mode #sub-social #ss-panel-startbg button[style*="background:#e8d5a3"],
body.nm-mode #sub-social #ss-panel-blackedition .bgp-cta-btn,
body.nm-mode #sub-social #ss-panel-startbg .bgp-cta-btn { color: #060c18 !important; }
/* Headings and body copy inside these panels are class-styled, not inline,
   so the inline-attribute rules above can't reach them. */
body.nm-mode #sub-social #ss-panel-blackedition .ss-panel-title,
body.nm-mode #sub-social #ss-panel-blackedition .be-title,
body.nm-mode #sub-social #ss-panel-blackedition .be-hero-title,
body.nm-mode #sub-social #ss-panel-startbg .ss-panel-title { color: #fff !important; }
body.nm-mode #sub-social #ss-panel-blackedition .ss-panel-sub,
body.nm-mode #sub-social #ss-panel-blackedition .be-sub,
body.nm-mode #sub-social #ss-panel-blackedition .be-hero-sub,
body.nm-mode #sub-social #ss-panel-startbg .ss-panel-sub { color: rgba(255,255,255,0.6) !important; }

/* Guaranteed room for the card's Enter pill. The grid was handing every row
   a height computed without it, so the pills spilled into the gap below. */
.cu-grid { grid-auto-rows: minmax(148px, auto); }

/* ── Quick Links: the bubble's arrow, its switch in the list pane, and the
   how-to that goes with it ──────────────────────────────────────────── */

/* A small arrow riding the bubble, so it reads as "this opens something"
   rather than as a decoration. Part of the button, not a separate target —
   the whole bubble opens the list. */
.ql-fab-arrow {
  position: absolute; right: -3px; bottom: -3px;
  width: 20px; height: 20px; border-radius: 50% !important;
  background: #fff; border: 1.5px solid rgba(6,12,24,0.25);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 10px rgba(0,0,0,0.4); pointer-events: none;
}
.ql-fab-arrow svg { width: 11px; height: 11px; display: block; }
/* While the bubble is held long enough to arm the bin, the arrow would be
   a lie — it is about to be dropped, not opened. */
.ql-fab.held .ql-fab-arrow { opacity: 0; transform: scale(0.6); }
.ql-fab-arrow { transition: opacity 0.18s ease, transform 0.18s ease; }
/* The held state also needs to look different from a plain drag. */
.ql-fab.held { transform: scale(1.12); }

/* The switch repeated at the top of the list pane. */
.ql-float-row-list { margin-bottom: 4px; }

.ql-float-help {
  margin: 0 0 14px; padding: 11px 13px;
  background: rgba(232,213,163,0.07);
  border: 1px solid rgba(232,213,163,0.2);
  border-radius: 12px !important;
  font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 300;
  line-height: 1.6; color: rgba(255,255,255,0.6);
}
.ql-float-help b { font-weight: 700; color: #e8d5a3; }

/* ══════════════════════════════════════════════════════════════════
   NOTIFICATIONS TAB — what the bell opens. Same glass shell as the Quick
   Links sheet: the updates live here, and the gear leads through to the
   full settings page.
   ══════════════════════════════════════════════════════════════════ */
.nt-overlay {
  position: fixed; inset: 0; z-index: 4000;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(4,8,18,0.72);
  opacity: 0; pointer-events: none; transition: opacity 0.28s ease;
  content-visibility: hidden;
}
.nt-overlay.open {
  opacity: 1; pointer-events: auto; content-visibility: visible;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.nt-sheet {
  width: 100%; max-width: 420px; max-height: 80vh;
  display: flex; flex-direction: column; overflow: hidden;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14); border-radius: 24px !important;
  -webkit-backdrop-filter: blur(26px) saturate(1.35); backdrop-filter: blur(26px) saturate(1.35);
  box-shadow: 0 26px 60px rgba(0,0,0,0.55);
  transform: translateY(14px) scale(0.98); transition: transform 0.32s cubic-bezier(0.4,0,0.2,1);
}
.nt-overlay.open .nt-sheet { transform: translateY(0) scale(1); }

.nt-sheet-head {
  flex-shrink: 0; display: flex; align-items: center; gap: 10px;
  padding: 18px 16px 14px; border-bottom: 1px solid rgba(255,255,255,0.1);
}
.nt-sheet-txt { flex: 1; min-width: 0; }
.nt-sheet-title {
  font-family: 'DM Sans', sans-serif; font-size: 17px; font-weight: 800;
  color: #fff; letter-spacing: -0.2px;
}
.nt-sheet-sub {
  font-family: 'DM Sans', sans-serif; font-size: 11.5px; font-weight: 300;
  color: rgba(255,255,255,0.6); margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nt-hbtn {
  width: 38px !important; height: 38px !important; min-height: 38px !important;
  flex-shrink: 0; padding: 0; cursor: pointer; border: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50% !important; background: #fff;
}
.nt-hbtn svg { width: 16px; height: 16px; display: block; }
.nt-hbtn-gear { background: #e8d5a3; }
.nt-hbtn:active { filter: brightness(0.92); }

.nt-sheet-scroll {
  flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 12px 12px 6px; scrollbar-width: none;
}
.nt-sheet-scroll::-webkit-scrollbar { display: none; }
/* Rows in the tab are self-contained cards rather than a divided list. */
.nt-sheet-scroll .nt-item {
  margin-bottom: 8px; border-bottom: none;
  background: rgba(0,0,0,0.32);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 16px !important;
}
.nt-sheet-scroll .nt-item:active { background: rgba(0,0,0,0.5); }
.nt-sheet-scroll .nt-empty { margin: 8px 4px 12px; }

.nt-sheet-foot {
  flex-shrink: 0; display: flex; gap: 10px; padding: 12px 16px 16px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.nt-sheet-clear, .nt-sheet-manage {
  flex: 1; text-align: center; cursor: pointer; padding: 13px 6px;
  font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase; border-radius: 12px !important;
}
.nt-sheet-clear {
  color: rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.13);
}
.nt-sheet-manage { color: #060c18; background: #fff; border: 1px solid #fff; }

/* ── Customize panel: three BLACK banners inside the glass wrapper ─────
   The wrapper is the glass; the rows are not. They were transparent, so
   the fashion backdrop showed straight through them and they read as part
   of the glass instead of as the three black banners they replaced. */
.cust-panel .cust-row {
  background: #000;
  border: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px !important;
  margin: 0 12px 10px;
}
.cust-panel .cust-row:first-of-type { margin-top: 12px; }
.cust-panel .cust-row:last-child { margin-bottom: 14px; }
.cust-panel .cust-row:active { background: #0b0b16; }
/* The row icons are already black tiles; on a black banner they need their
   own edge to stay visible. */
.cust-panel .cust-row-icon { border-color: rgba(255,255,255,0.22); }

/* ── Below the footer ─────────────────────────────────────────────────
   Both home wraps carry 90px of padding after the footer to clear the nav
   bar, and the footer itself is transparent on the Fashion home — so the
   backdrop photo showed through the footer and through the strip under it.
   The shadow paints black past the footer and is clipped by the scroller,
   without adding any scrollable height. */
#home-nm .home-footer,
:is(#home, .stw-prev-stage) .home-footer {
  background: #000 !important;
  box-shadow: 0 140px 0 0 #000;
}

/* The rows used to be direct children of .ql-scroll and got its 10px flex
   gap. Wrapping them in #qlList (to sit the bubble switch above the list)
   moved that gap up a level, so the rows themselves ended up flush against
   each other. Give the wrappers the same column gap. */
#qlList, #qlSetList {
  display: flex; flex-direction: column; gap: 12px;
}

/* ══════════════════════════════════════════════════════════════════
   GLASS WRAPPERS — the four home buttons with their settings rail, and
   NowssB Connect with its community carousel, each gathered into one
   glass card instead of sitting as loose siblings.

   Same glass as the Customize panel. The children inside were written to
   be top-level sections with their own outer margins, so those margins are
   zeroed here and the wrapper's padding does the spacing — otherwise the
   contents sit off-centre inside their own card.
   ══════════════════════════════════════════════════════════════════ */
:is(#home, .stw-prev-stage) .glass-wrap {
  box-sizing: border-box; overflow: hidden;
  padding: 12px;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 22px !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.25); backdrop-filter: blur(18px) saturate(1.25);
  box-shadow: 0 16px 40px rgba(0,0,0,0.34);
}
/* Square and inset to the same 16px the rest of the Fashion home uses.
   These wrappers are a Fashion-home idea only — the Normal home keeps its
   sections loose in the column, the way it has always been. */
:is(#home, .stw-prev-stage) .glass-wrap {
  width: calc(100% - 32px); margin: 18px 16px;
  border-radius: 0 !important;
}

/* ── Contents: drop the outer margins, they are the wrapper's job now ── */
:is(#home, .stw-prev-stage) .glass-wrap > .htg-rail { margin: 0 0 12px !important; }
:is(#home, .stw-prev-stage) .glass-wrap > .nmh-grid,
:is(#home, .stw-prev-stage) .glass-wrap > .home-grid {
  width: 100% !important; margin: 0 !important; padding: 0 !important;
}
:is(#home, .stw-prev-stage) .glass-wrap > .nmh-connect-sec,
:is(#home, .stw-prev-stage) .glass-wrap > .ncb-carousel {
  width: 100% !important; margin: 0 !important;
}
:is(#home, .stw-prev-stage) .glass-wrap > .nmh-connect-sec { margin-bottom: 12px !important; }

/* The tip rail measures itself against the viewport; inside the wrapper it
   has 14px of padding either side to live within. */
:is(#home, .stw-prev-stage) .glass-wrap > .htg-rail { padding-left: 0; padding-right: 0; }


/* ── Tiles inside the wrapper ──────────────────────────────────────────
   The wrapper takes ~24px off the row, which all came out of the text
   column — it was down to about 70px, so "Sound Library" wrapped and
   "Progress" split across two lines. Trimming the icon, the side padding
   and the column gaps hands that width back to the words.

   grid-auto-rows:1fr with a fixed height is what makes all four the same
   size: without it each row sizes to its own tallest tile, so a two-line
   title made one row taller than the other. ── */
:is(#home, .stw-prev-stage) .glass-wrap .nmh-grid, :is(#home, .stw-prev-stage) .glass-wrap .home-grid {
  grid-auto-rows: 1fr !important; gap: 10px !important;
}
:is(#home, .stw-prev-stage) .glass-wrap .home-tile, :is(#home, .stw-prev-stage) .glass-wrap .nmh-tile {
  min-height: 0 !important; height: 118px !important;
  padding: 12px 10px 38px !important;
  gap: 8px !important;
}
:is(#home, .stw-prev-stage) .glass-wrap .home-tile-icon, :is(#home, .stw-prev-stage) .glass-wrap .nmh-tile-icon {
  width: 34px !important; height: 34px !important;
}
:is(#home, .stw-prev-stage) .glass-wrap .home-tile-icon img, :is(#home, .stw-prev-stage) .glass-wrap .nmh-tile-icon img {
  width: 100% !important; height: 100% !important;
}
:is(#home, .stw-prev-stage) .glass-wrap .home-tile-title, :is(#home, .stw-prev-stage) .glass-wrap .nmh-tile-title {
  font-size: 12px !important; line-height: 1.2 !important;
}
:is(#home, .stw-prev-stage) .glass-wrap .home-tile-sub, :is(#home, .stw-prev-stage) .glass-wrap .nmh-tile-sub {
  font-size: 9.5px !important; line-height: 1.35 !important; margin-top: 2px !important;
}
:is(#home, .stw-prev-stage) .glass-wrap .home-tile-txt, :is(#home, .stw-prev-stage) .glass-wrap .nmh-tile-txt { min-width: 0; }
/* The Enter pill sits absolutely at the bottom — keep it clear of the
   shorter tile's text. */
:is(#home, .stw-prev-stage) .glass-wrap .home-tile-enter, :is(#home, .stw-prev-stage) .glass-wrap .nmh-tile-enter {
  bottom: 8px !important; right: 8px !important;
}

/* Today's Trending and its word banner, gathered the same way. Both were
   full-width sections with their own outer margins; the wrapper's padding
   does that job now. */
:is(#home, .stw-prev-stage) .glass-wrap > .nmh-trend-banner,
:is(#home, .stw-prev-stage) .glass-wrap > .nmh-trend-shop-banner {
  width: 100% !important; margin: 0 !important;
}
:is(#home, .stw-prev-stage) .glass-wrap > .nmh-trend-banner { margin-bottom: 12px !important; }

/* ══════════════════════════════════════════════════════════════════
   FASHION HEADER — bare icons, hairline between each
   The three controls were each boxed in their own bordered, blurred
   square. They are now just the artwork, with a rule between them.
   ══════════════════════════════════════════════════════════════════ */
.hdr-icons { display: flex; align-items: center; gap: 10px; }
.hdr-ico {
  position: relative; flex-shrink: 0; cursor: pointer;
  width: 38px !important; height: 38px !important; min-height: 38px !important;
  padding: 0; background: none !important; border: none !important;
  border-radius: 0 !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  display: flex; align-items: center; justify-content: center;
}
.hdr-ico img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* The drawn set. It takes the colour of the header rather than carrying
   one baked into a picture, so the same three marks read on the Fashion
   home's dark glass and on the Normal home's light one. */
.hdr-svg { width: 68%; height: 68%; display: block; color: #fff; }
#home-nm .hdr-svg { color: #1a1a2e; }
#home-nm.nm-dark .hdr-svg { color: #fff; }
.hdr-ico:active { opacity: 0.65; }
.hdr-rule {
  width: 1px; height: 22px; flex-shrink: 0;
  background: rgba(255,255,255,0.22);
}

/* ══════════════════════════════════════════════════════════════════
   NORMAL HOME GREETING — neumorphic disc, then greeting / name / line
   ══════════════════════════════════════════════════════════════════ */
.nmh-greet-block {
  display: flex; align-items: flex-start; gap: 14px;
}
.nmh-greet-orb {
  width: 54px; height: 54px; flex-shrink: 0; margin-top: 2px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50% !important; background: #f0f2f7; color: #c8a96e;
  box-shadow: 6px 6px 14px rgba(163,177,198,0.6), -5px -5px 12px #ffffff;
}
.nmh-greet-orb svg { width: 25px; height: 25px; display: block; }
.nmh-greet-txt { flex: 1; min-width: 0; }
/* Greeting is the light line, the name the heavy one under it. */
.nmh-greet-hello {
  font-size: 20px !important; font-weight: 400 !important;
  color: rgba(26,26,46,0.62) !important; letter-spacing: -0.2px !important;
}
.nmh-greet-name {
  font-family: 'DM Sans', sans-serif; font-size: 27px; font-weight: 800;
  color: #1a1a2e; letter-spacing: -0.6px; line-height: 1.12; margin-top: 1px;
}
#home-nm.nm-dark .nmh-greet-orb {
  background: #16163c; color: #e8d5a3;
  box-shadow: 7px 7px 18px rgba(0,0,0,0.8), -4px -4px 12px rgba(50,50,110,0.3);
}
#home-nm.nm-dark .nmh-greet-hello { color: rgba(255,255,255,0.62) !important; }
#home-nm.nm-dark .nmh-greet-name { color: #fff; }

/* ══════════════════════════════════════════════════════════════════
   CONNECT WRAPPER — the section rounds only at the top, the banner
   under it only at the bottom, so the pair reads as one block.
   ══════════════════════════════════════════════════════════════════ */
:is(#home, .stw-prev-stage) .fash-connect-wrap > .nmh-connect-sec {
  border-radius: 18px 18px 0 0 !important;
  margin-bottom: 0 !important;
}
:is(#home, .stw-prev-stage) .fash-connect-wrap > .ncb-carousel {
  border-radius: 0 0 18px 18px !important;
}
/* The rail's pills keep their natural width — measured at 146 + 164 + 8 in a
   332px rail, they fit — and the rail simply clips anything that somehow
   does not, rather than squeezing the text into an ellipsis. */
:is(#home, .stw-prev-stage) .glass-wrap > .htg-rail { max-width: 100%; overflow: hidden; }

/* ══════════════════════════════════════════════════════════════════
   HERO VIDEO BANNER — full-bleed 16:9, sits above the streak section on
   both homes. The <video> is a replaced element, so inset alone will not
   stretch it; it needs explicit width/height.
   ══════════════════════════════════════════════════════════════════ */
.hero-vid-banner {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  overflow: hidden; box-sizing: border-box;
  background: #060c18; border-radius: 22px !important;
}
.hero-vid-banner video {
  position: absolute; inset: 0;
  width: 100% !important; height: 100% !important;
  object-fit: cover; display: block;
}
/* ── …but not when the banner is a device ──
   `inset: 0` on an absolutely positioned child resolves against the
   PADDING box, and on a framed banner the padding IS the bezel. So the
   clip was filling the whole tablet, not its screen: the render is
   transparent outside its rounded outer corners, and four square corners
   of video showed through them.

   In flow instead, so it fills the CONTENT box — which is the screen, to
   the pixel, because that is what the padding is measured to be. The small
   radius matches the glass's own corners. */
.hero-vid-banner.nwsb-inframe > video {
  position: relative; inset: auto;
  border-radius: 7px !important;
}
#home-nm .nmh-hero-vid { margin: 4px 0 16px; }
/* Square and inset to the same 16px the rest of the Fashion home uses. */
:is(#home, .stw-prev-stage) .fash-hero-vid {
  width: calc(100% - 32px); margin: 8px 16px 18px;
  border-radius: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════
   READER — the home section, the chooser, and the two readers.
   (app/js/part065.js)
   ══════════════════════════════════════════════════════════════════ */

/* ── Home section: black banner + video in one wrapper, under the player.
   The text sits to the right of a vertical rule; the left of the frame is
   left to the artwork. No vignette — the art carries itself. ── */
.rdsec-wrap { box-sizing: border-box; overflow: hidden; }
:is(#home, .stw-prev-stage) .fash-rdsec-wrap,
:is(#home, .stw-prev-stage) .fash-ebsec-wrap {
  width: calc(100% - 32px); margin: 18px 16px; padding: 12px;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 0 !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.25); backdrop-filter: blur(18px) saturate(1.25);
  box-shadow: 0 16px 40px rgba(0,0,0,0.34);
}
/* The Normal home is neumorphic, so the wrapper is too — glass over cream
   would be unreadable. */
#home-nm .nmh-rdsec-wrap,
#home-nm .nmh-ebsec-wrap {
  width: 100%; margin: 16px 0; padding: 14px;
  background: #f0f2f7; border-radius: 22px !important;
  box-shadow: 7px 7px 16px rgba(0,0,0,0.14), -5px -5px 12px rgba(255,255,255,0.97);
}
#home-nm.nm-dark .nmh-rdsec-wrap,
#home-nm.nm-dark .nmh-ebsec-wrap {
  background: #16163c;
  box-shadow: 8px 8px 22px rgba(0,0,0,0.88), -4px -4px 14px rgba(50,50,110,0.32);
}
/* The banner closes the block now, so its margin is above it. */
.rdsec-wrap > .rdsec-banner {
  width: 100% !important; margin: 10px 0 0 !important; box-sizing: border-box;
}

.reader-sec {
  position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
  box-sizing: border-box; cursor: pointer; background: #060c18;
  border-radius: 16px !important;
}
:is(#home, .stw-prev-stage) .fash-rdsec-wrap .reader-sec,
:is(#home, .stw-prev-stage) .fash-ebsec-wrap .reader-sec { border-radius: 0 !important; }
.reader-sec video {
  position: absolute; inset: 0;
  width: 100% !important; height: 100% !important;
  object-fit: cover; display: block;
}
/* The divider the copy sits behind. */
.reader-sec-rule {
  position: absolute; left: 46%; top: 14%; bottom: 14%; width: 1px; z-index: 2;
  background: rgba(255,255,255,0.4);
}
/* The copy sits under the clip now — nothing is drawn over the video. */
.reader-sec-txt {
  position: static; display: flex; flex-direction: column;
  gap: 1px; padding: 12px 2px 2px; cursor: pointer;
  background: none;
}
/* Same two-line treatment as "Good Morning / Healer". */
.reader-sec-hello {
  font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 400;
  color: rgba(255,255,255,0.66); letter-spacing: -0.1px; line-height: 1.15;
}
.reader-sec-name {
  font-family: 'DM Sans', sans-serif; font-size: 23px; font-weight: 800;
  color: #fff; letter-spacing: -0.5px; line-height: 1.1;
}
.reader-sec-sub {
  font-family: 'DM Sans', sans-serif; font-size: 10.5px; font-weight: 300;
  color: rgba(255,255,255,0.6); line-height: 1.45; margin-top: 4px;
}
.reader-sec-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; }
.reader-sec-cta-lbl {
  font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 800;
  letter-spacing: 1.6px; text-transform: uppercase; color: #fff;
}
.reader-sec-go {
  width: 26px; height: 26px; flex-shrink: 0; border-radius: 50% !important;
  background: #fff; display: flex; align-items: center; justify-content: center;
}
.reader-sec-go svg { width: 12px; height: 12px; display: block; }

/* ── Chooser ─────────────────────────────────────────────────────── */
.rd-hub { background: #060c18; display: flex; flex-direction: column; }
/* The clip is the page background — #sub-reader is already position:fixed
   (the shared .sub-screen base), so these anchor to it directly. */
.rd-hub-bgvid {
  position: absolute; inset: 0; z-index: 0;
  width: 100% !important; height: 100% !important;
  object-fit: cover; display: block; pointer-events: none;
}
.rd-hub-bgvid-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(4,8,16,0.45) 0%, rgba(4,8,16,0.55) 55%, rgba(4,8,16,0.8) 100%);
}
.rd-hub-head, .rd-hub-body { position: relative; z-index: 2; }
.rd-hub-head {
  flex-shrink: 0; display: flex; align-items: center; gap: 12px;
  padding: max(env(safe-area-inset-top,18px),18px) 18px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
/* The hub's back button sat bare against the black header, the same
   colour as the text past it, and effectively disappeared. It gets the
   white circle every other round icon button in the app uses, and the
   title block gets a divider off its own left edge to read as a
   separate group next to it rather than crowding the circle. */
.rd-hub-head .rd-back {
  width: 40px !important; height: 40px !important;
  min-width: 40px !important; max-width: 40px !important;
  min-height: 40px !important; max-height: 40px !important;
  box-sizing: border-box !important;
  padding: 0 !important; gap: 0 !important; border-radius: 50% !important;
  /* The base .rd-back is inline-flex with no justify-content, so inside a
     fixed-width circle the arrow packed against the left edge instead of
     sitting in the middle. Centred on both axes, like .bgp-back. */
  display: flex !important; align-items: center !important; justify-content: center !important;
  background: #fff; color: #060c18; box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}
.rd-hub-head .rd-back svg { width: 17px; height: 15px; display: block; }
.rd-hub-txt { flex: 1; min-width: 0; padding-left: 14px; border-left: 1px solid rgba(255,255,255,0.16); }
.rd-hub-title { font-family: 'DM Sans', sans-serif; font-size: 19px; font-weight: 800; color: #fff; }
.rd-hub-sub { font-family: 'DM Sans', sans-serif; font-size: 11.5px; font-weight: 300; color: rgba(255,255,255,0.5); margin-top: 2px; }
.rd-hub-body {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 16px 16px calc(110px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 14px;
}
/* The clip that heads the chooser, above both cards. Square-cornered
   like the cards it introduces, and on the same 16:9 frame the app's
   other banners use. */
.rd-hub-vid {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  overflow: hidden; box-sizing: border-box; flex-shrink: 0;
  background: #000; border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px !important; box-shadow: 0 12px 30px rgba(0,0,0,0.42);
}
.rd-hub-vid video {
  position: absolute; inset: 0;
  width: 100% !important; height: 100% !important;
  object-fit: cover; display: block;
}
.rd-card {
  position: relative; display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 18px 16px 64px; box-sizing: border-box;
  background: #000; border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px !important; box-shadow: 0 12px 30px rgba(0,0,0,0.42);
}
.rd-card:active { background: #0b0b16; }
/* Sized (and clipped, via overflow:hidden) around the real icon art rather
   than a small line-art glyph — big enough for the image to read clearly. */
.rd-card-ico {
  display: flex; align-items: center; justify-content: center;
  width: 68px; height: 68px; margin-bottom: 12px; overflow: hidden;
  background: rgba(232,213,163,0.1); border: 1px solid rgba(232,213,163,0.28);
  border-radius: 16px !important; color: #e8d5a3;
}
.rd-card-ico svg { width: 23px; height: 23px; }
.rd-card-ico img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rd-card-txt { display: block; }
.rd-card-t { display: block; font-family: 'DM Sans', sans-serif; font-size: 17px; font-weight: 800; color: #fff; }
.rd-card-s { display: block; font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 300; color: rgba(255,255,255,0.5); margin-top: 5px; line-height: 1.55; }
.rd-card-enter { position: absolute; left: 16px; bottom: 16px; }

/* ── Reader shell, shared ─────────────────────────────────────────── */
.rd-screen { background: #0a0a0c; }
.rd-body { position: relative; height: 100%; display: flex; flex-direction: column; overflow: hidden; }
/* Brightness is a dimming veil rather than a real backlight change — it is
   the only thing a web page can actually do here. */
.rd-dim { position: absolute; inset: 0; z-index: 40; background: #000; opacity: 0; pointer-events: none; transition: opacity 0.2s; }

.rd-top {
  position: relative; z-index: 20; flex-shrink: 0;
  display: flex; align-items: center; gap: 10px;
  padding: max(env(safe-area-inset-top,14px),14px) 14px 12px;
  color: #fff;
}
.rd-back, .rd-tbtn {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; cursor: pointer;
  height: 38px !important; min-height: 38px !important; padding: 0 10px;
  background: none; border: none; color: inherit;
  font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 600;
}
.rd-back svg, .rd-tbtn svg { width: 19px; height: 19px; }
.rd-aa { font-family: 'DM Sans', sans-serif; font-size: 16px; font-weight: 700; }
.rd-top-txt { flex: 1; min-width: 0; text-align: center; }
.rd-top-title { font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 700; color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-top-sub { font-family: 'DM Sans', sans-serif; font-size: 11.5px; font-weight: 300; opacity: 0.6; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.rd-stage {
  flex: 1; min-height: 0; overflow-y: auto; position: relative;
  padding: 4px 14px 14px; -webkit-overflow-scrolling: touch;
}
.rd-stage-e { padding-left: 34px; padding-right: 34px; }

/* ── The page ─────────────────────────────────────────────────────── */
.rd-page {
  padding: 30px 24px 26px; box-sizing: border-box; min-height: 100%;
  border-radius: 12px !important;
  background: #f4efe4; color: #241f18;
}
.rd-ch {
  font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase; text-align: center; opacity: 0.5;
}
.rd-title {
  font-size: 1.72em; font-weight: 600; text-align: center;
  line-height: 1.18; margin-top: 10px;
}
.rd-orn { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 14px 0 6px; opacity: 0.4; }
.rd-orn span { width: 54px; height: 1px; background: currentColor; }
.rd-orn i { font-style: normal; font-size: 11px; }
.rd-root {
  font-family: 'DM Sans', sans-serif; font-size: 11px; letter-spacing: 0.4px;
  text-align: center; opacity: 0.6; margin-bottom: 14px;
}
.rd-p { margin: 0 0 1em; line-height: 1.72; text-align: justify; hyphens: auto; }
.rd-drop::first-letter { float: left; font-size: 3.1em; line-height: 0.86; padding: 0.04em 0.1em 0 0; font-weight: 600; }
.rd-pending {
  font-family: 'DM Sans', sans-serif; font-size: 13px; line-height: 1.7;
  opacity: 0.62; text-align: center; padding: 26px 6px; font-style: italic;
}
.rd-folio { font-family: 'DM Sans', sans-serif; font-size: 11px; text-align: center; opacity: 0.45; margin-top: 22px; }
/* Line spacing */
.rd-sp-0 .rd-p { line-height: 1.5; }
.rd-sp-1 .rd-p { line-height: 1.72; }
.rd-sp-2 .rd-p { line-height: 2.02; }

/* Themes */
.rd-theme-light .rd-page { background: #fbfaf7; color: #1d1d1f; }
.rd-theme-sepia .rd-page { background: #f4efe4; color: #241f18; }
.rd-theme-dark  .rd-page { background: #22242a; color: #e6e3dc; }
.rd-theme-black .rd-page { background: #000; color: #d8d5cf; }
.rd-theme-light, .rd-theme-sepia { background: #14151a; }
.rd-theme-dark { background: #101115; }
.rd-theme-black { background: #000; }

/* ── Meaning reader: side rail, popover, footer ───────────────────── */
/* Normal (windowed) reading keeps the rail exactly as it always was: a
   panel docked to the left edge, always out, squared off against the
   screen. Only full screen swaps it for the handle below — there the
   page runs edge to edge and a permanent panel would cover the text. */
.rd-rail {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 25;
  display: flex; flex-direction: column; gap: 2px; padding: 6px 4px;
  background: rgba(12,12,14,0.9); border: 1px solid rgba(255,255,255,0.1); border-left: none;
  border-radius: 0 16px 16px 0 !important;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}

/* The handle, full screen only — a small dark circle with a pencil, free
   to be dragged anywhere clear of the text while the bar is away. */
.rd-rail-fab { display: none; }
.rd-immersive .rd-rail-fab {
  position: fixed; z-index: 28;
  width: 44px !important; height: 44px !important; min-height: 44px !important;
  padding: 0 !important; border-radius: 50% !important;
  display: flex; align-items: center; justify-content: center;
  background: #0c0c0e; color: #fff; border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 8px 22px rgba(0,0,0,0.45);
  cursor: pointer; touch-action: none;
  transition: box-shadow 0.15s ease, left 0.22s cubic-bezier(0.4,0,0.2,1),
              top 0.22s cubic-bezier(0.4,0,0.2,1);
}
.rd-rail-fab svg { width: 18px; height: 18px; }
/* Under the finger it has to track exactly, with no easing lagging behind. */
.rd-rail-fab.dragging { box-shadow: 0 4px 14px rgba(0,0,0,0.6); transition: box-shadow 0.15s ease; }

/* Full screen: the bar opens in its own fixed place — docked to the left
   edge, exactly where it sits when the reader is windowed — however far
   the handle has been dragged from it. Only its visibility is different
   here; the handle is what travels (JS parks it above the bar's top). */
.rd-immersive .rd-rail {
  transform: translateY(-50%) translateX(-10px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease, transform 0.22s cubic-bezier(0.4,0,0.2,1);
}
.rd-immersive .rd-rail.open {
  opacity: 1; pointer-events: auto; transform: translateY(-50%) translateX(0);
}
.rd-rail button {
  width: 42px !important; height: 42px !important; min-height: 42px !important;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: none; border: none; color: rgba(255,255,255,0.82); border-radius: 12px !important;
}
.rd-rail button:active { background: rgba(255,255,255,0.1); }
.rd-rail svg { width: 19px; height: 19px; }

.rd-pop {
  position: absolute; right: 10px; top: 50%; transform: translate(0, -50%) scale(0.96); z-index: 30;
  width: min(268px, 74vw); padding: 14px 14px 6px; box-sizing: border-box;
  background: rgba(16,16,19,0.97); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px !important; box-shadow: 0 20px 46px rgba(0,0,0,0.6);
  opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.24s cubic-bezier(0.4,0,0.2,1);
  max-height: 78%; overflow-y: auto;
}
.rd-pop.open { opacity: 1; pointer-events: auto; transform: translate(0, -50%) scale(1); }

.rd-foot {
  position: relative; z-index: 20; flex-shrink: 0;
  padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(255,255,255,0.08); color: rgba(255,255,255,0.75);
}
.rd-prog-row {
  display: flex; align-items: center; gap: 10px;
  font-family: 'DM Sans', sans-serif; font-size: 10.5px; opacity: 0.65;
}
.rd-prog { flex: 1; height: 3px; background: rgba(255,255,255,0.16); border-radius: 99px !important; overflow: hidden; }
.rd-prog-fill { height: 100%; background: #e8d5a3; border-radius: 99px !important; }
.rd-prog-wide { margin: 0 16px 10px; }
.rd-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.rd-nav button {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: none; border: none; color: rgba(255,255,255,0.85);
  font-family: 'DM Sans', sans-serif; font-size: 12.5px; font-weight: 600;
  min-height: 38px !important; padding: 0 4px;
}
.rd-nav button[disabled] { opacity: 0.28; pointer-events: none; }
.rd-nav svg { width: 15px; height: 15px; }
.rd-nav-mid { opacity: 0.7; }

/* ── eBook reader: chevrons, stat row, bottom tray ────────────────── */
.rd-chev {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 15;
  width: 30px !important; height: 46px !important; min-height: 46px !important;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: none; border: none; color: rgba(255,255,255,0.45);
}
.rd-chev[disabled] { opacity: 0.18; pointer-events: none; }
.rd-chev svg { width: 20px; height: 20px; }
.rd-chev-l { left: 0; }
.rd-chev-r { right: 0; }

.rd-erow {
  flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px 6px; color: rgba(255,255,255,0.5);
  font-family: 'DM Sans', sans-serif; font-size: 10.5px;
}
.rd-tray {
  position: relative; z-index: 20; flex-shrink: 0;
  padding: 12px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(14,14,17,0.97); border-top: 1px solid rgba(255,255,255,0.1);
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height 0.3s cubic-bezier(0.4,0,0.2,1), opacity 0.22s ease, padding 0.3s;
}
.rd-tray.open { max-height: 60vh; overflow-y: auto; opacity: 1; }
.rd-tray:not(.open) { padding-top: 0; padding-bottom: 0; }

/* ── Settings controls, shared by the popover and the tray ────────── */
.rd-set-row {
  display: flex; align-items: center; gap: 12px; padding: 9px 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.rd-set-row:last-child { border-bottom: none; }
.rd-set-lbl {
  flex-shrink: 0; width: 74px;
  font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 600;
  color: rgba(255,255,255,0.55);
}
.rd-font, .rd-size { flex: 1; display: flex; align-items: center; gap: 10px; }
.rd-font { justify-content: space-between; }
.rd-font button {
  width: 28px !important; height: 28px !important; min-height: 28px !important;
  cursor: pointer; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.13);
  border-radius: 8px !important; color: #fff; font-size: 15px; line-height: 1;
}
.rd-font span { flex: 1; text-align: center; font-family: 'DM Sans', sans-serif; font-size: 12.5px; color: #fff; }
.rd-size input[type=range] { flex: 1; accent-color: #e8d5a3; }
.rd-a-sm { font-size: 11px; color: rgba(255,255,255,0.6); }
.rd-a-lg { font-size: 17px; color: rgba(255,255,255,0.85); }
.rd-sun-sm { font-size: 11px; color: rgba(255,255,255,0.5); }
.rd-sun-lg { font-size: 15px; color: rgba(255,255,255,0.8); }
.rd-seg { display: flex; gap: 6px; }
.rd-seg-b {
  width: 46px !important; height: 32px !important; min-height: 32px !important;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 9px !important;
}
.rd-seg-b.on { background: rgba(232,213,163,0.22); border-color: rgba(232,213,163,0.5); }
.rd-sp { display: block; width: 18px; }
.rd-sp0 { height: 10px; border-top: 1.6px solid rgba(255,255,255,0.85); border-bottom: 1.6px solid rgba(255,255,255,0.85); }
.rd-sp1 { height: 14px; border-top: 1.6px solid rgba(255,255,255,0.85); border-bottom: 1.6px solid rgba(255,255,255,0.85); }
.rd-sp2 { height: 18px; border-top: 1.6px solid rgba(255,255,255,0.85); border-bottom: 1.6px solid rgba(255,255,255,0.85); }
.rd-themes { display: flex; gap: 8px; }
.rd-th {
  width: 38px !important; height: 38px !important; min-height: 38px !important;
  cursor: pointer; border-radius: 50% !important;
  font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600;
  border: 1.5px solid transparent;
}
.rd-th.on { border-color: #e8d5a3; }
.rd-th-light { background: #fbfaf7; color: #1d1d1f; }
.rd-th-sepia { background: #cbb894; color: #241f18; }
.rd-th-dark  { background: #4a4d55; color: #e6e3dc; }
.rd-th-black { background: #000; color: #d8d5cf; border-color: rgba(255,255,255,0.25); }
.rd-th-black.on { border-color: #e8d5a3; }

/* ── Library list ─────────────────────────────────────────────────── */
.rd-lib { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 14px calc(110px + env(safe-area-inset-bottom,0px)); display: flex; flex-direction: column; gap: 12px; }
.rd-lib-i {
  display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; cursor: pointer;
  padding: 12px; box-sizing: border-box; color: #fff;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px !important;
}
.rd-lib-i:active { background: rgba(255,255,255,0.11); }
.rd-lib-cov { width: 52px; height: 72px; flex-shrink: 0; overflow: hidden; border-radius: 7px !important; background: #000; }
.rd-lib-cov img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rd-lib-txt { flex: 1; min-width: 0; display: block; }
.rd-lib-t { display: block; font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 700; }
.rd-lib-s { display: block; font-family: 'DM Sans', sans-serif; font-size: 11.5px; font-weight: 300; color: rgba(255,255,255,0.5); margin-top: 3px; line-height: 1.45; }
.rd-lib-m { display: block; font-family: 'DM Sans', sans-serif; font-size: 10px; color: rgba(232,213,163,0.8); margin-top: 5px; letter-spacing: 0.4px; }
.rd-lib-go { width: 17px; height: 17px; flex-shrink: 0; color: rgba(255,255,255,0.35); }

/* ── Contents drawer ──────────────────────────────────────────────── */
.rd-toc {
  position: absolute; inset: 0; z-index: 45;
  background: rgba(8,8,10,0.97); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  display: flex; flex-direction: column;
  opacity: 0; pointer-events: none; transition: opacity 0.24s ease;
}
.rd-toc.open { opacity: 1; pointer-events: auto; }
.rd-toc-head {
  flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
  padding: max(env(safe-area-inset-top,18px),18px) 18px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 700; color: #fff;
}
.rd-toc-head button {
  width: 34px !important; height: 34px !important; min-height: 34px !important;
  cursor: pointer; background: rgba(255,255,255,0.08); border: none;
  border-radius: 50% !important; color: #fff; font-size: 19px; line-height: 1;
}
.rd-toc-list { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 12px calc(110px + env(safe-area-inset-bottom,0px)); }
.rd-toc-i {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer;
  padding: 11px 12px; background: none; border: none; color: rgba(255,255,255,0.8);
  border-radius: 11px !important;
}
.rd-toc-i.on { background: rgba(232,213,163,0.12); color: #fff; }
.rd-toc-n {
  width: 30px; flex-shrink: 0; text-align: center;
  font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 700; color: rgba(232,213,163,0.8);
}
.rd-toc-t { flex: 1; min-width: 0; font-family: 'DM Sans', sans-serif; font-size: 13.5px; font-weight: 600; }
.rd-toc-t em { display: block; font-style: normal; font-size: 10.5px; font-weight: 300; opacity: 0.5; margin-top: 2px; }
.rd-empty {
  padding: 40px 24px; text-align: center; color: rgba(255,255,255,0.45);
  font-family: 'DM Sans', sans-serif; font-size: 13px;
}

/* Trending and the store clip each pair with their own banner in a glass
   wrapper, the way the Normal home pairs them: Today's Trending names the
   section above, Shop Now belongs to the store clip below. Both wrappers
   own the insets, so their contents drop the margins they carry as
   top-level sections — the same deal .fash-routines-wrap makes. */
:is(#home, .stw-prev-stage) .fash-trend-wrap > .nmh-trend-banner,
:is(#home, .stw-prev-stage) .fash-storevid-wrap > .vb-banner {
  width: 100% !important; margin: 0 !important;
}
:is(#home, .stw-prev-stage) .fash-trend-wrap > .nmh-sec-banner,
:is(#home, .stw-prev-stage) .fash-storevid-wrap > .nmh-trend-shop-banner {
  width: 100% !important; margin: 10px 0 0 !important; box-sizing: border-box;
}
/* In rounded mode each pair reads as one block opening at the top and
   closing at the bottom: the clip rounds only its top corners, the banner
   under it only its bottom ones, and the gap between them stays. */
body.homecorner-round :is(#home, .stw-prev-stage) .fash-trend-wrap > .nmh-trend-banner,
body.homecorner-round :is(#home, .stw-prev-stage) .fash-storevid-wrap > .vb-banner {
  border-radius: 18px 18px 0 0 !important;
}
body.homecorner-round :is(#home, .stw-prev-stage) .fash-trend-wrap > .nmh-sec-banner,
body.homecorner-round :is(#home, .stw-prev-stage) .fash-storevid-wrap > .nmh-trend-shop-banner {
  border-radius: 0 0 18px 18px !important;
}

/* .rd-body is a flex column, so .rd-prog-wide — which is a direct child
   rather than sitting inside the flex row the other bar lives in — was
   being stretched to fill the leftover height as one enormous pill. */
.rd-prog-wide { flex: 0 0 3px; height: 3px; }

/* The docked rail floats over the page, so the page needs to start clear
   of it or the rail sits on top of the first few characters of every
   line. Full screen has no docked rail, and its own .rd-immersive rule
   (padding: 0 !important) takes this back off there. */
#sub-reader-meaning .rd-stage { padding-left: 52px; }

/* ══════════════════════════════════════════════════════════════════
   CUSTOMIZE PANEL — all eight entries, scrolling, with an indicator
   ══════════════════════════════════════════════════════════════════ */
.cust-scroll {
  position: relative;
  max-height: 316px; overflow-y: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; padding: 12px 12px 14px;
}
.cust-scroll::-webkit-scrollbar { display: none; }
.cust-rows { display: flex; flex-direction: column; gap: 10px; }
/* The panel's own rows carry their margins now that the scroller has the
   padding, so the old per-row margins would double up. */
.cust-panel .cust-scroll .cust-row { margin: 0 !important; }
/* Track pinned to the scroller, thumb sized and moved by part063.js. */
.cust-scrollbar {
  position: absolute; top: 12px; right: 4px; bottom: 14px; width: 3px;
  background: rgba(255,255,255,0.09); border-radius: 99px !important;
  pointer-events: none;
}
.cust-scrollthumb {
  width: 100%; min-height: 28px; background: rgba(232,213,163,0.75);
  border-radius: 99px !important; transition: transform 0.06s linear;
}
.cust-scroll.no-scroll .cust-scrollbar { opacity: 0; }

/* Mode rows and cards carry a switch instead of an arrow or an Enter pill. */
.cust-mode-sw, .cu-mode-sw {
  width: 42px !important; height: 24px !important; min-height: 24px !important;
  flex-shrink: 0; position: relative;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px !important; transition: background 0.22s, border-color 0.22s;
}
.cu-mode-sw { position: absolute; left: 13px; bottom: 15px; }
.cust-mode-sw.on, .cu-mode-sw.on { background: rgba(232,213,163,0.85); border-color: rgba(232,213,163,0.95); }
.cust-mode-knob, .cu-mode-knob {
  position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 50% !important; background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3); transition: left 0.22s;
}
.cust-mode-sw.on .cust-mode-knob, .cu-mode-sw.on .cu-mode-knob { left: 20px; }

/* ══════════════════════════════════════════════════════════════════
   FASHION PLUS — moving art on the Fashion home (app/js/part066.js)
   The layers sit under the existing content and are invisible until the
   mode is on, so switching off restores the shipped look exactly.
   ══════════════════════════════════════════════════════════════════ */
.fp-media {
  position: absolute; inset: 0; z-index: 0;
  width: 100% !important; height: 100% !important;
  object-fit: cover; display: none; pointer-events: none;
}
body.fashplus :is(#home, .stw-prev-stage) .fp-media { display: block; }
/* The clip above My Routines belongs to this mode like everything else
   here: it is part of what turning Fashion Plus on puts on the home, and
   it goes away with the rest of the motion when the mode is off. It takes
   its frame from .vb-banner, so there is nothing to state but the hiding. */
body:not(.fashplus) :is(#home, .stw-prev-stage) .rt-vid-banner { display: none !important; }
/* Everything already in the tile has to sit above the new layer. */
body.fashplus :is(#home, .stw-prev-stage) .fp-tile > *:not(.fp-media),
body.fashplus :is(#home, .stw-prev-stage) .fp-card > *:not(.fp-media) { position: relative; z-index: 2; }
/* The art needs a scrim or the copy on top of it is unreadable. */
body.fashplus :is(#home, .stw-prev-stage) .fp-tile::after,
body.fashplus :is(#home, .stw-prev-stage) .fp-card::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(6,12,24,0.30) 0%, rgba(6,12,24,0.62) 58%, rgba(6,12,24,0.88) 100%);
}
body.fashplus :is(#home, .stw-prev-stage) .fp-tile, body.fashplus :is(#home, .stw-prev-stage) .fp-card { position: relative; overflow: hidden; }
/* The tiles' own artwork would sit on top of the video. */
body.fashplus :is(#home, .stw-prev-stage) .fp-tile .home-tile-icon { display: none; }
body.fashplus :is(#home, .stw-prev-stage) .fp-tile .home-tile-rule { display: none; }

/* Today's Practice: the mode's own pill, at the middle of the right edge.
   The card's original pill is hidden while this is on. */
:is(#home, .stw-prev-stage) .fp-enter { display: none; }
body.fashplus :is(#home, .stw-prev-stage) .fp-card .fp-enter {
  display: inline-flex;
  position: absolute !important; right: 16px; top: 53%;
  transform: translateY(-50%); z-index: 4;
}
body.fashplus :is(#home, .stw-prev-stage) .fp-card .home-card-bottom .tp-enter { display: none; }
/* The banner below the player, inside the player's wrapper. It carries the
   switch, so it is visible whether the mode is on or off. */
:is(#home, .stw-prev-stage) .fp-banner {
  display: flex;
  width: 100% !important; margin: 12px 0 0 !important;
  border-radius: 0 !important; box-sizing: border-box;
}

/* ══════════════════════════════════════════════════════════════════
   TILE SIZE IS THE SAME IN EVERY LOOK

   Each style set its own padding and puck size, so switching look also
   changed the height of the row — the neuro card stood ~165px against the
   black card's 118px, and its titles wrapped onto two lines. The look is
   the skin; the shape of the page should not move with it. Every grid tile
   is now the compact black card's size, whichever style is on.
   ══════════════════════════════════════════════════════════════════ */
#home-nm .nmh-grid, :is(#home, .stw-prev-stage) .home-grid { grid-auto-rows: 1fr !important; }
#home-nm .nmh-grid > .nmh-tile,
:is(#home, .stw-prev-stage) .home-grid > .home-tile {
  height: 118px !important; min-height: 0 !important;
  padding: 12px 11px 38px !important;
  overflow: hidden;
}
#home-nm .nmh-grid > .nmh-tile .nmh-tile-icon,
:is(#home, .stw-prev-stage) .home-grid > .home-tile .home-tile-icon {
  width: 34px !important; height: 34px !important; margin-bottom: 8px !important;
}
#home-nm .nmh-grid > .nmh-tile .nmh-tile-title,
:is(#home, .stw-prev-stage) .home-grid > .home-tile .home-tile-title {
  font-size: 12.5px !important; line-height: 1.2 !important;
}
#home-nm .nmh-grid > .nmh-tile .nmh-tile-sub,
:is(#home, .stw-prev-stage) .home-grid > .home-tile .home-tile-sub {
  font-size: 9.5px !important; line-height: 1.35 !important; margin-top: 2px !important;
}
#home-nm .nmh-grid > .nmh-tile .nmh-tile-enter,
:is(#home, .stw-prev-stage) .home-grid > .home-tile .home-tile-enter {
  bottom: 8px !important; right: 8px !important;
}
/* The decorative artwork layer some looks add must not add height either. */
#home-nm .nmh-grid > .nmh-tile .nmh-tile-picon { max-height: 100%; }

/* ══════════════════════════════════════════════════════════════════
   READER TOOLS — selection toolbar, page tools, reminders, toast
   ══════════════════════════════════════════════════════════════════ */
.rd-hl { background: rgba(232,177,0,0.34); color: inherit; border-radius: 3px !important; padding: 0 1px; }

.rd-seltools {
  position: absolute; left: 10px; right: 10px; bottom: 12px; z-index: 46;
  display: flex; gap: 4px; padding: 6px;
  background: rgba(14,14,17,0.97); border: 1px solid rgba(255,255,255,0.14);
  border-radius: 16px !important; box-shadow: 0 16px 40px rgba(0,0,0,0.6);
  opacity: 0; pointer-events: none; transform: translateY(8px);
  transition: opacity 0.18s ease, transform 0.2s cubic-bezier(0.4,0,0.2,1);
}
.rd-seltools.open { opacity: 1; pointer-events: auto; transform: translateY(0); }
.rd-seltools button {
  flex: 1; min-width: 0; min-height: 46px !important; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: none; border: none; color: rgba(255,255,255,0.85);
  border-radius: 11px !important; padding: 4px 2px;
}
.rd-seltools button:active { background: rgba(255,255,255,0.1); }
.rd-seltools svg { width: 17px; height: 17px; }
.rd-seltools span {
  font-family: 'DM Sans', sans-serif; font-size: 8.5px; font-weight: 600;
  letter-spacing: 0.2px; white-space: nowrap;
}

.rd-tools {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 47;
  padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0px));
  background: #0e0e11; border-top: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px 20px 0 0 !important;
  max-height: 82%; overflow-y: auto;
  transform: translateY(102%); transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
}
.rd-tools.open { transform: translateY(0); }
.rd-tools-head {
  display: flex; align-items: center; justify-content: space-between;
  font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 700; color: #fff;
  margin-bottom: 12px;
}
.rd-tools-head button {
  width: 32px !important; height: 32px !important; min-height: 32px !important;
  cursor: pointer; background: rgba(255,255,255,0.08); border: none;
  border-radius: 50% !important; color: #fff; font-size: 18px; line-height: 1;
}
.rd-tools-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.rd-tool {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 74px !important; cursor: pointer; padding: 10px 6px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.11);
  border-radius: 14px !important; color: rgba(255,255,255,0.85);
}
.rd-tool.on { background: rgba(232,213,163,0.16); border-color: rgba(232,213,163,0.45); color: #e8d5a3; }
.rd-tool svg { width: 19px; height: 19px; }
.rd-tool span {
  font-family: 'DM Sans', sans-serif; font-size: 9.5px; font-weight: 600;
  text-align: center; line-height: 1.25;
}
.rd-tools-lbl {
  font-family: 'DM Sans', sans-serif; font-size: 9px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: rgba(255,255,255,0.38); margin: 16px 0 8px;
}
.rd-mk-list { display: flex; flex-direction: column; gap: 7px; }
.rd-mk {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px !important;
  font-family: 'DM Sans', sans-serif; font-size: 12px; color: rgba(255,255,255,0.82);
  line-height: 1.5;
}
.rd-mk span { flex: 1; min-width: 0; }
.rd-mk em {
  display: block; font-style: normal; font-size: 10.5px;
  color: rgba(255,255,255,0.42); margin-top: 3px;
}
.rd-mk button {
  width: 24px !important; height: 24px !important; min-height: 24px !important;
  flex-shrink: 0; cursor: pointer; background: rgba(255,255,255,0.08); border: none;
  border-radius: 50% !important; color: rgba(255,255,255,0.7); font-size: 15px; line-height: 1;
}
.rd-mk-hl { border-left: 2px solid rgba(232,177,0,0.7); }
.rd-mk-note { border-left: 2px solid rgba(200,232,245,0.6); }
.rd-mk-empty {
  font-family: 'DM Sans', sans-serif; font-size: 11.5px; font-weight: 300;
  color: rgba(255,255,255,0.38); line-height: 1.6; padding: 2px 2px 4px;
}

.rd-remind {
  position: absolute; inset: 0; z-index: 48;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(4,8,18,0.7);
  opacity: 0; pointer-events: none; transition: opacity 0.24s ease;
}
.rd-remind.open { opacity: 1; pointer-events: auto; }
.rd-remind-card {
  width: 100%; padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  background: #101014; border-top: 1px solid rgba(255,255,255,0.13);
  border-radius: 20px 20px 0 0 !important;
  display: flex; flex-direction: column; gap: 8px;
}
.rd-remind-head {
  font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 700; color: #fff;
  margin-bottom: 4px; line-height: 1.4;
}
.rd-remind-b, .rd-remind-x {
  cursor: pointer; padding: 14px; min-height: 44px !important;
  font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600;
  border-radius: 13px !important; text-align: center;
}
.rd-remind-b {
  color: #fff; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
}
.rd-remind-b:active { background: rgba(232,213,163,0.2); }
.rd-remind-x {
  color: rgba(255,255,255,0.55); background: none; border: none; margin-top: 2px;
}

.rd-toast {
  position: absolute; left: 50%; bottom: 96px; z-index: 60;
  transform: translate(-50%, 8px); opacity: 0; pointer-events: none;
  padding: 10px 18px; background: #fff; color: #060c18;
  border-radius: 999px !important; box-shadow: 0 12px 30px rgba(0,0,0,0.5);
  font-family: 'DM Sans', sans-serif; font-size: 11.5px; font-weight: 800;
  letter-spacing: 0.6px; white-space: nowrap;
  transition: opacity 0.2s ease, transform 0.22s cubic-bezier(0.4,0,0.2,1);
}
.rd-toast.show { opacity: 1; transform: translate(-50%, 0); }

.rd-erow-toc { cursor: pointer; color: rgba(232,213,163,0.85) !important; font-weight: 700; }
/* Text has to be selectable for any of the tools to work. */
.rd-page, .rd-page * { -webkit-user-select: text; user-select: text; }

/* ══════════════════════════════════════════════════════════════════
   VIDEO BANNERS (app/js/part067.js) — 16:9 clips placed above sections.
   Square and inset on the Fashion home, rounded and full-width on the
   Normal home, matching whatever they sit next to.
   ══════════════════════════════════════════════════════════════════ */
.vb-banner {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  overflow: hidden; box-sizing: border-box; background: #060c18;
  border-radius: 22px !important;
}
.vb-banner video {
  position: absolute; inset: 0;
  width: 100% !important; height: 100% !important;
  object-fit: cover; display: block;
}
#home-nm .vb-banner { margin: 16px 0; }
:is(#home, .stw-prev-stage) .vb-banner {
  width: calc(100% - 32px); margin: 18px 16px;
  border-radius: 0 !important;
}
/* Inside a page body rather than a home column. */
#qaMainContent > .vb-banner,
#offersMainContent > .vb-banner,
#ebBody > .vb-banner,
#msMeaningBody > .vb-banner {
  width: calc(100% - 32px); margin: 14px 16px 18px;
}

/* The variant that carries copy: subject on the left, words on the right
   of a rule — the same reading order as the Reader section. */
.vb-rule {
  position: absolute; left: 46%; top: 14%; bottom: 14%; width: 1px; z-index: 2;
  background: rgba(255,255,255,0.4);
}
.vb-txt {
  position: absolute; left: 46%; right: 0; top: 0; bottom: 0; z-index: 3;
  display: flex; flex-direction: column; justify-content: center;
  gap: 1px; padding: 0 14px 0 16px;
  background: linear-gradient(90deg, rgba(6,12,24,0.55) 0%, rgba(6,12,24,0.72) 100%);
}
.vb-hello {
  font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 400;
  color: rgba(255,255,255,0.66); line-height: 1.15;
}
.vb-name {
  font-family: 'DM Sans', sans-serif; font-size: 22px; font-weight: 800;
  color: #fff; letter-spacing: -0.5px; line-height: 1.1;
}
.vb-sub {
  font-family: 'DM Sans', sans-serif; font-size: 10.5px; font-weight: 300;
  color: rgba(255,255,255,0.6); line-height: 1.45; margin-top: 4px;
}
.vb-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; }
.vb-cta-lbl {
  font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 800;
  letter-spacing: 1.6px; text-transform: uppercase; color: #fff;
}
.vb-go {
  width: 26px; height: 26px; flex-shrink: 0; border-radius: 50% !important;
  background: #fff; display: flex; align-items: center; justify-content: center;
}
.vb-go svg { width: 12px; height: 12px; display: block; }

/* ══════════════════════════════════════════════════════════════════
   FASHION PLUS — second pass

   The tiles keep nothing but the clip and a way in: no icon, no rule, no
   title, no subtitle. The player keeps its words but loses its artwork,
   grows taller, and sits under a much lighter scrim so the video actually
   reads. Both use the same bare Enter — the word and a white circle, no
   pill behind it.
   ══════════════════════════════════════════════════════════════════ */

/* ── The bare Enter, shared by the tiles and the player ── */
body.fashplus :is(#home, .stw-prev-stage) .fp-tile .home-tile-enter,
body.fashplus :is(#home, .stw-prev-stage) .fp-card .fp-enter {
  background: none !important; border: none !important;
  box-shadow: none !important; padding: 0 !important;
  border-radius: 0 !important;
  display: inline-flex !important; align-items: center; gap: 8px;
}
body.fashplus :is(#home, .stw-prev-stage) .fp-tile .home-tile-enter-lbl,
body.fashplus :is(#home, .stw-prev-stage) .fp-card .fp-enter .tp-enter-lbl {
  color: #fff !important;
  font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 800;
  letter-spacing: 1.6px; text-transform: uppercase;
}
body.fashplus :is(#home, .stw-prev-stage) .fp-tile .home-tile-enter-go,
body.fashplus :is(#home, .stw-prev-stage) .fp-card .fp-enter .tp-enter-go {
  width: 26px !important; height: 26px !important; flex-shrink: 0;
  background: #fff !important; border-radius: 50% !important;
  display: flex; align-items: center; justify-content: center;
}
body.fashplus :is(#home, .stw-prev-stage) .fp-tile .home-tile-enter-go svg,
body.fashplus :is(#home, .stw-prev-stage) .fp-card .fp-enter .tp-enter-go svg { width: 12px; height: 12px; }

/* ── Tiles: clip and Enter only ── */
body.fashplus :is(#home, .stw-prev-stage) .fp-tile .home-tile-txt,
body.fashplus :is(#home, .stw-prev-stage) .fp-tile .home-tile-title,
body.fashplus :is(#home, .stw-prev-stage) .fp-tile .home-tile-sub { display: none !important; }
/* The clip is the content, so the scrim only needs to carry the Enter. */
body.fashplus :is(#home, .stw-prev-stage) .fp-tile::after {
  background: linear-gradient(90deg, rgba(6,12,24,0) 0%, rgba(6,12,24,0) 45%, rgba(6,12,24,0.55) 100%) !important;
}
body.fashplus :is(#home, .stw-prev-stage) .fp-tile .home-tile-enter {
  position: absolute !important; right: 12px; top: 50%;
  transform: translateY(-50%); bottom: auto !important; z-index: 3;
}

/* ── Player: no artwork, taller, lighter scrim, copy nudged down ── */
body.fashplus :is(#home, .stw-prev-stage) .fp-card .tile-img-bg,
body.fashplus :is(#home, .stw-prev-stage) .fp-card .tile-overlay,
body.fashplus :is(#home, .stw-prev-stage) .fp-card .home-card-top img,
body.fashplus :is(#home, .stw-prev-stage) .fp-card > img { display: none !important; }
body.fashplus :is(#home, .stw-prev-stage) .fp-card {
  min-height: 250px !important; height: auto !important;
}
/* Was a heavy top-to-bottom wash that buried the clip; now only enough on
   the left to hold the copy, and clear on the right where the art is. */
body.fashplus :is(#home, .stw-prev-stage) .fp-card::after {
  background: linear-gradient(100deg, rgba(6,12,24,0.78) 0%, rgba(6,12,24,0.42) 44%, rgba(6,12,24,0.10) 72%, rgba(6,12,24,0.20) 100%) !important;
}
body.fashplus :is(#home, .stw-prev-stage) .fp-card .home-card-top { padding-top: 16px !important; }
body.fashplus :is(#home, .stw-prev-stage) .fp-card .home-card-bottom { padding-bottom: 14px !important; }
body.fashplus :is(#home, .stw-prev-stage) .fp-card .home-card-sub { max-width: 62%; }

/* ══════════════════════════════════════════════════════════════════
   READER / EBOOKS SECTION — rail, clip, copy, banner, in one wrapper
   The copy used to be a panel laid over the right half of the clip, which
   meant the clip was never actually visible. It is a plain block under the
   clip now and the rule is gone.
   ══════════════════════════════════════════════════════════════════ */
:is(#home, .stw-prev-stage) .fash-rdsec-wrap { width: calc(100% - 32px); margin: 18px 16px; }
#home-nm .nmh-rdsec-wrap { width: 100%; margin: 16px 0; }
.reader-sec-rule { display: none !important; }
/* Enter to the far right of the copy. */
.reader-sec-cta {
  align-self: flex-end; margin-right: 2px;
}
/* The per-look tile rules and the uniform-height block both set these with
   !important, so hiding the icon and moving the Enter has to as well. */
body.fashplus :is(#home, .stw-prev-stage) .fp-tile .home-tile-icon,
body.fashplus :is(#home, .stw-prev-stage) .fp-tile .home-tile-rule { display: none !important; }
body.fashplus :is(#home, .stw-prev-stage) .fp-tile .home-tile-enter {
  bottom: auto !important; right: 12px !important;
  top: 50% !important; transform: translateY(-50%) !important;
}

/* ── The Personalised Healing banner is a chooser ──────────────────────
   The clip runs pink on the left and blue on the right, so each label sits
   over its own half. No panel behind any of it — the video is the point. */
.vb-g {
  position: absolute; top: 54%; transform: translateY(-50%); z-index: 3;
  cursor: pointer; background: none !important; border: none !important;
  padding: 0 !important; min-height: 0 !important;
  font-family: 'DM Sans', sans-serif; font-size: 20px; font-weight: 800;
  letter-spacing: -0.3px; color: #fff;
  text-shadow: 0 2px 14px rgba(0,0,0,0.85), 0 0 30px rgba(0,0,0,0.6);
}
.vb-g {
  display: flex; align-items: center; gap: 9px;
}
.vb-g-lbl { display: block; }
/* Each word centred in its own half of the clip — neither pinned to the
   divider nor to an outside edge. */
.vb-g-f { left: 0; right: 50%; justify-content: center; }
.vb-g-m { left: 50%; right: 0; justify-content: center; }
/* Each side carries its own Enter, sized down so both a word and an arrow
   fit inside half a banner. */
.vb-g-cta { margin-top: 0 !important; gap: 6px; }
.vb-g-cta .vb-cta-lbl { font-size: 9.5px; letter-spacing: 1.2px; text-shadow: 0 2px 10px rgba(0,0,0,0.8); }
.vb-g-cta .vb-go { width: 22px; height: 22px; }
.vb-g-cta .vb-go svg { width: 10px; height: 10px; }
.vb-g:active { opacity: 0.7; }
/* Enter sits between them, clear of both labels. */
.vb-cta-mid {
  position: absolute; left: 50%; bottom: 14px; z-index: 3;
  transform: translateX(-50%); margin-top: 0; cursor: pointer;
}
.vb-cta-mid .vb-cta-lbl { text-shadow: 0 2px 10px rgba(0,0,0,0.8); }

/* ══════════════════════════════════════════════════════════════════
   EBOOKS VIDEO BLOCK — the clip with its black banner underneath, in
   one glass wrapper. Sits above the shelf on the Ebooks store page and
   above the copy on every book's own page. Square corners throughout,
   per request. (app/js/part067.js)
   ══════════════════════════════════════════════════════════════════ */
.ebvb-wrap {
  box-sizing: border-box; width: 100%; margin: 0 0 18px; padding: 12px;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 0 !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.25); backdrop-filter: blur(18px) saturate(1.25);
  box-shadow: 0 16px 40px rgba(0,0,0,0.34);
  overflow: hidden;
}
/* The <video> is a replaced element — inset alone will not stretch it. */
.ebvb-vid {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  overflow: hidden; background: #060c18;
  border-radius: 0 !important; cursor: pointer;
}
.ebvb-vid video {
  position: absolute; inset: 0;
  width: 100% !important; height: 100% !important;
  object-fit: cover; display: block;
}
/* app/app.css rounds everything and floors [onclick] at 44px; the banner
   wants its own height and square corners on this page. */
.ebvb-wrap > .nmh-sec-banner {
  width: 100% !important; margin: 10px 0 0 !important;
  border-radius: 0 !important; box-sizing: border-box;
}

/* ══════════════════════════════════════════════════════════════════
   SECTION PILL RAIL (.spill) — the circle-and-pill introduction the
   four home buttons already use, reused above the player, the Reader
   and the eBooks sections. Static rather than animated open: these are
   not a tour, they just name the section under them.
   ══════════════════════════════════════════════════════════════════ */
.spill {
  display: flex; align-items: center; gap: 8px;
  width: 100%; margin: 0 0 10px; box-sizing: border-box;
  cursor: pointer; min-height: 40px;
}
.spill-circle {
  position: relative; flex-shrink: 0;
  width: 40px !important; height: 40px !important; min-height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: #000; border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px !important; box-sizing: border-box; overflow: hidden;
}
.spill-circle svg { width: 19px; height: 19px; display: block; position: relative; z-index: 2; }
.spill-circle img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── The clip inside the circle ──
   The disc was flat black behind its glyph. It carries the film now, on
   the player, the Reader and the eBooks rail — the three sections that
   wear this component. The circle already clips (overflow hidden, a full
   radius), so the clip needs nothing but to fill it.

   Layers, and why: the film at the bottom, a scrim over it so a white
   glyph stays legible on a bright frame, the glyph above that, and the
   travelling gold ring above all of them at the very edge. */
/* Dead as of the clip being taken out from behind the mark — the six
   .spill-vid elements are gone from index.html. Kept because the layering
   above describes the rest of the stack, which is still there. */
.spill-circle .spill-vid {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  border-radius: 999px !important;
  pointer-events: none;
}
/* Unconditional rather than :has(.spill-vid) — every circle in the app
   carries the clip, and over a black disc with no film this scrim is
   invisible anyway. One less selector the older WebKits cannot read. */
.spill-circle::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  border-radius: 999px; pointer-events: none;
  /* Enough to keep a white glyph legible over a bright frame, and no more
     — at 0.62 in the middle the clip was there and you could not see it. */
  background: radial-gradient(circle at 50% 50%,
    rgba(0,0,0,0.40) 0%, rgba(0,0,0,0.24) 60%, rgba(0,0,0,0.06) 100%);
}
/* Until the clip has data the disc is its own thing rather than a black
   hole — the app's gold, banked the way the orbs are. */
.spill-circle {
  background:
    radial-gradient(120% 120% at 30% 18%, rgba(232,213,163,0.22) 0%, rgba(232,213,163,0.06) 44%, rgba(0,0,0,0) 72%),
    #05070d;
}
/* The same travelling gold light the tip rail's settings pill carries. */
.spill-circle::before {
  content: ''; position: absolute; inset: -1px; border-radius: 999px; padding: 1.6px;
  pointer-events: none; z-index: 2;
  background: conic-gradient(from var(--ctang),
    transparent 0deg, transparent 230deg,
    rgba(255,214,150,0.55) 300deg, #fff4e2 340deg, rgba(255,214,150,0.55) 352deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: htgRingSeq 4.5s linear infinite; will-change: --ctang;
}
.spill-pill {
  display: flex; align-items: center; gap: 9px; min-width: 0;
  height: 34px; padding: 0 14px 0 5px; box-sizing: border-box;
  background: #000; border: 1px solid rgba(255,255,255,0.1);
  border-radius: 30px !important; overflow: hidden;
}
.spill-pill-ic {
  width: 24px; height: 24px; flex-shrink: 0; overflow: hidden;
  border-radius: 50% !important; display: flex; align-items: center; justify-content: center;
  background: rgba(232,213,163,0.1); border: 1px solid rgba(232,213,163,0.24);
}
.spill-pill-ic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.spill-pill-ic svg { width: 13px; height: 13px; display: block; }
.spill-pill-rule { width: 1px; height: 17px; flex-shrink: 0; background: rgba(255,255,255,0.22); display: block; }
.spill-pill-txt {
  font-family: 'DM Sans', sans-serif; font-size: 10.5px; font-weight: 700;
  color: rgba(255,255,255,0.9); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; display: block;
}
.spill:active { opacity: 0.82; }

/* ══════════════════════════════════════════════════════════════════
   PLAYER WRAPPER — the rail, the player and the Fashion Plus switch in
   one card. "Begin Your Healing Path" stays outside it, above.
   ══════════════════════════════════════════════════════════════════ */
.plyr-wrap { box-sizing: border-box; overflow: hidden; }
:is(#home, .stw-prev-stage) .fash-plyr-wrap {
  width: calc(100% - 32px); margin: 10px 16px 18px; padding: 12px;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 0 !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.25); backdrop-filter: blur(18px) saturate(1.25);
  box-shadow: 0 16px 40px rgba(0,0,0,0.34);
}
/* Neumorphic on the Normal home, the same way the Reader wrapper is. */
#home-nm .nmh-plyr-wrap {
  width: 100%; margin: 16px 0; padding: 14px;
  background: #f0f2f7; border-radius: 22px !important;
  box-shadow: 7px 7px 16px rgba(0,0,0,0.14), -5px -5px 12px rgba(255,255,255,0.97);
}
#home-nm.nm-dark .nmh-plyr-wrap {
  background: #16163c;
  box-shadow: 8px 8px 22px rgba(0,0,0,0.88), -4px -4px 14px rgba(50,50,110,0.32);
}
/* The cards inside give up their own outer margins — the wrapper owns them. */
.plyr-wrap > #todayPracticeCard,
.plyr-wrap > .nmh-practice { width: 100% !important; margin: 0 !important; }

/* ══════════════════════════════════════════════════════════════════
   FASHION PLUS PLAYER — copy at the bottom, sub on one line, a bigger
   Enter inside a glass pill.
   ══════════════════════════════════════════════════════════════════ */
body.fashplus :is(#home, .stw-prev-stage) .fp-card {
  display: flex !important; flex-direction: column; justify-content: flex-end;
}
body.fashplus :is(#home, .stw-prev-stage) .fp-card .home-card-top {
  margin-top: auto; padding-top: 0 !important;
}
/* One line, however long the ritual copy runs. */
body.fashplus :is(#home, .stw-prev-stage) .fp-card .home-card-sub {
  max-width: none !important; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  font-size: 10px !important; margin-bottom: 0 !important;
}
/* Bare again — the word and the white circle, nothing behind them. */
body.fashplus :is(#home, .stw-prev-stage) .fp-card .fp-enter {
  background: none !important; border: none !important;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-radius: 0 !important; padding: 0 !important;
  box-shadow: none !important; gap: 9px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.8);
}
body.fashplus :is(#home, .stw-prev-stage) .fp-card .fp-enter .tp-enter-lbl { font-size: 13px !important; letter-spacing: 1.4px; }
body.fashplus :is(#home, .stw-prev-stage) .fp-card .fp-enter .tp-enter-go { width: 28px !important; height: 28px !important; }
body.fashplus :is(#home, .stw-prev-stage) .fp-card .fp-enter .tp-enter-go svg { width: 13px; height: 13px; }

/* ── The four buttons: smaller Enter, and far less scrim over the clip ── */
body.fashplus :is(#home, .stw-prev-stage) .fp-tile .home-tile-enter-lbl {
  font-size: 9.5px !important; letter-spacing: 1.2px;
}
body.fashplus :is(#home, .stw-prev-stage) .fp-tile .home-tile-enter-go {
  width: 20px !important; height: 20px !important;
}
body.fashplus :is(#home, .stw-prev-stage) .fp-tile .home-tile-enter-go svg { width: 9px !important; height: 9px !important; }
body.fashplus :is(#home, .stw-prev-stage) .fp-tile::after {
  background: linear-gradient(90deg, rgba(6,12,24,0) 0%, rgba(6,12,24,0) 64%, rgba(6,12,24,0.34) 100%) !important;
}

/* ══════════════════════════════════════════════════════════════════
   READER / EBOOKS COPY — under the clip, and readable on the Normal
   home's cream surface as well as the Fashion home's dark one.
   ══════════════════════════════════════════════════════════════════ */
#home-nm .reader-sec-hello { color: rgba(26,26,46,0.6); }
#home-nm .reader-sec-name  { color: #1a1a2e; }
#home-nm .reader-sec-sub   { color: rgba(26,26,46,0.58); }
#home-nm .reader-sec-cta-lbl { color: #1a1a2e; }
#home-nm .reader-sec-go { background: #1a1a2e; }
#home-nm .reader-sec-go svg path { stroke: #fff; }
#home-nm.nm-dark .reader-sec-hello { color: rgba(255,255,255,0.66); }
#home-nm.nm-dark .reader-sec-name  { color: #fff; }
#home-nm.nm-dark .reader-sec-sub   { color: rgba(255,255,255,0.6); }
#home-nm.nm-dark .reader-sec-cta-lbl { color: #fff; }
#home-nm.nm-dark .reader-sec-go { background: #fff; }
#home-nm.nm-dark .reader-sec-go svg path { stroke: #060c18; }
/* The clip is square-cornered inside the Fashion wrapper and softly
   rounded inside the Normal one — matching each home's own language. */
:is(#home, .stw-prev-stage) .fash-ebsec-wrap .reader-sec { border-radius: 0 !important; }
.rdsec-wrap > .nmh-sec-banner { width: 100% !important; margin: 10px 0 0 !important; box-sizing: border-box; }

/* ══════════════════════════════════════════════════════════════════
   READER — swipe highlight, the notepad bubble, and the look-up sheet
   (app/js/part065.js)
   ══════════════════════════════════════════════════════════════════ */

/* While swipe mode is on the page must not scroll under the finger, and
   the text must be selectable by drag rather than by long-press. */
.rd-swipe .rd-stage { touch-action: pan-x; }
.rd-swipe .rd-page .rd-p {
  -webkit-user-select: text; user-select: text;
  -webkit-touch-callout: none; cursor: text;
}
.rd-swipe .rd-page .rd-p::selection { background: rgba(232,213,163,0.55); }
.rd-swipe .rd-page .rd-p ::selection { background: rgba(232,213,163,0.55); }
/* A quiet reminder the mode is live. */
.rd-swipe .rd-stage::before {
  content: 'Swipe a line to highlight it';
  position: absolute; left: 50%; top: 6px; transform: translateX(-50%); z-index: 24;
  font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 800;
  letter-spacing: 1.2px; text-transform: uppercase; color: #060c18;
  background: #e8d5a3; padding: 4px 12px; border-radius: 99px !important;
  pointer-events: none; box-shadow: 0 6px 18px rgba(0,0,0,0.4);
}
/* ...so the page moves down to make room for it. */
.rd-swipe .rd-page { margin-top: 30px; }
.rd-tool.on, .rd-np-b.on {
  background: rgba(232,213,163,0.16) !important;
  border-color: rgba(232,213,163,0.5) !important; color: #e8d5a3 !important;
}

/* ── The bubble ──────────────────────────────────────────────────── */
.rd-npbub {
  position: absolute; right: 14px; z-index: 34;
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  width: 52px !important; height: 52px !important; min-height: 52px;
  display: flex; align-items: center; justify-content: center;
  background: #000; color: #e8d5a3;
  border: 1px solid rgba(232,213,163,0.34); border-radius: 50% !important;
  box-shadow: 0 14px 34px rgba(0,0,0,0.55); padding: 0 !important;
}
.rd-npbub svg { width: 22px; height: 22px; display: block; }
.rd-npbub:active { transform: scale(0.94); }
.rd-npbub-n {
  position: absolute; top: -3px; right: -3px; min-width: 19px; height: 19px;
  display: flex; align-items: center; justify-content: center; padding: 0 5px;
  background: #e8d5a3; color: #060c18; border-radius: 99px !important;
  font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 800;
  box-sizing: border-box;
}

/* ── The notepad and look-up sheets ──────────────────────────────── */
.rd-np, .rd-web {
  position: absolute; inset: 0; z-index: 42;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(4,6,12,0.62);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity 0.22s ease;
}
.rd-np.open, .rd-web.open { opacity: 1; pointer-events: auto; }
.rd-np-card, .rd-web-card {
  width: 100%; max-height: 84%; box-sizing: border-box;
  display: flex; flex-direction: column;
  padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0px));
  background: rgba(15,15,19,0.98); border-top: 1px solid rgba(255,255,255,0.12);
  border-radius: 22px 22px 0 0 !important;
  box-shadow: 0 -18px 44px rgba(0,0,0,0.6);
  transform: translateY(14px); transition: transform 0.26s cubic-bezier(0.4,0,0.2,1);
}
.rd-np.open .rd-np-card, .rd-web.open .rd-web-card { transform: translateY(0); }
.rd-np-head { display: flex; align-items: baseline; gap: 9px; flex-shrink: 0; margin-bottom: 10px; }
.rd-np-title { font-family: 'DM Sans', sans-serif; font-size: 16px; font-weight: 800; color: #fff; }
.rd-np-sub {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: 'DM Sans', sans-serif; font-size: 11px; color: rgba(255,255,255,0.45);
}
.rd-np-x {
  width: 30px !important; height: 30px !important; min-height: 30px; flex-shrink: 0;
  background: rgba(255,255,255,0.08); border: none; color: rgba(255,255,255,0.8);
  border-radius: 50% !important; font-size: 19px; line-height: 1; padding: 0 !important;
}
.rd-np-on {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
  padding: 7px 10px; background: rgba(232,213,163,0.1);
  border: 1px solid rgba(232,213,163,0.24); border-radius: 12px !important;
  font-family: 'DM Sans', sans-serif; font-size: 11.5px; color: #e8d5a3; line-height: 1.4;
}
.rd-np-on button {
  margin-left: auto; flex-shrink: 0; width: 22px !important; height: 22px !important;
  min-height: 22px; padding: 0 !important; background: none; border: none;
  color: #e8d5a3; font-size: 17px; line-height: 1;
}
.rd-np-new { display: flex; gap: 8px; align-items: flex-end; flex-shrink: 0; }
.rd-np-new textarea {
  flex: 1; min-width: 0; resize: none; box-sizing: border-box;
  padding: 10px 12px; background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14); border-radius: 14px !important;
  font-family: 'DM Sans', sans-serif; font-size: 13px; color: #fff; line-height: 1.45;
}
.rd-np-new textarea::placeholder { color: rgba(255,255,255,0.35); }
.rd-np-add {
  flex-shrink: 0; height: 44px; padding: 0 16px !important; background: #e8d5a3; color: #060c18;
  border: none; border-radius: 14px !important;
  font-family: 'DM Sans', sans-serif; font-size: 12.5px; font-weight: 800;
}
.rd-np-tools {
  display: flex; gap: 7px; flex-wrap: wrap; margin: 10px 0 4px; flex-shrink: 0;
}
.rd-np-b {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 11px !important; min-height: 0 !important;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.86); border-radius: 99px !important;
  font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 700;
}
.rd-np-b svg { width: 13px; height: 13px; flex-shrink: 0; }
.rd-np-list { flex: 1; min-height: 0; overflow-y: auto; margin-top: 8px; }
.rd-np-empty {
  padding: 22px 6px; font-family: 'DM Sans', sans-serif; font-size: 12px;
  color: rgba(255,255,255,0.45); line-height: 1.6; text-align: center;
}
.rd-np-i {
  display: flex; align-items: flex-start; gap: 9px; padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.rd-np-pg {
  flex-shrink: 0; width: 26px !important; height: 26px !important; min-height: 26px;
  padding: 0 !important; background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14); color: rgba(255,255,255,0.75);
  border-radius: 50% !important;
  font-family: 'DM Sans', sans-serif; font-size: 10.5px; font-weight: 800;
}
.rd-np-hl .rd-np-pg { background: rgba(232,213,163,0.18); border-color: rgba(232,213,163,0.4); color: #e8d5a3; }
.rd-np-txt {
  flex: 1; min-width: 0; font-family: 'DM Sans', sans-serif; font-size: 12.5px;
  color: rgba(255,255,255,0.88); line-height: 1.5; word-break: break-word;
}
.rd-np-txt em { display: block; margin-top: 3px; font-size: 11px; color: rgba(255,255,255,0.45); font-style: italic; }
.rd-np-tag {
  display: inline-block; margin-top: 4px; padding: 2px 7px;
  background: rgba(232,213,163,0.14); color: #e8d5a3; border-radius: 99px !important;
  font-size: 9px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase; font-style: normal;
}
.rd-np-go, .rd-np-rm {
  flex-shrink: 0; width: 26px !important; height: 26px !important; min-height: 26px;
  padding: 0 !important; background: none; border: none;
  color: rgba(255,255,255,0.45); border-radius: 50% !important;
  display: flex; align-items: center; justify-content: center;
}
.rd-np-go svg { width: 14px; height: 14px; }
.rd-np-rm { font-size: 18px; line-height: 1; }

/* ── Look up / translate ─────────────────────────────────────────── */
.rd-web-src {
  flex-shrink: 0; padding: 10px 12px; margin-bottom: 10px;
  background: rgba(255,255,255,0.05); border-left: 2px solid rgba(232,213,163,0.6);
  border-radius: 0 12px 12px 0 !important;
  font-family: 'Lora', Georgia, serif; font-size: 13px;
  color: rgba(255,255,255,0.72); line-height: 1.5;
}
.rd-web-langs { display: flex; gap: 6px; overflow-x: auto; flex-shrink: 0; padding-bottom: 8px; }
.rd-web-lang {
  flex-shrink: 0; padding: 6px 12px !important; min-height: 0 !important;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.8); border-radius: 99px !important;
  font-family: 'DM Sans', sans-serif; font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.rd-web-lang.on { background: #e8d5a3; border-color: #e8d5a3; color: #060c18; }
.rd-web-body { flex: 1; min-height: 90px; overflow-y: auto; padding: 4px 0 2px; }
.rd-web-wait, .rd-web-note {
  padding: 18px 4px; font-family: 'DM Sans', sans-serif; font-size: 12px;
  color: rgba(255,255,255,0.5); line-height: 1.6;
}
.rd-web-res { padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.07); }
.rd-web-from {
  display: inline-block; margin-bottom: 6px;
  font-family: 'DM Sans', sans-serif; font-size: 9.5px; font-weight: 800;
  letter-spacing: 1.4px; text-transform: uppercase; color: #e8d5a3;
}
.rd-web-txt {
  font-family: 'DM Sans', sans-serif; font-size: 14px;
  color: #fff; line-height: 1.6; word-break: break-word;
}
.rd-web-save {
  margin-top: 12px; padding: 9px 15px !important; min-height: 0 !important;
  background: rgba(232,213,163,0.14); border: 1px solid rgba(232,213,163,0.4);
  color: #e8d5a3; border-radius: 99px !important;
  font-family: 'DM Sans', sans-serif; font-size: 11.5px; font-weight: 800;
}
.rd-web-out {
  flex-shrink: 0; margin-top: 10px; width: 100%;
  padding: 12px !important; background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.16); color: rgba(255,255,255,0.86);
  border-radius: 14px !important;
  font-family: 'DM Sans', sans-serif; font-size: 12.5px; font-weight: 700;
}

/* ══════════════════════════════════════════════════════════════════
   ENTER SITS BESIDE THE COPY, NOT UNDER IT
   The Reader and eBooks copy is four siblings in a column; a grid puts
   the three lines of text in one column and the Enter in a second,
   centred against them, with no change to the markup.
   ══════════════════════════════════════════════════════════════════ */
.reader-sec-txt {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: 'hello cta' 'name cta' 'sub cta';
  align-items: center; column-gap: 14px; row-gap: 0;
}
.reader-sec-hello { grid-area: hello; }
.reader-sec-name  { grid-area: name; }
.reader-sec-sub   { grid-area: sub; }
.reader-sec-cta {
  grid-area: cta; align-self: center; justify-self: end;
  margin-top: 0 !important; margin-right: 2px;
}

/* ══════════════════════════════════════════════════════════════════
   FASHION PLUS PLAYER — show the whole frame
   A fixed 250px box cropped a 16:9 clip hard, which is what made it look
   zoomed in and pushed the copy on top of the artwork baked into it.
   ══════════════════════════════════════════════════════════════════ */
body.fashplus :is(#home, .stw-prev-stage) .fp-card {
  aspect-ratio: 16 / 9;
  min-height: 0 !important; height: auto !important;
}
/* Enough wash along the bottom to carry the copy without dimming the clip. */
body.fashplus :is(#home, .stw-prev-stage) .fp-card::after {
  background:
    linear-gradient(0deg, rgba(6,12,24,0.86) 0%, rgba(6,12,24,0.45) 26%, rgba(6,12,24,0) 52%),
    linear-gradient(100deg, rgba(6,12,24,0.55) 0%, rgba(6,12,24,0.18) 46%, rgba(6,12,24,0) 74%) !important;
}
body.fashplus :is(#home, .stw-prev-stage) .fp-card .home-card-top { padding-bottom: 0 !important; }
body.fashplus :is(#home, .stw-prev-stage) .fp-card .home-card-title { margin-bottom: 2px; font-size: 13.5px !important; }

/* ══════════════════════════════════════════════════════════════════
   ROUNDED MODE — each of the new blocks opens at the top and closes at
   the bottom, the same way the trending pair already does.
   ══════════════════════════════════════════════════════════════════ */
body.homecorner-round :is(#home, .stw-prev-stage) .fash-plyr-wrap > #todayPracticeCard,
body.homecorner-round :is(#home, .stw-prev-stage) .fash-rdsec-wrap > .reader-sec,
body.homecorner-round :is(#home, .stw-prev-stage) .fash-ebsec-wrap > .reader-sec,
body.homecorner-round #home-nm .nmh-rdsec-wrap > .reader-sec,
body.homecorner-round #home-nm .nmh-ebsec-wrap > .reader-sec {
  border-radius: 18px 18px 0 0 !important;
}
/* Opening at the top and closing at the bottom only works when something
   closes it. The Normal home's player wrapper holds the practice card and
   nothing else — the Fashion one has its Fashion Plus banner underneath,
   the reader wrappers have theirs — so the card was left opened at the top
   and cut off square at the bottom with nothing to meet. It rounds all
   four corners instead. */
body.homecorner-round #home-nm .nmh-plyr-wrap > .nmh-practice {
  border-radius: 18px !important;
}
body.homecorner-round :is(#home, .stw-prev-stage) .fash-plyr-wrap > #fpBanner,
body.homecorner-round :is(#home, .stw-prev-stage) .fash-rdsec-wrap > .rdsec-banner,
body.homecorner-round :is(#home, .stw-prev-stage) .fash-ebsec-wrap > .rdsec-banner,
body.homecorner-round #home-nm .nmh-rdsec-wrap > .rdsec-banner,
body.homecorner-round #home-nm .nmh-ebsec-wrap > .rdsec-banner {
  border-radius: 0 0 18px 18px !important;
}
/* The rail above them is a pill by design, not a section. */
body.homecorner-round :is(#home, .stw-prev-stage) .home-body > .plyr-wrap > .spill,
body.homecorner-round :is(#home, .stw-prev-stage) .home-body > .rdsec-wrap > .spill,
body.homecorner-round #home-nm .nmh-wrap > .plyr-wrap > .spill,
body.homecorner-round #home-nm .nmh-wrap > .rdsec-wrap > .spill { border-radius: 0 !important; }

/* The eyebrow belongs in the corner, out of the way of whatever the clip
   is doing in the middle; the ritual name and its line sit together at the
   bottom. Taking the label out of flow leaves .home-card-top holding just
   the title, so the two lines close up. */
body.fashplus :is(#home, .stw-prev-stage) .fp-card .home-card-label {
  position: absolute !important; left: 14px; top: 14px; z-index: 4;
  margin: 0 !important;
}
/* .home-card-top was position:relative (it is a direct child, and those are
   lifted above the scrim), which made it the label's containing block and
   left the eyebrow sitting under the title instead of in the corner. The
   card is a flex row of these two blocks in this mode, and a flex item
   honours z-index while static — so it can give the position back and keep
   its place above the scrim. */
body.fashplus :is(#home, .stw-prev-stage) .fp-card .home-card-top { position: static !important; }

/* Both readers carry the notes library in their rail now — the eBook one
   behind its arrow — so the floating bubble would be a second door to the
   same panel. The markup stays; it just never shows. */
#sub-reader-meaning .rd-npbub,
#sub-reader-ebook .rd-npbub { display: none !important; }
/* The footer's middle button is the highlight toggle now — Contents keeps
   the header icon, which is the one place it is reached from. */
.rd-nav-mid { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.rd-nav-mid svg { width: 15px; height: 15px; flex-shrink: 0; }
.rd-nav-mid.rd-sw-btn.on {
  background: rgba(232,213,163,0.16) !important;
  border-color: rgba(232,213,163,0.5) !important; color: #e8d5a3 !important;
}

/* The ritual name and its line drop to the very bottom of the frame — the
   clip carries its own logo across the middle and the copy was landing on
   top of it. */
/* .home-card carries 20px of its own side padding, so the title and its
   line were starting 36px in while the eyebrow — absolute against the card —
   sat at 16px. The card gives up its horizontal padding here and the two
   blocks own the inset, so all three lines start on the same edge. */
body.fashplus :is(#home, .stw-prev-stage) .fp-card {
  padding-bottom: 0 !important; padding-left: 0 !important; padding-right: 0 !important;
}
body.fashplus :is(#home, .stw-prev-stage) .fp-card .home-card-bottom {
  padding: 0 14px 12px !important; margin: 0 !important;
}
body.fashplus :is(#home, .stw-prev-stage) .fp-card .home-card-top { padding: 0 14px 2px !important; }

/* ══════════════════════════════════════════════════════════════════
   BANNER CHIPS — what a banner leads to, named on its right-hand side
   Small enough that three fit inside a 16:9 strip; the scrim is only as
   wide as the column so the artwork on the left is untouched.
   (app/js/part067.js)
   ══════════════════════════════════════════════════════════════════ */
/* No panel behind any of it. These clips carry their own wordmark across
   the left half — the Store one runs to about 47% — so the copy starts past
   that, clear of both the artwork and the lettering baked into the frame. */
/* Below the artwork's own words, not across them.
   This was centred on the right half — top:50% — and several of these clips
   carry their own wordmark at exactly that height, so the chip landed on top
   of "NowssB Store" and the two sets of white type fought each other. Anchored
   to the foot instead: the chip still names the section, and the film's own
   lettering is left to be read. */
.vb-chips {
  position: absolute; left: 52%; right: 10px; bottom: 12px;
  z-index: 3; display: flex; align-items: flex-end; justify-content: flex-end;
  padding: 0; pointer-events: none; background: none;
}
.vb-chip { display: flex; align-items: center; gap: 9px; min-width: 0; }
/* The app's own dash — in from the right, with the same settle. */
.vb-chip.dash-in { animation: nmhTrendWordDash .6s cubic-bezier(.34,1.56,.64,1) both; }
.vb-chip-ic {
  width: 26px; height: 26px; flex-shrink: 0; overflow: hidden;
  border-radius: 50% !important;
  background: rgba(232,213,163,0.12); border: 1px solid rgba(232,213,163,0.34);
}
.vb-chip-ic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vb-chip-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.vb-chip-t {
  font-family: 'DM Sans', sans-serif; font-size: 11.5px; font-weight: 800;
  letter-spacing: -0.1px; color: #fff; white-space: nowrap;
  text-shadow: 0 2px 10px rgba(0,0,0,0.85), 0 0 22px rgba(0,0,0,0.6);
}
.vb-chip-s {
  font-family: 'DM Sans', sans-serif; font-size: 9px; font-weight: 400;
  color: rgba(255,255,255,0.78); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  text-shadow: 0 2px 10px rgba(0,0,0,0.85), 0 0 22px rgba(0,0,0,0.6);
}

/* ── The corner choice reaches the footer ──────────────────────────────
   It always had the radius, but the footer runs edge to edge and the black
   block it opens with butts straight against the section above, so both
   rounded corners were drawn against something the same colour and nothing
   appeared to change. Rounded mode rounds the top only — the bottom is the
   end of the page — and lifts it off what is above so the notch reads. */
/* ── The footer is square. Always. ──────────────────────────────────
   Rounded mode rounds every direct child of the two home wraps, and the
   footer is one of them, so it needs an explicit exemption at a higher
   specificity than that blanket rule — a plain default is not enough. */
:is(#home, .stw-prev-stage) .home-body > .home-footer,
#home-nm .nmh-wrap > .home-footer,
body.homecorner-round :is(#home, .stw-prev-stage) .home-body > .home-footer,
body.homecorner-round #home-nm .nmh-wrap > .home-footer,
body.homecorner-edge :is(#home, .stw-prev-stage) .home-body > .home-footer,
body.homecorner-edge #home-nm .nmh-wrap > .home-footer {
  border-radius: 0 !important;
  margin-top: 0 !important;
}

/* ── The chooser's two Enters are the arrow alone, sitting a touch below
   the word they belong to. ── */
.vb-g-cta .vb-cta-lbl { display: none !important; }
/* On the same line as the word it belongs to. */
.vb-g-cta { position: relative; top: 0; gap: 0; }

/* ── The coupon art with its offer banner, and Shabdapathy Foundations
   with its own black banner, each in one wrapper. ── */
:is(#home, .stw-prev-stage) .fash-offer-wrap > .fash-banner-wrap,
:is(#home, .stw-prev-stage) .fash-shabda-wrap > .shabda-featured-card {
  width: 100% !important; margin: 0 !important;
}
:is(#home, .stw-prev-stage) .fash-offer-wrap > .fash-offer-banner,
:is(#home, .stw-prev-stage) .fash-shabda-wrap > .shabda-banner {
  width: 100% !important; margin: 10px 0 0 !important; box-sizing: border-box;
}
/* Rounded mode: the pair opens at the top and closes at the bottom. */
body.homecorner-round :is(#home, .stw-prev-stage) .fash-offer-wrap > .fash-banner-wrap,
body.homecorner-round :is(#home, .stw-prev-stage) .fash-shabda-wrap > .shabda-featured-card {
  border-radius: 18px 18px 0 0 !important;
}
body.homecorner-round :is(#home, .stw-prev-stage) .fash-offer-wrap > .fash-offer-banner,
body.homecorner-round :is(#home, .stw-prev-stage) .fash-shabda-wrap > .shabda-banner {
  border-radius: 0 0 18px 18px !important;
}

/* ── The four buttons and their tip rail in one neumorphic wrapper, the
   Normal home's answer to the Fashion home's glass one. ── */
#home-nm .nmh-tiles-wrap {
  box-sizing: border-box; overflow: hidden;
  width: 100%; margin: 16px 0; padding: 14px;
  background: #f0f2f7; border-radius: 22px !important;
  box-shadow: 7px 7px 16px rgba(0,0,0,0.14), -5px -5px 12px rgba(255,255,255,0.97);
}
#home-nm.nm-dark .nmh-tiles-wrap {
  background: #16163c;
  box-shadow: 8px 8px 22px rgba(0,0,0,0.88), -4px -4px 14px rgba(50,50,110,0.32);
}
/* The contents were written as top-level sections; the wrapper owns the
   spacing now. */
#home-nm .nmh-tiles-wrap > .htg-rail { margin: 0 0 12px !important; }
#home-nm .nmh-tiles-wrap > .nmh-grid { width: 100% !important; margin: 0 !important; }

/* The trending word's logo sat to the right of the word. The item is a flex
   row that stays right-aligned, so ordering the image first puts the logo on
   the left of the word without moving the block. */
.nmh-trend-banner-icon { order: -1; }
.nmh-trend-banner-item { align-items: center; }

/* ── Daily Practice and its black banner, in one wrapper. The card ships
   its own 16px side margins as a top-level section; inside the wrapper the
   wrapper owns them. ── */
:is(#home, .stw-prev-stage) .fash-routines-wrap > .home-card {
  width: 100% !important; margin-left: 0 !important; margin-right: 0 !important;
  margin-bottom: 0 !important;
}
:is(#home, .stw-prev-stage) .fash-routines-wrap > .routines-banner {
  width: 100% !important; margin: 10px 0 0 !important; box-sizing: border-box;
}
/* The clip heads the wrapper, so it gives up the outer inset .vb-banner
   carries as a top-level section — the wrapper owns that now. */
:is(#home, .stw-prev-stage) .fash-routines-wrap > .rt-vid-banner {
  width: 100% !important; margin: 0 0 10px !important;
}
/* In rounded mode the block opens on the clip instead of the card, so the
   top corners belong to it. Only while it is actually showing — with
   Fashion Plus off the card is first again and keeps its own. */
body.homecorner-round :is(#home, .stw-prev-stage) .fash-routines-wrap > .rt-vid-banner {
  border-radius: 18px 18px 0 0 !important;
}
body.homecorner-round.fashplus :is(#home, .stw-prev-stage) .fash-routines-wrap > .home-card {
  border-radius: 0 !important;
}

/* The clip carries a vertical rule down its own middle; the words sit just
   past it, centred on the height, and arrive one after another — Set, then
   Your, then Routine — on the same overshoot every other dash-in on this
   home uses, then hold and repeat. */
:is(#home, .stw-prev-stage) .rt-vid-banner .rtv-txt {
  position: absolute; left: 54%; right: 12px; top: 0; bottom: 0; z-index: 3;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  pointer-events: none;
}
:is(#home, .stw-prev-stage) .rt-vid-banner .rtv-w {
  font-family: 'DM Sans', sans-serif; font-size: 19px; font-weight: 800;
  color: #fff; line-height: 1.14; letter-spacing: -0.2px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.6);
  animation: rtvWord 5.2s linear infinite both;
}
:is(#home, .stw-prev-stage) .rt-vid-banner .rtv-w:nth-child(2) { animation-delay: 0.3s; }
:is(#home, .stw-prev-stage) .rt-vid-banner .rtv-w:nth-child(3) { animation-delay: 0.6s; }
@keyframes rtvWord {
  0%   { transform: translateX(46px); opacity: 0; }
  6%   { transform: translateX(-7px); opacity: 1; }
  9%   { transform: translateX(4px); }
  12%  { transform: translateX(-2px); }
  15%  { transform: translateX(0); opacity: 1; }
  86%  { transform: translateX(0); opacity: 1; }
  96%  { transform: translateX(0); opacity: 0; }
  100% { transform: translateX(0); opacity: 0; }
}
/* Motion off means motion off — the words simply sit there. */
@media (prefers-reduced-motion: reduce) {
  :is(#home, .stw-prev-stage) .rt-vid-banner .rtv-w { animation: none; opacity: 1; transform: none; }
}
body.homecorner-round :is(#home, .stw-prev-stage) .fash-routines-wrap > .home-card {
  border-radius: 18px 18px 0 0 !important;
}
body.homecorner-round :is(#home, .stw-prev-stage) .fash-routines-wrap > .routines-banner {
  border-radius: 0 0 18px 18px !important;
}

/* Daily Practice closes with the same white Enter pill Shabdapathy
   Foundations carries, rather than the small bare arrow that left the right
   of the card looking unfinished. */
:is(#home, .stw-prev-stage) .fash-routines-wrap .home-card-bottom { align-items: flex-end; gap: 12px; }
:is(#home, .stw-prev-stage) .fash-routines-wrap .home-card-bottom .tp-enter { flex-shrink: 0; }

/* The eBook reader carries the same rail the Meaning reader does — the
   page just has to start clear of it. */
#sub-reader-ebook .rd-stage-e { padding-left: 52px; }
#sub-reader-ebook .rd-rail { z-index: 26; }

/* ══════════════════════════════════════════════════════════════════
   PAGE TURN — the leaf hinges in from the edge it came from, 280ms.
   ══════════════════════════════════════════════════════════════════ */
/* The page you are leaving is lifted out as a copy and swung over on its
   spine, darkening as it goes, with the next page already sitting under it.
   Going back, the page you are returning to swings in the same way. 200ms —
   long enough to read as paper, short enough to feel instant. */
.rd-stage { perspective: 1500px; position: relative; }
.rd-page { backface-visibility: hidden; }
.rd-leaf {
  transform-origin: left center; will-change: transform, filter;
  pointer-events: none; backface-visibility: hidden;
  box-shadow: 0 0 40px rgba(0,0,0,0.55);
}
@keyframes rdLeafGo {
  0%   { transform: rotateY(0deg); filter: brightness(1); }
  100% { transform: rotateY(-122deg); filter: brightness(0.62); }
}
@keyframes rdLeafBack {
  0%   { transform: rotateY(-122deg); filter: brightness(0.62); }
  100% { transform: rotateY(0deg); filter: brightness(1); }
}
.rd-leaf.rd-leaf-go { animation: rdLeafGo .42s cubic-bezier(.33,0,.2,1) forwards; }
.rd-page.rd-turn-p {
  transform-origin: left center; will-change: transform, filter;
  animation: rdLeafBack .42s cubic-bezier(.33,0,.2,1) both;
}
@media (prefers-reduced-motion: reduce) {
  .rd-leaf.rd-leaf-go, .rd-page.rd-turn-p { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════
   EPUB — the book's own markup, in the reader's type
   ══════════════════════════════════════════════════════════════════ */
.rd-epub { font: inherit; color: inherit; }
.rd-epub p, .rd-epub li, .rd-epub blockquote {
  font: inherit; margin: 0 0 0.9em; text-align: justify; hyphens: auto;
}
.rd-epub h1, .rd-epub h2, .rd-epub h3, .rd-epub h4 {
  font-family: inherit; font-weight: 700; line-height: 1.25;
  margin: 1.2em 0 0.5em; text-align: left;
}
.rd-epub h1 { font-size: 1.5em; } .rd-epub h2 { font-size: 1.3em; }
.rd-epub h3 { font-size: 1.12em; } .rd-epub h4 { font-size: 1em; }
.rd-epub img { max-width: 100%; height: auto; display: block; margin: 1em auto; }
.rd-epub blockquote { padding-left: 14px; border-left: 2px solid currentColor; opacity: 0.8; }
.rd-epub ul, .rd-epub ol { margin: 0 0 0.9em; padding-left: 1.3em; }
.rd-epub table { width: 100%; border-collapse: collapse; margin: 0 0 0.9em; font-size: 0.9em; }
.rd-epub td, .rd-epub th { border: 1px solid currentColor; padding: 5px 7px; opacity: 0.85; }
.rd-epub hr { border: none; border-top: 1px solid currentColor; opacity: 0.28; margin: 1.2em 0; }

/* The Open an EPUB row at the top of the library. */
.rd-lib-open .rd-lib-cov-open {
  display: flex; align-items: center; justify-content: center;
  color: #e8d5a3; background: rgba(232,213,163,0.1);
  border: 1px dashed rgba(232,213,163,0.4);
}
.rd-lib-open .rd-lib-cov-open svg { width: 24px; height: 24px; }

/* ══════════════════════════════════════════════════════════════════
   FULL SCREEN — everything but the page steps out
   The rail tab stays, and a corner chip appears, so there is always a
   way back. (app/js/part065.js)
   ══════════════════════════════════════════════════════════════════ */
.rd-immersive .rd-top,
.rd-immersive .rd-foot,
.rd-immersive .rd-erow,
.rd-immersive .rd-prog-wide,
.rd-immersive .rd-chev { display: none !important; }
.rd-immersive .rd-stage {
  padding: 0 !important;
}
/* Edge to edge: no side padding on the stage, no margin or radius on the
   leaf — the page is the screen. */
.rd-immersive .rd-page {
  min-height: 100%; box-sizing: border-box;
  border-radius: 0 !important; margin: 0 !important;
  padding: max(env(safe-area-inset-top, 26px), 26px) 22px
           max(env(safe-area-inset-bottom, 26px), 26px) !important;
}
/* The way out is the rail's own full-screen button — it just swaps its
   glyph. A second floating chip was a duplicate of it, and being fixed
   inside the rail (a transformed ancestor) it was laid out against the rail
   rather than the screen, so it sat on top of the handle. */
.rd-full-btn .rd-full-off { display: none; }
.rd-immersive .rd-full-btn .rd-full-in { display: none; }
.rd-immersive .rd-full-btn .rd-full-off { display: block; }

/* ══════════════════════════════════════════════════════════════════
   WORD / MEANING SEARCH — the clip is the page, no glass panel
   The frosted card, its travelling arc and the still crystal photo are
   all gone; each screen plays its own loop behind the content with a
   scrim over it so the copy still reads.
   ══════════════════════════════════════════════════════════════════ */
#sub-word-search, #sub-meaning-search { background: #000 !important; }
.wsg-bgvid {
  position: absolute; inset: 0; z-index: 0;
  width: 100% !important; height: 100% !important;
  object-fit: cover; display: block; pointer-events: none;
}
.wsg-bgvid-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(4,8,16,0.52) 0%, rgba(4,8,16,0.4) 42%, rgba(4,8,16,0.66) 100%);
}
#sub-word-search > .sub-header, #sub-word-search > .ws-page-body,
#sub-meaning-search > .sub-header, #sub-meaning-search > .ms-page-body {
  position: relative; z-index: 2;
}
/* No panel, no ring, no frost — just the content over the clip. */
.wsg-card {
  background: transparent !important; box-shadow: none !important;
  border: none !important; overflow: visible !important;
}
.wsg-card::before, .wsg-card::after { display: none !important; }

/* ── The crystal-ball logo gives its place to the search mark, and both it
   and the NowssB wordmark sit in glass. ── */
.wsg-logo.wsg-logo-glass {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.22);
  -webkit-backdrop-filter: blur(16px) saturate(1.25); backdrop-filter: blur(16px) saturate(1.25);
  box-shadow: 0 10px 26px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.3);
}
.wsg-logo.wsg-logo-glass img { width: 70px; height: 70px; object-fit: contain; }
/* The wordmark is type now — bare on the clip, no panel behind it, and it
   names the search it belongs to. */
.wsg-wordmark {
  display: block; font-family: 'DM Sans', sans-serif;
  font-size: 30px; font-weight: 300; letter-spacing: -1px; line-height: 1.05;
  color: #fff; white-space: nowrap;
  text-shadow: 0 2px 16px rgba(0,0,0,0.85), 0 0 34px rgba(0,0,0,0.5);
}
.wsg-wordmark b { font-weight: 800; color: #fff; }
/* app/app.css squares every corner with `* { border-radius: 0 !important }`,
   which beat the inline 50% these back buttons were written with. */
#sub-word-search .sub-header > button,
#sub-meaning-search .sub-header > button,
#sub-search-choice .sub-header > button { border-radius: 50% !important; }

/* ── The Normal home's player keeps its rail but not the panel — the card
   is neumorphic already and a second raised surface around it read as a
   box inside a box. The element stays so the layout editor still has one
   thing to move. ── */
#home-nm .nmh-plyr-wrap {
  background: none !important; box-shadow: none !important;
  padding: 0 !important; border-radius: 0 !important;
  /* Stripping the panel left one thing behind: .plyr-wrap clips, and with
     no radius of its own it was cutting the practice card's 26px corners
     and its neumorphic shadow off square — the raised surface was gone but
     its hard outline stayed. Nothing here needs clipping now. */
  overflow: visible !important;
}
#home-nm.nm-dark .nmh-plyr-wrap { background: none !important; box-shadow: none !important; }

/* ══════════════════════════════════════════════════════════════════
   PERSONALISED HEALING — the card and its chooser, in one wrapper
   The banner is appended below the card by app/js/part067.js.
   ══════════════════════════════════════════════════════════════════ */
.healing-wrap { box-sizing: border-box; overflow: hidden; }
:is(#home, .stw-prev-stage) .fash-healing-wrap {
  width: calc(100% - 32px); margin: 18px 16px; padding: 12px;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 0 !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.25); backdrop-filter: blur(18px) saturate(1.25);
  box-shadow: 0 16px 40px rgba(0,0,0,0.34);
}
#home-nm .nmh-healing-wrap {
  width: 100%; margin: 16px 0; padding: 14px;
  background: #f0f2f7; border-radius: 22px !important;
  box-shadow: 7px 7px 16px rgba(0,0,0,0.14), -5px -5px 12px rgba(255,255,255,0.97);
}
#home-nm.nm-dark .nmh-healing-wrap {
  background: #16163c;
  box-shadow: 8px 8px 22px rgba(0,0,0,0.88), -4px -4px 14px rgba(50,50,110,0.32);
}
/* The card and the banner were both written as top-level sections; inside
   the wrapper its padding does the spacing. */
.healing-wrap > .health-journey-card {
  width: 100% !important; margin: 0 !important;
}
.healing-wrap > .vb-banner {
  width: 100% !important; margin: 10px 0 0 !important; box-sizing: border-box;
}
body.homecorner-round .healing-wrap > .health-journey-card {
  border-radius: 18px 18px 0 0 !important;
}
body.homecorner-round .healing-wrap > .vb-banner {
  border-radius: 0 0 18px 18px !important;
}

/* ══════════════════════════════════════════════════════════════════
   NORMAL HOME — Today's Trending and the Store each in one neumorphic
   wrapper: the section's clip and its black banners as one block.
   ══════════════════════════════════════════════════════════════════ */
#home-nm .nmh-sec-wrap {
  box-sizing: border-box; overflow: hidden;
  width: 100%; margin: 16px 0; padding: 14px;
  background: #f0f2f7; border-radius: 22px !important;
  box-shadow: 7px 7px 16px rgba(0,0,0,0.14), -5px -5px 12px rgba(255,255,255,0.97);
}
#home-nm.nm-dark .nmh-sec-wrap {
  background: #16163c;
  box-shadow: 8px 8px 22px rgba(0,0,0,0.88), -4px -4px 14px rgba(50,50,110,0.32);
}
/* Everything inside was written as a top-level section; the wrapper's
   padding does the spacing now. */
#home-nm .nmh-sec-wrap > * {
  width: 100% !important; margin-left: 0 !important; margin-right: 0 !important;
}
#home-nm .nmh-sec-wrap > * + * { margin-top: 10px !important; }
#home-nm .nmh-sec-wrap > *:first-child { margin-top: 0 !important; }
#home-nm .nmh-sec-wrap > *:last-child { margin-bottom: 0 !important; }
body.homecorner-round #home-nm .nmh-sec-wrap > *:first-child { border-radius: 18px 18px 0 0 !important; }
body.homecorner-round #home-nm .nmh-sec-wrap > *:last-child { border-radius: 0 0 18px 18px !important; }

/* ── The coupon art is a clip. The <video> copies the <img>'s classes AND its
   inline style, so it inherits that exact box — .rmd-coupon-banner (the word
   and meaning detail pages) has no CSS of its own, only what the img's style
   attribute carried. The aspect-ratio/object-fit here are a floor under that:
   .nmh-greet-img/.fash-coupon-img already force their own !important 16:9 and
   win over this, and rmd/msd — which set a width but no height anywhere —
   get one from this instead of rendering at an unconstrained default box.
   The original is hidden with a class because the hosts set
   `display: block !important`. ── */
.vb-coupon-hidden { display: none !important; }
.vb-coupon-vid { background: #060c18; aspect-ratio: 16 / 9; object-fit: cover; }

/* ══════════════════════════════════════════════════════════════════
   PLAYER BANNER — on every word's page, above About This Word
   No copy over the clip — its own artwork already carries "NowssB
   Player" — just the mark, at the middle of the right edge. Square
   corners, a little shorter than the standard 16:9, and top/bottom
   padding so the clip doesn't run edge to edge inside the box.
   ══════════════════════════════════════════════════════════════════ */
.vb-banner-player {
  border-radius: 0 !important;
  aspect-ratio: 16 / 8 !important;
  padding: 14px 0; box-sizing: border-box;
}
/* .vb-banner video is absolutely positioned with inset:0 — its containing
   block is the padding box, so inset:0 fills straight through the padding
   above rather than respecting it. Explicit top/bottom instead of inset
   leaves the padding visible as a bar either side of the clip. `auto`
   height doesn't reliably fill that gap on a replaced element like video —
   it falls back to the clip's own intrinsic ratio instead of solving
   top+height+bottom — so the height is spelled out instead. */
.vb-banner-player video {
  top: 14px; bottom: 14px; height: calc(100% - 28px) !important;
}
.vb-player {
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center; justify-content: flex-end;
  padding: 0 16px; pointer-events: none;
}
.vb-player-ic {
  width: 52px; height: 52px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.24);
  border-radius: 50% !important;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.42);
}
.vb-player-ic img { width: 32px; height: 32px; object-fit: contain; display: block; }
/* On a word page the banner is a section of the scroller, not a home block. */
.rmd-desc-block ~ .vb-banner, .vb-banner + .rmd-desc-block { margin-top: 0; }

/* The store clip's own wrapper under the trending block — glass, holding
   the clip and the Shop Now banner that belongs to it. Sizing for both
   lives with the trending pair's, above. It carries the banner in the
   markup now, so :empty only ever matches if the clip has yet to land. */
:is(#home, .stw-prev-stage) .fash-storevid-wrap:empty { display: none; }

/* One clip means Shop Now has nothing to hide for; the rotators still toggle
   the class on their own timer, so it is overridden here rather than chased. */
#fashCouponCta.nmh-cta-hidden, #nmhCouponCta.nmh-cta-hidden {
  opacity: 1 !important; visibility: visible !important; pointer-events: auto !important;
}

/* ── The coupon clip matches the banner under it ────────────────────────
   .fash-coupon-img carries its own 16px side margins from when it was a
   top-level banner; inside the wrapper the wrapper owns the inset, so the
   clip and the black banner below it measure the same. ── */
:is(#home, .stw-prev-stage) .fash-offer-wrap .fash-coupon-img,
:is(#home, .stw-prev-stage) .fash-offer-wrap .vb-coupon-vid {
  width: 100% !important; margin: 0 !important;
}
/* Shop Now belongs in the right half of the clip, past the vertical rule
   the artwork carries down its middle and centred on the height — it was
   tucked into the bottom corner, below that half rather than beside it.
   Anchored from the right edge rather than measured from the rule, so a
   narrow screen shortens the gap instead of pushing the pill off the clip.
   The transform is deliberately not !important: the dash-in below has to
   be able to animate it. */
:is(#home, .stw-prev-stage) .fash-offer-wrap .fash-banner-cta-tc,
#home-nm .nmh-offer-section .nmh-banner-cta-tc {
  left: auto !important; right: 12px !important;
  top: 50% !important; bottom: auto !important;
  transform: translateY(-50%);
}
/* The dash has to carry that centring through every frame, or the pill
   snaps to the top of the clip for the length of it. */
:is(#home, .stw-prev-stage) .fash-offer-wrap .fash-banner-cta-tc.coupon-dash-cta,
#home-nm .nmh-offer-section .nmh-banner-cta-tc.coupon-dash-cta {
  animation: couponDashCtaMid 0.6s cubic-bezier(.2,.7,.3,1);
}
@keyframes couponDashCtaMid {
  0%   { transform: translateY(-50%) translateX(72px); opacity: 0; }
  55%  { transform: translateY(-50%) translateX(-6px); opacity: 1; }
  76%  { transform: translateY(-50%) translateX(2.5px); }
  100% { transform: translateY(-50%) translateX(0); }
}
/* The page banners scroll with the content and keep the page's own inset. */
#sub-offers .bgp-content > .vb-banner,
#sub-quick-access .bgp-content > .vb-banner,
#sub-streak .bgp-content > .vb-banner {
  width: 100% !important; margin: 4px 0 18px !important;
}

/* ── The streak clip's copy ─────────────────────────────────────────
   A rule just right of the middle, the line past it a word at a time —
   each dashing in from the right on the app's own overshoot, holding,
   then the set repeating — and the player mark closing the row. The
   clip's own subject sits left, so all of this stays clear of it. ── */
.streak-vid .stv-rule {
  position: absolute; left: 52%; top: 20%; bottom: 20%; width: 1px; z-index: 2;
  background: rgba(255,255,255,0.45);
}
.streak-vid .stv-right {
  position: absolute; left: 52%; right: 10px; top: 0; bottom: 0; z-index: 3;
  display: flex; align-items: center; gap: 10px;
  padding-left: 12px; pointer-events: none;
}
.streak-vid .stv-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.streak-vid .stv-w {
  font-family: 'DM Sans', sans-serif; font-size: 16px; font-weight: 800;
  color: #fff; line-height: 1.16; letter-spacing: -0.2px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.65);
  animation: rtvWord 5.2s linear infinite both;
}
.streak-vid .stv-w:nth-child(2) { animation-delay: 0.3s; }
.streak-vid .stv-w:nth-child(3) { animation-delay: 0.6s; }
.streak-vid .stv-w:nth-child(4) { animation-delay: 0.9s; }
/* The same glass disc the player banner gives its mark, a size down. */
.streak-vid .stv-ic {
  width: 44px; height: 44px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.24);
  border-radius: 50% !important;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.42);
}
.streak-vid .stv-ic img { width: 28px; height: 28px; object-fit: contain; display: block; }
@media (prefers-reduced-motion: reduce) {
  .streak-vid .stv-w { animation: none; opacity: 1; transform: none; }
}


/* Hairlines between the Normal home's three header buttons — the same
   separator the Fashion header uses (.hdr-rule), darkened for a light
   surface. Sits between the neumorphic discs rather than around them, so
   the group reads as one strip. */
.nmh-hdr-rule {
  width: 1px; height: 22px; flex-shrink: 0;
  background: rgba(26,26,46,0.16);
}
#home-nm.nm-dark .nmh-hdr-rule { background: rgba(255,255,255,0.18); }

/* ══════════════════════════════════════════════════════════════════
   NOWSSB SIGNATURE

   Two things: a short doorway in the store hub, and the shop it opens.

   The doorway used to be a 9/16 card with a rail of the collection
   underneath — a tall column of mostly video, and a second smaller copy
   of a page that now exists properly. It is a banner now, and the rail
   is gone.

   The shop is the two stores combined, which is what the collection is:
   the Word Atelier's clip and the Meaning Store's clip behind one gold
   frame, the Meaning Store's grid, the Atelier's card.
   ══════════════════════════════════════════════════════════════════ */

/* ── The doorway ── */
.sig-store-section {
  position: relative; overflow: hidden; cursor: pointer;
  /* 2:3 — the art is a portrait render and this is the frame it was drawn
     for. It was 9/16 (too tall, mostly empty), then a 178px letterbox
     (too short, cropped to a sliver). */
  aspect-ratio: 2 / 3; height: auto;
  width: calc(100% - 32px); margin: 20px 16px 0;
  border-radius: 18px; background: #060c18;
  border: 1.5px solid rgba(232,213,163,0.42);
  box-shadow: 0 14px 36px rgba(0,0,0,0.5), 0 0 26px rgba(232,213,163,0.16);
}
.sig-store-section:active { transform: scale(0.994); }

/* The key art. Portrait 2:3 behind a landscape doorway, so it is anchored
   on the two bags rather than centred — centring put the reflection under
   the wordmark in the middle of the banner and the bags off the top. */
.sig-store-art {
  display: block; width: 100%; height: 100%; object-fit: cover;
  /* 2:3 frame, 2:3 art — nothing to crop and nothing to re-anchor. */
  object-position: center center;
  position: absolute; inset: 0; z-index: 0;
}

/* Dead: nothing builds .sig-store-video. It described a two-clip crossfade
   driven from part074.js that no longer exists, and the section carried a
   still until now. The section's clip wears .sig-store-art above instead,
   so the frame and the crop anchor are shared with what was there before.
   Left in place rather than deleted because the rules are harmless and the
   next clip that wants to crossfade behind this doorway can use them. */
.sig-store-video {
  display: block; width: 100%; height: 100%; object-fit: cover;
  position: absolute; inset: 0; z-index: 0;
}
.sig-store-video.sig-vid-b { opacity: 0; transition: opacity 1.5s ease; }
.sig-store-video.sig-vid-b.on { opacity: 1; }

/* Warmer than the white sections': the same shape of gradient with gold
   worked through it, so the clips read as gilded rather than colour-shifted. */
.sig-store-overlay {
  position: absolute; inset: 0; z-index: 1;
  /* Nothing across the bottom any more — the copy moved into its own glass
     card in the corner, which is what makes a wash unnecessary. A whisper
     at the very top only, to seat the card against the frame. */
  background: linear-gradient(to bottom,
    rgba(3,8,20,0.30) 0%,
    rgba(3,8,20,0.06) 22%,
    rgba(3,8,20,0.00) 46%,
    rgba(3,8,20,0.00) 100%);
}
/* One slow pass of light. Long and faint on purpose — a fast or bright
   sweep reads as a loading shimmer. */
.sig-store-shine {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,0.13) 48%,
              rgba(232,213,163,0.20) 50%, rgba(255,255,255,0.13) 52%, transparent 62%);
  transform: translateX(-115%);
  animation: sigShine 7.5s ease-in-out infinite;
}
@keyframes sigShine {
  0%, 62% { transform: translateX(-115%); }
  92%, 100% { transform: translateX(115%); }
}
@media (prefers-reduced-motion: reduce) {
  .sig-store-shine { animation: none; opacity: 0; }
  .sig-store-video.sig-vid-b { transition: none; }
}

.sig-store-content {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 16px 18px;
}
.sig-store-eyebrow {
  display: block; font-family: 'DM Sans', sans-serif;
  font-size: 9px; letter-spacing: 2.6px; text-transform: uppercase;
  color: #f5e6c8; text-shadow: 0 1px 12px rgba(0,0,0,0.85);
}
.sig-store-title {
  /* 30px was sized against the full frame width; inside a 260px card it
     wrapped to three lines. */
  font-family: 'DM Sans', sans-serif; font-size: 23px; font-weight: 800;
  color: #f5e6c8; letter-spacing: -0.3px; line-height: 1.12; margin-top: 6px;
  text-shadow: 0 2px 24px rgba(0,0,0,0.9), 0 0 26px rgba(232,213,163,0.24);
}
.sig-store-line {
  font-family: 'DM Sans', sans-serif; font-size: 11.5px; font-weight: 300;
  color: rgba(255,255,255,0.78); margin-top: 6px; line-height: 1.5;
}
.sig-store-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.sig-chip {
  font-family: 'DM Sans', sans-serif; font-size: 7px; font-weight: 700;
  letter-spacing: 1.8px; text-transform: uppercase; color: rgba(245,230,200,0.9);
  background: rgba(232,213,163,0.13); border: 1px solid rgba(232,213,163,0.4);
  padding: 5px 10px;
}

/* Enter, then the arrow — the label was missing and the disc was gold on
   gold art. */
/* The only thing in a wrapper, and in the far corner from the text. */
.sig-store-enter {
  position: absolute; right: 14px; bottom: 14px; z-index: 4;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 10px 8px 16px;
  border-radius: 999px !important;
  background: rgba(10,16,32,0.42);
  border: 1px solid rgba(255,255,255,0.22);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 12px 30px rgba(0,0,0,0.45);
}
.sig-store-enter-lbl {
  font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase; color: #fff;
}
.sig-store-go {
  width: 30px; height: 30px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50% !important;
  background: #fff;
  box-shadow: 0 6px 16px rgba(0,0,0,0.34);
}
.sig-store-go svg { width: 15px; height: 15px; display: block; }

/* ── The shop ──────────────────────────────────────────────────────
   The page is the Word Atelier's and the Meaning Store's own markup —
   .sub-header.nav-bar, .rm-banner-wrap, .rm-cat-banner, .rm-word-row,
   .ms-grid, .rm-row-vid — so almost nothing needs styling here. Only
   what makes it gold instead of white, and the banner's own caption. */
#sub-signature-store { background: #060c18; }
#sub-signature-store .sub-title { color: #f5e6c8; }
#sub-signature-store .rm-cat-banner {
  border-color: rgba(232,213,163,0.22);
  box-shadow: 0 8px 26px rgba(0,0,0,0.5), 0 0 16px rgba(232,213,163,0.09);
}
#sub-signature-store .rm-cat-banner-title { color: #f5e6c8; }
/* The page background sits behind the rows, the same way the Atelier's
   does — its own art, heavily dimmed so the cards stay the subject. */
#sub-signature-store .sig-bg {
  background-image: url('assets/media/image/nowssb-signature-3589d2cc.webp');
  background-size: cover; background-position: center top;
  opacity: 0.16;
}
/* A row of five is short; keep it a row rather than letting it centre. */
#sub-signature-store .sig-row { justify-content: flex-start !important; }

/* The banner, in the slot the Atelier's slideshow occupies — the
   landscape render, uncaptioned. */
.sig-banner-wrap { position: relative; overflow: hidden; }
.sig-banner-wrap .rm-banner-img {
  width: 100%; height: 100%; object-fit: cover; object-position: center center;
  display: block;
}

/* The Meaning Store's rows are scoped to #msMeaningGrid; this page draws
   the same .ms-grid markup and wants the same treatment, so the rules are
   restated for it rather than the originals being loosened — widening
   them would have changed the coupon pages, which use .ms-grid as a real
   grid on purpose. */
#sigSections .ms-grid {
  display: flex !important; flex-wrap: nowrap !important; gap: 12px !important;
  overflow-x: auto !important; overflow-y: visible !important;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  padding: 6px 0 10px !important; margin: 0 -20px !important;
  padding-left: 20px !important; padding-right: 20px !important;
}
#sigSections .ms-grid::-webkit-scrollbar { display: none; }
#sigSections .ms-card { flex: 0 0 128px !important; width: 128px !important; scroll-snap-align: start; }
#sigSections .ms-card-img { opacity: 1 !important; }

.sig-empty {
  font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 300;
  color: rgba(255,255,255,0.35); padding: 18px 20px;
}

/* ── The detail, on the same page ── */
.sig-detail {
  position: absolute; inset: 0; z-index: 20;
  background: #060c18;
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.22,1,0.36,1);
  pointer-events: none;
}
.sig-detail.open { transform: translateX(0); pointer-events: auto; }
.sig-detail-head {
  flex-shrink: 0; display: flex; align-items: center; gap: 12px;
  padding: max(env(safe-area-inset-top, 14px), 14px) 16px 12px;
  border-bottom: 1px solid rgba(232,213,163,0.16);
}
.sig-detail-head-txt {
  font-family: 'DM Sans', sans-serif; font-size: 16px; font-weight: 800;
  color: #f5e6c8; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sig-detail-body {
  flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 20px 20px calc(110px + env(safe-area-inset-bottom, 0px));
}
.sig-detail-art {
  position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden;
  border: 1.5px solid rgba(232,213,163,0.5);
  box-shadow: 0 14px 40px rgba(0,0,0,0.55), 0 0 26px rgba(232,213,163,0.2);
}
.sig-detail-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sig-detail-badge {
  position: absolute; top: 12px; left: 12px;
  font-family: 'DM Sans', sans-serif; font-size: 8.5px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase; color: #060c18;
  background: rgba(232,213,163,0.94); padding: 4px 10px;
}
.sig-detail-name {
  font-family: 'DM Sans', sans-serif; font-size: 27px; font-weight: 800;
  color: #f5e6c8; letter-spacing: -0.4px; line-height: 1.12; margin-top: 20px;
}
.sig-detail-root {
  font-family: 'DM Sans', sans-serif; font-size: 9.5px; font-weight: 700;
  letter-spacing: 2.2px; text-transform: uppercase;
  color: rgba(232,213,163,0.72); margin-top: 6px;
}
.sig-detail-copy {
  font-family: 'DM Sans', sans-serif; font-size: 12.5px; font-weight: 300;
  color: rgba(255,255,255,0.6); line-height: 1.7; margin-top: 14px;
}
.sig-detail-price {
  font-family: 'DM Sans', sans-serif; font-size: 26px; font-weight: 800;
  color: #fff; margin-top: 18px;
}
.sig-detail-owned {
  font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 600;
  color: #8fe0b8; margin-top: 8px;
}
.sig-detail-btns { display: flex; gap: 10px; margin-top: 18px; }
.sig-btn-ghost, .sig-btn-gold {
  flex: 1; height: 50px !important; min-height: 50px !important;
  border: none; cursor: pointer;
  font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase;
}
.sig-btn-ghost {
  background: rgba(232,213,163,0.1); border: 1px solid rgba(232,213,163,0.45);
  color: #f5e6c8;
}
.sig-btn-ghost:active { background: rgba(232,213,163,0.2); }
.sig-btn-gold {
  background: linear-gradient(135deg, #f0dfb4, #e8d5a3 55%, #d4bd85);
  color: #060c18; box-shadow: 0 8px 24px rgba(232,213,163,0.26);
}
.sig-btn-gold:active { transform: scale(0.98); }
.sig-detail-note {
  font-family: 'DM Sans', sans-serif; font-size: 10.5px; font-weight: 300;
  color: rgba(255,255,255,0.35); line-height: 1.6; margin-top: 14px;
}

/* ══════════════════════════════════════════════════════════════════
   STORE INTRO ART — the three key-art backgrounds.

   These are full-bleed portrait renders with their own wordmark across
   the bottom third, and each intro page then sets its OWN title, blurb
   and Enter button over the top of them. Two things had to change.

   The scrim. .nss-intro-vignette is display:none — the store intro has
   never had one, because the art it used to carry was near-black where
   the copy sits. And nowssb-nm.css already cut .sl-intro-vignette back
   to a top fade only. So all three pages were putting white text
   straight onto a lit render. Each gets a bottom wash sized to the copy.

   The framing. Anchored to the top rather than centred, so what shows is
   the bag and the splash — the part with no type in it — and the art's
   own wordmark falls into the darkened zone instead of colliding with
   the page's headline.
   ══════════════════════════════════════════════════════════════════ */
/* ── Pure black, so the band under the art is not a seam ──────────
   Every one of these renders is black at its edges, and the intro pages
   were #060c18 — navy. With `contain` leaving a band below the art, that
   two-shade difference drew a hard horizontal line across the page. Black
   meets black and there is nothing to see.

   The art is width-limited by `contain`, so its bottom edge is always
   `page width × the render's own aspect`. That is knowable, so the shadow
   under it can be placed exactly rather than guessed: --art is h/w for
   each render. ── */
#nssIntroPage, #rmIntroPage, #msIntroPage, #ebIntroPage, #sigIntroPage {
  background: #000 !important;
}
#nssIntroPage, #rmIntroPage, #msIntroPage, #ebIntroPage { --art: 1.7768; }
#sigIntroPage { --art: 1.5; }

/* The shadow the art casts onto the band below it. Sits across the seam,
   so the last of the render fades out rather than stopping. */
#nssIntroPage .nss-intro-img::after,
#rmIntroPage .rm-intro-bg::after,
#msIntroPage .ms-intro-bg::after,
#ebIntroPage .ms-intro-bg::after,
#sigIntroPage .sig-intro-bg::after {
  content: ''; position: absolute; left: 0; right: 0; pointer-events: none;
  top: calc(100vw * var(--art, 1.7768) - 120px);
  height: 190px;
  background: linear-gradient(to bottom,
    rgba(0,0,0,0) 0%, rgba(0,0,0,0.45) 42%, rgba(0,0,0,0.88) 66%, #000 100%);
}

#nssIntroPage .nss-intro-img,
#rmIntroPage .rm-intro-bg,
#msIntroPage .ms-intro-bg,
#ebIntroPage .ms-intro-bg,
#sigIntroPage .sig-intro-bg {
  /* `cover` on a 941x1672 render inside a 390x844 window crops about a
     fifth off each side and pushes the subject up out of frame — which
     read as "zoomed in too much". `contain` shows the whole render; the
     page's own background fills whatever is left. */
  /* Anchored to the top so the letterbox `contain` leaves lands at the
     bottom, which is where the copy sits on the two intros that still have
     any. Centred, the band split in two and the copy landed on the art. */
  background-position: center top !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-color: #000;
}

/* One wash, three pages. Transparent across the art, solid under the
   words — the stop at 46% is where the copy block starts on the shortest
   phone these run on. */
#nssIntroPage .nss-intro-vignette,
#rmIntroPage .rm-intro-vignette,
#msIntroPage .sl-intro-vignette,
#ebIntroPage .sl-intro-vignette,
#sigIntroPage .sig-intro-vignette {
  display: block !important;
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* No bottom shade at all. It went from a heavy wash, to a lighter one,
     to none: every version of it was dimming the lower half of a render
     that was chosen to be looked at. The copy holds its own on its own
     shadow — see the rule below — and the art is left alone. Only the
     status-bar fade at the very top survives, because that one is
     protecting the clock rather than the copy. */
  background: linear-gradient(to bottom,
    rgba(6,12,24,0.34) 0%,
    rgba(6,12,24,0.00) 13%,
    rgba(6,12,24,0.00) 100%) !important;
}
/* With less wash under it, the eyebrow and the title carry their own
   shadow rather than relying on the gradient alone. */
#nssIntroPage .sl-intro-title, #rmIntroPage .sl-intro-title,
#msIntroPage .sl-intro-title, #sigIntroPage .sl-intro-title,
#ebIntroPage .sl-intro-title,
#nssIntroPage .sl-intro-eyebrow, #rmIntroPage .sl-intro-eyebrow,
#msIntroPage .sl-intro-eyebrow, #sigIntroPage .sl-intro-eyebrow,
#ebIntroPage .sl-intro-eyebrow,
#nssIntroPage .sl-intro-desc, #rmIntroPage .sl-intro-desc,
#msIntroPage .sl-intro-desc, #sigIntroPage .sl-intro-desc,
#ebIntroPage .sl-intro-desc,
#nssIntroPage .sl-intro-stat, #rmIntroPage .sl-intro-stat,
#msIntroPage .sl-intro-stat, #sigIntroPage .sl-intro-stat,
#ebIntroPage .sl-intro-stat {
  /* Three shadows: a wide soft one to lift the text off whatever is behind
     it, and two tight dark ones so the letterforms stay crisp against a
     light patch of render — which now happens, since nothing is dimming
     the art underneath any more. */
  text-shadow: 0 2px 26px rgba(0,0,0,0.98), 0 1px 4px rgba(0,0,0,0.95),
               0 0 12px rgba(0,0,0,0.9);
}
/* The small grey copy was the only part that stopped reading once the wash
   came off — it sits across the brightest band of every one of these
   renders. Brightened rather than shaded, so the art stays untouched. */
#nssIntroPage .sl-intro-desc, #rmIntroPage .sl-intro-desc,
#msIntroPage .sl-intro-desc, #sigIntroPage .sl-intro-desc,
#ebIntroPage .sl-intro-desc {
  color: rgba(255,255,255,0.94) !important;
}
#nssIntroPage .sl-intro-stat, #rmIntroPage .sl-intro-stat,
#msIntroPage .sl-intro-stat, #sigIntroPage .sl-intro-stat,
#ebIntroPage .sl-intro-stat {
  color: rgba(255,255,255,0.85) !important;
}

/* ══════════════════════════════════════════════════════════════════
   THE SIGNATURE INTRO — the way into the third shop.

   Structurally the Word Atelier's intro: an absolutely-positioned cover
   over the shop, faded out by a class rather than removed, so Enter is a
   dissolve and coming back is instant. Gold where the other two are
   white, because that is the only thing that separates this shop from
   them.
   ══════════════════════════════════════════════════════════════════ */
.sig-intro-page {
  position: absolute; inset: 0; z-index: 30;
  display: flex; flex-direction: column;
  background: #060c18; overflow: hidden;
  transition: opacity 0.48s cubic-bezier(0.4,0,0.2,1);
}
.sig-intro-page.sig-intro-hidden { opacity: 0; pointer-events: none; }

.sig-intro-bg {
  position: absolute; inset: 0; z-index: 0;
  background-image: url('assets/media/image/intro-signature-25cf5fe5.webp');
  background-size: cover; background-position: center top;
  background-repeat: no-repeat;
  animation: slIntroBgSettle 1.6s 0s both cubic-bezier(0.22,1,0.36,1);
}
/* Positioning only — the wash itself is shared with the other three
   intros above, so they can never drift apart again. */
.sig-intro-vignette { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.sig-intro-page .sl-intro-top,
.sig-intro-page .sl-intro-bottom { position: relative; z-index: 2; }

.sig-intro-tag { color: #f5e6c8 !important; border-color: rgba(232,213,163,0.4) !important; }
.sig-intro-eyebrow { color: rgba(245,230,200,0.85) !important; }
.sig-intro-title span, .sig-intro-title { color: #fff; }
.sig-intro-divider { background: rgba(232,213,163,0.55) !important; }
/* Gold Enter, matching the shop it opens. */
.sig-intro-enter {
  background: linear-gradient(135deg, #f0dfb4, #e8d5a3 55%, #d4bd85) !important;
  border-color: rgba(232,213,163,0.9) !important;
  box-shadow: 0 10px 30px rgba(232,213,163,0.26);
}
.sig-intro-enter .sl-intro-enter-label { color: #060c18 !important; }

/* The Signature page's banner line, top-left over the empty half of the
   render. No wrapper — the render is black there. */
.sig-banner-line {
  position: absolute; top: 14px; left: 16px; right: 40%; z-index: 2;
  font-family: 'DM Sans', sans-serif; font-size: 19px; font-weight: 800;
  color: #f5e6c8; letter-spacing: -0.2px; line-height: 1.18;
  text-shadow: 0 2px 20px rgba(0,0,0,0.95), 0 1px 4px rgba(0,0,0,0.9);
}

/* The request banner that closes the shop, with a line above and below —
   the same labelling the store uses around its own sections. */
.sig-req-lead, .sig-req-tail {
  font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 700;
  letter-spacing: 2.4px; text-transform: uppercase;
  color: rgba(245,230,200,0.72); padding: 0 20px;
}
.sig-req-lead { margin: 26px 0 10px; }
.sig-req-tail {
  margin: 10px 0 4px; font-weight: 300; letter-spacing: 1.2px;
  text-transform: none; font-size: 11.5px; color: rgba(255,255,255,0.45);
}
#sigSections .sig-req-banner { margin: 0 20px; }

/* ══════════════════════════════════════════════════════════════════
   FASHION PLUS — the mode, its page, and the phone on that page.

   Two halves. The first is the page (.fp-*), which exists whether or not
   the mode is on. The second is `body.fashplus`, six rules at the end
   that are the mode itself.

   The phone is worth explaining. assets/media/image/phone-frame-f577eb5e.png is a
   photograph of a handset with its studio backdrop cut away, so what is
   left is the metal and the black glass. The wallpaper does NOT go behind
   it — the frame's own screen is opaque black and would hide it — it goes
   in .fp-screen, a box positioned over exactly where that glass is:

     left 5.12%   top 2.07%   width 89.6%   height 96.6%

   measured off the file (the screen's black runs x 37→684 of 722 and
   y 31→1477 of 1496). So the frame image sits underneath and only its
   rails show, which is why the frame can stay perfectly still while
   everything inside it changes.
   ══════════════════════════════════════════════════════════════════ */




/* ── The stage ─────────────────────────────────────────────────────
   The two side phones are absolutely placed and half off the edges, the
   framed one is the flow. The whole stage is sized off the frame's own
   aspect ratio (722 / 1496) so nothing has to be told a pixel height. */
.fp-stage {
  position: relative; margin: 24px auto 4px; width: 100%;
  max-width: 420px; padding: 0 0 10px;
  display: flex; align-items: center; justify-content: center;
}
.fp-phone {
  position: relative; z-index: 3; width: 58%;
  aspect-ratio: 722 / 1496;
  filter: drop-shadow(0 26px 46px rgba(0,0,0,0.75));
}
.fp-frame {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; display: block; pointer-events: none;
}
.fp-screen {
  position: absolute; z-index: 2; overflow: hidden;
  left: 5.12%; top: 2.07%; width: 89.6%; height: 96.6%;
  border-radius: 8.5% / 4.1% !important;
  background: #06080f;
}
.fp-wall {
  position: absolute; inset: 0; opacity: 0;
  background-size: cover; background-position: center center;
  transition: opacity 0.9s cubic-bezier(0.4,0,0.2,1);
}
.fp-wall.on { opacity: 1; }
.fp-screen-shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,0.28) 0%,
    rgba(0,0,0,0.02) 26%, rgba(0,0,0,0.06) 52%, rgba(0,0,0,0.62) 100%);
}
/* The frame has a notch of its own, but .fp-screen covers the glass it is
   drawn on, so it is redrawn here — over the wallpaper, where a real one
   sits. Speaker slot and camera dot included, same as the render. */
.fp-notch {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 34%; height: 3.4%; z-index: 3;
  background: #05070c; border-radius: 0 0 12px 12px !important;
  display: flex; align-items: center; justify-content: center; gap: 5px;
}
.fp-notch::before {
  content: ''; width: 22%; height: 13%; min-height: 2px;
  border-radius: 999px !important; background: rgba(160,170,190,0.55);
}
.fp-notch::after {
  content: ''; width: 5px; height: 5px; border-radius: 50% !important;
  background: #1c4fd8; box-shadow: inset 0 0 2px rgba(0,0,0,0.6);
}

/* Side phones — no frame, just the glass, tilted away from the middle. */
.fp-side {
  position: absolute; top: 8%; width: 44%; aspect-ratio: 9 / 19;
  border-radius: 22px !important; overflow: hidden; z-index: 1;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 20px 40px rgba(0,0,0,0.6);
}
.fp-side-l { left: -12%; transform: perspective(900px) rotateY(11deg) scale(0.92); }
.fp-side-r { right: -12%; transform: perspective(900px) rotateY(-11deg) scale(0.92); }
.fp-side-wall {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  transition: opacity 0.9s cubic-bezier(0.4,0,0.2,1);
}
.fp-side-shade {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.34), rgba(0,0,0,0.7));
}

/* ── The lockscreen inside the glass ── */
.fp-lock {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  display: flex; flex-direction: column;
  padding: 4.5% 5% 4%; box-sizing: border-box;
  font-family: 'DM Sans', sans-serif;
}
.fp-status {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 7px; font-weight: 500; color: rgba(255,255,255,0.9);
}
.fp-status-r { display: flex; align-items: center; gap: 3px; }
.fp-status-r svg { width: 11px; height: 6px; }
.fp-batt {
  width: 9px; height: 5px; border: 1px solid rgba(255,255,255,0.8);
  border-radius: 1px !important; display: inline-block;
}
.fp-clock {
  font-size: 30px; font-weight: 400; color: #fff; letter-spacing: -1px;
  line-height: 1.05; margin-top: 7%; text-shadow: 0 2px 14px rgba(0,0,0,0.55);
}
.fp-date {
  font-size: 8px; font-weight: 400; color: rgba(255,255,255,0.88);
  margin-top: 1px; text-shadow: 0 1px 8px rgba(0,0,0,0.6);
}
.fp-lock-bottom { margin-top: auto; }

/* The strip above the card: source on the left, section on the right. */
.fp-glass-strip {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 4px 3px;
  font-size: 6px; font-weight: 600; letter-spacing: 0.6px;
  color: rgba(255,255,255,0.72);
}
.fp-glass-sec { display: inline-flex; align-items: center; gap: 3px; }
.fp-glass-sec svg { width: 7px; height: 5px; }

/* The card itself — this is the piece being copied. Frosted, hairline
   bright edge, content left and a rounded thumbnail right. */
.fp-glass {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 8px; border-radius: 10px !important;
  background: rgba(255,255,255,0.13);
  border: 1px solid rgba(255,255,255,0.18);
  -webkit-backdrop-filter: blur(14px) saturate(1.35);
  backdrop-filter: blur(14px) saturate(1.35);
  box-shadow: 0 8px 20px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.22);
}
.fp-glass-txt { flex: 1; min-width: 0; }
.fp-glass-tag {
  display: flex; align-items: center; gap: 3px;
  font-size: 5.5px; font-weight: 500; color: rgba(255,255,255,0.8);
  letter-spacing: 0.2px;
}
.fp-glass-dot {
  width: 6px; height: 6px; border-radius: 50% !important; flex-shrink: 0;
  background: #e0483c; box-shadow: 0 0 0 1px rgba(255,255,255,0.35);
}
.fp-glass-head {
  font-size: 8.5px; font-weight: 700; color: #fff; margin-top: 2px;
  letter-spacing: -0.1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fp-glass-sub {
  font-size: 6px; font-weight: 300; color: rgba(255,255,255,0.62); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fp-glass-thumb {
  width: 26px; height: 26px; flex-shrink: 0; border-radius: 7px !important;
  background: linear-gradient(140deg, #f6d98f, #d9a13c);
  background-size: cover; background-position: center;
  border: 1px solid rgba(255,255,255,0.3);
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}

/* The floating pill of shortcuts, and the two corner icons under it. */
.fp-dock {
  margin: 7px auto 0; width: fit-content;
  display: flex; align-items: center; gap: 8px;
  padding: 4px 9px; border-radius: 999px !important;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.16);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.fp-dock-ic { width: 9px; height: 9px; display: block; }
.fp-dock-ic svg { width: 100%; height: 100%; display: block; }
.fp-dock-dot {
  width: 3px; height: 3px; border-radius: 50% !important;
  background: rgba(255,255,255,0.8);
}
.fp-lock-nav {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 7px; padding: 0 2px;
}
.fp-lock-nav-ic { width: 11px; height: 11px; }
.fp-lock-nav-ic svg { width: 100%; height: 100%; display: block; }

/* ── The switch ── */
.fp-switch-card {
  margin: 22px 16px 0; padding: 16px 18px; box-sizing: border-box;
  border-radius: 20px !important;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.13);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  backdrop-filter: blur(18px) saturate(1.25);
  box-shadow: 0 16px 40px rgba(0,0,0,0.4);
}
.fp-switch-row { display: flex; align-items: center; gap: 14px; cursor: pointer; }
.fp-switch-txt { flex: 1; min-width: 0; }
.fp-switch-name {
  font-family: 'DM Sans', sans-serif; font-size: 17px; font-weight: 700; color: #fff;
}
.fp-switch-state {
  font-family: 'DM Sans', sans-serif; font-size: 11.5px; font-weight: 300;
  color: rgba(255,255,255,0.5); margin-top: 3px; line-height: 1.45;
}
.fp-switch {
  width: 52px; height: 30px; flex-shrink: 0; border-radius: 999px !important;
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2);
  position: relative; transition: background 0.25s ease, border-color 0.25s ease;
}
.fp-switch-knob {
  position: absolute; top: 3px; left: 3px; width: 22px; height: 22px;
  border-radius: 50% !important; background: #fff;
  box-shadow: 0 3px 8px rgba(0,0,0,0.4);
  transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
}
.fp-switch.on { background: rgba(240,192,90,0.9); border-color: rgba(240,192,90,0.9); }
.fp-switch.on .fp-switch-knob { transform: translateX(22px); }
.fp-switch-note {
  font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 300;
  color: rgba(240,192,90,0.75); line-height: 1.5; margin-top: 12px; display: none;
}
.fp-switch-note.show { display: block; }

/* ── The warning ── */
.fp-warn {
  margin: 16px 16px 0; padding: 16px 18px; box-sizing: border-box;
  border-radius: 18px !important;
  background: rgba(240,192,90,0.07);
  border: 1px solid rgba(240,192,90,0.3);
  border-left: 3px solid rgba(240,192,90,0.75);
}
.fp-warn-head {
  display: flex; align-items: center; gap: 9px;
  font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 700;
  letter-spacing: 2.2px; text-transform: uppercase; color: #f0c05a;
}
.fp-warn-ic { width: 17px; height: 17px; flex-shrink: 0; }
.fp-warn-ic svg { width: 100%; height: 100%; display: block; }
.fp-warn-body {
  font-family: 'DM Sans', sans-serif; font-size: 12.5px; font-weight: 300;
  color: rgba(255,255,255,0.68); line-height: 1.75; margin-top: 11px;
}
.fp-warn-body b { font-weight: 700; color: rgba(255,235,190,0.95); }
.fp-warn-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }
.fp-warn-chip {
  font-family: 'DM Sans', sans-serif; font-size: 8px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase; color: rgba(240,192,90,0.85);
  background: rgba(240,192,90,0.1); border: 1px solid rgba(240,192,90,0.3);
  padding: 5px 10px; border-radius: 999px !important;
}

.fp-list { margin: 12px 16px 0; display: flex; flex-direction: column; gap: 9px; }
.fp-item {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 14px 16px; box-sizing: border-box; border-radius: 16px !important;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.1);
}
.fp-item-n {
  width: 22px; height: 22px; flex-shrink: 0; border-radius: 50% !important;
  display: flex; align-items: center; justify-content: center;
  font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 700;
  color: #06080f; background: rgba(240,192,90,0.9); margin-top: 1px;
}
.fp-item-t {
  font-family: 'DM Sans', sans-serif; font-size: 13.5px; font-weight: 600;
  color: rgba(255,255,255,0.92); line-height: 1.35;
}
.fp-item-s {
  font-family: 'DM Sans', sans-serif; font-size: 11.5px; font-weight: 300;
  color: rgba(255,255,255,0.48); line-height: 1.65; margin-top: 4px;
}

/* ══ THE MODE ══════════════════════════════════════════════════════
   #fpBgVideo is one fixed element created by app/js/part076.js, sitting
   exactly where .app-bg sits. Everything below is what turning the mode
   on does — and it is deliberately short, because the mode only touches
   backgrounds.

   Sub-screens are opaque (#060c18) and stack above the fixed video, so a
   page can only show it if it is made transparent. part076.js tags the
   ones that were carrying a photograph with data-fp-img, and ONLY those
   are opened up. A page with a solid colour, and a page already running
   its own clip, are never selected — which is the rule you asked for. */
#fpBgVideo {
  position: fixed; inset: 0; z-index: 0; display: none;
  width: 100%; height: 100%; object-fit: cover;
  transform: translateZ(0); backface-visibility: hidden;
}
body.fashplus #fpBgVideo { display: block; }

/* ── The vignette ──
   Created next to the clip by app/js/part076.js. The clip is z-index 0 and
   every .screen is z-index 10, so this sits between them and darkens the
   frame's edges only — nothing the app draws on top is touched. Two layers:
   a radial that pulls the corners down, and a light top-and-bottom weight
   so the header and the tab bar have something to sit on. */
#fpBgVeil {
  position: fixed; inset: 0; z-index: 1; display: none;
  pointer-events: none;
  background:
    radial-gradient(88% 62% at 50% 45%,
      rgba(0,0,0,0) 30%, rgba(0,0,0,0.14) 58%, rgba(0,0,0,0.34) 80%, rgba(0,0,0,0.58) 100%),
    linear-gradient(180deg,
      rgba(0,0,0,0.26) 0%, rgba(0,0,0,0) 20%, rgba(0,0,0,0) 76%, rgba(0,0,0,0.34) 100%);
}
body.fashplus #fpBgVeil { display: block; }

/* Page backgrounds is a part switch of its own. With it off the film is not
   just paused — a paused <video> is still a frame covering the page — so
   both layers go, and the rules below hand the tagged pages their
   photographs back. app/js/part076.js sets the class. */
body.fashplus.fp-bg-off #fpBgVideo,
body.fashplus.fp-bg-off #fpBgVeil { display: none !important; }
body.fashplus #appBg { opacity: 0 !important; }
body.fashplus #appBgLayer2 { opacity: 0 !important; }

/* The film on every page was tried three ways and every one of them cost
   more than it gave: pages went dark, entry screens lost their artwork,
   and the extra clip made the app heavy. It is gone. Fashion Plus keeps
   what it always had — the fixed clip behind the home, and the pages that
   carry a photograph of their own showing it through, which is the rule
   directly below. */

/* The tagged pages: let the fixed clip through, keep their own scrim.
   Only while Page backgrounds is on — with it off these pages are meant to
   be wearing their photographs again. */
/* !important, and colour and image stated apart rather than as `background`.
   A page is free to set its own surface with an id and an !important of its
   own — several do — and an id beats every class in this file, so without
   this the tag was set, the page stayed opaque, and the film never arrived.
   Splitting the two also leaves any gradient overlay a page draws alone. */
body.fashplus:not(.fp-bg-off) .sub-screen[data-fp-img] {
  background-color: transparent !important;
  background-image: none !important;
}
body.fashplus:not(.fp-bg-off) .sub-screen[data-fp-img] > .sub-screen-bg[data-fp-img] { background-image: none !important; }

/* ── The solid pages ──
   The pages with no photograph of their own — Word Science, My Progress,
   Daily Streak, Profile, the two stores — used to stop the film dead, by
   the rule stated above. They show it now too.

   Their own #060c18 was not only their background, it was the contrast
   under their type, so taking it away has to put something back: a scrim,
   at the same 0.72 the app already uses for exactly this
   (body.nwsb-custom-fashion-bg .qa-page-bg::after).

   z-index -1 is what makes the scrim safe on pages nobody rewrote for it.
   A positioned pseudo-element at 0 or above paints over every static child,
   which would have veiled the page's own content instead of the film behind
   it; below zero it sits above the transparent background and under
   everything the page draws. .sub-screen already carries `contain: paint`
   and a z-index, so it is its own stacking context and the -1 cannot escape
   it — and the film is outside that context, which is why it still shows. */
body.fashplus:not(.fp-bg-off) .sub-screen[data-fp-solid] {
  background-color: transparent !important;
  background-image: none !important;
}
/* A page whose own scroller or shell carries the surface instead of the
   screen itself — the film stops at an opaque child just as surely as at an
   opaque parent, and several pages are built that way. Only the full-bleed
   shells are listed; cards and rows keep their fills, which is what makes
   the page still readable over a moving picture. */
body.fashplus:not(.fp-bg-off) .sub-screen[data-fp-solid] > .sub-body,
body.fashplus:not(.fp-bg-off) .sub-screen[data-fp-solid] > .bgp-content,
body.fashplus:not(.fp-bg-off) .sub-screen[data-fp-solid] > .sub-screen-bg {
  background-color: transparent !important;
  background-image: none !important;
}
body.fashplus:not(.fp-bg-off) .sub-screen[data-fp-solid]::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background: rgba(6,12,24,0.72);
}

@media (prefers-reduced-motion: reduce) {
  body.fashplus #fpBgVideo { display: none; }
  /* No clip, no vignette — the still background underneath has its own. */
  body.fashplus #fpBgVeil { display: none; }
  body.fashplus #appBg { opacity: 1 !important; }
  .fp-wall, .fp-side-wall { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════
   THE FULL-SCREEN SHEET (.nwsb-fs) — the interstitial shape.

   A dark blurred field, one close cross alone in the top right, the
   artwork, a heavy all-caps line, one grey line, and full-width white
   pills stacked at the bottom. Everything scrolls between the cross and
   the pills, because two of the three uses carry a research proposal and
   a fixed-height card would have cut it in half.

   Built by app/js/part077.js and used by the Fashion Plus caution and by
   both stores' disclaimers.
   ══════════════════════════════════════════════════════════════════ */
.nwsb-fs {
  position: fixed; inset: 0; z-index: 12000;
  opacity: 0; transition: opacity 0.26s ease;
  font-family: 'DM Sans', sans-serif;
}
.nwsb-fs.on { opacity: 1; }
.nwsb-fs-back {
  position: absolute; inset: 0;
  background: rgba(8,8,10,0.96);
  -webkit-backdrop-filter: blur(26px) saturate(0.9);
  backdrop-filter: blur(26px) saturate(0.9);
}
/* Alone in the corner, white disc, dark cross — the only chrome. */
.nwsb-fs-x {
  position: absolute; z-index: 3;
  top: max(env(safe-area-inset-top, 14px), 14px); right: 16px;
  width: 42px; height: 42px; padding: 0; border: none; cursor: pointer;
  border-radius: 50% !important; background: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(0,0,0,0.5);
}
.nwsb-fs-x svg { width: 19px; height: 19px; display: block; }
.nwsb-fs-x:active { transform: scale(0.93); }

.nwsb-fs-scroll {
  position: absolute; inset: 0; z-index: 2; overflow-y: auto;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  padding: calc(max(env(safe-area-inset-top, 14px), 14px) + 60px) 20px
           calc(max(env(safe-area-inset-bottom, 20px), 20px) + 20px);
  display: flex; flex-direction: column; align-items: center;
}
.nwsb-fs-scroll::-webkit-scrollbar { display: none; }

.nwsb-fs-art {
  width: 100%; max-width: 340px; aspect-ratio: 3 / 4;
  overflow: hidden; border-radius: 4px !important; flex-shrink: 0;
  box-shadow: 0 24px 60px rgba(0,0,0,0.7);
}
.nwsb-fs-art img { width: 100%; height: 100%; object-fit: cover; display: block; }

.nwsb-fs-head {
  font-size: 25px; font-weight: 800; letter-spacing: -0.2px;
  text-transform: uppercase; color: #fff; text-align: center;
  line-height: 1.12; margin-top: 26px; max-width: 420px;
}
.nwsb-fs-sub {
  font-size: 14px; font-weight: 400; color: rgba(255,255,255,0.55);
  text-align: center; line-height: 1.55; margin-top: 14px; max-width: 380px;
}

/* The reading half — only present where there is something to read. */
.nwsb-fs-body {
  width: 100%; max-width: 460px; margin-top: 24px;
  text-align: left; color: rgba(255,255,255,0.62);
}
.nwsb-fs-body p {
  font-size: 13px; font-weight: 300; line-height: 1.8; margin: 0 0 12px;
}
.nwsb-fs-body b { font-weight: 700; color: rgba(255,255,255,0.9); }
.nwsb-fs-kicker {
  font-size: 9px; font-weight: 700; letter-spacing: 3.4px;
  text-transform: uppercase; color: rgba(232,213,163,0.8); margin-bottom: 8px;
}
.nwsb-fs-lead {
  font-size: 16px !important; font-weight: 600 !important;
  color: rgba(255,255,255,0.92) !important; line-height: 1.45 !important;
  margin-bottom: 20px !important;
}
.nwsb-fs-h {
  font-size: 10px; font-weight: 700; letter-spacing: 2.6px;
  text-transform: uppercase; color: rgba(255,255,255,0.42);
  margin: 20px 0 9px; padding-bottom: 7px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.nwsb-fs-keys { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; }
.nwsb-fs-key {
  font-size: 10px; font-weight: 500; letter-spacing: 0.4px;
  color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.14);
  padding: 6px 11px; border-radius: 999px !important;
}
.nwsb-fs-rule {
  height: 1px; margin: 22px 0 16px;
  background: linear-gradient(90deg, rgba(255,255,255,0.22), rgba(255,255,255,0));
}
.nwsb-fs-note {
  font-size: 12px !important; color: rgba(255,255,255,0.45) !important;
  line-height: 1.75 !important;
}

/* Full-width white pills, stacked, nothing between them. */
.nwsb-fs-acts {
  width: 100%; max-width: 460px; margin-top: 28px;
  display: flex; flex-direction: column; gap: 12px;
}
.nwsb-fs-btn {
  width: 100%; border: none; cursor: pointer; font-family: 'DM Sans', sans-serif;
  font-size: 15px; font-weight: 700; letter-spacing: 0.2px; color: #0b0b0b;
  background: #fff; padding: 17px 20px; border-radius: 999px !important;
  transition: background 0.16s, transform 0.12s;
}
.nwsb-fs-btn:active { background: #e6e6e6; transform: scale(0.988); }
.nwsb-fs-btn.ghost {
  background: transparent; color: rgba(255,255,255,0.72);
  border: 1px solid rgba(255,255,255,0.24);
}
.nwsb-fs-btn.ghost:active { background: rgba(255,255,255,0.08); }

@media (max-width: 360px) {
  .nwsb-fs-head { font-size: 22px; }
  .nwsb-fs-art { max-width: 280px; }
}
.fp-warn { cursor: pointer; }
.fp-warn:active { transform: scale(0.995); }
.fp-warn-chip.fp-warn-more {
  background: rgba(240,192,90,0.9); color: #06080f; border-color: rgba(240,192,90,0.9);
}

/* ── Fashion Plus, as a section on the Fashion home ────────────────
   Same furniture as the Reader and eBooks sections above it — the spill,
   the visual, the text block, the black banner — so it reads as part of
   the page rather than an advert bolted onto it. */
.fps-wrap {
  width: calc(100% - 32px); margin: 22px 16px 0; box-sizing: border-box;
  display: flex; flex-direction: column;
}
.fps-txt {
  display: flex; flex-direction: column; padding: 16px 2px 0; cursor: pointer;
}
.fps-wrap .fp-stage { margin-top: 14px; }
.fps-wrap .fp-switch-card { margin: 16px 0 0; }
.fps-banner { margin-top: 12px; }

/* The switch is also a Customize-hub mode switch (data-k="fashplus"), so
   it is painted by cuPaintModes() as well as by its own file. Both add
   `on`; these two rules are what that class means here. */
/* The switch wears .fp-switch and nothing else. It used to also carry
   .cust-mode-sw so the Customize hub could paint it — and that was the bug
   in your screenshot: .cust-mode-sw is a 42x24 track whose knob moves with
   `left: 20px`, .fp-switch is a 52x30 track whose knob moves with
   `translateX(22px)`, and an element wearing both got 42px of travel in a
   52px track. The knob ended up outside the pill. app/js/part076.js paints
   this one directly instead. */

/* ── Fashion Plus, the page behind the section's Enter ─────────────── */
#sub-fashion-plus { background: #05070d; }
.fp-page-vid {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.fp-page-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(5,7,13,0.74) 0%, rgba(5,7,13,0.56) 30%,
    rgba(5,7,13,0.70) 70%, rgba(5,7,13,0.92) 100%);
}
#sub-fashion-plus .sub-header { position: relative; z-index: 3; }
#fpBody { position: relative; z-index: 2; }

/* The intro. Same bones as every other intro in the app — art, a rule, a
   blurb, the stats, one button — over the Fashion Plus key art. */
.fpp-intro {
  position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column;
  background: #05070d; overflow: hidden;
  transition: opacity 0.46s cubic-bezier(0.4,0,0.2,1);
}
.fpp-intro-bg {
  position: absolute; inset: 0; z-index: 0;
  background-image: url('assets/media/image/fp-intro-22a4699e.webp');
  background-size: cover; background-position: center center;
  animation: slIntroBgSettle 1.6s 0s both cubic-bezier(0.22,1,0.36,1);
}
.fpp-intro-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom,
    rgba(5,7,13,0.42) 0%, rgba(5,7,13,0.04) 22%, rgba(5,7,13,0.00) 44%,
    rgba(5,7,13,0.42) 68%, rgba(5,7,13,0.88) 86%, rgba(5,7,13,0.97) 100%);
}
.fpp-intro .sl-intro-top, .fpp-intro .sl-intro-bottom { position: relative; z-index: 10; }
.fpp-intro-tag { color: #d9a3ff; border-color: rgba(190,120,255,0.4); }
.fpp-intro-divider { background: linear-gradient(90deg, rgba(190,120,255,0.7), rgba(190,120,255,0.06)); }
.fpp-enter { background: #fff; border-color: #fff; }

/* The page's own head, under the intro. */
.fpp-hero { padding: 24px 20px 0; }
.fpp-hero-ic {
  width: 58px; height: 58px; border-radius: 50% !important; overflow: hidden;
  border: 1px solid rgba(240,192,90,0.35); box-shadow: 0 10px 26px rgba(0,0,0,0.5);
}
.fpp-hero-ic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fpp-hero-title {
  font-family: 'DM Sans', sans-serif; font-size: 30px; font-weight: 800;
  color: #fff; letter-spacing: -0.6px; line-height: 1.12; margin-top: 16px;
  text-shadow: 0 4px 30px rgba(0,0,0,0.8);
}
.fpp-hero-sub {
  font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 300;
  color: rgba(255,255,255,0.55); line-height: 1.7; margin-top: 12px; max-width: 320px;
}
.fpp-list-head {
  font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,0.4);
  padding: 26px 20px 0;
}
#fpBody .fp-list { margin: 12px 16px 0; }
#fpBody .fp-switch-card, #fpBody .fp-warn { margin-left: 16px; margin-right: 16px; }
#fpBody .fp-switch-card { margin-top: 22px; }

/* The section's Enter row — the label on the left, the app's own pill on
   the right, matching the Reader and eBooks sections' Enter. */
.fps-enter-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 14px; padding: 0 2px;
}
.fps-enter-lbl {
  font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 500;
  letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.42);
}
.fps-enter { flex-shrink: 0; cursor: pointer; }

/* ── Fashion Plus: the small way in on the Fashion home ────────────── */
.fps-mini {
  width: calc(100% - 32px); margin: 20px 16px 0; box-sizing: border-box;
  display: flex; align-items: center; gap: 14px; cursor: pointer;
  padding: 15px 16px; border-radius: 20px !important;
  background: linear-gradient(135deg, rgba(240,192,90,0.09), rgba(10,16,32,0.5));
  border: 1px solid rgba(240,192,90,0.26);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
}
.fps-mini:active { transform: scale(0.994); }
.fps-mini-ic { width: 44px; height: 44px; flex-shrink: 0; border-radius: 50% !important; overflow: hidden; }
.fps-mini-ic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fps-mini-txt { flex: 1; min-width: 0; }
.fps-mini-eyebrow {
  font-family: 'DM Sans', sans-serif; font-size: 9px; font-weight: 700;
  letter-spacing: 2.4px; text-transform: uppercase; color: rgba(240,192,90,0.7);
}
.fps-mini-name {
  font-family: 'DM Sans', sans-serif; font-size: 17px; font-weight: 700;
  color: #fff; letter-spacing: 0.2px; margin-top: 2px;
}
.fps-mini-sub {
  font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 300;
  color: rgba(255,255,255,0.45); margin-top: 3px; line-height: 1.4;
}
.fps-mini-enter { flex-shrink: 0; }

/* ── The phone, now on the page ── */
.fpp-stage-wrap { padding: 8px 0 0; }
.fpp-stage-wrap .fp-stage { margin-top: 0; }
/* The clip slide. Same box as the two still layers, same fade. */
.fp-wall-vid {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; opacity: 0;
  transition: opacity 0.9s cubic-bezier(0.4,0,0.2,1);
}
.fp-wall-vid.on { opacity: 1; }

/* ── One line to the caution, which is a whole screen of its own ── */
.fpp-caution-row {
  display: flex; align-items: center; gap: 11px; cursor: pointer;
  margin: 14px 16px 0; padding: 14px 16px; box-sizing: border-box;
  border-radius: 16px !important;
  background: rgba(240,192,90,0.07);
  border: 1px solid rgba(240,192,90,0.28);
}
.fpp-caution-row:active { background: rgba(240,192,90,0.13); }
.fpp-caution-ic { width: 18px; height: 18px; flex-shrink: 0; }
.fpp-caution-ic svg { width: 100%; height: 100%; display: block; }
.fpp-caution-txt {
  flex: 1; font-family: 'DM Sans', sans-serif; font-size: 12.5px;
  font-weight: 500; color: rgba(255,235,190,0.9); letter-spacing: 0.1px;
}
.fpp-caution-go { color: rgba(240,192,90,0.9); font-size: 15px; flex-shrink: 0; }

/* The icon carries its own light — no ring, no drop shadow under it. */
.fpp-hero-ic { border: none !important; box-shadow: none !important; }
.fps-mini-ic { box-shadow: none !important; border: none !important; }
.spill-circle img, .nmh-sec-banner-icon img { box-shadow: none !important; }

/* ── Fashion Plus: the changes, on a rail ──────────────────────────
   Seven cards swiped rather than seven cards scrolled past — the same
   shape the Fashion Background picker uses, snapping, with a counter and
   dots underneath reporting where the finger got to. */
.fpp-rail {
  display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; padding: 12px 16px 4px; margin: 0;
}
.fpp-rail::-webkit-scrollbar { display: none; }
.fpp-card {
  flex: 0 0 78%; max-width: 320px; scroll-snap-align: center;
  box-sizing: border-box; padding: 18px 18px 20px;
  border-radius: 18px !important;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.12);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 14px 34px rgba(0,0,0,0.42);
}
.fpp-card-n {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50% !important;
  font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 700;
  color: #06080f; background: rgba(240,192,90,0.92); margin-bottom: 12px;
}
.fpp-card-t {
  font-family: 'DM Sans', sans-serif; font-size: 16px; font-weight: 700;
  color: rgba(255,255,255,0.94); line-height: 1.3;
}
.fpp-card-s {
  font-family: 'DM Sans', sans-serif; font-size: 12.5px; font-weight: 300;
  color: rgba(255,255,255,0.5); line-height: 1.7; margin-top: 8px;
}
.fpp-rail-foot {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 12px 20px 0;
}
.fpp-dots { display: flex; align-items: center; gap: 5px; }
.fpp-dot {
  width: 5px; height: 5px; border-radius: 999px !important;
  background: rgba(255,255,255,0.2); transition: width 0.22s, background 0.22s;
}
.fpp-dot.on { width: 18px; background: rgba(240,192,90,0.9); }
.fpp-count {
  font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 400;
  color: rgba(255,255,255,0.42); letter-spacing: 0.4px;
}
.fpp-banner { margin: 26px 16px 0; }

/* ── Fashion Plus: choose what moves ───────────────────────────────── */
.fpp-parts-head {
  font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,0.4);
  padding: 24px 20px 0;
}
.fpp-parts { margin: 12px 16px 0; display: flex; flex-direction: column; gap: 8px; }
.fpp-part {
  display: flex; align-items: center; gap: 14px; cursor: pointer;
  padding: 14px 16px; box-sizing: border-box; border-radius: 16px !important;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.1);
  transition: opacity 0.22s;
}
.fpp-part:active { background: rgba(255,255,255,0.08); }
.fpp-part-idle { opacity: 0.45; }
.fpp-part-txt { flex: 1; min-width: 0; }
.fpp-part-t {
  font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 600;
  color: rgba(255,255,255,0.92); line-height: 1.3;
}
.fpp-part-s {
  font-family: 'DM Sans', sans-serif; font-size: 11.5px; font-weight: 300;
  color: rgba(255,255,255,0.46); line-height: 1.55; margin-top: 3px;
}
/* The smaller switch the piece rows wear. Same shape, 0.8 scale, and its
   own travel — the knob must land inside this track, not the big one's. */
.fp-switch-sm { width: 42px; height: 25px; }
.fp-switch-sm .fp-switch-knob { top: 2.5px; left: 2.5px; width: 19px; height: 19px; }
.fp-switch-sm.on .fp-switch-knob { transform: translateX(17px); }

/* A piece switched off keeps its shipped look — the marker class comes off
   the element (app/js/part066.js), which reverts every rule at once. The
   routines clip has no marker of its own, so it is hidden by body class. */
body.fpoff-routines :is(#home, .stw-prev-stage) .rt-vid-banner { display: none !important; }

/* ── The icon: a rounded square, no wrapper, nothing cropped ── */
.fps-mini-ic, .fpp-hero-ic {
  border-radius: 14px !important; overflow: hidden;
  background: none !important; border: none !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
/* `contain`, not `cover`: the art is a square render and cover was shaving
   the plus off its top-right corner. */
.fps-mini-ic img, .fpp-hero-ic img { object-fit: contain !important; }
.fpp-hero-ic { width: 64px; height: 64px; }

/* ── The phone's caption, which is also the picker ─────────────────── */
.fp-pick {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px 20px 0; text-align: center;
}
.fp-pick-name {
  font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 700;
  color: rgba(255,255,255,0.9); letter-spacing: 0.2px;
}
.fp-pick-dots { display: flex; align-items: center; gap: 5px; }
.fp-pick-sub {
  font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 300;
  color: rgba(255,255,255,0.42); letter-spacing: 0.3px;
}
.fp-pick-live {
  color: #06080f; background: rgba(240,192,90,0.92);
  padding: 2px 8px; border-radius: 999px !important;
  font-weight: 700; font-size: 9px; letter-spacing: 1.4px; text-transform: uppercase;
}

/* ── The icon: a BLACK wrapper, not a glass one ── */
.fps-mini-ic, .fpp-hero-ic {
  border-radius: 14px !important; overflow: hidden;
  background: #05070d !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
/* A little air inside the black, so the art sits in it rather than against
   its edges — and `contain`, so the plus in the corner is never shaved. */
.fps-mini-ic img, .fpp-hero-ic img {
  object-fit: contain !important; padding: 3px; box-sizing: border-box;
}

/* ══════════════════════════════════════════════════════════════════
   CERTIFICATE DESIGNS — the printed ones.

   The artwork is an untouched image; every field is a box positioned over
   it from the fractions measured in app/js/part078.js. Type is sized in
   `em` against a font-size derived from the card's own width, so one set
   of numbers holds at any size — a second set for tablets would be a
   second set to keep in step.
   ══════════════════════════════════════════════════════════════════ */
.certd {
  position: relative; width: 100%; max-width: 360px;
  aspect-ratio: 1024 / 1536; margin: 0 auto;
  border-radius: 8px !important; overflow: hidden;
  box-shadow: 0 22px 54px rgba(0,0,0,0.6);
  /* Everything inside is relative to this. */
  font-size: 2.6cqw;
  container-type: inline-size;
}
@supports not (container-type: inline-size) {
  .certd { font-size: 9px; }
}
.certd-art { width: 100%; height: 100%; object-fit: cover; display: block; }
.certd-f {
  position: absolute; text-align: center;
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 1.05em; line-height: 1.1; letter-spacing: 0.2px;
  /* The rule is the baseline: sit the text just on top of it. */
  transform: translateY(-108%);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.certd-light .certd-f { color: #1a1712; }
.certd-dark  .certd-f { color: #f2f2f2; }
.certd-name { font-weight: 600; letter-spacing: 0.4px; }
.certd-id { font-size: 0.92em; letter-spacing: 0.6px; }

/* ── Picking one ── */
.certd-rail-head {
  font-family: 'DM Sans', sans-serif; font-size: 9px; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,0.4);
  width: 100%; padding: 18px 2px 0;
}
.certd-rail {
  display: flex; gap: 10px; overflow-x: auto; width: 100%;
  padding: 10px 2px 2px; scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.certd-rail::-webkit-scrollbar { display: none; }
.certd-chip {
  flex: 0 0 82px; scroll-snap-align: start; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 7px 6px 9px; box-sizing: border-box;
  border-radius: 12px !important;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  transition: border-color 0.18s, background 0.18s;
}
.certd-chip.on {
  border-color: rgba(232,213,163,0.85);
  background: rgba(232,213,163,0.12);
}
.certd-chip-art, .certd-chip-built {
  width: 100%; aspect-ratio: 1024 / 1536; object-fit: cover; display: block;
  border-radius: 6px !important; background: linear-gradient(150deg, #14203a, #0a1020);
  border: 1px solid rgba(255,255,255,0.1);
}
.certd-chip-name {
  font-family: 'DM Sans', sans-serif; font-size: 8.5px; font-weight: 700;
  color: rgba(255,255,255,0.88); text-align: center; line-height: 1.25;
}
.certd-chip-sub {
  font-family: 'DM Sans', sans-serif; font-size: 7.5px; font-weight: 300;
  color: rgba(255,255,255,0.42); text-align: center; line-height: 1.2;
}

/* ══════════════════════════════════════════════════════════════════
   INACTIVE SCREENS ARE INERT — the login-button bug.

   `.screen:not(.active)` is already opacity:0 and pointer-events:none, so
   it should be untouchable. It was not. app/app.css line 3 sets a global
   `img,video{pointer-events:auto}`, and pointer-events is NOT locked by an
   ancestor — a descendant that declares `auto` becomes hit-testable again
   however inert its parents are.

   Every .screen shares z-index 10, and #home-nm comes after #login in the
   document, so at equal z-index the invisible Normal home paints over the
   visible login screen. Its hero video, re-enabled by that global rule,
   sat exactly across "Continue with Google" and swallowed every tap: the
   button could not be pressed and nothing happened, with no error to show
   for it because the tap never reached any handler.

   The same root cause was found once before and fixed for #authLoader
   alone (see the top of this file). This is the general form of it.
   ══════════════════════════════════════════════════════════════════ */
.screen:not(.active),
.screen:not(.active) * { pointer-events: none !important; }

/* The line the auth guard shows while the SDK is still arriving, or when
   it never does. Light surface — the login screen is #e4e6ed. */
.nwsb-auth-note {
  display: none; width: 100%; box-sizing: border-box;
  font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 500;
  color: #4a4f5e; background: rgba(255,255,255,0.8);
  border: 1px solid rgba(0,0,0,0.08); border-radius: 12px !important;
  padding: 11px 14px; margin-bottom: 12px; text-align: center; line-height: 1.5;
}
.nwsb-auth-note.show { display: block; }
.nwsb-auth-note.bad { color: #8a2b2b; background: rgba(255,235,235,0.92); border-color: rgba(160,60,60,0.25); }

/* ══════════════════════════════════════════════════════════════════
   DEVICE FRAMES — a section shown inside a screen.

   assets/frames/*.webp are the renders you sent with two things done to
   them: the studio backdrop cut away, and the screen KNOCKED OUT — the
   glass area is alpha 0, not black. That second part is what makes this
   simple. The frame is laid over the section as an ::after, the section's
   own content shows through the hole, and the bezel draws over its edges.

   Nothing is wrapped. app/js/part062.js reorders the *direct children* of
   each home wrap, so putting a section inside a new element would take it
   out of the layout editor's reach — the same trap the section-furniture
   pass fell into. This is a class and a padding, so the section stays
   exactly where it was in the tree.

   The padding is the bezel: it keeps content from sliding under the frame.
   Each device has its own, because each render's bezel is a different
   thickness — the TVs carry a chin and a stand, the tablet does not.
   ══════════════════════════════════════════════════════════════════ */
.nwsb-inframe {
  position: relative;
  box-sizing: border-box;
  background-clip: padding-box;
}
.nwsb-inframe::after {
  content: '';
  position: absolute; inset: 0; z-index: 20;
  pointer-events: none;                 /* the bezel is decoration, never a tap target */
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
}
/* The content of a framed section sits above its own background but below
   the bezel, so the hole shows it and the frame still overlaps its edges. */
.nwsb-inframe > * { position: relative; z-index: 1; }

/* ── The portrait TV — was the Fashion hero, nothing wears it now ── */
.nwsb-inframe.dev-tv-p {
  padding: 3.4% 3.2% 8.4%;
  background-color: #05070d;
}
.nwsb-inframe.dev-tv-p::after { background-image: url('assets/media/image/tv-portrait-15036215.webp'); }

/* ── The landscape TV — kept with the frames, worn by nothing ──
   Three slices, not one image, and that is the whole trick.

   Every other frame in this file is one render stretched to its box with
   background-size: 100% 100%. That works when the box is roughly the
   render's shape. A television is 1.75:1 and the row it holds is not, so
   stretched it went thin and wide and the feet were crushed flat.

   The render arrived already cut — transparent outside the TV and clear
   through the screen — so it is used as supplied, only trimmed to its own
   silhouette (x 40-1491, y 138-968 of 1536x1024) because outside that it
   is all transparent margin, and margin inside the box is dead space the
   row pays for on every side. Trimmed it is 1452x831, cut on its own
   natural seams:

     tv-l-top     rows 0-34     the top bezel, with the wordmark on it
     tv-l-mid     rows 262-269  one slice of the band that is identical
                                all the way down — white rail, screen,
                                white rail — repeated the height of the box
     tv-l-bottom  rows 707-830  the bottom bezel and the feet

   Caps top and bottom, rail tiled between. Every slice scales by the same
   factor (100% of the width), so the bezel keeps its true thickness and
   the feet their true shape whatever height the row ends up. The rails
   repeat rather than stretch, which they can because that band has no
   vertical detail anywhere down its length.

   The padding is the bezel, and every side is a fraction of the WIDTH —
   which is what CSS percentage padding already means on all four sides,
   so for once that quirk is exactly right. Off the trimmed render, the
   screen sits at x 28-1425 and y 35-706 of 1452x831. */
.nwsb-inframe.dev-tv-l {
  padding: 2.410% 1.791% 8.540% 1.928%;
}
/* The screen is black, painted in CSS rather than baked into the render:
   the render's screen is transparent and its bezel layer sits ABOVE the
   content, so black in the file would have covered the buttons.

   background-clip: content-box, not an inset pseudo-element, and that is
   a correctness fix rather than a tidy-up. The first version used a
   ::before with `top: 2.410%; bottom: 8.540%` — the same numbers as the
   padding — which looked right and was not: top/bottom percentages on a
   positioned box resolve against the containing block's HEIGHT, while
   percentage PADDING resolves against its width on all four sides. The
   black came up 14px short of the bottom bezel and spilled 4px over the
   top one, which is the black band that appeared under the screen.

   The content box IS the aperture, because the padding IS the bezel. So
   clipping the background to it is exact at any size, by construction,
   with no second set of numbers to keep in step. */
.nwsb-inframe.dev-tv-l {
  background-color: #000;
  background-clip: content-box;
  -webkit-background-clip: content-box;
}
/* The two caps only. The middle slice is NOT here any more — see ::before.
   Tiled on this layer it repeated over the element's whole height, and
   since the slice is "white rail, transparent, white rail", those rails
   carried on down PAST the bottom bezel and boxed the stand in. Together
   with the bezel bar above them that read as a rectangle drawn around the
   feet, which is the line that was showing under the television. */
.nwsb-inframe.dev-tv-l::after {
  background-image: url('assets/media/image/tv-l-top-ebc3578b.webp'),
                    url('assets/media/image/tv-l-bottom-c847689d.webp');
  background-position: top center, bottom center;
  background-size: 100% auto, 100% auto;
  background-repeat: no-repeat, no-repeat;
}
/* The side rails, tiled — and stopped at the top of the bottom bezel.
   14.922% is 124/831: the bottom slice's height as a fraction of the
   trimmed render's height, which is this box's height because
   .nmh-quick-tv carries that same aspect-ratio. A percentage `bottom` on a
   positioned box resolves against HEIGHT, so a fraction of the height is
   the one number that is exact here — the 8.540% used for the padding is a
   fraction of the WIDTH, which is what percentage padding means, and the
   two are only interchangeable because the aspect is fixed. */
.nwsb-inframe.dev-tv-l::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 0; bottom: 14.922%;
  z-index: 19; pointer-events: none;
  background: url('assets/media/image/tv-l-mid-9b5cea85.webp') top center / 100% 8px repeat-y;
}

/* ── The tall tablet — the footer ──
   Kept as a variant of the component, but nothing wears it now: the
   footer's tablet went onto the moving images instead of the brand panel
   (see .fc-tab further down), which is where it was asked for. It stays
   here because the render is the same file and the next section that
   wants a tall tablet should use this rather than invent another. ── */
.nwsb-inframe.dev-ftr {
  padding: 5.2% 6.4% 4.6%;
  background-color: #05070d;
}
.nwsb-inframe.dev-ftr::after { background-image: url('assets/media/image/footer-frame-827f9e2f.webp'); }

/* The picker in My Certificates. It is there whether or not anything has
   been earned — the designs were unreachable before, because the only way
   to a certificate card was to master a word first. */
#certPanelPick { margin-bottom: 22px; }
.certd-panel-note {
  font-family: 'DM Sans', sans-serif; font-size: 11.5px; font-weight: 300;
  color: rgba(255,255,255,0.45); line-height: 1.65; padding: 6px 2px 0;
}
#certPanelCard { margin-top: 14px; max-width: 300px; }

/* ══════════════════════════════════════════════════════════════════
   THE LOGIN — black, with the phone as the object on it.

   Three rules decide this screen:

     the screen is black, inside the phone and outside it both;
     the words live OUTSIDE the glass, the buttons INSIDE it;
     the render is never stretched, cropped, zoomed or rounded.

   That last one is why .lg-phone carries an aspect-ratio of 941 / 1672 —
   the render's own, exactly. The box is the shape of the photograph, so
   background-size: 100% 100% lands with no scaling distortion and no
   zoom, and the bezel keeps its proportions no matter how much is inside
   it. Opening the email or phone form makes .lg-glass scroll; it can
   never make the bezel grow.

   It is sized by HEIGHT, not width. This render is 0.56 wide to tall and
   carries a plinth of art below the phone, so a width that looked right
   on a tall screen ran off the bottom of a short one. Driving it from the
   viewport height and letting the aspect derive the width means it always
   fits, on any screen, without a stack of breakpoints.

   NOTHING is drawn over the phone's own edge — no border-radius, no
   border, no shadow. The render carries its own corners and its own
   background, and the page behind is black to match it, so there is no
   plate around it — just the phone and the light coming off the plinth.

   The file is used exactly as supplied: 941x1672, lossless WebP, every
   pixel byte-identical to the PNG. It is 668kB, which is a lot for one
   screen and is a deliberate call — at quality 95 more than 3% of pixels
   still shifted by over 8 levels, all of it in the iridescent art, which
   is precisely where banding would show.
   ══════════════════════════════════════════════════════════════════ */
.lg-screen-black { background: #000 !important; }
/* app.css gives #login `padding: 0 9%`, and that was what kept the phone
   small: at 360 wide it took 65px off the column before the render had a
   say, so a box asking for 100% could only ever be 295. The phone runs the
   full width of the screen now and the words above it carry their own
   inset instead. */
#login.lg-screen-black { padding-left: 0 !important; padding-right: 0 !important; }
.lg-wrap {
  /* The stage. The phone is absolutely positioned to cover it, so this is
     a positioning context and a clip, not a column any more. */
  position: relative; overflow: hidden;
  width: 100%; max-width: none; margin: 0;
  min-height: 100%; height: 100%;
  display: block; padding: 0;
  box-sizing: border-box;
  /* app.css gives every .nm-wrap the light auth surface (#e4e6ed). This
     screen is black behind the phone as well as inside it, so that one
     declaration has to come off — otherwise a pale column sits behind the
     words with black either side of it. */
  background: transparent !important;
  min-height: 100%; overflow-y: auto; scrollbar-width: none;
}
.lg-wrap::-webkit-scrollbar { display: none; }
#login.lg-screen-black { overflow: hidden; padding: 0 !important; }

/* ── The mark, at the TOP of the screen ──
   Logo, a hairline, then the name — set in the header's own two weights
   (.brand-name .b at 800 and .t at 200) rather than a single weight, so it
   is the same wordmark the rest of the app uses and not a lookalike. The
   header's classes are not reused directly because nowssb-nm.css repaints
   .brand-name dark for the light home, and this screen is black.

   It pins to the top: everything after it carries the auto margins that
   centre the rest, so this block stays put while Welcome and the pills sit
   in the middle. */
.lg-top {
  display: flex; align-items: center; gap: 13px;
  padding: 2px 2px 0; flex-shrink: 0;
}
.lg-top-logo {
  width: 46px; height: 46px; flex-shrink: 0;
  border-radius: 50%; overflow: hidden;
}
.lg-top-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lg-top-rule {
  width: 1px; height: 34px; flex-shrink: 0;
  background: rgba(255,255,255,0.2);
}
.lg-top-txt { min-width: 0; }
.lg-top-name {
  font-family: 'DM Sans', sans-serif; font-size: 21px; line-height: 1.05;
  letter-spacing: -0.2px;
}
.lg-top-name .b { font-weight: 800; color: #fff; }
.lg-top-name .t { font-weight: 200; color: rgba(255,255,255,0.88); }
.lg-top-by {
  font-family: 'DM Sans', sans-serif; font-size: 9.5px; font-weight: 300;
  letter-spacing: 2.2px; text-transform: uppercase;
  color: rgba(255,255,255,0.42); margin-top: 5px;
}
.lg-top-by .b { font-weight: 700; color: rgba(255,255,255,0.6); }
.lg-top-by .t { font-weight: 300; }

/* ── The words, INSIDE the screen and low in it ──
   Written the way the home's greeting is written, because that is the
   app's voice for this: the round mark on the left, then a quiet line, a
   big name and a small line under it. The sizes below are lifted from
   .nmh-greet-hello / -name / -line so the two actually match rather than
   merely resemble each other — 20px at weight 400 for the quiet line,
   27px at 800 for the name, 13px for the sub.

   margin-top: auto is on the HEAD, not on the button list. That is what
   puts the words BELOW: the spare space collects above this block, so the
   words and the pills travel down together as one group and the words end
   up just over the pills instead of at the top of the screen. */
.lg-head {
  margin-top: auto;   /* with the auto below, this centres the group */
  display: block; text-align: left; padding: 0 2px 16px;
}
/* No ring, no plate, no border. The mark is already a disc on black, and
   the screen behind it is black, so anything drawn round it would be a
   second circle outside the first one. It is trimmed to the disc itself so
   the 54px is the mark rather than the mark plus its margin. */
.lg-head-orb {
  width: 54px; height: 54px; flex-shrink: 0; margin-top: 2px;
  border-radius: 50%; overflow: hidden;
}
.lg-head-orb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lg-head-txt { flex: 1; min-width: 0; }
.lg-head .nm-brand {
  font-family: 'DM Sans', sans-serif; font-size: 20px; font-weight: 400;
  letter-spacing: -0.2px; text-transform: none;
  color: rgba(255,255,255,0.62); line-height: 1.12;
}
.lg-head .nm-auth-title {
  font-family: 'DM Sans', sans-serif; font-size: 27px; font-weight: 800;
  color: #fff; letter-spacing: -0.6px; line-height: 1.12; margin-top: 1px;
}
.lg-head .nm-auth-sub {
  font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 400;
  color: rgba(255,255,255,0.55); margin-top: 6px;
}

/* ── The phone ── */
/* The clip FILLS the screen — no black band above it or below it.
   This is `cover`, done with a box rather than object-fit, because the
   glass is positioned by percentages OF THIS BOX and object-fit would have
   moved the picture inside a box that stayed put, sliding the buttons off
   the screen they are supposed to sit on.

   max() of the two is the whole trick: at least as wide as the viewport,
   and — since height is derived from width by the aspect — at least as
   tall as it too. Whichever dimension is the binding one, the other
   overflows and is cropped, and the aspect is never in question. The
   render's side bezels lose a few pixels on a narrow screen; the screen
   itself never does, because the aperture sits between 18.9% and 81.7%
   across and there is far more crop than that available.

   Centred by transform rather than by margins because the box is
   deliberately larger than its container, and auto margins do not centre
   an overflowing box — they pin it to the start edge. */
.lg-phone {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: max(100%, calc(100vh * 720 / 1264));
  aspect-ratio: 720 / 1264;      /* the clip's own — never stretched */
  height: auto;
}
.nwsb-inframe.dev-phone {
  padding: 0;                    /* .lg-glass places itself; see below */
  background: #000;              /* the render's own background colour */
  border-radius: 0 !important;   /* see the note above — never round this */
  border: none !important;
  box-shadow: none !important;
  overflow: hidden;              /* clips the glass's scroll, not the render */
}
/* BEHIND the content, not over it — the one place this component differs.
   The other four renders have a transparent hole cut where their screen
   is, so their bezel can lie on top and overlap the edges of whatever is
   inside. This one is a solid photograph with no hole, and cutting one
   would mean altering the render. It doesn't need one: the phone's screen
   is already black, the glass is inset well within it, and nothing has to
   be overlapped. So the render drops to z-index 0 — above the element's
   own background, below the buttons — and stays whole. */
/* The render is a <video> in the markup rather than a background here, so
   this layer has nothing to draw. It stays declared and empty because
   .nwsb-inframe::after paints a bezel for every other frame in the app and
   leaving the rule out would be read as an oversight rather than a choice. */
.nwsb-inframe.dev-phone::after { background-image: none; }

/* The clip IS the phone. Behind the glass, at the element's own size, and
   object-fit: contain rather than cover — the box already carries the
   file's aspect, so contain and cover agree, and contain is the one that
   still cannot crop if that aspect is ever changed by accident. */
.lg-phone-vid {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;         /* the buttons above it stay tappable */
  background: #000;             /* the clip's own ground, before first paint */
}

/* The glass. Black, and the only thing that scrolls.

   ABSOLUTELY positioned, which is the whole point: as a normal flow child
   it could grow the phone, and opening the email form did exactly that —
   the bezel went from its true 0.585 aspect to 0.542, stretching the
   render, which is the one thing this must not do. Taken out of flow it
   cannot report a height upward, so the phone keeps the file's proportions
   whatever is inside and the content scrolls behind the bezel instead.

   The inset is measured off the clip's own frame: the screen sits inside
   x 136–587 of 720 and y 110–1165 of 1264, and the camera pill runs down
   to y 177 — so the top inset clears the pill rather than sitting under
   it. No background and no radius, because the phone's screen is already
   black and anything painted here would show as a lighter panel with its
   own corners floating inside the render. */
.lg-glass {
  position: absolute; inset: 15.03% 18.333% 7.753% 18.889%;
  box-sizing: border-box; overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  background: transparent; border-radius: 0 !important;
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: 10px 20px 14px; gap: 0;
}
/* Centred by auto margins rather than justify-content: center, and that is
   not a style preference. In a scroll container, centring with
   justify-content pushes the overflow out of BOTH ends — the top of the
   content ends up above scrollTop 0, where no amount of scrolling can
   reach it. Opening a form or showing the auth note made exactly that
   happen: the top line was cut off and unreachable. Auto margins collapse
   to zero the moment the content is taller than the box, so it centres
   when it fits and scrolls from the top when it doesn't. */
/* The words at the top of the screen, the pills low under them.
   margin-top: auto on the button list is what does it — it takes every
   spare pixel between the words and the pills, so the pills sit as low as
   the glass allows, and the margin-bottom below lifts them back off the
   chin so they are low rather than jammed. When the content is taller than
   the screen (a form open) both autos collapse to zero and it scrolls from
   the top, which is the behaviour justify-content: center could not give:
   centring in a scroller pushes the first line above scrollTop 0 where
   nothing can reach it. */
/* Both autos, so the block sits in the MIDDLE of the screen rather than on
   its chin. It was margin-top: auto alone, which pushed everything to the
   bottom and left the top two thirds of the screen empty — the void that
   made the whole thing look unfinished. When a form opens and the content
   outgrows the glass both collapse to zero and it scrolls from the top. */
.lg-glass > *:last-child { margin-bottom: auto; }
.lg-glass::-webkit-scrollbar { display: none; }

/* ══════════════════════════════════════════════════════════════════
   THE CONTROLS ON THE SCREEN

   Everything below exists because app.css draws this whole auth stack for
   the LIGHT surface it was designed on: .nm-auth-btn is 68px tall with a
   neumorphic pair, .nm-input is #e8eaf0 with inset shadows, .nm-form-panel
   is a #dcdee6 pressed well, .nm-btn-gold carries a white highlight. Drop
   any of that on black and it reads as a light-mode form pasted onto a
   dark screen — which is exactly what it looked like: white slabs with
   black gaps between them, and a flat gold bar under.

   So the screen gets its own system, and it is one system rather than a
   pile of patches:

     one radius        14px on everything the finger touches
     one height        52px for every control, so the stack has a rhythm
     one fill          rgba(255,255,255,0.06) for anything you type into
     one hairline      rgba(255,255,255,0.14)
     one gap           10px

   The three sign-in pills are white because they are the primary action
   and the only lit thing on the screen. Everything you type into is dark
   glass, because a white field on a black screen is a hole.
   ══════════════════════════════════════════════════════════════════ */

/* ── The three pills ── */
#login .nm-btn-list { width: 100%; gap: 10px; }
#login .nm-auth-btn {
  background: #fff; border: none;
  color: #0b0b0f; border-radius: 14px !important;
  box-shadow: none;
  height: 52px !important; min-height: 0 !important;
  padding: 0 18px; margin: 0;
  font-size: 13.5px; font-weight: 600; gap: 12px; letter-spacing: 0;
}
#login .nm-auth-btn svg { width: 19px; height: 19px; flex-shrink: 0; }
#login .nm-auth-btn:active { background: #e9e9ef; transform: scale(0.985); }
#login .nm-auth-btn + .nm-auth-btn { margin-top: 0; }

/* ── The divider. Short rules and a small word, not a full-width line ── */
#login .nm-divider { margin: 14px 0; gap: 14px; }
#login .nm-divider-line { background: rgba(255,255,255,0.13); height: 1px; }
#login .nm-divider-text {
  color: rgba(255,255,255,0.3); font-size: 10px;
  letter-spacing: 2.5px; font-weight: 500;
}

/* ── The forms ──
   No panel, no well, no plate. The fields sit straight on the screen, so
   opening one reads as the screen continuing rather than as a card being
   dealt onto it. */
#login .nm-form-panel {
  background: none !important; border: none !important;
  box-shadow: none !important; padding: 12px 0 2px !important;
  gap: 12px;
}
#login .nm-field-label {
  color: rgba(255,255,255,0.42);
  font-size: 9.5px; font-weight: 600; letter-spacing: 1.8px;
  margin-bottom: 7px;
}

/* Dark glass, and the radius is on the INPUT rather than only on its
   wrapper. It was on the wrapper alone, and .nm-input brings its own
   square light-mode background — so the corners the wrapper rounded were
   painted straight back over, which is why the fields rendered as square
   white slabs. */
#login .nm-input-wrap { background: none; border: none; border-radius: 0 !important; }
#login .nm-input,
#login .nm-phone-select {
  height: 52px !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  color: #fff !important;
  font-size: 14px; font-weight: 400;
  transition: border-color 0.18s, background 0.18s;
}
#login .nm-input:focus,
#login .nm-phone-select:focus {
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(232,213,163,0.55) !important;
}
#login .nm-input::placeholder { color: rgba(255,255,255,0.3); letter-spacing: 0.2px; }
/* The OTP box carries letter-spacing:6px inline so the digits sit apart.
   That is right for the digits and wrong for the words — "Enter OTP" came
   out as "E n t e r  O T P". A placeholder takes its own spacing. */
#login #otpInput::placeholder { letter-spacing: 0.4px !important; }
#login .nm-input-icon svg [stroke],
#login .nm-input-icon-r svg [stroke] { stroke: rgba(255,255,255,0.42); }
#login .nm-phone-select { padding: 0 10px; min-width: 92px; }
#login .nm-phone-row { gap: 10px; }

/* ── The submit ──
   Gold, but not the light surface's gold: app.css gives it a white
   neumorphic highlight that only makes sense on a pale plate. Here it
   carries its own glow instead, which is what an accent does on black. */
#login .nm-btn-gold {
  height: 52px; border-radius: 14px !important;
  background: linear-gradient(135deg, #e8d5a3 0%, #c8a96e 100%);
  color: #11111a; font-size: 13.5px; font-weight: 700; letter-spacing: 0.4px;
  box-shadow: 0 10px 26px rgba(200,169,110,0.28) !important;
  margin-top: 2px;
}
#login .nm-btn-gold:active { transform: scale(0.985); box-shadow: none !important; }
#login .nm-submit-btn, #login .nm-primary-btn { border-radius: 14px !important; }
#login .nm-link-sm {
  color: rgba(255,255,255,0.34); font-size: 11px; padding: 8px 6px 2px;
}

/* ══ WHEN A FORM IS OPEN ══
   The screen is 707px of glass and the stack with the email form open came
   to about 757 — so the last line, "Explore without account", sat cut in
   half against the bottom of the aperture. It did scroll, but a control
   sliced through at rest reads as broken rather than as scrollable, which
   is the wrong first impression on a sign-in screen.

   The fix is to make it fit rather than to make it scroll better: with a
   form open the greeting stands down a size, the tagline goes (you are
   filling in a form, you have read it), the control height steps 52 -> 48
   for EVERY control at once rather than for whichever ones were in the
   way, and the gaps tighten.

   Every selector here is #login-prefixed, and that is not decoration. The
   base rules above are #login .nm-auth-btn, #login .nm-btn-list and so on
   — one ID and one class. A plain .lg-glass:has(...) .nm-auth-btn is two
   classes, which loses to an ID even carrying !important, and the first
   version of this block silently did nothing at all for that reason.

   :has() is safe to lean on here in a way it would not be for text colour:
   unsupported, the screen falls back to scrolling — what it does today —
   rather than to something unreadable. The glass's bottom padding is the
   belt regardless: the last control is never flush against the clip. */
#login .lg-glass:has(.nm-form-panel.open) .lg-head { padding-bottom: 10px; gap: 11px; }
#login .lg-glass:has(.nm-form-panel.open) .lg-head-orb { width: 42px; height: 42px; }
#login .lg-glass:has(.nm-form-panel.open) .lg-head .nm-brand { font-size: 16px; }
#login .lg-glass:has(.nm-form-panel.open) .lg-head .nm-auth-title { font-size: 22px; }
#login .lg-glass:has(.nm-form-panel.open) .lg-head .nm-auth-sub { display: none; }
#login .lg-glass:has(.nm-form-panel.open) .nm-btn-list { gap: 8px; }
#login .lg-glass:has(.nm-form-panel.open) .nm-divider { margin: 9px 0; }
#login .lg-glass:has(.nm-form-panel.open) .lg-guest { margin-top: 4px; }
#login .lg-glass:has(.nm-form-panel.open) .nm-auth-btn,
#login .lg-glass:has(.nm-form-panel.open) .nm-input,
#login .lg-glass:has(.nm-form-panel.open) .nm-phone-select,
#login .lg-glass:has(.nm-form-panel.open) .nm-btn-gold { height: 48px !important; }
#login .lg-glass:has(.nm-form-panel.open) .nm-field-label { margin-bottom: 5px; }
#login .lg-glass:has(.nm-form-panel.open) .nm-link-sm { padding: 4px 6px 0; }
#login .nm-form-panel.open { padding-top: 8px !important; gap: 10px; }

/* ── The way out ── */
.lg-guest {
  display: block; width: 100%; margin-top: 16px; padding: 10px;
  background: transparent; border: none; cursor: pointer;
  font-family: 'DM Sans', sans-serif; font-size: 12.5px; font-weight: 500;
  color: rgba(232,213,163,0.85); letter-spacing: 0.3px; text-align: center;
}
/* The auth note sits on black here too. */
#login .nwsb-auth-note {
  background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.72);
}
#login .nwsb-auth-note.bad { background: rgba(120,30,30,0.4); color: #ffd9d9; border-color: rgba(200,80,80,0.4); }

/* Short screens: let the phone shrink rather than crop the words above it. */
/* Short screens: the phone is height-driven now, so it shrinks on its own.
   What still needs help is the words above it, which do not. */
@media (max-height: 720px) {
  .lg-phone { width: max(100%, calc(100vh * 720 / 1264)); }
  .lg-head { padding: 0 2px 12px; gap: 11px; }
  .lg-head-orb { width: 44px; height: 44px; }
  .lg-head .nm-brand { font-size: 17px; }
  .lg-head .nm-auth-title { font-size: 22px; }
  .lg-head .nm-auth-sub { font-size: 11.5px; margin-top: 4px; }
  #login .nm-auth-btn { padding: 8px 11px; font-size: 11.5px; }
}

/* The landscape tablet that wrapped the Normal home's player section is
   gone — the section is the plain card again, as it was. The render and
   its .dev-tab-l variant are kept below with the other frames; nothing
   wears it now. */
/* ── The landscape tablet ──
   The render is trimmed to its own silhouette (x 98-1436, y 76-950 of the
   1536x1024 original) because outside that it is all transparent margin,
   and margin inside the box is dead space the section pays for on every
   side. Trimmed it is 1339x875, and its screen sits at x 47-1291,
   y 65-824 — which is where these four numbers come from.

   Every one is a fraction of the WIDTH, because that is what percentage
   padding means on all four sides. The screen is black painted in CSS and
   clipped to the content box, not baked into the file: the render's screen
   is transparent and its bezel layer sits ABOVE the content, so black in
   the file would have covered the clip. The content box IS the aperture,
   because the padding IS the bezel — so clipping to it is exact at any
   size, with no second set of numbers to keep in step. */
.nwsb-inframe.dev-tab-l {
  /* !important: #sub-promo-card carries an inline padding:0, and an
     inline declaration beats a plain stylesheet one — the bezel simply
     never applied there. */
  padding: 4.854% 3.510% 3.734% !important;
  background-color: #000;
  background-clip: content-box;
  -webkit-background-clip: content-box;
}
.nwsb-inframe.dev-tab-l::after { background-image: url('assets/media/image/tab-landscape-221ff371.webp'); }

/* ══════════════════════════════════════════════════════════════════
   THE FOOTER CAROUSEL, INSIDE THE TABLET

   The images already move — a coverflow that swings one card into the
   middle and pushes the rest out either side. What was missing is that
   the middle one should read as being ON a screen. So the tablet is
   fixed at the centre of the carousel and does not move at all; the
   cards keep exactly the motion they had, and the one in the middle
   lands inside the aperture.

   The frame was on .footer-panel before, which was the wrong reading of
   the ask — and it looked wrong too: the panel is a wide, short box and
   background-size: 100% 100% squashed a 908x1408 tablet into it. It is
   off the panel now and on the thing that was meant to be in it.

   THE NUMBERS, all measured out of assets/media/image/footer-frame-827f9e2f.webp
   rather than eyeballed:

     file              908 x 1408
     transparent hole  x 55–854  (800 wide)
                       y 65–1350 (1286 tall)
     hole centre       455/908 = 0.5011 across, 708/1408 = 0.5028 down

   The card is sized to the hole's proportions — 162 x 260 rather than
   162 x 228 — because the alternative was stretching the tablet by 14%
   horizontally to meet the card's shape. The tablet keeps its own.

   The card renders at its CSS size, not larger: the track is
   transform-style: flat, so the perspective on .footer-carousel never
   reaches the cards and their translateZ does no foreshortening.
   Measured, not assumed — the centre card comes back exactly 162 wide.
   That is why the frame below is sized off the card in plain pixels
   with no perspective factor anywhere in it.
   ══════════════════════════════════════════════════════════════════ */
.footer-carousel { --fci-w: 162px; --fci-h: 260px; }
.fci {
  width: var(--fci-w); height: var(--fci-h);
  margin-left: calc(var(--fci-w) / -2);
  margin-top:  calc(var(--fci-h) / -2);
}
.fc-tab {
  position: absolute; top: 50%; left: 50%;
  /* full frame = aperture / aperture's share of the file */
  width:  calc(var(--fci-w) * 908 / 800);
  height: calc(var(--fci-h) * 1408 / 1286);
  /* pulled back by where the hole's centre sits inside the file, so the
     hole lands on the carousel's centre — which is where the card is */
  margin-left: calc(var(--fci-w) * 908 / 800 * -0.5011);
  margin-top:  calc(var(--fci-h) * 1408 / 1286 * -0.5028);
  z-index: 22;                 /* over the centre card (20) and the rest */
  pointer-events: none;        /* the cards underneath stay tappable */
  background: url('assets/media/image/footer-frame-827f9e2f.webp') no-repeat center / 100% 100%;
}
@media (max-width: 380px) {
  .footer-carousel { --fci-w: 142px; --fci-h: 228px; }
}

/* ══ ONE SEARCH — the bar at the top of the Normal home ══
   Replaces the two search sections and the AI Prescription block. The
   Normal home is a light neumorphic surface, so this is a pressed well
   rather than a glass pill. */
.nmh-search {
  display: flex; align-items: center; gap: 10px;
  width: calc(100% - 32px); margin: 16px 16px 0; box-sizing: border-box;
  padding: 6px 6px 6px 16px; border-radius: 999px !important;
  background: #eaecf3;
  box-shadow: inset 5px 5px 11px rgba(0,0,0,0.10), inset -5px -5px 11px rgba(255,255,255,0.95);
}
/* The app's own search mark, the same file the Word Search bar uses —
   an image rather than an inline glyph, so the two bars are the same
   thing rather than two drawings of it. */
.nmh-search-ic { width: 20px; height: 20px; flex-shrink: 0; opacity: 0.5; }
.nmh-search-ic .nwsb-search-icon { width: 100%; height: 100%; object-fit: contain; display: block; }
.nmh-search-in {
  flex: 1; min-width: 0; border: none; background: none; outline: none;
  font-family: 'DM Sans', sans-serif; font-size: 14.5px; font-weight: 400;
  color: #1b2038; padding: 12px 0;
}
.nmh-search-in::placeholder { color: rgba(30,36,56,0.36); }
.nmh-search-in::-webkit-search-cancel-button { display: none; }
.nmh-search-go {
  width: 42px; height: 42px; flex-shrink: 0; border: none; cursor: pointer;
  border-radius: 50% !important; background: #1b2038; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 4px 4px 10px rgba(0,0,0,0.18), -3px -3px 8px rgba(255,255,255,0.9);
}
.nmh-search-go .nwsb-search-icon { width: 18px; height: 18px; object-fit: contain; display: block; filter: brightness(0) invert(1); }
.nmh-search-go:active { transform: scale(0.94); }



/* The Normal home's dark mode keeps the same shapes, darker. */
#home-nm.nm-dark .nmh-search { background: #141433; box-shadow: inset 5px 5px 12px rgba(0,0,0,0.75), inset -4px -4px 10px rgba(60,60,120,0.25); }
#home-nm.nm-dark .nmh-search-in { color: #fff; }
#home-nm.nm-dark .nmh-search-in::placeholder { color: rgba(255,255,255,0.38); }
#home-nm.nm-dark .nmh-search-ic { color: rgba(255,255,255,0.45); }
#home-nm.nm-dark .nmh-search-go { background: #e8d5a3; }
#home-nm.nm-dark .nmh-search-go .nwsb-search-icon { filter: none; opacity: 0.85; }

/* ══════════════════════════════════════════════════════════════════
   THE APP FRAME — tablet and desktop

   This app is 117 elements deep and every one of them is a direct child
   of <body>. There is no #app wrapper (app.css had rules for one, but no
   such element has ever existed in the markup), and nearly every screen,
   sheet, drawer, overlay and toast is position: fixed. On a phone that is
   exactly right — fixed to the viewport IS fixed to the app. On a tablet
   or a desktop it is the whole problem: the viewport is 820 or 1280 wide,
   so every one of those elements stretches to 1280 no matter what any
   container says, because a fixed element ignores its ancestors' widths.

   What was here before clamped #app, :is(#home, .stw-prev-stage) and .sub-screen to 480px. It
   could not have worked: #app does not exist, and the other two are two
   screens out of a dozen — the rest, plus the bottom nav, the drawer and
   every overlay, still ran the full width. The Normal home was the only
   page that looked deliberate wide, and only because it is a fluid column
   that happens to reflow.

   ONE LEVER FIXES ALL OF IT. An element with a transform becomes the
   containing block for its fixed-position descendants — so a transform on
   <body>, plus a width, re-anchors every fixed element in the app to the
   column instead of the viewport. Nothing else has to be enumerated, and
   an overlay added next month is inside the column for free.

   The column is a width, not a redesign: these layouts are drawn for a
   ~400px phone, and stretching them to 1280 does not make them a desktop
   app, it makes them a phone app with 900px of slack in every row. So the
   app keeps its proportions and the space around it is given a surface of
   its own, which is what every phone-first app does on a big screen.
   ══════════════════════════════════════════════════════════════════ */
:root {
  /* Phones: the column IS the viewport, so every calc below is a no-op and
     nothing about the phone layout changes. */
  --app-w: 100vw;
  --app-side: 0px;
}

@media (min-width: 600px) {
  :root {
    --app-w: min(96vw, 640px);
    --app-side: calc((100vw - var(--app-w)) / 2);
  }

  /* The surround. html rather than body, because body IS the app now.

     It follows the app's own theme instead of fighting it: the app writes
     .nwsb-lightbg onto <html> as well as <body> when the light background
     is picked (part012.js), with an !important flat #e4e6ed — so a plain
     `html { background }` here never won, and a pale column on a pale
     field had no edge at all. Each variant gets a surround a step away
     from the app's surface rather than the same colour as it. */
  html { background: radial-gradient(120% 90% at 50% 0%, #10141f 0%, #05070d 62%, #03040a 100%) !important; }
  html.nwsb-lightbg { background: radial-gradient(120% 90% at 50% 0%, #d2d6e0 0%, #c3c8d4 70%, #b9bfcc 100%) !important; }

  body {
    width: var(--app-w) !important;
    max-width: var(--app-w) !important;
    margin: 0 auto !important;
    /* The lever. Without this the width above changes nothing at all,
       because every screen in the app is position: fixed and would go on
       measuring itself against the viewport. */
    transform: translateZ(0);
    position: relative;
    /* An edge, so the column reads as the app and not as a page that
       failed to fill its window. */
    box-shadow: 0 0 0 1px rgba(255,255,255,0.07),
                0 30px 90px rgba(0,0,0,0.55);
  }

  /* One casualty of the transform: a fixed element is now clipped to the
     column, which is what we want everywhere except the splash art, which
     was covering the viewport by covering the screen. It still covers the
     column, so this is only here to say it was checked, not skipped. */
}

/* One column, one width, from 600px up. There was a narrower one for
   >=1024 here — a laptop breakpoint — and it is gone on purpose: the
   target is the tablet, and a laptop showing the tablet layout is a
   laptop that works. A second width would have meant a second thing to
   keep right for no one who asked for it.

   Short and wide — a tablet on its side — is the one case the column
   cannot fix by width, because there the app is height-bound. It gets a
   little of its width back so the rows are not tall and starved. */
@media (min-width: 900px) and (max-height: 640px) {
  :root { --app-w: 560px; }
}

/* The one viewport-width calculation in the app that is a POSITION rather
   than a cap. It places the shadow at the foot of an intro render whose
   height is (column width x art aspect) — so with the column no longer
   equal to the viewport it has to follow the column, or the shadow lands
   hundreds of pixels below the art it belongs to. */
#nssIntroPage .nss-intro-img::after,
#rmIntroPage .rm-intro-bg::after,
#msIntroPage .ms-intro-bg::after,
#ebIntroPage .ms-intro-bg::after,
#sigIntroPage .sig-intro-bg::after {
  top: calc(var(--app-w) * var(--art, 1.7768) - 120px);
}

/* ══════════════════════════════════════════════════════════════════
   THE SOUND LIBRARY — the list, not the wallpaper

   It was a light page (#f0f2f7) with a photograph behind the content and
   a second photograph in the banner, and the list sat on top of both as a
   stack of cards. Two images competing behind text is why nothing on it
   read cleanly: every row needed its own plate to stay legible, and the
   plates are what made it look like a settings screen rather than a
   library.

   So: the wallpaper goes, the page is black, and the rows sit straight on
   it. That is the whole idea — a row is a thumbnail, a title, a line under
   it, and an action on the right, with nothing drawn behind it. The only
   surface left is the hero at the top, which keeps its artwork because a
   library should open with something to look at, and it fades to black so
   there is no seam between it and the list.

   Every rule carries `body[class] #sub-sound-library`. That prefix is not
   decoration and it is not superstition: this page already has a full
   neumorphic skin further up this file, gated on body.nm-mode /
   body.nm-night / body.nm-glass, and those selectors weigh (1,2,1). A bare
   `#sub-sound-library .sl-screen` is (1,1,0) and loses to them even
   carrying !important — which is exactly what happened on the first pass,
   where none of this applied and the page stayed light.

   `body[class]` matches whatever theme is set, weighs the same as
   `body.nm-mode`, and sits later in the file, so it wins on order rather
   than on an escalation. The Library reads the same in every theme, which
   is the point — this is the page's design, not a skin of it.
   ══════════════════════════════════════════════════════════════════ */

/* ── The surface ── */
body[class] #sub-sound-library .sl-screen {
  background: #000 !important;
  display: flex; flex-direction: column;
}
/* The wallpaper and its scrim. This is the "remove the background images"
   part: one photograph behind the whole list, plus a gradient to stop it
   drowning the text. Both gone — the page is black and needs neither. */
body[class] #sub-sound-library .sl-bg,
body[class] #sub-sound-library .sl-bg-overlay { display: none !important; }

/* ── The hero ──
   Taller than it was (196 -> 300) so the artwork is a picture rather than
   a strip, and it fades into the page instead of ending at a hard edge. */
/* 16/9, which is the shape the film is. At a fixed 300px on a 390px screen
   the slot was 1.3:1 and object-fit:cover threw away a third of the width —
   including the wordmark the clip is built around. A minimum keeps the
   title and stats from crowding on a narrow phone. */
body[class] #sub-sound-library .sl-banner {
  aspect-ratio: 16 / 9; height: auto !important; min-height: 218px;
  position: relative; flex-shrink: 0;
  background: #000;
}
body[class] #sub-sound-library .sl-banner-img {
  background-position: center 28% !important;
}
/* The clip sits over the still. object-fit:cover so a 16:9 film fills a
   taller-than-16:9 hero without letterboxing, and z-index 0 so the fade,
   the back button and the title all stay above it. */
body[class] #sub-sound-library .sl-banner-vid {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
  background: #000;
}
/* The fade. It was display:none, which is why the artwork used to stop
   dead against the content. Four stops rather than two: transparent for
   the top half so the picture is untouched, then a fast run to solid so
   the title has something to sit on. */
body[class] #sub-sound-library .sl-banner-fade {
  display: block !important;
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.46) 0%,
    rgba(0,0,0,0.16) 30%,
    rgba(0,0,0,0.22) 50%,
    rgba(0,0,0,0.72) 74%,
    #000 100%);
}
body[class] #sub-sound-library .sl-banner-inner {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: max(env(safe-area-inset-top, 14px), 14px) 20px 18px;
}
body[class] #sub-sound-library .sl-back-btn {
  width: 40px; height: 40px; padding: 0; flex-shrink: 0;
  background: none !important; border: none !important; box-shadow: none !important;
  display: flex; align-items: center; justify-content: flex-start;
}
body[class] #sub-sound-library .sl-banner-bottom { padding: 0; }
body[class] #sub-sound-library .sl-eyebrow {
  font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 700;
  letter-spacing: 2.6px; text-transform: uppercase;
  color: rgba(255,255,255,0.5) !important; margin-bottom: 8px;
}
body[class] #sub-sound-library .sl-banner-title {
  font-family: 'DM Sans', sans-serif; font-size: 34px; font-weight: 800;
  color: #fff !important; letter-spacing: -0.8px; line-height: 1.05;
}
body[class] #sub-sound-library .sl-stats-row {
  margin-top: 9px; font-size: 13px;
  color: rgba(255,255,255,0.62) !important;
}
body[class] #sub-sound-library .sl-stat,
body[class] #sub-sound-library .sl-stat-sep { color: rgba(255,255,255,0.62) !important; }
body[class] #sub-sound-library .sl-stat strong { color: #fff !important; font-weight: 700; }

/* ── The tabs, as chips ──
   Filled white when chosen, a faint fill when not. The badge rides inside
   the chip rather than beside it, which is what keeps three of them on one
   line at 360px wide. */
body[class] #sub-sound-library .sl-tabs {
  display: flex; gap: 8px; flex-shrink: 0;
  padding: 4px 20px 16px; background: #000 !important;
  border: none !important; box-shadow: none !important;
  overflow-x: auto; scrollbar-width: none;
}
body[class] #sub-sound-library .sl-tabs::-webkit-scrollbar { display: none; }
body[class] #sub-sound-library .sl-tab {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
  height: 34px; padding: 0 14px; border-radius: 999px !important;
  background: rgba(255,255,255,0.09) !important;
  border: none !important; box-shadow: none !important;
  color: rgba(255,255,255,0.82) !important;
  font-family: 'DM Sans', sans-serif; font-size: 12.5px; font-weight: 500;
  /* The base rule uppercases these with 1.8px of tracking, which is what
     pushed the third chip off the right edge at 360px. Sentence case, no
     tracking: the same three words fit with room to spare. */
  text-transform: none !important; letter-spacing: 0 !important;
  white-space: nowrap; transition: background 0.16s, color 0.16s;
}
body[class] #sub-sound-library .sl-tab svg { display: none; }   /* the word is the label */
body[class] #sub-sound-library .sl-tab.active {
  background: #fff !important; color: #0b0b0f !important; font-weight: 700;
}
body[class] #sub-sound-library .sl-tab-badge {
  background: rgba(255,255,255,0.16) !important; color: inherit !important;
  border-radius: 999px !important; padding: 1px 7px;
  font-size: 10.5px; font-weight: 700; min-width: 0;
}
body[class] #sub-sound-library .sl-tab.active .sl-tab-badge {
  background: rgba(0,0,0,0.12) !important;
}

/* ── The content column ── */
body[class] #sub-sound-library .sl-content {
  background: #000 !important;
  padding: 0 0 calc(var(--nav-height, 58px) + 40px);
  flex: 1; overflow-y: auto;
}

/* ── The section head: a heading on the left, a small pill on the right ── */
body[class] #sub-sound-library .sl-sort-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 20px 12px; background: none !important; border: none !important;
}
body[class] #sub-sound-library .sl-sort-label {
  font-family: 'DM Sans', sans-serif; font-size: 20px; font-weight: 700;
  color: #fff !important; letter-spacing: -0.3px; text-transform: none;
}
body[class] #sub-sound-library .sl-sort-btns { display: flex; gap: 8px; }
body[class] #sub-sound-library .sl-sort-btn,
body[class] #sub-sound-library .sl-filter-chip {
  height: 32px; padding: 0 14px; border-radius: 999px !important;
  background: none !important;
  border: 1px solid rgba(255,255,255,0.26) !important;
  box-shadow: none !important;
  color: rgba(255,255,255,0.9) !important;
  font-family: 'DM Sans', sans-serif; font-size: 12.5px; font-weight: 500;
  /* The base rules uppercase these with 1.5px of tracking. The heights and
     colours here landed on the first pass and these two did not, which is
     why the row of categories still read as a row of shouted labels wide
     enough to run off the screen. Measured, not guessed: the chip came
     back text-transform: uppercase, letter-spacing: 1.5px. */
  text-transform: none !important; letter-spacing: 0 !important;
  white-space: nowrap; flex-shrink: 0;
}
body[class] #sub-sound-library .sl-sort-btn.active,
body[class] #sub-sound-library .sl-filter-chip.active {
  background: #fff !important; color: #0b0b0f !important;
  border-color: #fff !important; font-weight: 700;
}
/* ── The categories ──
   There are fourteen of them and they came to 1755px on a 390px screen, so
   as a single scrolling row the right-hand one was always sliced through
   the middle of a word and there was nothing to say it scrolled. They wrap
   now: every category is visible, nothing is cut, and the row is as tall as
   it needs to be instead of hiding two thirds of itself. */
body[class] #sub-sound-library .sl-filter-row {
  display: flex; flex-wrap: wrap; gap: 8px; padding: 0 20px 14px;
  overflow-x: visible; background: none !important;
}
body[class] #sub-sound-library .sl-filter-row::-webkit-scrollbar { display: none; }
/* nowrap on the chip keeps a two-word category on one line; it is the ROW
   that wraps, not the label inside a chip. */
body[class] #sub-sound-library .sl-filter-chip { flex: 0 0 auto; white-space: nowrap; }

/* ── The rows ──
   No card, no plate, no border. A row is its content: the mark, the words,
   the action. This is the change that carries the whole page. */
body[class] #sub-sound-library .sl-word-card,
body[class] #sub-sound-library .sl-sentence-card {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  margin: 0 !important;
  padding: 7px 20px !important;
  gap: 13px;
}
body[class] #sub-sound-library .sl-word-card:active,
body[class] #sub-sound-library .sl-sentence-card:active {
  background: rgba(255,255,255,0.05) !important; transform: none !important;
}
/* The mark. Square with a small radius, the way a piece of cover art sits
   in a list — not the round disc it was, which read as an avatar. */
body[class] #sub-sound-library .sl-word-disc {
  width: 56px !important; height: 56px !important; flex-shrink: 0;
  border-radius: 5px !important;
  background: linear-gradient(150deg, #1c1c26 0%, #101018 100%) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: none !important;
}
body[class] #sub-sound-library .sl-word-disc-letter {
  font-family: 'DM Sans', sans-serif; font-size: 21px; font-weight: 800;
  color: rgba(255,255,255,0.85) !important;
}
body[class] #sub-sound-library .sl-word-name {
  font-family: 'DM Sans', sans-serif; font-size: 15.5px; font-weight: 500;
  color: #fff !important; letter-spacing: 0 !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* The overflow control. Quiet until touched, and it opens the word — the
   row's own action — so it is never a control that does nothing. */
body[class] #sub-sound-library .sl-row-more {
  width: 34px; height: 34px; flex-shrink: 0; margin-left: 4px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; padding: 0; cursor: pointer;
  color: rgba(255,255,255,0.62);
  border-radius: 50%;
}
body[class] #sub-sound-library .sl-row-more svg { width: 4px; height: 16px; }
body[class] #sub-sound-library .sl-row-more:active { background: rgba(255,255,255,0.1); }
/* The old right-hand column. Nothing renders it in the words tab now — the
   organ moved into the line under the title — but the purchased tab still
   uses it, so it is styled rather than hidden. */
body[class] #sub-sound-library .sl-word-right {
  align-items: flex-end; gap: 3px; flex-shrink: 0;
}
/* The section head. The words tab writes its count into
   .sl-word-count-label rather than .sl-sort-label, so styling only the
   latter left this row as a dim grey line where the reference has a
   heading. Both are the heading now. */
body[class] #sub-sound-library .sl-word-count-label {
  font-family: 'DM Sans', sans-serif; font-size: 20px !important;
  font-weight: 700 !important; color: #fff !important;
  letter-spacing: -0.3px !important; margin: 0 !important; display: block;
}
body[class] #sub-sound-library .sl-word-count-label span { color: #fff !important; font-weight: 700; }

body[class] #sub-sound-library .sl-word-phonetic,
body[class] #sub-sound-library .sl-word-organ,
body[class] #sub-sound-library .sl-purchased-date {
  font-family: 'DM Sans', sans-serif; font-size: 12.5px; font-weight: 400;
  color: rgba(255,255,255,0.6) !important;
}
body[class] #sub-sound-library .sl-word-badge,
body[class] #sub-sound-library .sl-badge-sub,
body[class] #sub-sound-library .sl-badge-buy {
  background: rgba(255,255,255,0.1) !important;
  border: none !important; box-shadow: none !important;
  color: rgba(255,255,255,0.72) !important;
  border-radius: 999px !important; padding: 3px 9px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.4px;
}

/* ── The sentence rows ── */
body[class] #sub-sound-library .sl-sentence-eyebrow {
  font-size: 10px; font-weight: 700; letter-spacing: 1.8px;
  text-transform: uppercase; color: rgba(255,255,255,0.38) !important;
}
body[class] #sub-sound-library .sl-sentence-date { color: rgba(255,255,255,0.38) !important; }
body[class] #sub-sound-library .sl-sentence-text {
  font-size: 15px; font-weight: 500; color: #fff !important; line-height: 1.45;
}
body[class] #sub-sound-library .sl-word-hl { color: #e8d5a3 !important; font-weight: 700; }
body[class] #sub-sound-library .sl-sentence-chip {
  background: rgba(255,255,255,0.09) !important; border: none !important;
  color: rgba(255,255,255,0.72) !important; border-radius: 999px !important;
  font-size: 11px; padding: 4px 10px;
}
body[class] #sub-sound-library .sl-sentence-meta { color: rgba(255,255,255,0.45) !important; font-size: 11.5px; }
body[class] #sub-sound-library .sl-sentence-footer { border-top: 1px solid rgba(255,255,255,0.07); padding-top: 10px; margin-top: 10px; }
body[class] #sub-sound-library .sl-sentence-play-btn,
body[class] #sub-sound-library .sl-sentence-delete-btn {
  background: rgba(255,255,255,0.09) !important; border: none !important;
  box-shadow: none !important; border-radius: 999px !important;
  color: rgba(255,255,255,0.8) !important;
}

/* ── Empty, and the upgrade note ── */
body[class] #sub-sound-library .sl-empty {
  background: none !important; border: none !important; box-shadow: none !important;
  padding: 56px 32px !important; text-align: center;
}
body[class] #sub-sound-library .sl-empty-title {
  font-size: 19px; font-weight: 700; color: #fff !important; margin-top: 16px;
}
body[class] #sub-sound-library .sl-empty-text {
  font-size: 13.5px; color: rgba(255,255,255,0.55) !important; line-height: 1.6; margin-top: 8px;
}
body[class] #sub-sound-library .sl-empty-cta {
  margin-top: 22px; height: 46px; padding: 0 26px;
  border-radius: 999px !important; background: #fff !important;
  color: #0b0b0f !important; border: none !important; box-shadow: none !important;
  font-size: 13.5px; font-weight: 700; letter-spacing: 0.3px;
}
body[class] #sub-sound-library .sl-upgrade-banner {
  background: rgba(255,255,255,0.06) !important;
  border: none !important; box-shadow: none !important;
  border-radius: 14px !important; margin: 8px 20px 18px !important;
}
body[class] #sub-sound-library .sl-upgrade-label { color: rgba(255,255,255,0.42) !important; }
body[class] #sub-sound-library .sl-upgrade-title { color: #fff !important; }
body[class] #sub-sound-library .sl-upgrade-text { color: rgba(255,255,255,0.6) !important; }
body[class] #sub-sound-library .sl-upgrade-btn {
  background: #fff !important; color: #0b0b0f !important;
  border: none !important; box-shadow: none !important; border-radius: 999px !important;
  font-weight: 700;
}

/* ── The start animation's clip ──
   Same layer as .splash-bg-image and the same job, so it sits exactly where
   that does. It is only shown when the clip is the chosen start animation —
   without .on it is not there at all, so the images are never behind it. */
.splash-bg-video {
  position: fixed; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  display: none; background: #060c18;
}
.splash-bg-video.on { display: block; }

/* The second of black before the start clip moves. app.css gives #splash a
   #f5f5f5 ground, so this has to be said rather than assumed. */
#splash.splash-clip { background: #000 !important; }
.splash-bg-video { opacity: 0; transition: opacity 0.45s ease; }
.splash-bg-video.vis { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════
   THE STORE'S VERIFICATION BANNER
   Opens the "Everything Else, In One Place" block. 16:9, the shape the
   film is, so nothing is cropped away.
═══════════════════════════════════════════════════════════════ */
body[class] #sub-nowssb-store .nss-verify-banner {
  position: relative; margin: 22px 20px 2px; overflow: hidden;
  border-radius: 20px !important; background: #06070d;
  aspect-ratio: 16 / 9;
  box-shadow: 0 14px 34px rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.08);
}
body[class] #sub-nowssb-store .nss-verify-banner-vid {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* ═══════════════════════════════════════════════════════════════
   SETTINGS — the pieces the neumorphic skin never reached
   The skin above was written against .sg and .slbl. The settings page
   does not use those class names — app/js/part042.js writes
   .ss-section and .ss-section-title — so those two were left wearing the
   Fashion page's dark values on a light background: section headings at
   rgba(255,255,255,0.3) and cards with a white hairline border. Measured,
   not guessed. Same for the plan badge, which was white on near-white.
═══════════════════════════════════════════════════════════════ */
body.nm-mode #sub-social .ss-section-title {
  color: #c8a96e !important;
}
body.nm-night #sub-social .ss-section-title { color: #e8d5a3 !important; }

body.nm-mode #sub-social .ss-section {
  background: #f0f2f7 !important;
  border: none !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 7px 7px 18px rgba(0,0,0,0.14), -5px -5px 14px rgba(255,255,255,0.97) !important;
}
body.nm-night #sub-social .ss-section {
  background: #16163c !important;
  border: none !important;
  box-shadow: 8px 8px 22px rgba(0,0,0,0.88), -4px -4px 14px rgba(50,50,110,0.32) !important;
}
/* The last row in a card has the card's own edge under it already. */
body[class] #sub-social .ss-section .sr:last-child { border-bottom: none !important; }

/* The plan badge — white text on 6%-white, i.e. nothing, over a light page. */
body.nm-mode #sub-social .sub-badge,
body.nm-mode #sub-social #ss-prof-badge {
  color: #6b5a33 !important;
  background: rgba(200,169,110,0.18) !important;
  border: 1px solid rgba(200,169,110,0.45) !important;
}
body.nm-night #sub-social .sub-badge,
body.nm-night #sub-social #ss-prof-badge {
  color: #e8d5a3 !important;
  background: rgba(232,213,163,0.14) !important;
  border: 1px solid rgba(232,213,163,0.34) !important;
}
/* A few values are written inline as white in the markup (the AI Persona
   label is one), so they need this weight to be legible on a light page. */
body.nm-mode #sub-social .sr-val { color: #1a1a2e !important; }
body.nm-mode #sub-social .sr-val.gold { color: #9a7c3f !important; }
body.nm-night #sub-social .sr-val { color: rgba(255,255,255,0.82) !important; }
body.nm-night #sub-social .sr-val.gold { color: #e8d5a3 !important; }

/* ═══════════════════════════════════════════════════════════════
   THE NOWSSB STORE DOOR
   The three crossfading stills are a clip now. The slot is 9/16 and the
   film is 768x1168, so cover crops a little top and bottom rather than
   letterboxing — the wordmark is centred, which is what has to survive.
═══════════════════════════════════════════════════════════════ */
body[class] .nss-store-trigger .nss-trigger-vid {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
  background: #05070c;
}

/* ═══════════════════════════════════════════════════════════════
   FASHION PLUS — pages keep a background
   body.fashplus opens the tagged pages up so the fixed film behind can
   show. #fpBgVideo sits at z-index 0, behind everything, and the top-level
   screens sit above it — so what actually came through a transparent page
   was the home, not the film. The pages are black instead. Nothing else
   about the mode changes: the home still wears the film.
═══════════════════════════════════════════════════════════════ */
body.fashplus:not(.fp-bg-off) .sub-screen[data-fp-img] { background: #000 !important; }
body.fashplus:not(.fp-bg-off) .sub-screen[data-fp-img] > .sub-screen-bg[data-fp-img] {
  background-image: none !important;
  background-color: #000 !important;
}

/* ═══════════════════════════════════════════════════════════════
   THE WORD LIBRARY
   A full-bleed photograph used to sit under the word list, the checkboxes
   and the mood buttons, which is what made them unreadable. The sheet has
   a background of its own now (app/js/part015.js no longer paints the
   genre image).
═══════════════════════════════════════════════════════════════ */
/* Dark in both homes, deliberately: the list, the genre tags and the mood
   buttons are all written white-on-dark and there is no light skin for this
   overlay anywhere, so a light sheet would only trade one unreadable page
   for another. */
#wlSheet {
  background-image: none !important;
  background-color: #0a0e1a !important;
}

/* ═══════════════════════════════════════════════════════════════
   CART · WISHLIST · ORDER, ON THE TELEVISION
   The .dev-tv-l render above has been in this file, worn by nothing, since
   the frame came off the quick row. It is back on it.

   The frame carries the render's own aspect. Left to the row's natural
   height the box came out 372x107 — 3.5 against the television's 1.75 —
   and three buttons in a letterbox do not read as a television.
═══════════════════════════════════════════════════════════════ */
.nmh-quick-tv {
  width: 100%; position: relative;
  aspect-ratio: 1452 / 831;      /* the trimmed render's own */
}
#home-nm .nmh-quick-tv .nmh-quick-row { gap: 0; height: 100%; }
#home-nm .nmh-quick-tv .nmh-quick-btn {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 6px;
  justify-content: center;       /* centred on the screen, not the top of it */
}
#home-nm .nmh-quick-tv .nmh-quick-btn:active {
  background: rgba(255,255,255,0.06) !important;
  box-shadow: none !important; transform: none;
}
#home-nm .nmh-quick-tv .nmh-quick-btn span { color: rgba(255,255,255,0.72); }
/* Hairlines between them, so three buttons on one black screen still read
   as three buttons. */
#home-nm .nmh-quick-tv .nmh-quick-btn + .nmh-quick-btn {
  box-shadow: inset 1px 0 0 rgba(255,255,255,0.10) !important;
}

/* ═══════════════════════════════════════════════════════════════
   QUICK ACCESS — a heading, the television, a black banner
   One block, .qa-tv-block, on both homes. On the Fashion home it sits in a
   glass wrapper (#fashCubeSec.glass-wrap); the Normal home keeps its
   sections loose in the column the way it always has.
═══════════════════════════════════════════════════════════════ */
.qa-tv-block { width: 100%; }

/* ── The heading above ──
   The same shape as the home's own greeting: a disc on the left holding a
   mark, a light line and a heavy one under it. The disc is neumorphic on
   the Normal home and glass on the Fashion home — the two skins of the
   same component. app/js/part049.js swaps the mark in step with the
   banner below. */
.qa-tv-head {
  display: flex; align-items: center; gap: 14px;
  padding: 0 2px 14px;
}
.qa-tv-orb {
  width: 54px; height: 54px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50% !important;
  background: #f0f2f7; color: #c8a96e;
  box-shadow: 6px 6px 14px rgba(163,177,198,0.6), -5px -5px 12px #ffffff;
}
.qa-tv-orb svg { width: 26px; height: 26px; display: block; }
/* Fashion: the same disc in glass. */
:is(#home, .stw-prev-stage) .qa-tv-orb {
  background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.22);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 10px 26px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.28);
}
body.nm-night .qa-tv-orb {
  background: #16163c;
  box-shadow: 6px 6px 16px rgba(0,0,0,0.85), -4px -4px 12px rgba(50,50,110,0.32);
}
.qa-tv-head-txt { flex: 1; min-width: 0; }
.qa-tv-hello {
  font-family: 'DM Sans', sans-serif; font-size: 20px; font-weight: 400;
  color: rgba(26,26,46,0.62); letter-spacing: -0.2px; line-height: 1.2;
}
.qa-tv-name {
  font-family: 'DM Sans', sans-serif; font-size: 27px; font-weight: 800;
  color: #1a1a2e; letter-spacing: -0.6px; line-height: 1.12;
}
:is(#home, .stw-prev-stage) .qa-tv-hello { color: rgba(255,255,255,0.66); }
:is(#home, .stw-prev-stage) .qa-tv-name  { color: #fff; }
body.nm-night .qa-tv-hello { color: rgba(255,255,255,0.6); }
body.nm-night .qa-tv-name  { color: #fff; }

/* ── The screen ──
   .nmh-quick-tv's content box IS the aperture (its padding is the bezel),
   so a child at 100%/100% fills the glass exactly — no inset numbers to
   keep in step with the padding, and no rounded corners, because a
   television screen does not have any. The clip sits under the buttons. */
.qa-tv-screen {
  position: relative; width: 100%; height: 100%;
  overflow: hidden; border-radius: 0 !important;
  background: #000;
}
.qa-tv-vid {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: 0 !important;
}
#home-nm .qa-tv-screen .nmh-quick-row,
:is(#home, .stw-prev-stage) .qa-tv-screen .nmh-quick-row {
  position: relative; z-index: 1;
  height: 100%; gap: 0; margin: 0; padding: 0;
  border-radius: 0 !important;
  background: transparent !important; box-shadow: none !important; border: none !important;
}

/* ── The three buttons ── */
#home-nm .qa-tv-screen .nmh-quick-btn,
:is(#home, .stw-prev-stage) .qa-tv-screen .nmh-quick-btn {
  flex: 1 1 0;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 6px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
}
/* A short, thicker rule between them — drawn as a pseudo-element rather
   than a border, because a border runs the full height of the button and
   a divider that tall reads as three separate panels rather than one
   screen split three ways. 44% of the height, centred, 2px wide. */
#home-nm .qa-tv-screen .nmh-quick-btn + .nmh-quick-btn,
:is(#home, .stw-prev-stage) .qa-tv-screen .nmh-quick-btn + .nmh-quick-btn {
  border-left: none !important;
  position: relative;
}
#home-nm .qa-tv-screen .nmh-quick-btn + .nmh-quick-btn::before,
:is(#home, .stw-prev-stage) .qa-tv-screen .nmh-quick-btn + .nmh-quick-btn::before {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 2px; height: 44%; transform: translateY(-50%);
  background: rgba(255,255,255,0.34);
  border-radius: 2px !important;
  pointer-events: none;
}
#home-nm .qa-tv-screen .nmh-quick-btn span,
:is(#home, .stw-prev-stage) .qa-tv-screen .nmh-quick-btn span {
  color: #fff !important;
  font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .2px;
  text-shadow: 0 1px 8px rgba(0,0,0,0.55);
}
#home-nm .qa-tv-screen .nmh-quick-btn svg,
:is(#home, .stw-prev-stage) .qa-tv-screen .nmh-quick-btn svg {
  filter: drop-shadow(0 1px 6px rgba(0,0,0,0.6));
}
#home-nm .qa-tv-screen .nmh-quick-btn:active,
:is(#home, .stw-prev-stage) .qa-tv-screen .nmh-quick-btn:active {
  background: rgba(255,255,255,0.07) !important;
  box-shadow: none !important; transform: none;
}

/* ── The black banner below ──
   It IS .nmh-sec-banner, the component Today's Offer and Daily Streak use,
   so the height, the icon tile and the round enter button are the app's
   own rather than a second set of numbers. Only the margins are this
   block's business. */
.qa-tv-banner.nmh-sec-banner { margin: 12px 0 0 !important; }
.qa-tv-banner .nmh-sec-banner-icon svg,
.qa-tv-orb svg { display: block; }
/* The dash the trending word and the store pills already make, so a swap
   reads as a change rather than a flicker. */
.qa-tv-banner-icon.dash-in, .qa-tv-banner-title.dash-in,
.qa-tv-banner-sub.dash-in, .qa-tv-orb.dash-in {
  animation: nmhTrendWordDash .5s cubic-bezier(.34,1.56,.64,1) both;
}

/* ═══════════════════════════════════════════════════════════════
   THE PROMO CLIP, ON THE TABLET
   Its wrapper used to be `background: transparent`, which is why it had
   nothing behind it. It carries the render's own aspect so the bezel keeps
   its true thickness at any width.
═══════════════════════════════════════════════════════════════ */
.fpv-tab {
  width: 100%; position: relative;
  aspect-ratio: 1339 / 875;      /* the trimmed render's own */
}
.fpv-screen {
  position: relative; width: 100%; height: 100%;
  overflow: hidden; border-radius: 0 !important;
  background: #000;
}
.fpv-video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   QUICK ACCESS — the wrapper
   Neumorphic on the Normal home, glass on the Fashion home (that one comes
   from #fashCubeSec.glass-wrap). The card is .qa-tv-block ITSELF rather
   than a new element around it, because .qa-tv-block is what the layout
   registry matches — wrapping it would make it a grandchild of the home
   wrap and strand the section at the top of the page.
═══════════════════════════════════════════════════════════════ */
#home-nm .qa-tv-block {
  border-radius: 22px !important;
  background: #f0f2f7;
  padding: 18px;
  box-sizing: border-box;
  box-shadow: 7px 7px 16px rgba(0,0,0,0.14), -5px -5px 12px rgba(255,255,255,0.97);
}
#home-nm.nm-dark .qa-tv-block,
body.nm-night #home-nm .qa-tv-block {
  background: #16163c;
  box-shadow: 8px 8px 22px rgba(0,0,0,0.88), -4px -4px 14px rgba(50,50,110,0.32);
}

/* ══════════════════════════════════════════════════════════════════
   NOWSSB CONNECT — the banner clip and the features banner, one block
   Built the same way Quick Access is: a heading, the framed clip, the black
   banner, in one wrapper. It reuses .qa-tv-head and its parts for the
   heading — deliberate, that is the shape being matched, and safe because
   part049.js's rotator scopes every query to .qa-tv-block, which this is
   not. Only the wrapper needs rules of its own.
   ══════════════════════════════════════════════════════════════════ */
#home-nm .nc-blk {
  width: 100%; box-sizing: border-box;
  border-radius: 22px !important;
  background: #f0f2f7;
  padding: 18px;
  box-shadow: 7px 7px 16px rgba(0,0,0,0.14), -5px -5px 12px rgba(255,255,255,0.97);
  margin: 16px 0;
}
#home-nm.nm-dark .nc-blk,
body.nm-night #home-nm .nc-blk {
  background: #16163c;
  box-shadow: 8px 8px 22px rgba(0,0,0,0.88), -4px -4px 14px rgba(50,50,110,0.32);
}
/* On the Fashion home .glass-wrap supplies both the look AND the inset —
   `width: calc(100% - 32px); margin: 18px 16px`. Only the vertical rhythm
   is set here: a `margin` shorthand wipes those 16px side margins while
   leaving the width, which put the whole block hard against the left edge,
   16px out of line with all thirteen of its neighbours. */
:is(#home, .stw-prev-stage) .nc-blk { margin-top: 16px; margin-bottom: 16px; }

/* The clip sits between the heading and the banner. part067.js injects a
   .vb-banner into .nc-blk-vid, so that box is empty until it runs — and an
   empty box between a heading and a banner is a visible gap. */
.nc-blk-vid { display: block; width: 100%; }
.nc-blk-vid:empty { display: none; }
/* .vb-banner is normally a top-level section on the Fashion home and
   carries its own inset for that — `width: calc(100% - 32px); margin: 18px
   16px`. Inside this wrapper the wrapper owns the inset, so the clip gives
   it up: my first pass reset only the margin, which left the tablet 32px
   narrow AND shoved to the left, which is exactly how it looked. */
.nc-blk .vb-banner {
  width: 100% !important;
  margin: 0 0 12px !important;
  box-sizing: border-box;
}
.nc-blk .ncb-carousel { margin: 0 !important; border-radius: 18px !important; }
/* Nothing rotates through this orb, so it carries its own glyph rather than
   the one part049.js swaps into the television's. */
.nc-blk-orb { color: #c8a96e; }
body.nm-night .nc-blk-orb { color: #e8d5a3; }

/* ── The heading disc on the Fashion home ──
   It was glass, which on a photographic background reads as a smudge more
   than a disc. A solid white circle instead, on both sections that use this
   heading — Quick Access and the Connect block. The Normal home's is
   already an all-but-white neumorphic disc and is left alone. */
:is(#home, .stw-prev-stage) .qa-tv-orb {
  background: #ffffff !important;
  border: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  box-shadow: 0 8px 22px rgba(0,0,0,0.34), 0 2px 6px rgba(0,0,0,0.22) !important;
  color: #0a0a12 !important;
}
/* The television's mark is injected by part049.js with gold baked into the
   markup, and the same markup goes into the black banner's tile where gold
   is right — so it is repainted here rather than there, and only here. */
:is(#home, .stw-prev-stage) .qa-tv-orb svg [stroke]:not([stroke="none"]) { stroke: #0a0a12 !important; }
:is(#home, .stw-prev-stage) .qa-tv-orb svg [fill]:not([fill="none"]) { fill: #0a0a12 !important; }

/* ═══════════════════════════════════════════════════════════════
   TWO MORE TABLETS — the ones NowssB Connect wears
   Both renders arrived with transparent margin all round, so both are
   trimmed to their own silhouette; margin inside the box is dead space the
   section pays for on every side. The padding below is each render's own
   bezel, measured off the trimmed file, and every value is a fraction of
   the WIDTH because that is what percentage padding means on all four
   sides. The screen is black painted in CSS and clipped to the content
   box — the renders' screens are transparent and their bezel layer sits
   ABOVE the content, so black in the file would cover what is inside.
═══════════════════════════════════════════════════════════════ */
/* Landscape, wordmark on the bottom bezel — the Connect banner.
   Trimmed 1313x807, screen at x 19-1292, y 23-746. */
.nwsb-inframe.dev-tabc-l {
  /* !important: #sub-promo-card carries an inline padding:0, and an
     inline declaration beats a plain stylesheet one — the bezel simply
     never applied there. */
  padding: 1.752% 1.523% 4.570% 1.447% !important;
  background-color: #000;
  background-clip: content-box;
  -webkit-background-clip: content-box;
}
.nwsb-inframe.dev-tabc-l::after { background-image: url('assets/media/image/tab2-landscape-d7149003.webp'); }

/* Portrait, wordmark on the bottom bezel — the Connect section.
   Trimmed 907x1307, screen at x 22-884, y 35-1257. */
.nwsb-inframe.dev-tabc-p {
  padding: 3.859% 2.426% 5.402%;
  background-color: #000;
  background-clip: content-box;
  -webkit-background-clip: content-box;
}
.nwsb-inframe.dev-tabc-p::after { background-image: url('assets/media/image/tab2-portrait-4f180436.webp'); }

/* ── The Connect BANNER, on the landscape tablet ──
   app/js/part067.js puts the frame classes on the .vb-banner itself rather
   than wrapping it, so the element the layout registry matches
   (.vb-banner[data-vb=vb4] / vb5) is still the same element in the same
   place. .vbf-screen fills the content box, which IS the aperture. */
/* .vb-banner brings overflow:hidden and a 22px radius of its own, and both
   of those CUT THE RENDER: the rounded corners crop the tablet's own
   corners and the clip eats its outer edge. Reset here, with the black
   moved to a content-box-clipped background-color so it still only paints
   the aperture. */
.vb-banner.dev-tabc-l {
  aspect-ratio: 1313 / 807;
  overflow: visible !important;
  border-radius: 0 !important;
  background-image: none !important;
  background-color: #000 !important;
  background-clip: content-box !important;
  -webkit-background-clip: content-box !important;
}
.vb-banner.dev-tabc-l .vbf-screen {
  position: relative; width: 100%; height: 100%;
  overflow: hidden; border-radius: 0 !important; background: #000;
}
.vb-banner.dev-tabc-l .vbf-screen > video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: 0 !important;
}

/* ── The Connect SECTION, on the portrait tablet ──
   Same trick, and for the same reason: .nmh-connect-sec is what the
   registry matches on the Normal home, so the frame goes ON it rather
   than around it. Everything the section had — the clip, the scrim, the
   mark, the copy, the button — moves inside .ncs-screen, which is the
   aperture. */
.nmh-connect-sec.dev-tabs-p {
  aspect-ratio: 847 / 1299;
  /* background-COLOR, not the `background` shorthand: the shorthand resets
     background-clip to border-box, which would spread the black across the
     bezel as well and put a black rectangle behind the whole render. The
     clip stays content-box, so the black is exactly the aperture. */
  background-color: #000 !important;
  background-image: none !important;
  background-clip: content-box !important;
  -webkit-background-clip: content-box !important;
  border: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  display: block !important;
}
.nmh-connect-sec.dev-tabs-p .ncs-screen {
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 22px 20px 24px; box-sizing: border-box;
}
.nmh-connect-sec.dev-tabs-p .nmh-connect-vid,
.nmh-connect-sec.dev-tabs-p .nmh-connect-scrim {
  position: absolute; inset: 0; z-index: 0; border-radius: 0 !important;
}
.nmh-connect-sec.dev-tabs-p .nmh-connect-vid {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.nmh-connect-sec.dev-tabs-p .nmh-connect-scrim { z-index: 1; }
.nmh-connect-sec.dev-tabs-p .nmh-connect-logo,
.nmh-connect-sec.dev-tabs-p .nmh-connect-title,
.nmh-connect-sec.dev-tabs-p .nmh-connect-desc,
.nmh-connect-sec.dev-tabs-p .nmh-connect-enter { position: relative; z-index: 2; }

/* ═══════════════════════════════════════════════════════════════
   TWO MORE TABLETS — the ones Subscription wears
   Measured off the files the same way as the rest: trimmed to their own
   silhouette (transparent margin inside the box is dead space the section
   pays for on every side), then the padding taken from where the screen
   actually sits in the trimmed render. Every value is a fraction of the
   WIDTH, because that is what percentage padding means on all four sides.
═══════════════════════════════════════════════════════════════ */
/* Portrait, speaker slot top-left — the subscription section.
   Trimmed 847x1299, screen at x 28-817, y 44-1264. */
.nwsb-inframe.dev-tabs-p {
  /* !important: #sub-promo-card carries an inline padding:0, and an
     inline declaration beats a plain stylesheet one — the bezel simply
     never applied there. */
  padding: 5.195% 3.424% 4.014% 3.306% !important;
  background-color: #000;
  background-clip: content-box;
  -webkit-background-clip: content-box;
}
.nwsb-inframe.dev-tabs-p::after { background-image: url('assets/media/image/tab3-portrait-19958393.webp'); }

/* Landscape, home button on the bottom bezel — its video banner.
   Trimmed 1157x863, screen at x 25-1133, y 32-794. */
.nwsb-inframe.dev-tabs-l {
  /* !important: #sub-promo-card carries an inline padding:0, and an
     inline declaration beats a plain stylesheet one — the bezel simply
     never applied there. */
  padding: 2.766% 1.988% 5.877% 2.161% !important;
  background-color: #000;
  background-clip: content-box;
  -webkit-background-clip: content-box;
}
.nwsb-inframe.dev-tabs-l::after { background-image: url('assets/media/image/tab3-landscape-0214696c.webp'); }

/* ── The subscription VIDEO BANNER, on the landscape tablet ──
   The frame classes go ON the banner rather than in a wrapper around it:
   .nmh-video-banner.nmh-vb-tall and .fash-vb-tall are what the layout
   registry matches, and a wrapper would make them grandchildren of the
   home wrap and strand the section at the top of the page. */
.nmh-vb-tall.dev-tabs-l,
.fash-vb-tall.dev-tabs-l {
  aspect-ratio: 1157 / 863 !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background-color: #000 !important;
  background-clip: content-box !important;
  -webkit-background-clip: content-box !important;
}
.dev-tabs-l .vbs-screen {
  position: relative; width: 100%; height: 100%;
  overflow: hidden; border-radius: 0 !important; background: #000;
}
.dev-tabs-l .vbs-screen > video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: 0 !important;
}
/* Subscribe Today stays on the screen, not over the bezel. */
.dev-tabs-l .vbs-screen > .nmh-banner-cta,
.dev-tabs-l .vbs-screen > .fash-banner-cta { z-index: 2; }

/* ── The subscription SECTION, on the portrait tablet ──
   Same reasoning. Everything the card had moves inside .fsec-screen, which
   is the aperture — and because that screen is position:relative, the
   card's absolutely-placed labels, copy and Upgrade button resolve against
   it rather than against the bezel. */
.nmh-fsec.dev-tabs-p,
#sub-promo-card.dev-tabs-p {
  aspect-ratio: 847 / 1299 !important;
  min-height: 0 !important;
  height: auto !important;
  background-image: none !important;
  background-color: #000 !important;
  background-clip: content-box !important;
  -webkit-background-clip: content-box !important;
  border: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
}
/* THE SCREEN IS PINNED, not sized.
   height:100% came back 24px short here, and flex:1 could be beaten by an
   inline display (the Fashion card is shown with style.display, which
   would have cancelled a flex container outright). So the screen is
   absolutely positioned to the aperture instead — that cannot be argued
   with by anything else on the box.

   left/right are the render's own bezel percentages, because a percentage
   inset resolves against WIDTH on those sides. top/bottom are the SAME
   bezel converted to a fraction of HEIGHT — 5.195% x 847/1299 = 3.387%,
   4.014% x 847/1299 = 2.617% — because on those two sides a percentage
   resolves against height. The conversion is exact as long as the box
   carries the render's aspect, which it does, right above. */
/* THE SCREEN CARRIES THE APERTURE'S OWN ASPECT.
   Three ways were tried before this one and all three were wrong:
   height:100% came back 24px short (a percentage height against a box whose
   own height comes from aspect-ratio is not dependable once other rules
   touch height and min-height), flex:1 could be cancelled outright by the
   inline `display` the Fashion card is shown with, and percentage insets
   measured right but landed 11px low.
   A block at width:100% of the content box with the APERTURE's aspect needs
   none of that: 790x1221 is the hole in the trimmed render (x 28-817,
   y 44-1264), so the height follows from the width and nothing else. */
/* The Normal home wraps several of its sections in a raised neumorphic
   plate — `#home-nm .nmh-fsec { border: 12px solid #f0f2f7 !important }`.
   That selector is (1,1,0) with !important and beat the frame's own reset
   at (0,2,0), so the card kept a 12px border on every side: the bezel
   render drew over it and the content box came out 24px narrower than the
   frame's arithmetic assumed. This is the same rule one step more
   specific. The plate is the wrong idea here anyway — the tablet IS the
   frame now. */
#home-nm .nmh-fsec.dev-tabs-p {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.dev-tabs-p .fsec-screen,
.dev-tabs-p .ncs-screen {
  position: relative;
  width: 100%; height: auto; aspect-ratio: 790 / 1221;
  overflow: hidden; border-radius: 0 !important; background: #000;
}
.dev-tabs-p .fsec-screen > video,
.dev-tabs-p .fsec-screen > .nmh-fsec-fade {
  position: absolute; inset: 0; z-index: 0; border-radius: 0 !important;
}
.dev-tabs-p .fsec-screen > video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* ═══════════════════════════════════════════════════════════════
   THE LAPTOP — Choose Your Path
   Trimmed to its own silhouette (1443x915) and its screen measured off
   that: x 172-1268, y 44-673. A laptop's screen is only its upper half, so
   the bottom padding is the lid's chin PLUS the whole keyboard base —
   16.701% against 3.049% at the top. Every value is a fraction of the
   WIDTH, because that is what percentage padding means on all four sides.
═══════════════════════════════════════════════════════════════ */
.nwsb-inframe.dev-laptop {
  padding: 3.049% 12.058% 16.701% 11.920% !important;
  background-color: #000;
  background-clip: content-box;
  -webkit-background-clip: content-box;
}
.nwsb-inframe.dev-laptop::after { background-image: url('assets/media/image/laptop-1d74435b.webp'); }

/* The banner wears the frame itself — .vb-banner[data-vb] is what the
   layout registry matches, so a wrapper around it would strand the
   section. .vb-banner's own overflow:hidden and 22px radius are reset for
   the same reason they were on the Connect banner: they crop the render. */
.vb-banner.dev-laptop {
  aspect-ratio: 1443 / 915;
  overflow: visible !important;
  border-radius: 0 !important;
  background-image: none !important;
  background-color: #000 !important;
  background-clip: content-box !important;
  -webkit-background-clip: content-box !important;
}
.vb-banner.dev-laptop .vbf-screen {
  position: relative;
  width: 100%; height: auto; aspect-ratio: 1097 / 630;   /* the aperture's own */
  overflow: hidden; border-radius: 0 !important; background: #000;
}
.vb-banner.dev-laptop .vbf-screen > video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: 0 !important;
}
/* Female / Male and their Enter pills sit ON the screen, not over the lid. */
.vb-banner.dev-laptop .vbf-screen > .vb-g { z-index: 2; }

/* ── Its own wrapper ──
   The banner used to be appended INSIDE the Personalised Healing wrapper,
   so it was part of that section. It is a sibling now with a wrapper of its
   own: glass on the Fashion home, the raised neumorphic card on the Normal
   one, matching what each home does with every other section. */
#home-nm .nwsb-vbwrap {
  width: 100%; box-sizing: border-box;
  border-radius: 22px !important;
  background: #f0f2f7;
  padding: 14px;
  box-shadow: 7px 7px 16px rgba(0,0,0,0.14), -5px -5px 12px rgba(255,255,255,0.97);
  margin: 16px 0;
}
#home-nm.nm-dark .nwsb-vbwrap {
  background: #16163c;
  box-shadow: 8px 8px 22px rgba(0,0,0,0.88), -4px -4px 14px rgba(50,50,110,0.32);
}
:is(#home, .stw-prev-stage) .nwsb-vbwrap { /* .glass-wrap supplies the look on this home */ }

/* ── Nothing gets cut ──
   The clips are 16:9 (1.778) and the apertures are not. object-fit:cover
   fills the hole by cropping the source's sides, and measured against each
   aperture that costs: 18.2% off each side of the subscription banner
   (1.453) — which is what sliced through "NowssB Subscription" — 7.9% off
   the promo (1.638), 2.1% off the laptop (1.741) and 1.0% off the Connect
   banner (1.760).
   `contain` fits the whole frame instead. The screen behind is already
   black, so the letterboxing is invisible — which is also what a real
   tablet does with a 16:9 film. */
.dev-tabs-l .vbs-screen > video,
.dev-tabc-l .vbf-screen > video,
.dev-laptop .vbf-screen > video,
.fpv-video {
  object-fit: contain !important;
  background: #000;
}

/* ── The tablet and the banner under it are two things now ──
   The Connect section and its carousel were built to butt together as one
   block: `:is(#home, .stw-prev-stage) .fash-connect-wrap > .nmh-connect-sec { margin-bottom: 0
   !important }` with the carousel taking the bottom two corners. Now that
   the section is a tablet, the bezel and its feet ran straight into the
   black banner. These are the same two rules one class more specific, so
   they win: a gap between them, and the banner gets all four of its own
   corners back. */
.nmh-connect-sec.dev-tabs-p { margin-bottom: 14px !important; }
:is(#home, .stw-prev-stage) .fash-connect-wrap > .nmh-connect-sec.dev-tabs-p {
  margin-bottom: 14px !important;
  border-radius: 0 !important;
}
:is(#home, .stw-prev-stage) .fash-connect-wrap:has(> .nmh-connect-sec.dev-tabs-p) > .ncb-carousel {
  border-radius: 18px !important;
}
/* Same on the Normal home, where the carousel is a plain sibling. */
#home-nm .nmh-connect-sec.dev-tabs-p + .ncb-carousel { margin-top: 0 !important; }

/* ══════════════════════════════════════════════════════════════════
   HEALING PATH — the clip behind it, and Male / Female each on a tablet
   ══════════════════════════════════════════════════════════════════ */

/* ── The backdrop ──
   The section used to be a still. It is the clip now, sitting inside the
   same .sub-screen-bg box, so the ::after scrim that sheet already draws
   over the background falls on it unchanged — the pseudo-element is the
   last child in paint order, so it covers the video without any z-index
   of its own. */
.gsel-bg-vid {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 30%;
  display: block; border-radius: 0 !important;
  background: #060c18;
}
/* The neumorphic sheet hides most sub-screen backgrounds and then re-shows
   this one further down; the clip has to follow the box either way. */
body.nm-mode #sub-health-journey .gsel-bg,
body.nm-night #sub-health-journey .gsel-bg,
body.nm-glass #sub-health-journey .gsel-bg { display: block !important; }

/* ── Male / Female, each on its own tablet ──
   Same pattern as every other frame in this file: the card IS the tablet.
   Its padding is the bezel, its content box is the aperture, the render
   goes on a pseudo-element above everything, and the black screen is
   painted by background-clip: content-box.
   Trimmed 850x1309, screen at x 25-823, y 46-1271.
   The bezel is NOT padding here, which every other frame in this file uses.
   Percentage padding resolves against the CONTAINING BLOCK's width, not the
   element's own — everywhere else the framed element spans its container so
   the two are the same number, but these two cards are half-width flex
   items, and 5.4118% of the row measured 19.0px where the aperture wanted
   9.25px. So the aperture is described by offsets on the children instead,
   which resolve against this element's own box.
   The attribute selector is there for weight — body.nm-mode
   #sub-health-journey .gsel-card is (1,2,1) with !important on the border,
   radius and shadow, and this has to outrank it in every mode. */
body[class] #sub-health-journey .gsel-card.dev-tabn-p {
  aspect-ratio: 850 / 1309 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;   /* the render must not be clipped */
}
body[class] #sub-health-journey .gsel-card.dev-tabn-p::before {
  content: ''; position: absolute; inset: 0; z-index: 20;
  pointer-events: none;
  background: url('assets/media/image/tab-nowss8-portrait-ddb93026.webp') center / 100% 100% no-repeat;
}
/* The photo and the ::after gradient are inset:0, which resolves against
   the PADDING box — that is the whole tablet, bezel included. Pinning the
   aspect-ratio above makes the height known, so the four offsets can be
   given as percentages and land on the aperture instead: left/right of the
   width, top/bottom of the height. Unlike padding, offsets on an
   absolutely-positioned child resolve against THIS element's box, which is
   the whole reason the bezel is expressed here. */
body[class] #sub-health-journey .gsel-card.dev-tabn-p .gsel-card-img,
body[class] #sub-health-journey .gsel-card.dev-tabn-p::after {
  top: 3.5142% !important; bottom: 2.8266% !important;
  left: 2.9412% !important; right: 3.0588% !important;
  border-radius: 0 !important;
}
/* The photo is also the screen's black backing — it covers the aperture
   exactly, so nothing shows through the glass if the art never loads. */
body[class] #sub-health-journey .gsel-card.dev-tabn-p .gsel-card-img {
  background-color: #000;
}
/* Male / Female and their tag were laid out by justify-content:flex-end
   against the bottom of the card, which is now the bottom of the tablet —
   below the screen. Pinned to the aperture's own bottom corner instead. */
body[class] #sub-health-journey .gsel-card.dev-tabn-p .gsel-card-info {
  position: absolute; z-index: 3;
  left: 2.9412%; right: 3.0588%; bottom: 2.8266%;
}
/* "For You" is the one thing that should stay pinned to the screen's own
   corner rather than the tablet's. */
body[class] #sub-health-journey .gsel-card.dev-tabn-p .gsel-foryou-badge {
  top: 5.5%; right: 7%; z-index: 21;
}
/* The highlight was a border glow and a box-shadow pulse, and neither
   reads on a frame whose edges are a picture. Drop-shadow on the render
   traces the tablet's actual silhouette instead. */
body[class] #sub-health-journey .gsel-card.dev-tabn-p.for-you {
  animation: none !important;
}
body[class] #sub-health-journey .gsel-card.dev-tabn-p.for-you::before {
  filter: drop-shadow(0 0 9px rgba(212,175,55,0.62));
}
/* Two tablets side by side are taller than two 2:3 cards were, so the
   panel gives back the room the old padding was taking. */
#sub-health-journey .gsel-cards:has(> .dev-tabn-p) { gap: 10px; }

/* ── Healing Path's back button ──
   app/app.css does two app-wide things to every .sub-back: it hides the
   inner markup (`.sub-back > * { display:none !important }`) and injects a
   glass-sphere PNG through ::before. That sphere is what was sitting in
   this header. Both are switched off here so the button is nothing but the
   SVG in the markup — a white circle with a left arrow in it — and every
   selector carries the screen's id so it outranks the app-wide ones. */
#sub-health-journey .sub-back.gsel-back {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible !important;
}
#sub-health-journey .sub-back.gsel-back::before,
#sub-health-journey .sub-back.gsel-back::after {
  content: none !important; display: none !important; background: none !important;
}
#sub-health-journey .sub-back.gsel-back > svg {
  display: block !important;
  width: 100% !important; height: 100% !important;
}
#sub-health-journey .sub-back.gsel-back:active { transform: scale(.94); }
/* The neumorphic sheet recolours arrows on this screen by mode — navy in
   light, gold at night. Neither belongs on a white disc. */
body.nm-mode #sub-health-journey .sub-back.gsel-back > svg path,
body.nm-night #sub-health-journey .sub-back.gsel-back > svg path,
body.nm-glass #sub-health-journey .sub-back.gsel-back > svg path { stroke: #0a0a12 !important; }
body[class] #sub-health-journey .sub-back.gsel-back > svg circle { fill: #ffffff !important; }

/* ══════════════════════════════════════════════════════════════════════
   SOUND LIBRARY — a music app's home feed
   Markup in index.html (#sub-sound-library), built by app/js/part080.js.
   ══════════════════════════════════════════════════════════════════════ */

.sl-screen.slm { background: #000 !important; }
.slm .sl-bg, .slm .sl-bg-overlay { display: none !important; }

/* ── Header: brand row + chips, pinned, with the hero clip behind ── */
.slm-head {
  position: relative; z-index: 12; flex-shrink: 0;
  padding-top: max(env(safe-area-inset-top, 10px), 10px);
  background: #000;
}
.slm-head-vid {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; opacity: .38;
  border-radius: 0 !important; z-index: 0;
}
.slm-head-fade {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.78) 55%, #000 100%);
}
/* The clip runs behind the brand row, and some of its frames are bright
   enough to swallow a white chevron whole — measured: the back button was
   present, sized and clickable, and simply could not be seen. These do not
   move anything, they just keep the controls legible on every frame. */
.slm-top svg { filter: drop-shadow(0 1px 3px rgba(0,0,0,.9)); }
.slm-word { text-shadow: 0 1px 4px rgba(0,0,0,.9); }
.slm-top {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px 10px;
}
.slm-back.sl-back-btn {
  width: 32px !important; height: 32px !important;
  min-width: 32px !important; min-height: 32px !important;
  background: transparent !important; border: none !important;
  box-shadow: none !important; padding: 0 !important;
  display: flex !important; align-items: center; justify-content: center;
  flex-shrink: 0; cursor: pointer;
}
/* app/app.css hides the inner markup of every back button and injects a
   glass-sphere PNG through ::before. Both off here — this one is a plain
   chevron, the way a music app's back arrow is. */
.slm-back.sl-back-btn::before, .slm-back.sl-back-btn::after {
  content: none !important; display: none !important; background: none !important;
}
.slm-back.sl-back-btn > svg { display: block !important; width: 22px !important; height: 22px !important; }
.slm-logo { width: 26px; height: 26px; flex-shrink: 0; display: block; }
.slm-logo svg { width: 100%; height: 100%; display: block; }
.slm-word {
  font-family: 'DM Sans', sans-serif; font-size: 19px; font-weight: 800;
  color: #fff; letter-spacing: -.4px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.slm-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
/* app/app.css gives every <button> a 44px min-height for the tap target,
   and min-height beats height — which is why the avatar measured 30x44 and
   drew as an oval. So both of these controls ARE 44 square, and the visible
   mark inside is the size it should look. */
.slm-icon-btn {
  position: relative; width: 44px; height: 44px; flex-shrink: 0;
  background: none; border: none; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.slm-icon-btn svg { width: 22px; height: 22px; display: block; }
.slm-badge {
  position: absolute; top: 3px; right: 2px;
  min-width: 15px; height: 15px; padding: 0 4px;
  border-radius: 999px !important; background: #e5342a; color: #fff;
  font-family: 'DM Sans', sans-serif; font-size: 9px; font-weight: 700;
  align-items: center; justify-content: center;
}
.slm-avatar {
  width: 44px; height: 44px; flex-shrink: 0; cursor: pointer;
  background: none !important; border: none; padding: 0;
  border-radius: 50% !important;
  display: flex; align-items: center; justify-content: center;
}
/* The disc itself — a span, so the button can stay 44 square while this
   stays the 32 it should look, and stays a circle either way. */
.slm-avatar > span {
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 50% !important;
  background: var(--accent); color: #060c18;
  font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 800;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
}

/* ── Chips ── */
.slm-chips {
  position: relative; z-index: 2;
  display: flex; gap: 8px; padding: 2px 14px 12px;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.slm-chips::-webkit-scrollbar { display: none; }
.slm-chip {
  flex: 0 0 auto; cursor: pointer;
  padding: 9px 16px; border: none;
  border-radius: 8px !important;
  background: rgba(255,255,255,.11); color: #fff;
  font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500;
  white-space: nowrap;
}
.slm-chip.on { background: #fff; color: #000; }

/* ── The feed ── */
.slm-feed {
  background: #000 !important;
  /* The app's own bottom navigation is fixed over this screen — the feed
     has to end above it, not under it. */
  padding: 0 0 calc(96px + env(safe-area-inset-bottom, 0px)) !important;
}
.slm-sec { padding: 18px 0 6px; }
.slm-sec-head {
  display: flex; align-items: center; gap: 10px;
  padding: 0 14px 12px;
}
.slm-sec-title {
  margin: 0; flex: 1; min-width: 0;
  font-family: 'DM Sans', sans-serif; font-size: 21px; font-weight: 700;
  color: #fff; letter-spacing: -.3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.slm-pill {
  flex-shrink: 0; cursor: pointer;
  padding: 8px 16px; border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px !important; background: transparent; color: #fff;
  font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500;
  white-space: nowrap;
}
.slm-chev {
  flex-shrink: 0; width: 30px; height: 30px; padding: 0; cursor: pointer;
  background: none; border: none; color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.slm-chev svg { width: 20px; height: 20px; }

/* Artwork is always a square that fills its slot — the store's images are
   a mix of shapes and this is the one thing that has to look uniform. */
.slm-art {
  display: block; width: 100%; height: 100%;
  background: #1a1a1a center / cover no-repeat;
  border-radius: 0 !important;
}

/* ── Speed dial ── */
.slm-sd-head { display: flex; align-items: center; gap: 12px; padding: 0 14px 12px; }
.slm-sd-ava { width: 42px; height: 42px; flex-shrink: 0; border-radius: 50% !important; overflow: hidden; }
.slm-sd-ava .slm-art { border-radius: 50% !important; }
.slm-sd-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.slm-sd-eye {
  font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 500;
  letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255,255,255,.62);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.slm-sd-t { font-family: 'DM Sans', sans-serif; font-size: 21px; font-weight: 700; color: #fff; letter-spacing: -.3px; }
/* One page of nine at a time, snapped, so it swipes rather than scrolls. */
.slm-sd-pages {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.slm-sd-pages::-webkit-scrollbar { display: none; }
.slm-sd-page {
  flex: 0 0 100%; scroll-snap-align: start;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  padding: 0 14px;
}
.slm-sq { position: relative; aspect-ratio: 1 / 1; overflow: hidden; cursor: pointer; }
.slm-sq::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.82) 100%);
}
.slm-sq-t {
  position: absolute; left: 8px; right: 8px; bottom: 7px; z-index: 2;
  font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 700; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.slm-dots { display: flex; justify-content: center; gap: 6px; padding: 14px 0 2px; }
.slm-dot { width: 6px; height: 6px; border-radius: 50% !important; background: rgba(255,255,255,.28); }
.slm-dot.on { background: #fff; }

/* ── Paged row lists ── */
.slm-hpages {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.slm-hpages::-webkit-scrollbar { display: none; }
/* Not 100% — the sliver of the next page is what says "there is more
   sideways", which is the whole reason this is paged and not a column. */
.slm-hpage { flex: 0 0 94%; scroll-snap-align: start; padding: 0 4px 0 14px; }
.slm-row {
  display: flex; align-items: center; gap: 12px;
  padding: 6px 0; cursor: pointer;
}
.slm-row-txt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.slm-row-t {
  font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 500; color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.slm-row-s {
  font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 400; color: rgba(255,255,255,.58);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.slm-more {
  flex-shrink: 0; width: 30px; height: 40px; padding: 0; cursor: pointer;
  background: none; border: none; color: rgba(255,255,255,.75);
  display: flex; align-items: center; justify-content: center;
}
.slm-more svg { width: 4px; height: 16px; }

/* ── Horizontal card rails ── */
.slm-hscroll {
  display: flex; gap: 12px; padding: 0 14px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.slm-hscroll::-webkit-scrollbar { display: none; }

/* The wide 16:9 card */
.slm-big { flex: 0 0 88%; display: flex; flex-direction: column; gap: 6px; cursor: pointer; }
.slm-big-art {
  display: block; width: 100%; aspect-ratio: 16 / 9;
  background: #1a1a1a center / cover no-repeat; border-radius: 0 !important;
}
.slm-big-t {
  font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 500; color: #fff;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.slm-big-s { font-family: 'DM Sans', sans-serif; font-size: 12px; color: rgba(255,255,255,.58); }

/* The 2x2 mosaic */
.slm-mo { flex: 0 0 46%; display: flex; flex-direction: column; gap: 6px; cursor: pointer; }
.slm-mo-grid {
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
  width: 100%; aspect-ratio: 1 / 1; overflow: hidden;
}
.slm-mo-q { display: block; background: #1a1a1a center / cover no-repeat; }
.slm-mo-t {
  font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 500; color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.slm-mo-s { font-family: 'DM Sans', sans-serif; font-size: 12px; color: rgba(255,255,255,.58); }

/* Square covers */
.slm-alb { flex: 0 0 46%; display: flex; flex-direction: column; gap: 6px; cursor: pointer; }
.slm-alb-art {
  display: block; width: 100%; aspect-ratio: 1 / 1;
  background: #1a1a1a center / cover no-repeat;
}
.slm-alb-t {
  font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 500; color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.slm-alb-s { font-family: 'DM Sans', sans-serif; font-size: 12px; color: rgba(255,255,255,.58); }

/* ── The wide promo card ── */
.slm-promo {
  display: flex; margin: 0 14px; overflow: hidden; cursor: pointer;
  border-radius: 12px !important; background: #7fdff2; min-height: 152px;
}
.slm-promo-l { flex: 1 1 58%; min-width: 0; padding: 16px 14px; display: flex; flex-direction: column; }
.slm-promo-t { font-family: 'DM Sans', sans-serif; font-size: 17px; font-weight: 600; color: #06121a; line-height: 1.25; }
.slm-promo-s { font-family: 'DM Sans', sans-serif; font-size: 12px; color: rgba(6,18,26,.68); margin-top: 6px; }
.slm-promo-go { margin-top: auto; color: #06121a; display: block; }
.slm-promo-go svg { width: 26px; height: 26px; display: block; }
.slm-promo-r { flex: 0 0 42%; background: #06121a center / cover no-repeat; }

/* ── Empty state ── */
.slm-empty {
  margin: 6px 14px; padding: 26px 18px; text-align: center;
  background: rgba(255,255,255,.05);
  font-family: 'DM Sans', sans-serif; font-size: 13px; color: rgba(255,255,255,.6);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.slm-empty-cta { border-color: rgba(255,255,255,.4); }

/* The neumorphic and glass sheets repaint most panels by mode. This screen
   is one design in every mode — it is a black feed, on purpose. */
body[class] #sub-sound-library .sl-screen.slm,
body[class] #sub-sound-library .slm-feed { background: #000 !important; }
body[class] #sub-sound-library .slm-sec-title,
body[class] #sub-sound-library .slm-row-t,
body[class] #sub-sound-library .slm-word { color: #fff !important; }

/* This sheet recolours the back arrow on this screen by mode —
   `body.nm-mode #sub-sound-library .sl-back-btn svg path { stroke:#1a1a2e }`
   and a gold one at night. Measured against the header clip that navy
   chevron was invisible: present, 32x32, clickable, and unreadable. The
   header is dark in every mode now, so the arrow is white in every mode. */
body[class] #sub-sound-library .slm-back.sl-back-btn > svg path {
  stroke: #ffffff !important;
}

/* ── Store clips, in the 16:9 card ──
   The card is .slm-big like the rest of that rail; only the picture is a
   <video> instead of a background. preload="none" and a poster, so nothing
   downloads until app/js/part051.js hands it one of its four decoder slots
   — which it does for whichever cards are actually on screen. */
.slm-vidbox {
  display: block; position: relative; width: 100%; aspect-ratio: 16 / 9;
  overflow: hidden; background: #1a1a1a;
}
.slm-vid {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; border-radius: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════════
   SOUND LIBRARY — every picture on a tablet
   Three renders, three roles. The wrapper IS the frame: its padding is the
   bezel, its content box is the aperture, the render sits on ::after above
   everything and the screen is painted black by background-clip.

   Percentage padding resolves against the CONTAINING BLOCK's width — the
   thing that caught the Healing Path cards. It is safe here because
   .slm-fr always spans its parent, so the two widths are the same number.
   Keep it that way: if one of these ever stops being width:100% of its
   card, the bezel goes wrong and nothing will look obviously broken.
   ══════════════════════════════════════════════════════════════════════ */
.slm-fr {
  position: relative; display: block; width: 100%;
  box-sizing: border-box;
  background-color: #000;
  background-clip: content-box;
  -webkit-background-clip: content-box;
  overflow: visible;
}
.slm-fr::after {
  content: ''; position: absolute; inset: 0; z-index: 20;
  pointer-events: none;
  background-position: center; background-size: 100% 100%; background-repeat: no-repeat;
}
/* The picture fills the aperture — which, with padding on a border-box
   element, is exactly the content box. */
.slm-fr > .slm-art,
.slm-fr > .slm-vidbox,
.slm-fr > .slm-mo-grid {
  width: 100%; height: 100%;
  aspect-ratio: auto !important;
  border-radius: 0 !important;
}
.slm-fr > .slm-art, .slm-fr > .slm-vidbox { display: block; }
/* NOT display:block — the mosaic is a 2x2 grid, and blockifying it stacked
   four empty spans and painted nothing. */
.slm-fr > .slm-mo-grid { display: grid; }

/* Wordmark top-left, home slot on the bottom bezel — the 16:9 rails.
   Trimmed 1338x875, screen at x 46-1291, y 65-812; aperture 1.6352. */
.slm-fr.dev-tab4-l {
  aspect-ratio: 1338 / 875;
  padding: 4.8580% 3.4380% 3.5874% 3.4380%;
}
.slm-fr.dev-tab4-l::after { background-image: url('assets/media/image/tab4-landscape-5258e476.webp'); }

/* NOWSSB top-right, round home button — the mosaics and the covers.
   Trimmed 1214x891, screen at x 30-1182, y 46-819; aperture 1.4897. */
.slm-fr.dev-tab5-l {
  aspect-ratio: 1214 / 891;
  padding: 3.7891% 2.5535% 5.8484% 2.4712%;
}
.slm-fr.dev-tab5-l::after { background-image: url('assets/media/image/tab5-landscape-8341cfa8.webp'); }

/* Hairline bezel, label on the chin — the speed-dial tiles, because at a
   third of the screen's width it is the only one of the three whose bezel
   still reads as a bezel rather than as a white border.
   Trimmed 1315x807, screen at x 19-1295, y 22-747; aperture 1.7590, which
   is 16:9 to within half a percent — so a collection banner drops into it
   with nothing cropped. */
.slm-fr.dev-tab6-l {
  aspect-ratio: 1315 / 807;
  padding: 1.6730% 1.4449% 4.4867% 1.4449%;
}
.slm-fr.dev-tab6-l::after { background-image: url('assets/media/image/tab6-landscape-6d9e786f.webp'); }

/* The cards hold a tablet now, not a picture, so the shapes that were
   pinned square or 16:9 hand that job to the frame. */
.slm-sq:has(> .slm-fr),
.slm-big-art.slm-fr, .slm-mo:has(> .slm-fr) .slm-mo-grid { aspect-ratio: auto; }
.slm-sq:has(> .slm-fr) { aspect-ratio: 1315 / 807; overflow: visible; }
.slm-alb:has(> .slm-fr) .slm-alb-art { aspect-ratio: auto; }
/* The 16:9 clips are wider than tab4's aperture; letterbox rather than
   crop, the same call as every other framed clip in this file. The screen
   behind is already black. */
.slm-fr.dev-tab4-l .slm-vid { object-fit: contain; background: #000; }

/* The speed-dial label and its scrim were drawn over the whole card, which
   is now the whole tablet — so both ran across the white chin. Scoped to
   the screen: the scrim onto the picture inside the aperture, the label
   above the chin (59/807 of the render's height) and inside the side
   bezels. */
.slm-sq:has(> .slm-fr)::after { content: none; }
.slm-sq > .slm-fr > .slm-art { position: relative; }
.slm-sq > .slm-fr > .slm-art::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 42%, rgba(0,0,0,0.85) 100%);
}
.slm-sq:has(> .slm-fr) .slm-sq-t {
  left: 4.4%; right: 4.4%;
  bottom: calc(7.31% + 4px);
}

/* The row thumbnails are tablets too. They have to grow to be one: at the
   48px square they were, the hairline bezel works out under a pixel and the
   frame reads as a smudge rather than as a device. 76 wide gives the bezel
   a little over a pixel and the chin three, which is the least that still
   looks deliberate. */
.slm-row > .slm-fr { width: 76px; flex-shrink: 0; }
/* And the bezel has to be pixels here, not percentages. Percentage padding
   resolves against the CONTAINING BLOCK's width — every other frame on this
   screen spans its card so the two agree, but this one is 76px inside a
   ~350px row, and the percentages came out 13px wide. Measured, not
   guessed: 76 x 807/1315 = 46.65 tall, and the render's 19/22/19/59 bezel
   scaled to that is 1.10 / 1.27 / 1.10 / 3.41. */
.slm-row > .slm-fr.dev-tab6-l {
  padding: 1.27px 1.10px 3.41px 1.10px;
}
.slm-row > .slm-art { width: 48px; height: 48px; flex-shrink: 0; }

/* The last two pictures on the screen. Both need the frame to be a CHILD
   that spans its box, for the containing-block reason above — a frame that
   is itself a fraction of its parent gets the bezel wrong. */

/* The speed-dial avatar was a 42px circle. A tablet cannot read at 42px, so
   it grows to 64 wide (47 tall on tab5's aspect), which is exactly the
   height of the two lines of type beside it. */
.slm-sd-ava {
  width: 64px; height: auto; flex-shrink: 0;
  border-radius: 0 !important; overflow: visible;
}
.slm-sd-ava > .slm-fr { width: 100%; }
.slm-sd-ava .slm-art { border-radius: 0 !important; }

/* The promo card's picture used to bleed to the card's edge. It is a
   tablet standing on the panel now, so the panel gets a little room
   around it and centres it. */
.slm-promo-r {
  display: flex; align-items: center; justify-content: center;
  padding: 12px 12px 12px 0;
  background: #06121a;
}
.slm-promo-r > .slm-fr { width: 100%; }

/* ── The frame renders must not escape their own frame ──
   Every device render sits on a pseudo-element at z-index 20, which is only
   ever meant to be "above this frame's own screen". It was competing with
   the page instead: .nmh-toprow is position:sticky at z-index 10 in the
   same stacking context, so scrolling any framed section under the Normal
   home's header painted the tablet's bezel straight over it. Measured: 6 of
   6 framed sections on that home did it.

   isolate gives each frame a stacking context of its own, so the 20 is
   scoped to the frame and the frame itself sits in ordinary document order
   — underneath the header, where it belongs. Nothing inside a frame moves
   relative to anything else inside it. */
.nwsb-inframe,
.slm-fr,
body[class] #sub-health-journey .gsel-card.dev-tabn-p {
  isolation: isolate;
}

/* ── The background picker's Apply button ──
   A swipe previews now; this is what chooses. Same pill the mode's other
   actions use, full width under the caption so it reads as the step after
   swiping rather than as decoration beside it. */
.fp-pick-apply {
  display: block; width: 100%; max-width: 320px;
  margin: 14px auto 0; padding: 13px 18px;
  border: 1px solid rgba(232,213,163,0.55);
  border-radius: 999px !important;
  background: rgba(232,213,163,0.14);
  color: #e8d5a3;
  font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 700;
  letter-spacing: 0.3px; cursor: pointer;
  transition: transform .14s, background .2s;
}
.fp-pick-apply:active { transform: scale(.97); background: rgba(232,213,163,0.24); }
/* Already the one in use: still there so the row does not jump, but plainly
   not a thing to press. */
.fp-pick-apply.on {
  background: transparent; border-color: rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.42); cursor: default;
}

/* ══════════════════════════════════════════════════════════════════════
   THE BUILT SENTENCE — centred card, blurred page behind it
   (markup in index.html #wlSentModal, behaviour in app/js/part015.js)

   The blur is the point of the thing: the library is still there, still
   in place, but it stops competing with the sentence. backdrop-filter is
   normally avoided in this app because it forces real-time compositing
   over whatever is behind it — here it runs on ONE element, only while
   the card is open, and over a static list rather than a playing video.
   ══════════════════════════════════════════════════════════════════════ */
.wls-modal {
  /* above .wl-overlay (z-index 9999) — the card must sit over the
     library it was built from, not behind it */
  position: fixed; inset: 0; z-index: 10050;
  display: flex; align-items: center; justify-content: center;
  padding: 24px 18px;
  background: rgba(3, 6, 14, .58);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
          backdrop-filter: blur(16px) saturate(120%);
  opacity: 0; pointer-events: none;
  transition: opacity .28s ease;
}
.wls-modal.open { opacity: 1; pointer-events: auto; }

.wls-card {
  width: 100%; max-width: 420px; max-height: 82vh; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px 20px 18px;
  background: #0a0f1c;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 24px !important;
  box-shadow: 0 30px 70px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.07);
  transform: translateY(18px) scale(.97);
  transition: transform .32s cubic-bezier(.2,1,.3,1);
}
.wls-modal.open .wls-card { transform: translateY(0) scale(1); }
.wls-card::-webkit-scrollbar { display: none; }

.wls-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.wls-eyebrow {
  flex: 1; min-width: 0;
  font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 800;
  letter-spacing: 2.2px; text-transform: uppercase; color: #e8d5a3;
}
/* the same white disc as every other close/back button */
.wls-x {
  width: 34px !important; height: 34px !important;
  min-width: 34px !important; min-height: 34px !important;
  flex-shrink: 0; padding: 0; cursor: pointer;
  border: none !important; border-radius: 50% !important;
  background: #ffffff !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.34);
  display: flex; align-items: center; justify-content: center;
}
.wls-x svg { width: 13px; height: 13px; display: block; }
.wls-x:active { transform: scale(.92); }

.wls-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 20px; font-weight: 300; line-height: 1.62;
  color: rgba(255,255,255,.93);
}
.wls-text.wls-err { font-size: 15px; color: rgba(255,255,255,.72); }
/* a highlighted word — tappable, and it looks it */
.wls-w {
  color: #e8d5a3; font-weight: 700; cursor: pointer;
  border-bottom: 1px dashed rgba(232,213,163,.5);
}
.wls-w:active { opacity: .6; }

.wls-mean {
  display: none; margin-top: 14px; padding: 12px 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-left: 2px solid #e8d5a3;
  border-radius: 12px !important;
  font-family: 'DM Sans', sans-serif; font-size: 12px; line-height: 1.55;
}
.wls-mean.show { display: block; }
.wls-mean strong { color: #e8d5a3; letter-spacing: 1px; }
.wls-genre {
  margin-left: 8px; padding: 2px 7px; border-radius: 999px !important;
  background: rgba(232,213,163,.14); color: rgba(232,213,163,.9);
  font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
}
.wls-mean-txt { color: rgba(255,255,255,.62); }

.wls-actions { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.wls-btn {
  flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0 12px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid rgba(255,255,255,.16); border-radius: 14px !important;
  background: rgba(255,255,255,.06); color: rgba(255,255,255,.9);
  font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: .6px; white-space: nowrap;
}
.wls-btn svg { width: 11px; height: 12px; display: block; flex-shrink: 0; }
.wls-btn:active { transform: scale(.96); }
.wls-btn-go {
  background: #e8d5a3; border-color: #e8d5a3; color: #0a0f1c;
  box-shadow: 0 8px 20px rgba(232,213,163,.22);
}

.wls-hint {
  margin-top: 12px; text-align: center;
  font-family: 'DM Sans', sans-serif; font-size: 10px; letter-spacing: .6px;
  color: rgba(255,255,255,.38);
}

/* ══════════════════════════════════════════════════════════════════════
   SUBSCRIPTION and CHOOSE YOUR PATH, as blocks
   Both were a bare framed clip sitting on the page with nothing saying
   what they were. They are built like Quick Access and Connect now: an
   orb and two lines of heading, the clip, and one black banner under it
   saying where it goes.

   They get their own class rather than reusing .nc-blk, because the
   layout registry matches ':scope > sel' — a second .nc-blk on the same
   home would make Connect's entry match two elements and move both.
   ══════════════════════════════════════════════════════════════════════ */
#home-nm .nsub-blk,
#home-nm .nedi-blk,
#home-nm .nvb-blk,
#home-nm .nwsb-vbwrap[data-vbwrap] {
  width: 100%; box-sizing: border-box;
  border-radius: 22px !important;
  background: #f0f2f7;
  padding: 18px;
  box-shadow: 7px 7px 16px rgba(0,0,0,0.14), -5px -5px 12px rgba(255,255,255,0.97);
  margin: 16px 0;
}
body.nm-night #home-nm .nsub-blk,
body.nm-night #home-nm .nedi-blk,
body.nm-night #home-nm .nvb-blk,
body.nm-night #home-nm .nwsb-vbwrap[data-vbwrap] {
  background: #16163c;
  box-shadow: 8px 8px 22px rgba(0,0,0,0.88), -4px -4px 14px rgba(50,50,110,0.32);
}
/* ── The streak clip is the tablet and nothing else ──
   .nsvb-blk is on the render itself now, so it carries no card of its own:
   no fill, no raised shadow, no padding but the bezel that .dev-tab-l
   measures. Only the rhythm between it and its neighbours is stated here.
   The black is the aperture — background-clip:content-box keeps it off the
   bezel, so it never paints a rectangle behind the render's own corners. */
#home-nm .nsvb-blk {
  width: 100%; box-sizing: border-box;
  background: none;
  background-color: #000;
  background-clip: content-box;
  -webkit-background-clip: content-box;
  border: none;
  box-shadow: none;
  margin: 16px 0;
  /* .hero-vid-banner brings overflow:hidden and a 22px radius, and both cut
     the render: the rounded corners crop the tablet's own corners and the
     clip eats its outer edge — the same reset .vb-banner.dev-tabc-l needs. */
  overflow: visible !important;
  border-radius: 0 !important;
}
:is(#home, .stw-prev-stage) .nsub-blk, :is(#home, .stw-prev-stage) .nedi-blk, :is(#home, .stw-prev-stage) .nvb-blk, :is(#home, .stw-prev-stage) .nsvb-blk { margin-top: 16px; margin-bottom: 16px; }

/* the framed clip inside a block fills it and clears the banner below */
.nsub-blk .nmh-video-banner,
.nsub-blk .fash-video-banner,
.nsvb-blk > .hero-vid-banner,
.nedi-blk > .nmh-fsec,
.nedi-blk > #sub-promo-card,
.nvb-blk > .vb-banner,
.nwsb-vbwrap[data-vbwrap] > .vb-banner {
  width: 100% !important;
  margin: 0 0 12px !important;
  box-sizing: border-box;
}
/* the black banner at the foot of a block */
.nsub-blk .ncb-carousel,
.nwsb-vbwrap[data-vbwrap] .ncb-carousel {
  margin: 0 !important;
  border-radius: 18px !important;
  cursor: pointer;
}
.nsub-ban .ncb-slide { padding: 20px; }
.nsub-blk-orb { color: #c8a96e; }
body.nm-night .nsub-blk-orb { color: #e8d5a3; }

/* ══════════════════════════════════════════════════════════════════════
   THE FASHION HOME'S HERO, INSIDE THE TV
   The element IS the frame: assets/media/image/tv-hero-portrait-c066fac1.webp is the
   section's background, stretched to it, and everything the hero draws is
   inset to the aperture. The section stops being 100dvh and takes the
   render's own ratio instead, so the TV is never squashed to fit a
   viewport it does not match — on a 390-wide screen that makes it 756px
   tall against the 844 it used to be.

   Aperture in the render (727x1409): x 25..708, y 30..1307
     3.439% from the left, 2.476% from the right,
     2.129% from the top,  7.168% from the bottom (the stand).
   ══════════════════════════════════════════════════════════════════════ */
.hero-section.hero-tv {
  height: auto !important;
  aspect-ratio: 727 / 1409;
  /* The render carries an alpha channel — it was exported on black and the
     black is transparent now, so the page shows through around the set and
     between its legs instead of a black slab sitting under it. */
  background: url('assets/media/image/tv-hero-portrait-c066fac1.webp?v=2') center / 100% 100% no-repeat;
  overflow: visible;
  /* Start BELOW the fixed header. #homeHeader is position:fixed, so the
     set's top bezel — and the wordmark and buttons drawn on it — were
     scrolling underneath it. The old hero cleared the header with 160px of
     content padding, which is gone. --home-header-h is measured in
     index.html; the fallback covers the first paint before it is set. */
  margin-top: var(--home-header-h, calc(env(safe-area-inset-top, 14px) + 62px));
  margin-bottom: 8px;
  /* ── Sized to fit between the header and the nav ──
     Full width made the set 756px tall on a 390 screen, and with the
     header above it and the bottom nav over it there is only about 675px
     of clear glass — so the stand fell off the bottom. The WIDTH is
     capped by the height that is actually free, and the ratio does the
     rest: nothing about the set changes except its size. */
  /* max() on the nav because --nav-height reads 0 while the nav is hidden,
     and the set must not size itself for a bar that is about to come back.
     The 44px covers the screen's own top offset above this margin plus a
     gap over the nav, so the stand always clears it. */
  --tv-free-h: calc(100dvh - var(--home-header-h, 91px) - max(58px, var(--nav-height, 58px)) - env(safe-area-inset-bottom, 0px) - 44px);
  width: min(100%, calc(var(--tv-free-h) * 727 / 1409));
  margin-left: auto;
  margin-right: auto;
}
/* the crossfading photographs and the content share the screen. The film is
   NOT here: it sits inside .hero-content now, so it is already inset to the
   aperture by its parent and a second inset would apply the bezel twice. */
.hero-tv .hero-bg,
.hero-tv .hero-content {
  inset: auto;
  left: 3.439%; right: 2.476%; top: 2.129%; bottom: 7.168%;
}
.hero-tv .hero-bg { background-color: #000; }

/* ══ THE HERO'S FILM ══
   The picture behind the header, in all three looks. It replaces the five
   crossfading photographs rather than joining them — they are hidden
   wherever it plays, so there is one picture, not two stacked.

   z-index 0 puts it under .hero-content (z-index 5), which is the whole
   point: in the television look the geometry above insets it to the set's
   aperture, so the clip plays IN the screen and the wordmark, the rotating
   word, the search button and Explore / Help & Coach all sit on top of it —
   everything the header draws is inside the television.

   `width/height: auto` matters in the television look: the inset above
   positions all four edges, and a 100% width against that would size it to
   the SECTION and push it out of the aperture on the right. */
.hero-bg-vid {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  background: #000;
  border-radius: inherit;
  /* The film is the point of the header, so it is dimmed only as far as the
     type above it needs and no further. A 0.52-0.64 scrim was covering it
     almost completely — this is one even step down instead, and the copy
     carries its own shadow for the rest. */
  filter: brightness(0.82);
}
.hero-tv .hero-bg-vid { border-radius: 0; }
/* one picture, not two: the photographs are what the film replaces */
.hero-section .hero-bg { display: none !important; }
/* The content was padded for a full viewport. Inside the screen it has
   about 367x686 to work with on a 390-wide phone, so the padding comes
   down to match — the 160px top alone was a quarter of it. */
.hero-tv .hero-content {
  padding: 26px 16px 22px;
}
.hero-tv .hero-content > div:first-of-type {
  margin-left: 4px !important; margin-right: 4px !important;
}
.hero-tv .brand-name { font-size: clamp(24px, 7vw, 38px) !important; }
.hero-tv .hero-glass { height: 118px; }
.hero-tv .hero-word-wrap { margin-top: 8px; height: 40px; }
.hero-tv .hero-btns { margin-top: 10px; }
.hero-tv .hero-bottom > div:first-child {
  margin-bottom: 16px !important; padding-left: 8px !important;
}

/* The black banners were carrying .ncb-carousel's neumorphic shadow —
   8px 8px 20px rgba(163,177,198,0.5) and a WHITE -6px -6px 14px. That pair
   is light-home furniture: it is what makes a card read as raised out of
   the Normal home's pale grey. On the Fashion home's dark glass the white
   half has nothing to sit against and reads as a halo around the bar.

   Stated once for EVERY black bar on this home rather than per block. It
   was two selectors, and each new section that grew a bar grew the halo
   again — the store's two are exactly that. A dark surface never wants the
   white shadow, so that is the rule. */
:is(#home, .stw-prev-stage) .ncb-carousel {
  box-shadow: 0 10px 26px rgba(0,0,0,0.45) !important;
}

/* On a short screen the free height is small, so the set is small, so the
   screen inside it is small — 217x405 on a 360x640 phone. The hero's
   furniture was sized for a full viewport and pushed out through the
   bezel there. It comes down to match. */
@media (max-height: 740px) {
  .hero-tv .hero-content { padding: 14px 10px 12px; }
  .hero-tv .brand-name { font-size: 21px !important; }
  .hero-tv .hero-cust-btn,
  .hero-tv .hero-feat-btn,
  .hero-tv .hero-search-btn { width: 32px !important; height: 32px !important;
    min-width: 32px !important; min-height: 32px !important; }
  .hero-tv .hero-search-ic { width: 16px !important; height: 16px !important; }
  .hero-tv .hero-glass { height: 84px; }
  .hero-tv .hero-word-wrap { margin-top: 4px; height: 30px; }
  .hero-tv .hero-word { font-size: 26px !important; }
  .hero-tv .hero-btns { margin-top: 7px; gap: 7px; }
  .hero-tv .hero-btn { padding: 8px 12px !important; font-size: 10px !important; }
  .hero-tv .hero-bottom > div:first-child { margin-bottom: 8px !important; }
  .hero-tv .hero-bottom > div:first-child .brand-tag { font-size: 11px !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   THE PLAIN HEADER — the third way the hero can look
   Neither the set nor the full-bleed photographs: an ordinary app header.
   No rotating artwork behind it, no rail of five pictures inside it — the
   wordmark, the tagline, the search, today's word and the two buttons on
   the app's own dark card, sized to its content instead of to the screen.

   It is the same markup as the other two. What makes a hero a television
   is a class, and what makes it plain is this one: the photographs and the
   picture rail are hidden rather than removed, so switching back brings
   them straight back with no rebuild.
   ══════════════════════════════════════════════════════════════════════ */
/* ── The greeting, above the card ──
   The Normal home opens by saying hello; this one did not, and started
   cold with a wordmark. It clears the fixed header — that is what
   --home-header-h measures — and the card follows it rather than carrying
   the offset itself. */
.hs-greet {
  /* Real room above and below it — it is the first thing on the page and
     it was sitting on the header's shoulder. */
  margin: calc(var(--home-header-h, 92px) + 22px) 20px 22px;
  display: flex; align-items: flex-start; gap: 14px;
}
.hs-greet-txt { flex: 1; min-width: 0; }
/* The disc the Normal home's greeting wears — the same size, the same mark
   reading the same clock — but flat. No neumorphism, no white, no shadow:
   a thin ring and the app's gold, which is all this needs on glass. */
.hs-orb {
  width: 58px; height: 58px; flex-shrink: 0; margin-top: 2px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.20);
  box-shadow: none !important;
  color: #e8d5a3;
}
.hs-orb svg { width: 27px; height: 27px; display: block; }
/* The Normal home's greeting exactly — 20/400 at 62%, then 27/800, then
   the line under it — and nothing else it wears: no neumorphic disc, no
   white, no shadow. Type only. */
.hs-hello {
  font-family: 'DM Sans', sans-serif; font-size: 22px; font-weight: 400;
  letter-spacing: -0.2px; color: rgba(255,255,255,0.62); line-height: 1.14;
  text-shadow: none;
}
.hs-name {
  margin-top: 1px;
  font-family: 'DM Sans', sans-serif; font-size: 31px; font-weight: 800;
  letter-spacing: -0.7px; color: #fff; line-height: 1.1;
  text-shadow: none;
}
.hs-line {
  margin-top: 7px;
  font-family: 'DM Sans', sans-serif; font-size: 13.5px; font-weight: 400;
  color: rgba(255,255,255,0.6); text-shadow: none;
}

.hero-section.hero-simple {
  height: auto !important;
  aspect-ratio: auto;
  /* ── Glass ──
     Behind this card is either the Fashion Plus film or the home's own
     artwork, and both are worth seeing through. A translucent fill, a lit
     top edge and a real blur — the same glass the rest of the Fashion home
     is built from, at the size the hero needs it. */
  background:
    /* the lit face of the glass … */
    linear-gradient(158deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.06) 40%, rgba(255,255,255,0.02) 100%),
    /* … over a dark base, so white type is legible whatever is behind it.
       Glass alone reads beautifully over the film and disappears over a
       bright frame of it; this keeps the contrast without closing it. */
    linear-gradient(180deg, rgba(6,12,24,0.52) 0%, rgba(6,12,24,0.64) 100%);
  border: 1px solid rgba(255,255,255,0.18);
  /* Pointy. A 26px radius on a card whose whole content is a rectangular
     television fought the thing inside it — the glass rounded off corners
     the set squares up. Square corners, and the two agree — unless
     Customize says round, which is the rule at the foot of this file. */
  border-radius: 0 !important;
  overflow: hidden;
  -webkit-backdrop-filter: blur(26px) saturate(1.5);
          backdrop-filter: blur(26px) saturate(1.5);
  box-shadow:
    0 22px 54px rgba(0,0,0,0.46),
    inset 0 1px 0 rgba(255,255,255,0.30),
    inset 0 -1px 0 rgba(255,255,255,0.06);
  /* the greeting above carries the header offset now */
  margin: 0 16px 16px;
  width: auto;
  /* The set sits INSIDE the glass rather than flush to its edge — without
     this the card's border traces the television's own outline and the
     wrapper stops reading as a wrapper. The render's feet and its
     transparent corners show the glass through them, which is the join. */
  /* ── Room below the set ──
     The sides come in so the television itself is bigger, and the foot
     opens up so there is somewhere INSIDE the glass and OUTSIDE the set
     for the guide's disc to stand. It used to hang over the bezel, which
     is the one place on this card that already has something drawn on it. */
  padding: 8px 8px 62px;
  box-sizing: border-box;
}
/* Without the greeting — the look applied before its furniture is built —
   the card still has to clear the header on its own. */
.hero-section.hero-simple:first-child {
  margin-top: calc(var(--home-header-h, 92px) + 6px);
}
/* the five crossfading photographs and the five-picture rail are what
   this look is defined by NOT having */
.hero-simple .hero-bg,
.hero-simple .hero-glass { display: none !important; }
/* ══ THE PLAIN HERO IS A TELEVISION, IN GLASS ══
   The section stays the glass wrapper — that is the card you see around it.
   .hero-content becomes the set itself: the same landscape render
   .nwsb-inframe.dev-tv-l wears (assets/frames/tv-l-*), built the same way,
   caps top and bottom with the side rails tiled between.

   It is stated here rather than by putting `nwsb-inframe dev-tv-l` in the
   markup, because those classes on the hero would paint the set in all
   THREE looks — the television look already has a portrait set of its own,
   and the full-screen look is meant to have none.

   The aspect ratio is the render's own (1452x831 trimmed). It has to be
   fixed rather than content-driven: the rails stop at `bottom: 14.922%`,
   which is the bottom cap's height as a fraction of the render's HEIGHT,
   and that number is only correct while the box keeps the render's shape. */
/* Out of the layout everywhere but here, so the television and full-screen
   looks are untouched and .hero-content stays their direct child. */
.hero-tvbox { display: contents; }

/* ── The set ──
   Built the way .nmh-quick-tv is, because that one is right and this one
   was not: the frame carries the render's own aspect ratio and its padding
   is the bezel, and that is the whole of it. */
.hero-simple .hero-tvbox {
  display: block;
  position: relative; width: 100%;
  /* NEVER shrink. The card is a flex column now, and as a flex item this
     box was free to be squashed shorter than its own ratio when the strips
     above and below it wanted room — the aperture is percentage padding of
     the WIDTH, so a shortened box leaves the screen the same size inside a
     smaller frame: the bezel art rides up, the picture overflows it, and
     the foot turns into a white slab with the feet hanging off it. */
  flex-shrink: 0;
  aspect-ratio: 1452 / 831;      /* the trimmed render's own */
  padding: 2.410% 1.791% 8.540% 1.928%;
  box-sizing: border-box;
  /* the screen, clipped to the aperture: the render's own screen is
     transparent and its bezel sits ABOVE the content, so black in the file
     would have covered everything inside */
  background-color: #000;
  background-clip: content-box;
  -webkit-background-clip: content-box;
}
/* the two caps */
.hero-simple .hero-tvbox::after {
  content: ''; position: absolute; inset: 0; z-index: 20; pointer-events: none;
  background-image: url('assets/media/image/tv-l-top-ebc3578b.webp'),
                    url('assets/media/image/tv-l-bottom-c847689d.webp');
  background-position: top center, bottom center;
  background-size: 100% auto, 100% auto;
  background-repeat: no-repeat, no-repeat;
}
/* the side rails, tiled, stopped at the top of the bottom bezel. 14.922% is
   124/831 — the bottom cap's height as a fraction of the render's HEIGHT,
   which is this box's height because the aspect above is fixed. */
.hero-simple .hero-tvbox::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 14.922%;
  z-index: 19; pointer-events: none;
  background: url('assets/media/image/tv-l-mid-9b5cea85.webp') top center / 100% 8px repeat-y;
}
/* ── The screen ──
   A plain 100%/100% child of the frame, exactly like .qa-tv-screen. The
   frame's content box IS the aperture, so this fills the glass with no
   inset numbers to keep in step with the padding — which is what the last
   attempt got wrong by insetting the clip against the frame's PADDING box
   and pushing the whole set out of its card. */
.hero-simple .hero-content {
  position: relative; inset: auto;
  width: 100%; height: 100%;
  padding: 0;
  overflow: hidden;
  border-radius: 0 !important;
  display: flex; flex-direction: column; justify-content: center;
  gap: 0;
  z-index: 1;
}
/* the film fills the screen, under everything the header draws */
.hero-simple .hero-bg-vid {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  border-radius: 0;
}
.hero-simple .hero-content > *:not(.hero-bg-vid) { position: relative; z-index: 2; }
/* ── Sized to the screen, not to the page ──
   The aperture of a landscape set inside a 16px-inset card is about 296
   wide and 142 tall on a 360 phone, and what has to go in it is the
   wordmark, the search, two lines of copy, the rotating word and both
   buttons. Everything below is that, and only that: the same furniture at
   the size the screen actually has room for. In vw so it holds its
   proportions on a wider phone, since the set scales with the card. */
.hero-simple .hero-content > div:first-of-type {
  margin-left: 0 !important; margin-right: 0 !important;
}
.hero-simple .brand-name { font-size: clamp(17px, 5.4vw, 26px) !important; }
.hero-simple .hero-bottom { padding: 0; }
.hero-simple .hero-bottom > div:first-child {
  margin-bottom: clamp(3px, 1.1vw, 6px) !important; padding-left: 0 !important;
}
.hero-simple .hero-bottom > div:first-child .brand-tag {
  font-size: clamp(8px, 2.5vw, 11px) !important;
}
.hero-simple #heroTagline { font-size: clamp(6.5px, 2vw, 9px) !important; letter-spacing: 1.4px; }
.hero-simple .hero-word-wrap { margin-top: 0; height: auto; }
.hero-simple .hero-word { font-size: clamp(15px, 4.8vw, 24px) !important; }
.hero-simple .hero-btns { margin-top: clamp(5px, 1.8vw, 9px); gap: 6px; }
.hero-simple .hero-btn {
  padding: clamp(5px, 1.6vw, 8px) clamp(8px, 2.6vw, 13px) !important;
  font-size: clamp(7px, 2.1vw, 10px) !important;
}
.hero-simple .hero-search-btn {
  width: clamp(26px, 7.6vw, 36px) !important; height: clamp(26px, 7.6vw, 36px) !important;
}
.hero-simple .hero-search-ic { width: clamp(13px, 3.8vw, 18px) !important; height: clamp(13px, 3.8vw, 18px) !important; }
/* the copy carries its own contrast now that the scrim over the film is
   only a single even step of brightness */
.hero-simple .hero-content .brand-name,
.hero-simple .hero-content .brand-tag,
.hero-simple .hero-content .hero-word,
.hero-simple .hero-content #heroTagline { text-shadow: 0 2px 10px rgba(0,0,0,0.85); }
/* The secondary hero action uses a chevron drawn from two borders rather
   than a glyph, so it takes the button's own colour and needs no asset. */
.hero-simple .hero-btn-s { display: inline-flex !important; align-items: center; gap: 9px; }
.hero-simple .hero-btn-s::after {
  content: ''; flex-shrink: 0;
  width: 6px; height: 6px;
  border-right: 1.7px solid currentColor;
  border-top: 1.7px solid currentColor;
  transform: rotate(45deg);
  opacity: .85;
}

/* ══════════════════════════════════════════════════════════════════
   THE DECK — one place, one thing in it

   The hero card does not sit above the banners; it IS the first of them.
   It holds the deck for a few seconds, leaves to the LEFT, and the five
   banners come through FROM THE RIGHT one after another before it comes
   back round. Nothing to press but the banner you are looking at — no
   dots, no arrows, it runs itself.

   The box takes the height of whatever is in it, animated, because a hero
   card and a tablet are not the same height and a box that jumps between
   them is the difference between an app and a page.
   ══════════════════════════════════════════════════════════════════ */
.hs-deck {
  position: relative;
  margin: 0 16px 18px;
  height: 320px;                     /* replaced from the live cell */
  transition: height .58s cubic-bezier(.22,1,.28,1);
}
.hs-cell {
  position: absolute; top: 0; left: 0; width: 100%;
  display: block; padding: 0 !important; margin: 0 !important;
  min-height: 0 !important;
  text-align: left; color: inherit;
  /* everything unseen waits off to the right */
  transform: translateX(106%);
  opacity: 0;
  /* a touch of overshoot as it lands — the small wobble that tells you a
     thing arrived rather than appeared */
  transition: transform .72s cubic-bezier(.22,1.16,.32,1), opacity .34s ease;
  will-change: transform;
  pointer-events: none;
}
.hs-cell.on  { transform: translateX(0);      opacity: 1; z-index: 2; pointer-events: auto; }
.hs-cell.out { transform: translateX(-106%);  opacity: 0; z-index: 1; }
/* ── Going back ──
   Swiping the other way has to look like the other way: the deck's whole
   sense of direction is mirrored while this class is on it, so the cell
   being left goes out to the RIGHT and the one arriving comes in from the
   LEFT. Without it a backward swipe played the forward animation and read
   as another step onward. app/js/part083.js sets it per move. */
.hs-deck.hs-back .hs-cell     { transform: translateX(-106%); }
.hs-deck.hs-back .hs-cell.on  { transform: translateX(0); }
.hs-deck.hs-back .hs-cell.out { transform: translateX(106%); }

/* the hero card, as the deck's first cell: it keeps its glass and loses
   the margins it had when it stood on its own */
.hs-deck > .hero-section.hero-simple {
  margin: 0 !important;
  width: 100% !important;
  /* .hs-cell zeroes every cell's padding with an !important of its own, and
     that took the glass wrapper's inset with it — the set then sat flush to
     the card, where the card's overflow:hidden cut its feet off. This is
     the padding that actually applies to the hero in the deck, so it is the
     one carrying the geometry: tight at the sides so the television is as
     big as the card allows, and open at the foot so the guide's disc has
     somewhere to stand that is inside the glass and outside the set. */
  /* The strips above and below the set are real children now, so they take
     their own height — the card only has to hold them apart from its edge. */
  padding: 8px !important;
  display: flex !important; flex-direction: column;
  box-sizing: border-box;
}

/* a banner: a rounded glass wrapper with a tablet in it */
.hs-ban {
  box-sizing: border-box;
  padding: 12px !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  border-radius: 0 !important;   /* square, like the hero card it follows */
  background:
    linear-gradient(158deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.05) 44%, rgba(255,255,255,0.02) 100%),
    linear-gradient(180deg, rgba(6,12,24,0.48) 0%, rgba(6,12,24,0.60) 100%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
          backdrop-filter: blur(22px) saturate(1.4);
  box-shadow: 0 18px 44px rgba(0,0,0,0.44), inset 0 1px 0 rgba(255,255,255,0.26);
  cursor: pointer;
}
.hs-ban:active { transform: translateX(0) scale(.985); }
/* The heading every one of these blocks wears on the page: a disc with a
   mark, a light line and a heavy one. Here the disc is white with a dark
   glyph, the way it reads on Subscription and Choose Your Path. */
.hs-head {
  display: flex; align-items: center; gap: 14px;
  padding: 2px 2px 14px;
}
.hs-ban .hs-orb {
  width: 54px; height: 54px; margin-top: 0;
  background: #f4f6fb; border: none; color: #0a1224;
}
.hs-ban .hs-orb svg { width: 26px; height: 26px; }
.hs-head-txt { flex: 1; min-width: 0; display: block; text-align: left; }
.hs-head-h {
  display: block;
  font-family: 'DM Sans', sans-serif; font-size: 19px; font-weight: 400;
  letter-spacing: -0.2px; color: rgba(255,255,255,0.66); line-height: 1.14;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hs-head-t {
  display: block; margin-top: 1px;
  font-family: 'DM Sans', sans-serif; font-size: 24px; font-weight: 800;
  letter-spacing: -0.6px; color: #fff; line-height: 1.12;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hs-tab {
  display: block; position: relative; width: 100%;
  aspect-ratio: 1339 / 875;          /* the tablet render's own */
  background-color: #000;
}
.hs-vid {
  position: relative; z-index: 1;
  width: 100% !important; height: 100% !important;
  object-fit: cover; display: block;
  border-radius: 7px;
}

@media (prefers-reduced-motion: reduce) {
  .hs-cell { transition: opacity .3s ease; transform: none !important; }
  .hs-cell:not(.on) { opacity: 0; }
  .hs-deck { transition: none; }
}


/* ══════════════════════════════════════════════════════════════════════
   THE HERO ROW — Customize · Features · Earn
   Customize and All Features came out of the hero: two image buttons
   crowding the wordmark inside a screen that is already small now the
   hero is a TV. They sit on the lit tab under it — the same frame and
   the same clip as the player's Sentence · Practice · Store row, so the
   two read as the same kind of control.

   The element IS the frame. Aperture in word-acts-tab.webp (1371x317):
   1.823% from the left, 1.969% from the right, 5.994% from the top,
   6.625% from the bottom.
   ══════════════════════════════════════════════════════════════════════ */
/* It sits in a wrapper now, so the wrapper carries the page inset and the
   tab simply fills it. */
:is(#home, .stw-prev-stage) .hhr-blk { margin-top: 14px; margin-bottom: 16px; }
:is(#home, .stw-prev-stage) .hhr-tab {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  aspect-ratio: 1371 / 317;
  background: url('assets/media/image/word-acts-tab-64345ac9.webp') center / 100% 100% no-repeat;
  border-radius: 9px !important;
  flex-shrink: 0;
}
/* A <video> is a REPLACED element — width:auto takes its intrinsic size
   and drops the `right` offset — so the aperture is an explicit size. */
:is(#home, .stw-prev-stage) .hhr-vid {
  position: absolute; left: 1.823%; top: 5.994%;
  width: 96.208%; height: 87.381%;
  border-radius: 5px !important; background: #000;
  object-fit: cover; object-position: center 88%;
  display: block; pointer-events: none;
  transform: translateZ(0); backface-visibility: hidden;
}
:is(#home, .stw-prev-stage) .hhr-row {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
}
:is(#home, .stw-prev-stage) .hhr-row > .hhr-btn {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  background: none !important; border: none !important; box-shadow: none !important;
  padding: 0; cursor: pointer;
  min-height: 0 !important;
  color: #fff;
}
:is(#home, .stw-prev-stage) .hhr-row > .hhr-btn:active { transform: scale(.94); }
:is(#home, .stw-prev-stage) .hhr-ico {
  display: flex; align-items: center; justify-content: center;
  width: clamp(20px, 6.6vw, 26px); height: clamp(20px, 6.6vw, 26px);
  color: #fff; pointer-events: none;
}
:is(#home, .stw-prev-stage) .hhr-ico svg {
  width: 100%; height: 100%; display: block;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.75));
}
:is(#home, .stw-prev-stage) .hhr-lbl {
  font-family: 'DM Sans', sans-serif; font-size: 8.5px; font-weight: 800;
  letter-spacing: 1.4px; text-transform: uppercase; color: #fff;
  white-space: nowrap; text-shadow: 0 1px 5px rgba(0,0,0,.8);
}
/* the hairline between each pair, on the boundary between equal thirds */
:is(#home, .stw-prev-stage) .hhr-sep {
  width: 1px; flex: 0 0 1px; align-self: center; height: 56%;
  background: rgba(255,255,255,.55);
  box-shadow: 0 0 4px rgba(0,0,0,.6);
  border-radius: 1px !important;
}
/* Earn is a placeholder — it reads as one rather than pretending to work */
:is(#home, .stw-prev-stage) .hhr-earn { opacity: .58; }

/* The search took Explore's place, so it carries a glyph as well as a word. */
.hero-btn-search { display: inline-flex; align-items: center; gap: 7px; }
/* the bottom one sits on a dark button, so it keeps the white it
   comes with */
.hero-btn-search .nwsb-search-icon { width: 14px; height: 14px; }

/* The search, in the corner the two image buttons left. A white disc with
   a drawn glyph — the same button the whole app uses now — rather than a
   third photograph on top of the artwork. */
.hero-search-btn {
  width: 38px !important; height: 38px !important;
  min-width: 38px !important; min-height: 38px !important;
  flex-shrink: 0; padding: 0; cursor: pointer;
  border: none !important; border-radius: 50% !important;
  background: #000000 !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.3);
  display: flex !important; align-items: center; justify-content: center;
}
.hero-search-ic { width: 19px !important; height: 19px !important; }

/* ── The search icon is artwork now, not a silhouette ──
   assets/media/image/search-d3d45c51.webp — headphones around a magnifier, white body,
   black lens — ships in the repo instead of coming from Cloudinary.
   Every place that used the old glyph put it through a filter, because
   the old one was a flat shape that had to be recoloured for whatever it
   sat on: brightness(0) invert(1) for white, brightness(0) for black.
   Run this image through either of those and the lens, the highlight and
   the shading all collapse into one solid blob. The filters come off,
   listed by their own selectors so each is beaten on its own terms. */
.nwsb-search-icon,
.nmh-search-go .nwsb-search-icon,
#home-nm.nm-dark .nmh-search-go .nwsb-search-icon,
body.nm-mode #sub-people .nwsb-search-icon,
html body.nwsb-soc-glass #sub-people .nwsb-search-icon,
.hero-search-ic { filter: none !important; }
.hero-search-btn:active { transform: scale(.92); }

/* ══════════════════════════════════════════════════════════════════
   THE PROFILE PAGE'S BANNER ROW
   One page stands between login and the home now, and it asks for four
   things: your name, what to call you, a picture, and the banner behind
   it. This is the last of them — a short sideways row rather than a grid,
   because it sits under two inputs and a button has to stay reachable
   without the page scrolling.
   ══════════════════════════════════════════════════════════════════ */
.ps-ban-row {
  display: flex; gap: 8px; width: 100%;
  overflow-x: auto; overflow-y: hidden;
  padding: 2px 0 14px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.ps-ban-row::-webkit-scrollbar { display: none; }
.ps-ban {
  flex: 0 0 auto;
  width: 74px !important; height: 46px !important;
  min-width: 74px !important; min-height: 46px !important;
  padding: 0 !important; cursor: pointer;
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  background-size: cover; background-position: center;
  box-shadow: 0 6px 16px rgba(0,0,0,0.4);
  transition: border-color .18s ease, transform .18s ease;
}
.ps-ban:active { transform: scale(.95); }
.ps-ban.on {
  border-color: #e8d5a3 !important;
  box-shadow: 0 0 0 2px rgba(232,213,163,0.42), 0 6px 16px rgba(0,0,0,0.4);
}

/* ══════════════════════════════════════════════════════════════════
   THE STORE SECTION ON THE FASHION HOME

   4:3 was too far — the artwork inside it is a portrait composition and a
   landscape box crops it to nothing. It takes the NORMAL home's shape
   instead, 3:4, which is the one that was right, and keeps the wrapper.

   Wrapper by styling, not by a new element: app/js/part062.js reorders the
   DIRECT children of the home wrap, so putting this inside a div would
   take it out of the layout editor's reach — the same trap the television
   fell into. It IS the wrapper.
   ══════════════════════════════════════════════════════════════════ */
:is(#home, .stw-prev-stage) .nss-store-trigger {
  aspect-ratio: 3 / 4 !important;
  width: calc(100% - 32px) !important;
  margin: 0 16px 18px !important;
  box-sizing: border-box;
  padding: 10px !important;
  border-radius: 0 !important;
  background: rgba(255,255,255,0.055) !important;
  border: 1px solid rgba(255,255,255,0.13) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.34) !important;
}
/* the padding is the wrapper, so what is inside stops at its edge */
:is(#home, .stw-prev-stage) .nss-store-trigger > .nss-trigger-slides,
:is(#home, .stw-prev-stage) .nss-store-trigger > .nss-trigger-content {
  inset: 10px !important;
  border-radius: 0 !important;
  overflow: hidden;
}


/* ══════════════════════════════════════════════════════════════════
   THE STRIPS ON THE GLASS

   Everything that is not the picture lives out here, on the wrapper,
   OUTSIDE the set. A screen with an Explore button drawn on it is a
   screen with a button drawn on it — the set and the furniture were
   fighting for the same 230px, and the furniture lost every time.

     above the set   the store on the left, the search on the right
     below the set   Explore and Help & Coach, and the way into assistance

   The pieces are moved here by app/js/part083.js and moved back when the
   look changes, because this is one look of three and the other two want
   them on the screen where they were.
   ══════════════════════════════════════════════════════════════════ */
.hs-top, .hs-foot {
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0; box-sizing: border-box;
  padding: 4px 4px;
}
.hs-top { padding-bottom: 9px; }
.hs-foot { padding-top: 11px; }

/* the small upright rule between one thing and the next — the same one
   the app header draws between its own three marks */
.hs-sep {
  flex: 1 1 auto;
  height: 15px; min-width: 1px;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%,
              rgba(255,255,255,0.22) 50%, rgba(255,255,255,0) 100%);
  background-size: 1px 100%; background-position: center;
  background-repeat: no-repeat;
}

/* ── the store, top left ── */
.hs-shop {
  flex-shrink: 0; display: flex; align-items: center; gap: 9px;
  padding: 0 !important; min-height: 0 !important;
  background: none !important; border: none !important;
  cursor: pointer; text-align: left;
}
/* Every mark on this card is the same thing: a white disc with a drawing
   in it. The blonde-tinted square was one more style to remember. */
/* A CIRCLE. app.css carries a global *{border-radius:0!important} reset —
   it is why this was drawing as a square however many times the radius was
   set — so every rounded thing in this app has to say !important and mean
   it. Same reason the pill below does. */
.hs-top .hs-shop .hs-disc {
  width: 32px; height: 32px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50% !important;
  background: #fff;
  color: #060c18;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.hs-top .hs-shop .hs-disc svg { width: 16px; height: 16px; display: block; }
/* a rule that divides rather than spaces — the stretching one is for
   pushing things apart, this one just separates two that are together */
.hs-sep-sm { flex: 0 0 1px !important; height: 20px; }
.hs-shop-txt { display: flex; flex-direction: column; min-width: 0; }
.hs-shop-h {
  font-family: 'DM Sans', sans-serif; font-size: 9px; font-weight: 700;
  letter-spacing: 1.6px; text-transform: uppercase;
  color: rgba(232,213,163,0.8);
}
.hs-shop-t {
  font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: .1px; color: #fff; white-space: nowrap;
}
.hs-shop:active { transform: scale(.97); }

/* the search comes out of the screen and sits at the top right of the
   glass, which is where it was reaching for anyway */
/* ── The search, as one white pill ──
   The word and the button were two loose objects at the end of the row.
   One pill makes them one control, and white makes it the brightest thing
   on the card — which is right, because it is the only place on this card
   you can type. */
.hs-top .hs-searchpill {
  flex-shrink: 0; display: flex; align-items: center; gap: 8px;
  /* the button sits INSIDE the pill: 4px of white all the way round it,
     not hanging off the end */
  padding: 4px 4px 4px 14px;
  box-sizing: border-box; overflow: hidden;
  border-radius: 999px !important;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,0.4);
}
.hs-slbl {
  flex-shrink: 0;
  font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 800;
  letter-spacing: 1.6px; text-transform: uppercase;
  color: #060c18;
}
/* The ring is a live invitation rather than a label, so it moves: one arc
   turning round the button, forever, at a speed that reads as breathing
   rather than loading. Transform on an SVG child only — nothing reflows. */
.hs-searchwrap {
  position: relative; flex-shrink: 0;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
}
.hs-trace {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; overflow: visible;
  animation: hsTrace 2.6s linear infinite;
}
.hs-trace circle {
  fill: none; stroke: rgba(232,213,163,0.9); stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 34 95;
}
@keyframes hsTrace { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hs-trace { animation: none; } }
/* The button has to fit the ring, not the other way round: it ships at
   whatever size the screen wanted it and was overflowing the 44px box, so
   the arc was drawn round something it was not concentric with. */
.hs-searchwrap .hero-search-btn {
  flex-shrink: 0; margin: 0 !important;
  position: static !important;
  width: 32px !important; height: 32px !important;
  min-width: 32px !important; min-height: 32px !important;
  border-radius: 50% !important;
}
.hs-searchwrap .hero-search-ic,
.hs-searchwrap .nwsb-search-icon { width: 15px !important; height: 15px !important; }

/* ── Explore and Help & Coach, below the set ── */
.hs-foot .hero-btns {
  flex-shrink: 0; margin: 0 !important; padding: 0 !important;
  display: flex !important; align-items: center; gap: 9px;
}
/* the rule between Explore and Help & Coach does not stretch — inside this
   row it is a divider, not a spacer */
.hs-foot .hero-btns > .hs-sep { flex: 0 0 1px; }
.hs-foot .hero-btn {
  margin: 0 !important;
  padding: 9px 15px !important;
  min-height: 0 !important;
  font-size: 10.5px !important;
  letter-spacing: 1.4px !important;
  white-space: nowrap;
}
/* the word beside the disc — a circle with an arrow in it does not say
   what it is for on its own */
.hs-learn {
  flex-shrink: 0;
  font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 800;
  letter-spacing: 1.6px; text-transform: uppercase;
  color: rgba(255,255,255,0.75);
}


/* Customize owns the corners. Its Corners option is unset until someone
   picks one, so square stays the default and this only answers a reader
   who asked for round. */
body.homecorner-round .hero-section.hero-simple { border-radius: 22px !important; }
body.homecorner-round .hs-ban { border-radius: 22px !important; }


/* ══════════════════════════════════════════════════════════════════
   THE TEXT ON THE SCREEN

   With the search and both buttons gone out onto the glass, the screen is
   carrying four lines and nothing else — and they were still laid out for
   a box that had a button row at the foot and a search in the corner. So
   they were hard against the left edge with most of the picture empty
   beside them.

   They come in off the edge and they get bigger. This is the set's only
   job now, so it may as well be read from across the room.
   ══════════════════════════════════════════════════════════════════ */
/* ── One left edge for all four lines ──
   They were landing on two: the wordmark and the tagline on the screen's
   own padding, and "Natural Origin" and the word 12px further in. The
   indent that did it was on the two bottom blocks — and the rule meant to
   match the top one matched nothing at all, because the first child of
   .hero-content is the film now, not the text.

   So the indent comes off the blocks entirely and the screen's own padding
   is the only thing setting it. One number, four lines, and moving them
   right is now moving one number. */
.hero-simple .hero-content { padding: 18px 26px 16px !important; }
.hero-simple .hero-bottom { padding: 0 !important; }
.hero-simple .brand-name { font-size: clamp(30px, 8.6vw, 46px) !important; }
.hero-simple #heroTagline { font-size: 12.5px !important; letter-spacing: 3px !important; }
.hero-simple .hero-bottom > div:first-child {
  margin-bottom: 12px !important; padding-left: 0 !important;
}
.hero-simple .hero-bottom .brand-tag { font-size: 16px !important; }
.hero-simple .hero-word-wrap { margin-top: 4px; height: auto; padding-left: 0; }
.hero-simple .hero-word { font-size: clamp(26px, 7.4vw, 38px) !important; }


/* ══════════════════════════════════════════════════════════════════
   A SECTION'S OWN HEAD, AND ITS OWN WAY OUT

   The shape Choose Your Path already uses on this home: a disc with a
   drawing in it, a light line and a heavy one, above whatever the section
   is made of. Written here rather than in the injector because this one is
   in the markup — the clip, the streak and the black banner were three
   loose blocks and are one card now.
   ══════════════════════════════════════════════════════════════════ */
#home-nm .nmh-sec-wrap { position: relative; }
#home-nm .nmh-wrap-head {
  display: flex; align-items: center; gap: 12px;
  margin: 2px 0 14px !important;
  padding-right: 40px;                 /* clear of the cross */
}
#home-nm .nmh-wrap-head-ic {
  width: 42px; height: 42px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50% !important;
  background: #f0f2f7;
  color: #b39a5e;
  /* raised, like every other disc on this home */
  box-shadow: 5px 5px 12px rgba(0,0,0,0.13), -4px -4px 10px rgba(255,255,255,0.96);
}
#home-nm .nmh-wrap-head-ic svg { width: 21px; height: 21px; display: block; }
#home-nm .nmh-wrap-head-txt { min-width: 0; }
#home-nm .nmh-wrap-hello {
  font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 400;
  letter-spacing: .1px; color: rgba(26,26,46,0.5); line-height: 1.2;
}
#home-nm .nmh-wrap-name {
  margin-top: 1px;
  font-family: 'DM Sans', sans-serif; font-size: 24px; font-weight: 800;
  letter-spacing: -0.5px; color: #1a1a2e; line-height: 1.15;
}

/* The cross, inside the wrapper at its top right. Pressed IN rather than
   raised: it takes something away, and every raised control on this home
   adds something. */
#home-nm .nmh-wrap-x {
  position: absolute; top: 12px; right: 12px; z-index: 6;
  width: 30px !important; height: 30px !important;
  min-width: 30px !important; min-height: 30px !important;
  padding: 0 !important; margin: 0 !important;
  display: flex; align-items: center; justify-content: center;
  border: none !important;
  border-radius: 50% !important;
  background: #f0f2f7 !important;
  color: rgba(26,26,46,0.45);
  cursor: pointer;
  box-shadow: inset 3px 3px 7px rgba(0,0,0,0.14), inset -2px -2px 6px rgba(255,255,255,0.95);
}
#home-nm .nmh-wrap-x svg { width: 13px; height: 13px; display: block; }
#home-nm .nmh-wrap-x:active { transform: scale(.9); }

/* The streak block's three pieces sit flush inside the one card: the
   wrapper's padding is the spacing, so the section inside it drops its own
   card entirely. */
#home-nm .nmh-streak-wrap .nmh-streak-section {
  background: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 12px 0 0 !important;
  border-radius: 0 !important;
}
/* The banner has a wrapper of its own now, so the clip is flush inside it
   the same way the section is flush inside the other one. */
#home-nm .nmh-streakvid-wrap .nmh-hero-vid { margin: 12px 0 0 !important; width: 100% !important; }


/* ══════════════════════════════════════════════════════════════════
   THE STORE, IN ONE GLASS PANEL

   The clip, the trigger card and the black banner were three loose
   blocks on the Fashion home. One panel now, wearing the head every
   other block on this home wears — with the disc in WHITE, which is
   what every mark on the hero card became and what this one matches.
   ══════════════════════════════════════════════════════════════════ */
.qa-tv-orb.qa-orb-white {
  background: #fff !important;
  border: none !important;
  color: #060c18 !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.45);
}
.qa-tv-orb.qa-orb-white svg { width: 20px; height: 20px; display: block; }

/* the three pieces sit flush inside the one panel: the wrapper's padding
   is the spacing, so nothing inside carries a margin of its own */
#home .fash-store-wrap > .nss-store-trigger {
  width: 100% !important;
  margin: 12px 0 0 !important;
}
/* the banner block's three parts sit flush inside their own wrapper */
#home .fash-storeban-wrap > .vb-banner,
#home .fash-storeban-wrap > .nss-storeban-ban {
  width: 100% !important;
  margin: 12px 0 0 !important;
}
#home .fash-store-wrap > .nss-store-ban {
  width: 100% !important;
  margin: 12px 0 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   FASHION PLUS REACHES THE LAST TWO PLACES IT DID NOT

   app/js/part076.js opens every .sub-screen up to the film behind it —
   markImageBacked() finds the ones wearing a photograph and takes it off so
   #fpBgVideo shows through. Two kinds of surface were never in that sweep,
   and both of them are page-sized, so on those pages the switch appeared to
   do nothing at all:

     · THE MENU. .menu-drawer is not a .sub-screen at all, so it was never a
       candidate. It also carried a Cloudinary photograph of its own, which
       is the image being taken out here.

   The intro pages are NOT in that list, and the note below says why.
═══════════════════════════════════════════════════════════════ */

/* ── THE INTRO PAGES KEEP THEIR ARTWORK ──────────────────────────
   Three rules used to live here: they made each intro panel transparent,
   blanked the still it wears, and deepened its vignette to compensate — so
   that the home's film showed through the page instead.

   That was the wrong reading of the ask. What was wanted was the page
   BACKGROUNDS carrying the film, not the intro pages being emptied out.
   Each of those panels is a designed thing — its own artwork, its own
   title over it — and taking the artwork away did not reveal something
   better underneath, it just removed the picture someone chose.

   So they are left exactly as they are, in both modes. The rules are gone
   rather than commented out; this note is here so the idea is not had a
   second time. */

/* ── The menu ────────────────────────────────────────────────────
   No photograph, in either mode. It was a Cloudinary jpg behind a 58–70%
   scrim; what is left is the scrim's own colour, which is what the rest of
   the dark app is wearing. */
body:not(.nm-mode) #menuDrawer.menu-drawer {
  background: rgba(6,10,20,0.94) !important;
}

/* And with the switch on, the film — the same one the home is playing,
   through the same fixed element, with a scrim heavy enough to read a list
   of twelve rows against. */
body.fashplus:not(.nm-mode) #menuDrawer.menu-drawer {
  background: linear-gradient(rgba(6,10,20,0.62), rgba(6,10,20,0.76)) !important;
}

/* ── And the film actually reaches them ──────────────────────────
   The block above makes those pages transparent, which on its own shows
   the HOME through them rather than the film — #fpBgVideo sits at z-index
   0, underneath every top-level screen. That is the trap the note at
   "FASHION PLUS — pages keep a background" ran into, and it settled for
   painting the pages black instead: no home showing through, but no film
   either.

   The film moves instead of the pages. While a page is open the clip is
   lifted to just under it, so the order from the back is: home, film,
   page. Nothing else changes — the same one element, still fixed, still
   the only clip playing.

     home 10  ·  menu 500  ·  sub-screen 600  ·  bottom nav 1000

   Two values because the two surfaces sit at different heights. The menu
   rule is second so that it wins when both are open — the menu is the
   thing in front at that point, and film over it would bury the list. */
body.fashplus:not(.fp-bg-off):has(.sub-screen.open) #fpBgVideo {
  z-index: 590 !important;
}
body.fashplus:not(.fp-bg-off):has(.menu-drawer.open) #fpBgVideo {
  z-index: 490 !important;
}

/* With the film up there, the pages that were forced black can stop being
   black. Only the page actually open — a closed one is display:none and
   its colour is nobody's business. */
body.fashplus:not(.fp-bg-off):has(.sub-screen.open) .sub-screen.open[data-fp-img] {
  background: transparent !important;
}
body.fashplus:not(.fp-bg-off):has(.sub-screen.open)
  .sub-screen.open[data-fp-img] > .sub-screen-bg[data-fp-img] {
  background-color: transparent !important;
}

/* ── The AI Prescription card gets its gap ────────────────────────
   #rxCardWrap is injected empty and filled by app/js/part037.js, so it had
   no margin of its own — every other block on this home carries its gap in
   its own wrapper, and this one had no wrapper to carry it. The Fashion
   Plus card directly above it ended up touching the prescription banner,
   which read as one block with a seam through it rather than two.
   The same 16px the sections either side of it use. */
:is(#home, .stw-prev-stage) #rxCardWrap:not(:empty) {
  margin-top: 16px !important;
  margin-bottom: 16px !important;
}


/* ── Time-aware home dashboard: Focus · Progress · Up next ─────────────── */
.nwsb-daydash { width:100%; margin:18px 0 22px; box-sizing:border-box; }
.nwsb-daydash *, .nwsb-daydash *::before, .nwsb-daydash *::after { box-sizing:border-box; }
.nwsb-focus-card { position:relative; min-height:214px; overflow:hidden; border-radius:28px; isolation:isolate; cursor:pointer; }
.nwsb-focus-video, .nwsb-focus-scrim { position:absolute; inset:0; width:100%; height:100%; }
.nwsb-focus-video { object-fit:cover; object-position:center; z-index:-2; background:#131629; }
.nwsb-focus-scrim { z-index:-1; background:linear-gradient(90deg,rgba(7,10,24,.93) 0%,rgba(7,10,24,.62) 48%,rgba(7,10,24,.08) 100%); }
.nwsb-focus-content { min-height:214px; padding:24px 22px 20px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; color:#fff; }
.nwsb-focus-eyebrow, .nwsb-dashboard-eyebrow { text-transform:uppercase; letter-spacing:2.1px; font-size:10px; font-weight:750; }
.nwsb-focus-eyebrow { color:rgba(232,213,163,.9); margin-bottom:9px; }
.nwsb-focus-title { max-width:80%; font-size:clamp(25px,7vw,38px); line-height:1.06; font-weight:800; letter-spacing:-.8px; }
.nwsb-focus-sub { max-width:76%; margin-top:9px; color:rgba(255,255,255,.78); font-size:13px; line-height:1.45; }
.nwsb-focus-cta { margin-top:16px; padding:11px 16px; border:0; border-radius:999px; background:#fff; color:#12152a; font:750 12px/1 'DM Sans',sans-serif; cursor:pointer; box-shadow:0 8px 18px rgba(0,0,0,.18); }
.nwsb-focus-cta span { margin-left:8px; font-size:16px; vertical-align:-1px; }
.nwsb-dashboard-heading { display:flex; align-items:end; justify-content:space-between; gap:12px; margin:24px 2px 12px; }
.nwsb-dashboard-heading h2 { margin:3px 0 0; font-size:22px; line-height:1.1; letter-spacing:-.45px; }
.nwsb-dashboard-heading button { appearance:none; border:0; background:transparent; padding:5px 0; font:650 13px/1 'DM Sans',sans-serif; cursor:pointer; }
.nwsb-dashboard-heading button span { margin-left:4px; font-size:20px; vertical-align:-2px; }
.nwsb-dashboard-eyebrow { opacity:.52; }
.nwsb-progress-card { display:grid; grid-template-columns:repeat(3,1fr); gap:0; overflow:hidden; }
.nwsb-progress-stat { min-width:0; padding:17px 9px 15px; display:flex; flex-direction:column; align-items:center; text-align:center; }
.nwsb-stat-icon { width:38px; height:38px; display:grid; place-items:center; border-radius:50%; margin-bottom:9px; }
.nwsb-stat-icon svg, .nwsb-upnext-icon svg { width:20px; height:20px; }
.nwsb-progress-stat strong { font-size:21px; line-height:1; }
.nwsb-progress-stat small { margin-top:6px; font-size:10px; line-height:1.2; white-space:nowrap; opacity:.58; }
.nwsb-up-heading { margin-top:25px; }
.nwsb-upnext-card { width:100%; display:flex; align-items:center; gap:12px; padding:15px; border:0; text-align:left; cursor:pointer; }
.nwsb-upnext-icon { flex:0 0 44px; width:44px; height:44px; display:grid; place-items:center; border-radius:15px; }
.nwsb-upnext-copy { min-width:0; flex:1; display:flex; flex-direction:column; gap:5px; }
.nwsb-upnext-copy strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; }
.nwsb-upnext-copy small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; opacity:.58; }
.nwsb-upnext-arrow { font-size:22px; opacity:.62; }
.nwsb-daydash-normal .nwsb-focus-card { box-shadow:9px 9px 20px rgba(166,171,189,.42),-8px -8px 20px rgba(255,255,255,.92); }
.nwsb-daydash-normal .nwsb-dashboard-eyebrow { color:#5d6376; }
.nwsb-daydash-normal .nwsb-dashboard-heading h2, .nwsb-daydash-normal .nwsb-dashboard-heading button { color:#1a1a2e; }
.nwsb-daydash-normal .nwsb-progress-card, .nwsb-daydash-normal .nwsb-upnext-card { border-radius:22px; background:#f0f2f7; box-shadow:8px 8px 17px rgba(166,171,189,.38),-7px -7px 17px rgba(255,255,255,.92); color:#1a1a2e; }
.nwsb-daydash-normal .nwsb-progress-stat + .nwsb-progress-stat { border-left:1px solid rgba(26,26,46,.08); }
.nwsb-daydash-normal .nwsb-stat-icon, .nwsb-daydash-normal .nwsb-upnext-icon { color:#7d6636; background:#edf0f6; box-shadow:inset 3px 3px 7px rgba(166,171,189,.28),inset -3px -3px 7px rgba(255,255,255,.9); }
.nwsb-daydash-fashion .nwsb-focus-card { border:1px solid rgba(255,255,255,.18); box-shadow:0 18px 42px rgba(0,0,0,.28); }
.nwsb-daydash-fashion .nwsb-dashboard-eyebrow { color:rgba(232,213,163,.84); }
.nwsb-daydash-fashion .nwsb-dashboard-heading h2, .nwsb-daydash-fashion .nwsb-dashboard-heading button { color:#fff; }
.nwsb-daydash-fashion .nwsb-progress-card, .nwsb-daydash-fashion .nwsb-upnext-card { border:1px solid rgba(255,255,255,.16); border-radius:20px; background:rgba(10,11,24,.48); box-shadow:inset 0 1px rgba(255,255,255,.08),0 15px 34px rgba(0,0,0,.2); color:#fff; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.nwsb-daydash-fashion .nwsb-progress-stat + .nwsb-progress-stat { border-left:1px solid rgba(255,255,255,.14); }
.nwsb-daydash-fashion .nwsb-stat-icon, .nwsb-daydash-fashion .nwsb-upnext-icon { color:#e8d5a3; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.14); }
@media (max-width:360px) { .nwsb-progress-stat { padding-left:4px; padding-right:4px; } .nwsb-progress-stat small { font-size:9px; } .nwsb-focus-content { padding-left:18px; padding-right:18px; } }


/* ══ YOUR ESSENTIALS — shared information architecture, mode-specific skin ══ */
.nwsb-essentials { margin: 28px 0 8px; color: var(--nm-ink, #15182a); }
.nwsb-essential-tabs { display: flex; gap: 10px; margin: 0 0 24px; }
.nwsb-essential-tab { appearance: none; border: 0; border-radius: 999px; padding: 12px 20px; background: #f2f3f8; color: #464a5a; font: 700 14px/1 inherit; cursor: pointer; box-shadow: 7px 7px 16px rgba(169,174,188,.32), -7px -7px 16px rgba(255,255,255,.94); transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.nwsb-essential-tab:hover, .nwsb-essential-tab:focus-visible { transform: translateY(-1px); outline: none; }
.nwsb-essential-tab.is-active { background: #fff; color: #111526; box-shadow: inset 2px 2px 7px rgba(169,174,188,.24), inset -2px -2px 7px rgba(255,255,255,.94); }
.nwsb-essentials-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 0 4px 12px; }
.nwsb-essentials-heading h2 { margin: 4px 0 0; font-size: clamp(24px, 4.8vw, 34px); line-height: 1.05; letter-spacing: -.8px; }
.nwsb-essentials-mark { color: #b09255; font-size: 9px; font-weight: 800; letter-spacing: 2.5px; }
.nwsb-essential-list { position: relative; display: grid; gap: 10px; }
.nwsb-essential-row { position: relative; display: grid; grid-template-columns: 22px 40px minmax(0,1fr) auto 18px; align-items: center; min-height: 70px; width: 100%; padding: 12px 14px 12px 0; border: 0; border-radius: 22px; background: #f1f3f8; color: #202335; text-align: left; cursor: pointer; box-shadow: 8px 8px 18px rgba(169,174,188,.25), -8px -8px 18px rgba(255,255,255,.90); transition: transform .18s ease, box-shadow .18s ease; }
.nwsb-essential-row:hover, .nwsb-essential-row:focus-visible { transform: translateY(-2px); outline: none; box-shadow: 10px 12px 22px rgba(169,174,188,.28), -9px -9px 20px rgba(255,255,255,.96); }
.nwsb-essential-row[hidden] { display: none; }
.nwsb-essential-featured { min-height: 106px; background: linear-gradient(116deg, #ffd33f 0%, #ffc526 58%, #ff9b2c 100%); color: #241c16; }
.nwsb-essential-rail { align-self: stretch; position: relative; display: flex; align-items: center; justify-content: center; }
.nwsb-essential-rail::before { content: ''; position: absolute; top: -10px; bottom: -10px; width: 3px; background: repeating-linear-gradient(to bottom, #d7d9df 0 10px, transparent 10px 18px); border-radius: 3px; }
.nwsb-essential-row:first-child .nwsb-essential-rail::before { top: 50%; }
.nwsb-essential-row:last-child .nwsb-essential-rail::before { bottom: 50%; }
.nwsb-essential-dot { position: relative; z-index: 1; width: 15px; height: 15px; border: 2px solid #d5d7dd; border-radius: 50%; background: #f8f9fc; }
.nwsb-essential-featured .nwsb-essential-dot { width: 18px; height: 18px; border-color: #f47f16; background: #ff8019; box-shadow: 0 0 0 5px rgba(255,255,255,.40); }
.nwsb-essential-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 14px; background: rgba(255,255,255,.78); color: #5b513a; font-size: 20px; font-weight: 800; box-shadow: 3px 3px 8px rgba(150,120,70,.12); }
.nwsb-essential-copy { min-width: 0; display: grid; gap: 5px; padding-right: 10px; }
.nwsb-essential-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; line-height: 1.15; }
.nwsb-essential-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #747889; font-size: 11px; line-height: 1.2; }
.nwsb-essential-featured .nwsb-essential-copy small { color: rgba(36,28,22,.72); }
.nwsb-essential-meta { color: #747889; font-size: 11px; white-space: nowrap; }
.nwsb-essential-featured .nwsb-essential-meta { color: rgba(36,28,22,.74); font-weight: 700; }
.nwsb-essential-arrow { color: #777c8c; font-size: 24px; line-height: 1; }
.nwsb-essential-help { margin: 10px 4px 0; color: #828697; font-size: 12px; }
.nwsb-essentials-fashion { color: #fff; }
.nwsb-essentials-fashion .nwsb-essential-tab { background: rgba(255,255,255,.10); color: rgba(255,255,255,.72); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 12px 28px rgba(0,0,0,.20); }
.nwsb-essentials-fashion .nwsb-essential-tab.is-active { background: rgba(255,255,255,.90); color: #171426; }
.nwsb-essentials-fashion .nwsb-essential-row { background: rgba(20,16,39,.62); color: #fff; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 18px 34px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.nwsb-essentials-fashion .nwsb-essential-row:hover, .nwsb-essentials-fashion .nwsb-essential-row:focus-visible { background: rgba(56,38,85,.72); }
.nwsb-essentials-fashion .nwsb-essential-featured { background: linear-gradient(120deg, rgba(74,35,104,.92), rgba(23,15,47,.78)); border-color: rgba(225,195,255,.26); }
.nwsb-essentials-fashion .nwsb-essential-rail::before { background: repeating-linear-gradient(to bottom, rgba(255,255,255,.23) 0 10px, transparent 10px 18px); }
.nwsb-essentials-fashion .nwsb-essential-dot { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.42); }
.nwsb-essentials-fashion .nwsb-essential-featured .nwsb-essential-dot { border-color: #e8d5a3; background: #e8d5a3; box-shadow: 0 0 0 5px rgba(232,213,163,.16); }
.nwsb-essentials-fashion .nwsb-essential-icon { background: rgba(255,255,255,.13); color: #e8d5a3; box-shadow: none; }
.nwsb-essentials-fashion .nwsb-essential-copy small, .nwsb-essentials-fashion .nwsb-essential-meta, .nwsb-essentials-fashion .nwsb-essential-arrow { color: rgba(255,255,255,.62); }
.nwsb-essentials-fashion .nwsb-essential-featured .nwsb-essential-copy small, .nwsb-essentials-fashion .nwsb-essential-featured .nwsb-essential-meta { color: rgba(255,255,255,.72); }
.nwsb-essentials-fashion .nwsb-essential-mark { color: #e8d5a3; }
.nwsb-essentials-fashion .nwsb-essential-help { color: rgba(255,255,255,.55); }
@media (max-width: 430px) {
  .nwsb-essential-row { grid-template-columns: 18px 36px minmax(0,1fr) 16px; padding-right: 10px; }
  .nwsb-essential-meta { grid-column: 3; grid-row: 2; margin-top: -2px; }
  .nwsb-essential-arrow { grid-column: 4; grid-row: 1 / span 2; }
  .nwsb-essential-icon { width: 34px; height: 34px; }
  .nwsb-essential-copy { padding-right: 4px; }
}

/* ══ REFERENCE DASHBOARD PASS — exact wrapper geometry and controls ══ */
.nwsb-daydash { width: 100%; }
.nwsb-focus-card { min-height: 250px; overflow: hidden; background: #060b18; }
.nwsb-focus-video { opacity: 1 !important; filter: brightness(1.18) contrast(1.16) saturate(1.08); transform: scale(1.01); }
.nwsb-focus-scrim { background: linear-gradient(90deg, rgba(3,6,16,.54) 0%, rgba(3,6,16,.22) 54%, rgba(3,6,16,.04) 100%) !important; opacity: .78; }
.nwsb-progress-card { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nwsb-progress-stat { padding: 18px 6px 16px; }
.nwsb-stat-icon, .nwsb-upnext-icon { border-radius: 50% !important; }
.nwsb-stat-icon svg, .nwsb-upnext-icon svg { width: 21px; height: 21px; }
.nwsb-progress-stat + .nwsb-progress-stat { border-left: 1px solid rgba(26,26,46,.10); }
.nwsb-upnext-list { display: grid; overflow: hidden; border-radius: 22px; }
.nwsb-upnext-list .nwsb-upnext-card { border-radius: 0; border-bottom: 1px solid rgba(26,26,46,.10); }
.nwsb-upnext-list .nwsb-upnext-card:last-child { border-bottom: 0; }
.nwsb-daydash-normal .nwsb-upnext-list { background: #f0f2f7; box-shadow: 8px 8px 17px rgba(166,171,189,.38),-7px -7px 17px rgba(255,255,255,.92); }
.nwsb-daydash-fashion .nwsb-upnext-list { background: rgba(10,11,24,.48); border: 1px solid rgba(255,255,255,.16); box-shadow: inset 0 1px rgba(255,255,255,.08),0 15px 34px rgba(0,0,0,.2); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.nwsb-daydash-fashion .nwsb-upnext-list .nwsb-upnext-card { background: transparent; border-bottom-color: rgba(255,255,255,.14); }
.nwsb-daydash-fashion .nwsb-progress-stat + .nwsb-progress-stat { border-left-color: rgba(255,255,255,.14); }

.nwsb-essentials { width: 100%; margin: 28px 0 8px; }
.nwsb-essentials-heading { margin: 0 4px 13px; }
.nwsb-essentials-shell { width: 100%; padding: 12px; border-radius: 26px; }
.nwsb-essential-list { position: relative; display: grid; gap: 9px; padding: 4px 0; }
.nwsb-essential-list::before { content: ''; position: absolute; z-index: 0; left: 16px; top: 26px; bottom: 26px; width: 2px; border-radius: 2px; background: rgba(120,123,132,.38); }
.nwsb-essential-row { z-index: 1; grid-template-columns: 32px 42px minmax(0,1fr) auto 22px; min-height: 68px; padding: 10px 14px 10px 0; border-radius: 18px; background: #090a0e; color: #fff; box-shadow: 0 8px 18px rgba(0,0,0,.18); }
.nwsb-essential-row:hover, .nwsb-essential-row:focus-visible { background: #161820; transform: translateY(-1px); }
.nwsb-essential-featured { min-height: 78px; background: #090a0e; color: #fff; }
.nwsb-essential-rail { z-index: 2; }
.nwsb-essential-rail::before { display: none; }
.nwsb-essential-dot { width: 12px; height: 12px; border: 2px solid #0b0c10; background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.22); }
.nwsb-essential-featured .nwsb-essential-dot { width: 14px; height: 14px; border: 2px solid #090a0e; background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.30); }
.nwsb-essential-icon { width: 38px; height: 38px; border-radius: 50%; background: #fff; color: #090a0e; box-shadow: none; }
.nwsb-essential-icon svg { width: 20px; height: 20px; }
.nwsb-essential-copy strong { color: #fff; }
.nwsb-essential-copy small, .nwsb-essential-meta { color: rgba(255,255,255,.64); }
.nwsb-essential-arrow { color: #fff; font-size: 22px; }
.nwsb-essentials-normal .nwsb-essentials-shell { background: #f0f2f7; box-shadow: 10px 10px 22px rgba(166,171,189,.34),-10px -10px 22px rgba(255,255,255,.94); }
.nwsb-essentials-normal .nwsb-essential-row { box-shadow: 0 9px 18px rgba(0,0,0,.20); }
.nwsb-essentials-fashion .nwsb-essentials-shell { background: rgba(10,9,20,.48); border: 1px solid rgba(255,255,255,.16); box-shadow: 0 18px 36px rgba(0,0,0,.26), inset 0 1px rgba(255,255,255,.06); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.nwsb-essentials-fashion .nwsb-essential-list::before { background: rgba(255,255,255,.28); }
.nwsb-essentials-fashion .nwsb-essential-row { background: #090a0e; border: 1px solid rgba(255,255,255,.12); }
.nwsb-essentials-fashion .nwsb-essential-featured { background: #090a0e; }
.nwsb-essentials-fashion .nwsb-essential-icon { background: #fff; color: #090a0e; }
.nwsb-essentials-fashion .nwsb-essential-copy small, .nwsb-essentials-fashion .nwsb-essential-meta { color: rgba(255,255,255,.64); }
@media (max-width: 430px) {
  .nwsb-essential-row { grid-template-columns: 32px 40px minmax(0,1fr) 20px; }
  .nwsb-essential-meta { display: none; }
  .nwsb-essential-arrow { grid-column: 4; grid-row: 1 / span 2; }
  .nwsb-progress-stat small { font-size: 9px; }
}

/* Fashion home alignment: the dashboard stack shares the same 16px side inset
   as the neighboring glass sections instead of touching the viewport edges. */
#home .home-body > .nwsb-daydash,
#home .home-body > .nwsb-essentials {
  width: calc(100% - 32px);
  margin-left: 16px;
  margin-right: 16px;
}
#home .home-body > .nwsb-daydash { margin-top: 18px; }
#home .home-body > .nwsb-essentials { margin-top: 28px; }

/* ══ YOUR ESSENTIALS — faithful reference screen pass ══ */
.nwsb-essentials-reference { position: relative; overflow: hidden; width: 100%; margin: 28px 0 8px; color: #20212c; }
.nwsb-essentials-reference .nwsb-essentials-wave { height: 72px; background: linear-gradient(180deg, #5433a5 0%, #7b4bb1 62%, #ffffff 63%, #ffffff 100%); border-radius: 0 0 52% 52% / 0 0 72% 72%; }
.nwsb-essentials-reference .nwsb-essentials-body { position: relative; margin-top: -1px; padding: 0 20px 28px; background: #ffffff; }
.nwsb-essentials-reference .nwsb-essentials-heading { margin: 38px 0 14px; }
.nwsb-essentials-reference .nwsb-essentials-heading h2 { margin: 0; color: #20212c; font-size: 27px; line-height: 1.1; letter-spacing: -.8px; }
.nwsb-essentials-reference .nwsb-essential-tabs { display: flex; gap: 10px; margin: -5px 0 38px; }
.nwsb-essentials-reference .nwsb-essential-tab { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 126px; height: 49px; padding: 0 18px; border: 0; border-radius: 999px; background: #f7f5f2; color: #262530; font: 800 15px/1 'DM Sans',sans-serif; box-shadow: 0 5px 14px rgba(44,39,61,.08); }
.nwsb-essentials-reference .nwsb-essential-tab svg { width: 18px; height: 18px; }
.nwsb-essentials-reference .nwsb-essential-tab.is-active { background: #f5f2ed; box-shadow: inset 1px 1px 4px rgba(80,74,86,.10), 0 5px 14px rgba(44,39,61,.08); }
.nwsb-essentials-reference .nwsb-essentials-shell { padding: 0; border-radius: 0; background: transparent; box-shadow: none; }
.nwsb-essentials-reference .nwsb-essential-list { position: relative; display: grid; gap: 12px; padding: 0 0 0 47px; }
.nwsb-essentials-reference .nwsb-essential-list::before { content: ''; position: absolute; z-index: 0; left: 17px; top: 38px; bottom: 24px; width: 6px; border-radius: 5px; background: repeating-linear-gradient(to bottom, #dededc 0 13px, transparent 13px 25px); }
.nwsb-essentials-reference .nwsb-essential-row, .nwsb-essentials-reference .nwsb-essential-featured-card { position: relative; z-index: 1; width: 100%; border: 0; text-align: left; font-family: 'DM Sans',sans-serif; cursor: pointer; }
.nwsb-essentials-reference .nwsb-essential-featured-card { min-height: 138px; padding: 26px 26px 20px; overflow: hidden; border-radius: 23px; background: linear-gradient(120deg, #ffd000 0%, #ffcb0b 56%, #ff8b27 100%); color: #28252a; box-shadow: 0 10px 20px rgba(119,83,18,.14); }
.nwsb-essentials-reference .nwsb-essential-featured-card::after { content: ''; position: absolute; right: -28px; bottom: -52px; width: 210px; height: 176px; border-radius: 50% 50% 0 0; background: rgba(255,155,35,.42); transform: rotate(-18deg); }
.nwsb-essentials-reference .nwsb-essential-badge { position: relative; z-index: 2; display: block; width: max-content; margin-bottom: 14px; padding: 3px 10px; border-radius: 99px; background: rgba(255,255,255,.70); font-size: 12px; font-weight: 800; }
.nwsb-essentials-reference .nwsb-essential-featured-icon { position: absolute; z-index: 2; right: 18px; top: 20px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.68); color: #3c3424; }
.nwsb-essentials-reference .nwsb-essential-featured-icon svg { width: 19px; height: 19px; }
.nwsb-essentials-reference .nwsb-essential-featured-card > strong, .nwsb-essentials-reference .nwsb-essential-featured-card > small, .nwsb-essentials-reference .nwsb-essential-featured-card > em { position: relative; z-index: 2; display: block; }
.nwsb-essentials-reference .nwsb-essential-featured-card > strong { max-width: 72%; font-size: 21px; line-height: 1.15; }
.nwsb-essentials-reference .nwsb-essential-featured-card > small { margin-top: 11px; font-size: 14px; }
.nwsb-essentials-reference .nwsb-essential-featured-card > em { margin-top: 10px; font-style: normal; font-size: 13px; }
.nwsb-essentials-reference .nwsb-essential-featured-art { position: absolute; z-index: 1; right: 7px; bottom: 3px; width: 138px; height: 108px; border: 7px solid rgba(79,54,28,.62); border-left-color: transparent; border-bottom-color: transparent; border-radius: 50%; transform: rotate(25deg); opacity: .66; }
.nwsb-essentials-reference .nwsb-essential-row { display: grid; grid-template-columns: 22px minmax(0,1fr) auto 18px; align-items: center; min-height: 69px; padding: 0 17px; border-radius: 21px; background: #f7f5f2; color: #3c3a43; box-shadow: 0 7px 15px rgba(61,55,71,.08); }
.nwsb-essentials-reference .nwsb-essential-row-icon { display: grid; place-items: center; width: 21px; height: 21px; color: #45434a; }
.nwsb-essentials-reference .nwsb-essential-row-icon svg { width: 17px; height: 17px; }
.nwsb-essentials-reference .nwsb-essential-row-copy { min-width: 0; padding-left: 8px; }
.nwsb-essentials-reference .nwsb-essential-row-copy strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #4c4a52; font-size: 16px; font-weight: 500; }
.nwsb-essentials-reference .nwsb-essential-row-copy small { display: none; }
.nwsb-essentials-reference .nwsb-essential-meta { padding-left: 9px; color: #68666b; font-size: 14px; white-space: nowrap; }
.nwsb-essentials-reference .nwsb-essential-arrow { color: #6b696e; font-size: 25px; line-height: 1; }
.nwsb-essentials-reference .nwsb-help-heading { display: flex; align-items: center; justify-content: space-between; margin: 36px 0 18px; }
.nwsb-essentials-reference .nwsb-help-heading h3 { margin: 0; color: #20212c; font-size: 23px; letter-spacing: -.45px; }
.nwsb-essentials-reference .nwsb-help-heading button { display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 50%; background: #f7f5f2; color: #3d3b43; font-size: 28px; line-height: 1; box-shadow: 0 5px 12px rgba(44,39,61,.08); }
.nwsb-essentials-reference .nwsb-help-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.nwsb-essentials-reference .nwsb-help-card { min-width: 0; overflow: hidden; padding: 0; border: 0; border-radius: 20px; background: #f7f5f2; color: #26242c; text-align: left; box-shadow: 0 7px 15px rgba(61,55,71,.08); cursor: pointer; }
.nwsb-essentials-reference .nwsb-help-art { display: grid; place-items: center; height: 128px; color: #fff; }
.nwsb-essentials-reference .nwsb-help-art svg { width: 38px; height: 38px; }
.nwsb-essentials-reference .nwsb-help-violet .nwsb-help-art { background: linear-gradient(135deg,#55318e,#ad75d0); }
.nwsb-essentials-reference .nwsb-help-pink .nwsb-help-art { background: repeating-linear-gradient(165deg,#ef62ac 0 8px,#ff9bd2 8px 12px); }
.nwsb-essentials-reference .nwsb-help-copy { display: block; padding: 14px 14px 16px; }
.nwsb-essentials-reference .nwsb-help-copy strong, .nwsb-essentials-reference .nwsb-help-copy small { display: block; }
.nwsb-essentials-reference .nwsb-help-copy strong { font-size: 15px; }
.nwsb-essentials-reference .nwsb-help-copy small { margin-top: 5px; color: #68666b; font-size: 12px; line-height: 1.35; }
.nwsb-essentials-reference .nwsb-essentials-mark { display: none; }
#home .home-body > .nwsb-essentials-reference { width: calc(100% - 32px); margin-left: 16px; margin-right: 16px; }
#home .home-body > .nwsb-essentials-reference .nwsb-essentials-body { padding-left: 20px; padding-right: 20px; }
@media (max-width: 380px) {
  .nwsb-essentials-reference .nwsb-essentials-body { padding-left: 14px; padding-right: 14px; }
  .nwsb-essentials-reference .nwsb-essential-list { padding-left: 38px; }
  .nwsb-essentials-reference .nwsb-essential-list::before { left: 13px; }
  .nwsb-essentials-reference .nwsb-essential-meta { display: none; }
  .nwsb-essentials-reference .nwsb-help-grid { gap: 9px; }
}

/* Final reference geometry: the rail is a short connector for the three
   supporting rows, not a full-height line through the whole section. */
.nwsb-essentials-reference .nwsb-essential-list::before {
  top: 158px;
  bottom: 28px;
  width: 3px;
  background: repeating-linear-gradient(to bottom, #d9d9d7 0 9px, transparent 9px 20px);
}
.nwsb-focus-cta {
  border-radius: 999px !important;
  padding: 13px 20px !important;
}
@media (max-width: 380px) {
  .nwsb-essentials-reference .nwsb-essential-list::before { top: 154px; bottom: 25px; width: 2px; }
}

/* Compact reference proportions: a wide rounded banner rather than a tall
   poster. The video remains fully visible inside the card. */
.nwsb-focus-card { min-height: 0 !important; height: auto; aspect-ratio: 1.9 / 1; }
.nwsb-focus-content { min-height: 0 !important; height: 100%; }

/* Reference Start practice control: white rounded button, black circular
   arrow well, white arrow glyph. Scoped to the dashboard CTA only. */
.nwsb-focus-cta {
  display: inline-flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 52px;
  padding: 8px 8px 8px 20px !important;
  border: 0;
  border-radius: 999px !important;
  background: #fff !important;
  color: #080b13 !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
}
.nwsb-focus-cta span.nwsb-focus-cta-arrow {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 50% !important;
  background: #080b13 !important;
  color: #fff;
  font-size: 21px;
  line-height: 1;
}
.nwsb-focus-cta-arrow svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* Regression fix: the August 15 Store trigger expects this compact icon row.
   Without explicit dimensions, Android WebView gives the inline bag SVG its
   intrinsic oversized fallback box and it covers the Store artwork. */
.nss-trigger-go {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.nss-trigger-go-ic {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  display: block;
}
.nss-trigger-go-ic svg {
  width: 100%;
  height: 100%;
  display: block;
}
.nss-trigger-go-rule {
  flex: 0 0 1px;
  height: 26px;
  background: rgba(255,255,255,0.35);
}
.nss-trigger-btn-top { margin: 0 !important; }
.nss-trigger-bottom > .nss-trigger-pills:last-child { margin-bottom: 0; }

/* ══ WEBVIEW PANEL FINISH ══
   Preserve the August 15 panel structure while giving its internal pieces
   the small breathing space and complete corner treatment shown in the
   reference layout. */
:is(#home, #home-nm) .mainops-blk > .qa-tv-head {
  margin-bottom: 12px !important;
}
:is(#home, #home-nm) .mainops-blk > .mo-box {
  margin-top: 0 !important;
  overflow: hidden !important;
  border-radius: 18px !important;
}
:is(#home, #home-nm) .mainops-blk > .ncb-carousel.nsub-ban {
  margin-top: 14px !important;
  overflow: hidden !important;
  border-radius: 22px !important;
}
:is(#home, #home-nm) .mainops-blk > .ncb-carousel.nsub-ban .ncb-slide {
  overflow: hidden !important;
  border-radius: inherit !important;
}
/* Fashion's baseline practice card is present in HTML and is a required
   early-home section; do not let a stale layout class hide it. */
#home .home-body > .fash-plyr-wrap {
  display: block !important;
  visibility: visible !important;
}
#home .home-body > .fash-plyr-wrap > #todayPracticeCard {
  overflow: hidden !important;
  border-radius: 20px !important;
}

/* ══ WEBVIEW HOME — rounded reference panels ══
   Keep every visible dashboard surface rounded on all four corners. The
   outer list clips its rows; each standalone panel also gets its own radius
   so later theme rules cannot restore square edges. */
.nwsb-daydash .nwsb-focus-card,
.nwsb-daydash .nwsb-progress-card,
.nwsb-daydash .nwsb-upnext-list {
  border-radius: 24px !important;
  overflow: hidden !important;
}
.nwsb-daydash .nwsb-progress-card {
  box-sizing: border-box !important;
}
.nwsb-daydash .nwsb-upnext-list .nwsb-upnext-card,
.nwsb-daydash .nwsb-upnext-list .nwsb-upnext-card:first-child,
.nwsb-daydash .nwsb-upnext-list .nwsb-upnext-card:last-child {
  border-radius: 0 !important;
}
.nwsb-daydash .nwsb-upnext-list .nwsb-upnext-card:first-child {
  border-top-left-radius: 24px !important;
  border-top-right-radius: 24px !important;
}
.nwsb-daydash .nwsb-upnext-list .nwsb-upnext-card:last-child {
  border-bottom-left-radius: 24px !important;
  border-bottom-right-radius: 24px !important;
}
.nwsb-daydash .nwsb-focus-card video,
.nwsb-daydash .nwsb-focus-card img {
  border-radius: inherit !important;
}

/* Rebuilt Essentials / Helping Others reference pass. The list has a real
   progress rail; the supporting cards are a horizontal, touch-scrollable
   gallery so all eight working destinations remain available without
   squeezing or overflowing on narrow Android screens. */
.nwsb-essentials-reference .nwsb-essential-featured-card { min-height: 182px; }
.nwsb-essentials-reference .nwsb-essential-row { min-height: 74px; }
.nwsb-essentials-reference .nwsb-help-rail {
  display: flex;
  gap: 14px;
  width: calc(100% + 4px);
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 2px 10px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.nwsb-essentials-reference .nwsb-help-rail::-webkit-scrollbar { display: none; }
.nwsb-essentials-reference .nwsb-help-rail .nwsb-help-card {
  flex: 0 0 190px;
  width: 190px;
  height: 220px;
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  border-radius: 22px;
}
.nwsb-essentials-reference .nwsb-help-rail .nwsb-help-art { height: 124px; flex: 0 0 124px; }
.nwsb-essentials-reference .nwsb-help-rail .nwsb-help-copy { min-height: 0; flex: 1; padding: 13px 12px 10px 14px; }
.nwsb-essentials-reference .nwsb-help-rail .nwsb-help-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; line-height: 1.2; }
.nwsb-essentials-reference .nwsb-help-rail .nwsb-help-copy small { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; margin-top: 5px; font-size: 11px; line-height: 1.25; }
.nwsb-essentials-reference .nwsb-help-blue .nwsb-help-art { background: linear-gradient(135deg,#243b73,#70a0d8); }
.nwsb-essentials-reference .nwsb-help-mint .nwsb-help-art { background: linear-gradient(135deg,#218c7a,#7ad7b2); }
.nwsb-essentials-reference .nwsb-help-amber .nwsb-help-art { background: linear-gradient(135deg,#e58c3a,#ffcb68); }
.nwsb-essentials-reference .nwsb-help-coral .nwsb-help-art { background: linear-gradient(135deg,#b84a4a,#ff9a79); }
.nwsb-essentials-reference .nwsb-help-cyan .nwsb-help-art { background: linear-gradient(135deg,#3a6d8c,#83c9d9); }
@media (max-width: 380px) {
  .nwsb-essentials-reference .nwsb-help-rail { gap: 10px; }
  .nwsb-essentials-reference .nwsb-help-rail .nwsb-help-card { flex-basis: 178px; width: 178px; }
}


/* ══ FOUR-SURFACE REFERENCE PASS — Essentials geometry ══
   The rail is an actual visual guide: the line remains behind the cards and
   each row contributes a visible hollow/active circle. The cards stay on the
   right side of that rail, matching the supplied narrow-phone composition. */
.nwsb-essentials-reference {
  margin: 24px 0 12px !important;
  border-radius: 0 !important;
  overflow: visible !important;
}
.nwsb-essentials-reference .nwsb-essentials-wave {
  height: 78px !important;
  border-radius: 0 0 52% 52% / 0 0 74% 74% !important;
  background: linear-gradient(180deg, #5732a8 0%, #7b4bb1 55%, #ffffff 100%) !important;
}
.nwsb-essentials-reference .nwsb-essentials-body {
  margin-top: -1px !important;
  padding: 0 20px 30px !important;
  background: #ffffff !important;
}
.nwsb-essentials-reference .nwsb-essential-tabs {
  gap: 10px !important;
  margin: -5px 0 38px !important;
}
.nwsb-essentials-reference .nwsb-essential-tab {
  min-width: 126px !important;
  height: 49px !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  background: #f7f4ef !important;
  color: #282631 !important;
  box-shadow: 0 7px 16px rgba(50,45,60,.10) !important;
}
.nwsb-essentials-reference .nwsb-essentials-heading {
  margin: 0 0 16px !important;
}
.nwsb-essentials-reference .nwsb-essentials-heading h2 {
  font-size: 28px !important;
  font-weight: 800 !important;
  letter-spacing: -.8px !important;
}
.nwsb-essentials-reference .nwsb-essential-list {
  gap: 12px !important;
  padding: 0 0 0 47px !important;
}
.nwsb-essentials-reference .nwsb-essential-list::before {
  left: 16px !important;
  top: 40px !important;
  bottom: 28px !important;
  width: 4px !important;
  background: repeating-linear-gradient(to bottom, #d7d8d6 0 12px, transparent 12px 26px) !important;
}
.nwsb-essentials-reference .nwsb-essential-featured-card {
  min-height: 220px !important;
  padding: 28px 26px 22px !important;
  border-radius: 28px !important;
  background: linear-gradient(125deg, #ffd000 0%, #ffc20c 52%, #ff8b27 100%) !important;
}
.nwsb-essentials-reference .nwsb-essential-featured-card::before,
.nwsb-essentials-reference .nwsb-essential-row::before {
  content: '';
  position: absolute;
  z-index: 4;
  left: -39px;
  top: 50%;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 3px solid #d8d9d7;
  background: #ffffff;
  box-sizing: border-box;
}
.nwsb-essentials-reference .nwsb-essential-featured-card::before {
  top: 28px;
  width: 30px;
  height: 30px;
  left: -46px;
  border: 0;
  background: #ff8d22;
  box-shadow: 0 0 0 4px rgba(255,141,34,.12);
}
.nwsb-essentials-reference .nwsb-essential-row {
  min-height: 74px !important;
  border-radius: 24px !important;
  background: #f8f6f2 !important;
  box-shadow: 0 8px 18px rgba(61,55,71,.09) !important;
}
.nwsb-essentials-reference .nwsb-essential-row-copy strong {
  font-size: 16px !important;
  font-weight: 600 !important;
}
.nwsb-essentials-reference .nwsb-essentials-guide {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 128px;
  margin: 28px 0 0;
  padding: 22px 20px;
  border: 0;
  border-radius: 24px;
  background: #050505;
  color: #ffffff;
  text-align: left;
  box-shadow: 0 10px 20px rgba(0,0,0,.18);
  cursor: pointer;
}
.nwsb-essentials-reference .nwsb-essentials-guide-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  border-radius: 19px;
  background: #171717;
  border: 1px solid rgba(255,255,255,.14);
}
.nwsb-essentials-reference .nwsb-essentials-guide-icon svg { width: 28px; height: 28px; }
.nwsb-essentials-reference .nwsb-essentials-guide-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.nwsb-essentials-reference .nwsb-essentials-guide-copy strong { font-size: 17px; font-weight: 800; line-height: 1.15; }
.nwsb-essentials-reference .nwsb-essentials-guide-copy small { color: rgba(255,255,255,.62); font-size: 12px; line-height: 1.35; }
.nwsb-essentials-reference .nwsb-essentials-guide-arrow { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,.22); color: #fff; font-size: 30px; line-height: 1; }
.nwsb-essentials-reference .nwsb-help-heading { margin: 34px 0 18px !important; }
.nwsb-essentials-reference .nwsb-help-heading h3 { font-size: 24px !important; font-weight: 800 !important; }
.nwsb-essentials-reference .nwsb-help-heading button { width: 42px !important; height: 42px !important; }
.nwsb-essentials-reference .nwsb-help-rail { margin-left: 0; }

/* Fashion keeps the exact geometry but changes only the surface language. */
.nwsb-essentials-reference.nwsb-essentials-fashion .nwsb-essentials-wave {
  background: linear-gradient(180deg, rgba(9,7,22,.10), rgba(10,8,25,.92)) !important;
}
.nwsb-essentials-reference.nwsb-essentials-fashion .nwsb-essentials-body {
  background: rgba(8,7,20,.58) !important;
  color: #fff !important;
}
.nwsb-essentials-reference.nwsb-essentials-fashion .nwsb-essential-tab {
  background: rgba(255,255,255,.12) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: 0 10px 25px rgba(0,0,0,.22) !important;
}
.nwsb-essentials-reference.nwsb-essentials-fashion .nwsb-essential-tab.is-active {
  background: rgba(255,255,255,.88) !important;
  color: #171426 !important;
}
.nwsb-essentials-reference.nwsb-essentials-fashion .nwsb-essentials-heading h2,
.nwsb-essentials-reference.nwsb-essentials-fashion .nwsb-help-heading h3 { color: #fff !important; }
.nwsb-essentials-reference.nwsb-essentials-fashion .nwsb-essential-row {
  background: rgba(12,10,25,.68) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: 0 13px 28px rgba(0,0,0,.28) !important;
}
.nwsb-essentials-reference.nwsb-essentials-fashion .nwsb-essential-featured-card { box-shadow: 0 13px 30px rgba(0,0,0,.30) !important; }
.nwsb-essentials-reference.nwsb-essentials-fashion .nwsb-essential-row::before { background: rgba(17,14,35,.94); border-color: rgba(255,255,255,.55); }
.nwsb-essentials-reference.nwsb-essentials-fashion .nwsb-essential-list::before { background: repeating-linear-gradient(to bottom, rgba(255,255,255,.40) 0 12px, transparent 12px 26px) !important; }
.nwsb-essentials-reference.nwsb-essentials-fashion .nwsb-essentials-guide { background: #000; }

@media (max-width: 380px) {
  .nwsb-essentials-reference .nwsb-essentials-body { padding-left: 14px !important; padding-right: 14px !important; }
  .nwsb-essentials-reference .nwsb-essential-list { padding-left: 42px !important; }
  .nwsb-essentials-reference .nwsb-essential-list::before { left: 13px !important; }
  .nwsb-essentials-reference .nwsb-essential-featured-card::before,
  .nwsb-essentials-reference .nwsb-essential-row::before { left: -34px; }
  .nwsb-essentials-reference .nwsb-essential-featured-card::before { left: -40px; }
  .nwsb-essentials-reference .nwsb-essentials-guide { padding-left: 14px; padding-right: 14px; }
}


/* ══════════════════════════════════════════════════════════════════════
   WEBVIEW REFERENCE CORRECTION — normal home geometry
   The essentials rail is intentionally collapsed to three meditation paths.
   The line begins after the featured card; it never runs through the banner.
   The old purple wave is not part of the reference composition.
   ══════════════════════════════════════════════════════════════════════ */
.nwsb-essentials-reference .nwsb-essentials-wave { display: none !important; }
.nwsb-essentials-reference {
  width: 100% !important;
  margin: 22px 0 8px !important;
  box-sizing: border-box;
}
.nwsb-essentials-reference .nwsb-essentials-body {
  padding: 0 28px 24px !important;
  background: #ffffff !important;
  color: #20212a !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.nwsb-essentials-reference .nwsb-essential-tabs {
  gap: 12px !important;
  margin: 0 0 30px !important;
}
.nwsb-essentials-reference .nwsb-essential-tab {
  min-height: 52px !important;
  padding: 12px 24px !important;
  border-radius: 999px !important;
  background: #f7f5f1 !important;
  color: #24232a !important;
  box-shadow: 0 8px 18px rgba(70,62,55,.08), -4px -4px 12px rgba(255,255,255,.9) !important;
}
.nwsb-essentials-reference .nwsb-essential-tab svg { width: 19px !important; height: 19px !important; }
.nwsb-essentials-reference .nwsb-essential-tab.is-active {
  background: #f7f5f1 !important;
  color: #24232a !important;
  box-shadow: 0 8px 18px rgba(70,62,55,.08), -4px -4px 12px rgba(255,255,255,.9) !important;
}
.nwsb-essentials-reference .nwsb-essentials-heading {
  margin: 0 0 26px !important;
}
.nwsb-essentials-reference .nwsb-essentials-heading h2 {
  color: #171821 !important;
  font-size: clamp(28px, 7vw, 40px) !important;
  font-weight: 800 !important;
  letter-spacing: -1.25px !important;
}
.nwsb-essentials-reference .nwsb-essentials-shell {
  position: relative !important;
  padding: 0 0 0 46px !important;
}
.nwsb-essentials-reference .nwsb-essential-list {
  position: relative !important;
  display: grid !important;
  gap: 14px !important;
  padding: 0 !important;
  overflow: visible !important;
}
.nwsb-essentials-reference .nwsb-essential-list::before {
  content: '' !important;
  position: absolute !important;
  z-index: 0 !important;
  left: -23px !important;
  top: 202px !important;
  bottom: 24px !important;
  width: 5px !important;
  border-radius: 999px !important;
  background: repeating-linear-gradient(to bottom, #d8d9d8 0 11px, transparent 11px 23px) !important;
}
.nwsb-essentials-reference .nwsb-essential-featured-card,
.nwsb-essentials-reference .nwsb-essential-row {
  z-index: 1 !important;
  box-sizing: border-box !important;
  border-radius: 28px !important;
  overflow: hidden !important;
}
.nwsb-essentials-reference .nwsb-essential-featured-card {
  min-height: 186px !important;
  height: 186px !important;
  padding: 24px 24px 20px !important;
  background: linear-gradient(124deg, #ffd000 0%, #ffc51c 56%, #ff8d24 100%) !important;
  box-shadow: 0 12px 22px rgba(119,83,18,.15) !important;
}
.nwsb-essentials-reference .nwsb-essential-featured-card::before {
  left: -61px !important;
  top: 24px !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  background: #ff8d22 !important;
  box-shadow: 0 0 0 4px rgba(255,141,34,.15) !important;
}
.nwsb-essentials-reference .nwsb-essential-featured-card > strong {
  max-width: 68% !important;
  margin-top: 18px !important;
  font-size: 24px !important;
  line-height: 1.14 !important;
  letter-spacing: -.45px !important;
}
.nwsb-essentials-reference .nwsb-essential-featured-card > small { margin-top: 12px !important; font-size: 15px !important; }
.nwsb-essentials-reference .nwsb-essential-featured-card > em { margin-top: 10px !important; font-size: 14px !important; }
.nwsb-essentials-reference .nwsb-essential-badge {
  border-radius: 999px !important;
  background: rgba(255,255,255,.76) !important;
  padding: 7px 13px !important;
  font-size: 13px !important;
}
.nwsb-essentials-reference .nwsb-essential-featured-icon {
  top: 22px !important;
  right: 22px !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.78) !important;
}
.nwsb-essentials-reference .nwsb-essential-featured-icon svg { width: 24px !important; height: 24px !important; }
.nwsb-essentials-reference .nwsb-essential-row {
  display: grid !important;
  grid-template-columns: 24px minmax(0,1fr) auto 20px !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 78px !important;
  padding: 16px 18px !important;
  background: #faf9f6 !important;
  border: 0 !important;
  box-shadow: 0 8px 18px rgba(61,55,71,.10) !important;
}
.nwsb-essentials-reference .nwsb-essential-row::before {
  left: -61px !important;
  top: 50% !important;
  width: 22px !important;
  height: 22px !important;
  border: 3px solid #d8d9d7 !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  transform: translateY(-50%) !important;
}
.nwsb-essentials-reference .nwsb-essential-row-icon { width: 24px !important; height: 24px !important; }
.nwsb-essentials-reference .nwsb-essential-row-icon svg { width: 20px !important; height: 20px !important; }
.nwsb-essentials-reference .nwsb-essential-row-copy { min-width: 0 !important; }
.nwsb-essentials-reference .nwsb-essential-row-copy strong { font-size: 18px !important; font-weight: 650 !important; color: #33323a !important; }
.nwsb-essentials-reference .nwsb-essential-row-copy small { display: none !important; }
.nwsb-essentials-reference .nwsb-essential-meta { color: #77747b !important; font-size: 13px !important; }
.nwsb-essentials-reference .nwsb-essential-arrow { color: #5c5a61 !important; font-size: 28px !important; }
.nwsb-essentials-reference .nwsb-essential-expand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  margin: 14px 0 0;
  padding: 10px 16px;
  border: 0;
  border-radius: 999px;
  background: #f4f2ee;
  color: #424047;
  font: 700 13px/1 'DM Sans', sans-serif;
  box-shadow: 0 6px 14px rgba(61,55,71,.08);
  cursor: pointer;
}
.nwsb-essentials-reference .nwsb-essential-expand b { font-size: 18px; line-height: .7; }
.nwsb-essentials-reference .nwsb-essential-expand[hidden] { display: none !important; }
.nwsb-essentials-reference .nwsb-essentials-guide {
  min-height: 104px !important;
  height: 104px !important;
  margin: 20px 0 0 !important;
  padding: 16px 18px !important;
  border-radius: 26px !important;
  background: #000 !important;
  box-shadow: 0 12px 22px rgba(0,0,0,.18) !important;
}
.nwsb-essentials-reference .nwsb-essentials-guide-icon {
  width: 56px !important;
  height: 56px !important;
  flex-basis: 56px !important;
  border-radius: 18px !important;
}
.nwsb-essentials-reference .nwsb-essentials-guide-copy { gap: 4px !important; }
.nwsb-essentials-reference .nwsb-essentials-guide-copy strong { font-size: 17px !important; }
.nwsb-essentials-reference .nwsb-essentials-guide-copy small { font-size: 12px !important; }
.nwsb-essentials-reference .nwsb-essentials-guide-arrow { width: 40px !important; height: 40px !important; flex-basis: 40px !important; font-size: 27px !important; }

/* Six real meditation destinations: one rounded panel, no square tile edges. */
:is(#home-nm, #home) .mainops-blk {
  box-sizing: border-box !important;
  margin: 24px 34px 0 !important;
  padding: 26px 24px 22px !important;
  border-radius: 28px !important;
  overflow: hidden !important;
}
#home-nm .mainops-blk {
  background: #f1f3f7 !important;
  border: 0 !important;
  box-shadow: 8px 8px 20px rgba(164,171,187,.22), -8px -8px 20px rgba(255,255,255,.96) !important;
}
#home .mainops-blk {
  background: rgba(11,10,25,.56) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 14px 30px rgba(0,0,0,.26) !important;
}
:is(#home-nm, #home) .mainops-blk > .qa-tv-head { margin: 0 0 22px !important; align-items: center !important; }
:is(#home-nm, #home) .mainops-blk .qa-tv-hello { font-size: 19px !important; line-height: 1.15 !important; }
:is(#home-nm, #home) .mainops-blk .qa-tv-name { font-size: 29px !important; line-height: 1.05 !important; }
:is(#home-nm, #home) .mainops-blk > .mo-box {
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}
:is(#home-nm, #home) .mainops-blk .mo-row {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin: 0 0 10px !important;
}
:is(#home-nm, #home) .mainops-blk .mo-rule { display: none !important; }
:is(#home-nm, #home) .mainops-blk .mo-cell {
  box-sizing: border-box !important;
  min-width: 0 !important;
  min-height: 124px !important;
  padding: 16px 6px 13px !important;
  border: 0 !important;
  border-radius: 20px !important;
  background: #f8f7f4 !important;
  color: #171821 !important;
  box-shadow: 0 7px 15px rgba(61,55,71,.09) !important;
}
#home .mainops-blk .mo-cell {
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: #fff !important;
  box-shadow: 0 9px 20px rgba(0,0,0,.18) !important;
}
:is(#home-nm, #home) .mainops-blk .mo-ic { width: 48px !important; height: 48px !important; border-radius: 50% !important; }
:is(#home-nm, #home) .mainops-blk .mo-ic svg { width: 34px !important; height: 34px !important; }
:is(#home-nm, #home) .mainops-blk .mo-lbl { margin-top: 10px !important; font-size: 12px !important; line-height: 1.08 !important; text-align: center !important; }
:is(#home-nm, #home) .mainops-blk > .ncb-carousel.nsub-ban {
  min-height: 104px !important;
  height: 104px !important;
  margin: 20px 0 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 26px !important;
  background: #000 !important;
  box-shadow: 0 12px 22px rgba(0,0,0,.18) !important;
}
:is(#home-nm, #home) .mainops-blk > .ncb-carousel.nsub-ban .ncb-slide {
  min-height: 104px !important;
  padding: 16px 18px !important;
  border-radius: 26px !important;
  box-sizing: border-box !important;
}
:is(#home-nm, #home) .mainops-blk > .ncb-carousel.nsub-ban .ncb-ico { width: 56px !important; height: 56px !important; border-radius: 18px !important; }
:is(#home-nm, #home) .mainops-blk > .ncb-carousel.nsub-ban .ncb-name { font-size: 17px !important; }
:is(#home-nm, #home) .mainops-blk > .ncb-carousel.nsub-ban .ncb-sub { font-size: 12px !important; line-height: 1.3 !important; }
:is(#home-nm, #home) .mainops-blk > .ncb-carousel.nsub-ban .ncb-btn { width: 40px !important; height: 40px !important; }

@media (max-width: 420px) {
  .nwsb-essentials-reference .nwsb-essentials-body { padding-left: 20px !important; padding-right: 20px !important; }
  .nwsb-essentials-reference .nwsb-essentials-shell { padding-left: 40px !important; }
  .nwsb-essentials-reference .nwsb-essential-list::before { left: -20px !important; top: 202px !important; }
  .nwsb-essentials-reference .nwsb-essential-featured-card::before,
  .nwsb-essentials-reference .nwsb-essential-row::before { left: -56px !important; }
  .nwsb-essentials-reference .nwsb-essential-featured-card { height: 178px !important; min-height: 178px !important; padding: 22px 20px 18px !important; }
  .nwsb-essentials-reference .nwsb-essential-featured-card > strong { font-size: 21px !important; }
  .nwsb-essentials-reference .nwsb-essential-row-copy strong { font-size: 16px !important; }
  :is(#home-nm, #home) .mainops-blk { margin-left: 20px !important; margin-right: 20px !important; padding-left: 16px !important; padding-right: 16px !important; }
  :is(#home-nm, #home) .mainops-blk .mo-cell { min-height: 112px !important; }
  :is(#home-nm, #home) .mainops-blk .mo-lbl { font-size: 11px !important; }
}


/* Final cascade guard: the legacy button reset sets radius to zero without
   affecting the other properties. Keep every new reference control rounded. */
.nwsb-essentials-reference .nwsb-essential-expand,
.nwsb-essentials-reference .nwsb-essentials-guide,
:is(#home-nm, #home) .mainops-blk .mo-cell,
:is(#home-nm, #home) .mainops-blk > .ncb-carousel.nsub-ban,
:is(#home-nm, #home) .mainops-blk > .ncb-carousel.nsub-ban .ncb-slide {
  border-radius: 26px !important;
}
.nwsb-essentials-reference .nwsb-essential-tab { border-radius: 999px !important; }
.nwsb-essentials-reference .nwsb-essential-row,
.nwsb-essentials-reference .nwsb-essential-featured-card { border-radius: 28px !important; }
/* The purple store promo is a separate legacy card above the normal-home
   dashboard. It is not the retained player background video. */
#home-nm .nmh-wrap > .npc-purple { display: none !important; }


#home-nm .mainops-blk {
  margin: 0 34px 22px !important;
  padding: 28px 24px 22px !important;
  border-radius: 28px !important;
  background: #f1f3f7 !important;
  box-shadow: 8px 8px 20px rgba(164,171,187,.20), -8px -8px 20px rgba(255,255,255,.96) !important;
}
#home-nm .mainops-blk > .qa-tv-head { margin-bottom: 22px !important; }
#home-nm .mainops-blk .qa-tv-orb {
  width: 58px !important;
  height: 58px !important;
  flex: 0 0 58px !important;
  border-radius: 50% !important;
  background: #f8f9fb !important;
  color: #b59a5c !important;
  box-shadow: 7px 7px 14px rgba(164,171,187,.20), -5px -5px 13px #fff !important;
}
#home-nm .mainops-blk .qa-tv-hello { color: #6e707a !important; font-size: 18px !important; }
#home-nm .mainops-blk .qa-tv-name { color: #12131d !important; font-size: 30px !important; letter-spacing: -.8px !important; }
#home-nm .mainops-blk > .mo-box {
  display: block !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  border: 1px solid #dfe1e7 !important;
  border-radius: 21px !important;
  background: #f5f6f9 !important;
  overflow: hidden !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72) !important;
}
#home-nm .mainops-blk .mo-row {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;
  margin: 0 !important;
}
#home-nm .mainops-blk .mo-row + .mo-row { border-top: 1px solid #dfe1e7 !important; }
#home-nm .mainops-blk .mo-rule { display: none !important; }
#home-nm .mainops-blk .mo-cell {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
  min-height: 94px !important;
  padding: 13px 4px 11px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #22232d !important;
  box-shadow: none !important;
}
#home-nm .mainops-blk .mo-row .mo-cell:nth-of-type(1),
#home-nm .mainops-blk .mo-row .mo-cell:nth-of-type(2) { border-right: 1px solid #dfe1e7 !important; }
#home-nm .mainops-blk .mo-ic {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #af9251 !important;
}
#home-nm .mainops-blk .mo-ic svg { width: 27px !important; height: 27px !important; }
#home-nm .mainops-blk .mo-lbl {
  display: block !important;
  max-width: 100% !important;
  margin-top: 8px !important;
  color: #292a34 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.12 !important;
  text-align: center !important;
}
#home-nm .mainops-blk > .ncb-carousel.nsub-ban {
  min-height: 104px !important;
  height: 104px !important;
  margin: 20px 0 0 !important;
  border-radius: 26px !important;
  overflow: hidden !important;
  background: #000 !important;
}
#home-nm .mainops-blk > .ncb-carousel.nsub-ban .ncb-slide { min-height: 104px !important; padding: 16px 18px !important; border-radius: 26px !important; }
#home-nm .mainops-blk > .ncb-carousel.nsub-ban .ncb-ico { width: 56px !important; height: 56px !important; border-radius: 18px !important; }
#home-nm .mainops-blk > .ncb-carousel.nsub-ban .ncb-name { font-size: 17px !important; }
#home-nm .mainops-blk > .ncb-carousel.nsub-ban .ncb-sub { font-size: 12px !important; line-height: 1.3 !important; }
#home-nm .mainops-blk > .ncb-carousel.nsub-ban .ncb-btn { width: 40px !important; height: 40px !important; border-radius: 50% !important; }

@media (max-width: 420px) {
  #home-nm .nmh-wrap > .npc-purple { width: calc(100% - 28px) !important; margin-left: 14px !important; margin-right: 14px !important; border-width: 8px !important; }
  #home-nm .mainops-blk { margin-left: 16px !important; margin-right: 16px !important; padding-left: 14px !important; padding-right: 14px !important; }
  #home-nm .mainops-blk .qa-tv-hello { font-size: 16px !important; }
  #home-nm .mainops-blk .qa-tv-name { font-size: 25px !important; }
  #home-nm .mainops-blk .mo-cell { min-height: 86px !important; }
  #home-nm .mainops-blk .mo-lbl { font-size: 10px !important; }
}

/* ══ AUGUST 15 WHERE-TO-BEGIN COMPATIBILITY ══
   Keep the complete current stylesheet above. These final selectors transplant
   only the August 15 normal-home panel geometry and original padding after
   later dashboard overrides, without removing current dashboard styles. */
#home-nm .mainops-blk.nmh-sec-wrap {
  box-sizing: border-box !important;
  overflow: hidden !important;
  width: 100% !important;
  margin: 16px 0 !important;
  padding: 14px !important;
  background: #f0f2f7 !important;
  border: 0 !important;
  border-radius: 22px !important;
  box-shadow: 7px 7px 16px rgba(0,0,0,0.14), -5px -5px 12px rgba(255,255,255,0.97) !important;
}
#home-nm.nm-dark .mainops-blk.nmh-sec-wrap {
  background: #16163c !important;
  box-shadow: 8px 8px 22px rgba(0,0,0,0.88), -4px -4px 14px rgba(50,50,110,0.32) !important;
}
#home-nm .mainops-blk > .qa-tv-head {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin: 0 !important;
  padding: 0 2px 14px !important;
}
#home-nm .mainops-blk > .qa-tv-head .qa-tv-orb {
  width: 54px !important;
  height: 54px !important;
  flex: 0 0 54px !important;
  border-radius: 50% !important;
}
#home-nm .mainops-blk > .qa-tv-head .qa-tv-hello {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 20px !important;
  line-height: 1.2 !important;
}
#home-nm .mainops-blk > .qa-tv-head .qa-tv-name {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 27px !important;
  line-height: 1.12 !important;
}
#home-nm .mainops-blk > .mo-box {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 126px !important;
  margin: 10px 0 14px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(26,26,46,0.08) !important;
  border-radius: 16px !important;
  background: rgba(26,26,46,0.03) !important;
  box-shadow: none !important;
}
#home-nm .mainops-blk > .mo-box .mo-row {
  display: flex !important;
  align-items: stretch !important;
  width: 100% !important;
  height: 62px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
#home-nm .mainops-blk > .mo-box .mo-cell {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 62px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 0 3px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
#home-nm .mainops-blk > .mo-box .mo-rule {
  display: block !important;
  flex: 0 0 1px !important;
  align-self: center !important;
  width: 1px !important;
  height: 34px !important;
  margin: 0 !important;
  background: rgba(26,26,46,0.08) !important;
}
#home-nm .mainops-blk > .mo-box .mo-ic {
  display: block !important;
  width: 21px !important;
  height: 21px !important;
  flex: 0 0 21px !important;
  margin: 0 !important;
  background: transparent !important;
  color: #b39a5e !important;
}
#home-nm .mainops-blk > .mo-box .mo-ic svg {
  width: 100% !important;
  height: 100% !important;
}
#home-nm .mainops-blk > .mo-box .mo-lbl {
  display: block !important;
  max-width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #1a1a2e !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  text-align: center !important;
}
#home-nm .mainops-blk > .ncb-carousel.nsub-ban {
  min-height: 0 !important;
  height: auto !important;
  margin: 10px 0 0 !important;
  overflow: hidden !important;
  border-radius: 16px !important;
}
#home-nm .mainops-blk > .ncb-carousel.nsub-ban .ncb-slide {
  min-height: 0 !important;
  padding: 14px 16px !important;
  border-radius: 16px !important;
}
/* ══ FASHION WHERE-TO-BEGIN REFERENCE ══
   The normal home keeps its August 15 compact transplant above. Fashion
   uses the dark glass six-door panel: larger rounded cards, no rectangular
   light surfaces, and the black guide banner below. */
#home .mainops-blk.glass-wrap {
  box-sizing: border-box !important;
  margin: 24px 28px 0 !important;
  padding: 26px 24px 24px !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 30px !important;
  overflow: hidden !important;
  background: linear-gradient(145deg, rgba(28,20,47,.88), rgba(37,13,49,.78)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.10), 0 18px 42px rgba(0,0,0,.32) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}
#home .mainops-blk.glass-wrap > .qa-tv-head {
  margin: 0 0 24px !important;
  gap: 16px !important;
  padding: 0 2px !important;
}
#home .mainops-blk.glass-wrap .qa-tv-orb {
  width: 64px !important;
  height: 64px !important;
  flex: 0 0 64px !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: #141221 !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.22) !important;
}
#home .mainops-blk.glass-wrap .qa-tv-orb svg { width: 30px !important; height: 30px !important; }
#home .mainops-blk.glass-wrap .qa-tv-hello { color: rgba(236,225,255,.78) !important; font-size: 18px !important; line-height: 1.1 !important; }
#home .mainops-blk.glass-wrap .qa-tv-name { color: #fff !important; font-size: 30px !important; line-height: 1.04 !important; letter-spacing: -.5px !important; }
#home .mainops-blk.glass-wrap > .mo-box { padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; overflow: visible !important; }
#home .mainops-blk.glass-wrap .mo-row { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 16px !important; margin: 0 0 16px !important; }
#home .mainops-blk.glass-wrap .mo-cell {
  min-width: 0 !important;
  min-height: 134px !important;
  padding: 18px 8px 14px !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 28px !important;
  background: linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.075)) !important;
  color: #fff !important;
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 12px 24px rgba(0,0,0,.18) !important;
}
#home .mainops-blk.glass-wrap .mo-ic { width: 48px !important; height: 48px !important; border-radius: 50% !important; background: transparent !important; color: #fff !important; }
#home .mainops-blk.glass-wrap .mo-ic svg { width: 38px !important; height: 38px !important; }
#home .mainops-blk.glass-wrap .mo-lbl { margin-top: 12px !important; color: #fff !important; font-size: 14px !important; line-height: 1.18 !important; text-align: center !important; }
#home .mainops-blk.glass-wrap > .ncb-carousel.nsub-ban { min-height: 120px !important; height: 120px !important; margin: 18px 0 0 !important; border: 0 !important; border-radius: 28px !important; background: #000 !important; box-shadow: 0 14px 26px rgba(0,0,0,.24) !important; }
#home .mainops-blk.glass-wrap > .ncb-carousel.nsub-ban .ncb-slide { min-height: 120px !important; padding: 18px 20px !important; border-radius: 28px !important; }
#home .mainops-blk.glass-wrap > .ncb-carousel.nsub-ban .ncb-ico { width: 58px !important; height: 58px !important; border-radius: 18px !important; }
#home .mainops-blk.glass-wrap > .ncb-carousel.nsub-ban .ncb-name { font-size: 18px !important; }
#home .mainops-blk.glass-wrap > .ncb-carousel.nsub-ban .ncb-sub { font-size: 13px !important; line-height: 1.28 !important; }
#home .mainops-blk.glass-wrap > .ncb-carousel.nsub-ban .ncb-btn { width: 42px !important; height: 42px !important; border-radius: 50% !important; }

@media (max-width: 420px) {
  #home-nm .mainops-blk > .qa-tv-head { padding-left: 2px !important; padding-right: 2px !important; }
  #home-nm .mainops-blk > .mo-box { height: 126px !important; }
  #home-nm .mainops-blk > .mo-box .mo-cell { height: 62px !important; }
  #home-nm .mainops-blk > .mo-box .mo-lbl { font-size: 10px !important; }
}

/* ══ SHARED ICON-LED SECTION HEADINGS ══
   Both homes use the same content hierarchy; only the wrapper language
   changes: white circles on Fashion glass, raised surface circles on Normal. */
.nwsb-dashboard-heading {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin: 24px 0 12px !important;
}
.nwsb-dashboard-heading .nwsb-dashboard-mark,
.nwsb-essentials-heading .nwsb-essentials-heading-icon {
  display: grid !important;
  place-items: center !important;
  flex: 0 0 52px !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  background: #f0f2f7 !important;
  color: #b39a5e !important;
  box-shadow: 5px 5px 12px rgba(166,171,189,.30), -4px -4px 10px rgba(255,255,255,.88) !important;
}
.nwsb-dashboard-heading .nwsb-dashboard-mark svg,
.nwsb-essentials-heading .nwsb-essentials-heading-icon svg {
  width: 23px !important;
  height: 23px !important;
  display: block !important;
}
.nwsb-dashboard-heading-copy,
.nwsb-essentials-heading > div { min-width: 0 !important; flex: 1 1 auto !important; }
.nwsb-dashboard-heading-copy .nwsb-dashboard-eyebrow,
.nwsb-essentials-eyebrow {
  color: rgba(26,26,46,.50) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 1.8px !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
}
.nwsb-dashboard-heading-copy h2,
.nwsb-essentials-heading h2 {
  margin: 3px 0 0 !important;
  color: #20212c !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  letter-spacing: -.45px !important;
  line-height: 1.15 !important;
}
.nwsb-dashboard-heading > button {
  flex: 0 0 auto !important;
  align-self: center !important;
  margin-left: auto !important;
}
.nwsb-essentials-heading {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin: 0 4px 14px !important;
}
.nwsb-essentials-reference .nwsb-essential-tabs { display: none !important; }
.nwsb-essentials-normal .nwsb-essentials-heading .nwsb-essentials-heading-icon { background: #f0f2f7 !important; color: #b39a5e !important; }
.nwsb-daydash-fashion .nwsb-dashboard-heading .nwsb-dashboard-mark,
.nwsb-essentials-fashion .nwsb-essentials-heading .nwsb-essentials-heading-icon {
  background: #fff !important;
  color: #171326 !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.20) !important;
}
.nwsb-daydash-fashion .nwsb-dashboard-heading-copy .nwsb-dashboard-eyebrow,
.nwsb-essentials-fashion .nwsb-essentials-eyebrow { color: rgba(232,213,163,.78) !important; }
.nwsb-daydash-fashion .nwsb-dashboard-heading-copy h2,
.nwsb-essentials-fashion .nwsb-essentials-heading h2 { color: #fff !important; }
.nwsb-essentials-fashion .nwsb-essentials-heading { margin-top: 0 !important; }
@media (max-width: 420px) {
  .nwsb-dashboard-heading { gap: 11px !important; }
  .nwsb-dashboard-heading .nwsb-dashboard-mark,
  .nwsb-essentials-heading .nwsb-essentials-heading-icon { flex-basis: 46px !important; width: 46px !important; height: 46px !important; }
  .nwsb-dashboard-heading-copy h2,
  .nwsb-essentials-heading h2 { font-size: 22px !important; }
}


/* ══ AUGUST 15 FASHION PANEL — EXPLICIT SOURCE COPY ══
   This block is intentionally scoped to the Fashion Where to Begin panel.
   It restores the August 15 glass wrapper/header treatment after later global
   dashboard compatibility rules, while leaving #home-nm's compact neumorphic
   panel untouched. The six original buttons and guide banner remain in HTML. */
#home .mainops-blk.aug15-fashion-reference {
  box-sizing: border-box !important;
  width: calc(100% - 32px) !important;
  margin: 18px 16px !important;
  padding: 12px !important;
  overflow: hidden !important;
  background: rgba(255,255,255,0.055) !important;
  border: 1px solid rgba(255,255,255,0.13) !important;
  border-radius: 22px !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.25) !important;
  backdrop-filter: blur(18px) saturate(1.25) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.34) !important;
}
#home .mainops-blk.aug15-fashion-reference > .qa-tv-head {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin: 0 !important;
  padding: 0 2px 14px !important;
}
#home .mainops-blk.aug15-fashion-reference .qa-tv-orb {
  width: 54px !important;
  height: 54px !important;
  flex: 0 0 54px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.09) !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  color: #e8d5a3 !important;
  box-shadow: 0 10px 26px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.28) !important;
}
#home .mainops-blk.aug15-fashion-reference .qa-tv-orb svg { width: 26px !important; height: 26px !important; }
#home .mainops-blk.aug15-fashion-reference .qa-tv-hello {
  color: rgba(255,255,255,0.66) !important;
  font: 400 20px/1.2 'DM Sans', sans-serif !important;
  letter-spacing: -0.2px !important;
}
#home .mainops-blk.aug15-fashion-reference .qa-tv-name {
  color: #fff !important;
  font: 800 27px/1.12 'DM Sans', sans-serif !important;
  letter-spacing: -0.6px !important;
}
#home .mainops-blk.aug15-fashion-reference > .mo-box {
  padding: 0 !important;
  margin: 0 0 14px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  background: rgba(255,255,255,0.06) !important;
  overflow: hidden !important;
}
#home .mainops-blk.aug15-fashion-reference .mo-row {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  height: 134px !important;
  margin: 0 0 16px !important;
}
#home .mainops-blk.aug15-fashion-reference .mo-row:last-child { margin-bottom: 0 !important; }
#home .mainops-blk.aug15-fashion-reference .mo-cell {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  min-height: 134px !important;
  height: 134px !important;
  padding: 18px 8px 14px !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  border-radius: 28px !important;
  background: linear-gradient(145deg, rgba(255,255,255,0.13), rgba(255,255,255,0.075)) !important;
  color: #fff !important;
  box-shadow: inset 0 1px rgba(255,255,255,0.08), 0 12px 24px rgba(0,0,0,0.18) !important;
}
#home .mainops-blk.aug15-fashion-reference .mo-ic {
  display: grid !important;
  place-items: center !important;
  width: 48px !important;
  height: 48px !important;
  flex: 0 0 48px !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #fff !important;
}
#home .mainops-blk.aug15-fashion-reference .mo-ic svg { width: 38px !important; height: 38px !important; }
#home .mainops-blk.aug15-fashion-reference .mo-lbl {
  display: block !important;
  max-width: 100% !important;
  margin-top: 12px !important;
  overflow: hidden !important;
  color: #fff !important;
  font: 700 14px/1.18 'DM Sans', sans-serif !important;
  text-align: center !important;
}
#home .mainops-blk.aug15-fashion-reference > .ncb-carousel.nsub-ban {
  min-height: 120px !important;
  height: 120px !important;
  margin: 18px 0 0 !important;
  border: 0 !important;
  border-radius: 28px !important;
  background: #000 !important;
  box-shadow: 0 14px 26px rgba(0,0,0,0.24) !important;
}
#home .mainops-blk.aug15-fashion-reference > .ncb-carousel.nsub-ban .ncb-slide {
  min-height: 120px !important;
  padding: 18px 20px !important;
  border-radius: 28px !important;
}
#home .mainops-blk.aug15-fashion-reference > .ncb-carousel.nsub-ban .ncb-ico { width: 58px !important; height: 58px !important; border-radius: 18px !important; }
#home .mainops-blk.aug15-fashion-reference > .ncb-carousel.nsub-ban .ncb-name { font-size: 18px !important; }
#home .mainops-blk.aug15-fashion-reference > .ncb-carousel.nsub-ban .ncb-sub { font-size: 13px !important; line-height: 1.28 !important; }
#home .mainops-blk.aug15-fashion-reference > .ncb-carousel.nsub-ban .ncb-btn { width: 42px !important; height: 42px !important; border-radius: 50% !important; }

@media (max-width: 420px) {
  #home .mainops-blk.aug15-fashion-reference { margin-left: 16px !important; margin-right: 16px !important; }
  #home .mainops-blk.aug15-fashion-reference .mo-row { gap: 10px !important; }
  #home .mainops-blk.aug15-fashion-reference .mo-cell { border-radius: 22px !important; }
}
/* ══ END AUGUST 15 FASHION PANEL COPY ══ */

/* ══ HELP & COACH — Support + Personal Coach ══ */
.nwsb-assistant-screen{position:fixed;inset:0;z-index:1600;display:flex;align-items:stretch;justify-content:center;visibility:hidden;pointer-events:none;opacity:0;transition:opacity .24s ease,visibility .24s ease;background:rgba(3,7,14,.82)}
.nwsb-assistant-screen.open{visibility:visible;pointer-events:auto;opacity:1}
.nwsb-assistant-overlay{position:absolute;inset:0;background:rgba(2,5,10,.72);backdrop-filter:blur(14px)}
.nwsb-assistant-panel{position:relative;width:min(100%,680px);height:100%;overflow:hidden;background:linear-gradient(180deg,#0b101a 0%,#101725 52%,#080c14 100%);color:#fff;box-shadow:0 0 70px rgba(0,0,0,.48)}
.nwsb-assistant-header{position:absolute;z-index:3;top:0;left:0;right:0;display:flex;align-items:center;gap:12px;padding:calc(14px + env(safe-area-inset-top)) 20px 14px;background:linear-gradient(180deg,rgba(6,10,17,.96),rgba(6,10,17,.78),transparent)}
.nwsb-assistant-back{width:40px;height:40px;border:0;border-radius:50%;background:#fff;color:#0a0f18;font-size:25px;line-height:1;cursor:pointer}
.nwsb-assistant-heading{min-width:0;flex:1}.nwsb-assistant-eyebrow,.nwsb-assistant-kicker,.nwsb-assistant-feature-eyebrow{color:#e8d5a3;font-size:9px;letter-spacing:2.1px;text-transform:uppercase;font-weight:800}.nwsb-assistant-title{margin-top:3px;font-size:21px;font-weight:850;letter-spacing:-.3px}.nwsb-assistant-logo{width:42px;height:42px;border-radius:50%;background:#fff;padding:7px;display:grid;place-items:center}.nwsb-assistant-logo img{display:block;width:100%;height:100%;object-fit:contain}
.nwsb-assistant-inline-logo{display:grid;place-items:center;width:34px;height:34px;padding:6px;border-radius:50%;background:#fff}.nwsb-assistant-inline-logo img{display:block;width:100%;height:100%;object-fit:contain}
.nwsb-assistant-body{height:100%;overflow-y:auto;padding:0 20px calc(34px + env(safe-area-inset-bottom));scroll-behavior:smooth}.nwsb-assistant-hero{position:relative;height:255px;margin:0 -20px;overflow:hidden}.nwsb-assistant-hero img{display:block;width:100%;height:100%;object-fit:cover}.nwsb-assistant-hero-fade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,11,18,.15) 0%,rgba(7,11,18,.1) 35%,#0b101a 100%)}
.nwsb-assistant-intro{position:relative;margin-top:-22px;padding:0 2px 14px}.nwsb-assistant-intro h2{margin:5px 0 7px;font-size:29px;line-height:1.05;letter-spacing:-.7px}.nwsb-assistant-intro p{margin:0;color:rgba(255,255,255,.68);font-size:13px;line-height:1.5;max-width:520px}
.nwsb-assistant-switch{display:flex;gap:7px;padding:5px;margin:4px 0 14px;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:rgba(255,255,255,.045)}.nwsb-assistant-switch button{flex:1;border:0;border-radius:13px;background:transparent;color:rgba(255,255,255,.58);padding:11px 8px;font:inherit;font-size:11px;font-weight:800;cursor:pointer}.nwsb-assistant-switch button.active{background:#fff;color:#0a0f18;box-shadow:0 4px 16px rgba(0,0,0,.2)}
.nwsb-assistant-feature{display:grid;grid-template-columns:116px 1fr;gap:13px;align-items:center;padding:10px;border:1px solid rgba(255,255,255,.13);border-radius:20px;background:rgba(255,255,255,.065);box-shadow:0 12px 25px rgba(0,0,0,.18)}.nwsb-assistant-feature-image{height:88px;overflow:hidden;border-radius:14px}.nwsb-assistant-feature-image img{width:100%;height:100%;object-fit:cover}.nwsb-assistant-feature-title{margin:4px 0;color:#fff;font-size:15px;font-weight:800;line-height:1.2}.nwsb-assistant-feature-copy{color:rgba(255,255,255,.62);font-size:11px;line-height:1.4}
.nwsb-assistant-quick{display:flex;flex-wrap:wrap;gap:8px;padding:15px 0 4px}.nwsb-assistant-quick button{border:1px solid rgba(232,213,163,.35);border-radius:999px;padding:9px 11px;background:rgba(232,213,163,.1);color:#f6e6bd;font-size:10.5px;line-height:1.2;cursor:pointer}.nwsb-assistant-quick button:disabled{opacity:.45;cursor:default}
.nwsb-assistant-chat{min-height:92px;max-height:270px;overflow-y:auto;padding:13px 2px 5px}.nwsb-assistant-message{max-width:87%;margin:0 0 9px;padding:11px 13px;border-radius:16px;font-size:12.5px;line-height:1.45;white-space:normal}.nwsb-assistant-message.assistant{margin-right:auto;background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.9);border-bottom-left-radius:5px}.nwsb-assistant-message.user{margin-left:auto;background:#fff;color:#0a0f18;border-bottom-right-radius:5px}.nwsb-assistant-typing{color:rgba(255,255,255,.5);font-size:11px;padding:4px 8px}
.nwsb-assistant-composer{display:flex;gap:8px;align-items:center;margin-top:5px;padding:7px;border:1px solid rgba(255,255,255,.16);border-radius:18px;background:rgba(0,0,0,.25)}.nwsb-assistant-composer input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:#fff;padding:8px 6px;font:inherit;font-size:12.5px}.nwsb-assistant-composer input::placeholder{color:rgba(255,255,255,.45)}.nwsb-assistant-composer button{width:38px;height:38px;border:0;border-radius:50%;background:#fff;color:#0a0f18;font-size:19px;line-height:1;cursor:pointer}.nwsb-assistant-note{padding:10px 3px 0;color:rgba(255,255,255,.42);font-size:9.5px;line-height:1.4;text-align:center}
@media (min-width:681px){.nwsb-assistant-panel{margin:18px 0;height:calc(100% - 36px);border-radius:28px}.nwsb-assistant-header{border-radius:28px 28px 0 0}.nwsb-assistant-body{border-radius:28px}}
@media (max-width:390px){.nwsb-assistant-body{padding-left:15px;padding-right:15px}.nwsb-assistant-hero{margin-left:-15px;margin-right:-15px}.nwsb-assistant-feature{grid-template-columns:95px 1fr}.nwsb-assistant-feature-image{height:82px}}

/* ── Private video pack prompt ─────────────────────────────────────── */
.nwsb-video-pack-prompt{position:fixed;inset:0;z-index:10080;display:flex;align-items:flex-end;justify-content:center;padding:20px;background:rgba(5,8,14,.68);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.nwsb-video-pack-card{width:min(100%,420px);padding:24px 22px 20px;border:1px solid rgba(255,255,255,.14);border-radius:28px;background:linear-gradient(145deg,rgba(30,38,53,.98),rgba(13,17,27,.98));box-shadow:0 24px 70px rgba(0,0,0,.42);color:#fff}
.nwsb-video-pack-kicker{margin-bottom:8px;color:#e8d5a3;font:700 10px/1.2 'DM Sans',sans-serif;letter-spacing:2.4px}
.nwsb-video-pack-card h2{margin:0 0 9px;font:700 23px/1.15 'DM Sans',sans-serif;letter-spacing:-.4px}
.nwsb-video-pack-copy{margin:0;color:rgba(255,255,255,.72);font:13px/1.5 'DM Sans',sans-serif}
.nwsb-video-pack-progress{height:8px;margin:18px 0 5px;overflow:hidden;border-radius:99px;background:rgba(255,255,255,.1)}
.nwsb-video-pack-progress span{display:block;width:0;height:100%;border-radius:inherit;background:#e8d5a3;transition:width .22s ease-out}
.nwsb-video-pack-actions{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin-top:18px}
.nwsb-video-pack-actions button{min-height:44px;padding:0 15px;border:0;border-radius:14px;font:700 12px/1 'DM Sans',sans-serif;cursor:pointer}
.nwsb-video-pack-later{background:transparent;color:rgba(255,255,255,.72)}
.nwsb-video-pack-start{background:#fff;color:#121722;box-shadow:0 5px 16px rgba(0,0,0,.18)}
.nwsb-video-pack-start:disabled{opacity:.65;cursor:wait}
@media (min-width:520px){.nwsb-video-pack-prompt{align-items:center}.nwsb-video-pack-card{padding:28px 26px 22px}}

/* ══════════════════════════════════════════════════════════════════
   NOWSSB MOTION SYSTEM — AURA-inspired, app-wide
   Keep movement on opacity and transform so transitions stay fast on phones.
   The controller in app/js/part092-motion.js only observes existing state;
   feature navigation remains authoritative.
   ══════════════════════════════════════════════════════════════════ */
:root {
  --nwsb-motion-ease: cubic-bezier(.16, 1, .3, 1);
  --nwsb-motion-ease-soft: cubic-bezier(.22, 1, .36, 1);
  --nwsb-motion-fast: 180ms;
  --nwsb-motion-page: 300ms;
}

html { scroll-behavior: smooth; }
body { overscroll-behavior-y: none; }

/* Top-level screens fade and lift their contents without transforming the
   screen root, which keeps fixed overlays genuinely fixed on Android WebView. */
.screen:not(#splash) {
  opacity: 0;
  transition: opacity var(--nwsb-motion-page) var(--nwsb-motion-ease-soft);
  will-change: opacity;
}
.screen:not(#splash).active { opacity: 1; }
.screen:not(#splash).exit { opacity: 0; }

/* Every app page uses the same AURA-like short slide/fade rather than a
   collection of unrelated modal timings. Visibility/pointer-events remain
   controlled by app.css. */
.sub-screen {
  opacity: 0;
  transform: translate3d(22px, 0, 0);
  transition: opacity 260ms var(--nwsb-motion-ease-soft),
              transform 320ms var(--nwsb-motion-ease);
  will-change: opacity, transform;
}
.sub-screen.open {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Lightweight scroll direction response on the two homes. It is deliberately
   tiny: the list remains native and momentum scrolling remains untouched. */
#home .hero-section,
#home-nm .nmh-toprow {
  transition: transform 220ms var(--nwsb-motion-ease-soft);
  will-change: transform;
}
#home.nwsb-scroll-forward .hero-section,
#home-nm.nwsb-scroll-forward .nmh-toprow { transform: translate3d(0, -3px, 0); }
#home.nwsb-scroll-back .hero-section,
#home-nm.nwsb-scroll-back .nmh-toprow { transform: translate3d(0, 2px, 0); }

button,
a,
[role="button"] {
  -webkit-tap-highlight-color: transparent;
}
button:active,
a:active,
[role="button"]:active {
  transform: scale(.985);
  transition: transform var(--nwsb-motion-fast) var(--nwsb-motion-ease);
}

@keyframes nwsbMotionPageIn {
  from { opacity: 0; transform: translate3d(12px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .screen:not(#splash),
  .sub-screen,
  #home .hero-section,
  #home-nm .nmh-toprow {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}

.nwsb-motion-scroll-host {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}
.nwsb-motion-ready .screen,
.nwsb-motion-ready .sub-screen {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ── Essentials reference finish: local artwork, wide banner, two tiles ── */
.nwsb-essentials-reference .nwsb-essential-featured-card {
  min-height: 210px !important;
  height: 210px !important;
  background-image: linear-gradient(90deg, rgba(255,205,18,.97) 0%, rgba(255,180,18,.79) 50%, rgba(255,121,30,.20) 100%), url('assets/media/image/essentials-featured-ritual-v2.png') !important;
  background-size: cover !important;
  background-position: center !important;
}
.nwsb-essentials-reference .nwsb-essential-list::before { top: 226px !important; }
.nwsb-essentials-reference .nwsb-essential-featured-card::before { top: 24px !important; }
.nwsb-essentials-reference .nwsb-help-heading {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 34px 0 16px !important;
}
.nwsb-essentials-reference .nwsb-help-heading h3 { margin: 0 !important; color: #171821 !important; font-size: 24px !important; letter-spacing: -.7px !important; }
.nwsb-essentials-reference .nwsb-help-heading > button {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #77747b !important;
  font: 700 12px/1 'DM Sans', sans-serif !important;
  cursor: pointer !important;
}
.nwsb-essentials-reference .nwsb-help-rail {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  overflow: visible !important;
}
.nwsb-essentials-reference .nwsb-help-card {
  display: block !important;
  min-width: 0 !important;
  width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  background: #faf9f6 !important;
  box-shadow: 0 8px 18px rgba(61,55,71,.10) !important;
  color: #33323a !important;
  text-align: left !important;
}
.nwsb-essentials-reference .nwsb-help-art {
  display: block !important;
  height: 132px !important;
  overflow: hidden !important;
  background: #f0e9f8 !important;
}
.nwsb-essentials-reference .nwsb-help-art img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; }
.nwsb-essentials-reference .nwsb-help-copy { display: block !important; padding: 14px 13px 16px !important; }
.nwsb-essentials-reference .nwsb-help-copy strong { display: block !important; color: #33323a !important; font-size: 16px !important; font-weight: 800 !important; }
.nwsb-essentials-reference .nwsb-help-copy small { display: block !important; margin-top: 6px !important; color: #77747b !important; font-size: 12px !important; }
.nwsb-essentials-reference.nwsb-essentials-fashion .nwsb-essentials-body { background: transparent !important; }
.nwsb-essentials-reference.nwsb-essentials-fashion .nwsb-help-heading h3 { color: #fff !important; }
.nwsb-essentials-reference.nwsb-essentials-fashion .nwsb-help-heading > button { color: rgba(255,255,255,.72) !important; }
.nwsb-essentials-reference.nwsb-essentials-fashion .nwsb-help-card { background: rgba(15,13,31,.82) !important; }
.nwsb-essentials-reference.nwsb-essentials-fashion .nwsb-help-copy strong { color: #fff !important; }
.nwsb-essentials-reference.nwsb-essentials-fashion .nwsb-help-copy small { color: rgba(255,255,255,.62) !important; }
@media (max-width: 380px) {
  .nwsb-essentials-reference .nwsb-essentials-body { padding-left: 16px !important; padding-right: 16px !important; }
  .nwsb-essentials-reference .nwsb-help-rail { gap: 9px !important; }
  .nwsb-essentials-reference .nwsb-help-art { height: 112px !important; }
}

.nwsb-essentials-reference .nwsb-help-heading > button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: #f4f2ee !important;
  color: #4f4c52 !important;
  font-size: 28px !important;
  line-height: 1 !important;
  box-shadow: 0 6px 14px rgba(61,55,71,.08) !important;
}
.nwsb-essentials-reference.nwsb-essentials-fashion .nwsb-help-heading > button { background: rgba(255,255,255,.14) !important; color: #fff !important; }

/* ── Media preparation card: black NowssB access handoff ─────────────── */
.nwsb-video-pack-prompt {
  align-items: center;
  padding: 18px;
  background: rgba(2, 4, 8, .78);
  backdrop-filter: blur(18px) saturate(.82);
  -webkit-backdrop-filter: blur(18px) saturate(.82);
}
.nwsb-video-pack-card {
  width: min(100%, 420px);
  box-sizing: border-box;
  padding: 22px 21px 18px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 30px;
  background: #05070b;
  box-shadow: 0 28px 90px rgba(0,0,0,.68), inset 0 1px 0 rgba(255,255,255,.06);
  color: #fff;
  animation: nwsbPackCardIn 360ms cubic-bezier(.16,1,.3,1) both;
}
.nwsb-video-pack-brand { display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:48px; }
.nwsb-video-pack-brand-lockup { display:flex; align-items:center; min-width:0; gap:10px; }
.nwsb-video-pack-brand-lockup img { width:42px; height:42px; flex:0 0 42px; object-fit:contain; border-radius:50%; background:#fff; box-shadow:0 5px 18px rgba(255,255,255,.16); }
.nwsb-video-pack-divider { width:1px; height:27px; flex:0 0 1px; background:rgba(255,255,255,.24); }
.nwsb-video-pack-brand-name { display:flex; flex-direction:column; gap:3px; color:#fff; font:800 12px/1 'DM Sans',sans-serif; letter-spacing:2.2px; }
.nwsb-video-pack-brand-name small { color:rgba(255,255,255,.48); font:500 9px/1.1 'DM Sans',sans-serif; letter-spacing:.2px; text-transform:none; }
.nwsb-video-pack-signal { width:84px; height:30px; flex:0 0 84px; color:#fff; opacity:.88; animation:nwsbPackSignal 1.8s ease-in-out infinite; }
.nwsb-video-pack-rule { height:1px; margin:17px 0 16px; background:rgba(255,255,255,.13); }
.nwsb-video-pack-kicker { margin-bottom:8px; color:rgba(255,255,255,.56); font:800 10px/1.2 'DM Sans',sans-serif; letter-spacing:2.2px; }
.nwsb-video-pack-card h2 { margin:0 0 9px; color:#fff; font:800 25px/1.12 'DM Sans',sans-serif; letter-spacing:-.5px; }
.nwsb-video-pack-copy { margin:0; color:rgba(255,255,255,.72); font:13px/1.55 'DM Sans',sans-serif; }
.nwsb-video-pack-progress { height:5px; margin:19px 0 7px; overflow:hidden; border-radius:99px; background:rgba(255,255,255,.12); }
.nwsb-video-pack-progress span { display:block; width:0; height:100%; border-radius:inherit; background:#fff; box-shadow:0 0 14px rgba(255,255,255,.6); transition:width .3s cubic-bezier(.16,1,.3,1); }
.nwsb-video-pack-status { color:rgba(255,255,255,.46); font:11px/1.45 'DM Sans',sans-serif; }
.nwsb-video-pack-actions { display:flex; justify-content:flex-end; align-items:center; gap:9px; margin-top:19px; }
.nwsb-video-pack-actions button { min-height:46px; padding:0 16px; border:0; border-radius:15px; font:800 12px/1 'DM Sans',sans-serif; cursor:pointer; transition:transform .16s cubic-bezier(.16,1,.3,1), background .16s ease, opacity .16s ease; }
.nwsb-video-pack-actions button:active { transform:scale(.97); }
.nwsb-video-pack-later { background:transparent; color:rgba(255,255,255,.66); }
.nwsb-video-pack-later:hover { color:#fff; background:rgba(255,255,255,.08); }
.nwsb-video-pack-start { background:#fff; color:#05070b; box-shadow:0 8px 24px rgba(255,255,255,.16); }
.nwsb-video-pack-start:hover { background:#e9edf2; }
.nwsb-video-pack-start:disabled { opacity:.58; cursor:wait; }
@keyframes nwsbPackCardIn { from { opacity:0; transform:translateY(18px) scale(.97); } to { opacity:1; transform:none; } }
@keyframes nwsbPackSignal { 0%,100% { opacity:.52; transform:scaleX(.96); } 50% { opacity:1; transform:scaleX(1); } }
@media (max-width:430px) { .nwsb-video-pack-card { padding:20px 18px 16px; } .nwsb-video-pack-signal { width:68px; flex-basis:68px; } .nwsb-video-pack-actions button { padding-left:13px; padding-right:13px; } }

/* Header hierarchy correction: logo left, white SVG orb, divider, title. */
.nwsb-video-pack-brand { align-items: flex-start; justify-content: flex-start; gap: 13px; }
.nwsb-video-pack-logo { width: 44px !important; height: 44px !important; flex: 0 0 44px !important; object-fit: contain !important; border-radius: 50% !important; background: #fff !important; box-shadow: 0 5px 18px rgba(255,255,255,.16) !important; }
.nwsb-video-pack-brand-side { display: flex; align-items: center; min-width: 0; gap: 10px; flex: 1; padding-top: 3px; }
.nwsb-video-pack-signal-wrap { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; background: #fff; color: #05070b; box-shadow: 0 6px 18px rgba(255,255,255,.16); }
.nwsb-video-pack-signal { width: 28px !important; height: 22px !important; flex: 0 0 28px !important; color: #05070b !important; animation: nwsbPackSignal 1.8s ease-in-out infinite; }
.nwsb-video-pack-brand-side .nwsb-video-pack-divider { width: 1px; height: 25px; flex: 0 0 1px; background: rgba(255,255,255,.26); }
.nwsb-video-pack-brand-name { min-width: 0; }
@media (max-width:430px) { .nwsb-video-pack-brand-side { gap: 8px; } .nwsb-video-pack-signal-wrap { width: 38px; height: 38px; flex-basis: 38px; } }

/* Per-path Essentials art: every expanded row gets its own local thumbnail. */
.nwsb-essentials-reference .nwsb-essential-row { min-height: 82px !important; padding: 9px 14px 9px 15px !important; gap: 9px !important; }
.nwsb-essentials-reference .nwsb-essential-row-art { display:block !important; order:1 !important; width:54px !important; height:54px !important; flex:0 0 54px !important; overflow:hidden !important; border-radius:14px !important; background:#e9e5de !important; }
.nwsb-essentials-reference .nwsb-essential-row-art img { display:block !important; width:100% !important; height:100% !important; object-fit:cover !important; }
.nwsb-essentials-reference .nwsb-essential-row-icon { order:2 !important; }
.nwsb-essentials-reference .nwsb-essential-row-copy { order:3 !important; min-width:0 !important; }
.nwsb-essentials-reference .nwsb-essential-meta { order:4 !important; font-size:11px !important; }
.nwsb-essentials-reference .nwsb-essential-arrow { order:5 !important; }
@media (max-width:430px) { .nwsb-essentials-reference .nwsb-essential-row-art { width:48px !important; height:48px !important; flex-basis:48px !important; border-radius:13px !important; } .nwsb-essentials-reference .nwsb-essential-row { min-height:76px !important; } }

.nwsb-video-pack-card { border-radius: 30px !important; overflow: hidden !important; }

/* Home reference stability: do not move the hero/header while scrolling or entering. */
#home .hero-section,
#home-nm .nmh-toprow,
#home.nwsb-scroll-forward .hero-section,
#home.nwsb-scroll-back .hero-section,
#home-nm.nwsb-scroll-forward .nmh-toprow,
#home-nm.nwsb-scroll-back .nmh-toprow {
  transform: none !important;
  transition: none !important;
  animation: none !important;
  will-change: auto !important;
}
#home > *, #home-nm > * { animation: none !important; }