/* =============================================================================
   HOME PAGE REDESIGN (INDEX)
   ============================================================================= */

:root {
    --font-sans: "Inter", sans-serif;
}

body,
button,
input,
textarea,
select {
    font-family: var(--font-sans);
}

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

.home-body {
    margin: 0;
    padding: 0;
    background: #f8fafc;
    font-family: var(--font-sans);
}

.home-page {
    --home-bg: #f8fafc;
    --home-surface: #ffffff;
    --home-soft: #f8fafc;
    --home-soft-accent: #eaf2ff;
    --home-line: #e2e8f0;
    --home-text: #0f172a;
    --home-muted: #475569;
    --home-muted-2: #334155;
    --home-blue: #2563eb;

    width: min(1280px, calc(100% - 32px));
    margin: 16px auto;
    display: grid;
    gap: 16px;
    color: var(--home-text);
}

.home-page,
.home-page *,
.home-page *::before,
.home-page *::after {
    box-sizing: border-box;
}

.home-page .card {
    background: var(--home-surface);
    border: 1px solid var(--home-line);
    border-radius: 12px;
}

.home-page .notice,
.home-page .header,
.home-page .hero,
.home-page .info,
.home-page .difference,
.home-page .featured,
.home-page .footer,
.home-page .cookies {
    padding: 24px 28px;
}

.home-page .notice,
.home-page .header-top-row,
.home-page .cookie-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.home-page .header {
    position: relative;
}

.home-page .notice p,
.home-page .cookies p,
.home-page .hero-copy,
.home-page .info p,
.home-page .diff-card p,
.home-page .featured-copy,
.home-page .job-card p,
.home-page .footer-nav a,
.home-page .copyright {
    color: var(--home-muted);
    margin: 0;
}

.home-page .close-mini {
    height: 28px;
    padding: 0 10px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    color: #1e293b;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.home-page .close-mini:hover {
    background: var(--home-soft-accent);
    border-color: #94a3b8;
}

.home-page .logo {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.home-page .logo-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    line-height: 1;
    width: 118px;
    height: 22px;
}

.home-page .logo-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.home-page .logo-image-dark-theme {
    display: none;
}

.dark-theme .home-page .logo-image-light-theme,
body.dark-theme .home-page .logo-image-light-theme,
[data-theme="dark"] .home-page .logo-image-light-theme {
    display: none;
}

.dark-theme .home-page .logo-image-dark-theme,
body.dark-theme .home-page .logo-image-dark-theme,
[data-theme="dark"] .home-page .logo-image-dark-theme {
    display: block;
}

.home-page .desktop-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.home-page #headerNav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.home-page .desktop-nav a {
    color: var(--home-muted-2);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.home-page #headerNav a {
    color: var(--home-muted-2);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.home-page .desktop-nav a:hover {
    background: var(--home-soft-accent);
    color: var(--home-text);
    border-color: #cbd5e1;
}

.home-page #headerNav a:hover {
    background: var(--home-soft-accent);
    color: var(--home-text);
    border-color: #cbd5e1;
}

.home-page .desktop-nav a.is-active,
.home-page .desktop-nav a[aria-current="page"] {
    background: var(--home-blue);
    color: #fff;
    border-color: var(--home-blue);
}

.home-page #headerNav a.is-active,
.home-page #headerNav a[aria-current="page"] {
    background: var(--home-blue);
    color: #fff;
    border-color: var(--home-blue);
}

.home-page .menu-toggle,
.home-page .menu-btn,
.home-page .mobile-menu {
    display: none;
}

.home-page .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 28px;
}

.home-page .hero-left {
    display: grid;
    gap: 18px;
    align-content: start;
}

.home-page .hero-left .btn {
    justify-self: start;
    width: auto;
}

.home-page .hero-badge {
    margin: 0;
    color: var(--home-blue);
    font-size: 13px;
    font-weight: 500;
}

.home-page .hero-title {
    margin: 0;
    font-size: 48px;
    line-height: 1.1;
}

.home-page .hero-copy {
    font-size: 18px;
    line-height: 1.5;
}

.home-page .hero-search {
    display: grid;
    gap: 12px;
    align-self: start;
    align-content: start;
    background: var(--home-soft);
    border-radius: 12px;
    padding: 16px;
}

.home-page .search-label {
    color: var(--home-muted-2);
    font-size: 14px;
    font-weight: 600;
    margin: 0;
}

.home-page .fake-input {
    border: 1px solid var(--home-line);
    border-radius: 8px;
    background: #fff;
    color: var(--home-muted);
    font-size: 14px;
    padding: 12px 14px;
    width: 100%;
    font-family: inherit;
    outline: none;
}

.home-page .fake-input:focus {
    border-color: var(--home-blue);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
}

.home-page .btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    border: 1px solid transparent;
    padding: 11px 18px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.home-page .btn-primary {
    background: var(--home-blue);
    border-color: var(--home-blue);
    color: #fff;
}

.home-page .hero-search .btn {
    width: 100%;
    gap: 0.35em;
}

.home-page .hero-search-note {
    margin: -4px 0 0;
    font-size: 12px;
    line-height: 1.35;
    color: var(--home-muted);
}

.home-page .hero-search .btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.home-page .btn-light {
    background: #fff;
    border-color: #fff;
    color: #1e293b;
}

.home-page .btn-soft {
    background: var(--home-soft-accent);
    border-color: var(--home-soft-accent);
    color: #1e293b;
}

.home-page .stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.home-page .stat {
    padding: 20px;
    display: grid;
    justify-items: center;
    gap: 6px;
}

.home-page .stat h2 {
    margin: 0;
    font-size: 30px;
    line-height: 1.1;
}

.home-page .stat p {
    margin: 0;
    font-size: 14px;
    color: var(--home-muted);
}

.home-page .info,
.home-page .difference,
.home-page .featured,
.home-page .footer {
    display: grid;
}

.home-page .info {
    gap: 10px;
    justify-items: center;
    text-align: center;
    padding: 28px;
}

.home-page .info h2 {
    margin: 0;
    font-size: 30px;
    line-height: 1.2;
}

.home-page .info p {
    font-size: 16px;
    line-height: 1.5;
    max-width: 980px;
}

.home-page .info-accent {
    background: var(--home-soft-accent);
}

.home-page .center-row {
    display: flex;
    justify-content: center;
}

.home-page .difference,
.home-page .featured {
    gap: 16px;
    align-items: center;
}

.home-page .difference {
    padding: 24px 28px;
}

.home-page .featured {
    padding: 24px 28px;
}

.home-page .difference h2,
.home-page .featured h2 {
    margin: 0;
    font-size: 32px;
    text-align: center;
}

.home-page .featured-copy {
    text-align: center;
    font-size: 15px;
    line-height: 1.5;
}

.home-page .difference-grid,
.home-page .featured-grid {
    width: 100%;
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.home-page .diff-card,
.home-page .job-card {
    background: var(--home-soft);
    border-radius: 10px;
    padding: 18px;
    display: grid;
    gap: 10px;
}

.home-page .diff-card {
    min-height: 110px;
    align-content: start;
    gap: 8px;
}

.home-page .diff-card h3,
.home-page .job-card h3 {
    margin: 0;
    font-size: 18px;
    line-height: 1.3;
    font-weight: 600;
}

.home-page .diff-card p,
.home-page .job-card p {
    font-size: 14px;
    line-height: 1.5;
}

.home-page .job-card .btn {
    justify-self: start;
    font-size: 14px;
    font-weight: 500;
    padding: 10px 14px;
}

.home-page .featured-grid-default {
    grid-template-columns: 1fr;
}

.home-page .job-card-default {
    width: 100%;
    justify-items: center;
    text-align: center;
}

.home-page .job-card-default .btn {
    justify-self: center;
}

.home-page .footer {
    gap: 12px;
    padding: 28px;
}

.home-page .footer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.home-page .footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px 0;
}

.home-page .footer-nav a {
    color: var(--home-muted-2);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.home-page .footer-nav a:hover {
    background: var(--home-soft-accent);
    color: var(--home-text);
    border-color: #cbd5e1;
}

.home-page .footer-nav a.is-active,
.home-page .footer-nav a[aria-current='page'] {
    background: var(--home-blue);
    color: #fff;
    border-color: var(--home-blue);
}

.home-page .copyright {
    font-size: 13px;
}

.home-page #cookies-popup {
    display: none;
    position: static;
    inset: auto;
    width: auto;
    transform: none;
    box-shadow: none;
    border-radius: 12px;
}

.home-page #cookies-popup.show {
    display: flex;
}

.home-page .cookies {
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 20px;
}

.home-page .cookies p {
    font-size: 13px;
}

.home-page .cookie-actions {
    justify-content: flex-end;
    gap: 8px;
}

.home-page .cookie-actions .btn {
    padding: 9px 14px;
    font-size: 13px;
}

@media (max-width: 1024px) {
    .home-page {
        width: min(834px, calc(100% - 24px));
        margin: 12px auto;
        gap: 14px;
    }

    .home-page .notice,
    .home-page .header,
    .home-page .hero,
    .home-page .difference,
    .home-page .featured {
        padding: 18px 20px;
    }

    .home-page .notice {
        padding: 10px 14px;
    }

    .home-page .header-top-row {
        gap: 12px;
    }

    .home-page .desktop-nav {
        gap: 12px;
        margin-left: auto;
        justify-content: flex-end;
    }

    .home-page .desktop-nav a {
        font-size: 14px;
    }

    .home-page .hero {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .home-page .hero-title {
        font-size: 44px;
    }

    .home-page .hero-copy {
        font-size: 16px;
    }

    .home-page .difference-grid,
    .home-page .featured-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .home-page .diff-card {
        justify-items: center;
        text-align: center;
    }

    .home-page .job-card {
        justify-items: center;
        text-align: center;
    }

    .home-page .job-card .btn {
        justify-self: center;
    }

    .home-page .footer {
        padding: 22px 20px;
        gap: 10px;
    }

    .home-page .footer-top,
    .home-page .cookies {
        flex-direction: column;
        align-items: flex-start;
    }

    .home-page .cookies {
        align-items: center;
        text-align: center;
        padding: 14px 16px;
        gap: 10px;
    }

    .home-page .cookie-actions {
        justify-content: center;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .home-page .header-top-row {
        justify-content: space-between;
    }

    .home-page .desktop-nav {
        margin-left: auto;
        justify-content: flex-end;
    }

    .home-page .footer-top {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .home-page .footer-nav {
        margin-left: auto;
        justify-content: flex-end;
        text-align: right;
    }
}

@media (max-width: 768px) {
    .home-page {
        width: min(390px, calc(100% - 16px));
        margin: 8px auto;
        gap: 10px;
    }

    .home-page .notice {
        padding: 8px 10px;
        gap: 8px;
    }

    .home-page .notice p {
        font-size: 12px;
        line-height: 1.4;
    }

    .home-page .header {
        padding: 12px 14px;
        display: grid;
        gap: 10px;
        z-index: 20;
    }

    .home-page .logo-link {
        width: 105px;
        height: 20px;
    }

    .home-page .desktop-nav {
        display: none;
    }

    .home-page #headerNav {
        display: none;
    }

    .home-page .menu-btn {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        border: 1px solid var(--home-line);
        background: #fff;
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 4px;
        cursor: pointer;
        margin-left: auto;
    }

    .home-page .menu-btn span {
        width: 16px;
        height: 2px;
        border-radius: 3px;
        background: #334155;
        transition: transform 0.2s ease, opacity 0.2s ease;
    }

    .home-page .mobile-menu {
        display: grid;
        position: absolute;
        top: calc(100% + 8px);
        left: 14px;
        right: 14px;
        background: var(--home-soft);
        border-radius: 10px;
        padding: 10px;
        gap: 8px;
        box-shadow: 0 14px 30px rgba(15, 23, 42, 0.14);
        opacity: 0;
        transform: translateY(-8px);
        pointer-events: none;
        transition: opacity 0.2s ease, transform 0.2s ease;
    }

    .home-page #mobileHeaderNav {
        display: grid;
    }

    .home-page .mobile-menu a {
        color: var(--home-text);
        text-decoration: none;
        font-size: 14px;
        font-weight: 500;
        padding: 10px 12px;
        border-radius: 8px;
        border: 1px solid transparent;
        background: #fff;
        transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }

    .home-page .mobile-menu a:hover {
        background: var(--home-soft-accent);
        border-color: #cbd5e1;
    }

    .home-page .mobile-menu a.is-active,
    .home-page .mobile-menu a[aria-current='page'] {
        background: var(--home-blue);
        border-color: var(--home-blue);
        color: #fff;
    }

    .home-page .hero {
        padding: 20px 14px;
        gap: 12px;
    }

    .home-page .hero-left {
        gap: 18px;
    }

    .home-page .hero-badge {
        font-size: 12px;
    }

    .home-page .hero-title {
        font-size: 30px;
    }

    .home-page .hero-copy {
        font-size: 14px;
    }

    .home-page .hero-search .btn,
    .home-page .center-row .btn {
        width: 100%;
    }

    .home-page .hero-search {
        gap: 12px;
    }

    .home-page .fake-input {
        font-size: 12px;
    }

    .home-page .hero-search .btn {
        font-size: 13px;
    }

    .home-page .stats {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .home-page .stat {
        padding: 20px;
    }

    .home-page .info {
        padding: 18px 14px;
    }

    .home-page .info h2 {
        font-size: 24px;
    }

    .home-page .info p {
        font-size: 14px;
    }

    .home-page .difference,
    .home-page .featured {
        padding: 18px 14px;
        gap: 12px;
    }

    .home-page .difference h2,
    .home-page .featured h2 {
        font-size: 26px;
    }

    .home-page .featured-copy {
        font-size: 12px;
    }

    .home-page .difference-grid,
    .home-page .featured-grid {
        gap: 8px;
    }

    .home-page .footer {
        padding: 18px 14px;
        gap: 10px;
    }

    .home-page .footer-top {
        gap: 10px;
        align-items: center;
        text-align: center;
    }

    .home-page .footer .logo {
        justify-content: center;
    }

    .home-page .footer .logo-link {
        justify-content: center;
    }

    .home-page .footer-nav {
        display: grid;
        gap: 6px;
    }

    .home-page .footer-nav a,
    .home-page .copyright {
        text-align: center;
        width: 100%;
    }

    .home-page .cookies {
        padding: 14px 12px;
        align-items: center;
    }

    .home-page .cookies p {
        width: 100%;
        text-align: center;
        font-size: 12px;
    }

    .home-page .cookie-actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .home-page .cookie-actions .btn {
        width: 100%;
    }
}

.home-page.mobile-menu-open .menu-btn span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.home-page.mobile-menu-open .menu-btn span:nth-child(2) {
    opacity: 0;
}

.home-page.mobile-menu-open .menu-btn span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

.home-page.mobile-menu-open .mobile-menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* =============================================================================
   LOGIN PAGE REDESIGN (SSR)
   ============================================================================= */

.login-body {
    margin: 0;
    padding: 0;
    background: #f8fafc;
    font-family: var(--font-sans);
}

.login-page {
    --login-bg: #f8fafc;
    --login-surface: #ffffff;
    --login-form-surface: #eaf0ff;
    --login-soft: #f8fafc;
    --login-soft-accent: #eaf2ff;
    --login-line: #e2e8f0;
    --login-text: #0f172a;
    --login-muted: #475569;
    --login-muted-2: #334155;
    --login-blue: #2563eb;
    --login-error: #dc2626;
    --home-soft: #f8fafc;
    --home-soft-accent: #eaf2ff;
    --home-line: #e2e8f0;
    --home-text: #0f172a;
    --home-muted: #475569;
    --home-muted-2: #334155;
    --home-blue: #2563eb;

    width: min(1280px, calc(100% - 32px));
    margin: 16px auto;
    display: grid;
    gap: 16px;
    color: var(--login-text);
}

.login-page,
.login-page *,
.login-page *::before,
.login-page *::after {
    box-sizing: border-box;
}

.login-page .card {
    background: var(--login-surface);
    border: 1px solid var(--login-line);
    border-radius: 12px;
}

.login-page .notice,
.login-page .header,
.login-page .footer,
.login-page .cookies {
    padding: 14px 20px;
}

.login-page .notice,
.login-page .header-top-row,
.login-page .cookie-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.login-page .notice p,
.login-page .cookies p,
.login-page .footer-nav a,
.login-page .copyright {
    color: var(--login-muted);
    margin: 0;
}

.login-page .close-mini {
    height: 28px;
    padding: 0 10px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    color: #1e293b;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.login-page .header {
    position: relative;
}

.login-page .logo {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.login-page .logo-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    line-height: 1;
    width: 118px;
    height: 22px;
}

.login-page .logo-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.login-page .logo-image-dark-theme {
    display: none;
}

.dark-theme .login-page .logo-image-light-theme,
body.dark-theme .login-page .logo-image-light-theme,
[data-theme="dark"] .login-page .logo-image-light-theme {
    display: none;
}

.dark-theme .login-page .logo-image-dark-theme,
body.dark-theme .login-page .logo-image-dark-theme,
[data-theme="dark"] .login-page .logo-image-dark-theme {
    display: block;
}

.login-page .desktop-nav,
.login-page #headerNav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.login-page .desktop-nav a,
.login-page #headerNav a {
    color: var(--login-muted-2);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.login-page .desktop-nav a:hover,
.login-page #headerNav a:hover {
    background: var(--login-soft-accent);
    color: var(--login-text);
    border-color: #cbd5e1;
}

.login-page .desktop-nav a.is-active,
.login-page .desktop-nav a[aria-current="page"],
.login-page #headerNav a.is-active,
.login-page #headerNav a[aria-current="page"] {
    background: var(--login-blue);
    color: #fff;
    border-color: var(--login-blue);
}

