:root {
    --primary-color: #4a90e2;
    --secondary-color: #50e3c2;
    --bg-color: #f4f7f6;
    --text-color: #333;
    --white: #ffffff;
    --glass-bg: rgba(255, 255, 255, 0.8);
    --glass-border: rgba(255, 255, 255, 0.3);
    --shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    --font-main: 'Poppins', sans-serif;
}

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

body {
    font-family: var(--font-main);
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: var(--text-color);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Glassmorphism Utilities */
.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 10px;
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow);
}

.btn {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    background: var(--primary-color);
    color: var(--white);
    font-size: 1rem;
    transition: transform 0.2s, background 0.2s;
}

.btn:hover {
    transform: translateY(-2px);
    background: #357abd;
}

/* Authentication Page Styles */
.auth-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
}

.auth-box {
    width: 100%;
    max-width: 400px;
    padding: 40px;
    text-align: center;
}

.auth-box h2 {
    margin-bottom: 20px;
    color: var(--primary-color);
}

.input-group {
    margin-bottom: 20px;
    text-align: left;
}

.input-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
}

.input-group input,
.input-group select {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    outline: none;
    transition: border-color 0.3s;
    font-family: inherit;
    font-size: inherit;
    background: white;
}

.input-group input:focus,
.input-group select:focus {
    border-color: var(--primary-color);
}

.auth-switch {
    margin-top: 15px;
    font-size: 0.9rem;
}

.auth-switch a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: bold;
}

.hidden {
    display: none;
}

/* Navbar */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 30px;
    margin: 20px;
    position: sticky;
    top: 20px;
    z-index: 100;
}

.logo {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    gap: 12px;
}

.nav-logo {
    height: 35px;
    width: auto;
    object-fit: contain;
}

.nav-actions {
    display: flex;
    gap: 15px;
    align-items: center;
}

.template-select {
    padding: 8px;
    border-radius: 5px;
    border: 1px solid #ddd;
}

.btn-sm {
    padding: 8px 15px;
    font-size: 0.9rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    background: var(--primary-color);
    color: var(--white);
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
}

/* Dashboard Layout */
.dashboard-container {
    display: flex;
    gap: 20px;
    padding: 0 20px 20px 20px;
    height: calc(100vh - 100px);
    /* Adjust based on navbar + margins */
}

/* Editor Section */
.editor-section {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    height: 100%;
}

.form-section {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.form-header h3 {
    margin-bottom: 20px;
    color: var(--primary-color);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.section-controls {
    display: flex;
    gap: 10px;
    align-items: center;
}

.visibility-toggle {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.85rem;
    cursor: pointer;
    user-select: none;
    margin-right: 5px;
    color: #555;
}

.resume-section.hidden {
    display: none !important;
}

.btn-icon {
    background: var(--secondary-color);
    border: none;
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.full-width {
    grid-column: span 2;
}

.input-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    resize: vertical;
    min-height: 200px;
}

/* Preview Section */
.preview-section {
    flex: 1;
    overflow-y: hidden;
    /* Iframe handles its own scroll if needed, but we want full view */
    background: #555;
    padding: 30px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    /* Ensure top alignment */
}

.resume-preview-iframe {
    width: 100%;
    /* Will become A4 width via internal scaling or explicit width */
    height: 100%;
    border: none;
    background: white;
    /* Simulate A4 view scaling if needed, but iframe content handles it */
    min-width: 210mm;
    /* Force minimum width to respect A4 */
}

/* Resume Preview Styles */
/* Resume Preview Styles */
/* Resume Preview Styles */
.resume-preview-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    padding: 20px 0;
}

.resume-page {
    width: 210mm;
    height: 297mm;
    /* Fixed height for A4 */
    background: white;
    padding: 40px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
    color: #333;
    font-size: 14px;
    line-height: 1.6;
    position: relative;
    overflow: hidden;
    /* Hide overflow to enforce page breaks */
    box-sizing: border-box;
}

@media print {
    body * {
        visibility: hidden;
    }

    .resume-preview-container,
    .resume-preview-container * {
        visibility: visible;
    }

    .resume-preview-container {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        margin: 0;
        padding: 0;
        background: white;
    }

    .resume-page {
        box-shadow: none;
        margin: 0;
        page-break-after: always;
        break-after: page;
        height: 297mm;
        /* Ensure full height print */
    }

    /* Hide the last page break if unnecessary, but usually we just want pages to flow naturally */
}

/* Dynamic Item Styles */
.dynamic-item {
    background: rgba(255, 255, 255, 0.5);
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 15px;
    border: 1px solid #eee;
    position: relative;
}

.remove-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    color: #ff4757;
    border: none;
    cursor: pointer;
}

/* --- Templates --- */

/* Global Preview Item Styles (for compatibility) */
.preview-item-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 5px;
}

.header-info {
    display: flex;
    flex-direction: column;
}

.item-subtitle {
    font-style: italic;
    color: #555;
}

.item-desc {
    white-space: pre-wrap;
}

/* Classic Template (Refine to match Image) */
/* --- Templates --- */

/* Classic Template (Refine to match Image) */
.classic {
    font-family: 'Georgia', 'Times New Roman', serif;
    color: #333;
    line-height: 1.6;
}

.resume-preview-container.classic {
    padding: 40px 50px;
}

/* Classic Header Grid Layout */
.resume-preview-container.classic .resume-header {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "info photo"
        "contact photo";
    border-bottom: 3px solid #000;
    padding-bottom: 20px;
    margin-bottom: 25px;
    align-items: center;
    column-gap: 20px;
}

