:root {
            --bg-gray: #0b0f17;
            --text-main: #1e293b;
            --ldhp-blue: #2563eb;
            --hdhp-green: #059669;
            --border: #e2e8f0;
            --tax-gold: #d97706;
            --deduction-red: #dc2626;
        }

        body { 
            font-family: -apple-system, system-ui, sans-serif; 
            background: var(--bg-gray); 
            color: var(--text-main); 
            padding: 20px; 
            line-height: 1.5; 
        }

        .main-container { 
            max-width: 1200px; 
            margin: 0 auto; 
            background: white; 
            padding: 40px; 
            border-radius: 12px; 
            box-shadow: 0 4px 25px rgb(0 0 0 / 5%); 
        }
        
        h2 { 
            margin-top: 0; 
            color: #0f172a; 
            border-bottom: 2px solid #e2e8f0; 
            padding-bottom: 15px; 
            margin-bottom: 30px; 
        }

        h3 { 
            font-size: 0.9rem; 
            margin-bottom: 20px; 
            color: #475569; 
            text-transform: uppercase; 
            border-left: 4px solid #cbd5e1; 
            padding-left: 10px; 
        }

        .input-grid { 
            display: grid; 
            grid-template-columns: repeat(3, 1fr); 
            gap: 40px; 
            margin-bottom: 40px; 
        }

        .input-group { 
            display: flex; 
            justify-content: space-between; 
            align-items: center; 
            margin-bottom: 10px; 
        }

        .input-group label { 
            font-size: 0.82rem; 
            font-weight: 600; 
            color: #64748b; 
        }

        input { 
            width: 85px; 
            padding: 6px; 
            border: 1px solid var(--border); 
            border-radius: 6px; 
            text-align: right; 
            font-size: 0.9rem; 
        }
        
        /* Scenario Table UI */
        .scenario-box { 
            background: #f8fafc; 
            padding: 20px; 
            border-radius: 8px; 
            margin-bottom: 30px; 
            border: 1px solid var(--border); 
        }

        .scenario-header { 
            display: grid; 
            grid-template-columns: 2fr 1fr 1fr; 
            font-size: 0.7rem; 
            font-weight: bold; 
            color: #64748b; 
            padding-bottom: 10px; 
            border-bottom: 1px solid var(--border); 
            margin-bottom: 10px; 
            text-transform: uppercase; 
        }

        .scenario-row { 
            display: grid; 
            grid-template-columns: 2fr 1fr 1fr; 
            align-items: center; 
            padding: 8px 0; 
            border-bottom: 1px solid #f1f5f9; 
            font-size: 0.85rem; 
        }

        .scenario-row input { 
            width: 70px; 
            margin-left: auto; 
        }

        .hidden-scenarios { display: none; }
        
        /* Paycheck Bar */
        .paycheck-bar { 
            display: grid; 
            grid-template-columns: 1fr 1fr; 
            gap: 20px; 
            margin-bottom: 30px; 
        }

        .paycheck-item { 
            text-align: center; 
            padding: 15px; 
            background: #fff1f2; 
            border-radius: 8px; 
            border: 1px solid #fecaca; 
        }

        .paycheck-val { 
            font-size: 1.4rem; 
            font-weight: 800; 
            color: var(--deduction-red); 
        }

        /* Tables */
        .breakdown-table { 
            width: 100%; 
            border-collapse: collapse; 
            margin-top: 20px; 
        }

        .breakdown-table th { 
            text-align: left; 
            padding: 12px; 
            border-bottom: 2px solid var(--border); 
            color: #64748b; 
            font-size: 0.8rem; 
        }

        .breakdown-table td { 
            padding: 12px; 
            border-bottom: 1px solid #f1f5f9; 
            font-size: 0.9rem; 
        }

        .total-row { 
            font-size: 1.25rem; 
            font-weight: 800; 
            background: #f8fafc; 
            border-top: 2px solid #334155 !important; 
        }

        /* Conclusion UI */
        .conclusion-section { 
            border-top: 3px solid #cbd5e1; 
            margin-top: 40px; 
            padding-top: 30px; 
            display: grid; 
            grid-template-columns: 1fr 1fr; 
            gap: 25px; 
        }

        .summary-card { 
            background: #eff6ff; 
            border-left: 5px solid var(--ldhp-blue); 
            padding: 20px; 
            border-radius: 4px; 
        }

        .shield-card { 
            background: #fffbeb; 
            border-left: 5px solid var(--tax-gold); 
            padding: 20px; 
            border-radius: 4px; 
        }
        
        .toggle-btn { 
            background: none; 
            border: none; 
            color: var(--ldhp-blue); 
            cursor: pointer; 
            font-weight: bold; 
            margin-top: 10px; 
            font-size: 0.8rem; 
        }