:root, [data-theme="light"] {
    /* Light Mode Tokens */
    --bg-color: #f4f7f6;
    --bg-gradient: linear-gradient(135deg, #e0eafc 0%, #cfdef3 100%);
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --card-bg: rgba(255, 255, 255, 0.82);
    /* Never actually defined until now -- 24 inline styles in templates.js
       reference it (search/filter inputs on the station directory page), and
       an undefined var() silently resolves to transparent rather than erroring,
       so it never showed up as broken until someone looked at contrast. Alias
       to --card-bg, which is what those call sites were visually going for. */
    --bg-canvas: var(--card-bg);
    --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    --border-color: rgba(255, 255, 255, 0.4);
    --glass-bg: rgba(255, 255, 255, 0.6);
    --nav-bg: rgba(255, 255, 255, 0.8);
    --footer-bg: rgba(255, 255, 255, 0.4);
    --footer-text: #64748b;
    --text-main: #0f172a;
    --text-muted: #64748b;
    --border-subtle: rgba(0, 0, 0, 0.05);
    --brand-primary: #6366f1;
    --brand-accent: #10b981;
    --radius-lg: 24px;
    --radius-md: 16px;
    --jr-color: #00B609;
    --tm-color: #1CA4D1;
    --ks-color: #153885;
    --tobu-color: #0081C3;
}

[data-theme="dark"] {
    /* Dark Mode Tokens */
    --bg-color: #020617;
    --bg-gradient: #020617;
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --card-bg: rgba(30, 41, 59, 0.7);
    --bg-canvas: var(--card-bg);
    --card-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    --border-color: rgba(255, 255, 255, 0.08);
    --glass-bg: rgba(15, 23, 42, 0.8);
    --nav-bg: rgba(2, 6, 23, 0.8);
    --footer-bg: rgba(15, 23, 42, 0.4);
    --footer-text: #94a3b8;

    /* Premium Additions Dark */
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --border-subtle: rgba(255, 255, 255, 0.05);
}

* {
    box-sizing: border-box;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

body {
    background: var(--bg-gradient);
    min-height: 100vh;
    color: var(--text-primary);
    margin: 0;
    font-family: 'Inter', sans-serif;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Hero Section */
.hero {
    text-align: center;
    padding: 80px 20px 40px;
    animation: fadeInDown 0.8s ease;
}

.hero h1 {
    font-size: 3.5rem;
    font-weight: 800;
    background: -webkit-linear-gradient(45deg, #153885, #1CA4D1);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 20px;
    margin-top: 0;
}

.hero p {
    font-size: 1.25rem;
    color: var(--text-secondary);
    font-weight: 500;
    max-width: 600px;
    margin: 0 auto;
}

/* Search Bar Styles */
.search-container {
    max-width: 600px;
    margin: 30px auto;
    position: relative;
    z-index: 10;
}

.search-input {
    width: 100%;
    padding: 16px 24px;
    border-radius: 30px;
    border: 2px solid var(--border-color);
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--text-primary);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    box-sizing: border-box;
    outline: none;
}

.search-input:focus {
    border-color: rgba(43, 116, 226, 0.5);
    box-shadow: 0 10px 25px rgba(43, 116, 226, 0.15);
    /* Was hardcoded white -- fine in light mode (color: var(--text-primary) is
       dark there), but in dark mode --text-primary is near-white, so focusing
       the box put near-white text on a white background. --card-bg gives the
       same "brightens on focus" effect while staying readable in both themes:
       it's already lighter/more opaque than the unfocused --glass-bg in light
       mode, and stays dark in dark mode instead of flipping to white. */
    background: var(--card-bg);
}

.search-input::placeholder {
    color: var(--text-secondary);
}

.hidden-badge {
    display: none !important;
}

/* Glassmorphism Cards Container */
#maincon {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 40px;
    padding: 40px 0 80px 0;
    align-items: stretch;
}

/* Shared Card Styling */
.card-link {
    text-decoration: none;
    display: block;
    height: 100%;
}

.glass-card {
    background: var(--card-bg);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: var(--card-shadow);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    cursor: pointer;
}

.glass-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 8px;
    background: linear-gradient(90deg, transparent, transparent);
    transition: all 0.4s;
    z-index: 10;
}

.glass-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.card-img-container {
    height: 220px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px;
    background: var(--glass-bg);
    position: relative;
    overflow: hidden;
}

.card-img-container img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.1));
}

.glass-card:hover .card-img-container img {
    transform: scale(1.15) translateY(-5px);
}

.card-content {
    padding: 30px;
    text-align: center;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--card-bg);
}

.card-content h2 {
    margin: 0 0 10px 0;
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.5px;
}
.card-content p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 1rem;
    font-weight: 500;
}

