@page { size: A4; margin: 0; }

@media print {
    body { 
        /* Reset flexbox to normal flow */
        display: block !important; 
        height: auto !important;
        min-height: 0 !important;
        padding: 0; 
        margin: 0; 
        background: #fff; 
        font-family: var(--font-family) !important; 
    }

    #printable-doc { 
        display: block !important;
        margin: 0 !important;
        padding: 10mm 15mm !important; 
        width: 100% !important; 
        max-width: none !important;
        border: none !important; 
    }

    #generator-form { display: none !important; }
    
    .header { 
        display: flex; 
        justify-content: space-between; 
        align-items: flex-start; 
        margin-bottom: 11px !important; 
        border-bottom: 2px solid var(--accent); 
        padding-bottom: 6px !important; 
    }

    .brand { display: flex; align-items: center; gap: 16px; } 

    .favicon-box { 
        width: 61px; 
        height: 61px; 
        display: flex; 
        align-items: center; 
        justify-content: center; 
        background: #fff; 
        border-radius: 10px; 
        border: 1px solid #e5e7eb; 
        overflow: hidden; 
    }

    .favicon-box img { width: 80%; height: 80%; object-fit: contain; }

    .service-title { 
        font-size: 24px !important; 
        font-weight: 700; 
        color: var(--accent); 
        margin: 0; 
        letter-spacing: -0.04em;
        text-transform: uppercase;
        line-height: 1;
    }

    .sub-label { 
        margin: 0; 
        color: var(--text-sub); 
        font-size: 10px; 
        font-weight: bold; 
        letter-spacing: 0.1em; 
        text-transform: uppercase;
    }

    .user-meta { 
        text-align: right; 
        /* Ensure the container has enough height for 3 lines (Username, Email, Date) */
        /* 16px (username) + 12px (email) + 10px (date) + line heights/margins */
        min-height: 44px; 
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }
    
    .meta-username { 
        font-size: 16px; 
        font-weight: 700; 
        color: #000; 
        letter-spacing: -0.02em; 
        line-height: 1.2;
        /* Force the element to take up space even if empty */
        min-height: 1.2em; 
    }
    
    .meta-email { 
        font-size: 12px; 
        color: var(--text-sub);
        line-height: 1.2;
        min-height: 1.2em;
    }
    
    .date-line { 
        font-size: 10px;
        color: var(--text-sub); 
        margin-top: 2px; 
        text-transform: uppercase;
        font-weight: 500;
        line-height: 1.2;
    }
    
    /* --- CARD & CONTENT --- */
    .card { 
        background: var(--bg-card) !important; 
        border-radius: 15px; 
        padding: 20px !important; 
        border: 1px solid #e5e7eb; 
        display: flex; 
        flex-direction: column; 
        gap: 12px !important; 
        -webkit-print-color-adjust: exact; 
    }

    .section { display: none; } 

    .label { 
        color: var(--accent); 
        font-weight: 700; 
        font-size: 10px !important; 
        margin-bottom: 4px !important; 
        display: block; 
        text-transform: uppercase; 
        letter-spacing: 0.05em; 
    }

    .well { 
        background: white !important; 
        border: 1px solid var(--border); 
        border-radius: 8px; 
        padding: 10px 14px !important; 
        font-family: var(--font-family) !important; 
        font-size: 16px !important; 
        word-break: break-all; 
        line-height: 1.3; 
        color: #000; 
        white-space: pre-wrap; 
        letter-spacing: -0.01em;
    }

    .char-number { 
        color: #6b7280 !important; 
        -webkit-print-color-adjust: exact; 
    }
    .char-special { 
        color: var(--accent) !important; 
        -webkit-print-color-adjust: exact; 
        font-weight: bold;
    }
    .char-letter {
        color: #000 !important;
    }
    
    .security-row { display: flex; gap: 15px !important; align-items: flex-start; }
    .security-content { flex: 1; display: flex; flex-direction: column; gap: 12px !important; }
    .qr-section { display: none; flex-direction: column; }

    #qrcode { 
        background: white !important; 
        padding: 8px !important; 
        border: 1px solid var(--border); 
        border-radius: 12px; 
        width: 140px !important; 
        height: 140px !important; 
    }

    #qrcode canvas, #qrcode img { width: 120px !important; height: 120px !important; }
    
    .codes-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px !important; }

    .code-box { 
        background: white !important; 
        border: 1px solid var(--border); 
        padding: 6px 4px !important; 
        font-size: 13px !important; 
        text-align: center; 
        border-radius: 6px; 
        font-family: var(--font-family) !important; 
        font-weight: 700; 
    }
    
    .qa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px !important; }
    .qa-item { background: white !important; border: 1px solid var(--border); padding: 10px !important; border-radius: 10px; }
    .qa-q { font-size: 11px; font-weight: bold; color: var(--accent); border-bottom: 1px solid #f3f4f6; margin-bottom: 6px; padding-bottom: 4px; text-transform: uppercase; }
    
    .qa-a { 
        font-size: 14px !important; 
        font-family: var(--font-family) !important; 
        font-weight: 700; 
        color: #000;
    }
}