/* ==========================================================================
   Crowdwide — Modern UI layer
   Loaded last. Pure presentation: it restyles existing markup using the
   theme tokens (--sf-*, --bd-*, --tx-*, --ac-*, --blue, --orange …) so every
   theme (default, light, dark, violet, pink) adapts automatically.
   Covers: wallet, verify, two-factor (auth shell), settings, search,
   rising communities.
   ========================================================================== */

:root {
  --mu-radius: 18px;
  --mu-radius-sm: 12px;
  --mu-shadow: 0 1px 0 var(--ov-2) inset, 0 18px 44px -24px rgba(0, 0, 0, .55);
  --mu-ring: 0 0 0 3px color-mix(in srgb, var(--blue) 28%, transparent);
  --mu-grad: linear-gradient(115deg, var(--blue), color-mix(in srgb, var(--blue) 45%, var(--pink)));
  --mu-glow: color-mix(in srgb, var(--blue) 20%, transparent);
  --mu-ease: cubic-bezier(.22, .8, .3, 1);
}
body[data-theme="light"], body[data-theme="pink"] {
  --mu-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 14px 34px -22px rgba(40, 50, 80, .35);
}

@keyframes mu-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .wallet-page > *, .settings-content > *, .search-page > *, .radar-modern .community-radar-card,
  .auth-card { animation: mu-rise .5s var(--mu-ease) both; }
  .wallet-page > *:nth-child(2) { animation-delay: .05s; } .wallet-page > *:nth-child(3) { animation-delay: .1s; }
  .wallet-page > *:nth-child(4) { animation-delay: .15s; }
  .radar-modern .community-radar-card:nth-child(2) { animation-delay: .05s; }
  .radar-modern .community-radar-card:nth-child(3) { animation-delay: .1s; }
  .radar-modern .community-radar-card:nth-child(4) { animation-delay: .15s; }
  .radar-modern .community-radar-card:nth-child(n+5) { animation-delay: .2s; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

/* ---------- Shared form + button polish (these pages) ---------- */
:is(.wallet-page, .settings-modern, .search-page, .auth-shell) :is(input, select, textarea) {
  background-color: var(--sf-1); border: 1px solid var(--bd-1); border-radius: var(--mu-radius-sm);
  color: var(--tx-hi); min-height: 46px; transition: border-color .18s, box-shadow .18s, background-color .18s;
}
:is(.wallet-page, .settings-modern, .search-page, .auth-shell) :is(input, select, textarea):hover { border-color: var(--bd-2); }
:is(.wallet-page, .settings-modern, .search-page, .auth-shell) :is(input, select, textarea):focus-visible,
:is(.wallet-page, .settings-modern, .search-page, .auth-shell) :is(input, select, textarea):focus {
  border-color: var(--blue); box-shadow: var(--mu-ring); background-color: var(--sf-1);
}
:is(.wallet-page, .settings-modern, .search-page, .auth-shell) input::placeholder,
:is(.wallet-page, .settings-modern, .search-page, .auth-shell) textarea::placeholder { color: var(--tx-faint); opacity: .75; }
:is(.wallet-page, .settings-modern, .search-page, .auth-shell) select { background-color: var(--sf-1); }
:is(.wallet-page, .settings-modern, .search-page, .auth-shell, .radar-modern) .button { min-height: 44px; }
:is(.wallet-page, .settings-modern, .search-page, .auth-shell, .radar-modern) .button-small { min-height: 38px; }
:is(.wallet-page, .settings-modern, .search-page, .auth-shell, .radar-modern) .button-primary {
  background: var(--mu-grad); color: #fff; box-shadow: 0 12px 28px -12px color-mix(in srgb, var(--blue) 75%, transparent);
}
:is(.wallet-page, .settings-modern, .search-page, .auth-shell, .radar-modern) .button-primary:hover {
  filter: brightness(1.07); box-shadow: 0 16px 34px -12px color-mix(in srgb, var(--blue) 85%, transparent);
}
:is(.wallet-page, .settings-modern, .search-page, .auth-shell, .radar-modern) .button-ghost {
  background: var(--ov-1); border: 1px solid var(--bd-1); color: var(--tx-hi);
}
:is(.wallet-page, .settings-modern, .search-page, .auth-shell, .radar-modern) .button-ghost:hover { background: var(--ov-2); border-color: var(--bd-2); }
:is(.settings-modern, .auth-shell) .button-danger { background: var(--ac-red); color: #fff; }
:is(.settings-modern, .auth-shell) .button-danger:hover { filter: brightness(1.08); }
.button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
:is(.wallet-page, .settings-modern, .search-page, .auth-shell) .btn-arrow { display: inline-flex; transition: transform .2s; }
:is(.wallet-page, .settings-modern, .search-page, .auth-shell) .button:hover .btn-arrow { transform: translate(2px, -2px); }

/* =====================================================================
   1. AUTH SHELL  (verify, two-factor, + shared sign-in family)
   ===================================================================== */
.auth-page {
  background:
    radial-gradient(60% 50% at 15% 0%, var(--mu-glow), transparent 70%),
    radial-gradient(45% 45% at 100% 100%, color-mix(in srgb, var(--pink) 14%, transparent), transparent 70%),
    var(--ink);
  min-height: 100vh; min-height: 100dvh;
}
.auth-shell { width: min(480px, calc(100% - 32px)); padding: clamp(28px, 6vh, 56px) 0 40px; }
.auth-brand { margin-bottom: 28px; gap: 10px; font-size: 20px; }
.auth-card {
  position: relative; overflow: hidden; background: color-mix(in srgb, var(--sf-1) 88%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line); border-radius: 24px; padding: clamp(24px, 5vw, 40px); box-shadow: var(--mu-shadow);
}
.auth-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--mu-grad); }
.auth-card h1 { font-size: clamp(30px, 7vw, 40px); line-height: 1.05; margin-bottom: 4px; }
.auth-card h1 em { background: var(--mu-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.auth-card .eyebrow { margin-bottom: 10px; }
.auth-card .form-note { font-size: 14px; line-height: 1.6; margin: 14px 0 24px; }
.auth-card .form-note strong { color: var(--tx-hi); word-break: break-all; }
.auth-badge {
  width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 20px;
  color: var(--blue); background: color-mix(in srgb, var(--blue) 14%, var(--sf-2));
  border: 1px solid color-mix(in srgb, var(--blue) 35%, var(--bd-1));
  box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--blue) 70%, transparent);
}
.auth-form { gap: 16px; }
.auth-form label { font-size: 12.5px; font-weight: 600; color: var(--tx-mid); letter-spacing: .1px; }
.auth-form button[type="submit"] { margin-top: 4px; }
.code-input {
  font: 700 clamp(24px, 8vw, 32px) 'Space Grotesk', sans-serif !important; letter-spacing: clamp(6px, 2.6vw, 12px) !important;
  text-align: center; padding: 14px 8px 14px calc(8px + .5em) !important; min-height: 62px !important;
  background: var(--sf-0) !important; font-variant-numeric: tabular-nums;
}
.switch-auth { font-size: 13px; margin-top: 22px; }
.auth-foot { font-size: 13px; }
.auth-foot a { color: var(--tx-lo); transition: color .15s; } .auth-foot a:hover { color: var(--tx-hi); }
.two-factor-qr {
  width: min(210px, 62vw); height: auto; aspect-ratio: 1; padding: 12px; border-radius: 18px; border: 1px solid var(--line);
  box-shadow: 0 18px 40px -20px rgba(0,0,0,.6); margin: 4px auto 26px;
}
.two-factor-card .auth-form + .auth-form { margin-top: 0; }
.two-factor-card form.auth-form[style] { padding-bottom: 18px; margin-bottom: 18px !important; border-bottom: 1px dashed var(--line); }
.flash { border-radius: var(--mu-radius-sm); padding: 12px 16px; font-size: 13.5px; margin-bottom: 18px; border: 1px solid var(--line); background: var(--sf-2); }
.flash-success { border-color: color-mix(in srgb, var(--green) 50%, transparent); background: color-mix(in srgb, var(--green) 12%, var(--sf-1)); color: var(--tx-hi); }
.flash-error { border-color: color-mix(in srgb, var(--ac-red) 55%, transparent); background: color-mix(in srgb, var(--ac-red) 12%, var(--sf-1)); color: var(--tx-hi); }

/* =====================================================================
   2. WALLET
   ===================================================================== */
