/* ============================================
   CV PREVIEW WRAPPER
   The card that holds whichever template renders.
   Templates own their own padding/colours/typography
   via scoped <style> in their render functions.
   ============================================ */

.cv-preview-wrapper{
    position:relative;
    overflow:hidden;
    border-radius:14px;
    margin-top:20px;
    border:2px solid #e5e7eb;
    background:white;
    box-shadow:0 18px 40px -22px rgba(15,23,42,0.45);
}

.cv-watermark{
    position:absolute;
    top:0;left:0;
    width:100%;height:100%;
    pointer-events:none;
    z-index:10;
    overflow:hidden;
}
.cv-watermark-inner{
    position:absolute;
    top:-50%;left:-50%;
    width:200%;height:200%;
    display:flex;flex-wrap:wrap;
    align-items:center;justify-content:center;
    gap:40px;
    transform:rotate(-35deg);
}
.cv-watermark-text{
    font-size:42px;
    font-weight:800;
    color:rgba(0,0,0,0.10);
    white-space:nowrap;
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    letter-spacing:6px;
    text-transform:uppercase;
}

/* The template renders directly into this container.
   Padding lives inside each template, not here. */
.cv-preview{
    background:white;
    color:#1f2937;
    min-height:200px;
}

/* Compact template panel header (used in form tab) */
.template-panel{
    background:linear-gradient(135deg,rgba(30,64,175,0.18) 0%,rgba(51,65,85,0.40) 100%);
    border:1px solid rgba(56,189,248,0.28);
    border-radius:16px;
    padding:18px;
    margin-bottom:20px;
}
.template-panel-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:14px;
    gap:10px;
}
.template-panel-header h4{
    color:var(--accent-color);
    font-size:15px;
    font-weight:600;
    margin:0;
}
.template-panel-header small{
    color:var(--text-secondary);
    font-size:11.5px;
}