/* ==========================================================================
   ShaadiGram — Premium Editorial Design System
   Modern, high-intent matrimonial platform. Minimalism x Glassmorphism.
   ========================================================================== */

:root {
    /* Palette */
    --sg-deep-plum: #662d91;
    --sg-primary: #4d0f79;
    --sg-primary-container: #662d91;
    --sg-golden-sand: #c9ae78;
    --sg-warm-cream: #FAF9F6;
    --sg-charcoal-ink: #1A1A1A;
    --sg-surface: #fff7fd;
    --sg-surface-container-low: #faf1fa;
    --sg-surface-container: #f5ebf4;
    --sg-surface-container-high: #efe5ef;
    --sg-surface-container-highest: #e9e0e9;
    --sg-surface-container-lowest: #ffffff;
    --sg-on-surface: #1e1a21;
    --sg-on-surface-variant: #4c4450;
    --sg-outline: #7e7482;
    --sg-outline-variant: #cfc2d2;
    --sg-primary-fixed: #f2daff;
    --sg-primary-fixed-dim: #e1b6ff;
    --sg-on-primary-fixed: #2e004d;
    --sg-on-primary: #ffffff;
    --sg-secondary: #715b2d;
    --sg-secondary-container: #fddfa5;
    --sg-error: #ba1a1a;
    --sg-error-container: #ffdad6;

    /* Typography */
    --sg-font-display: "Playfair Display", Georgia, serif;
    --sg-font-body: "Plus Jakarta Sans", -apple-system, "Segoe UI", Roboto, sans-serif;

    /* Shape */
    --sg-rounded: 0.5rem;
    --sg-rounded-lg: 1rem;
    --sg-rounded-xl: 1.5rem;
    --sg-rounded-full: 9999px;

    /* Shadows */
    --sg-shadow-ambient: 0 12px 32px rgba(26, 26, 26, 0.04);
    --sg-shadow-glow: 0 8px 32px rgba(102, 45, 145, 0.08);
    --sg-shadow-btn: 0 4px 20px rgba(102, 45, 145, 0.15);

    /* Layout */
    --sg-gutter: 24px;
    --sg-margin-mobile: 20px;
    --sg-margin-desktop: 64px;
    --sg-container-max: 1200px;
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }

body {
    font-family: var(--sg-font-body);
    color: var(--sg-on-surface);
    background-color: var(--sg-warm-cream);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.sg-display, .sg-headline {
    font-family: var(--sg-font-display);
    color: var(--sg-deep-plum);
    font-weight: 700;
    letter-spacing: -0.01em;
}

h1 { font-size: 2.75rem; line-height: 1.15; }
h2 { font-size: 2rem; line-height: 1.2; }
h3 { font-size: 1.5rem; line-height: 1.3; }

a { color: var(--sg-deep-plum); }
a:hover { color: var(--sg-primary); }

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
}

/* ---------- Buttons (pill) ---------- */
.btn, .btn-large, .btn-flat {
    font-family: var(--sg-font-body);
    border-radius: var(--sg-rounded-full);
    text-transform: none;
    letter-spacing: 0.02em;
    font-weight: 600;
}

.btn, .btn-large {
    background-color: var(--sg-deep-plum);
    box-shadow: var(--sg-shadow-btn);
    transition: all .25s ease;
}
.btn:hover, .btn-large:hover {
    background-color: var(--sg-primary-container);
    box-shadow: 0 8px 25px rgba(102, 45, 145, 0.25);
    transform: translateY(-1px);
}
.btn:focus, .btn-large:focus { background-color: var(--sg-primary); }

.btn_primary, .btn-primary {
    background-color: var(--sg-deep-plum) !important;
}
.btn_primary:hover, .btn-primary:hover { background-color: var(--sg-primary-container) !important; }

.btn_round { border-radius: var(--sg-rounded-full); }

.btn_glossy {
    color: var(--sg-deep-plum) !important;
    background-color: rgba(102, 45, 145, 0.10) !important;
    border-radius: var(--sg-rounded-full);
}

/* Secondary (outline) button */
.btn-sg-outline,
.sg-btn-secondary {
    background-color: transparent;
    color: var(--sg-charcoal-ink);
    border: 1px solid var(--sg-golden-sand);
    box-shadow: none;
    border-radius: var(--sg-rounded-full);
}
.btn-sg-outline:hover, .sg-btn-secondary:hover {
    background-color: rgba(201, 174, 120, 0.12);
    color: var(--sg-charcoal-ink);
    transform: none;
}

/* ---------- Glass panel ---------- */
.glass-panel {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: var(--sg-shadow-ambient);
}

.ambient-shadow { box-shadow: var(--sg-shadow-ambient); }

/* ---------- Inputs (bottom-border editorial) ---------- */
.input-field > input,
.input-field > textarea,
.input-field > select,
.input-editorial,
textarea.input-editorial {
    font-family: var(--sg-font-body);
    border-bottom: 1px solid var(--sg-outline-variant) !important;
    box-shadow: none !important;
    transition: border-color .25s ease;
    color: var(--sg-on-surface);
}
.input-field > input:focus,
.input-field > textarea:focus,
.input-field > select:focus,
.input-editorial:focus {
    border-bottom: 2px solid var(--sg-deep-plum) !important;
    box-shadow: none !important;
}
.input-field > label,
.input-field > label.active {
    font-family: var(--sg-font-body);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.72rem;
    color: var(--sg-on-surface-variant);
}
.input-field > label.active { color: var(--sg-deep-plum) !important; }

/* Editorial underline input (used in redesigned forms) */
.input-editorial {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--sg-outline-variant);
    padding: 0.75rem 0;
    border-radius: 0;
    width: 100%;
    outline: none;
    font-size: 1rem;
}
.input-editorial:focus { border-bottom: 2px solid var(--sg-deep-plum); }

/* ---------- Chips / tags ---------- */
.sg-chip, .chip {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: var(--sg-rounded-full);
    font-family: var(--sg-font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    background: rgba(201, 174, 120, 0.12);
    color: var(--sg-charcoal-ink);
    border: 1px solid rgba(201, 174, 120, 0.28);
}
.sg-chip--primary {
    background: var(--sg-primary-fixed);
    color: var(--sg-on-primary-fixed);
    border: 1px solid var(--sg-primary-fixed-dim);
}

/* ---------- Profile / image cards ---------- */
.profile-gradient {
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 50%);
}

.sg-card {
    background: var(--sg-surface-container-lowest);
    border-radius: var(--sg-rounded-xl);
    box-shadow: var(--sg-shadow-ambient);
    overflow: hidden;
}

.sg-avatar {
    border-radius: var(--sg-rounded-full);
    object-fit: cover;
}

/* ---------- Navigation ---------- */
.sg-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    height: 80px;
    background: rgba(255, 247, 253, 0.8);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 12px 32px rgba(26, 26, 26, 0.06);
}
/* Materialize's base .brand-logo is position:absolute;left:50% (its classic
   centered-logo pattern) — that collapses this flex item to 0 width, so
   .sg-nav__links renders flush against it with no gap. Restore normal flow
   for this nav only; other .brand-logo usages (login page, etc.) are
   untouched. */
.sg-nav .brand-logo {
    position: static;
    left: auto;
    transform: none;
}
.sg-nav__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
    max-width: var(--sg-container-max);
    margin: 0 auto;
    padding: 0 var(--sg-margin-mobile);
}
@media (min-width: 768px) {
    .sg-nav__inner { padding: 0 var(--sg-margin-desktop); }
}
.sg-nav__links {
    display: flex;
    gap: 2rem;
}
.sg-nav__links a {
    font-family: var(--sg-font-body);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--sg-on-surface-variant);
    padding-bottom: 0.25rem;
}
.sg-nav__links a:hover { color: var(--sg-deep-plum); }
.sg-nav__links a.active {
    color: var(--sg-deep-plum);
    border-bottom: 2px solid var(--sg-deep-plum);
}
.sg-nav__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 4px;
    border-radius: var(--sg-rounded-full);
    background: var(--sg-error);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    vertical-align: middle;
}
.sg-nav__premium-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    border-radius: var(--sg-rounded-full);
    background: var(--sg-secondary-container);
    color: var(--sg-secondary) !important;
    font-size: 0.8125rem;
    font-weight: 700;
    box-shadow: none;
}
.sg-nav__premium-btn:hover { background: var(--sg-golden-sand); color: #fff !important; }
.sg-nav__premium-btn .material-symbols-outlined { font-size: 18px; }
.sg-nav__brand img { height: 40px; width: auto; }
.sg-nav__brand { display: flex; align-items: center; }
.sg-nav__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}
.sg-nav__actions > li { list-style: none; }
.sg-nav__actions .btn-flat { padding: 0 8px; color: var(--sg-deep-plum); }
.sg-nav__actions .header_user > a { padding: 0; }
.sg-nav__actions .material-symbols-outlined { font-size: 24px; }
.sg-nav__actions .header_user img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--sg-outline-variant);
}
.sg-nav .dt_slide_menu { display: flex; align-items: center; cursor: pointer; color: var(--sg-deep-plum); }
@media (min-width: 993px) {
    .sg-nav .dt_slide_menu { display: none; }
}

/* Bottom nav (mobile) */
.sg-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 50;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0.75rem 1rem;
    background: rgba(255, 247, 253, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 1.5rem 1.5rem 0 0;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.05);
}
.sg-bottom-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    color: var(--sg-on-surface-variant);
    font-size: 0.72rem;
    font-weight: 500;
    position: relative;
}
.sg-bottom-nav a.active { color: var(--sg-deep-plum); }
.sg-bottom-nav a.active::after {
    content: '';
    position: absolute;
    bottom: -4px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--sg-deep-plum);
}
@media (min-width: 768px) {
    .sg-bottom-nav { display: none; }
}

/* ---------- Footer ---------- */
.sg-footer {
    background: var(--sg-surface-container-lowest);
    border-top: 1px solid rgba(207, 194, 210, 0.4);
    padding: 3rem var(--sg-margin-desktop);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}
.sg-footer__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--sg-on-surface-variant);
}
.sg-footer__links a:hover { color: var(--sg-golden-sand); }
.sg-footer__copy {
    font-size: 0.875rem;
    color: var(--sg-on-surface-variant);
    opacity: 0.75;
    text-align: center;
}

/* ---------- Utility ---------- */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.sg-container {
    max-width: var(--sg-container-max);
    margin: 0 auto;
    padding: 0 var(--sg-margin-mobile);
}
@media (min-width: 768px) {
    .sg-container { padding: 0 var(--sg-margin-desktop); }
}

.sg-headline-display { font-family: var(--sg-font-display); font-size: 2.75rem; line-height: 1.15; font-weight: 700; }
.sg-headline-lg { font-family: var(--sg-font-display); font-size: 2rem; line-height: 1.25; font-weight: 700; }
.sg-headline-md { font-family: var(--sg-font-display); font-size: 1.5rem; line-height: 1.3; font-weight: 600; }
.sg-body-lg { font-size: 1.125rem; line-height: 1.55; }
.sg-body-md { font-size: 1rem; line-height: 1.5; }
.sg-label-md { font-size: 0.875rem; font-weight: 600; letter-spacing: 0.04em; }
.sg-label-sm { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.02em; }
.sg-text-muted { color: var(--sg-on-surface-variant); }
.sg-text-primary { color: var(--sg-deep-plum); }
.sg-text-secondary { color: var(--sg-golden-sand); }

.sg-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.5rem;
    border-radius: var(--sg-rounded-full);
    background: var(--sg-golden-sand);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
}

/* ==========================================================================
   Override existing QuickDate / Materialize styling
   ========================================================================== */

/* Global: use new fonts + neutralize old purple */
body { font-family: var(--sg-font-body) !important; }

/* Site-wide link + heading color shift from pink/purple to deep plum */
.header_bg h1, .header_bg h5,
.dt_features .icon-block h5,
.section h3, .section h4 { color: var(--sg-deep-plum); }

/* Old primary button color */
.btn_primary { background-color: var(--sg-deep-plum) !important; }

/* Old header (landing) */
.header_bg {
    background: var(--sg-warm-cream) !important;
    background-image:
        radial-gradient(circle at 85% 20%, rgba(102, 45, 145, 0.06), transparent 45%),
        radial-gradient(circle at 15% 80%, rgba(201, 174, 120, 0.12), transparent 45%) !important;
    box-shadow: none !important;
}
.header_bg .btn-large.main-hdr-bttn {
    background-color: var(--sg-deep-plum) !important;
    border-radius: var(--sg-rounded-full);
    box-shadow: var(--sg-shadow-btn);
}

/* Features */
.dt_features_prnt { background: var(--sg-warm-cream) !important; }
.dt_features .icon_wrapper svg { background: transparent !important; }

/* Auth pages */
.dt_authpage .login_side { background: var(--sg-warm-cream) !important; }
.dt_authpage .svg_divider { color: var(--sg-warm-cream) !important; }
.dt_login .brand-logo img { max-width: 180px; }

/* Page footer */
.page_footer .footer-copyright {
    background: var(--sg-surface-container-lowest) !important;
    color: var(--sg-on-surface-variant) !important;
    border-top: 1px solid rgba(207, 194, 210, 0.4) !important;
    font-family: var(--sg-font-body);
}
.dt_footer_links li a { color: var(--sg-on-surface-variant); }
.dt_footer_links li a:hover { color: var(--sg-golden-sand); }

/* Nav */
nav#nav-not-logged-in, nav#nav-logged-in {
    background: rgba(255, 247, 253, 0.82) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 12px 32px rgba(26, 26, 26, 0.06) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
nav .brand-logo img { max-height: 40px; width: auto; }
nav .header_logo .brand-logo { font-family: var(--sg-font-display); }

/* Buttons in nav */
.qdt_hdr_auth_btns { border-radius: var(--sg-rounded-full) !important; font-family: var(--sg-font-body); }

/* Match cards / user cards get softer, larger radii */
.mtc_usrd_content .mtc_usrd_sidebar,
.card, .mtc_usrd_card {
    border-radius: var(--sg-rounded-xl);
    box-shadow: var(--sg-shadow-ambient);
}

/* Progress / accent */
.progress .indeterminate, .ajax-progress .indeterminate { background-color: var(--sg-deep-plum) !important; }

/* Toast */
.toast { border-radius: var(--sg-rounded-full); font-family: var(--sg-font-body); }

/* ==========================================================================
   Auth pages (split-screen editorial + centered card)
   ========================================================================== */
.sg-auth {
    display: flex;
    flex-direction: row;
    min-height: 100vh;
    max-height: 100%;
}
.sg-auth__image {
    position: relative;
    width: 55%;
    min-height: 100vh;
    overflow: hidden;
    background: var(--sg-surface-variant);
}
.sg-auth__image-inner { position: absolute; inset: 0; }
.sg-auth__image-inner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    mix-blend-mode: multiply;
    z-index: 2;
}
.sg-auth__image .carousel,
.sg-auth__image .carousel-item,
.sg-auth__image .carousel-item img {
    height: 100% !important;
}
.sg-auth__image .carousel-item img {
    width: 100%;
    object-fit: cover;
}
.sg-auth__overlay {
    position: absolute;
    top: auto;
    bottom: 64px;
    left: 64px;
    right: 40px;
    z-index: 3;
    max-width: 32rem;
    width: auto;
    transform: none;
    text-align: left;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.sg-auth__overlay h2 {
    color: #fff;
    font-family: var(--sg-font-display);
    font-size: 3rem;
    line-height: 1.15;
    font-weight: 700;
    margin: 0 0 1rem;
    text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
.sg-auth__overlay h5 {
    color: rgba(255, 255, 255, 0.92);
    font-size: 1.125rem;
    line-height: 1.55;
    font-weight: 400;
    text-shadow: 0 1px 8px rgba(0,0,0,0.35);
}

.sg-auth__form {
    position: relative;
    width: 45%;
    min-height: 100vh;
    background: var(--sg-warm-cream);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.sg-auth__form-inner {
    padding: 48px;
    max-width: 440px;
    margin: 0 auto;
    width: 100%;
}
.sg-auth__form .brand-logo { margin: 0 0 32px; display: inline-block; }
.sg-auth__form .brand-logo img { max-width: 170px; }
.sg-auth__form .sg-headline-lg { margin: 0 0 4px; }
.sg-auth__form .sg-body-md { margin: 0 0 32px; }
.sg-auth__form form .input-field { margin-top: 0.5rem; }
.sg-auth__row-between {
    display: flex;
    justify-content: flex-end;
    margin: -8px 0 8px;
}
.sg-btn-block { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; height: 52px; line-height: 52px; }
.sg-auth__form .dt_social_login { display: flex; gap: 12px; margin: 20px 0 8px; }
.sg-auth__form .dt_social_login .btn_social {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    border-radius: var(--sg-rounded-full);
    border: 1px solid var(--sg-golden-sand);
    background: transparent;
    color: var(--sg-charcoal-ink);
}
.sg-auth__form .dt_social_login .btn_social:hover { background: rgba(201, 174, 120, 0.12); }

@media (max-width: 992px) {
    .sg-auth { flex-direction: column; }
    .sg-auth__image { width: 100%; min-height: 40vh; }
    .sg-auth__overlay { left: 24px; right: 24px; bottom: 24px; }
    .sg-auth__overlay h2 { font-size: 2rem; }
    .sg-auth__form { width: 100%; min-height: auto; }
    .sg-auth__form-inner { padding: 40px 24px 64px; }
}

/* Centered card auth (forgot / reset / verify) */
.sg-auth-center {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(circle at 15% 15%, rgba(102, 45, 145, 0.05), transparent 45%),
        radial-gradient(circle at 85% 85%, rgba(201, 174, 120, 0.12), transparent 45%),
        var(--sg-warm-cream);
}
.sg-auth-center__card {
    width: 100%;
    max-width: 460px;
    border-radius: var(--sg-rounded-xl);
    padding: 48px;
    background: rgba(255, 255, 255, 0.8);
}
.sg-auth-center__brand { text-align: center; margin-bottom: 32px; }
.sg-auth-center__brand img { max-height: 44px; width: auto; }
.sg-auth-center__header { text-align: center; margin-bottom: 32px; }
.sg-auth-center__header .material-symbols-outlined { font-size: 40px; margin-bottom: 16px; }
.sg-auth-center__header h2 { margin: 0 0 8px; }
.sg-auth-center__header p { max-width: 300px; margin: 0 auto; }
.sg-auth-center__back { margin-top: 24px; }
.sg-auth-center__back a { display: inline-flex; align-items: center; gap: 6px; }
.sg-auth-center__back .material-symbols-outlined { font-size: 18px; }

/* ==========================================================================
   Landing page
   ========================================================================== */
.sg-hero {
    position: relative;
    overflow: hidden;
    background: var(--sg-warm-cream);
    background-image:
        radial-gradient(circle at 85% 20%, rgba(102, 45, 145, 0.07), transparent 45%),
        radial-gradient(circle at 10% 90%, rgba(201, 174, 120, 0.14), transparent 45%);
    padding: 72px 0 88px;
}
.sg-hero__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: center;
}
/* fr tracks floor at min-content; without this the headline squeezes the art column */
.sg-hero__inner > * { min-width: 0; }
@media (min-width: 992px) {
    .sg-hero__inner { grid-template-columns: minmax(0, 1.1fr) minmax(420px, 0.9fr); }
}
.sg-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: var(--sg-rounded-full);
    background: rgba(102, 45, 145, 0.10);
    border: 1px solid rgba(102, 45, 145, 0.20);
    color: var(--sg-deep-plum);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 24px;
}
.sg-hero__eyebrow .material-symbols-outlined { font-size: 16px; }
.sg-hero__content h1 {
    font-size: 3rem;
    line-height: 1.08;
    max-width: 24ch;
    margin: 0 0 20px;
}
.sg-hero__content > p { max-width: 34rem; margin: 0 0 28px; }
.sg-hero__avatars { display: flex; margin: 0 0 28px; }
.sg-hero__avatars a { margin-right: -12px; }
.sg-hero__avatars img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 3px solid var(--sg-warm-cream);
    object-fit: cover;
}
.sg-hero__cta { display: flex; gap: 16px; flex-wrap: wrap; }
.sg-hero__cta .btn { height: 52px; line-height: 52px; padding: 0 32px; }
/* Hero imagery: photo panel with floating glass cards (see Screens/…gen_z_enhanced) */
.sg-hero__art { display: none; }
@media (min-width: 992px) { .sg-hero__art { display: block; } }
.sg-hero__stage {
    position: relative;
    width: 100%;
    height: 600px;
    max-width: 100%;
}
.sg-hero__photo {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 92%;
    height: 560px;
    border-radius: 28px;
    overflow: hidden;
    border: 4px solid #fff;
    box-shadow: 0 24px 60px rgba(26, 26, 26, 0.18);
    z-index: 10;
}
.sg-hero__photo img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
    display: block;
}
.sg-hero__photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 60%);
    pointer-events: none;
}
.sg-glass {
    background: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 20px 40px rgba(26, 26, 26, 0.10);
}
.sg-hero__note {
    position: absolute;
    right: 48px;
    top: 40px;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--sg-rounded-lg);
    animation: sg-float 5s ease-in-out infinite 1s;
}
.sg-hero__note-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--sg-primary);
    color: #fff;
    flex: none;
}
.sg-hero__note-icon .material-symbols-outlined { font-size: 16px; }
.sg-hero__note strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--sg-on-surface);
    line-height: 1.3;
}
.sg-hero__note span.sg-hero__note-sub {
    font-size: 11px;
    color: var(--sg-on-surface-variant);
}
.sg-hero__card {
    position: absolute;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-radius: var(--sg-rounded-lg);
}
.sg-hero__card--one {
    left: 16px;
    top: 22%;
    width: 256px;
    animation: sg-float 6s ease-in-out infinite;
}
.sg-hero__card--two {
    left: -32px;
    bottom: 20%;
    width: 288px;
    z-index: 30;
    animation: sg-float 7s ease-in-out infinite 2s;
}
.sg-hero__card img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(26, 26, 26, 0.12);
}
.sg-hero__card-name {
    font-family: var(--sg-font-display);
    font-size: 16px;
    font-weight: 600;
    color: var(--sg-primary);
    margin: 0 0 2px;
    line-height: 1.2;
}
.sg-hero__card-line {
    font-size: 12px;
    line-height: 1.4;
    color: var(--sg-on-surface-variant);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sg-hero__tags { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.sg-hero__tags span {
    padding: 3px 9px;
    border-radius: var(--sg-rounded-full);
    background: rgba(102, 45, 145, 0.10);
    border: 1px solid rgba(102, 45, 145, 0.10);
    font-size: 10px;
    font-weight: 500;
    color: var(--sg-primary);
}
@keyframes sg-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}
@media (prefers-reduced-motion: reduce) {
    .sg-hero__note, .sg-hero__card { animation: none; }
}

.sg-trust {
    background: var(--sg-surface-container-lowest);
    border-top: 1px solid rgba(207, 194, 210, 0.3);
    border-bottom: 1px solid rgba(207, 194, 210, 0.3);
    padding: 20px 0;
}
.sg-trust .sg-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
}
@media (min-width: 768px) {
    .sg-trust .sg-container { justify-content: space-between; }
}
.sg-trust__item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--sg-on-surface-variant);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    opacity: 0.85;
}
.sg-trust__item .material-symbols-outlined {
    color: var(--sg-deep-plum);
    background: rgba(102, 45, 145, 0.10);
    padding: 8px;
    border-radius: 50%;
    font-size: 20px;
}

