/* ==========================================================
SOMMAIRE POPTRACK
=============================================================
1. Scrollbar
2. Variables globales
3. Base HTML
4. Layout application
5. Navigation
6. Composants réutilisables
7. Pages : accueil / listes / détail
8. Page Profile
9. Modales
10. Responsive

Les commentaires existants sont conservés.
Ce fichier peut être amélioré petit à petit, sans tout réorganiser d'un coup.
========================================================== */

html  {
    overflow-y: auto;
    scrollbar-gutter: stable;
}
/* ==========================================================
SCROLLBAR
========================================================== */
/* Firefox */
*  {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--od-muted) 35%, transparent) transparent;
}
/* Chrome, Edge, Safari */
::-webkit-scrollbar  {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track  {
    background: transparent;
}
::-webkit-scrollbar-thumb  {
    background: color-mix(in srgb, var(--od-muted) 35%, transparent);
    border-radius: var(--radius-pill);
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: background .18s ease;
}
::-webkit-scrollbar-thumb:hover  {
    background: color-mix(in srgb, var(--od-primary) 55%, var(--od-muted));
    background-clip: padding-box;
}
::-webkit-scrollbar-corner  {
    background: transparent;
}
/* PopTrack PHP MVC v0.1 */
:root {
    /* Couleurs principales */
    --color-bg: #000;
    --color-card: #08080a;
    --color-card-light: #121216;
    --color-border: #24242a;
    --color-text: #fff;
    --color-muted: #aaa;
    --color-action: #ff321f;
    --color-action-dark: #5c100b;
    --color-progress: #ffd400;
    --color-progress-bg: rgba(255, 212, 0, .22);
    --color-pill: #8d8d91;

    /* États */
    --color-success: #35d07f;
    --color-warning: #f2b84b;
    --color-danger: #ff4938;
    --color-info: #4691ff;

    /* Rayons réutilisables */
    --radius-xxs: 2px;
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-control: 10px;
    --radius-field: 12px;
    --radius-medium: 14px;
    --radius-large: 20px;
    --radius-panel: 22px;
    --radius-dialog: 24px;
    --radius-pill: 999px;
    --radius-circle: 50%;

    /* Compatibilité avec les anciens noms */
    --radius-small: var(--radius-sm);

    /* Espacements */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 14px;
    --space-5: 18px;
    --space-6: 24px;

    /* Layout */
    --content-max-width: 560px;
    --sidebar-width: 250px;
    --bottom-nav-height: 78px;
    --header-height: 64px;
    --page-fixed-controls-height: 96px;

    /* Composants de saison */
    --season-arrow-top: 50%;
    --season-arrow-right: 16px;
    --season-arrow-translate-y: -50%;

    /* Ombres */
    --shadow-card: 0 10px 24px rgba(0, 0, 0, .28);
    --shadow-dialog: 0 24px 70px rgba(0, 0, 0, .5);
}

* {
    box-sizing:border-box
}
html,body {
    min-height:100%;
    margin:0;
    background:var(--color-bg);
    color:var(--color-text);
    font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
button,input,select {
    font:inherit
}
button {
    cursor:pointer
}
a {
    color:inherit;
    text-decoration:none
}
.app-main {
    width:min(100%, var(--content-max-width));
    margin:0 auto;
    padding:0 14px calc(var(--bottom-nav-height) + 22px)
}
.app-header {
    position:sticky;
    top:0;
    z-index:20;
    height:var(--header-height);
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    background:rgba(0,0,0,.92);
    backdrop-filter:blur(12px);
    margin:0 -14px 18px;
    padding:0 14px;
    border-bottom:1px solid rgba(255,255,255,.05)
}
.header-actions {
    justify-self:end;
    display:flex;
    gap:4px
}
.header-icon,.header-logo {
    position:relative;
    border:0;
    background:transparent;
    color:#fff;
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:var(--radius-circle);
    font-size:22px
}
.header-icon:hover {
    color:var(--color-action)
}
.logo-mark {
    width:30px;
    height:30px;
    display:grid;
    place-items:center;
    background:var(--color-action);
    color:#000;
    font-weight:1000;
    border-radius:8px 8px 8px 2px
}
.has-badge:after {
    content:'';
    position:absolute;
    top:8px;
    right:8px;
    width:9px;
    height:9px;
    border-radius:var(--radius-circle);
    background:var(--color-action);
    box-shadow:0 0 0 2px #000
}
.mobile-bottom-nav {
    position:fixed;
    left:50%;
    bottom:0;
    z-index:30;
    transform:translateX(-50%);
    width:min(100%, var(--content-max-width));
    height:var(--bottom-nav-height);
    display:grid;
    grid-template-columns:repeat(4,1fr);
    background:#070708;
    border-top:1px solid #303036;
    padding:8px 2px 10px
}
.mobile-bottom-nav a {
    border:0;
    background:transparent;
    color:#8e8e94;
    display:grid;
    justify-items:center;
    gap:3px;
    font-size:12px
}
.mobile-bottom-nav i {
    font-size:25px
}
.desktop-sidebar {
    display:none
}
.home-title {
    margin:10px 0 18px
}
.home-title h1,.page-title {
    margin:0;
    font-size:25px;
    margin-bottom: 15px;
}
.home-title p,.page-intro {
    margin:6px 0 0;
    color:var(--color-muted)
}
.stats-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:4px;
    margin-bottom:30px
}
.stat-card {
    background:linear-gradient(145deg,#17171b,#0d0d10);
    border:1px solid #202026;
    padding:11px 4px;
    text-align:center;
    border-radius:var(--radius-small)
}
.stat-card i {
    display:block;
    color:var(--color-action);
    font-size:18px;
    margin-bottom:6px
}
.stat-card strong {
    display:block;
    font-size:clamp(16px,5vw,22px)
}
.stat-card span {
    display:block;
    color:#c5c5ca;
    font-size:clamp(9px,2.6vw,12px);
    line-height:1.15;
    margin-top:4px
}
.content-section {
    margin-bottom:34px;  
}
.section-title {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin:0 2px 13px
}
.section-title h2 {
    margin:0;
    font-size:16px;
    text-transform:uppercase
}
.section-title a {
    color:var(--color-action);
    font-weight:800
}
.ticket-list {
    display:grid;
    gap:10px
}
.ticket-list.dense {
    gap:8px
}
.item-ticket {
    position:relative;
    display:grid;
    grid-template-columns: 95px 1fr auto;
    min-height: 95px;
    background:linear-gradient(120deg,#151519,#050506);
    border:1px solid #17171d;
    border-radius:var(--radius-small);
    overflow:hidden;
    padding: 10px 10px;
}
.fallback-poster,.poster-fallback,.fallback-mini,.fallback-product {
    display:grid;
    background:linear-gradient(145deg,#3b0c0a,var(--color-action));
    color:#fff;
    font-weight:1000;
    place-items:center;
    text-shadow:0 2px 10px #000
}
.fallback-poster {
    width: 100px;
    height: 118px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    background: var(--color-card-light);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-muted);
}
.fallback-mini {
    width:72px;
    height:60px
}
.fallback-product {
    width:118px;
    height:176px;
    border-radius:var(--radius-small);
    font-size:38px
}
.poster-fallback {
    position:absolute;
    inset:0;
    font-size:28px
}

/* ==========================================================
BADGE JOURS SUR LES POSTERS À VENIR
========================================================== */

.poster-card {
    position: relative;
}

.poster-count-badge {
    position: absolute;
    right: 8px;
    bottom: 8px;
    z-index: 3;

    min-width: 48px;
    min-height: 48px;

    display: grid;
    place-content: center;
    text-align: center;

    padding: 5px 8px;

    background: rgba(8, 8, 10, 0.92);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);

    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.45);
}

.poster-count-badge strong {
    display: block;

    color: var(--color-progress);
    font-size: 19px;
    font-weight: 1000;
    line-height: 1;
}

.poster-count-badge small {
    display: block;

    margin-top: 3px;

    color: var(--color-muted);
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}

.ticket-content {
    min-width:0;
    padding:10px 8px
}
.media-pill {
    display:inline-flex;
    align-items:center;
    max-width:100%;
    gap:4px;
    color:#fff;
    border:2px solid #fff;
    border-radius:var(--radius-pill);
    padding:2px 9px;
    font-size:12px;
    font-weight:900;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
}
.item-ticket h3 {
    margin:8px 0 2px;
    font-size:23px;
    line-height:1.05
}
.item-ticket p {
    margin:0;
    font-size:17px;
    line-height:1.15
}
.item-ticket small {
    display:block;
    color:var(--color-muted);
    margin-top:4px;
    font-size:12px
}
.item-ticket.is-watched {
    opacity:.72
}
.ticket-actions {
    display:flex;
    align-self:center;
    gap:6px;
    align-items:center;
    padding-right:6px;
    flex-wrap:wrap;
    justify-content:center
}
.check-btn {
    width:42px;
    height:42px;
    border:0;
    border-radius:var(--radius-circle);
    background:#efefef;
    color:#777;
    font-size:24px
}
.check-btn.is-done {
    background:#42d43b;
    color:#fff
}
.read-btn {
    border:0;
    border-radius:var(--radius-pill);
    background:var(--color-action);
    color:#fff;
    font-weight:900;
    padding:8px 10px
}
.release-list {
    background:var(--color-card);
    border:1px solid #18181e;
    border-radius:var(--radius-small);
    overflow:hidden
}
.release-row {
    min-height:72px;
    display:grid;
    grid-template-columns:54px 84px 1fr;
    align-items:center;
    border-bottom:1px solid var(--color-border)
}
.release-date {
    text-align:center
}
.release-date b {
    display:block;
    color:var(--color-action);
    font-size:12px
}
.release-date span {
    display:block;
    font-size:25px
}
.release-row strong {
    display:block;
    font-size:14px
}
.release-row p {
    margin:3px 0 0;
    color:var(--color-muted);
    font-size:13px
}
.poster-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    margin-bottom:30px
}
.poster-card,.count-card,.scan-card,.ghost-slot {
    position:relative;
    min-width:0;
    border:0;
    padding:0;
    background:#111;
    color:#fff;
    overflow:hidden;
    aspect-ratio:2/3
}
.progress-bar {
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:8px;
    background:var(--color-progress-bg)
}
.progress-bar span {
    display:block;
    height:100%;
    background:var(--color-progress)
}
.progress-bar.compact {
    position:static;
    width:80%;
    height:5px;
    margin-top:8px;
    border-radius:var(--radius-pill);
    background:#333;
    overflow:hidden
}
.progress-bar.compact span {
    background:var(--color-action)
}
.sub-pill {
    width:max-content;
    max-width:100%;
    margin:15px auto 20px;
    padding:8px 19px;
    background:var(--color-pill);
    border-radius:var(--radius-pill);
    text-transform:uppercase;
    font-weight:900;
    text-align:center
}
.sub-pill.wide {
    padding-inline:24px
}
.count-card:after,.scan-card:after {
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.78))
}
.count-card strong,.count-card span,.scan-card strong,.scan-card span {
    position:absolute;
    z-index:1;
    left:13px;
    text-shadow:0 3px 12px #000
}
.count-card strong {
    bottom:42px;
    font-size:clamp(24px,9vw,39px)
}
.count-card span {
    bottom:17px;
    font-size:clamp(14px,5vw,22px);
    font-weight:900
}
.scan-card span {
    top:12px;
    background:var(--color-action);
    padding:4px 8px;
    border-radius:var(--radius-pill);
    font-size:11px;
    font-weight:900
}
.scan-card strong {
    bottom:18px;
    font-size:clamp(18px,5vw,25px)
}
.ghost-slot {
    visibility:hidden
}
.watched-badge {
    position:absolute;
    right:8px;
    top:8px;
    width:30px;
    height:30px;
    border-radius:var(--radius-circle);
    display:grid;
    place-items:center;
    background:#42d43b
}
.top-tabs {
    display:grid;
    grid-template-columns:1fr 1fr;
    margin:0 -14px 18px;
    border-bottom:1px solid #333
}
.tab-btn {
    border:0;
    background:#000;
    color:#aaa;
    padding:17px 0 15px;
    font-size:22px;
    font-weight:900;
    text-transform:uppercase;
    border-bottom:4px solid transparent;
    text-align:center;
}
.tab-btn.is-active {
    color:#fff;
    border-bottom-color:#fff
}
.view-tools {
    display:flex;
    justify-content:flex-end;
    gap:8px;
    margin-bottom:14px
}
.layout-btn {
    border:0;
    width:40px;
    height:40px;
    border-radius:var(--radius-small);
    background:#151515;
    color:#bcbcc1;
    font-size:18px
}
.layout-btn.is-active {
    color:var(--color-progress)
}
.tab-panel,.list-mode {
    display:none
}
.tab-panel.is-active,.list-mode.is-active {
    display:block
}
body.is-list-mode .tab-panel {
    display:none!important
}
.pending-timeline {
    margin:6px 0 24px;
    padding:14px;
    border:1px solid var(--color-border);
    border-radius:var(--radius-medium);
    background:#0b0b0e;
    max-height:190px;
    overflow:auto
}
.pending-timeline h2 {
    margin:0 0 10px;
    font-size:15px;
    text-transform:uppercase
}
.pending-timeline article {
    display:grid;
    grid-template-columns:18px 1fr;
    gap:8px;
    padding:9px 0;
    border-bottom:1px solid #202026
}
.pending-timeline .dot {
    width:9px;
    height:9px;
    background:var(--color-action);
    border-radius:var(--radius-circle);
    margin-top:5px
}
.pending-timeline small {
    grid-column:2;
    color:var(--color-muted)
}
.back-button {
    display:inline-flex;
    align-items:center;
    gap:7px;
    border:0;
    background:transparent;
    color:#fff;
    font-size:16px;
    margin-bottom:16px
}
.product-hero {
    display:grid;
    grid-template-columns:118px 1fr;
    gap:15px;
    margin-bottom:24px
}
.product-info h1 {
    margin:9px 0 7px;
    font-size:31px
}
.product-info p {
    color:var(--color-muted);
    margin:0 0 12px;
    line-height:1.35;
    font-size:14px
}
.product-tag {
    display:inline-flex;
    background:var(--color-action);
    border-radius:var(--radius-pill);
    padding:4px 10px;
    font-size:12px;
    font-weight:900
}
.product-progress {
    position:static;
    height:8px;
    border-radius:var(--radius-pill);
    overflow:hidden;
    margin-bottom: 10px;
}
.product-tabs,.filter-pills {
    display:flex;
    gap:8px;
    overflow-x:auto;
    padding-bottom:8px;
    margin-bottom:20px
}
.product-tabs a,.product-tabs button,.filter-pills button {
    border:0;
    border-radius:var(--radius-pill);
    padding:8px 14px;
    background:#151515;
    color:#aaa;
    font-weight:800;
    white-space:nowrap
}
.product-tabs .is-active {
    background:var(--color-action-dark);
    color:var(--color-action)
}
.manga-list,.profile-actions,.settings-list,.history-list {
    display:grid;
    gap:10px;
    margin-top:18px
}
.manga-row {
    display:grid;
    grid-template-columns: 95px 1fr auto;
    gap:12px;
    align-items:center;
    background:linear-gradient(120deg,#151519,#050506);
    border:1px solid #17171d;
    border-radius:var(--radius-small);
    padding:10px
}
.manga-row .fallback-mini {
    width: 90px;
    height: 138px;
    border-radius: var(--radius-small);
}
.manga-row h3 {
    margin:0 0 4px
}
.manga-row p {
    margin:0;
    color:var(--color-muted);
    font-size:14px
}
.manga-row small {
    display:block;
    margin-top:5px;
    font-size:12px
}

.manga-row small .next-release-date{
    color:var(--color-action);
    font-weight:900;
}

.volume-grid {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:10px
}
.volume-card {
    position:relative;
    background:#121216;
    border:1px solid var(--color-border);
    border-radius:var(--radius-medium);
    padding:14px
}
.volume-card strong {
    display:block;
    font-size:30px
}
.volume-card span {
    display:block;
    color:var(--color-muted);
    margin-bottom:10px
}
.volume-card label {
    display:flex;
    gap:8px;
    margin-top:6px;
    color:#ddd
}
.volume-card.is-missing {
    border-color:rgba(255,50,31,.55)
}
.volume-select {
    position:absolute;
    top:10px;
    right:10px
}
.bulk-actions {
    display:flex;
    gap:8px;
    margin-bottom:16px;
    flex-wrap:wrap
}
.add-btn {
    border:0;
    border-radius:var(--radius-pill);
    background:var(--color-action);
    color:#fff;
    padding:8px 12px;
    font-weight:900
}
.add-btn.secondary {
    background:#242429
}
.search-box {
    display:flex;
    gap:10px;
    margin:16px 0 20px;
    padding:12px 15px;
    border-radius:var(--radius-medium);
    background:#202024
}
.search-box input,.settings-list input,.fake-select {
    width:100%;
    border:1px solid #333;
    background:#08080a;
    color:#fff;
    border-radius:var(--radius-control);
    padding:11px
}
input[type="checkbox"] {
    width: 7%;
    margin: 10px;
    height: 24px;
}
.profile-actions a {
    display:grid;
    grid-template-columns:30px 1fr 20px;
    align-items:center;
    background:#121216;
    border:1px solid var(--color-border);
    color:#fff;
    border-radius:var(--radius-medium);
    padding:15px;
    text-align:left
}
.profile-stats {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:9px;
    margin-top:18px;
    margin-bottom: 34px;
}
.profile-stats article,.settings-list article {
    background:var(--color-card-light);
    border:1px solid var(--color-border);
    border-radius:var(--radius-medium);
    padding:18px
}
.profile-stats strong {
    display:block;
    font-size:32px
}
.profile-stats span,.settings-list p {
    color:var(--color-muted)
}
.history-list h2 {
    margin:18px 0 4px;
    font-size:16px;
    color:var(--color-muted)
}
.history-list article {
    display:grid;
    grid-template-columns:34px 1fr;
    align-items:center;
    background:#121216;
    border:1px solid var(--color-border);
    border-radius:var(--radius-medium);
    padding:12px
}
.history-list i {
    color:var(--color-action);
    font-size:22px
}
.history-list span {
    display:block;
    color:var(--color-muted);
    font-size:13px
}
.modal-backdrop,.confirm-modal {
    position:fixed;
    inset:0;
    z-index:50;
    display:none;
    background:rgba(0,0,0,.66)
}
.modal-backdrop.is-open,.confirm-modal.is-open {
    display:block
}
.notifications-panel {
    position:absolute;
    left:50%;
    bottom:0;
    transform:translateX(-50%);
    width:min(100%, var(--content-max-width));
    max-height:80vh;
    overflow:auto;
    background:#08080a;
    border:1px solid #2a2a30;
    border-radius:24px 24px 0 0;
    padding:16px
}
.modal-header {
    display:flex;
    justify-content:space-between
}
.modal-header button,.delete-notif {
    border:0;
    background:#242429;
    color:#fff;
    border-radius:var(--radius-circle);
    width:32px;
    height:32px
}
.notification-list {
    display:grid;
    gap:10px
}
.notification-item {
    position:relative;
    background:#121216;
    border:1px solid #202026;
    border-radius:var(--radius-medium);
    padding:14px 44px 14px 14px
}
.notification-item p {
    color:var(--color-muted)
}
.delete-notif {
    position:absolute;
    top:10px;
    right:10px;
    width:28px;
    height:28px
}
.confirm-card {
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:min(92%,420px);
    background:#101014;
    border:1px solid var(--color-border);
    border-radius:var(--radius-panel);
    padding:20px
}
.confirm-card p {
    color:var(--color-muted)
}
.confirm-actions {
    display:flex;
    gap:8px;
    justify-content:flex-end
}
@media(min-width:900px) {
    .app-layout {
        display:grid;
        grid-template-columns:250px 1fr
    }
    .desktop-sidebar {
        display:block;
        position:sticky;
        top:0;
        height:100vh;
        padding:22px;
        background:#070708;
        border-right:1px solid var(--color-border)
    }
    .sidebar-logo {
        display:flex;
        align-items:center;
        gap:10px;
        margin-bottom:34px;
        font-size:23px
    }
    .sidebar-nav {
        display:grid;
        gap:8px
    }
    .sidebar-nav a {
        border:0;
        display:flex;
        align-items:center;
        gap:11px;
        padding:13px 14px;
        border-radius:var(--radius-medium);
        background:transparent;
        color:var(--color-muted);
        text-align:left;
        font-weight:700
    }
    .sidebar-nav a.is-active,
    .sidebar-nav a:hover {
        color: var(--color-action);
        background: rgba(255, 50, 31, .09);
    }

    .app-main {
        width:min(100%,980px);
        padding-bottom:40px
    }
    .mobile-bottom-nav {
        display:none
    }
    .stats-grid {
        gap:10px
    }
    .poster-grid {
        gap:12px
    }
    .item-ticket {
        grid-template-columns:150px 1fr auto;
        min-height:124px
    }
    .fallback-poster {
        width: 90px;
        height: 138px;
        border-radius:var(--radius-small);
    }
    .fallback-product {
        width:180px;
        height:270px
    }
    .product-hero {
        grid-template-columns:180px 1fr;
        gap:24px
    }
    .volume-grid {
        grid-template-columns:repeat(4,1fr)
    }
    .notifications-panel {
        right:28px;
        left:auto;
        bottom:28px;
        transform:none;
        width:420px;
        border-radius:24px
    }
}
/* v0.2 fiche détail universelle */
.product-poster  {
    width: 118px;
    height: 176px;
    border-radius: var(--radius-small);
    object-fit: cover;
    display: block;
}
.ticket-poster,
.item-ticket > img  {
    width: 90px;
    height: 138px;
    border-radius:var(--radius-small);
    object-fit: cover;
    display: block;
}
.season-accordion  {
    display: grid;
    gap: 12px;
}
.season-block  {
    background: #101014;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    overflow: hidden;
}
.season-block summary  {
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px;
}
.season-block summary::-webkit-details-marker  {
    display: none;
}
.season-block summary::after  {
    content: "⌄";
    color: var(--color-action);
    font-size: 22px;
}
.season-block[open] summary::after  {
    content: "⌃";
}
/*
.season-block .ticket-list  {
    padding: 0 10px 12px;
}
*/
@media(min-width:900px)  {
    .product-poster  {
        width: 180px;
        height: 270px;
    }
    .ticket-poster,
    .item-ticket > img  {
        width: 90px;
        height: 138px;
    }
}
/* DB Lab */
.db-lab-form  {
    display: flex;
    gap: 10px;
    align-items: end;
    flex-wrap: wrap;
}
.db-lab-form label  {
    display: grid;
    gap: 6px;
    color: var(--color-muted);
    min-width: 180px;
}
.db-table-wrap  {
    overflow-x: auto;
}
.db-table  {
    width: 100%;
    border-collapse: collapse;
    min-width: 820px;
}
.db-table th,
.db-table td  {
    border-bottom: 1px solid var(--color-border);
    padding: 9px 8px;
    text-align: left;
    font-size: 13px;
}
.db-table th  {
    color: var(--color-muted);
    text-transform: uppercase;
    font-size: 11px;
}
.small-btn  {
    display: inline-flex;
    padding: 5px 8px;
    font-size: 12px;
}
pre  {
    overflow: auto;
    max-height: 480px;
    background: #050506;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
    padding: 12px;
}
pre  {
    max-width: 100%;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: auto;
}
.settings-list article  {
    min-width: 0;
}
.app-main  {
    overflow-x: hidden;
}
.db-details  {
    background: var(--color-card-light);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    padding: 14px;
    margin-top: 12px;
    min-width: 0;
}
.db-details summary  {
    cursor: pointer;
    font-weight: 900;
    color: var(--color-action);
}
.db-details pre  {
    margin-top: 12px;
}
.mobile-bottom-nav a.is-active  {
    color: var(--color-action);
}

/* v0.3 corrections & features */
@media (min-width: 900px) {
    .header-home-icon {
        visibility: hidden;
    }
}

.sidebar-nav a.is-active,
.sidebar-nav a:hover {
    color: var(--color-action);
    background: rgba(255, 50, 31, .09);
}

.mobile-bottom-nav a.is-active {
    color: var(--color-action);
}

.header-icon.is-active {
    color: var(--color-action);
}

.search-tabs {
    grid-template-columns: repeat(4, 1fr);
}

.search-tabs .tab-btn {
    display: grid;
    place-items: center;
    text-decoration: none;
    font-size: clamp(13px, 3.8vw, 20px);
}

.real-search {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
}

.real-search button {
    border: 0;
    background: var(--color-action);
    color: #fff;
    font-weight: 900;
    border-radius: var(--radius-pill);
    padding: 9px 12px;
}

.search-results {
    display: grid;
    gap: 12px;
    margin-top: 16px;
}

.search-result-card {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 12px;
    background: var(--color-card-light);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    padding: 12px;
}

.search-result-card img {
    width: 92px;
    height: 138px;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

.search-result-card h3 {
    margin: 8px 0 4px;
}

.tmdb-detail-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
}

.tmdb-detail-actions .inline-form {
    margin: 0;
}

.tmdb-detail-actions .add-btn,
.tmdb-detail-actions .secondary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

@media (max-width: 768px) {
    .tmdb-detail-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .tmdb-detail-actions .add-btn,
    .tmdb-detail-actions .secondary-btn {
        width: 100%;
    }
}


.small-muted,
.api-debug-url {
    color: var(--color-muted);
    font-size: 13px;
}

.inline-form {
    margin-top: 14px;
}

.season-preview-row,
.source-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    border-top: 1px solid var(--color-border);
    padding: 10px 0;
}

