:root {
    --bg-body: #FAFBFC; 
    --surface-card: #FFFFFF;
    --surface-border: rgba(55, 65, 81, 0.08);
    
    --text-primary: #1F2937;
    --text-secondary: #374151;
    --text-tertiary: #6B7280;
    
    --brand-primary: #FB7185;
    --brand-gradient: linear-gradient(135deg, #FB7185 0%, #F43F5E 100%);
    --brand-light: rgba(251, 113, 133, 0.08);
    --brand-hover: #F43F5E;
    --success: #10B981; 
    --danger: #EF4444;
    --accent-exp: #FB7185;
    --accent-edu: #F43F5E;
    --accent-skill: #FB7185;
    --accent-cert: #F43F5E;
    --accent-lang: #FB7185;
    
    --radius-std: 10px;
    --radius-lg: 16px; 
    
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-hover: 0 10px 25px rgba(251, 113, 133, 0.12);
    --shadow-neumorphic: 0 4px 20px rgba(0, 0, 0, 0.08);
    
    --font-head: "Outfit", -apple-system, sans-serif;
    --font-body: "Inter", -apple-system, sans-serif;
    
    --transition-smooth: cubic-bezier(0.2, 0.8, 0.2, 1);
    --transition-bouncy: cubic-bezier(0.34, 1.56, 0.64, 1);
    --input-height: 42px; 
}

* { box-sizing: border-box; outline: none; -webkit-tap-highlight-color: transparent; }

body {
    margin: 0; padding: 0;
    font-family: var(--font-body);
    color: var(--text-primary);
    background-color: var(--bg-body);
    min-height: 100vh;
    position: relative;
}

/* --- DEMO BANNER --- */
.demo-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 0 14px 0;
}
.demo-banner-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.btn-ats {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    background: transparent;
    color: var(--brand-primary);
    border: 1.5px solid var(--brand-primary);
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font-head);
    letter-spacing: 0.3px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.3s var(--transition-smooth),
                border-color 0.3s var(--transition-smooth),
                box-shadow 0.3s var(--transition-smooth),
                color 0.3s var(--transition-smooth),
                opacity 0.3s var(--transition-smooth),
                transform 0.3s var(--transition-smooth);
}
.btn-ats:hover { background: var(--brand-light); box-shadow: 0 4px 12px rgba(251, 113, 133, 0.18); }
.btn-ats:active { transform: scale(0.97); }
.btn-demo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 24px;
    background: var(--brand-gradient);
    color: #fff;
    border: none;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font-head);
    letter-spacing: 0.3px;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(251, 113, 133, 0.28);
    transition: background 0.3s var(--transition-smooth),
                border-color 0.3s var(--transition-smooth),
                box-shadow 0.3s var(--transition-smooth),
                color 0.3s var(--transition-smooth),
                opacity 0.3s var(--transition-smooth),
                transform 0.3s var(--transition-smooth);
}
.btn-demo:hover { opacity: 0.88; box-shadow: 0 8px 24px rgba(251, 113, 133, 0.36); }
.btn-demo:active { transform: scale(0.97); }
.btn-reset-ghost {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 24px;
    background: #FFFFFF;
    color: var(--text-primary);
    border: 1.5px solid var(--surface-border);
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font-head);
    letter-spacing: 0.3px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.3s var(--transition-smooth),
                border-color 0.3s var(--transition-smooth),
                box-shadow 0.3s var(--transition-smooth),
                color 0.3s var(--transition-smooth),
                opacity 0.3s var(--transition-smooth),
                transform 0.3s var(--transition-smooth);
}
.btn-reset-ghost:hover { border-color: var(--brand-primary); color: var(--brand-primary); box-shadow: 0 4px 12px rgba(251, 113, 133, 0.12); }
.btn-reset-ghost:active { transform: scale(0.97); }

/* --- SCROLL TO TOP BUTTON --- */
#scrollToTopBtn {
    position: fixed;
    bottom: 40px;
    right: 40px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--brand-gradient);
    border: none;
    color: white;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(251, 113, 133, 0.3);
    transition: background 0.3s var(--transition-smooth),
                border-color 0.3s var(--transition-smooth),
                box-shadow 0.3s var(--transition-smooth),
                color 0.3s var(--transition-smooth),
                opacity 0.3s var(--transition-smooth),
                transform 0.3s var(--transition-smooth);
    z-index: 999;
}

#scrollToTopBtn:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(251, 113, 133, 0.4);
}

#scrollToTopBtn:active {
    transform: translateY(-2px);
}

#scrollToTopBtn svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

/* --- FOOTER --- */
#app-footer-nav {
    display: none !important;
}

#app-footer {
    position: static;
    bottom: auto;
    left: auto;
    right: auto;
    background: var(--surface-card);
    border-top: 1.5px solid var(--surface-border);
    padding: 24px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--text-secondary);
    z-index: 100;
    margin-top: 80px;
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    #app-footer {
        flex-direction: column;
        gap: 16px;
        padding: 20px;
        text-align: center;
    }
}

.footer-link {
    background: none;
    border: none;
    color: var(--brand-primary);
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: color 0.2s var(--transition-smooth);
    padding: 4px 8px;
    position: relative;
}

.footer-link:hover {
    opacity: 0.8;
}

.footer-link::after {
    content: attr(data-subtitle);
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    color: var(--text-tertiary);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}

.footer-link:hover::after {
    opacity: 1;
}

.footer-link:hover {
    color: var(--brand-hover);
    text-decoration: underline;
}

/* --- PREMIUM MODAL STYLES --- */
.premium-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(31, 41, 55, 0.75);
    z-index: 2100;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    padding: 20px;
    animation: fadeIn 0.3s var(--transition-smooth);
}

.premium-modal.show {
    display: flex;
}

.premium-modal-container {
    background: white;
    border-radius: 20px;
    padding: 0;
    box-shadow: 0 32px 96px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(251, 113, 133, 0.08) inset;
    max-width: 600px;
    width: 100%;
    max-height: 85vh;
    overflow: hidden;
    animation: modalSlideIn 0.4s var(--transition-bouncy);
    position: relative;
    display: flex;
    flex-direction: column;
}

.premium-modal-header {
    background: linear-gradient(135deg, #1F2937 0%, #374151 100%);
    padding: 20px 28px;
    position: relative;
}

.premium-modal-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}

