@font-face {
    font-family: "Geist";
    src: url("/assets/fonts/geist-400.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Geist";
    src: url("/assets/fonts/geist-500.ttf") format("truetype");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "Geist";
    src: url("/assets/fonts/geist-600.ttf") format("truetype");
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: "Geist";
    src: url("/assets/fonts/geist-700.ttf") format("truetype");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "Geist Mono";
    src: url("/assets/fonts/geist-mono-500.ttf") format("truetype");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "Geist Mono";
    src: url("/assets/fonts/geist-mono-600.ttf") format("truetype");
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

:root {
    --shell-bg: rgba(255, 255, 255, .9);
    --shell-surface: #ffffff;
    --shell-ink: #293452;
    --shell-muted: #5d6788;
    --shell-line: rgba(41, 52, 82, .14);
    --shell-accent: #00c6aa;
    --shell-accent-soft: rgba(0, 198, 170, .14);
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

html.dark-theme {
    --shell-bg: rgba(17, 26, 55, .9);
    --shell-surface: #111a37;
    --shell-ink: #f1f4ff;
    --shell-muted: #aab5d6;
    --shell-line: rgba(225, 232, 255, .14);
    --shell-accent: #00c6aa;
    --shell-accent-soft: rgba(0, 198, 170, .16);
}

html { scroll-behavior: smooth; }
body {
    margin-bottom: 0 !important;
    background: var(--shell-surface) !important;
    color: var(--shell-ink);
    font-family: "Geist", "Segoe UI", sans-serif;
}

.skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 1100;
    padding: .75rem 1rem;
    border-radius: 999px;
    background: #00c6aa;
    color: #061e1a;
    font-weight: 650;
    transform: translateY(-150%);
}
.skip-link:focus { transform: translateY(0); }

#siteNavbar.navbar {
    position: relative !important;
    top: auto !important;
    z-index: 10;
    width: min(calc(100% - 28px), 1380px);
    min-height: 68px;
    margin: 12px auto 0;
    padding: .55rem .8rem !important;
    border: 1px solid var(--shell-line) !important;
    border-radius: 999px;
    background: var(--shell-bg) !important;
    box-shadow: 0 18px 50px rgba(41, 52, 82, .09), inset 0 1px 0 rgba(255, 255, 255, .18);
    backdrop-filter: blur(22px) saturate(150%);
}

#siteNavbar .container { width: 100%; max-width: none; padding-inline: .25rem; flex-wrap: nowrap; }
#siteNavbar .navbar-logo img { width: auto !important; height: 34px !important; max-width: 145px !important; }
#siteNavbar .navbar-nav { gap: .1rem; }
#siteNavbar .navbar-nav .nav-link {
    padding: .65rem .72rem !important;
    border-radius: 999px;
    color: var(--shell-muted) !important;
    font-family: "Geist", "Segoe UI", sans-serif;
    font-size: .79rem;
    font-weight: 600;
    white-space: nowrap;
    transition: color 160ms var(--ease-out), background-color 160ms var(--ease-out);
}
#siteNavbar .navbar-nav .nav-link::after { display: none !important; }
#siteNavbar .navbar-nav .nav-link:hover,
#siteNavbar .navbar-nav .nav-link.active { background: var(--shell-accent-soft, rgba(0, 198, 170, .1)) !important; color: var(--shell-accent) !important; }
#siteNavbar .nav-actions { gap: .4rem; flex-wrap: nowrap; }
#siteNavbar .auth-actions { gap: .35rem; }
#siteNavbar .auth-button,
#siteNavbar .theme-switch,
#siteNavbar .navbar-toggler {
    border-color: var(--shell-line) !important;
    background: var(--shell-surface) !important;
    color: var(--shell-ink) !important;
    transition: transform 160ms var(--ease-out), background-color 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
    #siteNavbar .auth-button:hover,
    #siteNavbar .theme-switch:hover,
    #siteNavbar .navbar-toggler:hover { transform: translateY(-2px); background: var(--shell-accent-soft, rgba(0, 198, 170, .1)) !important; }
}

.site-footer {
    padding: 3.5rem 0 1.5rem;
    border-top: 1px solid var(--shell-line);
    background: var(--shell-surface);
    color: var(--shell-ink);
}
.site-footer__inner { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: end; }
.site-footer__brand img { width: 150px; height: auto; }
.site-footer__brand p { max-width: 430px; margin: 1rem 0 0; color: var(--shell-muted); line-height: 1.6; }
.site-footer__links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .55rem 1.25rem; }
.site-footer__links a { color: var(--shell-muted); font-size: .9rem; font-weight: 550; text-decoration: none; }
.site-footer__links a:hover { color: var(--shell-accent); }
.site-footer__bottom { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--shell-line); color: var(--shell-muted); font-size: .8rem; }
.site-footer__bottom a { color: inherit; }
html.dark-theme .site-footer__brand img { filter: none; }

@media (max-width: 1199.98px) {
    #siteNavbar .auth-button-text,
    #siteNavbar .auth-user { display: none; }
    #siteNavbar .navbar-nav .nav-link { padding-inline: .52rem !important; }
}

@media (max-width: 991.98px) {
    #siteNavbar.navbar { top: auto !important; width: calc(100% - 16px); margin-top: 8px; border-radius: 24px; }
    #siteNavbar .container { flex-wrap: wrap; }
    #siteNavbar .mobile-menu {
        top: calc(100% + 10px);
        left: 0;
        right: 0;
        width: 100%;
        border: 1px solid var(--shell-line);
        border-radius: 20px;
        background: var(--shell-surface) !important;
        box-shadow: 0 24px 60px rgba(8, 30, 25, .14);
    }
    #siteNavbar .mobile-menu.show { padding: .6rem; }
    #siteNavbar .navbar-nav .nav-link { min-height: 44px; padding: .75rem 1rem !important; }
    .site-footer__inner { grid-template-columns: 1fr; }
    .site-footer__links { justify-content: flex-start; }
}

@media (max-width: 575.98px) {
    #siteNavbar .auth-actions .auth-button:not(:first-child) { display: none; }
    .site-footer__bottom { flex-direction: column; }
}

@media (prefers-reduced-transparency: reduce) {
    #siteNavbar.navbar { background: var(--shell-surface) !important; backdrop-filter: none; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}