.sg-how-title { text-align: center; max-width: 640px; margin: 0 auto 32px; }
.sg-how-title h2 { margin: 0 0 12px; }
.sg-how-title p { margin: 0; }

/* Legacy theme sets .dt_features { padding: 150px 0 } — the design has no such gap */
.dt_features_prnt { padding: 72px 0 80px; }
.dt_features_prnt .dt_features { padding: 0; }
.dt_features_prnt .dt_features .row { margin-bottom: 0; }
.dt_features_prnt .dt_features .col { display: flex; }

.sg-step {
    text-align: center;
    position: relative;
    width: 100%;
    padding: 36px 28px 32px;
    background: var(--sg-surface-container-low);
    border: 1px solid var(--sg-outline-variant);
    border-radius: var(--sg-rounded-xl);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.sg-step:hover {
    transform: translateY(-4px);
    box-shadow: var(--sg-shadow-glow);
}
.sg-step h5 { margin: 0 0 10px; }
.sg-step p { margin: 0; color: var(--sg-on-surface-variant); }

/* Interest accepted → Match → Conversation */
.sg-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    margin: 40px auto 0;
    max-width: 640px;
    padding: 18px 28px;
    border-radius: var(--sg-rounded-xl);
    background: var(--sg-surface-container);
    color: var(--sg-on-surface-variant);
    font-size: 0.9375rem;
    font-weight: 500;
}
.sg-flow .material-symbols-outlined { font-size: 18px; opacity: 0.5; }
.sg-flow__end { color: var(--sg-deep-plum); font-weight: 600; }
/* the shared "match" string is stored lowercase for the "92% match" badge */
.sg-flow__cap { text-transform: capitalize; }

/* ---------- Brand lockup ---------- */
/* Interim: heart mark + name set in the display face. Replace with a proper
   logo file once brand supplies one, then drop .sg-logo__word. */
.brand-logo {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
}
.brand-logo img { max-height: 40px; width: auto; }
.sg-logo__word {
    font-family: var(--sg-font-display);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--sg-deep-plum);
    line-height: 1;
}
.sg-auth__form .brand-logo img,
.sg-auth-center .brand-logo img { max-height: 48px; }
.sg-step .icon_wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin: 0 auto 16px;
    border-radius: var(--sg-rounded-lg);
    background: rgba(102, 45, 145, 0.10);
}
.sg-step .icon_wrapper .material-symbols-outlined {
    font-size: 32px;
    color: var(--sg-deep-plum);
}
.sg-step__num {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(102, 45, 145, 0.55);
    margin-bottom: 6px;
}

/* ==========================================================================
   App page components (discover, profile, lists)
   ========================================================================== */

/* Discover card */
.mtc_usrd_content .mtc_usrd_sidebar,
.qd_hot_not .mtc_usrd_content .mtc_usrd_sidebar {
    background: var(--sg-surface-container-lowest);
    border-radius: var(--sg-rounded-xl);
    box-shadow: var(--sg-shadow-ambient);
    border: 1px solid rgba(207, 194, 210, 0.3);
}
.mtc_usrd_slider .carousel,
.mtc_usrd_slider .carousel-item img,
.mtc_usrd_slider .qd_hot_not_media {
    border-radius: var(--sg-rounded-xl);
    overflow: hidden;
}
.mtc_usrd_summary h5, .mtc_usrd_summary .usr_name a {
    font-family: var(--sg-font-display);
    font-weight: 700;
    color: var(--sg-deep-plum);
}
.mtc_usrd_summary .usr_name { font-family: var(--sg-font-display); font-size: 1.35rem; }
.mtc_usrd_summary .usr_age, .mtc_usrd_summary .usr_location {
    font-family: var(--sg-font-body);
    color: var(--sg-on-surface-variant);
}
.mtc_usrd_actions .btn {
    border-radius: var(--sg-rounded-full);
    background: var(--sg-warm-cream);
    color: var(--sg-on-surface-variant);
    box-shadow: none;
}
.mtc_usrd_actions .btn.like,
.mtc_usrd_actions .btn.liked {
    background: var(--sg-deep-plum);
    color: #fff;
}
.mtc_usrd_actions .btn.like svg,
.mtc_usrd_actions .btn.liked svg { fill: #fff; }
.sidebar_usr_info .info_title {
    font-family: var(--sg-font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--sg-on-surface-variant);
}
.sidebar_usr_info span { color: var(--sg-on-surface); }
.mtc_match_badge {
    background: var(--sg-golden-sand) !important;
    color: var(--sg-charcoal-ink) !important;
}
.mtc_completion { background: var(--sg-surface-container); }
.mtc_completion span { background: var(--sg-deep-plum) !important; }

/* Profile info sections */
.dt_profile_info {
    background: var(--sg-surface-container-lowest);
    border-radius: var(--sg-rounded-xl);
    padding: 20px;
    box-shadow: var(--sg-shadow-ambient);
    border: 1px solid rgba(207, 194, 210, 0.3);
}
.dt_profile_info .info_title, .sg-profile-cards .sg-profile-info .info_title {
    font-family: var(--sg-font-body);
    color: var(--sg-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.72rem;
    font-weight: 600;
}
.about_block { font-family: var(--sg-font-body); color: var(--sg-on-surface); }

/* Tabs */
.tabs { background: transparent; }
.tabs .tab a {
    font-family: var(--sg-font-body);
    color: var(--sg-on-surface-variant);
}
.tabs .tab a.active, .tabs .tab a:hover { color: var(--sg-deep-plum); }
.tabs .indicator { background-color: var(--sg-deep-plum) !important; }

/* Generic cards used across pages */
.card {
    border-radius: var(--sg-rounded-xl);
    box-shadow: var(--sg-shadow-ambient);
    border: 1px solid rgba(207, 194, 210, 0.3);
}
.card .card-title, .card h5, .card h4 { font-family: var(--sg-font-display); color: var(--sg-deep-plum); }

/* Likes / interest / match list cards */
.dt_ltst_users .dt_home_rand_user h4.bold {
    font-family: var(--sg-font-display);
    color: var(--sg-deep-plum);
}

/* Chat messenger */
.dt_msg_box {
    border-radius: var(--sg-rounded-xl);
    box-shadow: var(--sg-shadow-glow);
    border: 1px solid rgba(207, 194, 210, 0.3);
    overflow: hidden;
}
.dt_msg_box .msg_header { background: var(--sg-surface-container-lowest); }
.dt_msg_box .modal-content .chat_conversations .chat_container .chat_body .chat_body_content .messages .message {
    font-family: var(--sg-font-body);
}
.dt_msg_box .modal-content .chat_conversations .chat_container .chat_body .chat_body_content .messages .message.me,
.dt_msg_box .modal-content .chat_conversations .chat_container .chat_body .chat_body_content .messages .message.right {
    background: var(--sg-deep-plum) !important;
    color: #fff !important;
}

/* Empty states */
.empty_state { color: var(--sg-on-surface-variant); font-family: var(--sg-font-body); }

/* Settings page cards */
.qd_sett_cont { background: var(--sg-surface-container-lowest); border-radius: var(--sg-rounded-xl); }

/* Page container breathing room */
#container { min-height: 70vh; }

/* ==========================================================================
   Auth form controls (design: minimal underline fields, not Materialize)
   ========================================================================== */
.sg-field { margin: 0 0 24px; }
.sg-field__labelrow {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}
.sg-field__label,
.sg-auth__form .sg-field > label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sg-on-surface);
    margin: 0 0 4px;
}
.sg-field__aside {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--sg-deep-plum);
    white-space: nowrap;
}
.sg-field__aside:hover { color: var(--sg-primary); text-decoration: underline; }
/* flex row rather than absolute positioning: the theme's input rules make the
   wrapper's box hard to predict, and flex is immune to that */
.sg-field__wrap {
    position: relative;
    display: flex;
    align-items: stretch;
    width: 100%;
    border-bottom: 1px solid var(--sg-outline-variant);
}
.sg-field__wrap:focus-within { border-bottom-color: var(--sg-deep-plum); }
.sg-field .sg-field__wrap input { flex: 1 1 auto; min-width: 0; }

/* Override the theme's rounded filled input treatment.
   style.css:24 sets `border: none !important; background: rgb(0 0 0 / 5%);
   border-radius: 25px; height: 42px; padding: 0 22px` on every input, so these
   declarations have to carry !important to win. */
.sg-field input[type="text"],
.sg-field input[type="email"],
.sg-field input[type="password"],
.sg-field input[type="tel"] {
    box-sizing: border-box !important;
    width: 100%;
    height: 46px !important;
    margin: 0 !important;
    padding: 10px 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--sg-outline-variant) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-family: var(--sg-font-body);
    font-size: 1rem !important;
    line-height: 1.5;
    color: var(--sg-on-surface);
    transition: border-color 0.2s ease;
}
/* the wrapper draws the underline for password rows so it runs under the
   reveal icon too — must come after the type-selector block to win */
.sg-field .sg-field__wrap input[type="text"],
.sg-field .sg-field__wrap input[type="password"] { border-bottom: 0 !important; }

.sg-field input:focus {
    outline: none;
    border-bottom: 1px solid var(--sg-deep-plum) !important;
    box-shadow: none !important;
    background: transparent !important;
}
.sg-field input::placeholder { color: var(--sg-outline-variant); }
.sg-field__reveal {
    /* the theme stretches form buttons to 100%, which would squeeze the input
       to zero width inside the flex row — pin the icon button's box */
    flex: 0 0 40px !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: auto !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--sg-on-surface-variant);
}
.sg-field__reveal:hover { color: var(--sg-on-surface); }
.sg-field__reveal .material-symbols-outlined { font-size: 20px; }

/* Two-up register fields keep Materialize's grid; just re-space them */
.sg-field.col { margin-bottom: 20px; }
.dt_login form .row { margin-bottom: 0; }

/* Divider above the social buttons */
.sg-auth__divider {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 32px 0 20px;
}
.sg-auth__divider::before,
.sg-auth__divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(207, 194, 210, 0.5);
}
.sg-auth__divider span {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sg-on-surface-variant);
}

/* Social buttons: labelled gold hairline pills, stacked */
.sg-auth__form .dt_social_login,
.dt_social_login { display: flex; flex-direction: column; gap: 12px; margin: 0 0 8px; }
.sg-auth__form .dt_social_login .btn_social,
.dt_social_login .btn_social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    height: 48px;
    padding: 0 20px;
    border-radius: var(--sg-rounded-full);
    border: 1px solid var(--sg-golden-sand);
    background: transparent;
    color: var(--sg-charcoal-ink);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}
.dt_social_login .btn_social:hover { background: rgba(201, 174, 120, 0.12); }
.dt_social_login .btn_social svg { flex: none; }

/* Single editorial still replaces the carousel */
.sg-auth__still { position: absolute; inset: 0; }
.sg-auth__still img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Boxed OTP entry */
.sg-otp {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 8px 0 24px;
}
.sg-otp__box {
    box-sizing: border-box !important;
    width: 56px !important;
    height: 64px !important;
    padding: 0 !important;
    border-radius: var(--sg-rounded) var(--sg-rounded) 0 0 !important;
    text-align: center;
    font-family: var(--sg-font-display);
    font-size: 24px;
    font-weight: 600;
    color: var(--sg-deep-plum);
    background: var(--sg-surface) !important;
    border: 0 !important;
    border-bottom: 2px solid var(--sg-outline-variant) !important;
    transition: border-color 0.2s ease;
}
.sg-otp__box:focus {
    outline: none;
    border-bottom-color: var(--sg-deep-plum) !important;
    box-shadow: none !important;
}
.sg-otp__resend { font-size: 0.875rem; color: var(--sg-on-surface-variant); margin: 16px 0 0; }
.sg-auth-center__backlink {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--sg-on-surface-variant);
    margin-bottom: 20px;
}
.sg-auth-center__backlink:hover { color: var(--sg-deep-plum); }
.sg-auth-center__backlink .material-symbols-outlined { font-size: 18px; }

/* The design's auth screens carry no site chrome */
.dt_auth_footr_page { display: none; }

/* Cookie banner: docked full-width bar, design-system colours, never over content */
.cc-window.cc-banner {
    padding: 14px 24px;
    font-family: var(--sg-font-body);
    font-size: 0.875rem;
    align-items: center;
}
.cc-window .cc-btn {
    border-radius: var(--sg-rounded-full);
    padding: 8px 24px;
    font-weight: 600;
    border: 0;
    text-decoration: none;
}
.cc-window .cc-link { opacity: 0.8; padding: 0 8px; }

/* ==========================================================================
   Dashboard header (logged-in home, above the carousels)
   ========================================================================== */
.sg-dash { padding: 40px 0 8px; background: var(--sg-warm-cream); }
.sg-dash__greeting { margin-bottom: 28px; }
.sg-dash__greeting h1 { margin: 0 0 6px; font-size: 2rem; line-height: 1.2; }
.sg-dash__greeting p { margin: 0; }

.sg-dash__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
@media (min-width: 768px) { .sg-dash__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .sg-dash__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr) minmax(0, 0.9fr); } }

.sg-dash__card {
    background: var(--sg-surface-container-lowest);
    border: 1px solid var(--sg-outline-variant);
    border-radius: var(--sg-rounded-xl);
    padding: 22px 24px;
}
.sg-dash__card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.sg-dash__card-title {
    font-family: var(--sg-font-body);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sg-on-surface-variant);
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.sg-dash__card-head .sg-dash__card-title { margin: 0; }
.sg-dash__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: var(--sg-rounded-full);
    background: var(--sg-deep-plum);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0;
}
.sg-dash__link { font-size: 0.8125rem; font-weight: 600; color: var(--sg-deep-plum); }
.sg-dash__empty { color: var(--sg-on-surface-variant); font-size: 0.875rem; margin: 0; }

/* Completion ring */
.sg-dash__ring-row { display: flex; align-items: center; gap: 18px; }
.sg-ring { position: relative; flex: none; width: 80px; height: 80px; }
.sg-ring svg { transform: rotate(-90deg); }
.sg-ring__track { fill: none; stroke: var(--sg-surface-container-high); stroke-width: 8; }
.sg-ring__value {
    fill: none;
    stroke: var(--sg-deep-plum);
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.6s ease;
}
.sg-ring__label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--sg-font-display);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--sg-deep-plum);
}
.sg-dash__status-text { margin: 0 0 10px; font-size: 0.9375rem; color: var(--sg-on-surface-variant); }
.sg-dash__status-text strong { color: var(--sg-on-surface); }

/* Interest rows */
.sg-dash__row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--sg-outline-variant);
}
.sg-dash__row:first-of-type { border-top: 0; padding-top: 0; }
.sg-dash__row img { width: 44px; height: 44px; flex: none; }
.sg-dash__row-body { flex: 1; min-width: 0; }
.sg-dash__row-name { margin: 0; font-size: 0.875rem; color: var(--sg-on-surface-variant); line-height: 1.4; }
.sg-dash__row-name a { font-weight: 600; color: var(--sg-on-surface); }
.sg-dash__row-name a:hover { color: var(--sg-deep-plum); }
.sg-dash__row-time { font-size: 0.75rem; color: var(--sg-outline); }
.sg-dash__row-actions { display: flex; gap: 8px; flex: none; }
.sg-dash__row-actions .btn { height: 32px; line-height: 32px; padding: 0 14px; font-size: 0.75rem; box-shadow: none; }

.sg-status-pill {
    flex: none;
    padding: 4px 12px;
    border-radius: var(--sg-rounded-full);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.sg-status-pill--pending  { background: var(--sg-secondary-container); color: var(--sg-secondary); }
.sg-status-pill--accepted { background: rgba(35, 96, 74, 0.12); color: #23604a; }
.sg-status-pill--rejected { background: var(--sg-error-container); color: var(--sg-error); }

/* ==========================================================================
   Interests page (received / sent / accepted / declined)
   ========================================================================== */
.sg-page { padding: 40px 0 80px; background: var(--sg-surface); min-height: 60vh; }
.sg-page__head { margin-bottom: 24px; }
.sg-page__head h1 { margin: 0 0 6px; font-size: 2rem; line-height: 1.2; }
.sg-page__head p { margin: 0; }

.sg-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--sg-outline-variant);
}
.sg-tabs__tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--sg-rounded-full) var(--sg-rounded-full) 0 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--sg-on-surface-variant);
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.sg-tabs__tab:hover { color: var(--sg-deep-plum); background: rgba(102, 45, 145, 0.05); }
.sg-tabs__tab.is-active { color: var(--sg-deep-plum); border-bottom-color: var(--sg-deep-plum); }
.sg-tabs__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--sg-rounded-full);
    background: var(--sg-primary-fixed);
    color: var(--sg-on-primary-fixed);
    font-size: 0.6875rem;
    font-weight: 700;
}
.sg-tabs__tab.is-active .sg-tabs__count { background: var(--sg-deep-plum); color: #fff; }

.sg-interest-list { display: grid; gap: 16px; }
.sg-interest {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 20px;
    padding: 20px;
    background: var(--sg-surface-container-lowest);
    border: 1px solid var(--sg-outline-variant);
    border-radius: var(--sg-rounded-xl);
}
@media (min-width: 900px) {
    .sg-interest { grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; }
}
.sg-interest__photo { display: block; position: relative; width: 96px; height: 96px; border-radius: var(--sg-rounded-lg); overflow: hidden; }
.sg-interest__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sg-interest__online-dot {
    position: absolute;
    bottom: 6px;
    right: 6px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #2e7d32;
    border: 2px solid var(--sg-surface-container-lowest);
}
.sg-interest__body { min-width: 0; }
.sg-interest__topline { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.sg-interest__name { margin: 0; font-size: 1.25rem; line-height: 1.3; }
.sg-interest__name a { color: var(--sg-deep-plum); }
.sg-interest__match {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--sg-rounded-full);
    background: rgba(201, 174, 120, 0.18);
    border: 1px solid rgba(201, 174, 120, 0.4);
    color: var(--sg-secondary);
    font-size: 0.75rem;
    font-weight: 700;
}
.sg-interest__match .material-symbols-outlined { font-size: 14px; }
.sg-interest__meta { margin: 0 0 8px; font-size: 0.875rem; color: var(--sg-on-surface-variant); display: flex; gap: 8px; flex-wrap: wrap; }
.sg-interest__meta span:not(:first-child)::before { content: "•"; margin-right: 8px; opacity: 0.5; }
.sg-interest__when {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 10px;
    font-size: 0.8125rem;
    color: var(--sg-outline);
}
.sg-interest__when .material-symbols-outlined { font-size: 16px; }
.sg-interest__tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sg-interest__tags-label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sg-outline);
}
.sg-interest__tags .sg-chip { padding: 4px 12px; font-size: 0.75rem; }
.sg-interest__actions { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
@media (max-width: 899px) {
    .sg-interest__actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
}
.sg-interest__actions .btn { height: 42px; line-height: 42px; padding: 0 20px; white-space: nowrap; }
.sg-interest__actions .btn .material-symbols-outlined { font-size: 18px; margin-right: 4px; }
.sg-interest__view { color: var(--sg-on-surface-variant) !important; box-shadow: none; background: transparent !important; }
.sg-interest__view:hover { color: var(--sg-deep-plum) !important; background: rgba(102, 45, 145, 0.06) !important; }

.sg-empty {
    text-align: center;
    padding: 64px 24px;
    color: var(--sg-on-surface-variant);
    background: var(--sg-surface-container-lowest);
    border: 1px dashed var(--sg-outline-variant);
    border-radius: var(--sg-rounded-xl);
}
.sg-empty .material-symbols-outlined { font-size: 40px; color: var(--sg-outline-variant); display: block; margin-bottom: 8px; }
.sg-empty p { margin: 0; }
.sg-empty h3 { margin: 0 0 8px; }
.sg-empty .btn { margin-top: 20px; }

/* ==========================================================================
   Discover card additions (compatibility, passions, about)
   ========================================================================== */
.sg-compat {
    margin: 16px 0;
    padding: 16px 18px;
    border-radius: var(--sg-rounded-lg);
    background: linear-gradient(135deg, rgba(102, 45, 145, 0.07), rgba(201, 174, 120, 0.10));
    border: 1px solid rgba(102, 45, 145, 0.12);
}
.sg-compat__score { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.sg-compat__pct {
    font-family: var(--sg-font-display);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    color: var(--sg-deep-plum);
}
.sg-compat__band {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sg-secondary);
}
.sg-compat__why { margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--sg-on-surface-variant); }

