:root {
    --cv-ink: #0f172a;
    --cv-muted: #6b7280;
    --cv-card: #ffffff;
    --cv-bg: #ffffff
}

html[data-theme='dark'] {
    --cv-ink: #e5e7eb;
    --cv-muted: #9ca3af;
    --cv-card: #0b1220;
    --cv-bg: #0a0f1a
}

body {
    color: var(--cv-ink);
    background: var(--cv-bg)
}

.welcome-screen {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 1.25rem;
    background: radial-gradient(circle at top right, rgba(13, 110, 253, .18), transparent 42%), linear-gradient(160deg, #f8fbff, #ecf3ff 55%, #ffffff)
}

.welcome-card {
    width: min(100%, 460px);
    border-radius: 16px
}

.section-padding {
    padding-block: clamp(36px, 6vw, 84px)
}

.section-title {
    font-weight: 800;
    letter-spacing: .2px
}

.hero-photo {
    max-width: 260px;
    aspect-ratio: 1;
    object-fit: cover
}

.gradient-hero {
    background: linear-gradient(120deg, rgba(13, 110, 253, .08), rgba(13, 110, 253, 0))
}

.card {
    background: var(--cv-card);
    border-radius: 14px
}

.skill-card {
    border: 1px solid rgba(0, 0, 0, .06);
    transition: transform .15s ease
}

.skill-card:hover {
    transform: translateY(-2px)
}

.progress {
    height: 8px;
    background: rgba(0, 0, 0, .08)
}

.progress-bar {
    background: #0d6efd
}

.accordion-button {
    font-weight: 600
}

.accordion-button::after {
    filter: grayscale(1)
}

@media print {

    #themeToggle,
    #printBtn,
    #printBtn2,
    #logoutBtn,
    .navbar .navbar-toggler,
    .toast-container,
    .btn-close {
        display: none !important
    }

    .offcanvas,
    #authGate {
        display: none !important
    }

    .card {
        box-shadow: none !important
    }

    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 10px;
        color: #6b7280
    }
}