.ladder-content { flex: none; display: flex; flex-direction: column; gap: 12px; }
.ladder-mode, .ladder-section-heading, .ladder-account-bar, .ladder-stock { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ladder-mode { color: #94a6b5; font-size: 10px; }
.ladder-mode > span, .ladder-pill { padding: 5px 8px; border: 1px solid #355267; border-radius: 99px; background: #152733; color: #a8e4ff; font-size: 9px; white-space: nowrap; }
.ladder-mode button, .ladder-archive-link button { padding: 5px 8px; border: 0; background: transparent; color: #9cdfff; font-size: 10px; cursor: pointer; }
#ladder-chart-slot { position: sticky; top: 0; z-index: 2; }
.ladder-pinned-chart { padding: 12px; border: 1px solid #334b5c; border-radius: 16px; background: #101923; box-shadow: 0 7px 16px #0005; }
.ladder-section-heading h3 { margin: 0; font-size: 13px; color: #f1f7fb; }
.ladder-section-heading small { font-size: 9px; color: #899aaa; }
.ladder-project-select { width: 100%; height: 34px; margin-top: 10px; padding: 0 8px; border: 1px solid #2d414f; border-radius: 9px; color: #e8f2f9; background: #0c131b; font: inherit; font-size: 11px; }
.ladder-curve { min-width: 0; margin-top: 10px; }
.ladder-curve-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ladder-eyebrow { color: #83a0b4; font-size: 8px; letter-spacing: 1.5px; }
.ladder-curve-heading small { color: #8398a8; font-size: 9px; }
.ladder-curve-value { display: block; margin: 6px 0 2px; color: #b6ebff; font-size: 24px; font-variant-numeric: tabular-nums; }
.ladder-curve-value.is-negative { color: #ffbd9a; }
.ladder-curve-date { color: #849cac; font-size: 9px; }
.ladder-curve svg { display: block; width: 100%; height: 115px; margin-top: 3px; touch-action: pan-y; }
.ladder-curve svg.ladder-xy-chart { height: auto; aspect-ratio: 380 / 214; }
.ladder-chart-modes { display: flex; gap: 4px; width: fit-content; margin: 10px 0 5px; padding: 3px; border: 1px solid #2c4353; border-radius: 9px; background: #0b151e; }
.ladder-chart-mode { min-height: 27px; padding: 4px 11px; border: 0; border-radius: 6px; background: transparent; color: #8fa7b8; font: inherit; font-size: 10px; cursor: pointer; }
.ladder-chart-mode.active { color: #c6efff; background: #203c4d; }
.ladder-demo-badge, .ladder-data-badge { padding: 4px 6px; border: 1px solid #6e5d39; border-radius: 6px; color: #e0c991; font-size: 9px; white-space: nowrap; }
.ladder-data-badge { border-color: #32546b; color: #a2c9dd; }
.ladder-demo-note { margin: 7px 0 0; color: #af9f7d; font-size: 9px; line-height: 1.5; }
.ladder-demo-download { display: inline-block; margin-top: 4px; color: #90cce9; font-size: 9px; text-decoration: none; }
.ladder-chart-axis { display: flex; justify-content: space-between; padding: 0 4px; color: #7890a2; font-size: 8px; }
.ladder-chart-range { display: block; width: 100%; height: 15px; margin: 4px 0 0; padding: 0; accent-color: #94dbf8; cursor: ew-resize; }
.ladder-chart-empty { min-height: 100px; display: grid; place-items: center; color: #8397a7; font-size: 10px; text-align: center; line-height: 1.6; padding: 12px; }
.ladder-account-bar { padding: 12px; border: 1px solid #273746; border-radius: 12px; background: #121b24; }
.ladder-account-bar span { font-size: 10px; color: #9baebc; }
.ladder-account-bar strong { font-size: 17px; color: #ebf7ff; font-variant-numeric: tabular-nums; }
.ladder-feedback { margin: 0; color: #f2c991; font-size: 10px; line-height: 1.6; overflow-wrap: anywhere; }
.ladder-feedback:empty { display: none; }
.ladder-project-list { display: grid; gap: 10px; }
.ladder-project-card { padding: 12px; border: 1px solid #2a3a48; border-radius: 16px; background: linear-gradient(145deg, #151e28, #0c121a); }
.ladder-card-heading { display: flex; align-items: center; gap: 9px; }
.ladder-rank { flex: none; width: 30px; height: 34px; display: grid; place-items: center; border: 1px solid #354e61; border-radius: 9px; color: #b0e8ff; background: #192c3b; font-size: 12px; font-weight: 800; }
.ladder-card-title { min-width: 0; flex: 1; }
.ladder-card-title h3 { margin: 0; color: #eef6fd; font-size: 13px; overflow-wrap: anywhere; }
.ladder-card-title p { margin: 4px 0 0; color: #7f94a4; font-size: 9px; }
.ladder-roi { flex: none; color: #b4e6f8; font-size: 16px; font-weight: 850; font-variant-numeric: tabular-nums; }
.ladder-card-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 10px; }
.ladder-metric { min-width: 0; display: grid; gap: 5px; }
.ladder-metric span { font-size: 9px; color: #8fa4b5; }
.ladder-metric strong { color: #e9f4fc; font-size: 14px; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.ladder-progress { display: block; width: 100%; height: 5px; margin: 10px 0 7px; border: none; border-radius: 9px; overflow: hidden; accent-color: #81ccec; background: #243542; }
.ladder-progress::-webkit-progress-bar { background: #243542; }
.ladder-progress::-webkit-progress-value { background: #81ccec; border-radius: 9px; }
.ladder-stock { color: #9badba; font-size: 9px; }
.ladder-card-actions { display: grid; grid-template-columns: 1fr 1fr auto; gap: 7px; margin-top: 12px; }
.ladder-button { min-height: 36px; padding: 8px 12px; border: 1px solid #405b70; border-radius: 10px; background: #132330; color: #d5ebf9; font: inherit; font-size: 11px; cursor: pointer; }
.ladder-button.primary { border-color: #92def7; background: #a0dff5; color: #071722; font-weight: 800; }
.ladder-button:disabled { opacity: .4; cursor: default; }
.ladder-text-button { padding: 5px; border: 0; color: #94cbe8; background: transparent; font: inherit; font-size: 9px; cursor: pointer; }
.ladder-project-details { margin-top: 10px; padding-top: 8px; border-top: 1px solid #243441; color: #91a7b7; font-size: 10px; }
.ladder-project-details summary { cursor: pointer; }
.ladder-project-details p { margin: 8px 0 0; font-size: 10px; line-height: 1.7; }
.ladder-empty { padding: 20px 14px; border: 1px dashed #344a5b; border-radius: 14px; color: #b4cad9; font-size: 12px; text-align: center; }
.ladder-empty p { margin: 8px 0 0; color: #8fa4b4; font-size: 10px; line-height: 1.7; }
.ladder-account-details, .ladder-rules { padding: 12px; border: 1px solid #2c3c49; border-radius: 12px; background: #101821; color: #d7e7f1; }
.ladder-account-details summary, .ladder-rules summary { cursor: pointer; font-size: 11px; }
.ladder-holding { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 12px; }
.ladder-holding b { font-size: 11px; }
.ladder-holding small { display: block; margin-top: 4px; font-size: 9px; color: #8ea5b6; }
.ladder-holding button { flex: none; font-size: 9px; }
.ladder-trade-record { display: grid; gap: 5px; padding: 10px 0; border-bottom: 1px solid #293946; }
.ladder-trade-record b { font-size: 10px; }
.ladder-trade-record span, .ladder-trade-record small { color: #8ea4b4; font-size: 9px; }
.ladder-muted, .ladder-rules p { color: #8fa4b5; font-size: 10px; line-height: 1.7; }
.ladder-archive-link { padding: 10px 12px; border-radius: 12px; background: #15212c; }
.ladder-archive-link p { margin: 0; color: #a8bac8; font-size: 10px; line-height: 1.6; }
.ladder-archive-link button { display: block; padding-left: 0; }
.ladder-modal { position: fixed; z-index: 30; inset: 0; display: grid; place-items: center; padding: 20px; background: #03070ccc; }
.ladder-trade-dialog { width: min(100%, 420px); overflow: auto; padding: 18px; border: 1px solid #3b5366; border-radius: 20px; background: #101b25; box-shadow: 0 20px 50px #0008; }
.ladder-close { width: 32px; height: 32px; border: none; border-radius: 50%; background: #263b4b; color: #e0f4ff; font-size: 23px; cursor: pointer; }
.ladder-quantity { display: block; color: #c9dce9; font-size: 11px; }
.ladder-quantity small { margin-left: 8px; color: #8ca5b7; }
.ladder-quantity input { display: block; width: 100%; height: 42px; margin: 8px 0 10px; padding: 0 12px; border: 1px solid #365265; border-radius: 10px; background: #0a131c; color: #eff9ff; font: inherit; }
#ladder-get-quote, #ladder-confirm-trade { width: 100%; }
#ladder-confirm-trade { margin-top: 10px; }
.ladder-quote-detail { display: grid; gap: 12px; margin: 15px 0 10px; }
.ladder-quote-detail:empty { display: none; }
.ladder-quote-detail .ladder-metric { display: flex; align-items: baseline; justify-content: space-between; }
.ladder-closure-note { margin: 0; padding: 10px; border: 1px solid #79613a; border-radius: 9px; color: #f1d398; font-size: 11px; line-height: 1.6; }
.ladder-archived-card { padding: 14px; gap: 10px; overflow-y: auto; }
.ladder-archived-card > h3 { margin: 10px 0 0; color: #ecf6fc; font-size: 18px; }
.ladder-archive-image { display: block; width: 100%; max-height: 140px; object-fit: cover; border-radius: 12px; margin-top: 10px; }
@media (max-height: 700px) { .ladder-curve svg { height: 84px; } .ladder-curve-value { font-size: 20px; } .ladder-pinned-chart { padding: 10px; } }
@media (max-height: 760px) { #ladder-chart-slot { position: static; } }