/* =============================================================================
   Entertainment Manager — theme Slifer / Aether sur Bootstrap 5.3 (dark only)
   SEUL fichier de couleurs du projet : zero hex ailleurs (templates, JS).
   Source des valeurs : design-system/colors_and_type.css.
   ========================================================================== */

[data-bs-theme="dark"] {
  color-scheme: dark;

  /* ---- Palette Slifer ---------------------------------------------------- */
  --void: #07080B; --graphite: #0E1117; --titanium: #161A22; --steel: #1F242F; --brushed: #2A3040; --machined: #3A4153;
  --aurora: #F4F6FA; --pearl: #D6DAE3; --mercury: #9099A8; --tungsten: #5E6678; --carbon: #3D4453;
  --hairline: rgba(244, 246, 250, 0.06); --hairline-strong: rgba(244, 246, 250, 0.10); --hairline-bright: rgba(244, 246, 250, 0.18);
  --ion-300: #6FCFE2; --ion-500: #34B0CC; --ion-600: #1E8DA8; --ion-700: #136A82; --ion-glow: rgba(52, 176, 204, 0.18);
  --signal-ok: #5BC97E; --signal-warn: #E8B57A; --signal-danger: #E07060; --signal-info: #6CA7E2;
  --signal-ok-bg: rgba(91, 201, 126, 0.10); --signal-warn-bg: rgba(232, 181, 122, 0.10); --signal-danger-bg: rgba(224, 112, 96, 0.10); --signal-info-bg: rgba(108, 167, 226, 0.10);
  --signal-ok-border: rgba(91, 201, 126, 0.30); --signal-warn-border: rgba(232, 181, 122, 0.30); --signal-danger-border: rgba(224, 112, 96, 0.30); --signal-info-border: rgba(108, 167, 226, 0.30);
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --tr-caps: 0.14em;

  /* ---- Bootstrap -> Slifer ---------------------------------------------- */
  --bs-body-bg: var(--void);
  --bs-body-color: var(--pearl);
  --bs-emphasis-color: var(--aurora);
  --bs-heading-color: var(--aurora);
  --bs-secondary-color: var(--mercury);
  --bs-tertiary-color: var(--tungsten);
  --bs-secondary-bg: var(--steel);
  --bs-tertiary-bg: var(--titanium);
  --bs-border-color: var(--hairline-strong);
  --bs-border-color-translucent: var(--hairline);
  --bs-primary: var(--ion-500); --bs-primary-rgb: 52, 176, 204;
  /* .text-secondary lit --bs-secondary-rgb (couleur de THEME, pas --bs-secondary-color) :
     doit etre un gris lisible, jamais une surface. */
  --bs-secondary: var(--mercury); --bs-secondary-rgb: 144, 153, 168;
  --bs-success: var(--signal-ok); --bs-success-rgb: 91, 201, 126;
  --bs-warning: var(--signal-warn); --bs-warning-rgb: 232, 181, 122;
  --bs-danger: var(--signal-danger); --bs-danger-rgb: 224, 112, 96;
  --bs-info: var(--signal-info); --bs-info-rgb: 108, 167, 226;
  --bs-link-color: var(--ion-500); --bs-link-color-rgb: 52, 176, 204;
  --bs-link-hover-color: var(--ion-300); --bs-link-hover-color-rgb: 111, 207, 226;
  --bs-border-radius: 6px; --bs-border-radius-sm: 4px; --bs-border-radius-lg: 10px; --bs-border-radius-xl: 14px; --bs-border-radius-pill: 999px;
  --bs-font-sans-serif: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bs-font-monospace: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --bs-body-font-size: 0.9375rem;
  --bs-focus-ring-color: rgba(52, 176, 204, 0.45);
}

/* ---- Typographie ---------------------------------------------------------- */
h1, h2, .h1, .h2 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.02em; }
h1, .h1 { font-size: 1.875rem; }
.mono { font-family: var(--bs-font-monospace); }
.tabular { font-variant-numeric: tabular-nums; }
.caps { font-family: var(--bs-font-monospace); font-size: 0.6875rem; font-weight: 500; letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--tungsten); }
.page-head { margin-bottom: 1.25rem; }
.page-head p { max-width: 64ch; }
code { color: var(--ion-300); font-family: var(--bs-font-monospace); font-size: 0.875em; }

