/* CV Manager - Shared Styles */

:root {
    --primary: #0066ff;
    --primary-dark: #0052cc;
    --primary-light: #3385ff;
    --accent: #00a3ff;
    --gradient-start: var(--primary);
    --gradient-end: var(--accent);
    --header-gradient-start: var(--primary-dark);
    --header-gradient-end: var(--dark);
    --dark: #001a4d;
    --light: #e6f2ff;
    --very-light: #f5f9ff;
    --white: #ffffff;
    --gray-50: #fafbfc;
    --gray-100: #f4f5f7;
    --gray-300: #d1d5db;
    --gray-500: #6b7280;
    --gray-700: #374151;
    --gray-900: #1a1a1a;
    --danger: #ef4444;
    --success: #10b981;
    --font-family-default: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-family: var(--font-family-default);
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --shadow-sm: 0 1px 3px rgba(0,102,255,0.08);
    --shadow-md: 0 4px 12px rgba(0,102,255,0.1);
    --shadow-lg: 0 8px 24px rgba(0,102,255,0.12);
}

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

body {
    font-family: var(--font-family-default);
    font-size: 14px;
    line-height: 1.6;
    color: var(--gray-900);
    background: linear-gradient(135deg, var(--very-light) 0%, var(--gray-50) 100%);
    min-height: 100vh;
}

/* CV content adopts the user-selected font; admin chrome (toolbar, modals,
   settings) keeps the default Inter for brand consistency. */
.container { font-family: var(--font-family); }

.material-symbols-outlined {
    font-size: inherit;
    vertical-align: middle;
    line-height: 1;
}

/* Main Container */
.container {
    max-width: 1000px;
    margin: 20px auto;
    padding: 0 20px;
}

/* Header Section */
.header {
    background: linear-gradient(135deg, var(--header-gradient-start), var(--header-gradient-end));
    /* Scales in proportion to --section-radius (1.5× ratio, matching the
       baseline 24px : 16px relationship). When no custom radius is set, the
       fallback keeps the pre-1.41 look. */
    border-radius: var(--header-radius, var(--radius-xl));
    padding: 28px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
}

.header::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
    border-radius: 50%;
}

.header-content {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 24px;
    align-items: center;
}

.profile-image {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
    /* Clip the gradient to the padding-box so it doesn't bleed into the 4px
       translucent border. Otherwise a thin rim of the gradient's far-end color
       peeks out around the profile picture, producing a visible sharp edge
       against the header. */
    background-clip: padding-box;
    border: 4px solid rgba(255,255,255,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    font-weight: 700;
    color: var(--white);
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
}

.profile-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

.profile-info { flex: 1; }

.profile-name {
    font-size: 32px;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 4px;
}

.profile-title {
    font-size: 18px;
    color: rgba(255,255,255,0.95);
    margin-bottom: 2px;
}

.profile-subtitle {
    font-size: 15px;
    color: rgba(255,255,255,0.8);
    margin-bottom: 14px;
}

.contact-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-style: normal;
}

.contact-badge {
    font-size: 12px;
    color: rgba(255,255,255,0.95);
    background: rgba(255,255,255,0.15);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.contact-badge svg, .contact-badge .material-symbols-outlined {
    flex-shrink: 0;
    opacity: 0.9;
}

.contact-badge:hover {
    background: rgba(255,255,255,0.25);
    color: var(--white);
}

.open-to-work-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('/shared/open-to-work.png') center/cover no-repeat;
    border-radius: 50%;
    pointer-events: none;
    z-index: 2;
}

/* Sections */
.section {
    background: var(--white);
    /* Theme picker can override the corner radius via `--section-radius`;
       fallback keeps the pre-1.41 look. Applies to built-in and custom sections. */
    border-radius: var(--section-radius, var(--radius-lg));
    padding: 24px;
    margin-bottom: 16px;
    box-shadow: var(--shadow-md);
    position: relative;
}

/* Phantom "create custom section" placeholder.
   Outer `.phantom-section` is the hit target; it sits in the 16px inter-section gap
   invisibly and reveals the dashed pill (`.phantom-box`) on hover. The phantom after
   the final section carries `.phantom-last` and shows the pill always as a
   discoverability affordance. Baseline has a small vertical hit area via padding, and
   the outer grows on hover so the pill has breathing room from the surrounding sections. */
.phantom-section {
    margin-top: -16px;        /* overlap the section's 16px margin-bottom so baseline adds no visible space between sections */
    padding: 8px 0;           /* 16px hit area filling the inter-section gap */
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    background: transparent;
    box-sizing: content-box;
    transition: padding 0.15s ease;
}

/* On hover, grow the outer so the 44px pill has ~12px of clearance from the surrounding sections.
   Padding alone isn't enough — with no content inside, padding 24+24 = 48px leaves only 2px around
   the pill. The `min-height` gives the content area the height the removed hint used to provide. */
.phantom-section:hover {
    padding: 24px 0;
    min-height: 20px;
}

/* Last phantom: sit fully below the last section with generous breathing room both above and below the always-visible pill */
.phantom-section.phantom-last {
    margin-top: 16px;         /* push below the last section's margin-bottom */
    padding: 36px 0 28px 0;    /* extra top padding — you asked for a bit more space between the last section and the pill */
    min-height: 20px;          /* content area so the pill has clearance from the outer edges (since the hint that used to fill it is gone) */
}

/* The dashed pill — positioned absolutely so the outer can resize without layout jumps */
.phantom-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 260px;
    justify-content: center;
    padding: 10px 24px;
    border: 2px dashed transparent;
    border-radius: var(--radius-md);
    color: var(--gray-500);
    font-size: 14px;
    font-weight: 500;
    background: var(--white);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;     /* hover always resolved on the outer element */
    transition: opacity 0.15s ease, border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.phantom-box-plus {
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
}

.phantom-section:hover .phantom-box {
    opacity: 1;
    border-color: var(--primary);
    background: var(--very-light);
    color: var(--primary);
}

.phantom-section.phantom-last .phantom-box {
    opacity: 0.7;
    border-color: var(--gray-400);
    color: var(--gray-600);
    background: var(--white);
}

.phantom-section.phantom-last:hover .phantom-box {
    opacity: 1;
    border-color: var(--primary);
    background: var(--very-light);
    color: var(--primary);
}

@media print {
    .phantom-section { display: none !important; }
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--light);
}