.premium-modal-subtitle {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
    margin: 8px 0 0;
    font-weight: 700;
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
    text-align: center;
}

.premium-modal-close {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s var(--transition-smooth),
                border-color 0.2s var(--transition-smooth),
                box-shadow 0.2s var(--transition-smooth),
                color 0.2s var(--transition-smooth),
                opacity 0.2s var(--transition-smooth),
                transform 0.2s var(--transition-smooth);
    font-size: 18px;
    line-height: 1;
}

.premium-modal-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.premium-modal-content {
    padding: 40px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
}

.premium-modal-body {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-primary);
}

/* --- LANGUAGE MODAL STYLES --- */
.language-option-btn:hover {
    border-color: var(--brand-primary) !important;
    background: var(--brand-light) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(251, 113, 133, 0.15);
}

.language-option-btn.active {
    border-color: var(--brand-primary) !important;
    background: var(--brand-light) !important;
}

/* --- TERMS OF SERVICE MODAL --- */
#tos-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(31, 41, 55, 0.75);
    z-index: 2100;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    padding: 20px;
    animation: fadeIn 0.3s var(--transition-smooth);
}

.tos-container {
    background: white;
    border-radius: var(--radius-lg);
    padding: 48px;
    box-shadow: 0 24px 72px rgba(0, 0, 0, 0.3);
    max-width: 700px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    animation: popIn 0.4s var(--transition-smooth);
}

.tos-container h2 {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--text-primary);
}

.tos-container .tos-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 24px;
}

.tos-container .tos-content {
    font-size: 13px;
    line-height: 1.8;
    color: var(--text-primary);
}

.tos-content h3 {
    font-size: 14px;
    font-weight: 700;
    margin-top: 20px;
    margin-bottom: 12px;
    color: var(--text-primary);
}

.tos-content p {
    margin: 12px 0;
}

.tos-buttons {
    display: flex;
    gap: 12px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--surface-border);
}

.tos-btn {
    flex: 1;
    padding: 12px 20px;
    border-radius: 8px;
    border: none;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.3s var(--transition-smooth),
                border-color 0.3s var(--transition-smooth),
                box-shadow 0.3s var(--transition-smooth),
                color 0.3s var(--transition-smooth),
                opacity 0.3s var(--transition-smooth),
                transform 0.3s var(--transition-smooth);
}

.tos-btn-primary {
    background: var(--brand-gradient);
    color: white;
    box-shadow: 0 8px 20px rgba(251, 113, 133, 0.2);
}

.tos-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(251, 113, 133, 0.3);
}

.tos-btn-secondary {
    background: transparent;
    color: var(--brand-primary);
    border: 1.5px solid var(--surface-border);
}

.tos-btn-secondary:hover {
    background: var(--brand-light);
    border-color: var(--brand-primary);
}

/* --- APP NAME (TOP LEFT) --- */
.app-name {
    position: fixed;
    top: 20px;
    left: 28px;
    z-index: 500;
    display: none;
    flex-direction: column;
}

.app-name-text {
    font-size: 14px;
    font-weight: 700;
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}

.app-name-subtitle {
    font-size: 10px;
    color: var(--text-tertiary);
    margin: 1px 0 0;
    font-weight: 500;
    letter-spacing: 0.2px;
}

@media (max-width: 768px) {
    /* Hide floating brand lockup on small screens to avoid overlap */
    .app-name {
        display: none !important;
    }
}

/* --- LAYOUT --- */
.container {
    max-width: 960px;
    margin: 0 auto;
    padding: 40px 20px;
}
@media (max-width: 768px) {
    .container {
        max-width: 100%;
        padding: 20px 12px;
    }
    .card {
        padding: 20px 16px;
    }
}

header {
    display: block;
    text-align: center;
    margin: 10px 0 20px;
}

header h1 {
    margin: 0 0 8px;
    font-family: var(--font-head);
    font-size: clamp(22px, 3.4vw, 32px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    font-weight: 700;
}

/* Grid Layout */
#cvForm {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    animation: formFadeIn 0.8s var(--transition-smooth);
}
@keyframes formFadeIn {
    from { opacity: 0; } 
    to { opacity: 1; }
}
@media (min-width: 900px) {
    #cvForm { grid-template-columns: repeat(12, 1fr); }
    .card:nth-of-type(1) { grid-column: span 12; } /* Profile */
    .card:nth-of-type(2) { grid-column: span 12; } /* Experience */
    .card:nth-of-type(3) { grid-column: span 6; }  /* Education */
    .card:nth-of-type(4) { grid-column: span 6; }  /* Certs */
    .card:nth-of-type(5) { grid-column: span 6; }  /* Skills */
    .card:nth-of-type(6) { grid-column: span 6; }  /* Lang */
    .card:nth-of-type(7) { grid-column: span 12; } /* Personal Projects */
    .action-container { grid-column: span 12; }
}

