:root {
  --bg: #f4f1ea;
  --bg-soft: #fbf8f2;
  --ink: #163028;
  --muted: #67746f;
  --line: #ddd2c3;
  --panel: rgba(255, 255, 255, 0.92);
  --accent: #0e7a67;
  --accent-2: #bd6d2b;
  --accent-3: #f2e7d8;
  --danger: #b93f2f;
  --success: #177245;
  --shadow: 0 22px 48px rgba(36, 31, 23, 0.12);
}

* { box-sizing: border-box; }
html { color-scheme: light; }
body {
  margin: 0;
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.75), transparent 38%),
    linear-gradient(180deg, #f6efe4 0%, #f4f1ea 40%, #f8f5f0 100%);
}

.page-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(14,122,103,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14,122,103,.05) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.35), transparent 70%);
}

a { color: inherit; text-decoration: none; }
main { width: min(1240px, calc(100% - 32px)); margin: 0 auto; padding: 28px 0 64px; position: relative; z-index: 1; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px clamp(16px, 4vw, 42px);
  background: rgba(251, 248, 242, 0.88);
  border-bottom: 1px solid rgba(122, 98, 72, 0.14);
  backdrop-filter: blur(20px);
}

.brand { display: flex; align-items: center; gap: 14px; min-width: 260px; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent), #11443b);
  color: #fff;
  font-weight: 800;
  letter-spacing: 1px;
}
.brand strong, .brand small { display: block; }
.brand strong { font-size: 18px; }
.brand small { color: var(--muted); margin-top: 3px; }

nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
nav a, .filters a, .phase-filters a {
  padding: 10px 13px;
  border-radius: 999px;
  color: var(--muted);
  font-weight: 700;
}
nav a:hover, .filters a:hover, .filters a.active, .phase-filters a:hover, .phase-filters a.active {
  color: var(--ink);
  background: rgba(14, 122, 103, 0.09);
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px;
  gap: 22px;
  margin-bottom: 24px;
}

.hero-panel, .stats, .panel, .issue-card, .board-card, .contact-card, .timeline-card {
  background: var(--panel);
  border: 1px solid rgba(117, 92, 64, 0.12);
  box-shadow: var(--shadow);
}

.maintenance-page {
  min-height: calc(100vh - 170px);
  display: grid;
  place-items: center;
}

.maintenance-panel {
  width: min(760px, 100%);
  padding: clamp(24px, 5vw, 42px);
  border-radius: 24px;
  position: relative;
  overflow: hidden;
}

.maintenance-panel::after {
  content: "";
  position: absolute;
  right: -50px;
  top: -50px;
  width: 220px;
  height: 220px;
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(14,122,103,.14), rgba(189,109,43,.12));
  transform: rotate(16deg);
}

.hero-panel {
  border-radius: 18px;
  padding: clamp(28px, 5vw, 54px);
  position: relative;
  overflow: hidden;
}
.hero-panel::after {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  width: 220px;
  height: 220px;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(14,122,103,.16), rgba(189,109,43,.08));
  transform: rotate(18deg);
}

.sub-hero .hero-panel { min-height: 280px; }
.eyebrow {
  margin: 0 0 12px;
  color: var(--accent);
  font-weight: 800;
  letter-spacing: 0;
}
h1 { margin: 0 0 14px; font-size: clamp(30px, 4vw, 52px); line-height: 1.08; }
h2 { margin: 0 0 10px; font-size: 22px; }
h3 { margin: 0 0 10px; font-size: 18px; }
p { margin: 0; color: var(--muted); line-height: 1.8; }

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
  position: relative;
  z-index: 1;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(117, 92, 64, 0.12);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
}
.button.primary {
  color: #fff;
  background: linear-gradient(135deg, var(--accent), #0f5b4e);
  border-color: transparent;
}
.button.accent {
  color: var(--ink);
  background: linear-gradient(135deg, #f3e1cd, #f9f2e8);
  border-color: rgba(189, 109, 43, 0.12);
}
.button.ghost {
  background: rgba(14, 122, 103, 0.08);
  border-color: transparent;
}
.button.small { min-height: 36px; padding: 0 12px; font-size: 13px; }
.button.full { width: 100%; }
.button:disabled { opacity: .55; cursor: not-allowed; }

.stats {
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 18px;
  overflow: hidden;
}
.stats a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px;
  border-bottom: 1px solid rgba(117, 92, 64, 0.1);
}
.stats a:last-child { border-bottom: 0; }
.stats strong { font-size: 42px; }
.stats span { color: var(--muted); font-weight: 800; }
.board-stats a { min-height: 33.33%; }

.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.platform-hero .hero-panel {
  display: grid;
  gap: 14px;
}

.home-platform-hero,
.board-platform-hero,
.announcement-platform-hero {
  align-items: stretch;
}

.home-platform-hero .hero-panel,
.board-platform-hero .hero-panel,
.announcement-platform-hero .hero-panel {
  padding-right: 8px;
}

.home-platform-hero .stats,
.board-platform-hero .stats,
.announcement-platform-hero .stats {
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(247,243,236,.94));
  border: 1px solid rgba(117, 92, 64, 0.08);
  box-shadow: var(--shadow);
}

.home-platform-hero .stats a,
.board-platform-hero .stats a,
.announcement-platform-hero .stats a {
  gap: 12px;
  transition: background .2s ease, transform .2s ease;
}

.home-platform-hero .stats a:hover,
.board-platform-hero .stats a:hover,
.announcement-platform-hero .stats a:hover {
  background: rgba(14, 122, 103, 0.04);
  transform: translateY(-1px);
}

.platform-toolbar {
  padding: 16px 18px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(247,243,236,.88));
  border: 1px solid rgba(117, 92, 64, 0.08);
  box-shadow: var(--shadow);
}

.platform-hero-brief {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.platform-hero-brief article {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255,255,255,.66);
  border: 1px solid rgba(117, 92, 64, 0.1);
}

.platform-hero-brief strong {
  color: var(--accent);
  font-size: 13px;
}

.platform-hero-brief span {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}