/* ---- Layout : sidebar + contenu ------------------------------------------ */
.app-shell { min-height: 100vh; }
@media (min-width: 992px) {
  .app-shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); }
}
/* !important : au-dela de 992px Bootstrap force .offcanvas-lg en background
   transparent, ce qui laisserait passer le fond de page derriere la sidebar. */
.sidebar { background: var(--graphite) !important; border-right: 1px solid var(--hairline); }
.sidebar-body { display: flex; flex-direction: column; padding: 1rem; height: 100%; }
@media (min-width: 992px) { .sidebar { position: sticky; top: 0; height: 100vh; } }
.sidebar-brand { padding: 0.25rem 0.5rem 1.25rem; }
.sidebar-nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar-link { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.75rem; border-radius: var(--bs-border-radius); color: var(--mercury); text-decoration: none; transition: background-color 140ms, color 140ms; }
.sidebar-link:hover { background: var(--steel); color: var(--aurora); }
.sidebar-link.is-active { background: var(--steel); color: var(--aurora); box-shadow: inset 0 0 0 1px var(--hairline-strong); }
.sidebar-link:focus-visible { outline: 2px solid var(--ion-500); outline-offset: 2px; }
.sidebar-link .bi { font-size: 1rem; width: 1.1rem; text-align: center; }
.sidebar-badge { width: 8px; height: 8px; border-radius: 50%; background: var(--ion-500); margin-left: auto; animation: pulse 1.6s ease-in-out infinite; }
.sidebar-spacer { flex: 1; }
.sidebar-footer { border-top: 1px solid var(--hairline); padding-top: 1rem; }
.mobile-topbar { padding: 0.75rem 1rem; background: var(--graphite); border-bottom: 1px solid var(--hairline); }
.app-main { min-width: 0; }
.app-main-inner { padding: 1.5rem 2.5rem 3rem; }  /* pleine largeur : pas de plafond centre */
.page-narrow { max-width: 1200px; }  /* pages de jobs : large mais lisible sur ecran 4K */
.nav-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; background: var(--ion-500); z-index: 1090; }
@keyframes pulse { 50% { opacity: 0.35; } }

/* ---- Logo ---------------------------------------------------------------- */
.app-logo { display: inline-flex; align-items: center; gap: 0.75rem; color: var(--aurora); user-select: none; }
.app-logo-core { fill: var(--ion-500); }
.app-logo-wordmark { display: inline-flex; flex-direction: column; gap: 2px; line-height: 1; }
.app-logo-word { font-family: var(--font-display); font-weight: 500; font-size: 0.9375rem; letter-spacing: -0.03em; }
.app-logo-sub { font-family: var(--bs-font-monospace); font-size: 9px; font-weight: 500; letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--tungsten); }

/* ---- Boutons (Bootstrap 5.3 : variables --bs-btn-* par variante) --------- */
.btn { font-weight: 500; }
.btn-primary { --bs-btn-bg: var(--ion-500); --bs-btn-border-color: var(--ion-500); --bs-btn-color: var(--void); --bs-btn-hover-bg: var(--ion-300); --bs-btn-hover-border-color: var(--ion-300); --bs-btn-hover-color: var(--void); --bs-btn-active-bg: var(--ion-600); --bs-btn-active-border-color: var(--ion-600); --bs-btn-active-color: var(--void); --bs-btn-disabled-bg: var(--ion-700); --bs-btn-disabled-border-color: var(--ion-700); --bs-btn-disabled-color: var(--mercury); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18); }
.btn-secondary { --bs-btn-bg: var(--steel); --bs-btn-border-color: var(--hairline-strong); --bs-btn-color: var(--aurora); --bs-btn-hover-bg: var(--brushed); --bs-btn-hover-border-color: var(--hairline-bright); --bs-btn-hover-color: var(--aurora); --bs-btn-active-bg: var(--brushed); --bs-btn-active-border-color: var(--hairline-bright); --bs-btn-active-color: var(--aurora); --bs-btn-disabled-bg: var(--titanium); --bs-btn-disabled-border-color: var(--hairline); --bs-btn-disabled-color: var(--tungsten); }
.btn-outline-secondary { --bs-btn-color: var(--mercury); --bs-btn-border-color: var(--hairline-strong); --bs-btn-hover-bg: var(--steel); --bs-btn-hover-border-color: var(--hairline-bright); --bs-btn-hover-color: var(--aurora); --bs-btn-active-bg: var(--steel); --bs-btn-active-border-color: var(--ion-500); --bs-btn-active-color: var(--aurora); --bs-btn-disabled-color: var(--tungsten); --bs-btn-disabled-border-color: var(--hairline); }
.btn-danger { --bs-btn-bg: var(--signal-danger-bg); --bs-btn-border-color: var(--signal-danger-border); --bs-btn-color: var(--signal-danger); --bs-btn-hover-bg: rgba(224, 112, 96, 0.18); --bs-btn-hover-border-color: var(--signal-danger); --bs-btn-hover-color: var(--signal-danger); --bs-btn-active-bg: rgba(224, 112, 96, 0.24); --bs-btn-active-border-color: var(--signal-danger); --bs-btn-active-color: var(--signal-danger); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--hairline); --bs-btn-disabled-color: var(--tungsten); }
.btn-link { --bs-btn-color: var(--ion-300); --bs-btn-hover-color: var(--aurora); text-decoration: none; }
.btn-check:checked + .btn-outline-secondary { background: var(--steel); color: var(--aurora); border-color: var(--ion-500); box-shadow: inset 0 0 0 1px var(--ion-glow); }
.btn:focus-visible { box-shadow: 0 0 0 0.2rem var(--bs-focus-ring-color); }
.btn .htmx-indicator { margin-right: 0.35rem; }

