:root {
            --xero-blue: #00b7e2;
            --xero-text: #333;
            --xero-bg: #f9f9f9;
            --border-color: #d8dee2;
            --danger-bg: #fdf2f2;
            --danger-text: #c53030;
            --success-bg: #f0fff4;
            --success-text: #276749;
            --warning-bg: #fffbe0; /* Added for info alerts */
            --warning-text: #ff9600; /* Added for info alerts */
        }
        body { font-family: 'Helvetica Neue', sans-serif; background: var(--xero-bg); margin: 0; color: var(--xero-text); line-height: 1.6; }
        nav { background: white; padding: 10px 100px; border-bottom: 1px solid var(--border-color); display: flex; align-items: center; justify-content: space-between; }
        .logo { font-weight: bold; color: var(--xero-blue); font-size: 24px; margin-right: 20px; } 
        .score-panel { font-weight: bold; color: var(--xero-text); display: flex; align-items: center; gap: 15px; } 
        
        .container { max-width: 1300px; margin: 10px auto; background: white; border-radius: 8px; border: 1px solid var(--border-color); box-shadow: 0 4px 6px rgba(0,0,0,0.05); overflow: hidden; }
        
        /* Updated alert bar styles */
        .alert-bar { padding: 5px 5px; border-bottom: 1px solid var(--border-color); font-weight: bolder; transition: all 0.5s ease-in-out; margin-bottom: 0; display: grid; text-align: center;} 
        .alert-error { background: var(--danger-bg); color: var(--danger-text); border-color: #feb2b2; }
        .alert-success { background: var(--success-bg); color: var(--success-text); border-color: #b2f5ea; }
        .alert-info { background: var(--warning-bg); color: var(--warning-text); border-color: #ffeeba; } /* Changed background/color for info */
        .alert-hidden { display: none; } /* Class to truly hide alerts */

        .bill-header { font-size: 24px; padding: 0px 180px; line-height: 10px; border-bottom: 0px solid var(--border-color); display: grid; grid-template-columns: 1fr 1fr; }
        .doc-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 10px 40px; background: #f4f7f9; }
        .doc-box { background: white; padding: 0px 20px; border: 1px solid #ccd1d5; border-radius: 4px; font-family: sans-serif; font-size: 15px; min-height: 100px; line-height: 1; white-space: pre-wrap; word-wrap: break-word; } 

        .bill-grid {     width: 100%; grid-template-columns: 1fr 1fr;    gap: 20px;    padding: 10px 40px; }
        .bill-grid th { background: #f4f7f9; text-align: center; padding: 10px 20px; font-size: 12px; color: #667; border-bottom: 2px solid var(--border-color); }
        .bill-grid td { text-align: center; padding: 10px 20px; border-bottom: 1px solid var(--border-color); }

        .actions { padding: 10px 40px; display: flex; gap: 15px; justify-content: flex-end; background: #fff; border-top: 1px solid var(--border-color); } 
        button { padding: 12px 24px; border-radius: 4px; font-weight: bold; cursor: pointer; border: 1px solid var(--border-color); transition: 0.2s; font-size: 14px; }
        button:disabled { opacity: 0.5; cursor: not-allowed; }
        .btn-blue { background: var(--xero-blue); color: white; border: none; }
        .btn-blue:hover:not(:disabled) { background: #009ccc; }
        .btn-white { background: white; color: var(--xero-blue); }
        .btn-white:hover:not(:disabled) { background: var(--xero-bg); }
        
        #paywall-screen, #results-screen { display: none; padding: 0px 50px; text-align: center; }
        .cta-btn { background: var(--primary); color: white; padding: 15px 30px; font-size: 18px; text-decoration: none; border-radius: 8px; display: inline-block; margin-top: 20px; }

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

        #results-screen { padding: 60px; text-align: center; display: none; } /* Ensure it's hidden by default */
        #results-screen h1 { font-size: 64px; margin: 10px 0pt; }
        #results-screen button { margin-top: 20px; }
#paywall-screen, #results-screen { display: none; padding: 0px 50px; text-align: center; }
        .cta-btn { background: var(--primary); color: white; padding: 15px 30px; font-size: 18px; text-decoration: none; border-radius: 8px; display: inline-block; margin-top: 20px; }
/* Optimized Paywall for Mobile */
#paywall-screen {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 100000000;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px); 
    -webkit-backdrop-filter: blur(12px);
    align-items: center;
    justify-content: center;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    color: #333;
    /* Added: Ensure the screen itself can scroll if the card is too tall */
    overflow-y: auto; 
    padding: 20px 0; 
}

.paywall-container {
    border: 2px solid #00bee7;
    border-radius: 15px;
    padding: 40px 20px; /* Reduced padding for mobile */
    max-width: 900px;
    width: 90%;
    background: white;
    text-align: center;
    /* Added: Ensure it doesn't get cut off on very small phones */
    margin: auto; 
    box-sizing: border-box;
}
/* Typography matching the image */
.paywall-container h2 {
    color: #00bee7;
    font-size: 28px;
    margin-bottom: 20px;
}

.paywall-container p {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 20px;
}

.paywall-container .highlight {
    color: #00bee7;
    font-weight: bold;
}

/* The Bright Blue Button */
.paywall-btn {
    background-color: #00bee7;
    color: white;
    border: none;
    padding: 12px 30px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 20px;
}

.paywall-btn:hover {
    background-color: #009dbf;
}

/* Footer Link */
.paywall-footer {
    margin-top: 15px;
    font-size: 14px;
}

.paywall-footer a {
    color: blue;
    text-decoration: underline;
}

@media (max-width: 600px) {
    body {
        flex-direction: column;
        overflow-y: auto; /* Allow the whole page to scroll */
        height: auto;
        width: fit-content;
    }

    /* 1. Sidebar as Tab Bar */
    .sidebar {
        width: 100%;
        padding: 0 !important;
        flex-direction: column; 
    }

    .logo {    
    font-size: 1rem;
    margin-bottom: -5rem;
}

    .nav-links-container {
        display: flex;
        width: 100%;
        background: var(--bg-sidebar);
    }

    nav {
    flex: 1;
    margin: 0rem !important;
    border-radius: 0 !important;
    padding: 10px 5px !important;
    font-size: 13.5px !important;
    text-align: left;
    border-right: px solid #334155;
    justify-content: space-between;
    }
        .score-panel { font-weight: bold; color: var(--xero-text); display: flex; margin-bottom: -5rem; gap: 1px; } 
        
        .container { flex-direction: column; max-width: 1300px; margin: 10px auto; background: white; border-radius: 8px; border: 1px solid var(--border-color); box-shadow: 0 4px 6px rgba(0,0,0,0.05); overflow: hidden; }
        
        /* Updated alert bar styles */
        .alert-bar { padding: 5px 5px; border-bottom: 1px solid var(--border-color); font-weight: bolder; transition: all 0.5s ease-in-out; margin-bottom: 0; display: flex; text-align: center;} 
        .alert-error { background: var(--danger-bg); color: var(--danger-text); border-color: #feb2b2; }
        .alert-success { background: var(--success-bg); color: var(--success-text); border-color: #b2f5ea; }
        .alert-info { background: var(--warning-bg); color: var(--warning-text); justify-content: center; border-color: #ffeeba; } /* Changed background/color for info */
        .alert-hidden { display: none; } /* Class to truly hide alerts */

        .bill-header { font-size: 20px; padding: 0px 20px; border-bottom: 0px solid var(--border-color); display: grid; grid-template-columns: 1fr 1fr; }
        .doc-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 10px; background: #f4f7f9; }
        .doc-box { background: white; padding: 10px; border: 1px solid #ccd1d5; border-radius: 4px; font-family: sans-serif; font-size: 15px; min-height: 100px; line-height: 20px; white-space: normal; } 

        .bill-grid { width: 100%; border-collapse: collapse; }
        .bill-grid th { background: #f4f7f9; text-align: center; padding: 10px 20px; font-size: 12px; color: #667; border-bottom: 2px solid var(--border-color); }
        .bill-grid td { text-align: left; padding: 10px 20px; border-bottom: 1px solid var(--border-color); }

        .actions {  padding: 10px 40px; display: flex; gap: 15px; justify-content: flex-end; background: #fff; border-top: 1px solid var(--border-color); } 
        button { padding: 12px 24px; border-radius: 4px; font-weight: bold; cursor: pointer; border: 1px solid var(--border-color); transition: 0.2s; font-size: 14px; }
        button:disabled { opacity: 0.5; cursor: not-allowed; }
        .btn-blue { background: var(--xero-blue); color: white; border: none; }
        .btn-blue:hover:not(:disabled) { background: #009ccc; }
        .btn-white { background: white; color: var(--xero-blue); }
        .btn-white:hover:not(:disabled) { background: var(--xero-bg); }
        
/* Optimized Paywall for Mobile */
#paywall-screen {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 540px;
    z-index: 100000000;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px); 
    -webkit-backdrop-filter: blur(12px);
    align-items: center;
    justify-content: center;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    color: #333;
    /* Added: Ensure the screen itself can scroll if the card is too tall */
    overflow-y: auto; 
    padding: 20px 0; 
}

.paywall-container {
    border: 2px solid #00bee7;
    border-radius: 15px;
    padding: 0px 20px; /* Reduced padding for mobile */
    max-width: 900px;
    width: 90%;
    background: white;
    text-align: center;
    /* Added: Ensure it doesn't get cut off on very small phones */
    margin: auto; 
    box-sizing: border-box;
}
/* Typography matching the image */
.paywall-container h2 {
    color: #00bee7;
    font-size: 26px;
    margin-bottom: 10px;
}

.paywall-container p {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 20px;
}

.paywall-container .highlight {
    color: #00bee7;
    font-weight: bold;
}

/* The Bright Blue Button */
.paywall-btn {
    background-color: #00bee7;
    color: white;
    border: none;
    padding: 12px 30px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 20px;
}

.paywall-btn:hover {
    background-color: #009dbf;
}

/* Footer Link */
.paywall-footer {
    margin-top: 5px;
    font-size: 14px;
}

.paywall-footer a {
    color: blue;
    text-decoration: underline;
}

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

        #results-screen { padding: 60px; text-align: center; display: none; } /* Ensure it's hidden by default */
        #results-screen h1 { font-size: 64px; margin: 10px 0pt; }
        #results-screen button { margin-top: 20px; }
}