.section-title {
    font-size: 20px;
    font-weight: 700;
    /* Fallback to --primary so themes that don't set a custom heading color
       keep the pre-1.40 behavior where section titles match the accent. */
    color: var(--section-title-color, var(--primary));
}

/* About */
.about-text {
    font-size: 13px;
    line-height: 1.7;
    color: var(--gray-700);
    white-space: pre-line;
}

/* Timeline */
.timeline-container {
    position: relative;
    padding: 70px 10px;
    min-height: 220px;
    overflow: hidden;
}

.timeline-track {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 50%;
    height: 5px;
    background: linear-gradient(90deg, var(--gradient-start), var(--gradient-end));
    transform: translateY(-50%);
    border-radius: 2.5px;
}

.timeline-chevron {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    line-height: 0;
    pointer-events: none;
}

.timeline-items {
    position: relative;
    height: 100%;
}

.timeline-item {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: visible;
}

.timeline-content {
    background: var(--very-light);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    text-align: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    min-width: 60px;
    max-width: 120px;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.timeline-item.top .timeline-content { bottom: calc(50% + 16px); }
.timeline-item.bottom .timeline-content { top: calc(50% + 16px); }

.timeline-content:hover {
    background: var(--light);
    transform: translateX(-50%) scale(1.05);
    border-color: var(--primary-light);
    z-index: 10;
}

.timeline-item {
    cursor: pointer;
}

/* Highlight animation for scrolled-to experience */
@keyframes highlightPulse {
    0% { box-shadow: 0 0 0 0 rgba(0, 102, 255, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(0, 102, 255, 0.2); }
    100% { box-shadow: 0 0 0 0 rgba(0, 102, 255, 0); }
}

.item-card.highlight-pulse {
    animation: highlightPulse 1.5s ease-out;
    border-left-color: var(--accent);
    background: linear-gradient(135deg, var(--light), var(--very-light));
}

.timeline-company {
    font-size: 11px;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 2px;
}

.timeline-role {
    font-size: 10px;
    color: var(--gray-700);
    margin-bottom: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.timeline-period {
    font-size: 10px;
    color: var(--gray-500);
    font-weight: 600;
}

.timeline-dot {
    width: 12px;
    height: 12px;
    background: var(--white);
    border: 3px solid var(--primary);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
}

.timeline-flag {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--primary);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    object-fit: cover;
    background: var(--white);
}

/* Timeline Card Logo (replaces company name text when logo uploaded) */
.timeline-card-logo {
    width: 90px;
    height: 28px;
    object-fit: contain;
    object-position: center;
    margin-bottom: 2px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Timeline Branching — items on the branch track */
.timeline-item.timeline-branch-track .timeline-dot {
    top: calc(50% - var(--branch-offset-pct, 28px));
}

.timeline-item.timeline-branch-track .timeline-flag {
    top: calc(50% - var(--branch-offset-pct, 28px));
}

.timeline-item.timeline-branch-track.top .timeline-content {
    bottom: calc(50% + var(--branch-offset-pct, 28px) + 16px);
}

.timeline-item.timeline-branch-track.bottom .timeline-content {
    top: calc(50% + 36px);
}

/* Chevrons on the branch track — same offset as dots (both in .timeline-items) */
.timeline-chevron.timeline-chevron-branch {
    top: calc(50% - var(--branch-offset-pct, 28px));
}

/* CSS fallback for branch line in print (SVG doesn't render on Safari iOS) */
.timeline-branch-line {
    display: none;
}

/* Items */
.items-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.item-card {
    background: linear-gradient(135deg, var(--very-light), var(--white));
    border-radius: 0;
    padding: 16px;
    border-left: 4px solid var(--primary);
    position: relative;
    transition: all 0.2s ease;
}

.item-card:hover {
    transform: translateX(4px);
    box-shadow: var(--shadow-sm);
}

.item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 6px;
}

.item-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-dark);
}

.item-subtitle {
    font-size: 14px;
    font-weight: 500;
    color: var(--gray-700);
}

/* Experience Logo — consistent indent when logos enabled */
.item-card.has-logo {
    position: relative;
    padding-left: 76px; /* 16px card padding + 48px logo + 12px gap */
}

.experience-logo {
    position: absolute;
    left: 16px;
    top: 16px;
    width: 48px;
    height: 48px;
    object-fit: contain;
    object-position: center;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.item-date {
    font-size: 12px;
    color: var(--gray-500);
    background: var(--white);
    padding: 3px 10px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

.item-duration {
    display: block;
    font-size: 11px;
    color: var(--gray-500);
    font-weight: 400;
    margin-top: 2px;
}

.item-location {
    font-size: 13px;
    color: var(--gray-500);
    margin-bottom: 8px;
}

.item-summary {
    font-size: 13px;
    color: var(--gray-700);
    margin-bottom: 8px;
}

.item-highlights {
    list-style: none;
    margin-top: 10px;
}

.item-highlights li {
    font-size: 13px;
    color: var(--gray-700);
    padding-left: 16px;
    margin-bottom: 4px;
    position: relative;
}

.item-highlights li::before {
    content: '▹';
    position: absolute;
    left: 0;
    top: 0;
    /* Fixed-height flex box centers whatever glyph/icon fills it on the
       first text line of the li, independent of the glyph's own font-size.
       13px × 1.6 line-height = 20.8px (matches the li's first-line height). */
    height: 20.8px;
    display: inline-flex;
    align-items: center;
    color: var(--primary);
    font-weight: bold;
}

/* Certifications Grid */
.cert-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px;
}

.cert-card {
    background: var(--very-light);
    border-radius: 0;
    padding: 12px 14px;
    border-left: 3px solid var(--primary);
    position: relative;
    transition: all 0.2s ease;
}

.cert-card:hover {
    background: var(--light);
    transform: translateX(3px);
}

.cert-card.has-logo {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.cert-logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
    object-position: center;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.cert-content {
    flex: 1;
    min-width: 0;
}

.cert-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 6px;
}

.cert-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-dark);
    flex: 1;
    min-width: 0;
}

.cert-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: var(--radius-sm);
    background: var(--light);
    color: var(--primary);
    text-decoration: none;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.cert-link:hover {
    background: var(--primary);
    color: var(--white);
}

.cert-link svg, .cert-link .material-symbols-outlined {
    width: 12px;
    height: 12px;
    font-size: 12px;
}

.cert-date {
    font-size: 11px;
    color: var(--gray-500);
    white-space: nowrap;
    display: block;
    margin-bottom: 2px;
}

.cert-provider {
    font-size: 12px;
    color: var(--gray-500);
}

