:root {
        --accent: #FF9800;
        --accent-deep: #F57C00;
        --accent-cyan: #00BCD4;
        --accent-cyan-deep: #0097A7;
        --card-bg: #2d2142;
        --card-border: rgba(255, 255, 255, 0.12);
        --input-bg: #ffffff;
        --input-focus-ring: rgba(255, 152, 0, 0.5);
        --text: #fff;
        --text-muted: rgba(255, 255, 255, 0.92);
        --text-dim: #d4cee0;
        --radius: 16px;
        --radius-sm: 12px;
        --radius-input: 10px;
        --error: #ff6b6b;
    }

    * { 
        box-sizing: border-box; 
        margin: 0; 
        padding: 0; 
    }
    
    .tax-calculator-wrapper {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
        background: linear-gradient(180deg, #392d69 0%, #4a3a7a 50%, #3d2d6b 100%);
        background-attachment: scroll;
        color: var(--text);
        min-height: 100vh;
        padding: 32px 28px 56px;
        line-height: 1.6;
    }

    .tax-calculator-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0;
    }

    .tax-calculator-hero {
        text-align: center;
        margin-bottom: 36px;
        animation: fadeIn 0.6s ease-out;
    }

    .tax-calculator-badge {
        display: inline-block;
        font-size: 0.8125rem;
        font-weight: 600;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--accent);
        background: rgba(255, 152, 0, 0.2);
        padding: 8px 16px;
        border-radius: 999px;
        margin-bottom: 16px;
        animation: fadeIn 0.5s ease-out 0.1s both;
    }

    .tax-calculator-title {
        font-size: 34px !important;
        font-weight: 700 !important;
        color: #fff !important;
        margin-bottom: 12px;
        letter-spacing: -0.02em;
        animation: fadeIn 0.5s ease-out 0.15s both;
    }

    .tax-calculator-title span {
        color: var(--accent);
        position: relative;
        display: inline-block;
    }

    .tax-calculator-title span::after {
        content: "";
        position: absolute;
        bottom: -3px;
        left: 0;
        width: 100%;
        height: 3px;
        background: var(--accent);
        border-radius: 10px;
    }

    .tax-calculator-subtitle {
        font-size: 17px;
        color: var(--text-dim);
        max-width: 600px;
        margin: 0 auto;
        line-height: 1.5;
        animation: fadeIn 0.5s ease-out 0.2s both;
    }

    .tax-calculator-subtitle a {
        color: var(--accent-cyan);
        text-decoration: none;
        font-weight: 600;
    }

    .tax-calculator-subtitle a:hover { text-decoration: underline; }

    .tax-calculator-card {
        background: var(--card-bg);
        border-radius: var(--radius);
        padding: 36px 32px;
        margin-bottom: 28px;
        border: 1px solid var(--card-border);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
        animation: cardIn 0.4s ease-out both;
    }

    .tax-calculator-card.section-inputs { animation-delay: 0.08s; }

    .tax-calculator-card-title {
        font-size: 1rem !important;
        font-weight: 600 !important;
        color: var(--text-dim) !important;
        margin-bottom: 24px !important;
        letter-spacing: 0.02em !important;
    }

    .tax-calculator-card-inner-with-map {
        display: flex;
        gap: 24px;
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .tax-calculator-card-inner-with-map .tax-calculator-form {
        flex: 1;
        min-width: 280px;
    }

    .tax-calculator-usa-map-wrap {
        text-align: center;
    }

    .tax-calculator-usa-map-wrap-inside {
        flex-shrink: 0;
        max-width: 220px;
        margin-top: 0;
    }

    .tax-calculator-usa-map-wrap-inside .tax-calculator-usa-map-inner {
        max-width: 220px;
        min-height: 140px;
        padding: 8px;
    }

    .tax-calculator-usa-map-wrap-inside .tax-calculator-usa-map-placeholder {
        padding: 24px 12px;
        font-size: 0.75rem;
    }

    .tax-calculator-usa-map-wrap-inside .tax-calculator-usa-map-caption {
        font-size: 0.75rem;
        margin-bottom: 8px;
    }

    .tax-calculator-field {
        margin-bottom: 24px;
    }

    .tax-calculator-field:last-child { margin-bottom: 0; }

    .tax-calculator-label {
        display: block;
        font-size: 0.9375rem;
        font-weight: 500;
        color: var(--text-dim);
        margin-bottom: 10px;
        transition: color 0.2s;
        position: relative;
    }

    .tax-calculator-field:focus-within .tax-calculator-label { color: var(--accent); }

    .tax-calculator-input-wrap {
        position: relative;
    }

    .tax-calculator-input-wrap .tax-calculator-prefix {
        position: absolute;
        left: 18px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 1rem;
        font-weight: 500;
        color: #64748b;
        pointer-events: none;
        transition: color 0.2s;
    }

    .tax-calculator-field:focus-within .tax-calculator-input-wrap .tax-calculator-prefix { color: var(--accent-deep); }

    .tax-calculator-input-wrap.has-prefix input { padding-left: 38px; }

    .tax-calculator-input, .tax-calculator-select {
        width: 100% !important;
        padding: 16px 18px !important;
        font-size: 16px !important;
        font-family: inherit !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
        outline: none !important;
        border-radius: var(--radius-input) !important;
        background: var(--input-bg) !important;
        color: #1a1a2e !important;
        font-weight: 500 !important;
        transition: border-color 0.2s, box-shadow 0.2s !important;
    }

    /* Fix for select dropdown selected option visibility */
    .tax-calculator-select {
        appearance: none !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        cursor: pointer !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: right 14px center !important;
        padding-right: 42px !important;
        line-height: 1.5 !important;
        height: auto !important;
        min-height: 52px !important;
    }

    /* Ensure select option text is visible */
    .tax-calculator-select option {
        color: #1a1a2e !important;
        background-color: #ffffff !important;
        font-weight: 500 !important;
        font-size: 16px !important;
        padding: 12px !important;
        line-height: 1.5 !important;
    }

    .tax-calculator-input::placeholder { color: #64748b; }

    .tax-calculator-input:hover:not(:focus):not(:disabled), 
    .tax-calculator-select:hover:not(:focus) {
        border-color: rgba(0, 0, 0, 0.12);
    }

    .tax-calculator-input:focus, 
    .tax-calculator-select:focus {
        border-color: var(--accent) !important;
        box-shadow: 0 0 0 3px var(--input-focus-ring) !important;
    }

    .tax-calculator-input[type="number"] {
        appearance: textfield;
        -moz-appearance: textfield;
    }

    .tax-calculator-input[type="number"]::-webkit-outer-spin-button,
    .tax-calculator-input[type="number"]::-webkit-inner-spin-button {
        appearance: none;
        -webkit-appearance: none;
        margin: 0;
    }

    .tax-calculator-row { 
        display: grid; 
        grid-template-columns: 1fr 1fr; 
        gap: 24px; 
    }

    .tax-calculator-row.three { grid-template-columns: 1fr 1fr 1fr; }

    .tax-calculator-field-error {
        display: block;
        font-size: 0.8125rem;
        color: var(--error);
        margin-top: 6px;
        min-height: 1.2em;
        transition: opacity 0.2s;
    }

    .tax-calculator-field-error:empty { display: none; }

    .tax-calculator-field.is-invalid .tax-calculator-input-wrap input,
    .tax-calculator-field.is-invalid .tax-calculator-input-wrap select,
    .tax-calculator-input.is-invalid,
    .tax-calculator-select.is-invalid {
        border-color: var(--error) !important;
        box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.25) !important;
    }

    .tax-calculator-advanced-panel {
        margin-top: 12px;
        margin-bottom: 24px;
        border: 1px solid var(--card-border);
        border-radius: var(--radius-sm);
        overflow: hidden;
        background: rgba(255, 255, 255, 0.05);
        transition: border-color 0.2s, box-shadow 0.2s;
    }

    .tax-calculator-advanced-panel.is-open {
        border-color: rgba(255, 152, 0, 0.4);
        box-shadow: 0 0 0 1px rgba(255, 152, 0, 0.2);
    }

    .tax-calculator-advanced-trigger {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 16px 18px !important;
        font-size: 0.9375rem !important;
        font-weight: 600 !important;
        color: var(--text-dim) !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
        font-family: inherit !important;
        transition: color 0.2s, background 0.2s !important;
    }

    .tax-calculator-advanced-trigger:hover { 
        background: rgba(255, 152, 0, 0.1); 
        color: var(--accent); 
    }

    .tax-calculator-advanced-trigger .tax-calculator-icon {
        width: 22px;
        height: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-dim);
        transition: transform 0.35s ease, color 0.2s;
    }

    .tax-calculator-advanced-panel.is-open .tax-calculator-advanced-trigger .tax-calculator-icon {
        transform: rotate(180deg);
        color: var(--accent);
    }

    .tax-calculator-advanced-content {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease-out;
    }

    .tax-calculator-advanced-panel.is-open .tax-calculator-advanced-content { max-height: 340px; }

    .tax-calculator-advanced-inner {
        padding: 18px 16px;
        border-top: 1px solid var(--card-border);
        background: rgba(0, 0, 0, 0.12);
    }

    .tax-calculator-advanced-inner .tax-calculator-input { 
        background: var(--input-bg); 
        color: #1a1a2e; 
    }

    .tax-calculator-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        width: 100% !important;
        padding: 18px 28px !important;
        font-size: 17px !important;
        font-weight: 600 !important;
        font-family: inherit !important;
        color: #fff !important;
        background: linear-gradient(135deg, var(--accent), var(--accent-deep)) !important;
        border: none !important;
        border-radius: var(--radius-input) !important;
        cursor: pointer !important;
        transition: all 0.3s !important;
        box-shadow: 0 5px 15px rgba(255, 152, 0, 0.3) !important;
    }

    .tax-calculator-btn:hover:not(:disabled) {
        background: linear-gradient(135deg, #FB8C00, #EF6C00);
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(255, 152, 0, 0.4);
    }

    .tax-calculator-btn:active:not(:disabled) { transform: translateY(0); }

    .tax-calculator-btn:disabled { 
        opacity: 0.6; 
        cursor: not-allowed; 
        transform: none; 
    }

    .tax-calculator-location-preview {
        font-size: 0.8125rem;
        color: rgba(255, 255, 255, 0.75);
        margin-top: 8px;
        min-height: 1.2em;
    }

    .tax-calculator-usa-map-caption {
        font-size: 0.8125rem;
        color: var(--text-dim);
        margin-bottom: 12px;
    }

    .tax-calculator-usa-map-inner {
        display: inline-block;
        max-width: 320px;
        min-height: 200px;
        background: rgba(255, 255, 255, 0.08);
        border-radius: var(--radius-sm);
        padding: 12px;
        border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .tax-calculator-usa-map-placeholder {
        color: var(--text-dim);
        font-size: 0.875rem;
        padding: 48px 24px;
        text-align: center;
    }

    .tax-calculator-usa-map-svg-wrap {
        width: 100%;
    }

    .tax-calculator-usa-map-svg-wrap svg {
        width: 100%;
        height: auto;
        display: block;
    }

    .tax-calculator-usa-map {
        width: 100%;
        height: auto;
        display: block;
        color: rgba(255, 255, 255, 0.5);
    }

    .tax-calculator-usa-map path {
        fill: currentColor;
        transition: fill 0.25s ease, color 0.25s ease;
        stroke: rgba(255, 255, 255, 0.95);
        stroke-width: 1.2;
    }

    .tax-calculator-usa-map path.highlighted {
        color: var(--accent);
        fill: var(--accent);
        stroke: var(--accent-deep);
        stroke-width: 1.4;
    }

    .tax-calculator-result {
        margin-top: 36px;
    }

    .tax-calculator-result .tax-calculator-card { animation: resultIn 0.5s ease-out both; }

    .tax-calculator-result-placeholder {
        background: var(--card-bg);
        border-radius: var(--radius);
        padding: 40px 36px;
        margin-bottom: 28px;
        border: 1px solid var(--card-border);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    }

    .tax-calculator-result-placeholder-header {
        display: flex;
        align-items: center;
        gap: 28px;
        margin-bottom: 32px;
        flex-wrap: wrap;
    }

    .tax-calculator-result-placeholder-icon {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--accent-cyan), var(--accent));
        border: 4px solid rgba(255, 255, 255, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        color: rgba(255, 255, 255, 0.9);
    }

    .tax-calculator-result-placeholder-icon svg {
        width: 56px;
        height: 56px;
    }

    .tax-calculator-result-placeholder-info {
        flex: 1;
        min-width: 200px;
    }

    .tax-calculator-result-placeholder-info h3 {
        font-size: 22px !important;
        font-weight: 700 !important;
        color: var(--accent) !important;
        margin: 0 0 6px !important;
    }

    .tax-calculator-result-placeholder-info p {
        font-size: 16px !important;
        color: var(--text-dim) !important;
        margin: 0 !important;
    }

    .tax-calculator-result-placeholder-stats {
        display: flex;
        gap: 40px;
        margin: 24px 0 28px;
        padding: 24px 0;
        border-top: 1px solid var(--card-border);
        border-bottom: 1px solid var(--card-border);
    }

    .tax-calculator-result-placeholder-stat {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 1;
    }

    .tax-calculator-result-placeholder-stat-value {
        font-size: 22px;
        font-weight: 700;
        color: var(--accent-cyan);
    }

    .tax-calculator-result-placeholder-stat-label {
        font-size: 14px;
        color: var(--text-dim);
        margin-top: 4px;
    }

    .tax-calculator-result-placeholder-tabs {
        display: flex;
        justify-content: center;
        gap: 12px;
        flex-wrap: wrap;
    }

    .tax-calculator-result-placeholder-tabs button {
        background: rgba(255, 255, 255, 0.08);
        color: var(--text-dim);
        border: none;
        font-weight: 600;
        font-size: 15px;
        padding: 14px 26px;
        cursor: default;
        border-radius: 50px;
        transition: all 0.2s;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .tax-calculator-result-placeholder-tabs button.active {
        background: var(--accent);
        color: #fff;
    }

    .tax-calculator-result-placeholder-empty {
        text-align: center;
        color: var(--text-dim);
        font-size: 16px;
        padding: 32px 24px;
    }

    .tax-calculator-result-placeholder.loading .tax-calculator-result-placeholder-stats,
    .tax-calculator-result-placeholder.loading .tax-calculator-result-placeholder-tabs { opacity: 0.5; }

    .tax-calculator-result-placeholder.loading .tax-calculator-result-placeholder-empty { color: rgba(255,255,255,0.9); }

    .tax-calculator-error {
        background: rgba(255, 107, 107, 0.2);
        color: var(--error);
        padding: 18px;
        border-radius: var(--radius-sm);
        margin-bottom: 16px;
        border: 1px solid rgba(255, 107, 107, 0.4);
    }

    .tax-calculator-result-card-title {
        font-size: 1.125rem !important;
        font-weight: 700 !important;
        color: var(--accent) !important;
        margin-bottom: 20px !important;
        padding-bottom: 12px !important;
        border-bottom: 1px solid var(--card-border) !important;
    }

    .tax-calculator-result-key-stats {
        display: flex;
        gap: 32px;
        margin-bottom: 24px;
        padding: 20px 0;
        border-bottom: 1px solid var(--card-border);
        flex-wrap: wrap;
    }

    .tax-calculator-result-key-stat {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .tax-calculator-result-key-stat-label {
        font-size: 0.8125rem;
        color: var(--text-dim);
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .tax-calculator-result-key-stat-value {
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--text);
    }

    .tax-calculator-result-key-stat-value.accent { color: var(--accent-cyan); }

    .tax-calculator-result-section-label {
        font-size: 0.8125rem;
        font-weight: 600;
        color: var(--text-dim);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin-bottom: 12px;
    }

    .tax-calculator-location-block {
        background: rgba(255, 152, 0, 0.1);
        padding: 16px 20px;
        border-radius: var(--radius-sm);
        margin-bottom: 24px;
        font-size: 0.9375rem;
        border: 1px solid rgba(255, 152, 0, 0.25);
    }

    .tax-calculator-location-block strong { color: var(--text); }

    /* Table styles with !important for proper visibility */
    .tax-calculator-breakdown {
        width: 100% !important;
        border-collapse: collapse !important;
        font-size: 0.9375rem !important;
        background: transparent !important;
    }

    .tax-calculator-breakdown th,
    .tax-calculator-breakdown td {
        padding: 14px 16px !important;
        text-align: left !important;
        border-bottom: 1px solid var(--card-border) !important;
        background: transparent !important;
    }

    .tax-calculator-breakdown th {
        color: rgba(255, 255, 255, 0.65) !important;
        font-weight: 600 !important;
        font-size: 0.75rem !important;
        text-transform: uppercase !important;
        letter-spacing: 0.04em !important;
    }

    .tax-calculator-breakdown td {
        color: var(--text-dim) !important;
        font-weight: 400 !important;
    }

    .tax-calculator-breakdown .amount { 
        text-align: right !important; 
        font-variant-numeric: tabular-nums !important; 
        color: var(--text-dim) !important; 
    }

    .tax-calculator-breakdown tr {
        background: transparent !important;
    }

    .tax-calculator-breakdown tr:last-child td { 
        border-bottom: none !important; 
    }

    .tax-calculator-breakdown tbody tr:hover { 
        background: rgba(255, 255, 255, 0.03) !important; 
    }

    .tax-calculator-tax-type { 
        font-weight: 600 !important; 
        color: var(--text) !important; 
    }

    .tax-calculator-summary {
        background: rgba(0, 0, 0, 0.18);
        padding: 24px;
        border-radius: var(--radius-sm);
        margin-top: 24px;
        border: 1px solid var(--card-border);
    }

    .tax-calculator-summary p { 
        margin-bottom: 14px; 
        font-size: 0.9375rem; 
        color: var(--text-dim); 
    }

    .tax-calculator-summary p:last-child { margin-bottom: 0; }

    .tax-calculator-summary .highlight { 
        color: var(--text); 
        font-weight: 600; 
    }

    .tax-calculator-result-footnote {
        margin-top: 20px;
        padding-top: 16px;
        border-top: 1px solid var(--card-border);
        font-size: 0.875rem;
        color: rgba(255, 255, 255, 0.65);
    }

    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    @keyframes cardIn {
        from { opacity: 0; transform: translateY(16px); }
        to { opacity: 1; transform: translateY(0); }
    }

    @keyframes resultIn {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* Responsive breakpoints */
 /* --- ENHANCED RESPONSIVE SYSTEM --- */

/* 1. Large Tablets / Small Desktops (Up to 992px) */
@media (max-width: 992px) {
    .tax-calculator-container {
        max-width: 95%;
    }
    .tax-calculator-card {
        padding: 24px;
    }
}

/* 2. Standard Tablets (Up to 768px) */
@media (max-width: 768px) {
    .tax-calculator-wrapper {
        padding: 20px 12px 40px;
    }

    .tax-calculator-title {
        font-size: 26px !important;
    }

    /* Stack the Map and Form vertically */
    .tax-calculator-card-inner-with-map {
        flex-direction: column-reverse;
        align-items: center;
    }

    .tax-calculator-card-inner-with-map .tax-calculator-form {
        width: 100%;
    }

    .tax-calculator-usa-map-wrap-inside {
        max-width: 100%;
        margin-bottom: 24px;
    }

    /* Force input rows to single column */
    .tax-calculator-row, 
    .tax-calculator-row.three {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }

    /* TABLE RESPONSIVENESS: Horizontal Scroll */
    .tax-calculator-breakdown {
        display: block;
        width: 100% !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap; /* Prevents text wrapping in tight cells */
    }

    /* Result Stats Stacking */
    .tax-calculator-result-key-stats {
        flex-direction: column;
        gap: 16px;
    }

    .tax-calculator-result-key-stat {
        padding: 12px;
        background: rgba(255, 255, 255, 0.03);
        border-radius: 8px;
        border-left: 3px solid var(--accent-cyan);
    }
}

/* 3. Large Mobile Devices (Up to 600px) */
@media (max-width: 600px) {
    .tax-calculator-hero {
        margin-bottom: 24px;
    }

    .tax-calculator-title {
        font-size: 22px !important;
    }

    .tax-calculator-card {
        padding: 18px 15px;
    }

    /* Placeholder Stats Layout */
    .tax-calculator-result-placeholder-stats {
        flex-direction: column;
        gap: 10px;
    }

    /* Adjust Buttons for touch */
    .tax-calculator-btn {
        padding: 16px !important;
        font-size: 16px !important;
    }

    /* Fix Table Font for Small Screens */
    .tax-calculator-breakdown th, 
    .tax-calculator-breakdown td {
        padding: 12px 10px !important;
        font-size: 13px !important;
    }
}

/* 4. Small Mobile Devices (Up to 400px & 375px) */
@media (max-width: 400px) {
    :root {
        --radius: 12px;
    }

    .tax-calculator-badge {
        font-size: 0.7rem;
        padding: 6px 12px;
    }

    .tax-calculator-title {
        font-size: 20px !important;
    }

    .tax-calculator-subtitle {
        font-size: 14px;
    }

    /* Scale down the map to fit tiny screens */
    .tax-calculator-usa-map-inner {
        transform: scale(0.85);
        margin: -15px 0;
    }

    /* Make the breakdown table even more compact */
    .tax-calculator-tax-type {
        max-width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .tax-calculator-summary {
        padding: 16px;
    }

    .tax-calculator-summary p {
        font-size: 14px;
    }
}

/* Print/A11y: Ensure table doesn't disappear if user tries to print */
@media print {
    .tax-calculator-breakdown {
        display: table;
        overflow: visible;
    }
}