/* 社区投票 · 前台样式
   设计取向：一张票面（paper/ink），发丝线，单一墨蓝强调色。
   毛玻璃只出现在浮动的功能层（顶部栏、提交条），内容层保持不透明。
   没有渐变、没有大阴影、没有 emoji 图标。 */

:root {
  --paper: #F6F4EF;
  --surface: #FFFDF9;
  --ink: #17191C;
  --ink-2: #565A60;
  --ink-3: #686B71;
  --rule: #DCD6C8;
  --rule-2: #EBE6DA;
  --blue: #1B3A5C;
  --blue-hover: #12283F;
  --accent-solid: #1B3A5C;
  --accent-solid-hover: #12283F;
  --on-accent: #FFFFFF;
  --stamp: #A33B2E;
  --ok: #2E6B45;
  --glass: rgba(246, 244, 239, .74);
  --glass-border: rgba(23, 25, 28, .10);
  --radius: 4px;
  --radius-lg: 6px;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}



@media (prefers-color-scheme: dark) {
  :root {
    --paper: #14161A;
    --surface: #1A1D22;
    --ink: #E9E6DF;
    --ink-2: #A9A69F;
    --ink-3: #9A978F;
    --rule: #2C3037;
    --rule-2: #2A2F37;
    --blue: #9CBCDD;
    --blue-hover: #C2D7EC;
    --accent-solid: #A9C6E4;
    --accent-solid-hover: #C6DAF0;
    --on-accent: #10161D;
    --stamp: #E0836F;
    --ok: #7FBF95;
    --glass: rgba(20, 22, 26, .72);
    --glass-border: rgba(233, 230, 223, .12);
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.65 var(--sans);
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: .005em; }
p { margin: 0; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 2px;
}

.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;
}

.skip-link {
  position: absolute; left: 16px; top: -48px;
  padding: 10px 14px; background: var(--surface); color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--radius);
  z-index: 50; transition: top .15s ease;
}
.skip-link:focus { top: 12px; }

.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-2); }

/* ---------- 顶部栏（功能层：毛玻璃） ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid var(--glass-border);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topbar { background: var(--paper); }
}
@media (prefers-reduced-transparency: reduce) {
  .topbar, .actionbar { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

.topbar-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand { display: inline-flex; align-items: baseline; gap: 8px; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand-name { font-family: var(--serif); font-size: 17px; font-weight: 600; }
.brand-en { font-size: 11px; letter-spacing: .16em; color: var(--ink-3); text-transform: uppercase; }

.nav { display: flex; align-items: center; gap: 18px; }
.nav a { color: var(--ink-2); font-size: 14px; }
.nav a:hover { color: var(--ink); text-decoration: none; }
.nav .lang { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--ink-3); }

/* ---------- 版面 ---------- */
.wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 44px 24px 120px;
}

.intro { margin-bottom: 36px; }
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 14px;
}
h1 {
  font-size: clamp(28px, 4.2vw, 40px);
  line-height: 1.25;
  margin: 0 0 14px;
}
.lede {
  color: var(--ink-2);
  font-size: 16px;
  max-width: 60ch;
}
.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  font-size: 13px;
  color: var(--ink-3);
}

/* ---------- 投票列表 ---------- */
.poll-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.poll-item { border-bottom: 1px solid var(--rule); }
.poll-link {
  display: block;
  padding: 22px 4px 20px;
  color: inherit;
  transition: background-color .15s ease;
}
.poll-link:hover { background: rgba(27, 58, 92, .035); text-decoration: none; }
.poll-head { display: flex; align-items: baseline; gap: 12px; }
.poll-title { font-family: var(--serif); font-size: 21px; line-height: 1.4; flex: 1; }
.poll-summary { display: block; margin-top: 6px; color: var(--ink-2); font-size: 15px; }
.poll-meta { display: block; margin-top: 10px; color: var(--ink-3); font-size: 13px; }
.poll-meta span { margin-right: 4px; }

.stamp {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  padding: 2px 8px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--ink-3);
}
.stamp-open { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, var(--rule)); }