.login-page .menu-toggle,
.login-page .menu-btn,
.login-page .mobile-menu {
    display: none;
}

.login-page .login-auth {
    width: min(520px, 100%);
    margin: 16px auto 0;
    padding: 24px 20px;
    background: var(--login-form-surface);
    border: 1px solid #dbe5ff;
    border-radius: 12px;
    display: grid;
    gap: 10px;
}

.login-page .login-title {
    margin: 0;
    font-size: 46px;
    line-height: 1.05;
    font-weight: 700;
}

.login-page .login-copy {
    margin: 0 0 4px;
    font-size: 16px;
    color: var(--login-muted-2);
}

.login-page .login-form {
    display: grid;
    gap: 12px;
}

.login-page .login-form-group {
    display: grid;
    gap: 6px;
}

.login-page .login-form-group label {
    font-size: 14px;
    font-weight: 600;
    color: var(--login-text);
}

.login-page .login-form-group input {
    width: 100%;
    border: 1px solid var(--login-line);
    border-radius: 8px;
    background: #fff;
    color: var(--login-muted);
    font-size: 14px;
    padding: 11px 12px;
    font-family: inherit;
    outline: none;
}

.login-page .login-form-group input:focus {
    border-color: var(--login-blue);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
}

.login-page .error {
    min-height: 16px;
    margin: 0;
    color: var(--login-error);
    font-size: 12px;
    line-height: 1.3;
}

.login-page .btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    border: 1px solid transparent;
    padding: 11px 16px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.login-page .btn-primary {
    background: var(--login-blue);
    border-color: var(--login-blue);
    color: #fff;
}

.login-page .btn-light {
    background: #fff;
    border-color: #fff;
    color: #1e293b;
}

.login-page .btn-soft {
    background: var(--login-soft-accent);
    border-color: var(--login-soft-accent);
    color: #1e293b;
}

.login-page .login-form .btn {
    width: 100%;
}

.login-page .login-form-error {
    text-align: center;
    min-height: 18px;
}

.login-page .login-links {
    display: grid;
    gap: 2px;
    justify-items: center;
}

.login-page .login-links p {
    margin: 0;
    color: var(--login-muted);
    font-size: 13px;
    line-height: 1.5;
}

.login-page .login-links a {
    color: var(--login-blue);
    font-weight: 500;
    text-decoration: none;
}

.login-page .login-links a:hover {
    text-decoration: underline;
}

.login-page .footer {
    gap: 12px;
    padding: 20px;
    display: grid;
}

.login-page .footer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.login-page .footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 0;
}

.login-page .footer-nav a {
    color: var(--login-muted-2);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.login-page .footer-nav a:hover {
    background: var(--login-soft-accent);
    color: var(--login-text);
    border-color: #cbd5e1;
}

.login-page .footer-nav a.is-active,
.login-page .footer-nav a[aria-current='page'] {
    background: var(--login-blue);
    color: #fff;
    border-color: var(--login-blue);
}

.login-page .copyright {
    font-size: 12px;
}

.login-page #cookies-popup {
    display: none;
    position: static;
    inset: auto;
    width: auto;
    transform: none;
    box-shadow: none;
    border-radius: 12px;
}

.login-page #cookies-popup.show {
    display: flex;
}

.login-page .cookies {
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 20px;
}

.login-page .cookies p {
    font-size: 13px;
}

.login-page .cookie-actions {
    justify-content: flex-end;
    gap: 8px;
}

.login-page .cookie-actions .btn {
    padding: 9px 14px;
    font-size: 13px;
}

@media (max-width: 1024px) {
    .login-page {
        width: min(834px, calc(100% - 24px));
        margin: 12px auto;
        gap: 14px;
    }

    .login-page .login-auth {
        margin-top: 8px;
    }

    .login-page .login-title {
        font-size: 44px;
    }
}

@media (max-width: 768px) {
    .login-page {
        width: min(390px, calc(100% - 16px));
        margin: 8px auto;
        gap: 10px;
    }

    .login-page .notice {
        padding: 8px 10px;
        gap: 8px;
    }

    .login-page .notice p {
        font-size: 12px;
        line-height: 1.4;
    }

    .login-page .header {
        padding: 12px 14px;
        display: grid;
        gap: 10px;
        z-index: 20;
    }

    .login-page .logo-link {
        width: 105px;
        height: 20px;
    }

    .login-page .desktop-nav,
    .login-page #headerNav {
        display: none;
    }

    .login-page .menu-btn {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        border: 1px solid var(--login-line);
        background: #fff;
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 4px;
        cursor: pointer;
        margin-left: auto;
    }

    .login-page .menu-btn span {
        width: 16px;
        height: 2px;
        border-radius: 3px;
        background: #334155;
        transition: transform 0.2s ease, opacity 0.2s ease;
    }

    .login-page .mobile-menu {
        display: grid;
        position: absolute;
        top: calc(100% + 8px);
        left: 14px;
        right: 14px;
        background: var(--login-soft);
        border-radius: 10px;
        padding: 10px;
        gap: 8px;
        box-shadow: 0 14px 30px rgba(15, 23, 42, 0.14);
        opacity: 0;
        transform: translateY(-8px);
        pointer-events: none;
        transition: opacity 0.2s ease, transform 0.2s ease;
    }

    .login-page #mobileHeaderNav {
        display: grid;
    }

    .login-page .mobile-menu a {
        color: var(--login-text);
        text-decoration: none;
        font-size: 14px;
        font-weight: 500;
        padding: 10px 12px;
        border-radius: 8px;
        border: 1px solid transparent;
        background: #fff;
        transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }

    .login-page .mobile-menu a:hover {
        background: var(--login-soft-accent);
        border-color: #cbd5e1;
    }

    .login-page .mobile-menu a.is-active,
    .login-page .mobile-menu a[aria-current='page'] {
        background: var(--login-blue);
        border-color: var(--login-blue);
        color: #fff;
    }

    .login-page .login-auth {
        width: 100%;
        margin-top: 0;
        padding: 14px 10px;
        gap: 8px;
    }

    .login-page .login-title {
        font-size: 40px;
    }

    .login-page .login-copy {
        font-size: 13px;
    }

    .login-page .login-form-group label {
        font-size: 13px;
    }

    .login-page .login-form-group input {
        font-size: 12px;
        padding: 10px 11px;
    }

    .login-page .error {
        font-size: 11px;
    }

    .login-page .btn {
        font-size: 13px;
        padding: 10px 12px;
    }

    .login-page .login-links p {
        font-size: 12px;
    }

    .login-page .footer {
        padding: 18px 14px;
        gap: 10px;
    }

    .login-page .footer-top {
        gap: 10px;
        align-items: center;
        text-align: center;
        flex-direction: column;
    }

    .login-page .footer .logo {
        justify-content: center;
    }

    .login-page .footer .logo-link {
        justify-content: center;
    }

    .login-page .footer-nav {
        display: grid;
        gap: 2px;
    }

    .login-page .footer-nav a,
    .login-page .copyright {
        text-align: center;
        width: 100%;
    }

    .login-page .cookies {
        padding: 14px 12px;
        align-items: center;
    }

    .login-page .cookies p {
        width: 100%;
        text-align: center;
        font-size: 12px;
    }

    .login-page .cookie-actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .login-page .cookie-actions .btn {
        width: 100%;
    }
}

.login-page.mobile-menu-open .menu-btn span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.login-page.mobile-menu-open .menu-btn span:nth-child(2) {
    opacity: 0;
}

.login-page.mobile-menu-open .menu-btn span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

.login-page.mobile-menu-open .mobile-menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* =============================================================================
   404 PAGE (SSR)
   ============================================================================= */

.not-found-body {
    margin: 0;
    padding: 0;
    background: #f8fafc;
}

.not-found-page {
    width: min(980px, calc(100% - 32px));
    margin: 16px auto;
    display: grid;
    gap: 16px;
}

.not-found-page .not-found-shell {
    display: grid;
    gap: 14px;
    justify-items: center;
    text-align: center;
    padding: 48px 28px;
}

.not-found-page .not-found-code {
    margin: 0;
    font-size: 72px;
    font-weight: 800;
    line-height: 1;
    color: #2563eb;
}

.not-found-page .not-found-title {
    margin: 0;
    font-size: 40px;
    line-height: 1.1;
    color: #0f172a;
}

.not-found-page .not-found-copy {
    margin: 0;
    max-width: 700px;
    font-size: 16px;
    line-height: 1.6;
    color: #475569;
}

.not-found-page .not-found-links {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.not-found-page .not-found-links .btn-light {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #0f172a;
}

.not-found-page .not-found-links .btn-light:hover {
    background: #eef2f7;
    border-color: #94a3b8;
}

@media (max-width: 1024px) {
    .not-found-page {
        width: min(834px, calc(100% - 24px));
        margin: 12px auto;
        gap: 14px;
    }

    .not-found-page .not-found-shell {
        padding: 40px 24px;
    }

    .not-found-page .not-found-code {
        font-size: 62px;
    }

    .not-found-page .not-found-title {
        font-size: 34px;
    }
}

@media (max-width: 768px) {
    .not-found-page {
        width: min(390px, calc(100% - 16px));
        margin: 8px auto;
        gap: 10px;
    }

    .not-found-page .not-found-shell {
        padding: 30px 16px;
        gap: 10px;
    }

    .not-found-page .not-found-code {
        font-size: 52px;
    }

    .not-found-page .not-found-title {
        font-size: 30px;
    }

    .not-found-page .not-found-copy {
        font-size: 14px;
        line-height: 1.5;
    }

    .not-found-page .not-found-links {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .not-found-page .not-found-links .btn {
        width: 100%;
    }
}

/* ==========================================================================
   BLOG PAGE (SSR)
   ========================================================================== */
.blog-page .blog-shell {
    width: min(920px, 100%);
    margin: 8px auto 0;
    padding: 16px 14px;
    background: #eaf0ff;
    border: 1px solid #dbe5ff;
    border-radius: 12px;
    display: grid;
    gap: 10px;
}

.blog-page .blog-title {
    margin: 0;
    color: #0f172a;
    font-size: 47px;
    line-height: 1.05;
    font-weight: 700;
}

.blog-page .blog-intro,
.blog-page .blog-outro {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #ffffff;
    color: #334155;
    font-size: 13px;
    line-height: 1.35;
}

.blog-page .blog-outro a {
    color: #2563eb;
    text-decoration: none;
}

.blog-page .blog-outro a:hover {
    color: #1d4ed8;
    text-decoration: underline;
}

.blog-page .blog-sections {
    display: grid;
    gap: 8px;
}

.blog-page .blog-group {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px;
    display: grid;
    gap: 8px;
}

.blog-page .blog-group-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.blog-page .blog-group-head h2 {
    margin: 0;
    color: #0f172a;
    font-size: 26px;
    line-height: 1.1;
    font-weight: 700;
}

.blog-page .blog-view-all {
    color: #2563eb;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
}

.blog-page .blog-view-all:hover {
    color: #1d4ed8;
    text-decoration: underline;
}

.blog-page .blog-post-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
}

.blog-page .blog-post-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.blog-page .blog-post-link {
    color: #2563eb;
    text-decoration: none;
    font-size: 13px;
    line-height: 1.3;
}

.blog-page .blog-post-link:hover {
    color: #1d4ed8;
    text-decoration: underline;
}

.blog-page .blog-post-date {
    color: #64748b;
    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;
    flex-shrink: 0;
}

@media (max-width: 1024px) {
    .blog-page .blog-shell {
        width: min(930px, 100%);
    }
}

@media (max-width: 768px) {
    .blog-page .blog-shell {
        width: 100%;
        margin-top: 0;
        padding: 10px 8px;
        gap: 8px;
    }

    .blog-page .blog-title {
        font-size: 47px;
        line-height: 0.98;
        max-width: 235px;
    }

    .blog-page .blog-intro,
    .blog-page .blog-outro {
        padding: 8px 9px;
        font-size: 11px;
    }

    .blog-page .blog-group {
        padding: 8px;
        gap: 6px;
    }

    .blog-page .blog-group-head h2 {
        font-size: 22px;
    }

    .blog-page .blog-view-all,
    .blog-page .blog-post-link {
        font-size: 11px;
    }

    .blog-page .blog-post-date {
        font-size: 9px;
    }
}

/* ==========================================================================
   BLOG TYPE PAGE (SSR)
   ========================================================================== */
.blog-type-page .blog-type-shell {
    width: min(920px, 100%);
    margin: 8px auto 0;
    padding: 16px 14px;
    background: #eaf0ff;
    border: 1px solid #dbe5ff;
    border-radius: 12px;
    display: grid;
    gap: 10px;
}

.blog-type-page .blog-type-title {
    margin: 0;
    color: #0f172a;
    font-size: 47px;
    line-height: 1.05;
    font-weight: 700;
}

.blog-type-page .blog-type-intro {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #ffffff;
    color: #334155;
    font-size: 13px;
    line-height: 1.35;
}

.blog-type-page .blog-type-results {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #ffffff;
    padding: 10px 12px;
    display: grid;
    gap: 10px;
}

.blog-type-page .blog-type-results-info {
    margin: 0;
    color: #64748b;
    font-size: 12px;
    line-height: 1.2;
}

.blog-type-page .blog-type-results-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.blog-type-page .blog-type-sorting {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.blog-type-page .blog-type-sorting .sorting-label {
    color: #334155;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 500;
    white-space: nowrap;
}

.blog-type-page .blog-type-sort-dropdown {
    position: relative;
    width: 175px;
}

.blog-type-page .blog-type-sort-current {
    list-style: none;
    width: 175px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #ffffff;
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 600;
    color: #1f2937;
    cursor: pointer;
}

.blog-type-page .blog-type-sort-current::-webkit-details-marker {
    display: none;
}

.blog-type-page .blog-type-sort-current::after {
    content: "▾";
    float: right;
    color: #64748b;
}

.blog-type-page .blog-type-sort-dropdown[open] .blog-type-sort-current::after {
    transform: rotate(180deg);
}

.blog-type-page .blog-type-sort-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: 175px;
    z-index: 30;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.14);
    padding: 8px;
    display: grid;
    gap: 4px;
}

.blog-type-page .blog-type-sort-menu .sorting-option {
    display: block;
    padding: 8px 10px;
    border-radius: 8px;
    background: #f8fafc;
    color: #2563eb;
    font-size: 13px;
    line-height: 1.25;
    text-decoration: none;
}

.blog-type-page .blog-type-sort-menu .sorting-option:hover {
    background: #eaf2ff;
}

.blog-type-page .blog-type-sort-menu .sorting-option.is-active {
    background: #2563eb;
    color: #ffffff;
}

.blog-type-page .blog-type-list {
    display: grid;
    gap: 10px;
}

.blog-type-page .blog-type-item {
    display: grid;
    gap: 6px;
    padding: 8px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
}

