.resume-preview-root {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--color-text-dark);
    font-size: 0.9rem;
    line-height: 1.5;
    --resume-accent-start: var(--color-primary);
    --resume-accent-end: var(--color-secondary);
}

.resume-builder-page .btn {
    transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.resume-builder-page .btn:hover,
.resume-builder-page .btn:focus-visible {
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.16);
    transform: translateY(-1px);
}

.resume-builder-page .btn:active {
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.14);
    transform: translateY(0);
}

.resume-builder-page .btn-primary:hover,
.resume-builder-page .btn-primary:focus-visible,
.resume-builder-page .bg-gradient-to-r:hover,
.resume-builder-page .bg-gradient-to-r:focus-visible {
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.28);
}

@media (prefers-reduced-motion: reduce) {
    .resume-builder-page .btn,
    .resume-builder-page .btn:hover,
    .resume-builder-page .btn:focus-visible,
    .resume-builder-page .btn:active {
        transform: none;
        transition: none;
    }
}

.resume-accent-ocean { --resume-accent-start: #3b82f6; --resume-accent-end: #6366f1; }
.resume-accent-emerald { --resume-accent-start: #10b981; --resume-accent-end: #14b8a6; }
.resume-accent-sunset { --resume-accent-start: #f59e0b; --resume-accent-end: #f97316; }
.resume-accent-slate { --resume-accent-start: #64748b; --resume-accent-end: #0f172a; }

.resume-preview-root h2 { letter-spacing: -0.02em; }
.resume-header { border-bottom: 1px solid var(--color-border); padding-bottom: 1.25rem; margin-bottom: 1.5rem; }
.resume-header-main { display: flex; align-items: center; gap: 1.25rem; }
.resume-header-name { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.03em; color: #111827; }
.dark .resume-header-name { color: #fff; }
.resume-header-title { font-size: 0.95rem; color: var(--color-text-medium); }
.resume-header-experience, .resume-header-meta { margin-top: 0.25rem; font-size: 0.75rem; color: var(--color-text-medium); }
.resume-header-meta::before {
    content: "";
    display: block;
    width: 2.5rem;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--resume-accent-start), var(--resume-accent-end));
    margin-bottom: 0.35rem;
}

.resume-avatar {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 999px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--resume-accent-start), var(--resume-accent-end));
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
}

.dark .resume-avatar { box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.9); }
.resume-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.resume-avatar-initials { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1rem; color: #fff; }

.resume-section-title {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-medium);
    margin-bottom: 0.35rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.4);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.resume-section-title::before {
    content: "";
    display: inline-block;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--resume-accent-start), var(--resume-accent-end));
}

.resume-template-classic, .resume-template-sidebar { max-width: 900px; margin: 0 auto; }
.resume-template-classic { max-width: 800px; }
.resume-template-minimal { max-width: 780px; margin: 0 auto; border-radius: 0; box-shadow: none; border: none; padding-top: 0; }
.resume-template-minimal .resume-header { border-bottom-color: #e5e7eb; }
.dark .resume-template-minimal .resume-header { border-bottom-color: #1f2933; }
.resume-template-minimal .resume-header-meta::before { background: #e5e7eb; }
.resume-template-minimal .resume-avatar { display: none; }
.resume-template-minimal .resume-header-name { font-size: 1.45rem; letter-spacing: -0.025em; }
.resume-template-minimal .resume-header-title { font-size: 0.9rem; }
.resume-template-minimal .resume-header-experience { font-size: 0.7rem; }
.resume-template-minimal .resume-section-title { border-bottom: none; padding-bottom: 0; font-size: 0.78rem; }

.resume-template-classic .resume-section-summary {
    background: radial-gradient(circle at top left, rgba(148, 163, 184, 0.16), transparent);
    border-radius: 0.9rem;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(148, 163, 184, 0.3);
}

.resume-template-classic .resume-section-summary .resume-section-title { border-bottom: none; padding-bottom: 0; }
.resume-template-classic .resume-section-skills { background: rgba(148, 163, 184, 0.12); border-radius: 0.9rem; padding: 0.7rem 1rem; }
.resume-template-sidebar .resume-section-skills, .resume-template-sidebar .resume-section-extras { background: transparent; border-radius: 0; padding: 0; }
.resume-template-sidebar .resume-header-name { font-size: 1.4rem; }
.resume-template-sidebar .resume-header-title { font-size: 0.9rem; }
.resume-template-sidebar .resume-section-title { font-size: 0.78rem; }
.resume-template-sidebar .resume-preview-sidebar {
    background: rgba(15, 23, 42, 0.02);
    border-left-width: 2px;
    border-color: var(--resume-accent-start);
    padding-left: 1.25rem;
    padding-top: 0.75rem;
    border-radius: 0.75rem;
}

.dark .resume-template-sidebar .resume-preview-sidebar { background: rgba(15, 23, 42, 0.6); }
.resume-tag { display: inline-flex; align-items: center; border-radius: 999px; padding: 0.2rem 0.6rem; font-size: 0.75rem; background-color: rgba(148, 163, 184, 0.18); color: var(--color-text-medium); }
.resume-preview-root ul { padding-left: 1rem; }
.resume-preview-root ul li { list-style-type: disc; }
.resume-experience-item { position: relative; padding-left: 1.25rem; }
.resume-experience-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.4rem;
    width: 0.35rem;
    height: 0.35rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--resume-accent-start), var(--resume-accent-end));
    box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.25);
}

.resume-template-classic .resume-section-experience .resume-experience-item { border-left: 1px dashed rgba(148, 163, 184, 0.4); margin-left: 0.18rem; }
.resume-template-minimal .resume-section-experience .resume-experience-item::before { box-shadow: none; }
.resume-accent-swatch { width: 1.5rem; height: 1.5rem; border-radius: 999px; border: 2px solid transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.resume-accent-swatch-inner { width: 100%; height: 100%; border-radius: inherit; }
.resume-accent-swatch[data-resume-accent="ocean"] .resume-accent-swatch-inner { background: linear-gradient(135deg, #3b82f6, #6366f1); }
.resume-accent-swatch[data-resume-accent="emerald"] .resume-accent-swatch-inner { background: linear-gradient(135deg, #10b981, #14b8a6); }
.resume-accent-swatch[data-resume-accent="sunset"] .resume-accent-swatch-inner { background: linear-gradient(135deg, #f59e0b, #f97316); }
.resume-accent-swatch[data-resume-accent="slate"] .resume-accent-swatch-inner { background: linear-gradient(135deg, #64748b, #0f172a); }
.resume-accent-swatch-active { border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.35); }