.platform-section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .9fr);
  gap: 16px;
  align-items: end;
  margin-bottom: 14px;
}

.platform-section-head > div:first-child {
  display: grid;
  gap: 8px;
}

.platform-section-head .notice-line {
  min-height: 100%;
}

.phase-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.toolbar {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
  align-items: start;
}

.search { display: flex; gap: 10px; }

input, textarea, select {
  width: 100%;
  border: 1px solid rgba(117, 92, 64, 0.14);
  border-radius: 12px;
  padding: 12px 13px;
  font: inherit;
  color: var(--ink);
  background: rgba(255,255,255,.95);
}
textarea { resize: vertical; }

.filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.issue-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.home-story {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
  gap: 16px;
  margin: 20px 0 24px;
}

.home-story-copy {
  padding: 26px;
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, rgba(189,109,43,.14), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(245,240,232,.94));
  border: 1px solid rgba(117, 92, 64, 0.12);
  box-shadow: var(--shadow);
}

.home-story-copy h2 {
  margin: 0 0 10px;
  font-size: 34px;
  line-height: 1.16;
}

.home-story-copy p {
  color: var(--muted);
  line-height: 1.82;
}

.home-spotlight {
  padding: 22px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 100% 0, rgba(14,122,103,.16), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(247,243,236,.92));
}

.home-spotlight h2 {
  margin: 0 0 14px;
  font-size: 24px;
  line-height: 1.25;
}

.spotlight-stack {
  display: grid;
  gap: 12px;
}

.spotlight-stack article {
  display: grid;
  gap: 6px;
  padding: 14px 14px 16px;
  border-radius: 16px;
  background: rgba(244, 241, 234, 0.82);
}

.spotlight-stack span {
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
}

.spotlight-stack strong {
  font-size: 17px;
  line-height: 1.35;
}

.spotlight-stack p {
  margin: 0;
  color: var(--muted);
  line-height: 1.64;
}

.spotlight-stack a {
  color: var(--accent);
  font-weight: 800;
}

.home-daily-head,
.home-focus-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin: 24px 0 14px;
}

.home-daily-head h2,
.home-focus-head h2 {
  margin: 0 0 6px;
}

.home-daily-head p,
.home-focus-head p {
  margin: 0;
  color: var(--muted);
}

.home-entry-grid,
.toolbox-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}

.entry-card,
.toolbox-card {
  display: grid;
  gap: 10px;
  min-height: 178px;
  padding: 20px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(247,243,236,.92));
  border: 1px solid rgba(117, 92, 64, 0.12);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}

.entry-card::after,
.toolbox-card::after {
  content: "";
  position: absolute;
  right: -34px;
  bottom: -40px;
  width: 128px;
  height: 128px;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(14,122,103,.10), rgba(189,109,43,.10));
  transform: rotate(18deg);
}

.entry-card span,
.toolbox-card span {
  width: fit-content;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--accent);
  background: rgba(14, 122, 103, 0.08);
  font-weight: 800;
  font-size: 12px;
}

.entry-card strong,
.toolbox-card strong {
  font-size: 22px;
  line-height: 1.25;
  position: relative;
  z-index: 1;
}

.entry-card p,
.toolbox-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.68;
  position: relative;
  z-index: 1;
}

.home-focus {
  margin: 26px 0;
}

.home-participation {
  margin: 28px 0 8px;
}

.home-participation-head {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.home-participation-head p {
  margin: 0;
  color: var(--muted);
}

.participation-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.participation-card {
  display: grid;
  gap: 10px;
  padding: 18px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(249,245,238,.92));
  border: 1px solid rgba(117, 92, 64, 0.12);
  box-shadow: var(--shadow);
}

.participation-card span {
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
}

.participation-card strong {
  font-size: 20px;
  line-height: 1.3;
}

.participation-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.board-atmosphere,
.board-showcase {
  display: grid;
  gap: 14px;
  margin: 20px 0 22px;
}

.board-atmosphere {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.board-atmosphere-card {
  padding: 22px;
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, rgba(14,122,103,.10), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,244,237,.92));
  border: 1px solid rgba(117, 92, 64, 0.12);
  box-shadow: var(--shadow);
}

.board-atmosphere-card h2 {
  margin: 0 0 8px;
  font-size: 26px;
  line-height: 1.24;
}

.board-atmosphere-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.76;
}

.board-showcase-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
}

.board-showcase-head h2 {
  margin: 0 0 8px;
}

.board-showcase-head p {
  margin: 0;
  color: var(--muted);
}

.board-showcase-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.board-showcase-card {
  display: grid;
  gap: 10px;
  padding: 18px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(249,245,238,.92));
  border: 1px solid rgba(117, 92, 64, 0.12);
  box-shadow: var(--shadow);
}

.board-showcase-card span {
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
}

.board-showcase-card strong {
  font-size: 21px;
  line-height: 1.28;
}

.board-showcase-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.board-showcase-card div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 13px;
}

.home-pulse {
  display: grid;
  gap: 14px;
  margin: 24px 0 20px;
}

.home-pulse-head p {
  margin: 0;
  color: var(--muted);
}

.pulse-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pulse-strip span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(14, 122, 103, 0.08);
  color: var(--accent);
  font-size: 13px;
  font-weight: 900;
}

.headline-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.headline-card {
  display: grid;
  gap: 10px;
  padding: 20px;
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, rgba(189,109,43,.12), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,243,236,.92));
  border: 1px solid rgba(117, 92, 64, 0.12);
  box-shadow: var(--shadow);
}

.headline-card span {
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
}

.headline-card strong {
  font-size: 22px;
  line-height: 1.26;
}

.headline-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.74;
}

.headline-card div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 13px;
}

.poll-momentum,
.announcement-priority {
  display: grid;
  gap: 14px;
  margin: 20px 0 22px;
}

.momentum-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.momentum-card {
  display: grid;
  gap: 10px;
  padding: 18px;
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, rgba(189,109,43,.10), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(249,245,238,.92));
  border: 1px solid rgba(117, 92, 64, 0.12);
  box-shadow: var(--shadow);
}

.momentum-card span {
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
}

