:root {
            --primary: #2563eb;
            --primary-dark: #1d4ed8;
            --bg: #f8fafc;
            --sidebar-bg: #ffffff;
            --card-bg: #ffffff;
            --text: #1e293b;
            --text-muted: #64748b;
            --border: #e2e8f0;
            --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
            --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
            --a4-width: 210mm;
            --a4-height: 297mm;
            --photo-width: 100px;
            --photo-height: 120px;
        }

        * { box-sizing: border-box; margin: 0; padding: 0; }
        body { 
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; 
            background: linear-gradient(135deg, var(--bg) 0%, #e2e8f0 100%);
            color: var(--text); 
            min-height: 100vh;
            display: flex;
        }

        .sidebar {
            width: 380px; 
            background: var(--sidebar-bg);
            border-right: 1px solid var(--border);
            display: flex;
            flex-direction: column;
            overflow-y: auto;
            padding: 24px;
            box-shadow: var(--shadow-md);
            max-height: 100vh;
        }

        .header-controls { 
            display: flex; 
            gap: 12px; 
            align-items: center; 
            margin-bottom: 24px; 
            flex-wrap: wrap;
        }
        
        button, select, input, textarea {
            padding: 10px 14px;
            border: 1px solid var(--border);
            border-radius: 8px;
            font-family: inherit;
            font-size: 14px;
            transition: all 0.2s ease;
        }
        
        select, input, textarea {
            background: #fafbfc;
            color: var(--text);
        }
        
        input:focus, textarea:focus, select:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgb(37 99 235 / 0.1);
        }
        
        button { 
            cursor: pointer; 
            background: var(--primary); 
            color: white; 
            border: none; 
            font-weight: 500;
            transition: all 0.2s ease;
        }
        
        button:hover:not(:disabled) { 
            background: var(--primary-dark);
            transform: translateY(-1px);
        }
        
        button.secondary { 
            background: #f1f5f9; 
            color: var(--text); 
            border: 1px solid var(--border); 
        }
        
        button.danger { 
            background: #ef4444; 
            padding: 6px 12px; 
            font-size: 13px;
        }
        
        button.danger:hover { background: #dc2626; }
        
        .section { 
            margin-bottom: 28px; 
            padding-bottom: 20px;
            border-bottom: 1px solid var(--border);
        }
        
        .section:last-child { border-bottom: none; margin-bottom: 0; }
        
        .section h3 { 
            margin-bottom: 16px; 
            font-size: 15px; 
            font-weight: 600;
            color: var(--text);
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .image-controls { 
            background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
            padding: 20px;
            border-radius: 12px;
            margin-bottom: 24px;
            border: 1px solid var(--border);
            box-shadow: var(--shadow-sm);
        }
        #image-input{
            display: flex;
            flex-direction: column;
            gap: 12px;
            width: 100%;
        }
        #size-display
        {
            font-size: 8px;
            color: var(--text-muted);
        }
        .control-row { 
            display: flex; 
            gap: 12px; 
            align-items: center; 
            margin-bottom: 12px; 
        }
        
        .control-label {
            font-weight: 500;
            color: var(--text-muted);
            min-width: 70px;
            font-size: 14px;
        }
        
        #image-preview { 
            width: var(--photo-width); 
            height: var(--photo-height); 
            object-fit: cover; 
            display: none; 
            margin-bottom: 12px; 
            border: 2px solid var(--primary);
            border-radius: 8px;
            box-shadow: var(--shadow-md);
        }

        .preview-container {
            flex: 1;
            background: #f1f5f9;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            padding: 40px;
            min-height: 100vh;
            overflow-y: auto;
        }

        #resume-preview {
            width: var(--a4-width);
            min-height: var(--a4-height);
            background: white;
            box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 10px 10px -5px rgb(0 0 0 / 0.04);
            padding: 48px 40px;
            color: var(--text);
            position: relative;
        }

        /* Photo Styles */
        .photo-top-left { float: left; margin: 0 24px 20px 0; }
        .photo-top-center { display: block; margin: 0 auto 24px; text-align: center; }
        .photo-top-right { float: right; margin: 0 0 20px 24px; }
        
        .frame-rectangle { border-radius: 8px; }
        .frame-circle { border-radius: 50%; }
        .frame-ellipse { border-radius: 50% 50% 40% 40%; }
        .frame-square { border-radius: 12px; width: var(--photo-width); height: var(--photo-width); }
        
        .photo-top-left, .photo-top-center, .photo-top-right {
            width: var(--photo-width);
            height: var(--photo-height);
            object-fit: cover;
            box-shadow: var(--shadow-md);
        }

        /* Template Styles */
        .template-default {
            font-size: 14px;
            line-height: 1.6;
        }
        .template-default h1 { 
            font-size: 32px; 
            font-weight: 700; 
            color: var(--primary);
            margin-bottom: 8px;
            letter-spacing: -0.02em;
        }
        .template-default .job-title { 
            font-size: 18px; 
            color: var(--text-muted);
            font-weight: 500;
            margin-bottom: 16px;
        }
        .template-default .contact-info { 
            font-size: 13px; 
            color: var(--text-muted);
            margin-bottom: 32px;
            display: flex;
            gap: 24px;
            flex-wrap: wrap;
        }
        .template-default h2 { 
            font-size: 18px; 
            font-weight: 600;
            color: var(--primary);
            margin: 32px 0 16px 0;
            padding-bottom: 8px;
            border-bottom: 2px solid var(--primary);
            letter-spacing: -0.01em;
        }
        .template-default h2:first-child { margin-top: 0; }
        .template-default .item { 
            margin-bottom: 16px; 
            padding: 12px;
            background: #f8fafc;
            border-radius: 8px;
            border-left: 4px solid var(--primary);
        }
        .template-default .item-header { 
            font-weight: 600; 
            font-size: 15px;
            color: var(--text);
            margin-bottom: 4px;
        }
        .template-default .item-sub { 
            font-size: 14px; 
            color: var(--text-muted);
        }

        /* Minimal Template */
        .template-minimal h1 { 
            font-size: 28px; 
            color: #000;
            margin-bottom: 4px;
            font-weight: 400;
        }
        .template-minimal .job-title { 
            font-size: 16px; 
            color: #666;
            margin-bottom: 24px;
            font-weight: 400;
        }
        .template-minimal .contact-info { 
            font-size: 12px; 
            color: #888;
            margin-bottom: 36px;
        }
        .template-minimal h2 { 
            font-size: 16px; 
            color: #000;
            margin: 28px 0 12px 0;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
        .template-minimal .item { 
            margin-bottom: 12px;
            padding-left: 0;
        }
        .template-minimal .item-header { 
            font-weight: 500;
            font-size: 14px;
        }
        .template-minimal .item-sub { 
            font-size: 13px; 
            color: #666;
        }

        /* Classic Template */
        .template-classic {
            font-family: Georgia, serif;
        }
        .template-classic h1 { 
            font-size: 30px; 
            color: #1a1a1a;
            margin-bottom: 8px;
            font-weight: 400;
        }
        .template-classic .job-title { 
            font-size: 17px; 
            color: #444;
            margin-bottom: 20px;
            font-style: italic;
        }
        .template-classic .contact-info { 
            font-size: 12px; 
            color: #666;
            margin-bottom: 32px;
            border-top: 1px solid #eee;
            border-bottom: 1px solid #eee;
            padding: 12px 0;
        }
        .template-classic h2 { 
            font-size: 17px; 
            color: #1a1a1a;
            margin: 28px 0 12px 0;
            font-weight: 400;
        }
        .template-classic h2:before {
            content: "— ";
            color: var(--primary);
        }
        .template-classic .item { 
            margin-bottom: 14px;
        }
        .template-classic .item-header { 
            font-weight: 500;
            font-size: 14px;
        }
        .template-classic .item-sub { 
            font-style: italic;
            color: #666;
        }

        /* RTL Support */
        [dir="rtl"] { text-align: right; font-family: 'Noto Nastaliq Urdu', serif; }
        [dir="rtl"] .photo-top-left { float: right; margin: 0 0 20px 24px; }
        [dir="rtl"] .photo-top-right { float: left; margin: 0 24px 20px 0; }
        [dir="rtl"] .contact-info { flex-direction: row-reverse; }

        .dynamic-list-item { 
            background: var(--card-bg);
            padding: 16px;
            border-radius: 12px;
            margin-bottom: 12px;
            border: 1px solid var(--border);
            box-shadow: var(--shadow-sm);
        }
        
        .dynamic-list-item input,
        .dynamic-list-item textarea {
            width: 100%;
            margin-bottom: 8px;
        }
        
        .dynamic-list-item textarea {
            resize: vertical;
            min-height: 60px;
        }

        @media (max-width: 1024px) {
            body { flex-direction: column; }
            .sidebar { 
                width: 100%; 
                height: auto; 
                border-right: none; 
                border-bottom: 1px solid var(--border);
                max-height: 50vh;
                overflow-y: auto;
            }
            .preview-container { 
                padding: 24px; 
                justify-content: center;
            }
            #resume-preview { 
                width: 100%; 
                max-width: 210mm;
                height: auto;
            }
        }

        @media (max-width: 768px) {
            .header-controls { flex-direction: column; align-items: stretch; }
            .header-controls > * { width: 100%; }
            .control-row { flex-direction: column; align-items: stretch; gap: 8px; }
            .control-label { min-width: auto; }
        }
        /* Default Light Mode */
