:root {
  --ink: #211e18;
  --ink-soft: #5c574d;
  --muted: #898276;
  --forest: #28251f;
  --forest-deep: #171511;
  --forest-soft: #f3ecdd;
  --sage: #eee7d8;
  --paper: #f8f7f3;
  --white: #ffffff;
  --line: #e9ece6;
  --line-strong: #dfe5dc;
  --gold: #c89b45;
  --rose: #d97070;
  --rose-soft: #faeeee;
  --blue: #7693a5;
  --shadow: 0 10px 32px rgba(33, 30, 24, .055);
  --shadow-hover: 0 17px 42px rgba(33, 30, 24, .105);
  --radius: 18px;
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: "Iowan Old Style", "Baskerville", "Palatino Linotype", Georgia, serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--paper); scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--font-sans); font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid rgba(200, 155, 69, .38); outline-offset: 2px; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }

.app-shell { min-height: 100vh; }
.sidebar { position: fixed; z-index: 30; inset: 0 auto 0 0; width: 256px; display: flex; flex-direction: column; background: #fff; border-right: 1px solid #ecefe9; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #dce4dc transparent; }
.sidebar-inner { min-height: 100%; display: flex; flex-direction: column; padding: 25px 17px 17px; }
.brand-lockup { display: flex; align-items: center; gap: 11px; padding: 0 9px; min-height: 46px; }
.brand-mark { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border-radius: 13px; color: #f6f6eb; background: var(--forest); box-shadow: 0 5px 13px rgba(33, 30, 24, .14); }
.brand-mark svg { width: 26px; height: 26px; stroke-width: 1.35; }
.brand-mark img { width: 34px; height: 34px; object-fit: contain; border-radius: 11px; }
.brand-name { display: block; font-family: var(--font-serif); font-size: 19px; font-weight: 700; line-height: 1.05; letter-spacing: -.45px; }
.brand-caption { display: block; margin-top: 4px; color: #849389; font-size: 9px; font-weight: 600; letter-spacing: 1.1px; text-transform: uppercase; }
.workspace-label { display: flex; align-items: center; gap: 8px; margin: 30px 11px 10px; color: #9aa59c; font-size: 10px; font-weight: 700; letter-spacing: 1.15px; text-transform: uppercase; }
.workspace-label::after { content: ""; height: 1px; flex: 1; background: #edf0eb; }
.nav-list { display: grid; gap: 4px; }
.nav-link { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 42px; padding: 0 11px; border: 0; border-radius: 11px; color: #697a70; background: transparent; text-align: left; cursor: pointer; transition: background .18s ease, color .18s ease, transform .18s ease; }
.nav-link svg { width: 18px; height: 18px; color: #8b9a90; }
.nav-link span { flex: 1; font-size: 12.5px; font-weight: 550; }
.nav-link:hover { color: var(--forest); background: #f5f7f3; transform: translateX(1px); }
.nav-link.active { color: var(--forest); background: #eaf1eb; font-weight: 700; }
.nav-link.active svg { color: var(--forest); }
.nav-count { min-width: 20px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: 99px; color: #fff; background: #ca7472; font-size: 10px !important; font-weight: 700 !important; }
.nav-tag { display: inline-flex; align-items: center; padding: 3px 6px; border-radius: 5px; color: #75857b; background: #edf2ed; font-size: 9px !important; font-weight: 700 !important; letter-spacing: .4px; text-transform: uppercase; }
.sidebar-spacer { flex: 1; min-height: 23px; }
.admin-callout { margin: 17px 2px 13px; padding: 13px 12px; border: 1px solid #e7ede6; border-radius: 13px; background: linear-gradient(142deg, #f8faf5, #f4f7f0); }
.admin-callout-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.admin-callout strong { display: block; color: var(--ink); font-size: 11px; }
.admin-callout p { margin: 5px 0 10px; color: #7f8d83; font-size: 10px; line-height: 1.45; }
.admin-callout .workspace-launch { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 8px 9px; border: 0; border-radius: 8px; color: #fff; background: var(--forest); font-size: 10px; font-weight: 650; cursor: pointer; transition: background .18s ease; }
.admin-callout .workspace-launch:hover { background: #3a3429; }
.workspace-launch svg { width: 14px; height: 14px; }
.sidebar-help { display: flex; align-items: center; gap: 10px; padding: 11px 10px; color: #819087; font-size: 11px; }
.sidebar-help svg { width: 17px; height: 17px; }
.account-card { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 8px 3px; border: 0; border-top: 1px solid #edf0ec; background: transparent; text-align: left; cursor: pointer; }
.account-card img { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; object-fit: cover; }
.account-info { flex: 1; min-width: 0; }
.account-info strong, .account-info small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-info strong { font-size: 11px; font-weight: 700; }
.account-info small { margin-top: 2px; color: #89978d; font-size: 9px; }
.account-menu { width: 16px; height: 16px; color: #99a69c; }
.sidebar-admin .workspace-label { margin-top: 22px; }
.sidebar-admin .nav-link { min-height: 38px; }
.admin-nav-subtitle { margin: 15px 10px 7px; color: #a1aaa3; font-size: 9px; font-weight: 750; letter-spacing: 1.2px; text-transform: uppercase; }
.admin-mode-pill { display: flex; align-items: center; gap: 7px; width: max-content; margin: 18px 8px 0; padding: 6px 9px; border: 1px solid #e4ebe4; border-radius: 99px; color: #52725f; background: #f4f8f4; font-size: 9px; font-weight: 700; }
.admin-mode-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #51a374; }

.main-shell { min-height: 100vh; margin-left: 256px; }
.topbar { position: sticky; z-index: 20; top: 0; height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 37px; border-bottom: 1px solid #eaede7; background: rgba(250, 250, 246, .94); backdrop-filter: blur(15px); }
.topbar-leading, .topbar-actions { display: flex; align-items: center; }
.topbar-leading { min-width: 160px; gap: 12px; }
.breadcrumbs { display: flex; align-items: center; gap: 9px; color: #929d95; font-size: 11px; }
.crumb-home { font-weight: 700; color: #718278; }
.crumb-divider { color: #bdc6be; }
#currentCrumb { color: var(--ink); font-weight: 650; }
.topbar-actions { gap: 16px; }
.global-search { display: flex; align-items: center; gap: 9px; width: 249px; height: 37px; padding: 0 10px; border: 1px solid #e6eae3; border-radius: 10px; background: #fff; color: #91a097; transition: border-color .18s, box-shadow .18s; }
.global-search:focus-within { border-color: #d9c28f; box-shadow: 0 0 0 3px rgba(200, 155, 69, .1); }
.global-search svg { width: 16px; height: 16px; flex: 0 0 16px; }
.global-search input { min-width: 0; flex: 1; padding: 0; border: 0; outline: none; color: var(--ink); background: transparent; font-size: 10px; }
.global-search input::placeholder { color: #a2aca5; }
.search-shortcut { padding: 2px 4px; border: 1px solid #eaede8; border-radius: 4px; color: #abb5ad; font-size: 8px; white-space: nowrap; }
.icon-button { position: relative; width: 36px; height: 36px; display: inline-grid; flex: 0 0 36px; place-items: center; padding: 0; border: 1px solid #e6eae4; border-radius: 10px; color: #728379; background: #fff; cursor: pointer; transition: background .18s, transform .18s; }
.icon-button:hover { background: #f1f5f0; transform: translateY(-1px); }
.icon-button svg { width: 17px; height: 17px; }
.notification-dot { position: absolute; top: 7px; right: 7px; width: 6px; height: 6px; border: 1px solid #fff; border-radius: 50%; background: #cb7471; }
.topbar-divider { width: 1px; height: 27px; background: #e7ebe5; }
.topbar-profile { display: flex; align-items: center; gap: 8px; padding: 0; border: 0; background: transparent; text-align: left; cursor: pointer; }
.avatar-top { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.topbar-profile-copy strong, .topbar-profile-copy small { display: block; }
.topbar-profile-copy strong { font-size: 10px; line-height: 1.3; }
.topbar-profile-copy small { margin-top: 2px; color: #8b9990; font-size: 8px; }
.chevron { width: 15px; height: 15px; margin-left: 2px; color: #9aa69d; }
.mobile-menu-button { display: none; }
.page-scroll { min-height: calc(100vh - 74px); overflow: auto; }
.main-view { max-width: 1550px; min-height: calc(100vh - 124px); margin: 0 auto; padding: 34px 38px 26px; }
.app-footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 15px 39px 21px; color: #7d8980; font-size: clamp(14px, 1.15vw, 18px); line-height: 1.5; }
.app-footer span:last-child { display: flex; gap: 8px; align-items: center; }
.app-footer a:hover { color: var(--forest); }
.app-footer i { color: #c8d0c8; font-style: normal; }

.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.eyebrow { display: flex; align-items: center; gap: 7px; color: #849188; font-size: 9px; font-weight: 750; letter-spacing: 1.3px; text-transform: uppercase; }
.eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: #5e9276; box-shadow: 0 0 0 4px #e7efe7; }
h1, h2, h3, h4, p { margin-top: 0; }
h1 { margin-bottom: 7px; font-family: var(--font-serif); font-size: clamp(26px, 2.2vw, 34px); font-weight: 600; line-height: 1.12; letter-spacing: -.7px; }
.page-heading p { margin: 0; color: #819087; font-size: 11px; }
.heading-actions { display: flex; align-items: center; gap: 9px; }
.date-chip, .soft-chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid #e6eae3; border-radius: 9px; color: #728178; background: #fff; font-size: 10px; font-weight: 600; white-space: nowrap; }
.date-chip svg, .soft-chip svg { width: 14px; height: 14px; }
.primary-button, .secondary-button, .text-button, .danger-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 0 14px; border: 1px solid transparent; border-radius: 10px; font-size: 10.5px; font-weight: 700; cursor: pointer; transition: transform .16s, background .16s, box-shadow .16s; }
.primary-button { color: #fff; background: var(--forest); box-shadow: 0 5px 13px rgba(33, 30, 24, .11); }
.primary-button:hover { background: #3a3429; box-shadow: 0 7px 16px rgba(33, 30, 24, .16); transform: translateY(-1px); }
.primary-button svg, .secondary-button svg, .danger-button svg { width: 15px; height: 15px; }
.secondary-button { border-color: #e4e9e2; color: #496256; background: #fff; }
.secondary-button:hover { border-color: #cbd8ce; background: #f7f9f6; }
.text-button { min-height: 30px; padding: 0 5px; color: #527261; background: transparent; }
.text-button:hover { color: #1b533b; }
.danger-button { color: #ad5757; background: #faeeee; }
.danger-button:hover { background: #f8dfdf; }
.link-button { display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; border: 0; color: #517361; background: none; font-size: 10px; font-weight: 700; cursor: pointer; }
.link-button svg { width: 14px; height: 14px; }
.link-button:hover { color: #193f34; }

.member-heading { margin-bottom: 22px; }
.member-heading h1 { font-size: 32px; }
.member-heading h1 em { color: #597b65; font-style: normal; }
.member-head-right { display: flex; align-items: center; gap: 9px; }
.intent-status { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid #e2eae1; border-radius: 99px; color: #637d69; background: #f2f6f1; font-size: 9px; font-weight: 650; }
.intent-status svg { width: 13px; height: 13px; }
.member-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; align-items: start; gap: 22px; }
.member-main { min-width: 0; }
.welcome-banner { position: relative; min-height: 173px; display: flex; align-items: center; justify-content: space-between; gap: 16px; overflow: hidden; padding: 26px 30px; border-radius: 18px; color: #f9f8ef; background: radial-gradient(ellipse at 87% 21%, rgba(194, 173, 117, .22), transparent 25%), radial-gradient(ellipse at 100% 114%, rgba(101, 136, 99, .42), transparent 36%), linear-gradient(120deg, #173e33 0%, #1d4b3c 60%, #315741 100%); box-shadow: 0 11px 25px rgba(30, 70, 55, .12); }
.welcome-banner::before { content: ""; position: absolute; top: -82px; right: 129px; width: 245px; height: 245px; border: 1px solid rgba(229, 222, 187, .12); border-radius: 50%; box-shadow: 0 0 0 26px rgba(236, 228, 193, .025), 0 0 0 52px rgba(236, 228, 193, .025); }
.welcome-banner::after { content: "✳"; position: absolute; top: 22px; right: 44%; color: rgba(236, 220, 177, .42); font-size: 19px; }
.banner-copy { position: relative; z-index: 2; max-width: 420px; }
.banner-kicker { margin-bottom: 8px; color: #c7d7c4; font-size: 9px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase; }
.banner-copy h2 { max-width: 350px; margin: 0 0 8px; font-family: var(--font-serif); font-size: 24px; font-weight: 500; line-height: 1.18; letter-spacing: -.3px; }
.banner-copy p { margin: 0; color: #cfdbcf; font-size: 10px; }
.banner-cta { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 10px 13px; border: 1px solid rgba(255,255,255,.2); border-radius: 9px; color: #fff; background: rgba(255,255,255,.1); font-size: 9px; font-weight: 700; white-space: nowrap; cursor: pointer; transition: background .18s; }
.banner-cta:hover { background: rgba(255,255,255,.2); }
.banner-cta svg { width: 14px; height: 14px; }
.banner-flower { position: absolute; right: 19%; bottom: -44px; width: 122px; height: 122px; border: 1px solid rgba(233, 218, 172, .22); border-radius: 50%; }
.banner-flower::before, .banner-flower::after { content: ""; position: absolute; inset: 18px; border: 1px solid rgba(233, 218, 172, .19); border-radius: 42% 58% 47% 53% / 57% 46% 54% 43%; transform: rotate(35deg); }
.banner-flower::after { transform: rotate(80deg); }
.member-quick-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 16px 0 23px; padding: 0; border: 1px solid #e9ede7; border-radius: 13px; background: #fff; box-shadow: 0 3px 12px rgba(21, 50, 39, .025); }
.quick-stat { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 14px 17px; }
.quick-stat + .quick-stat { border-left: 1px solid #edf0eb; }
.quick-stat-icon { width: 33px; height: 33px; display: grid; flex: 0 0 33px; place-items: center; border-radius: 10px; color: #4d7660; background: #eef4ed; }
.quick-stat-icon.rose { color: #ba6b6c; background: #fbf0ee; }
.quick-stat-icon.gold { color: #9b784b; background: #f8f2e9; }
.quick-stat-icon svg { width: 16px; height: 16px; }
.quick-stat strong { display: block; font-size: 15px; line-height: 1; }
.quick-stat small { display: block; margin-top: 4px; color: #8d9a90; font-size: 9px; white-space: nowrap; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.section-head h2, .section-title { margin: 0; font-family: var(--font-serif); font-size: 21px; font-weight: 600; letter-spacing: -.2px; }
.section-head p { margin: 4px 0 0; color: #89978f; font-size: 10px; }
.profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.profile-card { min-width: 0; overflow: hidden; border: 1px solid #e9ece7; border-radius: 15px; background: #fff; box-shadow: 0 5px 17px rgba(33, 30, 24, .035); transition: transform .2s, box-shadow .2s; }
.profile-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.profile-photo-wrap { position: relative; height: 221px; overflow: hidden; background: #e6e8df; cursor: pointer; }
.profile-photo { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 36%; transition: transform .55s cubic-bezier(.2,.75,.3,1); }
.profile-card:hover .profile-photo { transform: scale(1.035); }
.photo-overlay { position: absolute; inset: 35% 0 0; background: linear-gradient(180deg, transparent, rgba(13,31,25,.67)); pointer-events: none; }
.photo-watermark { position: absolute; z-index: 1; top: 48%; left: 50%; padding: 5px 8px; border: 1px solid rgba(255,255,255,.36); border-radius: 5px; color: rgba(255,255,255,.78); background: rgba(25,32,27,.22); font-size: 8px; letter-spacing: .04em; text-shadow: 0 1px 3px rgba(0,0,0,.6); transform: translate(-50%,-50%) rotate(-12deg); pointer-events: none; }
.compatibility-badge { position: absolute; top: 11px; left: 11px; display: inline-flex; align-items: center; gap: 5px; padding: 6px 8px; border: 1px solid rgba(255,255,255,.5); border-radius: 7px; color: #3f654e; background: rgba(249, 252, 244, .94); font-size: 9px; font-weight: 750; box-shadow: 0 2px 8px rgba(15, 37, 28, .09); }
.compatibility-badge svg { width: 12px; height: 12px; color: #b08b50; }
.profile-heart { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.64); border-radius: 50%; color: #fff; background: rgba(20,39,31,.18); backdrop-filter: blur(5px); cursor: pointer; transition: transform .18s, background .18s; }
.profile-heart svg { width: 16px; height: 16px; }
.profile-heart:hover, .profile-heart.is-liked { color: #c15e62; background: #fff; transform: scale(1.05); }
.profile-heart.is-liked svg { fill: #c15e62; }
.profile-photo-caption { position: absolute; right: 13px; bottom: 12px; left: 14px; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; color: #fff; }
.profile-photo-caption strong { display: block; font-family: var(--font-serif); font-size: 19px; font-weight: 500; line-height: 1.1; }
.profile-photo-caption span { display: block; margin-top: 3px; color: rgba(255,255,255,.81); font-size: 9px; }
.online-indicator { display: inline-flex !important; align-items: center; gap: 5px; margin: 0 0 2px !important; padding: 4px 6px; border: 1px solid rgba(255,255,255,.2); border-radius: 99px; color: #fff !important; background: rgba(14,39,28,.38); font-size: 8px !important; white-space: nowrap; }
.online-indicator::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #85d29d; box-shadow: 0 0 0 2px rgba(133,210,157,.2); }
.profile-card-body { padding: 12px 13px 13px; }
.profile-summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #748379; font-size: 9px; }
.profile-summary span { display: inline-flex; align-items: center; gap: 5px; }
.profile-summary svg { width: 12px; height: 12px; color: #98a59c; }
.verified-check { display: inline-flex !important; align-items: center; gap: 4px !important; color: #4d8863; font-weight: 700; }
.verified-check svg { width: 13px; height: 13px; color: #4d8863; }
.profile-tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0 12px; }
.profile-tag { padding: 5px 7px; border-radius: 6px; color: #63776a; background: #f1f5f0; font-size: 8px; font-weight: 600; }
.profile-actions { display: grid; grid-template-columns: minmax(0, 1fr) 37px 37px; gap: 6px; }
.profile-actions .primary-button { min-height: 35px; border-radius: 8px; font-size: 9.5px; }
.profile-actions .secondary-button, .profile-actions .icon-button { min-height: 35px; width: 37px; height: 35px; border-radius: 8px; }
.profile-actions .icon-button svg, .profile-actions .secondary-button svg { width: 15px; height: 15px; }
.empty-search { grid-column: 1/-1; padding: 45px 20px; border: 1px dashed #d9e1d8; border-radius: 14px; color: #87948a; background: #fbfcf9; text-align: center; }
.empty-search strong { display: block; margin: 0 0 4px; color: #456251; font-family: var(--font-serif); font-size: 18px; }

.member-rail { display: grid; gap: 14px; }
.rail-card { padding: 16px; border: 1px solid #e8ece6; border-radius: 14px; background: #fff; box-shadow: 0 4px 14px rgba(24,53,45,.025); }
.rail-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 13px; }
.rail-card-head h3 { margin: 0; font-family: var(--font-serif); font-size: 17px; font-weight: 600; }
.rail-card-head button { padding: 3px 0; border: 0; color: #688271; background: none; font-size: 9px; font-weight: 700; cursor: pointer; }
.journey-card { position: relative; overflow: hidden; }
.journey-card::after { content: ""; position: absolute; top: -42px; right: -48px; width: 110px; height: 110px; border: 1px solid #e8eee4; border-radius: 50%; box-shadow: 0 0 0 12px rgba(226,237,223,.28), 0 0 0 24px rgba(226,237,223,.18); }
.journey-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.journey-top h3 { margin: 0; font-family: var(--font-serif); font-size: 17px; }
.journey-percent { color: #527e5e; font-size: 17px; font-weight: 750; }
.progress-track { height: 6px; overflow: hidden; border-radius: 99px; background: #edf1eb; }
.progress-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, #528466, #8bac78); }
.journey-caption { display: flex; justify-content: space-between; margin-top: 6px; color: #94a096; font-size: 8px; }
.journey-next { display: flex; align-items: center; gap: 9px; margin-top: 15px; padding-top: 13px; border-top: 1px solid #edf0eb; }
.journey-next-icon { width: 30px; height: 30px; display: grid; flex: 0 0 30px; place-items: center; border-radius: 9px; color: #866c42; background: #f8f2e8; }
.journey-next-icon svg { width: 14px; height: 14px; }
.journey-next strong { display: block; font-size: 9px; }
.journey-next small { display: block; margin-top: 2px; color: #8b9990; font-size: 8px; }
.journey-next .arrow-mini { margin-left: auto; color: #9aa89e; }
.journey-next .arrow-mini svg { width: 14px; height: 14px; }
.reminder-card { color: #f7f7ed; border: 0; background: radial-gradient(ellipse at 94% 0%, rgba(186,161,105,.25), transparent 41%), #214738; }
.reminder-card .rail-card-head { margin-bottom: 9px; }
.reminder-card .rail-card-head h3 { color: #fff; }
.reminder-card p { margin: 0; color: #d2dfd2; font-size: 9px; line-height: 1.65; }
.reminder-card .reminder-mark { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 9px; color: #e5d5a9; }
.reminder-card .reminder-mark svg { width: 14px; height: 14px; }
.reminder-footer { display: flex; align-items: center; gap: 7px; margin-top: 12px; color: #e2d7b7; font-size: 8px; font-weight: 650; }
.reminder-footer svg { width: 12px; height: 12px; }
.rail-community-item { display: flex; align-items: flex-start; gap: 9px; padding: 9px 0; border-top: 1px solid #eff1ed; }
.rail-community-item:first-of-type { padding-top: 1px; border-top: 0; }
.rail-community-item img { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; object-fit: cover; }
.rail-community-item p { margin: 0; color: #6f8075; font-size: 9px; line-height: 1.5; }
.rail-community-item strong { color: #385d49; }
.rail-community-item small { display: block; margin-top: 3px; color: #a0aaa2; font-size: 8px; }
.rail-community-link { display: flex; align-items: center; justify-content: space-between; margin-top: 5px; padding-top: 10px; border-top: 1px solid #eff1ed; color: #5c7866; font-size: 9px; font-weight: 700; }
.rail-community-link svg { width: 13px; height: 13px; }

/* Shared application pages */
.panel { border: 1px solid #e8ece6; border-radius: 15px; background: #fff; box-shadow: 0 4px 16px rgba(24,53,45,.026); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 13px; border-bottom: 1px solid #eff1ec; }
.panel-head h2, .panel-head h3 { margin: 0; font-family: var(--font-serif); font-size: 18px; font-weight: 600; }
.panel-head p { margin: 4px 0 0; color: #89968d; font-size: 9px; }
.panel-body { padding: 16px 18px; }
.filter-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -2px 0 16px; }
.filter-tabs { display: flex; align-items: center; gap: 5px; padding: 4px; border: 1px solid #e7ece5; border-radius: 10px; background: #fff; }
.filter-tab { padding: 7px 10px; border: 0; border-radius: 7px; color: #86938a; background: transparent; font-size: 9px; font-weight: 650; cursor: pointer; }
.filter-tab.active { color: #345f49; background: #eaf1e9; }
.select-control { min-height: 34px; padding: 0 28px 0 10px; border: 1px solid #e4e9e2; border-radius: 8px; color: #64776b; background: #fff; font-size: 9px; }

/* Admin overview */
.admin-heading { align-items: center; margin-bottom: 21px; }
.admin-heading h1 { margin-top: 7px; }
.admin-heading .heading-actions { align-self: flex-end; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 15px; }
.metric-card { position: relative; min-width: 0; padding: 15px 15px 14px; overflow: hidden; border: 1px solid #e8ece6; border-radius: 13px; background: #fff; box-shadow: 0 4px 13px rgba(24,53,45,.023); }
.metric-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.metric-icon { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; color: #4f755e; background: #edf3ec; }
.metric-icon svg { width: 16px; height: 16px; }
.metric-icon.coral { color: #bc7771; background: #faf0ee; }
.metric-icon.sand { color: #987747; background: #f8f3e9; }
.metric-icon.blue { color: #66869a; background: #edf3f6; }
.metric-icon.violet { color: #8077a4; background: #f0eef7; }
.metric-trend { display: inline-flex; align-items: center; gap: 3px; padding: 4px 6px; border-radius: 6px; color: #4a8a62; background: #eef6ef; font-size: 8px; font-weight: 700; white-space: nowrap; }
.metric-trend.down { color: #af6e6b; background: #fbf0ef; }
.metric-trend svg { width: 11px; height: 11px; }
.metric-value { margin: 12px 0 4px; color: #203b31; font-size: clamp(19px, 1.8vw, 25px); font-weight: 720; line-height: 1; letter-spacing: -.8px; }
.metric-label { color: #849289; font-size: 9px; font-weight: 550; }
.metric-caption { margin-top: 9px; padding-top: 8px; border-top: 1px solid #f0f2ee; color: #a0aaa2; font-size: 8px; }
.metric-caption b { color: #577b63; font-weight: 700; }
.admin-submetrics { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); margin: 0 0 17px; padding: 11px 5px; border: 1px solid #e8ece6; border-radius: 12px; background: #fff; }
.admin-submetric { padding: 2px 15px; }
.admin-submetric + .admin-submetric { border-left: 1px solid #edf0eb; }
.admin-submetric span { display: block; color: #8d9990; font-size: 8px; }
.admin-submetric strong { display: block; margin-top: 4px; font-size: 13px; font-weight: 700; }
.admin-content-grid { display: grid; grid-template-columns: minmax(0, 1fr) 292px; align-items: start; gap: 15px; }
.queue-table-wrap { overflow: auto; }
.data-table { width: 100%; border-collapse: collapse; white-space: nowrap; }
.data-table th { padding: 10px 12px; color: #9aa59c; background: #fbfcf9; font-size: 8px; font-weight: 700; letter-spacing: .55px; text-align: left; text-transform: uppercase; }
.data-table td { padding: 11px 12px; border-top: 1px solid #f0f2ee; color: #53675c; font-size: 9px; }
.data-table tbody tr:hover { background: #fcfdfb; }
.user-cell { display: flex; align-items: center; gap: 8px; }
.user-cell img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.user-cell strong { display: block; color: #364f41; font-size: 9px; font-weight: 700; }
.user-cell small { display: block; margin-top: 2px; color: #a0aaa2; font-size: 8px; }
.status-pill { display: inline-flex; align-items: center; gap: 5px; width: max-content; padding: 4px 7px; border-radius: 99px; color: #836937; background: #f7f1e5; font-size: 8px; font-weight: 700; }
.status-pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.status-pill.approved, .status-pill.active { color: #4b7b57; background: #edf5ec; }
.status-pill.rejected, .status-pill.suspended { color: #a95859; background: #faeeee; }
.status-pill.review { color: #637f98; background: #eef3f7; }
.table-actions { display: flex; align-items: center; gap: 5px; }
.mini-action { width: 27px; height: 27px; display: inline-grid; place-items: center; border: 1px solid #e8ece6; border-radius: 7px; color: #698074; background: #fff; cursor: pointer; }
.mini-action:hover { border-color: #cbd9cc; color: #315d46; background: #f4f8f3; }
.mini-action svg { width: 13px; height: 13px; }
.mini-action.approve { color: #4d865b; }
.mini-action.reject { color: #b66a68; }
.panel-foot { display: flex; align-items: center; justify-content: space-between; padding: 11px 17px; border-top: 1px solid #eff1ec; color: #97a298; font-size: 8px; }
.feature-summary { padding: 15px; }
.feature-summary-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 11px; }
.feature-summary-head h3 { margin: 0; font-family: var(--font-serif); font-size: 17px; }
.feature-summary-head p { margin: 3px 0 0; color: #919c93; font-size: 8px; }
.feature-summary-head button { padding: 4px 0; border: 0; color: #63806d; background: none; font-size: 8px; font-weight: 700; cursor: pointer; }
.feature-line { display: flex; align-items: center; justify-content: space-between; gap: 7px; padding: 9px 0; border-top: 1px solid #eff1ec; }
.feature-line-label { display: flex; align-items: center; gap: 8px; min-width: 0; }
.feature-line-icon { width: 25px; height: 25px; display: grid; flex: 0 0 25px; place-items: center; border-radius: 7px; color: #617c68; background: #f0f5ef; }
.feature-line-icon svg { width: 13px; height: 13px; }
.feature-line-label span { overflow: hidden; color: #62736a; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.switch { position: relative; width: 30px; height: 17px; flex: 0 0 30px; padding: 0; border: 0; border-radius: 99px; background: #d6ded7; cursor: pointer; transition: background .18s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 11px; height: 11px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.13); transition: transform .18s; }
.switch.on { background: #518063; }
.switch.on::after { transform: translateX(13px); }
.switch[disabled] { opacity: .55; cursor: not-allowed; }

/* Admin module pages */
.stat-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; margin-bottom: 17px; }
.stat-card { padding: 14px 15px; border: 1px solid #e8ece6; border-radius: 12px; background: #fff; }
.stat-card span { color: #89978e; font-size: 9px; }
.stat-card strong { display: block; margin-top: 5px; color: #244536; font-size: 20px; letter-spacing: -.4px; }
.admin-content-layout { display: grid; grid-template-columns: minmax(0,1fr) 270px; gap: 15px; align-items: start; }
.table-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 15px; border-bottom: 1px solid #eff1ec; }
.table-toolbar p { margin: 0; color: #8c9990; font-size: 9px; }
.table-search { width: 190px; height: 31px; display: flex; align-items: center; gap: 7px; padding: 0 9px; border: 1px solid #e7ece5; border-radius: 8px; color: #97a39a; background: #fff; }
.table-search svg { width: 13px; height: 13px; }
.table-search input { width: 100%; border: 0; outline: none; color: var(--ink); background: transparent; font-size: 9px; }
.table-search input::placeholder { color: #aab4ac; }
.table-empty { padding: 30px 15px; color: #92a096; text-align: center; font-size: 10px; }
.content-note { padding: 17px; border: 1px solid #e8ece6; border-radius: 13px; background: #fff; }
.content-note h3 { margin: 0 0 7px; font-family: var(--font-serif); font-size: 17px; }
.content-note p { margin: 0; color: #89968e; font-size: 9px; line-height: 1.65; }
.note-line { display: flex; justify-content: space-between; gap: 8px; margin-top: 11px; padding-top: 10px; border-top: 1px solid #eff1ec; color: #728178; font-size: 9px; }
.note-line strong { color: #325a44; }
.simple-list { display: grid; }
.simple-list-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; border-top: 1px solid #eff1ec; }
.simple-list-item:first-child { border-top: 0; }
.simple-list-item strong { display: block; font-size: 10px; }
.simple-list-item small { display: block; margin-top: 3px; color: #909c93; font-size: 8px; }
.role-row { display: flex; align-items: center; gap: 10px; }
.role-icon { width: 33px; height: 33px; display: grid; flex: 0 0 33px; place-items: center; border-radius: 10px; color: #597965; background: #edf3ed; }
.role-icon svg { width: 16px; height: 16px; }
.role-count { color: #718579; font-size: 9px; }
.feature-admin-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.feature-admin-card { padding: 15px; border: 1px solid #e8ece6; border-radius: 13px; background: #fff; }
.feature-admin-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.feature-admin-card h3 { margin: 10px 0 5px; font-size: 11px; }
.feature-admin-card p { min-height: 29px; margin: 0; color: #87948b; font-size: 8px; line-height: 1.55; }
.feature-admin-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 13px; padding-top: 10px; border-top: 1px solid #eff1ec; color: #94a097; font-size: 8px; }
.setting-group { margin-bottom: 14px; padding: 17px 18px; border: 1px solid #e8ece6; border-radius: 13px; background: #fff; }
.setting-group h3 { margin: 0 0 4px; font-family: var(--font-serif); font-size: 17px; }
.setting-group > p { margin: 0 0 12px; color: #8c9990; font-size: 9px; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 11px 0; border-top: 1px solid #eff1ec; }
.setting-row:first-of-type { border-top: 0; }
.setting-row strong { display: block; font-size: 9px; }
.setting-row small { display: block; margin-top: 3px; color: #929e95; font-size: 8px; }
.setting-input { width: 118px; height: 32px; padding: 0 8px; border: 1px solid #e4e9e2; border-radius: 7px; color: #4d6658; background: #fff; font-size: 9px; }
.weight-control { display: flex; align-items: center; gap: 7px; color: #729078; }
.weight-control input { width: 85px; accent-color: #477759; }
.weight-control b { min-width: 30px; color: #506e59; font-size: 9px; }

/* Profile detail, likes and verification */
.member-profile-layout { display: grid; grid-template-columns: minmax(0,1fr) 295px; gap: 16px; align-items: start; }
.discovery-filter-modal { max-height: min(88vh, 900px); overflow-y: auto; }
.filter-choice-group { min-width: 0; }
.filter-choice-group legend { color: var(--ink, #18352e); font-weight: 700; text-transform: capitalize; margin-bottom: 7px; }
.filter-choice-search { width: 100%; margin-bottom: 8px; }
.profile-choice-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 6px 10px; max-height: 150px; overflow: auto; padding: 8px; border: 1px solid #e7ebe5; border-radius: 10px; background: #fbfcfa; }
.profile-choice-list label { display: flex; align-items: center; gap: 7px; color: #52615b; font-size: 13px; }
.profile-choice-list label[hidden] { display: none; }
.profile-edit-card { padding: 18px; }
.profile-edit-header { display: flex; align-items: center; gap: 15px; margin-bottom: 18px; }
.profile-edit-header img { width: 68px; height: 68px; border-radius: 50%; object-fit: cover; }
.profile-edit-header h2 { margin: 0 0 4px; font-family: var(--font-serif); font-size: 21px; }
.profile-edit-header p { margin: 0; color: #8a978e; font-size: 9px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 13px 12px; }
.form-field { min-width: 0; }
.form-field.full { grid-column: 1/-1; }
.form-field label { display: block; margin-bottom: 5px; color: #718177; font-size: 8px; font-weight: 700; }
.form-field input, .form-field select, .form-field textarea { width: 100%; min-height: 36px; padding: 8px 10px; border: 1px solid #e5eae3; border-radius: 8px; outline: none; color: #3c5a48; background: #fff; font-size: 9px; }
.form-field textarea { min-height: 76px; resize: vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: #acc2af; box-shadow: 0 0 0 3px rgba(66,115,79,.07); }
.form-hint { margin-top: 5px; color: #a1aaa3; font-size: 8px; }
.form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.registration-requirements { display: grid; gap: 5px; margin-bottom: 14px; padding: 12px 13px; border: 1px solid #eadbbd; border-radius: 10px; color: #67542f; background: #fbf7ee; font-size: 12px; }
.registration-requirements strong { color: #342b1c; font-size: 13px; }
.required-marker { color: #a34f3f; font-weight: 800; }
.verification-status-card { padding: 16px; }
.verification-status-top { display: flex; align-items: flex-start; gap: 11px; }
.verification-status-icon { width: 38px; height: 38px; display: grid; flex: 0 0 38px; place-items: center; border-radius: 12px; color: #4b805d; background: #edf5eb; }
.verification-status-icon svg { width: 20px; height: 20px; }
.verification-status-top h3 { margin: 1px 0 4px; font-family: var(--font-serif); font-size: 17px; }
.verification-status-top p { margin: 0; color: #87948a; font-size: 8px; line-height: 1.55; }
.verification-checklist { display: grid; gap: 9px; margin-top: 17px; padding-top: 14px; border-top: 1px solid #eff1ec; }
.verification-checklist span { display: flex; align-items: center; gap: 7px; color: #708177; font-size: 8px; }
.verification-checklist svg { width: 13px; height: 13px; color: #5b8c66; }
.verification-camera-preview { display: block; width: 100%; max-height: 420px; aspect-ratio: 16 / 9; border: 1px solid #e5eae3; border-radius: 12px; background: #171511; object-fit: contain; }
.verification-camera-preview[hidden] { display: none; }
.verification-camera-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-top: 10px; }
.verification-camera-actions .form-hint { flex: 1 1 180px; margin: 0; }
.photo-upload-box { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px dashed #d9e3d9; border-radius: 10px; color: #718277; background: #fbfcf9; cursor: pointer; }
.photo-upload-box svg { width: 20px; height: 20px; color: #719179; }
.photo-upload-box strong { display: block; font-size: 9px; }
.photo-upload-box small { display: block; margin-top: 3px; color: #99a49a; font-size: 8px; }
.member-approved-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)); gap: 9px; margin: 9px 0; }
.photo-guidance { margin: 8px 0 4px; }
.member-approved-photo { position: relative; min-width: 0; overflow: hidden; margin: 0; border: 1px solid #e7ebe5; border-radius: 10px; background: #f8faf6; }
.member-approved-photo img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.photo-add-card { display: flex; min-width: 0; min-height: 140px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 10px 7px; border: 1px dashed #cdd9ce; border-radius: 10px; color: #58745e; background: #fbfcf9; cursor: pointer; text-align: center; }
.photo-add-card:hover, .photo-add-card:focus-within { border-color: #719179; background: #f3f7f1; }
.photo-add-plus { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; color: #fff; background: #719179; font-size: 22px; line-height: 1; }
.photo-add-card strong { font-size: 9px; }
.photo-add-card small { color: #849289; font-size: 8px; line-height: 1.4; }
.photo-rejected-placeholder { display: grid; aspect-ratio: 1; place-items: center; color: #9a6f6a; font-size: 9px; }
.member-approved-photo figcaption { padding: 6px 7px; color: #748278; font-size: 8px; }
.member-approved-photo figcaption button { padding: 0; border: 0; color: #8a6a23; background: transparent; font: inherit; cursor: pointer; text-decoration: underline; }
.member-approved-photo.is-pending img { opacity: .72; }
.photo-remove-button { position: absolute; top: 5px; right: 5px; padding: 4px 6px; border: 0; border-radius: 6px; color: #fff; background: rgba(20,24,20,.72); font-size: 8px; cursor: pointer; }
.photo-count { float: right; color: #849289; font-weight: 400; }
.contact-status { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 7px; padding: 9px; border-radius: 9px; background: #fbf8ee; }
.contact-status .form-hint { margin: 0; }
.contact-status.is-verified { justify-content: flex-start; color: #58785e; background: #f0f6ef; }
.contact-status .secondary-button { min-height: 31px; padding: 0 9px; font-size: 8px; }
.profile-photo-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(95px, 1fr)); gap: 7px; margin-bottom: 14px; }
.profile-photo-gallery figure { position: relative; overflow: hidden; margin: 0; border-radius: 9px; background: #f0f2ed; }
.profile-photo-gallery img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.profile-photo-gallery figure span { position: absolute; right: 0; bottom: 0; left: 0; padding: 5px 4px; color: #fff; background: rgba(20,24,20,.58); font-size: 7px; text-align: center; }
.gallery-photo-open { position: relative; display: block; width: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.gallery-photo-open:focus-visible { outline: 3px solid var(--green, #26734d); outline-offset: 2px; }
.gallery-viewer-modal { width: min(94vw, 1100px); max-width: none; padding: 12px; background: #101410; }
.gallery-viewer { position: relative; display: grid; min-height: 55vh; place-items: center; }
.gallery-viewer > img { display: block; max-width: 100%; max-height: 82vh; object-fit: contain; }
.gallery-viewer-close { position: absolute; z-index: 1; top: 8px; right: 8px; width: 40px; height: 40px; border: 0; border-radius: 50%; color: #fff; background: rgba(0,0,0,.65); font-size: 28px; cursor: pointer; }

/* Messaging */
.messaging-layout { min-height: 555px; display: grid; grid-template-columns: 285px minmax(0,1fr); overflow: hidden; border: 1px solid #e7ebe5; border-radius: 15px; background: #fff; box-shadow: var(--shadow); }
.conversation-list { border-right: 1px solid #edf0eb; }
.message-bubble.system { max-width: max-content; margin: 9px auto; padding: 7px 12px; border: 1px solid #e8eee8; border-radius: 999px; color: #627566; background: #f7faf6; box-shadow: none; text-align: center; }
.message-bubble.system span { font-size: 9px; }
.message-bubble.system time { display: none; }
.chat-profile-link, .chat-profile-copy { padding: 0; border: 0; color: inherit; background: transparent; cursor: pointer; text-align: left; }
.chat-profile-link { display: flex; flex: 0 0 auto; }
.chat-profile-link:focus-visible, .chat-profile-copy:focus-visible { outline: 2px solid var(--green, #26734d); outline-offset: 3px; border-radius: 6px; }
.conversation-list-head { padding: 16px 15px 12px; border-bottom: 1px solid #eff1ec; }
.conversation-list-head h2 { margin: 0 0 10px; font-family: var(--font-serif); font-size: 18px; }
.conversation-search { display: flex; align-items: center; gap: 7px; height: 31px; padding: 0 8px; border: 1px solid #e7ece5; border-radius: 8px; color: #9ca89e; }
.conversation-search svg { width: 13px; height: 13px; }
.conversation-search input { width: 100%; border: 0; outline: none; font-size: 9px; }
.conversation-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 11px 13px; border: 0; border-bottom: 1px solid #f1f2ef; background: #fff; text-align: left; cursor: pointer; }
.conversation-item:hover, .conversation-item.active { background: #f6f9f5; }
.conversation-item img { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; object-fit: cover; }
.conversation-copy { min-width: 0; flex: 1; }
.conversation-copy div { display: flex; justify-content: space-between; gap: 5px; }
.conversation-copy strong { overflow: hidden; color: #3a5546; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.conversation-copy time { color: #a2aba3; font-size: 7px; white-space: nowrap; }
.conversation-copy p { margin: 4px 0 0; overflow: hidden; color: #8c9990; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.unread-count { width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #528064; font-size: 7px; font-weight: 700; }
.chat-window { min-width: 0; display: flex; flex-direction: column; }
.chat-head { display: flex; align-items: center; gap: 9px; padding: 12px 15px; border-bottom: 1px solid #eff1ec; }
.chat-head img { width: 35px; height: 35px; border-radius: 50%; object-fit: cover; }
.chat-head-copy { flex: 1; }
.chat-head-copy strong { display: block; font-size: 10px; }
.chat-head-copy small { display: flex; align-items: center; gap: 5px; margin-top: 3px; color: #8c998f; font-size: 8px; }
.chat-head-copy small::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #6fb27e; }
.chat-head-actions { display: flex; gap: 6px; }
.chat-head-actions .icon-button { width: 30px; height: 30px; flex-basis: 30px; border-radius: 8px; }
.chat-head-actions .icon-button svg { width: 14px; height: 14px; }
.chat-scroll { flex: 1; display: flex; flex-direction: column; gap: 11px; padding: 20px 18px; overflow: auto; background-color: #fbfcf9; background-image: radial-gradient(rgba(107, 134, 112, .09) .6px, transparent .6px); background-size: 17px 17px; }
.chat-date { align-self: center; padding: 5px 8px; border-radius: 99px; color: #8b988f; background: #fff; box-shadow: 0 1px 5px rgba(0,0,0,.04); font-size: 7px; }
.message-bubble { max-width: min(73%, 340px); padding: 9px 11px; border: 1px solid #e9ece7; border-radius: 12px 12px 12px 3px; color: #52645a; background: #fff; font-size: 9px; line-height: 1.55; box-shadow: 0 2px 7px rgba(18,47,33,.025); }
.message-bubble.sent { align-self: flex-end; border-color: #d9e8d9; border-radius: 12px 12px 3px 12px; color: #385d44; background: #eaf3e9; }
.message-bubble time { display: block; margin-top: 3px; color: #9aa69d; font-size: 7px; text-align: right; }
.chat-composer { position: relative; display: flex; align-items: center; gap: 8px; padding: 11px 13px; border-top: 1px solid #eff1ec; }
.chat-composer input { min-width: 0; flex: 1; height: 36px; padding: 0 11px; border: 1px solid #e5eae3; border-radius: 9px; outline: none; font-size: 9px; }
.chat-composer input:focus { border-color: #a9c1ac; }
.chat-composer .icon-button { width: 33px; height: 33px; flex-basis: 33px; }
.chat-composer .emoji-toggle { color: #57665b; font-size: 19px; line-height: 1; }
.chat-attachment-name { max-width: 95px; overflow: hidden; color: #738076; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.emoji-picker { position: absolute; z-index: 5; bottom: calc(100% + 7px); left: 48px; display: grid; grid-template-columns: repeat(6, 38px); gap: 3px; padding: 7px; border: 1px solid #e3e9e1; border-radius: 12px; background: #fff; box-shadow: 0 8px 24px rgba(18,47,33,.12); }
.emoji-picker[hidden] { display: none; }
.emoji-picker button { width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; font-size: 20px; cursor: pointer; }
.emoji-picker button:hover { background: #f2f6ef; }
.chat-composer .send-message { width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 9px; color: #fff; background: var(--forest); cursor: pointer; }
.chat-composer .send-message svg { width: 15px; height: 15px; }
.message-attachment-image { display: block; max-width: min(100%, 260px); max-height: 260px; border-radius: 8px; object-fit: contain; }
.call-dialog { width: min(100%, 560px); }
.call-dialog [hidden] { display: none; }
.call-dialog > h2, .call-dialog > p { text-align: center; }
.call-privacy-note { display: block; margin: 0 auto 14px; color: #7c887f; font-size: 10px; line-height: 1.5; text-align: center; }
.call-video-stage { position: relative; min-height: 220px; overflow: hidden; border-radius: 14px; background: #141816; }
.call-video-stage[hidden] { display: none; }
.call-video-stage video { width: 100%; max-height: 360px; object-fit: contain; }
.call-video-stage #localCallVideo { position: absolute; right: 12px; bottom: 12px; width: min(28%, 120px); border: 2px solid #fff; border-radius: 9px; background: #303630; }
.call-status { color: #738076; font-size: 12px; }
.call-actions { display: flex; justify-content: center; gap: 10px; margin-top: 18px; }
.message-privacy { margin: 0; padding: 0 14px 9px; color: #a1aaa3; font-size: 7px; text-align: center; }

/* Community */
.community-layout { display: grid; grid-template-columns: minmax(0,1fr) 278px; gap: 16px; align-items: start; }
.community-main { display: grid; gap: 12px; }
.post-composer { padding: 15px; }
.composer-top { display: flex; align-items: center; gap: 9px; }
.composer-top img { width: 35px; height: 35px; border-radius: 50%; object-fit: cover; }
.composer-input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid #e8ece6; border-radius: 99px; color: #89958c; background: #fafbf8; text-align: left; font-size: 9px; cursor: pointer; }
.composer-tools { display: flex; justify-content: space-between; gap: 8px; margin-top: 12px; padding-top: 11px; border-top: 1px solid #eff1ec; }
.composer-tools button { display: flex; align-items: center; gap: 6px; padding: 5px 7px; border: 0; border-radius: 7px; color: #77877d; background: transparent; font-size: 8px; cursor: pointer; }
.composer-tools button:hover { color: #42644f; background: #f3f7f2; }
.composer-tools svg { width: 14px; height: 14px; }
.community-filter { display: flex; align-items: center; justify-content: space-between; padding: 0 1px 1px; }
.community-filter h2 { margin: 0; font-family: var(--font-serif); font-size: 20px; }
.post-card { padding: 15px; }
.post-head { display: flex; align-items: center; gap: 9px; }
.post-head img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.post-author { flex: 1; }
.post-author strong { display: inline-flex; align-items: center; gap: 4px; color: #3c5847; font-size: 9px; }
.post-author strong svg { width: 12px; height: 12px; color: #55906a; }
.post-author small { display: block; margin-top: 3px; color: #9aa59d; font-size: 8px; }
.post-more { display: grid; width: 28px; height: 28px; place-items: center; border: 0; border-radius: 8px; color: #93a097; background: transparent; cursor: pointer; }
.post-more:hover { background: #f3f6f2; }
.post-text { margin: 13px 0 11px; color: #617267; font-size: 10px; line-height: 1.7; }
.post-text .hashtag { color: #638771; font-weight: 650; }
.post-image { width: 100%; max-height: 285px; display: block; margin: 10px 0; border-radius: 11px; object-fit: cover; }
.community-comments-list { max-height: 340px; overflow-y: auto; margin: 16px 0; border-top: 1px solid #e8ece6; }
.community-comment { padding: 13px 2px; border-bottom: 1px solid #edf0eb; }
.community-comment.is-reply { margin-left: 20px; padding-left: 12px; border-left: 2px solid #ead9ab; }
.community-comment > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.community-comment > div:first-child strong { color: #23372c; font-size: 13px; }
.community-comment time { color: #89918a; font-size: 11px; }
.community-comment p { margin: 7px 0; color: #4e5951; font-size: 13px; line-height: 1.55; white-space: pre-wrap; }
.community-comment-actions { display: flex; gap: 13px; }
.community-comment-actions .text-button { padding: 3px 0; font-size: 11px; }
.community-audience-list { display: grid; gap: 7px; max-height: 160px; overflow: auto; padding: 10px; border: 1px solid #e6e9e2; border-radius: 9px; }
.community-audience-choice { display: flex; align-items: center; gap: 9px; color: #354239; font-size: 13px; }
.community-audience-choice input { accent-color: #a47a26; }
.post-stats { display: flex; justify-content: space-between; padding: 8px 0 9px; border-bottom: 1px solid #eff1ec; color: #98a39a; font-size: 8px; }
.post-actions { display: flex; gap: 8px; padding-top: 7px; }
.post-action { display: flex; align-items: center; gap: 6px; flex: 1; justify-content: center; padding: 7px 5px; border: 0; border-radius: 7px; color: #77867c; background: transparent; font-size: 8px; cursor: pointer; }
.post-action:hover { color: #497056; background: #f3f7f2; }
.post-action svg { width: 14px; height: 14px; }
.post-action.liked { color: #bb6868; }
.post-action.liked svg { fill: #bb6868; }
.community-rail { display: grid; gap: 12px; }
.community-guidelines { padding: 15px; }
.community-guidelines h3 { margin: 0 0 7px; font-family: var(--font-serif); font-size: 17px; }
.community-guidelines p { margin: 0; color: #87948b; font-size: 8px; line-height: 1.65; }
.guideline-list { display: grid; gap: 8px; margin-top: 12px; }
.guideline-list span { display: flex; align-items: center; gap: 7px; color: #687a6f; font-size: 8px; }
.guideline-list svg { width: 13px; height: 13px; color: #65856d; }

/* Modal, menus, and feedback */
.toast-region { position: fixed; z-index: 100; right: 22px; bottom: 21px; display: grid; gap: 8px; width: min(340px, calc(100vw - 32px)); }
.toast { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid #dce7dc; border-radius: 12px; color: #eaf2e9; background: #214a3b; box-shadow: 0 12px 30px rgba(16,44,34,.2); animation: toast-in .22s ease-out; }
.toast-icon { width: 20px; height: 20px; display: grid; flex: 0 0 20px; place-items: center; border-radius: 50%; color: #214a3b; background: #d7e9d7; }
.toast-icon svg { width: 12px; height: 12px; }
.toast strong { display: block; font-size: 10px; }
.toast p { margin: 3px 0 0; color: #c1d4c6; font-size: 8px; line-height: 1.5; }
@keyframes toast-in { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
.modal-backdrop { position: fixed; z-index: 70; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(13, 31, 25, .48); backdrop-filter: blur(4px); animation: fade-in .16s ease; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.modal-card { position: relative; width: min(510px, 100%); max-height: min(90vh, 790px); overflow-y: auto; border: 1px solid rgba(255,255,255,.55); border-radius: 18px; background: #fff; box-shadow: 0 24px 80px rgba(9,33,24,.26); animation: modal-in .2s ease-out; }
.modal-card.account-security-dialog { width: min(760px, 100%); }
.account-security-modal > p { font-size: 12px; }
.account-security-forms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.account-security-form { min-width: 0; padding: 16px; border: 1px solid #e8ece5; border-radius: 13px; background: #fbfcfa; }
.account-security-form h3 { margin: 0 0 13px; color: var(--ink); font-family: var(--font-serif); font-size: 18px; }
.account-security-form .form-field + .form-field { margin-top: 11px; }
.account-security-form .form-field label { font-size: 10px; }
.account-security-form .form-field input { min-height: 42px; font-size: 13px; }
.account-security-form .form-hint { font-size: 10px; line-height: 1.5; }
.account-security-form .form-actions { margin-top: 12px; }
.modal-card.admin-user-modal { width: min(900px, 100%); }
.admin-user-detail .simple-list { margin-bottom: 15px; }
.admin-user-detail h3 { margin: 14px 0 9px; color: var(--ink); font-family: var(--font-serif); font-size: 18px; }
.admin-user-detail .form-field label { font-size: 11px; }
.admin-user-detail .form-field input, .admin-user-detail .form-field textarea { min-height: 40px; color: var(--ink); font-size: 13px; }
.admin-user-detail .form-field textarea { min-height: 75px; }
.admin-user-detail .simple-list-item small { font-size: 11px; }
.admin-user-detail .modal-actions { flex-wrap: wrap; }
@keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
.modal-close { position: absolute; z-index: 2; top: 12px; right: 12px; width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid rgba(230,235,229,.8); border-radius: 9px; color: #6b7d71; background: rgba(255,255,255,.9); cursor: pointer; }
.modal-close svg { width: 15px; height: 15px; }
.modal-content { padding: 22px; }
.modal-content h2 { margin: 0 0 7px; font-family: var(--font-serif); font-size: 24px; font-weight: 600; }
.modal-content > p { margin: 0 0 16px; color: #849289; font-size: 10px; line-height: 1.6; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 17px; }
.modal-profile-hero { position: relative; height: 230px; overflow: hidden; background: #eff1e9; }
.modal-profile-hero img { width: 100%; height: 100%; object-fit: cover; object-position: center 34%; }
.modal-profile-hero::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(180deg, transparent, rgba(9,25,19,.68)); }
.modal-profile-title { position: absolute; z-index: 1; right: 18px; bottom: 16px; left: 18px; color: #fff; }
.modal-profile-title h2 { margin: 0; font-family: var(--font-serif); font-size: 25px; font-weight: 500; }
.modal-profile-title p { margin: 4px 0 0; color: rgba(255,255,255,.82); font-size: 9px; }
.modal-profile-body { padding: 17px 19px 20px; }
.modal-profile-body > p { color: #65766c; font-size: 10px; line-height: 1.7; }
.detail-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 11px 0 16px; }
.detail-chips span { padding: 6px 8px; border-radius: 7px; color: #60756a; background: #f1f5ef; font-size: 8px; }
.review-video-placeholder { display: grid; min-height: 160px; place-items: center; padding: 20px; border: 1px dashed #d7e1d8; border-radius: 12px; color: #73847a; background: #f8faf6; text-align: center; }
.review-video-placeholder svg { width: 28px; height: 28px; margin-bottom: 8px; color: #60826a; }
.review-video-placeholder strong { display: block; color: #486151; font-size: 10px; }
.review-video-placeholder small { display: block; margin-top: 4px; color: #95a197; font-size: 8px; }
.post-modal textarea { min-height: 112px; }
.notification-popover { position: fixed; z-index: 45; top: 65px; right: 119px; width: 300px; padding: 14px; border: 1px solid #e5ebe4; border-radius: 13px; background: #fff; box-shadow: 0 12px 40px rgba(25,55,43,.12); }
.notification-popover h3 { margin: 0 0 11px; font-family: var(--font-serif); font-size: 17px; }
.notification-item { display: flex; width: 100%; gap: 8px; padding: 9px 0; border: 0; border-top: 1px solid #eff1ec; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.notification-item:hover { background: #f8faf7; }
.notification-item.unread i { background: #cb7471; }
.notification-item i { width: 7px; height: 7px; flex: 0 0 7px; margin-top: 4px; border-radius: 50%; background: #71a276; }
.notification-item p { margin: 0; color: #748279; font-size: 8px; line-height: 1.55; }
.notification-item strong { color: #425d4b; }
.notification-item small { display: block; margin-top: 3px; color: #a1aaa3; font-size: 7px; }

/* Responsive layouts */
@media (max-width: 1250px) {
  .main-view { padding-right: 26px; padding-left: 26px; }
  .topbar { padding-right: 26px; padding-left: 26px; }
  .member-layout { grid-template-columns: minmax(0,1fr) 260px; gap: 16px; }
  .admin-content-grid { grid-template-columns: minmax(0,1fr) 260px; }
  .welcome-banner { padding-right: 22px; padding-left: 23px; }
  .profile-photo-wrap { height: 202px; }
  .profile-grid { gap: 12px; }
  .metric-card { padding: 13px; }
}
@media (max-width: 1080px) {
  .member-layout, .admin-content-grid, .community-layout { grid-template-columns: minmax(0,1fr); }
  .member-rail { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .member-rail .rail-card:last-child { grid-column: 1/-1; }
  .admin-content-grid .feature-summary { min-height: 0; }
  .admin-content-grid .feature-line:nth-of-type(n+5) { display: none; }
  .admin-content-layout { grid-template-columns: minmax(0,1fr) 235px; }
  .community-rail { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 860px) {
  .sidebar { transform: translateX(-101%); transition: transform .23s ease; box-shadow: 9px 0 26px rgba(16,42,31,.11); }
  body.sidebar-open .sidebar { transform: translateX(0); }
  body.sidebar-open::after { content: ""; position: fixed; z-index: 25; inset: 0; background: rgba(19,37,28,.29); }
  .main-shell { margin-left: 0; }
  .mobile-menu-button { display: inline-grid; }
  .topbar-leading { min-width: 0; }
  .topbar { height: 68px; padding-right: 22px; padding-left: 22px; }
  .main-view { min-height: calc(100vh - 118px); padding: 28px 22px 22px; }
  .admin-content-layout { grid-template-columns: minmax(0,1fr); }
  .feature-admin-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .app-footer { padding-right: 23px; padding-left: 23px; }
}
@media (max-width: 650px) {
  .topbar { gap: 10px; height: 63px; padding: 0 13px; }
  .topbar-actions { gap: 9px; }
  .breadcrumbs { gap: 6px; font-size: 9px; }
  .global-search { width: 35px; padding: 0 9px; justify-content: center; border: 0; background: transparent; }
  .global-search input, .search-shortcut { display: none; }
  .global-search svg { width: 18px; height: 18px; }
  .topbar-divider, .topbar-profile-copy, .topbar-profile .chevron { display: none; }
  .avatar-top { width: 32px; height: 32px; }
  .topbar-profile { margin-left: -2px; }
  .notification-button { width: 33px; height: 33px; flex-basis: 33px; }
  .main-view { min-height: calc(100vh - 112px); padding: 23px 14px 18px; }
  .app-footer { padding: 13px 15px 18px; font-size: 14px; flex-wrap: wrap; }
  .app-footer span:first-child { max-width: none; }
  .page-heading { align-items: flex-start; flex-direction: column; margin-bottom: 19px; }
  .page-heading h1, .member-heading h1 { font-size: 28px; }
  .heading-actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .member-heading { gap: 13px; }
  .member-head-right { width: 100%; }
  .welcome-banner { min-height: 189px; align-items: flex-start; flex-direction: column; justify-content: center; padding: 21px; }
  .banner-copy h2 { max-width: 260px; font-size: 22px; }
  .banner-copy p { max-width: 250px; line-height: 1.55; }
  .banner-cta { margin-top: 1px; }
  .banner-flower { right: -20px; bottom: -59px; }
  .welcome-banner::after { right: 24px; }
  .member-quick-stats { margin: 11px 0 20px; }
  .quick-stat { flex-direction: column; align-items: flex-start; gap: 7px; padding: 10px 9px; }
  .quick-stat-icon { width: 29px; height: 29px; flex-basis: 29px; }
  .quick-stat strong { font-size: 13px; }
  .quick-stat small { font-size: 7px; }
  .section-head { align-items: flex-start; }
  .section-head h2 { font-size: 19px; }
  .section-head p { max-width: 235px; line-height: 1.5; }
  .profile-grid { grid-template-columns: minmax(0,1fr); gap: 12px; }
  .profile-photo-wrap { height: 258px; }
  .member-rail { grid-template-columns: minmax(0,1fr); }
  .member-rail .rail-card:last-child { grid-column: auto; }
  .metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .metric-card { padding: 11px; }
  .metric-value { font-size: 20px; }
  .metric-caption { font-size: 7px; }
  .admin-submetrics { grid-template-columns: repeat(2,minmax(0,1fr)); row-gap: 11px; }
  .admin-submetric:nth-child(3) { border-left: 0; }
  .admin-heading .heading-actions { width: auto; }
  .stat-strip { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .feature-admin-grid { grid-template-columns: minmax(0,1fr); }
  .member-profile-layout { grid-template-columns: minmax(0,1fr); }
  .form-grid { grid-template-columns: minmax(0,1fr); }
  .form-field.full { grid-column: auto; }
  .messaging-layout { min-height: 560px; grid-template-columns: 80px minmax(0,1fr); }
  .conversation-list-head { padding: 13px 10px; }
  .conversation-list-head h2 { font-size: 13px; }
  .conversation-search { height: 29px; justify-content: center; padding: 0; }
  .conversation-search input { display: none; }
  .conversation-item { justify-content: center; padding: 10px 5px; }
  .conversation-item img { width: 39px; height: 39px; }
  .conversation-copy, .unread-count { display: none; }
  .chat-head { padding: 11px 9px; }
  .chat-head-actions { gap: 4px; }
  .chat-head-actions .icon-button { width: 27px; height: 27px; flex-basis: 27px; }
  .chat-scroll { padding: 15px 10px; }
  .message-bubble { max-width: 89%; }
  .chat-composer { gap: 5px; padding: 9px 7px; }
  .chat-composer .icon-button { display: grid; }
  .chat-composer input { padding: 0 8px; font-size: 8px; }
  .chat-attachment-name { display: none; }
  .chat-composer .send-message { flex: 0 0 31px; width: 31px; height: 31px; }
  .community-rail { grid-template-columns: minmax(0,1fr); }
  .composer-tools { flex-wrap: wrap; }
  .composer-tools button { font-size: 7px; }
  .filter-row { align-items: flex-start; flex-direction: column; }
  .filter-tabs { max-width: 100%; overflow-x: auto; }
  .table-toolbar { align-items: flex-start; flex-direction: column; }
  .table-search { width: 100%; }
  .data-table td, .data-table th { padding-right: 9px; padding-left: 9px; }
  .notification-popover { top: 58px; right: 12px; width: min(300px, calc(100vw - 24px)); }
  .date-chip, .soft-chip { min-height: 32px; padding: 7px 9px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

:root {
  --ink: #171614;
  --ink-soft: #4b4841;
  --muted: #817d73;
  --forest: #171614;
  --forest-deep: #090908;
  --forest-soft: #f6efd9;
  --sage: #eee5cb;
  --paper: #faf9f6;
  --white: #ffffff;
  --line: #ebe8df;
  --line-strong: #ddd7c8;
  --gold: #c79a35;
  --shadow: 0 10px 32px rgba(32, 28, 19, .055);
  --shadow-hover: 0 17px 42px rgba(32, 28, 19, .105);
}

button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline-color: rgba(199, 154, 53, .45); }
.nav-link.active { color: #171614; background: #f6efd9; }
.nav-link.active svg, .nav-link:hover svg { color: #a97916; }
.link-button, .text-button, .rail-card-head button, .rail-community-link { color: #8a6619; }
.link-button:hover, .text-button:hover { color: #171614; }
.verified-check, .verified-check svg, .journey-percent, .rail-community-item strong { color: #8a6619; }
.profile-tag { color: #62532e; background: #f8f3e5; }
.filter-tab.active { color: #171614; background: #f6efd9; }
.metric-icon, .feature-line-icon, .quick-stat-icon { color: #8a6619; background: #f8f3e5; }
.reminder-card { color: #f7f4e9; background: radial-gradient(ellipse at 94% 0%, rgba(199,154,53,.3), transparent 41%), #171614; }
.reminder-card .reminder-footer, .reminder-card .reminder-mark { color: #e7c875; }
.reminder-card p { color: #d0cdc4; }
.icon-button:hover { background: #f8f3e5; }
.admin-mode-pill { color: #806016; border-color: #eadcae; background: #fbf6e8; }
.admin-mode-pill::before, .eyebrow-dot, .activity-live-dot, .activity-marker { background: #c79a35; }
.primary-button, .workspace-launch, .chat-composer .send-message { color: #fff; background: #171614; }
.primary-button:hover, .workspace-launch:hover { background: #302b21; }
.welcome-banner { background-color: #171614; }
.progress-fill { background: linear-gradient(90deg, #a97916, #dfbd68); }
.app-loader { position: fixed; z-index: 200; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px; color: #625b4b; background: #faf9f6; font-size: 11px; font-weight: 650; letter-spacing: .3px; transition: opacity .2s ease, visibility .2s ease; }
.app-loader img { width: min(240px, 58vw); height: auto; border-radius: 16px; box-shadow: 0 14px 42px rgba(68,52,21,.15); animation: loader-pulse 1.2s ease-in-out infinite; }
.app-loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
@keyframes loader-pulse { 50% { transform: scale(.92); opacity: .72; } }
.brand-mark { width: 50px; height: 46px; flex-basis: 50px; border-radius: 0; color: inherit; background: transparent; box-shadow: none; }
.brand-mark img { width: 50px; height: 44px; object-fit: contain; border-radius: 0; }
.app-loader img { width: min(360px, 76vw); border-radius: 12px; }
.flyer-search-panel { padding: 22px; }
.flyer-search-form { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 12px; }
.flyer-search-form .table-search { max-width: none; }
.flyer-search-results { display: grid; gap: 8px; margin-top: 15px; }
.flyer-search-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; border: 1px solid #e6e9e1; border-radius: 12px; padding: 13px 15px; background: #fff; }
.flyer-search-row > div { display: grid; gap: 4px; }
.flyer-search-row span, .flyer-search-row small { color: #65716a; font-size: 12px; }
.flyer-row-actions { display: flex !important; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 10px !important; }
.flyer-modal-share-status { display: flex; align-items: center; justify-content: space-between; gap: 10px; max-width: 560px; margin: 12px auto; }
.flyer-modal-share-status .secondary-button:disabled { opacity: .65; cursor: default; }
.profile-flyer-preview-modal { max-width: 720px; }
.profile-flyer-artwork { width: min(100%, 560px); margin: 18px auto; padding: 24px 30px 20px; border: 1px solid #e7d8b7; border-radius: 20px; color: #203a31; background: linear-gradient(145deg,#fffaf0,#e8d5a6); box-shadow: 0 12px 35px rgba(61,46,20,.12); overflow: hidden; }
.profile-flyer-artwork header, .profile-flyer-artwork footer { display: grid; justify-items: center; text-align: center; }
.profile-flyer-logo { width: min(230px,70%); height: auto; mix-blend-mode: multiply; }
.profile-flyer-kicker, .profile-flyer-label { color: #a87827; font-size: 10px; font-weight: 800; letter-spacing: .19em; text-transform: uppercase; }
.profile-flyer-main { display: grid; justify-items: center; gap: 16px; padding: 8px 0 20px; text-align: center; }
.profile-flyer-photo { width: 156px; height: 156px; border: 7px solid rgba(255,255,255,.9); border-radius: 50%; object-fit: cover; box-shadow: 0 8px 22px rgba(43,55,41,.18); }
.profile-flyer-copy h2 { margin: 5px 0; color: #203a31; font-family: var(--font-serif); font-size: clamp(23px,4vw,34px); }
.profile-flyer-copy p { margin: 7px auto; color: #54635a; font-size: 13px; line-height: 1.5; }
.profile-flyer-location { font-weight: 650; }
.profile-flyer-facts, .profile-flyer-interests { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.profile-flyer-facts span, .profile-flyer-interests span { padding: 6px 9px; border: 1px solid rgba(140,108,48,.22); border-radius: 999px; color: #526057; background: rgba(255,255,255,.65); font-size: 11px; }
.profile-flyer-about { max-width: 430px; }
.profile-flyer-intention { color: #263d31 !important; }
.profile-flyer-artwork footer { gap: 4px; border-top: 1px solid rgba(140,108,48,.38); padding-top: 12px; }
.profile-flyer-artwork footer strong { font-family: var(--font-serif); font-size: 17px; }
.profile-flyer-artwork footer span { color: #a87827; font-size: 12px; font-style: italic; }
.profile-flyer-artwork footer small { color: #7a8277; font-size: 9px; }
@media (max-width: 560px) { .flyer-search-form { grid-template-columns: 1fr; } .flyer-search-row { align-items: flex-start; flex-direction: column; } .flyer-row-actions { justify-content: flex-start; } .flyer-modal-share-status { align-items: flex-start; flex-direction: column; } .profile-flyer-artwork { padding: 18px 14px; } }
@media print {
  @page { size: A4 portrait; margin: 10mm; }
  body * { visibility: hidden !important; }
  #modalRoot, #modalRoot * { visibility: visible !important; }
  #modalRoot .modal-backdrop { position: static !important; display: block !important; padding: 0 !important; background: #fff !important; }
  #modalRoot .modal-card { width: 100% !important; max-width: none !important; max-height: none !important; overflow: visible !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; }
  #modalRoot .modal-close, #modalRoot .profile-flyer-modal > .eyebrow, #modalRoot .profile-flyer-modal > h2, #modalRoot .profile-flyer-modal > p, #modalRoot .profile-flyer-modal > .modal-actions { display: none !important; }
  #modalRoot .profile-flyer-artwork { width: 180mm !important; min-height: 250mm !important; margin: 0 auto !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

.public-auth .sidebar, .public-auth .topbar { display: none; }
.public-auth .main-shell { margin-left: 0; }
.public-auth .main-view { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 46px 32px; }
.public-auth #activityDock { display: none; }
.auth-landing { width: min(100%, 1040px); margin: auto; }
.public-home { width: min(100%, 760px); margin: auto; padding: clamp(28px, 7vw, 72px); border: 1px solid rgba(176,143,74,.18); border-radius: 24px; background: linear-gradient(145deg, #fffdf7, #f2e5c5); box-shadow: 0 22px 70px rgba(68,52,21,.12); text-align: center; }
.public-home-brand { display: block; width: min(100%, 330px); height: auto; margin: 0 auto 18px; border-radius: 15px; }
.public-home-kicker { justify-content: center; }
.public-home h1 { margin: 12px 0 8px; font-family: var(--font-serif); font-size: clamp(34px, 6vw, 54px); letter-spacing: -1.5px; }
.public-home h1 em { color: #a97916; font-weight: 500; }
.public-home-copy { max-width: 500px; margin: 0 auto; color: #706858; font-size: 14px; }
.public-home-actions { display: flex; justify-content: center; gap: 11px; margin-top: 25px; }
.public-home-trust { margin: 24px 0 0; color: #8d8067; font-size: 10px; }
.public-home { width: min(100%, 1120px); padding: clamp(22px,4vw,46px); overflow: hidden; text-align: left; }
.public-home-header { display:flex; justify-content:center; }
.public-home-brand { width:min(100%,270px); margin-bottom:12px; transform-style:preserve-3d; mix-blend-mode:multiply; filter:drop-shadow(0 10px 12px rgba(70,48,13,.12)); animation:home-brand-float 6s ease-in-out infinite; }
.home-carousel { position:relative; min-height:350px; padding:26px clamp(8px,3vw,28px) 14px; border-radius:20px; background:linear-gradient(115deg,rgba(255,255,255,.84),rgba(243,231,201,.62)); overflow:hidden; }
.home-slide { min-height:300px; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(250px,.95fr); gap:18px; align-items:center; animation:home-slide-enter .5s cubic-bezier(.2,.7,.2,1) both; }
.home-slide-copy { padding:10px 0; }
.home-slide-copy .eyebrow { margin:0; }
.home-slide-copy h1 { max-width:590px; margin:16px 0 10px; font-size:clamp(34px,5vw,62px); line-height:1.05; }
.home-slide-copy h1 em,.home-section-heading h2 em { color:#a97916; font-weight:500; }
.home-slide-copy .public-home-copy { max-width:480px; margin:0; line-height:1.8; }
.home-slide-copy .public-home-actions { justify-content:flex-start; flex-wrap:wrap; }
.home-slide-visual { min-height:280px; display:grid; place-items:center; position:relative; perspective:900px; }
.home-slide-image { width:min(100%,390px); height:280px; object-fit:cover; border-radius:30px; box-shadow:18px 20px 0 rgba(193,154,75,.19),0 25px 55px rgba(67,50,23,.17); transform:rotateY(-7deg) rotateX(2deg); animation:art-float 5s ease-in-out infinite; }
.home-slide.home-slide--banner { min-height:0; display:grid; grid-template-columns:minmax(0,1fr); gap:0; }
.home-slide-image--banner { display:block; width:100%; height:min(62vh,620px); min-height:220px; object-fit:contain; object-position:center; border-radius:16px; background:linear-gradient(135deg,#e8e1d1,#f9f6ef); box-shadow:0 15px 38px rgba(67,50,23,.13); transform:none; animation:home-slide-enter .6s ease both; }
.home-slide-banner-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; padding:15px 0 3px; }
.home-3d-art { position:relative; width:min(100%,360px); height:260px; display:grid; place-items:center; transform-style:preserve-3d; animation:art-float 5s ease-in-out infinite; }
.home-motion-logo { position:relative; z-index:2; width:min(78%,280px); height:230px; object-fit:contain; mix-blend-mode:multiply; filter:drop-shadow(0 15px 15px rgba(70,48,13,.22)); transform:translateZ(62px); animation:logo-tilt 6s ease-in-out infinite; }
.art-glow { position:absolute; width:190px; height:190px; border-radius:50%; background:radial-gradient(circle at 36% 30%,#fff9dc,#e9c66e 48%,#b27a22 78%); box-shadow:inset -14px -16px 25px #754c1f5c, inset 9px 9px 18px #fff8d9,0 24px 40px #8b662d45; transform:translateZ(38px) rotateY(-18deg); }
.art-heart { position:relative; z-index:2; color:#754e15; font-family:Georgia,serif; font-size:118px; line-height:1; text-shadow:2px 4px 0 #f9e6a5,8px 12px 20px #6747166e; transform:translateZ(70px) rotateY(-12deg); }
.art-orbit { position:absolute; z-index:1; width:275px; height:112px; border:2px solid #bd933d99; border-radius:50%; transform:rotate(-27deg) rotateX(58deg) translateZ(25px); }
.orbit-two { width:235px;height:155px; transform:rotate(42deg) rotateX(67deg) translateZ(54px); border-color:#7a612e88; }
.art-spark { position:absolute; z-index:3; color:#9c752b; font-size:32px; text-shadow:0 3px 9px #72551d66; }
.spark-one { top:28px;right:48px; }.spark-two { bottom:34px;left:43px;font-size:25px; }
.art-caption { position:absolute; bottom:1px; color:#897650; font-size:9px; letter-spacing:.08em; text-transform:uppercase; }
.home-slide-controls { display:flex; align-items:center; justify-content:center; gap:12px; padding:3px 0 8px; }
.home-slide-controls .icon-button { width:31px;height:31px; }
.home-slide-dots { display:flex; align-items:center; gap:7px; }
.home-slide-dot { width:7px;height:7px;padding:0;border:0;border-radius:9px;background:#c9baa0;cursor:pointer;transition:width .25s ease,background .25s ease; }
.home-slide-dot.active { width:23px;background:#a97916; }
.home-feature-section { padding:clamp(30px,5vw,58px) 10px 10px; }
.home-section-heading { margin-bottom:20px; text-align:center; }
.home-section-heading .eyebrow { justify-content:center; }
.home-section-heading h2 { margin:8px 0 0;font-family:var(--font-serif);font-size:clamp(25px,3.5vw,38px); }
.home-section-intro { max-width:540px;margin:10px auto 0;color:#777064;font-size:12px;line-height:1.7; }
.home-feature-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px; }
.home-feature-card { min-height:245px;padding:19px;border:1px solid #eadfca;border-radius:17px;background:#fffefa;box-shadow:0 11px 28px #4b3c1b0a;transition:transform .25s ease,box-shadow .25s ease; }
.feature-upload-image { width:100%;height:91px;margin-bottom:15px;object-fit:cover;border-radius:12px; }
.home-feature-card:hover { transform:translateY(-5px);box-shadow:0 17px 34px #4b3c1b18; }
.feature-art { height:91px;margin-bottom:15px;display:grid;place-items:center;position:relative;overflow:hidden;border-radius:12px;background:linear-gradient(135deg,#f6e9c7,#fffaf0); }
.feature-art span { width:64px;height:64px;border-radius:23px;background:linear-gradient(145deg,#f9e8ac,#bd9038);box-shadow:8px 9px 18px #785c2861,inset 5px 5px 10px #fff9e4;transform:rotate(-12deg) rotateY(20deg); }
.feature-art i { position:absolute;color:#795716;font-style:normal;font-size:32px;text-shadow:1px 3px 5px #684a1e66; }
.feature-art-1 { background:linear-gradient(135deg,#f6e7e7,#fff8f4); }.feature-art-1 span { background:linear-gradient(145deg,#f7d9d2,#bc766f); }
.feature-art-2 { background:linear-gradient(135deg,#e8eee3,#f8fbf5); }.feature-art-2 span { background:linear-gradient(145deg,#d9e6c8,#7c9a63); }
.home-feature-card .eyebrow { margin:0 0 6px;font-size:9px; }
.home-feature-card h3 { margin:0 0 7px;color:#342f25;font-family:var(--font-serif);font-size:18px; }
.home-feature-card p:not(.eyebrow) { margin:0;color:#777064;font-size:11px;line-height:1.65; }
.home-feature-card a { display:inline-flex;align-items:center;gap:5px;margin-top:12px;color:#8c6417;font-size:10px;font-weight:700;text-decoration:none; }
.home-journey { padding:clamp(32px,5vw,58px) 10px 10px; }
.home-journey-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px; }
.home-journey-grid article { position:relative;min-height:160px;padding:23px 20px;border:1px solid #ece5d8;border-radius:16px;background:linear-gradient(145deg,#fffefa,#f8f6ef); }
.home-journey-grid article>span { display:grid;width:32px;height:32px;place-items:center;border-radius:50%;background:#eee4ce;color:#8c6417;font-size:10px;font-weight:800;letter-spacing:.04em; }
.home-journey-grid h3 { margin:15px 0 7px;color:#342f25;font-family:var(--font-serif);font-size:17px; }
.home-journey-grid p { margin:0;color:#777064;font-size:11px;line-height:1.7; }
.home-safety { display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center;margin:30px 10px 12px;padding:22px 24px;border:1px solid #e8dfca;border-radius:18px;background:linear-gradient(110deg,#f5f0e2,#fbfaf6); }
.home-safety-icon { display:grid;width:48px;height:48px;place-items:center;border-radius:15px;background:#e9dfc8;color:#8a651e;font-size:24px; }
.home-safety .eyebrow { margin:0 0 5px;font-size:9px; }
.home-safety h2 { margin:0;color:#342f25;font-family:var(--font-serif);font-size:clamp(18px,2.5vw,24px); }
.home-safety div>p:last-child { max-width:610px;margin:6px 0 0;color:#777064;font-size:11px;line-height:1.65; }
.home-safety .secondary-button { white-space:nowrap; }
.public-home-trust { display:flex;justify-content:center;gap:8px;flex-wrap:wrap; }
.cms-advanced { margin-top:20px;padding-top:15px;border-top:1px solid #efede7; }
.cms-advanced summary { color:#5d574c;font-size:12px;font-weight:700;cursor:pointer; }
@keyframes home-slide-enter { from { opacity:0;transform:translateY(9px) scale(.99); } to { opacity:1;transform:translateY(0) scale(1); } }
@keyframes art-float { 0%,100% { transform:translateY(0) rotateY(-4deg); } 50% { transform:translateY(-8px) rotateY(4deg); } }
@keyframes logo-tilt { 0%,100% { transform:translateZ(62px) rotateY(-6deg) scale(1); } 50% { transform:translateZ(72px) rotateY(6deg) scale(1.025); } }
@keyframes home-brand-float { 0%,100% { transform:perspective(700px) translateY(0) rotateY(-3deg); } 50% { transform:perspective(700px) translateY(-5px) rotateY(3deg); } }
@media (prefers-reduced-motion: reduce) { .public-home-brand,.home-slide,.home-3d-art,.home-slide-image,.home-motion-logo,.home-feature-card,.home-slide-dot { animation:none;transition:none; } }
.developer-credit a { color: #7f612b; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.developer-credit a:hover { color: var(--forest); }
.permission-picker { display:grid;gap:10px;max-height:340px;overflow:auto;padding:2px 5px 2px 0; }
.permission-group { min-width:0;margin:0;padding:10px;border:1px solid #e9e5dc;border-radius:11px; }
.permission-group legend { padding:0 5px;color:#766746;font-size:10px;font-weight:800;text-transform:capitalize; }
.permission-option { display:flex;gap:9px;align-items:flex-start;padding:7px 5px;border-radius:7px;cursor:pointer; }
.permission-option:hover { background:#f8f6f0; }
.permission-option input { flex:0 0 auto;margin-top:2px;accent-color:#62816b; }
.permission-option strong,.permission-option small { display:block; }
.permission-option strong { color:#35332e;font-size:10px; }
.permission-option small { margin-top:2px;color:#878276;font-size:9px;line-height:1.5; }
.permission-option.is-locked { cursor:not-allowed;opacity:.68; }
@media (max-width: 980px) { .home-slide-image--banner { height:min(56vh,520px); } }
@media (max-width: 700px) { .public-home { padding: 22px 15px; } .home-slide { grid-template-columns:1fr;gap:0; } .home-slide-visual { min-height:215px; } .home-3d-art { height:205px;transform:scale(.8); } .home-motion-logo { height:190px; } .home-slide-image { height:205px; } .home-slide-image--banner { height:clamp(210px,55svh,420px);min-height:210px;border-radius:12px; } .home-slide-banner-actions { display:grid;grid-template-columns:1fr 1fr; } .home-slide-banner-actions button { justify-content:center;padding-inline:9px; } .home-feature-grid,.home-journey-grid { grid-template-columns:1fr; } .home-feature-card { min-height:unset; } .home-journey-grid article { min-height:unset; } .home-safety { grid-template-columns:auto minmax(0,1fr);margin-inline:0;padding:18px; } .home-safety .secondary-button { grid-column:1/-1;justify-content:center; } .home-slide-copy .public-home-actions { flex-direction:column;align-items:stretch; } .home-slide-copy .public-home-actions button,.home-slide-copy .public-home-actions a { justify-content:center; } }
@media (max-width: 380px) { .home-slide-banner-actions { grid-template-columns:1fr; } }
.auth-intro { max-width: 650px; margin: 0 auto 27px; text-align: center; }
.auth-intro img { display: block; margin: 0 auto 14px; border-radius: 16px; box-shadow: 0 8px 20px rgba(32,28,19,.13); }
.auth-intro img { width: min(132px, 45vw); height: auto; }
.auth-intro .eyebrow { justify-content: center; }
.auth-intro h1 { margin: 10px 0 7px; color: var(--ink); font-family: var(--font-serif); font-size: clamp(30px, 4vw, 43px); letter-spacing: -1.2px; }
.auth-intro h1 em { color: #a97916; font-weight: 500; }
.auth-intro > p { margin: 0; color: #79756c; font-size: 12px; }
.auth-content { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .8fr); gap: 18px; align-items: stretch; max-width: 850px; margin: auto; }
.auth-card { align-self: center; padding: clamp(22px, 4vw, 34px); }
.auth-card h2 { margin: 8px 0 6px; font-family: var(--font-serif); font-size: 26px; }
.auth-description { margin: 0 0 19px; color: #79756c; font-size: 10px; }
.auth-connection-note { margin: 0 0 14px; padding: 10px 12px; border: 1px solid #eadcae; border-radius: 9px; color: #745b20; background: #fbf6e8; font-size: 9px; line-height: 1.55; }
.auth-actions { justify-content: space-between; margin-top: 12px; }
.auth-register { margin-top: 18px; padding-top: 15px; border-top: 1px solid #efede7; color: #77736a; font-size: 10px; text-align: center; }
.auth-terms { margin: 14px 0 0; color: #9a958a; font-size: 8px; text-align: center; }
.auth-aside { display: grid; gap: 13px; align-content: center; }
.auth-promise { min-height: 174px; padding: 24px; border-radius: 15px; color: #fff; background: radial-gradient(ellipse at 100% 0%, rgba(199,154,53,.35), transparent 46%), #171614; }
.auth-promise .banner-kicker { color: #e7c875; font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.auth-promise h2 { margin: 12px 0 8px; font-family: var(--font-serif); font-size: 27px; line-height: 1.1; }
.auth-promise p { max-width: 250px; margin: 0; color: #d0cdc4; font-size: 10px; line-height: 1.7; }
.auth-aside .rail-card { padding: 17px; }
.public-auth .main-view > .page-heading, .public-auth .main-view > .panel { width: min(100%, 850px); }
.public-auth .main-view > .member-profile-layout { width: min(100%, 850px); }
.live-activity { max-width: 1100px; margin: 0 auto 17px; padding: 14px 17px; }
.live-activity-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 11px; border-bottom: 1px solid #efede7; }
.live-activity-heading > div { display: grid; grid-template-columns: 8px auto; align-items: center; column-gap: 8px; }
.activity-live-dot { width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 0 3px #f7f0dd; }
.live-activity-heading h2 { margin: 0; font-family: var(--font-serif); font-size: 16px; }
.live-activity-heading small { grid-column: 2; margin-top: 2px; color: #8b867b; font-size: 8px; }
.live-badge { padding: 4px 7px; border: 1px solid #eadcae; border-radius: 99px; color: #816117; background: #fbf6e8; font-size: 8px; font-weight: 800; letter-spacing: .7px; }
.live-activity ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 11px 0 0; list-style: none; }
.live-activity li:not(.activity-empty) { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.activity-marker { width: 6px; height: 6px; flex: 0 0 6px; margin-top: 5px; border-radius: 50%; }
.activity-copy { min-width: 0; flex: 1; }
.activity-copy strong, .activity-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-copy strong { color: #37342e; font-size: 9px; text-transform: capitalize; }
.activity-copy small, .live-activity time { margin-top: 3px; color: #8b867b; font-size: 8px; }
.live-activity time { flex: 0 0 auto; }
.activity-empty { grid-column: 1/-1; color: #898478; font-size: 9px; }

.cms-layout { display: grid; grid-template-columns: minmax(260px, .72fr) minmax(0, 1.3fr); gap: 14px; align-items: start; }
.cms-editor, .cms-library { min-width: 0; padding: 16px; }
.cms-editor textarea { min-height: 155px; }
.cms-library .panel-head { align-items: center; }
.cms-item { padding: 13px 0; border-top: 1px solid #efede7; }
.cms-item-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.cms-item-head > div:first-child { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.cms-item-head small { color: #898478; font-size: 8px; }
.cms-actions { display: flex; align-items: center; justify-content: flex-end; gap: 5px; flex-wrap: wrap; }
.cms-actions .secondary-button { min-height: 29px; padding: 6px 8px; font-size: 8px; }
.cms-actions .secondary-button svg { width: 12px; height: 12px; }
.cms-item > p { margin: 11px 0; color: #5e5a51; font-size: 10px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.cms-item-meta { display: flex; flex-wrap: wrap; gap: 12px; color: #8b867b; font-size: 8px; text-transform: capitalize; }

@media (max-width: 850px) {
  .auth-content { grid-template-columns: minmax(0, 1fr); max-width: 540px; }
  .auth-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .auth-aside .rail-card { align-self: stretch; }
  .cms-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .public-auth .main-view { padding: 28px 15px; }
  .auth-intro { margin-bottom: 20px; }
  .auth-intro img { width: min(112px, 40vw); height: auto; }
  .auth-aside { grid-template-columns: minmax(0, 1fr); }
  .auth-promise { min-height: 150px; }
  .live-activity { margin-right: 14px; margin-left: 14px; }
  .live-activity ul { grid-template-columns: minmax(0, 1fr); }
  .cms-editor, .cms-library { padding: 13px; }
  .cms-item-head { flex-direction: column; }
  .cms-actions { justify-content: flex-start; }
}

.plans-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 16px; }
.plan-card { display: flex; flex-direction: column; min-height: 275px; padding: 23px; border-top: 3px solid var(--gold); }
.plan-card h2 { margin: 17px 0 5px; color: var(--ink); font-family: var(--font-serif); font-size: 24px; }
.plan-price { color: var(--ink); font-size: 28px; letter-spacing: -.6px; }
.plan-card > p { flex: 1; margin: 12px 0 20px; color: var(--ink-soft); font-size: 12px; line-height: 1.6; }
.plan-benefits { display: grid; gap: 7px; width: 100%; margin: 12px 0; padding: 0; list-style: none; }
.plan-benefits li { display: flex; align-items: flex-start; gap: 7px; color: #5c6e61; font-size: 9px; line-height: 1.45; }
.plan-benefits svg { width: 13px; height: 13px; flex: 0 0 13px; color: #93722c; }
.plan-actions { display: grid; gap: 8px; }
.plan-actions button { justify-content: center; width: 100%; }
.membership-active-banner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; padding: 12px; border: 1px solid #e2ebde; border-radius: 11px; background: #f7faf4; }
.member-payment-history { margin-top: 18px; }
.member-payment-history .data-table td small { display: block; max-width: 220px; margin-top: 3px; overflow-wrap: anywhere; color: #89948b; font-size: 8px; }
.payment-security-note { display: flex; align-items: flex-start; gap: 9px; max-width: 780px; margin: 18px auto 0; padding: 13px 15px; border: 1px solid #e9dfc9; border-radius: 11px; color: #61573f; background: #fcf8ee; font-size: 11px; line-height: 1.55; }
.payment-security-note svg { width: 16px; height: 16px; flex: 0 0 16px; color: #9b752e; }
.payment-plans-panel { margin-top: 16px; }
.plan-key { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }
.plan-enabled { display: flex; align-items: center; gap: 9px; color: var(--ink); font-weight: 600; }
.plan-enabled input { accent-color: var(--gold); }
.provider-config { margin-top: 12px; padding: 13px; border: 1px solid #e8e2d5; border-radius: 12px; background: #fffefa; }
.provider-config-heading { display: flex; align-items: center; justify-content: space-between; gap: 9px; margin-bottom: 12px; color: var(--ink); font-size: 12px; font-weight: 700; }
.provider-field { display: grid; gap: 5px; margin-top: 10px; color: var(--ink-soft); font-size: 10px; font-weight: 650; }
.provider-field small { color: var(--muted); font-size: 9px; font-weight: 400; }
.provider-field .setting-input { width: 100%; }
.webhook-endpoint { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px; margin-top: 11px; padding-top: 9px; border-top: 1px solid #eee9df; color: var(--muted); font-size: 9px; }
.webhook-endpoint code { overflow-wrap: anywhere; color: #67542e; font-size: 9px; }
@media (max-width: 600px) {
  .plan-card { min-height: 0; padding: 18px; }
  .plan-card h2 { font-size: 21px; }
  .payment-plans-panel { padding: 12px; }
  .payment-plans-panel .panel-head { align-items: flex-start; }
}

.maintenance-mode { min-width: 320px; background: #f8f7f2; }
.maintenance-mode .app-shell { display: block; min-height: 100vh; }
.maintenance-mode .sidebar, .maintenance-mode .topbar, .maintenance-mode #activityDock, .maintenance-mode .app-footer { display: none !important; }
.maintenance-mode .main-shell, .maintenance-mode .page-scroll { width: 100%; min-height: 100vh; }
.maintenance-mode .main-view { display: grid; max-width: none; min-height: 100vh; padding: 28px; place-items: center; }
.maintenance-page { position: relative; display: grid; width: 100%; min-height: calc(100vh - 56px); overflow: hidden; border: 1px solid #ece6d9; border-radius: 28px; background: radial-gradient(ellipse at 50% 25%, #fffdf7 0, #f8f5eb 48%, #f0eee5 100%); place-items: center; }
.maintenance-card { position: relative; z-index: 1; width: min(100% - 32px, 600px); padding: 58px 42px; border: 1px solid rgba(255,255,255,.9); border-radius: 24px; background: rgba(255,255,255,.78); box-shadow: 0 24px 80px rgba(44,63,46,.09); text-align: center; backdrop-filter: blur(14px); }
.maintenance-card > img { display: block; width: 112px; height: 78px; margin: 0 auto 24px; object-fit: contain; }
.maintenance-kicker { display: inline-flex; align-items: center; gap: 9px; color: #887342; font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.maintenance-kicker i { width: 7px; height: 7px; border-radius: 50%; background: #c39a4f; box-shadow: 0 0 0 5px #f5eedf; }
.maintenance-card h1 { margin: 17px 0 12px; color: #193c2d; font-family: var(--font-serif); font-size: clamp(37px, 6vw, 58px); font-weight: 600; letter-spacing: -.035em; }
.maintenance-card h1 em { color: #ad8741; font-weight: 500; }
.maintenance-card > p { max-width: 450px; margin: 0 auto; color: #68746b; font-size: 16px; line-height: 1.75; }
.maintenance-countdown-wrap { display: grid; gap: 13px; margin: 30px 0 26px; color: #879087; font-size: 12px; }
.maintenance-countdown { display: flex; justify-content: center; align-items: baseline; gap: 8px; color: #183d2c; }
.maintenance-countdown strong { min-width: 54px; padding: 12px 8px 9px; border: 1px solid #e9e4d8; border-radius: 12px; background: #fff; font-size: 25px; font-variant-numeric: tabular-nums; }
.maintenance-countdown small { margin-right: 4px; color: #869087; font-size: 10px; }
.maintenance-progress { height: 5px; overflow: hidden; border-radius: 5px; background: #e9e8df; }
.maintenance-progress span { display: block; width: 56%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#1b5b41,#c4a154); animation: maintenance-progress 2.6s ease-in-out infinite alternate; }
.maintenance-note { display: block; margin: 19px 0 0; color: #89938a; font-size: 12px; }
.maintenance-admin-link { margin-top: 21px; color: #68766c; font-size: 12px; }
.maintenance-orbit { position: absolute; width: 400px; height: 400px; border: 1px solid rgba(184,151,86,.13); border-radius: 50%; pointer-events: none; }
.maintenance-orbit-one { top: -255px; right: -115px; }
.maintenance-orbit-two { bottom: -315px; left: -155px; width: 520px; height: 520px; }
.maintenance-admin-panel { margin: 0 0 16px; padding: 18px; }
.maintenance-admin-copy { display: flex; align-items: center; gap: 13px; margin-bottom: 15px; }
.maintenance-admin-copy .feature-line-icon { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; }
.maintenance-admin-copy h2 { margin: 5px 0; color: var(--ink); font-size: 19px; }
.maintenance-admin-copy p, .maintenance-admin-toggle small { display: block; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.maintenance-admin-toggle { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid #edf0ea; }
.maintenance-admin-toggle strong { display: block; margin-bottom: 4px; color: var(--ink); font-size: 13px; }
.maintenance-admin-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-bottom: 15px; }
.maintenance-admin-fields input, .maintenance-admin-fields textarea { width: 100%; }
@keyframes maintenance-progress { from { transform: translateX(-60%); } to { transform: translateX(130%); } }
@media (max-width: 640px) {
  .account-security-forms { grid-template-columns: minmax(0, 1fr); }
  .account-security-modal { padding: 20px 16px; }
  .account-security-modal .modal-actions { flex-wrap: wrap; }
  .maintenance-mode .main-view { padding: 10px; }
  .maintenance-page { min-height: calc(100vh - 20px); border-radius: 18px; }
  .maintenance-card { width: calc(100% - 24px); padding: 38px 20px; }
  .maintenance-card > p { font-size: 14px; }
  .maintenance-countdown { gap: 4px; }
  .maintenance-countdown strong { min-width: 39px; padding: 10px 5px 8px; font-size: 19px; }
  .maintenance-countdown small { margin-right: 1px; font-size: 9px; }
  .maintenance-admin-fields { grid-template-columns: 1fr; }
}