/* ---- Cartes, formulaires, tables ----------------------------------------- */
.card { --bs-card-bg: var(--titanium); --bs-card-border-color: transparent; --bs-card-cap-bg: transparent; --bs-card-border-radius: var(--bs-border-radius-lg); box-shadow: inset 0 0 0 1px var(--hairline); }
.form-control, .form-select { background-color: var(--steel); border-color: var(--hairline-strong); color: var(--aurora); }
.form-control::placeholder { color: var(--tungsten); }
.form-control:focus, .form-select:focus { background-color: var(--steel); border-color: var(--ion-500); box-shadow: 0 0 0 0.2rem var(--ion-glow); color: var(--aurora); }
.form-select { --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239099A8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }
.form-check-input { background-color: var(--steel); border-color: var(--hairline-bright); }
.form-check-input:checked { background-color: var(--ion-500); border-color: var(--ion-500); }
.form-check-input:focus { border-color: var(--ion-500); box-shadow: 0 0 0 0.2rem var(--ion-glow); }
.form-switch .form-check-input:checked { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2307080B'/%3e%3c/svg%3e"); }
.form-text { color: var(--tungsten); }
.table { --bs-table-bg: transparent; --bs-table-color: var(--pearl); --bs-table-border-color: var(--hairline); --bs-table-hover-bg: var(--steel); --bs-table-hover-color: var(--aurora); }
.table th { font-family: var(--bs-font-monospace); font-size: 0.6875rem; letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--tungsten); font-weight: 500; white-space: nowrap; }
.th-sort { background: none; border: 0; padding: 0; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.th-sort:hover, .th-sort.is-active { color: var(--aurora); }

/* ---- Badges de statut (seul pill autorise) ------------------------------- */
.badge.status { font-family: var(--bs-font-monospace); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; border-radius: var(--bs-border-radius-pill); padding: 0.3em 0.65em; border: 1px solid var(--hairline-strong); background: var(--steel) !important; color: var(--mercury) !important; }
.badge.status.text-bg-success { background: var(--signal-ok-bg) !important; color: var(--signal-ok) !important; border-color: var(--signal-ok-border); }
.badge.status.text-bg-warning { background: var(--signal-warn-bg) !important; color: var(--signal-warn) !important; border-color: var(--signal-warn-border); }
.badge.status.text-bg-danger { background: var(--signal-danger-bg) !important; color: var(--signal-danger) !important; border-color: var(--signal-danger-border); }
.badge.status.text-bg-info { background: var(--signal-info-bg) !important; color: var(--signal-info) !important; border-color: var(--signal-info-border); }
.badge.status.text-bg-primary { background: var(--ion-glow) !important; color: var(--ion-300) !important; border-color: rgba(52, 176, 204, 0.32); }

/* ---- Progression, compteurs, cartes de job -------------------------------- */
.progress { --bs-progress-bg: var(--steel); --bs-progress-bar-bg: var(--ion-500); height: 6px; }
.live-counters { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.75rem; margin: 0; }
.live-counter { padding: 0.75rem; border-radius: var(--bs-border-radius); background: var(--graphite); box-shadow: inset 0 0 0 1px var(--hairline); }
.live-counter dt { font-family: var(--bs-font-monospace); font-size: 0.6875rem; letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--tungsten); font-weight: 500; }
.live-counter dd { font-size: 1.375rem; color: var(--aurora); margin: 0.25rem 0 0; }
.live-counter--accent dd { color: var(--ion-300); }
.live-counter--warn dd { color: var(--signal-warn); }
.live-counter--danger dd { color: var(--signal-danger); }
.meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.75rem; margin: 0; }
.meta-grid dt { font-family: var(--bs-font-monospace); font-size: 0.6875rem; letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--tungsten); font-weight: 500; }
.meta-grid dd { margin: 0.15rem 0 0; color: var(--aurora); }
.job-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ion-500); animation: pulse 1.2s ease-in-out infinite; }
.job-dot--cancelling { background: var(--signal-warn); }
.result-card--success { box-shadow: inset 0 0 0 1px var(--signal-ok-border); }
.result-card--success .result-card__icon { color: var(--signal-ok); }
.result-card--stopped { box-shadow: inset 0 0 0 1px var(--signal-warn-border); }
.result-card--stopped .result-card__icon { color: var(--signal-warn); }
.result-card--danger { box-shadow: inset 0 0 0 1px var(--signal-danger-border); background: var(--signal-danger-bg); }
.result-card--danger .result-card__icon { color: var(--signal-danger); }
.result-card__icon { font-size: 1.5rem; line-height: 1; }
.alert-card--warning { box-shadow: inset 0 0 0 1px var(--signal-warn-border); background: var(--signal-warn-bg); }
.danger-note { display: flex; gap: 0.6rem; padding: 0.75rem; border-radius: var(--bs-border-radius); background: var(--signal-danger-bg); box-shadow: inset 0 0 0 1px var(--signal-danger-border); color: var(--pearl); font-size: 0.875rem; }
.danger-note .bi { color: var(--signal-danger); }
.steps { list-style: none; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.steps__item { display: flex; align-items: center; gap: 0.75rem; color: var(--tungsten); }
.steps__item[data-state="active"] { color: var(--aurora); }
.steps__item[data-state="done"] { color: var(--mercury); }
.steps__marker { display: inline-flex; width: 20px; height: 20px; align-items: center; justify-content: center; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--hairline-strong); font-size: 0.75rem; flex: 0 0 auto; }
.steps__item[data-state="done"] .steps__marker { color: var(--signal-ok); box-shadow: inset 0 0 0 1px var(--signal-ok-border); }
.steps__marker .spinner-border { width: 12px; height: 12px; border-width: 2px; color: var(--ion-500); }

