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

body {
    font-family: 'Inter', sans-serif;
    background: #e9ecef;
    color: #333;
    padding: 20px;
}

.app-container {
    display: flex;
    gap: 30px;
    max-width: 1500px;
    margin: 0 auto;
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2); border-radius: 4px; }

/* Editor Form Panel */
.form-panel {
    flex: 1;
    min-width: 380px;
    background: #fff;
    border-radius: 12px;
    padding: 25px;
    overflow-y: auto;
    max-height: 95vh;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.panel-header { margin-bottom: 20px; border-bottom: 2px solid #eee; padding-bottom: 10px; }
.panel-header h2 { font-size: 22px; color: #222; }
.panel-header p { font-size: 13px; color: #777; margin-top: 5px; }
.form-section { margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px dotted #ccc; }
.form-section h3 { font-size: 14px; text-transform: uppercase; color: #007bff; margin-bottom: 12px; }
.input-group { margin-bottom: 12px; display: flex; flex-direction: column; }
.input-row { display: flex; gap: 10px; }
.input-group.half { flex: 1; }
label { font-size: 12px; font-weight: 600; color: #555; margin-bottom: 5px; }
input, select, textarea {
    background: #f8f9fa;
    border: 1px solid #ced4da;
    color: #333;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 13px;
    outline: none;
    font-family: inherit;
}
textarea { resize: vertical; }
.file-btn { background: #e9ecef; padding: 10px; border-radius: 6px; border: 1px dashed #adb5bd; text-align: center; cursor: pointer; color: #495057; font-weight: 600;}
.primary-btn { width: 100%; background: #28a745; color: white; border: none; padding: 15px; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; margin-top: 10px; }

/* Document Preview Panel */
.preview-panel {
    flex: 2;
    background: #525659;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 30px;
    overflow-y: auto;
    max-height: 95vh;
}

/* -------------------------------- */
/* A4 EXACT TEMPLATE STYLING BELOW */
/* -------------------------------- */
.a4-page {
    width: 210mm; /* A4 width */
    background: #fff;
    box-shadow: 0 2px 20px rgba(0,0,0,0.3);
    font-family: 'Mukta', 'Noto Sans Devanagari', Arial, sans-serif;
    color: #000;
    position: relative;
    overflow: hidden;
}

.a4-page::before {
    content: 'PREVIEW';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    font-size: 180px;
    font-weight: 950;
    color: rgba(0, 0, 0, 0.05);
    white-space: nowrap;
    pointer-events: none;
    z-index: 1000;
}

.top-half {
    display: flex;
    border-bottom: none;
}

/* TOP LEFT COLUMN */
.top-col {
    flex: 1;
    border-right: 2px dashed #999;
    display: flex;
    flex-direction: column;
}
.right-col { border-right: none; }

.col-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
}

.emblem-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 10px;
    font-weight: 600;
    text-align: center;
    line-height: 1.1;
}
.emblem-box img { height: 45px; margin-bottom: 3px; }

.header-aadhaar-logo { text-align: center; }
.header-aadhaar-logo img { height: 45px; }
.red-h { color: #ed1c24; font-size: 14px; font-weight: 800; font-family: 'Inter', sans-serif; letter-spacing: 1px; }

.orange-bar {
    background: #f15a24;
    color: #fff;
    text-align: center;
    padding: 6px 0;
}
.orange-bar .hin { font-size: 18px; font-weight: 600; }
.orange-bar .eng { font-size: 16px; font-weight: 500; font-family: 'Inter', sans-serif; }

.green-bar {
    background: #39b54a;
    color: #fff;
    text-align: center;
    padding: 4px 0;
    margin-top: 0;
}
.green-bar .hin { font-size: 13px; font-weight: 600; }
.green-bar .eng { font-size: 11px; font-weight: 500; font-family: 'Inter', sans-serif; }

.enrolment-line {
    padding: 8px 20px 5px;
    font-size: 11px;
    font-weight: 600;
    font-family: 'Mukta', sans-serif;
}

.address-block {
    padding: 0;
    font-size: 10.5px;
    line-height: 1.35;
    font-family: 'Inter', sans-serif;
}
.to-text { font-weight: 400; margin-bottom: 3px; font-size: 11px; }
.add-name { font-weight: 600; margin-bottom: 2px; font-style: italic; }
.add-detail { font-weight: 400; color: #222; }
.add-mobile { font-weight: 600; margin-top: 4px; }

/* Address + QR row */
.address-qr-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 5px 20px 10px;
    flex: none;
}

.qr-block {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    margin-top: 4cm;
}
.big-qr-box {
    width: 130px;
    height: 130px;
    border: none;
    position: relative;
}
.big-qr-box img { width:100%; height:100%; }

/* Signature overlay on QR */
.signature-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(255,255,255,0.85);
    padding: 3px 5px;
    font-size: 6.5px;
    font-family: 'Inter', sans-serif;
    color: #333;
    line-height: 1.2;
    border-top: 1px solid #ccc;
}

.bottom-number-block {
    text-align: center;
    padding: 10px 0 5px;
    margin-top: auto;
}
.title-bold { font-size: 13px; font-weight: 600; }
.huge-aadhaar { font-size: 26px; font-weight: 700; letter-spacing: 2px; line-height: 1.1; margin: 2px 0; }
.vid-line { font-size: 12px; font-weight: 600; letter-spacing: 1px; }

.red-slogan {
    text-align: center;
    padding: 8px 0 6px;
    border-top: 2px solid #eb1c24;
}
.red-slogan .text {
    font-size: 18px;
    font-weight: 600;
    color: #eb1c24;
}

/* TOP RIGHT COLUMN */
.info-header {
    border-top: 2px solid #ed1c24;
    border-bottom: 2px solid #ed1c24;
    text-align: center;
    padding: 4px 0;
    margin: 0 15px 10px;
}
.info-title {
    color: #ed1c24;
    font-size: 15px;
    font-weight: 700;
}
.info-bullets {
    padding: 0 15px 15px 10px;
    font-size: 10px;
    line-height: 1.35;
    color: #333;
}
.info-bullets ul { list-style: none; }
.info-bullets li {
    margin-bottom: 5px;
    padding-left: 14px;
    position: relative;
    text-align: justify;
}
.info-bullets li::before {
    content: "■";
    color: #ed1c24;
    position: absolute;
    left: 0;
    top: 1px;
    font-size: 8px;
}
.red-s { color: #ed1c24; font-weight: 600; }


/* CUT LINE */
.cut-line-wrapper {
    text-align: center;
    font-size: 14px;
    color: #666;
    margin: 3px 0;
    overflow: hidden;
    white-space: nowrap;
}

/* BOTTOM HALF CARDS */
.bottom-half {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 2mm 5mm 5mm;
}

.aadhaar-card {
    width: 98mm;
    height: 62mm;
    background-color: #fff;
    background-image: 
        repeating-radial-gradient(circle at 10% 20%, transparent, transparent 10px, rgba(230,240,230,0.4) 10px, rgba(230,240,230,0.4) 11px);
    border: 1px solid #777;
    border-radius: 4px;
    position: relative;
    display: flex;
}

.vertical-date {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 6px;
    font-family: 'Inter', sans-serif;
    padding: 3px 1px;
    background: #fff;
    border-right: 1px solid #ddd;
    color: #000;
    flex-shrink: 0;
    white-space: nowrap;
}

.card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    min-width: 0;
}

/* Watermark */
.card-content::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 60%; height: 60%;
    transform: translate(-50%, -50%);
    background: url('AADHAR LOGO.webp') no-repeat center;
    background-size: contain;
    opacity: 0.06;
    pointer-events: none;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 5px;
    background: #fff;
    flex-shrink: 0;
}
.back-header { background: #f0f0f0; }
.emblem-group img { height: 26px; }
.aadhaar-logo-group { text-align: center; }
.aadhaar-logo-group .aadhaar-img { height: 20px; }
.aadhaar-logo-group .red-h { font-size: 8px; }

.header-text-center {
    text-align: center;
    flex: 1;
    line-height: 1.1;
}
.hin-t { font-size: 10px; font-weight: 600; color: #222; }
.eng-t { font-size: 8px; font-weight: 500; font-family: 'Inter'; color: #222; }

.front-details {
    display: flex;
    gap: 5px;
    padding: 1px 5px 0;
}
.photo-con {
    width: 65px;
    height: 80px;
    border: 1px solid #aaa;
    background: #fff;
    padding: 1px;
    flex-shrink: 0;
}
.photo-con img { width: 100%; height: 100%; object-fit: cover; }
.personal { font-size: 7px; line-height: 1.1; padding-top: 0px; width: 100%; overflow: hidden; }
.name-hi { font-size: 12px; font-weight: 700; margin-bottom: 0px; }
.name-en { font-size: 11px; font-weight: 700; font-family: 'Inter'; margin-bottom: 0px; }
.dob, .gender { font-weight: 600; font-size: 10px; line-height: 1.3; }

.instruction-box {
    margin-top: 0.5cm;
    padding: 1px 2px;
    border: 1px solid #ed1c24;
    font-size: 9.5px;
    line-height: 1.2;
    color: #333;
}

/* Back Details */
.back-details {
    display: flex;
    justify-content: space-between;
    gap: 4px;
    padding: 4px 8px;
    flex: 0 0 auto;
}
.address-col { width: 55%; font-size: 8px; line-height: 1.25; padding-right: 3px; }
.addr-title { font-weight: 700; margin-top: 2px; font-size: 8.5px; }
.addr-hi { margin-bottom: 2px; }
.addr-en { font-family: 'Inter', sans-serif; }

.qr-col-container { width: 45%; display: flex; flex-direction: column; align-items: center; }
.qr-col { background: #fff; padding: 0; }
.small-qr-box img { width: 100%; height: 100%; }

/* Card Numbers Format */
.card-numbers-front {
    text-align: center;
    padding: 0;
    flex-shrink: 0;
}
.card-numbers-front .uid { font-size: 16px; font-weight: 700; letter-spacing: 2px; line-height: 1; color: #000; }

.front-uid-line { margin: 2px 30px; border: 0; border-top: 1px dotted #888; }

.card-footer-strip {
    text-align: center;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.slogan { 
    color: #ed1c24; 
    font-weight: 700; 
    font-size: 9px; 
    padding: 1px 0; 
    border-top: 1px solid #ed1c24;
    border-bottom: 1px solid #ed1c24;
}

.footer-contacts {
    width: 100%;
    height: 20px;
    background: transparent;
    border-top: 1px solid #ed1c24;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    font-size: 4.5px;
    font-family: 'Inter', sans-serif;
    color: #333;
    flex-shrink: 0;
    overflow: hidden;
    margin-top: 0;
    margin-bottom: 0;
}
.footer-contacts i { margin-right: 2px; }

/* Card back numbers */
.card-numbers-back {
    text-align: center;
    margin-top: auto;
    width: 100%;
}
.card-numbers-back .uid {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
}
.vid-line-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    margin-top: 1px;
}
.vid-line-container .vid {
    font-size: 7px;
    font-weight: 700;
    white-space: nowrap;
}

/* Input with action buttons */
.input-with-action {
    display: flex;
    gap: 8px;
    align-items: center;
}
.input-with-action input, 
.input-with-action textarea {
    flex: 1;
}
.random-btn {
    padding: 6px 10px;
    background: #f0f4f8;
    color: #005aab;
    border: 1px solid #005aab;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}
.random-btn:hover {
    background: #005aab;
    color: #fff;
}

/* Print Mode */
@media print {
    .random-btn { display: none !important; }
    body {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    body * { visibility: hidden; }
    #printArea, #printArea * { visibility: visible; }
    #printArea {
        position: absolute;
        left: 0;
        top: 0;
        box-shadow: none !important;
        margin: 0 !important;
        border: none !important;
        width: 100%;
    }
    #printArea::before {
        display: none !important;
    }
    .a4-page {
        box-shadow: none !important;
        border: none !important;
    }
    .aadhaar-card {
        border: 1px solid #777 !important;
    }
    #printArea img {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    @page {
        margin: 0;
        size: A4;
    }
}
/* --- Premium Payment Modal Styles --- */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(8px);
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.modal-card {
    background: #fff;
    width: 100%;
    max-width: 480px;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    animation: modalPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

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

.modal-header {
    background: #f8fafc;
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e2e8f0;
}

.modal-header h3 {
    font-size: 18px;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 10px;
}

.modal-header h3 i { color: #3b82f6; }

.close-modal {
    background: none;
    border: none;
    font-size: 24px;
    color: #64748b;
    cursor: pointer;
    line-height: 1;
}

.modal-tabs {
    display: flex;
    background: #f1f5f9;
    padding: 6px;
    margin: 20px 24px;
    border-radius: 12px;
}

.tab-btn {
    flex: 1;
    padding: 10px;
    border: none;
    background: none;
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s;
}

.tab-btn.active {
    background: #fff;
    color: #3b82f6;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.tab-content {
    display: none;
    padding: 0 24px 24px;
}

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

/* UPI Tab Styles */
.step-desc {
    text-align: center;
    font-size: 14px;
    color: #64748b;
    margin-bottom: 20px;
}

.qr-container {
    background: #f8fafc;
    width: 200px;
    height: 200px;
    margin: 0 auto 20px;
    padding: 15px;
    border-radius: 16px;
    border: 2px solid #e2e8f0;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.qr-logo {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 4px 8px;
    border-radius: 6px;
    font-weight: 800;
    font-size: 12px;
    color: #0f172a;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.payment-info {
    text-align: center;
    margin-bottom: 24px;
}

.amount-tag {
    font-size: 24px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 4px;
}

.upi-id {
    font-size: 13px;
    color: #64748b;
    background: #f1f5f9;
    padding: 4px 12px;
    border-radius: 50px;
    display: inline-block;
}

.timer-section {
    display: flex;
    align-items: center;
    gap: 15px;
    background: #ebf5ff;
    padding: 12px 18px;
    border-radius: 12px;
    margin-bottom: 20px;
}

.timer-ring {
    position: relative;
    width: 70px;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.timer-ring svg {
    width: 70px;
    height: 70px;
    transform: rotate(-90deg);
}

.timer-ring circle {
    fill: none;
    stroke-width: 5;
    stroke: #d1e9ff;
}

.timer-ring circle:last-child {
    stroke: #3b82f6;
    stroke-dasharray: 188.4;
    stroke-dashoffset: 0;
    stroke-linecap: round;
    transition: stroke-dashoffset 1s linear;
}

#countdownText {
    position: absolute;
    font-weight: 800;
    font-size: 16px;
    color: #3b82f6;
}

.timer-section p {
    font-size: 13px;
    font-weight: 600;
    color: #1e40af;
    line-height: 1.4;
}

.manual-approve-status {
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: #f59e0b;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Key Tab Styles */
.key-section {
    text-align: center;
    padding: 10px 0;
}

.key-section p {
    font-size: 14px;
    color: #64748b;
    margin-bottom: 20px;
    line-height: 1.5;
}

.key-input-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.key-input-wrapper input {
    background: #fff;
    border: 2px solid #e2e8f0;
    font-size: 16px;
    padding: 14px;
    text-align: center;
    font-weight: 600;
}

.key-input-wrapper button {
    background: #0f172a;
    color: white;
    border: none;
    padding: 14px;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s;
}

.key-input-wrapper button:active { transform: scale(0.98); }

.feedback {
    margin-top: 15px;
    font-size: 13px;
    font-weight: 600;
}

.modal-footer {
    padding: 15px 24px;
    border-top: 1px solid #e2e8f0;
    text-align: center;
}

.modal-footer p {
    font-size: 12px;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}