/* --- CARD SYSTEM --- */
.card {
    background: var(--surface-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 44px;
    border: 1px solid var(--surface-border);
    transition: background 0.4s var(--transition-smooth),
                border-color 0.4s var(--transition-smooth),
                box-shadow 0.4s var(--transition-smooth),
                color 0.4s var(--transition-smooth),
                opacity 0.4s var(--transition-smooth),
                transform 0.4s var(--transition-smooth);
    animation: cardSlideUp 0.6s var(--transition-smooth);
}
@keyframes cardSlideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.card:nth-of-type(1) { animation-delay: 0.1s; }
.card:nth-of-type(2) { animation-delay: 0.2s; background: linear-gradient(to bottom, #FFFFFF 0%, rgba(245, 158, 11, 0.02) 100%); }
.card:nth-of-type(3) { animation-delay: 0.3s; background: linear-gradient(to bottom, #FFFFFF 0%, rgba(6, 182, 212, 0.02) 100%); }
.card:nth-of-type(4) { animation-delay: 0.35s; background: linear-gradient(to bottom, #FFFFFF 0%, rgba(236, 72, 153, 0.02) 100%); }
.card:nth-of-type(5) { animation-delay: 0.4s; background: linear-gradient(to bottom, #FFFFFF 0%, rgba(139, 92, 246, 0.02) 100%); }
.card:nth-of-type(6) { animation-delay: 0.45s; background: linear-gradient(to bottom, #FFFFFF 0%, rgba(99, 102, 241, 0.02) 100%); }
.card:hover { 
    box-shadow: var(--shadow-hover);
    border-color: rgba(251, 113, 133, 0.12);
}

.section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 32px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--surface-border);
    position: sticky;
    top: 0;
    background: inherit;
    z-index: 10;
    transition: background 0.3s var(--transition-smooth),
                border-color 0.3s var(--transition-smooth),
                box-shadow 0.3s var(--transition-smooth),
                color 0.3s var(--transition-smooth),
                opacity 0.3s var(--transition-smooth),
                transform 0.3s var(--transition-smooth);
}
.card:nth-of-type(2) .section-title { border-bottom-color: rgba(245, 158, 11, 0.25); }
.card:nth-of-type(3) .section-title { border-bottom-color: rgba(6, 182, 212, 0.25); }
.card:nth-of-type(4) .section-title { border-bottom-color: rgba(236, 72, 153, 0.25); }
.card:nth-of-type(5) .section-title { border-bottom-color: rgba(139, 92, 246, 0.25); }
.card:nth-of-type(6) .section-title { border-bottom-color: rgba(99, 102, 241, 0.25); }
.section-title h2 { 
    font-family: var(--font-head); 
    font-size: 18px; 
    margin: 0; 
    font-weight: 700; 
    color: var(--text-primary);
    transition: background 0.3s var(--transition-smooth),
                border-color 0.3s var(--transition-smooth),
                box-shadow 0.3s var(--transition-smooth),
                color 0.3s var(--transition-smooth),
                opacity 0.3s var(--transition-smooth),
                transform 0.3s var(--transition-smooth);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.section-title h2:hover {
    letter-spacing: 1px;
    color: var(--brand-primary);
}

/* --- INPUT GRID SYSTEMS --- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; margin-bottom: 20px; }

/* Specialized grids */
.grid-skill-detailed { display: grid; grid-template-columns: 1fr 1.5fr; gap: 15px; margin-bottom: 15px; align-items: start;}

/* Unified Timeline Row */
.timeline-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 15px;
    background: #FAFAFA;
    padding: 12px;
    border-radius: var(--radius-std);
    border: 1px solid var(--surface-border);
    flex-wrap: wrap;
}
.timeline-inputs { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 350px; }

@media(max-width: 768px) { 
    .grid-2, .grid-3, .grid-skill-detailed, .timeline-row, .timeline-inputs { 
        grid-template-columns: 1fr; 
        flex-direction: column;
        display: grid;
        gap: 15px;
    }
    .timeline-row { align-items: stretch; }
    .timeline-inputs { min-width: 0; }
}

.form-group { margin-bottom: 16px; position: relative; }
.grid-2 .form-group, .grid-3 .form-group, .grid-skill-detailed .form-group { margin-bottom: 0; }

label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: color 0.2s var(--transition-smooth);
}

/* --- INPUTS --- */
input, textarea, select {
    width: 100%;
    padding: 11px 14px;
    height: var(--input-height);
    border: 1.5px solid var(--surface-border);
    border-radius: var(--radius-std);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    background: #FAFBFC;
    transition: background 0.3s var(--transition-smooth),
                border-color 0.3s var(--transition-smooth),
                box-shadow 0.3s var(--transition-smooth),
                color 0.3s var(--transition-smooth),
                opacity 0.3s var(--transition-smooth),
                transform 0.3s var(--transition-smooth);
    appearance: none;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
textarea {
    white-space: pre-wrap;
    overflow: auto;
    text-overflow: clip;
}

/* --- FIELD VALUE TOOLTIP --- */
.field-tooltip {
    position: fixed;
    z-index: 9999;
    background: var(--text-primary);
    color: #fff;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    padding: 8px 14px;
    border-radius: 8px;
    max-width: min(90vw, 380px);
    word-break: break-word;
    white-space: normal;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.2s, transform 0.2s;
}
.field-tooltip.visible {
    opacity: 1;
    transform: translateY(0);
}
input:focus, textarea:focus, select:focus {
    background: #FFFFFF;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 5px rgba(251, 113, 133, 0.1), inset 0 1px 2px rgba(0, 0, 0, 0.04);
    transform: translateY(-2px);
}
input:hover:not(:focus), textarea:hover:not(:focus), select:hover:not(:focus) {
    border-color: rgba(251, 113, 133, 0.4);
    background: #FFFFFF;
}
textarea { resize: vertical; min-height: 90px; height: auto; line-height: 1.5; padding: 11px 12px;}

/* --- DYNAMIC ITEMS & REMOVE BTN (UPDATED) --- */
.dynamic-item {
    position: relative;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(15, 23, 42, 0.02) 100%);
    border-bottom: 1px solid var(--surface-border);
    padding: 24px 24px 24px 0;
    margin-bottom: 24px;
    padding-right: 0;
    border-radius: 12px;
    padding-left: 24px;
    animation: fadeIn 0.4s var(--transition-smooth);
    transition: background 0.3s var(--transition-smooth),
                border-color 0.3s var(--transition-smooth),
                box-shadow 0.3s var(--transition-smooth),
                color 0.3s var(--transition-smooth),
                opacity 0.3s var(--transition-smooth),
                transform 0.3s var(--transition-smooth);
}
.dynamic-item:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(251, 113, 133, 0.03) 100%);
    border-bottom-color: rgba(251, 113, 133, 0.15);
}
.dynamic-item:last-child { border: none; margin-bottom: 0; padding-bottom: 24px; }

/* Premium Remove Button */
.btn-remove {
    position: absolute;
    top: -10px; right: -10px;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.08);
    border: 1.5px solid rgba(239, 68, 68, 0.3);
    color: #EF4444;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    z-index: 10;
    transition: background 0.3s var(--transition-bouncy),
                border-color 0.3s var(--transition-bouncy),
                box-shadow 0.3s var(--transition-bouncy),
                color 0.3s var(--transition-bouncy),
                opacity 0.3s var(--transition-bouncy),
                transform 0.3s var(--transition-bouncy);
    padding: 0;
    opacity: 0.5;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.08);
}
.btn-remove svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;}

.btn-remove:hover { 
    opacity: 1;
    transform: scale(1.15) rotate(90deg);
    background: rgba(239, 68, 68, 0.15);
    border-color: #EF4444;
    box-shadow: 0 6px 16px rgba(239, 68, 68, 0.2);
}

.btn-remove:active { 
    transform: scale(0.92) rotate(90deg);
}

.btn-add {
    width: 100%;
    padding: 15px;
    background: #FFFFFF;
    border: 1.5px dashed rgba(251, 113, 133, 0.25);
    color: var(--brand-primary);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    border-radius: var(--radius-std);
    margin-top: 28px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: background 0.3s var(--transition-bouncy),
                border-color 0.3s var(--transition-bouncy),
                box-shadow 0.3s var(--transition-bouncy),
                color 0.3s var(--transition-bouncy),
                opacity 0.3s var(--transition-bouncy),
                transform 0.3s var(--transition-bouncy);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.btn-add:hover { 
    background: var(--brand-light); 
    border-color: var(--brand-primary); 
    border-style: solid;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(251, 113, 133, 0.18);
}
.btn-add:active {
    transform: translateY(0);
}

/* --- DATE PICKER & SELECTS --- */
.date-container-modern {
    display: flex; 
    align-items: center;
    background: #FAFBFC; 
    border: 1.5px solid var(--surface-border);
    border-radius: var(--radius-std);
    padding: 6px 10px;
    gap: 8px;
    width: 100%;
    height: 40px;
    transition: background 0.3s var(--transition-smooth),
                border-color 0.3s var(--transition-smooth),
                box-shadow 0.3s var(--transition-smooth),
                color 0.3s var(--transition-smooth),
                opacity 0.3s var(--transition-smooth),
                transform 0.3s var(--transition-smooth);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02);
}
.date-container-modern:focus-within {
    background: #FFFFFF;
    border-color: var(--brand-primary);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02), 0 0 0 4px rgba(251, 113, 133, 0.1);
}

.date-half { flex: 1; position: relative; }

.custom-select-wrapper { position: relative; width: 100%; font-size: 13px; user-select: none; }

.custom-select-trigger {
    display: flex; justify-content: space-between; align-items: center;
    background: transparent;
    padding: 0 8px;
    border: none;
    cursor: pointer;
    height: 28px; 
    color: var(--text-primary);
}
.date-separator { color: var(--text-tertiary); font-weight: 300; }

.custom-select-trigger span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; font-weight: 500; }

.custom-arrow {
    width: 5px; height: 5px;
    border-right: 1.5px solid #94A3B8; border-bottom: 1.5px solid #94A3B8;
    transform: rotate(45deg); margin-left: 6px; flex-shrink: 0; margin-top: -2px;
}
.custom-select-wrapper.open .custom-arrow { transform: rotate(225deg); margin-top: 2px; border-color: var(--brand-primary); }

.custom-options {
    position: absolute; top: 36px; left: 0; min-width: 120px;
    border-radius: 10px;
    border: 1px solid var(--surface-border);
    background: #FFFFFF;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    z-index: 200; padding: 8px;
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-10px) scale(0.95);
    transition: background 0.25s var(--transition-smooth),
                border-color 0.25s var(--transition-smooth),
                box-shadow 0.25s var(--transition-smooth),
                color 0.25s var(--transition-smooth),
                opacity 0.25s var(--transition-smooth),
                transform 0.25s var(--transition-smooth);
    max-height: 250px; overflow-y: auto;
}
.custom-select-wrapper.open .custom-options { 
    opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); 
}
.custom-option { 
    padding: 10px 14px; cursor: pointer; border-radius: 7px; color: var(--text-primary); font-size: 13px;
    transition: background 0.2s var(--transition-smooth),
                border-color 0.2s var(--transition-smooth),
                box-shadow 0.2s var(--transition-smooth),
                color 0.2s var(--transition-smooth),
                opacity 0.2s var(--transition-smooth),
                transform 0.2s var(--transition-smooth);
    font-weight: 500;
}
.custom-option:hover { 
    background: var(--brand-light); 
    color: var(--brand-primary);
    transform: translateX(4px);
}
.custom-select-wrapper.disabled { opacity: 0.4; pointer-events: none; }

