:root {
    --primary: #1e40af;
    --text-dark: #0f172a;
    --text-main: #334155;
    --text-light: #64748b;
    --border: #e2e8f0;
    --white: #ffffff;

    --primary-dark:    color-mix(in srgb, var(--primary) 75%, #000);
    --sidebar-bg:      color-mix(in srgb, var(--primary) 7%, var(--white));
    --tint-soft:       color-mix(in srgb, var(--primary) 8%, var(--white));
    --page-bg:         color-mix(in srgb, var(--primary) 3%, var(--white));
    --shadow-primary:  0 2px 8px color-mix(in srgb, var(--primary) 20%, transparent);
    --shadow-portrait: 0 4px 12px color-mix(in srgb, var(--text-dark) 8%, transparent);
}

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

body {
    font-family: 'Inter', sans-serif;
    color: var(--text-main);
    background-color: var(--page-bg);
    line-height: 1.35;
    display: flex;
    justify-content: center;
    padding: 10px;

    @media screen and (max-width: 210mm) {
        & {
            padding: 0;
            background-color: var(--white);
        }
    }
}

.print-button {
    position: fixed;
    top: 15px;
    right: 15px;
    background-color: var(--primary);
    color: var(--white);
    border: none;
    padding: 8px 14px;
    border-radius: 6px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    box-shadow: var(--shadow-primary);
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background-color 0.2s, transform 0.2s;
    z-index: 1000;

    &:hover {
        background-color: var(--primary-dark);
        transform: translateY(-2px);
    }

    svg {
        width: 15px;
        height: 15px;
    }
}

.cv-container {
    width: 210mm;
    height: 297mm;
    background-color: var(--white);
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    display: grid;
    grid-template-columns: 31% 69%;
    grid-template-rows: 1fr auto;
    overflow: hidden;
    margin: 0 auto;

    @media screen and (max-width: 210mm) {
        & {
            width: 100%;
            height: auto;
            box-shadow: none;
            grid-template-columns: 1fr;
            grid-template-rows: auto auto auto;
        }
    }
}

.sidebar {
    background-color: var(--sidebar-bg);
    padding: 25px 18px;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;

    @media screen and (max-width: 210mm) {
        & {
            border-right: none;
            border-bottom: 1px solid var(--border);
            padding: 20px 15px;
        }
    }
}

.profile-header {
    margin-bottom: 20px;
    text-align: center;

    h1 {
        font-size: 18px;
        color: var(--text-dark);
        font-weight: 800;
        letter-spacing: -0.03em;
        line-height: 1.2;
        margin-bottom: 6px;
    }

    .subtitle {
        font-size: 10.5px;
        color: var(--primary);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        line-height: 1.3;
    }
}

.profile-img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 10px;
    display: block;
    border: 3px solid var(--white);
    box-shadow: var(--shadow-portrait);
}

.sidebar-section {
    margin-bottom: 20px;

    &:not(:has(.contact-item, .skill-tag, .lang-item)) { display: none; }
}

.sidebar-h2 {
    font-size: 13px;
    color: var(--text-dark);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    margin-bottom: 10px;
    position: relative;
    padding-bottom: 4px;

    &::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 35px;
        height: 2px;
        background-color: var(--primary);
    }
}

.contact-list {
    list-style: none;
}

.contact-item {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    font-size: 11px;

    a {
        color: var(--text-main);
        text-decoration: none;
        word-break: break-all;

        &:hover {
            color: var(--primary);
            text-decoration: underline;
        }
    }
}

.contact-icon {
    width: 14px;
    height: 14px;
    margin-right: 8px;
    color: var(--primary);
    flex-shrink: 0;
}

.skills-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.skill-tag {
    background-color: var(--white);
    border: 1px solid var(--border);
    color: var(--text-main);
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 10.5px;
    font-weight: 500;
}

.skill-category {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-dark);
    margin-top: 6px;
    margin-bottom: 3px;
    width: 100%;

    &:first-child { margin-top: 0; }
}

.lang-item {
    margin-bottom: 6px;
    font-size: 11.5px;
}

.lang-name {
    font-weight: 600;
    color: var(--text-dark);
}

.lang-level {
    color: var(--text-light);
    font-size: 10.5px;
}