/* ---------- 票面 ---------- */
.ballot {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 40px 44px 34px;
}
.ballot-narrow { max-width: 560px; }
.ballot-head { padding-bottom: 26px; border-bottom: 1px solid var(--rule-2); margin-bottom: 8px; }
.ballot-head h1 { font-size: clamp(26px, 3.6vw, 34px); }
.thanks {
  margin-top: 18px;
  padding: 10px 14px;
  border-left: 2px solid var(--ok);
  background: color-mix(in srgb, var(--ok) 7%, transparent);
  font-size: 14px;
  color: var(--ink);
}

/* ---------- 题目 ---------- */
.q { padding: 28px 0; border-bottom: 1px solid var(--rule-2); }
.q:last-of-type { border-bottom: 0; }
.q-title {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: 19px;
  line-height: 1.5;
  margin: 0 0 6px;
}
.q-no {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-3);
  padding-top: 4px;
  min-width: 1.4em;
}
.q-text { flex: 0 1 auto; }
.q-req { color: var(--stamp); font-size: 15px; }
.q-hint { color: var(--ink-2); font-size: 14px; margin: 0 0 10px 2.1em; }
.q-note { color: var(--ink-3); font-size: 13px; margin: 6px 0 12px 2.1em; }

.opts { margin: 12px 0 0 2.1em; display: grid; gap: 8px; }
.opt {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid var(--rule-2);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.opt:hover { border-color: var(--rule); background: rgba(27, 58, 92, .03); }
.opt input {
  flex: 0 0 auto;
  margin: 3px 0 0;
  width: 18px;
  height: 18px;
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  place-content: center;
  background: var(--surface);
  border: 1.5px solid var(--ink-3);
  border-radius: 50%;
  transition: border-color .15s ease, background-color .15s ease;
}
.opt input[type=checkbox] { border-radius: 3px; }
.opt input:hover { border-color: var(--ink); }
.opt input:checked { border-color: var(--accent-solid); }
.opt input[type=radio]:checked::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-solid);
}
.opt input[type=checkbox]:checked { background: var(--accent-solid); }
.opt input[type=checkbox]:checked::before {
  content: "";
  width: 4px;
  height: 9px;
  margin-top: -1px;
  border: solid var(--on-accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.opt-label { font-size: 15px; }
.opt:has(input:checked) { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 6%, transparent); }

.text-answer {
  display: block;
  width: calc(100% - 2.1em);
  margin-left: 2.1em;
  padding: 12px 14px;
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  resize: vertical;
  min-height: 96px;
}
.text-answer::placeholder { color: var(--ink-3); }

/* 排序题 */
.rank { list-style: none; margin: 12px 0 0 2.1em; padding: 0; display: grid; gap: 6px; }
.rank-item {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--rule-2);
  border-radius: var(--radius);
  background: var(--surface);
}
.rank-item:first-child { border-color: var(--rule); }
.rank-pos {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-3);
  text-align: center;
}
.rank-label { font-size: 15px; }
.rank-actions { display: flex; gap: 4px; }
.btn-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  font-size: 14px;
  color: var(--ink-2);
  background: transparent;
  border: 1px solid var(--rule-2);
  border-radius: var(--radius);
  cursor: pointer;
}
.btn-icon:hover { color: var(--ink); border-color: var(--rule); background: var(--paper); }
.btn-icon:disabled { opacity: .35; cursor: default; }

/* ---------- 工作量证明 ---------- */
.pow { padding: 20px 0 6px; border-top: 1px solid var(--rule-2); margin-top: 8px; }
.pow-status { color: var(--ink-2); }
.pow-status[data-state="error"] { color: var(--stamp); }
.pow-status[data-state="ok"]::before { content: "✓ "; color: var(--ok); }
.pow-status[data-state="run"]::before { content: ""; }