.momentum-card strong {
  font-size: 21px;
  line-height: 1.28;
}

.momentum-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.72;
}

.momentum-card div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 13px;
}

.notice-card {
  background:
    radial-gradient(circle at top right, rgba(14,122,103,.10), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,244,237,.92));
}

.updates-bucket {
  display: grid;
  gap: 14px;
  margin: 22px 0;
}

.bucket-feed {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.home-focus-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.updates-lead {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0 20px;
}

.updates-lead-card {
  padding: 22px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(248,244,237,.92));
  border: 1px solid rgba(117, 92, 64, 0.12);
  box-shadow: var(--shadow);
}

.updates-lead-card h2 {
  margin: 0 0 8px;
  font-size: 24px;
  line-height: 1.24;
}

.updates-lead-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.74;
}

.activity-feed {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.activity-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  border-radius: 18px;
  background: rgba(255,255,255,.93);
  border: 1px solid rgba(117, 92, 64, 0.12);
  box-shadow: var(--shadow);
  min-height: 100%;
}

.home-focus-grid .activity-card {
  min-height: 238px;
}

.activity-top,
.activity-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.activity-card h3 {
  margin: 0;
  font-size: 20px;
  line-height: 1.28;
}

.activity-card h3 a:hover {
  color: var(--accent);
}

.activity-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.72;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

.activity-foot {
  margin-top: auto;
  color: var(--muted);
  font-size: 13px;
  justify-content: space-between;
}

.toolbox-layout {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 16px;
  margin-top: 20px;
}

.toolbox-contact-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.toolbox-contact-list a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  padding: 14px;
  border-radius: 14px;
  background: rgba(244, 241, 234, 0.72);
}

.toolbox-contact-list strong {
  min-width: 0;
}

.toolbox-contact-list span {
  color: var(--accent);
  font-weight: 800;
}

.toolbox-contact-list small {
  grid-column: 1 / -1;
  color: var(--muted);
}

.area-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0;
}

.area-chip-grid span {
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(14, 122, 103, 0.08);
  color: var(--accent);
  font-weight: 800;
  font-size: 13px;
}

.issue-card, .board-card {
  border-radius: 18px;
  padding: 22px;
}

.issue-card {
  min-height: 370px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: visible;
}

.issue-card h2 a:hover, .board-card h2:hover { color: var(--accent); }
.issue-card p, .board-card p { margin-top: 0; }
.issue-card h2 {
  display: -webkit-box;
  flex: 0 0 auto;
  line-height: 1.25;
  max-height: calc(1.25em * var(--issue-title-lines, 2));
  overflow: hidden;
  line-clamp: var(--issue-title-lines, 2);
  -webkit-line-clamp: var(--issue-title-lines, 2);
  -webkit-box-orient: vertical;
}
.issue-card > p {
  display: -webkit-box;
  flex: 0 0 auto;
  line-height: 1.8;
  max-height: calc(1.8em * var(--issue-desc-lines, 3));
  overflow: hidden;
  line-clamp: var(--issue-desc-lines, 3);
  -webkit-line-clamp: var(--issue-desc-lines, 3);
  -webkit-box-orient: vertical;
}

.card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.pill, .tag, .danger {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}
.pill.open { background: #fff1ef; color: var(--danger); }
.pill.progress { background: #fff7eb; color: var(--accent-2); }
.pill.resolved { background: #edf8ef; color: var(--success); }
.tag { background: rgba(14, 122, 103, 0.08); color: var(--accent); }
.tag.warm { background: rgba(189, 109, 43, 0.1); color: var(--accent-2); }
.danger { background: rgba(185, 63, 47, 0.12); color: var(--danger); }

.meta {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 4px 0;
}
.meta.wide { grid-template-columns: repeat(4, 1fr); }
.meta div {
  padding: 12px;
  background: rgba(244, 241, 234, 0.72);
  border-radius: 14px;
}
dt { color: var(--muted); font-size: 12px; font-weight: 800; }
dd { margin: 4px 0 0; font-size: 13px; font-weight: 800; overflow-wrap: anywhere; }

.mini-note {
  margin-top: 0;
  padding: 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(14,122,103,.04), rgba(14,122,103,.01));
  color: var(--muted);
  font-size: 13px;
  display: -webkit-box;
  flex: 0 0 auto;
  line-height: 1.65;
  max-height: calc(1.65em * var(--issue-progress-lines, 2));
  overflow: hidden;
  line-clamp: var(--issue-progress-lines, 2);
  -webkit-line-clamp: var(--issue-progress-lines, 2);
  -webkit-box-orient: vertical;
}

.card-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 10px;
  margin-top: auto;
}

.panel {
  border-radius: 20px;
  padding: clamp(24px, 4vw, 36px);
}
.panel.narrow { width: min(780px, 100%); margin: 0 auto; }

.form-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 20px;
}
.form-panel { min-height: 100%; }
.side-guide { align-self: start; }
.side-form-panel { margin-top: 16px; }

.form-platform-hero .hero-panel {
  display: grid;
  gap: 14px;
}

.form-page-head {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
}

.form-guide {
  display: grid;
  gap: 14px;
}

.form-guide-list {
  display: grid;
  gap: 10px;
}

.form-guide-list li {
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(244, 241, 234, 0.82);
  border: 1px solid rgba(117, 92, 64, 0.08);
}

.form, .admin-stack {
  display: grid;
  gap: 16px;
}

label {
  display: grid;
  gap: 8px;
  color: var(--ink);
  font-weight: 800;
}
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.notice-line {
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(14, 122, 103, 0.08);
  color: var(--muted);
  line-height: 1.7;
}
.notice-line.compact { padding: 10px 12px; font-size: 13px; }

.detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px;
  align-items: start;
}
.detail-main { min-width: 0; }
.detail-side { min-width: 0; }
.sticky-panel { position: sticky; top: 92px; }
.detail-platform-hero .stats {
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(247,243,236,.94));
  border: 1px solid rgba(117, 92, 64, 0.08);
  box-shadow: var(--shadow);
}

.detail-platform-hero .stats a strong {
  font-size: 30px;
}

.detail-side .panel {
  overflow: visible;
}