.main-content {
    container: cv-main / inline-size;
    padding: 25px 30px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    @media screen and (max-width: 210mm) {
        & { padding: 20px 15px; }
    }
}

.main-section {
    margin-bottom: 18px;
}

.main-h2 {
    font-size: 15px;
    color: var(--text-dark);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    border-bottom: 2px solid var(--border);
    padding-bottom: 4px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;

    &::after {
        content: '';
        flex-grow: 1;
        margin-left: 15px;
        height: 1px;
    }
}

.experience-timeline {
    position: relative;
    padding-left: 15px;

    &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 5px;
        bottom: 5px;
        width: 2px;
        background-color: var(--border);
    }

    &:not(:has(.exp-item + .exp-item))::before { display: none; }
}

.exp-item {
    position: relative;
    margin-bottom: 14px;

    &:last-child { margin-bottom: 0; }

    &::before {
        content: '';
        position: absolute;
        left: -20px;
        top: 4px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: var(--white);
        border: 2px solid var(--primary);
    }
}

.exp-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 3px;
}

.exp-company {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-dark);
}

.company-desc {
    font-weight: 400;
    color: var(--text-light);
    font-size: 11.5px;
}

.exp-duration {
    font-size: 11.5px;
    color: var(--text-light);
    font-weight: 500;
    text-align: right;
    white-space: nowrap;
}

.tech-stack-badge {
    font-size: 10px;
    color: var(--primary);
    background-color: var(--tint-soft);
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 600;
    margin-bottom: 6px;
    display: inline-block;
}

.sub-roles {
    margin-top: 6px;
    padding-left: 12px;
    position: relative;

    &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 1px;
        background-color: var(--border);
    }
}

.sub-role-item {
    margin-bottom: 8px;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;

    &:last-child { margin-bottom: 0; }

    &::before {
        content: '';
        position: absolute;
        left: -15px;
        top: 6px;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background-color: var(--border);
    }
}

.role-title {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--primary);
}

.role-date {
    font-size: 11px;
    color: var(--text-light);
}

.desc-list {
    width: 100%;
    list-style-type: none;
    margin-top: 3px;

    li {
        position: relative;
        padding-left: 12px;
        font-size: 11.5px;
        color: var(--text-main);
        margin-bottom: 1px;

        &::before {
            content: "•";
            position: absolute;
            left: 0;
            color: var(--text-light);
        }
    }
}

.cert-list {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;

    &:has(.cert-item:only-child) { grid-template-columns: 1fr; }
}

.cert-item {
    background-color: var(--page-bg);
    border: 1px solid var(--border);
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 11px;
}

.cert-name {
    font-weight: 600;
    color: var(--text-dark);
    display: block;
    margin-bottom: 1px;
}

.cert-issuer {
    color: var(--primary);
    font-weight: 500;
}

.edu-item {
    margin-bottom: 8px;

    &:last-child { margin-bottom: 0; }
}

.edu-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.edu-school {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-dark);
}

.edu-specialization {
    font-weight: 400;
    color: var(--text-light);
    font-size: 11.5px;
}

footer {
    grid-column: 1 / -1;
    padding: 10px 30px;
    background-color: var(--white);
    border-top: 1px solid var(--border);
    font-size: 8.5px;
    color: var(--text-light);
    text-align: center;
    line-height: 1.25;
}

@container cv-main (max-width: 440px) {
    .exp-header,
    .sub-role-item,
    .edu-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .company-desc {
        display: block;
        margin-top: 2px;
    }

    .exp-duration,
    .role-date {
        text-align: left;
        margin-top: 4px;
    }

    .cert-list { grid-template-columns: 1fr; }
}

@media print {
    @page {
        size: A4;
        margin: 0;
    }

    * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    body {
        background-color: white;
        padding: 0;
        display: block;
    }

    .print-button {
        display: none !important;
    }

    .cv-container {
        box-shadow: none;
        width: 210mm;
        height: 297mm;
        margin: 0;
        page-break-after: always;
    }

    .exp-item, .edu-item, .sidebar-section {
        page-break-inside: avoid;
    }

    footer {
        position: fixed;
        bottom: 0;
        width: 100%;
    }
}