* {
    box-sizing: border-box;
}

:root {
    color-scheme: dark;
    --bg: #070806;
    --bg-strong: #0d100c;
    --surface: rgba(17, 20, 17, 0.92);
    --surface-soft: rgba(28, 32, 27, 0.78);
    --line: rgba(235, 220, 180, 0.18);
    --text: #f5efe4;
    --muted: #b8bdaf;
    --gold: #f0b848;
    --ember: #e84a5f;
    --jade: #24d39b;
    --cyan: #48c8f0;
    --violet: #a66cff;
    --shadow: 0 20px 60px rgba(0, 0, 0, 0.42);
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    margin: 0;
    background:
        linear-gradient(135deg, rgba(36, 211, 155, 0.08), transparent 28%),
        linear-gradient(225deg, rgba(232, 74, 95, 0.12), transparent 26%),
        linear-gradient(180deg, #050605 0%, #10100c 48%, #070806 100%);
    color: var(--text);
    font-family: "Rajdhani", "Orbitron", "Segoe UI", Arial, sans-serif;
    line-height: 1.6;
    letter-spacing: 0;
}

body::before {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    content: "";
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), transparent 82%);
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
}

.site-shell {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}

.hero {
    padding: 24px 0 22px;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 32px;
}

.brand {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    gap: 12px;
}

.brand-mark {
    display: grid;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    place-items: center;
    border: 1px solid rgba(240, 184, 72, 0.72);
    background: linear-gradient(145deg, rgba(240, 184, 72, 0.22), rgba(36, 211, 155, 0.10));
    color: var(--gold);
    font-weight: 800;
    clip-path: polygon(50% 0, 94% 24%, 94% 76%, 50% 100%, 6% 76%, 6% 24%);
}

.brand strong,
.brand small {
    display: block;
    overflow-wrap: anywhere;
}

.brand strong {
    font-size: 1rem;
    text-transform: uppercase;
}

.brand small {
    color: var(--muted);
    font-size: 0.88rem;
}

.pdf-link {
    flex: 0 0 auto;
    border: 1px solid rgba(240, 184, 72, 0.44);
    padding: 10px 14px;
    background: rgba(240, 184, 72, 0.10);
    color: #ffe2a1;
    font-size: 0.92rem;
    font-weight: 700;
    border-radius: 8px;
}

.intro-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 450px);
    gap: 28px;
    align-items: stretch;
}

.intro-copy {
    padding: 38px 0 22px;
}

.eyebrow {
    margin: 0 0 10px;
    color: var(--active-accent, var(--gold));
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
}

h1,
h2,
h3,
h4,
p {
    margin-top: 0;
}

h1 {
    max-width: 760px;
    margin-bottom: 18px;
    font-size: 3.4rem;
    line-height: 1.04;
}

.lead {
    max-width: 700px;
    margin-bottom: 26px;
    color: var(--muted);
    font-size: 1.08rem;
}

.stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 150px));
    gap: 12px;
    margin: 0;
}

.stats div {
    min-width: 0;
    border-top: 1px solid var(--line);
    padding-top: 12px;
}

.stats dt {
    color: var(--text);
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1;
}

.stats dd {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 0.86rem;
    text-transform: uppercase;
}

.mood-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 150px;
    gap: 10px;
    min-height: 470px;
    align-self: stretch;
}

.mood-strip img {
    width: 100%;
    height: 100%;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    object-fit: cover;
    filter: saturate(1.08) contrast(1.03);
}

.mood-strip img:nth-child(1),
.mood-strip img:nth-child(4) {
    grid-row: span 2;
}

.tabs {
    position: sticky;
    top: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    padding: 10px 0;
    background: rgba(7, 8, 6, 0.82);
    backdrop-filter: blur(18px);
}

.tab {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    min-height: 58px;
    gap: 9px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    padding: 10px;
    background: rgba(17, 20, 17, 0.76);
    border-radius: 8px;
}

.tab span {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--tab-accent) 66%, transparent);
    color: var(--tab-accent);
    font-size: 0.76rem;
    font-weight: 900;
    clip-path: polygon(50% 0, 94% 24%, 94% 76%, 50% 100%, 6% 76%, 6% 24%);
}

