/* base.css — Root variables, body, container, card, inputs, grid, buttons, general layout, page tabs */

        :root {
            --primary: #2563eb;
            --success: #16a34a;
            --danger: #dc2626;
            --warning: #d97706;
            --gray-50: #f9fafb;
            --gray-100: #f3f4f6;
            --gray-200: #e5e7eb;
            --gray-300: #d1d5db;
            --gray-600: #4b5563;
            --gray-800: #1f2937;
        }
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body {
            font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
            background: var(--gray-100);
            color: var(--gray-800);
            font-weight: 500;
            line-height: 1.5;
            padding: 20px;
        }
        .container { max-width: 1400px; margin: 0 auto; }
        h1 { text-align: center; margin-bottom: 8px; font-weight: 800; letter-spacing: -0.02em; }
        h2, h3 { font-weight: 700; letter-spacing: -0.02em; }
        .subtitle { text-align: center; color: var(--gray-600); margin-bottom: 24px; }

        .grid { display: grid; grid-template-columns: 380px 1fr; gap: 24px; }
        @media (max-width: 900px) { .grid { grid-template-columns: 1fr; } }

        .card {
            background: white;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            margin-bottom: 16px;
        }
        .card h2 {
            font-size: 14px;
            color: var(--gray-600);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 16px;
            padding-bottom: 8px;
            border-bottom: 1px solid var(--gray-200);
        }

        .input-group { margin-bottom: 16px; }
        .input-group label {
            display: block;
            font-size: 13px;
            font-weight: 500;
            color: var(--gray-600);
            margin-bottom: 4px;
        }
        .input-group input[type="range"] { width: 100%; margin: 4px 0; }
        .input-group .value { font-size: 18px; font-weight: 600; color: var(--primary); }
        .input-group select, .input-group input[type="text"] {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid var(--gray-300);
            border-radius: 6px;
            font-size: 14px;
        }
        .input-row { display: flex; gap: 12px; }
        .input-row .input-group { flex: 1; }

        .tabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
        .tab {
            padding: 8px 16px;
            border: 2px solid var(--gray-200);
            border-radius: 8px;
            background: white;
            cursor: pointer;
            font-size: 13px;
            font-weight: 500;
        }
        .tab:hover { border-color: var(--primary); }
        .tab.active { background: var(--primary); border-color: var(--primary); color: white; }
        .tab[data-mode="real"].active { background: var(--success); border-color: var(--success); }
        .tab[data-mode="projected"].active { background: var(--warning); border-color: var(--warning); }

        .inputs.locked input:disabled, .inputs.locked select:disabled {
            background: var(--gray-100);
            cursor: not-allowed;
        }

        .results-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
        .metric { padding: 16px; background: var(--gray-50); border-radius: 8px; }
        .metric-label { font-size: 12px; color: var(--gray-600); text-transform: uppercase; }
        .metric-value { font-size: 28px; font-weight: 700; margin: 4px 0; }
        .metric-value.positive { color: var(--success); }
        .metric-value.negative { color: var(--danger); }
        .metric-detail { font-size: 12px; color: var(--gray-600); }

        .breakdown { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--gray-200); }
        .breakdown-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; }
        .breakdown-row.total { font-weight: 600; border-top: 1px solid var(--gray-200); margin-top: 8px; padding-top: 8px; }

        .highlight-box { padding: 16px; border-radius: 8px; margin-bottom: 16px; }
        .highlight-box.success { background: #dcfce7; border: 1px solid #86efac; }
        .highlight-box.danger { background: #fee2e2; border: 1px solid #fca5a5; }
        .highlight-box.warning { background: #fef3c7; border: 1px solid #fcd34d; }

        table { width: 100%; border-collapse: collapse; }
        th, td { padding: 10px; text-align: right; border-bottom: 1px solid var(--gray-200); }
        th:first-child, td:first-child { text-align: left; }
        th { font-size: 12px; font-weight: 600; color: var(--gray-600); }

        .csp-category { margin-bottom: 16px; }
        .csp-header { display: flex; justify-content: space-between; margin-bottom: 4px; }
        .csp-label { font-size: 13px; font-weight: 500; }
        .csp-values { font-size: 12px; color: var(--gray-600); }
        .csp-bar-container { height: 24px; background: var(--gray-100); border-radius: 4px; position: relative; overflow: hidden; }
        .csp-bar { height: 100%; border-radius: 4px; transition: width 0.3s; }
        .csp-bar.under { background: var(--success); }
        .csp-bar.over { background: var(--danger); }
        .csp-bar.warning { background: var(--warning); }
        .csp-target-line { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--gray-800); }
        .csp-pct { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 12px; font-weight: 600; }

        /* Main page tabs */
        .main-tabs { display: flex; gap: 4px; margin-bottom: 20px; background: var(--gray-200); padding: 4px; border-radius: 10px; width: fit-content; }
        .main-tab { padding: 10px 24px; border: none; border-radius: 8px; background: transparent; cursor: pointer; font-size: 14px; font-weight: 500; color: var(--gray-600); }
        .main-tab:hover { color: var(--gray-800); }
        .main-tab.active { background: white; color: var(--gray-800); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
        .page { display: none; }
        .page.active { display: block; }