:root {
  color-scheme: light;
  --ink: #17211d;
  --muted: #607069;
  --line: #d7e0da;
  --paper: #f6f8f5;
  --panel: #ffffff;
  --teal: #0f766e;
  --orange: #c2410c;
  --red: #b91c1c;
  --gold: #a16207;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 15px/1.5 Inter, ui-sans-serif, system-ui, sans-serif; }
button, input, select { font: inherit; }
button, select, input { border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); }
button { padding: 9px 13px; cursor: pointer; font-weight: 750; }
button:hover { border-color: var(--teal); }
a { color: inherit; }

.alerts-header { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px clamp(18px, 4vw, 64px); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.96); backdrop-filter: blur(12px); }
.brand { display: grid; text-decoration: none; }
.brand small, .eyebrow { margin: 0; color: var(--teal); font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.brand strong { font-size: 21px; }
.alerts-header nav { display: flex; align-items: center; gap: 8px; }
.alerts-header nav a { padding: 8px 11px; border-radius: 8px; text-decoration: none; font-size: 12px; font-weight: 850; }
.alerts-header nav a.active {
  color: #052e16;
  border: 1px solid #16a34a;
  background: #4ade80;
  box-shadow: 0 0 0 1px rgba(34, 197, 94, .18), 0 7px 18px rgba(22, 163, 74, .2);
}
.alerts-unread-count { display: inline-block; min-width: 19px; padding: 2px 5px; border-radius: 999px; color: #fff; background: #dc2626; font-size: 10px; text-align: center; }
.alerts-unread-count[hidden] { display: none; }

main { display: grid; gap: 22px; width: min(1400px, calc(100% - 32px)); margin: 28px auto 64px; }
.hero { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding: clamp(24px, 4vw, 48px); border: 1px solid #badbd5; border-radius: 18px; background: linear-gradient(135deg, #ecfdf5, #fff 62%, #fff7ed); }
.hero h1 { max-width: 780px; margin: 4px 0 10px; font-size: clamp(32px, 5vw, 64px); line-height: 1.02; letter-spacing: -.04em; }
.hero p:last-child { max-width: 700px; margin: 0; color: var(--muted); font-size: 17px; }
.master-control { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.master-control span { color: var(--teal); font-weight: 850; }
.manage-alerts-button { color: #166534; border-color: #22c55e; background: #ecfdf5; }

.panel { padding: 22px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); box-shadow: 0 8px 26px rgba(23,33,29,.05); }
.panel-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.panel-heading h2 { margin: 2px 0 0; font-size: 24px; }
.panel-heading > p, .panel-heading > span { margin: 0; color: var(--muted); }
[hidden] { display: none !important; }

.enrollment-shell, .enrolled-shell { display: grid; gap: 22px; }
.enrollment-intro { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px; border: 2px solid #22c55e; border-radius: 14px; background: #f0fdf4; }
.enrollment-intro h2 { margin: 3px 0 5px; font-size: 28px; }
.enrollment-intro p:last-child { max-width: 760px; margin: 0; color: var(--muted); }
.enrollment-step { flex: 0 0 auto; padding: 8px 12px; border-radius: 999px; color: #052e16; background: #4ade80; font-size: 12px; font-weight: 900; text-transform: uppercase; }
.section-description { margin: -8px 0 18px; color: var(--muted); }
.actionable-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.actionable-card { display: grid; gap: 3px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: #fbfefc; text-decoration: none; }
.actionable-card:hover { border-color: #22c55e; background: #f0fdf4; }
.actionable-symbol { color: #166534; font-size: 18px; font-weight: 900; }
.actionable-card > span:not(.actionable-symbol), .actionable-card small { color: var(--muted); font-size: 11px; }

.preset-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.preset { display: flex; align-items: start; justify-content: space-between; gap: 12px; min-height: 116px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #fbfcfb; }
.preset strong { display: block; margin-bottom: 5px; }
.preset p { margin: 0; color: var(--muted); font-size: 13px; }
.switch { position: relative; flex: 0 0 auto; width: 42px; height: 24px; border: 0; border-radius: 999px; background: #cbd5e1; }
.switch::after { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; content: ""; transition: .18s; }
.switch.on { background: var(--teal); }
.switch.on::after { transform: translateX(18px); }

.sentence-builder { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 18px; border-radius: 12px; background: #f0fdfa; font-size: 18px; font-weight: 750; }
.sentence-builder select, .sentence-builder input { min-height: 42px; padding: 7px 10px; font-weight: 750; }
.ticker-input { width: 110px; text-transform: uppercase; }
.condition-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.condition-grid label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; }
.condition-grid select, .condition-grid input { width: 100%; min-height: 42px; padding: 8px 10px; text-transform: none; }
.rule-preview { min-height: 24px; margin: 14px 0; color: var(--teal); font-weight: 750; }
.form-actions { display: flex; gap: 10px; }
button.primary { color: #fff; border-color: var(--teal); background: var(--teal); }
.delivery-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.delivery-options label { display: flex; align-items: start; gap: 10px; padding: 15px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.delivery-options label:has(input:checked) { border-color: #22c55e; background: #f0fdf4; }
.delivery-options label.delivery-disabled { cursor: not-allowed; opacity: .58; background: #f1f5f3; }
.delivery-options input { margin-top: 4px; }
.delivery-options span { display: grid; gap: 3px; }
.delivery-options small, .delivery-note { color: var(--muted); }
.contact-field { display: grid; gap: 6px; max-width: 480px; margin-top: 14px; color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; }
.contact-field input { min-height: 42px; padding: 8px 10px; font-weight: 500; text-transform: none; }
.delivery-note { margin: 12px 0; font-size: 13px; }

.two-column { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.stack { display: grid; gap: 10px; }
.empty { padding: 22px; border: 1px dashed var(--line); border-radius: 10px; color: var(--muted); text-align: center; }
.rule-card, .history-card { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; }
.rule-card header, .history-card header { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.rule-card h3, .history-card h3 { margin: 0; font-size: 15px; }
.rule-card p, .history-card p { margin: 0; color: var(--muted); font-size: 13px; }
.card-actions { display: flex; gap: 6px; }
.card-actions button { padding: 5px 8px; font-size: 11px; }
.history-card.unread { border-left: 4px solid var(--orange); background: #fffaf5; }
.history-meta { display: flex; flex-wrap: wrap; gap: 8px; color: var(--muted); font-size: 11px; }
.history-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.history-actions a, .history-actions button { padding: 6px 9px; border: 1px solid #86efac; border-radius: 7px; color: #166534; background: #f0fdf4; font-size: 11px; font-weight: 800; text-decoration: none; }
.event-risk_warning { color: var(--red); }
.event-top_pick_added, .event-breakout_added, .event-became_accumulate { color: var(--teal); }

.beta-note { padding: 18px 22px; border: 1px solid #fed7aa; border-radius: 12px; background: #fff7ed; }
.beta-note strong { color: #9a3412; }
.beta-note p { margin: 4px 0 0; color: #7c2d12; }
.opt-out-button { margin-top: 14px; color: #991b1b; border-color: #fca5a5; background: #fff; }
.opt-out-button:hover { color: #fff; border-color: #b91c1c; background: #b91c1c; }

@media (max-width: 900px) {
  .preset-grid, .condition-grid, .two-column, .actionable-grid, .delivery-options { grid-template-columns: 1fr; }
  .hero { align-items: start; flex-direction: column; }
  .enrollment-intro { align-items: start; flex-direction: column; }
  .alerts-header { align-items: start; flex-direction: column; }
  .alerts-header nav { max-width: 100%; overflow-x: auto; }
}