/* ══════════════════════════════════════════════════════════════
   HUB V2 — NEXUS TERMINAL Æ.3  ·  Full redesign
   Fonts : DuneRise · AquireLight · Designer
   ══════════════════════════════════════════════════════════════ */

/* ── Custom Fonts ── */
@font-face {
  font-family: 'DuneRise';
  src: url('../fonts/dune_rise/Dune_Rise.ttf') format('truetype'),
       url('../fonts/dune_rise/Dune_Rise.otf') format('opentype');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'AquireLight';
  src: url('../fonts/aquire/AquireLight-YzE0o.otf') format('opentype');
  font-weight: 300; font-display: swap;
}
@font-face {
  font-family: 'Designer';
  src: url('../fonts/designer/Designer/Designer.woff') format('woff'),
       url('../fonts/designer/Designer/Designer.ttf') format('truetype'),
       url('../fonts/designer/Designer/Designer.otf') format('opentype');
  font-weight: 400; font-display: swap;
}

/* ── Token overrides ── */
:root {
  --font-h:    'DuneRise',    'Orbitron',  sans-serif;
  --font-body: 'AquireLight', 'Rajdhani',  sans-serif;
  --font-t:    'Designer',    'Orbitron',  sans-serif;
  --font-b:    'AquireLight', 'Rajdhani',  sans-serif;
  --orange-rgb:  255,152,0;
  --magenta-rgb: 224,64,251;
  --sidebar-w:   244px;
}

/* ── Body ── */
body {
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: .015em;
}

/* ══════════════════════════════════════════════════════════════
   SIDEBAR LAYOUT
   ══════════════════════════════════════════════════════════════ */

.hub-main.active {
  display: flex !important;
  align-items: flex-start;
  padding-top: 0 !important;
  min-height: 100vh;
}

/* ── Sidebar container ── */
.hub-tabs {
  flex-direction: column !important;
  flex-shrink: 0;
  width: var(--sidebar-w) !important;
  min-width: var(--sidebar-w) !important;
  position: fixed !important;
  top: 64px !important;
  left: 0 !important;
  bottom: 0 !important;
  z-index: 100 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: none !important;
  padding: 0 !important;
  background: rgba(2,4,14,.99) !important;
  border-right: 1px solid rgba(var(--cyan-rgb),.08) !important;
  border-bottom: none !important;
  box-shadow: 6px 0 50px rgba(0,0,0,.7), inset -1px 0 0 rgba(var(--cyan-rgb),.04) !important;
}
.hub-tabs::-webkit-scrollbar { display: none !important; }

/* Top accent line */
.hub-tabs::before {
  content: '' !important;
  position: absolute !important;
  top: 0; left: 0; right: 0;
  height: 2px !important;
  background: linear-gradient(90deg,
    transparent,
    rgba(var(--cyan-rgb),.7),
    rgba(var(--violet-rgb),.5),
    transparent) !important;
  pointer-events: none !important;
  animation: none !important;
}

/* Ambient glow on sidebar bottom */
.hub-tabs::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0; left: 0; right: 0;
  height: 120px !important;
  background: radial-gradient(ellipse at bottom center,
    rgba(var(--violet-rgb),.06), transparent 70%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
  animation: none !important;
}

/* ── Sidebar: back link ── */
.hub-tabs > a[href="nexus.html"] {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 16px 20px !important;
  margin: 0 !important;
  font-family: var(--font-m) !important;
  font-size: 0.553rem;font-family:'AquireLight','Rajdhani',sans-serif!important !important;
  letter-spacing: .28em !important;
  color: rgba(var(--cyan-rgb),.3) !important;
  text-decoration: none !important;
  border-left: none !important;
  border-bottom: 1px solid rgba(var(--cyan-rgb),.06) !important;
  clip-path: none !important;
  white-space: nowrap !important;
  transition: color .25s !important;
  opacity: 1 !important;
  background: none !important;
  width: 100% !important;
  justify-content: flex-start !important;
  position: relative; z-index: 1 !important;
}
.hub-tabs > a[href="nexus.html"]:hover {
  color: rgba(var(--cyan-rgb),.65) !important;
  background: rgba(var(--cyan-rgb),.02) !important;
}
.hub-tabs > a[href="nexus.html"] .tab-text { display: inline !important; }