.sg-passions { margin: 16px 0; }
.sg-passions__list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.sg-passions .sg-chip { padding: 5px 14px; font-size: 0.75rem; }

.sg-about { margin: 16px 0; }
.sg-about__text {
    margin: 8px 0 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--sg-on-surface-variant);
}

.mtc_usrd_actions .sg-send-interest {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}
.mtc_usrd_actions .sg-send-interest .material-symbols-outlined { font-size: 18px; }

/* ==========================================================================
   Profile highlights (At a Glance / Compatibility / My Vibe)
   ========================================================================== */
.sg-profile-highlights { display: grid; gap: 16px; margin-bottom: 24px; }
.sg-hl {
    padding: 22px 24px;
    background: var(--sg-surface-container-lowest);
    border: 1px solid var(--sg-outline-variant);
    border-radius: var(--sg-rounded-xl);
}
.sg-hl__title {
    margin: 0 0 4px;
    font-family: var(--sg-font-body);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sg-on-surface-variant);
}
.sg-hl__sub { margin: 0 0 14px; font-size: 0.8125rem; color: var(--sg-outline); }
.sg-hl__prose { margin: 10px 0 0; font-size: 0.9375rem; line-height: 1.65; color: var(--sg-on-surface-variant); }

.sg-glance { display: grid; gap: 18px; margin-top: 14px; }
@media (min-width: 700px) { .sg-glance { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sg-glance__item { display: flex; gap: 12px; align-items: flex-start; }
.sg-glance__item .material-symbols-outlined {
    flex: none;
    font-size: 22px;
    color: var(--sg-deep-plum);
    background: rgba(102, 45, 145, 0.10);
    border-radius: var(--sg-rounded);
    padding: 7px;
}
.sg-glance__value { margin: 0; font-size: 0.9375rem; font-weight: 600; color: var(--sg-on-surface); line-height: 1.35; }
.sg-glance__sub { margin: 2px 0 0; font-size: 0.8125rem; color: var(--sg-on-surface-variant); }

.sg-hl--compat { background: linear-gradient(135deg, rgba(102, 45, 145, 0.06), rgba(201, 174, 120, 0.10)); }
.sg-compat__bar {
    height: 8px;
    margin-top: 12px;
    border-radius: var(--sg-rounded-full);
    background: rgba(102, 45, 145, 0.12);
    overflow: hidden;
}
.sg-compat__bar span {
    display: block;
    height: 100%;
    border-radius: var(--sg-rounded-full);
    background: var(--sg-deep-plum);
}
.sg-vibe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.sg-vibe .sg-chip { padding: 6px 14px; font-size: 0.8125rem; }

/* ==========================================================================
   Search page
   ========================================================================== */
.sg-search { display: grid; gap: 28px; align-items: start; }
@media (min-width: 900px) { .sg-search { grid-template-columns: 300px minmax(0, 1fr); } }

.sg-search__rail {
    padding: 24px;
    background: var(--sg-surface-container-lowest);
    border: 1px solid var(--sg-outline-variant);
    border-radius: var(--sg-rounded-xl);
    position: sticky;
    top: 96px;
}
.sg-search__group { margin-bottom: 22px; }
.sg-search__label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sg-on-surface-variant);
}
.sg-search__range { display: flex; align-items: center; gap: 10px; }
.sg-search__range span { color: var(--sg-outline); }
.sg-search__rail input[type="number"],
.sg-search__rail input[type="text"],
.sg-search__select {
    box-sizing: border-box !important;
    width: 100%;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    background: var(--sg-surface) !important;
    border: 1px solid var(--sg-outline-variant) !important;
    border-radius: var(--sg-rounded) !important;
    font-family: var(--sg-font-body);
    font-size: 0.9375rem !important;
    color: var(--sg-on-surface);
}
.sg-search__rail input:focus,
.sg-search__select:focus { border-color: var(--sg-deep-plum) !important; outline: none; box-shadow: none !important; }
.sg-search__inputicon { position: relative; }
.sg-search__inputicon .material-symbols-outlined {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: var(--sg-outline);
    pointer-events: none;
}
.sg-search__inputicon input { padding-left: 36px !important; }

.sg-search__vibes { display: flex; flex-wrap: wrap; gap: 8px; }
.sg-vibe-chip { cursor: pointer; }
.sg-vibe-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.sg-vibe-chip span {
    display: inline-block;
    padding: 7px 14px;
    border-radius: var(--sg-rounded-full);
    border: 1px solid var(--sg-outline-variant);
    background: transparent;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--sg-on-surface-variant);
    transition: all 0.2s ease;
}
.sg-vibe-chip:hover span { border-color: var(--sg-deep-plum); color: var(--sg-deep-plum); }
.sg-vibe-chip.is-on span,
.sg-vibe-chip input:checked + span {
    background: var(--sg-primary-fixed);
    border-color: var(--sg-primary-fixed-dim);
    color: var(--sg-on-primary-fixed);
    font-weight: 600;
}
.sg-vibe-chip input:focus-visible + span { outline: 2px solid var(--sg-deep-plum); outline-offset: 2px; }

.sg-search__resulthead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
.sg-search__resulthead h2 { margin: 0; }
.sg-search__count {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--sg-deep-plum);
    background: rgba(102, 45, 145, 0.08);
    padding: 4px 12px;
    border-radius: var(--sg-rounded-full);
    font-variant-numeric: tabular-nums;
}
.sg-result-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 18px;
}
.sg-result { display: block; }
.sg-result__photo {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    border-radius: var(--sg-rounded-lg);
    overflow: hidden;
    background: var(--sg-surface-container-high);
    margin-bottom: 8px;
}
.sg-result__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sg-result__match {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 3px 9px;
    border-radius: var(--sg-rounded-full);
    background: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--sg-deep-plum);
}
.sg-result__name { display: block; font-size: 0.9375rem; font-weight: 600; color: var(--sg-on-surface); }
.sg-result__sub { display: block; font-size: 0.8125rem; color: var(--sg-on-surface-variant); }
.sg-search__more { margin: 20px 0 0; font-size: 0.875rem; color: var(--sg-outline); }

/* ==========================================================================
   Notifications page
   ========================================================================== */
.sg-container--narrow { max-width: 780px; }
.sg-notif__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sg-notif__markall {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--sg-deep-plum) !important;
    background: rgba(102, 45, 145, 0.08) !important;
    border-radius: var(--sg-rounded-full);
    height: 40px;
    line-height: 40px;
    padding: 0 18px;
    font-size: 0.8125rem;
    box-shadow: none;
    min-width: 0 !important;
}
.sg-notif__markall .material-symbols-outlined { font-size: 18px; }

.sg-notif-list {
    background: var(--sg-surface-container-lowest);
    border: 1px solid var(--sg-outline-variant);
    border-radius: var(--sg-rounded-xl);
    overflow: hidden;
}
.sg-notif { border-bottom: 1px solid var(--sg-outline-variant); position: relative; }
.sg-notif:last-child { border-bottom: 0; }
.sg-notif.is-unread { background: rgba(102, 45, 145, 0.04); }
.sg-notif.is-unread::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--sg-deep-plum);
}
/* the dropdown markup this reuses carries its own paddings */
.sg-notif .dt_notifs { border: 0; margin: 0; }
.sg-notif .dt_notifs > a { padding: 16px 20px; display: flex; align-items: center; gap: 14px; }
.sg-notif .dt_notifs .avatar img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.sg-notif .dt_notifs .n_detail p { margin: 0 0 2px; font-size: 0.9375rem; color: var(--sg-on-surface-variant); line-height: 1.45; }
.sg-notif .dt_notifs .n_detail p b { color: var(--sg-on-surface); }
.sg-notif .dt_notifs .time { font-size: 0.75rem; color: var(--sg-outline); }

/* ==========================================================================
   Profile editor ("Curate Your Story")
   ========================================================================== */
.sg-editor__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.sg-editor__head h1 { margin: 0 0 6px; font-size: 1.875rem; line-height: 1.2; }
.sg-editor__head p { margin: 0; max-width: 46ch; }
.sg-editor__headactions .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 42px;
    line-height: 42px;
    padding: 0 20px;
    min-width: 0 !important;
}
.sg-editor__headactions .material-symbols-outlined { font-size: 18px; }

/* Section cards */
.dt_settings .sett_prof_cont {
    background: var(--sg-surface-container-lowest);
    border: 1px solid var(--sg-outline-variant);
    border-radius: var(--sg-rounded-xl);
    padding: 24px;
    box-shadow: none;
}
.dt_settings .sett_prof_cont .dt_sett_wrap_title,
.dt_settings .sett_prof_cont > h5 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 18px;
    font-family: var(--sg-font-body);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sg-on-surface-variant);
}
.dt_settings .sett_prof_cont > h5 svg { color: var(--sg-deep-plum); }

/* About Me character counter */
.sg-charcount {
    margin-top: 6px;
    text-align: right;
    font-size: 0.75rem;
    color: var(--sg-outline);
    font-variant-numeric: tabular-nums;
}
.sg-charcount.is-over { color: var(--sg-error); font-weight: 600; }

/* Sticky save bar (only for the standalone footer button, not header/card action buttons) */
.dt_sett_footer .sg-editor__save {
    position: sticky;
    bottom: 16px;
    z-index: 20;
}

/* Edit Profile page: sidebar identity card, mini premium promo, tips box, tab strip */
.sg-edit-sidebar-card { text-align: center; padding: 1.25rem 1rem; background: var(--sg-surface-container-lowest); border: 1px solid var(--sg-outline-variant); border-radius: var(--sg-rounded-lg); margin-bottom: 1rem; }
.sg-edit-sidebar-card__avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; margin: 0 auto 0.75rem; display: block; }
.sg-edit-sidebar-card__name { font-weight: 600; margin: 0 0 0.75rem; }
.sg-edit-sidebar-card__viewbtn { width: 100%; }

.sg-premium-mini { background: linear-gradient(160deg, var(--sg-primary-fixed), var(--sg-secondary-container)); border-radius: var(--sg-rounded-lg); padding: 1.25rem 1rem; text-align: center; margin-bottom: 1rem; }
.sg-premium-mini h4 { margin: 0 0 0.4rem; font-size: 0.95rem; }
.sg-premium-mini p { margin: 0 0 0.9rem; font-size: 0.8rem; color: var(--sg-on-surface-variant); }
.sg-premium-mini .btn { width: 100%; }

.sg-tips-box { background: var(--sg-secondary-container); border-radius: var(--sg-rounded-lg); padding: 1rem 1.1rem; align-self: flex-start; }
.sg-tips-box h4 { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0.6rem; font-size: 0.9rem; color: var(--sg-secondary); }
.sg-tips-box ul { list-style: none; margin: 0; padding: 0; }
.sg-tips-box li { font-size: 0.8rem; color: var(--sg-on-surface-variant); padding: 0.3rem 0; }


/* ---------- Edit Profile Card ---------- */
.sg-edit-card {
    background: var(--sg-surface);
    border: 1px solid var(--sg-outline-variant);
    border-radius: var(--sg-rounded-xl);
    padding: 28px 32px;
    margin-bottom: 24px;
    box-shadow: var(--sg-shadow-ambient);
}
.sg-edit-card__title {
    font-family: var(--sg-font-display);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--sg-on-background);
    margin: 0 0 24px;
}
.sg-edit-card__section {
    margin-bottom: 28px;
}
.sg-edit-card__section:last-child {
    margin-bottom: 0;
}
.sg-edit-card__section-title {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sg-on-surface-variant);
    margin: 0 0 12px;
}
.sg-edit-card__layout { display: grid; grid-template-columns: 1fr 240px; gap: 1.5rem; align-items: start; }
@media (max-width: 900px) { 
/* ---------- Edit Profile Card ---------- */
.sg-edit-card {
    background: var(--sg-surface);
    border: 1px solid var(--sg-outline-variant);
    border-radius: var(--sg-rounded-xl);
    padding: 28px 32px;
    margin-bottom: 24px;
    box-shadow: var(--sg-shadow-ambient);
}
.sg-edit-card__title {
    font-family: var(--sg-font-display);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--sg-on-background);
    margin: 0 0 24px;
}
.sg-edit-card__section {
    margin-bottom: 28px;
}
.sg-edit-card__section:last-child {
    margin-bottom: 0;
}
.sg-edit-card__section-title {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sg-on-surface-variant);
    margin: 0 0 12px;
}
.sg-edit-card__layout { grid-template-columns: 1fr; } }

.sg-edit-tabs { display: flex; flex-wrap: wrap; gap: 0.25rem; background: var(--sg-surface-container-lowest); border: 1px solid var(--sg-outline-variant); border-radius: var(--sg-rounded-lg); padding: 0.35rem; margin-bottom: 1.5rem; }
.sg-edit-tabs.tabs { height: auto; }
.sg-edit-tabs .tab { height: auto; flex: 1 1 auto; }
.sg-edit-tabs { flex-wrap: nowrap; }
.sg-edit-tabs .tab a { display: flex; align-items: center; justify-content: center; gap: 0.35rem; height: auto; line-height: 1.2; padding: 0.6rem 0.55rem; border-radius: 999px; font-size: 0.79rem; text-transform: none; text-align: center; white-space: nowrap; color: var(--sg-on-surface-variant); }
.sg-edit-tabs .tab a .material-symbols-outlined { font-size: 17px; }
@media (max-width: 900px) { .sg-edit-tabs { flex-wrap: wrap; } }
.sg-edit-tabs .tab a.active { background: var(--sg-primary-fixed); color: var(--sg-primary); font-weight: 700; }
.sg-edit-tabs .indicator { display: none; }

.sg-editor__cardhead { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 18px; }
.sg-editor__cardhead .dt_sett_wrap_title { margin: 0; }

/* ==========================================================================
   Messages (Screens/messages_shaadigram)
   The messenger is a live modal driven by chat.js — this restyles its surfaces
   onto the design system rather than replacing the engine. The design's
   ice-breaker prompt card is not built: it needs the conversation payload to
   carry the two users' shared interests, which the chat endpoint does not send.
   ========================================================================== */
.dt_msg_box .modal-content { background: var(--sg-warm-cream); }

/* Left pane: conversation list */
.dt_msg_box .msg_list { background: var(--sg-surface-container-lowest); border-right: 1px solid var(--sg-outline-variant); }
.dt_msg_box .msg_header { border-bottom: 1px solid var(--sg-outline-variant); background: transparent; }
.dt_msg_box .msg_header h2 {
    font-family: var(--sg-font-display);
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--sg-deep-plum);
    letter-spacing: -0.01em;
}
.dt_msg_box .msg_header h2 svg { color: var(--sg-deep-plum); }
.dt_msg_box .chat_count { background: var(--sg-deep-plum); color: #fff; border-radius: var(--sg-rounded-full); }

.dt_msg_box .m_con_item {
    border-bottom: 1px solid var(--sg-outline-variant);
    transition: background 0.2s ease;
}
.dt_msg_box .m_con_item:hover { background: rgba(102, 45, 145, 0.04); }
.dt_msg_box .m_con_item.active { background: rgba(102, 45, 145, 0.07); }
.dt_msg_box .m_c_item_name {
    font-family: var(--sg-font-body);
    font-weight: 600;
    color: var(--sg-on-surface);
}
.dt_msg_box .m_c_item_snippet { color: var(--sg-on-surface-variant); }
.dt_msg_box .m_c_item_time { color: var(--sg-outline); font-size: 0.75rem; }
.dt_msg_box .m_c_item_avatar img { border-radius: 50%; object-fit: cover; }
.dt_msg_box .online_dot { background: #23604a; border: 2px solid #fff; }

/* Right pane: thread */
.dt_msg_box .chat_header {
    border-bottom: 1px solid var(--sg-outline-variant);
    background: var(--sg-surface-container-lowest);
}
.dt_msg_box .chat_header .c_name,
.dt_msg_box .chat_participant .c_name {
    font-family: var(--sg-font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--sg-on-surface);
}
.dt_msg_box .chat_body_content { background: var(--sg-warm-cream) !important; }
.dt_msg_box .unread_msg_line { color: var(--sg-deep-plum) !important; }

/* Bubbles */
.dt_msg_box .messages .message {
    font-family: var(--sg-font-body);
    font-size: 0.9375rem !important;
    line-height: 1.5;
    padding: 10px 16px !important;
    border-radius: var(--sg-rounded-lg) !important;
    box-shadow: 0 1px 2px rgba(26, 26, 26, 0.05);
}
.dt_msg_box .messages--received .message {
    background-color: var(--sg-surface-container-lowest) !important;
    color: var(--sg-on-surface);
    border: 1px solid var(--sg-outline-variant);
    border-bottom-left-radius: var(--sg-rounded) !important;
}
.dt_msg_box .messages--sent .message {
    background-color: var(--sg-deep-plum) !important;
    color: #fff !important;
    border-bottom-right-radius: var(--sg-rounded) !important;
}
.dt_msg_box .messages--sent .message a { color: #fff; text-decoration: underline; }
.dt_msg_box .messages .time { font-size: 0.6875rem; color: var(--sg-outline); }

/* Composer */
.dt_msg_box .chat_foot {
    background: var(--sg-surface-container-lowest);
    border-top: 1px solid var(--sg-outline-variant);
}
.dt_msg_box .chat_f_textarea {
    background: var(--sg-surface);
    border: 1px solid var(--sg-outline-variant);
    border-radius: var(--sg-rounded-lg);
}
.dt_msg_box .chat_f_textarea:focus-within { border-color: var(--sg-deep-plum); }
.dt_msg_box .chat_f_attach svg { color: var(--sg-on-surface-variant); }
.dt_msg_box .chat_f_attach span:hover svg { color: var(--sg-deep-plum); }
.dt_msg_box .chat_f_send .btn-floating {
    background-color: var(--sg-deep-plum) !important;
    box-shadow: var(--sg-shadow-btn);
}
.dt_msg_box .chat_f_send .btn-floating:hover { background-color: var(--sg-primary-container) !important; }

/* Accept / decline a chat request */
.dt_msg_box .acc_msg { color: var(--sg-deep-plum) !important; }
.dt_msg_box .dec_msg { color: var(--sg-on-surface-variant) !important; }

/* Nav lockup: pin the mark's box so nothing in the legacy sheets can stretch
   it (max-width:160px + an inherited width:100% was squashing the heart into
   a 160x40 box and pushing the wordmark over the first nav link). */
nav .brand-logo img,
.sg-nav .brand-logo img {
    width: auto !important;
    max-width: none !important;
    height: 40px !important;
    max-height: 40px !important;
    object-fit: contain;
}
.sg-nav__brand { flex: none; }
.sg-nav .brand-logo { gap: 8px; }

/* ==========================================================================
   Discover (find-matches) + Complete Profile (steps) — wrapper restyles
   ========================================================================== */

/* Discover filter panel */
.find_matches_cont { margin-top: 8px; }
.dt_home_filters_prnt {
    background: var(--sg-surface-container-lowest);
    border: 1px solid var(--sg-outline-variant);
    border-radius: var(--sg-rounded-xl);
    box-shadow: var(--sg-shadow-ambient);
    margin-bottom: 24px;
    overflow: hidden;
}
.dt_home_filters_head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--sg-outline-variant);
    background: var(--sg-surface);
    cursor: pointer;
}
.dt_home_filters_head p {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--sg-on-surface-variant);
}
.dt_home_filters_head svg { color: var(--sg-deep-plum); flex: none; }
.dt_home_filters_head span { color: var(--sg-deep-plum); font-weight: 700; }
.dt_home_filters .collapsible { border: 0; box-shadow: none; margin: 0; }
.dt_home_filters .collapsible-header,
.dt_home_filters .collapsible-body { border-bottom: 0; }
.dt_home_filters .filter_tabs { background: transparent; }
.dt_home_filters .filter_tabs .tab a { color: var(--sg-on-surface-variant); }
.dt_home_filters .filter_tabs .tab a.active { color: var(--sg-deep-plum); }
.dt_home_filters .search_filters { padding: 20px 24px; }
.dt_home_filters .search_filters h5 {
    font-family: var(--sg-font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sg-on-surface-variant);
    margin: 0 0 12px;
}
.dt_home_filters .btn_wrapper .btn {
    background: var(--sg-deep-plum);
    color: #fff;
    border-radius: var(--sg-rounded-full);
    height: 44px;
    line-height: 44px;
    padding: 0 28px;
    box-shadow: var(--sg-shadow-btn);
}
.dt_home_filters .btn_wrapper .btn:hover { background: var(--sg-primary-container); }

