.plan-overview,.chart-card,.table-card {
    background:var(--color-card);
    border:1px solid var(--color-border);
    border-radius:10px;
    min-width:0;
}

.plan-overview {
    padding:23px 24px 17px;
}

.overview-heading {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-bottom:22px;
}

.overview-heading h2 {
    font-size:12px;
    font-weight:600;
    color:var(--color-text-secondary);
}

.subtle-label {
    font-size:10px;
    color:var(--color-text-muted);
}

.metrics-grid {
    display:grid;
    grid-template-columns:1.2fr 1fr 1fr .75fr;
    gap:18px;
}

.metric {
    min-width:0;
}

.metric>p {
    font-size:10px;
    color:var(--color-text-muted);
    margin:0 0 7px;
}

.metric strong {
    font:500 clamp(18px,1.7vw,25px)/1.3 var(--font-mono);
    letter-spacing:-1.1px;
    overflow-wrap:anywhere;
}

.metric:first-child strong {
    color:var(--color-primary);
}

.profit-note {
    margin:17px 0 0;
    color:var(--color-text-muted);
    font-size:10px;
}

.profit-strip {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:24px;
    padding:14px 0 0;
    margin-top:20px;
    border-top:1px solid var(--color-border);
}

.profit-strip>div {
    display:flex;
    align-items:baseline;
    gap:12px;
}

.profit-strip span {
    font-size:10px;
    color:var(--color-text-muted);
}

.profit-strip strong {
    font-family:var(--font-mono);
    font-size:17px;
    letter-spacing:-.5px;
}

.chart-card {
    padding:23px 24px 0;
}

.chart-heading {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
}

.chart-heading p {
    margin-top:4px;
}

.chart-unit {
    width:154px;
}

.chart-unit button {
    min-height:29px;
    font-size:10px;
    padding:4px 12px;
}

.chart-toolbar {
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;
    margin-top:22px;
}

.chart-legend {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:15px;
    font-size:10px;
}

.chart-legend>span {
    display:inline-flex;
    align-items:center;
    gap:6px;
}

.chart-legend i {
    display:inline-block;
    width:7px;
    height:7px;
    border-radius:2px;
}

.buy-dot {
    background:var(--color-chart-buy);
}

.sell-dot {
    background:var(--color-chart-sell);
}

.chart-display-options,.table-options {
    display:flex;
    align-items:center;
    gap:12px;
    font-size:10px;
    color:var(--color-text-secondary);
}

.chart-display-options label,.table-options label {
    display:inline-flex;
    align-items:center;
    gap:6px;
    white-space:nowrap;
    cursor:pointer;
    min-height:28px;
}

input[type="checkbox"] {
    accent-color:var(--color-primary);
    width:13px;
    height:13px;
    cursor:pointer;
}

#depth-wrapper {
    position:relative;
    width:100%;
    min-width:0;
    margin-top:8px;
}

#depth-chart {
    display:block;
    width:100%;
    height:320px;
    overflow:visible;
    color:var(--color-text-muted);
}

#depth-chart text {
    font-family:var(--font-mono);
    fill:var(--color-text-muted);
    font-size:10px;
}

#depth-chart .domain {
    opacity:.35;
}

.chart-footnote {
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:6px;
    margin-top:8px;
    padding:13px 0;
    border-top:1px solid var(--color-border);
    color:var(--color-text-muted);
    font-size:9px;
}

.chart-footnote #plan-range {
    font-family:var(--font-mono);
}

.table-heading {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    padding:19px 24px 15px;
}

.export-button {
    min-height:33px;
    font-size:10px;
    padding:5px 9px;
}

.export-button svg {
    width:13px;
    height:13px;
}

.table-controls {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    border-bottom:1px solid var(--color-border);
    padding:0 24px;
}

.table-tab-strip {
    display:flex;
    gap:20px;
    flex-shrink:0;
}

.table-tab-btn {
    font-size:11px!important;
    padding:12px 0!important;
    border-bottom-width:2px;
    font-weight:650;
    white-space:nowrap;
}

.table-options {
    gap:10px;
    padding:0;
}

.table-options .compact-input {
    width:35px;
    min-height:25px;
    padding:3px;
    font-size:10px;
}

.table-scroll {
    overflow-x:auto;
    max-height:440px;
}

table {
    width:100%;
    border-collapse:collapse;
    white-space:nowrap;
    font-variant-numeric:tabular-nums;
}

th {
    background:var(--color-card-alt);
    color:var(--color-text-muted);
    font-size:9px;
    font-weight:500;
    letter-spacing:.2px;
    text-align:right;
    padding:11px 17px;
    position:sticky;
    top:0;
    z-index:1;
}

th:first-child {
    text-align:left;
    padding-left:24px;
}

td {
    font-size:11px;
    padding:8px 17px!important;
    border-top:1px solid var(--color-border);
    text-align:right;
    font-family:var(--font-mono);
    font-weight:400;
    color:var(--color-text-secondary);
}

td:first-child {
    text-align:left;
    padding-left:24px!important;
    color:var(--color-text-muted);
    font-size:10px;
}

tbody tr:hover {
    background:var(--color-card-alt);
}

tbody tr:last-child:has(td:only-child:empty) {
    display:none;
}

.copy-value {
    display:block;
    width:100%;
    min-height:28px;
    padding:3px 5px;
    border:0;
    border-radius:3px;
    font:inherit;
    text-align:right;
    color:var(--color-text);
}

.copy-value:hover,.copy-cell-selected {
    background:var(--color-card-muted);
    color:var(--color-primary);
}

.copy-cell-copied {
    color:var(--color-primary);
}

.table-help {
    padding:12px 24px;
    font-size:9px;
    color:var(--color-text-muted);
    border-top:1px solid var(--color-border);
}

.outputs-empty-state {
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:25px;
}

.outputs-empty-title,.outputs-table-empty-title {
    color:var(--color-invalid);
    font-weight:650;
    font-family:var(--font-body);
    font-size:13px;
}

.outputs-empty-subtitle,.outputs-table-empty-note {
    color:var(--color-text-muted);
    font-size:11px;
    font-family:var(--font-body);
    white-space:normal;
    margin-top:7px;
}

.outputs-table-empty {
    padding:22px 8px;
    text-align:center;
}

[aria-invalid="true"] {
    border-color:var(--color-invalid)!important;
}

.sell-mode-active .buy-only-content,.buy-only-mode-active .sell-only-content {
    display:none!important;
}

.text-red-500,.text-red-400 {
    color:var(--color-invalid);
}

.text-green-600,.text-green-400 {
    color:var(--color-primary);
}

.workspace-footer {
    display:flex;
    justify-content:space-between;
    gap:20px;
    color:var(--color-text-muted);
    font-size:10px;
    padding:26px 0 35px;
}

.workspace-footer>span:first-child {
    font-weight:700;
}

.tooltip {
    position:absolute;
    z-index:100;
    pointer-events:none;
    background:var(--color-card);
    border:1px solid var(--color-border-strong);
    border-radius:6px;
    padding:12px;
    box-shadow:0 8px 24px #0002;
    color:var(--color-text);
    font-size:11px;
    max-width:260px;
    opacity:0;
}

.toast {
    position:fixed;
    bottom:24px;
    left:50%;
    transform:translateX(-50%);
    max-width:calc(100vw - 32px);
    padding:11px 20px;
    border-radius:7px;
    background:var(--color-text);
    color:var(--color-card);
    font-size:12px;
    z-index:20000;
    visibility:hidden;
}

.toast.show {
    visibility:visible;
}