/* --- 🪜 INTERACTIVE SEGMENTED BAR (Step Bar) --- */
.segmented-control-container {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
}

.segmented-bar {
    display: flex;
    gap: 5px;
    flex: 1;
    height: 30px;
    cursor: pointer;
}

.segment-block {
    flex: 1;
    height: 100%;
    background-color: #E8EEF8;
    border-radius: 8px;
    position: relative;
    transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    box-shadow: none;
    border: 1px solid rgba(251, 113, 133, 0.15);
}

/* Interaction States */
.segment-block.active { 
    background: linear-gradient(135deg, #FB7185 0%, #F43F5E 100%);
    box-shadow: 0 2px 8px rgba(251, 113, 133, 0.3);
    border-color: #FB7185;
}
.segment-block.preview { 
    background: rgba(251, 113, 133, 0.15);
    transform: scale(1.05);
} 

.segment-block:active { transform: scale(0.98); }

/* The Label Capsule */
.segment-label {
    font-size: 12px; font-weight: 600; 
    color: var(--brand-primary); 
    min-width: 110px; text-align: center; 
    background: linear-gradient(135deg, rgba(251, 113, 133, 0.08) 0%, rgba(251, 113, 133, 0.04) 100%);
    padding: 7px 14px;
    border-radius: 8px;
    transition: background 0.3s var(--transition-smooth),
                border-color 0.3s var(--transition-smooth),
                box-shadow 0.3s var(--transition-smooth),
                color 0.3s var(--transition-smooth),
                opacity 0.3s var(--transition-smooth),
                transform 0.3s var(--transition-smooth);
    box-shadow: 0 2px 6px rgba(251, 113, 133, 0.1);
    letter-spacing: 0px;
    text-transform: capitalize;
    border: 1px solid rgba(251, 113, 133, 0.12);
}

/* --- ELEGANT CHECKBOX TOGGLE --- */
.elegant-checkbox {
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    margin: 0;
    text-transform: none;
    letter-spacing: normal;
}

.elegant-checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    margin: 0;
    padding: 0;
}

.elegant-checkbox-box {
    position: relative;
    width: 24px;
    height: 24px;
    min-width: 24px;
    border: 1.5px solid var(--surface-border);
    border-radius: 7px;
    background: #FAFBFC;
    transition: background 0.3s var(--transition-smooth),
                border-color 0.3s var(--transition-smooth),
                box-shadow 0.3s var(--transition-smooth),
                color 0.3s var(--transition-smooth),
                opacity 0.3s var(--transition-smooth),
                transform 0.3s var(--transition-smooth);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
}
.elegant-checkbox-box:hover {
    border-color: rgba(251, 113, 133, 0.5);
    background: rgba(251, 113, 133, 0.05);
}
.elegant-checkbox input[type="checkbox"]:checked + .elegant-checkbox-box {
    background: var(--brand-gradient);
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 4px rgba(251, 113, 133, 0.12);
    transform: scale(1.08);
}

