/* =============================================
   RESET & BASE
   ============================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    min-height: 100vh;
    padding: 20px;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
}

/* =============================================
   HEADER
   ============================================= */
header {
    text-align: center;
    padding: 40px 0 30px;
    color: white;
}

header h1 {
    font-size: 2.8rem;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #a8edea, #fed6e3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 12px;
}

.microscope-logo {
    width: 38px;
    height: 48px;
    flex-shrink: 0;
}

header p {
    font-size: 1rem;
    opacity: 0.7;
    margin-bottom: 12px;
}

.sjr-status {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    background: rgba(255,255,255,0.1);
    color: white;
    border: 1px solid rgba(255,255,255,0.2);
    transition: all 0.3s;
}

.sjr-status.loaded {
    background: rgba(72, 187, 120, 0.2);
    border-color: rgba(72, 187, 120, 0.5);
    color: #9ae6b4;
}

.sjr-status.error {
    background: rgba(245, 101, 101, 0.2);
    border-color: rgba(245, 101, 101, 0.5);
    color: #feb2b2;
}

/* =============================================
   SEARCH BOX
   ============================================= */
.search-box {
    background: white;
    border-radius: 20px;
    padding: 28px;
    margin-bottom: 20px;
    box-shadow: 0 25px 50px rgba(0,0,0,0.3);
}

.search-row {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

.search-input {
    flex: 1;
    padding: 14px 20px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 1rem;
    outline: none;
    transition: all 0.3s;
    color: #2d3748;
}

.search-input:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102,126,234,0.15);
}

.search-btn {
    padding: 14px 28px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    white-space: nowrap;
}

.search-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(102,126,234,0.4);
}

.search-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* =============================================
   FILTERS
   ============================================= */
.filters {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    align-items: flex-end;
    margin-top: 28px;
}

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

.filter-group label {
    font-size: 0.75rem;
    color: #718096;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.toggle-group {
    display: flex;
    gap: 10px;
    padding: 6px 0;
}

.toggle-label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    color: #4a5568;
    text-transform: none;
    letter-spacing: 0;
}

.toggle-label input[type="checkbox"] {
    accent-color: #667eea;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.toggle-text {
    user-select: none;
}

.best-mode-label {
    color: #b7791f;
    font-weight: 700;
}

/* ── iOS-style mode toggle ── */
.mode-toggle-wrap {
    display     : flex;
    align-items : center;
    gap         : 10px;
}

.mode-toggle-side-label {
    font-size   : 0.85rem;
    font-weight : 600;
    color       : rgba(255,255,255,0.38);
    transition  : color 0.25s;
    white-space : nowrap;
    user-select : none;
}

.mode-toggle-side-label.active {
    color : rgba(255,255,255,0.95);
}

/* The track */
.mode-toggle {
    position      : relative;
    width         : 52px;
    height        : 30px;
    border-radius : 15px;
    background    : #667eea;          /* violet = PubRank active */
    cursor        : pointer;
    transition    : background 0.3s;
    flex-shrink   : 0;
    box-shadow    : inset 0 1px 3px rgba(0,0,0,0.15);
}

/* PubMed side (toggle off = grey) */
.mode-toggle:not(.pubrank) {
    background : #cbd5e0;
}

/* The thumb */
.mode-toggle-thumb {
    position      : absolute;
    top           : 3px;
    left          : 3px;
    width         : 24px;
    height        : 24px;
    border-radius : 50%;
    background    : white;
    box-shadow    : 0 2px 6px rgba(0,0,0,0.20);
    transition    : transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* PubRank active (default) → thumb left; PubMed active → thumb slides right */
.mode-toggle:not(.pubrank) .mode-toggle-thumb {
    transform : translateX(22px);
}

.filter-select,
.filter-input {
    padding: 9px 12px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.88rem;
    outline: none;
    cursor: pointer;
    background: white;
    color: #2d3748;
    transition: border-color 0.2s;
}

.filter-select:focus,
.filter-input:focus {
    border-color: #1d4ed8;
}

/* =============================================
   RESULTS BOX
   ============================================= */
.results-box {
    background: white;
    border-radius: 20px;
    padding: 25px;
    margin-top: 18px;
    box-shadow: 0 25px 50px rgba(0,0,0,0.3);
    min-height: 200px;
}

.results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #f7fafc;
    flex-wrap: wrap;
    gap: 10px;
}