.season-preview-row span,
.source-row small {
    display: block;
    color: var(--color-muted);
    font-size: 13px;
}

.settings-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 10px 0 4px;
    margin-bottom: 12px;
}

.settings-tabs a {
    background: #151515;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    padding: 8px 12px;
    color: #ddd;
    white-space: nowrap;
    font-weight: 800;
}

.settings-form {
    display: grid;
    gap: 9px;
    margin-top: 12px;
}

.settings-form label,
.settings-list label {
    color: var(--color-muted);
    font-size: 13px;
    font-weight: 700;
}


/* Lien vers le site officiel du service sélectionné dans l'onglet Sources. */
.source-provider-link {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: -2px;
    font-size: 13px;
    color: var(--color-muted);
}

.source-provider-link[hidden] {
    display: none;
}

.source-provider-link a {
    color: var(--color-action);
    overflow-wrap: anywhere;
    text-decoration: none;
}

.source-provider-link a:hover {
    text-decoration: underline;
}

.checkbox-line {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff !important;
}

.settings-details,
.db-details {
    background: var(--color-card-light);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    padding: 14px;
    margin-top: 12px;
    min-width: 0;
}

.settings-details summary,
.db-details summary {
    cursor: pointer;
    font-weight: 900;
    color: var(--color-action);
}