.elegant-checkbox-box::after {
    content: "✓";
    color: white;
    font-size: 12px;
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.2s;
}

.elegant-checkbox input[type="checkbox"]:checked + .elegant-checkbox-box::after {
    opacity: 1;
}

.elegant-checkbox-label {
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.2s;
}

.elegant-checkbox input[type="checkbox"]:checked ~ .elegant-checkbox-label {
    color: var(--brand-primary);
    font-weight: 500;
}

/* --- PHOTO UPLOAD --- */
.photo-uploader-container { display: flex; justify-content: center; margin-bottom: 44px; animation: photoFadeIn 0.8s var(--transition-smooth); }
@keyframes photoFadeIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
.photo-circle-wrapper {
    width: 150px; height: 150px;
    border-radius: 50%; cursor: pointer; transition: background 0.4s var(--transition-bouncy),
                border-color 0.4s var(--transition-bouncy),
                box-shadow 0.4s var(--transition-bouncy),
                color 0.4s var(--transition-bouncy),
                opacity 0.4s var(--transition-bouncy),
                transform 0.4s var(--transition-bouncy); position: relative;
    box-shadow: 0 12px 36px rgba(251, 113, 133, 0.16);
}
.photo-circle-wrapper:hover { 
    transform: scale(1.06) translateY(-6px);
    box-shadow: 0 18px 48px rgba(251, 113, 133, 0.24);
}
.avatar-preview {
    width: 100%; height: 100%; border-radius: 50%;
    background: linear-gradient(135deg, #FFFFFF 0%, #F0F4F9 100%);
    border: 2px solid rgba(251, 113, 133, 0.2);
    overflow: hidden; display: flex; align-items: center; justify-content: center;
    transition: background 0.3s var(--transition-smooth),
                border-color 0.3s var(--transition-smooth),
                box-shadow 0.3s var(--transition-smooth),
                color 0.3s var(--transition-smooth),
                opacity 0.3s var(--transition-smooth),
                transform 0.3s var(--transition-smooth);
}
.photo-circle-wrapper:hover .avatar-preview {
    border-color: rgba(251, 113, 133, 0.4);
    background: linear-gradient(135deg, #F8FAFC 0%, #EFF6FF 100%);
}
.photo-overlay {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(251, 113, 133, 0.45); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.3s var(--transition-smooth);
    backdrop-filter: blur(3px);
}
.photo-circle-wrapper:hover .photo-overlay { opacity: 1; }

/* --- SOCIAL BUTTONS --- */
.social-buttons-container { display: flex; gap: 8px; margin-top: 8px; justify-content: center; }
.social-btn {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 12px;
    border: 1.5px solid #E2E8F0; background: #FAFBFC;
    cursor: pointer; color: var(--text-secondary); transition: background 0.3s var(--transition-smooth),
                border-color 0.3s var(--transition-smooth),
                box-shadow 0.3s var(--transition-smooth),
                color 0.3s var(--transition-smooth),
                opacity 0.3s var(--transition-smooth),
                transform 0.3s var(--transition-smooth);
}
.social-btn:hover { border-color: var(--brand-primary); background: var(--brand-light); color: var(--brand-primary); transform: translateY(-3px); box-shadow: 0 6px 16px rgba(251, 113, 133, 0.15); }

/* --- ACTION BUTTON --- */
.action-container { margin-top: 48px; text-align: center; display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; animation: actionFadeIn 1s var(--transition-smooth); }
@keyframes actionFadeIn { from { opacity: 0; } to { opacity: 1; } }
.btn-generate {
    background: var(--brand-gradient); color: white; border: none;
    padding: 16px 56px; font-size: 15px; font-weight: 700;
    border-radius: 50px; cursor: pointer;
    box-shadow: 0 12px 28px rgba(251, 113, 133, 0.28);
    transition: background 0.4s var(--transition-bouncy),
                border-color 0.4s var(--transition-bouncy),
                box-shadow 0.4s var(--transition-bouncy),
                color 0.4s var(--transition-bouncy),
                opacity 0.4s var(--transition-bouncy),
                transform 0.4s var(--transition-bouncy); 
    font-family: var(--font-head);
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
}
.btn-generate:before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: rgba(255, 255, 255, 0.25);
    transition: left 0.5s var(--transition-smooth);
}
.btn-generate:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(251, 113, 133, 0.35);
}
.btn-generate:hover:before {
    left: 100%;
}
.btn-generate:active {
    transform: translateY(-2px);
}

/* --- PROGRESS --- */
#progress-widget {
    position: fixed; top: 24px; right: 24px;
    background: rgba(255, 255, 255, 0.92);
    padding: 10px 16px; border-radius: 50px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.12);
    z-index: 1000; display: flex; align-items: center; gap: 10px;
    font-size: 13px; font-weight: 700; color: var(--text-primary);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.5);
    cursor: pointer;
    transition: background 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
                border-color 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
                color 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
                opacity 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
                transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

#progress-widget:hover {
    transform: scale(1.1);
    box-shadow: 0 16px 40px rgba(0,0,0,0.18);
}

#progress-widget::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: rgba(15, 23, 42, 0.95);
    color: white;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: background 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
                border-color 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
                color 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
                opacity 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
                transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    transform: translateY(4px);
    z-index: 1001;
}

#progress-widget:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

@media (max-width: 768px) {
    #progress-widget {
        top: 12px;
        right: 12px;
        padding: 8px 12px;
        font-size: 12px;
    }
    .progress-ring {
        width: 16px !important;
        height: 16px !important;
    }
    #progress-text {
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    #progress-widget {
        top: 8px;
        right: 8px;
        padding: 6px 10px;
        font-size: 11px;
    }
}
.progress-ring { position: relative; width: 20px; height: 20px; }
.progress-ring svg { transform: rotate(-90deg); width: 100%; height: 100%; }
.progress-ring circle { fill: none; stroke-width: 3; }
.ring-bg { stroke: #E2E8F0; }
.ring-val { stroke: var(--brand-primary); stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 0.8s; stroke-linecap: round; }

/* --- PREVIEW MODAL --- */
#preview-modal {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(15, 23, 42, 0.7); z-index: 2000;
    display: none; flex-direction: column; align-items: center; justify-content: center;
    backdrop-filter: blur(16px);
}

