:root {
  color-scheme: light;
  --color-primary: #c2410c;
  --color-primary-hover: #9a3412;
  --color-primary-soft: #ffedd5;
  --color-primary-subtle: #fff7ed;
  --color-secondary: #b45309;
  --color-secondary-hover: #92400e;
  --color-secondary-soft: #fef3c7;
  --color-background: #faf7f2;
  --color-surface: #ffffff;
  --color-surface-subtle: #f7f3ec;
  --color-surface-elevated: #ffffff;
  --color-text: #1c1917;
  --color-muted: #57534e;
  --color-text-light: #78716c;
  --color-border: #e7dfd5;
  --color-border-subtle: #f0eae1;
  --color-border-hover: #cfc2b2;
  --color-success: #166534;
  --color-success-soft: #e8f5ee;
  --color-error: #991b1b;
  --color-error-soft: #fef2f2;
  --color-warning: #92400e;
  --color-warning-soft: #fef3c7;
  --color-info: #0369a1;
  --color-info-soft: #e0f2fe;

  /* Typography Scale */
  --font-ui: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Bengali", "SolaimanLipi", "Vrinda", "Noto Sans Devanagari", "Nirmala UI", "Noto Sans Arabic", "Segoe UI Historic", "Traditional Arabic", "Noto Sans Gurmukhi", "Noto Sans Tamil", "Noto Sans Telugu", "Noto Sans Gujarati", "Noto Sans Sinhala", sans-serif;
  --font-brand: "Playfair Display", Georgia, "Palatino Linotype", "Noto Serif Bengali", "Noto Serif Devanagari", "Noto Serif", serif;
  --matri-font-sans: var(--font-ui);
  --matri-font-serif: var(--font-brand);
  --text-display: clamp(2.35rem, 4.4vw, 3.6rem);
  --text-h1: clamp(1.9rem, 3.2vw, 2.65rem);
  --text-h2: clamp(1.45rem, 2.2vw, 1.95rem);
  --text-h3: clamp(1.2rem, 1.6vw, 1.45rem);
  --text-h4: clamp(1.05rem, 1.2vw, 1.2rem);
  --text-body-large: 1.125rem;
  --text-body: 1rem;
  --text-small: 0.88rem;
  --text-caption: 0.78rem;
  --text-label: 0.85rem;
  --text-navigation: 0.92rem;
  --text-button: 0.95rem;
  --text-input: 0.95rem;
  --text-error: 0.85rem;
  --text-success: 0.85rem;
  --text-metadata: 0.82rem;

  /* Spacing Scale */
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs: 12px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;
  --space-3xl: 80px;

  /* Component Spacing Tokens */
  --page-padding-x: clamp(16px, 4vw, 32px);
  --section-spacing: clamp(40px, 6vw, 64px);
  --card-padding: clamp(18px, 3vw, 24px);
  --card-padding-sm: 16px;
  --card-padding-lg: 32px;
  --grid-gap: 20px;
  --grid-gap-sm: 12px;
  --grid-gap-lg: 28px;
  --form-gap: 16px;
  --button-padding-y: 10px;
  --button-padding-x: 18px;

  /* Legacy & Semantic Token Mappings */
  --ink: var(--color-text);
  --muted: var(--color-muted);
  --line: var(--color-border);
  --paper: var(--color-background);
  --card: var(--color-surface);
  --accent: var(--color-primary);
  --accent-dark: var(--color-primary-hover);
  --gold: var(--color-secondary);
  --gold-soft: var(--color-secondary-soft);
  --success: var(--color-success);
  --danger: var(--color-error);
  --matri-primary: var(--color-primary);
  --matri-primary-hover: var(--color-primary-hover);
  --matri-primary-soft: var(--color-primary-soft);
  --matri-secondary: var(--color-secondary);
  --matri-secondary-soft: var(--color-secondary-soft);
  --matri-card-bg: var(--color-surface);
  --matri-text: var(--color-text);
  --matri-text-muted: var(--color-muted);
  --matri-text-light: var(--color-text-light);
  --matri-border: var(--color-border);
  --matri-border-subtle: var(--color-border-subtle);
  --matri-success: var(--color-success);
  --matri-error: var(--color-error);
  --matri-warning: var(--color-warning);

  /* Radius Tokens */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius: 18px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-full: 9999px;
  --matri-radius-sm: var(--radius-sm);
  --matri-radius-md: var(--radius-md);
  --matri-radius-lg: var(--radius-lg);
  --matri-radius-xl: var(--radius-xl);

  /* Elevation & Shadow Tokens */
  --shadow-xs: 0 1px 2px rgba(28, 25, 23, 0.04);
  --shadow-sm: 0 1px 3px rgba(28, 25, 23, 0.05), 0 1px 2px rgba(28, 25, 23, 0.03);
  --shadow: 0 6px 20px rgba(28, 25, 23, 0.05), 0 1px 3px rgba(28, 25, 23, 0.03);
  --shadow-md: 0 8px 24px rgba(28, 25, 23, 0.07), 0 2px 6px rgba(28, 25, 23, 0.04);
  --shadow-lg: 0 12px 32px rgba(28, 25, 23, 0.08), 0 4px 12px rgba(28, 25, 23, 0.04);
  --shadow-xl: 0 24px 60px rgba(28, 25, 23, 0.12);
  --matri-shadow-sm: var(--shadow-sm);
  --matri-shadow-md: var(--shadow-md);
  --matri-shadow-lg: var(--shadow-lg);

  /* Header & Navigation */
  --header: 72px;
  --bottom: 72px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  font-family: var(--font-ui);
  font-size: var(--text-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; transition: color 0.18s ease; }
a:hover { color: var(--accent-dark); }
h1, h2, h3, h4 { font-family: var(--font-brand); font-weight: 700; line-height: 1.25; color: var(--color-text); margin-top: 0; }
h1 { font-family: var(--font-brand); font-size: var(--text-h1); font-weight: 700; margin: 0 0 16px; letter-spacing: -0.018em; }
h2 { font-family: var(--font-brand); font-size: var(--text-h2); font-weight: 700; margin: 0 0 14px; letter-spacing: -0.012em; }
h3 { font-family: var(--font-ui); font-size: var(--text-h3); font-weight: 650; margin: 0 0 8px; line-height: 1.35; }
h4 { font-family: var(--font-ui); font-size: var(--text-h4); font-weight: 650; margin: 0 0 6px; line-height: 1.4; }
p { margin: 0 0 12px; }
p.lede, .lede { font-size: var(--text-body-large); line-height: 1.65; color: var(--color-muted); }
p.note, .note, small, .small { font-size: var(--text-small); color: var(--color-muted); line-height: 1.5; }

/* Global Typography System Classes */
.font-display { font-family: var(--font-brand); font-size: var(--text-display); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; }
.font-h1 { font-family: var(--font-brand); font-size: var(--text-h1); font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; }
.font-h2 { font-family: var(--font-brand); font-size: var(--text-h2); font-weight: 650; line-height: 1.25; letter-spacing: -0.01em; }
.font-h3 { font-family: var(--font-ui); font-size: var(--text-h3); font-weight: 650; line-height: 1.35; }
.font-h4 { font-family: var(--font-ui); font-size: var(--text-h4); font-weight: 650; line-height: 1.4; }
.font-body-large { font-family: var(--font-ui); font-size: var(--text-body-large); line-height: 1.65; }
.font-body { font-family: var(--font-ui); font-size: var(--text-body); line-height: 1.6; }
.font-body-small { font-family: var(--font-ui); font-size: var(--text-small); line-height: 1.5; }
.font-caption { font-family: var(--font-ui); font-size: var(--text-caption); line-height: 1.4; letter-spacing: 0.02em; color: var(--color-muted); }
.font-label { font-family: var(--font-ui); font-size: var(--text-label); font-weight: 650; letter-spacing: 0.02em; text-transform: uppercase; }
.font-navigation { font-family: var(--font-ui); font-size: var(--text-navigation); font-weight: 600; line-height: 1.3; }
.font-button { font-family: var(--font-ui); font-size: var(--text-button); font-weight: 650; letter-spacing: 0.01em; }
.font-input { font-family: var(--font-ui); font-size: var(--text-input); line-height: 1.4; }
.font-error { font-family: var(--font-ui); font-size: var(--text-error); font-weight: 500; color: var(--color-error); }
.font-success { font-family: var(--font-ui); font-size: var(--text-success); font-weight: 500; color: var(--color-success); }
.font-metadata { font-family: var(--font-ui); font-size: var(--text-metadata); color: var(--color-muted); line-height: 1.4; }
.skip {
  position: absolute; inset-inline-start: 8px; top: -48px; background: var(--color-text); color: white;
  padding: 8px 12px; z-index: 30; border-radius: 8px;
}
.skip:focus { top: 8px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.wrap, body.is-public main { width: min(1280px, calc(100% - 40px)); margin-inline: auto; }
body.is-app main { width: auto; margin: 0; }
main { margin-top: 28px; margin-bottom: 64px; }
.is-app main { margin-bottom: calc(var(--bottom) + 28px); }
main > section { margin: 0 0 64px; }

.site-header {
  position: sticky; top: 0; z-index: 200;
  background: rgba(251, 247, 241, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 1px 0 rgba(42, 36, 32, 0.04), 0 6px 16px rgba(42, 36, 32, 0.03);
}
.header-inner {
  position: static;
  min-height: var(--header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  color: var(--ink); text-decoration: none; min-height: 44px;
}
.brand img { width: 38px; height: 38px; }
.brand-name {
  font-family: var(--font-brand);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--color-text);
}
.nav-toggle {
  width: 44px; height: 44px; border: 1px solid var(--color-border); background: var(--card);
  border-radius: 12px; display: inline-flex; flex-direction: column; justify-content: center;
  align-items: center; gap: 5px; padding: 0; cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: all 0.2s ease;
}
.nav-toggle:hover {
  background: #fbf8f4;
  border-color: var(--color-border-hover);
}
.nav-toggle span {
  display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 2px;
  transition: all 0.2s ease;
}
.header-panel { display: none; }
.site-header.is-open .header-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: absolute;
  top: 100%;
  inset-inline: 0;
  width: auto;
  transform: none;
  background: rgba(251, 247, 241, 0.98);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 16px 32px rgba(42, 36, 32, 0.1);
  padding: 16px 20px 24px;
}
.primary-nav { display: flex; flex-direction: column; gap: 4px; }
.primary-nav a, .nav-login, .lang-select, .text-button {
  min-height: 44px; display: inline-flex; align-items: center;
  padding: 8px 14px; border-radius: var(--radius-sm, 10px);
  text-decoration: none; color: var(--color-text); font-size: var(--text-navigation, 0.92rem); font-weight: 600;
  transition: all 0.18s ease;
}
.primary-nav a:hover, .nav-login:hover { background: #f3ebe3; color: var(--color-primary); }
.primary-nav a[aria-current="page"], .nav-login[aria-current="page"] {
  background: var(--color-primary-soft); color: var(--color-primary-hover); font-weight: 700;
}
.header-tools { display: flex; flex-direction: column; gap: 8px; }
.lang-field { margin: 0; }
.lang-select {
  width: 100%; border: 1px solid var(--color-border); background: var(--card);
  font: inherit; color: var(--ink); border-radius: 10px;
}
.nav-cta { width: 100%; }

.card, .panel {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px;
  box-shadow: var(--shadow);
}
/* HERO SECTION */
.hero {
  display: grid;
  gap: 32px;
  align-items: center;
  padding: 16px 0 24px;
  margin-bottom: 32px;
}
@media (min-width: 900px) {
  .hero {
    grid-template-columns: 1.15fr 0.85fr;
    gap: 48px;
    padding: 32px 0 24px;
  }
}
.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--color-primary-soft);
  color: var(--color-primary-hover);
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 16px;
  border: 1px solid rgba(194, 65, 12, 0.16);
}
.hero-title {
  font-family: var(--font-brand);
  font-size: clamp(2.15rem, 4.4vw, 3.4rem);
  font-weight: 700;
  line-height: 1.18;
  color: var(--color-text);
  margin: 0 0 16px;
  letter-spacing: -0.02em;
}
.hero-lede {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--color-muted);
  max-width: 36rem;
  margin: 0 0 24px;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
  width: 100%;
}
.button-lg {
  min-height: 50px;
  padding: 12px 24px;
  font-size: 1rem;
  border-radius: var(--radius-md);
}
.hero-checklist {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--color-muted);
  font-weight: 600;
  font-size: 0.92rem;
}
.hero-checklist li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.check-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #e8f5ee;
  color: var(--color-success);
  font-size: 0.75rem;
  font-weight: 750;
}
.hero-visual {
  position: relative;
  width: 100%;
}
.hero-image-wrap {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border);
}
.hero-photo, .section-photo {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius-xl);
  background: var(--color-primary-soft);
  display: block;
  transition: transform 0.4s ease;
}
.hero-photo { aspect-ratio: 16 / 10; }
.section-photo { aspect-ratio: 4 / 3; }
.hero-image-wrap:hover .hero-photo {
  transform: scale(1.02);
}
.float-card {
  position: absolute;
  inset-inline-start: 16px;
  bottom: 16px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: 0 10px 24px rgba(28, 25, 23, 0.1);
}
.float-card-header {
  display: flex;
  align-items: center;
}
.float-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-success);
  background: #e8f5ee;
  padding: 3px 10px;
  border-radius: 999px;
}
.float-card-body {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.float-chip {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--color-muted);
  background: var(--color-background);
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid var(--color-border);
}

/* TRUST BANNER */
.trust-banner {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin: 16px 0 48px;
  box-shadow: var(--shadow-sm);
}
.trust-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px 32px;
}
.trust-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-text);
}
.trust-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
}

/* SECTIONS BASE */
.section-block {
  margin: 56px 0;
}
.section-alt {
  background: var(--color-surface-subtle);
  border-radius: var(--radius-xl);
  padding: 40px 24px;
  border: 1px solid var(--color-border);
}
.section-header {
  margin-bottom: 32px;
}
.text-center {
  text-align: center;
}
.section-eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  color: var(--color-secondary);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.section-title {
  font-family: var(--font-brand);
  font-size: clamp(1.6rem, 2.8vw, 2.3rem);
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 10px;
  letter-spacing: -0.015em;
}
.section-subtitle {
  font-size: 1.05rem;
  color: var(--color-muted);
  max-width: 38rem;
  margin: 0 auto;
}
.section-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

/* SECTION 1: VALUE GRID */
.value-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 640px) {
  .value-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .value-grid { grid-template-columns: repeat(4, 1fr); }
}
.value-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 26px 22px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.value-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.icon-circle {
  width: 50px;
  height: 50px;
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.icon-circle svg {
  width: 24px;
  height: 24px;
}
.value-card h3 {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--color-text);
}
.value-card p {
  font-size: 0.92rem;
  color: var(--color-muted);
  line-height: 1.55;
  margin: 0;
}

/* SECTION 2: HOW IT WORKS */
.steps-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 640px) {
  .steps-container { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .steps-container {
    grid-template-columns: repeat(4, 1fr);
    position: relative;
  }
}
.step-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 26px 20px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.step-badge {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--color-secondary-soft);
  color: var(--color-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  font-weight: 800;
  margin-bottom: 16px;
  border: 1px solid rgba(180, 83, 9, 0.2);
}
.step-card h3 {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--color-text);
}
.step-card p {
  font-size: 0.92rem;
  color: var(--color-muted);
  line-height: 1.55;
  margin: 0;
}

/* SECTION 3: DISCOVER PROFILES GRID */
.profiles-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}
@media (min-width: 640px) {
  .profiles-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1080px) {
  .profiles-grid { grid-template-columns: repeat(4, 1fr); }
}
.public-profile-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.public-profile-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.card-media {
  position: relative;
  height: 160px;
  background: linear-gradient(135deg, #f5ece3 0%, #efe4d4 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-avatar {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-primary);
  font-size: 2rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 6px 16px rgba(28, 25, 23, 0.08);
}
.card-badge-verified {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  background: var(--color-surface);
  color: var(--color-success);
  font-size: 0.74rem;
  font-weight: 750;
  padding: 3px 10px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.card-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 6px;
}
.card-name {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0;
  color: var(--color-text);
}
.card-location {
  font-size: 0.88rem;
  color: var(--color-muted);
  margin: 0;
}
.card-profession {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 4px 0 0;
}
.card-education {
  font-size: 0.84rem;
  color: var(--color-muted);
  margin: 0;
}
.card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 14px;
}
.chip {
  font-size: 0.74rem;
  font-weight: 600;
  background: var(--color-surface-subtle);
  color: var(--color-muted);
  padding: 4px 9px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
}
.chip-match {
  background: var(--color-primary-soft);
  color: var(--color-primary-hover);
  border-color: rgba(194, 65, 12, 0.2);
  font-weight: 700;
}
.card-actions {
  margin-top: auto;
}
.demo-disclaimer {
  font-size: 0.84rem;
  color: var(--color-muted);
  margin-top: 14px;
}

/* SECTION 4 & 5: SAFETY AND PREFERENCES */
.safety-features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 640px) {
  .safety-features-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .safety-features-grid { grid-template-columns: repeat(3, 1fr); }
}
.safety-feature-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-sm);
}
.safety-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #e8f5ee;
  color: var(--color-success);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.safety-icon-wrap svg {
  width: 22px;
  height: 22px;
}
.safety-feature-item h4 {
  font-size: 1.08rem;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--color-text);
}
.safety-feature-item p {
  font-size: 0.9rem;
  color: var(--color-muted);
  line-height: 1.5;
  margin: 0;
}

.preference-showcase-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 640px) {
  .preference-showcase-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .preference-showcase-grid { grid-template-columns: repeat(4, 1fr); }
}
.preference-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}
.pref-badge {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  padding: 3px 9px;
  border-radius: 6px;
  width: fit-content;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.preference-card h4 {
  font-size: 1.08rem;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--color-text);
}
.preference-card p {
  font-size: 0.9rem;
  color: var(--color-muted);
  line-height: 1.5;
  margin: 0;
}

/* SECTION 6: CTA BANNER */
.cta-banner {
  background: linear-gradient(135deg, #2a2420 0%, #1c1917 100%);
  border-radius: var(--radius-xl);
  padding: 56px 24px;
  color: #faf7f2;
  margin: 64px 0 32px;
  box-shadow: var(--shadow-lg);
}
.cta-banner-content {
  max-width: 38rem;
  margin: 0 auto;
}
.cta-heading {
  font-family: var(--font-brand);
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 14px;
  letter-spacing: -0.015em;
}
.cta-subheading {
  font-size: 1.1rem;
  color: #d6cece;
  line-height: 1.6;
  margin: 0 0 28px;
}
.cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}
.cta-banner .button-secondary {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.3);
}
.cta-banner .button-secondary:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: #ffffff;
}

.country-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.country-list li {
  padding: 6px 12px; border-radius: 999px; background: var(--color-surface);
  border: 1px solid var(--color-border); font-size: 0.92rem;
}
.world-band, .story-band {
  display: grid; gap: 20px; align-items: center;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-xl); padding: 28px;
}
.globe { color: var(--color-primary); display: grid; place-items: center; }
.empty-invite, .closing-band { display: grid; gap: 14px; justify-items: start; }
.how-layout { display: grid; gap: 28px; align-items: center; }
.how-layout .steps { grid-template-columns: 1fr; }
.faq-item { margin: 0 0 18px; }
.row, .actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
/* ==========================================================================
   GLOBAL BUTTON SYSTEM
   ========================================================================== */
