:root {
  color-scheme: light;
  --ink: #111827;
  --muted: #667085;
  --line: #d7deea;
  --paper: #ffffff;
  --canvas: #f3f6fa;
  --navy: #0b1628;
  --blue: #1d5d98;
  --blue-dark: #154875;
  --green: #177245;
  --green-soft: #e7f6ed;
  --amber: #a66700;
  --amber-soft: #fff4d8;
  --red: #b42318;
  --red-soft: #ffebe9;
  --shadow: 0 10px 28px rgba(20, 36, 58, 0.08);
  font-family: "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  line-height: 1.55;
}

button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.55; }

.app-header {
  background: var(--navy);
  color: #fff;
  border-bottom: 4px solid #2e79b8;
}

.header-inner {
  max-width: 1320px;
  margin: 0 auto;
  min-height: 112px;
  padding: 22px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.eyebrow, .section-number, .summary-kicker {
  margin: 0 0 4px;
  color: #70b7ed;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: clamp(1.65rem, 4vw, 2.35rem); line-height: 1.2; }
h2 { margin-bottom: 0; font-size: clamp(1.35rem, 3vw, 1.85rem); }
h3 { margin-bottom: 0; }

.server-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #cbd5e1;
  font-size: 0.9rem;
  white-space: nowrap;
}

.header-actions { display: flex; align-items: center; gap: 16px; }
.guide-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 8px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  text-decoration: none;
  font-weight: 800;
}
.guide-button:hover { background: rgba(255, 255, 255, 0.2); }

.server-status span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e7a71a;
  box-shadow: 0 0 0 4px rgba(231, 167, 26, 0.16);
}