#loading-modal {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(15, 23, 42, 0.7); z-index: 2000;
    display: none; flex-direction: column; align-items: center; justify-content: center;
    backdrop-filter: blur(16px);
}

.loading-container {
    background: white;
    border-radius: var(--radius-lg);
    padding: 48px 48px;
    box-shadow: 0 24px 72px rgba(0, 0, 0, 0.3);
    text-align: center;
    max-width: 500px;
    width: 90%;
    animation: popIn 0.4s var(--transition-smooth);
    display: flex;
    flex-direction: column;
    gap: 24px;
}
@keyframes popIn { 
    from { opacity: 0; transform: scale(0.95) translateY(-20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.loading-title {
    display: none;
}

.loading-subtitle {
    order: 2;
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 0;
}

.progress-bar-container {
    width: 100%;
    height: 8px;
    background: #E8EEF8;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 16px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #FB7185 0%, #F43F5E 100%);
    width: 0%;
    border-radius: 10px;
    transition: width 0.3s var(--transition-smooth);
    box-shadow: 0 2px 8px rgba(251, 113, 133, 0.3);
}

.progress-percentage {
    font-size: 13px;
    font-weight: 600;
    color: var(--brand-primary);
    margin-bottom: 24px;
}

/* Sponsor slot in the "generating your CV" modal. The 336x280 box is the IAB
   large rectangle, so an ad unit can take this space as-is; the dashed edge is
   what marks it as reserved rather than broken. It shrinks on narrow screens
   instead of overflowing, which the fixed 180px height used to do. */
.future-space {
    order: 1;
    width: 100%;
    max-width: 336px;
    margin: 0 auto;
    aspect-ratio: 336 / 280;
    min-height: 180px;
    padding: 0;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(251, 113, 133, 0.05) 0%, rgba(251, 113, 133, 0.02) 100%);
    border: 1.5px dashed rgba(251, 113, 133, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
    font-size: 13px;
    font-weight: 500;
}

.future-space-art {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* The modal is 500px wide with 48px of padding, which leaves 404px - room for
   the slot. On a phone the padding is what squeezes it, so ease that off. */
@media (max-width: 480px) {
    .loading-container { padding: 32px 20px; gap: 18px; }
}

.btn-show-result {
    order: 3;
    background: var(--brand-gradient);
    color: white;
    border: none;
    padding: 14px 32px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s var(--transition-smooth),
                border-color 0.3s var(--transition-smooth),
                box-shadow 0.3s var(--transition-smooth),
                color 0.3s var(--transition-smooth),
                opacity 0.3s var(--transition-smooth),
                transform 0.3s var(--transition-smooth);
    width: 100%;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 8px 20px rgba(251, 113, 133, 0.2);
}

.btn-show-result:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(251, 113, 133, 0.3);
}

.btn-show-result:active {
    transform: translateY(0);
}

.progress-bar-container {
    order: 4;
    width: 100%;
    height: 8px;
    background: #E8EEF8;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 0;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.progress-percentage {
    order: 5;
    font-size: 13px;
    font-weight: 600;
    color: var(--brand-primary);
    margin-bottom: 0;
}

/* --- TOOLTIP STYLES --- */
.tooltip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(251, 113, 133, 0.1);
    color: var(--brand-primary);
    font-size: 12px;
    font-weight: 700;
    cursor: help;
    margin-left: 8px;
    position: relative;
    transition: background 0.2s var(--transition-smooth),
                border-color 0.2s var(--transition-smooth),
                box-shadow 0.2s var(--transition-smooth),
                color 0.2s var(--transition-smooth),
                opacity 0.2s var(--transition-smooth),
                transform 0.2s var(--transition-smooth);
}

.tooltip-icon:hover {
    background: rgba(251, 113, 133, 0.2);
    transform: scale(1.1);
}

.tooltip-text {
    position: absolute;
    bottom: 130%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--text-primary);
    color: white;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    white-space: normal;
    width: 200px;
    text-align: center;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: background 0.3s var(--transition-smooth),
                border-color 0.3s var(--transition-smooth),
                box-shadow 0.3s var(--transition-smooth),
                color 0.3s var(--transition-smooth),
                opacity 0.3s var(--transition-smooth),
                transform 0.3s var(--transition-smooth);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.tooltip-text::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--text-primary);
}

.tooltip-icon:hover .tooltip-text {
    opacity: 1;
    pointer-events: auto;
}

/* --- LANGUAGE MODAL STYLES --- */
/* Used by .premium-modal and the loading overlay. */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Used by .premium-modal-container. Defined here because its only definition
   used to live inside the duplicate language modal's block, below. */
@keyframes modalSlideIn {
    from { opacity: 0; transform: translateY(20px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* The #language-modal / .language-btn / .language-modal-* rules that used to sit
   here styled a second, duplicate language modal that shared its id with the real
   one. That markup is gone, but the rules outlived it — and because #language-modal
   is an id, it was still beating .premium-modal on the surviving modal and dropping
   its flex-direction: column. Removed along with the markup. */

/* --- LANGUAGE SELECTOR IN HEADER --- */
.header-language-selector {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 500;
    display: none;
}

.header-language-selector.show {
    display: block;
}

.lang-select-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--surface-card);
    border: 1.5px solid var(--surface-border);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s var(--transition-smooth),
                border-color 0.2s var(--transition-smooth),
                box-shadow 0.2s var(--transition-smooth),
                color 0.2s var(--transition-smooth),
                opacity 0.2s var(--transition-smooth),
                transform 0.2s var(--transition-smooth);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    box-shadow: var(--shadow-card);
}

.lang-select-btn:hover {
    border-color: var(--brand-primary);
    background: var(--brand-light);
    transform: translateY(-1px);
    box-shadow: var(--shadow-hover);
}

.lang-select-btn svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 2;
}

