/* ============================================
   GOOGLE FONTS IMPORT
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

/* ============================================
   ROOT VARIABLES — DESIGN TOKENS
   ============================================ */
:root {
    --primary:        #1a56db;
    --primary-dark:   #1341b0;
    --primary-light:  #e0eaff;
    --primary-mid:    #3b73f5;
    --neutral-900:    #0f172a;
    --neutral-800:    #1e293b;
    --neutral-700:    #334155;
    --neutral-600:    #475569;
    --neutral-500:    #64748b;
    --neutral-400:    #94a3b8;
    --neutral-300:    #cbd5e1;
    --neutral-200:    #e2e8f0;
    --neutral-100:    #f1f5f9;
    --neutral-50:     #f8fafc;
    --accent:         #e63f60;
    --accent-dark:    #c0284a;
    --accent-soft:    #fde8ed;
    --success:        #0ea572;
    --success-dark:   #07855b;
    --success-soft:   #d1fae5;
    --warning:        #f59e0b;
    --warning-soft:   #fef3c7;
    --t2-accent:      #0e7490;
    --t3-sidebar:     #1e2d3d;
    --t4-grad-a:      #4f46e5;
    --t4-grad-b:      #7c3aed;
    --shadow-xs:   0 1px 2px rgba(15,23,42,0.06);
    --shadow-sm:   0 1px 4px rgba(15,23,42,0.07), 0 2px 6px rgba(15,23,42,0.05);
    --shadow-md:   0 4px 14px rgba(15,23,42,0.08), 0 2px 6px rgba(15,23,42,0.05);
    --shadow-lg:   0 10px 32px rgba(15,23,42,0.10), 0 4px 12px rgba(15,23,42,0.06);
    --shadow-xl:   0 20px 48px rgba(15,23,42,0.12), 0 8px 20px rgba(15,23,42,0.08);
    --r-xs:   4px;
    --r-sm:   6px;
    --r-md:   10px;
    --r-lg:   14px;
    --r-xl:   20px;
    --r-full: 9999px;
    --font-ui:   'Poppins', 'Segoe UI', Tahoma, sans-serif;
    --font-doc:  'Poppins', 'Segoe UI', sans-serif;
    --ease:    cubic-bezier(0.4, 0, 0.2, 1);
    --tr-fast: all 0.15s var(--ease);
    --tr-base: all 0.25s var(--ease);
    --tr-slow: all 0.4s var(--ease);
}

/* ============================================
   RESET & BASE
   ============================================ */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-ui);
    font-size: 15px;
    line-height: 1.65;
    color: var(--neutral-800);
    background-color: #f5f3ff;
    background-image:
        radial-gradient(ellipse at 15% 15%, rgba(79,70,229,0.08) 0px, transparent 55%),
        radial-gradient(ellipse at 85% 85%, rgba(124,58,237,0.06) 0px, transparent 55%),
        radial-gradient(ellipse at 50% 0%, rgba(109,40,217,0.05) 0px, transparent 40%);
    min-height: 100vh;
}

.container {
    max-width: 1220px;
    margin: 0 auto;
    padding: 24px 18px;
}

/* ============================================
   HEADER
   ============================================ */
header {
    background: linear-gradient(135deg, #0f2460 0%, #1a56db 45%, #2563eb 70%, #4f46e5 100%);
    color: #fff;
    padding: 14px 32px;
    border-radius: 0 0 var(--r-xl) var(--r-xl);
    box-shadow: 0 6px 28px rgba(26,86,219,0.28), 0 2px 8px rgba(0,0,0,0.1);
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

header::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 10% 30%, rgba(255,255,255,0.08) 0%, transparent 40%),
        radial-gradient(circle at 90% 70%, rgba(255,255,255,0.05) 0%, transparent 35%);
    pointer-events: none;
    z-index: 0;
}

header > * { position: relative; z-index: 1; }

.com-logo {
    height: 88px;
    border-radius: var(--r-md);
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    object-fit: contain;
}

header h1 {
    font-size: 2.3rem;
    font-weight: 800;
    letter-spacing: -0.6px;
    margin-bottom: 6px;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.tagline {
    font-size: 1rem;
    opacity: 0.85;
    font-weight: 400;
    letter-spacing: 0.01em;
}

/* ============================================
   TAB NAVIGATION
   ============================================ */
.tabs {
    display: flex;
    justify-content: center;
    margin: 26px 0;
    background: #fff;
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--neutral-200);
}

.tab-btn {
    flex: 1;
    padding: 13px 18px;
    background: #fff;
    border: none;
    font-family: var(--font-ui);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--neutral-500);
    transition: var(--tr-base);
    position: relative;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.tab-btn::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--primary);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.25s var(--ease);
    border-radius: var(--r-full) var(--r-full) 0 0;
}

.tab-btn:hover { background: var(--neutral-50); color: var(--primary); }
.tab-btn.active { background: var(--primary); color: #fff; }
.tab-btn.active::after { transform: scaleX(1); background: rgba(255,255,255,0.35); }

/* ============================================
   FORM SECTIONS
   ============================================ */
.form-section {
    display: none;
    background: #fff;
    padding: 30px 32px;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
    margin-bottom: 20px;
    border: 1px solid var(--neutral-200);
}

.form-section.active {
    display: block;
    animation: revealSection 0.35s var(--ease) both;
}

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

h2 {
    color: var(--neutral-900);
    margin-bottom: 22px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--neutral-200);
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.4px;
}

/* ============================================
   FORM ELEMENTS
   ============================================ */
.form-group { margin-bottom: 18px; }

label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--neutral-700);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

input, select, textarea {
    width: 100%;
    padding: 10px 13px;
    border: 1.5px solid var(--neutral-300);
    border-radius: var(--r-sm);
    font-family: var(--font-ui);
    font-size: 0.92rem;
    color: var(--neutral-800);
    background: var(--neutral-50);
    transition: var(--tr-base);
    appearance: none;
    -webkit-appearance: none;
}

input:hover, select:hover, textarea:hover { border-color: #93aef8; background: #fff; }
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--primary);
    background: #fff;
    box-shadow: 0 0 0 3.5px rgba(26,86,219,0.13);
}

input::placeholder, textarea::placeholder { color: var(--neutral-400); font-style: italic; }

textarea { resize: vertical; min-height: 88px; line-height: 1.55; }

select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
    cursor: pointer;
}

.checkbox-group { display: flex; align-items: center; gap: 10px; }
.checkbox-group input { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; }
.checkbox-group label { text-transform: none; font-size: 0.9rem; margin-bottom: 0; cursor: pointer; }

/* ============================================
   BUTTONS
   ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 22px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: var(--r-sm);
    font-family: var(--font-ui);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--tr-base);
    letter-spacing: 0.02em;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

.btn:hover { background: var(--primary-dark); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(26,86,219,0.32); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn-secondary { background: var(--neutral-700); }
.btn-secondary:hover { background: var(--neutral-800); box-shadow: 0 6px 18px rgba(51,65,85,0.28); }
.btn-success { background: var(--success); }
.btn-success:hover { background: var(--success-dark); box-shadow: 0 6px 18px rgba(14,165,114,0.32); }

.form-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1.5px solid var(--neutral-200);
    gap: 12px;
}

/* ============================================
   DYNAMIC FIELDS
   ============================================ */