.btn, .button, button, a.button, a.btn, input[type="submit"], input[type="button"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: var(--button-padding-y, 10px) var(--button-padding-x, 18px);
  border-radius: var(--radius-sm, 10px);
  font-family: var(--font-ui);
  font-size: var(--text-button, 0.95rem);
  font-weight: 650;
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  white-space: nowrap;
  vertical-align: middle;
}

/* Primary Button */
.btn-primary, .button-primary, .button, button:not(.secondary):not(.button-secondary):not(.button-ghost):not(.button-outline):not(.btn-outline):not(.btn-ghost):not(.nav-toggle):not(.header-avatar-btn):not(.post-menu-trigger):not([class*="close"]):not([class*="clear"]):not([class*="dots"]):not(.link):not(.button-view):not(.button-action):not(.header-icon-btn):not(.post-action-btn):not(.matri-photo-action-btn):not(.matri-lightbox-close-btn):not(.matri-lightbox-nav-btn):not(.lang-trigger-btn):not(.lang-search-clear-btn) {
  background: var(--color-primary);
  color: #ffffff;
  border-color: var(--color-primary);
  box-shadow: 0 2px 8px rgba(194, 65, 12, 0.22);
}

.btn-primary:hover, .button-primary:hover, .button:hover,
button:not(.secondary):not(.button-secondary):not(.button-ghost):not(.button-outline):not(.btn-outline):not(.btn-ghost):not(.nav-toggle):not(.header-avatar-btn):not(.post-menu-trigger):not([class*="close"]):not([class*="clear"]):not([class*="dots"]):not(.link):not(.button-view):not(.button-action):not(.header-icon-btn):not(.post-action-btn):not(.matri-photo-action-btn):not(.matri-lightbox-close-btn):not(.matri-lightbox-nav-btn):not(.lang-trigger-btn):not(.lang-search-clear-btn):hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(194, 65, 12, 0.32);
  transform: translateY(-1px);
}

.btn-primary:active, .button-primary:active, .button:active {
  transform: translateY(1px);
  box-shadow: 0 1px 3px rgba(194, 65, 12, 0.2);
}