/* Skills Grid */
.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
}

.skill-category {
    background: var(--very-light);
    border-radius: var(--radius-md);
    padding: 16px;
    position: relative;
    transition: all 0.2s ease;
}

.skill-category:hover {
    background: var(--light);
    transform: translateY(-2px);
}

.skill-category-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.skill-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.skill-icon svg {
    stroke: var(--primary);
}
.skill-icon .material-symbols-outlined {
    color: var(--primary);
}

.skill-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.skill-tag {
    font-size: 12px;
    color: var(--primary);
    background: var(--white);
    padding: 3px 9px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--primary-light);
}

/* Projects Grid */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}

.project-card {
    background: linear-gradient(135deg, var(--very-light), var(--white));
    border-radius: var(--radius-md);
    padding: 16px;
    border: 1px solid var(--light);
    position: relative;
    transition: all 0.2s ease;
}

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

.project-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
}

.project-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--primary);
    flex: 1;
}

.project-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    background: var(--light);
    color: var(--primary);
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.project-link:hover {
    background: var(--primary);
    color: var(--white);
}

.project-link svg, .project-link .material-symbols-outlined {
    width: 14px;
    height: 14px;
    font-size: 14px;
}

.project-description {
    font-size: 13px;
    color: var(--gray-700);
    margin-bottom: 10px;
    line-height: 1.6;
}

.tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.tech-tag {
    font-size: 11px;
    color: var(--white);
    background: var(--primary);
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    font-weight: 500;
}

/* ===========================
   Custom Section Layouts
   =========================== */

.custom-section-content {
    margin-bottom: 12px;
}

.empty-section {
    color: var(--gray-500);
    text-align: center;
    padding: 20px;
    font-style: italic;
}

/* Social Links Layout */
.social-links-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.social-link-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--very-light);
    border-radius: 0;
    text-decoration: none;
    color: var(--gray-700);
    transition: all 0.15s ease;
    border-left: 4px solid var(--primary);
}

.social-link-item:hover {
    background: var(--primary);
    color: var(--white);
    border-color: var(--primary);
    transform: translateX(4px);
}

.social-link-icon {
    font-size: 18px;
}

.social-link-name {
    font-size: 13px;
    font-weight: 500;
}

.social-link-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.social-link-url {
    font-size: 11px;
    color: var(--gray-500);
    font-weight: 400;
}

.social-link-item:hover .social-link-url {
    color: rgba(255, 255, 255, 0.8);
}

/* Grid Layouts (2 and 3 columns) */
.custom-grid {
    display: grid;
    gap: 14px;
}

.custom-grid-2 {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.custom-grid-3 {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.custom-grid-item {
    background: linear-gradient(135deg, var(--very-light), var(--white));
    border-radius: 0;
    padding: 16px;
    border-left: 4px solid var(--primary);
    transition: all 0.15s ease;
}

.custom-grid-item:hover {
    background: var(--light);
    transform: translateX(4px);
    box-shadow: var(--shadow-sm);
}

.custom-item-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-dark);
    margin-bottom: 4px;
}

.custom-item-subtitle {
    font-size: 14px;
    color: var(--gray-500);
    margin-bottom: 6px;
}

.custom-item-description {
    font-size: 13px;
    color: var(--gray-700);
    line-height: 1.5;
    margin-bottom: 8px;
}

.custom-item-link {
    font-size: 12px;
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
}

.custom-item-link:hover {
    text-decoration: underline;
}

/* List Layout */
.custom-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.custom-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    background: linear-gradient(135deg, var(--very-light), var(--white));
    border-radius: 0;
    border-left: 4px solid var(--primary);
    transition: all 0.15s ease;
}

.custom-list-item:hover {
    background: var(--light);
    transform: translateX(4px);
    box-shadow: var(--shadow-sm);
}

.custom-list-content {
    flex: 1;
}

/* Cards Layout */
.custom-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}

.custom-card {
    background: linear-gradient(135deg, var(--very-light), var(--white));
    border-radius: 0;
    padding: 18px;
    border-left: 4px solid var(--primary);
    transition: all 0.2s ease;
}

.custom-card:hover {
    box-shadow: var(--shadow-sm);
    transform: translateX(4px);
}

.custom-card-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 6px;
}

.custom-card-subtitle {
    font-size: 14px;
    color: var(--gray-500);
    margin-bottom: 8px;
}

.custom-card-description {
    font-size: 13px;
    color: var(--gray-700);
    line-height: 1.5;
    margin-bottom: 10px;
}

.custom-card-link {
    font-size: 12px;
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
}

.custom-card-link:hover {
    text-decoration: underline;
}

/* Bullet List Layout */
.custom-bullet-lists {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.custom-bullet-group {
    background: linear-gradient(135deg, var(--very-light), var(--white));
    border-radius: 0;
    padding: 16px;
    border-left: 4px solid var(--primary);
    transition: all 0.15s ease;
}

.custom-bullet-group:hover {
    transform: translateX(4px);
    box-shadow: var(--shadow-sm);
}

.custom-bullet-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-dark);
    margin-bottom: 10px;
}

.custom-bullet-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.custom-bullet-list li {
    font-size: 13px;
    color: var(--gray-700);
    padding-left: 16px;
    margin-bottom: 6px;
    position: relative;
    line-height: 1.5;
}

.custom-bullet-list li::before {
    content: '▹';
    position: absolute;
    left: 0;
    top: 0;
    /* Same flex-centering trick as .item-highlights — see the comment there. */
    height: 20.8px;
    display: inline-flex;
    align-items: center;
    color: var(--primary);
    font-weight: bold;
}

.custom-bullet-list li:last-child {
    margin-bottom: 0;
}

/* Theme bullet styles — driven by the `data-bullet-style` attribute set on
   <body> by the theme picker. Default (triangle) matches the baseline
   content: '▹' declared above. Each rule below overrides both bullet
   locations (experience highlights + custom bullet-list sections) so a
   single setting applies consistently across the CV. */

/* Unicode-glyph styles — font-size controls the glyph's visual size; the
   flex-centering on the baseline ::before rule handles vertical alignment,
   so no per-style `top` nudges are needed. */