/* Section titles (Random Users / etc.) */
.find_matches_cont .dt_ltst_users .dt_home_rand_user h4.bold {
    font-family: var(--sg-font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--sg-deep-plum);
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 28px 0 20px;
}
.find_matches_cont .dt_ltst_users .dt_home_rand_user h4.bold svg { color: var(--sg-deep-plum); }

/* Complete Profile wizard */
.dt_signup_steps { max-width: 760px; margin: 0 auto; }
.steps_header_steps {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 0;
    margin: 0 0 28px;
    list-style: none;
}
.steps_header_steps li { flex: 1; max-width: 200px; }
.steps_header_steps li > div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: var(--sg-rounded-full);
    background: var(--sg-surface-container-lowest);
    border: 1px solid var(--sg-outline-variant);
    font-family: var(--sg-font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--sg-on-surface-variant);
}
.steps_header_steps li > div svg { color: var(--sg-deep-plum); }
/* style.css's li>div:after/:before draw a chevron via a border-triangle hack
   sized for the legacy 34px-tall interlocking pill (no gap, negative margin).
   This redesign uses flex + gap for spacing instead, so that triangle no
   longer lines up — it floats above the now-taller pill. Not needed here. */
.steps_header_steps li > div:after,
.steps_header_steps li > div:before {
    display: none;
}

/* Complete Profile: page-head trust badge + numbered stepper (design ref:
   Screens/verify_email_shaadigram/verifyemail.png). steps_header_steps
   above is the previous pill design, left in place but unused now that
   steps.php renders .sg-stepper instead -- harmless dead CSS, not worth
   the risk of touching an already-verified page's other selectors. */
.sg-page__head--split {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.sg-trust-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: var(--sg-rounded-full);
    background: var(--sg-primary-fixed);
    color: var(--sg-on-primary-fixed-variant);
    font-size: 0.8125rem;
    font-weight: 500;
    max-width: 280px;
}
.sg-trust-badge svg { flex-shrink: 0; color: var(--sg-deep-plum); }
.sg-stepper {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 12px;
    padding: 8px 0 4px;
}
.sg-stepper__step {
    display: flex;
    align-items: center;
    gap: 10px;
}
.sg-stepper__circle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--sg-rounded-full);
    background: var(--sg-primary-fixed);
    color: var(--sg-deep-plum);
    transition: all 0.25s ease;
}
.sg-stepper__text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}
.sg-stepper__text b {
    font-family: var(--sg-font-body);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--sg-on-surface-variant);
    margin-right: 2px;
}
.sg-stepper__text small {
    font-size: 0.75rem;
    color: var(--sg-outline);
}
.sg-stepper__line {
    flex: 1 1 32px;
    max-width: 56px;
    align-self: center;
    border-top: 2px dashed var(--sg-outline-variant);
    margin: 0 -4px;
}
/* Current step: bigger, filled circle + bold dark label. Matches whichever
   .sg-stepper__step the active .slider_container.slider-N-active points at
   -- earlier steps and later steps both stay in the default light style
   above, the reference design doesn't distinguish "done" from "upcoming". */
.slider_container.slider-one-active .sg-stepper__step[data-n="1"] .sg-stepper__circle,
.slider_container.slider-two-active .sg-stepper__step[data-n="2"] .sg-stepper__circle,
.slider_container.slider-three-active .sg-stepper__step[data-n="3"] .sg-stepper__circle {
    width: 48px;
    height: 48px;
    background: var(--sg-deep-plum);
    color: #fff;
    box-shadow: var(--sg-shadow-btn);
}
.slider_container.slider-one-active .sg-stepper__step[data-n="1"] .sg-stepper__text b,
.slider_container.slider-two-active .sg-stepper__step[data-n="2"] .sg-stepper__text b,
.slider_container.slider-three-active .sg-stepper__step[data-n="3"] .sg-stepper__text b {
    color: var(--sg-deep-plum);
}
@media (max-width: 640px) {
    .sg-stepper__text small { display: none; }
    .sg-stepper { gap: 6px; }
    .sg-stepper__line { flex-basis: 16px; }
}

/* Materialize's own .slider component CSS (materialize.min.css) hardcodes
   height: 400px -- fine for the Avatar/Info panels, but the redesigned
   Verification panel's content (icon, title, email row, 4-box OTP, "why
   verify" trust panel) needs ~543px and was getting silently clipped by
   .slider's overflow:hidden. Scoped to this wizard's slider specifically
   so Materialize's carousel elsewhere on the site is untouched. */
.sg-wizard__body .slider { height: 560px; }
.slider-form {
    background: var(--sg-surface-container-lowest);
    border: 1px solid var(--sg-outline-variant);
    border-radius: var(--sg-rounded-xl);
    box-shadow: var(--sg-shadow-ambient);
    padding: 32px;
}
.slider-form h6 { font-family: var(--sg-font-display); color: var(--sg-deep-plum); font-size: 1.375rem; }
.slider-form p { color: var(--sg-on-surface-variant); }
.dt_selct_avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 140px;
    height: 140px;
    margin: 0 auto 20px;
    border-radius: var(--sg-rounded-xl);
    overflow: hidden;
    border: 2px dashed var(--sg-outline-variant);
    background: var(--sg-surface);
    cursor: pointer;
}
.dt_selct_avatar .svg-empty svg { width: 40px; height: 40px; color: var(--sg-outline-variant); }
.step_footer { display: flex; justify-content: center; margin-top: 24px; }
.step_footer .btn { min-width: 0 !important; height: 46px; line-height: 46px; padding: 0 32px; }
.otp_head, .enter_otp, .enter_otp_email {
    background: var(--sg-surface-container-lowest);
    border: 1px solid var(--sg-outline-variant);
    border-radius: var(--sg-rounded-xl);
    padding: 28px;
    text-align: center;
    margin-bottom: 20px;
}
.otp_head svg { color: var(--sg-deep-plum); }
.otp_head p { font-family: var(--sg-font-display); color: var(--sg-deep-plum); font-size: 1.25rem; font-weight: 700; }

/* My profile page cards */
.dt_user_profile { background: transparent; }
.dt_user_profile .about_block {
    background: var(--sg-surface-container-lowest);
    border: 1px solid var(--sg-outline-variant);
    border-radius: var(--sg-rounded-xl);
    padding: 20px;
    margin-bottom: 16px;
}
.dt_user_profile .about_block > h4 {
    font-family: var(--sg-font-body);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sg-on-surface-variant);
}
.dt_user_profile .dt_user_info {
    background: var(--sg-surface-container-lowest);
    border: 1px solid var(--sg-outline-variant);
    border-radius: var(--sg-rounded-xl);
}


/* ---------------------------------------------------------------------------
   Legacy header bar removal.

   .dt_hdr_sec_links is the pre-redesign secondary header. It is
   position:absolute, z-index:100, and a direct child of <body>, so it painted
   ON TOP of .sg-nav__links -- the redesign's own nav -- and the underlying
   link text showed through the gaps between its pills ("...atc.", "s").

   It is styled only by the legacy style.css; the design system never adopted
   it. Its two unique destinations (Visits, Credits) have been folded into
   .sg-nav__links, so nothing is lost by hiding it.
--------------------------------------------------------------------------- */
.dt_hdr_sec_links {
    display: none !important;
}


/* ---------------------------------------------------------------------------
   Toggle switch restoration (settings-privacy, notification preferences).

   Something in the legacy cascade flattened Materialize's switch: the track
   rendered as a 50x18 rectangle (border-radius 3px, #f1f1f1) and the knob as a
   25x18 SQUARE (border-radius 0, #d8d8d8). Grey on grey with no round knob, so
   on and off were indistinguishable at a glance.

   Restored as a proper pill + circular knob using the design tokens, with a
   clear checked state.
--------------------------------------------------------------------------- */
/* style.css scopes the flattened version as `.dt_settings form .switch label
   .lever` (0,3,2), which outranks a bare `.switch label .lever` no matter how
   late this file loads. Each rule is therefore repeated with a `body
   .dt_settings form` prefix so it actually wins on the settings pages. */
.switch label .lever,
body .dt_settings form .switch label .lever {
    width: 44px;
    height: 22px;
    border-radius: 999px;
    background-color: var(--sg-surface-container-high, #efe5ef);
    border: 1px solid rgba(26, 26, 26, .12);
    transition: background-color .2s ease, border-color .2s ease;
    vertical-align: middle;
    overflow: visible;
}
.switch label .lever::after,
body .dt_settings form .switch label .lever::after {
    width: 18px;
    height: 18px;
    top: 1px;
    left: 1px;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(26, 26, 26, .28);
    transition: transform .2s ease, background-color .2s ease;
}
/* the stock ::before is the ripple halo, not part of the track -- keep it
   pinned to the knob's resting position so it never reads as a second knob */
.switch label .lever::before,
body .dt_settings form .switch label .lever::before {
    width: 18px;
    height: 18px;
    top: 1px;
    left: 1px;
    border-radius: 50%;
}
.switch label input[type=checkbox]:checked + .lever,
body .dt_settings form .switch label input[type=checkbox]:checked + .lever {
    background-color: var(--sg-primary-container, #662d91);
    border-color: var(--sg-primary, #4d0f79);
}
.switch label input[type=checkbox]:checked + .lever::after,
body .dt_settings form .switch label input[type=checkbox]:checked + .lever::after {
    background-color: #fff;
    transform: translateX(22px);
    left: 1px;
}
.switch label input[type=checkbox]:checked + .lever::before,
body .dt_settings form .switch label input[type=checkbox]:checked + .lever::before {
    transform: translateX(22px);
    left: 1px;
}
/* keep the focus ripple subtle and on-brand rather than the stock teal */
.switch label input[type=checkbox]:not(:disabled) ~ .lever:active::before,
.switch label input[type=checkbox]:checked:not(:disabled) ~ .lever:active::before {
    background-color: rgba(102, 45, 145, .12);
}
.switch label input[type=checkbox]:disabled + .lever {
    opacity: .5;
}

/* Discover page redesign */
.sg-hero-search { display: flex; gap: 2rem; flex-wrap: wrap; padding: 2rem 0; }
.sg-hero-search__intro { flex: 1 1 320px; }
.sg-hero-search__headline { font-family: var(--sg-font-display); font-size: 2.4rem; color: var(--sg-on-surface); margin: 0 0 0.5rem; }
.sg-hero-search__headline-accent { color: var(--sg-primary); }
.sg-hero-search__sub { color: var(--sg-on-surface-variant); margin-bottom: 1.5rem; }
.sg-hero-search__stats { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.sg-stat { display: flex; flex-direction: column; }
.sg-stat strong { font-size: 1.4rem; color: var(--sg-primary); }
.sg-stat span { font-size: 0.8rem; color: var(--sg-on-surface-variant); }
.sg-hero-search__panel { flex: 2 1 480px; background: var(--sg-surface); border-radius: var(--sg-rounded-xl); padding: 1.5rem; box-shadow: 0 4px 24px rgba(0,0,0,0.06); }
.sg-hero-search__tabpanel { padding-top: 1rem; }

.sg-categories__head, .sg-featured__head, .sg-recently-active__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.sg-view-all { display: inline-flex; align-items: center; gap: 0.3rem; border-radius: 999px; padding: 0.4rem 1rem; font-size: 0.85rem; white-space: nowrap; }
.sg-view-all .material-symbols-outlined { font-size: 1rem; }
.sg-hero-search__new-badge { font-size: 0.62rem; font-weight: 700; line-height: 1; padding: 0.22rem 0.5rem; margin-left: 0.35rem; vertical-align: middle; border-radius: 999px; }
/* tabs: sentence case with a purple underline on the active tab (Screens/dicover.png) */
.sg-hero-search__tabs { background: transparent; border-bottom: 1px solid var(--sg-outline-variant); height: auto; margin-bottom: 1.25rem; }
.sg-hero-search__tabs .tab a { text-transform: none; font-size: 0.9rem; font-weight: 600; color: var(--sg-on-surface-variant); padding: 0 0.9rem; }
.sg-hero-search__tabs .tab a.active, .sg-hero-search__tabs .tab a:hover { color: var(--sg-primary); background: transparent; }
.sg-hero-search__tabs .indicator { background-color: var(--sg-primary); height: 2px; }

.sg-categories { padding: 2rem 0; }
.sg-categories__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.9rem; margin-top: 1rem; }
@media (max-width: 1100px) { .sg-categories__grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (max-width: 700px) { .sg-categories__grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.sg-category-card { background: var(--sg-surface-container); border: none; border-radius: var(--sg-rounded-lg); padding: 1.25rem 1rem; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 0.6rem; }
.sg-category-card__icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--sg-rounded);
    background: var(--sg-surface-container-high);
}
.sg-category-card__icon { color: var(--sg-primary); font-size: 1.4rem; }
.sg-category-card__label { font-weight: 600; }
.sg-category-card__sub { font-size: 0.78rem; color: var(--sg-on-surface-variant); }
/* Per-category accent (design ref: Screens/dicover.png) -- Browse by
   Category and Why ShaadiGram both rendered every icon in the same single
   plum color; the reference varies the icon-badge color per item. */
.sg-category-card[data-accent="orange"] .sg-category-card__icon-badge, .sg-why__tile[data-accent="orange"] .sg-why__icon-badge { background: #fde6d2; }
.sg-category-card[data-accent="orange"] .sg-category-card__icon, .sg-why__tile[data-accent="orange"] .material-symbols-outlined { color: #b8621b; }
.sg-category-card[data-accent="purple"] .sg-category-card__icon-badge, .sg-why__tile[data-accent="purple"] .sg-why__icon-badge { background: var(--sg-primary-fixed); }
.sg-category-card[data-accent="purple"] .sg-category-card__icon, .sg-why__tile[data-accent="purple"] .material-symbols-outlined { color: var(--sg-primary); }
.sg-category-card[data-accent="blue"] .sg-category-card__icon-badge, .sg-why__tile[data-accent="blue"] .sg-why__icon-badge { background: #dbeafe; }
.sg-category-card[data-accent="blue"] .sg-category-card__icon, .sg-why__tile[data-accent="blue"] .material-symbols-outlined { color: #1d4ed8; }
.sg-category-card[data-accent="pink"] .sg-category-card__icon-badge, .sg-why__tile[data-accent="pink"] .sg-why__icon-badge { background: #fbd9e6; }
.sg-category-card[data-accent="pink"] .sg-category-card__icon, .sg-why__tile[data-accent="pink"] .material-symbols-outlined { color: #b6215f; }
.sg-category-card[data-accent="teal"] .sg-category-card__icon-badge, .sg-why__tile[data-accent="teal"] .sg-why__icon-badge { background: #d6f0ec; }
.sg-category-card[data-accent="teal"] .sg-category-card__icon, .sg-why__tile[data-accent="teal"] .material-symbols-outlined { color: #0f766e; }

.sg-featured, .sg-recently-active { padding: 2rem 0; }
.sg-featured__pill { font-size: 0.7rem; background: var(--sg-secondary-container); color: var(--sg-secondary); border-radius: var(--sg-rounded); padding: 0.15rem 0.5rem; margin-left: 0.5rem; }
.sg-featured__scroller { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: 0.5rem; }
.sg-recently-active__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 1rem; }

.sg-compact-card { flex: 0 0 220px; background: var(--sg-surface-container-lowest); border: 1px solid var(--sg-outline-variant); border-radius: var(--sg-rounded-lg); overflow: hidden; }
.sg-compact-card__media { position: relative; aspect-ratio: 3/4; }
.sg-compact-card__media img { width: 100%; height: 100%; object-fit: cover; }
.sg-compact-card__badge { position: absolute; top: 0.5rem; left: 0.5rem; background: var(--sg-primary); color: #fff; font-size: 0.7rem; padding: 0.15rem 0.5rem; border-radius: var(--sg-rounded); }
.sg-compact-card__badge--online { background: #2e7d32; }
.sg-compact-card__body { padding: 0.75rem; }
.sg-compact-card__name { display: flex; align-items: center; gap: 0.3rem; font-weight: 600; }
.sg-compact-card__meta, .sg-compact-card__line { font-size: 0.8rem; color: var(--sg-on-surface-variant); margin: 0.15rem 0; }
.sg-compact-card__actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.sg-compact-card__icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--sg-surface-container-high); color: var(--sg-primary); }

.sg-popular-filters { padding: 1rem 0 2rem; }
.sg-popular-filters__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 0.75rem; }
.sg-chip-toggle { display: inline-flex; align-items: center; gap: 0.35rem; border: 1px solid var(--sg-outline-variant); background: var(--sg-surface-container-lowest); border-radius: 999px; padding: 0.4rem 1rem; font-size: 0.85rem; cursor: pointer; }
.sg-chip-toggle .material-symbols-outlined { font-size: 1.05rem; }
.sg-chip-toggle--active { background: var(--sg-primary); color: #fff; border-color: var(--sg-primary); }
.sg-chip-toggle--active .material-symbols-outlined { color: #fff; }
.sg-chip-toggle[data-filter="_recently_active_only"] .material-symbols-outlined { color: var(--sg-primary); }
.sg-chip-toggle[data-filter="_verified_only"] .material-symbols-outlined { color: #1e8e3e; }
.sg-chip-toggle[data-filter="_relationship"] .material-symbols-outlined { color: #b6215f; }
.sg-chip-toggle[data-filter="_has_photos_only"] .material-symbols-outlined { color: #1d4ed8; }
.sg-chip-toggle[data-filter="_horoscope_filled_only"] .material-symbols-outlined { color: var(--sg-secondary); }
/* .sg-chip-reset previously fell through to Materialize's .btn (solid
   plum fill) -- visually identical to .sg-chip-toggle--active, so a
   "no filters applied" default state looked like an active selection. */
.sg-chip-reset.btn {
    background: transparent !important;
    color: var(--sg-on-surface-variant) !important;
    border: 1px solid var(--sg-outline-variant);
    border-radius: 999px;
    box-shadow: none !important;
    height: auto;
    line-height: normal;
    padding: 0.4rem 1rem !important;
    font-weight: 600;
    text-transform: none;
}
.sg-chip-reset.btn:hover { background: var(--sg-surface-container) !important; }

.sg-why { padding: 2rem 0; }
.sg-why__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.25rem; margin-top: 1rem; }
.sg-why__tile { background: transparent; border-radius: var(--sg-rounded-lg); padding: 0; display: grid; grid-template-columns: auto minmax(0,1fr); column-gap: 0.85rem; row-gap: 0.2rem; align-items: start; }
.sg-why__tile .sg-why__icon-badge { grid-row: 1 / span 2; }
.sg-why__tile h4, .sg-why__tile p { grid-column: 2; }
/* the tile headings had no rule at all, so they fell back to the theme's
   serif h4; the reference uses a small bold dark title with grey copy. */
.sg-why__tile h4 { font-family: var(--sg-font-body); font-size: 0.95rem; font-weight: 700; color: var(--sg-on-surface); margin: 0 0 0.25rem; line-height: 1.35; }
.sg-why__tile p { font-size: 0.82rem; line-height: 1.5; color: var(--sg-on-surface-variant); margin: 0; }
.sg-why__tile > span + h4 { margin-top: 0.15rem; }
.sg-why__icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: var(--sg-rounded);
    background: var(--sg-surface-container-high);
}
.sg-why__tile .material-symbols-outlined { color: var(--sg-primary); font-size: 1.4rem; }

.sg-discover-results { padding-top: 1rem; }

/* My Profile page redesign */
.sg-verified-badge { display: inline-flex; vertical-align: middle; }

.sg-hero-profile { display: grid; grid-template-columns: 280px 1fr 260px; gap: 1.5rem; padding: 1.5rem 0; align-items: start; }
.sg-hero-profile__media { position: relative; background: var(--sg-surface-container-lowest); border-radius: var(--sg-rounded-lg); overflow: hidden; border: 1px solid var(--sg-outline-variant); }
.sg-hero-profile__media img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; }
.sg-hero-profile__online-badge { position: absolute; top: 0.75rem; left: 0.75rem; background: #2e7d32; color: #fff; font-size: 0.7rem; padding: 0.2rem 0.6rem; border-radius: 999px; z-index: 2; }
.sg-hero-profile__chng-photo { position: absolute; left: 0.75rem; bottom: 0.75rem; z-index: 2; }
.sg-hero-profile__chng-photo .btn-upload-image { background: rgba(0,0,0,0.55); color: #fff; border-radius: 999px; padding: 0.35rem 0.8rem; font-size: 0.78rem; display: inline-flex; align-items: center; gap: 0.3rem; cursor: pointer; }
.sg-hero-profile__thumbs { display: flex; gap: 0.4rem; padding: 0.5rem; }
.sg-hero-profile__thumbs img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: var(--sg-rounded); }

.sg-hero-profile__name { font-family: var(--sg-font-display); font-size: 1.6rem; margin: 0 0 0.25rem; display: flex; align-items: center; gap: 0.4rem; }
.sg-hero-profile__meta { color: var(--sg-on-surface-variant); margin: 0 0 0.6rem; }
.sg-hero-profile__badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; }
.sg-pill { font-size: 0.75rem; padding: 0.25rem 0.7rem; border-radius: 999px; font-weight: 600; }
.sg-pill--premium { background: var(--sg-secondary-container); color: var(--sg-secondary); }
.sg-pill--verified { background: #e3f2e3; color: #2e7d32; }
.sg-pill--horoscope { background: var(--sg-primary-fixed); color: var(--sg-on-primary-fixed); }
.sg-hero-profile__about { font-style: italic; color: var(--sg-on-surface-variant); margin: 0 0 0.25rem; }
.sg-read-more { font-size: 0.85rem; color: var(--sg-primary); font-weight: 600; }
.sg-hero-profile__actions { display: flex; gap: 0.6rem; margin: 1rem 0; flex-wrap: wrap; }
.sg-btn-outline { background: var(--sg-surface-container-lowest); border: 1px solid var(--sg-outline-variant); color: var(--sg-on-surface); }
.sg-quickfacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--sg-outline-variant); }
.sg-quickfacts__label { display: block; font-size: 0.72rem; color: var(--sg-on-surface-variant); }
.sg-quickfacts > div span:last-child { font-weight: 600; }

.sg-profile-strength { background: var(--sg-surface-container-lowest); border: 1px solid var(--sg-outline-variant); border-radius: var(--sg-rounded-lg); padding: 1.25rem; text-align: center; }
.sg-profile-strength h3 { font-size: 1rem; margin: 0 0 0.25rem; text-align: left; }
.sg-profile-strength > p { font-size: 0.8rem; color: var(--sg-on-surface-variant); text-align: left; margin: 0 0 1rem; }
.sg-strength-ring { width: 110px; height: 110px; border-radius: 50%; margin: 0 auto 1rem; display: flex; align-items: center; justify-content: center; position: relative; }
.sg-strength-ring::before { content: ''; position: absolute; inset: 10px; background: var(--sg-surface-container-lowest); border-radius: 50%; }
.sg-strength-ring span { position: relative; font-size: 1.3rem; font-weight: 700; color: var(--sg-primary); }
.sg-strength-checklist { list-style: none; margin: 0 0 1rem; padding: 0; text-align: left; }
.sg-strength-checklist li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; padding: 0.3rem 0; color: var(--sg-outline); }
.sg-strength-checklist li.is-done { color: var(--sg-on-surface); }
.sg-strength-checklist li.is-done svg { color: #2e7d32; }
.sg-improve-profile { display: block; text-align: center; font-weight: 600; color: var(--sg-primary); }

.sg-premium-banner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; background: linear-gradient(90deg, var(--sg-primary-fixed), var(--sg-secondary-container)); border-radius: var(--sg-rounded-lg); padding: 1.25rem 1.5rem; margin-bottom: 1.5rem; }
.sg-premium-banner__text { display: flex; align-items: center; gap: 1rem; }
.sg-premium-banner__text h4 { margin: 0; font-size: 1rem; }
.sg-premium-banner__text p { margin: 0.15rem 0 0; font-size: 0.82rem; color: var(--sg-on-surface-variant); }

.sg-myprofile-layout { display: grid; grid-template-columns: 240px 1fr; gap: 1.5rem; align-items: start; }
.sg-myprofile-nav { position: sticky; top: 90px; }
.sg-subnav { list-style: none; margin: 0 0 1rem; padding: 0.5rem 0; background: var(--sg-surface-container-lowest); border: 1px solid var(--sg-outline-variant); border-radius: var(--sg-rounded-lg); overflow: hidden; }
.sg-subnav li a { display: block; padding: 0.6rem 1rem; color: var(--sg-on-surface); font-size: 0.88rem; border-left: 3px solid transparent; }
.sg-subnav li a.active, .sg-subnav li a:hover { background: var(--sg-surface-container); border-left-color: var(--sg-primary); color: var(--sg-primary); font-weight: 600; }
.sg-horoscope-widget { background: var(--sg-surface-container-lowest); border: 1px solid var(--sg-outline-variant); border-radius: var(--sg-rounded-lg); padding: 1rem; text-align: center; }
.sg-horoscope-widget h4 { font-size: 0.85rem; margin: 0 0 0.25rem; }
.sg-horoscope-widget__label { color: #2e7d32; font-weight: 600; font-size: 0.8rem; margin: 0 0 0.75rem; }
.sg-horoscope-ring { width: 80px; height: 80px; border-radius: 50%; border: 6px solid var(--sg-primary); margin: 0 auto 0.5rem; display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--sg-primary); }
.sg-horoscope-widget__sub { font-size: 0.75rem; color: var(--sg-on-surface-variant); margin: 0; }

.sg-profile-cards .dt_profile_info, .sg-profile-cards .sg-profile-info { background: var(--sg-surface-container-lowest); border: 1px solid var(--sg-outline-variant); border-radius: var(--sg-rounded-lg); padding: 1.25rem; margin-bottom: 1.25rem; }
.sg-profile-cards .dt_profile_info h5, .sg-profile-cards .sg-profile-info h5 { font-family: var(--sg-font-display); font-size: 1rem; margin: 0 0 0.75rem; }
/* profile.php prints a wrapper for each legacy group even when the user filled
   none of its fields (the h5 heading is itself conditional), which would leave
   an empty bordered box. */
.sg-profile-cards .sg-profile-info:not(:has(h5)) { display: none; }

.sg-photos-card { background: var(--sg-surface-container-lowest); border: 1px solid var(--sg-outline-variant); border-radius: var(--sg-rounded-lg); padding: 1.25rem; }
.sg-photos-card h3 { display: flex; justify-content: space-between; align-items: center; font-family: var(--sg-font-body); font-weight: 700; font-size: 1.02rem; color: var(--sg-on-surface); margin: 0 0 1rem; }
.sg-photos-card h3 > span:first-child { display: flex; align-items: center; gap: 0.55rem; }
.sg-photos-card h3 .material-symbols-outlined { color: var(--sg-primary); font-size: 22px; }
.sg-photos-card h3 a { font-size: 0.82rem; font-weight: 600; color: var(--sg-primary); }
.sg-photos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 0.75rem; }
.sg-photos-grid img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: var(--sg-rounded); display: block; }
.sg-photos-grid__more { position: relative; }
.sg-photos-grid__more span { position: absolute; inset: 0; background: rgba(0,0,0,0.55); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; border-radius: var(--sg-rounded); }
.sg-photos-grid__add { aspect-ratio: 1/1; border: 1px dashed var(--sg-outline-variant); border-radius: var(--sg-rounded); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem; color: var(--sg-on-surface-variant); font-size: 0.75rem; text-align: center; }

/* ==========================================================================
   Public Profile Page (sg-profile-*)
   Matches aanya_shaadigram_profile mockup — hero overlay + 2-col layout
   ========================================================================== */
.sg-profile-page { background: var(--sg-warm-cream); }
.sg-profile-page .sg-page { background: var(--sg-warm-cream); }

/* Two-column profile layout */
.sg-profile-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sg-gutter);
    max-width: var(--sg-container-max);
    margin: 0 auto;
    padding: 0 var(--sg-margin-mobile);
}
@media (min-width: 768px) {
    .sg-profile-layout {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        padding: 0 var(--sg-margin-desktop);
    }
}

.sg-profile-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
@media (min-width: 768px) {
    .sg-profile-sidebar {
        position: sticky;
        top: 120px;
        height: fit-content;
    }
}

.sg-profile-main {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    padding: 2rem 0;
}
@media (min-width: 768px) {
    .sg-profile-main { padding: 0 0 3rem; }
}

/* Hero image with overlay */
.sg-profile-hero {
    position: relative;
    width: 100%;
    height: 665px;
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 24px 48px rgba(26, 26, 26, 0.12);
}
@media (min-width: 768px) {
    .sg-profile-hero {
        height: 600px;
        border-radius: var(--sg-rounded-xl);
    }
}
.sg-profile-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}
.sg-profile-hero:hover img { transform: scale(1.05); }
.sg-profile-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 50%);
}
.sg-profile-hero__content {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 1.5rem;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}
@media (min-width: 768px) {
    .sg-profile-hero__content { padding: 2rem; }
}
.sg-profile-hero__name {
    font-family: var(--sg-font-display);
    font-size: 2.75rem;
    line-height: 1.15;
    color: #fff;
    margin: 0 0 0.25rem;
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.sg-profile-hero__location {
    font-family: var(--sg-font-body);
    font-size: 1.125rem;
    line-height: 1.55;
    color: rgba(255,255,255,0.9);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}
.sg-profile-hero__location .material-symbols-outlined { font-size: 18px; }
.sg-profile-hero__actions {
    display: none;
    flex-direction: column;
    gap: 0.75rem;
}
@media (min-width: 768px) {
    .sg-profile-hero__actions { display: flex; }
}
.sg-profile-hero__btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}
.sg-profile-hero__btn:active { transform: scale(0.95); }
.sg-profile-hero__btn--like {
    background: #fff;
    color: var(--sg-primary);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
.sg-profile-hero__btn--like:hover { background: var(--sg-surface-variant); color: var(--sg-secondary); }
.sg-profile-hero__btn--like .material-symbols-outlined { font-size: 28px; }
.sg-profile-hero__btn--pass {
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.2);
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}
.sg-profile-hero__btn--pass:hover { background: rgba(255,255,255,0.2); }
.sg-profile-hero__btn--pass .material-symbols-outlined { font-size: 28px; }

/* Glass-panel utility */
.sg-glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 12px 32px rgba(26, 26, 26, 0.06);
}

/* At a Glance panel */
.sg-glance-panel {
    background: var(--sg-surface-container-lowest);
    border: 1px solid var(--sg-outline-variant);
    border-radius: var(--sg-rounded-xl);
    padding: 2rem;
}
.sg-glance-panel__title {
    font-family: var(--sg-font-body);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sg-on-surface-variant);
    margin: 0 0 1.5rem;
}
.sg-glance-panel__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.sg-glance-panel__item {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--sg-on-surface);
}
.sg-glance-panel__icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(102, 45, 145, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sg-primary);
    flex-shrink: 0;
}
.sg-glance-panel__label {
    font-size: 0.9375rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.35;
}
.sg-glance-panel__sub {
    font-size: 0.8125rem;
    color: var(--sg-on-surface-variant);
    margin: 2px 0 0;
}