/* Secondary Button */
.btn-secondary, .button-secondary, button.secondary, .matri-btn-secondary, .btn-settings-secondary {
  background: var(--color-surface, #ffffff) !important;
  color: var(--color-text, #1c1917) !important;
  border-color: var(--color-border, #e7dfd5) !important;
  box-shadow: var(--shadow-sm);
}

.btn-secondary:hover, .button-secondary:hover, button.secondary:hover, .matri-btn-secondary:hover, .btn-settings-secondary:hover {
  background: #fbf8f4 !important;
  border-color: var(--color-border-hover, #cfc2b2) !important;
  color: var(--color-primary-hover, #9a3412) !important;
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

.btn-secondary:active, .button-secondary:active, button.secondary:active {
  transform: translateY(1px);
  background: #f5ece2 !important;
}

/* Outline Button */
.btn-outline, .button-outline, .btn-settings-outline {
  background: transparent !important;
  color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  box-shadow: none !important;
}

.btn-outline:hover, .button-outline:hover, .btn-settings-outline:hover {
  background: var(--color-primary-soft) !important;
  color: var(--color-primary-hover) !important;
  border-color: var(--color-primary-hover) !important;
  transform: translateY(-1px);
}

/* Ghost Button */
.btn-ghost, .button-ghost {
  background: transparent !important;
  color: var(--color-muted) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.btn-ghost:hover, .button-ghost:hover {
  background: #f3ece3 !important;
  color: var(--color-text) !important;
}

/* Danger Button */
.btn-danger, .button-danger, .btn-delete {
  background: var(--color-error) !important;
  color: #ffffff !important;
  border-color: var(--color-error) !important;
  box-shadow: 0 2px 8px rgba(153, 27, 27, 0.22) !important;
}

.btn-danger:hover, .button-danger:hover, .btn-delete:hover {
  background: #7f1d1d !important;
  border-color: #7f1d1d !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(153, 27, 27, 0.32) !important;
  transform: translateY(-1px);
}

/* Danger Outline */
.btn-danger-outline, .button-danger-outline {
  background: transparent !important;
  color: var(--color-error) !important;
  border-color: var(--color-error) !important;
  box-shadow: none !important;
}

.btn-danger-outline:hover, .button-danger-outline:hover {
  background: var(--color-error-soft) !important;
  color: #7f1d1d !important;
  border-color: #7f1d1d !important;
}

/* Success Button */
.btn-success, .button-success {
  background: var(--color-success) !important;
  color: #ffffff !important;
  border-color: var(--color-success) !important;
  box-shadow: 0 2px 8px rgba(22, 101, 52, 0.22) !important;
}

.btn-success:hover, .button-success:hover {
  background: #14532d !important;
  border-color: #14532d !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

/* Button Sizes */
.btn-sm, .button-sm {
  min-height: 36px !important;
  padding: 6px 14px !important;
  font-size: var(--text-small, 0.88rem) !important;
  border-radius: var(--radius-xs, 8px) !important;
}

.btn-md, .button-md {
  min-height: 44px !important;
  padding: 10px 18px !important;
  font-size: var(--text-button, 0.95rem) !important;
  border-radius: var(--radius-sm, 10px) !important;
}

.btn-lg, .button-lg {
  min-height: 52px !important;
  padding: 13px 26px !important;
  font-size: 1.05rem !important;
  border-radius: var(--radius-md, 14px) !important;
}

/* Button States */
button:focus-visible, .btn:focus-visible, .button:focus-visible, a:focus-visible {
  outline: 3px solid var(--accent) !important;
  outline-offset: 2px !important;
}

button:disabled, .btn:disabled, .button:disabled, [aria-disabled="true"] {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  transform: none !important;
  box-shadow: none !important;
}

button[aria-busy="true"], .btn.is-loading, .button.is-loading {
  cursor: progress !important;
  opacity: 0.82 !important;
}

button.link {
  background: transparent !important;
  color: var(--accent) !important;
  padding: 8px 12px !important;
  min-height: 44px !important;
  border: 0 !important;
  font-weight: 650 !important;
  box-shadow: none !important;
}

button.link:hover {
  background: #f3ebe3 !important;
  color: var(--accent-dark) !important;
  transform: none !important;
}
.text-link { font-weight: 650; text-decoration: none; }
.text-link:hover { text-decoration: underline; }

.showcase { min-height: 0; }
.preview-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
}
.preview-card.flat { box-shadow: 0 4px 16px rgba(60, 32, 20, 0.04); }
.preview-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.preview-side { display: inline-flex; align-items: center; gap: 8px; }
.heart { color: var(--accent); display: grid; place-items: center; }
.preview-mark {
  font-size: 0.75rem; font-weight: 700; color: var(--gold);
  border: 1px solid #e4d3b5; background: var(--gold-soft);
  border-radius: 999px; padding: 4px 8px;
}
.preview-name { font-family: Palatino, Georgia, serif; font-size: 1.2rem; margin: 0 0 4px; }
.preview-note { color: var(--muted); margin: 8px 0 0; font-size: 0.95rem; }
.sample-note { margin: 10px 0 0; color: var(--gold); font-size: 0.8rem; font-weight: 650; }
.preview-card .button-secondary { width: 100%; margin-top: 14px; }
.avatar {
  width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  background: #f6e7dc; color: var(--accent-dark); font-weight: 700; font-size: 1.25rem; flex: 0 0 auto;
}
.avatar img { width: 28px; height: 28px; }
.tone-1 { background: #f6e7dc; }
.tone-2 { background: #efe4d4; }
.tone-3 { background: #f3ece4; }
.preview-row, .showcase {
  display: flex; gap: 14px; overflow-x: auto;
  scroll-snap-type: x mandatory; padding-bottom: 8px;
}
.showcase .preview-card, .preview-row .preview-card {
  flex: 0 0 min(260px, 78vw); scroll-snap-align: start;
}

.section-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 12px; margin-bottom: 16px;
}
.section-head h2 { margin: 0; }
.safety-grid, .steps, .trust-grid, .features { display: grid; gap: 14px; }
.safety-card, .step, .feature, .trust-grid li {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px;
}
.safety-card h3, .step h3 { margin-top: 12px; }
.safety-card p, .step p, .feature p { margin: 0; color: var(--muted); }
.icon-badge {
  width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center; background: #f6efe6; color: var(--accent);
}
.step { display: flex; flex-direction: column; }
.step-no {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid #e4d3b5; background: var(--gold-soft); color: var(--gold);
  font-weight: 700; letter-spacing: 0.04em;
}
.trust-grid { list-style: none; padding: 0; margin: 8px 0 0; }
.trust-grid li { position: relative; padding-inline-start: 46px; min-height: 56px; display: flex; align-items: center; }
.trust-grid li::before {
  content: ""; position: absolute; inset-inline-start: 18px; top: 50%;
  width: 10px; height: 10px; margin-top: -5px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 5px #f6e7dc;
}

/* ==========================================================================
   GLOBAL FORM SYSTEM
   ========================================================================== */
label, .field-label, .matri-filter-label {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--text-label, 0.85rem);
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--color-text, #1c1917);
  margin-top: 14px;
  margin-bottom: 6px;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="number"],
input[type="search"],
input[type="tel"],
select,
main select,
textarea,
.field-input,
.matri-form-input,
.matri-form-select {
  width: 100%;
  max-width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--color-border, #e7dfd5);
  border-radius: var(--radius-sm, 10px);
  font-family: var(--font-ui);
  font-size: var(--text-input, 0.95rem);
  background: var(--color-surface, #ffffff);
  color: var(--color-text, #1c1917);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
  line-height: 1.4;
  -webkit-appearance: none;
  appearance: none;
}

select, main select, .matri-form-select {
  padding-inline-end: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2357534e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px 14px;
  cursor: pointer;
}

[dir="rtl"] select, [dir="rtl"] main select, [dir="rtl"] .matri-form-select {
  background-position: left 12px center;
}

textarea {
  min-height: 110px;
  resize: vertical;
  line-height: 1.5;
}

input:focus,
select:focus,
textarea:focus,
.field-input:focus,
.matri-form-input:focus,
.matri-form-select:focus {
  outline: none;
  border-color: var(--color-primary, #c2410c) !important;
  box-shadow: 0 0 0 3px rgba(194, 65, 12, 0.12) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--color-text-light, #78716c);
  opacity: 0.85;
}

.check {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: var(--text-small, 0.88rem);
  font-weight: 500;
  color: var(--color-text, #1c1917);
  margin: 12px 0;
  cursor: pointer;
}

.check input[type="checkbox"],
.check input[type="radio"] {
  width: 18px;
  height: 18px;
  min-height: 18px;
  accent-color: var(--color-primary);
  margin: 0;
  cursor: pointer;
  flex-shrink: 0;
}

.grid { display: grid; gap: var(--grid-gap, 20px); }
.muted, .note { color: var(--color-muted); font-size: var(--text-small, 0.88rem); }
.success { color: var(--color-success); font-weight: 600; font-size: var(--text-success, 0.85rem); }
.error, .field-error, .matri-alert-error {
  color: var(--color-error, #991b1b);
  font-size: var(--text-error, 0.85rem);
  font-weight: 500;
  margin-top: 4px;
}
.banner {
  border-radius: var(--radius-sm, 10px);
  padding: 14px 18px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-inline-start: 4px solid var(--color-secondary);
  box-shadow: var(--shadow-sm);
  font-size: var(--text-body);
}

/* ==========================================================================
   GLOBAL REUSABLE CARD SYSTEM
   ========================================================================== */
.card, .panel, .matri-card-box, .settings-group-card, .safety-card, .feature, .step-card, .faq-item-card, .preview-card, .admin-card {
  background: var(--color-surface, #ffffff);
  border: 1px solid var(--color-border, #e7dfd5);
  border-radius: var(--radius, 18px);
  padding: var(--card-padding, 24px);
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s ease;
  position: relative;
}

.card:hover, .card-interactive:hover, .feature:hover, .safety-card:hover, .step-card:hover {
  border-color: var(--color-border-hover, #cfc2b2);
  box-shadow: var(--shadow);
}

.card-header, .settings-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.card-title, .settings-group-title {
  font-family: var(--font-brand);
  font-size: var(--text-h2);
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
  letter-spacing: -0.01em;
}

.card-subtitle, .settings-group-subtitle {
  font-size: var(--text-small, 0.88rem);
  color: var(--color-muted);
  margin: 4px 0 0;
  line-height: 1.5;
}

.person, .profile-card {
  display: grid; gap: 8px; padding: 16px; border: 1px solid var(--color-border);
  border-radius: var(--radius); background: var(--color-surface); color: inherit;
  text-decoration: none; box-shadow: var(--shadow-sm);
}

/* REUSABLE MATRIMONIAL PROFILE CARD */
.matrimonial-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  padding: 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.matrimonial-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.profile-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 11;
  background: linear-gradient(135deg, #f5ece3 0%, #efe4d4 100%);
  overflow: hidden;
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
}
.profile-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
}
.profile-card-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #f7f1e8 0%, #eadfd4 100%);
}
.placeholder-letter {
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--color-primary);
}
.profile-overlay-badge {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(4px);
  color: var(--color-success);
  font-size: 0.74rem;
  font-weight: 750;
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.profile-overlay-presence {
  position: absolute;
  bottom: 12px;
  inset-inline-start: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(4px);
  font-size: 0.72rem;
  font-weight: 650;
  color: var(--color-text);
  padding: 3px 8px;
  border-radius: 999px;
}
.profile-overlay-demo {
  position: absolute;
  top: 12px;
  inset-inline-start: 12px;
  background: rgba(28, 25, 23, 0.75);
  color: #faf7f2;
  font-size: 0.7rem;
  font-weight: 650;
  padding: 3px 8px;
  border-radius: 6px;
}
.profile-card-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 8px;
}
.profile-card-name {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.3;
}
.profile-name-link {
  color: var(--color-text);
  text-decoration: none;
}
.profile-name-link:hover {
  color: var(--color-primary);
}
.profile-card-age {
  font-weight: 600;
  color: var(--color-muted);
}
.profile-card-location, .profile-card-profession {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  color: var(--color-muted);
  margin: 0;
}
.location-icon, .profession-icon {
  flex-shrink: 0;
  color: var(--color-secondary);
}
.distance-pill {
  margin-inline-start: auto;
  font-size: 0.74rem;
  background: var(--color-surface-subtle);
  padding: 2px 6px;
  border-radius: 6px;
}
.profile-compatibility-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 10px;
}
.profile-card-bio {
  font-size: 0.88rem;
  color: var(--color-muted);
  line-height: 1.5;
  margin: 0 0 6px;
}
.relationship-tag {
  font-size: 0.78rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 6px;
  width: fit-content;
  margin: 0 0 8px;
}
.relationship-tag.matched { background: #e8f5ee; color: var(--color-success); }
.relationship-tag.connected { background: var(--color-secondary-soft); color: var(--color-secondary); }
.relationship-tag.pending { background: var(--color-surface-subtle); color: var(--color-muted); }
.relationship-tag.received { background: var(--color-primary-soft); color: var(--color-primary-hover); }

.profile-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--color-border-subtle);
  flex-wrap: wrap;
}
.button-view {
  flex: 1;
  min-height: 44px;
  font-size: 0.88rem;
  padding: 8px 12px;
}
.action-form {
  margin: 0;
  padding: 0;
}
.button-action {
  min-height: 44px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  font-weight: 650;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.button-action:active {
  transform: translateY(1px);
}
.button-action:hover {
  background: var(--color-surface-subtle);
}
.button-like {
  color: var(--color-primary);
  border-color: #fed7aa;
  background: #fff7ed;
}
.button-like:hover {
  background: var(--color-primary-soft);
}
.button-liked {
  background: var(--color-primary);
  color: #ffffff;
  border-color: var(--color-primary);
}
.button-connect {
  background: var(--color-primary);
  color: #ffffff;
  border-color: var(--color-primary);
}
.button-connect:hover {
  background: var(--color-primary-hover);
}
.button-pass {
  color: var(--color-muted);
}
.button-pass:hover {
  color: #991b1b;
  background: #fef2f2;
  border-color: #fecaca;
}
.report-box {
  margin-top: 6px;
  font-size: 0.8rem;
}
.report-summary {
  color: var(--color-muted);
  cursor: pointer;
  padding: 4px 0;
  min-height: 36px;
  display: flex;
  align-items: center;
}
.report-form {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.report-select {
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
}
.report-submit {
  min-height: 36px;
  font-size: 0.82rem;
}
.filters { display: grid; grid-template-columns: 1fr; gap: 12px; }
.auth-layout { display: grid; gap: 20px; align-items: start; }
.auth-layout .card { padding: 22px 20px 18px; }
.auth-layout button[type="submit"] { width: 100%; margin-top: 8px; }
.auth-intro .lede { margin-bottom: 0; }

.site-footer {
  border-top: 1px solid var(--color-border);
  background: #f5ede4;
  padding: clamp(40px, 6vw, 60px) 0 32px;
}
.footer-main { display: grid; gap: 32px; }
.footer-brand p { max-width: 28rem; color: var(--color-muted); font-size: var(--text-small, 0.88rem); line-height: 1.6; margin: 12px 0 0; }
.footer-brand .premium-lang-dropdown { margin-top: 18px; }
.footer-grid { display: grid; gap: 24px; }
.footer-grid section { display: flex; flex-direction: column; align-items: flex-start; }
.footer-grid h2 {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text);
  margin: 0 0 12px;
}
.footer-subhead { margin-top: 18px; }
.footer-grid a {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  text-decoration: none;
  color: var(--color-muted);
  font-size: 0.9rem;
  line-height: 1.5;
  transition: color 0.18s ease;
}
.footer-grid a:hover { color: var(--color-primary); }
.footer-langs { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.footer-copy { color: var(--color-muted); font-size: var(--text-small, 0.88rem); margin: 28px auto 0; }

.legal-layout { display: grid; gap: 24px; }
.toc { display: flex; flex-direction: column; gap: 4px; padding: 16px; }
.toc a {
  text-decoration: none;
  color: var(--color-muted);
  font-size: var(--text-small, 0.88rem);
  font-weight: 550;
  padding: 8px 12px;
  border-radius: var(--radius-xs, 8px);
  transition: all 0.18s ease;
  line-height: 1.4;
}
.toc a:hover {
  background: var(--color-primary-soft);
  color: var(--color-primary-hover);
}
.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-around;
  background: rgba(255, 253, 251, 0.96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--color-border); min-height: var(--bottom);
  padding-bottom: env(safe-area-inset-bottom); z-index: 200;
  box-shadow: 0 -4px 16px rgba(42, 36, 32, 0.05);
}
.bottom-nav a {
  flex: 1; text-align: center; text-decoration: none; color: var(--color-muted);
  padding: 10px 4px; font-size: 0.78rem; min-height: 48px; font-weight: 600;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  transition: color 0.18s ease;
}
.bottom-nav a:hover, .bottom-nav a[aria-current="page"] {
  color: var(--color-primary);
}
.more-menu { display: flex; flex-wrap: wrap; gap: 8px; }
.check { display: flex; gap: 8px; align-items: flex-start; font-weight: 500; }
.check input { margin-top: 4px; width: auto; }

@media (max-width: 767px) {
  .hero-actions, .hero-actions .button, .hero-actions .button-secondary { width: 100%; }
  .cta-actions, .cta-actions .button, .cta-actions .button-secondary { width: 100%; }
  .section-head { flex-direction: column; align-items: stretch; }
  .section-head .button-secondary { width: 100%; }
  .section-header-row { flex-direction: column; align-items: stretch; }
  .section-header-row .button-secondary { width: 100%; }
  .section-alt { padding: 32px 16px; border-radius: var(--radius-lg); }
  .cta-banner { padding: 40px 18px; border-radius: var(--radius-lg); }
  .trust-banner { padding: 14px 16px; }
  .trust-items { gap: 10px 16px; justify-content: flex-start; }
  .profile-card-actions { flex-direction: column; align-items: stretch; }
  .button-action { width: 100%; }
  button, .button, .button-secondary { min-height: 48px; }
}
@media (max-width: 430px) {
  .wrap, body.is-public main, .app-frame { width: calc(100% - 24px); }
  .hero-title { font-size: 2rem; }
  .section-title { font-size: 1.55rem; }
  .float-card { inset-inline: 12px; bottom: 12px; }
}
@media (min-width: 700px) {
  .safety-grid { grid-template-columns: 1fr 1fr; }
  .features { grid-template-columns: 1fr 1fr; }
  .trust-grid, .steps { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .filters { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .hero { grid-template-columns: 1.08fr 0.92fr; align-items: center; gap: 40px; padding-top: 20px; }
  .how-layout { grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.85fr); }
  .world-band { grid-template-columns: minmax(0, 1fr) 180px; }
  .showcase {
    position: relative; display: block; min-height: 430px; overflow: visible; padding: 4px 0 0;
  }
  .showcase .preview-card { position: absolute; width: 250px; flex: none; }
  .showcase .avatar { width: 52px; height: 52px; }
  .showcase .preview-1 { top: 0; inset-inline-end: 42px; z-index: 2; }
  .showcase .preview-2 { top: 96px; inset-inline-end: 0; z-index: 3; }
  .showcase .preview-3 { top: 188px; inset-inline-end: 72px; z-index: 1; }
  .steps { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .preview-row { display: grid; grid-template-columns: repeat(3, 1fr); overflow: visible; }
  .preview-row .preview-card { flex: none; }
  .auth-layout { grid-template-columns: 0.85fr 1.15fr; gap: 48px; padding-top: 12px; }
  .footer-main { grid-template-columns: 260px 1fr; align-items: start; }
}
@media (min-width: 1024px) {
  .nav-toggle { display: none; }
  .header-panel, .site-header.is-open .header-panel {
    display: flex; flex-direction: row; align-items: center; gap: 8px;
    margin-inline-start: auto; position: static; background: transparent;
    border: 0; box-shadow: none; padding: 0;
    width: auto; inset-inline: auto; transform: none;
  }
  .header-panel, .primary-nav { flex-wrap: wrap; }
  .primary-nav { flex-direction: row; align-items: center; gap: 2px; }
  .primary-nav a, .nav-login { padding: 8px 10px; }
  .header-tools { flex-direction: row; align-items: center; gap: 8px; }
  .lang-select, .nav-cta { width: auto; }
  .nav-cta { min-height: 40px; padding: 8px 14px; }
  .features { grid-template-columns: repeat(3, 1fr); }
  .safety-grid, .trust-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: repeat(5, 1fr); }
  .legal-layout { grid-template-columns: 240px 1fr; align-items: start; }
  .toc { position: sticky; top: 96px; }
  .filters { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1180px) {
  .safety-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 360px) {
  .wrap, body.is-public main, .app-frame { width: calc(100% - 32px); }
  h1 { font-size: 1.85rem; }
}
.brand-name { font-family: var(--font-brand); }
.lang-menu { position: relative; }
.lang-menu summary {
  list-style: none; cursor: pointer; min-height: 44px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border: 1px solid var(--color-border); border-radius: 10px;
  background: var(--color-surface); font-weight: 650;
}
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu ul {
  position: absolute; z-index: 30; inset-inline-end: 0; top: calc(100% + 6px);
  min-width: min(280px, 80vw); max-height: 320px; overflow: auto;
  margin: 0; padding: 6px; list-style: none;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 12px; box-shadow: var(--shadow);
}
.lang-menu a {
  display: flex; align-items: center; min-height: 44px; padding: 8px 10px;
  border-radius: 8px; text-decoration: none; color: var(--color-text);
}
.lang-menu a[aria-current="true"] { background: var(--color-primary-soft); color: var(--color-primary-hover); font-weight: 700; }
.lang-menu a:hover { background: #f3ebe3; }
@media (max-width: 1023px) {
  .header-panel .lang-menu ul { position: static; min-width: 0; box-shadow: none; }
}
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 16px; color: var(--color-muted); font-size: var(--text-small); }
.crumbs a { text-decoration: none; }
.crumbs [aria-current="page"] { color: var(--color-text); }
.hero-art svg { width: 100%; height: auto; }
.safety-band {
  display: grid; gap: 20px; align-items: center;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: 22px;
}
.safety-band .hero-art { color: var(--color-primary); display: grid; place-items: center; }
.safety-band .hero-art svg { width: 88px; height: 88px; }
.safety-points { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 8px; }
.safety-points li { padding-inline-start: 18px; position: relative; }
.safety-points li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 0.65em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary);
}
.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px;
  margin-top: 28px; color: var(--color-muted);
}
.footer-legal-links { display: flex; gap: 16px; margin: 0; }
.footer-legal-links a { color: var(--color-text); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.app-frame { width: min(1280px, calc(100% - 40px)); margin: 28px auto 32px; }
.app-sidebar { display: none; }
.app-sidebar a, .bottom-nav a {
  display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--color-text);
}
.bottom-nav a { flex-direction: column; gap: 2px; justify-content: center; font-size: 0.72rem; }
.bottom-nav svg { width: 20px; height: 20px; }
@media (min-width: 1024px) {
  .is-app .primary-nav { display: none; }
  .is-app .app-frame { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 28px; align-items: start; }
  .is-app .app-frame.is-home-feed-frame { display: block; width: min(1200px, calc(100% - 32px)); max-width: 1200px; margin: 16px auto 32px; padding: 0; }
  .is-app .app-frame.is-home-feed-frame > #content { width: 100%; max-width: 100%; margin: 0; padding: 0; }
  .app-sidebar {
    display: flex; flex-direction: column; gap: 4px; position: sticky; top: 88px;
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius); padding: 10px;
  }
  .app-sidebar a { min-height: 44px; padding: 8px 10px; border-radius: 10px; font-weight: 650; }
  .app-sidebar a[aria-current="page"] { background: var(--color-primary-soft); color: var(--color-primary-hover); }
  .bottom-nav { display: none; }
  .steps { position: relative; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .steps.steps-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .how-layout .steps.steps-3 { grid-template-columns: 1fr; }
  .steps::before {
    content: ""; position: absolute; top: 23px; inset-inline: 6%; height: 1px; background: var(--color-border);
  }
  .feature-board { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .safety-band { grid-template-columns: 1.4fr 0.6fr; }
}
@media (min-width: 700px) and (max-width: 1023px) {
  .feature-board, .cards-4 { grid-template-columns: 1fr 1fr; }
}
.photo-thumb, .avatar-photo {
  width: 96px; height: 96px; border-radius: 50%; object-fit: cover; background: var(--color-primary-soft);
}
.profile-hero { position: relative; }
.profile-hero .cover {
  width: 100%; aspect-ratio: 16 / 7; object-fit: cover; border-radius: 12px; display: block; background: #efe4d4;
}
.profile-hero .avatar-photo, .profile-hero .avatar {
  width: 112px; height: 112px; margin-top: -56px; margin-inline-start: 16px;
  border: 4px solid var(--color-surface); border-radius: 50%; object-fit: cover;
}
.demo-badge, .demo-note {
  display: inline-flex; width: fit-content; margin: 0;
  font-size: 0.78rem; font-weight: 650; color: var(--color-text);
  background: var(--color-primary-soft); border-radius: 999px; padding: 4px 10px;
}
.demo-note { color: var(--color-muted); background: transparent; padding-inline: 0; }
.presence { display: flex; align-items: center; gap: 8px; margin: 0; }
.presence-dot { width: 8px; height: 8px; border-radius: 50%; background: #1f7a4d; }
.presence-recent { color: var(--color-muted); }
.relationship { margin: 0; font-weight: 650; }
.relationship.subtle, .relationship.matched { color: var(--color-muted); font-weight: 600; }
.report-box { margin-top: 8px; }
.report-box summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; }
button[aria-busy="true"] { position: relative; }
@media (max-width: 700px) {
  .profile-hero .cover { aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ============================================================
   GLOBAL NETWORK BANNER & TOAST NOTIFICATION SYSTEM
   ============================================================ */
.global-network-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 16px;
  font-size: 0.88rem;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  background: #7f1d1d;
  color: #fff;
}
.global-network-banner.is-online {
  background: #14532d;
  color: #f0fdf4;
}
.global-network-banner.is-reconnecting {
  background: #78350f;
  color: #fef3c7;
}

.global-toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99998;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 380px;
  pointer-events: none;
}
@media (max-width: 768px) {
  .global-toast-container {
    left: 16px;
    right: 16px;
    bottom: 74px;
  }
}
.global-toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  background: var(--color-surface, #ffffff);
  color: var(--color-text, #1c1917);
  border-radius: 12px;
  border: 1px solid var(--color-border, #e7e5e4);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  font-size: 0.92rem;
  font-weight: 550;
  animation: slideToastIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes slideToastIn {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.global-toast.toast-success {
  border-left: 5px solid #16a34a;
}
.global-toast.toast-error {
  border-left: 5px solid #dc2626;
}
.global-toast.toast-info {
  border-left: 5px solid var(--color-primary, #c2410c);
}

/* ============================================================
   3-COLUMN SOCIAL HOME FEED LAYOUT
   ============================================================ */
/* ============================================================
   PREMIUM SOCIAL MATRIMONIAL PLATFORM DESIGN SYSTEM
   ============================================================ */
:root {
  --color-primary: #c2410c; /* Warm terracotta / burnt orange */
  --color-primary-hover: #9a3412;
  --color-primary-soft: #ffedd5; /* Soft peach / champagne */
  --color-secondary-tint: #fff7ed;
  --color-card-border: #f0ede8;
  --color-love: #e11d48; /* Romantic soft rose / coral */
  --color-love-soft: #fff1f2;
  --color-love-border: #fecdd3;
  --color-success-soft: #dcfce7;
  --color-success-text: #166534;
}

/* ============================================================
   HEADER POLISH: SEARCH, NOTIFICATIONS, AVATAR DROPDOWN
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-card-border);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
}
.header-brand-wrap {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.header-center-search {
  flex: 1 1 280px;
  max-width: 540px;
  margin: 0 clamp(12px, 2.5vw, 32px);
  position: relative;
}
/* Native search input CSS reset */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.header-search-form {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.header-search-form .search-icon {
  display: none !important;
}
.header-search-input {
  width: 100%;
  height: 42px;
  padding: 0 18px;
  padding-inline-start: 18px;
  padding-inline-end: 18px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-ivory, #faf8f5);
  font-size: 0.92rem;
  font-family: inherit;
  color: var(--color-text);
  box-shadow: 0 1px 3px rgba(0,0,0,0.03) inset;
  transition: all 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}
.header-search-input::-webkit-search-decoration,
.header-search-input::-webkit-search-cancel-button,
.header-search-input::-webkit-search-results-button,
.header-search-input::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}
.header-search-input:focus {
  outline: none;
  border-color: var(--color-primary);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(194, 65, 12, 0.14);
}
@media (max-width: 767px) {
  .site-header .header-inner {
    flex-wrap: wrap;
    padding-top: 8px;
    padding-bottom: 8px;
    min-height: auto;
  }
  .header-center-search {
    order: 3;
    flex-basis: 100%;
    max-width: 100%;
    margin: 8px 0 2px;
  }
}
@media (min-width: 1024px) {
  .header-panel {
    margin-inline-start: 0;
    flex-shrink: 0;
  }
}
.header-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.header-icon-btn {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f4;
  color: var(--color-text);
  text-decoration: none;
  font-size: 1.15rem;
  transition: background 0.15s ease;
}
.header-icon-btn:hover {
  background: #eeebe7;
}
.header-icon-btn.active {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}
.header-badge {
  position: absolute;
  top: -2px;
  inset-inline-end: -2px;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  padding: 0 3px;
}
.header-profile-dropdown-wrap {
  position: relative;
}
.header-avatar-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 2px 8px 2px 2px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.header-avatar-btn:hover {
  background: #f5f5f4;
}
.header-avatar-img, .header-avatar-letter {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.header-avatar-letter {
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
}
.header-user-firstname {
  font-size: 0.88rem;
  font-weight: 650;
  color: var(--color-text);
}
.header-dropdown-card {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  width: 220px;
  background: #ffffff;
  border: 1px solid var(--color-card-border);
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  z-index: 1001;
}
.header-dropdown-card.is-open {
  display: block;
  animation: modalPop 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.dropdown-user-header {
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
}
.dropdown-name {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--color-text);
}
.dropdown-sub {
  font-size: 0.76rem;
  color: var(--color-muted);
}
.dropdown-divider {
  height: 1px;
  background: var(--color-card-border);
  margin: 6px 0;
}
.dropdown-link-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.86rem;
  font-weight: 550;
  color: var(--color-text);
  text-decoration: none;
  transition: background 0.15s ease;
}
.dropdown-link-item:hover {
  background: #faf8f5;
  color: var(--color-primary);
}
.dropdown-logout-form {
  margin: 0;
}
.dropdown-logout-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.86rem;
  font-weight: 550;
  color: #dc2626;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: start;
  transition: background 0.15s ease;
}
.dropdown-logout-btn:hover {
  background: #fef2f2;
}

/* ============================================================
   GLOBAL 3-COLUMN SOCIAL LAYOUT
   ============================================================ */
.social-platform-wrap {
  width: 100%;
}
.social-home-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 300px;
  gap: 24px;
  align-items: start;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
.social-left-col, .social-right-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 84px;
}
@media (max-width: 1199px) {
  .social-home-layout {
    grid-template-columns: 240px minmax(0, 1fr);
  }
  .social-right-col {
    display: none;
  }
}
@media (max-width: 839px) {
  .social-home-layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .social-left-col {
    display: none;
  }
}

/* ============================================================
   LEFT SIDEBAR: USER PROFILE & NAVIGATION MENU
   ============================================================ */
.social-user-card {
  background: #ffffff;
  border: 1px solid var(--color-card-border);
  border-radius: 16px;
  padding: 18px 16px;
  box-shadow: 0 2px 10px rgba(28, 25, 23, 0.03);
}
.social-user-header-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.social-user-avatar-wrap {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--color-primary-soft);
  flex-shrink: 0;
  background: #f5f5f4;
}
.social-user-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.social-user-avatar-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  font-weight: 700;
  background: var(--color-primary-soft);
  color: var(--color-primary);
}
.social-user-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.social-user-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 5px;
}
.social-user-name a {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.social-user-name a:hover {
  color: var(--color-primary);
}
.social-user-status {
  font-size: 0.78rem;
  color: var(--color-muted);
  margin: 2px 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Profile Completion Meter */
.profile-meter-box {
  background: var(--color-secondary-tint, #fff7ed);
  border: 1px solid #fed7aa;
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.meter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  font-weight: 650;
  color: var(--color-text);
}
.meter-pct {
  color: var(--color-primary);
  font-weight: 700;
}
.meter-track {
  height: 6px;
  background: #fde68a;
  border-radius: 999px;
  overflow: hidden;
}
.meter-fill {
  height: 100%;
  background: linear-gradient(90deg, #c2410c, #ea580c);
  border-radius: 999px;
  transition: width 0.4s ease;
}
.meter-note {
  font-size: 0.74rem;
  color: var(--color-muted);
  line-height: 1.35;
  margin: 2px 0 0;
}
.meter-cta {
  font-size: 0.78rem;
  font-weight: 650;
  color: var(--color-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}
.meter-cta:hover {
  text-decoration: underline;
}

/* Social Nav Menu */
.social-nav-menu {
  background: #ffffff;
  border: 1px solid var(--color-card-border);
  border-radius: 16px;
  padding: 8px;
  box-shadow: 0 2px 10px rgba(28, 25, 23, 0.03);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.social-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 0 14px;
  border-radius: 12px;
  color: #44403c;
  text-decoration: none;
  font-size: 0.93rem;
  font-weight: 550;
  transition: all 0.15s ease;
}
.social-nav-item:hover {
  background: #faf6f2;
  color: #9a3412;
}
.social-nav-item.active {
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-weight: 650;
}
.nav-icon {
  font-size: 1.15rem;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}
.nav-icon-love {
  color: var(--color-love);
}
.nav-label {
  flex-grow: 1;
}
.nav-badge {
  background: var(--color-primary);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  line-height: 1.3;
}

/* ============================================================
   CENTER FEED: COMPOSER, STORIES, SOCIAL POST CARDS
   ============================================================ */
.composer-card {
  background: #ffffff;
  border: 1px solid var(--color-card-border);
  border-radius: 18px;
  padding: 16px 18px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px rgba(28, 25, 23, 0.03);
}
.composer-top-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.composer-user-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: #f5f5f4;
}
.composer-user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.composer-fake-input {
  flex-grow: 1;
  background: #f7f6f4;
  border: 1px solid #e7e5e4;
  border-radius: 999px;
  padding: 11px 18px;
  color: #78716c;
  font-size: 0.94rem;
  text-align: start;
  cursor: pointer;
  transition: all 0.15s ease;
}
.composer-fake-input:hover {
  background: #eeebe7;
  border-color: #d6d3d1;
  color: #44403c;
}
.composer-actions-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #f5f5f4;
}
.composer-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  border: none;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #44403c;
  cursor: pointer;
  transition: background 0.15s ease;
}
.composer-action-btn:hover {
  background: #faf6f2;
}

/* Stories Tray */
.stories-tray-section {
  margin-bottom: 22px;
  overflow: hidden;
}
.stories-scroll-container {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: none;
}
.stories-scroll-container::-webkit-scrollbar {
  display: none;
}
.story-card {
  position: relative;
  flex: 0 0 110px;
  height: 160px;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.story-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}
.add-story-card {
  background: #ffffff;
  display: flex;
  flex-direction: column;
}
.add-story-thumb-wrap {
  height: 110px;
  position: relative;
  background: #fdf6f0;
  overflow: hidden;
}
.add-story-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.add-story-btn-circle {
  position: absolute;
  bottom: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 700;
  border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  z-index: 2;
}
.add-story-label {
  flex-grow: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 8px;
  font-size: 0.78rem;
  font-weight: 650;
  color: var(--color-text);
}
.user-story-card .story-card-backdrop {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}
.story-cover-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.story-cover-text {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.35;
}
.story-cover-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #c2410c, #7c2d12);
}
.story-avatar-ring {
  position: absolute;
  top: 8px;
  inset-inline-start: 8px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--color-primary);
  z-index: 2;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.story-avatar-ring img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.story-user-name {
  position: absolute;
  bottom: 8px;
  inset-inline: 8px;
  color: #fff;
  font-size: 0.76rem;
  font-weight: 650;
  text-shadow: 0 1px 3px rgba(0,0,0,0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 2;
}

/* ============================================================
   POST CARD COMPONENT
   ============================================================ */
.social-post-card {
  background: #ffffff;
  border: 1px solid var(--color-card-border);
  border-radius: 18px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px rgba(28, 25, 23, 0.04);
  padding: 18px;
  overflow: visible;
}
.post-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}
.post-author-avatar-link {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: #f5f5f4;
}
.post-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.post-avatar-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  font-weight: 700;
  background: var(--color-primary-soft);
  color: var(--color-primary);
}
.post-author-meta {
  flex-grow: 1;
  margin: 0 12px;
  display: flex;
  flex-direction: column;
}
.post-author-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.post-author-name {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--color-text);
  text-decoration: none;
}
.post-author-name:hover {
  color: var(--color-primary);
}
.verified-badge-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #2563eb;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
}
.post-timestamp-row {
  font-size: 0.78rem;
  color: var(--color-muted);
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 1px;
}
.post-dot {
  font-size: 0.8rem;
}
.post-menu-wrap details {
  position: relative;
}
.post-menu-trigger {
  list-style: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  color: var(--color-muted);
}
.post-menu-trigger::-webkit-details-marker {
  display: none;
}
.post-menu-trigger:hover {
  background: #f5f5f4;
  color: var(--color-text);
}
.post-menu-dropdown {
  position: absolute;
  top: 100%;
  inset-inline-end: 0;
  width: 170px;
  background: #fff;
  border: 1px solid var(--color-card-border);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  z-index: 100;
}
.post-menu-form {
  margin: 0;
}
.post-menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.84rem;
  font-weight: 550;
  color: var(--color-text);
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: start;
  transition: background 0.15s ease;
}
.post-menu-item:hover {
  background: #faf8f5;
}
.post-menu-item.text-danger {
  color: #dc2626;
}
.post-menu-item.text-danger:hover {
  background: #fef2f2;
}

/* Post Content */
.post-body-text {
  font-size: 0.96rem;
  line-height: 1.55;
  color: var(--color-text);
  margin-bottom: 12px;
  word-break: break-word;
}
.post-media-container {
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 12px;
}
.post-photo, .post-video {
  width: 100%;
  max-height: 520px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

/* Shared Post */
.shared-post-embed {
  border: 1px solid var(--color-card-border);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 12px;
  background: #faf8f5;
}
.shared-post-header {
  font-size: 0.84rem;
  color: var(--color-muted);
  margin-bottom: 6px;
  display: flex;
  gap: 6px;
}
.shared-author-name {
  font-weight: 700;
  color: var(--color-text);
  text-decoration: none;
}
.shared-post-body {
  font-size: 0.9rem;
  color: var(--color-text);
  margin-bottom: 8px;
}

/* Metrics Bar */
.post-metrics-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 4px;
  font-size: 0.82rem;
  color: var(--color-muted);
  border-bottom: 1px solid #f5f5f4;
  margin-bottom: 4px;
}
.reaction-pill-group {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.pill-icon {
  font-size: 0.88rem;
}
.comment-count-label {
  cursor: pointer;
}
.comment-count-label:hover {
  text-decoration: underline;
}

/* Actions Toolbar & LOVE Color System */
.post-actions-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding-top: 6px;
}
.reaction-button-container {
  position: relative;
}
.post-action-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  border: none;
  background: transparent;
  border-radius: 10px;
  color: #57534e;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.post-action-btn:hover {
  background: #faf6f2;
  color: var(--color-text);
}
/* SPECIFIC LOVE / REACTION STYLING (Section 3 & 13) */
.post-action-btn.btn-like:hover {
  background: var(--color-love-soft);
  color: var(--color-love);
}
.post-action-btn.btn-like.is-love,
.post-action-btn.btn-like.active {
  color: var(--color-love);
  background: var(--color-love-soft);
}
.post-action-btn.btn-save.active {
  color: var(--color-primary);
}

/* Reactions Flyout */
.reactions-flyout {
  position: absolute;
  bottom: 100%;
  inset-inline-start: 0;
  margin-bottom: 8px;
  display: none;
  gap: 4px;
  background: #ffffff;
  padding: 6px 10px;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.14);
  border: 1px solid var(--color-card-border);
  z-index: 120;
}
.reaction-button-container:hover .reactions-flyout {
  display: flex;
  animation: flyoutPopup 0.18s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.flyout-btn {
  background: transparent;
  border: none;
  font-size: 1.35rem;
  cursor: pointer;
  padding: 2px 4px;
  transition: transform 0.15s ease;
}
.flyout-btn:hover {
  transform: scale(1.3) translateY(-3px);
}

/* Comments Section */
.post-comments-section {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #f5f5f4;
}
.comment-input-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}
.comment-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
.comment-field-wrap {
  position: relative;
  flex-grow: 1;
}
.comment-input-field {
  width: 100%;
  background: #f7f6f4;
  border: 1px solid #e7e5e4;
  border-radius: 999px;
  padding: 8px 36px 8px 14px;
  font-size: 0.88rem;
  color: var(--color-text);
  font-family: inherit;
}
.comment-input-field:focus {
  outline: none;
  background: #fff;
  border-color: var(--color-primary);
}
.comment-submit-btn {
  position: absolute;
  inset-inline-end: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--color-primary);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
}
.comments-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.comment-item {
  display: flex;
  gap: 10px;
}
.comment-item.is-reply {
  margin-inline-start: 40px;
}
.comment-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: #f5f5f4;
}
.comment-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.comment-content {
  flex-grow: 1;
}
.comment-bubble {
  background: #f7f6f4;
  border-radius: 14px;
  padding: 8px 12px;
  display: inline-block;
  max-width: 90%;
}
.comment-author-name {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--color-text);
  text-decoration: none;
  display: block;
}
.comment-author-name:hover {
  color: var(--color-primary);
}
.comment-text {
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--color-text);
  word-break: break-word;
}
.comment-meta {
  display: flex;
  gap: 12px;
  font-size: 0.74rem;
  color: var(--color-muted);
  margin-top: 4px;
  margin-inline-start: 8px;
}
.comment-reply-btn, .comment-delete-btn {
  background: transparent;
  border: none;
  padding: 0;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--color-muted);
  cursor: pointer;
}
.comment-reply-btn:hover {
  color: var(--color-primary);
}
.comment-delete-btn:hover {
  color: #dc2626;
}

/* ============================================================
   RIGHT SIDEBAR: PROFILE SUMMARY, SUGGESTED, STAY SAFE
   ============================================================ */
.social-widget {
  background: #ffffff;
  border: 1px solid var(--color-card-border);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 2px 10px rgba(28, 25, 23, 0.03);
}
.widget-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.widget-title {
  font-size: 0.96rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}
.widget-link {
  font-size: 0.78rem;
  font-weight: 650;
  color: var(--color-primary);
  text-decoration: none;
}
.widget-link:hover {
  text-decoration: underline;
}

/* Suggested Compact Profile Cards (Section 14 & 15) */
.suggested-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.suggested-compact-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--color-bg-ivory, #faf8f5);
  border: 1px solid var(--color-card-border);
  border-radius: 12px;
  padding: 10px;
  transition: all 0.15s ease;
}
.suggested-compact-card:hover {
  border-color: #fed7aa;
}
.suggested-compact-top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.suggested-avatar {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  background: #eeebe7;
}
.suggested-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.suggested-meta {
  flex-grow: 1;
  min-width: 0;
}
.suggested-name-row {
  display: flex;
  align-items: center;
  gap: 5px;
}
.suggested-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.suggested-name:hover {
  color: var(--color-primary);
}
.suggested-sub {
  font-size: 0.75rem;
  color: var(--color-muted);
  margin: 1px 0 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.suggested-match-pill {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  padding: 1px 6px;
  border-radius: 999px;
}
.suggested-compact-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 2px;
}
.btn-compact-view {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  color: var(--color-primary);
  border: 1px solid #fed7aa;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 0.78rem;
  font-weight: 650;
  text-decoration: none;
  transition: all 0.15s ease;
}
.btn-compact-view:hover {
  background: var(--color-primary-soft);
}
.btn-compact-love {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: var(--color-love-soft);
  color: var(--color-love);
  border: 1px solid var(--color-love-border);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 0.78rem;
  font-weight: 650;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-compact-love:hover {
  background: #ffe4e6;
}
.btn-love-icon {
  font-size: 0.88rem;
}

/* Dedicated Stay Safe Widget (Section 7 & 16) */
.safety-widget {
  background: #fff;
  border: 1px solid var(--color-card-border);
  border-radius: 16px;
  padding: 16px;
}
.safety-widget-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.safety-widget-text {
  font-size: 0.84rem;
  line-height: 1.45;
  color: #44403c;
  margin: 0;
}
.safety-learn-more {
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--color-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.safety-learn-more:hover {
  text-decoration: underline;
}

/* Connections Mini Widget */
.connections-mini-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.connection-mini-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.84rem;
}
.mini-name {
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
}
.mini-name:hover {
  color: var(--color-primary);
}
.mini-status {
  font-size: 0.74rem;
  color: var(--color-success-text);
  background: var(--color-success-soft);
  padding: 2px 7px;
  border-radius: 999px;
  font-weight: 600;
}

/* ============================================================
   MODALS: COMPOSER, EDIT, STORY, STORY VIEWER, REPORT
   ============================================================ */
.social-modal {
  position: fixed;
  inset: 0;
  z-index: 99990;
  display: flex;
  align-items: center;
  justify-content: center;
}
.social-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 12, 10, 0.65);
  backdrop-filter: blur(4px);
}
.social-modal-dialog {
  position: relative;
  width: min(560px, calc(100% - 32px));
  max-height: 90vh;
  overflow-y: auto;
  background: #ffffff;
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  z-index: 2;
  animation: modalPop 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes modalPop {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 1; transform: scale(1); }
}
.social-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--color-card-border);
  padding-bottom: 12px;
  margin-bottom: 16px;
}
.social-modal-header h2 {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0;
}
.social-modal-close {
  background: #f5f5f4;
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 1.3rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-muted);
}
.social-modal-close:hover {
  background: #eeebe7;
  color: var(--color-text);
}
.composer-modal-user {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.composer-user-details {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.composer-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text);
}
.composer-visibility-select {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 3px 8px;
  font-size: 0.78rem;
  font-weight: 600;
  background: #fafaf9;
}
.composer-textarea {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 1rem;
  font-family: inherit;
  resize: vertical;
}
.composer-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}
.composer-media-previews {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}
.media-preview-item {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #d6d3d1;
}
.media-preview-item img, .media-preview-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.remove-media-btn {
  position: absolute;
  top: 4px;
  inset-inline-end: 4px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 0.8rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.composer-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--color-card-border);
  border-radius: 12px;
  padding: 10px 14px;
  margin-top: 14px;
  background: #faf8f5;
}
.toolbar-label {
  font-size: 0.85rem;
  font-weight: 650;
  color: var(--color-text);
}
.toolbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}
.composer-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

