/* =========================================================
   KONTAKTSAJTEN DESIGN SYSTEM — v2.3
   One stylesheet, eight selectable themes.
   Purple + Klassik + Original + SpaceGlas + Neon Social + Mint Orbit + Solar Circuit + Lunar Cloud.
   All components share the same structure and use theme tokens.
   ========================================================= */

:root,
html[data-theme="purple"] {
  color-scheme: dark;
  --background: #171321;
  --background-deep: #0f0d17;
  --background-soft: #342943;
  --surface: rgba(15, 13, 24, 0.94);
  --surface-secondary: rgba(25, 21, 36, 0.96);
  --surface-elevated: rgba(18, 15, 29, 0.985);
  --surface-translucent: rgba(15, 13, 24, 0.9);
  --text-primary: #f7f5fb;
  --text-secondary: #aaa4b8;
  --text-muted: #827b91;
  --accent: #aca5ff;
  --accent-hover: #beb8ff;
  --accent-contrast: #181321;
  --accent-soft: rgba(172, 165, 255, 0.14);
  --accent-blue: #63c7ff;
  --border: rgba(238, 235, 247, 0.82);
  --border-soft: rgba(238, 235, 247, 0.28);
  --header-bg: rgba(15, 13, 24, 0.88);
  --input-background: #0f0d17;
  --danger: #ff6878;
  --success: #a9a4ff;
  --warning: #f3c879;
  --heart: #b6abff;
  --body-background:
    radial-gradient(circle at 8% 2%, rgba(96, 75, 122, .26), transparent 31rem),
    radial-gradient(circle at 94% 14%, rgba(73, 51, 101, .22), transparent 28rem),
    linear-gradient(145deg, #2b2239 0%, #171321 34%, #0f0d17 100%);
  --modal-backdrop: rgba(6, 5, 10, .58);
  --shadow: 0 22px 60px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255,255,255,.025);
  --shadow-soft: 0 14px 44px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.035);
  --shadow-modal: 0 28px 90px rgba(0,0,0,.42);
  --shadow-drawer: 18px 0 60px rgba(0,0,0,.34);
  --radius-sm: 14px;
  --radius-md: 22px;
  --radius-lg: 30px;
  --radius-xl: 34px;
  --radius-pill: 999px;
  --font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  --font-display: Georgia, "Times New Roman", serif;
  --transition: 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

html[data-theme="classic"] {
  color-scheme: light;
  --background: #fbfaf7;
  --background-deep: #f4f1eb;
  --background-soft: #f7f4ee;
  --surface: #ffffff;
  --surface-secondary: #f5f3ee;
  --surface-elevated: #ffffff;
  --surface-translucent: rgba(255, 255, 255, 0.92);
  --text-primary: #171817;
  --text-secondary: #5d625f;
  --text-muted: #858a87;
  --accent: #0f603e;
  --accent-hover: #0a4f33;
  --accent-contrast: #ffffff;
  --accent-soft: rgba(15, 96, 62, 0.09);
  --accent-blue: #2c8365;
  --border: rgba(23, 24, 23, 0.14);
  --border-soft: rgba(23, 24, 23, 0.09);
  --header-bg: rgba(255, 255, 255, 0.94);
  --input-background: #ffffff;
  --danger: #d84957;
  --success: #0f7650;
  --warning: #a9781e;
  --heart: #ff566d;
  --body-background: linear-gradient(180deg, #ffffff 0%, #fbfaf7 28%, #f7f4ee 100%);
  --modal-backdrop: rgba(26, 24, 20, .34);
  --shadow: 0 18px 55px rgba(56, 43, 22, 0.08);
  --shadow-soft: 0 8px 28px rgba(56, 43, 22, 0.07);
  --shadow-modal: 0 28px 80px rgba(56, 43, 22, .18);
  --shadow-drawer: 18px 0 48px rgba(56, 43, 22, .14);
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 16px;
  --radius-pill: 999px;
  --font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: Georgia, "Times New Roman", serif;
  --transition: 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Original palette from social-platform(1): graphite + indigo. */
html[data-theme="original"] {
  color-scheme: dark;
  --background: #09090b;
  --background-deep: #050507;
  --background-soft: #111114;
  --surface: #18181b;
  --surface-secondary: #27272a;
  --surface-elevated: #18181b;
  --surface-translucent: rgba(24, 24, 27, .94);
  --text-primary: #f4f4f5;
  --text-secondary: #a1a1aa;
  --text-muted: #71717a;
  --accent: #6366f1;
  --accent-hover: #4f46e5;
  --accent-contrast: #ffffff;
  --accent-soft: rgba(99, 102, 241, .14);
  --accent-blue: #818cf8;
  --border: #3f3f46;
  --border-soft: rgba(63, 63, 70, .72);
  --header-bg: rgba(9, 9, 11, .9);
  --input-background: #09090b;
  --danger: #ef4444;
  --success: #10b981;
  --warning: #f59e0b;
  --heart: #818cf8;
  --body-background: #09090b;
  --modal-backdrop: rgba(0, 0, 0, .62);
  --shadow: 0 24px 70px rgba(0,0,0,.28);
  --shadow-soft: 0 10px 34px rgba(0,0,0,.20);
  --shadow-modal: 0 28px 90px rgba(0,0,0,.46);
  --shadow-drawer: 18px 0 60px rgba(0,0,0,.38);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 18px;
  --radius-pill: 999px;
  --font-sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: Georgia, "Times New Roman", serif;
  --transition: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}


/* SpaceGlas — liquid glass + technical space minimalism. */
html[data-theme="spaceglas"] {
  color-scheme: dark;
  --background: #07090C;
  --background-deep: #020305;
  --background-soft: #11151A;
  --surface: rgba(20, 23, 28, .58);
  --surface-secondary: rgba(255, 255, 255, .065);
  --surface-elevated: rgba(17, 20, 24, .78);
  --surface-translucent: rgba(11, 13, 17, .62);
  --text-primary: #F7F9FB;
  --text-secondary: #C2C8CE;
  --text-muted: #818A93;
  --accent: #DDEAF1;
  --accent-hover: #FFFFFF;
  --accent-contrast: #080A0C;
  --accent-soft: rgba(221, 234, 241, .105);
  --accent-blue: #8FCAD5;
  --border: rgba(255, 255, 255, .16);
  --border-soft: rgba(255, 255, 255, .085);
  --header-bg: rgba(8, 10, 13, .62);
  --input-background: rgba(4, 6, 8, .50);
  --danger: #FF7C88;
  --success: #A9DDD1;
  --warning: #DDCCA5;
  --heart: #B7E9F2;
  --body-background:
    radial-gradient(circle at 16% -4%, rgba(255,255,255,.075), transparent 23rem),
    radial-gradient(circle at 82% 2%, rgba(116,181,197,.085), transparent 29rem),
    radial-gradient(circle at 52% 118%, rgba(45,60,78,.30), transparent 36rem),
    linear-gradient(155deg, #0B0E12 0%, #05070A 52%, #010203 100%);
  --modal-backdrop: rgba(0, 1, 2, .72);
  --shadow: 0 28px 78px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.12);
  --shadow-soft: 0 18px 48px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.09);
  --shadow-modal: 0 38px 110px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.14);
  --shadow-drawer: 18px 0 70px rgba(0,0,0,.46);
  --radius-sm: 14px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 30px;
  --radius-pill: 999px;
  --font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  --font-display: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  --transition: 210ms cubic-bezier(.2,.8,.2,1);
  --primary: var(--accent);
  --muted-text: var(--text-muted);
  --border-color: var(--border-soft);
}

/* Neon Social — nightlife/social energy without gaming chrome. */
html[data-theme="neon-social"] {
  color-scheme: dark;
  --background: #090914;
  --background-deep: #04040A;
  --background-soft: #15101F;
  --surface: #11111E;
  --surface-secondary: #1B1627;
  --surface-elevated: #171322;
  --surface-translucent: rgba(10, 9, 20, .92);
  --text-primary: #FFF8FD;
  --text-secondary: #CDBFD0;
  --text-muted: #8E8295;
  --accent: #EE227D;
  --accent-hover: #FF4B9B;
  --accent-contrast: #14030C;
  --accent-soft: rgba(238,34,125,.13);
  --accent-blue: #36D4CA;
  --border: rgba(239,94,159,.32);
  --border-soft: rgba(132,75,190,.22);
  --header-bg: rgba(6,5,13,.94);
  --input-background: #0B0B15;
  --danger: #FF637C;
  --success: #35D5C9;
  --warning: #FFAA73;
  --heart: #FF4E9F;
  --body-background:
    radial-gradient(circle at 0% 5%, rgba(92,51,246,.16), transparent 26rem),
    radial-gradient(circle at 100% 0%, rgba(238,34,125,.12), transparent 24rem),
    linear-gradient(165deg, #0E0C1A 0%, #090914 50%, #05050A 100%);
  --modal-backdrop: rgba(2,2,7,.74);
  --shadow: 0 24px 58px rgba(0,0,0,.42);
  --shadow-soft: 0 14px 34px rgba(0,0,0,.30);
  --shadow-modal: 0 30px 92px rgba(0,0,0,.58);
  --shadow-drawer: 18px 0 58px rgba(0,0,0,.46);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --transition: 165ms cubic-bezier(.2,.85,.25,1);
  --primary: var(--accent);
  --muted-text: var(--text-muted);
  --border-color: var(--border-soft);
}

/* Mint Orbit — calm mint/teal surfaces for long browsing sessions. */
html[data-theme="mint-orbit"] {
  color-scheme: dark;
  --background: #0D1B27;
  --background-deep: #08131C;
  --background-soft: #142A37;
  --surface: #132835;
  --surface-secondary: #183340;
  --surface-elevated: #17303D;
  --surface-translucent: rgba(16, 39, 51, .92);
  --text-primary: #F1FFF9;
  --text-secondary: #C1DDD7;
  --text-muted: #88AAA5;
  --accent: #67E6C2;
  --accent-hover: #8AF0D1;
  --accent-contrast: #08231B;
  --accent-soft: rgba(103,230,194,.11);
  --accent-blue: #79D9E2;
  --border: rgba(171,222,211,.22);
  --border-soft: rgba(171,222,211,.10);
  --header-bg: rgba(10,25,35,.92);
  --input-background: #0C202B;
  --danger: #FF7E8F;
  --success: #58D5AF;
  --warning: #E6CB8A;
  --heart: #82E9CE;
  --body-background:
    radial-gradient(circle at 14% 3%, rgba(95,221,198,.10), transparent 28rem),
    linear-gradient(160deg, #112A37 0%, #0D1B27 48%, #08131C 100%);
  --modal-backdrop: rgba(4,12,17,.66);
  --shadow: 0 20px 50px rgba(1,9,13,.28);
  --shadow-soft: 0 10px 28px rgba(1,9,13,.18);
  --shadow-modal: 0 28px 80px rgba(1,9,13,.42);
  --shadow-drawer: 16px 0 48px rgba(1,9,13,.30);
  --radius-sm: 18px;
  --radius-md: 24px;
  --radius-lg: 32px;
  --radius-xl: 38px;
  --radius-pill: 999px;
  --font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --transition: 230ms cubic-bezier(.2,.8,.2,1);
  --primary: var(--accent);
  --muted-text: var(--text-muted);
  --border-color: var(--border-soft);
}

/* Solar Circuit — circuit navy with precise solar-lime accents. */
html[data-theme="solar-circuit"] {
  color-scheme: dark;
  --background: #091522;
  --background-deep: #050D15;
  --background-soft: #102438;
  --surface: #0D1E2D;
  --surface-secondary: #12283A;
  --surface-elevated: #102334;
  --surface-translucent: rgba(7,18,29,.96);
  --text-primary: #F7FAF2;
  --text-secondary: #B6C2C9;
  --text-muted: #74838D;
  --accent: #B6FF3B;
  --accent-hover: #C9FF71;
  --accent-contrast: #071006;
  --accent-soft: rgba(182,255,59,.10);
  --accent-blue: #A8D1C0;
  --border: rgba(191,212,221,.24);
  --border-soft: rgba(191,212,221,.12);
  --header-bg: #07131F;
  --input-background: #071722;
  --danger: #FF6C75;
  --success: #6EE7A8;
  --warning: #F2C96C;
  --heart: #C5FF69;
  --body-background:
    linear-gradient(rgba(182,255,59,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(182,255,59,.018) 1px, transparent 1px),
    linear-gradient(145deg, #0D2030 0%, #091522 48%, #050D15 100%);
  --modal-backdrop: rgba(2,7,11,.72);
  --shadow: 0 18px 44px rgba(0,0,0,.34);
  --shadow-soft: 0 8px 24px rgba(0,0,0,.22);
  --shadow-modal: 0 26px 72px rgba(0,0,0,.48);
  --shadow-drawer: 14px 0 42px rgba(0,0,0,.38);
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --radius-pill: 999px;
  --font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --transition: 135ms cubic-bezier(.2,.75,.25,1);
  --primary: var(--accent);
  --muted-text: var(--text-muted);
  --border-color: var(--border-soft);
  background-size: 30px 30px, 30px 30px, auto;
}

/* Lunar Cloud — soft moonlight, silver and warm-sand cinematic surfaces. */
html[data-theme="lunar-cloud"] {
  color-scheme: dark;
  --background: #1C2631;
  --background-deep: #141C25;
  --background-soft: #2B3946;
  --surface: rgba(39,52,65,.94);
  --surface-secondary: rgba(51,66,80,.92);
  --surface-elevated: rgba(45,59,73,.98);
  --surface-translucent: rgba(28,39,50,.90);
  --text-primary: #F6F2EB;
  --text-secondary: #D0D7DC;
  --text-muted: #9BA7B0;
  --accent: #D9E7F0;
  --accent-hover: #F2F7FA;
  --accent-contrast: #1B2731;
  --accent-soft: rgba(217,231,240,.11);
  --accent-blue: #B8D4E7;
  --border: rgba(226,232,235,.20);
  --border-soft: rgba(226,232,235,.095);
  --header-bg: rgba(21,29,38,.89);
  --input-background: rgba(23,34,44,.88);
  --danger: #E88A92;
  --success: #B1D6C5;
  --warning: #DCC8AA;
  --heart: #D9BDCC;
  --body-background:
    radial-gradient(circle at 12% 0%, rgba(205,225,239,.13), transparent 34rem),
    radial-gradient(circle at 92% 24%, rgba(220,200,170,.09), transparent 30rem),
    linear-gradient(155deg, #2B3A48 0%, #1C2631 48%, #141C25 100%);
  --modal-backdrop: rgba(9,14,20,.60);
  --shadow: 0 28px 70px rgba(7,12,18,.28);
  --shadow-soft: 0 16px 40px rgba(7,12,18,.18);
  --shadow-modal: 0 34px 90px rgba(7,12,18,.42);
  --shadow-drawer: 18px 0 54px rgba(7,12,18,.30);
  --radius-sm: 18px;
  --radius-md: 24px;
  --radius-lg: 34px;
  --radius-xl: 40px;
  --radius-pill: 999px;
  --font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: Georgia, "Times New Roman", serif;
  --transition: 250ms cubic-bezier(.2,.8,.2,1);
  --primary: var(--accent);
  --muted-text: var(--text-muted);
  --border-color: var(--border-soft);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { min-height: 100%; background: var(--background); }
body {
  min-height: 100vh;
  background: var(--body-background);
  background-attachment: fixed;
  color: var(--text-primary);
  font-family: var(--font-sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--transition), color var(--transition);
}
body.modal-open { overflow: hidden; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
a { color: inherit; }
img { max-width: 100%; }
[hidden] { display: none !important; }
::selection { background: var(--accent-soft); color: var(--text-primary); }

h1 { font-size: clamp(2.25rem, 7vw, 4.5rem); font-weight: 800; letter-spacing: -0.055em; line-height: 1.03; margin-bottom: 1rem; }
h2 { font-size: 1.75rem; font-weight: 750; letter-spacing: -0.035em; line-height: 1.15; margin-bottom: .7rem; }
h3 { font-size: 1.05rem; line-height: 1.3; }
p { color: var(--text-secondary); }

.eyebrow {
  display: inline-block;
  color: var(--accent-blue);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: .35rem;
}
.brand-heart { color: var(--heart); font-size: 1.55em; line-height: 1; font-family: var(--font-sans); }
.full-width { width: 100%; }
.mobile-only { display: none !important; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 44px;
  padding: .76rem 1.25rem;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  font-weight: 720;
  text-decoration: none;
  transition: transform var(--transition), background-color var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.btn:focus-visible,
.form-control:focus-visible,
.icon-button:focus-visible,
.avatar-button:focus-visible,
.topnav-link:focus-visible,
.theme-option:focus-visible,
.person-row:focus-visible,
.mobile-nav-item:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent);
  outline-offset: 2px;
}
.btn-primary { background: var(--accent); color: var(--accent-contrast); box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 18%, transparent); }
.btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); }
.btn-secondary { background: color-mix(in srgb, var(--surface) 76%, transparent); color: var(--text-primary); border-color: var(--border); }
.btn-secondary:hover { background: var(--surface-secondary); }
.btn[disabled] { opacity: .58; cursor: not-allowed; transform: none; }
.compact-button { min-height: 38px; padding: .55rem .95rem; border-radius: 12px; }

.icon-button,
.avatar-button {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text-primary);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.icon-button:hover,
.avatar-button:hover { background: var(--surface-secondary); border-color: var(--border); transform: translateY(-1px); }
.avatar-button { border-radius: var(--radius-pill); font-weight: 800; background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 32%, transparent); }

/* ---------- Public landing / auth ---------- */
body > header:not(.app-header) {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--border-soft);
  backdrop-filter: blur(18px);
  background: var(--header-bg);
}
.navbar { max-width: 1200px; margin: 0 auto; padding: 1rem 2rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.logo { display: inline-flex; align-items: center; gap: .55rem; color: var(--text-primary); text-decoration: none; font-weight: 850; letter-spacing: -.03em; }
.nav-links { display: flex; gap: .75rem; align-items: center; }

.hero { max-width: 940px; margin: 7rem auto 3rem; text-align: center; padding: 0 2rem; }
.hero p { font-size: 1.18rem; max-width: 660px; margin: 0 auto 2rem; }
.hero-ctas { display: flex; justify-content: center; gap: 1rem; margin-bottom: 4rem; }
.visual-mockup {
  position: relative;
  isolation: isolate;
  max-width: 1000px;
  height: 410px;
  margin: 0 auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 25% 20%, color-mix(in srgb, var(--accent) 19%, transparent), transparent 30%),
    linear-gradient(135deg, var(--surface-elevated), var(--background-deep));
  box-shadow: var(--shadow);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.visual-mockup::before {
  content: '';
  position: absolute;
  inset: -28%;
  z-index: -1;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 17%, transparent), transparent 58%);
  opacity: .65;
  transform: translate3d(-8%, -3%, 0) scale(.9);
  animation: showcaseAmbient 12s ease-in-out infinite alternate;
  pointer-events: none;
}
.mockup-card {
  width: min(80%, 600px);
  min-height: 238px;
  padding: 2rem;
  border-radius: 22px;
  border: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  text-align: left;
}
.showcase-card {
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translateY(14px) scale(.985);
  filter: blur(5px);
  box-shadow: 0 22px 54px color-mix(in srgb, var(--background-deep) 34%, transparent);
  backdrop-filter: blur(16px);
  transition: opacity 620ms ease, transform 620ms cubic-bezier(.16,1,.3,1), filter 620ms ease, border-color 300ms ease, box-shadow 300ms ease;
}
.showcase-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid transparent;
  background: linear-gradient(115deg, transparent 12%, color-mix(in srgb, var(--accent) 75%, white 12%) 46%, transparent 78%) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
}
.showcase-card.is-visible { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
.showcase-card.is-exiting { opacity: 0; transform: translateY(-8px) scale(.994); filter: blur(3px); }
.showcase-card.is-flashing {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--border));
  box-shadow: 0 22px 60px color-mix(in srgb, var(--accent) 24%, transparent), 0 0 0 7px color-mix(in srgb, var(--accent) 6%, transparent);
}
.showcase-card.is-flashing::before { animation: showcaseBorderSweep 520ms ease both; }
.showcase-kicker {
  display: block;
  margin-bottom: .45rem;
  color: var(--accent);
  font-size: .7rem;
  font-weight: 850;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.showcase-title {
  display: block;
  max-width: 520px;
  font-size: clamp(1.45rem, 3vw, 2.15rem);
  line-height: 1.08;
  letter-spacing: -.04em;
  text-wrap: balance;
}
.showcase-description {
  max-width: 520px;
  min-height: 3.2em;
  margin: .75rem 0 0;
  color: var(--text-secondary);
  font-size: .98rem;
  line-height: 1.55;
}
.showcase-visual {
  position: absolute;
  top: 1.35rem;
  right: 1.45rem;
  width: 72px;
  height: 72px;
  opacity: .72;
  pointer-events: none;
}
.showcase-visual span { position: absolute; display: block; border: 1px solid color-mix(in srgb, var(--accent) 54%, var(--border)); background: var(--accent-soft); }
[data-showcase-visual='feed'] .showcase-visual span { left: 8px; width: 56px; height: 8px; border-radius: var(--radius-pill); }
[data-showcase-visual='feed'] .showcase-visual span:nth-child(1) { top: 14px; }
[data-showcase-visual='feed'] .showcase-visual span:nth-child(2) { top: 31px; width: 43px; }
[data-showcase-visual='feed'] .showcase-visual span:nth-child(3) { top: 48px; width: 31px; }
[data-showcase-visual='members'] .showcase-visual span { width: 28px; height: 28px; border-radius: 50%; }
[data-showcase-visual='members'] .showcase-visual span:nth-child(1) { left: 4px; top: 23px; }
[data-showcase-visual='members'] .showcase-visual span:nth-child(2) { left: 23px; top: 7px; }
[data-showcase-visual='members'] .showcase-visual span:nth-child(3) { left: 40px; top: 30px; }
[data-showcase-visual='free'] .showcase-visual span:nth-child(1) { inset: 9px; border-radius: 50%; }
[data-showcase-visual='free'] .showcase-visual span:nth-child(1)::after { content: '✓'; display: grid; place-items: center; height: 100%; color: var(--accent); font-size: 1.7rem; font-weight: 900; }
[data-showcase-visual='free'] .showcase-visual span:nth-child(n+2) { display: none; }
[data-showcase-visual='safety'] .showcase-visual span:nth-child(1) { inset: 8px 13px 11px; border-radius: 50% 50% 46% 46%; clip-path: polygon(50% 0, 92% 17%, 82% 72%, 50% 100%, 18% 72%, 8% 17%); }
[data-showcase-visual='safety'] .showcase-visual span:nth-child(n+2) { display: none; }
.mockup-lines { display: grid; gap: .7rem; margin-top: 1.35rem; }
.mockup-lines span { display: block; height: 8px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--border-soft) 78%, var(--accent-soft)); transform-origin: left center; }
.mockup-lines span:nth-child(2) { width: 78%; }
.mockup-lines span:nth-child(3) { width: 56%; }
.showcase-card.is-visible .mockup-lines span { animation: showcaseLineIn 560ms cubic-bezier(.16,1,.3,1) both; }
.showcase-card.is-visible .mockup-lines span:nth-child(2) { animation-delay: 80ms; }
.showcase-card.is-visible .mockup-lines span:nth-child(3) { animation-delay: 150ms; }
.showcase-card.is-flashing .mockup-lines span { background: color-mix(in srgb, var(--accent) 38%, var(--border-soft)); }
.showcase-shine {
  position: absolute;
  inset: -40% auto -40% -45%;
  width: 34%;
  transform: rotate(18deg) translateX(0);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, white 26%, transparent), transparent);
  opacity: 0;
  pointer-events: none;
}
.showcase-card.is-flashing .showcase-shine { animation: showcaseShine 520ms ease-out both; }
.showcase-progress {
  position: absolute;
  left: 50%;
  bottom: 1.45rem;
  width: min(240px, 58%);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem;
  transform: translateX(-50%);
}
.showcase-progress span { position: relative; height: 3px; overflow: hidden; border-radius: var(--radius-pill); background: var(--border-soft); }
.showcase-progress span::after { content: ''; position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.showcase-progress span.is-active::after { animation: showcaseProgress 3.4s linear both; }
@keyframes showcaseAmbient { to { transform: translate3d(9%, 5%, 0) scale(1.05); opacity: .9; } }
@keyframes showcaseLineIn { from { opacity: .25; transform: scaleX(.45); } to { opacity: 1; transform: scaleX(1); } }
@keyframes showcaseBorderSweep { 0% { opacity: 0; transform: translateX(-30%); } 45% { opacity: .95; } 100% { opacity: 0; transform: translateX(30%); } }
@keyframes showcaseShine { 0% { opacity: 0; transform: rotate(18deg) translateX(0); } 30% { opacity: .8; } 100% { opacity: 0; transform: rotate(18deg) translateX(520%); } }
@keyframes showcaseProgress { to { transform: scaleX(1); } }
.public-theme-picker {
  width: min(100%, 700px);
  margin: -1.8rem auto 2.2rem;
  padding: .9rem;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  box-shadow: var(--shadow-soft);
  text-align: left;
}
.public-theme-picker-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .65rem; }
.public-theme-picker-header strong { font-size: .86rem; }
.public-theme-picker-header span { color: var(--text-muted); font-size: .74rem; }
.public-theme-picker .theme-option { min-width: 0; }
.public-theme-picker .theme-preview { flex: 0 0 auto; }
.public-theme-picker .theme-option strong,
.public-theme-picker .theme-option small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-theme="classic"] .logo { font-family: var(--font-display); font-size: 1.28rem; letter-spacing: -.02em; }
.features { max-width: 1200px; margin: 6rem auto; padding: 0 2rem; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.25rem; }
.card { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--shadow-soft); transition: transform var(--transition), border-color var(--transition), background var(--transition); }
.card:hover { border-color: color-mix(in srgb, var(--accent) 48%, var(--border)); transform: translateY(-2px); }
.card p { margin-top: .75rem; }

.form-container {
  width: min(100% - 2rem, 500px);
  margin: 4rem auto;
  padding: 2.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.register-container { width: min(100% - 2rem, 720px); }
.form-intro { margin-bottom: 2rem; }
.form-group { margin-bottom: 1.2rem; min-width: 0; }
.form-group label { display: block; margin-bottom: .48rem; color: var(--text-secondary); font-size: .86rem; font-weight: 720; }
.form-control {
  width: 100%;
  min-height: 48px;
  padding: .78rem 1rem;
  background: var(--input-background);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.form-control::placeholder { color: var(--text-muted); }
.form-control:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }
select.form-control { cursor: pointer; }
.textarea-control { min-height: 120px; resize: vertical; line-height: 1.55; }
.feedback-text { display: block; margin-top: .35rem; color: var(--text-muted); font-size: .76rem; }
.register-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
.register-span-2 { grid-column: 1 / -1; }

/* V2.7.0.79 – optional five-step Registration presentation. */
.register-wizard {
  width: min(100% - 2rem, 640px);
  overflow: hidden;
}
.register-wizard-intro { margin-bottom: 1.35rem; }
.register-progress {
  --register-progress: 20%;
  --register-progress-fill: 0%;
  position: relative;
  margin: 0 0 1.6rem;
  padding: .35rem .15rem .15rem;
}
.register-progress-track {
  position: absolute;
  top: 1.18rem;
  left: 10%;
  right: 10%;
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--border-soft);
  overflow: hidden;
  pointer-events: none;
}
.register-progress-track > span {
  display: block;
  width: var(--register-progress-fill);
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width .22s ease;
}
.register-progress-list {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.register-progress-step {
  display: grid;
  justify-items: center;
  gap: .45rem;
  min-width: 0;
  color: var(--text-muted);
  font-size: .72rem;
  font-weight: 720;
  text-align: center;
}
.register-progress-dot {
  display: grid;
  place-items: center;
  width: 1.72rem;
  height: 1.72rem;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text-muted);
  box-shadow: 0 0 0 4px var(--surface);
  transition: border-color var(--transition), background var(--transition), color var(--transition), transform var(--transition);
}
.register-progress-step.is-current .register-progress-dot,
.register-progress-step.is-complete .register-progress-dot {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--button-primary-text, var(--surface));
}
.register-progress-step.is-current .register-progress-dot { transform: scale(1.08); }
.register-progress-step.is-current,
.register-progress-step.is-complete { color: var(--text-primary); }
.register-progress-step.is-complete .register-progress-dot::before { content: '✓'; font-size: .78rem; }
.register-progress-step.is-complete .register-progress-dot { font-size: 0; }
.register-progress-current {
  margin: .85rem 0 0;
  color: var(--text-muted);
  font-size: .78rem;
  font-weight: 700;
  text-align: center;
}
.register-wizard-form { min-height: 290px; }
.register-step[hidden] { display: none !important; }
.register-step {
  animation: register-step-enter .18s ease both;
}
.register-step-heading { margin-bottom: 1.35rem; }
.register-step-heading > span {
  display: block;
  margin-bottom: .3rem;
  color: var(--accent);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.register-step-title {
  margin: 0;
  color: var(--text-primary);
  font-size: clamp(1.25rem, 4vw, 1.7rem);
  line-height: 1.2;
}
.register-step-title:focus { outline: none; }
.register-step-heading p { margin: .45rem 0 0; color: var(--text-muted); font-size: .88rem; line-height: 1.5; }
.register-step-location-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
.register-step-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .8rem;
  margin-top: 1.55rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-soft);
}
.register-step-actions-end { justify-content: flex-end; }
.register-step-actions .btn { min-width: 120px; }
.register-wizard .profile-image-picker { align-items: start; }
.register-wizard .image-preview { background: var(--surface-secondary); border-color: var(--border); }
.register-wizard .form-control.is-invalid { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 12%, transparent); }
@keyframes register-step-enter {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.strength-bar { display: flex; gap: 4px; margin-top: .6rem; height: 4px; }
.strength-segment { flex: 1; background: var(--surface-secondary); border-radius: var(--radius-pill); }
.strength-segment.active.low { background: var(--danger); }
.strength-segment.active.medium { background: var(--warning); }
.strength-segment.active.high { background: var(--success); }
.alert { display: none; padding: .9rem 1rem; margin-bottom: 1.25rem; border-radius: var(--radius-md); font-size: .9rem; }
.alert-danger { color: color-mix(in srgb, var(--danger) 80%, var(--text-primary)); border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent); background: color-mix(in srgb, var(--danger) 10%, transparent); }
.alert-success { color: color-mix(in srgb, var(--success) 78%, var(--text-primary)); border: 1px solid color-mix(in srgb, var(--success) 45%, transparent); background: color-mix(in srgb, var(--success) 10%, transparent); }
.auth-switch { margin-top: 1.5rem; text-align: center; font-size: .9rem; }
.auth-switch a { color: var(--accent); font-weight: 750; text-decoration: none; }
.auth-switch a:hover { text-decoration: underline; }
footer { margin-top: 5rem; padding: 3rem 2rem; text-align: center; border-top: 1px solid var(--border-soft); }
.error-page { min-height: 75vh; display: grid; place-items: center; padding: 2rem; text-align: center; }
.error-page > div { max-width: 560px; }
.error-code { font-size: 6rem; font-weight: 900; letter-spacing: -.08em; }

@media (prefers-reduced-motion: reduce) {
  .visual-mockup::before,
  .showcase-card,
  .showcase-card::before,
  .showcase-card.is-visible .mockup-lines span,
  .showcase-card.is-flashing .showcase-shine,
  .showcase-progress span.is-active::after {
    animation: none !important;
    transition: none !important;
  }
  .visual-mockup::before { transform: none; opacity: .55; }
  .showcase-card, .showcase-card.is-visible, .showcase-card.is-exiting { opacity: 1; transform: none; filter: none; }
  .showcase-progress span:first-child::after { transform: scaleX(1); }
}

/* ---------- Authenticated app ---------- */
.app-page { background: var(--background); padding-top: 74px; }
.app-header {
  position: fixed;
  inset: 0 0 auto 0;
  height: 74px;
  z-index: 500;
  display: grid;
  grid-template-columns: 250px minmax(300px, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 0 1.25rem;
  border-bottom: 1px solid var(--border-soft);
  background: var(--header-bg);
  backdrop-filter: blur(18px);
  box-shadow: 0 6px 26px color-mix(in srgb, var(--background-deep) 24%, transparent);
}
.app-brand { display: flex; align-items: center; gap: .65rem; font-size: 1rem; font-weight: 850; letter-spacing: -.04em; text-decoration: none; }
html[data-theme="classic"] .app-brand { font-family: var(--font-display); font-size: 1.28rem; }
.app-topnav { display: flex; align-items: center; justify-content: center; gap: .25rem; }
.topnav-link { border: 0; background: transparent; color: var(--text-secondary); padding: .7rem 1rem; border-radius: 12px; cursor: pointer; font-weight: 700; }
.topnav-link:hover { color: var(--text-primary); background: var(--surface-secondary); }
.topnav-link.is-active { color: var(--text-primary); background: var(--accent-soft); }
.app-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: .65rem; }
.app-search { height: 42px; width: min(250px, 20vw); display: flex; align-items: center; gap: .55rem; padding: 0 .85rem; border: 1px solid var(--border-soft); border-radius: 14px; background: var(--surface); color: var(--text-muted); }
.app-search input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--text-primary); }
.app-search input::placeholder { color: var(--text-muted); }
.header-create-button { min-height: 42px; white-space: nowrap; }

.app-shell {
  min-height: calc(100vh - 74px);
  display: grid;
  grid-template-columns: 250px minmax(0, 720px) 310px;
  justify-content: center;
  gap: 1.25rem;
  padding: 1.5rem 1.25rem 4rem;
}
.friends-sidebar,
.right-sidebar { min-width: 0; }
.friends-sidebar-inner,
.right-sidebar { position: sticky; top: 94px; align-self: start; max-height: calc(100vh - 110px); overflow: auto; scrollbar-width: thin; }
.friends-sidebar-inner { padding: 1rem; border: 1px solid var(--border-soft); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-soft); }
.sidebar-heading-row { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.sidebar-heading-row h2 { margin: 0; font-size: 1.35rem; }
.sidebar-heading-row.compact { margin-top: 1rem; margin-bottom: .6rem; }
.sidebar-heading-row.compact h3 { margin: 0; }
.sidebar-divider { height: 1px; background: var(--border-soft); margin: 1rem 0; }
.friends-list { display: grid; gap: .4rem; }
.sidebar-empty { color: var(--text-muted); font-size: .86rem; padding: .8rem; border: 1px dashed var(--border-soft); border-radius: 14px; }
.person-row { width: 100%; display: flex; align-items: center; gap: .7rem; border: 0; border-radius: 14px; padding: .55rem; background: transparent; text-align: left; cursor: pointer; }
.person-row:hover { background: var(--surface-secondary); }
.person-avatar { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; border-radius: var(--radius-pill); background: linear-gradient(145deg, var(--accent-soft), var(--surface-secondary)); border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border-soft)); font-weight: 850; }
.person-copy { display: grid; min-width: 0; }
.person-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; }
.person-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); font-size: .73rem; }
.person-suggestion .person-avatar { border-radius: 14px; }

.feed-column { min-width: 0; }
.feed-intro { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 1.15rem; padding: .45rem .2rem; }
.feed-intro h1 { margin: 0; font-size: clamp(2rem, 4vw, 3rem); }
.feed-intro p { margin-top: .4rem; max-width: 620px; }
.mobile-create-button { display: none; }
.profile-reminder { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; padding: 1rem 1.1rem; border: 1px solid color-mix(in srgb, var(--warning) 28%, var(--border-soft)); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--warning) 8%, var(--surface)); }
.profile-reminder p { font-size: .86rem; margin-top: .2rem; }
.feed-list { display: grid; gap: 1rem; }
.app-card { border-color: var(--border); }
.feed-post { padding: 1.55rem; }
.post-author-row { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; margin-bottom: 1.25rem; }
.post-author { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.post-avatar { width: 46px; height: 46px; flex: 0 0 46px; display: grid; place-items: center; border-radius: var(--radius-pill); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); font-weight: 850; font-size: 1.05rem; }
.post-author > div:last-child { display: grid; min-width: 0; }
.post-author strong { font-size: .95rem; }
.post-author span { color: var(--text-muted); font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.match-badge { flex: 0 0 auto; padding: .38rem .65rem; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent); font-size: .72rem; font-weight: 800; }
.post-title { font-size: clamp(1.5rem, 3vw, 2.15rem); margin-bottom: .9rem; line-height: 1.16; }
html[data-theme="classic"] .post-title { font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; }
.post-body { white-space: pre-wrap; color: var(--text-primary); font-size: .98rem; line-height: 1.75; }
.post-footer { margin-top: 1.35rem; padding-top: 1rem; border-top: 1px solid var(--border-soft); display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: var(--text-muted); font-size: .78rem; }
.post-actions { display: flex; align-items: center; gap: .55rem; }
.post-action-button { border: 0; background: transparent; color: var(--text-secondary); cursor: pointer; padding: .55rem .65rem; border-radius: 10px; }
.post-action-button:hover { background: var(--surface-secondary); color: var(--text-primary); }
.feed-empty { text-align: center; padding: 3.5rem 2rem; }
.feed-empty-icon { display: block; color: var(--heart); font-size: 3.2rem; line-height: 1; margin-bottom: .85rem; }
.feed-empty h2 { font-size: 1.45rem; }

.right-sidebar { display: grid; gap: 1rem; }
.profile-summary-top { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; }
.large-avatar { width: 64px; height: 64px; flex: 0 0 64px; display: grid; place-items: center; border-radius: var(--radius-pill); background: linear-gradient(145deg, var(--surface-secondary), var(--accent-soft)); border: 1px solid var(--border); font-size: 1.35rem; font-weight: 850; }
.profile-summary h2 { margin: 0; font-size: 1.25rem; }
.profile-facts { display: grid; gap: .7rem; margin: 1rem 0 1.2rem; }
.profile-facts > div { display: flex; justify-content: space-between; gap: .7rem; padding-bottom: .65rem; border-bottom: 1px solid var(--border-soft); }
.profile-facts dt { color: var(--text-muted); font-size: .76rem; }
.profile-facts dd { text-align: right; font-weight: 700; font-size: .8rem; }
.quick-create-card h3,
.own-posts-card h3 { margin-top: .05rem; font-size: 1.15rem; }
.quick-create-card p { margin: .55rem 0 1rem; font-size: .86rem; }
.mini-post-list { display: grid; gap: .65rem; margin-top: .85rem; }
.mini-post { display: grid; gap: .15rem; padding: .75rem; border-radius: 12px; background: var(--surface-secondary); }
.mini-post strong { font-size: .82rem; line-height: 1.35; }
.mini-post small,
.mini-empty { color: var(--text-muted); font-size: .73rem; }

/* ---------- Modals / settings ---------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: var(--modal-backdrop);
  backdrop-filter: blur(7px);
  opacity: 0;
  transition: opacity var(--transition);
}
.modal-backdrop.is-visible { opacity: 1; }
.modal-card {
  width: min(100%, 620px);
  max-height: min(88vh, 850px);
  overflow: auto;
  padding: 1.4rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface-elevated);
  box-shadow: var(--shadow-modal);
  transform: translateY(10px) scale(.99);
  transition: transform var(--transition);
}
.modal-backdrop.is-visible .modal-card { transform: translateY(0) scale(1); }
.settings-modal-card { width: min(100%, 760px); }

.settings-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .45rem;
  margin: -.15rem 0 .9rem;
  padding: .35rem;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: var(--surface-secondary);
}
.settings-tab {
  min-width: 0;
  padding: .7rem .6rem;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
}
.settings-tab:hover { color: var(--text-primary); background: var(--surface); }
.settings-tab.is-active {
  border-color: var(--border);
  background: var(--surface-elevated);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}
.settings-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.settings-tab-panel[hidden] { display: none; }
.settings-tab-panel > .settings-section:first-child { border-top: 0; padding-top: .2rem; }
.modal-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.25rem; }
.modal-header h2 { margin: 0; }
.modal-actions { display: flex; justify-content: flex-end; gap: .7rem; margin-top: .5rem; }
.settings-section { padding: 1.15rem 0; border-top: 1px solid var(--border-soft); }
.settings-section:first-of-type { border-top: 0; padding-top: .2rem; }
.settings-section > p { font-size: .86rem; margin: .3rem 0 1rem; }
.theme-options { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: .75rem; }
.theme-option { display: flex; align-items: center; gap: .8rem; padding: .8rem; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); cursor: pointer; text-align: left; }
.theme-option:hover,
.theme-option.is-selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.theme-option > span:last-child { display: grid; }
.theme-option small { color: var(--text-muted); }
.theme-preview { width: 58px; height: 42px; border-radius: 12px; border: 1px solid rgba(255,255,255,.18); box-shadow: inset 0 0 0 6px rgba(255,255,255,.04); }
.purple-preview { background: linear-gradient(145deg, #332747, #11101a); }
.classic-preview { background: linear-gradient(145deg, #ffffff, #f2efe8); border-color: rgba(0,0,0,.12); box-shadow: inset 0 -10px 0 rgba(15,96,62,.18); }
.original-preview { background: linear-gradient(145deg, #27272a, #09090b); border-color: #3f3f46; box-shadow: inset 0 -10px 0 rgba(99,102,241,.28); }
.spaceglas-preview { background: linear-gradient(145deg, #202060, #0B0F14 62%); border-color: rgba(61,242,224,.42); box-shadow: inset 0 -10px 0 rgba(61,242,224,.22), inset 0 1px 0 rgba(255,255,255,.18); }
.neon-social-preview { background: linear-gradient(145deg, #3B0855, #0A0B16 58%); border-color: rgba(238,34,125,.44); box-shadow: inset 0 -10px 0 rgba(0,194,203,.22), inset 12px 0 20px rgba(92,51,246,.16); }
.mint-orbit-preview { background: linear-gradient(145deg, #173449, #0C1A2B 62%); border-color: rgba(85,239,196,.40); box-shadow: inset 0 -10px 0 rgba(0,206,201,.22); }
.solar-circuit-preview { background: linear-gradient(145deg, #15283C, #0C1A2B 62%); border-color: rgba(182,255,59,.48); box-shadow: inset 0 -10px 0 rgba(182,255,59,.28); }
.lunar-cloud-preview { background: linear-gradient(145deg, #34495A, #18212C 64%); border-color: rgba(198,219,234,.42); box-shadow: inset 0 -10px 0 rgba(216,196,165,.22); }
.profile-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 1rem; }
.form-span-2 { grid-column: 1 / -1; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  z-index: 1200;
  max-width: min(92vw, 480px);
  transform: translate(-50%, 14px);
  opacity: 0;
  padding: .85rem 1rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-elevated);
  color: var(--text-primary);
  box-shadow: var(--shadow);
  transition: opacity var(--transition), transform var(--transition);
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.mobile-bottom-nav { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .app-header { grid-template-columns: 220px 1fr auto; }
  .app-shell { grid-template-columns: 220px minmax(0, 720px); }
  .right-sidebar { display: none; }
  .app-search { display: none; }
}

@media (max-width: 850px) {
  .mobile-only { display: inline-grid !important; }
  .app-page { padding-top: 68px; padding-bottom: 82px; }
  .app-header { height: 68px; grid-template-columns: auto 1fr auto; padding: 0 .8rem; gap: .55rem; }
  .app-page-main .app-header { grid-template-columns: minmax(0, 1fr) auto; }
  .app-brand { justify-self: start; font-size: 1rem; }
  html[data-theme="classic"] .app-brand { font-size: 1.28rem; }
  .app-topnav,
  .app-header-actions .icon-button,
  .app-header-actions .header-create-button { display: none; }
  .app-header-actions { gap: .3rem; }
  .app-shell { display: block; padding: 1.1rem .9rem 2rem; }
  .friends-sidebar {
    position: fixed;
    inset: 68px auto 0 0;
    z-index: 700;
    width: min(86vw, 330px);
    padding: .8rem;
    background: color-mix(in srgb, var(--background) 88%, transparent);
    backdrop-filter: blur(14px);
    transform: translateX(-105%);
    transition: transform var(--transition);
  }
  .friends-sidebar.is-open { transform: translateX(0); box-shadow: var(--shadow-drawer); }
  .friends-sidebar-inner { position: static; max-height: calc(100vh - 92px); }
  .feed-intro { align-items: center; }
  .feed-intro h1 { font-size: 2.1rem; }
  .feed-intro p { font-size: .88rem; }
  .mobile-create-button { display: inline-flex; white-space: nowrap; }
  .profile-reminder { align-items: flex-start; flex-direction: column; }
  .feed-post { padding: 1.15rem; }
  .post-title { font-size: 1.6rem; }
  .post-footer { align-items: flex-start; flex-direction: column; }
  .post-actions { width: 100%; justify-content: flex-end; }
  .mobile-bottom-nav {
    position: fixed;
    z-index: 650;
    left: .75rem;
    right: .75rem;
    bottom: .7rem;
    height: 66px;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 24px;
    background: var(--surface-translucent);
    backdrop-filter: blur(18px);
    box-shadow: var(--shadow);
    overflow: hidden;
  }
  .mobile-nav-item { height: 100%; display: grid; place-items: center; align-content: center; gap: .12rem; border: 0; background: transparent; color: var(--text-muted); cursor: pointer; }
  .mobile-nav-item span { font-size: 1.25rem; line-height: 1; }
  .mobile-nav-item small { font-size: .63rem; font-weight: 700; }
  .mobile-nav-item.is-active { color: var(--text-primary); background: var(--accent-soft); }
  .mobile-create-nav { color: var(--accent); }

  .mobile-feed-switcher {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .35rem;
    margin: -.25rem 0 1rem;
    padding: .28rem;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-pill);
    background: var(--surface-secondary);
  }
  .mobile-feed-switcher-button {
    min-width: 0;
    min-height: 40px;
    padding: .55rem .7rem;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: .82rem;
    font-weight: 800;
    cursor: pointer;
  }
  .mobile-feed-switcher-button.is-active {
    background: var(--surface-elevated);
    color: var(--text-primary);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--background-deep) 16%, transparent);
  }
  .mobile-feed-switcher-button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
}

@media (min-width: 851px) {
  .mobile-feed-switcher { display: none; }
}

@media (max-width: 800px) {
  .navbar { padding: 1rem; }
  .features { grid-template-columns: 1fr; }
  .hero { margin-top: 4rem; }
  .hero-ctas { flex-direction: column; width: min(100%, 340px); margin-left: auto; margin-right: auto; }
  .visual-mockup { height: 320px; }
  .mockup-card { width: min(88%, 600px); }
  .form-container { margin: 2rem auto; padding: 1.5rem; }
  .theme-options { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .register-grid,
  .profile-form-grid { grid-template-columns: 1fr; }
  .register-span-2,
  .form-span-2 { grid-column: 1; }
}

@media (max-width: 560px) {
  .nav-links .btn-secondary { display: none; }
  .visual-mockup { height: 300px; }
  .mockup-card { width: 92%; min-height: 220px; padding: 1.35rem; }
  .showcase-title { max-width: calc(100% - 52px); font-size: clamp(1.25rem, 6vw, 1.65rem); }
  .showcase-description { min-height: 4.7em; margin-top: .6rem; font-size: .88rem; }
  .showcase-visual { top: 1.05rem; right: 1rem; width: 54px; height: 54px; transform: scale(.82); transform-origin: top right; }
  .mockup-lines { gap: .55rem; margin-top: .85rem; }
  .mockup-lines span { height: 6px; }
  .showcase-progress { bottom: 1rem; width: 58%; }
  .app-brand span:last-child { max-width: 135px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .feed-intro { align-items: flex-start; }
  .feed-intro > div { min-width: 0; }
  .mobile-create-button { min-height: 40px; padding: .62rem .8rem; font-size: .8rem; }
  .post-author-row { align-items: flex-start; }
  .match-badge { font-size: .65rem; }
  .modal-backdrop { padding: .45rem; align-items: end; }
  .modal-card { width: 100%; max-height: 92vh; border-radius: 26px 26px 14px 14px; padding: 1.1rem; }
  .theme-options { grid-template-columns: 1fr; }
  .modal-actions { flex-wrap: wrap; }
  .modal-actions .btn { flex: 1; }
}


/* ---------- Theme-specific finishing touches ---------- */
html[data-theme="original"] .btn-primary {
  box-shadow: 0 8px 24px rgba(99, 102, 241, .18);
}
html[data-theme="original"] .card,
html[data-theme="original"] .friends-sidebar-inner,
html[data-theme="original"] .modal-card,
html[data-theme="original"] .form-container {
  border-color: var(--border);
}
html[data-theme="original"] .app-header,
html[data-theme="original"] body > header:not(.app-header) {
  border-color: rgba(63, 63, 70, .8);
}
html[data-theme="classic"] .card,
html[data-theme="classic"] .friends-sidebar-inner,
html[data-theme="classic"] .form-container,
html[data-theme="classic"] .modal-card {
  box-shadow: var(--shadow-soft);
}



/* ---------- New-theme finishing touches (V2.6.3.1) ---------- */
html[data-theme="spaceglas"] .app-header,
html[data-theme="spaceglas"] body > header:not(.app-header),
html[data-theme="spaceglas"] .card,
html[data-theme="spaceglas"] .friends-sidebar-inner,
html[data-theme="spaceglas"] .modal-card,
html[data-theme="spaceglas"] .form-container,
html[data-theme="spaceglas"] .profile-search-results,
html[data-theme="spaceglas"] .mobile-bottom-nav {
  backdrop-filter: blur(20px) saturate(125%);
  -webkit-backdrop-filter: blur(20px) saturate(125%);
  border-color: color-mix(in srgb, var(--border) 76%, transparent);
}
html[data-theme="spaceglas"] .btn-primary {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 88%, white), var(--success));
  box-shadow: 0 10px 28px rgba(61, 242, 224, .12), inset 0 1px 0 rgba(255,255,255,.30);
}
html[data-theme="spaceglas"] .form-control:focus,
html[data-theme="spaceglas"] .theme-option.is-selected {
  box-shadow: 0 0 0 3px rgba(61, 242, 224, .10);
}

html[data-theme="neon-social"] .btn-primary {
  background: linear-gradient(135deg, #EE227D, #5C33F6);
  color: rgb(255, 255, 255);
  box-shadow: 0 10px 26px rgba(238,34,125,.16);
}
html[data-theme="neon-social"] .btn-primary:hover {
  background: linear-gradient(135deg, #FF4A9A, #6E49FF);
}
html[data-theme="neon-social"] .card:hover,
html[data-theme="neon-social"] .theme-option.is-selected,
html[data-theme="neon-social"] .conversation-row-shell.is-active {
  border-color: color-mix(in srgb, #EE227D 58%, #30C0B7);
}
html[data-theme="neon-social"] .notification-row.is-unread,
html[data-theme="neon-social"] .mobile-nav-item.is-active {
  background: linear-gradient(135deg, rgba(238,34,125,.12), rgba(48,192,183,.08));
}

html[data-theme="mint-orbit"] .card,
html[data-theme="mint-orbit"] .friends-sidebar-inner,
html[data-theme="mint-orbit"] .modal-card,
html[data-theme="mint-orbit"] .messages-inbox,
html[data-theme="mint-orbit"] .messages-chat {
  border-color: rgba(178,223,219,.16);
}
html[data-theme="mint-orbit"] .btn-primary {
  box-shadow: 0 9px 24px rgba(0,184,148,.13);
}
html[data-theme="mint-orbit"] .profile-search-item:hover,
html[data-theme="mint-orbit"] .conversation-row-shell:hover,
html[data-theme="mint-orbit"] .notification-row:hover {
  background: color-mix(in srgb, var(--surface-secondary) 86%, var(--accent) 14%);
}

html[data-theme="solar-circuit"] .btn-primary {
  font-weight: 850;
  box-shadow: 0 8px 22px rgba(182,255,59,.10);
}
html[data-theme="solar-circuit"] .app-topnav a.is-active,
html[data-theme="solar-circuit"] .mobile-nav-item.is-active,
html[data-theme="solar-circuit"] .theme-option.is-selected {
  color: var(--accent);
}
html[data-theme="solar-circuit"] .card,
html[data-theme="solar-circuit"] .friends-sidebar-inner,
html[data-theme="solar-circuit"] .modal-card,
html[data-theme="solar-circuit"] .form-control {
  border-color: color-mix(in srgb, var(--border-soft) 78%, var(--accent) 22%);
}

html[data-theme="lunar-cloud"] .card,
html[data-theme="lunar-cloud"] .friends-sidebar-inner,
html[data-theme="lunar-cloud"] .modal-card,
html[data-theme="lunar-cloud"] .form-container {
  box-shadow: 0 18px 48px rgba(7,12,18,.22), inset 0 1px 0 rgba(255,255,255,.025);
}
html[data-theme="lunar-cloud"] .btn-primary {
  background: linear-gradient(135deg, #C6DBEA, #D8C4A5);
  color: #18212C;
  box-shadow: 0 8px 22px rgba(198,219,234,.10);
}
html[data-theme="lunar-cloud"] .eyebrow,
html[data-theme="lunar-cloud"] .mobile-create-nav {
  color: #D8C4A5;
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme="spaceglas"] *,
  html[data-theme="neon-social"] *,
  html[data-theme="mint-orbit"] *,
  html[data-theme="solar-circuit"] *,
  html[data-theme="lunar-cloud"] * {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* =========================================================
   V2.2 — profiles, inbox and messaging
   Additive styles; existing v2.1 components remain intact.
   ========================================================= */

/* ---------- Profile search ---------- */
.profile-search-wrap {
  position: relative;
  min-width: 0;
}
.profile-search-results {
  position: absolute;
  z-index: 620;
  top: calc(100% + .55rem);
  left: 0;
  width: min(360px, 82vw);
  max-height: 420px;
  overflow: auto;
  padding: .45rem;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: var(--surface-elevated);
  box-shadow: var(--shadow-modal);
}
.profile-search-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .65rem;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}
.profile-search-item:hover,
.profile-search-item:focus-visible {
  background: var(--surface-secondary);
  outline: none;
}
.profile-search-empty {
  padding: .85rem;
  color: var(--text-muted);
  font-size: .82rem;
}

/* ---------- Inbox ---------- */
.conversation-row {
  position: relative;
  align-items: flex-start;
}
.conversation-row.is-active {
  background: var(--surface-secondary);
  box-shadow: inset 3px 0 0 var(--accent);
}
.conversation-row.has-unread .conversation-copy strong {
  color: var(--text-primary);
}
.conversation-copy {
  flex: 1;
  gap: .16rem;
}
.conversation-headline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  min-width: 0;
}
.conversation-headline strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.conversation-time {
  flex: 0 0 auto;
  font-size: .66rem !important;
}
.conversation-preview {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.unread-badge {
  flex: 0 0 auto;
  min-width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  padding: 0 .35rem;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--accent-contrast);
  font-size: .66rem;
  font-weight: 850;
}

/* ---------- Clickable author ---------- */
.post-author-button {
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  border-radius: 12px;
}
.post-author-button:hover strong { text-decoration: underline; }
.post-author-button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent);
  outline-offset: 4px;
}

/* ---------- Chat workspace ---------- */
.chat-workspace {
  grid-column: 2 / -1;
  align-self: start;
  position: sticky;
  top: 94px;
  height: calc(100vh - 112px);
  min-height: 520px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  overflow: hidden;
  padding: 0;
  border-color: var(--border-soft);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}
.chat-header {
  min-height: 74px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .8rem;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--surface-elevated) 92%, transparent);
}
.chat-back-button { display: none; }
.chat-person-button {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .25rem;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}
.chat-person-button:hover { background: var(--surface-secondary); }
.chat-header-avatar {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  font-weight: 850;
}
.chat-header-copy {
  min-width: 0;
  display: grid;
}
.chat-header-copy strong,
.chat-header-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-header-copy strong { font-size: .95rem; }
.chat-header-copy small { color: var(--text-muted); font-size: .73rem; }
.chat-message-list {
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: .42rem;
  padding: 1.25rem clamp(.8rem, 3vw, 2rem);
  scroll-behavior: smooth;
  scrollbar-width: thin;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--background) 24%, transparent), transparent 18%),
    var(--background-deep);
}
.chat-empty-state {
  margin: auto;
  max-width: 430px;
  padding: 1rem;
  color: var(--text-muted);
  text-align: center;
  font-size: .88rem;
}
.chat-date-divider {
  align-self: center;
  margin: .65rem 0;
  padding: .3rem .65rem;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  background: var(--surface-translucent);
  color: var(--text-muted);
  font-size: .68rem;
  font-weight: 750;
}
.chat-message-row {
  width: 100%;
  display: flex;
}
.chat-message-row.is-own { justify-content: flex-end; }
.chat-message-row.is-other { justify-content: flex-start; }
.chat-message-bubble {
  max-width: min(72%, 650px);
  padding: .68rem .82rem .45rem;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  background: var(--surface-secondary);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--background-deep) 16%, transparent);
}
.chat-message-row.is-own .chat-message-bubble {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: var(--accent);
  color: var(--accent-contrast);
  border-bottom-right-radius: 6px;
}
.chat-message-row.is-other .chat-message-bubble { border-bottom-left-radius: 6px; }
.chat-message-bubble p {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: inherit;
  font-size: .91rem;
  line-height: 1.5;
}
.chat-message-meta {
  display: flex;
  justify-content: flex-end;
  gap: .45rem;
  margin-top: .24rem;
  color: var(--text-muted);
  font-size: .62rem;
}
.chat-message-row.is-own .chat-message-meta {
  color: color-mix(in srgb, var(--accent-contrast) 72%, transparent);
}
.message-send-status { font-weight: 750; }
.chat-alert {
  margin: .65rem 1rem 0;
}
.chat-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: .75rem;
  padding: .85rem 1rem 1rem;
  border-top: 1px solid var(--border-soft);
  background: var(--surface-elevated);
}
.chat-input-shell {
  min-width: 0;
  display: grid;
  gap: .18rem;
  padding: .55rem .8rem .4rem;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--input-background);
}
.chat-input-shell:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.chat-input-shell textarea {
  width: 100%;
  min-height: 28px;
  max-height: 140px;
  resize: none;
  overflow-y: auto;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-primary);
  line-height: 1.45;
}
.chat-input-shell textarea::placeholder { color: var(--text-muted); }
.chat-input-shell small {
  justify-self: end;
  color: var(--text-muted);
  font-size: .62rem;
}
.chat-send-button { min-width: 94px; }

/* ---------- Public profile page ---------- */
.profile-app-header .profile-nav-link { text-decoration: none; }
.public-profile-shell {
  width: min(1120px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 2rem 0 5rem;
}
.public-profile-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.4rem;
  padding: clamp(1.25rem, 4vw, 2rem);
}
.public-profile-avatar {
  width: 112px;
  height: 112px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  border-radius: var(--radius-pill);
  background: linear-gradient(145deg, var(--surface-secondary), var(--accent-soft));
  font-size: 2.25rem;
  font-weight: 900;
}
.public-profile-identity h1 {
  margin: 0;
  font-size: clamp(2rem, 5vw, 3.6rem);
}
.public-profile-identity > p { margin-top: .35rem; }
.public-profile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin-top: 1.15rem;
}
.public-profile-metrics {
  min-width: 120px;
  display: grid;
  justify-items: end;
  align-content: center;
  gap: .9rem;
}
.public-profile-views {
  min-width: 110px;
  display: grid;
  justify-items: end;
  align-content: center;
}
.public-profile-views strong {
  font-size: 2rem;
  line-height: 1;
}
.public-profile-views span {
  margin-top: .25rem;
  color: var(--text-muted);
  font-size: .72rem;
}
.public-profile-grid {
  display: grid;
  grid-template-columns: minmax(280px, .85fr) minmax(0, 1.6fr);
  gap: 1rem;
  margin-top: 1rem;
}
.public-profile-info,
.public-profile-details { padding: 1.4rem; }
.public-profile-facts {
  display: grid;
  gap: .75rem;
  margin-top: 1.2rem;
}
.public-profile-facts > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .72rem;
  border-bottom: 1px solid var(--border-soft);
}
.public-profile-facts dt { color: var(--text-muted); font-size: .78rem; }
.public-profile-facts dd { text-align: right; font-weight: 750; font-size: .82rem; }
.public-profile-details {
  display: grid;
  gap: 0;
}
.public-profile-details article {
  padding: 1rem 0;
  border-bottom: 1px solid var(--border-soft);
}
.public-profile-details article:first-child { padding-top: 0; }
.public-profile-details article:last-child { padding-bottom: 0; border-bottom: 0; }
.public-profile-details p {
  white-space: pre-wrap;
  color: var(--text-primary);
  line-height: 1.75;
}
.public-profile-posts { margin-top: 2rem; }
.public-profile-section-title { margin-bottom: .9rem; }
.public-profile-section-title h2 { margin: 0; }
.profile-error-card { margin-top: 2rem; }
.profile-error-card .btn { margin-top: 1rem; }

@media (max-width: 1180px) {
  .chat-workspace { grid-column: 2; }
}

@media (max-width: 850px) {
  .chat-workspace {
    position: static;
    height: calc(100vh - 168px);
    min-height: 440px;
    border-radius: var(--radius-lg);
  }
  .chat-back-button { display: inline-grid; }
  .chat-header { grid-template-columns: auto minmax(0, 1fr) auto; }
  .chat-message-bubble { max-width: 84%; }
  .profile-app-header { grid-template-columns: 1fr auto; }
  .profile-app-header .app-topnav { display: none; }
  .public-profile-shell { width: min(100% - 1.2rem, 760px); padding-top: 1rem; }
  .public-profile-hero { grid-template-columns: auto minmax(0, 1fr); }
  .public-profile-metrics { grid-column: 1 / -1; justify-items: start; grid-auto-flow: column; align-items: center; gap: 1rem; }
  .public-profile-views { justify-items: start; display: flex; align-items: baseline; gap: .45rem; }
  .public-profile-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .chat-header { padding: .7rem; }
  .chat-header .btn { display: none; }
  .chat-message-list { padding: .85rem .65rem; }
  .chat-message-bubble { max-width: 90%; }
  .chat-composer { grid-template-columns: 1fr; gap: .5rem; padding: .65rem; }
  .chat-send-button { width: 100%; }
  .chat-input-shell small { display: none; }
  .public-profile-hero { grid-template-columns: 1fr; text-align: center; }
  .public-profile-avatar { margin: 0 auto; }
  .public-profile-actions { justify-content: center; }
  .public-profile-metrics { justify-content: center; justify-items: center; grid-auto-flow: row; }
  .public-profile-views { justify-content: center; justify-items: center; }
  .public-profile-facts > div { align-items: flex-start; flex-direction: column; gap: .2rem; }
  .public-profile-facts dd { text-align: left; }
}

/* =========================================================
   V2.3 — Dating discovery page
   Additive styles; v2.2 feed, profiles, inbox and messaging
   remain unchanged.
   ========================================================= */
.dating-page { min-height: 100vh; }
.dating-shell {
  width: min(1240px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 2rem 0 5rem;
}
.dating-intro {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.25rem;
}
.dating-intro h1 {
  margin: 0;
  font-size: clamp(2.2rem, 5vw, 3.8rem);
}
.dating-intro p {
  max-width: 650px;
  margin-top: .45rem;
}
.dating-result-summary {
  flex: 0 0 auto;
  min-width: 120px;
  display: grid;
  justify-items: end;
  padding-bottom: .3rem;
}
.dating-result-summary strong {
  font-size: 2rem;
  line-height: 1;
}
.dating-result-summary span {
  margin-top: .25rem;
  color: var(--text-muted);
  font-size: .78rem;
}
.dating-filter-card {
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}
.dating-filter-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.dating-filter-heading h2 {
  margin: 0;
  font-size: 1.35rem;
}
.dating-filter-grid {
  display: grid;
  grid-template-columns: minmax(210px, 1.5fr) repeat(2, minmax(145px, .8fr)) minmax(150px, .9fr) repeat(2, minmax(110px, .55fr)) minmax(150px, .9fr) auto;
  align-items: end;
  gap: .8rem;
}
.dating-filter-grid .form-group {
  margin: 0;
  min-width: 0;
}
.dating-filter-grid label {
  font-size: .73rem;
}
.dating-filter-grid .form-control {
  min-height: 44px;
}
.dating-filter-submit {
  min-height: 44px;
  white-space: nowrap;
}
.dating-alert:empty { display: none; }
.dating-alert { margin-bottom: 1rem; }
.dating-profile-grid {
  display: grid;
}
.dating-profile-card {
  min-width: 0;
  overflow: hidden;
  padding: 0;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.dating-profile-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  box-shadow: var(--shadow);
}
.dating-profile-media {
  position: relative;
  display: grid;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: linear-gradient(145deg, var(--surface-secondary), var(--accent-soft));
  text-decoration: none;
}
.dating-profile-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.dating-profile-image-fallback {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--text-primary);
  font-size: clamp(3rem, 8vw, 5.5rem);
  font-weight: 900;
  background:
    radial-gradient(circle at 50% 35%, var(--accent-soft), transparent 45%),
    var(--surface-secondary);
}
.dating-profile-card-body {
  display: grid;
  gap: .95rem;
  padding: 1rem;
}
.dating-profile-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
  font-size: 1.18rem;
  font-weight: 820;
  letter-spacing: -.02em;
  text-decoration: none;
}
.dating-profile-name:hover { text-decoration: underline; }
.dating-profile-facts {
  display: grid;
  gap: .5rem;
}
.dating-profile-facts > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .8rem;
  padding-bottom: .45rem;
  border-bottom: 1px solid var(--border-soft);
}
.dating-profile-facts > div:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.dating-profile-facts dt {
  color: var(--text-muted);
  font-size: .72rem;
}
.dating-profile-facts dd {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
  font-size: .78rem;
  font-weight: 750;
  text-align: right;
}
.dating-profile-actions { padding-top: .15rem; }
.dating-loading,
.dating-empty {
  grid-column: 1 / -1;
  padding: 3rem 1.5rem;
  text-align: center;
}
.dating-empty p { margin: .45rem auto 1.15rem; }

@media (max-width: 1180px) {
  .dating-filter-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .dating-filter-search { grid-column: span 2; }
  .dating-filter-submit { width: 100%; }
}

@media (max-width: 850px) {
  .dating-shell {
    width: min(100% - 1.2rem, 760px);
    padding-top: 1rem;
  }
  .dating-back-link { display: none; }
  .dating-intro { align-items: flex-start; }
  .dating-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dating-filter-search { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .dating-intro {
    align-items: flex-start;
    flex-direction: column;
    gap: .8rem;
  }
  .dating-result-summary {
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: .4rem;
    justify-items: start;
  }
  .dating-result-summary strong { font-size: 1.4rem; }
  .dating-filter-card { padding: 1rem; }
  .dating-filter-heading { align-items: flex-start; flex-direction: column; }
  .dating-filter-grid { grid-template-columns: 1fr; }
  .dating-filter-search { grid-column: 1; }
  .dating-profile-card-body { padding: .8rem; gap: .75rem; }
  .dating-profile-name { font-size: 1rem; }
  .dating-profile-facts > div {
    align-items: flex-start;
    flex-direction: column;
    gap: .05rem;
  }
  .dating-profile-facts dd {
    max-width: 100%;
    text-align: left;
  }
  .dating-profile-actions .btn {
    min-height: 40px;
    padding: .62rem .7rem;
    font-size: .78rem;
  }
}

/* ---------- V2.4 profile images, presence, notifications & favorites ---------- */
.notification-button { position: relative; }
.notification-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  padding: 0 5px;
  border: 2px solid var(--background);
  border-radius: 999px;
  background: var(--heart);
  color: rgb(255, 255, 255);
  font-size: .62rem;
  font-weight: 900;
  line-height: 1;
}
.online-status-text { display: inline-flex; align-items: center; gap: .4rem; color: var(--text-secondary); font-size: .8rem; }
.online-dot { width: 8px; height: 8px; display: inline-block; border-radius: 999px; background: #22c55e; box-shadow: 0 0 0 3px color-mix(in srgb, #22c55e 15%, transparent); }
.chat-typing-indicator { color: var(--accent) !important; font-weight: 750; }

.profile-image-picker { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 1rem; align-items: center; }
.profile-image-picker.compact-picker { grid-template-columns: 96px minmax(0, 1fr); }
.image-preview {
  width: 112px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px dashed var(--border);
  border-radius: 18px;
  background: var(--surface-secondary);
  color: var(--text-muted);
  font-size: .72rem;
  text-align: center;
}
.compact-picker .image-preview { width: 96px; }
.image-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.optional-label { color: var(--text-muted); font-weight: 500; }
.profile-image-upload-card {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(220px, .7fr) minmax(320px, 1fr);
  gap: 1.25rem;
  align-items: center;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-soft);
}
.profile-image-upload-card h2 { margin: 0 0 .35rem; font-size: 1.2rem; }
.profile-image-upload-card p { font-size: .8rem; }
.profile-image-upload-controls { display: grid; gap: .7rem; }
.public-profile-avatar { overflow: hidden; }
.public-profile-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.public-profile-actions .is-selected { border-color: var(--heart); color: var(--heart); background: color-mix(in srgb, var(--heart) 8%, var(--surface)); }

.toggle-row { display: inline-flex; align-items: center; gap: .55rem; color: var(--text-primary); font-size: .82rem; font-weight: 700; cursor: pointer; }
.toggle-row input { width: 18px; height: 18px; accent-color: var(--accent); }

.notifications-modal-card { width: min(100%, 680px); }
.notifications-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.notifications-toolbar p { font-size: .82rem; }
.notification-list { display: grid; gap: .45rem; }
.notification-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}
.notification-row:hover { background: var(--surface-secondary); }
.notification-row.is-unread { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: var(--accent-soft); }

.favorites-list { display: grid; gap: 1rem; }
.favorite-profile-card { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: 1rem; }
.favorite-profile-avatar {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: linear-gradient(145deg, var(--surface-secondary), var(--accent-soft));
  font-size: 1.7rem;
  font-weight: 900;
}
.favorite-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.favorite-profile-copy h2 { margin: 0; font-size: 1.2rem; }
.favorite-profile-copy p { margin-top: .25rem; font-size: .82rem; }
.favorite-profile-actions { display: flex; gap: .55rem; flex-wrap: wrap; justify-content: flex-end; }

@media (max-width: 850px) {
  .mobile-bottom-nav { grid-template-columns: repeat(6, 1fr); }
  .favorite-profile-card { grid-template-columns: 60px minmax(0, 1fr); }
  .favorite-profile-avatar { width: 60px; height: 60px; }
  .favorite-profile-actions { grid-column: 1 / -1; justify-content: stretch; }
  .favorite-profile-actions .btn { flex: 1; }
  .notifications-toolbar { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 700px) {
  .profile-image-picker,
  .profile-image-picker.compact-picker,
  .profile-image-upload-card { grid-template-columns: 1fr; }
  .image-preview,
  .compact-picker .image-preview { width: min(100%, 220px); }
  .profile-image-upload-card { align-items: stretch; }
}

@media (max-width: 850px) { .app-header-actions .notification-button { display: inline-grid; } }

/* =========================================================
   V2.4.2 — inbox, PM actions, presence dots, dating layout,
   image-like notifications and swipe album.
   ========================================================= */

/* Header: keep Settings, use the former profile shortcut for Inbox. */
.header-inbox-button { position: relative; }
.header-inbox-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  padding: 0 5px;
  border: 2px solid var(--background);
  border-radius: 999px;
  background: var(--heart);
  color: rgb(255, 255, 255);
  font-size: .62rem;
  font-weight: 900;
  line-height: 1;
}
.friends-sidebar.inbox-highlight .friends-sidebar-inner {
  border-color: color-mix(in srgb, var(--accent) 62%, var(--border));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent), var(--shadow-soft);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

/* Reusable online/offline overlay dot. */
.presence-avatar { position: relative; }
.presence-avatar > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: inherit;
}
.presence-dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  z-index: 3;
  width: 11px;
  height: 11px;
  border: 2px solid var(--surface);
  border-radius: 999px;
  box-shadow: 0 1px 5px color-mix(in srgb, var(--background-deep) 30%, transparent);
}
.presence-dot.is-online { background: #22c55e; }
.presence-dot.is-offline { background: #8b8b98; }
.person-avatar .presence-dot { border-color: var(--surface); }

/* Chat participant actions menu. */
.chat-actions-menu-wrap {
  position: relative;
  justify-self: end;
}
.chat-more-button {
  min-width: 44px;
  letter-spacing: .05em;
  font-size: 1rem;
  line-height: 1;
}
.chat-actions-menu {
  position: absolute;
  top: calc(100% + .45rem);
  right: 0;
  z-index: 40;
  width: 180px;
  overflow: hidden;
  padding: .35rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-elevated);
  box-shadow: var(--shadow);
}
.chat-actions-menu[hidden] { display: none; }
.chat-actions-menu button {
  width: 100%;
  padding: .7rem .75rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-primary);
  text-align: left;
  font: inherit;
  font-size: .82rem;
  font-weight: 720;
  cursor: pointer;
}
.chat-actions-menu button:hover { background: var(--surface-secondary); }
.chat-actions-menu .danger-action { color: var(--danger); }
.chat-actions-menu .danger-action:hover { background: color-mix(in srgb, var(--danger) 9%, var(--surface-secondary)); }

/* Real profile photos beside PM bubbles. */
.chat-message-row {
  align-items: flex-end;
  gap: .45rem;
}
.chat-message-avatar {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: var(--surface-secondary);
  font-size: .68rem;
  font-weight: 850;
}
.chat-message-avatar .presence-dot {
  width: 8px;
  height: 8px;
  border-width: 1.5px;
}
.chat-header-avatar { overflow: visible; }
.chat-header-avatar > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: inherit;
}
.chat-header-avatar .presence-dot {
  width: 12px;
  height: 12px;
  border-color: var(--surface-elevated);
}

/* Dating: stable fixed header and filter grid that never pushes the submit outside the card. */
.dating-page { overflow-x: clip; }
.dating-page .app-header {
  position: sticky;
  top: 0;
  z-index: 60;
  grid-template-columns: 220px minmax(0, 1fr) 220px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  backdrop-filter: blur(14px);
}
.dating-header-actions {
  min-width: 220px;
  justify-content: flex-end;
}
.dating-filter-card { overflow: hidden; }
.dating-filter-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: 100%;
}
.dating-filter-search { grid-column: span 2; }
.dating-filter-grid .form-group:nth-of-type(7) { grid-column: span 2; }
.dating-filter-submit {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.dating-presence-dot {
  right: 12px;
  bottom: 12px;
  width: 14px;
  height: 14px;
  border: 3px solid var(--surface);
}

/* Profile-page avatar has no overlay presence dot; status remains in the text row. */
.public-profile-avatar { position: relative; overflow: hidden; }
.public-profile-avatar > img { border-radius: inherit; }

/* Swipe album expands from the right side of the profile hero. */
.public-profile-hero {
  position: relative;
  overflow: hidden;
  transition: padding-right 240ms ease;
}
.public-profile-hero.is-options-open {
  overflow: visible;
  z-index: 120;
}
.public-profile-views {
  transition: opacity 180ms ease, transform 180ms ease;
}
.public-profile-hero.is-album-open {
  padding-right: calc(min(52%, 560px) + 1.4rem);
}
.public-profile-hero.is-album-open .public-profile-views {
  opacity: 0;
  transform: translateX(12px);
  pointer-events: none;
}
.profile-album-panel {
  position: absolute;
  inset: 0 0 0 auto;
  z-index: 15;
  width: min(52%, 560px);
  min-width: 380px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: .75rem;
  padding: 1rem;
  border-left: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-elevated) 97%, transparent);
  box-shadow: -20px 0 38px color-mix(in srgb, var(--background-deep) 32%, transparent);
  transform: translateX(102%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform 240ms ease, opacity 180ms ease, visibility 0s linear 240ms;
}
.public-profile-hero.is-album-open .profile-album-panel {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
.profile-album-header,
.profile-album-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
}
.profile-album-header > div { display: grid; gap: .08rem; }
.profile-album-header strong { font-size: 1.08rem; }
.profile-album-stage {
  min-height: 230px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 38px;
  align-items: center;
  gap: .55rem;
  touch-action: pan-y;
}
.profile-album-media {
  width: 100%;
  height: 100%;
  min-height: 230px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  background: var(--background-deep);
}
.profile-album-media img {
  width: 100%;
  height: 100%;
  max-height: 390px;
  display: block;
  object-fit: contain;
}
.profile-album-empty {
  padding: 1.2rem;
  color: var(--text-muted);
  text-align: center;
  font-size: .82rem;
}
.profile-album-nav {
  width: 38px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: var(--surface-secondary);
  color: var(--text-primary);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
}
.profile-album-nav:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); }
.profile-album-nav:disabled { opacity: .28; cursor: default; }
.profile-album-footer {
  color: var(--text-muted);
  font-size: .75rem;
}
.profile-album-like {
  min-width: 62px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: .45rem .65rem;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: var(--surface-secondary);
  color: var(--text-primary);
  cursor: pointer;
  font-weight: 800;
}
.profile-album-like:hover { border-color: color-mix(in srgb, var(--heart) 55%, var(--border)); }
.profile-album-like.is-selected {
  border-color: color-mix(in srgb, var(--heart) 65%, var(--border));
  color: var(--heart);
  background: color-mix(in srgb, var(--heart) 9%, var(--surface));
}
.profile-album-heart { font-size: 1.05rem; }

@media (max-width: 1180px) {
  .dating-filter-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dating-filter-search { grid-column: span 2; }
  .dating-filter-grid .form-group:nth-of-type(7) { grid-column: span 1; }
  .dating-filter-submit { grid-column: 4; }
}

@media (max-width: 850px) {
  .dating-page .app-header { grid-template-columns: 1fr auto; }
  .dating-header-actions { min-width: 0; }
  .dating-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dating-filter-search,
  .dating-filter-grid .form-group:nth-of-type(7),
  .dating-filter-submit { grid-column: 1 / -1; }

  .public-profile-hero.is-album-open { padding-right: clamp(1.25rem, 4vw, 2rem); }
  .profile-album-panel {
    width: 100%;
    min-width: 0;
    border-left: 0;
  }
}

@media (max-width: 560px) {
  .dating-filter-grid { grid-template-columns: 1fr; }
  .dating-filter-search,
  .dating-filter-grid .form-group:nth-of-type(7),
  .dating-filter-submit { grid-column: 1; }

  .chat-message-avatar { width: 24px; height: 24px; flex-basis: 24px; }
  .chat-message-bubble { max-width: calc(90% - 28px); }
  .profile-album-panel { padding: .75rem; }
  .profile-album-stage { grid-template-columns: 32px minmax(0, 1fr) 32px; gap: .35rem; }
  .profile-album-nav { width: 32px; height: 42px; }
}


/* =========================================================
   V2.4.2.1 — unified authenticated header + location picker
   ========================================================= */
.header-user-avatar-button {
  width: 42px;
  height: 42px;
  padding: 0;
  overflow: hidden;
  border-radius: 50%;
  flex: 0 0 42px;
}
.header-user-avatar-button img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.header-user-avatar-button .avatar-fallback {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-weight: 850;
}
.shared-auth-header .profile-nav-link { text-decoration: none; }
.location-autocomplete { position: relative; }
.location-results {
  position: absolute;
  z-index: 80;
  top: calc(100% - .05rem);
  left: 0;
  right: 0;
  max-height: 260px;
  overflow-y: auto;
  padding: .4rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-elevated);
  box-shadow: var(--shadow-modal);
}
.location-result-item {
  width: 100%;
  display: grid;
  gap: .1rem;
  padding: .65rem .7rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}
.location-result-item:hover,
.location-result-item:focus-visible { background: var(--surface-secondary); outline: none; }
.location-result-item strong { font-size: .88rem; }
.location-result-item small,
.location-result-empty { color: var(--text-muted); font-size: .75rem; }
.location-result-empty { padding: .7rem; }
@media (max-width: 850px) {
  .profile-page .shared-auth-header .header-inbox-button,
  .profile-page .shared-auth-header .header-user-avatar-button,
  .dating-page .shared-auth-header .header-inbox-button,
  .dating-page .shared-auth-header .header-user-avatar-button { display: inline-grid; }
  .profile-page .shared-auth-header .header-create-button,
  .dating-page .shared-auth-header .header-create-button,
  .profile-page .shared-auth-header .profile-search-wrap { display: none; }
}

/* V2.4.2.1: dating now follows the same fixed header geometry as other authenticated pages. */
.dating-page .shared-auth-header {
  position: fixed;
  inset: 0 0 auto 0;
  grid-template-columns: 250px minmax(300px, 1fr) auto;
  background: var(--header-bg);
  backdrop-filter: blur(18px);
}
.dating-page .shared-auth-header .dating-header-actions { min-width: 0; }
@media (max-width: 850px) {
  .dating-page .shared-auth-header { grid-template-columns: 1fr auto; }
}

/* =========================================================
   V2.5 — stable shared header, reusable message selection,
   dedicated messages page and admin dashboard.
   ========================================================= */

.btn-danger {
  background: color-mix(in srgb, var(--danger) 14%, var(--surface));
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 42%, var(--border));
}
.btn-danger:hover {
  background: color-mix(in srgb, var(--danger) 22%, var(--surface-secondary));
  border-color: color-mix(in srgb, var(--danger) 60%, var(--border));
}

/* Dating keeps the same search-column width as app/profile without showing it. */
.header-search-spacer {
  visibility: hidden;
  pointer-events: none;
  user-select: none;
}

/* Reusable inbox/conversation selection component. */
.message-selection-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .55rem;
  margin-bottom: .55rem;
  padding: .55rem;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border-soft));
  border-radius: 13px;
  background: var(--accent-soft);
}
.message-selection-toolbar[hidden] { display: none; }
.message-selection-count {
  color: var(--text-secondary);
  font-size: .73rem;
  font-weight: 800;
}
.conversation-list-component { display: grid; gap: .32rem; }
.conversation-row-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .18rem;
  min-width: 0;
  border-radius: 14px;
  transition: background var(--transition), box-shadow var(--transition);
}
.conversation-row-shell:hover { background: var(--surface-secondary); }
.conversation-row-shell.is-active {
  background: var(--surface-secondary);
  box-shadow: inset 3px 0 0 var(--accent);
}
.conversation-row-shell.is-selected {
  background: var(--accent-soft);
  box-shadow: inset 3px 0 0 var(--accent);
}
.conversation-row-shell.has-unread .conversation-copy strong { color: var(--text-primary); }
.conversation-row-shell:has(.conversation-select-control:not([hidden])) {
  grid-template-columns: auto minmax(0, 1fr) auto;
}
.conversation-main-button {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .55rem .35rem .55rem .55rem;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}
.conversation-main-button:focus-visible,
.conversation-more-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.conversation-select-control {
  display: grid;
  place-items: center;
  padding-left: .55rem;
}
.conversation-select-control[hidden] { display: none; }
.conversation-select-control input,
.message-item-checkbox input {
  width: 17px;
  height: 17px;
  accent-color: var(--accent);
  cursor: pointer;
}
.conversation-actions-wrap,
.message-item-actions-wrap {
  position: relative;
  flex: 0 0 auto;
}
.conversation-more-button,
.message-item-more {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-color: transparent;
  background: transparent;
  color: var(--text-muted);
  font-size: 1.05rem;
}
.conversation-row-shell:hover .conversation-more-button,
.message-selectable-row:hover .message-item-more,
.conversation-more-button[aria-expanded="true"],
.message-item-more[aria-expanded="true"] {
  color: var(--text-primary);
  background: var(--surface-elevated);
  border-color: var(--border-soft);
}
.conversation-actions-menu {
  position: absolute;
  top: calc(100% + .25rem);
  right: 0;
  z-index: 90;
  width: 150px;
  padding: .3rem;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface-elevated);
  box-shadow: var(--shadow-modal);
}
.conversation-actions-menu[hidden] { display: none; }
.conversation-actions-menu button {
  width: 100%;
  padding: .62rem .65rem;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-primary);
  text-align: left;
  font: inherit;
  font-size: .78rem;
  font-weight: 720;
  cursor: pointer;
}
.conversation-actions-menu button:hover { background: var(--surface-secondary); }
.conversation-actions-menu .danger-action { color: var(--danger); }
.conversation-actions-menu .danger-action:hover { background: color-mix(in srgb, var(--danger) 9%, var(--surface-secondary)); }

/* Dedicated messages page. */
.messages-page { min-height: 100vh; overflow-x: hidden; }
.messages-shell {
  width: min(1180px, calc(100% - 2rem));
  min-height: calc(100vh - 110px);
  margin: 0 auto;
  padding: 1.6rem 0 3rem;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 1.1rem;
}
.messages-inbox,
.messages-chat {
  min-width: 0;
  padding: 1rem;
  transform: none !important;
}
.messages-inbox {
  align-self: start;
  position: sticky;
  top: 92px;
  max-height: calc(100vh - 112px);
  overflow: visible;
}
.messages-inbox-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .85rem;
}
.messages-inbox-heading h1 { margin: .1rem 0 0; font-size: 1.45rem; }
.messages-count {
  min-width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  padding: 0 .4rem;
  border-radius: 999px;
  background: var(--surface-secondary);
  color: var(--text-secondary);
  font-size: .75rem;
  font-weight: 800;
}
.messages-conversation-list {
  max-height: calc(100vh - 190px);
  overflow-y: auto;
  padding-right: .15rem;
  scrollbar-width: thin;
}
.messages-chat {
  min-height: calc(100vh - 118px);
  display: grid;
  padding: 0;
  overflow: visible;
}
.messages-empty-chat {
  min-height: 540px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: .55rem;
  padding: 2rem;
  text-align: center;
  color: var(--text-secondary);
}
.messages-empty-chat h2 { margin: 0; color: var(--text-primary); }
.messages-empty-chat p { max-width: 420px; }
.messages-empty-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 1.5rem;
}
.messages-chat-active {
  min-height: calc(100vh - 118px);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
}
.messages-chat-active[hidden] { display: none; }
.messages-chat-header {
  position: sticky;
  top: 74px;
  z-index: 35;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  backdrop-filter: blur(14px);
}
.message-item-selection-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .65rem 1rem;
  border-bottom: 1px solid var(--border-soft);
  background: var(--accent-soft);
  color: var(--text-secondary);
  font-size: .78rem;
  font-weight: 800;
}
.message-item-selection-toolbar[hidden] { display: none; }
.message-item-selection-toolbar > div { display: flex; gap: .5rem; }
.messages-thread {
  min-height: 430px;
  max-height: calc(100vh - 285px);
  overflow-y: auto;
  padding: 1.2rem 1rem;
  scrollbar-width: thin;
}
.messages-composer {
  position: sticky;
  bottom: 0;
  z-index: 20;
  background: var(--surface);
}
.message-selectable-row { position: relative; }
.message-selectable-row.is-selected .chat-message-bubble {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 52%, transparent);
}
.message-item-checkbox {
  align-self: center;
  display: grid;
  place-items: center;
  padding: .25rem;
}
.message-item-checkbox[hidden] { display: none; }
.message-bubble-actions-layout {
  display: flex;
  align-items: flex-end;
  gap: .3rem;
  max-width: 78%;
}
.message-bubble-actions-layout .chat-message-bubble { max-width: 100%; }
.chat-message-row.is-own .message-bubble-actions-layout { flex-direction: row; justify-content: flex-end; }
.chat-message-row.is-other .message-bubble-actions-layout { flex-direction: row-reverse; justify-content: flex-end; }
.message-item-menu {
  top: calc(100% + .25rem);
  width: 145px;
  max-width: min(145px, calc(100vw - 2rem));
}
.message-item-menu.opens-up { top: auto; bottom: calc(100% + .25rem); }
.chat-message-row.is-own .message-item-menu { right: 0; left: auto; }
.chat-message-row.is-other .message-item-menu { left: 0; right: auto; }
.messages-thread { overflow-x: hidden; }
.header-inbox-button.is-current {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
  background: var(--accent-soft);
  color: var(--accent);
}

/* Admin dashboard. */
.admin-page { min-height: 100vh; }
.admin-shell {
  width: min(1240px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 1.8rem 0 5rem;
}
.admin-intro {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.2rem;
}
.admin-intro h1 { margin: .05rem 0 .25rem; font-size: clamp(2rem, 4vw, 3rem); }
.admin-stat-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .85rem;
  margin-bottom: .9rem;
}
.admin-stat-card {
  min-width: 0;
  padding: 1rem;
  transform: none !important;
}
.admin-stat-card span,
.admin-stat-card small {
  display: block;
  color: var(--text-muted);
  font-size: .72rem;
}
.admin-stat-card strong {
  display: block;
  margin: .25rem 0 .2rem;
  font-size: clamp(1.7rem, 3vw, 2.35rem);
  line-height: 1;
}
.admin-grid-two {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, .8fr);
  gap: .9rem;
  margin-bottom: .9rem;
}
.admin-panel-card {
  margin-bottom: .9rem;
  padding: 1.2rem;
  transform: none !important;
}
.admin-card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.admin-card-heading h2 { margin: .05rem 0 0; font-size: 1.25rem; }
.admin-card-heading > small { color: var(--text-muted); }
.admin-registration-chart {
  min-height: 230px;
  display: grid;
  grid-template-columns: repeat(14, minmax(18px, 1fr));
  align-items: end;
  gap: .45rem;
  padding-top: .5rem;
}
.admin-chart-column {
  min-width: 0;
  height: 210px;
  display: grid;
  grid-template-rows: 24px minmax(0, 1fr) 22px;
  gap: .3rem;
  align-items: end;
  text-align: center;
}
.admin-chart-column strong { font-size: .7rem; color: var(--text-secondary); }
.admin-chart-column small { font-size: .6rem; color: var(--text-muted); text-transform: uppercase; }
.admin-chart-track {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-radius: 8px;
  background: var(--surface-secondary);
}
.admin-chart-track span {
  width: 100%;
  min-height: 5px;
  border-radius: 8px 8px 0 0;
  background: var(--accent);
}
.health-pill,
.admin-status-pill {
  display: inline-flex;
  align-items: center;
  width: max-content;
  padding: .3rem .55rem;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: var(--surface-secondary);
  color: var(--text-secondary);
  font-size: .68rem;
  font-weight: 800;
}
.health-pill.is-ok,
.admin-status-pill.status-active,
.admin-status-pill.status-resolved {
  border-color: color-mix(in srgb, var(--success) 42%, var(--border));
  background: color-mix(in srgb, var(--success) 10%, var(--surface));
  color: color-mix(in srgb, var(--success) 78%, var(--text-primary));
}
.health-pill.is-error,
.admin-status-pill.status-suspended,
.admin-status-pill.status-deactivated {
  border-color: color-mix(in srgb, var(--danger) 42%, var(--border));
  background: color-mix(in srgb, var(--danger) 10%, var(--surface));
  color: var(--danger);
}
.admin-status-pill.status-open {
  border-color: color-mix(in srgb, var(--warning) 45%, var(--border));
  background: color-mix(in srgb, var(--warning) 10%, var(--surface));
}
.admin-health-list { display: grid; gap: .55rem; }
.admin-health-list > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .55rem;
  border-bottom: 1px solid var(--border-soft);
}
.admin-health-list dt { color: var(--text-muted); font-size: .76rem; }
.admin-health-list dd { text-align: right; font-size: .78rem; font-weight: 720; }
.admin-users-heading { align-items: end; }
.admin-search-form {
  width: min(100%, 470px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .55rem;
}
.admin-search-form .form-control { min-height: 42px; }
.admin-table-wrap { overflow-x: auto; }
.admin-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}
.admin-table th,
.admin-table td {
  padding: .75rem .65rem;
  border-bottom: 1px solid var(--border-soft);
  text-align: left;
  vertical-align: middle;
  font-size: .78rem;
}
.admin-table th { color: var(--text-muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; }
.admin-table td strong,
.admin-table td small { display: block; }
.admin-table td small { margin-top: .12rem; color: var(--text-muted); }
.admin-status-select { min-height: 36px; padding: .45rem .6rem; font-size: .75rem; }
.admin-report-filter { width: 150px; min-height: 40px; padding: .5rem .65rem; }
.admin-report-list { display: grid; gap: .7rem; }
.admin-report-item {
  padding: .9rem;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: var(--surface-secondary);
}
.admin-report-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}
.admin-report-heading strong,
.admin-report-heading small { display: block; }
.admin-report-heading small { margin-top: .15rem; color: var(--text-muted); font-size: .7rem; }
.admin-report-reason { margin: .65rem 0 .45rem !important; color: var(--text-primary); font-weight: 760; }
.admin-report-content {
  max-height: 110px;
  overflow: auto;
  padding: .7rem;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text-secondary);
  font-size: .78rem;
  white-space: pre-wrap;
}
.admin-report-actions { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .7rem; }


.admin-email-template-preview {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-soft);
}
.admin-email-template-preview-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .8rem;
}
.admin-email-template-preview-heading h3 { margin: .08rem 0 0; font-size: 1rem; }
.admin-email-template-preview-heading small { color: var(--text-muted); }
.admin-email-template-preview-subject {
  display: grid;
  gap: .2rem;
  margin-bottom: .65rem;
  padding: .7rem .8rem;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: var(--surface-secondary);
}
.admin-email-template-preview-subject span {
  color: var(--text-muted);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.admin-email-template-preview-subject strong { overflow-wrap: anywhere; }
.admin-email-template-preview-resizer {
  width: 100%;
  height: 520px;
  min-height: 360px;
  max-height: 85vh;
  resize: vertical;
  overflow: auto;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: #fff;
}
.admin-email-template-preview-frame {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100%;
  border: 0;
  border-radius: 11px;
  background: #fff;
}

@media (max-width: 1050px) {
  .messages-shell { grid-template-columns: 270px minmax(0, 1fr); }
  .admin-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .admin-grid-two { grid-template-columns: 1fr; }
}

@media (max-width: 850px) {
  .dating-page .shared-auth-header .profile-search-wrap,
  .messages-page .shared-auth-header .profile-search-wrap,
  .admin-page .shared-auth-header .profile-search-wrap { display: none; }

  .messages-page .shared-auth-header,
  .admin-page .shared-auth-header { grid-template-columns: 1fr auto; }
  .messages-page .shared-auth-header .app-topnav,
  .admin-page .shared-auth-header .app-topnav { display: none; }
  .messages-page .shared-auth-header .header-create-button,
  .admin-page .shared-auth-header .header-create-button { display: none; }

  .messages-shell {
    width: min(100% - 1rem, 720px);
    grid-template-columns: 1fr;
    padding-top: .8rem;
  }
  .messages-inbox {
    position: static;
    max-height: none;
  }
  .messages-conversation-list { max-height: 310px; }
  .messages-chat { min-height: 580px; }
  .messages-chat-active { min-height: 580px; }
  .messages-chat-header { top: 68px; }
  .messages-thread { max-height: 58vh; }
  .message-bubble-actions-layout { max-width: 88%; }

  .admin-shell { width: min(100% - 1rem, 760px); padding-top: 1rem; }
  .admin-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-card-heading,
  .admin-users-heading { align-items: flex-start; flex-direction: column; }
  .admin-search-form { width: 100%; }
  .admin-registration-chart { overflow-x: auto; grid-template-columns: repeat(14, 42px); padding-bottom: .4rem; }
}

@media (max-width: 560px) {
  .message-selection-toolbar,
  .message-item-selection-toolbar { align-items: stretch; flex-direction: column; }
  .message-item-selection-toolbar > div { width: 100%; }
  .message-item-selection-toolbar .btn { flex: 1; }
  .messages-shell { width: calc(100% - .6rem); }
  .messages-inbox, .messages-chat { border-radius: 16px; }
  .message-bubble-actions-layout { max-width: 92%; }
  .message-item-more { width: 30px; min-width: 30px; height: 30px; }
  .admin-stat-grid { grid-template-columns: 1fr; }
  .admin-intro { align-items: flex-start; flex-direction: column; }
  .admin-search-form { grid-template-columns: 1fr; }
  .admin-report-heading { flex-direction: column; }
}

@media (max-width: 850px) {
  .messages-page .shared-auth-header .header-inbox-button,
  .messages-page .shared-auth-header .header-user-avatar-button,
  .admin-page .shared-auth-header .header-inbox-button,
  .admin-page .shared-auth-header .header-user-avatar-button { display: inline-grid; }
}

/* V2.5 admin request-log status helpers */
.admin-table .status-ok { color: var(--success, #68d391); font-weight: 700; }
.admin-table .status-warning { color: var(--warning, #f6c177); font-weight: 700; }
.admin-table .status-danger { color: var(--danger, #ff6b81); font-weight: 700; }

/* =========================================================
   V2.5.1 — visit history, unique views, Swedish locations,
   stable avatars, mobile profile navigation and post details.
   ========================================================= */

/* Every avatar keeps a fixed circular crop after an image upload. */
.large-avatar,
.person-avatar,
.post-avatar,
.chat-header-avatar,
.header-user-avatar-button,
.public-profile-avatar {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
}
.large-avatar,
.person-avatar,
.post-avatar,
.chat-header-avatar,
.header-user-avatar-button { overflow: hidden; }
.large-avatar > img,
.person-avatar > img,
.post-avatar > img,
.chat-header-avatar > img,
.header-user-avatar-button > img,
.public-profile-avatar > img {
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 50%;
}
/* Presence dots are allowed outside the crop while the image itself stays circular. */
.chat-header-avatar.presence-avatar,
.person-avatar.presence-avatar { overflow: visible; }
.chat-header-avatar.presence-avatar > img,
.person-avatar.presence-avatar > img { clip-path: circle(50% at 50% 50%); }
.public-profile-avatar { overflow: hidden; }
.person-suggestion .person-avatar { border-radius: 50%; }

.mini-post-link {
  color: var(--text-primary);
  text-decoration: none;
  border: 1px solid transparent;
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
}
.mini-post-link:hover {
  background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface-secondary));
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border-soft));
  transform: translateY(-1px);
}
.recent-profiles-card h3 { margin-top: .05rem; font-size: 1.15rem; }
.recent-profile-list { display: grid; gap: .35rem; margin-top: .75rem; }
.recent-profile-row { padding: .45rem; }
.recent-profile-row .person-avatar { width: 38px; height: 38px; flex-basis: 38px; }

.post-location-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem;
}
.post-title-link { color: inherit; text-decoration: none; }
.post-title-link:hover { color: var(--accent); }

.post-detail-shell {
  width: min(100% - 2rem, 820px);
  margin: 0 auto;
  padding: 2rem 0 5rem;
}
.post-back-link {
  display: inline-flex;
  margin-bottom: 1rem;
  color: var(--text-secondary);
  font-weight: 750;
  text-decoration: none;
}
.post-back-link:hover { color: var(--accent); }
.post-detail-card { min-height: 280px; }
.post-detail-card .post-title { font-size: clamp(2rem, 5vw, 3rem); }
.post-view-badge { white-space: nowrap; }

.mobile-bottom-nav .mobile-nav-item {
  text-decoration: none;
  color: var(--text-secondary);
}
.mobile-bottom-nav .mobile-nav-item.is-active { color: var(--accent); }

@media (max-width: 850px) {
  .dating-page,
  .profile-page,
  .post-page { padding-bottom: 76px; }
  .dating-page .mobile-bottom-nav,
  .profile-page .mobile-bottom-nav,
  .post-page .mobile-bottom-nav { display: grid; }
  .post-page .shared-auth-header .profile-search-wrap { display: none; }
  .post-page .shared-auth-header { grid-template-columns: 1fr auto; }
  .post-page .shared-auth-header .app-topnav,
  .post-page .shared-auth-header .header-create-button { display: none; }
  .post-page .shared-auth-header .header-inbox-button,
  .post-page .shared-auth-header .header-user-avatar-button { display: inline-grid; }
}

@media (max-width: 560px) {
  .post-location-grid { grid-template-columns: 1fr; }
  .post-detail-shell { width: calc(100% - 1rem); padding-top: 1rem; }
}

/* =========================================================
   V2.5.1.1 — admin tabs, account creation, role actions,
   impersonation/"view as user" and platform version health.
   ========================================================= */
.admin-tabs {
  display: flex;
  gap: .45rem;
  margin: 0 0 1rem;
  padding: .35rem;
  overflow-x: auto;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: var(--surface-secondary);
}
.admin-tab {
  flex: 0 0 auto;
  min-height: 40px;
  padding: .55rem .9rem;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: .78rem;
  font-weight: 760;
  cursor: pointer;
}
.admin-tab:hover { color: var(--text-primary); background: var(--surface); }
.admin-tab.is-active {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  background: var(--accent-soft);
  color: var(--accent);
}
.admin-tab-panel[hidden] { display: none !important; }
.admin-create-user-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .8rem;
}
.admin-create-user-form .form-group { margin: 0; }
.admin-create-user-submit {
  display: flex;
  align-items: end;
}
.admin-create-user-submit .btn { width: 100%; min-height: 44px; }
.admin-users-table { min-width: 980px; }
.admin-user-actions {
  min-width: 175px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .35rem;
}
.admin-user-actions .btn,
.admin-user-actions .admin-status-select { width: 100%; }
.admin-role-pill {
  display: inline-flex;
  align-items: center;
  width: max-content;
  padding: .3rem .55rem;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: var(--surface-secondary);
  color: var(--text-secondary);
  font-size: .68rem;
  font-weight: 800;
}
.admin-role-pill.role-admin {
  border-color: color-mix(in srgb, var(--accent) 46%, var(--border));
  background: var(--accent-soft);
  color: var(--accent);
}
.admin-impersonation-banner {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 10000;
  width: min(680px, calc(100% - 24px));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem .85rem .75rem 1rem;
  border: 1px solid color-mix(in srgb, var(--warning) 50%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 93%, var(--warning) 7%);
  box-shadow: 0 18px 55px rgba(0, 0, 0, .28);
}
.admin-impersonation-banner > div { min-width: 0; }
.admin-impersonation-banner strong,
.admin-impersonation-banner span { display: block; }
.admin-impersonation-banner strong { font-size: .82rem; }
.admin-impersonation-banner span { margin-top: .12rem; color: var(--text-muted); font-size: .7rem; }

@media (max-width: 850px) {
  .admin-create-user-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .admin-create-user-form { grid-template-columns: 1fr; }
  .admin-impersonation-banner { align-items: stretch; flex-direction: column; }
  .admin-impersonation-banner .btn { width: 100%; }
}


/* =========================================================
   V2.5.3 — profile likes, member counters, header logout and
   impersonation banner placement.
   ========================================================= */
.lucide-icon { width: 18px; height: 18px; flex: 0 0 18px; }
.public-profile-like-stat {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: .38rem;
  padding: .35rem .45rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}
.public-profile-like-stat:hover { background: var(--surface-secondary); color: var(--text-primary); }
.public-profile-like-stat.is-selected { color: var(--accent); }
.public-profile-like-stat.is-own-profile { cursor: default; }
.public-profile-like-stat.is-own-profile:hover { background: transparent; color: var(--text-secondary); }
.public-profile-like-stat strong { font-size: 1rem; line-height: 1; }
.public-profile-like-stat span { color: var(--text-muted); font-size: .72rem; }
.feed-member-stats { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .75rem; }
.feed-member-stat {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 32px;
  padding: .38rem .62rem;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  color: var(--text-secondary);
  font-size: .75rem;
}
.feed-member-stat strong { color: var(--text-primary); font-size: .82rem; }
.feed-member-stat.is-online .lucide-icon { color: #22c55e; }
.header-logout-button { color: var(--text-secondary); }
.header-logout-button:hover { color: var(--text-primary); }
.header-logout-button .lucide-icon { width: 19px; height: 19px; }
.admin-impersonation-banner {
  position: sticky;
  left: auto;
  top: 84px;
  bottom: auto;
  transform: none;
  margin: .75rem auto 0;
}
@media (max-width: 850px) {
  .app-header-actions .header-logout-button,
  .shared-auth-header .header-logout-button { display: inline-grid; }
  .admin-impersonation-banner { top: 76px; }
}

/* =========================================================
   V2.5.1.2 — post text wrapping/excerpts, album primary image
   selection and hardened mobile navigation.
   ========================================================= */

/* Long ad text, titles and URLs must never escape their cards. */
.feed-post,
.own-posts-card,
.mini-post-list,
.mini-post,
.post-detail-card {
  min-width: 0;
  max-width: 100%;
}
.post-title,
.post-title-link,
.post-body,
.mini-post strong,
.mini-post small {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.post-body { white-space: pre-wrap; }
.post-read-more {
  display: inline-block;
  margin-top: .55rem;
  color: var(--accent);
  font-size: .84rem;
  font-weight: 800;
  text-decoration: none;
}
.post-read-more:hover { text-decoration: underline; }
.mini-post { overflow: hidden; }
.mini-post strong,
.mini-post small { white-space: normal; }

.profile-album-footer-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .5rem;
  flex-wrap: wrap;
}
.profile-album-primary-button:disabled {
  opacity: .68;
  cursor: default;
}

@media (max-width: 850px) {
  /* Keep navigation visible on routed mobile pages, especially /dating. */
  .dating-page .mobile-bottom-nav,
  .profile-page .mobile-bottom-nav,
  .messages-page .mobile-bottom-nav,
  .post-page .mobile-bottom-nav {
    display: grid !important;
    visibility: visible;
    opacity: 1;
    z-index: 900;
  }
  .dating-page,
  .profile-page,
  .messages-page,
  .post-page {
    padding-bottom: calc(90px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 560px) {
  .profile-album-footer {
    align-items: flex-start;
    flex-direction: column;
  }
  .profile-album-footer-actions {
    width: 100%;
    justify-content: stretch;
  }
  .profile-album-primary-button { flex: 1; }
}

/* =========================================================
   V2.5.2 — saved posts, post likes, image actions and
   advertisement references in messaging.
   ========================================================= */
.post-action-button.is-selected {
  color: var(--heart);
  background: color-mix(in srgb, var(--heart) 9%, var(--surface));
}
.post-action-button:disabled { opacity: .65; cursor: wait; }

.favorites-tabs {
  display: inline-flex;
  gap: .35rem;
  margin: 0 0 1rem;
  padding: .3rem;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  background: var(--surface-secondary);
}
.favorites-tab {
  border: 0;
  border-radius: var(--radius-pill);
  padding: .62rem .9rem;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: .82rem;
  font-weight: 800;
  cursor: pointer;
}
.favorites-tab:hover { color: var(--text-primary); }
.favorites-tab.is-active {
  background: var(--accent);
  color: var(--accent-contrast);
}

.saved-post-card { min-width: 0; padding: 1.25rem; }
.saved-post-card-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.saved-post-card .post-title { margin-bottom: .7rem; font-size: clamp(1.25rem, 2.5vw, 1.7rem); }
.saved-post-author-copy { display: grid; min-width: 0; text-align: left; }
.saved-post-author-copy strong,
.saved-post-author-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saved-post-author-copy small { color: var(--text-muted); font-size: .75rem; }

.notification-reference-image {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  border-radius: 12px;
  border: 1px solid var(--border);
  object-fit: cover;
}

.profile-album-delete-button { flex: 0 0 auto; }

.post-reply-composer-reference {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .8rem;
  margin-bottom: .75rem;
  padding: .75rem .85rem;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border));
  border-left: 3px solid var(--accent);
  border-radius: 12px;
  background: var(--accent-soft);
}
.post-reply-composer-reference[hidden] { display: none; }
.post-reply-composer-copy { display: grid; min-width: 0; gap: .16rem; }
.post-reply-composer-copy small { color: var(--accent); font-size: .68rem; font-weight: 850; text-transform: uppercase; letter-spacing: .05em; }
.post-reply-composer-copy strong { overflow-wrap: anywhere; font-size: .84rem; }
.post-reply-composer-copy span {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--text-secondary);
  font-size: .76rem;
  line-height: 1.35;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.post-reply-composer-close { flex: 0 0 auto; width: 30px; height: 30px; }

.message-post-reference {
  display: grid;
  gap: .16rem;
  margin-bottom: .55rem;
  padding: .58rem .68rem;
  border-left: 3px solid currentColor;
  border-radius: 9px;
  background: color-mix(in srgb, currentColor 8%, transparent);
  color: inherit;
  text-decoration: none;
}
.message-post-reference:hover { background: color-mix(in srgb, currentColor 13%, transparent); }
.message-post-reference-label { font-size: .62rem; font-weight: 850; text-transform: uppercase; letter-spacing: .04em; opacity: .78; }
.message-post-reference strong { font-size: .8rem; line-height: 1.3; overflow-wrap: anywhere; }
.message-post-reference-excerpt {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  font-size: .72rem;
  line-height: 1.35;
  opacity: .82;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 700px) {
  .favorites-tabs { display: flex; width: 100%; }
  .favorites-tab { flex: 1; }
  .saved-post-card .post-footer { align-items: stretch; flex-direction: column; }
  .saved-post-card .post-actions { width: 100%; }
  .saved-post-card .post-actions .btn { flex: 1; }
  .notification-reference-image { width: 44px; height: 44px; flex-basis: 44px; }
}


/* =========================================================
   V2.5.2.1 — message replies and contained message menus.
   ========================================================= */
.message-reply-reference {
  width: 100%;
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  text-align: left;
  font: inherit;
}
button.message-reply-reference { cursor: pointer; }
button.message-reply-reference:hover { background: color-mix(in srgb, currentColor 13%, transparent); }
.chat-message-row.is-reply-target .chat-message-bubble {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 38%, transparent);
}
.post-detail-card .post-author-button { text-decoration: none; }
.post-detail-card .post-actions { flex-wrap: wrap; }

/* =========================================================
   V2.5.2.2 — admin changelog tab + persistent message menu.
   ========================================================= */
.admin-changelog-content {
  max-height: min(68vh, 780px);
  overflow: auto;
  padding: .2rem .15rem .25rem;
}
.admin-changelog-content h2,
.admin-changelog-content h3,
.admin-changelog-content h4 {
  margin: 1.15rem 0 .45rem;
  color: var(--text-primary);
  line-height: 1.25;
}
.admin-changelog-content h2:first-child,
.admin-changelog-content h3:first-child { margin-top: .1rem; }
.admin-changelog-content h2 { font-size: 1.25rem; }
.admin-changelog-content h3 { font-size: 1rem; }
.admin-changelog-content h4 { font-size: .9rem; }
.admin-changelog-content p,
.admin-changelog-content li {
  color: var(--text-secondary);
  font-size: .82rem;
  line-height: 1.62;
  overflow-wrap: anywhere;
}
.admin-changelog-content ul {
  margin: .35rem 0 .85rem;
  padding-left: 1.2rem;
}
.admin-changelog-content li + li { margin-top: .25rem; }
.admin-changelog-content hr {
  margin: 1rem 0;
  border: 0;
  border-top: 1px solid var(--border-soft);
}
.messages-thread .message-item-actions-wrap {
  display: inline-flex;
  align-items: center;
  align-self: flex-end;
  flex: 0 0 auto;
  z-index: 6;
}
.messages-thread .message-item-more {
  display: inline-grid;
  visibility: visible;
  opacity: 1;
  flex: 0 0 auto;
}
.messages-thread .message-item-menu { z-index: 140; }



/* =========================================================
   V2.5.3.1 — header profile menu and admin feed setting.
   ========================================================= */
.app-header-actions { position: relative; }
.header-profile-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 1100;
  width: min(250px, calc(100vw - 24px));
  padding: .45rem;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: var(--surface-elevated);
  box-shadow: var(--shadow);
}
.header-profile-menu-item {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .65rem .75rem;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: .84rem;
  font-weight: 700;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.header-profile-menu-item:hover,
.header-profile-menu-item:focus-visible { background: var(--surface-secondary); outline: none; }
.header-profile-menu-item.is-danger { color: var(--danger); }
.header-profile-menu-divider { height: 1px; margin: .3rem .4rem; background: var(--border-soft); }
.header-user-avatar-button[aria-expanded="true"] { border-color: color-mix(in srgb, var(--accent) 48%, var(--border)); }
.admin-feature-setting { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.admin-feature-setting > div { min-width: 0; }
.admin-feature-setting p { margin-top: .25rem; font-size: .82rem; }
.admin-ai-visibility-setting { flex-wrap: wrap; }
.admin-ai-visibility-setting .toggle-row { max-width: 100%; }
@media (max-width: 850px) {
  .app-page-main .shared-auth-header .header-user-avatar-button { display: inline-grid; }
  .header-profile-menu { top: calc(100% + 8px); }
}

/* =========================================================
   V2.5.3.2 — consistent brand mark + header admin-tab cleanup.
   ========================================================= */
.logo,
.app-brand {
  font-size: 1rem;
}
.app-brand {
  gap: .55rem;
  letter-spacing: -.03em;
  text-transform: uppercase;
}
html[data-theme="classic"] .logo,
html[data-theme="classic"] .app-brand {
  font-size: 1.28rem;
  letter-spacing: -.02em;
}

/* =========================================================
   V2.5.3.3 — stable landing-header geometry, compact account
   menu, clickable own-profile avatar and lower profile like.
   ========================================================= */
.landing-header-layout {
  max-width: none;
  width: 100%;
  height: 74px;
  margin: 0;
  padding: 0 1.25rem;
  display: grid;
  grid-template-columns: 250px minmax(300px, 1fr) auto;
  align-items: center;
  gap: 1rem;
}
.landing-header-placeholder {
  visibility: hidden;
  pointer-events: none;
  user-select: none;
}
.landing-brand {
  justify-self: start;
}
.profile-summary-avatar-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.profile-summary-avatar-link:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
}
@media (min-width: 851px) {
  .public-profile-metrics {
    align-self: stretch;
    align-content: stretch;
    grid-template-rows: auto 1fr;
  }
  .public-profile-like-stat {
    align-self: end;
  }
}
@media (max-width: 850px) {
  .landing-header-layout {
    height: 68px;
    grid-template-columns: auto 1fr auto;
    padding: 0 .8rem;
    gap: .55rem;
  }
  .landing-header-layout .app-topnav { display: none; }
  .landing-header-actions .header-user-avatar-button { display: inline-grid; }
}

/* =========================================================
   V2.5.3.5 — landing header authentication actions.
   ========================================================= */
.landing-header-layout { position: relative; }
.landing-auth-actions {
  position: absolute;
  top: 50%;
  right: 1.25rem;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: .55rem;
  transform: translateY(-50%);
}
.landing-auth-actions .btn {
  min-height: 38px;
  padding: .5rem .85rem;
  font-size: .84rem;
  white-space: nowrap;
}
@media (max-width: 850px) {
  .landing-auth-actions { right: .8rem; gap: .35rem; }
  .landing-auth-actions .btn {
    min-height: 36px;
    padding: .42rem .6rem;
    font-size: .78rem;
  }
}
@media (max-width: 390px) {
  .landing-auth-actions .btn {
    padding-inline: .45rem;
    font-size: .72rem;
  }
}

/* =========================================================
   V2.5.3.6 — login header aligned with landing geometry.
   ========================================================= */
.login-header-layout {
  position: relative;
}
.login-header-auth-actions {
  right: .75rem;
}
@media (max-width: 850px) {
  .login-header-auth-actions { right: .45rem; }
}

/* =========================================================
   V2.5.3.7 — profile moderation menus, DM block action and
   consistent registration header.
   ========================================================= */
/* Keep per-message overflow actions on the outside of the bubble, away from the avatar. */
.chat-message-row.is-own .message-bubble-actions-layout { flex-direction: row-reverse; }
.chat-message-row.is-other .message-bubble-actions-layout { flex-direction: row; }

.public-profile-title-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-width: 0;
}
.public-profile-title-row h1 { min-width: 0; }
.profile-options-wrap { position: relative; flex: 0 0 auto; }
.profile-options-wrap[hidden] { display: none; }
.profile-options-button {
  width: 38px;
  height: 38px;
  min-width: 38px;
  color: var(--text-secondary);
}
.profile-options-button:hover,
.profile-options-button[aria-expanded="true"] {
  color: var(--text-primary);
  background: var(--surface-secondary);
}
.profile-options-menu {
  position: absolute;
  top: calc(100% + .35rem);
  left: 0;
  z-index: 95;
  width: 180px;
  padding: .35rem;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface-elevated);
  box-shadow: var(--shadow-modal);
}
.profile-options-menu[hidden] { display: none; }
.profile-options-menu button {
  width: 100%;
  padding: .68rem .7rem;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-primary);
  text-align: left;
  font: inherit;
  font-size: .8rem;
  font-weight: 760;
  cursor: pointer;
}
.profile-options-menu button:hover { background: var(--surface-secondary); }
.profile-options-menu .danger-action { color: var(--danger); }
.profile-options-menu .danger-action:hover { background: color-mix(in srgb, var(--danger) 9%, var(--surface-secondary)); }
.profile-options-menu button:disabled { opacity: .65; cursor: default; }
#profile-message-button.is-disabled { opacity: .65; pointer-events: none; }

.register-header-layout { position: relative; }
.register-header-auth-actions { right: 1.25rem; }
@media (max-width: 850px) {
  .register-header-auth-actions { right: .8rem; }
  .public-profile-title-row { justify-content: center; }
  .profile-options-menu { left: auto; right: 0; }
}


/* =========================================================
   V2.5.3.9 — account deletion flow and admin feedback.
   ========================================================= */
.settings-danger-zone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .45rem;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--danger) 36%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--danger) 7%, var(--surface-secondary));
}
.settings-danger-zone h3 { margin: .15rem 0 .25rem; color: var(--danger); }
.settings-danger-zone p { margin: 0; color: var(--text-secondary); font-size: .82rem; }
.settings-danger-zone .btn { flex: 0 0 auto; }
.account-delete-modal-card { width: min(100%, 560px); }
.account-delete-copy { margin: 0 0 1rem; color: var(--text-secondary); line-height: 1.6; }
.admin-panel-description { margin: -.25rem 0 1rem; color: var(--text-muted); font-size: .8rem; }
.admin-deletion-feedback-reason { max-width: 760px; white-space: pre-wrap; line-height: 1.5; }

@media (max-width: 560px) {
  .settings-danger-zone { align-items: stretch; flex-direction: column; }
  .settings-danger-zone .btn { width: 100%; }
}

/* =========================================================
   V2.5.5.1 — consistent public e-mail/account flow pages.
   ========================================================= */
.email-flow-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 32rem),
    var(--background);
}
.email-flow-main {
  min-height: calc(100vh - 74px);
  display: grid;
  place-items: start center;
  padding: 4rem 1rem 5rem;
}
.email-flow-card {
  width: min(100%, 560px);
  margin: 0;
  padding: 2.6rem;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
}
.email-flow-heading { margin-bottom: 1.8rem; }
.email-flow-heading h2 { margin-top: .35rem; font-size: clamp(1.8rem, 5vw, 2.35rem); letter-spacing: -.045em; }
.email-flow-heading p { max-width: 48ch; margin-top: .65rem; color: var(--text-secondary); line-height: 1.65; }
.email-flow-note {
  display: grid;
  gap: .3rem;
  margin: -0.25rem 0 1.45rem;
  padding: 1rem 1.05rem;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface-secondary);
}
.email-flow-note strong { color: var(--text-primary); font-size: .88rem; }
.email-flow-note span { color: var(--text-muted); font-size: .8rem; line-height: 1.5; }
.email-flow-primary { margin-top: .45rem; min-height: 50px; }
.email-flow-card .auth-switch { margin-bottom: 0; }
.email-flow-change-email { display: grid; gap: .9rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border-soft); }
.email-flow-change-email[hidden] { display: none; }
.email-delivery-failure { border-color: color-mix(in srgb, #ef4444 45%, var(--border-soft)); }
.email-delivery-failure strong { color: #ef4444; }
#resend-button:disabled { opacity: .55; cursor: not-allowed; }
@media (max-width: 850px) {
  .email-flow-main { min-height: calc(100vh - 68px); padding-top: 2.2rem; }
}
@media (max-width: 560px) {
  .email-flow-main { padding-inline: .75rem; }
  .email-flow-card { padding: 1.5rem; }
}



/* V2.5.5.4 – newsletter + granular e-mail notification controls */
.email-notification-options { display:grid; gap:.65rem; margin-top:.9rem; }
.email-notification-options .toggle-row { justify-content:space-between; padding:.8rem .9rem; border:1px solid var(--border-soft); border-radius:12px; background:var(--surface-secondary); }
.settings-inline-status { display:block; margin-top:.45rem; color:var(--text-muted); line-height:1.5; }
.newsletter-signup { max-width:980px; margin:2rem auto 3.5rem; padding:2rem; display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,.75fr); gap:1.25rem 2rem; align-items:center; }
.newsletter-signup h2 { margin:.25rem 0 .55rem; }
.newsletter-signup p { margin:0; color:var(--text-muted); line-height:1.65; }
.newsletter-signup-form { display:flex; gap:.65rem; align-items:center; }
.newsletter-signup-form .form-control { flex:1; min-width:0; }
.newsletter-signup-status { grid-column:1 / -1; min-height:1.25rem; color:var(--text-muted); font-size:.9rem; }
.admin-newsletter-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin:1rem 0 1.4rem; }
@media (max-width:720px) { .newsletter-signup { grid-template-columns:1fr; margin-left:1rem; margin-right:1rem; } .newsletter-signup-form { flex-direction:column; align-items:stretch; } .admin-newsletter-form { grid-template-columns:1fr; } .admin-newsletter-form .form-span-2 { grid-column:auto; } }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }


/* V2.5.5.5 — transparent AI account disclosure */
.ai-disclosure-badge{display:inline-flex;align-items:center;gap:.25rem;padding:.28rem .55rem;border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);border-radius:999px;background:color-mix(in srgb,var(--accent) 12%,var(--surface));color:var(--text-primary);font-size:.68rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}.ai-disclosure-badge[hidden]{display:none!important}

/* V2.5.5.5 - AI Agent administration */
.ai-admin-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.ai-admin-hero h2 { margin: 0.25rem 0 0.4rem; }
.ai-admin-hero p { margin: 0; max-width: 72ch; color: var(--muted-text, #6d6875); }

.ai-admin-subtabs {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0.25rem 0 0.85rem;
  margin-bottom: 0.4rem;
  scrollbar-width: thin;
}

.ai-subtab {
  flex: 0 0 auto;
  border: 1px solid var(--border-color, rgba(109, 40, 217, 0.18));
  border-radius: 999px;
  background: var(--surface, #fff);
  color: inherit;
  padding: 0.55rem 0.9rem;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.ai-subtab:hover,
.ai-subtab:focus-visible,
.ai-subtab.is-active {
  border-color: var(--primary, #6d28d9);
  box-shadow: 0 0 0 2px rgba(109, 40, 217, 0.08);
}

.ai-subtab.is-active { color: var(--primary, #6d28d9); }
.ai-admin-section { display: grid; gap: 1rem; }
.ai-stat-grid { margin-bottom: 0; }

.ai-admin-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem 1rem;
}

.ai-admin-form .form-span-2 { grid-column: 1 / -1; }
.ai-form-toggle { display: flex; align-items: flex-end; }
.ai-form-toggle label { display: inline-flex; align-items: center; gap: 0.55rem; min-height: 42px; font-weight: 700; }
.ai-form-toggle input[type="checkbox"] { width: 1.05rem; height: 1.05rem; }
.ai-prompt-editor { min-height: 10rem; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.9rem; }

.ai-card-list { display: grid; gap: 0.85rem; }
.ai-provider-grid,
.ai-behavior-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
.ai-provider-card,
.ai-behavior-card,
.ai-suggestion-card {
  border: 1px solid var(--border-color, rgba(109, 40, 217, 0.15));
  border-radius: 16px;
  padding: 1rem;
  background: var(--surface, #fff);
}
.ai-provider-card h3,
.ai-behavior-card h3,
.ai-suggestion-card h3 { margin: 0 0 0.45rem; }
.ai-provider-card p,
.ai-behavior-card p,
.ai-suggestion-card p { margin: 0.25rem 0; }
.ai-mini-prompt { white-space: pre-wrap; max-height: 9rem; overflow: auto; font-size: 0.82rem; }
.ai-behavior-preview { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--border-color, rgba(109,40,217,.12)); }

.ai-suggestion-options { display: grid; gap: 0.6rem; margin: 0.8rem 0; }
.ai-suggestion-option {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 0.65rem;
  padding: 0.7rem;
  border: 1px solid var(--border-color, rgba(109, 40, 217, 0.14));
  border-radius: 12px;
}
.ai-suggestion-option p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.ai-suggestion-custom { width: 100%; min-height: 5rem; resize: vertical; }

.ai-conversation-thread {
  display: grid;
  gap: 0.55rem;
  max-height: 520px;
  overflow: auto;
  padding: 0.4rem 0;
}
.ai-thread-message {
  width: min(82%, 680px);
  border-radius: 14px;
  padding: 0.65rem 0.8rem;
  background: rgba(109, 40, 217, 0.07);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.ai-thread-message.is-ai { margin-left: auto; background: rgba(37, 99, 235, 0.09); }
.ai-thread-message small { display: block; margin-top: 0.3rem; opacity: 0.68; }
.ai-memory-details { margin-top: 1rem; }
.ai-memory-details summary { cursor: pointer; font-weight: 800; }
.ai-memory-details pre { max-height: 340px; overflow: auto; white-space: pre-wrap; word-break: break-word; font-size: 0.82rem; }
.ai-wide-table { min-width: 880px; }

.ai-disclosure-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: 999px;
  border: 1px solid rgba(37, 99, 235, 0.28);
  background: rgba(37, 99, 235, 0.09);
  color: #1d4ed8;
  padding: 0.18rem 0.5rem;
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.25;
  vertical-align: middle;
}

@media (max-width: 760px) {
  .ai-admin-hero { flex-direction: column; }
  .ai-admin-form,
  .ai-provider-grid,
  .ai-behavior-grid { grid-template-columns: 1fr; }
  .ai-admin-form .form-span-2 { grid-column: auto; }
  .ai-thread-message { width: 92%; }
}

.ai-provider-connection-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .6rem;
}
.ai-provider-connection-status .admin-panel-description { margin: 0; }
.ai-provider-log-detail {
  max-width: 320px;
  overflow-wrap: anywhere;
  word-break: break-word;
}


/* V2.5.6.4 — robust wrapping across every AI Agent admin tab */
.ai-admin-section,
.ai-admin-section .admin-panel-card,
.ai-admin-section .admin-card-heading,
.ai-admin-section .admin-card-heading > div,
.ai-admin-section .form-group,
.ai-admin-section .ai-suggestion-option > span,
.ai-admin-section .ai-provider-connection-status { min-width: 0; }

.ai-admin-section h2,
.ai-admin-section h3,
.ai-admin-section p,
.ai-admin-section small,
.ai-admin-section strong,
.ai-admin-section label,
.ai-admin-section dt,
.ai-admin-section dd,
.ai-admin-section td,
.ai-admin-section th,
.ai-admin-section pre {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.ai-admin-section .admin-table td,
.ai-admin-section .admin-table th { white-space: normal; }
.ai-admin-section pre { max-width: 100%; white-space: pre-wrap; }
.ai-admin-section .form-control { min-width: 0; max-width: 100%; }
.ai-mini-prompt,
.ai-behavior-preview { overflow-wrap: anywhere; word-break: break-word; }

/* V2.5.5.9 — subtle experiment disclosure */
.ai-disclosure-badge.is-minimal{padding:.16rem .35rem;font-size:.58rem;letter-spacing:.02em;opacity:.72;border-color:color-mix(in srgb,var(--text-muted) 28%,transparent);background:transparent;color:var(--text-muted)}

/* V2.5.6.7 — suggestion replacement workspace + sentence/word extraction */
.ai-replacement-heading-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: .65rem;
  min-width: 0;
}
.ai-replacement-heading-actions small { margin: 0; }
.ai-replacement-form { margin-bottom: 1rem; }
.ai-replacement-form .form-span-2 { display: flex; align-items: center; }

.ai-replacement-list {
  display: grid;
  gap: .7rem;
  margin-top: .25rem;
}
.ai-replacement-rule {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-width: 0;
  padding: .8rem .9rem;
  border: 1px solid var(--border-color, rgba(109, 40, 217, .14));
  border-radius: 13px;
  background: color-mix(in srgb, var(--surface, #fff) 94%, var(--primary, #6d28d9) 6%);
}
.ai-replacement-rule-copy {
  display: grid;
  gap: .42rem;
  flex: 1 1 auto;
  min-width: 0;
}
.ai-replacement-rule-line {
  display: grid;
  grid-template-columns: 5.7rem minmax(0, 1fr);
  align-items: baseline;
  gap: .55rem;
  min-width: 0;
}
.ai-replacement-rule-label {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .045em;
  text-transform: uppercase;
  color: var(--text-muted, #737373);
}
.ai-replacement-rule-value {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.ai-replacement-rule-value.is-muted {
  font-size: .85rem;
  color: var(--text-muted, #737373);
}
.ai-replacement-delete {
  flex: 0 0 auto;
  min-height: 32px !important;
  padding: .35rem .72rem !important;
  border-radius: 10px !important;
  font-size: .8rem;
}

.ai-suggestion-option-wrap {
  display: grid;
  gap: .45rem;
  margin: .8rem 0;
}
.ai-suggestion-option-wrap + .ai-suggestion-option-wrap { margin-top: .35rem; }
.ai-suggestion-option-wrap .ai-suggestion-option { margin: 0; }

.ai-suggestion-extraction {
  display: grid;
  gap: .65rem;
  margin-left: 2rem;
  padding: .72rem .78rem;
  border: 1px solid color-mix(in srgb, var(--border-color, rgba(109,40,217,.14)) 78%, transparent);
  border-radius: 11px;
  background: color-mix(in srgb, var(--surface, #fff) 96%, var(--primary, #6d28d9) 4%);
  min-width: 0;
}
.ai-extraction-help {
  color: var(--text-muted, #737373);
  line-height: 1.45;
}
.ai-extraction-group {
  display: grid;
  gap: .4rem;
  min-width: 0;
}
.ai-extraction-label {
  font-size: .76rem;
  letter-spacing: .025em;
}
.ai-extraction-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .36rem;
  min-width: 0;
}
.ai-extraction-sentences {
  display: grid;
  grid-template-columns: 1fr;
  gap: .38rem;
}
.ai-extraction-chip {
  appearance: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  max-width: 100%;
  min-width: 0;
  padding: .32rem .52rem;
  border: 1px solid color-mix(in srgb, var(--primary, #6d28d9) 28%, var(--border-color, #d4d4d8));
  border-radius: 9px;
  background: color-mix(in srgb, var(--primary, #6d28d9) 7%, var(--surface, #fff));
  color: inherit;
  font: inherit;
  font-size: .8rem;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.ai-extraction-chip.is-sentence {
  width: 100%;
  justify-content: space-between;
  padding: .46rem .58rem;
}
.ai-extraction-chip.is-word {
  border-radius: 999px;
  padding: .26rem .48rem;
}

.ai-replacement-rule-type {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: .18rem .45rem;
  border: 1px solid color-mix(in srgb, var(--primary, #6d28d9) 22%, var(--border-color, #d4d4d8));
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}
.ai-replacement-rule-type.is-keyword {
  background: color-mix(in srgb, var(--primary, #6d28d9) 10%, var(--surface, #fff));
}
.ai-extraction-chip.is-keyword {
  border-radius: 999px;
  font-weight: 800;
  border-style: dashed;
}
.ai-extraction-chip:hover,
.ai-extraction-chip:focus-visible {
  border-color: var(--primary, #6d28d9);
  background: color-mix(in srgb, var(--primary, #6d28d9) 12%, var(--surface, #fff));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary, #6d28d9) 12%, transparent);
  outline: none;
}
.ai-extraction-chip-text {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.ai-extraction-chip-x {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 900;
  line-height: 1;
  opacity: 0;
  transform: scale(.8);
  color: #dc2626;
  transition: opacity .15s ease, transform .15s ease, background .15s ease;
}
.ai-extraction-chip:hover .ai-extraction-chip-x,
.ai-extraction-chip:focus-visible .ai-extraction-chip-x {
  opacity: 1;
  transform: scale(1);
  background: rgba(220, 38, 38, .08);
}

@media (max-width: 760px) {
  .ai-replacement-heading-actions { justify-content: flex-start; }
  .ai-replacement-rule { align-items: flex-start; }
  .ai-replacement-rule-line { grid-template-columns: 1fr; gap: .16rem; }
  .ai-suggestion-extraction { margin-left: 0; }
}

/* V2.5.9.2 — clickable online count + AI online scheduling */
.feed-member-stat-link {
  text-decoration: none;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.feed-member-stat-link:hover,
.feed-member-stat-link:focus-visible {
  border-color: color-mix(in srgb, #22c55e 42%, var(--border-soft));
  background: color-mix(in srgb, #22c55e 8%, var(--surface));
  transform: translateY(-1px);
  outline: none;
}
.ai-online-schedule-form { margin-top: .4rem; }
.ai-online-weekdays {
  min-width: 0;
  margin: 0;
  padding: .8rem;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md, 12px);
  display: flex;
  flex-wrap: wrap;
  gap: .55rem .7rem;
}
.ai-online-weekdays legend {
  padding: 0 .3rem;
  font-size: .82rem;
  font-weight: 800;
  color: var(--text-secondary);
}
.ai-online-weekdays label {
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  min-width: 0;
  padding: .35rem .55rem;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  cursor: pointer;
}
.ai-online-schedule-table-wrap { margin-top: 1rem; }
.ai-online-schedule-card td strong,
.ai-online-schedule-card td small { display: block; overflow-wrap: anywhere; }
.ai-online-schedule-card .admin-report-actions { display: flex; flex-wrap: wrap; gap: .4rem; }

/* V2.5.9.4 — compact extraction + behavior field help */
.ai-field-label {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  width: fit-content;
  max-width: 100%;
}
.ai-field-help {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 1.2rem;
  height: 1.2rem;
  border: 1px solid color-mix(in srgb, var(--primary, #6d28d9) 35%, var(--border-color, #d4d4d8));
  border-radius: 999px;
  color: var(--primary, #6d28d9);
  background: color-mix(in srgb, var(--primary, #6d28d9) 7%, var(--surface, #fff));
  font-size: .72rem;
  font-weight: 900;
  line-height: 1;
  cursor: help;
}
#admin-panel-ai-agent.ai-help-disabled .ai-field-help { display: none; }
[data-ai-help-scope].ai-help-disabled .ai-field-help { display: none; }
.admin-page.admin-help-disabled .ai-field-help { display: none !important; }
.ai-field-help:hover,
.ai-field-help:focus-visible {
  border-color: var(--primary, #6d28d9);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary, #6d28d9) 12%, transparent);
  outline: none;
}
.ai-suggestion-extraction.ai-extraction-details {
  display: block;
  padding: 0;
  overflow: hidden;
}
.ai-extraction-summary {
  cursor: pointer;
  list-style: none;
  padding: .62rem .78rem;
  font-size: .8rem;
  font-weight: 800;
  user-select: none;
}
.ai-extraction-summary::-webkit-details-marker { display: none; }
.ai-extraction-summary::before {
  content: '▸';
  display: inline-block;
  margin-right: .45rem;
  transition: transform .15s ease;
}
.ai-extraction-details[open] > .ai-extraction-summary::before { transform: rotate(90deg); }
.ai-extraction-content {
  display: grid;
  gap: .65rem;
  padding: 0 .78rem .72rem;
}



/* V2.5.9.5 — suggestion summary row + scheduled AI worker */
.ai-suggestion-option > span > strong { display: block; }
.ai-suggestion-meta {
  display: block;
  margin-top: .48rem;
  color: var(--text-muted, #737373);
  line-height: 1.4;
}
.ai-worker-schedule-form { margin-top: .4rem; }
.ai-worker-actions {
  min-width: 0;
  margin: 0;
  padding: .8rem;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md, 12px);
  display: flex;
  flex-wrap: wrap;
  gap: .55rem .7rem;
}
.ai-worker-actions legend {
  padding: 0 .3rem;
  font-size: .82rem;
  font-weight: 800;
  color: var(--text-secondary);
}
.ai-worker-actions label {
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  min-width: 0;
  padding: .35rem .55rem;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  cursor: pointer;
}
.ai-worker-table-wrap { margin-top: 1rem; }
.ai-worker-schedule-card tbody tr { cursor: pointer; }
.ai-worker-schedule-card tbody tr:hover { background: color-mix(in srgb, var(--primary, #6d28d9) 5%, transparent); }

/* V2.5.9.6 — targeted UI fixes */
#view-own-profile-link + #edit-profile-button { margin-top: .65rem; }
.settings-danger-zone + .modal-actions { margin-top: 1.15rem; }

.admin-shadowban-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: .35rem;
  padding: .18rem .45rem;
  border: 1px solid color-mix(in srgb, var(--warning, #f6c177) 45%, var(--border));
  border-radius: 999px;
  color: var(--warning, #f6c177);
  font-size: .68rem;
  font-weight: 800;
}

@media (min-width: 851px) {
  .messages-page .conversation-more-button {
    width: 30px;
    height: 30px;
    min-width: 30px;
  }
  .messages-page .conversation-row-shell .conversation-actions-menu {
    width: 124px;
    padding: .22rem;
    border-radius: 11px;
  }
  .messages-page .conversation-row-shell .conversation-actions-menu button {
    padding: .42rem .5rem;
    border-radius: 8px;
    font-size: .72rem;
  }
}

@media (max-width: 560px) {
  .dating-profile-media { aspect-ratio: 1 / 1; }
  .dating-profile-card-body { padding: .58rem; gap: .45rem; }
  .dating-profile-name { font-size: .92rem; }
  .dating-profile-facts { gap: .22rem; }
  .dating-profile-facts > div {
    align-items: baseline;
    flex-direction: row;
    gap: .25rem;
    padding-bottom: .22rem;
  }
  .dating-profile-facts dt { font-size: .62rem; }
  .dating-profile-facts dd {
    max-width: 62%;
    font-size: .68rem;
    text-align: right;
  }
  .dating-profile-actions { padding-top: 0; }
  .dating-profile-actions .btn {
    min-height: 34px;
    padding: .45rem .5rem;
    font-size: .7rem;
  }
}

/* =========================================================
   V2.5.9.7 — targeted tag/admin/suggestion UI additions.
   ========================================================= */
.post-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: .4rem;
}
.post-tag-badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: .32rem .58rem;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  background: var(--surface-secondary);
  color: var(--text-secondary);
  font-size: .69rem;
  font-weight: 800;
  line-height: 1;
}
.feed-tag-filter {
  margin: 0 0 1rem;
  padding: .85rem 1rem;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.feed-tag-filter[hidden] { display: none !important; }
.feed-tag-filter-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .65rem;
}
.feed-tag-filter-options,
.post-tag-options {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}
.feed-tag-filter-button,
.post-tag-choice {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  background: var(--surface-secondary);
  color: var(--text-secondary);
  font: inherit;
  font-size: .76rem;
  font-weight: 750;
}
.feed-tag-filter-button {
  padding: .48rem .72rem;
  cursor: pointer;
}
.feed-tag-filter-button:hover,
.feed-tag-filter-button.is-active,
.post-tag-choice:has(input:checked) {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border-soft));
  background: var(--accent-soft);
  color: var(--accent);
}
.post-tag-choice {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .65rem;
  cursor: pointer;
}
.post-tag-choice input { margin: 0; }
.saved-post-tags,
.post-detail-tags,
.public-profile-post-tags {
  justify-content: flex-start;
  margin: -.15rem 0 .8rem;
}
.admin-tag-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: .6rem;
  margin-bottom: 1rem;
}
.admin-role-pill.role-owner {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border-soft));
  background: var(--accent-soft);
  color: var(--accent);
}
.ai-suggestion-reply-context {
  display: grid;
  gap: .25rem;
  margin: -.15rem 0 .85rem;
  padding: .7rem .8rem;
  border-left: 3px solid var(--border);
  border-radius: 0 10px 10px 0;
  background: var(--surface-secondary);
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}
.ai-suggestion-reply-context strong {
  color: var(--text-muted);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.ai-suggestion-reply-context span { white-space: pre-wrap; }

@media (max-width: 560px) {
  .post-author-row { align-items: flex-start; }
  .post-author-row > .post-badges { justify-content: flex-start; max-width: 52%; }
  .admin-tag-form { grid-template-columns: 1fr; }
}
.admin-demote-modal-card { width: min(100%, 460px); }

.admin-security-modal-card { width: min(100%, 980px); }
.admin-security-table-wrap { max-height: min(62vh, 620px); overflow: auto; }
.admin-security-table td { vertical-align: top; }
.admin-security-table td strong, .admin-security-table td small { display: block; }
.admin-security-user-agent { margin-top: .25rem; max-width: 360px; color: var(--text-muted); overflow-wrap: anywhere; }


/* V2.6.1 — tag presentation editor, post-detail tag placement, blocked-user settings */
.admin-tag-form {
  grid-template-columns: minmax(0, 1fr) minmax(220px, .65fr);
  align-items: start;
}
.admin-tag-editor-fields { display: grid; gap: .75rem; }
.admin-tag-code-input {
  min-height: 78px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: .78rem;
}
.admin-tag-preview-card {
  min-height: 150px;
  display: grid;
  align-content: center;
  gap: .8rem;
  padding: 1rem;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface-secondary);
}
.admin-tag-preview { min-height: 36px; align-items: center; }
.admin-tag-form-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}
.admin-tag-name-meta { display: grid; gap: .15rem; margin-top: .45rem; }
.post-detail-top-meta {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: .55rem;
  flex-wrap: wrap;
}
.post-detail-top-meta .post-detail-tags {
  margin: 0;
  justify-content: flex-end;
}
.blocked-users-list { display: grid; gap: .55rem; margin-top: .8rem; }
.blocked-user-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  padding: .65rem .75rem;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface-secondary);
}
.blocked-user-identity { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.blocked-user-identity > span:last-child { display: grid; min-width: 0; }
.blocked-user-identity strong,
.blocked-user-identity small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 760px) {
  .admin-tag-form { grid-template-columns: 1fr; }
  .admin-tag-form-actions { grid-column: 1; }
  .post-detail-top-meta { max-width: 52%; }
  .blocked-user-row { align-items: flex-start; flex-direction: column; }
}

/* =========================================================
   V2.6.2 — global announcement system and moderation sub-tabs.
   ========================================================= */
.site-announcement-banner {
  position: relative;
  z-index: 120;
  width: min(680px, calc(100% - 24px));
  margin: .75rem auto 0;
  border: 1px solid color-mix(in srgb, var(--warning) 46%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 94%, var(--warning) 6%);
  box-shadow: 0 14px 38px rgba(0, 0, 0, .2);
  overflow: hidden;
}
.site-announcement-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 68px;
  padding: .7rem .75rem .7rem 1rem;
}
.site-announcement-content {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-width: 0;
  flex: 1 1 auto;
}
.site-announcement-content.is-collapsed .site-announcement-custom-content,
.site-announcement-content.is-collapsed .site-announcement-message { display: none; }
.site-announcement-copy { min-width: 0; }
.site-announcement-title,
.site-announcement-message { display: block; }
.site-announcement-title {
  color: var(--text-primary);
  font-size: .82rem;
  line-height: 1.25;
}
.site-announcement-message {
  margin-top: .18rem;
  color: var(--text-muted);
  font-size: .72rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.site-announcement-custom-content {
  flex: 0 0 auto;
  color: var(--text-secondary);
}
.site-announcement-controls {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex: 0 0 auto;
}
.site-announcement-control,
.site-announcement-close {
  min-height: 34px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-elevated) 86%, transparent);
  color: var(--text-secondary);
  font: inherit;
  font-size: .7rem;
  font-weight: 800;
  cursor: pointer;
}
.site-announcement-control { padding: .42rem .7rem; }
.site-announcement-close {
  width: 34px;
  padding: 0;
  font-size: 1.15rem;
  line-height: 1;
}
.site-announcement-control:hover,
.site-announcement-close:hover {
  border-color: var(--border);
  color: var(--text-primary);
}
.site-announcement-banner.is-collapsed .site-announcement-inner { min-height: 52px; padding-block: .48rem; }
.site-announcement-banner.is-sticky:not(.is-preview) {
  position: sticky;
  top: 84px;
  z-index: 490;
}
.site-announcement-banner.is-preview {
  position: static;
  width: 100%;
  margin: .55rem 0 0;
  transform: none;
}

.admin-moderation-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: .8rem;
}
.admin-moderation-tab {
  min-height: 36px;
  padding: .48rem .8rem;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text-secondary);
  font: inherit;
  font-size: .75rem;
  font-weight: 800;
  cursor: pointer;
}
.admin-moderation-tab:hover,
.admin-moderation-tab.is-active {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--border));
  background: var(--accent-soft);
  color: var(--text-primary);
}
.admin-announcement-form {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  gap: 1rem;
  align-items: start;
}
.admin-announcement-fields { min-width: 0; }
.admin-announcement-code-input {
  min-height: 112px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .76rem;
  line-height: 1.45;
}
.admin-announcement-toggle-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .6rem;
  margin: .8rem 0;
}
.admin-announcement-toggle-grid .toggle-row {
  justify-content: flex-start;
  min-height: 44px;
  padding: .55rem .65rem;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: var(--surface-secondary);
}
.admin-announcement-schedule-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}
.admin-announcement-actions { margin-top: .2rem; }
.admin-announcement-preview-card {
  position: sticky;
  top: 100px;
  min-width: 0;
  padding: .85rem;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: var(--surface-secondary);
}
.admin-announcement-preview-card > p {
  margin: .35rem 0 .55rem;
  color: var(--text-muted);
  font-size: .72rem;
}
.admin-announcement-row-meta {
  display: block;
  max-width: 360px;
  margin-top: .2rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 850px) {
  .site-announcement-banner.is-sticky:not(.is-preview) { top: 76px; }
  .site-announcement-inner { align-items: flex-start; }
  .site-announcement-content { align-items: flex-start; }
  .admin-announcement-form { grid-template-columns: 1fr; }
  .admin-announcement-preview-card { position: static; }
}

@media (max-width: 560px) {
  .site-announcement-banner { width: calc(100% - 16px); margin-top: .5rem; }
  .site-announcement-inner { gap: .55rem; padding: .65rem; }
  .site-announcement-content { gap: .5rem; }
  .site-announcement-controls { align-self: center; }
  .site-announcement-control { padding-inline: .55rem; }
  .admin-announcement-toggle-grid,
  .admin-announcement-schedule-grid { grid-template-columns: 1fr; }
}


/* =========================================================
   V2.6.3.2 — distinct component-level design systems for
   SpaceGlas, Neon Social, Mint Orbit, Solar Circuit and
   Lunar Cloud. Purple, Klassik and Original are untouched.
   ========================================================= */

/* ---------- Shared scope: redesigned themes only ---------- */
html:is(
  [data-theme="spaceglas"],
  [data-theme="neon-social"],
  [data-theme="mint-orbit"],
  [data-theme="solar-circuit"],
  [data-theme="lunar-cloud"]
) .app-page {
  background: var(--body-background);
}

html:is(
  [data-theme="spaceglas"],
  [data-theme="neon-social"],
  [data-theme="mint-orbit"],
  [data-theme="solar-circuit"],
  [data-theme="lunar-cloud"]
) .card,
html:is(
  [data-theme="spaceglas"],
  [data-theme="neon-social"],
  [data-theme="mint-orbit"],
  [data-theme="solar-circuit"],
  [data-theme="lunar-cloud"]
) .btn,
html:is(
  [data-theme="spaceglas"],
  [data-theme="neon-social"],
  [data-theme="mint-orbit"],
  [data-theme="solar-circuit"],
  [data-theme="lunar-cloud"]
) .form-control,
html:is(
  [data-theme="spaceglas"],
  [data-theme="neon-social"],
  [data-theme="mint-orbit"],
  [data-theme="solar-circuit"],
  [data-theme="lunar-cloud"]
) .app-search,
html:is(
  [data-theme="spaceglas"],
  [data-theme="neon-social"],
  [data-theme="mint-orbit"],
  [data-theme="solar-circuit"],
  [data-theme="lunar-cloud"]
) .icon-button,
html:is(
  [data-theme="spaceglas"],
  [data-theme="neon-social"],
  [data-theme="mint-orbit"],
  [data-theme="solar-circuit"],
  [data-theme="lunar-cloud"]
) .avatar-button {
  transition:
    transform var(--transition),
    background var(--transition),
    border-color var(--transition),
    box-shadow var(--transition);
}

/* ---------- SpaceGlas: black/white liquid glass ---------- */
html[data-theme="spaceglas"] .app-header {
  inset: 10px 14px auto;
  width: auto;
  height: 62px;
  padding-inline: 1rem;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.095), rgba(255,255,255,.025) 52%, rgba(128,202,215,.035)),
    rgba(5,7,9,.68);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(255,255,255,.035),
    0 18px 50px rgba(0,0,0,.34);
  backdrop-filter: blur(26px) saturate(132%);
  -webkit-backdrop-filter: blur(26px) saturate(132%);
}
html[data-theme="spaceglas"] .app-page { padding-top: 84px; }
html[data-theme="spaceglas"] .app-brand {
  color: rgb(255, 255, 255);
  letter-spacing: .015em;
  font-weight: 760;
}
html[data-theme="spaceglas"] .brand-heart { color: #dce8ed; text-shadow: 0 0 18px rgba(172,226,237,.16); }
html[data-theme="spaceglas"] .topnav-link {
  min-height: 38px;
  padding: .58rem .9rem;
  border: 1px solid transparent;
  border-radius: 13px;
  font-weight: 620;
}
html[data-theme="spaceglas"] .topnav-link:hover {
  background: rgba(255,255,255,.055);
  border-color: rgba(255,255,255,.08);
}
html[data-theme="spaceglas"] .topnav-link.is-active {
  color: rgb(255, 255, 255);
  background: linear-gradient(180deg, rgba(255,255,255,.115), rgba(255,255,255,.045));
  border-color: rgba(255,255,255,.13);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
html[data-theme="spaceglas"] .app-search,
html[data-theme="spaceglas"] .form-control,
html[data-theme="spaceglas"] .chat-input-shell {
  border-color: rgba(255,255,255,.11);
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)),
    rgba(2,4,6,.44);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055);
  backdrop-filter: blur(16px);
}
html[data-theme="spaceglas"] .app-search:focus-within,
html[data-theme="spaceglas"] .chat-input-shell:focus-within {
  border-color: rgba(188,231,239,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 3px rgba(161,219,230,.06);
}
html[data-theme="spaceglas"] .card,
html[data-theme="spaceglas"] .friends-sidebar-inner,
html[data-theme="spaceglas"] .messages-inbox,
html[data-theme="spaceglas"] .messages-chat,
html[data-theme="spaceglas"] .feed-tag-filter {
  position: relative;
  overflow: hidden;
  border-color: rgba(255,255,255,.115);
  background:
    linear-gradient(135deg, rgba(255,255,255,.085), rgba(255,255,255,.022) 46%, rgba(159,215,226,.025)),
    rgba(8,11,14,.60);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    inset 0 -1px 0 rgba(255,255,255,.025),
    0 22px 60px rgba(0,0,0,.27);
  backdrop-filter: blur(24px) saturate(125%);
  -webkit-backdrop-filter: blur(24px) saturate(125%);
}
html[data-theme="spaceglas"] .card::before,
html[data-theme="spaceglas"] .friends-sidebar-inner::before,
html[data-theme="spaceglas"] .messages-inbox::before,
html[data-theme="spaceglas"] .messages-chat::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 8%;
  width: 58%;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.48), transparent);
  opacity: .55;
}
html[data-theme="spaceglas"] .feed-post:hover,
html[data-theme="spaceglas"] .card:hover {
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 26px 70px rgba(0,0,0,.34);
}
html[data-theme="spaceglas"] .feed-post {
  padding: 1.6rem;
}
html[data-theme="spaceglas"] .post-title,
html[data-theme="spaceglas"] .feed-intro h1,
html[data-theme="spaceglas"] .public-profile-title-row h1 {
  letter-spacing: -.045em;
  font-weight: 680;
}
html[data-theme="spaceglas"] .post-footer,
html[data-theme="spaceglas"] .profile-facts > div,
html[data-theme="spaceglas"] .sidebar-divider {
  border-color: rgba(255,255,255,.075);
}
html[data-theme="spaceglas"] .match-badge,
html[data-theme="spaceglas"] .post-tag-badge,
html[data-theme="spaceglas"] .feed-tag-filter-button {
  border: 1px solid rgba(255,255,255,.11);
  background: rgba(255,255,255,.055);
  color: #dbe3e8;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.065);
}
html[data-theme="spaceglas"] .btn-primary {
  border: 1px solid rgba(255,255,255,.52);
  background: linear-gradient(180deg, #ffffff, #dbe5e9);
  color: #080a0c;
  box-shadow: 0 10px 30px rgba(0,0,0,.28), inset 0 1px 0 #fff;
  font-weight: 760;
}
html[data-theme="spaceglas"] .btn-primary:hover {
  background: #fff;
  box-shadow: 0 14px 34px rgba(0,0,0,.34), 0 0 24px rgba(173,222,231,.08);
}
html[data-theme="spaceglas"] .btn-secondary,
html[data-theme="spaceglas"] .icon-button,
html[data-theme="spaceglas"] .avatar-button {
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}
html[data-theme="spaceglas"] .modal-card,
html[data-theme="spaceglas"] .profile-search-results,
html[data-theme="spaceglas"] .header-profile-menu,
html[data-theme="spaceglas"] .profile-options-menu,
html[data-theme="spaceglas"] .chat-actions-menu,
html[data-theme="spaceglas"] .conversation-actions-menu {
  border-color: rgba(255,255,255,.15);
  background:
    linear-gradient(140deg, rgba(255,255,255,.09), rgba(255,255,255,.025)),
    rgba(7,9,12,.84);
  box-shadow: var(--shadow-modal), inset 0 1px 0 rgba(255,255,255,.13);
  backdrop-filter: blur(30px) saturate(125%);
  -webkit-backdrop-filter: blur(30px) saturate(125%);
}
html[data-theme="spaceglas"] .modal-card { border-radius: 30px; }
html[data-theme="spaceglas"] .profile-search-item:hover,
html[data-theme="spaceglas"] .notification-row:hover,
html[data-theme="spaceglas"] .conversation-row-shell:hover {
  background: rgba(255,255,255,.055);
}
html[data-theme="spaceglas"] .conversation-row-shell.is-active {
  background: rgba(255,255,255,.07);
  box-shadow: inset 2px 0 0 rgba(214,235,240,.70);
}
html[data-theme="spaceglas"] .chat-message-list {
  background:
    radial-gradient(circle at 82% 12%, rgba(133,200,213,.045), transparent 18rem),
    linear-gradient(180deg, rgba(255,255,255,.018), transparent 28%),
    rgba(1,3,5,.60);
}
html[data-theme="spaceglas"] .chat-message-bubble {
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.065);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(14px);
}
html[data-theme="spaceglas"] .chat-message-row.is-own .chat-message-bubble {
  border-color: rgba(255,255,255,.24);
  background: linear-gradient(145deg, rgba(245,250,252,.96), rgba(211,225,231,.92));
  color: #090c0e;
  box-shadow: 0 8px 26px rgba(0,0,0,.24);
}
html[data-theme="spaceglas"] .chat-composer,
html[data-theme="spaceglas"] .messages-chat-header {
  background: rgba(7,10,13,.72);
  backdrop-filter: blur(22px);
}
html[data-theme="spaceglas"] .public-profile-hero {
  background:
    radial-gradient(circle at 84% 0%, rgba(164,220,231,.08), transparent 20rem),
    linear-gradient(135deg, rgba(255,255,255,.095), rgba(255,255,255,.02)),
    rgba(8,11,14,.62);
}
html[data-theme="spaceglas"] .public-profile-avatar,
html[data-theme="spaceglas"] .large-avatar,
html[data-theme="spaceglas"] .person-avatar,
html[data-theme="spaceglas"] .post-avatar {
  border-color: rgba(255,255,255,.20);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 8px 24px rgba(0,0,0,.25);
}
html[data-theme="spaceglas"] .theme-option {
  border-color: rgba(255,255,255,.11);
  background: rgba(255,255,255,.035);
}
html[data-theme="spaceglas"] .theme-option.is-selected {
  border-color: rgba(255,255,255,.32);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 2px rgba(177,225,234,.055);
}
html[data-theme="spaceglas"] .spaceglas-preview {
  background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.02)), #05070a;
  border-color: rgba(255,255,255,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.34), inset 0 -9px 18px rgba(117,198,213,.07);
}

/* ---------- Neon Social: expressive nightlife social UI ---------- */
html[data-theme="neon-social"] .app-header {
  height: 76px;
  border-bottom: 0;
  background: rgba(5,5,12,.95);
  box-shadow: 0 12px 30px rgba(0,0,0,.32);
}
html[data-theme="neon-social"] .app-header::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 4%, #5C33F6 24%, #EE227D 52%, #30C0B7 78%, transparent 96%);
  opacity: .78;
}
html[data-theme="neon-social"] .app-brand {
  font-weight: 900;
  letter-spacing: -.055em;
}
html[data-theme="neon-social"] .topnav-link {
  position: relative;
  border-radius: 8px;
  background: transparent;
}
html[data-theme="neon-social"] .topnav-link.is-active {
  color: rgb(255, 255, 255);
  background: transparent;
}
html[data-theme="neon-social"] .topnav-link.is-active::after {
  content: "";
  position: absolute;
  left: .85rem;
  right: .85rem;
  bottom: .12rem;
  height: 3px;
  border-radius: 4px;
  background: linear-gradient(90deg, #EE227D, #5C33F6);
}
html[data-theme="neon-social"] .app-shell { gap: 1rem; }
html[data-theme="neon-social"] .card,
html[data-theme="neon-social"] .friends-sidebar-inner,
html[data-theme="neon-social"] .messages-inbox,
html[data-theme="neon-social"] .messages-chat {
  border: 1px solid rgba(119,70,165,.22);
  background: linear-gradient(160deg, #151321 0%, #0E0E19 70%);
  box-shadow: 0 18px 45px rgba(0,0,0,.28);
}
html[data-theme="neon-social"] .feed-post {
  position: relative;
  overflow: hidden;
  padding: 1.55rem 1.6rem 1.5rem 1.75rem;
  border-left: 3px solid rgba(238,34,125,.72);
  border-radius: 6px 24px 24px 6px;
}
html[data-theme="neon-social"] .feed-post:nth-child(even) {
  border-left-color: rgba(48,192,183,.58);
}
html[data-theme="neon-social"] .feed-post::after {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  right: -90px;
  top: -90px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(238,34,125,.10), transparent 68%);
  pointer-events: none;
}
html[data-theme="neon-social"] .feed-post:hover {
  transform: translateX(3px);
  border-color: rgba(238,34,125,.46);
}
html[data-theme="neon-social"] .feed-intro h1,
html[data-theme="neon-social"] .public-profile-title-row h1 {
  font-weight: 900;
  letter-spacing: -.06em;
}
html[data-theme="neon-social"] .eyebrow {
  color: #36D4CA;
  letter-spacing: .16em;
}
html[data-theme="neon-social"] .match-badge,
html[data-theme="neon-social"] .post-tag-badge {
  border: 0;
  background: linear-gradient(90deg, rgba(238,34,125,.15), rgba(92,51,246,.12));
  color: #ff9fc8;
}
html[data-theme="neon-social"] .btn-primary {
  border: 0;
  border-radius: 14px 5px 14px 5px;
  background: linear-gradient(135deg, #EE227D 0%, #A92B9A 52%, #5C33F6 100%);
  color: rgb(255, 255, 255);
  box-shadow: 0 10px 28px rgba(238,34,125,.18);
  font-weight: 820;
}
html[data-theme="neon-social"] .btn-primary:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 14px 32px rgba(238,34,125,.24);
}
html[data-theme="neon-social"] .btn-secondary,
html[data-theme="neon-social"] .icon-button,
html[data-theme="neon-social"] .avatar-button {
  border-color: rgba(122,77,157,.30);
  background: #12101c;
}
html[data-theme="neon-social"] .app-search,
html[data-theme="neon-social"] .form-control,
html[data-theme="neon-social"] .chat-input-shell {
  border: 1px solid rgba(120,75,157,.28);
  border-radius: 10px 18px 10px 18px;
  background: #0a0a13;
}
html[data-theme="neon-social"] .app-search:focus-within,
html[data-theme="neon-social"] .chat-input-shell:focus-within,
html[data-theme="neon-social"] .form-control:focus {
  border-color: rgba(238,34,125,.58);
  box-shadow: 0 0 0 3px rgba(238,34,125,.08);
}
html[data-theme="neon-social"] .profile-summary,
html[data-theme="neon-social"] .public-profile-hero {
  border-top-color: rgba(48,192,183,.42);
  background:
    linear-gradient(135deg, rgba(92,51,246,.08), transparent 38%),
    linear-gradient(165deg, #171321, #0E0E18);
}
html[data-theme="neon-social"] .person-avatar,
html[data-theme="neon-social"] .post-avatar,
html[data-theme="neon-social"] .large-avatar,
html[data-theme="neon-social"] .public-profile-avatar {
  border: 2px solid transparent;
  background:
    linear-gradient(#11111d,#11111d) padding-box,
    linear-gradient(145deg,#EE227D,#5C33F6,#30C0B7) border-box;
}
html[data-theme="neon-social"] .conversation-row-shell {
  border-radius: 8px 16px 8px 16px;
}
html[data-theme="neon-social"] .conversation-row-shell.is-active {
  background: linear-gradient(90deg, rgba(238,34,125,.13), rgba(92,51,246,.055));
  box-shadow: inset 3px 0 0 #EE227D;
}
html[data-theme="neon-social"] .chat-message-list {
  background:
    radial-gradient(circle at 15% 20%, rgba(92,51,246,.06), transparent 20rem),
    radial-gradient(circle at 85% 72%, rgba(238,34,125,.05), transparent 18rem),
    #080811;
}
html[data-theme="neon-social"] .chat-message-bubble {
  border-radius: 18px 18px 18px 5px;
  border-color: rgba(120,77,157,.25);
  background: #181421;
}
html[data-theme="neon-social"] .chat-message-row.is-own .chat-message-bubble {
  border: 0;
  border-radius: 18px 18px 5px 18px;
  background: linear-gradient(135deg, #EE227D, #8530A8);
  color: rgb(255, 255, 255);
}
html[data-theme="neon-social"] .chat-composer {
  background: #0d0c16;
  border-top-color: rgba(238,34,125,.18);
}
html[data-theme="neon-social"] .modal-card,
html[data-theme="neon-social"] .profile-search-results,
html[data-theme="neon-social"] .header-profile-menu,
html[data-theme="neon-social"] .profile-options-menu,
html[data-theme="neon-social"] .chat-actions-menu,
html[data-theme="neon-social"] .conversation-actions-menu {
  border-color: rgba(238,34,125,.25);
  border-radius: 12px 24px 12px 24px;
  background: #12101b;
  box-shadow: 0 26px 80px rgba(0,0,0,.54), 0 0 0 1px rgba(92,51,246,.08);
}
html[data-theme="neon-social"] .notification-row.is-unread {
  background: linear-gradient(90deg, rgba(238,34,125,.13), rgba(48,192,183,.055));
  box-shadow: inset 3px 0 0 #EE227D;
}
html[data-theme="neon-social"] .theme-option {
  border-radius: 9px 18px 9px 18px;
}
html[data-theme="neon-social"] .neon-social-preview {
  border-radius: 7px 14px 7px 14px;
  background: linear-gradient(135deg, #3B0855 0 28%, #12111e 28% 68%, #0d4748 68%);
  border-color: rgba(238,34,125,.42);
}

/* ---------- Mint Orbit: calm, spacious, border-light ---------- */
html[data-theme="mint-orbit"] body {
  letter-spacing: .002em;
}
html[data-theme="mint-orbit"] .app-header {
  height: 78px;
  border-bottom: 0;
  background: rgba(10,26,36,.84);
  box-shadow: 0 10px 32px rgba(0,8,13,.16);
  backdrop-filter: blur(20px);
}
html[data-theme="mint-orbit"] .app-page { padding-top: 78px; }
html[data-theme="mint-orbit"] .app-shell {
  gap: 1.5rem;
  padding-top: 1.8rem;
}
html[data-theme="mint-orbit"] .topnav-link {
  padding-inline: 1.05rem;
  border-radius: 999px;
  font-weight: 650;
}
html[data-theme="mint-orbit"] .topnav-link.is-active {
  color: #ecfff8;
  background: rgba(103,230,194,.115);
}
html[data-theme="mint-orbit"] .app-search {
  border: 0;
  border-radius: 999px;
  background: rgba(20,52,64,.90);
  box-shadow: inset 0 0 0 1px rgba(176,225,215,.08);
}
html[data-theme="mint-orbit"] .card,
html[data-theme="mint-orbit"] .friends-sidebar-inner,
html[data-theme="mint-orbit"] .messages-inbox,
html[data-theme="mint-orbit"] .messages-chat,
html[data-theme="mint-orbit"] .feed-tag-filter {
  border: 0;
  border-radius: 32px;
  background: #132B38;
  box-shadow: 0 16px 38px rgba(1,10,15,.16);
}
html[data-theme="mint-orbit"] .feed-post {
  padding: 1.8rem 1.9rem;
}
html[data-theme="mint-orbit"] .feed-list { gap: 1.25rem; }
html[data-theme="mint-orbit"] .feed-intro {
  padding: .65rem .45rem;
  margin-bottom: 1.3rem;
}
html[data-theme="mint-orbit"] .feed-intro h1,
html[data-theme="mint-orbit"] .public-profile-title-row h1 {
  font-weight: 720;
  letter-spacing: -.045em;
}
html[data-theme="mint-orbit"] .post-title {
  font-weight: 690;
  letter-spacing: -.035em;
  line-height: 1.2;
}
html[data-theme="mint-orbit"] .post-body {
  line-height: 1.82;
  color: #edfdf8;
}
html[data-theme="mint-orbit"] .post-footer,
html[data-theme="mint-orbit"] .profile-facts > div {
  border-color: rgba(172,220,211,.085);
}
html[data-theme="mint-orbit"] .btn {
  min-height: 46px;
  border-radius: 999px;
  padding-inline: 1.35rem;
}
html[data-theme="mint-orbit"] .btn-primary {
  background: #67E6C2;
  color: #09251d;
  box-shadow: 0 8px 22px rgba(74,201,166,.13);
}
html[data-theme="mint-orbit"] .btn-secondary,
html[data-theme="mint-orbit"] .icon-button,
html[data-theme="mint-orbit"] .avatar-button {
  border: 0;
  background: #1A3744;
}
html[data-theme="mint-orbit"] .form-control,
html[data-theme="mint-orbit"] .chat-input-shell {
  border: 0;
  border-radius: 20px;
  background: #0C222D;
  box-shadow: inset 0 0 0 1px rgba(174,223,213,.08);
}
html[data-theme="mint-orbit"] .form-control:focus,
html[data-theme="mint-orbit"] .chat-input-shell:focus-within {
  box-shadow: inset 0 0 0 1px rgba(103,230,194,.45), 0 0 0 4px rgba(103,230,194,.055);
}
html[data-theme="mint-orbit"] .match-badge,
html[data-theme="mint-orbit"] .post-tag-badge,
html[data-theme="mint-orbit"] .feed-tag-filter-button {
  border: 0;
  background: rgba(103,230,194,.09);
  color: #a8f1dc;
}
html[data-theme="mint-orbit"] .person-row,
html[data-theme="mint-orbit"] .conversation-row-shell {
  border-radius: 18px;
}
html[data-theme="mint-orbit"] .person-row:hover,
html[data-theme="mint-orbit"] .conversation-row-shell:hover,
html[data-theme="mint-orbit"] .profile-search-item:hover {
  background: rgba(103,230,194,.065);
}
html[data-theme="mint-orbit"] .conversation-row-shell.is-active {
  background: rgba(103,230,194,.09);
  box-shadow: none;
}
html[data-theme="mint-orbit"] .messages-chat {
  overflow: hidden;
}
html[data-theme="mint-orbit"] .chat-message-list {
  gap: .6rem;
  padding-inline: clamp(1rem,4vw,2.4rem);
  background: #0B1C26;
}
html[data-theme="mint-orbit"] .chat-message-bubble {
  padding: .78rem .95rem .55rem;
  border: 0;
  border-radius: 22px;
  background: #183743;
  box-shadow: none;
}
html[data-theme="mint-orbit"] .chat-message-row.is-own .chat-message-bubble {
  background: #67E6C2;
  color: #08231c;
  border-radius: 22px 22px 7px 22px;
}
html[data-theme="mint-orbit"] .chat-message-row.is-other .chat-message-bubble {
  border-radius: 22px 22px 22px 7px;
}
html[data-theme="mint-orbit"] .chat-composer {
  padding: 1rem 1.15rem 1.15rem;
  border-top: 0;
  background: #132B38;
}
html[data-theme="mint-orbit"] .modal-card,
html[data-theme="mint-orbit"] .profile-search-results,
html[data-theme="mint-orbit"] .header-profile-menu,
html[data-theme="mint-orbit"] .profile-options-menu,
html[data-theme="mint-orbit"] .chat-actions-menu,
html[data-theme="mint-orbit"] .conversation-actions-menu {
  border: 0;
  border-radius: 30px;
  background: #17303D;
  box-shadow: 0 28px 82px rgba(0,8,12,.38);
}
html[data-theme="mint-orbit"] .public-profile-hero {
  padding: 2.3rem;
  background: linear-gradient(145deg, #183744, #122A37);
}
html[data-theme="mint-orbit"] .theme-option {
  border: 0;
  border-radius: 22px;
  background: #173541;
  box-shadow: inset 0 0 0 1px rgba(173,222,212,.075);
}
html[data-theme="mint-orbit"] .mint-orbit-preview {
  border-radius: 18px;
  background: linear-gradient(145deg, #234657 0 54%, #67E6C2 54% 66%, #0D1B27 66%);
  border: 0;
}

/* ---------- Solar Circuit: compact, engineered, precise ---------- */
html[data-theme="solar-circuit"] .app-header {
  height: 68px;
  grid-template-columns: 230px minmax(280px,1fr) auto;
  border-bottom: 1px solid rgba(182,255,59,.22);
  background: #07131f;
  box-shadow: 0 8px 24px rgba(0,0,0,.26);
}
html[data-theme="solar-circuit"] .app-page { padding-top: 68px; }
html[data-theme="solar-circuit"] .app-brand {
  font-weight: 900;
  letter-spacing: .06em;
  font-size: .88rem;
}
html[data-theme="solar-circuit"] .topnav-link {
  min-height: 36px;
  padding: .55rem .8rem;
  border-radius: 3px;
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
html[data-theme="solar-circuit"] .topnav-link.is-active {
  color: #071006;
  background: #B6FF3B;
  box-shadow: none;
}
html[data-theme="solar-circuit"] .app-search,
html[data-theme="solar-circuit"] .form-control,
html[data-theme="solar-circuit"] .chat-input-shell {
  border: 1px solid rgba(174,196,205,.20);
  border-radius: 4px;
  background: #071722;
  box-shadow: inset 3px 0 0 rgba(182,255,59,.18);
}
html[data-theme="solar-circuit"] .app-search:focus-within,
html[data-theme="solar-circuit"] .form-control:focus,
html[data-theme="solar-circuit"] .chat-input-shell:focus-within {
  border-color: rgba(182,255,59,.52);
  box-shadow: inset 3px 0 0 #B6FF3B;
}
html[data-theme="solar-circuit"] .app-shell {
  grid-template-columns: 240px minmax(0,740px) 300px;
  gap: .85rem;
  padding-top: 1rem;
}
html[data-theme="solar-circuit"] .card,
html[data-theme="solar-circuit"] .friends-sidebar-inner,
html[data-theme="solar-circuit"] .messages-inbox,
html[data-theme="solar-circuit"] .messages-chat,
html[data-theme="solar-circuit"] .feed-tag-filter {
  border: 1px solid rgba(175,197,206,.18);
  border-radius: 7px;
  background: #0D1E2D;
  box-shadow: 0 10px 26px rgba(0,0,0,.19);
}
html[data-theme="solar-circuit"] .feed-post {
  position: relative;
  padding: 1.25rem 1.35rem;
}
html[data-theme="solar-circuit"] .feed-post::before,
html[data-theme="solar-circuit"] .public-profile-hero::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 34px;
  height: 34px;
  border-top: 2px solid rgba(182,255,59,.68);
  border-left: 2px solid rgba(182,255,59,.68);
  pointer-events: none;
}
html[data-theme="solar-circuit"] .feed-list { gap: .72rem; }
html[data-theme="solar-circuit"] .feed-intro {
  padding: .25rem 0 .55rem;
  margin-bottom: .7rem;
}
html[data-theme="solar-circuit"] .feed-intro h1,
html[data-theme="solar-circuit"] .post-title,
html[data-theme="solar-circuit"] .public-profile-title-row h1 {
  font-weight: 860;
  letter-spacing: -.035em;
}
html[data-theme="solar-circuit"] .eyebrow {
  color: #B6FF3B;
  font-size: .66rem;
  letter-spacing: .18em;
}
html[data-theme="solar-circuit"] .post-author-row { margin-bottom: .9rem; }
html[data-theme="solar-circuit"] .post-footer { margin-top: 1rem; padding-top: .7rem; }
html[data-theme="solar-circuit"] .profile-facts { gap: .45rem; }
html[data-theme="solar-circuit"] .profile-facts > div { padding-bottom: .45rem; }
html[data-theme="solar-circuit"] .btn {
  min-height: 40px;
  padding: .62rem 1rem;
  border-radius: 4px;
  font-weight: 820;
  letter-spacing: .015em;
}
html[data-theme="solar-circuit"] .btn-primary {
  border: 1px solid #B6FF3B;
  background: #B6FF3B;
  color: #071006;
  box-shadow: 4px 4px 0 rgba(182,255,59,.12);
}
html[data-theme="solar-circuit"] .btn-primary:hover {
  transform: translate(-1px,-1px);
  box-shadow: 6px 6px 0 rgba(182,255,59,.12);
}
html[data-theme="solar-circuit"] .btn-secondary,
html[data-theme="solar-circuit"] .icon-button,
html[data-theme="solar-circuit"] .avatar-button {
  border: 1px solid rgba(183,204,212,.22);
  border-radius: 4px;
  background: #0A1926;
}
html[data-theme="solar-circuit"] .match-badge,
html[data-theme="solar-circuit"] .post-tag-badge,
html[data-theme="solar-circuit"] .feed-tag-filter-button {
  border-radius: 3px;
  border-color: rgba(182,255,59,.24);
  background: rgba(182,255,59,.055);
  color: #D4F5A0;
  text-transform: uppercase;
  letter-spacing: .05em;
}
html[data-theme="solar-circuit"] .sidebar-divider,
html[data-theme="solar-circuit"] .post-footer,
html[data-theme="solar-circuit"] .profile-facts > div {
  background: none;
  border-color: rgba(185,205,213,.13);
}
html[data-theme="solar-circuit"] .person-row,
html[data-theme="solar-circuit"] .conversation-row-shell {
  border-radius: 3px;
}
html[data-theme="solar-circuit"] .person-row:hover,
html[data-theme="solar-circuit"] .conversation-row-shell:hover,
html[data-theme="solar-circuit"] .profile-search-item:hover {
  background: rgba(182,255,59,.045);
}
html[data-theme="solar-circuit"] .conversation-row-shell.is-active {
  background: rgba(182,255,59,.065);
  box-shadow: inset 3px 0 0 #B6FF3B;
}
html[data-theme="solar-circuit"] .chat-message-list {
  gap: .35rem;
  background:
    linear-gradient(rgba(182,255,59,.018) 1px, transparent 1px),
    #07131E;
  background-size: 100% 28px;
}
html[data-theme="solar-circuit"] .chat-message-bubble {
  border-radius: 5px;
  border-color: rgba(183,204,212,.18);
  background: #102535;
  box-shadow: none;
}
html[data-theme="solar-circuit"] .chat-message-row.is-own .chat-message-bubble {
  border: 1px solid rgba(182,255,59,.44);
  border-radius: 5px;
  background: #173326;
  color: #F5FBEF;
}
html[data-theme="solar-circuit"] .chat-composer {
  padding: .7rem .8rem .8rem;
  background: #0A1926;
}
html[data-theme="solar-circuit"] .modal-card,
html[data-theme="solar-circuit"] .profile-search-results,
html[data-theme="solar-circuit"] .header-profile-menu,
html[data-theme="solar-circuit"] .profile-options-menu,
html[data-theme="solar-circuit"] .chat-actions-menu,
html[data-theme="solar-circuit"] .conversation-actions-menu {
  border: 1px solid rgba(182,255,59,.22);
  border-radius: 6px;
  background: #0B1B29;
  box-shadow: 14px 14px 0 rgba(0,0,0,.20), 0 24px 64px rgba(0,0,0,.36);
}
html[data-theme="solar-circuit"] .theme-option {
  border-radius: 4px;
}
html[data-theme="solar-circuit"] .solar-circuit-preview {
  border-radius: 3px;
  background:
    linear-gradient(rgba(182,255,59,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(182,255,59,.12) 1px, transparent 1px),
    #0C1A2B;
  background-size: 9px 9px;
  border-color: rgba(182,255,59,.48);
}

/* ---------- Lunar Cloud: cinematic, editorial, atmospheric ---------- */
html[data-theme="lunar-cloud"] .app-header {
  height: 80px;
  border-bottom-color: rgba(228,234,237,.10);
  background: rgba(20,29,38,.78);
  box-shadow: 0 14px 36px rgba(7,12,17,.16);
  backdrop-filter: blur(20px);
}
html[data-theme="lunar-cloud"] .app-page { padding-top: 80px; }
html[data-theme="lunar-cloud"] .app-brand {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: none;
}
html[data-theme="lunar-cloud"] .topnav-link {
  border-radius: 18px;
  font-weight: 620;
}
html[data-theme="lunar-cloud"] .topnav-link.is-active {
  color: #F7F3ED;
  background: rgba(218,231,239,.09);
}
html[data-theme="lunar-cloud"] .app-shell {
  gap: 1.45rem;
  padding-top: 2rem;
}
html[data-theme="lunar-cloud"] .card,
html[data-theme="lunar-cloud"] .friends-sidebar-inner,
html[data-theme="lunar-cloud"] .messages-inbox,
html[data-theme="lunar-cloud"] .messages-chat,
html[data-theme="lunar-cloud"] .feed-tag-filter {
  border-color: rgba(228,234,237,.105);
  border-radius: 34px;
  background:
    linear-gradient(155deg, rgba(255,255,255,.035), transparent 42%),
    rgba(37,50,63,.91);
  box-shadow: 0 24px 62px rgba(8,13,18,.18), inset 0 1px 0 rgba(255,255,255,.035);
}
html[data-theme="lunar-cloud"] .feed-post {
  padding: 2rem 2.05rem;
}
html[data-theme="lunar-cloud"] .feed-list { gap: 1.35rem; }
html[data-theme="lunar-cloud"] .feed-intro {
  padding: .85rem .55rem;
  margin-bottom: 1.4rem;
}
html[data-theme="lunar-cloud"] .feed-intro h1,
html[data-theme="lunar-cloud"] .post-title,
html[data-theme="lunar-cloud"] .public-profile-title-row h1,
html[data-theme="lunar-cloud"] .modal-header h2 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.025em;
}
html[data-theme="lunar-cloud"] .post-title {
  line-height: 1.14;
}
html[data-theme="lunar-cloud"] .post-body {
  line-height: 1.84;
  color: #F0ECE5;
}
html[data-theme="lunar-cloud"] .eyebrow {
  color: #DCC8AA;
  letter-spacing: .13em;
}
html[data-theme="lunar-cloud"] .post-footer,
html[data-theme="lunar-cloud"] .profile-facts > div {
  border-color: rgba(228,234,237,.085);
}
html[data-theme="lunar-cloud"] .btn {
  min-height: 46px;
  border-radius: 18px;
  padding-inline: 1.3rem;
}
html[data-theme="lunar-cloud"] .btn-primary {
  border: 1px solid rgba(235,240,243,.48);
  background: #DCE8EF;
  color: #1C2731;
  box-shadow: 0 9px 24px rgba(9,15,20,.15);
}
html[data-theme="lunar-cloud"] .btn-primary:hover {
  background: #F1F5F7;
  transform: translateY(-1px);
}
html[data-theme="lunar-cloud"] .btn-secondary,
html[data-theme="lunar-cloud"] .icon-button,
html[data-theme="lunar-cloud"] .avatar-button {
  border-color: rgba(230,235,238,.14);
  background: rgba(255,255,255,.035);
}
html[data-theme="lunar-cloud"] .app-search,
html[data-theme="lunar-cloud"] .form-control,
html[data-theme="lunar-cloud"] .chat-input-shell {
  border-color: rgba(225,232,236,.13);
  border-radius: 20px;
  background: rgba(20,31,41,.75);
}
html[data-theme="lunar-cloud"] .app-search:focus-within,
html[data-theme="lunar-cloud"] .form-control:focus,
html[data-theme="lunar-cloud"] .chat-input-shell:focus-within {
  border-color: rgba(215,230,239,.35);
  box-shadow: 0 0 0 4px rgba(215,230,239,.045);
}
html[data-theme="lunar-cloud"] .match-badge,
html[data-theme="lunar-cloud"] .post-tag-badge {
  border: 0;
  background: rgba(220,200,170,.09);
  color: #E6D4BA;
}
html[data-theme="lunar-cloud"] .public-profile-hero {
  padding: 2.4rem;
  background:
    radial-gradient(circle at 84% 8%, rgba(220,200,170,.075), transparent 18rem),
    radial-gradient(circle at 10% 0%, rgba(190,218,235,.08), transparent 20rem),
    rgba(39,52,65,.92);
}
html[data-theme="lunar-cloud"] .profile-summary,
html[data-theme="lunar-cloud"] .public-profile-info,
html[data-theme="lunar-cloud"] .public-profile-details {
  padding: 2rem;
}
html[data-theme="lunar-cloud"] .profile-facts { gap: .85rem; }
html[data-theme="lunar-cloud"] .person-row,
html[data-theme="lunar-cloud"] .conversation-row-shell {
  border-radius: 20px;
}
html[data-theme="lunar-cloud"] .person-row:hover,
html[data-theme="lunar-cloud"] .conversation-row-shell:hover,
html[data-theme="lunar-cloud"] .profile-search-item:hover {
  background: rgba(218,231,239,.055);
}
html[data-theme="lunar-cloud"] .conversation-row-shell.is-active {
  background: rgba(218,231,239,.075);
  box-shadow: inset 3px 0 0 #DCC8AA;
}
html[data-theme="lunar-cloud"] .messages-chat { overflow: hidden; }
html[data-theme="lunar-cloud"] .chat-message-list {
  gap: .65rem;
  background:
    radial-gradient(circle at 18% 0%, rgba(191,216,232,.045), transparent 20rem),
    #17212B;
}
html[data-theme="lunar-cloud"] .chat-message-bubble {
  padding: .8rem 1rem .55rem;
  border-color: rgba(228,234,237,.10);
  border-radius: 24px 24px 24px 9px;
  background: rgba(52,68,82,.84);
  box-shadow: 0 8px 20px rgba(8,13,18,.10);
}
html[data-theme="lunar-cloud"] .chat-message-row.is-own .chat-message-bubble {
  border: 1px solid rgba(221,233,240,.20);
  border-radius: 24px 24px 9px 24px;
  background: #DCE8EF;
  color: #1B2731;
}
html[data-theme="lunar-cloud"] .chat-composer {
  border-top-color: rgba(228,234,237,.08);
  background: rgba(38,51,64,.96);
}
html[data-theme="lunar-cloud"] .modal-card,
html[data-theme="lunar-cloud"] .profile-search-results,
html[data-theme="lunar-cloud"] .header-profile-menu,
html[data-theme="lunar-cloud"] .profile-options-menu,
html[data-theme="lunar-cloud"] .chat-actions-menu,
html[data-theme="lunar-cloud"] .conversation-actions-menu {
  border-color: rgba(231,236,239,.12);
  border-radius: 32px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.045), transparent 42%),
    #2B3946;
  box-shadow: 0 34px 92px rgba(7,12,18,.34);
}
html[data-theme="lunar-cloud"] .theme-option {
  border-radius: 24px;
  border-color: rgba(229,235,238,.12);
  background: rgba(255,255,255,.03);
}
html[data-theme="lunar-cloud"] .lunar-cloud-preview {
  border-radius: 18px;
  background:
    radial-gradient(circle at 28% 28%, rgba(238,244,247,.32), transparent 16%),
    linear-gradient(145deg, #455766, #1C2631 60%, #8A7B68 130%);
  border-color: rgba(225,233,238,.22);
}

/* ---------- New-theme mobile identities ---------- */
@media (max-width: 850px) {
  html[data-theme="spaceglas"] .app-header {
    inset: 7px 8px auto;
    height: 58px;
    border-radius: 18px;
  }
  html[data-theme="spaceglas"] .app-page { padding-top: 72px; }
  html[data-theme="spaceglas"] .mobile-bottom-nav {
    inset: auto 10px 10px;
    width: auto;
    height: 64px;
    padding-inline: .45rem;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 23px;
    background:
      linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.025)),
      rgba(5,7,9,.78);
    box-shadow: 0 18px 48px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.11);
    backdrop-filter: blur(26px) saturate(125%);
  }
  html[data-theme="spaceglas"] .mobile-nav-item.is-active {
    color: rgb(255, 255, 255);
    background: rgba(255,255,255,.075);
    border-radius: 15px;
  }

  html[data-theme="neon-social"] .mobile-bottom-nav {
    border-top: 2px solid transparent;
    border-image: linear-gradient(90deg,#5C33F6,#EE227D,#30C0B7) 1;
    background: rgba(7,6,14,.97);
  }
  html[data-theme="neon-social"] .mobile-nav-item {
    border-radius: 8px 15px 8px 15px;
  }
  html[data-theme="neon-social"] .mobile-nav-item.is-active {
    color: rgb(255, 255, 255);
    background: linear-gradient(135deg, rgba(238,34,125,.14), rgba(92,51,246,.09));
  }
  html[data-theme="neon-social"] .mobile-create-nav {
    transform: translateY(-6px);
    background: linear-gradient(135deg,#EE227D,#5C33F6);
    color: rgb(255, 255, 255);
    box-shadow: 0 8px 22px rgba(238,34,125,.24);
  }

  html[data-theme="mint-orbit"] .mobile-bottom-nav {
    inset: auto 12px 12px;
    width: auto;
    border: 0;
    border-radius: 26px;
    background: rgba(18,48,60,.96);
    box-shadow: 0 16px 36px rgba(0,8,12,.24);
  }
  html[data-theme="mint-orbit"] .mobile-nav-item {
    border-radius: 18px;
  }
  html[data-theme="mint-orbit"] .mobile-nav-item.is-active {
    background: rgba(103,230,194,.10);
  }

  html[data-theme="solar-circuit"] .app-header {
    height: 64px;
  }
  html[data-theme="solar-circuit"] .app-page { padding-top: 64px; }
  html[data-theme="solar-circuit"] .mobile-bottom-nav {
    border-top: 1px solid rgba(182,255,59,.36);
    background: #07131f;
  }
  html[data-theme="solar-circuit"] .mobile-nav-item {
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: .04em;
  }
  html[data-theme="solar-circuit"] .mobile-nav-item.is-active {
    color: #071006;
    background: #B6FF3B;
  }
  html[data-theme="solar-circuit"] .mobile-create-nav {
    border-radius: 2px;
  }

  html[data-theme="lunar-cloud"] .mobile-bottom-nav {
    border-top-color: rgba(228,234,237,.10);
    background: rgba(24,34,44,.94);
    box-shadow: 0 -12px 30px rgba(8,13,18,.12);
    backdrop-filter: blur(18px);
  }
  html[data-theme="lunar-cloud"] .mobile-nav-item {
    border-radius: 18px;
  }
  html[data-theme="lunar-cloud"] .mobile-nav-item.is-active {
    color: #F5F2EC;
    background: rgba(218,231,239,.075);
  }

  html[data-theme="spaceglas"] .card,
  html[data-theme="neon-social"] .card,
  html[data-theme="mint-orbit"] .card,
  html[data-theme="solar-circuit"] .card,
  html[data-theme="lunar-cloud"] .card {
    transform: none;
  }
}

@media (max-width: 560px) {
  html[data-theme="spaceglas"] .feed-post { padding: 1.2rem; border-radius: 20px; }
  html[data-theme="neon-social"] .feed-post { padding: 1.15rem 1.15rem 1.15rem 1.35rem; border-radius: 5px 18px 18px 5px; }
  html[data-theme="mint-orbit"] .feed-post { padding: 1.3rem; border-radius: 26px; }
  html[data-theme="solar-circuit"] .feed-post { padding: 1rem; border-radius: 5px; }
  html[data-theme="lunar-cloud"] .feed-post { padding: 1.35rem; border-radius: 28px; }

  html[data-theme="mint-orbit"] .modal-card { border-radius: 28px 28px 18px 18px; }
  html[data-theme="solar-circuit"] .modal-card { border-radius: 6px 6px 2px 2px; }
  html[data-theme="lunar-cloud"] .modal-card { border-radius: 30px 30px 20px 20px; }
}

/* Keep accessibility behavior for all redesigned themes. */
@media (prefers-reduced-motion: reduce) {
  html:is(
    [data-theme="spaceglas"],
    [data-theme="neon-social"],
    [data-theme="mint-orbit"],
    [data-theme="solar-circuit"],
    [data-theme="lunar-cloud"]
  ) *,
  html:is(
    [data-theme="spaceglas"],
    [data-theme="neon-social"],
    [data-theme="mint-orbit"],
    [data-theme="solar-circuit"],
    [data-theme="lunar-cloud"]
  ) *::before,
  html:is(
    [data-theme="spaceglas"],
    [data-theme="neon-social"],
    [data-theme="mint-orbit"],
    [data-theme="solar-circuit"],
    [data-theme="lunar-cloud"]
  ) *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* ---------- Landing-page identity for redesigned themes ---------- */
html[data-theme="spaceglas"] body > header:not(.app-header) {
  margin: 10px 14px 0;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,.02)),
    rgba(5,7,9,.68);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 16px 44px rgba(0,0,0,.28);
  backdrop-filter: blur(26px) saturate(130%);
}
html[data-theme="spaceglas"] .visual-mockup,
html[data-theme="spaceglas"] .showcase-card,
html[data-theme="spaceglas"] .newsletter-signup {
  border-color: rgba(255,255,255,.13);
  background:
    linear-gradient(135deg, rgba(255,255,255,.085), rgba(255,255,255,.018)),
    rgba(6,9,12,.62);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 24px 70px rgba(0,0,0,.30);
  backdrop-filter: blur(24px);
}
html[data-theme="spaceglas"] .visual-mockup { border-radius: 30px; }
html[data-theme="spaceglas"] .showcase-card { border-radius: 24px; }

html[data-theme="neon-social"] body > header:not(.app-header) {
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg,#5C33F6,#EE227D,#30C0B7) 1;
  background: rgba(5,5,12,.96);
}
html[data-theme="neon-social"] .visual-mockup {
  border-radius: 8px 32px 8px 32px;
  border-color: rgba(238,34,125,.28);
  background:
    radial-gradient(circle at 14% 16%, rgba(92,51,246,.15), transparent 26%),
    radial-gradient(circle at 88% 78%, rgba(48,192,183,.09), transparent 25%),
    #0C0B17;
}
html[data-theme="neon-social"] .showcase-card,
html[data-theme="neon-social"] .newsletter-signup {
  border-radius: 10px 26px 10px 26px;
  border-color: rgba(238,34,125,.24);
  background: linear-gradient(160deg,#171321,#0e0e18);
}

html[data-theme="mint-orbit"] body > header:not(.app-header) {
  border-bottom: 0;
  background: rgba(10,26,36,.86);
  box-shadow: 0 10px 30px rgba(0,8,12,.13);
}
html[data-theme="mint-orbit"] .visual-mockup,
html[data-theme="mint-orbit"] .showcase-card,
html[data-theme="mint-orbit"] .newsletter-signup {
  border: 0;
  border-radius: 36px;
  background: #132B38;
  box-shadow: 0 18px 44px rgba(1,10,15,.17);
}
html[data-theme="mint-orbit"] .showcase-card { border-radius: 28px; }

html[data-theme="solar-circuit"] body > header:not(.app-header) {
  border-bottom: 1px solid rgba(182,255,59,.28);
  background: #07131f;
}
html[data-theme="solar-circuit"] .visual-mockup,
html[data-theme="solar-circuit"] .showcase-card,
html[data-theme="solar-circuit"] .newsletter-signup {
  border-radius: 6px;
  border-color: rgba(181,202,211,.19);
  background: #0D1E2D;
  box-shadow: 10px 10px 0 rgba(0,0,0,.13);
}
html[data-theme="solar-circuit"] .visual-mockup {
  background:
    linear-gradient(rgba(182,255,59,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(182,255,59,.025) 1px, transparent 1px),
    #0D1E2D;
  background-size: 30px 30px;
}
html[data-theme="solar-circuit"] .showcase-card { border-radius: 4px; }

html[data-theme="lunar-cloud"] body > header:not(.app-header) {
  border-bottom-color: rgba(228,234,237,.10);
  background: rgba(20,29,38,.80);
  box-shadow: 0 12px 34px rgba(8,13,18,.13);
  backdrop-filter: blur(18px);
}
html[data-theme="lunar-cloud"] .visual-mockup,
html[data-theme="lunar-cloud"] .showcase-card,
html[data-theme="lunar-cloud"] .newsletter-signup {
  border-color: rgba(228,234,237,.10);
  border-radius: 38px;
  background:
    radial-gradient(circle at 82% 12%, rgba(220,200,170,.07), transparent 28%),
    linear-gradient(155deg, rgba(255,255,255,.035), transparent 40%),
    rgba(38,51,64,.92);
  box-shadow: 0 26px 66px rgba(8,13,18,.18);
}
html[data-theme="lunar-cloud"] .showcase-card { border-radius: 30px; }

/* Header-height alignment for theme-specific responsive navigation. */
html[data-theme="spaceglas"] .messages-chat-header { top: 79px; }
html[data-theme="neon-social"] .messages-chat-header { top: 76px; }
html[data-theme="mint-orbit"] .messages-chat-header { top: 78px; }
html[data-theme="solar-circuit"] .messages-chat-header { top: 68px; }
html[data-theme="lunar-cloud"] .messages-chat-header { top: 80px; }

html[data-theme="solar-circuit"] .public-profile-hero {
  position: relative;
  overflow: hidden;
}

@media (max-width: 850px) {
  html[data-theme="spaceglas"] .friends-sidebar { inset-block-start: 72px; }
  html[data-theme="neon-social"] .friends-sidebar { inset-block-start: 76px; }
  html[data-theme="mint-orbit"] .friends-sidebar { inset-block-start: 78px; }
  html[data-theme="solar-circuit"] .friends-sidebar { inset-block-start: 64px; }
  html[data-theme="lunar-cloud"] .friends-sidebar { inset-block-start: 80px; }

  html[data-theme="spaceglas"] .messages-chat-header { top: 72px; }
  html[data-theme="neon-social"] .messages-chat-header { top: 76px; }
  html[data-theme="mint-orbit"] .messages-chat-header { top: 78px; }
  html[data-theme="solar-circuit"] .messages-chat-header { top: 64px; }
  html[data-theme="lunar-cloud"] .messages-chat-header { top: 80px; }
}


/* ---------- Profile/dating signatures for redesigned themes ---------- */
html[data-theme="spaceglas"] .profile-summary {
  background:
    radial-gradient(circle at 84% 6%, rgba(151,215,226,.055), transparent 10rem),
    linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,.02)),
    rgba(7,10,13,.62);
}
html[data-theme="spaceglas"] .dating-profile-card {
  border-color: rgba(255,255,255,.12);
  border-radius: 24px;
  background: rgba(8,11,14,.60);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 18px 46px rgba(0,0,0,.25);
  backdrop-filter: blur(20px);
}
html[data-theme="spaceglas"] .dating-profile-media {
  margin: 8px;
  width: calc(100% - 16px);
  border-radius: 18px;
}

html[data-theme="neon-social"] .dating-profile-card {
  border-left: 3px solid rgba(238,34,125,.64);
  border-radius: 7px 22px 22px 7px;
}
html[data-theme="neon-social"] .dating-profile-card:nth-child(even) {
  border-left-color: rgba(48,192,183,.55);
}
html[data-theme="neon-social"] .dating-profile-media {
  border-bottom: 1px solid rgba(238,34,125,.18);
}
html[data-theme="neon-social"] .dating-profile-name {
  font-weight: 900;
}

html[data-theme="mint-orbit"] .profile-summary {
  padding: 2rem;
  background: #15303C;
}
html[data-theme="mint-orbit"] .dating-profile-card {
  border: 0;
  border-radius: 30px;
  background: #15313D;
  box-shadow: 0 14px 34px rgba(0,8,12,.16);
}
html[data-theme="mint-orbit"] .dating-profile-media {
  margin: 8px;
  width: calc(100% - 16px);
  border-radius: 24px;
}
html[data-theme="mint-orbit"] .dating-profile-card-body {
  gap: .8rem;
  padding: 1.05rem 1.15rem 1.2rem;
}

html[data-theme="solar-circuit"] .profile-summary {
  border-left: 3px solid rgba(182,255,59,.42);
}
html[data-theme="solar-circuit"] .dating-profile-card {
  border-radius: 5px;
  border-color: rgba(183,203,212,.18);
  background: #0D1E2D;
  box-shadow: 6px 6px 0 rgba(0,0,0,.12);
}
html[data-theme="solar-circuit"] .dating-profile-media {
  border-bottom: 1px solid rgba(182,255,59,.20);
}
html[data-theme="solar-circuit"] .dating-profile-card-body {
  gap: .6rem;
  padding: .8rem;
}
html[data-theme="solar-circuit"] .dating-profile-name {
  font-size: 1rem;
  font-weight: 860;
  letter-spacing: .01em;
  text-transform: uppercase;
}

html[data-theme="lunar-cloud"] .dating-profile-card {
  border-color: rgba(229,235,238,.09);
  border-radius: 32px;
  background:
    linear-gradient(155deg, rgba(255,255,255,.035), transparent 42%),
    rgba(39,52,65,.92);
  box-shadow: 0 22px 50px rgba(8,13,18,.17);
}
html[data-theme="lunar-cloud"] .dating-profile-media {
  margin: 9px;
  width: calc(100% - 18px);
  border-radius: 25px;
}
html[data-theme="lunar-cloud"] .dating-profile-name {
  font-family: var(--font-display);
  font-size: 1.26rem;
  font-weight: 700;
}

@media (max-width: 560px) {
  html[data-theme="spaceglas"] .dating-profile-media,
  html[data-theme="mint-orbit"] .dating-profile-media,
  html[data-theme="lunar-cloud"] .dating-profile-media {
    margin: 6px;
    width: calc(100% - 12px);
  }
}

/* ---------- Admin theme management (V2.6.3.3) ---------- */
.admin-theme-table td { vertical-align: middle; }
.admin-theme-identity { display: flex; align-items: center; gap: .75rem; min-width: 190px; }
.admin-theme-identity .theme-preview { flex: 0 0 54px; width: 54px; height: 38px; }
.admin-theme-default-pill {
  display: inline-flex;
  align-items: center;
  margin-top: .35rem;
  padding: .2rem .48rem;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  border-radius: var(--radius-pill);
  color: var(--accent);
  background: var(--accent-soft);
  font-size: .68rem;
  font-weight: 800;
}
.admin-theme-visibility { color: var(--text-secondary); font-size: .78rem; line-height: 1.55; }
.admin-theme-row-actions { min-width: 240px; flex-wrap: wrap; }
.admin-theme-preview-panel { overflow: hidden; }
.admin-theme-preview-modes { display: flex; gap: .45rem; flex-wrap: wrap; }
.admin-theme-preview-modes .is-active { border-color: var(--accent); background: var(--accent-soft); }
.admin-theme-preview-stage {
  width: 100%;
  min-height: 560px;
  margin-top: 1rem;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--background-deep);
  overflow: hidden;
  transition: max-width var(--transition), margin var(--transition), border-radius var(--transition);
}
.admin-theme-preview-stage.is-mobile { max-width: 390px; margin-left: auto; margin-right: auto; }
.admin-theme-preview-stage iframe { display: block; width: 100%; min-height: 560px; border: 0; background: var(--background-deep); }
.admin-theme-form { display: grid; gap: 1.1rem; }
.admin-theme-editor-section {
  padding: 1rem;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-secondary) 62%, transparent);
}
.admin-theme-editor-section > h3 { margin-bottom: .75rem; }
.admin-theme-form-grid,
.admin-theme-token-grid,
.admin-theme-preview-input-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .8rem;
}
.admin-theme-form-wide { grid-column: span 2; }
.admin-theme-toggle-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .65rem;
  margin-top: .85rem;
}
.admin-theme-toggle-grid .toggle-row {
  min-height: 46px;
  padding: .65rem .75rem;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.admin-theme-subheading { margin-bottom: .8rem; }
.admin-theme-subheading h3 { margin-bottom: .15rem; }
.admin-theme-advanced {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-secondary) 55%, transparent);
  overflow: hidden;
}
.admin-theme-advanced summary { cursor: pointer; padding: .9rem 1rem; font-weight: 800; }
.admin-theme-advanced[open] summary { border-bottom: 1px solid var(--border-soft); }
.admin-theme-advanced .form-group { padding: 1rem; }
.admin-theme-code-input { min-height: 220px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8rem; line-height: 1.55; }
.admin-theme-editor-actions { display: flex; gap: .65rem; flex-wrap: wrap; }

@media (max-width: 1000px) {
  .admin-theme-form-grid,
  .admin-theme-token-grid,
  .admin-theme-preview-input-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-theme-toggle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .admin-theme-form-grid,
  .admin-theme-token-grid,
  .admin-theme-preview-input-grid,
  .admin-theme-toggle-grid { grid-template-columns: 1fr; }
  .admin-theme-form-wide { grid-column: auto; }
  .admin-theme-preview-stage,
  .admin-theme-preview-stage iframe { min-height: 620px; }
  .admin-theme-row-actions { min-width: 190px; }
}

/* ---------- Admin Theme Management polish + favicon library (V2.6.3.4) ---------- */
.admin-theme-preview-panel,
.admin-theme-editor-card {
  position: relative;
  isolation: isolate;
  border-color: color-mix(in srgb, var(--border) 72%, rgba(255,255,255,.22));
  background:
    linear-gradient(145deg, rgba(255,255,255,.055), transparent 32%),
    color-mix(in srgb, var(--surface-elevated) 92%, transparent);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter: blur(18px) saturate(118%);
  -webkit-backdrop-filter: blur(18px) saturate(118%);
}
.admin-theme-preview-panel::before,
.admin-theme-editor-card::before {
  content: '';
  position: absolute;
  inset: 0 12% auto;
  height: 1px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.38), transparent);
  opacity: .65;
}
.admin-theme-table tbody tr {
  transition: background var(--transition), opacity var(--transition), transform var(--transition);
}
.admin-theme-table tbody tr:hover { background: color-mix(in srgb, var(--accent) 4%, transparent); }
.admin-theme-table tbody tr.is-theme-disabled { opacity: .76; }
.admin-theme-identity > span:last-child { display: grid; gap: .15rem; }
.admin-theme-identity small { color: var(--text-secondary); }
.admin-theme-badge-stack { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; }
.admin-theme-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: .24rem .52rem;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--surface-elevated) 88%, transparent);
  color: var(--text-secondary);
  font-size: .68rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}
.admin-theme-badge.is-active { color: var(--success); border-color: color-mix(in srgb, var(--success) 34%, transparent); background: color-mix(in srgb, var(--success) 9%, var(--surface)); }
.admin-theme-badge.is-disabled { color: var(--text-secondary); }
.admin-theme-badge.is-default { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 38%, transparent); background: var(--accent-soft); }
.admin-theme-badge.is-custom { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 36%, transparent); background: color-mix(in srgb, var(--warning) 9%, var(--surface)); }
.admin-theme-badge.is-public,
.admin-theme-badge.is-auth { color: var(--text-primary); }
.admin-theme-badge.is-muted { opacity: .7; }

.admin-theme-preview-stage {
  position: relative;
  padding: 7px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, rgba(255,255,255,.28));
  border-radius: calc(var(--radius-lg) + 7px);
  background:
    linear-gradient(135deg, rgba(255,255,255,.08), transparent 25%),
    color-mix(in srgb, var(--background-deep) 94%, transparent);
  box-shadow: 0 24px 58px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.08);
}
.admin-theme-preview-stage::after {
  content: '';
  position: absolute;
  inset: 7px 18% auto;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
  opacity: .55;
}
.admin-theme-preview-stage iframe { border-radius: var(--radius-lg); }
.admin-theme-preview-stage.is-mobile {
  max-width: 408px;
  border-radius: 34px;
  padding: 10px;
  box-shadow: 0 28px 72px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.1);
}
.admin-theme-preview-stage.is-mobile iframe { border-radius: 25px; }
.admin-theme-preview-modes .is-active {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--border));
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.admin-theme-editor-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; }
.admin-theme-unsaved {
  display: inline-flex;
  align-items: center;
  padding: .27rem .55rem;
  border: 1px solid color-mix(in srgb, var(--warning) 42%, transparent);
  border-radius: var(--radius-pill);
  color: var(--warning);
  background: color-mix(in srgb, var(--warning) 9%, var(--surface));
  font-size: .68rem;
  font-weight: 850;
}
.admin-theme-editor-card.has-unsaved-changes {
  border-color: color-mix(in srgb, var(--warning) 34%, var(--border));
}
.admin-theme-validation-summary {
  padding: .85rem 1rem;
  border: 1px solid color-mix(in srgb, var(--danger) 38%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--danger) 8%, var(--surface));
  color: var(--text-primary);
}
.admin-theme-validation-summary strong { color: var(--danger); }
.admin-theme-validation-summary ul { margin: .45rem 0 0 1.15rem; color: var(--text-secondary); }
#admin-theme-form [aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 13%, transparent); }

.admin-theme-editor-section {
  position: relative;
  overflow: hidden;
  padding: 1.15rem;
  border-color: color-mix(in srgb, var(--border-soft) 80%, rgba(255,255,255,.14));
  background:
    linear-gradient(150deg, rgba(255,255,255,.035), transparent 34%),
    color-mix(in srgb, var(--surface-secondary) 88%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.admin-theme-editor-section::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 1px;
  background: linear-gradient(180deg, rgba(255,255,255,.28), transparent 34%, rgba(255,255,255,.06));
  opacity: .7;
}
.admin-theme-section-heading {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  margin-bottom: 1rem;
}
.admin-theme-section-heading > span {
  display: grid;
  place-items: center;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border-soft));
  border-radius: 10px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  font-size: .66rem;
  font-weight: 900;
}
.admin-theme-section-heading h3 { margin: 0 0 .12rem; }
.admin-theme-section-heading small,
.admin-theme-help { color: var(--text-secondary); line-height: 1.45; }
.admin-theme-help { margin: .75rem 0 0; font-size: .76rem; }
.admin-theme-toggle-grid .toggle-row { align-items: flex-start; }
.admin-theme-toggle-grid .toggle-row > span { display: grid; gap: .18rem; }
.admin-theme-toggle-grid .toggle-row strong { font-size: .82rem; }
.admin-theme-toggle-grid .toggle-row small { color: var(--text-secondary); font-size: .7rem; line-height: 1.35; }
.admin-theme-toggle-grid .toggle-row.is-disabled { opacity: .68; cursor: not-allowed; }
.admin-theme-toggle-grid .toggle-row.is-disabled input { cursor: not-allowed; }

.admin-theme-color-input { position: relative; }
.admin-theme-color-input .form-control { padding-right: 2.75rem; }
.admin-theme-color-preview {
  position: absolute;
  top: 50%;
  right: .58rem;
  width: 26px;
  height: 26px;
  transform: translateY(-50%);
  border: 1px solid color-mix(in srgb, var(--border) 85%, rgba(255,255,255,.22));
  border-radius: 8px;
  background:
    linear-gradient(45deg, color-mix(in srgb, var(--text-secondary) 12%, transparent) 25%, transparent 25% 75%, color-mix(in srgb, var(--text-secondary) 12%, transparent) 75%),
    linear-gradient(45deg, color-mix(in srgb, var(--text-secondary) 12%, transparent) 25%, transparent 25% 75%, color-mix(in srgb, var(--text-secondary) 12%, transparent) 75%);
  background-size: 8px 8px;
  background-position: 0 0, 4px 4px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
}
.admin-theme-color-preview.is-invalid { border-color: var(--danger); box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 12%, transparent); }
.admin-theme-selector-preview-settings {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-soft);
}
.admin-theme-subheading h4 { margin: 0 0 .12rem; }
.admin-theme-subheading small { color: var(--text-secondary); }
.admin-theme-appearance-grid .form-group small { color: var(--text-secondary); line-height: 1.4; }

.admin-theme-branding-grid {
  display: grid;
  grid-template-columns: minmax(220px,.65fr) minmax(0,1.35fr);
  gap: 1rem;
}
.admin-theme-favicon-current,
.admin-theme-favicon-controls {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}
.admin-theme-favicon-current {
  display: flex;
  align-items: center;
  gap: .85rem;
  min-height: 118px;
  padding: 1rem;
}
.admin-theme-favicon-current > div:last-child { display: grid; gap: .2rem; min-width: 0; }
.admin-theme-favicon-current strong { overflow-wrap: anywhere; }
.admin-theme-favicon-current small { color: var(--text-secondary); line-height: 1.4; }
.admin-theme-favicon-frame {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 76px;
  width: 76px;
  height: 76px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, rgba(255,255,255,.22));
  border-radius: 20px;
  background:
    radial-gradient(circle at 24% 18%, rgba(255,255,255,.13), transparent 38%),
    color-mix(in srgb, var(--surface-elevated) 92%, transparent);
  box-shadow: 0 12px 30px rgba(0,0,0,.13), inset 0 1px 0 rgba(255,255,255,.12);
  overflow: hidden;
}
.admin-theme-favicon-frame::after {
  content: '';
  position: absolute;
  inset: 0 12% auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
}
.admin-theme-favicon-frame img { width: 48px; height: 48px; object-fit: contain; }
.admin-theme-favicon-controls { display: grid; gap: .8rem; padding: 1rem; }
.admin-theme-upload-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .6rem; align-items: center; }
.admin-theme-favicon-actions { display: flex; gap: .55rem; flex-wrap: wrap; }
.admin-theme-favicon-actions button:disabled { opacity: .5; cursor: not-allowed; }

.admin-theme-advanced {
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
.admin-theme-editor-actions {
  position: sticky;
  bottom: .7rem;
  z-index: 4;
  padding: .75rem;
  border: 1px solid color-mix(in srgb, var(--border) 76%, rgba(255,255,255,.18));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-elevated) 91%, transparent);
  box-shadow: 0 14px 34px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
}

.toast.toast-success { border-color: color-mix(in srgb, var(--success) 45%, var(--border)); }
.toast.toast-error { border-color: color-mix(in srgb, var(--danger) 48%, var(--border)); }
.toast.toast-info { border-color: color-mix(in srgb, var(--accent) 28%, var(--border)); }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .admin-theme-preview-panel,
  .admin-theme-editor-card,
  .admin-theme-editor-section,
  .admin-theme-editor-actions { background: var(--surface-elevated); }
}

@media (max-width: 820px) {
  .admin-theme-branding-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .admin-theme-editor-section { padding: .9rem; }
  .admin-theme-upload-row { grid-template-columns: 1fr; }
  .admin-theme-upload-row .btn { width: 100%; }
  .admin-theme-editor-actions { bottom: .35rem; }
  .admin-theme-preview-stage.is-mobile { max-width: 100%; }
}

/* =========================================================
   V2.6.3.5 — visual redesign refinement for the five newer
   themes only. Purple, Klassik and Original are intentionally
   excluded from every selector in this release layer.
   ========================================================= */

/* ---------- SpaceGlas: premium black / white liquid glass ---------- */
html[data-theme="spaceglas"] {
  --background: #050607;
  --background-deep: #010203;
  --background-soft: #0b0d10;
  --surface: rgba(15, 18, 21, .56);
  --surface-secondary: rgba(255, 255, 255, .052);
  --surface-elevated: rgba(18, 21, 25, .78);
  --surface-translucent: rgba(8, 10, 12, .64);
  --text-primary: #f7f8f9;
  --text-secondary: #c6cbd0;
  --text-muted: #858c93;
  --accent: #edf5f8;
  --accent-hover: #ffffff;
  --accent-contrast: #07090a;
  --accent-soft: rgba(218, 239, 245, .095);
  --accent-blue: #9dd5df;
  --border: rgba(255,255,255,.15);
  --border-soft: rgba(255,255,255,.075);
  --header-bg: rgba(5,7,9,.58);
  --input-background: rgba(2,4,6,.46);
  --body-background:
    radial-gradient(circle at 16% -12%, rgba(255,255,255,.105), transparent 25rem),
    radial-gradient(circle at 88% 4%, rgba(130,190,202,.085), transparent 27rem),
    radial-gradient(circle at 54% 115%, rgba(74,91,108,.19), transparent 38rem),
    linear-gradient(158deg, #0a0c0f 0%, #040608 46%, #010203 100%);
  --radius-sm: 13px;
  --radius-md: 19px;
  --radius-lg: 27px;
  --radius-xl: 34px;
  --shadow: 0 30px 88px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.12);
  --shadow-soft: 0 18px 52px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.08);
}
html[data-theme="spaceglas"] body {
  background-size: auto, auto, auto, auto;
}
html[data-theme="spaceglas"] .app-header,
html[data-theme="spaceglas"] body > header:not(.app-header) {
  position: fixed;
  inset: 12px 16px auto;
  width: auto;
  min-height: 64px;
  border: 1px solid rgba(255,255,255,.145);
  border-radius: 24px;
  background:
    linear-gradient(115deg, rgba(255,255,255,.11), rgba(255,255,255,.025) 42%, rgba(153,214,225,.03) 74%, rgba(255,255,255,.055)),
    rgba(4,6,8,.62);
  box-shadow:
    0 26px 76px rgba(0,0,0,.36),
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 -1px 0 rgba(255,255,255,.035);
  backdrop-filter: blur(30px) saturate(135%);
  -webkit-backdrop-filter: blur(30px) saturate(135%);
  overflow: visible;
}
html[data-theme="spaceglas"] .app-header::before,
html[data-theme="spaceglas"] body > header:not(.app-header)::before {
  content: "";
  position: absolute;
  inset: 0 8% auto;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.62), rgba(191,230,238,.28), transparent);
  opacity: .78;
}
html[data-theme="spaceglas"] .app-page { padding-top: 92px; }
html[data-theme="spaceglas"] .app-brand,
html[data-theme="spaceglas"] .logo {
  font-weight: 730;
  letter-spacing: -.035em;
  color: rgb(255, 255, 255);
}
html[data-theme="spaceglas"] .brand-heart {
  color: #d9e7eb;
  filter: drop-shadow(0 0 10px rgba(170,220,230,.14));
}
html[data-theme="spaceglas"] .app-topnav {
  gap: .28rem;
  padding: 4px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 17px;
  background: rgba(255,255,255,.025);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}
html[data-theme="spaceglas"] .topnav-link {
  min-height: 38px;
  padding: .56rem .9rem;
  border: 1px solid transparent;
  border-radius: 12px;
  font-weight: 610;
  color: #aeb5bb;
}
html[data-theme="spaceglas"] .topnav-link:hover {
  color: #eef2f4;
  background: rgba(255,255,255,.045);
}
html[data-theme="spaceglas"] .topnav-link.is-active {
  color: rgb(255, 255, 255);
  border-color: rgba(255,255,255,.115);
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.038)),
    rgba(255,255,255,.025);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 5px 18px rgba(0,0,0,.18);
}
html[data-theme="spaceglas"] .app-shell {
  gap: 1.25rem;
  padding-top: 1.15rem;
}
html[data-theme="spaceglas"] .friends-sidebar-inner,
html[data-theme="spaceglas"] .card,
html[data-theme="spaceglas"] .messages-inbox,
html[data-theme="spaceglas"] .messages-chat,
html[data-theme="spaceglas"] .feed-tag-filter,
html[data-theme="spaceglas"] .visual-mockup,
html[data-theme="spaceglas"] .showcase-card,
html[data-theme="spaceglas"] .newsletter-signup {
  position: relative;
  border: 1px solid rgba(255,255,255,.115);
  background:
    linear-gradient(138deg, rgba(255,255,255,.085), rgba(255,255,255,.018) 44%, rgba(137,197,208,.022) 73%, rgba(255,255,255,.035)),
    rgba(8,10,13,.57);
  box-shadow:
    0 28px 76px rgba(0,0,0,.27),
    inset 0 1px 0 rgba(255,255,255,.13),
    inset 0 -1px 0 rgba(255,255,255,.022);
  backdrop-filter: blur(25px) saturate(128%);
  -webkit-backdrop-filter: blur(25px) saturate(128%);
}
html[data-theme="spaceglas"] .friends-sidebar-inner::after,
html[data-theme="spaceglas"] .feed-post::after,
html[data-theme="spaceglas"] .profile-summary::after,
html[data-theme="spaceglas"] .public-profile-hero::after,
html[data-theme="spaceglas"] .messages-chat::after {
  content: "";
  position: absolute;
  inset: 0 auto auto 9%;
  width: 54%;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.60), transparent);
  opacity: .45;
}
html[data-theme="spaceglas"] .feed-list { gap: 1rem; }
html[data-theme="spaceglas"] .feed-post {
  overflow: hidden;
  padding: 1.55rem 1.65rem;
  border-radius: 26px;
}
html[data-theme="spaceglas"] .feed-post:hover {
  transform: translateY(-2px) scale(1.002);
  border-color: rgba(255,255,255,.19);
  box-shadow: 0 34px 86px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.17);
}
html[data-theme="spaceglas"] .feed-intro h1,
html[data-theme="spaceglas"] .post-title,
html[data-theme="spaceglas"] .public-profile-title-row h1 {
  font-family: var(--font-sans);
  font-weight: 665;
  letter-spacing: -.048em;
}
html[data-theme="spaceglas"] .eyebrow {
  color: #9da5ab;
  letter-spacing: .16em;
}
html[data-theme="spaceglas"] .post-footer,
html[data-theme="spaceglas"] .profile-facts > div,
html[data-theme="spaceglas"] .sidebar-divider {
  border-color: rgba(255,255,255,.07);
}
html[data-theme="spaceglas"] .btn {
  border-radius: 14px;
  min-height: 43px;
}
html[data-theme="spaceglas"] .btn-primary {
  border: 1px solid rgba(255,255,255,.72);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 95%, #fff), color-mix(in srgb, var(--accent) 83%, #a9b6bc));
  color: var(--accent-contrast);
  box-shadow: 0 12px 32px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.95);
  font-weight: 740;
}
html[data-theme="spaceglas"] .btn-primary:hover {
  transform: translateY(-1px);
  background: #fff;
  box-shadow: 0 16px 38px rgba(0,0,0,.36), 0 0 24px rgba(161,217,228,.07);
}
html[data-theme="spaceglas"] .btn-secondary,
html[data-theme="spaceglas"] .icon-button,
html[data-theme="spaceglas"] .avatar-button,
html[data-theme="spaceglas"] .feed-tag-filter-button,
html[data-theme="spaceglas"] .match-badge,
html[data-theme="spaceglas"] .post-tag-badge {
  border: 1px solid rgba(255,255,255,.105);
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)),
    rgba(255,255,255,.018);
  color: var(--text-primary);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.065);
}
html[data-theme="spaceglas"] .app-search,
html[data-theme="spaceglas"] .form-control,
html[data-theme="spaceglas"] .chat-input-shell {
  border: 1px solid rgba(255,255,255,.105);
  border-radius: 15px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012)),
    rgba(1,3,5,.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
html[data-theme="spaceglas"] .app-search:focus-within,
html[data-theme="spaceglas"] .form-control:focus,
html[data-theme="spaceglas"] .chat-input-shell:focus-within {
  border-color: color-mix(in srgb, var(--accent-blue) 34%, rgba(255,255,255,.15));
  box-shadow: 0 0 0 3px rgba(158,213,223,.055), inset 0 1px 0 rgba(255,255,255,.08);
}
html[data-theme="spaceglas"] .public-profile-hero {
  position: relative;
  overflow: hidden;
  border-radius: 34px;
  padding: 2.25rem;
  background:
    radial-gradient(circle at 84% -4%, rgba(166,218,228,.095), transparent 19rem),
    linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,.018)),
    rgba(7,10,13,.62);
}
html[data-theme="spaceglas"] .public-profile-avatar,
html[data-theme="spaceglas"] .large-avatar,
html[data-theme="spaceglas"] .person-avatar,
html[data-theme="spaceglas"] .post-avatar {
  border: 1px solid rgba(255,255,255,.20);
  box-shadow: 0 10px 28px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.16);
}
html[data-theme="spaceglas"] .messages-inbox,
html[data-theme="spaceglas"] .messages-chat { border-radius: 28px; }
html[data-theme="spaceglas"] .conversation-row-shell {
  border-radius: 16px;
  border: 1px solid transparent;
}
html[data-theme="spaceglas"] .conversation-row-shell.is-active {
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.055);
  box-shadow: inset 2px 0 0 rgba(219,240,244,.62), inset 0 1px 0 rgba(255,255,255,.04);
}
html[data-theme="spaceglas"] .chat-message-list {
  background:
    radial-gradient(circle at 82% 12%, rgba(137,198,210,.05), transparent 20rem),
    linear-gradient(180deg, rgba(255,255,255,.014), transparent 35%),
    rgba(1,3,5,.60);
}
html[data-theme="spaceglas"] .chat-message-bubble {
  border: 1px solid rgba(255,255,255,.095);
  border-radius: 18px 18px 18px 7px;
  background: rgba(255,255,255,.055);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
html[data-theme="spaceglas"] .chat-message-row.is-own .chat-message-bubble {
  border-color: rgba(255,255,255,.32);
  border-radius: 18px 18px 7px 18px;
  background: linear-gradient(145deg, rgba(248,251,252,.98), rgba(214,226,231,.94));
  color: #090b0c;
}
html[data-theme="spaceglas"] .chat-composer,
html[data-theme="spaceglas"] .messages-chat-header {
  background: rgba(6,8,11,.68);
  backdrop-filter: blur(22px) saturate(125%);
  -webkit-backdrop-filter: blur(22px) saturate(125%);
}
html[data-theme="spaceglas"] .modal-card,
html[data-theme="spaceglas"] .profile-search-results,
html[data-theme="spaceglas"] .header-profile-menu,
html[data-theme="spaceglas"] .profile-options-menu,
html[data-theme="spaceglas"] .chat-actions-menu,
html[data-theme="spaceglas"] .conversation-actions-menu {
  border: 1px solid rgba(255,255,255,.145);
  border-radius: 25px;
  background:
    linear-gradient(140deg, rgba(255,255,255,.095), rgba(255,255,255,.02) 52%),
    rgba(6,8,10,.83);
  box-shadow: 0 34px 100px rgba(0,0,0,.56), inset 0 1px 0 rgba(255,255,255,.13);
  backdrop-filter: blur(32px) saturate(130%);
  -webkit-backdrop-filter: blur(32px) saturate(130%);
}
html[data-theme="spaceglas"] .theme-option {
  border: 1px solid rgba(255,255,255,.105);
  border-radius: 17px;
  background: rgba(255,255,255,.026);
}
html[data-theme="spaceglas"] .theme-option.is-selected {
  border-color: rgba(255,255,255,.30);
  background: rgba(255,255,255,.055);
  box-shadow: 0 0 0 2px rgba(169,218,227,.045), inset 0 1px 0 rgba(255,255,255,.10);
}
html[data-theme="spaceglas"] .spaceglas-preview {
  border-radius: 14px;
  border-color: rgba(255,255,255,.28);
  background:
    linear-gradient(145deg, transparent 0 42%, rgba(255,255,255,.20) 42% 44%, transparent 44%),
    radial-gradient(circle at 70% 28%, rgba(164,220,230,.24), transparent 21%),
    linear-gradient(135deg, #050607, #15191d 56%, #dce8ec 57% 66%, #07090b 67%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 8px 18px rgba(0,0,0,.25);
}

/* ---------- Neon Social: editorial nightlife, bold and asymmetric ---------- */
html[data-theme="neon-social"] {
  --background: #0b0910;
  --background-deep: #050408;
  --background-soft: #17111a;
  --surface: #151019;
  --surface-secondary: #211724;
  --surface-elevated: #1c141f;
  --surface-translucent: rgba(14,10,18,.94);
  --text-primary: #fff8fc;
  --text-secondary: #d3c2cd;
  --text-muted: #8f7e8a;
  --accent: #ff326f;
  --accent-hover: #ff5b8d;
  --accent-contrast: #1d020b;
  --accent-soft: rgba(255,50,111,.13);
  --accent-blue: #2dd8c5;
  --border: rgba(255,80,137,.28);
  --border-soft: rgba(255,255,255,.09);
  --body-background:
    linear-gradient(120deg, rgba(105,57,225,.11), transparent 26%),
    radial-gradient(circle at 96% 7%, rgba(255,50,111,.12), transparent 24rem),
    linear-gradient(167deg, #120c16 0%, #09080e 54%, #050408 100%);
  --radius-sm: 7px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
}
html[data-theme="neon-social"] .app-header,
html[data-theme="neon-social"] body > header:not(.app-header) {
  min-height: 74px;
  border-bottom: 1px solid rgba(255,255,255,.075);
  background: rgba(6,5,9,.94);
  box-shadow: 0 14px 40px rgba(0,0,0,.30);
}
html[data-theme="neon-social"] .app-header::after,
html[data-theme="neon-social"] body > header:not(.app-header)::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent) 0 24%, #6e42e8 24% 48%, var(--accent-blue) 48% 61%, transparent 61%);
  opacity: .85;
}
html[data-theme="neon-social"] .app-page { padding-top: 74px; }
html[data-theme="neon-social"] .app-brand,
html[data-theme="neon-social"] .logo {
  font-weight: 900;
  letter-spacing: -.055em;
  text-transform: uppercase;
}
html[data-theme="neon-social"] .app-topnav { gap: .1rem; }
html[data-theme="neon-social"] .topnav-link {
  position: relative;
  min-height: 42px;
  padding: .65rem .92rem;
  border-radius: 4px 14px 4px 14px;
  font-weight: 730;
}
html[data-theme="neon-social"] .topnav-link.is-active {
  color: rgb(255, 255, 255);
  background: color-mix(in srgb, var(--accent) 11%, transparent);
  box-shadow: inset 0 -2px 0 var(--accent);
}
html[data-theme="neon-social"] .app-shell {
  gap: 1rem;
  padding-top: 1.25rem;
}
html[data-theme="neon-social"] .friends-sidebar-inner,
html[data-theme="neon-social"] .card,
html[data-theme="neon-social"] .messages-inbox,
html[data-theme="neon-social"] .messages-chat,
html[data-theme="neon-social"] .feed-tag-filter,
html[data-theme="neon-social"] .visual-mockup,
html[data-theme="neon-social"] .showcase-card,
html[data-theme="neon-social"] .newsletter-signup {
  border: 1px solid rgba(255,255,255,.085);
  border-radius: 7px 25px 7px 25px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--surface) 96%, #2c1731), var(--surface));
  box-shadow: 10px 12px 0 rgba(0,0,0,.13), 0 22px 54px rgba(0,0,0,.22);
}
html[data-theme="neon-social"] .feed-list { gap: .85rem; }
html[data-theme="neon-social"] .feed-post {
  position: relative;
  overflow: hidden;
  padding: 1.35rem 1.45rem 1.35rem 1.7rem;
  border-radius: 4px 24px 4px 24px;
}
html[data-theme="neon-social"] .feed-post::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--accent);
  opacity: .72;
}
html[data-theme="neon-social"] .feed-post:nth-child(even)::before { background: var(--accent-blue); }
html[data-theme="neon-social"] .feed-post:nth-child(3n)::before { background: #7650ed; }
html[data-theme="neon-social"] .feed-post:hover {
  transform: translate(-2px,-2px);
  box-shadow: 14px 16px 0 rgba(0,0,0,.16), 0 28px 62px rgba(0,0,0,.28);
}
html[data-theme="neon-social"] .feed-intro h1,
html[data-theme="neon-social"] .post-title,
html[data-theme="neon-social"] .public-profile-title-row h1 {
  font-weight: 880;
  letter-spacing: -.055em;
}
html[data-theme="neon-social"] .eyebrow {
  color: var(--accent-blue);
  font-weight: 800;
  letter-spacing: .18em;
}
html[data-theme="neon-social"] .post-tag-badge,
html[data-theme="neon-social"] .match-badge,
html[data-theme="neon-social"] .feed-tag-filter-button {
  border: 1px solid color-mix(in srgb, var(--accent) 34%, rgba(255,255,255,.08));
  border-radius: 5px 11px 5px 11px;
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  color: color-mix(in srgb, var(--text-primary) 88%, var(--accent));
}
html[data-theme="neon-social"] .btn {
  min-height: 42px;
  border-radius: 5px 13px 5px 13px;
  font-weight: 790;
}
html[data-theme="neon-social"] .btn-primary {
  border: 1px solid color-mix(in srgb, var(--accent) 72%, #fff);
  background: var(--accent);
  color: var(--accent-contrast);
  box-shadow: 5px 5px 0 color-mix(in srgb, var(--accent) 24%, transparent);
}
html[data-theme="neon-social"] .btn-primary:hover {
  transform: translate(-2px,-2px);
  box-shadow: 7px 7px 0 color-mix(in srgb, var(--accent) 24%, transparent);
}
html[data-theme="neon-social"] .btn-secondary,
html[data-theme="neon-social"] .icon-button,
html[data-theme="neon-social"] .avatar-button {
  border: 1px solid rgba(255,255,255,.10);
  background: #110d14;
}
html[data-theme="neon-social"] .app-search,
html[data-theme="neon-social"] .form-control,
html[data-theme="neon-social"] .chat-input-shell {
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 6px 16px 6px 16px;
  background: #09070c;
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 28%, transparent);
}
html[data-theme="neon-social"] .app-search:focus-within,
html[data-theme="neon-social"] .form-control:focus,
html[data-theme="neon-social"] .chat-input-shell:focus-within {
  border-color: color-mix(in srgb, var(--accent) 56%, rgba(255,255,255,.1));
  box-shadow: inset 3px 0 0 var(--accent), 0 0 0 3px color-mix(in srgb, var(--accent) 7%, transparent);
}
html[data-theme="neon-social"] .profile-summary,
html[data-theme="neon-social"] .public-profile-hero {
  position: relative;
  overflow: hidden;
  border-radius: 7px 32px 7px 32px;
  background:
    linear-gradient(128deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 33%),
    linear-gradient(168deg, #1b1320, #100c13);
}
html[data-theme="neon-social"] .public-profile-hero::after {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  right: -44px;
  top: -54px;
  border: 18px solid color-mix(in srgb, var(--accent-blue) 18%, transparent);
  transform: rotate(16deg);
  pointer-events: none;
}
html[data-theme="neon-social"] .public-profile-avatar,
html[data-theme="neon-social"] .large-avatar,
html[data-theme="neon-social"] .person-avatar,
html[data-theme="neon-social"] .post-avatar {
  border: 2px solid transparent;
  background: linear-gradient(var(--surface),var(--surface)) padding-box,
    linear-gradient(145deg,var(--accent),#7650ed,var(--accent-blue)) border-box;
}
html[data-theme="neon-social"] .conversation-row-shell {
  border-radius: 4px 15px 4px 15px;
  border-left: 3px solid transparent;
}
html[data-theme="neon-social"] .conversation-row-shell.is-active {
  border-left-color: var(--accent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 14%, transparent), transparent);
  box-shadow: none;
}
html[data-theme="neon-social"] .chat-message-list {
  background:
    radial-gradient(circle at 15% 20%, rgba(106,66,232,.07), transparent 20rem),
    radial-gradient(circle at 88% 76%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 18rem),
    #07060a;
}
html[data-theme="neon-social"] .chat-message-bubble {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px 16px 16px 3px;
  background: #19111d;
}
html[data-theme="neon-social"] .chat-message-row.is-own .chat-message-bubble {
  border: 0;
  border-radius: 16px 16px 3px 16px;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #6d35b8));
  color: rgb(255, 255, 255);
}
html[data-theme="neon-social"] .chat-composer {
  background: #0b080e;
  border-top: 2px solid color-mix(in srgb, var(--accent) 18%, transparent);
}
html[data-theme="neon-social"] .modal-card,
html[data-theme="neon-social"] .profile-search-results,
html[data-theme="neon-social"] .header-profile-menu,
html[data-theme="neon-social"] .profile-options-menu,
html[data-theme="neon-social"] .chat-actions-menu,
html[data-theme="neon-social"] .conversation-actions-menu {
  border: 1px solid color-mix(in srgb, var(--accent) 25%, rgba(255,255,255,.08));
  border-radius: 7px 28px 7px 28px;
  background: #100c13;
  box-shadow: 14px 16px 0 rgba(0,0,0,.18), 0 30px 80px rgba(0,0,0,.48);
}
html[data-theme="neon-social"] .notification-row.is-unread {
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 15%, transparent), color-mix(in srgb, var(--accent-blue) 5%, transparent));
  box-shadow: inset 3px 0 0 var(--accent);
}
html[data-theme="neon-social"] .theme-option {
  border-radius: 5px 16px 5px 16px;
}
html[data-theme="neon-social"] .neon-social-preview {
  border-radius: 4px 13px 4px 13px;
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background:
    linear-gradient(90deg, var(--accent) 0 7%, transparent 7%),
    linear-gradient(145deg, #160d1d 0 50%, #47246f 50% 67%, #073b3a 67%);
  box-shadow: 5px 5px 0 rgba(0,0,0,.2);
}

/* ---------- Mint Orbit: airy, calm, tactile soft-interface ---------- */
html[data-theme="mint-orbit"] {
  color-scheme: light;
  --background: #eef8f4;
  --background-deep: #e2f1ec;
  --background-soft: #d9eee7;
  --surface: #fbfffd;
  --surface-secondary: #edf8f4;
  --surface-elevated: #ffffff;
  --surface-translucent: rgba(249,255,252,.90);
  --text-primary: #17342e;
  --text-secondary: #4f6f68;
  --text-muted: #769089;
  --accent: #1f9f7b;
  --accent-hover: #177d62;
  --accent-contrast: #08231b;
  --accent-soft: rgba(31,159,123,.105);
  --accent-blue: #3c94a2;
  --border: rgba(37,94,78,.14);
  --border-soft: rgba(37,94,78,.08);
  --header-bg: rgba(248,255,252,.90);
  --input-background: #f2faf7;
  --danger: #ca5667;
  --success: #258b6c;
  --warning: #a97b36;
  --heart: #36a989;
  --body-background:
    radial-gradient(circle at 12% 0%, rgba(54,169,137,.12), transparent 28rem),
    radial-gradient(circle at 92% 18%, rgba(74,151,164,.08), transparent 25rem),
    linear-gradient(160deg, #f7fcfa 0%, #edf7f3 52%, #e3f1ec 100%);
  --modal-backdrop: rgba(21,55,46,.24);
  --radius-sm: 18px;
  --radius-md: 26px;
  --radius-lg: 34px;
  --radius-xl: 42px;
  --shadow: 0 20px 48px rgba(45,91,78,.10);
  --shadow-soft: 0 10px 28px rgba(45,91,78,.08);
  --shadow-modal: 0 30px 80px rgba(31,74,62,.18);
}
html[data-theme="mint-orbit"] .app-header,
html[data-theme="mint-orbit"] body > header:not(.app-header) {
  min-height: 82px;
  border-bottom: 0;
  background: rgba(250,255,253,.90);
  box-shadow: 0 10px 30px rgba(41,88,74,.08);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
html[data-theme="mint-orbit"] .app-page { padding-top: 82px; }
html[data-theme="mint-orbit"] .app-brand,
html[data-theme="mint-orbit"] .logo {
  color: #17342e;
  font-weight: 760;
  letter-spacing: -.04em;
}
html[data-theme="mint-orbit"] .app-topnav {
  gap: .35rem;
  padding: 4px;
  border-radius: 999px;
  background: rgba(31,159,123,.05);
}
html[data-theme="mint-orbit"] .topnav-link {
  min-height: 42px;
  padding: .65rem 1.05rem;
  border-radius: 999px;
  color: #58736d;
  font-weight: 660;
}
html[data-theme="mint-orbit"] .topnav-link.is-active {
  color: #174e40;
  background: #fff;
  box-shadow: 0 7px 20px rgba(49,93,80,.08), inset 0 0 0 1px rgba(39,104,86,.07);
}
html[data-theme="mint-orbit"] .app-shell {
  gap: 1.55rem;
  padding-top: 1.9rem;
}
html[data-theme="mint-orbit"] .friends-sidebar-inner,
html[data-theme="mint-orbit"] .card,
html[data-theme="mint-orbit"] .messages-inbox,
html[data-theme="mint-orbit"] .messages-chat,
html[data-theme="mint-orbit"] .feed-tag-filter,
html[data-theme="mint-orbit"] .visual-mockup,
html[data-theme="mint-orbit"] .showcase-card,
html[data-theme="mint-orbit"] .newsletter-signup {
  border: 1px solid rgba(34,93,76,.075);
  border-radius: 32px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  box-shadow: 0 18px 48px rgba(43,88,75,.085);
}
html[data-theme="mint-orbit"] .friends-sidebar-inner,
html[data-theme="mint-orbit"] .profile-summary {
  background: linear-gradient(160deg, #ffffff, #f0faf6);
}
html[data-theme="mint-orbit"] .feed-list { gap: 1.3rem; }
html[data-theme="mint-orbit"] .feed-post {
  padding: 1.8rem 1.9rem;
  border-radius: 34px;
}
html[data-theme="mint-orbit"] .feed-post:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 58px rgba(43,88,75,.12);
}
html[data-theme="mint-orbit"] .feed-intro {
  padding: .8rem .6rem;
  margin-bottom: 1.25rem;
}
html[data-theme="mint-orbit"] .feed-intro h1,
html[data-theme="mint-orbit"] .post-title,
html[data-theme="mint-orbit"] .public-profile-title-row h1 {
  color: #16362f;
  font-weight: 720;
  letter-spacing: -.046em;
}
html[data-theme="mint-orbit"] .post-body { color: #2f5149; line-height: 1.82; }
html[data-theme="mint-orbit"] .eyebrow {
  color: var(--accent);
  font-weight: 760;
  letter-spacing: .14em;
}
html[data-theme="mint-orbit"] .post-footer,
html[data-theme="mint-orbit"] .profile-facts > div,
html[data-theme="mint-orbit"] .sidebar-divider {
  border-color: rgba(36,92,76,.085);
}
html[data-theme="mint-orbit"] .btn {
  min-height: 47px;
  border-radius: 999px;
  padding-inline: 1.35rem;
  font-weight: 720;
}
html[data-theme="mint-orbit"] .btn-primary {
  border: 1px solid color-mix(in srgb, var(--accent) 75%, #fff);
  background: var(--accent);
  color: var(--accent-contrast);
  box-shadow: 0 9px 20px color-mix(in srgb, var(--accent) 16%, transparent);
}
html[data-theme="mint-orbit"] .btn-primary:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
}
html[data-theme="mint-orbit"] .btn-secondary,
html[data-theme="mint-orbit"] .icon-button,
html[data-theme="mint-orbit"] .avatar-button {
  border: 1px solid rgba(41,98,82,.09);
  background: #f1f9f6;
  color: #24483f;
}
html[data-theme="mint-orbit"] .app-search,
html[data-theme="mint-orbit"] .form-control,
html[data-theme="mint-orbit"] .chat-input-shell {
  border: 1px solid rgba(39,99,83,.09);
  border-radius: 20px;
  background: #f1f9f6;
  color: var(--text-primary);
  box-shadow: inset 0 1px 2px rgba(32,72,61,.025);
}
html[data-theme="mint-orbit"] .app-search { border-radius: 999px; }
html[data-theme="mint-orbit"] .app-search:focus-within,
html[data-theme="mint-orbit"] .form-control:focus,
html[data-theme="mint-orbit"] .chat-input-shell:focus-within {
  border-color: color-mix(in srgb, var(--accent) 42%, rgba(38,96,80,.1));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 7%, transparent);
}
html[data-theme="mint-orbit"] .match-badge,
html[data-theme="mint-orbit"] .post-tag-badge,
html[data-theme="mint-orbit"] .feed-tag-filter-button {
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, #fff);
  color: color-mix(in srgb, var(--accent) 72%, #17342e);
}
html[data-theme="mint-orbit"] .public-profile-hero {
  overflow: hidden;
  border-radius: 42px;
  padding: 2.5rem;
  background:
    radial-gradient(circle at 87% 8%, rgba(54,169,137,.14), transparent 17rem),
    linear-gradient(145deg, #ffffff, #ebf8f3);
}
html[data-theme="mint-orbit"] .public-profile-avatar,
html[data-theme="mint-orbit"] .large-avatar,
html[data-theme="mint-orbit"] .person-avatar,
html[data-theme="mint-orbit"] .post-avatar {
  border: 5px solid #fff;
  box-shadow: 0 10px 24px rgba(44,91,77,.12);
}
html[data-theme="mint-orbit"] .conversation-row-shell {
  border-radius: 20px;
}
html[data-theme="mint-orbit"] .conversation-row-shell:hover,
html[data-theme="mint-orbit"] .person-row:hover,
html[data-theme="mint-orbit"] .profile-search-item:hover {
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}
html[data-theme="mint-orbit"] .conversation-row-shell.is-active {
  background: color-mix(in srgb, var(--accent) 10%, #fff);
  box-shadow: none;
}
html[data-theme="mint-orbit"] .messages-chat { overflow: hidden; }
html[data-theme="mint-orbit"] .chat-message-list {
  gap: .75rem;
  background: linear-gradient(180deg, #eaf5f1, #f5fbf8 32%, #eff8f5);
}
html[data-theme="mint-orbit"] .chat-message-bubble {
  border: 0;
  border-radius: 22px 22px 22px 8px;
  background: #fff;
  color: #294b43;
  box-shadow: 0 7px 18px rgba(46,88,76,.08);
}
html[data-theme="mint-orbit"] .chat-message-row.is-own .chat-message-bubble {
  border-radius: 22px 22px 8px 22px;
  background: var(--accent);
  color: rgb(255, 255, 255);
}
html[data-theme="mint-orbit"] .chat-composer,
html[data-theme="mint-orbit"] .messages-chat-header {
  border-color: rgba(38,95,79,.07);
  background: rgba(251,255,253,.95);
}
html[data-theme="mint-orbit"] .modal-card,
html[data-theme="mint-orbit"] .profile-search-results,
html[data-theme="mint-orbit"] .header-profile-menu,
html[data-theme="mint-orbit"] .profile-options-menu,
html[data-theme="mint-orbit"] .chat-actions-menu,
html[data-theme="mint-orbit"] .conversation-actions-menu {
  border: 1px solid rgba(34,93,76,.075);
  border-radius: 30px;
  background: #fff;
  color: var(--text-primary);
  box-shadow: 0 28px 76px rgba(31,74,62,.17);
}
html[data-theme="mint-orbit"] .theme-option {
  border: 1px solid rgba(34,93,76,.075);
  border-radius: 22px;
  background: #f6fcf9;
}
html[data-theme="mint-orbit"] .theme-option.is-selected {
  border-color: color-mix(in srgb, var(--accent) 38%, transparent);
  background: #fff;
  box-shadow: 0 8px 24px rgba(40,88,74,.08), 0 0 0 2px color-mix(in srgb, var(--accent) 6%, transparent);
}
html[data-theme="mint-orbit"] .mint-orbit-preview {
  border: 0;
  border-radius: 19px;
  background:
    radial-gradient(circle at 66% 30%, #8bdcc1 0 17%, transparent 18%),
    linear-gradient(145deg, #f5fcf8 0 52%, #d8eee6 52% 74%, #1f9f7b 74%);
  box-shadow: 0 7px 16px rgba(43,88,75,.13);
}

/* ---------- Solar Circuit: dense technical workstation ---------- */
html[data-theme="solar-circuit"] {
  --background: #08121b;
  --background-deep: #040a10;
  --background-soft: #0c1b27;
  --surface: #0d1b26;
  --surface-secondary: #112431;
  --surface-elevated: #10212d;
  --surface-translucent: rgba(7,17,25,.95);
  --text-primary: #eaf1f2;
  --text-secondary: #aab9bd;
  --text-muted: #6f8187;
  --accent: #b8ff3d;
  --accent-hover: #d2ff84;
  --accent-contrast: #081009;
  --accent-soft: rgba(184,255,61,.09);
  --accent-blue: #4cb8c9;
  --border: rgba(177,201,209,.20);
  --border-soft: rgba(177,201,209,.105);
  --body-background:
    linear-gradient(rgba(184,255,61,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(184,255,61,.018) 1px, transparent 1px),
    radial-gradient(circle at 82% 0%, rgba(76,184,201,.08), transparent 25rem),
    #07111a;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-xl: 8px;
  --shadow: 8px 8px 0 rgba(0,0,0,.18), 0 18px 38px rgba(0,0,0,.18);
  --shadow-soft: 4px 4px 0 rgba(0,0,0,.13);
}
html[data-theme="solar-circuit"] body {
  background-size: 34px 34px, 34px 34px, auto, auto;
}
html[data-theme="solar-circuit"] .app-header,
html[data-theme="solar-circuit"] body > header:not(.app-header) {
  min-height: 64px;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  background: #06111a;
  box-shadow: 0 8px 24px rgba(0,0,0,.24);
}
html[data-theme="solar-circuit"] .app-page { padding-top: 64px; }
html[data-theme="solar-circuit"] .app-brand,
html[data-theme="solar-circuit"] .logo {
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-size: .86rem;
}
html[data-theme="solar-circuit"] .app-brand::before,
html[data-theme="solar-circuit"] .logo::before {
  content: "//";
  color: var(--accent);
  margin-right: .4rem;
}
html[data-theme="solar-circuit"] .app-topnav {
  gap: 0;
  border-left: 1px solid rgba(177,201,209,.12);
  border-right: 1px solid rgba(177,201,209,.12);
}
html[data-theme="solar-circuit"] .topnav-link {
  min-height: 38px;
  padding: .56rem .78rem;
  border-right: 1px solid rgba(177,201,209,.10);
  border-radius: 0;
  font-size: .76rem;
  font-weight: 810;
  letter-spacing: .06em;
  text-transform: uppercase;
}
html[data-theme="solar-circuit"] .topnav-link.is-active {
  color: var(--accent-contrast);
  background: var(--accent);
  box-shadow: none;
}
html[data-theme="solar-circuit"] .app-shell {
  grid-template-columns: 232px minmax(0,760px) 294px;
  gap: .8rem;
  padding-top: .95rem;
}
html[data-theme="solar-circuit"] .friends-sidebar-inner,
html[data-theme="solar-circuit"] .card,
html[data-theme="solar-circuit"] .messages-inbox,
html[data-theme="solar-circuit"] .messages-chat,
html[data-theme="solar-circuit"] .feed-tag-filter,
html[data-theme="solar-circuit"] .visual-mockup,
html[data-theme="solar-circuit"] .showcase-card,
html[data-theme="solar-circuit"] .newsletter-signup {
  border: 1px solid rgba(176,200,208,.17);
  border-radius: 4px;
  background: var(--surface);
  box-shadow: 7px 7px 0 rgba(0,0,0,.13);
}
html[data-theme="solar-circuit"] .feed-list { gap: .68rem; }
html[data-theme="solar-circuit"] .feed-post {
  position: relative;
  padding: 1.12rem 1.25rem;
  border-radius: 3px;
  overflow: hidden;
}
html[data-theme="solar-circuit"] .feed-post::before,
html[data-theme="solar-circuit"] .public-profile-hero::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 32px;
  height: 32px;
  border-top: 2px solid var(--accent);
  border-left: 2px solid var(--accent);
  pointer-events: none;
}
html[data-theme="solar-circuit"] .feed-post::after {
  content: "POST";
  position: absolute;
  right: .7rem;
  top: .55rem;
  color: rgba(184,255,61,.46);
  font: 700 .56rem/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .12em;
}
html[data-theme="solar-circuit"] .feed-intro h1,
html[data-theme="solar-circuit"] .post-title,
html[data-theme="solar-circuit"] .public-profile-title-row h1 {
  font-weight: 850;
  letter-spacing: -.032em;
}
html[data-theme="solar-circuit"] .eyebrow,
html[data-theme="solar-circuit"] .messages-count {
  color: var(--accent);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: .65rem;
  font-weight: 750;
  letter-spacing: .15em;
  text-transform: uppercase;
}
html[data-theme="solar-circuit"] .post-footer,
html[data-theme="solar-circuit"] .profile-facts > div,
html[data-theme="solar-circuit"] .sidebar-divider {
  border-color: rgba(177,201,209,.12);
}
html[data-theme="solar-circuit"] .btn {
  min-height: 39px;
  padding: .58rem .9rem;
  border-radius: 2px;
  font-weight: 820;
  letter-spacing: .025em;
}
html[data-theme="solar-circuit"] .btn-primary {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-contrast);
  box-shadow: 4px 4px 0 color-mix(in srgb, var(--accent) 13%, transparent);
}
html[data-theme="solar-circuit"] .btn-primary:hover {
  transform: translate(-1px,-1px);
  box-shadow: 6px 6px 0 color-mix(in srgb, var(--accent) 13%, transparent);
}
html[data-theme="solar-circuit"] .btn-secondary,
html[data-theme="solar-circuit"] .icon-button,
html[data-theme="solar-circuit"] .avatar-button {
  border: 1px solid rgba(177,201,209,.18);
  border-radius: 2px;
  background: #081722;
}
html[data-theme="solar-circuit"] .app-search,
html[data-theme="solar-circuit"] .form-control,
html[data-theme="solar-circuit"] .chat-input-shell {
  border: 1px solid rgba(177,201,209,.18);
  border-radius: 2px;
  background: #06131d;
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 20%, transparent);
}
html[data-theme="solar-circuit"] .app-search:focus-within,
html[data-theme="solar-circuit"] .form-control:focus,
html[data-theme="solar-circuit"] .chat-input-shell:focus-within {
  border-color: color-mix(in srgb, var(--accent) 48%, rgba(177,201,209,.18));
  box-shadow: inset 3px 0 0 var(--accent);
}
html[data-theme="solar-circuit"] .post-tag-badge,
html[data-theme="solar-circuit"] .match-badge,
html[data-theme="solar-circuit"] .feed-tag-filter-button {
  border-radius: 1px;
  border-color: color-mix(in srgb, var(--accent) 25%, rgba(177,201,209,.15));
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  color: color-mix(in srgb, var(--accent) 78%, #fff);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}
html[data-theme="solar-circuit"] .public-profile-hero {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background:
    linear-gradient(rgba(184,255,61,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(184,255,61,.025) 1px, transparent 1px),
    #0c1c28;
  background-size: 28px 28px;
}
html[data-theme="solar-circuit"] .public-profile-avatar,
html[data-theme="solar-circuit"] .large-avatar,
html[data-theme="solar-circuit"] .person-avatar,
html[data-theme="solar-circuit"] .post-avatar {
  border: 1px solid color-mix(in srgb, var(--accent) 36%, rgba(177,201,209,.18));
  border-radius: 3px;
  box-shadow: 4px 4px 0 rgba(0,0,0,.18);
}
html[data-theme="solar-circuit"] .conversation-row-shell,
html[data-theme="solar-circuit"] .person-row {
  border-radius: 2px;
}
html[data-theme="solar-circuit"] .conversation-row-shell.is-active {
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  box-shadow: inset 3px 0 0 var(--accent);
}
html[data-theme="solar-circuit"] .chat-message-list {
  gap: .32rem;
  background:
    linear-gradient(rgba(184,255,61,.018) 1px, transparent 1px),
    #06111a;
  background-size: 100% 26px;
}
html[data-theme="solar-circuit"] .chat-message-bubble {
  border: 1px solid rgba(177,201,209,.16);
  border-radius: 2px;
  background: #0d2230;
  box-shadow: none;
}
html[data-theme="solar-circuit"] .chat-message-row.is-own .chat-message-bubble {
  border-color: color-mix(in srgb, var(--accent) 42%, rgba(177,201,209,.16));
  background: color-mix(in srgb, var(--accent) 10%, #0b241c);
}
html[data-theme="solar-circuit"] .chat-composer {
  padding: .68rem .78rem .78rem;
  background: #081722;
}
html[data-theme="solar-circuit"] .modal-card,
html[data-theme="solar-circuit"] .profile-search-results,
html[data-theme="solar-circuit"] .header-profile-menu,
html[data-theme="solar-circuit"] .profile-options-menu,
html[data-theme="solar-circuit"] .chat-actions-menu,
html[data-theme="solar-circuit"] .conversation-actions-menu {
  border: 1px solid color-mix(in srgb, var(--accent) 24%, rgba(177,201,209,.15));
  border-radius: 3px;
  background: #091925;
  box-shadow: 10px 10px 0 rgba(0,0,0,.20), 0 24px 58px rgba(0,0,0,.34);
}
html[data-theme="solar-circuit"] .theme-option { border-radius: 2px; }
html[data-theme="solar-circuit"] .solar-circuit-preview {
  border-radius: 1px;
  border-color: color-mix(in srgb, var(--accent) 52%, transparent);
  background:
    linear-gradient(rgba(184,255,61,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(184,255,61,.14) 1px, transparent 1px),
    #0b1b28;
  background-size: 8px 8px;
  box-shadow: 4px 4px 0 rgba(0,0,0,.18);
}

/* ---------- Lunar Cloud: cinematic editorial calm ---------- */
html[data-theme="lunar-cloud"] {
  --background: #202730;
  --background-deep: #141a21;
  --background-soft: #313a44;
  --surface: rgba(44,53,63,.92);
  --surface-secondary: rgba(58,68,78,.90);
  --surface-elevated: rgba(50,60,70,.97);
  --surface-translucent: rgba(30,38,47,.88);
  --text-primary: #f3f0ea;
  --text-secondary: #d0d4d5;
  --text-muted: #9ca4a8;
  --accent: #e0e8ed;
  --accent-hover: #f8fafb;
  --accent-contrast: #1d252d;
  --accent-soft: rgba(224,232,237,.09);
  --accent-blue: #afcadb;
  --border: rgba(232,235,236,.16);
  --border-soft: rgba(232,235,236,.075);
  --heart: #d8bbc9;
  --body-background:
    radial-gradient(ellipse at 10% -5%, rgba(205,222,232,.15), transparent 34rem),
    radial-gradient(ellipse at 95% 24%, rgba(218,194,159,.10), transparent 30rem),
    linear-gradient(156deg, #323d48 0%, #222b34 47%, #151b22 100%);
  --radius-sm: 20px;
  --radius-md: 28px;
  --radius-lg: 38px;
  --radius-xl: 46px;
  --shadow: 0 30px 78px rgba(8,13,18,.22);
  --shadow-soft: 0 18px 46px rgba(8,13,18,.14);
}
html[data-theme="lunar-cloud"] .app-header,
html[data-theme="lunar-cloud"] body > header:not(.app-header) {
  min-height: 84px;
  border-bottom: 1px solid rgba(235,238,239,.08);
  background: rgba(22,29,37,.78);
  box-shadow: 0 16px 42px rgba(7,12,17,.14);
  backdrop-filter: blur(22px) saturate(108%);
  -webkit-backdrop-filter: blur(22px) saturate(108%);
}
html[data-theme="lunar-cloud"] .app-page { padding-top: 84px; }
html[data-theme="lunar-cloud"] .app-brand,
html[data-theme="lunar-cloud"] .logo {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -.018em;
}
html[data-theme="lunar-cloud"] .topnav-link {
  min-height: 42px;
  padding: .65rem .96rem;
  border-radius: 16px;
  font-weight: 590;
  color: #bbc1c4;
}
html[data-theme="lunar-cloud"] .topnav-link.is-active {
  color: #f5f1ea;
  background: rgba(239,242,243,.075);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}
html[data-theme="lunar-cloud"] .app-shell {
  gap: 1.65rem;
  padding-top: 2.1rem;
}
html[data-theme="lunar-cloud"] .friends-sidebar-inner,
html[data-theme="lunar-cloud"] .card,
html[data-theme="lunar-cloud"] .messages-inbox,
html[data-theme="lunar-cloud"] .messages-chat,
html[data-theme="lunar-cloud"] .feed-tag-filter,
html[data-theme="lunar-cloud"] .visual-mockup,
html[data-theme="lunar-cloud"] .showcase-card,
html[data-theme="lunar-cloud"] .newsletter-signup {
  border: 1px solid rgba(232,235,236,.085);
  border-radius: 38px;
  background:
    linear-gradient(155deg, rgba(255,255,255,.035), transparent 40%),
    color-mix(in srgb, var(--surface) 96%, transparent);
  box-shadow: 0 28px 70px rgba(8,13,18,.17), inset 0 1px 0 rgba(255,255,255,.025);
}
html[data-theme="lunar-cloud"] .feed-list { gap: 1.45rem; }
html[data-theme="lunar-cloud"] .feed-post {
  padding: 2.05rem 2.15rem;
  border-radius: 40px;
}
html[data-theme="lunar-cloud"] .feed-post:hover {
  transform: translateY(-1px);
  box-shadow: 0 34px 78px rgba(8,13,18,.21), inset 0 1px 0 rgba(255,255,255,.035);
}
html[data-theme="lunar-cloud"] .feed-intro {
  padding: 1rem .65rem;
  margin-bottom: 1.45rem;
}
html[data-theme="lunar-cloud"] .feed-intro h1,
html[data-theme="lunar-cloud"] .post-title,
html[data-theme="lunar-cloud"] .public-profile-title-row h1,
html[data-theme="lunar-cloud"] .modal-header h2,
html[data-theme="lunar-cloud"] .dating-profile-name {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.025em;
}
html[data-theme="lunar-cloud"] .post-title { line-height: 1.14; }
html[data-theme="lunar-cloud"] .post-body {
  line-height: 1.88;
  color: #ece8e2;
}
html[data-theme="lunar-cloud"] .eyebrow {
  color: #dbc5a7;
  letter-spacing: .14em;
}
html[data-theme="lunar-cloud"] .post-footer,
html[data-theme="lunar-cloud"] .profile-facts > div,
html[data-theme="lunar-cloud"] .sidebar-divider {
  border-color: rgba(232,235,236,.075);
}
html[data-theme="lunar-cloud"] .btn {
  min-height: 46px;
  border-radius: 16px;
  padding-inline: 1.25rem;
}
html[data-theme="lunar-cloud"] .btn-primary {
  border: 1px solid rgba(247,248,248,.42);
  background: var(--accent);
  color: var(--accent-contrast);
  box-shadow: 0 9px 22px rgba(9,15,20,.14);
}
html[data-theme="lunar-cloud"] .btn-primary:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
}
html[data-theme="lunar-cloud"] .btn-secondary,
html[data-theme="lunar-cloud"] .icon-button,
html[data-theme="lunar-cloud"] .avatar-button {
  border: 1px solid rgba(235,238,239,.11);
  background: rgba(255,255,255,.026);
}
html[data-theme="lunar-cloud"] .app-search,
html[data-theme="lunar-cloud"] .form-control,
html[data-theme="lunar-cloud"] .chat-input-shell {
  border: 1px solid rgba(233,236,238,.10);
  border-radius: 18px;
  background: rgba(19,27,34,.68);
}
html[data-theme="lunar-cloud"] .app-search:focus-within,
html[data-theme="lunar-cloud"] .form-control:focus,
html[data-theme="lunar-cloud"] .chat-input-shell:focus-within {
  border-color: color-mix(in srgb, var(--accent-blue) 32%, rgba(233,236,238,.10));
  box-shadow: 0 0 0 4px rgba(188,211,225,.035);
}
html[data-theme="lunar-cloud"] .post-tag-badge,
html[data-theme="lunar-cloud"] .match-badge,
html[data-theme="lunar-cloud"] .feed-tag-filter-button {
  border: 0;
  border-radius: 10px;
  background: rgba(218,195,163,.08);
  color: #e1ceb4;
}
html[data-theme="lunar-cloud"] .public-profile-hero {
  position: relative;
  overflow: hidden;
  border-radius: 46px;
  padding: 2.7rem;
  background:
    radial-gradient(ellipse at 84% 2%, rgba(218,195,163,.10), transparent 20rem),
    radial-gradient(ellipse at 8% 0%, rgba(185,211,226,.10), transparent 23rem),
    linear-gradient(155deg, rgba(255,255,255,.035), transparent 42%),
    #2b3641;
}
html[data-theme="lunar-cloud"] .public-profile-avatar,
html[data-theme="lunar-cloud"] .large-avatar,
html[data-theme="lunar-cloud"] .person-avatar,
html[data-theme="lunar-cloud"] .post-avatar {
  border: 1px solid rgba(235,238,239,.16);
  box-shadow: 0 12px 30px rgba(8,13,18,.16);
}
html[data-theme="lunar-cloud"] .person-row,
html[data-theme="lunar-cloud"] .conversation-row-shell {
  border-radius: 18px;
}
html[data-theme="lunar-cloud"] .conversation-row-shell.is-active {
  background: rgba(230,234,236,.06);
  box-shadow: inset 2px 0 0 #d7c2a5;
}
html[data-theme="lunar-cloud"] .messages-chat { overflow: hidden; }
html[data-theme="lunar-cloud"] .chat-message-list {
  gap: .7rem;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(186,210,224,.045), transparent 20rem),
    #19222b;
}
html[data-theme="lunar-cloud"] .chat-message-bubble {
  border: 1px solid rgba(232,235,236,.075);
  border-radius: 24px 24px 24px 8px;
  background: rgba(55,66,77,.82);
  box-shadow: 0 8px 20px rgba(8,13,18,.08);
}
html[data-theme="lunar-cloud"] .chat-message-row.is-own .chat-message-bubble {
  border-color: rgba(238,241,242,.15);
  border-radius: 24px 24px 8px 24px;
  background: #e0e8ed;
  color: #1d252d;
}
html[data-theme="lunar-cloud"] .chat-composer,
html[data-theme="lunar-cloud"] .messages-chat-header {
  border-color: rgba(232,235,236,.07);
  background: rgba(37,47,57,.94);
}
html[data-theme="lunar-cloud"] .modal-card,
html[data-theme="lunar-cloud"] .profile-search-results,
html[data-theme="lunar-cloud"] .header-profile-menu,
html[data-theme="lunar-cloud"] .profile-options-menu,
html[data-theme="lunar-cloud"] .chat-actions-menu,
html[data-theme="lunar-cloud"] .conversation-actions-menu {
  border: 1px solid rgba(235,238,239,.10);
  border-radius: 34px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.035), transparent 40%),
    #2d3741;
  box-shadow: 0 36px 94px rgba(7,12,18,.31);
}
html[data-theme="lunar-cloud"] .theme-option {
  border-radius: 25px;
  border-color: rgba(233,236,238,.095);
  background: rgba(255,255,255,.022);
}
html[data-theme="lunar-cloud"] .theme-option.is-selected {
  border-color: rgba(235,238,239,.20);
  background: rgba(255,255,255,.045);
}
html[data-theme="lunar-cloud"] .lunar-cloud-preview {
  border-radius: 20px;
  border-color: rgba(231,235,237,.18);
  background:
    radial-gradient(circle at 28% 27%, rgba(240,243,244,.34), transparent 16%),
    linear-gradient(145deg, #4a5865 0 50%, #26303a 50% 76%, #907d65 76%);
  box-shadow: 0 7px 16px rgba(8,13,18,.14);
}

/* ---------- Five-theme responsive identity layer ---------- */
@media (max-width: 1100px) {
  html[data-theme="solar-circuit"] .app-shell {
    grid-template-columns: 220px minmax(0,1fr) 270px;
  }
  html[data-theme="lunar-cloud"] .app-shell,
  html[data-theme="mint-orbit"] .app-shell {
    gap: 1.15rem;
  }
}

@media (max-width: 850px) {
  html[data-theme="spaceglas"] .app-header {
    inset: 7px 8px auto;
    min-height: 58px;
    border-radius: 19px;
  }
  html[data-theme="spaceglas"] .app-page { padding-top: 74px; }
  html[data-theme="spaceglas"] .friends-sidebar { inset-block-start: 74px; }
  html[data-theme="spaceglas"] .messages-chat-header { top: 74px; }
  html[data-theme="spaceglas"] .mobile-bottom-nav {
    inset: auto 10px 10px;
    width: auto;
    height: 64px;
    padding: .35rem .45rem;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 23px;
    background:
      linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.018)),
      rgba(4,6,8,.78);
    box-shadow: 0 20px 52px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.10);
    backdrop-filter: blur(28px) saturate(128%);
    -webkit-backdrop-filter: blur(28px) saturate(128%);
  }
  html[data-theme="spaceglas"] .mobile-nav-item {
    border-radius: 14px;
  }
  html[data-theme="spaceglas"] .mobile-nav-item.is-active {
    color: rgb(255, 255, 255);
    background: rgba(255,255,255,.075);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
  }

  html[data-theme="neon-social"] .app-header { min-height: 70px; }
  html[data-theme="neon-social"] .app-page { padding-top: 70px; }
  html[data-theme="neon-social"] .friends-sidebar { inset-block-start: 70px; }
  html[data-theme="neon-social"] .messages-chat-header { top: 70px; }
  html[data-theme="neon-social"] .mobile-bottom-nav {
    border-top: 2px solid var(--accent);
    background: #07060a;
    box-shadow: 0 -10px 30px rgba(0,0,0,.28);
  }
  html[data-theme="neon-social"] .mobile-nav-item {
    border-radius: 3px 12px 3px 12px;
  }
  html[data-theme="neon-social"] .mobile-nav-item.is-active {
    color: rgb(255, 255, 255);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
  }
  html[data-theme="neon-social"] .mobile-create-nav {
    transform: translateY(-6px) rotate(-2deg);
    background: var(--accent);
    color: rgb(255, 255, 255);
    box-shadow: 5px 6px 0 color-mix(in srgb, var(--accent) 20%, transparent);
  }

  html[data-theme="mint-orbit"] .app-header { min-height: 76px; }
  html[data-theme="mint-orbit"] .app-page { padding-top: 76px; }
  html[data-theme="mint-orbit"] .friends-sidebar { inset-block-start: 76px; }
  html[data-theme="mint-orbit"] .messages-chat-header { top: 76px; }
  html[data-theme="mint-orbit"] .mobile-bottom-nav {
    inset: auto 12px 12px;
    width: auto;
    border: 1px solid rgba(40,97,81,.08);
    border-radius: 27px;
    background: rgba(252,255,254,.96);
    box-shadow: 0 16px 38px rgba(43,88,75,.13);
  }
  html[data-theme="mint-orbit"] .mobile-nav-item {
    border-radius: 18px;
    color: #637d76;
  }
  html[data-theme="mint-orbit"] .mobile-nav-item.is-active {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 9%, transparent);
  }

  html[data-theme="solar-circuit"] .app-header { min-height: 60px; }
  html[data-theme="solar-circuit"] .app-page { padding-top: 60px; }
  html[data-theme="solar-circuit"] .friends-sidebar { inset-block-start: 60px; }
  html[data-theme="solar-circuit"] .messages-chat-header { top: 60px; }
  html[data-theme="solar-circuit"] .mobile-bottom-nav {
    border-top: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
    background: #06111a;
  }
  html[data-theme="solar-circuit"] .mobile-nav-item {
    border-radius: 1px;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: .66rem;
    letter-spacing: .04em;
    text-transform: uppercase;
  }
  html[data-theme="solar-circuit"] .mobile-nav-item.is-active {
    color: var(--accent-contrast);
    background: var(--accent);
  }
  html[data-theme="solar-circuit"] .mobile-create-nav { border-radius: 1px; }

  html[data-theme="lunar-cloud"] .app-header { min-height: 76px; }
  html[data-theme="lunar-cloud"] .app-page { padding-top: 76px; }
  html[data-theme="lunar-cloud"] .friends-sidebar { inset-block-start: 76px; }
  html[data-theme="lunar-cloud"] .messages-chat-header { top: 76px; }
  html[data-theme="lunar-cloud"] .mobile-bottom-nav {
    border-top: 1px solid rgba(235,238,239,.08);
    background: rgba(25,33,41,.94);
    box-shadow: 0 -12px 32px rgba(8,13,18,.12);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }
  html[data-theme="lunar-cloud"] .mobile-nav-item { border-radius: 16px; }
  html[data-theme="lunar-cloud"] .mobile-nav-item.is-active {
    color: #f4f0ea;
    background: rgba(230,234,236,.06);
  }
}

@media (max-width: 560px) {
  html[data-theme="spaceglas"] .feed-post { padding: 1.2rem; border-radius: 21px; }
  html[data-theme="spaceglas"] .public-profile-hero { padding: 1.5rem; border-radius: 26px; }
  html[data-theme="spaceglas"] .modal-card { border-radius: 23px; }

  html[data-theme="neon-social"] .feed-post { padding: 1.1rem 1.1rem 1.1rem 1.35rem; border-radius: 3px 18px 3px 18px; }
  html[data-theme="neon-social"] .public-profile-hero { border-radius: 5px 24px 5px 24px; }
  html[data-theme="neon-social"] .modal-card { border-radius: 5px 22px 5px 22px; }

  html[data-theme="mint-orbit"] .feed-post { padding: 1.3rem; border-radius: 27px; }
  html[data-theme="mint-orbit"] .public-profile-hero { padding: 1.55rem; border-radius: 30px; }
  html[data-theme="mint-orbit"] .modal-card { border-radius: 28px 28px 18px 18px; }

  html[data-theme="solar-circuit"] .feed-post { padding: .95rem; border-radius: 2px; }
  html[data-theme="solar-circuit"] .public-profile-hero { padding: 1rem; border-radius: 2px; }
  html[data-theme="solar-circuit"] .modal-card { border-radius: 2px; }

  html[data-theme="lunar-cloud"] .feed-post { padding: 1.4rem; border-radius: 30px; }
  html[data-theme="lunar-cloud"] .public-profile-hero { padding: 1.6rem; border-radius: 34px; }
  html[data-theme="lunar-cloud"] .modal-card { border-radius: 30px 30px 20px 20px; }
}

/* Browsers without backdrop-filter keep opaque, readable SpaceGlas surfaces. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-theme="spaceglas"] .app-header,
  html[data-theme="spaceglas"] body > header:not(.app-header),
  html[data-theme="spaceglas"] .card,
  html[data-theme="spaceglas"] .friends-sidebar-inner,
  html[data-theme="spaceglas"] .messages-inbox,
  html[data-theme="spaceglas"] .messages-chat,
  html[data-theme="spaceglas"] .modal-card,
  html[data-theme="spaceglas"] .profile-search-results {
    background: #0c0f12;
  }
}

/* Motion accessibility remains theme-scoped. */
@media (prefers-reduced-motion: reduce) {
  html:is(
    [data-theme="spaceglas"],
    [data-theme="neon-social"],
    [data-theme="mint-orbit"],
    [data-theme="solar-circuit"],
    [data-theme="lunar-cloud"]
  ) *,
  html:is(
    [data-theme="spaceglas"],
    [data-theme="neon-social"],
    [data-theme="mint-orbit"],
    [data-theme="solar-circuit"],
    [data-theme="lunar-cloud"]
  ) *::before,
  html:is(
    [data-theme="spaceglas"],
    [data-theme="neon-social"],
    [data-theme="mint-orbit"],
    [data-theme="solar-circuit"],
    [data-theme="lunar-cloud"]
  ) *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================
   V2.6.6 — targeted visual layer.
   - Reimagines Neon Social, Mint Orbit and Solar Circuit.
   - Adds the separate SpaceGlas X theme.
   - Protected themes are not targeted by theme-design selectors.
   ========================================================= */

/* ---------- Shared DM selection sizing bug fix ---------- */
@media (min-width: 561px) {
  .message-selection-toolbar {
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
  }
  .message-selection-toolbar .message-selection-count { margin-right: auto; }
  .message-selection-toolbar > .btn,
  .message-item-selection-toolbar .btn {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    max-width: 180px;
    min-height: 34px;
    padding: .42rem .68rem;
    font-size: .74rem;
    line-height: 1.05;
    white-space: nowrap;
  }
  .message-item-selection-toolbar > div {
    flex: 0 0 auto;
    align-items: center;
  }
}
@media (max-width: 560px) {
  .message-selection-toolbar {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
  }
  .message-selection-toolbar .message-selection-count { flex: 1 0 100%; }
  .message-selection-toolbar > .btn {
    flex: 1 1 calc(50% - .3rem);
    width: auto;
    min-width: 0;
    min-height: 40px;
    padding: .55rem .7rem;
    font-size: .78rem;
  }
  .message-item-selection-toolbar .btn {
    min-height: 40px;
    padding: .55rem .72rem;
    font-size: .78rem;
  }
}

/* ---------- SpaceGlas X: SpaceX × iOS-style liquid glass ---------- */
html[data-theme="spaceglas-x"] {
  color-scheme: dark;
  --background: #050607;
  --background-deep: #000102;
  --background-soft: #0b0e11;
  --surface: rgba(18, 21, 25, .44);
  --surface-secondary: rgba(255, 255, 255, .065);
  --surface-elevated: rgba(18, 22, 27, .66);
  --surface-translucent: rgba(8, 10, 13, .46);
  --text-primary: #fbfcfd;
  --text-secondary: #cbd0d5;
  --text-muted: #878f97;
  --accent: #edf7fa;
  --accent-hover: #ffffff;
  --accent-contrast: #060809;
  --accent-soft: rgba(208, 239, 247, .10);
  --accent-blue: #a7dce6;
  --border: rgba(255, 255, 255, .18);
  --border-soft: rgba(255, 255, 255, .09);
  --header-bg: rgba(5, 7, 9, .42);
  --input-background: rgba(0, 2, 4, .38);
  --danger: #ff8a96;
  --success: #a8dccd;
  --warning: #decba8;
  --heart: #d7eef3;
  --body-background:
    radial-gradient(circle at 12% -8%, rgba(255,255,255,.13), transparent 23rem),
    radial-gradient(circle at 91% 8%, rgba(120,185,200,.10), transparent 27rem),
    radial-gradient(ellipse at 50% 112%, rgba(74,92,112,.24), transparent 42rem),
    linear-gradient(158deg, #0b0e12 0%, #030507 48%, #000102 100%);
  --modal-backdrop: rgba(0, 1, 2, .70);
  --shadow: 0 34px 100px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.16);
  --shadow-soft: 0 22px 62px rgba(0,0,0,.31), inset 0 1px 0 rgba(255,255,255,.10);
  --shadow-modal: 0 44px 125px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.18);
  --shadow-drawer: 20px 0 72px rgba(0,0,0,.48);
  --radius-sm: 15px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-xl: 36px;
  --radius-pill: 999px;
  --font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  --font-display: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  --transition: 220ms cubic-bezier(.2,.8,.2,1);
  --primary: var(--accent);
  --muted-text: var(--text-muted);
  --border-color: var(--border-soft);
}
html[data-theme="spaceglas-x"] body {
  background: var(--body-background);
  background-attachment: fixed;
}
html[data-theme="spaceglas-x"] .app-header,
html[data-theme="spaceglas-x"] body > header:not(.app-header) {
  position: fixed;
  inset: 10px 14px auto;
  width: auto;
  min-height: 66px;
  border: 1px solid rgba(255,255,255,.19);
  border-radius: 25px;
  background:
    linear-gradient(115deg, rgba(255,255,255,.13), rgba(255,255,255,.035) 34%, rgba(143,201,214,.025) 68%, rgba(255,255,255,.075)),
    rgba(5,7,9,.43);
  box-shadow:
    0 28px 82px rgba(0,0,0,.40),
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -1px 0 rgba(255,255,255,.04),
    inset 1px 0 0 rgba(255,255,255,.065),
    inset -1px 0 0 rgba(157,215,226,.035);
  backdrop-filter: blur(36px) saturate(155%);
  -webkit-backdrop-filter: blur(36px) saturate(155%);
  overflow: visible;
}
html[data-theme="spaceglas-x"] .app-header::before,
html[data-theme="spaceglas-x"] body > header:not(.app-header)::before {
  content: "";
  position: absolute;
  inset: 0 7% auto;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.72), rgba(191,232,240,.32), transparent);
  opacity: .9;
}
html[data-theme="spaceglas-x"] .app-header::after,
html[data-theme="spaceglas-x"] body > header:not(.app-header)::after {
  content: "";
  position: absolute;
  width: 34%;
  height: 46%;
  left: 7%;
  top: 2px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(ellipse, rgba(255,255,255,.10), transparent 70%);
  filter: blur(9px);
}
html[data-theme="spaceglas-x"] .app-page { padding-top: 92px; }
html[data-theme="spaceglas-x"] .app-brand,
html[data-theme="spaceglas-x"] .logo {
  color: rgb(255, 255, 255);
  font-weight: 720;
  letter-spacing: -.04em;
}
html[data-theme="spaceglas-x"] .brand-heart {
  color: #e7f5f8;
  text-shadow: 0 0 18px rgba(154,213,225,.22);
}
html[data-theme="spaceglas-x"] .app-topnav {
  gap: .25rem;
  padding: 4px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 18px;
  background: rgba(255,255,255,.025);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
html[data-theme="spaceglas-x"] .topnav-link {
  min-height: 38px;
  padding: .55rem .92rem;
  border: 1px solid transparent;
  border-radius: 13px;
  color: #aeb5bc;
  font-weight: 620;
}
html[data-theme="spaceglas-x"] .topnav-link:hover {
  color: #f7fafb;
  background: rgba(255,255,255,.05);
}
html[data-theme="spaceglas-x"] .topnav-link.is-active {
  color: rgb(255, 255, 255);
  border-color: rgba(255,255,255,.14);
  background:
    linear-gradient(180deg, rgba(255,255,255,.135), rgba(255,255,255,.035)),
    rgba(255,255,255,.025);
  box-shadow: 0 7px 18px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.18);
}
html[data-theme="spaceglas-x"] .app-shell {
  gap: 1.4rem;
  padding-top: 1.2rem;
}
html[data-theme="spaceglas-x"] .card,
html[data-theme="spaceglas-x"] .friends-sidebar-inner,
html[data-theme="spaceglas-x"] .messages-inbox,
html[data-theme="spaceglas-x"] .messages-chat,
html[data-theme="spaceglas-x"] .feed-tag-filter,
html[data-theme="spaceglas-x"] .visual-mockup,
html[data-theme="spaceglas-x"] .showcase-card,
html[data-theme="spaceglas-x"] .newsletter-signup,
html[data-theme="spaceglas-x"] .public-theme-picker {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.145);
  background:
    linear-gradient(138deg, rgba(255,255,255,.105), rgba(255,255,255,.018) 42%, rgba(141,202,215,.025) 72%, rgba(255,255,255,.045)),
    rgba(8,10,13,.47);
  box-shadow:
    0 30px 82px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(255,255,255,.025),
    inset 1px 0 0 rgba(255,255,255,.035);
  backdrop-filter: blur(31px) saturate(145%);
  -webkit-backdrop-filter: blur(31px) saturate(145%);
}
html[data-theme="spaceglas-x"] .feed-post::before,
html[data-theme="spaceglas-x"] .public-profile-hero::before,
html[data-theme="spaceglas-x"] .messages-chat::before,
html[data-theme="spaceglas-x"] .modal-card::before,
html[data-theme="spaceglas-x"] .profile-summary::before {
  content: "";
  position: absolute;
  inset: -1px 9% auto;
  height: 2px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.78), rgba(188,230,238,.30), transparent);
  filter: blur(.15px);
  opacity: .7;
}
html[data-theme="spaceglas-x"] .feed-post::after,
html[data-theme="spaceglas-x"] .public-profile-hero::after,
html[data-theme="spaceglas-x"] .modal-card::after {
  content: "";
  position: absolute;
  width: 42%;
  height: 34%;
  top: -10%;
  left: -6%;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(255,255,255,.11), transparent 70%);
  filter: blur(12px);
  opacity: .7;
}
html[data-theme="spaceglas-x"] .feed-list { gap: 1.1rem; }
html[data-theme="spaceglas-x"] .feed-post {
  padding: 1.65rem 1.75rem;
  border-radius: 29px;
}
html[data-theme="spaceglas-x"] .feed-post:hover {
  transform: translateY(-3px) scale(1.002);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 38px 94px rgba(0,0,0,.39), inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(255,255,255,.03);
}
html[data-theme="spaceglas-x"] .feed-intro h1,
html[data-theme="spaceglas-x"] .post-title,
html[data-theme="spaceglas-x"] .public-profile-title-row h1 {
  font-family: var(--font-sans);
  font-weight: 650;
  letter-spacing: -.052em;
}
html[data-theme="spaceglas-x"] .eyebrow {
  color: #9fa8af;
  letter-spacing: .17em;
}
html[data-theme="spaceglas-x"] .post-footer,
html[data-theme="spaceglas-x"] .profile-facts > div,
html[data-theme="spaceglas-x"] .sidebar-divider {
  border-color: rgba(255,255,255,.075);
  background: none;
}
html[data-theme="spaceglas-x"] .btn {
  min-height: 43px;
  border-radius: 15px;
}
html[data-theme="spaceglas-x"] .btn-primary {
  border: 1px solid rgba(255,255,255,.82);
  background: linear-gradient(180deg, #ffffff, color-mix(in srgb, var(--accent) 84%, #b8c5ca));
  color: #07090a;
  font-weight: 750;
  box-shadow: 0 13px 34px rgba(0,0,0,.31), inset 0 1px 0 #fff;
}
html[data-theme="spaceglas-x"] .btn-primary:hover {
  transform: translateY(-1px);
  background: #fff;
  box-shadow: 0 17px 42px rgba(0,0,0,.40), 0 0 28px rgba(155,216,228,.08);
}
html[data-theme="spaceglas-x"] .btn-secondary,
html[data-theme="spaceglas-x"] .icon-button,
html[data-theme="spaceglas-x"] .avatar-button,
html[data-theme="spaceglas-x"] .feed-tag-filter-button,
html[data-theme="spaceglas-x"] .match-badge,
html[data-theme="spaceglas-x"] .post-tag-badge {
  border: 1px solid rgba(255,255,255,.13);
  background:
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.018)),
    rgba(255,255,255,.018);
  color: var(--text-primary);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 7px 22px rgba(0,0,0,.14);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
html[data-theme="spaceglas-x"] .app-search,
html[data-theme="spaceglas-x"] .form-control,
html[data-theme="spaceglas-x"] .chat-input-shell {
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.012)),
    rgba(1,3,5,.38);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.075), 0 10px 28px rgba(0,0,0,.13);
  backdrop-filter: blur(22px) saturate(130%);
  -webkit-backdrop-filter: blur(22px) saturate(130%);
}
html[data-theme="spaceglas-x"] .app-search:focus-within,
html[data-theme="spaceglas-x"] .form-control:focus,
html[data-theme="spaceglas-x"] .chat-input-shell:focus-within {
  border-color: color-mix(in srgb, var(--accent-blue) 45%, rgba(255,255,255,.20));
  box-shadow: 0 0 0 3px rgba(158,215,226,.065), inset 0 1px 0 rgba(255,255,255,.12);
}
html[data-theme="spaceglas-x"] .public-profile-hero {
  position: relative;
  overflow: hidden;
  padding: 2.35rem;
  border-radius: 37px;
  background:
    radial-gradient(circle at 86% -10%, rgba(166,223,233,.12), transparent 20rem),
    linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.02) 55%),
    rgba(6,9,12,.48);
  backdrop-filter: blur(34px) saturate(145%);
  -webkit-backdrop-filter: blur(34px) saturate(145%);
}
html[data-theme="spaceglas-x"] .public-profile-avatar,
html[data-theme="spaceglas-x"] .large-avatar,
html[data-theme="spaceglas-x"] .person-avatar,
html[data-theme="spaceglas-x"] .post-avatar {
  border: 1px solid rgba(255,255,255,.23);
  background: linear-gradient(145deg, rgba(255,255,255,.10), rgba(140,202,214,.055));
  box-shadow: 0 12px 32px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.20);
}
html[data-theme="spaceglas-x"] .messages-shell { gap: 1.25rem; }
html[data-theme="spaceglas-x"] .messages-inbox,
html[data-theme="spaceglas-x"] .messages-chat { border-radius: 30px; }
html[data-theme="spaceglas-x"] .messages-chat-header,
html[data-theme="spaceglas-x"] .chat-composer {
  background: rgba(8,10,13,.52);
  backdrop-filter: blur(28px) saturate(140%);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
}
html[data-theme="spaceglas-x"] .conversation-row-shell {
  border: 1px solid transparent;
  border-radius: 17px;
}
html[data-theme="spaceglas-x"] .conversation-row-shell:hover { background: rgba(255,255,255,.045); }
html[data-theme="spaceglas-x"] .conversation-row-shell.is-active {
  border-color: rgba(255,255,255,.13);
  background: linear-gradient(100deg, rgba(255,255,255,.08), rgba(255,255,255,.025));
  box-shadow: inset 2px 0 0 rgba(220,243,247,.72), inset 0 1px 0 rgba(255,255,255,.05);
}
html[data-theme="spaceglas-x"] .chat-message-list {
  background:
    radial-gradient(circle at 28% 8%, rgba(255,255,255,.025), transparent 16rem),
    rgba(1,3,5,.25);
}
html[data-theme="spaceglas-x"] .chat-message-bubble {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px 20px 20px 7px;
  background: linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.028));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 10px 28px rgba(0,0,0,.16);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
html[data-theme="spaceglas-x"] .chat-message-row.is-own .chat-message-bubble {
  border-radius: 20px 20px 7px 20px;
  border-color: rgba(196,232,239,.24);
  background: linear-gradient(145deg, rgba(196,232,239,.15), rgba(255,255,255,.045));
}
html[data-theme="spaceglas-x"] .modal-card,
html[data-theme="spaceglas-x"] .profile-search-results,
html[data-theme="spaceglas-x"] .header-profile-menu,
html[data-theme="spaceglas-x"] .profile-options-menu,
html[data-theme="spaceglas-x"] .chat-actions-menu,
html[data-theme="spaceglas-x"] .conversation-actions-menu {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.17);
  background:
    linear-gradient(145deg, rgba(255,255,255,.105), rgba(255,255,255,.018)),
    rgba(7,10,13,.66);
  box-shadow: 0 38px 110px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.19);
  backdrop-filter: blur(34px) saturate(145%);
  -webkit-backdrop-filter: blur(34px) saturate(145%);
}
html[data-theme="spaceglas-x"] .modal-card { border-radius: 31px; }
html[data-theme="spaceglas-x"] .theme-option {
  border-color: rgba(255,255,255,.11);
  background: rgba(255,255,255,.027);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
html[data-theme="spaceglas-x"] .theme-option.is-selected {
  border-color: rgba(223,244,248,.44);
  box-shadow: 0 0 0 2px rgba(196,232,239,.07), inset 0 1px 0 rgba(255,255,255,.10);
}
.spaceglas-x-preview,
html[data-theme="spaceglas-x"] .spaceglas-x-preview {
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 14px;
  background:
    linear-gradient(125deg, rgba(255,255,255,.36), rgba(255,255,255,.035) 37%, rgba(157,219,231,.12) 72%, rgba(255,255,255,.15)),
    linear-gradient(145deg, #10151a, #010203 68%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.48), inset 0 -10px 18px rgba(0,0,0,.24), 0 5px 16px rgba(0,0,0,.25);
}

/* ---------- Neon Social: editorial nightlife / social magazine ---------- */
html[data-theme="neon-social"] {
  color-scheme: dark;
  --background: #0b0710;
  --background-deep: #050207;
  --background-soft: #17101b;
  --surface: #120d16;
  --surface-secondary: #201524;
  --surface-elevated: #18101c;
  --surface-translucent: rgba(12,7,15,.94);
  --text-primary: #fff9fc;
  --text-secondary: #d8c7d2;
  --text-muted: #988491;
  --accent: #ff397f;
  --accent-hover: #ff6098;
  --accent-contrast: #18030b;
  --accent-soft: rgba(255,57,127,.13);
  --accent-blue: #6d5cff;
  --border: rgba(255,255,255,.18);
  --border-soft: rgba(255,255,255,.08);
  --header-bg: #08050b;
  --input-background: #0b0710;
  --body-background:
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    radial-gradient(circle at 100% 0%, rgba(255,57,127,.12), transparent 24rem),
    radial-gradient(circle at 0% 12%, rgba(109,92,255,.10), transparent 28rem),
    #09060c;
  --shadow: 12px 12px 0 rgba(0,0,0,.24), 0 22px 58px rgba(0,0,0,.30);
  --shadow-soft: 7px 7px 0 rgba(0,0,0,.18), 0 14px 34px rgba(0,0,0,.22);
  --shadow-modal: 18px 18px 0 rgba(0,0,0,.28), 0 34px 86px rgba(0,0,0,.52);
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --font-sans: Inter, ui-sans-serif, Arial, sans-serif;
  --font-display: "Arial Black", Inter, ui-sans-serif, sans-serif;
  --transition: 145ms cubic-bezier(.2,.85,.25,1);
  --primary: var(--accent);
  --muted-text: var(--text-muted);
  --border-color: var(--border-soft);
}
html[data-theme="neon-social"] body {
  background-size: 46px 46px, auto, auto, auto;
}
html[data-theme="neon-social"] .app-header,
html[data-theme="neon-social"] body > header:not(.app-header) {
  min-height: 76px;
  border: 0;
  border-bottom: 4px solid #fff;
  background: #08050b;
  box-shadow: 0 14px 34px rgba(0,0,0,.34);
}
html[data-theme="neon-social"] .app-header::after,
html[data-theme="neon-social"] body > header:not(.app-header)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 4px;
  background: linear-gradient(90deg, var(--accent) 0 27%, #fff 27% 72%, var(--accent-blue) 72%);
  opacity: 1;
}
html[data-theme="neon-social"] .app-page { padding-top: 76px; }
html[data-theme="neon-social"] .app-brand,
html[data-theme="neon-social"] .logo {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: .95rem;
  letter-spacing: -.035em;
}
html[data-theme="neon-social"] .brand-heart {
  color: var(--accent);
  font-size: 1.8em;
}
html[data-theme="neon-social"] .app-topnav { gap: 0; align-self: stretch; }
html[data-theme="neon-social"] .topnav-link {
  position: relative;
  min-height: 72px;
  padding: 0 1rem;
  border-radius: 0;
  color: #b6a7b0;
  text-transform: uppercase;
  font-size: .74rem;
  letter-spacing: .08em;
}
html[data-theme="neon-social"] .topnav-link:hover { background: #130c17; color: rgb(255, 255, 255); }
html[data-theme="neon-social"] .topnav-link.is-active {
  color: rgb(255, 255, 255);
  background: #160d18;
}
html[data-theme="neon-social"] .topnav-link.is-active::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 10px;
  height: 4px;
  background: var(--accent);
  box-shadow: none;
}
html[data-theme="neon-social"] .app-search,
html[data-theme="neon-social"] .form-control,
html[data-theme="neon-social"] .chat-input-shell {
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 0;
  background: #09060c;
  box-shadow: inset 4px 0 0 rgba(255,57,127,.32);
}
html[data-theme="neon-social"] .app-search:focus-within,
html[data-theme="neon-social"] .form-control:focus,
html[data-theme="neon-social"] .chat-input-shell:focus-within {
  border-color: var(--accent);
  box-shadow: inset 4px 0 0 var(--accent), 0 0 0 2px rgba(255,57,127,.10);
}
html[data-theme="neon-social"] .app-shell {
  grid-template-columns: 220px minmax(0, 760px) 280px;
  gap: 1.35rem;
  padding-top: 1.5rem;
}
html[data-theme="neon-social"] .friends-sidebar-inner,
html[data-theme="neon-social"] .messages-inbox,
html[data-theme="neon-social"] .messages-chat,
html[data-theme="neon-social"] .feed-tag-filter,
html[data-theme="neon-social"] .right-sidebar .card,
html[data-theme="neon-social"] .public-profile-info,
html[data-theme="neon-social"] .public-profile-details {
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 0;
  background: #100a13;
  box-shadow: 7px 7px 0 rgba(0,0,0,.25);
}
html[data-theme="neon-social"] .feed-list { gap: 1.25rem; }
html[data-theme="neon-social"] .feed-post {
  position: relative;
  overflow: visible;
  padding: 1.45rem 1.5rem 1.4rem 1.75rem;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 0;
  background: #120c15;
  box-shadow: 9px 9px 0 rgba(0,0,0,.28);
}
html[data-theme="neon-social"] .feed-post:nth-child(even) {
  margin-left: 1.15rem;
  margin-right: -.35rem;
  border-color: rgba(109,92,255,.42);
}
html[data-theme="neon-social"] .feed-post:nth-child(odd) {
  margin-right: .8rem;
  border-color: rgba(255,57,127,.38);
}
html[data-theme="neon-social"] .feed-post::after {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: -1px;
  width: 7px;
  background: var(--accent);
}
html[data-theme="neon-social"] .feed-post:nth-child(even)::after {
  left: auto;
  right: -1px;
  background: var(--accent-blue);
}
html[data-theme="neon-social"] .feed-post:hover {
  transform: translate(-2px,-2px);
  box-shadow: 13px 13px 0 rgba(0,0,0,.30);
}
html[data-theme="neon-social"] .feed-intro {
  position: relative;
  padding: 1.2rem 0 1.1rem 1.35rem;
  border-left: 7px solid var(--accent);
}
html[data-theme="neon-social"] .feed-intro h1,
html[data-theme="neon-social"] .post-title,
html[data-theme="neon-social"] .public-profile-title-row h1 {
  font-family: var(--font-display);
  text-transform: uppercase;
  line-height: .98;
  letter-spacing: -.055em;
}
html[data-theme="neon-social"] .feed-intro h1 { font-size: clamp(2.4rem,5vw,4.4rem); }
html[data-theme="neon-social"] .post-title { font-size: clamp(1.55rem,3vw,2.3rem); }
html[data-theme="neon-social"] .eyebrow {
  color: var(--accent);
  font-size: .68rem;
  letter-spacing: .21em;
}
html[data-theme="neon-social"] .post-author-row { margin-bottom: 1rem; }
html[data-theme="neon-social"] .post-avatar,
html[data-theme="neon-social"] .person-avatar,
html[data-theme="neon-social"] .large-avatar,
html[data-theme="neon-social"] .public-profile-avatar {
  border-radius: 2px;
  border: 1px solid rgba(255,255,255,.28);
  background: linear-gradient(135deg, var(--accent-soft), rgba(109,92,255,.15));
  box-shadow: 4px 4px 0 rgba(0,0,0,.24);
}
html[data-theme="neon-social"] .match-badge,
html[data-theme="neon-social"] .post-tag-badge,
html[data-theme="neon-social"] .feed-tag-filter-button {
  border-radius: 0;
  border: 1px solid rgba(255,255,255,.16);
  background: transparent;
  color: rgb(255, 255, 255);
  text-transform: uppercase;
  letter-spacing: .08em;
}
html[data-theme="neon-social"] .post-footer,
html[data-theme="neon-social"] .profile-facts > div,
html[data-theme="neon-social"] .sidebar-divider {
  border-color: rgba(255,255,255,.10);
  background: none;
}
html[data-theme="neon-social"] .btn {
  min-height: 42px;
  border-radius: 0;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .055em;
  font-size: .78rem;
}
html[data-theme="neon-social"] .btn-primary {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-contrast);
  box-shadow: 5px 5px 0 rgba(109,92,255,.30);
}
html[data-theme="neon-social"] .btn-primary:hover {
  transform: translate(-2px,-2px);
  box-shadow: 8px 8px 0 rgba(109,92,255,.30);
}
html[data-theme="neon-social"] .btn-secondary,
html[data-theme="neon-social"] .icon-button,
html[data-theme="neon-social"] .avatar-button {
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 0;
  background: #100a13;
}
html[data-theme="neon-social"] .public-profile-hero {
  position: relative;
  padding: 2rem;
  border: 1px solid rgba(255,255,255,.18);
  border-top: 10px solid var(--accent);
  border-radius: 0;
  background:
    linear-gradient(90deg, rgba(255,57,127,.10), transparent 42%),
    #100a13;
  box-shadow: 12px 12px 0 rgba(0,0,0,.28);
}
html[data-theme="neon-social"] .public-profile-metrics {
  border-left: 1px solid rgba(255,255,255,.14);
  padding-left: 1rem;
}
html[data-theme="neon-social"] .messages-shell {
  grid-template-columns: 275px minmax(0,1fr);
  gap: 0;
  border: 1px solid rgba(255,255,255,.14);
  background: #08050b;
}
html[data-theme="neon-social"] .messages-inbox,
html[data-theme="neon-social"] .messages-chat {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
html[data-theme="neon-social"] .messages-inbox { border-right: 1px solid rgba(255,255,255,.15); }
html[data-theme="neon-social"] .conversation-row-shell,
html[data-theme="neon-social"] .person-row { border-radius: 0; }
html[data-theme="neon-social"] .conversation-row-shell:hover,
html[data-theme="neon-social"] .person-row:hover { background: #1b101e; }
html[data-theme="neon-social"] .conversation-row-shell.is-active {
  background: linear-gradient(90deg, rgba(255,57,127,.16), transparent);
  box-shadow: inset 5px 0 0 var(--accent);
}
html[data-theme="neon-social"] .chat-message-list {
  gap: .55rem;
  background:
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    #0a060d;
  background-size: 46px 100%;
}
html[data-theme="neon-social"] .chat-message-bubble {
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 0 12px 12px 12px;
  background: #17101a;
  box-shadow: 5px 5px 0 rgba(0,0,0,.18);
}
html[data-theme="neon-social"] .chat-message-row.is-own .chat-message-bubble {
  border-radius: 12px 0 12px 12px;
  border-color: rgba(255,57,127,.52);
  background: #2a0d1c;
  color: rgb(255, 255, 255);
}
html[data-theme="neon-social"] .chat-composer,
html[data-theme="neon-social"] .messages-chat-header {
  border-color: rgba(255,255,255,.11);
  background: #0d080f;
}
html[data-theme="neon-social"] .modal-card,
html[data-theme="neon-social"] .profile-search-results,
html[data-theme="neon-social"] .header-profile-menu,
html[data-theme="neon-social"] .profile-options-menu,
html[data-theme="neon-social"] .chat-actions-menu,
html[data-theme="neon-social"] .conversation-actions-menu {
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 0;
  background: #100a13;
  box-shadow: 12px 12px 0 rgba(0,0,0,.32), 0 28px 72px rgba(0,0,0,.42);
}
html[data-theme="neon-social"] .theme-option {
  border-radius: 0;
  background: #100a13;
}
html[data-theme="neon-social"] .theme-option.is-selected {
  border-color: var(--accent);
  box-shadow: inset 6px 0 0 var(--accent);
}
html[data-theme="neon-social"] .neon-social-preview {
  border-radius: 0;
  border: 1px solid rgba(255,255,255,.34);
  background:
    linear-gradient(90deg, var(--accent) 0 12%, transparent 12%),
    linear-gradient(145deg, #26102a, #09060c 64%);
  box-shadow: inset 0 -8px 0 rgba(109,92,255,.34), 5px 5px 0 rgba(0,0,0,.20);
}

/* ---------- Mint Orbit: calm light editorial / wellness social ---------- */
html[data-theme="mint-orbit"] {
  color-scheme: light;
  --background: #eef6f1;
  --background-deep: #e4efe9;
  --background-soft: #f5faf7;
  --surface: #ffffff;
  --surface-secondary: #eaf5ef;
  --surface-elevated: #ffffff;
  --surface-translucent: rgba(255,255,255,.90);
  --text-primary: #18332d;
  --text-secondary: #4e6c64;
  --text-muted: #7f9992;
  --accent: #2f9f7e;
  --accent-hover: #247e65;
  --accent-contrast: #ffffff;
  --accent-soft: rgba(47,159,126,.11);
  --accent-blue: #5a9f99;
  --border: #d5e5dd;
  --border-soft: #e3eee8;
  --header-bg: rgba(247,251,249,.94);
  --input-background: #f8fcfa;
  --danger: #c85e67;
  --success: #2f9f7e;
  --warning: #b98743;
  --heart: #4fb394;
  --body-background:
    radial-gradient(circle at 10% 0%, rgba(81,176,145,.10), transparent 30rem),
    radial-gradient(circle at 92% 18%, rgba(107,170,163,.08), transparent 28rem),
    linear-gradient(180deg, #f7fbf8 0%, #eef6f1 50%, #e8f1ec 100%);
  --modal-backdrop: rgba(45,67,59,.30);
  --shadow: 0 22px 60px rgba(38,79,65,.12);
  --shadow-soft: 0 10px 28px rgba(38,79,65,.08);
  --shadow-modal: 0 30px 80px rgba(38,66,56,.18);
  --radius-sm: 16px;
  --radius-md: 22px;
  --radius-lg: 30px;
  --radius-xl: 38px;
  --font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: Georgia, "Times New Roman", serif;
  --transition: 240ms cubic-bezier(.2,.8,.2,1);
  --primary: var(--accent);
  --muted-text: var(--text-muted);
  --border-color: var(--border-soft);
}
html[data-theme="mint-orbit"] .app-header,
html[data-theme="mint-orbit"] body > header:not(.app-header) {
  min-height: 82px;
  border-bottom: 1px solid rgba(67,113,98,.13);
  background: rgba(249,252,250,.92);
  box-shadow: 0 9px 28px rgba(41,78,65,.06);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
html[data-theme="mint-orbit"] .app-page { padding-top: 82px; }
html[data-theme="mint-orbit"] .app-brand,
html[data-theme="mint-orbit"] .logo {
  color: #18332d;
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: -.025em;
}
html[data-theme="mint-orbit"] .brand-heart { color: var(--accent); }
html[data-theme="mint-orbit"] .app-topnav {
  gap: .4rem;
  padding: 5px;
  border-radius: 20px;
  background: #edf6f1;
}
html[data-theme="mint-orbit"] .topnav-link {
  min-height: 40px;
  border-radius: 15px;
  color: #5f786f;
  font-size: .86rem;
  font-weight: 680;
}
html[data-theme="mint-orbit"] .topnav-link:hover { color: #18332d; background: rgba(255,255,255,.72); }
html[data-theme="mint-orbit"] .topnav-link.is-active {
  color: #173e33;
  background: #fff;
  box-shadow: 0 5px 16px rgba(45,91,75,.10);
}
html[data-theme="mint-orbit"] .app-search,
html[data-theme="mint-orbit"] .form-control,
html[data-theme="mint-orbit"] .chat-input-shell {
  border: 1px solid #dbe9e2;
  border-radius: 18px;
  background: #f8fcfa;
  color: #18332d;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
html[data-theme="mint-orbit"] .app-search:focus-within,
html[data-theme="mint-orbit"] .form-control:focus,
html[data-theme="mint-orbit"] .chat-input-shell:focus-within {
  border-color: rgba(47,159,126,.48);
  box-shadow: 0 0 0 4px rgba(47,159,126,.08);
}
html[data-theme="mint-orbit"] .app-shell {
  grid-template-columns: 240px minmax(0, 760px) 300px;
  gap: 1.5rem;
  padding-top: 2rem;
}
html[data-theme="mint-orbit"] .friends-sidebar-inner {
  padding: 1.2rem .9rem;
  border: 0;
  border-radius: 28px;
  background: rgba(255,255,255,.66);
  box-shadow: none;
}
html[data-theme="mint-orbit"] .right-sidebar { gap: 1.35rem; }
html[data-theme="mint-orbit"] .right-sidebar .card,
html[data-theme="mint-orbit"] .messages-inbox,
html[data-theme="mint-orbit"] .messages-chat,
html[data-theme="mint-orbit"] .feed-tag-filter,
html[data-theme="mint-orbit"] .public-profile-info,
html[data-theme="mint-orbit"] .public-profile-details {
  border: 1px solid #dce9e3;
  border-radius: 28px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 12px 35px rgba(39,91,72,.07);
}
html[data-theme="mint-orbit"] .feed-intro {
  align-items: center;
  margin-bottom: 1.5rem;
  padding: .8rem .35rem 1.2rem;
}
html[data-theme="mint-orbit"] .feed-intro h1,
html[data-theme="mint-orbit"] .public-profile-title-row h1 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.04em;
  color: #173a31;
}
html[data-theme="mint-orbit"] .feed-intro h1 { font-size: clamp(2.5rem,5vw,4rem); }
html[data-theme="mint-orbit"] .feed-intro p { color: #607b72; max-width: 560px; }
html[data-theme="mint-orbit"] .eyebrow {
  color: #4b8573;
  letter-spacing: .12em;
  font-weight: 780;
}
html[data-theme="mint-orbit"] .feed-list { gap: 1.35rem; }
html[data-theme="mint-orbit"] .feed-post {
  position: relative;
  overflow: hidden;
  padding: 1.7rem 1.8rem 1.55rem;
  border: 1px solid #dbe9e2;
  border-radius: 30px;
  background: rgba(255,255,255,.93);
  box-shadow: 0 15px 42px rgba(41,87,71,.08);
}
html[data-theme="mint-orbit"] .feed-post::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg, #7ac7ac, var(--accent));
  opacity: .52;
}
html[data-theme="mint-orbit"] .feed-post:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 54px rgba(41,87,71,.11);
}
html[data-theme="mint-orbit"] .post-title {
  font-family: var(--font-display);
  font-weight: 700;
  color: #173a31;
  letter-spacing: -.035em;
  line-height: 1.15;
}
html[data-theme="mint-orbit"] .post-body { color: #35554c; line-height: 1.82; }
html[data-theme="mint-orbit"] .post-avatar,
html[data-theme="mint-orbit"] .person-avatar,
html[data-theme="mint-orbit"] .large-avatar,
html[data-theme="mint-orbit"] .public-profile-avatar {
  border: 4px solid rgba(255,255,255,.95);
  background: linear-gradient(145deg, #dff3e9, #c7eadc);
  color: #1f6c56;
  box-shadow: 0 7px 20px rgba(41,93,74,.12);
}
html[data-theme="mint-orbit"] .person-row,
html[data-theme="mint-orbit"] .conversation-row-shell {
  border-radius: 18px;
}
html[data-theme="mint-orbit"] .person-row:hover,
html[data-theme="mint-orbit"] .conversation-row-shell:hover,
html[data-theme="mint-orbit"] .profile-search-item:hover {
  background: #eaf5ef;
}
html[data-theme="mint-orbit"] .conversation-row-shell.is-active {
  background: #e4f2eb;
  box-shadow: inset 3px 0 0 var(--accent);
}
html[data-theme="mint-orbit"] .match-badge,
html[data-theme="mint-orbit"] .post-tag-badge,
html[data-theme="mint-orbit"] .feed-tag-filter-button {
  border-radius: 999px;
  border-color: #cfe4da;
  background: #eff8f3;
  color: #2a765e;
}
html[data-theme="mint-orbit"] .btn {
  min-height: 44px;
  border-radius: 16px;
  font-weight: 740;
}
html[data-theme="mint-orbit"] .btn-primary {
  border: 1px solid #2f9f7e;
  background: linear-gradient(180deg, #3aaa87, #2f9476);
  color: rgb(255, 255, 255);
  box-shadow: 0 9px 20px rgba(47,159,126,.18);
}
html[data-theme="mint-orbit"] .btn-primary:hover {
  transform: translateY(-1px);
  background: #287f66;
  box-shadow: 0 12px 26px rgba(47,159,126,.22);
}
html[data-theme="mint-orbit"] .btn-secondary,
html[data-theme="mint-orbit"] .icon-button,
html[data-theme="mint-orbit"] .avatar-button {
  border: 1px solid #d8e7df;
  background: rgba(255,255,255,.84);
  color: #28483f;
}
html[data-theme="mint-orbit"] .post-footer,
html[data-theme="mint-orbit"] .profile-facts > div,
html[data-theme="mint-orbit"] .sidebar-divider {
  border-color: #e0ebe6;
  background: none;
}
html[data-theme="mint-orbit"] .public-profile-hero {
  position: relative;
  overflow: hidden;
  padding: 2.35rem;
  border: 0;
  border-radius: 36px;
  background:
    radial-gradient(circle at 88% 5%, rgba(255,255,255,.55), transparent 19rem),
    linear-gradient(135deg, #dff3e9, #c8e9dd);
  color: #173a31;
  box-shadow: 0 18px 46px rgba(41,87,71,.10);
}
html[data-theme="mint-orbit"] .public-profile-hero p,
html[data-theme="mint-orbit"] .public-profile-hero small { color: #55776c; }
html[data-theme="mint-orbit"] .messages-shell {
  grid-template-columns: 320px minmax(0,1fr);
  gap: 1.1rem;
}
html[data-theme="mint-orbit"] .messages-inbox { padding: 1.15rem; }
html[data-theme="mint-orbit"] .messages-chat { overflow: hidden; }
html[data-theme="mint-orbit"] .chat-message-list {
  gap: .7rem;
  background: linear-gradient(180deg, #f8fcfa, #eff7f3);
}
html[data-theme="mint-orbit"] .chat-message-bubble {
  border: 1px solid #dbe8e2;
  border-radius: 22px 22px 22px 8px;
  background: #fff;
  color: #28483f;
  box-shadow: 0 7px 20px rgba(42,80,67,.07);
}
html[data-theme="mint-orbit"] .chat-message-row.is-own .chat-message-bubble {
  border-color: #afd9c8;
  border-radius: 22px 22px 8px 22px;
  background: #dff2ea;
  color: #1c4b3e;
}
html[data-theme="mint-orbit"] .chat-composer,
html[data-theme="mint-orbit"] .messages-chat-header {
  background: rgba(255,255,255,.94);
  border-color: #e0ebe6;
}
html[data-theme="mint-orbit"] .modal-card,
html[data-theme="mint-orbit"] .profile-search-results,
html[data-theme="mint-orbit"] .header-profile-menu,
html[data-theme="mint-orbit"] .profile-options-menu,
html[data-theme="mint-orbit"] .chat-actions-menu,
html[data-theme="mint-orbit"] .conversation-actions-menu {
  border: 1px solid #dbe8e2;
  border-radius: 24px;
  background: rgba(255,255,255,.97);
  color: #18332d;
  box-shadow: 0 28px 80px rgba(38,66,56,.16);
}
html[data-theme="mint-orbit"] .theme-option {
  border-color: #d8e7df;
  border-radius: 22px;
  background: rgba(255,255,255,.86);
}
html[data-theme="mint-orbit"] .theme-option.is-selected {
  border-color: rgba(47,159,126,.55);
  box-shadow: 0 0 0 3px rgba(47,159,126,.08);
}
html[data-theme="mint-orbit"] .mint-orbit-preview {
  border: 1px solid #c7dfd4;
  border-radius: 16px;
  background: linear-gradient(145deg, #ffffff 0 58%, #cce9dd 58% 76%, #edf6f1 76%);
  box-shadow: inset 0 1px 0 #fff, 0 4px 10px rgba(42,88,72,.08);
}

/* ---------- Solar Circuit: industrial orbital control / brutal technical ---------- */
html[data-theme="solar-circuit"] {
  color-scheme: dark;
  --background: #0d0f10;
  --background-deep: #070809;
  --background-soft: #171a1b;
  --surface: #151819;
  --surface-secondary: #1d2122;
  --surface-elevated: #181b1c;
  --surface-translucent: rgba(13,15,16,.96);
  --text-primary: #f3f0e7;
  --text-secondary: #c7c0b2;
  --text-muted: #827d73;
  --accent: #f6b83f;
  --accent-hover: #ffd174;
  --accent-contrast: #151006;
  --accent-soft: rgba(246,184,63,.11);
  --accent-blue: #9ba9a5;
  --border: rgba(236,225,201,.24);
  --border-soft: rgba(236,225,201,.11);
  --header-bg: #0b0d0e;
  --input-background: #0c0e0f;
  --danger: #ef726c;
  --success: #8bbf92;
  --warning: #f6b83f;
  --heart: #f4c96e;
  --body-background:
    linear-gradient(rgba(246,184,63,.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(246,184,63,.024) 1px, transparent 1px),
    linear-gradient(145deg, #141718 0%, #0d0f10 52%, #070809 100%);
  --shadow: 0 18px 40px rgba(0,0,0,.35);
  --shadow-soft: 0 8px 22px rgba(0,0,0,.25);
  --shadow-modal: 0 28px 72px rgba(0,0,0,.52);
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-xl: 0;
  --font-sans: "Segoe UI", Inter, ui-sans-serif, sans-serif;
  --font-display: "Arial Narrow", "Roboto Condensed", "Segoe UI", sans-serif;
  --transition: 110ms linear;
  --primary: var(--accent);
  --muted-text: var(--text-muted);
  --border-color: var(--border-soft);
  background-size: 32px 32px, 32px 32px, auto;
}
html[data-theme="solar-circuit"] .app-header,
html[data-theme="solar-circuit"] body > header:not(.app-header) {
  min-height: 64px;
  border-bottom: 1px solid rgba(246,184,63,.45);
  background: #0b0d0e;
  box-shadow: none;
}
html[data-theme="solar-circuit"] .app-page { padding-top: 64px; }
html[data-theme="solar-circuit"] .app-brand,
html[data-theme="solar-circuit"] .logo {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: .9rem;
  letter-spacing: .14em;
  font-weight: 800;
}
html[data-theme="solar-circuit"] .brand-heart { color: var(--accent); }
html[data-theme="solar-circuit"] .app-topnav { gap: 0; }
html[data-theme="solar-circuit"] .topnav-link {
  min-height: 63px;
  padding: 0 1rem;
  border-left: 1px solid rgba(236,225,201,.10);
  border-radius: 0;
  color: #a9a397;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
html[data-theme="solar-circuit"] .topnav-link:last-child { border-right: 1px solid rgba(236,225,201,.10); }
html[data-theme="solar-circuit"] .topnav-link:hover { background: #181b1c; color: #f3f0e7; }
html[data-theme="solar-circuit"] .topnav-link.is-active {
  color: #151006;
  background: var(--accent);
  box-shadow: none;
}
html[data-theme="solar-circuit"] .app-search,
html[data-theme="solar-circuit"] .form-control,
html[data-theme="solar-circuit"] .chat-input-shell {
  border: 1px solid rgba(236,225,201,.22);
  border-radius: 0;
  background: #0c0e0f;
  box-shadow: inset 3px 0 0 rgba(246,184,63,.30);
}
html[data-theme="solar-circuit"] .app-search:focus-within,
html[data-theme="solar-circuit"] .form-control:focus,
html[data-theme="solar-circuit"] .chat-input-shell:focus-within {
  border-color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent), 0 0 0 1px var(--accent);
}
html[data-theme="solar-circuit"] .app-shell {
  grid-template-columns: 215px minmax(0, 780px) 285px;
  gap: .75rem;
  padding-top: 1rem;
}
html[data-theme="solar-circuit"] .card,
html[data-theme="solar-circuit"] .friends-sidebar-inner,
html[data-theme="solar-circuit"] .messages-inbox,
html[data-theme="solar-circuit"] .messages-chat,
html[data-theme="solar-circuit"] .feed-tag-filter {
  border: 1px solid rgba(236,225,201,.18);
  border-radius: 0;
  background: #141718;
  box-shadow: none;
}
html[data-theme="solar-circuit"] .friends-sidebar-inner,
html[data-theme="solar-circuit"] .right-sidebar .card { padding: .85rem; }
html[data-theme="solar-circuit"] .sidebar-heading-row h2,
html[data-theme="solar-circuit"] .sidebar-heading-row h3,
html[data-theme="solar-circuit"] .right-sidebar h2,
html[data-theme="solar-circuit"] .right-sidebar h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .05em;
}
html[data-theme="solar-circuit"] .feed-intro {
  margin-bottom: .65rem;
  padding: .65rem .75rem;
  border: 1px solid rgba(236,225,201,.15);
  border-left: 5px solid var(--accent);
  background: #111415;
}
html[data-theme="solar-circuit"] .feed-intro h1,
html[data-theme="solar-circuit"] .post-title,
html[data-theme="solar-circuit"] .public-profile-title-row h1 {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.02em;
}
html[data-theme="solar-circuit"] .feed-intro h1 { font-size: clamp(2rem,4vw,3.3rem); }
html[data-theme="solar-circuit"] .feed-intro p { max-width: 540px; font-size: .85rem; }
html[data-theme="solar-circuit"] .eyebrow {
  color: var(--accent);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .64rem;
  letter-spacing: .16em;
}
html[data-theme="solar-circuit"] .feed-list { gap: .7rem; }
html[data-theme="solar-circuit"] .feed-post {
  position: relative;
  overflow: hidden;
  padding: 1.05rem 1.15rem;
  border: 1px solid rgba(236,225,201,.19);
  border-radius: 0;
  background: #151819;
}
html[data-theme="solar-circuit"] .feed-post::before {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 30px;
  height: 30px;
  border-top: 2px solid var(--accent);
  border-right: 2px solid var(--accent);
  border-left: 0;
}
html[data-theme="solar-circuit"] .feed-post::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 72px;
  height: 2px;
  background: var(--accent);
  opacity: .5;
}
html[data-theme="solar-circuit"] .feed-post:hover {
  transform: none;
  border-color: rgba(246,184,63,.48);
  background: #181c1d;
}
html[data-theme="solar-circuit"] .post-title { font-size: clamp(1.35rem,2.6vw,1.9rem); }
html[data-theme="solar-circuit"] .post-body {
  font-size: .91rem;
  line-height: 1.65;
  color: #d8d2c6;
}
html[data-theme="solar-circuit"] .post-author-row { margin-bottom: .7rem; }
html[data-theme="solar-circuit"] .post-footer { margin-top: .8rem; padding-top: .65rem; }
html[data-theme="solar-circuit"] .post-avatar,
html[data-theme="solar-circuit"] .person-avatar,
html[data-theme="solar-circuit"] .large-avatar,
html[data-theme="solar-circuit"] .public-profile-avatar {
  border-radius: 0;
  border: 1px solid rgba(246,184,63,.38);
  background: #1c2021;
  color: var(--accent);
  box-shadow: none;
}
html[data-theme="solar-circuit"] .match-badge,
html[data-theme="solar-circuit"] .post-tag-badge,
html[data-theme="solar-circuit"] .feed-tag-filter-button {
  border-radius: 0;
  border: 1px solid rgba(246,184,63,.34);
  background: rgba(246,184,63,.07);
  color: #f5ce82;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-transform: uppercase;
  letter-spacing: .06em;
}
html[data-theme="solar-circuit"] .btn {
  min-height: 39px;
  padding: .6rem .9rem;
  border-radius: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .045em;
}
html[data-theme="solar-circuit"] .btn-primary {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-contrast);
  box-shadow: 3px 3px 0 rgba(246,184,63,.18);
}
html[data-theme="solar-circuit"] .btn-primary:hover {
  transform: translate(-1px,-1px);
  background: var(--accent-hover);
  box-shadow: 5px 5px 0 rgba(246,184,63,.18);
}
html[data-theme="solar-circuit"] .btn-secondary,
html[data-theme="solar-circuit"] .icon-button,
html[data-theme="solar-circuit"] .avatar-button {
  border: 1px solid rgba(236,225,201,.20);
  border-radius: 0;
  background: #111415;
}
html[data-theme="solar-circuit"] .post-footer,
html[data-theme="solar-circuit"] .profile-facts > div,
html[data-theme="solar-circuit"] .sidebar-divider {
  border-color: rgba(236,225,201,.12);
  background: none;
}
html[data-theme="solar-circuit"] .person-row,
html[data-theme="solar-circuit"] .conversation-row-shell { border-radius: 0; }
html[data-theme="solar-circuit"] .person-row:hover,
html[data-theme="solar-circuit"] .conversation-row-shell:hover,
html[data-theme="solar-circuit"] .profile-search-item:hover { background: #1b1f20; }
html[data-theme="solar-circuit"] .conversation-row-shell.is-active {
  background: rgba(246,184,63,.075);
  box-shadow: inset 4px 0 0 var(--accent);
}
html[data-theme="solar-circuit"] .public-profile-hero {
  position: relative;
  overflow: hidden;
  padding: 1.3rem;
  border: 1px solid rgba(236,225,201,.20);
  border-radius: 0;
  background:
    linear-gradient(90deg, rgba(246,184,63,.08), transparent 44%),
    #141718;
  box-shadow: none;
}
html[data-theme="solar-circuit"] .public-profile-hero::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 40px;
  height: 40px;
  border-top: 2px solid var(--accent);
  border-left: 2px solid var(--accent);
}
html[data-theme="solar-circuit"] .messages-shell {
  grid-template-columns: 285px minmax(0,1fr);
  gap: .6rem;
}
html[data-theme="solar-circuit"] .messages-inbox,
html[data-theme="solar-circuit"] .messages-chat { border-radius: 0; }
html[data-theme="solar-circuit"] .messages-inbox-heading,
html[data-theme="solar-circuit"] .messages-chat-header {
  border-bottom: 1px solid rgba(236,225,201,.13);
}
html[data-theme="solar-circuit"] .chat-message-list {
  gap: .35rem;
  background:
    linear-gradient(rgba(246,184,63,.018) 1px, transparent 1px),
    #0d0f10;
  background-size: 100% 30px;
}
html[data-theme="solar-circuit"] .chat-message-bubble {
  border: 1px solid rgba(236,225,201,.18);
  border-radius: 0;
  background: #1a1e1f;
  box-shadow: none;
}
html[data-theme="solar-circuit"] .chat-message-row.is-own .chat-message-bubble {
  border-color: rgba(246,184,63,.45);
  background: #282116;
  color: #f6ead2;
}
html[data-theme="solar-circuit"] .chat-composer,
html[data-theme="solar-circuit"] .messages-chat-header { background: #111415; }
html[data-theme="solar-circuit"] .modal-card,
html[data-theme="solar-circuit"] .profile-search-results,
html[data-theme="solar-circuit"] .header-profile-menu,
html[data-theme="solar-circuit"] .profile-options-menu,
html[data-theme="solar-circuit"] .chat-actions-menu,
html[data-theme="solar-circuit"] .conversation-actions-menu {
  border: 1px solid rgba(246,184,63,.28);
  border-radius: 0;
  background: #121516;
  box-shadow: 10px 10px 0 rgba(0,0,0,.28), 0 24px 64px rgba(0,0,0,.38);
}
html[data-theme="solar-circuit"] .theme-option {
  border-radius: 0;
  background: #141718;
}
html[data-theme="solar-circuit"] .theme-option.is-selected {
  border-color: var(--accent);
  box-shadow: inset 4px 0 0 var(--accent);
}
html[data-theme="solar-circuit"] .solar-circuit-preview {
  border-radius: 0;
  border: 1px solid rgba(246,184,63,.58);
  background:
    linear-gradient(rgba(246,184,63,.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(246,184,63,.13) 1px, transparent 1px),
    #121516;
  background-size: 9px 9px;
  box-shadow: inset 0 -8px 0 rgba(246,184,63,.22);
}

/* ---------- Responsive identity for redesigned/new themes ---------- */
@media (max-width: 1180px) {
  html[data-theme="spaceglas-x"] .app-shell,
  html[data-theme="neon-social"] .app-shell,
  html[data-theme="mint-orbit"] .app-shell,
  html[data-theme="solar-circuit"] .app-shell {
    grid-template-columns: 220px minmax(0, 760px);
  }
}
@media (max-width: 850px) {
  html[data-theme="spaceglas-x"] .app-header {
    inset: 8px 9px auto;
    min-height: 62px;
    border-radius: 21px;
  }
  html[data-theme="spaceglas-x"] .app-page { padding-top: 80px; }
  html[data-theme="spaceglas-x"] .friends-sidebar { inset-block-start: 80px; }
  html[data-theme="spaceglas-x"] .messages-chat-header { top: 80px; }
  html[data-theme="spaceglas-x"] .mobile-bottom-nav {
    display: grid;
    left: 10px;
    right: 10px;
    bottom: 10px;
    width: auto;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 24px;
    background: rgba(6,8,10,.57);
    box-shadow: 0 24px 60px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.12);
    backdrop-filter: blur(28px) saturate(145%);
    -webkit-backdrop-filter: blur(28px) saturate(145%);
  }
  html[data-theme="spaceglas-x"] .mobile-nav-item {
    border-radius: 17px;
    color: #979fa6;
  }
  html[data-theme="spaceglas-x"] .mobile-nav-item.is-active {
    color: rgb(255, 255, 255);
    background: rgba(255,255,255,.09);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
  }
  html[data-theme="spaceglas-x"] .mobile-create-nav {
    border: 1px solid rgba(255,255,255,.20);
    background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.045));
  }
  html[data-theme="spaceglas-x"] .feed-post { padding: 1.25rem; border-radius: 23px; }
  html[data-theme="spaceglas-x"] .public-profile-hero { padding: 1.55rem; border-radius: 28px; }

  html[data-theme="neon-social"] .app-header { min-height: 68px; border-bottom-width: 3px; }
  html[data-theme="neon-social"] .app-page { padding-top: 68px; }
  html[data-theme="neon-social"] .friends-sidebar { inset-block-start: 68px; background: rgba(8,5,11,.96); }
  html[data-theme="neon-social"] .messages-chat-header { top: 68px; }
  html[data-theme="neon-social"] .feed-intro { padding-left: 1rem; border-left-width: 5px; }
  html[data-theme="neon-social"] .feed-post,
  html[data-theme="neon-social"] .feed-post:nth-child(even),
  html[data-theme="neon-social"] .feed-post:nth-child(odd) { margin-left: 0; margin-right: 0; }
  html[data-theme="neon-social"] .mobile-bottom-nav {
    display: grid;
    border-top: 3px solid #fff;
    background: #08050b;
  }
  html[data-theme="neon-social"] .mobile-nav-item {
    position: relative;
    border-radius: 0;
    color: #988891;
  }
  html[data-theme="neon-social"] .mobile-nav-item.is-active {
    color: rgb(255, 255, 255);
    background: #140c17;
  }
  html[data-theme="neon-social"] .mobile-nav-item.is-active::before {
    content: "";
    position: absolute;
    top: -3px;
    left: 20%;
    right: 20%;
    height: 3px;
    background: var(--accent);
  }
  html[data-theme="neon-social"] .mobile-create-nav { background: var(--accent); color: var(--accent-contrast); }
  html[data-theme="neon-social"] .feed-post { padding: 1.15rem 1rem 1.1rem 1.25rem; }
  html[data-theme="neon-social"] .public-profile-hero { padding: 1.35rem; border-top-width: 7px; }

  html[data-theme="mint-orbit"] .app-header { min-height: 70px; }
  html[data-theme="mint-orbit"] .app-page { padding-top: 70px; }
  html[data-theme="mint-orbit"] .friends-sidebar { inset-block-start: 70px; background: rgba(238,246,241,.95); }
  html[data-theme="mint-orbit"] .messages-chat-header { top: 70px; }
  html[data-theme="mint-orbit"] .mobile-bottom-nav {
    display: grid;
    left: 10px;
    right: 10px;
    bottom: 10px;
    width: auto;
    border: 1px solid #d7e7df;
    border-radius: 25px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 16px 40px rgba(41,87,71,.12);
  }
  html[data-theme="mint-orbit"] .mobile-nav-item { border-radius: 18px; color: #789087; }
  html[data-theme="mint-orbit"] .mobile-nav-item.is-active { color: #266f59; background: #e5f3ec; }
  html[data-theme="mint-orbit"] .mobile-create-nav { background: var(--accent); color: rgb(255, 255, 255); }
  html[data-theme="mint-orbit"] .feed-post { padding: 1.25rem; border-radius: 24px; }
  html[data-theme="mint-orbit"] .public-profile-hero { padding: 1.6rem; border-radius: 28px; }

  html[data-theme="solar-circuit"] .app-header { min-height: 60px; }
  html[data-theme="solar-circuit"] .app-page { padding-top: 60px; }
  html[data-theme="solar-circuit"] .friends-sidebar { inset-block-start: 60px; background: #0d0f10; }
  html[data-theme="solar-circuit"] .messages-chat-header { top: 60px; }
  html[data-theme="solar-circuit"] .mobile-bottom-nav {
    display: grid;
    border-top: 1px solid var(--accent);
    background: #0b0d0e;
  }
  html[data-theme="solar-circuit"] .mobile-nav-item {
    border-radius: 0;
    color: #898377;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  }
  html[data-theme="solar-circuit"] .mobile-nav-item.is-active {
    color: #151006;
    background: var(--accent);
  }
  html[data-theme="solar-circuit"] .mobile-create-nav { border-left: 1px solid rgba(236,225,201,.14); border-right: 1px solid rgba(236,225,201,.14); }
  html[data-theme="solar-circuit"] .feed-post { padding: .95rem; }
  html[data-theme="solar-circuit"] .public-profile-hero { padding: 1.05rem; }

  html[data-theme="spaceglas-x"] .messages-shell,
  html[data-theme="neon-social"] .messages-shell,
  html[data-theme="mint-orbit"] .messages-shell,
  html[data-theme="solar-circuit"] .messages-shell {
    grid-template-columns: 1fr;
    gap: .8rem;
  }
}
@media (max-width: 560px) {
  html[data-theme="spaceglas-x"] .app-header { inset: 6px 7px auto; border-radius: 19px; }
  html[data-theme="spaceglas-x"] .app-page { padding-top: 76px; }
  html[data-theme="spaceglas-x"] .modal-card { border-radius: 24px; }
  html[data-theme="spaceglas-x"] .messages-inbox,
  html[data-theme="spaceglas-x"] .messages-chat { border-radius: 24px; }

  html[data-theme="neon-social"] .feed-intro h1 { font-size: 2.45rem; }
  html[data-theme="neon-social"] .post-title { font-size: 1.55rem; }
  html[data-theme="neon-social"] .modal-card { border-radius: 0; }

  html[data-theme="mint-orbit"] .feed-intro h1 { font-size: 2.45rem; }
  html[data-theme="mint-orbit"] .messages-inbox,
  html[data-theme="mint-orbit"] .messages-chat { border-radius: 22px; }
  html[data-theme="mint-orbit"] .modal-card { border-radius: 22px; }

  html[data-theme="solar-circuit"] .feed-intro { padding: .55rem .6rem; }
  html[data-theme="solar-circuit"] .post-title { font-size: 1.4rem; }
  html[data-theme="solar-circuit"] .modal-card { border-radius: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme="spaceglas-x"] *,
  html[data-theme="neon-social"] *,
  html[data-theme="mint-orbit"] *,
  html[data-theme="solar-circuit"] * {
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ======================================================================
   V2.6.61 — SpaceGlas X rebuild only.
   Premium black/white liquid-glass system. Every application selector in
   this release layer is scoped to html[data-theme="spaceglas-x"].
   ====================================================================== */
html[data-theme="spaceglas-x"] {
  color-scheme: dark;
  --background: #050607;
  --background-deep: #010203;
  --background-soft: #0a0c0f;
  --surface: rgba(18, 20, 23, .56);
  --surface-secondary: rgba(255, 255, 255, .055);
  --surface-elevated: rgba(14, 17, 20, .76);
  --surface-translucent: rgba(4, 6, 8, .46);
  --text-primary: #f8f9fa;
  --text-secondary: #c7cbd0;
  --text-muted: #858c94;
  --accent: #f4f8f9;
  --accent-hover: #ffffff;
  --accent-contrast: #040506;
  --accent-soft: rgba(204, 235, 242, .085);
  --accent-blue: #a9dce7;
  --border: rgba(255, 255, 255, .19);
  --border-soft: rgba(255, 255, 255, .075);
  --header-bg: rgba(5, 7, 9, .48);
  --input-background: rgba(0, 2, 4, .48);
  --danger: #ff919a;
  --success: #a8d8c9;
  --warning: #dcc9a4;
  --heart: #e4f3f6;
  --body-background:
    radial-gradient(ellipse 72rem 42rem at 18% -14%, rgba(255,255,255,.13), transparent 58%),
    radial-gradient(ellipse 48rem 36rem at 92% 7%, rgba(157,214,226,.075), transparent 62%),
    radial-gradient(ellipse 56rem 42rem at 48% 108%, rgba(83,98,116,.16), transparent 67%),
    linear-gradient(145deg, #090b0e 0%, #030405 47%, #000 100%);
  --modal-backdrop: rgba(0, 1, 2, .74);
  --shadow: 0 34px 100px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.12);
  --shadow-soft: 0 20px 60px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.08);
  --shadow-modal: 0 52px 140px rgba(0,0,0,.66), inset 0 1px 0 rgba(255,255,255,.15);
  --shadow-drawer: 22px 0 80px rgba(0,0,0,.52);
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 23px;
  --radius-xl: 30px;
  --radius-pill: 999px;
  --font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  --font-display: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  --transition: 240ms cubic-bezier(.2,.72,.18,1);
  --primary: var(--accent);
  --muted-text: var(--text-muted);
  --border-color: var(--border-soft);

  /* SpaceGlas X material tokens. */
  --sgx-clear: rgba(255,255,255,.045);
  --sgx-clear-strong: rgba(255,255,255,.075);
  --sgx-frost: rgba(16,19,22,.56);
  --sgx-frost-strong: rgba(10,13,16,.72);
  --sgx-smoke: rgba(2,4,6,.58);
  --sgx-smoke-heavy: rgba(2,4,6,.78);
  --sgx-edge: rgba(255,255,255,.18);
  --sgx-edge-soft: rgba(255,255,255,.085);
  --sgx-edge-hot: rgba(255,255,255,.48);
  --sgx-ice: rgba(174,225,235,.72);
  --sgx-ice-soft: rgba(174,225,235,.10);
  --sgx-specular: linear-gradient(112deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.07) 15%, transparent 34%, transparent 69%, rgba(180,225,234,.05) 84%, rgba(255,255,255,.12) 100%);
}

/* Optical environment behind the glass: low-noise light wells, not decoration. */
html[data-theme="spaceglas-x"] body {
  position: relative;
  min-height: 100vh;
  background: var(--body-background);
  background-attachment: fixed;
  isolation: isolate;
}
html[data-theme="spaceglas-x"] body::before,
html[data-theme="spaceglas-x"] body::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
  filter: blur(2px);
}
html[data-theme="spaceglas-x"] body::before {
  width: min(70vw, 860px);
  height: min(70vw, 860px);
  left: -20vw;
  top: 18vh;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.075), rgba(255,255,255,.018) 32%, transparent 68%);
}
html[data-theme="spaceglas-x"] body::after {
  width: min(56vw, 720px);
  height: min(56vw, 720px);
  right: -18vw;
  top: 38vh;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(151,205,216,.075), rgba(255,255,255,.012) 34%, transparent 70%);
}

/* Header = clear optical glass: strongest blur, sharp edge light, floating shell. */
html[data-theme="spaceglas-x"] .app-header,
html[data-theme="spaceglas-x"] body > header:not(.app-header) {
  position: fixed;
  inset: 10px 16px auto;
  width: auto;
  min-height: 66px;
  padding-inline: 1rem;
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 21px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.095), rgba(255,255,255,.022) 47%, rgba(0,0,0,.06)),
    rgba(5,7,9,.50);
  box-shadow:
    0 26px 70px rgba(0,0,0,.42),
    0 2px 8px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(255,255,255,.035),
    inset 1px 0 0 rgba(255,255,255,.06),
    inset -1px 0 0 rgba(178,226,235,.04);
  backdrop-filter: blur(38px) saturate(150%) brightness(.96);
  -webkit-backdrop-filter: blur(38px) saturate(150%) brightness(.96);
  overflow: visible;
}
html[data-theme="spaceglas-x"] .app-header::before,
html[data-theme="spaceglas-x"] body > header:not(.app-header)::before {
  content: "";
  position: absolute;
  inset: 0 7% auto;
  height: 1px;
  border-radius: 999px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.18) 8%, rgba(255,255,255,.84) 27%, rgba(198,232,239,.32) 53%, rgba(255,255,255,.14) 78%, transparent 100%);
  opacity: .78;
}
html[data-theme="spaceglas-x"] .app-header::after,
html[data-theme="spaceglas-x"] body > header:not(.app-header)::after {
  content: "";
  position: absolute;
  inset: 1px auto auto 10%;
  width: 36%;
  height: 54%;
  border-radius: 0 0 50% 50%;
  pointer-events: none;
  background: radial-gradient(ellipse at top, rgba(255,255,255,.12), transparent 70%);
  filter: blur(10px);
  opacity: .65;
}
html[data-theme="spaceglas-x"] .app-page { padding-top: 92px; }
html[data-theme="spaceglas-x"] .app-brand,
html[data-theme="spaceglas-x"] .logo {
  color: rgb(255, 255, 255);
  font-size: .98rem;
  font-weight: 730;
  letter-spacing: -.045em;
}
html[data-theme="spaceglas-x"] .brand-heart {
  color: #f3fafb;
  text-shadow: 0 0 18px rgba(171,220,230,.18);
}
html[data-theme="spaceglas-x"] .app-topnav {
  gap: 2px;
  padding: 3px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 14px;
  background: rgba(0,0,0,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}
html[data-theme="spaceglas-x"] .topnav-link {
  min-height: 38px;
  padding: .52rem .9rem;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #aab0b6;
  font-size: .82rem;
  font-weight: 650;
  letter-spacing: -.012em;
  transition: color var(--transition), background var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
html[data-theme="spaceglas-x"] .topnav-link:hover {
  color: rgb(255, 255, 255);
  background: rgba(255,255,255,.045);
}
html[data-theme="spaceglas-x"] .topnav-link.is-active {
  color: rgb(255, 255, 255);
  border-color: rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.035));
  box-shadow: 0 6px 15px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.17);
}

/* Search = inset lens, deliberately distinct from cards. */
html[data-theme="spaceglas-x"] .app-search,
html[data-theme="spaceglas-x"] .chat-input-shell {
  border: 1px solid rgba(255,255,255,.115);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(255,255,255,.026)),
    rgba(0,2,4,.45);
  box-shadow:
    inset 0 2px 8px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.065),
    0 8px 24px rgba(0,0,0,.12);
  backdrop-filter: blur(20px) saturate(125%);
  -webkit-backdrop-filter: blur(20px) saturate(125%);
}
html[data-theme="spaceglas-x"] .app-search { height: 40px; }
html[data-theme="spaceglas-x"] .app-search:focus-within,
html[data-theme="spaceglas-x"] .chat-input-shell:focus-within {
  border-color: rgba(190,230,238,.28);
  box-shadow: inset 0 2px 8px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.10), 0 0 0 3px rgba(174,225,235,.045);
}

/* Layout becomes wider, quieter and more architectural without changing markup. */
html[data-theme="spaceglas-x"] .app-shell {
  grid-template-columns: 232px minmax(0, 760px) 286px;
  gap: 1.45rem;
  padding-top: 1.65rem;
}
html[data-theme="spaceglas-x"] .feed-intro {
  align-items: end;
  min-height: 112px;
  margin-bottom: 1.35rem;
  padding: .55rem .25rem .4rem;
}
html[data-theme="spaceglas-x"] .feed-intro h1 {
  font-size: clamp(2.4rem, 5vw, 4.25rem);
  line-height: .93;
  font-weight: 610;
  letter-spacing: -.068em;
}
html[data-theme="spaceglas-x"] .feed-intro p {
  max-width: 590px;
  margin-top: .7rem;
  color: #a9afb5;
  line-height: 1.65;
}
html[data-theme="spaceglas-x"] .eyebrow {
  color: #8e969e;
  font-size: .68rem;
  font-weight: 720;
  letter-spacing: .18em;
  text-transform: uppercase;
}
html[data-theme="spaceglas-x"] .feed-member-stats {
  gap: .5rem;
  margin-top: .85rem;
}
html[data-theme="spaceglas-x"] .feed-member-stat {
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 10px;
  background: rgba(255,255,255,.025);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

/* Smoke glass = sidebars. Darker, quieter, almost structural. */
html[data-theme="spaceglas-x"] .friends-sidebar-inner,
html[data-theme="spaceglas-x"] .profile-summary,
html[data-theme="spaceglas-x"] .right-sidebar > .card,
html[data-theme="spaceglas-x"] .messages-inbox {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.105);
  background:
    linear-gradient(150deg, rgba(255,255,255,.05), transparent 36%),
    rgba(3,5,7,.60);
  box-shadow:
    0 22px 60px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.085),
    inset 0 -1px 0 rgba(255,255,255,.018);
  backdrop-filter: blur(25px) saturate(118%);
  -webkit-backdrop-filter: blur(25px) saturate(118%);
}
html[data-theme="spaceglas-x"] .friends-sidebar-inner {
  padding: .85rem;
  border-radius: 19px;
}
html[data-theme="spaceglas-x"] .right-sidebar {
  gap: .85rem;
}
html[data-theme="spaceglas-x"] .right-sidebar > .card {
  padding: 1.05rem;
  border-radius: 19px;
}
html[data-theme="spaceglas-x"] .sidebar-heading-row {
  padding: .15rem .2rem .45rem;
}
html[data-theme="spaceglas-x"] .sidebar-heading-row h2 {
  font-size: 1.08rem;
  font-weight: 620;
  letter-spacing: -.03em;
}
html[data-theme="spaceglas-x"] .sidebar-divider {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
}
html[data-theme="spaceglas-x"] .person-row {
  border: 1px solid transparent;
  border-radius: 12px;
  padding: .55rem .58rem;
  transition: background var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
html[data-theme="spaceglas-x"] .person-row:hover {
  border-color: rgba(255,255,255,.07);
  background: linear-gradient(105deg, rgba(255,255,255,.06), rgba(255,255,255,.018));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  transform: translateX(2px);
}
html[data-theme="spaceglas-x"] .person-avatar,
html[data-theme="spaceglas-x"] .post-avatar,
html[data-theme="spaceglas-x"] .large-avatar,
html[data-theme="spaceglas-x"] .public-profile-avatar,
html[data-theme="spaceglas-x"] .chat-header-avatar {
  border: 1px solid rgba(255,255,255,.20);
  background: linear-gradient(145deg, rgba(255,255,255,.11), rgba(255,255,255,.025));
  box-shadow: 0 10px 28px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.19);
}

/* Feed = frosted optical slabs. More opaque than clear controls for reading. */
html[data-theme="spaceglas-x"] .feed-list {
  gap: 1.2rem;
}
html[data-theme="spaceglas-x"] .feed-post,
html[data-theme="spaceglas-x"] .feed-loading,
html[data-theme="spaceglas-x"] .favorites-list > .card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 1.65rem 1.75rem 1.5rem;
  border: 1px solid rgba(255,255,255,.145);
  border-radius: 25px 25px 25px 11px;
  background:
    linear-gradient(132deg, rgba(255,255,255,.095), rgba(255,255,255,.018) 38%, rgba(255,255,255,.035) 71%, rgba(174,225,235,.026)),
    rgba(9,12,15,.61);
  box-shadow:
    0 30px 76px rgba(0,0,0,.31),
    0 3px 10px rgba(0,0,0,.17),
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 1px 0 0 rgba(255,255,255,.035),
    inset 0 -1px 0 rgba(255,255,255,.025);
  backdrop-filter: blur(27px) saturate(128%);
  -webkit-backdrop-filter: blur(27px) saturate(128%);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition), background-position 500ms ease;
}
html[data-theme="spaceglas-x"] .feed-post::before,
html[data-theme="spaceglas-x"] .favorites-list > .card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(ellipse 58% 20% at 23% 0%, rgba(255,255,255,.16), transparent 70%),
    linear-gradient(112deg, transparent 18%, rgba(255,255,255,.035) 34%, transparent 49%);
  opacity: .68;
  transform: translate3d(0,0,0);
  transition: opacity var(--transition), transform 420ms cubic-bezier(.2,.72,.18,1);
}
html[data-theme="spaceglas-x"] .feed-post::after,
html[data-theme="spaceglas-x"] .favorites-list > .card::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 1px 12% auto;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.68), rgba(178,223,232,.20), transparent);
  opacity: .58;
}
html[data-theme="spaceglas-x"] .feed-post > *,
html[data-theme="spaceglas-x"] .favorites-list > .card > * {
  position: relative;
  z-index: 1;
}
html[data-theme="spaceglas-x"] .feed-post:hover {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.225);
  box-shadow:
    0 38px 92px rgba(0,0,0,.38),
    0 5px 14px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 1px 0 0 rgba(255,255,255,.045);
}
html[data-theme="spaceglas-x"] .feed-post:hover::before {
  opacity: .92;
  transform: translate3d(2.5%, 0, 0);
}
html[data-theme="spaceglas-x"] .post-author-row {
  margin-bottom: 1.05rem;
}
html[data-theme="spaceglas-x"] .post-title {
  max-width: 92%;
  margin-bottom: .8rem;
  font-size: clamp(1.55rem, 3vw, 2.25rem);
  line-height: 1.08;
  font-weight: 610;
  letter-spacing: -.047em;
}
html[data-theme="spaceglas-x"] .post-body {
  color: #e8eaec;
  line-height: 1.72;
}
html[data-theme="spaceglas-x"] .post-footer {
  margin-top: 1.25rem;
  padding-top: .9rem;
  border-top: 1px solid rgba(255,255,255,.07);
}
html[data-theme="spaceglas-x"] .match-badge,
html[data-theme="spaceglas-x"] .post-tag-badge,
html[data-theme="spaceglas-x"] .feed-tag-filter-button {
  border: 1px solid rgba(255,255,255,.105);
  background: rgba(255,255,255,.045);
  color: #dce2e5;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.075);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Composer / filters / reminders = layered medium frost. */
html[data-theme="spaceglas-x"] .feed-tag-filter,
html[data-theme="spaceglas-x"] .profile-reminder,
html[data-theme="spaceglas-x"] .profile-image-upload-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  background:
    linear-gradient(142deg, rgba(255,255,255,.075), rgba(255,255,255,.018) 44%, rgba(174,225,235,.018)),
    rgba(7,10,12,.56);
  box-shadow: 0 18px 48px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.11);
  backdrop-filter: blur(24px) saturate(125%);
  -webkit-backdrop-filter: blur(24px) saturate(125%);
}
html[data-theme="spaceglas-x"] .feed-tag-filter::before,
html[data-theme="spaceglas-x"] .profile-reminder::before {
  content: "";
  position: absolute;
  inset: 0 18% auto;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.44), transparent);
}

/* Buttons = denser solid glass, with a physical press response. */
html[data-theme="spaceglas-x"] .btn {
  min-height: 42px;
  border-radius: 13px;
  font-weight: 690;
  letter-spacing: -.018em;
  transition: transform 150ms ease, background var(--transition), border-color var(--transition), box-shadow var(--transition), color var(--transition);
}
html[data-theme="spaceglas-x"] .btn-primary {
  border: 1px solid rgba(255,255,255,.84);
  background: linear-gradient(180deg, #ffffff 0%, #e6e9eb 100%);
  color: #050607;
  box-shadow: 0 12px 28px rgba(0,0,0,.28), inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0,0,0,.13);
}
html[data-theme="spaceglas-x"] .btn-primary:hover {
  transform: translateY(-2px);
  background: #fff;
  box-shadow: 0 16px 36px rgba(0,0,0,.38), 0 0 24px rgba(177,224,233,.055), inset 0 1px 0 #fff;
}
html[data-theme="spaceglas-x"] .btn-primary:active {
  transform: translateY(0) scale(.985);
  box-shadow: 0 7px 16px rgba(0,0,0,.30), inset 0 1px 2px rgba(0,0,0,.08);
}
html[data-theme="spaceglas-x"] .btn-secondary,
html[data-theme="spaceglas-x"] .icon-button,
html[data-theme="spaceglas-x"] .avatar-button,
html[data-theme="spaceglas-x"] .post-action-button,
html[data-theme="spaceglas-x"] .profile-options-button,
html[data-theme="spaceglas-x"] .profile-album-nav {
  border: 1px solid rgba(255,255,255,.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.022)),
    rgba(5,7,9,.36);
  color: #f2f4f5;
  box-shadow: 0 7px 20px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.11);
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
}
html[data-theme="spaceglas-x"] .btn-secondary:hover,
html[data-theme="spaceglas-x"] .icon-button:hover,
html[data-theme="spaceglas-x"] .post-action-button:hover,
html[data-theme="spaceglas-x"] .profile-options-button:hover {
  border-color: rgba(255,255,255,.20);
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.035));
  box-shadow: 0 10px 26px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.16);
}
html[data-theme="spaceglas-x"] .btn-secondary:active,
html[data-theme="spaceglas-x"] .icon-button:active,
html[data-theme="spaceglas-x"] .post-action-button:active {
  transform: scale(.965);
}
html[data-theme="spaceglas-x"] .btn:focus-visible,
html[data-theme="spaceglas-x"] .icon-button:focus-visible,
html[data-theme="spaceglas-x"] .topnav-link:focus-visible,
html[data-theme="spaceglas-x"] .theme-option:focus-visible,
html[data-theme="spaceglas-x"] .form-control:focus-visible {
  outline: 2px solid rgba(198,232,239,.72);
  outline-offset: 2px;
}

/* Forms = inset polished glass rather than translucent cards. */
html[data-theme="spaceglas-x"] .form-control,
html[data-theme="spaceglas-x"] select.form-control,
html[data-theme="spaceglas-x"] textarea.form-control {
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 13px;
  background:
    linear-gradient(180deg, rgba(0,0,0,.17), rgba(255,255,255,.025)),
    rgba(1,3,5,.54);
  color: #f5f6f7;
  box-shadow: inset 0 2px 9px rgba(0,0,0,.31), inset 0 1px 0 rgba(255,255,255,.055);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}
html[data-theme="spaceglas-x"] .form-control:focus {
  border-color: rgba(188,227,235,.30);
  box-shadow: inset 0 2px 8px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 3px rgba(174,225,235,.045);
}
html[data-theme="spaceglas-x"] .form-group label {
  color: #b9bec3;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .02em;
}

/* Public profile = architectural hero glass, distinct from feed slabs. */
html[data-theme="spaceglas-x"] .public-profile-shell {
  padding-top: 1.7rem;
}
html[data-theme="spaceglas-x"] .public-profile-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 2.5rem;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 29px 29px 12px 29px;
  background:
    radial-gradient(ellipse 42rem 18rem at 82% -14%, rgba(185,229,237,.10), transparent 62%),
    linear-gradient(137deg, rgba(255,255,255,.115), rgba(255,255,255,.018) 46%, rgba(0,0,0,.04)),
    rgba(7,10,12,.61);
  box-shadow: 0 38px 100px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.21), inset 1px 0 0 rgba(255,255,255,.035);
  backdrop-filter: blur(32px) saturate(130%);
  -webkit-backdrop-filter: blur(32px) saturate(130%);
}
html[data-theme="spaceglas-x"] .public-profile-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 22% at 24% 0%, rgba(255,255,255,.18), transparent 70%),
    linear-gradient(110deg, transparent 23%, rgba(255,255,255,.035) 40%, transparent 56%);
  opacity: .72;
}
html[data-theme="spaceglas-x"] .public-profile-hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 1px 12% auto;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.78), rgba(180,224,233,.20), transparent);
}
html[data-theme="spaceglas-x"] .public-profile-hero > * { position: relative; z-index: 1; }
html[data-theme="spaceglas-x"] .public-profile-avatar {
  border-width: 1px;
  box-shadow: 0 22px 54px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.24), 0 0 0 6px rgba(255,255,255,.025);
}
html[data-theme="spaceglas-x"] .public-profile-title-row h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 600;
  letter-spacing: -.065em;
}
html[data-theme="spaceglas-x"] .public-profile-metrics,
html[data-theme="spaceglas-x"] .public-profile-views,
html[data-theme="spaceglas-x"] .public-profile-like-stat {
  border: 1px solid rgba(255,255,255,.085);
  border-radius: 12px;
  background: rgba(255,255,255,.025);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
html[data-theme="spaceglas-x"] .public-profile-info,
html[data-theme="spaceglas-x"] .public-profile-details,
html[data-theme="spaceglas-x"] .profile-album-panel {
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 21px;
  background: linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.015)), rgba(4,6,8,.56);
  box-shadow: 0 24px 64px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.09);
  backdrop-filter: blur(23px) saturate(120%);
  -webkit-backdrop-filter: blur(23px) saturate(120%);
}
html[data-theme="spaceglas-x"] .public-profile-facts > div,
html[data-theme="spaceglas-x"] .public-profile-details article {
  border-color: rgba(255,255,255,.065);
}

/* Messages = two glass materials: smoke console + clear conversation pane. */
html[data-theme="spaceglas-x"] .messages-shell {
  width: min(1240px, calc(100% - 2rem));
  grid-template-columns: 292px minmax(0, 1fr);
  gap: 1rem;
  padding-top: 1.7rem;
}
html[data-theme="spaceglas-x"] .messages-inbox {
  padding: .85rem;
  border-radius: 19px;
}
html[data-theme="spaceglas-x"] .messages-chat,
html[data-theme="spaceglas-x"] .chat-workspace {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.145);
  border-radius: 27px 27px 27px 11px;
  background:
    linear-gradient(136deg, rgba(255,255,255,.075), rgba(255,255,255,.012) 42%, rgba(177,224,233,.018)),
    rgba(5,8,10,.57);
  box-shadow: 0 34px 86px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.15);
  backdrop-filter: blur(29px) saturate(125%);
  -webkit-backdrop-filter: blur(29px) saturate(125%);
}
html[data-theme="spaceglas-x"] .messages-chat::before,
html[data-theme="spaceglas-x"] .chat-workspace::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 48% 16% at 23% 0%, rgba(255,255,255,.12), transparent 72%);
}
html[data-theme="spaceglas-x"] .messages-chat > *,
html[data-theme="spaceglas-x"] .chat-workspace > * { position: relative; z-index: 1; }
html[data-theme="spaceglas-x"] .messages-chat-header,
html[data-theme="spaceglas-x"] .chat-header {
  border-bottom: 1px solid rgba(255,255,255,.075);
  background: rgba(4,6,8,.52);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055);
  backdrop-filter: blur(26px) saturate(120%);
  -webkit-backdrop-filter: blur(26px) saturate(120%);
}
html[data-theme="spaceglas-x"] .messages-thread,
html[data-theme="spaceglas-x"] .chat-message-list {
  background:
    radial-gradient(circle at 18% 4%, rgba(255,255,255,.022), transparent 18rem),
    radial-gradient(circle at 86% 82%, rgba(174,225,235,.025), transparent 20rem),
    rgba(0,1,2,.15);
}
html[data-theme="spaceglas-x"] .conversation-row-shell {
  border: 1px solid transparent;
  border-radius: 12px;
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
html[data-theme="spaceglas-x"] .conversation-row-shell:hover {
  border-color: rgba(255,255,255,.065);
  background: linear-gradient(105deg, rgba(255,255,255,.055), rgba(255,255,255,.014));
  transform: translateX(2px);
}
html[data-theme="spaceglas-x"] .conversation-row-shell.is-active {
  border-color: rgba(255,255,255,.13);
  background: linear-gradient(100deg, rgba(255,255,255,.095), rgba(255,255,255,.024));
  box-shadow: inset 2px 0 0 rgba(224,243,247,.72), inset 0 1px 0 rgba(255,255,255,.06), 0 8px 22px rgba(0,0,0,.14);
}
html[data-theme="spaceglas-x"] .chat-message-bubble {
  border: 1px solid rgba(255,255,255,.115);
  border-radius: 17px 17px 17px 6px;
  background:
    linear-gradient(142deg, rgba(255,255,255,.095), rgba(255,255,255,.028) 55%, rgba(255,255,255,.04)),
    rgba(8,11,13,.53);
  box-shadow: 0 12px 28px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.11), inset 1px 0 0 rgba(255,255,255,.025);
  backdrop-filter: blur(19px) saturate(120%);
  -webkit-backdrop-filter: blur(19px) saturate(120%);
}
html[data-theme="spaceglas-x"] .chat-message-row.is-own .chat-message-bubble {
  border-radius: 17px 17px 6px 17px;
  border-color: rgba(190,229,237,.18);
  background:
    linear-gradient(142deg, rgba(205,238,244,.14), rgba(255,255,255,.035) 58%),
    rgba(13,18,21,.56);
  box-shadow: 0 12px 30px rgba(0,0,0,.20), inset 0 1px 0 rgba(235,250,252,.15);
}
html[data-theme="spaceglas-x"] .chat-composer,
html[data-theme="spaceglas-x"] .messages-composer {
  border-top: 1px solid rgba(255,255,255,.07);
  background: rgba(3,5,7,.62);
  box-shadow: 0 -16px 45px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter: blur(25px) saturate(120%);
  -webkit-backdrop-filter: blur(25px) saturate(120%);
}

/* Modals/dropdowns = strongest separated glass layer. */
html[data-theme="spaceglas-x"] .modal-backdrop {
  background: rgba(0,1,2,.68);
  backdrop-filter: blur(13px) saturate(90%);
  -webkit-backdrop-filter: blur(13px) saturate(90%);
}
html[data-theme="spaceglas-x"] .modal-card,
html[data-theme="spaceglas-x"] .profile-search-results,
html[data-theme="spaceglas-x"] .header-profile-menu,
html[data-theme="spaceglas-x"] .profile-options-menu,
html[data-theme="spaceglas-x"] .chat-actions-menu,
html[data-theme="spaceglas-x"] .conversation-actions-menu,
html[data-theme="spaceglas-x"] .message-item-menu {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.19);
  background:
    linear-gradient(140deg, rgba(255,255,255,.115), rgba(255,255,255,.022) 42%, rgba(184,226,235,.018)),
    rgba(7,10,13,.76);
  box-shadow:
    0 42px 120px rgba(0,0,0,.58),
    0 8px 26px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 1px 0 0 rgba(255,255,255,.035);
  backdrop-filter: blur(36px) saturate(135%);
  -webkit-backdrop-filter: blur(36px) saturate(135%);
}
html[data-theme="spaceglas-x"] .modal-card {
  border-radius: 27px 27px 27px 13px;
}
html[data-theme="spaceglas-x"] .modal-card::before {
  content: "";
  position: absolute;
  inset: 0 11% auto;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.78), rgba(186,227,235,.19), transparent);
  opacity: .72;
}
html[data-theme="spaceglas-x"] .profile-search-results,
html[data-theme="spaceglas-x"] .header-profile-menu,
html[data-theme="spaceglas-x"] .profile-options-menu,
html[data-theme="spaceglas-x"] .chat-actions-menu,
html[data-theme="spaceglas-x"] .conversation-actions-menu,
html[data-theme="spaceglas-x"] .message-item-menu {
  border-radius: 15px;
}
html[data-theme="spaceglas-x"] .profile-search-item:hover,
html[data-theme="spaceglas-x"] .profile-search-item:focus-visible,
html[data-theme="spaceglas-x"] .header-profile-menu-item:hover,
html[data-theme="spaceglas-x"] .profile-options-menu button:hover,
html[data-theme="spaceglas-x"] .chat-actions-menu button:hover,
html[data-theme="spaceglas-x"] .conversation-actions-menu button:hover {
  background: rgba(255,255,255,.065);
}
html[data-theme="spaceglas-x"] .notification-row {
  border-color: rgba(255,255,255,.08);
  border-radius: 14px;
  background: rgba(255,255,255,.022);
}
html[data-theme="spaceglas-x"] .notification-row:hover {
  background: rgba(255,255,255,.052);
}
html[data-theme="spaceglas-x"] .notification-row.is-unread {
  border-color: rgba(188,228,236,.18);
  background: linear-gradient(100deg, rgba(185,226,235,.075), rgba(255,255,255,.025));
}

/* Tabs / selectors = technical precision rather than pills. */
html[data-theme="spaceglas-x"] .favorites-tabs {
  gap: .35rem;
  padding: 3px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 13px;
  background: rgba(0,0,0,.18);
}
html[data-theme="spaceglas-x"] .favorites-tab {
  border-radius: 9px;
}
html[data-theme="spaceglas-x"] .favorites-tab.is-active {
  border-color: rgba(255,255,255,.13);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  color: rgb(255, 255, 255);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 6px 18px rgba(0,0,0,.15);
}
html[data-theme="spaceglas-x"] .theme-option {
  border: 1px solid rgba(255,255,255,.085);
  border-radius: 14px;
  background: rgba(255,255,255,.024);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
html[data-theme="spaceglas-x"] .theme-option:hover {
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.045);
}
html[data-theme="spaceglas-x"] .theme-option.is-selected {
  border-color: rgba(213,239,244,.30);
  background: linear-gradient(145deg, rgba(221,242,246,.075), rgba(255,255,255,.022));
  box-shadow: 0 0 0 2px rgba(189,228,236,.035), inset 0 1px 0 rgba(255,255,255,.09);
}

/* SpaceGlas X selector tile: optical slab miniature. */
.spaceglas-x-preview,
html[data-theme="spaceglas-x"] .spaceglas-x-preview {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.40);
  border-radius: 10px 10px 10px 4px;
  background:
    radial-gradient(ellipse at 24% 0%, rgba(255,255,255,.34), transparent 42%),
    linear-gradient(128deg, rgba(255,255,255,.24), rgba(255,255,255,.025) 42%, rgba(168,220,231,.08) 74%, rgba(255,255,255,.10)),
    linear-gradient(145deg, #12161a, #020304 70%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -9px 18px rgba(0,0,0,.30), 0 6px 18px rgba(0,0,0,.28);
}
.spaceglas-x-preview::after,
html[data-theme="spaceglas-x"] .spaceglas-x-preview::after {
  content: "";
  position: absolute;
  inset: 3px 8px auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.95), rgba(190,230,238,.30), transparent);
}

/* Tablet / laptop: preserve architectural layout and glass hierarchy. */
@media (max-width: 1180px) {
  html[data-theme="spaceglas-x"] .app-shell {
    grid-template-columns: 220px minmax(0, 760px);
    gap: 1.2rem;
  }
  html[data-theme="spaceglas-x"] .messages-shell {
    width: min(1080px, calc(100% - 1.5rem));
    grid-template-columns: 270px minmax(0,1fr);
  }
}

/* Mobile: same material language, fewer expensive layers and tighter optics. */
@media (max-width: 850px) {
  html[data-theme="spaceglas-x"] .app-header,
  html[data-theme="spaceglas-x"] body > header:not(.app-header) {
    inset: 7px 8px auto;
    min-height: 58px;
    height: 58px;
    padding-inline: .65rem;
    border-radius: 17px;
    backdrop-filter: blur(28px) saturate(135%);
    -webkit-backdrop-filter: blur(28px) saturate(135%);
  }
  html[data-theme="spaceglas-x"] .app-page { padding-top: 76px; }
  html[data-theme="spaceglas-x"] .app-shell { padding: .85rem .72rem 2rem; }
  html[data-theme="spaceglas-x"] .feed-intro {
    min-height: 88px;
    margin-bottom: .95rem;
    padding: .3rem .15rem;
  }
  html[data-theme="spaceglas-x"] .feed-intro h1 {
    font-size: clamp(2.25rem, 13vw, 3.35rem);
  }
  html[data-theme="spaceglas-x"] .feed-intro p { font-size: .88rem; }
  html[data-theme="spaceglas-x"] .feed-post {
    padding: 1.2rem 1.15rem 1.1rem;
    border-radius: 20px 20px 20px 8px;
    backdrop-filter: blur(21px) saturate(122%);
    -webkit-backdrop-filter: blur(21px) saturate(122%);
  }
  html[data-theme="spaceglas-x"] .feed-post:hover {
    transform: none;
  }
  html[data-theme="spaceglas-x"] .post-title {
    max-width: 100%;
    font-size: clamp(1.4rem, 6.8vw, 1.9rem);
  }
  html[data-theme="spaceglas-x"] .friends-sidebar-inner {
    border-radius: 18px 18px 0 0;
    backdrop-filter: blur(24px) saturate(120%);
    -webkit-backdrop-filter: blur(24px) saturate(120%);
  }
  html[data-theme="spaceglas-x"] .mobile-bottom-nav {
    left: 8px;
    right: 8px;
    bottom: 8px;
    width: auto;
    min-height: 64px;
    padding: 5px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 20px;
    background:
      linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.02)),
      rgba(4,6,8,.62);
    box-shadow: 0 22px 60px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.20);
    backdrop-filter: blur(30px) saturate(135%);
    -webkit-backdrop-filter: blur(30px) saturate(135%);
  }
  html[data-theme="spaceglas-x"] .mobile-nav-item {
    min-width: 0;
    border: 1px solid transparent;
    border-radius: 14px;
    color: #969da4;
  }
  html[data-theme="spaceglas-x"] .mobile-nav-item.is-active {
    border-color: rgba(255,255,255,.11);
    background: linear-gradient(180deg, rgba(255,255,255,.105), rgba(255,255,255,.028));
    color: rgb(255, 255, 255);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 6px 16px rgba(0,0,0,.18);
  }
  html[data-theme="spaceglas-x"] .mobile-create-nav {
    border-color: rgba(255,255,255,.32);
    background: linear-gradient(180deg, #f8fafb, #dfe4e6);
    color: #050607;
    box-shadow: 0 9px 22px rgba(0,0,0,.30), inset 0 1px 0 #fff;
  }
  html[data-theme="spaceglas-x"] .messages-shell {
    width: calc(100% - 1rem);
    padding-top: .7rem;
  }
  html[data-theme="spaceglas-x"] .messages-inbox,
  html[data-theme="spaceglas-x"] .messages-chat,
  html[data-theme="spaceglas-x"] .chat-workspace {
    border-radius: 20px 20px 20px 8px;
  }
  html[data-theme="spaceglas-x"] .messages-chat-header,
  html[data-theme="spaceglas-x"] .chat-header {
    top: 72px;
    backdrop-filter: blur(22px) saturate(120%);
    -webkit-backdrop-filter: blur(22px) saturate(120%);
  }
  html[data-theme="spaceglas-x"] .chat-message-bubble {
    backdrop-filter: blur(14px) saturate(115%);
    -webkit-backdrop-filter: blur(14px) saturate(115%);
  }
  html[data-theme="spaceglas-x"] .public-profile-hero {
    padding: 1.45rem;
    border-radius: 22px 22px 9px 22px;
    backdrop-filter: blur(24px) saturate(122%);
    -webkit-backdrop-filter: blur(24px) saturate(122%);
  }
  html[data-theme="spaceglas-x"] .public-profile-title-row h1 {
    font-size: clamp(2rem, 11vw, 2.8rem);
  }
  html[data-theme="spaceglas-x"] .modal-card {
    border-radius: 22px 22px 22px 10px;
    backdrop-filter: blur(28px) saturate(125%);
    -webkit-backdrop-filter: blur(28px) saturate(125%);
  }
}

@media (max-width: 560px) {
  html[data-theme="spaceglas-x"] .app-shell { padding-inline: .55rem; }
  html[data-theme="spaceglas-x"] .feed-post { padding: 1.05rem; }
  html[data-theme="spaceglas-x"] .post-author-row { gap: .7rem; }
  html[data-theme="spaceglas-x"] .post-avatar { width: 42px; height: 42px; flex-basis: 42px; }
  html[data-theme="spaceglas-x"] .post-footer { align-items: flex-start; }
  html[data-theme="spaceglas-x"] .public-profile-hero { padding: 1.2rem; }
  html[data-theme="spaceglas-x"] .modal-card { padding: 1.15rem; }
  html[data-theme="spaceglas-x"] .mobile-bottom-nav { border-radius: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme="spaceglas-x"] .feed-post,
  html[data-theme="spaceglas-x"] .feed-post::before,
  html[data-theme="spaceglas-x"] .person-row,
  html[data-theme="spaceglas-x"] .conversation-row-shell,
  html[data-theme="spaceglas-x"] .btn,
  html[data-theme="spaceglas-x"] .icon-button,
  html[data-theme="spaceglas-x"] .topnav-link {
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
  html[data-theme="spaceglas-x"] .feed-post:hover,
  html[data-theme="spaceglas-x"] .person-row:hover,
  html[data-theme="spaceglas-x"] .conversation-row-shell:hover,
  html[data-theme="spaceglas-x"] .btn:hover,
  html[data-theme="spaceglas-x"] .btn:active {
    transform: none !important;
  }
}

/* =========================================================
   V2.6.62 — Theme Management security/removal UI only.
   Intentionally scoped to the admin page; theme skins are untouched.
   ========================================================= */
.admin-page .admin-theme-badge.is-locked {
  color: var(--warning);
  border-color: color-mix(in srgb, var(--warning) 38%, var(--border));
  background: color-mix(in srgb, var(--warning) 10%, var(--surface));
}
.admin-page .admin-theme-badge.is-unlocked {
  color: var(--text-secondary);
  border-color: var(--border-soft);
  background: color-mix(in srgb, var(--surface-secondary) 92%, transparent);
}
.admin-page .admin-theme-row-actions {
  min-width: 280px;
  align-items: center;
  flex-wrap: wrap;
}
.admin-page .admin-theme-row-actions .btn-danger {
  border-color: color-mix(in srgb, var(--danger) 42%, var(--border));
}
.admin-page .admin-theme-row-actions .btn:disabled {
  opacity: .48;
  cursor: not-allowed;
}
.admin-page .admin-theme-lock-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 1rem;
  border: 1px solid color-mix(in srgb, var(--warning) 36%, var(--border));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--warning) 8%, var(--surface));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.admin-page .admin-theme-lock-notice[hidden] { display: none; }
.admin-page .admin-theme-lock-notice > div { display: grid; gap: .18rem; }
.admin-page .admin-theme-lock-notice small { color: var(--text-secondary); line-height: 1.4; }
.admin-page .admin-theme-lock-notice.is-authorized {
  border-color: color-mix(in srgb, var(--success) 34%, var(--border));
  background: color-mix(in srgb, var(--success) 7%, var(--surface));
}

.admin-page .admin-theme-lock-copy { min-width: 0; }
.admin-page .admin-theme-inline-unlock {
  display: grid;
  grid-template-columns: minmax(180px, 280px) auto auto;
  gap: .55rem;
  align-items: center;
}
.admin-page .admin-theme-inline-unlock .form-control {
  min-width: 0;
  height: 40px;
}
.admin-page .admin-theme-editor-card.is-theme-locked:not(.has-unsaved-changes) {
  border-color: color-mix(in srgb, var(--warning) 24%, var(--border));
}
.admin-page .admin-theme-editor-card.is-theme-locked #admin-theme-form :is(input, select, textarea):disabled {
  opacity: .72;
  cursor: not-allowed;
}
.admin-page .admin-theme-owner-modal-card { max-width: 520px; }
.admin-page .admin-theme-owner-modal-card .form-group small {
  color: var(--text-secondary);
  line-height: 1.45;
}
@media (max-width: 720px) {
  .admin-page .admin-theme-row-actions { min-width: 220px; }
  .admin-page .admin-theme-lock-notice { align-items: stretch; flex-direction: column; }
  .admin-page .admin-theme-lock-notice .btn { width: 100%; }
  .admin-page .admin-theme-inline-unlock { grid-template-columns: 1fr; width: 100%; }
}



/* =========================================================
   V2.6.64 — sticky Theme Editor action bar UX only.
   Scoped to Admin Theme Management; theme skins are untouched.
   ========================================================= */
.admin-page #admin-theme-form {
  scroll-padding-top: 180px;
}
.admin-page .admin-theme-editor-actions {
  order: -1;
  top: calc(92px + .65rem);
  bottom: auto;
  z-index: 120;
  display: grid;
  grid-template-columns: minmax(180px, auto) minmax(0, 1fr);
  align-items: center;
  gap: .65rem .85rem;
  margin: 0;
  padding: .7rem .75rem;
  border-color: color-mix(in srgb, var(--accent) 20%, var(--border));
  box-shadow: 0 18px 46px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.09);
}
.admin-page .admin-theme-editor-actions.is-minimized {
  order: initial;
  position: static;
  z-index: auto;
  border-style: dashed;
  border-color: var(--border-soft);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.admin-page .admin-theme-action-bar-meta,
.admin-page .admin-theme-action-bar-controls {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
}
.admin-page .admin-theme-action-bar-meta {
  justify-content: space-between;
}
.admin-page .admin-theme-action-bar-controls {
  justify-content: flex-end;
  flex-wrap: wrap;
}
.admin-page .admin-theme-action-status {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: .32rem .58rem;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--surface-secondary) 92%, transparent);
  color: var(--text-secondary);
  font-size: .7rem;
  font-weight: 800;
  white-space: nowrap;
}
.admin-page .admin-theme-action-status.has-unsaved-changes {
  border-color: color-mix(in srgb, var(--warning) 42%, var(--border));
  background: color-mix(in srgb, var(--warning) 9%, var(--surface));
  color: var(--warning);
}
.admin-page .admin-theme-action-bar-toggle {
  flex: 0 0 auto;
  min-height: 34px;
  padding: .45rem .7rem;
  font-size: .7rem;
}
.admin-page .admin-theme-editor-actions.is-minimized .admin-theme-action-bar-toggle {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
  color: var(--accent);
}
.admin-page #admin-theme-form :is(.admin-theme-editor-section, input, select, textarea, details) {
  scroll-margin-top: 180px;
}

@media (max-width: 850px) {
  .admin-page #admin-theme-form { scroll-padding-top: 164px; }
  .admin-page .admin-theme-editor-actions {
    top: calc(78px + .45rem);
    grid-template-columns: 1fr;
    gap: .5rem;
  }
  .admin-page .admin-theme-action-bar-meta { width: 100%; }
  .admin-page .admin-theme-action-bar-controls {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: .1rem;
    scrollbar-width: thin;
  }
  .admin-page .admin-theme-action-bar-controls .btn {
    flex: 0 0 auto;
    min-height: 38px;
    padding: .5rem .72rem;
  }
  .admin-page #admin-theme-form :is(.admin-theme-editor-section, input, select, textarea, details) {
    scroll-margin-top: 164px;
  }
}

@media (max-width: 560px) {
  .admin-page #admin-theme-form { scroll-padding-top: 150px; }
  .admin-page .admin-theme-editor-actions {
    top: calc(80px + env(safe-area-inset-top, 0px) + .35rem);
    padding: .55rem;
    border-radius: 14px;
  }
  .admin-page .admin-theme-action-status {
    min-height: 28px;
    padding: .28rem .5rem;
    font-size: .66rem;
  }
  .admin-page .admin-theme-action-bar-toggle {
    min-height: 32px;
    padding: .4rem .6rem;
  }
  .admin-page #admin-theme-form :is(.admin-theme-editor-section, input, select, textarea, details) {
    scroll-margin-top: 150px;
  }
}

/* V2.6.65 — Premium/Tiers & Sponsorblock. New-feature styling only. */
.admin-page .premium-admin-hero,
.admin-page .sponsor-admin-hero {
  overflow: hidden;
  position: relative;
}
.admin-page .premium-admin-hero::after,
.admin-page .sponsor-admin-hero::after {
  content: '';
  position: absolute;
  inset: auto -60px -90px auto;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  filter: blur(10px);
  pointer-events: none;
}
.admin-page .premium-admin-subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: 1rem;
}
.admin-page .premium-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.admin-page .premium-form-grid .form-span-2 { grid-column: 1 / -1; }
.admin-page .premium-inline-select { min-width: 150px; width: auto; }
.admin-page .premium-inline-date { min-width: 150px; }
.admin-page .premium-row-actions { min-width: 330px; }
.admin-page .admin-table-subtext {
  display: block;
  margin-top: .3rem;
  color: var(--text-secondary);
  font-size: .74rem;
  line-height: 1.35;
}
.admin-page .premium-entitlement-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.admin-page .premium-fieldset {
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-secondary) 78%, transparent);
}
.admin-page .premium-fieldset legend {
  padding: 0 .45rem;
  color: var(--text-primary);
  font-weight: 800;
}
.admin-page .premium-entitlement-section {
  display: grid;
  align-content: start;
  gap: .7rem;
}
.admin-page .premium-entitlement-item { margin: 0; }
.admin-page .premium-target-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem;
}
.admin-page .premium-device-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  min-height: 42px;
  align-items: center;
}
.admin-page .premium-device-row label { display: inline-flex; align-items: center; gap: .4rem; }
.admin-page .sponsor-admin-identity {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-width: 180px;
}
.admin-page .sponsor-admin-identity img,
.admin-page .sponsor-admin-logo-placeholder {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  flex: 0 0 auto;
  object-fit: cover;
  border: 1px solid var(--border-soft);
  background: var(--surface-secondary);
}
.admin-page .sponsor-admin-logo-placeholder {
  display: grid;
  place-items: center;
  color: var(--text-secondary);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .08em;
}
.admin-page .sponsor-admin-identity small { display: block; color: var(--text-secondary); margin-top: .15rem; }

.membership-tier-badge {
  --tier-color: var(--accent);
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: .3rem;
  margin-top: .35rem;
  padding: .22rem .48rem;
  border: 1px solid color-mix(in srgb, var(--tier-color) 38%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--tier-color) 10%, var(--surface));
  color: color-mix(in srgb, var(--tier-color) 72%, var(--text-primary));
  font-size: .68rem;
  font-weight: 850;
  line-height: 1.2;
  letter-spacing: .02em;
}
.sponsored-feed-post {
  position: relative;
  isolation: isolate;
}
.sponsored-feed-post::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent);
  opacity: .7;
}
.sponsored-post-disclosure {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: var(--text-secondary);
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .035em;
}
.sponsored-badge {
  display: inline-flex;
  align-items: center;
  padding: .2rem .45rem;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: var(--surface-secondary);
  color: var(--text-secondary);
  font-size: .65rem;
  font-weight: 850;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.sponsored-post-media {
  display: block;
  width: 100%;
  max-height: 520px;
  margin-top: 1rem;
  border-radius: calc(var(--radius-lg) * .8);
  object-fit: cover;
  border: 1px solid var(--border-soft);
  background: var(--surface-secondary);
}
.sponsored-post-cta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  margin-top: 1rem;
  padding-top: .85rem;
  border-top: 1px solid var(--border-soft);
}
.sponsored-post-cta-row small { color: var(--text-secondary); }

@media (max-width: 900px) {
  .admin-page .premium-entitlement-grid { grid-template-columns: 1fr; }
  .admin-page .premium-row-actions { min-width: 250px; }
}
@media (max-width: 700px) {
  .admin-page .premium-form-grid,
  .admin-page .premium-target-grid { grid-template-columns: 1fr; }
  .admin-page .premium-form-grid .form-span-2,
  .admin-page .premium-target-grid .form-span-2 { grid-column: auto; }
  .admin-page .premium-admin-subtabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .25rem; }
  .admin-page .premium-admin-subtabs > * { flex: 0 0 auto; }
  .admin-page .premium-row-actions { min-width: 220px; }
  .sponsored-post-cta-row { align-items: stretch; flex-direction: column; }
  .sponsored-post-cta-row .btn { width: 100%; }
}


/* V2.6.66 — Premium tier content lifetime controls only. */
.admin-page .premium-lifetime-section {
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.admin-page .premium-lifetime-section > legend,
.admin-page .premium-lifetime-intro { grid-column: 1 / -1; }
.admin-page .premium-lifetime-intro {
  margin: 0;
  color: var(--text-secondary);
  font-size: .82rem;
  line-height: 1.5;
}
.admin-page .premium-duration-control {
  padding: .85rem;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-primary) 72%, transparent);
}
.admin-page .premium-duration-unlimited { margin: .35rem 0 .65rem; }
.admin-page .premium-duration-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(130px, .8fr);
  gap: .7rem;
  align-items: end;
}
.admin-page .premium-duration-row label {
  display: grid;
  gap: .35rem;
  color: var(--text-secondary);
  font-size: .76rem;
  font-weight: 700;
}
.admin-page .premium-duration-summary {
  display: block;
  margin-top: .55rem;
  color: var(--text-primary);
  font-weight: 800;
}
.admin-page .premium-lifetime-summary { color: var(--text-secondary); }
@media (max-width: 760px) {
  .admin-page .premium-lifetime-section { grid-template-columns: 1fr; }
  .admin-page .premium-lifetime-section > legend,
  .admin-page .premium-lifetime-intro { grid-column: auto; }
}
@media (max-width: 480px) {
  .admin-page .premium-duration-row { grid-template-columns: 1fr; }
}


.admin-page .premium-tier-badge-visibility {
  align-self: end;
  min-height: 44px;
}

/* V2.6.68 – Identity Verification + Profile Interest Tags (component-only additions) */
.profile-interest-picker { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.profile-interest-chip { --interest-color:var(--accent); appearance:none; border:1px solid color-mix(in srgb,var(--interest-color) 32%,var(--border)); background:color-mix(in srgb,var(--interest-color) 7%,var(--surface)); color:var(--text-secondary); border-radius:999px; padding:.48rem .72rem; font:inherit; font-size:.78rem; font-weight:750; line-height:1; cursor:pointer; transition:transform .16s ease,border-color .16s ease,background .16s ease,color .16s ease; }
.profile-interest-chip:hover { border-color:color-mix(in srgb,var(--interest-color) 68%,var(--border)); color:var(--text-primary); transform:translateY(-1px); }
.profile-interest-chip.is-selected { background:color-mix(in srgb,var(--interest-color) 20%,var(--surface)); border-color:color-mix(in srgb,var(--interest-color) 74%,var(--border)); color:var(--text-primary); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--interest-color) 14%,transparent); }
.profile-interest-chip.is-static { cursor:default; transform:none; }
.public-profile-interests { padding:1.4rem; }
.public-profile-interests h2 { margin:.25rem 0 .85rem; }
.identity-verified-badge { display:inline-flex; align-items:center; gap:.3rem; width:max-content; border:1px solid color-mix(in srgb,var(--accent) 45%,var(--border)); background:color-mix(in srgb,var(--accent) 10%,var(--surface)); color:var(--text-primary); border-radius:999px; padding:.28rem .55rem; font-size:.7rem; font-weight:800; letter-spacing:.01em; white-space:nowrap; }
.verification-status-badge { display:inline-flex; width:max-content; border:1px solid var(--border); border-radius:999px; padding:.34rem .58rem; font-size:.72rem; font-weight:800; background:var(--surface-secondary); color:var(--text-secondary); }
.verification-status-badge[data-status="approved"] { border-color:color-mix(in srgb,#22c55e 55%,var(--border)); color:#22c55e; }
.verification-status-badge[data-status="pending"] { border-color:color-mix(in srgb,#eab308 55%,var(--border)); color:#ca8a04; }
.verification-status-badge[data-status="rejected"] { border-color:color-mix(in srgb,#ef4444 55%,var(--border)); color:#ef4444; }
.verification-status-badge[data-status="needs_info"] { border-color:color-mix(in srgb,var(--accent) 55%,var(--border)); color:var(--accent); }
.identity-verification-user { display:grid; gap:1rem; }
.identity-instructions { white-space:pre-wrap; padding:.85rem 1rem; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface-secondary); color:var(--text-secondary); line-height:1.6; }
.identity-requirements { display:grid; gap:.55rem; }
.identity-requirement-row { display:grid; gap:.2rem; padding:.7rem .85rem; border-left:3px solid var(--accent); background:var(--surface-secondary); border-radius:0 var(--radius-sm) var(--radius-sm) 0; }
.identity-requirement-row small { color:var(--text-muted); }
.identity-verification-form { display:grid; gap:.8rem; }
.identity-filetype-options { display:flex; flex-wrap:wrap; gap:.8rem; padding:.7rem; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface-secondary); }
.identity-filetype-options label { display:flex; gap:.4rem; align-items:center; font-weight:700; }
.admin-profile-interest-card { margin-top:1rem; }
.profile-interest-preview-card { margin:1rem 0; padding:1rem; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface-secondary); }
.profile-interest-preview-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.7rem; margin-top:.7rem; }
.profile-interest-preview-context { min-width:0; display:grid; gap:.55rem; align-content:start; padding:.75rem; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); }
.profile-interest-preview-context small { color:var(--text-muted); font-weight:700; }
.admin-report-subtabs { margin-bottom:1rem; }
.identity-request-card { display:grid; gap:.8rem; }
.identity-admin-submitted-fields { display:grid; gap:.25rem; padding:.7rem; border-radius:var(--radius-sm); background:var(--surface-secondary); }
.identity-admin-submitted-fields p { margin:0; overflow-wrap:anywhere; }
@media (max-width:760px) {
  .profile-interest-preview-grid { grid-template-columns:1fr 1fr; }
  .identity-verification-user .section-title-row { align-items:flex-start; gap:.7rem; }
}
@media (max-width:480px) {
  .profile-interest-preview-grid { grid-template-columns:1fr; }
  .profile-interest-chip { padding:.46rem .62rem; }
}


/* V2.6.69 – compact profile actions + scoped Interest Tag customization. */
.profile-secondary-actions { display:inline-flex; align-items:center; gap:.38rem; flex:0 0 auto; }
.profile-compact-action { min-height:32px; height:32px; padding:.34rem .64rem; border-radius:10px; font-size:.76rem; line-height:1; }
.profile-options-button.profile-compact-action { width:32px; min-width:32px; padding:0; display:inline-grid; place-items:center; font-size:1.22rem; font-weight:800; letter-spacing:0; }
.profile-secondary-actions .profile-options-menu { left:auto; right:0; }
.admin-page #profile-interest-tag-html,
.admin-page #profile-interest-tag-css { font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace; font-size:.76rem; line-height:1.45; resize:vertical; }
@media (max-width:850px) {
  .profile-secondary-actions { gap:.3rem; }
  .profile-compact-action { min-height:34px; height:34px; }
  .profile-options-button.profile-compact-action { width:34px; min-width:34px; }
}


/* =========================================================
   V2.6.72 — focused UI/UX & mobile fixes only.
   ========================================================= */

/* Notification bell uses the existing currentColor icon language. */
.notification-bell-icon { width: 19px; height: 19px; display: block; }
.notification-button:hover .notification-bell-icon { transform: translateY(-1px); }
.notification-button:focus-visible .notification-bell-icon { transform: none; }

/* Inbox/message selection: compact destructive control without toolbar overflow. */
.selection-trash-button {
  flex: 0 0 auto !important;
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  border-color: color-mix(in srgb, var(--danger) 42%, var(--border));
  background: color-mix(in srgb, var(--danger) 10%, var(--surface));
  color: var(--danger);
}
.selection-trash-button:hover:not(:disabled) { background: color-mix(in srgb, var(--danger) 18%, var(--surface-secondary)); border-color: color-mix(in srgb, var(--danger) 65%, var(--border)); }
.selection-trash-button .lucide-icon { width: 17px; height: 17px; }
.message-selection-toolbar,
.message-item-selection-toolbar { min-width: 0; overflow: visible; }
.message-selection-toolbar { flex-wrap: nowrap; }
.message-selection-toolbar .message-selection-count { min-width: 0; margin-right: auto; white-space: nowrap; }
.message-item-selection-toolbar > div { min-width: 0; align-items: center; }

/* Profile hierarchy: keep existing content, compose it deliberately. */
.public-profile-hero { align-items: start; }
.public-profile-identity { min-width: 0; display: grid; align-content: center; gap: .32rem; padding-top: .12rem; }
.public-profile-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem .55rem; min-width: 0; }
.public-profile-title-row h1 { overflow-wrap: anywhere; }
.public-profile-identity > p { max-width: 64ch; overflow-wrap: anywhere; }
.public-profile-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .55rem; margin-top: .45rem; }
.public-profile-actions > .btn { flex: 0 0 auto; }
.public-profile-actions .profile-secondary-actions { margin-left: auto; }
.public-profile-metrics { align-self: center; }
.public-profile-grid > * { min-width: 0; }
.public-profile-details p,
.public-profile-facts dd { overflow-wrap: anywhere; }

/* Album is a theme-aware modal gallery instead of squeezing the profile hero. */
body.profile-album-open { overflow: hidden; }
.public-profile-hero.is-album-open { padding-right: clamp(1.25rem, 4vw, 2rem); }
.public-profile-hero.is-album-open .public-profile-views { opacity: 1; transform: none; pointer-events: auto; }
.profile-album-backdrop {
  position: fixed;
  inset: 0;
  z-index: 980;
  display: grid;
  place-items: center;
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  background: var(--modal-backdrop);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  opacity: 0;
  transition: opacity 180ms ease;
}
.profile-album-backdrop[hidden] { display: none !important; }
.profile-album-backdrop.is-visible { opacity: 1; }
html .profile-album-backdrop .profile-album-panel {
  position: relative;
  inset: auto;
  z-index: 1;
  width: min(980px, 100%);
  min-width: 0;
  max-height: min(88dvh, 820px);
  display: grid;
  grid-template-rows: auto minmax(280px, 1fr) auto auto;
  gap: .85rem;
  padding: 1rem;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-modal);
  transform: translateY(14px) scale(.985);
  opacity: 0;
  visibility: visible;
  pointer-events: auto;
  transition: transform 180ms ease, opacity 180ms ease;
}
.profile-album-backdrop.is-visible .profile-album-panel { transform: translateY(0) scale(1); opacity: 1; }
.profile-album-stage { min-height: 280px; max-height: 58dvh; }
.profile-album-media { min-height: 280px; }
.profile-album-media img { max-height: 58dvh; object-fit: contain; }
.profile-album-thumbnails {
  min-width: 0;
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  padding: .15rem .1rem .35rem;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
}
.profile-album-thumbnail {
  flex: 0 0 68px;
  width: 68px;
  height: 54px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: var(--surface-secondary);
  color: var(--text-muted);
  cursor: pointer;
  scroll-snap-align: start;
}
.profile-album-thumbnail img { width: 100%; height: 100%; display: block; object-fit: cover; }
.profile-album-thumbnail span { width: 100%; height: 100%; display: grid; place-items: center; }
.profile-album-thumbnail.is-active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.profile-album-thumbnail:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Mobile messages: conversation list first, then a full-width chat with explicit Back. */
.messages-mobile-back {
  display: none;
  align-items: center;
  gap: .28rem;
  min-height: 36px;
  padding: .42rem .55rem;
  border: 1px solid var(--border-soft);
  border-radius: 11px;
  background: var(--surface-secondary);
  color: var(--text-primary);
  font: inherit;
  font-size: .76rem;
  font-weight: 800;
  cursor: pointer;
}

/* Dating cards: contain all text/media and animate only when content changes. */
.dating-profile-grid,
.dating-profile-card,
.dating-profile-media,
.dating-profile-card-body,
.dating-profile-facts,
.dating-profile-facts > div,
.dating-profile-actions { min-width: 0; max-width: 100%; box-sizing: border-box; }
.dating-profile-card { width: 100%; isolation: isolate; animation: datingCardEnter 280ms cubic-bezier(.2,.78,.25,1) both; animation-delay: calc(var(--dating-enter-index, 0) * 28ms); }
.dating-profile-image { max-width: 100%; }
.dating-profile-name { max-width: 100%; white-space: normal; text-overflow: clip; overflow-wrap: anywhere; word-break: break-word; line-height: 1.22; }
.dating-profile-facts dd { max-width: 100%; white-space: normal; text-overflow: clip; overflow-wrap: anywhere; word-break: break-word; }
.dating-profile-actions .btn { width: 100%; max-width: 100%; box-sizing: border-box; }
@keyframes datingCardEnter {
  from { opacity: 0; transform: translate3d(0, 10px, 0) scale(.985); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

/* Chrome dynamic-viewport fix for the Create Ad modal: keep the scroll root inside
   the fixed backdrop and size against the visible dynamic viewport, not legacy vh. */
#post-modal.modal-backdrop {
  height: 100dvh;
  min-height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  align-items: center;
}
#post-modal .modal-card { max-height: min(calc(100dvh - 2rem), 850px); margin-block: auto; }

/* Full logo text: remove the old 135px ellipsis while retaining responsive sizing. */
@media (max-width: 850px) {
  .app-brand { min-width: 0; white-space: nowrap; }
  .app-brand span:last-child { max-width: none; overflow: visible; text-overflow: clip; white-space: nowrap; }
  html[data-theme="classic"] .app-brand { font-size: 1.06rem; }
}

/* Landing mobile header: brand and auth buttons participate in one layout instead of overlapping. */
@media (max-width: 560px) {
  .landing-header-layout {
    grid-template-columns: minmax(0, 1fr) auto;
    padding-inline: .7rem;
    gap: .55rem;
  }
  .landing-header-layout > .landing-header-placeholder { display: none !important; }
  .landing-brand {
    min-width: 0;
    max-width: 100%;
    font-size: clamp(.84rem, 3.5vw, 1rem) !important;
    letter-spacing: -.035em;
    white-space: nowrap;
  }
  .landing-auth-actions {
    position: static;
    z-index: auto;
    transform: none;
    justify-self: end;
    min-width: 0;
  }
  .landing-auth-actions .btn { flex: 0 0 auto; }
  .features { gap: 1.65rem; padding-inline: 1rem; }
  .features > .card { padding: 1.55rem; }
  #post-modal.modal-backdrop { padding: .45rem; align-items: end; }
  #post-modal .modal-card { max-height: calc(100dvh - .9rem); margin-top: auto; margin-bottom: 0; }
}
@media (max-width: 390px) {
  .landing-header-layout { padding-inline: .55rem; gap: .4rem; }
  .landing-brand { font-size: .82rem !important; gap: .34rem; }
  .landing-brand .brand-heart { font-size: .9rem; }
  .landing-auth-actions { gap: .25rem; }
  .landing-auth-actions .btn { min-height: 34px; padding: .38rem .42rem; font-size: .69rem; }
  .app-brand { font-size: .9rem; gap: .4rem; }
  html[data-theme="classic"] .app-brand { font-size: .98rem; }
}

@media (max-width: 850px) {
  .profile-album-backdrop { padding: max(.55rem, env(safe-area-inset-top)) .55rem calc(.55rem + env(safe-area-inset-bottom)); }
  html .profile-album-backdrop .profile-album-panel {
    width: 100%;
    max-height: calc(100dvh - 1.1rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    grid-template-rows: auto minmax(220px, 1fr) auto auto;
    border-radius: 20px;
  }
  .profile-album-stage { min-height: 220px; max-height: 55dvh; }
  .profile-album-media { min-height: 220px; }
  .profile-album-media img { max-height: 55dvh; }

  .messages-shell { min-height: calc(100dvh - 150px); }
  .messages-shell:not(.is-mobile-chat-open) .messages-chat { display: none; }
  .messages-shell.is-mobile-chat-open .messages-inbox { display: none; }
  .messages-shell.is-mobile-chat-open .messages-chat { display: grid; width: 100%; min-height: calc(100dvh - 154px); }
  .messages-shell.is-mobile-chat-open .messages-chat-active { min-height: calc(100dvh - 154px); }
  .messages-conversation-list { max-height: none; overflow: visible; padding-right: 0; }
  .messages-mobile-back { display: inline-flex; }
  .messages-chat-header { grid-template-columns: auto minmax(0, 1fr) auto; gap: .5rem; }
  .messages-chat-header .chat-person-button { min-width: 0; }
  .messages-thread { max-height: none; min-height: 0; }
  .message-selection-toolbar,
  .message-item-selection-toolbar { flex-direction: row; align-items: center; flex-wrap: nowrap; gap: .45rem; }
  .message-selection-toolbar .message-selection-count { flex: 1 1 auto; margin-right: 0; }
  .message-item-selection-toolbar > div { width: auto; margin-left: auto; flex: 0 0 auto; }
  .message-item-selection-toolbar .btn { flex: 0 0 auto; width: auto; min-width: 0; }
  .selection-trash-button { width: 42px !important; min-width: 42px !important; height: 42px !important; min-height: 42px !important; }

  .public-profile-actions .profile-secondary-actions { margin-left: 0; }
  .public-profile-metrics { width: 100%; }
}

@media (max-width: 430px) {
  .dating-profile-card-body { padding: .82rem; gap: .65rem; }
  .dating-profile-facts > div { align-items: flex-start; }
  .dating-profile-facts dd { text-align: left; }
  .public-profile-actions { justify-content: center; }
  .public-profile-actions > .btn { min-width: 0; }
  .profile-secondary-actions { width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .dating-profile-card { animation: none !important; }
  .notification-button .notification-bell-icon,
  .profile-album-backdrop,
  .profile-album-panel { transition: none !important; }
}

/* V2.6.73 – AI Personality Profiles (Admin-scoped; no theme redesign) */
#admin-panel-ai-agent .ai-personality-mode-tabs,
#admin-panel-ai-agent .ai-personality-tabs {
  display: flex;
  gap: .45rem;
  overflow-x: auto;
  scrollbar-width: thin;
  padding: .2rem 0 .75rem;
}
#admin-panel-ai-agent .ai-personality-mode,
#admin-panel-ai-agent .ai-personality-tab {
  border: 1px solid var(--border-color, rgba(128,128,128,.28));
  background: var(--surface-muted, rgba(127,127,127,.08));
  color: inherit;
  border-radius: .7rem;
  padding: .55rem .78rem;
  white-space: nowrap;
  cursor: pointer;
}
#admin-panel-ai-agent .ai-personality-mode.is-active,
#admin-panel-ai-agent .ai-personality-tab.is-active {
  border-color: var(--primary-color, #7c3aed);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary-color, #7c3aed) 55%, transparent);
  background: color-mix(in srgb, var(--primary-color, #7c3aed) 12%, transparent);
}
#admin-panel-ai-agent .ai-personality-workspace {
  display: grid;
  grid-template-columns: minmax(220px, 290px) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}
#admin-panel-ai-agent .ai-personality-sidebar {
  position: sticky;
  top: calc(var(--admin-sticky-offset, 78px) + .6rem);
  max-height: calc(100dvh - 100px);
  overflow: auto;
}
#admin-panel-ai-agent .ai-personality-list { display: grid; gap: .55rem; margin-top: .7rem; }
#admin-panel-ai-agent .ai-personality-list-item {
  width: 100%; text-align: left; display: grid; gap: .25rem; padding: .7rem; border-radius: .75rem;
  border: 1px solid var(--border-color, rgba(128,128,128,.24)); background: transparent; color: inherit; cursor: pointer;
}
#admin-panel-ai-agent .ai-personality-list-item:hover,
#admin-panel-ai-agent .ai-personality-list-item.is-active { background: color-mix(in srgb, var(--primary-color, #7c3aed) 9%, transparent); border-color: color-mix(in srgb, var(--primary-color, #7c3aed) 45%, transparent); }
#admin-panel-ai-agent .ai-personality-list-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
#admin-panel-ai-agent .ai-personality-list-item small { opacity: .72; overflow-wrap: anywhere; }
#admin-panel-ai-agent .ai-personality-editor { min-width: 0; }
#admin-panel-ai-agent .ai-personality-editor-heading { align-items: flex-start; gap: 1rem; }
#admin-panel-ai-agent .ai-personality-status-row { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-end; }
#admin-panel-ai-agent .ai-personality-pane { padding-top: .35rem; }
#admin-panel-ai-agent .ai-personality-pane[hidden] { display: none !important; }
#admin-panel-ai-agent .ai-personality-trait-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .7rem; }
#admin-panel-ai-agent .ai-personality-trait { display: grid; gap: .35rem; padding: .7rem; border: 1px solid var(--border-color, rgba(128,128,128,.22)); border-radius: .75rem; }
#admin-panel-ai-agent .ai-personality-trait-label { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; }
#admin-panel-ai-agent .ai-personality-trait input[type="range"] { width: 100%; }
#admin-panel-ai-agent .ai-personality-toggle-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .45rem .8rem; border: 1px solid var(--border-color, rgba(128,128,128,.22)); border-radius: .8rem; padding: .8rem; }
#admin-panel-ai-agent .ai-personality-toggle-grid label { display: flex; gap: .4rem; align-items: center; min-width: 0; }
#admin-panel-ai-agent .ai-personality-preferences-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .75rem; }
#admin-panel-ai-agent .ai-personality-pref-card { display: grid; gap: .4rem; padding: .8rem; border: 1px solid var(--border-color, rgba(128,128,128,.22)); border-radius: .8rem; }
#admin-panel-ai-agent .ai-personality-pref-card h4 { margin: 0 0 .2rem; }
#admin-panel-ai-agent .ai-personality-favorites { margin-top: .8rem; }
#admin-panel-ai-agent .ai-personality-divider { border: 0; border-top: 1px solid var(--border-color, rgba(128,128,128,.22)); margin: 1rem 0; }
#admin-panel-ai-agent .ai-personality-repeat-list { display: grid; gap: .6rem; }
#admin-panel-ai-agent .ai-personality-repeat-row { display: grid; grid-template-columns: minmax(150px,.7fr) minmax(220px,1.3fr) auto; gap: .55rem; align-items: center; }
#admin-panel-ai-agent .ai-personality-example-row { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: .55rem; align-items: start; padding: .65rem; border: 1px solid var(--border-color, rgba(128,128,128,.22)); border-radius: .75rem; }
#admin-panel-ai-agent .ai-profile-import-search,
#admin-panel-ai-agent .ai-personality-test-compose { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .55rem; }
#admin-panel-ai-agent .ai-personality-profile-results { display: flex; flex-wrap: wrap; gap: .45rem; margin: .7rem 0; }
#admin-panel-ai-agent .ai-profile-import-result { border: 1px solid var(--border-color, rgba(128,128,128,.25)); background: transparent; color: inherit; border-radius: 999px; padding: .45rem .7rem; cursor: pointer; }
#admin-panel-ai-agent .ai-personality-import-preview { display: grid; gap: .45rem; padding: .8rem; border: 1px solid var(--border-color, rgba(128,128,128,.24)); border-radius: .8rem; margin: .7rem 0; }
#admin-panel-ai-agent .ai-personality-import-field { display: grid; grid-template-columns: auto 1fr; gap: .55rem; align-items: start; }
#admin-panel-ai-agent .ai-personality-import-field span { display: grid; gap: .1rem; }
#admin-panel-ai-agent .ai-personality-import-field small { white-space: pre-wrap; overflow-wrap: anywhere; opacity: .75; }
#admin-panel-ai-agent .ai-personality-prompt-preview { max-height: 52vh; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; padding: .9rem; border: 1px solid var(--border-color, rgba(128,128,128,.22)); border-radius: .8rem; background: rgba(0,0,0,.12); }
#admin-panel-ai-agent .ai-personality-test-chat { min-height: 180px; max-height: 380px; overflow: auto; display: grid; align-content: start; gap: .55rem; padding: .75rem; border: 1px solid var(--border-color, rgba(128,128,128,.22)); border-radius: .8rem; margin-bottom: .65rem; }
#admin-panel-ai-agent .ai-personality-test-message { max-width: 82%; padding: .6rem .75rem; border-radius: .8rem; background: color-mix(in srgb, var(--primary-color, #7c3aed) 10%, transparent); }
#admin-panel-ai-agent .ai-personality-test-message.is-assistant { justify-self: start; }
#admin-panel-ai-agent .ai-personality-test-message.is-user { justify-self: end; background: color-mix(in srgb, var(--primary-color, #7c3aed) 20%, transparent); }
#admin-panel-ai-agent .ai-personality-test-message p { margin: .2rem 0 0; white-space: pre-wrap; }
#admin-panel-ai-agent .ai-personality-actionbar { position: sticky; bottom: max(.5rem, env(safe-area-inset-bottom)); z-index: 8; display: flex; justify-content: space-between; gap: .75rem; align-items: center; margin-top: 1rem; padding: .75rem; border: 1px solid var(--border-color, rgba(128,128,128,.28)); border-radius: .9rem; background: color-mix(in srgb, var(--card-bg, #171717) 92%, transparent); backdrop-filter: blur(12px); box-shadow: 0 10px 35px rgba(0,0,0,.18); }
#admin-panel-ai-agent .ai-personality-actionbar > div:first-child { display: grid; gap: .1rem; }
#admin-panel-ai-agent .ai-personality-actionbar small { opacity: .7; }
#admin-panel-ai-agent .ai-personality-import-actions { margin-top: .25rem; }
#admin-panel-ai-agent .theme-status-badge.is-warning { border-color: #d69e2e; color: #f6c453; }
#admin-panel-ai-agent .theme-status-badge.is-success { border-color: #3aa76d; }
@media (max-width: 1050px) {
  #admin-panel-ai-agent .ai-personality-workspace { grid-template-columns: 1fr; }
  #admin-panel-ai-agent .ai-personality-sidebar { position: static; max-height: none; }
  #admin-panel-ai-agent .ai-personality-trait-grid, #admin-panel-ai-agent .ai-personality-preferences-grid { grid-template-columns: 1fr; }
  #admin-panel-ai-agent .ai-personality-toggle-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 650px) {
  #admin-panel-ai-agent .ai-personality-toggle-grid { grid-template-columns: 1fr; }
  #admin-panel-ai-agent .ai-personality-repeat-row, #admin-panel-ai-agent .ai-personality-example-row { grid-template-columns: 1fr; }
  #admin-panel-ai-agent .ai-personality-actionbar { align-items: stretch; flex-direction: column; }
  #admin-panel-ai-agent .ai-personality-actionbar .admin-report-actions { display: flex; overflow-x: auto; flex-wrap: nowrap; padding-bottom: .15rem; }
  #admin-panel-ai-agent .ai-personality-actionbar .btn { flex: 0 0 auto; }
  #admin-panel-ai-agent .ai-personality-editor-heading { flex-direction: column; }
  #admin-panel-ai-agent .ai-personality-status-row { justify-content: flex-start; }
}

/* V2.6.74 – AI Personality Assignment & Profile Import */
#admin-panel-ai-agent .ai-personality-assignment-summary {
  padding: .75rem;
  border: 1px solid var(--border-color, rgba(128,128,128,.22));
  border-radius: .8rem;
  background: color-mix(in srgb, var(--card-bg, #171717) 94%, transparent);
}
#admin-panel-ai-agent .ai-personality-assigned-agents {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: .45rem 0 .2rem;
  min-width: 0;
}
#admin-panel-ai-agent .ai-personality-assigned-agents:empty::before {
  content: 'Inte tilldelad till någon AI-agent.';
  opacity: .72;
}

/* V2.6.75 – AI Personality editor UX only. */
#admin-panel-ai-agent .ai-personality-actionbar-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .1rem .65rem;
}
#admin-panel-ai-agent .ai-personality-actionbar-meta > small { grid-column: 1 / 2; }
#admin-panel-ai-agent .ai-personality-actionbar-toggle {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
}
#admin-panel-ai-agent .ai-personality-actionbar.is-minimized {
  position: static;
  z-index: auto;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  border-style: dashed;
}
#admin-panel-ai-agent .ai-personality-actionbar.is-minimized .ai-personality-actionbar-toggle {
  color: var(--primary-color, #7c3aed);
  border-color: color-mix(in srgb, var(--primary-color, #7c3aed) 40%, var(--border-color, rgba(128,128,128,.28)));
}
#admin-panel-ai-agent .ai-personality-json-import-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-color, rgba(128,128,128,.22));
}
#admin-panel-ai-agent .ai-personality-json-import-footer h3 { margin: .15rem 0 .25rem; }
#admin-panel-ai-agent .ai-personality-json-import-footer .admin-panel-description { margin: 0; }
@media (max-width: 650px) {
  #admin-panel-ai-agent .ai-personality-actionbar-meta { grid-template-columns: minmax(0, 1fr) auto; }
  #admin-panel-ai-agent .ai-personality-json-import-footer { align-items: stretch; flex-direction: column; }
  #admin-panel-ai-agent .ai-personality-json-import-footer .btn { width: 100%; }
}


/* V2.6.76 – Unified AI Behavior & Personality System (Admin only) */
#admin-panel-ai-agent .ai-personality-workspace {
  display: block;
  width: 100%;
}
#admin-panel-ai-agent .ai-personality-editor {
  width: 100%;
  max-width: none;
}
#admin-panel-ai-agent .ai-personality-management-footer {
  position: static;
  inset: auto;
  width: 100%;
  max-height: none;
  overflow: visible;
  margin-top: 1rem;
}
#admin-panel-ai-agent .ai-personality-management-footer .ai-personality-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .65rem;
  margin-top: .7rem;
}
#admin-panel-ai-agent .ai-personality-management-footer .ai-personality-search-bottom {
  width: 100%;
  margin-top: .65rem;
}
#admin-panel-ai-agent .ai-personality-management-footer .ai-personality-list-item {
  height: 100%;
}
#admin-panel-ai-agent .ai-unified-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .7rem;
  margin-bottom: 1rem;
}
#admin-panel-ai-agent .ai-unified-overview-grid > article {
  display: grid;
  gap: .22rem;
  min-width: 0;
  padding: .8rem;
  border: 1px solid var(--border-color, rgba(128,128,128,.22));
  border-radius: .8rem;
  background: color-mix(in srgb, var(--card-bg, #171717) 96%, transparent);
}
#admin-panel-ai-agent .ai-unified-overview-grid strong,
#admin-panel-ai-agent .ai-unified-overview-grid small {
  min-width: 0;
  overflow-wrap: anywhere;
}
#admin-panel-ai-agent .ai-personality-automation-probabilities {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .65rem;
}
#admin-panel-ai-agent .ai-personality-schedule-list {
  display: grid;
  gap: .55rem;
  margin-top: .8rem;
}
#admin-panel-ai-agent .ai-unified-schedule-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .7rem .8rem;
  border: 1px solid var(--border-color, rgba(128,128,128,.22));
  border-radius: .75rem;
}
#admin-panel-ai-agent .ai-personality-json-import-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding: .9rem;
  border: 1px solid var(--border-color, rgba(128,128,128,.22));
  border-radius: .85rem;
  background: color-mix(in srgb, var(--card-bg, #171717) 96%, transparent);
}
#admin-panel-ai-agent .ai-personality-actionbar.is-minimized {
  position: static;
  bottom: auto;
  z-index: auto;
  backdrop-filter: none;
  box-shadow: none;
}
@media (max-width: 900px) {
  #admin-panel-ai-agent .ai-unified-overview-grid,
  #admin-panel-ai-agent .ai-personality-automation-probabilities {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #admin-panel-ai-agent .ai-personality-management-footer .ai-personality-list {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  }
}
@media (max-width: 650px) {
  #admin-panel-ai-agent .ai-unified-overview-grid,
  #admin-panel-ai-agent .ai-personality-automation-probabilities,
  #admin-panel-ai-agent .ai-personality-management-footer .ai-personality-list {
    grid-template-columns: 1fr;
  }
  #admin-panel-ai-agent .ai-personality-json-import-footer,
  #admin-panel-ai-agent .ai-unified-schedule-row {
    align-items: stretch;
    flex-direction: column;
  }
}

/* V2.6.77 – AI Self / Current User / User Memory context + editor width fix */
#admin-panel-ai-agent,
#admin-panel-ai-agent [data-ai-behavior-panel="personality"],
#admin-panel-ai-agent .ai-personality-workspace,
#admin-panel-ai-agent .ai-personality-editor,
#admin-panel-ai-agent .ai-personality-form,
#admin-panel-ai-agent .ai-personality-pane,
#admin-panel-ai-agent .ai-personality-json-import-footer,
#admin-panel-ai-agent .ai-personality-management-footer,
#admin-panel-ai-agent .ai-personality-actionbar,
#admin-panel-ai-agent .ai-admin-form,
#admin-panel-ai-agent .form-group,
#admin-panel-ai-agent .admin-report-actions,
#admin-panel-ai-agent .admin-card-heading {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}
#admin-panel-ai-agent .ai-personality-editor,
#admin-panel-ai-agent .ai-personality-form,
#admin-panel-ai-agent .ai-personality-pane,
#admin-panel-ai-agent .ai-personality-json-import-footer,
#admin-panel-ai-agent .ai-personality-management-footer {
  width: 100%;
}
#admin-panel-ai-agent .ai-personality-tabs,
#admin-panel-ai-agent .ai-personality-mode-tabs {
  flex-wrap: wrap;
  overflow-x: visible;
  min-width: 0;
  max-width: 100%;
}
#admin-panel-ai-agent .ai-personality-tab,
#admin-panel-ai-agent .ai-personality-mode {
  max-width: 100%;
  overflow-wrap: anywhere;
}
#admin-panel-ai-agent .ai-personality-pane *,
#admin-panel-ai-agent .ai-personality-management-footer *,
#admin-panel-ai-agent .ai-personality-json-import-footer * {
  box-sizing: border-box;
}
#admin-panel-ai-agent .form-control,
#admin-panel-ai-agent input,
#admin-panel-ai-agent select,
#admin-panel-ai-agent textarea,
#admin-panel-ai-agent pre {
  min-width: 0;
  max-width: 100%;
}
#admin-panel-ai-agent textarea,
#admin-panel-ai-agent pre,
#admin-panel-ai-agent label,
#admin-panel-ai-agent small,
#admin-panel-ai-agent p,
#admin-panel-ai-agent strong {
  overflow-wrap: anywhere;
}
#admin-panel-ai-agent .ai-personality-actionbar {
  flex-wrap: wrap;
}
#admin-panel-ai-agent .ai-personality-actionbar .admin-report-actions {
  min-width: 0;
  flex-wrap: wrap;
}
#admin-panel-ai-agent .ai-personality-management-footer .ai-personality-list {
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  min-width: 0;
}
#admin-panel-ai-agent .ai-context-panel {
  display: grid;
  gap: .7rem;
  min-width: 0;
  border: 1px solid var(--border-color, rgba(128,128,128,.22));
  border-radius: .85rem;
  padding: .85rem;
}
#admin-panel-ai-agent .ai-context-master-toggle {
  display: flex;
  align-items: center;
  gap: .5rem;
}
#admin-panel-ai-agent .ai-current-user-fields.is-disabled {
  opacity: .55;
}
#admin-panel-ai-agent .ai-context-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .7rem;
  margin: .8rem 0 1rem;
  min-width: 0;
}
#admin-panel-ai-agent .ai-context-preview-grid > article {
  min-width: 0;
  padding: .75rem;
  border: 1px solid var(--border-color, rgba(128,128,128,.22));
  border-radius: .8rem;
  background: color-mix(in srgb, var(--card-bg, #171717) 96%, transparent);
}
#admin-panel-ai-agent .ai-context-preview-grid h4 { margin: 0 0 .45rem; }
#admin-panel-ai-agent .ai-context-preview-grid pre {
  margin: 0;
  max-height: 320px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: .82rem;
}
#admin-panel-ai-agent .ai-context-test-controls { align-items: end; }
@media (max-width: 1024px) {
  #admin-panel-ai-agent .ai-context-preview-grid { grid-template-columns: 1fr; }
  #admin-panel-ai-agent .ai-personality-toggle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 650px) {
  #admin-panel-ai-agent .ai-personality-tabs,
  #admin-panel-ai-agent .ai-personality-mode-tabs { gap: .35rem; }
  #admin-panel-ai-agent .ai-personality-tab,
  #admin-panel-ai-agent .ai-personality-mode { white-space: normal; flex: 1 1 auto; }
  #admin-panel-ai-agent .ai-personality-toggle-grid,
  #admin-panel-ai-agent .ai-context-preview-grid { grid-template-columns: 1fr; }
  #admin-panel-ai-agent .ai-personality-actionbar .admin-report-actions { width: 100%; }
  #admin-panel-ai-agent .ai-personality-actionbar .btn { max-width: 100%; }
}


/* V2.6.78 – unified Beteendeprofil help + sticky actionbar polish only. */
#admin-panel-ai-agent .ai-personality-actionbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}
#admin-panel-ai-agent .ai-personality-actionbar-meta {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: start;
  gap: .15rem .75rem;
}
#admin-panel-ai-agent .ai-personality-actionbar-meta > strong {
  grid-column: 1;
  grid-row: 1;
}
#admin-panel-ai-agent .ai-personality-actionbar-meta > small {
  grid-column: 1;
  grid-row: 2;
}
#admin-panel-ai-agent .ai-personality-actionbar-toggle {
  grid-column: 2;
  grid-row: 1 / span 2;
  justify-self: end;
  align-self: start;
  white-space: nowrap;
}
#admin-panel-ai-agent .ai-personality-actionbar > .admin-report-actions {
  width: 100%;
  min-width: 0;
  justify-content: flex-start;
}
#admin-panel-ai-agent .ai-personality-help-target {
  max-width: 100%;
}
/* V2.6.87 – contextual help must never replace native heading/table layout. */
#admin-panel-ai-agent .ai-personality-help-target > .ai-field-help {
  margin-inline-start: .32rem;
  vertical-align: middle;
}
.ai-personality-help-button {
  appearance: none;
  -webkit-appearance: none;
  padding: 0;
  font-family: inherit;
  vertical-align: middle;
  touch-action: manipulation;
}
.ai-personality-help-popover {
  position: fixed;
  z-index: 12000;
  width: min(330px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  max-height: min(420px, calc(100dvh - 24px));
  padding: .7rem .78rem;
  border: 1px solid color-mix(in srgb, var(--primary, #6d28d9) 30%, var(--border-color, #d4d4d8));
  border-radius: .7rem;
  background: color-mix(in srgb, var(--card-bg, var(--surface, #fff)) 96%, transparent);
  color: var(--text-primary, var(--text, #18181b));
  box-shadow: 0 12px 34px rgba(0,0,0,.2);
  font-size: .82rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
  overflow-y: auto;
  overscroll-behavior: contain;
  pointer-events: none;
}
@media (max-width: 650px) {
  #admin-panel-ai-agent .ai-personality-actionbar-meta {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
  }
  #admin-panel-ai-agent .ai-personality-actionbar-meta > strong,
  #admin-panel-ai-agent .ai-personality-actionbar-meta > small,
  #admin-panel-ai-agent .ai-personality-actionbar-toggle {
    grid-column: 1;
  }
  #admin-panel-ai-agent .ai-personality-actionbar-meta > strong { grid-row: 1; }
  #admin-panel-ai-agent .ai-personality-actionbar-meta > small { grid-row: 2; }
  #admin-panel-ai-agent .ai-personality-actionbar-toggle {
    grid-row: 3;
    justify-self: start;
    margin-top: .35rem;
  }
  .ai-personality-help-popover {
    width: min(310px, calc(100vw - 20px));
    max-width: calc(100vw - 20px);
  }
}


/* V2.6.81 — complete AI Admin contextual help coverage */
.ai-help-action-pair {
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  min-width: 0;
  max-width: 100%;
}
.ai-help-action-pair > .btn { min-width: 0; }
.ai-personality-actionbar .ai-help-action-pair { flex: 0 0 auto; }
.ai-help-control-wrap {
  position: relative;
  display: block;
  min-width: 0;
  max-width: 100%;
}
.ai-help-control-wrap > .form-control {
  width: 100%;
  min-width: 0;
  padding-right: 2rem;
}
.ai-help-control-wrap > .ai-field-help {
  position: absolute;
  top: .45rem;
  right: .45rem;
  z-index: 2;
}
#admin-panel-ai-agent legend.ai-personality-help-target,
#admin-panel-ai-agent h3.ai-personality-help-target,
#admin-panel-ai-agent h4.ai-personality-help-target,
#admin-panel-ai-agent .eyebrow.ai-personality-help-target {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  max-width: 100%;
}
@media (max-width: 430px) {
  .ai-help-action-pair { flex-wrap: nowrap; }
  .ai-help-action-pair > .btn { max-width: calc(100vw - 4.5rem); }
}

/* V2.6.82 — Email event routing / sender identity admin UI */
.email-routing-grid,
.email-event-list {
  display: grid;
  gap: .8rem;
}
.email-routing-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.email-routing-card,
.email-event-card {
  min-width: 0;
  padding: .9rem;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: var(--surface-secondary);
}
.email-routing-card-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .35rem;
}
.email-routing-card-heading code {
  max-width: 50%;
  overflow-wrap: anywhere;
  color: var(--text-muted);
  font-size: .72rem;
}
.email-routing-fields,
.email-event-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem;
  margin-top: .75rem;
}
.email-routing-fields label,
.email-event-fields > label:not(.toggle-row) {
  display: grid;
  gap: .3rem;
  min-width: 0;
  color: var(--text-secondary);
  font-size: .76rem;
  font-weight: 700;
}
.email-event-subject {
  grid-column: 1 / -1;
  overflow-wrap: anywhere;
  color: var(--text-muted);
}
.admin-email-test-result {
  max-width: 100%;
  margin-top: .85rem;
  padding: .8rem;
  overflow: auto;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: var(--surface-secondary);
  color: var(--text-secondary);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
@media (max-width: 850px) {
  .email-routing-grid,
  .email-routing-fields,
  .email-event-fields {
    grid-template-columns: 1fr;
  }
  .email-event-subject { grid-column: auto; }
}


/* V2.6.83 — reverse proxy configuration */
.admin-inline-settings { display: grid; gap: .65rem; width: min(360px, 100%); flex: 0 1 360px; }
.admin-inline-settings .toggle-row { justify-content: flex-start; }
.admin-inline-settings label:not(.toggle-row) { font-size: .78rem; font-weight: 700; color: var(--text-secondary); }
.admin-inline-settings small { line-height: 1.45; }
#admin-reverse-proxy-card { align-items: flex-start; flex-wrap: wrap; }
#admin-reverse-proxy-card > div:first-child { flex: 1 1 420px; }
#admin-reverse-proxy-warning { margin: .75rem 0 0; }
.alert-warning { color: color-mix(in srgb, var(--warning, #f0b429) 80%, var(--text-primary)); border: 1px solid color-mix(in srgb, var(--warning, #f0b429) 45%, transparent); background: color-mix(in srgb, var(--warning, #f0b429) 10%, transparent); }
@media (max-width: 720px) {
  .admin-inline-settings { width: 100%; flex-basis: 100%; }
}

/* =========================================================
   V2.6.88 – public profile hero visual repair.
   Scoped to the public profile page only. Keeps theme colors,
   borders and runtime behavior intact while repairing spacing,
   action grouping and desktop/mobile hierarchy.
   ========================================================= */
.public-profile-shell .public-profile-hero {
  grid-template-columns: 88px minmax(0, 1fr) max-content;
  align-items: center;
  column-gap: 1.15rem;
  row-gap: .8rem;
  padding: 1.35rem 1.5rem;
}
.public-profile-shell .public-profile-avatar {
  width: 88px;
  height: 88px;
  align-self: center;
  font-size: 1.9rem;
}
.public-profile-shell .public-profile-identity {
  display: block;
  min-width: 0;
  padding-top: 0;
}
.public-profile-shell .public-profile-title-row {
  gap: .4rem .5rem;
}
.public-profile-shell .public-profile-title-row h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1;
}
.public-profile-shell .public-profile-identity > p {
  margin: .35rem 0 0;
}
.public-profile-shell .public-profile-actions {
  align-items: center;
  gap: .5rem;
  margin-top: .75rem;
}
.public-profile-shell .public-profile-actions .profile-secondary-actions {
  margin-left: 0;
  gap: .4rem;
}
.public-profile-shell .public-profile-actions > .btn,
.public-profile-shell .profile-secondary-actions > .btn:not(.profile-options-button) {
  min-height: 42px;
  padding: .66rem 1rem;
}
.public-profile-shell .profile-options-button.profile-compact-action {
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  border-radius: var(--radius-md);
}
.public-profile-shell .public-profile-metrics {
  width: auto;
  min-width: 96px;
  align-self: center;
  align-content: center;
  justify-items: end;
  grid-template-rows: auto auto;
  gap: .45rem;
}
.public-profile-shell .public-profile-views {
  min-width: 0;
}
.public-profile-shell .public-profile-views strong {
  font-size: 1.6rem;
}
.public-profile-shell .public-profile-like-stat {
  align-self: center;
  padding: .3rem .4rem;
}

@media (max-width: 850px) {
  .public-profile-shell .public-profile-hero {
    grid-template-columns: 80px minmax(0, 1fr);
    padding: 1.25rem;
    gap: 1rem;
  }
  .public-profile-shell .public-profile-avatar {
    width: 80px;
    height: 80px;
    font-size: 1.75rem;
  }
  .public-profile-shell .public-profile-metrics {
    grid-column: 1 / -1;
    width: auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: .8rem;
  }
  .public-profile-shell .public-profile-views {
    display: flex;
    align-items: baseline;
    gap: .4rem;
  }
}

@media (max-width: 560px) {
  .public-profile-shell .public-profile-hero {
    grid-template-columns: 1fr;
    padding: 1.1rem;
    text-align: center;
  }
  .public-profile-shell .public-profile-avatar {
    width: 76px;
    height: 76px;
    margin: 0 auto;
  }
  .public-profile-shell .public-profile-title-row,
  .public-profile-shell .public-profile-actions,
  .public-profile-shell .public-profile-metrics {
    justify-content: center;
  }
  .public-profile-shell .public-profile-title-row h1 {
    font-size: clamp(1.9rem, 11vw, 2.6rem);
  }
  .public-profile-shell .public-profile-actions {
    gap: .45rem;
  }
  .public-profile-shell .public-profile-actions > .btn,
  .public-profile-shell .profile-secondary-actions > .btn:not(.profile-options-button) {
    min-height: 40px;
    padding: .6rem .82rem;
  }
  .public-profile-shell .profile-options-button.profile-compact-action {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
  }
  .public-profile-shell .public-profile-metrics {
    display: flex;
    width: 100%;
    justify-content: center;
  }
}


/* =========================================================
   V2.6.89 – Profile & Navigation Polish
   Targeted presentation-only refinements for the public profile,
   album gallery, Feed inbox presence copy and own-profile summary.
   ========================================================= */

/* Public profile: keep the compact V2.6.88 composition, improve balance. */
.public-profile-shell .public-profile-hero {
  grid-template-columns: 84px minmax(0, 1fr) minmax(92px, max-content);
  column-gap: 1rem;
  row-gap: .65rem;
  padding: 1.25rem 1.35rem;
}
.public-profile-shell .public-profile-avatar {
  width: 84px;
  height: 84px;
  font-size: 1.8rem;
}
.public-profile-shell .public-profile-title-row {
  align-items: center;
  gap: .35rem .45rem;
}
.public-profile-shell .public-profile-title-row h1 {
  font-size: clamp(1.95rem, 3.5vw, 2.75rem);
  line-height: 1.02;
}
.public-profile-shell .public-profile-title-row .membership-tier-badge {
  margin-top: .12rem;
  flex: 0 0 auto;
}
.public-profile-shell .public-profile-identity > p { margin-top: .28rem; }
.public-profile-shell .public-profile-actions {
  margin-top: .65rem;
  gap: .45rem;
}
.public-profile-shell .public-profile-actions .profile-secondary-actions {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem;
}
.public-profile-shell .public-profile-metrics {
  min-width: 92px;
  gap: .38rem;
}
.public-profile-shell .public-profile-views strong { font-size: 1.5rem; }
.public-profile-shell .public-profile-like-stat { margin: 0; }

/* Album: noticeably more photo, less surrounding frame while controls stay intact. */
.profile-album-backdrop {
  padding: max(.5rem, env(safe-area-inset-top)) max(.5rem, env(safe-area-inset-right)) max(.5rem, env(safe-area-inset-bottom)) max(.5rem, env(safe-area-inset-left));
}
html .profile-album-backdrop .profile-album-panel {
  width: min(1120px, 100%);
  max-height: min(94dvh, 940px);
  grid-template-rows: auto minmax(320px, 1fr) auto auto;
  gap: .55rem;
  padding: .7rem;
}
.profile-album-stage {
  min-height: 320px;
  max-height: 69dvh;
  grid-template-columns: 38px minmax(0, 1fr) 38px;
  gap: .4rem;
}
.profile-album-media {
  min-height: 320px;
  border-radius: 14px;
}
.profile-album-media img {
  max-height: 69dvh;
}
.profile-album-thumbnails {
  gap: .4rem;
  padding: .05rem .05rem .2rem;
}
.profile-album-thumbnail {
  flex-basis: 62px;
  width: 62px;
  height: 48px;
}
.profile-album-footer { gap: .55rem; }

/* Feed inbox: presence is secondary to the message preview but updates with the existing inbox refresh. */
.conversation-presence {
  display: block;
  margin-top: .08rem;
  color: var(--text-muted);
  font-size: .68rem;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.conversation-presence.is-online { color: var(--success); }

/* Feed right card: username + tier/verification badges belong to the same compact identity row. */
.profile-summary-copy { min-width: 0; flex: 1 1 auto; }
.profile-summary-name-row {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .3rem .4rem;
}
.profile-summary-name-row h2 {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.profile-summary-name-row .membership-tier-badge,
.profile-summary-name-row .identity-verified-badge {
  flex: 0 0 auto;
  margin-top: 0;
}
.profile-summary-name-row .membership-tier-badge {
  padding: .18rem .4rem;
  font-size: .64rem;
}

@media (max-width: 850px) {
  .public-profile-shell .public-profile-hero {
    grid-template-columns: 76px minmax(0, 1fr);
    padding: 1.1rem;
    gap: .85rem;
  }
  .public-profile-shell .public-profile-avatar {
    width: 76px;
    height: 76px;
    font-size: 1.65rem;
  }
  .public-profile-shell .public-profile-metrics {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
  html .profile-album-backdrop .profile-album-panel {
    max-height: calc(100dvh - 1rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    grid-template-rows: auto minmax(240px, 1fr) auto auto;
    padding: .6rem;
    gap: .45rem;
  }
  .profile-album-stage,
  .profile-album-media { min-height: 240px; }
  .profile-album-stage,
  .profile-album-media img { max-height: 66dvh; }
}

@media (max-width: 430px) {
  .public-profile-shell .public-profile-hero {
    grid-template-columns: 1fr;
    padding: 1rem;
    text-align: center;
  }
  .public-profile-shell .public-profile-avatar {
    width: 72px;
    height: 72px;
    margin-inline: auto;
  }
  .public-profile-shell .public-profile-title-row,
  .public-profile-shell .public-profile-actions,
  .public-profile-shell .public-profile-metrics {
    justify-content: center;
  }
  .public-profile-shell .public-profile-title-row h1 {
    max-width: 100%;
    font-size: clamp(1.75rem, 10vw, 2.35rem);
  }
  .public-profile-shell .public-profile-actions {
    width: 100%;
  }
  .public-profile-shell .public-profile-actions .profile-secondary-actions {
    justify-content: center;
  }
  .public-profile-shell .public-profile-actions > .btn,
  .public-profile-shell .profile-secondary-actions > .btn:not(.profile-options-button) {
    min-height: 40px;
    padding: .58rem .72rem;
  }
  .profile-album-backdrop { padding: .3rem; }
  html .profile-album-backdrop .profile-album-panel {
    max-height: calc(100dvh - .6rem);
    grid-template-rows: auto minmax(210px, 1fr) auto auto;
    padding: .5rem;
    border-radius: 16px;
  }
  .profile-album-stage {
    min-height: 210px;
    max-height: 61dvh;
    grid-template-columns: 32px minmax(0, 1fr) 32px;
    gap: .25rem;
  }
  .profile-album-media { min-height: 210px; }
  .profile-album-media img { max-height: 61dvh; }
  .profile-album-nav { width: 32px; height: 42px; }
  .profile-album-thumbnail { flex-basis: 54px; width: 54px; height: 42px; }
  .profile-album-footer { align-items: flex-start; flex-wrap: wrap; }
  .profile-album-footer-actions { width: 100%; justify-content: flex-end; flex-wrap: wrap; }
}

/* =========================================================
   V2.6.90 — global Settings/Notifications overlays, tighter
   album presentation and clearer profile metric separation.
   ========================================================= */

/* V2.6.92: Settings/Notifications use the existing modal styles as
   same-document global overlays. No self-framing or iframe-specific CSS. */

/* Album: let the photograph dominate while preserving title, navigation,
   thumbnails, counter and image actions around it. */
.profile-album-backdrop {
  padding: max(.22rem, env(safe-area-inset-top)) max(.22rem, env(safe-area-inset-right)) max(.22rem, env(safe-area-inset-bottom)) max(.22rem, env(safe-area-inset-left));
}
html .profile-album-backdrop .profile-album-panel {
  width: min(1280px, calc(100vw - .44rem));
  max-height: calc(100dvh - .44rem);
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: .32rem;
  padding: .46rem;
}
.profile-album-header { min-height: 34px; gap: .5rem; }
.profile-album-header > div { gap: 0; }
.profile-album-stage {
  min-height: 360px;
  max-height: calc(100dvh - 142px);
  grid-template-columns: 36px minmax(0, 1fr) 36px;
  gap: .28rem;
}
.profile-album-media {
  min-height: 360px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--background-deep) 64%, var(--surface));
}
.profile-album-media img { max-height: calc(100dvh - 142px); }
.profile-album-thumbnails {
  gap: .3rem;
  padding: 0 .03rem .08rem;
}
.profile-album-thumbnail {
  flex-basis: 58px;
  width: 58px;
  height: 44px;
}
.profile-album-footer { min-height: 32px; gap: .4rem; }

/* Profile: visits and likes remain compact but read as two distinct metrics. */
.public-profile-shell .public-profile-metrics { gap: .65rem; }
.public-profile-shell .public-profile-views {
  width: 100%;
  padding-bottom: .58rem;
}
.public-profile-shell .public-profile-like-stat {
  width: 100%;
  justify-content: flex-end;
  padding: .58rem .4rem .3rem;
  border-top: 1px solid var(--border-soft);
  border-radius: 0 0 10px 10px;
}

@media (max-width: 850px) {
  html .profile-album-backdrop .profile-album-panel {
    width: calc(100vw - .3rem);
    max-height: calc(100dvh - .3rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    padding: .38rem;
    gap: .28rem;
    border-radius: 16px;
  }
  .profile-album-stage {
    min-height: 250px;
    max-height: calc(100dvh - 136px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
  .profile-album-media { min-height: 250px; }
  .profile-album-media img { max-height: calc(100dvh - 136px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }

  .public-profile-shell .public-profile-metrics {
    gap: .75rem;
    align-items: center;
  }
  .public-profile-shell .public-profile-views {
    width: auto;
    padding: 0 .75rem 0 0;
  }
  .public-profile-shell .public-profile-like-stat {
    width: auto;
    justify-content: flex-start;
    padding: .34rem 0 .34rem .75rem;
    border-top: 0;
    border-left: 1px solid var(--border-soft);
    border-radius: 0;
  }
}

@media (max-width: 430px) {
  .profile-album-backdrop { padding: .12rem; }
  html .profile-album-backdrop .profile-album-panel {
    width: calc(100vw - .24rem);
    max-height: calc(100dvh - .24rem);
    padding: .32rem;
    gap: .24rem;
    border-radius: 13px;
  }
  .profile-album-header { min-height: 30px; }
  .profile-album-stage {
    min-height: 220px;
    max-height: calc(100dvh - 128px);
    grid-template-columns: 30px minmax(0, 1fr) 30px;
    gap: .18rem;
  }
  .profile-album-media { min-height: 220px; border-radius: 10px; }
  .profile-album-media img { max-height: calc(100dvh - 128px); }
  .profile-album-nav { width: 30px; height: 40px; }
  .profile-album-thumbnail { flex-basis: 50px; width: 50px; height: 38px; }
  .profile-album-footer { gap: .3rem; }

  .public-profile-shell .public-profile-metrics {
    width: 100%;
    justify-content: center;
    gap: .65rem;
  }
  .public-profile-shell .public-profile-views { padding-right: .65rem; }
  .public-profile-shell .public-profile-like-stat { padding-left: .65rem; }
}

/* =========================================================
   V2.6.94 — Lunar Cloud cohesion polish
   Theme-scoped presentation layer only. Keeps Lunar Cloud's
   moonlit editorial identity while applying it consistently to
   shared surfaces, controls, menus, overlays and responsive UI.
   ========================================================= */

html[data-theme="lunar-cloud"] {
  /* Lunar-specific semantic tokens keep component treatments consistent. */
  --lunar-surface: rgba(43, 53, 63, .94);
  --lunar-surface-raised: rgba(48, 59, 70, .97);
  --lunar-surface-soft: rgba(255, 255, 255, .034);
  --lunar-surface-hover: rgba(229, 235, 239, .065);
  --lunar-surface-active: rgba(225, 233, 238, .095);
  --lunar-edge: rgba(235, 239, 241, .10);
  --lunar-edge-strong: rgba(235, 239, 241, .17);
  --lunar-highlight: rgba(255, 255, 255, .035);
  --lunar-moon: #e2ebf0;
  --lunar-sand: #dcc7aa;
  --lunar-focus: rgba(175, 202, 219, .34);
  --lunar-shadow: 0 22px 58px rgba(7, 12, 18, .18), inset 0 1px 0 rgba(255,255,255,.028);
  --lunar-shadow-raised: 0 30px 82px rgba(7, 12, 18, .28), inset 0 1px 0 rgba(255,255,255,.035);

  /* A tighter radius ladder makes shared components feel related. */
  --radius-sm: 14px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --radius-xl: 30px;
  --shadow: var(--lunar-shadow-raised);
  --shadow-soft: var(--lunar-shadow);
}

/* Header / navigation ---------------------------------------------------- */
html[data-theme="lunar-cloud"] .app-header,
html[data-theme="lunar-cloud"] body > header:not(.app-header) {
  border-bottom-color: var(--lunar-edge);
  background:
    linear-gradient(180deg, rgba(255,255,255,.018), transparent),
    rgba(21, 29, 37, .88);
  box-shadow: 0 12px 34px rgba(7,12,18,.16);
}
html[data-theme="lunar-cloud"] .app-brand,
html[data-theme="lunar-cloud"] .logo {
  color: #f5f2ec;
  text-shadow: 0 1px 0 rgba(255,255,255,.025);
}
html[data-theme="lunar-cloud"] .topnav-link {
  color: var(--text-secondary);
  transition: color var(--transition), background var(--transition), box-shadow var(--transition), transform var(--transition);
}
html[data-theme="lunar-cloud"] .topnav-link:hover {
  color: var(--text-primary);
  background: var(--lunar-surface-hover);
}
html[data-theme="lunar-cloud"] .topnav-link.is-active {
  color: #f7f3ed;
  background: var(--lunar-surface-active);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 6px 18px rgba(8,13,18,.08);
}
html[data-theme="lunar-cloud"] .app-search {
  border-color: var(--lunar-edge);
  background: rgba(18, 26, 34, .72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.018);
}
html[data-theme="lunar-cloud"] .app-search:hover {
  border-color: var(--lunar-edge-strong);
}
html[data-theme="lunar-cloud"] .app-search:focus-within {
  border-color: var(--lunar-focus);
  box-shadow: 0 0 0 3px rgba(175,202,219,.045), inset 0 1px 0 rgba(255,255,255,.025);
}

/* Shared surfaces / cards ----------------------------------------------- */
html[data-theme="lunar-cloud"] :is(
  .card,
  .friends-sidebar-inner,
  .messages-inbox,
  .messages-chat,
  .feed-tag-filter,
  .form-container,
  .profile-summary,
  .quick-create-card,
  .admin-stat-card,
  .admin-panel-card
) {
  border-color: var(--lunar-edge);
  background:
    linear-gradient(150deg, var(--lunar-highlight), transparent 42%),
    var(--lunar-surface);
  box-shadow: var(--lunar-shadow);
}
html[data-theme="lunar-cloud"] .card:hover {
  border-color: var(--lunar-edge-strong);
  box-shadow: 0 26px 66px rgba(7,12,18,.21), inset 0 1px 0 rgba(255,255,255,.035);
}
html[data-theme="lunar-cloud"] .feed-post {
  border-color: var(--lunar-edge);
  background:
    radial-gradient(ellipse at 92% -6%, rgba(220,199,170,.042), transparent 15rem),
    linear-gradient(150deg, rgba(255,255,255,.03), transparent 42%),
    var(--lunar-surface);
}
html[data-theme="lunar-cloud"] .feed-post:hover {
  border-color: var(--lunar-edge-strong);
  box-shadow: 0 28px 70px rgba(7,12,18,.22), inset 0 1px 0 rgba(255,255,255,.035);
}
html[data-theme="lunar-cloud"] .post-footer,
html[data-theme="lunar-cloud"] .sidebar-divider,
html[data-theme="lunar-cloud"] .profile-facts > div,
html[data-theme="lunar-cloud"] .public-profile-facts > div,
html[data-theme="lunar-cloud"] .settings-section {
  border-color: rgba(235,239,241,.072);
}
html[data-theme="lunar-cloud"] .post-action-button {
  color: var(--text-secondary);
  border-radius: 12px;
  transition: color var(--transition), background var(--transition), transform var(--transition);
}
html[data-theme="lunar-cloud"] .post-action-button:hover,
html[data-theme="lunar-cloud"] .post-action-button.is-selected {
  color: var(--text-primary);
  background: var(--lunar-surface-hover);
}

/* Typography hierarchy -------------------------------------------------- */
html[data-theme="lunar-cloud"] :is(
  .feed-intro h1,
  .public-profile-title-row h1,
  .modal-header h2,
  .dating-profile-name,
  .form-intro h1,
  .admin-intro h1
) {
  color: #f5f1ea;
  text-wrap: balance;
}
html[data-theme="lunar-cloud"] :is(.sidebar-heading-row h2, .profile-summary h2, .admin-card-heading h2) {
  color: #f0ede7;
  letter-spacing: -.02em;
}
html[data-theme="lunar-cloud"] .eyebrow {
  color: var(--lunar-sand);
}

/* Buttons / interactive controls ---------------------------------------- */
html[data-theme="lunar-cloud"] .btn {
  border-radius: 15px;
  font-weight: 720;
}
html[data-theme="lunar-cloud"] .btn-primary {
  border-color: rgba(248,250,251,.34);
  background: linear-gradient(180deg, #e5edf1, #d7e2e8);
  color: #1d252d;
  box-shadow: 0 8px 22px rgba(7,12,18,.15), inset 0 1px 0 rgba(255,255,255,.48);
}
html[data-theme="lunar-cloud"] .btn-primary:hover {
  border-color: rgba(255,255,255,.58);
  background: linear-gradient(180deg, #f5f8f9, #e4edf1);
  box-shadow: 0 10px 26px rgba(7,12,18,.19), inset 0 1px 0 rgba(255,255,255,.58);
}
html[data-theme="lunar-cloud"] .btn-secondary,
html[data-theme="lunar-cloud"] .icon-button,
html[data-theme="lunar-cloud"] .avatar-button {
  border-color: var(--lunar-edge);
  background: rgba(255,255,255,.028);
  color: var(--text-primary);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.018);
}
html[data-theme="lunar-cloud"] .btn-secondary:hover,
html[data-theme="lunar-cloud"] .icon-button:hover,
html[data-theme="lunar-cloud"] .avatar-button:hover {
  border-color: var(--lunar-edge-strong);
  background: var(--lunar-surface-hover);
}
html[data-theme="lunar-cloud"] .btn-danger {
  border-color: rgba(232,138,146,.28);
  background: rgba(232,138,146,.07);
}
html[data-theme="lunar-cloud"] .btn-danger:hover {
  border-color: rgba(232,138,146,.42);
  background: rgba(232,138,146,.12);
}
html[data-theme="lunar-cloud"] :is(
  .btn,
  .form-control,
  .icon-button,
  .avatar-button,
  .topnav-link,
  .theme-option,
  .person-row,
  .mobile-nav-item,
  .header-profile-menu-item,
  .notification-row
):focus-visible {
  outline-color: var(--lunar-focus);
}

/* Forms ----------------------------------------------------------------- */
html[data-theme="lunar-cloud"] .form-container {
  border-color: var(--lunar-edge-strong);
  background:
    radial-gradient(ellipse at 85% -5%, rgba(220,199,170,.05), transparent 17rem),
    linear-gradient(150deg, rgba(255,255,255,.035), transparent 44%),
    var(--lunar-surface-raised);
}
html[data-theme="lunar-cloud"] .form-group label {
  color: #d8dcdd;
  font-weight: 700;
}
html[data-theme="lunar-cloud"] .form-control,
html[data-theme="lunar-cloud"] .chat-input-shell {
  border-color: var(--lunar-edge);
  border-radius: 15px;
  background: rgba(18, 26, 34, .72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.014);
}
html[data-theme="lunar-cloud"] .form-control:hover {
  border-color: var(--lunar-edge-strong);
}
html[data-theme="lunar-cloud"] .form-control:focus,
html[data-theme="lunar-cloud"] .chat-input-shell:focus-within {
  border-color: var(--lunar-focus);
  box-shadow: 0 0 0 3px rgba(175,202,219,.05), inset 0 1px 0 rgba(255,255,255,.02);
}
html[data-theme="lunar-cloud"] .form-control::placeholder,
html[data-theme="lunar-cloud"] .chat-input-shell textarea::placeholder {
  color: #87939a;
}
html[data-theme="lunar-cloud"] :is(.alert, .sidebar-empty) {
  border-radius: 14px;
}

/* Profile --------------------------------------------------------------- */
html[data-theme="lunar-cloud"] .public-profile-hero {
  border: 1px solid var(--lunar-edge);
  border-radius: 30px;
  background:
    radial-gradient(ellipse at 86% -4%, rgba(220,199,170,.085), transparent 18rem),
    radial-gradient(ellipse at 4% -8%, rgba(186,211,225,.09), transparent 20rem),
    linear-gradient(150deg, rgba(255,255,255,.035), transparent 44%),
    #2a3540;
  box-shadow: var(--lunar-shadow);
}
html[data-theme="lunar-cloud"] :is(.public-profile-info, .public-profile-details, .public-profile-interests) {
  border-color: var(--lunar-edge);
  background:
    linear-gradient(150deg, rgba(255,255,255,.025), transparent 45%),
    var(--lunar-surface);
}
html[data-theme="lunar-cloud"] .public-profile-avatar {
  border-color: rgba(236,240,242,.19);
  box-shadow: 0 12px 30px rgba(7,12,18,.18), 0 0 0 4px rgba(255,255,255,.018);
}
html[data-theme="lunar-cloud"] .public-profile-actions .is-selected {
  border-color: rgba(216,187,201,.34);
  background: rgba(216,187,201,.075);
}
html[data-theme="lunar-cloud"] .public-profile-metrics {
  color: var(--text-secondary);
}
html[data-theme="lunar-cloud"] .public-profile-like-stat:hover {
  background: var(--lunar-surface-hover);
}

/* Messages / inbox ------------------------------------------------------ */
html[data-theme="lunar-cloud"] .conversation-row-shell {
  border: 1px solid transparent;
  border-radius: 16px;
}
html[data-theme="lunar-cloud"] .conversation-row-shell:hover,
html[data-theme="lunar-cloud"] .person-row:hover,
html[data-theme="lunar-cloud"] .profile-search-item:hover {
  border-color: rgba(235,239,241,.055);
  background: var(--lunar-surface-hover);
}
html[data-theme="lunar-cloud"] .conversation-row-shell.is-active,
html[data-theme="lunar-cloud"] .conversation-row-shell.is-selected {
  border-color: rgba(220,199,170,.10);
  background: var(--lunar-surface-active);
  box-shadow: inset 2px 0 0 var(--lunar-sand);
}
html[data-theme="lunar-cloud"] .messages-inbox-heading,
html[data-theme="lunar-cloud"] .messages-chat-header {
  border-color: rgba(235,239,241,.075);
}
html[data-theme="lunar-cloud"] .chat-message-list {
  background:
    radial-gradient(ellipse at 18% 0%, rgba(187,211,225,.045), transparent 20rem),
    linear-gradient(180deg, rgba(255,255,255,.01), transparent 30%),
    #18212a;
}
html[data-theme="lunar-cloud"] .chat-message-bubble {
  border-color: rgba(235,239,241,.08);
  background: rgba(56, 68, 79, .86);
  box-shadow: 0 8px 18px rgba(7,12,18,.08);
}
html[data-theme="lunar-cloud"] .chat-message-row.is-own .chat-message-bubble {
  border-color: rgba(255,255,255,.17);
  background: #dfe8ed;
  color: #1d252d;
  box-shadow: 0 8px 20px rgba(7,12,18,.11);
}
html[data-theme="lunar-cloud"] .chat-composer,
html[data-theme="lunar-cloud"] .messages-chat-header {
  background: rgba(37, 47, 57, .96);
}
html[data-theme="lunar-cloud"] .message-selection-toolbar {
  border-color: rgba(220,199,170,.16);
  background: rgba(220,199,170,.055);
}

/* Modals / dropdowns / notifications ----------------------------------- */
html[data-theme="lunar-cloud"] .modal-backdrop {
  background: rgba(8, 13, 18, .66);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}
html[data-theme="lunar-cloud"] :is(
  .modal-card,
  .profile-search-results,
  .header-profile-menu,
  .profile-options-menu,
  .chat-actions-menu,
  .conversation-actions-menu
) {
  border: 1px solid var(--lunar-edge-strong);
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.035), transparent 42%),
    var(--lunar-surface-raised);
  box-shadow: var(--lunar-shadow-raised);
}
html[data-theme="lunar-cloud"] .modal-card {
  border-radius: 26px;
}
html[data-theme="lunar-cloud"] .modal-header {
  padding-bottom: .85rem;
  border-bottom: 1px solid rgba(235,239,241,.07);
}
html[data-theme="lunar-cloud"] :is(
  .header-profile-menu-item,
  .profile-options-menu button,
  .chat-actions-menu button,
  .conversation-actions-menu button
) {
  border-radius: 11px;
  color: var(--text-secondary);
}
html[data-theme="lunar-cloud"] :is(
  .header-profile-menu-item:hover,
  .header-profile-menu-item:focus-visible,
  .profile-options-menu button:hover,
  .chat-actions-menu button:hover,
  .conversation-actions-menu button:hover
) {
  color: var(--text-primary);
  background: var(--lunar-surface-hover);
}
html[data-theme="lunar-cloud"] .header-profile-menu-divider {
  background: rgba(235,239,241,.07);
}
html[data-theme="lunar-cloud"] .notifications-modal-card {
  background:
    radial-gradient(ellipse at 92% 0%, rgba(220,199,170,.045), transparent 14rem),
    linear-gradient(145deg, rgba(255,255,255,.032), transparent 42%),
    var(--lunar-surface-raised);
}
html[data-theme="lunar-cloud"] .notification-list {
  gap: .55rem;
}
html[data-theme="lunar-cloud"] .notification-row {
  border-color: rgba(235,239,241,.075);
  border-radius: 15px;
  background: rgba(255,255,255,.022);
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
html[data-theme="lunar-cloud"] .notification-row:hover {
  border-color: var(--lunar-edge-strong);
  background: var(--lunar-surface-hover);
  transform: translateY(-1px);
}
html[data-theme="lunar-cloud"] .notification-row.is-unread {
  border-color: rgba(175,202,219,.20);
  background:
    linear-gradient(90deg, rgba(175,202,219,.075), transparent 62%),
    rgba(255,255,255,.024);
  box-shadow: inset 2px 0 0 rgba(175,202,219,.56);
}
html[data-theme="lunar-cloud"] .notification-badge {
  border-color: #1b242d;
  background: #d8bbc9;
  color: #221922;
}
html[data-theme="lunar-cloud"] .toast {
  border-color: var(--lunar-edge-strong);
  border-radius: 15px;
  background: var(--lunar-surface-raised);
  box-shadow: var(--lunar-shadow-raised);
}

/* Theme/options chips --------------------------------------------------- */
html[data-theme="lunar-cloud"] .theme-option {
  border-color: var(--lunar-edge);
  border-radius: 18px;
  background: rgba(255,255,255,.024);
}
html[data-theme="lunar-cloud"] .theme-option:hover {
  border-color: var(--lunar-edge-strong);
  background: var(--lunar-surface-hover);
}
html[data-theme="lunar-cloud"] .theme-option.is-selected {
  border-color: rgba(175,202,219,.28);
  background: rgba(175,202,219,.065);
  box-shadow: 0 0 0 2px rgba(175,202,219,.045), inset 0 1px 0 rgba(255,255,255,.025);
}
html[data-theme="lunar-cloud"] :is(.post-tag-badge, .match-badge, .feed-tag-filter-button) {
  border: 1px solid rgba(220,199,170,.08);
  border-radius: 10px;
  background: rgba(220,199,170,.07);
  color: #e3d2ba;
}
html[data-theme="lunar-cloud"] .feed-tag-filter-button:hover,
html[data-theme="lunar-cloud"] .feed-tag-filter-button.is-active {
  border-color: rgba(220,199,170,.20);
  background: rgba(220,199,170,.115);
}

/* Admin inherits the same surface language without changing layout. ----- */
html[data-theme="lunar-cloud"] .admin-tabs {
  border-color: var(--lunar-edge);
  border-radius: 16px;
  background: rgba(255,255,255,.022);
}
html[data-theme="lunar-cloud"] .admin-tab {
  border-radius: 11px;
  color: var(--text-secondary);
}
html[data-theme="lunar-cloud"] .admin-tab:hover {
  background: var(--lunar-surface-hover);
}
html[data-theme="lunar-cloud"] .admin-tab.is-active {
  border-color: rgba(175,202,219,.20);
  background: rgba(175,202,219,.07);
  color: #e5edf1;
}
html[data-theme="lunar-cloud"] .admin-report-item,
html[data-theme="lunar-cloud"] .admin-report-content {
  border-color: var(--lunar-edge);
  border-radius: 14px;
  background: rgba(255,255,255,.025);
}
html[data-theme="lunar-cloud"] .admin-table th,
html[data-theme="lunar-cloud"] .admin-table td {
  border-bottom-color: rgba(235,239,241,.065);
}

/* Mobile navigation / responsive finish -------------------------------- */
@media (max-width: 850px) {
  html[data-theme="lunar-cloud"] .app-header {
    border-bottom-color: var(--lunar-edge);
    background: rgba(21,29,37,.93);
  }
  html[data-theme="lunar-cloud"] .mobile-bottom-nav {
    border: 1px solid var(--lunar-edge);
    border-bottom: 0;
    background:
      linear-gradient(180deg, rgba(255,255,255,.025), transparent),
      rgba(23, 31, 39, .96);
    box-shadow: 0 -14px 34px rgba(7,12,18,.18), inset 0 1px 0 rgba(255,255,255,.025);
  }
  html[data-theme="lunar-cloud"] .mobile-nav-item {
    border-radius: 13px;
    color: var(--text-muted);
  }
  html[data-theme="lunar-cloud"] .mobile-nav-item:hover {
    color: var(--text-primary);
    background: rgba(255,255,255,.035);
  }
  html[data-theme="lunar-cloud"] .mobile-nav-item.is-active {
    color: #f4f0ea;
    background: var(--lunar-surface-active);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
  }
  html[data-theme="lunar-cloud"] .mobile-create-nav {
    color: #ead9c0;
  }
  html[data-theme="lunar-cloud"] :is(.modal-card, .settings-modal-card, .notifications-modal-card) {
    border-radius: 22px 22px 16px 16px;
  }
}

@media (max-width: 560px) {
  html[data-theme="lunar-cloud"] .feed-post {
    border-radius: 22px;
  }
  html[data-theme="lunar-cloud"] .public-profile-hero {
    border-radius: 24px;
  }
  html[data-theme="lunar-cloud"] .modal-card {
    border-radius: 20px 20px 14px 14px;
  }
  html[data-theme="lunar-cloud"] :is(.form-container, .card, .friends-sidebar-inner) {
    border-radius: 22px;
  }
  html[data-theme="lunar-cloud"] .btn {
    border-radius: 13px;
  }
}

/* Keep readable opaque Lunar surfaces on browsers without backdrop blur. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-theme="lunar-cloud"] .app-header,
  html[data-theme="lunar-cloud"] body > header:not(.app-header),
  html[data-theme="lunar-cloud"] .mobile-bottom-nav {
    background: #1a232c;
  }
}

/* =========================================================
   V2.6.96 — Cloud sibling themes
   Three new built-in themes reuse Lunar Cloud's cohesive
   component discipline while keeping separate visual identities.
   Lunar Cloud itself is not modified by this layer.
   ========================================================= */

/* Obsidian Cloud — restrained monochrome smoke glass. */
html[data-theme="obsidian-cloud"] {
  color-scheme: dark;
  --background: #090a0c;
  --background-deep: #050506;
  --background-soft: #15171a;
  --surface: rgba(22, 24, 27, .80);
  --surface-secondary: rgba(29, 31, 35, .82);
  --surface-elevated: rgba(30, 32, 36, .94);
  --surface-translucent: rgba(13, 14, 16, .76);
  --text-primary: #f4f4f2;
  --text-secondary: #c8c9c7;
  --text-muted: #8f9295;
  --accent: #f0f0ed;
  --accent-hover: #ffffff;
  --accent-contrast: #111214;
  --accent-soft: rgba(255,255,255,.085);
  --accent-blue: #cbd0d4;
  --border: rgba(255,255,255,.15);
  --border-soft: rgba(255,255,255,.072);
  --header-bg: rgba(8, 9, 11, .82);
  --input-background: rgba(10, 11, 13, .72);
  --danger: #e09196;
  --success: #b5d0c2;
  --warning: #d6c5a8;
  --heart: #d8c9d0;
  --body-background:
    radial-gradient(circle at 8% -4%, rgba(255,255,255,.075), transparent 27rem),
    radial-gradient(circle at 92% 18%, rgba(180,186,191,.045), transparent 30rem),
    linear-gradient(155deg, #141619 0%, #090a0c 48%, #050506 100%);
  --modal-backdrop: rgba(0,0,0,.68);
  --shadow: 0 26px 68px rgba(0,0,0,.34);
  --shadow-soft: 0 14px 38px rgba(0,0,0,.24);
  --shadow-modal: 0 36px 96px rgba(0,0,0,.52);
  --shadow-drawer: 18px 0 54px rgba(0,0,0,.42);
  --radius-sm: 14px;
  --radius-md: 19px;
  --radius-lg: 28px;
  --radius-xl: 34px;
  --radius-pill: 999px;
  --font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --transition: 210ms cubic-bezier(.2,.78,.2,1);
  --primary: var(--accent);
  --muted-text: var(--text-muted);
  --border-color: var(--border-soft);

  --cloud-surface: rgba(22,24,27,.80);
  --cloud-surface-raised: rgba(31,33,37,.94);
  --cloud-surface-soft: rgba(255,255,255,.026);
  --cloud-surface-hover: rgba(255,255,255,.055);
  --cloud-surface-active: rgba(255,255,255,.082);
  --cloud-edge: rgba(255,255,255,.095);
  --cloud-edge-strong: rgba(255,255,255,.17);
  --cloud-highlight: rgba(255,255,255,.026);
  --cloud-focus: rgba(244,244,242,.30);
  --cloud-accent-soft: rgba(255,255,255,.065);
  --cloud-accent-border: rgba(255,255,255,.24);
  --cloud-accent-text: #f6f6f3;
  --cloud-tag-bg: rgba(255,255,255,.055);
  --cloud-tag-border: rgba(255,255,255,.10);
  --cloud-tag-text: #d8dad9;
  --cloud-unread: rgba(255,255,255,.065);
  --cloud-own-bubble: #ececea;
  --cloud-own-bubble-text: #141517;
  --cloud-chat-bg: #090a0c;
  --cloud-danger-soft: rgba(224,145,150,.08);
  --cloud-shadow: 0 22px 62px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.025);
  --cloud-shadow-raised: 0 34px 92px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.032);
}

/* Midnight Tundra — midnight navy, slate and muted icy cyan. */
html[data-theme="midnight-tundra"] {
  color-scheme: dark;
  --background: #0b1725;
  --background-deep: #06101b;
  --background-soft: #14263a;
  --surface: rgba(18, 35, 52, .93);
  --surface-secondary: rgba(24, 45, 65, .92);
  --surface-elevated: rgba(22, 42, 61, .97);
  --surface-translucent: rgba(9, 24, 38, .90);
  --text-primary: #eef6f8;
  --text-secondary: #c0d0d6;
  --text-muted: #829aa5;
  --accent: #9fdbe4;
  --accent-hover: #c6edf2;
  --accent-contrast: #0a2028;
  --accent-soft: rgba(159,219,228,.10);
  --accent-blue: #84b7cf;
  --border: rgba(173,207,220,.20);
  --border-soft: rgba(173,207,220,.095);
  --header-bg: rgba(7, 20, 33, .90);
  --input-background: rgba(8, 24, 38, .86);
  --danger: #e47f8a;
  --success: #89cfb2;
  --warning: #d8c28f;
  --heart: #d5a8bd;
  --body-background:
    radial-gradient(circle at 12% -6%, rgba(127,202,218,.12), transparent 31rem),
    radial-gradient(circle at 90% 18%, rgba(93,132,166,.10), transparent 31rem),
    linear-gradient(155deg, #14273b 0%, #0b1725 48%, #06101b 100%);
  --modal-backdrop: rgba(3,9,16,.66);
  --shadow: 0 27px 70px rgba(2,8,14,.31);
  --shadow-soft: 0 15px 40px rgba(2,8,14,.21);
  --shadow-modal: 0 36px 92px rgba(2,8,14,.46);
  --shadow-drawer: 18px 0 54px rgba(2,8,14,.34);
  --radius-sm: 14px;
  --radius-md: 20px;
  --radius-lg: 29px;
  --radius-xl: 35px;
  --radius-pill: 999px;
  --font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --transition: 220ms cubic-bezier(.2,.8,.2,1);
  --primary: var(--accent);
  --muted-text: var(--text-muted);
  --border-color: var(--border-soft);

  --cloud-surface: rgba(18,35,52,.93);
  --cloud-surface-raised: rgba(23,43,62,.97);
  --cloud-surface-soft: rgba(190,228,236,.028);
  --cloud-surface-hover: rgba(159,219,228,.055);
  --cloud-surface-active: rgba(159,219,228,.085);
  --cloud-edge: rgba(173,207,220,.10);
  --cloud-edge-strong: rgba(173,207,220,.18);
  --cloud-highlight: rgba(205,235,241,.028);
  --cloud-focus: rgba(159,219,228,.34);
  --cloud-accent-soft: rgba(159,219,228,.075);
  --cloud-accent-border: rgba(159,219,228,.27);
  --cloud-accent-text: #d9f3f6;
  --cloud-tag-bg: rgba(117,183,204,.075);
  --cloud-tag-border: rgba(117,183,204,.13);
  --cloud-tag-text: #bfe4eb;
  --cloud-unread: rgba(159,219,228,.075);
  --cloud-own-bubble: #b9e4ea;
  --cloud-own-bubble-text: #0b2028;
  --cloud-chat-bg: #091521;
  --cloud-danger-soft: rgba(228,127,138,.08);
  --cloud-shadow: 0 23px 64px rgba(2,8,14,.25), inset 0 1px 0 rgba(215,240,245,.022);
  --cloud-shadow-raised: 0 34px 92px rgba(2,8,14,.39), inset 0 1px 0 rgba(215,240,245,.03);
}

/* Velvet Eclipse — plum, aubergine and wine with soft rose accents. */
html[data-theme="velvet-eclipse"] {
  color-scheme: dark;
  --background: #1a1019;
  --background-deep: #10090f;
  --background-soft: #301b2b;
  --surface: rgba(45, 25, 40, .94);
  --surface-secondary: rgba(58, 31, 50, .92);
  --surface-elevated: rgba(52, 28, 46, .98);
  --surface-translucent: rgba(28, 15, 25, .91);
  --text-primary: #f8eff4;
  --text-secondary: #d9c7d1;
  --text-muted: #a78999;
  --accent: #dfa2bc;
  --accent-hover: #efbfd1;
  --accent-contrast: #2b1320;
  --accent-soft: rgba(223,162,188,.11);
  --accent-blue: #baa4d7;
  --border: rgba(232,193,211,.19);
  --border-soft: rgba(232,193,211,.09);
  --header-bg: rgba(24, 12, 22, .90);
  --input-background: rgba(27, 14, 24, .87);
  --danger: #ee818d;
  --success: #9fcbb2;
  --warning: #d7bb8e;
  --heart: #e5a2be;
  --body-background:
    radial-gradient(circle at 10% -4%, rgba(197,126,162,.13), transparent 31rem),
    radial-gradient(circle at 91% 18%, rgba(118,86,153,.09), transparent 30rem),
    linear-gradient(155deg, #321a2b 0%, #1a1019 49%, #10090f 100%);
  --modal-backdrop: rgba(8,3,7,.68);
  --shadow: 0 28px 72px rgba(9,3,8,.34);
  --shadow-soft: 0 16px 42px rgba(9,3,8,.22);
  --shadow-modal: 0 38px 98px rgba(9,3,8,.50);
  --shadow-drawer: 18px 0 56px rgba(9,3,8,.36);
  --radius-sm: 16px;
  --radius-md: 22px;
  --radius-lg: 31px;
  --radius-xl: 37px;
  --radius-pill: 999px;
  --font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: Georgia, "Times New Roman", serif;
  --transition: 235ms cubic-bezier(.2,.8,.2,1);
  --primary: var(--accent);
  --muted-text: var(--text-muted);
  --border-color: var(--border-soft);

  --cloud-surface: rgba(45,25,40,.94);
  --cloud-surface-raised: rgba(54,29,48,.98);
  --cloud-surface-soft: rgba(245,219,231,.028);
  --cloud-surface-hover: rgba(223,162,188,.055);
  --cloud-surface-active: rgba(223,162,188,.085);
  --cloud-edge: rgba(232,193,211,.10);
  --cloud-edge-strong: rgba(232,193,211,.18);
  --cloud-highlight: rgba(250,225,236,.028);
  --cloud-focus: rgba(223,162,188,.34);
  --cloud-accent-soft: rgba(223,162,188,.075);
  --cloud-accent-border: rgba(223,162,188,.27);
  --cloud-accent-text: #f1cadb;
  --cloud-tag-bg: rgba(192,126,158,.075);
  --cloud-tag-border: rgba(192,126,158,.13);
  --cloud-tag-text: #e8bdd0;
  --cloud-unread: rgba(223,162,188,.075);
  --cloud-own-bubble: #e8b5c9;
  --cloud-own-bubble-text: #2b1521;
  --cloud-chat-bg: #160d15;
  --cloud-danger-soft: rgba(238,129,141,.08);
  --cloud-shadow: 0 23px 65px rgba(9,3,8,.28), inset 0 1px 0 rgba(250,225,236,.024);
  --cloud-shadow-raised: 0 36px 94px rgba(9,3,8,.44), inset 0 1px 0 rgba(250,225,236,.03);
}

/* Shared structural design language for the three new Cloud siblings. */
html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) {
  --shadow: var(--cloud-shadow-raised);
  --shadow-soft: var(--cloud-shadow);
}

/* Header / navigation */
html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) .app-header,
html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) body > header:not(.app-header) {
  border-bottom-color: var(--cloud-edge);
  background:
    linear-gradient(180deg, var(--cloud-highlight), transparent),
    var(--header-bg);
  box-shadow: 0 12px 36px color-mix(in srgb, var(--background-deep) 72%, transparent);
  backdrop-filter: blur(14px) saturate(112%);
  -webkit-backdrop-filter: blur(14px) saturate(112%);
}
html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) :is(.app-brand, .logo) {
  color: var(--text-primary);
}
html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) .topnav-link {
  color: var(--text-secondary);
  transition: color var(--transition), background var(--transition), box-shadow var(--transition), transform var(--transition);
}
html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) .topnav-link:hover {
  color: var(--text-primary);
  background: var(--cloud-surface-hover);
}
html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) .topnav-link.is-active {
  color: var(--text-primary);
  background: var(--cloud-surface-active);
  box-shadow: inset 0 1px 0 var(--cloud-highlight), 0 6px 18px color-mix(in srgb, var(--background-deep) 35%, transparent);
}
html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) .app-search {
  border-color: var(--cloud-edge);
  background: var(--input-background);
  box-shadow: inset 0 1px 0 var(--cloud-highlight);
}
html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) .app-search:hover { border-color: var(--cloud-edge-strong); }
html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) .app-search:focus-within {
  border-color: var(--cloud-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cloud-focus) 16%, transparent), inset 0 1px 0 var(--cloud-highlight);
}

/* Shared surfaces / feed / cards */
html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) :is(
  .card,
  .friends-sidebar-inner,
  .messages-inbox,
  .messages-chat,
  .feed-tag-filter,
  .form-container,
  .profile-summary,
  .quick-create-card,
  .admin-stat-card,
  .admin-panel-card
) {
  border-color: var(--cloud-edge);
  background:
    linear-gradient(150deg, var(--cloud-highlight), transparent 43%),
    var(--cloud-surface);
  box-shadow: var(--cloud-shadow);
}
html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) .card:hover {
  border-color: var(--cloud-edge-strong);
  box-shadow: var(--cloud-shadow-raised);
}
html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) .feed-post {
  border-color: var(--cloud-edge);
  background:
    radial-gradient(ellipse at 92% -8%, var(--cloud-accent-soft), transparent 16rem),
    linear-gradient(150deg, var(--cloud-highlight), transparent 43%),
    var(--cloud-surface);
}
html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) .feed-post:hover {
  border-color: var(--cloud-edge-strong);
  box-shadow: var(--cloud-shadow-raised);
}
html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) :is(
  .post-footer,
  .sidebar-divider,
  .profile-facts > div,
  .public-profile-facts > div,
  .settings-section
) { border-color: var(--border-soft); }
html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) .post-action-button {
  color: var(--text-secondary);
  border-radius: 12px;
  transition: color var(--transition), background var(--transition), transform var(--transition);
}
html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) .post-action-button:hover,
html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) .post-action-button.is-selected {
  color: var(--text-primary);
  background: var(--cloud-surface-hover);
}

/* Typography hierarchy */
html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) :is(
  .feed-intro h1,
  .public-profile-title-row h1,
  .modal-header h2,
  .dating-profile-name,
  .form-intro h1,
  .admin-intro h1
) {
  color: var(--text-primary);
  text-wrap: balance;
}
html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) :is(.sidebar-heading-row h2, .profile-summary h2, .admin-card-heading h2) {
  color: var(--text-primary);
  letter-spacing: -.02em;
}
html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) .eyebrow { color: var(--cloud-accent-text); }

/* Buttons / controls */
html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) .btn {
  border-radius: 15px;
  font-weight: 720;
}
html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) .btn-primary {
  border-color: var(--cloud-accent-border);
  background: linear-gradient(180deg, var(--accent-hover), var(--accent));
  color: var(--accent-contrast);
  box-shadow: 0 9px 24px color-mix(in srgb, var(--background-deep) 55%, transparent), inset 0 1px 0 rgba(255,255,255,.28);
}
html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) .btn-primary:hover {
  border-color: color-mix(in srgb, var(--accent-hover) 60%, white 15%);
  filter: brightness(1.035);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--background-deep) 62%, transparent), inset 0 1px 0 rgba(255,255,255,.34);
}
html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) :is(.btn-secondary, .icon-button, .avatar-button) {
  border-color: var(--cloud-edge);
  background: var(--cloud-surface-soft);
  color: var(--text-primary);
  box-shadow: inset 0 1px 0 var(--cloud-highlight);
}
html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) :is(.btn-secondary, .icon-button, .avatar-button):hover {
  border-color: var(--cloud-edge-strong);
  background: var(--cloud-surface-hover);
}
html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) .btn-danger {
  border-color: color-mix(in srgb, var(--danger) 34%, transparent);
  background: var(--cloud-danger-soft);
}
html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) .btn-danger:hover {
  border-color: color-mix(in srgb, var(--danger) 52%, transparent);
  background: color-mix(in srgb, var(--danger) 13%, transparent);
}
html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) :is(
  .btn,
  .form-control,
  .icon-button,
  .avatar-button,
  .topnav-link,
  .theme-option,
  .person-row,
  .mobile-nav-item,
  .header-profile-menu-item,
  .notification-row
):focus-visible { outline-color: var(--cloud-focus); }

/* Forms */
html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) .form-container {
  border-color: var(--cloud-edge-strong);
  background:
    radial-gradient(ellipse at 86% -6%, var(--cloud-accent-soft), transparent 17rem),
    linear-gradient(150deg, var(--cloud-highlight), transparent 44%),
    var(--cloud-surface-raised);
}
html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) .form-group label {
  color: var(--text-secondary);
  font-weight: 700;
}
html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) :is(.form-control, .chat-input-shell) {
  border-color: var(--cloud-edge);
  border-radius: 15px;
  background: var(--input-background);
  box-shadow: inset 0 1px 0 var(--cloud-highlight);
}
html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) .form-control:hover { border-color: var(--cloud-edge-strong); }
html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) .form-control:focus,
html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) .chat-input-shell:focus-within {
  border-color: var(--cloud-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cloud-focus) 16%, transparent), inset 0 1px 0 var(--cloud-highlight);
}
html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) :is(.form-control::placeholder, .chat-input-shell textarea::placeholder) {
  color: var(--text-muted);
}
html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) :is(.alert, .sidebar-empty) { border-radius: 14px; }

/* Profile */
html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) .public-profile-hero {
  border: 1px solid var(--cloud-edge);
  border-radius: 30px;
  background:
    radial-gradient(ellipse at 88% -5%, var(--cloud-accent-soft), transparent 19rem),
    radial-gradient(ellipse at 4% -9%, color-mix(in srgb, var(--accent-blue) 11%, transparent), transparent 21rem),
    linear-gradient(150deg, var(--cloud-highlight), transparent 44%),
    var(--cloud-surface-raised);
  box-shadow: var(--cloud-shadow);
}
html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) :is(.public-profile-info, .public-profile-details, .public-profile-interests) {
  border-color: var(--cloud-edge);
  background: linear-gradient(150deg, var(--cloud-highlight), transparent 45%), var(--cloud-surface);
}
html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) .public-profile-avatar {
  border-color: var(--cloud-edge-strong);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--background-deep) 48%, transparent), 0 0 0 4px var(--cloud-surface-soft);
}
html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) .public-profile-actions .is-selected {
  border-color: var(--cloud-accent-border);
  background: var(--cloud-accent-soft);
}
html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) .public-profile-metrics { color: var(--text-secondary); }
html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) .public-profile-like-stat:hover { background: var(--cloud-surface-hover); }

/* Messages / inbox */
html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) .conversation-row-shell {
  border: 1px solid transparent;
  border-radius: 16px;
}
html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) :is(.conversation-row-shell:hover, .person-row:hover, .profile-search-item:hover) {
  border-color: var(--cloud-edge);
  background: var(--cloud-surface-hover);
}
html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) :is(.conversation-row-shell.is-active, .conversation-row-shell.is-selected) {
  border-color: var(--cloud-accent-border);
  background: var(--cloud-surface-active);
  box-shadow: inset 2px 0 0 var(--accent);
}
html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) :is(.messages-inbox-heading, .messages-chat-header) {
  border-color: var(--border-soft);
}
html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) .chat-message-list {
  background:
    radial-gradient(ellipse at 18% 0%, var(--cloud-accent-soft), transparent 21rem),
    linear-gradient(180deg, var(--cloud-highlight), transparent 30%),
    var(--cloud-chat-bg);
}
html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) .chat-message-bubble {
  border-color: var(--cloud-edge);
  background: color-mix(in srgb, var(--cloud-surface-raised) 88%, white 3%);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--background-deep) 34%, transparent);
}
html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) .chat-message-row.is-own .chat-message-bubble {
  border-color: var(--cloud-accent-border);
  background: var(--cloud-own-bubble);
  color: var(--cloud-own-bubble-text);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--background-deep) 38%, transparent);
}
html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) :is(.chat-composer, .messages-chat-header) {
  background: var(--cloud-surface-raised);
}
html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) .message-selection-toolbar {
  border-color: var(--cloud-accent-border);
  background: var(--cloud-accent-soft);
}

/* Modals / dropdowns / notifications */
html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) .modal-backdrop {
  background: var(--modal-backdrop);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) :is(
  .modal-card,
  .profile-search-results,
  .header-profile-menu,
  .profile-options-menu,
  .chat-actions-menu,
  .conversation-actions-menu
) {
  border: 1px solid var(--cloud-edge-strong);
  border-radius: 22px;
  background: linear-gradient(145deg, var(--cloud-highlight), transparent 42%), var(--cloud-surface-raised);
  box-shadow: var(--cloud-shadow-raised);
  backdrop-filter: blur(16px) saturate(112%);
  -webkit-backdrop-filter: blur(16px) saturate(112%);
}
html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) .modal-card { border-radius: 26px; }
html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) .modal-header {
  padding-bottom: .85rem;
  border-bottom: 1px solid var(--border-soft);
}
html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) :is(
  .header-profile-menu-item,
  .profile-options-menu button,
  .chat-actions-menu button,
  .conversation-actions-menu button
) {
  border-radius: 11px;
  color: var(--text-secondary);
}
html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) :is(
  .header-profile-menu-item:hover,
  .header-profile-menu-item:focus-visible,
  .profile-options-menu button:hover,
  .chat-actions-menu button:hover,
  .conversation-actions-menu button:hover
) {
  color: var(--text-primary);
  background: var(--cloud-surface-hover);
}
html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) .header-profile-menu-divider { background: var(--border-soft); }
html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) .notifications-modal-card {
  background:
    radial-gradient(ellipse at 92% 0%, var(--cloud-accent-soft), transparent 15rem),
    linear-gradient(145deg, var(--cloud-highlight), transparent 42%),
    var(--cloud-surface-raised);
}
html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) .notification-list { gap: .55rem; }
html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) .notification-row {
  border-color: var(--cloud-edge);
  border-radius: 15px;
  background: var(--cloud-surface-soft);
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) .notification-row:hover {
  border-color: var(--cloud-edge-strong);
  background: var(--cloud-surface-hover);
  transform: translateY(-1px);
}
html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) .notification-row.is-unread {
  border-color: var(--cloud-accent-border);
  background: linear-gradient(90deg, var(--cloud-unread), transparent 62%), var(--cloud-surface-soft);
  box-shadow: inset 2px 0 0 var(--accent);
}
html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) .notification-badge {
  border-color: var(--background-deep);
  background: var(--accent);
  color: var(--accent-contrast);
}
html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) .toast {
  border-color: var(--cloud-edge-strong);
  border-radius: 15px;
  background: var(--cloud-surface-raised);
  box-shadow: var(--cloud-shadow-raised);
}

/* Theme selector / chips */
html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) .theme-option {
  border-color: var(--cloud-edge);
  border-radius: 18px;
  background: var(--cloud-surface-soft);
}
html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) .theme-option:hover {
  border-color: var(--cloud-edge-strong);
  background: var(--cloud-surface-hover);
}
html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) .theme-option.is-selected {
  border-color: var(--cloud-accent-border);
  background: var(--cloud-accent-soft);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cloud-focus) 12%, transparent), inset 0 1px 0 var(--cloud-highlight);
}
html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) :is(.post-tag-badge, .match-badge, .feed-tag-filter-button) {
  border: 1px solid var(--cloud-tag-border);
  border-radius: 10px;
  background: var(--cloud-tag-bg);
  color: var(--cloud-tag-text);
}
html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) :is(.feed-tag-filter-button:hover, .feed-tag-filter-button.is-active) {
  border-color: var(--cloud-accent-border);
  background: var(--cloud-accent-soft);
}

/* Admin inherits the same theme language without layout changes. */
html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) .admin-tabs {
  border-color: var(--cloud-edge);
  border-radius: 16px;
  background: var(--cloud-surface-soft);
}
html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) .admin-tab {
  border-radius: 11px;
  color: var(--text-secondary);
}
html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) .admin-tab:hover { background: var(--cloud-surface-hover); }
html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) .admin-tab.is-active {
  border-color: var(--cloud-accent-border);
  background: var(--cloud-accent-soft);
  color: var(--cloud-accent-text);
}
html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) :is(.admin-report-item, .admin-report-content) {
  border-color: var(--cloud-edge);
  border-radius: 14px;
  background: var(--cloud-surface-soft);
}
html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) :is(.admin-table th, .admin-table td) {
  border-bottom-color: var(--border-soft);
}

/* Theme-specific character beyond palette alone. */
html[data-theme="obsidian-cloud"] :is(.card, .friends-sidebar-inner, .messages-inbox, .messages-chat, .feed-post, .modal-card) {
  backdrop-filter: blur(16px) saturate(108%);
  -webkit-backdrop-filter: blur(16px) saturate(108%);
}
html[data-theme="obsidian-cloud"] .app-brand,
html[data-theme="obsidian-cloud"] .logo { letter-spacing: -.03em; }
html[data-theme="obsidian-cloud"] .btn-primary { background: linear-gradient(180deg, #fafaf8, #e5e5e2); }
html[data-theme="obsidian-cloud"] .public-profile-hero {
  background:
    radial-gradient(ellipse at 86% -8%, rgba(255,255,255,.065), transparent 19rem),
    linear-gradient(145deg, rgba(255,255,255,.03), transparent 44%),
    rgba(22,24,27,.82);
}

html[data-theme="midnight-tundra"] .app-header,
html[data-theme="midnight-tundra"] body > header:not(.app-header) {
  box-shadow: 0 12px 36px rgba(2,8,14,.22), inset 0 -1px 0 rgba(159,219,228,.035);
}
html[data-theme="midnight-tundra"] .public-profile-hero {
  background:
    radial-gradient(ellipse at 86% -6%, rgba(159,219,228,.10), transparent 19rem),
    radial-gradient(ellipse at 5% -8%, rgba(82,126,164,.10), transparent 22rem),
    linear-gradient(150deg, rgba(220,244,247,.026), transparent 44%),
    #102238;
}
html[data-theme="midnight-tundra"] .mobile-create-nav { color: #b9e9ef; }

html[data-theme="velvet-eclipse"] .app-brand,
html[data-theme="velvet-eclipse"] .logo { color: #fbf0f5; }
html[data-theme="velvet-eclipse"] .public-profile-hero {
  background:
    radial-gradient(ellipse at 88% -6%, rgba(223,162,188,.12), transparent 19rem),
    radial-gradient(ellipse at 5% -9%, rgba(133,91,163,.10), transparent 22rem),
    linear-gradient(150deg, rgba(250,225,236,.028), transparent 44%),
    #2a1625;
}
html[data-theme="velvet-eclipse"] .feed-post {
  background:
    radial-gradient(ellipse at 92% -8%, rgba(223,162,188,.07), transparent 16rem),
    linear-gradient(150deg, rgba(250,225,236,.026), transparent 43%),
    var(--cloud-surface);
}
html[data-theme="velvet-eclipse"] .mobile-create-nav { color: #efb9cf; }

/* Selector previews. */
.obsidian-cloud-preview {
  background: linear-gradient(145deg, #34363a, #08090b 66%);
  border-color: rgba(255,255,255,.30);
  box-shadow: inset 0 -10px 0 rgba(255,255,255,.12), inset 0 1px 0 rgba(255,255,255,.16);
}
.midnight-tundra-preview {
  background: linear-gradient(145deg, #274966, #081523 65%);
  border-color: rgba(159,219,228,.43);
  box-shadow: inset 0 -10px 0 rgba(159,219,228,.22), inset 0 1px 0 rgba(220,244,247,.10);
}
.velvet-eclipse-preview {
  background: linear-gradient(145deg, #5b2d49, #170c15 65%);
  border-color: rgba(223,162,188,.43);
  box-shadow: inset 0 -10px 0 rgba(223,162,188,.22), inset 0 1px 0 rgba(250,225,236,.10);
}

/* Mobile navigation / responsive finish. */
@media (max-width: 850px) {
  html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) .app-header {
    border-bottom-color: var(--cloud-edge);
    background: var(--header-bg);
  }
  html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) .mobile-bottom-nav {
    border: 1px solid var(--cloud-edge);
    border-bottom: 0;
    background: linear-gradient(180deg, var(--cloud-highlight), transparent), var(--cloud-surface-raised);
    box-shadow: 0 -14px 36px color-mix(in srgb, var(--background-deep) 55%, transparent), inset 0 1px 0 var(--cloud-highlight);
    backdrop-filter: blur(16px) saturate(112%);
    -webkit-backdrop-filter: blur(16px) saturate(112%);
  }
  html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) .mobile-nav-item {
    border-radius: 13px;
    color: var(--text-muted);
  }
  html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) .mobile-nav-item:hover {
    color: var(--text-primary);
    background: var(--cloud-surface-hover);
  }
  html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) .mobile-nav-item.is-active {
    color: var(--text-primary);
    background: var(--cloud-surface-active);
    box-shadow: inset 0 1px 0 var(--cloud-highlight);
  }
  html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) :is(.modal-card, .settings-modal-card, .notifications-modal-card) {
    border-radius: 22px 22px 16px 16px;
  }
}

@media (max-width: 560px) {
  html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) .feed-post { border-radius: 22px; }
  html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) .public-profile-hero { border-radius: 24px; }
  html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) .modal-card { border-radius: 20px 20px 14px 14px; }
  html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) :is(.form-container, .card, .friends-sidebar-inner) { border-radius: 22px; }
  html:is([data-theme="obsidian-cloud"], [data-theme="midnight-tundra"], [data-theme="velvet-eclipse"]) .btn { border-radius: 13px; }
}

/* Readable opaque fallback when backdrop-filter is unavailable. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-theme="obsidian-cloud"] :is(.app-header, body > header:not(.app-header), .mobile-bottom-nav) { background: #111214; }
  html[data-theme="midnight-tundra"] :is(.app-header, body > header:not(.app-header), .mobile-bottom-nav) { background: #0b1b2b; }
  html[data-theme="velvet-eclipse"] :is(.app-header, body > header:not(.app-header), .mobile-bottom-nav) { background: #24131f; }
}

/* =========================================================
   V2.6.97 – Feed Algorithm & Latest Fix
   Mixed-feed recommendation cards + Admin Algorithm controls
   ========================================================= */
.feed-recommendation-card {
  display: grid;
  gap: .8rem;
  padding: 1rem 1.05rem;
  overflow: hidden;
}
.feed-recommendation-eyebrow { color: var(--primary); }
.feed-recommendation-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .9rem;
  min-width: 0;
}
.feed-recommendation-avatar {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-strong, var(--surface));
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  font-weight: 800;
}
.feed-recommendation-avatar img { width: 100%; height: 100%; object-fit: cover; }
.feed-recommendation-copy { min-width: 0; }
.feed-recommendation-copy h2 { margin: 0 0 .2rem; font-size: 1rem; line-height: 1.2; overflow-wrap: anywhere; }
.feed-recommendation-copy p { margin: 0; color: var(--text-muted); font-size: .86rem; line-height: 1.4; }
.feed-image-activity-card { gap: .65rem; }
.feed-image-activity-media {
  width: 100%;
  max-height: 440px;
  object-fit: contain;
  border-radius: calc(var(--radius, 16px) * .75);
  background: rgba(0,0,0,.16);
  border: 1px solid var(--border);
  cursor: pointer;
}

.algorithm-subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: .85rem;
}
.algorithm-subtabs .admin-subtab {
  appearance: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-muted);
  padding: .55rem .9rem;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.algorithm-subtabs .admin-subtab:hover { color: var(--text-primary); border-color: var(--primary); }
.algorithm-subtabs .admin-subtab.is-active { color: var(--button-text, #fff); background: var(--primary); border-color: var(--primary); }
.algorithm-grid { align-items: start; }
.algorithm-toggle-list { display: grid; gap: .55rem; }
.algorithm-number-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.algorithm-number-grid > label { display: grid; gap: .38rem; min-width: 0; color: var(--text-muted); font-size: .82rem; font-weight: 700; }
.algorithm-summary { display: grid; gap: .3rem; }
.algorithm-summary > div { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid var(--border); }
.algorithm-summary > div:last-of-type { border-bottom: 0; }
.algorithm-summary p { color: var(--text-muted); margin: .7rem 0 0; max-width: 72ch; }
#algo-discovery { width: 100%; }

@media (max-width: 700px) {
  .feed-recommendation-row { grid-template-columns: auto minmax(0, 1fr); }
  .feed-recommendation-row > .btn { grid-column: 1 / -1; width: 100%; }
  .feed-recommendation-avatar { width: 52px; height: 52px; }
  .algorithm-number-grid { grid-template-columns: 1fr; }
  .algorithm-subtabs { width: 100%; }
  .algorithm-subtabs .admin-subtab { flex: 1 1 120px; }
}

/* =========================================================
   V2.6.98 – Dating Page Layout & Card Editor
   Layout is configuration-driven; theme tokens remain the visual source of truth.
   ========================================================= */
.dating-shell {
  width: min(var(--dating-container-max, 1240px), calc(100% - (2 * var(--dating-side-padding, 16px))));
  max-width: 100%;
  padding-top: var(--dating-vertical-spacing, 16px);
  box-sizing: border-box;
}
.dating-profile-grid,
.dating-preview-profile-grid {
  display: grid;
  grid-template-columns: repeat(var(--dating-columns, 4), var(--dating-card-track, minmax(0, 1fr)));
  gap: var(--dating-gap, 16px);
  min-width: 0;
  width: 100%;
  justify-content: center;
  align-items: stretch;
  box-sizing: border-box;
}
[data-dating-align="left"] .dating-profile-grid,
[data-dating-align="left"] .dating-preview-profile-grid { justify-content: start; }

.dating-profile-card {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  max-width: 100%;
  min-height: var(--dating-card-min-height, 0px);
  overflow: hidden;
  padding: 0;
  border-width: var(--dating-border-width, 1px);
  border-style: solid;
  border-color: var(--border);
  border-radius: var(--dating-card-radius, var(--radius));
  background: color-mix(in srgb, var(--surface) var(--dating-card-opacity, 100%), transparent);
  box-sizing: border-box;
  isolation: isolate;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
[data-dating-shadow="none"] .dating-profile-card { box-shadow: none; }
[data-dating-shadow="soft"] .dating-profile-card { box-shadow: 0 8px 24px color-mix(in srgb, #000 12%, transparent); }
[data-dating-shadow="medium"] .dating-profile-card { box-shadow: 0 14px 36px color-mix(in srgb, #000 20%, transparent); }
[data-dating-shadow="strong"] .dating-profile-card { box-shadow: 0 20px 52px color-mix(in srgb, #000 28%, transparent); }
.dating-profile-card.is-clickable { cursor: pointer; }
.dating-profile-card.is-clickable:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

.dating-profile-media {
  position: relative;
  display: grid;
  width: 100%;
  min-width: 0;
  height: var(--dating-media-height, auto);
  aspect-ratio: var(--dating-media-aspect, 4 / 5);
  overflow: hidden;
  border-radius: var(--dating-image-radius, 0px) var(--dating-image-radius, 0px) 0 0;
  background: linear-gradient(145deg, var(--surface-secondary), var(--accent-soft));
  text-decoration: none;
}
.dating-profile-image {
  width: 100%;
  height: 100%;
  min-width: 0;
  object-fit: var(--dating-image-fit, cover);
  object-position: var(--dating-image-position, 50% 50%);
  display: block;
  transition: transform var(--transition);
}
.dating-profile-card-body {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: start;
  gap: var(--dating-info-gap, 12px);
  min-width: 0;
  padding: var(--dating-card-padding, 16px);
  box-sizing: border-box;
}
.dating-profile-heading-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .38rem;
  min-width: 0;
}
.dating-profile-heading-row .dating-profile-name { flex: 0 1 auto; }
.dating-profile-card[data-username-mode="wrap"] .dating-profile-name {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
}
.dating-card-badge { max-width: 100%; }
.dating-card-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
  min-width: 0;
}
.dating-card-badges-top-right,
.dating-card-badges-image-overlay {
  position: absolute;
  z-index: 5;
  top: .65rem;
  right: .65rem;
  max-width: calc(100% - 1.3rem);
  justify-content: flex-end;
}
.dating-card-badges-info { margin-top: -.15rem; }
.dating-match-reason {
  width: fit-content;
  max-width: 100%;
  padding: .28rem .55rem;
  border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 9%, transparent);
  color: var(--text-secondary);
  font-size: .72rem;
  font-weight: 750;
}
.dating-presence-label {
  position: absolute;
  left: .58rem;
  bottom: .58rem;
  z-index: 4;
  padding: .28rem .5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  color: var(--text-secondary);
  font-size: .68rem;
  font-weight: 800;
  backdrop-filter: blur(8px);
}
.dating-presence-label.is-online { color: var(--success, #68d391); }

.dating-info-rotator { min-width: 0; }
.dating-info-rotator.is-static { display: grid; gap: var(--dating-info-gap, 12px); }
.dating-info-rotator.is-rotating {
  display: grid;
  min-width: 0;
  cursor: pointer;
}
.dating-info-rotator.is-rotating .dating-info-slide {
  grid-area: 1 / 1;
  min-width: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--dating-transition-ms, 400ms) ease,
    transform var(--dating-transition-ms, 400ms) ease,
    visibility 0s linear var(--dating-transition-ms, 400ms);
}
.dating-info-rotator.is-rotating .dating-info-slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
[data-dating-animation="slide"] .dating-info-rotator.is-rotating .dating-info-slide { transform: translateY(7px); }
[data-dating-animation="slide"] .dating-info-rotator.is-rotating .dating-info-slide.is-active { transform: translateY(0); }
.dating-info-text-slide { display: grid; gap: .35rem; min-width: 0; }
.dating-info-text-slide strong { color: var(--text-secondary); font-size: .72rem; }
.dating-info-text-slide p { margin: 0; color: var(--text-primary); font-size: .82rem; line-height: 1.45; overflow-wrap: anywhere; }
.dating-interest-tags { display: flex; flex-wrap: wrap; gap: .35rem; min-width: 0; }
.dating-interest-tag {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  padding: .26rem .48rem;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: var(--surface-secondary);
  color: var(--text-secondary);
  font-size: .7rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dating-interest-tag.is-shared {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--border));
  background: color-mix(in srgb, var(--primary) 10%, var(--surface-secondary));
  color: var(--text-primary);
}
.dating-interest-tag.is-shared::after { content: " · Gemensamt"; color: var(--primary); font-size: .64rem; }

.dating-profile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  min-width: 0;
  padding-top: .15rem;
}
.dating-profile-actions .btn { flex: 1 1 108px; min-width: 0; }
.dating-profile-actions .dating-favorite-action.is-selected { border-color: color-mix(in srgb, var(--heart) 50%, var(--border)); color: var(--heart); }
.dating-load-more-wrap { display: flex; justify-content: center; margin: var(--dating-vertical-spacing, 16px) 0 0; }

[data-dating-full-background="true"] .dating-profile-card {
  min-height: max(var(--dating-card-min-height, 0px), 360px);
  grid-template-rows: minmax(0, 1fr);
  background: var(--surface);
}
[data-dating-full-background="true"] .dating-profile-media {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: inherit;
}
[data-dating-full-background="true"] .dating-profile-card-body {
  align-self: end;
  min-height: 45%;
  color: var(--text-primary);
  background: linear-gradient(to top, color-mix(in srgb, var(--background) var(--dating-overlay-strength, 60%), transparent), transparent);
  text-shadow: 0 1px 12px color-mix(in srgb, #000 35%, transparent);
}
[data-dating-info-overlay="true"] .dating-profile-card:not(.has-dating-media) .dating-profile-card-body { background: transparent; }
[data-dating-info-overlay="true"] .dating-profile-card.has-dating-media:not([data-no-overlay]) {
  grid-template-rows: minmax(0, 1fr);
  min-height: max(var(--dating-card-min-height, 0px), 340px);
}
[data-dating-info-overlay="true"] .dating-profile-card.has-dating-media .dating-profile-media {
  grid-area: 1 / 1;
  min-height: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: inherit;
}
[data-dating-info-overlay="true"] .dating-profile-card.has-dating-media .dating-profile-card-body {
  grid-area: 1 / 1;
  align-self: end;
  background: linear-gradient(to top, color-mix(in srgb, var(--background) var(--dating-overlay-strength, 60%), transparent), transparent 90%);
}
[data-dating-overlay-position="full"] .dating-profile-card-body {
  background: linear-gradient(to top, color-mix(in srgb, var(--background) var(--dating-overlay-strength, 60%), transparent), color-mix(in srgb, var(--background) 18%, transparent));
}

@media (hover: hover) and (pointer: fine) {
  [data-dating-hover="lift"] .dating-profile-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
  [data-dating-hover="scale"] .dating-profile-card:hover { transform: scale(1.015); z-index: 2; }
  [data-dating-hover="image-zoom"] .dating-profile-card:hover .dating-profile-image { transform: scale(1.035); }
  [data-dating-hover="border-highlight"] .dating-profile-card:hover { border-color: color-mix(in srgb, var(--primary) 58%, var(--border)); }
}

.dating-quick-profile-card { width: min(520px, calc(100vw - 1.2rem)); }
.dating-quick-facts dd { white-space: normal; text-align: right; }

/* Admin Dating editor */
.dating-admin-subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: .85rem;
}
.dating-admin-subtabs .admin-subtab {
  appearance: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-muted);
  padding: .55rem .9rem;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.dating-admin-subtabs .admin-subtab:hover { color: var(--text-primary); border-color: var(--primary); }
.dating-admin-subtabs .admin-subtab.is-active { color: var(--button-text, #fff); background: var(--primary); border-color: var(--primary); }
.dating-admin-grid { align-items: start; }
.dating-admin-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dating-admin-form-grid > .form-group,
.dating-admin-form-grid > label { min-width: 0; }
.dating-admin-form-grid .form-group > span:first-child { display: inline-flex; align-items: center; gap: .35rem; color: var(--text-muted); font-size: .78rem; font-weight: 720; }
.dating-admin-toggle-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.dating-admin-toggle-list { display: grid; gap: .55rem; margin-bottom: 1rem; }
.admin-muted-copy { margin: .4rem 0 0; color: var(--text-muted); font-size: .8rem; line-height: 1.45; }
.dating-admin-form-grid input[type="range"] { width: 100%; }
.dating-admin-form-grid output { display: inline-block; margin-top: .2rem; color: var(--text-muted); font-size: .76rem; }
.dating-admin-preview-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, .7fr); gap: 1rem; align-items: start; }
.dating-admin-preview-grid h3 { margin: 0 0 .55rem; font-size: .9rem; }
.dating-preview-frame {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  padding: var(--dating-side-padding, 16px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--background);
  box-sizing: border-box;
}
.dating-preview-frame.is-mobile { margin-inline: auto; }
.dating-preview-frame .dating-profile-card { font-size: .85rem; }
.dating-preview-frame .dating-profile-actions .btn { pointer-events: none; padding: .55rem .65rem; font-size: .72rem; }
.dating-preview-frame .dating-profile-image-fallback { min-height: 150px; }
.dating-admin-actionbar {
  position: sticky;
  bottom: max(.5rem, env(safe-area-inset-bottom));
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: 1rem;
  padding: .75rem;
  border: 1px solid var(--border);
  border-radius: .9rem;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 36px color-mix(in srgb, #000 20%, transparent);
}
.dating-admin-actionbar strong { color: var(--text-muted); font-size: .82rem; }
.dating-admin-actionbar strong.is-dirty { color: var(--warning, #f6c177); }
.dating-admin-actionbar-buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .45rem; }

@media (max-width: 850px) {
  .dating-admin-form-grid,
  .dating-admin-toggle-grid,
  .dating-admin-preview-grid { grid-template-columns: 1fr; }
  .dating-admin-subtabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .2rem; }
  .dating-admin-subtabs .admin-subtab { flex: 0 0 auto; }
  .dating-admin-actionbar { align-items: stretch; flex-direction: column; }
  .dating-admin-actionbar-buttons { justify-content: stretch; }
  .dating-admin-actionbar-buttons .btn { flex: 1 1 140px; }
}

@media (max-width: 560px) {
  .dating-shell { width: min(var(--dating-container-max, 760px), calc(100% - (2 * var(--dating-side-padding, 10px)))); }
  .dating-profile-card-body { padding: var(--dating-card-padding, 10px); gap: var(--dating-info-gap, 8px); }
  .dating-profile-actions .btn { min-height: 42px; flex-basis: 100%; }
  .dating-card-badges-top-right, .dating-card-badges-image-overlay { top: .45rem; right: .45rem; }
  .dating-admin-actionbar-buttons { display: grid; grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .dating-profile-card,
  .dating-profile-image,
  .dating-info-slide { transition-duration: 1ms !important; animation: none !important; }
}
/* V2.7.0.0 – shared Admin contextual help alignment */
.admin-page .ai-personality-help-target,
.admin-page .ai-help-label-row {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* Nested labels keep the setting name + help together, with the control below. */
.admin-page .ai-help-label-row {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .35rem;
  width: fit-content;
}
.admin-page .ai-help-label-row > .ai-field-help,
.admin-page .ai-field-label > .ai-field-help,
#admin-panel-ai-agent :is(legend, h3, h4, .eyebrow).ai-personality-help-target > .ai-field-help,
#admin-panel-ai-agent .ai-field-label.ai-personality-help-target > .ai-field-help,
#admin-panel-ai-agent .ai-help-label-row.ai-personality-help-target > .ai-field-help,
#admin-panel-ai-agent .toggle-row > span.ai-personality-help-target > .ai-field-help {
  margin-inline-start: 0;
}

/* Normal labels/headings keep the help control directly after their text. */
.admin-page :is(label, h1, h2, h3, h4, legend, th, strong, span):not(.ai-help-action-pair):not(.ai-help-control-wrap) > .ai-field-help {
  margin-inline-start: .35rem;
  vertical-align: middle;
}

/* Toggle help belongs to the toggle text, not to the opposite card edge. */
.admin-page .toggle-row > span.ai-personality-help-target {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .35rem;
  min-width: 0;
  max-width: 100%;
}
.admin-page .toggle-row > span.ai-personality-help-target > .ai-field-help {
  margin-inline-start: 0;
}

/* Preserve legitimate action/control special cases while keeping their help compact. */
.admin-page .ai-help-action-pair,
.admin-page .ai-help-control-wrap {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.admin-page .ai-help-action-pair > .ai-field-help,
.admin-page .ai-help-control-wrap > .ai-field-help {
  margin-inline-start: 0;
}

@media (max-width: 430px) {
  .admin-page .ai-help-label-row,
  .admin-page .toggle-row > span.ai-personality-help-target {
    gap: .3rem;
  }
}


/* =========================================================
   V2.7.0.1 – Dating Mobile & Profile Interests Polish
   Presentation/runtime safeguards only; no matching/profile business logic.
   ========================================================= */
.dating-admin-actionbar-summary {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-width: 0;
}
.dating-admin-actionbar-summary strong {
  min-width: 0;
  overflow-wrap: anywhere;
}
.dating-admin-actionbar-toggle {
  appearance: none;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-secondary);
  color: var(--text-secondary);
  font: inherit;
  font-size: 1rem;
  font-weight: 850;
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.dating-admin-actionbar-toggle:hover { border-color: var(--primary); color: var(--text-primary); }
.dating-admin-actionbar-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.dating-admin-actionbar.is-collapsed {
  padding: .5rem .65rem;
  gap: .4rem;
}
.dating-admin-actionbar.is-collapsed .dating-admin-actionbar-summary { width: 100%; justify-content: space-between; }
.dating-admin-actionbar-buttons[hidden] { display: none !important; }

.public-profile-interests-compact {
  display: grid;
  gap: .55rem;
  align-items: start;
  margin-top: 1rem;
  padding: .8rem 1rem;
  min-width: 0;
  min-height: 0;
}
.public-profile-interests-compact .public-profile-interests-heading {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .35rem .65rem;
  min-width: 0;
}
.public-profile-interests-compact .public-profile-interests-heading .eyebrow { margin: 0; }
.public-profile-interests-compact h2 {
  margin: 0;
  font-size: .98rem;
  line-height: 1.25;
}
.public-profile-interests-compact .profile-interest-picker {
  min-width: 0;
  max-width: 100%;
  gap: .42rem;
}
.public-profile-interests-compact .profile-interest-chip {
  flex: 0 1 auto;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.public-profile-grid { align-items: start; }

@media (max-width: 850px) {
  .dating-admin-actionbar-summary { width: 100%; justify-content: space-between; }
  .dating-admin-actionbar.is-collapsed { flex-direction: row; align-items: center; }
}

@media (max-width: 560px) {
  .dating-admin-actionbar { max-width: 100%; box-sizing: border-box; }
  .dating-admin-actionbar.is-collapsed { padding: .45rem .55rem; }
  .public-profile-interests-compact { padding: .72rem .78rem; gap: .48rem; }
  .public-profile-interests-compact .profile-interest-chip { padding: .44rem .6rem; }
}
.admin-page #admin-panel-dating .form-group.is-setting-disabled {
  opacity: .62;
}
.admin-page #admin-panel-dating .form-group.is-setting-disabled .form-control:disabled {
  cursor: not-allowed;
}
.public-profile-interests-compact[hidden] { display: none !important; }

/* =========================================================
   V2.7.0.2 – Dating Mobile, Animations & Global Help Fix
   ========================================================= */
.dating-shell[data-dating-animation="fade"] .dating-info-rotator.is-rotating,
.dating-shell[data-dating-animation="slide"] .dating-info-rotator.is-rotating,
.dating-preview-frame[data-dating-animation="fade"] .dating-info-rotator.is-rotating,
.dating-preview-frame[data-dating-animation="slide"] .dating-info-rotator.is-rotating {
  isolation: isolate;
}
.dating-animation-note {
  margin: .75rem 0 0;
  color: var(--text-muted);
  font-size: .78rem;
  line-height: 1.45;
}
.dating-animation-note[hidden] { display: none !important; }


/* V2.7.0.2: animation type `none` still rotates information, but without a visual transition. */
[data-dating-animation="none"] .dating-info-rotator.is-rotating .dating-info-slide {
  transition: none !important;
  transform: none !important;
}

/* =========================================================
   V2.7.0.3 – Dating Information Rotation Runtime Fix
   ========================================================= */
.dating-info-rotator.is-rotating {
  position: relative;
  isolation: isolate;
}
.dating-info-rotator.is-rotating .dating-info-slide {
  position: relative;
  z-index: 0;
  will-change: opacity, transform;
  backface-visibility: hidden;
}
.dating-info-rotator.is-rotating .dating-info-slide.is-active {
  z-index: 1;
}

/* =========================================================
   V2.7.0.4 – Messaging & Global UX Polish
   ========================================================= */

/* Global user-facing scrollbar visibility. Scrolling remains enabled. */
html.hide-platform-scrollbar {
  scrollbar-width: none;
}
html.hide-platform-scrollbar::-webkit-scrollbar,
html.hide-platform-scrollbar body.app-page:not(.admin-page)::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}
html.hide-platform-scrollbar body.app-page:not(.admin-page) .messages-thread,
html.hide-platform-scrollbar body.app-page:not(.admin-page) .messages-conversation-list {
  scrollbar-width: none;
}
html.hide-platform-scrollbar body.app-page:not(.admin-page) .messages-thread::-webkit-scrollbar,
html.hide-platform-scrollbar body.app-page:not(.admin-page) .messages-conversation-list::-webkit-scrollbar {
  display: none;
}

/* Theme editor saved/current/built-in color references. */
.admin-theme-color-reference {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .55rem;
  margin-top: .42rem;
  color: var(--text-secondary);
  font-size: .68rem;
}
.admin-theme-color-reference-item {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  padding: .22rem .42rem;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--surface-secondary) 82%, transparent);
}
.admin-theme-color-reference-item strong { color: var(--text-secondary); font-size: .64rem; }
.admin-theme-color-reference-item code { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); }
.admin-theme-reference-swatch { width: 12px; height: 12px; flex: 0 0 12px; border: 1px solid var(--border); border-radius: 50%; }
.admin-theme-reference-swatch.is-invalid { background: transparent !important; }

.privacy-toggle-list { display: grid; gap: .65rem; margin-top: .8rem; }
.privacy-toggle-list .toggle-row { align-items: flex-start; }
.privacy-toggle-list .toggle-row > span { display: grid; gap: .18rem; }
.privacy-toggle-list .toggle-row small { color: var(--text-secondary); font-weight: 500; line-height: 1.4; }

/* Messages: stable two-pane hierarchy, compact rows, resilient text wrapping. */
.messages-shell {
  grid-template-columns: minmax(270px, 320px) minmax(0, 1fr);
  align-items: stretch;
  gap: 1rem;
}
.messages-inbox,
.messages-chat { border-color: var(--border-soft); }
.messages-inbox { overflow: hidden; }
.messages-conversation-list { padding: .12rem; }
.conversation-row-shell { min-height: 72px; }
.conversation-main-button { min-height: 70px; width: 100%; padding: .58rem .42rem .58rem .62rem; }
.conversation-copy { min-width: 0; overflow: hidden; }
.conversation-headline { min-width: 0; display: flex; align-items: baseline; gap: .45rem; }
.conversation-headline strong { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversation-time { flex: 0 0 auto; white-space: nowrap; }
.conversation-preview,
.conversation-presence { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversation-row-shell.is-active { background: color-mix(in srgb, var(--accent-soft) 58%, var(--surface-secondary)); }
.conversation-row-shell.has-unread:not(.is-active) { background: color-mix(in srgb, var(--accent-soft) 32%, transparent); }
.messages-chat-header { border-bottom: 1px solid var(--border-soft); }
.messages-chat-header .chat-header-copy { min-width: 0; }
.messages-chat-header .chat-header-copy strong,
.messages-chat-header .chat-header-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.messages-thread { display: flex; flex-direction: column; gap: .62rem; scroll-padding-block: 1rem; }
.chat-message-row { min-width: 0; align-items: flex-end; gap: .42rem; }
.chat-message-row.is-grouped { margin-top: -.42rem; }
.chat-message-row.is-grouped .chat-message-avatar { visibility: hidden; }
.chat-message-row.is-grouped.is-own .chat-message-bubble { border-top-right-radius: 10px; }
.chat-message-row.is-grouped.is-other .chat-message-bubble { border-top-left-radius: 10px; }
.message-bubble-actions-layout { min-width: 0; max-width: min(78%, 720px); }
.chat-message-bubble { min-width: 0; max-width: 100%; padding: .62rem .78rem .42rem; }
.chat-message-bubble p { margin: 0; line-height: 1.48; overflow-wrap: anywhere; word-break: break-word; }
.chat-message-meta { opacity: .82; }
.messages-composer { border-top: 1px solid var(--border-soft); padding: .75rem; gap: .65rem; }
.messages-composer .chat-input-shell { min-width: 0; }
.messages-composer textarea { min-height: 44px; max-height: 140px; resize: vertical; overflow-x: hidden; }
.messages-composer .chat-send-button { min-height: 44px; align-self: end; }
.messages-empty-chat { min-height: min(540px, calc(100dvh - 170px)); }

/* Album gallery strip collapse. */
.profile-album-gallery-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  min-height: 32px;
  padding: 0 .15rem;
}
.profile-album-gallery-toggle { width: 30px; height: 30px; min-width: 30px; font-size: 1.1rem; }
.profile-album-panel.is-gallery-collapsed .profile-album-thumbnails { display: none !important; }
.profile-album-panel.is-gallery-collapsed .profile-album-stage,
.profile-album-panel.is-gallery-collapsed .profile-album-media { min-height: min(68dvh, 680px); max-height: 72dvh; }
.profile-album-panel.is-gallery-collapsed .profile-album-media img { max-height: 72dvh; }

@media (max-width: 850px) {
  .messages-shell { display: block; width: min(100% - 1rem, 760px); min-height: calc(100dvh - 145px); }
  .messages-inbox { position: static; max-height: none; width: 100%; }
  .messages-shell:not(.is-mobile-chat-open) .messages-chat { display: none; }
  .messages-shell.is-mobile-chat-open .messages-inbox { display: none; }
  .messages-shell.is-mobile-chat-open .messages-chat { display: grid; width: 100%; min-height: calc(100dvh - 145px); }
  .messages-chat-active { min-height: calc(100dvh - 145px); grid-template-rows: auto auto minmax(0, 1fr) auto auto; }
  .messages-thread { min-height: 0; max-height: none; padding: .9rem .7rem; }
  .message-bubble-actions-layout { max-width: min(88%, 650px); }
  .messages-composer { position: sticky; bottom: calc(64px + env(safe-area-inset-bottom)); padding: .62rem; }
  .profile-album-panel.is-gallery-collapsed .profile-album-stage,
  .profile-album-panel.is-gallery-collapsed .profile-album-media { min-height: min(72dvh, 620px); max-height: 75dvh; }
  .profile-album-panel.is-gallery-collapsed .profile-album-media img { max-height: 75dvh; }
}

@media (max-width: 430px) {
  .conversation-row-shell { min-height: 68px; }
  .conversation-main-button { min-height: 66px; gap: .55rem; padding-inline: .5rem .25rem; }
  .message-bubble-actions-layout { max-width: 92%; }
  .chat-message-bubble { padding: .58rem .68rem .4rem; }
  .messages-composer { grid-template-columns: minmax(0, 1fr) auto; }
  .messages-composer .chat-send-button { padding-inline: .8rem; }
  .admin-theme-color-reference { display: grid; grid-template-columns: 1fr; }
  .admin-theme-color-reference-item { width: 100%; }
}

/* =========================================================
   V2.7.0.5 – Messages App-Shell & Scrollbar Polish
   ========================================================= */

/* Hide scrollbar chrome for every scroll container on authenticated
   user-facing surfaces while preserving scrolling itself. Admin/editor
   pages remain excluded for usability. */
html.hide-platform-scrollbar,
html.hide-platform-scrollbar body.app-page:not(.admin-page),
html.hide-platform-scrollbar body.app-page:not(.admin-page) * {
  scrollbar-width: none !important;
  -ms-overflow-style: none;
}
html.hide-platform-scrollbar::-webkit-scrollbar,
html.hide-platform-scrollbar body.app-page:not(.admin-page)::-webkit-scrollbar,
html.hide-platform-scrollbar body.app-page:not(.admin-page) *::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

/* Messages is an app shell, not a document-length page. The fixed header
   is already accounted for by .app-page padding-top, so the body content
   box becomes the available messages viewport. */
.messages-page {
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
}
.messages-page .messages-shell {
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: .8rem 1rem 1rem;
  display: grid;
  grid-template-columns: clamp(270px, 22vw, 340px) minmax(0, 1fr);
  gap: .8rem;
  align-items: stretch;
  overflow: hidden;
}
.messages-page .messages-inbox,
.messages-page .messages-chat {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-height: none;
  align-self: stretch;
  position: static;
  overflow: hidden;
}
.messages-page .messages-inbox {
  display: flex;
  flex-direction: column;
}
.messages-page .messages-inbox-heading {
  flex: 0 0 auto;
}
.messages-page .messages-conversation-list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.messages-page .messages-chat {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  padding: 0;
}
.messages-page .messages-empty-chat {
  width: 100%;
  height: 100%;
  min-height: 0;
}
.messages-page .messages-chat-active {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
}
.messages-page .messages-chat-header {
  position: relative;
  top: auto;
  flex: 0 0 auto;
}
.messages-page .messages-thread {
  min-width: 0;
  min-height: 0;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.messages-page .messages-composer {
  position: relative;
  bottom: auto;
  min-width: 0;
}

@media (max-width: 1050px) and (min-width: 851px) {
  .messages-page .messages-shell {
    grid-template-columns: clamp(250px, 26vw, 300px) minmax(0, 1fr);
    padding-inline: .7rem;
    gap: .65rem;
  }
}

@media (max-width: 850px) {
  .messages-page {
    /* Generic mobile app padding reserves the fixed header and bottom nav.
       Keep that reservation inside the fixed viewport rather than extending
       the document and creating an outer scrollbar. */
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
  }
  .messages-page .messages-shell {
    width: 100%;
    max-width: none;
    height: 100%;
    min-height: 0;
    padding: .5rem;
    display: block;
    overflow: hidden;
  }
  .messages-page .messages-inbox,
  .messages-page .messages-chat,
  .messages-page .messages-chat-active {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
  }
  .messages-page .messages-shell:not(.is-mobile-chat-open) .messages-inbox {
    display: flex;
  }
  .messages-page .messages-shell.is-mobile-chat-open .messages-chat {
    display: grid;
    min-height: 0;
  }
  .messages-page .messages-conversation-list {
    max-height: none;
    overflow-y: auto;
  }
  .messages-page .messages-thread {
    min-height: 0;
    max-height: none;
    overflow-y: auto;
  }
  .messages-page .messages-composer {
    position: relative;
    bottom: auto;
  }
}

@media (max-width: 560px) {
  .messages-page .messages-shell { padding: .3rem; }
}

/* =========================================================
   V2.7.0.6 – Messages, Settings Overlay & Dating Stability Fix
   ========================================================= */

/* Hide scrollbar chrome on every authenticated scroll container, including
   Admin, overlays and nested sidebars. Overflow behavior itself is unchanged. */
html.hide-platform-scrollbar,
html.hide-platform-scrollbar * {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
html.hide-platform-scrollbar::-webkit-scrollbar,
html.hide-platform-scrollbar *::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

/* The active conversation is one vertical flex workspace. Hidden/empty utility
   rows do not reserve space; the thread owns all remaining height. */
.messages-page .messages-chat-active {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.messages-page .messages-chat-active[hidden] { display: none !important; }
.messages-page .messages-chat-header,
.messages-page .message-item-selection-toolbar,
.messages-page .messages-composer {
  flex: 0 0 auto;
}
.messages-page .messages-thread {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: auto;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
}
.messages-page #messages-alert:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
.messages-page .messages-composer {
  position: relative;
  inset: auto;
  min-height: 0;
  height: auto;
  align-self: stretch;
}
.messages-page .messages-composer .post-reply-composer-reference[hidden] { display: none !important; }

/* Rotating Dating information reserves the tallest enabled slide for each card.
   JS sets min-height after layout and only remeasures when the card width changes. */
.dating-info-rotator.is-rotating {
  align-self: stretch;
  box-sizing: border-box;
}



/* =========================================================
   V2.7.0.8 – Messages Header & Conversation Layout Polish
   ========================================================= */

/* Compact the DM-only participant header. The shared chat header remains
   untouched elsewhere on the platform. */
.messages-page .messages-chat-header {
  min-height: 58px;
  padding: .48rem .7rem;
  gap: .58rem;
  border-bottom-color: color-mix(in srgb, var(--border-soft) 84%, transparent);
}
.messages-page .messages-chat-header .chat-person-button {
  min-height: 42px;
  gap: .58rem;
  padding: .14rem .26rem;
  border-radius: 12px;
}
.messages-page .messages-chat-header .chat-header-avatar {
  width: 39px;
  height: 39px;
  flex-basis: 39px;
}
.messages-page .messages-chat-header .chat-header-copy {
  gap: .08rem;
  line-height: 1.18;
}
.messages-page .messages-chat-header .chat-header-copy strong { font-size: .92rem; }
.messages-page .messages-chat-header .chat-header-copy small { font-size: .7rem; }
.messages-page .messages-chat-header .chat-more-button {
  min-width: 38px;
  width: 38px;
  min-height: 38px;
  height: 38px;
  padding: 0;
}

/* The scroll container stays the same, but its content gets a minimum-height
   flow. Short conversations settle naturally toward the composer; long ones
   grow beyond 100% and continue to scroll normally. */
.messages-page .messages-thread {
  display: block;
  padding: 0;
  scroll-padding-block: 1rem;
}
.messages-page .messages-thread-flow {
  box-sizing: border-box;
  min-height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: .62rem;
  padding: clamp(1rem, 2.2vh, 1.5rem) clamp(.78rem, 1.35vw, 1.2rem) 1rem;
}
.messages-page .messages-thread-flow > .chat-empty-state { margin: auto; }

/* Day boundaries read as part of the timeline instead of a floating badge. */
.messages-page .chat-date-divider {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(24px, 1fr) auto minmax(24px, 1fr);
  align-items: center;
  gap: .68rem;
  margin: .78rem 0 .34rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: .66rem;
  font-weight: 760;
  line-height: 1;
  letter-spacing: .015em;
}
.messages-page .chat-date-divider::before,
.messages-page .chat-date-divider::after {
  content: '';
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--border) 70%, transparent));
}
.messages-page .chat-date-divider::after {
  background: linear-gradient(90deg, color-mix(in srgb, var(--border) 70%, transparent), transparent);
}
.messages-page .chat-date-divider-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 25px;
  padding: .26rem .6rem;
  border: 1px solid color-mix(in srgb, var(--border-soft) 82%, transparent);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--surface-elevated) 88%, transparent);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--background-deep) 9%, transparent);
  white-space: nowrap;
}
.messages-page .chat-date-divider:first-child { margin-top: .1rem; }

/* Keep a little breathing room between day groups and message groups without
   changing bubble ownership, quoted replies, timestamps or send state. */
.messages-page .chat-date-divider + .chat-message-row { margin-top: .08rem; }

@media (max-width: 850px) {
  .messages-page .messages-chat-header {
    min-height: 54px;
    padding: .4rem .5rem;
    gap: .42rem;
  }
  .messages-page .messages-chat-header .chat-person-button { gap: .48rem; padding-inline: .12rem; }
  .messages-page .messages-chat-header .chat-header-avatar {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }
  .messages-page .messages-chat-header .chat-more-button {
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
  }
  .messages-page .messages-thread-flow {
    padding: .85rem .68rem .8rem;
    gap: .58rem;
  }
  .messages-page .chat-date-divider { gap: .5rem; margin-block: .62rem .28rem; }
}

/* =========================================================
   V2.7.0.9 – Mobile Messages Bottom Gap Fix
   ========================================================= */

@media (max-width: 850px) {
  /* Messages previously reserved 90px + safe-area below the app shell while
     the fixed bottom nav is only ~66px tall. Reserve exactly the nav height,
     its safe bottom offset and a tiny non-overlap gap instead. */
  .messages-page {
    --messages-mobile-nav-height: 66px;
    --messages-mobile-nav-bottom: max(.7rem, env(safe-area-inset-bottom, 0px));
    --messages-mobile-nav-gap: .2rem;
    padding-bottom: calc(
      var(--messages-mobile-nav-height) +
      var(--messages-mobile-nav-bottom) +
      var(--messages-mobile-nav-gap)
    );
  }

  /* Keep the fixed nav clear of an iPhone home indicator. safe-area is
     consumed here once and the body reserve above mirrors the same value. */
  html .messages-page .mobile-bottom-nav {
    bottom: var(--messages-mobile-nav-bottom);
  }

  /* Do not add a second visual gutter inside the already-reserved body area. */
  .messages-page .messages-shell {
    padding-bottom: 0;
  }
}

@media (max-width: 560px) {
  .messages-page .messages-shell {
    padding-bottom: 0;
  }
}


/* =========================================================
   V2.7.0.10 – Messages Date Separator Position Fix
   ========================================================= */

/* Short DM histories were bottom-aligning the entire timeline flow, which also
   pushed the first day divider far away from the compact header. Anchor the
   timeline at the top with a small controlled gap. The existing thread remains
   the scroll container, so long-conversation scrolling/composer behavior stays
   unchanged. */
.messages-page .messages-thread-flow {
  justify-content: flex-start;
  padding-top: clamp(.62rem, 1.35vh, .88rem);
}
.messages-page .chat-date-divider:first-child {
  margin-top: 0;
  margin-bottom: .32rem;
}

@media (max-width: 850px) {
  .messages-page .messages-thread-flow {
    padding-top: clamp(.46rem, 1.05vh, .68rem);
  }
  .messages-page .chat-date-divider:first-child {
    margin-top: 0;
    margin-bottom: .26rem;
  }
}

/* V2.7.0.11 – Social Posts & Reactions */
.social-post-card {
  display: grid;
  gap: 12px;
  overflow: visible;
}
.social-post-header,
.social-post-author,
.social-post-name-line,
.social-post-footer,
.social-post-quick-main,
.social-post-editor-author,
.social-post-comment-top {
  display: flex;
  align-items: center;
}
.social-post-header { justify-content: space-between; gap: 12px; }
.social-post-author { gap: 10px; min-width: 0; color: var(--text-primary); text-decoration: none; }
.social-post-avatar,
.social-comment-avatar {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 50%;
  background: var(--surface-secondary);
  border: 1px solid var(--border-soft);
}
.social-post-avatar { width: 42px; height: 42px; }
.social-comment-avatar { width: 32px; height: 32px; }
.social-post-avatar img,
.social-comment-avatar img { width: 100%; height: 100%; object-fit: cover; }
.social-post-author-copy { display: grid; gap: 2px; min-width: 0; }
.social-post-name-line { gap: 7px; min-width: 0; }
.social-post-name-line strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.social-post-author-copy > small,
.social-post-comment-top small { color: var(--text-muted); }
.social-post-role-badge,
.social-post-ai-badge {
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--text-secondary);
  font-size: .7rem;
}
.social-post-options-wrap { position: relative; flex: 0 0 auto; }
.social-post-options-menu {
  position: absolute;
  z-index: 25;
  right: 0;
  top: calc(100% + 6px);
  min-width: 170px;
  padding: 6px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: var(--surface-elevated);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .22);
}
.social-post-options-menu button {
  display: block;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}
.social-post-options-menu button:hover { background: var(--accent-soft); }
.social-post-body {
  margin: 0;
  color: var(--text-primary);
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
/* V2.7.0.28 – Feed/Profile List framing restored to the V2.7.0.26 presentation.
   Feed cells may have intentional filler/background; opened viewer is borderless and uses contain. */
.social-post-media-grid {
  display: grid;
  gap: 3px;
  overflow: hidden;
  border-radius: 14px;
  background: var(--surface-secondary);
}
.social-post-media-1 { grid-template-columns: 1fr; }
.social-post-media-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.social-post-media-3 { grid-template-columns: 1.3fr 1fr; grid-template-rows: repeat(2, 180px); }
.social-post-media-3 .social-post-image-button:first-child { grid-row: 1 / span 2; }
.social-post-media-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, 220px); }
.social-post-image-button {
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  background: var(--surface-secondary);
  cursor: zoom-in;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* V2.7.0.26 – Feed/List media must show the complete attached image.
   Multi-image posts keep their stable grid cells, but the original media is
   fitted inside each cell instead of being cropped with cover. */
.social-post-image-button img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 520px;
  min-height: 180px;
  object-fit: contain;
  object-position: center;
}
/* A single image is not forced into the old 16:10 crop box. Preserve its
   natural aspect ratio and only scale it down to the available feed space. */
.social-post-media-1 .social-post-image-button img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(72dvh, 720px);
  min-height: 0;
  aspect-ratio: auto;
  object-fit: contain;
}
.social-post-video-wrap { overflow: hidden; border-radius: 14px; background: rgb(0, 0, 0); }
.social-post-video { display: block; width: 100%; max-height: min(68vh, 620px); background: rgb(0, 0, 0); }
.social-post-reactions { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.social-post-reaction-summary { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.social-post-reaction-chip,
.social-post-add-reaction,
.social-post-picker-reaction,
.social-post-comment-toggle,
.social-post-comment-action {
  border: 1px solid var(--border-soft);
  background: var(--surface-secondary);
  color: var(--text-secondary);
  cursor: pointer;
}
.social-post-reaction-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 32px;
  padding: 4px 9px;
  border-radius: 999px;
}
.social-post-reaction-chip.is-selected { border-color: var(--accent); background: var(--accent-soft); color: var(--text-primary); }
.social-reaction-visual { display: inline-grid; place-items: center; font-size: 1.35rem; line-height: 1; }
.social-reaction-visual.is-compact { font-size: 1.05rem; }
.social-reaction-visual img { width: 24px; height: 24px; object-fit: contain; }
.social-reaction-visual.is-compact img { width: 18px; height: 18px; }
.social-post-reaction-picker-wrap { position: relative; }
.social-post-add-reaction { min-height: 32px; padding: 4px 10px; border-radius: 999px; }
.social-post-reaction-picker {
  position: absolute;
  z-index: 24;
  right: 0;
  bottom: calc(100% + 8px);
  display: flex;
  gap: 5px;
  max-width: min(360px, 86vw);
  padding: 8px;
  overflow-x: auto;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: var(--surface-elevated);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .22);
}
.social-post-picker-reaction { display: inline-grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; padding: 0; border-radius: 50%; }
.social-post-footer { justify-content: space-between; border-top: 1px solid var(--border-soft); padding-top: 9px; }
.social-post-comment-toggle,
.social-post-comment-action { padding: 7px 10px; border-radius: 9px; }
.social-post-comment-action { border-color: transparent; background: transparent; }
.social-post-direct-reply { display: grid; gap: 8px; padding-top: 8px; border-top: 1px solid var(--border-soft); }
.social-post-direct-reply[hidden] { display: none !important; }
.social-post-direct-reply-label { color: var(--text-secondary); font-size: .86rem; }
.social-post-reply-action { padding: 7px 10px; border-radius: 9px; border: 1px solid transparent; background: transparent; color: var(--text-secondary); cursor: pointer; }
.social-post-reply-action:hover { background: var(--surface-secondary); color: var(--text-primary); }
.social-post-comments { display: grid; gap: 10px; padding-top: 2px; }
.social-post-comments-list { display: grid; gap: 10px; max-height: 360px; overflow-y: auto; }
.social-post-comment { display: flex; align-items: flex-start; gap: 9px; }
.social-post-comment-copy { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 12px; background: var(--surface-secondary); }
.social-post-comment-top { justify-content: space-between; gap: 8px; }
.social-post-comment-top a { color: var(--text-primary); font-weight: 700; text-decoration: none; }
.social-post-comment-copy p { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.social-post-comment-actions { display: flex; gap: 10px; margin-top: 5px; }
.social-post-comment-actions button { padding: 0; border: 0; background: transparent; color: var(--text-muted); cursor: pointer; font-size: .78rem; }
.social-post-comment-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.social-post-quick-composer { margin-bottom: 16px; padding: 12px 14px; gap: 9px; }
.social-post-quick-main { width: 100%; gap: 10px; padding: 0; border: 0; background: transparent; color: var(--text-secondary); text-align: left; cursor: pointer; }
.social-post-quick-main > span:last-child { flex: 1; padding: 10px 13px; border: 1px solid var(--border-soft); border-radius: 999px; background: var(--surface-secondary); }
.social-post-quick-actions { display: flex; justify-content: flex-end; gap: 7px; }
.social-post-quick-actions button { padding: 6px 9px; border: 0; border-radius: 8px; background: transparent; color: var(--text-secondary); cursor: pointer; }
.social-post-quick-actions button:hover { background: var(--accent-soft); }
.social-create-choice-backdrop,
.social-post-editor-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0, 0, 0, .58);
  backdrop-filter: blur(8px);
}
.social-create-choice-backdrop[hidden],
.social-post-editor-backdrop[hidden] { display: none !important; }
.social-create-choice,
.social-post-editor {
  width: min(560px, 100%);
  max-height: min(90vh, 760px);
  overflow-y: auto;
  border: 1px solid var(--border-soft);
  border-radius: 20px;
  background: var(--surface-elevated);
  color: var(--text-primary);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .32);
}
.social-create-choice { display: grid; gap: 10px; padding: 18px; width: min(430px, 100%); }
.social-create-choice header,
.social-post-editor-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.social-create-choice h2,
.social-post-editor h2 { margin: 2px 0 0; }
.social-create-choice-card { display: grid; gap: 4px; padding: 15px; border: 1px solid var(--border-soft); border-radius: 14px; background: var(--surface-secondary); color: var(--text-primary); text-align: left; cursor: pointer; }
.social-create-choice-card span { color: var(--text-secondary); }
.social-create-choice-card:hover { border-color: var(--accent); background: var(--accent-soft); }
.social-create-choice-card:disabled { opacity: .48; cursor: not-allowed; }
.social-post-editor { padding: 18px; }
.social-post-editor-author { gap: 10px; margin: 14px 0 10px; }
.social-post-editor-author > div { display: grid; gap: 2px; }
.social-post-editor-author small { color: var(--text-muted); }
.social-post-editor-form { display: grid; gap: 10px; }
.social-post-editor-text { resize: vertical; min-height: 150px; max-height: 360px; }
.social-post-editor-counter { text-align: right; color: var(--text-muted); font-size: .8rem; }
.social-post-editor-add-row { display: flex; gap: 8px; flex-wrap: wrap; }
.social-post-editor-preview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.social-post-editor-preview img,
.social-post-editor-preview video { width: 100%; max-height: 240px; object-fit: cover; border-radius: 10px; background: rgb(0, 0, 0); }
.social-overlay-open { overflow: hidden; }
.social-reactors-popover {
  position: fixed;
  z-index: 1300;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  gap: 8px;
  width: min(340px, calc(100vw - 32px));
  max-height: 70vh;
  overflow-y: auto;
  padding: 16px;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: var(--surface-elevated);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .4);
}
.social-reactor-row { display: flex; align-items: center; gap: 9px; color: var(--text-primary); text-decoration: none; }
.public-profile-social-posts { margin-top: 22px; }
.admin-social-post-filters { display: grid; grid-template-columns: minmax(180px, 1fr) 180px auto; gap: 8px; }
.admin-social-post-tabs { margin-bottom: 14px; }
.social-post-settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.admin-social-reaction-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border-soft); }
.admin-social-reaction-main { display: flex; align-items: center; gap: 9px; min-width: 0; }
.admin-social-reaction-main img { width: 26px; height: 26px; object-fit: contain; }

@media (max-width: 850px) {
  /* V2.7.0.25 – let the post author's username stay readable on narrow cards.
     Badges may wrap, but the username itself is no longer forced into ellipsis. */
  .social-post-header { align-items: flex-start; }
  .social-post-author { flex: 1 1 auto; max-width: calc(100% - 44px); }
  .social-post-author-copy { width: 100%; }
  .social-post-name-line { flex-wrap: wrap; align-items: center; row-gap: 4px; }
  .social-post-name-line strong {
    max-width: 100%;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
  }
  .social-post-options-wrap { margin-top: 1px; }
}

@media (max-width: 850px) {
  .social-create-choice-backdrop { align-items: end; padding: 0; }
  .social-create-choice { width: 100%; max-width: none; border-radius: 20px 20px 0 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); }
  .social-post-editor-backdrop { padding: 0; }
  .social-post-editor { width: 100%; height: 100%; max-height: none; border-radius: 0; padding: max(14px, env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom)); }
  .social-post-media-3 { grid-template-rows: repeat(2, 130px); }
  .social-post-media-4 { grid-template-rows: repeat(2, 150px); }
  .social-post-image-button img { min-height: 140px; }
  .social-post-media-1 .social-post-image-button img { min-height: 0; max-height: min(68dvh, 620px); }
  .social-post-reaction-picker { left: 0; right: auto; }
  .social-post-comment-form { grid-template-columns: minmax(0, 1fr); }
  .social-post-comment-form .btn { justify-self: end; }
  .admin-social-post-filters,
  .social-post-settings-grid { grid-template-columns: 1fr; }
}
@media (min-width: 851px) {
  .social-create-choice-backdrop {
    place-items: start end;
    padding: 72px 18px 18px;
    background: transparent;
    backdrop-filter: none;
  }
  .social-create-choice { margin-right: clamp(120px, 10vw, 220px); box-shadow: 0 18px 48px rgba(0, 0, 0, .3); }
}
.social-post-tier-badge,
.social-post-verified-badge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 1px 6px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  color: var(--text-secondary);
  font-size: .68rem;
  font-weight: 750;
}
.social-post-verified-badge { color: var(--accent); border-color: var(--accent); padding-inline: 5px; }

.social-reaction-admin-preview {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: var(--surface-secondary);
  color: var(--text-primary);
}
.social-reaction-admin-preview > span { font-size: 1.35rem; line-height: 1; }
.social-reaction-admin-preview img { width: 26px; height: 26px; object-fit: contain; }
@media (max-width: 850px) {
  .admin-social-reaction-row { grid-template-columns: auto minmax(0, 1fr); }
  .admin-social-reaction-row > .admin-report-actions { grid-column: 1 / -1; }
}

/* V2.7.0.12 – Post Tags, Unified Reactions & Profile Views */
.feed-tag-filter {
  padding: .68rem .78rem;
  margin-bottom: .72rem;
}
.feed-tag-filter-heading { margin-bottom: .42rem; }
.feed-tag-filter-options { display: grid; gap: .42rem; }
.feed-tag-filter-group {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: .55rem;
  min-width: 0;
}
.feed-tag-filter-group-label {
  color: var(--text-muted);
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.feed-tag-filter-chip-row {
  display: flex;
  gap: .38rem;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding-block: 1px;
}
.feed-tag-filter-button { flex: 0 0 auto; padding: .38rem .62rem; }

.social-post-editor-tags {
  display: grid;
  gap: .48rem;
  min-width: 0;
  margin: 0;
  padding: .7rem;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: var(--surface-secondary);
}
.social-post-editor-tags[hidden] { display: none !important; }
.social-post-editor-tags legend { padding: 0 .25rem; color: var(--text-secondary); font-size: .8rem; font-weight: 800; }
.social-post-editor-tag-options { display: flex; flex-wrap: wrap; gap: .4rem; }
.social-post-tag-choice { position: relative; display: inline-flex; cursor: pointer; }
.social-post-tag-choice input { position: absolute; opacity: 0; pointer-events: none; }
.social-post-tag-chip {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: .3rem .58rem;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: var(--surface-secondary);
  color: var(--text-secondary);
  font-size: .72rem;
  font-weight: 760;
  line-height: 1;
}
.social-post-tag-choice input:checked + .social-post-tag-chip {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--border-soft));
  background: var(--accent-soft);
  color: var(--accent);
}
.social-post-tag-row { display: flex; flex-wrap: wrap; gap: .35rem; }

.profile-post-view-toggle { display: inline-flex; gap: .3rem; align-items: center; }
.profile-post-view-toggle .icon-button { width: 34px; height: 34px; min-width: 34px; }
.profile-post-view-toggle .icon-button.is-active {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border-soft));
  background: var(--accent-soft);
  color: var(--accent);
}
.profile-social-post-grid {
  display: grid !important;
  grid-template-columns: repeat(var(--profile-post-grid-desktop, 3), minmax(0, 1fr));
  gap: var(--profile-post-grid-gap, 8px) !important;
}
.profile-social-post-grid-tile {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 145px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: 13px;
  background: var(--surface-secondary);
  color: var(--text-primary);
  text-decoration: none;
}
.profile-social-post-grid-tile > img,
.profile-social-post-grid-link > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.profile-grid-video-placeholder { display: grid; place-items: center; align-content: center; gap: .35rem; min-height: 100%; background: var(--surface-secondary); }
.profile-grid-video-placeholder > span { font-size: 1.7rem; }
.profile-grid-text-preview { margin: 0; padding: .85rem; align-self: stretch; overflow: hidden; overflow-wrap: anywhere; font-size: .83rem; line-height: 1.42; }
.profile-grid-media-count,
.profile-grid-post-meta {
  position: absolute;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-elevated) 88%, transparent);
  color: var(--text-primary);
  backdrop-filter: blur(6px);
  font-size: .68rem;
  font-weight: 800;
}
.profile-grid-media-count { top: 7px; right: 7px; padding: .26rem .44rem; }
.profile-grid-post-meta { left: 7px; right: 7px; bottom: 7px; width: max-content; max-width: calc(100% - 14px); padding: .28rem .46rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.admin-settings-divider { margin-top: .45rem; padding-top: .7rem; border-top: 1px solid var(--border-soft); color: var(--text-secondary); }
.admin-social-tag-list { display: grid; }
.admin-social-tag-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .65rem;
  padding: .65rem 0;
  border-bottom: 1px solid var(--border-soft);
}
.admin-social-tag-row > div:nth-child(2) { display: grid; gap: .12rem; min-width: 0; }
.social-post-tag-admin-icon { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--border-soft); border-radius: 10px; background: var(--surface-secondary); }

@media (max-width: 700px) {
  .feed-tag-filter { padding: .6rem .66rem; }
  .feed-tag-filter-group { grid-template-columns: 1fr; gap: .25rem; }
  .feed-tag-filter-chip-row { margin-inline: -.08rem; padding-bottom: .15rem; }
  .profile-social-post-grid { grid-template-columns: repeat(var(--profile-post-grid-mobile, 2), minmax(0, 1fr)); }
  .profile-social-post-grid-tile { min-height: 0; border-radius: 10px; }
  .profile-grid-text-preview { padding: .68rem; font-size: .76rem; }
  .admin-social-tag-row { grid-template-columns: auto minmax(0, 1fr); }
  .admin-social-tag-row > .admin-report-actions { grid-column: 1 / -1; }
}
.profile-grid-video-placeholder { position: relative; overflow: hidden; }
.profile-grid-video-placeholder > video { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.profile-grid-video-play { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: color-mix(in srgb, var(--surface-elevated) 82%, transparent); color: var(--text-primary); font-size: 1.05rem; box-shadow: 0 6px 18px rgba(0,0,0,.22); }

/* V2.7.0.14 – Advertisement reactions replace the legacy Like action in-place. */
.post-actions .advertisement-reactions-inline {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: .35rem;
  flex: 0 1 auto;
  min-width: 0;
}
.post-actions .advertisement-reactions-inline .social-post-reaction-summary {
  gap: .3rem;
}
.post-actions .advertisement-reactions-inline .social-post-reaction-chip,
.post-actions .advertisement-reactions-inline .social-post-add-reaction {
  min-height: 32px;
  padding: .34rem .52rem;
}
.post-actions .advertisement-reactions-inline .social-post-reaction-chip {
  gap: .28rem;
}
.post-actions .advertisement-reactions-inline .social-post-reaction-picker-wrap[hidden] {
  display: none !important;
}
@media (max-width: 850px) {
  .post-actions.has-advertisement-reactions { flex-wrap: wrap; }
  .post-actions .advertisement-reactions-inline {
    max-width: 100%;
    flex-wrap: wrap;
  }
  .post-actions .advertisement-reactions-inline .social-post-reaction-summary {
    max-width: 100%;
  }
}

/* =========================================================
   V2.7.0.15 – Login Remember Device
   ========================================================= */
.auth-remember-row {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin: .05rem 0 .15rem;
  color: var(--text-secondary);
  font-size: .86rem;
  cursor: pointer;
}
.auth-remember-row input { width: 18px; height: 18px; accent-color: var(--primary); }
.auth-remember-help { display: block; margin: -.05rem 0 .7rem; color: var(--text-muted); line-height: 1.4; }
.auth-remember-row[hidden], .auth-remember-row[hidden] + .auth-remember-help { display: none !important; }

/* V2.7.0.15 – stable initial Feed controls + fresh-content reveal */
.feed-tag-filter.is-loading { min-height: 5.25rem; }
.feed-tag-filter.is-loading .feed-tag-filter-heading button { visibility: hidden; }
.feed-tag-filter-placeholder { display:inline-block; width:7rem; height:1.85rem; border-radius:var(--radius-pill); background:var(--surface-secondary); opacity:.66; }
.feed-tag-filter-placeholder.is-short { width:5rem; }
.feed-post.is-newly-published, .social-post-card.is-newly-published { animation: v27015FreshReveal .45s ease both; }
@keyframes v27015FreshReveal { from { opacity:.72; transform:translateY(-6px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) { .feed-post.is-newly-published, .social-post-card.is-newly-published { animation:none; } }

.profile-save-state { font-size:.8rem; font-weight:750; color:var(--text-secondary); text-align:right; min-height:1.25rem; }
.profile-save-state.is-dirty { color:var(--warning, var(--accent)); }
#save-profile-button.has-unsaved-changes { box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }

/* V2.7.0.16 – Social Post NSFW safety + compact Admin presence status. */
.social-post-nsfw-choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: .65rem;
  padding: .72rem .8rem;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-secondary) 86%, transparent);
  color: var(--text-secondary);
}
.social-post-nsfw-choice input { margin-top: .18rem; }
.social-post-nsfw-choice span { display: grid; gap: .18rem; min-width: 0; line-height: 1.38; }
.social-post-nsfw-choice strong { color: var(--text-primary); }
.social-post-nsfw-badge {
  display: inline-flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  padding: .2rem .48rem;
  border: 1px solid color-mix(in srgb, var(--accent) 36%, var(--border-soft));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-soft) 72%, var(--surface-secondary));
  color: var(--text-primary);
  font-size: .68rem;
  font-weight: 850;
  line-height: 1.2;
  letter-spacing: .02em;
  white-space: nowrap;
}
.social-post-media-grid,
.social-post-video-wrap { position: relative; }
.social-post-media-grid.is-nsfw-hidden .social-post-image-button,
.social-post-video-wrap.is-nsfw-hidden .social-post-video,
.profile-social-post-grid-tile.is-nsfw-hidden .profile-social-post-grid-link {
  filter: blur(18px);
  transform: scale(1.035);
  pointer-events: none;
  user-select: none;
}
.social-post-nsfw-cover,
.profile-grid-nsfw-cover {
  position: absolute;
  z-index: 8;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: .45rem;
  padding: 1rem;
  background: color-mix(in srgb, var(--surface-elevated) 72%, transparent);
  color: var(--text-primary);
  text-align: center;
  backdrop-filter: blur(5px);
}
.social-post-nsfw-cover small { max-width: 30rem; color: var(--text-secondary); line-height: 1.4; }
.profile-social-post-grid-link { position: relative; display: grid; min-width: 0; min-height: 100%; color: inherit; text-decoration: none; }
.profile-grid-nsfw-badge { position: absolute; z-index: 9; top: 7px; left: 7px; }
.profile-grid-nsfw-cover { z-index: 8; gap: .55rem; padding: .65rem; }
.profile-grid-nsfw-cover .compact-button { min-height: 34px; padding-inline: .7rem; }
.admin-presence-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  width: max-content;
  max-width: 100%;
  color: var(--text-secondary);
  font-size: .78rem;
  white-space: nowrap;
}
.admin-presence-pill.is-online { color: var(--text-primary); font-weight: 760; }
.admin-presence-pill.is-online::before {
  content: '';
  width: .48rem;
  height: .48rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

@media (max-width: 700px) {
  .social-post-nsfw-cover { padding: .75rem; }
  .social-post-nsfw-cover small { font-size: .78rem; }
  .profile-grid-nsfw-badge { top: 5px; left: 5px; font-size: .62rem; }
  .profile-grid-nsfw-cover { padding: .45rem; }
  .profile-grid-nsfw-cover .compact-button { min-height: 32px; font-size: .72rem; }
}

/* V2.7.0.17 — Premium launch status */
.admin-page .premium-system-status {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  gap: .75rem;
  align-items: center;
  margin: 1rem 0;
  padding: .9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-soft);
}
.admin-page .premium-system-message { grid-column: 1 / -2; color: var(--text-secondary); font-size: .9rem; }
@media (max-width: 760px) {
  .admin-page .premium-system-status { grid-template-columns: 1fr; }
  .admin-page .premium-system-message { grid-column: auto; }
}

/* V2.7.0.24 – Social Post lightbox rebuilt around a bounded Album-style panel.
   Feed/Profile thumbnails may crop. Opened media is measured against the actual
   stage and always rendered whole, centered and without automatic upscaling. */
.social-post-media-viewer {
  position: fixed;
  inset: 0;
  z-index: 1250;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100dvh;
  min-height: 0;
  padding:
    max(12px, env(safe-area-inset-top))
    max(12px, env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom))
    max(12px, env(safe-area-inset-left));
  overflow: hidden;
  background: rgba(0, 0, 0, .90);
  color: rgb(255, 255, 255);
  backdrop-filter: blur(8px);
  overscroll-behavior: contain;
}
.social-post-media-viewer[hidden] { display: none !important; }

.social-media-viewer-panel {
  position: relative;
  width: min(1180px, 100%);
  height: min(880px, 100%);
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: minmax(0, 1fr) auto auto;
  gap: 9px;
  padding: 14px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.social-media-viewer-close {
  position: absolute;
  z-index: 4;
  top: 10px;
  right: 10px;
  color: rgb(255, 255, 255);
  background: rgba(0, 0, 0, .58);
  border-color: rgba(255, 255, 255, .26);
}

.social-media-viewer-main {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  align-items: stretch;
  gap: 10px;
  overflow: hidden;
}

.social-media-viewer-stage {
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  touch-action: pan-y pinch-zoom;
}

.social-media-viewer-image-frame {
  position: relative;
  flex: 0 0 auto;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
}
#social-media-viewer-stage .social-media-viewer-image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  user-select: none;
  -webkit-user-drag: none;
  animation: social-media-viewer-image-in .14s ease-out;
}
.social-media-viewer-image-overlay {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  display: grid;
  gap: 8px;
  width: max-content;
  max-width: min(calc(100vw - 48px), 720px);
  pointer-events: none;
}
.social-media-viewer-image-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  max-width: 100%;
  padding: 7px 9px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(10,10,12,.72);
  box-shadow: 0 8px 30px rgba(0,0,0,.28);
  backdrop-filter: blur(14px);
  pointer-events: auto;
}
.social-media-viewer-image-actions .social-post-reactions {
  display: contents;
}
.social-media-viewer-image-actions .social-post-reaction-summary {
  flex-wrap: nowrap;
  max-width: min(42vw, 360px);
  overflow-x: auto;
}
.social-media-viewer-image-actions .social-post-reaction-chip,
.social-media-viewer-image-actions .social-post-add-reaction {
  color: #fff;
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
}
.social-media-viewer-image-actions .social-post-reaction-chip.is-selected {
  color: #fff;
  background: color-mix(in srgb, var(--accent) 34%, rgba(255,255,255,.10));
  border-color: color-mix(in srgb, var(--accent) 76%, white 10%);
}
.social-media-viewer-image-actions .social-post-reaction-picker {
  background: rgba(10,10,12,.94);
  border-color: rgba(255,255,255,.2);
}
.social-media-viewer-overlay-action {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 5px 10px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  color: #fff;
  background: rgba(255,255,255,.10);
  cursor: pointer;
}
.social-media-viewer-overlay-action:hover { background: rgba(255,255,255,.18); }
.social-media-viewer-direct-reply { display: grid; gap: 10px; width: 100%; }
.social-media-viewer-direct-reply textarea,
.social-post-direct-reply textarea { width: 100%; resize: vertical; min-height: 92px; }
.social-media-viewer-direct-reply-actions,
.social-post-direct-reply-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* V2.7.0.31 – Instagram-inspired response sidecar.
   The viewer stays image-first until Svara is pressed; then this neutral panel
   slides in from the image's right side without replacing or covering Admin UI. */
.social-media-viewer-sidecar {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: stretch;
  width: 0;
  min-width: 0;
  min-height: 0;
  margin-left: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 0 solid rgba(255,255,255,.12);
  border-radius: 16px;
  background: rgba(31, 32, 35, .98);
  color: #f7f7f8;
  box-shadow: 0 18px 55px rgba(0,0,0,.38);
  opacity: 0;
  transform: translateX(26px);
  pointer-events: none;
  transition: width .22s ease, margin-left .22s ease, opacity .18s ease, transform .22s ease, border-width .22s ease;
}
.social-media-viewer-sidecar.is-open {
  width: min(390px, 36vw);
  margin-left: 12px;
  border-width: 1px;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
.social-media-viewer-panel.is-sidecar-open > .social-media-viewer-close {
  right: calc(min(390px, 36vw) + 24px);
}
.social-media-viewer-sidecar-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 58px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.social-media-viewer-sidecar-author {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #fff;
  text-decoration: none;
}
.social-media-viewer-sidecar-author > span:last-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.social-media-viewer-sidecar-author strong,
.social-media-viewer-sidecar-author small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.social-media-viewer-sidecar-author small { color: rgba(255,255,255,.58); }
.social-media-viewer-sidecar-avatar {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.10);
}
.social-media-viewer-sidecar-avatar img { width: 100%; height: 100%; object-fit: cover; }
.social-media-viewer-sidecar-close {
  flex: 0 0 auto;
  color: #fff;
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.16);
}
.social-media-viewer-sidecar-caption {
  flex: 0 0 auto;
  max-height: 150px;
  overflow: auto;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.social-media-viewer-sidecar-caption strong { display: block; margin-bottom: 5px; }
.social-media-viewer-sidecar-caption p { margin: 0; color: rgba(255,255,255,.88); white-space: pre-wrap; overflow-wrap: anywhere; }
.social-media-viewer-sidecar-tabs {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.social-media-viewer-sidecar-tab {
  flex: 1 1 0;
  min-width: 0;
  min-height: 36px;
  padding: 7px 9px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 9px;
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.68);
  cursor: pointer;
  font: inherit;
}
.social-media-viewer-sidecar-tab:hover,
.social-media-viewer-sidecar-tab:focus-visible,
.social-media-viewer-sidecar-tab.is-active {
  color: #fff;
  background: rgba(255,255,255,.13);
  border-color: rgba(255,255,255,.22);
}
.social-media-viewer-sidecar-tab:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.social-media-viewer-sidecar-content {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  padding: 12px;
  overflow: hidden;
}
.social-media-viewer-sidecar-content > .social-post-comments {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
}
.social-media-viewer-sidecar-content .social-post-comments-list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  padding-right: 2px;
}
.social-media-viewer-sidecar-content .social-post-comment-copy { background: rgba(255,255,255,.07); }
.social-media-viewer-sidecar-content .social-post-comment-top a,
.social-media-viewer-sidecar-content .social-post-comment-copy p { color: #fff; }
.social-media-viewer-sidecar-content .social-post-comment-top small,
.social-media-viewer-sidecar-content .social-post-comment-actions button,
.social-media-viewer-sidecar-content .social-comments-empty { color: rgba(255,255,255,.55); }
.social-media-viewer-sidecar-content .social-post-comment-form { flex: 0 0 auto; }
.social-media-viewer-sidecar-content .form-control {
  color: #fff;
  background: rgba(8,8,10,.62);
  border-color: rgba(255,255,255,.17);
}
.social-media-viewer-sidecar-content .form-control::placeholder { color: rgba(255,255,255,.48); }
.social-media-viewer-respond-action::after { content: "›"; margin-left: 7px; transform: none; }
.social-media-viewer-respond-action[aria-expanded="true"]::after { transform: rotate(180deg); }

.social-media-viewer-prev,
.social-media-viewer-next {
  position: static;
  align-self: center;
  justify-self: center;
  transform: none;
  width: 46px;
  min-width: 46px;
  height: 56px;
  color: rgb(255, 255, 255);
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .18);
  font-size: 2rem;
}
.social-media-viewer-prev { grid-column: 1; }
.social-media-viewer-stage { grid-column: 2; }
.social-media-viewer-next { grid-column: 3; }

.social-media-viewer-count {
  grid-column: 1;
  grid-row: 2;
  justify-self: center;
  min-height: 1.35rem;
  color: rgb(255, 255, 255);
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
}

.social-media-viewer-thumbnails {
  grid-column: 1;
  grid-row: 3;
  display: flex;
  justify-content: center;
  gap: 7px;
  width: 100%;
  max-width: min(92vw, 880px);
  min-height: 0;
  margin: 0 auto;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px;
  scrollbar-width: thin;
  overscroll-behavior-inline: contain;
}
.social-media-viewer-thumbnails[hidden] { display: none !important; }
.social-media-viewer-thumb {
  flex: 0 0 54px;
  width: 54px;
  height: 54px;
  padding: 2px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 9px;
  background: rgba(0,0,0,.35);
  cursor: pointer;
  opacity: .72;
}
.social-media-viewer-thumb.is-active {
  opacity: 1;
  border-color: rgba(255,255,255,.92);
  box-shadow: 0 0 0 2px rgba(255,255,255,.12);
}
.social-media-viewer-thumb:focus-visible,
.social-media-viewer-prev:focus-visible,
.social-media-viewer-next:focus-visible,
.social-media-viewer-close:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.social-media-viewer-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}

@keyframes social-media-viewer-image-in {
  from { opacity: .45; transform: translateY(2px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 850px) {
  .social-post-media-viewer {
    padding:
      max(6px, env(safe-area-inset-top))
      max(6px, env(safe-area-inset-right))
      max(6px, env(safe-area-inset-bottom))
      max(6px, env(safe-area-inset-left));
  }
  .social-media-viewer-panel {
    width: 100%;
    height: 100%;
    padding: 8px;
    gap: 7px;
    border-radius: 14px;
  }
  /* V2.7.0.35 – on mobile the response drawer must no longer inherit the
     desktop grid-column containing block. That column can collapse to 0px,
     causing a percentage max-width to collapse the drawer as well. */
  .social-media-viewer-sidecar {
    position: fixed;
    z-index: 1265;
    grid-column: auto;
    grid-row: auto;
    align-self: auto;
    top: max(6px, env(safe-area-inset-top));
    right: max(6px, env(safe-area-inset-right));
    bottom: max(6px, env(safe-area-inset-bottom));
    width: min(92vw, 390px);
    max-width: none;
    height: auto;
    margin: 0;
    border-width: 1px;
    border-radius: 16px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(calc(100% + 18px));
    pointer-events: none;
    transition: opacity .18s ease, transform .22s ease, visibility 0s linear .22s;
  }
  .social-media-viewer-sidecar.is-open {
    width: min(92vw, 390px);
    margin: 0;
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    pointer-events: auto;
    transition: opacity .18s ease, transform .22s ease, visibility 0s;
  }
  .social-media-viewer-panel.is-sidecar-open > .social-media-viewer-close {
    left: 10px;
    right: auto;
  }
  .social-media-viewer-main {
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    gap: 5px;
  }
  .social-media-viewer-prev,
  .social-media-viewer-next {
    width: 36px;
    min-width: 36px;
    height: 48px;
  }
  .social-media-viewer-image-overlay { bottom: 6px; max-width: calc(100vw - 24px); }
  .social-media-viewer-image-actions { gap: 5px; padding: 6px 7px; }
  .social-media-viewer-image-actions .social-post-reaction-summary { max-width: 34vw; }
  .social-media-viewer-overlay-action { padding-inline: 8px; }
  .social-media-viewer-thumbnails { justify-content: flex-start; max-width: 100%; }
  .social-media-viewer-thumb { flex-basis: 46px; width: 46px; height: 46px; }
}

@media (max-width: 520px) {
  .social-media-viewer-main {
    grid-template-columns: 32px minmax(0, 1fr) 32px;
    gap: 3px;
  }
  .social-media-viewer-prev,
  .social-media-viewer-next {
    width: 30px;
    min-width: 30px;
    height: 44px;
    font-size: 1.65rem;
  }
}

@media (max-height: 620px) {
  .social-media-viewer-panel { gap: 5px; padding-block: 6px; }
  .social-media-viewer-thumb { flex-basis: 40px; width: 40px; height: 40px; }
  .social-media-viewer-count { font-size: .82rem; }
}

@media (prefers-reduced-motion: reduce) {
  #social-media-viewer-stage .social-media-viewer-image,
  #social-media-viewer-stage > img { animation: none; }
}

.social-post-editor { padding: 22px; }
.social-post-editor-author { margin: 16px 0 14px; }
.social-post-editor-form { display: grid; gap: 15px; }
.social-post-editor-text + .social-post-editor-counter { margin-top: -8px; }
.social-post-editor-add-row { margin-top: 1px; }
.social-post-editor-preview { margin-top: 1px; gap: 8px; }
.social-post-editor-form > .modal-actions { margin-top: 2px; padding-top: 3px; }
@media (max-width: 850px) {
  .social-post-editor { padding: max(18px, env(safe-area-inset-top)) 18px calc(18px + env(safe-area-inset-bottom)); }
  .social-post-editor-form { gap: 14px; }
}

/* V2.7.0.17 – Profile Tag Groups */
.profile-tag-group-fieldset { min-width:0; margin:0; padding:12px; border:1px solid var(--border-soft); border-radius:12px; }
.profile-tag-group-fieldset + .profile-tag-group-fieldset { margin-top:10px; }
.profile-tag-group-fieldset legend { padding:0 .35rem; color:var(--text-primary); font-weight:800; }
.profile-tag-group-fieldset > .feedback-text { display:block; margin:0 0 8px; }
.profile-tag-groups-registration { display:grid; gap:12px; }
.profile-tag-group { display:grid; gap:8px; min-width:0; }
.profile-tag-group + .profile-tag-group { margin-top:14px; }
.profile-tag-group h3 { margin:0; font-size:.84rem; text-transform:uppercase; letter-spacing:.045em; color:var(--text-secondary); }
.profile-tag-group-section { padding-top:12px; border-top:1px solid var(--border-soft); }
.profile-tag-groups-tabs { display:grid; gap:10px; min-width:0; }
.profile-tag-groups-tablist { display:flex; gap:6px; overflow-x:auto; padding-bottom:2px; }
.profile-tag-group-tab { flex:0 0 auto; border:1px solid var(--border-soft); border-radius:999px; padding:6px 10px; background:var(--surface-secondary); color:var(--text-secondary); cursor:pointer; }
.profile-tag-group-tab.is-active { border-color:var(--accent); background:var(--accent-soft); color:var(--text-primary); }
.profile-tag-groups-tabpanel { min-height:38px; }
.dating-interest-groups { display:grid; gap:6px; min-width:0; }
.dating-interest-group { display:grid; gap:4px; min-width:0; }
.dating-interest-group-label { color:var(--text-secondary); font-size:.7rem; font-weight:800; letter-spacing:.035em; text-transform:uppercase; }
.profile-tag-group-preview { display:grid; gap:8px; padding:12px; border:1px solid var(--border-soft); border-radius:12px; background:var(--surface-secondary); }
.profile-tag-group-preview-contexts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
@media (max-width:850px){ .profile-tag-group-preview-contexts { grid-template-columns:1fr; } }

/* V2.7.0.30 – compact response dropdown for Social Post cards.
   V2.7.0.31 keeps this feed behavior while the opened image uses a right-side response panel. */
.social-post-comment-count {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid var(--border-soft);
  border-radius: 9px;
  color: var(--text-secondary);
  background: var(--surface-secondary);
  font-size: .86rem;
  line-height: 1;
  cursor: default;
  user-select: none;
}
.social-post-response-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: auto;
}
.social-post-respond-action {
  margin-left: 0;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}
.social-post-respond-action:hover,
.social-post-respond-action[aria-expanded="true"] {
  background: var(--surface-secondary);
  color: var(--text-primary);
}
.social-post-respond-action::after,
.social-media-viewer-respond-action::after {
  content: "▾";
  display: inline-block;
  margin-left: 6px;
  font-size: .72em;
  transition: transform .14s ease;
}
.social-post-respond-action[aria-expanded="true"]::after,
.social-media-viewer-respond-action[aria-expanded="true"]::after {
  transform: rotate(180deg);
}
.social-post-response-chooser {
  position: absolute;
  z-index: 70;
  top: calc(100% + 6px);
  right: 0;
  display: grid;
  gap: 3px;
  min-width: 190px;
  padding: 6px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: var(--surface-elevated, var(--surface-primary));
  box-shadow: 0 14px 34px rgba(0,0,0,.22);
}
.social-post-response-chooser[hidden] { display: none !important; }
.social-post-response-choice {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  font: inherit;
  text-align: left;
  white-space: nowrap;
}
.social-post-response-choice:hover,
.social-post-response-choice:focus-visible {
  outline: none;
  background: var(--accent-soft);
}
@media (max-width: 600px) {
  .social-post-response-chooser {
    min-width: min(190px, calc(100vw - 32px));
  }
}



/* V2.7.0.33 – Mobile Social Post media layout correction.
   V2.7.0.32 only bled ~1–1.35rem into a card that actually has 2rem
   horizontal padding, so the visible change was too small. This version uses
   the real card gutter and targets the two actual list surfaces directly. */
@media (max-width: 600px) {
  :is(#feed-list, #public-profile-social-posts-list) .social-post-card .social-post-media-grid {
    /* Base .card uses 2rem inline padding. Leave only 4px inside the card
       border so media feels genuinely near edge-to-edge without touching it. */
    width: calc(100% + 3.5rem);
    margin-inline: -1.75rem;
    gap: 3px;
    border-radius: 12px;
  }

  :is(#feed-list, #public-profile-social-posts-list) .social-post-card .social-post-media-1 {
    display: block;
    background: transparent;
  }
  :is(#feed-list, #public-profile-social-posts-list) .social-post-card .social-post-media-1 .social-post-image-button {
    width: 100%;
    background: transparent;
  }
  :is(#feed-list, #public-profile-social-posts-list) .social-post-card .social-post-media-1 .social-post-image-button img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 72dvh;
    min-height: 0;
    object-fit: contain;
    object-position: center;
  }

  :is(#feed-list, #public-profile-social-posts-list) .social-post-card .social-post-media-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: clamp(190px, 52vw, 240px);
  }
  :is(#feed-list, #public-profile-social-posts-list) .social-post-card .social-post-media-3 {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    grid-template-rows: repeat(2, clamp(175px, 46vw, 215px));
  }
  :is(#feed-list, #public-profile-social-posts-list) .social-post-card .social-post-media-3 .social-post-image-button:first-child {
    grid-row: 1 / span 2;
  }
  :is(#feed-list, #public-profile-social-posts-list) .social-post-card .social-post-media-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, clamp(180px, 48vw, 220px));
  }

  :is(#feed-list, #public-profile-social-posts-list) .social-post-card
    :is(.social-post-media-2, .social-post-media-3, .social-post-media-4) .social-post-image-button {
    width: 100%;
    height: 100%;
    background: var(--surface-secondary);
  }
  :is(#feed-list, #public-profile-social-posts-list) .social-post-card
    :is(.social-post-media-2, .social-post-media-3, .social-post-media-4) .social-post-image-button img {
    width: 100%;
    height: 100%;
    max-height: none;
    min-height: 0;
    object-fit: cover;
    object-position: center;
  }
}


/* =========================================================
   V2.7.0.38 — SpaceGlas consistency repair
   The theme accumulated multiple historical override layers. This final,
   authoritative layer keeps the established SpaceGlas look while normalizing
   today's authenticated components and explicitly repairing inherited legacy
   overflow/header/mobile rules that could clip or misalign newer UI.
   ========================================================= */
html[data-theme="spaceglas"] {
  color-scheme: dark;
  --background: #07090C;
  --background-deep: #020305;
  --background-soft: #11151A;
  --surface: rgba(20, 23, 28, .58);
  --surface-secondary: rgba(255, 255, 255, .065);
  --surface-elevated: rgba(17, 20, 24, .78);
  --surface-translucent: rgba(11, 13, 17, .62);
  --text-primary: #F7F9FB;
  --text-secondary: #C2C8CE;
  --text-muted: #818A93;
  --accent: #DDEAF1;
  --accent-hover: #FFFFFF;
  --accent-contrast: #080A0C;
  --accent-soft: rgba(221, 234, 241, .105);
  --accent-blue: #8FCAD5;
  --border: rgba(255, 255, 255, .16);
  --border-soft: rgba(255, 255, 255, .085);
  --header-bg: rgba(8, 10, 13, .62);
  --input-background: rgba(4, 6, 8, .50);
  --body-background:
    radial-gradient(circle at 16% -4%, rgba(255,255,255,.075), transparent 23rem),
    radial-gradient(circle at 82% 2%, rgba(116,181,197,.085), transparent 29rem),
    radial-gradient(circle at 52% 118%, rgba(45,60,78,.30), transparent 36rem),
    linear-gradient(155deg, #0B0E12 0%, #05070A 52%, #010203 100%);
  --shadow: 0 28px 78px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.12);
  --shadow-soft: 0 18px 48px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.09);
  --shadow-modal: 0 38px 110px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.14);
  --radius-sm: 14px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 30px;
}

html[data-theme="spaceglas"] body,
html[data-theme="spaceglas"] .app-page {
  background: var(--body-background);
  color: var(--text-primary);
}

/* One header geometry for desktop/laptop. */
html[data-theme="spaceglas"] .app-header {
  inset: 12px 16px auto;
  width: auto;
  height: 64px;
  min-height: 64px;
  padding-inline: 1rem;
  border: 1px solid rgba(255,255,255,.145);
  border-radius: 24px;
  background:
    linear-gradient(115deg, rgba(255,255,255,.10), rgba(255,255,255,.024) 46%, rgba(143,202,213,.032)),
    rgba(5,7,9,.68);
  box-shadow: 0 24px 70px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.17);
  backdrop-filter: blur(28px) saturate(132%);
  -webkit-backdrop-filter: blur(28px) saturate(132%);
  overflow: visible;
}
html[data-theme="spaceglas"] .app-page { padding-top: 88px; }
html[data-theme="spaceglas"] .friends-sidebar-inner,
html[data-theme="spaceglas"] .right-sidebar { top: 100px; }
html[data-theme="spaceglas"] .messages-chat-header { top: 88px; }

/* Normalize glass surfaces. Do not globally clip cards: newer dropdowns and
   response UI are allowed to escape their card just like in the other themes. */
html[data-theme="spaceglas"] .card,
html[data-theme="spaceglas"] .feed-post,
html[data-theme="spaceglas"] .social-post-card,
html[data-theme="spaceglas"] .profile-summary,
html[data-theme="spaceglas"] .friends-sidebar-inner,
html[data-theme="spaceglas"] .messages-inbox,
html[data-theme="spaceglas"] .messages-chat,
html[data-theme="spaceglas"] .dating-profile-card,
html[data-theme="spaceglas"] .feed-tag-filter {
  border-color: rgba(255,255,255,.115);
  background:
    linear-gradient(138deg, rgba(255,255,255,.082), rgba(255,255,255,.018) 46%, rgba(143,202,213,.022)),
    rgba(8,10,13,.61);
  box-shadow: 0 24px 68px rgba(0,0,0,.29), inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter: blur(24px) saturate(126%);
  -webkit-backdrop-filter: blur(24px) saturate(126%);
}
html[data-theme="spaceglas"] .card,
html[data-theme="spaceglas"] .feed-post,
html[data-theme="spaceglas"] .social-post-card { overflow: visible; }
html[data-theme="spaceglas"] .friends-sidebar-inner { overflow: auto; }
html[data-theme="spaceglas"] .messages-inbox,
html[data-theme="spaceglas"] .messages-chat,
html[data-theme="spaceglas"] .public-profile-hero,
html[data-theme="spaceglas"] .dating-profile-card,
html[data-theme="spaceglas"] .social-post-media-grid { overflow: hidden; }

html[data-theme="spaceglas"] .feed-post { padding: 1.55rem; border-radius: 24px; }
html[data-theme="spaceglas"] .card:hover { transform: none; }
html[data-theme="spaceglas"] .feed-post:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.19);
  box-shadow: 0 30px 78px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.15);
}

html[data-theme="spaceglas"] .btn-primary {
  border-color: rgba(255,255,255,.58);
  background: linear-gradient(180deg, #ffffff, #dbe5e9);
  color: #080A0C;
  box-shadow: 0 11px 30px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.95);
}
html[data-theme="spaceglas"] .btn-secondary,
html[data-theme="spaceglas"] .icon-button,
html[data-theme="spaceglas"] .avatar-button,
html[data-theme="spaceglas"] .post-action-button,
html[data-theme="spaceglas"] .social-post-respond-action,
html[data-theme="spaceglas"] .social-media-viewer-overlay-action {
  border-color: rgba(255,255,255,.11);
  background: rgba(255,255,255,.04);
  color: var(--text-primary);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.065);
}
html[data-theme="spaceglas"] .post-action-button:hover,
html[data-theme="spaceglas"] .social-post-respond-action:hover,
html[data-theme="spaceglas"] .social-post-respond-action[aria-expanded="true"] {
  background: rgba(255,255,255,.075);
  color: #fff;
}

html[data-theme="spaceglas"] .app-search,
html[data-theme="spaceglas"] .form-control,
html[data-theme="spaceglas"] .chat-input-shell,
html[data-theme="spaceglas"] textarea,
html[data-theme="spaceglas"] select {
  border-color: rgba(255,255,255,.11);
  background-color: rgba(3,5,7,.62);
  color: var(--text-primary);
}
html[data-theme="spaceglas"] .app-search:focus-within,
html[data-theme="spaceglas"] .form-control:focus,
html[data-theme="spaceglas"] .chat-input-shell:focus-within,
html[data-theme="spaceglas"] textarea:focus,
html[data-theme="spaceglas"] select:focus {
  border-color: rgba(143,202,213,.42);
  box-shadow: 0 0 0 3px rgba(143,202,213,.07), inset 0 1px 0 rgba(255,255,255,.08);
}

/* Menus/modals added after the original SpaceGlas pass must share the same
   readable glass surface and must not be clipped by parent cards. */
html[data-theme="spaceglas"] :is(
  .modal-card,
  .profile-search-results,
  .header-profile-menu,
  .profile-options-menu,
  .chat-actions-menu,
  .conversation-actions-menu,
  .social-post-response-chooser,
  .social-media-viewer-sidecar
) {
  border-color: rgba(255,255,255,.145);
  background:
    linear-gradient(140deg, rgba(255,255,255,.09), rgba(255,255,255,.018) 54%),
    rgba(6,8,10,.90);
  color: var(--text-primary);
  box-shadow: 0 30px 90px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter: blur(28px) saturate(128%);
  -webkit-backdrop-filter: blur(28px) saturate(128%);
}
html[data-theme="spaceglas"] .social-post-response-chooser { z-index: 90; }
html[data-theme="spaceglas"] .social-post-response-choice:hover,
html[data-theme="spaceglas"] .social-post-response-choice:focus-visible {
  background: rgba(255,255,255,.075);
}

html[data-theme="spaceglas"] .public-profile-hero {
  border-color: rgba(255,255,255,.12);
  background:
    radial-gradient(circle at 84% 0%, rgba(143,202,213,.08), transparent 20rem),
    linear-gradient(135deg, rgba(255,255,255,.085), rgba(255,255,255,.018)),
    rgba(8,11,14,.66);
  box-shadow: 0 26px 72px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.12);
}
html[data-theme="spaceglas"] :is(.public-profile-avatar,.large-avatar,.person-avatar,.post-avatar) {
  border-color: rgba(255,255,255,.20);
  box-shadow: 0 9px 26px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.14);
}

html[data-theme="spaceglas"] .conversation-row-shell:hover,
html[data-theme="spaceglas"] .profile-search-item:hover,
html[data-theme="spaceglas"] .notification-row:hover { background: rgba(255,255,255,.055); }
html[data-theme="spaceglas"] .conversation-row-shell.is-active {
  border-color: rgba(255,255,255,.11);
  background: rgba(255,255,255,.07);
  box-shadow: inset 2px 0 0 rgba(221,234,241,.72);
}
html[data-theme="spaceglas"] .chat-message-list {
  background:
    radial-gradient(circle at 82% 12%, rgba(143,202,213,.05), transparent 20rem),
    linear-gradient(180deg, rgba(255,255,255,.014), transparent 35%),
    rgba(1,3,5,.62);
}
html[data-theme="spaceglas"] .chat-message-bubble {
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: var(--text-primary);
}
html[data-theme="spaceglas"] .chat-message-row.is-own .chat-message-bubble {
  border-color: rgba(255,255,255,.28);
  background: linear-gradient(145deg, rgba(248,251,252,.98), rgba(214,226,231,.94));
  color: #090B0C;
}

/* Social Post media/viewer keeps its intentionally dark media stage while
   its chrome follows SpaceGlas tokens. */
html[data-theme="spaceglas"] .social-post-media-grid {
  border-color: rgba(255,255,255,.08);
  background: rgba(0,0,0,.20);
}
html[data-theme="spaceglas"] .social-post-comment-count,
html[data-theme="spaceglas"] .social-media-viewer-image-actions {
  border-color: rgba(255,255,255,.11);
  background: rgba(6,8,10,.72);
  color: var(--text-secondary);
  backdrop-filter: blur(18px) saturate(125%);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
}

@media (max-width: 850px) {
  html[data-theme="spaceglas"] .app-header {
    inset: 7px 8px auto;
    height: 58px;
    min-height: 58px;
    border-radius: 19px;
  }
  html[data-theme="spaceglas"] .app-page { padding-top: 74px; }
  html[data-theme="spaceglas"] .messages-chat-header { top: 74px; }
  html[data-theme="spaceglas"] .friends-sidebar-inner,
  html[data-theme="spaceglas"] .right-sidebar { top: 82px; }
  html[data-theme="spaceglas"] .mobile-bottom-nav {
    inset: auto 10px max(10px, env(safe-area-inset-bottom));
    width: auto;
    height: 64px;
    padding: .35rem .45rem;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 23px;
    background:
      linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.016)),
      rgba(4,6,8,.88);
    box-shadow: 0 18px 50px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.10);
    backdrop-filter: blur(26px) saturate(128%);
    -webkit-backdrop-filter: blur(26px) saturate(128%);
  }
  html[data-theme="spaceglas"] .mobile-nav-item { border-radius: 14px; }
  html[data-theme="spaceglas"] .mobile-nav-item.is-active {
    color: #fff;
    background: rgba(255,255,255,.075);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
  }
}

@media (max-width: 600px) {
  html[data-theme="spaceglas"] .feed-post,
  html[data-theme="spaceglas"] .social-post-card {
    padding: 1.25rem;
    border-radius: 21px;
  }

  /* V2.7.0.33's generic mobile bleed assumes the base 2rem card gutter.
     SpaceGlas intentionally uses 1.25rem on phones, so calculate its media
     bleed from the actual SpaceGlas gutter instead of overshooting the card. */
  html[data-theme="spaceglas"] :is(#feed-list, #public-profile-social-posts-list)
    .social-post-card .social-post-media-grid {
    width: calc(100% + 2rem);
    margin-inline: -1rem;
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-theme="spaceglas"] :is(
    .app-header,.card,.feed-post,.friends-sidebar-inner,.messages-inbox,.messages-chat,
    .modal-card,.profile-search-results,.header-profile-menu,.profile-options-menu,
    .social-post-response-chooser,.social-media-viewer-sidecar
  ) { background: #0C0F12; }
}


/* =========================================================
   V2.7.0.39 — Social Post response controls + SpaceGlas page audit
   ========================================================= */
.social-post-response-settings {
  display: grid;
  gap: .55rem;
  margin: 0;
  padding: .8rem .9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-secondary) 74%, transparent);
}
.social-post-response-settings legend { padding: 0 .25rem; font-weight: 700; }
.social-post-response-settings > small { color: var(--text-muted); line-height: 1.45; }
.social-post-response-settings .toggle-row:has(input:disabled) { opacity: .58; cursor: not-allowed; }

/* SpaceGlas compatibility pass: keep the optical identity but let the current
   shared page structures own geometry just like Original/Purple/Lunar do. */
html[data-theme="spaceglas"] :is(.app-shell,.public-profile-shell,.dating-shell,.messages-shell,.admin-shell,.post-detail-shell) {
  min-width: 0;
  max-width: 100%;
}
html[data-theme="spaceglas"] :is(.feed-column,.right-sidebar,.friends-sidebar,.messages-inbox,.messages-chat,.dating-results,.admin-tab-panel,.public-profile-main,.post-detail-card) {
  min-width: 0;
}
html[data-theme="spaceglas"] .app-shell {
  grid-template-columns: 250px minmax(0, 720px) 310px;
  justify-content: center;
}
html[data-theme="spaceglas"] .post-detail-shell { width: min(100% - 2rem, 820px); margin-inline: auto; }
html[data-theme="spaceglas"] :is(.card,.feed-post,.social-post-card,.admin-panel-card,.dating-filter-card,.dating-profile-card,.profile-summary) {
  isolation: auto;
}
html[data-theme="spaceglas"] :is(.social-post-options-menu,.social-post-response-chooser,.profile-options-menu,.header-profile-menu,.profile-search-results,.chat-actions-menu,.conversation-actions-menu) {
  overflow: visible;
}
html[data-theme="spaceglas"] .social-post-card,
html[data-theme="spaceglas"] .feed-post { contain: none; }
html[data-theme="spaceglas"] :is(.social-post-options-wrap,.social-post-response-dropdown,.profile-options-wrap,.chat-actions-menu-wrap,.conversation-actions-menu-wrap) { position: relative; z-index: 8; }
html[data-theme="spaceglas"] :is(.social-post-options-menu,.social-post-response-chooser,.profile-options-menu,.chat-actions-menu,.conversation-actions-menu) { z-index: 120; }

/* Profile */
html[data-theme="spaceglas"] .public-profile-shell { width: min(1120px, calc(100% - 2rem)); margin-inline: auto; }
html[data-theme="spaceglas"] .public-profile-hero { width: 100%; box-sizing: border-box; }
html[data-theme="spaceglas"] :is(.public-profile-actions,.profile-secondary-actions,.public-profile-metrics,.profile-social-tabs) { min-width: 0; }

/* Dating */
html[data-theme="spaceglas"] .dating-shell { width: min(1240px, calc(100% - 2rem)); margin-inline: auto; }
html[data-theme="spaceglas"] .dating-filter-card { overflow: visible; }
html[data-theme="spaceglas"] .dating-results { width: 100%; }
html[data-theme="spaceglas"] .dating-profile-media {
  width: 100%;
  max-width: 100%;
  margin: 0;
  border-radius: 0;
}

/* Messages: do not let optical surfaces alter the shared two-pane mechanics. */
html[data-theme="spaceglas"] .messages-shell { width: min(1180px, calc(100% - 2rem)); margin-inline: auto; }
html[data-theme="spaceglas"] .messages-inbox,
html[data-theme="spaceglas"] .messages-chat { min-height: 0; }
html[data-theme="spaceglas"] .chat-message-list { min-height: 0; overflow-y: auto; }
html[data-theme="spaceglas"] .chat-composer { position: relative; z-index: 4; }
html[data-theme="spaceglas"] .messages-chat-header { z-index: 12; }

/* Admin: glass styling must not change tab/panel geometry or clip controls. */
html[data-theme="spaceglas"] .admin-shell { width: min(1240px, calc(100% - 2rem)); margin-inline: auto; }
html[data-theme="spaceglas"] :is(.admin-tabs,.admin-moderation-tabs,.admin-social-post-tabs) { overflow-x: auto; overflow-y: hidden; }
html[data-theme="spaceglas"] :is(.admin-tab-panel,.admin-panel-card,.admin-form-grid) { min-width: 0; }
html[data-theme="spaceglas"] .admin-panel-card { overflow: visible; }

/* Page-level reliability: current authenticated pages own scrolling and responsive sizing. */
html[data-theme="spaceglas"] :is(.app-page,.profile-page,.dating-page,.messages-page,.admin-page,.post-page) { overflow-x: hidden; }
html[data-theme="spaceglas"] :is(.dating-filter-grid,.admin-form-grid,.public-profile-grid,.messages-thread,.chat-message-list) { min-width: 0; }
html[data-theme="spaceglas"] :is(.profile-search-wrap,.app-header-actions,.app-topnav,.post-author,.post-author > div:last-child) { min-width: 0; }

/* Shared overlays/viewers must always sit above SpaceGlas fixed/glass chrome. */
html[data-theme="spaceglas"] :is(.modal-backdrop,.social-post-editor-backdrop,.social-create-choice-backdrop,.social-post-media-viewer) { z-index: 2000; }
html[data-theme="spaceglas"] .social-media-viewer-sidecar { z-index: 2050; }
html[data-theme="spaceglas"] :is(.social-reactors-popover,.toast) { z-index: 2100; }

@media (max-width: 850px) {
  /* Match the shared responsive geometry first; SpaceGlas only changes material. */
  html[data-theme="spaceglas"] .public-profile-shell,
  html[data-theme="spaceglas"] .dating-shell { width: min(100% - 1.2rem, 760px); }
  html[data-theme="spaceglas"] .messages-shell { width: min(100% - 1rem, 720px); }
  html[data-theme="spaceglas"] .admin-shell { width: min(100% - 1rem, 760px); }
  html[data-theme="spaceglas"] .post-detail-shell { width: min(100% - 2rem, 820px); }
  html[data-theme="spaceglas"] .app-page { padding-top: 72px; }
  html[data-theme="spaceglas"] .app-header { inset-inline: 8px; }
  html[data-theme="spaceglas"] .app-shell { display: block; padding: 1.1rem .9rem 2rem; }
  html[data-theme="spaceglas"] .friends-sidebar { inset: 68px auto 0 0; }
  html[data-theme="spaceglas"] .friends-sidebar-inner { position: static; top: auto; max-height: calc(100dvh - 92px); }
  html[data-theme="spaceglas"] .messages-shell { grid-template-columns: 1fr; }
  html[data-theme="spaceglas"] .messages-inbox { position: static; max-height: none; }
  html[data-theme="spaceglas"] .messages-chat-header { top: 68px; }
}

@media (max-width: 600px) {
  html[data-theme="spaceglas"] .public-profile-shell,
  html[data-theme="spaceglas"] .dating-shell { width: min(100% - 1.2rem, 760px); }
  html[data-theme="spaceglas"] .messages-shell { width: calc(100% - .6rem); }
  html[data-theme="spaceglas"] .admin-shell { width: min(100% - 1rem, 760px); }
  html[data-theme="spaceglas"] .post-detail-shell { width: calc(100% - 1rem); }
  html[data-theme="spaceglas"] .public-profile-hero,
  html[data-theme="spaceglas"] .dating-filter-card,
  html[data-theme="spaceglas"] .admin-panel-card { border-radius: 20px; }
  html[data-theme="spaceglas"] .social-post-response-settings { background: rgba(255,255,255,.035); }
}

/* =========================================================
   V2.7.0.40 — SpaceGlas structural parity repair
   SpaceGlas keeps its glass material/tokens, but authenticated pages use the
   same current layout geometry as the platform core. This block deliberately
   overrides historical SpaceGlas geometry that survived newer app layouts.
   ========================================================= */

/* Shared authenticated header: same geometry as Original/Purple, glass material only. */
html[data-theme="spaceglas"] body.app-page .app-header {
  inset: 0 0 auto 0;
  width: 100%;
  height: 74px;
  min-height: 74px;
  padding: 0 1.25rem;
  border-width: 0 0 1px;
  border-style: solid;
  border-color: rgba(255,255,255,.12);
  border-radius: 0;
  grid-template-columns: 250px minmax(300px, 1fr) auto;
  gap: 1rem;
  background:
    linear-gradient(115deg, rgba(255,255,255,.075), rgba(255,255,255,.018) 48%, rgba(143,202,213,.025)),
    rgba(5,7,9,.82);
  box-shadow: 0 6px 26px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.09);
  backdrop-filter: blur(24px) saturate(128%);
  -webkit-backdrop-filter: blur(24px) saturate(128%);
}
html[data-theme="spaceglas"] body.app-page { padding-top: 74px; }
html[data-theme="spaceglas"] body.app-page .friends-sidebar-inner,
html[data-theme="spaceglas"] body.app-page .right-sidebar { top: 94px; }

/* Feed shell follows the shared app layout exactly. */
html[data-theme="spaceglas"] body.app-page-main .app-shell {
  min-height: calc(100vh - 74px);
  grid-template-columns: 250px minmax(0, 720px) 310px;
  justify-content: center;
  gap: 1.25rem;
  padding: 1.5rem 1.25rem 4rem;
}

/* Profile shell geometry stays owned by the shared profile page. */
html[data-theme="spaceglas"] body.profile-page .public-profile-shell {
  width: min(1120px, calc(100% - 2rem));
  max-width: 100%;
  margin: 0 auto;
  padding: 2rem 0 5rem;
}

/* Dating remains configuration-driven. SpaceGlas must not replace Admin Dating geometry. */
html[data-theme="spaceglas"] body.dating-page .dating-shell {
  width: min(var(--dating-container-max, 1240px), calc(100% - (2 * var(--dating-side-padding, 16px))));
  max-width: 100%;
  margin: 0 auto;
  padding-top: var(--dating-vertical-spacing, 16px);
  box-sizing: border-box;
}
html[data-theme="spaceglas"] body.dating-page .dating-profile-media {
  width: 100%;
  min-width: 0;
  max-width: none;
  height: var(--dating-media-height, auto);
  aspect-ratio: var(--dating-media-aspect, 4 / 5);
  margin: 0;
  border-radius: var(--dating-image-radius, 0px) var(--dating-image-radius, 0px) 0 0;
}

/* Messages: mirror the CURRENT app-shell implementation, not the old V2.5 shell.
   Historical SpaceGlas used position:relative while legacy .messages-inbox still
   supplied top:92px, which physically shifted the inbox down by 92px. */
html[data-theme="spaceglas"] body.messages-page {
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
}
html[data-theme="spaceglas"] body.messages-page .messages-shell {
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: .8rem 1rem 1rem;
  display: grid;
  grid-template-columns: clamp(270px, 22vw, 340px) minmax(0, 1fr);
  gap: .8rem;
  align-items: stretch;
  overflow: hidden;
}
html[data-theme="spaceglas"] body.messages-page .messages-inbox,
html[data-theme="spaceglas"] body.messages-page .messages-chat {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-height: none;
  align-self: stretch;
  position: static;
  inset: auto;
  top: auto;
  transform: none;
  overflow: hidden;
}
html[data-theme="spaceglas"] body.messages-page .messages-inbox {
  display: flex;
  flex-direction: column;
  padding: 1rem;
}
html[data-theme="spaceglas"] body.messages-page .messages-inbox-heading { flex: 0 0 auto; }
html[data-theme="spaceglas"] body.messages-page .messages-conversation-list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
}
html[data-theme="spaceglas"] body.messages-page .messages-chat {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  padding: 0;
}
html[data-theme="spaceglas"] body.messages-page .messages-empty-chat {
  width: 100%;
  height: 100%;
  min-height: 0;
}
html[data-theme="spaceglas"] body.messages-page .messages-chat-active {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
html[data-theme="spaceglas"] body.messages-page .messages-chat-header {
  position: relative;
  top: auto;
  inset-block-start: auto;
  flex: 0 0 auto;
  z-index: 12;
}
html[data-theme="spaceglas"] body.messages-page .messages-thread {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
html[data-theme="spaceglas"] body.messages-page .messages-composer {
  position: relative;
  bottom: auto;
  min-width: 0;
  flex: 0 0 auto;
  z-index: 4;
}

/* Admin and standalone posts retain the shared platform geometry. */
html[data-theme="spaceglas"] body.admin-page .admin-shell {
  width: min(1240px, calc(100% - 2rem));
  max-width: 100%;
  margin: 0 auto;
  padding: 1.8rem 0 5rem;
}
html[data-theme="spaceglas"] body.post-page .post-detail-shell {
  width: min(100% - 2rem, 820px);
  max-width: 100%;
  margin: 0 auto;
  padding: 2rem 0 5rem;
}

@media (max-width: 1180px) {
  html[data-theme="spaceglas"] body.app-page .app-header { grid-template-columns: 220px 1fr auto; }
  html[data-theme="spaceglas"] body.app-page-main .app-shell { grid-template-columns: 220px minmax(0, 720px); }
}

@media (max-width: 1050px) and (min-width: 851px) {
  html[data-theme="spaceglas"] body.messages-page .messages-shell {
    grid-template-columns: clamp(250px, 26vw, 300px) minmax(0, 1fr);
    padding-inline: .7rem;
    gap: .65rem;
  }
}

@media (max-width: 850px) {
  html[data-theme="spaceglas"] body.app-page { padding-top: 68px; padding-bottom: 82px; }
  html[data-theme="spaceglas"] body.app-page .app-header {
    inset: 0 0 auto 0;
    width: 100%;
    height: 68px;
    min-height: 68px;
    padding: 0 .8rem;
    border-radius: 0;
    grid-template-columns: auto 1fr auto;
    gap: .55rem;
  }
  html[data-theme="spaceglas"] body.app-page-main .app-header { grid-template-columns: minmax(0, 1fr) auto; }
  html[data-theme="spaceglas"] body.app-page-main .app-shell { display: block; padding: 1.1rem .9rem 2rem; }
  html[data-theme="spaceglas"] body.app-page .friends-sidebar { inset: 68px auto 0 0; }
  html[data-theme="spaceglas"] body.app-page .friends-sidebar-inner { position: static; top: auto; max-height: calc(100vh - 92px); }

  html[data-theme="spaceglas"] body.profile-page .public-profile-shell { width: min(100% - 1rem, 760px); }
  html[data-theme="spaceglas"] body.admin-page .admin-shell { width: min(100% - 1rem, 760px); padding-top: 1rem; }
  html[data-theme="spaceglas"] body.post-page .post-detail-shell { width: calc(100% - 1rem); padding-top: 1rem; }

  html[data-theme="spaceglas"] body.messages-page {
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
  }
  html[data-theme="spaceglas"] body.messages-page .messages-shell {
    width: 100%;
    max-width: none;
    height: 100%;
    min-height: 0;
    padding: .5rem;
    display: block;
    overflow: hidden;
  }
  html[data-theme="spaceglas"] body.messages-page .messages-inbox,
  html[data-theme="spaceglas"] body.messages-page .messages-chat,
  html[data-theme="spaceglas"] body.messages-page .messages-chat-active {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    position: static;
    top: auto;
    inset: auto;
  }
  html[data-theme="spaceglas"] body.messages-page .messages-shell:not(.is-mobile-chat-open) .messages-inbox { display: flex; }
  html[data-theme="spaceglas"] body.messages-page .messages-shell:not(.is-mobile-chat-open) .messages-chat { display: none; }
  html[data-theme="spaceglas"] body.messages-page .messages-shell.is-mobile-chat-open .messages-inbox { display: none; }
  html[data-theme="spaceglas"] body.messages-page .messages-shell.is-mobile-chat-open .messages-chat { display: grid; }
  html[data-theme="spaceglas"] body.messages-page .messages-chat-header { top: auto; }
}

@media (max-width: 560px) {
  html[data-theme="spaceglas"] body.messages-page .messages-shell { padding: .3rem; }
  html[data-theme="spaceglas"] body.dating-page .dating-shell {
    width: min(var(--dating-container-max, 760px), calc(100% - (2 * var(--dating-side-padding, 10px))));
  }
}

/* V2.7.0.41 — Tier-based Social Post edit windows */
#social-post-editor-alert:not([hidden]) {
  display: block;
}
.social-post-options-menu button.is-disabled,
.social-post-options-menu button:disabled {
  cursor: not-allowed;
  opacity: .58;
}


/* V2.7.0.42 — Beta Center contextual report action */
.beta-report-fab {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 620;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 42px;
  padding: .65rem .85rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-elevated);
  color: var(--text-primary);
  box-shadow: var(--shadow);
  text-decoration: none;
  font-size: .78rem;
  font-weight: 800;
}
.beta-report-fab:hover { border-color: var(--accent); transform: translateY(-1px); }
.settings-beta-actions { display:flex; gap:.55rem; flex-wrap:wrap; justify-content:flex-end; }
@media (max-width:850px) {
  .beta-report-fab { right: .8rem; bottom: calc(82px + env(safe-area-inset-bottom)); }
  .settings-beta-actions { width:100%; justify-content:stretch; }
  .settings-beta-actions .btn { flex:1 1 150px; }
}

/* =========================================================
   V2.7.0.42 — SpaceGlas Feed sidebar alignment fix
   The original SpaceGlas glass-surface rule makes .friends-sidebar-inner
   position:relative. With the shared top:94px rule that becomes a physical
   downward offset instead of a sticky threshold. Restore shared sticky
   mechanics on desktop while keeping SpaceGlas material unchanged.
   ========================================================= */
@media (min-width: 851px) {
  html[data-theme="spaceglas"] body.app-page-main .friends-sidebar-inner {
    position: sticky;
    top: 94px;
    align-self: start;
    margin-top: 0;
    transform: none;
  }
}

/* =========================================================
   V2.7.0.46 — Mobile Settings horizontal-scroll lock
   Safari/iOS can horizontally pan nested scroll containers that use
   overflow:auto even when the intended Settings interaction is vertical.
   Keep Settings strictly vertical on phones and constrain every major
   Settings layout child to the modal's inline size.
   ========================================================= */
@media (max-width: 600px) {
  body.modal-open {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    overscroll-behavior-x: none;
  }

  #settings-modal {
    overflow-x: clip;
    overscroll-behavior-x: none;
    touch-action: pan-y;
  }

  #settings-modal .settings-modal-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior-x: none;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  #settings-modal .settings-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
    max-width: 100%;
  }

  #settings-modal .modal-header,
  #settings-modal .settings-section,
  #settings-modal .settings-section > *,
  #settings-modal .theme-options,
  #settings-modal .theme-option,
  #settings-modal .profile-form-grid,
  #settings-modal .profile-form-grid > *,
  #settings-modal .form-group,
  #settings-modal .section-title-row,
  #settings-modal .settings-beta-actions,
  #settings-modal .email-notification-options,
  #settings-modal .privacy-toggle-list,
  #settings-modal .blocked-users-list,
  #settings-modal .blocked-user-row,
  #settings-modal .identity-verification-user,
  #settings-modal .identity-requirements,
  #settings-modal .identity-verification-form,
  #settings-modal .modal-actions {
    min-width: 0;
    max-width: 100%;
  }

  #settings-modal .theme-option > span:last-child,
  #settings-modal .blocked-user-identity,
  #settings-modal .blocked-user-identity > span:last-child {
    min-width: 0;
    max-width: 100%;
  }

  #settings-modal .theme-option strong,
  #settings-modal .theme-option small,
  #settings-modal .settings-section p,
  #settings-modal .settings-section small,
  #settings-modal .feedback-text {
    overflow-wrap: anywhere;
    word-break: normal;
  }

  #settings-modal :is(input, select, textarea, button, a.btn) {
    max-width: 100%;
  }

  #settings-modal .verification-status-badge,
  #settings-modal .identity-verified-badge {
    max-width: 100%;
    white-space: normal;
  }
}

/* =========================================================
   V2.7.0.48 – Dating Admin Override authority layer
   Theme styles may provide tokens/identity, but when Admin Override is enabled
   they may not override Dating properties explicitly controlled by Admin.
   This final scoped layer uses selector authority rather than priority flags and has higher
   specificity than historical theme-specific Dating selectors.
   ========================================================= */
.dating-admin-override-card {
  display: grid;
  gap: .45rem;
  margin-top: .85rem;
  padding: .8rem .9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-secondary);
}
.dating-admin-override-toggle { align-items: flex-start; }
.dating-admin-override-toggle > span { display: grid; gap: .18rem; min-width: 0; }
.dating-admin-override-toggle strong { color: var(--text-primary); }
.dating-admin-override-toggle small,
.dating-admin-override-help { color: var(--text-muted); line-height: 1.45; }

body.dating-page .dating-shell[data-dating-admin-override="true"] .dating-profile-card {
  border-style: solid;
  border-width: var(--dating-border-width, 1px);
  border-radius: var(--dating-card-radius, var(--radius));
  background: color-mix(in srgb, var(--surface) var(--dating-card-opacity, 100%), transparent);
}
body.dating-page .dating-shell[data-dating-admin-override="true"] .dating-profile-media {
  width: 100%;
  max-width: none;
  height: var(--dating-media-height, auto);
  margin: 0;
  aspect-ratio: var(--dating-media-aspect, 4 / 5);
  border-radius: var(--dating-image-radius, 0px) var(--dating-image-radius, 0px) 0 0;
}
body.dating-page .dating-shell[data-dating-admin-override="true"] .dating-profile-image {
  width: 100%;
  height: 100%;
  object-fit: var(--dating-image-fit, cover);
  object-position: var(--dating-image-position, 50% 50%);
}
body.dating-page .dating-shell[data-dating-admin-override="true"] .dating-profile-card-body {
  gap: var(--dating-info-gap, 12px);
  padding: var(--dating-card-padding, 16px);
}
body.dating-page .dating-shell[data-dating-admin-override="true"][data-dating-shadow="none"] .dating-profile-card { box-shadow: none; }
body.dating-page .dating-shell[data-dating-admin-override="true"][data-dating-shadow="soft"] .dating-profile-card { box-shadow: 0 8px 24px color-mix(in srgb, #000 12%, transparent); }
body.dating-page .dating-shell[data-dating-admin-override="true"][data-dating-shadow="medium"] .dating-profile-card { box-shadow: 0 14px 36px color-mix(in srgb, #000 20%, transparent); }
body.dating-page .dating-shell[data-dating-admin-override="true"][data-dating-shadow="strong"] .dating-profile-card { box-shadow: 0 20px 52px color-mix(in srgb, #000 28%, transparent); }

@media (hover: hover) and (pointer: fine) {
  body.dating-page .dating-shell[data-dating-admin-override="true"][data-dating-hover="lift"] .dating-profile-card:hover { transform: translateY(-3px); }
  body.dating-page .dating-shell[data-dating-admin-override="true"][data-dating-hover="scale"] .dating-profile-card:hover { transform: scale(1.015); z-index: 2; }
  body.dating-page .dating-shell[data-dating-admin-override="true"][data-dating-hover="image-zoom"] .dating-profile-card:hover .dating-profile-image { transform: scale(1.035); }
  body.dating-page .dating-shell[data-dating-admin-override="true"][data-dating-hover="border-highlight"] .dating-profile-card:hover { border-color: color-mix(in srgb, var(--primary) 58%, var(--border)); }
}

@media (max-width: 600px) {
  .dating-admin-override-card { padding: .7rem; }
}

/* =========================================================
   V2.7.0.49 – Lunar Cloud mobile DM participant header fix
   Lunar Cloud retained a historical sticky-header top offset.
   The dedicated Messages page is now an app-shell where the chat
   header participates in normal flow, so neutralize that offset
   only for Lunar Cloud on /messages. Other themes are untouched.
   ========================================================= */
html[data-theme="lunar-cloud"] body.messages-page .messages-chat-header {
  position: relative;
  top: auto;
  inset-block-start: auto;
}


/* =========================================================
   V2.7.0.54 — Instagram-inspired Feed engagement overlay
   Feed cards get a transparent vertical action rail over the media/card.
   Desktop keeps reaction summaries in their established position; mobile
   removes the legacy below-media action rows. Profile list cards share the Feed controls; detail surfaces keep
   their existing controls.
   ========================================================= */
.social-post-feed-engagement-overlay {
  display: none;
}

:is(#feed-list, #public-profile-social-posts-list) .social-post-feed-engagement-host {
  position: relative;
}

:is(#feed-list, #public-profile-social-posts-list) .social-post-feed-engagement-overlay {
  position: absolute;
  z-index: 12;
  right: 12px;
  bottom: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  pointer-events: none;
}

:is(#feed-list, #public-profile-social-posts-list) .social-post-feed-engagement-overlay.is-card-overlay {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
}

:is(#feed-list, #public-profile-social-posts-list) .social-post-feed-engagement-host-card {
  padding-right: max(2rem, 58px);
}

:is(#feed-list, #public-profile-social-posts-list) .social-post-feed-engagement-overlay > *,
:is(#feed-list, #public-profile-social-posts-list) .social-post-feed-engagement-overlay button {
  pointer-events: auto;
}

:is(#feed-list, #public-profile-social-posts-list) .social-post-reactions-overlay {
  display: block;
  margin: 0;
  padding: 0;
}

:is(#feed-list, #public-profile-social-posts-list) .social-post-reactions-overlay .social-post-reaction-summary {
  display: none;
}

:is(#feed-list, #public-profile-social-posts-list) .social-post-reactions-overlay .social-post-reaction-picker-wrap {
  position: relative;
  display: block;
}

:is(#feed-list, #public-profile-social-posts-list) .social-post-feed-overlay-action {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: rgba(255,255,255,.96);
  background: rgba(8, 9, 13, .10);
  box-shadow: none;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  cursor: pointer;
  text-shadow: 0 1px 5px rgba(0,0,0,.78);
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.62));
  transition: transform .14s ease, background-color .14s ease, color .14s ease;
}

:is(#feed-list, #public-profile-social-posts-list) .social-post-feed-overlay-action:hover,
:is(#feed-list, #public-profile-social-posts-list) .social-post-feed-overlay-action:focus-visible {
  color: #fff;
  background: rgba(8, 9, 13, .28);
  transform: scale(1.055);
  outline: none;
}

:is(#feed-list, #public-profile-social-posts-list) .social-post-feed-overlay-action:focus-visible {
  box-shadow: 0 0 0 2px rgba(255,255,255,.72);
}

:is(#feed-list, #public-profile-social-posts-list) .social-post-feed-reaction-trigger.is-selected {
  color: var(--accent, #ff5c8a);
}

:is(#feed-list, #public-profile-social-posts-list) .social-post-feed-overlay-icon {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

:is(#feed-list, #public-profile-social-posts-list) .social-post-feed-overlay-count {
  position: absolute;
  right: -2px;
  bottom: -2px;
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  background: rgba(10,10,12,.68);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  text-shadow: none;
  filter: none;
}

:is(#feed-list, #public-profile-social-posts-list) .social-post-feed-overlay-count[hidden] {
  display: none !important;
}

/* The reaction wheel opens inward over the media instead of outside the card,
   so it remains usable even though Social Post media intentionally clips its
   rounded corners. */
:is(#feed-list, #public-profile-social-posts-list) .social-post-reactions-overlay .social-post-reaction-picker {
  z-index: 30;
  top: auto;
  right: calc(100% + 10px);
  bottom: 0;
  left: auto;
  max-width: min(360px, calc(100vw - 92px));
  border-color: rgba(255,255,255,.18);
  background: rgba(12, 13, 17, .72);
  box-shadow: 0 12px 32px rgba(0,0,0,.28);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

:is(#feed-list, #public-profile-social-posts-list) .social-post-reactions-overlay .social-post-picker-reaction {
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.07);
  color: #fff;
}

/* Feed now uses the overlay for comment + DM actions on both desktop and
   mobile. The old footer stays intact on detail pages; profile list cards now share the Feed overlay. */
:is(#feed-list, #public-profile-social-posts-list) .social-post-feed-footer {
  display: none;
}

/* Desktop keeps the existing reaction chips exactly in their established
   below-media position. Reaction creation itself moves to the overlay wheel. */
:is(#feed-list, #public-profile-social-posts-list) .social-post-feed-reactions .social-post-reaction-picker-wrap {
  display: none;
}

:is(#feed-list, #public-profile-social-posts-list) .social-post-media-grid.is-nsfw-hidden > .social-post-feed-engagement-overlay,
:is(#feed-list, #public-profile-social-posts-list) .social-post-video-wrap.is-nsfw-hidden > .social-post-feed-engagement-overlay {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 600px) {
  :is(#feed-list, #public-profile-social-posts-list) .social-post-feed-engagement-overlay {
    right: 8px;
    bottom: 10px;
    gap: 5px;
  }

  :is(#feed-list, #public-profile-social-posts-list) .social-post-feed-overlay-action {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    background: rgba(8, 9, 13, .08);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }

  :is(#feed-list, #public-profile-social-posts-list) .social-post-feed-overlay-icon {
    width: 25px;
    height: 25px;
  }

  /* Keep the transparent action rail over the media, but show the same
     received-reaction summary chips below the image that desktop uses. */
  :is(#feed-list, #public-profile-social-posts-list) .social-post-feed-reactions {
    display: flex;
  }

  :is(#feed-list, #public-profile-social-posts-list) .social-post-feed-engagement-host-card {
    padding-right: max(1.15rem, 54px);
  }

  :is(#feed-list, #public-profile-social-posts-list) .social-post-reactions-overlay .social-post-reaction-picker {
    max-width: calc(100vw - 78px);
    padding: 6px;
    gap: 4px;
  }

  :is(#feed-list, #public-profile-social-posts-list) .social-post-reactions-overlay .social-post-picker-reaction {
    flex-basis: 36px;
    width: 36px;
    height: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(#feed-list, #public-profile-social-posts-list) .social-post-feed-overlay-action {
    transition: none;
  }
}

/* =========================================================
   V2.7.0.54 — visible mobile Feed rail + unified image viewer rail
   The V53 mobile rail sat at the media bottom where the fixed mobile nav can
   cover it on tall posts. Keep it vertically centered on phones and use the
   same transparent reaction/comment/DM rail inside the full image viewer.
   ========================================================= */

/* Shared action chrome for Feed and media viewer. The background stays almost
   transparent; contrast comes primarily from the outline icon + soft shadow. */
.social-media-viewer-engagement-overlay {
  position: absolute;
  z-index: 20;
  top: auto;
  right: 12px;
  bottom: 10px;
  transform: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  pointer-events: none;
}

.social-media-viewer-engagement-overlay > *,
.social-media-viewer-engagement-overlay button {
  pointer-events: auto;
}

.social-media-viewer-engagement-overlay .social-post-reactions-overlay {
  display: block;
  margin: 0;
  padding: 0;
}

.social-media-viewer-engagement-overlay .social-post-reaction-summary {
  display: none;
}

.social-media-viewer-engagement-overlay .social-post-reaction-picker-wrap {
  position: relative;
  display: block;
}

/* The V53 button class is reused deliberately so Feed and viewer are one UI. */
.social-media-viewer-engagement-overlay .social-post-feed-overlay-action {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  color: rgba(255,255,255,.98);
  background: rgba(8,9,13,.12);
  box-shadow: 0 2px 14px rgba(0,0,0,.22);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  cursor: pointer;
  text-shadow: 0 1px 5px rgba(0,0,0,.82);
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.66));
}

.social-media-viewer-engagement-overlay .social-post-feed-overlay-icon {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

.social-media-viewer-engagement-overlay .social-post-feed-overlay-count {
  position: absolute;
  right: -2px;
  bottom: -2px;
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  background: rgba(10,10,12,.72);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  text-shadow: none;
  filter: none;
}

.social-media-viewer-engagement-overlay .social-post-feed-overlay-count[hidden] {
  display: none !important;
}

.social-media-viewer-engagement-overlay .social-post-feed-reaction-trigger.is-selected {
  color: var(--accent, #ff5c8a);
}

.social-media-viewer-engagement-overlay .social-post-reaction-picker {
  z-index: 40;
  top: auto;
  right: calc(100% + 10px);
  bottom: 0;
  left: auto;
  max-width: min(360px, calc(100vw - 92px));
  border-color: rgba(255,255,255,.18);
  background: rgba(12,13,17,.78);
  box-shadow: 0 12px 32px rgba(0,0,0,.32);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.social-media-viewer-engagement-overlay .social-post-picker-reaction {
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.07);
  color: #fff;
}

@media (max-width: 600px) {
  /* Keep the Feed rail above the fixed bottom navigation on tall portrait
     photos. This is the key V54 visibility correction. */
  :is(#feed-list, #public-profile-social-posts-list) .social-post-feed-engagement-overlay:not(.is-card-overlay) {
    top: 50%;
    right: 8px;
    bottom: auto;
    transform: translateY(-50%);
    z-index: 24;
  }

  :is(#feed-list, #public-profile-social-posts-list) .social-post-feed-overlay-action,
  .social-media-viewer-engagement-overlay .social-post-feed-overlay-action {
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    border-color: rgba(255,255,255,.12);
    background: rgba(8,9,13,.14);
  }

  /* Viewer uses the same right-side Instagram-style rail on phones. */
  .social-media-viewer-engagement-overlay {
    top: 50%;
    right: 8px;
    gap: 6px;
  }

  .social-media-viewer-engagement-overlay .social-post-reaction-picker {
    max-width: calc(100vw - 78px);
    padding: 6px;
    gap: 4px;
  }

  .social-media-viewer-engagement-overlay .social-post-picker-reaction {
    flex-basis: 36px;
    width: 36px;
    height: 36px;
  }
}

/* =========================================================
   V2.7.0.55 — restore V53 mobile rail placement with V54 styling
   The user-preferred mobile placement is the original V53 bottom-right
   position. Keep the newer V54 transparent outline styling and unified
   viewer controls, but return both mobile rails to the media bottom edge.
   Desktop geometry is intentionally untouched.
   ========================================================= */
@media (max-width: 600px) {
  :is(#feed-list, #public-profile-social-posts-list) .social-post-feed-engagement-overlay:not(.is-card-overlay) {
    top: auto;
    right: 8px;
    bottom: 10px;
    transform: none;
    z-index: 24;
  }

  .social-media-viewer-engagement-overlay {
    top: auto;
    right: 8px;
    bottom: 10px;
    transform: none;
    gap: 6px;
  }
}


/* V2.7.0.65 – automatic farewell reply queue */
#admin-panel-ai-agent .ai-auto-queue-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .55rem;
  margin: .8rem 0;
  padding: .8rem;
  border: 1px solid var(--border-subtle, rgba(255,255,255,.12));
  border-radius: 12px;
  background: var(--surface-soft, rgba(255,255,255,.035));
}
#admin-panel-ai-agent .ai-auto-queue-info > div { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
#admin-panel-ai-agent .ai-auto-queue-info span { overflow-wrap: anywhere; }
#admin-panel-ai-agent .ai-auto-queue-controls { max-width: 360px; margin: .7rem 0; }


/* V2.7.0.66 — unified AI Agent queue + worker observability */
.ai-queue-stat-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .7rem;
  margin-top: 1rem;
}
.ai-queue-stat-grid > div {
  display: grid;
  gap: .2rem;
  min-width: 0;
  padding: .75rem .8rem;
  border: 1px solid var(--border-color, rgba(109,40,217,.14));
  border-radius: 12px;
  background: var(--surface-secondary, rgba(109,40,217,.04));
}
.ai-queue-stat-grid span { color: var(--text-muted, #6d6875); font-size: .76rem; font-weight: 700; }
.ai-queue-stat-grid strong { font-size: 1.25rem; line-height: 1.1; }
.ai-queue-table td { vertical-align: top; }
.ai-queue-table td:last-child { min-width: 280px; max-width: 520px; white-space: normal; overflow-wrap: anywhere; }
.ai-queue-claimed-note {
  margin: .75rem 0 0;
  padding: .65rem .75rem;
  border: 1px dashed var(--border-color, rgba(109,40,217,.2));
  border-radius: 10px;
}
@media (max-width: 980px) { .ai-queue-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ai-queue-stat-grid { grid-template-columns: 1fr; } }

/* V2.7.0.72 — durable AI queue execution + queue/personality admin polish */
#admin-panel-ai-agent .ai-personality-management-top {
  margin-top: 0;
  margin-bottom: 1rem;
}
#admin-panel-ai-agent .ai-worker-plan-card .ai-worker-plan-actions {
  display: grid;
  gap: .55rem;
  margin-top: .8rem;
}
#admin-panel-ai-agent .ai-worker-plan-card .ai-worker-plan-option {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
}
#admin-panel-ai-agent .ai-worker-plan-marker {
  display: inline-grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary-color, #7c3aed) 12%, transparent);
  color: var(--primary-color, #7c3aed);
  font-weight: 800;
  line-height: 1;
}
#admin-panel-ai-agent .ai-worker-plan-card .ai-suggestion-meta {
  display: block;
  margin-top: .18rem;
}

/* V2.7.0.72 — priority reply worker + compact worker jobs + live cooldown */
#admin-panel-ai-agent .ai-worker-plan-card {
  padding: .9rem 1rem;
}
#admin-panel-ai-agent .ai-worker-plan-card .admin-card-heading {
  margin-bottom: .45rem;
}
#admin-panel-ai-agent .ai-worker-plan-info {
  margin: .55rem 0 .65rem;
  padding: .65rem;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
}
#admin-panel-ai-agent .ai-worker-jobs,
#admin-panel-ai-agent .ai-worker-priority-jobs {
  margin-top: .6rem;
  border: 1px solid var(--border-color, rgba(109,40,217,.14));
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-secondary, rgba(109,40,217,.035));
}
#admin-panel-ai-agent .ai-worker-jobs > summary,
#admin-panel-ai-agent .ai-worker-priority-jobs > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
  padding: .62rem .72rem;
  user-select: none;
}
#admin-panel-ai-agent .ai-worker-jobs > summary::-webkit-details-marker,
#admin-panel-ai-agent .ai-worker-priority-jobs > summary::-webkit-details-marker { display: none; }
#admin-panel-ai-agent .ai-worker-jobs > summary::after,
#admin-panel-ai-agent .ai-worker-priority-jobs > summary::after {
  content: '▾';
  margin-left: auto;
  transition: transform .16s ease;
  opacity: .7;
}
#admin-panel-ai-agent details:not([open]) > summary::after { transform: rotate(-90deg); }
#admin-panel-ai-agent .ai-worker-jobs > summary span,
#admin-panel-ai-agent .ai-worker-priority-jobs > summary span {
  color: var(--text-muted, #6d6875);
  font-size: .78rem;
  margin-left: auto;
}
#admin-panel-ai-agent .ai-worker-job-list {
  list-style: none;
  padding: 0 .72rem .7rem;
  margin: 0;
  display: grid;
  gap: .35rem;
}
#admin-panel-ai-agent .ai-worker-job-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  padding: .42rem .5rem;
  border-radius: 8px;
  background: var(--surface-soft, rgba(255,255,255,.035));
}
#admin-panel-ai-agent .ai-worker-job-list li span {
  color: var(--text-muted, #6d6875);
  font-size: .76rem;
  text-align: right;
}
#admin-panel-ai-agent .ai-worker-job-list li.is-empty {
  color: var(--text-muted, #6d6875);
  justify-content: flex-start;
}
#admin-panel-ai-agent .ai-worker-priority-jobs {
  border-style: dashed;
}
#admin-panel-ai-agent .ai-worker-priority-jobs[open] {
  border-color: color-mix(in srgb, var(--primary-color, #7c3aed) 35%, transparent);
}
#admin-panel-ai-agent .ai-live-countdown {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
  white-space: nowrap;
  font-weight: 750;
}
#admin-panel-ai-agent .ai-live-countdown.is-due {
  color: var(--primary-color, #7c3aed);
}
#admin-panel-ai-agent .ai-active-cooldown-list {
  display: grid;
  gap: .55rem;
}
#admin-panel-ai-agent .ai-cooldown-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem .85rem;
  border: 1px solid var(--border-color, rgba(109,40,217,.14));
  border-radius: 11px;
  background: var(--surface-secondary, rgba(109,40,217,.035));
}
#admin-panel-ai-agent .ai-cooldown-row > div {
  display: grid;
  gap: .16rem;
}
#admin-panel-ai-agent .ai-cooldown-row > div span {
  color: var(--text-muted, #6d6875);
  font-size: .78rem;
}
#admin-panel-ai-agent .ai-cooldown-big {
  font-size: 1.05rem;
}
@media (max-width: 680px) {
  #admin-panel-ai-agent .ai-worker-job-list li,
  #admin-panel-ai-agent .ai-cooldown-row {
    align-items: flex-start;
    flex-direction: column;
  }
  #admin-panel-ai-agent .ai-worker-job-list li span { text-align: left; }
}

/* V2.7.0.73 — AI executor heartbeat + stalled-job observability */
#admin-panel-ai-agent .ai-executor-health-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .7rem;
  margin: .8rem 0 1rem;
}
#admin-panel-ai-agent .ai-executor-health-card {
  min-width: 0;
  padding: .75rem .8rem;
  border: 1px solid var(--border-color, rgba(109,40,217,.14));
  border-radius: 12px;
  background: var(--surface-secondary, rgba(109,40,217,.04));
}
#admin-panel-ai-agent .ai-executor-health-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  margin-bottom: .55rem;
}
#admin-panel-ai-agent .ai-executor-health-info {
  display: grid;
  gap: .3rem;
  margin: 0;
}
#admin-panel-ai-agent .ai-executor-health-info > div {
  display: grid;
  grid-template-columns: minmax(105px, .75fr) minmax(0, 1.25fr);
  gap: .5rem;
  align-items: start;
}
#admin-panel-ai-agent .ai-executor-health-info dt {
  color: var(--text-muted, #6d6875);
  font-size: .76rem;
  font-weight: 700;
}
#admin-panel-ai-agent .ai-executor-health-info dd {
  margin: 0;
  font-size: .82rem;
  overflow-wrap: anywhere;
}
@media (max-width: 980px) {
  #admin-panel-ai-agent .ai-executor-health-grid { grid-template-columns: 1fr; }
}
\n/* V2.7.0.76 – Image Safety admin status */
.admin-status-pill{font-size:.82rem;font-weight:700;padding:.35rem .7rem;border:1px solid var(--border-color,#d8d8df);border-radius:999px}
.admin-status-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.75rem}
.admin-status-item{display:flex;flex-direction:column;gap:.2rem;padding:.75rem;border:1px solid var(--border-color,#d8d8df);border-radius:12px}

/* V2.7.0.77 Image Safety policy/history inspector */
.image-safety-policy-wrap{max-width:100%;overflow-x:auto}
.image-safety-policy-table{min-width:820px}
.image-safety-policy-table td:first-child{min-width:180px}
.image-safety-threshold-control{display:flex;gap:.45rem;align-items:center;min-width:190px}
.image-safety-threshold-control .form-control{min-width:100px}
.image-safety-badge{display:inline-flex;white-space:nowrap}
.image-safety-stats{margin-bottom:1rem}
.image-safety-history-filters{margin-bottom:1rem}
.image-safety-pagination{justify-content:center;align-items:center;gap:.75rem;margin-top:1rem}
.image-safety-history-card{display:grid;grid-template-columns:112px minmax(0,1fr);gap:1rem;align-items:start}
.image-safety-history-thumb{position:relative;display:grid;place-items:center;width:112px;aspect-ratio:1;border-radius:14px;overflow:hidden;background:var(--surface-soft,rgba(255,255,255,.06));font-size:.75rem;text-align:center;padding:.4rem}
.image-safety-history-thumb img{width:100%;height:100%;object-fit:cover}
.image-safety-history-thumb.is-protected img,.image-safety-related-item img.is-protected{filter:blur(14px) brightness(.65);transform:scale(1.08)}
.image-safety-history-main{min-width:0}
.image-safety-history-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.75rem}
.image-safety-history-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem .8rem}
.image-safety-detail-row{display:flex;justify-content:space-between;gap:.75rem;min-width:0}
.image-safety-detail-row>span{opacity:.72}
.image-safety-detail-row>strong{min-width:0;text-align:right;overflow-wrap:anywhere}
.image-safety-inspector[hidden]{display:none!important}
.image-safety-inspector{position:fixed;inset:0;z-index:10050;display:grid;place-items:stretch;padding:clamp(.5rem,2vw,1.5rem)}
.image-safety-inspector-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(8px)}
.image-safety-inspector-card{position:relative;z-index:1;width:min(1180px,100%);max-height:calc(100vh - 2rem);margin:auto;overflow:auto;padding:clamp(1rem,2.5vw,1.6rem)}
.image-safety-modal-open{overflow:hidden}
.image-safety-detail-section{margin-top:1.25rem;padding-top:1.1rem;border-top:1px solid var(--border-color,rgba(255,255,255,.1))}
.image-safety-detail-section:first-child{margin-top:0;border-top:0;padding-top:0}
.image-safety-detail-section h3{margin:0 0 .85rem}
.image-safety-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem 1rem}
.image-safety-inspector-preview{position:relative;display:inline-block;max-width:min(100%,760px);overflow:hidden;border-radius:14px;background:#111;isolation:isolate}
.image-safety-inspector-preview>img{position:relative;z-index:0;display:block;max-width:100%;height:auto}
.image-safety-inspector-preview.is-protected>img{filter:blur(24px) brightness(.5);transform:scale(1.04)}
.image-safety-inspector-preview.is-protected:not(.is-revealed)::after{content:'Explicit/NSFW preview · klicka Visa bild';position:absolute;z-index:2;inset:0;display:grid;place-items:center;padding:1rem;text-align:center;background:rgba(0,0,0,.22);font-weight:700;pointer-events:none}
.image-safety-inspector-preview.is-revealed>img{filter:none;transform:none}
.image-safety-inspector-preview.is-revealed::after{display:none}
.image-safety-detection-layer{position:absolute;z-index:3;inset:0;pointer-events:none;overflow:hidden;border-radius:inherit}
.image-safety-detection-box{position:absolute;border:2px solid #ff5470;pointer-events:none;box-sizing:border-box;color:#fff;text-shadow:0 1px 3px #000;box-shadow:0 0 0 1px rgba(0,0,0,.72),0 0 0 3px rgba(255,84,112,.16)}
.image-safety-detection-box[data-action="block"]{border-width:3px}
.image-safety-detection-box>span{position:absolute;z-index:1;left:2px;top:2px;max-width:min(240px,calc(100vw - 3rem));padding:.18rem .38rem;border-radius:5px;background:rgba(0,0,0,.86);font-size:.72rem;font-weight:700;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.image-safety-related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.75rem}
.image-safety-related-item{appearance:none;border:1px solid var(--border-color,rgba(255,255,255,.12));background:var(--surface-soft,rgba(255,255,255,.04));border-radius:12px;padding:.5rem;color:inherit;cursor:pointer;text-align:left;overflow:hidden}
.image-safety-related-item img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;margin-bottom:.4rem}
.image-safety-json{max-height:380px;overflow:auto;padding:.8rem;border-radius:10px;background:rgba(0,0,0,.25);font-size:.78rem;white-space:pre-wrap;overflow-wrap:anywhere}
@media(max-width:720px){
  .image-safety-history-card{grid-template-columns:76px minmax(0,1fr)}
  .image-safety-history-thumb{width:76px}
  .image-safety-history-meta,.image-safety-detail-grid{grid-template-columns:1fr}
  .image-safety-detail-row{display:grid;gap:.15rem}
  .image-safety-detail-row>strong{text-align:left}
  .image-safety-inspector{padding:.25rem}
  .image-safety-inspector-card{max-height:calc(100vh - .5rem);border-radius:16px}
}

@media (max-width: 640px) {
  .register-wizard { width: min(100% - 1rem, 640px); margin-top: 1.1rem; padding: 1.2rem; }
  .register-wizard .form-intro { margin-bottom: 1.1rem; }
  .register-progress { margin-bottom: 1.25rem; }
  .register-progress-label { display: none; }
  .register-progress-track { top: 1.18rem; left: 10%; right: 10%; }
  .register-progress-step { gap: .2rem; }
  .register-progress-current { margin-top: .65rem; }
  .register-step-location-grid { grid-template-columns: 1fr; }
  .register-step-actions { position: sticky; bottom: 0; z-index: 3; margin-left: -.2rem; margin-right: -.2rem; padding: .8rem .2rem .15rem; background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(10px); }
  .register-step-actions .btn { flex: 1; min-width: 0; min-height: 46px; }
  .register-step-actions-end .btn { flex: 1; }
  .register-wizard .profile-image-picker { grid-template-columns: 88px minmax(0, 1fr); gap: .8rem; }
}

@media (max-width: 390px) {
  .register-wizard { padding: 1rem; }
  .register-progress-dot { width: 1.58rem; height: 1.58rem; font-size: .72rem; }
  .register-progress-track { top: 1.11rem; }
}

@media (prefers-reduced-motion: reduce) {
  .register-step { animation: none !important; }
  .register-progress-track > span,
  .register-progress-dot { transition: none !important; }
}

/* V2.7.0.80 – centralized, non-destructive runtime diagnostics. */
.health-pill.is-degraded,
.admin-health-status.status-degraded {
  border-color: color-mix(in srgb, var(--warning) 50%, var(--border));
  background: color-mix(in srgb, var(--warning) 11%, var(--surface));
  color: color-mix(in srgb, var(--warning) 82%, var(--text-primary));
}
.health-pill.is-down,
.admin-health-status.status-down {
  border-color: color-mix(in srgb, var(--danger) 48%, var(--border));
  background: color-mix(in srgb, var(--danger) 10%, var(--surface));
  color: var(--danger);
}
.health-pill.is-unknown,
.admin-health-status.status-unknown,
.health-pill.is-disabled,
.admin-health-status.status-disabled {
  border-color: var(--border-soft);
  background: var(--surface-secondary);
  color: var(--text-muted);
}
.admin-system-health-card.is-expanded { grid-column: 1 / -1; }
.admin-health-card-footer,
.admin-health-details-heading,
.admin-health-actions {
  display: flex;
  align-items: center;
  gap: .65rem;
}
.admin-health-card-footer { justify-content: space-between; flex-wrap: wrap; margin-top: .8rem; }
.admin-health-actions { flex-wrap: wrap; }
.admin-health-details {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-soft);
}
.admin-health-details-heading { justify-content: space-between; align-items: flex-start; margin-bottom: .9rem; }
.admin-health-details-heading > div { display: grid; gap: .2rem; }
.admin-health-details-heading small { color: var(--text-muted); }
.admin-health-groups { display: grid; gap: .9rem; }
.admin-health-group {
  min-width: 0;
  padding: .85rem;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md, 16px);
  background: color-mix(in srgb, var(--surface-secondary) 76%, transparent);
}
.admin-health-group > h3 { margin: 0 0 .65rem; font-size: .9rem; }
.admin-health-checks { display: grid; gap: .55rem; }
.admin-health-check {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(150px, .85fr) minmax(110px, auto) minmax(180px, 1.4fr);
  gap: .65rem;
  align-items: start;
  padding: .65rem 0;
  border-top: 1px solid var(--border-soft);
}
.admin-health-check:first-child { border-top: 0; padding-top: 0; }
.admin-health-check-main { min-width: 0; display: grid; gap: .15rem; }
.admin-health-check-main strong { overflow-wrap: anywhere; }
.admin-health-check-main small,
.admin-health-check-detail small { color: var(--text-muted); }
.admin-health-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  width: max-content;
  max-width: 100%;
  padding: .25rem .5rem;
  border: 1px solid color-mix(in srgb, var(--success) 40%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--success) 9%, var(--surface));
  color: color-mix(in srgb, var(--success) 78%, var(--text-primary));
  font-size: .69rem;
  font-weight: 800;
  white-space: nowrap;
}
.admin-health-check-detail { min-width: 0; display: grid; gap: .2rem; font-size: .75rem; }
.admin-health-check-detail code,
.admin-health-check-detail pre,
.admin-health-check-detail span { overflow-wrap: anywhere; word-break: break-word; }
.admin-health-reason { color: var(--text-secondary); }
.admin-health-error { color: var(--danger); }
.admin-health-metrics {
  margin-top: .35rem;
  padding: .5rem;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: var(--surface);
  white-space: pre-wrap;
  max-height: 220px;
  overflow: auto;
  font-size: .68rem;
}
@media (min-width: 1000px) {
  .admin-health-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-health-group[data-health-group="core"],
  .admin-health-group[data-health-group="database"] { grid-column: span 1; }
}
@media (max-width: 760px) {
  .admin-health-card-footer,
  .admin-health-details-heading { align-items: stretch; flex-direction: column; }
  .admin-health-actions { width: 100%; }
  .admin-health-actions .btn,
  #admin-health-smtp-test { flex: 1; min-height: 42px; }
  .admin-health-check { grid-template-columns: 1fr; gap: .35rem; }
  .admin-health-status { justify-self: start; }
  .admin-health-list > div { align-items: flex-start; }
  .admin-health-list dd { max-width: 58%; overflow-wrap: anywhere; }
}

/* V2.7.0.82 – Maintenance / Backup / Restore */
.maintenance-admin-panel{display:grid;gap:16px}.maintenance-admin-panel[hidden]{display:none!important}.maintenance-subtabs{display:flex;gap:8px;flex-wrap:wrap}.maintenance-subtabs .is-active{outline:2px solid color-mix(in srgb,currentColor 35%,transparent);outline-offset:1px}.maintenance-grid{align-items:start}.maintenance-category-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0}.maintenance-category-option{display:flex;gap:9px;align-items:flex-start;border:1px solid var(--border-color,rgba(127,127,127,.24));border-radius:12px;padding:10px;background:color-mix(in srgb,var(--card-bg,#111) 88%,transparent)}.maintenance-category-option input{margin-top:3px}.maintenance-category-option span{min-width:0}.maintenance-category-option small{display:block;opacity:.72;margin-top:3px}.maintenance-secret-toggle{margin:12px 0}.maintenance-secret-fields{display:grid;gap:10px;margin-top:12px}.maintenance-preview{margin-top:14px;padding:14px;border:1px solid var(--border-color,rgba(127,127,127,.24));border-radius:14px}.maintenance-preview-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px;margin-bottom:12px}.maintenance-preview-meta>div{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid color-mix(in srgb,currentColor 12%,transparent)}.maintenance-preview-meta span{opacity:.7}.maintenance-import-confirm{display:grid;gap:9px;margin-top:12px;padding-top:12px;border-top:1px solid color-mix(in srgb,currentColor 14%,transparent)}.maintenance-health-line{display:flex;justify-content:space-between;gap:12px;margin-top:18px;padding-top:12px;border-top:1px solid color-mix(in srgb,currentColor 12%,transparent)}.maintenance-table{min-width:960px}.maintenance-cell-sub{display:block;margin-top:3px;opacity:.68;font-size:.78rem}.maintenance-actions{display:flex;gap:6px;flex-wrap:wrap}.maintenance-status{display:inline-flex;align-items:center;border-radius:999px;padding:3px 8px;background:color-mix(in srgb,currentColor 9%,transparent);font-size:.78rem;font-weight:750}.maintenance-status.success{background:rgba(61,191,117,.14)}.maintenance-status.warning{background:rgba(225,174,60,.16)}.maintenance-status.failed{background:rgba(225,76,86,.16)}.maintenance-hash{display:block;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.maintenance-error-cell{max-width:320px;white-space:normal;word-break:break-word}.maintenance-progress{margin-top:12px}.maintenance-progress-track{height:8px;border-radius:999px;overflow:hidden;background:color-mix(in srgb,currentColor 10%,transparent);margin:8px 0}.maintenance-progress-track span{display:block;height:100%;background:currentColor;border-radius:inherit}.maintenance-next-runs{display:grid;gap:4px;padding:12px;border-radius:12px;background:color-mix(in srgb,currentColor 6%,transparent);margin:12px 0}.maintenance-next-runs small{line-height:1.6;opacity:.76}.maintenance-rule-list{display:grid;gap:8px}.maintenance-rule-list>div{padding:9px 10px;border-radius:10px;background:color-mix(in srgb,currentColor 6%,transparent)}
@media(max-width:780px){.maintenance-category-grid,.maintenance-preview-meta{grid-template-columns:1fr}.maintenance-subtabs{display:grid;grid-template-columns:1fr}.maintenance-table{min-width:780px}}


/* V2.7.0.86 – Maintenance action feedback */
.maintenance-feedback {
  position: sticky;
  top: .75rem;
  z-index: 30;
  margin: .75rem 0 1rem;
  padding: .85rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface, var(--card-bg));
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}
.maintenance-feedback[hidden] { display: none !important; }
.maintenance-feedback.success {
  border-color: color-mix(in srgb, var(--success) 45%, var(--border));
  background: color-mix(in srgb, var(--success) 10%, var(--surface, transparent));
}
.maintenance-feedback.danger {
  border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
  background: color-mix(in srgb, var(--danger) 10%, var(--surface, transparent));
}
.maintenance-feedback.info {
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
}

/* V2.7.0.90 – Rich tags use one presentation shell everywhere.
   The outer element keeps semantics/click handling only; Admin HTML/CSS owns
   the visible tag so the same tag looks identical in filters, cards and profiles. */
.rich-tag-shell {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto;
  min-width: 0;
  min-height: 0 !important;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: 1 !important;
}
.rich-tag-shell > .rich-tag-shadow-host {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-width: 0;
}
button.rich-tag-shell {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
button.rich-tag-shell:focus-visible {
  outline: 2px solid var(--accent, currentColor);
  outline-offset: 3px;
}
button.rich-tag-shell.is-active {
  outline: 2px solid color-mix(in srgb, var(--accent, currentColor) 65%, transparent);
  outline-offset: 2px;
}

/* V2.7.1.03 – Account Security Center */
.account-security-section { display: grid; gap: 1rem; }
.account-security-heading { align-items: flex-start; }
.account-security-heading h3 { margin: .2rem 0 .3rem; }
.account-security-heading p { margin: 0; max-width: 62ch; color: var(--text-muted); font-size: .82rem; line-height: 1.55; }
.account-security-state,
.active-session-current {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: .28rem .62rem;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
  color: var(--text-secondary);
  font-size: .69rem;
  font-weight: 800;
  white-space: nowrap;
}
.account-security-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.account-security-card {
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-secondary) 82%, transparent);
}
.account-security-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; margin-bottom: .85rem; }
.account-security-card-heading h4 { margin: 0 0 .25rem; font-size: .95rem; }
.account-security-card-heading p { margin: 0; color: var(--text-muted); font-size: .75rem; line-height: 1.48; }
.account-security-card .form-group { margin-bottom: .75rem; }
.account-security-card .form-group small { display: block; margin-top: .35rem; color: var(--text-muted); line-height: 1.45; }
.account-security-card .alert { margin: 0 0 .75rem; }
.account-security-card-actions { display: flex; justify-content: flex-end; margin-top: .9rem; }
.account-security-facts { display: grid; gap: .45rem; margin: 0 0 .85rem; }
.account-security-facts > div { display: grid; gap: .15rem; padding: .55rem .65rem; border-radius: 10px; background: var(--surface); }
.account-security-facts dt { color: var(--text-muted); font-size: .68rem; }
.account-security-facts dd { margin: 0; overflow-wrap: anywhere; color: var(--text-primary); font-size: .78rem; font-weight: 750; }
.account-security-sessions { margin-top: 0; }
.active-sessions-list { display: grid; gap: .65rem; }
.active-session-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: .75rem;
  align-items: center;
  padding: .8rem;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: var(--surface);
}
.active-session-row.is-current { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.active-session-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--surface-secondary);
  color: var(--accent);
  font-size: 1.05rem;
}
.active-session-copy { min-width: 0; display: grid; gap: .2rem; }
.active-session-title { min-width: 0; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.active-session-title strong { min-width: 0; overflow-wrap: anywhere; font-size: .8rem; }
.active-session-copy > small { color: var(--text-muted); }
.active-session-current { min-height: 22px; padding: .18rem .5rem; color: var(--text-primary); }
.active-session-facts { display: flex; flex-wrap: wrap; gap: .25rem .75rem; color: var(--text-muted); font-size: .69rem; }
.account-security-session-actions { display: flex; justify-content: flex-end; gap: .65rem; flex-wrap: wrap; margin-top: .9rem; }

@media (max-width: 720px) {
  .account-security-grid { grid-template-columns: 1fr; }
  .account-security-heading { display: grid; }
  .account-security-state { justify-self: start; }
}

@media (max-width: 560px) {
  .account-security-card { padding: .85rem; }
  .account-security-card-heading { align-items: stretch; flex-direction: column; }
  .account-security-card-heading .btn { width: 100%; }
  .active-session-row { grid-template-columns: 36px minmax(0, 1fr); padding: .7rem; }
  .active-session-icon { width: 36px; height: 36px; }
  .account-security-card-actions,
  .account-security-session-actions { display: grid; grid-template-columns: 1fr; }
  .account-security-card-actions .btn,
  .account-security-session-actions .btn { width: 100%; }
}

/* V2.7.1.04 – Two-Factor Authentication */
.two-factor-card { display: grid; gap: .9rem; }
.two-factor-qr-wrap { display: grid; place-items: center; width: min(280px, 100%); padding: .65rem; margin: .25rem auto .8rem; border-radius: 14px; background: #fff; }
.two-factor-qr-wrap img { display: block; width: min(260px, 100%); height: auto; }
.two-factor-secret-copy { display: grid; gap: .35rem; margin-bottom: .9rem; }
.two-factor-secret-copy small, .muted-copy { color: var(--text-muted); }
.two-factor-secret-copy code { overflow-wrap: anywhere; padding: .65rem; border: 1px solid var(--border-soft); border-radius: 10px; background: var(--surface); font-size: .78rem; letter-spacing: .05em; }
.two-factor-action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
.two-factor-action-grid form { min-width: 0; padding: .8rem; border: 1px solid var(--border-soft); border-radius: 12px; background: var(--surface); }
.two-factor-action-grid h5 { margin: 0 0 .25rem; }
.two-factor-action-grid p { margin: 0 0 .75rem; font-size: .72rem; line-height: 1.45; }
.two-factor-recovery-panel { padding: .85rem; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); border-radius: 12px; background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.two-factor-recovery-panel > p { color: var(--text-muted); font-size: .75rem; }
.two-factor-recovery-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; margin: .75rem 0; }
.two-factor-recovery-list code { display: block; padding: .5rem .6rem; border-radius: 8px; background: var(--surface); text-align: center; font-weight: 800; letter-spacing: .06em; }
@media (max-width: 720px) { .two-factor-action-grid, .two-factor-recovery-list { grid-template-columns: 1fr; } }

/* V2.7.1.06 – Admin Feature Requests & Priority Queue */
.feature-request-subtabs { display:flex; gap:.5rem; margin-bottom:.9rem; }
.feature-request-summary-card p { margin:.35rem 0 .8rem; color:var(--text-secondary); }
.feature-request-header-actions,
.feature-request-row-actions,
.feature-request-priority-buttons,
.feature-request-form-actions { display:flex; gap:.45rem; flex-wrap:wrap; align-items:center; }
.feature-request-drive-state {
  padding:.7rem .8rem;
  border:1px solid var(--border-soft);
  border-radius:10px;
  background:var(--surface-secondary);
  color:var(--text-secondary);
  overflow-wrap:anywhere;
}
.feature-request-drive-state[data-state="ok"] { border-color:color-mix(in srgb, #3bb273 45%, var(--border-soft)); }
.feature-request-drive-state[data-state="error"] { border-color:color-mix(in srgb, #e05252 55%, var(--border-soft)); color:var(--danger, #d84c4c); }
.feature-request-grid { align-items:start; }
.feature-request-table td { vertical-align:top; }
.feature-request-table tr.is-muted { opacity:.66; }
.feature-request-priority { display:flex; flex-direction:column; gap:.35rem; min-width:76px; }
.feature-request-priority > strong { white-space:nowrap; }
.feature-request-priority-buttons .compact-button { min-width:34px; padding:.28rem .45rem; }
.feature-request-meta { display:block; margin-top:.28rem; color:var(--text-muted); font-size:.72rem; line-height:1.35; }
.feature-request-status { display:inline-flex; align-items:center; padding:.28rem .5rem; border:1px solid var(--border-soft); border-radius:999px; font-size:.72rem; white-space:nowrap; }
.feature-request-status.status-in-progress { border-color:color-mix(in srgb, var(--primary) 45%, var(--border-soft)); }
.feature-request-status.status-done { border-color:color-mix(in srgb, #3bb273 45%, var(--border-soft)); }
.feature-request-status.status-rejected { border-color:color-mix(in srgb, #e05252 45%, var(--border-soft)); }
.feature-request-form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.feature-request-form-grid .form-span-2,
.feature-request-drive-config-grid .form-span-2 { grid-column:1 / -1; }
.feature-request-critical-field { display:flex; flex-direction:column; justify-content:end; }
.feature-request-critical-field label { display:flex; align-items:center; gap:.45rem; }
.feature-request-notes { margin-top:1.2rem; padding-top:1rem; border-top:1px solid var(--border-soft); }
.feature-request-note-list { display:grid; gap:.55rem; margin:.7rem 0 1rem; }
.feature-request-note-item { padding:.7rem .8rem; border:1px solid var(--border-soft); border-radius:10px; background:var(--surface-secondary); }
.feature-request-note-item p { margin:.25rem 0 0; white-space:pre-wrap; overflow-wrap:anywhere; }
.feature-request-note-item small { color:var(--text-muted); }
.feature-request-drive-config-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.feature-request-drive-config-card code { overflow-wrap:anywhere; }
@media (max-width: 760px) {
  .feature-request-form-grid,
  .feature-request-drive-config-grid { grid-template-columns:1fr; }
  .feature-request-form-grid .form-span-2,
  .feature-request-drive-config-grid .form-span-2 { grid-column:auto; }
  .feature-request-header-actions { width:100%; }
}

/* =========================================================
   V2.7.1.09 – Mutual Dating Matches & Experience Switch
   ========================================================= */
.dating-section-tabs {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  max-width: 100%;
  margin: 0 0 var(--dating-vertical-spacing, 16px);
  padding: .3rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: 0 8px 24px color-mix(in srgb, #000 8%, transparent);
}
.dating-section-tabs[hidden] { display: none !important; }
.dating-section-tab {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 42px;
  padding: .58rem 1rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition: color var(--transition), background var(--transition), border-color var(--transition), transform var(--transition);
}
.dating-section-tab:hover {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--primary) 7%, transparent);
}
.dating-section-tab:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.dating-section-tab.is-active {
  color: var(--button-text, #fff);
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--primary) 24%, transparent);
}
.dating-match-count-badge {
  display: inline-grid;
  place-items: center;
  min-width: 1.45rem;
  height: 1.45rem;
  padding: 0 .36rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--primary);
  font-size: .72rem;
  line-height: 1;
  font-weight: 900;
}
.dating-section-tab:not(.is-active) .dating-match-count-badge {
  background: color-mix(in srgb, var(--primary) 12%, var(--surface));
}

.dating-matches-view { display: grid; gap: var(--dating-vertical-spacing, 16px); min-width: 0; }
.dating-matches-view[hidden] { display: none !important; }
.dating-matches-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
}
.dating-matches-heading h2 { margin: .1rem 0 .25rem; }
.dating-matches-heading p { margin: 0; color: var(--text-muted); }
.dating-matches-total {
  flex: 0 0 auto;
  color: var(--text-secondary);
  font-size: .86rem;
  white-space: nowrap;
}
.dating-match-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, .34fr);
  gap: .85rem;
  align-items: end;
  padding: 1rem;
}
.dating-match-tools .form-group { margin: 0; min-width: 0; }
.dating-match-grid { margin-top: 0; }
.dating-match-card .dating-profile-card-body { align-content: start; }
.dating-match-facts { margin-bottom: auto; }
.dating-match-actions .dating-unmatch-action {
  flex-basis: 100%;
  color: var(--danger, #e86a7a);
  border-color: color-mix(in srgb, var(--danger, #e86a7a) 34%, var(--border));
}
.dating-match-actions .dating-unmatch-action:hover {
  background: color-mix(in srgb, var(--danger, #e86a7a) 9%, var(--surface));
  border-color: color-mix(in srgb, var(--danger, #e86a7a) 58%, var(--border));
}
.dating-profile-actions .dating-like-action.is-selected {
  border-color: color-mix(in srgb, var(--heart, #e66a87) 58%, var(--primary));
  background: color-mix(in srgb, var(--heart, #e66a87) 18%, var(--primary));
  color: var(--button-text, #fff);
}

.dating-match-modal-backdrop {
  z-index: 10040;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.dating-match-modal-backdrop[hidden] { display: none !important; }
.dating-match-modal-card {
  position: relative;
  width: min(470px, calc(100vw - 2rem));
  padding: 1.6rem;
  text-align: center;
  overflow: hidden;
}
.dating-match-modal-close {
  position: absolute;
  top: .7rem;
  right: .7rem;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-secondary);
  color: var(--text-muted);
  font: inherit;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}
.dating-match-modal-close:hover { color: var(--text-primary); border-color: var(--primary); }
.dating-match-heart {
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin: 0 auto .55rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--heart, #e66a87) 14%, var(--surface));
  color: var(--heart, #e66a87);
  font-size: 1.35rem;
}
.dating-match-modal-card h2 { margin: 0 0 .65rem; }
.dating-match-modal-card > p { margin: .75rem auto 1rem; max-width: 34ch; color: var(--text-muted); }
.dating-match-people {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  margin: 1rem 0 .4rem;
  color: var(--heart, #e66a87);
  font-size: 1.2rem;
}
.dating-match-avatar {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  overflow: hidden;
  border: 2px solid color-mix(in srgb, var(--primary) 45%, var(--border));
  border-radius: 999px;
  background: linear-gradient(145deg, var(--surface-secondary), var(--accent-soft));
  color: var(--text-primary);
  font-size: 1.35rem;
  font-weight: 900;
  box-shadow: 0 10px 28px color-mix(in srgb, #000 14%, transparent);
}
.dating-match-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dating-match-modal-actions { justify-content: center; }
.dating-match-modal-actions .btn { min-width: 150px; }

.dating-admin-experience-card {
  display: grid;
  gap: .45rem;
  margin-top: .85rem;
  padding: .8rem;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border));
  border-radius: calc(var(--radius, 16px) * .8);
  background: color-mix(in srgb, var(--primary) 5%, var(--surface));
}
.dating-admin-experience-card .form-group { margin: 0; }
.dating-admin-experience-card .form-group > span:first-child {
  color: var(--text-secondary);
  font-size: .78rem;
  font-weight: 800;
}

@media (max-width: 700px) {
  .dating-section-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    border-radius: calc(var(--radius, 16px) * .85);
    box-sizing: border-box;
  }
  .dating-section-tab { width: 100%; padding-inline: .65rem; }
  .dating-matches-heading { align-items: start; flex-direction: column; gap: .35rem; }
  .dating-match-tools { grid-template-columns: 1fr; padding: .85rem; }
  .dating-match-actions .btn { flex-basis: 100%; }
  .dating-match-modal-card { padding: 1.35rem 1rem 1.1rem; }
  .dating-match-avatar { width: 66px; height: 66px; }
  .dating-match-modal-actions { display: grid; grid-template-columns: 1fr; }
  .dating-match-modal-actions .btn { width: 100%; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .dating-section-tab { transition: none; }
}

/* V2.7.1.11 – Web Push / notification channel settings */
.notification-channel-grid{overflow-x:auto;border:1px solid var(--border-color,#2d2940);border-radius:14px;margin-top:12px}
.notification-channel-head,.notification-channel-row{display:grid;grid-template-columns:minmax(190px,1fr) 72px 72px 72px;align-items:center;gap:8px;min-width:440px;padding:10px 12px}
.notification-channel-head{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;opacity:.72;border-bottom:1px solid var(--border-color,#2d2940)}
.notification-channel-head span:not(:first-child),.notification-channel-row>label,.notification-channel-na{text-align:center;justify-self:center}
.notification-channel-row+.notification-channel-row{border-top:1px solid var(--border-color,#2d2940)}
.notification-channel-row>span:first-child{font-weight:600}.notification-channel-row input[type="checkbox"]{width:18px;height:18px;accent-color:var(--accent,#7c5cff)}
.notification-channel-na{opacity:.4}.push-device-panel{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;margin-top:16px;border-top:1px solid var(--border-color,#2d2940)}
.push-device-panel p{margin:4px 0 0}.push-device-list-wrap{margin-top:8px}.push-device-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 0}
.push-device-row+.push-device-row{border-top:1px solid var(--border-color,#2d2940)}.push-device-copy{display:grid;gap:2px;min-width:0}.push-device-copy strong,.push-device-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:640px){.push-device-panel,.push-device-row{align-items:stretch;flex-direction:column}.push-device-panel .btn,.push-device-row .btn{width:100%}}


/* =========================================================
   V2.7.1.14 — moderation, PM avatar and post-menu hotfixes
   ========================================================= */

/* Keep the message avatar square even when a long bubble consumes the row. */
.chat-message-avatar {
  width: 28px;
  min-width: 28px;
  max-width: 28px;
  height: 28px;
  min-height: 28px;
  max-height: 28px;
  flex: 0 0 28px;
  aspect-ratio: 1 / 1;
  align-self: flex-end;
  overflow: visible;
  border-radius: 50%;
}
.chat-message-avatar > img {
  width: 28px;
  min-width: 28px;
  max-width: 28px;
  height: 28px;
  min-height: 28px;
  max-height: 28px;
  display: block;
  object-fit: cover;
  border-radius: 50%;
  clip-path: circle(50% at 50% 50%);
}

/* A card with an open three-dot menu must paint above later feed cards,
   including themes where backdrop-filter creates separate stacking contexts. */
.social-post-card { position: relative; }
.social-post-card.has-open-options { z-index: 180; }
.social-post-card.has-open-options .social-post-options-wrap { z-index: 181; }
.social-post-card.has-open-options .social-post-options-menu { z-index: 182; }

/* Moderation -> Inlägg: keep nested navigation, filters and item actions readable. */
.admin-social-post-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  padding: .4rem;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: var(--surface-secondary);
}
.admin-social-post-manager-card .admin-card-heading { align-items: flex-start; }
.admin-social-post-filters {
  margin: 0 0 .85rem;
  align-items: stretch;
}
.admin-social-post-filters .form-control,
.admin-social-post-filters .btn { min-height: 42px; }
.admin-social-post-item {
  display: grid;
  gap: .65rem;
  background: color-mix(in srgb, var(--surface-secondary) 78%, var(--surface));
}
.admin-social-post-item .admin-report-content {
  margin: 0 !important;
  max-height: 130px;
}
.admin-social-post-item .admin-report-actions { margin-top: 0; }
.admin-social-post-kind {
  display: inline-flex;
  align-items: center;
  width: max-content;
  min-height: 26px;
  padding: .25rem .52rem;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-secondary);
  font-size: .68rem;
  font-weight: 800;
  white-space: nowrap;
}
.admin-social-post-kind.is-advertisement {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border-soft));
  color: var(--accent);
}

@media (max-width: 560px) {
  .chat-message-avatar {
    width: 24px;
    min-width: 24px;
    max-width: 24px;
    height: 24px;
    min-height: 24px;
    max-height: 24px;
    flex-basis: 24px;
  }
  .chat-message-avatar > img {
    width: 24px;
    min-width: 24px;
    max-width: 24px;
    height: 24px;
    min-height: 24px;
    max-height: 24px;
  }
  .admin-social-post-tabs { flex-wrap: nowrap; overflow-x: auto; }
  .admin-social-post-kind { align-self: flex-start; }
}
.maintenance-content-import-errors,.maintenance-content-import-warnings{margin:12px 0;padding:10px 12px;border-radius:12px;border:1px solid color-mix(in srgb,currentColor 18%,transparent)}
.maintenance-content-import-errors{background:rgba(225,76,86,.09)}.maintenance-content-import-warnings{background:rgba(225,174,60,.09)}
.maintenance-content-import-errors ul,.maintenance-content-import-warnings ul{margin:7px 0 0;padding-left:20px;display:grid;gap:4px}


/* V2.7.1.31 – registration ToA consent + deletion-feedback account snapshot */
.register-terms-consent { margin-top: .15rem; }
.register-terms-row { align-items: flex-start; gap: .65rem; }
.register-terms-row input { margin-top: .18rem; flex: 0 0 auto; }
.register-terms-row span { line-height: 1.45; }
.admin-deletion-privacy-note { margin: 0 0 1rem; }
.admin-deletion-feedback-table { min-width: 1120px; }
.admin-deletion-feedback-table td { vertical-align: top; }
.admin-deletion-feedback-meta { display: block; margin-top: .3rem; color: var(--text-secondary); white-space: nowrap; }

/* V2.7.1.32 – public ToA link + admin ToA editor */
.register-terms-line {
  display: flex;
  align-items: flex-start;
  gap: .35rem;
  flex-wrap: wrap;
}
.register-terms-line .register-terms-row { margin: 0; }
.register-terms-link {
  color: var(--accent);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: .16em;
}
.register-terms-link:hover { color: var(--accent-hover); }
.admin-terms-settings-card { display: grid; gap: 1rem; }
.admin-terms-editor { display: grid; gap: 1rem; }
.admin-terms-fields { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(220px, .7fr); gap: 1rem; }
.admin-terms-textarea { min-height: 320px; resize: vertical; font-family: inherit; line-height: 1.55; }
.admin-terms-actions { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }
@media (max-width: 760px) { .admin-terms-fields { grid-template-columns: 1fr; } .admin-terms-textarea { min-height: 260px; } }


/* =========================================================
   V2.7.1.34 – Profile tag presentation + clear selection state
   ========================================================= */
/* The profile page wraps tag GROUPS, not individual tags. The old shared
   .profile-interest-picker flex rule made several groups sit on one line. */
.public-profile-interests-compact #public-profile-interest-tags.profile-tag-groups-profile {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  align-items: stretch;
  gap: .72rem;
  width: 100%;
}
.public-profile-interests-compact #public-profile-interest-tags.profile-tag-groups-profile > .profile-tag-group {
  margin: 0;
  min-width: 0;
  align-content: start;
  gap: .52rem;
  padding: .72rem .78rem;
  border: 1px solid color-mix(in srgb, var(--border-soft) 86%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-secondary) 72%, transparent);
}
.public-profile-interests-compact #public-profile-interest-tags.profile-tag-groups-profile > .profile-tag-group h3 {
  margin: 0;
  font-size: .72rem;
  line-height: 1.2;
  font-weight: 850;
  letter-spacing: .055em;
  color: var(--text-secondary);
}
.public-profile-interests-compact #public-profile-interest-tags.profile-tag-groups-profile > .profile-tag-group .profile-interest-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .46rem;
}
.public-profile-interests-compact #public-profile-interest-tags.profile-tag-groups-profile .profile-interest-chip.is-static {
  min-height: 29px;
  max-width: 100%;
  padding: .42rem .68rem;
  white-space: normal;
  overflow-wrap: anywhere;
}
.public-profile-interests-compact #public-profile-interest-tags.profile-tag-groups-profile > .profile-tag-groups-tabs {
  grid-column: 1 / -1;
}

/* Settings/profile editor: selected tags must remain unmistakable even when a
   tag has custom rich HTML/CSS inside its shadow host. No checkboxes are used. */
#settings-modal .profile-interest-picker:not(.is-readonly) .profile-interest-chip {
  position: relative;
  outline: 2px solid transparent;
  outline-offset: 2px;
}
#settings-modal .profile-interest-picker:not(.is-readonly) .profile-interest-chip.is-selected {
  border-color: color-mix(in srgb, var(--interest-color, var(--accent)) 88%, var(--border)) !important;
  background: color-mix(in srgb, var(--interest-color, var(--accent)) 24%, var(--surface)) !important;
  color: var(--text-primary) !important;
  outline-color: color-mix(in srgb, var(--interest-color, var(--accent)) 78%, white 12%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--interest-color, var(--accent)) 42%, transparent),
    0 0 16px color-mix(in srgb, var(--interest-color, var(--accent)) 34%, transparent),
    inset 0 0 0 1px color-mix(in srgb, white 10%, transparent) !important;
  filter: saturate(1.12) brightness(1.08);
  transform: translateY(-1px);
}
#settings-modal .profile-interest-picker:not(.is-readonly) .profile-interest-chip.is-selected:hover {
  transform: translateY(-1px);
}
#settings-modal .profile-interest-picker:not(.is-readonly) .profile-interest-chip:focus-visible {
  outline-color: var(--accent);
  outline-offset: 3px;
}

@media (max-width: 680px) {
  .public-profile-interests-compact #public-profile-interest-tags.profile-tag-groups-profile {
    grid-template-columns: 1fr;
    gap: .58rem;
  }
  .public-profile-interests-compact #public-profile-interest-tags.profile-tag-groups-profile > .profile-tag-group {
    padding: .66rem .7rem;
  }
}

/* =========================================================
   V2.7.1.37 – Selected profile-tag ring follows the actual pill
   ========================================================= */
/* Rich profile tags render their visible pill on the inner shadow host.
   The V34 selection outline was applied to the semantic outer button, whose
   rich-tag shell is intentionally square/transparent. Move the visual ring to
   the rendered pill so the highlight follows the tag's own rounded shape. */
#settings-modal .profile-interest-picker:not(.is-readonly) .profile-interest-chip.rich-tag-shell {
  outline: none !important;
}
#settings-modal .profile-interest-picker:not(.is-readonly) .profile-interest-chip.rich-tag-shell.is-selected > .rich-tag-shadow-host {
  outline: 2px solid color-mix(in srgb, var(--interest-color, var(--accent)) 80%, white 10%);
  outline-offset: 2px;
  filter:
    saturate(1.1)
    brightness(1.05)
    drop-shadow(0 0 5px color-mix(in srgb, var(--interest-color, var(--accent)) 34%, transparent));
  transition: outline-color .16s ease, filter .16s ease, transform .16s ease;
}
#settings-modal .profile-interest-picker:not(.is-readonly) .profile-interest-chip.rich-tag-shell:focus-visible > .rich-tag-shadow-host {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Plain tags do not use a shadow host; keep the selected treatment on the
   pill itself, where border-radius:999px already matches its visible shape. */
#settings-modal .profile-interest-picker:not(.is-readonly) .profile-interest-chip:not(.rich-tag-shell).is-selected {
  outline-color: color-mix(in srgb, var(--interest-color, var(--accent)) 78%, white 12%);
  border-radius: 999px;
}

/* =========================================================
   V2.7.1.39 – Registration profile-tag selection mirrors settings
   ========================================================= */
/* Registration uses the same no-checkbox selection language as Profile &
   matching. Keep the semantic button focus/selection state, but for rich
   tags place the visual ring on the actual rendered pill inside the shadow
   host so custom tag geometry stays intact. */
#registration-interest-tags .profile-interest-picker .profile-interest-chip {
  position: relative;
  outline: 2px solid transparent;
  outline-offset: 2px;
}
#registration-interest-tags .profile-interest-picker .profile-interest-chip.is-selected {
  border-color: color-mix(in srgb, var(--interest-color, var(--accent)) 88%, var(--border)) !important;
  background: color-mix(in srgb, var(--interest-color, var(--accent)) 24%, var(--surface)) !important;
  color: var(--text-primary) !important;
  outline-color: color-mix(in srgb, var(--interest-color, var(--accent)) 78%, white 12%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--interest-color, var(--accent)) 42%, transparent),
    0 0 16px color-mix(in srgb, var(--interest-color, var(--accent)) 34%, transparent),
    inset 0 0 0 1px color-mix(in srgb, white 10%, transparent) !important;
  filter: saturate(1.12) brightness(1.08);
  transform: translateY(-1px);
}
#registration-interest-tags .profile-interest-picker .profile-interest-chip.is-selected:hover {
  transform: translateY(-1px);
}
#registration-interest-tags .profile-interest-picker .profile-interest-chip:focus-visible {
  outline-color: var(--accent);
  outline-offset: 3px;
}
#registration-interest-tags .profile-interest-picker .profile-interest-chip.rich-tag-shell {
  outline: none !important;
}
#registration-interest-tags .profile-interest-picker .profile-interest-chip.rich-tag-shell.is-selected > .rich-tag-shadow-host {
  outline: 2px solid color-mix(in srgb, var(--interest-color, var(--accent)) 80%, white 10%);
  outline-offset: 2px;
  filter:
    saturate(1.1)
    brightness(1.05)
    drop-shadow(0 0 5px color-mix(in srgb, var(--interest-color, var(--accent)) 34%, transparent));
  transition: outline-color .16s ease, filter .16s ease, transform .16s ease;
}
#registration-interest-tags .profile-interest-picker .profile-interest-chip.rich-tag-shell:focus-visible > .rich-tag-shadow-host {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
#registration-interest-tags .profile-interest-picker .profile-interest-chip:not(.rich-tag-shell).is-selected {
  outline-color: color-mix(in srgb, var(--interest-color, var(--accent)) 78%, white 12%);
  border-radius: 999px;
}


/* =========================================================
   V2.7.1.39 — required account-deletion reasons.
   ========================================================= */
.account-delete-reasons {
  margin: 0 0 1rem;
  padding: 0;
  border: 0;
}
.account-delete-reasons legend {
  margin-bottom: .2rem;
  color: var(--text-primary);
  font-weight: 800;
}
.account-delete-reasons-hint {
  margin: 0 0 .7rem;
  color: var(--text-muted);
  font-size: .78rem;
}
.account-delete-reason-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem;
}
.account-delete-reason-option {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  min-height: 46px;
  padding: .72rem .78rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-secondary);
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, color .16s ease;
}
.account-delete-reason-option:hover {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
}
.account-delete-reason-option:has(input:checked) {
  border-color: color-mix(in srgb, var(--accent) 72%, var(--border));
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-secondary));
  color: var(--text-primary);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent), 0 0 14px color-mix(in srgb, var(--accent) 12%, transparent);
}
.account-delete-reason-option input {
  width: 16px;
  height: 16px;
  margin: .12rem 0 0;
  accent-color: var(--accent);
  flex: 0 0 auto;
}
.account-delete-reason-option span { line-height: 1.35; font-size: .84rem; }
.admin-deletion-feedback-reasons { min-width: 220px; }
.admin-deletion-reason-list { display: flex; flex-wrap: wrap; gap: .35rem; }
.admin-deletion-reason-chip {
  display: inline-flex;
  align-items: center;
  padding: .28rem .5rem;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-secondary));
  color: var(--text-secondary);
  font-size: .72rem;
  line-height: 1.25;
}
@media (max-width: 640px) {
  .account-delete-reason-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   V2.7.1.43 – configurable account-deletion reasons
   ========================================================= */
.account-delete-reason-content {
  display: grid;
  gap: .18rem;
  min-width: 0;
}
.account-delete-reason-comment-required {
  color: var(--text-muted);
  font-size: .69rem;
  line-height: 1.2;
}
.account-delete-reason-option:has(input:checked) .account-delete-reason-comment-required {
  color: color-mix(in srgb, var(--accent) 70%, var(--text-secondary));
}
.admin-deletion-settings-card { display: grid; gap: .9rem; }
.admin-deletion-settings-note { margin: 0; }
.admin-deletion-reason-settings-list { display: grid; gap: .55rem; }
.admin-deletion-reason-settings-head,
.admin-deletion-reason-setting-row {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(90px, .22fr) minmax(150px, .3fr) auto;
  gap: .75rem;
  align-items: center;
}
.admin-deletion-reason-settings-head {
  padding: 0 .55rem;
  color: var(--text-muted);
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.admin-deletion-reason-setting-row {
  padding: .65rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-secondary);
}
.admin-deletion-reason-setting-label { min-width: 0; }
.admin-deletion-setting-toggle {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--text-secondary);
  font-size: .82rem;
  cursor: pointer;
}
.admin-deletion-setting-toggle input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}
.admin-deletion-setting-order { display: inline-flex; gap: .35rem; justify-content: flex-end; }
.admin-deletion-setting-order .compact-button { min-width: 38px; padding-inline: .55rem; }
@media (max-width: 820px) {
  .admin-deletion-reason-settings-head { display: none; }
  .admin-deletion-reason-setting-row { grid-template-columns: 1fr 1fr; }
  .admin-deletion-reason-setting-label { grid-column: 1 / -1; }
  .admin-deletion-setting-order { grid-column: 1 / -1; justify-content: flex-start; }
}

/* V2.7.1.49: Premium message media composer */
.messages-composer-tools{display:flex;align-items:center;gap:8px;margin-top:8px;position:relative;flex-wrap:wrap}
.messages-tool-button{font:inherit;background:var(--surface-secondary,#342943);border:1px solid var(--border-soft,#b88ad9);border-radius:9px;padding:6px 10px;cursor:pointer;color:inherit}
.messages-emoji-picker{position:absolute;left:0;bottom:calc(100% + 6px);display:grid;grid-template-columns:repeat(6,1fr);gap:3px;max-width:min(290px,80vw);background:var(--surface-elevated,#342943);padding:10px;border:1px solid #9b77c0;border-radius:12px;box-shadow:0 6px 25px #1e003c3d;z-index:10}
.messages-emoji-picker[hidden],.messages-image-pending[hidden],.messages-tool-button[hidden]{display:none!important}
.messages-emoji-picker button{font-size:22px;border:none;background:transparent;cursor:pointer;padding:6px;border-radius:6px}
.messages-emoji-picker button:hover{background:#ede9fe}
.messages-image-pending{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin-top:7px;font-size:12px}
.messages-image-pending select{max-width:145px;border-radius:8px;padding:5px;background:var(--input-background,#342943);color:inherit}
.messages-image-pending button{border:0;background:transparent;cursor:pointer;color:inherit}
.message-private-image{display:block;max-width:min(300px,72vw);max-height:330px;object-fit:contain;border-radius:10px;margin:5px 0;cursor:pointer}
.message-image-expiration{font-size:11px;opacity:.78;margin:2px 0 6px}

/* V2.7.1.51 — Focused mobile conversation: reclaim space used by the global header.
 * Inbox keeps its normal header; only an open mobile PM hides it. */
@media (max-width: 850px) {
  body.messages-page.is-mobile-conversation-active {
    padding-top: 0 !important;
  }
  body.messages-page.is-mobile-conversation-active > .app-header {
    display: none !important;
  }
  body.messages-page.is-mobile-conversation-active .messages-shell,
  html[data-theme="spaceglas"] body.messages-page.is-mobile-conversation-active .messages-shell {
    height: 100%;
    min-height: 0;
    padding: 0;
  }
  body.messages-page.is-mobile-conversation-active .messages-chat {
    border-radius: 0;
  }
  body.messages-page.is-mobile-conversation-active .messages-chat-header {
    top: 0;
  }
  body.messages-page.is-mobile-conversation-active .messages-chat-active {
    height: 100%;
    min-height: 0;
  }
}

/* Private in-chat image viewer (no new tab; guarded media URL unchanged). */
.pm-image-viewer[hidden] { display: none !important; }
.pm-image-viewer {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: grid;
  place-items: center;
  padding: max(16px, env(safe-area-inset-top)) 14px max(16px, env(safe-area-inset-bottom));
  box-sizing: border-box;
}
.pm-image-viewer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(9, 4, 16, .91);
  backdrop-filter: blur(12px);
}
/* V2.7.1.52: Size the lightbox by its viewport, not the image's intrinsic grid size. */
.pm-image-viewer-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(88vw, 820px);
  height: min(76dvh, 640px);
  max-width: calc(100vw - 48px);
  max-height: calc(100dvh - 64px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  min-width: 0;
  min-height: 0;
}
.pm-image-viewer-content img {
  display: block;
  flex: 0 1 auto;
  max-width: min(88vw, 820px);
  max-height: min(76dvh, 640px);
  min-width: 0;
  min-height: 0;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
@media (max-width: 850px) {
  .pm-image-viewer-content {
    width: calc(100vw - 28px);
    height: min(88dvh, 820px);
    max-width: calc(100vw - 28px);
    max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
  .pm-image-viewer-content img {
    max-width: calc(100vw - 28px);
    max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
}
.pm-image-viewer-close {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid rgba(255,255,255,.36);
  border-radius: 50%;
  background: rgba(18, 12, 24, .9);
  color: #fff;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}
body.pm-image-viewer-open { overflow: hidden !important; }
.message-private-image {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.message-private-image:focus-visible {
  outline: 3px solid var(--accent, #a855f7);
  outline-offset: 3px;
}

/* V2.7.1.57 – prevent animated jump when a PM message is sent/received.
   The shared chat list uses smooth scrolling, but programmatic bottom-pinning
   must be immediate on mobile (including SpaceGlas). */
.messages-page .messages-thread {
  scroll-behavior: auto;
}

/* V2.7.1.60 — Full-height private conversation; restore bottom menu in Inbox. */
@media (max-width: 850px) {
  body.messages-page.is-mobile-conversation-active .mobile-bottom-nav,
  html body.messages-page.is-mobile-conversation-active .mobile-bottom-nav {
    display: none !important;
    visibility: hidden !important;
  }
  body.messages-page.is-mobile-conversation-active {
    padding-bottom: 0 !important;
  }
  body.messages-page.is-mobile-conversation-active .messages-shell {
    height: 100dvh;
    min-height: 0;
  }
}