.detail-side .sticky-panel {
  display: grid;
  gap: 14px;
}

.content-block + .content-block { margin-top: 26px; }
.prose { color: var(--ink); }

.timeline-panel { margin-top: 28px; }
.timeline-head { margin-bottom: 16px; }
.timeline {
  display: grid;
  gap: 14px;
}
.timeline-item {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.timeline-dot {
  width: 12px;
  height: 12px;
  margin: 18px 0 0 6px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 6px rgba(14, 122, 103, 0.12);
}
.timeline-dot.owner-dot {
  background: var(--accent-2);
  box-shadow: 0 0 0 6px rgba(189, 109, 43, 0.12);
}
.timeline-card {
  border-radius: 16px;
  padding: 18px;
}
.timeline-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}
.timeline-extra {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
  color: var(--muted);
  font-size: 13px;
}
.empty-state {
  padding: 24px;
  border-radius: 16px;
  background: rgba(255,255,255,.6);
  color: var(--muted);
}

.attachment-flow {
  margin-top: 14px;
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.image-thumb {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(14, 122, 103, 0.06);
}

.image-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.file-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.file-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: 8px;
  background: rgba(14, 122, 103, 0.06);
}

.file-item span, .file-item small {
  overflow-wrap: anywhere;
}
.file-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  background: rgba(189, 109, 43, 0.14);
  color: var(--accent-2);
  font-weight: 800;
}

.signature-card .poll-mini {
  align-items: start;
}

.signature-detail-layout {
  align-items: start;
}

.signature-side {
  gap: 16px;
}

.signature-pad-box {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(35, 50, 61, 0.12);
  background: rgba(255,255,255,0.86);
}

.signature-pad-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.signature-pad-canvas {
  width: 100%;
  min-height: 170px;
  display: block;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,243,238,.96)),
    repeating-linear-gradient(180deg, transparent 0 31px, rgba(35,50,61,.06) 31px 32px);
  border: 1px dashed rgba(35, 50, 61, 0.2);
  touch-action: none;
}

.signature-stamp {
  margin-top: 12px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(14, 122, 103, 0.06);
  max-width: 240px;
  display: grid;
  gap: 8px;
  overflow: hidden;
}

.signature-stamp img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}

.signature-mask-chip {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(14, 122, 103, 0.12);
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
}

.signature-stamp small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.signature-stamp.masked img {
  filter: blur(8px) saturate(.7) contrast(.9);
  transform: scale(1.04);
  opacity: .92;
}

.receipt-signature {
  max-width: 320px;
  background: rgba(188, 115, 43, 0.08);
}

.signature-receipt-card {
  display: grid;
  gap: 18px;
}

.signature-receipt-meta dt {
  color: var(--muted);
}

.signature-receipt-meta dd {
  font-weight: 700;
}

.checkbox-line {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-weight: 700;
}

.checkbox-line input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
}

.signature-admin-row {
  grid-template-columns: 72px minmax(120px, .9fr) minmax(180px, 1.2fr) minmax(160px, 1fr) minmax(140px, .9fr) minmax(120px, auto);
}

.signature-select-col {
  display: flex;
  align-items: center;
  justify-content: center;
}

.table-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: auto;
  gap: 0;
}

.table-check input {
  width: 18px;
  height: 18px;
  margin: 0;
}

.signature-row-actions {
  justify-content: flex-start;
  min-width: 96px;
}

.signature-filter-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.signature-bulk-actions {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.field-hint {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.pin-log {
  margin-top: 16px;
  display: grid;
  gap: 10px;
}
.pin-log-item {
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.72);
}
.pin-log-item p {
  margin-top: 6px;
}

.admin-inline-panel {
  margin-top: 16px;
}

.resolve-box { display: grid; gap: 12px; margin-top: 20px; }

.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 22px;
}
.contacts-hero { margin-bottom: 18px; }
.contact-card {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 16px;
  padding: 20px;
  border-radius: 18px;
}
.contact-main {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.contact-photo, .contact-qr {
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 12px;
  background: rgba(14, 122, 103, 0.08);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}
.contact-photo {
  width: 74px;
  aspect-ratio: 1 / 1;
}
.contact-qr {
  width: 112px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}
.contact-photo img, .contact-qr img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.contact-qr img { object-fit: contain; background: #fff; }
.contact-copy { min-width: 0; }
.contact-card span { color: var(--accent); font-weight: 800; }
.contact-card strong { display: block; margin-top: 8px; font-size: 20px; overflow-wrap: anywhere; }
.contact-card a { color: var(--accent-2); font-weight: 800; }
.contact-links {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}
.contact-links b, .contact-links em {
  color: var(--muted);
  font-style: normal;
  overflow-wrap: anywhere;
}
.contact-card p { margin-top: 12px; }
.contact-qr-wrap {
  display: grid;
  gap: 8px;
  justify-items: center;
  padding-top: 14px;
  border-top: 1px solid rgba(117, 92, 64, 0.1);
}
.contact-qr-wrap small {
  color: var(--muted);
  font-weight: 800;
}

.rule-list, .board-grid {
  display: grid;
  gap: 16px;
}

.hoa-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 22px;
}

.hoa-narrative-band,
.hoa-decision-map {
  display: grid;
  gap: 16px;
  margin-bottom: 22px;
}

.hoa-narrative-band {
  grid-template-columns: 1.08fr .92fr;
}

.hoa-narrative-card,
.hoa-decision-copy,
.hoa-decision-chart {
  position: relative;
  overflow: hidden;
}

.hoa-narrative-card {
  display: grid;
  gap: 12px;
  min-height: 220px;
  align-content: start;
}

.hoa-narrative-card.emphasis {
  background:
    linear-gradient(145deg, rgba(255,255,255,.96), rgba(241,247,244,.94));
}

.hoa-narrative-card h2,
.hoa-decision-copy h2 {
  margin: 0;
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.18;
}

.hoa-narrative-card p,
.hoa-decision-copy p {
  margin: 0;
  color: var(--muted);
}

.hoa-decision-map {
  grid-template-columns: minmax(0, 1fr) minmax(290px, .86fr);
}

.hoa-decision-copy {
  display: grid;
  gap: 14px;
}

.hoa-decision-list {
  display: grid;
  gap: 12px;
  margin-top: 2px;
}

.hoa-decision-list article {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(244,241,234,.78);
  border: 1px solid rgba(117, 92, 64, 0.08);
}

.hoa-decision-list b {
  font-size: 15px;
}

.hoa-decision-list span {
  color: var(--muted);
  line-height: 1.65;
}

.hoa-decision-chart {
  display: grid;
  gap: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,243,236,.94));
}