/* Story Creator Tabs & Pane */
.story-type-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.tab-btn {
  flex-grow: 1;
  padding: 8px;
  border: 1px solid var(--color-border);
  background: #faf8f5;
  border-radius: 10px;
  font-size: 0.86rem;
  font-weight: 650;
  cursor: pointer;
  color: var(--color-muted);
}
.tab-btn.active {
  background: var(--color-primary-soft);
  color: var(--color-primary);
  border-color: #fed7aa;
}
.story-preview-box {
  width: 100%;
  height: 240px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.story-textarea {
  width: 100%;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 1.15rem;
  font-weight: 600;
  text-align: center;
  resize: none;
  font-family: inherit;
}
.story-textarea:focus {
  outline: none;
}
.color-picker-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
.picker-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text);
}
.color-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
  cursor: pointer;
}
.story-file-upload-box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 160px;
  border: 2px dashed #fed7aa;
  border-radius: 14px;
  background: #fff7ed;
  cursor: pointer;
  font-size: 0.92rem;
  font-weight: 650;
  color: var(--color-primary);
}

/* Story Viewer Modal */
.story-viewer-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.story-viewer-content {
  position: relative;
  width: min(400px, 92vw);
  height: min(680px, 88vh);
  background: #000;
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.story-viewer-header {
  position: absolute;
  top: 10px;
  inset-inline: 12px;
  z-index: 10;
}
.story-progress-bar-wrap {
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 8px;
}
.story-progress-fill {
  height: 100%;
  width: 0%;
  background: #fff;
  transition: width 0.1s linear;
}
.story-author-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.story-viewer-meta {
  flex-grow: 1;
  margin: 0 10px;
  display: flex;
  flex-direction: column;
}
.viewer-name {
  color: #fff;
  font-size: 0.88rem;
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}
.viewer-time {
  color: rgba(255,255,255,0.7);
  font-size: 0.72rem;
}
.story-viewer-close {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.story-viewer-body {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.viewer-text-content {
  color: #fff;
  font-size: 1.35rem;
  font-weight: 600;
  text-align: center;
  padding: 30px;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.viewer-media-content img, .viewer-media-content video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.story-nav-area {
  position: absolute;
  top: 60px;
  bottom: 0;
  width: 40%;
  z-index: 5;
  cursor: pointer;
}
.story-nav-area.prev-area {
  inset-inline-start: 0;
}
.story-nav-area.next-area {
  inset-inline-end: 0;
}

/* Empty Feed Card */
.empty-feed-card {
  background: #ffffff;
  border: 1px dashed #fed7aa;
  border-radius: 18px;
  padding: 48px 24px;
  text-align: center;
  margin-top: 10px;
}
.empty-feed-icon {
  font-size: 2.8rem;
  margin-bottom: 10px;
}
.empty-feed-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--color-text);
}
.empty-feed-desc {
  font-size: 0.92rem;
  color: var(--color-muted);
  margin-bottom: 20px;
  max-width: 380px;
  margin-inline: auto;
}

/* ============================================================
   RTL LANGUAGE SUPPORT (Arabic, Urdu, Persian)
   ============================================================ */
[dir="rtl"] .social-nav-item {
  text-align: right;
}
[dir="rtl"] .dropdown-logout-btn,
[dir="rtl"] .post-menu-item {
  text-align: right;
}
[dir="rtl"] .comment-meta {
  margin-inline-start: 0;
  margin-inline-end: 8px;
}
[dir="rtl"] .safety-widget-text {
  text-align: right;
}

/* ============================================================
   PREMIUM MATRIMONIAL PROFILE PAGE STYLING
   ============================================================ */
.profile-page-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 100%;
}

/* 1. Hero Card: Cover + Overlapping Avatar + Info */
.profile-hero-card {
  border-radius: 20px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #ffedd5;
  box-shadow: 0 4px 20px rgba(154, 52, 18, 0.06);
  padding: 0;
}

.profile-cover-banner {
  position: relative;
  width: 100%;
  height: 260px;
  min-height: 180px;
  overflow: hidden;
  background-color: #fce7db;
}

.profile-cover-banner.has-gradient-cover {
  background: linear-gradient(135deg, #7c2d12 0%, #c2410c 50%, #ea580c 100%);
  background-image:
    radial-gradient(circle at 20% 40%, rgba(255, 237, 213, 0.25) 0%, transparent 40%),
    radial-gradient(circle at 80% 60%, rgba(254, 215, 170, 0.2) 0%, transparent 40%),
    linear-gradient(135deg, #7c2d12 0%, #c2410c 50%, #ea580c 100%);
}

.profile-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cover-change-btn {
  position: absolute;
  top: 16px;
  inset-inline-end: 16px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  color: #ffffff;
  padding: 8px 14px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
  z-index: 2;
}
.cover-change-btn:hover {
  background: rgba(0, 0, 0, 0.75);
  transform: translateY(-1px);
}

.profile-back-btn {
  position: absolute;
  top: 16px;
  inset-inline-start: 16px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  color: #ffffff;
  padding: 8px 14px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  z-index: 2;
  transition: all 0.2s ease;
}
.profile-back-btn:hover {
  background: rgba(0, 0, 0, 0.75);
  color: #ffffff;
}

.profile-header-content {
  padding: 0 24px 24px 24px;
  position: relative;
}

.profile-avatar-row {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
}

.profile-avatar-container {
  position: relative;
  width: 130px;
  height: 130px;
  margin-top: -65px;
  border-radius: 50%;
  border: 4px solid #ffffff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
  background: #ffffff;
  flex-shrink: 0;
  z-index: 3;
}

.profile-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.profile-avatar-fallback {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #c2410c, #ea580c);
  color: #ffffff;
  font-size: 2.8rem;
  font-weight: 700;
  font-family: 'Playfair Display', Georgia, serif;
}

.presence-badge {
  position: absolute;
  bottom: 8px;
  inset-inline-end: 8px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2.5px solid #ffffff;
  z-index: 4;
}
.presence-badge.online {
  background-color: #22c55e;
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.6);
}
.presence-badge.recent {
  background-color: #eab308;
}

.avatar-edit-trigger {
  position: absolute;
  bottom: 2px;
  inset-inline-start: 2px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid #fed7aa;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
  cursor: pointer;
  font-size: 0.95rem;
  z-index: 5;
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.avatar-edit-trigger:hover {
  transform: scale(1.1);
  background-color: #fff7ed;
}

.profile-identity-col {
  flex: 1;
  min-width: 250px;
  padding-top: 10px;
}

.profile-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.profile-display-name {
  margin: 0;
  font-size: 1.65rem;
  font-weight: 700;
  color: #1c1917;
  font-family: 'Playfair Display', Georgia, serif;
  line-height: 1.2;
}

.verified-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
}
.verified-pill .verified-icon {
  font-weight: 800;
}

.compat-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #fff1f2;
  color: #e11d48;
  border: 1px solid #fecdd3;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 700;
}

.profile-headline-details {
  margin: 4px 0 8px 0;
  color: #78716c;
  font-size: 0.92rem;
  font-weight: 500;
}

.profile-quick-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.quick-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.82rem;
  color: #44403c;
  background: #fdfaf6;
  border: 1px solid #fed7aa;
  padding: 3px 10px;
  border-radius: 8px;
  font-weight: 500;
}

.profile-actions-col {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 10px;
}

.action-inline-form {
  display: inline-flex;
  margin: 0;
}

.btn-interest-primary {
  background: linear-gradient(135deg, #e11d48, #be123c);
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  border-radius: 12px;
  font-weight: 650;
  font-size: 0.92rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 14px rgba(225, 29, 72, 0.28);
  transition: all 0.2s ease;
}
.btn-interest-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(225, 29, 72, 0.38);
  color: #ffffff;
}

.badge-status-connected {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid #bbf7d0;
  padding: 9px 16px;
  border-radius: 12px;
  font-weight: 650;
  font-size: 0.88rem;
}

.badge-status-pending {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fffbeb;
  color: #b45309;
  border: 1px solid #fde68a;
  padding: 9px 16px;
  border-radius: 12px;
  font-weight: 650;
  font-size: 0.88rem;
}

.btn-shortlist.is-active {
  background: #fef3c7;
  color: #92400e;
  border-color: #fcd34d;
  font-weight: 650;
}