body[data-bullet-style="bullet"] .item-highlights li::before,
body[data-bullet-style="bullet"] .custom-bullet-list li::before { content: '●'; font-size: 9px; }
body[data-bullet-style="hollow_circle"] .item-highlights li::before,
body[data-bullet-style="hollow_circle"] .custom-bullet-list li::before { content: '○'; font-size: 10px; }
body[data-bullet-style="square"] .item-highlights li::before,
body[data-bullet-style="square"] .custom-bullet-list li::before { content: '■'; font-size: 9px; }
body[data-bullet-style="small_square"] .item-highlights li::before,
body[data-bullet-style="small_square"] .custom-bullet-list li::before { content: '▪'; font-size: 11px; }
body[data-bullet-style="diamond"] .item-highlights li::before,
body[data-bullet-style="diamond"] .custom-bullet-list li::before { content: '◆'; }
body[data-bullet-style="arrow"] .item-highlights li::before,
body[data-bullet-style="arrow"] .custom-bullet-list li::before { content: '▸'; }
body[data-bullet-style="dash"] .item-highlights li::before,
body[data-bullet-style="dash"] .custom-bullet-list li::before { content: '–'; font-weight: normal; }

/* Material Symbols icon styles — one shared rule targets every icon bullet
   via `data-bullet-kind="icon"`, which admin.js / public-readonly set based
   on the chosen style. Individual `content:` rules below select the glyph
   by `data-bullet-style`. */
body[data-bullet-kind="icon"] .item-highlights li::before,
body[data-bullet-kind="icon"] .custom-bullet-list li::before {
    font-family: 'Material Symbols Outlined';
    font-weight: 400;
    font-size: 14px;
    line-height: 1;
}
body[data-bullet-style="check"] .item-highlights li::before,
body[data-bullet-style="check"] .custom-bullet-list li::before { content: 'check'; }
body[data-bullet-style="check_circle"] .item-highlights li::before,
body[data-bullet-style="check_circle"] .custom-bullet-list li::before { content: 'check_circle'; }
body[data-bullet-style="done_all"] .item-highlights li::before,
body[data-bullet-style="done_all"] .custom-bullet-list li::before { content: 'done_all'; }
body[data-bullet-style="task_alt"] .item-highlights li::before,
body[data-bullet-style="task_alt"] .custom-bullet-list li::before { content: 'task_alt'; }
body[data-bullet-style="star"] .item-highlights li::before,
body[data-bullet-style="star"] .custom-bullet-list li::before { content: 'star'; }
body[data-bullet-style="auto_awesome"] .item-highlights li::before,
body[data-bullet-style="auto_awesome"] .custom-bullet-list li::before { content: 'auto_awesome'; }
body[data-bullet-style="bolt"] .item-highlights li::before,
body[data-bullet-style="bolt"] .custom-bullet-list li::before { content: 'bolt'; }
body[data-bullet-style="trending_up"] .item-highlights li::before,
body[data-bullet-style="trending_up"] .custom-bullet-list li::before { content: 'trending_up'; }
body[data-bullet-style="insights"] .item-highlights li::before,
body[data-bullet-style="insights"] .custom-bullet-list li::before { content: 'insights'; }
body[data-bullet-style="rocket_launch"] .item-highlights li::before,
body[data-bullet-style="rocket_launch"] .custom-bullet-list li::before { content: 'rocket_launch'; }
body[data-bullet-style="verified"] .item-highlights li::before,
body[data-bullet-style="verified"] .custom-bullet-list li::before { content: 'verified'; }
body[data-bullet-style="workspace_premium"] .item-highlights li::before,
body[data-bullet-style="workspace_premium"] .custom-bullet-list li::before { content: 'workspace_premium'; }
body[data-bullet-style="emoji_events"] .item-highlights li::before,
body[data-bullet-style="emoji_events"] .custom-bullet-list li::before { content: 'emoji_events'; }
body[data-bullet-style="military_tech"] .item-highlights li::before,
body[data-bullet-style="military_tech"] .custom-bullet-list li::before { content: 'military_tech'; }
body[data-bullet-style="lightbulb"] .item-highlights li::before,
body[data-bullet-style="lightbulb"] .custom-bullet-list li::before { content: 'lightbulb'; }
body[data-bullet-style="code"] .item-highlights li::before,
body[data-bullet-style="code"] .custom-bullet-list li::before { content: 'code'; }
body[data-bullet-style="terminal"] .item-highlights li::before,
body[data-bullet-style="terminal"] .custom-bullet-list li::before { content: 'terminal'; }
body[data-bullet-style="kid_star"] .item-highlights li::before,
body[data-bullet-style="kid_star"] .custom-bullet-list li::before { content: 'kid_star'; }
body[data-bullet-style="analytics"] .item-highlights li::before,
body[data-bullet-style="analytics"] .custom-bullet-list li::before { content: 'analytics'; }
body[data-bullet-style="leaderboard"] .item-highlights li::before,
body[data-bullet-style="leaderboard"] .custom-bullet-list li::before { content: 'leaderboard'; }
body[data-bullet-style="build"] .item-highlights li::before,
body[data-bullet-style="build"] .custom-bullet-list li::before { content: 'build'; }
body[data-bullet-style="engineering"] .item-highlights li::before,
body[data-bullet-style="engineering"] .custom-bullet-list li::before { content: 'engineering'; }
body[data-bullet-style="construction"] .item-highlights li::before,
body[data-bullet-style="construction"] .custom-bullet-list li::before { content: 'construction'; }
body[data-bullet-style="arrow_forward"] .item-highlights li::before,
body[data-bullet-style="arrow_forward"] .custom-bullet-list li::before { content: 'arrow_forward'; }
body[data-bullet-style="arrow_right_alt"] .item-highlights li::before,
body[data-bullet-style="arrow_right_alt"] .custom-bullet-list li::before { content: 'arrow_right_alt'; }
body[data-bullet-style="double_arrow"] .item-highlights li::before,
body[data-bullet-style="double_arrow"] .custom-bullet-list li::before { content: 'double_arrow'; }
body[data-bullet-style="chevron_right"] .item-highlights li::before,
body[data-bullet-style="chevron_right"] .custom-bullet-list li::before { content: 'chevron_right'; }
body[data-bullet-style="north_east"] .item-highlights li::before,
body[data-bullet-style="north_east"] .custom-bullet-list li::before { content: 'north_east'; }
body[data-bullet-style="public"] .item-highlights li::before,
body[data-bullet-style="public"] .custom-bullet-list li::before { content: 'public'; }
body[data-bullet-style="language"] .item-highlights li::before,
body[data-bullet-style="language"] .custom-bullet-list li::before { content: 'language'; }
body[data-bullet-style="travel_explore"] .item-highlights li::before,
body[data-bullet-style="travel_explore"] .custom-bullet-list li::before { content: 'travel_explore'; }
body[data-bullet-style="favorite"] .item-highlights li::before,
body[data-bullet-style="favorite"] .custom-bullet-list li::before { content: 'favorite'; }
body[data-bullet-style="thumb_up"] .item-highlights li::before,
body[data-bullet-style="thumb_up"] .custom-bullet-list li::before { content: 'thumb_up'; }
body[data-bullet-style="school"] .item-highlights li::before,
body[data-bullet-style="school"] .custom-bullet-list li::before { content: 'school'; }
body[data-bullet-style="menu_book"] .item-highlights li::before,
body[data-bullet-style="menu_book"] .custom-bullet-list li::before { content: 'menu_book'; }
body[data-bullet-style="business_center"] .item-highlights li::before,
body[data-bullet-style="business_center"] .custom-bullet-list li::before { content: 'business_center'; }
body[data-bullet-style="psychology"] .item-highlights li::before,
body[data-bullet-style="psychology"] .custom-bullet-list li::before { content: 'psychology'; }
body[data-bullet-style="flag"] .item-highlights li::before,
body[data-bullet-style="flag"] .custom-bullet-list li::before { content: 'flag'; }
body[data-bullet-style="bookmark"] .item-highlights li::before,
body[data-bullet-style="bookmark"] .custom-bullet-list li::before { content: 'bookmark'; }
body[data-bullet-style="key"] .item-highlights li::before,
body[data-bullet-style="key"] .custom-bullet-list li::before { content: 'key'; }
body[data-bullet-style="palette"] .item-highlights li::before,
body[data-bullet-style="palette"] .custom-bullet-list li::before { content: 'palette'; }
body[data-bullet-style="hub"] .item-highlights li::before,
body[data-bullet-style="hub"] .custom-bullet-list li::before { content: 'hub'; }
body[data-bullet-style="groups"] .item-highlights li::before,
body[data-bullet-style="groups"] .custom-bullet-list li::before { content: 'groups'; }
body[data-bullet-style="handshake"] .item-highlights li::before,
body[data-bullet-style="handshake"] .custom-bullet-list li::before { content: 'handshake'; }
body[data-bullet-style="fact_check"] .item-highlights li::before,
body[data-bullet-style="fact_check"] .custom-bullet-list li::before { content: 'fact_check'; }
body[data-bullet-style="local_fire_department"] .item-highlights li::before,
body[data-bullet-style="local_fire_department"] .custom-bullet-list li::before { content: 'local_fire_department'; }
body[data-bullet-style="edit_note"] .item-highlights li::before,
body[data-bullet-style="edit_note"] .custom-bullet-list li::before { content: 'edit_note'; }

