:root { color: #172033; background: #f5f7fa; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.5; }
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
.app-shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
.sidebar { background: #fff; border-right: 1px solid #dfe3e8; padding: 24px 16px; }
.brand { display: block; margin: 0 12px 24px; color: #111827; font-size: 1.2rem; font-weight: 700; }
.site-domain { margin: -16px 12px 22px; color: #98a2b3; font-size: 0.72rem; overflow-wrap: anywhere; }
nav { display: grid; gap: 4px; }
nav a { border-radius: 6px; color: #4b5563; padding: 10px 12px; }
nav a:hover { background: #f3f4f6; color: #111827; }
nav a.active { background: #e9eef7; color: #173b70; font-weight: 600; }
.content { padding: 56px clamp(28px, 6vw, 80px); }
.content:focus { outline: none; }
h1 { margin: 0 0 8px; font-size: 2rem; letter-spacing: -0.02em; }
.content > p { margin: 0; color: #667085; }
.broker-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-top: 32px; max-width: 900px; }
.broker-card { background: #fff; border: 1px solid #dfe3e8; border-radius: 8px; padding: 18px; }
.broker-card h2 { margin: 0; font-size: 1rem; }
.broker-card p { margin: 6px 0 16px; color: #667085; font-size: 0.9rem; }
.card-actions { display: flex; gap: 8px; }
button { border: 1px solid #cfd5dd; border-radius: 5px; padding: 6px 10px; }
button:disabled { background: #f5f6f7; color: #98a2b3; cursor: not-allowed; }
.credentials-page { max-width: 1120px; }
.credentials-top { align-items: flex-start; display: flex; justify-content: space-between; gap: 24px; }
.credentials-top h1 { margin-bottom: 4px; }
.credentials-top p { color: #667085; margin: 0; }
.button-primary,.button-secondary { cursor: pointer; font-weight: 600; }
.button-primary { background: #173b70; border-color: #173b70; color: #fff; }
.button-secondary { background: #fff; color: #344054; }
.control-centre { background: #fff; border: 1px solid #dfe3e8; border-radius: 9px; margin: 28px 0 18px; padding: 20px; }
.control-centre h2 { margin: 2px 0 18px; font-size: 1.2rem; }
.eyebrow,.broker-name { color: #667085; font-size: .72rem; font-weight: 700; letter-spacing: .08em; margin: 0; }
.status-counts { display: flex; gap: 48px; }
.count-item { display: grid; }
.count-item strong { font-size: 1.7rem; }
.count-item span { color: #667085; font-size: .72rem; font-weight: 700; }
.credential-account-list { display: grid; gap: 14px; }
.credential-account { background: #fff; border: 1px solid #dfe3e8; border-radius: 9px; padding: 20px; }
.account-head { align-items: center; display: flex; justify-content: space-between; gap: 16px; }
.account-head h2 { font-size: 1.1rem; margin: 2px 0 0; }
.status-badge { border-radius: 999px; font-size: .7rem; font-weight: 800; padding: 5px 9px; }
.status-ready { background: #dcfce7; color: #166534; }
.status-not-wired,.status-disabled { background: #f2f4f7; color: #667085; }
.status-invalid,.status-validation-failed { background: #fee2e2; color: #991b1b; }
.status-session-expired { background: #fee2e2; color: #991b1b; }
.status-authorization-required,.status-not-configured { background: #fef3c7; color: #92400e; }
.environment-label { color: #475467; font-size: .75rem; font-weight: 700; margin: 10px 0 0; }
.credential-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 18px; }
.credential-section h3 { color: #667085; font-size: .72rem; letter-spacing: .06em; margin: 0 0 10px; }
.credential-field,.metadata-row { border-top: 1px solid #eef0f3; display: flex; justify-content: space-between; gap: 20px; padding: 9px 0; font-size: .82rem; }
.field-configured { color: #166534; }.field-missing { color: #b42318; }.metadata-value { color: #667085; text-align: right; }
.credential-actions { border-top: 1px solid #eef0f3; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; padding-top: 16px; }
.modal-overlay { align-items: center; background: rgba(17,24,39,.48); display: flex; inset: 0; justify-content: center; padding: 20px; position: fixed; z-index: 10; }
.credential-modal { background: #fff; border-radius: 10px; max-height: 90vh; max-width: 500px; overflow: auto; padding: 24px; width: 100%; }
.credential-modal h2 { margin: 0; }.modal-help { color: #667085; font-size: .85rem; }
.form-field { display: grid; gap: 5px; margin-top: 13px; font-size: .82rem; font-weight: 600; }
.form-field input { border: 1px solid #cfd5dd; border-radius: 6px; font: inherit; padding: 9px 10px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.error-message { color: #b42318; }
.market-page { max-width: 1180px; }.market-head p { color:#667085;margin:0 }.market-status { background:#fff;border:1px solid #dfe3e8;border-radius:9px;display:grid;grid-template-columns:repeat(4,1fr);gap:0 24px;margin:24px 0;padding:14px 20px }.menu-section { background:#fff;border:1px solid #dfe3e8;border-radius:9px;margin:14px 0;padding:20px;overflow-x:auto }.menu-section h2 { font-size:1.15rem;margin:3px 0 16px }.menu-section h3 { font-size:.9rem;margin:24px 0 8px }.menu-table { border-collapse:collapse;width:100%;font-size:.8rem }.menu-table th,.menu-table td { border-bottom:1px solid #eef0f3;padding:9px;text-align:left;white-space:nowrap }.menu-table th { color:#667085;font-size:.7rem;letter-spacing:.04em }.menu-table input[type=number] { width:70px }.check-row { display:block;margin:10px 0 }.check-row input { margin-right:8px }.menu-search { border:1px solid #cfd5dd;border-radius:6px;padding:10px;width:min(100%,440px) }.search-results { display:grid;max-width:600px }.search-result { background:#fff;text-align:left }.menu-chips { display:flex;flex-wrap:wrap;gap:6px;margin-top:10px }.menu-chip { background:#e9eef7;color:#173b70 }.menu-actions { align-items:center;display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 }.configuration-note { color:#667085;font-size:.8rem }.reference-update-success { color:#166534;font-size:.85rem;font-weight:600 }.menu-preview { background:#fff;border:1px solid #dfe3e8;border-radius:9px;padding:20px }.preview-counts { display:grid;grid-template-columns:repeat(3,1fr);gap:0 20px }.preview-safe { color:#166534;font-weight:700 }.preview-danger,.preview-warning { color:#b42318;font-weight:700 }.menu-preview details { margin-top:16px }.menu-preview summary { cursor:pointer;font-weight:600 }
.option-chain-page{max-width:1500px}.chain-subtitle{color:#667085;margin:0}.chain-selectors{display:grid;grid-template-columns:repeat(3,minmax(180px,1fr));gap:12px;margin:24px 0}.chain-selector{display:grid;gap:5px;color:#667085;font-size:.72rem;font-weight:700;letter-spacing:.05em}.chain-selector select,.chain-selector input{background:#fff;border:1px solid #cfd5dd;border-radius:6px;font:inherit;padding:9px}.chain-host>h2{margin:10px 0}.chain-info{background:#fff;border:1px solid #dfe3e8;border-radius:8px;display:grid;grid-template-columns:repeat(5,1fr);gap:0 18px;padding:12px 18px}.chain-table-wrap{background:#fff;border:1px solid #dfe3e8;border-radius:8px;margin-top:14px;overflow-x:auto}.chain-table{border-collapse:collapse;font-size:.7rem;min-width:1900px;width:100%}.chain-table th,.chain-table td{border-bottom:1px solid #eef0f3;padding:6px;text-align:right;white-space:nowrap}.chain-table th{background:#f8fafc;color:#667085;font-size:.62rem}.chain-table .call-group{text-align:center;color:#173b70}.chain-table .put-group{text-align:center;color:#8a3b12}.chain-table .strike-group,.chain-strike{text-align:center}.chain-strike{font-weight:700}.atm-row{background:#fff8df}.atm-badge{background:#f4c95d;border-radius:999px;font-size:.55rem;margin-left:5px;padding:2px 4px}.chain-missing{color:#98a2b3}.chain-empty{background:#fff;border:1px solid #dfe3e8;border-radius:8px;margin-top:24px;padding:28px}.chain-empty .button-primary{display:inline-block;margin-top:10px;padding:7px 11px}
.chain-order-strip{align-items:end;background:#fff;border:1px solid #dfe3e8;border-radius:8px;display:grid;grid-template-columns:180px 180px 180px 1fr;gap:12px;margin:-10px 0 20px;padding:14px}.chain-order-strip p{margin:0}.chain-buy{background:#173b70;border-color:#173b70;color:#fff;cursor:pointer;font-size:.65rem;font-weight:700;padding:4px 7px}
@media (max-width: 720px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { border-bottom: 1px solid #dfe3e8; border-right: 0; padding: 16px; }
  .brand { margin: 0 8px 12px; }
  .site-domain { margin: -6px 8px 14px; }
  nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .content { padding: 32px 24px; }
  .credentials-top { display: grid; }.status-counts { gap: 20px; justify-content: space-between; }.credential-columns { grid-template-columns: 1fr; }
  .market-status,.preview-counts { grid-template-columns:1fr; }
  .chain-selectors,.chain-info,.chain-order-strip { grid-template-columns:1fr; }
}