.blog-type-page .blog-type-item-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.blog-type-page .blog-type-item-head h2 {
    margin: 0;
    font-size: 14px;
    line-height: 1.3;
    font-weight: 500;
}

.blog-type-page .blog-type-item-head a {
    color: #2563eb;
    text-decoration: none;
}

.blog-type-page .blog-type-item-head a:hover {
    color: #1d4ed8;
    text-decoration: underline;
}

.blog-type-page .blog-type-item-head time {
    color: #64748b;
    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;
    flex-shrink: 0;
}

.blog-type-page .blog-type-item-excerpt {
    margin: 0;
    color: #334155;
    font-size: 13px;
    line-height: 1.35;
}

.blog-type-page .blog-type-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 2px;
}

.blog-type-page .blog-type-pagination a,
.blog-type-page .blog-type-pagination span {
    color: #334155;
    font-size: 12px;
    line-height: 1.2;
    text-decoration: none;
}

.blog-type-page .blog-type-pagination .current {
    min-width: 20px;
    height: 20px;
    border-radius: 6px;
    background: #2563eb;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.blog-type-page .blog-type-pagination .disabled {
    color: #94a3b8;
}

@media (max-width: 1024px) {
    .blog-type-page .blog-type-shell {
        width: min(930px, 100%);
    }
}

@media (max-width: 768px) {
    .blog-type-page .blog-type-shell {
        width: 100%;
        margin-top: 0;
        padding: 10px 8px;
        gap: 8px;
    }

    .blog-type-page .blog-type-title {
        font-size: 47px;
        line-height: 0.98;
        max-width: 220px;
    }

    .blog-type-page .blog-type-intro,
    .blog-type-page .blog-type-item-excerpt {
        font-size: 11px;
        padding: 8px 9px;
    }

    .blog-type-page .blog-type-results-top {
        align-items: flex-start;
        flex-direction: column;
    }

    .blog-type-page .blog-type-sorting {
        width: 100%;
        justify-content: space-between;
    }

    .blog-type-page .blog-type-sorting .sorting-label,
    .blog-type-page .blog-type-sort-current,
    .blog-type-page .blog-type-sort-menu .sorting-option {
        font-size: 10px;
    }

    .blog-type-page .blog-type-sort-dropdown,
    .blog-type-page .blog-type-sort-current,
    .blog-type-page .blog-type-sort-menu {
        width: 100%;
    }

    .blog-type-page .blog-type-item {
        padding: 7px 8px;
    }

    .blog-type-page .blog-type-results {
        padding: 8px 9px;
        gap: 8px;
    }

    .blog-type-page .blog-type-results-info,
    .blog-type-page .blog-type-item-head h2,
    .blog-type-page .blog-type-item-head time,
    .blog-type-page .blog-type-pagination a,
    .blog-type-page .blog-type-pagination span {
        font-size: 9px;
    }

    .blog-type-page .blog-type-pagination {
        gap: 10px;
    }
}

/* Job page (SSR) */
.job-page .job-shell {
    display: grid;
}

/* ==========================================================================
   BLOG POST PAGE (SSR)
   ========================================================================== */
.blog-post-page .blog-post-shell {
    width: min(920px, 100%);
    margin: 8px auto 0;
    padding: 16px 14px;
    background: #eaf0ff;
    border: 1px solid #dbe5ff;
    border-radius: 12px;
    display: grid;
    gap: 10px;
}

.blog-post-page .blog-post-breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.2;
}

.blog-post-page .blog-post-breadcrumb a {
    color: #2563eb;
    text-decoration: none;
}

.blog-post-page .blog-post-breadcrumb a:hover {
    color: #1d4ed8;
    text-decoration: underline;
}

.blog-post-page .blog-post-title {
    margin: 0;
    color: #0f172a;
    font-size: 47px;
    line-height: 1.05;
    font-weight: 700;
}

.blog-post-page .blog-post-content {
    display: grid;
    gap: 8px;
}

/* Content from DB: apply all typography/layout through wrapper scope */
.blog-post-page .blog-post-content > * {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #ffffff;
    color: #334155;
    font-size: 13px;
    line-height: 1.4;
}

.blog-post-page .blog-post-content > h2,
.blog-post-page .blog-post-content > h3,
.blog-post-page .blog-post-content > h4 {
    color: #0f172a;
    font-weight: 700;
}

.blog-post-page .blog-post-content > * h2,
.blog-post-page .blog-post-content > * h3,
.blog-post-page .blog-post-content > * h4 {
    margin: 0;
    color: #0f172a;
    font-weight: 700;
}

.blog-post-page .blog-post-content > h2 {
    font-size: 24px;
}

.blog-post-page .blog-post-content > h3 {
    font-size: 20px;
}

.blog-post-page .blog-post-content > * h2 {
    font-size: 24px;
}

.blog-post-page .blog-post-content > * h3 {
    font-size: 22px;
    line-height: 1.2;
}

.blog-post-page .blog-post-content > ul,
.blog-post-page .blog-post-content > ol {
    padding-left: 30px;
}

.blog-post-page .blog-post-content > * p {
    margin: 0;
}

.blog-post-page .blog-post-content img {
    display: block;
    max-width: 100%;
    width: 100%;
    height: auto;
}

.blog-post-page .blog-post-content > * ul,
.blog-post-page .blog-post-content > * ol {
    margin: 0;
    padding-left: 20px;
    display: grid;
    gap: 4px;
}

.blog-post-page .blog-post-content > * li {
    margin: 0;
}

.blog-post-page .blog-post-content > div,
.blog-post-page .blog-post-content > section,
.blog-post-page .blog-post-content > article {
    display: grid;
    gap: 8px;
}

.blog-post-page .blog-post-content > .blog-post-image {
    padding: 0;
    overflow: hidden;
    gap: 0;
    background: linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%);
    border-color: #d6e4ff;
}

.blog-post-page .blog-post-content > .blog-post-image img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: none;
    margin: 0 auto;
    object-fit: contain;
    background: #dbeafe;
}

.blog-post-page .blog-post-image-caption {
    padding: 12px 14px 14px;
    color: #475569;
    font-size: 12px;
    line-height: 1.45;
    border-top: 1px solid #dbe5ff;
    background: rgba(255, 255, 255, 0.92);
}

.blog-post-page .blog-post-image-caption em {
    color: inherit;
}

.blog-post-page .blog-post-content > p:has(> img) {
    padding: 0;
    overflow: hidden;
}

.blog-post-page .blog-post-content > p:has(> img) > img {
    display: block;
    width: 100%;
    max-width: 100%;
    max-height: 480px;
    object-fit: cover;
    aspect-ratio: 16 / 9;
    background: #dbeafe;
}

.blog-post-page .blog-post-content > p:has(> img) + p {
    color: #475569;
    font-size: 12px;
    line-height: 1.45;
}

.blog-post-page .blog-post-content > p:has(> img) + p > em {
    color: inherit;
}

/* Legacy/DB blog HTML wrappers: style inner content blocks as cards too */
.blog-post-page .blog-post-content > .single-blog-description {
    padding: 0;
    border: 0;
    background: transparent;
    display: grid;
    gap: 8px;
}

.blog-post-page .blog-post-content .description {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #ffffff;
    color: #334155;
    font-size: 13px;
    line-height: 1.4;
    display: grid;
    gap: 8px;
}

.blog-post-page .blog-post-content .description h3 {
    margin: 0;
    color: #0f172a;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 700;
}

.blog-post-page .blog-post-content .description p {
    margin: 0;
}

.blog-post-page .blog-post-content .description ul,
.blog-post-page .blog-post-content .description ol {
    margin: 0;
    padding-left: 20px;
    display: grid;
    gap: 4px;
}

.blog-post-page .blog-post-content a {
    color: #2563eb;
    text-decoration: none;
}

.blog-post-page .blog-post-content a:hover {
    color: #1d4ed8;
    text-decoration: underline;
}

.blog-post-page .blog-post-published {
    margin: 0;
    color: #64748b;
    font-size: 12px;
    line-height: 1.3;
}

@media (max-width: 1024px) {
    .blog-post-page .blog-post-shell {
        width: min(930px, 100%);
    }
}

@media (max-width: 768px) {
    .blog-post-page .blog-post-shell {
        width: 100%;
        margin-top: 0;
        padding: 10px 8px;
        gap: 8px;
    }

    .blog-post-page .blog-post-breadcrumb,
    .blog-post-page .blog-post-published {
        font-size: 9px;
    }

    .blog-post-page .blog-post-title {
        font-size: 28px;
        line-height: 1.05;
    }

    .blog-post-page .blog-post-content > * {
        padding: 8px 9px;
        font-size: 11px;
        line-height: 1.35;
    }

    .blog-post-page .blog-post-content .description {
        padding: 8px 9px;
        font-size: 11px;
        line-height: 1.35;
        gap: 6px;
    }

    .blog-post-page .blog-post-content .description h3 {
        font-size: 14px;
        line-height: 1.2;
    }

    .blog-post-page .blog-post-content > h2 {
        font-size: 16px;
    }

    .blog-post-page .blog-post-content > h3 {
        font-size: 14px;
    }

    .blog-post-page .blog-post-content > * h2 {
        font-size: 16px;
    }

    .blog-post-page .blog-post-content > * h3 {
        font-size: 14px;
    }
}

.job-page .job-content-frame {
    display: grid;
    gap: 10px;
    padding: 14px;
    border-radius: 10px;
    background: #fff;
}

.job-page .job-title {
    margin: 0;
    display: block;
    font-size: 47px;
    line-height: 1.08;
    color: #0f172a;
}

.job-page .job-title-text {
    display: inline;
}

.job-page .job-favourite-star {
    margin: 0 0 0 8px;
    color: #64748b;
    font-size: 30px;
    line-height: 1.1;
    cursor: pointer;
}

.job-page .job-title .job-favourite-star {
    margin-left: 5px;
    display: inline-block;
    vertical-align: middle;
}

.job-page .job-favourite-star.is-favourited {
    color: #2563eb;
}

.job-page .job-hsm-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    color: #3730a3;
    font-size: 11px;
    font-weight: 600;
    vertical-align: middle;
}

.job-page .job-meta {
    display: grid;
    gap: 6px;
    padding: 12px;
    border-radius: 8px;
    background: #f8fafc;
}

.job-page .job-meta p {
    margin: 0;
    color: #334155;
    font-size: 15px;
    line-height: 1.6;
}

.job-page .job-meta a {
    color: #1d4ed8;
    text-decoration: none;
}

.job-page .job-meta a:hover {
    text-decoration: underline;
}

.job-page .job-body {
    display: grid;
    gap: 10px;
    padding: 14px;
    border-radius: 10px;
    background: #f8fafc;
    color: #334155;
}

.job-page .job-body h2,
.job-page .job-body h3 {
    margin: 0;
    color: #0f172a;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
}

.job-page .job-body p {
    margin: 0;
    font-size: 18px;
    line-height: 1.65;
}

.job-page .job-body ul {
    margin: 0;
    padding-left: 24px;
}

.job-page .job-body li {
    font-size: 18px;
    line-height: 1.65;
}

.job-page .job-original-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.job-page .job-actions .btn {
    font-size: 12px;
    padding: 8px 12px;
    border-radius: 8px;
}

.job-page .job-updated {
    margin: 0;
    color: #64748b;
    font-size: 11px;
    white-space: nowrap;
}

.job-page .job-similar {
    display: grid;
    gap: 10px;
    padding: 12px;
    border-radius: 10px;
    background: #eaf0ff;
}

.job-page .job-similar h2 {
    margin: 0;
    color: #0f172a;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
}

.job-page .job-similar-list {
    display: grid;
    gap: 10px;
}