.hoa-path-flow {
  display: grid;
  gap: 12px;
}

.hoa-path-flow article {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.hoa-path-flow i {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: rgba(14, 122, 103, 0.1);
  color: var(--accent);
  font-style: normal;
  font-weight: 900;
}

.hoa-path-flow b {
  display: block;
  font-size: 16px;
  margin-bottom: 4px;
}

.hoa-path-flow span {
  color: var(--muted);
  line-height: 1.6;
}

.hoa-reasons,
.hoa-action-grid,
.hoa-neighborhood {
  display: grid;
  gap: 16px;
  margin-bottom: 22px;
}

.hoa-reasons {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hoa-reason-card,
.hoa-action-card,
.hoa-signal-panel,
.hoa-side-panel,
.hoa-neighborhood-copy,
.hoa-neighborhood-chart,
.hoa-narrative-card,
.hoa-decision-copy,
.hoa-decision-chart {
  position: relative;
  overflow: hidden;
}

.hoa-neighborhood {
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, .95fr);
}

.hoa-neighborhood-copy {
  display: grid;
  gap: 14px;
}

.hoa-neighborhood-tags {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.hoa-neighborhood-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(14, 122, 103, 0.08);
  color: var(--accent);
  font-size: 13px;
  font-weight: 800;
}

.hoa-neighborhood-chart {
  display: grid;
  gap: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(244,241,234,.92));
}

.hoa-chart-head {
  display: grid;
  gap: 4px;
}

.hoa-chart-head strong {
  font-size: 18px;
}

.hoa-chart-head span,
.hoa-chart-note,
.hoa-lane-grid small {
  color: var(--muted);
}

.hoa-lane-grid {
  display: grid;
  gap: 14px;
}

.hoa-lane-grid article {
  display: grid;
  gap: 8px;
}

.hoa-lane-grid b {
  font-size: 14px;
}

.hoa-lane {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.hoa-lane i {
  display: block;
  height: 10px;
  border-radius: 999px;
  background: rgba(14, 122, 103, 0.12);
}

.hoa-lane i.on {
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

.hoa-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(14, 122, 103, 0.08);
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
}

.hoa-reason-card h3,
.hoa-action-card h3 {
  margin: 12px 0 8px;
  font-size: 22px;
  line-height: 1.2;
}

.hoa-reason-card p,
.hoa-action-card p,
.hoa-progress-intro span {
  color: var(--muted);
}

.hoa-dashboard,
.hoa-misconceptions,
.hoa-form-split {
  display: grid;
  gap: 16px;
  margin-bottom: 22px;
}

.hoa-dashboard {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.hoa-stat-card,
.hoa-form-card,
.hoa-misconception-card {
  position: relative;
  overflow: hidden;
}

.hoa-stat-card strong {
  display: block;
  margin: 8px 0 6px;
  font-size: clamp(26px, 4vw, 34px);
  line-height: 1.05;
}

.hoa-stat-card b {
  display: inline-block;
  margin-top: 10px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 900;
}

.hoa-stat-card small,
.hoa-stat-card span {
  display: block;
}

.hoa-stat-card span {
  color: var(--muted);
}

.hoa-signal-bars,
.hoa-signal-line {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0 4px;
}

.hoa-signal-bars i,
.hoa-signal-line i {
  display: block;
  border-radius: 999px;
  background: rgba(14, 122, 103, 0.12);
}

.hoa-signal-bars i {
  height: 12px;
}

.hoa-signal-line i {
  height: 6px;
}

.hoa-signal-bars i.on,
.hoa-signal-line i.on {
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

.hoa-misconceptions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hoa-misconception-card {
  min-height: 132px;
  padding-left: 72px;
}

.hoa-badge {
  position: absolute;
  left: 20px;
  top: 20px;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-weight: 900;
  color: var(--accent);
  background: rgba(14, 122, 103, 0.1);
}

.hoa-form-split {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hoa-action-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hoa-action-card {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(247,242,235,.88));
}

.hoa-step-no {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(14,122,103,.12), rgba(189,109,43,.12));
  color: var(--accent);
  font-size: 20px;
  font-weight: 900;
}

.hoa-form-card p {
  margin-bottom: 14px;
}

.hoa-wide {
  grid-column: 1 / -1;
}

.hoa-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
  gap: 18px;
  align-items: stretch;
}

.hoa-hero-points {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 18px 0 0;
}

.hoa-hero-points span {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(117, 92, 64, 0.12);
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
}

.hoa-hero-brief {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.hoa-hero-brief article {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255,255,255,.64);
  border: 1px solid rgba(117, 92, 64, 0.1);
}

.hoa-hero-brief strong {
  font-size: 13px;
  color: var(--accent);
}

.hoa-hero-brief span {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}

.hoa-hero-side {
  display: grid;
}

.hoa-signal-panel {
  display: grid;
  gap: 12px;
  align-content: start;
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(244,241,234,.92));
}

.hoa-signal-stack {
  display: grid;
  gap: 12px;
}

.hoa-signal-stack div {
  display: grid;
  gap: 6px;
}

.hoa-signal-stack span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.hoa-progress-bar {
  position: relative;
  height: 16px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(14, 122, 103, 0.08);
  margin: 18px 0 16px;
}

.hoa-progress-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

.hoa-meta {
  margin-top: 0;
}

.hoa-milestones {
  display: grid;
  gap: 14px;
  margin-top: 20px;
}

.hoa-progress-layout {
  align-items: start;
}

