/*
 * datingv2 – shared stylesheet: fonts, tokens, shell (app bar, tab bar / rail), component library, legacy skin.
 * Loaded after bootstrap + icons.css + style.css by view/datingv2 headers (?v=filemtime).
 * Every rule is scoped under body.dv2, so pages without the dv2 skin are untouched.
 * Rules of the house: no display:…!important on anything JS toggles; never re-enable .modal-backdrop;
 * #msgIndicator/#listIndicator must keep working with the inline display:inline-block main2.js sets.
 * Area files: /css/datingv2-<area>.css (auto-loaded after this file on that area's pages).
 */

/* ------------------------------------------------------------------ 1. Fonts (self-hosted, OFL) */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/fonts/datingv2/figtree-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/fonts/datingv2/figtree-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/datingv2/bricolage-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/datingv2/bricolage-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------------ 2. Tokens (Tokens.dc.html) */
.dv2 {
  /* accent: fills (buttons, badges, active markers; white text on it >= 4.5:1)
     accent-ink: accent-coloured TEXT/ICONS on white or accent-soft (>= 4.5:1 on accent-soft) */
  --dv2-accent: #b300b8;
  --dv2-accent-rgb: 179, 0, 184;
  --dv2-accent-ink: #b300b8;
  --dv2-accent-ink-rgb: 179, 0, 184;
  --dv2-accent-dark: #86008a;
  --dv2-accent-dark-rgb: 134, 0, 138;
  --dv2-accent-soft: #f7e6f8;
  --dv2-accent-line: #e4a6e6;
  --dv2-on-accent: #ffffff;

  --dv2-ink: #1c1a22;
  --dv2-text2: #3b3845;
  --dv2-text3: #4a4754;
  --dv2-muted: #5d5a68;
  --dv2-outline: #8f8896;
  --dv2-divider: #ebe9ef;
  --dv2-bar-line: #e8e6ec;
  --dv2-handle: #d4d1da;
  --dv2-surface: #f6f5f8;
  --dv2-chat-bg: #f3f1f6;
  --dv2-bg: #ffffff;
  --dv2-placeholder: #dcd5e6;
  --dv2-placeholder-ink: #4d4759;
  --dv2-online: #22a55a;
  --dv2-online-text: #14703a;
  --dv2-danger: #c42b2b;
  --dv2-danger-bg: #fdecec;
  --dv2-verified: #1a66c9;
  --dv2-bonus: #146c34;
  --dv2-bonus-bg: #e6f4ea;
  --dv2-warn: #7a4b00;
  --dv2-warn-bg: #fff4e0;
  --dv2-info: #1a66c9;
  --dv2-info-bg: #eef4fc;
  --dv2-scrim: rgba(22, 18, 28, 0.5);
  --dv2-focus: var(--dv2-accent-ink);

  --dv2-font: 'Figtree', 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif;
  --dv2-font-display: 'Bricolage Grotesque', 'Figtree', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;

  --dv2-r-pill: 999px;
  --dv2-r-card: 14px;
  --dv2-r-sheet: 22px;
  --dv2-r-field: 12px;
  --dv2-r-cta: 16px;

  --dv2-s1: 4px;
  --dv2-s2: 8px;
  --dv2-s3: 12px;
  --dv2-s4: 16px;
  --dv2-s5: 24px;
  --dv2-tap: 44px;

  --dv2-shadow-card: 0 1px 2px rgba(28, 26, 34, 0.06), 0 2px 8px rgba(28, 26, 34, 0.06);
  --dv2-shadow-float: 0 2px 8px rgba(28, 26, 34, 0.22);
  --dv2-shadow-pop: 0 8px 28px rgba(22, 18, 28, 0.16);
  --dv2-shadow-sheet: 0 -8px 30px rgba(22, 18, 28, 0.2);

  /* shell geometry – use these for sticky/fixed UI */
  --dv2-appbar-h: 56px;
  --dv2-tabbar-h: 66px;
  --dv2-rail-w: 0px;                                   /* 88px on >= 992px (left rail) */
  --dv2-safe-top: env(safe-area-inset-top, 0px);
  --dv2-safe-bottom: env(safe-area-inset-bottom, 0px);
  --dv2-bottom-offset: 0px;                            /* space the visible tab bar covers (incl. safe area) */
  --dv2-bottom-safe: var(--dv2-safe-bottom);           /* safe-area padding a bottom bar must add itself */
  --dv2-z-bar: 1030;
  --dv2-z-sheet: 1045;                                 /* below Bootstrap modals (1055) */
  --dv2-z-toast: 10000;

  /* Bootstrap mapping */
  --bs-body-font-family: var(--dv2-font);
  --bs-body-font-size: 1rem;
  --bs-body-color: var(--dv2-ink);
  --bs-body-bg: var(--dv2-bg);
  --bs-link-color: var(--dv2-accent-ink);
  --bs-link-color-rgb: var(--dv2-accent-ink-rgb);
  --bs-link-hover-color: var(--dv2-accent-dark);
  --bs-link-hover-color-rgb: var(--dv2-accent-dark-rgb);
  --bs-primary: var(--dv2-accent);
  --bs-primary-rgb: var(--dv2-accent-rgb);
  --bs-border-color: var(--dv2-divider);
  --bs-focus-ring-color: rgba(var(--dv2-accent-rgb), 0.25);
}

/* 3. Per-brand accents (body[data-app]); soft/line = accent mixed with white 90% / 65%;
      ink darkened until >= 4.5:1 on soft. Unlisted brands use the default (efriend) palette. */
.dv2[data-app="easydate"] {
  --dv2-accent: #cb495a; --dv2-accent-rgb: 203, 73, 90;
  --dv2-accent-ink: #b94352; --dv2-accent-ink-rgb: 185, 67, 82;
  --dv2-accent-dark: #983744; --dv2-accent-dark-rgb: 152, 55, 68;
  --dv2-accent-soft: #faedee; --dv2-accent-line: #edbfc5;
}
.dv2[data-app="eliteflirt"] {
  --dv2-accent: #0a73b7; --dv2-accent-rgb: 10, 115, 183;
  --dv2-accent-ink: #0a70b2; --dv2-accent-ink-rgb: 10, 112, 178;
  --dv2-accent-dark: #085689; --dv2-accent-dark-rgb: 8, 86, 137;
  --dv2-accent-soft: #e6f1f8; --dv2-accent-line: #a9cee6;
}
.dv2[data-app="flirt24"], .dv2[data-app="flirt8"], .dv2[data-app="flirtmap"], .dv2[data-app="happyflirt"] {
  --dv2-accent: #e22247; --dv2-accent-rgb: 226, 34, 71;
  --dv2-accent-ink: #ce1f41; --dv2-accent-ink-rgb: 206, 31, 65;
  --dv2-accent-dark: #aa1a35; --dv2-accent-dark-rgb: 170, 26, 53;
  --dv2-accent-soft: #fce9ed; --dv2-accent-line: #f5b2bf;
}
.dv2[data-app="flirt7"], .dv2[data-app="starflirt"] {
  --dv2-accent: #de2774; --dv2-accent-rgb: 222, 39, 116;
  --dv2-accent-ink: #c82369; --dv2-accent-ink-rgb: 200, 35, 105;
  --dv2-accent-dark: #a61d57; --dv2-accent-dark-rgb: 166, 29, 87;
  --dv2-accent-soft: #fce9f1; --dv2-accent-line: #f3b3ce;
}
.dv2[data-app="godate"] {
  --dv2-accent: #d13f59; --dv2-accent-rgb: 209, 63, 89;
  --dv2-accent-ink: #c03a52; --dv2-accent-ink-rgb: 192, 58, 82;
  --dv2-accent-dark: #9d2f43; --dv2-accent-dark-rgb: 157, 47, 67;
  --dv2-accent-soft: #faecee; --dv2-accent-line: #efbcc5;
}
.dv2[data-app="golove"] {
  --dv2-accent: #bf4b75; --dv2-accent-rgb: 191, 75, 117;
  --dv2-accent-ink: #b2466d; --dv2-accent-ink-rgb: 178, 70, 109;
  --dv2-accent-dark: #8f3858; --dv2-accent-dark-rgb: 143, 56, 88;
  --dv2-accent-soft: #f9edf1; --dv2-accent-line: #e9c0cf;
}
.dv2[data-app="zindate"] {
  --dv2-accent: #7c3aed; --dv2-accent-rgb: 124, 58, 237;
  --dv2-accent-ink: #7c3aed; --dv2-accent-ink-rgb: 124, 58, 237;
  --dv2-accent-dark: #5d2cb2; --dv2-accent-dark-rgb: 93, 44, 178;
  --dv2-accent-soft: #f2ebfd; --dv2-accent-line: #d1baf9;
}

/* ------------------------------------------------------------------ 4. Base */
.dv2 {
  margin: 0;
  font-family: var(--dv2-font);
  font-size: 16px;
  line-height: 1.45;
  color: var(--dv2-ink);
  background: var(--dv2-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-optical-sizing: auto;
}
.dv2:not(.dv2-shell-guest) { padding-top: 0; }          /* style.css adds 54px for the old fixed navbar */
.dv2.dv2-noscroll { overflow: hidden; }                  /* set while a .dv2-sheet is open */
.dv2 :where(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) { font-family: var(--dv2-font); color: inherit; }
.dv2 input, .dv2 select, .dv2 textarea { font-size: 16px; }   /* iOS: no zoom on focus (viewport allows zoom now) */
.dv2 a { text-underline-offset: 2px; }
.dv2 :focus-visible { outline: 3px solid var(--dv2-focus); outline-offset: 2px; }
.dv2 nav a:focus-visible, .dv2 nav button:focus-visible { outline: 3px solid var(--dv2-focus); outline-offset: 2px; } /* style.css removes nav focus outlines */
.dv2 .form-control:focus-visible, .dv2 .form-select:focus-visible, .dv2 .form-check-input:focus-visible,
.dv2 .dv2-input:focus-visible, .dv2 .dv2-select:focus-visible, .dv2 .dv2-textarea:focus-visible { outline: 0; } /* they get a border + ring instead */
.dv2 .dv2-main { display: block; }
.dv2 .dv2-main:focus { outline: 0; }
.dv2 .dv2-vh {
  position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}
.dv2 .dv2-skip {
  position: absolute; left: 8px; top: -120px; z-index: 10001;
  padding: 10px 16px; border-radius: 12px; background: #fff; color: var(--dv2-ink);
  font-weight: 800; text-decoration: none; box-shadow: var(--dv2-shadow-pop);
}
.dv2 .dv2-skip:focus { top: calc(var(--dv2-safe-top) + 8px); }
.dv2 .dv2-icon { flex: none; display: inline-block; vertical-align: middle; }

/* ------------------------------------------------------------------ 5. Shell: app bar */
.dv2 .dv2-appbar {
  position: sticky; top: 0; z-index: var(--dv2-z-bar);
  box-sizing: content-box;
  height: var(--dv2-appbar-h);
  padding: var(--dv2-safe-top) 10px 0 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: #fff;
}
.dv2 .dv2-appbar--back { padding-left: 2px; gap: 4px; }
.dv2 .dv2-appbar--detail { padding-right: 6px; }
.dv2 .dv2-appbar__title {
  flex: 1 1 auto; min-width: 0; margin: 0;
  font-family: var(--dv2-font-display); font-size: 27px; line-height: 1.1; font-weight: 700; letter-spacing: -0.015em;
  color: var(--dv2-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dv2 .dv2-appbar--detail .dv2-appbar__title { font-size: 23px; letter-spacing: -0.01em; }
.dv2 .dv2-appbar__actions { flex: none; display: flex; align-items: center; gap: 2px; }
.dv2 .dv2-appbar__back { color: var(--dv2-ink); }
.dv2 .dv2-appbar__link {           /* text link in the actions slot, e.g. "Verlauf" */
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; border-radius: 999px;
  color: var(--dv2-ink); font-size: 15px; font-weight: 700; text-decoration: none; white-space: nowrap;
}
.dv2 .dv2-appbar__link:hover { background: var(--dv2-surface); color: var(--dv2-ink); }
.dv2 .dv2-appbar--brand { padding-left: 16px; }
.dv2 .dv2-appbar__brand { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--dv2-ink); }
.dv2 .dv2-appbar__brand img { display: block; height: 32px; width: auto; max-width: 180px; }
.dv2 .dv2-appbar__brandtext { font-family: var(--dv2-font-display); font-size: 22px; font-weight: 700; }

/* credits pill (dv2_credits_pill()) */
.dv2 .dv2-credits { flex: none; display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--dv2-accent-ink); }
.dv2 .dv2-credits__pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 38px; box-sizing: border-box; padding: 0 4px 0 10px;
  border-radius: 999px; background: var(--dv2-accent-soft); color: var(--dv2-accent-ink);
  font-size: 15px; font-weight: 800; line-height: 1; white-space: nowrap;
}
.dv2 .dv2-credits__num { font-variant-numeric: tabular-nums; }
.dv2 .dv2-credits__unit { font-weight: 600; }
.dv2 .dv2-credits__plus {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 30px; height: 30px; border-radius: 999px; background: var(--dv2-accent); color: #fff;
}
.dv2 .dv2-credits:hover .dv2-credits__plus { background: var(--dv2-accent-dark); }
.dv2 .dv2-credits--compact .dv2-credits__pill { padding-left: 8px; gap: 5px; }
@media (max-width: 359.98px) {
  .dv2 .dv2-credits--full .dv2-credits__unit { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* account menu */
.dv2 .dv2-menu__list { min-width: 264px; }
.dv2 .dv2-menu .dropdown-item .dv2-icon { color: var(--dv2-text3); }
.dv2 .dv2-menu__label { flex: 1 1 auto; }
.dv2 .dv2-menu__legal { font-weight: 500; }

/* ------------------------------------------------------------------ 6. Shell: tab bar (phones) / rail (desktop) */
.dv2 .dv2-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--dv2-z-bar);
  box-sizing: content-box;
  height: var(--dv2-tabbar-h);
  padding-bottom: var(--dv2-safe-bottom);
  display: grid; grid-template-columns: repeat(5, 1fr);
  margin: 0;
  background: #fff;
  border-top: 1px solid var(--dv2-bar-line);
}
.dv2 .dv2-tabbar__brand { display: none; }
.dv2 .dv2-tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-width: 0; min-height: 44px;
  color: var(--dv2-text3); font-size: 13px; font-weight: 600; line-height: 1.15;
  text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.dv2 .dv2-tab:hover { color: var(--dv2-ink); }
