/* ============================================================
   admin-releases-v9.css
   Mobile-first refonte v9 — Releases / Diagnostics / Newsletter / Settings
   Scopes: .arl-* (releases) .adg-* (diagnostics) .anl-* (newsletter) .ast-* (settings)
   Branding rouge Suisse #DC2626 — glass surfaces — JetBrains Mono pour versions/sha
   ============================================================ */

:root {
    --arl-accent: #DC2626;
    --arl-accent-soft: rgba(220, 38, 38, .14);
    --arl-accent-line: rgba(220, 38, 38, .35);
    --arl-amber: #f59e0b;
    --arl-amber-soft: rgba(245, 158, 11, .14);
    --arl-emerald: #10b981;
    --arl-emerald-soft: rgba(16, 185, 129, .14);
    --arl-violet: #8b5cf6;
    --arl-violet-soft: rgba(139, 92, 246, .14);
    --arl-slate: #64748b;
    --arl-slate-soft: rgba(100, 116, 139, .18);
    --arl-card: rgba(15, 18, 32, .72);
    --arl-card-line: rgba(255, 255, 255, .07);
    --arl-card-line-strong: rgba(255, 255, 255, .12);
    --arl-text: #e7eaf4;
    --arl-text-2: #9ba3b8;
    --arl-text-3: #6b7388;
    --arl-bg-soft: rgba(255, 255, 255, .03);
    --arl-bg-2: rgba(20, 24, 40, .85);
    --arl-radius-lg: 16px;
    --arl-radius-md: 12px;
    --arl-radius-sm: 8px;
    --arl-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
    --arl-shadow: 0 8px 24px rgba(0, 0, 0, .35);
    --arl-shadow-lg: 0 24px 80px rgba(0, 0, 0, .55);
    --arl-tap: 44px;
    --arl-pad-mobile: 16px;
    --arl-pad-desk: 24px;
    --arl-input-fs: 16px;
}

@media (prefers-reduced-motion: reduce) {
    .arl-card, .adg-card, .anl-modal, .ast-card,
    .arl-pill, .adg-pill { transition: none !important; animation: none !important; }
}

/* Shared toolbars / buttons */
.arl-toolbar, .adg-toolbar, .anl-toolbar, .ast-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    padding: var(--arl-pad-mobile); margin-bottom: 12px;
    background: var(--arl-card); border: 1px solid var(--arl-card-line);
    border-radius: var(--arl-radius-lg);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.arl-toolbar h2, .adg-toolbar h2, .anl-toolbar h2, .ast-toolbar h2 {
    margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--arl-text); border: 0; padding: 0;
}
.arl-toolbar__count, .adg-toolbar__count {
    font: 600 11px/1 var(--arl-mono); letter-spacing: .04em;
    color: var(--arl-accent); background: var(--arl-accent-soft);
    border: 1px solid var(--arl-accent-line); padding: 5px 9px;
    border-radius: 999px; text-transform: uppercase;
}
.arl-toolbar__spacer, .adg-toolbar__spacer, .anl-toolbar__spacer, .ast-toolbar__spacer { flex: 1 1 auto; }