.hoa-progress-intro {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.hoa-progress-intro div {
  padding: 16px;
  border-radius: 16px;
  background: rgba(244, 241, 234, 0.8);
  border: 1px solid rgba(117, 92, 64, 0.08);
}

.hoa-progress-intro strong {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--accent);
}

.hoa-progress-intro p {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.3;
}

.hoa-step {
  display: grid;
  gap: 10px;
  border-radius: 16px;
  padding: 18px;
}

.hoa-step small {
  color: var(--muted);
  font-weight: 700;
}

.hoa-hero .hero-panel::after {
  width: 260px;
  height: 260px;
  right: -50px;
  top: -30px;
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(14,122,103,.14), rgba(189,109,43,.14)),
    radial-gradient(circle at center, rgba(255,255,255,.65), transparent 60%);
}

.hoa-side-panel h2 {
  margin-bottom: 10px;
}
.rule-list article {
  border-left: 4px solid var(--accent);
  background: rgba(255,255,255,.85);
  padding: 18px;
  border-radius: 16px;
  box-shadow: var(--shadow);
}
.rule-list time { color: var(--muted); font-size: 13px; }

.board-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.board-card {
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(249,244,237,.92));
  position: relative;
  overflow: hidden;
}

.platform-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 100%;
}

.platform-card .attachment-flow {
  margin-top: 2px;
}

.platform-card .card-actions {
  margin-top: auto;
  padding-top: 8px;
}

.board-card::after {
  content: "";
  position: absolute;
  right: -30px;
  bottom: -30px;
  width: 120px;
  height: 120px;
  border-radius: 999px;
  background: rgba(189, 109, 43, 0.08);
}
.board-head, .board-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.board-meta {
  margin-top: 18px;
  color: var(--muted);
  font-size: 13px;
}

.board-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.board-meta-grid span {
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(244, 241, 234, 0.78);
}

.board-meta-grid b {
  color: var(--accent);
  font-size: 12px;
}

.platform-card h2 {
  line-height: 1.28;
}

.platform-card p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

.announcement-card .image-grid,
.board-card .image-grid {
  margin-top: 2px;
}

.poll-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.poll-platform-hero .stats,
.rating-platform-hero .stats {
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(247,243,236,.94));
  border: 1px solid rgba(117, 92, 64, 0.08);
  box-shadow: var(--shadow);
}

.poll-card {
  display: grid;
  gap: 14px;
  padding: 22px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(249,244,237,.92));
  border: 1px solid rgba(117, 92, 64, 0.12);
  box-shadow: var(--shadow);
}
.poll-card h2 a:hover { color: var(--accent); }
.poll-mini {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  padding: 12px;
  border-radius: 14px;
  background: rgba(14, 122, 103, 0.07);
  color: var(--muted);
}
.poll-mini strong {
  color: var(--accent);
  font-size: 26px;
}
.poll-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 18px;
  align-items: start;
}

.poll-detail-hero .stats a strong {
  font-size: 32px;
}

.poll-results, .poll-public-list { margin-top: 26px; }
.poll-stat {
  position: relative;
  overflow: hidden;
  margin-top: 10px;
  padding: 14px;
  border-radius: 14px;
  background: rgba(244, 241, 234, 0.86);
}
.poll-stat div {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}
.poll-stat span { color: var(--muted); font-weight: 800; }
.poll-stat i {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  background: rgba(14, 122, 103, 0.14);
}
.poll-vote-row {
  display: grid;
  grid-template-columns: minmax(100px, .8fr) minmax(120px, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid rgba(117, 92, 64, 0.1);
}
.poll-vote-row span {
  color: var(--accent);
  font-weight: 800;
}
.poll-vote-row time {
  color: var(--muted);
  font-size: 13px;
}
.poll-admin-card .admin-table { margin-top: 14px; }
.poll-admin-row {
  grid-template-columns: minmax(160px, 1fr) minmax(160px, 1fr) minmax(120px, .8fr) minmax(180px, 1fr);
}

.rating-toolbar {
  grid-template-columns: minmax(240px, 420px);
}
.rating-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}
.rating-card {
  display: grid;
  gap: 14px;
  padding: 22px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(249,244,237,.92));
  border: 1px solid rgba(117, 92, 64, 0.12);
  box-shadow: var(--shadow);
}
.rating-score {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  align-items: center;
  padding: 14px;
  border-radius: 14px;
  background: rgba(14, 122, 103, 0.07);
}
.rating-score strong {
  grid-row: span 2;
  color: var(--accent);
  font-size: 42px;
  line-height: 1;
}
.stars {
  color: var(--accent-2);
  font-weight: 900;
  letter-spacing: 0;
}
.rating-fields {
  display: grid;
  gap: 8px;
}
.rating-fields span {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 14px;
}
.rating-fields b { color: var(--ink); }
.rating-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
  gap: 18px;
  align-items: start;
}
.rating-inputs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.rating-record-row {
  grid-template-columns: minmax(150px, .9fr) minmax(150px, .9fr) minmax(260px, 1.4fr) minmax(170px, .9fr) minmax(120px, .6fr);
}

.admin-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: start;
}
.admin-section { display: grid; gap: 14px; }
.admin-section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr);
  gap: 16px;
  align-items: start;
}
.admin-filter-bar {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(130px, .8fr)) auto;
  gap: 10px;
  align-items: center;
  margin: 18px 0 14px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(244, 241, 234, 0.72);
}
.admin-edit-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr) auto;
  gap: 12px;
  align-items: end;
  padding: 18px;
  border: 1px solid rgba(117, 92, 64, 0.12);
  border-radius: 18px;
  background: rgba(255,255,255,.72);
}
.inline-admin-save {
  display: contents;
}