.tab strong,
.tab small {
    min-width: 0;
    overflow-wrap: anywhere;
}

.tab strong {
    font-size: 0.95rem;
}

.tab small {
    justify-self: end;
    color: var(--muted);
    font-size: 0.78rem;
}

.tab.is-active {
    border-color: color-mix(in srgb, var(--tab-accent) 70%, transparent);
    background: linear-gradient(135deg, color-mix(in srgb, var(--tab-accent) 24%, transparent), rgba(17, 20, 17, 0.86));
    box-shadow: inset 0 -2px 0 var(--tab-accent);
}

.competence-head {
    margin: 34px 0 24px;
    border-left: 4px solid var(--active-accent, var(--gold));
    padding: 6px 0 8px 22px;
}

.competence-head h2 {
    margin-bottom: 10px;
    font-size: 2.1rem;
    line-height: 1.15;
}

.competence-head p:last-child {
    max-width: 760px;
    margin-bottom: 0;
    color: var(--muted);
}

.learning-list {
    display: grid;
    gap: 18px;
    padding-bottom: 60px;
}

.learning-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(290px, 360px);
    gap: 22px;
    border: 1px solid var(--line);
    background: linear-gradient(135deg, rgba(17, 20, 17, 0.94), rgba(20, 24, 20, 0.78));
    border-radius: 8px;
    padding: 22px;
    box-shadow: var(--shadow);
}

.learning-title {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    margin-bottom: 14px;
}

.code {
    display: inline-grid;
    min-width: 78px;
    min-height: 34px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--active-accent) 68%, transparent);
    color: var(--active-accent);
    font-weight: 900;
    border-radius: 8px;
}

.learning-title h3 {
    margin-bottom: 0;
    font-size: 1.28rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.meta-line {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.meta-line span {
    max-width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.10);
    padding: 7px 10px;
    background: rgba(255, 255, 255, 0.045);
    color: #e7dfd2;
    font-size: 0.86rem;
    border-radius: 8px;
    overflow-wrap: anywhere;
}

.text-blocks {
    display: grid;
    gap: 14px;
}

.text-blocks h4 {
    margin-bottom: 4px;
    color: #ffe2a1;
    font-size: 0.86rem;
    text-transform: uppercase;
}

.text-blocks p {
    margin-bottom: 0;
    color: var(--muted);
}

.proof-panel {
    min-width: 0;
}

.proof-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.proof-heading strong {
    color: var(--text);
    text-transform: uppercase;
}

.proof-heading span {
    color: var(--muted);
    font-size: 0.88rem;
}

.proof-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.proof-grid a {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: var(--bg-strong);
    aspect-ratio: 4 / 3;
}

.proof-grid a:first-child:nth-last-child(1) {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 9;
}

.proof-grid a:first-child:nth-last-child(n + 3) {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 9;
}

.proof-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 180ms ease, filter 180ms ease;
}

.proof-grid a:hover img,
.proof-grid a:focus-visible img {
    filter: brightness(1.1);
    transform: scale(1.03);
}

.proof-placeholder {
    display: grid;
    min-height: 180px;
    place-items: center;
    border: 1px dashed rgba(255, 255, 255, 0.22);
    border-radius: 8px;
    color: var(--muted);
}

@media (max-width: 980px) {
    .intro-grid,
    .learning-card {
        grid-template-columns: 1fr;
    }

    .mood-strip {
        min-height: auto;
        grid-auto-rows: 130px;
    }

    .tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        position: static;
    }
}

