body {
    margin: 0;
    padding-top: 58px; /* Space for fixed navbar */
    font-family: "Inter", "Roboto", sans-serif;
}

/* Glassmorphism Navbar */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    height: 58px;
    background: var(--nav-bg);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
    z-index: 1000;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: center;
}

.navbar ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    justify-content: space-between;
}

.nav-container {
    display: flex;
    align-items: center;
    width: 100%;
}

.logo-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding-left: 20px;
    outline: none;
    text-decoration: none;
}

.logo-btn img {
    height: 38px;
    width: 38px;
    border-radius: 10px;
    object-fit: cover;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.logo-btn:hover img {
    transform: scale(1.05) rotate(-3deg);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.nav-links {
    display: flex;
    gap: 4px;
    margin-left: auto;
    padding-right: 10px;
}

.nav-links li, .nav-links a {
    display: flex;
    text-decoration: none;
}

.nbt {
    border: none;
    outline: none;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 11px;
    padding: 6px 11px;
    border-radius: 7px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--glass-bg);
    box-shadow: none;
    border: 1px solid var(--border-color);
    white-space: nowrap; /* prevent wrapping */
    /* One uniform resting color for every button. Each operator's brand
       color used to be the resting-state text color, but half the palette
       (Toei's dark green, Keisei's navy) reads as legible on the white nav
       background dark mode was designed against, then goes near-invisible
       against dark mode's near-black one -- while Tokyu and Records had no
       color rule at all and fell back to pure white, so they read as bold
       and prominent for no reason next to everything else looking faded.
       --text-secondary is the same token the rest of the site already uses
       for de-emphasized text in both themes, so this bar looks consistent
       instead of like ten buttons styled by five different rules. */
    color: var(--text-secondary);
}

/* Brand colors now live only on hover -- an accent when you're about to
   click, not the resting state fighting for attention against nine others. */
#nbt-jr:hover {
    background-color: #008800;
    color: white;
    transform: translateY(-2px);
    box-shadow: none;
}

#nbt-tm:hover {
    background-color: #1a8ccb;
    color: white;
    transform: translateY(-2px);
    box-shadow: none;
}

#nbt-ks:hover {
    background-color: #003399;
    color: white;
    transform: translateY(-2px);
    box-shadow: none;
}

#nbt-toei:hover {
    background-color: #2d6e2d;
    color: white;
    transform: translateY(-2px);
    box-shadow: none;
}

#nbt-tokyu:hover {
    background-color: #ee1d23;
    color: white;
    transform: translateY(-2px);
    box-shadow: none;
}

#nbt-stations:hover {
    background-color: #475569;
    color: white;
    transform: translateY(-2px);
    box-shadow: none;
}

#nbt-rankings:hover {
    background-color: #7c3aed;
    color: white;
    transform: translateY(-2px);
    box-shadow: none;
}

#nbt-updates:hover {
    background-color: #2282c7;
    color: white;
    transform: translateY(-2px);
    box-shadow: none;
}

#nbt-route {
    color: #818cf8;
}
#nbt-route:hover {
    background-color: #818cf8;
    color: white;
    transform: translateY(-2px);
    box-shadow: none;
}

/* Account pill (sign in / signed-in indicator). Sits outside .nav-links,
   same as #theme-toggle, so it stays visible on mobile instead of being
   folded into the hamburger drawer -- account state should be visible on
   every page, not just discoverable by opening the menu. */
.account-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--glass-bg);
    border: 1px solid var(--border-color);
    border-radius: 9px;
    padding: 0 10px;
    height: 36px;
    margin-left: 8px;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.account-pill:hover {
    transform: translateY(-2px);
    background: var(--card-bg);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.account-pill.account-signin {
    color: var(--text-secondary);
}

.account-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #2282c7;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    flex-shrink: 0;
}

.account-name {
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: none;
    letter-spacing: normal;
}

@media (max-width: 600px) {
    /* Narrow phones: logo + account pill + theme toggle + hamburger all
       share one 58px bar once .nav-links collapses into its own drawer --
       drop the name text and keep just the avatar/icon so nothing wraps. */
    .account-name {
        display: none;
    }

    .account-pill {
        padding: 0 8px;
        margin-left: 4px;
    }
}

/* Theme Toggle Button */
#theme-toggle {
    background: var(--glass-bg);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    width: 36px;
    height: 36px;
    border-radius: 9px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin-left: 8px;
    margin-right: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 1rem;
    flex-shrink: 0;
}

#theme-toggle:hover {
    transform: translateY(-2px) scale(1.05);
    background: var(--card-bg);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

/* Hamburger Menu Toggle */
.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
    cursor: pointer;
    margin-left: auto;
    margin-right: 20px;
    z-index: 1001;
}

.menu-toggle .bar {
    height: 3px;
    width: 100%;
    background-color: var(--text-primary);
    border-radius: 10px;
    transition: all 0.3s ease-in-out;
}

/* Hamburger to X Animation */
.menu-toggle.is-active .bar:nth-child(2) {
    opacity: 0;
}
.menu-toggle.is-active .bar:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}
.menu-toggle.is-active .bar:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

@media (max-width: 950px) {
    .menu-toggle {
        display: flex;
    }

    .nav-links {
        display: flex;
        position: absolute;
        right: 0;
        top: 0;
        transform: translateX(100%);
        flex-direction: column;
        background: var(--nav-bg);
        /* Removed nested backdrop-filter to prevent Safari rendering bugs */
        width: 100%;
        height: 100vh;
        text-align: center;
        transition: transform 0.3s ease-in-out;
        box-shadow: none;
        justify-content: center;
        gap: 25px;
        padding: 0;
        z-index: 1000;
        margin: 0;
    }

    .nav-links.active {
        transform: translateX(0);
    }

    .nav-links li {
        width: 100%;
        justify-content: center;
        opacity: 0;
        transform: translateY(20px);
        transition: all 0.4s ease;
    }

    .nav-links.active li {
        opacity: 1;
        transform: translateY(0);
    }

    /* Staggered load for menu items */
    .nav-links.active li:nth-child(1) { transition-delay: 0.1s; }
    .nav-links.active li:nth-child(2) { transition-delay: 0.2s; }
    .nav-links.active li:nth-child(3) { transition-delay: 0.3s; }
    .nav-links.active li:nth-child(4) { transition-delay: 0.4s; }
    .nav-links.active li:nth-child(5) { transition-delay: 0.5s; }
    .nav-links.active li:nth-child(6) { transition-delay: 0.6s; }

    .nbt {
        width: 250px;
        font-size: 1.1rem;
        padding: 15px;
        text-align: center;
        display: inline-block;
    }

    .logo-btn img {
        height: 45px;
        width: 45px;
    }
    
    body.no-scroll {
        overflow: hidden;
    }
}