@media (max-width: 768px) {
    .header-language-selector {
        display: none !important;
    }
    
}
#preview-toolbar {
    width: 100%; background: #fff; padding: 18px 28px; 
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid #E2E8F0;
}
.toolbar-group { display: flex; gap: 12px; }
.tool-btn {
    background: var(--surface-card); 
    color: var(--text-primary); 
    border: 1px solid var(--surface-border);
    padding: 8px 16px; 
    border-radius: 12px; 
    cursor: pointer; 
    font-size: 13px; 
    font-weight: 600;
    transition: background 0.2s var(--transition-smooth),
                border-color 0.2s var(--transition-smooth),
                box-shadow 0.2s var(--transition-smooth),
                color 0.2s var(--transition-smooth),
                opacity 0.2s var(--transition-smooth),
                transform 0.2s var(--transition-smooth);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.tool-btn:hover {
    background: var(--bg-body);
    border-color: rgba(251, 113, 133, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.tool-btn:active {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}
.tool-btn.active { 
    background: var(--brand-gradient); 
    color: #FFF; 
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(251, 113, 133, 0.3);
}
.tool-btn.primary { background: var(--brand-primary); color: white; border-color: transparent; }
.tool-btn.primary:hover { background: var(--brand-hover); }

/* --- PREVIEW DISCLAIMER BANNER --- */
.preview-disclaimer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 9px 24px;
    background: #000;
    flex-shrink: 0;
}
.preview-disclaimer-text {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.72);
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.1px;
}
.preview-disclaimer-close {
    background: none;
    border: none;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    padding: 2px 0;
    line-height: 1;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-family: var(--font-body);
    font-weight: 500;
    transition: color 0.2s;
}
.preview-disclaimer-close:hover { color: rgba(255, 255, 255, 0.8); }
.preview-disclaimer.hidden { display: none; }

#paper-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; width: 100%; padding: 40px 0; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; gap: 24px; }
.cv-sheet { width: 210mm; min-height: 297mm; background: white; }
/* A preview page is always a true A4 sheet; only its presentation is scaled.
   --preview-scale is set by applyPreviewScale() because CSS cannot divide one
   length by another to produce a ratio. The frame carries the scaled layout
   box, since a transformed element still occupies its untransformed one. */
.cv-page-frame {
    width: calc(210mm * var(--preview-scale, 1));
    height: calc(297mm * var(--preview-scale, 1));
    flex-shrink: 0;
}

.cv-page-clip {
    width: 210mm;
    height: 297mm;
    overflow: hidden;
    position: relative;
    background: white;
    box-shadow: 0 24px 72px rgba(0,0,0,0.28);
    flex-shrink: 0;
    transform: scale(var(--preview-scale, 1));
    transform-origin: top left;
}

/* Prevent long URLs/words from overflowing page edges */
.cv-sheet,
.cv-sheet * {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* --- JAKARTA TEMPLATE --- */
.cv-sheet.t-jakarta {
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
    padding: 48px;
    background: white;
    color: #1a1a1a;
}

.cv-sheet.t-jakarta header h1 {
    font-size: 36px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 8px;
    letter-spacing: -0.5px;
}

.cv-sheet.t-jakarta .section-title,
.cv-sheet.t-jakarta h3 {
    font-size: 13px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #1a1a1a;
    margin-top: 28px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid #2C3E50;
}

/* --- ROBOTIC TEMPLATE (MINIMAL/TECHNICAL STYLE) --- */
.cv-sheet.t-robotic {
    font-family: 'IBM Plex Mono', -apple-system, sans-serif;
    padding: 44px;
    background: white;
    color: #2C3E50;
}

.cv-sheet.t-robotic header h1 {
    font-size: 32px;
    font-weight: 700;
    color: #1A3A52;
    margin: 0 0 4px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.cv-sheet.t-robotic h3 {
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 2px;
    color: #1A3A52;
    margin-top: 24px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 2px solid #E8EEF5;
}

.cv-sheet.t-robotic .skill-bar,
.cv-sheet.t-robotic .lang-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    font-size: 12px;
}

.cv-sheet.t-robotic .bar-container {
    flex: 1;
    height: 6px;
    background: #E8EEF5;
    border-radius: 3px;
    overflow: hidden;
}

.cv-sheet.t-robotic .bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #2E5090, #1A3A52);
    border-radius: 3px;
}

/* Print & Template Styles */
@media print {
    body * { visibility: hidden; }
    #preview-modal, #preview-modal * { visibility: visible; }
    #preview-modal { position: absolute; left: 0; top: 0; background: white; display: block; }
    #preview-toolbar { display: none; }
    .preview-disclaimer { display: none; }
    #paper-scroll { padding: 0; display: block; overflow: visible; gap: 0; }
    .cv-page-clip { display: none !important; }
    #cvSheet { display: block !important; visibility: visible !important; box-shadow: none; margin: 0; width: 100%; }
    @page { margin: 0; }
}

/* Mobile Preview Adjustments */
.mobile-template-select { display: none; }

@media (max-width: 768px) {
    #preview-toolbar {
        padding: 10px 12px;
        gap: 8px;
    }
    .toolbar-group {
        gap: 8px;
    }
    .toolbar-group:nth-child(2) {
        flex: 1;
        min-width: 0;
    }
    .desktop-template-btns { display: none; }
    .mobile-template-select { display: block; width: 100%; }
    #templateSelect {
        -webkit-appearance: none;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%231F2937' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        background-size: 16px;
        width: 100%;
        padding: 0 36px;
        height: 38px;
        border-radius: 12px; 
        border: 1px solid var(--surface-border);
        background-color: var(--surface-card);
        font-size: 13px; 
        font-weight: 600; 
        color: var(--text-primary);
        box-shadow: 0 1px 2px rgba(0,0,0,0.05);
        transition: background 0.2s var(--transition-smooth),
                border-color 0.2s var(--transition-smooth),
                box-shadow 0.2s var(--transition-smooth),
                color 0.2s var(--transition-smooth),
                opacity 0.2s var(--transition-smooth),
                transform 0.2s var(--transition-smooth);
        text-align: center;
    }
    #templateSelect:hover, #templateSelect:focus {
        border-color: rgba(251, 113, 133, 0.4);
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        outline: none;
    }
    .tool-btn { padding: 0 12px; height: 38px; font-size: 13px; white-space: nowrap; }
    #paper-scroll {
        padding: 12px 8px;
        gap: 12px;
        align-items: center;
    }
    /* #cvSheet and .cv-page-clip deliberately keep their true A4 dimensions
       here. They used to be squashed to the viewport width, which left the
       type inside at full size against a half-size page, and made the
       pagination measure a narrow, much taller document than the one being
       paginated. The scaling now happens via --preview-scale instead. */
}