.profile-more-dropdown {
  position: relative;
  display: inline-block;
}
.profile-more-dropdown summary {
  list-style: none;
  cursor: pointer;
}
.profile-more-dropdown summary::-webkit-details-marker {
  display: none;
}
.profile-more-dropdown .dropdown-menu {
  position: absolute;
  top: 100%;
  inset-inline-end: 0;
  margin-top: 6px;
  background: #ffffff;
  border: 1px solid #fed7aa;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  min-width: 170px;
  padding: 6px 0;
  z-index: 10;
}
.profile-more-dropdown .dropdown-item {
  width: 100%;
  text-align: start;
  padding: 8px 14px;
  font-size: 0.86rem;
  background: transparent;
  border: none;
  cursor: pointer;
  display: block;
}
.profile-more-dropdown .dropdown-item:hover {
  background: #fff7ed;
}

/* 2. Two-Column Profile Grid */
.profile-layout-grid {
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
@media (max-width: 960px) {
  .profile-layout-grid {
    grid-template-columns: 1fr;
  }
  .profile-avatar-row {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .profile-avatar-container {
    margin-top: -65px;
  }
  .profile-name-row {
    justify-content: center;
  }
  .profile-quick-tags {
    justify-content: center;
  }
  .profile-actions-col {
    justify-content: center;
  }
  .profile-attributes-list .attribute-row {
    flex-direction: column;
    gap: 2px;
  }
  .profile-attributes-list .attribute-value {
    text-align: start;
  }
  .chips-container {
    justify-content: flex-start;
  }
}

.profile-left-col,
.profile-right-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Profile Meter Card */
.profile-meter-card {
  padding: 20px;
  background: #ffffff;
  border: 1px solid #ffedd5;
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(154, 52, 18, 0.03);
}

.meter-suggestions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
}

.meter-suggestion-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #c2410c;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 8px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  transition: all 0.15s ease;
}
.meter-suggestion-link:hover {
  background: #ffedd5;
  transform: translateX(2px);
}
.meter-suggestion-link .plus-icon {
  font-weight: 700;
  color: #ea580c;
}

.meter-completed-text {
  font-size: 0.88rem;
  color: #047857;
  font-weight: 600;
  margin-top: 10px;
  margin-bottom: 0;
}

/* Profile Section Card */
.profile-section-card {
  background: #ffffff;
  border: 1px solid #ffedd5;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(154, 52, 18, 0.03);
}

.section-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  border-bottom: 1px solid #fbf0e8;
  padding-bottom: 10px;
}

.section-card-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #1c1917;
  margin: 0;
  font-family: 'Playfair Display', Georgia, serif;
}

.section-edit-link {
  color: #c2410c;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
}
.section-edit-link:hover {
  text-decoration: underline;
}

.privacy-tag {
  font-size: 0.75rem;
  color: #78716c;
  background: #f5f5f4;
  padding: 2px 6px;
  border-radius: 6px;
}

.bio-text {
  font-size: 0.92rem;
  line-height: 1.6;
  color: #44403c;
  margin: 0;
}

.empty-field-prompt {
  text-align: center;
  padding: 16px 8px;
}
.empty-prompt-text {
  font-size: 0.88rem;
  color: #78716c;
  line-height: 1.5;
  margin-bottom: 12px;
}

/* Attributes List */
.profile-attributes-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.attribute-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 0.88rem;
}

.attribute-label {
  color: #78716c;
  font-weight: 500;
  min-width: 120px;
}

.attribute-value {
  color: #1c1917;
  font-weight: 600;
  text-align: end;
  margin: 0;
}

.chips-container {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.info-chip {
  background: #fff7ed;
  color: #9a3412;
  border: 1px solid #fed7aa;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 12px;
}

/* Compatibility overview card */
.compat-overview-card .compat-pct {
  font-size: 0.95rem;
  font-weight: 700;
  color: #e11d48;
}
.compat-summary-text {
  font-size: 0.86rem;
  color: #78716c;
  margin-top: 8px;
  margin-bottom: 0;
}

/* Photo Gallery Card */
.profile-gallery-card {
  padding: 20px;
  background: #ffffff;
  border: 1px solid #ffedd5;
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(154, 52, 18, 0.03);
}

.gallery-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  border-bottom: 1px solid #fbf0e8;
  padding-bottom: 10px;
}

.gallery-counter {
  font-size: 0.82rem;
  color: #78716c;
  margin-inline-start: 8px;
  font-weight: 500;
}

.gallery-add-btn {
  cursor: pointer;
  margin: 0;
}

.gallery-thumbnails-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 600px) {
  .gallery-thumbnails-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.gallery-thumb-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  background: #fdfaf6;
  border: 1px solid #fed7aa;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.gallery-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease;
}
.gallery-thumb-item:hover .gallery-thumb-img {
  transform: scale(1.05);
}

.gallery-thumb-item .primary-badge {
  position: absolute;
  bottom: 6px;
  inset-inline-start: 6px;
  background: rgba(194, 65, 12, 0.92);
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 6px;
  z-index: 2;
}

.gallery-thumb-overlay {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  padding: 6px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 3;
}
.gallery-thumb-item:hover .gallery-thumb-overlay {
  opacity: 1;
}

.thumb-btn {
  background: rgba(0, 0, 0, 0.65);
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 3px 6px;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}
.thumb-btn:hover {
  background: rgba(0, 0, 0, 0.85);
}
.thumb-btn.delete-photo {
  background: rgba(225, 29, 72, 0.85);
  font-size: 0.9rem;
  line-height: 1;
}
.thumb-btn.delete-photo:hover {
  background: #be123c;
}

.gallery-empty-box {
  text-align: center;
  padding: 32px 16px;
  background: #fffaf5;
  border: 1px dashed #fed7aa;
  border-radius: 12px;
}
.gallery-empty-box .empty-icon {
  font-size: 2.2rem;
  display: block;
  margin-bottom: 6px;
}
.gallery-empty-box .empty-text {
  font-size: 0.92rem;
  font-weight: 600;
  color: #44403c;
  margin: 0 0 4px 0;
}
.gallery-empty-box .empty-subtext {
  font-size: 0.82rem;
  color: #78716c;
  margin: 0;
}

/* Profile Posts Feed */
.profile-posts-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.profile-feed-heading {
  font-size: 1.15rem;
  font-weight: 700;
  color: #1c1917;
  margin: 0;
  font-family: 'Playfair Display', Georgia, serif;
}

.profile-posts-stream {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.empty-posts-card {
  text-align: center;
  padding: 40px 20px;
  background: #ffffff;
  border: 1px dashed #fed7aa;
  border-radius: 16px;
}
.empty-posts-card .empty-post-icon {
  font-size: 2.4rem;
  display: block;
  margin-bottom: 8px;
}
.empty-posts-card .empty-post-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1c1917;
  margin: 0 0 6px 0;
}
.empty-posts-card .empty-post-desc {
  font-size: 0.88rem;
  color: #78716c;
  max-width: 380px;
  margin: 0 auto 16px auto;
  line-height: 1.5;
}

.profile-feed-pagination {
  margin-top: 10px;
  display: flex;
  justify-content: center;
}

/* ==========================================================================
   PREMIUM LANGUAGE SELECTOR DROPDOWN (Responsive & Boundary-Aware)
   ========================================================================== */
.premium-lang-dropdown {
  position: relative;
  display: inline-block;
  z-index: 25;
}
.premium-lang-dropdown.is-active {
  z-index: 1200;
}

.lang-trigger-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  background: #ffffff;
  border: 1px solid #e7dfd5;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #1c1917;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  white-space: nowrap;
  user-select: none;
}
.lang-trigger-btn:hover {
  border-color: #c2410c;
  color: #c2410c;
  background: #fffbf7;
  box-shadow: 0 3px 8px rgba(194, 65, 12, 0.12);
}
.lang-trigger-btn:focus-visible {
  outline: 2px solid #c2410c;
  outline-offset: 2px;
}
.premium-lang-dropdown.is-active .lang-trigger-btn {
  border-color: #c2410c;
  color: #c2410c;
  background: #fff7ed;
  box-shadow: 0 0 0 3px rgba(194, 65, 12, 0.15);
}
.premium-lang-dropdown.is-active .lang-chevron-icon {
  transform: rotate(180deg);
}

.lang-globe-icon {
  font-size: 1rem;
  line-height: 1;
}
.lang-current-label {
  font-weight: 700;
  letter-spacing: -0.01em;
}
.lang-chevron-icon {
  font-size: 0.72rem;
  color: #78716c;
  transition: transform 0.2s ease;
  line-height: 1;
}

.lang-dropdown-panel {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: auto;
  width: 290px;
  max-width: calc(100vw - 24px);
  max-height: 400px;
  background: #ffffff;
  border: 1px solid #e7dfd5;
  border-radius: 18px;
  box-shadow: 0 16px 40px rgba(28, 25, 23, 0.18), 0 2px 6px rgba(0,0,0,0.04);
  z-index: 1200;
  overflow: hidden;
  box-sizing: border-box;
  animation: langFadeIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.lang-dropdown-panel.is-open {
  display: flex;
  flex-direction: column;
}

.lang-dropdown-panel.open-upward {
  top: auto;
  bottom: calc(100% + 8px);
  animation: langFadeInUp 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Fallback for header in LTR if JS hasn't run yet */
.site-header .lang-dropdown-panel {
  left: auto;
  right: 0;
}
[dir="rtl"] .site-header .lang-dropdown-panel {
  left: 0;
  right: auto;
}

@keyframes langFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes langFadeInUp {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.lang-search-box {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #faf8f5;
  border-bottom: 1px solid #e7dfd5;
  z-index: 2;
}
.lang-search-icon {
  font-size: 0.9rem;
  color: #78716c;
  line-height: 1;
}
.lang-search-input {
  flex: 1;
  width: 100%;
  border: none;
  background: transparent;
  font-size: 0.86rem;
  color: #1c1917;
  outline: none;
  padding: 2px 0;
}
.lang-search-input::placeholder {
  color: #a8a29e;
}
.lang-search-clear-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background: #e7dfd5;
  color: #57534e;
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  transition: all 0.15s ease;
}
.lang-search-clear-btn:hover {
  background: #d6cdc4;
  color: #1c1917;
}

.lang-options-list {
  list-style: none;
  margin: 0;
  padding: 6px 0;
  overflow-y: auto;
  max-height: 320px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.lang-option-item {
  margin: 0;
  padding: 0;
}
.lang-option-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  font-size: 0.88rem;
  color: #292524;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
  user-select: none;
  outline: none;
}
.lang-option-link:hover,
.lang-option-link:focus-visible {
  background: #fff7ed;
  color: #c2410c;
}
.lang-option-link.is-active {
  background: #ffedd5;
  color: #9a3412;
  font-weight: 700;
}
.lang-check-slot {
  width: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.lang-check-mark {
  color: #c2410c;
  font-weight: 900;
  font-size: 0.95rem;
}
.lang-native-name {
  flex: 1;
  font-weight: 600;
}
.lang-english-sub {
  font-size: 0.76rem;
  color: #78716c;
  font-weight: 500;
  margin-inline-start: 4px;
}
.lang-rtl-badge {
  font-size: 0.68rem;
  font-weight: 700;
  color: #78716c;
  background: #f5f0ea;
  border: 1px solid #e7dfd5;
  border-radius: 4px;
  padding: 1px 4px;
  line-height: 1.2;
}

.lang-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 24px 16px;
  color: #78716c;
  text-align: center;
}
.lang-empty-icon {
  font-size: 1.4rem;
  opacity: 0.7;
}
.lang-empty-text {
  font-size: 0.84rem;
  font-weight: 500;
  margin: 0;
}

@media (max-width: 480px) {
  .lang-dropdown-panel {
    border-radius: 16px;
  }
  .lang-option-link {
    padding: 11px 14px;
  }
}

/* ==========================================================================
   SETTINGS PAGE REDESIGN
   ========================================================================== */
.settings-page-wrapper {
  max-width: 860px;
  margin: 28px auto 60px auto;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.settings-hero-header {
  margin-bottom: 4px;
}
.settings-page-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 2.1rem;
  font-weight: 800;
  color: #1c1917;
  margin: 0 0 6px 0;
  letter-spacing: -0.02em;
}
.settings-page-subtitle {
  font-size: 0.96rem;
  color: #57534e;
  margin: 0;
}

.settings-alert-success {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 14px;
  color: #15803d;
  font-weight: 600;
  font-size: 0.92rem;
}
.settings-alert-success .alert-icon {
  font-weight: 800;
}

.settings-group-card {
  background: #ffffff;
  border: 1px solid #e7dfd5;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(28, 25, 23, 0.03);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.settings-group-header {
  display: flex;
  align-items: center;
  gap: 14px;
}
.settings-group-icon {
  width: 44px;
  height: 44px;
  background: #ffedd5;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}
.settings-group-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: #1c1917;
  margin: 0 0 2px 0;
}
.settings-group-subtitle {
  font-size: 0.86rem;
  color: #78716c;
  margin: 0;
}

.settings-divider {
  height: 1px;
  background: #f0eae1;
  margin: 4px 0;
}

/* Profile Row inside settings */
.settings-profile-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.settings-profile-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.settings-avatar-circle {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #ffedd5;
  border: 2px solid #fed7aa;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.settings-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.settings-avatar-initial {
  font-size: 1.6rem;
  font-weight: 800;
  color: #c2410c;
}
.settings-name-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
}
.settings-user-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1c1917;
}
.settings-badge-verified {
  font-size: 0.75rem;
  font-weight: 700;
  background: #dcfce7;
  color: #166534;
  padding: 2px 8px;
  border-radius: 999px;
}
.settings-user-email {
  font-size: 0.88rem;
  color: #57534e;
}

/* Buttons */
.btn-settings-outline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: transparent;
  border: 1px solid #d6cbbe;
  border-radius: 12px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #292524;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-settings-outline:hover {
  background: #faf8f5;
  border-color: #c2410c;
  color: #c2410c;
}

.btn-settings-primary {
  padding: 10px 22px;
  background: #c2410c;
  color: #ffffff;
  border: none;
  border-radius: 12px;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
}
.btn-settings-primary:hover {
  background: #9a3412;
}

.btn-settings-danger {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  background: #fee2e2;
  border: 1px solid #fca5a5;
  color: #b91c1c;
  border-radius: 12px;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease;
}
.btn-settings-danger:hover {
  background: #fecaca;
  color: #991b1b;
}

.btn-logout {
  color: #78716c;
}

/* Forms */
.settings-sub-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.settings-sub-title {
  font-size: 1rem;
  font-weight: 700;
  color: #1c1917;
  margin: 0;
}
.settings-form-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.form-row-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 640px) {
  .form-row-pair {
    grid-template-columns: 1fr;
  }
}
.form-group-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field-label {
  font-size: 0.86rem;
  font-weight: 600;
  color: #44403c;
}
.field-input {
  width: 100%;
  padding: 10px 14px;
  background: #faf8f5;
  border: 1px solid #d6cbbe;
  border-radius: 12px;
  font-size: 0.92rem;
  color: #1c1917;
  box-sizing: border-box;
}
.field-input:focus {
  outline: none;
  border-color: #c2410c;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(194, 65, 12, 0.1);
}
.field-error {
  font-size: 0.8rem;
  color: #dc2626;
  font-weight: 500;
}
.form-action-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}

/* Language Box in Settings */
.settings-language-box {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.settings-lang-status-line {
  display: flex;
  align-items: center;
  gap: 8px;
}
.settings-lang-badge-title {
  font-size: 0.88rem;
  color: #57534e;
  font-weight: 500;
}
.settings-lang-badge-pill {
  font-size: 0.86rem;
  font-weight: 700;
  color: #9a3412;
  background: #ffedd5;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid #fed7aa;
}
.settings-language-picker-wrap {
  border: 1px solid #e7dfd5;
  border-radius: 16px;
  background: #faf8f5;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.settings-lang-search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #ffffff;
  border: 1px solid #d6cbbe;
  border-radius: 10px;
}
.settings-lang-search-bar .search-glyph {
  font-size: 0.88rem;
  color: #78716c;
}
.settings-lang-search-input {
  width: 100%;
  border: none;
  background: transparent;
  font-size: 0.88rem;
  outline: none;
  color: #1c1917;
}

.settings-lang-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px;
  max-height: 240px;
  overflow-y: auto;
  padding-inline-end: 4px;
}
.settings-lang-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 8px 12px;
  background: #ffffff;
  border: 1px solid #e7dfd5;
  border-radius: 10px;
  cursor: pointer;
  position: relative;
  text-align: start;
  transition: all 0.15s ease;
}
.settings-lang-card:hover {
  border-color: #c2410c;
  background: #fffaf5;
}
.settings-lang-card.is-selected {
  border-color: #c2410c;
  background: #ffedd5;
  box-shadow: 0 0 0 1px #c2410c;
}
.settings-lang-card-check {
  position: absolute;
  top: 6px;
  inset-inline-end: 8px;
  font-size: 0.85rem;
  font-weight: 900;
  color: #c2410c;
}
.settings-lang-card-native {
  font-size: 0.88rem;
  font-weight: 700;
  color: #1c1917;
}
.settings-lang-card-label {
  font-size: 0.72rem;
  color: #78716c;
}

/* Toggle Checkboxes */
.settings-toggles-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.toggle-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 14px;
  background: #faf8f5;
  border: 1px solid #f0eae1;
  border-radius: 12px;
  cursor: pointer;
}
.toggle-checkbox-row:hover {
  background: #fffdfb;
  border-color: #e7dfd5;
}
.toggle-check {
  margin-top: 3px;
  accent-color: #c2410c;
  width: 18px;
  height: 18px;
  cursor: pointer;
}
.toggle-text-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.toggle-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: #1c1917;
}
.toggle-desc {
  font-size: 0.78rem;
  color: #78716c;
  line-height: 1.4;
}

/* Safety Tiles */
.settings-safety-cards-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.settings-link-tile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: #faf8f5;
  border: 1px solid #e7dfd5;
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: all 0.15s ease;
}
.settings-link-tile:hover {
  background: #ffffff;
  border-color: #c2410c;
  transform: translateX(2px);
}
.tile-icon {
  font-size: 1.4rem;
}
.tile-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tile-title {
  font-size: 0.94rem;
  font-weight: 700;
  color: #1c1917;
}
.tile-desc {
  font-size: 0.8rem;
  color: #78716c;
}
.tile-arrow {
  font-size: 1.4rem;
  color: #a8a29e;
}

/* Danger Zone & Logout */
.settings-danger-zone {
  border-color: #fecaca;
  background: #fffcfc;
}
.settings-danger-zone .settings-group-icon {
  background: #fee2e2;
}
.settings-management-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.action-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.action-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.action-title {
  font-size: 0.94rem;
  font-weight: 700;
  color: #1c1917;
}
.action-title.text-danger {
  color: #b91c1c;
}
.action-desc {
  font-size: 0.82rem;
  color: #78716c;
}

/* Toast */
.settings-toast-notice {
  position: fixed;
  bottom: 24px;
  inset-inline-start: 50%;
  transform: translateX(-50%) translateY(30px);
  background: #1c1917;
  color: #ffffff;
  padding: 12px 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  opacity: 0;
  pointer-events: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 2000;
}
.settings-toast-notice.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.settings-toast-notice .toast-icon {
  color: #4ade80;
  font-weight: 900;
}

