/*
 * DateMate Social brand layer (27 Oct 2026). Loaded last by frontend/layouts/app, after vl-genz.css and
 * vl-discover.css, so equal-specificity rules here win. The colour literals in the older stylesheets were moved
 * to this palette by theme/remap-palette.py (project folder); this file restates the tokens and changes only
 * what a colour swap cannot: one type family, light surfaces where the Vibe theme had maroon bands, the logo,
 * and the homepage hero. Reverting the look is removing the <link> to this file (and the remap).
 *
 * Palette, from the owner's logo: navy #041c40 ("mate") for text, pink #fc3890 ("date") for accents,
 * #db1f74 where white text sits on pink (4.7:1), the neon violet of "Social" only as a soft glow.
 */
:root {
    --dm-navy: #041c40;
    --dm-navy-2: #26304f;
    --dm-pink: #fc3890;
    --dm-pink-strong: #db1f74;
    --dm-pink-deep: #c8186a;
    --dm-pink-soft: #fff1f7;
    --dm-violet: #c830e8;
    --dm-violet-soft: #f7eefd;
    --dm-muted: #5f6380;
    --dm-line: #eceaf2;
    --dm-paper: #ffffff;
    --dm-tint: #faf9fc;
    --dm-font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --gz-maroon: var(--dm-pink-strong);
    --gz-wine: var(--dm-pink-deep);
    --gz-deep: var(--dm-navy);
    --gz-gold: var(--dm-pink);
    --gz-gold-dark: var(--dm-pink-deep);
    --gz-gold-soft: var(--dm-pink-soft);
    --gz-blush: #fad3e6;
    --gz-blush-soft: var(--dm-pink-soft);
    --gz-cream: var(--dm-tint);
    --gz-paper-warm: #fff7fb;
    --gz-ink: var(--dm-navy);
    --gz-ink-2: var(--dm-navy-2);
    --gz-muted: var(--dm-muted);
    --gz-line: var(--dm-line);
    --gz-paper: var(--dm-paper);
    --gz-fog: var(--dm-pink-soft);
    --gz-lilac: var(--dm-violet-soft);
    --gz-sky: var(--dm-violet-soft);
    --gz-grad: linear-gradient(135deg, var(--dm-pink-strong) 0%, var(--dm-pink-deep) 100%);
    --gz-grad-soft: linear-gradient(135deg, var(--dm-pink-soft) 0%, var(--dm-violet-soft) 100%);
    --gz-grad-dream: linear-gradient(135deg, var(--dm-pink-strong) 0%, #b5157a 100%);
    --gz-radius: 20px;
    --gz-radius-sm: 14px;
    --gz-shadow: 0 1px 2px rgba(4, 28, 64, .04), 0 8px 24px rgba(4, 28, 64, .06);
    --gz-shadow-lg: 0 20px 50px rgba(4, 28, 64, .12);
    --gz-display: var(--dm-font);
    --gz-text: var(--dm-font);
    --gz-serif: var(--dm-font);
    --vl-serif: var(--dm-font);

    --primary: var(--dm-pink-strong);
    --hov-primary: var(--dm-pink-deep);
    --soft-primary: rgba(219, 31, 116, .1);
    --secondary: var(--dm-navy);
    --soft-secondary: rgba(4, 28, 64, .06);
}

/* ---------- Type: one family; headings navy; the accent phrase in the logo's pink, upright ---------- */
body { font-family: var(--dm-font); color: var(--dm-muted); background: var(--dm-paper); }
h1, h2, h3, h4, .h1, .h2, .h3, .h4, .h5, .h6, h5, h6, .vl-serif { font-family: var(--dm-font); color: var(--dm-navy); }
h1, h2, .h1, .h2 { letter-spacing: -.025em; }
.gz-serif { font-family: var(--dm-font); font-style: normal; font-weight: 800; letter-spacing: inherit; color: var(--dm-pink); }
a { color: var(--dm-pink-strong); }
a:hover { color: var(--dm-pink-deep); }
::selection { background: #fad3e6; color: var(--dm-navy); }

/* ---------- Buttons: navy pill for "next", pink for the one action that matters ---------- */
.gz-btn { background: var(--dm-navy); font-weight: 700; letter-spacing: -.01em; }
.gz-btn.is-grad { background: var(--dm-pink-strong); box-shadow: 0 10px 24px rgba(219, 31, 116, .22); }
.gz-btn.is-grad:hover { background: var(--dm-pink-deep); }
.gz-btn.is-light { background: #fff; color: var(--dm-navy); box-shadow: none; }
.btn-vl, .btn-primary, .bg-primary-grad, .vl-btn-wine, .vl-sh-submit {
    background: var(--dm-pink-strong) !important; box-shadow: 0 8px 20px rgba(219, 31, 116, .2);
}
.btn-vl:hover, .btn-primary:hover, .vl-btn-wine:hover { background: var(--dm-pink-deep) !important; filter: none; }
.form-control:focus, .su-input:focus { border-color: var(--dm-pink-strong) !important; box-shadow: 0 0 0 4px rgba(219, 31, 116, .12) !important; }
:focus-visible { outline-color: var(--dm-pink-strong) !important; }

/* ---------- The logo (partials/vl/wordmark) ---------- */
.dm-logo { display: inline-flex; align-items: center; line-height: 0; }
.dm-logo picture, .dm-logo img { display: block; }
/* The artwork carries its neon glow inside the image, so the letters fill about half its height: below ~40px
   the script "Social" turns into a smudge */
.dm-logo img, .vl-header .dm-logo img { height: 58px; width: auto; max-width: none; } /* vivahlok.css sets .vl-header .logo img to 44px */
.dm-logo.is-sm img { height: 42px; }
@media (max-width: 991.98px) { .vl-header .dm-logo img { height: 48px; } }
@media (max-width: 575.98px) { .vl-header .dm-logo img { height: 42px; } }
.vl-footer .dm-logo img { height: 64px; }

/* ---------- Header: white once scrolled, navy links, pink for the active one ---------- */
.vl-header.is-scrolled, .vl-header-app.is-scrolled {
    background: rgba(255, 255, 255, .92) !important; box-shadow: 0 1px 0 var(--dm-line) !important;
}
.vl-header-public.is-menu-open, .vl-header .vl-mobile-menu { background: #fff !important; }
.vl-header .vl-btn-gold { background: var(--dm-pink-strong) !important; color: #fff !important; box-shadow: 0 6px 16px rgba(219, 31, 116, .2) !important; }
.vl-header .vl-btn-gold:hover { background: var(--dm-pink-deep) !important; }
.vl-header.vl-header-public .vl-nav > li > a { color: var(--dm-navy) !important; }
.vl-header.vl-header-public .vl-nav > li.active > a, .vl-header.vl-header-public .vl-nav > li > a:hover { color: var(--dm-pink-strong) !important; }
.vl-menu-toggle { border-color: var(--dm-line); color: var(--dm-navy); }

/* ---------- Homepage hero (frontend/index) ---------- */
.dm-hero { position: relative; overflow: hidden; isolation: isolate; padding: clamp(56px, 9vw, 112px) 0 clamp(56px, 8vw, 96px); background: #fff; text-align: center; }
.dm-hero-glow { position: absolute; z-index: -1; border-radius: 50%; filter: blur(80px); pointer-events: none; }
.dm-hero-glow.is-a { width: min(620px, 80vw); height: min(620px, 80vw); left: -12%; top: -30%; background: radial-gradient(closest-side, rgba(252, 56, 144, .22), transparent); }
.dm-hero-glow.is-b { width: min(560px, 75vw); height: min(560px, 75vw); right: -10%; bottom: -35%; background: radial-gradient(closest-side, rgba(200, 48, 232, .16), transparent); }
.dm-hero-inner { display: flex; flex-direction: column; align-items: center; max-width: 880px; }
.dm-hero-logo { display: block; width: min(560px, 86%); margin: 0 auto clamp(18px, 3vw, 30px); }
.dm-hero-logo img { display: block; width: 100%; height: auto; }
.dm-hero-title { margin: 0 0 16px; font-size: clamp(30px, 5.2vw, 58px); line-height: 1.06; font-weight: 800; color: var(--dm-navy); max-width: 16em; }
.dm-hero-sub { margin: 0 auto 28px; max-width: 34em; font-size: clamp(16px, 1.7vw, 19px); line-height: 1.6; color: var(--dm-muted); }
.dm-hero .hm-ctas { justify-content: center; margin-bottom: 30px; }
.dm-hero .hm-login, .dm-hero .hm-login a { color: var(--dm-navy); }
.dm-hero-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
.dm-hero-trust li {
    display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
    background: rgba(255, 255, 255, .8); box-shadow: inset 0 0 0 1px var(--dm-line); font-size: 14px; font-weight: 600; color: var(--dm-navy);
}
.dm-hero-trust i { font-size: 18px; color: var(--dm-pink-strong); }
@media (max-width: 575.98px) {
    .dm-hero-logo { width: 92%; }
    .dm-hero .hm-ctas { width: 100%; }
    .dm-hero-trust li { font-size: 13px; padding: 7px 12px; }
}

/* ---------- Homepage sections: white and a faint tint alternate; no dark band ---------- */
.hm-section { background: #fff; }
.hm-section.is-tint { background: var(--dm-tint); }
.hm-head h2 { font-weight: 800; }
.hm-steps li { background: #fff; border-color: var(--dm-line); }
.hm-steps li:hover { border-color: #fad3e6; }
.hm-step-num { color: var(--dm-pink); } /* 3.4:1 on white, enough for 40px numerals (the theme had fixed a 1.2:1 here) */
.hm-step-icon, .hm-value i { color: var(--dm-pink-strong); }
.hm-step-icon { background: var(--dm-pink-soft); box-shadow: none; }
.hm-interest { box-shadow: inset 0 0 0 1px var(--dm-line); }
.hm-value { box-shadow: inset 0 0 0 1px var(--dm-line); }
.gz-orb { --orb: linear-gradient(135deg, var(--dm-pink-soft), #fad3e6) !important; color: var(--dm-pink-strong) !important; }
.gz-orb::before { display: none; }

.hm-section.is-dark { background: linear-gradient(180deg, var(--dm-pink-soft) 0%, var(--dm-violet-soft) 100%); color: var(--dm-navy); }
.is-dark .hm-head h2 { color: var(--dm-navy); }
.is-dark .hm-head h2 .gz-serif { color: var(--dm-pink-strong); }
.is-dark .hm-head p { color: var(--dm-muted); }
.hm-safe-item { background: #fff; box-shadow: 0 1px 2px rgba(4, 28, 64, .04), inset 0 0 0 1px rgba(4, 28, 64, .05); }
.hm-safe-item h3 { color: var(--dm-navy); }
.hm-safe-item p { color: var(--dm-muted); }
.hm-safe-links a { color: var(--dm-pink-strong); }
.hm-safe-links a:hover { color: var(--dm-pink-deep); }
.is-dark a:focus-visible { outline-color: var(--dm-pink-strong); }

.hm-cta { background: var(--dm-navy); box-shadow: 0 20px 50px rgba(4, 28, 64, .18); position: relative; overflow: hidden; isolation: isolate; }
.hm-cta::before {
    content: ''; position: absolute; z-index: -1; right: -80px; top: -120px; width: 360px; height: 360px; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(252, 56, 144, .45), transparent); filter: blur(10px);
}
.hm-cta .gz-btn.is-light { background: var(--dm-pink-strong); color: #fff; }
.hm-cta .gz-btn.is-light:hover { background: var(--dm-pink-deep); color: #fff; }

/* Inner pages with a flat colour band (not the photo heroes, which keep their dark overlay) */
.vl-page-hero { background: linear-gradient(180deg, var(--dm-pink-soft), #fff); color: var(--dm-navy); }
.vl-page-hero h1 { color: var(--dm-navy); }
.vl-page-hero p { color: var(--dm-muted); }
.vl-breadcrumb { color: var(--dm-muted); }
.vl-breadcrumb a { color: var(--dm-pink-strong); }
.vl-cta { background: var(--dm-navy) !important; }
.vl-trust-card { background: var(--dm-navy) !important; }
.vl-trust-card h3 { color: #fad3e6 !important; }

/* ---------- Footer: light, the full-colour logo, navy text ---------- */
.aiz-footer.vl-footer, .vl-footer { background: var(--dm-tint) !important; color: var(--dm-muted); border-top: 1px solid var(--dm-line); }
.vl-footer h4 { color: var(--dm-navy) !important; font-family: var(--dm-font); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; font-weight: 800; }
.vl-footer a { color: var(--dm-navy-2); }
.vl-footer a:hover { color: var(--dm-pink-strong); }
.vl-footer .vl-footer-bottom { border-top-color: var(--dm-line); }
.vl-footer .social a { background: #fff; box-shadow: inset 0 0 0 1px var(--dm-line); }
.vl-footer .text-gold { color: var(--dm-pink-strong) !important; }
.vl-footer :focus-visible { outline-color: var(--dm-pink-strong) !important; }
.vl-footer .opacity-70 { opacity: 1 !important; color: var(--dm-muted); }

/* ---------- Dark utility surfaces are navy, not pink ---------- */
.bg-dark { background: var(--dm-navy) !important; color: #fff !important; }
.aiz-cookie-alert > div { border-radius: 16px !important; }
.aiz-cookie-alert .btn-outline-light { color: #fff !important; border-color: rgba(255, 255, 255, .55) !important; background: transparent !important; }
.aiz-cookie-alert .btn-outline-light:hover { background: rgba(255, 255, 255, .12) !important; }
.aiz-cookie-alert :focus-visible { outline-color: #fad3e6 !important; }
.aiz-notify.alert, .aiz-notify.alert-success { background: var(--dm-navy); color: #fff; }
.aiz-notify.alert::before { background: var(--dm-pink); color: #fff; }
.aiz-notify.alert-danger { background: var(--dm-navy); box-shadow: inset 4px 0 0 var(--dm-pink), var(--gz-shadow-lg); }
.aiz-notify.alert-warning { background: var(--dm-pink-soft); color: var(--dm-navy); }
.aiz-notify.alert-warning::before { background: var(--dm-pink-strong); }
.aiz-mobile-bottom-nav .opacity-100 { color: var(--dm-pink-strong) !important; }
.aiz-mobile-bottom-nav .vl-nav-join { background: var(--dm-pink-strong); }
.vl-skip { background: var(--dm-navy); }

/* ---------- Phones: nearly every member is on one (owner, 27 Oct 2026) ----------
   Tap targets of at least 44px (Apple's guideline; Android asks 48dp) and 16px text in form fields, below
   which iPhone Safari zooms the whole page in when a field is tapped. Found by a phone audit of sign-up and
   the member screens: header icons 29-36px, chips 36px, the password eye 32px, settings fields 14px. */
@media (max-width: 991.98px) {
    input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea, .form-control, .su-input { font-size: 16px !important; }
    .vl-header .vl-header-icon, .vl-header .vl-header-user, .vl-header .vl-lang-header > a, .vl-header .vl-lang-mobile > a,
    .vl-header .vl-login-btn, .vl-header .vl-header-login { min-width: 44px; min-height: 44px; justify-content: center; }
    .vl-header .vl-header-icon, .vl-header .vl-lang-header > a, .vl-header .vl-lang-mobile > a { display: inline-flex; align-items: center; }
    .vl-menu-toggle { width: 44px; height: 44px; }
    .vl-header-public .vl-mobile-auth .vl-header-register { height: 44px; padding: 0 18px !important; font-size: 14px; }
    .su-chip > span { min-height: 44px; padding-inline: 1rem; font-size: 14.5px; }
    .su-eye { min-width: 44px; min-height: 44px; }
    .su-terms input, .form-check-input, .aiz-checkbox input { width: 22px; height: 22px; flex-basis: 22px; }
    #su-city-change, .su-link { min-height: 44px; display: inline-flex; align-items: center; }
    .aiz-main-wrapper .card .btn:not(.btn-icon):not(.btn-circle):not(.close) { padding-top: .62rem; padding-bottom: .62rem; }
}

@media (prefers-reduced-motion: reduce) { .gz-btn, .hm-steps li, .hm-interest { transition: none; } }

/* ---------- Chats on a phone (below 992px): the list is the screen, as in the Tinder and Bumble apps ----------
   The template made the list a slide-in drawer behind "Show conversations", and a conversation opened
   underneath the drawer, so its message box could not be reached. Now the list shows first; opening a chat
   replaces it (html.cm-thread-open, set by messages/index) and the arrow in its header goes back. */
.cm-back { display: none; }
@media (max-width: 991.98px) {
    .aiz-chat .chat-user-list-wrap,
    .aiz-chat .chat-user-list-wrap .chat-user-list { position: static; opacity: 1; visibility: visible; transform: none; transition: none; width: auto; max-width: none; height: auto; z-index: auto; }
    .aiz-chat .chat-user-list-wrap .overlay, .aiz-chat .chat-user-list-wrap .chat-user-list-header { display: none; }
    .aiz-chat .chat-user-list { max-height: none; border-right: 0 !important; padding: 4px 0 !important; overflow-y: auto; }
    .aiz-chat #single_chat { display: none; }
    html.cm-thread-open .aiz-chat #single_chat { display: block; }
    html.cm-thread-open .aiz-chat > .row > .col-lg-4, html.cm-thread-open .cm-head, html.cm-thread-open .cm-new { display: none; }
    .cm-back { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; margin: -8px 2px -8px -12px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--dm-navy); font-size: 24px; }
    .cm-back:focus-visible { outline: 2px solid var(--dm-pink-strong); }
}
@media (max-width: 991.98px) and (min-height: 520px) {
    .vl-fixed-screen .aiz-chat > .row > .col-lg-4, .vl-fixed-screen .aiz-chat .chat-user-list-wrap, .vl-fixed-screen .aiz-chat .chat-user-list { height: 100%; }
}

/* ---------- 28 Oct 2026: astrology mode, voice notes, hidden messages, blurred likes, profile tips, calls ---------- */
.dc-chips .is-astro { background: rgba(252,56,144,.18); }
.dc-chips .dc-astro.is-good { background: #1f9d6a; color: #fff; }
.dc-astro-block p { margin: 0; }
.dc-voice { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 8px; padding: 6px 12px; border: 0; border-radius: 999px; background: rgba(255,255,255,.18); color: #fff; font: inherit; font-size: 13px; font-weight: 600; backdrop-filter: blur(6px); }
.dc-voice small { opacity: .75; }
.dc-voice.is-playing { background: var(--dm-pink-strong); }
.dc-voice.is-playing .la-play::before { content: "\f04c"; }
.dc-wall { display: flex; }
.dm-mic { color: var(--dm-pink-strong); }
.dm-mic.is-recording { background: #e5484d !important; color: #fff !important; animation: dm-pulse 1s infinite; }
.dm-mic.is-big { width: 84px; height: 84px; border-radius: 50%; border: 0; background: var(--dm-pink-strong); color: #fff; font-size: 36px; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(219,31,116,.35); }
.dm-mic-timer { font-size: 13px; font-weight: 700; color: #e5484d; align-self: center; padding: 0 8px; white-space: nowrap; }
@keyframes dm-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.dm-voice { display: flex; align-items: center; gap: 8px; min-width: 240px; max-width: 100%; }
.dm-voice i { color: var(--dm-pink-strong); font-size: 20px; }
.dm-voice audio, .dm-audio { height: 36px; max-width: 100%; flex: 1 1 auto; }
.dm-voice small { color: var(--dm-muted); font-size: 12px; white-space: nowrap; }
.st-voice { text-align: center; }
.st-voice-has { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 20px; }
.st-voice-has audio { width: 100%; max-width: 360px; }
.dm-hidden-show { width: 100%; text-align: left; border: 1px dashed var(--dm-line); background: var(--dm-tint); color: var(--dm-muted); border-radius: 14px; padding: 10px 12px; font: inherit; font-size: 13px; }
.dm-hidden-show b { color: var(--dm-pink-strong); }
.dm-bother { font-size: 12px; color: var(--dm-muted); margin-top: 4px; }
.dm-bother button { border: 0; background: none; color: var(--dm-pink-strong); font-weight: 700; padding: 0 4px; font: inherit; font-size: 12px; }
.lk-tile.is-blurred .lk-photo img { filter: blur(16px); transform: scale(1.1); }
.lk-tile.is-blurred .lk-photo { overflow: hidden; }
.lk-blur-note { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; background: var(--dm-pink-soft); color: var(--dm-navy); border-radius: 14px; padding: 10px 14px; font-size: 13px; margin: 0 0 12px; }
.lk-blur-note i { color: var(--dm-pink-strong); font-size: 18px; }
.st-label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 6px; color: var(--dm-navy); }
.st-input { width: 100%; min-height: 48px; border: 1.5px solid var(--dm-line); border-radius: 14px; padding: 10px 14px; font: inherit; font-size: 16px; background: #fff; color: var(--dm-navy); }
.st-input:focus { outline: none; border-color: var(--dm-pink-strong); }
.st-place { position: relative; }
.st-place-list { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; margin: 4px 0 0; padding: 6px 0; list-style: none; background: #fff; border: 1px solid var(--dm-line); border-radius: 14px; box-shadow: 0 12px 30px rgba(4,28,64,.12); max-height: 240px; overflow: auto; }
.st-place-list li { padding: 10px 14px; cursor: pointer; font-size: 15px; }
.st-place-list li:hover { background: var(--dm-pink-soft); }
.st-time { display: flex; align-items: center; gap: 8px; }
.st-time span { font-weight: 800; }
.st-astro-now { display: flex; align-items: center; gap: 12px; background: var(--dm-pink-soft); border-radius: 16px; padding: 12px 14px; margin-bottom: 16px; }
.st-astro-now b { display: block; }
.st-astro-now small { color: var(--dm-muted); }
.dm-stars { background: var(--dm-tint); border-radius: 16px; padding: 14px 16px; }
.ex-person.is-pick .ex-chip { background: var(--dm-pink-strong); color: #fff; }
.ex-reasons { display: block; font-size: 11px; color: var(--dm-muted); padding: 0 4px; }
.tp-score { display: flex; align-items: center; gap: 18px; }
.tp-ring { flex: none; width: 92px; height: 92px; border-radius: 50%; display: flex; align-items: baseline; justify-content: center; background: conic-gradient(var(--dm-pink-strong) var(--pct), var(--dm-line) 0); position: relative; }
.tp-ring::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: #fff; }
.tp-ring b, .tp-ring small { position: relative; align-self: center; }
.tp-ring b { font-size: 30px; font-weight: 800; color: var(--dm-navy); }
.tp-ring small { color: var(--dm-muted); margin-left: 2px; }
.tp-head h2 { font-size: 18px; margin: 0 0 4px; }
.tp-list { padding-left: 22px; margin: 0; }
.tp-list li { margin: 8px 0; font-size: 15px; }
.tp-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.tp-photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 14px; }
.tp-verdict { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; margin: 6px 0 2px; }
.tp-photo.is-good .tp-verdict { color: #1f9d6a; }
.tp-photo.is-fix .tp-verdict { color: var(--dm-pink-strong); }
.tp-photo p, .tp-note { font-size: 13px; color: var(--dm-muted); margin: 0; }
.tp-note i { font-size: 18px; margin-right: 6px; vertical-align: -2px; }
.tp-note.is-good i { color: #1f9d6a; }
.tp-note.is-fix i { color: var(--dm-pink-strong); }

/* ---------- 28 Oct 2026: chat assistant (Help me reply, away assistant) ---------- */
.dm-suggest { color: var(--dm-pink-strong); }
.dm-suggest-list { display: flex; flex-direction: column; gap: 10px; }
.dm-suggest-item { text-align: left; border: 1.5px solid var(--dm-line); background: #fff; border-radius: 16px; padding: 12px 14px; font: inherit; font-size: 15px; color: var(--dm-navy); line-height: 1.4; }
.dm-suggest-item:hover, .dm-suggest-item:focus-visible { border-color: var(--dm-pink-strong); background: var(--dm-pink-soft); outline: none; }
.dm-assist { display: inline-flex; align-items: center; gap: 3px; color: var(--dm-pink-strong); font-weight: 700; font-size: 11px; }
.cm-assist { display: inline-flex; align-items: center; gap: 8px; margin: 0 8px 0 auto; font-size: 13px; font-weight: 600; color: var(--dm-navy); cursor: pointer; }
.cm-assist input { position: absolute; opacity: 0; width: 0; height: 0; }
.cm-assist i { width: 38px; height: 22px; border-radius: 999px; background: var(--dm-line); position: relative; transition: background .2s; }
.cm-assist i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .2s; }
.cm-assist input:checked + i { background: var(--dm-pink-strong); }
.cm-assist input:checked + i::after { left: 19px; }
.cm-assist input:focus-visible + i { outline: 2px solid var(--dm-pink-strong); }

/* ---------- 28 Oct 2026: Login activity (member) ---------- */
.la-list { list-style: none; margin: 0; padding: 0; }
.la-list li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--dm-line); }
.la-list li:last-child { border-bottom: 0; }
.la-list b { display: block; color: var(--dm-navy); font-size: 15px; }
.la-list small { color: var(--dm-muted); font-size: 12px; }
.la-list li.is-warn b { color: var(--dm-pink-strong); }
.la-here { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: #e7f6ef; color: #1f7a52; font-size: 11px; font-weight: 700; vertical-align: 2px; }
.la-list small { text-transform: none; letter-spacing: normal; font-weight: 500; }