/* Card Specific Themes */
#card-shinkansen::before { background: linear-gradient(90deg, #1e293b, #0f172a); }
#card-shinkansen .card-content h2 { color: #1e293b; }
#card-jr::before { background: linear-gradient(90deg, #00B609, #00d60a); }
#card-jr .card-content h2 { color: var(--jr-color); }

#card-tm::before { background: linear-gradient(90deg, #1CA4D1, #25caff); }
#card-tm .card-content h2 { color: var(--tm-color); }

#card-ks::before { background: linear-gradient(90deg, #153885, #1f50bd); }
#card-ks .card-content h2 { color: var(--ks-color); }

#card-toei::before { background: linear-gradient(90deg, #B6007A, #e10098); }
#card-toei .card-content h2 { color: #B6007A; }

#card-oh::before { background: linear-gradient(90deg, #2282c7, #34aadc); }
#card-oh .card-content h2 { color: #2282c7; }

/* Animations */
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-up {
    animation: fadeInUp 0.8s ease backwards;
}

.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }

/* ========== MOBILE RESPONSIVE ========== */
@media (max-width: 768px) {
    .hero h1 {
        font-size: 1.9rem;
        letter-spacing: -0.5px;
    }
    .hero p {
        font-size: 0.95rem;
    }
    .hero {
        padding: 50px 15px 25px;
    }
    #maincon {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 15px 0 50px;
    }
    .card-img-container {
        height: 130px;
        padding: 15px;
    }
    .card-content {
        padding: 16px 18px 20px;
    }
    .card-content h2 {
        font-size: 1.25rem;
    }
    .card-content p {
        font-size: 0.88rem;
    }
    .search-input {
        padding: 13px 18px;
        font-size: 0.95rem;
    }
    .container {
        padding: 0 12px;
    }
    /* Reduce hover lift on touch */
    .glass-card:hover {
        transform: translateY(-5px);
    }
    /* Search overlay: cap height so keyboard doesn't hide results */
    .search-results-overlay {
        max-height: 55vh;
        border-radius: 12px;
    }
    .result-name { font-size: 0.9rem; }
    .result-kanji { font-size: 0.8rem; }
    .result-lines { max-width: 45%; }
    /* Footer tighter */
    .footer-links {
        flex-wrap: wrap;
        gap: 12px;
    }
}

@media (max-width: 400px) {
    .hero h1 {
        font-size: 1.6rem;
    }
    .hero p {
        font-size: 0.85rem;
    }
    #maincon {
        gap: 14px;
    }
    .card-img-container {
        height: 110px;
    }
    .card-content h2 {
        font-size: 1.1rem;
    }
}

/* Global Search Overlay Styles */
.search-results-overlay {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    right: 0;
    background: var(--card-bg);
    backdrop-filter: blur(25px);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    box-shadow: 0 15px 40px rgba(0,0,0,0.12);
    max-height: 450px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
    padding: 8px;
    text-align: left;
}

.search-results-overlay.active {
    display: block;
    animation: fadeInDown 0.3s ease;
}

.search-result-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 18px;
    border-radius: 12px;
    text-decoration: none;
    color: var(--text-primary);
    transition: all 0.2s ease;
    border-bottom: 1px solid rgba(0,0,0,0.03);
    gap: 15px;
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:hover {
    background: rgba(43, 116, 226, 0.08);
    transform: translateX(4px);
}

.result-main {
    display: flex;
    flex-direction: column;
}

.result-name {
    font-weight: 700;
    font-size: 1.05rem;
}