.job-page .job-similar-item {
    display: grid;
    gap: 5px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.job-page .job-similar-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.job-page .job-similar-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.job-page .job-similar-star {
    color: #64748b;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    transform: translateY(-1px);
    cursor: pointer;
}

.job-page .job-similar-star.is-favourited {
    color: #2563eb;
}

.job-page .job-similar-added {
    margin: 0;
    color: #64748b;
    font-size: 11px;
    line-height: 1.35;
    white-space: nowrap;
}

.job-page .job-similar-item h3 {
    margin: 0;
    font-size: 20px;
    line-height: 1.35;
}

.job-page .job-similar-item h3 a {
    color: #1d4ed8;
    text-decoration: none;
}

.job-page .job-similar-company a {
    color: #1d4ed8;
    text-decoration: none;
}

.job-page .job-similar-company,
.job-page .job-similar-excerpt,
.job-page .job-similar-meta {
    margin: 0;
    color: #334155;
    font-size: 13px;
    line-height: 1.45;
}

.job-page .job-similar-meta {
    font-size: 12px;
    color: #475569;
}

.job-page .job-similar-meta .meta-link {
    color: #1d4ed8;
    text-decoration: none;
}

.job-page .job-similar-meta .meta-link:hover {
    text-decoration: underline;
}

.job-page .job-similar-admin-meta {
    margin: 0;
    color: #64748b;
    font-size: 11px;
    line-height: 1.35;
    white-space: nowrap;
}

@media (min-width: 769px) and (max-width: 1024px) {
    .job-page .job-title {
        font-size: 34px;
    }

    .job-page .job-favourite-star {
        font-size: 20px;
    }
}

@media (max-width: 768px) {
    .job-page .job-title {
        font-size: 24px;
        line-height: 1.2;
    }

    .job-page .job-favourite-star {
        font-size: 20px;
    }

    .job-page .job-hsm-badge {
        margin-top: 6px;
    }

    .job-page .job-original-row {
        flex-direction: column;
        align-items: center;
        gap: 8px;
        justify-content: center;
        text-align: center;
    }

    .job-page .job-actions {
        width: auto;
        display: flex;
        justify-content: center;
    }

    .job-page .job-actions .btn {
        width: auto;
    }

    .job-page .job-updated {
        white-space: normal;
        text-align: center;
    }

    .job-page .job-similar h2 {
        font-size: 26px;
    }

    .job-page .job-similar-head {
        flex-direction: column;
        gap: 4px;
    }

    .job-page .job-similar-added {
        white-space: normal;
    }

    .job-page .job-similar-item h3 {
        font-size: 18px;
    }

    .job-page .job-meta p {
        font-size: 14px;
        line-height: 1.55;
    }

    .job-page .job-body h2,
    .job-page .job-body h3 {
        font-size: 20px;
        line-height: 1.3;
    }

.job-page .job-body p,
.job-page .job-body li {
    font-size: 16px;
    line-height: 1.6;
}

    .job-page .job-body ul {
        padding-left: 20px;
    }
}

/* =============================================================================
   ABOUT PAGE (SSR)
   ============================================================================= */

.about-body {
    margin: 0;
    padding: 0;
    background: #f8fafc;
    font-family: var(--font-sans);
}

.about-page .about-shell {
    width: min(1160px, 100%);
    margin: 8px auto 0;
    padding: 18px 20px;
    background: #eaf0ff;
    border: 1px solid #dbe5ff;
    border-radius: 12px;
    display: grid;
    gap: 12px;
}

.about-page .about-title {
    margin: 0;
    color: #0f172a;
    font-size: 47px;
    line-height: 1.05;
    font-weight: 700;
}

.about-page .about-content {
    display: grid;
    gap: 6px;
    padding: 12px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.about-page .about-block {
    display: grid;
    gap: 6px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
}

.about-page .about-block h2 {
    margin: 0;
    color: #0f172a;
    font-size: 30px;
    line-height: 1.2;
    font-weight: 700;
}

.about-page .about-block p,
.about-page .about-block li {
    margin: 0;
    color: #334155;
    font-size: 13px;
    line-height: 1.45;
}

.about-page .about-lead {
    margin: 0;
}

.about-page .about-lead strong {
    color: #0f172a;
    font-size: 18px;
    line-height: 1.3;
    font-weight: 700;
}

.about-page .about-block ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 4px;
}

.about-page .about-block li::before {
    content: "• ";
    color: #334155;
}

.about-page .about-links {
    margin: 0;
    padding: 6px 2px 2px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.about-page .about-links a {
    color: #2563eb;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.about-page .about-links a:hover {
    text-decoration: underline;
}

@media (min-width: 769px) and (max-width: 1024px) {
    .about-page .about-shell {
        width: min(920px, 100%);
        padding: 14px;
    }

    .about-page .about-title {
        font-size: 47px;
    }
}

@media (max-width: 768px) {
    .about-page .about-shell {
        width: 100%;
        padding: 10px 8px;
        gap: 8px;
    }

    .about-page .about-title {
        font-size: 47px;
    }

    .about-page .about-content {
        padding: 8px;
        gap: 6px;
    }

    .about-page .about-block {
        padding: 8px;
        gap: 4px;
    }

    .about-page .about-block h2 {
        font-size: 25px;
    }

    .about-page .about-block p,
    .about-page .about-block li {
        font-size: 11px;
        line-height: 1.35;
    }

    .about-page .about-lead strong {
        font-size: 13px;
    }

    .about-page .about-links {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        padding-top: 4px;
    }

    .about-page .about-links a {
        font-size: 11px;
    }
}

/* =============================================================================
   CONTACT PAGE (SSR)
   ============================================================================= */

.contact-body {
    margin: 0;
    padding: 0;
    background: #f8fafc;
    font-family: var(--font-sans);
}

.contact-page .contact-shell {
    width: min(1160px, 100%);
    margin: 8px auto 0;
    padding: 18px 20px;
    background: #eaf0ff;
    border: 1px solid #dbe5ff;
    border-radius: 12px;
    display: grid;
    gap: 12px;
}

.contact-page .contact-title {
    margin: 0;
    color: #0f172a;
    font-size: 47px;
    line-height: 1.05;
    font-weight: 700;
}

.contact-page .contact-content {
    display: grid;
    gap: 6px;
    padding: 12px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.contact-page .contact-block {
    display: grid;
    gap: 6px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
}

.contact-page .contact-block h2 {
    margin: 0;
    color: #0f172a;
    font-size: 30px;
    line-height: 1.2;
    font-weight: 700;
}

.contact-page .contact-block h3 {
    margin: 6px 0 0;
    color: #0f172a;
    font-size: 18px;
    line-height: 1.3;
    font-weight: 700;
}

.contact-page .contact-help-card {
    display: grid;
    gap: 4px;
    padding: 12px;
    border-radius: 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.contact-page .contact-help-card h3 {
    margin: 0;
}

.contact-page .contact-help-card p {
    margin: 0;
}

.contact-page .contact-block p {
    margin: 0;
    color: #334155;
    font-size: 13px;
    line-height: 1.45;
}

.contact-page .contact-lead {
    margin: 0;
}

.contact-page .contact-lead strong {
    color: #0f172a;
    font-size: 18px;
    line-height: 1.3;
    font-weight: 700;
}

.contact-page .contact-block a {
    color: #2563eb;
    text-decoration: none;
}

.contact-page .contact-block a:hover {
    text-decoration: underline;
}

.contact-page .contact-note {
    margin: 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #64748b;
    font-size: 11px;
    line-height: 1.35;
}

@media (min-width: 769px) and (max-width: 1024px) {
    .contact-page .contact-shell {
        width: min(920px, 100%);
        padding: 14px;
    }

    .contact-page .contact-title {
        font-size: 47px;
    }
}

@media (max-width: 768px) {
    .contact-page .contact-shell {
        width: 100%;
        padding: 10px 8px;
        gap: 8px;
    }

    .contact-page .contact-title {
        font-size: 47px;
    }

    .contact-page .contact-content {
        padding: 8px;
        gap: 6px;
    }

    .contact-page .contact-block {
        padding: 8px;
        gap: 4px;
    }

    .contact-page .contact-block h2 {
        font-size: 25px;
    }

    .contact-page .contact-block h3 {
        font-size: 13px;
    }

    .contact-page .contact-help-card {
        padding: 8px;
    }

    .contact-page .contact-block p {
        font-size: 11px;
        line-height: 1.35;
    }

    .contact-page .contact-lead strong {
        font-size: 13px;
    }

    .contact-page .contact-note {
        padding: 8px;
        font-size: 10px;
    }
}

/* =============================================================================
   FAQ PAGE (SSR)
   ============================================================================= */

.faq-body {
    margin: 0;
    padding: 0;
    background: #f8fafc;
    font-family: var(--font-sans);
}

.faq-page .faq-shell {
    width: min(1160px, 100%);
    margin: 8px auto 0;
    padding: 18px 20px;
    background: #eaf0ff;
    border: 1px solid #dbe5ff;
    border-radius: 12px;
    display: grid;
    gap: 8px;
}

.faq-page .faq-title {
    margin: 0;
    color: #0f172a;
    font-size: 47px;
    line-height: 1.05;
    font-weight: 700;
}

.faq-page .faq-intro {
    margin: 0;
    color: #334155;
    font-size: 12px;
    line-height: 1.4;
}

.faq-page .faq-list {
    display: grid;
    gap: 6px;
}

.faq-page .faq-item {
    display: grid;
    gap: 4px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
}

.faq-page .faq-item h2 {
    margin: 0;
    color: #0f172a;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 700;
}

.faq-page .faq-item p,
.faq-page .faq-item li {
    margin: 0;
    color: #334155;
    font-size: 13px;
    line-height: 1.45;
}

.faq-page .faq-item a {
    color: #2563eb;
    text-decoration: none;
}

.faq-page .faq-item a:hover {
    text-decoration: underline;
}

.faq-page #premium-faq-card {
    background: #dbeafe;
}

.faq-page .hsm-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 2px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #dbeafe;
    border: 1px solid #bfdbfe;
    color: #1e3a8a;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.15;
}

.faq-page #premium-faq-features {
    display: grid;
    gap: 4px;
}

.faq-page .premium-feature-list {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 4px;
}

.faq-page #premium-faq-categories {
    margin-top: 4px;
}

.faq-page .premium-category-tree,
.faq-page .premium-category-sublist {
    margin: 0;
    display: grid;
    gap: 3px;
    list-style: none;
}

.faq-page .premium-category-tree {
    padding-left: 10px;
}

.faq-page .premium-category-sublist {
    padding-left: 10px;
}

.faq-page .premium-category-text {
    color: #334155;
    font-size: 12px;
    font-weight: 700;
}

.faq-page .premium-category-link {
    color: #2563eb;
    text-decoration: none;
    font-size: 12px;
}

.faq-page .premium-category-link:hover {
    text-decoration: underline;
}

.faq-page .fine-print {
    margin: 0;
    color: #64748b;
    font-size: 11px;
    line-height: 1.35;
}

@media (min-width: 769px) and (max-width: 1024px) {
    .faq-page .faq-shell {
        width: min(920px, 100%);
        padding: 14px;
    }

    .faq-page .faq-title {
        font-size: 47px;
    }
}

@media (max-width: 768px) {
    .faq-page .faq-shell {
        width: 100%;
        padding: 10px 8px;
        gap: 6px;
    }

    .faq-page .faq-title {
        font-size: 47px;
        line-height: 1.02;
    }

    .faq-page .faq-intro {
        font-size: 10px;
        line-height: 1.3;
    }

    .faq-page .faq-list {
        gap: 4px;
    }

    .faq-page .faq-item {
        padding: 8px;
        gap: 3px;
    }

    .faq-page .faq-item h2 {
        font-size: 13px;
    }

    .faq-page .faq-item p,
    .faq-page .faq-item li {
        font-size: 10px;
        line-height: 1.3;
    }

    .faq-page .premium-feature-list {
        padding-left: 16px;
        gap: 2px;
    }

    .faq-page .premium-category-tree,
    .faq-page .premium-category-sublist {
        gap: 2px;
    }

    .faq-page .premium-category-text,
    .faq-page .premium-category-link {
        font-size: 10px;
    }

    .faq-page .fine-print {
        font-size: 10px;
    }
}

/* =============================================================================
   FAVOURITES PAGE (SSR)
   ============================================================================= */

.favourites-body {
    margin: 0;
    padding: 0;
    background: #f8fafc;
    font-family: var(--font-sans);
}

.favourites-page .favourites-shell {
    width: min(1160px, 100%);
    margin: 8px auto 0;
    padding: 18px 20px;
    background: #eaf0ff;
    border: 1px solid #dbe5ff;
    border-radius: 12px;
    display: grid;
    gap: 10px;
}

.favourites-page .favourites-title {
    margin: 0;
    color: #0f172a;
    font-size: 47px;
    line-height: 1.05;
    font-weight: 700;
}

.favourites-page .favourites-summary {
    display: grid;
    gap: 2px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.favourites-page .favourites-summary-title {
    margin: 0;
    color: #0f172a;
    font-size: 18px;
    font-weight: 500;
}

.favourites-page .favourites-summary-copy {
    margin: 0;
    color: #475569;
    font-size: 12px;
    line-height: 1.35;
}

.favourites-page .favourites-list {
    display: grid;
    gap: 8px;
}

.favourites-page .job-similar-item {
    display: grid;
    gap: 5px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
}

.favourites-page .job-similar-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.favourites-page .job-similar-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.favourites-page .job-similar-item h3 {
    margin: 0;
    font-size: 26px;
    line-height: 1.25;
}

.favourites-page .job-similar-item h3 a,
.favourites-page .job-similar-company a,
.favourites-page .job-similar-meta .meta-link {
    color: #1d4ed8;
    text-decoration: none;
}

.favourites-page .job-similar-item h3 a:hover,
.favourites-page .job-similar-company a:hover,
.favourites-page .job-similar-meta .meta-link:hover {
    text-decoration: underline;
}

.favourites-page .job-similar-star {
    color: #2563eb;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.favourites-page .job-similar-star.is-favourited {
    color: #2563eb;
}

.favourites-page .job-hsm-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1px 7px;
    border-radius: 999px;
    background: #dbeafe;
    border: 1px solid #bfdbfe;
    color: #1e3a8a;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.15;
}

.favourites-page .job-similar-added {
    margin: 0;
    color: #64748b;
    font-size: 11px;
    line-height: 1.35;
    white-space: nowrap;
}

.favourites-page .job-similar-company,
.favourites-page .job-similar-excerpt,
.favourites-page .job-similar-meta {
    margin: 0;
    color: #334155;
    font-size: 13px;
    line-height: 1.45;
}

.favourites-page .job-similar-meta {
    font-size: 12px;
    color: #475569;
}

.favourites-page .job-similar-admin-meta {
    margin: 0;
    color: #64748b;
    font-size: 11px;
    line-height: 1.35;
    white-space: nowrap;
}

.favourites-page .favourites-empty {
    margin: 0;
    padding: 12px;
    border-radius: 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: 13px;
    line-height: 1.45;
}

.favourites-page .favourites-empty a {
    color: #2563eb;
    text-decoration: none;
}

.favourites-page .favourites-empty a:hover {
    text-decoration: underline;
}

.favourites-page .favourites-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #475569;
    font-size: 12px;
}

.favourites-page .favourites-pagination a {
    color: #1d4ed8;
    text-decoration: none;
    font-weight: 600;
}

.favourites-page .favourites-pagination a:hover {
    text-decoration: underline;
}

@media (min-width: 769px) and (max-width: 1024px) {
    .favourites-page .favourites-shell {
        width: min(920px, 100%);
        padding: 14px;
    }

    .favourites-page .favourites-title {
        font-size: 47px;
    }

    .favourites-page .job-similar-item h3 {
        font-size: 30px;
    }
}

@media (max-width: 768px) {
    .favourites-page .favourites-shell {
        width: 100%;
        padding: 10px 8px;
        gap: 8px;
    }

    .favourites-page .favourites-title {
        font-size: 47px;
        line-height: 1.02;
    }

    .favourites-page .favourites-summary {
        padding: 8px;
    }

    .favourites-page .favourites-summary-title {
        font-size: 13px;
    }

    .favourites-page .favourites-summary-copy {
        font-size: 10px;
        line-height: 1.3;
    }

    .favourites-page .job-similar-item {
        padding: 8px;
        gap: 4px;
    }

    .favourites-page .job-similar-head {
        flex-direction: column;
        gap: 4px;
    }

    .favourites-page .job-similar-item h3 {
        font-size: 24px;
    }

    .favourites-page .job-similar-added {
        white-space: normal;
        font-size: 10px;
    }

    .favourites-page .job-similar-company,
    .favourites-page .job-similar-excerpt,
    .favourites-page .job-similar-meta {
        font-size: 10px;
        line-height: 1.3;
    }

    .favourites-page .job-similar-meta {
        font-size: 10px;
    }
}

/* =============================================================================
   SUBSCRIPTION PAGE (SSR)
   ============================================================================= */

.subscription-body {
    margin: 0;
    padding: 0;
    background: #f8fafc;
    font-family: var(--font-sans);
}

.subscription-page .subscription-shell {
    width: min(1160px, 100%);
    margin: 8px auto 0;
    padding: 18px 20px;
    background: #eaf0ff;
    border: 1px solid #dbe5ff;
    border-radius: 12px;
    display: grid;
    gap: 8px;
}

.subscription-page .subscription-title {
    margin: 0;
    color: #0f172a;
    font-size: 47px;
    line-height: 1.05;
    font-weight: 700;
}

.subscription-page #premium-faq-card {
    margin: 0;
    display: grid;
    gap: 6px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #c7d2fe;
    background: #dbeafe;
}

.subscription-page #premium-faq-card h2 {
    margin: 0;
    color: #0f172a;
    font-size: 30px;
    line-height: 1.2;
    font-weight: 700;
}

.subscription-page #premium-faq-card p,
.subscription-page #premium-faq-card li {
    margin: 0;
    color: #334155;
    font-size: 13px;
    line-height: 1.45;
}

.subscription-page #premium-faq-features {
    display: grid;
    gap: 4px;
}

.subscription-page .premium-feature-list {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 4px;
}

.subscription-page #premium-faq-categories {
    margin-top: 4px;
}

.subscription-page .premium-category-tree,
.subscription-page .premium-category-sublist {
    margin: 0;
    list-style: none;
    display: grid;
    gap: 3px;
}

.subscription-page .premium-category-tree {
    padding-left: 10px;
}

.subscription-page .premium-category-sublist {
    padding-left: 10px;
}

.subscription-page .premium-category-text {
    color: #334155;
    font-size: 12px;
    font-weight: 700;
}

.subscription-page .premium-category-link {
    color: #2563eb;
    text-decoration: none;
    font-size: 12px;
}

.subscription-page .premium-category-link:hover {
    text-decoration: underline;
}

.subscription-page .fine-print {
    margin: 0;
    color: #64748b;
    font-size: 11px;
    line-height: 1.35;
}

.subscription-page .subscription-info,
.subscription-page .subscription-fit,
.subscription-page .subscription-payment {
    display: grid;
    gap: 6px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
}

.subscription-page .subscription-info p,
.subscription-page .subscription-fit p,
.subscription-page .subscription-payment p {
    margin: 0;
    color: #334155;
    font-size: 13px;
    line-height: 1.45;
}

.subscription-page .subscription-fit h2,
.subscription-page .subscription-payment h2 {
    margin: 0;
    color: #0f172a;
    font-size: 30px;
    line-height: 1.2;
    font-weight: 700;
}

.subscription-page .subscription-payment .legal-disclaimer a {
    color: #2563eb;
    text-decoration: none;
}

.subscription-page .subscription-payment .legal-disclaimer a:hover {
    text-decoration: underline;
}

.subscription-page .legal-consent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: #334155;
    font-size: 12px;
    line-height: 1.35;
}

.subscription-page .legal-consent input {
    margin-top: 2px;
}

.subscription-page #loading-message p {
    color: #2563eb;
    font-size: 12px;
    font-weight: 600;
}

.subscription-page .premium-button {
    width: fit-content;
    min-width: 174px;
}

.subscription-page #subscribe-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    border: 0;
    border-radius: 10px;
    background: #2563eb;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
}

.subscription-page #subscribe-button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

@media (min-width: 769px) and (max-width: 1024px) {
    .subscription-page .subscription-shell {
        width: min(920px, 100%);
        padding: 14px;
    }

    .subscription-page .subscription-title {
        font-size: 47px;
    }
}

