/* TweaxHub UX — couche additive (design original) */
:root{
  --tx-accent:#fff; --tx-ease:cubic-bezier(.22,1,.36,1);
  --tx-surface:rgba(18,18,20,.72); --tx-line:rgba(255,255,255,.09);
  --tx-shadow:0 18px 50px -18px rgba(0,0,0,.7), 0 2px 0 rgba(255,255,255,.04) inset;
}
::selection{background:rgba(255,255,255,.85);color:#0a0a0a}
html{scrollbar-width:thin;scrollbar-color:#2a2a2e transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#26262a;border-radius:10px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#3a3a40;background-clip:content-box;border:2px solid transparent}

/* Accessibilité : focus visible partout */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid #fff;outline-offset:3px;border-radius:8px}

/* Barre de navigation en verre dépoli */
#navbar{backdrop-filter:saturate(160%) blur(18px);-webkit-backdrop-filter:saturate(160%) blur(18px);
  background:rgba(8,8,9,.62);border-bottom:1px solid var(--tx-line);transition:background .3s,box-shadow .3s}
#navbar.tx-scrolled{background:rgba(8,8,9,.86);box-shadow:0 10px 30px -20px #000}

/* Barre de progression de scroll */
#tx-progress{position:fixed;inset:0 0 auto 0;height:2px;z-index:9999;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--tx-accent));transform-origin:left;transform:scaleX(0)}

/* Boutons : micro-interactions */
.btn{transition:transform .25s var(--tx-ease),box-shadow .25s,background .25s,border-color .25s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.97)}

/* Cartes : relief + survol + reflet qui suit la souris */
.channel-card,.feature-card,.hero-card,.group-card,.ban-card,.stat-item,.step-card,.cat-item{position:relative;transition:transform .35s var(--tx-ease),border-color .3s,box-shadow .35s,background .3s}
.channel-card:hover,.feature-card:hover,.hero-card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.22);box-shadow:var(--tx-shadow)}
.channel-card::after,.feature-card::after,.hero-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.09),transparent 60%);transition:opacity .3s}
.channel-card:hover::after,.feature-card:hover::after,.hero-card:hover::after{opacity:1}

/* Apparition au scroll */
.tx-reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--tx-ease),transform .7s var(--tx-ease)}
.tx-reveal.tx-in{opacity:1;transform:none}

/* Squelettes de chargement */
.tx-skeleton{position:relative;overflow:hidden;background:#141416;border-radius:12px;min-height:1em}
.tx-skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent);animation:tx-shimmer 1.4s infinite}
@keyframes tx-shimmer{to{transform:translateX(100%)}}

/* Lecteur latéral : verre + halo quand ça joue */
.sidebar-now-playing{border:1px solid var(--tx-line);border-radius:16px;background:var(--tx-surface);
  backdrop-filter:blur(14px);transition:box-shadow .5s,border-color .5s}
body.tx-playing .sidebar-now-playing{border-color:rgba(255,255,255,.2);box-shadow:0 0 38px -12px var(--tx-accent)}
.mini-player-art{border-radius:12px;overflow:hidden}
body.tx-playing .mini-player-title::before{content:"";display:inline-block;width:8px;height:8px;margin-right:7px;border-radius:50%;
  background:#10B981;box-shadow:0 0 0 0 rgba(16,185,129,.6);animation:tx-pulse 1.8s infinite}
@keyframes tx-pulse{70%{box-shadow:0 0 0 8px rgba(16,185,129,0)}100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}}

/* Toasts */
#tx-toasts{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;z-index:10001;align-items:center;pointer-events:none}
.tx-toast{padding:10px 16px;border-radius:999px;background:rgba(20,20,22,.92);border:1px solid var(--tx-line);
  color:#f4f4f5;font:500 13px Inter,sans-serif;box-shadow:var(--tx-shadow);backdrop-filter:blur(12px);
  animation:tx-toast-in .4s var(--tx-ease) both}
.tx-toast.out{animation:tx-toast-out .3s ease forwards}
@keyframes tx-toast-in{from{opacity:0;transform:translateY(12px) scale(.96)}}
@keyframes tx-toast-out{to{opacity:0;transform:translateY(8px)}}

/* Palette de commandes (Ctrl+K) */
#tx-palette{position:fixed;inset:0;z-index:10000;display:none;align-items:flex-start;justify-content:center;padding-top:14vh;
  background:rgba(0,0,0,.55);backdrop-filter:blur(6px)}
#tx-palette.open{display:flex;animation:tx-fade .2s ease}
@keyframes tx-fade{from{opacity:0}}
.tx-pal-box{width:min(620px,92vw);background:rgba(16,16,18,.96);border:1px solid rgba(255,255,255,.12);border-radius:20px;
  box-shadow:0 40px 90px -20px #000;overflow:hidden;animation:tx-pop .3s var(--tx-ease)}
@keyframes tx-pop{from{opacity:0;transform:translateY(-10px) scale(.97)}}
.tx-pal-input{width:100%;padding:18px 22px;background:transparent;border:0;border-bottom:1px solid var(--tx-line);
  color:#fff;font:500 16px Inter,sans-serif;outline:none}
.tx-pal-list{max-height:min(52vh,420px);overflow:auto;padding:8px}
.tx-pal-group{padding:10px 14px 4px;font:600 11px Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#71717a}
.tx-pal-item{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:12px;color:#d4d4d8;cursor:pointer;font:500 14px Inter,sans-serif}
.tx-pal-item[aria-selected="true"]{background:rgba(255,255,255,.09);color:#fff}
.tx-pal-item kbd{margin-left:auto}
.tx-pal-empty{padding:28px;text-align:center;color:#71717a;font:14px Inter,sans-serif}
kbd.tx-kbd,.tx-pal-item kbd{font:600 11px Inter,sans-serif;padding:3px 7px;border-radius:6px;background:#1f1f23;border:1px solid #2e2e34;color:#a1a1aa}
.tx-help{display:grid;grid-template-columns:auto 1fr;gap:10px 18px;padding:22px 24px;font:14px Inter,sans-serif;color:#d4d4d8}

@media (hover:none){.channel-card:hover,.feature-card:hover,.hero-card:hover{transform:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .tx-reveal{opacity:1;transform:none}}