/* ── Sidebar: separator ── */
.hub-tabs > div[style*="width:1px"],
.hub-tabs-sep {
  width: calc(100% - 28px) !important;
  height: 1px !important;
  background: rgba(var(--cyan-rgb),.08) !important;
  margin: 6px 14px !important;
  flex-shrink: 0 !important;
}

/* ── Tab icon (Lucide SVG) ── */
.tab-icon {
  width: 15px !important;
  height: 15px !important;
  stroke: currentColor !important;
  fill: none !important;
  flex-shrink: 0 !important;
  vertical-align: middle !important;
  margin-right: 8px !important;
}

/* ── Slot picker: item without image ── */
.sp-no-img {
  width: 26px !important;
  height: 26px !important;
  opacity: .7 !important;
  flex-shrink: 0 !important;
  display: block !important;
}

/* ── Tab buttons — vertical ── */
.tab-btn {
  width: 100% !important;
  padding: 10px 20px !important;
  border-left: 2px solid transparent !important;
  border-bottom: none !important;
  clip-path: none !important;
  justify-content: flex-start !important;
  white-space: nowrap !important;
  font-family: var(--font-h) !important;
  font-size: .65rem !important;
  letter-spacing: .08em !important;
  text-align: left !important;
  color: rgba(255,255,255,.3) !important;
  background: none !important;
  transition: color .2s, border-color .2s, background .2s, text-shadow .2s !important;
  position: relative !important;
  z-index: 1 !important;
}
/* Kill base ::before & ::after */
.tab-btn::before { display: none !important; }
.tab-btn::after  { display: none !important; }

.tab-btn:hover {
  color: rgba(255,255,255,.7) !important;
  border-left-color: rgba(var(--cyan-rgb),.22) !important;
  background: rgba(var(--cyan-rgb),.025) !important;
}
.tab-btn.active {
  color: #fff !important;
  border-left-color: var(--cyan) !important;
  background: linear-gradient(90deg,
    rgba(var(--cyan-rgb),.09),
    rgba(var(--cyan-rgb),.015)) !important;
  text-shadow: 0 0 18px rgba(var(--cyan-rgb),.35) !important;
}
/* Active dot indicator — re-enable ::after */
.tab-btn.active::after {
  display: block !important;
  content: '' !important;
  position: absolute !important;
  top: 50% !important; right: 16px !important;
  transform: translateY(-50%) !important;
  width: 4px !important; height: 4px !important;
  border-radius: 50% !important;
  background: var(--cyan) !important;
  box-shadow: 0 0 8px var(--cyan), 0 0 16px rgba(var(--cyan-rgb),.4) !important;
  animation: none !important;
}
.tab-btn .tab-text { display: inline !important; }

/* ── Content panels shift right ── */
.tab-panel {
  margin-left: var(--sidebar-w) !important;
  width: calc(100% - var(--sidebar-w)) !important;
  max-width: none !important;
  padding: 28px clamp(1.2rem,2.5vw,2.8rem) 40px !important;
  animation: panelSlideIn .32s cubic-bezier(.16,1,.3,1) !important;
}
@keyframes panelSlideIn {
  from { opacity:0; transform:translateX(14px); }
  to   { opacity:1; transform:translateX(0); }
}

/* ══════════════════════════════════════════════════════════════
   SECTION HEADERS — cinematic HUD
   ══════════════════════════════════════════════════════════════ */

.sh {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  position: relative;
}
.sh-num {
  font-family: var(--font-m);
  font-size: 0.553rem;font-family:'AquireLight','Rajdhani',sans-serif!important;
  letter-spacing: .35em;
  color: rgba(var(--cyan-rgb),.38);
}
.sh-title {
  font-family: var(--font-h);
  font-size: .82rem;
  letter-spacing: .26em;
  color: #fff;
  text-transform: uppercase;
  text-shadow: 0 0 24px rgba(var(--cyan-rgb),.12);
}
.sh-title::after {
  content: '_';
  color: var(--cyan);
  opacity: .5;
  animation: curseurClin 1.2s step-end infinite;
}
@keyframes curseurClin { 0%,100%{opacity:.5} 50%{opacity:0} }
.sh-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(var(--cyan-rgb),.18), transparent);
  position: relative;
}
.sh-line::before {
  content: '';
  position: absolute;
  right: 0; top: -3px;
  width: 6px; height: 6px;
  background: var(--violet);
  clip-path: polygon(50% 0%,100% 50%,50% 100%,0% 50%);
  opacity: .5;
}