/* Compatibility widget */
.sg-compat-widget {
    background: var(--sg-surface-container-lowest);
    border: 1px solid var(--sg-outline-variant);
    border-radius: var(--sg-rounded-xl);
    padding: 1.5rem 2rem;
    position: relative;
    overflow: hidden;
}
@media (min-width: 768px) {
    .sg-compat-widget { padding: 2rem; }
}
.sg-compat-widget__glow {
    position: absolute;
    top: 0;
    right: 0;
    width: 128px;
    height: 128px;
    background: rgba(113, 91, 45, 0.1);
    border-radius: 50%;
    filter: blur(32px);
    transform: translate(30%, -30%);
}
.sg-compat-widget__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
}
.sg-compat-widget__title {
    font-family: var(--sg-font-display);
    font-size: 1.5rem;
    line-height: 1.3;
    color: var(--sg-primary);
    margin: 0 0 0.25rem;
}
.sg-compat-widget__sub {
    font-size: 1rem;
    color: var(--sg-on-surface-variant);
    margin: 0;
}
.sg-compat-widget__score {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid rgba(201, 174, 120, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--sg-font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--sg-secondary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    flex-shrink: 0;
}
.sg-compat-widget__bars {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    position: relative;
    z-index: 1;
}
.sg-compat-widget__bar-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}
.sg-compat-widget__bar-label { color: var(--sg-on-surface); }
.sg-compat-widget__bar-pct { color: var(--sg-secondary); font-weight: 700; }
.sg-compat-widget__bar-track {
    width: 100%;
    height: 6px;
    background: var(--sg-surface-variant);
    border-radius: 999px;
    overflow: hidden;
}
.sg-compat-widget__bar-fill {
    height: 100%;
    background: var(--sg-secondary);
    border-radius: 999px;
}
.sg-compat-widget__insight {
    margin-top: 1.5rem;
    padding: 1rem;
    background: var(--sg-surface);
    border: 1px solid rgba(207, 194, 210, 0.3);
    border-radius: var(--sg-rounded);
    position: relative;
    z-index: 1;
    font-size: 1rem;
    color: var(--sg-on-surface);
    font-style: italic;
    line-height: 1.5;
}

/* Moments gallery (bento) */
.sg-profile-moments {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.sg-profile-moments__title {
    font-family: var(--sg-font-display);
    font-size: 1.5rem;
    color: var(--sg-primary);
    margin: 0;
}
.sg-profile-moments__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    grid-auto-rows: 200px;
}
.sg-profile-moments__grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--sg-rounded-xl);
    transition: transform 0.5s ease;
}
.sg-profile-moments__grid img:hover { transform: scale(1.05); }
.sg-profile-moments__grid .span-2-row-2 {
    grid-column: span 2;
    grid-row: span 2;
}

/* Vibe tags */
.sg-profile-vibe {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.sg-profile-vibe__title {
    font-family: var(--sg-font-display);
    font-size: 1.5rem;
    color: var(--sg-primary);
    margin: 0;
}
.sg-profile-vibe__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.sg-profile-vibe__tag {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 999px;
    background: var(--sg-surface);
    color: var(--sg-on-surface-variant);
    border: 1px solid rgba(207, 194, 210, 0.3);
    letter-spacing: 0.02em;
}
.sg-profile-vibe__tag--primary {
    background: var(--sg-primary-fixed);
    color: var(--sg-primary);
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

/* Prompt cards */
.sg-profile-prompts {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.sg-profile-prompt {
    background: var(--sg-surface);
    border: 1px solid rgba(207, 194, 210, 0.2);
    border-radius: var(--sg-rounded-xl);
    padding: 2rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    transition: box-shadow 0.2s ease;
}
.sg-profile-prompt:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
.sg-profile-prompt__label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--sg-secondary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0 0 0.75rem;
}
.sg-profile-prompt__text {
    font-family: var(--sg-font-display);
    font-size: 1.25rem;
    line-height: 1.4;
    color: var(--sg-primary);
    margin: 0;
}

/* Mobile header */
.sg-profile-mobile-header {
    display: flex;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 40;
    padding: var(--sg-margin-mobile);
    justify-content: space-between;
    align-items: flex-start;
    pointer-events: none;
}
.sg-profile-mobile-header__btn {
    pointer-events: auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0,0,0,0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.2);
    cursor: pointer;
    transition: transform 0.15s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.sg-profile-mobile-header__btn:active { transform: scale(0.95); }
@media (min-width: 768px) {
    .sg-profile-mobile-header { display: none; }
}

/* Mobile action bar */
.sg-profile-action-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    z-index: 50;
    padding: 1rem var(--sg-margin-mobile);
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    align-items: center;
    box-shadow: 0 -10px 40px rgba(0,0,0,0.1);
}
@media (min-width: 768px) {
    .sg-profile-action-bar { display: none; }
}
.sg-profile-action-bar__btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--sg-surface-variant);
    color: var(--sg-on-surface-variant);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.15s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.sg-profile-action-bar__btn:active { transform: scale(0.95); }
.sg-profile-action-bar__btn .material-symbols-outlined { font-size: 28px; }
.sg-profile-action-bar__btn--primary {
    flex: 1;
    border-radius: 999px;
    height: 56px;
    background: var(--sg-primary);
    color: #fff;
    font-family: var(--sg-font-body);
    font-size: 0.875rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    box-shadow: 0 8px 24px rgba(102, 45, 145, 0.2);
}
.sg-profile-action-bar__btn--primary .material-symbols-outlined { font-size: 24px; }
.sg-profile-action-bar__btn.is-on { background: var(--sg-primary-fixed); color: var(--sg-primary); }
.sg-profile-action-bar__btn.is-on .material-symbols-outlined { font-variation-settings: 'FILL' 1; }
.sg-profile-action-bar__btn--primary.is-done { background: var(--sg-primary-fixed); color: var(--sg-primary); box-shadow: none; }

/* Profile detail: primary call-to-action row (Send Interest / Message / Like /
   Shortlist / Request Photo) -- sits in the hero so it is visible above the fold. */
.sg-profile-cta { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0.25rem 0 1rem; }
.sg-profile-cta__btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
    height: 44px; padding: 0 1.1rem; border-radius: 999px; cursor: pointer;
    font-family: var(--sg-font-body); font-size: 0.9rem; font-weight: 600; white-space: nowrap;
    background: var(--sg-surface-container-lowest); color: var(--sg-primary);
    border: 1.5px solid var(--sg-primary-container);
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.sg-profile-cta__btn .material-symbols-outlined { font-size: 20px; }
.sg-profile-cta__btn:hover { background: var(--sg-primary-fixed); }
.sg-profile-cta__btn:active { transform: scale(0.97); }
.sg-profile-cta__btn--primary {
    background: var(--sg-primary-container); color: var(--sg-on-primary); border-color: var(--sg-primary-container);
    padding: 0 1.6rem; font-size: 0.95rem; box-shadow: 0 8px 24px rgba(102, 45, 145, 0.25);
}
.sg-profile-cta__btn:focus { background-color: var(--sg-surface-container-lowest); outline: none; }
.sg-profile-cta__btn:focus-visible { outline: 2px solid var(--sg-primary); outline-offset: 2px; }
.sg-profile-cta__btn--primary:focus { background-color: var(--sg-primary-container); }
.sg-profile-cta__btn--primary:hover { background: var(--sg-primary); color: var(--sg-on-primary); }
.sg-profile-action-bar__btn--primary:focus { background-color: var(--sg-primary); }
.sg-profile-cta__btn.is-on, .sg-profile-cta__btn.lk_active { background: var(--sg-primary-fixed); }
.sg-profile-cta__btn.is-on .material-symbols-outlined,
.sg-profile-cta__btn.lk_active .material-symbols-outlined { font-variation-settings: 'FILL' 1; }
.sg-profile-cta__btn.is-done, .sg-profile-cta__btn:disabled { cursor: default; box-shadow: none; transform: none; }
.sg-profile-cta__btn--primary.is-done { background: var(--sg-primary-fixed); color: var(--sg-primary); }
@media (max-width: 600px) {
    .sg-profile-cta__btn { flex: 1 1 calc(50% - 0.3rem); padding: 0 0.75rem; }
    .sg-profile-cta__btn--primary { flex-basis: 100%; }
}

/* Section headings in profile */
.sg-profile-section {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.sg-profile-section__title {
    font-family: var(--sg-font-display);
    font-size: 1.5rem;
    line-height: 1.3;
    color: var(--sg-primary);
    margin: 0;
}

/* User action buttons row */
.sg-profile-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin: 1rem 0;
}
.sg-profile-actions a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 600;
    background: var(--sg-surface-container-lowest);
    border: 1px solid var(--sg-outline-variant);
    color: var(--sg-on-surface-variant);
    transition: all 0.2s ease;
}
.sg-profile-actions a:hover {
    background: var(--sg-surface-container);
    color: var(--sg-primary);
    border-color: var(--sg-primary);
}

/* Profile info cards wrapper */
.sg-profile-cards {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-top: 1rem;
}