.resume-preview-container.classic .header-left {
    grid-area: info;
    text-align: left;
}

.resume-preview-container.classic .header-right {
    grid-area: photo;
    justify-self: end;
    margin: 0;
}

.resume-preview-container.classic .contact-info {
    grid-area: contact;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    text-align: left;
    margin-top: 10px;
    font-size: 0.9em;
    font-weight: 500;
}

.resume-preview-container.classic .contact-info span {
    margin: 0;
    /* Override general styles */
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.resume-preview-container.classic h1 {
    font-size: 3rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #000;
    margin: 0;
    line-height: 1.1;
    font-family: 'Arial', sans-serif;
    /* Strong sans-serif for name */
}

.resume-preview-container.classic .job-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #555;
    margin: 5px 0 0 0;
    font-family: 'Arial', sans-serif;
}

/* Classic Section Headers */
.resume-preview-container.classic .resume-section h3 {
    font-size: 1.2rem;
    font-weight: 900;
    text-transform: uppercase;
    border-bottom: 3px solid #000;
    padding-bottom: 5px;
    margin-top: 20px;
    margin-bottom: 15px;
    color: #000;
    font-family: 'Arial', sans-serif;
    letter-spacing: 0.5px;
}

/* Classic List Items */
.resume-preview-container.classic .preview-item {
    margin-bottom: 15px;
}

.resume-preview-container.classic .preview-item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 5px;
}

.resume-preview-container.classic .header-info {
    display: block;
    /* Stack title and company */
}

.resume-preview-container.classic .item-title {
    display: block;
    font-size: 1.1rem;
    font-weight: 800;
    font-family: 'Arial', sans-serif;
    /* Headings in Sans */
    color: #222;
}

.resume-preview-container.classic .item-subtitle {
    display: block;
    font-weight: 700;
    font-style: normal;
    color: #444;
    font-family: 'Georgia', serif;
    font-size: 1rem;
    margin-top: 2px;
}

.resume-preview-container.classic .item-date {
    font-weight: 500;
    font-size: 0.95rem;
    color: #666;
    text-align: right;
    min-width: 120px;
}

.resume-preview-container.classic .item-meta {
    font-size: 0.9rem;
    color: #666;
    margin-top: 2px;
}

.resume-preview-container.classic p {
    text-align: justify;
    line-height: 1.5;
    color: #333;
}

/* Skills Grid for Classic */
.resume-preview-container.classic .skills-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.resume-preview-container.classic .skills-list span {
    background: transparent;
    padding: 0;
    margin: 0;
    font-weight: 500;
    font-family: 'Georgia', serif;
    color: #333;
}

.resume-preview-container.classic .skills-list span::after {
    content: ", ";
}

.resume-preview-container.classic .skills-list span:last-child::after {
    content: "";
}

/* Modern Template */
.resume-preview-container.modern {
    font-family: 'Roboto', sans-serif;
    display: block;
    padding: 0;
}

.resume-preview-container.modern header {
    background: #2c3e50;
    color: white;
    padding: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.resume-preview-container.modern header h1 {
    font-size: 32px;
    margin: 0;
}

.resume-preview-container.modern header .job-title {
    color: #bdc3c7;
    font-size: 18px;
    margin: 5px 0 0 0;
}

.resume-preview-container.modern header .contact-info {
    text-align: right;
    font-size: 12px;
}

.resume-preview-container.modern header .contact-info span {
    display: block;
    color: #bdc3c7;
    margin: 2px 0;
}

.resume-preview-container.modern .resume-section {
    padding: 0 40px;
    margin-bottom: 20px;
}

.resume-preview-container.modern h3 {
    color: #2c3e50;
    border-bottom: 2px solid #3498db;
    display: inline-block;
    margin-bottom: 15px;
}

/* Minimal Template */
.resume-preview-container.minimal .resume-page {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    padding: 50px;
}


.resume-preview-container.minimal header {
    text-align: left;
    margin-bottom: 40px;
    border-bottom: none;
}

.resume-preview-container.minimal h1 {
    font-size: 36px;
    font-weight: 300;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.resume-preview-container.minimal .job-title {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #999;
}

.resume-preview-container.minimal .contact-info {
    margin-top: 15px;
    font-size: 12px;
    color: #888;
}

.resume-preview-container.minimal h3 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #999;
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
}

.resume-preview-container.minimal .preview-item-header {
    font-weight: normal;
}





/* --- Home Page & Modal Styles --- */

.home-page .navbar {
    position: relative;
    /* Integrate into flow for home page or keep sticky */
}

/* Hero Section */
.hero-section {
    text-align: center;
    padding: 80px 20px;
    color: white;
}

.hero-content h1 {
    font-size: 3rem;
    margin-bottom: 20px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.hero-content p {
    font-size: 1.2rem;
    margin-bottom: 25px;
    opacity: 0.9;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.hero-stats {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.hero-stats span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--secondary-color);
}

.hero-stats i {
    font-size: 1.2rem;
}

.btn-lg {
    padding: 15px 40px;
    font-size: 1.2rem;
    border-radius: 50px;
}

/* Services Section */
.services-section {
    padding: 60px 20px;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.services-section h2 {
    color: white;
    margin-bottom: 40px;
    font-size: 2.5rem;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.service-card {
    padding: 40px;
    text-align: center;
    transition: transform 0.3s;
    background: rgba(255, 255, 255, 0.9);
    /* Slightly more opaque */
}

.service-card:hover {
    transform: translateY(-10px);
}

.icon-box {
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 20px;
}

.service-card h3 {
    margin-bottom: 15px;
    color: #333;
}

/* Workflow Section */
.workflow-section {
    padding: 80px 20px;
    background: rgba(255, 255, 255, 0.05);
    margin-top: 40px;
}

.workflow-container {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.workflow-section h2 {
    color: white;
    margin-bottom: 60px;
    font-size: 2.5rem;
}

.workflow-grid {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    position: relative;
}

.workflow-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 250px;
}

.step-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--primary-color);
    margin-bottom: 20px;
    position: relative;
    transition: transform 0.3s, background 0.3s;
}

.workflow-step:hover .step-icon {
    transform: scale(1.1);
    background: rgba(255, 255, 255, 1);
}

.step-number {
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--primary-color);
    color: white;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    font-size: 0.9rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.workflow-step h3 {
    color: white;
    margin-bottom: 10px;
    font-size: 1.25rem;
}

.workflow-step p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
    line-height: 1.5;
}

.workflow-connector {
    display: flex;
    align-items: center;
    height: 80px;
    color: rgba(255, 255, 255, 0.3);
    font-size: 1.5rem;
}

/* FAQ Section */
.faq-section {
    padding: 80px 20px;
    background: transparent;
}

.faq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: 30px;
    margin-top: 40px;
    text-align: left;
}