.dynamic-field {
    background: #fafbff;
    padding: 18px 18px 14px;
    border-radius: var(--r-md);
    margin-bottom: 14px;
    border: 1.5px solid var(--neutral-200);
    border-left: 4px solid var(--primary);
    transition: var(--tr-base);
}

.dynamic-field:hover { border-color: #c7d9f9; border-left-color: var(--primary); box-shadow: var(--shadow-sm); }

.dynamic-field-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.dynamic-field-header span { font-weight: 700; font-size: 0.92rem; color: var(--neutral-700); }

.remove-btn {
    background: var(--accent-soft);
    color: var(--accent);
    border: 1.5px solid #f9c0cc;
    border-radius: var(--r-sm);
    padding: 4px 12px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 700;
    font-family: var(--font-ui);
    transition: var(--tr-fast);
}

.remove-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 3px 8px rgba(230,63,96,0.28); }

.add-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--success-soft);
    color: var(--success-dark);
    border: 1.5px solid #6ee7b7;
    border-radius: var(--r-sm);
    padding: 9px 16px;
    margin-top: 10px;
    cursor: pointer;
    font-family: var(--font-ui);
    font-size: 0.88rem;
    font-weight: 700;
    transition: var(--tr-base);
}

.add-btn:hover { background: var(--success); color: #fff; border-color: var(--success); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(14,165,114,0.28); }

/* ============================================
   PREVIEW LAYOUT
   ============================================ */
.preview-container {
    display: flex;
    gap: 22px;
    margin-top: 26px;
    align-items: flex-start;
}

.preview-controls {
    flex: none;
    width: 310px;
    background: #fff;
    padding: 22px;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--neutral-200);
    position: sticky;
    top: 18px;
}

.resume-preview {
    flex: 1;
    background: #fff;
    padding: 28px;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
    min-height: 800px;
    height: auto;
    border: 1px solid var(--neutral-200);
    overflow: visible;
    display: block;
    position: relative;
}

/* ============================================
   TEMPLATE FILTER
   ============================================ */
.template-filter { display: flex; gap: 7px; margin-bottom: 18px; flex-wrap: wrap; }

.filter-btn {
    padding: 6px 14px;
    background: #fff;
    border: 1.5px solid var(--neutral-300);
    border-radius: var(--r-full);
    cursor: pointer;
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--neutral-500);
    transition: var(--tr-fast);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.filter-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
.filter-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); box-shadow: 0 3px 10px rgba(26,86,219,0.25); }

/* ============================================
   TEMPLATE CATEGORY & GRID
   ============================================ */
.template-category { margin-bottom: 24px; }

.template-category h4 {
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--neutral-600);
    text-transform: uppercase;
    letter-spacing: 0.09em;
    margin-bottom: 12px;
    padding-left: 10px;
    border-left: 4px solid var(--primary);
}

.template-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.template-options { display: block; width: 100%; }

.template-option {
    border: 2px solid var(--neutral-200);
    border-radius: var(--r-md);
    padding: 9px;
    text-align: center;
    cursor: pointer;
    transition: var(--tr-base);
    margin-bottom: 12px;
    background: #fff;
}

.template-option:hover { border-color: var(--primary); box-shadow: 0 4px 14px rgba(26,86,219,0.13); transform: translateY(-2px); }
.template-option.active { border-color: var(--primary); background: var(--primary-light); box-shadow: 0 4px 16px rgba(26,86,219,0.18); }

.template-preview {
    position: relative;
    height: 115px;
    background: var(--neutral-100);
    border-radius: var(--r-sm);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.85rem;
    color: var(--neutral-600);
}

.preview-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    background: var(--primary);
    color: #fff;
    padding: 2px 8px;
    border-radius: var(--r-full);
    font-size: 0.6rem;
    font-weight: 800;
    z-index: 1;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.preview-colors { position: absolute; bottom: 7px; left: 7px; display: flex; gap: 5px; }
.preview-colors span { width: 16px; height: 16px; border-radius: var(--r-xs); box-shadow: 0 1px 3px rgba(0,0,0,0.18); }
.template-name { font-weight: 700; font-size: 0.85rem; margin-top: 7px; color: var(--neutral-800); }
.template-desc { font-size: 0.75rem; color: var(--neutral-500); margin-top: 3px; line-height: 1.4; }

/* ============================================
   STYLE CONTROLS
   ============================================ */
.style-controls { margin: 16px 0; padding: 14px 16px; background: var(--neutral-50); border-radius: var(--r-md); border: 1px solid var(--neutral-200); }
.style-control-group { display: flex; gap: 10px; margin-bottom: 10px; align-items: center; }
.style-control-group:last-child { margin-bottom: 0; }
.style-control-group label { min-width: 95px; margin-bottom: 0; font-size: 0.8rem; text-transform: none; letter-spacing: 0; font-weight: 600; }

.color-picker {
    width: 38px;
    height: 34px;
    border: 1.5px solid var(--neutral-300);
    border-radius: var(--r-sm);
    cursor: pointer;
    padding: 2px;
    background: #fff;
    transition: var(--tr-fast);
}

.color-picker:hover { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(26,86,219,0.1); }

/* ============================================
   RESUME TEMPLATE BASE
   ============================================ */
.resume-template { display: none; }
.resume-template.active { display: block; }
.preview-summary { padding-left: 18px; }
.resume-preview { overflow: visible !important; display: block !important; }
.content { height: auto !important; overflow: visible !important; }

/* ============================================
   TEMPLATE 1 — MODERN BLUE
   ============================================ */
.template-1 {
    font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    word-wrap: break-word;
    overflow-wrap: break-word;
    background: #fff;
}

.template-1 .header {
    background: linear-gradient(135deg, #0f3090 0%, #1a56db 55%, #2563eb 100%);
    color: #fff;
    padding: 30px 32px;
    text-align: center;
    border-radius: var(--r-md) var(--r-md) 0 0;
    position: relative;
    overflow: hidden;
}

.template-1 .header::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -40px;
    width: 220px;
    height: 220px;
    background: rgba(255,255,255,0.06);
    border-radius: 50%;
    pointer-events: none;
}

.template-1 .header h1 { font-size: 2.1rem; font-weight: 800; margin-bottom: 6px; color: #fff; letter-spacing: -0.5px; position: relative; z-index: 1; word-break: break-word; }

.template-1 .header .contact-info {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin-top: 10px;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.9);
    flex-wrap: wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    position: relative;
    z-index: 1;
}