/* Interests chips */
.sg-interests {
    background: var(--sg-surface-container-lowest);
    border: 1px solid var(--sg-outline-variant);
    border-radius: var(--sg-rounded-lg);
    padding: 1.25rem;
}
.sg-interests__title {
    font-family: var(--sg-font-display);
    font-size: 1rem;
    margin: 0 0 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.sg-interests__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.sg-interests__list .chip {
    margin: 0;
    border-radius: 999px;
    background: var(--sg-surface-container);
    color: var(--sg-on-surface);
    font-weight: 500;
}

/* Social links */
.sg-social-links {
    background: var(--sg-surface-container-lowest);
    border: 1px solid var(--sg-outline-variant);
    border-radius: var(--sg-rounded-lg);
    padding: 1.25rem;
}
.sg-social-links__title {
    font-family: var(--sg-font-display);
    font-size: 1rem;
    margin: 0 0 0.75rem;
}

@media (max-width: 992px) {
    .sg-hero-profile { grid-template-columns: 1fr; }
    .sg-myprofile-layout { grid-template-columns: 1fr; }
    .sg-myprofile-nav { position: static; }
}

/* ---------- Wizard / Complete Profile Steps ---------- */
.sg-wizard {
    max-width: 780px;
    margin: 0 auto;
    background: var(--sg-surface);
    border-radius: var(--sg-rounded-xl);
    box-shadow: var(--sg-shadow-ambient);
    overflow: hidden;
}
.sg-wizard__steps {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 32px 0;
    gap: 0;
}
.sg-wizard__step {
    display: flex;
    align-items: center;
    gap: 0;
}
.sg-wizard__step-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px 8px 28px;
    background: var(--sg-surface-container);
    color: var(--sg-on-surface-variant);
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 0;
    position: relative;
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%);
    margin-right: -12px;
}
.sg-wizard__step:first-child .sg-wizard__step-badge {
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 0 50%);
    padding-left: 20px;
}
.sg-wizard__step:last-child .sg-wizard__step-badge {
    clip-path: polygon(0 0, 100% 0, 100% 50%, 100% 100%, 0 100%, 12px 50%);
    margin-right: 0;
}
.sg-wizard__step--active .sg-wizard__step-badge {
    background: var(--sg-primary);
    color: #fff;
}
.sg-wizard__step--done .sg-wizard__step-badge {
    background: var(--sg-deep-plum);
    color: #fff;
}
.sg-wizard__step-badge .material-symbols-outlined {
    font-size: 18px;
}
.sg-wizard__body {
    /* Horizontal padding must stay 0: this wraps the legacy .slider_container
       carousel (steps.php), whose translateX() math (.slider_container.full
       .slider { transform: translate(-1360px) }, etc.) assumes each
       .slider-form panel sits flush against this box's edges. Padding here
       shifts panels out of alignment with that fixed math, exposing the
       previous panel on one side and clipping the current one on the other.
       .slider-form already carries its own internal padding (56px 50px). */
    padding: 40px 0;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.sg-wizard__form {
    width: 100%;
    text-align: center;
}
.sg-wizard__form .input-field {
    text-align: left;
    margin-bottom: 0.5rem;
}
.sg-wizard__form .row {
    margin-bottom: 0;
}
.sg-wizard__form .select-wrapper input.select-dropdown {
    border-bottom: 1px solid var(--sg-outline-variant);
    text-align: left;
}
.sg-wizard__footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 16px 48px;
    border-top: 1px solid var(--sg-outline-variant);
    gap: 12px;
}
.sg-wizard__footer .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    padding: 0 28px;
    height: 44px;
    line-height: 44px;
    font-weight: 600;
    font-size: 0.9375rem;
    text-transform: none;
    letter-spacing: 0;
}
.sg-wizard__footer .btn svg {
    width: 18px;
    height: 18px;
    transition: transform 0.2s ease;
}
.sg-wizard__footer .btn:hover svg {
    transform: translateX(3px);
}

/* Avatar Upload */
.sg-avatar-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 8px 0;
}
.sg-avatar-upload__preview {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: var(--sg-surface-container);
    border: 3px dashed var(--sg-outline-variant);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.sg-avatar-upload__preview:hover {
    border-color: var(--sg-deep-plum);
    background-color: var(--sg-surface-container-high);
}
.sg-avatar-upload__preview .svg-empty {
    color: var(--sg-on-surface-variant);
    opacity: 0.5;
    transition: opacity 0.3s ease;
}
.sg-avatar-upload__preview:hover .svg-empty {
    opacity: 0.8;
}
.sg-avatar-upload__label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--sg-on-surface-variant);
    text-align: center;
}
.sg-avatar-upload__label strong {
    color: var(--sg-on-background);
}

/* Verification upload */
.sg-verify-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
}
.sg-verify-upload__row {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    justify-content: center;
}
.sg-verify-upload__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.sg-verify-upload__preview {
    width: 150px;
    height: 200px;
    border-radius: var(--sg-rounded-lg);
    background: var(--sg-surface-container);
    border: 2px dashed var(--sg-outline-variant);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}
.sg-verify-upload__preview:hover {
    border-color: var(--sg-deep-plum);
}
.sg-verify-upload__preview .svg-empty {
    color: var(--sg-on-surface-variant);
    opacity: 0.5;
}
.sg-verify-upload__title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--sg-on-background);
    text-align: center;
}

/* OTP Section */
.sg-otp-section {
    text-align: center;
    padding: 16px 0;
}
/* #email (steps.php email verification) has no explicit width in the
   markup, so it falls back to Materialize's shrink-to-fit inline-block
   sizing and renders too narrow to show a full address without internal
   clipping. (#mobile_validate, the phone equivalent, already has an inline
   width and isn't affected.) */
.sg-otp-section #email {
    width: 220px;
}
.sg-otp-section__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: rgba(102, 45, 145, 0.08);
    color: var(--sg-deep-plum);
}
.sg-otp-section__icon .material-symbols-outlined {
    font-size: 32px;
}
.sg-otp-section__title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--sg-on-background);
    margin: 0 0 8px;
}
.sg-otp-section__desc {
    font-size: 0.9375rem;
    color: var(--sg-on-surface-variant);
    margin: 0 0 20px;
}
.sg-otp-section__input-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}
.sg-otp-section__input-row .input-field {
    margin: 0;
    display: inline-flex;
}
.sg-otp-section__input-row .input-field input {
    width: 200px;
    margin: 0;
}
.sg-otp-section__otp-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
    flex-wrap: wrap;
}
/* steps.php nests the "Please enter the code..." paragraph inside this same
   flex row as the OTP input + Re-send link. On a nowrap row they compete for
   width and the input (width fixed to 220px by the legacy #otp_check_email
   rule in style.css, which outranks .sg-otp-section__otp-box input on
   specificity) gets squeezed into a container narrower than itself, clipping
   it. Give the paragraph its own full line so the input group always has
   room for its real width on the line below. */
.sg-otp-section__otp-box > p {
    flex: 1 1 100%;
    margin: 0 0 8px;
}
.sg-otp-section__otp-box input {
    box-sizing: border-box !important;
    width: 200px !important;
    text-align: center;
    font-size: 1.5rem;
    letter-spacing: 0.5em;
    border: 2px solid var(--sg-outline-variant) !important;
    border-radius: var(--sg-rounded-lg) !important;
    padding: 8px 12px !important;
    background: var(--sg-surface-container-lowest) !important;
    outline: none;
    transition: border-color 0.3s ease;
}
.sg-otp-section__otp-box input:focus {
    border-color: var(--sg-deep-plum) !important;
}
.sg-otp-section__otp-box a {
    font-size: 0.875rem;
    color: var(--sg-deep-plum);
    font-weight: 600;
    text-decoration: none;
}

/* Verification panel (email step, design ref:
   Screens/verify_email_shaadigram/verifyemail.png) */
.sg-verify-panel, .sg-step-header {
    text-align: center;
    max-width: 420px;
    margin: 0 auto;
}
/* .sg-step-header (Avatar/Info panels) is a lead-in block followed by
   sibling content -- .sg-verify-panel wraps its email row too, so only
   the header variant needs its own bottom margin. */
.sg-step-header { margin-bottom: 24px; }
.sg-verify-panel__icon, .sg-step-header__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: var(--sg-rounded-full);
    background: var(--sg-primary-fixed);
    color: var(--sg-deep-plum);
    margin-bottom: 16px;
}
.sg-verify-panel h3, .sg-step-header h3 {
    font-family: var(--sg-font-display);
    color: var(--sg-deep-plum);
    font-size: 1.375rem;
    margin: 0 0 8px;
}
.sg-verify-panel > p, .sg-step-header > p {
    color: var(--sg-on-surface-variant);
    margin: 0;
}
.sg-verify-panel__email-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 8px 8px 16px;
    border: 1px solid var(--sg-outline-variant);
    border-radius: var(--sg-rounded-full);
    background: var(--sg-surface-container-lowest);
}
.sg-verify-panel__email-row svg { flex-shrink: 0; color: var(--sg-deep-plum); }
.sg-verify-panel__email-row input {
    flex: 1;
    border: none !important;
    box-shadow: none !important;
    background: transparent;
    height: auto !important;
    margin: 0 !important;
}
.sg-verify-panel__send {
    border-radius: var(--sg-rounded-full) !important;
    background: var(--sg-deep-plum) !important;
    white-space: nowrap;
}
.sg-otp-boxes {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex: 1 1 100%;
}
/* #email_otp_boxes .sg-otp-boxes__input, ID-qualified: two other rules also
   !important-override text inputs here -- .sg-otp-section__otp-box input
   (still needed for the SMS branch's single wide box) and a global pill
   search-input reset (input[type="text"]:not(.browser-default) { border-*:
   ... !important }) that outranks a plain 2-class selector by one type
   selector. An ID beats both regardless of their internal specificity. */
#email_otp_boxes .sg-otp-boxes__input {
    width: 52px !important;
    height: 56px !important;
    text-align: center;
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--sg-primary);
    letter-spacing: normal !important;
    border: 2px solid var(--sg-outline-variant) !important;
    border-radius: var(--sg-rounded-lg) !important;
    background: var(--sg-surface-container-lowest) !important;
    outline: none;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: border-color 0.2s ease;
}
#email_otp_boxes .sg-otp-boxes__input:focus { border-color: var(--sg-deep-plum) !important; }
.sg-otp-resend {
    flex: 1 1 100%;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--sg-on-surface-variant);
    margin: 8px 0 0;
}
.sg-otp-resend a {
    color: var(--sg-deep-plum);
    font-weight: 600;
    text-decoration: underline;
    transition: opacity 0.2s ease;
}
.sg-otp-resend #email_resend_timer { color: var(--sg-outline); }
.sg-verify-trust {
    max-width: 480px;
    margin: 24px auto 0;
    padding: 16px 20px;
    border-radius: var(--sg-rounded-lg);
    background: var(--sg-surface-container-low);
}
.sg-verify-trust__head {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--sg-deep-plum);
    font-weight: 600;
    font-size: 0.875rem;
    margin-bottom: 10px;
}
.sg-verify-trust__items {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
}
.sg-verify-trust__items span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    color: var(--sg-on-surface-variant);
}
.sg-verify-trust__items svg { color: var(--sg-deep-plum); flex-shrink: 0; }

/* Success State */
.sg-success-state {
    text-align: center;
    padding: 32px 0;
}
.sg-success-state__check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: rgba(102, 45, 145, 0.08);
    color: var(--sg-deep-plum);
}
.sg-success-state__check .material-symbols-outlined {
    font-size: 40px;
}
.sg-success-state__title {
    font-family: var(--sg-font-display);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--sg-on-background);
    margin: 0 0 8px;
}
.sg-success-state__desc {
    font-size: 1rem;
    color: var(--sg-on-surface-variant);
    margin: 0;
}

/* Steps progress bar */
.sg-wizard__progress {
    width: 100%;
    height: 4px;
    background: var(--sg-surface-container);
    border-radius: 2px;
    margin: 0 48px;
    overflow: hidden;
}
.sg-wizard__progress-bar {
    height: 100%;
    background: var(--sg-deep-plum);
    border-radius: 2px;
    transition: width 0.4s ease;
}

@media (max-width: 768px) {
    .sg-wizard {
        border-radius: 0;
        box-shadow: none;
    }
    .sg-wizard__body {
        padding: 28px 20px;
    }
    .sg-wizard__footer {
        padding: 16px 20px;
    }
    .sg-wizard__steps {
        padding: 16px 12px 0;
        flex-wrap: wrap;
        gap: 4px;
    }
    .sg-wizard__step-badge {
        padding: 6px 14px;
        font-size: 0.75rem;
        clip-path: none;
        border-radius: 999px;
        margin-right: 0;
    }
    .sg-wizard__step:first-child .sg-wizard__step-badge,
    .sg-wizard__step:last-child .sg-wizard__step-badge {
        clip-path: none;
        border-radius: 999px;
    }
    .sg-verify-upload__preview {
        width: 120px;
        height: 160px;
    }
}

/* ===== sg- Auth Split Layout (login.php / register.php) ===== */
.sg-auth--split { display: flex; min-height: 100vh; }
.sg-auth__form-content { padding: 0; }
.sg-auth__footer { padding: 24px 0 0; }
.sg-auth__footer .footer-copyright { color: var(--sg-text-muted); font-size: 0.85rem; }
.sg-auth__footer .footer-copyright a { color: var(--sg-text-primary); }
.sg-footer-links { display: flex; flex-wrap: wrap; gap: 4px 8px; list-style: none; margin: 0; padding: 0; }
.sg-footer-links li { display: inline; }

/* ===== sg- Auth Footer (dt_login_footer replacement) ===== */
.sg-field-footer { margin-top: 24px; }

/* ===== sg- Feature/How-it-Works (index.php) ===== */
.sg-features-section { }
.sg-features-grid { }

/* ===== sg- Testimonials (index.php) ===== */
.sg-testimonials-section { }
.sg-testimonials-bg { }
.sg-shape-divider { }
.sg-testimonials-row { }
.sg-testimonials-title { }
.sg-testimonial-card { }

/* ===== sg- CTA / Get Started (index.php) ===== */
.sg-cta-section { }

/* ===== sg- Verify Alert (myprofile.php) ===== */
.sg-verify-alert { }
.sg-verify-list { }
.sg-review-badge { }
.sg-avatar-progress { }

/* ===== sg- Profile Info (myprofile.php) ===== */
.sg-profile-info { }
.sg-interest-chip { }

/* ===== sg- Upload / Video (myprofile.php) ===== */
.sg-upload-progress { }
.sg-video-uploading { }
.sg-video-thumb { }

/* ===== sg- Bank Transfer Modal (myprofile.php) ===== */
.sg-bank-transfer-modal { }
.sg-user-profile { }
.sg-upload-receipt { }

/* ===== sg- Interest / Discover (interest.php, find-matches.php) ===== */
.sg-interest-section { }
.sg-discover-sidebar { }
.sg-random-section { }
.sg-match-grid { }

/* ===== sg- Premium / Pricing (pro.php) ===== */
.sg-premium { }
.sg-premium__header { }
.sg-premium__features { }
.sg-premium__pricing { }
.sg-premium__plans { }

/* ===== sg- Auth / Account (migrated files) ===== */
.sg-footer-inner { }
.sg-foot-langs { }
.sg-home-sections { }
.sg-home-section { }
.sg-story-section { }
.sg-articles-section { }
.sg-user-verify { }

/* ===== sg- Settings Pages ===== */
.sg-settings-page { }
.sg-settings-bg-wrap { }
.sg-settings-title { }
.sg-settings-side-links { }
.sg-settings-footer { }
.sg-user-affiliates { }
.sg-user-referrals { }

/* ===== sg- Terms / Privacy / Contact ===== */
.sg-terms-page { }
.sg-terms-sidebar { }
.sg-terms-content { }
.sg-contact-page { }

/* ===== sg- Premium Extras ===== */
.sg-p-head { }
.sg-plans { }
.sg-signup-steps { }
.sg-select-avatar { }
.sg-select-avatar-vphoto { }
.sg-select-avatar-vpassport { }
.sg-prof-play-icon { }

/* P1-03: Fix horizontal scroll propagation from featured scroller and match grid */
.sg-featured { overflow-x: hidden; }
.sg-match-grid { overflow-x: hidden; }

/* ==========================================================================
   Matches page (matches.php) — filters sidebar, promo banner, top matches
   carousel, tabs + sort, tip banner, per-row favorite/kebab/liked-back
   ========================================================================== */
.sg-matches-layout { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; }
@media (min-width: 960px) {
    .sg-matches-layout { grid-template-columns: 280px minmax(0, 1fr); }
}

.sg-matches-sidebar { position: sticky; top: 96px; }
.sg-filters {
    background: var(--sg-surface-container-lowest);
    border: 1px solid var(--sg-outline-variant);
    border-radius: var(--sg-rounded-xl);
    padding: 20px;
}
.sg-filters__title { margin: 0 0 16px; font-size: 1.1rem; }
.sg-filters__group { margin-bottom: 16px; }
.sg-filters__group > label { display: block; font-size: 0.8125rem; font-weight: 700; color: var(--sg-on-surface-variant); margin-bottom: 6px; }
.sg-filters__row { display: flex; align-items: center; gap: 8px; }
.sg-filters__row span { color: var(--sg-outline); }
.sg-filters input[type="text"],
.sg-filters input[type="number"],
.sg-filters select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--sg-outline-variant);
    border-radius: var(--sg-rounded);
    background: var(--sg-surface-container-lowest);
    color: var(--sg-on-surface);
    font-family: var(--sg-font-body);
    font-size: 0.875rem;
}
.sg-filters__checkbox { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; margin-bottom: 6px; font-weight: 400; color: var(--sg-on-surface); }
.sg-filters__checkbox input { width: auto; }
.sg-filters__apply { width: 100%; justify-content: center; margin-bottom: 8px; }
.sg-filters__clear { width: 100%; justify-content: center; text-align: center; }

.sg-promo-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    margin-bottom: 24px;
    background: var(--sg-primary-fixed);
    border-radius: var(--sg-rounded-xl);
}
.sg-promo-banner .material-symbols-outlined { color: var(--sg-deep-plum); font-size: 28px; }
.sg-promo-banner__text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.sg-promo-banner__text strong { color: var(--sg-on-primary-fixed); }
.sg-promo-banner__text span { font-size: 0.8125rem; color: var(--sg-on-primary-fixed); opacity: 0.8; }

.sg-top-matches { margin-bottom: 24px; }

.sg-tabs-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.sg-tabs-row .sg-tabs { margin-bottom: 0; flex: 1; }
.sg-sort-select {
    padding: 8px 12px;
    border: 1px solid var(--sg-outline-variant);
    border-radius: var(--sg-rounded);
    background: var(--sg-surface-container-lowest);
    font-size: 0.8125rem;
    font-family: var(--sg-font-body);
    color: var(--sg-on-surface-variant);
}

.sg-tip-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    padding: 16px 20px;
    background: var(--sg-surface-container-low);
    border-radius: var(--sg-rounded-xl);
}
.sg-tip-banner .material-symbols-outlined:first-child { color: var(--sg-golden-sand); }
.sg-tip-banner p { flex: 1; margin: 0; font-size: 0.875rem; color: var(--sg-on-surface-variant); }
.sg-tip-banner a { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8125rem; font-weight: 700; white-space: nowrap; }
.sg-tip-banner a .material-symbols-outlined { font-size: 16px; }

.sg-interest__dot-sep { margin: 0 2px; opacity: 0.5; }
.sg-interest__liked-back {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 0.8125rem;
    color: var(--sg-deep-plum);
    font-weight: 600;
}
.sg-interest__liked-back .material-symbols-outlined { font-size: 15px; color: #e0245e; }

.sg-interest__actions-row { display: flex; align-items: center; gap: 8px; }
.sg-interest__actions-row .btn-sg-outline { flex: 1; }

.sg-interest__fav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--sg-outline-variant);
    color: var(--sg-on-surface-variant);
    flex-shrink: 0;
}
.sg-interest__fav .material-symbols-outlined { font-size: 20px; }
.sg-interest__fav.is-fav { background: var(--sg-secondary-container); border-color: var(--sg-golden-sand); color: var(--sg-secondary); }

.sg-interest__kebab { position: relative; flex-shrink: 0; }
.sg-interest__kebab-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--sg-outline-variant);
    color: var(--sg-on-surface-variant);
}
.sg-interest__kebab-menu {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 20;
    min-width: 160px;
    background: var(--sg-surface-container-lowest);
    border: 1px solid var(--sg-outline-variant);
    border-radius: var(--sg-rounded);
    box-shadow: var(--sg-shadow-ambient);
    overflow: hidden;
}
.sg-interest__kebab-menu.is-open { display: block; }
.sg-interest__kebab-menu a {
    display: block;
    padding: 10px 14px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--sg-on-surface);
    white-space: nowrap;
}

/* ---------- My Profile hero (Screens/profile.png) ---------- */
.sg-myprofile-page .sg-hero-profile { grid-template-columns: 250px minmax(0,1fr) 285px; gap: 1.75rem; background: var(--sg-surface-container-lowest); border: 1px solid var(--sg-outline-variant); border-radius: var(--sg-rounded-lg); padding: 1.5rem; margin-bottom: 1.25rem; }
.sg-myprofile-page .sg-hero-profile__media { border: 0; background: transparent; overflow: visible; position: relative; }
.sg-myprofile-page .sg-hero-profile__photo { position: relative; display: block; }
.sg-myprofile-page .sg-hero-profile__chng-photo { left: 0.6rem; bottom: 0.6rem; }
.sg-myprofile-page .sg-hero-profile__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; }
.sg-myprofile-page .sg-hero-profile__media > a img, .sg-myprofile-page .sg-hero-profile__media .sg-review-badge img { border-radius: var(--sg-rounded); }
.sg-myprofile-page .sg-hero-profile__thumbs { padding: 0.5rem 0 0; }
.sg-myprofile-page .sg-hero-profile__name { font-size: 1.75rem; color: var(--sg-on-surface); }
.sg-name-verified { color: #2f80ed; font-size: 22px; }

.sg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.6rem 0.85rem; white-space: nowrap; border-radius: 11px; font-weight: 700; font-size: 0.88rem; line-height: 1; }
.sg-btn .material-symbols-outlined { font-size: 18px; }
.sg-myprofile-page .sg-hero-profile__actions { gap: 0.5rem; flex-wrap: nowrap; }
.sg-btn--primary { background: var(--sg-primary); color: #fff !important; }
.sg-btn--primary:hover { filter: brightness(1.08); }
.sg-btn--ghost { background: var(--sg-surface); color: var(--sg-on-surface); border: 1px solid var(--sg-outline-variant); }
.sg-btn--ghost:hover { background: var(--sg-surface-container); }

.sg-hero-profile__aboutblock { border-top: 1px solid var(--sg-outline-variant); margin-top: 1.25rem; padding-top: 1.25rem; }
.sg-hero-profile__abouthead { font-family: var(--sg-font-body); font-weight: 700; font-size: 1.1rem; color: var(--sg-primary); margin: 0 0 0.5rem; }
.sg-myprofile-page .sg-hero-profile__about { font-style: normal; color: var(--sg-on-surface-variant); line-height: 1.65; margin-bottom: 0.4rem; }
.sg-myprofile-page .sg-hero-profile__about::before { content: '\201C'; }
.sg-myprofile-page .sg-hero-profile__about::after { content: '\201D'; }

/* quick facts: one bordered strip, label above value, hairline dividers */
.sg-myprofile-page .sg-quickfacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 0.9rem 0; border: 1px solid var(--sg-outline-variant); border-radius: var(--sg-rounded); background: var(--sg-surface); padding: 0.85rem 0; margin-top: 1.25rem; }
.sg-myprofile-page .sg-quickfacts > div { min-width: 0; padding: 0 0.8rem; border-left: 1px solid var(--sg-outline-variant); display: flex; flex-direction: column; gap: 0.25rem; }
.sg-myprofile-page .sg-quickfacts > div:first-child { border-left: 0; }
.sg-myprofile-page .sg-quickfacts__label { font-size: 0.72rem; color: var(--sg-outline); }
.sg-myprofile-page .sg-quickfacts > div span:last-child { font-weight: 700; font-size: 0.88rem; color: var(--sg-on-surface); }