.settings-details summary span {
    display: block;
    color: var(--color-muted);
    font-size: 12px;
    margin-top: 3px;
}

.provider-template-list {
    display: grid;
    gap: 8px;
}

pre {
    max-width: 100%;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: auto;
}

.settings-list article,
.app-main {
    min-width: 0;
}

.db-table-wrap {
    overflow-x: auto;
}


/* PopTrack v0.4 */
.product-tag {
    background: transparent !important;
    color: var(--color-action);
    border: 1px solid var(--color-action);
}

.poster-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius:var(--radius-small);
}

.search-result-card p {
    margin-bottom: 8px;
}

.search-card-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}

.empty-state {
    background: var(--color-card-light);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    padding: 14px;
    color: var(--color-muted);
}

.settings-menu {
    margin-bottom: 22px;
}

.settings-menu a {
    display: grid;
    grid-template-columns: 30px 1fr 20px;
    align-items: center;
    background: #121216;
    border: 1px solid var(--color-border);
    color: #fff;
    border-radius: var(--radius-medium);
    padding: 15px;
    text-align: left;
}


/* PopTrack v0.5 */
textarea {
    width: 100%;
    border: 1px solid var(--color-border);
    background: #08080a;
    color: var(--color-text);
    border-radius: var(--radius-small);
    padding: 10px;
    resize: vertical;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
}

textarea:focus {
    outline: none;
    border-color: var(--color-action);
}


/* PopTrack v0.6 */
.list-mode-panel {
    display: none;
}

.list-mode-panel.is-active {
    display: grid;
    gap: 10px;
}

.variable-rows {
    display: grid;
    gap: 8px;
}

.variable-row {
    display: grid;
    grid-template-columns: 1fr 1fr 42px;
    gap: 8px;
    align-items: center;
}

.icon-btn {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: #0b0b0d;
    color: var(--color-action);
}

.variables-builder {
    display: grid;
    gap: 8px;
}

.mobile-bottom-nav {
    grid-template-columns: repeat(4,1fr);
}


/* PopTrack v0.6 additions */
.poster-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius:var(--radius-small);
}


/* PopTrack v0.7 */
.mobile-bottom-nav {
    grid-template-columns: repeat(4, 1fr);
}

.mobile-bottom-nav a {
    font-size: 10px;
}

.mobile-bottom-nav i {
    font-size: 21px;
}

.placeholder-state {
    min-height: 130px;
    display: grid;
    align-content: center;
    gap: 6px;
    text-align: center;
}

.placeholder-state strong {
    color: var(--color-text);
}

.placeholder-state span {
    color: var(--color-muted);
}

.ticket-actions form {
    margin: 0;
}


/* ==========================================================
PAGE PROFILE
=============================================================
Styles uniquement utilisés sur /profile et /profile/completed.
========================================================== */

/*
 * Grille des affiches du profil.
 *
 * On reprend l'esprit de .empty-state / .placeholder-state :
 * - fond carte ;
 * - bordure ;
 * - arrondis ;
 * - espace interne.
 *
 * Important :
 * cette classe est volontairement séparée de .poster-grid pour ne pas
 * modifier les grilles de toute l'application.
 */
.profile-poster-grid {
    min-height: 130px;
    background: var(--color-card-light);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    padding: 14px;
}

/*
 * Quand un média est archivé manuellement mais pas réellement terminé,
 * on le garde visible mais en gris.
 */
.poster-card.is-archived-incomplete {
    filter: grayscale(1);
    opacity: .55;
}

/*
 * Filtre de la page /profile/completed.
 * La checkbox passe sous la searchbox.
 */
.profile-completed-filter {
    gap: 10px;
}

.profile-archive-toggle {
    grid-column: 1 / -1;
    justify-content: flex-start;
    font-size: 13px;
    color: var(--color-muted);
}


/* ==========================================================
VISIONNAGE AJAX / SAISONS
=============================================================
Styles ajoutés pour :
- progressbar dans les summaries de saison ;
- centrage manuel des flèches d'accordéon ;
- popup de fin de média ;
- confettis légers.
========================================================== */


.season-block summary {
    position: relative;
    display: grid;
    align-items: center;
    padding-right: 44px;
}

.season-block summary::after {
    position: absolute;
    top: var(--season-arrow-top);
    right: var(--season-arrow-right);
    transform: translateY(var(--season-arrow-translate-y));
    display: grid;
    place-items: center;
    line-height: 1;
}

.season-summary-content {
    display: grid;
    gap: 7px;
    width: 100%;
}

.season-summary-progress {
    height: 5px;
    width: 100%;
}

.poptrack-result-popup {
    position: fixed;
    left: 50%;
    bottom: calc(var(--bottom-nav-height) + 18px);
    z-index: 100;
    width: min(calc(100% - 28px), 420px);
    transform: translate(-50%, 20px);
    opacity: 0;
    pointer-events: none;
    background: var(--color-card-light);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    padding: 16px;
    text-align: center;
    box-shadow: 0 18px 60px rgba(0,0,0,.45);
    transition: opacity .22s ease, transform .22s ease;
}