/* ==========================================================================
   RTL LANGUAGE SUPPORT (Arabic, Urdu, Persian)
   ========================================================================== */
[dir="rtl"] {
  text-align: start;
}

[dir="rtl"] .header-center-search .search-icon {
  display: none !important;
}

[dir="rtl"] .header-search-input {
  padding-inline-start: 18px;
  padding-inline-end: 18px;
}

[dir="rtl"] .header-badge {
  inset-inline-end: -4px;
  inset-inline-start: auto;
}

[dir="rtl"] .tile-arrow {
  transform: rotate(180deg);
}

[dir="rtl"] .settings-link-tile:hover {
  transform: translateX(-2px);
}

[dir="rtl"] .settings-toast-notice {
  transform: translateX(50%) translateY(30px);
}
[dir="rtl"] .settings-toast-notice.is-visible {
  transform: translateX(50%) translateY(0);
}

[dir="rtl"] .chat-bubble.mine {
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 4px;
}
[dir="rtl"] .chat-bubble.theirs {
  border-bottom-right-radius: 18px;
  border-bottom-left-radius: 4px;
}

[dir="rtl"] .crumbs a::after {
  content: "‹";
  margin-inline: 6px;
}

/* ==========================================================================
   PREMIUM GLOBAL MATRIMONIAL PLATFORM DESIGN SYSTEM
   Theme: Warm Terracotta / Burnt Orange, Warm Ivory, Muted Gold, Charcoal
   ========================================================================== */
:root {
  --matri-primary: #B85D3B;
  --matri-primary-hover: #A04A2A;
  --matri-primary-soft: #FBF0EB;
  --matri-primary-glow: rgba(184, 93, 59, 0.16);
  --matri-gold: #C59B27;
  --matri-gold-soft: #FAF3DE;
  --matri-bg: #FAF7F2;
  --matri-card-bg: #FFFFFF;
  --matri-card-soft: #FDFBF8;
  --matri-border: #EFE8DE;
  --matri-border-subtle: #F5EFE6;
  --matri-text: #2D241E;
  --matri-text-muted: #7A6A5E;
  --matri-text-light: #9E8E82;
  --matri-success: #2E7D47;
  --matri-success-bg: #EAF7EE;
  --matri-font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --matri-font-sans: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --matri-shadow-sm: 0 1px 3px rgba(45, 36, 30, 0.04), 0 1px 2px rgba(45, 36, 30, 0.02);
  --matri-shadow-md: 0 4px 14px rgba(45, 36, 30, 0.06), 0 2px 6px rgba(45, 36, 30, 0.03);
  --matri-shadow-lg: 0 12px 28px rgba(45, 36, 30, 0.09), 0 4px 10px rgba(45, 36, 30, 0.04);
  --matri-radius-sm: 8px;
  --matri-radius-md: 12px;
  --matri-radius-lg: 18px;
  --matri-radius-xl: 22px;
}

body.matrimonial-theme {
  background-color: var(--matri-bg);
  color: var(--matri-text);
  font-family: var(--matri-font-sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Master 3-Column Matrimonial Layout */
.matrimonial-container {
  max-width: 1420px;
  margin: 0 auto;
  padding: 24px 20px 48px;
}

.matrimonial-dashboard-grid {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 300px;
  gap: 28px;
  align-items: start;
}

/* --------------------------------------------------------------------------
   LEFT SIDEBAR: Compact & Premium
   -------------------------------------------------------------------------- */
.matri-left-sidebar {
  position: sticky;
  top: 88px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.matri-side-user-card {
  background: var(--matri-card-bg);
  border: 1px solid var(--matri-border);
  border-radius: var(--matri-radius-lg);
  padding: 16px 14px;
  box-shadow: var(--matri-shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: box-shadow 0.2s ease;
}

.matri-side-user-card:hover {
  box-shadow: var(--matri-shadow-md);
}

.matri-side-user-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.matri-side-avatar-wrap {
  position: relative;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--matri-card-bg);
  box-shadow: 0 0 0 1.5px var(--matri-border);
  background: var(--matri-border-subtle);
}

.matri-side-avatar-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.matri-avatar-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F3ECE2;
  color: var(--matri-primary);
}

.matri-avatar-fallback svg {
  width: 24px;
  height: 24px;
  stroke: var(--matri-primary);
  fill: none;
}

.matri-side-user-info {
  min-width: 0;
  flex: 1;
}

.matri-side-user-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--matri-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 0 2px;
}

.matri-side-view-profile {
  font-size: 12px;
  color: var(--matri-primary);
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  transition: color 0.15s ease;
}

.matri-side-view-profile:hover {
  color: var(--matri-primary-hover);
  text-decoration: underline;
}

/* Compact Profile Completion Progress in Sidebar */
.matri-side-completion {
  padding-top: 10px;
  border-top: 1px solid var(--matri-border-subtle);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.matri-side-completion-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
  color: var(--matri-text-muted);
}

.matri-side-completion-pct {
  font-weight: 700;
  color: var(--matri-primary);
  font-size: 13px;
}

.matri-side-prog-track {
  height: 6px;
  background: #EFE7DC;
  border-radius: 99px;
  overflow: hidden;
  position: relative;
}

.matri-side-prog-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--matri-primary) 0%, var(--matri-gold) 100%);
  border-radius: 99px;
  transition: width 0.4s ease;
}

.matri-side-completion-cta {
  font-size: 12px;
  font-weight: 600;
  color: var(--matri-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}

.matri-side-completion-cta:hover {
  text-decoration: underline;
}

/* Navigation List */
.matri-side-nav-card {
  background: var(--matri-card-bg);
  border: 1px solid var(--matri-border);
  border-radius: var(--matri-radius-lg);
  padding: 8px;
  box-shadow: var(--matri-shadow-sm);
}

.matri-side-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.matri-side-nav-item a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--matri-radius-md);
  color: var(--matri-text);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.15s ease;
}

.matri-side-nav-item a:hover {
  background: var(--matri-primary-soft);
  color: var(--matri-primary);
}

.matri-side-nav-item.active a {
  background: #FAF0E9;
  color: var(--matri-primary);
  font-weight: 700;
}

.matri-side-nav-icon {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.matri-side-nav-badge {
  margin-left: auto;
  background: var(--matri-primary);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 99px;
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
   CENTER MAIN CONTENT: Matrimonial Discovery Focus
   -------------------------------------------------------------------------- */
.matri-main-content {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}

/* Hero / Discovery Banner */
.matri-hero-banner {
  background: linear-gradient(135deg, #FFFDFB 0%, #FAF3EC 60%, #F5EAE0 100%);
  border: 1px solid #EADBCC;
  border-radius: var(--matri-radius-xl);
  padding: 24px 28px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--matri-shadow-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.matri-hero-banner::before {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(197, 155, 39, 0.12) 0%, rgba(184, 93, 59, 0) 70%);
  pointer-events: none;
}

.matri-hero-text {
  max-width: 520px;
  position: relative;
  z-index: 1;
}

.matri-hero-title {
  font-family: var(--matri-font-serif);
  font-size: 22px;
  line-height: 1.25;
  color: #261B14;
  margin: 0 0 6px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.matri-hero-subtitle {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--matri-text-muted);
  margin: 0 0 16px;
}

.matri-hero-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.matri-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--matri-primary);
  color: #FFFFFF;
  font-size: 13.5px;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 99px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 8px var(--matri-primary-glow);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.matri-btn-primary:hover {
  background: var(--matri-primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--matri-primary-glow);
  color: #FFFFFF;
}

.matri-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: #FFFFFF;
  color: var(--matri-text);
  font-size: 13.5px;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 99px;
  text-decoration: none;
  border: 1px solid var(--matri-border);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.matri-btn-secondary:hover {
  background: var(--matri-bg);
  border-color: #D8CCC0;
  color: var(--matri-text);
  transform: translateY(-1px);
}

/* Quick Action Row */
.matri-quick-actions-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.matri-quick-action-card {
  background: var(--matri-card-bg);
  border: 1px solid var(--matri-border);
  border-radius: var(--matri-radius-md);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--matri-text);
  box-shadow: var(--matri-shadow-sm);
  transition: all 0.2s ease;
}

.matri-quick-action-card:hover {
  transform: translateY(-2px);
  border-color: #D8CCC0;
  box-shadow: var(--matri-shadow-md);
  color: var(--matri-primary);
}

.matri-quick-action-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--matri-primary-soft);
  color: var(--matri-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.matri-quick-action-icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

.matri-quick-action-content {
  min-width: 0;
}

.matri-quick-action-label {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  display: block;
}

.matri-quick-action-sub {
  font-size: 11px;
  color: var(--matri-text-muted);
  line-height: 1.2;
}

/* --------------------------------------------------------------------------
   RECOMMENDED FOR YOU SECTION
   -------------------------------------------------------------------------- */
.matri-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.matri-section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.matri-section-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.matri-section-title {
  font-family: var(--matri-font-serif);
  font-size: 21px;
  color: #261B14;
  margin: 0;
  font-weight: 700;
}

.matri-section-subtitle {
  font-size: 13px;
  color: var(--matri-text-muted);
  margin: 0;
}

.matri-section-view-all {
  font-size: 13px;
  font-weight: 600;
  color: var(--matri-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.matri-section-view-all:hover {
  text-decoration: underline;
}

/* Profile Grid (4:5 Aspect Ratio Cards) */
.matri-profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}

.matri-profile-card {
  background: var(--matri-card-bg);
  border: 1px solid var(--matri-border);
  border-radius: var(--matri-radius-lg);
  overflow: hidden;
  box-shadow: var(--matri-shadow-sm);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease;
  position: relative;
}

.matri-profile-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--matri-shadow-lg);
  border-color: #DFD3C4;
}

/* 4:5 Aspect Ratio Photo Container */
.matri-card-media-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  background: #F4EDE3;
  overflow: hidden;
}

.matri-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.4s ease;
}

.matri-profile-card:hover .matri-card-img {
  transform: scale(1.03);
}

.matri-card-fallback-avatar {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(180deg, #F9F5EE 0%, #EDE4D6 100%);
  color: #9C8B7D;
}

.matri-card-fallback-avatar svg {
  width: 48px;
  height: 48px;
  stroke: #A89586;
  fill: none;
}

/* Badges on top of card photo */
.matri-card-badges {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  pointer-events: none;
  z-index: 2;
}

.matri-compat-pill {
  background: rgba(38, 27, 20, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #F8EFE3;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  letter-spacing: 0.02em;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.matri-compat-pill.is-high {
  background: rgba(184, 93, 59, 0.88);
  color: #FFFFFF;
}

.matri-verified-badge {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #2E7D47;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.matri-verified-badge svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 2.5;
  fill: none;
}

.matri-card-body {
  padding: 14px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.matri-card-identity {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.matri-card-name-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}

.matri-card-name {
  font-size: 16px;
  font-weight: 700;
  color: #2D241E;
  text-decoration: none;
  line-height: 1.25;
}

.matri-card-name:hover {
  color: var(--matri-primary);
}

.matri-card-age {
  font-size: 15px;
  font-weight: 500;
  color: var(--matri-text-muted);
}

.matri-card-meta {
  font-size: 12.5px;
  color: var(--matri-text-muted);
  line-height: 1.35;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.matri-card-meta-dot {
  color: #C8BCB0;
  font-size: 9px;
}

/* Shared Preferences Chips */
.matri-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}

.matri-chip {
  font-size: 11px;
  font-weight: 500;
  color: #695A4F;
  background: #F5EFE7;
  padding: 2px 8px;
  border-radius: 99px;
  line-height: 1.3;
}

/* Card Action Buttons */
.matri-card-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
}

.matri-btn-view-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: var(--matri-bg);
  border: 1px solid var(--matri-border);
  color: var(--matri-text);
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 10px;
  border-radius: var(--matri-radius-sm);
  text-decoration: none;
  transition: all 0.15s ease;
}

.matri-btn-view-card:hover {
  background: #EDE6DC;
  color: var(--matri-text);
}

.matri-btn-interest-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: var(--matri-primary-soft);
  border: 1px solid #EED7CB;
  color: var(--matri-primary);
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 10px;
  border-radius: var(--matri-radius-sm);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.matri-btn-interest-card:hover,
.matri-btn-interest-card.is-sent {
  background: var(--matri-primary);
  color: #FFFFFF;
  border-color: var(--matri-primary);
}

.matri-btn-interest-card svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

.matri-btn-interest-card.is-sent svg {
  fill: currentColor;
}

/* --------------------------------------------------------------------------
   PROFILE COMPLETION NUDGE (Center Column Compact Banner)
   -------------------------------------------------------------------------- */
.matri-completion-banner {
  background: var(--matri-card-bg);
  border: 1px solid var(--matri-border);
  border-radius: var(--matri-radius-lg);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: var(--matri-shadow-sm);
}

.matri-comp-left {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.matri-comp-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: conic-gradient(var(--matri-primary) calc(var(--comp-pct, 65) * 1%), #EFE7DC 0);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
}

.matri-comp-circle::before {
  content: "";
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #FFFFFF;
  position: absolute;
}

.matri-comp-circle-text {
  position: relative;
  z-index: 1;
  font-size: 12px;
  font-weight: 700;
  color: var(--matri-primary);
}

.matri-comp-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.matri-comp-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--matri-text);
  margin: 0;
}

.matri-comp-sub {
  font-size: 12px;
  color: var(--matri-text-muted);
  margin: 0;
}