.arl-btn, .adg-btn, .anl-btn, .ast-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: var(--arl-tap); padding: 10px 14px;
    border-radius: var(--arl-radius-sm); border: 1px solid var(--arl-card-line-strong);
    background: var(--arl-bg-soft); color: var(--arl-text);
    font-size: 0.88rem; font-weight: 500; cursor: pointer;
    transition: background .15s, border-color .15s, transform .12s; white-space: nowrap;
}
.arl-btn:hover, .adg-btn:hover, .anl-btn:hover, .ast-btn:hover {
    background: rgba(255, 255, 255, .06); border-color: var(--arl-card-line-strong);
}
.arl-btn:active, .adg-btn:active, .anl-btn:active, .ast-btn:active { transform: translateY(1px); }
.arl-btn:focus-visible, .adg-btn:focus-visible, .anl-btn:focus-visible, .ast-btn:focus-visible {
    outline: 2px solid var(--arl-accent); outline-offset: 2px;
}
.arl-btn--primary, .adg-btn--primary, .anl-btn--primary, .ast-btn--primary {
    background: var(--arl-accent); border-color: var(--arl-accent); color: #fff; font-weight: 600;
}
.arl-btn--primary:hover, .adg-btn--primary:hover, .anl-btn--primary:hover, .ast-btn--primary:hover {
    background: #b91c1c; border-color: #b91c1c;
}
.arl-btn--danger { color: #fca5a5; border-color: rgba(239, 68, 68, .35); }
.arl-btn--danger:hover { background: rgba(239, 68, 68, .12); }
.arl-btn--warning { color: #fbbf24; border-color: rgba(245, 158, 11, .35); }
.arl-btn--warning:hover { background: var(--arl-amber-soft); }
.arl-btn--ghost { background: transparent; border-color: transparent; color: var(--arl-text-2); }
.arl-btn--ghost:hover { color: var(--arl-text); background: var(--arl-bg-soft); }

.arl-search, .adg-search {
    flex: 1 1 220px; min-width: 0;
    display: flex; align-items: center; gap: 8px;
    padding: 0 12px; height: var(--arl-tap);
    background: var(--arl-bg-2); border: 1px solid var(--arl-card-line);
    border-radius: var(--arl-radius-sm);
}
.arl-search input, .adg-search input {
    flex: 1; border: 0; background: transparent;
    color: var(--arl-text); font-size: var(--arl-input-fs); outline: 0;
}
.arl-search i, .adg-search i { color: var(--arl-text-3); }

.arl-empty, .adg-empty, .anl-empty, .ast-empty {
    text-align: center; padding: 56px 20px;
    color: var(--arl-text-2); background: var(--arl-card);
    border: 1px dashed var(--arl-card-line-strong);
    border-radius: var(--arl-radius-lg);
}
.arl-empty__icon, .adg-empty__icon { font-size: 2.5rem; margin-bottom: 12px; color: var(--arl-text-3); }

.arl-skel, .adg-skel {
    height: 92px;
    background: linear-gradient(90deg, rgba(255,255,255,.02) 0%, rgba(255,255,255,.06) 50%, rgba(255,255,255,.02) 100%);
    background-size: 200% 100%;
    animation: arlShimmer 1.4s ease-in-out infinite;
    border-radius: var(--arl-radius-md); margin-bottom: 10px;
}
@keyframes arlShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* RELEASES */
.arl-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 720px) { .arl-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media (min-width: 1180px) { .arl-grid { grid-template-columns: repeat(3, 1fr); } }

.arl-card {
    position: relative; display: flex; flex-direction: column; gap: 10px;
    padding: var(--arl-pad-mobile);
    background: var(--arl-card); border: 1px solid var(--arl-card-line);
    border-radius: var(--arl-radius-lg);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    transition: border-color .18s, transform .18s, box-shadow .18s;
    cursor: pointer; text-align: left; width: 100%; overflow: hidden;
}
@media (min-width: 768px) { .arl-card { padding: 18px; } }
.arl-card:hover { border-color: var(--arl-accent-line); transform: translateY(-1px); box-shadow: var(--arl-shadow); }
.arl-card:focus-visible { outline: 2px solid var(--arl-accent); outline-offset: 2px; }
.arl-card.is-rolled-back { opacity: .55; }
.arl-card.is-rolled-back::after {
    content: 'ROLLED BACK'; position: absolute; top: 10px; right: 10px;
    font: 700 9px/1 var(--arl-mono); letter-spacing: .12em; color: #fca5a5;
    background: rgba(239, 68, 68, .14); border: 1px solid rgba(239, 68, 68, .35);
    padding: 4px 7px; border-radius: 4px;
}
.arl-card.is-force {
    border-color: rgba(245, 158, 11, .35);
    background: linear-gradient(135deg, var(--arl-amber-soft) 0%, var(--arl-card) 65%);
}

.arl-card__head { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.arl-card__version {
    display: inline-flex; align-items: center; gap: 6px;
    font: 700 1.05rem/1 var(--arl-mono); color: var(--arl-text);
    background: var(--arl-bg-soft); border: 1px solid var(--arl-card-line-strong);
    padding: 6px 10px; border-radius: var(--arl-radius-sm); letter-spacing: .02em;
}
.arl-card__version i { font-size: .8em; color: var(--arl-accent); }

.arl-pill {
    display: inline-flex; align-items: center; gap: 5px;
    height: 22px; padding: 0 9px;
    font: 600 10.5px/1 var(--arl-mono); letter-spacing: .08em; text-transform: uppercase;
    border-radius: 999px; border: 1px solid transparent; white-space: nowrap;
}
.arl-pill--stable { color: #fff; background: var(--arl-accent); border-color: var(--arl-accent); }
.arl-pill--beta { color: #fbbf24; background: var(--arl-amber-soft); border-color: rgba(245,158,11,.35); }
.arl-pill--alpha { color: #c4b5fd; background: var(--arl-violet-soft); border-color: rgba(139,92,246,.35); }
.arl-pill--draft { color: var(--arl-text-2); background: var(--arl-slate-soft); border-color: rgba(100,116,139,.35); }
.arl-pill--installer { color: #6ee7b7; background: var(--arl-emerald-soft); border-color: rgba(16,185,129,.35); }
.arl-pill--update { color: #93c5fd; background: rgba(59, 130, 246, .12); border-color: rgba(59, 130, 246, .35); }
.arl-pill--critical { color: #fff; background: rgba(239, 68, 68, .9); border-color: rgba(239,68,68,.9); }
.arl-pill--force {
    color: #fbbf24; background: var(--arl-amber-soft); border-color: rgba(245,158,11,.5);
    animation: arlPulse 2s ease-in-out infinite;
}
@keyframes arlPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, .35); }
    50% { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0); }
}

.arl-card__meta {
    display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center;
    color: var(--arl-text-2); font-size: 0.79rem;
}
.arl-card__meta-item { display: inline-flex; align-items: center; gap: 5px; line-height: 1; }
.arl-card__meta-item i { color: var(--arl-text-3); width: 11px; text-align: center; }
.arl-card__meta-item .arl-mono { font: 500 0.78rem var(--arl-mono); color: var(--arl-text-2); }

.arl-card__changelog {
    color: var(--arl-text-2); font-size: 0.83rem; line-height: 1.55;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden; white-space: pre-line; margin: 4px 0 0;
}
.arl-card__changelog:empty, .arl-card__changelog.is-empty { color: var(--arl-text-3); font-style: italic; }

.arl-card__stats {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
    padding: 10px 0 4px; border-top: 1px dashed var(--arl-card-line);
}
.arl-stat {
    display: flex; flex-direction: column; gap: 2px;
    font-size: .68rem; text-transform: uppercase; letter-spacing: .08em;
    color: var(--arl-text-3); text-align: center;
}
.arl-stat__value {
    font: 600 0.95rem var(--arl-mono); color: var(--arl-text);
    text-transform: none; letter-spacing: 0;
}

.arl-card__actions {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding-top: 8px; border-top: 1px solid var(--arl-card-line);
}
.arl-card__actions .arl-btn { padding: 8px 11px; min-height: 38px; font-size: .8rem; flex: 1 1 auto; }
@media (max-width: 480px) { .arl-card__actions .arl-btn { flex: 1 1 calc(50% - 3px); } }

.arl-upload {
    background: var(--arl-card); border: 1px solid var(--arl-accent-line);
    border-radius: var(--arl-radius-lg); padding: var(--arl-pad-mobile); margin-bottom: 14px;
}
@media (min-width: 768px) { .arl-upload { padding: var(--arl-pad-desk); } }
.arl-upload h3 { margin: 0 0 14px; font-size: 0.95rem; font-weight: 700; color: var(--arl-text); }
.arl-upload__grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 12px; }
@media (min-width: 700px) { .arl-upload__grid { grid-template-columns: 1fr 160px 200px; } }

.arl-field { display: flex; flex-direction: column; gap: 6px; }
.arl-field label {
    font: 600 11px/1 var(--arl-mono); letter-spacing: .08em;
    color: var(--arl-text-3); text-transform: uppercase;
}
.arl-field input, .arl-field select, .arl-field textarea {
    width: 100%; min-height: var(--arl-tap); padding: 10px 12px;
    background: var(--arl-bg-2); border: 1px solid var(--arl-card-line-strong);
    border-radius: var(--arl-radius-sm); color: var(--arl-text);
    font-size: var(--arl-input-fs); outline: 0; transition: border-color .15s;
}
.arl-field textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
.arl-field input:focus, .arl-field select:focus, .arl-field textarea:focus {
    border-color: var(--arl-accent); box-shadow: 0 0 0 3px var(--arl-accent-soft);
}
.arl-field__hint { font-size: .76rem; color: var(--arl-text-3); }

/* DRAWER (Releases & Diagnostics) */
.arl-drawer-overlay, .adg-drawer-overlay {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, .65); backdrop-filter: blur(4px);
    z-index: 9998; opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.arl-drawer-overlay.is-open, .adg-drawer-overlay.is-open { opacity: 1; pointer-events: auto; }

.arl-drawer, .adg-drawer {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(720px, 100vw);
    background: #0c0f1c; border-left: 1px solid var(--arl-card-line-strong);
    box-shadow: -16px 0 60px rgba(0, 0, 0, .6);
    z-index: 9999; display: flex; flex-direction: column;
    transform: translateX(100%); transition: transform .3s cubic-bezier(.4, 0, .2, 1);
    overflow: hidden;
}
.arl-drawer.is-open, .adg-drawer.is-open { transform: translateX(0); }

@media (max-width: 768px) {
    .arl-drawer, .adg-drawer {
        width: 100vw; height: 100dvh; border-left: 0;
        padding-bottom: env(safe-area-inset-bottom);
    }
}

.arl-drawer__head, .adg-drawer__head {
    display: flex; align-items: center; gap: 10px;
    padding: 14px var(--arl-pad-mobile);
    border-bottom: 1px solid var(--arl-card-line);
    background: var(--arl-bg-2); flex-shrink: 0;
}
@media (min-width: 768px) {
    .arl-drawer__head, .adg-drawer__head { padding: 16px var(--arl-pad-desk); }
}
.arl-drawer__title, .adg-drawer__title {
    flex: 1; margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--arl-text);
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0;
}
.arl-drawer__close, .adg-drawer__close {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--arl-tap); height: var(--arl-tap);
    border-radius: var(--arl-radius-sm); background: transparent;
    border: 1px solid var(--arl-card-line); color: var(--arl-text-2);
    cursor: pointer; flex-shrink: 0;
}
.arl-drawer__close:hover, .adg-drawer__close:hover { color: var(--arl-text); border-color: var(--arl-card-line-strong); }
.arl-drawer__close:focus-visible, .adg-drawer__close:focus-visible { outline: 2px solid var(--arl-accent); outline-offset: 2px; }

.arl-drawer__body, .adg-drawer__body {
    flex: 1; overflow-y: auto; padding: var(--arl-pad-mobile);
    -webkit-overflow-scrolling: touch;
}
@media (min-width: 768px) {
    .arl-drawer__body, .adg-drawer__body { padding: var(--arl-pad-desk); }
}

.arl-drawer__section, .adg-drawer__section { margin-bottom: 22px; }
.arl-drawer__section h4, .adg-drawer__section h4 {
    margin: 0 0 10px; font: 600 11px/1 var(--arl-mono); letter-spacing: .12em;
    color: var(--arl-text-3); text-transform: uppercase;
}

.arl-changelog-pre {
    margin: 0; padding: 14px;
    background: var(--arl-bg-2); border: 1px solid var(--arl-card-line);
    border-radius: var(--arl-radius-sm);
    color: var(--arl-text); font-size: 0.84rem; line-height: 1.65;
    white-space: pre-wrap; max-height: 420px; overflow-y: auto;
}

.arl-meta-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 540px) { .arl-meta-grid { grid-template-columns: repeat(2, 1fr); } }
.arl-meta-row {
    display: flex; flex-direction: column; gap: 3px;
    padding: 10px 12px; background: var(--arl-bg-soft);
    border: 1px solid var(--arl-card-line); border-radius: var(--arl-radius-sm);
}
.arl-meta-row__label {
    font: 600 10px/1 var(--arl-mono); letter-spacing: .1em;
    color: var(--arl-text-3); text-transform: uppercase;
}
.arl-meta-row__value {
    font: 500 0.86rem/1.4 var(--arl-mono); color: var(--arl-text); word-break: break-all;
}

.arl-drawer__actions, .adg-drawer__actions {
    display: flex; flex-wrap: wrap; gap: 8px;
    padding: 14px var(--arl-pad-mobile);
    border-top: 1px solid var(--arl-card-line);
    background: var(--arl-bg-2); flex-shrink: 0;
    padding-bottom: max(14px, env(safe-area-inset-bottom));
}
@media (min-width: 768px) {
    .arl-drawer__actions, .adg-drawer__actions { padding: 16px var(--arl-pad-desk); }
}
.arl-drawer__actions .arl-btn, .adg-drawer__actions .adg-btn { flex: 1 1 auto; min-width: 120px; }

/* DIAGNOSTICS */
.adg-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 720px) { .adg-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px) { .adg-grid { grid-template-columns: repeat(3, 1fr); } }

