:root {
  color-scheme: dark;
  --bg: #101311;
  --surface: #171c19;
  --surface-2: #202720;
  --text: #f3f0e8;
  --muted: #9ca89f;
  --line: #2a312c;
  --gold: #d9ad59;
  --red: #c9513e;
  --mint: #66c99a;
  --page-width: 480px;
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

.app-version {
  margin: 18px 0 4px;
  color: var(--muted);
  font-size: 0.72rem;
  text-align: center;
}

html {
  background: #090b0a;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% 20%, rgba(217, 173, 89, 0.08), transparent 32%),
    var(--bg);
  color: var(--text);
  letter-spacing: 0;
}

button {
  font: inherit;
}

button:focus-visible {
  outline: 3px solid rgba(102, 201, 154, 0.65);
  outline-offset: 3px;
}

.app-shell {
  width: min(100%, var(--page-width));
  min-height: 100dvh;
  margin: 0 auto;
  position: relative;
  padding: max(16px, env(safe-area-inset-top)) 20px calc(92px + env(safe-area-inset-bottom));
}

.view {
  display: none;
}

.view.is-active {
  display: block;
}

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 7px;
  font-size: 1.45rem;
  line-height: 1.25;
  font-weight: 500;
}

.presence {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 10px rgba(102, 201, 154, 0.75);
}

.icon-button {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text);
}

.icon-button svg,
.bottom-nav svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.reward-progress {
  margin-top: 18px;
}

.progress-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.progress-heading h2 {
  margin-bottom: 0;
  font-size: 0.95rem;
  font-weight: 500;
}

.progress-heading output {
  color: var(--gold);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

.progress-track {
  width: 100%;
  height: 6px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--line);
}

.progress-track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--gold);
  transition: width 220ms ease;
}

#progress-hint {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.woodfish-stage {
  min-height: 248px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.woodfish-stage > p {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 0.85rem;
  text-align: center;
}

.woodfish-button {
  width: 244px;
  height: 172px;
  position: relative;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.woodfish-button:active .woodfish-body {
  transform: translateY(4px) rotate(-1deg) scale(0.985);
}

.woodfish-body {
  position: absolute;
  width: 192px;
  height: 140px;
  left: 16px;
  top: 20px;
  overflow: hidden;
  border-radius: 49% 46% 44% 50%;
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.2), transparent 24%),
    linear-gradient(130deg, #ad3e32, #6d2924 67%, #4a211d);
  box-shadow:
    0 20px 34px rgba(0, 0, 0, 0.42),
    0 0 34px rgba(201, 81, 62, 0.2);
  transform: rotate(-2deg);
  transition: transform 100ms ease;
}

.woodfish-eye {
  position: absolute;
  width: 58px;
  height: 54px;
  right: 27px;
  top: 41px;
  border: 3px solid rgba(217, 173, 89, 0.6);
  border-radius: 50% 48% 44% 52%;
  background: #191412;
  box-shadow: inset 10px 0 0 #47211d;
}

.circuit {
  position: absolute;
  left: 25px;
  right: 26px;
  height: 3px;
  border-radius: 2px;
  background: var(--gold);
  opacity: 0.85;
}

.circuit::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  right: 18px;
  top: -3px;
  border-radius: 50%;
  background: var(--gold);
}

.circuit-one {
  top: 26px;
  transform: rotate(-4deg);
}

.circuit-two {
  top: 58px;
  right: 72px;
  opacity: 0.45;
}

.status-light {
  position: absolute;
  width: 8px;
  height: 8px;
  left: 38px;
  bottom: 27px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 13px rgba(102, 201, 154, 0.9);
}

