/* ---- Shared builder base ---- */
.cv-page {
    position: relative;
    transition: width 0.6s ease, height 0.6s ease, max-height 0.6s ease, max-width 0.6s ease !important;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    width: 816px;
    max-width: 816px;
    min-height: 1056px;
    max-height: 1056px;
    height: auto;
    overflow-x: auto;
    overflow-y: hidden;
    margin: 0 auto;
    padding: 0 !important;
}
input.cv-text, textarea.cv-text { border: none; border-radius: 0; word-wrap: break-word; background: none; }
input:focus, textarea:focus { outline: none !important; }
textarea { display: block; resize: none; overflow: hidden; }
.cv-text {
    display: block;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    font-family: 'Montserrat', sans-serif !important;
    word-wrap: break-word;
    overflow: hidden;
    line-height: 1.45 !important;
    box-sizing: border-box !important;
    color: inherit;
    -webkit-font-smoothing: antialiased;
}
span.cv-text.changed { display: block !important; width: 100% !important; }
.cv-font-larger { font-size: 36px; }
.cv-font-large { font-size: 22px; }
.cv-font-medium { font-size: 16px; }
.cv-font-small { font-size: 13.5px; }
.cv-dp {
    position: relative;
    border-radius: 50%;
    background-image: url('profile.png');
    background-size: cover;
    background-position: center;
    cursor: pointer;
    overflow: hidden;
}
.cv-dp:hover { filter: brightness(0.85); }
.cv-dp input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 2; }
.cv-theme-color { color: var(--theme-color) !important; }
.cv-theme-bg { background-color: var(--theme-color) !important; }
.cv-icon { width: 16px; text-align: center; flex: 0 0 16px; font-size: 12px; }
.contact-line { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.skill-pill-container { padding: 3px 11px; border-radius: 999px; margin: 0; }
.skill-pill-container input.cv-text { font-size: 12.5px !important; }
.pill-auto input.cv-text { min-width: 3ch; max-width: 100%; }
.cv-component { position: relative; }
/* The editor pads each section by 8px for its hover outline: pull it back out so text lines up
   with the header, and keep the gap between sections compact. */
.cv-page .cv-component { margin: 0 -8px 2px !important; }
.cv-page .cv-component .component:last-child { margin-bottom: 0 !important; }
.lang-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.lang-row > div:first-child { flex: 1 1 auto; min-width: 70px; }

/* ---- Modern ---- */
:root { --theme-color: #23395b; --md-accent: #f28c28; }
.cv-page.modern-template { background-image: linear-gradient(90deg, var(--theme-color) 0, var(--theme-color) 33.3333%, #fff 33.3333%); color: #3f4654; }
.md-accent { color: var(--md-accent) !important; }
.md-dark { color: #1f2937; }
.md-sub { color: #6b7280; }
.md-body { color: #4b5563; margin-top: 3px !important; }
.md-side { color: #fff; }
.md-side-in { padding: 34px 24px 24px; }
.md-side .cv-text { color: #fff; }
.md-side-muted { color: rgba(255,255,255,.65) !important; }
.md-dp { width: 138px; height: 138px; box-shadow: 0 0 0 4px rgba(255,255,255,.18); }
.md-side-head { border-bottom: 1px solid rgba(255,255,255,.25); padding-bottom: 5px; margin-bottom: 10px; }
.md-side-title, .md-side-head span { font-size: 13px !important; letter-spacing: .12em; color: #fff !important; }
.modern-template .md-side .level-segment { background-color: rgba(255,255,255,.25); width: 14px; }
.modern-template .md-side .level-segment.active { background-color: var(--md-accent) !important; }
.md-main { padding: 34px 34px 24px 30px; }
.md-header { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 3px solid var(--md-accent); }
.md-name { color: var(--theme-color) !important; letter-spacing: -.01em; }
.md-role { letter-spacing: .14em; font-size: 14px !important; font-weight: 600; margin: 2px 0 8px !important; }
.md-head { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.md-head::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--md-accent); flex: 0 0 10px; }
.md-head::after { content: ""; flex: 1 1 auto; height: 1px; background: #e5e7eb; }
.md-head-title { width: auto !important; flex: 0 1 auto; color: var(--theme-color) !important; font-size: 15px !important; letter-spacing: .1em; }
.md-item { margin-bottom: 10px; }
.md-year { width: 110px !important; flex: 0 0 110px; font-style: italic; }