.faq-card {
    padding: 30px;
}

.faq-card h3 {
    color: var(--primary-color);
    margin-bottom: 15px;
    font-size: 1.2rem;
}

.faq-card p {
    color: #555;
    line-height: 1.6;
}

/* Footer Section */
.footer-section {
    padding: 80px 20px 40px;
    background: rgba(0, 0, 0, 0.2);
    color: white;
    margin-top: 80px;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    gap: 60px;
    margin-bottom: 60px;
    text-align: left;
}

.footer-brand {
    flex: 1;
    max-width: 400px;
}

.footer-brand .logo {
    margin-bottom: 20px;
}

.footer-brand p {
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
}

.footer-links {
    display: flex;
    gap: 80px;
}

.footer-col h4 {
    margin-bottom: 25px;
    font-size: 1.1rem;
    color: white;
}

.footer-col a {
    display: block;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    margin-bottom: 12px;
    transition: color 0.3s;
}

.footer-col a:hover {
    color: var(--secondary-color);
}

.footer-bottom {
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.5);
}

/* Mobile Responsiveness for New Sections */
@media (max-width: 900px) {
    .workflow-grid {
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }

    .workflow-connector {
        transform: rotate(90deg);
        height: auto;
        margin: -20px 0;
    }

    .faq-grid {
        grid-template-columns: 1fr;
    }

    .footer-content {
        flex-direction: column;
        gap: 40px;
    }

    .footer-links {
        gap: 40px;
        flex-wrap: wrap;
    }
}


/* Resume Photo & Header Layout */
.resume-header {
    display: flex;
    flex-wrap: wrap;
    /* Allows contact info to move to next line */
    align-items: center;
    margin-bottom: 20px;
}

.header-left {
    flex: 1;
    text-align: left;
    /* Ensure text aligns left next to photo */
}

/* Photo Container (Now on Left based on HTML order) */
.header-right {
    flex-shrink: 0;
    margin-right: 25px;
    /* Space between photo and name */
    margin-left: 0;
}

.resume-photo {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: block;
}

.resume-photo.hidden {
    display: none;
}

/* Contact Info: Allow wrapping for small widths */
.contact-info {
    width: 100%;
    margin-top: 15px;
    display: flex;
    flex-wrap: wrap;
    /* Allow wrapping if exceeding width */
    gap: 15px;
    font-size: 0.9rem;
    color: #555;
    align-items: center;
    white-space: normal;
    /* Allow text to wrap if needed */
}

.contact-info span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.contact-info span.hidden {
    display: none !important;
}

/* Ensure classic template respects this layout */
.classic .resume-header {
    display: flex;
    /* Override block if set */
}

.service-card p {
    margin-bottom: 20px;
    color: #666;
}

/* Loading Overlay */
#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    /* Dimmed background */
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(5px);
}

#loading-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.loading-popup {
    background: white;
    padding: 30px 50px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    animation: popupIn 0.3s ease-out;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #2563eb;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 15px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes popupIn {
    from {
        transform: scale(0.9);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 1;
    transition: opacity 0.3s;
}

.modal-overlay.hidden {
    display: none;
    opacity: 0;
    pointer-events: none;
}

.modal-content {
    position: relative;
    width: 100%;
    max-width: 450px;
    padding: 0;
    /* Let auth-box handle padding */
    transform: scale(1);
    transition: transform 0.3s;
}

.modal-overlay.hidden .modal-content {
    transform: scale(0.9);
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    color: #666;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 10;
}

/* Custom Section Styles */
.custom-title-input {
    font-size: 1.1rem;
    color: var(--primary-color);
    background: transparent;
    transition: border-bottom 0.3s;
}

.custom-title-input:focus {
    border-bottom-color: var(--primary-color) !important;
}

/* Cropper Modal Specifics */
#cropper-modal .modal-content {
    background: white;
    /* Ensure visible against dark overlay if glass fails */
}

.cropper-container {
    width: 100%;
}

/* Dashboard Photo Preview */
.dashboard-photo-preview {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    margin-top: 10px;
    border: 2px solid var(--primary-color);
    display: block;
}

