:root {
    --primary: #2563eb;
    --primary-hover: #1d4ed8;
    --success: #059669;
    --dark: #111827;
    --light: #f8fafc;
    --gray: #5b677a;
    --border: #d9e2ef;
    --surface: rgba(255, 255, 255, 0.94);
    --surface-strong: #ffffff;
    --ink-soft: #334155;
    --accent: #0891b2;
    --warm: #f59e0b;
    --danger: #dc2626;
    --shadow-soft: 0 18px 45px rgba(15, 23, 42, 0.1);
    --shadow-card: 0 10px 28px rgba(15, 23, 42, 0.08);
}

* {
    transition-property: background-color, border-color, color, box-shadow, opacity, transform;
    transition-duration: 180ms;
    transition-timing-function: ease;
}

body {
    background:
        linear-gradient(120deg, rgba(37, 99, 235, 0.08) 0 1px, transparent 1px 44px),
        linear-gradient(0deg, rgba(8, 145, 178, 0.06) 0 1px, transparent 1px 44px),
        linear-gradient(135deg, #f8fafc 0%, #eef6ff 42%, #f7fbf5 100%) !important;
    color: var(--dark);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(255,255,255,0.78), rgba(255,255,255,0.28) 40%, rgba(255,255,255,0.82)),
        linear-gradient(180deg, rgba(255,255,255,0.58), rgba(255,255,255,0));
    z-index: -1;
}

header,
.nav-bar {
    background:
        linear-gradient(135deg, rgba(15, 23, 42, 0.96) 0%, rgba(30, 64, 175, 0.94) 58%, rgba(8, 145, 178, 0.9) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18) !important;
}

header::before,
header::after,
.main-container::before {
    display: none !important;
}

header h1 {
    max-width: 860px;
    margin-left: auto !important;
    margin-right: auto !important;
    line-height: 1.08;
}

header p {
    color: #d8f3ff !important;
}

.site-logo {
    display: block;
    object-fit: cover;
    object-position: center;
    background-image: url("assets/startkariera-icon.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hero-logo {
    width: min(260px, 62vw);
    aspect-ratio: 1;
    margin: 0 auto 22px;
    padding: 0;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 18px 42px rgba(2, 6, 23, 0.22);
    position: relative;
    z-index: 1;
    color: transparent;
}

.hero-badges span,
.nav-login-btn,
.region-select {
    background: rgba(255, 255, 255, 0.14) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    color: #eff6ff !important;
}

.nav-bar {
    max-width: 1120px !important;
    border-radius: 8px !important;
    padding: 14px 18px !important;
    gap: 14px;
}

.brand-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    text-decoration: none;
    font-weight: 900;
    letter-spacing: 0;
    white-space: nowrap;
    padding: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.16);
}

.brand-logo:hover {
    background: rgba(255, 255, 255, 0.16);
    transform: translateY(-1px);
}

.brand-logo img {
    width: 58px;
    height: 58px;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
    background-color: #ffffff;
    background-image: url("assets/startkariera-icon.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: transparent;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.nav-links a {
    margin-right: 0 !important;
    padding: 9px 11px;
    border-radius: 8px;
    color: rgba(241, 245, 249, 0.86) !important;
}

.nav-links a:hover,
.nav-links a.active {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff !important;
}

.container,
.main-container,
.info-panel,
.form-panel,
.panel,
.opportunity-card,
.university-card,
.question-block,
#result-box {
    border-radius: 8px !important;
    border: 1px solid rgba(217, 226, 239, 0.95) !important;
    box-shadow: var(--shadow-soft) !important;
}

.container,
.main-container {
    max-width: 1120px !important;
    background: var(--surface) !important;
    backdrop-filter: blur(18px);
}

.container {
    max-width: 540px !important;
}

