/* --- NAVIGATION PAGE STYLES --- */
.tabs-container {
    display: flex; 
    border-bottom: 1px solid var(--md-sys-color-outline-variant); 
    margin-bottom: 24px;
}
.md-tab {
    flex: 1; 
    height: 48px; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    font: var(--md-sys-typescale-title-medium); 
    color: var(--md-sys-color-on-surface-variant);
    cursor: pointer; 
    position: relative; 
    transition: 0.2s;
}
.md-tab:hover { background: rgba(0,0,0,0.04); }
.md-tab.active { color: var(--md-sys-color-primary); }
.md-tab.active::after {
    content: ""; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    height: 3px;
    background: var(--md-sys-color-primary); 
    border-radius: 3px 3px 0 0;
}
.tab-panel { display: none; padding: 24px 0; }
.tab-panel.active { display: block; animation: fade-up 0.3s ease; }

@keyframes fade-up { 
    from { opacity: 0; transform: translateY(10px); } 
    to { opacity: 1; transform: translateY(0); } 
}

/* --- BOTTOM SHEET --- */
/* The .bottom-sheet and .sheet-scrim rules here duplicate styles in src/css/base.css */
/* Intentionally removed to rely on base.css defaults for consistency. */
.drag-handle {
    width: 32px; 
    height: 4px; 
    background: var(--md-sys-color-outline-variant);
    margin: 0 auto 16px; 
    border-radius: 2px;
}

/* --- DEMO RAIL CONTAINER --- */
.demo-rail-container {
    height: 400px; 
    border: 1px solid var(--md-sys-color-outline-variant);
    display: flex; 
    overflow: hidden; 
    position: relative; 
    border-radius: 16px;
}