/* ---- Etats vides, toasts, modale d'auth ---------------------------------- */
.empty-state__icon { font-size: 2.5rem; color: var(--tungsten); }
.empty-state__text { max-width: 44ch; }
.toast-container { position: fixed; bottom: 1rem; right: 1rem; z-index: 1080; display: flex; flex-direction: column; gap: 0.5rem; }
.toast { --bs-toast-bg: var(--steel); --bs-toast-color: var(--aurora); --bs-toast-border-color: var(--hairline-strong); --bs-toast-border-radius: var(--bs-border-radius-lg); box-shadow: inset 0 0 0 1px var(--hairline-strong); }
.toast.text-bg-secondary { background-color: var(--steel) !important; color: var(--aurora) !important; }
.toast.text-bg-danger { background-color: var(--signal-danger-bg) !important; color: var(--signal-danger) !important; box-shadow: inset 0 0 0 1px var(--signal-danger-border); }
.toast-undo { color: var(--ion-300); font-weight: 500; white-space: nowrap; }
.auth-gate { z-index: 1100; }
.auth-gate .modal-content { background: var(--graphite); border: 0; box-shadow: inset 0 0 0 1px var(--hairline-strong); }
.modal-backdrop { --bs-backdrop-bg: var(--void); --bs-backdrop-opacity: 0.82; }
.readout { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1rem; padding: 0.75rem; border-radius: var(--bs-border-radius); background: var(--titanium); box-shadow: inset 0 0 0 1px var(--hairline); font-family: var(--bs-font-monospace); font-size: 0.8125rem; margin: 0; }
.readout dt { color: var(--tungsten); font-weight: 500; }
.readout dd { margin: 0; color: var(--aurora); word-break: break-all; }
.readout dd.is-danger { color: var(--signal-danger); }
.auth-badge .avatar { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; border-radius: 50%; background: var(--steel); color: var(--ion-300); font-family: var(--bs-font-monospace); font-weight: 500; flex: 0 0 auto; }