.template-1 .header .contact-info a { color: rgba(255,255,255,0.92); text-decoration: none; }
.template-1 .header .contact-info a:hover { color: #fff; text-decoration: underline; }

.template-1 .social-links { display: flex; justify-content: center; gap: 18px; margin-top: 9px; flex-wrap: wrap; position: relative; z-index: 1; }
.template-1 .social-links a, .template-1 .social-links i { color: rgba(255,255,255,0.92); text-decoration: none; font-size: 0.85rem; word-break: break-word; }
.template-1 .social-links a:hover { color: #fff; text-decoration: underline; }

.template-1 .section { margin: 22px 0; padding: 0 2px; }

.template-1 .section-title {
    color: #111827;
    border-bottom: 2.5px solid #1a56db;
    padding-bottom: 6px;
    margin-bottom: 14px;
    font-size: 0.88rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    break-after: avoid;
    page-break-after: avoid;
}

.template-1 .experience-item,
.template-1 .education-item,
.template-1 .project-item,
.template-1 .certification-item {
    margin-bottom: 16px;
    padding-left: 14px;
    border-left: 2px solid #e5e7eb;
    overflow: visible;
    display: block;
    width: 100%;
    box-sizing: border-box;
    word-break: break-word;
    overflow-wrap: break-word;
    position: relative;
}

.template-1 .experience-item:last-child,
.template-1 .education-item:last-child,
.template-1 .project-item:last-child,
.template-1 .certification-item:last-child { margin-bottom: 0; }

.template-1 .experience-item:hover, .template-1 .education-item:hover { border-left-color: #1a56db; }

.template-1 .item-header {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px;
    align-items: baseline;
    font-weight: 700;
    font-size: 0.95rem;
    color: #111827;
    word-break: break-word;
    margin-bottom: 6px;
    width: 100%;
    box-sizing: border-box;
}

.template-1 .item-header span { white-space: nowrap; font-weight: 600; font-size: 0.85rem; color: #4b5563; }
.template-1 .item-subheader { font-size: 0.9rem; font-weight: 700; color: #374151; margin-bottom: 6px; display: block; word-break: break-word; }
.template-1 .experience-item p { font-size: 0.88rem; line-height: 1.6; color: #374151; margin: 4px 0; display: block; width: 100%; word-break: break-word; }

.template-1 .education-item div:not(.item-header) { display: block; margin: 4px 0; font-size: 0.9rem; color: #374151; overflow-wrap: anywhere; word-break: break-word; visibility: visible; opacity: 1; }
.template-1 .education-item p, .template-1 .education-item .education-details { margin: 4px 0; display: block; font-size: 0.88rem; line-height: 1.55; color: #374151; word-break: break-word; visibility: visible; opacity: 1; }

.template-1 .project-item p, .template-1 .project-item .project-description { margin: 6px 0; font-size: 0.88rem; color: #374151; line-height: 1.6; display: block; width: 100%; word-break: break-word; overflow-wrap: break-word; visibility: visible; opacity: 1; }

.template-1 .project-item strong, .template-1 .project-item b { display: block; margin-top: 8px; margin-bottom: 2px; font-weight: 700; color: #1f2937; font-size: 0.88rem; word-break: break-word; visibility: visible; opacity: 1; break-after: avoid; page-break-after: avoid; }

.template-1 .project-item .technologies, .template-1 .project-item .tech-stack { display: block; margin: 6px 0; font-size: 0.85rem; font-weight: 600; color: #4b5563; word-break: break-word; visibility: visible; opacity: 1; break-inside: avoid; page-break-inside: avoid; }

.template-1 .project-item .features, .template-1 .project-item .key-features { display: block; margin: 8px 0 4px; font-size: 0.88rem; font-weight: 700; color: #1f2937; word-break: break-word; visibility: visible; opacity: 1; break-after: avoid; page-break-after: avoid; }

.template-1 .project-item .features + p, .template-1 .project-item .key-features + p, .template-1 .project-item strong + p, .template-1 .project-item b + p { break-before: avoid; page-break-before: avoid; }

.template-1 .project-item ul, .template-1 .project-item .feature-list { margin: 4px 0 8px 18px; padding: 0; display: block; list-style: disc; width: calc(100% - 18px); box-sizing: border-box; visibility: visible; opacity: 1; }
.template-1 .project-item ul li, .template-1 .project-item .feature-list li { font-size: 0.85rem; color: #374151; line-height: 1.5; margin: 3px 0; display: list-item; visibility: visible; opacity: 1; word-break: break-word; }

.template-1 .project-item a, .template-1 .certification-item a { color: #1a56db; text-decoration: none; display: inline-block; margin-top: 4px; font-size: 0.85rem; font-weight: 600; overflow-wrap: anywhere; word-break: break-word; visibility: visible; opacity: 1; }
.template-1 .project-item a:hover, .template-1 .certification-item a:hover { text-decoration: underline; }

.template-1 .skills-list { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 16px; list-style: none; margin: 0; }
.template-1 .skill-tag { background: #eff6ff; color: #1e40af; padding: 4px 13px; border-radius: var(--r-full); font-size: 0.82rem; font-weight: 700; border: 1.5px solid #bdd1fa; text-transform: uppercase; display: inline-block; }
.template-1 .skill-tag:hover { background: #1a56db; color: #fff; }

.template-1 .certification-item { margin-bottom: 12px; display: block; }
.template-1 .certification-item strong { display: block; font-size: 0.9rem; color: #111827; font-weight: 700; }
.template-1 .certification-item .issuer { display: block; font-size: 0.85rem; color: #4b5563; margin-top: 2px; }

@media (max-width: 768px) {
    .template-1 .item-header { grid-template-columns: 1fr; gap: 4px; }
    .template-1 .item-header span { white-space: normal; }
    .template-1 .header { padding: 20px 16px; }
    .template-1 .header h1 { font-size: 1.6rem; }
    .template-1 .header .contact-info { flex-direction: column; gap: 6px; align-items: center; }
}

/* ============================================
   TEMPLATE 2 — FRESH GRADUATE
   ============================================ */
.template-2 { font-family: 'Georgia', 'Times New Roman', serif; word-wrap: break-word; overflow-wrap: break-word; background: #fff; }

.template-2 .header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; padding: 20px 24px; gap: 12px; background: #3f8ec4; color: #ffffff; border-bottom: none; box-sizing: border-box; width: 100%; }
.template-2 .header h1 { font-size: 2rem; font-weight: 700; color: #ffffff; flex: 1 1 250px; min-width: 0; margin: 0; word-break: break-word; }

.template-2 .contact-info { text-align: right; font-size: 0.85rem; line-height: 1.7; flex: 1 1 250px; max-width: 100%; color: #ffffff; overflow-wrap: anywhere; word-break: break-word; }
.template-2 .contact-info a { color: #ffffff; text-decoration: none; word-break: break-word; }
.template-2 .contact-info a:hover { text-decoration: underline; }
.template-2 .contact-info i { color: #ffffff; margin-right: 4px; }

.template-2 .resume-body { padding: 8px 24px 24px; box-sizing: border-box; }

.template-2 .section { display: grid; grid-template-columns: 150px 1fr; margin: 18px 0; gap: 0; width: 100%; box-sizing: border-box; break-inside: avoid; page-break-inside: avoid; }

.template-2 .section-title { color: #3f8ec4; font-weight: 800; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; padding-top: 2px; padding-right: 12px; box-sizing: border-box; }
.template-2 .section-content { border-left: 2px solid #e5e7eb; padding-left: 18px; min-width: 0; box-sizing: border-box; overflow: visible; width: 100%; }

.template-2 .experience-item, .template-2 .education-item, .template-2 .project-item { margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid #e5e7eb; overflow: visible; display: block; width: 100%; box-sizing: border-box; word-break: break-word; overflow-wrap: break-word; }
.template-2 .experience-item:last-child, .template-2 .education-item:last-child, .template-2 .project-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.template-2 .item-header { display: flex; justify-content: space-between; flex-wrap: wrap; font-weight: 700; font-size: 0.93rem; color: #111827; gap: 8px; margin-bottom: 4px; width: 100%; box-sizing: border-box; }
.template-2 .item-header strong { color: #111827; font-size: 0.93rem; word-break: break-word; }
.template-2 .item-header span { color: #6b7280; font-size: 0.85rem; font-weight: 600; white-space: nowrap; }
.template-2 .item-subheader { font-size: 0.88rem; font-weight: 700; color: #374151; margin-bottom: 6px; display: block; word-break: break-word; }

.template-2 .experience-item p, .template-2 .education-item p, .template-2 .project-item p, .template-2 .project-item .project-description { font-size: 0.88rem; line-height: 1.6; color: #374151; margin: 4px 0; display: block; width: 100%; word-break: break-word; overflow-wrap: break-word; visibility: visible; opacity: 1; }

.template-2 .project-item .technologies, .template-2 .project-item .tech-stack { font-size: 0.85rem; font-weight: 700; color: #374151; margin: 6px 0 4px; display: block; width: 100%; visibility: visible; opacity: 1; word-break: break-word; }
.template-2 .project-item .features, .template-2 .project-item .key-features { font-size: 0.85rem; font-weight: 700; color: #374151; margin: 6px 0 4px; display: block; width: 100%; visibility: visible; opacity: 1; }
.template-2 .project-item ul, .template-2 .project-item .feature-list { margin: 4px 0 6px 20px; padding: 0; display: block; list-style: disc; width: calc(100% - 20px); box-sizing: border-box; visibility: visible; opacity: 1; }
.template-2 .project-item ul li, .template-2 .project-item .feature-list li { font-size: 0.85rem; color: #374151; line-height: 1.5; margin: 3px 0; display: list-item; visibility: visible; opacity: 1; word-break: break-word; }
.template-2 .project-item a { color: #3f8ec4 !important; text-decoration: none; font-size: 0.85rem; font-weight: 600; display: inline-block; margin-top: 4px; overflow-wrap: anywhere; word-break: break-word; visibility: visible; opacity: 1; }
.template-2 .project-item a:hover { text-decoration: underline; }

.template-2 .skills-list { font-size: 0.88rem; color: #374151; line-height: 1.6; word-break: break-word; display: block; width: 100%; }
.template-2 .certification-item { margin-bottom: 8px; display: block; word-break: break-word; }
.template-2 .certification-item strong { font-size: 0.9rem; color: #111827; display: inline; }
.template-2 .certification-item span { font-size: 0.85rem; color: #6b7280; font-weight: 600; float: right; }
.template-2 .certification-item .issuer { display: block; font-size: 0.85rem; color: #4b5563; float: none; clear: both; }

@media (max-width: 640px) {
    .template-2 .header { flex-direction: column; text-align: center; padding: 16px; }
    .template-2 .contact-info { text-align: center; }
    .template-2 .section { grid-template-columns: 1fr; }
    .template-2 .section-title { margin-bottom: 8px; white-space: normal; font-size: 0.75rem; }
    .template-2 .section-content { border-left: none; border-top: 2px solid #e5e7eb; padding-left: 0; padding-top: 10px; }
    .template-2 .item-header { flex-direction: column; gap: 2px; }
    .template-2 .item-header span { white-space: normal; }
}

/* ============================================
   TEMPLATE 3 — EXECUTIVE DARK
   ============================================ */
.template-3 { font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; background: #fff; }

.template-3 .executive-header {
    background: linear-gradient(135deg, #0f1c2e 0%, #1e2d3d 60%, #253547 100%);
    color: #fff;
    padding: 28px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    position: relative;
    overflow: hidden;
}

.template-3 .executive-header::after { content: ''; position: absolute; bottom: -30px; right: -20px; width: 160px; height: 160px; border: 30px solid rgba(255,255,255,0.04); border-radius: 50%; pointer-events: none; }

.template-3 .executive-left h1 { font-size: 2rem; font-weight: 800; margin-bottom: 5px; color: #fff; letter-spacing: -0.5px; text-transform: capitalize; }
.template-3 .executive-left p { font-size: 1rem; opacity: 0.8; font-weight: 400; }

.template-3 .executive-contact { display: flex; flex-direction: column; gap: 8px; max-width: 50%; }
.template-3 .executive-contact div { display: flex; align-items: center; gap: 9px; font-size: 0.85rem; flex-wrap: wrap; color: rgba(255,255,255,0.88); word-break: break-word; overflow-wrap: break-word; }
.template-3 .executive-contact i { width: 18px; color: #e91e63; flex-shrink: 0; }
.template-3 .executive-contact a { color: rgba(255,255,255,0.88) !important; text-decoration: none; word-break: break-word; }
.template-3 .executive-contact a:hover { color: #fff !important; text-decoration: underline; }

.template-3 .executive-content { display: flex; min-height: auto; flex-wrap: wrap; }
.template-3 .executive-sidebar { width: 30%; background: #f6f8fa; padding: 24px 20px; border-right: 1px solid #e5e7eb; box-sizing: border-box; }
.template-3 .executive-main { width: 70%; padding: 24px 22px; box-sizing: border-box; }

.template-3 .executive-section { margin-bottom: 22px; }
.template-3 .executive-section h3 { color: #111827; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.11em; margin-bottom: 13px; padding-bottom: 7px; border-bottom: 2px solid #e91e63; }

.template-3 .experience-item, .template-3 .education-item, .template-3 .project-item { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid #e5e7eb; overflow: visible; display: block; position: relative; width: 100%; box-sizing: border-box; }
.template-3 .project-item:last-child, .template-3 .education-item:last-child, .template-3 .experience-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.template-3 .item-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; font-weight: 700; font-size: 1rem; color: #111827; flex-wrap: wrap; gap: 8px; width: 100%; box-sizing: border-box; }
.template-3 .item-header strong { font-size: 1rem; color: #e91e63; display: inline-block; word-break: break-word; }
.template-3 .item-header span { font-size: 0.85rem; font-weight: 600; color: #6b7280; white-space: nowrap; }

.template-3 .experience-item .company { font-weight: 700; font-size: 0.92rem; color: #111827; margin-bottom: 6px; display: block; }
.template-3 .experience-item p, .template-3 .education-item p { font-size: 0.88rem; line-height: 1.55; color: #374151; margin: 4px 0; display: block; width: 100%; word-break: break-word; overflow-wrap: break-word; }

.template-3 .project-item p, .template-3 .project-item .project-description { margin: 8px 0; font-size: 0.88rem; line-height: 1.55; color: #374151; display: block; width: 100%; word-break: break-word; overflow-wrap: break-word; visibility: visible; opacity: 1; }
.template-3 .project-item .technologies, .template-3 .project-item .tech-stack { margin: 8px 0; font-size: 0.85rem; font-weight: 600; color: #4b5563; display: block; width: 100%; visibility: visible; opacity: 1; }
.template-3 .project-item .features, .template-3 .project-item .key-features { margin: 8px 0 4px; font-size: 0.85rem; font-weight: 700; color: #374151; display: block; width: 100%; visibility: visible; opacity: 1; }
.template-3 .project-item ul, .template-3 .project-item .feature-list { margin: 4px 0 8px 20px; padding: 0; display: block; width: calc(100% - 20px); list-style: disc; visibility: visible; opacity: 1; }
.template-3 .project-item ul li, .template-3 .project-item .feature-list li { margin: 4px 0; font-size: 0.85rem; color: #374151; line-height: 1.45; display: list-item; visibility: visible; opacity: 1; word-break: break-word; }
.template-3 .project-item a { color: #e91e63 !important; text-decoration: none; word-break: break-word; display: inline-block; margin-top: 6px; font-size: 0.85rem; font-weight: 600; visibility: visible; opacity: 1; }
.template-3 .project-item a:hover { text-decoration: underline; }

.template-3 .skill-item { margin-bottom: 13px; }
.template-3 .skill-item span { display: block; margin-bottom: 5px; font-weight: 600; font-size: 0.88rem; color: #374151; }
.template-3 .skill-bar { height: 7px; background: #e5e7eb; border-radius: var(--r-full); overflow: hidden; }
.template-3 .skill-bar div { height: 100%; background: linear-gradient(90deg, #e91e63 0%, #f97399 100%); border-radius: var(--r-full); }

.template-3 .executive-certs div, .template-3 .executive-languages div { margin-bottom: 10px; padding: 8px 10px 8px 13px; border-left: 3px solid #e91e63; background: #fff; border-radius: 0 var(--r-xs) var(--r-xs) 0; font-size: 0.88rem; word-break: break-word; display: block; }
.template-3 .executive-certs a { color: #e91e63 !important; text-decoration: none; word-break: break-word; display: inline-block; margin-top: 4px; font-size: 0.83rem; font-weight: 600; }
.template-3 .executive-certs a:hover { text-decoration: underline; }
.template-3 .executive-languages span { color: #6b7280; font-size: 0.85rem; }

.template-3 .executive-softskills div { display: inline-block; background: #fff; border: 1.5px solid #e5e7eb; border-radius: var(--r-full); padding: 4px 12px; font-size: 0.82rem; font-weight: 600; color: #374151; margin: 0 6px 6px 0; }

@media (max-width: 768px) {
    .template-3 .executive-header { flex-direction: column; text-align: center; }
    .template-3 .executive-contact { max-width: 100%; align-items: center; }
    .template-3 .executive-content { flex-direction: column; }
    .template-3 .executive-sidebar { width: 100%; border-right: none; border-bottom: 1px solid #e5e7eb; }
    .template-3 .executive-main { width: 100%; }
    .template-3 .item-header { flex-direction: column; gap: 4px; }
}

/* ============================================
   TEMPLATE 4 — CREATIVE PORTFOLIO
   ============================================ */
.template-4 { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); padding: 3px; border-radius: var(--r-md); max-width: 100%; overflow-x: auto; }

.template-4 .creative-header { background: #fff; padding: 26px 28px; border-radius: calc(var(--r-md) - 2px) calc(var(--r-md) - 2px) 0 0; }
.template-4 .creative-profile { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; flex-wrap: wrap; }
.template-4 .creative-avatar { width: 72px; height: 72px; background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 5px 18px rgba(79,70,229,0.32); }
.template-4 .creative-avatar i { font-size: 34px; color: #fff; }
.template-4 .creative-title h1 { font-size: 1.9rem; font-weight: 800; color: #1a1033; margin-bottom: 4px; letter-spacing: -0.4px; text-transform: capitalize; }
.template-4 .creative-title p { color: #4f46e5; font-weight: 700; font-size: 0.95rem; }

.template-4 .creative-contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; padding-top: 17px; border-top: 2px dashed #c4b5fd; }
.template-4 .creative-contact div { display: flex; align-items: center; gap: 9px; color: #4b5563; font-size: 0.85rem; flex-wrap: wrap; word-break: break-word; overflow-wrap: break-word; min-width: 0; }
.template-4 .creative-contact i { color: #4f46e5; width: 18px; flex-shrink: 0; }
.template-4 .creative-contact a { color: #4b5563; text-decoration: none; word-break: break-word; overflow-wrap: break-word; display: inline-block; max-width: 100%; }
.template-4 .creative-contact a:hover { color: #4f46e5; text-decoration: underline; }

.template-4 .creative-content { background: #fff; padding: 26px 28px; border-radius: 0 0 calc(var(--r-md) - 2px) calc(var(--r-md) - 2px); }
.template-4 .creative-grid { display: grid; grid-template-columns: 1fr 1.55fr; gap: 26px; }
.template-4 .creative-section { margin-bottom: 26px; }
.template-4 .creative-section h3 { color: #1a1033; font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.09em; margin-bottom: 13px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding-bottom: 8px; border-bottom: 1.5px solid #ede9fe; }
.template-4 .creative-section h3 i { color: #4f46e5; }

.template-4 .creative-education .education-item, .template-4 .creative-projects .project-item { margin-bottom: 14px; padding: 13px 14px; background: #faf8ff; border-radius: var(--r-sm); border-left: 3px solid #4f46e5; overflow: visible; display: block; }
.template-4 .creative-education .education-item:hover, .template-4 .creative-projects .project-item:hover { background: #f5f0ff; }
.template-4 .education-item strong { display: block; font-size: 1rem; color: #111827; margin-bottom: 4px; }
.template-4 .education-item p { margin: 4px 0; color: #374151; font-size: 0.88rem; }

.template-4 .creative-projects .project-item { word-break: break-word; overflow-wrap: break-word; }
.template-4 .creative-projects .project-item strong { display: block; font-size: 1rem; color: #111827; margin-bottom: 8px; }
.template-4 .creative-projects .project-item p, .template-4 .creative-projects .project-item .project-description { margin: 8px 0; font-size: 0.88rem; line-height: 1.5; color: #374151; display: block; }
.template-4 .creative-projects .project-item .tech-stack, .template-4 .creative-projects .project-item .features-list { margin: 8px 0; font-size: 0.85rem; color: #4b5563; display: block; }
.template-4 .creative-projects .project-item ul, .template-4 .creative-projects .project-item .feature-list { margin: 6px 0 6px 20px; padding: 0; display: block; }
.template-4 .creative-projects .project-item li { margin: 4px 0; font-size: 0.85rem; color: #374151; line-height: 1.4; }

.template-4 .creative-projects .project-item a { color: #4f46e5 !important; text-decoration: none; word-break: break-word; overflow-wrap: break-word; display: inline-block; margin-top: 8px; font-size: 0.85rem; font-weight: 600; padding: 4px 0; max-width: 100%; white-space: normal; line-height: 1.4; }
.template-4 .creative-projects .project-item a:hover { text-decoration: underline; color: #7c3aed !important; }

.template-4 .creative-skills { display: flex; flex-wrap: wrap; gap: 7px; }
.template-4 .creative-skills span { background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); color: #fff; padding: 5px 13px; border-radius: var(--r-full); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.01em; box-shadow: 0 2px 6px rgba(79,70,229,0.22); text-transform: uppercase; }
.template-4 .creative-soft-skills { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.template-4 .creative-soft-skills span { background: #ede9fe; color: #4c1d95; padding: 4px 12px; border-radius: var(--r-full); font-size: 0.8rem; font-weight: 600; }

.template-4 .creative-certs div { margin-bottom: 9px; padding: 9px 12px; background: #faf8ff; border-left: 3px solid #4f46e5; border-radius: 0 var(--r-sm) var(--r-sm) 0; word-break: break-word; font-size: 0.88rem; }
.template-4 .creative-certs div:hover { background: #f5f0ff; transform: translateX(2px); }
.template-4 .creative-about p { line-height: 1.6; color: #374151; font-size: 0.9rem; margin: 0; }

@media (max-width: 768px) {
    .template-4 .creative-header { padding: 20px; }
    .template-4 .creative-content { padding: 20px; }
    .template-4 .creative-profile { flex-direction: column; text-align: center; }
    .template-4 .creative-contact { grid-template-columns: 1fr; gap: 10px; }
    .template-4 .creative-grid { grid-template-columns: 1fr; gap: 20px; }
    .template-4 .creative-education .education-item, .template-4 .creative-projects .project-item { padding: 10px 12px; }
}

/* ============================================
   FOOTER
   ============================================ */
footer { text-align: center; margin-top: 40px; padding: 18px 20px; color: var(--neutral-500); font-size: 0.85rem; border-top: 1px solid var(--neutral-200); }

/* ============================================
   RESPONSIVE — LAPTOP (>=1024px)
   ============================================ */
@media (min-width: 1024px) {
    .preview-container { flex-direction: row; align-items: flex-start; }
    .preview-controls { width: 310px; flex: none; }
    .resume-preview { flex: 1; padding: 22px; }
    .template-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .template-category { width: 100%; grid-column: span 2; }
    .template-category .template-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .template-option { margin-bottom: 0; height: 100%; display: flex; flex-direction: column; }
    .template-preview { height: 135px; }
}

/* ============================================
   RESPONSIVE — TABLET (768–1023px)
   ============================================ */
@media (min-width: 768px) and (max-width: 1023px) {
    .preview-container { flex-direction: column; }
    .preview-controls { width: 100%; position: static; }
    .resume-preview { width: 100%; }
    .template-grid, .template-options { grid-template-columns: repeat(2, 1fr); }
    .template-4 .creative-grid { grid-template-columns: 1fr; }
    .template-2 .section { flex-direction: column; gap: 4px; }
    .template-2 .section-title { width: 100%; white-space: normal; }
    .template-2 .section-content { border-left: none; padding-left: 0; border-top: 2px solid #e5e7eb; padding-top: 12px; margin-top: 6px; width: 100%; }
    .template-2 .contact-info { max-width: 100%; text-align: left; }
    .template-2 .header { flex-direction: column; align-items: flex-start; }
    .template-3 .executive-content { flex-direction: column; }
    .template-3 .executive-sidebar, .template-3 .executive-main { width: 100%; }
}

/* ============================================
   RESPONSIVE — LARGE MOBILE (576–767px)
   ============================================ */
@media (min-width: 576px) and (max-width: 767px) {
    .container { padding: 12px; }
    .tabs { flex-direction: column; }
    .tab-btn { width: 100%; }
    .preview-container { flex-direction: column; }
    .preview-controls { width: 100%; position: static; }
    .template-grid, .template-options { grid-template-columns: 1fr; }
    .template-filter { justify-content: center; }
    .template-1 .header .contact-info, .template-1 .social-links { flex-direction: column; align-items: center; }
    .template-2 .header { flex-direction: column; align-items: flex-start; gap: 10px; }
    .template-2 .contact-info { text-align: left; max-width: 100%; }
    .template-2 .section { flex-direction: column; gap: 4px; }
    .template-2 .section-title { width: 100%; white-space: normal; }
    .template-2 .section-content { border-left: none; padding-left: 0; border-top: 2px solid #e5e7eb; padding-top: 12px; margin-top: 6px; width: 100%; }
    .template-3 .executive-header { flex-direction: column; text-align: center; }
    .template-3 .executive-contact { align-items: center; max-width: 100%; }
    .template-3 .executive-content { flex-direction: column; }
    .template-3 .executive-sidebar, .template-3 .executive-main { width: 100%; }
    .template-4 .creative-profile { flex-direction: column; text-align: center; }
    .template-4 .creative-contact { grid-template-columns: 1fr; }
    .template-4 .creative-grid { grid-template-columns: 1fr; }
}

/* ============================================
   RESPONSIVE — MOBILE (<=575px)
   ============================================ */
@media (max-width: 575px) {
    .container { padding: 8px; }
    h1 { font-size: 1.7rem; }
    .form-section { padding: 14px 12px; }
    .tabs { flex-direction: column; margin: 12px 0; }
    .tab-btn { padding: 11px; font-size: 0.88rem; }
    .preview-container { flex-direction: column; }
    .preview-controls { width: 100%; position: static; }
    .template-grid, .template-options { grid-template-columns: 1fr; }
    .template-filter { flex-direction: column; align-items: stretch; }
    .filter-btn { width: 100%; text-align: center; }
    .form-navigation { flex-direction: column; gap: 10px; }
    .form-navigation .btn { width: 100%; justify-content: center; }
    .template-1 .header { padding: 20px 14px; }
    .template-1 .header h1 { font-size: 1.5rem; }
    .template-1 .header .contact-info, .template-1 .social-links { flex-direction: column; align-items: center; }
    .template-2 .header { flex-direction: column; align-items: flex-start; gap: 8px; }
    .template-2 .header h1 { font-size: 1.5rem; }
    .template-2 .contact-info { text-align: left; max-width: 100%; }
    .template-2 .section { flex-direction: column; gap: 4px; }
    .template-2 .section-title { width: 100%; white-space: normal; }
    .template-2 .section-content { border-left: none; padding-left: 0; border-top: 2px solid #e5e7eb; padding-top: 12px; margin-top: 6px; width: 100%; }
    .template-3 .executive-header { padding: 18px 16px; flex-direction: column; text-align: center; }
    .template-3 .executive-left h1 { font-size: 1.5rem; }
    .template-3 .executive-contact { align-items: center; max-width: 100%; }
    .template-3 .executive-sidebar, .template-3 .executive-main { padding: 14px; width: 100%; }
    .template-3 .executive-content { flex-direction: column; }
    .template-4 .creative-header, .template-4 .creative-content { padding: 14px; }
    .template-4 .creative-title h1 { font-size: 1.45rem; }
    .template-4 .creative-avatar { width: 56px; height: 56px; }
    .template-4 .creative-avatar i { font-size: 26px; }
    .template-4 .creative-grid { grid-template-columns: 1fr; }
    .template-4 .creative-profile { flex-direction: column; text-align: center; }
    .template-4 .creative-contact { grid-template-columns: 1fr; }
}

/* ============================================
   PAGE SETUP
   ============================================ */
@page { size: A4; margin: 6mm; }
@page :first { margin-top: 6mm; }

/* ============================================
   PRINT / PDF — GLOBAL BASE
   ============================================ */
@media print {
    header, footer, .tabs, .form-section,
    .preview-controls, .btn, .add-btn, .remove-btn,
    .save-section-btn, .template-filter, .template-options,
    .style-controls, .form-navigation, .no-print,
    .preview-container > *:not(.resume-preview) {
        display: none !important;
    }

    body { background: #fff !important; margin: 0 !important; padding: 0 !important; }
    .container { max-width: none !important; padding: 0 !important; margin: 0 !important; }
    .preview-container { display: block !important; margin: 0 !important; padding: 0 !important; }

    .resume-preview {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
        box-shadow: none !important;
        border: none !important;
        overflow: visible !important;
    }

    .resume-template { display: none !important; }
    .resume-template.active {
        display: block !important;
        width: 100% !important;
        max-width: 210mm !important;
        margin: 0 auto !important;
        padding: 6mm 8mm !important;
        background: #fff !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        font-size: 11pt !important;
        line-height: 1.45 !important;
    }

    * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; color-adjust: exact !important; }

    /* ============================================
       TEMPLATE 1 PRINT
       ============================================ */
    .template-1 .header {
        background: linear-gradient(135deg, #0f3090 0%, #1a56db 55%, #2563eb 100%) !important;
        color: #fff !important;
        print-color-adjust: exact !important;
        -webkit-print-color-adjust: exact !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
        border-radius: 0 !important;
    }

    .template-1 .header h1,
    .template-1 .header .contact-info,
    .template-1 .header .contact-info a,
    .template-1 .social-links a,
    .template-1 .social-links i { color: #ffffff !important; }

    .template-1 .header .contact-info, .template-1 .social-links { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; }

    .template-1 .section-title { color: #1a56db !important; border-bottom-color: #1a56db !important; break-after: avoid !important; page-break-after: avoid !important; }
    .template-1 .skill-tag { background: #eff6ff !important; color: #1e40af !important; border-color: #bdd1fa !important; }

    .template-1 .experience-item,
    .template-1 .education-item,
    .template-1 .project-item,
    .template-1 .certification-item {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
        overflow: visible !important;
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .template-1 .item-header { display: flex !important; justify-content: space-between !important; align-items: baseline !important; flex-wrap: wrap !important; gap: 6px !important; break-after: avoid !important; page-break-after: avoid !important; }

    .template-1 .project-item strong, .template-1 .project-item b,
    .template-1 .project-item .features, .template-1 .project-item .key-features { break-after: avoid !important; page-break-after: avoid !important; }
    .template-1 .project-item .technologies, .template-1 .project-item .tech-stack { break-inside: avoid !important; page-break-inside: avoid !important; }
    .template-1 .project-item .features + p, .template-1 .project-item .key-features + p,
    .template-1 .project-item strong + p, .template-1 .project-item b + p { break-before: avoid !important; page-break-before: avoid !important; }

    .template-1 .project-item, .template-1 .project-item *,
    .template-1 .project-item p, .template-1 .project-item strong, .template-1 .project-item b,
    .template-1 .project-item ul, .template-1 .project-item li, .template-1 .project-item a,
    .template-1 .project-item .technologies, .template-1 .project-item .features,
    .template-1 .project-item .key-features, .template-1 .project-item .project-description,
    .template-1 .project-item .feature-list {
        display: block !important; visibility: visible !important; opacity: 1 !important;
        overflow: visible !important; height: auto !important; max-height: none !important;
        clip: auto !important; position: static !important; float: none !important;
    }

    .template-1 .project-item ul, .template-1 .project-item .feature-list { list-style: disc !important; margin-left: 18px !important; padding: 0 !important; }
    .template-1 .project-item li { display: list-item !important; }
    .template-1 .project-item a { display: inline-block !important; color: #1a56db !important; }
    .template-1 .education-item *, .template-1 .education-item p, .template-1 .education-item div { display: block !important; visibility: visible !important; opacity: 1 !important; overflow: visible !important; height: auto !important; max-height: none !important; }
    .template-1 .certification-item a { color: #1a56db !important; display: inline-block !important; visibility: visible !important; opacity: 1 !important; }
    .template-1 { font-size: 11.5px; }
    .template-1 .section { margin: 14px 0 !important; }

    /* ============================================
       TEMPLATE 2 PRINT
       ============================================ */
    .template-2 .header {
        background: #3f8ec4 !important;
        color: #ffffff !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }

    .template-2 .header h1,
    .template-2 .contact-info,
    .template-2 .contact-info a,
    .template-2 .contact-info i { color: #ffffff !important; }

    .template-2 .contact-info { max-width: 55% !important; word-break: break-all !important; overflow-wrap: break-word !important; min-width: 0 !important; }
    .template-2 .resume-body { padding: 6px 20px 20px !important; }

    .template-2 .section {
        display: block !important;
        width: 100% !important;
        overflow: hidden !important;
        margin: 14px 0 !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }

    .template-2 .section-title {
        display: block !important;
        float: left !important;
        width: 140px !important;
        color: #3f8ec4 !important;
        font-size: 0.72rem !important;
        padding-top: 2px !important;
        box-sizing: border-box !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        break-after: avoid !important;
        page-break-after: avoid !important;
    }

    .template-2 .section-content {
        display: block !important;
        margin-left: 140px !important;
        border-left: 2px solid #e5e7eb !important;
        padding-left: 16px !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    .template-2 .section::after { content: '' !important; display: table !important; clear: both !important; }

    .template-2 .experience-item, .template-2 .education-item, .template-2 .project-item {
        break-inside: avoid !important; page-break-inside: avoid !important;
        overflow: visible !important; display: block !important; width: 100% !important; box-sizing: border-box !important;
    }

    .template-2 .project-item *, .template-2 .project-item p, .template-2 .project-item ul,
    .template-2 .project-item li, .template-2 .project-item .technologies,
    .template-2 .project-item .features, .template-2 .project-item .project-description {
        display: block !important; visibility: visible !important; opacity: 1 !important;
        overflow: visible !important; height: auto !important; max-height: none !important;
        clip: auto !important; position: static !important;
    }

    .template-2 .project-item ul { display: block !important; list-style: disc !important; margin-left: 20px !important; }
    .template-2 .project-item li { display: list-item !important; }
    .template-2 .project-item a { display: inline-block !important; visibility: visible !important; opacity: 1 !important; color: #3f8ec4 !important; }
    .template-2 .item-header span { color: #6b7280 !important; }

    /* ============================================
       TEMPLATE 3 PRINT — COMPLETE FIX
       KEY: No flex/float conflict with global rules
       ============================================ */
    .template-3 .executive-content {
        display: block !important;
        width: 100% !important;
    }

    .template-3 .executive-header {
        background: linear-gradient(135deg, #0f1c2e 0%, #1e2d3d 60%, #253547 100%) !important;
        color: #fff !important;
        print-color-adjust: exact !important;
        -webkit-print-color-adjust: exact !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }

    .template-3 .executive-header *,
    .template-3 .executive-contact div,
    .template-3 .executive-contact a,
    .template-3 .executive-left h1,
    .template-3 .executive-left p { color: #fff !important; }

    .template-3 .executive-contact i { color: #e91e63 !important; }

    .template-3 .executive-sidebar {
        display: block !important;
        width: 100% !important;
        float: none !important;
        border-right: none !important;
        border-bottom: 2px solid #e5e7eb !important;
        background: #f6f8fa !important;
        padding: 20px 30px !important;
        box-sizing: border-box !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }

    .template-3 .executive-sidebar .executive-section {
        display: inline-block !important;
        width: 30% !important;
        vertical-align: top !important;
        margin-right: 3% !important;
        box-sizing: border-box !important;
    }

    .template-3 .executive-sidebar .executive-section:last-child { margin-right: 0 !important; }

    .template-3 .executive-main {
        display: block !important;
        width: 100% !important;
        float: none !important;
        clear: both !important;
        padding: 20px 30px !important;
        box-sizing: border-box !important;
    }

    .template-3 .executive-main .executive-section {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        overflow: visible !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .template-3 .executive-section h3 {
        break-after: avoid !important;
        page-break-after: avoid !important;
        color: #111827 !important;
        border-bottom: 2px solid #e91e63 !important;
    }

    /* PROFESSIONAL SUMMARY — display:table atomic fix */
    .template-3 .executive-main .executive-section:first-child {
        display: table !important;
        width: 100% !important;
        box-sizing: border-box !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }

    .template-3 .executive-main .executive-section:first-child h3 {
        display: table !important;
        width: 100% !important;
        break-after: avoid !important;
        page-break-after: avoid !important;
    }

    .template-3 .executive-main .executive-section:first-child p,
    .template-3 #preview-summary-3 {
        display: table !important;
        width: 100% !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
        visibility: visible !important;
        opacity: 1 !important;
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
        clip: auto !important;
        position: static !important;
        white-space: normal !important;
        word-break: break-word !important;
    }

    .template-3 .project-item, .template-3 .education-item, .template-3 .experience-item {
        break-inside: avoid !important; page-break-inside: avoid !important;
        overflow: visible !important; display: block !important;
        width: 100% !important; box-sizing: border-box !important;
    }

    .template-3 .project-item *, .template-3 .project-item p, .template-3 .project-item ul,
    .template-3 .project-item li, .template-3 .project-item .technologies,
    .template-3 .project-item .features, .template-3 .project-item .project-description {
        display: block !important; visibility: visible !important; opacity: 1 !important;
        overflow: visible !important; height: auto !important; max-height: none !important;
        clip: auto !important; position: static !important;
    }

    .template-3 .project-item ul { display: block !important; list-style: disc !important; margin-left: 20px !important; }
    .template-3 .project-item li { display: list-item !important; }
    .template-3 .project-item a { display: inline-block !important; visibility: visible !important; opacity: 1 !important; color: #e91e63 !important; }

    .template-3 .skill-bar { background: #e5e7eb !important; }
    .template-3 .skill-bar div { background: linear-gradient(90deg, #e91e63 0%, #f97399 100%) !important; }

    .template-3 .executive-certs div, .template-3 .executive-languages div {
        break-inside: avoid !important; page-break-inside: avoid !important;
        border-left: 3px solid #e91e63 !important;
    }

    .template-3 .executive-certs a { color: #e91e63 !important; }
    .template-3 .item-header strong { color: #e91e63 !important; }

    /* Contacts in header white */
    .template-3 .executive-contact a, .template-3 .executive-header a { color: #fff !important; }

    /* ============================================
       TEMPLATE 4 PRINT
       ============================================ */
    .template-4 { background: #fff !important; padding: 0 !important; }
    .template-4 .creative-header { background: #fff !important; padding: 15px !important; }
    .template-4 .creative-content { padding: 15px !important; }
    .template-4 .creative-avatar { background: #4f46e5 !important; }

    .template-4 .creative-grid {
        display: grid !important;
        grid-template-columns: 1fr 1.55fr !important;
        gap: 18px !important;
    }

    .template-4 .creative-skills span { background: #f0f0f0 !important; color: #000 !important; box-shadow: none !important; border: 1px solid #ddd !important; }
    .template-4 .creative-soft-skills span { background: #f0f0f0 !important; color: #000 !important; }
    .template-4 .creative-contact a { color: #000 !important; }
    .template-4 .creative-projects .project-item a { color: #4f46e5 !important; text-decoration: underline !important; }
    .template-4 .creative-contact i { color: #4f46e5 !important; }

    .template-4 .creative-projects .project-item *, .template-4 .creative-projects .project-item p,
    .template-4 .creative-projects .project-item ul, .template-4 .creative-projects .project-item li {
        display: block !important; visibility: visible !important; opacity: 1 !important;
        overflow: visible !important; height: auto !important; max-height: none !important;
    }

    .template-4 .creative-projects .project-item li { display: list-item !important; }

    /* ============================================
       GLOBAL PRINT — PAGE BREAKS & VISIBILITY
       ============================================ */
    .template-1 .section, .template-2 .section { margin: 10px 0 !important; }

    .experience-item, .education-item, .project-item, .certification-item,
    .template-4 .creative-section {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        overflow: visible !important;
    }

    h1, h2, h3, h4, .section-title {
        page-break-after: avoid !important;
        break-after: avoid !important;
    }

    .certification-item, .executive-certs div, .creative-certs div { display: block !important; visibility: visible !important; overflow: visible !important; }

    p, .description, .item-description { white-space: normal !important; overflow: visible !important; word-wrap: break-word !important; }

    /* Compact spacing */
    .resume-template.active .header,
    .resume-template.active .executive-header,
    .resume-template.active .creative-header { padding: 12px !important; }

    .resume-template.active .experience-item,
    .resume-template.active .education-item,
    .resume-template.active .project-item,
    .resume-template.active .certification-item { margin-bottom: 9px !important; }

    .skill-bar { background: #e2e8f0 !important; border: 1px solid #cbd5e1 !important; }

    @media print and (orientation: portrait) { .resume-template.active { max-width: 210mm !important; } }
    @media print and (orientation: landscape) { .resume-template.active { max-width: 297mm !important; } }
}

/* ============================================
   GLOBAL OVERFLOW & VISIBILITY FIXES (SCREEN)
   ============================================ */
.resume-template.active p,
.resume-template.active .description,
.resume-template.active .item-description,
.resume-template.active a,
.resume-template.active span,
.resume-template.active div {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    max-width: 100% !important;
}

.certification-item, .executive-certs div, .creative-certs div { display: block !important; visibility: visible !important; overflow: visible !important; }
.project-item, .project-item:nth-child(n+2) { display: block !important; visibility: visible !important; margin-bottom: 13px !important; overflow: visible !important; }
a { display: inline-block !important; visibility: visible !important; opacity: 1 !important; }

.link { margin-right: 16px; }
.days { margin-right: 16px; }