/* ---------- 验证码 ---------- */
.captcha { padding: 26px 0 6px; border-top: 1px solid var(--rule-2); margin-top: 8px; }
.captcha-title { font-size: 15px; font-family: var(--sans); font-weight: 600; margin: 0 0 12px; letter-spacing: .02em; }
.captcha-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.captcha-img {
  display: block;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: #fff;
  width: 320px;
  height: 100px;
}
.captcha-answer {
  display: block;
  width: 160px;
  padding: 10px 12px;
  font-family: var(--mono);
  font-size: 20px;
  letter-spacing: .28em;
  text-align: center;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.field { display: block; }
.field-label { display: block; font-size: 13px; color: var(--ink-2); margin-bottom: 6px; }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-block;
  padding: 11px 22px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover { border-color: var(--ink-3); text-decoration: none; }
.btn-primary { color: var(--on-accent); background: var(--accent-solid); border-color: var(--accent-solid); }
.btn-primary:hover { background: var(--accent-solid-hover); border-color: var(--accent-solid-hover); color: var(--on-accent); }
.btn-primary[disabled] { opacity: .6; cursor: progress; }
.btn-quiet {
  display: inline-block;
  padding: 8px 14px;
  font-size: 14px;
  color: var(--blue);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  cursor: pointer;
}
.btn-quiet:hover { background: var(--paper); text-decoration: none; }

/* ---------- 提交条（功能层：毛玻璃） ---------- */
.actionbar {
  position: sticky;
  bottom: 0;
  margin: 8px -44px -34px;
  padding: 14px 44px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border-top: 1px solid var(--glass-border);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.actionbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.actionbar-note { color: var(--ink-2); font-size: 13px; }

/* ---------- 提示 ---------- */
.notice {
  border: 1px solid var(--rule);
  border-left-width: 2px;
  border-radius: var(--radius);
  padding: 14px 16px;
  margin: 22px 0;
  font-size: 14px;
}
.notice-title { font-weight: 600; margin-bottom: 6px; }
.notice ul { margin: 0; padding-left: 18px; }
.notice-error { border-left-color: var(--stamp); background: color-mix(in srgb, var(--stamp) 6%, transparent); }
.notice-warn { border-left-color: var(--ink-3); }

/* 状态块 */
.state { padding: 34px 0 10px; text-align: left; }
.state-stamp {
  display: inline-block;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .24em;
  color: var(--stamp);
  border: 2px solid var(--stamp);
  border-radius: 3px;
  padding: 4px 12px;
  margin-bottom: 18px;
  transform: rotate(-3deg);
}
.state-title { font-family: var(--serif); font-size: 22px; margin-bottom: 8px; }
.state-text { color: var(--ink-2); margin-bottom: 20px; }

/* ---------- 结果 ---------- */
.result-q { padding-top: 26px; }
.bars { list-style: none; margin: 8px 0 0 2.1em; padding: 0; display: grid; gap: 14px; }
.bar-row { display: block; }
.bar-head { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; margin-bottom: 6px; }
.bar-label { color: var(--ink); }
.bar-value { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.bar { height: 8px; background: var(--rule-2); border-radius: 999px; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: var(--accent-solid); border-radius: 999px; }

.rank-table { width: 100%; border-collapse: collapse; margin: 8px 0 0 0; font-size: 14px; }
.rank-table th, .rank-table td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--rule-2); }
.rank-table th { font-weight: 500; color: var(--ink-3); font-size: 12px; letter-spacing: .04em; }
.rank-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.rank-table tr:last-child td { border-bottom: 0; }

.empty { padding: 40px 0; border-top: 1px solid var(--rule); }
.empty-title { font-family: var(--serif); font-size: 20px; margin-bottom: 6px; }
.back { margin-top: 26px; }

/* ---------- 页脚 ---------- */
.foot { border-top: 1px solid var(--rule); margin-top: 40px; }
.foot-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px;
  font-size: 13px;
  color: var(--ink-3);
}
.foot-meta { margin-top: 6px; }

/* ---------- 响应式 ---------- */
@media (max-width: 640px) {
  .wrap { padding: 28px 16px 120px; }
  .ballot { padding: 24px 20px 20px; border-radius: var(--radius); }
  .actionbar { margin: 8px -20px -20px; padding: 12px 20px; border-radius: 0; }
  .actionbar-inner { flex-direction: column-reverse; align-items: stretch; gap: 10px; }
  .actionbar-note { text-align: center; }
  .btn-primary { width: 100%; text-align: center; }
  .opts, .rank, .q-hint, .q-note, .text-answer, .bars { margin-left: 0; width: 100%; }
  .captcha-img { width: 100%; height: auto; }
  .captcha-answer { width: 100%; }
  .poll-title { font-size: 19px; }
  .btn-icon { width: 44px; height: 44px; }
  .btn { min-height: 44px; }
  .opt { padding: 14px; }
  .topbar-inner { padding: 0 16px; }
}