.dashboard-photo-preview.hidden {
    display: none;
}

/* Templates Page Styles */

.templates-container {
    display: flex;
    gap: 20px;
    padding: 0 20px 20px 20px;
    height: calc(100vh - 100px);
}

.template-sidebar {
    width: 300px;
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex-shrink: 0;
}

.template-sidebar h3 {
    color: var(--primary-color);
    margin-bottom: 10px;
    font-size: 1.2rem;
}

.template-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.template-item {
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 8px;
    padding: 10px;
    transition: all 0.2s;
    background: rgba(255, 255, 255, 0.5);
}

.template-item:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.8);
}

.template-item.active {
    border-color: var(--primary-color);
    background: white;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.template-thumbnail {
    width: 100%;
    height: 150px;
    background: #eee;
    margin-bottom: 10px;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
}

/* Thumbnail Visuals (Abstract representations) */
.classic-thumb {
    background: white;
    border: 1px solid #ddd;
}

.classic-thumb::after {
    content: "";
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 2px;
    background: #333;
    box-shadow: 0 5px 0 0 #ccc, 0 20px 0 0 #ccc, 0 30px 0 0 #ccc, 0 40px 0 0 #ccc;
}

.classic-thumb::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 40%;
    height: 4px;
    background: #333;
}

.modern-thumb {
    background: #f4f7f6;
}

.modern-thumb::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 30px;
    background: #2c3e50;
}

.modern-thumb::after {
    content: "";
    position: absolute;
    top: 40px;
    left: 10px;
    width: 30%;
    height: 2px;
    background: #3498db;
    box-shadow: 0 10px 0 0 #bdc3c7, 0 20px 0 0 #bdc3c7;
}

.minimal-thumb {
    background: white;
}

.minimal-thumb::before {
    content: "";
    position: absolute;
    top: 20px;
    left: 20px;
    width: 80%;
    height: 4px;
    background: #333;
}

.minimal-thumb::after {
    content: "";
    position: absolute;
    top: 35px;
    left: 20px;
    width: 60%;
    height: 2px;
    background: #999;
}



.template-item p {
    text-align: center;
    font-weight: 500;
}

.preview-area {
    flex: 1;
    overflow-y: auto;
    background: #555;
    padding: 30px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
}

/* User Avatar & Dropdown */
.user-avatar-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.2s;
}

.user-avatar-btn:hover {
    transform: scale(1.1);
}

.user-avatar-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-dropdown {
    position: absolute;
    right: 0;
    top: 120%;
    width: 150px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 1000;
}

.user-dropdown.glass {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.user-dropdown.hidden {
    display: none !important;
}

.dropdown-item:hover {
    background: rgba(0, 0, 0, 0.05);
}

/* Profile Page Styles */
.profile-avatar-large {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #f0f0f0;
    margin: 0 auto 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3rem;
    /* Icon size */
    color: #ccc;
    overflow: hidden;
}

.profile-avatar-large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- Executive Template --- */
.resume-preview-container.executive .resume-page {
    font-family: 'Times New Roman', Times, serif;
    /* Authoritative serif */
    padding: 0;
    display: flex;
    flex-direction: column;
    color: #333;
    border-top: 10px solid #c0a16b;
    /* Gold accent */
}

/* Header */
.resume-preview-container.executive .resume-header {
    background: #1a1a1a;
    color: #fff;
    padding: 40px 50px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    border-bottom: 5px solid #c0a16b;
}

.resume-preview-container.executive .header-left {
    text-align: left;
}

.resume-preview-container.executive h1 {
    font-size: 3rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
    color: #c0a16b;
    /* Gold name */
}

.resume-preview-container.executive .job-title {
    font-size: 1.2rem;
    color: #ddd;
    font-style: italic;
}

.resume-preview-container.executive .header-right {
    margin-left: 30px;
}

.resume-preview-container.executive .resume-photo {
    border: 3px solid #c0a16b;
    width: 130px;
    height: 130px;
}

/* Contact Info Bar underneath header */
.resume-preview-container.executive .contact-info {
    background: #f4f4f4;
    padding: 15px 50px;
    display: flex;
    justify-content: center;
    gap: 30px;
    border-bottom: 1px solid #ddd;
    color: #555;
    font-size: 0.95rem;
}

.resume-preview-container.executive .contact-info span i {
    color: #c0a16b;
    margin-right: 5px;
}

/* Content Body */
.resume-preview-container.executive #movable-preview-sections {
    padding: 40px 50px;
}

.resume-preview-container.executive .resume-section {
    margin-bottom: 30px;
}

.resume-preview-container.executive h3 {
    font-size: 1.4rem;
    border-bottom: 2px solid #333;
    padding-bottom: 5px;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #1a1a1a;
}

/* Item Styling */
.resume-preview-container.executive .item-title {
    font-weight: bold;
    font-size: 1.2rem;
    color: #1a1a1a;
}

.resume-preview-container.executive .item-subtitle {
    font-style: italic;
    font-size: 1.1rem;
    color: #555;
}

.resume-preview-container.executive .item-date {
    font-weight: bold;
    color: #333;
}

/* Skills */
.resume-preview-container.executive .skills-list span {
    background: #eee;
    padding: 5px 10px;
    border-radius: 3px;
    border: 1px solid #ddd;
    font-weight: bold;
    color: #555;
}