@media (max-width: 768px) {
    .subscription-page .subscription-shell {
        width: 100%;
        padding: 10px 8px;
        gap: 6px;
    }

    .subscription-page .subscription-title {
        font-size: 47px;
        line-height: 1.02;
    }

    .subscription-page #premium-faq-card,
    .subscription-page .subscription-info,
    .subscription-page .subscription-fit,
    .subscription-page .subscription-payment {
        padding: 8px;
        gap: 4px;
    }

    .subscription-page #premium-faq-card h2,
    .subscription-page .subscription-fit h2,
    .subscription-page .subscription-payment h2 {
        font-size: 25px;
    }

    .subscription-page #premium-faq-card p,
    .subscription-page #premium-faq-card li,
    .subscription-page .subscription-info p,
    .subscription-page .subscription-fit p,
    .subscription-page .subscription-payment p,
    .subscription-page .legal-consent {
        font-size: 10px;
        line-height: 1.3;
    }

    .subscription-page .premium-feature-list {
        padding-left: 16px;
        gap: 2px;
    }

    .subscription-page .premium-category-text,
    .subscription-page .premium-category-link {
        font-size: 10px;
    }

    .subscription-page .fine-print {
        font-size: 10px;
    }

    .subscription-page .premium-button {
        width: fit-content;
        min-width: 150px;
    }
}

/* =============================================================================
   PRICES PAGE (SSR)
   ============================================================================= */

.prices-body {
    margin: 0;
    padding: 0;
    background: #f8fafc;
    font-family: var(--font-sans);
}

.prices-page .prices-shell {
    width: min(1160px, 100%);
    margin: 8px auto 0;
    padding: 18px 20px;
    background: #eaf0ff;
    border: 1px solid #dbe5ff;
    border-radius: 12px;
    display: grid;
    gap: 10px;
}

.prices-page .prices-title {
    margin: 0;
    color: #0f172a;
    font-size: 47px;
    line-height: 1.08;
    font-weight: 700;
}

.prices-page .prices-intro-card,
.prices-page .prices-extra-card {
    display: grid;
    gap: 7px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
}

.prices-page .prices-intro-card p,
.prices-page .prices-extra-card p {
    margin: 0;
    color: #334155;
    font-size: 14px;
    line-height: 1.45;
}

.prices-page .prices-intro-note {
    color: #475569;
    font-size: 13px;
    font-weight: 500;
}

.prices-page .prices-extra-card h2 {
    margin: 0;
    color: #0f172a;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 700;
}

.prices-page .prices-plan-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.prices-page .prices-plan-card {
    display: grid;
    align-content: start;
    justify-items: center;
    gap: 12px;
    padding: 18px 16px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
}

.prices-page .prices-plan-header {
    display: grid;
    justify-items: center;
    gap: 4px;
}

.prices-page .prices-plan-header h2 {
    margin: 0;
    color: #0f172a;
    font-size: 30px;
    line-height: 1.2;
    font-weight: 700;
}

.prices-page .prices-plan-price {
    margin: 0;
    color: #0f172a;
    font-size: 47px;
    line-height: 1;
    font-weight: 700;
    display: inline-flex;
    align-items: flex-start;
}

.prices-page .prices-plan-price .price-main {
    line-height: 1;
}

.prices-page .prices-plan-price .price-decimals {
    font-size: 0.45em;
    line-height: 1;
    margin-left: 2px;
    top: 0.3em;
}

.prices-page .prices-plan-period {
    margin: 0;
    color: #64748b;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
}

.prices-page .prices-plan-features {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 4px;
    color: #334155;
    font-size: 14px;
    line-height: 1.45;
    text-align: center;
}

.prices-page .prices-plan-features li::before {
    content: "• ";
}

.prices-page .prices-buy-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    border: 0;
    border-radius: 10px;
    background: #2563eb;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
}

.prices-page .prices-buy-button:hover {
    background: #1d4ed8;
}

.prices-page .prices-buy-button:focus-visible {
    outline: 2px solid #1d4ed8;
    outline-offset: 2px;
}

.prices-page .prices-plan-disclaimer {
    margin: 0;
    color: #64748b;
    font-size: 12px;
    line-height: 1.35;
    text-align: center;
}

.prices-page #premium-faq-card {
    margin: 0;
    display: grid;
    gap: 6px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid #c7d2fe;
    background: #dbeafe;
}

.prices-page #premium-faq-card h2 {
    margin: 0;
    color: #0f172a;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 700;
}

.prices-page #premium-faq-card p,
.prices-page #premium-faq-card li {
    margin: 0;
    color: #334155;
    font-size: 14px;
    line-height: 1.45;
}

.prices-page #premium-faq-features {
    display: grid;
    gap: 4px;
}

.prices-page .premium-feature-list {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 4px;
}

.prices-page #premium-faq-categories {
    margin-top: 4px;
}

.prices-page .premium-category-tree,
.prices-page .premium-category-sublist {
    margin: 0;
    list-style: none;
    display: grid;
    gap: 3px;
}

.prices-page .premium-category-tree {
    padding-left: 20px;
}

.prices-page .premium-category-sublist {
    padding-left: 20px;
}

.prices-page .premium-category-text {
    color: #334155;
    font-size: 13px;
    font-weight: 700;
}

.prices-page .premium-category-link {
    color: #2563eb;
    text-decoration: none;
    font-size: 13px;
}

.prices-page .premium-category-link:hover {
    text-decoration: underline;
}

.prices-page .fine-print {
    margin: 0;
    color: #64748b;
    font-size: 12px;
    line-height: 1.35;
}

.prices-page .primary-link {
    color: #2563eb;
    text-decoration: none;
}

.prices-page .primary-link:hover {
    text-decoration: underline;
}

@media (min-width: 769px) and (max-width: 1024px) {
    .prices-page .prices-shell {
        width: min(920px, 100%);
        padding: 14px;
    }

    .prices-page .prices-title {
        font-size: 47px;
    }

    .prices-page .prices-plan-header h2 {
        font-size: 25px;
    }

    .prices-page .prices-plan-price {
        font-size: 47px;
    }

    .prices-page .prices-plan-features,
    .prices-page #premium-faq-card p,
    .prices-page #premium-faq-card li,
    .prices-page .prices-intro-card p,
    .prices-page .prices-extra-card p {
        font-size: 13px;
    }
}

@media (max-width: 768px) {
    .prices-page .prices-shell {
        width: 100%;
        padding: 10px 8px;
        gap: 8px;
    }

    .prices-page .prices-title {
        font-size: 34px;
        line-height: 1.08;
    }

    .prices-page .prices-intro-card,
    .prices-page .prices-extra-card,
    .prices-page #premium-faq-card,
    .prices-page .prices-plan-card {
        padding: 8px;
        gap: 6px;
    }

    .prices-page .prices-plan-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .prices-page .prices-plan-header h2 {
        font-size: 25px;
    }

    .prices-page .prices-plan-price {
        font-size: 47px;
    }

    .prices-page .prices-plan-period {
        font-size: 11px;
    }

    .prices-page .prices-intro-card p,
    .prices-page .prices-extra-card p,
    .prices-page #premium-faq-card p,
    .prices-page #premium-faq-card li,
    .prices-page .prices-plan-features {
        font-size: 12px;
        line-height: 1.35;
    }

    .prices-page #premium-faq-card h2,
    .prices-page .prices-extra-card h2 {
        font-size: 16px;
    }

    .prices-page .premium-feature-list {
        padding-left: 16px;
        gap: 2px;
    }

    .prices-page .premium-category-tree,
    .prices-page .premium-category-sublist {
        padding-left: 16px;
        gap: 2px;
    }

    .prices-page .premium-category-text,
    .prices-page .premium-category-link,
    .prices-page .fine-print,
    .prices-page .prices-plan-disclaimer {
        font-size: 11px;
    }

    .prices-page .prices-buy-button {
        width: 100%;
    }
}

/* =============================================================================
   TERMS PAGE (SSR)
   ============================================================================= */

.terms-body {
    margin: 0;
    padding: 0;
    background: #f8fafc;
    font-family: var(--font-sans);
}

.terms-page .terms-shell {
    width: min(1160px, 100%);
    margin: 8px auto 0;
    padding: 18px 20px;
    background: #eaf0ff;
    border: 1px solid #dbe5ff;
    border-radius: 12px;
    display: grid;
    gap: 10px;
}

.terms-page .terms-title {
    margin: 0;
    color: #0f172a;
    font-size: 47px;
    line-height: 1.08;
    font-weight: 700;
}

.terms-page .terms-card {
    margin: 0;
    display: grid;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
}

.terms-page .terms-updated {
    margin: 0;
    color: #475569;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 500;
}

.terms-page .terms-card h2 {
    margin: 0;
    color: #0f172a;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 700;
}

.terms-page .terms-card p,
.terms-page .terms-card li {
    margin: 0;
    color: #334155;
    font-size: 14px;
    line-height: 1.5;
}

.terms-page .terms-card ul {
    margin: 0;
    padding-left: 20px;
    display: grid;
    gap: 4px;
}

.terms-page .terms-card a {
    color: #2563eb;
    text-decoration: none;
    font-weight: 600;
}

.terms-page .terms-card a:hover {
    text-decoration: underline;
}

@media (min-width: 769px) and (max-width: 1024px) {
    .terms-page .terms-shell {
        width: min(920px, 100%);
        padding: 14px;
    }

    .terms-page .terms-title {
        font-size: 47px;
    }

    .terms-page .terms-card {
        gap: 9px;
        padding: 14px;
    }

    .terms-page .terms-updated {
        font-size: 12px;
    }

    .terms-page .terms-card h2 {
        font-size: 17px;
    }

    .terms-page .terms-card p,
    .terms-page .terms-card li {
        font-size: 13px;
        line-height: 1.45;
    }
}

@media (max-width: 768px) {
    .terms-page .terms-shell {
        width: 100%;
        padding: 10px 8px;
        gap: 8px;
    }

    .terms-page .terms-title {
        font-size: 34px;
        line-height: 1.05;
    }

    .terms-page .terms-card {
        gap: 8px;
        padding: 12px;
    }

    .terms-page .terms-updated {
        font-size: 11px;
    }

    .terms-page .terms-card h2 {
        font-size: 15px;
    }

    .terms-page .terms-card p,
    .terms-page .terms-card li {
        font-size: 12px;
        line-height: 1.35;
    }

    .terms-page .terms-card ul {
        padding-left: 18px;
        gap: 2px;
    }
}

/* =============================================================================
   PRIVACY PAGE (SSR)
   ============================================================================= */

.privacy-body {
    margin: 0;
    padding: 0;
    background: #f8fafc;
    font-family: var(--font-sans);
}

.privacy-page .privacy-shell {
    width: min(1160px, 100%);
    margin: 8px auto 0;
    padding: 18px 20px;
    background: #eaf0ff;
    border: 1px solid #dbe5ff;
    border-radius: 12px;
    display: grid;
    gap: 10px;
}

.privacy-page .privacy-title {
    margin: 0;
    color: #0f172a;
    font-size: 47px;
    line-height: 1.08;
    font-weight: 700;
}

.privacy-page .privacy-card {
    margin: 0;
    display: grid;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
}

.privacy-page .privacy-updated {
    margin: 0;
    color: #475569;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 500;
}

.privacy-page .privacy-card h2 {
    margin: 0;
    color: #0f172a;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 700;
}

.privacy-page .privacy-card p,
.privacy-page .privacy-card li {
    margin: 0;
    color: #334155;
    font-size: 14px;
    line-height: 1.5;
}

.privacy-page .privacy-card ul {
    margin: 0;
    padding-left: 20px;
    display: grid;
    gap: 4px;
}

.privacy-page .privacy-card a {
    color: #2563eb;
    text-decoration: none;
    font-weight: 600;
}

.privacy-page .privacy-card a:hover {
    text-decoration: underline;
}

@media (min-width: 769px) and (max-width: 1024px) {
    .privacy-page .privacy-shell {
        width: min(920px, 100%);
        padding: 14px;
    }

    .privacy-page .privacy-title {
        font-size: 47px;
    }

    .privacy-page .privacy-card {
        gap: 9px;
        padding: 14px;
    }

    .privacy-page .privacy-updated {
        font-size: 12px;
    }

    .privacy-page .privacy-card h2 {
        font-size: 17px;
    }

    .privacy-page .privacy-card p,
    .privacy-page .privacy-card li {
        font-size: 13px;
        line-height: 1.45;
    }
}

@media (max-width: 768px) {
    .privacy-page .privacy-shell {
        width: 100%;
        padding: 10px 8px;
        gap: 8px;
    }

    .privacy-page .privacy-title {
        font-size: 34px;
        line-height: 1.05;
    }

    .privacy-page .privacy-card {
        gap: 8px;
        padding: 12px;
    }

    .privacy-page .privacy-updated {
        font-size: 11px;
    }

    .privacy-page .privacy-card h2 {
        font-size: 15px;
    }

    .privacy-page .privacy-card p,
    .privacy-page .privacy-card li {
        font-size: 12px;
        line-height: 1.35;
    }

    .privacy-page .privacy-card ul {
        padding-left: 18px;
        gap: 2px;
    }
}

/* =============================================================================
   SIGNUP PAGE ADJUSTMENTS (SSR, BUILT ON LOGIN BASE)
   ============================================================================= */

.signup-body {
    margin: 0;
    padding: 0;
    background: #f8fafc;
    font-family: var(--font-sans);
}

.signup-page {
    --signup-error: #dc2626;
}

.signup-page .signup-auth {
    width: min(620px, 100%);
}

.signup-page .signup-copy {
    max-width: 540px;
}

.signup-page .signup-form {
    gap: 10px;
}

.signup-page .signup-password-note {
    margin: 0;
    font-size: 12px;
    line-height: 1.35;
    color: #64748b;
}

.signup-page .signup-consent-group {
    margin-top: 2px;
    gap: 8px;
}

.signup-page .signup-legal-copy {
    margin: 0;
    color: var(--login-muted);
    font-size: 12px;
    line-height: 1.4;
}

.signup-page .signup-legal-copy a {
    color: var(--login-blue);
    text-decoration: none;
    font-weight: 500;
}

.signup-page .signup-legal-copy a:hover {
    text-decoration: underline;
}

.signup-page .signup-consent {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--login-muted);
    font-size: 12px;
    line-height: 1.35;
}

.signup-page .signup-consent input {
    width: auto;
    min-width: 14px;
    height: 14px;
    margin: 0;
    padding: 0;
    border: 1px solid #94a3b8;
    border-radius: 3px;
    background: #fff;
    box-shadow: none;
    outline: none;
    flex: 0 0 auto;
    accent-color: var(--login-blue);
}

.signup-page #consentError {
    color: var(--signup-error);
}

.signup-page .signup-submit {
    width: 100%;
}

.signup-page .signup-submit:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.signup-page .signup-links {
    margin-top: 2px;
}

.signup-page .signup-fine-print {
    margin: 0;
    color: #64748b;
    font-size: 11px;
    line-height: 1.35;
    text-align: left;
}

@media (max-width: 1024px) {
    .signup-page .signup-auth {
        width: min(700px, 100%);
    }
}

@media (max-width: 768px) {
    .signup-page .signup-auth {
        width: 100%;
    }

    .signup-page .signup-copy {
        font-size: 12px;
        line-height: 1.35;
    }

    .signup-page .signup-password-note,
    .signup-page .signup-legal-copy,
    .signup-page .signup-consent {
        font-size: 11px;
    }

    .signup-page .signup-fine-print {
        font-size: 10px;
        text-align: left;
    }
}

/* =============================================================================
   CONFIRMATION PENDING PAGE (SSR)
   ============================================================================= */

.confirmation-pending-body {
    margin: 0;
    padding: 0;
    background: #f8fafc;
    font-family: var(--font-sans);
}

.confirmation-pending-page .confirmation-card {
    width: min(700px, 100%);
    margin: 8px auto 0;
    padding: 20px 18px;
    background: #eaf0ff;
    border: 1px solid #dbe5ff;
    border-radius: 12px;
    display: grid;
    gap: 10px;
}

.confirmation-pending-page .confirmation-card h1 {
    margin: 0;
    font-size: 47px;
    line-height: 1.05;
    font-weight: 700;
    color: #0f172a;
}

.confirmation-pending-page .confirmation-copy {
    margin: 0;
    color: #334155;
    font-size: 14px;
    line-height: 1.45;
}

.confirmation-pending-page .confirmation-steps {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px;
}

.confirmation-pending-page .confirmation-steps h2 {
    margin: 0 0 6px;
    font-size: 18px;
    line-height: 1.2;
}

.confirmation-pending-page .confirmation-steps ol {
    margin: 0;
    padding-left: 18px;
    color: #475569;
    font-size: 13px;
    line-height: 1.55;
}