.dv2 .dv2-tab__icon {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 56px; height: 30px; border-radius: 999px;
}
.dv2 .dv2-tab__label { max-width: 100%; padding: 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv2 .dv2-tab.is-active { color: var(--dv2-accent-ink); font-weight: 800; }
.dv2 .dv2-tab.is-active .dv2-tab__icon { background: var(--dv2-accent-soft); }
.dv2 .dv2-tab.is-active .dv2-icon { stroke-width: 2; }
.dv2 .dv2-tab__icon .dv2-badge { position: absolute; top: -5px; right: 3px; }
.dv2 .dv2-tab__icon .dv2-dot { position: absolute; top: -2px; right: 9px; }

@media (max-width: 991.98px) {
  .dv2.dv2-has-tabbar {
    --dv2-bottom-offset: calc(var(--dv2-tabbar-h) + var(--dv2-safe-bottom));
    --dv2-bottom-safe: 0px;
    padding-bottom: var(--dv2-bottom-offset);
  }
  .dv2:not(.dv2-has-tabbar) .dv2-tabbar { display: none; }
  /* messenger: the tab bar only shows in the inbox state; datingv2-chat.js sets body.dv2-chat-open */
  .dv2.dv2-chat-open .dv2-tabbar { display: none; }
  .dv2.dv2-has-tabbar.dv2-chat-open { --dv2-bottom-offset: 0px; --dv2-bottom-safe: var(--dv2-safe-bottom); padding-bottom: 0; }
}
/* separate rules: an unsupported :has() must not invalidate the rules above */
@media (max-width: 991.98px) {
  .dv2.dv2-shell-messenger:has(.main-container.active) .dv2-tabbar { display: none; }
  /* keyboard open: Android resizes the viewport and a fixed bar would ride on the keyboard */
  .dv2:has(:is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="button"], [type="submit"], [type="reset"], [type="file"], [type="color"], [type="hidden"]), textarea):focus) .dv2-tabbar { display: none; }
  .dv2.dv2-has-tabbar:has(:is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="button"], [type="submit"], [type="reset"], [type="file"], [type="color"], [type="hidden"]), textarea):focus) {
    --dv2-bottom-offset: 0px; --dv2-bottom-safe: var(--dv2-safe-bottom);
  }
}

@media (min-width: 992px) {
  .dv2.dv2-has-rail { --dv2-rail-w: 88px; padding-left: var(--dv2-rail-w); }
  .dv2.dv2-has-rail .dv2-tabbar {
    top: 0; bottom: 0; left: 0; right: auto;
    width: var(--dv2-rail-w); height: auto;
    padding: calc(var(--dv2-safe-top) + 12px) 0 12px;
    grid-template-columns: 1fr; grid-auto-rows: 72px; align-content: start;
    border-top: 0; border-right: 1px solid var(--dv2-divider);
  }
  .dv2.dv2-has-rail .dv2-tabbar__brand { display: flex; align-items: center; justify-content: center; }
  .dv2.dv2-has-rail .dv2-tabbar__brand img { width: 40px; height: 40px; object-fit: contain; }
}

/* restricted shell / CT1 legacy messenger */
.dv2.dv2-ct1 { padding-top: calc(var(--dv2-appbar-h) + var(--dv2-safe-top)); }
.dv2.dv2-ct1 .dv2-appbar { position: fixed; top: 0; left: var(--dv2-rail-w); right: 0; }
.dv2.dv2-shell-messenger { height: auto; min-height: 100%; }   /* style.css sets body.messenger{height:3000px} */

/* desktop legal footer */
.dv2 .dv2-footer { display: none; }
@media (min-width: 992px) {
  .dv2 .dv2-footer {
    display: block; margin-top: 32px; padding: 20px 24px 32px;
    border-top: 1px solid var(--dv2-divider); color: var(--dv2-muted); font-size: 15px;
  }
  .dv2 .dv2-footer__links { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0 0 8px; padding: 0; list-style: none; }
  .dv2 .dv2-footer a { color: var(--dv2-text3); text-decoration: none; }
  .dv2 .dv2-footer a:hover { color: var(--dv2-ink); text-decoration: underline; }
  .dv2 .dv2-footer__copy { margin: 0; color: var(--dv2-muted); }
}
@media (display-mode: standalone) {
  .dv2 .dv2-footer { display: none; }
  /* style.css hides EVERY <footer> in installed PWAs; give area footers their display back (zero specificity, class rules still win) */
  :where(.dv2:not(.dv2-shell-guest)) footer:where(:not(.dv2-footer):not(.member)) { display: block; }
}

/* ------------------------------------------------------------------ 7. Components */

/* layout helpers */
.dv2 .dv2-wrap { box-sizing: border-box; width: 100%; max-width: 720px; margin: 0 auto; padding: 0 16px; }
.dv2 .dv2-wrap--wide { max-width: 1080px; }
.dv2 .dv2-stack { display: flex; flex-direction: column; gap: 12px; }
.dv2 .dv2-h1 { margin: 0; font-family: var(--dv2-font-display); font-size: 27px; line-height: 1.15; font-weight: 700; letter-spacing: -0.015em; }
.dv2 .dv2-h2 { margin: 0; font-family: var(--dv2-font-display); font-size: 22px; line-height: 1.15; font-weight: 700; }
.dv2 .dv2-h3 { margin: 0; font-size: 17px; line-height: 1.25; font-weight: 800; }
.dv2 .dv2-label-strong { margin: 0 0 8px; font-size: 15px; line-height: 20px; font-weight: 800; }
.dv2 .dv2-text2 { color: var(--dv2-text2); }
.dv2 .dv2-muted { color: var(--dv2-muted); }
.dv2 .dv2-small { font-size: 14px; line-height: 1.35; }
.dv2 .dv2-link { color: var(--dv2-accent-ink); font-weight: 700; text-decoration: underline; }
.dv2 .dv2-link:hover { color: var(--dv2-accent-dark); }
.dv2 .dv2-num { font-variant-numeric: tabular-nums; }

