:root { --bg: #121212; --panel: #181818; --text: #fff; --muted: #b3b3b3; --accent: #1db954; }
*{ box-sizing: border-box; }
body{ margin:0; background:var(--bg); color:var(--text); font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.layout{ display:flex; min-height:100vh; }
.sidebar{ width:240px; background:var(--panel); padding:24px; position:sticky; top:0; height:100vh; display:flex; flex-direction:column; scrollbar-width:none; -ms-overflow-style:none; }
.sidebar::-webkit-scrollbar{ display:none; }
.brand{ color:var(--text); text-decoration:none; font-weight:700; font-size:22px; text-align:center; margin-bottom:32px; }
.nav-block{ margin-bottom:20px; }
.sidebar-nav-content{ flex:1; overflow-y:auto; scrollbar-width:none; -ms-overflow-style:none; padding-right:8px; }
.sidebar-nav-content::-webkit-scrollbar{ display:none; }
.nav-title{ width:100%; text-align:center; background:#1db954; color:#000; font-size:11px; text-transform:uppercase; letter-spacing:.12em; margin:0 0 12px; border:none; cursor:pointer; padding:8px 12px; border-radius:6px; font-weight:600; }
.nav-block:nth-child(3) .nav-title{ background:#2dc964; }
.nav-block:nth-child(4) .nav-title{ background:#3dd974; }
.nav-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:4px; max-height:200px; overflow:auto; scrollbar-width:none; -ms-overflow-style:none; }
.nav-list::-webkit-scrollbar{ display:none; }
.nav-list.collapsed{ display:none; }
.nav-list li a{ display:flex; justify-content:space-between; align-items:center; gap:8px; padding:8px 10px; border-radius:6px; color:#fff; text-decoration:none; background:transparent; font-family:'Inter', sans-serif; font-weight:400; transition:all .15s ease; }
.nav-list li a:hover{ background:rgba(255,255,255,.08); transform:translateX(2px); }
.nav-list .name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.nav-list .count{ color:var(--muted); font-variant-numeric:tabular-nums; font-size:11px; font-weight:500; }

.nav-link-inventaire{ 
    display:flex; 
    justify-content:center; 
    align-items:center; 
    padding:12px 16px; 
    border-radius:6px; 
    color:var(--text); 
    text-decoration:none; 
    background:#2a2a2a; 
    font-family:'Inter', sans-serif; 
    font-weight:600; 
    font-size:13px; 
    transition:all .15s ease; 
    margin-top:8px; 
}

.nav-link-inventaire:hover{ 
    background:#3a3a3a; 
    transform:translateX(2px); 
}

.nav-link-text{ 
    color:var(--text); 
}
.content{ flex:1; padding:24px; }
.flash{ margin-bottom:16px; }
.flash-item{ padding:10px 12px; border-radius:6px; margin-bottom:8px; background:#2a2a2a; }
.flash-item.success{ border-left:4px solid #1db954; }
.flash-item.warning{ border-left:4px solid #e6b800; }
.flash-item.error{ border-left:4px solid #e53935; }
.search{ display:flex; gap:8px; align-items:center; justify-content:center; flex-wrap:wrap; margin-bottom:24px; }
.search input{ background:#2a2a2a; border:1px solid #333; border-radius:6px; padding:6px 10px; color:var(--text); font-family:'Inter', sans-serif; font-size:13px; font-weight:400; width:140px; }
.search button, button{ background:var(--accent); color:#000; border:none; padding:6px 12px; border-radius:20px; cursor:pointer; font-weight:600; font-size:13px; }
.welcome{ margin:40px 0; }
.welcome-content{ display:flex; gap:40px; align-items:center; margin-bottom:40px; }
.welcome .logo{ flex-shrink:0; }
.welcome .logo img{ max-width:300px; height:auto; }
.welcome-text{ flex:1; }
.welcome-text h2{ color:var(--text); font-size:28px; font-weight:700; margin:0 0 16px; }
.welcome-text p{ color:var(--muted); font-size:16px; line-height:1.6; margin:0 0 16px; }
.welcome-title{ color:var(--text); font-size:24px; font-weight:600; margin:0; text-align:left; }
.grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:16px; }
.card{ display:block; background:var(--panel); border-radius:8px; padding:12px; text-decoration:none; color:var(--text); transition:transform .12s ease; }
.card:hover{ transform:translateY(-2px); }
.card img, .placeholder{ width:100%; aspect-ratio:1; object-fit:cover; background:#333; border-radius:6px; display:block; }
.placeholder{ display:flex; align-items:center; justify-content:center; color:var(--muted); }
.meta{ margin-top:8px; }
.title{ font-weight:600; }
.subtitle{ color:var(--muted); font-size:12px; }
.detail{ display:grid; grid-template-columns:300px 1fr; gap:32px; }
.detail-left{ display:flex; flex-direction:column; gap:16px; }
.detail-right{ display:flex; flex-direction:column; gap:16px; }
.cover-area{ display:flex; flex-direction:column; }
.cover-area img{ width:100%; border-radius:8px; }
.cover-actions{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }
.btn{ display:inline-block; text-align:center; text-decoration:none; padding:8px 12px; border-radius:6px; font-weight:600; font-size:13px; cursor:pointer; }
.btn-primary{ background:var(--accent); color:#000; }
.btn-secondary{ background:#2a2a2a; color:#fff; border:1px solid #333; }
.props th{ text-align:left; color:var(--muted); padding-right:12px; vertical-align:top; }
.props td{ color:#fff; }
.card-table{ background:#1a1a1a; border:1px solid #2a2a2a; border-radius:8px; padding:12px; margin-top:16px; }
.props{ width:auto; border-collapse:collapse; }
.props tr{ background:transparent; border-bottom:1px solid #2a2a2a; }
.props tr:last-child{ border-bottom:none; }
.props th, .props td{ padding:8px 12px; text-align:left; }
.props th{ width:120px; min-width:120px; }
.heading{ margin-bottom:16px; }
.artist-link{ color:#fff; text-decoration:none; font-weight:800; letter-spacing:.06em; display:inline-block; margin-bottom:8px; font-size:24px; }
.artist-link:hover{ text-decoration:underline; }
.album-line{ color:var(--muted); font-size:18px; font-weight:600; }
.artist-about{ margin:16px 0; }
.artist-about-title{ color:var(--text); font-size:16px; font-weight:600; margin:0 0 8px; text-align:left; }
.artist-about-content{ background:#1a1a1a; border:1px solid #2a2a2a; border-radius:8px; padding:12px; color:var(--text); line-height:1.5; }
.notes-section{ margin-top:24px; }
.notes-title{ color:var(--text); font-size:16px; font-weight:600; margin:0 0 8px; text-align:left; }
.notes-content{ background:#1a1a1a; border:1px solid #2a2a2a; border-radius:8px; padding:12px; color:var(--text); line-height:1.5; }
.grid-form{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
.grid-form label{ display:flex; flex-direction:column; gap:6px; }
.login-form{ max-width:360px; margin:0 auto; display:flex; flex-direction:column; gap:12px; background:var(--panel); padding:24px; border-radius:8px; }

/* Spotify Player Styles */
.spotify-player{ margin-top:16px; }
.spotify-title{ color:var(--text); font-size:16px; font-weight:600; margin:0 0 12px; text-align:left; }
.spotify-embed{ margin-bottom:12px; }
.spotify-embed iframe{ border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,0.3); }
.spotify-link{ text-align:center; }
.btn-spotify{ background:#1db954; color:#000; border:none; padding:10px 16px; border-radius:20px; font-weight:600; font-size:13px; text-decoration:none; display:inline-block; transition:background-color .15s ease; }
.btn-spotify:hover{ background:#1ed760; }

/* Copyright Section */
.copyright{ 
    margin-top:auto; 
    padding-top:20px; 
    text-align:center; 
    color:var(--muted); 
    font-size:11px; 
    font-weight:400; 
    border-top:1px solid #2a2a2a; 
    flex-shrink:0; 
}

.copyright a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 500;
}

.copyright a:hover {
    text-decoration: underline;
}

/* Mobile Interface Styles */
.mobile-header{ 
    display:none; 
    background:var(--panel); 
    border-bottom:1px solid #2a2a2a; 
    padding:16px; 
    position:sticky; 
    top:0; 
    z-index:100; 
}

.mobile-brand{ 
    color:var(--text); 
    text-decoration:none; 
    font-weight:700; 
    font-size:20px; 
    text-align:center; 
    display:block; 
    margin-bottom:16px; 
}

.mobile-nav{ 
    display:flex; 
    gap:8px; 
    justify-content:center; 
    flex-wrap:wrap; 
}

.mobile-nav-btn{ 
    background:#2a2a2a; 
    color:var(--text); 
    border:none; 
    padding:8px 16px; 
    border-radius:6px; 
    font-family:'Inter', sans-serif; 
    font-weight:600; 
    font-size:13px; 
    cursor:pointer; 
    transition:all .15s ease; 
    text-decoration:none; 
    display:inline-block; 
}

.mobile-nav-btn:hover{ 
    background:#3a3a3a; 
}

.mobile-nav-btn.active{ 
    background:var(--accent); 
    color:#000; 
}

.mobile-search-toggle{ 
    background:#2a2a2a; 
    color:var(--text); 
    border:none; 
    padding:8px 16px; 
    border-radius:6px; 
    font-family:'Inter', sans-serif; 
    font-weight:600; 
    font-size:13px; 
    cursor:pointer; 
    transition:all .15s ease; 
}

.mobile-search-toggle:hover{ 
    background:#3a3a3a; 
}

.mobile-search-toggle.active{ 
    background:var(--accent); 
    color:#000; 
}

.mobile-filters{ 
    display:none; 
    background:var(--panel); 
    border-bottom:1px solid #2a2a2a; 
    padding:16px; 
}

.mobile-filters.show{ 
    display:block; 
}

.mobile-filters-grid{ 
    display:grid; 
    grid-template-columns:1fr; 
    gap:12px; 
}

.mobile-filter-group{ 
    display:flex; 
    flex-direction:column; 
    gap:6px; 
}

.mobile-filter-group label{ 
    color:var(--text); 
    font-size:12px; 
    font-weight:600; 
    text-transform:uppercase; 
    letter-spacing:.06em; 
}

.mobile-filter-group input{ 
    background:#2a2a2a; 
    border:1px solid #333; 
    border-radius:6px; 
    padding:10px 12px; 
    color:var(--text); 
    font-family:'Inter', sans-serif; 
    font-size:14px; 
    width:100%; 
}

.mobile-filter-actions{ 
    display:flex; 
    gap:8px; 
    justify-content:center; 
    margin-top:12px; 
}

.mobile-copyright{ 
    display:none; 
    text-align:center; 
    color:var(--muted); 
    font-size:11px; 
    font-weight:400; 
    padding:20px 16px; 
    border-top:1px solid #2a2a2a; 
    margin-top:auto; 
}

/* Mobile Media Queries */
@media (max-width: 768px) {
    .sidebar{ 
        display:none; 
    }
    
    .mobile-header{ 
        display:block; 
    }
    
    .mobile-copyright{ 
        display:block; 
    }
    
    .content{ 
        padding:0; 
    }
    
    .filters-section{ 
        display:none; 
    }
    
    .welcome{ 
        margin:20px 16px; 
    }
    
    .welcome-content{ 
        flex-direction:column; 
        gap:20px; 
        text-align:center; 
    }
    
    .welcome .logo img{ 
        max-width:200px; 
    }
    
    .grid{ 
        grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); 
        gap:12px; 
        padding:0 16px 16px; 
    }
    
    .card{ 
        padding:8px; 
    }
    
    .card img{ 
        border-radius:4px; 
    }
    
    .title{ 
        font-size:13px; 
    }
    
    .subtitle{ 
        font-size:11px; 
    }
    
    /* Inventaire mobile styles */
    .inventaire-container{ 
        padding:0; 
    }
    
    .table-container{ 
        margin:0 16px 16px; 
        border-radius:0; 
    }
    
    .inventaire-table{ 
        font-size:11px; 
    }
    
    .inventaire-table th, 
    .inventaire-table td{ 
        padding:8px 6px; 
    }
    
    .cell-notes{ 
        max-width:120px; 
    }
    
    /* Detail page mobile styles */
    .detail{ 
        grid-template-columns:1fr; 
        gap:16px; 
        padding:0 16px; 
    }
    
    .detail-left, 
    .detail-right{ 
        gap:12px; 
    }
    
    .artist-link{ 
        font-size:20px; 
    }
    
    .album-line{ 
        font-size:16px; 
    }
    
    .card-table{ 
        margin-top:12px; 
    }
    
    .props th, 
    .props td{ 
        padding:6px 8px; 
    }
    
    .props th{ 
        width:100px; 
        min-width:100px; 
    }
}

/* Inventaire Page Styles */
.inventaire-container{ 
    max-width:100%; 
    overflow-x:auto; 
}

.inventaire-title{ 
    color:var(--text); 
    font-size:28px; 
    font-weight:700; 
    margin:0 0 24px; 
}

.filters-section{ 
    background:var(--panel); 
    border:1px solid #2a2a2a; 
    border-radius:8px; 
    padding:20px; 
    margin-bottom:24px; 
}

.filters-grid{ 
    display:grid; 
    grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); 
    gap:16px; 
    align-items:end; 
}

.filter-group{ 
    display:flex; 
    flex-direction:column; 
    gap:6px; 
}

.filter-group label{ 
    color:var(--text); 
    font-size:12px; 
    font-weight:600; 
    text-transform:uppercase; 
    letter-spacing:.06em; 
}

.filter-group input{ 
    background:#2a2a2a; 
    border:1px solid #333; 
    border-radius:6px; 
    padding:8px 12px; 
    color:var(--text); 
    font-family:'Inter', sans-serif; 
    font-size:13px; 
}

.filter-actions{ 
    display:flex; 
    gap:8px; 
    align-items:end; 
}

.table-container{ 
    background:var(--panel); 
    border:1px solid #2a2a2a; 
    border-radius:8px; 
    overflow:hidden; 
    margin-bottom:16px; 
}

.inventaire-table{ 
    width:100%; 
    border-collapse:collapse; 
    font-size:13px; 
}

.inventaire-table th{ 
    background:#1a1a1a; 
    color:var(--text); 
    font-weight:600; 
    text-align:left; 
    padding:12px 16px; 
    border-bottom:1px solid #2a2a2a; 
    position:sticky; 
    top:0; 
    z-index:10; 
}

.inventaire-table td{ 
    padding:12px 16px; 
    border-bottom:1px solid #2a2a2a; 
    color:var(--text); 
    vertical-align:top; 
}

.inventaire-table tr:hover{ 
    background:rgba(255,255,255,.02); 
}

.inventaire-table tr:last-child td{ 
    border-bottom:none; 
}

.sort-link{ 
    color:var(--text); 
    text-decoration:none; 
    display:flex; 
    align-items:center; 
    gap:6px; 
    transition:color .15s ease; 
}

.sort-link:hover{ 
    color:var(--accent); 
}

.sort-indicator{ 
    color:var(--accent); 
    font-weight:700; 
}

.record-link{ 
    color:var(--accent); 
    text-decoration:none; 
    font-weight:600; 
}

.record-link:hover{ 
    text-decoration:underline; 
}

.cell-id{ 
    width:60px; 
    text-align:center; 
}

.cell-artist{ 
    width:180px; 
    font-weight:500; 
}

.cell-album{ 
    width:200px; 
    font-weight:500; 
}

.cell-year{ 
    width:80px; 
    text-align:center; 
}

.cell-label{ 
    width:150px; 
}

.cell-catalog{ 
    width:120px; 
    font-family:monospace; 
    font-size:12px; 
}

.cell-format{ 
    width:100px; 
}

.cell-country{ 
    width:100px; 
}

.cell-notes{ 
    max-width:200px; 
    word-wrap:break-word; 
}

.cell-price{ 
    width:80px; 
    text-align:right; 
    font-family:monospace; 
}

.cell-currency{ 
    width:80px; 
    text-align:center; 
}

.stats-section{ 
    text-align:right; 
    margin-top:16px; 
}

 .stats-text{ 
     color:var(--muted); 
     font-size:13px; 
     margin:0; 
 }

 /* Export Dropdown Styles */
 .export-dropdown{ 
     position:relative; 
     display:inline-block; 
 }

 .export-menu{ 
     display:none; 
     position:absolute; 
     top:100%; 
     right:0; 
     background:var(--panel); 
     border:1px solid #2a2a2a; 
     border-radius:6px; 
     box-shadow:0 4px 12px rgba(0,0,0,0.3); 
     z-index:1000; 
     min-width:120px; 
     margin-top:4px; 
 }

 .export-menu.show{ 
     display:block; 
 }

 .export-option{ 
     display:block; 
     padding:8px 12px; 
     color:var(--text); 
     text-decoration:none; 
     font-size:13px; 
     transition:background-color .15s ease; 
 }

 .export-option:hover{ 
     background:rgba(255,255,255,.08); 
 }

 .export-option:first-child{ 
     border-radius:6px 6px 0 0; 
 }

 .export-option:last-child{ 
     border-radius:0 0 6px 6px; 
 }

 /* Loading Indicators */
 .loading-indicator{ 
     display:flex; 
     align-items:center; 
     justify-content:center; 
     gap:12px; 
     padding:20px; 
     color:var(--muted); 
     font-size:14px; 
 }

 .loading-spinner{ 
     width:20px; 
     height:20px; 
     border:2px solid #2a2a2a; 
     border-top:2px solid var(--accent); 
     border-radius:50%; 
     animation:spin 1s linear infinite; 
 }

 @keyframes spin{ 
     0%{ transform:rotate(0deg); } 
     100%{ transform:rotate(360deg); } 
 }

 .end-indicator{ 
     text-align:center; 
     padding:20px; 
     color:var(--muted); 
     font-size:14px; 
     border-top:1px solid #2a2a2a; 
 }

/* À propos page styles */
.a-propos-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 20px;
}

.a-propos-content h1 {
    color: var(--accent);
    font-size: 2.5rem;
    margin-bottom: 30px;
    text-align: center;
}

.a-propos-text {
    line-height: 1.8;
    font-size: 1.1rem;
    color: var(--text);
}

.a-propos-text p {
    margin-bottom: 20px;
    text-align: justify;
}

.signature {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 2px solid var(--accent);
    text-align: center;
}

.signature p {
    margin-bottom: 10px;
    text-align: center;
}

.signature a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 500;
}

.signature a:hover {
    text-decoration: underline;
}

/* Mobile styles for À propos page */
@media (max-width: 768px) {
    .a-propos-container {
        padding: 20px 15px;
    }
    
    .a-propos-content h1 {
        font-size: 2rem;
        margin-bottom: 20px;
    }
    
    .a-propos-text {
        font-size: 1rem;
        line-height: 1.6;
    }
    
    .a-propos-text p {
        margin-bottom: 15px;
    }
}