.poptrack-result-popup.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.poptrack-result-popup strong {
    display: block;
    color: var(--color-text);
    font-size: 17px;
    margin-bottom: 5px;
}

.poptrack-result-popup span {
    display: block;
    color: var(--color-muted);
    font-size: 13px;
}

.confetti-layer {
    position: fixed;
    inset: 0;
    z-index: 99;
    pointer-events: none;
    overflow: hidden;
}

.confetti-layer i {
    position: absolute;
    top: -16px;
    width: 8px;
    height: 14px;
    background: var(--color-action);
    border-radius: var(--radius-xxs);
    transform: rotate(var(--rotate));
    animation: poptrack-confetti 1.5s ease-in forwards;
}

.confetti-layer i:nth-child(3n) {
    background: var(--color-progress);
}

.confetti-layer i:nth-child(4n) {
    background: #fff;
}

@keyframes poptrack-confetti {
    0% {
        transform: translateY(0) rotate(var(--rotate));
        opacity: 1;
    }

    100% {
        transform: translateY(110vh) rotate(calc(var(--rotate) + 420deg));
        opacity: 0;
    }
}

.inline-form {
    display: inline-grid;
    margin: 6px 8px 0 0;
}

.add-btn.danger {
    background: #7b1414;
    color: #fff;
}


/* ==========================================================
POPTRACK v0.9.1
=============================================================
- Switch automatique dans /profile/completed.
- Boutons film Voir/Vu côte à côte.
========================================================== */

.profile-switch {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--color-muted);
    font-size: 13px;
    cursor: pointer;
    user-select: none;
}

.profile-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.profile-switch-ui {
    position: relative;
    width: 44px;
    height: 24px;
    border-radius: var(--radius-pill);
    background: #303036;
    border: 1px solid var(--color-border);
    flex: 0 0 auto;
    transition: background .18s ease, border-color .18s ease;
}

.profile-switch-ui::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: var(--radius-circle);
    transform: translateY(-50%);
    background: #fff;
    transition: left .18s ease;
}

.profile-switch input:checked + .profile-switch-ui {
    background: var(--color-action);
    border-color: var(--color-action);
}

.profile-switch input:checked + .profile-switch-ui::after {
    left: 21px;
}

.movie-info-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 12px;
}

.movie-info-actions form {
    margin: 0;
}


/* ==========================================================
POPTRACK v0.9.2
=============================================================
- Badge "X jours" pour les épisodes à venir.
- Liste À venir par jour de semaine.
========================================================== */

.day-badge {
    width: 50px;
    min-height: 50px;
    display: grid;
    place-items: center;
    align-content: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: linear-gradient(145deg, #17171b, #0d0d10);
    color: var(--color-progress);
    line-height: 1;
}

.day-badge strong {
    display: block;
    font-size: 19px;
    font-weight: 1000;
}

.day-badge small {
    display: block;
    margin-top: 3px;
    color: var(--color-muted);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.upcoming-ticket-list {
    margin-bottom: 18px;
}

/* PopTrack v0.10.1 — Réglages et templates de sources */
.settings-intro {
    color: var(--color-muted);
    margin: -8px 0 16px;
    line-height: 1.55;
}

.settings-sections {
    display: grid;
    gap: 18px;
}

.settings-section-card {
    scroll-margin-top: 20px;
}

.settings-section-heading {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 14px;
    margin-bottom: 14px;
}

.settings-section-heading h2 {
    margin: 2px 0 5px;
}

.settings-section-heading p {
    margin: 0;
}

.settings-kicker {
    color: var(--color-action);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 11px;
    font-weight: 900;
}

.settings-section-icon {
    color: var(--color-action);
    font-size: 28px;
}

.settings-help-box,
.settings-variable-legend,
.template-analysis {
    background: #0b0b0e;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    padding: 12px;
    color: var(--color-muted);
}

.settings-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 12px;
}

.settings-full-row {
    grid-column: 1 / -1;
}

.field-help {
    display: block;
    color: var(--color-muted);
    margin-top: 5px;
    font-size: 12px;
}

.settings-variable-legend {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.settings-variable-legend div,
.template-analysis div {
    display: grid;
    gap: 4px;
}

.settings-variable-legend strong,
.template-analysis strong {
    color: #fff;
    font-size: 12px;
}

.settings-variable-legend span,
.template-analysis span {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    overflow-wrap: anywhere;
}

.template-analysis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.template-preview-line {
    grid-column: 1 / -1;
}

.template-preview-line code {
    display: block;
    color: var(--color-action);
    overflow-wrap: anywhere;
    line-height: 1.5;
}

.variable-row .js-var-key[readonly] {
    opacity: .8;
    cursor: default;
}

@media (max-width: 700px) {
    .settings-form-grid,
    .settings-variable-legend,
    .template-analysis {
        grid-template-columns: 1fr;
    }

    .settings-full-row,
    .template-preview-line {
        grid-column: 1;
    }
}


/* v0.10.1 - Sources de saison et header mobile fixe */
.season-summary-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.season-source-links {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
}

.season-source-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 9px;
    border-radius: var(--radius-pill);
    background: rgba(255, 50, 31, .12);
    color: var(--color-action);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.season-source-link:hover {
    background: rgba(255, 50, 31, .22);
}

@media (max-width: 899px) {
    .app-main {
        padding-top: calc(var(--header-height) + 18px);
    }

    .app-header {
        position: fixed;
        top: 0;
        left: 50%;
        z-index: 50;
        width: min(100%, 560px);
        transform: translateX(-50%);
        margin: 0;
        padding: 0 14px;
    }

    .season-summary-line {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }

    .season-source-links {
        justify-content: flex-start;
    }
}

/* v0.10.1 — Journal des imports et synchronisations TMDB */
.sync-last-status {
    margin-bottom: 18px;
}

.sync-history-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin: 18px 0 12px;
}

.sync-history-heading h3,
.sync-history-heading p {
    margin: 0;
}

.sync-history-heading p {
    margin-top: 4px;
    color: var(--color-muted);
}

.sync-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 76px;
    padding: 5px 9px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

.sync-status--success {
    color: #76d59a;
    background: rgba(65, 180, 105, .12);
    border-color: rgba(65, 180, 105, .34);
}

.sync-status--warning,
.sync-status--running {
    color: #f5c96d;
    background: rgba(226, 170, 56, .12);
    border-color: rgba(226, 170, 56, .34);
}

.sync-status--error {
    color: #ff8276;
    background: rgba(255, 50, 31, .12);
    border-color: rgba(255, 50, 31, .34);
}

.sync-log-table td {
    vertical-align: top;
}

.sync-log-table small {
    color: var(--color-muted);
}

.db-sync-log-section {
    scroll-margin-top: 90px;
}

.db-log-filter-form {
    align-items: flex-end;
}

.sync-log-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 18px;
}

.sync-log-meta div {
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: #0b0b0e;
}

.sync-log-meta dt {
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.sync-log-meta dd {
    margin: 5px 0 0;
    overflow-wrap: anywhere;
}

@media (max-width: 700px) {
    .sync-history-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .sync-log-meta {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 460px) {
    .sync-log-meta {
        grid-template-columns: 1fr;
    }
}

.flash-stack {
    display: grid;
    gap: 8px;
    margin: 0 0 16px;
}

.flash-message {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 11px 13px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    font-weight: 700;
}

.flash-message--success {
    color: #9ce0b4;
    background: rgba(65, 180, 105, .12);
    border-color: rgba(65, 180, 105, .34);
}

.flash-message--error {
    color: #ff9a91;
    background: rgba(255, 50, 31, .12);
    border-color: rgba(255, 50, 31, .34);
}

/* Synchronisation TMDB */
.sync-control-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}
.sync-control-grid .settings-help-box { margin: 0; }
.sync-settings-form { display: grid; gap: 12px; }
.sync-settings-form label { display: grid; gap: 6px; }
.sync-settings-form input,
.cron-url-row input {
    width: 100%;
    min-height: 42px;
}
.cron-url-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}
.cron-security-box { margin: 16px 0; }
.media-sync-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 16px;
}
.media-sync-form small { width: 100%; }
@media (max-width: 768px) {
    .sync-control-grid { grid-template-columns: 1fr; }
    .cron-url-row { grid-template-columns: 1fr; }
    .cron-url-row .secondary-btn { width: 100%; }
}

/* =========================================================
   Manga Passion - fondations v0.11.0 (15 juillet 2026)
   ========================================================= */
.page-heading-actions {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    margin-bottom:16px;
}
.page-heading-actions--compact { justify-content:flex-end; }
.manga-row-cover {
    width: 90px;
    height: 138px;
    border-radius:var(--radius-small);
    object-fit:cover;
    background:#111;
}
.is-archived { 
    /*
    filter:grayscale(1); 
    opacity:.72; 
    */
    filter: grayscale(0.7);
}

.release-cover {
    width:58px;
    height:82px;
    border-radius:6px;
    object-fit:cover;
}
.pagination-actions {
    display:flex;
    justify-content:center;
    gap:10px;
    margin-top:18px;
}
.volume-preview-list {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:12px;
}
.volume-preview-list span {
    border:1px solid var(--color-border);
    border-radius:var(--radius-pill);
    padding:6px 10px;
    color:var(--color-muted);
}
@media (max-width:700px) {
    .page-heading-actions { align-items:stretch; flex-direction:column; }
    .page-heading-actions .add-btn { width:100%; justify-content:center; }
}


/* Manga Passion : mise en avant des volumes marqués type=1 par l’API. */
.volume-preview-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.latest-volume-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: var(--radius-xs);
    background: var(--color-action-dark);
    color: #fff;
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1;
    margin-left: 5px;
}


/* ==========================================================
   PopTrack v0.11.0 — Tomes à venir
   ========================================================== */
.ticket-poster.is-upcoming-volume,
.fallback-poster.is-upcoming-volume {
    filter: grayscale(1);
    opacity: 0.58;
}

.js-volume-owned-toggle.is-upcoming-purchasable:not(.is-done) {
    /*
     * Aspect volontairement atténué : la date Manga Passion correspond
     * souvent au marché allemand, mais le bouton reste cliquable pour une
     * collection française ou japonaise.
     */
    opacity: 0.38;
}

.js-volume-owned-toggle.is-upcoming-purchasable:not(.is-done):hover,
.js-volume-owned-toggle.is-upcoming-purchasable:not(.is-done):focus-visible {
    opacity: 0.68;
}

.item-ticket.is-owned {
/*    border-color: rgba(66, 212, 59, 0.45); */
}


/* Sous-menu des fournisseurs de synchronisation — v0.11.0 */
.settings-menu a span {
    min-width: 0;
}
.settings-menu a span strong,
.settings-menu a span small {
    display: block;
}
.settings-menu a span small {
    margin-top: 4px;
    color: var(--color-muted);
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.3;
}