.confirmation-pending-page .confirmation-resent {
    border-radius: 6px;
    border: 1px solid #d1fae5;
    background: #ecfdf5;
    color: #065f46;
    font-size: 13px;
    line-height: 1.4;
    padding: 8px 10px;
}

.confirmation-pending-page .confirmation-resend-title {
    margin: 0;
    font-size: 22px;
    line-height: 1.15;
}

.confirmation-pending-page .confirmation-form {
    display: grid;
    gap: 8px;
}

.confirmation-pending-page .confirmation-form label {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
}

.confirmation-pending-page .confirmation-form input {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: #475569;
    font-size: 14px;
    padding: 11px 12px;
    font-family: inherit;
    outline: none;
}

.confirmation-pending-page .confirmation-form input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
}

.confirmation-pending-page .confirmation-resend-btn {
    width: fit-content;
    min-width: 220px;
}

.confirmation-pending-page .confirmation-note {
    margin: 0;
    padding: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #ffffff;
    color: #475569;
    font-size: 12px;
    line-height: 1.45;
}

.confirmation-pending-page .confirmation-note a,
.confirmation-pending-page .confirmation-back-link a {
    color: #2563eb;
    text-decoration: none;
}

.confirmation-pending-page .confirmation-note a:hover,
.confirmation-pending-page .confirmation-back-link a:hover {
    text-decoration: underline;
}

.confirmation-pending-page .confirmation-back-link {
    margin: 2px 0 0;
    color: #334155;
    font-size: 13px;
    line-height: 1.4;
}

@media (max-width: 1024px) {
    .confirmation-pending-page .confirmation-card {
        width: min(700px, 100%);
    }

    .confirmation-pending-page .confirmation-card h1 {
        font-size: 47px;
    }
}

@media (max-width: 768px) {
    .confirmation-pending-page .confirmation-card {
        width: 100%;
        padding: 14px 10px;
        gap: 8px;
    }

    .confirmation-pending-page .confirmation-card h1 {
        font-size: 35px;
    }

    .confirmation-pending-page .confirmation-copy {
        font-size: 12px;
        line-height: 1.35;
    }

    .confirmation-pending-page .confirmation-steps {
        padding: 10px;
    }

    .confirmation-pending-page .confirmation-steps h2 {
        font-size: 16px;
    }

    .confirmation-pending-page .confirmation-steps ol {
        font-size: 12px;
        line-height: 1.45;
    }

    .confirmation-pending-page .confirmation-resent {
        font-size: 12px;
    }

    .confirmation-pending-page .confirmation-resend-title {
        font-size: 18px;
    }

    .confirmation-pending-page .confirmation-form label {
        font-size: 13px;
    }

    .confirmation-pending-page .confirmation-form input {
        font-size: 12px;
        padding: 10px 11px;
    }

    .confirmation-pending-page .confirmation-resend-btn {
        min-width: 190px;
        width: fit-content;
        font-size: 13px;
        padding: 10px 12px;
    }

    .confirmation-pending-page .confirmation-note {
        padding: 10px;
        font-size: 11px;
        line-height: 1.35;
    }

    .confirmation-pending-page .confirmation-back-link {
        font-size: 12px;
    }
}

/* =============================================================================
   CONFIRMATION ERROR PAGE (SSR)
   ============================================================================= */

.confirmation-error-body {
    margin: 0;
    padding: 0;
    background: #f8fafc;
    font-family: var(--font-sans);
}

.confirmation-error-page .confirmation-error-card {
    width: min(700px, 100%);
    margin: 8px auto 0;
    padding: 18px 12px;
    background: #eaf0ff;
    border: 1px solid #dbe5ff;
    border-radius: 12px;
    display: grid;
    gap: 8px;
}

.confirmation-error-page .confirmation-error-card h1 {
    margin: 0 0 2px;
    font-size: 47px;
    line-height: 1.05;
    font-weight: 700;
    color: #0f172a;
}

.confirmation-error-page .error-message {
    display: none;
}

.confirmation-error-page .confirmation-error-box,
.confirmation-error-page .confirmation-info-box {
    border-radius: 10px;
    border: 1px solid transparent;
    background: #ffffff;
    padding: 12px;
    display: grid;
    gap: 5px;
}

.confirmation-error-page .confirmation-error-box {
    background: #fff1f2;
    border-color: #fecaca;
}

.confirmation-error-page .confirmation-info-box {
    background: #eff6ff;
    border-color: #dbeafe;
}

.confirmation-error-page .confirmation-error-box h2,
.confirmation-error-page .confirmation-info-box h2,
.confirmation-error-page .confirmation-solutions h2 {
    margin: 0;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 700;
}

.confirmation-error-page .confirmation-error-box h2 {
    color: #991b1b;
}

.confirmation-error-page .confirmation-info-box h2 {
    color: #1e3a8a;
}

.confirmation-error-page .confirmation-error-box p,
.confirmation-error-page .confirmation-info-box p {
    margin: 0;
    font-size: 13px;
    line-height: 1.35;
}

.confirmation-error-page .confirmation-error-box p {
    color: #7f1d1d;
}

.confirmation-error-page .confirmation-info-box p {
    color: #1e3a8a;
}

.confirmation-error-page .confirmation-error-box ul {
    margin: 2px 0 0;
    padding-left: 16px;
    display: grid;
    gap: 2px;
}

.confirmation-error-page .confirmation-error-box li {
    font-size: 13px;
    line-height: 1.35;
    color: #7f1d1d;
}

.confirmation-error-page .confirmation-solutions {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #ffffff;
    padding: 8px 10px;
    display: grid;
    gap: 4px;
}

.confirmation-error-page .confirmation-solutions a,
.confirmation-error-page .confirmation-back-link a {
    color: #2563eb;
    text-decoration: none;
    font-size: 13px;
    line-height: 1.3;
}

.confirmation-error-page .confirmation-solutions a:hover,
.confirmation-error-page .confirmation-back-link a:hover {
    text-decoration: underline;
}

.confirmation-error-page .confirmation-back-link {
    margin: 2px 0 0;
    color: #334155;
    font-size: 13px;
    line-height: 1.3;
}

@media (max-width: 1024px) {
    .confirmation-error-page .confirmation-error-card {
        width: min(700px, 100%);
    }

    .confirmation-error-page .confirmation-error-card h1 {
        font-size: 47px;
    }
}

@media (max-width: 768px) {
    .confirmation-error-page .confirmation-error-card {
        width: 100%;
        padding: 14px 10px;
        gap: 6px;
    }

    .confirmation-error-page .confirmation-error-card h1 {
        font-size: 44px;
    }

    .confirmation-error-page .confirmation-error-box,
    .confirmation-error-page .confirmation-info-box,
    .confirmation-error-page .confirmation-solutions {
        padding: 10px;
        gap: 3px;
    }

    .confirmation-error-page .confirmation-error-box h2,
    .confirmation-error-page .confirmation-info-box h2,
    .confirmation-error-page .confirmation-solutions h2 {
        font-size: 16px;
    }

    .confirmation-error-page .confirmation-error-box p,
    .confirmation-error-page .confirmation-info-box p,
    .confirmation-error-page .confirmation-error-box li,
    .confirmation-error-page .confirmation-solutions a,
    .confirmation-error-page .confirmation-back-link {
        font-size: 11px;
        line-height: 1.3;
    }
}

/* =============================================================================
   RESET PASSWORD PAGE (SSR)
   ============================================================================= */

.reset-password-body {
    margin: 0;
    padding: 0;
    background: #f8fafc;
    font-family: var(--font-sans);
}

.reset-password-page .reset-card {
    width: min(620px, 100%);
    margin: 8px auto 0;
    padding: 20px 18px;
    background: #eaf0ff;
    border: 1px solid #dbe5ff;
    border-radius: 12px;
    display: grid;
    gap: 10px;
}

.reset-password-page .reset-card h1 {
    margin: 0;
    font-size: 47px;
    line-height: 1.05;
    font-weight: 700;
    color: #0f172a;
}

.reset-password-page .reset-success-message,
.reset-password-page .reset-error-message {
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 13px;
    line-height: 1.4;
}

.reset-password-page .reset-success-message {
    background: #ecfdf5;
    border: 1px solid #d1fae5;
    color: #065f46;
}

.reset-password-page .reset-error-message {
    background: #fff1f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

.reset-password-page .reset-error-message p {
    margin: 0;
}

.reset-password-page .reset-form {
    display: grid;
    gap: 8px;
}

.reset-password-page .reset-form label {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
}

.reset-password-page .reset-form input {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: #475569;
    font-size: 14px;
    padding: 11px 12px;
    font-family: inherit;
    outline: none;
}

.reset-password-page .reset-form input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
}

.reset-password-page .reset-form .error {
    min-height: 16px;
    margin: 0;
    color: #dc2626;
    font-size: 12px;
    line-height: 1.3;
}

.reset-password-page .reset-submit-btn {
    width: fit-content;
    min-width: 170px;
}

.reset-password-page .reset-back-link {
    margin: 0;
    color: #334155;
    font-size: 13px;
    line-height: 1.4;
}

.reset-password-page .reset-back-link a {
    color: #2563eb;
    text-decoration: none;
}

.reset-password-page .reset-back-link a:hover {
    text-decoration: underline;
}

@media (max-width: 1024px) {
    .reset-password-page .reset-card {
        width: min(720px, 100%);
    }

    .reset-password-page .reset-card h1 {
        font-size: 47px;
    }
}

@media (max-width: 768px) {
    .reset-password-page .reset-card {
        width: 100%;
        padding: 14px 10px;
        gap: 8px;
    }

    .reset-password-page .reset-card h1 {
        font-size: 47px;
    }

    .reset-password-page .reset-success-message,
    .reset-password-page .reset-error-message {
        font-size: 11px;
        line-height: 1.3;
        padding: 8px;
    }

    .reset-password-page .reset-form label {
        font-size: 13px;
    }

    .reset-password-page .reset-form input {
        font-size: 12px;
        padding: 10px 11px;
    }

    .reset-password-page .reset-form .error {
        font-size: 11px;
    }

    .reset-password-page .reset-submit-btn {
        min-width: 145px;
        font-size: 12px;
        padding: 9px 11px;
    }

    .reset-password-page .reset-back-link {
        font-size: 12px;
    }
}

/* =============================================================================
   SET NEW PASSWORD PAGE (SSR)
   ============================================================================= */

.set-new-password-body {
    margin: 0;
    padding: 0;
    background: #f8fafc;
    font-family: var(--font-sans);
}

.set-new-password-page .set-password-card {
    width: min(620px, 100%);
    margin: 8px auto 0;
    padding: 20px 18px;
    background: #eaf0ff;
    border: 1px solid #dbe5ff;
    border-radius: 12px;
    display: grid;
    gap: 10px;
}

.set-new-password-page .set-password-card h1 {
    margin: 0;
    font-size: 47px;
    line-height: 1.05;
    font-weight: 700;
    color: #0f172a;
}

.set-new-password-page .set-password-info-message {
    color: #2563eb;
    font-size: 13px;
    line-height: 1.35;
}

.set-new-password-page .set-password-error-message {
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 13px;
    line-height: 1.35;
    background: #fff1f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    display: grid;
    gap: 4px;
}

.set-new-password-page .set-password-error-message p {
    margin: 0;
}

.set-new-password-page .set-password-request-link {
    color: #2563eb;
    text-decoration: none;
    font-size: 13px;
}

.set-new-password-page .set-password-request-link:hover {
    text-decoration: underline;
}

.set-new-password-page .set-password-form {
    display: grid;
    gap: 9px;
}

.set-new-password-page .set-password-form label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
}

.set-new-password-page .set-password-form input {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: #475569;
    font-size: 14px;
    padding: 11px 12px;
    font-family: inherit;
    outline: none;
}

.set-new-password-page .set-password-form input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
}

.set-new-password-page .set-password-note {
    margin: 1px 0 2px;
    font-size: 12px;
    line-height: 1.35;
    color: #64748b;
}

.set-new-password-page .set-password-form .error {
    min-height: 16px;
    margin: 0;
    color: #dc2626;
    font-size: 12px;
    line-height: 1.3;
}

.set-new-password-page .set-password-form label[for="confirmPassword"] {
    margin-top: 6px;
}

.set-new-password-page .set-password-form #formError {
    min-height: 0;
}

.set-new-password-page .set-password-submit-btn {
    width: fit-content;
    min-width: 145px;
    margin-top: 6px;
}

.set-new-password-page .set-password-back-link {
    margin: 2px 0 0;
    color: #334155;
    font-size: 13px;
    line-height: 1.4;
}

.set-new-password-page .set-password-back-link a {
    color: #2563eb;
    text-decoration: none;
}

.set-new-password-page .set-password-back-link a:hover {
    text-decoration: underline;
}

@media (max-width: 1024px) {
    .set-new-password-page .set-password-card {
        width: min(720px, 100%);
    }
}

@media (max-width: 768px) {
    .set-new-password-page .set-password-card {
        width: 100%;
        padding: 14px 10px;
        gap: 8px;
    }

    .set-new-password-page .set-password-card h1 {
        font-size: 47px;
    }

    .set-new-password-page .set-password-info-message,
    .set-new-password-page .set-password-error-message,
    .set-new-password-page .set-password-request-link {
        font-size: 11px;
        line-height: 1.3;
    }

    .set-new-password-page .set-password-form label {
        font-size: 13px;
    }

    .set-new-password-page .set-password-form input {
        font-size: 12px;
        padding: 10px 11px;
    }

    .set-new-password-page .set-password-note,
    .set-new-password-page .set-password-form .error {
        font-size: 11px;
    }

    .set-new-password-page .set-password-form label[for="confirmPassword"] {
        margin-top: 4px;
    }

    .set-new-password-page .set-password-submit-btn {
        min-width: 130px;
        font-size: 12px;
        padding: 9px 11px;
    }

    .set-new-password-page .set-password-back-link {
        font-size: 12px;
    }
}

/* =============================================================================
   PROFILE PAGE (SSR)
   ============================================================================= */

.profile-body {
    margin: 0;
    padding: 0;
    background: #f8fafc;
    font-family: var(--font-sans);
}

.profile-page .profile-shell {
    width: min(700px, 100%);
    margin: 8px auto 0;
    padding: 16px 14px;
    background: #eaf0ff;
    border: 1px solid #dbe5ff;
    border-radius: 12px;
    display: grid;
    gap: 10px;
}

.profile-page .profile-title {
    margin: 0;
    font-size: 47px;
    line-height: 1.05;
    font-weight: 700;
    color: #0f172a;
}

.profile-page .profile-loading,
.profile-page .profile-error {
    margin: 0;
    font-size: 13px;
    line-height: 1.35;
}

.profile-page .profile-loading {
    color: #334155;
}

.profile-page .profile-error {
    color: #b91c1c;
}

.profile-page .profile-content {
    display: grid;
    gap: 8px;
}

.profile-page .profile-panel {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px;
    display: grid;
    gap: 4px;
}

.profile-page .profile-panel h2 {
    margin: 0;
    color: #0f172a;
    font-size: 30px;
    line-height: 1.12;
    font-weight: 700;
}

.profile-page .profile-panel p {
    margin: 0;
    color: #334155;
    font-size: 13px;
    line-height: 1.35;
}

.profile-page .profile-note {
    margin: 0;
    color: #334155;
    font-size: 13px;
    line-height: 1.35;
}

.profile-page #premiumContent {
    display: grid;
    gap: 4px;
}

.profile-page #premiumContent h4 {
    margin: 0 0 2px;
    color: #0f172a;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 700;
}

.profile-page #premiumContent .premium-info {
    margin: 0;
    color: #334155;
    font-size: 13px;
    line-height: 1.35;
}

.profile-page #premiumContent .premium-button,
.profile-page #premiumContent .cancel-premium-button {
    margin-top: 4px;
    width: fit-content;
}

.profile-page #premiumContent .premium-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 14px;
    border-radius: 7px;
    border: 1px solid #2563eb;
    background: #2563eb;
    color: #ffffff;
    font-size: 12px;
    line-height: 1;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.profile-page #premiumContent .premium-button:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
}

.profile-page .profile-settings .profile-setting-title {
    color: #0f172a;
    font-weight: 600;
}

.profile-page .profile-theme-buttons {
    margin-top: 2px;
    display: inline-flex;
    gap: 6px;
}

