:root {
  --bg: #f5f4ef;
  --card: #ffffff;
  --ink: #2c2c2a;
  --ink-2: #5f5e5a;
  --ink-3: #8a8880;
  --line: #e3e1d9;
  --accent: #185fa5;
  --fact-bg: #e1f5ee; --fact-fg: #085041;
  --canon-bg: #e6f1fb; --canon-fg: #0c447c;
  --guess-bg: #faeeda; --guess-fg: #633806;
  --danger-bg: #fcebeb; --danger-fg: #791f1f;
  --radius: 12px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, "PingFang SC", "Noto Sans SC", sans-serif;
  font-size: 15px;
  line-height: 1.7;
}
.app { max-width: 480px; margin: 0 auto; padding: 20px 16px 40px; }
.app-header h1 { font-size: 22px; font-weight: 600; }
.tagline { font-size: 12px; color: var(--ink-3); }

.hero { margin: 14px 0 16px; }
.hero h2 { font-size: 17px; font-weight: 600; line-height: 1.6; margin-bottom: 10px; }
.steps { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.step {
  background: var(--card); border: 0.5px solid var(--line); border-radius: 10px;
  padding: 8px 12px; font-size: 13px; color: var(--ink-2);
}
.step b { color: var(--ink); margin-right: 6px; }

.legend { font-size: 11px; color: var(--ink-3); margin: 6px 0 0; }
.tag {
  display: inline-block; font-size: 11px; padding: 1px 8px;
  border-radius: 999px; margin-right: 4px; margin-left: 8px; vertical-align: 1px;
}
.legend .tag:first-child { margin-left: 0; }
.t-fact { background: var(--fact-bg); color: var(--fact-fg); }
.t-canon { background: var(--canon-bg); color: var(--canon-fg); }
.t-guess { background: var(--guess-bg); color: var(--guess-fg); }
.t-danger { background: var(--danger-bg); color: var(--danger-fg); }

.tabs { display: flex; gap: 8px; margin: 14px 0; }
.tab {
  flex: 1; padding: 9px 0; font-size: 14px; border: 0.5px solid var(--line);
  background: var(--card); border-radius: 999px; color: var(--ink-2); cursor: pointer;
}
.tab.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.panel { display: none; }
.panel.active { display: block; }

.card {
  background: var(--card); border: 0.5px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px; margin-bottom: 10px;
}
.card-title { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
label { display: block; font-size: 13px; color: var(--ink-2); margin-bottom: 10px; }
input, select {
  display: block; width: 100%; margin-top: 4px; padding: 9px 12px;
  font-size: 15px; border: 0.5px solid var(--line); border-radius: 8px;
  background: #fbfaf7; color: var(--ink);
}
.row { display: flex; gap: 10px; }
.row label { flex: 1; }
.btn-primary {
  width: 100%; padding: 11px 0; font-size: 15px; border: none;
  background: var(--ink); color: #fff; border-radius: 999px; cursor: pointer;
}
.btn-ghost {
  display: inline-block; padding: 7px 14px; font-size: 13px; border: 0.5px solid var(--line);
  background: transparent; color: var(--ink-2); border-radius: 999px; cursor: pointer;
  text-decoration: none; text-align: center;
}

.pillar-table { width: 100%; border-collapse: collapse; margin: 8px 0 4px; text-align: center; }
.pillar-table th { font-size: 12px; color: var(--ink-3); font-weight: 400; padding: 4px; }
.pillar-table td { padding: 4px; vertical-align: top; }
.gz { font-size: 20px; font-weight: 600; white-space: nowrap; }
.ss { font-size: 11px; color: var(--ink-3); }
.hide-gan { font-size: 11px; color: var(--ink-3); }

.chip {
  display: inline-block; font-size: 12px; padding: 3px 10px; border-radius: 999px;
  background: var(--bg); color: var(--ink-2); margin: 0 6px 6px 0;
}
.kw {
  display: inline-block; font-size: 12px; padding: 3px 10px; border-radius: 999px;
  background: var(--bg); color: var(--ink); margin: 0 6px 6px 0; border: 0.5px solid var(--line);
}
.meta {
  font-size: 15px; color: var(--ink); border-left: 2px solid var(--line);
  padding-left: 10px; margin: 8px 0;
}
.line { font-size: 14px; margin: 4px 0; }
.talk { font-size: 15px; margin: 4px 0; }

details.basis { margin-top: 8px; }
details.basis summary {
  font-size: 12px; color: var(--ink-3); cursor: pointer; list-style: none;
}
details.basis summary::before { content: '▸ '; }
details.basis[open] summary::before { content: '▾ '; }
details.basis .basis-body {
  font-size: 13px; color: var(--ink-2); background: var(--bg);
  border-radius: 8px; padding: 8px 12px; margin-top: 6px; line-height: 1.8;
}

.wx-bar { display: flex; gap: 4px; margin: 6px 0; }
.wx-cell {
  flex: 1; text-align: center; font-size: 12px; border-radius: 8px; padding: 5px 0;
  background: var(--bg); color: var(--ink-2);
}
.wx-cell.zero { background: var(--danger-bg); color: var(--danger-fg); }
.dayun { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0; }
.dayun-item {
  min-width: 72px; text-align: center; border: 0.5px solid var(--line);
  border-radius: 8px; padding: 6px 4px; font-size: 12px; color: var(--ink-2);
}
.dayun-item.now { border-color: var(--accent); color: var(--accent); }
.dayun-item b { display: block; font-size: 15px; color: var(--ink); }
.dayun-item.now b { color: var(--accent); }

.judge { border-top: 0.5px solid var(--line); padding: 10px 0 6px; }
.judge:first-of-type { border-top: none; padding-top: 2px; }
.jbtns { display: flex; gap: 8px; margin-top: 6px; }
.jbtn {
  flex: 1; padding: 6px 0; font-size: 13px; border: 0.5px solid var(--line);
  background: var(--card); color: var(--ink-2); border-radius: 999px; cursor: pointer;
}
.jbtn.sel-y { background: var(--fact-bg); color: var(--fact-fg); border-color: var(--fact-fg); font-weight: 600; }
.jbtn.sel-u { background: var(--bg); color: var(--ink); border-color: var(--ink-3); font-weight: 600; }
.jbtn.sel-n { background: var(--danger-bg); color: var(--danger-fg); border-color: var(--danger-fg); font-weight: 600; }
.jbtn.dim { opacity: 0.45; }
.btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }

.stats-num { font-size: 26px; font-weight: 600; }
.stats-sub { font-size: 12px; color: var(--ink-3); }

.profile-item {
  background: var(--card); border: 0.5px solid var(--line);
  border-radius: var(--radius); padding: 12px 16px; margin-bottom: 8px;
}
.pi-main { font-size: 15px; font-weight: 600; }
.pi-sub { font-size: 12px; color: var(--ink-3); margin: 2px 0 8px; }
.pi-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.pi-actions .btn-ghost { padding: 5px 12px; font-size: 12px; }
.hint { font-size: 12px; color: var(--ink-3); margin-top: 8px; }
.app-footer { margin-top: 28px; font-size: 11px; color: var(--ink-3); line-height: 1.8; }

#share-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 50;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
#share-overlay[hidden] { display: none; }
.share-box { max-width: 340px; width: 100%; }
.share-box img { width: 100%; border-radius: 12px; display: block; }
.share-actions { display: flex; gap: 8px; justify-content: center; margin-top: 10px; }
.share-actions .btn-ghost { background: #fff; }

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1e1e1c; --card: #2a2a27; --ink: #ece9e2; --ink-2: #b8b5ac;
    --ink-3: #85837b; --line: #3d3c38;
    --fact-bg: #0a3d31; --fact-fg: #9fe1cb;
    --canon-bg: #0d3358; --canon-fg: #b5d4f4;
    --guess-bg: #4a3208; --guess-fg: #fac775;
    --danger-bg: #4a1515; --danger-fg: #f7c1c1;
  }
  input, select { background: #232320; }
  .tab.active { background: #ece9e2; color: #1e1e1c; border-color: #ece9e2; }
  .btn-primary { background: #ece9e2; color: #1e1e1c; }
  .share-actions .btn-ghost { background: #2a2a27; }
}