.info-panel,
.form-panel,
.panel,
.question-block,
.opportunity-card,
.university-card {
    background: linear-gradient(180deg, #ffffff 0%, #f9fcff 100%) !important;
}

.opportunity-card,
.university-card,
.question-block {
    border-left: 0 !important;
    position: relative;
    overflow: hidden;
}

.opportunity-card::before,
.university-card::before,
.question-block::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary), var(--accent), var(--success), var(--warm));
}

h1,
h2,
h3,
.job-title,
.university-name,
.school-title {
    letter-spacing: 0 !important;
}

h2 {
    color: #0f172a !important;
    line-height: 1.15;
}

p,
.muted,
.company-name,
.university-meta,
.info-panel p,
#school-reason {
    color: var(--gray) !important;
}

label {
    color: var(--ink-soft) !important;
}

input,
textarea,
select {
    border-radius: 8px !important;
    border: 1px solid var(--border) !important;
    background: #fbfdff !important;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12) !important;
    background: #ffffff !important;
}

button,
.btn,
.submit-btn,
.find-btn,
.action-btn,
.btn-contact,
.btn-apply,
.btn-alt,
.logout-btn,
.filter-btn {
    border-radius: 8px !important;
}

.btn-primary,
.find-btn,
.submit-btn,
button.action-btn,
.btn-contact {
    background: linear-gradient(135deg, var(--primary), var(--accent)) !important;
    color: #ffffff !important;
    box-shadow: 0 12px 22px -14px rgba(37, 99, 235, 0.55) !important;
}

.btn-apply {
    background: linear-gradient(135deg, var(--success), #0d9488) !important;
}

.logout-btn,
.btn-danger {
    background: linear-gradient(135deg, var(--danger), #f43f5e) !important;
    color: #ffffff !important;
}

.btn-secondary,
.btn-alt {
    background: #ffffff !important;
    color: #1f2937 !important;
    border: 1px solid var(--border) !important;
}

button:hover,
.btn:hover,
.submit-btn:hover,
.find-btn:hover,
.action-btn:hover,
.btn-contact:hover,
.btn-apply:hover,
.btn-alt:hover,
.filter-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 16px 28px -18px rgba(15, 23, 42, 0.5) !important;
}

.filter-tabs {
    gap: 10px !important;
}

.filter-btn {
    border: 1px solid var(--border) !important;
    background: #ffffff !important;
    color: #334155 !important;
}

.filter-btn.active {
    background: linear-gradient(135deg, var(--dark), var(--primary)) !important;
    color: #ffffff !important;
    border-color: transparent !important;
}

.badge,
.detected-tag,
.keyword-pill {
    border-radius: 8px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.badge {
    background: linear-gradient(135deg, #1d4ed8, #0891b2) !important;
}

.badge-recommended {
    background: linear-gradient(135deg, #047857, #0d9488) !important;
}

.contact-box {
    border-radius: 8px !important;
    background: linear-gradient(180deg, #eff6ff, #f0fdfa) !important;
    border: 1px solid #bfdbfe !important;
}

.contact-icon {
    border-radius: 8px !important;
    background: linear-gradient(135deg, #dbeafe, #ccfbf1) !important;
}

.main-container > h2:first-child,
.container h2 {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.main-container > h2:first-child::before,
.container h2::before {
    content: "";
    width: 10px;
    height: 30px;
    border-radius: 8px;
    background: linear-gradient(180deg, var(--primary), var(--success));
    flex: 0 0 auto;
}

@media (max-width: 760px) {
    header {
        padding: 34px 18px 58px !important;
    }

    header h1 {
        font-size: 1.72rem !important;
    }

    .nav-bar {
        align-items: stretch !important;
        flex-direction: column;
        gap: 12px;
    }

    .brand-logo {
        justify-content: center;
    }

    .nav-links a {
        flex: 1 1 auto;
        text-align: center;
    }

    .container,
    .main-container,
    .info-panel,
    .form-panel {
        padding: 22px !important;
    }

    .grid {
        grid-template-columns: 1fr !important;
    }
}