/* --- Global Variables & Reset --- */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Roboto:wght@300;400;500;700&display=swap');

:root {
    /* Modern Color Palette */
    --primary: #6366f1; /* Indigo 500 */
    --primary-dark: #4f46e5; /* Indigo 600 */
    --secondary: #ec4899; /* Pink 500 */
    --accent: #8b5cf6; /* Violet 500 */
    
    --dark: #0f172a; /* Slate 900 */
    --text-color: #334155; /* Slate 700 */
    --light: #f8fafc; /* Slate 50 */
    --white: #ffffff;
    
    --gradient-main: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
    --gradient-hero: linear-gradient(135deg, #e0e7ff 0%, #fce7f3 100%);
    
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-glow: 0 0 15px rgba(99, 102, 241, 0.5);
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; scroll-behavior: smooth; }

body { background: var(--light); color: var(--text-color); line-height: 1.6; overflow-x: hidden; }

/* --- Animations --- */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

@keyframes gradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* --- Navigation --- */
.navbar { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 0.8rem 5%; 
    background: rgba(255, 255, 255, 0.9); 
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-sm); 
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: all 0.3s ease;
}

.logo { display: flex; align-items: center; text-decoration: none; }
.logo-img { 
    height: 80px; 
    width: auto; 
    border-radius: 8px; 
    transition: transform 0.3s ease; 
}
.logo-img:hover { transform: scale(1.05) rotate(-2deg); }

.nav-links { list-style: none; display: flex; gap: 20px; align-items: center; }
.nav-links li { display: flex; align-items: center; }
.nav-links a { 
    text-decoration: none; 
    color: var(--dark); 
    font-weight: 500; 
    transition: color 0.3s ease;
    position: relative;
}

.nav-links a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 0;
    background: var(--gradient-main);
    transition: width 0.3s ease;
}

.nav-links a:hover::after { width: 100%; }
.nav-links a:hover { color: var(--primary); }

/* Developer Thumbnail in Nav */
.dev-info {
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
}

.dev-thumbnail {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--primary);
    transition: all 0.3s ease;
}

.dev-tooltip {
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--dark);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 0.75rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.dev-info:hover .dev-tooltip {
    opacity: 1;
    visibility: visible;
}

.dev-info:hover .dev-thumbnail {
    transform: scale(1.1);
    box-shadow: var(--shadow-glow);
}

.btn-primary { 
    background: var(--gradient-main); 
    color: white; 
    padding: 0.7rem 1.5rem; 
    border-radius: 50px; 
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-md);
}
.btn-primary:hover { 
    transform: translateY(-2px); 
    box-shadow: var(--shadow-lg); 
    filter: brightness(1.1);
}

/* --- Hero Section --- */
.hero { 
    padding: 8rem 5% 6rem; 
    background: var(--gradient-hero); 
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(15,23,42,0.08) 0%, rgba(0,0,0,0) 70%);
    animation: gradientMove 15s ease infinite;
    z-index: 0;
}

.hero-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3rem;
    align-items: center;
    animation: fadeInUp 1s ease-out;
}

.hero-content { position: relative; z-index: 1; }

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(15, 23, 42, 0.08);
    color: var(--dark);
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.hero h1 { 
    font-size: 3.2rem; 
    font-weight: 800;
    margin-bottom: 1.5rem; 
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.2;
}

.hero p { 
    font-size: 1.25rem; 
    color: var(--text-color); 
    margin-bottom: 2.5rem; 
    max-width: 700px;
}

.hero-cta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.9rem 2rem;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.2);
    color: var(--dark);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.6);
}

.btn-ghost:hover {
    transform: translateY(-2px);
    border-color: var(--dark);
}

.hero-meta {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    color: var(--dark);
    font-size: 0.95rem;
    font-weight: 600;
}

.meta-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.hero-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 420px;
}

.resume-mock {
    width: min(420px, 90%);
    background: white;
    border-radius: 24px;
    padding: 2rem;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
    border: 1px solid rgba(15, 23, 42, 0.08);
    position: relative;
}

.mock-header {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-bottom: 2rem;
}