.admin-sort-box {
  display: grid;
  grid-template-columns: minmax(72px, 88px) auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.admin-sort-box input {
  min-width: 0;
}
.admin-contact-form {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 16px;
  padding: 18px;
  border: 1px solid rgba(117, 92, 64, 0.12);
  border-radius: 18px;
  background: rgba(255,255,255,.72);
}
.admin-contact-preview {
  display: grid;
  gap: 12px;
  align-content: start;
  justify-items: center;
}
.admin-contact-fields {
  display: grid;
  gap: 12px;
}
.full-width { grid-column: 1 / -2; }

.admin-list {
  display: grid;
  gap: 16px;
  margin-top: 18px;
}
.admin-table {
  overflow: hidden;
  border: 1px solid rgba(117, 92, 64, 0.12);
  border-radius: 16px;
  background: rgba(255,255,255,.74);
}
.admin-table-head, .admin-table-row {
  display: grid;
  grid-template-columns: minmax(240px, 1.5fr) minmax(150px, .8fr) 110px minmax(150px, .8fr) minmax(210px, auto);
  gap: 12px;
  align-items: center;
}
.admin-table-head {
  padding: 12px 16px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  background: rgba(14, 122, 103, 0.08);
}
.admin-table-row {
  padding: 16px;
  border-top: 1px solid rgba(117, 92, 64, 0.1);
}
.admin-table-row strong {
  display: block;
  overflow-wrap: anywhere;
}
.admin-table-row small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
}
.row-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.compact-row {
  justify-content: flex-start;
}
.row-actions form { margin: 0; }
.admin-issue-card {
  padding: 18px;
  border: 1px solid rgba(117, 92, 64, 0.12);
  border-radius: 18px;
  background: rgba(255,255,255,.72);
}
.admin-issue-card > header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.admin-issue-card small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
}
.admin-issue-form, .admin-update-form {
  display: grid;
  gap: 12px;
}
.inline-actions, .inline-form {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.inline-actions.compact {
  gap: 8px;
  justify-content: flex-end;
}
.admin-control-card {
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(248,244,238,.78));
}
.admin-preview {
  display: grid;
  gap: 10px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(117, 92, 64, 0.12);
  background: rgba(255,255,255,.72);
}
.admin-preview strong {
  font-size: 14px;
}
.admin-preview ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.admin-preview li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 4px 10px;
  align-items: start;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(14, 122, 103, 0.06);
}
.admin-preview li span {
  color: var(--accent);
  font-weight: 900;
}
.admin-preview li strong,
.admin-preview li small {
  grid-column: 2;
}
.admin-preview li small {
  color: var(--muted);
}
.order-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(14, 122, 103, 0.1);
  color: var(--accent);
  font-size: 13px;
  font-weight: 900;
}
.tag.ok {
  background: rgba(14, 122, 103, 0.12);
  color: var(--accent);
}
.admin-tip {
  color: var(--muted);
  font-size: 13px;
}

.clean-list {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.9;
}

.footer {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 24px;
  color: var(--muted);
  border-top: 1px solid rgba(117, 92, 64, 0.1);
  background: rgba(255,255,255,.7);
  font-size: 13px;
}

.image-preview {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(11, 24, 21, .92);
}

.image-preview.active {
  display: flex;
}

.image-preview img {
  max-width: min(100%, 980px);
  max-height: 82vh;
  object-fit: contain;
  border-radius: 8px;
}

.image-preview span {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  color: #fff;
  text-align: center;
  font-size: 13px;
}

.image-preview-close {
  position: absolute;
  right: 16px;
  top: 16px;
  min-height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  color: var(--ink);
  background: #fff;
  font-weight: 800;
}