/* --- Creative Template --- */
/* --- Creative Template --- */
.resume-preview-container.creative .resume-page {
    font-family: 'Poppins', sans-serif;
    display: grid;
    grid-template-columns: 280px 1fr;
    /* Fixed Sidebar */
    padding: 0;
    overflow: visible;
    /* For circle styling */
    position: relative;
    /* Ensure background stretches */
    background: #fff;
    min-height: 297mm;
    height: 297mm;
    /* Fixed height A4 */
}

/* Left Sidebar */
.resume-preview-container.creative .resume-page::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    /* Stretch to bottom */
    width: 280px;
    background: #222;
    z-index: 0;
    height: auto;
    min-height: 100%;
}

/* Sidebar Content Wrapper */
.resume-preview-container.creative .header-right,
/* Photo */
.resume-preview-container.creative .contact-info,
.resume-preview-container.creative .resume-section[data-section="skills"],
.resume-preview-container.creative .resume-section[data-section="languages"],
.resume-preview-container.creative .resume-section[data-section="summary"] {
    grid-column: 1;
    z-index: 1;
    /* Above background */
    padding: 0 30px;
    color: #eee;
}

/* Main Content Wrapper */
.resume-preview-container.creative .header-left,
/* Name/Title */
.resume-preview-container.creative .resume-section[data-section="experience"],
.resume-preview-container.creative .resume-section[data-section="education"] {
    grid-column: 2;
    padding: 0 40px;
    color: #333;
}

/* --- Header Layout --- */
.resume-preview-container.creative .resume-header {
    display: contents;
    /* Allow children to place themselves in grid */
}

/* Photo */
.resume-preview-container.creative .header-right {
    padding-top: 50px;
    text-align: center;
}

.resume-preview-container.creative .resume-photo {
    width: 160px;
    height: 160px;
    border: 8px solid #333;
    /* Darker border blending with bg */
    border-radius: 50%;
}

/* Name */
.resume-preview-container.creative .header-left {
    grid-column: 2;
    padding-top: 60px;
    padding-bottom: 40px;
    background: #ff6b6b;
    /* Creative Accent Banner */
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-bottom-left-radius: 50px;
    /* Stylized corner */
}

.resume-preview-container.creative h1 {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1;
    margin: 0;
}

.resume-preview-container.creative .job-title {
    font-size: 1.5rem;
    font-weight: 300;
    opacity: 0.9;
    margin-top: 10px;
}

/* Contact (Sidebar) */
.resume-preview-container.creative .contact-info {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.resume-preview-container.creative .contact-info span {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 0.9rem;
}

.resume-preview-container.creative .contact-info i {
    width: 30px;
    height: 30px;
    background: #ff6b6b;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.8rem;
}

/* Sidebar Section Headers */
.resume-preview-container.creative .resume-section[data-section="summary"] h3,
.resume-preview-container.creative .resume-section[data-section="skills"] h3,
.resume-preview-container.creative .resume-section[data-section="languages"] h3 {
    color: #ff6b6b;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 1rem;
    margin-top: 40px;
    margin-bottom: 20px;
    border-bottom: 1px solid #444;
    padding-bottom: 10px;
}

/* Sidebar Text */
.resume-preview-container.creative p,
.resume-preview-container.creative .skills-list span {
    color: #aaa;
    line-height: 1.6;
}

.resume-preview-container.creative .skills-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.resume-preview-container.creative .skills-list span {
    background: #333;
    padding: 5px 12px;
    border-radius: 20px;
    color: #fff;
    font-size: 0.85rem;
}

/* Main Content Sections */
.resume-preview-container.creative #movable-preview-sections {
    display: contents;
    /* Let children align to grid */
}

.resume-preview-container.creative .resume-section[data-section="experience"] h3,
.resume-preview-container.creative .resume-section[data-section="education"] h3 {
    color: #222;
    font-size: 1.8rem;
    font-weight: 900;
    margin-top: 50px;
    margin-bottom: 30px;
    position: relative;
    display: inline-block;
}

.resume-preview-container.creative .resume-section[data-section="experience"] h3::after,
.resume-preview-container.creative .resume-section[data-section="education"] h3::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 50%;
    height: 5px;
    background: #ff6b6b;
}

.resume-preview-container.creative .preview-item {
    padding-left: 20px;
    border-left: 3px solid #eee;
    margin-bottom: 40px;
}

.resume-preview-container.creative .item-title {
    font-size: 1.4rem;
    font-weight: 700;
}

.resume-preview-container.creative .item-time {
    color: #ff6b6b;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 5px;
    display: block;
}

/* --- Tech Template --- */
.resume-preview-container.tech {
    background: #1e1e1e;
    color: #00ff41;
    /* CRT Green */
    font-family: 'Courier New', Courier, monospace;
    padding: 30px;
    border: 2px solid #333;
}

.resume-preview-container.tech header {
    border-bottom: 2px dashed #00ff41;
    padding-bottom: 20px;
    margin-bottom: 30px;
}

.resume-preview-container.tech h1 {
    text-shadow: 0 0 5px #00ff41;
}

.resume-preview-container.tech .job-title::before {
    content: "> ";
}

.resume-preview-container.tech h3 {
    color: #fff;
    background: #333;
    display: inline-block;
    padding: 2px 8px;
    margin-top: 20px;
}

.resume-preview-container.tech .resume-photo {
    filter: grayscale(100%) contrast(1.2);
    border: 2px solid #00ff41;
}

.resume-preview-container.tech a {
    color: #fff;
    text-decoration: underline;
}

/* --- Swiss Template --- */
.resume-preview-container.swiss {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    padding: 50px;
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 40px;
}