.matri-comp-pills {
  display: flex;
  gap: 6px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.matri-comp-pill-item {
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 99px;
  background: #F4EFE7;
  color: var(--matri-text-muted);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.matri-comp-pill-item.is-done {
  background: var(--matri-success-bg);
  color: var(--matri-success);
}

/* --------------------------------------------------------------------------
   SECONDARY COMMUNITY / STORIES SECTION (Demoted Below Matrimonial Discovery)
   -------------------------------------------------------------------------- */
.matri-secondary-community {
  border-top: 1px solid var(--matri-border);
  padding-top: 24px;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.matri-community-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.matri-community-title {
  font-family: var(--matri-font-serif);
  font-size: 18px;
  font-weight: 700;
  color: #2D241E;
  margin: 0;
}

.matri-community-subtitle {
  font-size: 12.5px;
  color: var(--matri-text-muted);
  margin: 2px 0 0;
}

/* --------------------------------------------------------------------------
   RIGHT SIDEBAR: Profile Status, New Matches, Safety & Privacy
   -------------------------------------------------------------------------- */
.matri-right-sidebar {
  position: sticky;
  top: 88px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.matri-right-card {
  background: var(--matri-card-bg);
  border: 1px solid var(--matri-border);
  border-radius: var(--matri-radius-lg);
  padding: 18px 16px;
  box-shadow: var(--matri-shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.matri-right-card-title {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--matri-text-muted);
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Profile Status Rows */
.matri-status-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.matri-status-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  padding: 6px 0;
  border-bottom: 1px solid var(--matri-border-subtle);
}

.matri-status-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.matri-status-label {
  color: var(--matri-text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.matri-status-badge {
  font-size: 11.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 99px;
  line-height: 1.3;
}

.matri-status-badge.verified {
  background: var(--matri-success-bg);
  color: var(--matri-success);
}

.matri-status-badge.pending {
  background: var(--matri-gold-soft);
  color: var(--matri-gold);
}

.matri-status-badge.private {
  background: #F0ECE4;
  color: #63554A;
}

/* New Matches Previews in Right Sidebar */
.matri-new-matches-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.matri-mini-match-item {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--matri-text);
  padding: 6px;
  border-radius: var(--matri-radius-md);
  transition: background 0.15s ease;
}

.matri-mini-match-item:hover {
  background: var(--matri-primary-soft);
}

.matri-mini-match-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: #EDE6DC;
  position: relative;
}

.matri-mini-match-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.matri-mini-match-info {
  min-width: 0;
  flex: 1;
}

.matri-mini-match-name {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.matri-mini-match-meta {
  font-size: 11.5px;
  color: var(--matri-text-muted);
  line-height: 1.2;
}

.matri-mini-match-score {
  font-size: 11px;
  color: var(--matri-primary);
  font-weight: 600;
  margin-top: 2px;
}

.matri-mini-match-btn {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--matri-primary);
  background: #FFFFFF;
  border: 1px solid #E5D9CD;
  padding: 4px 10px;
  border-radius: 99px;
  text-decoration: none;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.matri-mini-match-item:hover .matri-mini-match-btn {
  background: var(--matri-primary);
  color: #FFFFFF;
  border-color: var(--matri-primary);
}

/* Safety & Privacy Card */
.matri-safety-card {
  background: linear-gradient(135deg, #FBF9F5 0%, #F5EFE7 100%);
  border: 1px solid #E8DECE;
  border-radius: var(--matri-radius-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.matri-safety-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #2D241E;
}

.matri-safety-header svg {
  width: 16px;
  height: 16px;
  stroke: var(--matri-primary);
  fill: none;
}

.matri-safety-desc {
  font-size: 12px;
  line-height: 1.45;
  color: var(--matri-text-muted);
  margin: 0;
}

/* --------------------------------------------------------------------------
   EMPTY STATES
   -------------------------------------------------------------------------- */
.matri-empty-state {
  background: var(--matri-card-bg);
  border: 1px dashed var(--matri-border);
  border-radius: var(--matri-radius-xl);
  padding: 40px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.matri-empty-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--matri-primary-soft);
  color: var(--matri-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

.matri-empty-icon svg {
  width: 28px;
  height: 28px;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
}

.matri-empty-title {
  font-family: var(--matri-font-serif);
  font-size: 18px;
  font-weight: 700;
  color: #2D241E;
  margin: 0;
}

.matri-empty-desc {
  font-size: 13.5px;
  color: var(--matri-text-muted);
  max-width: 380px;
  line-height: 1.4;
  margin: 0;
}

/* --------------------------------------------------------------------------
   RESPONSIVE BREAKPOINTS
   -------------------------------------------------------------------------- */
@media (max-width: 1140px) {
  .matrimonial-dashboard-grid {
    grid-template-columns: 220px minmax(0, 1fr);
  }
  .matri-right-sidebar {
    display: none;
  }
}

@media (max-width: 860px) {
  .matrimonial-dashboard-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .matri-left-sidebar {
    position: static;
  }
  .matri-side-nav-list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
  }
  .matri-side-nav-item a {
    padding: 8px 12px;
    font-size: 13px;
  }
  .matri-quick-actions-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .matri-hero-banner {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 580px) {
  .matrimonial-container {
    padding: 16px 12px 64px;
  }
  .matri-profile-grid {
    grid-template-columns: 1fr;
  }
  .matri-quick-actions-row {
    grid-template-columns: 1fr;
  }
  .matri-completion-banner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* RTL Support */
[dir="rtl"] .matri-side-nav-badge {
  margin-left: 0;
  margin-right: auto;
}

[dir="rtl"] .matri-hero-banner::before {
  right: auto;
  left: -40px;
}


/* --------------------------------------------------------------------------
   UNIFIED APPSHELL & DESIGN SYSTEM REUSABLE COMPONENTS
   -------------------------------------------------------------------------- */
.matrimonial-dashboard-grid.no-right-panel {
  grid-template-columns: 240px minmax(0, 1fr);
}

.matri-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.matri-page-header-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.matri-page-title {
  font-family: var(--matri-font-serif);
  font-size: 26px;
  font-weight: 700;
  color: #261B14;
  margin: 0;
  letter-spacing: -0.01em;
}

.matri-page-subtitle {
  font-size: 13.5px;
  color: var(--matri-text-muted);
  margin: 0;
  max-width: 600px;
  line-height: 1.45;
}

.matri-page-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.matri-card-box {
  background: var(--matri-card-bg);
  border: 1px solid var(--matri-border);
  border-radius: var(--matri-radius-lg);
  padding: 22px;
  box-shadow: var(--matri-shadow-sm);
}

.matri-filter-card {
  background: var(--matri-card-bg);
  border: 1px solid var(--matri-border);
  border-radius: var(--matri-radius-lg);
  padding: 22px;
  box-shadow: var(--matri-shadow-sm);
}

.matri-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}

.matri-filter-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.matri-filter-group.full-width {
  grid-column: 1 / -1;
}

.matri-filter-label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--matri-text-muted);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.matri-form-input, .matri-form-select {
  height: 42px;
  padding: 8px 14px;
  border-radius: var(--matri-radius-md);
  border: 1px solid var(--matri-border);
  background: #FFFFFF;
  color: var(--matri-text);
  font-family: inherit;
  font-size: 13.5px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.matri-form-input:focus, .matri-form-select:focus {
  outline: none;
  border-color: var(--matri-primary);
  box-shadow: 0 0 0 3px var(--matri-primary-glow);
}

.matri-filter-actions {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.matri-tab-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 99px;
  font-size: 13px;
  font-weight: 600;
  color: var(--matri-text-muted);
  background: #FFFFFF;
  border: 1px solid var(--matri-border);
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.matri-tab-pill:hover {
  border-color: #D8CCC0;
  color: var(--matri-primary);
}

.matri-tab-pill.is-active {
  background: var(--matri-primary);
  color: #FFFFFF;
  border-color: var(--matri-primary);
  box-shadow: 0 2px 8px var(--matri-primary-glow);
}

.matri-status-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
  line-height: 1.35;
  letter-spacing: 0.02em;
}

.matri-status-badge.connected, .matri-status-badge.matched {
  background: var(--matri-success-bg);
  color: var(--matri-success);
}

.matri-status-badge.sent {
  background: var(--matri-primary-soft);
  color: var(--matri-primary);
}

.matri-status-badge.received {
  background: var(--matri-gold-soft);
  color: #92400e;
}

.matri-status-badge.suggested {
  background: #F4EFE7;
  color: var(--matri-text-muted);
}

.demo-badge {
  font-size: 10px;
  font-weight: 700;
  background: rgba(38, 27, 20, 0.75);
  backdrop-filter: blur(4px);
  color: #FAF4EB;
  padding: 3px 8px;
  border-radius: 99px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.matri-convo-item:hover {
  transform: translateY(-1px);
  box-shadow: var(--matri-shadow-md);
  border-color: #DFD3C4;
}

.matri-alert-success, .is-app p.success {
  background: var(--matri-success-bg);
  color: var(--matri-success);
  border: 1px solid rgba(46, 125, 71, 0.2);
  border-radius: var(--matri-radius-md);
  padding: 12px 18px;
  font-size: 13.5px;
  font-weight: 500;
  margin-bottom: 20px;
}

.matri-alert-error, .is-app p.error {
  background: #FDF2F2;
  color: #B91C1C;
  border: 1px solid rgba(185, 28, 28, 0.2);
  border-radius: var(--matri-radius-md);
  padding: 12px 18px;
  font-size: 13.5px;
  font-weight: 500;
  margin-bottom: 20px;
}

@media (max-width: 860px) {
  .matri-left-sidebar {
    display: none !important;
  }
  .matrimonial-dashboard-grid, .matrimonial-dashboard-grid.no-right-panel {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   REDESIGNED PROFILE HERO & COVER PHOTO SYSTEM
   ========================================================================== */
.matri-hero-card {
  background: var(--matri-card-bg);
  border: 1px solid var(--matri-border);
  border-radius: var(--matri-radius-xl);
  overflow: hidden;
  box-shadow: var(--matri-shadow-sm);
  margin-bottom: 24px;
}

.matri-hero-cover-container {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 1;
  min-height: 180px;
  max-height: 320px;
  background: linear-gradient(135deg, #F9F3EA 0%, #EFE1D1 50%, #E3D1BE 100%);
  overflow: hidden;
}

@media (max-width: 640px) {
  .matri-hero-cover-container {
    aspect-ratio: 2 / 1;
    min-height: 140px;
  }
}

.matri-hero-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.matri-hero-cover-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--matri-text-muted);
}

.matri-hero-cover-placeholder-icon {
  font-size: 28px;
  opacity: 0.6;
}

.matri-hero-cover-placeholder-text {
  font-size: 13.5px;
  font-weight: 600;
  color: #7A6A5E;
}

.matri-hero-cover-edit-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 99px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--matri-text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  transition: all 0.2s ease;
  z-index: 5;
}

.matri-hero-cover-edit-btn:hover {
  background: #FFFFFF;
  color: var(--matri-primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.matri-hero-body {
  padding: 0 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.matri-hero-avatar-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: -60px;
  position: relative;
  z-index: 4;
  gap: 16px;
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .matri-hero-avatar-row {
    margin-top: -45px;
    align-items: center;
  }
}

.matri-hero-avatar-col {
  display: flex;
  align-items: flex-end;
  gap: 18px;
  flex-wrap: wrap;
}

.matri-hero-avatar-container {
  position: relative;
  width: 120px;
  height: 120px;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .matri-hero-avatar-container {
    width: 96px;
    height: 96px;
  }
}

.matri-hero-avatar-wrap {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid #FFFFFF;
  background: #F3ECE2;
  box-shadow: 0 4px 16px rgba(45, 36, 30, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.matri-hero-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.matri-hero-avatar-fallback {
  font-family: var(--matri-font-serif);
  font-size: 40px;
  font-weight: 700;
  color: var(--matri-primary);
}

.matri-hero-avatar-edit-trigger {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--matri-primary);
  color: #FFFFFF;
  border: 2px solid #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(184, 93, 59, 0.35);
  transition: all 0.2s ease;
  font-size: 15px;
  z-index: 6;
}

.matri-hero-avatar-edit-trigger:hover {
  background: var(--matri-primary-hover);
  transform: scale(1.08);
}

.matri-hero-identity {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 6px;
}

.matri-hero-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.matri-hero-name {
  font-family: var(--matri-font-serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--matri-text);
  margin: 0;
  line-height: 1.25;
}

.matri-hero-verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #E8F5E9;
  color: #2E7D47;
  font-size: 11.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 99px;
  border: 1px solid rgba(46, 125, 71, 0.2);
}

.matri-hero-meta {
  font-size: 13.5px;
  color: var(--matri-text-muted);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.matri-hero-completion-strip {
  background: #FCFAF6;
  border: 1px solid var(--matri-border-subtle);
  border-radius: 14px;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.matri-hero-completion-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 240px;
}

.matri-hero-completion-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--matri-text);
  white-space: nowrap;
}

.matri-hero-completion-track {
  flex: 1;
  height: 8px;
  background: #EFE8DE;
  border-radius: 99px;
  overflow: hidden;
}

.matri-hero-completion-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--matri-primary) 0%, #D48B38 100%);
  border-radius: 99px;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.matri-hero-completion-cta {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--matri-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.15s ease;
}

.matri-hero-completion-cta:hover {
  color: var(--matri-primary-hover);
  text-decoration: underline;
}

/* ==========================================================================
   PHOTO MANAGER & RESPONSIVE GRID
   ========================================================================== */
.matri-photos-section {
  background: var(--matri-card-bg);
  border: 1px solid var(--matri-border);
  border-radius: var(--matri-radius-xl);
  padding: 24px;
  box-shadow: var(--matri-shadow-sm);
  margin-bottom: 24px;
}

.matri-photos-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.matri-photos-title-group h2 {
  font-size: 17px;
  font-weight: 700;
  color: var(--matri-text);
  margin: 0 0 3px;
}

.matri-photos-title-group p {
  font-size: 13px;
  color: var(--matri-text-muted);
  margin: 0;
}

.matri-photos-add-btn {
  background: var(--matri-primary-soft);
  color: var(--matri-primary);
  border: 1px solid rgba(184, 93, 59, 0.2);
  border-radius: 10px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.matri-photos-add-btn:hover {
  background: var(--matri-primary);
  color: #FFFFFF;
  border-color: var(--matri-primary);
}

.matri-photos-tip-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #FCF9F2;
  border: 1px solid #F1E5D2;
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 12.5px;
  color: #8C6627;
  margin-bottom: 20px;
}

.matri-photos-tip-box svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: #C59B27;
}

.matri-photo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

@media (max-width: 960px) {
  .matri-photo-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 600px) {
  .matri-photo-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

.matri-photo-card {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 16px;
  overflow: hidden;
  background: #F5EFE6;
  border: 1px solid var(--matri-border);
  box-shadow: var(--matri-shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}

.matri-photo-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--matri-shadow-md);
  border-color: #E2D3C0;
}

.matri-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.matri-photo-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 99px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.matri-photo-badge.primary {
  background: var(--matri-primary);
  color: #FFFFFF;
  box-shadow: 0 2px 6px rgba(184, 93, 59, 0.4);
}

.matri-photo-badge.pending {
  background: rgba(146, 64, 14, 0.88);
  backdrop-filter: blur(4px);
  color: #FFFFFF;
}

.matri-photo-badge.review {
  background: rgba(30, 64, 175, 0.88);
  backdrop-filter: blur(4px);
  color: #FFFFFF;
}

.matri-photo-badge.rejected {
  background: rgba(185, 28, 28, 0.88);
  backdrop-filter: blur(4px);
  color: #FFFFFF;
}

.matri-photo-actions-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(28, 20, 15, 0.82) 100%);
  opacity: 0;
  transition: opacity 0.2s ease;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 12px;
  gap: 8px;
  z-index: 4;
}

.matri-photo-card:hover .matri-photo-actions-overlay,
.matri-photo-card:focus-within .matri-photo-actions-overlay {
  opacity: 1;
}

.matri-photo-action-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: var(--matri-text);
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  text-decoration: none;
}

.matri-photo-action-btn:hover {
  transform: scale(1.1);
  background: #FFFFFF;
  color: var(--matri-primary);
}

.matri-photo-action-btn.danger:hover {
  background: #FEE2E2;
  color: #DC2626;
}

/* CUSTOM ADD PHOTO CARD */
.matri-photo-add-card {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 16px;
  border: 2px dashed #DCCFBE;
  background: #FAF7F2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  gap: 6px;
}

.matri-photo-add-card:hover,
.matri-photo-add-card.is-dragover {
  border-color: var(--matri-primary);
  background: var(--matri-primary-soft);
  transform: translateY(-2px);
}

.matri-photo-add-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid #E6D9C8;
  color: var(--matri-primary);
  font-size: 22px;
  font-weight: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.matri-photo-add-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--matri-text);
  margin: 0;
}

.matri-photo-add-sub {
  font-size: 11px;
  color: var(--matri-text-muted);
  margin: 0;
}

/* ==========================================================================
   PHOTO PREVIEW LIGHTBOX MODAL
   ========================================================================== */
.matri-lightbox-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 16, 14, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.matri-lightbox-backdrop.is-open {
  display: flex;
}

.matri-lightbox-dialog {
  position: relative;
  max-width: 900px;
  width: 100%;
  background: #1C1714;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
}

.matri-lightbox-header {
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: #FAF4EB;
}

.matri-lightbox-title {
  font-size: 13.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}

.matri-lightbox-close-btn {
  background: rgba(255, 255, 255, 0.12);
  border: none;
  color: #FFFFFF;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: all 0.2s ease;
}

.matri-lightbox-close-btn:hover {
  background: rgba(255, 255, 255, 0.25);
}

.matri-lightbox-body {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 350px;
  max-height: 70vh;
  padding: 16px;
  background: #120E0C;
}

.matri-lightbox-img {
  max-width: 100%;
  max-height: 65vh;
  object-fit: contain;
  border-radius: 8px;
}

.matri-lightbox-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10;
}

.matri-lightbox-nav-btn:hover {
  background: rgba(184, 93, 59, 0.9);
  border-color: transparent;
}

.matri-lightbox-nav-btn.prev {
  left: 20px;
}

.matri-lightbox-nav-btn.next {
  right: 20px;
}

.matri-lightbox-footer {
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: #171310;
  gap: 12px;
  flex-wrap: wrap;
}

/* ==========================================================================
   INTERACTIVE CROPPING & UPLOAD MODAL
   ========================================================================== */
.matri-crop-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 16, 14, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1050;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.matri-crop-backdrop.is-open {
  display: flex;
}

.matri-crop-dialog {
  background: #FFFFFF;
  border-radius: 20px;
  width: 100%;
  max-width: 580px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  border: 1px solid var(--matri-border);
  display: flex;
  flex-direction: column;
}

.matri-crop-header {
  padding: 16px 22px;
  border-bottom: 1px solid var(--matri-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.matri-crop-header h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--matri-text);
  margin: 0;
}

.matri-crop-viewport {
  position: relative;
  width: 100%;
  height: 340px;
  background: #1E1916;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  touch-action: none;
}

.matri-crop-img {
  max-width: none;
  cursor: grab;
  transform-origin: center center;
  will-change: transform;
}

.matri-crop-img:active {
  cursor: grabbing;
}

.matri-crop-overlay-guide {
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(18, 14, 12, 0.6);
  border: 2px dashed rgba(255, 255, 255, 0.85);
  margin: auto;
}

.matri-crop-overlay-guide.is-circle {
  border-radius: 50%;
  width: 240px;
  height: 240px;
}

.matri-crop-overlay-guide.is-wide {
  border-radius: 12px;
  width: 90%;
  height: 160px;
}

.matri-crop-controls {
  padding: 16px 22px;
  background: #FAF7F2;
  border-top: 1px solid var(--matri-border);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.matri-crop-zoom-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.matri-crop-zoom-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--matri-text-muted);
}

.matri-crop-zoom-slider {
  flex: 1;
  accent-color: var(--matri-primary);
}

.matri-crop-hint {
  font-size: 12px;
  color: #7A6A5E;
  margin: 0;
}

.matri-crop-footer {
  padding: 14px 22px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  border-top: 1px solid var(--matri-border);
}

/* ==========================================================================
   WebRTC Calling & Incoming Call Dialog Styles
   ========================================================================== */
.webrtc-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(18, 14, 12, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.webrtc-card {
  background: #ffffff;
  border: 1px solid var(--color-border, #e7dfd5);
  border-radius: 24px;
  padding: 32px 28px;
  width: min(440px, 94vw);
  text-align: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  animation: modalPop 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.webrtc-avatar-wrap {
  position: relative;
  width: 96px;
  height: 96px;
  margin-bottom: 20px;
}

.webrtc-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffedd5, #fed7aa);
  color: #9a3412;
  font-family: var(--font-brand, Georgia, serif);
  font-size: 38px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(194, 65, 12, 0.2);
  position: relative;
  z-index: 2;
}

.webrtc-pulse-ring {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid rgba(194, 65, 12, 0.5);
  animation: webrtcPulse 1.8s infinite ease-out;
  z-index: 1;
}

@keyframes webrtcPulse {
  0% { transform: scale(0.95); opacity: 1; }
  100% { transform: scale(1.4); opacity: 0; }
}

.webrtc-caller-name {
  font-family: var(--font-brand, Georgia, serif);
  font-size: 1.45rem;
  font-weight: 700;
  color: #1c1917;
  margin: 0 0 6px;
}

.webrtc-call-type-label, .webrtc-call-state {
  font-size: 0.95rem;
  color: #78716c;
  margin: 0 0 24px;
}

.webrtc-call-timer {
  display: inline-block;
  font-size: 1.1rem;
  font-weight: 700;
  color: #9a3412;
  background: #ffedd5;
  padding: 4px 14px;
  border-radius: 999px;
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}

.webrtc-action-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
  width: 100%;
}

.webrtc-circle-btn {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.webrtc-circle-btn:hover {
  transform: scale(1.06);
}

.btn-decline {
  background: #ef4444;
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(239, 68, 68, 0.35);
}

.btn-accept {
  background: #22c55e;
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(34, 197, 94, 0.35);
}

.btn-control {
  background: #f5f5f4;
  color: #292524;
  border: 1px solid #e7e5e4;
  width: 52px;
  height: 52px;
}

.btn-control.is-muted, .btn-control.is-off {
  background: #fee2e2;
  color: #dc2626;
  border-color: #fca5a5;
}

.webrtc-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
}

.webrtc-media-area {
  width: 100%;
  min-height: 220px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: #faf8f5;
  overflow: hidden;
}

.remote-video {
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: 16px;
  display: none;
  background: #000;
}

.local-video {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 90px;
  height: 120px;
  border-radius: 10px;
  object-fit: cover;
  border: 2px solid #ffffff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  z-index: 10;
  display: none;
  background: #000;
}

.audio-avatar-display.in-video {
  display: none;
}

.chat-reconnecting-banner {
  background: #fef3c7;
  color: #92400e;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 8px;
  margin-bottom: 10px;
  text-align: center;
  border: 1px solid #fde68a;
  animation: pulse 1.5s infinite ease-in-out;
}

.matri-call-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  background: var(--matri-surface, #ffffff);
  border: 1px solid var(--matri-border, #e7dfd5);
  color: var(--matri-text, #1c1917);
  cursor: pointer;
  transition: all 0.15s ease;
}

.matri-call-btn:hover {
  background: var(--matri-primary-soft, #ffedd5);
  color: var(--matri-primary, #c2410c);
  border-color: var(--matri-primary, #c2410c);
}

/* ==========================================================================
   Matrimonial Pagination & Navigation SVG Constraints
   ========================================================================== */
.matri-pagination-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 18px 0;
  clear: both;
}

.matri-pagination-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.matri-pagination {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  justify-content: center;
}

.matri-pagination-item {
  display: inline-flex;
}

.matri-pagination-link,
.matri-pagination-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--color-border, #e5e0d8);
  background: #ffffff;
  color: var(--color-text, #2d2621);
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.18s ease;
  user-select: none;
}

.matri-pagination-link:hover:not(.is-disabled) {
  border-color: var(--color-primary, #c2410c);
  color: var(--color-primary, #c2410c);
  background: rgba(194, 65, 12, 0.06);
}

.matri-pagination-item.is-active .matri-pagination-link,
.matri-pagination-link.is-active {
  background: var(--color-primary, #c2410c) !important;
  border-color: var(--color-primary, #c2410c) !important;
  color: #ffffff !important;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(194, 65, 12, 0.25);
}

.matri-pagination-text.is-dots {
  border-color: transparent;
  background: transparent;
  min-width: 24px;
  color: var(--color-muted, #786f66);
}

.matri-pagination-item.is-disabled .matri-pagination-text,
.matri-pagination-text.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: var(--color-bg-ivory, #faf8f5);
  border-color: var(--color-border, #e5e0d8);
  color: var(--color-muted, #786f66);
}

/* Explicit size containment for pagination icons - strictly prevents giant SVG expansion */
.matri-pagination-link svg,
.matri-pagination-text svg,
.matri-pagination-wrap svg,
nav[role="navigation"] svg,
svg.w-5,
svg.h-5,
.w-5,
.h-5 {
  width: 16px !important;
  height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  display: inline-block !important;
  vertical-align: middle;
  flex-shrink: 0;
}

/* ==========================================================================
   Admin Verified Badge Component
   ========================================================================== */
.admin-verified-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  border-radius: 50%;
  background: #0284c7; /* Reliable, authoritative blue */
  color: #ffffff;
  margin-inline-start: 4px;
  vertical-align: middle;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(2, 132, 199, 0.35);
  cursor: default;
}
.admin-verified-badge svg {
  width: 10px !important;
  height: 10px !important;
  max-width: 10px !important;
  max-height: 10px !important;
  fill: #ffffff !important;
  display: block !important;
}

/* ==========================================================================
   Post Interaction Area & Action Buttons System
   ========================================================================== */
.post-actions-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 8px 14px;
  border-top: 1px solid var(--border, #e5e0d8);
  border-bottom: 1px solid var(--border, #e5e0d8);
  margin-top: 10px;
  background: rgba(255, 255, 255, 0.4);
}

.post-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: 1 1 0;
  min-height: 38px;
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted, #64748b);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}

.post-action-btn:hover {
  background: rgba(154, 52, 18, 0.06);
  color: var(--primary, #9a3412);
  transform: translateY(-1px);
}

.post-action-btn:active {
  transform: translateY(0);
}

.post-action-btn .action-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform 0.2s ease, fill 0.2s ease, stroke 0.2s ease;
}

/* Like Button Active State */
.post-action-btn.btn-like.active {
  color: #dc2626;
  font-weight: 600;
}
.post-action-btn.btn-like.active .action-heart {
  fill: #dc2626;
  stroke: #dc2626;
  transform: scale(1.15);
  animation: heartPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes heartPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1.15); }
}

/* Save Button Active State */
.post-action-btn.btn-save.active {
  color: #d97706;
  font-weight: 600;
}
.post-action-btn.btn-save.active .action-bookmark {
  fill: #d97706;
  stroke: #d97706;
  transform: scale(1.1);
}

/* ==========================================================================
   Comment Input Box & Circular Send Button
   ========================================================================== */
.post-comments-section {
  padding: 12px 14px;
  background: rgba(254, 252, 248, 0.5);
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}

.comment-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  transition: all 0.3s ease;
  border-radius: 24px;
}

.comment-user-avatar {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 50%;
  background: #f1ede5;
  color: #9a3412;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.85rem;
  border: 1px solid #e7e2d7;
  overflow: hidden;
}
.comment-user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.comment-field-wrap {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
}

.comment-input-field {
  width: 100%;
  padding: 8px 46px 8px 14px;
  font-family: inherit;
  font-size: 0.88rem;
  color: var(--text, #1e293b);
  background: #ffffff;
  border: 1px solid #dfd8cc;
  border-radius: 20px;
  outline: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  transition: all 0.25s ease;
}

.comment-input-field:hover {
  border-color: #c9bea9;
}

.comment-input-field:focus {
  border-color: var(--primary, #9a3412);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(154, 52, 18, 0.12), 0 1px 3px rgba(0, 0, 0, 0.05);
}

.comment-submit-btn {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--primary, #9a3412);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(154, 52, 18, 0.25);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0;
}

.comment-submit-btn:hover:not(:disabled) {
  background: #7c2d12;
  transform: translateY(-50%) scale(1.05);
  box-shadow: 0 3px 8px rgba(154, 52, 18, 0.35);
}

.comment-submit-btn:disabled {
  background: #e2ddd5;
  color: #94a3b8;
  cursor: not-allowed;
  box-shadow: none;
  opacity: 0.7;
}

.comment-focus-pulse {
  animation: commentFocusPulse 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes commentFocusPulse {
  0% { box-shadow: 0 0 0 0 rgba(154, 52, 18, 0.4); }
  50% { box-shadow: 0 0 0 8px rgba(154, 52, 18, 0.12); }
  100% { box-shadow: 0 0 0 0 rgba(154, 52, 18, 0); }
}

.comment-spinner-svg {
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Comment Item Formatting */
.comments-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.comment-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.comment-item.is-reply {
  margin-inline-start: 38px;
}

.comment-avatar {
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 50%;
  background: #f1ede5;
  color: #9a3412;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.8rem;
  overflow: hidden;
  border: 1px solid #e7e2d7;
}
.comment-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.comment-content {
  flex: 1;
}

.comment-bubble {
  background: #f8f6f0;
  border: 1px solid #ebe5dc;
  border-radius: 14px;
  padding: 8px 12px;
  display: inline-block;
  max-width: 100%;
  word-break: break-word;
}

.comment-author-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 2px;
}

.comment-author-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: #1e293b;
  text-decoration: none;
}
.comment-author-name:hover {
  text-decoration: underline;
  color: var(--primary, #9a3412);
}

.comment-text {
  font-size: 0.85rem;
  color: #334155;
  line-height: 1.4;
}

.comment-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.75rem;
  color: #94a3b8;
  margin-top: 4px;
  margin-inline-start: 4px;
}

.comment-reply-btn,
.comment-delete-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
}
.comment-reply-btn:hover {
  color: var(--primary, #9a3412);
  text-decoration: underline;
}
.comment-delete-btn.text-danger:hover {
  color: #dc2626;
  text-decoration: underline;
}

/* ==========================================================================
   Share Modal & Preview Styles
   ========================================================================== */
.share-modal-dialog {
  max-width: 500px;
  width: 95%;
  border-radius: 16px;
  padding: 20px;
}

.share-commentary-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #dfd8cc;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.9rem;
  resize: vertical;
  outline: none;
  background: #faf8f5;
  box-sizing: border-box;
  margin-bottom: 12px;
}
.share-commentary-textarea:focus {
  border-color: var(--primary, #9a3412);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(154, 52, 18, 0.1);
}

.share-preview-card {
  border: 1px solid #e7e0d5;
  border-radius: 12px;
  background: #fbf9f6;
  padding: 12px 14px;
  margin-bottom: 16px;
}

.share-preview-author {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.share-preview-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ede6da;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: #9a3412;
  overflow: hidden;
}
.share-preview-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.share-preview-name-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.share-preview-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: #1e293b;
}

.share-preview-time {
  font-size: 0.75rem;
  color: #94a3b8;
}

.share-preview-body {
  font-size: 0.85rem;
  color: #475569;
  line-height: 1.45;
  margin-bottom: 6px;
}

.share-preview-media {
  margin-top: 6px;
}

.share-actions-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.share-to-wall-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 16px;
  font-weight: 600;
  border-radius: 10px;
}

.share-secondary-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.share-secondary-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f1ede5;
  border: 1px solid #dfd8cc;
  border-radius: 8px;
  padding: 8px 14px;
  color: #334155;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}
.share-secondary-btn:hover {
  background: #e6dfd2;
  color: #1e293b;
}

.shared-post-unavailable {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: #fef2f2;
  border: 1px dashed #fca5a5;
  border-radius: 10px;
  color: #b91c1c;
  font-size: 0.85rem;
  font-style: italic;
}
.shared-post-unavailable .unavailable-icon {
  flex-shrink: 0;
  color: #ef4444;
}

/* Responsive adjustment for Mobile */
@media (max-width: 640px) {
  .post-actions-bar {
    padding: 6px 8px;
    gap: 4px;
  }
  .post-action-btn {
    min-height: 36px;
    padding: 6px 8px;
    font-size: 0.8rem;
    gap: 4px;
  }
  .post-action-btn .action-icon {
    width: 16px;
    height: 16px;
  }
  .comment-input-field {
    font-size: 0.82rem;
    padding: 7px 42px 7px 12px;
  }
  .comment-submit-btn {
    width: 28px;
    height: 28px;
    right: 4px;
  }
}

/* ==========================================================================
   GLOBAL DESIGN SYSTEM & UNIFIED COMPONENT LIBRARY
   Standardized across ALL pages: Home, Discover, Near Me, Matches,
   Profile, Edit Profile, Auth, Safety, Guidelines, Legal, Messaging,
   Settings, Notifications, Modals, Forms, Buttons, and Cards.
   ========================================================================== */

/* Universal Layout & Containment */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

*, *::before, *::after {
  box-sizing: border-box;
}

/* Base Body Typography Enhancement */
body {
  font-family: var(--font-ui);
  font-size: var(--text-body);
  color: var(--color-text);
  background-color: var(--color-background);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings Hierarchy Standards */
h1, .page-title, .matri-page-title {
  font-family: var(--font-brand);
  font-size: var(--text-h1);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.015em;
  color: var(--color-text);
  margin-top: 0;
  margin-bottom: 0.5rem;
}

h2, .section-title, .matri-section-title {
  font-family: var(--font-brand);
  font-size: var(--text-h2);
  font-weight: 650;
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin-top: 0;
  margin-bottom: 0.5rem;
}

h3, .card-title, .matri-card-name {
  font-family: var(--font-ui);
  font-size: var(--text-h3);
  font-weight: 650;
  line-height: 1.35;
  color: var(--color-text);
  margin-top: 0;
  margin-bottom: 0.4rem;
}

h4 {
  font-family: var(--font-ui);
  font-size: var(--text-h4);
  font-weight: 650;
  line-height: 1.4;
  color: var(--color-text);
  margin-top: 0;
  margin-bottom: 0.35rem;
}

p {
  margin-top: 0;
  margin-bottom: 0.75rem;
  line-height: 1.6;
  overflow-wrap: break-word;
}

.lede, p.lede {
  font-size: var(--text-body-large);
  line-height: 1.65;
  color: var(--color-muted);
  max-width: 44rem;
}

/* Universal Page Header Component */
.matri-page-header, .page-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}

@media (min-width: 768px) {
  .matri-page-header, .page-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
  }
}

.matri-page-header-text, .page-header-text {
  min-width: 0;
  flex: 1;
}

.matri-page-header-actions, .page-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.matri-page-subtitle, .page-subtitle {
  font-size: var(--text-body);
  color: var(--color-muted);
  margin: 0;
  line-height: 1.5;
}

/* Breadcrumbs System */
.crumbs, nav.crumbs {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-small);
  color: var(--color-text-light);
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.crumbs a {
  color: var(--color-muted);
  text-decoration: none;
  transition: color 0.18s ease;
}

.crumbs a:hover {
  color: var(--color-primary);
}

.crumbs span[aria-current="page"] {
  color: var(--color-text);
  font-weight: 600;
}

.crumbs a::after {
  content: "›";
  margin-inline-start: 8px;
  color: var(--color-border-hover);
}

/* Universal Card & Panel System */
.card, .panel, .matri-card-box, .editorial-card, .settings-group-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--card-padding);
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  position: relative;
}

.card:hover, .panel:hover, .editorial-card:hover {
  border-color: var(--color-border-hover);
}

.card-elevated {
  box-shadow: var(--shadow-md);
}

.card-danger {
  border-color: #fca5a5;
  background: #fffafa;
}

/* Feature Grids (from Community Guidelines reference) */
.features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 24px 0;
}

@media (min-width: 640px) {
  .features {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (min-width: 1024px) {
  .features {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 22px;
  }
}

.feature, article.feature {
  background: #faf8f5;
  border: 1px solid #ebe4d8;
  border-radius: var(--radius-md);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all 0.2s ease;
}

.feature:hover {
  background: #ffffff;
  border-color: #cfc2b2;
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.feature h2, .feature h3 {
  font-family: var(--font-brand);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.feature p {
  font-size: var(--text-small);
  color: var(--color-muted);
  line-height: 1.55;
  margin: 0;
}

/* Steps Grid System */
.steps, .steps-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin: 24px 0;
}

@media (min-width: 720px) {
  .steps, .steps-container {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 22px;
  }
}

.step, .step-card {
  background: #faf8f5;
  border: 1px solid #ebe4d8;
  border-radius: var(--radius);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  transition: all 0.2s ease;
}

.step:hover, .step-card:hover {
  background: #ffffff;
  border-color: #cfc2b2;
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.step-no, .step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-primary-soft);
  color: var(--color-primary-hover);
  font-weight: 750;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
}

.step h2, .step-card h3 {
  font-family: var(--font-brand);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}

.step p, .step-card p {
  font-size: var(--text-small);
  color: var(--color-muted);
  line-height: 1.55;
  margin: 0;
}

/* Action Strips */
.actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
}

/* Universal Button Design System */
.button, .btn, .btn-primary, .button-primary, .matri-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: #ffffff !important;
  border: 1px solid var(--color-primary);
  font-family: var(--font-ui);
  font-size: var(--text-button);
  font-weight: 650;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(194, 65, 12, 0.22);
  transition: all 0.18s ease;
  white-space: nowrap;
}

.button:hover, .btn:hover, .btn-primary:hover, .button-primary:hover, .matri-btn-primary:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(194, 65, 12, 0.32);
}

.button:active, .btn:active, .btn-primary:active, .button-primary:active, .matri-btn-primary:active {
  transform: translateY(1px);
  box-shadow: 0 1px 3px rgba(194, 65, 12, 0.2);
}

.button-secondary, .btn-secondary, .matri-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text) !important;
  border: 1px solid var(--color-border);
  font-family: var(--font-ui);
  font-size: var(--text-button);
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: all 0.18s ease;
  white-space: nowrap;
}

.button-secondary:hover, .btn-secondary:hover, .matri-btn-secondary:hover {
  background: #faf7f2;
  border-color: var(--color-border-hover);
  color: var(--color-primary) !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.button-secondary:active, .btn-secondary:active, .matri-btn-secondary:active {
  transform: translateY(1px);
}

.button-danger, .btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  background: var(--color-error);
  color: #ffffff !important;
  border: 1px solid var(--color-error);
  font-family: var(--font-ui);
  font-size: var(--text-button);
  font-weight: 650;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(153, 27, 27, 0.2);
  transition: all 0.18s ease;
}

.button-danger:hover, .btn-danger:hover {
  background: #7f1d1d;
  border-color: #7f1d1d;
  transform: translateY(-1px);
}

.button-sm, .btn-sm {
  min-height: 36px;
  padding: 6px 14px;
  font-size: 0.85rem;
}

.button-lg, .btn-lg {
  min-height: 50px;
  padding: 14px 28px;
  font-size: 1.02rem;
  border-radius: var(--radius-md);
}

/* Button Loading States */
button[aria-busy="true"], .button[aria-busy="true"] {
  position: relative;
  opacity: 0.8;
  cursor: wait;
}

/* Universal Form & Input Elements */
label, .matri-filter-label, .font-label {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--text-label);
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--color-muted);
  margin-bottom: 6px;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]),
select,
textarea,
.matri-form-input,
.matri-form-select,
.field-input {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  font-size: var(--text-input);
  color: var(--color-text);
  line-height: 1.4;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

input:focus,
select:focus,
textarea:focus,
.matri-form-input:focus,
.matri-form-select:focus,
.field-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(194, 65, 12, 0.15);
  background: #ffffff;
}

textarea {
  min-height: 100px;
  resize: vertical;
}

.form-group {
  margin-bottom: 18px;
}

.field-error, .error, .matri-alert-error {
  font-size: var(--text-small);
  color: var(--color-error);
  font-weight: 550;
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.field-help, .note, p.note {
  font-size: var(--text-small);
  color: var(--color-text-light);
  margin-top: 6px;
  margin-bottom: 0;
}

/* Checkbox & Radio Alignment */
label.check, label.radio, .form-check-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: var(--text-body);
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 12px;
}

label.check input[type="checkbox"], label.radio input[type="radio"] {
  width: 18px;
  height: 18px;
  min-height: 18px;
  margin: 0;
  accent-color: var(--color-primary);
  cursor: pointer;
}

/* Badges & Status Indicators */
.badge, .matri-status-badge, .demo-badge, .verified-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: var(--text-caption);
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.badge-primary {
  background: var(--color-primary-soft);
  color: var(--color-primary-hover);
}

.badge-success, .matri-status-badge.connected, .verified-pill {
  background: var(--color-success-soft);
  color: var(--color-success);
}

.badge-warning, .demo-badge {
  background: var(--color-secondary-soft);
  color: var(--color-secondary-hover);
}

/* Universal Empty State */
.matri-empty-state, .empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(36px, 6vw, 64px) 24px;
  background: var(--color-surface);
  border: 1.5px dashed var(--color-border);
  border-radius: var(--radius);
  margin: 20px 0;
}