/* Free Text Layout */
.custom-free-text-blocks {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.custom-free-text-content {
    font-size: 13.5px;
    color: var(--gray-700);
    line-height: 1.7;
    white-space: pre-line;
    margin: 0;
}

/* Picture Grid Layout */
.custom-picture-grid {
    display: grid;
    gap: 16px;
    justify-items: center;
}

.custom-picture-grid-3 { grid-template-columns: repeat(3, 1fr); }
.custom-picture-grid-2 { grid-template-columns: repeat(2, 1fr); }
.custom-picture-grid-1 { grid-template-columns: 1fr; }

.custom-picture-item {
    text-align: center;
    max-width: 100%;
}

.custom-picture-img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
}

.custom-picture-grid-3 .custom-picture-item {
    justify-self: stretch;
}

.custom-picture-grid-3 .custom-picture-img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

.custom-picture-caption {
    font-size: 13px;
    color: var(--gray-600);
    margin-top: 6px;
    text-align: center;
}

.custom-picture-placeholder {
    width: 100%;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--very-light);
    border: 2px dashed var(--gray-300);
    border-radius: 8px;
    color: var(--gray-400);
    font-size: 13px;
}

.custom-picture-grid-3 .custom-picture-placeholder { aspect-ratio: 1; min-height: unset; }

.custom-picture-empty-cell {
    width: 100%;
    min-height: 120px;
    border: 1px dashed var(--gray-300);
    border-radius: 8px;
    background: var(--very-light);
}

.custom-picture-grid-3 .custom-picture-empty-cell { aspect-ratio: 1; min-height: unset; }

/* Picture grid modal preview */
.picture-grid-preview {
    width: 200px;
    height: 200px;
    border: 2px dashed var(--gray-300);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--very-light);
}

.picture-grid-preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.picture-grid-placeholder {
    color: var(--gray-400);
    font-size: 13px;
}

/* Thumbnail in item list */
.custom-item-thumb {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}

/* Public Print Button */
.public-print-btn {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--white);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 102, 255, 0.3);
    transition: all 0.2s ease;
    z-index: 1000;
}

.public-print-btn:hover {
    background: var(--primary-dark);
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(0, 102, 255, 0.4);
}

.public-print-btn svg, .public-print-btn .material-symbols-outlined {
    flex-shrink: 0;
}

/* Language badge (used in dataset rows, banners, etc.) */
.dataset-lang-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    border-radius: 3px;
    background: var(--primary);
    color: var(--white);
    text-transform: uppercase;
    line-height: 1.4;
    vertical-align: middle;
}
/* Clickable variant (in Open modal rows) */
.dataset-lang-badge-btn {
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s ease, transform 0.1s ease;
}
.dataset-lang-badge-btn:hover {
    background: var(--primary-dark);
    transform: scale(1.05);
}

/* Floating language picker anchored to a badge */
.dataset-lang-picker {
    position: fixed;
    z-index: 2000;
    min-width: 180px;
    max-height: 320px;
    overflow-y: auto;
    background: var(--white);
    border: 1px solid var(--gray-200);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
.dataset-lang-picker-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    font-size: 13px;
    color: var(--gray-700);
    transition: background 0.15s ease;
}
.dataset-lang-picker-option:hover { background: var(--gray-50); }

