:root { --cobalt: #1a3a5a; --paper: #ffffff; --revenue-blue: #005a87; --warn: #ffc107; --danger: #dc3545; --gold: #d4af37;} 
        body { background: #d1d8e0; font-family: 'Segoe UI', system-ui; margin: 0; display: flex; height: 100vh; overflow: hidden; }
.logo { 
    font-weight: 800; 
    font-size: 1.3rem; 
    letter-spacing: -0.5px; 
    margin-bottom: 2rem;
    border-bottom: 1px solid #334155;
    padding-bottom: 1rem;
}        
        /* HUD & Sidebar */
        #sidebar { width: 300px; background: var(--cobalt); color: white; padding: 25px; display: flex; flex-direction: column; box-shadow: 2px 0 10px rgba(0,0,0,0.3); z-index: 10; }
        .metric { background: rgba(255,255,255,0.1); padding: 10px; border-radius: 6px; margin-bottom: 20px; border-left: 4px solid #28a745; }
        
        #workspace { flex-grow: 1; display: flex; padding: 20px; gap: 20px; }
        #email-pane { flex: 1; background: white; border-radius: 8px; display: flex; flex-direction: column; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
        #doc-pane { width: 550px; perspective: 1000px; display: flex; flex-direction: column; align-items: center; justify-content: center; }

        /* --- DOCUMENT STYLES --- */
        .doc-canvas { width: 90%; min-height: 600px; padding: 0px 40px; box-shadow: 5px 5px 25px rgba(0,0,0,0.2); position: relative; transition: transform 0.5s; overflow: visible ; }
        
/* 1. Gift Card / Voucher Style */
.type-voucher { 
    background: linear-gradient(135deg, #1a1a1a 0%, #444 100%); 
    color: #d4af37; border-radius: 15px; border: 2px solid #d4af37; 
    height: 300px; display: flex; flex-direction: column; justify-content: center; text-align: center; 
}

/* 2. SAD / Customs Document */
.type-customs { 
    background: #fffbe6; border: 1px solid #888; 
    font-family: 'Courier New', monospace; font-size: 0.75em; 
}
.type-customs .sad-box { border: 1px solid #444; padding: 5px; margin: 2px; }

/* 3. Legal / Property Contract */
.type-legal { 
    background: #f4f1ea; border: 1px solid #c2b280; 
    font-family: 'Times New Roman', serif; line-height: 1.5; color: #2c3e50; 
}

/* 4. Crumpled Till Receipt (Package Rules) */
.type-receipt { 
    background: #fff; width: 280px; 
    font-family: 'Courier New', monospace; transform: rotate(-1deg); 
    box-shadow: 2px 2px 10px rgba(0,0,0,0.1); padding: 20px;
}
        /* 1. Gift Card / Voucher Style */
        .type-voucher { background: linear-gradient(175deg, grey 10%, blue 50%); color: var(--gold); border-radius: 15px; border: 2px solid var(--gold); height: 300px !important; min-height: 300px !important; display: flex; flex-direction: column; justify-content: center; text-align: center; }
        .voucher-chip { width: 50px; height: 40px; background: var(--gold); border-radius: 5px; margin: 0 auto 20px; opacity: 0.8; }

        /* 2. Charity / Government Grant Style */
        .type-grant { background: #fff; border-top: 20px solid #2ecc71; font-family: 'Georgia', serif; color: #2c3e50; }
        .grant-header { font-size: 1.5em; font-weight: bold; color: #27ae60; margin-bottom: 20px; text-transform: uppercase; }
        
        /* 1. Formal Revenue Communication */
        .type-revenue { background: #fdfdfd; border-top: 15px solid var(--revenue-blue); font-family: 'EB Garamond', serif; border-left: 1px solid #ccc; }
        .revenue-logo { font-weight: bold; color: var(--revenue-blue); border-bottom: 2px solid var(--revenue-blue); margin-bottom: 20px; }

        /* 2. Retail Till Receipt */
        .type-receipt { background: #fff; width: 280px; min-height: 400px; font-family: 'Courier New', monospace; font-size: 0.8em; color: #111; border-radius: 2px; padding: 20px; transform: rotate(-1deg); }
        .receipt-dotted { border-top: 1px dotted #444; margin: 10px 0; }

        /* 3. Legal Contract / ToB */
        .type-legal { background: #f4f1ea; border: 1px solid #c2b280; font-family: 'Times New Roman', serif; line-height: 1.5; color: #2c3e50; }

        /* 4. Commercial Invoice */
        .type-invoice { background: #fff; border: 1px solid #eee; font-family: 'Helvetica', sans-serif; }

        /* 5. Section 56 Certificate */
        .type-cert { background: #fff; border: 6px double var(--cobalt); outline: 2px solid var(--cobalt); outline-offset: -10px; text-align: center; }
        /* 6. VRT / Vehicle Registration Document */
        .type-vrt { 
            background: #fff; 
            border-left: 20px solid #2c3e50; 
            border-right: 20px solid #2c3e50;
            font-family: 'Segoe UI', sans-serif;
            color: #333;
        }
        /* 7. Cafe / Hospitality Receipt */
        .type-cafe { 
            background: #fff; border-top: 8px dashed #eee; font-family: 'Courier New', monospace; 
            color: #444; border-bottom: 8px dashed #eee; width: 280px; transform: rotate(0.5deg);
        }

        /* 8. Construction Site / Job Sheet */
        .type-construction { 
            background: #fffbe6; border-left: 10px solid #f39c12; 
            font-family: 'Arial Black', sans-serif; text-transform: uppercase;
        }

        /* 9. Tech/Digital Service Invoice */
        .type-tech { 
            background: #ffffff; border-top: 10px solid #2980b9; 
            font-family: 'Segoe UI', sans-serif; box-shadow: 0 0 10px rgba(41,128,185,0.2);
        }

        .type-vrt h3 { color: #2c3e50; border-bottom: 2px solid #2c3e50; padding-bottom: 10px; }

        /* UI Elements */
        .email-header { background: #f1f3f4; padding: 15px; border-bottom: 1px solid #ddd; }
        .btn-choice { width: 100%; text-align: left; padding: 15px; margin-bottom: 10px; border: 1px solid #ddd; border-radius: 6px; background: white; cursor: pointer; font-size: 0.95em; }
        .btn-choice:hover { background: #eef; border-color: var(--cobalt); }
        #audit-memo { display: none; padding: 20px; border-radius: 6px; margin-top: 10px; font-size: 0.9em; line-height: 1.4; }
/* ADD THIS: VAT3 Summary Modal */
#vat3-modal {
    display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 500px; background: #fff; border: 4px solid var(--revenue-blue);
    padding: 30px; box-shadow: 0 0 100px rgba(0,0,0,0.5); z-index: 1000;
}
.vat3-row { display: flex; justify-content: space-between; border-bottom: 1px dashed #ccc; padding: 10px 0; }
.vat3-header { background: var(--revenue-blue); color: #fff; padding: 10px; text-align: center; margin: -30px -30px 20px -30px; }
#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; }

button {
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.9rem;
    border: 1px solid var(--border);
    /*text-transform: uppercase;*/
}

.btn-blue { background: blue; color: white; border: none; }

#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; }
#paywall-screen {
    /* Layout & Positioning */
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 100000000;

    /* Professional Glassmorphism Effect */
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px); 
    -webkit-backdrop-filter: blur(12px);

    /* Center the "Card" */
    align-items: center;
    justify-content: center;
    
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    color: #333;
}

/* The Blue Rounded Border Box */
.paywall-container {
    border: 2px solid #00bee7;
    border-radius: 15px;
    padding: 60px 40px;
    max-width: 900px;
    width: 90%;
    background: white;
    text-align: center;
}

/* 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;
}