/* DV2 · dude.com + holydude.com V2 visual layer (2026-10-14, dude-redesign agent)
   Loaded ONLY when the DUDE_V2 flag is on (see index.php hook). Built on /css/net-ds.css tokens (data-brand + data-ds-theme on <html>).
   Rules hang on html.dv2 so the flag-off site is untouched. Many legacy rules are inline or !important, hence the !important here. */

/* ---------- 0. map the legacy variables onto the network tokens ---------- */
html.dv2, html.dv2 body, html.dv2 #app {
  --t1: var(--ds-ink); --t2: var(--ds-ink-2); --t3: var(--ds-ink-3); --t4: var(--ds-ink-3);
  --fn-ink: var(--ds-ink); --fn-ink2: var(--ds-ink-2); --fn-ink3: var(--ds-ink-3);
  --sk-ink: var(--ds-ink); --sk-ink2: var(--ds-ink-2); --sk-ink3: var(--ds-ink-3); --sk-ink4: var(--ds-ink-3);
  --dn4-ink: var(--ds-ink); --dn4-ink3: var(--ds-ink-3); --wh1-ink: var(--ds-ink); --wh1-ink2: var(--ds-ink-2); --wh1-ink3: var(--ds-ink-3);
  --b3-ink: var(--ds-ink); --ink: var(--ds-ink); --ink2: var(--ds-ink-2); --ink3: var(--ds-ink-3);
  --ac: var(--ds-accent-ink); --sk-pri: var(--ds-accent-fill); --dn4-acc: var(--ds-accent-fill); --fn-acc: var(--ds-accent-ink); --sk-acc: var(--ds-accent-ink);
  --wh1-blue: var(--ds-accent-fill); --acg: var(--ds-accent-soft); --dn4-accink: var(--ds-on-accent); --fn-pri-ink: var(--ds-on-accent);
  --s1: var(--ds-surface); --sk-card: var(--ds-surface);
  --sk-font: var(--ds-font-sans); --dn4-font: var(--ds-font-sans); --wh1-font: var(--ds-font-sans); --fn-font: var(--ds-font-sans);
  --sk-serif: var(--ds-font-display);
  --sk-e1: var(--ds-shadow-1); --fn-shadow: var(--ds-shadow-2); --dn4-shadow: var(--ds-shadow-2);
  --sk-focus: var(--ds-focus); --er: var(--ds-danger); --ok: var(--ds-ok);
  /* legacy surfaces, lines, bars and inks (QA r1: hard-coded light cards in dark) */
  --bg: var(--ds-bg); --fn-bg: var(--ds-bg); --sk-bg: var(--ds-bg); --dn4-bg: var(--ds-bg); --b3-bg: var(--ds-bg);
  --card-bg: var(--ds-surface); --fn-raise: var(--ds-surface); --mk-glass2: var(--ds-surface); --mk-bub: var(--ds-surface);
  --s2: var(--ds-surface-2); --fn-raise2: var(--ds-surface-2); --sk-sunk: var(--ds-surface-2); --wh1-soft: var(--ds-surface-2); --dn4-soft: var(--ds-surface-2); --b3-soft: var(--ds-surface-2);
  --s3: var(--ds-surface-3); --s4: var(--ds-surface-3);
  --b1: var(--ds-line-2); --sk-line: var(--ds-line-2); --dn4-line: var(--ds-line-2); --b3-line: var(--ds-line-2);
  --fn-bar: var(--ds-glass); --sk-bar: var(--ds-glass); --mk-bar: var(--ds-glass); --mk-glass: var(--ds-glass);
  --dn4-ink2: var(--ds-ink-2); --mk-ink: var(--ds-ink); --fn-pri2: var(--ds-accent-fill); --sk-pri-h: var(--ds-accent-fill);
}
html.dv2 { background: var(--ds-bg) !important; }
html.dv2 body { background: var(--ds-bg) !important; color: var(--ds-ink); font-family: var(--ds-font-sans) !important; -webkit-font-smoothing: antialiased; }
html.dv2 #app, html.dv2 #app :is(div, p, span, button, input, textarea, select, label, a, li, td, th, small, b, strong, h3, h4, h5, h6) { font-family: var(--ds-font-sans) !important; }
html.dv2 #app#app#app#app :is(h1, h2), html.dv2 #app#app#app#app .pnl :is(h1, h2), html.dv2 #app#app#app#app #dn3HomeH { font-family: var(--ds-font-display) !important; font-weight: 600 !important; letter-spacing: var(--ds-track-display); color: var(--ds-ink) !important; }
html.dv2 .amb { display: none !important; }

