:root {
  --gold: #d4af37;
  --gold-dark: #b89018;
  --black: #111111;
  --warm-bg: #efe9df;
  --panel: rgba(255,255,255,0.74);
  --panel-strong: rgba(255,255,255,0.88);
  --line: rgba(17,17,17,0.10);
  --muted: #6d5830;
  --shadow: 0 24px 60px rgba(17,17,17,0.10);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--black);
  background-color: var(--warm-bg);
  background-image: url('./site-bg-desktop.webp');
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
@media (orientation: portrait) {
  body {
    background-image: url('./site-bg-mobile.webp');
    background-position: center top;
    background-size: cover;
    background-attachment: scroll;
  }
}
a { color: inherit; }
.page { width: min(1040px, calc(100% - 32px)); margin: 0 auto; padding: 24px 0 40px; }
.topbar, .footer-links { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap: wrap; }
.brand-link, .text-link {
  display:inline-flex; align-items:center; gap:10px; text-decoration:none; color: var(--muted);
  background: rgba(255,255,255,0.58); border:1px solid rgba(255,255,255,0.7); padding:12px 16px; border-radius:999px;
  box-shadow: 0 12px 30px rgba(17,17,17,0.06);
}
.brand-mini { width: 62px; height: 62px; object-fit: contain; }
.hero, .panel {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.76), rgba(255,255,255,0.60));
  border: 1px solid rgba(255,255,255,0.72);
  box-shadow: var(--shadow);
  border-radius: 34px;
  backdrop-filter: blur(16px) saturate(1.04);
  -webkit-backdrop-filter: blur(16px) saturate(1.04);
}
.hero { padding: 32px; margin-top: 18px; }
.hero-grid { display:grid; grid-template-columns: 1.25fr .95fr; gap: 20px; align-items: stretch; }
.hero h1 { margin: 0; font-size: clamp(3rem, 8vw, 5.7rem); line-height: 0.96; letter-spacing: -0.05em; }
.kicker { display:inline-flex; align-items:center; gap:8px; border-radius:999px; background: rgba(255,255,255,0.56); border:1px solid rgba(17,17,17,0.06); color: var(--gold-dark); padding:8px 12px; font-weight:700; }
.kicker::before { content:''; width:10px; height:10px; border-radius:50%; background: var(--gold); }
.state-tile { min-height: 100%; display:flex; flex-direction:column; justify-content:center; padding: 28px; }
.state-word { font-size: clamp(2.3rem, 6vw, 4.5rem); line-height: 0.95; font-weight: 900; margin: 6px 0 8px; }
.state-word.yes { color: #151515; }
.state-word.maybe { color: #8b6f16; }
.state-word.no { color: #4b433e; }
.state-copy { color: var(--muted); font-size: 1.05rem; }
.vote-row { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; margin-top: 20px; }
.vote-btn {
  min-height: 108px; border:0; border-radius: 28px; cursor:pointer; font: inherit; text-align:left; padding: 20px 22px;
  box-shadow: 0 18px 30px rgba(17,17,17,0.08); transition: transform .12s ease, filter .12s ease;
}
.vote-btn:hover { transform: translateY(-1px); filter: brightness(1.01); }
.vote-btn strong { display:block; font-size: clamp(1.5rem, 4vw, 2.2rem); }
.vote-btn span { display:block; margin-top: 8px; color: rgba(17,17,17,0.66); }
.vote-btn.can { background: linear-gradient(180deg, #e0bf45, #d4af37); color: #17120b; }
.vote-btn.cant { background: linear-gradient(180deg, #1e1e1e, #0f0f10); color: #f7f4ef; }
.vote-btn.cant span { color: rgba(255,255,255,0.72); }
.status { margin-top: 16px; padding: 14px 16px; border-radius: 18px; background: rgba(255,255,255,0.54); border:1px solid var(--line); color: var(--muted); display:none; }
.status.show { display:block; }
.status.ok { background: rgba(212,175,55,0.16); }
.status.warn { background: rgba(17,17,17,0.06); }
.lists { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; margin-top: 18px; }
.list-box { padding: 24px; }
.list-box h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin:0 0 16px; }
.name-list { list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.name-list li { padding: 14px 16px; border-radius: 18px; background: rgba(255,255,255,0.56); border: 1px solid rgba(17,17,17,0.06); }
.footer-links { margin-top: 16px; color: var(--muted); }
.footer-links .left, .footer-links .right { display:flex; gap:10px; flex-wrap:wrap; }
.footer-note { color: rgba(17,17,17,0.48); font-size: 0.95rem; }
.form-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; align-items:end; }
label { display:grid; gap:8px; color: var(--muted); font-weight: 600; }
select, input, button, textarea { font: inherit; }
select, input, textarea { width:100%; padding: 14px 16px; border-radius: 18px; border:1px solid rgba(17,17,17,0.1); background: rgba(255,255,255,0.76); }
.primary-btn { background: linear-gradient(180deg, #e0bf45, #d4af37); color:#17120b; border:0; border-radius: 18px; padding: 14px 18px; cursor:pointer; font-weight:800; }
.secondary-btn { background: #121212; color: #fff8ef; border:0; border-radius: 18px; padding: 14px 18px; cursor:pointer; font-weight:800; }
.hidden { display:none !important; }
@media (max-width: 860px) {
  .hero-grid, .lists, .form-grid { grid-template-columns: 1fr; }
  .vote-row { grid-template-columns: 1fr; }
  .hero, .panel { border-radius: 28px; }
  .hero { padding: 22px; }
}


.topbar-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.hero-home { padding: 36px; }
.hero-grid-home { grid-template-columns: minmax(0,1.2fr) minmax(300px,.8fr); align-items:stretch; }
.hero-intro { color: var(--muted); font-size: 1.12rem; margin: 14px 0 0; max-width: 20ch; }
.quick-links { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top: 16px; }
.state-panel { display:flex; flex-direction:column; justify-content:space-between; padding: 28px; }
.state-mini-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin-top: 24px; }
.mini-stat { padding: 16px 18px; border-radius: 20px; background: rgba(255,255,255,0.56); border: 1px solid rgba(17,17,17,0.06); }
.mini-stat span { display:block; font-size: .9rem; color: var(--muted); }
.mini-stat strong { display:block; font-size: 2rem; line-height: 1; margin-top: 6px; }
.compact-lists { margin-top: 18px; }
.compact-lists .list-box { padding: 20px; }
.compact-lists .name-list { gap: 10px; }
.compact-lists .name-list li { padding: 12px 14px; }
@media (max-width: 860px) {
  .topbar-actions { width: 100%; justify-content: space-between; }
  .hero-grid-home { grid-template-columns: 1fr; }
  .hero-home { padding: 24px; }
}