.profile-page .profile-theme-buttons .btn {
    font-size: 12px;
    padding: 8px 12px;
    width: auto;
}

.profile-page .profile-actions #logoutForm {
    margin: 0;
}

.profile-page .logout-button {
    width: fit-content;
    border-radius: 8px;
    border: 1px solid #2563eb;
    background: #2563eb;
    color: #ffffff;
    padding: 9px 14px;
    font-size: 12px;
    line-height: 1;
    font-weight: 500;
    cursor: pointer;
}

.profile-page .logout-button:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
}

.profile-page .profile-danger-zone {
    border-color: #fecaca;
    background: #fff1f2;
}

.profile-page .profile-danger-zone h2,
.profile-page .profile-danger-zone p {
    color: #b91c1c;
}

.profile-page .delete-button,
.profile-page #premiumContent .cancel-premium-button {
    width: fit-content;
    background: #dc2626;
    border: 1px solid #dc2626;
    color: #fff;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 12px;
    line-height: 1;
    font-weight: 600;
    cursor: pointer;
}

.profile-body .modal {
    position: fixed;
    inset: 0;
    z-index: 100;
}

.profile-body .modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
}

.profile-body .modal-content {
    position: relative;
    width: min(520px, calc(100% - 24px));
    margin: 90px auto 0;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 18px 16px;
    display: grid;
    gap: 10px;
    z-index: 1;
}

.profile-body .modal-content h3 {
    margin: 0;
    color: #0f172a;
    font-size: 28px;
    line-height: 1.15;
}

.profile-body .modal-content p {
    margin: 0;
    color: #334155;
    font-size: 14px;
    line-height: 1.4;
}

.profile-body .modal-buttons {
    margin-top: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.profile-body .modal-button {
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #0f172a;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.profile-body #confirmDeleteBtn {
    background: #dc2626;
    border-color: #dc2626;
    color: #ffffff;
}

@media (max-width: 1024px) {
    .profile-page .profile-shell {
        width: min(700px, 100%);
    }
}

@media (max-width: 768px) {
    .profile-page .profile-shell {
        width: 100%;
        padding: 10px 8px;
        gap: 8px;
    }

    .profile-page .profile-title {
        font-size: 47px;
    }

    .profile-page .profile-panel {
        padding: 9px;
        gap: 3px;
    }

    .profile-page .profile-panel h2 {
        font-size: 25px;
    }

    .profile-page .profile-panel p,
    .profile-page .profile-note,
    .profile-page #premiumContent .premium-info {
        font-size: 11px;
        line-height: 1.3;
    }

    .profile-page #premiumContent h4 {
        font-size: 13px;
    }

    .profile-page .profile-theme-buttons .btn,
    .profile-page .delete-button,
    .profile-page .logout-button {
        font-size: 11px;
        padding: 8px 10px;
    }

    .profile-body .modal-content {
        margin-top: 70px;
        padding: 14px 12px;
        gap: 8px;
    }

    .profile-body .modal-content h3 {
        font-size: 24px;
    }

    .profile-body .modal-content p,
    .profile-body .modal-button {
        font-size: 12px;
    }
}

/* =============================================================================
   JOBS PAGE (SSR + DYNAMIC FILTERS/RESULTS)
   ============================================================================= */

.jobs-body {
    margin: 0;
    padding: 0;
    background: #f8fafc;
    font-family: var(--font-sans);
}

.jobs-page .jobs-shell {
    width: min(1160px, 100%);
    margin: 8px auto 0;
    padding: 18px 20px;
    background: #eaf0ff;
    border: 1px solid #dbe5ff;
    border-radius: 12px;
    display: grid;
    gap: 10px;
}

.jobs-page .jobs-title {
    margin: 0;
    color: #0f172a;
    font-size: 36px;
    line-height: 1.08;
    font-weight: 700;
}

.jobs-page .jobs-search-card {
    display: grid;
    gap: 10px;
    padding: 16px 18px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.jobs-page #search-form-container .search-form {
    width: 100%;
}

.jobs-page #search-form-container #search-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
}

.jobs-page #search-form-container .search-input {
    width: 100%;
    height: 40px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #ffffff;
    color: #334155;
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.2;
    outline: none;
    font-family: inherit;
}

.jobs-page #search-form-container .search-input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
}

.jobs-page #search-form-container .search-button {
    border: 0;
    border-radius: 10px;
    background: #2563eb;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    padding: 10px 16px;
    cursor: pointer;
}

.jobs-page #search-form-container .search-button:hover {
    background: #1d4ed8;
}

.jobs-page #filters-container,
.jobs-page #sorting-container {
    display: grid;
}

.jobs-page .filters-section {
    display: grid;
    gap: 8px;
}

.jobs-page .filters-title {
    margin: 0;
    color: #0f172a;
    font-size: 16px;
    line-height: 1.25;
    font-weight: 700;
}

.jobs-page .filters-title-selected {
    margin-bottom: 10px;
}

.jobs-page .filters-toggle-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.jobs-page .filters-horizontal-container {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.jobs-page .category-filter,
.jobs-page .company-filter,
.jobs-page .location-filter,
.jobs-page .employment-type-filter,
.jobs-page .experience-level-filter,
.jobs-page .remote-filter,
.jobs-page .salary-filter,
.jobs-page .hsm-filter {
    position: relative;
    min-width: 0;
}

.jobs-page .filter-dropdown {
    width: 100%;
    min-height: 36px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #ffffff;
    color: #334155;
    padding: 9px 12px;
    font-size: 12px;
    line-height: 1.3;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.jobs-page input.filter-dropdown {
    cursor: text;
    font-family: inherit;
    outline: none;
}

.jobs-page .dropdown-content {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 35;
    max-height: 320px;
    overflow: auto;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.14);
    padding: 8px;
    gap: 2px;
}

.jobs-page .dropdown-content.show {
    display: grid;
}

.jobs-page .category-group {
    display: grid;
    gap: 2px;
}

.jobs-page .main-category,
.jobs-page .subcategory {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #f8fafc;
    text-decoration: none;
}

.jobs-page .main-category {
    margin: 2px 0;
    color: #64748b;
    font-size: 12px;
    line-height: 1.25;
    font-weight: 600;
}

.jobs-page .subcategory {
    color: #2563eb;
    font-size: 13px;
    line-height: 1.25;
}

.jobs-page .category-group .subcategory {
    margin-left: 10px;
    width: calc(100% - 10px);
}

.jobs-page .company-search-option {
    display: block;
    padding: 8px 10px;
    border-radius: 8px;
    background: #f8fafc;
    color: #2563eb;
    font-size: 13px;
    line-height: 1.25;
    text-decoration: none;
}

.jobs-page .subcategory:hover,
.jobs-page .company-search-option:hover {
    background: #eaf2ff;
}

.jobs-page .company-search-option .highlight,
.jobs-page .subcategory .highlight {
    color: #0f172a;
    background: #dbeafe;
    border-radius: 4px;
    padding: 0 2px;
    font-weight: 700;
}

.jobs-page .vacancy-count {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 22px;
    border-radius: 999px;
    background: #e2e8f0;
    color: #475569;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    padding: 0 8px;
}

.jobs-page .company-search-container {
    display: grid;
    gap: 6px;
    margin-bottom: 6px;
}

.jobs-page .company-search-input {
    width: 100%;
    height: 34px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
    color: #334155;
    padding: 7px 10px;
    font-size: 12px;
    line-height: 1.3;
    outline: none;
}

.jobs-page .company-search-hint {
    color: #64748b;
    font-size: 11px;
    line-height: 1.3;
}

.jobs-page .company-search-results {
    display: grid;
    gap: 4px;
}

.jobs-page .salary-inputs-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.jobs-page .salary-input {
    width: 100%;
    height: 34px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
    color: #334155;
    padding: 7px 10px;
    font-size: 12px;
    outline: none;
}

.jobs-page .salary-error {
    grid-column: 1 / -1;
    margin: 0;
    color: #b91c1c;
    font-size: 11px;
    line-height: 1.3;
}

.jobs-page .apply-salary-btn,
.jobs-page .clear-salary-btn {
    height: 32px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.jobs-page .apply-salary-btn {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
}

.jobs-page .clear-salary-btn {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #334155;
}

.jobs-page .hsm-filter-label {
    min-height: 36px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #ffffff;
    padding: 9px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #334155;
    font-size: 12px;
    line-height: 1.3;
    cursor: pointer;
}

.jobs-page .hsm-filter-label input {
    margin: 0;
    accent-color: #2563eb;
}

.jobs-page .hsm-filter .hsm-badge,
.jobs-page .job-hsm-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1px 7px;
    border-radius: 999px;
    background: #dbeafe;
    border: 1px solid #bfdbfe;
    color: #1e3a8a;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.15;
}

.jobs-page .hsm-filter--disabled {
    opacity: 0.5;
}

.jobs-page .chosen-filters-section {
    display: grid;
    gap: 6px;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
}

.jobs-page .chosen-filters-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.jobs-page .chosen-filter-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #eaf2ff;
    border: 1px solid #dbeafe;
    color: #1e3a8a;
    font-size: 11px;
    line-height: 1.2;
}

.jobs-page .chosen-filter-item .remove-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background: #2563eb;
    color: #fff;
    text-decoration: none;
    font-size: 0;
    line-height: 1;
}

.jobs-page .chosen-filter-item .remove-filter::before {
    content: "×";
    font-size: 12px;
}

.jobs-page #sorting-container {
    justify-items: end;
}

.jobs-page .sorting-section {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.jobs-page .sorting-label {
    color: #334155;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}

.jobs-page .sorting-filter {
    position: relative;
    width: 262px;
}

.jobs-page #sort-dropdown {
    width: 262px;
    min-height: 0;
    border-radius: 10px;
    background: #ffffff;
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 600;
    color: #1f2937;
}

.jobs-page #sort-dropdown-content {
    left: auto;
    right: 0;
    width: 262px;
}

.jobs-page .sorting-option {
    display: block;
    padding: 8px 10px;
    border-radius: 8px;
    background: #f8fafc;
    color: #2563eb;
    font-size: 13px;
    line-height: 1.25;
    text-decoration: none;
}

.jobs-page .sorting-option:hover {
    background: #eaf2ff;
}

.jobs-page #search-banner-container .search-banner {
    margin: 0;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #1e3a8a;
    font-size: 13px;
    line-height: 1.35;
}

.jobs-page .loading,
.jobs-page .error,
.jobs-page .no-results {
    margin: 0;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #334155;
    font-size: 13px;
    line-height: 1.35;
}

.jobs-page .error {
    color: #b91c1c;
    border-color: #fecaca;
    background: #fff1f2;
}

.jobs-page .results-info {
    margin: 0 0 8px;
    color: #475569;
    font-size: 12px;
    line-height: 1.35;
}

.jobs-page .results-list {
    display: grid;
    gap: 10px;
}

.jobs-page .job-similar-item {
    display: grid;
    gap: 5px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
}

.jobs-page .job-similar-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.jobs-page .job-similar-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.jobs-page .job-similar-item h3 {
    margin: 0;
    font-size: 26px;
    line-height: 1.25;
}

.jobs-page .job-similar-item h3 a,
.jobs-page .job-similar-company a,
.jobs-page .job-similar-meta .meta-link {
    color: #1d4ed8;
    text-decoration: none;
}

.jobs-page .job-similar-item h3 a:hover,
.jobs-page .job-similar-company a:hover,
.jobs-page .job-similar-meta .meta-link:hover {
    text-decoration: underline;
}

.jobs-page .vacancy-viewed {
    color: #64748b !important;
}

.jobs-page .job-similar-star {
    color: #64748b;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.jobs-page .job-similar-star.is-favourited {
    color: #2563eb;
}

.jobs-page .job-similar-added {
    margin: 0;
    color: #64748b;
    font-size: 11px;
    line-height: 1.35;
    white-space: nowrap;
}

.jobs-page .job-similar-company,
.jobs-page .job-similar-excerpt,
.jobs-page .job-similar-meta {
    margin: 0;
    color: #334155;
    font-size: 13px;
    line-height: 1.45;
}

.jobs-page .job-similar-meta {
    font-size: 12px;
    color: #475569;
}

.jobs-page .job-similar-excerpt .highlight,
.jobs-page .job-similar-item h3 .highlight,
.jobs-page .job-similar-company .highlight,
.jobs-page .job-similar-meta .highlight {
    color: #0f172a;
    background: #dbeafe;
    border-radius: 4px;
    padding: 0 2px;
    font-weight: 700;
}

.jobs-page .pagination {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.jobs-page .pagination a,
.jobs-page .pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    min-height: 32px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #334155;
    font-size: 12px;
    text-decoration: none;
}

.jobs-page .pagination span.current {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
    font-weight: 600;
}

@media (min-width: 769px) and (max-width: 1024px) {
    .jobs-page .jobs-shell {
        width: min(920px, 100%);
        padding: 14px;
        gap: 8px;
    }

    .jobs-page .jobs-title {
        font-size: 47px;
    }

    .jobs-page .jobs-search-card {
        padding: 14px;
        gap: 8px;
    }

    .jobs-page .filters-horizontal-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .jobs-page .sorting-section {
        width: 100%;
    }

    .jobs-page .job-similar-item h3 {
        font-size: 30px;
    }
}

@media (max-width: 768px) {
    .jobs-page .jobs-shell {
        width: 100%;
        padding: 10px 8px;
        gap: 8px;
    }

    .jobs-page .jobs-title {
        font-size: 34px;
    }

    .jobs-page .jobs-search-card {
        padding: 12px;
        gap: 8px;
    }

    .jobs-page #search-form-container #search-form {
        grid-template-columns: 1fr;
    }

    .jobs-page #search-form-container .search-button {
        width: 100%;
    }

    .jobs-page .filters-section {
        gap: 6px;
    }

    .jobs-page .filters-title {
        font-size: 16px;
        cursor: pointer;
    }

    .jobs-page .filters-toggle-title {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        width: fit-content;
        padding: 7px 10px;
        border: 1px solid #dbe3ef;
        border-radius: 9px;
        background: #f8fafc;
        color: #0f172a;
        user-select: none;
    }

    .jobs-page .filters-toggle-title::after {
        content: "▾";
        display: inline-block;
        color: #334155;
        font-size: 13px;
        line-height: 1;
        transform: rotate(0deg);
        transform-origin: center;
        transition: transform 0.2s ease;
    }

    .jobs-page .filters-section.filters-open .filters-toggle-title::after {
        transform: rotate(-180deg);
    }

    .jobs-page .filters-section.filters-open .filters-toggle-title {
        background: #eef4ff;
        border-color: #c9d8f8;
    }

    .jobs-page .filters-horizontal-container {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .jobs-page .filters-section:not(.filters-open) .filters-horizontal-container {
        display: none;
    }

    .jobs-page .filters-section.filters-open .filters-horizontal-container {
        display: grid;
    }

    .jobs-page .sorting-section {
        width: 100%;
        max-width: none;
        justify-content: space-between;
    }

    .jobs-page #sorting-container {
        justify-items: stretch;
    }

    .jobs-page .sorting-filter,
    .jobs-page #sort-dropdown,
    .jobs-page #sort-dropdown-content {
        width: 100%;
    }

    .jobs-page .chosen-filters-list {
        gap: 4px;
    }

    .jobs-page .chosen-filters-section {
        padding: 12px;
        gap: 6px;
    }

    .jobs-page .job-similar-item {
        padding: 8px;
        gap: 4px;
    }

    .jobs-page .job-similar-head {
        flex-direction: column;
        gap: 4px;
    }

    .jobs-page .job-similar-item h3 {
        font-size: 24px;
    }

    .jobs-page .job-similar-added {
        white-space: normal;
        font-size: 10px;
    }

    .jobs-page .job-similar-company,
    .jobs-page .job-similar-excerpt,
    .jobs-page .job-similar-meta,
    .jobs-page .filter-dropdown,
    .jobs-page .subcategory,
    .jobs-page .company-search-option,
    .jobs-page .loading,
    .jobs-page .error,
    .jobs-page .no-results {
        font-size: 11px;
        line-height: 1.3;
    }

    .jobs-page .pagination a,
    .jobs-page .pagination span {
        min-height: 30px;
        padding: 7px 10px;
        font-size: 11px;
    }
}

/* =============================================================================
   NOTIFICATIONS PAGE (SSR)
   ============================================================================= */