/* buttons: .dv2-btn + one of --primary | --secondary | --soft | --ghost | --danger; sizes --sm (44) default (48) --lg (56); --block */
.dv2 .dv2-btn {
  --dv2-btn-bg: #fff; --dv2-btn-fg: var(--dv2-ink); --dv2-btn-bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  box-sizing: border-box; min-height: 48px; padding: 0 20px; margin: 0;
  border: 1.5px solid var(--dv2-btn-bd); border-radius: 999px;
  background: var(--dv2-btn-bg); color: var(--dv2-btn-fg);
  font-family: var(--dv2-font); font-size: 16px; line-height: 1.2; font-weight: 800;
  text-align: center; text-decoration: none; cursor: pointer; user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.dv2 .dv2-btn:hover { color: var(--dv2-btn-fg); text-decoration: none; }
.dv2 .dv2-btn--primary { --dv2-btn-bg: var(--dv2-accent); --dv2-btn-fg: #fff; --dv2-btn-bd: var(--dv2-accent); }
.dv2 .dv2-btn--primary:hover { --dv2-btn-bg: var(--dv2-accent-dark); --dv2-btn-bd: var(--dv2-accent-dark); }
.dv2 .dv2-btn--secondary { --dv2-btn-bg: #fff; --dv2-btn-fg: var(--dv2-ink); --dv2-btn-bd: var(--dv2-outline); font-weight: 700; }
.dv2 .dv2-btn--secondary:hover { --dv2-btn-bg: var(--dv2-surface); }
.dv2 .dv2-btn--soft { --dv2-btn-bg: var(--dv2-accent-soft); --dv2-btn-fg: var(--dv2-accent-ink); --dv2-btn-bd: var(--dv2-accent-soft); }
.dv2 .dv2-btn--soft:hover { --dv2-btn-bd: var(--dv2-accent-line); }
.dv2 .dv2-btn--ghost { --dv2-btn-bg: transparent; --dv2-btn-fg: var(--dv2-accent-ink); --dv2-btn-bd: transparent; }
.dv2 .dv2-btn--ghost:hover { --dv2-btn-bg: var(--dv2-accent-soft); }
.dv2 .dv2-btn--danger { --dv2-btn-bg: var(--dv2-danger); --dv2-btn-fg: #fff; --dv2-btn-bd: var(--dv2-danger); }
.dv2 .dv2-btn--danger:hover { --dv2-btn-bg: #a42424; --dv2-btn-bd: #a42424; }
.dv2 .dv2-btn--float { --dv2-btn-bg: #fff; --dv2-btn-fg: var(--dv2-accent-ink); box-shadow: var(--dv2-shadow-float); }
.dv2 .dv2-btn--sm { min-height: 44px; padding: 0 14px; font-size: 15px; }
.dv2 .dv2-btn--lg { min-height: 56px; padding: 0 20px; border-radius: 16px; font-size: 17.5px; }
.dv2 .dv2-btn--block { display: flex; width: 100%; }
.dv2 .dv2-btn:disabled, .dv2 .dv2-btn[aria-disabled="true"], .dv2 .dv2-btn.is-disabled { opacity: .5; cursor: not-allowed; }
.dv2 .dv2-btn[aria-busy="true"], .dv2 .dv2-btn.is-busy { cursor: progress; opacity: .8; }
.dv2 .dv2-btn__sub { display: block; font-size: 14px; font-weight: 600; opacity: .9; }

.dv2 .dv2-iconbtn {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; margin: 0; border: 0; border-radius: 999px;
  background: transparent; color: var(--dv2-ink); cursor: pointer; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.dv2 .dv2-iconbtn:hover { background: var(--dv2-surface); color: var(--dv2-ink); }
.dv2 .dv2-iconbtn--soft { background: var(--dv2-accent-soft); color: var(--dv2-accent-ink); }
.dv2 .dv2-iconbtn--float { background: #fff; box-shadow: var(--dv2-shadow-float); }
.dv2 .dv2-iconbtn--float:hover { background: #fff; }
.dv2 .dv2-iconbtn--dark { background: rgba(28, 26, 34, 0.6); color: #fff; }
.dv2 .dv2-iconbtn--dark:hover { background: rgba(28, 26, 34, 0.76); color: #fff; }

/* chips (filter / quick toggles). Active: .is-active, [aria-pressed=true], [aria-selected=true], [aria-current=page] */
.dv2 .dv2-chips {
  display: flex; gap: 8px; margin: 0; padding: 2px 16px 8px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.dv2 .dv2-chips::-webkit-scrollbar { display: none; }
.dv2 .dv2-chip {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  box-sizing: border-box; min-height: 44px; padding: 0 13px; margin: 0;
  border: 1px solid var(--dv2-outline); border-radius: 999px; background: #fff; color: var(--dv2-ink);
  font-family: var(--dv2-font); font-size: 15px; line-height: 1.2; font-weight: 600;
  white-space: nowrap; text-decoration: none; cursor: pointer;
}
.dv2 .dv2-chip:hover { color: var(--dv2-ink); background: var(--dv2-surface); }
.dv2 .dv2-chip.is-active, .dv2 .dv2-chip[aria-pressed="true"], .dv2 .dv2-chip[aria-selected="true"], .dv2 .dv2-chip[aria-current="page"] {
  border: 1.5px solid var(--dv2-accent); background: var(--dv2-accent-soft); color: var(--dv2-accent-ink); font-weight: 800;
}
.dv2 .dv2-chip__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box;
  border-radius: 999px; background: var(--dv2-accent); color: #fff; font-size: 13px; font-weight: 800;
}

/* segmented control (section tabs). Links or buttons. --fill = equal columns, --sub = pill chips */
.dv2 .dv2-seg {
  display: flex; gap: 6px; margin: 0; padding: 8px 16px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.dv2 .dv2-seg::-webkit-scrollbar { display: none; }
.dv2 .dv2-seg__item {
  flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  box-sizing: border-box; min-height: 44px; padding: 0 14px; margin: 0;
  border: 1px solid var(--dv2-outline); border-radius: 12px; background: #fff; color: var(--dv2-ink);
  font-family: var(--dv2-font); font-size: 15px; line-height: 1.2; font-weight: 600;
  white-space: nowrap; text-decoration: none; cursor: pointer;
}
.dv2 .dv2-seg__item:hover { color: var(--dv2-ink); background: var(--dv2-surface); }
.dv2 .dv2-seg__item.is-active, .dv2 .dv2-seg__item[aria-current="page"], .dv2 .dv2-seg__item[aria-selected="true"], .dv2 .dv2-seg__item[aria-pressed="true"] {
  border: 2px solid var(--dv2-accent); background: var(--dv2-accent-soft); color: var(--dv2-accent-ink); font-weight: 800;
}
.dv2 .dv2-seg--fill { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; overflow: visible; }
.dv2 .dv2-seg--fill .dv2-seg__item { white-space: normal; text-align: center; padding: 4px 8px; }
.dv2 .dv2-seg--sub { padding-top: 0; }
.dv2 .dv2-seg--sub .dv2-seg__item { flex: 0 0 auto; border-radius: 999px; }
.dv2 .dv2-seg__count { font-weight: 700; color: var(--dv2-text3); }

/* badge (count), dot, tag, status */
.dv2 .dv2-badge {
  display: inline-block; box-sizing: border-box;
  min-width: 22px; height: 22px; padding: 0 5px;
  border: 2px solid #fff; border-radius: 999px; background: var(--dv2-accent); color: #fff;
  font-family: var(--dv2-font); font-size: 12px; line-height: 18px; font-weight: 800;
  text-align: center; white-space: nowrap; vertical-align: middle;
}
.dv2 .dv2-dot {
  display: inline-block; box-sizing: border-box; width: 12px; height: 12px;
  border: 2px solid #fff; border-radius: 999px; background: var(--dv2-accent); vertical-align: middle;
}
.dv2 .dv2-dot--online { background: var(--dv2-online); }
.dv2 .dv2-dot--plain { width: 8px; height: 8px; border: 0; }
.dv2 .dv2-tag {
  display: inline-flex; align-items: center; height: 28px; padding: 0 8px; box-sizing: border-box;
  border-radius: 999px; background: var(--dv2-accent-soft); color: var(--dv2-accent-ink);
  font-size: 13px; font-weight: 800; line-height: 1; white-space: nowrap;
}
.dv2 .dv2-tag--solid { background: var(--dv2-accent); color: #fff; }
.dv2 .dv2-tag--bonus { background: var(--dv2-bonus-bg); color: var(--dv2-bonus); }
.dv2 .dv2-status {
  display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px 0 9px; box-sizing: border-box;
  border: 1px solid var(--dv2-divider); border-radius: 999px; background: #fff; color: var(--dv2-text3);
  font-size: 14px; font-weight: 700; line-height: 1; white-space: nowrap;
}
.dv2 .dv2-status::before {
  content: ""; flex: none; width: 8px; height: 8px; box-sizing: border-box;
  border: 2px solid var(--dv2-outline); border-radius: 999px;
}
.dv2 .dv2-status--online { color: var(--dv2-online-text); }
.dv2 .dv2-status--online::before { border: 0; background: var(--dv2-online); }
.dv2 .dv2-status--recent { color: var(--dv2-text3); }
.dv2 .dv2-status--overlay { height: 26px; border: 0; font-size: 13px; pointer-events: none; }

/* avatar: <span class="dv2-avatar"><img alt=""><span class="dv2-avatar__dot"></span></span> (dot only when online) */
.dv2 .dv2-avatar {
  position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 999px; background: var(--dv2-placeholder); color: var(--dv2-placeholder-ink);
}
.dv2 .dv2-avatar > img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.dv2 .dv2-avatar--sm { width: 42px; height: 42px; }
.dv2 .dv2-avatar--lg { width: 72px; height: 72px; }
.dv2 .dv2-avatar--xl { width: 96px; height: 96px; }
.dv2 .dv2-avatar__dot {
  position: absolute; right: 0; bottom: 1px; width: 16px; height: 16px; box-sizing: border-box;
  border: 2.5px solid #fff; border-radius: 999px; background: var(--dv2-online);
}
.dv2 .dv2-avatar--sm .dv2-avatar__dot { width: 14px; height: 14px; }

/* panel (generic white container; .dv2-card is left free for the discovery area) */
.dv2 .dv2-panel { box-sizing: border-box; padding: 16px; border: 1px solid var(--dv2-divider); border-radius: 14px; background: #fff; }
.dv2 .dv2-panel--flat { border-color: transparent; background: var(--dv2-surface); }
.dv2 .dv2-panel--raised { border-color: transparent; box-shadow: var(--dv2-shadow-card); }
.dv2 .dv2-panel--flush { padding: 0; overflow: hidden; }

/* list rows: <ul class="dv2-list"><li><a class="dv2-row" href>…</a></li></ul> */
.dv2 .dv2-list { margin: 0; padding: 0; list-style: none; background: #fff; }
.dv2 .dv2-list--card { border: 1px solid var(--dv2-divider); border-radius: 14px; overflow: hidden; }
.dv2 .dv2-row {
  position: relative; display: flex; align-items: center; gap: 12px;
  box-sizing: border-box; width: 100%; min-height: 56px; padding: 8px 16px; margin: 0;
  border: 0; background: #fff; color: var(--dv2-ink);
  font-family: var(--dv2-font); font-size: 16px; text-align: left; text-decoration: none;
}
.dv2 a.dv2-row:hover, .dv2 button.dv2-row:hover, .dv2 label.dv2-row:hover { background: var(--dv2-surface); color: var(--dv2-ink); }
.dv2 .dv2-list > li + li > .dv2-row::before, .dv2 .dv2-list > .dv2-row + .dv2-row::before {
  content: ""; position: absolute; top: 0; left: 16px; right: 0; border-top: 1px solid var(--dv2-divider);
}
.dv2 .dv2-list--avatars > li + li > .dv2-row::before, .dv2 .dv2-list--avatars > .dv2-row + .dv2-row::before { left: 84px; }
.dv2 .dv2-row--lg { min-height: 76px; }
.dv2 .dv2-row__icon {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 999px; background: var(--dv2-accent-soft); color: var(--dv2-accent-ink);
}
.dv2 .dv2-row__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dv2 .dv2-row__title { font-size: 17px; line-height: 1.25; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv2 .dv2-row__sub { font-size: 15px; line-height: 1.3; color: var(--dv2-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv2 .dv2-row__end { flex: none; display: flex; align-items: center; gap: 6px; color: var(--dv2-muted); font-size: 15px; font-weight: 600; }
.dv2 .dv2-row__chevron { flex: none; color: var(--dv2-outline); }
.dv2 .dv2-row--danger { color: var(--dv2-danger); }

/* form controls */
.dv2 .dv2-field { display: flex; flex-direction: column; gap: 8px; margin: 0 0 16px; }
.dv2 .dv2-label { margin: 0; font-size: 15px; line-height: 1.3; font-weight: 800; color: var(--dv2-ink); }
.dv2 .dv2-hint { margin: 0; font-size: 14px; line-height: 1.35; color: var(--dv2-text3); }
.dv2 .dv2-error-text { margin: 0; font-size: 14px; line-height: 1.35; font-weight: 700; color: var(--dv2-danger); }
.dv2 .dv2-input, .dv2 .dv2-select, .dv2 .dv2-textarea {
  box-sizing: border-box; width: 100%; min-height: 48px; margin: 0; padding: 0 14px;
  border: 1.5px solid var(--dv2-outline); border-radius: 12px; background-color: #fff; color: var(--dv2-ink);
  font-family: var(--dv2-font); font-size: 16px; line-height: 1.3; font-weight: 600;
  -webkit-appearance: none; appearance: none;
}
.dv2 .dv2-textarea { min-height: 96px; padding: 12px 14px; font-weight: 400; line-height: 1.4; resize: vertical; }
.dv2 .dv2-select {
  padding-right: 40px; font-weight: 700; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c1a22' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 18px 18px;
}
.dv2 .dv2-input::placeholder, .dv2 .dv2-textarea::placeholder { color: var(--dv2-muted); font-weight: 400; opacity: 1; }
.dv2 .dv2-input:focus, .dv2 .dv2-select:focus, .dv2 .dv2-textarea:focus {
  border-color: var(--dv2-accent); outline: 0; box-shadow: 0 0 0 3px rgba(var(--dv2-accent-rgb), 0.22);
}
.dv2 .dv2-input[aria-invalid="true"], .dv2 .dv2-input.is-invalid, .dv2 .dv2-select[aria-invalid="true"], .dv2 .dv2-textarea[aria-invalid="true"] { border-color: var(--dv2-danger); }
.dv2 .dv2-input:disabled, .dv2 .dv2-select:disabled, .dv2 .dv2-textarea:disabled { background-color: var(--dv2-surface); color: var(--dv2-muted); }
.dv2 .dv2-inputwrap { position: relative; display: flex; align-items: center; }
.dv2 .dv2-inputwrap > .dv2-icon { position: absolute; left: 12px; color: var(--dv2-muted); pointer-events: none; }
.dv2 .dv2-inputwrap > .dv2-input { padding-left: 40px; }

/* option tiles (radio / checkbox): <label class="dv2-option"><input class="dv2-option__input" type="radio" …><span class="dv2-option__body">…</span></label> */
.dv2 .dv2-options { display: grid; grid-template-columns: repeat(var(--dv2-cols, 3), minmax(0, 1fr)); gap: 6px; }
.dv2 .dv2-options--stack { grid-template-columns: 1fr; }
.dv2 .dv2-option { position: relative; display: block; margin: 0; cursor: pointer; }
.dv2 .dv2-option__input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; }
.dv2 .dv2-option__body {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  box-sizing: border-box; min-height: 44px; height: 100%; padding: 0 12px;
  border: 1px solid var(--dv2-outline); border-radius: 12px; background: #fff; color: var(--dv2-ink);
  font-size: 15px; line-height: 1.2; font-weight: 600; text-align: center;
}
.dv2 .dv2-option__input:checked + .dv2-option__body {
  border: 2px solid var(--dv2-accent); background: var(--dv2-accent-soft); color: var(--dv2-accent-ink); font-weight: 800;
}
.dv2 .dv2-option__input:focus-visible + .dv2-option__body { outline: 3px solid var(--dv2-focus); outline-offset: 2px; }
.dv2 .dv2-option__input:disabled + .dv2-option__body { opacity: .5; cursor: not-allowed; }
.dv2 .dv2-option--row .dv2-option__body { justify-content: flex-start; min-height: 56px; padding: 8px 12px 8px 11px; border-radius: 14px; text-align: left; }
.dv2 .dv2-option__input:checked + .dv2-option__body .dv2-option__main { color: var(--dv2-ink); }
.dv2 .dv2-option__radio {
  flex: none; width: 22px; height: 22px; box-sizing: border-box;
  border: 2px solid var(--dv2-outline); border-radius: 999px; background: #fff;
}
.dv2 .dv2-option__input:checked + .dv2-option__body .dv2-option__radio { border: 6.5px solid var(--dv2-accent); }
.dv2 .dv2-option__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.dv2 .dv2-option__end { flex: none; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.dv2 .dv2-option__title { font-size: 16px; font-weight: 800; }
.dv2 .dv2-option__sub { font-size: 14px; font-weight: 500; color: var(--dv2-text3); }

/* switch: <label class="dv2-switch"><span class="dv2-switch__text">…</span><input class="dv2-switch__input" type="checkbox" role="switch"><span class="dv2-switch__track" aria-hidden="true"></span></label> */
.dv2 .dv2-switch {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 56px; margin: 0; cursor: pointer;
}
.dv2 .dv2-switch__text { display: flex; flex-direction: column; line-height: 1.25; }
.dv2 .dv2-switch__title { font-size: 16px; font-weight: 700; }
.dv2 .dv2-switch__sub { font-size: 14px; color: var(--dv2-text3); }
.dv2 .dv2-switch__input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; }
.dv2 .dv2-switch__track {
  position: relative; flex: none; width: 52px; height: 32px; box-sizing: border-box;
  border: 1.5px solid var(--dv2-outline); border-radius: 999px; background: #fff;
  transition: background-color .15s ease, border-color .15s ease;
}
.dv2 .dv2-switch__track::after {
  content: ""; position: absolute; top: 4.5px; left: 4.5px; width: 20px; height: 20px;
  border-radius: 999px; background: var(--dv2-outline); transition: transform .15s ease, background-color .15s ease;
}
.dv2 .dv2-switch__input:checked + .dv2-switch__track { background: var(--dv2-accent); border-color: var(--dv2-accent); }
.dv2 .dv2-switch__input:checked + .dv2-switch__track::after { transform: translateX(20px); background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }
.dv2 .dv2-switch__input:focus-visible + .dv2-switch__track { outline: 3px solid var(--dv2-focus); outline-offset: 2px; }
.dv2 .dv2-switch__input:disabled + .dv2-switch__track { opacity: .5; }

/* banners (status messages in a page; add role="status" or role="alert") */
.dv2 .dv2-banner {
  display: flex; align-items: flex-start; gap: 10px; box-sizing: border-box;
  margin: 0; padding: 12px 14px; border-radius: 14px;
  background: var(--dv2-surface); color: var(--dv2-ink); font-size: 15px; line-height: 1.4;
}
.dv2 .dv2-banner > .dv2-icon { margin-top: 1px; }
.dv2 .dv2-banner__title { display: block; font-weight: 800; }
.dv2 .dv2-banner--success { background: var(--dv2-bonus-bg); color: var(--dv2-bonus); }
.dv2 .dv2-banner--info { background: var(--dv2-info-bg); color: var(--dv2-info); }
.dv2 .dv2-banner--warn { background: var(--dv2-warn-bg); color: var(--dv2-warn); }
.dv2 .dv2-banner--error { background: var(--dv2-danger-bg); color: #a42424; }
.dv2 .dv2-banner--accent { background: var(--dv2-accent-soft); color: var(--dv2-accent-ink); }

/* toast (area-owned, one at a time): <div class="dv2-toast" role="status" hidden>…</div>; JS toggles [hidden] */
.dv2 .dv2-toast {
  position: fixed; left: 12px; right: 12px; top: calc(var(--dv2-safe-top) + 8px); z-index: var(--dv2-z-toast);
  display: flex; align-items: center; gap: 10px; box-sizing: border-box;
  max-width: 440px; margin: 0 auto; padding: 12px 16px; border-radius: 14px;
  background: var(--dv2-ink); color: #fff; font-size: 15px; line-height: 1.35; font-weight: 600;
  box-shadow: var(--dv2-shadow-pop);
  animation: dv2-fade-in .2s ease-out;
}
.dv2 .dv2-toast--success { background: var(--dv2-bonus-bg); color: var(--dv2-bonus); }
.dv2 .dv2-toast--error { background: var(--dv2-danger); color: #fff; }

/* empty state */
.dv2 .dv2-empty {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 48px 24px; text-align: center; color: var(--dv2-text2);
}
.dv2 .dv2-empty__icon {
  display: flex; align-items: center; justify-content: center; width: 64px; height: 64px;
  border-radius: 999px; background: var(--dv2-accent-soft); color: var(--dv2-accent-ink);
}
.dv2 .dv2-empty__title { margin: 0; font-family: var(--dv2-font-display); font-size: 22px; line-height: 1.2; font-weight: 700; color: var(--dv2-ink); }
.dv2 .dv2-empty__text { margin: 0; max-width: 34ch; font-size: 16px; line-height: 1.45; }

/* bottom sheet + scrim (area-owned, toggled with the [hidden] attribute; opening animates).
   <div class="dv2-scrim" hidden></div>
   <section class="dv2-sheet" role="dialog" aria-modal="true" aria-labelledby="…" hidden>
     <div class="dv2-sheet__handle" aria-hidden="true"></div>
     <div class="dv2-sheet__head">[close .dv2-iconbtn] <h2 class="dv2-sheet__title" id="…">…</h2> <span></span></div>
     <div class="dv2-sheet__body">…</div>
     <div class="dv2-sheet__foot">[buttons]</div>
   </section> */
.dv2 .dv2-scrim {
  position: fixed; inset: 0; z-index: calc(var(--dv2-z-sheet) - 1);
  background: var(--dv2-scrim);
  animation: dv2-fade-in .2s ease-out;
}
.dv2 .dv2-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--dv2-z-sheet);
  display: flex; flex-direction: column; box-sizing: border-box;
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - var(--dv2-safe-top) - 24px);
  padding-bottom: var(--dv2-safe-bottom);
  background: #fff; color: var(--dv2-ink);
  border-radius: 22px 22px 0 0; box-shadow: var(--dv2-shadow-sheet);
  overscroll-behavior: contain;
  animation: dv2-sheet-in .24s cubic-bezier(.2, .8, .2, 1);
}
.dv2 .dv2-sheet--tall { top: calc(var(--dv2-safe-top) + 48px); max-height: none; }
.dv2 .dv2-sheet__handle { flex: none; width: 40px; height: 5px; margin: 8px auto 0; border-radius: 999px; background: var(--dv2-handle); }
.dv2 .dv2-sheet__head { flex: none; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; min-height: 52px; padding: 0 8px; }
.dv2 .dv2-sheet__head--start { display: block; padding: 10px 16px; }
.dv2 .dv2-sheet__title { margin: 0; text-align: center; font-family: var(--dv2-font-display); font-size: 22px; line-height: 1.15; font-weight: 700; }
.dv2 .dv2-sheet__head--start .dv2-sheet__title { text-align: left; }
.dv2 .dv2-sheet__sub { margin: 4px 0 0; font-size: 15px; line-height: 1.35; color: var(--dv2-text2); }
.dv2 .dv2-sheet__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 16px 16px; -webkit-overflow-scrolling: touch; }
.dv2 .dv2-sheet__foot { flex: none; display: flex; gap: 10px; padding: 12px 16px 14px; border-top: 1px solid var(--dv2-divider); background: #fff; }
.dv2 .dv2-sheet__foot > .dv2-btn { flex: 1 1 0; }
@media (min-width: 768px) {
  .dv2 .dv2-sheet, .dv2 .dv2-sheet--tall {
    left: 50%; right: auto; top: 50%; bottom: auto;
    width: min(560px, calc(100vw - 32px)); max-height: min(86vh, 760px);
    padding-bottom: 0; border-radius: 22px;
    transform: translate(-50%, -50%);
    animation-name: dv2-pop-in;
  }
  .dv2 .dv2-sheet__handle { display: none; }
}
@keyframes dv2-sheet-in { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes dv2-pop-in { from { opacity: 0; transform: translate(-50%, -47%) scale(.98); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes dv2-fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .dv2 .dv2-sheet, .dv2 .dv2-scrim, .dv2 .dv2-toast { animation: none; }
  .dv2 .modal.fade .modal-dialog { transition: none; }
}

/* ------------------------------------------------------------------ 8. Legacy skin ((b) pages copied from view/dating) */
.dv2 .head-title { background: #fff; box-shadow: none; text-align: left; z-index: auto; padding-top: 0 !important; }
.dv2:not(.dv2-shell-guest) .head-title > h2, .dv2:not(.dv2-shell-guest) .head-title > .h2 { display: none; } /* the app bar shows the title */
.dv2 .head-title ul.nav {
  flex-wrap: nowrap; justify-content: flex-start; gap: 8px; margin: 0; padding: 8px 16px;
  overflow-x: auto; scrollbar-width: none;
}
.dv2 .head-title ul.nav::-webkit-scrollbar { display: none; }
.dv2 .head-title .nav-link, .dv2 .nav-link.sub-active {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--dv2-outline); border-radius: 999px; background: #fff; color: var(--dv2-ink);
  font-size: 15px; font-weight: 600; white-space: nowrap; text-decoration: none;
}
.dv2 .head-title .nav-link.active, .dv2 .nav-link.sub-active {
  border: 1.5px solid var(--dv2-accent); background: var(--dv2-accent-soft); color: var(--dv2-accent-ink); font-weight: 800;
}
.dv2 .text { font-size: 16px; line-height: 1.55; }

/* Bootstrap buttons */
.dv2 .btn {
  min-height: 44px; padding: .6rem 1.25rem; border-radius: 999px;
  font-size: 16px; font-weight: 700; line-height: 1.5;
  --bs-btn-focus-shadow-rgb: var(--dv2-accent-rgb);
}
.dv2 .btn-sm { min-height: 44px; padding: .5rem 1rem; font-size: 15px; }
.dv2 .btn-lg { min-height: 56px; border-radius: 16px; font-size: 17.5px; font-weight: 800; }
.dv2 .btn-primary, .dv2 .btn-success, .dv2 .btn-info {
  --bs-btn-color: #fff; --bs-btn-bg: var(--dv2-accent); --bs-btn-border-color: var(--dv2-accent);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--dv2-accent-dark); --bs-btn-hover-border-color: var(--dv2-accent-dark);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--dv2-accent-dark); --bs-btn-active-border-color: var(--dv2-accent-dark);
  --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--dv2-accent); --bs-btn-disabled-border-color: var(--dv2-accent);
}
.dv2 .btn-secondary, .dv2 .btn-light {
  --bs-btn-color: var(--dv2-ink); --bs-btn-bg: #fff; --bs-btn-border-color: var(--dv2-outline);
  --bs-btn-hover-color: var(--dv2-ink); --bs-btn-hover-bg: var(--dv2-surface); --bs-btn-hover-border-color: var(--dv2-outline);
  --bs-btn-active-color: var(--dv2-ink); --bs-btn-active-bg: var(--dv2-surface); --bs-btn-active-border-color: var(--dv2-outline);
  --bs-btn-disabled-color: var(--dv2-muted); --bs-btn-disabled-bg: #fff; --bs-btn-disabled-border-color: var(--dv2-divider);
  border-width: 1.5px;
}
.dv2 .btn-danger {
  --bs-btn-bg: var(--dv2-danger); --bs-btn-border-color: var(--dv2-danger);
  --bs-btn-hover-bg: #a42424; --bs-btn-hover-border-color: #a42424;
  --bs-btn-active-bg: #a42424; --bs-btn-active-border-color: #a42424;
}
.dv2 .btn-outline-primary {
  --bs-btn-color: var(--dv2-accent-ink); --bs-btn-border-color: var(--dv2-accent);
  --bs-btn-hover-bg: var(--dv2-accent); --bs-btn-hover-border-color: var(--dv2-accent);
  --bs-btn-active-bg: var(--dv2-accent-dark); --bs-btn-active-border-color: var(--dv2-accent-dark);
}
.dv2 .btn-link { --bs-btn-color: var(--dv2-accent-ink); --bs-btn-hover-color: var(--dv2-accent-dark); font-weight: 700; }
.dv2 .btn-close { box-sizing: border-box; width: 44px; height: 44px; padding: 0; background-size: 14px 14px; background-position: center; opacity: .7; }
.dv2 .btn-close:hover { opacity: 1; }

/* Bootstrap forms */
.dv2 .form-control, .dv2 .form-select {
  min-height: 48px; border: 1.5px solid var(--dv2-outline); border-radius: 12px;
  color: var(--dv2-ink); background-color: #fff;
}
.dv2 textarea.form-control { min-height: 96px; }
.dv2 .form-control:focus, .dv2 .form-select:focus { border-color: var(--dv2-accent); box-shadow: 0 0 0 3px rgba(var(--dv2-accent-rgb), 0.22); }
.dv2 .form-control.is-invalid, .dv2 .form-select.is-invalid { border-color: var(--dv2-danger); }
.dv2 .form-label, .dv2 .col-form-label { font-size: 15px; font-weight: 700; color: var(--dv2-ink); }
.dv2 .form-text { font-size: 14px; color: var(--dv2-text3); }
.dv2 .form-check { min-height: 28px; padding-left: 2em; margin-bottom: .5rem; }
.dv2 .form-check .form-check-input { margin-left: -2em; }
.dv2 .form-switch { padding-left: 3.25em; }
.dv2 .form-switch .form-check-input { margin-left: -3.25em; width: 2.6em; }
.dv2 .form-check-input { width: 1.35em; height: 1.35em; margin-top: .1em; border: 1.5px solid var(--dv2-outline); }
.dv2 .form-check-input:checked { background-color: var(--dv2-accent); border-color: var(--dv2-accent); }
.dv2 .form-check-input:focus { border-color: var(--dv2-accent); box-shadow: 0 0 0 3px rgba(var(--dv2-accent-rgb), 0.22); }
.dv2 .form-check-label { font-size: 16px; }
.dv2 .input-group > .form-control, .dv2 .input-group > .form-select { border-radius: 12px; }

/* Bootstrap misc */
.dv2 .dropdown-menu {
  --bs-dropdown-font-size: 16px;
  --bs-dropdown-border-color: var(--dv2-divider);
  --bs-dropdown-border-radius: 14px;
  --bs-dropdown-padding-y: 6px;
  --bs-dropdown-link-color: var(--dv2-ink);
  --bs-dropdown-link-hover-color: var(--dv2-ink);
  --bs-dropdown-link-hover-bg: var(--dv2-surface);
  --bs-dropdown-link-active-color: var(--dv2-accent-ink);
  --bs-dropdown-link-active-bg: var(--dv2-accent-soft);
  box-shadow: var(--dv2-shadow-pop);
}
.dv2 .dropdown-item { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 16px; font-weight: 600; white-space: normal; }
.dv2 .alert { border-radius: 12px; font-size: 15px; }
.dv2 .list-group-item { padding-top: 12px; padding-bottom: 12px; font-size: 16px; }
.dv2 .pagination { --bs-pagination-active-bg: var(--dv2-accent); --bs-pagination-active-border-color: var(--dv2-accent); --bs-pagination-color: var(--dv2-accent-ink); --bs-pagination-hover-color: var(--dv2-accent-dark); }
.dv2 .page-link { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }
.dv2 .dot-online { background-color: var(--dv2-online); }
.dv2 .text-primary { color: var(--dv2-accent-ink) !important; }
.dv2 .bg-primary { background-color: var(--dv2-accent) !important; }

/* Bootstrap modals (report / block / thanks / delete photo): bottom sheet on phones, CSS only.
   The scrim is painted on .modal.show itself; .modal-backdrop stays hidden (style.css) on purpose. */
.dv2 .modal.fade.show, .dv2 .modal.show { background: var(--dv2-scrim); }
.dv2 .modal-content { border: 0; border-radius: 22px; box-shadow: var(--dv2-shadow-pop); }
.dv2 .modal-header { align-items: flex-start; padding: 16px 12px 4px 16px; border-bottom: 0; }
.dv2 .modal-title { font-family: var(--dv2-font-display); font-size: 22px; line-height: 1.2; font-weight: 700; padding-top: 8px; }
.dv2 .modal-header .btn-close { margin: -4px -4px 0 auto; }
.dv2 .modal-body { padding: 8px 16px 12px; font-size: 16px; }
.dv2 .modal-footer { gap: 8px; padding: 8px 16px 16px; border-top: 0; }
.dv2 .modal-footer > .btn { flex: 1 1 0; margin: 0; }
@media (max-width: 575.98px) {
  .dv2 .modal-dialog {
    position: fixed; left: 0; right: 0; bottom: 0;
    width: auto; max-width: none; min-height: 0; margin: 0;
  }
  .dv2 .modal.fade .modal-dialog { transform: translateY(100%); transition: transform .24s cubic-bezier(.2, .8, .2, 1); }
  .dv2 .modal.show .modal-dialog { transform: none; }
  .dv2 .modal-content {
    max-height: calc(100vh - 32px); max-height: calc(100dvh - var(--dv2-safe-top) - 32px); overflow-y: auto;
    border-radius: 22px 22px 0 0; padding-bottom: var(--dv2-safe-bottom);
  }
  .dv2 .modal-content::before {  /* grab handle; a pseudo element does not change the .modal-content nth-child step logic */
    content: ""; display: block; flex: none; width: 40px; height: 5px; margin: 8px auto 0;
    border-radius: 999px; background: var(--dv2-handle);
  }
}

/* main2.js toasts (#alert-box): top of the screen, clear of the tab bar and the chat composer */
.dv2 #alert-box {
  position: fixed; z-index: var(--dv2-z-toast);
  top: calc(var(--dv2-safe-top) + 8px); bottom: auto; left: 12px; right: 12px;
  display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none;
}
.dv2 #alert-box .toast {
  position: relative; width: 100%; max-width: 420px; min-width: 0; pointer-events: auto;
  background: #fff; border: 1px solid var(--dv2-divider); border-radius: 14px; box-shadow: var(--dv2-shadow-pop);
  font-size: 15px;
}
.dv2 #alert-box .toast-header { position: absolute; top: 2px; right: 2px; z-index: 1; padding: 0; background: transparent; border: 0; }
.dv2 #alert-box .toast-body {
  align-items: center; gap: 12px; padding: 10px 52px 10px 10px !important;
  color: var(--dv2-ink); font-weight: 600; text-decoration: none;
}
.dv2 #alert-box .toast-body img { flex: none; width: 44px; height: 44px; margin: 0; border-radius: 999px; object-fit: cover; }
.dv2 #alert-box .toast-body .alert-info { padding: 0; border: 0; color: var(--dv2-ink); background: transparent; }
@media (min-width: 992px) {
  .dv2 #alert-box { left: auto; right: 16px; top: 16px; width: 380px; align-items: stretch; }
}

/* ------------------------------------------------------------------ 9. Review fixes (2026-09-28) */
/* Chip rows scroll sideways: make the scroller the containing block, or absolutely positioned children
   (Bootstrap .visually-hidden labels inside off-screen chips) escape its clip and widen the whole page. */
.dv2 .dv2-chips { position: relative; }

/* Sheets are only a programmatic focus target (tabindex=-1, their heading labels them): no 3px ring round the sheet. */
.dv2 .dv2-sheet:focus-visible { outline: none; }

/* Guest skin page (/p/<hash> logged out): the untouched legacy guest navbar keeps its Bootstrap buttons
   (the legacy skin above would turn "Login"/"Registrieren" into 44px pills with the text stuck to the top). */
.dv2.dv2-shell-guest .navbar .btn {
  min-height: 0; border-radius: var(--bs-btn-border-radius); line-height: var(--bs-btn-line-height);
  font-size: var(--bs-btn-font-size); font-weight: var(--bs-btn-font-weight);
}

/* App bar title: 27px (23px detail) as on the 390px boards, scaled down only on narrower phones. */
.dv2 .dv2-appbar__title { font-size: clamp(22px, 6.93vw, 27px); }
.dv2 .dv2-appbar--detail .dv2-appbar__title { font-size: clamp(20px, 5.9vw, 23px); }
@media (max-width: 374px) {
  .dv2 .dv2-tab__label { padding: 0; }
}
@media (min-width: 992px) {
  .dv2 .dv2-appbar__title { font-size: 27px; }
  .dv2 .dv2-appbar--detail .dv2-appbar__title { font-size: 23px; }
}

/* Desktop: inset the full-width app bar to the page's content column, so title and actions line up with the content.
   Column widths: discovery / lists / other pages 1080, profile + settings (.dv2-wrap) 720, credits 600. */
.dv2 { --dv2-col: 1080px; }
.dv2.dv2-area-profile { --dv2-col: 720px; }
.dv2.dv2-area-credits { --dv2-col: 600px; }
@media (min-width: 992px) {
  .dv2:not(.dv2-ct1) .dv2-appbar {
    padding-left: max(16px, calc((100% - var(--dv2-col)) / 2 + 16px));
    padding-right: max(10px, calc((100% - var(--dv2-col)) / 2 + 10px));
  }
  .dv2:not(.dv2-ct1) .dv2-appbar--back { padding-left: max(2px, calc((100% - var(--dv2-col)) / 2 + 2px)); }
  .dv2:not(.dv2-ct1) .dv2-appbar--detail { padding-right: max(6px, calc((100% - var(--dv2-col)) / 2 + 6px)); }
}
/* Profil-tab pages (⋮ account menu + pill): on phones the pill drops its visible unit (still read out), like the chat
   header's compact pill, so titles such as "Einstellungen" / "Geheimes Album" are not cut. */
@media (max-width: 479px) {
  .dv2 .dv2-appbar__actions .dv2-menu ~ .dv2-credits .dv2-credits__unit {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
}
/* long Profil-tab titles ("Geheimes Album", "Album secret"): a little smaller on phones instead of "Geheimes …" */
@media (max-width: 479px) {
  .dv2 .dv2-appbar__title--long { font-size: clamp(20px, 6.15vw, 24px); }
}
.dv2 .dv2-appbar__link--icon { width: 44px; padding: 0; justify-content: center; }

/* ------------------------------------------------------------------ 10. Public pages: guest shell + shared public components
   Guest skin pages (dv2_layout() guest branch: areas landing / auth / info, plus /p/<hash>) render
     body.dv2.dv2-shell-guest > a.dv2-skip, header.dv2-pub-bar, #installContainer, main.dv2-pub-main#dv2Main, footer.dv2-pub-foot
   (_guestbar.php / _guestfooter.php). The components below are shared by the landing, auth and info areas; they are plain
   .dv2-scoped classes, so hybrid views (legal, help, 404, reset, email …) look the same in the logged-in shells.
   Legacy style2.css + theme_<app>.css stay loaded on guest pages: never use .navbar*, .intro, .landing, .pwa-install here.
   Boards: design/public/final (DESIGN-NOTES.md §4 tokens, §5 components). */
.dv2 {
  --dv2-pub-bar-h: 56px;
  --dv2-pub-gutter: 16px;
  --dv2-pub-max: 1120px;                                  /* content width (80px side margins at 1280) */
  --dv2-pub-shadow-hero: 0 1px 2px rgba(28, 26, 34, 0.06), 0 8px 24px rgba(28, 26, 34, 0.07);
  --dv2-pub-shadow-dialog: 0 24px 60px rgba(22, 18, 28, 0.3);
  --dv2-pub-notch: #fff;                                  /* gift-ticket notches = colour of the ground the ticket sits on */
}
@media (min-width: 600px) {
  .dv2 { --dv2-pub-gutter: 24px; }
}
@media (min-width: 992px) {
  .dv2 {
    --dv2-pub-bar-h: 72px;
    --dv2-pub-gutter: 32px;
    --dv2-pub-shadow-hero: 0 1px 2px rgba(28, 26, 34, 0.06), 0 10px 30px rgba(28, 26, 34, 0.08);
  }
}

/* guest body: the sticky bar replaces the legacy fixed navbar (style2.css body padding-top 49px); footer sits at the bottom */
.dv2.dv2-shell-guest {
  padding-top: 0;
  display: flex; flex-direction: column;
  min-height: 100vh; min-height: 100dvh;
}
.dv2 .dv2-pub-main { display: block; flex: 1 0 auto; width: 100%; min-width: 0; }
.dv2 .dv2-pub-main:focus { outline: 0; }

/* public app bar: header.dv2-pub-bar.dv2-pub-bar--landing|login|compact|brand > .dv2-pub-bar__in > brand + actions */
.dv2 .dv2-pub-bar {
  position: sticky; top: 0; z-index: var(--dv2-z-bar);
  flex: none;
  padding-top: var(--dv2-safe-top);                       /* black-translucent status bar in the installed app */
  background: #fff;
  border-bottom: 1px solid var(--dv2-divider);
}
.dv2 .dv2-pub-bar__in {
  box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; max-width: calc(var(--dv2-pub-max) + 2 * var(--dv2-pub-gutter)); height: var(--dv2-pub-bar-h);
  margin: 0 auto; padding: 0 calc(var(--dv2-pub-gutter) - 6px) 0 var(--dv2-pub-gutter);
}
.dv2 .dv2-pub-bar__brand {
  flex: none; display: inline-flex; align-items: center; gap: 8px; min-width: 44px; min-height: 44px;
  color: var(--dv2-accent-ink); text-decoration: none;
}
.dv2 .dv2-pub-logo { display: block; width: auto; height: 27px; max-width: 160px; object-fit: contain; object-position: left center; }
.dv2 .dv2-pub-mark { display: block; width: 32px; height: 32px; object-fit: contain; }
.dv2 .dv2-pub-brandtext {
  font-family: var(--dv2-font-display); font-size: 22px; line-height: 1; font-weight: 800; letter-spacing: -0.01em;
  color: var(--dv2-accent-ink); white-space: nowrap;
}
.dv2 .dv2-pub-bar__actions { display: flex; align-items: center; gap: 2px; min-width: 0; }
.dv2 .dv2-pub-bar__hint { margin-right: 6px; font-size: 15px; color: var(--dv2-text2); white-space: nowrap; }
@media (max-width: 767.98px) {
  .dv2 .dv2-pub-bar__hint { display: none; }
}
@media (min-width: 992px) {
  .dv2 .dv2-pub-bar__in { padding-right: var(--dv2-pub-gutter); }
  .dv2 .dv2-pub-logo { height: 34px; max-width: 200px; }
  .dv2 .dv2-pub-bar__actions { gap: 6px; }
}

/* pill link: 44px hit area, 40px visual (--text: text-only variant, e.g. "Einloggen" in the compact bar) */
.dv2 .dv2-pub-pill {
  flex: none; display: inline-flex; align-items: center; min-height: 44px;
  text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.dv2 .dv2-pub-pill__in {
  display: inline-flex; align-items: center; box-sizing: border-box; height: 40px; padding: 0 14px;
  border: 1.5px solid var(--dv2-accent); border-radius: var(--dv2-r-pill); background: #fff; color: var(--dv2-accent-ink);
  font-size: 15px; line-height: 1; font-weight: 800; white-space: nowrap;
  transition: background-color .15s ease;
}
.dv2 .dv2-pub-pill:hover .dv2-pub-pill__in { background: var(--dv2-accent-soft); }
.dv2 .dv2-pub-pill--text .dv2-pub-pill__in { padding: 0 8px; border-color: transparent; background: transparent; color: var(--dv2-text2); }
.dv2 .dv2-pub-pill--text:hover .dv2-pub-pill__in { background: var(--dv2-surface); color: var(--dv2-ink); }
.dv2 .dv2-pub-pill:focus-visible { outline: 0; }
.dv2 .dv2-pub-pill:focus-visible .dv2-pub-pill__in { outline: 3px solid var(--dv2-focus); outline-offset: 2px; }
@media (min-width: 992px) {
  .dv2 .dv2-pub-pill__in { height: 44px; padding: 0 18px; font-size: 16px; }
  .dv2 .dv2-pub-pill--text .dv2-pub-pill__in { padding: 0 10px; }
}

/* language menu: <details class="dv2-pub-lang"><summary class="dv2-pub-lang__btn"> + ul.dv2-pub-lang__panel of real ?lang links.
   Works without JS; datingv2.js closes it on outside click / Esc. */
.dv2 .dv2-pub-lang { position: relative; flex: none; }
.dv2 .dv2-pub-lang__btn {
  display: flex; align-items: center; gap: 5px; box-sizing: border-box; height: 44px; padding: 0 8px;
  border-radius: 12px; color: var(--dv2-text2); font-size: 15px; line-height: 1; font-weight: 700;
  cursor: pointer; list-style: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
.dv2 .dv2-pub-lang__btn::-webkit-details-marker { display: none; }
.dv2 .dv2-pub-lang__btn::marker { content: ""; }
.dv2 .dv2-pub-lang__btn:hover, .dv2 .dv2-pub-lang[open] > .dv2-pub-lang__btn { background: var(--dv2-surface); color: var(--dv2-ink); }
.dv2 .dv2-pub-lang__chev { transition: transform .15s ease; }
.dv2 .dv2-pub-lang[open] .dv2-pub-lang__chev { transform: rotate(180deg); }
.dv2 .dv2-pub-lang__name {   /* phones: read out ("Sprache: Deutsch"), the visible label is the code */
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}
@media (min-width: 992px) {
  .dv2 .dv2-pub-lang__code { display: none; }
  .dv2 .dv2-pub-lang__name { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; }
}
.dv2 .dv2-pub-lang__panel {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 2;
  box-sizing: border-box; min-width: 180px; margin: 0; padding: 6px 0; list-style: none;
  background: #fff; border: 1px solid var(--dv2-divider); border-radius: var(--dv2-r-card); box-shadow: var(--dv2-shadow-pop);
}
.dv2 .dv2-pub-bar--compact .dv2-pub-lang__panel { right: auto; left: 0; }   /* the menu sits mid-bar there: open to the right */
.dv2 .dv2-pub-lang__panel a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 0 14px;
  color: var(--dv2-ink); font-size: 16px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.dv2 .dv2-pub-lang__panel a:hover { background: var(--dv2-surface); color: var(--dv2-ink); }
.dv2 .dv2-pub-lang__panel a[aria-current="true"] { color: var(--dv2-accent-ink); font-weight: 800; }
.dv2 .dv2-pub-lang__panel a:focus-visible { outline-offset: -3px; }

/* PWA install hook (main2.js toggles #installContainer with style.display; never style its display here) */
.dv2 #installContainer { flex: none; box-sizing: border-box; width: 100%; padding: 12px var(--dv2-pub-gutter) 0; }
.dv2 .dv2-pub-install {
  box-sizing: border-box; display: flex; align-items: center; gap: 10px;
  max-width: var(--dv2-pub-max); margin: 0 auto; padding: 10px 4px 10px 10px;
  border-radius: var(--dv2-r-card); background: var(--dv2-surface);
}
.dv2 .dv2-pub-install__icon {
  flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 999px; background: #fff; color: var(--dv2-accent-ink);
}
.dv2 .dv2-pub-install__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.3; }
.dv2 .dv2-pub-install__title { font-size: 15px; font-weight: 800; color: var(--dv2-ink); }
.dv2 .dv2-pub-install__desc { font-size: 14px; color: var(--dv2-text2); }
.dv2 .dv2-pub-install #installButton { flex: none; }
.dv2 .dv2-pub-install #installButton.dv2-btn--outline { min-height: 44px; border-radius: 999px; }   /* landing bar variant */
.dv2 .dv2-pub-install__close { color: var(--dv2-text3); }

/* footer: footer.dv2-pub-foot (full) | footer.dv2-pub-foot.dv2-pub-foot--mini. Visible in the installed app too
   (style2.css: footer { display: none } in display-mode standalone; this class rule wins). */
.dv2 .dv2-pub-foot { display: block; flex: none; margin-top: 40px; background: var(--dv2-surface); color: var(--dv2-text2); font-size: 15px; }
.dv2 .dv2-pub-foot a { color: var(--dv2-text2); text-decoration: none; }
.dv2 .dv2-pub-foot a:hover { color: var(--dv2-ink); text-decoration: underline; }
.dv2 .dv2-pub-foot__in {
  box-sizing: border-box; width: 100%; max-width: calc(var(--dv2-pub-max) + 2 * var(--dv2-pub-gutter));
  margin: 0 auto; padding: 26px var(--dv2-pub-gutter) calc(30px + var(--dv2-safe-bottom));
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "brand" "nav" "langs" "copy"; row-gap: 14px;
}
.dv2 .dv2-pub-foot__brand { grid-area: brand; }
.dv2 .dv2-pub-foot__nav { grid-area: nav; }
.dv2 .dv2-pub-foot__langs { grid-area: langs; }
.dv2 .dv2-pub-foot__logo { display: inline-flex; align-items: center; min-height: 44px; }
.dv2 .dv2-pub-foot__logo .dv2-pub-logo { height: 24px; }
.dv2 .dv2-pub-foot__line { margin: 4px 0 0; max-width: 44ch; font-size: 15px; line-height: 1.5; color: var(--dv2-text2); }
.dv2 .dv2-pub-foot__title { margin: 0; font-size: 15px; line-height: 1.3; font-weight: 800; color: var(--dv2-ink); }
.dv2 .dv2-pub-foot__nav .dv2-pub-foot__title {   /* phones: the link grid needs no heading (still names the nav) */
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}
.dv2 .dv2-pub-foot__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; margin: 0; padding: 0; list-style: none; }
.dv2 .dv2-pub-foot__links a { display: flex; align-items: center; min-height: 44px; font-size: 16px; font-weight: 600; }
.dv2 .dv2-pub-foot__sub { margin: 2px 0 0; font-size: 14px; line-height: 1.4; color: var(--dv2-text3); }
.dv2 .dv2-pub-foot__pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.dv2 .dv2-pub-foot .dv2-pub-langpill {
  display: inline-flex; align-items: center; box-sizing: border-box; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--dv2-outline); border-radius: var(--dv2-r-pill); background: #fff; color: var(--dv2-ink);
  font-size: 15px; font-weight: 600; white-space: nowrap; text-decoration: none;
}
.dv2 .dv2-pub-foot .dv2-pub-langpill:hover { border-color: var(--dv2-accent); color: var(--dv2-accent-ink); text-decoration: none; }
.dv2 .dv2-pub-foot .dv2-pub-langpill[aria-current="true"] {
  border: 1.5px solid var(--dv2-accent); background: var(--dv2-accent-soft); color: var(--dv2-accent-ink); font-weight: 800;
}
.dv2 .dv2-pub-foot__copy { grid-area: copy; margin: 4px 0 0; font-size: 14px; line-height: 1.4; color: var(--dv2-text3); }
.dv2 .dv2-pub-foot__apptest { margin: 0; padding: 0 16px calc(16px + var(--dv2-safe-bottom)); text-align: center; font-size: 14px; }
@media (min-width: 992px) {
  .dv2 .dv2-pub-foot__in {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1.3fr);
    grid-template-areas: "brand nav langs" "copy nav langs";
    grid-template-rows: auto 1fr;
    column-gap: 56px; row-gap: 10px; align-items: start;
    padding-top: 44px; padding-bottom: calc(48px + var(--dv2-safe-bottom));
  }
  .dv2 .dv2-pub-foot__title { font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; }
  .dv2 .dv2-pub-foot__nav .dv2-pub-foot__title { position: static; width: auto; height: auto; margin: 0 0 4px; overflow: visible; clip: auto; }
  .dv2 .dv2-pub-foot__links a { min-height: 40px; font-size: 15px; }
  .dv2 .dv2-pub-foot__copy { margin-top: 0; }
}
.dv2 .dv2-pub-foot--mini { margin-top: 32px; padding: 4px var(--dv2-pub-gutter) calc(16px + var(--dv2-safe-bottom)); background: transparent; text-align: center; }
.dv2 .dv2-pub-foot__mini { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 16px; margin: 0; padding: 0; list-style: none; }
.dv2 .dv2-pub-foot__mini a {
  display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px;
  font-size: 15px; font-weight: 600; color: var(--dv2-text3);
}
@media (max-width: 419.98px) {   /* de: the five links fit one line at 390px */
  .dv2 .dv2-pub-foot__mini { column-gap: 10px; }
}
.dv2 .dv2-pub-foot--mini .dv2-pub-foot__copy { margin: 0; }
.dv2 .dv2-pub-foot--mini .dv2-pub-foot__apptest { padding-bottom: 0; }

/* page layout: .dv2-pub-wrap (1120) | --text (720, reading) | --narrow (480, forms); gutters included */
.dv2 .dv2-pub-wrap {
  box-sizing: border-box; width: 100%; max-width: calc(var(--dv2-pub-max) + 2 * var(--dv2-pub-gutter));
  margin: 0 auto; padding: 0 var(--dv2-pub-gutter);
}
.dv2 .dv2-pub-wrap--text { max-width: calc(720px + 2 * var(--dv2-pub-gutter)); }
.dv2 .dv2-pub-wrap--narrow { max-width: calc(480px + 2 * var(--dv2-pub-gutter)); }

/* auth card: a plain column on phones, a raised card from 600px (login, signup, forgot, reset, email, 404 …) */
.dv2 .dv2-pub-card {
  box-sizing: border-box; width: 100%; max-width: calc(480px + 2 * var(--dv2-pub-gutter));
  margin: 0 auto; padding: 8px var(--dv2-pub-gutter) 16px;
}
@media (min-width: 600px) {
  .dv2 .dv2-pub-card {
    max-width: 528px; margin: 40px auto 0; padding: 32px 40px 36px;
    border: 1px solid var(--dv2-divider); border-radius: var(--dv2-r-sheet); background: #fff; box-shadow: var(--dv2-pub-shadow-hero);
  }
  .dv2 .dv2-pub-card > .dv2-pub-head:first-child { margin-top: 0; }
}

/* page head: .dv2-pub-head > [.dv2-pub-back] [.dv2-pub-eyebrow] h1.dv2-pub-title [p.dv2-pub-lead] (one h1 per page) */
.dv2 .dv2-pub-head { margin: 24px 0 20px; }
.dv2 .dv2-pub-eyebrow {
  display: block; margin: 0 0 6px; font-size: 13px; line-height: 1.3; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--dv2-text3);
}
.dv2 .dv2-pub-title {
  margin: 0; font-family: var(--dv2-font-display); font-size: clamp(26px, 7.2vw, 30px); line-height: 1.1; font-weight: 800;
  letter-spacing: -0.02em; color: var(--dv2-ink); text-wrap: balance; overflow-wrap: break-word; hyphens: auto;
}
.dv2 .dv2-pub-lead { margin: 10px 0 0; font-size: 17px; line-height: 1.5; color: var(--dv2-text2); }
.dv2 .dv2-pub-back {
  display: inline-flex; align-items: center; gap: 2px; min-height: 44px; margin: 0 0 4px -8px; padding: 0 8px;
  border-radius: 12px; color: var(--dv2-accent-ink); font-size: 16px; font-weight: 800; text-decoration: none;
}
.dv2 .dv2-pub-back:hover { background: var(--dv2-accent-soft); color: var(--dv2-accent-ink); }

/* buttons for public pages (the primary CTA is .dv2-btn.dv2-btn--primary.dv2-btn--lg.dv2-btn--block + dv2_icon('arrow-right', 20, 2.4)) */
.dv2 .dv2-btn--outline { --dv2-btn-bg: #fff; --dv2-btn-fg: var(--dv2-accent-ink); --dv2-btn-bd: var(--dv2-accent); min-height: 50px; border-radius: 14px; }
.dv2 .dv2-btn--outline:hover { --dv2-btn-bg: var(--dv2-accent-soft); }
.dv2 .dv2-btn--outline.dv2-btn--lg { min-height: 56px; border-radius: 16px; }
.dv2 .dv2-btn--light { --dv2-btn-bg: #fff; --dv2-btn-fg: var(--dv2-accent-ink); --dv2-btn-bd: #fff; }   /* CTA on an accent surface */
.dv2 .dv2-btn--light:hover { --dv2-btn-bg: var(--dv2-accent-soft); --dv2-btn-bd: var(--dv2-accent-soft); }
.dv2 .dv2-btn--light:focus-visible { outline-color: #fff; }
.dv2 form[data-dv2-once] .dv2-btn[aria-busy="true"]::after {   /* submit guard (datingv2.js): spinner after the label */
  content: ""; flex: none; width: 16px; height: 16px; box-sizing: border-box;
  border: 2.5px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: dv2-pub-spin .8s linear infinite;
}
@keyframes dv2-pub-spin { to { transform: rotate(360deg); } }

/* forms: <form class="dv2-pub-form"> makes .dv2-field / .dv2-input / .dv2-select the 52px public size */
.dv2 .dv2-pub-form .dv2-field { gap: 6px; margin-bottom: 18px; }
.dv2 .dv2-pub-form .dv2-label { font-weight: 700; }
.dv2 .dv2-pub-form .dv2-input, .dv2 .dv2-pub-form .dv2-select { min-height: 52px; border-width: 1px; font-weight: 500; }
.dv2 .dv2-pub-form .dv2-textarea { border-width: 1px; }
.dv2 .dv2-pub-form .dv2-input:focus, .dv2 .dv2-pub-form .dv2-select:focus, .dv2 .dv2-pub-form .dv2-textarea:focus,
.dv2 .dv2-pub-form [aria-invalid="true"].dv2-input, .dv2 .dv2-pub-form [aria-invalid="true"].dv2-select,
.dv2 .dv2-pub-form [aria-invalid="true"].dv2-textarea { border-width: 2px; }
/* label row with a right-hand note: <div class="dv2-field__top"><label class="dv2-label">…</label><span class="dv2-field__aside">…</span></div> */
.dv2 .dv2-field__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.dv2 .dv2-field__aside { font-size: 14px; line-height: 1.3; font-weight: 600; color: var(--dv2-text3); text-align: right; }
/* error line with icon: <p class="dv2-error-text dv2-error-text--icon" id="…-err"><?=dv2_icon('alert', 18)?><span>…</span></p> */
.dv2 .dv2-error-text--icon { display: flex; align-items: flex-start; gap: 6px; }
.dv2 .dv2-error-text--icon > .dv2-icon { margin-top: 1px; }
/* valid state (client check passed): <input class="dv2-input is-valid"> = 2px bonus border + check mark at the right */
.dv2 .dv2-input.is-valid {
  border: 2px solid var(--dv2-bonus); padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23146c34' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 20px 20px;
}

/* password: <div class="dv2-pw"><input class="dv2-input" type="password" id="x" …><?=dv2_pub_pw_toggle('x')?></div> */
.dv2 .dv2-pw { position: relative; display: flex; align-items: center; }
.dv2 .dv2-pw > .dv2-input { padding-right: 108px; }
.dv2 .dv2-pw__toggle {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  min-width: 44px; height: 44px; margin: 0; padding: 0 12px; border: 0; border-radius: 10px;
  background: transparent; color: var(--dv2-accent-ink); font-family: var(--dv2-font); font-size: 15px; font-weight: 800;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.dv2 .dv2-pw__toggle:hover { background: var(--dv2-accent-soft); }

/* checkbox: <label class="dv2-check"><input class="dv2-check__input" type="checkbox" …><span class="dv2-check__box" aria-hidden="true"><?=dv2_icon('check', 16, 3)?></span><span>…</span></label> */
.dv2 .dv2-check {
  position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin: 0;
  font-size: 16px; line-height: 1.3; color: var(--dv2-ink); cursor: pointer;
}
.dv2 .dv2-check__input { position: absolute; left: 0; top: 50%; width: 24px; height: 24px; margin: -12px 0 0; opacity: 0; cursor: pointer; }
.dv2 .dv2-check__box {
  flex: none; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  width: 24px; height: 24px; border: 1.5px solid var(--dv2-outline); border-radius: 7px; background: #fff; color: transparent;
}
.dv2 .dv2-check__input:checked + .dv2-check__box { border-color: var(--dv2-accent); background: var(--dv2-accent); color: #fff; }
.dv2 .dv2-check__input:focus-visible + .dv2-check__box { outline: 3px solid var(--dv2-focus); outline-offset: 2px; }

/* choice rows ("Ich bin / Ich suche"): <fieldset class="dv2-pub-choice"><legend>…</legend><div class="dv2-options dv2-options--lg" style="--dv2-cols:2">
   label.dv2-option > input.dv2-option__input + span.dv2-option__body (dv2_icon('check', 18, 2.6, 'dv2-option__check') + text)</div></fieldset> */
.dv2 .dv2-options--lg .dv2-option__body { min-height: 48px; font-size: 16px; }
.dv2 .dv2-option__check { display: none; }
.dv2 .dv2-option__input:checked + .dv2-option__body .dv2-option__check { display: inline-block; }
.dv2 .dv2-pub-choice { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.dv2 .dv2-pub-choice > legend {
  float: left; flex: none; width: 84px; margin: 0; padding: 0;
  font-size: 16px; line-height: 1.25; font-weight: 700; color: var(--dv2-ink);
}
.dv2 .dv2-pub-choice > .dv2-options { flex: 1 1 auto; min-width: 0; }
.dv2 .dv2-pub-choice ~ .dv2-pub-choice { margin-top: 10px; }   /* ~: an error line may sit between the two rows */

/* social sign-in: <ul class="dv2-social"><li><a class="dv2-social__btn" href="/login/social/<id>"><?=dv2_pub_social_icon(id)?>…</a></li></ul>
   only for dv2_pub_social_providers() (providers with credentials). Divider: <p class="dv2-pub-or"><span>oder</span></p> */
.dv2 .dv2-social { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.dv2 .dv2-social__btn {
  display: flex; align-items: center; justify-content: center; gap: 10px; box-sizing: border-box; width: 100%;
  min-height: 48px; padding: 0 16px; border: 1px solid var(--dv2-outline); border-radius: 14px;
  background: #fff; color: var(--dv2-ink); font-size: 16px; font-weight: 700; text-decoration: none;
}
.dv2 .dv2-social__btn:hover { background: var(--dv2-surface); color: var(--dv2-ink); }
.dv2 .dv2-social__icon { flex: none; }
.dv2 .dv2-pub-or { display: flex; align-items: center; gap: 12px; margin: 20px 0; font-size: 15px; line-height: 1.3; font-weight: 600; color: var(--dv2-text3); }
.dv2 .dv2-pub-or::before, .dv2 .dv2-pub-or::after { content: ""; flex: 1 1 0; border-top: 1px solid var(--dv2-divider); }

/* gift ticket (dv2_pub_ticket()): the reciprocity motif. --band = header of a form card; --big; --link (whole ticket links) */
.dv2 .dv2-pub-ticket {
  --dv2-ticket-stub: 60px;
  position: relative; box-sizing: border-box; display: flex; align-items: stretch; min-height: 60px;
  border-radius: var(--dv2-r-card); background: var(--dv2-accent-soft); color: var(--dv2-ink);
  overflow: hidden; text-decoration: none;
}
.dv2 .dv2-pub-ticket--big { --dv2-ticket-stub: 70px; min-height: 68px; }
.dv2 .dv2-pub-ticket--band { border-radius: var(--dv2-r-card) var(--dv2-r-card) 0 0; }
.dv2 .dv2-pub-ticket__stub {
  flex: none; display: flex; align-items: center; justify-content: center; width: var(--dv2-ticket-stub);
  background: var(--dv2-accent); color: #fff;
}
.dv2 .dv2-pub-ticket::before, .dv2 .dv2-pub-ticket::after {   /* perforation notches */
  content: ""; position: absolute; left: calc(var(--dv2-ticket-stub) - 8px); width: 16px; height: 16px;
  border-radius: 50%; background: var(--dv2-pub-notch);
}
.dv2 .dv2-pub-ticket::before { top: -8px; }
.dv2 .dv2-pub-ticket::after { bottom: -8px; }
.dv2 .dv2-pub-ticket--band::after { background: #fff; }
.dv2 .dv2-pub-ticket__body {
  position: relative; flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 1px;
  padding: 8px 14px 8px 16px;
}
.dv2 .dv2-pub-ticket__body::before { content: ""; position: absolute; left: -1px; top: 12px; bottom: 12px; border-left: 2px dashed #fff; }
.dv2 .dv2-pub-ticket__eyebrow { font-size: 13px; line-height: 1.25; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dv2-accent-ink); }
.dv2 .dv2-pub-ticket__main { font-size: 17px; line-height: 1.2; font-weight: 800; color: var(--dv2-ink); }
.dv2 .dv2-pub-ticket--big .dv2-pub-ticket__main { font-size: 19px; }
.dv2 a.dv2-pub-ticket:hover { box-shadow: inset 0 0 0 2px var(--dv2-accent-line); color: var(--dv2-ink); }
/* gift pill: <span class="dv2-pub-giftpill"><?=dv2_icon('gift', 17, 2.1)?>…</span> */
.dv2 .dv2-pub-giftpill {
  display: inline-flex; align-items: center; gap: 6px; min-height: 30px; box-sizing: border-box; padding: 0 12px 0 9px;
  border-radius: var(--dv2-r-pill); background: var(--dv2-accent-soft); color: var(--dv2-accent-ink);
  font-size: 14px; line-height: 1.2; font-weight: 800;
}
/* trust line: <ul class="dv2-pub-trust [dv2-pub-trust--start]"><li><?=dv2_icon('check', 15, 2.8)?>Kein Abo nötig</li>…</ul> (every item config-gated) */
.dv2 .dv2-pub-trust {
  display: flex; flex-wrap: wrap; justify-content: center; column-gap: 12px; row-gap: 4px; margin: 0; padding: 0; list-style: none;
  font-size: 14px; line-height: 1.35; font-weight: 600; color: var(--dv2-text3);
}
.dv2 .dv2-pub-trust--start { justify-content: flex-start; }
.dv2 .dv2-pub-trust > li { display: inline-flex; align-items: center; gap: 4px; }
.dv2 .dv2-pub-trust .dv2-icon { color: var(--dv2-bonus); }

/* captcha (forgot, feedback, affiliate): <fieldset class="dv2-pub-captcha"><legend>…</legend><div class="dv2-pub-captcha__row">
   <img id="captcha" class="dv2-pub-captcha__img" src="/captcha" alt="…" width="130" height="48"><?=dv2_pub_captcha_reload('captcha', 'captcha_input')?></div>
   <div class="dv2-field">label + input name="captcha" (inputmode=numeric autocomplete=off)</div></fieldset> */
.dv2 .dv2-pub-captcha { min-width: 0; margin: 0 0 18px; padding: 10px 14px 0; border: 1px solid var(--dv2-divider); border-radius: var(--dv2-r-card); }
.dv2 .dv2-pub-captcha > legend { float: none; width: auto; margin: 0; padding: 0 6px; font-size: 15px; line-height: 1.3; font-weight: 700; color: var(--dv2-ink); }
.dv2 .dv2-pub-captcha__row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 6px 0 14px; }
.dv2 .dv2-pub-captcha__img {
  display: block; width: 130px; height: 48px; object-fit: contain; box-sizing: border-box;
  border: 1px solid var(--dv2-divider); border-radius: 10px; background: var(--dv2-surface);
}

/* legal / long text: <article class="dv2-prose">$html</article>. Presentation only: $html is printed verbatim once.
   span.legal-field (operator details, decoded by the inline script) only inherits font and colour; never touch its display. */
.dv2 .dv2-prose { font-size: 17px; line-height: 1.65; color: var(--dv2-text2); overflow-wrap: break-word; }
.dv2 .dv2-prose > :first-child { margin-top: 0; }
.dv2 .dv2-prose :where(h1, h2, h3, h4, h5, h6) { margin: 1.6em 0 0.5em; line-height: 1.25; font-weight: 800; color: var(--dv2-ink); letter-spacing: -0.005em; }
.dv2 .dv2-prose :where(h1, h2, h3) { font-family: var(--dv2-font-display); letter-spacing: -0.015em; hyphens: auto; overflow-wrap: anywhere; }
.dv2 .dv2-prose h1 { font-size: 27px; }
.dv2 .dv2-prose h2 { font-size: 24px; }
.dv2 .dv2-prose h3 { font-size: 22px; }
.dv2 .dv2-prose h4 { font-size: 19px; }
.dv2 .dv2-prose h5 { font-size: 18px; }
.dv2 .dv2-prose h6 { font-size: 17px; }
.dv2 .dv2-prose :where(p, ul, ol, dl, table, pre, blockquote, address) { margin: 0 0 1em; }
.dv2 .dv2-prose :where(ul, ol) { padding-left: 1.4em; }
.dv2 .dv2-prose li + li { margin-top: 0.35em; }
.dv2 .dv2-prose strong, .dv2 .dv2-prose b { font-weight: 700; color: var(--dv2-ink); }
.dv2 .dv2-prose a { color: var(--dv2-accent-ink); font-weight: 600; text-decoration: underline; overflow-wrap: anywhere; }
.dv2 .dv2-prose a:hover { color: var(--dv2-accent-dark); }
.dv2 .dv2-prose hr { margin: 24px 0; border: 0; border-top: 1px solid var(--dv2-divider); opacity: 1; }
.dv2 .dv2-prose pre {
  padding: 14px 16px; border-radius: 12px; background: var(--dv2-surface);
  font: inherit; font-size: 16px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--dv2-text2);
}
.dv2 .dv2-prose code { font: inherit; font-size: inherit; color: inherit; background: none; padding: 0; }
.dv2 .dv2-prose img { max-width: 100%; height: auto; }
.dv2 .dv2-prose table { width: 100%; border-collapse: collapse; font-size: 16px; }
.dv2 .dv2-prose :where(th, td) { padding: 8px 10px; border-bottom: 1px solid var(--dv2-divider); text-align: left; vertical-align: top; }
.dv2 .dv2-prose blockquote { margin-left: 0; padding-left: 14px; border-left: 3px solid var(--dv2-accent-line); }
.dv2 .dv2-prose .legal-field { font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; }
@media (min-width: 992px) {
  .dv2 .dv2-prose { max-width: 68ch; }
}

/* responsive helpers (hide only; the element keeps its own display): .dv2-pub-phone below 768px, .dv2-pub-wide from 768px */
@media (max-width: 767.98px) {
  .dv2 .dv2-pub-wide { display: none; }
}
@media (min-width: 768px) {
  .dv2 .dv2-pub-phone { display: none; }
}
@media (max-width: 359.98px) {   /* 320px phones: keep bar actions on one line */
  .dv2 .dv2-pub-bar__in { gap: 2px; padding-left: 12px; padding-right: 6px; }
  .dv2 .dv2-pub-lang__btn { padding: 0 5px; gap: 3px; }
  .dv2 .dv2-pub-lang__btn > .dv2-icon--globe { display: none; }
  .dv2 .dv2-pub-pill__in { padding: 0 11px; }
  .dv2 .dv2-pub-logo { max-width: 118px; }
}
@media (prefers-reduced-motion: reduce) {
  .dv2 .dv2-pub-lang__chev, .dv2 .dv2-pub-pill__in { transition: none; }
  .dv2 form[data-dv2-once] .dv2-btn[aria-busy="true"]::after { animation-duration: 2.4s; }
}

/* ------------------------------------------------------------------ print (every dv2 page): the content only, no chrome */
@media print {
  .dv2 .dv2-skip, .dv2 .dv2-pub-bar, .dv2 #installContainer, .dv2 .dv2-pub-foot, .dv2 .dv2-pub-foot__apptest,
  .dv2 .dv2-appbar, .dv2 .dv2-tabbar, .dv2 .dv2-footer, .dv2 .dv2-land-sticky { display: none !important; }
}