.t-minimal { padding: 45px; font-family: 'Inter', sans-serif; color: #333; line-height: 1.5; }
.t-minimal header { text-align: left; margin-bottom: 40px; border-bottom: 2px solid #111; padding-bottom: 25px; }
.t-exec { padding: 60px; font-family: 'Georgia', serif; }
.t-exec header { border: none; padding-bottom: 0; margin-bottom: 0; }

/* --- ELEGANT TEMPLATE --- */
.cv-sheet.t-elegant {
    font-family: 'Lato', sans-serif;
    padding: 50px 55px;
    background: white;
    color: #2C2C2C;
    line-height: 1.6;
}
.cv-sheet.t-elegant header {
    text-align: center;
    margin-bottom: 36px;
    padding-bottom: 24px;
}
.cv-sheet.t-elegant header h1 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 44px;
    font-weight: 600;
    letter-spacing: 3px;
    color: #1C1C1E;
    margin: 0 0 10px;
}
.cv-sheet.t-elegant h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 17px;
    font-weight: 600;
    font-style: italic;
    letter-spacing: 0.5px;
    color: #8B6914;
    margin: 28px 0 14px;
    padding-bottom: 6px;
    border-bottom: 1px solid #D4A843;
}

/* --- FIELD FOCUS MODE (Requirement 4.2) ---------------------------------
   Focus a field and it lifts clear of the page while everything behind it
   frosts over; blur it and it settles back. app/field-focus.js drives the
   geometry, this file only describes how each state looks.

   Depth: the veil sits at 1200, above the page furniture (progress widget
   1001, scroll-to-top 999) and below the modals (2000+), so opening a modal
   is never fought by a focused field. The lifted field rides just above it. */

.field-focus-veil {
    position: fixed;
    inset: 0;
    z-index: 1200;
    opacity: 0;
    visibility: hidden;
    background: rgba(248, 250, 252, 0.34);
    backdrop-filter: blur(7px) saturate(125%);
    -webkit-backdrop-filter: blur(7px) saturate(125%);
    will-change: opacity;
    transition: opacity 0.2s cubic-bezier(0.32, 0.72, 0, 1),
                visibility 0s linear 0.2s;
}

.field-focus-veil.is-on {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s cubic-bezier(0.32, 0.72, 0, 1),
                visibility 0s linear 0s;
}

/* Soft mode (touch, narrow screens): no repositioning, just lift the field
   out of the frosted layer so it stays legible and obviously active. */
.field-focus-group {
    z-index: 1250;
}

.field-focus-group .field-focus-field {
    background: #FFFFFF;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 5px rgba(251, 113, 133, 0.12),
                0 18px 40px -16px rgba(15, 23, 42, 0.30);
}

/* Lift mode: the field becomes a floating card. Its geometry is set inline by
   the script; everything here is presentation only, so the two never disagree
   about where the box actually is. */
.field-focus-group.is-lifted {
    contain: layout style;
    will-change: left, top, width, height;
    padding: 20px 22px 22px;
    background: var(--surface-card);
    border-radius: 18px;
    box-shadow: 0 1px 1px rgba(15, 23, 42, 0.04),
                0 8px 20px -6px rgba(15, 23, 42, 0.16),
                0 36px 70px -24px rgba(15, 23, 42, 0.34);
    transition: padding 0.2s cubic-bezier(0.32, 0.72, 0, 1),
                border-radius 0.2s cubic-bezier(0.32, 0.72, 0, 1),
                box-shadow 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}

.field-focus-group.is-lifted > label {
    color: var(--brand-primary);
}

/* The whole point of the expansion: stop clipping the value. Inputs cannot
   wrap, so they get the extra width and scroll horizontally past it;
   textareas grow downward instead (height is set by the script). */
.field-focus-group .field-focus-field {
    /* Kept deliberately narrow. The base input rule used to say
       `transition: all 0.3s`, which animated the font-size and padding the
       lifted state sets - the type grew into place over 300ms on top of the
       card's own animation and read as the panel drawing slowly. That rule now
       lists its properties, and this keeps the guarantee local. */
    transition: background-color 0.18s var(--transition-smooth),
                border-color 0.18s var(--transition-smooth),
                box-shadow 0.18s var(--transition-smooth);
}

.field-focus-group.is-lifted .field-focus-field {
    height: auto;
    font-size: 15px;
    padding: 13px 15px;
    text-overflow: clip;
    overflow-x: auto;
    transform: none;          /* the card is lifted, not the field inside it */
}

.field-focus-group.is-lifted input.field-focus-field {
    min-height: var(--input-height);
}

.field-focus-group.is-lifted textarea.field-focus-field {
    overflow-y: auto;
    line-height: 1.55;
}

/* The placeholder left behind in the grid. Invisible, but it holds the cell so
   nothing below the field moves while it is lifted. */
.field-focus-spacer {
    visibility: hidden;
    pointer-events: none;
}

/* The hover tooltip exists to reveal clipped values; a focused field is not
   clipped any more, so it would only be in the way. */
body.field-focus-on .field-tooltip {
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .field-focus-veil,
    .field-focus-group.is-lifted {
        transition: none;
    }
}

/* The wordmark doubles as the way back to the landing page; it should read as
   the heading it is, not as a default link. */
.app-name-text a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s var(--transition-smooth);
}
.app-name-text a:hover {
    color: var(--brand-primary);
}

/* Present for assistive tech and crawlers, never painted. Same definition as
   landing.css, so a heading behaves identically on both halves of the site. */
.visually-hidden {
    position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Note above the Terms telling non-English readers the legal text is English. */
.tos-note {
    margin: 0 0 20px;
    padding: 10px 14px;
    border-radius: 8px;
    background: #FAFBFC;
    border: 1px solid var(--surface-border);
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.5;
}

/* --- TOAST NOTIFICATION --- */
.toast-notification {
    position: fixed;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: rgba(16, 185, 129, 0.95);
    color: white;
    padding: 14px 24px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 12px 32px rgba(16, 185, 129, 0.3);
    z-index: 4000;
    opacity: 0;
    transition: background 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
                border-color 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
                color 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
    backdrop-filter: blur(8px);
}
.toast-notification.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}