/* v0.11.0 — outils propres à la bibliothèque Manga. */
.manga-archive-switch {
    margin: 0;
    white-space: nowrap;
}

.manga-price-settings .compact-form {
    max-width: 420px;
}

/* Profil : statistiques regroupées par paires logiques. */
.profile-stats-paired{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 20px;
    margin-top: 10px;
}

.profile-stat-card{
    background:var(--color-card-light);
    border:1px solid var(--color-border);
    border-radius:var(--radius-medium);
    padding:18px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
}

.profile-stat-card i{
    font-size:1.8rem;
    font-weight:800;
    color:var(--color-title);
    line-height:1;
}

.profile-stat-card strong{
    font-size:1.8rem;
    font-weight:800;
    color:var(--color-title);
    line-height:1;
    margin-top: 20px;
}

.profile-stat-card span{
    margin-top:8px;
    font-size:.9rem;
    color:var(--color-text-light);
}

/* ==========================================================
MANGAS — états et outils de tri (v0.11.0)
========================================================== */

.manga-view-tools {
    justify-content: stretch;
}

.manga-view-form {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.manga-sort-field {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-muted);
    font-size: .86rem;
}

.manga-sort-field select {
    min-height: 40px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: var(--color-card-light);
    color: var(--color-text);
    padding: 0 34px 0 12px;
}

.manga-row-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
}

.manga-row-states {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 5px;
}

.manga-state-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 7px;
    border-radius: var(--radius-xs);
    font-size: .68rem;
    font-style: normal;
    font-weight: 800;
    line-height: 1;
}

.manga-state-badge.is-current {
    background: color-mix(in srgb, var(--color-action) 18%, transparent);
    color: var(--color-action);
}

.manga-state-badge.is-complete {
    background: color-mix(in srgb, #35c768 18%, transparent);
    color: #6ee394;
}

.manga-state-badge.is-archived {
    background: rgba(255, 255, 255, .1);
    color: #b8b8be;
}

/*
 * Une collection complète reste pleinement visible.
 * Seul l'archivage volontaire applique le traitement gris existant.
 */
.manga-row.is-complete:not(.is-archived) {
    border-color: color-mix(in srgb, #35c768 35%, var(--color-border));
}

@media (max-width: 480px) {
    .manga-view-form,
    .manga-sort-field {
        align-items: stretch;
        flex-direction: column;
    }

    .manga-sort-field select {
        width: 100%;
    }

    .manga-archive-switch {
        align-self: flex-start;
    }
}

/* ==========================================================
SCANS — CARTE PAR ŒUVRE, ALIGNÉE SUR /SERIES
========================================================== */
.poster-card .scan-chapter-overlay {
    position: absolute;
    left: 10px;
    bottom: 18px;
    z-index: 3;
    max-width: calc(100% - 20px);
    color: #fff;
    font-size: clamp(0.8rem, 1vw, 1.8rem);
    font-weight: 1000;
    line-height: 1;
    text-shadow: 0 3px 14px rgba(0, 0, 0, .95);
}

.poster-card:has(.scan-chapter-overlay)::after {
    content: '';
    position: absolute;
    inset: 45% 0 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .82));
}

.poster-card:has(.scan-chapter-overlay) .progress-bar {
    z-index: 4;
}

/* =========================================================
   Lecture simplifiée (/scans)
   ========================================================= */
.scan-reading-dashboard {
    display: grid;
    gap: 18px;
}

.scan-progress-card {
    padding: 18px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    background: var(--color-card-light);
}

.scan-progress-controls {
    display: grid;
    grid-template-columns: 52px minmax(0, 220px) 52px;
    align-items: end;
    justify-content: center;
    gap: 12px;
    margin: 20px 0;
}

.scan-progress-step {
    min-height: 52px;
    border: 0;
    border-radius: var(--radius-circle);
    background: var(--color-action);
    color: #fff;
    font-size: 1.25rem;
    cursor: pointer;
}

.scan-chapter-input-wrap {
    display: grid;
    gap: 8px;
    text-align: center;
    font-weight: 700;
}

.scan-chapter-input-wrap input {
    width: 100%;
    min-height: 52px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: var(--color-card-light);
    color: inherit;
    font-size: 1.55rem;
    font-weight: 900;
    text-align: center;
}

.scan-progress-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.scan-progress-summary strong {
    font-size: 1.35rem;
}

.scan-progress-summary > span {
    font-weight: 900;
    color: var(--color-action);
}

.scan-read-next {
    display: inline-flex;
    margin-top: 12px;
}

.scan-progress-form article {
    display: grid;
    gap: 16px;
}

.scan-progress-settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.scan-progress-settings-grid label {
    display: grid;
    gap: 7px;
}

.scan-reading-stats article strong {
    font-size: 1.15rem;
}

@media (max-width: 700px) {
    .scan-progress-settings-grid {
        grid-template-columns: 1fr;
    }

    .scan-progress-controls {
        grid-template-columns: 46px minmax(0, 1fr) 46px;
    }
}


/* =========================================================
   Champs select — apparence commune à toute l'application
   ========================================================= */
select:not([multiple]) {
    appearance: none;
    -webkit-appearance: none;
    min-height: 44px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background-color: var(--color-card-light);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m1 1 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    color: var(--color-text);
    padding: 10px 42px 10px 13px;
    outline: none;
}

select:not([multiple]):focus {
    border-color: var(--color-action);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-action) 20%, transparent);
}

select:not([multiple]):disabled {
    cursor: not-allowed;
    opacity: .55;
}

.timeline-pill {
    min-width: 132px;
    margin-top: 20px;
    margin-bottom: 18px;
}


/* v0.13.0 — événements, notifications et Web Push */
.header-notification-count {
    position:absolute;
    top:2px;
    right:0;
    min-width:18px;
    height:18px;
    padding:0 5px;
    display:grid;
    place-items:center;
    border:2px solid #000;
    border-radius:var(--radius-pill);
    background:var(--color-action);
    color:#fff;
    font-size:.65rem;
    font-weight:900;
    line-height:1;
}
.header-notification-count.is-hidden {
    display:none;
}
.js-open-notifications.has-badge::after {
    display:none;
}

.modal-header {
    align-items:flex-start;
    gap:14px;
    margin-bottom:14px;
}
.modal-header h2 {
    margin:0;
}
.modal-header small {
    color:var(--color-muted);
}
.notification-item {
    transition:border-color .2s ease, background .2s ease;
}
.notification-item.is-unread {
    border-color:rgba(255,50,31,.55);
    background:rgba(255,50,31,.08);
}
.notification-item > a {
    display:grid;
    gap:5px;
    color:inherit;
}
.notification-item p {
    margin:0;
}
.notification-item small {
    color:var(--color-muted);
}
.notification-empty {
    min-height:130px;
    display:grid;
    place-items:center;
    gap:8px;
    color:var(--color-muted);
    text-align:center;
}
.notification-empty i {
    font-size:2rem;
}
.notifications-footer {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-top:14px;
    padding-top:12px;
    border-top:1px solid var(--color-border);
}
.notifications-footer form {
    margin:0;
}

.events-page-title {
    align-items:flex-start;
}
.event-group {
    display:grid;
    gap:10px;
}
.event-list {
    display:grid;
    gap:10px;
}
.event-item {
    display:grid;
    grid-template-columns:1fr auto;
    gap:12px;
    align-items:center;
    background:var(--color-card-light);
    border:1px solid var(--color-border);
    border-radius:var(--radius-medium);
    padding:10px;
}
.event-item.is-unread {
    border-color:rgba(255,50,31,.55);
    box-shadow:inset 3px 0 0 var(--color-action);
}
.event-main {
    min-width:0;
    display:grid;
    grid-template-columns:72px minmax(0,1fr);
    gap:12px;
    align-items:center;
    color:inherit;
}
.event-main > img,
.event-icon {
    width:72px;
    height:84px;
    border-radius:var(--radius-small);
    object-fit:cover;
}
.event-icon {
    display:grid;
    place-items:center;
    background:#1b1b20;
    color:var(--color-action);
    font-size:1.5rem;
}
.event-content {
    min-width:0;
    display:grid;
    gap:4px;
}
.event-kicker {
    color:var(--color-action);
    font-size:.72rem;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.04em;
}
.event-content > span:not(.event-kicker),
.event-content small {
    color:var(--color-muted);
}
.event-actions {
    display:grid;
    gap:7px;
}
.event-actions form {
    margin:0;
}
.event-actions button {
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border:1px solid var(--color-border);
    border-radius:var(--radius-circle);
    background:#202025;
    color:#fff;
}
.event-actions button:hover {
    border-color:var(--color-action);
    color:var(--color-action);
}

.notification-settings-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin:14px 0;
}
.notification-setting-choice {
    display:grid;
    grid-template-columns:auto 1fr auto;
    gap:10px;
    align-items:center;
    padding:12px;
    border:1px solid var(--color-border);
    border-radius:var(--radius-medium);
    background:#111115;
}
.notification-setting-choice i {
    color:var(--color-action);
    font-size:1.2rem;
}
.notification-setting-choice input {
    width:18px;
    height:18px;
    accent-color:var(--color-action);
}
.push-status {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin:14px 0;
}
.status-pill {
    display:inline-flex;
    padding:6px 10px;
    border-radius:var(--radius-pill);
    font-size:.76rem;
    font-weight:900;
}
.status-pill.is-success {
    background:rgba(64,190,104,.15);
    color:#6de294;
}
.status-pill.is-warning {
    background:rgba(255,179,0,.14);
    color:#ffc24a;
}
.push-settings-card button:disabled {
    opacity:.4;
    cursor:not-allowed;
}

@media(max-width:640px) {
    .notification-settings-grid {
        grid-template-columns:1fr;
    }
    .event-main {
        grid-template-columns:56px minmax(0,1fr);
    }
    .event-main > img,
    .event-icon {
        width:56px;
        height:70px;
    }
    .notifications-footer {
        align-items:stretch;
        flex-direction:column;
    }
    .notifications-footer .add-btn,
    .notifications-footer .small-btn {
        width:100%;
        justify-content:center;
    }
}