@media (max-width: 1080px) {
  .hero, .detail-layout, .form-page, .poll-detail, .rating-layout { grid-template-columns: 1fr; }
  .toolbar { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(3, 1fr); }
  .stats a { border-bottom: 0; border-right: 1px solid rgba(117, 92, 64, 0.1); }
  .stats a:last-child { border-right: 0; }
  .sticky-panel { position: static; }
  .home-story, .updates-lead { grid-template-columns: 1fr; }
  .issue-grid, .contact-grid, .board-grid, .poll-grid, .rating-grid, .home-entry-grid, .toolbox-grid, .activity-feed { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-focus-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .participation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .board-atmosphere,
  .board-showcase-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .momentum-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .headline-grid,
  .bucket-feed { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toolbox-layout { grid-template-columns: 1fr; }
  .rating-inputs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-filter-bar { grid-template-columns: 1fr 1fr; }
  .admin-contact-form { grid-template-columns: 1fr; }
  .admin-contact-preview {
    grid-template-columns: repeat(2, auto);
    justify-content: start;
  }
  .admin-table-head { display: none; }
  .admin-table-row, .poll-admin-row {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .row-actions { justify-content: flex-start; }
}

@media (max-width: 760px) {
  body { background: linear-gradient(180deg, #f8faf4 0%, #f4f7f2 100%); }
  main { width: 100%; padding: 10px 10px 76px; }
  .topbar {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
    padding: 10px 10px 8px;
  }
  .brand { min-width: 0; gap: 10px; }
  .brand-mark { width: 42px; height: 42px; font-size: 13px; border-radius: 8px; }
  .brand strong { font-size: 16px; }
  .brand small { font-size: 12px; }
  nav {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 3px;
    scrollbar-width: none;
  }
  nav::-webkit-scrollbar { display: none; }
  nav a { flex: 0 0 auto; }
  .hero {
    gap: 10px;
    margin-bottom: 14px;
  }
  .hero-panel {
    padding: 22px 18px;
    min-height: 0;
    border-radius: 12px;
  }
  .hero-panel::after {
    width: 140px;
    height: 140px;
    right: -54px;
    top: -50px;
  }
  .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    margin-top: 18px;
  }
  .stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    box-shadow: none;
    border-color: rgba(14, 122, 103, .12);
    border-radius: 12px;
  }
  .stats a {
    display: grid;
    gap: 3px;
    text-align: center;
    justify-items: center;
    padding: 14px 8px;
    border-bottom: 0;
  }
  .stats strong { font-size: 26px; }
  .stats span { font-size: 12px; }
  .section-head {
    display: grid;
    gap: 10px;
    padding: 0 2px;
  }
  .phase-filters, .filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 0 0 4px;
    scrollbar-width: none;
  }
  .phase-filters::-webkit-scrollbar, .filters::-webkit-scrollbar { display: none; }
  .phase-filters a, .filters a { flex: 0 0 auto; background: rgba(255,255,255,.62); }
  .meta, .meta.wide, .contact-grid, .issue-grid, .board-grid, .poll-grid, .rating-grid, .rating-inputs, .two, .three,
  .home-entry-grid, .toolbox-grid, .activity-feed, .home-focus-grid, .toolbox-layout, .home-story, .updates-lead, .participation-grid, .board-atmosphere, .board-showcase-grid, .momentum-grid, .headline-grid, .bucket-feed { grid-template-columns: 1fr; }
  .hoa-grid, .hoa-dashboard, .hoa-misconceptions, .hoa-form-split, .hoa-reasons, .hoa-action-grid, .hoa-progress-intro, .hoa-hero, .hoa-hero-brief, .hoa-neighborhood, .hoa-narrative-band, .hoa-decision-map { grid-template-columns: 1fr; }
  .home-daily-head,
  .home-focus-head,
  .board-showcase-head {
    display: grid;
    gap: 10px;
    margin: 18px 2px 12px;
  }
  .entry-card,
  .toolbox-card,
  .activity-card,
  .participation-card,
  .updates-lead-card,
  .home-story-copy,
  .home-spotlight,
  .headline-card {
    border-radius: 12px;
    padding: 16px;
    min-height: 0;
  }
  .home-story-copy h2 {
    font-size: 28px;
  }
  .home-spotlight h2,
  .updates-lead-card h2,
  .board-atmosphere-card h2 {
    font-size: 22px;
  }
  .home-focus-grid .activity-card {
    min-height: 0;
  }
  .entry-card strong,
  .toolbox-card strong {
    font-size: 20px;
  }
  .activity-card h3 {
    font-size: 19px;
  }
  .participation-card strong {
    font-size: 18px;
  }
  .board-showcase-card strong {
    font-size: 19px;
  }
  .momentum-card strong {
    font-size: 19px;
  }
  .headline-card strong {
    font-size: 20px;
  }
  .activity-foot {
    align-items: flex-start;
    flex-direction: column;
  }
  .toolbox-contact-list a {
    grid-template-columns: 1fr;
  }
  .search, .card-actions { flex-direction: column; }
  .admin-section-head { grid-template-columns: 1fr; }
  .admin-filter-bar, .admin-edit-grid, .admin-issue-card > header { grid-template-columns: 1fr; }
  .inline-actions.compact { justify-content: flex-start; }
  .full-width { grid-column: auto; }
  .panel, .issue-card, .board-card, .contact-card { padding: 16px; border-radius: 12px; }
  .poll-card, .rating-card { padding: 16px; border-radius: 12px; }
  .toolbar { gap: 10px; }
  .platform-toolbar { padding: 14px; border-radius: 14px; }
  .form-page-head {
    margin-bottom: 14px;
  }
  .form-guide-list li {
    padding: 10px 12px;
  }
  nav a, .filters a, .phase-filters a { padding: 9px 11px; font-size: 13px; }
  h1 { font-size: 28px; line-height: 1.14; }
  h2 { font-size: 19px; }
  p { line-height: 1.72; }
  .button { min-height: 46px; }
  .issue-card { height: auto; min-height: 0; }
  .contact-main { grid-template-columns: 62px minmax(0, 1fr); }
  .contact-photo { width: 62px; }
  .contact-qr { width: min(150px, 56vw); }
  .poll-vote-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .hoa-misconception-card {
    min-height: auto;
    padding-left: 68px;
  }
  .hoa-action-card {
    grid-template-columns: 44px minmax(0, 1fr);
    padding: 16px;
  }
  .hoa-step-no {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    font-size: 18px;
  }
  .hoa-reason-card h3, .hoa-action-card h3 {
    font-size: 19px;
  }
  .hoa-hero-points span {
    min-height: 34px;
    padding: 0 12px;
    font-size: 12px;
  }
  .hoa-narrative-card,
  .hoa-decision-copy,
  .hoa-decision-chart {
    min-height: 0;
  }
  .hoa-narrative-card h2,
  .hoa-decision-copy h2 {
    font-size: 24px;
  }
  .hoa-path-flow article {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 10px;
  }
  .hoa-path-flow i {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    font-size: 15px;
  }
  .hoa-progress-intro p {
    font-size: 16px;
  }
  .home-platform-hero .stats a,
  .board-platform-hero .stats a,
  .announcement-platform-hero .stats a,
  .detail-platform-hero .stats a {
    padding: 18px 16px;
  }
  .home-platform-hero .stats strong,
  .board-platform-hero .stats strong,
  .announcement-platform-hero .stats strong,
  .detail-platform-hero .stats strong {
    font-size: 28px;
  }
  .poll-stat div {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
  .poll-detail-hero .stats a strong {
    font-size: 24px;
  }
  .detail-platform-hero .stats a strong {
    font-size: 24px;
  }
  .poll-results, .poll-public-list {
    margin-top: 18px;
  }
  .signature-pad-box {
    padding: 12px;
    border-radius: 14px;
  }
  .signature-pad-canvas {
    min-height: 190px;
  }
  .signature-pad-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .checkbox-line {
    font-size: 14px;
    line-height: 1.6;
  }
  .rating-score strong {
    font-size: 30px;
  }
  .rating-fields span {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }
  .detail-layout { gap: 10px; }
  .detail-side { display: grid; gap: 10px; }
  .sticky-panel {
    position: static;
    top: auto;
  }
  .hero-actions {
    position: sticky;
    bottom: 0;
    z-index: 3;
    padding-top: 10px;
    background: linear-gradient(180deg, rgba(245,242,235,0), rgba(245,242,235,.92) 26%);
  }
  .hero-actions .button,
  .form-panel .button.primary,
  .poll-side .button.primary.full {
    box-shadow: 0 10px 24px rgba(61, 47, 33, 0.12);
  }
  .side-form-panel { margin-top: 0; }
  .content-block + .content-block { margin-top: 20px; }
  .timeline-item {
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 8px;
  }
  .timeline-card { padding: 14px; border-radius: 12px; }
  .timeline-top {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
  .image-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .file-item { grid-template-columns: 1fr; align-items: start; }
  input, textarea, select { font-size: 16px; }
}