/* profile strength: tinted nested card, status marker on the right */
.sg-myprofile-page .sg-profile-strength { background: linear-gradient(160deg, rgba(102,45,145,0.045), rgba(201,174,120,0.05)), var(--sg-surface-container-lowest); text-align: left; }
.sg-myprofile-page .sg-profile-strength h3 { font-family: var(--sg-font-body); font-weight: 700; color: var(--sg-primary); font-size: 1.1rem; }
.sg-myprofile-page .sg-strength-ring { width: 140px; height: 140px; }
.sg-myprofile-page .sg-strength-ring::before { inset: 14px; }
.sg-myprofile-page .sg-strength-ring span { font-size: 1.6rem; color: var(--sg-on-surface); }
.sg-strength-checklist li { gap: 0.6rem; padding: 0.4rem 0; }
.sg-strength-checklist__icon { font-size: 19px; color: var(--sg-outline); }
.sg-strength-checklist__label { flex: 1 1 auto; }
.sg-strength-checklist__mark { width: 20px; height: 20px; border-radius: 50%; flex: none; border: 2px solid var(--sg-outline-variant); }
.sg-strength-checklist li.is-done .sg-strength-checklist__mark { border-color: #16a34a; background: #16a34a url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/13px no-repeat; }
.sg-strength-checklist li.is-done .sg-strength-checklist__icon { color: var(--sg-primary); }
.sg-myprofile-page .sg-improve-profile { margin-top: 0.5rem; }

/* premium banner */
.sg-premium-banner { background: linear-gradient(100deg, #fdf1e3, #f7ecfa); border: 1px solid var(--sg-outline-variant); }
.sg-premium-banner__text h4 { font-family: var(--sg-font-body); font-weight: 700; font-size: 1.05rem; color: var(--sg-on-surface); }

/* left nav + horoscope card */
.sg-myprofile-page .sg-subnav { padding: 0.5rem; }
.sg-myprofile-page .sg-subnav li a { display: flex; align-items: center; gap: 0.6rem; border-left: 0; border-radius: 10px; padding: 0.6rem 0.75rem; }
.sg-myprofile-page .sg-subnav li a .material-symbols-outlined { font-size: 20px; color: var(--sg-outline); }
.sg-myprofile-page .sg-subnav li a.active, .sg-myprofile-page .sg-subnav li a:hover { background: var(--sg-primary-fixed); color: var(--sg-primary); }
.sg-myprofile-page .sg-subnav li a.active .material-symbols-outlined, .sg-myprofile-page .sg-subnav li a:hover .material-symbols-outlined { color: var(--sg-primary); }
.sg-myprofile-page .sg-subnav li a.active { position: relative; }
.sg-myprofile-page .sg-subnav li a.active::before { content: ''; position: absolute; left: -0.5rem; top: 6px; bottom: 6px; width: 3px; border-radius: 3px; background: var(--sg-primary); }
.sg-myprofile-page .sg-horoscope-widget { text-align: left; }
.sg-myprofile-page .sg-horoscope-widget h4 { font-family: var(--sg-font-body); font-weight: 700; color: var(--sg-primary); font-size: 1rem; }

/* content cards: purple headings, Family Details as a vertical badge list */
.sg-myprofile-page .sg-profile-cards .sg-profile-info h5, .sg-myprofile-page .sg-profile-cards .dt_profile_info h5,
.sg-profile-page .sg-profile-cards .sg-profile-info h5, .sg-profile-page .sg-profile-cards .dt_profile_info h5 { color: var(--sg-primary); }
.sg-profile-cards .sg-pi--family { grid-template-columns: 1fr; }
.sg-pi--family .sg-pi-row { align-items: center; gap: 0.85rem; }
.sg-pi--family .sg-pi-row .sg-pi-icon { background: var(--sg-primary-fixed); border-radius: 13px; padding: 11px; font-size: 22px; margin-top: 0; }

.sg-hero-profile__side { display: flex; flex-direction: column; gap: 1rem; }
.sg-hero-profile__side .sg-profile-highlights { display: flex; flex-direction: column; gap: 1rem; margin: 0; }
.sg-hero-profile__side .sg-hl { border-radius: var(--sg-rounded-lg); }
.sg-hero-profile__side .sg-hl__title { font-family: var(--sg-font-body); font-weight: 700; font-size: 1rem; letter-spacing: 0; text-transform: none; color: var(--sg-primary); }
.sg-hero-profile__side .sg-glance { grid-template-columns: 1fr; }
.sg-hero-profile__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }

@media (max-width: 992px) {
    .sg-myprofile-page .sg-hero-profile { grid-template-columns: 1fr; }
    .sg-myprofile-page .sg-quickfacts { flex-wrap: wrap; gap: 1rem; }
    .sg-myprofile-page .sg-quickfacts > div { flex: 0 0 auto; border-left: 0; padding: 0; }
}

/* ---------- My Profile v2 (Screens/profiledetail.png) ---------- */
/* New, distinctly-named classes -- .sg-hero-profile / .sg-myprofile-layout /
   .sg-subnav / .sg-profile-strength are also used by settings-profile.php,
   so this redesign of myprofile.php's own layout adds fresh classes instead
   of repurposing those shared ones. */
.sg-mp-shell { display: grid; grid-template-columns: 214px 1fr 246px; gap: 1.25rem; align-items: start; margin-top: 1rem; }
.sg-mp-side, .sg-mp-aside { position: sticky; top: 90px; max-height: calc(100vh - 100px); overflow-y: auto; display: flex; flex-direction: column; gap: 1rem; }
.sg-mp-side > *, .sg-mp-aside > * { flex-shrink: 0; }
.sg-mp-side, .sg-mp-main, .sg-mp-aside { min-width: 0; }

.sg-mp-avatar-card { background: var(--sg-surface-container-lowest); border: 1px solid var(--sg-outline-variant); border-radius: var(--sg-rounded-lg); padding: 1.5rem 1rem; text-align: center; }
.sg-mp-avatar { position: relative; width: 140px; height: 140px; border-radius: 50%; margin: 0 auto 1rem; }
.sg-mp-avatar a, .sg-mp-avatar .sg-review-badge { display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; }
.sg-mp-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sg-mp-avatar .sg-review-badge span { position: absolute; inset: auto 0 0 0; background: rgba(0,0,0,0.6); color: #fff; font-size: 0.6rem; padding: 0.15rem; }
.sg-mp-avatar .sg-hero-profile__online-badge { top: 4px; left: 4px; }
.sg-mp-avatar__edit { position: absolute; right: 0; bottom: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--sg-primary); color: #fff; border: 3px solid var(--sg-surface-container-lowest); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.sg-mp-avatar-card__name { font-family: var(--sg-font-display); font-size: 1.1rem; margin: 0 0 0.15rem; }
.sg-mp-avatar-card__meta { font-size: 0.82rem; color: var(--sg-on-surface-variant); margin: 0 0 0.6rem; }

.sg-mp-nav .sg-mp-nav__list a { display: flex; align-items: center; gap: 0.6rem; }
.sg-mp-nav .sg-mp-nav__list .material-symbols-outlined { font-size: 20px; }

.sg-mp-promo { background: linear-gradient(160deg, var(--sg-primary-fixed), var(--sg-secondary-container)); border-radius: var(--sg-rounded-lg); padding: 1.25rem; text-align: center; }
.sg-mp-promo p { font-size: 0.8rem; color: var(--sg-on-surface-variant); margin: 0.5rem 0 1rem; }
.sg-mp-promo .btn { width: 100%; }

.sg-mp-header { background: var(--sg-surface-container-lowest); border: 1px solid var(--sg-outline-variant); border-radius: var(--sg-rounded-lg); padding: 1.5rem; }
.sg-mp-header__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.sg-mp-header__actions { display: flex; align-items: center; gap: 0.6rem; }
.sg-mp-more { position: relative; }
.sg-mp-more__btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--sg-outline-variant); background: var(--sg-surface); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--sg-on-surface); }
.sg-mp-more__menu { display: none; position: absolute; right: 0; top: calc(100% + 6px); background: var(--sg-surface-container-lowest); border: 1px solid var(--sg-outline-variant); border-radius: var(--sg-rounded); box-shadow: var(--sg-shadow-ambient); min-width: 180px; z-index: 5; overflow: hidden; }
.sg-mp-more__menu.is-open { display: block; }
.sg-mp-more__menu a { display: block; padding: 0.6rem 1rem; font-size: 0.85rem; color: var(--sg-on-surface); }
.sg-mp-more__menu a:hover { background: var(--sg-surface-container); }