/* Historique dynamique v0.14.0 */
.history-list article div{min-width:0}
.history-list article strong,.history-list article span,.history-list article small,.history-list article time{display:block}
.history-list article strong a{color:inherit;text-decoration:none}
.history-list article strong a:hover{color:var(--color-action)}
.history-list article span{color:#ddd;margin-top:2px}
.history-list article small{color:var(--color-muted);margin-top:3px}
.history-list article time{color:var(--color-muted);font-size:12px;margin-top:5px}


/* PopTrack v0.16.2 — recherche manga, notifications et actions */
.manual-manga-accordion {
    margin: 14px 0 20px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    background: var(--color-card-light);
    overflow: hidden;
}
.manual-manga-accordion > summary {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 14px 16px;
    color: var(--color-title);
    font-weight: 900;
    cursor: pointer;
    list-style: none;
}
.manual-manga-accordion > summary::-webkit-details-marker { display: none; }
.manual-manga-accordion > summary::after {
    content: '+';
    margin-left: auto;
    font-size: 1.25rem;
}
.manual-manga-accordion[open] > summary::after { content: '−'; }
.manual-manga-accordion .manual-manga-card {
    margin: 0;
    border: 0;
    border-top: 1px solid var(--color-border);
    border-radius: 0;
}

.notifications-panel {
    background: #0b0b0e;
    border: 1px solid var(--color-border);
    box-shadow: 0 24px 70px rgba(0,0,0,.65);
}
.notification-list { display: grid; gap: 10px; padding: 12px; }
.notification-item {
    position: relative;
    display: grid;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    background: var(--color-card-light);
    overflow: hidden;
}
.notification-item.is-unread { border-color: rgba(255,50,31,.7); background: rgba(255,50,31,.08); }
.notification-item > a { display: flex; gap: 10px; padding: 12px 44px 12px 12px; color: inherit; text-decoration: none; }
.notification-thumb { flex: 0 0 46px; width: 46px; height: 62px; border-radius: 7px; object-fit: cover; background: #15151a; }
.notification-thumb--empty { display: grid; place-items: center; }
.delete-notif { position: absolute; top: 9px; right: 9px; width: 30px; height: 30px; border: 0; border-radius: var(--radius-pill); background: #29292f; color: #fff; cursor: pointer; }
.notifications-footer { display: grid; gap: 10px; padding: 12px; border-top: 1px solid var(--color-border); }
.notifications-footer-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.notifications-footer-actions form { flex: 1 1 150px; }
.notifications-footer .small-btn, .notifications-footer .add-btn { width: 100%; min-height: 38px; }

.events-page-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.events-page-actions form { margin: 0; }
.small-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 36px;
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: 9px;
    font: inherit;
    font-size: .82rem;
    font-weight: 800;
    line-height: 1.1;
    cursor: pointer;
}
.small-btn.secondary { background: var(--color-card-light); color: var(--color-title); }
.small-btn.danger { background: rgba(255,50,31,.13); border-color: rgba(255,50,31,.48); color: #ff7468; }
.small-btn:hover { transform: translateY(-1px); filter: brightness(1.08); }

.home-priority-stats { margin-top: 12px; }
.home-priority-stats .section-title { margin-bottom: 10px; }

@media (max-width: 600px) {
    .events-page-title { align-items: stretch; flex-direction: column; }
    .events-page-actions { display: grid; grid-template-columns: 1fr; width: 100%; }
    .events-page-actions .small-btn { width: 100%; }
}


/* PopTrack v0.16.5 — timeline continue sans zone de scroll interne. */
.continuous-timeline {
    position: relative;
    display: grid;
    gap: 22px;
    padding: 4px 0 28px;
}

.timeline-day-group {
    display: grid;
    gap: 12px;
    scroll-margin-top: 96px;
}

.timeline-day-group.is-today {
    position: relative;
    padding: 12px 0;
}

.timeline-day-group.is-today::before,
.timeline-day-group.is-today::after {
    content: '';
    position: absolute;
    top: 26px;
    width: calc(50% - 76px);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 50, 31, .65));
}

.timeline-day-group.is-today::before { left: 0; }
.timeline-day-group.is-today::after {
    right: 0;
    transform: scaleX(-1);
}

.timeline-pill.is-today {
    position: relative;
    z-index: 1;
    margin-inline: auto;
    background: var(--color-action, #ff321f);
    color: #fff;
    box-shadow: 0 0 0 5px var(--color-bg, #090a0c);
}

.timeline-poster-grid {
    align-items: stretch;
}

.timeline-poster-card {
    position: relative;
    display: block;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--color-border, #26272d);
    border-radius: var(--radius-field);
    background: var(--color-card, #101116);
    color: var(--color-title, #fff);
    text-decoration: none;
}

.timeline-poster-card > img,
.timeline-poster-card > .poster-fallback {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
}

.timeline-poster-card.is-done { opacity: .62; }
.timeline-poster-card:hover { transform: translateY(-2px); }

.timeline-poster-caption {
    display: grid;
    gap: 2px;
    padding: 8px;
}
.timeline-poster-caption strong,
.timeline-poster-caption small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.timeline-poster-caption strong { font-size: .78rem; }
.timeline-poster-caption small { color: var(--color-muted, #9d9da7); font-size: .7rem; }

.timeline-list { display: grid; gap: 10px; }


@media (max-width: 620px) {
    .continuous-timeline { gap: 18px; }
    .timeline-day-group { scroll-margin-top: 82px; }
    .timeline-day-group.is-today::before,
    .timeline-day-group.is-today::after { width: calc(50% - 68px); }
}

/* v0.16.8 — Barre réellement fixe sous le header */

.page-sticky-controls {
    position: fixed;
    top: var(--header-height);
    left: 50%;
    z-index: 45;
    width: min(calc(100vw - 28px), var(--content-max-width));
    margin: 0;
    padding: 0 14px 10px;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, .96);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(14px);
}

.page-fixed-controls-spacer {
    display: block;
    height: var(--page-fixed-controls-height);
    pointer-events: none;
}

.timeline-day-group {
    scroll-margin-top: calc(
        var(--header-height) +
        var(--page-fixed-controls-height) +
        16px
    );
}

@media (min-width: 900px) {
    .page-sticky-controls {
        left: calc(var(--sidebar-width) + ((100vw - var(--sidebar-width)) / 2));
    }
}

@media (max-width: 620px) {

    .page-sticky-controls {
        width: 100%;
        padding-inline: 14px;
    }
}


/* v0.16.9 — respiration des repères de timeline */
.timeline-day-group > .timeline-pill {
    margin-bottom: 18px;
}

.timeline-day-group {
    padding-bottom: 18px;
}

.timeline-day-group:last-child {
    padding-bottom: 38px;
}


/* v0.17.0 — Authentification */
.auth-body {
    min-height: 100vh;
    margin: 0;
    display: grid;
    place-items: center;
    padding: 24px 14px;
    background:
        radial-gradient(circle at top, rgba(255, 50, 31, .16), transparent 34rem),
        #050506;
    color: #fff;
}

.auth-shell {
    width: min(100%, 430px);
}

.auth-card {
    padding: 26px;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: var(--radius-dialog);
    background: rgba(17, 17, 20, .96);
    box-shadow: var(--shadow-dialog);
}

.auth-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    text-decoration: none;
    font-size: 1.1rem;
}

.auth-heading {
    margin: 28px 0 22px;
}

.auth-heading h1 {
    margin: 5px 0 8px;
    font-size: clamp(1.8rem, 8vw, 2.5rem);
}

.auth-heading p,
.field-help {
    color: var(--muted, #aaa);
}

.auth-form {
    display: grid;
    gap: 10px;
}

.auth-form label {
    margin-top: 8px;
    font-weight: 700;
    font-size: .9rem;
}

.auth-form input {
    width: 100%;
    min-height: 48px;
    padding: 11px 13px;
    color: #fff;
    background: #09090b;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: var(--radius-field);
    outline: none;
}

.auth-form input:focus {
    border-color: var(--accent, #ff321f);
    box-shadow: 0 0 0 3px rgba(255, 50, 31, .14);
}

.password-field {
    position: relative;
}

.password-field input {
    padding-right: 50px;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 7px;
    width: 38px;
    height: 38px;
    transform: translateY(-50%);
    color: #fff;
    background: transparent;
    border: 0;
    border-radius: var(--radius-control);
    cursor: pointer;
}

.auth-submit {
    width: 100%;
    margin-top: 14px;
}

.auth-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 16px;
    padding: 12px 14px;
    border-radius: var(--radius-field);
    font-size: .9rem;
}

.auth-alert p {
    margin: 0 0 4px;
}

.auth-alert--error {
    color: #ffd6d1;
    background: rgba(255, 50, 31, .13);
    border: 1px solid rgba(255, 50, 31, .4);
}

.auth-alert--info {
    color: #dcecff;
    background: rgba(70, 145, 255, .12);
    border: 1px solid rgba(70, 145, 255, .3);
}

.settings-form-actions--wide {
    grid-column: 1 / -1;
}

.settings-danger-card {
    border-color: rgba(255, 50, 31, .24);
}

.profile-action-form {
    margin: 0;
}

.profile-action-form button {
    width: 100%;
    display: grid;
    grid-template-columns: 26px 1fr 20px;
    align-items: center;
    gap: 10px;
    padding: 16px;
    color: inherit;
    text-align: left;
    background: inherit;
    border: 0;
    cursor: pointer;
    font: inherit;
}

@media (max-width: 480px) {
    .auth-card {
        padding: 22px 18px;
        border-radius: var(--radius-large);
    }
}


/* v0.18.0 — Séries regroupées en vue liste */
.series-list {
    display: grid;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.series-row {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: var(--space-4);
    align-items: center;
    min-height: 112px;
    padding: var(--space-3);
    color: var(--color-text);
    text-decoration: none;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    transition: border-color .18s ease, transform .18s ease, background .18s ease;
}

.series-row:hover,
.series-row:focus-visible {
    border-color: rgba(255, 50, 31, .7);
    background: var(--color-card-light);
    transform: translateY(-1px);
}

.series-row.is-inactive {
    border-color: rgba(242, 184, 75, .28);
}

.series-row-cover,
.series-row-fallback {
    width: 76px;
    height: 104px;
    border-radius: var(--radius-sm);
}

.series-row-cover {
    object-fit: cover;
}

.series-row-fallback {
    display: grid;
    place-items: center;
    color: var(--color-muted);
    background: var(--color-card-light);
    border: 1px solid var(--color-border);
    font-weight: 800;
}

.series-row-content {
    min-width: 0;
}

.series-row-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.series-row-heading h3 {
    margin: 0;
    overflow: hidden;
    font-size: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.series-row-heading i {
    color: var(--color-muted);
}

.series-row-summary {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-2);
    margin: 7px 0 9px;
    color: var(--color-muted);
    font-size: .84rem;
}

.series-row-summary strong {
    color: var(--color-text);
}

.series-row small {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    color: var(--color-muted);
}

.series-inactive-label {
    color: var(--color-warning) !important;
}

.series-inactive-pill {
    margin-top: var(--space-6);
    margin-bottom: var(--space-4);
}

/* v0.18.0 — Bouton croix des recherches */
.search-input-wrap {
    position: relative;
    min-width: 0;
    flex: 1 1 auto;
}

.search-input-wrap input {
    width: 100%;
    padding-right: 42px !important;
}

.search-clear-btn {
    position: absolute;
    top: 50%;
    right: 5px;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    transform: translateY(-50%);
    color: var(--color-muted);
    background: transparent;
    border: 0;
    border-radius: var(--radius-circle);
    cursor: pointer;
    padding: 7px 9px !important;
}

.search-clear-btn:hover,
.search-clear-btn:focus-visible {
    color: var(--color-text);
    background: rgba(255, 255, 255, .08);
}

.search-clear-btn[hidden] {
    display: none;
}

/* v0.18.0 — Bloc-notes interne */
.project-notes-form textarea {
    width: 100%;
    resize: vertical;
    min-height: 190px;
    color: var(--color-text);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-field);
    padding: var(--space-3);
    line-height: 1.55;
}

.project-notes-form textarea:focus {
    border-color: var(--color-action);
    outline: 0;
    box-shadow: 0 0 0 3px rgba(255, 50, 31, .14);
}

@media (max-width: 520px) {
    .series-row {
        grid-template-columns: 64px minmax(0, 1fr);
    }

    .series-row-cover,
    .series-row-fallback {
        width: 64px;
        height: 92px;
    }
}


/* v0.18.1 — Diagnostic Web Push de l'appareil courant */
.push-device-diagnostics {
    display: grid;
    gap: 6px;
    margin-top: var(--space-4);
    padding: var(--space-3);
    color: var(--color-muted);
    background: rgba(255, 255, 255, .035);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-field);
    font-size: .84rem;
}

.push-device-diagnostics strong {
    color: var(--color-text);
}


/* ==========================================================================
   PopTrack v0.19.0 — Administration, santé et supervision
   ========================================================================== */

.health-summary-card {
    border-left: 4px solid var(--color-info);
}

.health-summary-card--success {
    border-left-color: var(--color-success);
}

.health-summary-card--warning {
    border-left-color: var(--color-warning);
}

.health-summary-card--error {
    border-left-color: var(--color-danger);
}

.health-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin: var(--space-4) 0;
}

.health-section-title {
    margin: var(--space-6) 0 var(--space-3);
}

.health-grid {
    display: grid;
    gap: var(--space-3);
}

.health-item {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-info);
    border-radius: var(--radius-medium);
}

.health-item > i {
    margin-top: 2px;
    color: var(--color-info);
    font-size: 1.3rem;
}

.health-item--success {
    border-left-color: var(--color-success);
}

.health-item--success > i {
    color: var(--color-success);
}

.health-item--warning {
    border-left-color: var(--color-warning);
}

.health-item--warning > i {
    color: var(--color-warning);
}

.health-item--error {
    border-left-color: var(--color-danger);
}

.health-item--error > i {
    color: var(--color-danger);
}

.health-item-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.health-item p {
    margin: 5px 0;
}

.health-item small {
    display: block;
    margin-top: 4px;
    color: var(--color-muted);
}

.health-error-detail {
    color: var(--color-danger) !important;
    overflow-wrap: anywhere;
}

.status-pill.is-error {
    color: #ffd9d5;
    background: rgba(255, 73, 56, .14);
    border-color: rgba(255, 73, 56, .35);
}

.status-pill.is-info {
    color: #dbe9ff;
    background: rgba(70, 145, 255, .14);
    border-color: rgba(70, 145, 255, .35);
}

.journal-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto auto;
    gap: var(--space-3);
    align-items: end;
}

.journal-filters label {
    display: grid;
    gap: 6px;
}

.technical-log-list {
    display: grid;
    gap: var(--space-3);
}

.technical-log {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
}

.technical-log--error {
    border-color: rgba(255, 73, 56, .35);
}

.technical-log--warning {
    border-color: rgba(242, 184, 75, .35);
}

.technical-log-icon {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: var(--radius-circle);
    background: rgba(255, 255, 255, .05);
}

.technical-log-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
}

.technical-log p {
    margin: 6px 0;
}

.technical-log small {
    color: var(--color-muted);
}

.technical-log details {
    margin-top: var(--space-3);
}

.technical-log pre {
    max-height: 340px;
    padding: var(--space-3);
    overflow: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: .78rem;
}

.about-card {
    display: flex;
    align-items: center;
    gap: var(--space-5);
}

.about-logo {
    display: grid;
    width: 72px;
    height: 72px;
    flex: 0 0 auto;
    place-items: center;
    color: #fff;
    background: var(--color-action);
    border-radius: var(--radius-large);
    font-size: 2rem;
    font-weight: 900;
}

.about-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.about-info-item {
    display: grid;
    gap: 5px;
    padding: var(--space-4);
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
}

.about-info-item i {
    color: var(--color-action);
    font-size: 1.25rem;
}

.about-info-item span {
    color: var(--color-muted);
    font-size: .8rem;
}

@media (max-width: 680px) {
    .journal-filters {
        grid-template-columns: 1fr;
    }

    .about-info-grid {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================================
   PopTrack v0.19.1 — Sauvegarde et scénarios de notification
   ========================================================================== */

.backup-summary {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-3);
    margin: var(--space-4) 0;
    padding: var(--space-3);
    color: var(--color-muted);
    background: rgba(255, 255, 255, .035);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-field);
}

.backup-summary strong {
    color: var(--color-text);
}

.backup-table-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.backup-table-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--color-card-light);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.backup-table-item span {
    min-width: 0;
    overflow: hidden;
    color: var(--color-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.backup-download-btn {
    width: fit-content;
}

.backup-exclusion-list {
    display: grid;
    gap: 8px;
    padding: 0;
    list-style: none;
}

.backup-exclusion-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-muted);
}