body {
    background: #f9f9f9;
    color: #222;
}

/* Dark Mode */
body.dark-mode {
    background: #121212;
    color: #f1f1f1;
}

body.dark-mode .sidebar {
    background: #1e1e1e;
    color: #f1f1f1;
}

body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
    background: #2a2a2a;
    color: #f1f1f1;
    border: 1px solid #444;
}

body.dark-mode button {
    background: #333;
    color: #f1f1f1;
}
/* Resume Preview Light Mode */
.preview-container {
    background: #ffffff;
    color: #222;
}

/* Resume Preview Dark Mode */
body.dark-mode .preview-container {
    background: #1a1a1a;
    color: #f1f1f1;
}

body.dark-mode #resume-preview {
    background: #1a1a1a;
    color: #f1f1f1;
    border: 1px solid #444;
}

body.dark-mode #resume-preview header {
    border-bottom: 1px solid #444;
}

body.dark-mode #resume-preview section {
    border-top: 1px solid #444;
}
body.dark-mode input,
body.dark-mode textarea {
    background: #2a2a2a;
    color: #f1f1f1;
    border: 1px solid #555;
}

body.dark-mode button {
    background: #333;
    color: #f1f1f1;
}
/* Hide modal by default */
#whatsNewModal {
  display: none; /* JS will set this to block when needed */
  position: fixed;
  z-index: 1000; /* keep it above other content */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto; /* enable scroll if content is tall */
  background-color: rgba(0, 0, 0, 0.5); /* semi-transparent backdrop */
}

/* Modal content box */
#whatsNewModal .modal-content {
  background-color: #fff;
  margin: 10% auto; /* center vertically with some margin */
  padding: 20px;
  border-radius: 8px;
  width: 80%;
  max-width: 500px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  animation: fadeIn 0.3s ease;
}

/* Close button */
#whatsNewModal .close-btn {
  float: right;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
  color: #666;
}

#whatsNewModal .close-btn:hover {
  color: #000;
}

/* CTA button */
#whatsNewModal .cta-btn {
  display: inline-block;
  margin-top: 15px;
  padding: 10px 20px;
  background-color: #0078d4;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

#whatsNewModal .cta-btn:hover {
  background-color: #005a9e;
}

/* Simple fade-in animation */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}