.notifications-body {
    margin: 0;
    padding: 0;
    background: #f8fafc;
    font-family: var(--font-sans);
}

.notifications-page .notifications-shell {
    width: min(1160px, 100%);
    margin: 8px auto 0;
    padding: 18px 16px;
    background: #eaf0ff;
    border: 1px solid #dbe5ff;
    border-radius: 12px;
    display: grid;
    gap: 10px;
}

.notifications-page .notifications-title {
    margin: 0;
    font-size: 47px;
    line-height: 1.05;
    font-weight: 700;
    color: #0f172a;
}

.notifications-page .notifications-panel {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px;
    display: grid;
    gap: 10px;
}

.notifications-page .warning-card,
.notifications-page .info-card {
    margin: 0;
    border-radius: 10px;
    border: 1px solid #fecaca;
    background: #fff1f2;
    padding: 10px 12px;
    color: #991b1b;
    font-size: 13px;
    line-height: 1.35;
    display: grid;
    gap: 4px;
}

.notifications-page .warning-card p,
.notifications-page .info-card p {
    margin: 0;
}

.notifications-page .warning-card a {
    color: #b91c1c;
    text-decoration: underline;
}

.notifications-page .saved-searches-title {
    margin: 0;
    color: #0f172a;
    font-size: 30px;
    line-height: 1.15;
    font-weight: 700;
}

.notifications-page .notification-form {
    display: grid;
    gap: 10px;
}

.notifications-page #filters-container,
.notifications-page #notification-frequency-container {
    display: grid;
}

.notifications-page .filters-section {
    display: grid;
    gap: 8px;
}

.notifications-page .filters-title {
    margin: 0;
    color: #0f172a;
    font-size: 13px;
    line-height: 1.3;
    font-weight: 600;
}

.notifications-page .filters-horizontal-container {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.notifications-page .category-filter,
.notifications-page .company-filter,
.notifications-page .location-filter,
.notifications-page .employment-type-filter,
.notifications-page .experience-level-filter,
.notifications-page .remote-filter,
.notifications-page .salary-filter,
.notifications-page .hsm-filter {
    position: relative;
    min-width: 0;
}

.notifications-page .filter-dropdown {
    width: 100%;
    min-height: 36px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
    color: #334155;
    padding: 9px 12px;
    font-size: 12px;
    line-height: 1.3;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.notifications-page input.filter-dropdown {
    cursor: text;
    font-family: inherit;
    outline: none;
}

.notifications-page input.filter-dropdown:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
}

.notifications-page .dropdown-content {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 35;
    max-height: 320px;
    overflow: auto;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.14);
    padding: 8px;
    gap: 2px;
}

.notifications-page .dropdown-content.show {
    display: grid;
}

.notifications-page .category-group {
    display: grid;
    gap: 2px;
}

.notifications-page .main-category {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 2px 0;
    padding: 8px 10px;
    border-radius: 8px;
    background: #f1f5f9;
    color: #64748b;
    font-size: 12px;
    line-height: 1.25;
    font-weight: 600;
    text-decoration: none;
}

.notifications-page .subcategory {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #f1f5f9;
    color: #2563eb;
    font-size: 13px;
    line-height: 1.25;
    text-decoration: none;
}

.notifications-page .category-group .subcategory {
    margin-left: 10px;
    width: calc(100% - 10px);
}

.notifications-page .company-search-option {
    display: block;
    padding: 8px 10px;
    border-radius: 8px;
    background: #f1f5f9;
    color: #2563eb;
    font-size: 13px;
    line-height: 1.25;
    text-decoration: none;
}

.notifications-page .subcategory:hover,
.notifications-page .company-search-option:hover {
    background: #eaf2ff;
}

.notifications-page .company-search-option .highlight,
.notifications-page .subcategory .highlight {
    color: #0f172a;
    background: #dbeafe;
    border-radius: 4px;
    padding: 0 2px;
    font-weight: 700;
}

.notifications-page .subcategory--locked {
    color: #64748b;
    cursor: not-allowed;
}

.notifications-page .vacancy-count {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 22px;
    border-radius: 999px;
    background: #e2e8f0;
    color: #475569;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    padding: 0 8px;
}

.notifications-page .company-search-container {
    display: grid;
    gap: 6px;
    margin-bottom: 6px;
}

.notifications-page .company-search-input {
    width: 100%;
    height: 34px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
    color: #334155;
    padding: 7px 10px;
    font-size: 12px;
    line-height: 1.3;
    outline: none;
}

.notifications-page .company-search-input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
}

.notifications-page .company-search-hint {
    color: #64748b;
    font-size: 11px;
    line-height: 1.3;
}

.notifications-page .company-search-results {
    display: grid;
    gap: 4px;
}

.notifications-page .salary-inputs-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.notifications-page .salary-input {
    width: 100%;
    height: 34px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
    color: #334155;
    padding: 7px 10px;
    font-size: 12px;
    outline: none;
}

.notifications-page .salary-error {
    grid-column: 1 / -1;
    margin: 0;
    color: #b91c1c;
    font-size: 11px;
    line-height: 1.3;
}

.notifications-page .apply-salary-btn,
.notifications-page .clear-salary-btn {
    height: 32px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.notifications-page .apply-salary-btn {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
}

.notifications-page .clear-salary-btn {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #334155;
}

.notifications-page .hsm-filter-label {
    min-height: 36px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
    padding: 9px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #334155;
    font-size: 12px;
    line-height: 1.3;
    cursor: pointer;
}

.notifications-page .hsm-filter-label input {
    margin: 0;
    accent-color: #2563eb;
}

.notifications-page .hsm-filter .hsm-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    border-radius: 999px;
    background: #dbeafe;
    color: #1e3a8a;
    font-size: 11px;
    line-height: 1;
    margin: 0 2px;
}

.notifications-page .hsm-filter--disabled {
    opacity: 0.5;
}

.notifications-page .chosen-filters-section {
    display: grid;
    gap: 6px;
}

.notifications-page .chosen-filters-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.notifications-page .chosen-filter-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #eaf2ff;
    border: 1px solid #dbeafe;
    color: #1e3a8a;
    font-size: 11px;
    line-height: 1.2;
}

.notifications-page .chosen-filter-item .remove-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background: #2563eb;
    color: #fff;
    text-decoration: none;
    font-size: 0;
    line-height: 1;
}

.notifications-page .chosen-filter-item .remove-filter::before {
    content: "×";
    font-size: 12px;
}

.notifications-page .notification-save-button {
    width: fit-content;
    min-width: 180px;
}

.notifications-page .notification-form-error,
.notifications-page .success-message {
    margin: 0;
    min-height: 16px;
    font-size: 12px;
    line-height: 1.3;
}

.notifications-page .notification-form-error {
    color: #b91c1c;
}

.notifications-page .success-message {
    color: #065f46;
}

.notifications-page .notification-frequency--disabled {
    opacity: 0.6;
    pointer-events: none;
}

.notifications-page #notification-searches-list {
    display: grid;
    gap: 8px;
}

.notifications-page .notification-search-card {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #ffffff;
    padding: 10px;
    display: grid;
    gap: 8px;
}

.notifications-page .notification-search-card p {
    margin: 0;
    color: #334155;
    font-size: 12px;
    line-height: 1.35;
}

.notifications-page .relationship-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.notifications-page .relationship-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #0f172a;
    font-size: 11px;
    line-height: 1.2;
}

.notifications-page .chip-remove {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    border: 0;
    background: #2563eb;
    color: #ffffff;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.notifications-page .notification-search-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.notifications-page .notification-search-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid #2563eb;
    background: #2563eb;
    color: #ffffff;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
}

.notifications-page .notification-search-actions button {
    min-height: 32px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #334155;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}

.notifications-page .notification-search-card--disabled {
    opacity: 0.62;
}

@media (max-width: 1024px) {
    .notifications-page .notifications-shell {
        width: min(834px, 100%);
        padding: 14px 12px;
    }

    .notifications-page .filters-horizontal-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .notifications-page .notifications-shell {
        width: 100%;
        padding: 10px 8px;
        gap: 8px;
    }

    .notifications-page .notifications-title {
        font-size: 47px;
    }

    .notifications-page .notifications-panel {
        padding: 9px;
        gap: 8px;
    }

    .notifications-page .saved-searches-title {
        font-size: 25px;
    }

    .notifications-page .warning-card,
    .notifications-page .info-card,
    .notifications-page .filters-title,
    .notifications-page .filter-dropdown,
    .notifications-page .subcategory,
    .notifications-page .company-search-option,
    .notifications-page .notification-search-card p,
    .notifications-page .relationship-chip,
    .notifications-page .notification-search-actions a,
    .notifications-page .notification-search-actions button,
    .notifications-page .notification-form-error,
    .notifications-page .success-message {
        font-size: 11px;
    }

    .notifications-page .filters-horizontal-container {
        grid-template-columns: 1fr;
    }

    .notifications-page .notification-save-button {
        width: 100%;
        min-width: 0;
    }

    .notifications-page .notification-search-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .notifications-page .notification-search-actions a,
    .notifications-page .notification-search-actions button {
        width: 100%;
    }
}

/* =============================================================================
   SHARED PARTIALS PARITY (LOGIN -> HOME LOOK)
   ============================================================================= */

.login-page .notice,
.login-page .header,
.login-page .footer,
.login-page .cookies {
    padding: 24px 28px;
}

.login-page .notice,
.login-page .header-top-row,
.login-page .cookie-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.login-page .header {
    position: relative;
}

.login-page .notice p,
.login-page .cookies p,
.login-page .footer-nav a,
.login-page .copyright {
    color: var(--home-muted);
    margin: 0;
}

.login-page .close-mini {
    height: 28px;
    padding: 0 10px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    color: #1e293b;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.login-page .close-mini:hover {
    background: var(--home-soft-accent);
    border-color: #94a3b8;
}

.login-page .logo {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.login-page .logo-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    line-height: 1;
    width: 118px;
    height: 22px;
}

.login-page .logo-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.login-page .logo-image-dark-theme {
    display: none;
}

.dark-theme .login-page .logo-image-light-theme,
body.dark-theme .login-page .logo-image-light-theme,
[data-theme="dark"] .login-page .logo-image-light-theme {
    display: none;
}

.dark-theme .login-page .logo-image-dark-theme,
body.dark-theme .login-page .logo-image-dark-theme,
[data-theme="dark"] .login-page .logo-image-dark-theme {
    display: block;
}

.login-page .desktop-nav,
.login-page #headerNav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.login-page .desktop-nav a,
.login-page #headerNav a {
    color: var(--home-muted-2);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.login-page .desktop-nav a:hover,
.login-page #headerNav a:hover {
    background: var(--home-soft-accent);
    color: var(--home-text);
    border-color: #cbd5e1;
}

.login-page .desktop-nav a.is-active,
.login-page .desktop-nav a[aria-current="page"],
.login-page #headerNav a.is-active,
.login-page #headerNav a[aria-current="page"] {
    background: var(--home-blue);
    color: #fff;
    border-color: var(--home-blue);
}

.login-page .menu-toggle,
.login-page .menu-btn,
.login-page .mobile-menu {
    display: none;
}

.login-page .footer {
    gap: 12px;
    padding: 28px;
}

.login-page .footer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.login-page .footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px 0;
}

.login-page .footer-nav a {
    color: var(--home-muted-2);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.login-page .footer-nav a:hover {
    background: var(--home-soft-accent);
    color: var(--home-text);
    border-color: #cbd5e1;
}

.login-page .footer-nav a.is-active,
.login-page .footer-nav a[aria-current='page'] {
    background: var(--home-blue);
    color: #fff;
    border-color: var(--home-blue);
}

.login-page .copyright {
    font-size: 13px;
}

.login-page #cookies-popup {
    display: none;
    position: static;
    inset: auto;
    width: auto;
    transform: none;
    box-shadow: none;
    border-radius: 12px;
}

.login-page #cookies-popup.show {
    display: flex;
}

.login-page .cookies {
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 20px;
}

.login-page .cookies p {
    font-size: 13px;
}

.login-page .cookie-actions {
    justify-content: flex-end;
    gap: 8px;
}

.login-page .cookie-actions .btn {
    padding: 9px 14px;
    font-size: 13px;
}

@media (max-width: 1024px) {
    .login-page .notice,
    .login-page .header {
        padding: 18px 20px;
    }

    .login-page .notice {
        padding: 10px 14px;
    }

    .login-page .header-top-row {
        gap: 12px;
    }

    .login-page .desktop-nav {
        gap: 12px;
        margin-left: auto;
        justify-content: flex-end;
    }

    .login-page .desktop-nav a {
        font-size: 14px;
    }

    .login-page .footer {
        padding: 22px 20px;
        gap: 10px;
    }

    .login-page .footer-top,
    .login-page .cookies {
        flex-direction: column;
        align-items: flex-start;
    }

    .login-page .cookies {
        align-items: center;
        text-align: center;
        padding: 14px 16px;
        gap: 10px;
    }

    .login-page .cookie-actions {
        justify-content: center;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .login-page .header-top-row {
        justify-content: space-between;
    }

    .login-page .desktop-nav {
        margin-left: auto;
        justify-content: flex-end;
    }

    .login-page .footer-top {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .login-page .footer-nav {
        margin-left: auto;
        justify-content: flex-end;
        text-align: right;
    }
}

@media (max-width: 768px) {
    .login-page .notice {
        padding: 8px 10px;
        gap: 8px;
    }

    .login-page .notice p {
        font-size: 12px;
        line-height: 1.4;
    }

    .login-page .header {
        padding: 12px 14px;
        display: grid;
        gap: 10px;
        z-index: 20;
    }

    .login-page .logo-link {
        width: 105px;
        height: 20px;
    }

    .login-page .desktop-nav,
    .login-page #headerNav {
        display: none;
    }

    .login-page .menu-btn {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        border: 1px solid var(--home-line);
        background: #fff;
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 4px;
        cursor: pointer;
        margin-left: auto;
    }

    .login-page .menu-btn span {
        width: 16px;
        height: 2px;
        border-radius: 3px;
        background: #334155;
        transition: transform 0.2s ease, opacity 0.2s ease;
    }

    .login-page .mobile-menu {
        display: grid;
        position: absolute;
        top: calc(100% + 8px);
        left: 14px;
        right: 14px;
        background: var(--home-soft);
        border-radius: 10px;
        padding: 10px;
        gap: 8px;
        box-shadow: 0 14px 30px rgba(15, 23, 42, 0.14);
        opacity: 0;
        transform: translateY(-8px);
        pointer-events: none;
        transition: opacity 0.2s ease, transform 0.2s ease;
    }

    .login-page #mobileHeaderNav {
        display: grid;
    }

    .login-page .mobile-menu a {
        color: var(--home-text);
        text-decoration: none;
        font-size: 14px;
        font-weight: 500;
        padding: 10px 12px;
        border-radius: 8px;
        border: 1px solid transparent;
        background: #fff;
        transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }

    .login-page .mobile-menu a:hover {
        background: var(--home-soft-accent);
        border-color: #cbd5e1;
    }

    .login-page .mobile-menu a.is-active,
    .login-page .mobile-menu a[aria-current='page'] {
        background: var(--home-blue);
        border-color: var(--home-blue);
        color: #fff;
    }

    .login-page .footer {
        padding: 18px 14px;
        gap: 10px;
    }

    .login-page .footer-top {
        gap: 10px;
        align-items: center;
        text-align: center;
        flex-direction: column;
    }

    .login-page .footer .logo {
        justify-content: center;
    }

    .login-page .footer .logo-link {
        justify-content: center;
    }

    .login-page .footer-nav {
        display: grid;
        gap: 6px;
    }

    .login-page .footer-nav a,
    .login-page .copyright {
        text-align: center;
        width: 100%;
    }

    .login-page .cookies {
        padding: 14px 12px;
        align-items: center;
    }

    .login-page .cookies p {
        width: 100%;
        text-align: center;
        font-size: 12px;
    }

    .login-page .cookie-actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .login-page .cookie-actions .btn {
        width: 100%;
    }
}

.login-page.mobile-menu-open .menu-btn span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.login-page.mobile-menu-open .menu-btn span:nth-child(2) {
    opacity: 0;
}

.login-page.mobile-menu-open .menu-btn span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

.login-page.mobile-menu-open .mobile-menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}