.resume-preview-container.swiss .resume-header {
    grid-column: 1 / -1;
    border-bottom: 4px solid #e74c3c;
    /* Swiss Red */
    padding-bottom: 20px;
    margin-bottom: 30px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.resume-preview-container.swiss h1 {
    font-size: 4rem;
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: -2px;
}

.resume-preview-container.swiss h3 {
    font-weight: 900;
    font-size: 1rem;
    text-transform: uppercase;
    color: #e74c3c;
    margin-top: 0;
}

.resume-preview-container.swiss .sidebar-content {
    grid-column: 1;
}

.resume-preview-container.swiss .main-content {
    grid-column: 2;
}

/* Move sections using grid area manipulation if possible, 
   but since HTML structure is fixed, we rely on flex/grid parent if we wrapped them.
   Since we didn't wrap them, we use nth-child or general flow.
   Swiss is hard to do perfectly without specific wrapper divs, 
   so we keep it simple: Bold headers, high contrast.
*/
.resume-preview-container.swiss {
    display: block;
    /* Fallback to standard flow for simpler implementing of 'Swiss style' via typography */
}

.resume-preview-container.swiss h1 {
    margin-bottom: 30px;
}


/* --- Timeline Template --- */
.resume-preview-container.timeline {
    font-family: 'Roboto', sans-serif;
    padding: 40px;
    background: #fdfdfd;
}

.resume-preview-container.timeline .resume-header {
    text-align: center;
    margin-bottom: 50px;
}

.resume-preview-container.timeline .resume-photo {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    margin: 0 auto 20px;
    border: 4px solid #3498db;
}

.resume-preview-container.timeline #preview-education-section,
.resume-preview-container.timeline #preview-experience-section {
    position: relative;
    padding-left: 30px;
    border-left: 2px solid #3498db;
    margin-left: 10px;
}

.resume-preview-container.timeline .preview-item {
    position: relative;
    margin-bottom: 30px;
}

.resume-preview-container.timeline .preview-item::before {
    content: "";
    position: absolute;
    left: -37px;
    /* Adjust based on padding + border used above */
    top: 5px;
    width: 12px;
    height: 12px;
    background: white;
    border: 2px solid #3498db;
    border-radius: 50%;
}


/* --- Elegant Template --- */
.resume-preview-container.elegant {
    font-family: 'Garamond', serif;
    background: #fdfbf7;
    /* Warm paper */
    color: #444;
    text-align: center;
}

.resume-preview-container.elegant .resume-header {
    border-bottom: 1px double #ccc;
    padding-bottom: 30px;
    margin-bottom: 30px;
}

.resume-preview-container.elegant h1 {
    font-weight: normal;
    font-size: 3.5rem;
    color: #222;
}

.resume-preview-container.elegant .job-title {
    font-style: italic;
    font-family: 'Georgia', serif;
    color: #888;
}

.resume-preview-container.elegant .resume-photo {
    border-radius: 50%;
    opacity: 0.9;
}

.resume-preview-container.elegant h3 {
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 2px;
    border-bottom: 1px solid #ddd;
    display: inline-block;
    padding-bottom: 5px;
    margin-top: 40px;
}

.resume-preview-container.elegant p {
    text-align: center;
    max-width: 600px;
    margin: 10px auto;
}

.resume-preview-container.elegant .preview-item-header {
    justify-content: center;
    flex-direction: column;
}


/* --- Corporate Template --- */
.resume-preview-container.corporate {
    font-family: 'Arial', sans-serif;
    display: grid;
    grid-template-columns: 70% 30%;
    padding: 0;
}

.resume-preview-container.corporate .resume-header {
    grid-column: 1 / -1;
    background: #2c3e50;
    color: white;
    padding: 30px 50px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.resume-preview-container.corporate h1 {
    font-size: 2.5rem;
    margin: 0;
}

.resume-preview-container.corporate .header-left {
    flex: 1;
}

.resume-preview-container.corporate .contact-info {
    color: #bdc3c7;
}

.resume-preview-container.corporate #movable-preview-sections {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    padding: 30px 50px;
    background: #fff;
    gap: 30px;
}

.resume-preview-container.corporate .resume-section[data-section="experience"],
.resume-preview-container.corporate .resume-section[data-section="education"] {
    grid-column: 1;
}

.resume-preview-container.corporate .resume-section[data-section="skills"],
.resume-preview-container.corporate .resume-section[data-section="languages"],
.resume-preview-container.corporate .resume-section[data-section="summary"] {
    grid-column: 2;
    background: #f9f9f9;
    padding: 20px;
    border-radius: 5px;
}

/* --- Startup Template --- */
.resume-preview-container.startup {
    font-family: 'Quicksand', 'Segoe UI', sans-serif;
    /* Rounded friendly font */
    background: #f0f3f4;
    padding: 0;
    display: grid;
    grid-template-columns: 250px 1fr;
    grid-template-rows: auto 1fr;
}

.resume-preview-container.startup .resume-header {
    grid-column: 1 / -1;
    background: #00b894;
    /* Teal */
    color: white;
    padding: 30px;
    text-align: center;
}

.resume-preview-container.startup .resume-photo {
    width: 120px;
    height: 120px;
    border-radius: 20px;
    /* Squircle */
    border: 4px solid white;
    margin-bottom: 10px;
}

.resume-preview-container.startup h1 {
    font-size: 2.5rem;
    font-weight: 700;
}