.backup-exclusion-list i {
    color: var(--color-success);
}

.notification-scenario-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.notification-scenario-actions form {
    margin: 0;
}

@media (max-width: 520px) {
    .backup-table-grid {
        grid-template-columns: 1fr;
    }

    .notification-scenario-actions,
    .notification-scenario-actions form,
    .notification-scenario-actions button {
        width: 100%;
    }
}


/* ==========================================================================
   PopTrack v0.19.2 — Finale, FrAnime et session persistante
   ========================================================================== */

.episode-final-label {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    padding: 2px 7px;
    color: var(--color-success);
    background: rgba(53, 208, 127, .12);
    border: 1px solid rgba(53, 208, 127, .3);
    border-radius: var(--radius-pill);
    font-size: .7rem;
    font-weight: 800;
    vertical-align: middle;
}

.franime-search-helper {
    display: grid;
    gap: 5px;
    margin-bottom: var(--space-3);
    padding: var(--space-3);
    color: var(--color-muted);
    background: rgba(70, 145, 255, .07);
    border: 1px solid rgba(70, 145, 255, .22);
    border-radius: var(--radius-field);
}

.franime-search-helper a {
    color: var(--color-info);
    font-weight: 700;
    text-decoration: none;
}

.franime-search-helper a:hover {
    text-decoration: underline;
}

.auth-remember {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--color-muted);
    cursor: pointer;
}

.auth-remember input {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    accent-color: var(--color-action);
}


/* ==========================================================================
   PopTrack v0.19.3 — Groupe « Séries à jour »
   ========================================================================== */

.series-up-to-date-pill {
    border-color: rgba(53, 208, 127, .35);
}

.series-row.is-up-to-date {
    border-color: rgba(53, 208, 127, .24);
}

.series-up-to-date-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-success) !important;
}