/* ---- Indicateurs htmx (htmx injecte deja opacity 0/1 sur .htmx-indicator) -- */
.htmx-request .btn { cursor: progress; }

/* ---- Recherche ------------------------------------------------------------ */
.search-field { position: relative; }
.search-field__icon { position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%); color: var(--tungsten); pointer-events: none; }
.search-field__input { padding-left: 2.5rem; }
.index-cta { padding: 0.75rem 1rem; border-radius: var(--bs-border-radius-lg); background: var(--titanium); box-shadow: inset 0 0 0 1px var(--hairline); color: var(--pearl); text-decoration: none; }
.index-cta:hover { box-shadow: inset 0 0 0 1px var(--hairline-bright); color: var(--aurora); }
.index-cta__icon { color: var(--ion-300); font-size: 1.25rem; }
.result__link { color: inherit; text-decoration: none; }
.result:hover { box-shadow: inset 0 0 0 1px var(--hairline-bright); }
.result__thumb { position: relative; flex: 0 0 160px; aspect-ratio: 16 / 9; border-radius: var(--bs-border-radius); overflow: hidden; background: var(--steel); }
.result__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.result__timecode { position: absolute; right: 0.4rem; bottom: 0.4rem; }
.result__avatar { width: 18px; height: 18px; border-radius: 50%; }
.result__snippet { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ask-quote { padding: 0.75rem 1rem; border-left: 2px solid var(--ion-500); background: var(--graphite); border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0; }
@media (max-width: 575px) { .result__link { flex-direction: column; } .result__thumb { flex-basis: auto; } }

/* ---- Chaines -------------------------------------------------------------- */
.col-avatar { width: 48px; }
.channels .avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; display: block; }
.channels .avatar--placeholder { background: var(--steel); }
.channel-link { color: var(--aurora); text-decoration: none; font-weight: 500; }
.channel-link:hover { color: var(--ion-300); }
.channel-row--muted { opacity: 0.55; }

