:root {
  --bg: #f3f7fb;
  --panel: #ffffff;
  --ink: #07182c;
  --muted: #587086;
  --line: #d6e2ee;
  --blue: #0d63ce;
  --green: #087a60;
  --green-soft: #e8fff6;
  --yellow-soft: #fff7d6;
  --red-soft: #fff0f0;
  --red: #b91c1c;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: linear-gradient(180deg, #eef7fb 0%, var(--bg) 45%, #fff 100%);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
}
button, input { font: inherit; }
.closing-shell { width: min(1240px, calc(100% - 28px)); margin: 0 auto; padding: 14px 0 44px; }
.closing-hero, .rule-panel, .status-strip > div, .pair-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 12px 30px rgba(18, 44, 72, .08);
}
.closing-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: end;
  padding: 22px;
  color: #fff;
  background: linear-gradient(135deg, #092d4b, #087a60);
}
.hero-collapse {
  display: block;
  padding: 0;
  overflow: hidden;
}
.hero-body {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: end;
  padding: 0 22px 22px;
}
.hero-slim {
  display: grid;
  grid-template-columns: 20px minmax(150px,.8fr) minmax(60px,.35fr) minmax(190px,1fr);
  gap: 10px;
  align-items: center;
  min-height: 54px;
  padding: 12px 16px;
  cursor: pointer;
  list-style: none;
  font-weight: 900;
}
.hero-slim::-webkit-details-marker { display: none; }
.hero-slim::before {
  content: "+";
  display: inline-grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 999px;
  color: #083047;
  background: #e8fff7;
}
.hero-collapse[open] > .hero-slim::before { content: "-"; }
.hero-slim span { display: block; color: #fff; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }
.hero-slim b { color: #fff; font-size: 18px; }
.hero-slim em { overflow: hidden; color: #dff8ff; font-size: 13px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.closing-hero a { color: #dff8ff; font-weight: 900; text-decoration: none; }
.hero-nav-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  margin-left: 8px;
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 999px;
  color: #083047;
  background: #e8fff7;
}
.closing-hero span, .label, .hero-meta span, .status-strip span, .leg-card span {
  display: block;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.closing-hero h1 { margin: 8px 0; font-size: clamp(36px, 5vw, 64px); line-height: .95; }
.closing-hero p { max-width: 760px; margin: 0; color: #e8f9ff; font-size: 17px; line-height: 1.45; }
.hero-meta { display: grid; grid-template-columns: repeat(3, minmax(125px, 1fr)); gap: 10px; min-width: 470px; }
.hero-meta div { padding: 14px; border: 1px solid rgba(255,255,255,.22); border-radius: 8px; background: rgba(255,255,255,.12); }
.hero-meta strong { display: block; margin-top: 5px; font-size: 20px; }
.rule-panel {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  margin-top: 14px;
  padding: 16px;
}
.rule-panel h2, .section-head h2 { margin: 4px 0 6px; font-size: 26px; }
.rule-panel p { margin: 0; color: var(--muted); font-weight: 800; line-height: 1.45; }
.top-scan-panel {
  align-items: stretch;
}
.top-scan-controls {
  display: grid;
  gap: 10px;
  min-width: min(560px, 48vw);
}
.custom-ticker-row.compact {
  margin-top: 0;
  padding: 8px;
}
.top-scan-controls > .actions:last-child {
  justify-content: flex-end;
}
button {
  min-height: 44px;
  border: 1px solid #b8cce0;
  border-radius: 8px;
  padding: 0 16px;
  background: #f8fbff;
  color: #06365c;
  font-weight: 900;
  cursor: pointer;
}
button:hover { background: #eaf5ff; }
button:disabled { opacity: .55; cursor: not-allowed; }
#scanBtn, #saveBtn { color: #fff; background: var(--green); border-color: var(--green); }
.status-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.status-strip > div { padding: 14px; }
.status-strip strong { display: block; margin-top: 4px; font-size: 20px; }
.pair-panel { margin-top: 14px; padding: 16px; }
.saved-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ticker-chip.selected {
  color: #fff;
  background: var(--green);
  border-color: var(--green);
}
.custom-ticker-row {
  display: grid;
  grid-template-columns: auto minmax(120px, 220px) auto;
  gap: 10px;
  align-items: center;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbff;
}
.custom-ticker-row label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}
.custom-ticker-row input {
  min-height: 44px;
  border: 1px solid #b8cce0;
  border-radius: 8px;
  padding: 0 12px;
  color: var(--ink);
  background: #fff;
  font-weight: 900;
  text-transform: uppercase;
}
.option-list-input {
  width: 100%;
  min-height: 120px;
  margin-top: 12px;
  border: 1px solid #b8cce0;
  border-radius: 8px;
  padding: 12px;
  color: var(--ink);
  background: #fbfdff;
  font: 900 14px/1.45 Consolas, "Courier New", monospace;
  resize: vertical;
}
.option-list-input:focus {
  outline: 3px solid rgba(17,102,216,.2);
  border-color: #7db3e8;
}
.manual-status {
  margin-top: 10px;
  padding: 10px;
  border-radius: 8px;
  background: #eef6ff;
  color: #06365c;
  font-weight: 900;
}
.alert-settings-grid {
  display: grid;
  grid-template-columns: minmax(140px, auto) minmax(180px, 1fr) minmax(140px, auto) minmax(180px, 1fr);
  gap: 10px;
  align-items: center;
  margin-top: 12px;
}
.alert-settings-grid label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-weight: 900;
}
.alert-settings-grid input[type="email"],
.alert-settings-grid input[type="tel"] {
  min-height: 44px;
  border: 1px solid #b8cce0;
  border-radius: 8px;
  padding: 0 12px;
  color: var(--ink);
  background: #fff;
  font-weight: 900;
}
.closing-alert-log {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}
.closing-alert-item {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid #76cfb6;
  border-radius: 8px;
  background: var(--green-soft);
  font-weight: 900;
}
.closing-alert-item small { color: var(--muted); font-weight: 900; }
.closing-alert-links { display: flex; flex-wrap: wrap; gap: 6px; }
.closing-alert-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 4px 9px;
  border: 1px solid #b8cce0;
  border-radius: 7px;
  color: #064e8a;
  background: #fff;
  text-decoration: none;
  font-size: 12px;
  font-weight: 900;
}
.manual-list-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.manual-column {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbff;
  padding: 10px;
}
.manual-column h3 { margin: 0 0 8px; font-size: 20px; }
.manual-option {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  min-height: 72px;
  margin-top: 8px;
  padding: 10px;
  text-align: left;
  background: #fff;
}
.manual-option.selected {
  border-color: #087a60;
  background: var(--green-soft);
  box-shadow: 0 0 0 2px rgba(8,122,96,.16);
}
.manual-option.over-price {
  opacity: .58;
}
.manual-option span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}
.manual-option b { display: block; margin-top: 3px; color: var(--ink); font-size: 15px; word-break: break-word; }
.manual-option em { color: #06365c; font-style: normal; font-weight: 900; }
.pair-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 12px;
}
.pair-summary.empty { display: block; padding: 14px; border: 1px dashed var(--line); border-radius: 8px; color: var(--muted); font-weight: 900; }
.scan-summary-collapse {
  display: block;
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbff;
  overflow: hidden;
}
.scan-summary-collapse .pair-summary {
  margin: 0;
  padding: 12px;
}
.scan-summary-slim {
  display: grid;
  grid-template-columns: 20px minmax(130px,.8fr) minmax(110px,.7fr) minmax(150px,1fr);
  gap: 10px;
  align-items: center;
  min-height: 48px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
  font-weight: 900;
}
.scan-summary-slim::-webkit-details-marker { display: none; }
.scan-summary-slim::before {
  content: "+";
  display: inline-grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 999px;
  background: #d9ecfb;
  color: #06365c;
}
.scan-summary-collapse[open] > .scan-summary-slim::before { content: "-"; }
.scan-summary-slim span { color: var(--ink); font-size: 13px; }
.scan-summary-slim b { overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.scan-summary-slim em { overflow: hidden; color: var(--muted); font-size: 12px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.hedge-panel {
  padding: 0;
  overflow: hidden;
}
.hedge-panel > .scan-summary-slim {
  border-bottom: 1px solid transparent;
}
.hedge-panel[open] > .scan-summary-slim {
  border-bottom-color: var(--line);
}
.hedge-content {
  padding: 16px;
}
.summary-tile {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbff;
}
.summary-tile span { display: block; color: var(--muted); font-size: 11px; font-weight: 900; text-transform: uppercase; }
.summary-tile strong { display: block; margin-top: 5px; font-size: 20px; }
.leg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.backtest-panel {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbff;
}
.backtest-panel.empty {
  border-style: dashed;
  color: var(--muted);
  font-weight: 900;
}
.backtest-panel.cover { background: var(--green-soft); border-color: #76cfb6; }
.backtest-panel.miss { background: var(--yellow-soft); border-color: #e6c574; }
.backtest-panel h3 { margin: 0 0 10px; font-size: 24px; }
.backtest-panel h4 { margin: 16px 0 8px; font-size: 18px; }
.backtest-section {
  margin-top: 10px;
  border: 1px solid rgba(80,110,140,.22);
  border-radius: 8px;
  background: rgba(255,255,255,.48);
  overflow: hidden;
}
.backtest-slim,
.leg-slim {
  display: grid;
  grid-template-columns: 20px minmax(110px,.8fr) minmax(120px,1fr) minmax(180px,1.4fr);
  gap: 10px;
  align-items: center;
  min-height: 46px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
  font-weight: 900;
}
.backtest-slim::-webkit-details-marker,
.leg-slim::-webkit-details-marker { display: none; }
.backtest-slim::before,
.leg-slim::before {
  content: "+";
  display: inline-grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 999px;
  background: #d9ecfb;
  color: #06365c;
}
.backtest-section[open] > .backtest-slim::before,
.leg-card[open] > .leg-slim::before { content: "-"; }
.backtest-slim span,
.leg-slim span { color: var(--ink); font-size: 13px; text-transform: none; }
.backtest-slim b,
.leg-slim b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.backtest-slim em,
.leg-slim em { overflow: hidden; color: var(--muted); font-size: 12px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.backtest-section > .backtest-grid,
.backtest-section > .backtest-table-wrap,
.backtest-section > .backtest-note,
.backtest-section > .backtest-decision { margin: 10px 12px 12px; }
.backtest-note {
  margin: -4px 0 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}
.backtest-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.backtest-grid div { padding: 10px; border: 1px solid rgba(80,110,140,.22); border-radius: 8px; background: rgba(255,255,255,.72); }
.backtest-grid span { display: block; color: var(--muted); font-size: 11px; font-weight: 900; text-transform: uppercase; }
.backtest-grid b { display: block; margin-top: 4px; font-size: 17px; }
.backtest-decision { margin: 12px 0 0; font-weight: 900; line-height: 1.45; }
.backtest-table-wrap {
  overflow-x: auto;
  border: 1px solid rgba(80,110,140,.22);
  border-radius: 8px;
  background: rgba(255,255,255,.7);
}
.backtest-table {
  width: 100%;
  min-width: 880px;
  border-collapse: collapse;
  font-size: 13px;
  font-weight: 900;
}
.backtest-table th,
.backtest-table td {
  padding: 9px 10px;
  border-bottom: 1px solid rgba(80,110,140,.16);
  text-align: left;
  white-space: nowrap;
}
.backtest-table th {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}
.backtest-table small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}
.backtest-table tr.cover-row td {
  background: rgba(12, 183, 137, .14);
  color: #064b3d;
}
.leg-card {
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}
.leg-card.cover { background: var(--green-soft); border-color: #76cfb6; }
.leg-card.watch { background: var(--yellow-soft); border-color: #e6c574; }
.leg-card > span,
.leg-card h3,
.leg-card p,
.leg-card .leg-metrics,
.leg-card .leg-action,
.leg-card .link-row,
.leg-card .future-expiration-result { margin-left: 16px; margin-right: 16px; }
.leg-card > span { display: block; margin-top: 14px; }
.leg-card h3 { margin-top: 5px; margin-bottom: 2px; font-size: 26px; }
.leg-card p { margin-top: 0; color: var(--muted); font-weight: 900; word-break: break-word; }
.leg-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.leg-metrics div { padding: 9px; border: 1px solid rgba(80,110,140,.22); border-radius: 8px; background: rgba(255,255,255,.72); }
.leg-metrics b { display: block; margin-top: 4px; font-size: 17px; }
.leg-action {
  margin-top: 12px;
  padding: 10px;
  border-radius: 8px;
  background: #eef6ff;
  color: #06365c;
  font-weight: 900;
}
.leg-card.cover .leg-action { background: var(--green); color: #fff; }
.link-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.leg-card .link-row { margin-bottom: 16px; }
.link-row a,
.link-row button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid #b8cce0;
  border-radius: 8px;
  background: #f8fbff;
  color: #064e8a;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
}
.link-row button {
  color: #07523f;
  background: #e8fff6;
  border-color: #76cfb6;
}
.link-row a:hover,
.link-row button:hover { background: #eaf5ff; border-color: #7db3e8; }
.future-expiration-result {
  margin-top: 0;
  margin-bottom: 16px;
  padding: 12px;
  border: 1px solid #cfe0ed;
  border-radius: 8px;
  background: #f8fbff;
  color: var(--muted);
  font-weight: 900;
}
.future-expiration-result.loading {
  color: #06365c;
  background: #eef6ff;
}
.future-expiration-result.empty {
  font-size: 13px;
}
.future-expiration-result.error {
  border-color: #f2b4b4;
}
.future-expiration-collapse {
  display: block;
}
.future-expiration-head {
  display: grid;
  grid-template-columns: 20px minmax(130px, .8fr) minmax(170px, 1fr);
  gap: 3px;
  align-items: center;
  margin-bottom: 10px;
  cursor: pointer;
  list-style: none;
}
.future-expiration-head::-webkit-details-marker {
  display: none;
}
.future-expiration-head::before {
  content: "+";
  display: inline-grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 999px;
  background: #d9ecfb;
  color: #06365c;
  font-weight: 950;
}
.future-expiration-collapse[open] > .future-expiration-head::before {
  content: "-";
}
.future-expiration-head span {
  color: var(--green);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.future-expiration-head b {
  color: var(--ink);
  font-size: 18px;
}
.future-expiration-head small {
  color: var(--muted);
}
.future-expiration-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.future-expiration-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #d6e2ee;
  border-radius: 8px;
  background: #fff;
}
.future-expiration-card.nearby {
  background: var(--yellow-soft);
  border-color: #e6c574;
}
.future-expiration-card strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 20px;
}
.future-expiration-card small {
  overflow-wrap: anywhere;
}
.future-expiration-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.future-expiration-metrics span {
  padding: 8px;
  border-radius: 8px;
  background: #f4f8fc;
  color: var(--ink);
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
}
.future-expiration-metrics b {
  display: block;
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
}
.future-expiration-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.future-expiration-links a {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #b8cce0;
  border-radius: 8px;
  padding: 6px 12px;
  color: #064e8a;
  background: #f8fbff;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
}
.error { background: var(--red-soft) !important; color: var(--red) !important; }
@media (max-width: 900px) {
  .closing-hero, .rule-panel, .saved-head { grid-template-columns: 1fr; flex-direction: column; align-items: stretch; }
  .hero-body { grid-template-columns: 1fr; }
  .hero-slim { grid-template-columns: 20px 1fr; }
  .hero-slim span, .hero-slim b, .hero-slim em { grid-column: 2; }
  .hero-slim em { white-space: normal; }
  .top-scan-controls { min-width: 0; }
  .hero-meta, .status-strip, .pair-summary, .leg-grid, .leg-metrics, .backtest-grid, .manual-list-grid, .custom-ticker-row, .alert-settings-grid, .closing-alert-item, .future-expiration-grid, .future-expiration-metrics { grid-template-columns: 1fr; min-width: 0; }
  .scan-summary-slim { grid-template-columns: 20px 1fr; }
  .scan-summary-slim span, .scan-summary-slim b, .scan-summary-slim em { grid-column: 2; }
  .scan-summary-slim em { white-space: normal; }
  .backtest-slim, .leg-slim { grid-template-columns: 20px 1fr; }
  .backtest-slim em, .leg-slim em { grid-column: 2; white-space: normal; }
  .backtest-slim span, .leg-slim span { grid-column: 2; }
  .backtest-slim b, .leg-slim b { grid-column: 2; }
}