.mock-avatar {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: linear-gradient(135deg, #0f172a 0%, #334155 100%);
}

.mock-title { flex: 1; }
.mock-line {
    height: 10px;
    border-radius: 999px;
    background: #e2e8f0;
    margin-bottom: 10px;
}
.mock-line.lg { height: 14px; width: 70%; background: #cbd5f5; }
.mock-line.md { width: 55%; }
.mock-line.sm { width: 85%; opacity: 0.8; }

.mock-section { margin-bottom: 1.5rem; }
.mock-section.grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.mock-chip {
    height: 28px;
    border-radius: 999px;
    background: #eef2ff;
}

.floating-card {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 10px;
    background: white;
    border-radius: 14px;
    padding: 0.75rem 1rem;
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(15, 23, 42, 0.08);
    font-size: 0.9rem;
    color: var(--dark);
    animation: float 4s ease-in-out infinite;
}

.floating-card i { color: var(--primary-dark); font-size: 1.1rem; }
.floating-card span { color: #64748b; font-weight: 500; display: block; font-size: 0.8rem; }
.floating-card p { margin: 0; font-weight: 700; }

.card-a { top: 10%; right: 5%; }
.card-b { bottom: 12%; left: 2%; animation-delay: 0.8s; }

.btn-large { 
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--dark); 
    color: white; 
    padding: 1rem 2.5rem; 
    text-decoration: none; 
    border-radius: 50px; 
    font-size: 1.1rem; 
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-md);
}

.btn-large:hover { 
    transform: translateY(-3px) scale(1.02); 
    box-shadow: var(--shadow-lg); 
    background: #1e293b;
}

.btn-large i { transition: transform 0.3s ease; }
.btn-large:hover i { transform: translateX(5px); }

/* --- Features Section --- */
.features { padding: 6rem 5%; text-align: center; background: white; }
.features h2 { 
    font-size: 2.5rem; 
    margin-bottom: 3rem; 
    color: var(--dark); 
    font-weight: 700;
}

.section-lead {
    max-width: 700px;
    margin: 0 auto 2.5rem;
    color: #64748b;
}

.feature-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: 2.5rem; 
    margin-top: 2rem; 
}

.feature-card { 
    padding: 2.5rem; 
    border: 1px solid #e2e8f0; 
    border-radius: 20px; 
    background: white;
    transition: all 0.3s ease;
    opacity: 0;
    animation: fadeInUp 0.8s ease-out forwards;
}

.feature-card:nth-child(1) { animation-delay: 0.2s; }
.feature-card:nth-child(2) { animation-delay: 0.4s; }
.feature-card:nth-child(3) { animation-delay: 0.6s; }

.feature-card:hover { 
    transform: translateY(-10px); 
    box-shadow: var(--shadow-lg); 
    border-color: transparent;
}

.feature-card i { 
    font-size: 3rem; 
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 1.5rem; 
    animation: float 3s ease-in-out infinite;
}

.feature-card h3 { font-size: 1.5rem; margin-bottom: 1rem; color: var(--dark); }
.feature-card p { color: var(--text-color); }

/* --- Steps Section --- */
.steps {
    padding: 6rem 5%;
    background: #f8fafc;
}

.steps-inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3rem;
    align-items: center;
}

.steps-copy h2 {
    font-size: 2.4rem;
    color: var(--dark);
    margin-bottom: 1rem;
}

.steps-copy p {
    color: #64748b;
    margin-bottom: 1.5rem;
}

.steps-list {
    list-style: none;
    margin-bottom: 2rem;
}

.steps-list li {
    margin-bottom: 0.9rem;
    padding-left: 26px;
    position: relative;
    color: var(--text-color);
    font-weight: 500;
}

.steps-list li::before {
    content: '>';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--primary-dark);
    font-weight: 700;
}

.steps-panel {
    display: grid;
    gap: 1.2rem;
}

.steps-card {
    background: white;
    padding: 1.5rem;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.steps-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.step-number {
    display: inline-block;
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: 0.6rem;
}

.steps-card h3 {
    margin-bottom: 0.5rem;
    color: var(--dark);
}

.steps-card p {
    color: #64748b;
}

/* --- CTA Section --- */
.cta {
    padding: 4.5rem 5%;
    background: var(--dark);
    color: white;
}

.cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}

.cta h2 {
    font-size: 2.3rem;
    margin-bottom: 0.5rem;
}