/* ---------- 动效偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- 打印 ---------- */
@media print {
  .topbar, .actionbar, .foot, .skip-link { display: none; }
  .ballot { border: 0; padding: 0; }
  body { background: #fff; }
}

/* ---------- 结果条宽度（避免内联样式，配合 CSP） ---------- */
.pct-0 { width: 0%; }
.pct-1 { width: 1%; }
.pct-2 { width: 2%; }
.pct-3 { width: 3%; }
.pct-4 { width: 4%; }
.pct-5 { width: 5%; }
.pct-6 { width: 6%; }
.pct-7 { width: 7%; }
.pct-8 { width: 8%; }
.pct-9 { width: 9%; }
.pct-10 { width: 10%; }
.pct-11 { width: 11%; }
.pct-12 { width: 12%; }
.pct-13 { width: 13%; }
.pct-14 { width: 14%; }
.pct-15 { width: 15%; }
.pct-16 { width: 16%; }
.pct-17 { width: 17%; }
.pct-18 { width: 18%; }
.pct-19 { width: 19%; }
.pct-20 { width: 20%; }
.pct-21 { width: 21%; }
.pct-22 { width: 22%; }
.pct-23 { width: 23%; }
.pct-24 { width: 24%; }
.pct-25 { width: 25%; }
.pct-26 { width: 26%; }
.pct-27 { width: 27%; }
.pct-28 { width: 28%; }
.pct-29 { width: 29%; }
.pct-30 { width: 30%; }
.pct-31 { width: 31%; }
.pct-32 { width: 32%; }
.pct-33 { width: 33%; }
.pct-34 { width: 34%; }
.pct-35 { width: 35%; }
.pct-36 { width: 36%; }
.pct-37 { width: 37%; }
.pct-38 { width: 38%; }
.pct-39 { width: 39%; }
.pct-40 { width: 40%; }
.pct-41 { width: 41%; }
.pct-42 { width: 42%; }
.pct-43 { width: 43%; }
.pct-44 { width: 44%; }
.pct-45 { width: 45%; }
.pct-46 { width: 46%; }
.pct-47 { width: 47%; }
.pct-48 { width: 48%; }
.pct-49 { width: 49%; }
.pct-50 { width: 50%; }
.pct-51 { width: 51%; }
.pct-52 { width: 52%; }
.pct-53 { width: 53%; }
.pct-54 { width: 54%; }
.pct-55 { width: 55%; }
.pct-56 { width: 56%; }
.pct-57 { width: 57%; }
.pct-58 { width: 58%; }
.pct-59 { width: 59%; }
.pct-60 { width: 60%; }
.pct-61 { width: 61%; }
.pct-62 { width: 62%; }
.pct-63 { width: 63%; }
.pct-64 { width: 64%; }
.pct-65 { width: 65%; }
.pct-66 { width: 66%; }
.pct-67 { width: 67%; }
.pct-68 { width: 68%; }
.pct-69 { width: 69%; }
.pct-70 { width: 70%; }
.pct-71 { width: 71%; }
.pct-72 { width: 72%; }
.pct-73 { width: 73%; }
.pct-74 { width: 74%; }
.pct-75 { width: 75%; }
.pct-76 { width: 76%; }
.pct-77 { width: 77%; }
.pct-78 { width: 78%; }
.pct-79 { width: 79%; }
.pct-80 { width: 80%; }
.pct-81 { width: 81%; }
.pct-82 { width: 82%; }
.pct-83 { width: 83%; }
.pct-84 { width: 84%; }
.pct-85 { width: 85%; }
.pct-86 { width: 86%; }
.pct-87 { width: 87%; }
.pct-88 { width: 88%; }
.pct-89 { width: 89%; }
.pct-90 { width: 90%; }
.pct-91 { width: 91%; }
.pct-92 { width: 92%; }
.pct-93 { width: 93%; }
.pct-94 { width: 94%; }
.pct-95 { width: 95%; }
.pct-96 { width: 96%; }
.pct-97 { width: 97%; }
.pct-98 { width: 98%; }
.pct-99 { width: 99%; }
.pct-100 { width: 100%; }