/* ---------- 1. app shell + header ---------- */
html.dv2 #app#app#app, html.dv2 #appWrap#appWrap#appWrap, html.dv2 #app#app#app .main, html.dv2 #app#app#app .pnl:not(#p-games) { background: var(--ds-bg) !important; color: var(--ds-ink); }
html.dv2 #app#app#app > .top { background: var(--ds-glass) !important; -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); border-bottom: 1px solid var(--ds-line) !important; box-shadow: none !important; }
html.dv2 #app > .top button:not(.on):not([aria-pressed="true"]):not(.ds-navlink), html.dv2 #app > .top a.m1-off { background: transparent !important; border: 1px solid var(--ds-line-2) !important; color: var(--ds-ink-2) !important; border-radius: 999px !important; }
html.dv2 #app > .top button:not(.ds-navlink):hover { border-color: var(--ds-accent) !important; color: var(--ds-ink) !important; }
html.dv2 #dn4ViewT, html.dv2 .m1-pill { background: var(--ds-surface-2) !important; border: 1px solid var(--ds-line) !important; border-radius: 999px !important; }
html.dv2 #dn4ViewT button, html.dv2 .m1-pill a { border: 0 !important; background: transparent !important; color: var(--ds-ink-2) !important; font-weight: 650 !important; }
html.dv2 #dn4ViewT button.on, html.dv2 #dn4ViewT button[aria-pressed="true"], html.dv2 .m1-pill a.m1-on, html.dv2 .m1-pill a[aria-current] { background: var(--ds-surface) !important; color: var(--ds-ink) !important; box-shadow: var(--ds-shadow-1) !important; }
html.dv2 #fn1Plan { color: var(--ds-accent-ink) !important; }
/* logo: the existing brand SVGs, light + dark variants (blue Holy Dude icon kept, T-174) */
html.dv2 #app#app#app#app > .top .t-logo { font-size: 0 !important; color: transparent !important; background-repeat: no-repeat !important; background-position: left center !important; background-size: auto 30px !important; height: 32px !important; }
html.dv2 #app#app#app#app > .top .t-logo > * { display: none !important; }
html.dv2[data-brand="holydude"] #app#app#app#app > .top .t-logo { background-image: url(/b1/logo-hd-halo.svg) !important; width: 138px !important; }
html.dv2[data-brand="holydude"][data-ds-theme="dark"] #app#app#app#app > .top .t-logo { background-image: url(/b1/logo-hd-halo-dark.svg) !important; }
html.dv2[data-brand="dude"] #app#app#app#app > .top .t-logo { background-image: url(/m3/logo-d.svg) !important; width: 132px !important; background-size: contain !important; }
html.dv2[data-brand="dude"][data-ds-theme="dark"] #app#app#app#app > .top .t-logo { background-image: url(/m3/logo-d-dark.svg) !important; }
@media (max-width: 639px) { html.dv2[data-brand] #app#app#app#app > .top .t-logo { width: 32px !important; } }
/* desktop header nav (built by dv2.js from #bottomNav, same buttons, same handlers) */
#dv2Nav { display: none; }
@media (min-width: 1024px) {
  html.dv2 #dv2Nav { display: flex; align-items: center; gap: 4px; margin: 0 auto; }
  html.dv2.dv2-desk #bottomNav { display: none !important; }
  html.dv2.dv2-desk { --cb1-nav: 0px !important; --dc32-nav: 0px !important; --vf1-sp: 12px !important; }
}
#dv2Nav .ds-navlink { font-family: var(--ds-font-sans) !important; border: 0 !important; height: 40px; padding: 0 10px; gap: 6px; font-size: 13.5px; }
@media (max-width: 1439px) { html.dv2 #fn1Plan { font-size: 0 !important; width: 40px; padding: 0 !important; justify-content: center; } html.dv2 #fn1Plan svg { margin: 0 !important; } }
#dv2Nav .ds-navlink[aria-current="page"] { color: var(--ds-accent-ink) !important; }
@media (min-width: 1024px) and (max-width: 1279px) { #dv2Nav .ds-navlink span { display: none; } }
#dv2Nav .ds-navlink img { width: 22px; height: 22px; }

/* phone tab bar = the existing #bottomNav, re-skinned */
html.dv2 #bottomNav#bottomNav#bottomNav { background: var(--ds-glass) !important; -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); border-top: 1px solid var(--ds-line) !important; box-shadow: none !important; }
html.dv2 #bottomNav#bottomNav#bottomNav .fn1-nb { color: var(--ds-ink-3) !important; background: transparent !important; font-weight: 650 !important; }
html.dv2 #bottomNav .fn1-nb span { color: inherit !important; font-size: 11px !important; letter-spacing: .02em; }
html.dv2 #bottomNav#bottomNav#bottomNav .fn1-nb.on, html.dv2 #bottomNav#bottomNav#bottomNav .fn1-nb[aria-current="page"] { color: var(--ds-accent-ink) !important; }
html.dv2 #bottomNav .fn1-nb::before, html.dv2 #bottomNav .fn1-nb.on::before { background: transparent !important; }
html.dv2 #bottomNav .fn1-nb.on svg, html.dv2 #bottomNav .fn1-nb.on i { background: var(--ds-accent-soft) !important; border-radius: 999px; }
html.dv2 #bottomNav .fn1-nb svg { padding: 3px 14px; box-sizing: content-box; }

/* ---------- 2. chat bar (composer dock) ---------- */
html.dv2 #vf1Bar#vf1Bar#vf1Bar { background: var(--ds-surface) !important; border: 1px solid var(--ds-line-2) !important; border-radius: 22px !important; box-shadow: var(--ds-shadow-3) !important; }
html.dv2 #vf1Bar:focus-within { border-color: color-mix(in srgb, var(--ds-accent) 65%, transparent) !important; box-shadow: var(--ds-shadow-3), var(--ds-focus) !important; }
html.dv2 #vf1In#vf1In#vf1In { background: transparent !important; border: 0 !important; color: var(--ds-ink) !important; font-size: 16px !important; }
html.dv2 #vf1In::placeholder { color: var(--ds-ink-3) !important; }
html.dv2 #vf1Bar .vf1-b { color: var(--ds-ink-2) !important; background: transparent !important; border-radius: 999px !important; }
html.dv2 #vf1Bar .vf1-b:hover { background: var(--ds-accent-soft) !important; color: var(--ds-ink) !important; }
html.dv2 #vf1Bar .vf1-send { background: var(--ds-accent) !important; color: var(--ds-on-accent) !important; }
html.dv2 #vf1Bar .vf1-send:hover { background: var(--ds-accent-2) !important; }
html.dv2 [class*="vf1-wrap"], html.dv2 #vf1Dock { background: transparent !important; border: 0 !important; box-shadow: none !important; }
/* while the home hero composer is on screen, the dock steps aside (it is the same chat) */
html.dv2.dv2-hero-vis #vf1Bar { opacity: 0 !important; pointer-events: none !important; transform: translateY(16px); transition: opacity .2s, transform .2s; }
html.dv2 #vf1Bar#vf1Bar#vf1Bar { transition: opacity .2s, transform .2s; }

/* ---------- 3. controls everywhere (all 94 panels, sheets and modals) ---------- */
html.dv2 :is(#app, .mod-bg, #loginModal, #upgradeModal, #priceMod, #nMod, #fn1More, [id$="Modal"], [id$="Sheet"]) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not(#vf1In), textarea:not(.dv2-q), select):not(#p-games *):not([id*="game" i] *):not([class*="game" i] *) {
  background: var(--ds-surface) !important; color: var(--ds-ink) !important; border: 1px solid var(--ds-line-2) !important; border-radius: var(--ds-r-md) !important; font-size: max(16px, 1em); }
html.dv2 :is(#app, .mod-bg, [id$="Modal"], [id$="Sheet"], #fn1More) :is(input, textarea, select):focus { outline: none !important; border-color: var(--ds-accent) !important; box-shadow: var(--ds-focus) !important; }
html.dv2 :is(#app, .mod-bg, [id$="Modal"], [id$="Sheet"]) :is(input, textarea)::placeholder { color: var(--ds-ink-3) !important; }
html.dv2 #vf1In, html.dv2 .dv2-q { border: 0 !important; background: transparent !important; box-shadow: none !important; }
/* buttons: primary = accent pill; the rest = quiet outline pills */
html.dv2 .pnl:not(#p-games) :is(.btn-p, .bp, .b-pri, .pn-main, .fn1-pill, button.primary, .t1-chip.pn-main):not([style*="background"]),
html.dv2 :is(#loginModal, #upgradeModal, #priceMod, .mod-bg) :is(.btn-p, .bp, button[type=submit], .auth-btn, .primary) {
  background: var(--ds-accent-fill) !important; color: #fff !important; border: 0 !important; border-radius: 999px !important; font-weight: 700 !important; box-shadow: none !important; }
html.dv2 .pnl:not(#p-games) :is(.t1-chip:not(.pn-main), .hdh1-chip, .chip, .dn4-cmore, .dn3-mini, .i13-row button, .fn1-pill:not(:first-child)) {
  background: var(--ds-surface) !important; color: var(--ds-ink-2) !important; border: 1px solid var(--ds-line-2) !important; border-radius: 999px !important; box-shadow: none !important; }
html.dv2 .pnl:not(#p-games) :is(.t1-chip, .hdh1-chip, .chip):hover { border-color: var(--ds-accent) !important; color: var(--ds-ink) !important; background: var(--ds-accent-soft) !important; }
/* cards / tiles */
html.dv2 .pnl:not(#p-games) :is(.card, .crd, .c, .fn1-week, .i13-ch, #dfxPN, .mkt1-home, #dn4Today, .hl14-card) { border-radius: var(--ds-r-lg) !important; }
html.dv2 .pnl:not(#p-games) :is(.card, .crd, .fn1-week, .i13-ch, #dfxPN, .mkt1-home, #dn4Today):not([style*="background"]) { background-color: var(--ds-surface) !important; border: 1px solid var(--ds-line) !important; box-shadow: var(--ds-shadow-1) !important; }
html.dv2 .pnl:not(#p-games) .dn3-tile, html.dv2 .pnl:not(#p-games) .hdh1-tab { background: var(--ds-surface) !important; border: 1px solid var(--ds-line) !important; border-radius: var(--ds-r-lg) !important; box-shadow: var(--ds-shadow-1) !important; color: var(--ds-ink) !important; transition: transform var(--ds-dur-3) var(--ds-ease-out), border-color var(--ds-dur-2), box-shadow var(--ds-dur-3); }
html.dv2 .pnl:not(#p-games) .dn3-tile:hover, html.dv2 .pnl:not(#p-games) .hdh1-tab:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--ds-accent) 50%, transparent) !important; box-shadow: var(--ds-shadow-2) !important; }
html.dv2 .pnl:not(#p-games) .hdh1-tab[aria-selected="true"], html.dv2 .pnl:not(#p-games) .hdh1-tab.on { background: var(--ds-accent-soft) !important; border-color: color-mix(in srgb, var(--ds-accent) 50%, transparent) !important; color: var(--ds-accent-ink) !important; }
html.dv2 .i13-k, html.dv2 .fn1-gh, html.dv2 .dn3-qh { color: var(--ds-accent-ink) !important; letter-spacing: var(--ds-track-eyebrow) !important; text-transform: uppercase; font-size: 11px !important; font-weight: 750 !important; }
html.dv2 .fn1-wk > i, html.dv2 .dn4-ih { background: var(--ds-accent-soft) !important; color: var(--ds-accent-ink) !important; border-radius: var(--ds-r-md) !important; }
/* new 3D icons swapped in by dv2.js */
img.dv2-ic { width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .12)); }
html.dv2 .dv2-ich { display: inline-grid !important; place-items: center; background: var(--dv2-ic) center / 86% no-repeat, var(--ds-accent-soft) !important; border-radius: 12px !important; width: 40px !important; height: 40px !important; padding: 3px; box-sizing: border-box; flex: 0 0 auto; }
html.dv2 .dv2-ich > * { display: none !important; }
html.dv2 #fn1More#fn1More#fn1More#fn1More i.dv2-ich, html.dv2 #app#app#app#app i.dv2-ich { background-image: var(--dv2-ic) !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 86% !important; background-color: var(--ds-accent-soft) !important; }
html.dv2 .dv2-hico { width: 1.15em; height: 1.15em; vertical-align: -0.18em; margin-right: .35em; display: inline-block; }

/* panel headers: the old emoji headings become calm display titles */
html.dv2 .pnl > h2:first-child, html.dv2 .pnl .ph, html.dv2 .pnl > div:first-child > h2 { font-size: clamp(1.4rem, 3vw, 1.9rem) !important; line-height: 1.15 !important; }

/* ---------- 4. More sheet ("More" hub) ---------- */
html.dv2 #fn1More#fn1More#fn1More { background: var(--ds-bg) !important; color: var(--ds-ink) !important; }
html.dv2 #fn1More > * { background-color: transparent; }
html.dv2 #fn1More#fn1More#fn1More .fn1-tile { background: var(--ds-surface) !important; border: 1px solid var(--ds-line) !important; border-radius: var(--ds-r-lg) !important; box-shadow: var(--ds-shadow-1) !important; color: var(--ds-ink) !important; transition: transform var(--ds-dur-3) var(--ds-ease-out), border-color var(--ds-dur-2); }
html.dv2 #fn1More .fn1-tile:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--ds-accent) 50%, transparent) !important; }
html.dv2 #fn1More .fn1-tile > i { background: var(--ds-accent-soft) !important; color: var(--ds-accent-ink) !important; border-radius: 12px !important; }
html.dv2 #fn1More summary { color: var(--ds-ink) !important; font-weight: 700 !important; }
html.dv2 #fn1More h2, html.dv2 #fn1More h3 { font-family: var(--ds-font-display) !important; color: var(--ds-ink) !important; }

/* ---------- 5. sheets, modals, sign-in ---------- */
html.dv2 :is(.mod-bg, #loginModal, #phoneLoginModal, #upgradeModal, #termsModal, #privacyModal, #crewPickerModal) { background: var(--ds-scrim) !important; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
html.dv2 :is(.mod-bg, #loginModal, #phoneLoginModal, #upgradeModal, #termsModal, #privacyModal, #crewPickerModal) > div { background: var(--ds-surface) !important; color: var(--ds-ink) !important; border: 1px solid var(--ds-line) !important; border-radius: var(--ds-r-xl) !important; box-shadow: var(--ds-shadow-3) !important; }

/* ---------- 6. chat messages ---------- */
html.dv2 #p-chat :is(.msg.u, .msg.user, .m-u, .um, [class*="user-msg"]) { background: var(--ds-surface-3) !important; color: var(--ds-ink) !important; border-radius: 18px 18px 4px 18px !important; border: 0 !important; }
html.dv2 #p-chat :is(.msg.a, .msg.ai, .m-a, .am, [class*="ai-msg"], [class*="bot-msg"]) { background: var(--ds-surface) !important; color: var(--ds-ink) !important; border: 1px solid var(--ds-line) !important; border-radius: 18px 18px 18px 4px !important; }

/* ---------- 7. the V2 home (built by dv2.js) ---------- */
html.dv2 #fn1Home > #dv2Home, html.dv2 #p-dash > #dv2Home { display: block !important; order: -999 !important; flex: 0 0 auto !important; width: 100%; }
:is(#dv2Home,#dv2Guest) { position: relative; color: var(--ds-ink); font-family: var(--ds-font-sans); padding-bottom: 8px; }
:is(#dv2Home,#dv2Guest) * { box-sizing: border-box; }
:is(#dv2Home,#dv2Guest) .dv2-hero { position: relative; overflow: hidden; padding: 28px 0 24px; }
:is(#dv2Home,#dv2Guest) .dv2-hero::before { content: ""; position: absolute; inset: 0; background: var(--ds-hero-glow); pointer-events: none; }
:is(#dv2Home,#dv2Guest) .dv2-hero-grid { position: relative; display: grid; gap: 20px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { :is(#dv2Home,#dv2Guest) .dv2-hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 32px; } :is(#dv2Home,#dv2Guest) .dv2-hero { padding: 44px 0 36px; } }
:is(#dv2Home,#dv2Guest) .dv2-art { position: relative; border-radius: 28px; overflow: hidden; aspect-ratio: 3 / 2; background: var(--ds-surface-2); box-shadow: var(--ds-shadow-2); }
:is(#dv2Home,#dv2Guest) .dv2-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 899px) { :is(#dv2Home,#dv2Guest) .dv2-art { order: -1; aspect-ratio: 16 / 9; border-radius: 22px; max-height: 210px; } }
:is(#dv2Home,#dv2Guest) .ds-h1 { margin: 10px 0 10px; }
:is(#dv2Home,#dv2Guest) .ds-lede { margin: 0 0 18px; max-width: 34rem; }
:is(#dv2Home,#dv2Guest) .ds-composer { margin-bottom: 14px; }
:is(#dv2Home,#dv2Guest):is(#dv2Home,#dv2Guest):is(#dv2Home,#dv2Guest):is(#dv2Home,#dv2Guest) .ds-chip { background: var(--ds-surface) !important; color: var(--ds-ink-2) !important; border: 1px solid var(--ds-line-2) !important; flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; max-width: none !important; }
:is(#dv2Home,#dv2Guest):is(#dv2Home,#dv2Guest):is(#dv2Home,#dv2Guest):is(#dv2Home,#dv2Guest) .ds-composer textarea { background: transparent !important; border: 0 !important; box-shadow: none !important; color: var(--ds-ink) !important; }
:is(#dv2Home,#dv2Guest):is(#dv2Home,#dv2Guest):is(#dv2Home,#dv2Guest):is(#dv2Home,#dv2Guest) .ds-composer { background: var(--ds-surface) !important; }
:is(#dv2Home,#dv2Guest):is(#dv2Home,#dv2Guest):is(#dv2Home,#dv2Guest):is(#dv2Home,#dv2Guest) .ds-chip:hover, :is(#dv2Home,#dv2Guest):is(#dv2Home,#dv2Guest):is(#dv2Home,#dv2Guest):is(#dv2Home,#dv2Guest) .ds-chip[aria-pressed="true"] { color: var(--ds-ink) !important; border-color: var(--ds-accent) !important; background: var(--ds-accent-soft) !important; }
:is(#dv2Home,#dv2Guest):is(#dv2Home,#dv2Guest):is(#dv2Home,#dv2Guest):is(#dv2Home,#dv2Guest) .ds-card { background: var(--ds-surface) !important; color: var(--ds-ink) !important; border: 1px solid var(--ds-line) !important; }
:is(#dv2Home,#dv2Guest):is(#dv2Home,#dv2Guest):is(#dv2Home,#dv2Guest):is(#dv2Home,#dv2Guest) .ds-card-title { color: var(--ds-ink) !important; } :is(#dv2Home,#dv2Guest):is(#dv2Home,#dv2Guest):is(#dv2Home,#dv2Guest):is(#dv2Home,#dv2Guest) .ds-card-blurb { color: var(--ds-ink-3) !important; }
:is(#dv2Home,#dv2Guest):is(#dv2Home,#dv2Guest):is(#dv2Home,#dv2Guest):is(#dv2Home,#dv2Guest) .ds-send { background: var(--ds-accent) !important; color: var(--ds-on-accent) !important; } :is(#dv2Home,#dv2Guest):is(#dv2Home,#dv2Guest):is(#dv2Home,#dv2Guest):is(#dv2Home,#dv2Guest) .ds-iconbtn { background: transparent !important; color: var(--ds-ink-2) !important; border: 1px solid var(--ds-line-2) !important; }
:is(#dv2Home,#dv2Guest) .dv2-trust { display: flex; gap: 6px; align-items: flex-start; font-size: .78rem; color: var(--ds-ink-3); margin-top: 12px; }
:is(#dv2Home,#dv2Guest) .dv2-trust a, :is(#dv2Home,#dv2Guest) .dv2-trust button { color: var(--ds-accent-ink); text-decoration: underline; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
:is(#dv2Home,#dv2Guest) .dv2-sec { padding: 28px 0 4px; }
:is(#dv2Home,#dv2Guest) .dv2-sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
:is(#dv2Home,#dv2Guest) .dv2-sec-h .ds-btn { min-height: 36px; padding: 0 14px; font-size: .82rem; }
:is(#dv2Home,#dv2Guest) .dv2-can { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) { :is(#dv2Home,#dv2Guest) .dv2-can { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
:is(#dv2Home,#dv2Guest) .dv2-can .ds-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; min-height: 100%; }
:is(#dv2Home,#dv2Guest) .dv2-can .ds-icon-tile { width: 56px; height: 56px; padding: 4px; }
:is(#dv2Home,#dv2Guest) .dv2-hub { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 900px) { :is(#dv2Home,#dv2Guest) .dv2-hub { grid-template-columns: 1fr 1fr; } }
:is(#dv2Home,#dv2Guest) .dv2-hubcard { padding: 20px; display: grid; gap: 12px; }
:is(#dv2Home,#dv2Guest) .dv2-hubrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
:is(#dv2Home,#dv2Guest):is(#dv2Home,#dv2Guest):is(#dv2Home,#dv2Guest):is(#dv2Home,#dv2Guest) .dv2-hubrow button { display: grid; justify-items: center; gap: 6px; padding: 12px 6px; border-radius: var(--ds-r-md); border: 1px solid var(--ds-line); background: var(--ds-surface-2); color: var(--ds-ink); font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; transition: border-color var(--ds-dur-2), transform var(--ds-dur-3) var(--ds-ease-out); }
:is(#dv2Home,#dv2Guest):is(#dv2Home,#dv2Guest):is(#dv2Home,#dv2Guest):is(#dv2Home,#dv2Guest) .dv2-hubrow button:hover { border-color: var(--ds-accent); transform: translateY(-2px); }
:is(#dv2Home,#dv2Guest):is(#dv2Home,#dv2Guest):is(#dv2Home,#dv2Guest):is(#dv2Home,#dv2Guest) .dv2-hubrow img { width: 44px !important; height: 44px !important; max-width: none !important; }
:is(#dv2Home,#dv2Guest) .dv2-yours { margin-top: 26px; }
html.dv2 #dn3Home { margin-top: 4px; }
html.dv2 .dv2-old-head { display: none !important; }
/* desktop: center the content column like bro v2 */
@media (min-width: 1024px) { html.dv2 #fn1Home { max-width: 72rem; margin: 0 auto; } html.dv2 #dn3Home, html.dv2 #fn1Week, html.dv2 #fn1Home > .mkt1-home, html.dv2 #p-dash > #dn4Today { max-width: 46rem; margin-left: auto !important; margin-right: auto !important; } }

/* ---------- 8. dark: generic surface adapter (dv2.js tags legacy light surfaces with .dv2-sf / .dv2-tx) ---------- */
html.dv2[data-ds-theme="dark"] .dv2-sf { background-color: var(--ds-surface) !important; border-color: var(--ds-line) !important; }
html.dv2[data-ds-theme="dark"] .dv2-sf2 { background-color: var(--ds-surface-2) !important; border-color: var(--ds-line) !important; }
html.dv2[data-ds-theme="dark"] .dv2-tx { color: var(--ds-ink) !important; }
html.dv2[data-ds-theme="dark"] .dv2-tx2 { color: var(--ds-ink-2) !important; }
html.dv2[data-ds-theme="dark"] .t-logo img, html.dv2[data-ds-theme="dark"] img.dv2-keep { filter: none; }

/* ---------- 9. toasts + misc ---------- */
html.dv2 #tokRadio .trPill { background: var(--ds-glass) !important; color: var(--ds-ink) !important; border: 1px solid var(--ds-line-2) !important; box-shadow: var(--ds-shadow-2) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
html.dv2 #tokRadio .trPill * { color: var(--ds-ink) !important; }
/* mail / send-a-card button: glass icon button; inside the header on desktop (dv2.js), floating on phones */
html.dv2 #s13Btn#s13Btn { background: var(--ds-glass) !important; color: var(--ds-ink-2) !important; border: 1px solid var(--ds-line-2) !important; box-shadow: var(--ds-shadow-1) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
html.dv2 #s13Btn#s13Btn svg { color: var(--ds-ink-2) !important; stroke: currentColor; }
html.dv2 #s13Btn#s13Btn.dv2-inhdr { position: static !important; inset: auto !important; transform: none !important; width: 40px !important; height: 40px !important; margin: 0 !important; border-radius: 999px !important; display: inline-flex !important; align-items: center; justify-content: center; }
html.dv2 ::selection { background: var(--ds-accent-soft); }
html.dv2 :focus-visible { outline: 2px solid var(--ds-accent) !important; outline-offset: 2px; }
html.dv2 #nlSignup { background: var(--ds-surface) !important; color: var(--ds-ink) !important; border-top: 1px solid var(--ds-line); }

/* GAMES ARE OUT OF SCOPE (Todd 10-15: game designs are handled elsewhere). dv2 never restyles #p-games, the arcade or any game board. */

/* ---------- 10. signed-out home (#b1 landing): same look as the member app ---------- */
html.dv2 #b1#b1#b1 { background: var(--ds-bg) !important; color: var(--ds-ink) !important; font-family: var(--ds-font-sans) !important; }
html.dv2 #b1#b1#b1 :is(div, p, span, button, input, textarea, a, b, small, label, h2, h3) { font-family: var(--ds-font-sans) !important; }
html.dv2 #b1#b1#b1 .b1-aur { display: none !important; }
html.dv2 #b1#b1#b1 .b1-hero { background: transparent !important; }
html.dv2 #b1#b1#b1 #b1Top, html.dv2 #b1#b1#b1 #dn5Menu { background: var(--ds-glass) !important; -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); border-color: var(--ds-line) !important; box-shadow: none !important; }
html.dv2 #b1#b1#b1 .b1-btn.pri, html.dv2 #b1#b1#b1 #wel2Tour, html.dv2 #b1#b1#b1 #try1Btn, html.dv2 #b1#b1#b1 #b1Mic { background: var(--ds-accent) !important; color: var(--ds-on-accent) !important; border: 0 !important; box-shadow: none !important; }
html.dv2 #b1#b1#b1 #b1Mic svg { color: var(--ds-on-accent) !important; }
html.dv2 #b1#b1#b1 .b1-btn.ghost { color: var(--ds-ink) !important; background: transparent !important; }
html.dv2 #b1#b1#b1 :is(#dn5Menu button, #wel2Skip, .hdh1-chip, .b1-chip, #b1Hear, .wel2-what) { background: var(--ds-surface) !important; color: var(--ds-ink-2) !important; border: 1px solid var(--ds-line-2) !important; border-radius: 999px !important; box-shadow: none !important; font-weight: 600 !important; }
html.dv2 #b1#b1#b1 :is(#dn5Menu button, #wel2Skip, .hdh1-chip, .b1-chip, #b1Hear):hover { border-color: var(--ds-accent) !important; color: var(--ds-ink) !important; background: var(--ds-accent-soft) !important; }
html.dv2 #b1#b1#b1 .wel2-what { border: 0 !important; background: transparent !important; color: var(--ds-accent-ink) !important; text-decoration: underline; }
html.dv2 #b1#b1#b1 :is(#wel2Card, #wel1, #b1Say) { background: var(--ds-surface) !important; color: var(--ds-ink) !important; border: 1px solid var(--ds-line) !important; border-radius: var(--ds-r-lg) !important; box-shadow: var(--ds-shadow-1) !important; }
html.dv2 #b1#b1#b1 #wel2Card h2 { font-family: var(--ds-font-display) !important; font-weight: 600 !important; font-size: 1.35rem !important; color: var(--ds-ink) !important; }
html.dv2 #b1#b1#b1 #b1H1 { font-family: var(--ds-font-display) !important; font-weight: 600 !important; letter-spacing: var(--ds-track-display) !important; font-size: clamp(2.1rem, 5.6vw, 3.6rem) !important; line-height: 1.06 !important; color: var(--ds-ink) !important; text-wrap: balance; }
html.dv2 #b1#b1#b1 #hdh1Eb { color: var(--ds-accent-ink) !important; letter-spacing: var(--ds-track-eyebrow) !important; text-transform: uppercase; font-size: 11px !important; font-weight: 750 !important; }
html.dv2 #b1#b1#b1 #hdh1Eb em { font-style: normal !important; color: inherit !important; }
html.dv2 #b1#b1#b1 :is(.b1-lead, .hdh1-under, .hdh1-sup, .try1-note, .ail1-note, .b1-modehint) { color: var(--ds-ink-2) !important; }
html.dv2 #b1#b1#b1 .b1-tags span { background: var(--ds-surface-2) !important; color: var(--ds-ink-2) !important; border: 1px solid var(--ds-line) !important; }
html.dv2 #b1#b1#b1 #b1Bar { background: transparent !important; border: 0 !important; box-shadow: none !important; }
html.dv2 #b1#b1#b1 #b1Form { background: var(--ds-surface) !important; border: 1px solid var(--ds-line-2) !important; border-radius: 22px !important; box-shadow: var(--ds-shadow-3) !important; }
html.dv2 #b1#b1#b1 #b1Form:focus-within { border-color: color-mix(in srgb, var(--ds-accent) 65%, transparent) !important; box-shadow: var(--ds-shadow-3), var(--ds-focus) !important; }
html.dv2 #b1#b1#b1 #b1In { background: transparent !important; border: 0 !important; color: var(--ds-ink) !important; font-size: 16px !important; }
html.dv2 #b1#b1#b1 #b1In::placeholder { color: var(--ds-ink-3) !important; }
html.dv2 #b1#b1#b1 .hdh1-tab { background: var(--ds-surface) !important; border: 1px solid var(--ds-line) !important; border-radius: var(--ds-r-lg) !important; color: var(--ds-ink) !important; box-shadow: var(--ds-shadow-1) !important; }
html.dv2 #b1#b1#b1 .hdh1-tab:is(.on, [aria-selected="true"]) { background: var(--ds-accent-soft) !important; color: var(--ds-accent-ink) !important; border-color: color-mix(in srgb, var(--ds-accent) 50%, transparent) !important; }
html.dv2 #b1#b1#b1 .b1-mode { background: var(--ds-surface-2) !important; border: 1px solid var(--ds-line) !important; border-radius: 999px !important; }
html.dv2 #b1#b1#b1 .b1-mode button { color: var(--ds-ink-2) !important; background: transparent !important; border-radius: 999px !important; }
html.dv2 #b1#b1#b1 .b1-mode button:is(.on, [aria-pressed="true"]) { background: var(--ds-surface) !important; color: var(--ds-ink) !important; box-shadow: var(--ds-shadow-1) !important; }
html.dv2 #b1#b1#b1 #b1Left { background: var(--ds-accent-soft) !important; color: var(--ds-accent-ink) !important; border-radius: 999px !important; }
html.dv2 #b1#b1#b1 .b1-fr { background: var(--ds-accent-soft) !important; box-shadow: 0 0 0 2px var(--ds-surface), 0 0 0 3px color-mix(in srgb, var(--ds-accent) 35%, transparent) !important; }
html.dv2 #b1#b1#b1 .b1-fc b { color: var(--ds-ink) !important; }
/* hero art above the headline (desktop and tablet); phones keep the composer above the fold */
.dv2-b1art { display: none; }
@media (min-width: 700px) { html.dv2 #b1 .dv2-b1art { display: block; width: 100%; max-width: 760px; margin: 8px auto 18px; aspect-ratio: 3 / 1; border-radius: 26px; overflow: hidden; box-shadow: var(--ds-shadow-2); background: var(--ds-surface-2); } html.dv2 #b1 .dv2-b1art img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; display: block; } }
html.dv2[data-brand="holydude"][data-ds-theme="dark"] #b1 .b1-logo img { content: url(/b1/logo-hd-halo-dark.svg); }
html.dv2[data-brand="dude"][data-ds-theme="dark"] #b1 .b1-logo img { content: url(/m3/logo-d-dark.svg); }

/* the landing re-lays out while fonts and the V2 sheet arrive: no scroll anchoring, so it opens at the top like today */
html.dv2, html.dv2 body, html.dv2 #b1 { overflow-anchor: none !important; }
html.dv2 img.dv2-empty-img { display: block; width: 120px; height: 120px; margin: 8px auto 4px; object-fit: contain; }
html.dv2.dv2-tight #dv2Nav .ds-navlink span { display: none; }
html.dv2.dv2-tight #fn1Plan { font-size: 0 !important; width: 40px; padding: 0 !important; justify-content: center; }
html.dv2 body .v4-retry.v4-retry.v4-retry, html.dv2 #app#app .v4-retry { color: var(--ds-accent-ink) !important; background: var(--ds-surface) !important; border: 1px solid var(--ds-line-2) !important; }

/* ---------- 11. public / SEO pages (_seo_layout.php and stand-alone pages): same header, type, buttons and cards ---------- */
html.dv2:not(:has(#app)) body { background: var(--ds-bg) !important; color: var(--ds-ink) !important; }
html.dv2 body > .wh1-top { background: var(--ds-glass) !important; -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); border-bottom: 1px solid var(--ds-line) !important; box-shadow: none !important; }
html.dv2 body > .wh1-top .wh1-btn.pri { background: var(--ds-accent) !important; color: var(--ds-on-accent) !important; border: 0 !important; }
html.dv2 body > .wh1-top .wh1-btn.ghost { color: var(--ds-ink) !important; }
html.dv2 body > .wh1-top .wh1-menu a { background: var(--ds-surface) !important; color: var(--ds-ink-2) !important; border: 1px solid var(--ds-line-2) !important; border-radius: 999px !important; }
html.dv2 body > .wh1-top .wh1-menu a:hover { border-color: var(--ds-accent) !important; color: var(--ds-ink) !important; }
html.dv2 body > .wh1-top .wh1-menu a[aria-current], html.dv2 body > .wh1-top .wh1-menu a.on { background: var(--ds-accent-soft) !important; color: var(--ds-accent-ink) !important; border-color: color-mix(in srgb, var(--ds-accent) 45%, transparent) !important; }
html.dv2 body > main :is(h1, h2) { font-family: var(--ds-font-display) !important; font-weight: 600 !important; letter-spacing: var(--ds-track-display) !important; color: var(--ds-ink) !important; text-wrap: balance; }
html.dv2 body > main h1 { font-size: clamp(2rem, 5vw, 3.2rem) !important; line-height: 1.06 !important; }
html.dv2 body > main :is(p, li) { color: var(--ds-ink-2) !important; }
html.dv2 body > main .lede { color: var(--ds-ink-2) !important; font-size: 1.15rem !important; }
html.dv2 body > main a:not([class]) { color: var(--ds-accent-ink) !important; }
html.dv2 body > main .card { background: var(--ds-surface) !important; border: 1px solid var(--ds-line) !important; border-radius: var(--ds-r-lg) !important; box-shadow: var(--ds-shadow-1) !important; }
html.dv2 body > main .card h3 { color: var(--ds-ink) !important; }
html.dv2 body > main .card p { color: var(--ds-ink-3) !important; }
html.dv2 body > main :is(input, select, textarea) { background: var(--ds-surface) !important; color: var(--ds-ink) !important; border: 1px solid var(--ds-line-2) !important; border-radius: var(--ds-r-md) !important; font-size: max(16px, 1em); }
html.dv2 body > main :is(input, select, textarea):focus { outline: none !important; border-color: var(--ds-accent) !important; box-shadow: var(--ds-focus) !important; }
html.dv2 body > main :is(button[type=submit], .btn, .btn-p, .cta, .pri) { background: var(--ds-accent) !important; color: var(--ds-on-accent) !important; border: 0 !important; border-radius: 999px !important; }
html.dv2 body > footer.site { background: var(--ds-surface-2) !important; color: var(--ds-ink-3) !important; border-top: 1px solid var(--ds-line) !important; }
html.dv2 body > footer.site a { color: var(--ds-ink-2) !important; }
html.dv2 #cb3Pub { background: var(--ds-glass) !important; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-top: 1px solid var(--ds-line) !important; }
html.dv2 #cb3Pub input { background: var(--ds-surface) !important; color: var(--ds-ink) !important; border: 1px solid var(--ds-line-2) !important; border-radius: 999px !important; }
html.dv2 #cb3Pub button { background: var(--ds-accent) !important; color: var(--ds-on-accent) !important; }
/* phones under 400px: the header keeps logo, site switch, Simple|Full, plan, bell and account on one row */
@media (max-width: 400px) { html.dv2 #app#app#app > .top { padding-left: 8px !important; padding-right: 8px !important; } html.dv2 #app > .top .flex.center { gap: 4px !important; } html.dv2 #app > .top :is(#fn1Plan, #dfxBell, #fn1Gear) { width: 36px !important; height: 36px !important; min-width: 36px !important; } html.dv2 #dn4ViewT button { padding: 0 8px !important; } html.dv2 .m1-pill a { padding: 0 6px !important; } }

/* ---------- 12. signed-out landing = the proposal home (#dv2Guest); the old welcome card and headline step aside ---------- */
html.dv2.dv2-guest #b1#b1 :is(#wel2Card, #hdh1Eb, #b1H1, #hdh1Sub, .try1-wrap, .dv2-b1art) { display: none !important; }
html.dv2 #b1 #dv2Guest { display: block !important; position: relative; left: 50%; width: min(1152px, calc(100vw - 2px)); margin-left: calc(min(1152px, calc(100vw - 2px)) / -2); text-align: left; color: var(--ds-ink); }
html.dv2 #b1 #dv2Guest .dv2-yours { margin-top: 18px; text-align: center; }
/* T-1017: hide the docked bar only while the hero box is on screen AND no human check / retry is pending (no :has() = never hidden) */
html.dv2.dv2-ghero-vis:not(.dv2-ts-need) #b1#b1 #b1Bar:not(.b1-tsb):not(:has(#b1Human.ts3-show)):not(:has(#b1Ts iframe)):not(:has(#b1Ts .cf-turnstile)) { opacity: 0 !important; pointer-events: none !important; transform: translateY(16px); }
html.dv2 #b1#b1#b1 #b1Bar:is(.b1-tsb), html.dv2.dv2-ts-need #b1#b1#b1 #b1Bar { opacity: 1 !important; pointer-events: auto !important; transform: none !important; }
html.dv2 #b1#b1 #b1Bar { transition: opacity .2s, transform .2s; }
html.dv2 #b1#b1 #dv2Guest .ds-h1 { font-family: var(--ds-font-display) !important; font-weight: 600 !important; }
html.dv2 #b1#b1 #dv2Guest :is(h1, h2, h3) { text-align: left; }
/* affiliate Share Everywhere: icon buttons */
html.dv2 #affShareBtns.dv2-sicons { display: flex !important; flex-wrap: wrap; gap: 8px; }
html.dv2 #affShareBtns button.dv2-sicon { width: 44px !important; height: 44px !important; min-width: 44px; padding: 0 !important; border-radius: 999px !important; display: inline-grid !important; place-items: center; background: var(--ds-surface) !important; border: 1px solid var(--ds-line-2) !important; color: var(--ds-ink-2) !important; font-size: 0 !important; }
html.dv2 #affShareBtns button.dv2-sicon:hover { border-color: var(--ds-accent) !important; color: var(--ds-accent-ink) !important; }
html.dv2 #affShareBtns button[data-dv2s="facebook"] { color: #1877f2 !important; } html.dv2 #affShareBtns button[data-dv2s="whatsapp"] { color: #128c4b !important; } html.dv2 #affShareBtns button[data-dv2s="telegram"] { color: #0a7ab8 !important; } html.dv2 #affShareBtns button[data-dv2s="reddit"] { color: #d93a00 !important; }
html.dv2[data-ds-theme="dark"] #affShareBtns button.dv2-sicon { color: var(--ds-ink) !important; }@media (max-width: 699px) { html.dv2 #b1 #dv2Guest { left: auto; width: auto; margin-left: 0; } html.dv2 #b1 #dv2Guest .ds-wrap { padding-left: 0; padding-right: 0; } }
html.dv2 #b1 #dv2Guest :is(p, span, h1, h2, h3, button) { white-space: normal; overflow-wrap: anywhere; }
html.dv2 #b1 #dv2Guest .ds-chip { white-space: nowrap; overflow-wrap: normal; }
html.dv2 #b1 #dv2Guest .ds-lede, html.dv2 #b1 #dv2Guest .dv2-trust span { max-width: 100%; }:is(#dv2Home,#dv2Guest) .dv2-hero-grid > * { min-width: 0; }
html.dv2 #b1 #dv2Guest { max-width: 100vw; }
html.dv2 #b1#b1 #b1Faces { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
html.dv2 #b1#b1#b1 #dv2Guest :is(.ds-h1, .ds-h2) { font-family: var(--ds-font-display) !important; font-weight: 600 !important; letter-spacing: var(--ds-track-display) !important; }
@media (max-width: 599px) { html.dv2 #tokRadio { left: auto !important; right: max(12px, env(safe-area-inset-right, 0px)) !important; } html.dv2 #tokRadio .trPill { min-height: 36px !important; padding: 0 12px !important; font-size: 12px !important; } }
/* selected chips / filters (QA r1: dark text on the brand fill) */
html.dv2 #app#app .pnl:not(#p-games) :is(.t1-chip, .chip, .btn-pill, .btn-sm, .tr-btn):is(.on, .active, .sel, [aria-pressed="true"], [aria-selected="true"]) { background: var(--ds-accent-soft) !important; color: var(--ds-accent-ink) !important; border-color: color-mix(in srgb, var(--ds-accent) 50%, transparent) !important; }
html.dv2 #app#app .pnl:not(#p-games) :is(.t1-chip, .chip, .btn-pill, .btn-sm, .tr-btn):is(.on, .active, .sel, [aria-pressed="true"], [aria-selected="true"]) * { color: inherit !important; }/* QA r1: Daily Scripture card (legacy skin whitens it; keep it a calm tinted card with readable verse + reference) */
html.dv2 #app#app #dailyScriptureCard#dailyScriptureCard { background: var(--ds-surface-2) !important; border: 1px solid var(--ds-line) !important; }
html.dv2 #app#app #dailyScriptureCard#dailyScriptureCard * { color: var(--ds-ink) !important; }
html.dv2 #app#app #dailyScriptureCard#dailyScriptureCard #dscRef { color: var(--ds-accent-ink) !important; }
/* the "This week, with someone" card and other legacy primary pills */
html.dv2 #app#app .fn1-gh { color: var(--ds-accent-ink) !important; }
html.dv2 #app#app :is(.fn1-pill:not(.fn1-2), .b2-btn.b2-pri, .b5-gob) { background: var(--ds-accent-fill) !important; color: #fff !important; border: 0 !important; }
html.dv2 #app#app .fn1-pill.fn1-2 { background: var(--ds-surface) !important; color: var(--ds-ink) !important; border: 1px solid var(--ds-line-2) !important; }html.dv2 #app#app .dn4-btn.dn4-pri { background: var(--ds-accent-fill) !important; color: #fff !important; border: 0 !important; }
html.dv2 #app#app .dn4-btn:not(.dn4-pri) { background: var(--ds-surface) !important; color: var(--ds-ink) !important; border: 1px solid var(--ds-line-2) !important; }
html.dv2[data-ds-theme="dark"] #app#app :is(.dfc2-sub, .sub-text) { color: var(--ds-ink-3) !important; }

/* ---------- 13. dude.com golden-hour look (html.dv2-gold; a = portrait hero card, b = sunset band) ---------- */
html.dv2.dv2-gold[data-brand="dude"]:not([data-ds-theme="dark"]) { --ds-bg: #fffaf4; --ds-surface-2: #fff1e4; --ds-hero-glow: radial-gradient(60% 70% at 85% 10%, rgba(255, 166, 92, .22), transparent 70%); }
.dv2-port { position: relative; border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 5; max-height: 640px; width: 100%;
  background: radial-gradient(75% 60% at 62% 28%, #ffe6c9 0%, #ffd2a8 38%, #fde8d8 72%, #fff7ef 100%); box-shadow: var(--ds-shadow-2); isolation: isolate; }
html.dv2[data-ds-theme="dark"] .dv2-port { background: radial-gradient(75% 60% at 62% 28%, #6b3a1c 0%, #3a2416 45%, #1c1a1f 100%); }
.dv2-port-sun { position: absolute; width: 60%; aspect-ratio: 1; right: -8%; top: -10%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 196, 120, .95), rgba(255, 150, 70, .35) 45%, transparent 70%); filter: blur(6px); z-index: 0; }
.dv2-port-img { position: absolute; z-index: 1; bottom: 0; left: 50%; transform: translateX(-50%); height: 100%; width: auto; max-width: none; object-fit: contain; object-position: bottom center; }
.dv2-port-tag { position: absolute; z-index: 2; left: 14px; bottom: 14px; display: grid; grid-template-columns: auto auto; column-gap: 12px; align-items: center; padding: 10px 10px 10px 16px; border-radius: 18px;
  background: var(--ds-glass); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); border: 1px solid var(--ds-line); box-shadow: var(--ds-shadow-2); }
.dv2-port-tag b { grid-column: 1; font-size: 1rem; color: var(--ds-ink); } .dv2-port-tag span { grid-column: 1; font-size: .78rem; color: var(--ds-ink-3); } .dv2-port-tag .ds-btn { grid-column: 2; grid-row: 1 / span 2; min-height: 40px; padding: 0 16px; }
@media (max-width: 899px) { .dv2-port { order: -1; aspect-ratio: 4 / 3.4; max-height: 400px; border-radius: 22px; } }
/* b: the whole hero is a warm sunset band, the portrait stands in it without a card */
html.dv2-look-b :is(#dv2Home, #dv2Guest) .dv2-hero { background: linear-gradient(100deg, var(--ds-bg) 0%, #fff4e8 42%, #ffdcbc 74%, #ffbf86 100%); border-radius: 0 0 32px 32px; padding-bottom: 0; }
html.dv2-look-b[data-ds-theme="dark"] :is(#dv2Home, #dv2Guest) .dv2-hero { background: linear-gradient(100deg, var(--ds-bg) 0%, #1d1a1c 45%, #4a2a17 78%, #7a3f17 100%); }
html.dv2-look-b .dv2-port { background: transparent; box-shadow: none; border-radius: 0; aspect-ratio: 4 / 4.6; overflow: visible; }
html.dv2-look-b .dv2-port-sun { width: 80%; right: 0; top: 0; }
@media (min-width: 900px) { html.dv2-look-b :is(#dv2Home, #dv2Guest) .dv2-hero-grid { align-items: end; } html.dv2-look-b :is(#dv2Home, #dv2Guest) .dv2-hero-grid > div:first-child { padding-bottom: 44px; } }
/* Meet the crew */
.dv2-crew .dv2-sec-h { flex-wrap: wrap; }
.dv2-crew-row { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) { .dv2-crew-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dv2-crew-card { display: flex; flex-direction: column; text-align: left; padding: 0; border-radius: 22px; overflow: hidden; border: 1px solid var(--ds-line); background: var(--ds-surface); color: var(--ds-ink); cursor: pointer; font: inherit; box-shadow: var(--ds-shadow-1); transition: transform var(--ds-dur-3) var(--ds-ease-out), box-shadow var(--ds-dur-3); }
.dv2-crew-card:hover { transform: translateY(-3px); box-shadow: var(--ds-shadow-2); }
.dv2-crew-card:focus-visible { outline: none; box-shadow: var(--ds-focus); }
.dv2-crew-ph { display: block; aspect-ratio: 4 / 4.4; background: radial-gradient(80% 70% at 60% 25%, #ffe2c2 0%, #ffd4ae 40%, #fdeadb 75%, #fff7ef 100%); position: relative; overflow: hidden; }
html.dv2[data-ds-theme="dark"] .dv2-crew-ph { background: radial-gradient(80% 70% at 60% 25%, #6b3a1c 0%, #2e2018 55%, #1c1a1f 100%); }
.dv2-crew-ph img { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); height: 108%; width: auto; max-width: none; }
.dv2-crew-tx { display: grid; gap: 2px; padding: 12px 14px 14px; } .dv2-crew-tx b { font-size: 1.02rem; } .dv2-crew-tx small { color: var(--ds-ink-3); font-size: .82rem; line-height: 1.35; }
/* b: a swipeable row of tall story cards with the name over the photo */
html.dv2-look-b .dv2-crew-row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 6px; }
html.dv2-look-b .dv2-crew-row::-webkit-scrollbar { display: none; }
html.dv2-look-b .dv2-crew-card { flex: 0 0 clamp(170px, 42vw, 230px); scroll-snap-align: start; position: relative; }
html.dv2-look-b .dv2-crew-ph { aspect-ratio: 2 / 3; }
html.dv2-look-b .dv2-crew-tx { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 14px 14px; background: linear-gradient(transparent, rgba(30, 16, 8, .78)); }
html.dv2-look-b .dv2-crew-tx b, html.dv2-look-b .dv2-crew-tx small { color: #fff; }
html.dv2-look-b .dv2-crew-tx small { color: rgba(255, 255, 255, .85); }
:is(#dv2Home, #dv2Guest) .dv2-crew-card, :is(#dv2Home, #dv2Guest) .dv2-crew-card * { font-family: var(--ds-font-sans) !important; }@media (max-width: 639px) { html.dv2[data-brand="dude"] #app#app#app#app > .top .t-logo { width: 84px !important; background-size: contain !important; } }
/* gold e2e: messages share bar + chat Listen/Pause state */
html.dv2[data-ds-theme="dark"] :is(#mf1Share, .mx1-btn, [id^="mf1"] button, [class*="mf1-"] button, [class*="mx1-"] button) { background: var(--ds-surface-2) !important; color: var(--ds-ink) !important; border-color: var(--ds-line-2) !important; }
html.dv2[data-ds-theme="dark"] :is(#mf1Share, .mx1-btn, [id^="mf1"] button, [class*="mf1-"] button, [class*="mx1-"] button) * { color: inherit !important; }
html.dv2 #app#app #p-chat button:is(.on, .playing, .active, [aria-pressed="true"]) { background: var(--ds-accent-fill) !important; color: #fff !important; border-color: transparent !important; }
html.dv2 #app#app #p-chat button:is(.on, .playing, .active, [aria-pressed="true"]) * { color: inherit !important; }
html.dv2[data-ds-theme="dark"] #app#app .dn4-vref { color: var(--ds-accent-ink) !important; }/* AI badge on every portrait card (the characters are AI) */
.dv2-ai { position: absolute; top: 10px; left: 10px; z-index: 2; font-size: .62rem; font-weight: 800; letter-spacing: .08em; padding: 3px 7px; border-radius: 999px; background: var(--ds-glass); color: var(--ds-ink); border: 1px solid var(--ds-line); }
/* holydude golden look: heavenly light blue with warm golden-hour light, reverent */
html.dv2.dv2-gold[data-brand="holydude"]:not([data-ds-theme="dark"]) { --ds-bg: #f7f9ff; }
html.dv2[data-brand="holydude"] .dv2-port { background: radial-gradient(70% 55% at 62% 26%, #fff1d2 0%, #ffe2a8 24%, #e4ecff 62%, #f7f9ff 100%); }
html.dv2[data-brand="holydude"] .dv2-port-sun { background: radial-gradient(circle, rgba(255, 223, 150, .95), rgba(255, 200, 110, .35) 45%, transparent 70%); }
html.dv2[data-brand="holydude"] .dv2-crew-ph { background: radial-gradient(80% 70% at 60% 22%, #fff0cc 0%, #ffe3ad 30%, #e6edff 70%, #f7f9ff 100%); }
html.dv2[data-brand="holydude"][data-ds-theme="dark"] .dv2-port, html.dv2[data-brand="holydude"][data-ds-theme="dark"] .dv2-crew-ph { background: radial-gradient(75% 60% at 62% 26%, #6a5222 0%, #24315a 50%, #0a1022 100%); }html.dv2 .pnl:not(#p-games) :is(.btn-p, .bp, .b-pri, .pn-main, button.primary):not([style*="background"]) > :is(span, b, i, svg) { color: inherit !important; }
html.dv2[data-ds-theme="dark"] #app#app .m-time { color: var(--ds-ink-3) !important; opacity: 1 !important; }
:is(#dv2Home,#dv2Guest):is(#dv2Home,#dv2Guest):is(#dv2Home,#dv2Guest) .dv2-port-tag .ds-btn-primary { background: var(--ds-accent-fill) !important; color: #fff !important; border: 0 !important; }
/* Listen -> Pause state on replies (dn4-ls.dn4-on): white text on the deep accent fill */
html.dv2 #app#app .dn4-ls.dn4-on, html.dv2 #app#app .dn4-ls.dn4-on * { color: #fff !important; }
html.dv2[data-ds-theme="dark"] #app#app .msg:not(.b) .m-time { color: rgba(255, 255, 255, .9) !important; }