.adg-card {
    display: flex; flex-direction: column; gap: 8px;
    padding: 14px var(--arl-pad-mobile);
    background: var(--arl-card); border: 1px solid var(--arl-card-line);
    border-radius: var(--arl-radius-md); cursor: pointer;
    transition: border-color .18s, transform .18s, box-shadow .18s;
    text-align: left; width: 100%;
}
.adg-card:hover { border-color: var(--arl-accent-line); transform: translateY(-1px); box-shadow: var(--arl-shadow); }
.adg-card:focus-visible { outline: 2px solid var(--arl-accent); outline-offset: 2px; }

.adg-card__id {
    display: inline-flex; align-items: center; gap: 6px;
    font: 700 0.95rem var(--arl-mono); color: var(--arl-accent);
    background: var(--arl-accent-soft); border: 1px solid var(--arl-accent-line);
    padding: 5px 9px; border-radius: 6px; width: max-content; letter-spacing: .04em;
}
.adg-card__id i { font-size: .85em; opacity: .8; }

.adg-card__email { font-size: 0.86rem; color: var(--arl-text); font-weight: 500; word-break: break-word; }
.adg-card__email.is-anon { color: var(--arl-text-3); font-style: italic; }

.adg-card__meta {
    display: flex; flex-wrap: wrap; gap: 6px 12px;
    color: var(--arl-text-2); font-size: 0.78rem;
}
.adg-card__meta-item { display: inline-flex; align-items: center; gap: 5px; }
.adg-card__meta-item i { color: var(--arl-text-3); font-size: .78em; }
.adg-card__meta-item.is-mono { font-family: var(--arl-mono); }

