:root {
  --ink: #102218;
  --muted: #6d7d73;
  --line: #dfe7e1;
  --paper: #ffffff;
  --surface: #f5f8f4;
  --green: #176b3a;
  --green-dark: #0e4d29;
  --lime: #c9f05a;
  --lime-soft: #eff9d3;
  --blue: #2667d8;
  --shadow: 0 18px 60px rgba(20, 55, 33, .10);
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--paper); color: var(--ink); }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button, select { cursor: pointer; }
button:disabled { cursor: wait; opacity: .68; }
.shell { width: min(1160px, calc(100% - 40px)); margin: 0 auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.site-header { position: sticky; top: 0; z-index: 50; height: 72px; background: rgba(255,255,255,.94); border-bottom: 1px solid rgba(16,34,24,.08); backdrop-filter: blur(16px); }
.header-inner { height: 100%; display: flex; align-items: center; gap: 42px; }
.brand { display: inline-flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.brand-mark { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--green); box-shadow: inset -5px -5px 0 rgba(0,0,0,.08); }
.brand-mark > span { width: 14px; height: 14px; border-radius: 50%; border: 3px solid var(--lime); position: relative; }
.brand-mark > span::before, .brand-mark > span::after { content: ""; position: absolute; background: var(--lime); width: 4px; height: 7px; border-radius: 3px; top: -8px; left: 2px; transform: rotate(45deg); }
.brand-mark > span::after { top: 9px; transform: rotate(-45deg); }
.brand-copy { display: grid; line-height: 1; gap: 3px; }
.brand-copy strong { font-size: 18px; letter-spacing: .14em; }
.brand-copy small { font-size: 10px; color: var(--muted); letter-spacing: .2em; }
.main-nav { display: flex; align-items: center; height: 100%; gap: 30px; }
.main-nav a { height: 100%; display: grid; place-items: center; color: #526259; font-size: 14px; position: relative; }
.main-nav a.active, .main-nav a:hover { color: var(--green); }
.main-nav a.active::after { content: ""; position: absolute; bottom: 0; height: 3px; left: 0; right: 0; background: var(--green); border-radius: 3px 3px 0 0; }
.account-actions { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.user-chip { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 650; }
.avatar, .mini-avatar { display: inline-grid; place-items: center; border-radius: 50%; color: var(--green-dark); background: var(--lime-soft); font-weight: 800; flex: 0 0 auto; }
.avatar { width: 34px; height: 34px; }
.avatar.large { width: 46px; height: 46px; font-size: 17px; }
.mini-avatar { width: 22px; height: 22px; font-size: 10px; margin-right: 6px; }
.text-button { background: none; border: 0; color: #56675d; padding: 7px 3px; }
.text-button:hover { color: var(--green); }
.as-link { font-size: 14px; }
.primary-button, .secondary-button { min-height: 46px; padding: 0 22px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; gap: 18px; border: 1px solid transparent; font-weight: 750; font-size: 14px; transition: transform .16s, box-shadow .16s, background .16s; }
.primary-button { color: white; background: var(--green); box-shadow: 0 9px 24px rgba(23,107,58,.2); }
.primary-button:hover { background: var(--green-dark); transform: translateY(-1px); box-shadow: 0 12px 26px rgba(23,107,58,.28); }
.secondary-button { border-color: #cdd8d0; background: white; color: #34463b; }
.secondary-button:hover { border-color: var(--green); color: var(--green); }
.primary-button.compact, .secondary-button.compact { min-height: 38px; padding: 0 16px; font-size: 13px; }
.primary-button.full, .secondary-button.full { width: 100%; }

.hero { min-height: 520px; overflow: hidden; color: white; background: radial-gradient(circle at 80% 20%, rgba(199,239,89,.12), transparent 22%), linear-gradient(112deg, #0c3d23 0%, #176039 52%, #0f4b2b 100%); position: relative; }
.hero::before { content: ""; position: absolute; inset: 0; opacity: .13; background-image: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px); background-size: 56px 56px; mask-image: linear-gradient(90deg, black, transparent 55%); }
.hero-grid { min-height: 520px; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 60px; position: relative; z-index: 1; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; letter-spacing: .18em; font-size: 11px; font-weight: 800; color: var(--lime); text-transform: uppercase; }
.eyebrow i { width: 21px; height: 2px; background: currentColor; }
.eyebrow.dark { color: var(--green); }
.hero h1 { font-size: clamp(43px, 5vw, 68px); line-height: 1.08; margin: 20px 0 20px; letter-spacing: -.045em; }
.hero h1 em { color: var(--lime); font-style: normal; }
.hero-copy > p { max-width: 570px; font-size: 17px; line-height: 1.8; color: rgba(255,255,255,.75); }
.hero-actions { display: flex; gap: 12px; margin-top: 28px; }
.hero .secondary-button { color: white; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.25); }
.trust-row { display: flex; gap: 24px; margin-top: 26px; font-size: 12px; color: rgba(255,255,255,.64); }
.trust-row b { color: var(--lime); margin-right: 5px; }
.hero-panel { height: 390px; position: relative; border: 1px solid rgba(255,255,255,.13); border-radius: 50% 50% 22px 22px; background: rgba(255,255,255,.035); transform: rotate(-2deg); }
.pitch-lines { position: absolute; inset: 26px; border: 1px solid rgba(255,255,255,.14); border-radius: 50% 50% 16px 16px; }
.pitch-lines::before { content: ""; position: absolute; width: 110px; height: 110px; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; left: calc(50% - 55px); top: calc(50% - 55px); }
.hero-ball { position: absolute; border-radius: 50%; background: var(--lime); box-shadow: inset -10px -12px 0 rgba(23,107,58,.22), 0 18px 40px rgba(0,0,0,.18); }
.ball-one { width: 52px; height: 52px; right: 14px; top: 38px; }
.ball-two { width: 22px; height: 22px; left: 30px; bottom: 35px; opacity: .7; }
.flow-card { position: absolute; width: 180px; padding: 18px; border-radius: 10px; display: grid; gap: 4px; color: var(--ink); background: rgba(255,255,255,.95); box-shadow: 0 18px 45px rgba(0,0,0,.18); transform: rotate(2deg); }
.flow-card span { font-size: 11px; font-weight: 900; color: var(--green); letter-spacing: .1em; }
.flow-card strong { font-size: 17px; }
.flow-card small { color: var(--muted); }
.flow-a { left: 18px; top: 45px; }
.flow-b { right: 8px; top: 155px; }
.flow-c { left: 75px; bottom: 24px; background: var(--lime); }

.category-strip { border-bottom: 1px solid var(--line); background: #fff; }
.category-grid { display: grid; grid-template-columns: repeat(5, 1fr); }
.category-tile { min-height: 116px; padding: 24px 22px; border-right: 1px solid var(--line); display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-content: center; transition: background .15s; }
.category-tile:first-child { border-left: 1px solid var(--line); }
.category-tile > span { grid-row: span 2; font-size: 25px; filter: grayscale(.2); }
.category-tile strong { font-size: 14px; }
.category-tile small { color: var(--muted); font-size: 11px; margin-top: 4px; }
.category-tile:hover, .category-tile.selected { background: var(--lime-soft); }

.community-section { padding: 70px 0 90px; }
.section-heading, .discussion-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 28px; }
.section-heading h2, .discussion-heading h2 { font-size: 32px; margin: 8px 0 0; letter-spacing: -.03em; }
.section-heading > p, .discussion-heading > span { color: var(--muted); font-size: 13px; }
.section-heading > p strong { color: var(--green); font-size: 20px; }
.filter-bar { min-height: 66px; padding: 10px; display: flex; gap: 8px; align-items: center; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); margin-bottom: 24px; }
.search-box { min-width: 250px; flex: 1; display: flex; align-items: center; gap: 8px; padding: 0 14px; background: white; border: 1px solid var(--line); border-radius: 6px; }
.search-box span { font-size: 22px; color: var(--muted); transform: rotate(-12deg); }
.search-box input { width: 100%; height: 42px; border: 0; outline: 0; color: var(--ink); }
.filter-bar select, .moderation-form select, .compose-card select { height: 44px; border: 1px solid var(--line); border-radius: 6px; padding: 0 34px 0 12px; background: white; color: #38493f; }
.filter-submit { height: 44px; border: 0; border-radius: 6px; padding: 0 18px; color: white; background: var(--green); font-weight: 700; }
.clear-filter { font-size: 12px; color: var(--muted); padding: 0 8px; }
.post-layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 28px; align-items: start; }
.post-list { display: grid; gap: 12px; }
.post-card { min-height: 172px; display: grid; grid-template-columns: 80px minmax(0, 1fr) 30px; gap: 20px; align-items: center; padding: 24px; border: 1px solid var(--line); border-radius: 10px; background: white; transition: transform .16s, box-shadow .16s, border-color .16s; position: relative; overflow: hidden; }
.post-card:hover { transform: translateY(-2px); border-color: #b9c9bd; box-shadow: var(--shadow); }
.post-card.pinned::before { content: ""; position: absolute; width: 4px; inset: 0 auto 0 0; background: var(--lime); }
.vote-box { width: 70px; height: 72px; border-radius: 8px; display: grid; place-items: center; align-content: center; background: var(--surface); border: 1px solid #e4ebe6; }
.vote-box strong { color: var(--green); font-size: 24px; line-height: 1; }
.vote-box span { margin-top: 6px; color: var(--muted); font-size: 10px; }
.post-meta { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.category-badge, .pin-badge, .status-badge { min-height: 24px; padding: 0 9px; border-radius: 999px; display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 750; }
.category-badge { background: var(--surface); color: #53645a; }
.pin-badge { background: var(--lime); color: var(--green-dark); }
.status-badge { background: #f0f3f1; color: #5c6b62; }
.status-badge i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-badge.blue { color: #235eb8; background: #edf4ff; }
.status-badge.amber { color: #9b620c; background: #fff4da; }
.status-badge.green { color: #176b3a; background: #e9f8ed; }
.status-badge.muted { color: #727a75; background: #ecefed; }
.post-content h3 { margin: 10px 0 8px; font-size: 19px; line-height: 1.35; }
.post-content h3 a:hover { color: var(--green); }
.post-content > p { margin: 0; color: var(--muted); line-height: 1.65; font-size: 13px; }
.post-footer { display: flex; gap: 18px; align-items: center; margin-top: 14px; color: #89948d; font-size: 10px; }
.post-footer > span { display: inline-flex; align-items: center; }
.card-arrow { color: #90a098; font-size: 20px; }
.sidebar { position: sticky; top: 96px; display: grid; gap: 16px; }
.sidebar-card { padding: 24px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.sidebar-card h3 { margin: 8px 0 20px; font-size: 18px; }
.process-card ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.process-card li { display: flex; gap: 12px; }
.process-card li > b { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: var(--green); background: var(--lime); font-size: 11px; }
.process-card li div { display: grid; gap: 3px; }
.process-card li strong { font-size: 13px; }
.process-card li span { color: var(--muted); font-size: 11px; }
.status-guide { background: white; }
.status-guide h3 { margin-top: 0; }
.status-guide a { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-top: 1px solid #edf0ee; color: var(--muted); font-size: 11px; }
.empty-state, .empty-replies { padding: 60px 25px; border: 1px dashed #c9d5cc; border-radius: 10px; text-align: center; background: var(--surface); }
.empty-state > span { font-size: 32px; }
.empty-state h3 { margin: 12px 0 5px; }
.empty-state p { color: var(--muted); margin: 0 0 18px; }
.pagination { display: flex; justify-content: center; gap: 6px; margin-top: 18px; }
.pagination a { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 5px; font-size: 12px; }
.pagination a.active { color: white; background: var(--green); border-color: var(--green); }

.page-band { height: 72px; display: flex; align-items: center; background: var(--surface); border-bottom: 1px solid var(--line); }
.page-band .shell { display: flex; align-items: center; }
.page-band a { color: var(--muted); font-size: 12px; }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 28px; padding-top: 44px; align-items: start; }
.detail-card { padding: 38px 42px; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 40px rgba(20,55,33,.055); }
.detail-card h1 { font-size: clamp(28px, 4vw, 42px); line-height: 1.25; margin: 18px 0 22px; letter-spacing: -.035em; }
.author-line { display: flex; align-items: center; gap: 12px; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.author-line div { display: grid; gap: 3px; }
.author-line strong { font-size: 13px; }
.author-line span { color: var(--muted); font-size: 11px; }
.post-body { white-space: pre-wrap; font-size: 16px; line-height: 2; padding: 32px 0; min-height: 150px; }
.detail-actions { display: flex; align-items: center; gap: 18px; padding-top: 22px; border-top: 1px solid var(--line); }
.support-button { min-height: 46px; border-radius: 6px; padding: 0 8px 0 16px; display: inline-flex; align-items: center; gap: 8px; color: var(--green); background: var(--lime-soft); border: 1px solid #d9ed9d; }
.support-button.active { color: white; background: var(--green); border-color: var(--green); }
.support-button b { font-size: 13px; }
.support-button em { min-width: 30px; padding: 5px 8px; border-radius: 4px; font-style: normal; background: rgba(255,255,255,.65); color: var(--green-dark); font-weight: 800; }
.reply-total { color: var(--muted); font-size: 12px; }
.detail-aside { position: sticky; top: 96px; display: grid; gap: 16px; }
.status-timeline { display: grid; }
.status-timeline > div { display: grid; grid-template-columns: 18px 1fr; gap: 10px; min-height: 62px; position: relative; color: #a0aaa3; }
.status-timeline > div::before { content: ""; position: absolute; left: 5px; top: 13px; width: 1px; height: 49px; background: #d9dfdb; }
.status-timeline > div:last-child::before { display: none; }
.status-timeline i { width: 11px; height: 11px; margin-top: 3px; border-radius: 50%; background: #cbd3ce; z-index: 1; }
.status-timeline .reached { color: var(--ink); }
.status-timeline .reached i { background: var(--green); box-shadow: 0 0 0 4px #dff0e5; }
.status-timeline span { display: grid; gap: 3px; }
.status-timeline strong { font-size: 12px; }
.status-timeline small { color: var(--muted); font-size: 10px; }
.moderation-form { display: grid; gap: 14px; background: white; }
.moderation-form h3 { margin: 0; }
.moderation-form label { display: grid; gap: 7px; font-size: 11px; color: var(--muted); }
.moderation-form .check-row { display: flex; align-items: center; }
.discussion-section { padding: 56px 0 90px; max-width: 840px; margin-left: calc((100vw - min(1160px, calc(100% - 40px))) / 2); }
.replies { display: grid; gap: 10px; }
.reply-card { display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding: 22px; border: 1px solid var(--line); border-radius: 8px; }
.reply-card header { display: flex; gap: 10px; align-items: center; }
.reply-card header strong { font-size: 13px; }
.reply-card header span { color: #95a199; font-size: 10px; }
.reply-card p { margin: 10px 0 0; white-space: pre-wrap; color: #405047; font-size: 14px; line-height: 1.75; }
.reply-form { display: grid; grid-template-columns: 40px 1fr; gap: 14px; margin-top: 22px; padding: 24px; background: var(--surface); border-radius: 10px; }
.reply-form label { font-size: 13px; font-weight: 750; }
.reply-form textarea, .compose-card textarea, .compose-card input, .auth-form input { width: 100%; margin-top: 8px; border: 1px solid #cfdbd2; border-radius: 6px; background: white; padding: 13px 14px; outline: none; color: var(--ink); resize: vertical; }
.reply-form textarea:focus, .compose-card textarea:focus, .compose-card input:focus, .auth-form input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(23,107,58,.1); }
.form-row, .compose-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; }
.form-message { min-height: 18px; margin: 0; font-size: 11px; color: var(--muted); }
.form-message.error { color: #b42318; }
.form-message.success { color: var(--green); }
.login-prompt, .closed-notice { margin-top: 20px; padding: 22px 24px; border-radius: 8px; background: var(--surface); display: flex; align-items: center; justify-content: space-between; }
.login-prompt div { display: grid; gap: 4px; }
.login-prompt span, .closed-notice { color: var(--muted); font-size: 12px; }

.compose-layout { max-width: 860px; padding: 55px 0 90px; }
.compose-heading { margin-bottom: 28px; }
.compose-heading h1 { font-size: 38px; margin: 10px 0; }
.compose-heading p { color: var(--muted); }
.compose-card { display: grid; gap: 24px; padding: 36px; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.compose-card > label { display: grid; gap: 7px; font-size: 13px; font-weight: 700; }
.compose-card > label small { color: var(--muted); font-size: 10px; font-weight: 400; }
.compose-card input, .compose-card textarea { margin-top: 0; }
.compose-footer { border-top: 1px solid var(--line); padding-top: 22px; }
.compose-footer > div { display: flex; gap: 10px; }

.auth-page { min-height: calc(100vh - 72px); display: grid; grid-template-columns: .92fr 1.08fr; }
.auth-visual { min-height: 760px; display: grid; place-items: center; color: white; background: radial-gradient(circle at 30% 78%, rgba(201,240,90,.18), transparent 24%), linear-gradient(145deg, #0b3e23, #17643a); position: relative; overflow: hidden; }
.auth-visual::before { content: ""; position: absolute; width: 450px; height: 450px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; right: -200px; top: -100px; box-shadow: 0 0 0 80px rgba(255,255,255,.025), 0 0 0 160px rgba(255,255,255,.018); }
.auth-visual-inner { width: min(480px, calc(100% - 70px)); position: relative; }
.auth-visual h1 { font-size: 54px; letter-spacing: -.04em; line-height: 1.15; margin: 22px 0; }
.auth-visual-inner > p { color: rgba(255,255,255,.72); line-height: 1.8; }
.quote-card { margin-top: 60px; padding: 25px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: 10px; }
.quote-card > span { color: var(--lime); font-size: 30px; line-height: .5; }
.quote-card p { margin: 4px 0 0; line-height: 1.75; color: rgba(255,255,255,.75); font-size: 13px; }
.auth-panel { display: grid; place-items: center; background: #fbfcfa; }
.auth-box { width: min(440px, calc(100% - 48px)); padding: 48px 0; }
.brand.standalone { margin-bottom: 38px; }
.auth-box h2 { font-size: 30px; margin: 0 0 8px; }
.subtle { color: var(--muted); font-size: 12px; line-height: 1.6; }
.auth-tabs { display: grid; grid-template-columns: repeat(3, 1fr); margin: 28px 0 22px; border-bottom: 1px solid var(--line); }
.auth-tabs button { padding: 12px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font-weight: 700; }
.auth-tabs button.active { color: var(--green); border-bottom-color: var(--green); }
.auth-tabs button:disabled { cursor: not-allowed; color: #a3ada7; }
.auth-form { display: none; gap: 16px; }
.auth-form.active { display: grid; }
.auth-form label { display: grid; gap: 1px; font-size: 12px; font-weight: 700; }
.auth-form input { margin-top: 7px; height: 48px; }
.sms-code-row { display: grid; grid-template-columns: minmax(0, 1fr) 124px; gap: 8px; align-items: end; }
.sms-code-row .secondary-button { height: 48px; min-height: 48px; padding: 0 12px; }
.sms-enroll { border: 1px solid var(--line); border-radius: 7px; background: white; }
.sms-enroll summary { padding: 13px 14px; color: var(--green); cursor: pointer; font-size: 12px; font-weight: 700; }
.sms-enroll > div { padding: 0 14px 14px; display: grid; gap: 12px; }
.planned-login { margin-top: 24px; padding: 15px; border: 1px dashed #ccd7cf; border-radius: 7px; display: grid; color: #718078; font-size: 11px; text-align: center; }
.planned-login small { margin-top: 7px; color: #9aa49e; }
.legal { text-align: center; color: #9aa49e; font-size: 10px; }
.legal a { text-decoration: underline; }

.prose-page { max-width: 760px; padding: 60px 0 100px; }
.prose-page h1 { font-size: 40px; }
.prose-page h2 { margin-top: 35px; font-size: 20px; }
.prose-page p { color: #53635a; line-height: 1.9; }
.error-page { min-height: 620px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.error-page > span { color: var(--green); font-size: 72px; font-weight: 900; opacity: .16; }
.error-page h1 { margin: -15px 0 8px; font-size: 34px; }
.error-page p { color: var(--muted); }
.error-page small { color: #9aa59e; margin-bottom: 22px; }
.site-footer { color: rgba(255,255,255,.78); background: #0b2f1c; }
.footer-inner { min-height: 130px; display: flex; align-items: center; justify-content: space-between; }
.footer-inner strong { color: white; }
.footer-inner p { margin: 7px 0 0; font-size: 12px; }
.footer-links { display: flex; gap: 22px; font-size: 11px; }
.toast { position: fixed; left: 50%; bottom: 30px; z-index: 100; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; padding: 12px 18px; border-radius: 7px; color: white; background: #153b26; box-shadow: var(--shadow); font-size: 12px; transition: opacity .2s, transform .2s; }
.toast.visible { opacity: 1; transform: translate(-50%, 0); }
.toast[data-tone="error"] { background: #9f2f28; }

@media (max-width: 980px) {
  .main-nav { display: none; }
  .hero-grid { grid-template-columns: 1fr; padding: 70px 0; }
  .hero-panel { display: none; }
  .category-grid { overflow-x: auto; grid-template-columns: repeat(5, minmax(150px, 1fr)); }
  .post-layout, .detail-grid { grid-template-columns: 1fr; }
  .sidebar, .detail-aside { position: static; grid-template-columns: 1fr 1fr; }
  .discussion-section { max-width: none; margin-left: auto; }
  .auth-page { grid-template-columns: 1fr; }
  .auth-visual { min-height: 460px; }
}

@media (max-width: 680px) {
  .shell { width: min(100% - 24px, 1160px); }
  .site-header { height: 64px; }
  .header-inner { gap: 10px; }
  .brand-copy small, .user-chip, .account-actions .text-button { display: none; }
  .brand-mark { width: 34px; height: 34px; }
  .primary-button.compact { padding: 0 12px; }
  .hero, .hero-grid { min-height: 500px; }
  .hero-grid { padding: 58px 0; }
  .hero h1 { font-size: 42px; }
  .hero-copy > p { font-size: 15px; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .trust-row { gap: 10px; flex-wrap: wrap; }
  .category-grid { margin: 0; width: 100%; }
  .community-section { padding: 50px 0 70px; }
  .section-heading { align-items: start; }
  .section-heading h2 { font-size: 27px; }
  .filter-bar { align-items: stretch; flex-direction: column; }
  .search-box { min-width: 0; }
  .filter-bar select, .filter-submit { width: 100%; }
  .post-card { grid-template-columns: 52px 1fr; gap: 12px; padding: 18px 14px; }
  .vote-box { width: 50px; height: 60px; }
  .vote-box strong { font-size: 20px; }
  .card-arrow { display: none; }
  .post-content h3 { font-size: 16px; }
  .post-footer { gap: 9px; flex-wrap: wrap; }
  .sidebar, .detail-aside { grid-template-columns: 1fr; }
  .detail-grid { padding-top: 20px; }
  .detail-card { padding: 24px 20px; }
  .detail-card h1 { font-size: 28px; }
  .detail-actions { align-items: flex-start; flex-direction: column; }
  .discussion-section { padding: 40px 0 70px; }
  .discussion-heading { align-items: start; }
  .reply-card { padding: 18px 14px; }
  .reply-form { grid-template-columns: 1fr; padding: 18px 14px; }
  .login-prompt { align-items: stretch; flex-direction: column; gap: 14px; }
  .compose-layout { padding: 40px 0 70px; }
  .compose-card { padding: 22px 16px; }
  .compose-footer { align-items: stretch; flex-direction: column; }
  .compose-footer > div { display: grid; grid-template-columns: 1fr 1fr; }
  .auth-visual { min-height: 370px; }
  .auth-visual h1 { font-size: 38px; }
  .quote-card { display: none; }
  .auth-box { width: min(100% - 34px, 440px); }
  .sms-code-row { grid-template-columns: minmax(0, 1fr) 108px; }
  .footer-inner { padding: 28px 0; align-items: start; flex-direction: column; gap: 22px; }
}