/* ========================================================================
   STREXO — VISUAL REDESIGN / CLEAN SOCIAL UI
   UI ONLY — no behaviour, routes or JS dependencies changed.
   ======================================================================== */

:root {
  --ui-bg: #f5f7fb;
  --ui-surface: #ffffff;
  --ui-surface-soft: #f8fafc;
  --ui-border: #e7ebf2;
  --ui-border-strong: #dbe3ef;
  --ui-shadow: 0 22px 55px rgba(30, 55, 90, .08);
  --ui-shadow-soft: 0 10px 28px rgba(30, 55, 90, .06);
  --ui-blue: #2563eb;
  --ui-blue-deep: #1d4ed8;
  --ui-text: #0f172a;
  --ui-muted: #64748b;
  --ui-faint: #94a3b8;

  --font-display: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html,
body {
  background: var(--ui-bg) !important;
}

body {
  color: var(--ui-text) !important;
  background:
    radial-gradient(
      900px 480px at 50% -180px,
      rgba(37,99,235,.08),
      transparent 70%
    ),
    var(--ui-bg) !important;
}

button,
input,
textarea,
select {
  font-family: var(--font-body) !important;
}

h1,
h2,
h3,
.app-header-title,
.pf-name,
.conversation-name,
.shop-item-label,
.inventory-main strong,
.home-greeting {
  font-family: var(--font-display) !important;
}

/* ========================================================================
   HEADER
   ======================================================================== */

.app {
  min-height: 100dvh !important;
  padding: 0 26px 36px 134px !important;
}

.app-header {
  position: relative !important;
  inset: auto !important;

  width: 100% !important;
  min-height: 96px !important;
  height: 96px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 12px 0 4px !important;
  margin: 0 !important;

  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  pointer-events: none !important;
  z-index: 20 !important;
}

.app-header::before,
.app-header::after {
  display: none !important;
}

.app-header-left,
.app-header-actions,
.app-header-title {
  pointer-events: auto !important;
}

.app-header-left {
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

.app-header-title {
  position: relative !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-width: 150px !important;
  min-height: 58px !important;

  padding: 0 26px !important;

  color: transparent !important;
  font-size: clamp(30px, 3vw, 38px) !important;
  font-weight: 800 !important;

  letter-spacing: -.065em !important;
  line-height: 1 !important;

  text-align: center !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

.app-header-title::after {
  content: "Strexo";

  position: absolute;
  inset: 0;

  display: grid;
  place-items: center;

  color: var(--ui-text);

  font:
    800 clamp(30px, 3vw, 38px)/1
    var(--font-display);

  letter-spacing: -.065em;
}

.header-plus-btn {
  width: 42px !important;
  height: 42px !important;

  border-radius: 14px !important;
  border: 1px solid var(--ui-border) !important;

  background: rgba(255,255,255,.72) !important;
  color: var(--ui-text) !important;

  box-shadow:
    0 8px 22px rgba(15,23,42,.06) !important;
}

.header-plus-btn:hover {
  border-color: #cfd8e6 !important;
  background: #fff !important;

  box-shadow:
    0 12px 28px rgba(15,23,42,.09) !important;
}

.app-header-actions {
  position: absolute !important;

  right: 0 !important;
  top: 50% !important;

  transform: translateY(-50%) !important;

  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.app-header-actions .header-link {
  width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;

  padding: 0 !important;

  border: 1px solid var(--ui-border) !important;
  border-radius: 14px !important;

  background: rgba(255,255,255,.72) !important;
  color: #475569 !important;

  box-shadow:
    0 8px 22px rgba(15,23,42,.05) !important;
}

.app-header-actions .header-link-label {
  display: none !important;
}

.app-header-actions .header-link-icon {
  position: relative !important;

  display: inline-block !important;

  width: 18px !important;
  height: 18px !important;
}

/* Icône boutique */

.header-link-icon-shop::before {
  content: "";

  position: absolute;

  left: 2px;
  right: 2px;
  bottom: 1px;

  height: 11px;

  border:
    1.8px solid currentColor;

  border-radius:
    3px 3px 5px 5px;
}

.header-link-icon-shop::after {
  content: "";

  position: absolute;

  left: 5px;
  top: 1px;

  width: 8px;
  height: 8px;

  border:
    1.8px solid currentColor;

  border-bottom: 0;
  border-radius: 6px 6px 0 0;
}

/* Icône inventaire */

.header-link-icon-inventory::before {
  content: "";

  position: absolute;

  left: 2px;
  right: 2px;
  top: 4px;
  bottom: 1px;

  border:
    1.8px solid currentColor;

  border-radius: 3px;
}

.header-link-icon-inventory::after {
  content: "";

  position: absolute;

  left: 5px;
  right: 5px;
  top: 1px;

  height: 5px;

  border:
    1.8px solid currentColor;

  border-bottom: 0;
  border-radius: 4px 4px 0 0;
}

.app-header-actions .header-link:hover,
.app-header-actions .header-link:focus-visible,
.app-header-actions .header-link.is-current {
  color: var(--ui-blue) !important;

  border-color:
    #d4e1fb !important;

  background: #fff !important;

  box-shadow:
    0 12px 28px rgba(37,99,235,.10) !important;

  transform: translateY(-1px) !important;
}

/* ========================================================================
   NAV DESKTOP
   La navigation MOBILE existante reste inchangée.
   ======================================================================== */

@media (min-width: 861px) {

  .nav {
    position: fixed !important;

    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    left: 22px !important;

    width: 76px !important;

    transform: translateY(-50%) !important;

    padding: 7px !important;

    border:
      1px solid rgba(255,255,255,.95) !important;

    border-radius: 22px !important;

    background:
      rgba(255,255,255,.86) !important;

    box-shadow:
      0 24px 50px rgba(30,55,90,.10) !important;

    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
  }

  #main-nav-inner {
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
  }

  .nav-item {
    width: 60px !important;
    min-height: 60px !important;
    height: 60px !important;

    padding: 6px 4px !important;

    border-radius: 17px !important;

    color: #8a96a8 !important;

    font-size: 0 !important;
  }

  .nav-item > span:last-child {
    display: none !important;
  }

  .nav-icon {
    width: 38px !important;
    height: 38px !important;

    margin: 0 !important;

    border-radius: 12px !important;

    background: transparent !important;
    box-shadow: none !important;
  }

  .nav-icon svg {
    width: 20px !important;
    height: 20px !important;

    stroke-width: 1.9 !important;
  }

  .nav-item:hover {
    color: #334155 !important;
    background: #f8fafc !important;

    transform: translateY(-1px) !important;
  }

  .nav-item.is-active {
    color: var(--ui-blue) !important;

    background:
      #eef4ff !important;

    border:
      1px solid #dbe7ff !important;

    box-shadow: none !important;
    transform: none !important;
  }

  .nav-item.is-active .nav-icon {
    color: var(--ui-blue) !important;

    background: transparent !important;
    box-shadow: none !important;

    transform: none !important;
  }

  .nav-item.is-active::after {
    top: 50% !important;
    right: 4px !important;
    left: auto !important;

    width: 3px !important;
    height: 18px !important;

    border-radius: 999px !important;

    background: var(--ui-blue) !important;

    box-shadow: none !important;

    transform: translateY(-50%) !important;
  }
}

/* ========================================================================
   LAYOUT
   ======================================================================== */

.content,
#content-shell {
  width: min(1240px, 100%) !important;
  max-width: 1240px !important;

  margin: 0 auto !important;
}

.content {
  padding: 12px 0 70px !important;

  animation:
    strexoCleanIn .34s var(--ease) !important;
}

@keyframes strexoCleanIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========================================================================
   CONTROLES
   ======================================================================== */

.btn {
  min-height: 42px !important;

  border-radius: 13px !important;
  border-width: 1px !important;

  font-weight: 700 !important;
  letter-spacing: -.015em !important;

  transition:
    transform .16s var(--ease),
    box-shadow .16s var(--ease),
    background .16s var(--ease),
    border-color .16s var(--ease) !important;
}

.btn:hover:not(:disabled) {
  transform: translateY(-1px) !important;
}

.btn-primary {
  background: var(--ui-blue) !important;
  border-color: var(--ui-blue) !important;

  color: #fff !important;

  box-shadow:
    0 10px 24px rgba(37,99,235,.16) !important;
}

.btn-primary:hover:not(:disabled) {
  background: var(--ui-blue-deep) !important;
  border-color: var(--ui-blue-deep) !important;

  box-shadow:
    0 14px 30px rgba(37,99,235,.20) !important;
}

.btn-outline,
.btn-ghost {
  background: #fff !important;

  border-color: var(--ui-border) !important;

  color: #334155 !important;
}

.btn-outline:hover:not(:disabled),
.btn-ghost:hover:not(:disabled) {
  background: #f8fafc !important;
  border-color: #d7deea !important;
}

input,
textarea,
select {
  min-height: 44px;

  border-color: var(--ui-border) !important;

  border-radius: 13px !important;

  background: #fff !important;
  color: var(--ui-text) !important;

  box-shadow:
    0 1px 0 rgba(15,23,42,.02) inset !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: #b8cff8 !important;

  box-shadow:
    0 0 0 4px rgba(37,99,235,.08) !important;

  outline: none !important;
}

/* ========================================================================
   ACCUEIL
   ======================================================================== */

.home-page {
  width: min(940px, 100%) !important;
  margin-inline: auto !important;
}

.home-greeting {
  margin: 10px 0 22px !important;

  padding: 0 !important;

  font-size:
    clamp(30px, 4vw, 42px) !important;

  font-weight: 800 !important;

  letter-spacing: -.055em !important;

  color: var(--ui-text) !important;
}

.home-story-rail {
  padding: 7px !important;

  border:
    1px solid var(--ui-border) !important;

  border-radius: 22px !important;

  background:
    rgba(255,255,255,.88) !important;

  box-shadow:
    var(--ui-shadow-soft) !important;
}

.home-story-rail .story-track {
  gap: 14px !important;

  padding:
    8px 8px 10px !important;
}

.home-story-rail .story-item {
  width: 78px !important;
}

.home-story-rail .story-avatar-ring {
  width: 68px !important;
  height: 68px !important;
}

.home-story-rail .story-label {
  margin-top: 6px !important;

  color: #475569 !important;

  font-size: 11px !important;
  font-weight: 700 !important;
}

.feed-card {
  border:
    1px solid var(--ui-border) !important;

  border-radius: 22px !important;

  background:
    #fff !important;

  box-shadow:
    var(--ui-shadow-soft) !important;
}

.feed-card + .feed-card {
  margin-top: 18px !important;
}

/* ========================================================================
   BOUTIQUE
   ======================================================================== */

.shop-page {
  width: min(1080px, 100%) !important;

  margin-inline: auto !important;

  padding-bottom: 48px !important;
}

.shop-simple-head {
  align-items: center !important;

  margin:
    6px 0 24px !important;
}

.shop-simple-head h1 {
  font-size:
    clamp(32px, 4vw, 44px) !important;

  font-weight: 800 !important;

  letter-spacing: -.055em !important;
}

.shop-simple-head .shop-inline-balance {
  padding: 9px 13px !important;

  border:
    1px solid var(--ui-border) !important;

  border-radius: 12px !important;

  background: #fff !important;

  box-shadow: none !important;
}

.shop-simple-head .shop-inline-balance strong {
  font-size: 14px !important;
  color: var(--ui-text) !important;
}

.shop-simple-head .shop-inline-balance span {
  color: var(--ui-muted) !important;
  font-size: 10px !important;
}

.shop-page .shop-section {
  margin-top: 28px !important;
}

.shop-page .shop-section-head {
  justify-content: flex-start !important;

  margin:
    0 2px 13px !important;
}

.shop-page .shop-section-head h2 {
  width: auto !important;

  text-align: left !important;

  color: #1e293b !important;

  font-size: 16px !important;
  font-weight: 800 !important;
}

.shop-page .shop-grid {
  display: grid !important;

  grid-template-columns:
    repeat(4, minmax(0, 1fr)) !important;

  gap: 14px !important;

  justify-content: stretch !important;
}

.shop-page .shop-item {
  min-height: 224px !important;

  aspect-ratio: 1 / 1 !important;

  padding: 14px !important;

  border:
    1px solid var(--ui-border) !important;

  border-radius: 22px !important;

  background: #fff !important;

  box-shadow:
    var(--ui-shadow-soft) !important;
}

.shop-page .shop-item:hover {
  transform: translateY(-4px) !important;

  border-color:
    #d8e4f7 !important;

  box-shadow:
    0 18px 36px rgba(30,55,90,.10) !important;
}

.shop-page .shop-item-icon {
  min-height: 0 !important;

  height: 122px !important;

  margin: 0 0 10px !important;

  border:
    1px solid #edf1f6 !important;

  border-radius: 18px !important;

  background:
    linear-gradient(
      180deg,
      #fbfdff,
      #f6f8fb
    ) !important;
}

.shop-page .shop-item-label {
  color: #172033 !important;

  font-size: 13px !important;
  font-weight: 800 !important;

  text-align: center !important;
}

.shop-page .shop-item-bottom {
  gap: 8px !important;

  align-items: center !important;

  justify-content: space-between !important;
}

.shop-page .shop-item-price {
  color: #334155 !important;

  font-size: 11px !important;
}

.shop-page .shop-item > .btn,
.shop-page .shop-item-bottom > .btn {
  min-width: 40px !important;

  width: 40px !important;

  height: 40px !important;
  min-height: 40px !important;

  padding: 0 !important;

  font-size: 0 !important;

  display: inline-grid !important;
  place-items: center !important;

  border-radius: 12px !important;
}

.shop-page .shop-item > .btn::before,
.shop-page .shop-item-bottom > .btn::before {
  content: "";

  width: 16px;
  height: 13px;

  border:
    1.8px solid currentColor;

  border-radius:
    3px 3px 5px 5px;

  position: relative;

  display: block;
}

.shop-page .shop-item > .btn::after,
.shop-page .shop-item-bottom > .btn::after {
  content: "";

  position: absolute;

  width: 7px;
  height: 5px;

  margin-top: -13px;

  border:
    1.8px solid currentColor;

  border-bottom: 0;

  border-radius:
    4px 4px 0 0;
}

/* ========================================================================
   INVENTAIRE
   ======================================================================== */

.inventory-page {
  width: min(1080px, 100%) !important;

  margin-inline: auto !important;
}

.inventory-hero {
  padding: 26px !important;

  border:
    1px solid var(--ui-border) !important;

  border-radius: 24px !important;

  background: #fff !important;

  box-shadow:
    var(--ui-shadow-soft) !important;
}

.inventory-hero h1 {
  font-size:
    clamp(32px, 4vw, 44px) !important;
}

.inventory-toolbar {
  border-color:
    var(--ui-border) !important;

  background:
    rgba(255,255,255,.78) !important;

  box-shadow: none !important;
}

.inventory-list {
  grid-template-columns:
    repeat(3, minmax(0,1fr)) !important;

  gap: 14px !important;
}

.inventory-item {
  min-height: 156px !important;

  grid-template-columns:
    76px minmax(0,1fr) auto !important;

  padding: 14px !important;

  border:
    1px solid var(--ui-border) !important;

  border-radius: 21px !important;

  background: #fff !important;

  box-shadow:
    var(--ui-shadow-soft) !important;
}

.inventory-item:hover {
  transform: translateY(-3px) !important;

  border-color:
    #d8e4f7 !important;

  box-shadow:
    0 18px 36px rgba(30,55,90,.09) !important;
}

.inventory-preview {
  width: 72px !important;
  height: 72px !important;

  border:
    1px solid #edf1f6 !important;

  border-radius: 17px !important;

  background:
    #f8fafc !important;
}

.inventory-main strong {
  color: #172033 !important;

  font-size: 13px !important;
}

.inventory-expiry {
  color:
    var(--ui-faint) !important;
}

/* ========================================================================
   PROFIL
   ======================================================================== */

.pf {
  width: min(920px, 100%) !important;

  margin-inline: auto !important;
}

.pf-banner {
  border:
    1px solid var(--ui-border) !important;

  border-radius: 24px !important;

  box-shadow:
    var(--ui-shadow-soft) !important;
}

.pf-head {
  padding-inline: 3px !important;
}

.pf-name {
  font-size: 24px !important;

  font-weight: 800 !important;

  letter-spacing: -.04em !important;
}

.profile-stat {
  border-color:
    var(--ui-border) !important;

  background:
    #fff !important;

  border-radius: 16px !important;
}

.profile-tabs {
  border-color:
    var(--ui-border) !important;

  background:
    #fff !important;

  border-radius: 15px !important;
}

.profile-grid-item {
  border-radius: 18px !important;
}

/* ========================================================================
   MESSAGES
   ======================================================================== */

.messages-page {
  width: min(920px, 100%) !important;

  margin-inline: auto !important;
}

.messages-hero {
  padding: 24px !important;

  border:
    1px solid var(--ui-border) !important;

  border-radius: 24px !important;

  background: #fff !important;

  box-shadow:
    var(--ui-shadow-soft) !important;
}

.messages-hero h1,
.settings-hero h1,
.streak-title-copy h1 {
  letter-spacing:
    -.055em !important;
}

.messages-section {
  margin-top: 18px !important;
}

.messages-list,
.chat-list {
  border-color:
    var(--ui-border) !important;

  background:
    #fff !important;

  box-shadow:
    var(--ui-shadow-soft) !important;
}

.chat-list-row {
  border-bottom-color:
    #edf1f6 !important;
}

.chat-list-row:hover {
  background:
    #f8fafc !important;
}

.msg-thread {
  border:
    1px solid var(--ui-border) !important;

  background:
    #fff !important;

  box-shadow:
    var(--ui-shadow-soft) !important;
}

.msg-bubble {
  border-radius:
    18px !important;
}

.modern-msg-form {
  border:
    1px solid var(--ui-border) !important;

  background:
    rgba(255,255,255,.92) !important;

  box-shadow:
    0 10px 30px rgba(30,55,90,.08) !important;
}

/* ========================================================================
   PARAMÈTRES / ADMIN
   ======================================================================== */

.settings-hero,
.moderation-hero {
  padding: 24px !important;

  border:
    1px solid var(--ui-border) !important;

  border-radius: 24px !important;

  background: #fff !important;

  box-shadow:
    var(--ui-shadow-soft) !important;
}

.settings-menu-row,
.admin-menu-item {
  border-color:
    var(--ui-border) !important;

  background:
    #fff !important;

  border-radius:
    17px !important;
}

.settings-menu-row:hover,
.admin-menu-item:hover {
  background:
    #f8fafc !important;

  border-color:
    #dce5f1 !important;
}

/* ========================================================================
   MODALES
   ======================================================================== */

.modal-overlay {
  background:
    rgba(15,23,42,.34) !important;

  backdrop-filter:
    blur(8px) !important;

  -webkit-backdrop-filter:
    blur(8px) !important;
}

.modal {
  border:
    1px solid rgba(255,255,255,.92) !important;

  border-radius:
    24px !important;

  background:
    #fff !important;

  box-shadow:
    0 30px 80px rgba(15,23,42,.16) !important;
}

/* ========================================================================
   MOBILE
   Important : la barre de navigation mobile existante n'est pas modifiée.
   ======================================================================== */

@media (max-width: 860px) {

  .app {
    padding:
      0 10px calc(78px + var(--safe-b)) !important;
  }

  .app-header {
    min-height: 76px !important;
    height: 76px !important;

    padding:
      8px 0 2px !important;
  }

  .app-header-title,
  .app-header-title::after {
    font-size:
      28px !important;
  }

  .app-header-title {
    min-width:
      132px !important;

    min-height:
      52px !important;
  }

  .app-header-left {
    left:
      2px !important;
  }

  .app-header-actions {
    right:
      2px !important;
  }

  .header-plus-btn,
  .app-header-actions .header-link {
    width:
      38px !important;

    height:
      38px !important;

    min-height:
      38px !important;

    border-radius:
      12px !important;
  }

  .content,
  #content-shell {
    width:
      100% !important;

    max-width:
      none !important;

    margin:
      0 !important;

    padding:
      8px 0 28px !important;
  }

  .home-page,
  .shop-page,
  .inventory-page,
  .messages-page,
  .pf {
    width:
      100% !important;
  }

  .home-greeting {
    margin-top:
      6px !important;

    font-size:
      30px !important;
  }

  .shop-page .shop-grid {
    grid-template-columns:
      repeat(2, minmax(0,1fr)) !important;

    gap:
      11px !important;
  }

  .shop-page .shop-item {
    min-height:
      0 !important;

    padding:
      10px !important;

    border-radius:
      18px !important;
  }

  .shop-page .shop-item-icon {
    height:
      108px !important;
  }

  .inventory-list {
    grid-template-columns:
      1fr !important;
  }
}

@media (max-width: 420px) {

  .app-header-title,
  .app-header-title::after {
    font-size:
      26px !important;
  }

  .app-header-title {
    min-width:
      118px !important;
  }

  .home-greeting {
    font-size:
      28px !important;
  }

  .shop-page .shop-item-icon {
    height:
      92px !important;
  }

  .shop-page .shop-item-label {
    font-size:
      12px !important;
  }
}

/* ========================================================================
   LOGIN
   ======================================================================== */

.login-screen {
  min-height: 100dvh !important;

  display: grid !important;
  place-items: center !important;

  padding: 28px !important;

  background:
    radial-gradient(
      780px 420px at 50% -160px,
      rgba(37,99,235,.10),
      transparent 70%
    ),
    #f5f7fb !important;
}

.login-frame {
  width:
    min(920px, 100%) !important;

  display:
    grid !important;

  grid-template-columns:
    1fr 420px !important;

  overflow:
    hidden !important;

  border:
    1px solid var(--ui-border) !important;

  border-radius:
    28px !important;

  background:
    #fff !important;

  box-shadow:
    0 30px 90px rgba(15,23,42,.12) !important;
}

.login-brand {
  min-height:
    540px !important;

  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  padding:
    48px !important;

  background:
    radial-gradient(
      460px 300px at 10% 10%,
      rgba(37,99,235,.10),
      transparent 68%
    ),
    linear-gradient(
      145deg,
      #fbfcfe,
      #f1f5fa
    ) !important;
}

.login-logo-art {
  max-width:
    180px !important;

  margin:
    0 auto 20px !important;

  filter:
    drop-shadow(
      0 16px 28px rgba(37,99,235,.13)
    );
}

.login-brand-inner {
  gap:
    10px !important;
}

.login-wordmark {
  color:
    var(--ui-text) !important;

  font-family:
    var(--font-display) !important;

  font-size:
    clamp(42px, 6vw, 58px) !important;

  font-weight:
    800 !important;

  letter-spacing:
    -.07em !important;
}

.login-tagline,
.login-brand-foot {
  color:
    #64748b !important;
}

.login-panel {
  display:
    flex !important;

  align-items:
    center !important;

  padding:
    38px !important;

  background:
    #fff !important;
}

.login-panel-inner {
  width:
    100% !important;

  gap:
    15px !important;
}

.login-panel-heading h2 {
  font-size:
    28px !important;

  font-weight:
    800 !important;

  letter-spacing:
    -.05em !important;
}

.login-panel-heading p {
  color:
    var(--ui-muted) !important;
}

.login-toggle {
  padding:
    4px !important;

  border:
    1px solid var(--ui-border) !important;

  border-radius:
    14px !important;

  background:
    #f8fafc !important;
}

.login-toggle-btn {
  min-height:
    38px !important;

  border-radius:
    10px !important;

  color:
    #64748b !important;

  font-weight:
    700 !important;
}

.login-toggle-btn.is-active {
  color:
    var(--ui-text) !important;

  background:
    #fff !important;

  box-shadow:
    0 5px 16px rgba(15,23,42,.07) !important;
}

.login-form label {
  color:
    #475569 !important;

  font-size:
    11px !important;

  font-weight:
    700 !important;
}

.login-form input {
  min-height:
    46px !important;
}

.login-form button {
  min-height:
    46px !important;
}

@media (max-width: 720px) {

  .login-screen {
    padding:
      14px !important;
  }

  .login-frame {
    display:
      block !important;

    border-radius:
      24px !important;
  }

  .login-brand {
    min-height:
      0 !important;

    padding:
      24px 22px 10px !important;

    background:
      #fff !important;
  }

  .login-logo-art {
    max-width:
      92px !important;

    margin-bottom:
      10px !important;
  }

  .login-wordmark {
    font-size:
      34px !important;

    text-align:
      center !important;
  }

  .login-tagline,
  .login-brand-foot {
    display:
      none !important;
  }

  .login-panel {
    padding:
      18px 20px 22px !important;
  }
}

/* ========================================================================
   BREAKPOINTS
   ======================================================================== */

@media (min-width: 861px) and (max-width: 1180px) {

  .shop-page .shop-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr)) !important;
  }

  .inventory-list {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ========================================================================
   STREXO V2 — accueil social complet
   ======================================================================== */

.home-page-v2 { width: 100% !important; max-width: 1180px !important; }
.home-layout-v2 { display:grid !important; grid-template-columns:minmax(0, 1fr) 300px !important; gap:24px !important; align-items:start !important; }
.home-main-v2 { min-width:0 !important; }
.home-intro-v2 { display:flex !important; justify-content:space-between !important; align-items:flex-end !important; gap:20px !important; margin:4px 0 22px !important; }
.home-eyebrow-v2 { margin:0 0 6px !important; font-size:10px !important; font-weight:800 !important; letter-spacing:.14em !important; color:#94a3b8 !important; }
.home-intro-v2 .home-greeting { margin:0 !important; }
.home-subtitle-v2 { margin:7px 0 0 !important; color:#64748b !important; font-size:13px !important; }
.home-compose-v2 { flex:0 0 46px !important; width:46px !important; height:46px !important; border:1px solid #dfe7f2 !important; border-radius:15px !important; background:#fff !important; color:#2563eb !important; font-size:25px !important; line-height:1 !important; box-shadow:0 10px 24px rgba(30,55,90,.07) !important; cursor:pointer !important; }
.home-section-head-v2 { display:flex !important; justify-content:space-between !important; align-items:center !important; padding:0 3px 11px !important; }
.home-section-head-v2 > div { display:flex !important; flex-direction:column !important; gap:2px !important; }
.home-section-head-v2 strong { font-size:15px !important; color:#0f172a !important; }
.home-section-head-v2 span { font-size:11px !important; color:#94a3b8 !important; }
.home-stories-v2 { margin-bottom:22px !important; }
.home-stories-v2 .home-story-rail { border-radius:20px !important; box-shadow:0 10px 30px rgba(30,55,90,.055) !important; }
.stories-empty-v2 { display:flex !important; align-items:center !important; padding:0 14px !important; color:#94a3b8 !important; font-size:12px !important; }
.feed-section-v2 { min-width:0 !important; }
.feed-head-v2 { margin-top:2px !important; }
.feed-list-v2 { display:flex !important; flex-direction:column !important; gap:18px !important; }
.feed-card { overflow:hidden !important; border-radius:20px !important; border:1px solid #e7edf5 !important; box-shadow:0 12px 32px rgba(30,55,90,.055) !important; }
.feed-card-head { padding:14px 15px !important; }
.feed-media-wrap { background:#f4f6fa !important; }
.feed-media { display:block !important; width:100% !important; max-height:640px !important; object-fit:cover !important; }
.feed-card-caption { padding:0 16px !important; margin:12px 0 0 !important; color:#334155 !important; line-height:1.55 !important; }
.feed-card-actions { padding:10px 13px 13px !important; border-top:1px solid #f0f3f7 !important; }
.feed-action-btn { border-radius:11px !important; padding:7px 9px !important; }
.feed-action-btn:hover { background:#f5f8fc !important; }
.feed-empty-v2 { margin-top:18px !important; padding:40px 20px !important; text-align:center !important; border:1px dashed #dbe3ef !important; border-radius:20px !important; background:#fff !important; }
.feed-empty-v2.hidden { display:none !important; }
.feed-empty-v2 strong,.feed-empty-v2 span { display:block !important; }
.feed-empty-v2 strong { margin-top:8px !important; font-size:14px !important; }
.feed-empty-v2 span { margin-top:4px !important; color:#94a3b8 !important; font-size:12px !important; }
.feed-empty-icon { width:38px !important; height:38px !important; margin:auto !important; display:grid !important; place-items:center !important; border-radius:12px !important; background:#eef4ff !important; color:#2563eb !important; }
.feed-sentinel-v2 { height:20px !important; }
.home-side-v2 { position:sticky !important; top:18px !important; display:flex !important; flex-direction:column !important; gap:14px !important; }
.home-side-card-v2 { padding:16px !important; border:1px solid #e7edf5 !important; border-radius:20px !important; background:#fff !important; box-shadow:0 12px 30px rgba(30,55,90,.05) !important; }
.home-mini-top-v2 { display:flex !important; align-items:center !important; gap:11px !important; }
.home-mini-avatar-v2 { width:46px !important; height:46px !important; overflow:hidden !important; flex:none !important; border-radius:14px !important; background:#eef4ff !important; display:grid !important; place-items:center !important; }
.home-mini-avatar-v2 img,.home-mini-avatar-v2 .story-avatar-img { width:100% !important; height:100% !important; object-fit:cover !important; }
.home-mini-top-v2 strong,.home-mini-top-v2 span { display:block !important; }
.home-mini-top-v2 strong { font-size:13px !important; }
.home-mini-top-v2 span { margin-top:3px !important; color:#94a3b8 !important; font-size:11px !important; }
.home-side-action-v2 { width:100% !important; margin-top:14px !important; padding:10px 0 !important; border:0 !important; border-top:1px solid #edf1f6 !important; background:transparent !important; color:#2563eb !important; text-align:left !important; font-size:12px !important; font-weight:800 !important; cursor:pointer !important; }
.home-side-action-v2 span { float:right !important; font-size:16px !important; }
.home-side-title-v2 { display:flex !important; flex-direction:column !important; gap:3px !important; }
.home-side-title-v2 strong { font-size:13px !important; }
.home-side-title-v2 span { color:#94a3b8 !important; font-size:10px !important; }
.home-stats-v2 { display:grid !important; grid-template-columns:1fr 1fr !important; gap:9px !important; margin-top:13px !important; }
.home-stats-v2 div { padding:12px !important; border-radius:14px !important; background:#f7f9fc !important; }
.home-stats-v2 strong,.home-stats-v2 span { display:block !important; }
.home-stats-v2 strong { font-size:18px !important; letter-spacing:-.03em !important; }
.home-stats-v2 span { margin-top:2px !important; color:#94a3b8 !important; font-size:10px !important; }
.home-shop-preview-v2 { display:flex !important; align-items:center !important; gap:9px !important; margin-top:13px !important; padding:12px !important; border-radius:14px !important; background:linear-gradient(135deg,#f4f7ff,#faf8ff) !important; color:#64748b !important; font-size:11px !important; }
.home-shop-preview-v2 > span:first-child { width:30px !important; height:30px !important; display:grid !important; place-items:center !important; border-radius:10px !important; background:#fff !important; color:#2563eb !important; }

@media (min-width:861px) {
  .app { padding-left:132px !important; padding-right:28px !important; }
  .app-header { min-height:88px !important; height:88px !important; }
}

@media (max-width:980px) and (min-width:861px) {
  .home-layout-v2 { grid-template-columns:minmax(0,1fr) 240px !important; gap:16px !important; }
}

@media (max-width:860px) {
  .home-layout-v2 { display:block !important; }
  .home-side-v2 { display:none !important; }
  .home-intro-v2 { align-items:center !important; margin-bottom:18px !important; }
  .home-subtitle-v2 { font-size:12px !important; }
  .home-compose-v2 { width:42px !important; height:42px !important; flex-basis:42px !important; }
  .feed-list-v2 { gap:12px !important; }
  .feed-card { border-radius:17px !important; }
  .feed-media { max-height:520px !important; }
  .home-section-head-v2 { padding-bottom:9px !important; }
}

@media (max-width:420px) {
  .home-eyebrow-v2 { font-size:9px !important; }
  .home-subtitle-v2 { max-width:240px !important; }
  .home-greeting { font-size:27px !important; }
}

/* ========================================================================
   VISIBILITY FIX — preserve the application's existing auth state handling
   ======================================================================== */
.hidden {
  display: none !important;
}