.resume-preview-container.startup .job-title {
    background: white;
    color: #00b894;
    padding: 5px 15px;
    border-radius: 20px;
    display: inline-block;
    font-weight: bold;
    margin-top: 10px;
}

.resume-preview-container.startup .sidebar-content {
    background: #dfe6e9;
    padding: 20px;
    grid-row: 2;
    grid-column: 1;
}

.resume-preview-container.startup .main-content {
    grid-row: 2;
    grid-column: 2;
    padding: 30px;
    background: white;
}

/* Simulate Sidebar/Main for existing structure using flex order or grid areas if possible */
/* Since HTML is fixed, we create visual separation via styling */
.resume-preview-container.startup {
    display: flex;
    flex-direction: column;
    padding: 30px;
    background: #fff;
    border-top: 20px solid #00b894;
}

.resume-preview-container.startup h3 {
    color: #00b894;
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.resume-preview-container.startup .preview-item {
    background: #f9f9f9;
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 20px;
    border-left: 5px solid #00b894;
}


/* --- Academic Template --- */
.resume-preview-container.academic {
    font-family: 'Times New Roman', serif;
    padding: 50px;
    line-height: 1.4;
    color: #000;
}

.resume-preview-container.academic header {
    text-align: center;
    border-bottom: 1px solid #000;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.resume-preview-container.academic h1 {
    font-size: 24pt;
    font-weight: bold;
    text-transform: uppercase;
}

.resume-preview-container.academic .job-title {
    font-size: 14pt;
    font-style: italic;
}

.resume-preview-container.academic .contact-info {
    justify-content: center;
    font-size: 11pt;
}

.resume-preview-container.academic .resume-photo {
    display: none;
    /* Academic CVs usually text only */
}

.resume-preview-container.academic h3 {
    text-transform: uppercase;
    font-weight: bold;
    font-size: 12pt;
    margin-top: 20px;
    margin-bottom: 10px;
    border-bottom: 1px solid #000;
}

.resume-preview-container.academic .preview-item-header {
    display: flex;
    justify-content: space-between;
}

.resume-preview-container.academic .item-title {
    font-weight: bold;
}

.resume-preview-container.academic .item-subtitle {
    font-style: italic;
}

/* --- Compact Template --- */
.resume-preview-container.compact {
    font-family: 'Arial Narrow', sans-serif;
    font-size: 12px;
    padding: 20px;
}

.resume-preview-container.compact .resume-header {
    display: flex;
    border-bottom: 2px solid #555;
    padding-bottom: 10px;
    margin-bottom: 15px;
    align-items: center;
}

.resume-preview-container.compact .resume-photo {
    width: 80px;
    height: 80px;
    margin-right: 20px;
}

.resume-preview-container.compact h1 {
    font-size: 1.8rem;
    margin: 0;
}

.resume-preview-container.compact .job-title {
    font-size: 1rem;
    color: #666;
}

.resume-preview-container.compact h3 {
    background: #eee;
    padding: 3px 10px;
    margin-bottom: 10px;
    font-size: 1rem;
    font-weight: bold;
    border-left: 3px solid #555;
}

.resume-preview-container.compact .resume-section {
    margin-bottom: 15px;
}

.resume-preview-container.compact .preview-item {
    margin-bottom: 10px;
}

.resume-preview-container.compact p {
    margin-top: 2px;
}

/* --- Bold Template --- */
.resume-preview-container.bold {
    font-family: 'Impact', 'Arial Black', sans-serif;
    padding: 40px;
    background: #f4f4f4;
}

.resume-preview-container.bold h1 {
    font-size: 4rem;
    text-transform: uppercase;
    color: #2d3436;
    line-height: 0.9;
    margin-bottom: 10px;
}

.resume-preview-container.bold .job-title {
    background: #2d3436;
    color: white;
    padding: 10px 20px;
    display: inline-block;
    font-family: 'Arial', sans-serif;
    font-weight: bold;
    font-size: 1.2rem;
    text-transform: uppercase;
}

.resume-preview-container.bold h3 {
    font-size: 2rem;
    text-transform: uppercase;
    color: #b2bec3;
    border-bottom: 4px solid #2d3436;
    margin-top: 40px;
}

.resume-preview-container.bold .resume-photo {
    display: none;
    /* Text focus */
}

/* --- Geometric Template --- */
.resume-preview-container.geometric {
    font-family: 'Open Sans', sans-serif;
    padding: 0;
    overflow: hidden;
    /* This might clip content on print, checking alternatives... For A4 pages it's usually handled by PDF gen, but for geometric shapes it's safer to keep overflow hidden on wrapper IF we want shapes cut off. However, we want text to flow. Let's remove overflow hidden and handle shapes with z-index or background containment if possible. Actually, HTML2PDF snapshots the DOM, so overflow:hidden usually crops. Let's start with visible. */
    overflow: visible;
    background: white;
    position: relative;
    border: 10px solid #6c5ce7;
    height: auto;
    min-height: 297mm;
}

/* Geometric shapes background */
.resume-preview-container.geometric::before {
    content: "";
    position: absolute;
    top: -50px;
    right: -50px;
    width: 200px;
    height: 200px;
    background: #a29bfe;
    transform: rotate(45deg);
    z-index: 0;
}

.resume-preview-container.geometric::after {
    content: "";
    position: absolute;
    bottom: -50px;
    left: -50px;
    width: 150px;
    height: 150px;
    background: #6c5ce7;
    border-radius: 50%;
    z-index: 0;
}

.resume-preview-container.geometric .resume-header {
    background: #6c5ce7;
    padding: 40px;
    color: white;
    clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
    position: relative;
    z-index: 1;
}

.resume-preview-container.geometric h1 {
    font-size: 2.5rem;
    font-weight: 300;
}

.resume-preview-container.geometric .job-title {
    font-weight: 700;
    letter-spacing: 2px;
}

.resume-preview-container.geometric #movable-preview-sections {
    padding: 40px;
    z-index: 1;
    position: relative;
}