/* Public language switcher — top-right pill with flag */
.public-lang-switcher {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 1000;
}
.public-lang-switch-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 24px;
    background: var(--primary);
    color: var(--white);
    border: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0, 102, 255, 0.3);
    transition: all 0.2s ease;
}
.public-lang-switch-btn:hover {
    background: var(--primary-dark);
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(0, 102, 255, 0.4);
}
.public-lang-flag {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}
.lang-flag-img {
    border-radius: 50%;
    object-fit: cover;
    vertical-align: middle;
}
.public-lang-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 170px;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}
.public-lang-dropdown.active { display: block; }
.public-lang-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    text-decoration: none;
    color: var(--gray-700);
    font-size: 13px;
    transition: background 0.15s;
    cursor: pointer;
}
.public-lang-option:hover { background: var(--gray-50); }
.public-lang-option.active {
    background: var(--primary);
    color: var(--white);
    font-weight: 600;
}
.public-lang-code {
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.5px;
    min-width: 24px;
}
.public-lang-name { flex: 1; }

/* Admin dataset version badge — soft purple outlined pill (subtle but distinct) */
.active-dataset-version-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(139, 92, 246, 0.1);
    color: #6d28d9;
    border: 1px solid rgba(139, 92, 246, 0.35);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* Right-aligned variants group (intro label + sibling chips + add-language button) */
.active-dataset-variants-group {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.active-dataset-variants-label {
    color: var(--gray-500);
    font-weight: 400;
    letter-spacing: 0.2px;
}

/* Current-language badge in the active dataset banner — flag + code pill.
   Scoped by id so we don't override the compact badges in the CV Manager list.
   Shape matches the sibling chips for visual consistency. */
#activeDatasetLangBadge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 3px;
    border-radius: 999px;
    background: var(--primary);
    color: var(--white, #fff);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.5px;
    text-transform: none;
}
#activeDatasetLangBadge .dataset-lang-badge-code {
    letter-spacing: 0.6px;
}

