:root {
  color-scheme: dark;
  --bg: #102f3b;
  --panel: #1b4352;
  --panel-2: #214c5c;
  --text: #f5efe3;
  --muted: #c9d1ce;
  --line: rgba(236, 204, 98, 0.28);
  --accent: #e4bd3f;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}

.app-shell {
  width: min(760px, 100%);
  max-width: 100%;
  margin: 0 auto;
  padding: max(18px, env(safe-area-inset-top)) 16px calc(86px + env(safe-area-inset-bottom));
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0 18px;
}

.eyebrow {
  margin: 0 0 4px;
  color: var(--accent);
  font-size: 13px;
}

h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: 26px; letter-spacing: 0; }
h2 { font-size: 21px; }

.icon-button, button {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--accent);
  color: #10242d;
  min-height: 44px;
  padding: 0 14px;
  font-weight: 700;
}

.icon-button {
  min-width: 66px;
  min-height: 48px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 16px;
  line-height: 1;
}

.panel {
  display: none;
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.panel.active { display: block; }

.form-grid {
  display: grid;
  gap: 12px;
  min-width: 0;
}

label {
  display: grid;
  gap: 7px;
  min-width: 0;
  color: var(--muted);
  font-size: 14px;
}

input, select, textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 44px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 8px;
  background: #0e2832;
  color: var(--text);
  padding: 0 12px;
  font-size: 16px;
}

textarea {
  min-height: 84px;
  padding: 10px 12px;
  resize: vertical;
  font-family: inherit;
}

input[type="datetime-local"],
input[type="date"] {
  inline-size: 100%;
  max-inline-size: 100%;
  min-inline-size: 0;
  height: 44px;
  padding-block: 0;
  -webkit-appearance: none;
  appearance: none;
  overflow: hidden;
  text-align: left;
}

input[type="datetime-local"]::-webkit-date-and-time-value,
input[type="date"]::-webkit-date-and-time-value {
  display: block;
  height: auto;
  line-height: 42px;
  min-width: 0;
  text-align: left;
}

input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator {
  margin-inline-start: 0;
}

input[type="date"] {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
}

.check-row {
  display: grid;
  grid-template-columns: 22px auto 28px;
  align-items: center;
  justify-content: start;
  gap: 8px;
}

.check-row input { min-height: auto; margin: 0; }
.check-row label { display: block; }

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

.coin-grid label {
  padding: 10px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  background: var(--panel-2);
}

.coin-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px;
  gap: 8px;
}

.row-toss-button {
  min-height: 44px;
  padding: 0 8px;
}

.segmented-control {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border-radius: 8px;
  background: rgba(11, 33, 41, .72);
}

.segmented-control button {
  min-height: 38px;
  background: transparent;
  color: var(--muted);
  border-color: transparent;
}

.segmented-control button.active {
  background: var(--accent);
  color: #10242d;
}

.secondary-button {
  background: transparent;
  color: var(--accent);
}

.simulation-panel {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(228,189,63,.32);
  border-radius: 8px;
  background: rgba(255,255,255,.045);
}

.simulation-progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}

.simulation-progress strong {
  color: var(--accent);
  font-size: 15px;
}

.coin-faces {
  display: grid;
  grid-template-columns: repeat(3, 56px);
  justify-content: center;
  gap: 12px;
}

.coin-face {
  display: grid;
  aspect-ratio: 1;
  place-items: center;
  border: 2px solid rgba(255,255,255,.18);
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.coin-face.heads {
  border-color: rgba(228,189,63,.76);
  background: rgba(228,189,63,.18);
  color: var(--accent);
}

.coin-face.tails {
  border-color: rgba(63,199,182,.72);
  background: rgba(63,199,182,.14);
  color: #75ddd0;
}

.simulation-history {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}

.simulation-history-list {
  display: grid;
  gap: 6px;
}

.simulation-history-row {
  display: block;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 6px;
  background: rgba(255,255,255,.045);
  line-height: 1.5;
}

.simulation-history:empty {
  display: none;
}

.result {
  display: grid;
  gap: 10px;
  min-width: 0;
  margin-top: 16px;
}

.result-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  background: rgba(11, 33, 41, .6);
}

.result-toolbar button {
  min-height: 34px;
  padding: 0 10px;
}

.result-card {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  background: rgba(11, 33, 41, .6);
}