.sg-mp-facts { display: flex; flex-wrap: wrap; gap: 1.5rem; padding-top: 1rem; margin-top: 1rem; border-top: 1px solid var(--sg-outline-variant); }
.sg-mp-fact { display: flex; align-items: center; gap: 0.6rem; }
.sg-mp-fact__icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; background: var(--sg-surface-container); color: var(--sg-primary); flex: none; }
.sg-mp-fact__value { font-weight: 700; font-size: 0.9rem; margin: 0; }
.sg-mp-fact__label { font-size: 0.72rem; color: var(--sg-on-surface-variant); margin: 0; }
.sg-mp-fact[data-accent="orange"] .sg-mp-fact__icon { background: #fde6d2; color: #b8621b; }
.sg-mp-fact[data-accent="purple"] .sg-mp-fact__icon { background: var(--sg-primary-fixed); color: var(--sg-primary); }
.sg-mp-fact[data-accent="blue"] .sg-mp-fact__icon { background: #dbeafe; color: #1d4ed8; }
.sg-mp-fact[data-accent="pink"] .sg-mp-fact__icon { background: #fbd9e6; color: #b6215f; }
.sg-mp-fact[data-accent="teal"] .sg-mp-fact__icon { background: #d6f0ec; color: #0f766e; }

.sg-mp-aside .sg-profile-strength, .sg-mp-aside .sg-horoscope-widget { flex: none; }

.sg-mp-actions, .sg-mp-viewed, .sg-mp-tips { background: var(--sg-surface-container-lowest); border: 1px solid var(--sg-outline-variant); border-radius: var(--sg-rounded-lg); padding: 1.25rem; flex: none; }
.sg-mp-actions h4, .sg-mp-viewed h4, .sg-mp-tips h4 { font-family: var(--sg-font-display); font-size: 0.95rem; margin: 0 0 0.75rem; display: flex; align-items: center; gap: 0.4rem; }
.sg-mp-actions a { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0; font-size: 0.85rem; color: var(--sg-on-surface); }
.sg-mp-actions a:hover { color: var(--sg-primary); }
.sg-mp-actions .material-symbols-outlined { font-size: 20px; color: var(--sg-primary); }

.sg-mp-viewed__avatars { display: flex; margin-bottom: 0.75rem; }
.sg-mp-viewed__avatars img, .sg-mp-viewed__more { width: 36px; height: 36px; border-radius: 50%; margin-left: -10px; border: 2px solid var(--sg-surface-container-lowest); }
.sg-mp-viewed__avatars img { object-fit: cover; }
.sg-mp-viewed__more { background: var(--sg-surface-container); display: flex; align-items: center; justify-content: center; font-size: 0.68rem; font-weight: 700; }
.sg-mp-viewed__avatars > *:first-child { margin-left: 0; }
.sg-mp-viewed p { font-size: 0.8rem; color: var(--sg-on-surface-variant); margin: 0 0 0.5rem; }
.sg-mp-viewed a, .sg-mp-tips a { font-size: 0.82rem; font-weight: 600; color: var(--sg-primary); }

.sg-mp-tips p { font-size: 0.82rem; color: var(--sg-on-surface-variant); margin: 0 0 0.75rem; }
.sg-mp-tips .progress { height: 6px; margin-bottom: 0.5rem; }
.sg-mp-tips__count { font-size: 0.75rem; color: var(--sg-on-surface-variant); margin: 0 0 0.5rem; }

/* Field rows shared by myprofile.php and profile.php (both include
   partails/profile-enriched.php, the sole producer of .sg-pi-row): icon +
   label above value, two per row, per Screens/profiledetail.png. */
.sg-profile-info .sg-pi-row, .dt_profile_info .sg-pi-row { display: flex; align-items: flex-start; gap: 0.65rem; }
.sg-pi-row__body { min-width: 0; }
.sg-pi-row__label { margin: 0; font-size: 0.78rem; line-height: 1.3; color: var(--sg-outline); font-weight: 400; }
.sg-pi-row__value { margin: 0.1rem 0 0; font-size: 0.9rem; line-height: 1.35; font-weight: 600; color: var(--sg-on-surface); overflow-wrap: break-word; }
.sg-pi-icon { font-size: 20px; color: var(--sg-primary); flex: none; margin-top: 2px; }

/* two fields per row inside each card */
.sg-profile-cards .dt_profile_info, .sg-profile-cards .sg-profile-info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1.25rem; align-content: start; }
.sg-profile-cards .dt_profile_info > h5, .sg-profile-cards .sg-profile-info > h5,
.sg-profile-cards .dt_profile_info > a, .sg-profile-cards .sg-profile-info > a,
.sg-profile-cards .dt_profile_info > .chip, .sg-profile-cards .sg-profile-info > .chip { grid-column: 1 / -1; }
.sg-profile-cards .dt_profile_info h5, .sg-profile-cards .sg-profile-info h5 { display: flex; align-items: center; gap: 0.55rem; font-family: var(--sg-font-body); font-weight: 700; font-size: 1.02rem; color: var(--sg-on-surface); }
.sg-profile-cards .dt_profile_info h5 .material-symbols-outlined, .sg-profile-cards .sg-profile-info h5 .material-symbols-outlined { color: var(--sg-primary); font-size: 22px; }
.sg-profile-cards .dt_profile_info h5 svg, .sg-profile-cards .sg-profile-info h5 svg { width: 20px; height: 20px; }

/* Education / Occupation / Income / Lifestyle / Physical pair up two cards to
   a row the way the reference pairs "Education & Work" with "Lifestyle". */
.sg-profile-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; align-items: start; }
.sg-profile-cards > * { grid-column: 1 / -1; margin-bottom: 0 !important; }
.sg-profile-cards > .sg-pi--half { grid-column: span 1; }

/* Family Details is a single horizontal band of icon + label + value */
.sg-profile-cards .sg-pi--family { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.sg-profile-cards .sg-pi--chips { display: block; }
.sg-pi--family .sg-pi-row .sg-pi-icon { background: var(--sg-primary-fixed); border-radius: 10px; padding: 7px; font-size: 20px; margin-top: 0; }

@media (max-width: 860px) {
    .sg-profile-cards, .sg-profile-cards .dt_profile_info, .sg-profile-cards .sg-profile-info { grid-template-columns: 1fr; }
    .sg-profile-cards > .sg-pi--half { grid-column: 1 / -1; }
}

/* ---- Header card ---- */
.sg-mp-header { background: linear-gradient(135deg, rgba(102,45,145,0.05), rgba(201,174,120,0.05)), var(--sg-surface-container-lowest); }
.sg-mp-header .sg-hero-profile__name { font-size: 1.7rem; }
.sg-name-verified { color: #16a34a; font-size: 22px; }
.sg-mp-header .sg-hero-profile__about { font-style: normal; color: var(--sg-on-surface); font-size: 0.95rem; line-height: 1.6; }
.sg-mp-header .sg-hero-profile__about::before { content: '\201C'; }
.sg-mp-header .sg-hero-profile__about::after { content: '\201D'; }

.sg-mp-editbtn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.55rem 1rem; border-radius: 12px; border: 1px solid var(--sg-outline-variant); background: var(--sg-surface); color: var(--sg-on-surface); font-weight: 600; font-size: 0.88rem; }
.sg-mp-editbtn:hover { background: var(--sg-surface-container); }
.sg-mp-editbtn .material-symbols-outlined { font-size: 18px; color: var(--sg-primary); }
.sg-mp-more__btn { width: 42px; height: 42px; border-radius: 12px; }

/* pills: soft tinted fill with a leading icon (Screens/profile.png) */
.sg-pill { display: inline-flex; align-items: center; gap: 0.35rem; border: 0; padding: 0.35rem 0.8rem; }
.sg-pill .material-symbols-outlined { font-size: 16px; }
.sg-pill--premium { background: #f3ebfb; color: var(--sg-primary); }
.sg-pill--verified { background: #e4f7ec; color: #15803d; }
.sg-pill--horoscope { background: #fdf0dd; color: #b45309; }

/* quick facts: one row, rounded-square icon badges, hairline dividers */
.sg-mp-facts { display: flex; flex-wrap: nowrap; gap: 0; margin-left: -0.55rem; }
.sg-mp-fact { flex: 1 1 0; min-width: 0; padding: 0 0.55rem; gap: 0.45rem; align-items: flex-start; border-left: 1px solid var(--sg-outline-variant); }
.sg-mp-fact:first-child { border-left: 0; }
.sg-mp-fact__icon { width: 32px; height: 32px; border-radius: 9px; font-size: 17px; }
.sg-mp-fact__value { font-size: 0.82rem; line-height: 1.25; }
.sg-mp-fact__label { font-size: 0.68rem; line-height: 1.25; }
@media (max-width: 1100px) {
    .sg-mp-facts { flex-wrap: wrap; gap: 1rem; }
    .sg-mp-fact { flex: 0 0 auto; border-left: 0; padding: 0; }
}

/* ---- Left sidebar reads as one card ---- */
.sg-mp-side .sg-mp-avatar-card:has(+ .sg-mp-nav) { border-bottom: 0; border-radius: var(--sg-rounded-lg) var(--sg-rounded-lg) 0 0; padding-bottom: 1rem; }
.sg-mp-side .sg-mp-avatar-card:has(+ .sg-mp-nav) + .sg-mp-nav { margin-top: -1rem; }
.sg-mp-side .sg-mp-avatar-card:has(+ .sg-mp-nav) + .sg-mp-nav .sg-subnav { border-radius: 0 0 var(--sg-rounded-lg) var(--sg-rounded-lg); border-top: 0; }
.sg-mp-side .sg-mp-nav .sg-subnav { margin: 0; padding: 0.5rem; }
.sg-mp-nav .sg-mp-nav__list li a { border-left: 0; border-radius: 10px; padding: 0.6rem 0.75rem; color: var(--sg-on-surface); }
.sg-mp-nav .sg-mp-nav__list li a .material-symbols-outlined { color: var(--sg-outline); }
.sg-mp-nav .sg-mp-nav__list li a.active, .sg-mp-nav .sg-mp-nav__list li a:hover { background: var(--sg-primary-fixed); color: var(--sg-primary); }
.sg-mp-nav .sg-mp-nav__list li a.active .material-symbols-outlined, .sg-mp-nav .sg-mp-nav__list li a:hover .material-symbols-outlined { color: var(--sg-primary); }
.sg-mp-nav .sg-mp-nav__list li a.active { position: relative; }
.sg-mp-nav .sg-mp-nav__list li a.active::before { content: ''; position: absolute; left: -0.5rem; top: 6px; bottom: 6px; width: 3px; border-radius: 3px; background: var(--sg-primary); }

.sg-mp-promo h4 { margin: 0.35rem 0 0.15rem; font-size: 1rem; color: #b8860b; font-weight: 700; }

/* ---- Right column ---- */
.sg-profile-strength h3, .sg-mp-actions h4, .sg-mp-viewed h4, .sg-horoscope-widget h4 { font-family: var(--sg-font-body); font-weight: 700; color: var(--sg-primary); font-size: 1rem; }
.sg-mp-tips h4 { font-family: var(--sg-font-body); font-weight: 700; color: var(--sg-on-surface); font-size: 1rem; }
.sg-strength-checklist li svg { display: none; }
.sg-mp-btn { display: block; width: 100%; padding: 0.7rem 1rem; border-radius: 12px; background: linear-gradient(135deg, var(--sg-primary), var(--sg-deep-plum, #4d0f79)); color: #fff !important; font-weight: 700; text-align: center; }
.sg-mp-btn:hover { filter: brightness(1.08); }
.sg-mp-actions__badge { width: 36px; height: 36px; border-radius: 10px; background: var(--sg-primary-fixed); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.sg-mp-actions a { gap: 0.7rem; padding: 0.4rem 0; }

.sg-mp-horo { text-align: left; }
.sg-mp-horo__body { display: flex; align-items: center; gap: 1rem; }
.sg-mp-horo .sg-horoscope-ring { flex: none; margin: 0; }
.sg-mp-horo .sg-horoscope-ring span { display: flex; flex-direction: column; line-height: 1; }
.sg-mp-horo .sg-horoscope-ring b { font-size: 1.1rem; }
.sg-mp-horo .sg-horoscope-ring small { font-size: 0.7rem; color: var(--sg-on-surface-variant); }
.sg-mp-horo .sg-horoscope-widget__label { margin: 0 0 0.15rem; }
.sg-mp-horo .sg-horoscope-widget__sub { margin: 0 0 0.35rem; }
.sg-mp-horo a { font-size: 0.82rem; font-weight: 600; color: var(--sg-primary); }

.sg-mp-tips h4 .sg-mp-tips__crown { width: 30px; height: 30px; border-radius: 50%; background: #fdf0d5; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.sg-mp-tips .progress { background: var(--sg-primary-fixed); }
.sg-mp-tips .progress .determinate { background: var(--sg-primary); }

/* Prospect view (profile.php) reusing the same shell. The like/pass buttons
   were styled to sit on top of the old full-bleed hero photo (white on the
   image, translucent pass button with a white icon) -- on the header card
   they need card colors instead. */
.sg-hero-profile__actions .sg-profile-hero__btn { width: 44px; height: 44px; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.sg-hero-profile__actions .sg-profile-hero__btn .material-symbols-outlined { font-size: 22px; }
.sg-hero-profile__actions .sg-profile-hero__btn--like { background: var(--sg-primary-fixed); color: var(--sg-primary); border: 1px solid var(--sg-outline-variant); }
.sg-hero-profile__actions .sg-profile-hero__btn--pass { background: var(--sg-surface); color: var(--sg-on-surface-variant); border: 1px solid var(--sg-outline-variant); }
.sg-hero-profile__actions .sg-profile-hero__btn--pass:hover { background: var(--sg-surface-container); }

.sg-mp-side .sg-profile-actions { flex-direction: column; gap: 0.25rem; margin: 0; background: var(--sg-surface-container-lowest); border: 1px solid var(--sg-outline-variant); border-radius: var(--sg-rounded-lg); padding: 1rem; }
.sg-mp-side .sg-profile-actions a { width: 100%; border: none; background: transparent; padding: 0.5rem 0.25rem; color: var(--sg-on-surface); border-radius: var(--sg-rounded); }
.sg-mp-side .sg-profile-actions a:hover { background: var(--sg-surface-container); color: var(--sg-primary); }
.sg-mp-side .sg-profile-actions .material-symbols-outlined { font-size: 20px; color: var(--sg-primary); }

.sg-mp-aside .sg-profile-highlights { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 0; }
.sg-mp-aside .sg-glance { grid-template-columns: 1fr; gap: 14px; }
/* the highlights partial ships small uppercase grey titles; in this column they
   sit beside the other widget headings and must match them. */
.sg-mp-aside .sg-hl__title { font-size: 1rem; letter-spacing: 0; text-transform: none; color: var(--sg-primary); margin-bottom: 0.5rem; }
/* the partial's cards use a larger radius than every other card in this column */
.sg-mp-aside .sg-hl { border-radius: var(--sg-rounded-lg); }

@media (max-width: 992px) {
    .sg-mp-shell { grid-template-columns: 1fr; }
    .sg-mp-side, .sg-mp-aside { position: static; max-height: none; overflow-y: visible; }
}
.sg-interest__kebab-menu a:hover { background: var(--sg-surface-container); color: var(--sg-deep-plum); }


/* ---------- Discover search + stats (Screens/dicover.png) ---------- */
.sg-hs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem 1.1rem; }
.sg-hs-field label { display: block; font-size: 0.82rem; font-weight: 500; color: var(--sg-on-surface-variant); margin-bottom: 0.4rem; }
.sg-hs-select { position: relative; display: flex; align-items: center; }
.sg-hs-select > .material-symbols-outlined { position: absolute; left: 12px; font-size: 19px; color: var(--sg-primary); pointer-events: none; }
.sg-hs-select > .material-symbols-outlined ~ select { padding-left: 38px; }
.sg-hs-select select, .sg-hs-select input[type="text"] {
    width: 100%; height: 46px; border: 1px solid var(--sg-outline-variant); border-radius: 10px;
    background: var(--sg-surface); color: var(--sg-on-surface); font-size: 0.9rem; padding: 0 2.2rem 0 0.9rem;
    appearance: none; -webkit-appearance: none; margin: 0; box-shadow: none;
}
.sg-hs-select input[type="text"] { padding-right: 0.9rem; }
.sg-hs-select select:focus, .sg-hs-select input[type="text"]:focus { border-color: var(--sg-primary); outline: none; box-shadow: none; }
.sg-hs-select::after { content: ''; position: absolute; right: 14px; width: 8px; height: 8px; border-right: 2px solid var(--sg-outline); border-bottom: 2px solid var(--sg-outline); transform: rotate(45deg) translateY(-2px); pointer-events: none; }
.sg-hs-select:has(input[type="text"])::after { display: none; }
.sg-hs-age { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.5rem; }
.sg-hs-age__to { font-size: 0.85rem; color: var(--sg-on-surface-variant); }
.sg-hs-submit { display: block; width: 100%; margin-top: 1.25rem; padding: 0.85rem 1rem; border: 0; border-radius: 10px; background: var(--sg-primary); color: #fff; font-weight: 700; font-size: 0.95rem; cursor: pointer; }
.sg-hs-submit:hover { filter: brightness(1.08); }
.sg-hs-submit.is-loading, .sg-hs-submit:disabled { opacity: 0.7; cursor: wait; }

.sg-search-results {
    background: var(--sg-surface-container-lowest);
    border: 1px solid var(--sg-outline-variant);
    border-radius: var(--sg-rounded-lg);
    padding: 1.5rem;
    margin: 0 0 1.25rem;
}
.sg-search-results__head { margin-bottom: 1rem; }
.sg-search-results__head h2 {
    font-family: var(--sg-font-body);
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--sg-primary);
    margin: 0 0 0.25rem;
}
.sg-search-results__head p { margin: 0; color: var(--sg-on-surface-variant); font-size: 0.9rem; }
.sg-search-results__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}
.sg-search-results__grid .sg-compact-card { flex: none; width: 100%; }
.sg-search-results .empty_state { text-align: center; color: var(--sg-on-surface-variant); padding: 2rem 1rem; }
.sg-search-results .load_more { margin-top: 1rem; }

.sg-hero-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--sg-surface-container-lowest); border: 1px solid var(--sg-outline-variant); border-radius: var(--sg-rounded-lg); padding: 1.1rem 0; margin: 1.25rem 0; }
.sg-hero-stats .sg-stat { display: flex; align-items: center; justify-content: center; gap: 0.7rem; padding: 0 1rem; border-left: 1px solid var(--sg-outline-variant); }
.sg-hero-stats .sg-stat:first-child { border-left: 0; }
.sg-hero-stats .sg-stat > .material-symbols-outlined { font-size: 24px; color: var(--sg-primary); }
.sg-hero-stats .sg-stat strong { display: block; font-size: 1.05rem; color: var(--sg-primary); line-height: 1.2; }
.sg-hero-stats .sg-stat span { font-size: 0.78rem; color: var(--sg-on-surface-variant); }

@media (max-width: 900px) {
    .sg-hs-grid { grid-template-columns: 1fr; }
    .sg-hero-stats { grid-template-columns: repeat(2, 1fr); gap: 1rem 0; }
    .sg-hero-stats .sg-stat:nth-child(odd) { border-left: 0; }
}


/* Discover sections sit in white cards with sans purple headings (Screens/dicover.png) */
.sg-page .sg-categories, .sg-page .sg-featured, .sg-page .sg-popular-filters,
.sg-page .sg-why, .sg-page .sg-recently-active {
    background: var(--sg-surface-container-lowest);
    border: 1px solid var(--sg-outline-variant);
    border-radius: var(--sg-rounded-lg);
    padding: 1.5rem;
    margin-bottom: 1.25rem;
}
.sg-page .sg-categories h2, .sg-page .sg-featured h2, .sg-page .sg-popular-filters h3,
.sg-page .sg-why h2, .sg-page .sg-recently-active h2 {
    font-family: var(--sg-font-body);
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--sg-primary);
    margin: 0 0 0.25rem;
}
.sg-page .sg-featured__pill { background: #fce7f3; color: #be185d; border-radius: 999px; font-size: 0.7rem; font-weight: 700; padding: 0.2rem 0.6rem; margin-left: 0.5rem; vertical-align: middle; }


/* Edit Profile fields (Screens/editprofile.png): static sentence-case labels
   above white bordered inputs, rather than Materialize's floating uppercase. */
.sg-edit-card .input-field { margin-top: 0; padding-top: 1.45rem; }
.sg-edit-card .input-field > label { position: absolute; top: 0; left: 0; transform: none !important; font-size: 0.82rem !important; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--sg-on-surface-variant); }
.sg-edit-card .input-field > input[type="text"], .sg-edit-card .input-field > input[type="email"],
.sg-edit-card .input-field > input[type="number"], .sg-edit-card .input-field > input[type="date"],
.sg-edit-card .input-field > input[type="time"], .sg-edit-card .input-field > textarea,
.sg-edit-card .select-wrapper input.select-dropdown {
    height: 46px; box-sizing: border-box; background: var(--sg-surface) !important;
    /* style.css:29 sets `border: none !important` on every non-browser-default
       input, so the reference's bordered fields need the same weight. */
    border: 1px solid var(--sg-outline-variant) !important;
    border-radius: 9px !important; padding: 0 0.85rem; margin: 0; box-shadow: none; color: var(--sg-on-surface); font-size: 0.9rem;
}
.sg-edit-card .input-field > textarea { height: auto; min-height: 110px; padding: 0.7rem 0.85rem; line-height: 1.55; }
.sg-edit-card .input-field > input:focus, .sg-edit-card .select-wrapper input.select-dropdown:focus { border-color: var(--sg-primary) !important; box-shadow: none !important; }
.sg-edit-card .input-field > textarea { border: 1px solid var(--sg-outline-variant) !important; border-radius: 9px !important; background: var(--sg-surface) !important; }
.sg-edit-card .select-wrapper .caret { right: 12px; }


/* Recently Active: circular avatar people row (Screens/dicover.png) */
.sg-recently-active__grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.sg-ra-person { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.35rem; }
.sg-ra-person__avatar { position: relative; display: block; width: 72px; height: 72px; }
.sg-ra-person__avatar img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; display: block; }
.sg-ra-person__dot { position: absolute; right: 3px; bottom: 3px; width: 13px; height: 13px; border-radius: 50%; background: #22c55e; border: 2px solid var(--sg-surface-container-lowest); }
.sg-ra-person__name { font-size: 0.82rem; font-weight: 600; color: var(--sg-on-surface); line-height: 1.25; }
.sg-ra-person__meta { font-size: 0.72rem; color: var(--sg-on-surface-variant); line-height: 1.2; }


/* ---------- Refine Matches sidebar (Screens/matches.png) ---------- */
.sg-filters__title { display: flex; align-items: center; justify-content: space-between; font-family: var(--sg-font-body); font-weight: 700; font-size: 1rem; color: var(--sg-on-surface); }
.sg-filters__title > span { display: inline-flex; align-items: center; gap: 0.45rem; }
.sg-filters__title .material-symbols-outlined { font-size: 20px; color: var(--sg-primary); }
.sg-filters__inputicon { position: relative; display: block; }
.sg-filters__inputicon .material-symbols-outlined { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 19px; color: var(--sg-outline); pointer-events: none; }
.sg-agerange { position: relative; height: 26px; margin-top: 0.35rem; }
/* materialize.min.css sets `input[type=range]{position:relative;margin:15px 0}`
   which out-specifies a lone class, so these need the extra qualifier. */
.sg-agerange .sg-agerange__input { position: absolute; left: 0; top: 0; width: 100%; margin: 0; background: transparent; pointer-events: none; -webkit-appearance: none; appearance: none; height: 26px; border: 0 !important; }
.sg-agerange .sg-agerange__input::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: var(--sg-primary-fixed); }
.sg-agerange .sg-agerange__input::-moz-range-track { height: 4px; border-radius: 4px; background: var(--sg-primary-fixed); }
.sg-agerange .sg-agerange__input::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; background: var(--sg-primary); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); margin-top: -6px; }
.sg-agerange .sg-agerange__input::-moz-range-thumb { pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; background: var(--sg-primary); border: 2px solid #fff; }
.sg-agerange__caption { text-align: center; font-size: 0.78rem; color: var(--sg-on-surface-variant); margin: 0.1rem 0 0; }
.sg-filters__checkbox .material-symbols-outlined { font-size: 18px; color: var(--sg-primary); vertical-align: middle; margin-right: 0.15rem; }
.sg-filters__clear { display: block; width: 100%; text-align: center; margin-bottom: 0.6rem; }
.sg-filters__apply { display: block; width: 100%; }

.sg-filters-promo { background: linear-gradient(160deg, #fdf1e3, #f7ecfa); border: 1px solid var(--sg-outline-variant); border-radius: var(--sg-rounded-lg); padding: 1.25rem; margin-top: 1rem; }
.sg-filters-promo h4 { display: flex; align-items: center; gap: 0.45rem; font-family: var(--sg-font-body); font-weight: 700; font-size: 1rem; color: #b8860b; margin: 0 0 0.75rem; }
.sg-filters-promo ul { list-style: none; margin: 0 0 1rem; padding: 0; }
.sg-filters-promo li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; color: var(--sg-on-surface-variant); padding: 0.22rem 0; }
.sg-filters-promo li .material-symbols-outlined { font-size: 18px; color: var(--sg-primary); }
.sg-filters-promo .btn { width: 100%; }
.sg-page__head-icon { color: #e11d63; vertical-align: middle; font-size: 26px; }

.sg-matches-main .sg-tabs-row { background: var(--sg-surface-container-lowest); border: 1px solid var(--sg-outline-variant); border-radius: var(--sg-rounded-lg); padding: 0.5rem 1rem; margin-bottom: 1.25rem; }

.sg-matches-main .sg-tabs-row { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.sg-matches-main .sg-tabs { flex: 1 1 auto; min-width: 0; overflow-x: auto; }
.sg-matches-main .sg-sort-select { flex: 0 0 auto; }


/* ---------- Advanced Search panel (Discover) ---------- */
/* Each sub-panel ships its own Search button and the panel itself has one at
   the bottom, so both rendered stacked once the sub-panels became visible. */
.sg-hero-search__panel .search_filters .btn_wrapper { display: none; }
/* The col s6 checkbox pairs clipped longer labels ("Christianity" ran under
   the next checkbox), so let each option take the full column and wrap. */
.sg-hero-search__panel .search_filters p.col.s6,
.sg-hero-search__panel .search_filters p.col.s6.m3 { width: 100%; padding: 0; margin: 0 0 0.45rem; }
/* Materialize's .filled-in checkbox draws its box via the span's ::before/
   ::after and reserves room with padding-left -- keep that and only let the
   text wrap, or the box lands on top of the label. */
.sg-hero-search__panel .search_filters p.col label { display: block; line-height: 1.35; }
.sg-hero-search__panel .search_filters p.col label span { white-space: normal; display: inline-block; }
.sg-hero-search__panel .search_filters h5 { font-family: var(--sg-font-body); font-weight: 700; font-size: 0.95rem; color: var(--sg-primary); margin: 0 0 0.6rem; }

/* ===== QA fix 2026-09-10: registration wizard (steps.php) — appended ===== */
.sg-avatar-selector {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 160px;
    height: 160px;
    margin: 0 auto;
    border-radius: 50%;
    background-color: var(--sg-surface-container, #f5ebf4);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    border: 3px dashed var(--sg-outline-variant, #cfc2d2);
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.25s ease, background-color 0.25s ease;
}
.sg-avatar-selector:hover {
    border-color: var(--sg-deep-plum, #662d91);
    background-color: var(--sg-surface-container-high, #efe5ef);
}
.sg-avatar-selector .svg-empty {
    display: flex;
    color: var(--sg-on-surface-variant, #4c4450);
    opacity: 0.55;
    transition: opacity 0.25s ease;
}
.sg-avatar-selector .svg-empty svg { width: 42px; height: 42px; }
.sg-avatar-selector:hover .svg-empty { opacity: 0.85; }
.sg-avatar-selector__photo,
.sg-avatar-selector__passport {
    width: 100%;
    max-width: 220px;
    height: 150px;
    border-radius: var(--sg-rounded-lg, 1rem);
}
.sg-wizard__body .slider-ctr {
    width: 680px;
    max-width: 100%;
    margin: 0 auto;
    overflow: hidden !important;
}
@media (max-width: 890px) {
    .sg-wizard__body .slider-ctr { width: 100%; }
}
/* ===== end QA fix 2026-09-10 ===== */

/* ===== QA fix 2026-09-12: registration wizard (steps.php) — appended ===== */
.sg-avatar-selector {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 160px;
    height: 160px;
    margin: 0 auto;
    border-radius: 50%;
    background-color: var(--sg-surface-container, #f5ebf4);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    border: 3px dashed var(--sg-outline-variant, #cfc2d2);
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.25s ease, background-color 0.25s ease;
}
.sg-avatar-selector:hover {
    border-color: var(--sg-deep-plum, #662d91);
    background-color: var(--sg-surface-container-high, #efe5ef);
}
.sg-avatar-selector .svg-empty {
    display: flex;
    color: var(--sg-on-surface-variant, #4c4450);
    opacity: 0.55;
    transition: opacity 0.25s ease;
}
.sg-avatar-selector .svg-empty svg { width: 42px; height: 42px; }
.sg-avatar-selector:hover .svg-empty { opacity: 0.85; }
.sg-avatar-selector__photo,
.sg-avatar-selector__passport {
    width: 100%;
    max-width: 220px;
    height: 150px;
    border-radius: var(--sg-rounded-lg, 1rem);
}
.sg-wizard__body .slider-ctr {
    width: 680px;
    max-width: 100%;
    margin: 0 auto;
    overflow: hidden !important;
}
@media (max-width: 890px) {
    .sg-wizard__body .slider-ctr { width: 100%; }
}
.sg-wizard__body .slider { height: 660px; }
.sg-wizard__body .slider-form { padding-bottom: 84px; }
/* ===== end QA fix 2026-09-12 ===== */

/* ===== QA fix 2026-09-13: 6-digit OTP boxes ===== */
@media (max-width: 480px) {
    #email_otp_boxes { gap: 8px; }
    #email_otp_boxes .sg-otp-boxes__input { width: 44px !important; height: 50px !important; }
}
/* ===== end QA fix 2026-09-13 ===== */

/* ===== Purple-only icons: user menu + Settings sidebar (2026-09-19) =====
   The settings sidebar paints each icon disc with an inline background-color
   (orange, green, blue...), hence !important. */
#user_dropdown .sg-user-menu__item svg { color: var(--sg-primary-container); }
.dt_settings_side_links li a svg {
    background-color: var(--sg-primary-container) !important;
    color: var(--sg-on-primary) !important;
}
.dt_settings_side_links li a svg path { fill: currentColor !important; }

/* ===== Filled purple buttons always get white text (2026-09-19) =====
   The sg- theme repaints .btn/.btn_primary/.btn-primary/.btn-large purple
   but never sets their text colour, so older rules leave dark text on purple:
   style.css `.home_usr_sct .btn-primary { color:#4caf50 }`, `.load_more
   { color:#191919 }`, and our own `a:hover { color: var(--sg-primary) }`,
   which turns every <a class="btn"> purple-on-purple on hover.
   Outline, glossy, flat, white and disabled variants keep their own colours. */
.btn_primary, .btn-primary, .sg-btn--primary, .sg-verify-panel__send, .btn.load_more,
.btn-large:not(.btn-sg-outline):not(.btn_glossy):not(.btn-white):not(.btn-flat):not(.disabled):not(:disabled) {
    color: #fff !important;
}
.btn_primary > :is(span, svg, i, b, strong),
.btn-primary > :is(span, svg, i, b, strong),
.sg-btn--primary > :is(span, svg, i, b, strong),
.sg-verify-panel__send > :is(span, svg, i, b, strong),
.btn.load_more > :is(span, svg, i, b, strong),
.btn-large:not(.btn-sg-outline):not(.btn_glossy):not(.btn-white):not(.btn-flat):not(.disabled):not(:disabled) > :is(span, svg, i, b, strong) {
    color: inherit !important;
}
/* Same (0,1,1) specificity as `a:hover` -- only out-ranks that global rule,
   so per-button hover colours (payment buttons etc.) still win. */
a:where(.btn, .btn-large, .btn-small, .btn-floating):where(:not(.btn-flat, .btn_glossy, .btn-sg-outline, .btn-white, .btn-outline-secondary)):hover {
    color: #fff;
}