*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body { 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; 
    background: #f5f4ef; 
    color: #1a1a18; 
    padding: 1.5rem; 
    min-height: 100vh; 
}

h1 { font-size: 18px; font-weight: 500; margin-bottom: 4px; }

.subtitle { font-size: 13px; color: #73726c; margin-bottom: 0.5rem; }

.scenario-note { 
    font-size: 12px; color: #73726c; background: #fff; border: 0.5px solid rgba(0,0,0,0.12); 
    border-left: 3px solid #E24B4A; border-radius: 8px; padding: 0.75rem 1rem; 
    margin-bottom: 1.2rem; line-height: 1.6; 
}

.scenario-note strong { font-weight: 500; color: #1a1a18; }

.section-label { 
    font-size: 10px; font-weight: 500; letter-spacing: 0.06em; 
    text-transform: uppercase; color: #b4b2a9; margin-bottom: 8px; 
}

.controls-top { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin-bottom: 10px; }

.controls-alloc { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin-bottom: 6px; }

.ctrl-card { background: #eae9e3; border-radius: 8px; padding: 0.75rem 1rem; }
.ctrl-card.vas-card { border-left: 3px solid #1D9E75; }
.ctrl-card.vgs-card { border-left: 3px solid #378ADD; }
.ctrl-card.vaf-card { border-left: 3px solid #EF9F27; }

.ctrl-label { 
    font-size: 11px; color: #73726c; margin-bottom: 6px; 
    display: flex; justify-content: space-between; align-items: center; 
}

.ctrl-label .ticker { font-weight: 500; color: #1a1a18; }

.ctrl-row { display: flex; align-items: center; gap: 8px; }

.ctrl-val { font-size: 14px; font-weight: 500; color: #1a1a18; min-width: 44px; text-align: right; }

input[type=range] { flex: 1; cursor: pointer; }
input[type=range].vas { accent-color: #1D9E75; }
input[type=range].vgs { accent-color: #378ADD; }
input[type=range].vaf { accent-color: #EF9F27; }

.alloc-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }

.alloc-bar { height: 8px; border-radius: 4px; overflow: hidden; display: flex; flex: 1; }

.alloc-seg { height: 100%; transition: width 0.15s; }

.total-badge { 
    display: inline-flex; align-items: center; font-size: 11px; 
    font-weight: 500; padding: 3px 10px; border-radius: 12px; white-space: nowrap; 
}
.total-badge.ok  { background: #EAF3DE; color: #3B6D11; }
.total-badge.warn { background: #FCEBEB; color: #A32D2D; }

.summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; margin-bottom: 1.2rem; }

.metric { background: #eae9e3; border-radius: 8px; padding: 0.75rem 1rem; }

.metric-label { font-size: 11px; color: #73726c; margin-bottom: 4px; }

.metric-value { font-size: 20px; font-weight: 500; color: #1a1a18; }

.chart-full { background: #fff; border: 0.5px solid rgba(0,0,0,0.12); border-radius: 12px; padding: 1rem; margin-bottom: 1.2rem; }

.chart-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 1.2rem; }

.chart-box { background: #fff; border: 0.5px solid rgba(0,0,0,0.12); border-radius: 12px; padding: 1rem; }

.chart-title { font-size: 12px; font-weight: 500; color: #73726c; margin-bottom: 8px; }

.tbl-wrap { overflow-x: auto; border: 0.5px solid rgba(0,0,0,0.12); border-radius: 12px; margin-bottom: 1.2rem; }

table { width: 100%; border-collapse: collapse; font-size: 12px; }

th { 
    background: #eae9e3; color: #73726c; font-weight: 500; font-size: 10px; 
    padding: 8px 10px; text-align: right; border-bottom: 0.5px solid rgba(0,0,0,0.10); 
    white-space: nowrap; 
}

th:first-child { text-align: left; }

td { padding: 7px 10px; text-align: right; color: #1a1a18; border-bottom: 0.5px solid rgba(0,0,0,0.06); white-space: nowrap; font-size: 11.5px; }

td:first-child { text-align: left; font-weight: 500; }

tr.bear { background: rgba(226,75,74,0.07); }
tr.floor-hit { background: rgba(186,117,23,0.09); }

.legend-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 0.75rem; font-size: 11px; color: #73726c; }
.leg { display: flex; align-items: center; gap: 5px; }
.leg-dot { width: 10px; height: 10px; border-radius: 2px; }

.note { font-size: 10px; color: #b4b2a9; margin-top: 0.75rem; line-height: 1.6; }

@media (max-width: 640px) {
    .controls-top, .controls-alloc, .summary-grid, .chart-row { grid-template-columns: 1fr; }
}