.mallet {
  position: absolute;
  width: 142px;
  height: 13px;
  right: 12px;
  bottom: 21px;
  border-radius: 8px;
  background: linear-gradient(90deg, #764629, var(--gold));
  box-shadow: 0 8px 14px rgba(0, 0, 0, 0.3);
  transform: rotate(-34deg);
}

.mallet::after {
  content: "";
  position: absolute;
  width: 31px;
  height: 31px;
  right: -10px;
  top: -9px;
  border-radius: 50%;
  background: var(--red);
}

.woodfish-button.is-struck .mallet {
  animation: strike 160ms ease-out;
}

.tap-feedback {
  position: absolute;
  z-index: 3;
  top: 22px;
  right: 64px;
  min-width: 80px;
  min-height: 28px;
  color: var(--gold);
  font-size: 0.95rem;
  font-weight: 500;
  text-align: center;
  pointer-events: none;
}

.tap-feedback.is-visible {
  animation: merit-rise 520ms ease-out;
}

.merit-summary {
  text-align: center;
}

.merit-summary > p {
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 0.82rem;
}

.merit-summary > strong {
  display: inline-block;
  color: var(--text);
  font-size: 2.35rem;
  line-height: 1.1;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.merit-summary > span {
  color: var(--gold);
  font-size: 0.78rem;
}

.metric-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 12px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.metric-row > div {
  padding: 10px 8px;
}

.metric-row > div + div {
  border-left: 1px solid var(--line);
}

.metric-row b,
.metric-row small {
  display: block;
}

.metric-row b {
  font-size: 1rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.metric-row small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.74rem;
}

.primary-actions {
  display: grid;
  grid-template-columns: 1.18fr 0.82fr;
  gap: 10px;
  margin-top: 12px;
}

.action-button {
  min-height: 48px;
  border-radius: 8px;
  border: 0;
  font-size: 0.92rem;
  font-weight: 500;
}

.reward-button {
  background: var(--gold);
  color: #241d12;
}

.reward-button:disabled {
  background: #252b27;
  color: #7f8982;
}

.finish-button {
  border: 1px solid #39413b;
  background: var(--surface-2);
  color: var(--text);
}

.bottom-nav {
  position: fixed;
  z-index: 10;
  left: 50%;
  bottom: 0;
  width: min(100%, var(--page-width));
  min-height: 66px;
  padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  background: rgba(23, 28, 25, 0.96);
  backdrop-filter: blur(16px);
  transform: translateX(-50%);
}

.nav-button {
  min-height: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 0;
  background: transparent;
  color: #7f8982;
  font-size: 0.72rem;
}

.nav-button.is-active {
  color: var(--gold);
}

.placeholder-view {
  padding-top: 30px;
}

.placeholder-view h2 {
  margin-bottom: 9px;
  font-size: 1.4rem;
  font-weight: 500;
}

.placeholder-view p {
  color: var(--muted);
}

.sheet-dialog {
  width: min(100% - 24px, 456px);
  max-height: calc(100dvh - 24px);
  margin: auto auto 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 12px 12px 0 0;
  background: var(--surface);
  color: var(--text);
  overflow-y: auto;
}

.sheet-dialog::backdrop {
  background: rgba(0, 0, 0, 0.66);
  backdrop-filter: blur(3px);
}

.sheet-content {
  padding: 12px 20px calc(22px + env(safe-area-inset-bottom));
}

.sheet-handle {
  width: 42px;
  height: 4px;
  margin: 0 auto 20px;
  border-radius: 2px;
  background: #4b554e;
}

.eyebrow {
  margin-bottom: 5px;
  color: var(--gold);
  font-size: 0.75rem;
}

.sheet-content h2 {
  margin-bottom: 16px;
  font-size: 1.45rem;
  font-weight: 500;
}

.sheet-content blockquote {
  margin: 0;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: #e3e0d8;
  font-size: 1rem;
  line-height: 1.7;
}

.finish-card-preview {
  display: block;
  width: min(180px, 52vw);
  height: auto;
  aspect-ratio: 3 / 4;
  margin: 0 auto 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f4f8f6;
  box-shadow: 0 10px 24px rgba(22, 63, 56, 0.12);
}

.finish-card-preview[hidden] {
  display: none;
}

.finish-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 18px 0;
}

.finish-stats div {
  text-align: center;
}

.finish-stats div + div {
  border-left: 1px solid var(--line);
}

.finish-stats dt {
  color: var(--muted);
  font-size: 0.72rem;
}

.finish-stats dd {
  margin: 5px 0 0;
  color: var(--gold);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

.sheet-content .action-button {
  width: 100%;
}

.text-button {
  width: 100%;
  min-height: 44px;
  margin-top: 6px;
  border: 0;
  background: transparent;
  color: var(--muted);
}

.toast {
  position: fixed;
  z-index: 30;
  left: 50%;
  bottom: 92px;
  max-width: calc(100% - 40px);
  padding: 10px 14px;
  border-radius: 8px;
  background: #e6e1d3;
  color: #1c211e;
  font-size: 0.82rem;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px);
  transition: 180ms ease;
}

.toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

@keyframes strike {
  0% { transform: rotate(-34deg); }
  45% { transform: rotate(-50deg) translate(-8px, -5px); }
  100% { transform: rotate(-34deg); }
}

@keyframes merit-rise {
  from { opacity: 0; transform: translateY(12px); }
  30% { opacity: 1; }
  to { opacity: 0; transform: translateY(-18px); }
}

@media (min-width: 700px) {
  .app-shell {
    min-height: calc(100dvh - 32px);
    margin-block: 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(16, 19, 17, 0.92);
  }

  .bottom-nav {
    bottom: 16px;
    border: 1px solid var(--line);
    border-radius: 0 0 16px 16px;
  }
}

/* B · 清爽治愈主题 */
:root{color-scheme:light;--bg:#f4faf9;--surface:#fff;--surface-2:#e4f0e9;--text:#163f38;--muted:#57756e;--line:#d6e5df;--gold:#176b59;--red:#c87b4b;--mint:#73bda5}
html{background:#eaf4f0}body{background:var(--bg);color:var(--text)}
.app-shell{background:var(--bg);padding-top:max(22px,env(safe-area-inset-top))}
h1{display:flex;align-items:center;gap:9px;font-size:1.25rem;font-weight:650}.brand-mark{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:#d7eee4;color:#176b59;font-size:1rem}
.home-presence{display:flex;align-items:center;justify-content:space-between;margin-top:18px}.presence{color:var(--muted)}.status-dot{background:#4da987;box-shadow:none}.company-pill{padding:7px 11px;border-radius:999px;background:#e4f0e9;color:#176b59;font-size:.72rem}
.home-greeting{text-align:center;margin:30px 0 18px}.home-greeting h2{margin:0 0 8px;font-size:1.8rem;line-height:1.35;letter-spacing:-.03em}.home-greeting p{margin:0;color:var(--muted);font-size:.86rem}
.woodfish-stage{margin:0}.woodfish-stage:before{content:"";position:absolute;left:50%;transform:translateX(-50%);width:250px;height:170px;margin-top:28px;border-radius:50%;background:#d9eee4;z-index:-1}.woodfish-button{height:220px}.woodfish-body{background:linear-gradient(145deg,#eda873,#c87b4b 62%,#9d552f);box-shadow:0 16px 24px rgba(119,79,49,.18);border-color:#9d552f}.woodfish-eye{background:#63351f}.status-light{background:#f7d7a6;box-shadow:none}.circuit{border-color:rgba(255,235,205,.55)}.mallet{background:#b9683c;box-shadow:none}.woodfish-stage>p{color:var(--muted);font-size:.78rem}
.merit-summary{margin:0;text-align:center}.merit-summary p{margin:0;color:var(--muted);font-size:.75rem}.merit-summary strong{display:inline-block;margin-top:2px;font-size:2rem;font-weight:650;font-variant-numeric:tabular-nums}.merit-summary>span{color:var(--muted);font-size:.8rem}.city-summary{margin-top:16px}.metric-row{border:0;display:grid;grid-template-columns:1fr 1fr;gap:0}.metric-row>div{text-align:center}.metric-row>div+div{border-left:1px solid var(--line)}.metric-row b{font-size:1.05rem}.metric-row small{color:var(--muted)}
.reward-progress{margin-top:18px;padding:16px;border-radius:20px;background:#fff;box-shadow:0 8px 22px rgba(49,99,83,.08)}.progress-heading h2{font-size:.95rem}.progress-track{height:8px;background:#e4f0e9}.progress-track span{background:#73bda5}.progress-heading output{color:#176b59}.reward-progress p{color:var(--muted)}.reward-progress .action-button{width:100%;margin-top:10px}
.primary-actions{display:block;margin-top:12px}.action-button{border-radius:999px}.reward-button{background:#176b59;color:#fff}.reward-button:disabled{background:#dcebe5;color:#6e8d84}.finish-button{width:100%;margin-top:10px;border:0;background:#e4f0e9;color:#176b59}
.bottom-nav{border-top:1px solid var(--line);background:rgba(255,255,255,.96)}.nav-button{color:#759088}.nav-button.is-active{color:#176b59;background:#d7eee4;border-radius:16px}
.secondary-view{padding-top:10px}.section-header h2{font-size:1.45rem}.eyebrow{color:#176b59}.ranking-row,.feed-item,.profile-header,.profile-stats,.profile-menu,.finish-preview{background:#fff;border-color:var(--line);color:var(--text)}.ranking-row{border-bottom-color:var(--line)}.rank-value,.feed-time,.profile-caption,.profile-menu small{color:var(--muted)}.filter-button,.composer-trigger{background:#fff;border-color:var(--line);color:var(--muted);border-radius:999px}.filter-button.is-active{background:#d7eee4;color:#176b59;border-color:#d7eee4}.feed-status{color:#176b59}.mini-avatar,.profile-avatar{background:#d7eee4;color:#176b59}.profile-menu button{color:var(--text);border-bottom-color:var(--line)}.wechat-login-button{background:#176b59;border-radius:999px}.finish-preview{border-radius:20px}.sheet-dialog{background:#fff;border-color:var(--line);border-radius:24px 24px 0 0}.sheet-dialog::backdrop{background:rgba(22,63,56,.2)}.sheet-handle{background:#b7d3c8}.sheet-content blockquote{border-color:var(--line);color:var(--text)}.text-button{color:var(--muted)}.toast{background:#163f38;color:#fff;border-radius:999px}
.tap-feedback{opacity:0}.tap-feedback.is-visible{opacity:1}

@media (max-width: 360px) {
  .app-shell {
    padding-inline: 16px;
  }

  .woodfish-button {
    transform: scale(0.9);
  }

  .primary-actions {
    grid-template-columns: 1fr;
  }
}

/* B theme: 清爽治愈 */
:root {
  color-scheme: light;
  --bg: #f4faf9;
  --surface: #ffffff;
  --surface-2: #e4f0e9;
  --text: #163f38;
  --muted: #57756e;
  --line: #d6e5df;
  --gold: #176b59;
  --red: #c87b4b;
  --mint: #6aaa90;
}

html { background: #e8f1ed; }

body {
  background: var(--bg);
  color: var(--text);
}

.app-shell { background: var(--bg); }

h1 {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 1.16rem;
  font-weight: 600;
}

.brand-mark {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #d7eee4;
  color: #176b59;
  font-size: 1rem;
}

.icon-button {
  background: var(--surface-2);
  color: var(--gold);
}

.status-dot {
  background: #4d9b80;
  box-shadow: none;
}

.home-presence {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
}

.company-pill {
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--gold);
  font-size: 0.72rem;
  white-space: nowrap;
}

.home-greeting {
  margin: 26px 0 17px;
  text-align: center;
}

.home-greeting h2 {
  margin-bottom: 8px;
  font-size: 1.75rem;
  line-height: 1.35;
  font-weight: 600;
}

.home-greeting p {
  color: var(--muted);
  font-size: 0.78rem;
}

.merit-summary {
  margin: 0;
  text-align: center;
}

.merit-summary p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.72rem;
}

.merit-summary strong {
  color: var(--text);
  font-size: 1.9rem;
  font-weight: 600;
}

.merit-summary > span {
  color: var(--muted);
  font-size: 0.75rem;
}

.woodfish-stage { margin: 0; }

.woodfish-stage::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 28px;
  z-index: 0;
  width: 250px;
  height: 165px;
  border-radius: 50%;
  background: #d9eee4;
  transform: translateX(-50%);
}

.woodfish-button { height: 214px; }
.woodfish-button { z-index: 1; }

.woodfish-body {
  width: 176px;
  height: 122px;
  left: 22px;
  top: 43px;
  border: 0;
  background: linear-gradient(145deg, #f0b47f 0%, #d98e58 52%, #a95f36 100%);
  box-shadow: inset 0 4px 3px #f6c99d, inset 0 -7px 0 #8f4c2a, 0 16px 22px rgba(87, 70, 50, 0.17);
  transform: rotate(-13deg);
}

.circuit {
  border-color: rgba(255, 224, 184, 0.62);
  background: rgba(255, 224, 184, 0.62);
  box-shadow: none;
}

.woodfish-eye {
  width: 58px;
  height: 25px;
  right: -1px;
  top: 54px;
  border: 0;
  border-radius: 70% 18% 45% 58%;
  background: #60351f;
  box-shadow: inset 0 4px 3px #452719;
}

.status-light { display: none; }

.mallet {
  width: 126px;
  right: 2px;
  bottom: 25px;
  background: linear-gradient(#e8ad75, #ad6538);
  box-shadow: none;
}

.mallet::before {
  content: "";
  position: absolute;
  border: 0;
  background: linear-gradient(140deg, #f0bf8a, #c57a45);
  box-shadow: inset 0 -3px 0 #9e592f;
}

.mallet::after { background: #c57a45; }

.woodfish-stage > p { color: var(--muted); }
.tap-feedback { opacity: 0; }
.tap-feedback.is-visible { opacity: 1; }

.city-summary { margin-top: 12px; }

.metric-row {
  border: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.metric-row > div + div { border-left: 1px solid var(--line); }
.metric-row b { color: var(--text); font-size: 1.02rem; }

.reward-progress {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid #e5efea;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(40, 90, 72, 0.07);
}

.progress-heading h2 { font-size: 0.92rem; }
.progress-heading output { color: var(--gold); }
.progress-track { background: var(--surface-2); }
.progress-track span { background: #6aaa90; }
.reward-progress p { color: var(--muted); }

.reward-progress .action-button {
  width: 100%;
  margin-top: 11px;
}

.primary-actions { display: block; margin-top: 12px; }

.action-button { border-radius: 999px; }
.reward-button { background: var(--gold); color: #fff; }
.reward-button:disabled { background: #dfece6; color: #6d8a81; }

.finish-button {
  width: 100%;
  border: 0;
  background: var(--gold);
  color: #fff;
}

.bottom-nav {
  border-top-color: #e3ece7;
  background: rgba(255, 255, 255, 0.96);
}

.nav-button { color: #708a82; border-radius: 15px; }
.nav-button.is-active { color: var(--gold); background: #d7eee4; }

.section-header h2 { font-weight: 600; }
.live-label { color: var(--muted); }

.ranking-heading { border-color: var(--line); }

.ranking-list {
  padding-inline: 14px;
  border-radius: 18px;
  background: #fff;
}

.ranking-row { border-color: #edf3ef; }
.ranking-row:last-child { border-bottom: 0; }
.ranking-row .rank-number { color: #789087; }
.ranking-row:nth-child(-n+3) .rank-number { color: var(--gold); font-weight: 600; }
.current-city-rank { border-radius: 14px; }

.filter-button,
.composer-trigger {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
}

.filter-button.is-active {
  border-color: #d7eee4;
  background: #d7eee4;
  color: var(--gold);
}

.composer-trigger { border-style: dashed; }

.mini-avatar,
.profile-avatar {
  background: #d7eee4;
  color: var(--gold);
}

.feed-item {
  margin-top: 10px;
  padding: 16px;
  border: 0;
  border-radius: 18px;
  background: #fff;
}

.feed-copy,
.finish-preview p { color: var(--text); }
.feed-status { color: var(--gold); }

.reaction-button {
  min-height: 44px;
  border-radius: 999px;
  background: #eef5f1;
  color: var(--muted);
}

.reaction-button.is-reacted { color: var(--gold); background: #d7eee4; }

.profile-header { border-color: var(--line); }
.profile-avatar { border-radius: 20px; }

.wechat-login-button {
  border-radius: 999px;
  background: var(--gold);
  color: #fff;
}

.profile-stats,
.profile-menu {
  padding-inline: 14px;
  border: 0;
  border-radius: 18px;
  background: #fff;
}

.profile-stats > div + div,
.profile-menu button { border-color: #edf3ef; }
.profile-menu button:last-child { border-bottom: 0; }
.profile-menu svg { stroke: var(--gold); }

.finish-preview {
  border: 0;
  border-radius: 18px;
  background: var(--surface-2);
}

.sheet-dialog {
  border: 0;
  border-radius: 24px 24px 0 0;
  background: #fff;
  color: var(--text);
}

.sheet-dialog::backdrop { background: rgba(22, 63, 56, 0.28); }
.sheet-handle { background: #bfd3c9; }

.sheet-content blockquote {
  border: 0;
  border-radius: 16px;
  background: #eef6f2;
  color: var(--text);
}

.finish-stats div + div { border-color: var(--line); }
.finish-stats dd { color: var(--gold); }
.text-button { color: var(--muted); }

.qr-code {
  border-color: #f4faf9;
  border-radius: 12px;
  background: #f4faf9;
}

.qr-code span {
  background: linear-gradient(90deg, #163f38 45%, transparent 45% 56%, #163f38 56%), linear-gradient(#163f38 45%, transparent 45% 56%, #163f38 56%);
}

.reward-orb {
  border-radius: 24px;
  background: #d7eee4;
  color: var(--gold);
  box-shadow: none;
}

.compose-sheet select,
.compose-sheet textarea {
  border-color: var(--line);
  border-radius: 14px;
  background: var(--bg);
}

.toast {
  border-radius: 999px;
  background: var(--text);
  color: #fff;
}

@media (min-width: 700px) {
  .app-shell {
    border-color: var(--line);
    background: var(--bg);
    box-shadow: 0 0 50px rgba(42, 90, 72, 0.08);
  }
}

@media (max-width: 360px) {
  .app-shell { padding-inline: 16px; }
  .company-pill { padding-inline: 7px; }
  .home-presence { gap: 4px; }
  .presence { font-size: 0.75rem; }
}

@media (max-height: 900px) {
  .home-greeting { margin-block: 14px 8px; }
  .home-greeting h2 { font-size: 1.55rem; }
  .woodfish-stage { min-height: 190px; }
  .woodfish-button { height: 158px; }
  .woodfish-stage::before { top: 12px; height: 145px; }
  .woodfish-body { top: 23px; }
  .mallet { bottom: 6px; }
  .woodfish-stage > p { margin-top: 5px; }
  .city-summary { margin-top: 6px; }
  .reward-progress { margin-top: 12px; padding-block: 12px; }
  .reward-progress .action-button { margin-top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

.secondary-view {
  padding-top: 3px;
}

.section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 4px;
}

.section-header h2 {
  margin-bottom: 0;
  font-size: 1.45rem;
  font-weight: 500;
}

.eyebrow {
  margin-bottom: 5px;
  color: var(--gold);
  font-size: 0.75rem;
}

.section-intro {
  margin: 8px 0 18px;
  color: var(--muted);
  font-size: 0.88rem;
}

.live-label {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  color: var(--muted);
  font-size: 0.78rem;
}

.ranking-section {
  padding-top: 22px;
}

.ranking-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--line);
}

.ranking-heading h3 {
  margin: 0;
  font-size: 1.06rem;
  font-weight: 500;
}

.ranking-heading p,
.ranking-heading > span {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 0.72rem;
}

.ranking-row {
  width: 100%;
  min-height: 54px;
  display: grid;
  grid-template-columns: 34px minmax(72px, 1fr) 70px 78px;
  align-items: center;
  padding: 0;
  border: 0;
  border-bottom: 1px solid rgba(42, 49, 44, 0.85);
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-size: 0.82rem;
  text-align: left;
  cursor: pointer;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.ranking-row:hover { background: #f5faf7; }

.ranking-row.is-selected {
  background: #e8f4ee;
  box-shadow: inset 3px 0 0 #47957c;
}

.ranking-row.is-selected .rank-city {
  color: #176b59;
  font-weight: 600;
}

.ranking-row:focus-visible {
  position: relative;
  z-index: 1;
  outline: 3px solid rgba(71, 149, 124, 0.38);
  outline-offset: -3px;
}

.ranking-row .rank-number {
  color: #79837c;
  font-variant-numeric: tabular-nums;
}

.ranking-row:nth-child(1) .rank-number { color: var(--gold); }
.ranking-row:nth-child(2) .rank-number { color: var(--red); }
.ranking-row:nth-child(3) .rank-number { color: var(--mint); }

.ranking-row .rank-city {
  color: var(--text);
}

.ranking-row .rank-value {
  color: var(--muted);
  text-align: right;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.current-city-rank {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.82rem;
}

.current-city-rank strong {
  color: var(--gold);
  font-weight: 500;
}

.filter-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 3px;
  scrollbar-width: none;
}

.filter-row::-webkit-scrollbar {
  display: none;
}

.filter-button {
  min-height: 38px;
  padding: 0 13px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.82rem;
}

.filter-button.is-active {
  background: var(--gold);
  color: #251e12;
}

.composer-trigger {
  width: 100%;
  min-height: 52px;
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 13px;
  border: 0;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--muted);
  text-align: left;
}

.mini-avatar {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gold);
  color: #251e12;
  font-size: 0.76rem;
  line-height: 1;
}

.community-feed {
  margin-top: 8px;
}

.feed-item {
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.feed-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.feed-author {
  display: flex;
  align-items: center;
  gap: 9px;
}

.feed-author strong,
.feed-author > div > span {
  display: block;
}

.feed-author strong {
  font-size: 0.85rem;
  font-weight: 500;
}

.feed-author > div > span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.7rem;
}

.feed-status {
  color: var(--mint);
}

.feed-time {
  color: #768078;
  font-size: 0.7rem;
}

.feed-copy {
  margin: 13px 0;
  color: #e2dfd7;
  font-size: 0.92rem;
  line-height: 1.7;
}

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

.community-actions { display: flex; gap: 12px; align-items: center; margin-top: 12px; }
.community-link { appearance: none; border: 0; background: transparent; padding: 4px 0; color: var(--muted); font: inherit; font-size: 13px; }
.community-link.danger { color: var(--danger, #b54a4a); }
.comment-list { display: grid; gap: 12px; max-height: 44vh; overflow: auto; margin: 12px 0 16px; }
.comment-item { padding: 10px 12px; background: rgba(238,245,241,.7); border-radius: 8px; }
.comment-item header { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 12px; }
.comment-item p { margin: 6px 0 0; line-height: 1.55; }
.comment-form { display: grid; gap: 10px; }
.comment-form textarea { width: 100%; resize: vertical; }

.reaction-button {
  min-height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: var(--surface-2);
  color: #b2bab4;
  font-size: 0.75rem;
}

.reaction-button.is-reacted {
  color: var(--gold);
  background: rgba(217, 173, 89, 0.12);
}

.empty-state {
  padding: 52px 18px;
  color: var(--muted);
  text-align: center;
  line-height: 1.7;
}

.profile-header {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.profile-avatar {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gold);
  color: #251e12;
  font-size: 1.1rem;
  font-weight: 500;
}

.profile-header strong,
.profile-header span {
  display: block;
}

.profile-header strong {
  font-size: 1rem;
  font-weight: 500;
}

.profile-header span {
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.76rem;
}

.wechat-login-button {
  width: 100%;
  min-height: 48px;
  margin-top: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 8px;
  background: var(--mint);
  color: #10251b;
  font-weight: 500;
}

.wechat-login-button svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.profile-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 18px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.profile-stats > div {
  padding: 14px 5px;
  text-align: center;
}

.profile-stats > div + div {
  border-left: 1px solid var(--line);
}

.profile-stats b,
.profile-stats span {
  display: block;
}

.profile-stats b {
  color: var(--gold);
  font-size: 1.1rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.profile-stats span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.72rem;
}

.profile-menu {
  margin-top: 17px;
}

.profile-menu button {
  width: 100%;
  min-height: 54px;
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  text-align: left;
}

.profile-menu svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.profile-menu small {
  color: var(--muted);
  font-size: 0.72rem;
}

.finish-preview {
  margin-top: 20px;
  padding: 15px 16px;
  border-left: 3px solid var(--gold);
  border-radius: 0 8px 8px 0;
  background: var(--surface-2);
}

.finish-preview span {
  color: var(--muted);
  font-size: 0.72rem;
}

.finish-preview p {
  margin: 7px 0 0;
  color: #e9e6de;
  font-size: 0.9rem;
  line-height: 1.6;
}

.dialog-copy {
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.65;
}

.login-sheet {
  text-align: center;
}

.login-sheet .eyebrow,
.login-sheet h2 {
  text-align: left;
}

.phone-login-field {
  display: grid;
  gap: 7px;
  margin-top: 16px;
  color: var(--muted);
  font-size: 0.82rem;
  text-align: left;
}

.phone-login-field input {
  width: 100%;
  min-height: 46px;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface, #fff);
  color: var(--text);
  font: inherit;
  padding: 0 12px;
}

.phone-prefix { color: var(--text); font-size: 0.92rem; }
.phone-code-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.phone-code-row .text-button { min-width: 96px; white-space: nowrap; }
.phone-login-hint { min-height: 1.3em; margin: 12px 0; color: var(--muted); font-size: 0.8rem; text-align: left; }

.qr-code {
  width: 176px;
  aspect-ratio: 1;
  margin: 20px auto 12px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 15px;
  border: 10px solid #f6f4ee;
  background: #f6f4ee;
}

.qr-code span {
  background:
    linear-gradient(90deg, #17201a 45%, transparent 45% 56%, #17201a 56%),
    linear-gradient(#17201a 45%, transparent 45% 56%, #17201a 56%);
}

.qr-hint {
  color: var(--muted);
  font-size: 0.78rem;
}

.reward-result {
  text-align: center;
}

.reward-orb {
  width: 74px;
  height: 74px;
  margin: 10px auto 16px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--red);
  color: #f8e6bd;
  box-shadow: 0 0 30px rgba(201, 81, 62, 0.35);
  font-size: 1.8rem;
}

.reward-result blockquote {
  margin-bottom: 18px;
}

.reward-grant-list {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.reward-grant-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.reward-grant-row > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.reward-grant-row b,
.reward-grant-row small {
  overflow-wrap: anywhere;
}

.reward-grant-row span,
.reward-grant-row small {
  color: var(--muted);
  font-size: 0.76rem;
}

.reward-grant-action {
  width: auto;
  flex: 0 0 auto;
  min-height: 36px;
  margin: 0;
  color: var(--gold);
}

.compose-sheet {
  text-align: left;
}

.field-label {
  display: block;
  margin: 15px 0 7px;
  color: var(--muted);
  font-size: 0.78rem;
}

.compose-sheet select,
.compose-sheet textarea {
  width: 100%;
  border: 1px solid #39423c;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
}

.compose-sheet select {
  min-height: 46px;
  padding: 0 12px;
}

.compose-sheet textarea {
  min-height: 118px;
  padding: 12px;
  resize: vertical;
  line-height: 1.6;
}

.field-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 7px 0 18px;
  color: var(--muted);
  font-size: 0.72rem;
}

@media (max-width: 360px) {
  .ranking-row {
    grid-template-columns: 28px minmax(64px, 1fr) 62px 68px;
    font-size: 0.76rem;
  }

  .ranking-row .rank-value {
    font-size: 0.69rem;
  }
}

/* B theme secondary pages and dialogs (kept last for cascade priority) */
.secondary-view { padding-top: 8px; }
.section-header h2 { color: var(--text); font-weight: 600; }
.eyebrow { color: var(--gold); }
.live-label, .section-intro { color: var(--muted); }

.ranking-heading { border-color: var(--line); }
.ranking-list { padding-inline: 14px; border-radius: 18px; background: #fff; }
.ranking-row { border-color: #edf3ef; }
.ranking-row:last-child { border-bottom: 0; }
.ranking-row .rank-number { color: #789087; }
.ranking-row:nth-child(-n+3) .rank-number { color: var(--gold); font-weight: 600; }
.current-city-rank { border-radius: 14px; background: var(--surface-2); }
.current-city-rank strong { color: var(--gold); }

.filter-button, .composer-trigger { border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--muted); }
.filter-button.is-active { border-color: #d7eee4; background: #d7eee4; color: var(--gold); }
.composer-trigger { border-style: dashed; }
.mini-avatar, .profile-avatar { background: #d7eee4; color: var(--gold); }
.feed-item { margin-top: 10px; padding: 16px; border: 0; border-radius: 18px; background: #fff; }
.feed-copy, .finish-preview p { color: var(--text); }
.feed-status { color: var(--gold); }
.reaction-button { min-height: 44px; border-radius: 999px; background: #eef5f1; color: var(--muted); }
.reaction-button.is-reacted { color: var(--gold); background: #d7eee4; }

.profile-header { border-color: var(--line); }
.profile-avatar { border-radius: 20px; }
.wechat-login-button { border-radius: 999px; background: var(--gold); color: #fff; }
.profile-stats, .profile-menu { padding-inline: 14px; border: 0; border-radius: 18px; background: #fff; }
.profile-stats > div + div, .profile-menu button { border-color: #edf3ef; }
.profile-menu button:last-child { border-bottom: 0; }
.profile-menu svg { stroke: var(--gold); }
.finish-preview { border: 0; border-radius: 18px; background: var(--surface-2); }

.sheet-dialog { border: 0; border-radius: 24px 24px 0 0; background: #fff; color: var(--text); }
.sheet-dialog::backdrop { background: rgba(22, 63, 56, 0.28); }
.sheet-handle { background: #bfd3c9; }
.sheet-content blockquote { border: 0; border-radius: 16px; background: #eef6f2; color: var(--text); }
.finish-stats div + div { border-color: var(--line); }
.finish-stats dd { color: var(--gold); }
.text-button { color: var(--muted); }
.qr-code { border-color: #f4faf9; border-radius: 12px; background: #f4faf9; }
.qr-code span { background: linear-gradient(90deg, #163f38 45%, transparent 45% 56%, #163f38 56%), linear-gradient(#163f38 45%, transparent 45% 56%, #163f38 56%); }
.reward-orb { border-radius: 24px; background: #d7eee4; color: var(--gold); box-shadow: none; }
.compose-sheet select, .compose-sheet textarea { border-color: var(--line); border-radius: 14px; background: var(--bg); }

@media (max-height: 760px) {
  .app-shell { padding-top: max(10px, env(safe-area-inset-top)); }
  .home-presence { margin-top: 4px; }
  .home-greeting { margin-block: 8px 5px; }
  .home-greeting h2 { font-size: 1.45rem; line-height: 1.25; margin-bottom: 4px; }
  .woodfish-stage { min-height: 130px; }
  .woodfish-button { height: 116px; transform: scale(0.84); }
  .woodfish-stage > p { margin-top: 2px; }
  .metric-row > div { padding-block: 5px; }
  .reward-progress { padding-block: 10px; }
  .primary-actions { margin-top: 4px; }
}

/* Selected woodfish E: soft gummy rebound with matching mallet */
.woodfish-stage::before {
  background: radial-gradient(circle at 50% 42%, #e9f6f0 0 32%, #d8eee4 33% 68%, rgba(216, 238, 228, 0.35) 69% 100%);
}

.woodfish-body {
  width: 180px;
  height: 126px;
  left: 20px;
  top: 41px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 48% 46% 44% 52%;
  background: linear-gradient(145deg, rgba(255, 210, 171, 0.98), rgba(241, 132, 101, 0.94) 58%, rgba(168, 72, 58, 0.96));
  box-shadow: inset 11px 11px 17px rgba(255, 255, 255, 0.34), inset -9px -9px 14px rgba(129, 51, 45, 0.18), inset 0 -7px 0 rgba(132, 55, 44, 0.38), 0 18px 23px rgba(83, 80, 60, 0.2);
  transform: rotate(-7deg);
  transform-origin: center;
}

.circuit {
  left: 21px;
  right: 36px;
  height: 78px;
  border: 2px solid rgba(255, 229, 201, 0.58);
  border-radius: 50%;
  background: transparent;
  opacity: 0.75;
}

.circuit::after { display: none; }
.circuit-one { top: 20px; transform: rotate(-4deg); }
.circuit-two { left: 39px; right: 54px; top: 35px; height: 47px; opacity: 0.45; }

.woodfish-eye {
  right: -2px;
  top: 54px;
  width: 63px;
  height: 28px;
  border-radius: 68% 13% 48% 55%;
  background: rgba(91, 48, 36, 0.92);
  box-shadow: inset 0 5px 5px rgba(52, 25, 20, 0.48), 0 2px 0 rgba(255, 199, 157, 0.28);
}

.gummy-highlight {
  position: absolute;
  left: 45px;
  top: 22px;
  width: 34px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.46);
  transform: rotate(-16deg);
}

.gummy-ripple {
  position: absolute;
  z-index: 0;
  left: 16px;
  top: 31px;
  width: 194px;
  height: 132px;
  border: 2px solid rgba(238, 128, 101, 0.28);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

.mallet {
  z-index: 4;
  width: 132px;
  height: 14px;
  right: -4px;
  bottom: 23px;
  border: 1px solid rgba(119, 68, 40, 0.16);
  border-radius: 999px;
  background: linear-gradient(180deg, #e8ae78, #b76d40);
  box-shadow: inset 0 2px 1px rgba(255, 234, 204, 0.62), 0 8px 12px rgba(99, 72, 49, 0.18);
  transform: rotate(-35deg);
  transform-origin: 82% 50%;
}

.mallet::after {
  width: 42px;
  height: 42px;
  right: -12px;
  top: -15px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: linear-gradient(145deg, rgba(255, 188, 153, 0.98), rgba(228, 105, 83, 0.98));
  box-shadow: inset 7px 7px 10px rgba(255, 255, 255, 0.28), inset -5px -5px 8px rgba(139, 53, 45, 0.2), 0 8px 13px rgba(105, 68, 49, 0.2);
}

.woodfish-button.is-struck .woodfish-body { animation: gummy-squish 420ms cubic-bezier(0.2, 0.9, 0.2, 1.2); }
.woodfish-button.is-struck .gummy-ripple { animation: gummy-ripple 520ms ease-out; }
.woodfish-button.is-struck .mallet { animation: gummy-mallet 300ms cubic-bezier(0.2, 0.9, 0.25, 1); }

@keyframes gummy-squish {
  0%, 100% { transform: rotate(-7deg) scale(1); }
  32% { transform: translateY(5px) rotate(-5deg) scale(1.08, 0.84); }
  68% { transform: translateY(-3px) rotate(-8deg) scale(0.97, 1.05); }
}

@keyframes gummy-ripple {
  0% { opacity: 0.68; transform: scale(0.78); }
  100% { opacity: 0; transform: scale(1.32); }
}

@keyframes gummy-mallet {
  0%, 100% { transform: rotate(-35deg); }
  42% { transform: translate(-17px, -9px) rotate(-58deg); }
  70% { transform: translate(3px, 2px) rotate(-31deg); }
}

@media (max-height: 900px) {
  .woodfish-body { width: 170px; height: 116px; left: 25px; top: 23px; }
  .woodfish-eye { top: 49px; }
  .gummy-ripple { left: 20px; top: 13px; width: 184px; height: 125px; }
  .mallet { right: -4px; bottom: 62px; }
}

.woodfish-stage > p { position: relative; z-index: 5; }

/* Clear strike composition: mallet stays inside the play area, hint sits below it. */
.woodfish-stage {
  min-height: 242px;
}

.woodfish-button {
  height: 198px;
}

.mallet {
  width: 118px;
  height: 14px;
  top: 50px;
  right: 3px;
  bottom: auto;
  transform: rotate(-25deg);
  transform-origin: 100% 50%;
}

.mallet::before {
  display: block;
  left: -16px;
  top: -15px;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(255, 198, 166, 0.99), rgba(228, 105, 83, 0.99));
  box-shadow: inset 8px 8px 11px rgba(255, 255, 255, 0.3), inset -5px -5px 8px rgba(139, 53, 45, 0.2), 0 7px 12px rgba(105, 68, 49, 0.18);
}

.mallet::after { display: none; }

.tap-instruction {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  margin: 6px 0 0 !important;
  padding: 0 11px;
  border: 1px solid #d6e7df;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--muted);
  line-height: 1;
}

.tap-instruction::before {
  content: "";
  width: 9px;
  height: 9px;
  border: 2px solid #6aaa90;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(106, 170, 144, 0.13);
}

.tap-instruction b {
  color: var(--gold);
  font-weight: 600;
}

.woodfish-button.is-struck .mallet {
  animation: clear-mallet-strike 300ms cubic-bezier(0.2, 0.9, 0.25, 1);
}

@keyframes clear-mallet-strike {
  0%, 100% { transform: rotate(-25deg); }
  42% { transform: translate(-12px, 11px) rotate(-11deg); }
  72% { transform: translate(2px, -2px) rotate(-29deg); }
}

@media (max-height: 900px) {
  .woodfish-stage { min-height: 176px; }
  .woodfish-button { height: 142px; transform: scale(0.88); margin: -5px 0 -3px; }
  .mallet { top: 25px; right: 1px; }
  .tap-instruction { margin-top: 2px !important; }
}

@media (max-height: 760px) {
  .woodfish-stage { min-height: 135px; }
  .woodfish-button { height: 104px; transform: scale(0.77); margin: -11px 0 -9px; }
  .mallet { top: 10px; }
}

/* Province map: local ECharts canvas with a keyboard-accessible selector. */
.province-map-section {
  margin-top: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.province-map-heading {
  padding: 14px 14px 10px;
}

.province-map-heading h3 {
  margin: 0 0 3px;
  color: var(--text);
  font-size: 1rem;
  font-weight: 600;
}

.province-map-heading p,
.province-map-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.7rem;
}

.province-map-frame {
  height: 300px;
  position: relative;
  overflow: hidden;
  border-block: 1px solid #e5efea;
  background: #f4faf7;
}

.province-map-canvas {
  width: 100%;
  height: 100%;
  touch-action: pan-y;
}

.province-map-state {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  padding: 24px;
  background: rgba(244, 250, 247, 0.96);
  color: var(--muted);
  text-align: center;
}

.province-map-state p { margin: 0; font-size: 0.8rem; }

.map-loading-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #47957c;
  box-shadow: 0 0 0 7px rgba(71, 149, 124, 0.13);
  animation: map-loading-pulse 1.4s ease-in-out infinite;
}

.province-map-state.is-error .map-loading-dot {
  background: #d9ad59;
  box-shadow: 0 0 0 7px rgba(217, 173, 89, 0.14);
  animation: none;
}

.province-map-state button {
  min-height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: 6px;
  background: #176b59;
  color: #fff;
}

.province-summary {
  display: grid;
  grid-template-columns: minmax(88px, 0.85fr) minmax(0, 2.15fr);
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #fbfdfc;
}

.province-summary-name span,
.province-summary dt {
  display: block;
  color: var(--muted);
  font-size: 0.64rem;
}

.province-summary-name strong {
  display: block;
  margin-top: 3px;
  color: #176b59;
  font-size: 1.05rem;
  font-weight: 650;
}

.province-summary dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
}

.province-summary dl > div {
  min-width: 0;
  padding-left: 8px;
  border-left: 1px solid #e2ece7;
}

.province-summary dd {
  margin: 4px 0 0;
  overflow: hidden;
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
}

.province-map-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 14px 5px;
  color: var(--muted);
  font-size: 0.62rem;
}

.province-map-legend i {
  width: 19px;
  height: 8px;
  flex: 0 0 auto;
  background: var(--legend-color);
}

.province-map-note {
  padding: 0 14px 12px;
  text-align: center;
}

@keyframes map-loading-pulse {
  0%, 100% { transform: scale(0.84); opacity: 0.62; }
  50% { transform: scale(1); opacity: 1; }
}

@media (max-width: 360px) {
  .province-map-frame { height: 250px; }
  .province-summary { grid-template-columns: 76px minmax(0, 1fr); gap: 5px; padding-inline: 10px; }
  .province-summary dl { gap: 3px; }
  .province-summary dl > div { padding-left: 5px; }
  .province-summary dd { font-size: 0.69rem; }
  .province-map-legend { padding-inline: 8px; }
  .province-map-legend i { width: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .map-loading-dot { animation: none; }
}

/* Wooden fish composition: body left, mallet entering from the lower right. */
.woodfish-stage::before {
  left: 50%;
}

.woodfish-body {
  left: 32px;
  top: 41px;
  transform: rotate(7deg) scaleX(-1);
}

.gummy-ripple {
  left: 25px;
  top: 31px;
}

.mallet {
  width: 118px;
  top: 112px;
  right: -2px;
  bottom: auto;
  transform: rotate(26deg);
  transform-origin: 100% 50%;
}

.woodfish-button.is-struck .mallet {
  animation: lower-right-mallet-strike 320ms cubic-bezier(0.2, 0.9, 0.25, 1);
}

.woodfish-button:active .woodfish-body {
  transform: translateY(4px) rotate(7deg) scaleX(-1) scale(0.985);
}

.woodfish-button.is-struck .woodfish-body {
  animation: mirrored-gummy-squish 420ms cubic-bezier(0.2, 0.9, 0.2, 1.2);
}

@keyframes lower-right-mallet-strike {
  0%, 100% { transform: rotate(26deg); }
  40% { transform: translate(-10px, -7px) rotate(35deg); }
  72% { transform: translate(3px, 3px) rotate(22deg); }
}

@keyframes mirrored-gummy-squish {
  0%, 100% { transform: rotate(7deg) scaleX(-1) scale(1); }
  32% { transform: translateY(5px) rotate(5deg) scaleX(-1) scale(1.08, 0.84); }
  68% { transform: translateY(-3px) rotate(8deg) scaleX(-1) scale(0.97, 1.05); }
}

@media (max-height: 900px) {
  .woodfish-body { width: 170px; height: 116px; left: 37px; top: 23px; }
  .gummy-ripple { left: 30px; top: 13px; width: 184px; height: 125px; }
  .mallet { top: 88px; right: -2px; }
}

@media (max-height: 760px) {
  .woodfish-body { width: 160px; height: 108px; left: 42px; top: 3px; }
  .gummy-ripple { left: 35px; top: 0; width: 174px; height: 114px; }
  .mallet { top: 67px; }
}


/* Theme system: eight user-selectable visual treatments sharing one layout. */
html[data-theme] {
  --gold: var(--primary);
  --red: var(--accent);
  --mint: var(--positive);
  color-scheme: var(--theme-color-scheme);
  background: var(--page-backdrop);
  font-family: var(--font-body);
}

html[data-theme="mint"] {
  --theme-color-scheme: light;
  --bg: #f4f8f6;
  --page-backdrop: #eaf2ee;
  --surface: #ffffff;
  --surface-2: #e4f0e9;
  --surface-3: #edf6f2;
  --text: #1f2a26;
  --muted: #557068;
  --line: #d6e5df;
  --primary: #176b59;
  --primary-strong: #115144;
  --primary-soft: #d7eee4;
  --accent: #d4a84f;
  --accent-soft: #f6edd4;
  --positive: #4d9b80;
  --on-primary: #ffffff;
  --focus: rgba(23, 107, 89, 0.42);
  --nav-bg: rgba(255, 255, 255, 0.96);
  --dialog-backdrop: rgba(22, 63, 56, 0.28);
  --toast-bg: #1f3f37;
  --input-bg: #f7fbf9;
  --surface-shadow: 0 8px 22px rgba(49, 99, 83, 0.08);
  --card-radius: 8px;
  --control-radius: 8px;
  --font-body: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-heading: var(--font-body);
  --stage: #d9eee4;
  --wood-light: #ffd2ab;
  --wood-base: #f18465;
  --wood-dark: #a8483a;
  --wood-ink: #6f302a;
  --wood-mallet: #d16b54;
  --map-level-1: #dcefe7;
  --map-level-2: #b9dfd0;
  --map-level-3: #83c3aa;
  --map-level-4: #47957c;
  --map-level-5: #176b59;
  --map-neutral: #edf2ef;
  --map-border: #ffffff;
  --map-selected: #d4a84f;
  --map-label: #476b62;
  --map-selected-label: #163f38;
  --map-light: #e6b64f;
  --map-light-border: rgba(255, 255, 255, 0.9);
  --map-light-shadow: rgba(217, 173, 89, 0.85);
  --map-tooltip: rgba(22, 63, 56, 0.96);
  --map-tooltip-text: #ffffff;
}

html[data-theme="paper"] {
  --theme-color-scheme: light;
  --bg: #f7f8f5;
  --page-backdrop: #eef0ec;
  --surface: #ffffff;
  --surface-2: #f0f2ee;
  --surface-3: #f5f6f3;
  --text: #202826;
  --muted: #626d69;
  --line: #d9deda;
  --primary: #3f6f68;
  --primary-strong: #315852;
  --primary-soft: #e1ebe7;
  --accent: #d6764f;
  --accent-soft: #f7e6df;
  --positive: #5b8a72;
  --on-primary: #ffffff;
  --focus: rgba(63, 111, 104, 0.42);
  --nav-bg: rgba(255, 255, 255, 0.97);
  --dialog-backdrop: rgba(32, 40, 38, 0.24);
  --toast-bg: #202826;
  --input-bg: #fafbf9;
  --surface-shadow: none;
  --card-radius: 2px;
  --control-radius: 4px;
  --font-body: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-heading: "Songti SC", "SimSun", serif;
  --stage: #edf0ec;
  --wood-light: #e8b88f;
  --wood-base: #c77b55;
  --wood-dark: #85503c;
  --wood-ink: #54362c;
  --wood-mallet: #a96549;
  --map-level-1: #e4ece9;
  --map-level-2: #c4d8d2;
  --map-level-3: #91b8ae;
  --map-level-4: #648f86;
  --map-level-5: #3f6f68;
  --map-neutral: #eef0ed;
  --map-border: #ffffff;
  --map-selected: #d6764f;
  --map-label: #566c66;
  --map-selected-label: #202826;
  --map-light: #d6764f;
  --map-light-border: rgba(255, 255, 255, 0.92);
  --map-light-shadow: rgba(214, 118, 79, 0.72);
  --map-tooltip: rgba(32, 40, 38, 0.96);
  --map-tooltip-text: #ffffff;
}

html[data-theme="lake"] {
  --theme-color-scheme: light;
  --bg: #eff6f8;
  --page-backdrop: #e3eef2;
  --surface: #ffffff;
  --surface-2: #e0eef2;
  --surface-3: #e9f3f5;
  --text: #193039;
  --muted: #547078;
  --line: #cfe0e5;
  --primary: #256a7b;
  --primary-strong: #1c5361;
  --primary-soft: #d8ebf0;
  --accent: #d59a3d;
  --accent-soft: #f6ead4;
  --positive: #3e8b79;
  --on-primary: #ffffff;
  --focus: rgba(37, 106, 123, 0.42);
  --nav-bg: rgba(255, 255, 255, 0.96);
  --dialog-backdrop: rgba(25, 48, 57, 0.26);
  --toast-bg: #193039;
  --input-bg: #f7fbfc;
  --surface-shadow: 0 8px 20px rgba(32, 86, 99, 0.08);
  --card-radius: 6px;
  --control-radius: 6px;
  --font-body: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-heading: var(--font-body);
  --stage: #dceef2;
  --wood-light: #f2c79e;
  --wood-base: #cc8056;
  --wood-dark: #8d4d34;
  --wood-ink: #593326;
  --wood-mallet: #ad6545;
  --map-level-1: #dcecf0;
  --map-level-2: #b9d9e1;
  --map-level-3: #83bdca;
  --map-level-4: #4c91a2;
  --map-level-5: #256a7b;
  --map-neutral: #e8eff1;
  --map-border: #ffffff;
  --map-selected: #d59a3d;
  --map-label: #496c75;
  --map-selected-label: #193039;
  --map-light: #d59a3d;
  --map-light-border: rgba(255, 255, 255, 0.92);
  --map-light-shadow: rgba(213, 154, 61, 0.78);
  --map-tooltip: rgba(25, 48, 57, 0.96);
  --map-tooltip-text: #ffffff;
}

html[data-theme="coral"] {
  --theme-color-scheme: light;
  --bg: #fff5f3;
  --page-backdrop: #f5e9e6;
  --surface: #ffffff;
  --surface-2: #fbe4df;
  --surface-3: #fff0ed;
  --text: #352725;
  --muted: #795e58;
  --line: #ebd6d1;
  --primary: #b64e44;
  --primary-strong: #8f3d35;
  --primary-soft: #f5d8d3;
  --accent: #2d7b70;
  --accent-soft: #dceeea;
  --positive: #2d7b70;
  --on-primary: #ffffff;
  --focus: rgba(182, 78, 68, 0.42);
  --nav-bg: rgba(255, 255, 255, 0.96);
  --dialog-backdrop: rgba(53, 39, 37, 0.25);
  --toast-bg: #352725;
  --input-bg: #fffaf9;
  --surface-shadow: 0 8px 20px rgba(125, 64, 56, 0.08);
  --card-radius: 8px;
  --control-radius: 8px;
  --font-body: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-heading: var(--font-body);
  --stage: #f8ded8;
  --wood-light: #ffd1b0;
  --wood-base: #e58062;
  --wood-dark: #a5473d;
  --wood-ink: #6d302b;
  --wood-mallet: #bd5748;
  --map-level-1: #f5ded9;
  --map-level-2: #ecc0b8;
  --map-level-3: #dd9186;
  --map-level-4: #c76459;
  --map-level-5: #9f4038;
  --map-neutral: #f1e9e7;
  --map-border: #ffffff;
  --map-selected: #2d7b70;
  --map-label: #765a55;
  --map-selected-label: #352725;
  --map-light: #2d7b70;
  --map-light-border: rgba(255, 255, 255, 0.92);
  --map-light-shadow: rgba(45, 123, 112, 0.72);
  --map-tooltip: rgba(53, 39, 37, 0.96);
  --map-tooltip-text: #ffffff;
}

html[data-theme="vermilion"] {
  --theme-color-scheme: light;
  --bg: #f7f3ef;
  --page-backdrop: #ece6e1;
  --surface: #ffffff;
  --surface-2: #efe5de;
  --surface-3: #f5ede8;
  --text: #2d2926;
  --muted: #6f625a;
  --line: #ded3cb;
  --primary: #963f36;
  --primary-strong: #73302a;
  --primary-soft: #ecd5d0;
  --accent: #356c61;
  --accent-soft: #dce9e5;
  --positive: #4f806f;
  --on-primary: #ffffff;
  --focus: rgba(150, 63, 54, 0.42);
  --nav-bg: rgba(255, 255, 255, 0.96);
  --dialog-backdrop: rgba(45, 41, 38, 0.27);
  --toast-bg: #2d2926;
  --input-bg: #fbf8f5;
  --surface-shadow: 0 7px 18px rgba(90, 61, 48, 0.07);
  --card-radius: 4px;
  --control-radius: 4px;
  --font-body: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-heading: "Songti SC", "SimSun", serif;
  --stage: #eee1d9;
  --wood-light: #eec19a;
  --wood-base: #b96b45;
  --wood-dark: #733b2b;
  --wood-ink: #4a2922;
  --wood-mallet: #8f4934;
  --map-level-1: #f0ddd9;
  --map-level-2: #e6bfb9;
  --map-level-3: #d98e84;
  --map-level-4: #ba5d52;
  --map-level-5: #963f36;
  --map-neutral: #eee9e5;
  --map-border: #ffffff;
  --map-selected: #356c61;
  --map-label: #715c57;
  --map-selected-label: #2d2926;
  --map-light: #356c61;
  --map-light-border: rgba(255, 255, 255, 0.92);
  --map-light-shadow: rgba(53, 108, 97, 0.72);
  --map-tooltip: rgba(45, 41, 38, 0.96);
  --map-tooltip-text: #ffffff;
}

html[data-theme="lemon"] {
  --theme-color-scheme: light;
  --bg: #fafbf4;
  --page-backdrop: #eef0e5;
  --surface: #ffffff;
  --surface-2: #eff2d8;
  --surface-3: #f5f7e8;
  --text: #293329;
  --muted: #65705b;
  --line: #dee3ce;
  --primary: #4b7052;
  --primary-strong: #38553e;
  --primary-soft: #e0eadb;
  --accent: #c89d16;
  --accent-soft: #f5ebbd;
  --positive: #5f855d;
  --on-primary: #ffffff;
  --focus: rgba(75, 112, 82, 0.42);
  --nav-bg: rgba(255, 255, 255, 0.96);
  --dialog-backdrop: rgba(41, 51, 41, 0.24);
  --toast-bg: #293329;
  --input-bg: #fcfdf8;
  --surface-shadow: 0 8px 20px rgba(75, 95, 57, 0.07);
  --card-radius: 6px;
  --control-radius: 6px;
  --font-body: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-heading: var(--font-body);
  --stage: #edf0cf;
  --wood-light: #f2c996;
  --wood-base: #c98149;
  --wood-dark: #83502f;
  --wood-ink: #533521;
  --wood-mallet: #a96339;
  --map-level-1: #e5eddc;
  --map-level-2: #c9ddbd;
  --map-level-3: #9fbe91;
  --map-level-4: #72956f;
  --map-level-5: #4b7052;
  --map-neutral: #eef0e8;
  --map-border: #ffffff;
  --map-selected: #c89d16;
  --map-label: #60705d;
  --map-selected-label: #293329;
  --map-light: #c89d16;
  --map-light-border: rgba(255, 255, 255, 0.94);
  --map-light-shadow: rgba(200, 157, 22, 0.72);
  --map-tooltip: rgba(41, 51, 41, 0.96);
  --map-tooltip-text: #ffffff;
}

html[data-theme="night"] {
  --theme-color-scheme: dark;
  --bg: #10231f;
  --page-backdrop: #0a1815;
  --surface: #17342d;
  --surface-2: #1e4239;
  --surface-3: #193a32;
  --text: #f1f7f4;
  --muted: #a8c1b8;
  --line: #31544a;
  --primary: #73c6a7;
  --primary-strong: #91d9bf;
  --primary-soft: #234d42;
  --accent: #e6b65c;
  --accent-soft: #4f4329;
  --positive: #73c6a7;
  --on-primary: #0b211a;
  --focus: rgba(115, 198, 167, 0.58);
  --nav-bg: rgba(16, 35, 31, 0.97);
  --dialog-backdrop: rgba(2, 10, 8, 0.68);
  --toast-bg: #e9f4ef;
  --input-bg: #132c26;
  --surface-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
  --card-radius: 6px;
  --control-radius: 6px;
  --font-body: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-heading: var(--font-body);
  --stage: #1a3c33;
  --wood-light: #d49a6d;
  --wood-base: #a85d3d;
  --wood-dark: #633526;
  --wood-ink: #321d17;
  --wood-mallet: #82452f;
  --map-level-1: #214038;
  --map-level-2: #295448;
  --map-level-3: #376f5e;
  --map-level-4: #4b967c;
  --map-level-5: #73c6a7;
  --map-neutral: #1a302a;
  --map-border: #10231f;
  --map-selected: #e6b65c;
  --map-label: #b3c9c1;
  --map-selected-label: #ffffff;
  --map-light: #e6b65c;
  --map-light-border: rgba(16, 35, 31, 0.9);
  --map-light-shadow: rgba(230, 182, 92, 0.82);
  --map-tooltip: rgba(8, 24, 20, 0.97);
  --map-tooltip-text: #f1f7f4;
}

html[data-theme="focus"] {
  --theme-color-scheme: dark;
  --bg: #17191a;
  --page-backdrop: #0e0f10;
  --surface: #242627;
  --surface-2: #2e3132;
  --surface-3: #292c2d;
  --text: #f4f5f4;
  --muted: #b4b8b6;
  --line: #444849;
  --primary: #e8eae9;
  --primary-strong: #ffffff;
  --primary-soft: #343738;
  --accent: #d9754f;
  --accent-soft: #4a3028;
  --positive: #8eb9a8;
  --on-primary: #17191a;
  --focus: rgba(232, 234, 233, 0.58);
  --nav-bg: rgba(23, 25, 26, 0.98);
  --dialog-backdrop: rgba(0, 0, 0, 0.72);
  --toast-bg: #f4f5f4;
  --input-bg: #1d1f20;
  --surface-shadow: none;
  --card-radius: 2px;
  --control-radius: 2px;
  --font-body: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-heading: var(--font-body);
  --stage: #2c2f30;
  --wood-light: #d7a47c;
  --wood-base: #a85f43;
  --wood-dark: #63382c;
  --wood-ink: #2f201b;
  --wood-mallet: #824b38;
  --map-level-1: #333637;
  --map-level-2: #505455;
  --map-level-3: #757a78;
  --map-level-4: #a6aaa8;
  --map-level-5: #e8eae9;
  --map-neutral: #292c2d;
  --map-border: #17191a;
  --map-selected: #d9754f;
  --map-label: #d4d6d5;
  --map-selected-label: #ffffff;
  --map-light: #d9754f;
  --map-light-border: rgba(23, 25, 26, 0.9);
  --map-light-shadow: rgba(217, 117, 79, 0.8);
  --map-tooltip: rgba(10, 11, 12, 0.97);
  --map-tooltip-text: #f4f5f4;
}

html[data-theme] body,
html[data-theme] .app-shell {
  background: var(--bg);
  color: var(--text);
}

html[data-theme] h1,
html[data-theme] h2,
html[data-theme] h3 {
  font-family: var(--font-heading);
}

html[data-theme] ::selection {
  background: var(--primary-soft);
  color: var(--text);
}

html[data-theme] button:focus-visible,
html[data-theme] select:focus-visible,
html[data-theme] textarea:focus-visible {
  outline-color: var(--focus);
}

html[data-theme] .brand-mark,
html[data-theme] .mini-avatar,
html[data-theme] .profile-avatar {
  background: var(--primary-soft);
  color: var(--primary);
}

html[data-theme] .icon-button,
html[data-theme] .company-pill {
  background: var(--surface-2);
  color: var(--primary);
}

html[data-theme] .status-dot {
  background: var(--positive);
}

html[data-theme] .woodfish-stage::before {
  background: var(--stage);
}

html[data-theme] .woodfish-body {
  border-color: color-mix(in srgb, var(--wood-light) 65%, white);
  background: linear-gradient(145deg, var(--wood-light), var(--wood-base) 58%, var(--wood-dark));
  box-shadow:
    inset 10px 10px 16px color-mix(in srgb, var(--wood-light) 60%, transparent),
    inset -8px -8px 14px color-mix(in srgb, var(--wood-dark) 42%, transparent),
    inset 0 -7px 0 color-mix(in srgb, var(--wood-dark) 65%, transparent),
    0 16px 22px rgba(30, 28, 25, 0.16);
}

html[data-theme] .woodfish-eye {
  background: var(--wood-ink);
}

html[data-theme] .circuit {
  border-color: color-mix(in srgb, var(--wood-light) 72%, transparent);
}

html[data-theme] .status-light {
  background: var(--accent);
}

html[data-theme] .mallet,
html[data-theme] .mallet::before,
html[data-theme] .mallet::after {
  background: var(--wood-mallet);
}

html[data-theme] .merit-summary strong,
html[data-theme] .progress-heading output,
html[data-theme] .eyebrow,
html[data-theme] .feed-status,
html[data-theme] .finish-stats dd,
html[data-theme] .province-summary-name strong {
  color: var(--primary);
}

html[data-theme] .reward-progress,
html[data-theme] .ranking-section,
html[data-theme] .province-map-section,
html[data-theme] .feed-item,
html[data-theme] .profile-header,
html[data-theme] .profile-stats,
html[data-theme] .profile-menu,
html[data-theme] .finish-preview,
html[data-theme] .composer-trigger {
  border-color: var(--line);
  border-radius: var(--card-radius);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--surface-shadow);
}

html[data-theme] .progress-track,
html[data-theme] .reaction-button {
  background: var(--surface-2);
}

html[data-theme] .progress-track span {
  background: var(--primary);
}

html[data-theme] .action-button,
html[data-theme] .filter-button,
html[data-theme] .reaction-button,
html[data-theme] .wechat-login-button,
html[data-theme] .province-map-state button {
  border-radius: var(--control-radius);
}

html[data-theme] .reward-button,
html[data-theme] .finish-button,
html[data-theme] .wechat-login-button,
html[data-theme] .province-map-state button {
  background: var(--primary);
  color: var(--on-primary);
}

html[data-theme] .reward-button:disabled {
  border-color: var(--line);
  background: var(--surface-2);
  color: var(--muted);
}

html[data-theme] .bottom-nav {
  border-color: var(--line);
  background: var(--nav-bg);
}

html[data-theme] .nav-button {
  color: var(--muted);
}

html[data-theme] .nav-button:hover,
html[data-theme] .nav-button.is-active,
html[data-theme] .filter-button.is-active,
html[data-theme] .reaction-button.is-reacted {
  border-color: var(--primary-soft);
  background: var(--primary-soft);
  color: var(--primary);
}

html[data-theme] .ranking-row,
html[data-theme] .profile-menu button {
  border-color: var(--line);
  background: transparent;
  color: var(--text);
}

html[data-theme] .ranking-row:hover,
html[data-theme] .ranking-row.is-selected {
  background: var(--surface-3);
}

html[data-theme] .profile-menu svg {
  stroke: var(--primary);
}

html[data-theme] .sheet-dialog {
  border-color: var(--line);
  border-radius: var(--card-radius) var(--card-radius) 0 0;
  background: var(--surface);
  color: var(--text);
}

html[data-theme] .sheet-dialog::backdrop {
  background: var(--dialog-backdrop);
}

html[data-theme] .sheet-handle {
  background: var(--line);
}

html[data-theme] .sheet-content blockquote {
  border-color: var(--line);
  border-radius: var(--card-radius);
  background: var(--surface-2);
  color: var(--text);
}

html[data-theme] .text-button,
html[data-theme] .rank-value,
html[data-theme] .feed-time,
html[data-theme] .profile-caption,
html[data-theme] .profile-menu small {
  color: var(--muted);
}

html[data-theme] .compose-sheet select,
html[data-theme] .compose-sheet textarea {
  border-color: var(--line);
  border-radius: var(--control-radius);
  background: var(--input-bg);
  color: var(--text);
}

html[data-theme] .toast {
  border-radius: var(--control-radius);
  background: var(--toast-bg);
  color: var(--bg);
}

html[data-theme] .province-map-frame {
  border-color: var(--line);
  background: var(--surface-3);
}

html[data-theme] .province-map-state {
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  color: var(--muted);
}

html[data-theme] .map-loading-dot {
  background: var(--primary);
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--primary) 14%, transparent);
}

html[data-theme] .province-summary {
  background: var(--surface);
}

html[data-theme] .province-summary dl > div {
  border-color: var(--line);
}

html[data-theme] .province-map-legend i:nth-of-type(1) { background: var(--map-level-1) !important; }
html[data-theme] .province-map-legend i:nth-of-type(2) { background: var(--map-level-2) !important; }
html[data-theme] .province-map-legend i:nth-of-type(3) { background: var(--map-level-3) !important; }
html[data-theme] .province-map-legend i:nth-of-type(4) { background: var(--map-level-4) !important; }
html[data-theme] .province-map-legend i:nth-of-type(5) { background: var(--map-level-5) !important; }

.desktop-theme-button {
  display: none;
}

.theme-sheet {
  max-height: min(86dvh, 720px);
  overflow-y: auto;
}

.theme-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 20px;
}

.theme-option {
  min-width: 0;
  min-height: 112px;
  position: relative;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--card-radius);
  background: var(--surface);
  color: var(--text);
  text-align: left;
}

.theme-option:hover {
  background: var(--surface-3);
}

.theme-option.is-selected {
  border-color: var(--primary);
  box-shadow: inset 0 0 0 1px var(--primary);
}

.theme-option-preview {
  height: 24px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: max(1px, calc(var(--control-radius) - 2px));
}

.theme-option-preview i {
  display: block;
}

.theme-option-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.theme-option-copy strong {
  padding-right: 20px;
  font-size: 0.875rem;
  font-weight: 650;
}

.theme-option-copy small {
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.45;
}

.theme-option-check {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 43px;
  right: 10px;
  display: none;
  place-items: center;
  border-radius: 50%;
  background: var(--primary);
  color: var(--on-primary);
  font-size: 0.72rem;
  font-weight: 700;
}

.theme-option.is-selected .theme-option-check {
  display: grid;
}

.theme-dialog-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 18px;
}

.theme-dialog-actions .action-button,
.theme-dialog-actions .text-button {
  min-height: 44px;
  margin: 0;
}

.theme-reset-button {
  border: 1px solid var(--line);
  border-radius: var(--control-radius);
  background: transparent;
}


@media (prefers-reduced-motion: reduce) {
  .theme-option,
  .theme-option-preview,
  html[data-theme] body {
    transition: none;
  }
}


/* Theme surface corrections for legacy light-only components. */
html[data-theme] .ranking-list,
html[data-theme] .filter-button {
  border-color: var(--line);
  background: var(--surface);
  color: var(--muted);
}

html[data-theme] .ranking-row {
  border-color: var(--line);
}

html[data-theme] .ranking-row .rank-number {
  color: var(--muted);
}

html[data-theme] .ranking-row:nth-child(-n+3) .rank-number {
  color: var(--primary);
}

html[data-theme] .current-city-rank {
  border-radius: var(--card-radius);
  background: var(--surface-2);
  color: var(--muted);
}

html[data-theme] .current-city-rank strong {
  color: var(--primary);
}

html[data-theme] .profile-stats > div + div,
html[data-theme] .profile-menu button {
  border-color: var(--line);
}

html[data-theme] .tap-instruction {
  border-color: var(--line);
  background: var(--surface);
  color: var(--muted);
}

html[data-theme] .tap-instruction::before {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent);
}

html[data-theme] .gummy-ripple {
  border-color: color-mix(in srgb, var(--wood-base) 32%, transparent);
}

html[data-theme] .qr-code {
  border-color: #ffffff;
  border-radius: var(--card-radius);
  background: #ffffff;
}

html[data-theme] .qr-code span {
  background:
    linear-gradient(90deg, #1f2a26 45%, transparent 45% 56%, #1f2a26 56%),
    linear-gradient(#1f2a26 45%, transparent 45% 56%, #1f2a26 56%);
}

html[data-theme] .reward-orb {
  border-radius: var(--card-radius);
  background: var(--primary-soft);
  color: var(--primary);
}

html[data-theme] .province-map-state.is-error .map-loading-dot {
  background: var(--accent);
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 14%, transparent);
}

[hidden] {
  display: none !important;
}

.service-banner {
  position: fixed;
  z-index: 90;
  top: auto;
  bottom: calc(82px + env(safe-area-inset-bottom));
  left: 50%;
  width: min(calc(100% - 28px), 520px);
  min-height: 42px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--card-radius);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
  font-size: 0.82rem;
}

.service-banner[data-status="offline"] {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}

.service-indicator {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--primary);
}

.service-banner[data-status="connecting"] .service-indicator {
  animation: service-pulse 1.2s ease-in-out infinite;
}

.service-banner[data-status="offline"] .service-indicator {
  background: var(--accent);
}

.service-banner button {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: var(--primary);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

html[data-theme] .qr-code {
  display: grid;
  place-items: center;
  padding: 8px;
  border-width: 8px;
}

.qr-code canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

html[data-theme] .qr-code .qr-loading {
  width: auto;
  height: auto;
  background: none;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

.account-sheet .action-button,
.account-sheet .text-button {
  width: 100%;
  margin-top: 10px;
}

.danger-button {
  color: var(--accent);
}

@keyframes service-pulse {
  50% { opacity: 0.35; transform: scale(0.78); }
}

@media (prefers-reduced-motion: reduce) {
  .service-banner[data-status="connecting"] .service-indicator {
    animation: none;
  }
}