/* Sibling chips — bigger, brighter, with round flag */
.active-dataset-lang-chips {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.dataset-lang-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 3px;
    border: none;
    border-radius: 999px;
    background: var(--primary);
    color: var(--white, #fff);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s, transform 0.15s;
}
.dataset-lang-chip:hover {
    background: var(--primary-dark, #0048b8);
    box-shadow: 0 2px 6px rgba(0, 102, 255, 0.25);
    transform: translateY(-1px);
}
.dataset-lang-chip-code {
    letter-spacing: 0.6px;
}

/* Add-language button — filled primary pill with icon + label */
.dataset-add-lang-wrapper {
    position: relative;
}
.dataset-add-lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px 4px 7px;
    border: none;
    border-radius: 999px;
    background: var(--primary);
    color: var(--white, #fff);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s, transform 0.15s;
    box-shadow: 0 1px 2px rgba(0, 102, 255, 0.25);
}
.dataset-add-lang-btn:hover {
    background: var(--primary-dark, #0048b8);
    box-shadow: 0 2px 8px rgba(0, 102, 255, 0.35);
    transform: translateY(-1px);
}
.active-dataset-banner-content .dataset-add-lang-btn .material-symbols-outlined { color: inherit; }
/* Globe icon is mobile-only — it pairs with the + on phones where the
   "Add language" text is hidden. Desktop shows + plus the full label. */
.dataset-add-lang-btn .dataset-add-lang-globe { display: none; }
.dataset-add-lang-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 200px;
    max-height: 300px;
    overflow-y: auto;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    z-index: 1001;
}
.dataset-add-lang-dropdown.active { display: block; }
.dataset-lang-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    font-size: 13px;
    color: var(--gray-700);
    cursor: pointer;
    transition: background 0.15s;
}
.dataset-lang-option:hover { background: var(--gray-50); }
.dataset-lang-option.disabled {
    color: var(--gray-400);
    cursor: default;
    font-style: italic;
}
.dataset-lang-option.disabled:hover { background: transparent; }
.dataset-lang-code {
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.5px;
    min-width: 22px;
}
.dataset-lang-name { flex: 1; }

/* Save As modal — language field */
.save-as-language-field {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex-shrink: 0;
}
.save-as-lang-select {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    font-size: 13px;
    background: var(--white);
    color: var(--gray-700);
}

/* Save As modal — add language button */
.save-as-newlang-btn {
    margin-left: 4px;
    flex-shrink: 0;
}

/* Save As modal — version child row with add-language */
.save-as-version-child-row {
    display: flex;
    align-items: center;
    gap: 4px;
}
.save-as-version-child-row .save-as-version-child {
    flex: 1;
    min-width: 0;
}
.save-as-row-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* Preview Banner (for versioned dataset URLs) */
.preview-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    z-index: 1001;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.preview-banner-content {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.preview-banner-content svg, .preview-banner-content .material-symbols-outlined {
    flex-shrink: 0;
    opacity: 0.9;
}

.preview-banner-text {
    font-size: 13px;
    font-weight: 500;
}

.preview-banner-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    text-decoration: none;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.preview-banner-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.preview-banner-btn svg, .preview-banner-btn .material-symbols-outlined {
    flex-shrink: 0;
}

/* Adjust container margin when banner is shown */
body.has-preview-banner .container {
    margin-top: 70px;
}

/* ATS hidden content - using clip method for better ATS compatibility */
.ats-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ATS-friendly print version - keep sr-only technique so text is in PDF text layer for ATS extraction */
/* The base .ats-only rule above already uses the correct clip method. No print override needed. */

/* Print Styles */
@media print {
    * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
    body { background: white !important; margin: 0 !important; padding: 0 !important; }
    .toolbar, .add-btn, .item-actions, .section-actions, .no-print, .open-to-work-overlay { display: none !important; }
    .container { max-width: 100% !important; margin: 0 !important; padding: 0 10px !important; margin-top: 0 !important; }
    
    /* Header - keep horizontal layout like desktop */
    .header { 
        margin-bottom: 12px;
        margin-top: 0 !important;
        padding: 16px 20px;
        box-shadow: none;
    }
    .header::before { display: none; }
    .header-content {
        flex-direction: row !important;
        text-align: left !important;
        align-items: center;
        gap: 16px;
    }
    .profile-image { width: 70px; height: 70px; font-size: 22px; }
    .profile-info { flex: 1; }
    .profile-name { font-size: 22px; margin-bottom: 2px; }
    .profile-title { font-size: 13px; margin-bottom: 1px; }
    .profile-subtitle { font-size: 11px; margin-bottom: 6px; }
    .contact-badges { justify-content: flex-start !important; gap: 5px; }
    .contact-badge { font-size: 9px; padding: 2px 6px; }
    
    /* Sections - prevent unnecessary page breaks, except for experience which can be long */
    .section {
        box-shadow: none;
        margin-bottom: 10px;
        padding: 14px;
        /* Honor the theme's custom radius in print as well so the printed PDF
           matches the on-screen look; otherwise fall back to the tighter
           print default. */
        border-radius: var(--section-radius, var(--radius-md));
        page-break-inside: avoid;
        break-inside: avoid;
    }
    
    /* Allow experience section to split across pages since it's usually long */
    #section-experience {
        page-break-inside: auto;
        break-inside: auto;
    }
    .section-header {
        margin-bottom: 10px;
        padding-bottom: 6px;
    }
    .section-title { font-size: 15px; }
    
    /* Timeline - SHOW it in print (only if not hidden by user choice) */
    #section-timeline:not(.hidden-print) .section-header { margin-bottom: 8px; }
    #section-timeline:not(.hidden-print) .timeline-container {
        display: block !important;
        min-height: 200px;
        /* Override overflow:hidden so branch tracks (above the main line) and
           SVG S-curves are not clipped.  iOS Safari print clips children even
           when they set overflow:visible if the parent is overflow:hidden. */
        overflow: visible !important;
        /* MUST be symmetric: .timeline-track uses top:50% of the padding box,
           while dots/cards use top:50% of the content box (.timeline-items).
           Asymmetric padding shifts the track away from the dots. */
        padding: 70px 10px;
    }
    #section-timeline:not(.hidden-print) .timeline-company { font-size: 9px; }
    #section-timeline:not(.hidden-print) .timeline-role { font-size: 8px; }
    #section-timeline:not(.hidden-print) .timeline-period { font-size: 8px; }
    #section-timeline:not(.hidden-print) .timeline-content {
        padding: 6px 8px;
        /* Reset to pure CSS centering for print — JS-set inline left + translateX
           positioning doesn't reliably apply on iOS Safari's print renderer,
           causing cards to drift into the section header. */
        left: 50% !important;
        transform: translateX(-50%) !important;
        max-width: min(90px, calc(100% + 20px));
        min-width: 40px;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: none !important;
    }
    /* Hide connector lines in print — they rely on JS pixel offsets that don't
       scale correctly, and the cards are reset to centered above anyway. */
    #section-timeline:not(.hidden-print) .timeline-connectors { display: none !important; }
    /* Only resize dots/flags in print — do NOT override top/left/transform
       because that kills the branch-track offset (calc(50% - var(--branch-offset-pct)))
       due to the #id selector having higher specificity than class-only selectors */
    #section-timeline:not(.hidden-print) .timeline-dot { width: 10px; height: 10px; }
    #section-timeline:not(.hidden-print) .timeline-flag { width: 16px; height: 16px; }
    #section-timeline:not(.hidden-print) .timeline-card-logo { width: 70px; height: 22px; }
    #section-timeline:not(.hidden-print) .timeline-chevron svg { width: 10px; height: 14px; }
    /* Connector lines from dots to offset cards — visible in print */
    #section-timeline:not(.hidden-print) .timeline-connectors {
        overflow: visible !important;
    }
    /* Branch curves: improve SVG rendering in print */
    #section-timeline:not(.hidden-print) .timeline-branch-curves {
        overflow: visible !important;
    }
    #section-timeline:not(.hidden-print) .timeline-branch-curves path {
        stroke: var(--accent) !important;
        stroke-width: 3px !important;
    }
    /* CSS fallback branch line for print.  iOS Safari doesn't render SVGs in
       print, so this plain CSS line is the only way the branch appears on iPhone.
       On desktop browsers the SVG curves render on top (higher z-index), so this
       line sits invisibly underneath — no "double line" as long as the offset
       matches (both use --branch-offset-pct set by JS). */
    #section-timeline:not(.hidden-print) .timeline-branch-line {
        display: block;
        position: absolute;
        top: calc(50% - var(--branch-offset-pct, 8%));
        height: 3px;
        background: var(--accent);
        border-radius: 2px;
        transform: translateY(-50%);
        z-index: 1;
    }
    #section-timeline:not(.hidden-print) .timeline-track {
        height: 3px;
    }

    /* Items - allow page breaks between items but not inside */
    .item-card, .cert-card, .skill-category, .project-card { 
        break-inside: avoid;
        page-break-inside: avoid;
        box-shadow: none;
    }
    
    /* Level 1: Allow section splits (items stay intact) */
    body.allow-section-splits .section {
        page-break-inside: auto;
        break-inside: auto;
    }
    
    /* Level 2: Also allow item splits (maximum compactness) */
    body.allow-item-splits .item-card,
    body.allow-item-splits .cert-card,
    body.allow-item-splits .skill-category,
    body.allow-item-splits .project-card,
    body.allow-item-splits .custom-section,
    body.allow-item-splits .custom-bullet-group,
    body.allow-item-splits .custom-card,
    body.allow-item-splits .custom-grid-item,
    body.allow-item-splits .custom-list-item {
        page-break-inside: auto;
        break-inside: auto;
    }
    .item-card { padding: 10px; margin-bottom: 6px; border-radius: 0; }
    .item-card.has-logo { padding-left: 46px; }
    .experience-logo { width: 28px; height: 28px; left: 10px; top: 10px; overflow: visible; }
    .items-list { gap: 6px; }
    .item-title { font-size: 13px; }
    .item-subtitle { font-size: 12px; }
    .item-date { font-size: 10px; padding: 2px 6px; }
    .item-location { font-size: 11px; }
    .item-summary { font-size: 11px; }
    .item-highlights li { font-size: 11px; margin-bottom: 2px; }
    /* 11px × 1.6 line-height — keep bullets vertically centered on print. */
    .item-highlights li::before,
    .custom-bullet-list li::before { height: 17.6px; }
    
    /* Certs - force grid layout like desktop */
    .cert-grid { 
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px; 
    }
    .cert-card { padding: 8px 10px; }
    .cert-card.has-logo { gap: 6px; }
    .cert-logo { width: 24px; height: 24px; }
    .cert-name { font-size: 11px; }
    .cert-date { font-size: 9px; }
    .cert-provider { font-size: 10px; }
    
    /* Skills */
    .skills-grid {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 6px;
    }
    .skill-category { padding: 10px; }
    .skill-category-title { font-size: 12px; margin-bottom: 6px; }
    .skill-tag { font-size: 10px; padding: 2px 6px; }

    /* Skills — compact print layout: inline text ("Category: a, b, c") instead of card grid */
    #section-skills.print-compact .skills-grid {
        display: block !important;
        grid-template-columns: none !important;
        gap: 0 !important;
    }
    #section-skills.print-compact .skill-category {
        display: block;
        padding: 0;
        margin: 0 0 3px 0;
        border: none;
        background: none !important;
        box-shadow: none;
        break-inside: avoid;
    }
    #section-skills.print-compact .skill-icon,
    #section-skills.print-compact .drag-handle,
    #section-skills.print-compact .item-actions { display: none !important; }
    #section-skills.print-compact .skill-category-title {
        display: inline;
        font-size: 11px;
        font-weight: 700;
        margin: 0;
    }
    #section-skills.print-compact .skill-category-title::after { content: ": "; }
    #section-skills.print-compact .skill-tags { display: inline; }
    #section-skills.print-compact .skill-tag {
        display: inline;
        padding: 0;
        margin: 0;
        background: none !important;
        color: inherit !important;
        border: none;
        font-size: 11px;
        font-weight: 400;
    }
    #section-skills.print-compact .skill-tag:not(:last-child)::after { content: ", "; }

    /* Projects */
    .projects-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px;
    }
    .project-card { padding: 10px; }
    .project-header { margin-bottom: 4px; }
    .project-title { font-size: 13px; }
    .project-link { width: 20px; height: 20px; }
    .project-link svg { width: 10px; height: 10px; }
    .project-link .material-symbols-outlined { font-size: 10px; }
    .project-description { font-size: 11px; margin-bottom: 6px; }
    .tech-tag { font-size: 9px; padding: 2px 6px; }

    /* Projects — compact print layout: inline text ("Title — description") with no tech tags */
    #section-projects.print-compact .projects-grid {
        display: block !important;
        grid-template-columns: none !important;
        gap: 0 !important;
    }
    #section-projects.print-compact .project-card {
        display: block;
        padding: 0;
        margin: 0 0 3px 0;
        border: none;
        background: none !important;
        box-shadow: none;
        break-inside: avoid;
    }
    #section-projects.print-compact .tech-tags,
    #section-projects.print-compact .project-link,
    #section-projects.print-compact .drag-handle,
    #section-projects.print-compact .item-actions { display: none !important; }
    #section-projects.print-compact .project-header {
        display: inline;
        margin: 0;
    }
    #section-projects.print-compact .project-title {
        display: inline;
        font-size: 11px;
        font-weight: 700;
        margin: 0;
    }
    #section-projects.print-compact .project-description {
        display: inline;
        font-size: 11px;
        font-weight: 400;
        margin: 0;
        white-space: normal;
    }
    #section-projects.print-compact .project-description:not(:empty)::before {
        content: " — ";
        font-weight: 400;
    }
    
    /* About */
    .about-text { font-size: 11px; line-height: 1.5; white-space: pre-line; }
    
    /* Free Text */
    .custom-free-text-content { font-size: 11px; line-height: 1.5; white-space: pre-line; }
    
    /* Custom Sections */
    .custom-item-title, .custom-card-title, .custom-bullet-title { font-size: 13px; }
    .custom-item-subtitle, .custom-card-subtitle { font-size: 12px; }
    .custom-item-description, .custom-card-description { font-size: 11px; }
    .custom-bullet-list li { font-size: 11px; margin-bottom: 2px; }
    .custom-item-link, .custom-card-link { font-size: 10px; }
    .custom-grid-item, .custom-list-item, .custom-card, .custom-bullet-group { padding: 10px; }
    .custom-picture-grid { gap: 10px; }
    .custom-picture-img { border-radius: 4px; }
    .custom-picture-caption { font-size: 10px; }

    .hidden-print, .is-hidden { display: none !important; }
}