.matri-empty-icon, .empty-state-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #fbf6ef;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.matri-empty-icon svg, .empty-state-icon svg {
  width: 28px;
  height: 28px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

.matri-empty-title, .empty-state-title {
  font-family: var(--font-brand);
  font-size: var(--text-h3);
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 8px;
}

.matri-empty-desc, .empty-state-desc {
  font-size: var(--text-body);
  color: var(--color-muted);
  max-width: 440px;
  margin: 0 0 20px;
}

/* Auth Pages Dedicated Layout */
.auth-layout {
  display: grid;
  gap: 28px;
  align-items: start;
  max-width: 1040px;
  margin: 20px auto 48px;
}

@media (min-width: 860px) {
  .auth-layout {
    grid-template-columns: 1fr 1.15fr;
    gap: 48px;
    padding-top: 16px;
  }
}

.auth-intro {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.auth-intro .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.auth-intro h1 {
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  margin: 0;
}

.auth-card, .auth-layout .card {
  padding: clamp(24px, 4vw, 36px);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.auth-trust-strip {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
}

.auth-trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  color: var(--color-muted);
}

/* Legal Documents Layout (Privacy, Terms, Cookies) */
.legal-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 900px) {
  .legal-layout {
    grid-template-columns: 280px 1fr;
    gap: 36px;
    align-items: start;
  }

  .legal-layout .toc {
    position: sticky;
    top: 92px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
  }
}

.toc.card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px;
}

.toc a {
  display: block;
  font-size: 0.88rem;
  color: var(--color-muted);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 8px;
  transition: all 0.18s ease;
}

.toc a:hover {
  background: var(--color-surface-subtle);
  color: var(--color-primary);
  transform: translateX(2px);
}

/* Responsive Grid & Viewport Guardrails */
@media (max-width: 768px) {
  .wrap, body.is-public main {
    width: calc(100% - 28px);
  }
  
  .matri-dashboard-grid {
    grid-template-columns: 1fr !important;
  }
  
  .matri-left-sidebar, .matri-right-sidebar {
    display: none !important;
  }
}

@media (max-width: 480px) {
  .wrap, body.is-public main {
    width: calc(100% - 20px);
  }
  
  .card, .panel, .matri-card-box {
    padding: 16px;
    border-radius: 14px;
  }
  
  .actions {
    flex-direction: column;
    width: 100%;
  }
  
  .actions .button, .actions .button-secondary {
    width: 100%;
  }
}

/* Multilingual & RTL Support */
[dir="rtl"] {
  text-align: right;
}

[dir="rtl"] .crumbs a::after {
  content: "‹";
  margin-inline-start: 0;
  margin-inline-end: 8px;
}

[dir="rtl"] .toc a:hover {
  transform: translateX(-2px);
}

[dir="rtl"] .brand {
  flex-direction: row-reverse;
}