.results-count {
    font-size: 0.95rem;
    color: #718096;
}

.results-count span {
    font-weight: 700;
    color: #1d4ed8;
    font-size: 1.1rem;
}

.sort-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sort-select {
    padding: 8px 12px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.88rem;
    outline: none;
    cursor: pointer;
    background: white;
}

/* =============================================
   ARTICLE CARD
   ============================================= */
.article-card {
    border: 1px solid #e2e8f0;
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 14px;
    transition: all 0.25s;
    border-left: 5px solid #1d4ed8;
    background: #fafbff;
}

.article-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(102,126,234,0.15);
    border-left-color: #1e3a8a;
}

.article-card.q1 { border-left-color: #38a169; }
.article-card.q2 { border-left-color: #3182ce; }
.article-card.q3 { border-left-color: #d69e2e; }
.article-card.q4 { border-left-color: #e53e3e; }
.article-card.unknown { border-left-color: #a0aec0; }

.article-title {
    font-size: 1rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 8px;
    line-height: 1.5;
}

.article-title a {
    color: #1a202c;
    text-decoration: none;
    transition: color 0.2s;
}

.article-title a:hover {
    color: #1d4ed8;
}

.article-authors {
    font-size: 0.83rem;
    color: #718096;
    margin-bottom: 4px;
    font-style: italic;
}
.article-authors:hover {
    color: #4a5568;
}

.article-affiliation {
    font-size: 0.76rem;
    color: #a0aec0;
    margin-bottom: 10px;
    font-style: italic;
    min-height: 0;
}

.article-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

/* BADGES */
.badge {
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.76rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.badge-journal {
    background: #ebf4ff;
    color: #2b6cb0;
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.badge-year {
    background: #f0fff4;
    color: #276749;
}

.badge-pmid {
    background: #fff5f5;
    color: #c53030;
}

.badge-type {
    background: #faf5ff;
    color: #6b46c1;
}

.badge-citations.unknown {
    background: #f7fafc;
    color: #a0aec0;
    border: 1px solid #e2e8f0;
}

.badge-citations {
    background: #fffbeb;
    color: #92400e;
    border: 1px solid #fcd34d;
}

/* SJR BADGES */
.badge-sjr {
    font-size: 0.8rem;
    padding: 3px 12px;
    font-weight: 700;
}

.badge-sjr.q1-top {
    background: linear-gradient(135deg, #c6f6d5, #9ae6b4);
    color: #1c4532;
    border: 1px solid #68d391;
}

.badge-sjr.q1 {
    background: #f0fff4;
    color: #276749;
    border: 1px solid #9ae6b4;
}

.badge-sjr.q2 {
    background: #ebf8ff;
    color: #2c5282;
    border: 1px solid #90cdf4;
}

.badge-sjr.q3 {
    background: #fffbeb;
    color: #7b341e;
    border: 1px solid #fbd38d;
}

.badge-sjr.q4 {
    background: #fff5f5;
    color: #c53030;
    border: 1px solid #feb2b2;
}

.badge-sjr.unknown {
    background: #f7fafc;
    color: #a0aec0;
    border: 1px solid #e2e8f0;
}

.article-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #f0f0f0;
}

.pubmed-link {
    color: #1d4ed8;
    font-size: 0.83rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s;
}

.pubmed-link:hover {
    color: #1e3a8a;
}

.sjr-journal-link {
    color: #a0aec0;
    font-size: 0.78rem;
    text-decoration: none;
}

.sjr-journal-link:hover {
    color: #1d4ed8;
}

.abstract-btn {
    background: none;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    color: #1d4ed8;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 3px 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.abstract-btn:hover {
    background: #1d4ed8;
    color: white;
    border-color: #1d4ed8;
}

.ris-btn {
    color: #2b6cb0;
    border-color: #bee3f8;
}

.ris-btn:hover {
    background: #2b6cb0;
    color: white;
    border-color: #2b6cb0;
}

.ris-export-btn {
    background: #2b6cb0;
    color: white;
}


.citedby-btn {
    color: #805ad5;
    border-color: #e9d8fd;
}

.citedby-btn:hover {
    background: #805ad5;
    color: white;
    border-color: #805ad5;
}

.citedby-box {
    margin-top: 10px;
    padding: 12px 14px;
    background: #faf5ff;
    border: 1px solid #e9d8fd;
    border-radius: 8px;
    font-size: 0.82rem;
}

.citedby-item {
    padding: 6px 0;
    border-bottom: 1px solid #e9d8fd;
}

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

.citedby-item a {
    color: #2d3748;
    text-decoration: none;
    font-weight: 500;
    display: block;
    margin-bottom: 2px;
}

.citedby-item a:hover { color: #805ad5; }

.citedby-meta {
    color: #718096;
    font-size: 0.76rem;
}

.citedby-more {
    margin-top: 8px;
    color: #805ad5;
    font-size: 0.78rem;
    font-style: italic;
}

.save-btn {
    color: #38a169;
    border-color: #c6f6d5;
}

.save-btn:hover {
    background: #38a169;
    color: white;
    border-color: #38a169;
}

.save-btn.saved {
    background: #f0fff4;
    color: #276749;
    border-color: #9ae6b4;
}

/* COLLECTION BAR */
.collection-bar {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: #2d3748;
    color: white;
    border-radius: 12px;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
    z-index: 1000;
    font-size: 0.88rem;
}

.collection-bar-actions {
    display: flex;
    gap: 8px;
}

.collection-btn {
    border: none;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
}

.collection-btn:hover { opacity: 0.85; }

.export-btn {
    background: #1d4ed8;
    color: white;
}

.clear-btn {
    background: #4a5568;
    color: #e2e8f0;
}

/* ABOUT BUTTON + PANEL */
.about-btn {
    position: fixed;
    top: 16px;
    left: 20px;
    background: rgba(255,255,255,0.15);
    border: 1.5px solid rgba(255,255,255,0.3);
    color: white;
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    z-index: 500;
    transition: background 0.2s;
}

.about-btn:hover {
    background: rgba(255,255,255,0.25);
}

.install-btn {
    position: fixed;
    top: 16px;
    right: 20px;
    background: #1d4ed8;
    border: 1.5px solid #60a5fa;
    color: #fff;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    z-index: 500;
    transition: background 0.2s;
}

.install-btn:hover {
    background: #1e40af;
}

.about-panel {
    display: none;
    position: fixed;
    top: 52px;
    left: 20px;
    width: 360px;
    max-height: calc(100vh - 72px);
    overflow-y: auto;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    z-index: 499;
    font-size: 0.84rem;
    color: #4a5568;
    line-height: 1.6;
}

.about-panel.visible { display: block; }

.about-panel h3 {
    margin: 0 0 12px;
    font-size: 1rem;
    color: #2d3748;
}

.about-panel p { margin: 0 0 10px; }

.about-panel ul {
    margin: 4px 0 10px 16px;
    padding: 0;
}

.about-panel li { margin: 3px 0; }

.about-footer {
    font-size: 0.75rem;
    color: #a0aec0;
    border-top: 1px solid #e2e8f0;
    padding-top: 10px;
    margin-top: 4px !important;
}

.fulltext-link {
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    padding: 3px 10px;
    border-radius: 6px;
    border: 1px solid;
    transition: all 0.2s;
}

.fulltext-link.free {
    color: #276749;
    border-color: #9ae6b4;
    background: #f0fff4;
}

.fulltext-link.free:hover {
    background: #276749;
    color: white;
}

.fulltext-link.doi {
    color: #744210;
    border-color: #fbd38d;
    background: #fffbeb;
}

.fulltext-link.doi:hover {
    background: #744210;
    color: white;
}

.abstract-box {
    margin-top: 12px;
    padding: 14px 16px;
    background: #f8faff;
    border-left: 3px solid #1d4ed8;
    border-radius: 0 8px 8px 0;
    font-size: 0.88rem;
    line-height: 1.7;
    color: #2d3748;
}

/* =============================================
   LOADING
   ============================================= */
.loading {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.55);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.microscope-icon {
    width: 120px;
    height: 80px;
    animation: pulse-scope 1.2s ease-in-out infinite;
    filter: drop-shadow(0 6px 24px rgba(255,255,255,0.4));
}

@keyframes pulse-scope {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.18) translateY(-6px); }
}

/* =============================================
   EMPTY STATE
   ============================================= */
.empty-state {
    text-align: center;
    padding: 50px 20px;
    color: #a0aec0;
}

.empty-state .icon {
    font-size: 3.5rem;
    margin-bottom: 12px;
}

.empty-state p {
    font-size: 1rem;
}

/* =============================================
   PAGINATION
   ============================================= */
.pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 25px;
    flex-wrap: wrap;
}

.page-btn {
    padding: 8px 14px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    background: white;
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 600;
    color: #4a5568;
    transition: all 0.2s;
}

.page-btn:hover,
.page-btn.active {
    background: linear-gradient(135deg, #1d4ed8, #1e3a8a);
    color: white;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(102,126,234,0.35);
}

/* =============================================
   STATS BAR
   ============================================= */
.stats-bar {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.stat-chip {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    background: #f7fafc;
    color: #4a5568;
    border: 1px solid #e2e8f0;
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 650px) {
    header h1 { font-size: 2rem; }
    .search-row { flex-direction: column; }
    .filters { flex-direction: column; }
    .filter-group { min-width: unset; width: 100%; }
    .results-header { flex-direction: column; align-items: flex-start; }
}
/* =============================================
   FILTER PAD
   ============================================= */
.filter-pad {
    background: white;
    border-radius: 20px;
    padding: 0;
    margin-top: 18px;
    margin-bottom: 20px;
    box-shadow: 0 25px 50px rgba(0,0,0,0.3);
    overflow: hidden;
    border: 1px solid rgba(102,126,234,0.15);
    display: none;
    width: 100%;
    box-sizing: border-box;
}

.filter-pad.visible {
    display: block;
}

/* --- Header --- */
.filter-pad-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 8px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
    border-radius: 20px;
    transition: border-radius 0.2s;
}

.filter-pad.expanded .filter-pad-header {
    border-radius: 20px 20px 0 0;
}

.filter-pad-toggle {
    margin-left: auto;
    color: white;
    font-size: 1rem;
    transition: transform 0.25s;
}

.filter-pad.expanded .filter-pad-toggle {
    transform: rotate(180deg);
}

.filter-pad-header h3 {
    color: white;
    font-size: 0.88rem;
    font-weight: 700;
    margin: 0;
}

.filter-pad-subtitle {
    color: rgba(255,255,255,0.75);
    font-size: 0.78rem;
}

/* --- Body --- */
.filter-pad-body {
    display: none;
    gap: 0;
    padding: 0;
    flex-wrap: wrap;
    overflow-x: hidden;
}

.filter-pad.expanded .filter-pad-body {
    display: flex;
}

.filter-pad-col {
    flex: 1;
    padding: 12px 16px;
    min-width: 220px;
}

.filter-pad-divider {
    width: 1px;
    background: linear-gradient(
        to bottom,
        transparent,
        #e2e8f0 20%,
        #e2e8f0 80%,
        transparent
    );
    margin: 15px 0;
}

.filter-pad-section-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: #4a5568;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 2px solid #f0f0f0;
}

/* --- Dual Range Slider --- */
.year-range-container,
.sjr-range-container {
    margin-bottom: 8px;
}

.range-labels {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.range-labels span {
    background: linear-gradient(135deg, #1d4ed8, #1e3a8a);
    color: white;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 700;
    min-width: 60px;
    text-align: center;
}

.dual-range {
    position: relative;
    height: 36px;
    display: flex;
    align-items: center;
}

.range-track {
    position: absolute;
    width: 100%;
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    z-index: 1;
    pointer-events: none;
}

.range-fill {
    position: absolute;
    height: 100%;
    background: linear-gradient(135deg, #1d4ed8, #1e3a8a);
    border-radius: 3px;
}

.range-slider {
    position: absolute;
    width: 100%;
    height: 6px;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    pointer-events: none;
    z-index: 2;
    outline: none;
}

.range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1d4ed8, #1e3a8a);
    cursor: pointer;
    pointer-events: all;
    box-shadow: 0 2px 8px rgba(102,126,234,0.5);
    border: 2px solid white;
    transition: transform 0.15s;
}

.range-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.range-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1d4ed8, #1e3a8a);
    cursor: pointer;
    pointer-events: all;
    box-shadow: 0 2px 8px rgba(102,126,234,0.5);
    border: 2px solid white;
}

/* --- Raccourcis années --- */
.year-shortcuts {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.shortcut-btn {
    padding: 5px 10px;
    border: 2px solid #e2e8f0;
    border-radius: 20px;
    background: white;
    font-size: 0.75rem;
    font-weight: 600;
    color: #4a5568;
    cursor: pointer;
    transition: all 0.2s;
}

.shortcut-btn:hover {
    border-color: #1d4ed8;
    color: #1d4ed8;
    background: #ebf4ff;
}

.shortcut-btn.active {
    background: linear-gradient(135deg, #1d4ed8, #1e3a8a);
    color: white;
    border-color: transparent;
}

/* --- Distribution des années --- */
.year-distribution {
    background: #f7fafc;
    border-radius: 12px;
    padding: 12px;
}

.dist-title {
    font-size: 0.78rem;
    color: #718096;
    font-weight: 600;
    margin-bottom: 10px;
}

.dist-bars {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 60px;
}

.dist-bar-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: flex-end;
    cursor: pointer;
}

.dist-bar {
    width: 100%;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(to top, #1d4ed8, #60a5fa);
    transition: all 0.3s;
    min-height: 2px;
}

.dist-bar.dimmed {
    background: #e2e8f0;
}

.dist-bar-wrap:hover .dist-bar {
    background: linear-gradient(to top, #1e3a8a, #f093fb);
}

.dist-year-label {
    font-size: 0.6rem;
    color: #a0aec0;
    margin-top: 3px;
    transform: rotate(-45deg);
    white-space: nowrap;
}

/* --- Quartile buttons --- */
.quartile-section {
    margin-bottom: 8px;
}

.quartile-label {
    font-size: 0.78rem;
    color: #718096;
    font-weight: 600;
    margin-bottom: 8px;
}

.quartile-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.quartile-btn {
    padding: 6px 14px;
    border-radius: 20px;
    border: 2px solid transparent;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 5px;
    opacity: 0.4;
}

.quartile-btn.active {
    opacity: 1;
}

.quartile-btn.q1 {
    background: #f0fff4;
    color: #276749;
    border-color: #9ae6b4;
}
.quartile-btn.q1.active {
    background: #276749;
    color: white;
    border-color: #276749;
}

.quartile-btn.q2 {
    background: #ebf8ff;
    color: #2c5282;
    border-color: #90cdf4;
}
.quartile-btn.q2.active {
    background: #2c5282;
    color: white;
    border-color: #2c5282;
}

.quartile-btn.q3 {
    background: #fffbeb;
    color: #7b341e;
    border-color: #fbd38d;
}
.quartile-btn.q3.active {
    background: #b7791f;
    color: white;
    border-color: #b7791f;
}

.quartile-btn.q4 {
    background: #fff5f5;
    color: #c53030;
    border-color: #feb2b2;
}
.quartile-btn.q4.active {
    background: #c53030;
    color: white;
    border-color: #c53030;
}

.quartile-btn.unknown {
    background: #f7fafc;
    color: #718096;
    border-color: #e2e8f0;
}
.quartile-btn.unknown.active {
    background: #718096;
    color: white;
    border-color: #718096;
}

.q-count {
    background: rgba(255,255,255,0.3);
    border-radius: 10px;
    padding: 1px 6px;
    font-size: 0.72rem;
}

/* --- SJR Stats --- */
.sjr-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.sjr-stat-item {
    background: #f7fafc;
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    border: 1px solid #e2e8f0;
}

.sjr-stat-label {
    font-size: 0.72rem;
    color: #a0aec0;
    font-weight: 600;
    text-transform: uppercase;
}

.sjr-stat-value {
    font-size: 1rem;
    font-weight: 700;
    color: #1d4ed8;
}

/* --- Footer --- */
.filter-pad:not(.expanded) .filter-pad-footer {
    display: none;
}

.filter-pad-footer {
    padding: 8px 16px;
    background: #f7fafc;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
}

.active-filters {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.active-filter-tag {
    padding: 4px 10px;
    background: linear-gradient(135deg, #1d4ed820, #1e3a8a20);
    border: 1px solid #1d4ed850;
    border-radius: 20px;
    font-size: 0.75rem;
    color: #4a5568;
    font-weight: 600;
}

.filter-pad-actions {
    display: flex;
    gap: 10px;
}

.btn-reset {
    padding: 9px 18px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    background: white;
    color: #718096;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-reset:hover {
    border-color: #fc8181;
    color: #e53e3e;
    background: #fff5f5;
}

.btn-apply {
    padding: 9px 22px;
    background: linear-gradient(135deg, #1d4ed8, #1e3a8a);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(102,126,234,0.3);
}

.btn-apply:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(102,126,234,0.45);
}

/* --- Responsive --- */
@media (max-width: 700px) {
    .filter-pad-body {
        flex-direction: column;
    }
    .filter-pad-divider {
        width: 100%;
        height: 1px;
        margin: 0 25px;
    }
    .filter-pad-footer {
        flex-direction: column;
        align-items: stretch;
    }
    .filter-pad-actions {
        justify-content: stretch;
    }
    .btn-reset, .btn-apply {
        flex: 1;
        text-align: center;
    }
}
.badge-citescore {
    background: linear-gradient(135deg, #e6fffa, #b2f5ea);
    color: #234e52;
    border: 1px solid #81e6d9;
    font-weight: 700;
    font-size: 0.8rem;
    padding: 3px 12px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.badge-citescore.unknown {
    background: #f7fafc;
    color: #a0aec0;
    border: 1px solid #e2e8f0;
}
/* ─── Search Section ─────────────────────────── */
.search-section {
    display        : flex;
    flex-direction : column;
    gap            : 12px;
    width          : 100%;
}

/* ─── Search Pads ─────────────────────────────── */
.search-pads {
    display  : flex;
    flex-wrap: nowrap;
    gap      : 8px;
    width    : 100%;
    overflow-x: auto;
}

.search-pad {
    background    : rgba(255,255,255,0.08);
    border        : 1.5px solid rgba(255,255,255,0.15);
    border-radius : 10px;
    padding       : 8px 10px;
    display       : flex;
    flex-direction: column;
    gap           : 4px;
    transition    : border-color 0.2s, background 0.2s;
    flex          : 1 1 0;
    min-width     : 120px;
}

.search-pad:hover {
    background   : rgba(255,255,255,0.13);
    border-color : rgba(255,255,255,0.30);
}

.pad-label {
    font-size   : 0.78rem;
    font-weight : 600;
    color       : rgba(255,255,255,0.85);
    letter-spacing: 0.03em;
}

.pad-input-row {
    display    : flex;
    align-items: center;
    gap        : 6px;
}

.pad-input {
    flex          : 1;
    padding       : 6px 10px;
    border        : 1.5px solid rgba(255,255,255,0.20);
    border-radius : 7px;
    background    : rgba(255,255,255,0.12);
    color         : white;
    font-size     : 0.84rem;
    transition    : border-color 0.2s, background 0.2s;
    min-width     : 0;
}

.pad-input::placeholder {
    color      : rgba(255,255,255,0.45);
    font-style : italic;
}

.pad-input:focus {
    outline      : none;
    border-color : rgba(255,255,255,0.60);
    background   : rgba(255,255,255,0.18);
}

.pad-tag {
    font-size     : 0.70rem;
    font-weight   : 700;
    color         : rgba(255,255,255,0.55);
    background    : rgba(255,255,255,0.10);
    border        : 1px solid rgba(255,255,255,0.18);
    border-radius : 5px;
    padding       : 2px 6px;
    white-space   : nowrap;
    letter-spacing: 0.02em;
}
/* ----------------------------------------------------------------
   BEST MODE BANNER
   ---------------------------------------------------------------- */
.best-mode-banner {
    display       : flex;
    align-items   : center;
    gap           : 10px;
    margin-bottom : 12px;
    padding       : 10px 16px;
    background    : linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border        : 1px solid #f6c90e;
    border-radius : 10px;
    font-size     : 0.84rem;
    color         : #78350f;
    flex-wrap     : wrap;
}

.banner-icon {
    font-size   : 1.1rem;
    flex-shrink : 0;
}

.banner-body {
    display        : flex;
    flex-direction : column;
    gap            : 6px;
    flex           : 1;
}

.banner-row {
    display     : flex;
    align-items : center;
    flex-wrap   : wrap;
    gap         : 6px;
}

.banner-row-podium {
    align-items : center;
}

.banner-podium-label {
    font-weight  : 700;
    font-size    : 0.82rem;
    color        : #92400e;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-right : 4px;
}

.banner-sep {
    color       : #b45309;
    font-weight : 400;
    margin      : 0 2px;
}

.banner-not-shown {
    color       : #92400e;
    font-style  : italic;
}

.banner-sjr-note {
    color        : #1e40af;
    font-weight  : 600;
    font-size    : 0.85em;
    background   : #dbeafe;
    padding      : 1px 6px;
    border-radius: 4px;
}

.banner-loading {
    color      : #92400e;
    font-style : italic;
    font-size  : 0.88em;
}

.banner-extend-label {
    font-weight : 600;
    color       : #78350f;
}

.extend-btn {
    display       : inline-flex;
    align-items   : center;
    gap           : 3px;
    padding       : 3px 9px;
    background    : #fef08a;
    border        : 1px solid #f6c90e;
    border-radius : 6px;
    font-size     : 0.80rem;
    font-weight   : 600;
    color         : #78350f;
    cursor        : pointer;
    transition    : background 0.15s, border-color 0.15s;
}

.extend-btn:hover:not(:disabled) {
    background    : #fde047;
    border-color  : #ca8a04;
}

.extend-btn:disabled {
    opacity : 0.55;
    cursor  : default;
}

.extend-count {
    font-weight : 400;
    color       : #92400e;
}

/* ── Year toggle buttons + Elite Filter (même système) ── */
.banner-years {
    display     : inline-flex;
    flex-wrap   : wrap;
    gap         : 4px;
    align-items : center;
}

.year-toggle {
    display       : inline-flex;
    align-items   : center;
    gap           : 4px;
    padding       : 3px 10px;
    border-radius : 99px;
    font-size     : 0.80rem;
    font-weight   : 600;
    cursor        : pointer;
    border        : 1.5px solid;
    transition    : background 0.15s, border-color 0.15s, color 0.15s;
    line-height   : 1;
}

/* OFF : contour vert, fond blanc */
.year-toggle.year-off {
    background   : #fff;
    border-color : #6ee7b7;
    color        : #065f46;
}
.year-toggle.year-off:hover {
    background   : #d1fae5;
    border-color : #34d399;
}

/* ON : fond vert plein */
.year-toggle.year-on {
    background   : #059669;
    border-color : #047857;
    color        : #fff;
}
.year-toggle.year-on:hover:not(:disabled) {
    background   : #047857;
}
.year-toggle.year-on:disabled {
    opacity : 0.7;
    cursor  : default;
}

/* ── Système 3 médailles ── */
.medal-group {
    display     : inline-flex;
    gap         : 4px;
    align-items : center;
}

.medal-btn {
    display       : inline-flex;
    align-items   : center;
    gap           : 4px;
    padding       : 3px 11px;
    border-radius : 99px;
    font-size     : 0.80rem;
    font-weight   : 600;
    cursor        : pointer;
    border        : 1.5px solid;
    transition    : background 0.15s, border-color 0.15s, opacity 0.15s;
    line-height   : 1;
    opacity       : 0.45;   /* relâché = estompé */
}
.medal-btn.medal-on {
    opacity : 1;            /* enfoncé = plein */
}
.medal-btn:hover { opacity : 0.8; }
.medal-btn.medal-on:hover { opacity : 0.9; }

/* 🥇 Gold */
.gold-btn {
    background   : #fef3c7;
    border-color : #f59e0b;
    color        : #78350f;
}
.gold-btn.medal-on {
    background   : #d97706;
    border-color : #b45309;
    color        : #fff;
}

/* 🥈 Silver */
.silver-btn {
    background   : #f1f5f9;
    border-color : #94a3b8;
    color        : #334155;
}
.silver-btn.medal-on {
    background   : #64748b;
    border-color : #475569;
    color        : #fff;
}

/* 🥉 Bronze */
.bronze-btn {
    background   : #fdf4ec;
    border-color : #cd7f32;
    color        : #7c3f00;
}
.bronze-btn.medal-on {
    background   : #a0522d;
    border-color : #7c3f00;
    color        : #fff;
}

/* ⚪ Others */
.others-btn {
    background   : #f8fafc;
    border-color : #cbd5e1;
    color        : #475569;
}
.others-btn.medal-on {
    background   : #475569;
    border-color : #334155;
    color        : #fff;
}

.year-count {
    font-weight : 400;
    opacity     : 0.75;
    font-size   : 0.90em;
}

/* ================================================================
   LIBRARY BUTTON + LIBRARY PAGE
   ================================================================ */

.library-btn {
    position    : fixed;
    top         : 16px;
    left        : 110px;
    background  : rgba(255,255,255,0.15);
    border      : 1.5px solid rgba(255,255,255,0.3);
    color       : white;
    border-radius: 20px;
    padding     : 6px 14px;
    font-size   : 0.82rem;
    font-weight : 600;
    cursor      : pointer;
    z-index     : 500;
    transition  : background 0.2s;
}
.library-btn:hover {
    background: rgba(255,255,255,0.25);
}
.library-badge {
    display         : inline-block;
    background      : #f6ad55;
    color           : #7c2d12;
    border-radius   : 10px;
    padding         : 1px 7px;
    font-size       : 0.75rem;
    font-weight     : 700;
    margin-left     : 5px;
    vertical-align  : middle;
}

.collection-view-btn {
    background  : transparent;
    border      : none;
    color       : #90cdf4;
    cursor      : pointer;
    font-size   : 0.88rem;
    padding     : 0;
    text-decoration: underline;
}
.collection-view-btn:hover { color: #fff; }

/* ── Library page ── */
.library-page {
    min-height  : 100vh;
    padding     : 0 0 60px 0;
    background  : #f8fafc;
}

.library-header {
    position    : sticky;
    top         : 0;
    z-index     : 100;
    background  : linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 100%);
    color       : white;
    padding     : 16px 24px;
    display     : flex;
    align-items : center;
    gap         : 16px;
    flex-wrap   : wrap;
    box-shadow  : 0 2px 12px rgba(0,0,0,0.2);
}

.library-header h2 {
    margin      : 0;
    font-size   : 1.2rem;
    font-weight : 700;
    flex        : 1;
}

.library-back-btn {
    background  : rgba(255,255,255,0.15);
    border      : 1.5px solid rgba(255,255,255,0.35);
    color       : white;
    padding     : 6px 14px;
    border-radius: 20px;
    font-size   : 0.85rem;
    font-weight : 600;
    cursor      : pointer;
    transition  : background 0.2s;
}
.library-back-btn:hover { background: rgba(255,255,255,0.28); }

.library-actions {
    display     : flex;
    gap         : 8px;
    flex-wrap   : wrap;
}

.library-count {
    padding     : 12px 24px 0;
    font-size   : 0.9rem;
    color       : #64748b;
    font-weight : 600;
}

#libraryList {
    padding     : 12px 24px;
    max-width   : 900px;
    margin      : 0 auto;
}

/* ── Folder tabs in library ── */
.lib-tabs {
    display     : flex;
    flex-wrap   : wrap;
    gap         : 6px;
    padding     : 12px 24px 0;
    max-width   : 900px;
    margin      : 0 auto;
}
.lib-tab {
    display      : flex;
    align-items  : center;
    gap          : 5px;
    padding      : 6px 14px;
    border-radius: 20px;
    border       : 1.5px solid #cbd5e1;
    background   : #fff;
    color        : #475569;
    font-size    : 0.82rem;
    font-weight  : 600;
    cursor       : pointer;
    transition   : all 0.15s;
}
.lib-tab:hover { border-color: #1d4ed8; color: #1d4ed8; }
.lib-tab-active {
    background   : #1d4ed8;
    border-color : #1d4ed8;
    color        : #fff;
}
.lib-tab-count {
    background   : rgba(0,0,0,0.12);
    border-radius: 10px;
    padding      : 0 6px;
    font-size    : 0.75rem;
}
.lib-tab-active .lib-tab-count { background: rgba(255,255,255,0.25); }
.lib-tab-menu {
    font-size    : 1.1rem;
    line-height  : 1;
    opacity      : 0.6;
    margin-left  : 2px;
    padding      : 0 2px;
    border-radius: 4px;
}
.lib-tab-menu:hover { opacity: 1; background: rgba(0,0,0,0.1); }
.lib-tab-new {
    border-style : dashed;
    color        : #64748b;
}
.lib-tab-new:hover { background: #f0f9ff; border-color: #38bdf8; color: #0284c7; }

/* ── Move-to-folder select on article card ── */
.move-folder-select {
    border       : 1.5px solid #cbd5e1;
    border-radius: 8px;
    padding      : 4px 8px;
    font-size    : 0.78rem;
    color        : #475569;
    background   : #fff;
    cursor       : pointer;
    max-width    : 160px;
}
.move-folder-select:hover { border-color: #1d4ed8; }

.remove-from-lib-btn {
    background   : #fee2e2 !important;
    color        : #991b1b !important;
    border-color : #fca5a5 !important;
}
.remove-from-lib-btn:hover {
    background   : #fca5a5 !important;
}