/* ---- Fil d'actualite ------------------------------------------------------- */
.feed-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.feed-grid > .empty-state, .feed-grid > .feed-more, .feed-grid > .feed-end { grid-column: 1 / -1; }
.feed-more, .feed-end { text-align: center; padding: 1rem; color: var(--tungsten); }
.feed-loading { display: block; text-align: center; color: var(--tungsten); padding: 0.5rem; }
.video-card { position: relative; display: flex; flex-direction: column; background: var(--titanium); border-radius: var(--bs-border-radius-lg); box-shadow: inset 0 0 0 1px var(--hairline); overflow: hidden; transition: box-shadow 140ms; }
.video-card:hover { box-shadow: inset 0 0 0 1px var(--hairline-bright); }
.video-card:has(.video-card__link:focus-visible) { box-shadow: inset 0 0 0 2px var(--ion-500); }
/* Enveloppe htmx du lien (porte le PATCH « vu ») : aucune boite, le lien reste l'enfant flex direct de la carte. */
.video-card__hit { display: contents; }
.video-card__link { display: flex; flex-direction: column; color: inherit; text-decoration: none; flex: 1; }
.video-card__media { position: relative; aspect-ratio: 16 / 9; background: var(--steel); }
.video-card__thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-card__duration { position: absolute; right: 0.5rem; bottom: 0.5rem; }
.video-card__body { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.75rem; }
.video-card__title { font-size: 0.9375rem; font-weight: 500; line-height: 1.3; margin: 0; color: var(--aurora); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.video-card__channel { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; color: var(--mercury); min-width: 0; }
.video-card__avatar { width: 20px; height: 20px; border-radius: 50%; flex: 0 0 auto; }
.video-card__avatar--fallback { display: inline-flex; align-items: center; justify-content: center; background: var(--steel); font-size: 0.6875rem; color: var(--ion-300); }
.video-card__meta { font-size: 0.75rem; color: var(--tungsten); margin: 0; }
.video-card__save { position: absolute; top: 0.5rem; right: 0.5rem; width: 32px; height: 32px; border: 0; border-radius: var(--bs-border-radius); background: rgba(7, 8, 11, 0.7); color: var(--aurora); display: inline-flex; align-items: center; justify-content: center; }
.video-card__save:hover, .video-card__save.is-active { background: var(--ion-500); color: var(--void); }
.video-card--seen { opacity: 0.55; }
.video-card--muted { display: none; }
.feed-page:has(#reveal-muted:checked) .video-card--muted { display: flex; opacity: 0.6; }
.feed-topic .feed-topic__label { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: bottom; }
.mute-chip { display: inline-flex; align-items: stretch; border-radius: var(--bs-border-radius); box-shadow: inset 0 0 0 1px var(--hairline-strong); background: var(--steel); overflow: hidden; }
.mute-chip--inactive { opacity: 0.55; }
.mute-chip__toggle, .mute-chip__remove { background: none; border: 0; color: var(--pearl); padding: 0.3rem 0.6rem; font-size: 0.8125rem; }
.mute-chip__toggle:hover, .mute-chip__remove:hover { background: var(--brushed); color: var(--aurora); }
.mute-chip__remove { border-left: 1px solid var(--hairline); color: var(--tungsten); }

/* ---- Fil mobile (/m) -------------------------------------------------------- */
.m-page { padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }
.m-logout { text-align: center; padding: 1rem 0 calc(1rem + env(safe-area-inset-bottom)); }
.m-header { position: sticky; top: 0; z-index: 20; background: var(--graphite); padding: calc(0.5rem + env(safe-area-inset-top)) 1rem 0.75rem; border-bottom: 1px solid var(--hairline); }
.m-header .app-logo-mark { width: 24px; height: 24px; }
.m-content { padding: 0.75rem 1rem 0; }
.m-list { display: flex; flex-direction: column; gap: 0.75rem; margin: 0; }
.m-list > .feed-more, .m-list > .feed-end { list-style: none; }
.m-card { background: var(--titanium); border-radius: var(--bs-border-radius-lg); box-shadow: inset 0 0 0 1px var(--hairline); overflow: hidden; }
.m-card__link { display: flex; gap: 0.75rem; padding: 0.75rem; color: inherit; text-decoration: none; }
.m-card__media { position: relative; flex: 0 0 132px; aspect-ratio: 16 / 9; border-radius: var(--bs-border-radius); overflow: hidden; background: var(--steel); }
.m-card__thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.m-card__duration { position: absolute; right: 0.35rem; bottom: 0.35rem; }
.m-card__text { min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.m-card__title { font-size: 0.9375rem; font-weight: 500; line-height: 1.3; margin: 0; color: var(--aurora); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.m-card__channel { font-size: 0.8125rem; color: var(--mercury); margin: 0; }
.m-card__meta { font-size: 0.75rem; color: var(--tungsten); margin: 0; }
.m-card__buttons { display: flex; align-items: center; gap: 0.25rem; padding: 0 0.5rem 0.5rem; }
.m-card__btn { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 44px; padding: 0 0.75rem; border: 0; border-radius: var(--bs-border-radius); background: transparent; color: var(--mercury); font-size: 0.8125rem; }
.m-card__btn:hover, .m-card__btn:focus-visible { background: var(--steel); color: var(--aurora); }
.m-card__btn.is-active { color: var(--ion-300); }
.m-card__btn--danger { color: var(--signal-danger); }
.dropdown-menu { --bs-dropdown-bg: var(--steel); --bs-dropdown-color: var(--pearl); --bs-dropdown-link-color: var(--pearl); --bs-dropdown-link-hover-bg: var(--brushed); --bs-dropdown-link-hover-color: var(--aurora); --bs-dropdown-border-color: var(--hairline-strong); }
.m-footer-link { display: block; text-align: center; padding: 1.5rem 0; color: var(--tungsten); font-size: 0.8125rem; }
.toast-container--mobile { left: 1rem; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom)); }