.wallet-page { max-width: 1040px; gap: 22px; padding-top: 32px; position: relative; }
.wallet-page .back-link { margin-bottom: 4px; display: inline-flex; align-items: center; gap: 6px; color: var(--tx-lo); font-weight: 600; font-size: 13px; transition: color .15s, transform .15s; }
.wallet-page .back-link:hover { color: var(--tx-hi); transform: translateX(-2px); }
.wallet-heading { padding: 4px 0 4px; max-width: 760px; }
.wallet-heading h1 { font-size: clamp(32px, 6vw, 48px); letter-spacing: -1.8px; margin: 2px 0 12px; }
.wallet-heading p { color: var(--tx-lo); font-size: 14.5px; line-height: 1.65; margin: 0 0 8px; }
.wallet-heading a { color: var(--ac-blue); font-weight: 600; border-bottom: 1px solid color-mix(in srgb, var(--ac-blue) 40%, transparent); }
.wallet-heading a:hover { border-bottom-color: currentColor; }
.wallet-stats { grid-template-columns: 1.5fr 1fr 1fr; gap: 14px; }
.wallet-stats .recap-stat {
  position: relative; overflow: hidden; padding: 22px; border-radius: var(--mu-radius); background: var(--panel);
  border: 1px solid var(--line); box-shadow: var(--mu-shadow); display: flex; flex-direction: column; justify-content: space-between; gap: 14px;
  transition: transform .25s var(--mu-ease), border-color .2s;
}
.wallet-stats .recap-stat:hover { transform: translateY(-2px); border-color: var(--bd-2); }
.wallet-stats .recap-stat span { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; color: var(--tx-lo); }
.wallet-stats .recap-stat strong { margin: 0; font-size: clamp(26px, 4.4vw, 36px); letter-spacing: -1px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.wallet-balance { background: var(--mu-grad) !important; border-color: transparent !important; color: #fff; box-shadow: 0 24px 50px -24px color-mix(in srgb, var(--blue) 80%, transparent) !important; }
.wallet-balance::after { content: ""; position: absolute; right: -50px; top: -60px; width: 190px; height: 190px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.28), transparent 68%); pointer-events: none; }
.wallet-balance span, .wallet-balance strong { color: #fff !important; position: relative; z-index: 1; }
.wallet-balance span { opacity: .88; }
.wallet-balance strong { font-size: clamp(32px, 6vw, 46px) !important; }
.wallet-earned strong { color: var(--green); } .wallet-spent strong { color: var(--ac-orange); }
.wallet-page .recap-panel { padding: clamp(18px, 3vw, 28px); border-radius: var(--mu-radius); box-shadow: var(--mu-shadow); background: var(--panel); }
.wallet-page .recap-section-heading { margin-bottom: 20px; align-items: flex-end; flex-wrap: wrap; }
.wallet-page .recap-section-heading h2 { font-size: clamp(20px, 3vw, 24px); letter-spacing: -.6px; }
.wallet-form { display: grid !important; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) auto; gap: 14px; align-items: end; }
.wallet-form label { min-width: 0 !important; font-size: 12px !important; font-weight: 600; color: var(--tx-mid) !important; gap: 7px !important; }
.wallet-form :is(input[type="email"], input[type="number"]) { width: 100% !important; min-height: 46px; padding: 11px 14px !important; font-size: 15px; }
.wallet-form .admin-edit-form-actions { margin: 0; }
.wallet-form .button { min-height: 46px; padding-inline: 24px; }
.wallet-page .recap-muted { color: var(--tx-faint); font-size: 12.5px; }
.wallet-send > .recap-muted { margin: 14px 0 0; display: flex; align-items: center; gap: 6px; }
.wallet-table-wrap { overflow-x: auto; margin: 0 -6px; padding: 0 6px; }
.wallet-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.wallet-table th { font-size: 11px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--tx-faint); font-weight: 700; padding: 10px 14px; white-space: nowrap; text-align: left; }
.wallet-table td { padding: 15px 14px; font-size: 13.5px; color: var(--tx-mid); border-bottom: 1px solid var(--line); vertical-align: middle; }
.wallet-table tbody tr { transition: background .15s; }
.wallet-table tbody tr:hover { background: var(--ov-1); }
.wallet-table tbody tr:hover td:first-child { border-radius: 10px 0 0 10px; } .wallet-table tbody tr:hover td:last-child { border-radius: 0 10px 10px 0; }
.wallet-table td a { color: var(--ac-blue); font-weight: 600; }
.wallet-type { text-transform: capitalize; font-weight: 700; color: var(--tx-hi); }
.wallet-status { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: capitalize; background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); border: 1px solid color-mix(in srgb, var(--green) 35%, transparent); }
.wallet-amount { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wallet-amount.is-in { color: var(--green); } .wallet-amount.is-out { color: var(--ac-red); }
.wallet-table td:last-child { font-variant-numeric: tabular-nums; color: var(--tx-lo); }
.wallet-page .recap-empty { text-align: center; padding: 40px 16px; border: 1px dashed var(--bd-1); border-radius: var(--mu-radius-sm); color: var(--tx-faint); margin: 0; }

/* =====================================================================
   3. SETTINGS
   ===================================================================== */
.settings-modern { max-width: 1240px; gap: clamp(24px, 4vw, 48px); grid-template-columns: 270px minmax(0, 1fr); }
.settings-modern .settings-nav {
  padding: 22px 16px; border: 1px solid var(--line); border-radius: 22px; background: var(--panel); box-shadow: var(--mu-shadow);
  top: calc(var(--header-h) + 24px);
}
.settings-modern .settings-nav h1 { font-size: 30px; margin: 0 6px 12px; letter-spacing: -1px; }
.settings-modern .settings-nav .eyebrow { margin: 0 6px 6px; }
.settings-modern .settings-nav > .settings-link {
  display: block; margin: 0 6px 16px; padding: 0 0 16px; border-bottom: 1px solid var(--line); border-left: 0; border-radius: 0; color: var(--ac-blue); font-size: 13px; font-weight: 600; background: none;
}
.settings-modern .settings-nav > .settings-link:hover { background: none; color: var(--tx-hi); border-color: var(--line); }
.settings-modern .settings-tabs { gap: 4px; }
.settings-modern .settings-tabs > a {
  display: flex; align-items: center; gap: 12px; padding: 11px 12px; border: 0; border-radius: 12px; font-size: 14px; font-weight: 500; color: var(--tx-lo);
  transition: background .15s, color .15s, transform .15s;
}
.settings-modern .settings-tabs > a .icon { color: var(--tx-faint); transition: color .15s; flex: none; }
.settings-modern .settings-tabs > a:hover { background: var(--ov-2); color: var(--tx-hi); }
.settings-modern .settings-tabs > a.settings-active {
  background: color-mix(in srgb, var(--blue) 16%, var(--sf-2)); color: var(--tx-hi); font-weight: 700;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 40%, transparent);
}
.settings-modern .settings-tabs > a.settings-active .icon, .settings-modern .settings-tabs > a:hover .icon { color: var(--blue); }
.settings-modern .settings-content { padding: 0; min-height: 60vh; }
.settings-modern .settings-content > .eyebrow { margin-bottom: 8px; }
.settings-modern .settings-content > h2 { font-size: clamp(28px, 4.6vw, 40px); letter-spacing: -1.4px; margin-bottom: 22px; }
.settings-modern .settings-content > :is(.settings-form, .settings-block, form, .device-row) { max-width: 820px; }
.settings-modern .settings-form:not(.compact), .settings-modern .settings-form.compact:not(.settings-theme-form):not(.notification-settings-form) {
  padding: clamp(18px, 3vw, 28px); border: 1px solid var(--line); border-radius: var(--mu-radius); background: var(--panel); box-shadow: var(--mu-shadow); gap: 20px;
}
.settings-modern .settings-theme-form { padding: 0; border: 0; background: none; box-shadow: none; }
.settings-modern .settings-form label, .settings-modern .settings-block label { color: var(--tx-mid); font-size: 13px; font-weight: 600; gap: 8px; }
.settings-modern .settings-form small { font-weight: 400; color: var(--tx-faint); font-size: 12px; line-height: 1.5; }
.settings-modern .settings-form label > img { border-radius: 14px; max-height: 190px; }
.settings-modern .settings-block {
  max-width: 820px; margin-top: 18px; padding: clamp(18px, 3vw, 26px); border-radius: var(--mu-radius); box-shadow: var(--mu-shadow);
}
.settings-modern .settings-block h3 { font-size: 18px; letter-spacing: -.4px; margin-bottom: 6px; }
.settings-modern .settings-block p { font-size: 13.5px; line-height: 1.6; color: var(--tx-lo); margin: 0 0 6px; }
.settings-modern .settings-block-heading { align-items: center; gap: 14px 20px; }
.settings-modern .settings-block-heading p { margin: 0; }
.settings-modern input[type="file"] {
  min-height: 0; padding: 12px; border: 1.5px dashed var(--bd-2); border-radius: var(--mu-radius-sm); background: var(--ov-1); color: var(--tx-lo); cursor: pointer; transition: background .15s, border-color .15s;
}
.settings-modern input[type="file"]:hover { background: var(--ov-2); border-color: var(--blue); }
.settings-modern input[type="file"]::file-selector-button { border: 0; border-radius: 999px; padding: 9px 16px; margin-right: 12px; background: var(--mu-grad); color: #fff; font-weight: 700; cursor: pointer; }
.settings-modern .link-fields { display: grid; gap: 10px; }
.settings-modern .link-field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 10px; }
.settings-modern .avatar.large { box-shadow: 0 0 0 3px var(--panel), 0 0 0 5px color-mix(in srgb, var(--blue) 55%, transparent); border-color: transparent; }
.settings-modern .settings-form > button.button { width: 100%; min-height: 50px; }