.cta p { color: #cbd5e1; }

/* --- Footer --- */
.site-footer { 
    background: var(--light); 
    border-top: 1px solid #e2e8f0; 
}

.footer-inner {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    padding: 3rem 5% 2rem;
    align-items: center;
    flex-wrap: wrap;
}

.footer-brand {
    max-width: 420px;
}

.footer-brand p {
    margin-top: 0.8rem;
    color: #64748b;
}

.footer-meta {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    align-items: flex-start;
}

.footer-label {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #94a3b8;
    font-weight: 600;
}

.dev-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    transition: transform 0.3s ease;
    color: var(--dark);
}

.dev-link:hover {
    transform: translateY(-2px);
}

.dev-thumbnail-footer {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: var(--shadow-sm);
}

.footer-bottom {
    border-top: 1px solid #e2e8f0;
    padding: 1.2rem 5% 2rem;
    text-align: center;
    color: #94a3b8;
    font-size: 0.9rem;
}

/* --- CV Maker UI Styles --- */
.maker-body { height: 100vh; display: flex; flex-direction: column; overflow: hidden; background: #f1f5f9; }

.maker-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 0.4rem 2rem; 
    background: var(--dark); 
    color: white; 
    box-shadow: var(--shadow-md);
    z-index: 10;
}

.maker-header .logo { color: white; }

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

.actions label { color: #cbd5e1; font-size: 0.9rem; }

#template-selector {
    padding: 0.5rem;
    border-radius: 6px;
    border: 1px solid #475569;
    background: #1e293b;
    color: white;
    font-family: 'Poppins', sans-serif;
}