@media (max-width: 640px) {
    .site-shell {
        width: min(100% - 24px, 1180px);
    }

    .topbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .pdf-link {
        width: 100%;
        text-align: center;
    }

    .intro-copy {
        padding-top: 14px;
    }

    h1 {
        font-size: 2.2rem;
    }

    .lead {
        font-size: 1rem;
    }

    .stats {
        grid-template-columns: 1fr;
    }

    .mood-strip {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 118px;
    }

    .mood-strip img:nth-child(1),
    .mood-strip img:nth-child(4) {
        grid-row: span 1;
    }

    .tabs {
        grid-template-columns: 1fr;
    }

    .tab {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .competence-head {
        padding-left: 14px;
    }

    .competence-head h2 {
        font-size: 1.55rem;
    }

    .learning-card {
        padding: 16px;
    }

    .learning-title {
        grid-template-columns: 1fr;
    }

    .code {
        width: max-content;
    }

    .proof-grid {
        grid-template-columns: 1fr;
    }

    .proof-grid a,
    .proof-grid a:first-child:nth-last-child(n + 3) {
        grid-column: auto;
        aspect-ratio: 16 / 10;
    }
}
.top-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px}.user-pill,.flash{border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:9px 12px;background:rgba(255,255,255,.055);color:var(--text);font-size:.9rem;font-weight:700}.flash{margin:0 0 14px}.flash.error{border-color:rgba(232,74,95,.5);background:rgba(232,74,95,.12)}.professional-panel,.filter-panel,.auth-card,.admin-card{border:1px solid var(--line);border-radius:8px;background:linear-gradient(135deg,rgba(17,20,17,.96),rgba(20,24,20,.8));box-shadow:var(--shadow)}.professional-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,340px);gap:24px;margin:20px 0 28px;padding:24px}.professional-panel h2,.auth-card h1,.admin-card h1,.admin-card h2{margin-bottom:10px}.skill-cloud{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.skill-cloud span,.visitor-note,.small-link{border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:7px 10px;background:rgba(255,255,255,.045);color:#e7dfd2;font-size:.88rem}.cv-card{display:grid;gap:10px;align-content:center;border:1px dashed rgba(240,184,72,.45);border-radius:8px;padding:20px;background:rgba(240,184,72,.08)}.cv-card strong{color:#ffe2a1;font-size:1.15rem}.ghost-button,.filter-panel button,.auth-card button,.admin-form button,.comment-form button{display:inline-flex;justify-content:center;align-items:center;min-height:42px;border:1px solid color-mix(in srgb,var(--active-accent,var(--gold)) 60%,transparent);border-radius:8px;padding:10px 14px;background:color-mix(in srgb,var(--active-accent,var(--gold)) 18%,rgba(255,255,255,.04));color:var(--text);cursor:pointer;font:inherit;font-weight:800}.filter-panel{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:20px;padding:16px}label{display:grid;gap:6px;color:#ffe2a1;font-size:.84rem;font-weight:800;text-transform:uppercase}input,select,textarea{width:100%;border:1px solid rgba(255,255,255,.14);border-radius:8px;padding:10px 12px;background:rgba(7,8,6,.86);color:var(--text);font:inherit;letter-spacing:0}textarea{resize:vertical}.comments-box{margin-top:18px;border-top:1px solid var(--line);padding-top:14px}.comment-item{border-left:3px solid var(--active-accent,var(--gold));margin-bottom:10px;padding:8px 0 8px 12px;background:rgba(255,255,255,.03)}.comment-item small{display:block;color:var(--muted)}.comment-form{display:grid;gap:8px}.auth-page{display:grid;min-height:100vh;align-content:center;gap:18px;padding:32px 0}.auth-card{display:grid;gap:14px;max-width:520px;padding:24px}.compact-hero{padding-bottom:0}.admin-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr);gap:18px;padding-bottom:70px}.admin-card{min-width:0;padding:22px}.admin-card.full{grid-column:1/-1}.admin-form{display:grid;gap:14px}.form-grid.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.table-wrap{width:100%;overflow-x:auto}table{width:100%;border-collapse:collapse;min-width:680px}th,td{border-bottom:1px solid rgba(255,255,255,.11);padding:10px;text-align:left;vertical-align:top}th{color:#ffe2a1;font-size:.8rem;text-transform:uppercase}.inline-form{display:inline-flex;align-items:center;gap:6px;margin:2px 0}.inline-form select{min-width:118px}.inline-form button,.danger{min-height:34px;padding:6px 9px}.danger{border-color:rgba(232,74,95,.5)!important;background:rgba(232,74,95,.13)!important}@media(max-width:980px){.professional-panel,.filter-panel,.admin-grid,.form-grid.two{grid-template-columns:1fr}}@media(max-width:640px){.top-actions{width:100%;justify-content:stretch}.top-actions>*{flex:1 1 100%;text-align:center}.professional-panel,.filter-panel,.admin-card{padding:16px}}