/* device + history rows */
.settings-modern .device-row {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-top: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--sf-1); transition: border-color .15s, background .15s;
}
.settings-modern .device-row:hover { border-color: var(--bd-2); }
.settings-modern .settings-content > .device-row { background: var(--panel); }
.settings-modern .device-row > div { flex: 1; min-width: 0; display: grid; gap: 3px; }
.settings-modern .device-row strong { font-size: 14px; color: var(--tx-hi); overflow-wrap: anywhere; }
.settings-modern .device-row span { font-size: 12.5px; color: var(--tx-faint); }
.settings-modern .device-icon { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 11px; background: color-mix(in srgb, var(--blue) 14%, var(--sf-2)); color: var(--blue) !important; }
.settings-modern .device-row > em { font-style: normal; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); border: 1px solid color-mix(in srgb, var(--green) 35%, transparent); white-space: nowrap; }
.settings-modern .round-action { width: 32px; height: 32px; display: grid; place-items: center; line-height: 1; font-size: 18px; border-color: var(--bd-2); color: var(--tx-lo); transition: all .15s; }
.settings-modern .round-action:hover { background: var(--ac-red); border-color: var(--ac-red); color: #fff; }
.settings-modern .danger-zone { border-color: color-mix(in srgb, var(--ac-red) 45%, var(--line)); background: color-mix(in srgb, var(--ac-red) 6%, var(--panel)); }
.settings-modern .danger-zone h3 { color: var(--ac-red); }
.settings-modern .danger-zone form { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.settings-modern .danger-zone form input { flex: 1 1 220px; width: auto; }
.settings-modern .danger-zone form textarea { flex: 1 1 100%; }

/* notification toggles */
.settings-modern .notification-group { padding: 6px 20px 12px; border-radius: var(--mu-radius); background: var(--panel); box-shadow: var(--mu-shadow); }
.settings-modern .notification-group legend { padding: 0 10px; font-size: 16px; }
.settings-modern .notification-group > p { font-size: 13px; margin: 8px 0 4px; color: var(--tx-lo); }
.settings-modern .settings-form .notification-option { padding: 16px 0; gap: 18px; border-top: 1px solid var(--line); cursor: pointer; }
.settings-modern .settings-form .notification-option:first-of-type { border-top: 1px solid var(--line); }
.settings-modern .settings-form .notification-option strong { font-size: 14px; font-weight: 600; }
.settings-modern .settings-form .notification-option small { font-size: 12.5px; }
.settings-modern input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; width: 46px !important; height: 26px !important; min-height: 0; flex: none; margin: 0; padding: 0;
  border-radius: 999px; border: 1px solid var(--bd-2); background: var(--sf-3); position: relative; cursor: pointer; transition: background .2s, border-color .2s;
}
.settings-modern input[type="checkbox"]::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.35); transition: transform .22s var(--mu-ease);
}
.settings-modern input[type="checkbox"]:checked { background: var(--mu-grad); border-color: transparent; }
.settings-modern input[type="checkbox"]:checked::after { transform: translateX(20px); }
.settings-modern .settings-form label > span input[type="checkbox"], .settings-modern .settings-block label > span input[type="checkbox"] { width: 46px !important; height: 26px !important; }
.settings-modern label:has(> span > #push-toggle) > span { display: flex; align-items: center; gap: 14px; font-weight: 600; }
.settings-modern .form-note { color: var(--tx-lo); font-size: 13px; margin: 10px 0 0; }
.settings-modern .settings-content > form[action="/auth/logout"] { margin-top: 20px; }

/* =====================================================================
   4. SEARCH
   ===================================================================== */
.search-page { max-width: 1120px; padding-top: 36px; position: relative; }
.search-page > .eyebrow { margin-bottom: 8px; }
.search-page > h1 { font-size: clamp(30px, 5.6vw, 52px); letter-spacing: -2px; line-height: 1.04; max-width: 820px; }
.search-page .search-filter-form {
  margin: 26px 0 40px; padding: clamp(14px, 2.4vw, 22px); gap: 12px; border: 1px solid var(--line); border-radius: 22px;
  background: var(--panel); box-shadow: var(--mu-shadow); max-width: 100%;
}
.search-page .search-filter-form > input[type="search"] {
  min-height: 54px; font-size: 16px; border-radius: 16px; padding-left: 50px; border-color: var(--bd-2);
  background: var(--sf-0) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8fb5' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 17px center / 20px;
}
.search-page .search-filter-form > input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }
.search-page .search-filter-form > select { min-height: 46px; padding: 10px 38px 10px 14px; font-size: 14px; }
.search-page .search-date { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; gap: 6px; color: var(--tx-faint); }
.search-page .search-date input { min-height: 46px; font-size: 14px; text-transform: none; letter-spacing: 0; padding: 10px 12px; }
.search-page .search-media { min-height: 46px; border-radius: 999px; padding: 0 16px; font-size: 13px; font-weight: 600; color: var(--tx-mid); background: var(--sf-1); border: 1px solid var(--bd-1); cursor: pointer; transition: all .15s; }
.search-page .search-media:hover { border-color: var(--blue); }
.search-page .search-media:has(input:checked) { background: color-mix(in srgb, var(--blue) 16%, var(--sf-1)); border-color: var(--blue); color: var(--tx-hi); }
.search-page .search-media input { min-height: 0 !important; width: 16px !important; height: 16px; accent-color: var(--blue); }
.search-page .search-filter-form > button { min-height: 50px; align-self: end; }
.search-page .search-section { margin-bottom: 36px; }
.search-page .search-section h2 { font-size: 20px; letter-spacing: -.6px; margin-bottom: 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.search-page .search-section h2 form { margin-left: auto; }
.search-page .search-discovery-grid { gap: 18px; margin: 0 0 26px; }
.search-page .search-discovery-grid > .search-section {
  margin: 0; padding: 22px; border: 1px solid var(--line); border-radius: var(--mu-radius); background: var(--panel); box-shadow: var(--mu-shadow); min-width: 0;
}
.search-page .popular-search-list { gap: 8px; }
.search-page .popular-search-list a {
  padding: 12px 14px; border-radius: 12px; background: var(--sf-1); border-color: var(--line); color: var(--tx-mid); transition: transform .18s var(--mu-ease), border-color .15s, background .15s;
}
.search-page .popular-search-list a:hover { transform: translateX(3px); border-color: var(--blue); background: color-mix(in srgb, var(--blue) 10%, var(--sf-1)); color: var(--tx-hi); }
.search-page .popular-search-list a > .icon { color: var(--blue); }
.search-page .hashtag-row { display: flex; flex-wrap: wrap; gap: 8px; }
.search-page .hashtag-chip { padding: 7px 14px; font-size: 13px; font-weight: 600; transition: all .15s; }
.search-page .hashtag-chip small { margin-left: 6px; opacity: .75; font-size: 11px; }
.search-page .hashtag-chip:hover { background: var(--mu-grad); border-color: transparent; color: #fff; transform: translateY(-1px); }
.search-empty { border: 1.5px dashed var(--bd-1); border-radius: 22px; padding: clamp(36px, 8vw, 64px) 20px; background: linear-gradient(180deg, var(--ov-1), transparent); }
.search-empty-icon { width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 20px; display: grid; place-items: center; color: var(--blue); background: color-mix(in srgb, var(--blue) 14%, var(--sf-2)); border: 1px solid color-mix(in srgb, var(--blue) 30%, var(--bd-1)); }
.search-empty h2 { font-size: clamp(22px, 4vw, 28px); letter-spacing: -.8px; overflow-wrap: anywhere; }
.search-empty p { font-size: 14px; }
/* results */
.search-page .search-user-row, .search-page .search-community-row {
  border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; margin-bottom: 10px; background: var(--panel); transition: transform .18s var(--mu-ease), border-color .15s, box-shadow .15s;
}
.search-page .search-user-row:hover, .search-page .search-community-row:hover { border-color: var(--bd-2); transform: translateY(-2px); box-shadow: var(--mu-shadow); }
.search-page .search-user-link strong { font-size: 15px; } .search-page .search-community-row strong { font-size: 15px; }
.search-page .search-user-row > .person-bio { margin-left: 56px; font-size: 13px; }
.search-page .search-community-glyph { width: 44px; height: 44px; flex: none; border-radius: 13px; display: grid; place-items: center; overflow: hidden; background: var(--mu-grad); color: #fff; font: 700 18px 'Space Grotesk', sans-serif; }
.search-page .search-result-post { padding: 18px 20px; border-radius: 16px; transition: border-color .15s, transform .18s var(--mu-ease); }
.search-page .search-result-post:hover { border-color: var(--bd-2); transform: translateY(-2px); }
.search-page .post-open-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-weight: 700; font-size: 13px; color: var(--ac-blue); }
.search-page .post-open-link:hover { color: var(--tx-hi); }
.search-page .post-stat-row { display: flex; gap: 16px; color: var(--tx-faint); font-size: 12.5px; }
.search-page .post-stat-row span { display: inline-flex; align-items: center; gap: 5px; }

/* =====================================================================
   5. RISING COMMUNITIES
   ===================================================================== */
.radar-modern { max-width: 1240px; padding-top: 32px; }
.radar-modern .community-radar-heading { max-width: 780px; margin-bottom: 30px; position: relative; }
.radar-modern .community-radar-heading .back-link { display: inline-flex; align-items: center; margin-bottom: 20px; font-weight: 600; color: var(--tx-lo); transition: color .15s, transform .15s; }
.radar-modern .community-radar-heading .back-link:hover { color: var(--tx-hi); transform: translateX(-2px); }
.radar-modern .community-radar-heading h1 { font-size: clamp(34px, 6.4vw, 56px); letter-spacing: -2.2px; margin: 2px 0 14px; background: linear-gradient(110deg, var(--tx-hi) 30%, var(--ac-orange)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.radar-modern .community-radar-heading > p:last-child { font-size: 15px; line-height: 1.65; max-width: 640px; }
.radar-modern .community-radar-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.radar-modern .community-radar-card {
  position: relative; gap: 14px; padding: 22px; border-radius: 22px; border: 1px solid var(--line); background: var(--panel); box-shadow: var(--mu-shadow); overflow: hidden;
  transition: transform .28s var(--mu-ease), border-color .2s, box-shadow .25s; align-content: start;
}
.radar-modern .community-radar-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--mu-grad); opacity: 0; transition: opacity .2s; }
.radar-modern .community-radar-card:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--blue) 50%, var(--line)); box-shadow: 0 26px 50px -26px color-mix(in srgb, var(--blue) 60%, transparent); }
.radar-modern .community-radar-card:hover::before { opacity: 1; }
.radar-modern .community-radar-rank { height: 28px; min-width: 40px; padding: 0 10px; font-weight: 800; font-size: 12.5px; background: var(--sf-3); color: var(--tx-mid); border: 1px solid var(--bd-1); }
.radar-modern .community-radar-rank.is-top { background: linear-gradient(120deg, #ffcf6b, #ff9a4d); color: #3a1d00; border-color: transparent; box-shadow: 0 8px 18px -8px rgba(255, 154, 77, .8); }
.radar-modern .community-radar-score { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--green); background: color-mix(in srgb, var(--green) 14%, transparent); border: 1px solid color-mix(in srgb, var(--green) 30%, transparent); }
.radar-modern .community-radar-avatar { width: 52px; height: 52px; border-radius: 16px; font: 700 21px 'Space Grotesk', sans-serif; background: var(--mu-grad); color: #fff; flex: none; box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--blue) 80%, transparent); }
.radar-modern img.community-radar-avatar { background: var(--sf-3); }
.radar-modern .community-radar-name-row { gap: 14px; }
.radar-modern .community-radar-name-row > div { min-width: 0; display: grid; gap: 2px; }
.radar-modern .community-radar-name-row a { font-size: 18px; letter-spacing: -.3px; overflow-wrap: anywhere; }
.radar-modern .community-radar-name-row a:hover { color: var(--ac-blue); }
.radar-modern .community-radar-name-row span { text-transform: capitalize; font-size: 12px; }
.radar-modern .community-radar-description { font-size: 13.5px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.radar-modern .community-radar-metrics { gap: 8px; font-size: 12px; }
.radar-modern .community-radar-metrics span { padding: 5px 11px; border-radius: 999px; background: var(--sf-2); border: 1px solid var(--line); color: var(--tx-mid); font-weight: 600; }
.radar-modern .community-radar-link { width: 100%; margin-top: 4px; min-height: 44px; font-size: 13px; }
.radar-modern .hashtag-row { display: flex; flex-wrap: wrap; gap: 6px; }
.radar-modern .empty-feed { border-radius: 22px; border: 1.5px dashed var(--bd-1); padding: clamp(36px, 8vw, 70px) 20px; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1100px) {
  .settings-modern { grid-template-columns: 230px minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .wallet-stats { grid-template-columns: 1fr 1fr; }
  .wallet-balance { grid-column: 1 / -1; }
  .wallet-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .wallet-form .admin-edit-form-actions { grid-column: 1 / -1; }
  .wallet-form .button { width: 100%; }
  .settings-modern { grid-template-columns: minmax(0, 1fr); }
  .settings-modern .settings-nav { position: static; padding: 16px; border-radius: 18px; }
  .settings-modern .settings-nav h1 { font-size: 26px; margin-bottom: 8px; }
  .settings-modern .settings-nav > .settings-link { padding-bottom: 12px; margin-bottom: 12px; }
  /* tabs become a swipeable pill row instead of a tall stacked list */
  .settings-modern .settings-tabs {
    display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -4px; padding: 2px 4px 4px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  }
  .settings-modern .settings-tabs::-webkit-scrollbar { display: none; }
  .settings-modern .settings-tabs > a { flex: none; scroll-snap-align: start; padding: 10px 16px; border-radius: 999px; background: var(--sf-1); border: 1px solid var(--line); white-space: nowrap; }
  .settings-modern .settings-tabs > a.settings-active { border-color: color-mix(in srgb, var(--blue) 55%, transparent); }
  .settings-modern .settings-content > :is(.settings-form, .settings-block, form, .device-row) { max-width: 100%; }
  .search-page .search-filter-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .search-page .search-filter-form > input[type="search"], .search-page .search-filter-form > button, .search-page .search-filter-toggles { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .wallet-page { padding-inline: 16px; gap: 16px; }
  .wallet-stats { grid-template-columns: 1fr; gap: 10px; }
  .wallet-stats .recap-stat { padding: 18px; flex-direction: row; align-items: center; flex-wrap: wrap; }
  .wallet-balance { flex-direction: column !important; align-items: flex-start !important; }
  .wallet-form { grid-template-columns: minmax(0, 1fr); }
  /* transactions become stacked cards (admin-table already collapses; give them structure) */
  .wallet-table-wrap { margin: 0; padding: 0; overflow: visible; }
  .wallet-table tbody { display: grid; gap: 10px; }
  .wallet-table tr { padding: 14px 16px !important; border: 1px solid var(--line); border-radius: 14px; background: var(--sf-1); display: grid !important; grid-template-columns: 1fr auto; gap: 4px 12px; }
  .wallet-table td { padding: 2px 0 !important; border: 0 !important; border-radius: 0 !important; }
  .wallet-table td::before { margin-bottom: 1px; }
  .wallet-table td[data-label="Activity"] { grid-column: 1; grid-row: 1; }
  .wallet-table td[data-label="Amount"] { grid-column: 2; grid-row: 1; text-align: right; font-size: 16px; }
  .wallet-table td[data-label="Details"] { grid-column: 1 / -1; }
  .wallet-table td[data-label="When"], .wallet-table td[data-label="Balance"] { color: var(--tx-faint); font-size: 12px; }
  .wallet-table td[data-label="When"] { grid-column: 1; } .wallet-table td[data-label="Balance"] { grid-column: 2; text-align: right; }
  .wallet-table td[data-label="Amount"]::before, .wallet-table td[data-label="Activity"]::before, .wallet-table td[data-label="Details"]::before { display: none; }
  .wallet-table tbody tr:hover { background: var(--sf-1); }
  .settings-modern .link-field-row { grid-template-columns: minmax(0, 1fr); }
  .settings-modern .settings-form .notification-option { gap: 12px; }
  .settings-modern .settings-form .notification-option select { width: 100%; }
  .settings-modern .notification-group { padding: 4px 14px 8px; }
  .settings-modern .device-row { flex-wrap: wrap; padding: 12px 14px; }
  .settings-modern .settings-block-heading > * { width: 100%; }
  .settings-modern .settings-block-heading .button, .settings-modern .settings-block-heading form .button { width: 100%; }
  .search-page { padding-inline: 16px; }
  .search-page .search-filter-form { grid-template-columns: minmax(0, 1fr); border-radius: 18px; }
  .search-page .search-filter-form > * { grid-column: auto !important; }
  .search-page .search-user-row > .person-bio { margin-left: 0; }
  .search-page .search-discovery-grid > .search-section { padding: 18px; }
  .radar-modern { padding-inline: 16px; }
  .radar-modern .community-radar-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .auth-card { border-radius: 20px; }
}
@media (hover: none) {
  .radar-modern .community-radar-card:hover, .search-page .search-user-row:hover, .search-page .search-community-row:hover,
  .search-page .search-result-post:hover, .wallet-stats .recap-stat:hover { transform: none; }
}

/* ---------- Fixes found during visual QA ---------- */
/* admin-panel.css styles these inputs with higher specificity; match the rest of the form */
.wallet-page .admin-edit-form.wallet-form :is(input[type="email"], input[type="number"], input[type="text"]) {
  background: var(--sf-1); color: var(--tx-hi); border: 1px solid var(--bd-1); border-radius: var(--mu-radius-sm); min-height: 46px; padding: 11px 14px; width: 100%;
}
.wallet-page .admin-edit-form.wallet-form :is(input[type="email"], input[type="number"]):focus { border-color: var(--blue); box-shadow: var(--mu-ring); }
@media (max-width: 900px) {
  .settings-modern { padding: 20px 16px 72px; width: 100%; }
  .settings-modern .sidebar-toggle { display: none !important; }
  .settings-modern .settings-nav > * { visibility: visible !important; }
}
@media (max-width: 640px) {
  .settings-modern .settings-form .notification-option:has(select) { flex-direction: column; align-items: stretch; }
  .settings-modern .settings-form .notification-option select { width: 100%; min-width: 0; max-width: 100%; }
  .settings-modern .notification-group legend { max-width: 100%; }
  .settings-modern .settings-content > h2 { overflow-wrap: anywhere; }
}
@media (max-width: 900px) {
  .wallet-page .recap-section-heading { align-items: flex-start; text-align: left; flex-direction: column; gap: 6px; }
}
@media (max-width: 640px) {
  .wallet-table td[data-label="Details"] { grid-row: 2; }
  .wallet-table td[data-label="When"], .wallet-table td[data-label="Balance"] { grid-row: 3; }
  .wallet-table td[data-label="When"]::before, .wallet-table td[data-label="Balance"]::before { display: none; }
}
/* inner cards already frame each section; drop the legacy outer card */
.settings-modern .settings-content { border: 0 !important; background: none !important; box-shadow: none !important; padding: 0 !important; backdrop-filter: none; }
/* very narrow phones: the header's action cluster no longer fits; search stays reachable in the menu drawer */
@media (max-width: 360px) {
  .app-nav-actions .icon-button { display: none; }
  .app-nav-actions { gap: 6px; }
  .app-nav .brand span { font-size: 17px; }
}
@media (max-width: 1200px) { .app-nav-actions .welcome { display: none; } }
@media (max-width: 360px) { .app-nav .brand span { display: none; } }

/* ==========================================================================
   BATCH 2 — register, reset-password, recovery-codes, public posts,
   profile, post detail
   ========================================================================== */

/* ---------- Auth family: register / reset / recovery ---------- */
.auth-form input:not([type="checkbox"]) { background-color: var(--sf-1); }
.auth-card .terms { font-size: 12.5px; margin-top: 18px; }
.auth-card .terms a, .auth-card .switch-auth a { color: var(--ac-blue); font-weight: 700; }
.auth-card .terms a:hover, .auth-card .switch-auth a:hover { text-decoration: underline; }
.consent-check {
  padding: 14px; border: 1px solid var(--line); border-radius: var(--mu-radius-sm); background: var(--ov-1); cursor: pointer; font-weight: 400 !important; transition: border-color .15s, background .15s;
}
.consent-check:hover { border-color: var(--bd-2); }
.consent-check:has(input:checked) { border-color: color-mix(in srgb, var(--blue) 55%, transparent); background: color-mix(in srgb, var(--blue) 8%, transparent); }
.consent-check span { font-size: 13px; }
.consent-check input[type="checkbox"] { min-height: 0 !important; width: 18px !important; height: 18px; margin-top: 2px; }
.auth-form .cf-turnstile { min-height: 65px; }
.auth-shell-wide { width: min(560px, calc(100% - 32px)); }
.recovery-card h1 { font-size: clamp(28px, 6vw, 36px) !important; letter-spacing: -1.2px; }
.recovery-card .recovery-codes-list {
  counter-reset: rc; gap: 10px; padding: 14px; border-radius: 18px; background: var(--sf-0); border: 1px dashed var(--bd-2);
}
.recovery-card .recovery-codes-list > span {
  counter-increment: rc; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--sf-1); border: 1px solid var(--line);
  font: 700 clamp(13px, 3.6vw, 16px) ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; letter-spacing: .8px; color: var(--tx-hi); user-select: all;
}
.recovery-card .recovery-codes-list > span::before { content: counter(rc); flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 700 11px 'DM Sans', sans-serif; letter-spacing: 0; color: var(--blue); background: color-mix(in srgb, var(--blue) 14%, var(--sf-2)); }
.recovery-card .recovery-codes-actions { justify-content: space-between; margin-top: 4px; }
.recovery-card .recovery-codes-actions .button { flex: 1 1 200px; }

/* ---------- Public posts ---------- */
.public-posts-modern { width: min(900px, 100%); padding-top: 32px; }
.public-posts-modern .public-posts-hero {
  position: relative; overflow: hidden; border-radius: 26px; box-shadow: var(--mu-shadow);
  background: radial-gradient(70% 120% at 100% 0%, var(--mu-glow), transparent 70%), var(--panel);
  border: 1px solid var(--line);
}
.public-posts-modern .public-posts-hero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--mu-grad); }
.public-posts-modern .public-posts-hero h1 { letter-spacing: -2px; }
.public-posts-modern .public-posts-count { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: var(--sf-2); border: 1px solid var(--line); }
.public-posts-modern .public-post-filters { gap: 6px; margin: 22px 0; padding: 5px; width: fit-content; max-width: 100%; border-radius: 999px; background: var(--sf-1); border: 1px solid var(--line); }
.public-posts-modern .public-post-filters a { border: 0 !important; border-radius: 999px; padding: 9px 20px; font-weight: 600; font-size: 13.5px; background: transparent; color: var(--tx-lo); transition: background .15s, color .15s; white-space: nowrap; }
.public-posts-modern .public-post-filters a:hover { color: var(--tx-hi); background: var(--ov-2); }
.public-posts-modern .public-post-filters a.is-active { background: var(--mu-grad); color: #fff; box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--blue) 80%, transparent); }
.public-posts-modern .public-post-feed { display: grid; gap: 16px; }
.public-posts-modern .public-post-feed .post-card { margin: 0; border-radius: 20px; box-shadow: var(--mu-shadow); transition: border-color .18s, transform .22s var(--mu-ease); }
.public-posts-modern .public-post-feed .post-card:hover { border-color: var(--bd-2); }
.public-posts-modern :is(.public-post-empty, .public-posts-join) { border-radius: 22px; background: var(--panel); box-shadow: var(--mu-shadow); }
.public-posts-modern .public-post-empty { text-align: center; padding: clamp(32px, 7vw, 56px) 20px; border: 1.5px dashed var(--bd-1); }
.public-posts-modern .public-posts-join { padding: 22px 24px; border: 1px solid color-mix(in srgb, var(--blue) 35%, var(--line)); background: linear-gradient(120deg, color-mix(in srgb, var(--blue) 10%, var(--panel)), var(--panel)); }
.public-posts-modern .public-post-pagination { padding: 6px; }
.public-posts-modern .public-post-pagination .button { min-height: 42px; }
.public-posts-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.public-posts-nav > div { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Profile ---------- */
.profile-layout { gap: clamp(20px, 3vw, 36px); }
.profile-layout .back-link, .community-detail .back-link { font-weight: 600; color: var(--tx-lo); margin-bottom: 18px; transition: color .15s, transform .15s; }
.profile-layout .back-link:hover, .community-detail .back-link:hover { color: var(--tx-hi); transform: translateX(-2px); }
.profile-banner { height: clamp(130px, 22vw, 230px); border-radius: 24px 24px 0 0; margin-bottom: 0; border: 1px solid var(--line); border-bottom: 0; }
.profile-banner + .profile-hero { border-radius: 0 0 24px 24px; border-top: 0; }
.profile-hero {
  border-radius: 0px 0px 24px 24px !important; border: 1px solid var(--line); box-shadow: var(--mu-shadow);
  background: radial-gradient(60% 90% at 100% 0%, var(--mu-glow), transparent 70%), var(--panel) !important;
  padding: clamp(18px, 3.4vw, 32px); margin-bottom: 22px;
}
.profile-identity { gap: clamp(14px, 2.4vw, 22px); }
.profile-identity h1 { font-size: clamp(26px, 4.6vw, 38px); letter-spacing: -1.2px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 4px; }
.profile-identity .avatar.large { width: clamp(76px, 12vw, 108px); height: clamp(76px, 12vw, 108px); font-size: clamp(28px, 5vw, 40px); border: 4px solid var(--panel); box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue) 55%, transparent), 0 14px 30px -14px rgba(0,0,0,.6); }
.profile-handle { font-size: 14px; color: var(--tx-lo); margin-top: 2px; }
.verified-tick { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-left: 4px; border-radius: 50%; background: var(--cyan); color: #fff; font-size: 0; }
.verified-tick svg { width: 12px; height: 12px; }
.profile-bio { font-size: 15.5px; line-height: 1.7; max-width: 640px; }
.profile-actions .button, .profile-actions .follow-button, .profile-actions .block-button, .profile-actions .mute-button { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
.profile-actions .follow-button:not(.is-following) { background: var(--mu-grad); border-color: transparent; color: #fff; padding-inline: 20px; box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--blue) 80%, transparent); }
.profile-actions .block-button { border: 1px solid var(--bd-2); background: transparent; color: var(--tx-lo); border-radius: 999px; padding: 7px 16px; font-size: 12px; font-weight: 700; cursor: pointer; }
.profile-actions .block-button:hover, .profile-actions .block-button.is-blocked { border-color: var(--ac-red); color: var(--ac-red); }
.profile-stats { gap: 8px; margin-top: 20px; }
.profile-stats > * { padding: 9px 15px; font-size: 13px; color: var(--tx-lo); background: var(--sf-1); transition: border-color .15s, background .15s; }
.profile-stats a:hover { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 10%, var(--sf-1)); }
.profile-stats strong { color: var(--tx-hi); font-variant-numeric: tabular-nums; }
.profile-link-chip, .profile-hashtags .hashtag-chip { transition: all .15s; }
.profile-link-chip:hover { background: var(--mu-grad); border-color: transparent; color: #fff; transform: translateY(-1px); }
.profile-community-highlights { gap: 16px; border: 0; padding: 0; margin: 22px 0 0; }
.profile-highlight-group { padding: 16px 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--sf-1); }
.profile-highlight-heading h2 { font-size: 15px; letter-spacing: -.3px; }
.profile-highlight-heading > span { min-width: 24px; text-align: center; padding: 1px 8px; border-radius: 999px; background: var(--sf-3); font-weight: 700; }
.profile-community-item:hover > span { color: var(--ac-blue); }
.profile-engagement { margin-top: 22px; padding-top: 0; border: 0; }
.engagement-grid { gap: 12px; }
.engagement-grid div { border-radius: 16px; padding: 16px 14px; background: var(--sf-1); }
.engagement-grid strong { font-size: clamp(18px, 3vw, 24px); font-variant-numeric: tabular-nums; }
.engagement-grid strong svg { color: var(--blue); }
.engagement-grid span { font-size: 10.5px; font-weight: 600; }
.profile-tabs {
  gap: 4px; padding: 5px; width: fit-content; max-width: 100%; margin: 4px 0 22px; border: 1px solid var(--line); border-radius: 999px; background: var(--sf-1);
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.profile-tabs::-webkit-scrollbar { display: none; }
.profile-tabs a { padding: 9px 18px; border: 0 !important; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--tx-lo); transition: background .15s, color .15s; }
.profile-tabs a:hover { background: var(--ov-2); color: var(--tx-hi); }
.profile-tabs a.profile-tab-active { background: var(--mu-grad); color: #fff; box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--blue) 80%, transparent); }
.profile-posts .panel-heading, .activity-section .panel-heading { margin-bottom: 14px; }
.profile-posts .panel-heading h2 { font-size: 20px; letter-spacing: -.6px; }
.profile-posts .panel-heading > span { padding: 3px 11px; border-radius: 999px; background: var(--sf-2); border: 1px solid var(--line); color: var(--tx-mid); font-size: 12px; letter-spacing: 0; }
.profile-posts .post-card { border-radius: 20px; }
.activity-section, .stats-tab-section { padding: clamp(16px, 3vw, 24px); border: 1px solid var(--line); border-radius: 20px; background: var(--panel); margin-bottom: 16px; }
.activity-row { padding: 14px 4px; }
.activity-icon { background: color-mix(in srgb, var(--blue) 14%, var(--sf-2)); color: var(--blue); }
.stats-bar-fill { background: var(--mu-grad); border-radius: 8px 8px 3px 3px; }
.stats-bar-fill span { color: #fff; }
.top-post-row { align-items: center; border-radius: 12px; padding: 12px; transition: background .15s; }
.top-post-row:hover { background: var(--ov-1); }
.rank-badge { flex: none; min-width: 34px; height: 26px; display: grid; place-items: center; border-radius: 999px; background: var(--sf-3); font-weight: 800; font-size: 12px; color: var(--tx-mid); }
.top-post-row small { display: flex; gap: 14px; }
.top-post-row small span { display: inline-flex; align-items: center; gap: 4px; }
.profile-layout .discover-column { position: sticky; top: calc(var(--header-h) + 20px); align-self: start; }
.profile-layout .discover-panel { border-radius: 20px; box-shadow: var(--mu-shadow); }
.profile-layout .discover-row { padding: 10px 0; }

/* ---------- Post detail ---------- */
.post-page { width: min(1000px, 100%); padding-top: 20px; }
.post-page-bar { margin-bottom: 18px; }
.post-page-bar h1 { font-size: 20px; letter-spacing: -.4px; }
.post-back { width: 42px; height: 42px; border: 1px solid var(--line); background: var(--sf-1); color: var(--tx-mid); transition: all .15s; }
.post-back:hover { border-color: var(--blue); color: var(--tx-hi); transform: translateX(-2px); }
.post-view {
  border-radius: 26px; padding: clamp(18px, 3.4vw, 34px) clamp(18px, 3.4vw, 34px) 12px; box-shadow: var(--mu-shadow);
  background: radial-gradient(60% 40% at 100% 0%, color-mix(in srgb, var(--blue) 9%, transparent), transparent 70%), var(--panel);
}
.post-view-head { margin-bottom: 18px; gap: 14px; }
.post-view-head .avatar { width: 52px; height: 52px; font-size: 19px; box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px color-mix(in srgb, var(--blue) 45%, transparent); }
.post-view-author strong { font-size: 16.5px; letter-spacing: -.2px; }
.post-view-body { font-size: clamp(17px, 2.4vw, 20px); line-height: 1.75; margin: 4px 0 20px; }
.post-view .hashtag-row { display: flex; flex-wrap: wrap; gap: 8px; }
.post-view .hashtag-chip { padding: 6px 14px; font-size: 13px; font-weight: 600; transition: all .15s; }
.post-view .hashtag-chip:hover { background: var(--mu-grad); border-color: transparent; color: #fff; }
.post-view .quoted-post { border-radius: 16px; padding: 14px 16px; background: var(--sf-1); border-left: 3px solid var(--blue); transition: border-color .15s, background .15s; }
.post-view .quoted-post:hover { background: var(--sf-2); }
.post-view .post-poll { border-radius: 18px; padding: 18px; background: var(--sf-1); border-color: var(--bd-1); }
.post-view .post-poll button { border-radius: 12px; min-height: 44px; background: var(--sf-2); color: var(--tx-hi); border-color: var(--bd-1); }
.post-view .post-poll button:hover { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 12%, var(--sf-2)); }
.post-view .post-poll > p { border-radius: 12px; background: var(--sf-2); border-color: var(--bd-1); color: var(--tx-hi); }
.post-view .post-poll button span, .post-view .post-poll > p span { color: var(--ac-blue); }
.quest-post-label { display: inline-block; padding: 5px 12px; margin-bottom: 12px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--ac-gold); background: color-mix(in srgb, var(--ac-gold) 14%, transparent); border: 1px solid color-mix(in srgb, var(--ac-gold) 35%, transparent); }
.post-view-counts { gap: 8px; padding: 18px 0 16px; border-top: 0; margin-top: 8px; }
.post-view-counts span { padding: 7px 14px; border-radius: 999px; background: var(--sf-1); border: 1px solid var(--line); font-size: 13px; }
.post-view-counts strong { color: var(--tx-hi); font-variant-numeric: tabular-nums; }
.post-view-actions { gap: 6px; padding: 6px; border: 1px solid var(--line); border-radius: 20px; background: var(--sf-1); }
.post-view-actions button, .post-view-actions .action-link { border-radius: 14px; font-weight: 600; font-size: 14px; transition: background .15s, color .15s, transform .15s; }
.post-view-actions button:hover, .post-view-actions .action-link:hover { background: var(--ov-2); color: var(--tx-hi); transform: translateY(-1px); }
.post-view-actions .action-like.is-liked { color: #ff4d7a; background: color-mix(in srgb, #ff4d7a 12%, transparent); }
.reaction-strip { padding: 16px 0 6px; gap: 8px; }
.reaction-strip button { padding: 8px 14px; font-weight: 600; color: var(--tx-mid); transition: all .15s; }
.reaction-strip button:hover { transform: translateY(-1px); border-color: var(--blue); }
.reaction-strip button.is-selected { background: color-mix(in srgb, var(--blue) 18%, var(--sf-1)); border-color: var(--blue); color: var(--tx-hi); }
.post-more > summary { padding: 8px 4px; font-weight: 600; }
.post-secondary-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 0 8px; }
.post-tool-link { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--sf-1); color: var(--tx-mid); font-size: 13px; font-weight: 600; transition: all .15s; }
.post-tool-link:hover { border-color: var(--blue); color: var(--tx-hi); }
.post-moderation-tools { margin: 14px 0; padding: 16px; border: 1px solid color-mix(in srgb, var(--ac-orange) 40%, var(--line)); border-radius: 16px; background: color-mix(in srgb, var(--ac-orange) 6%, var(--sf-1)); }
.public-post-cta { margin: 14px -6px 10px; padding: 18px 20px; border: 1px solid color-mix(in srgb, var(--blue) 35%, var(--line)); border-radius: 18px; background: linear-gradient(120deg, color-mix(in srgb, var(--blue) 10%, var(--sf-1)), var(--sf-1)); }
.public-post-cta p { font-weight: 600; color: var(--tx-hi); }
.replies-section { margin-top: 8px; }
.replies-section .panel-heading { margin-bottom: 14px; }
.replies-section .panel-heading h2 { font-size: 22px; letter-spacing: -.6px; }
.replies-section .panel-heading > span { padding: 3px 12px; border-radius: 999px; background: var(--sf-2); border: 1px solid var(--line); color: var(--tx-mid); font-size: 12px; letter-spacing: 0; }
.replies-section > .comment-form { padding: 14px; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); box-shadow: var(--mu-shadow); transition: border-color .15s; }
.replies-section > .comment-form:focus-within { border-color: color-mix(in srgb, var(--blue) 55%, var(--line)); }
.comment-form textarea[name="body"] { background: var(--sf-1) !important; border: 1px solid var(--line) !important; border-radius: 14px; }
.comment-form textarea[name="body"]:focus { border-color: var(--blue) !important; box-shadow: var(--mu-ring) !important; }
.comment-form .comment-submit { background: var(--mu-grad) !important; color: #fff !important; border-radius: 999px; font-weight: 700; box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--blue) 80%, transparent); }
.public-comments-join { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 18px 20px; border: 1px dashed var(--bd-2); border-radius: 18px; background: var(--ov-1); }
.public-comments-join p { margin: 0; color: var(--tx-lo); font-size: 13.5px; }
.no-comments { text-align: center; padding: 28px 12px; border: 1.5px dashed var(--bd-1); border-radius: 18px; }
.post-detail-thread { max-height: none; overflow: visible; padding-right: 0; margin-top: 16px; }

/* ---------- Batch 2 responsive ---------- */
@media (max-width: 1100px) {
  .profile-layout .discover-column { position: static; }
}
@media (max-width: 760px) {
  .engagement-grid, .stats-mix-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-community-highlights { grid-template-columns: minmax(0, 1fr); }
  .profile-hero-top { align-items: flex-start; }
  .profile-actions { justify-content: flex-start; width: 100%; }
  .profile-tabs { width: 100%; border-radius: 18px; }
  .public-posts-modern .public-post-filters { width: 100%; overflow-x: auto; scrollbar-width: none; }
  .public-posts-modern .public-post-filters::-webkit-scrollbar { display: none; }
  .public-posts-modern .public-post-filters a { flex: 1 0 auto; text-align: center; }
  .post-view-actions { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; padding: 4px; }
  .post-view-actions .label { display: none; }
  .post-view-actions button, .post-view-actions .action-link { padding: 12px 4px; }
  .post-view { border-radius: 20px; }
}
@media (max-width: 520px) {
  .recovery-card .recovery-codes-list { grid-template-columns: minmax(0, 1fr); }
  .recovery-card .recovery-codes-actions .button { flex-basis: 100%; }
  .public-posts-modern .public-posts-join { flex-direction: column; align-items: stretch; text-align: left; }
  .public-posts-modern .public-posts-join .button { width: 100%; }
  .public-post-cta .button, .public-comments-join .button { width: 100%; }
  .profile-identity { flex-wrap: nowrap; }
  .profile-actions > * { flex: 1 1 auto; }
  .profile-actions form { display: flex; flex: 1 1 auto; } .profile-actions form button { width: 100%; }
  .post-page { padding-inline: 12px; }
  .replies-section > .comment-form { padding: 10px; border-radius: 16px; }
}
@media (hover: none) { .post-view-actions button:hover, .reaction-strip button:hover { transform: none; } }
/* keep text on the gradient active pills readable in every theme */
body .profile-tabs a.profile-tab-active, body .public-posts-modern .public-post-filters a.is-active { color: #fff !important; }

/* ==========================================================================
   BATCH 3 — post-compose, people, panel-access, notifications, not-found,
   my-communities
   ========================================================================== */

/* ---------- Shared: page headings in the app shell ---------- */
:is(.compose-modern, .people-modern, .notifications-modern, .workspace-modern) .back-link {
  display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--tx-lo); margin-bottom: 18px; transition: color .15s, transform .15s;
}
:is(.compose-modern, .people-modern, .notifications-modern, .workspace-modern) .back-link:hover { color: var(--tx-hi); transform: translateX(-2px); }
:is(.compose-modern, .workspace-modern) :is(input, select, textarea):not([type="checkbox"]):not([type="file"]) {
  background-color: var(--sf-1); border: 1px solid var(--bd-1); border-radius: var(--mu-radius-sm); color: var(--tx-hi); min-height: 46px; padding: 11px 14px; transition: border-color .18s, box-shadow .18s;
}
:is(.compose-modern, .workspace-modern) :is(input, select, textarea):not([type="checkbox"]):not([type="file"]):hover { border-color: var(--bd-2); }
:is(.compose-modern, .workspace-modern) :is(input, select, textarea):not([type="checkbox"]):not([type="file"]):focus { border-color: var(--blue); box-shadow: var(--mu-ring); outline: 0; }
:is(.compose-modern, .workspace-modern) .button-primary { background: var(--mu-grad); color: #fff; box-shadow: 0 12px 28px -12px color-mix(in srgb, var(--blue) 75%, transparent); }
:is(.compose-modern, .workspace-modern) .button-primary:hover { filter: brightness(1.07); }
:is(.compose-modern, .workspace-modern) .button-ghost { background: var(--ov-1); border: 1px solid var(--bd-1); color: var(--tx-hi); }
:is(.compose-modern, .workspace-modern) .button-ghost:hover { background: var(--ov-2); border-color: var(--bd-2); }
:is(.compose-modern, .workspace-modern, .people-modern, .notifications-modern) .button { min-height: 42px; }

/* ---------- Post compose (reply / edit) ---------- */
.compose-modern { width: min(860px, 100%); padding-top: 32px; }
.compose-modern .post-compose-heading h1 { font-size: clamp(30px, 5.4vw, 46px); letter-spacing: -1.8px; }
.compose-modern .post-compose-source, .compose-modern .post-compose-form { border-radius: 22px; box-shadow: var(--mu-shadow); }
.compose-modern .post-compose-source {
  position: relative; padding: 18px 20px 18px 24px; background: var(--sf-1); overflow: hidden;
}
.compose-modern .post-compose-source::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--mu-grad); }
.compose-modern .post-compose-source-body { margin-left: 0; margin-top: 12px; padding-left: 14px; border-left: 2px solid var(--line); font-size: 14px; color: var(--tx-mid); }
.compose-modern .post-compose-source > header strong, .compose-modern .post-compose-form-heading strong { font-size: 14px; }
.compose-modern .post-compose-source > header span, .compose-modern .post-compose-form-heading span { font-size: 12px; }
.compose-modern .post-compose-context { padding: 12px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--sf-1); font-size: 13px; }
.compose-modern .post-compose-context svg { color: var(--blue); }
.compose-modern .post-compose-form { padding: clamp(16px, 3vw, 28px); background: var(--panel); }
.compose-modern .post-compose-form-heading { padding-bottom: 18px; }
.compose-modern .post-compose-field { font-size: 13px; color: var(--tx-mid); }
.compose-modern .post-compose-field textarea { min-height: clamp(220px, 38vh, 340px); font-size: 16px; line-height: 1.7; border-radius: 16px; background: var(--sf-0); padding: 18px; }
.compose-modern .post-compose-code-help { font-size: 12px; margin: -6px 0 16px; }
.compose-modern .post-compose-reply-options { gap: 12px; }
.compose-modern .post-compose-warning { font-size: 12px; color: var(--tx-mid); }
.compose-modern .post-compose-reply-options .media-picker {
  display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 18px; border: 1.5px dashed var(--bd-2); border-radius: var(--mu-radius-sm); background: var(--ov-1); color: var(--tx-mid); font-weight: 600; font-size: 13px; cursor: pointer; transition: all .15s;
}
.compose-modern .post-compose-reply-options .media-picker:hover { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 8%, transparent); color: var(--tx-hi); }
.compose-modern .post-compose-reply-options .media-picker input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.compose-modern .post-compose-reply-options .media-picker { position: relative; }
.compose-modern .composer-media-details { border: 1px solid var(--line); border-radius: 14px; background: var(--sf-1); padding: 4px 16px; }
.compose-modern .composer-media-details > summary { cursor: pointer; padding: 12px 0; font-size: 13px; font-weight: 600; color: var(--tx-mid); }
.compose-modern .composer-media-meta { border: 1px solid var(--line); border-radius: 12px; margin: 0 0 12px; padding: 12px 14px; display: grid; gap: 10px; min-width: 0; }
.compose-modern .composer-media-meta legend { padding: 0 8px; font-size: 12px; font-weight: 700; color: var(--tx-lo); }
.compose-modern .composer-media-meta label { display: grid; gap: 6px; font-size: 12px; color: var(--tx-lo); }
.compose-modern .post-compose-footer { padding-top: 18px; flex-wrap: wrap; }
.compose-modern .post-compose-footer > small { padding: 6px 12px; border-radius: 999px; background: var(--sf-2); border: 1px solid var(--line); font-size: 12px; color: var(--tx-mid); }
.compose-modern .post-compose-footer > small.is-over { color: var(--ac-red); border-color: color-mix(in srgb, var(--ac-red) 50%, transparent); background: color-mix(in srgb, var(--ac-red) 10%, var(--sf-1)); }
.compose-modern .post-compose-footer .button { min-height: 44px; padding-inline: 22px; }

/* ---------- People ---------- */
.people-modern { padding-top: 36px; }
.people-modern .explore-hero { position: relative; border: 1px solid var(--line); border-radius: 28px; padding: clamp(24px, 5vw, 48px); box-shadow: var(--mu-shadow); overflow: hidden;
  background: radial-gradient(70% 120% at 100% 0%, var(--mu-glow), transparent 70%), var(--panel); }
.people-modern .explore-hero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--mu-grad); }
.people-modern .explore-hero h1 { font-size: clamp(34px, 6vw, 60px); letter-spacing: -2.4px; }
.people-modern .explore-hero h1 em { background: var(--mu-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.people-modern .explore-hero p { font-size: 15px; line-height: 1.65; }
.people-modern .explore-section { margin-top: 28px; }
.people-modern .explore-people-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.people-modern .discover-panel { padding: 22px; border-radius: 22px; box-shadow: var(--mu-shadow); min-width: 0; }
.people-modern .panel-heading { margin-bottom: 10px; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.people-modern .panel-heading h2 { font-size: 18px; letter-spacing: -.5px; }
.people-modern .panel-heading > span { padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--blue) 14%, var(--sf-2)); color: var(--ac-blue); font-size: 10.5px; font-weight: 700; }
.people-modern .discover-row { padding: 12px 8px; margin: 0 -8px; border-radius: 14px; border-top: 0; border-bottom: 1px solid var(--line); gap: 12px; transition: background .15s; }
.people-modern .discover-row:last-child { border-bottom: 0; }
.people-modern .discover-row:hover { background: var(--ov-1); }
.people-modern .discover-row .avatar { width: 40px; height: 40px; font-size: 14px; }
.people-modern .discover-row > div { flex: 1; min-width: 0; }
.people-modern .discover-row strong { font-size: 14px; }
.people-modern .discover-row strong a:hover { color: var(--ac-blue); }
.people-modern .discover-row span { font-size: 12px; line-height: 1.45; margin-top: 2px; }
.people-modern .round-action { width: 34px; height: 34px; display: grid; place-items: center; line-height: 1; border-color: var(--bd-2); color: var(--blue); transition: all .15s; }
.people-modern .round-action:hover { background: var(--mu-grad); border-color: transparent; color: #fff; transform: scale(1.06); }
.people-modern .discover-panel > p { padding: 22px 12px !important; margin: 8px 0 0; text-align: center; border: 1.5px dashed var(--bd-1); border-radius: 14px; font-size: 13px !important; line-height: 1.55; }

/* ---------- Notifications ---------- */
.notifications-modern { max-width: 860px; padding-top: 36px; }
.notifications-modern .notifications-heading { align-items: flex-end; padding-bottom: 22px; }
.notifications-modern .notifications-heading h1 { font-size: clamp(32px, 6vw, 52px); letter-spacing: -2px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.notifications-modern .notifications-heading em { display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 11px; border-radius: 999px; background: var(--mu-grad); color: #fff; font: 700 14px 'DM Sans', sans-serif; box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--blue) 80%, transparent); }
.notifications-modern .notifications-heading em:empty { display: none; }
.notifications-modern .notification-list { gap: 10px; margin-top: 22px; }
.notifications-modern .notification-item { position: relative; padding: 16px 20px 16px 22px; border-radius: 18px; gap: 14px; box-shadow: var(--mu-shadow); transition: transform .2s var(--mu-ease), border-color .15s, background .15s; }
.notifications-modern .notification-item:hover { transform: translateY(-2px); border-color: var(--bd-2); background: var(--sf-1); }
.notifications-modern .notification-item .avatar { width: 42px; height: 42px; font-size: 14px; }
.notifications-modern .notification-item > div { display: grid; gap: 3px; min-width: 0; flex: 1; }
.notifications-modern .notification-item strong { font-size: 14.5px; }
.notifications-modern .notification-item > div > span { color: var(--tx-mid); font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; }
.notifications-modern .notification-item small { font-size: 12px; }
.notifications-modern .notification-dot { position: absolute; left: 8px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 22%, transparent); opacity: 0; }
.notifications-modern .notification-unread { background: color-mix(in srgb, var(--blue) 8%, var(--panel)); border-color: color-mix(in srgb, var(--blue) 40%, var(--line)); box-shadow: var(--mu-shadow); }
.notifications-modern .notification-unread .notification-dot { opacity: 1; }
.notifications-modern .notification-unread strong { color: var(--tx-hi); }
.notifications-modern .empty-feed { border-radius: 24px; border: 1.5px dashed var(--bd-1); padding: clamp(36px, 8vw, 70px) 20px; }
.notifications-empty-icon { width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 20px; display: grid; place-items: center; color: var(--blue); background: color-mix(in srgb, var(--blue) 14%, var(--sf-2)); border: 1px solid color-mix(in srgb, var(--blue) 30%, var(--bd-1)); }

/* ---------- Panel access + 404 (auth shell) ---------- */
.auth-card .auth-badge + .eyebrow { margin-top: 0; }
.not-found-card { text-align: center; }
.not-found-card::before { background: var(--mu-grad); }
.not-found-code {
  font: 700 clamp(84px, 24vw, 128px)/1 'Space Grotesk', sans-serif; letter-spacing: -6px; margin: 4px 0 6px;
  background: var(--mu-grad); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 18px 30px color-mix(in srgb, var(--blue) 35%, transparent));
}
.not-found-card h1 { font-size: clamp(26px, 6vw, 34px); }
.not-found-card .form-note { margin: 12px 0 24px; }

/* ---------- My communities (workspace) ---------- */
.workspace-modern { padding-top: 36px; }
.workspace-modern .community-workspace-header { padding: clamp(20px, 4vw, 34px); border: 1px solid var(--line); border-radius: 26px; box-shadow: var(--mu-shadow); position: relative; overflow: hidden;
  background: radial-gradient(60% 120% at 100% 0%, var(--mu-glow), transparent 70%), var(--panel); align-items: center; }
.workspace-modern .community-workspace-header::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--mu-grad); }
.workspace-modern .community-workspace-header .back-link { margin-bottom: 14px; }
.workspace-modern .community-workspace-header h1 { font-size: clamp(30px, 5.4vw, 48px); letter-spacing: -1.8px; }
.workspace-modern .community-workspace-count { align-items: center; justify-items: center; padding: 12px 22px; border-radius: 18px; background: var(--sf-1); border: 1px solid var(--line); }
.workspace-modern .community-workspace-count strong { font-size: 34px; color: var(--ac-blue); line-height: 1; }
.workspace-modern .community-workspace-layout { padding-top: 26px; gap: clamp(20px, 3vw, 32px); grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); }
.workspace-modern .community-workspace-create { position: sticky; top: calc(var(--header-h) + 20px); padding: 24px; border-radius: 22px; box-shadow: var(--mu-shadow); }
.workspace-modern .community-workspace-icon { width: 38px; height: 38px; border-radius: 12px; background: color-mix(in srgb, var(--blue) 14%, var(--sf-2)); color: var(--blue); }
.workspace-modern .community-workspace-section-heading h2 { font-size: 18px; letter-spacing: -.4px; }
.workspace-modern .community-workspace-form > label:not(.community-workspace-private) { font-size: 12.5px; color: var(--tx-mid); gap: 7px; }
.workspace-modern .community-workspace-form textarea { min-height: 110px; }
.workspace-modern .community-workspace-private { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--mu-radius-sm); background: var(--ov-1); cursor: pointer; font-size: 13px; font-weight: 600; color: var(--tx-mid); }
.workspace-modern .community-workspace-private input { appearance: none; -webkit-appearance: none; width: 42px !important; height: 24px !important; min-height: 0; padding: 0; border-radius: 999px; background: var(--sf-3); border: 1px solid var(--bd-2); position: relative; cursor: pointer; flex: none; transition: background .2s; order: 2; margin-left: auto; }
.workspace-modern .community-workspace-private input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.35); transition: transform .2s var(--mu-ease); }
.workspace-modern .community-workspace-private input:checked { background: var(--mu-grad); border-color: transparent; }
.workspace-modern .community-workspace-private input:checked::after { transform: translateX(18px); }
.workspace-modern .community-workspace-form > button { justify-self: stretch; min-height: 48px; }
.workspace-modern .community-owned-list { gap: 12px; border-top: 0; }
.workspace-modern .community-owned-row {
  grid-template-columns: 54px minmax(0, 1fr) auto; padding: 18px 20px; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); box-shadow: var(--mu-shadow);
  transition: transform .22s var(--mu-ease), border-color .15s;
}
.workspace-modern .community-owned-row:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--blue) 45%, var(--line)); }
.workspace-modern .community-owned-mark { width: 54px; height: 54px; border-radius: 16px; background: var(--mu-grad); color: #fff; font-size: 22px; box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--blue) 80%, transparent); }
.workspace-modern .community-owned-title h3 { font-size: 17px; letter-spacing: -.3px; }
.workspace-modern .community-owned-title > span { border-radius: 999px; padding: 3px 10px; font-size: 10px; font-weight: 700; background: var(--sf-2); }
.workspace-modern .community-owned-copy p { font-size: 13.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.workspace-modern .community-owned-copy small { font-size: 12px; text-transform: capitalize; }
.workspace-modern .community-workspace-empty { border-radius: 22px; border: 1.5px dashed var(--bd-1); padding: 56px 20px; }
.workspace-modern .community-workspace-empty strong { font-size: 16px; color: var(--tx-hi); } .workspace-modern .community-workspace-empty span { font-size: 13px; }

/* ---------- Batch 3 responsive ---------- */
@media (max-width: 960px) {
  .workspace-modern .community-workspace-layout { grid-template-columns: minmax(0, 1fr); }
  .workspace-modern .community-workspace-create { position: static; }
  .people-modern .explore-people-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .compose-modern, .people-modern, .notifications-modern, .workspace-modern { padding-inline: 16px; }
  .compose-modern .post-compose-footer { flex-direction: column; align-items: stretch; }
  .compose-modern .post-compose-footer > div { display: grid; grid-template-columns: 1fr 1fr; }
  .compose-modern .post-compose-footer > small { text-align: center; }
  .compose-modern .post-compose-reply-options > * { flex: 1 1 100%; }
  .workspace-modern .community-workspace-header { flex-wrap: wrap; align-items: flex-start; }
  .workspace-modern .community-owned-row { grid-template-columns: 46px minmax(0, 1fr); gap: 12px; padding: 16px; }
  .workspace-modern .community-owned-mark { width: 46px; height: 46px; border-radius: 14px; }
  .workspace-modern .community-owned-actions { grid-column: 1 / -1; }
  .workspace-modern .community-owned-actions .button { flex: 1; }
  .notifications-modern .notifications-heading { align-items: stretch; }
  .notifications-modern .notification-item { padding: 14px 14px 14px 20px; border-radius: 16px; }
  .people-modern .discover-panel { padding: 16px; border-radius: 18px; }
  .people-modern .explore-hero { border-radius: 22px; }
}
@media (hover: none) { .notifications-modern .notification-item:hover, .workspace-modern .community-owned-row:hover { transform: none; } }
/* batch 3 QA fixes */
.compose-modern .post-compose-heading { margin-bottom: 30px; }
.compose-modern .post-compose-field textarea#post-compose-body { min-height: clamp(220px, 38vh, 340px); }
.notifications-modern .notification-item { padding-left: 30px; }
.workspace-modern .community-owned-copy small { text-transform: none; }

/* ==========================================================================
   BATCH 4 — login, login-2fa, messages, message-requests, message-thread,
   moderator console
   ========================================================================== */

/* ---------- Messages inbox + requests ---------- */
.messages-modern { max-width: 920px; padding-top: 32px; }
.messages-modern .back-link { display: inline-flex; align-items: center; font-weight: 600; color: var(--tx-lo); margin-bottom: 18px; transition: color .15s, transform .15s; }
.messages-modern .back-link:hover { color: var(--tx-hi); transform: translateX(-2px); }
.messages-modern .conversations-hero { position: relative; max-width: none; padding: clamp(20px, 4vw, 34px); border: 1px solid var(--line); border-radius: 26px; box-shadow: var(--mu-shadow); overflow: hidden; margin-bottom: 18px;
  background: radial-gradient(60% 120% at 100% 0%, var(--mu-glow), transparent 70%), var(--panel); }
.messages-modern .conversations-hero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--mu-grad); }
.messages-modern .conversations-hero .eyebrow { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; background: color-mix(in srgb, var(--blue) 14%, var(--sf-2)); color: var(--ac-blue); letter-spacing: 1.4px; margin-bottom: 14px; }
.messages-modern .conversations-hero h1 { font-size: clamp(30px, 5.4vw, 46px); letter-spacing: -1.8px; margin-bottom: 10px; }
.messages-modern .conversations-hero p:not(.eyebrow) { color: var(--tx-lo); font-size: 14.5px; line-height: 1.65; max-width: 620px; margin: 0; }
.messages-modern .conversations-hero a { color: var(--ac-blue); font-weight: 600; }
.messages-modern .request-inbox-link { display: flex; align-items: center; gap: 12px; padding: 14px 18px; margin-bottom: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); color: var(--tx-hi); font-weight: 600; font-size: 14px; transition: border-color .15s, transform .2s var(--mu-ease); }
.messages-modern .request-inbox-link:hover { border-color: var(--blue); transform: translateX(3px); }
.messages-modern .request-inbox-link > .icon { color: var(--blue); }
.messages-modern .request-inbox-link > span { display: inline-flex; align-items: center; gap: 8px; }
.unread-badge { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--mu-grad); color: #fff; font: 700 12px 'DM Sans', sans-serif; box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--blue) 80%, transparent); }
.messages-modern .conversations-search { position: relative; display: flex; align-items: center; max-width: none; min-height: 50px; padding: 0 18px; gap: 10px; margin-bottom: 16px; border: 1px solid var(--bd-1); border-radius: 999px; background: var(--sf-1); transition: border-color .18s, box-shadow .18s; }
.messages-modern .conversations-search:focus-within { border-color: var(--blue); box-shadow: var(--mu-ring); }
.messages-modern .conversations-search > .icon { color: var(--tx-faint); flex: none; }
.messages-modern .conversations-search input { border: 0 !important; background: transparent !important; box-shadow: none !important; min-height: 46px; padding: 0; }
.messages-modern .community-posts { border-radius: 24px; box-shadow: var(--mu-shadow); background: var(--panel); }
.messages-modern .community-posts > .panel-heading { padding: 18px 22px; }
.messages-modern .panel-heading h2 { font-size: 18px; letter-spacing: -.4px; }
.messages-modern .panel-heading > span { padding: 3px 11px; border-radius: 999px; background: var(--sf-2); border: 1px solid var(--line); color: var(--tx-mid); font-size: 12px; letter-spacing: 0; }
.messages-modern .message-row { gap: 14px; padding: 16px 22px; border-top: 1px solid var(--line); align-items: center; }
.messages-modern .message-row .avatar { width: 46px; height: 46px; font-size: 16px; }
.messages-modern .message-row > div:not(.request-actions) { flex: 1; display: grid; gap: 2px; }
.messages-modern .message-row strong { font-size: 15px; display: flex; align-items: center; gap: 8px; }
.messages-modern .message-row p { font-size: 13.5px; color: var(--tx-lo); }
.messages-modern .message-row small { font-size: 12px; margin-top: 0; }
.messages-modern .message-row.is-unread { background: color-mix(in srgb, var(--blue) 8%, transparent); box-shadow: inset 3px 0 0 var(--blue); }
.messages-modern .message-row.is-unread p { color: var(--tx-hi); font-weight: 600; }
.messages-modern .message-row.is-unread small { color: var(--ac-blue); }
.messages-modern .request-row { flex-wrap: wrap; }
.messages-modern .request-actions { display: flex; gap: 8px; flex: none; }
.messages-modern .request-actions form { margin: 0; }
.messages-modern .button { min-height: 40px; }
.messages-modern .button-primary { background: var(--mu-grad); color: #fff; }
.messages-modern .button-ghost { background: var(--ov-1); border: 1px solid var(--bd-1); color: var(--tx-hi); }
.messages-modern .empty-feed { border: 0; padding: clamp(36px, 8vw, 64px) 20px; }
.messages-modern .empty-orbit { width: 64px !important; height: 64px !important; border-radius: 20px !important; color: var(--blue); background: color-mix(in srgb, var(--blue) 14%, var(--sf-2)) !important; border: 1px solid color-mix(in srgb, var(--blue) 30%, var(--bd-1)); display: grid; place-items: center; }
.messages-modern .filter-empty { padding: 28px 20px; text-align: center; color: var(--tx-faint); margin: 0; }

/* ---------- Chat thread ---------- */
.chat-page .chat-shell { border: 1px solid var(--line); background: var(--panel); box-shadow: var(--mu-shadow); }
.chat-page .chat-header { background: color-mix(in srgb, var(--sf-1) 85%, transparent); border-bottom: 1px solid var(--line); gap: 12px; }
.chat-page .chat-back { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--sf-1); color: var(--tx-mid); }
.chat-page .chat-back:hover { border-color: var(--blue); color: var(--tx-hi); }
.chat-page .chat-header .avatar { width: 42px; height: 42px; font-size: 15px; box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px color-mix(in srgb, var(--blue) 40%, transparent); }
.chat-page .chat-title { display: grid; gap: 1px; min-width: 0; flex: 1; }
.chat-page .chat-title strong { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-page .chat-title a { font-size: 12px; color: var(--ac-blue); font-weight: 600; }
.chat-page .chat-header-action { min-height: 38px; border-radius: 999px; border: 1px solid var(--line); background: var(--sf-1); color: var(--tx-mid); font-weight: 600; font-size: 13px; padding: 0 16px; cursor: pointer; }
.chat-page .chat-header-action.chat-search-toggle { width: 38px; padding: 0; display: grid; place-items: center; }
.chat-page .chat-header-action:hover { border-color: var(--bd-2); color: var(--tx-hi); }
.chat-page .chat-scroll { background: radial-gradient(70% 40% at 100% 0%, color-mix(in srgb, var(--blue) 6%, transparent), transparent 70%); }
/* message block: bubble on top, then Reply · time on one line, reactions below */
.chat-page .chat-msg-main { display: grid; grid-template-columns: auto auto minmax(0, 1fr); justify-items: start; align-items: center; column-gap: 10px; max-width: min(78%, 680px); }
.chat-page .chat-msg-main > * { grid-column: 1 / -1; }
.chat-page .chat-msg-main > .chat-bubble { justify-self: start; max-width: 100%; }
.chat-page .chat-msg-main > .chat-message-actions { grid-column: 1; margin: 4px 8px 0; opacity: .8; }
.chat-page .chat-msg-main > .chat-time { grid-column: 2; margin: 4px 0 0; }
.chat-page .chat-msg.is-own .chat-msg-main { grid-template-columns: minmax(0, 1fr) auto auto; justify-items: end; }
.chat-page .chat-msg.is-own .chat-msg-main > .chat-bubble { justify-self: end; }
.chat-page .chat-msg.is-own .chat-msg-main > .chat-message-actions { grid-column: 2; margin: 4px 0 0; order: 0; }
.chat-page .chat-msg.is-own .chat-msg-main > .chat-time { grid-column: 3; margin: 4px 8px 0 0; }
.chat-page .chat-msg-main > .chat-sender { margin: 0 4px 3px; font-weight: 600; }
.chat-page .chat-bubble { padding: 11px 16px; border-radius: 20px 20px 20px 6px; background: var(--sf-3); color: var(--tx-hi); font-size: 15px; line-height: 1.55; box-shadow: none; }
.chat-page .chat-msg.is-own .chat-bubble { background: var(--mu-grad); color: #fff; border-radius: 20px 20px 6px 20px; box-shadow: 0 10px 22px -14px color-mix(in srgb, var(--blue) 85%, transparent); }
.chat-page .chat-reply-quote { border-left: 3px solid var(--blue); border-radius: 10px; }
.chat-page .chat-composer { padding: 12px 16px; background: color-mix(in srgb, var(--sf-1) 90%, transparent); border-top: 1px solid var(--line); gap: 10px; align-items: center; }
.chat-page .chat-composer textarea { background: var(--sf-0); border: 1px solid var(--bd-1); border-radius: 24px; min-height: 46px; padding: 12px 20px; transition: border-color .18s, box-shadow .18s; }
.chat-page .chat-composer textarea:focus { border-color: var(--blue); box-shadow: var(--mu-ring); }
.chat-page .chat-send { width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--mu-grad); color: #fff; display: grid; place-items: center; cursor: pointer; flex: none; box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--blue) 85%, transparent); transition: transform .15s, filter .15s; }
.chat-page .chat-send:hover { transform: scale(1.06); filter: brightness(1.08); }
.chat-page .chat-tool { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: var(--sf-2); color: var(--tx-mid); display: grid; place-items: center; }
.chat-page .chat-tool:hover { border-color: var(--blue); color: var(--tx-hi); }
.chat-page .chat-retention { font-size: 11.5px; color: var(--tx-faint); border-top: 0; padding: 6px 16px 2px; }
.chat-page .chat-request-gate { border-radius: 18px; margin: 12px 16px 16px; padding: 16px 18px; border: 1px solid color-mix(in srgb, var(--blue) 35%, var(--line)); background: linear-gradient(120deg, color-mix(in srgb, var(--blue) 10%, var(--sf-1)), var(--sf-1)); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.chat-page .chat-request-gate p { margin: 0; display: flex; gap: 8px; align-items: center; color: var(--tx-hi); font-size: 14px; flex: 1 1 240px; }
.chat-page .request-actions { display: flex; gap: 8px; } .chat-page .request-actions form { margin: 0; }
.chat-page .chat-load-more { border-radius: 999px; padding: 8px 18px; font-weight: 600; font-size: 13px; }
.chat-page .chat-empty { text-align: center; color: var(--tx-faint); padding: 40px 16px; }

/* ---------- Moderator console (also lifts the shared admin console) ---------- */
.moderator-modern { max-width: 1080px; padding-top: 36px; }
.moderator-modern > .eyebrow { display: inline-flex; padding: 5px 12px; border-radius: 999px; background: color-mix(in srgb, var(--ac-orange) 14%, var(--sf-2)); color: var(--ac-orange); }
.moderator-modern > h1 { font-size: clamp(32px, 6vw, 54px); letter-spacing: -2px; margin: 4px 0 10px; }
.moderator-modern > .form-note { max-width: 760px; font-size: 14px; line-height: 1.65; padding: 14px 18px; border: 1px solid var(--line); border-left: 3px solid var(--blue); border-radius: 14px; background: var(--sf-1); margin: 0 0 8px; }
.moderator-modern .settings-block { max-width: none !important; width: 100%; margin-top: 18px; padding: clamp(18px, 3vw, 28px); border-radius: 22px; box-shadow: var(--mu-shadow); }
.moderator-modern .settings-block > h2 { font-size: clamp(20px, 3vw, 24px); letter-spacing: -.6px; margin-bottom: 6px; display: flex; align-items: center; gap: 10px; }
.moderator-modern .settings-block > p { font-size: 14px; line-height: 1.6; color: var(--tx-lo); }
.moderator-modern .device-row { flex-wrap: wrap; border-radius: 18px; padding: 16px 18px; gap: 12px; }
.moderator-modern .device-row > div { min-width: 0; }
.moderator-modern .device-row p { color: var(--tx-lo); font-size: 13.5px; line-height: 1.55; margin: 6px 0 0; overflow-wrap: anywhere; }
.moderator-modern form[style*="flex"] { align-items: flex-end !important; gap: 10px !important; }
.moderator-modern :is(input[type="text"], input:not([type]), select, textarea):not([type="checkbox"]) { background-color: var(--sf-1) !important; border: 1px solid var(--bd-1) !important; border-radius: 12px !important; color: var(--tx-hi) !important; min-height: 44px; padding: 10px 14px; }
.moderator-modern textarea { min-height: 100px; }
.moderator-modern :is(input, select, textarea):focus { border-color: var(--blue) !important; box-shadow: var(--mu-ring) !important; outline: 0; }
.moderator-modern .button { min-height: 40px; height: auto; align-self: flex-end; }
.moderator-modern .button-primary { background: var(--mu-grad); color: #fff; }
.moderator-modern .button-ghost { background: var(--ov-1); border: 1px solid var(--bd-1); color: var(--tx-hi); }
.moderator-modern .button-danger { background: var(--ac-red); color: #fff; }
.moderator-modern fieldset { flex-basis: 100%; min-width: 0; margin: 4px 0; padding: 14px 16px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--sf-1); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 10px 16px; }
.moderator-modern fieldset legend { padding: 0 8px; font-size: 12.5px; font-weight: 700; color: var(--tx-mid); grid-column: 1 / -1; float: none; width: auto; }
.moderator-modern .checkbox-field { display: flex !important; flex-direction: row !important; align-items: center; gap: 10px; min-width: 0 !important; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); font-size: 13px; color: var(--tx-mid); cursor: pointer; }
.moderator-modern .checkbox-field input { appearance: auto; width: 18px !important; height: 18px; min-height: 0 !important; padding: 0; margin: 0; accent-color: var(--blue); flex: none; border: 0 !important; }
.moderator-modern .checkbox-field:has(input:checked) { border-color: color-mix(in srgb, var(--blue) 55%, transparent); background: color-mix(in srgb, var(--blue) 8%, var(--panel)); }
.moderator-modern details { border-radius: 14px; }
.moderator-modern details > summary { cursor: pointer; font-weight: 600; font-size: 13.5px; color: var(--tx-mid); padding: 8px 0; }
.moderator-modern details.post-owner-tools { margin-top: 8px; padding: 4px 14px; border: 1px solid var(--line); background: var(--sf-1); }
.moderator-modern details.post-owner-tools > :not(summary) { padding-bottom: 12px; }
.moderator-modern .moderation-post { padding: 18px 20px; margin-top: 14px; border: 1px solid var(--line); border-radius: 18px; background: var(--sf-1); }
.moderator-modern .moderation-post > div:first-child { align-items: center; flex-wrap: wrap; font-size: 12.5px; }
.moderator-modern .moderation-post > div:first-child strong { font-size: 15px; }
.moderator-modern .moderation-post p { font-size: 15px; color: var(--tx-hi); }
.moderator-modern .moderation-actions { gap: 10px; align-items: flex-end; }
.moderator-modern .moderation-actions form { flex: 1 1 220px; align-items: flex-end; }
.moderator-modern .advertiser-application-banner { border-radius: 16px; max-height: 200px; }
.moderator-modern .advertiser-application-logo { border-radius: 14px; }
.moderator-modern .form-note { font-size: 13px; }
.moderator-modern .device-row a { color: var(--ac-blue); font-weight: 600; }

/* ---------- Batch 4 responsive ---------- */
@media (max-width: 720px) {
  .messages-modern { padding-inline: 14px; }
  .messages-modern .message-row { padding: 14px 16px; }
  .messages-modern .request-row { align-items: flex-start; }
  .messages-modern .request-actions { width: 100%; }
  .messages-modern .request-actions form { flex: 1; }
  .messages-modern .request-actions .button { width: 100%; }
  .chat-page .chat-msg-main { max-width: 86%; }
  .chat-page .chat-header { padding: 10px 12px; gap: 8px; }
  .chat-page .chat-composer { padding: 10px 12px; gap: 8px; }
  .chat-page .chat-request-gate .request-actions, .chat-page .chat-request-gate .request-actions form, .chat-page .chat-request-gate .button { width: 100%; }
  .moderator-modern { padding-inline: 14px; }
  .moderator-modern .moderation-actions form { flex-basis: 100%; }
  .moderator-modern form[style*="flex"] > .button, .moderator-modern .device-row > form .button { flex: 1 1 auto; }
  .moderator-modern .device-row > form[style*="flex"] { flex: 1 1 100% !important; }
}

/* batch 4: keep chat meta (Reply · time) on one row even under short bubbles */
.chat-page .chat-msg-main { min-width: min(190px, 78%); }
.chat-page .chat-msg-main .chat-time, .chat-page .chat-msg-main .chat-message-actions { white-space: nowrap; }
.chat-page .chat-msg-main > .chat-message-actions, .chat-page .chat-msg-main > .chat-time { align-self: center; height: auto; min-height: 0; }
.chat-page .chat-msg-main > .chat-message-actions { display: inline-flex; align-items: center; }
.chat-page .chat-msg-main > .chat-message-actions button { min-height: 0; height: auto; padding: 2px 4px; }

/* =====================================================================
   BATCH 5 — info, guide, home, groups, group settings
   ===================================================================== */
html:has(.home-page), .home-page { overflow-x: clip; }

/* ---- info + guide ---- */
.info-modern { background: radial-gradient(circle at 78% 6%, color-mix(in srgb, var(--blue) 22%, transparent), transparent 34%), radial-gradient(circle at 8% 40%, color-mix(in srgb, var(--pink) 10%, transparent), transparent 30%), var(--ink); }
.info-modern .info-main { padding: clamp(56px, 9vw, 100px) 0 clamp(70px, 10vw, 130px); }
.info-modern .info-main > .eyebrow { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 999px; background: color-mix(in srgb, var(--blue) 14%, var(--sf-2)); color: var(--ac-blue); letter-spacing: 1.6px; margin-bottom: 18px; }
.info-modern .info-main h1 { letter-spacing: -2.4px; line-height: 1.02; }
.info-modern .info-intro { color: var(--tx-lo); }
.info-modern .info-sections, .info-modern .guide-grid { gap: clamp(14px, 2vw, 22px); }
.info-modern .info-sections { grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }
.info-modern .guide-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.info-modern .info-sections article, .info-modern .guide-card { position: relative; border: 1px solid var(--line); border-radius: 22px; background: var(--panel); padding: clamp(20px, 3vw, 28px); box-shadow: var(--mu-shadow); overflow: hidden; transition: transform .25s var(--mu-ease), border-color .2s, box-shadow .25s; }
.info-modern .info-sections article::before, .info-modern .guide-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--mu-grad); opacity: .0; transition: opacity .2s; }
@media (hover: hover) { .info-modern .info-sections article:hover, .info-modern .guide-card:hover { transform: translateY(-3px); border-color: var(--bd-2); } .info-modern .info-sections article:hover::before, .info-modern .guide-card:hover::before { opacity: 1; } }
.info-modern .principle-number { display: inline-grid; place-items: center; min-width: 34px; height: 26px; padding: 0 9px; border-radius: 999px; background: color-mix(in srgb, var(--ac-orange) 14%, var(--sf-2)); color: var(--ac-orange); }
.info-modern .info-sections h2, .info-modern .guide-card h2 { margin: 18px 0 10px; font-size: clamp(19px, 2.4vw, 22px); }
.info-modern .info-sections p { font-size: 14px; line-height: 1.75; }
.info-modern .info-sections p a { color: var(--ac-blue); font-weight: 600; }
.info-modern .guide-card ul { padding-left: 20px; }
.info-modern .guide-card li { font-size: 14px; line-height: 1.7; }
.info-modern .info-main > p > .button { box-shadow: 0 14px 28px -16px color-mix(in srgb, var(--blue) 80%, transparent); }

/* ---- home (landing) ---- */
.home-page .hero h1 em, .home-page .section-intro h2 em, .home-page .story-section h2 em, .home-page .cta-band h2 em { font-style: normal; background: var(--mu-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.home-page .orbit-card { border: 1px solid var(--line); border-radius: 28px; box-shadow: var(--mu-shadow), 0 40px 80px -50px color-mix(in srgb, var(--blue) 70%, transparent); background: color-mix(in srgb, var(--panel) 60%, transparent); }
.home-page .visual-note { border-radius: 16px; backdrop-filter: blur(12px); box-shadow: var(--mu-shadow); }
.home-page .hero-actions .button { box-shadow: 0 16px 30px -16px color-mix(in srgb, var(--blue) 85%, transparent); }
.home-page .trust-strip { border-radius: 999px; border: 1px solid var(--line); padding: 14px 28px; background: color-mix(in srgb, var(--panel) 70%, transparent); }
.home-page .principle-grid article { border: 1px solid var(--line); border-radius: 22px; background: var(--panel); padding: 26px; box-shadow: var(--mu-shadow); transition: transform .25s var(--mu-ease), border-color .2s; }
@media (hover: hover) { .home-page .principle-grid article:hover { transform: translateY(-4px); border-color: var(--bd-2); } }
.home-page .principle-grid h3 { margin-top: 20px; }
.home-page .principle-grid p { font-size: 14px; }
.home-page .principle-number { display: inline-grid; place-items: center; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--ac-orange) 14%, var(--sf-2)); }
.home-page .stats-grid { border: 1px solid var(--line); border-radius: 22px; background: var(--panel); padding: 22px 26px; box-shadow: var(--mu-shadow); }
.home-page .stats-grid strong { color: var(--tx-hi); }
.home-page .community-list .community-row { border: 1px solid var(--line); border-radius: 16px; background: var(--panel); padding: 16px 18px; margin-top: 10px; transition: border-color .2s, background .2s; }
.home-page .community-list .community-row:hover { border-color: var(--bd-2); background: var(--sf-2); }
.home-page .community-list .list-heading { margin-bottom: 4px; }
.home-page .community-members { align-self: center; padding: 4px 10px; border-radius: 999px; background: var(--ov-1); border: 1px solid var(--line); font-size: 11.5px; white-space: nowrap; }
.home-page .viral-card { border-radius: 18px; box-shadow: var(--mu-shadow); }
.home-page .story-section { border: 1px solid var(--line); border-radius: 28px; background: var(--panel); box-shadow: var(--mu-shadow); padding: clamp(32px, 6vw, 80px); }
.home-page .story-marker { background: color-mix(in srgb, var(--ac-orange) 12%, var(--sf-2)); border-color: color-mix(in srgb, var(--ac-orange) 50%, transparent); }
.home-page .cta-band { position: relative; overflow: hidden; border-radius: 28px; background: linear-gradient(120deg, color-mix(in srgb, var(--blue) 40%, var(--sf-1)), color-mix(in srgb, var(--pink) 28%, var(--sf-1))); box-shadow: var(--mu-shadow); }
@media (max-width: 760px) {
  .home-page .trust-strip { border-radius: 18px; padding: 12px 16px; }
  .home-page .principle-grid article { padding: 22px; }
  .home-page .stats-grid { padding: 18px; }
  .home-page .community-row { grid-template-columns: 24px minmax(0, 1fr); }
  .home-page .community-members { grid-column: 2; justify-self: start; }
  .home-page .story-section { padding: 28px 22px; }
}

/* ---- groups list ---- */
.groups-modern .create-group-panel { border-radius: 22px; padding: clamp(18px, 3vw, 26px); box-shadow: var(--mu-shadow); margin-top: 6px; }
.groups-modern .create-group-form label { font-size: 12.5px; color: var(--tx-lo); }
.groups-modern .group-row .avatar { flex: none; }
.groups-modern .group-row p { color: var(--tx-lo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 3px; }
.groups-modern .group-row .row-arrow { color: var(--tx-faint); transition: transform .2s var(--mu-ease), color .2s; }
.groups-modern .group-row:hover .row-arrow { transform: translateX(3px); color: var(--ac-blue); }
.groups-modern .community-posts > a.activity-row { border-radius: 18px; }
.groups-modern .conversations-search { margin-top: 18px; }
.groups-modern .empty-feed { border: 1px dashed var(--bd-2); border-radius: 22px; padding: 36px 20px; text-align: center; background: var(--sf-1); }
@media (max-width: 640px) { .groups-modern .create-group-form .button { width: 100%; justify-content: center; } }

/* ---- group settings ---- */
.group-modern { width: min(800px, 100%); padding-top: 28px; }
.group-modern .group-info-head { position: relative; gap: clamp(14px, 3vw, 22px); padding: clamp(18px, 3vw, 28px); border: 1px solid var(--line); border-radius: 26px; background: linear-gradient(160deg, color-mix(in srgb, var(--blue) 14%, var(--panel)), var(--panel) 65%); box-shadow: var(--mu-shadow); overflow: hidden; margin: 14px 0 20px; }
.group-modern .group-info-head::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--mu-grad); }
.group-modern .group-info-head h1 { font-size: clamp(24px, 4.5vw, 34px); letter-spacing: -1px; overflow-wrap: anywhere; }
.group-modern .group-info-head .eyebrow { color: var(--ac-blue); }
.group-modern .group-info-head .upload-help { font-size: 13.5px; color: var(--tx-lo); }
.group-modern .avatar.group-info-avatar { background: var(--mu-grad); color: #fff; box-shadow: var(--mu-glow, 0 12px 30px -12px var(--blue)); flex: none; }
.group-modern .group-panel { border-radius: 22px; padding: clamp(18px, 3vw, 26px); box-shadow: var(--mu-shadow); margin-bottom: 18px; }
.group-modern .group-panel h2 { display: flex; align-items: center; gap: 10px; font-size: 17px; letter-spacing: -.3px; margin-bottom: 14px; }
.group-modern .panel-icon { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: color-mix(in srgb, var(--blue) 14%, var(--sf-2)); color: var(--ac-blue); flex: none; }
.group-modern .count-chip { display: inline-grid; place-items: center; min-width: 26px; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--ov-1); border: 1px solid var(--line); font-size: 12px; color: var(--tx-mid); font-weight: 600; }
.group-modern .group-form label { font-size: 12.5px; font-weight: 600; color: var(--tx-mid); }
.group-modern .group-form label .upload-help { font-weight: 400; display: inline; }
.group-modern .group-form :is(input:not([type="checkbox"]):not([type="file"])) { min-height: 46px; border-radius: 12px; background: var(--sf-1); border: 1px solid var(--bd-1); padding: 10px 14px; color: var(--tx-hi); }
.group-modern .group-form :is(input):focus { border-color: var(--blue); box-shadow: var(--mu-ring); outline: 0; }
.group-modern .group-form > .button, .group-modern form > .button-primary { justify-self: start; }
.group-modern .group-avatar-form { padding-top: 16px; border-top: 1px dashed var(--line); }
.group-modern .upload-help { font-size: 12.5px; line-height: 1.55; color: var(--tx-lo); }
.group-modern .group-suggest { border-radius: 16px; background: var(--sf-1); padding: 12px 14px; }
.group-modern .group-suggest legend { font-size: 12px; font-weight: 600; color: var(--tx-mid); }
.group-modern .group-suggest-item { border-radius: 10px; padding: 7px 8px; transition: background .15s; }
.group-modern .group-suggest-item:hover { background: var(--ov-1); }
.group-modern .group-suggest-item input { accent-color: var(--blue); width: 18px; height: 18px; }
.group-modern .member-row { padding: 12px 6px; border-radius: 14px; gap: 12px; }
.group-modern .member-row + .member-row { border-top: 1px solid var(--line); }
.group-modern .member-name { flex: 1 1 140px; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.group-modern .member-name .upload-help { margin-left: 4px; }
.group-modern .member-badge { color: var(--ac-orange); background: color-mix(in srgb, var(--ac-orange) 12%, var(--sf-2)); padding: 3px 10px; font-weight: 700; }
.group-modern .member-action { min-height: 34px; border-radius: 999px; padding: 6px 12px; background: var(--ov-1); }
.group-modern .member-action:hover { border-color: var(--bd-2); }
.group-modern .member-action.is-danger { color: var(--ac-red); }
.group-modern .group-danger { border-color: color-mix(in srgb, var(--ac-red) 35%, var(--line)); background: color-mix(in srgb, var(--ac-red) 6%, var(--panel)); }
.group-modern .group-form-row { gap: 10px; }
.group-modern .invite-share, .group-modern [class*="invite"] { min-width: 0; }
@media (max-width: 520px) {
  .group-modern .group-info-head { flex-direction: column; align-items: flex-start; }
  .group-modern .member-actions { width: 100%; flex-wrap: wrap; }
  .group-modern .group-form > .button, .group-modern .group-form-row .button { width: 100%; justify-content: center; }
}
.home-page { position: relative; }
.group-modern .count-chip + .upload-help { display: none; }
.group-modern .group-form label { display: block; }
.group-modern .group-form label > input { display: block; width: 100%; margin-top: 6px; }
.group-modern .group-form label .upload-help, .group-modern .member-name .upload-help { display: inline; }