:root {
  color-scheme: light;
  --paper: #f8f7f4;
  --surface: #fff;
  --ink: #252825;
  --muted: #777c76;
  --line: #e8e8e1;
  --green: #31594a;
  --green-deep: #244638;
  --green-soft: #e7eee9;
  --orange: #e58f65;
  --warm: #f1eee7;
  --danger: #ad5147;
  --shadow: 0 16px 44px rgba(34, 42, 35, .07);
  font-family: "DM Sans", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--paper); color: var(--ink); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
.boot { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 16px; color: var(--muted); }
.mark { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 16px 16px 16px 5px; background: var(--green); color: white; font: 800 26px Manrope, sans-serif; }
.topbar { height: 78px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(20px, 6vw, 90px); border-bottom: 1px solid rgba(40,50,40,.07); background: rgba(248,247,244,.88); position: sticky; top: 0; z-index: 10; backdrop-filter: blur(15px); }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 800 20px Manrope, sans-serif; letter-spacing: -.7px; }
.brand .mark { width: 35px; height: 35px; font-size: 21px; border-radius: 12px 12px 12px 4px; }
.nav-actions { display: flex; align-items: center; gap: 12px; }
.container { width: min(1120px, calc(100% - 40px)); margin: auto; }
.narrow { width: min(740px, calc(100% - 40px)); }
.hero { min-height: calc(100vh - 78px); display: grid; grid-template-columns: 1fr .9fr; align-items: center; gap: clamp(30px, 7vw, 100px); padding-top: 40px; padding-bottom: 80px; }
.eyebrow { color: var(--green); font-size: 12px; font-weight: 700; letter-spacing: 1.45px; text-transform: uppercase; }
h1,h2,h3,p { margin-top: 0; }
h1,h2,h3 { font-family: Manrope, sans-serif; letter-spacing: -1.15px; }
h1 { max-width: 590px; margin: 18px 0; font-size: clamp(44px, 6vw, 76px); line-height: 1.04; }
h2 { font-size: clamp(27px, 3vw, 38px); line-height: 1.16; }
h3 { font-size: 20px; }
.lead { max-width: 520px; color: #656b64; font-size: 18px; line-height: 1.65; }
.hero-note { display: flex; gap: 10px; align-items: center; margin-top: 27px; color: var(--muted); font-size: 13px; }
.hero-note .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
.hero-art { min-height: 500px; position: relative; display: grid; place-items: center; }
.orbit { position: absolute; width: min(36vw, 410px); aspect-ratio: 1; border: 1px solid #e5e3da; border-radius: 50%; }
.orbit:before,.orbit:after { content: ""; position: absolute; border: 1px solid #e5e3da; border-radius: 50%; inset: 35px; }
.orbit:after { inset: 78px; }
.portrait-card { position: relative; width: min(280px, 64vw); padding: 9px; border-radius: 150px 150px 22px 22px; background: #ebe7dc; box-shadow: var(--shadow); transform: rotate(3deg); }
.portrait { aspect-ratio: .77; border-radius: 145px 145px 16px 16px; overflow: hidden; background: linear-gradient(150deg,#d6d9ce,#b8c8bc 47%,#e9c6aa); position: relative; }
.portrait:before { content: ""; position: absolute; width: 80%; height: 44%; left: 10%; bottom: -12%; border-radius: 50% 50% 8% 8%; background: linear-gradient(120deg,#43584a,#24382f); }
.portrait:after { content: ""; position: absolute; width: 38%; aspect-ratio: .78; left: 31%; top: 20%; border-radius: 46% 46% 45% 45%; background: linear-gradient(90deg,#d5a77f,#f1cda5 60%,#be8c69); box-shadow: 0 -26px 0 6px #5c4438; }
.photo-label { position: absolute; left: 25px; bottom: 22px; color: white; z-index: 1; text-shadow: 0 1px 9px #34443b; }
.photo-label strong { display: block; font: 700 21px Manrope; }
.photo-label span { font-size: 12px; }
.floating-note { position: absolute; z-index: 2; top: 22%; left: -7%; padding: 15px 18px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); font-size: 13px; transform: rotate(-5deg); }
.floating-note strong { display: block; margin-bottom: 4px; font: 700 14px Manrope; }
.floating-note small { color: var(--muted); }
.trust-card { position: absolute; right: 2%; bottom: 16%; padding: 15px 18px; background: var(--green); color: white; border-radius: 16px; box-shadow: var(--shadow); font-size: 12px; transform: rotate(4deg); }
.trust-card b { display: block; font: 700 14px Manrope; margin-bottom: 3px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 19px; border-radius: 9px; border: 1px solid transparent; font-weight: 600; font-size: 14px; transition: background .18s, transform .18s; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--green); color: white; }
.btn-primary:hover { background: var(--green-deep); }
.btn-quiet { background: transparent; color: var(--ink); }
.btn-quiet:hover { background: #eeeee8; }
.btn-outline { border-color: var(--line); background: white; color: var(--ink); }
.btn-soft { color: var(--green); background: var(--green-soft); }
.btn-danger { color: white; background: var(--danger); }
.btn-block { width: 100%; }
.btn:disabled { opacity: .48; cursor: not-allowed; transform: none; }
.section { padding: 64px 0; }
.section-title { max-width: 650px; margin-bottom: 30px; }
.section-title p { color: var(--muted); line-height: 1.6; }
.principles { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.principle { padding: 24px; background: white; border: 1px solid var(--line); border-radius: 14px; }
.principle .num { color: var(--orange); font: 700 14px Manrope; }
.principle h3 { margin: 21px 0 9px; }
.principle p { margin-bottom: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
.app-shell { display: grid; grid-template-columns: 236px minmax(0,1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 25px 15px; background: #f1f0eb; border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.sidebar .brand { padding: 0 9px 32px; }
.side-label { padding: 14px 12px 7px; color: #9b9e97; font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.side-link { display: flex; align-items: center; gap: 11px; min-height: 43px; padding: 0 12px; color: #676d66; font-size: 13px; border-radius: 8px; }
.side-link:hover,.side-link.active { background: white; color: var(--green); }
.side-link .ico { width: 20px; text-align: center; font-size: 16px; }
.side-count { margin-left: auto; min-width: 20px; padding: 2px 5px; border-radius: 10px; background: #e7d4c7; color: #744a35; text-align: center; font-size: 10px; }
.sidebar-bottom { margin-top: auto; }
.mainpane { min-width: 0; }
.app-top { display: flex; align-items: center; justify-content: space-between; height: 72px; padding: 0 clamp(18px,4vw,52px); border-bottom: 1px solid var(--line); background: var(--paper); position: sticky; top: 0; z-index: 8; }
.app-top .welcome { color: var(--muted); font-size: 13px; }
.app-top .welcome b { display: block; color: var(--ink); font: 600 14px Manrope; }
.page { width: min(1080px, 100%); margin: 0 auto; padding: 38px clamp(18px,4vw,52px) 72px; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.page-heading h1 { margin: 5px 0 0; font-size: clamp(30px,4vw,42px); }
.page-heading p { margin: 10px 0 0; color: var(--muted); line-height: 1.6; }
.card { padding: 23px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: 0 5px 18px rgba(26,39,30,.025); }
.card + .card { margin-top: 14px; }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; margin-bottom: 18px; }
.card-head h3 { margin: 0; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; }
.field { display: grid; gap: 7px; }
.field.full { grid-column: 1/-1; }
.field label,.label { font-size: 12px; color: #60675f; font-weight: 600; }
.field input,.field select,.field textarea,.filter input,.filter select { width: 100%; border: 1px solid #dfe1d9; border-radius: 8px; padding: 12px 13px; outline: none; background: white; color: var(--ink); }
.field textarea { min-height: 105px; resize: vertical; line-height: 1.55; }
.field input:focus,.field select:focus,.field textarea:focus,.filter input:focus,.filter select:focus { border-color: #7b9b87; box-shadow: 0 0 0 3px #e7eee9; }
.hint { color: #92968f; font-size: 11px; line-height: 1.45; }
.checkline { display: flex; align-items: flex-start; gap: 10px; color: #656b64; font-size: 12px; line-height: 1.5; }
.checkline input { accent-color: var(--green); margin-top: 2px; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.form-alert { padding: 11px 13px; border-radius: 8px; color: #754938; background: #f8eee8; font-size: 13px; line-height: 1.5; }
.form-alert.success { color: #365745; background: #e7eee9; }
.auth-wrap { min-height: calc(100vh - 78px); display: grid; place-items: center; padding: 40px 20px; }
.auth-card { width: min(510px,100%); padding: clamp(24px,5vw,42px); border: 1px solid var(--line); border-radius: 16px; background: white; box-shadow: var(--shadow); }
.auth-card h1 { font-size: 34px; margin: 10px 0; }
.auth-card > p { color: var(--muted); line-height: 1.6; font-size: 14px; }
.auth-tabs { display: flex; gap: 5px; margin-bottom: 24px; padding: 4px; border-radius: 9px; background: #f2f1ec; }
.auth-tabs button { flex: 1; min-height: 38px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-size: 13px; }
.auth-tabs button.active { color: var(--ink); background: white; box-shadow: 0 1px 4px #0001; }
.status-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 20px; color: var(--green); background: var(--green-soft); font-size: 11px; font-weight: 600; white-space: nowrap; }
.status-chip.warn { color: #936043; background: #f5ede3; }
.status-chip.off { color: #777b75; background: #ededea; }
.dot-live { width: 6px; height: 6px; border-radius: 50%; background: #648c6c; }
.dashboard-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 14px; }
.metric-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.metric { padding: 17px; border: 1px solid var(--line); border-radius: 11px; background: white; }
.metric strong { display: block; margin: 7px 0 3px; font: 700 26px Manrope; }
.metric span { color: var(--muted); font-size: 11px; }
.step-list { display: grid; gap: 0; }
.step { position: relative; display: grid; grid-template-columns: 30px 1fr; gap: 11px; padding-bottom: 22px; }
.step:not(:last-child):before { content: ""; position: absolute; left: 14px; top: 28px; bottom: 0; border-left: 1px solid #dfe2da; }
.step-num { position: relative; z-index: 1; display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; color: var(--green); background: var(--green-soft); font-size: 11px; font-weight: 700; }
.step.complete .step-num { color: white; background: var(--green); }
.step h4 { margin: 3px 0 4px; font: 600 14px Manrope; }
.step p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.profile-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 17px; }
.profile-cover { min-height: 360px; overflow: hidden; position: relative; border-radius: 12px; background: linear-gradient(150deg,#d9ddd2,#bed0c3 50%,#e7c7ac); }
.profile-cover img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; }
.cover-placeholder { position: absolute; inset: 0; display: grid; place-items: center; font-size: 49px; color: white; background: linear-gradient(140deg,#54726055,#233c2b55); }
.profile-info { padding: 7px 0; }
.profile-info h2 { margin: 0 0 8px; }
.profile-facts { display: flex; gap: 8px; flex-wrap: wrap; color: var(--muted); font-size: 12px; margin-bottom: 20px; }
.profile-info h4 { margin: 16px 0 7px; font: 700 11px Manrope; letter-spacing: .8px; text-transform: uppercase; }
.profile-info p { color: #646a63; font-size: 13px; line-height: 1.65; }
.tag-list { display: flex; flex-wrap: wrap; gap: 7px; }
.tag { padding: 6px 9px; border: 1px solid #e6e7df; border-radius: 15px; color: #656b64; background: #fbfbf8; font-size: 11px; }
.catalog-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-bottom: 19px; padding: 15px; border: 1px solid var(--line); border-radius: 11px; background: white; }
.filter { min-width: 110px; flex: 1; display: grid; gap: 5px; }
.filter label { color: var(--muted); font-size: 10px; }
.filter input,.filter select { padding: 9px 10px; font-size: 12px; }
.people-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px; }
.person-card { overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: white; }
.person-photo { height: 225px; position: relative; background: linear-gradient(150deg,#d8ded5,#becdc2 52%,#e4c4ac); }
.person-photo img { width: 100%; height: 100%; object-fit: cover; }
.person-initial { width: 100%; height: 100%; display: grid; place-items: center; color: #fff; font: 600 54px Manrope; background: linear-gradient(135deg,#7c9b87,#dfb69a); }
.person-body { padding: 16px; }
.person-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.person-title h3 { margin: 0; font-size: 18px; }
.person-meta { margin: 6px 0 12px; color: var(--muted); font-size: 11px; }
.person-desc { min-height: 58px; color: #646a63; font-size: 12px; line-height: 1.55; }
.person-tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 11px 0 15px; }
.person-tags .tag { padding: 4px 7px; font-size: 9px; }
.pager { display: flex; justify-content: center; align-items: center; gap: 14px; margin: 24px 0; color: var(--muted); font-size: 12px; }
.invite-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.invite-list { display: grid; gap: 8px; }
.invite-row { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: white; }
.avatar { flex: 0 0 auto; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: var(--green); background: var(--green-soft); font: 700 15px Manrope; }
.invite-row .row-main { flex: 1; min-width: 0; }
.invite-row h4 { overflow: hidden; margin: 0 0 4px; font: 600 13px Manrope; text-overflow: ellipsis; white-space: nowrap; }
.invite-row p { margin: 0; color: var(--muted); font-size: 11px; }
.row-actions { display: flex; gap: 6px; }
.row-actions .btn { min-height: 34px; padding: 0 10px; font-size: 11px; }
.empty { padding: 35px 20px; border: 1px dashed #dfe1d9; border-radius: 12px; text-align: center; color: var(--muted); font-size: 13px; line-height: 1.6; }
.empty strong { display: block; margin-bottom: 7px; color: var(--ink); font: 600 15px Manrope; }
.chat-shell { display: flex; flex-direction: column; height: min(680px, calc(100vh - 190px)); min-height: 430px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: white; }
.chat-head { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; border-bottom: 1px solid var(--line); }
.chat-person { display: flex; align-items: center; gap: 10px; }
.chat-person h3 { margin: 0 0 3px; font-size: 14px; }
.chat-person p { margin: 0; color: var(--muted); font-size: 10px; }
.message-list { flex: 1; overflow: auto; padding: 19px; background: #fbfbf8; }
.message { width: fit-content; max-width: 74%; margin: 0 0 11px; padding: 10px 12px 7px; border: 1px solid #e9eae3; border-radius: 12px 12px 12px 3px; background: white; font-size: 13px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.message.mine { margin-left: auto; border-color: #e1e9e2; border-radius: 12px 12px 3px 12px; background: #eaf0eb; }
.message-time { margin-top: 5px; color: #9a9e97; text-align: right; font-size: 9px; }
.chat-compose { display: flex; gap: 9px; padding: 13px; border-top: 1px solid var(--line); }
.chat-compose textarea { flex: 1; min-height: 43px; max-height: 100px; padding: 11px; border: 1px solid var(--line); border-radius: 9px; resize: none; outline: none; }
.cooldown { padding: 30px; border-radius: 14px; color: white; background: var(--green); }
.cooldown h2 { max-width: 450px; }
.timer { margin: 21px 0; font: 700 clamp(32px,7vw,56px) Manrope; letter-spacing: 1px; }
.cooldown p { max-width: 510px; color: #d9e4db; font-size: 13px; line-height: 1.7; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
table { width: 100%; border-collapse: collapse; min-width: 600px; background: white; }
th,td { padding: 12px 13px; border-bottom: 1px solid var(--line); text-align: left; font-size: 11px; vertical-align: middle; }
th { color: var(--muted); background: #fafaf7; font-weight: 600; }
tr:last-child td { border-bottom: 0; }
.admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.admin-tabs { display: flex; gap: 5px; overflow-x: auto; margin-bottom: 18px; padding: 4px; border-radius: 9px; background: #f1f0eb; }
.admin-tabs button { white-space: nowrap; border: 0; border-radius: 7px; padding: 10px 13px; background: transparent; color: var(--muted); font-size: 12px; }
.admin-tabs button.active { color: var(--ink); background: white; box-shadow: 0 1px 4px #0001; }
.toast { position: fixed; z-index: 30; right: 20px; bottom: 20px; max-width: min(400px,calc(100% - 40px)); padding: 13px 16px; border-radius: 9px; color: white; background: #293e31; box-shadow: var(--shadow); font-size: 13px; animation: show .2s ease-out; }
.photo-manage { display:flex; flex-wrap:wrap; gap:10px; }
.photo-manage figure { position:relative; width:78px; height:90px; margin:0; overflow:hidden; border:1px solid var(--line); border-radius:9px; background:var(--warm); }
.photo-manage img { width:100%; height:100%; object-fit:cover; }
.photo-manage button { position:absolute; top:4px; right:4px; width:24px; height:24px; padding:0; border:0; border-radius:50%; color:white; background:#1f2822b8; font-size:17px; line-height:1; }
@keyframes show { from { transform: translateY(8px); opacity: .3 } to { transform: translateY(0); opacity: 1 } }
.mobile-menu { display: none; }
.footer { padding: 28px 0 45px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.hidden { display: none !important; }
@media (max-width: 940px) {
  .hero { grid-template-columns: 1.15fr .85fr; gap: 20px; }
  .hero-art { min-height: 430px; }
  .people-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .app-shell { grid-template-columns: 205px minmax(0,1fr); }
  .metric-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 680px) {
  .topbar { height: 65px; padding: 0 17px; }
  .topbar .nav-actions { gap: 3px; }
  .topbar .btn { min-height: 38px; padding: 0 11px; font-size: 12px; }
  .hero { min-height: auto; grid-template-columns: 1fr; padding-top: 50px; padding-bottom: 45px; }
  h1 { font-size: clamp(43px,13vw,62px); }
  .lead { font-size: 16px; }
  .hero-art { min-height: 390px; margin: 5px auto 0; width: 100%; }
  .orbit { width: min(78vw,360px); }
  .portrait-card { width: min(240px,63vw); }
  .floating-note { left: 0; top: 14%; }
  .trust-card { right: 1%; bottom: 11%; }
  .section { padding: 45px 0; }
  .principles { grid-template-columns: 1fr; }
  .app-shell { display: block; padding-bottom: 67px; }
  .sidebar { position: fixed; z-index: 15; top: auto; bottom: 0; width: 100%; height: 62px; padding: 5px 6px calc(5px + env(safe-area-inset-bottom)); flex-direction: row; justify-content: space-around; border-top: 1px solid var(--line); border-right: 0; background: #f7f6f2; }
  .sidebar .brand,.side-label,.sidebar-bottom { display: none; }
  #nav-links { display: flex; width: 100%; justify-content: space-around; }
  .side-link { flex: 1; min-width: 0; height: 49px; min-height: 49px; justify-content: center; flex-direction: column; gap: 2px; padding: 2px; font-size: 9px; }
  .side-link .ico { font-size: 17px; }
  .side-count { position: absolute; margin: -25px 0 0 24px; min-width: 15px; padding: 1px 4px; font-size: 8px; }
  .app-top { height: 61px; padding: 0 16px; }
  .page { padding: 27px 16px 35px; }
  .page-heading { align-items: flex-start; flex-direction: column; gap: 13px; margin-bottom: 20px; }
  .card { padding: 17px; }
  .form-grid { grid-template-columns: 1fr; }
  .field.full { grid-column: auto; }
  .dashboard-grid,.profile-grid,.invite-layout,.admin-grid { grid-template-columns: 1fr; }
  .metric-grid { gap: 8px; }
  .metric { padding: 13px; }
  .metric strong { font-size: 22px; }
  .people-grid { gap: 10px; }
  .person-photo { height: 180px; }
  .person-body { padding: 11px; }
  .person-title { display: block; }
  .person-title .status-chip { margin-top: 7px; }
  .person-desc { min-height: 70px; }
  .person-card .btn { min-height: 39px; padding: 0 8px; font-size: 10px; }
  .catalog-toolbar { gap: 8px; padding: 11px; }
  .filter { min-width: calc(50% - 8px); }
  .filter:first-child { flex-basis: 100%; }
  .chat-shell { height: calc(100dvh - 235px); min-height: 380px; margin: 0 -5px; }
  .chat-head { padding: 12px; }
  .chat-head .btn { padding: 0 8px; font-size: 10px; }
  .message-list { padding: 13px; }
  .message { max-width: 86%; }
  .row-actions { flex-direction: column; }
  .row-actions .btn { min-height: 30px; }
}
@media (max-width: 390px) {
  .people-grid { grid-template-columns: 1fr; }
  .person-photo { height: 240px; }
  .row-actions { flex-direction: row; }
}

.beta-pill { display:inline-flex; align-items:center; min-height:30px; padding:0 10px; border-radius:999px; color:#46634f; background:#e4eee6; font-size:11px; font-weight:700; white-space:nowrap; }
.body-copy { color:#525b53; font-size:15px; line-height:1.85; }
.philosophy-ack { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:16px; }
.philosophy-ack p { margin:5px 0 0; }
.article-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.article-card { display:flex; min-height:230px; flex-direction:column; padding:23px; border:1px solid var(--line); border-radius:14px; color:var(--ink); background:white; text-decoration:none; transition:transform .18s,box-shadow .18s; }
.article-card:hover { transform:translateY(-2px); box-shadow:var(--shadow); }
.article-card h2 { margin:12px 0 8px; font-size:20px; line-height:1.3; }
.article-card p { color:var(--muted); font-size:13px; line-height:1.65; }
.article-date { margin-top:auto; color:var(--green); font-size:11px; font-weight:700; }
.article-image,.article-preview { width:100%; max-height:420px; margin:20px 0; border-radius:13px; object-fit:cover; }
.article-preview { max-width:460px; max-height:260px; }
.back-link { display:inline-flex; margin:0 0 20px; color:var(--green); font-weight:700; text-decoration:none; }
.completion-box { margin:0 0 22px; padding:15px 17px; border-radius:11px; background:#f3f5f1; }
.completion-line { display:flex; justify-content:space-between; align-items:center; font-size:13px; }
.completion-line b { color:var(--green); font-size:18px; }
.completion-track { height:7px; overflow:hidden; margin:10px 0 6px; border-radius:99px; background:#dfe5dc; }
.completion-track span { display:block; height:100%; border-radius:inherit; background:var(--green); transition:width .2s; }
.completion-box p { margin:0; }
.choice-field { min-width:0; margin:0; padding:15px; border:1px solid var(--line); border-radius:10px; }
.choice-field legend { padding:0 5px; color:#60675f; font-size:12px; font-weight:700; }
.choice-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.choice { display:flex; min-width:0; align-items:flex-start; gap:8px; padding:9px 10px; border:1px solid #e4e6df; border-radius:8px; background:white; color:#424a43; font-size:12px; line-height:1.4; cursor:pointer; }
.choice > span { min-width:0; flex:1 1 auto; overflow-wrap:break-word; }
.choice input { flex:0 0 16px; width:16px; height:16px; margin:2px 0 0; padding:0; border:0; box-shadow:none; accent-color:var(--green); }
.area-search { width:100%; margin:8px 0; padding:10px 12px; border:1px solid #dfe1d9; border-radius:8px; }
.area-choice-list { display:grid; max-height:240px; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; overflow:auto; padding:2px; }
.area-choice[hidden] { display:none; }
.interest-picker { padding:18px; }
.interest-intro { margin:0 0 14px; line-height:1.5; }
.interest-selected-panel { padding:13px; border:1px solid #dce7dd; border-radius:11px; background:#f5f8f4; }
.interest-selected-head { display:flex; align-items:center; justify-content:space-between; gap:10px; color:#3c5142; font-size:12px; }
.interest-selected-head strong { font-size:13px; }
.interest-selected-head .muted { text-align:right; }
.interest-selected-list { display:flex; flex-wrap:wrap; gap:7px; }
.interest-selected-chip { display:inline-flex; min-height:32px; align-items:center; gap:8px; padding:0 9px 0 11px; border:1px solid #cddbcf; border-radius:999px; background:white; color:#31594a; font-size:12px; }
.interest-selected-chip span:last-child { color:#6b8070; font-size:16px; line-height:1; }
.interest-selected-chip:hover { border-color:#8aa38f; background:#edf4ed; }
.interest-empty { margin:9px 0 0; }
.interest-search-label { display:block; margin:17px 0 4px; color:#59645b; font-size:12px; font-weight:700; }
.interest-search { margin:0 0 12px; }
.interest-groups { display:grid; gap:8px; }
.interest-group { min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:10px; background:white; }
.interest-group > summary { display:flex; min-height:46px; align-items:center; justify-content:space-between; gap:12px; padding:0 14px; color:#38473c; font-size:13px; font-weight:700; cursor:pointer; list-style:none; }
.interest-group > summary::-webkit-details-marker { display:none; }
.interest-group > summary::after { content:'+'; margin-left:4px; color:#718175; font-size:18px; font-weight:400; }
.interest-group[open] > summary::after { content:'−'; }
.interest-group-count { margin-left:auto; color:#7a827a; font-size:11px; font-weight:500; }
.interest-options { display:flex; flex-wrap:wrap; gap:8px; padding:0 12px 12px; }
.interest-option { position:relative; display:inline-flex; min-height:38px; align-items:center; gap:8px; padding:0 11px; border:1px solid #e3e7df; border-radius:999px; background:#fbfcfa; color:#4e574f; font-size:12px; line-height:1.3; cursor:pointer; transition:background .16s,border-color .16s,color .16s; }
.interest-option:hover { border-color:#afc1b2; background:#f1f6f1; }
.interest-option input { position:absolute; width:1px; height:1px; overflow:hidden; padding:0; border:0; background:transparent; opacity:0; clip:rect(0,0,0,0); white-space:nowrap; }
.interest-option:focus-within { outline:3px solid #b9cbbb; outline-offset:2px; }
.interest-option.is-selected { border-color:#77947c; background:#eaf2eb; color:#31594a; font-weight:700; }
.interest-check { display:none; color:#31594a; font-size:12px; }
.interest-option.is-selected .interest-check { display:inline; }
.interest-option[hidden],.interest-group[hidden],[data-interest-empty][hidden],[data-interest-no-results][hidden],[data-interest-remove-hint][hidden] { display:none; }
.interest-no-results { margin:4px 0 0; padding:12px; text-align:center; }
.slot-cooldowns { margin-top:14px; }
.compatibility { display:flex; align-items:center; justify-content:space-between; margin:8px 0; padding:8px 10px; border-radius:8px; color:#4d6654; background:#eff4ef; font-size:11px; }
.compatibility strong { font:700 15px Manrope; }
.chat-tabs { display:flex; gap:8px; overflow:auto; margin:0 0 12px; padding-bottom:3px; }
.chat-tab { display:flex; min-width:140px; align-items:center; gap:8px; padding:8px 11px; border:1px solid var(--line); border-radius:10px; background:white; text-align:left; cursor:pointer; }
.chat-tab.active { border-color:#91a997; background:#eff4ef; }
.chat-tab > span:last-child { font-size:12px; font-weight:700; }
.chat-tab small { display:block; margin-top:2px; color:var(--muted); font-size:10px; font-weight:400; }
.chart-wrap { overflow:hidden; }
.chart-wrap svg { display:block; width:100%; min-width:480px; height:auto; }
.chart-line { fill:none; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.chart-reg { stroke:#4c7559; }.chart-invite { stroke:#d29a65; }.chart-chat { stroke:#698ea1; }
.chart-legend { display:flex; gap:18px; padding:8px 4px; color:var(--muted); font-size:11px; }
.chart-legend span::before { display:inline-block; width:9px; height:9px; margin-right:6px; border-radius:50%; content:''; background:currentColor; }
.chart-legend .reg { color:#4c7559; }.chart-legend .invite { color:#d29a65; }.chart-legend .conv { color:#698ea1; }
.chart-dates { display:flex; justify-content:space-between; color:var(--muted); font-size:10px; }
.analytics-metrics { margin:14px 0; grid-template-columns:repeat(5,minmax(0,1fr)); }
.analytics-metrics .metric strong { font-size:21px; }
.interest-admin { display:flex; min-width:0; align-items:center; justify-content:space-between; gap:8px; padding:10px; border:1px solid var(--line); border-radius:9px; background:white; }
.test-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:14px 0; }
.test-card { display:flex; flex-direction:column; }
.test-card h2 { margin:10px 0; font-size:21px; }
.test-card .btn { margin-top:auto; }
.test-result { margin:12px 0; padding:13px; border-radius:9px; background:#f4f5f1; font-size:12px; line-height:1.6; }
.test-result p { margin:6px 0 0; }
.quiz-question h3 { margin-top:0; }
.quiz-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.quiz-option { display:flex; align-items:flex-start; gap:9px; padding:11px; border:1px solid var(--line); border-radius:8px; background:white; font-size:12px; line-height:1.45; cursor:pointer; }
.quiz-option input { accent-color:var(--green); }
.consent-card { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.consent-card p { margin:5px 0 0; }
.danger-zone { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:20px; }
.danger-zone p { margin:5px 0 0; }
.switch { display:flex; align-items:center; gap:8px; white-space:nowrap; font-size:12px; }
.switch input { width:18px; height:18px; accent-color:var(--green); }
@media (max-width:940px) { .article-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .analytics-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:680px) {
  .beta-pill { min-height:26px; padding:0 7px; font-size:9px; }
  .topbar .nav-actions > a.btn-quiet:first-of-type { display:none; }
  .article-grid,.test-grid { grid-template-columns:1fr; }
  .article-card { min-height:190px; padding:18px; }
  .philosophy-ack,.consent-card,.danger-zone { align-items:flex-start; flex-direction:column; }
  .choice-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .area-choice-list { grid-template-columns:1fr; }
  .chat-tab { min-width:122px; }
  .analytics-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .analytics-metrics .metric strong { font-size:18px; }
  .quiz-options { grid-template-columns:1fr; }
  #nav-links { justify-content:flex-start; overflow-x:auto; }
  .side-link { flex:0 0 72px; }
}

.support-layout { display:grid; grid-template-columns:minmax(230px, .72fr) minmax(0, 1.5fr); gap:14px; align-items:stretch; }
.support-inbox,.support-conversation,.support-new,.support-admin-detail { min-width:0; }
.support-thread-list,.support-queue { display:flex; flex-direction:column; gap:7px; max-height:520px; overflow:auto; }
.support-thread-link,.support-queue-item { display:flex; width:100%; flex-direction:column; align-items:flex-start; gap:5px; padding:12px; text-align:left; color:var(--ink); background:white; border:1px solid var(--line); border-radius:11px; cursor:pointer; }
.support-thread-link { flex-direction:row; align-items:center; justify-content:space-between; }
.support-thread-link span:first-child { display:flex; flex-direction:column; min-width:0; gap:4px; }
.support-thread-link small,.support-queue-item small,.support-queue-item>span:not(.support-queue-title) { color:var(--muted); font-size:11px; }
.support-thread-link.active,.support-queue-item.active { border-color:#9ebdaa; background:#f4f8f4; }
.support-conversation { display:flex; flex-direction:column; min-height:440px; }
.support-message-list { flex:1; min-height:180px; max-height:480px; overflow:auto; display:flex; flex-direction:column; gap:10px; padding:14px 3px; }
.support-message { max-width:min(88%, 620px); padding:11px 13px; border:1px solid var(--line); border-radius:13px 13px 13px 4px; background:#fbfbf8; font-size:13px; line-height:1.55; overflow-wrap:anywhere; }
.support-message.mine { align-self:flex-end; background:#edf4ee; border-radius:13px 13px 4px 13px; }
.support-message.internal { background:#fff8e8; border-color:#f1dfb3; }
.support-message-meta { display:flex; align-items:center; flex-wrap:wrap; gap:7px; color:var(--muted); font-size:10px; }
.support-message-meta strong { color:var(--ink); font-size:11px; }
.support-message p { margin:7px 0 0; white-space:normal; }
.support-files { display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }
.support-files a { display:inline-flex; align-items:center; gap:5px; padding:6px 8px; border:1px solid var(--line); border-radius:8px; color:var(--green); background:white; font-size:11px; text-decoration:none; }
.support-files small { color:var(--muted); }
.support-compose { display:flex; flex-direction:column; gap:9px; padding-top:12px; border-top:1px solid var(--line); }
.support-compose textarea { width:100%; min-height:74px; max-height:180px; padding:11px 12px; resize:vertical; border:1px solid var(--line); border-radius:10px; font:inherit; outline-color:var(--green); }
.support-compose-bottom { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:9px; }
.support-files-input { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; clip-path:inset(50%); }
.support-files-input:focus-visible+.support-file-name { outline:2px solid var(--green); }
.file-button { display:inline-flex; align-items:center; gap:6px; padding:8px 10px; border:1px solid var(--line); border-radius:9px; color:var(--green); font-size:12px; font-weight:700; cursor:pointer; }
.file-button:focus-within { outline:2px solid #9ebdaa; outline-offset:2px; }
.support-admin-grid { display:grid; grid-template-columns:minmax(280px,.82fr) minmax(0,1.4fr); align-items:start; gap:14px; }
.support-queue-item { padding:12px; }
.support-queue-item>span,.support-queue-item p { margin:0; font-size:12px; }
.support-queue-item p { max-width:100%; overflow:hidden; color:var(--muted); text-overflow:ellipsis; white-space:nowrap; }
.support-queue-title { display:flex; width:100%; justify-content:space-between; align-items:center; gap:8px; }
.support-admin-status { display:grid; grid-template-columns:1fr 1fr auto; align-items:end; gap:8px; padding:12px 0; border-bottom:1px solid var(--line); }
.support-admin-status .field { display:grid; gap:6px; }
.support-admin-status .field span { font-size:11px; font-weight:700; }
.support-admin-status select { min-width:0; min-height:38px; padding:7px; border:1px solid var(--line); border-radius:8px; background:white; }
@media (max-width:940px) { .support-admin-grid { grid-template-columns:1fr; } .support-queue { max-height:340px; } }
@media (max-width:680px) { .support-layout { grid-template-columns:1fr; } .support-conversation { min-height:400px; } .support-message { max-width:96%; } .support-admin-status { grid-template-columns:1fr; } .support-admin-status .btn { justify-self:start; } }
.chat-shell { overflow:visible; }
.chat-head-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }
.message-audio { min-width:220px; }
.message audio { display:block; width:min(280px,70vw); height:38px; }
.message-voice { min-width:min(240px,75%); }
.voice-meta { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:6px; color:var(--muted); font-size:10px; }
.voice-meta .btn { min-height:28px; padding:4px 8px; }
.chat-sticker { display:block; padding:4px 12px 2px; font-size:54px; line-height:1.2; }
.chat-compose-tools { display:flex; align-items:center; gap:7px; flex-wrap:wrap; padding:10px 12px 0; border-top:1px solid var(--line); }
.tool-button { display:inline-flex; align-items:center; gap:6px; min-height:34px; padding:6px 9px; border:1px solid var(--line); border-radius:9px; color:var(--ink); background:white; font:600 12px Manrope,sans-serif; cursor:pointer; }
.tool-button:hover { border-color:#9ebdaa; background:#f6f8f5; }
.emoji-picker,.sticker-picker { max-width:100%; padding:12px; border:1px solid var(--line); border-radius:12px; background:#fff; box-shadow:0 10px 28px #22352212; }
.emoji-picker input { width:100%; min-height:38px; padding:8px 10px; border:1px solid var(--line); border-radius:8px; font:inherit; }
.emoji-grid { display:grid; grid-template-columns:repeat(9,minmax(30px,1fr)); gap:4px; max-height:180px; margin-top:8px; overflow:auto; }
.emoji-grid button,.sticker-grid button { min-width:32px; min-height:34px; border:0; border-radius:8px; background:transparent; font-size:21px; cursor:pointer; }
.emoji-grid button:hover,.sticker-grid button:hover { background:#f1f5ef; }
.emoji-grid button[hidden] { display:none; }
.sticker-picker { max-height:280px; overflow:auto; }
.sticker-set+.sticker-set { margin-top:12px; padding-top:11px; border-top:1px solid var(--line); }
.sticker-set h4 { margin:0 0 7px; font-size:12px; }
.sticker-grid { display:flex; flex-wrap:wrap; gap:4px; }
.sticker-grid button { min-width:42px; min-height:42px; background:#f8faf7; font-size:24px; }
.founders-locked { margin:12px 2px 2px; padding:10px; border-radius:9px; background:#faf7ff; }
.voice-recording-state,.voice-preview { display:flex; align-items:center; flex-wrap:wrap; gap:10px; padding:12px; border-top:1px solid var(--line); }
.voice-recording-state strong { color:#7a3937; }
.voice-recording-state time { min-width:42px; font-variant-numeric:tabular-nums; }
.recording-dot { width:9px; height:9px; border-radius:50%; background:#c65751; box-shadow:0 0 0 5px #c657511c; animation:recording-pulse 1.2s ease-in-out infinite; }
.voice-preview audio { flex:1 1 220px; min-width:180px; height:38px; }
@keyframes recording-pulse { 50% { box-shadow:0 0 0 9px #c657510a; opacity:.65; } }
@media (max-width:680px) {
  .chat-head { align-items:flex-start; flex-direction:column; gap:10px; }
  .chat-head-actions { width:100%; justify-content:flex-start; }
  .chat-head-actions .btn { min-height:34px; padding:7px 9px; font-size:11px; }
  .emoji-grid { grid-template-columns:repeat(7,minmax(30px,1fr)); }
  .voice-recording-state,.voice-preview { align-items:flex-start; }
  .voice-recording-state .muted { width:100%; }
}
.subscription-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; align-items:stretch; margin:16px 0; }
.subscription-card { display:flex; flex-direction:column; gap:12px; min-width:0; }
.subscription-card.featured { border-color:#d5c889; background:linear-gradient(150deg,#fffefa,#fbf8eb); }
.tier-mark { align-self:flex-start; padding:6px 10px; border-radius:999px; color:#51451c; background:#f4edc7; font:800 11px Manrope,sans-serif; letter-spacing:.08em; }
.tier-diamond { color:#3e3456; background:#ece6f5; }
.tier-ultimate { color:#553a67; background:#f0e6f8; }
.subscription-price { font:800 25px Manrope,sans-serif; }
.subscription-price small { display:block; margin-top:3px; color:var(--muted); font:500 11px Manrope,sans-serif; }
.subscription-card ul { display:grid; gap:8px; margin:0 0 8px; padding-left:18px; color:#555c53; font-size:12px; line-height:1.5; }
.subscription-card .btn { margin-top:auto; }
.gift-inventory { display:grid; gap:6px; }
.gift-item { display:flex; align-items:center; gap:10px; padding:10px; border:1px solid var(--line); border-radius:10px; background:#fff; }
.gift-icon { display:grid; width:34px; height:34px; place-items:center; border-radius:10px; background:#fbf5dc; font-size:18px; }
.gift-item>div { display:flex; flex:1; flex-direction:column; gap:3px; }
.gift-item small { color:var(--muted); font-size:10px; }
.boost-offer-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:15px; }
.boost-offer { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px; border:1px solid var(--line); border-radius:10px; }
.boost-offer>div { display:grid; gap:3px; font-size:12px; }
.boost-offer small { color:var(--muted); font-size:10px; }
.store-secondary-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:14px; }
.referral-link-box { display:flex; align-items:center; gap:8px; padding:9px; border:1px solid var(--line); border-radius:9px; background:#f8faf7; }
.referral-link-box code { flex:1; min-width:0; overflow:hidden; color:#596155; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.referral-stats { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.referral-stats span { display:grid; gap:2px; padding:8px 10px; border-radius:9px; background:#f5f6f2; color:var(--muted); font-size:10px; }
.referral-stats strong { color:var(--ink); font-size:16px; }
.gift-setting { margin:4px 0; align-items:flex-start; }
.trial-offer { margin-top:14px; border-color:#dcc9e8; background:#fbf8fd; }
.trial-offer h3 { margin:4px 0 8px; }
.trial-offer>p { max-width:760px; color:var(--muted); font-size:12px; line-height:1.6; }
.trial-offer form { display:grid; gap:12px; margin-top:14px; }
.inline-form { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.inline-form input { min-height:40px; padding:8px 10px; border:1px solid var(--line); border-radius:9px; }
.store-admin-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:12px; }
.store-grant-form { margin-bottom:14px; }
.promo-status-list { display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.promo-status-list .tag { display:inline-flex; align-items:center; gap:5px; }
.promo-status-list .btn { min-height:23px; padding:2px 6px; font-size:9px; }
.form-alert textarea[readonly] { display:block; width:100%; min-height:100px; margin:8px 0; font:11px monospace; }
.gift-person-button { margin-top:7px; }
.seo-admin-grid { display:grid; grid-template-columns:minmax(250px,.7fr) minmax(0,1.5fr); gap:13px; align-items:start; }
.seo-admin-list { display:grid; gap:7px; max-height:76vh; overflow:auto; }
.seo-admin-link { display:grid; gap:4px; width:100%; padding:11px; border:1px solid var(--line); border-radius:10px; text-align:left; background:white; color:var(--ink); cursor:pointer; }
.seo-admin-link.active { border-color:#9ebdaa; background:#f2f6f1; }
.seo-admin-link strong { font-size:12px; line-height:1.45; }
.seo-admin-link small { color:var(--muted); font-size:10px; }
.seo-editor textarea { min-height:70px; resize:vertical; }
.seo-editor .seo-json-editor { min-height:390px; font:12px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace; }
.notification-preference-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.notification-preference-grid .checkline { margin:0; }
@media(max-width:900px){.subscription-grid{grid-template-columns:1fr 1fr}.store-admin-grid{grid-template-columns:1fr}}
@media(max-width:900px){.seo-admin-grid{grid-template-columns:1fr}.seo-admin-list{max-height:340px}}
@media(max-width:680px){.subscription-grid,.store-secondary-grid,.boost-offer-grid,.notification-preference-grid{grid-template-columns:1fr}.referral-link-box{align-items:stretch;flex-direction:column}.referral-link-box code{white-space:normal;overflow-wrap:anywhere}.store-page .page-heading{align-items:flex-start;flex-direction:column}}
.compatibility-weight-form { grid-template-columns:repeat(4,minmax(0,1fr)); }
.compatibility-weight-form input { min-height:40px; padding:8px 10px; border:1px solid var(--line); border-radius:9px; }
.compatibility-debug { margin-top:16px; padding:15px; border:1px solid var(--line); border-radius:12px; background:#f8faf7; }
.compatibility-debug-score { color:var(--green); font:800 36px Manrope,sans-serif; }
.compatibility-factor-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin-top:12px; }
.compatibility-factor { display:grid; grid-template-columns:1fr auto; gap:3px 8px; padding:10px; border:1px solid var(--line); border-radius:9px; background:white; font-size:12px; }
.compatibility-factor small { grid-column:1/-1; color:var(--muted); }
@media (max-width:680px) { .compatibility-weight-form,.compatibility-factor-list { grid-template-columns:1fr 1fr; } }
.sticker-admin-list { display:grid; gap:9px; margin-top:14px; }
.sticker-admin-row { display:grid; grid-template-columns:48px minmax(120px,1fr) minmax(100px,.7fr) 90px auto auto; gap:8px; align-items:end; padding:10px; border:1px solid var(--line); border-radius:11px; background:#fbfcfa; }
.sticker-admin-row .field { margin:0; }
.sticker-admin-row .field span { font-size:10px; }
.sticker-admin-emoji { align-self:center; font-size:28px; text-align:center; }
@media(max-width:800px){.sticker-admin-row{grid-template-columns:40px 1fr 1fr}.sticker-admin-row .checkline{grid-column:2}.sticker-admin-row button{grid-column:3}}