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

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            padding: 15px;
            min-height: 100vh;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
            background: white;
            border-radius: 8px;
            box-shadow: 0 10px 40px rgb(0 0 0 / 20%);
            overflow: hidden;
        }

        .header {
            background: linear-gradient(135deg, #5e72e4 0%, #825ee4 100%);
            color: white;
            padding: 20px;
            text-align: center;
        }

        .header h1 {
            font-size: 1.5em;
            margin-bottom: 5px;
        }

        .header p {
            opacity: 0.9;
            font-size: 0.9em;
        }

        .instructions {
            background: #f8f9fe;
            padding: 12px 15px;
            border-left: 4px solid #5e72e4;
            margin: 10px 15px;
            border-radius: 6px;
        }

        .instructions h3 {
            color: #5e72e4;
            margin-bottom: 6px;
            font-size: 0.95em;
        }

        .instructions ul {
            margin-left: 20px;
            line-height: 1.5;
            font-size: 0.85em;
        }

        .content {
            padding: 15px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
        }

        @media (width <= 1024px) {
            .content {
                grid-template-columns: 1fr;
            }
        }

        .plan-card {
            border: 2px solid #e0e6ed;
            border-radius: 8px;
            overflow: hidden;
            transition: transform 0.2s, box-shadow 0.2s;
        }

        .plan-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgb(0 0 0 / 10%);
        }

        .plan-header {
            padding: 12px 15px;
            font-weight: bold;
            font-size: 1.1em;
            text-align: center;
            color: white;
        }

        .ldhp-header {
            background: linear-gradient(135deg, #a29bfe 0%, #6c5ce7 100%);
        }

        .hdhp-header {
            background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
        }

        .plan-section {
            padding: 10px 12px;
        }

        .section-title {
            background: #e8eaf6;
            padding: 6px 10px;
            font-weight: 600;
            color: #5e72e4;
            border-left: 4px solid #5e72e4;
            margin-bottom: 8px;
            font-size: 0.9em;
        }

        .field-group {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 12px;
            align-items: center;
            padding: 4px 0;
        }

        .field-group:last-child {
            border-bottom: none;
        }

        .field-label {
            font-weight: 500;
            color: #2d3748;
            font-size: 0.9em;
        }

        .field-value {
            text-align: right;
        }

        input[type="number"],
        input[type="text"] {
            width: 120px;
            padding: 6px 10px;
            border: 2px solid #e0e6ed;
            border-radius: 4px;
            font-size: 0.9em;
            transition: border-color 0.2s;
        }

        input[type="number"]:focus,
        input[type="text"]:focus {
            outline: none;
            border-color: #5e72e4;
        }

        .calculated {
            background: #f7fafc;
            padding: 6px 10px;
            border-radius: 4px;
            font-weight: 600;
            color: #2d3748;
            min-width: 120px;
            text-align: right;
            border: 2px solid #e0e6ed;
            font-size: 0.9em;
        }

        .total-row {
            background: #f0f4ff;
            margin-top: 6px;
            padding: 8px;
            border-radius: 4px;
            font-weight: bold;
        }

        .comparison {
            grid-column: 1 / -1;
            background: #f8f9fe;
            padding: 15px;
            border-radius: 8px;
            margin-top: 10px;
        }

        .comparison h2 {
            color: #5e72e4;
            margin-bottom: 15px;
            text-align: center;
            font-size: 1.2em;
        }

        .comparison-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 12px;
        }

        .comparison-item {
            background: white;
            padding: 12px;
            border-radius: 6px;
            text-align: center;
            box-shadow: 0 2px 8px rgb(0 0 0 / 5%);
        }

        .comparison-label {
            font-size: 0.8em;
            color: #718096;
            margin-bottom: 6px;
        }

        .comparison-value {
            font-size: 1.2em;
            font-weight: bold;
            color: #2d3748;
        }

        .monthly-value {
            font-size: 0.8em;
            color: #718096;
            margin-top: 4px;
        }

        .tax-inputs {
            grid-column: 1 / -1;
            background: #fff5f5;
            padding: 12px 15px;
            border-radius: 8px;
            margin-bottom: 10px;
        }

        .tax-inputs h3 {
            color: #c53030;
            margin-bottom: 10px;
            font-size: 1em;
        }

        .tax-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 10px;
        }

        .help-text {
            font-size: 0.75em;
            color: #718096;
            margin-top: 3px;
            font-style: italic;
        }

        .disclaimer {
            background: #fff3cd;
            border-left: 4px solid #ffc107;
            padding: 12px 15px;
            margin: 10px 15px;
            border-radius: 6px;
            font-size: 0.85em;
        }

        .disclaimer strong {
            color: #856404;
        }

        .expense-modeling {
            grid-column: 1 / -1;
            background: #f0fdf4;
            padding: 15px;
            border-radius: 8px;
            margin-top: 10px;
        }

        .expense-modeling h2 {
            color: #15803d;
            margin-bottom: 12px;
            font-size: 1.2em;
        }

        .expense-section {
            background: white;
            padding: 12px;
            border-radius: 6px;
            margin-bottom: 12px;
        }

        .expense-section h3 {
            color: #15803d;
            margin-bottom: 10px;
            font-size: 1em;
        }

        .checkbox-item {
            display: flex;
            align-items: center;
            padding: 6px 8px;
            transition: background 0.2s;
            gap: 10px;
        }

        .checkbox-item:hover {
            background: #f9fafb;
        }

        .checkbox-item:last-child {
            border-bottom: none;
        }

        .checkbox-item input[type="checkbox"] {
            width: 18px;
            height: 18px;
            margin-right: 8px;
            cursor: pointer;
            flex-shrink: 0;
        }

        .checkbox-label {
            flex: 1;
            cursor: pointer;
            font-weight: 500;
            color: #2d3748;
            font-size: 0.9em;
        }

        .checkbox-costs {
            display: flex;
            gap: 12px;
            align-items: center;
            flex-shrink: 0;
        }

        .cost-group {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
        }

        .cost-label {
            font-size: 0.7em;
            color: #718096;
            margin-bottom: 2px;
        }

        .checkbox-cost {
            color: #dc2626;
            font-weight: 600;
            font-size: 0.85em;
        }

        .copay-input-wrapper {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
        }

        .copay-input {
            width: 70px;
            padding: 4px 6px;
            border: 2px solid #e0e6ed;
            border-radius: 4px;
            font-size: 0.85em;
            text-align: right;
        }

        .copay-input:focus {
            outline: none;
            border-color: #5e72e4;
        }

        .expand-button {
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 0.85em;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 6px;
            margin: 12px auto;
            transition: transform 0.2s, box-shadow 0.2s;
        }

        .expand-button:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgb(16 185 129 / 30%);
        }

        .expand-button .arrow {
            transition: transform 0.3s;
        }

        .expand-button.expanded .arrow {
            transform: rotate(180deg);
        }

        .additional-expenses {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out;
        }

        .additional-expenses.show {
            max-height: 2000px;
        }

        .custom-expense {
            background: #fef3c7;
            padding: 12px;
            border-radius: 6px;
            margin-top: 12px;
        }

        .custom-expense h3 {
            color: #92400e;
            margin-bottom: 10px;
            font-size: 0.95em;
        }

        .custom-input-group {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 12px;
            align-items: center;
        }

        .expense-summary {
            background: white;
            padding: 12px;
            border-radius: 6px;
            margin-top: 12px;
            border: 2px solid #10b981;
        }

        .expense-summary h3 {
            color: #15803d;
            margin-bottom: 10px;
            font-size: 1em;
        }

        .expense-total {
            font-size: 1.2em;
            font-weight: bold;
            color: #15803d;
            text-align: center;
            padding: 10px;
            background: #f0fdf4;
            border-radius: 6px;
        }

        .scenario-analysis {
            grid-column: 1 / -1;
            margin-top: 10px;
        }

        .perspective-tabs {
            display: flex;
            gap: 8px;
            margin-bottom: 12px;
            border-bottom: 2px solid #e0e6ed;
            position: sticky;
            top: 0;
            background: white;
            z-index: 10;
            padding: 8px 0;
        }

        .tab-button {
            background: none;
            border: none;
            padding: 10px 20px;
            font-size: 0.95em;
            font-weight: 600;
            color: #718096;
            cursor: pointer;
            border-bottom: 3px solid transparent;
            transition: all 0.2s;
        }

        .tab-button:hover {
            color: #5e72e4;
        }

        .tab-button.active {
            color: #5e72e4;
            border-bottom-color: #5e72e4;
        }

        .tab-content {
            display: none;
        }

        .tab-content.active {
            display: block;
        }

        .perspective-section {
            background: white;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
        }

        .perspective-header {
            text-align: center;
            margin-bottom: 15px;
        }

        .perspective-header h2 {
            color: #2d3748;
            margin-bottom: 8px;
            font-size: 1.3em;
        }

        .perspective-header p {
            color: #718096;
            font-size: 0.95em;
            line-height: 1.5;
        }

        .scenario-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            margin-bottom: 15px;
        }

        @media (width <= 1024px) {
            .scenario-grid {
                grid-template-columns: 1fr;
            }
        }

        .scenario-card {
            background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
            border-radius: 8px;
            padding: 15px;
            border: 2px solid #e0e6ed;
        }

        .scenario-card.winner {
            border-color: #10b981;
            background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
        }

        .scenario-card-header {
            font-size: 1.1em;
            font-weight: bold;
            margin-bottom: 12px;
            color: #2d3748;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .winner-badge {
            background: #10b981;
            color: white;
            padding: 4px 10px;
            border-radius: 15px;
            font-size: 0.7em;
            font-weight: 600;
        }

        .scenario-breakdown {
            background: white;
            border-radius: 6px;
            padding: 12px;
            margin-bottom: 10px;
        }

        .breakdown-item {
            display: flex;
            justify-content: space-between;
            padding: 4px 0;
            font-size: 0.9em;
        }

        .breakdown-item:last-child {
            border-bottom: none;
            margin-top: 8px;
            padding-top: 8px;
            border-top: 2px solid #2d3748;
            font-weight: bold;
            font-size: 0.95em;
        }

        .breakdown-label {
            color: #4a5568;
            font-size: 0.9em;
        }

        .breakdown-value {
            font-weight: 600;
            color: #2d3748;
        }

        .breakdown-value.negative {
            color: #dc2626;
        }

        .breakdown-value.positive {
            color: #10b981;
        }

        .scenario-notes {
            background: #fef3c7;
            padding: 10px;
            border-radius: 6px;
            margin-top: 10px;
            font-size: 0.85em;
            line-height: 1.5;
        }

        .winner-summary {
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            color: white;
            padding: 15px;
            border-radius: 8px;
            text-align: center;
            font-size: 1em;
            margin-top: 12px;
        }

        .winner-summary strong {
            font-size: 1.2em;
            display: block;
            margin: 8px 0;
        }

        .expense-impact {
            background: #f8f9fe;
            padding: 15px;
            border-radius: 8px;
            margin-top: 15px;
        }

        .expense-impact h3 {
            color: #5e72e4;
            margin-bottom: 12px;
            text-align: center;
            font-size: 1.1em;
        }

        .impact-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }

        @media (width <= 768px) {
            .impact-grid {
                grid-template-columns: 1fr;
            }
        }

        .impact-card {
            background: white;
            padding: 12px;
            border-radius: 6px;
            box-shadow: 0 2px 8px rgb(0 0 0 / 5%);
        }

        .impact-card h4 {
            color: #2d3748;
            margin-bottom: 10px;
            font-size: 1em;
        }