:root {
  color-scheme: dark;
  --bg: #080d14;
  --surface: #111a25;
  --surface-raised: #152130;
  --field: #0b131d;
  --text: #f3f5f7;
  --muted: #98a4b2;
  --line: #2b3542;
  --line-soft: #202a36;
  --blue: #77a7ff;
  --blue-strong: #4f7fd8;
  --aqua: #53c8bd;
  --good: #66c69c;
  --warning: #e6bd69;
  --bad: #ef7d89;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(800px 420px at 18% -10%, rgba(58, 110, 181, .18), transparent 68%),
    linear-gradient(rgba(255, 255, 255, .016) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .016) 1px, transparent 1px),
    var(--bg);
  background-size: auto, 48px 48px, 48px 48px, auto;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

.shell { width: min(1120px, 100%); margin: 0 auto; padding: 24px 24px calc(56px + env(safe-area-inset-bottom)); }
.hidden { display: none !important; }
.product-header { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding-bottom: 18px; border-bottom: 1px solid rgba(113, 139, 169, .22); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-size: 1.05rem; font-weight: 700; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #4f6f98; border-radius: 9px; background: #16243a; color: #dce8ff; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 20px rgba(0,0,0,.24); font-size: .7rem; }
.product-label { border: 1px solid #304054; border-radius: 999px; background: rgba(17, 27, 40, .72); color: #b5c2d0; padding: 6px 10px; font-size: .76rem; }

.intro { max-width: 680px; padding: 56px 0 30px; }
.intro h1 { margin: 0; font-size: clamp(2.2rem, 5vw, 3.85rem); line-height: 1; letter-spacing: -.045em; font-weight: 690; }
.lede { margin: 16px 0 0; color: #aab6c3; font-size: 1.02rem; }
.auth-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(330px, .65fr); gap: 22px; align-items: stretch; }

.market-preview { position: relative; min-height: 374px; overflow: hidden; border: 1px solid #2b3b4f; border-radius: 16px; background: linear-gradient(155deg, rgba(23, 38, 56, .94), rgba(10, 18, 28, .97)); box-shadow: 0 24px 70px rgba(0, 0, 0, .28); }
.market-preview::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(to bottom, black, transparent 82%); }
.preview-head { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 24px 26px 0; }
.market-symbol { color: #f3f7fb; font-size: .9rem; font-weight: 720; letter-spacing: .035em; }
.market-period { margin-left: 10px; color: #8292a5; font-size: .72rem; }
.market-change { border: 1px solid rgba(83, 200, 189, .3); border-radius: 999px; background: rgba(26, 89, 81, .25); color: #87e0d2; padding: 5px 9px; font-size: .75rem; font-weight: 700; }
.chart-wrap { position: absolute; inset: 80px 0 78px; }
.chart-wrap svg { width: 100%; height: 100%; overflow: visible; }
.chart-area { fill: url(#chartFill); }
.chart-line { fill: none; stroke: #77a7ff; stroke-width: 3; vector-effect: non-scaling-stroke; filter: drop-shadow(0 4px 10px rgba(78, 132, 222, .32)); }
.chart-wrap circle { fill: #8db5ff; stroke: #d9e7ff; stroke-width: 2; vector-effect: non-scaling-stroke; }
.preview-metrics { position: absolute; inset: auto 24px 22px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.preview-metrics div { border-left: 2px solid #345071; padding-left: 11px; }
.preview-metrics span, .preview-metrics strong { display: block; }
.preview-metrics span { color: #8190a2; font-size: .7rem; }
.preview-metrics strong { margin-top: 2px; color: #e7edf5; font-size: .93rem; }

.card { position: relative; overflow: hidden; border: 1px solid #2d3a49; border-radius: 14px; background: linear-gradient(180deg, var(--surface-raised), var(--surface)); padding: 22px; box-shadow: 0 16px 42px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .025); }
.auth-card { padding: 27px; }
.ea-card::before, .data-card::before, .validation-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, var(--blue), transparent 72%); }
.data-card::before { background: linear-gradient(90deg, var(--aqua), transparent 72%); }
.validation-card::before { background: linear-gradient(90deg, #8b79d9, transparent 72%); }
.card h2, .workspace-heading h2 { margin: 0; color: var(--text); font-size: 1.18rem; line-height: 1.3; letter-spacing: -.012em; }
.card h3 { margin: 0; font-size: .95rem; }
.card p { margin: 4px 0 0; color: var(--muted); font-size: .88rem; }

.workspace-heading { display: flex; align-items: center; justify-content: space-between; margin: 24px 0 16px; }
.workspace-heading h2 { font-size: 1.5rem; }
.text-button { border: 0; background: transparent; color: #b5c4d5; padding: 8px; cursor: pointer; }
.text-button:hover { color: #fff; }

.journey { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 0 0 16px; padding: 0; overflow: hidden; border: 1px solid #304052; border-radius: 12px; background: #304052; box-shadow: 0 10px 28px rgba(0, 0, 0, .14); list-style: none; }
.journey li { display: flex; align-items: center; gap: 10px; background: rgba(15, 24, 35, .96); padding: 13px 15px; }
.journey li > span { display: grid; place-items: center; width: 27px; height: 27px; flex: 0 0 auto; border: 1px solid #39516d; border-radius: 7px; background: #1a2a3d; color: #c5d8fa; font-size: .72rem; font-weight: 700; }
.journey strong, .journey small { display: block; }
.journey strong { font-size: .82rem; }
.journey small { color: var(--muted); font-size: .72rem; }

.workspace-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, .85fr); grid-template-areas: "ea data" "validation data" "validation tools"; gap: 16px; align-items: start; }
.ea-card { grid-area: ea; }
.data-card { grid-area: data; }
.validation-card { grid-area: validation; }
.tools-card { grid-area: tools; padding: 7px 20px; }
.section-heading { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px; }
.section-heading p { margin-top: 2px; }
.step-number { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border: 1px solid #476284; border-radius: 9px; background: linear-gradient(145deg, #20334a, #172536); color: #d2e1fb; box-shadow: 0 6px 16px rgba(0, 0, 0, .2); font-size: .78rem; font-weight: 700; }
.subsection { margin-top: 22px; padding-top: 19px; border-top: 1px solid var(--line-soft); }
.item-list { margin-top: 15px; }
.empty-state { padding: 15px; border: 1px dashed #33404e; border-radius: 9px; background: #0e151e; color: var(--muted); font-size: .84rem; text-align: center; }

label { display: block; margin: 13px 0 6px; color: #c8d3df; font-size: .84rem; font-weight: 600; }
input, select { width: 100%; min-height: 44px; border: 1px solid #34404d; border-radius: 8px; background: var(--field); color: var(--text); padding: 10px 11px; font: inherit; outline: none; transition: border-color .15s, background .15s; }
input:hover, select:hover { border-color: #4b5969; }
input:focus, select:focus { border-color: var(--blue); background: #101923; box-shadow: 0 0 0 3px rgba(122, 162, 247, .12); }
input[type=file] { padding: 7px; font-size: .88rem; }
input[type=file]::file-selector-button { border: 1px solid #3c4b5d; border-radius: 7px; background: #1a2431; color: #e2e8ef; padding: 7px 10px; margin-right: 10px; cursor: pointer; }
.split-fields, .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-grid.three { grid-template-columns: repeat(3, 1fr); }
.field-help { margin-top: 6px; color: #8997a6; font-size: .76rem; line-height: 1.45; }
.range-field label { margin-bottom: 0; }
.range-field output { margin-top: 13px; color: #dce8f6; font-size: .86rem; font-weight: 750; }
.range-field input[type=range] { min-height: 44px; padding: 0; border: 0; background: transparent; accent-color: var(--blue); box-shadow: none; }
.optimization-inputs { margin-top: 14px; border: 1px solid var(--line); border-radius: 10px; background: #0d151e; padding: 13px; }
.input-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.input-choice { display: flex; align-items: center; gap: 9px; margin: 0; border: 1px solid #303d4a; border-radius: 8px; background: #111b26; padding: 10px; cursor: pointer; }
.input-choice:has(input:checked) { border-color: #577eb2; background: #152538; }
.input-choice input { width: auto; min-height: 0; margin: 0; accent-color: var(--blue); }
.input-choice span { min-width: 0; color: #d1dae4; font-size: .79rem; line-height: 1.35; }
.input-choice small { display: block; margin-top: 2px; color: var(--muted); font-size: .7rem; }
.best-prompt { margin-top: 14px; border: 1px solid #356b5a; border-radius: 11px; background: linear-gradient(145deg, #102a24, #0e211d); padding: 15px; }
.best-prompt strong { color: #d4f8eb; }
.best-prompt p { margin-top: 5px; color: #add8c8; }
.best-changes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.best-changes span { border: 1px solid rgba(122, 207, 177, .22); border-radius: 999px; background: rgba(72, 154, 126, .12); color: #c8ecdf; padding: 5px 8px; font-size: .72rem; }
.mt5-result { display: grid; gap: 3px; margin-top: 11px; border-left: 3px solid #4b9279; border-radius: 6px; background: #10231e; padding: 9px 10px; font-size: .74rem; }
.mt5-result strong { color: #c9f2e3; }
.mt5-result span { color: #9fc5b8; }
.mt5-result.mismatch { border-left-color: #b87b55; background: #2a1c14; }
.mt5-result.mismatch strong { color: #ffd2b7; }
.mt5-result.mismatch span { color: #ddb59e; }
.choice-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 13px; }
.choice-actions .cta, .choice-actions .secondary { margin-top: 0; }

.check { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 11px; border: 1px solid var(--line); border-radius: 8px; background: #0e151e; cursor: pointer; }
.check input { width: auto; min-height: 0; margin: 3px 0 0; accent-color: var(--blue); }
.check span { color: #d1d8e0; font-size: .82rem; line-height: 1.4; }
.safety-copy { margin-top: 9px !important; font-size: .78rem !important; }

.cta, .secondary, .compact, .approve { border-radius: 8px; font: inherit; font-weight: 650; cursor: pointer; transition: background .15s, border-color .15s, transform .15s, box-shadow .15s; }
.cta { width: 100%; min-height: 46px; margin-top: 14px; border: 1px solid #789fe9; background: linear-gradient(180deg, #638fdf, var(--blue-strong)); color: #fff; box-shadow: 0 9px 22px rgba(55, 102, 182, .22), inset 0 1px 0 rgba(255, 255, 255, .16); }
.cta:hover { background: linear-gradient(180deg, #719be7, #5988dc); transform: translateY(-1px); box-shadow: 0 12px 26px rgba(55, 102, 182, .28), inset 0 1px 0 rgba(255, 255, 255, .18); }
.secondary { width: 100%; min-height: 43px; margin-top: 11px; border: 1px solid #46576a; background: #17212d; color: #e8edf3; }
.secondary:hover, .compact:hover, .approve:hover { border-color: #6d8299; background: #1b2837; }
.compact, .approve { border: 1px solid #3c4b5b; background: #141d28; color: #dae2ea; padding: 7px 10px; font-size: .79rem; }
.cta:disabled, .secondary:disabled, .compact:disabled { opacity: .48; cursor: not-allowed; }

.row { display: flex; gap: 10px; align-items: center; }
.between { justify-content: space-between; }
.top-align { align-items: flex-start; }
.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 18px 0 15px; padding: 4px; border: 1px solid var(--line); border-radius: 9px; background: #0d141d; }
.tabs button { border: 0; border-radius: 6px; background: transparent; color: var(--muted); padding: 9px; font: inherit; font-size: .85rem; cursor: pointer; }
.tabs button.active { background: #1d2835; color: #fff; }

.notice, .warning, .errorbox, .okbox { margin-top: 12px; border-radius: 8px; padding: 10px 11px; font-size: .79rem; line-height: 1.45; }
.notice { border: 1px solid #36516a; background: #10202d; color: #bed0df; }
.warning { border: 1px solid #5c4d29; background: #2a2212; color: #f4d99d; }
.errorbox { border: 1px solid #63303a; background: #2c151b; color: #ffc0c8; }
.okbox { border: 1px solid #275c4d; background: #0d2b24; color: #c3f7e6; }
.status { display: inline-flex; align-items: center; border-radius: 999px; background: #1c2734; color: #bdc7d2; padding: 5px 8px; font-size: .72rem; white-space: nowrap; }
.status.connected, .status.ready, .status.completed { border: 1px solid rgba(102, 198, 156, .25); background: #153429; color: #b9eed9; }
.status.screened { border: 1px solid rgba(83, 200, 189, .25); background: #12332f; color: #a8e7dc; }
.status.not-selected { background: #202936; color: #99a7b6; }
.status.pending, .status.rejected { background: #382d18; color: #f1d391; }
.status.error, .status.failed { background: #3a1b23; color: #ffc1c9; }
.status.queued, .status.compiling, .status.mt5_queued, .status.mt5_running, .status.screening { background: #1b2a43; color: #c9d7ee; }

.conn, .expert { padding: 14px 0; border-top: 1px solid var(--line-soft); }
.conn:first-child, .expert:first-child { border-top: 0; }
.conn-title { font-weight: 680; font-size: .9rem; word-break: break-word; }
.meta { margin-top: 3px; color: var(--muted); font-size: .75rem; }
.expert-actions { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 10px; }
.danger { color: #ffadb7; border-color: #60303a; }
.fingerprint { margin-top: 8px; color: var(--muted); font: .73rem/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; word-break: break-all; }
.approve { margin-top: 9px; }

.source-panel { margin-top: 15px; border: 1px solid var(--line); border-radius: 9px; padding: 12px; background: #0d141d; }
.source-panel pre, .compile-log { max-height: 440px; overflow: auto; white-space: pre-wrap; word-break: break-word; border: 1px solid #293544; border-radius: 7px; background: #080d13; color: #cbd5df; padding: 12px; font: 12px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; }
.inline-details, .tools-card details { border-top: 1px solid var(--line-soft); }
.inline-details { margin-top: 20px; padding-top: 4px; }
.tools-card details:first-child { border-top: 0; }
.inline-details summary, .tools-card summary { padding: 14px 0; color: #d5dce4; font-size: .86rem; font-weight: 650; cursor: pointer; list-style: none; }
.inline-details summary::-webkit-details-marker, .tools-card summary::-webkit-details-marker { display: none; }
.inline-details summary::after, .tools-card summary::after { content: '+'; float: right; color: #8492a1; font-size: 1.1rem; }
.inline-details[open] summary::after, .tools-card details[open] summary::after { content: '−'; }
.details-body { padding: 0 0 16px; }
.code { margin: 12px 0; border: 1px dashed #4b6681; border-radius: 9px; background: #0a1119; padding: 16px; text-align: center; font-size: 1.55rem; font-weight: 800; letter-spacing: .16em; }
.small { color: var(--muted); font-size: .76rem; }
.screen-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.screen-grid span { border: 1px solid var(--line-soft); border-radius: 8px; background: #0d141d; color: var(--muted); padding: 10px; font-size: .72rem; }
.screen-grid strong { display: block; margin-top: 3px; color: var(--text); font-size: .9rem; }
.gate-reasons { padding-left: 20px; color: #ffc0c8; font-size: .8rem; line-height: 1.5; }

@media (max-width: 900px) {
  .intro { padding-top: 42px; }
  .auth-layout { grid-template-columns: 1fr; }
  .market-preview { min-height: 310px; }
  .workspace-grid { grid-template-columns: 1fr; grid-template-areas: "ea" "data" "validation" "tools"; }
  .data-card { align-self: start; }
}

@media (max-width: 620px) {
  .shell { padding: 16px 14px 40px; }
  .product-header { padding-bottom: 13px; }
  .intro { padding: 34px 0 24px; }
  .intro h1 { font-size: 2.35rem; }
  .lede { font-size: .96rem; }
  .market-preview { min-height: 260px; border-radius: 13px; }
  .preview-head { padding: 19px 18px 0; }
  .chart-wrap { inset: 66px 0 68px; }
  .preview-metrics { inset: auto 16px 16px; gap: 6px; }
  .preview-metrics div { padding-left: 8px; }
  .preview-metrics strong { font-size: .8rem; }
  .card { padding: 18px; border-radius: 12px; }
  .auth-card { padding: 20px; }
  .journey { grid-template-columns: 1fr; }
  .journey li:not(:last-child) { border-bottom: 1px solid var(--line); }
  .workspace-heading h2 { font-size: 1.3rem; }
  .split-fields, .form-grid, .form-grid.three, .screen-grid, .input-choices, .choice-actions { grid-template-columns: 1fr; }
  .section-heading { margin-bottom: 14px; }
  .row.between.top-align { align-items: flex-start; }
  .status { white-space: normal; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cta, .secondary, .compact { transition: none; }
}

.signed-in .intro { display: none; }