.adg-card__date { font-size: 0.74rem; color: var(--arl-text-3); }

.adg-card__actions {
    display: flex; gap: 6px; padding-top: 6px;
    border-top: 1px solid var(--arl-card-line);
}

.adg-log {
    margin: 0; padding: 14px;
    background: #05070f; border: 1px solid var(--arl-card-line);
    border-radius: var(--arl-radius-sm);
    color: #b8c0d8; font: 12px/1.55 var(--arl-mono);
    white-space: pre; overflow-x: auto; overflow-y: auto;
    max-height: 480px; -webkit-overflow-scrolling: touch;
}

.adg-toggle-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.adg-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px; min-height: 36px;
    font: 600 11px/1 var(--arl-mono); letter-spacing: .06em; text-transform: uppercase;
    color: var(--arl-text-2); background: var(--arl-bg-2);
    border: 1px solid var(--arl-card-line); border-radius: 999px; cursor: pointer;
}
.adg-toggle.is-active { color: var(--arl-accent); background: var(--arl-accent-soft); border-color: var(--arl-accent-line); }

/* NEWSLETTER */
.anl-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, .65); backdrop-filter: blur(4px);
    z-index: 10000;
    display: flex; align-items: stretch; justify-content: center;
    padding: 0;
}
@media (min-width: 768px) { .anl-modal-overlay { align-items: center; padding: 24px; } }

