:root {
  color-scheme: dark;
  --bg-grad:
    radial-gradient(1200px 600px at 80% -10%, rgba(212, 178, 106, 0.10), rgba(0,0,0,0) 60%),
    radial-gradient(900px 500px at 10% 0%, rgba(90, 160, 230, 0.08), rgba(0,0,0,0) 55%),
    linear-gradient(#0a0e1a 0%, #080b14 100%);
  --card-grad: linear-gradient(#111828, #0e1524);
  --card-solid: #111828;
  --text: #e8edf7;
  --text-strong: #ffffff;
  --muted: #8b96b3;
  --border: #22304d;
  --gold: #d4b26a;
  --gold-light: #f0d79a;
  --gold-text: #241a08;
  --header-bg: #0d1220;
  --bar-market: #b0483c;
  --bar-selection: #2d5f9a;
  --bar-entry: #6a4c93;
  --bar-exit: #3f8f78;
  --bar-candidates: #2d5f9a;
  --ok: #4fd98a;
  --ng: #ff6b6b;
  --warn-bg: rgba(232, 163, 61, 0.12);
  --warn-border: #e8a33d;
  --warn-text: #f0c987;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Segoe UI", sans-serif;
  background: var(--bg-grad);
  background-attachment: fixed;
  color: var(--text);
}

header.app-header {
  background: var(--header-bg);
  color: var(--text-strong);
  padding: 1.5rem 1.5rem 1.2rem;
  border-bottom: 1px solid var(--border);
}
.brand-row { display: flex; align-items: center; gap: 0.6rem; }
.brand-mark { font-size: 1.5rem; color: var(--gold); line-height: 1; }
header.app-header h1 {
  margin: 0;
  font-size: 1.35rem;
  background: linear-gradient(90deg, var(--gold-light), var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: 0.02em;
}
header.app-header .tagline { margin: 0.35rem 0 0; color: var(--gold); font-size: 0.78rem; letter-spacing: 0.03em; }
header.app-header p.sub { margin: 0.5rem 0 0; color: var(--muted); font-size: 0.85rem; }
header.app-header p.disclaimer { margin-top: 0.5rem; color: #5f6a86; font-size: 0.72rem; }

main {
  max-width: 760px;
  margin: 1.5rem auto 3rem;
  padding: 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.card {
  background: var(--card-grad);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  overflow: hidden;
}

.input-card {
  padding: 1.1rem 1.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  align-items: end;
}
.field { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.8rem; color: var(--muted); }
.field input, .field select {
  padding: 0.55rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.95rem;
  min-width: 8rem;
  background: #0c1120;
  color: var(--text);
}
.field input::placeholder { color: #4d5872; }
.actions { display: flex; gap: 0.5rem; }
button.primary, button.secondary {
  padding: 0.6rem 1.1rem;
  border-radius: 8px;
  border: none;
  font-size: 0.9rem;
  cursor: pointer;
}
button.primary {
  background: linear-gradient(var(--gold-light), var(--gold));
  color: var(--gold-text);
  font-weight: 800;
}
button.primary:disabled { opacity: 0.6; cursor: default; }
button.secondary { background: #1a2338; color: var(--text); border: 1px solid var(--border); }

.section-bar {
  padding: 0.7rem 1.1rem;
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
}
.section-bar.market { background: var(--bar-market); }
.section-bar.selection { background: var(--bar-selection); }
.section-bar.entry { background: var(--bar-entry); }
.section-bar.exit { background: var(--bar-exit); }
.section-bar.candidates { background: var(--bar-candidates); }

.section-body { padding: 1rem 1.1rem; }
.section-body.empty { color: var(--muted); font-size: 0.9rem; }

.row { display: flex; justify-content: space-between; align-items: baseline; padding: 0.5rem 0; border-bottom: 1px dashed var(--border); font-size: 0.92rem; }
.row:last-child { border-bottom: none; }
.row .label { color: var(--muted); }
.row .value { font-weight: 700; color: var(--text-strong); }
.row .value.big { font-size: 1.15rem; }

.warn-box {
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  margin-top: 0.6rem;
  font-size: 0.88rem;
  color: var(--warn-text);
  display: flex;
  gap: 0.5rem;
}

.checklist { display: flex; flex-direction: column; gap: 0.6rem; }
.check-item { display: flex; gap: 0.6rem; align-items: flex-start; }
.check-icon { flex: none; width: 1.4rem; height: 1.4rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; }
.check-icon.ok { background: rgba(79, 217, 138, 0.15); color: var(--ok); }
.check-icon.ng { background: rgba(139, 150, 179, 0.12); color: var(--muted); }
.check-text .label { font-weight: 600; font-size: 0.9rem; color: var(--text-strong); }
.check-text .detail { font-size: 0.8rem; color: var(--muted); }

.verdict-banner { padding: 0.8rem 1rem; border-radius: 8px; font-weight: 700; margin-bottom: 0.9rem; }
.verdict-banner.ok { background: rgba(79, 217, 138, 0.12); color: var(--ok); border: 1px solid rgba(79, 217, 138, 0.35); }
.verdict-banner.ng { background: rgba(255, 107, 107, 0.10); color: var(--ng); border: 1px solid rgba(255, 107, 107, 0.3); }
.alt-note { background: var(--warn-bg); color: var(--warn-text); border: 1px solid var(--warn-border); border-radius: 8px; padding: 0.5rem 0.8rem; font-weight: 700; font-size: 0.88rem; margin-bottom: 0.9rem; margin-top: -0.4rem; }

.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.7rem; margin-bottom: 0.9rem; }
@media (min-width: 520px) { .stat-grid { grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); } }
.stat-card { border: 1px solid var(--border); border-radius: 8px; padding: 0.6rem 0.7rem; background: #0d1424; }
.stat-card .stat-label { font-size: 0.72rem; color: var(--muted); margin-bottom: 0.3rem; }
.stat-card .stat-value { font-size: 1.05rem; font-weight: 700; color: var(--text-strong); }
.stat-card.entry { border-color: #6a4c93; }
.stat-card.stop { border-color: #a8524a; }
.stat-card.ratio.ok .stat-value { color: var(--ok); }
.stat-card.ratio.ng .stat-value { color: var(--ng); }

/* 利確候補ごとの色分け(候補が並んでも見分けやすくする) */
.stat-card.target-1 { border-color: #2f9f63; border-width: 2px; background: rgba(79, 217, 138, 0.07); }
.stat-card.target-1 .stat-value { color: #4fd98a; }
.stat-card.target-2 { border-color: #1f8f80; background: rgba(45, 200, 180, 0.07); }
.stat-card.target-2 .stat-value { color: #3fd6c4; }
.stat-card.target-3 { border-color: #3b6fd0; background: rgba(90, 160, 230, 0.08); }
.stat-card.target-3 .stat-value { color: #7aa8f0; }
.stat-card.target-4 { border-color: #8a72b8; background: rgba(177, 140, 224, 0.08); }
.stat-card.target-4 .stat-value { color: #b18ce0; }
.row .label.target-1, .row .value.target-1 { color: #4fd98a; }
.row .label.target-2, .row .value.target-2 { color: #3fd6c4; }
.row .label.target-3, .row .value.target-3 { color: #7aa8f0; }
.row .label.target-4, .row .value.target-4 { color: #b18ce0; }
.miss-note { color: var(--ng); font-weight: 700; }

canvas#chart { width: 100%; height: 260px; display: block; margin-top: 0.8rem; }
.chart-caption { font-size: 0.78rem; color: var(--muted); margin-top: 0.3rem; }

.tabs { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.8rem; }
.tab-btn { padding: 0.4rem 0.8rem; border-radius: 999px; border: 1px solid var(--border); background: #0d1424; color: var(--text); cursor: pointer; font-size: 0.85rem; }
.tab-btn.active { background: var(--bar-candidates); color: #fff; border-color: var(--bar-candidates); }

table.ranking-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
table.ranking-table th, table.ranking-table td { padding: 0.45rem 0.4rem; text-align: right; border-bottom: 1px solid var(--border); color: var(--text); }
table.ranking-table th { color: var(--muted); font-weight: 600; }
table.ranking-table th:first-child, table.ranking-table td:first-child { text-align: left; }
table.ranking-table th:nth-child(2), table.ranking-table td:nth-child(2) { text-align: left; }
table.ranking-table tbody tr { cursor: pointer; }
table.ranking-table tbody tr:hover { background: rgba(255,255,255,0.04); }
td.change-pos { color: var(--ok); }
td.change-neg { color: var(--ng); }
.ranking-source { font-size: 0.75rem; color: var(--muted); margin-top: 0.5rem; }
.ranking-source a { color: var(--muted); }

footer { text-align: center; font-size: 0.75rem; color: var(--muted); padding: 1.2rem 1rem 2rem; }

.loading { color: var(--muted); font-size: 0.85rem; }