.result-card h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 16px;
  color: var(--accent);
}

.method-notes {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.local-reading {
  display: grid;
  gap: 8px;
}

.local-reading > strong {
  color: var(--accent);
  font-size: 18px;
}

.local-reading p,
.local-reading small {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.local-reading b {
  color: var(--text);
}

.info-button {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 28px;
  min-height: 28px;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--accent);
  font-size: 16px;
  font-family: Georgia, "Times New Roman", serif;
}

.kv {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 7px 10px;
  font-size: 14px;
  line-height: 1.55;
}

.kline-viewport {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  padding: 10px 0 4px;
  border-radius: 8px;
  background: #0a222c;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  -webkit-overflow-scrolling: touch;
}

.kline-chart {
  position: relative;
  width: max-content;
  min-width: 100%;
}

.kline-svg {
  display: block;
  max-width: none;
}

.plot-bg {
  fill: rgba(255,255,255,.025);
}

.grid-line {
  stroke: rgba(255,255,255,.09);
  stroke-width: 1;
}

.connector-points {
  fill: none;
  stroke: rgba(220, 230, 232, .55);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.candle-wick {
  stroke-width: 2;
  stroke-linecap: round;
}

.candle-body {
  rx: 2;
  stroke-width: 1.5;
}

.candle.up .candle-wick,
.candle.up .candle-body {
  fill: #efc94a;
  stroke: #efc94a;
}

.candle.down .candle-wick,
.candle.down .candle-body {
  fill: #3fc7b6;
  stroke: #3fc7b6;
}

.axis-label {
  fill: rgba(245,239,227,.72);
  font-size: 10px;
  text-anchor: middle;
}

.candle-hitbox-svg {
  cursor: pointer;
  fill: transparent;
}

.candle-hitbox-svg.selected {
  fill: rgba(228,189,63,.1);
}

.candle-hitbox-svg:focus-visible {
  outline: none;
  stroke: rgba(228,189,63,.82);
  stroke-width: 1;
}

.annual-detail,
.year-detail {
  display: grid;
  gap: 5px;
  margin-top: 8px;
  padding: 10px;
  border-radius: 8px;
  background: rgba(255,255,255,.05);
}

.annual-detail span,
.year-detail span {
  color: var(--accent);
  font-size: 13px;
}

.annual-detail p,
.annual-detail small,
.year-detail p,
.year-detail small {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.annual-mini-list {
  display: grid;
  gap: 8px;
  margin-top: 4px;
}

.annual-mini-list button {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: rgba(255,255,255,.045);
  color: inherit;
  text-align: left;
}

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

.almanac-activity-group {
  min-width: 0;
  padding: 10px;
  border-radius: 8px;
  background: rgba(255,255,255,.045);
  font-size: 13px;
}

.almanac-activity-group strong {
  display: block;
  margin-bottom: 6px;
  font-size: 16px;
}

.almanac-activity-group p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.almanac-activity-group.suitable strong { color: #efc94a; }
.almanac-activity-group.caution strong { color: #75ddd0; }
.almanac-activity-group.neutral {
  grid-column: 1 / -1;
}
.almanac-activity-group.neutral strong { color: var(--text); }

.custom-almanac-ai {
  display: grid;
  gap: 8px;
}

.custom-almanac-ai h3 {
  margin-bottom: 0;
}

.annual-mini-list button.selected {
  border-color: rgba(228,189,63,.45);
  background: rgba(228,189,63,.12);
}

.annual-mini-list b {
  color: var(--text);
  font-size: 13px;
}

.annual-mini-list span {
  color: var(--accent);
  font-size: 12px;
}

.ai-card [data-ai-output] {
  display: grid;
  gap: 8px;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.ai-card [data-ai-output] p {
  margin: 0;
}

.ai-point {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 6px;
}

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

.tabs {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: min(760px, 100%);
  margin: 0 auto;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: rgba(14, 43, 54, .96);
  backdrop-filter: blur(16px);
}

.tabs button {
  background: transparent;
  color: var(--muted);
  border-color: transparent;
}

.tabs button.active {
  color: #10242d;
  background: var(--accent);
}

dialog {
  width: min(420px, calc(100% - 32px));
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
}

.settings {
  display: grid;
  gap: 12px;
}

.help-dialog p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

.help-dialog strong {
  color: var(--text);
}

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

.status-text {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}