.resume-preview-container.geometric h3 {
    color: #6c5ce7;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.resume-preview-container.geometric .resume-photo {
    border-radius: 5px;
    transform: rotate(-3deg);
    border: 3px solid white;
}

/* --- Ruby Template --- */
.resume-preview-container.ruby {
    font-family: 'Merriweather', serif;
    background: #fffafa;
    /* Light pinkish white */
    color: #4a0404;
    padding: 40px;
    border-top: 5px solid #a91b49;
    border-bottom: 5px solid #a91b49;
    height: auto;
    min-height: 297mm;
}

.resume-preview-container.ruby h1,
.resume-preview-container.ruby h3,
.resume-preview-container.ruby .job-title {
    color: #a91b49;
}

.resume-preview-container.ruby h1 {
    font-size: 2.5rem;
    border-bottom: 1px solid #a91b49;
    padding-bottom: 10px;
}

.resume-preview-container.ruby h3 {
    text-transform: uppercase;
    font-size: 1.1rem;
    letter-spacing: 1px;
    margin-top: 25px;
    margin-bottom: 15px;
    border-left: 5px solid #a91b49;
    padding-left: 10px;
}

/* --- Emerald Template --- */
.resume-preview-container.emerald {
    font-family: 'Lato', sans-serif;
    color: #27ae60;
    padding: 30px;
    background: #f0fdf5;
}

.resume-preview-container.emerald .resume-header {
    background: #2ecc71;
    color: white;
    padding: 30px;
    border-radius: 10px;
    text-align: center;
}

.resume-preview-container.emerald h1 {
    margin: 0;
    color: white;
}

.resume-preview-container.emerald .job-title {
    color: #e8f8f5;
}

.resume-preview-container.emerald .contact-info {
    justify-content: center;
    color: white;
}

.resume-preview-container.emerald h3 {
    color: #27ae60;
    border-bottom: 2px solid #2ecc71;
    padding-bottom: 5px;
    margin-top: 20px;
}

.resume-preview-container.emerald .preview-item {
    background: white;
    padding: 15px;
    border-bottom: 1px solid #dcdcdc;
    margin-bottom: 10px;
}


/* --- Slate Template --- */
.resume-preview-container.slate {
    font-family: 'Verdana', sans-serif;
    color: #2c3e50;
    background: #ecf0f1;
    padding: 40px;
}

.resume-preview-container.slate h1 {
    color: #34495e;
    text-shadow: 1px 1px 2px #bdc3c7;
}

.resume-preview-container.slate .resume-section {
    background: #bdc3c7;
    padding: 20px;
    margin-bottom: 15px;
    border-radius: 4px;
}

.resume-preview-container.slate h3 {
    color: #2c3e50;
    text-decoration: underline;
}

/* --- Horizon Template --- */
.resume-preview-container.horizon {
    font-family: 'Tahoma', sans-serif;
    padding: 0;
}

.resume-preview-container.horizon .resume-header {
    background: #34495e;
    color: white;
    padding: 40px 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.resume-preview-container.horizon h1 {
    color: white;
    margin: 0;
}

.resume-preview-container.horizon .header-right {
    order: 2;
    /* Photo on right */
}

.resume-preview-container.horizon .resume-photo {
    border-radius: 0;
    /* Square photo */
    border: 5px solid rgba(255, 255, 255, 0.2);
}

.resume-preview-container.horizon #movable-preview-sections {
    padding: 40px 60px;
}

.resume-preview-container.horizon .resume-section {
    margin-bottom: 40px;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
}

.resume-preview-container.horizon h3 {
    color: #34495e;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.5rem;
}


/* --- Sky Template --- */
.resume-preview-container.sky {
    font-family: 'Nunito', sans-serif;
    background: linear-gradient(to bottom, #e0f7fa 0%, #ffffff 100%);
    padding: 40px;
}

.resume-preview-container.sky .resume-header {
    text-align: center;
    margin-bottom: 40px;
}

.resume-preview-container.sky .resume-photo {
    border-radius: 50%;
    border: 5px solid #81d4fa;
    width: 150px;
    height: 150px;
}

.resume-preview-container.sky h1 {
    color: #0288d1;
    font-weight: 300;
    font-size: 3rem;
}

.resume-preview-container.sky h3 {
    color: #03a9f4;
    text-align: center;
    border-top: 1px solid #b3e5fc;
    border-bottom: 1px solid #b3e5fc;
    padding: 10px;
    margin: 30px 0 20px;
    text-transform: lowercase;
    font-variant: small-caps;
    font-size: 1.5rem;
}

.resume-preview-container.sky .preview-item {
    text-align: left;
    /* Keep content left-aligned even if headers are centered */
    background: rgba(255, 255, 255, 0.6);
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
}

/* Print & PDF Page Break Handling */
@media print {

    .resume-section,
    .preview-item,
    .resume-header,
    h3 {
        page-break-inside: avoid;
    }
}

/* Specific Page Break Helpers for html2pdf */
.resume-section,
.preview-item {
    page-break-inside: avoid;
    break-inside: avoid;
}