/* v0.20.0 — Multi-utilisateur */
.auth-secondary-link {display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-top:var(--space-4);color:var(--color-muted);text-decoration:none}
.auth-secondary-link:hover{color:var(--color-text)}
.user-admin-list{display:grid;gap:var(--space-3)}
.user-admin-card{display:grid;gap:var(--space-4);padding:var(--space-4);background:var(--color-card);border:1px solid var(--color-border);border-left:3px solid var(--color-success);border-radius:var(--radius-medium)}
.user-admin-card--pending{border-left-color:var(--color-warning)}
.user-admin-card--disabled{border-left-color:var(--color-danger)}
.user-admin-main{display:flex;align-items:center;gap:var(--space-3)}
.user-avatar{display:grid;width:44px;height:44px;flex:0 0 auto;place-items:center;color:#fff;background:var(--color-action);border-radius:var(--radius-circle);font-weight:900}
.user-admin-title{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.user-admin-main p{margin:3px 0;color:var(--color-muted)}
.user-admin-main small{color:var(--color-muted)}
.user-admin-actions{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.user-admin-actions form{margin:0}
@media(max-width:560px){.user-admin-actions,.user-admin-actions form,.user-admin-actions button{width:100%}}


/* v0.20.0 — Profil administré */
.managed-profile-banner { position:fixed; top:0; left:0; right:0; width:100%; z-index:60; margin:0; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:11px 18px; color:#1b1300; background:#ffd65a; border-bottom:1px solid rgba(0,0,0,.18); box-shadow:0 5px 18px rgba(0,0,0,.16); }
.managed-profile-banner > div { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.managed-profile-banner span { opacity:.75; }
.managed-profile-banner form { margin:0; }
.managed-profile-banner button { padding:7px 11px; color:#fff; background:#161616; border:0; border-radius:var(--radius-field,10px); font-weight:800; cursor:pointer; }
@media(max-width:680px){ .managed-profile-banner{align-items:flex-start;flex-direction:column}.managed-profile-banner form,.managed-profile-banner button{width:100%} }


/* ==========================================================================
   PopTrack v0.20.4 — Interface d'administration des profils
   ========================================================================== */

.settings-menu-group {
    margin-top: var(--space-5);
}

.settings-menu-group:first-of-type {
    margin-top: var(--space-3);
}

.settings-menu-group-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 var(--space-3);
    color: var(--color-muted);
    font-size: .84rem;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.settings-menu-group-title i {
    color: var(--color-action);
    font-size: 1rem;
}

.settings-inline-note {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    padding: var(--space-3);
    color: var(--color-muted);
    background: rgba(70, 145, 255, .07);
    border: 1px solid rgba(70, 145, 255, .22);
    border-radius: var(--radius-field);
}

.settings-inline-note > i {
    flex: 0 0 auto;
    color: var(--color-info);
    font-size: 1.15rem;
}

.settings-inline-note strong {
    color: var(--color-text);
}

.settings-inline-note p {
    margin: 4px 0 0;
    line-height: 1.45;
}

.user-manage-profile-btn {
    color: #171000;
    background: #ffd65a;
    border-color: #ffd65a;
}

.user-manage-profile-btn:hover {
    filter: brightness(1.04);
}

.header-profile-link {
    position: relative;
}

.header-profile-link.is-managing-user {
    color: #ffd65a;
}

.header-managed-user-badge {
    position: absolute;
    right: -5px;
    bottom: -5px;
    display: grid;
    width: 17px;
    height: 17px;
    place-items: center;
    color: #171000;
    background: #ffd65a;
    border: 2px solid var(--color-bg);
    border-radius: 50%;
    font-size: .58rem;
    font-weight: 900;
    line-height: 1;
}

@media (max-width: 560px) {
    .settings-inline-note {
        font-size: .86rem;
    }
}


/* ==========================================================================
   PopTrack v0.20.5 — Bandeau prioritaire et liens d'aide des templates
   ========================================================================== */

.managed-profile-banner + .app-header {
    top: var(--managed-profile-banner-height, 0px);
}

.source-template-helper,
.template-helper-fields {
    display: grid;
    gap: 7px;
}

.source-template-helper {
    margin-bottom: var(--space-3);
    padding: var(--space-3);
    color: var(--color-muted);
    background: rgba(70, 145, 255, .07);
    border: 1px solid rgba(70, 145, 255, .22);
    border-radius: var(--radius-field);
}

.source-template-helper[hidden] {
    display: none;
}

.source-template-helper a {
    color: var(--color-info);
    font-weight: 800;
    overflow-wrap: anywhere;
}

.source-template-helper a:hover {
    text-decoration: underline;
}

.template-helper-settings {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-3);
    background: rgba(255, 255, 255, .025);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-field);
}

.template-helper-fields textarea {
    min-height: 76px;
}


/* ==========================================================================
   PopTrack v0.20.6 — Accueil personnalisé et profil administré
   ========================================================================== */


.template-helper-fields .settings-help {
    margin: 0;
}



/* ========================================================================== 
   PopTrack v0.20.7 — Décalages fiables du profil administré
   ========================================================================== */

:root {
    --managed-profile-banner-height: 0px;
}

.is-managing-profile {
    /* Valeur de secours avant la mesure JavaScript. */
    --managed-profile-banner-height: 100px;
}

.is-managing-profile .app-main {
    margin-top: 0;
    padding-top: var(--managed-profile-banner-height);
}

.is-managing-profile .app-header {
    top: var(--managed-profile-banner-height);
}

.is-managing-profile .page-sticky-controls {
    top: calc(
        var(--managed-profile-banner-height)
        + var(--header-height)
    );
    margin-top: 0;
}

.is-managing-profile .timeline-day-group {
    scroll-margin-top: calc(
        var(--managed-profile-banner-height)
        + var(--header-height)
        + var(--page-fixed-controls-height)
        + 16px
    );
}

@media (max-width: 899px) {
    .is-managing-profile .app-main {
        padding-top: calc(
            var(--managed-profile-banner-height)
            + var(--header-height)
            + 18px
        );
    }
}


/* ==========================================================================\n   PopTrack v0.22.0 — Statistiques avancées\n   ========================================================================== */
.page-heading-with-action{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-5)}
.page-subtitle{margin:.35rem 0 0;color:var(--color-muted)}
.advanced-stats-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3);margin-bottom:var(--space-5)}
.advanced-stat-card,.stats-panel{background:var(--color-card);border:1px solid var(--color-border);border-radius:var(--radius-medium)}
.advanced-stat-card{display:grid;gap:5px;padding:var(--space-4)}
.advanced-stat-card i{color:var(--color-action);font-size:1.2rem}.advanced-stat-card strong{font-size:1.35rem}.advanced-stat-card span{color:var(--color-muted);font-size:.82rem}
.stats-panel{padding:var(--space-4);margin-bottom:var(--space-4)}
.stats-panel-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-4)}
.stats-panel-heading h2{margin:2px 0 0}.stats-panel-heading>i{color:var(--color-action);font-size:1.4rem}
.advanced-stats-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}
.monthly-activity-chart{display:grid;grid-template-columns:repeat(12,minmax(28px,1fr));gap:8px;align-items:end;min-height:210px;overflow-x:auto}
.monthly-activity-column{display:grid;grid-template-rows:24px 150px 22px;gap:5px;text-align:center;min-width:30px}.monthly-activity-column strong,.monthly-activity-column small{font-size:.72rem}.monthly-activity-column small{color:var(--color-muted)}
.monthly-activity-track{display:flex;align-items:flex-end;height:150px;background:rgba(255,255,255,.035);border-radius:var(--radius-sm);overflow:hidden}.monthly-activity-track span{display:block;width:100%;min-height:3px;background:linear-gradient(180deg,var(--color-action),rgba(70,145,255,.35));border-radius:var(--radius-sm)}
.stats-legend{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-3);color:var(--color-muted);font-size:.78rem}.stats-legend i{color:var(--color-action)}
.stats-bars{display:grid;gap:var(--space-3)}.stats-bars-two-columns{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--space-5)}
.stats-bar-row>div:first-child{display:flex;justify-content:space-between;gap:var(--space-3);margin-bottom:6px;font-size:.86rem}.stats-bar-row>div:first-child span{color:var(--color-muted)}
.stats-bar{height:7px;background:rgba(255,255,255,.06);border-radius:999px;overflow:hidden}.stats-bar span{display:block;height:100%;background:var(--color-action);border-radius:999px}
.top-series-stats{display:grid;gap:8px}.top-series-stat-row{display:grid;grid-template-columns:34px minmax(0,1fr) 18px;align-items:center;gap:var(--space-3);padding:10px;color:inherit;border:1px solid var(--color-border);border-radius:var(--radius-sm);text-decoration:none}.top-series-rank{display:grid;width:30px;height:30px;place-items:center;background:rgba(255,255,255,.05);border-radius:50%;font-weight:900}.top-series-stat-row small{display:block;color:var(--color-muted);margin:3px 0 7px}.top-series-stat-row:hover{border-color:var(--color-action)}
.stats-definition-list{display:grid;gap:0;margin:0}.stats-definition-list div{display:flex;justify-content:space-between;gap:var(--space-3);padding:11px 0;border-bottom:1px solid var(--color-border)}.stats-definition-list div:last-child{border-bottom:0}.stats-definition-list dt{color:var(--color-muted)}.stats-definition-list dd{margin:0;font-weight:800}.compact-empty{margin:0}
@media(max-width:760px){.advanced-stats-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.advanced-stats-grid,.stats-bars-two-columns{grid-template-columns:1fr}.monthly-activity-chart{grid-template-columns:repeat(12,38px)}.page-heading-with-action{align-items:stretch;flex-direction:column}.page-heading-with-action .small-btn{width:fit-content}}


/* ==========================================================================
   PopTrack v0.22.1 — Unités explicites des statistiques
   ========================================================================== */

.stats-unit-note {
    margin: 0 0 var(--space-4);
    color: var(--color-muted);
    font-size: .82rem;
    line-height: 1.45;
}

.stats-unit-note strong {
    color: var(--color-text);
}

.monthly-activity-column > strong small {
    color: var(--color-muted);
    font-size: .6rem;
    font-weight: 600;
}


/* ==========================================================================
   PopTrack v0.22.2 — Informations de version et de déploiement
   ========================================================================== */

.about-info-item strong {
    overflow-wrap: anywhere;
}

.about-deployment-note strong {
    color: var(--color-text);
}


/* ==========================================================================
   PopTrack v0.22.3 — Groupes de lectures Scans
   ========================================================================== */

.scan-inactive-pill {
    border-color: rgba(255, 190, 70, .38);
}

.scan-up-to-date-pill {
    border-color: rgba(53, 208, 127, .35);
}


/* ==========================================================================
   PopTrack v0.23.0 — Préférences de notifications par média
   ========================================================================== */

.media-notification-toggle {
    align-items: flex-start;
}

.media-notification-toggle span {
    display: grid;
    gap: 3px;
}

.media-notification-toggle small {
    color: var(--color-muted);
    font-weight: 500;
}

.scan-reminder-option {
    align-items: center;
}


/* ==========================================================================
   PopTrack v0.24.0 — Sauvegardes automatiques
   ========================================================================== */

.backup-action-row,
.backup-archive-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.backup-server-summary {
    margin-bottom: var(--space-4);
}

.backup-archive-list {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.backup-archive-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-field);
}

.backup-archive-item > div:first-child {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.backup-archive-item strong {
    overflow-wrap: anywhere;
}

.backup-archive-item span {
    color: var(--color-muted);
    font-size: .82rem;
}

.backup-archive-actions {
    flex: 0 0 auto;
}

.backup-archive-actions form {
    margin: 0;
}

.backup-empty-state {
    margin-top: var(--space-4);
}

.backup-cron-example {
    display: block;
    margin: var(--space-3) 0;
    padding: var(--space-3);
    overflow-wrap: anywhere;
    white-space: normal;
    border-radius: var(--radius-field);
}

@media (max-width: 700px) {
    .backup-archive-item {
        align-items: stretch;
        flex-direction: column;
    }

    .backup-archive-actions {
        width: 100%;
    }
}


/* ==========================================================================
   PopTrack v0.24.1 — Administration utilisateurs et contrôle des archives
   ========================================================================== */

.user-admin-dates,
.user-admin-collection-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 14px;
    margin-top: 7px;
}

.user-admin-dates small,
.user-admin-collection-stats span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.user-admin-collection-stats {
    margin-bottom: 7px;
}

.user-admin-collection-stats span {
    padding: 4px 8px;
    color: var(--color-muted);
    background: rgba(255, 255, 255, .035);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    font-size: .76rem;
}

.user-admin-collection-stats strong {
    color: var(--color-text);
}

.backup-inspection-status {
    display: grid;
    gap: 4px;
    margin-bottom: var(--space-4);
    padding: var(--space-3);
    border-radius: var(--radius-field);
}

.backup-inspection-status.is-valid {
    background: rgba(53, 208, 127, .08);
    border: 1px solid rgba(53, 208, 127, .32);
}

.backup-inspection-status.has-warnings {
    background: rgba(255, 190, 70, .08);
    border: 1px solid rgba(255, 190, 70, .34);
}

.backup-inspection-status span {
    color: var(--color-muted);
    font-size: .84rem;
}

.backup-inspection-warnings {
    display: grid;
    gap: 7px;
    margin: 0 0 var(--space-4);
    padding: 0;
    list-style: none;
}

.backup-inspection-warnings li {
    display: flex;
    gap: 8px;
    color: var(--color-warning);
}


/* ==========================================================================
   PopTrack v0.24.2 — Fuseau horaire et procédure de restauration
   ========================================================================== */

.backup-recovery-steps {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding-left: 1.4rem;
}

.backup-recovery-steps li {
    padding-left: 4px;
    color: var(--color-muted);
    line-height: 1.55;
}

.backup-recovery-steps strong {
    color: var(--color-text);
}

.backup-recovery-warning {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: var(--space-4);
    padding: var(--space-3);
    color: var(--color-warning);
    background: rgba(255, 190, 70, .08);
    border: 1px solid rgba(255, 190, 70, .3);
    border-radius: var(--radius-field);
}