.server-status.online span { background: #40c979; box-shadow: 0 0 0 4px rgba(64, 201, 121, 0.16); }
.server-status.offline span { background: #f04438; box-shadow: 0 0 0 4px rgba(240, 68, 56, 0.16); }

.app-shell { max-width: 1320px; margin: 0 auto; padding: 24px 28px 64px; }

.mode-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: #dfe6ef;
  padding: 5px;
  border-radius: 12px;
  margin-bottom: 30px;
}

.mode-tab {
  border: 0;
  border-radius: 8px;
  padding: 13px 16px;
  background: transparent;
  color: #536174;
  font-weight: 800;
}

.mode-tab.active { color: var(--ink); background: #fff; box-shadow: 0 2px 9px rgba(20, 36, 58, 0.1); }
.mode-tab.unavailable {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #8a94a3;
  background: #edf0f4;
  cursor: not-allowed;
  opacity: 1;
}
.mode-tab-note {
  display: inline-block;
  border-radius: 999px;
  padding: 2px 8px;
  background: #687386;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1.4;
}
.mode-panel { display: none; }
.mode-panel.active { display: block; }

.panel-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 16px;
}

.panel-heading > p { max-width: 480px; margin-bottom: 2px; color: var(--muted); text-align: right; }
.section-number { color: var(--blue); }

.surface {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
}

.form-surface { padding: 24px; }
label, legend { color: #344054; font-weight: 700; }
label { display: block; }

input, select {
  width: 100%;
  min-height: 48px;
  border: 1px solid #b8c2d1;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 10px 12px;
  outline: none;
}

input:focus, select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(29, 93, 152, 0.13); }
input:disabled { background: #e9edf2; color: #7a8492; }

.url-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; margin-top: 8px; }
.field-help { margin: 10px 0 0; color: var(--muted); font-size: 0.88rem; }

.primary-button, .secondary-button {
  min-height: 48px;
  border-radius: 8px;
  padding: 10px 22px;
  font-weight: 800;
}

.primary-button { border: 1px solid var(--blue); background: var(--blue); color: #fff; }
.primary-button:hover:not(:disabled) { background: var(--blue-dark); }
.secondary-button { border: 1px solid #aab5c4; background: #fff; color: #344054; }
.secondary-button:hover:not(:disabled) { background: #eef2f6; }
.link-button { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }


.progress-surface { margin-top: 16px; padding: 18px 20px; }
.progress-line { height: 5px; overflow: hidden; border-radius: 99px; background: #dce4ed; margin-bottom: 16px; }
.progress-line span { display: block; width: 35%; height: 100%; background: var(--blue); animation: progress-slide 1.25s ease-in-out infinite; }
@keyframes progress-slide { from { transform: translateX(-120%); } to { transform: translateX(320%); } }
.progress-copy { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.progress-copy p { margin: 2px 0 0; color: var(--muted); font-size: 0.9rem; }

.message { margin-top: 16px; padding: 14px 16px; border-radius: 8px; border: 1px solid #bfdbfe; background: #eff6ff; color: #1e4f7e; font-weight: 700; }
.message.error { border-color: #f5b8b3; background: var(--red-soft); color: var(--red); }
.message.warning { border-color: #efd08b; background: var(--amber-soft); color: #7b4d00; }
.hidden { display: none !important; }

.result-section { margin-top: 22px; }
.summary-banner {
  background: var(--navy);
  color: #fff;
  border-radius: 12px 12px 0 0;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.summary-banner h3 { font-size: 1.35rem; }
.summary-count { font-size: 1.1rem; font-weight: 800; text-align: right; }
.meta-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-top: 0; background: #fff; }
.meta-grid > div { padding: 13px 18px; border-right: 1px solid var(--line); }
.meta-grid > div:last-child { border-right: 0; }
.meta-grid span { display: block; color: var(--muted); font-size: 0.76rem; font-weight: 700; }
.meta-grid strong { display: block; margin-top: 2px; }

.machine-summary-section { margin: 22px 0; }
.machine-summary-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 10px; }
.machine-summary-heading h3 { font-size: 1.2rem; }
.machine-summary-heading > p { margin: 0; color: var(--muted); font-size: 0.84rem; }
.machine-candidate-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 10px 0 14px; }
.machine-candidate-card { display: grid; gap: 5px; padding: 13px 15px; border: 1px solid #b7d3ea; border-radius: 11px; background: #f3f9fe; }
.machine-candidate-card span { color: #17659c; font-size: 0.76rem; font-weight: 900; }
.machine-candidate-card strong { color: #153f63; font-size: 1rem; }
.machine-candidate-card small { color: #4f6476; line-height: 1.55; }
.machine-candidate-card.candidate-1 { border-color: #d3a628; background: #fff8dc; }
.machine-candidate-card.candidate-1 span, .machine-candidate-card.candidate-1 strong { color: #7d5700; }
.machine-candidate-card.no-bias { grid-column: 1 / -1; border-color: var(--line); background: #f4f6f8; }
.machine-candidate-card.no-bias strong { color: var(--muted); }
.validation-candidates { margin-top: 0; }
.machine-summary-wrap { border-radius: 12px; }
.machine-summary-table { min-width: 1700px; box-shadow: none; }
.machine-summary-table th:first-child, .machine-summary-table td:first-child { text-align: center; }
.machine-summary-table th:nth-child(2), .machine-summary-table td:nth-child(2) { text-align: center; }
.machine-summary-table th:nth-child(3), .machine-summary-table td:nth-child(3) { text-align: center; }
.machine-summary-table th:nth-child(4), .machine-summary-table td:nth-child(4) { text-align: left; }
.machine-summary-table tr.emphasis-top { background: #ccefd7; }
.machine-summary-table tr.emphasis-strong { background: #e2f5e8; }
.machine-summary-table tr.emphasis-moderate { background: #fff4c9; }
.machine-summary-table tr.emphasis-normal { background: #fff4c9; }
.machine-summary-table tr.emphasis-weak { background: #f2f3f5; color: #717985; }
.machine-emphasis-badge { display: inline-block; min-width: 72px; border-radius: 999px; padding: 5px 10px; font-weight: 900; text-align: center; }
.machine-emphasis-badge.grade-s { background: #147a43; color: #fff; }
.machine-emphasis-badge.grade-a { background: #4c9b65; color: #fff; }
.machine-emphasis-badge.grade-b { background: #d99700; color: #fff; }
.machine-emphasis-badge.grade-c,
.machine-emphasis-badge.grade-missing { background: #a3aab4; color: #fff; }


.table-wrap { border-radius: 0 0 12px 12px; overflow: auto; box-shadow: var(--shadow); }
table { width: 100%; min-width: 1240px; border-collapse: collapse; background: #fff; font-size: 0.88rem; }
th { position: sticky; top: 0; z-index: 1; background: #e9eef5; color: #354052; text-align: right; white-space: nowrap; }
th:nth-child(4), td:nth-child(4), th:nth-child(13), td:nth-child(13) { text-align: left; }
th, td { border-bottom: 1px solid #e1e6ed; padding: 11px 12px; text-align: right; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr.strong { background: var(--green-soft); }
tbody tr.medium { background: var(--amber-soft); }
tbody tr.weak { color: #7d8794; }
th:first-child { text-align: center; }

.compact-heading { align-items: center; }
.compact-heading > p { margin: 0; color: var(--muted); font-weight: 800; }


.machine-field { max-width: 520px; margin-bottom: 24px; }
.machine-field select { margin-top: 7px; }
.judgement-lamp-panel {
  position: sticky;
  top: 8px;
  z-index: 8;
  margin: -4px 0 16px;
  padding: 12px;
  border: 2px solid #c8d2df;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 8px 22px rgba(20, 36, 58, 0.14);
}
.judgement-lamp-summary { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 10px; }
.judgement-lamp-summary > span { color: var(--muted); font-size: 0.76rem; font-weight: 900; }
.judgement-lamp-summary > strong { min-width: 92px; border-radius: 999px; padding: 6px 12px; background: #7a8492; color: #fff; text-align: center; }
.judgement-lamp-summary > small { color: #475467; font-weight: 700; }
.judgement-panel-toggle { display: none; }
.judgement-live-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.judgement-live-summary > div { min-width: 0; border-radius: 8px; padding: 6px 8px; background: #eef2f6; text-align: center; }
.judgement-live-summary span, .judgement-live-summary strong, .judgement-live-summary small { display: block; }
.judgement-live-summary span { min-height: 2.4em; color: #677282; font-size: 0.64rem; font-weight: 800; line-height: 1.2; }
.judgement-live-summary strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.judgement-live-summary strong { margin-top: 2px; color: #172a3f; font-size: 0.82rem; }
.judgement-live-summary small { margin-top: 1px; color: #677282; font-size: 0.58rem; font-weight: 700; }
.judgement-lamp-panel.is-rising { border-color: #4b92d1; }
.judgement-lamp-panel.is-rising .judgement-lamp-summary > strong { background: #1d69aa; }
.judgement-lamp-panel.is-positive { border-color: #45a36c; }
.judgement-lamp-panel.is-positive .judgement-lamp-summary > strong { background: var(--green); }
.judgement-lamp-panel.is-caution { border-color: #d6a43b; }
.judgement-lamp-panel.is-caution .judgement-lamp-summary > strong { background: var(--amber); }
.judgement-lamp-panel.is-negative { border-color: #d45c52; }
.judgement-lamp-panel.is-negative .judgement-lamp-summary > strong { background: var(--red); }
.judgement-lamp-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; margin-top: 9px; }
.condition-lamp { min-width: 0; border: 1px solid #d7dee8; border-radius: 8px; padding: 6px 5px; background: #f3f5f8; text-align: center; }
.condition-lamp > span { display: block; width: 10px; height: 10px; margin: 0 auto 4px; border-radius: 50%; background: #aeb6c1; box-shadow: 0 0 0 3px rgba(174, 182, 193, 0.15); }
.condition-lamp strong, .condition-lamp small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.condition-lamp strong { color: #475467; font-size: 0.7rem; }
.condition-lamp small { color: #7a8492; font-size: 0.62rem; }
.condition-lamp.is-on { border-color: #8fcaab; background: #ecf8f1; }
.condition-lamp.is-on > span { background: #24a25a; box-shadow: 0 0 0 3px rgba(36, 162, 90, 0.17); }
.condition-lamp.is-on strong { color: #145c39; }
.condition-lamp.is-rising { border-color: #7bb2df; background: #eaf5ff; }
.condition-lamp.is-rising > span { background: #2379bd; box-shadow: 0 0 0 3px rgba(35, 121, 189, 0.16); }
.condition-lamp.is-rising strong { color: #15558b; }
.trend-window-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 7px; }
.trend-window-grid span { border-radius: 6px; padding: 3px 7px; background: #eef2f6; color: #5b6573; font-size: 0.68rem; font-weight: 800; text-align: center; }
.trend-window-grid span.is-rising { background: #e1f0fc; color: #15558b; }
.trend-window-grid span.is-falling { background: #fff0ee; color: #9f3027; }
.trend-window-grid span.is-flat { background: #fff5dc; color: #825400; }
.top-manual-actions { margin-top: 0; margin-bottom: 20px; }
.judgement-manual-actions { display: grid; grid-template-columns: minmax(0, 2fr) minmax(120px, 1fr); gap: 8px; margin: 8px 0 0; }
.judgement-manual-actions button { width: 100%; min-height: 38px; padding-top: 6px; padding-bottom: 6px; }
.input-section-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
fieldset { margin: 0; border: 1px solid var(--line); border-radius: 10px; padding: 18px; min-width: 0; }
legend { padding: 0 8px; }
.number-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.number-grid input, .play-grid input { margin-top: 7px; text-align: right; }
.mobile-section-toggle, .mobile-detail-toggle { display: none; }
.mobile-collapsible-content, .mobile-detail-content { display: block; }
.quick-input-tools { display: grid; gap: 9px; margin-top: 14px; padding-top: 13px; border-top: 1px solid #e1e6ed; }
.quick-input-group { display: grid; grid-template-columns: 66px minmax(0, 1fr); align-items: center; gap: 8px; }
.quick-input-group > span { color: var(--muted); font-size: 0.78rem; font-weight: 800; }
.quick-input-controls { display: grid; gap: 8px; }
.quick-game-step-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.quick-input-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.quick-add-button { min-height: 36px; border: 1px solid #9db7d1; border-radius: 7px; padding: 5px 11px; background: #eef5fb; color: var(--blue-dark); font-weight: 800; }
.quick-add-button:hover { background: #dfeefa; }
.quick-add-button.single-step { min-height: 52px; font-size: 1.05rem; }
.quick-add-button.single-step.decrease { background: #fff4f2; border-color: #d8aaa3; color: #963226; }
.quick-add-button.single-step.increase { background: #e7f4ff; border-color: #83b6df; color: #07538f; }
.quick-add-button.bonus { background: #eef7f2; border-color: #9bc5ad; color: #145c39; }
.quick-add-button.bonus:hover { background: #dff0e6; }
.live-extra-inputs { margin-top: 16px; padding-top: 16px; border-top: 1px solid #e1e6ed; }
.play-fieldset { margin-top: 20px; }
.play-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.play-grid label { position: relative; min-width: 0; white-space: nowrap; }
.play-grid input { display: block; width: 100%; min-width: 0; }
.play-grid label > span { position: absolute; right: 10px; bottom: 11px; color: var(--muted); font-size: 0.85rem; }
.play-grid input { padding-right: 32px; }

.check-row { display: flex; align-items: flex-start; gap: 11px; margin-top: 18px; padding: 13px 14px; background: #eef3f8; border-radius: 8px; cursor: pointer; }
.check-row input { width: 20px; min-height: 20px; height: 20px; margin: 2px 0 0; flex: 0 0 auto; }
.check-row span { display: flex; flex-direction: column; }
.check-row small { color: var(--muted); font-weight: 500; }
.form-actions { display: flex; gap: 12px; margin-top: 24px; }

.decision-card { display: grid; grid-template-columns: 240px 1fr; overflow: hidden; border-left: 7px solid var(--amber); }
.decision-card > div { padding: 22px 24px; }
.decision-card > div:first-child { background: #f1f4f8; }
.decision-card h3 { font-size: 1.75rem; color: var(--amber); }
.decision-card.positive { border-left-color: var(--green); }
.decision-card.positive h3 { color: var(--green); }
.decision-card.negative { border-left-color: var(--red); }
.decision-card.negative h3 { color: var(--red); }
.decision-card.info { border-left-color: var(--blue); }
.decision-card.info h3 { color: var(--blue); }
.decision-content ul { margin: 0; padding-left: 1.25rem; }
.checkpoint { margin: 12px 0 0; font-weight: 800; color: #344054; }

.result-share-card { margin-top: 20px; padding: 22px 24px; }
.result-share-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.result-share-heading .summary-kicker { color: var(--blue); }
.result-share-heading > p { max-width: 480px; margin: 0; color: var(--muted); text-align: right; }
#result-share-canvas { display: block; width: 100%; height: auto; margin-top: 18px; border-radius: 12px; background: var(--navy); }
.result-share-actions { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.share-button { min-height: 48px; border: 1px solid #b8c2d1; border-radius: 9px; padding: 9px 10px; background: #fff; color: #25364a; font-weight: 900; }
.share-button:hover { filter: brightness(0.97); }
.share-x { border-color: #111827; background: #111827; color: #fff; }
.share-line { border-color: #06c755; background: #06c755; color: #fff; }
.share-facebook { border-color: #1877f2; background: #1877f2; color: #fff; }
.share-download { border-color: var(--blue); color: var(--blue-dark); }
.share-message { min-height: 1.5em; margin: 10px 0 0; color: var(--green); font-weight: 800; }

.bonus-forecast-card { margin-top: 20px; padding: 22px 24px; border: 2px solid #b8d4ea; background: linear-gradient(135deg, #f6fbff 0%, #ffffff 68%); }
.bonus-forecast-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.bonus-forecast-heading h3 { margin-top: 2px; color: var(--blue-dark); font-size: 1.3rem; }
.bonus-forecast-heading .summary-kicker { color: var(--blue); }
.bonus-forecast-main { min-width: 150px; padding: 10px 16px; border-radius: 10px; background: var(--blue-dark); color: #fff; text-align: center; }
.bonus-forecast-main span { display: block; font-size: 0.74rem; font-weight: 800; opacity: 0.82; }
.bonus-forecast-main strong { display: block; margin-top: 1px; font-size: 1.6rem; }
.bonus-probability-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 18px; }
.bonus-probability { padding: 12px; border: 1px solid #cbddeb; border-radius: 9px; background: #fff; }
.bonus-probability > span:first-child { display: block; color: var(--muted); font-size: 0.78rem; font-weight: 800; }
.bonus-probability strong { display: block; margin-top: 2px; color: var(--blue-dark); font-size: 1.18rem; }
.bonus-probability-track { display: block; height: 7px; margin-top: 8px; overflow: hidden; border-radius: 99px; background: #e3ebf2; }
.bonus-probability-fill { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--blue), var(--green)); }
.bonus-forecast-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.bonus-forecast-summary > div { padding: 10px 12px; border-radius: 8px; background: #eaf3f9; }
.bonus-forecast-summary span { display: block; color: var(--muted); font-size: 0.74rem; }
.bonus-forecast-summary strong { display: block; margin-top: 2px; color: #25364a; }
.bonus-forecast-basis { margin: 12px 0 0; color: var(--muted); font-size: 0.78rem; }

.analysis-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
.analysis-card { padding: 22px; }
.analysis-card .summary-kicker { color: var(--blue); }
.metric-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0 20px; }
.metric-row > div { background: #edf2f7; border-radius: 8px; padding: 12px; }
.metric-row span { display: block; color: var(--muted); font-size: 0.78rem; }
.metric-row strong { display: block; font-size: 1.25rem; margin-top: 2px; }
.setting-bars { display: grid; gap: 9px; }
.setting-row { display: grid; grid-template-columns: 52px 1fr 68px; align-items: center; gap: 10px; font-size: 0.88rem; }
.setting-track { height: 8px; border-radius: 99px; background: #e4e9ef; overflow: hidden; }
.setting-fill { display: block; height: 100%; background: var(--blue); border-radius: 99px; }
.setting-row strong { text-align: right; }
.detail-list { display: grid; grid-template-columns: 1fr auto; gap: 0; margin: 10px 0 0; }
.detail-list dt, .detail-list dd { margin: 0; padding: 10px 0; border-bottom: 1px solid #e5e9ef; }
.detail-list dt { color: var(--muted); }
.detail-list dd { text-align: right; font-weight: 800; padding-left: 12px; }

footer { padding: 24px; text-align: center; color: var(--muted); font-size: 0.82rem; }
.site-footer { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 22px; }
.site-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; }
.site-footer a { color: var(--blue); text-decoration: none; font-weight: 800; }

.analysis-ranking { margin-top: 36px; }
.analysis-ranking-card {
  width: min(100%, 410px);
  margin: 0 auto;
  border: 1px solid #c6d6e5;
  border-radius: 18px;
  padding: 18px;
  display: grid;
  justify-items: center;
  gap: 10px;
  background: #fff;
  box-shadow: var(--shadow);
}
.analysis-ranking-card a { color: var(--blue); text-decoration: none; font-size: 0.8rem; font-weight: 900; }
.analysis-ranking-card a:first-child { width: 100%; display: block; line-height: 0; }
.analysis-ranking-card img { width: 100%; height: auto; display: block; border-radius: 11px; }

@media (max-width: 900px) {
  .play-grid { grid-template-columns: repeat(2, 1fr); }
  .analysis-grid { grid-template-columns: 1fr; }
  .decision-card { grid-template-columns: 190px 1fr; }
}

@media (max-width: 660px) {
  .header-inner { min-height: 94px; padding: 18px 16px; align-items: flex-start; }
  .header-actions { align-items: flex-end; flex-direction: column; gap: 8px; }
  .guide-button { min-height: 36px; padding: 6px 11px; font-size: 0.78rem; }
  .server-status { margin-top: 7px; font-size: 0.78rem; }
  .app-shell { padding: 16px 12px 48px; }
  .analysis-ranking { margin-top: 24px; }
  .analysis-ranking-card { width: 100%; border-radius: 15px; padding: 12px; }
  .mode-tabs { margin-bottom: 22px; }
  .mode-tab { padding: 12px 7px; font-size: 0.9rem; }
  .mode-tab.unavailable { flex-direction: column; gap: 3px; }
  .panel-heading { display: block; }
  .panel-heading > p { text-align: left; margin: 8px 0 0; font-size: 0.9rem; }
  .form-surface { padding: 16px; }
  .url-row { grid-template-columns: 1fr; }
  .url-row .primary-button, .url-row .secondary-button { width: 100%; }
  .progress-copy { align-items: stretch; flex-direction: column; }
  .progress-copy .secondary-button { width: 100%; }
  .summary-banner { align-items: flex-start; padding: 17px; }
  .summary-count { font-size: 0.9rem; }
  .meta-grid { grid-template-columns: 1fr; }
  .meta-grid > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .meta-grid > div:last-child { border-bottom: 0; }
  .machine-candidate-grid { grid-template-columns: 1fr; }
  .input-section-grid { grid-template-columns: 1fr; }
  .judgement-lamp-panel { top: 4px; margin-bottom: 12px; padding: 9px; }
  .judgement-lamp-summary { grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px; }
  .judgement-lamp-summary > small { display: block; grid-column: 1 / -1; font-size: 0.7rem; }
  .judgement-panel-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 34px;
    border: 1px solid #aac0d5;
    border-radius: 8px;
    padding: 4px 8px;
    background: #eef5fb;
    color: var(--blue-dark);
    font-size: 0.7rem;
    font-weight: 900;
  }
  .judgement-panel-toggle strong { font-size: 1rem; line-height: 1; }
  .judgement-live-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin-top: 6px; }
  .judgement-live-summary > div { padding: 4px 5px; }
  .judgement-live-summary > div { display: none; }
  .judgement-live-summary > div:nth-child(1),
  .judgement-live-summary > div:nth-child(6),
  .judgement-live-summary > div:nth-child(8),
  .judgement-live-summary > div:nth-child(10) { display: block; }
  .judgement-lamp-panel.is-expanded {
    max-height: calc(100dvh - 8px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .judgement-lamp-panel.is-expanded .judgement-live-summary > div { display: block; }
  .judgement-live-summary span { min-height: 2.4em; font-size: 0.56rem; }
  .judgement-live-summary strong { font-size: 0.72rem; }
  .judgement-lamp-grid { display: none; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
  .judgement-lamp-panel.is-expanded .judgement-lamp-grid { display: grid; }
  .condition-lamp { padding: 5px 3px; }
  .condition-lamp strong { font-size: 0.64rem; }
  .condition-lamp small { font-size: 0.57rem; }
  .trend-window-grid { display: none; grid-template-columns: 1fr 1fr 1fr; gap: 4px; }
  .judgement-lamp-panel.is-expanded .trend-window-grid { display: grid; }
  .trend-window-grid span { padding: 3px; font-size: 0.59rem; }
  .judgement-manual-actions { display: grid; grid-template-columns: minmax(0, 2fr) minmax(100px, 1fr); gap: 5px; }
  .judgement-manual-actions button { min-height: 38px; padding: 5px 3px; font-size: 0.72rem; }
  .current-data-fieldset { order: 1; }
  .previous-data-fieldset { order: 2; }
  fieldset { padding: 14px; }
  .number-grid { gap: 8px; }
  .number-grid label { font-size: 0.82rem; }
  .number-grid input { padding-left: 7px; padding-right: 7px; }
  .mobile-section-toggle, .mobile-detail-toggle {
    width: 100%;
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid #aac0d5;
    border-radius: 8px;
    padding: 9px 13px;
    background: #eef5fb;
    color: var(--blue-dark);
    font-weight: 800;
  }
  .mobile-section-toggle strong, .mobile-detail-toggle strong { font-size: 1.35rem; line-height: 1; }
  .mobile-collapsible-content:not(.mobile-expanded), .mobile-detail-content:not(.mobile-expanded) { display: none; }
  .mobile-collapsible-content.mobile-expanded, .mobile-detail-content.mobile-expanded { display: block; }
  .mobile-section-toggle + .mobile-collapsible-content { margin-top: 12px; }
  .mobile-detail-toggle { margin-top: 14px; }
  .mobile-detail-toggle + .mobile-detail-content { margin-top: 12px; }
  .quick-input-group { grid-template-columns: 1fr; gap: 5px; }
  .quick-input-buttons { display: grid; grid-template-columns: repeat(3, 1fr); }
  .quick-add-button { width: 100%; padding-left: 5px; padding-right: 5px; }
  .play-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .play-grid label:last-child { grid-column: 1 / -1; }
  .form-actions { flex-direction: column; }
  .top-manual-actions { display: grid; grid-template-columns: minmax(0, 2fr) minmax(105px, 1fr); gap: 8px; }
  .top-manual-actions .primary-button, .top-manual-actions .secondary-button { width: 100%; min-height: 50px; }
  .decision-card { grid-template-columns: 1fr; }
  .decision-card > div { padding: 17px; }
  .result-share-card { padding: 17px; }
  .result-share-heading { display: block; }
  .result-share-heading > p { margin-top: 7px; text-align: left; }
  .result-share-actions { grid-template-columns: 1fr 1fr; }
  .result-share-actions .share-download { grid-column: 1 / -1; }
  .bonus-forecast-card { padding: 17px; }
  .bonus-forecast-heading { align-items: stretch; flex-direction: column; }
  .bonus-forecast-main { min-width: 0; }
  .bonus-probability-grid { grid-template-columns: 1fr 1fr; }
  .bonus-forecast-summary { grid-template-columns: 1fr; }
  .metric-row { grid-template-columns: 1fr 1fr; }
  .metric-row > div:first-child { grid-column: 1 / -1; }
  .analysis-card { padding: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .progress-line span { animation-duration: 2.5s; }
}
.validation-form {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 190px 220px 220px;
  gap: 10px 14px;
  align-items: end;
  padding: 18px;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0;
}

.summary-card {
  display: grid;
  gap: 7px;
  padding: 16px;
}

.summary-card strong {
  color: #164f7d;
  font-size: 1.05rem;
}

.validation-form label {
  font-weight: 800;
}

.validation-form label:first-child {
  grid-column: 1;
}

.validation-form input {
  min-height: 44px;
}

.validation-form #validation-url {
  grid-column: 1;
}

.validation-form label[for="validation-date"] {
  grid-column: 2;
  grid-row: 1;
}

.validation-form #validation-date {
  grid-column: 2;
  grid-row: 2;
}

.validation-form #validation-submit {
  grid-column: 3;
  grid-row: 2;
}

.validation-form #db-validation-submit {
  grid-column: 4;
  grid-row: 2;
}

@media (max-width: 760px) {
  .validation-form {
    grid-template-columns: 1fr;
  }

  .validation-form > * {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  .summary-grid {
    grid-template-columns: 1fr;
  }
}