/* ══════════════════════════════════════════════════════════════
   CARDS — HUD aesthetic avec corner brackets
   ══════════════════════════════════════════════════════════════ */

.card {
  background: linear-gradient(135deg,
    rgba(8,14,32,.92), rgba(4,8,20,.82)) !important;
  border: 1px solid rgba(var(--cyan-rgb),.07) !important;
  border-radius: 3px !important;
  position: relative;
  overflow: visible !important;
  transition: border-color .3s, box-shadow .3s, transform .25s !important;
}
/* TL bracket */
.card::before {
  content: '' !important;
  position: absolute !important;
  top: 5px; left: 5px;
  width: 10px; height: 10px;
  border-top: 1px solid rgba(var(--cyan-rgb),.45) !important;
  border-left: 1px solid rgba(var(--cyan-rgb),.45) !important;
  pointer-events: none !important; z-index: 2;
  transition: border-color .25s !important;
}
/* BR bracket */
.card::after {
  content: '' !important;
  position: absolute !important;
  bottom: 5px; right: 5px;
  width: 10px; height: 10px;
  border-bottom: 1px solid rgba(var(--violet-rgb),.35) !important;
  border-right:  1px solid rgba(var(--violet-rgb),.35) !important;
  pointer-events: none !important; z-index: 2;
  transition: border-color .25s !important;
}
.card:hover {
  border-color: rgba(var(--cyan-rgb),.2) !important;
  box-shadow:
    0 0 0 1px rgba(var(--cyan-rgb),.04),
    0 8px 48px rgba(0,0,0,.45),
    0 0 40px rgba(var(--cyan-rgb),.04) !important;
  transform: translateY(-1px) !important;
}
.card:hover::before { border-color: rgba(var(--cyan-rgb),.8) !important; }
.card:hover::after  { border-color: rgba(var(--violet-rgb),.65) !important; }
.card-body { position: relative; z-index: 1; }

/* ══════════════════════════════════════════════════════════════
   WIDGET TITLES
   ══════════════════════════════════════════════════════════════ */