/* Responsive */
@media (max-width: 768px) {
    .container { margin-top: 20px; padding: 0 12px; }
    .header { padding: 20px; }
    .header-content { flex-direction: column; text-align: center; }
    .profile-image { width: 90px; height: 90px; font-size: 28px; }
    .profile-name { font-size: 24px; }
    .contact-badges { justify-content: center; }
    .section { padding: 18px; }
    #section-timeline { display: none; }
    .cert-grid, .skills-grid, .projects-grid { grid-template-columns: 1fr; }
    .custom-picture-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .experience-logo { display: none; }
    .cert-logo { display: none; }
    .item-card.has-logo { padding-left: 16px; }
    .cert-card.has-logo { display: block; }
}

/* Mobile print - show timeline again (only if not hidden by user choice) */
@media print {
    #section-timeline:not(.hidden-print):not(.is-hidden) { display: block !important; }
    #section-timeline:not(.hidden-print):not(.is-hidden) .timeline-container { display: block !important; }
}

/* Print pagination is handled via JavaScript-injected @page rules */

/* Cookie Consent Banner — matches the header's first color (no gradient) */
.cookie-banner {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    max-width: 560px;
    background: var(--header-gradient-start, var(--primary-dark));
    color: #ffffff;
    border-radius: var(--radius-lg, 16px);
    padding: 20px 22px;
    box-shadow: var(--shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.15));
    z-index: 10000;
    font-family: var(--font-family-default, 'Inter', sans-serif);
}

.cookie-banner[hidden] { display: none; }

.cookie-banner-title {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
}

.cookie-banner-body {
    margin: 0 0 16px;
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
}

.cookie-banner-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.cookie-banner-btn {
    flex: 1 1 auto;
    min-width: 110px;
    padding: 10px 16px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, border-color 0.15s;
}

.cookie-banner-btn-reject {
    background: transparent;
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.4);
}

.cookie-banner-btn-reject:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.7);
}

.cookie-banner-btn-accept {
    background: #ffffff;
    color: var(--header-gradient-start, var(--primary-dark));
    border-color: #ffffff;
}

.cookie-banner-btn-accept:hover { background: rgba(255, 255, 255, 0.9); }

/* Discreet round cookie icon that re-opens the preferences. */
.cookie-preferences-link {
    position: fixed;
    bottom: 12px;
    left: 12px;
    z-index: 9999;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.25);
    color: #ffffff;
    cursor: pointer;
    opacity: 0.55;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.15s, background 0.15s, transform 0.15s;
    font-family: inherit;
}

.cookie-preferences-link:hover {
    opacity: 1;
    background: var(--header-gradient-start, var(--primary-dark));
    transform: scale(1.05);
}

.cookie-preferences-link .material-symbols-outlined {
    font-size: 20px;
    line-height: 1;
    color: inherit;
}

.cookie-preferences-link[hidden] { display: none; }

@media (max-width: 480px) {
    .cookie-banner {
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: none;
        transform: none;
        border-radius: 12px 12px 0 0;
    }
}