.btn-download { 
    background: #10b981; 
    color: white; 
    border: none; 
    padding: 0.6rem 1.2rem; 
    cursor: pointer; 
    border-radius: 50px; 
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.btn-download:hover { background: #059669; transform: translateY(-1px); }

.btn-add {
    background: #e0e7ff;
    color: var(--primary);
    border: 1px dashed var(--primary);
    padding: 0.6rem 1rem;
    width: 100%;
    margin-top: 1rem;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-add:hover {
    background: #c7d2fe;
    transform: translateY(-1px);
}

/* Mobile Preview Toggle Button (Hidden on Desktop) */
.btn-mobile-toggle { display: none; }

.main-container { display: flex; flex: 1; height: 100%; overflow: hidden; }

/* Left Side: Editor */
.editor-panel { 
    width: 35%; 
    background: white; 
    padding: 2.5rem; 
    overflow-y: auto; 
    border-right: 1px solid #e2e8f0; 
    box-shadow: 2px 0 10px rgba(0,0,0,0.05);
    z-index: 5;
}

/* Custom Scrollbar for Editor */
.editor-panel::-webkit-scrollbar { width: 8px; }
.editor-panel::-webkit-scrollbar-track { background: #f1f5f9; }
.editor-panel::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.editor-panel::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

.editor-panel h3 { 
    margin-top: 2rem; 
    margin-bottom: 1rem; 
    color: var(--primary); 
    font-size: 1.1rem; 
    font-weight: 600;
    border-bottom: 2px solid #e0e7ff; 
    padding-bottom: 8px; 
    display: flex;
    align-items: center;
    gap: 10px;
}

.form-group { margin-bottom: 1.2rem; }
.form-group label { display: block; font-size: 0.9rem; color: var(--text-color); margin-bottom: 6px; font-weight: 500; }
.form-group input, .form-group textarea { 
    width: 100%; 
    padding: 10px 12px; 
    border: 2px solid #e2e8f0; 
    border-radius: 8px; 
    font-size: 0.95rem; 
    transition: all 0.3s ease;
    font-family: 'Poppins', sans-serif;
}

.form-group input:focus, .form-group textarea:focus { 
    border-color: var(--primary); 
    outline: none; 
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

/* Right Side: Preview */
.preview-panel { 
    width: 65%; 
    background: #cbd5e1; 
    padding: 3rem; 
    display: flex; 
    justify-content: center; 
    overflow-y: auto; 
    background-image: radial-gradient(#94a3b8 1px, transparent 1px);
    background-size: 20px 20px;
}

/* --- The A4 Paper --- */
#cv-template {
    width: 210mm;
    min-height: 297mm;
    background: white;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    padding: 2.5rem;
    color: #333;
    transition: all 0.3s ease;
    transform: scale(0.9); /* Default slightly zoomed out */
    transform-origin: top center;
}

/* ---------------------------
   TEMPLATE STYLES
   --------------------------- */

/* Common Profile Pic Styles */
.profile-pic {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 50%;
    margin-right: 20px;
    border: 3px solid white;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* 1. MODERN Template */
.template-modern { font-family: 'Poppins', sans-serif; }
.template-modern .cv-header { 
    border-bottom: 3px solid var(--primary); 
    padding-bottom: 1.5rem; 
    margin-bottom: 2rem; 
    display: flex;
    align-items: center;
}
.template-modern .header-text { flex: 1; }
.template-modern h1 { color: #1e293b; text-transform: uppercase; font-size: 2.4rem; font-weight: 700; letter-spacing: -1px; }
.template-modern h2 { color: var(--primary); font-weight: 500; font-size: 1.3rem; margin-bottom: 0.8rem; }
.template-modern .contact-info { font-size: 0.9rem; color: #64748b; }
.template-modern .section-title { color: #1e293b; text-transform: uppercase; font-size: 1.1rem; font-weight: 700; border-left: 5px solid var(--primary); padding-left: 15px; margin-bottom: 15px; margin-top: 25px; background: #f8fafc; padding-top: 5px; padding-bottom: 5px; }
.template-modern .job-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; }
.template-modern h4 { font-size: 1.1rem; font-weight: 600; color: #334155; }
.template-modern .job-date { font-size: 0.9rem; color: #94a3b8; font-style: italic; }
.template-modern .company-name { font-weight: 500; color: var(--primary); margin-bottom: 5px; }
.template-modern .edu-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; }
.template-modern .edu-date { font-size: 0.9rem; color: #94a3b8; font-style: italic; }

/* 2. SIMPLE Template */
.template-simple { font-family: 'Georgia', serif; text-align: left; }
.template-simple .cv-header { 
    text-align: center; 
    border-bottom: 1px solid #ccc; 
    padding-bottom: 1.5rem; 
    margin-bottom: 2rem; 
    display: flex;
    flex-direction: column;
    align-items: center;
}
.template-simple .profile-pic { margin-right: 0; margin-bottom: 15px; width: 100px; height: 100px; }
.template-simple h1 { color: #000; font-size: 2.2rem; }
.template-simple .section-title { font-weight: bold; border-bottom: 1px solid #eee; margin-top: 2rem; font-size: 1.2rem; color: #333; padding-bottom: 5px; letter-spacing: 1px; }

/* 3. PROFESSIONAL Template */
.template-professional { font-family: 'Arial', sans-serif; background: #fff; }
.template-professional .cv-header { 
    background: #1e293b; 
    color: white; 
    padding: 2.5rem; 
    margin: -2.5rem -2.5rem 2rem -2.5rem; 
    display: flex;
    align-items: center;
}
.template-professional .profile-pic { border-color: #334155; }
.template-professional h1 { color: white; margin: 0; font-size: 2.5rem; }
.template-professional h2 { color: #cbd5e1; font-size: 1.1rem; margin-top: 8px; font-weight: 400; }
.template-professional .contact-info { color: #94a3b8; font-size: 0.9rem; margin-top: 15px; }
.template-professional .section-title { color: #1e293b; border-bottom: 2px solid #1e293b; padding-bottom: 8px; margin-bottom: 20px; margin-top: 30px; font-size: 1.2rem; font-weight: 700; }

/* 4. CREATIVE Template */
.template-creative { font-family: 'Trebuchet MS', sans-serif; display: grid; grid-template-columns: 32% 68%; grid-template-rows: auto 1fr; gap: 0; }
.template-creative .cv-header { 
    grid-column: 1 / -1; 
    background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%); 
    color: white; 
    padding: 2.5rem; 
    margin: -2.5rem -2.5rem 0 -2.5rem; 
    text-align: center; 
    display: flex;
    flex-direction: column;
    align-items: center;
}
.template-creative .profile-pic { margin-right: 0; margin-bottom: 15px; border: 4px solid rgba(255,255,255,0.3); }
.template-creative h1 { color: white; font-size: 2.5rem; letter-spacing: 1px; }
.template-creative h2 { color: #fce7f3; margin-top: 5px; }
.template-creative .contact-info { color: white; margin-top: 15px; font-size: 0.95rem; }
.template-creative .cv-body { margin-top: 2.5rem; }
.template-creative .section-title { color: #ec4899; font-size: 1.4rem; margin-top: 25px; border-bottom: 2px dotted #ec4899; padding-bottom: 5px; }

/* 5. MINIMAL Template */
.template-minimal { font-family: 'Verdana', sans-serif; color: #444; }
.template-minimal .cv-header { 
    margin-bottom: 3.5rem; 
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row-reverse; /* Pic on right */
}
.template-minimal .profile-pic { margin-right: 0; margin-left: 20px; border-radius: 0; }
.template-minimal h1 { font-weight: normal; font-size: 2.8rem; letter-spacing: 3px; color: #000; text-transform: uppercase; }
.template-minimal h2 { text-transform: uppercase; font-size: 0.85rem; letter-spacing: 4px; color: #666; margin-top: 10px; }
.template-minimal .contact-info { font-size: 0.8rem; margin-top: 20px; color: #888; }
.template-minimal .section-title { font-weight: normal; text-transform: uppercase; letter-spacing: 3px; font-size: 0.9rem; margin-top: 30px; margin-bottom: 20px; color: #000; display: inline-block; border-bottom: 1px solid black; padding-bottom: 3px; }

/* Mobile Responsiveness */
@media (max-width: 768px) {
    /* Navbar Stacking */
    .navbar { flex-direction: column; gap: 0.6rem; padding: 0.6rem 1rem 0.9rem; }
    .logo { justify-content: center; width: 100%; }
    .logo-img { height: 64px; }
    .nav-links { 
        gap: 10px; 
        width: 100%; 
        justify-content: center; 
        flex-wrap: wrap; 
    }
    .nav-links li { width: 100%; justify-content: center; }
    .nav-links a { width: 100%; text-align: center; }
    .nav-links .btn-primary { width: 100%; justify-content: center; }
    
    /* Hero Adjustments */
    .logo-img { height: 90px; }
    .hero { padding: 3.5rem 1rem 3rem; }
    .hero-inner { grid-template-columns: 1fr; text-align: center; }
    .hero h1 { font-size: 2.2rem; }
    .hero p { font-size: 1rem; }
    .hero-cta { justify-content: center; }
    .btn-large { padding: 0.8rem 1.5rem; width: 100%; justify-content: center; }
    .btn-ghost { width: 100%; }
    .hero-meta { justify-content: center; }
    .hero-visual { min-height: 340px; }
    .card-a { top: 0; right: 0; }
    .card-b { bottom: 0; left: 0; }

    /* Features Grid */
    .features { padding: 3rem 1rem; }
    .feature-grid { grid-template-columns: 1fr; gap: 1.5rem; }

    .steps { padding: 3rem 1rem; }
    .steps-inner { grid-template-columns: 1fr; }
    .steps-copy h2 { font-size: 2rem; }

    .cta { padding: 3rem 1rem; text-align: center; }
    .cta-inner { justify-content: center; }

    .footer-inner { padding: 2.5rem 1rem 1.5rem; text-align: center; justify-content: center; }
    .footer-brand { max-width: 100%; }
    .footer-meta { align-items: center; }
    .footer-bottom { padding: 1rem 1rem 1.5rem; }
    
    /* Maker Header Stacking */
    .maker-header { flex-direction: column; gap: 1rem; padding: 1rem; align-items: stretch; }
    .maker-header .logo { justify-content: center; }
    .actions { flex-direction: column; gap: 10px; width: 100%; }
    .actions label { display: none; } /* Hide label to save space */
    #template-selector { width: 100%; }
    
    /* Toggle Button Styles */
    .btn-mobile-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        background: var(--accent);
        color: white;
        border: none;
        padding: 0.6rem 1.2rem;
        border-radius: 50px;
        font-weight: 600;
        cursor: pointer;
        width: 100%;
        transition: all 0.3s ease;
    }
    
    .btn-download { width: 100%; justify-content: center; margin-left: 0; }

    /* Main Container & Panels */
    .main-container { flex-direction: column; overflow-y: scroll; height: auto; }
    .editor-panel, .preview-panel { width: 100%; height: auto; padding: 1.5rem; }
    .editor-panel { border-right: none; border-bottom: 1px solid #e2e8f0; }
    
    /* --- MOBILE VIEW TOGGLE LOGIC --- */
    
    /* Default: Show Editor, Hide Preview */
    .editor-panel { display: block; }
    .preview-panel { display: none; }

    /* Active Preview: Hide Editor, Show Preview */
    .mobile-preview-active .editor-panel { display: none; }
    .mobile-preview-active .preview-panel { 
        display: flex; 
        background: #cbd5e1; 
        overflow-x: hidden;
        min-height: 100vh; /* Full height for preview */
        align-items: flex-start;
    }

    .mobile-preview-active #cv-template {
        transform: scale(0.45); 
        transform-origin: top center;
        margin-bottom: -140mm;
    }
}

/* 6. ELEGANT Template */
.template-elegant { font-family: 'Playfair Display', serif; color: #2c3e50; line-height: 1.8; }
.template-elegant .cv-header { 
    text-align: center; 
    border-bottom: double 4px #d4af37; 
    padding-bottom: 2rem; 
    margin-bottom: 2rem; 
    display: flex;
    flex-direction: column;
    align-items: center;
}
.template-elegant .profile-pic { 
    width: 110px; 
    height: 110px; 
    margin: 0 auto 15px auto; 
    border: 2px solid #d4af37; 
    padding: 3px; 
    border-radius: 50%;
}
.template-elegant h1 { 
    font-family: 'Playfair Display', serif; 
    font-size: 2.8rem; 
    color: #1a1a1a; 
    margin-bottom: 5px; 
    font-weight: 700; 
}
.template-elegant h2 { 
    font-family: 'Roboto', sans-serif; 
    font-size: 1rem; 
    color: #d4af37; 
    text-transform: uppercase; 
    letter-spacing: 3px; 
    margin-bottom: 15px; 
    font-weight: 500;
}
.template-elegant .contact-info { 
    font-family: 'Roboto', sans-serif; 
    font-style: italic; 
    color: #555; 
    font-size: 0.95rem;
}
.template-elegant .section-title { 
    font-family: 'Playfair Display', serif; 
    font-size: 1.6rem; 
    color: #2c3e50; 
    margin-top: 2.5rem; 
    margin-bottom: 1.5rem; 
    padding-bottom: 5px; 
    display: flex; 
    align-items: center; 
    font-style: italic;
}
.template-elegant .section-title::after { 
    content: ''; 
    flex: 1; 
    height: 1px; 
    background: #d4af37; 
    margin-left: 20px; 
}
.template-elegant .job-header, .template-elegant .edu-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: baseline;
    margin-bottom: 5px; 
}
.template-elegant h4 { 
    font-size: 1.2rem; 
    font-weight: 700; 
    color: #000;
}
.template-elegant .job-date, .template-elegant .edu-date { 
    font-family: 'Roboto', sans-serif;
    font-style: italic; 
    color: #7f8c8d; 
    font-size: 0.9rem;
}
.template-elegant .company-name { font-weight: bold; color: #555; margin-bottom: 8px; }

/* 7. COMPACT Template (2 Columns) */
.template-compact { font-family: 'Roboto', sans-serif; font-size: 0.9rem; color: #333; }
.template-compact .cv-header { 
    display: flex; 
    align-items: center; 
    border-bottom: 4px solid #1e293b; 
    padding-bottom: 20px; 
    margin-bottom: 20px; 
}
.template-compact .profile-pic { 
    width: 90px; 
    height: 90px; 
    margin-right: 20px; 
    border-radius: 8px; 
    border: none; 
    box-shadow: none;
}
.template-compact .header-text { flex: 1; }
.template-compact h1 { 
    font-size: 2.2rem; 
    font-weight: 900; 
    line-height: 1; 
    text-transform: uppercase; 
    color: #1e293b; 
}
.template-compact h2 { 
    font-size: 1.1rem; 
    font-weight: 500; 
    color: #64748b; 
    margin-top: 5px; 
}
.template-compact .contact-info { display: none; } /* Hide default contact info in header, move to sidebar */

/* We use CSS Grid to rearrange sections */
.template-compact .cv-body { 
    display: grid; 
    grid-template-columns: 32% 64%; 
    gap: 4%; 
}

/* Common Section Styles */
.template-compact .section-title { 
    background: #1e293b; 
    color: white; 
    padding: 5px 10px; 
    text-transform: uppercase; 
    font-weight: 700; 
    font-size: 0.9rem; 
    margin-bottom: 15px; 
    margin-top: 0; 
    border-radius: 4px;
}

/* Specific Section Placement */
/* 1. Profile/Summary -> Top Full Width or Left Sidebar? Let's put Summary in Left Sidebar top */
.template-compact .cv-section:nth-of-type(1) { grid-column: 1; grid-row: 1; } /* Summary */
.template-compact .cv-section:nth-of-type(1) .section-title { background: #334155; }

/* 2. Experience -> Right Col Top */
.template-compact .cv-section:nth-of-type(2) { grid-column: 2; grid-row: 1 / span 4; } /* Main Content */

/* 3. Education -> Left Col below Summary */
.template-compact .cv-section:nth-of-type(3) { grid-column: 1; grid-row: 2; } 

/* 4. Certs -> Left Col below Edu */
.template-compact .cv-section:nth-of-type(4) { grid-column: 1; grid-row: 3; }

/* 5. Skills -> Left Col below Certs */
.template-compact .cv-section:nth-of-type(5) { grid-column: 1; grid-row: 4; }

/* Compact styles for inner elements */
.template-compact h4 { font-size: 1rem; font-weight: 700; margin-bottom: 2px; }
.template-compact .company-name { font-size: 0.9rem; font-style: italic; margin-bottom: 5px; }
.template-compact p { font-size: 0.85rem; line-height: 1.5; }
.template-compact .job-entry, .template-compact .edu-entry { margin-bottom: 15px; }

/* Inject Contact Info into Sidebar (Hack via pseudo-element if possible, but JS is better. 
   Since we can't easily move DOM with CSS only without flex order hacks that break semantics.
   We will just style the header's contact info to appear in header for now, simplifying.) 
*/
.template-compact .cv-header .contact-info { display: block; font-size: 0.8rem; margin-top: 10px; color: #555; }
.template-compact .cv-body { grid-template-rows: auto auto auto auto; } /* Reset rows */


/* 8. BANNER Template */
.template-banner { font-family: 'Poppins', sans-serif; }
.template-banner .cv-header { 
    background: #2563eb; 
    color: white; 
    padding: 3rem 2.5rem 5rem 2.5rem; /* Extra bottom padding for overlap */
    margin: -2.5rem -2.5rem 0 -2.5rem; 
    text-align: center;
    position: relative;
    clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);
}
.template-banner .profile-pic { 
    width: 130px; 
    height: 130px; 
    border: 5px solid white; 
    position: absolute;
    bottom: -65px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    z-index: 10;
}
.template-banner .header-text { margin-bottom: 20px; }
.template-banner h1 { font-size: 2.5rem; font-weight: 700; }
.template-banner h2 { color: #bfdbfe; font-size: 1.2rem; }
.template-banner .contact-info { color: #fff; opacity: 0.9; margin-top: 10px; }

.template-banner .cv-body { margin-top: 5rem; text-align: center; } /* Push body down */

.template-banner .cv-section { 
    background: #fff; 
    border-radius: 12px; 
    padding: 1.5rem; 
    margin-bottom: 1.5rem; 
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    border: 1px solid #f1f5f9;
    text-align: left;
}
.template-banner .section-title { 
    color: #2563eb; 
    font-size: 1.2rem; 
    font-weight: 700; 
    margin-bottom: 1rem; 
    display: flex; 
    align-items: center; 
    gap: 10px;
}
.template-banner .section-title::before {
    content: '';
    width: 8px;
    height: 8px;
    background: #2563eb;
    border-radius: 50%;
    display: inline-block;
}

/* 9. CORPORATE Template */
.template-corporate { font-family: 'Roboto', sans-serif; display: grid; grid-template-columns: 30% 70%; min-height: 297mm; }
.template-corporate .cv-header {
    grid-column: 1 / -1;
    background: #0f172a;
    color: white;
    padding: 2.5rem;
    display: flex;
    align-items: center;
    gap: 20px;
}
.template-corporate .profile-pic {
    width: 100px;
    height: 100px;
    border: 3px solid #3b82f6;
    margin-right: 0;
}
.template-corporate .header-text h1 { font-size: 2.5rem; text-transform: uppercase; letter-spacing: 1px; }
.template-corporate .header-text h2 { color: #3b82f6; font-size: 1.1rem; font-weight: 400; }
.template-corporate .contact-info { display: none; } /* Hidden in header, move to sidebar logic if possible, or just style inline for now */
/* Since we can't easily move DOM elements, we'll keep contact info in header for this simple grid version, but style it to fit */
.template-corporate .cv-header .contact-info { display: flex; gap: 15px; font-size: 0.8rem; color: #cbd5e1; margin-top: 10px; display: block; }

.template-corporate .cv-body {
    display: contents; /* Allows children to participate in the main grid */
}

/* Sidebar Area (simulated by nth-child targeting) */
/* We'll make specific sections stick to the left or right column */
.template-corporate .cv-section { padding: 1.5rem; }

/* Left Column: Contact(if separate), Skills, Certs */
.template-corporate .cv-section:nth-of-type(5), /* Skills */
.template-corporate .cv-section:nth-of-type(4)  /* Certs */
{
    grid-column: 1;
    background: #f1f5f9;
    border-right: 1px solid #e2e8f0;
}

/* Right Column: Profile, Experience, Education */
.template-corporate .cv-section:nth-of-type(1), /* Profile */
.template-corporate .cv-section:nth-of-type(2), /* Experience */
.template-corporate .cv-section:nth-of-type(3)  /* Education */
{
    grid-column: 2;
}

.template-corporate .section-title {
    font-size: 1.1rem;
    text-transform: uppercase;
    color: #1e293b;
    border-bottom: 2px solid #3b82f6;
    padding-bottom: 5px;
    margin-bottom: 15px;
    font-weight: 700;
}

/* 10. TECH Template */
.template-tech { font-family: 'Courier New', Courier, monospace; color: #333; }
.template-tech .cv-header {
    border-bottom: 1px dashed #333;
    padding-bottom: 1.5rem;
    margin-bottom: 2rem;
}
.template-tech h1 { font-size: 2rem; color: #16a34a; } /* Matrix Green */
.template-tech h1::before { content: '> '; color: #333; }
.template-tech h2 { color: #555; font-size: 1rem; margin-top: 5px; }
.template-tech .contact-info { font-size: 0.85rem; margin-top: 10px; font-family: 'Courier New', monospace; }

.template-tech .section-title {
    background: #eee;
    padding: 5px 10px;
    font-weight: bold;
    margin-top: 25px;
    margin-bottom: 15px;
    border-left: 5px solid #16a34a;
}
.template-tech .job-entry, .template-tech .edu-entry {
    margin-left: 15px;
    border-left: 1px solid #ddd;
    padding-left: 15px;
    margin-bottom: 20px;
}
.template-tech h4 { color: #000; font-weight: bold; }
.template-tech .job-date { background: #f0fdf4; padding: 2px 5px; font-size: 0.8rem; color: #15803d; }

/* 11. TIMELINE Template */
.template-timeline { font-family: 'Poppins', sans-serif; }
.template-timeline .cv-header { text-align: center; margin-bottom: 3rem; }
.template-timeline .profile-pic { display: block; margin: 0 auto 15px; width: 120px; height: 120px; border-radius: 20px; }
.template-timeline h1 { color: #374151; }
.template-timeline h2 { color: #f59e0b; text-transform: uppercase; font-size: 0.9rem; letter-spacing: 2px; }
.template-timeline .section-title {
    text-align: center;
    color: #111;
    font-size: 1.3rem;
    margin-bottom: 2rem;
    margin-top: 2rem;
    position: relative;
    display: inline-block;
    width: 100%;
}
.template-timeline .section-title::before,
.template-timeline .section-title::after {
    content: '';
    display: inline-block;
    width: 30px;
    height: 2px;
    background: #f59e0b;
    vertical-align: middle;
    margin: 0 10px;
}

/* Timeline Logic for Experience/Edu */
.template-timeline .job-entry, .template-timeline .edu-entry {
    position: relative;
    padding-left: 30px;
    margin-bottom: 25px;
    border-left: 2px solid #e5e7eb;
    margin-left: 10px;
}
.template-timeline .job-entry::before, .template-timeline .edu-entry::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #f59e0b;
    border: 2px solid white;
}
.template-timeline h4 { color: #374151; }
.template-timeline .job-date { color: #9ca3af; font-size: 0.85rem; display: block; margin-bottom: 5px; }