.widget-title {
  font-family: var(--font-h) !important;
  font-size: .6rem !important;
  letter-spacing: .22em !important;
  color: rgba(var(--cyan-rgb),.72) !important;
  text-transform: uppercase !important;
  margin-bottom: 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.widget-title::before {
  content: '◈' !important;
  font-size: 0.577rem;font-family:'AquireLight','Rajdhani',sans-serif!important !important;
  color: var(--cyan) !important;
  animation: dotPulse 3s ease-in-out infinite !important;
  filter: drop-shadow(0 0 5px rgba(var(--cyan-rgb),.6)) !important;
  flex-shrink: 0 !important;
}
@keyframes dotPulse {
  0%,100% { opacity:.5; transform:scale(1); }
  50%      { opacity:1;  transform:scale(1.25); }
}

/* ══════════════════════════════════════════════════════════════
   DASHBOARD
   ══════════════════════════════════════════════════════════════ */

.char-name {
  font-family: var(--font-t) !important;
  font-size: 1.1rem !important;
  letter-spacing: .06em !important;
  text-shadow: 0 0 22px rgba(var(--cyan-rgb),.2) !important;
}
.nav-big {
  font-family: var(--font-h) !important;
  font-size: 2.8rem !important;
  background: linear-gradient(135deg, var(--gold), #ffdf66) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  filter: drop-shadow(0 0 16px rgba(var(--gold-rgb),.28)) !important;
}

/* ══════════════════════════════════════════════════════════════
   STATS
   ══════════════════════════════════════════════════════════════ */

.stat-name      { font-family: var(--font-m) !important; letter-spacing:.12em !important; }
.stat-val       { font-family: var(--font-h) !important; }
.stat-card-name { font-family: var(--font-m) !important; }
.stat-card-total{ font-family: var(--font-h) !important; }

/* ══════════════════════════════════════════════════════════════
   PROGRESSION & XP
   ══════════════════════════════════════════════════════════════ */

.prog-level-num {
  font-family: var(--font-h) !important;
  font-size: 3.2rem !important;
  background: linear-gradient(135deg, var(--cyan), var(--blue)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  filter: drop-shadow(0 0 18px rgba(var(--cyan-rgb),.38)) !important;
}
.prog-level-label {
  font-family: var(--font-m) !important;
  font-size: 0.625rem;font-family:'AquireLight','Rajdhani',sans-serif!important !important;
  letter-spacing: .26em !important;
  color: var(--text3) !important;
}
.xp-fill, .xp-fill-big {
  background: linear-gradient(90deg, var(--cyan), var(--blue), var(--violet)) !important;
  box-shadow: 0 0 12px rgba(var(--cyan-rgb),.3) !important;
}

/* ══════════════════════════════════════════════════════════════
   BADGES & MISC
   ══════════════════════════════════════════════════════════════ */

.badge { font-family:var(--font-m) !important; font-size:0.697rem;font-family:'AquireLight','Rajdhani',sans-serif!important !important; letter-spacing:.1em !important; }
.empty { font-family:var(--font-m) !important; font-size:.62rem !important; letter-spacing:.12em !important; color:var(--text3) !important; opacity:.6 !important; }

/* ══════════════════════════════════════════════════════════════
   ALLOCATION BUTTONS
   ══════════════════════════════════════════════════════════════ */

.alloc-mult-btn   { font-family:var(--font-h) !important; font-size:0.662rem;font-family:'AquireLight','Rajdhani',sans-serif!important !important; letter-spacing:.12em !important; }
.alloc-confirm-btn,
.alloc-reset-btn  { font-family:var(--font-h) !important; font-size:0.697rem;font-family:'AquireLight','Rajdhani',sans-serif!important !important; letter-spacing:.14em !important; }
.alloc-pts-label  { font-family:var(--font-m) !important; font-size:0.601rem;font-family:'AquireLight','Rajdhani',sans-serif!important !important;  letter-spacing:.18em !important; }
.alloc-pts-left   {
  font-family: var(--font-h) !important;
  font-size: 2.2rem !important;
  background: linear-gradient(135deg, var(--cyan), var(--blue)) !important;
  -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ══════════════════════════════════════════════════════════════
   SETTINGS
   ══════════════════════════════════════════════════════════════ */

.setting-title {
  font-family: var(--font-h) !important;
  font-size: .72rem !important; letter-spacing: .18em !important;
  color: var(--cyan) !important; margin-bottom: 12px !important;
  text-transform: uppercase !important;
  text-shadow: 0 0 10px rgba(var(--cyan-rgb),.22) !important;
}
.setting-info {
  font-family: var(--font-m) !important;
  font-size: 0.673rem;font-family:'AquireLight','Rajdhani',sans-serif!important !important; letter-spacing: .06em !important;
  color: var(--text3) !important; margin-bottom: 8px !important; line-height: 1.9 !important;
}
.logout-btn {
  font-family: var(--font-h) !important; font-size: 0.662rem;font-family:'AquireLight','Rajdhani',sans-serif!important !important; letter-spacing: .18em !important;
  color: var(--red) !important; background: rgba(var(--red-rgb),.07) !important;
  border: 1px solid rgba(var(--red-rgb),.28) !important;
  padding: 11px 20px !important; border-radius: 3px !important;
  cursor: pointer !important; width: 100% !important;
  transition: background .2s, border-color .2s, box-shadow .2s !important;
  text-transform: uppercase !important;
}
.logout-btn:hover {
  background: rgba(var(--red-rgb),.14) !important;
  border-color: rgba(var(--red-rgb),.55) !important;
  box-shadow: 0 0 18px rgba(var(--red-rgb),.15) !important;
}

/* ══════════════════════════════════════════════════════════════
   TITLES GRID
   ══════════════════════════════════════════════════════════════ */

.titles-grid { font-family: var(--font-m) !important; }

/* ══════════════════════════════════════════════════════════════
   SCROLLBAR
   ══════════════════════════════════════════════════════════════ */

::-webkit-scrollbar { width:3px; height:3px; }
::-webkit-scrollbar-track { background: rgba(2,4,14,1); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--blue), var(--violet));
  border-radius: 2px;
}

/* ══════════════════════════════════════════════════════════════
   SLOT ZONES — futuristic cells
   ══════════════════════════════════════════════════════════════ */

/* Zone labels — DuneRise, glow, big */
.slot-zone-label {
  font-family: var(--font-h) !important;
  font-size: .68rem !important;
  letter-spacing: .22em !important;
  color: var(--cyan) !important;
  text-shadow:
    0 0 14px rgba(var(--cyan-rgb),.65),
    0 0 32px rgba(var(--cyan-rgb),.2) !important;
  margin-bottom: 6px !important;
  text-transform: uppercase !important;
}

/* Slot cells — 44×44 with corner brackets */
.slot-cell {
  width:  44px !important;
  height: 44px !important;
  border-radius: 2px !important;
  font-size: 1.15rem !important;
  position: relative !important;
}

/* TL corner */
.slot-cell::before {
  content: '' !important;
  position: absolute !important;
  top: 2px; left: 2px;
  width: 7px; height: 7px;
  border-top:  1px solid rgba(var(--cyan-rgb),.5) !important;
  border-left: 1px solid rgba(var(--cyan-rgb),.5) !important;
  pointer-events: none !important; z-index: 2;
  transition: border-color .2s !important;
}
/* BR corner */
.slot-cell::after {
  content: '' !important;
  position: absolute !important;
  bottom: 2px; right: 2px;
  width: 7px; height: 7px;
  border-bottom: 1px solid rgba(var(--violet-rgb),.4) !important;
  border-right:  1px solid rgba(var(--violet-rgb),.4) !important;
  pointer-events: none !important; z-index: 2;
  transition: border-color .2s !important;
}
.slot-cell:hover::before { border-color: rgba(var(--cyan-rgb),.9) !important; }
.slot-cell:hover::after  { border-color: rgba(var(--violet-rgb),.8) !important; }

/* Slot image */
.slot-cell-img { width:30px !important; height:30px !important; object-fit:contain; }

/* ══════════════════════════════════════════════════════════════
   AXIOME EXTRA CELLS — violet accent (vs base cyan)
   Ajoutées par le bridge JS avec .axiome-extra
   ══════════════════════════════════════════════════════════════ */

.slot-cell.axiome-extra {
  border-color: rgba(var(--violet-rgb),.4) !important;
  background: rgba(var(--violet-rgb),.05) !important;
}
.slot-cell.axiome-extra::before {
  border-color: rgba(var(--violet-rgb),.55) !important;
}
.slot-cell.axiome-extra::after {
  border-color: rgba(var(--blue-rgb),.45) !important;
}
.slot-cell.axiome-extra.empty-cell {
  animation: axiomeSlotPulse 3s ease-in-out infinite !important;
}
@keyframes axiomeSlotPulse {
  0%,100% { border-color:rgba(var(--violet-rgb),.25); box-shadow:none; }
  50%      { border-color:rgba(var(--violet-rgb),.65); box-shadow:0 0 10px rgba(var(--violet-rgb),.18); }
}

/* ══════════════════════════════════════════════════════════════
   INV SUBTABS
   ══════════════════════════════════════════════════════════════ */

.inv-subtab {
  font-family: var(--font-h) !important;
  font-size: 0.697rem;font-family:'AquireLight','Rajdhani',sans-serif!important !important;
  letter-spacing: .18em !important;
}

/* ══════════════════════════════════════════════════════════════
   AXIOME BAND — compact skill source summary
   ══════════════════════════════════════════════════════════════ */

.axiome-slots-band {
  background: linear-gradient(135deg,
    rgba(var(--violet-rgb),.055),
    rgba(var(--blue-rgb),.025)) !important;
  border-top: 1px solid rgba(var(--violet-rgb),.2) !important;
}
.axiome-band-title {
  font-family: var(--font-h) !important;
  font-size: 0.662rem;font-family:'AquireLight','Rajdhani',sans-serif!important !important;
  letter-spacing: .25em !important;
  color: var(--violet) !important;
  text-shadow: 0 0 12px rgba(var(--violet-rgb),.45) !important;
}
.axiome-band-dot {
  background: var(--violet) !important;
  box-shadow: 0 0 8px rgba(var(--violet-rgb),.7) !important;
}
.axiome-zone-label {
  font-family: var(--font-h) !important;
  font-size: 0.625rem;font-family:'AquireLight','Rajdhani',sans-serif!important !important;
  letter-spacing: .14em !important;
  color: var(--violet) !important;
}
.axiome-zone.unlocked {
  border-color: rgba(var(--violet-rgb),.42) !important;
  background: rgba(var(--violet-rgb),.045) !important;
}
.axiome-zone-source {
  font-family: var(--font-m) !important;
  font-size: 0.529rem;font-family:'AquireLight','Rajdhani',sans-serif!important !important;
  letter-spacing: .04em !important;
  color: var(--text3) !important;
  opacity: .65 !important;
}

/* ══════════════════════════════════════════════════════════════
   SLOT PICKER MODAL
   ══════════════════════════════════════════════════════════════ */

/* Centre la modale au milieu de l'écran (pas en bas) */
.slot-picker-overlay {
  align-items: center !important;
}

/* Améliore la lisibilité des cartes d'items */
.inv-icard-emoji {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 28px !important;
}
.inv-icard-name {
  color: rgba(255,255,255,.88) !important;
}

.slot-picker-title {
  font-family: var(--font-h) !important;
  letter-spacing: .2em !important;
}
.slot-picker-slot-tag {
  font-family: var(--font-m) !important;
  letter-spacing: .1em !important;
}

/* ══════════════════════════════════════════════════════════════
   MOBILE — barre de navigation basse, style app natif  ≤ 768px
   Pattern : bottom nav fixe + panels plein écran
   ══════════════════════════════════════════════════════════════ */

@media (max-width:768px) {
  :root {
    --sidebar-w: 0px;
    --bottom-nav-h: 62px;
  }

  /* ── Layout principal : colonne + espace pour la nav basse ── */
  .hub-main.active {
    flex-direction: column !important;
    padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* ── Barre de navigation basse ── */
  .hub-tabs {
    /* Positionnement : fixe en bas, pleine largeur */
    position:  fixed   !important;
    bottom:    0       !important;
    left:      0       !important;
    right:     0       !important;
    top:       auto    !important;
    width:     100%    !important;
    min-width: 0       !important;
    height:    calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px)) !important;
    z-index:   200     !important;

    /* Flex horizontal scrollable */
    flex-direction:  row          !important;
    align-items:     stretch      !important;
    justify-content: flex-start   !important;
    overflow-x:      auto         !important;
    overflow-y:      hidden       !important;
    scrollbar-width: none         !important;
    padding:         0 4px env(safe-area-inset-bottom, 0px) !important;

    /* Visuel cyberpunk — fond sombre, flou, bordure lumineuse */
    background:       rgba(2, 4, 14, .97)            !important;
    border-right:     none                           !important;
    border-bottom:    none                           !important;
    border-top:       1px solid rgba(var(--cyan-rgb), .1) !important;
    box-shadow:
      0 -8px 40px rgba(0, 0, 0, .8),
      0 -1px 0   rgba(var(--cyan-rgb), .06)          !important;
    backdrop-filter:  blur(24px) saturate(1.3)       !important;
  }
  .hub-tabs::-webkit-scrollbar { display: none !important; }

  /* Trait lumineux en haut de la nav basse */
  .hub-tabs::before {
    top:        0    !important;
    bottom:     auto !important;
    left:       0    !important;
    right:      0    !important;
    height:     1px  !important;
    background: linear-gradient(90deg,
      transparent,
      rgba(var(--cyan-rgb),   .55),
      rgba(var(--violet-rgb), .3),
      transparent) !important;
  }
  .hub-tabs::after { display: none !important; }

  /* ── Lien retour Nexus : icône seule, compact ── */
  .hub-tabs > a.tab-btn--back {
    flex-direction: column  !important;
    align-items:    center  !important;
    justify-content: center !important;
    padding:        0 12px  !important;
    min-width:      48px    !important;
    height:         var(--bottom-nav-h) !important;
    border-left:    none    !important;
    border-bottom:  2px solid transparent !important;
    opacity:        .4      !important;
    flex-shrink:    0       !important;
  }
  .hub-tabs > a.tab-btn--back .tab-text { display: none    !important; }
  .hub-tabs > a.tab-btn--back .tab-icon { margin-right: 0 !important; }

  /* ── Séparateur caché en mode mobile ── */
  .hub-tabs-sep { display: none !important; }

  /* ── Boutons d'onglet : icône au-dessus + label ── */
  .tab-btn {
    /* Layout vertical */
    display:         flex    !important;
    flex-direction:  column  !important;
    align-items:     center  !important;
    justify-content: center  !important;
    gap:             4px     !important;

    /* Taille */
    min-width:   60px                  !important;
    width:       auto                  !important;
    height:      var(--bottom-nav-h)   !important;
    padding:     8px 12px              !important;
    flex-shrink: 0                     !important;

    /* Typographie */
    font-family:    var(--font-h)  !important;
    font-size:      .6rem          !important;
    letter-spacing: .06em          !important;
    text-align:     center         !important;
    white-space:    nowrap         !important;

    /* Visuel inactif */
    color:      rgba(255,255,255,.35) !important;
    background: none                  !important;
    border-left:   none               !important;
    border-bottom: 2px solid transparent !important;
    clip-path:     none               !important;
    transition:    color .2s, border-color .2s, text-shadow .2s !important;
  }

  /* Icône Lucide */
  .tab-btn .tab-icon {
    width:        18px !important;
    height:       18px !important;
    margin-right: 0    !important;
    flex-shrink:  0    !important;
  }

  /* Texte du label */
  .tab-btn .tab-text {
    display:     block !important;
    font-size:   0.697rem;font-family:'AquireLight','Rajdhani',sans-serif!important !important;
    line-height: 1      !important;
  }

  /* Pseudo-éléments */
  .tab-btn::before { display: none !important; }
  .tab-btn::after  { display: none !important; }

  /* Hover */
  .tab-btn:hover {
    color:            rgba(255,255,255,.6) !important;
    background:       none                 !important;
    border-left-color: transparent         !important;
  }

  /* Actif : glow cyan + trait bas */
  .tab-btn.active {
    color:             var(--cyan)                    !important;
    border-left-color: transparent                    !important;
    border-bottom-color: var(--cyan)                  !important;
    background:        rgba(var(--cyan-rgb), .05)     !important;
    text-shadow:       0 0 14px rgba(var(--cyan-rgb),.45) !important;
  }
  .tab-btn.active::after { display: none !important; }

  /* ── Panels : plein écran, animation douce ── */
  .tab-panel {
    margin-left: 0   !important;
    width:       100% !important;
    max-width:   100% !important;
    padding:     22px 14px 36px !important;
    animation:   hubPanelIn .28s cubic-bezier(.16,1,.3,1) !important;
  }

  /* ── Slot cells ── */
  .slot-cell {
    width:     38px    !important;
    height:    38px    !important;
    font-size: .95rem  !important;
  }

  /* ══ TYPOGRAPHIE MOBILE — échelle lisible pour tous les éléments ══ */

  .widget-title {
    font-size:     .82rem !important;
    letter-spacing: .14em !important;
    margin-bottom:  18px  !important;
  }
  .widget-title::before {
    font-size: .68rem !important;
  }

  .sh-num   { font-size: .68rem !important; letter-spacing: .22em !important; }
  .sh-title { font-size: .9rem  !important; letter-spacing: .18em !important; }

  .prog-level-label  { font-size: .72rem !important; letter-spacing: .16em !important; }
  .badge             { font-size: .72rem !important; }
  .empty             { font-size: .78rem !important; letter-spacing: .08em !important; }

  .alloc-mult-btn    {
    font-size:   .75rem !important;
    min-height:  44px   !important;
    padding:     10px 16px !important;
  }
  .alloc-confirm-btn,
  .alloc-reset-btn   {
    font-size:   .78rem !important;
    min-height:  52px   !important;
    padding:     14px 22px !important;
    width:       100%   !important;
  }
  .alloc-pts-label   { font-size: .72rem !important; letter-spacing: .12em !important; }

  .setting-title     { font-size: .88rem !important; letter-spacing: .14em !important; }
  .setting-info      { font-size: .78rem !important; letter-spacing: .04em !important; line-height: 1.8 !important; }
  .logout-btn        { font-size: .75rem !important; min-height: 52px !important; padding: 14px 22px !important; }

  .axiome-band-title  { font-size: .75rem !important; letter-spacing: .16em !important; }
  .axiome-zone-label  { font-size: .72rem !important; letter-spacing: .1em  !important; }
  .axiome-zone-source { font-size: .68rem !important; }

  .inv-subtab {
    font-size:  .75rem !important;
    letter-spacing: .12em !important;
    min-height: 44px  !important;
    padding:    0 14px !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   LAYOUT FIX — equipment panel overlap / overflow
   ══════════════════════════════════════════════════════════════

   Problème 1 : .cyb-panel a flex:1 dans hub.css → il grandit
   jusqu'à ~89 vh → space-around étale les zones → BRAS/MAINS
   descendent loin et entrent en collision visuelle avec les
   sections bonus / sets lors du scroll.
   Fix : flex:none — le panel prend seulement la hauteur de son
   contenu (min-height:540px reste appliqué par hub.css).

   Problème 2 : cellules de 44px dans une colonne de 168px (14px
   de padding = 154px utiles). BRAS (4 cells) = 4×44+3×3 = 185px
   → déborde vers la droite. Fix : 34px dans .cyb-col.
   (3 cells × 34px + 2×3px = 108px, 4 cells = 145px — dans les
   limites, avec wrap propre sur la 4e cellule si besoin.)

   Problème 3 : les sections bonus/sets doivent rester collées
   sous le panel sans être compressées. flex-shrink:0 les protège.
   ══════════════════════════════════════════════════════════════ */

/* 1 — Empêche cyb-panel de manger tout l'espace flex parent */
.cyb-panel {
  flex: none !important;
  flex-shrink: 0 !important;
}

/* 2 — Cellules dans les colonnes latérales du corps (168px col) */
.cyb-col .slot-cell {
  width:  34px !important;
  height: 34px !important;
  font-size: .88rem !important;
}
.cyb-col .slot-cell-img {
  width:  24px !important;
  height: 24px !important;
}
/* Proportionnalité des corner brackets */
.cyb-col .slot-cell::before,
.cyb-col .slot-cell::after {
  width:  5px !important;
  height: 5px !important;
}

/* 3 — Sections sous le panel : ne pas laisser flex les comprimer */
.axiome-slots-band,
.inv-bonus-band,
.inv-sets-band {
  flex-shrink: 0 !important;
}

/* 4 — Contenu des colonnes ne doit pas déborder la grille */
.cyb-col {
  overflow-x: hidden !important;
  min-width: 0 !important;
}

/* 5 — slot-cells garde un max-width = colonne utile pour éviter
        tout overflow horizontal résiduel */
.cyb-col-left  .slot-cells { max-width: 154px !important; }
.cyb-col-right .slot-cells { max-width: 154px !important; }

/* 6 — Axiome-extra cells héritent de la taille réduite dans le panel */
.cyb-col .slot-cell.axiome-extra { /* déjà hérité de .cyb-col .slot-cell */ }

/* ══════════════════════════════════════════════════════════════
   ITEM HOVER TOOLTIP (slot picker)
   ══════════════════════════════════════════════════════════════ */
.sp-item-tooltip {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .15s, transform .15s;
  background: rgba(8,12,28,.97);
  border: 1px solid rgba(var(--cyan-rgb),.18);
  border-radius: 6px;
  padding: 10px 14px;
  min-width: 200px;
  max-width: 300px;
  width: max-content;
  box-shadow: 0 8px 32px rgba(0,0,0,.55), 0 0 0 1px rgba(var(--cyan-rgb),.06);
  font-family: var(--font-body);
}
.sp-item-tooltip.visible {
  opacity: 1;
  transform: translateY(0);
}
.spt-name {
  font-family: var(--font-h);
  font-size: .7rem;
  letter-spacing: .08em;
  margin-bottom: 3px;
  white-space: normal;
  word-break: break-word;
}
.spt-meta {
  font-size: 0.697rem;font-family:'AquireLight','Rajdhani',sans-serif!important;
  letter-spacing: .06em;
  opacity: .65;
  margin-bottom: 8px;
  font-family: var(--font-m);
}
.spt-rarity { text-transform: capitalize; }
.spt-stats { display: flex; flex-direction: column; gap: 3px; }
.spt-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .62rem;
  letter-spacing: .04em;
  color: var(--text2);
}
.spt-k { opacity: .75; }
.spt-v { color: rgba(var(--cyan-rgb),.9); font-family: var(--font-m); }
.spt-none { font-size: 0.697rem;font-family:'AquireLight','Rajdhani',sans-serif!important; opacity: .4; font-style: italic; }