.anl-modal {
    position: relative; width: 100%; max-width: 920px;
    max-height: 100dvh;
    background: #0c0f1c; border: 1px solid var(--arl-card-line-strong);
    box-shadow: var(--arl-shadow-lg);
    display: flex; flex-direction: column; overflow: hidden;
}
@media (min-width: 768px) { .anl-modal { max-height: 92vh; border-radius: var(--arl-radius-lg); } }
@media (max-width: 767.98px) { .anl-modal { padding-bottom: env(safe-area-inset-bottom); } }

.anl-modal__head {
    display: flex; align-items: center; gap: 10px;
    padding: 14px var(--arl-pad-mobile);
    background: var(--arl-bg-2); border-bottom: 1px solid var(--arl-card-line);
    flex-shrink: 0;
}
@media (min-width: 768px) { .anl-modal__head { padding: 14px 20px; } }
.anl-modal__title {
    flex: 1; margin: 0; font-size: 1rem; font-weight: 700; color: var(--arl-text);
    display: inline-flex; align-items: center; gap: 10px;
}
.anl-modal__title i { color: var(--arl-accent); }
.anl-modal__close {
    width: var(--arl-tap); height: var(--arl-tap);
    border-radius: var(--arl-radius-sm); background: transparent;
    border: 1px solid var(--arl-card-line); color: var(--arl-text-2);
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.anl-modal__close:hover { color: var(--arl-text); }
.anl-modal__close:focus-visible { outline: 2px solid var(--arl-accent); outline-offset: 2px; }

.anl-modal__body {
    flex: 1; overflow-y: auto; padding: var(--arl-pad-mobile);
    display: flex; flex-direction: column; gap: 12px;
    -webkit-overflow-scrolling: touch;
}
@media (min-width: 768px) { .anl-modal__body { padding: 18px 20px; } }

.anl-fields { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 640px) { .anl-fields { grid-template-columns: 1fr 1fr; } }

.anl-toolbar-edit {
    display: flex; flex-wrap: wrap; gap: 4px; padding: 6px;
    background: var(--arl-bg-2); border: 1px solid var(--arl-card-line);
    border-bottom: 0;
    border-radius: var(--arl-radius-sm) var(--arl-radius-sm) 0 0;
    align-items: center;
}
.anl-tb-btn {
    min-width: 36px; height: 36px;
    border-radius: 6px; background: transparent; border: 1px solid transparent;
    color: var(--arl-text-2); cursor: pointer; font-size: 0.85rem;
    display: inline-flex; align-items: center; justify-content: center;
}
.anl-tb-btn:hover { background: var(--arl-bg-soft); color: var(--arl-text); }
.anl-tb-btn:focus-visible { outline: 2px solid var(--arl-accent); outline-offset: 1px; }
.anl-tb-divider { width: 1px; height: 22px; background: var(--arl-card-line); margin: 0 4px; }
.anl-tb-color {
    width: 32px; height: 32px; padding: 0;
    border: 1px solid var(--arl-card-line); border-radius: 6px;
    background: transparent; cursor: pointer;
}

.anl-body {
    flex: 1; min-height: 240px; padding: 14px;
    background: var(--arl-bg-2); border: 1px solid var(--arl-card-line);
    border-radius: 0 0 var(--arl-radius-sm) var(--arl-radius-sm);
    color: var(--arl-text); font-size: var(--arl-input-fs);
    line-height: 1.65; overflow-y: auto; outline: 0;
}
.anl-body img { max-width: 100%; height: auto; border-radius: 6px; }
@media (max-width: 767.98px) { .anl-body { min-height: 180px; } }

.anl-foot {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    padding: 12px var(--arl-pad-mobile);
    border-top: 1px solid var(--arl-card-line);
    background: var(--arl-bg-2); flex-shrink: 0;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
}
@media (min-width: 768px) { .anl-foot { padding: 12px 20px; } }
@media (max-width: 767.98px) {
    .anl-foot { position: sticky; bottom: 0; }
    .anl-foot .anl-btn--primary { flex: 1; }
}

.anl-hint {
    font-size: 0.74rem; color: var(--arl-text-3); font-style: italic;
    display: inline-flex; align-items: center; gap: 5px; flex: 1 1 100%;
}
@media (min-width: 540px) { .anl-hint { flex: 1; margin-left: auto; } }
.anl-hint i { color: var(--arl-text-2); }

.anl-recip-count {
    font: 600 11px/1 var(--arl-mono); letter-spacing: .04em;
    color: var(--arl-accent); background: var(--arl-accent-soft);
    border: 1px solid var(--arl-accent-line);
    padding: 4px 8px; border-radius: 999px; text-transform: uppercase;
}

.anl-history { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 720px) { .anl-history { grid-template-columns: repeat(2, 1fr); } }
.anl-history__card {
    padding: 12px var(--arl-pad-mobile);
    background: var(--arl-card); border: 1px solid var(--arl-card-line);
    border-radius: var(--arl-radius-md);
}
.anl-history__subject { font-weight: 600; color: var(--arl-text); margin: 0 0 6px; }
.anl-history__meta { font-size: 0.78rem; color: var(--arl-text-2); display: flex; gap: 12px; flex-wrap: wrap; }

/* SETTINGS */
.ast-shell { display: flex; flex-direction: column; gap: 14px; padding-bottom: 80px; }

.ast-card {
    background: var(--arl-card); border: 1px solid var(--arl-card-line);
    border-radius: var(--arl-radius-lg); overflow: hidden;
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.ast-card__head {
    padding: 14px var(--arl-pad-mobile);
    border-bottom: 1px solid var(--arl-card-line);
    display: flex; align-items: center; gap: 10px;
}
@media (min-width: 768px) { .ast-card__head { padding: 16px var(--arl-pad-desk); } }
.ast-card__head i {
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--arl-accent-soft); color: var(--arl-accent);
    border-radius: 8px;
}
.ast-card__title { margin: 0; flex: 1; font-size: 0.98rem; font-weight: 700; color: var(--arl-text); }
.ast-card__sub { font-size: 0.78rem; color: var(--arl-text-3); margin: 2px 0 0; }
.ast-card__body {
    padding: var(--arl-pad-mobile);
    display: grid; grid-template-columns: 1fr; gap: 14px;
}
@media (min-width: 768px) {
    .ast-card__body { padding: var(--arl-pad-desk); grid-template-columns: repeat(2, 1fr); }
    .ast-field--full { grid-column: 1 / -1; }
}

.ast-field { display: flex; flex-direction: column; gap: 6px; }
.ast-field label {
    font: 600 11px/1 var(--arl-mono); letter-spacing: .08em;
    color: var(--arl-text-3); text-transform: uppercase;
}
.ast-field input, .ast-field select, .ast-field textarea {
    width: 100%; min-height: var(--arl-tap); padding: 10px 12px;
    background: var(--arl-bg-2); border: 1px solid var(--arl-card-line-strong);
    border-radius: var(--arl-radius-sm); color: var(--arl-text);
    font-size: var(--arl-input-fs); outline: 0;
    transition: border-color .15s, box-shadow .15s;
}
.ast-field textarea { min-height: 80px; resize: vertical; line-height: 1.5; }
.ast-field input:focus, .ast-field select:focus, .ast-field textarea:focus {
    border-color: var(--arl-accent); box-shadow: 0 0 0 3px var(--arl-accent-soft);
}
.ast-field__hint { font-size: 0.78rem; color: var(--arl-text-3); line-height: 1.4; }

.ast-savebar {
    position: sticky; bottom: 0; margin-top: 14px;
    padding: 12px var(--arl-pad-mobile);
    background: rgba(12, 15, 28, .92); border: 1px solid var(--arl-card-line-strong);
    border-radius: var(--arl-radius-md);
    display: flex; align-items: center; gap: 10px;
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    z-index: 5;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
}
.ast-savebar__hint { flex: 1; font-size: 0.78rem; color: var(--arl-text-2); }
.ast-savebar__hint.is-dirty { color: var(--arl-amber); }

/* Mobile data-label fallback for any leftover tables */
@media (max-width: 640px) {
    .arl-row-table { display: block; }
    .arl-row-table thead { display: none; }
    .arl-row-table tbody, .arl-row-table tr { display: block; }
    .arl-row-table tr {
        margin-bottom: 10px; padding: 12px;
        background: var(--arl-card); border: 1px solid var(--arl-card-line);
        border-radius: var(--arl-radius-md);
    }
    .arl-row-table td {
        display: flex; justify-content: space-between; align-items: center; gap: 10px;
        padding: 6px 0; border: 0; font-size: .84rem;
    }
    .arl-row-table td::before {
        content: attr(data-label);
        font: 600 10px/1 var(--arl-mono); letter-spacing: .08em;
        color: var(--arl-text-3); text-transform: uppercase; flex-shrink: 0;
    }
}


/* light-theme override block (auto-generated) */
[data-theme="light"] {
    --arl-accent-soft: rgba(220, 38, 38, .12);
    --arl-accent-line: rgba(220, 38, 38, .32);
    --arl-amber-soft: rgba(245, 158, 11, .12);
    --arl-emerald-soft: rgba(16, 185, 129, .12);
    --arl-violet-soft: rgba(139, 92, 246, .12);
    --arl-slate-soft: rgba(100, 116, 139, .14);
    --arl-card: rgba(255, 254, 248, .92);
    --arl-card-line: rgba(20, 18, 12, .10);
    --arl-card-line-strong: rgba(20, 18, 12, .16);
    --arl-text: #1A1A1F;
    --arl-text-2: #3B3B3D;
    --arl-text-3: #6F6E6A;
    --arl-bg-soft: rgba(20, 18, 12, .03);
    --arl-bg-2: rgba(255, 254, 248, .92);
    --arl-shadow: 0 8px 24px rgba(120, 80, 40, .18);
    --arl-shadow-lg: 0 24px 80px rgba(120, 80, 40, .28);
}


/* ═════════════════════════════════════════════════════════════════════════
   light-theme hardcoded overrides
   ═════════════════════════════════════════════════════════════════════════ */

[data-theme="light"] .arl-drawer-overlay,
[data-theme="light"] .adg-drawer-overlay,
[data-theme="light"] .anl-modal-overlay {
    background: rgba(20, 18, 12, 0.45);
}

[data-theme="light"] .arl-drawer,
[data-theme="light"] .adg-drawer {
    background: #FFFEF8;
    box-shadow: -16px 0 60px rgba(120, 80, 40, 0.30);
}

[data-theme="light"] .adg-log {
    background: #F5F1E8;
}

[data-theme="light"] .anl-modal {
    background: #FFFEF8;
}

[data-theme="light"] .ast-savebar {
    background: rgba(255, 254, 248, 0.94);
}

/* ═══════════════════════════════════════════════════════════════════════════
   scroll-x guard 2026-05-03
   Cause root: arl-drawer__actions buttons min-width:120px, pre code blocks
   (changelog text) avec overflow-x:auto déjà set ligne 394. Grids responsifs
   bien gérés (1fr → 2 → 3 cols selon breakpoint). On renforce containment.
   ═══════════════════════════════════════════════════════════════════════════ */
.arl-wrap,
.arl-shell,
.arl-grid,
.arl-card,
.arl-card__body,
.arl-card__head,
.arl-card__actions,
.arl-meta-grid,
.arl-upload,
.arl-upload__grid,
.arl-drawer,
.arl-drawer__body,
.arl-drawer__actions,
.adg-grid,
.adg-drawer,
.anl-fields,
.anl-history,
.ast-card,
.ast-card__body {
    max-width: 100%;
    min-width: 0;
}
.arl-card,
.adg-drawer,
.arl-drawer { overflow: hidden; }

/* Code blocks (changelogs, diff text) - already overflow-x:auto inline */
.arl-card pre,
.arl-card code,
.adg-drawer pre,
.adg-drawer code {
    max-width: 100%;
    overflow-x: auto;
    word-break: break-word;
    white-space: pre-wrap;
}

/* Drawer actions buttons : min-width:120px ok desktop, sur mobile flex-wrap */
@media (max-width: 480px) {
    .arl-drawer__actions .arl-btn,
    .adg-drawer__actions .adg-btn {
        min-width: 0 !important;
        flex: 1 1 calc(50% - 4px);
    }
}

/* SHA256 / version strings : break */
.arl-meta-grid code,
.arl-card code { overflow-wrap: anywhere; word-break: break-all; }

/* Upload grid : 1fr 160px 200px desktop → 1fr ≤700px (déjà set). OK. */
.arl-upload__grid > * { min-width: 0; }