.result-kanji {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.result-lines {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: 50%;
}

.result-line-badge {
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 800;
    color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    text-transform: uppercase;
}

.search-info {
    padding: 20px;
    text-align: center;
    color: var(--text-secondary);
    font-weight: 500;
}

/* Custom Scrollbar for Search */
.search-results-overlay::-webkit-scrollbar {
    width: 6px;
}
.search-results-overlay::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

/* Global Footer Styles */
.global-footer {
    margin-top: 80px;
    padding: 60px 20px;
    background: var(--footer-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--border-color);
    text-align: center;
    color: var(--footer-text);
}

.footer-content {
    max-width: 800px;
    margin: 0 auto;
}

.footer-copyright {
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 15px;
    font-size: 1.1rem;
}

.footer-disclaimer {
    font-size: 0.9rem;
    line-height: 1.6;
    font-weight: 500;
    max-width: 600px;
    margin: 0 auto 25px;
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

.footer-link {
    color: #2282c7;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    transition: color 0.2s ease;
}

.footer-link:hover {
    color: #153885;
    text-decoration: underline;
}

@media (max-width: 768px) {
    .global-footer {
        padding: 40px 15px;
        margin-top: 50px;
    }
    .footer-disclaimer {
        font-size: 0.8rem;
    }
}
/* ========== SEARCH ENHANCEMENTS ========== */
.search-result-item.line-match {
    background: rgba(var(--card-bg-rgb), 0.8);
    border: 2px solid var(--border-color);
    margin-bottom: 10px;
    border-radius: 12px;
}

.line-badge-main {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 800;
    color: white;
    margin-left: 10px;
}

.result-line-tag {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(0,0,0,0.05);
    padding: 2px 6px 2px 2px;
    border-radius: 4px;
    margin-right: 5px;
}

.result-line-code {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary);
}

.line-match .result-name {
    font-size: 1.25rem;
    font-weight: 800;
}

/* ========== LINE NAVIGATION ========== */
.line-nav {
    display: flex;
    justify-content: center;
    margin: 20px 0 40px;
    position: sticky;
    top: 90px;
    z-index: 90;
}

.line-nav-links {
    display: flex;
    background: var(--nav-bg);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    padding: 6px;
    border-radius: 40px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    gap: 5px;
}

.line-nav-links a {
    text-decoration: none;
    color: var(--text-secondary);
    padding: 10px 25px;
    font-size: 0.95rem;
    font-weight: 700;
    border-radius: 30px;
    transition: all 0.3s ease;
}

.line-nav-links a:hover {
    color: var(--text-primary);
    background: var(--border-color);
}

.line-nav-links a.active {
    background: white;
    color: var(--text-primary);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

@media (max-width: 768px) {
    .line-nav {
        position: static;
        margin: 10px 0 30px;
    }
    .line-nav-links {
        width: 100%;
        border-radius: 12px;
        padding: 4px;
    }
    .line-nav-links a {
        padding: 8px 10px;
        font-size: 0.8rem;
        flex: 1;
        text-align: center;
    }
}

/* Global Visited Link Reset */
/* ========== TRAIN STATUS INDICATORS ========== */
.status-indicator {
    margin-top: 15px;
    font-size: 0.85rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 20px;
    background: rgba(0,0,0,0.05);
    color: var(--text-secondary);
    transition: all 0.3s ease;
}

.status-indicator::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #94a3b8;
    display: inline-block;
}

.status-indicator.status-normal {
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
}
.status-indicator.status-normal::before { background: #10b981; }

.status-indicator.status-warning {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
}
.status-indicator.status-warning::before { background: #f59e0b; }

.status-indicator.status-danger {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}
.status-indicator.status-danger::before { background: #ef4444; }

/* "3 Lines Delayed" told a reader something was wrong but not what to avoid
   -- these show which line, in its own real color/code, right in the
   summary pill rather than making a reader click through to find out. */
.status-indicator.status-warning,
.status-indicator.status-danger {
    flex-wrap: wrap;
    row-gap: 6px;
}

.status-line-badges {
    display: inline-flex;
    gap: 4px;
}

.status-line-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 6px;
    font-size: 0.68rem;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.35);
    line-height: 1;
    cursor: default;
}

.hub-status-bar {
    margin-top: 20px;
}

@media (max-width: 768px) {
    .quick-facts-bar {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 15px;
        padding: 15px !important;
    }
    .quick-facts-bar > div {
        flex: 1 1 40%;
    }
    .quick-facts-bar > div[style*="width: 1px"] {
        display: none !important;
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}


.shinkansen-badge { display: flex; align-items: center; justify-content: center; width: 45px; height: 45px; border-radius: 50%; font-weight: 900; font-size: 1.2rem; font-family: 'JetBrains Mono', monospace; flex-shrink: 0; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); background: linear-gradient(135deg, var(--badge-color) 0%, #1a1a1a 100%) !important; color: white !important; border: 2px solid white; position: relative; overflow: hidden; } .shinkansen-badge::after { content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); transform: skewX(-20deg); animation: shinkansen-shine 3s infinite; } @keyframes shinkansen-shine { 0% { left: -100%; } 20% { left: 200%; } 100% { left: 200%; } }

.badge-shinkansen { display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; border-radius: 50%; font-weight: 900; font-size: 2.5rem; font-family: 'JetBrains Mono', monospace; flex-shrink: 0; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); background: linear-gradient(135deg, var(--badge-color) 0%, #1a1a1a 100%) !important; color: white !important; border: 4px solid white; position: relative; overflow: hidden; margin: 0 auto 20px; } .badge-shinkansen::after { content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); transform: skewX(-20deg); animation: shinkansen-shine 3s infinite; }

@keyframes blink { 0% { opacity: 1; } 50% { opacity: 0.4; } 100% { opacity: 1; } }