/* ====================================================================
   THEME SHOWROOM PREMIUM (v4.0)
   Light grey base + white cards + minimal red + subtle black motifs
   Loaded after all other CSS to override.
   ==================================================================== */

:root{
  --sr-bg: #f3f3f5;
  --sr-card: #ffffff;
  --sr-text: #0f0f10;
  --sr-text-2: #6b6b75;
  --sr-text-3: #9a9aa3;
  --sr-line: rgba(15,15,16,0.06);
  --sr-line-2: rgba(15,15,16,0.10);
  --sr-red: #ef4444;
  --sr-red-deep: #dc2626;
  --sr-shadow-card: 0 8px 24px rgba(15,15,16,0.06), 0 2px 6px rgba(15,15,16,0.04);
  --sr-shadow-float: 0 14px 32px rgba(15,15,16,0.10), 0 4px 12px rgba(15,15,16,0.06);
}

/* ===== Base canvas ===== */
body, #home, .screen.has-tabs{
  background: var(--sr-bg) !important;
  color: var(--sr-text) !important;
}
/* Subtle animated diagonal black pattern behind everything */
#home::before{
  content: '';
  position: fixed;
  inset: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(15,15,16,0.025) 0px,
    rgba(15,15,16,0.025) 1px,
    transparent 1px,
    transparent 22px
  );
  pointer-events: none;
  z-index: 0;
  animation: srDiag 24s linear infinite;
}
@keyframes srDiag{ 0%{background-position:0 0} 100%{background-position:32px 32px} }

/* ===== HEADER : white floating card ===== */
.gh-topbar.gh-topbar--centered,
.gh-topbar{
  margin: calc(env(safe-area-inset-top, 0px) + 10px) 10px 0 10px !important;
  padding: 14px 16px !important;
  min-height: 0 !important;
  background: var(--sr-card) !important;
  border: 1px solid var(--sr-line) !important;
  border-radius: 22px !important;
  box-shadow: var(--sr-shadow-card) !important;
  position: relative;
  z-index: 5;
  overflow: hidden;
  isolation: isolate;
  animation: none !important;
}
.gh-topbar::before, .gh-topbar::after{ display: none !important; }

/* Animated red 2px stripe at top edge of header */
.gh-topbar.gh-topbar--centered::before{
  display: block !important;
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--sr-red) 50%, transparent 100%);
  background-size: 50% 100%;
  background-repeat: repeat-x;
  animation: srRedSlide 3s linear infinite;
  z-index: 2;
  pointer-events: none;
}
@keyframes srRedSlide{ 0%{background-position:0 0} 100%{background-position:100% 0} }

/* Logo: black ring instead of red, smaller, cleaner */
.gh-logo-circle{
  width: 50px !important; height: 50px !important;
  background: var(--sr-card) !important;
  border: 2px solid var(--sr-text) !important;
  box-shadow: 0 4px 10px rgba(15,15,16,0.10) !important;
  margin-left: 0 !important;
  animation: none !important;
}
.gh-logo-circle::before, .gh-logo-circle::after{ display:none !important; }
.gh-logo.gh-logo--solid{
  width: 38px !important; height: 38px !important;
  max-width: 38px !important; max-height: 38px !important;
  animation: none !important;
}

/* Text */
.gh-name.gh-name--horizon{
  font-family: 'Geist','Inter',system-ui,sans-serif !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
  color: var(--sr-text) !important;
  text-shadow: none !important;
  padding: 0 !important;
}
.gh-tag{
  font-family: 'Geist','Inter',system-ui,sans-serif !important;
  font-size: 9.5px !important;
  font-weight: 600 !important;
  color: var(--sr-text-3) !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase !important;
  padding-left: 0.20em !important;
}
.gh-rule{
  width: 24px !important; height: 2px !important;
  background: var(--sr-red) !important;
  border-radius: 2px !important;
  margin: 4px auto 2px !important;
}
.gh-rule .gh-divider-dot{ display:none !important; }
.gh-slogan{
  font-family: 'Geist','Inter',system-ui,sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  font-style: normal !important;
  color: var(--sr-text-2) !important;
  letter-spacing: 0.02em !important;
}

/* Bell : minimal grey, red dot pulses */
.gh-bell-btn.gh-bell-btn--floating, .gh-bell-btn{
  position: relative !important;
  width: 38px !important; height: 38px !important;
  background: var(--sr-bg) !important;
  border: 1px solid var(--sr-line) !important;
  border-radius: 50% !important;
  color: var(--sr-text) !important;
  box-shadow: none !important;
  align-self: center !important;
  justify-self: end !important;
}
.gh-bell-dot{
  background: var(--sr-red) !important;
  box-shadow: 0 0 0 3px var(--sr-card), 0 0 8px var(--sr-red) !important;
  animation: srBellPulse 1.8s ease-in-out infinite !important;
}
@keyframes srBellPulse{ 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.25);opacity:0.7} }

/* ===== Page header text below the white card ===== */
.gh-page, .gh-page-text{ background: transparent !important; }
.gh-page-title{
  color: var(--sr-text) !important;
  font-weight: 900 !important;
  font-size: 24px !important;
  letter-spacing: -0.02em !important;
}
.gh-page-sub{
  color: var(--sr-text-2) !important;
  font-size: 13px !important;
}

/* ===== Search bar pill ===== */
.gh-search-row{ padding: 0 12px !important; gap: 10px !important; }
.gh-search-bar{
  background: var(--sr-card) !important;
  border: 1px solid var(--sr-line) !important;
  border-radius: 22px !important;
  height: 44px !important;
  padding: 0 16px !important;
  color: var(--sr-text) !important;
  box-shadow: var(--sr-shadow-card) !important;
}
.gh-search-placeholder{ color: var(--sr-text-3) !important; }
.gh-ai-btn{
  background: var(--sr-text) !important;
  color: var(--sr-card) !important;
  border-radius: 22px !important;
  height: 44px !important;
  padding: 0 16px !important;
  font-weight: 700 !important;
  border: 0 !important;
  box-shadow: var(--sr-shadow-card) !important;
}

/* ===== Tab bar : floating white pill ===== */
.tab-bar, .bottom-tabs, .tab-nav{
  background: var(--sr-card) !important;
  border: 1px solid var(--sr-line) !important;
  border-radius: 28px !important;
  margin: 8px 14px calc(8px + env(safe-area-inset-bottom, 0px)) 14px !important;
  box-shadow: var(--sr-shadow-float) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.tab-btn{
  color: var(--sr-text-2) !important;
  background: transparent !important;
}
.tab-btn.active{
  color: var(--sr-card) !important;
  background: var(--sr-text) !important;
  border-radius: 50% !important;
  width: 44px !important; height: 44px !important;
  display: inline-flex !important;
  align-items: center !important; justify-content: center !important;
  box-shadow: 0 4px 12px rgba(15,15,16,0.20) !important;
}
.tab-btn.active::before, .tab-btn::before{ display: none !important; }
.tab-btn.active::after{ display: none !important; }

/* ===== Cards (products, accessoires, promos) ===== */
.acc-card, .prod-card, .pieces-card, .promo-card, .ot-card{
  background: var(--sr-card) !important;
  border: 1px solid var(--sr-line) !important;
  border-radius: 18px !important;
  box-shadow: var(--sr-shadow-card) !important;
  transition: transform .18s ease, box-shadow .18s ease !important;
}
.acc-card:active, .prod-card:active, .ot-card:active{
  transform: scale(0.98);
  box-shadow: var(--sr-shadow-card) !important;
}
.acc-title, .prod-title, .ot-card-title{
  color: var(--sr-text) !important;
  font-weight: 700 !important;
}
.acc-sub, .prod-sub, .ot-card-desc{ color: var(--sr-text-2) !important; }

/* Price always red */
.prod-price, .acc-prod-price, .pieces-price, .price, [class*='price']{
  color: var(--sr-red) !important;
  font-family: 'Geist Mono','Geist','Inter',monospace !important;
  font-weight: 800 !important;
}

/* Sale badge */
.badge-sale, .sale-tag, .promo-badge{
  background: var(--sr-red) !important;
  color: var(--sr-card) !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
}

/* CTA shimmer button */
.btn-primary, button.btn-primary{
  position: relative !important;
  background: var(--sr-text) !important;
  color: var(--sr-card) !important;
  border-radius: 14px !important;
  font-weight: 700 !important;
  border: 0 !important;
  overflow: hidden !important;
}
.btn-primary::after{
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(239,68,68,0.50), transparent);
  animation: srShimmer 2.4s ease-in-out infinite;
}
@keyframes srShimmer{ 0%{left:-100%} 50%{left:120%} 100%{left:120%} }

/* Loading skeleton with red tint */
.skeleton, .empty-state[data-loading], .promo-loading{
  background: linear-gradient(90deg, #ececef 0%, #f5f5f7 50%, #ececef 100%) !important;
  background-size: 200% 100% !important;
  animation: srSkel 1.4s ease-in-out infinite !important;
}
@keyframes srSkel{ 0%{background-position:0 0} 100%{background-position:-200% 0} }

/* All curly things smooth */
*{ -webkit-tap-highlight-color: transparent; }

/* Override outils tab title for legibility on light */
.ot-intro-title, .ot-tool-title{ color: var(--sr-text) !important; }
.ot-intro-sub{ color: var(--sr-text-2) !important; }

/* === Override brand cards (clean white tiles) === */
.brand-card{
  background: var(--sr-card) !important;
  border: 1px solid var(--sr-line) !important;
  border-radius: 16px !important;
  box-shadow: var(--sr-shadow-card) !important;
  padding: 14px 10px !important;
  min-height: 100px !important;
  transition: transform .18s ease, box-shadow .18s ease !important;
}
.brand-card:hover{ transform: none !important; box-shadow: var(--sr-shadow-card) !important; border-color: var(--sr-line-2) !important; }
.brand-card:active{ transform: scale(0.97) !important; }
.brand-name{ color: var(--sr-text) !important; font-weight: 700 !important; font-size: 12px !important; letter-spacing: 0.02em !important; }
.brand-logo, .brand-card img{
  width: 48px !important; height: 48px !important;
  object-fit: contain !important;
  background: transparent !important;
  filter: none !important;
}

/* AR autoradio brands */
.ar-brand-card{
  background: var(--sr-card) !important;
  border: 1px solid var(--sr-line) !important;
  border-radius: 16px !important;
  box-shadow: var(--sr-shadow-card) !important;
}
.ar-brand-name{ color: var(--sr-text) !important; font-weight: 700 !important; }
.ar-brand-logo img{ filter: none !important; }

/* Models cards */
.model-card, .pieces-model-card{
  background: var(--sr-card) !important;
  border: 1px solid var(--sr-line) !important;
  border-radius: 16px !important;
  box-shadow: var(--sr-shadow-card) !important;
}
.model-name, .pieces-model-name{ color: var(--sr-text) !important; font-weight: 700 !important; }

/* === Active tab : rounded square (NOT circle) === */
.tab-btn.active{
  border-radius: 14px !important;
  width: auto !important;
  min-width: 56px !important;
  height: 44px !important;
  padding: 0 14px !important;
}

/* === Spacing fixes (v4.2) === */
/* Tab bar : back closer to the bottom */
.tab-bar, .bottom-tabs, .tab-nav{
  margin-bottom: env(safe-area-inset-bottom, 0px) !important;
}
/* Search row : breathing room below */
.gh-search-row{
  padding-bottom: 14px !important;
}
.gh-wrap{
  padding-bottom: 6px !important;
}

/* === Plain header text (v4.3) — Word-page style, no decoration === */
.gh-topbar.gh-topbar--centered::before{ display: none !important; } /* kill animated red stripe */
.gh-text.gh-text--plain{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  text-align: left;
}
.gh-name-plain{
  font-family: 'Geist','Inter',system-ui,sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--sr-text);
  letter-spacing: 0;
  text-shadow: none;
}
.gh-tag-plain{
  font-family: 'Geist','Inter',system-ui,sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: var(--sr-text-2);
  letter-spacing: 0;
  text-transform: none;
}
/* Logo simpler: no animation, just a clean ring */
.gh-logo-circle{
  border: 1px solid var(--sr-line) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}
/* Tighter header */
.gh-topbar.gh-topbar--centered{
  grid-template-columns: 50px 1fr 38px !important;
  column-gap: 12px !important;
  padding: 10px 14px !important;
}

/* === Header HERO (v4.4) — dark card top, rounded bottom corners only, animated red grid bg === */
.gh-topbar.gh-topbar--centered{
  margin: 0 0 0 0 !important;
  padding: calc(env(safe-area-inset-top, 0px) + 18px) 16px 24px 16px !important;
  min-height: 160px !important;
  border: 0 !important;
  border-radius: 0 0 28px 28px !important;
  background: #0f0f10 !important;
  background-image:
    linear-gradient(rgba(239,68,68,0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(239,68,68,0.18) 1px, transparent 1px) !important;
  background-size: 32px 32px, 32px 32px !important;
  animation: ghMeshSlide 6s linear infinite !important;
  box-shadow: 0 14px 30px rgba(15,15,16,0.30) !important;
  grid-template-columns: 80px 1fr 44px !important;
  align-items: center !important;
  column-gap: 14px !important;
  overflow: visible !important;
}
/* Red glow blob on top-right */
.gh-topbar.gh-topbar--centered::after{
  display: block !important;
  content: '';
  position: absolute;
  top: -50px; right: -50px;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(239,68,68,0.45) 0%, transparent 65%);
  filter: blur(20px);
  pointer-events: none;
  z-index: 0;
}
.gh-topbar.gh-topbar--centered::before{
  display: none !important;
}
.gh-brand.gh-brand--split, .gh-logo-circle, .gh-bell-btn--floating{
  position: relative !important;
  z-index: 1 !important;
}

/* Logo : OVERFLOWS the circle (90s style chunky branding) */
.gh-logo-circle{
  width: 64px !important; height: 64px !important;
  background: #ffffff !important;
  border: 2px solid #ef4444 !important;
  border-radius: 50% !important;
  overflow: visible !important;
  box-shadow:
    0 8px 22px rgba(239,68,68,0.35),
    0 3px 8px rgba(0,0,0,0.30) !important;
  margin-left: 4px !important;
}
.gh-logo.gh-logo--solid{
  width: 76px !important; height: 76px !important;
  max-width: 76px !important; max-height: 76px !important;
  position: absolute !important;
  top: 50% !important; left: 50% !important;
  transform: translate(-50%, -50%) !important;
  object-fit: contain !important;
}

/* Text white + uppercase like 90s/early 2000s */
.gh-text.gh-text--hero{
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 2px !important;
  text-align: left !important;
}
.gh-name-hero{
  font-family: 'Geist','Inter',system-ui,sans-serif;
  font-size: 22px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 8px rgba(0,0,0,0.40), 0 0 18px rgba(239,68,68,0.30);
}
.gh-tag-hero{
  font-family: 'Geist','Inter',system-ui,sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: rgba(255,255,255,0.65);
  letter-spacing: 0.30em;
  text-transform: uppercase;
  margin-top: 1px;
}
.gh-rule-hero{
  display: block;
  width: 32px; height: 2px;
  background: #ef4444;
  border-radius: 2px;
  margin: 6px 0 4px 0;
  box-shadow: 0 0 8px rgba(239,68,68,0.50);
}
.gh-slogan-hero{
  font-family: 'Geist','Inter',system-ui,sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  font-style: italic;
  letter-spacing: 0.04em;
}

/* Bell : white outline glass on dark */
.gh-bell-btn.gh-bell-btn--floating{
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.20) !important;
  color: #ffffff !important;
  width: 40px !important; height: 40px !important;
}
.gh-bell-dot{
  background: #ef4444 !important;
  box-shadow: 0 0 0 3px #0f0f10, 0 0 8px #ef4444 !important;
}
@keyframes ghMeshSlide{ 0%{background-position:0 0,0 0} 100%{background-position:32px 32px,32px 32px} }

/* === Header MOD-CHAT style (v4.5) — minimal: icon-left / title-center / icon-right === */
.gh-topbar.gh-topbar--centered{
  margin: 0 !important;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 18px 26px 18px !important;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: 0 0 28px 28px !important;
  background: #0f0f10 !important;
  background-image: none !important;
  animation: none !important;
  box-shadow: 0 8px 18px rgba(15,15,16,0.18) !important;
  grid-template-columns: 44px 1fr 44px !important;
  align-items: center !important;
  column-gap: 10px !important;
  overflow: visible !important;
}
.gh-topbar.gh-topbar--centered::before, .gh-topbar.gh-topbar--centered::after{ display: none !important; }

/* Logo : compact 38px circle on left */
.gh-logo-circle{
  width: 38px !important; height: 38px !important;
  background: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.20) !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  box-shadow: none !important;
  margin-left: 0 !important;
  animation: none !important;
}
.gh-logo-circle::before, .gh-logo-circle::after{ display: none !important; }
.gh-logo.gh-logo--solid{
  width: 28px !important; height: 28px !important;
  max-width: 28px !important; max-height: 28px !important;
  position: static !important;
  transform: none !important;
}

/* Title centered in white */
.gh-text.gh-text--mod{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}
.gh-title-mod{
  font-family: 'Geist','Inter',system-ui,sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.02em;
}

/* Bell : white outline icon */
.gh-bell-btn.gh-bell-btn--floating{
  background: transparent !important;
  border: 0 !important;
  color: #ffffff !important;
  width: 40px !important; height: 40px !important;
  box-shadow: none !important;
}
.gh-bell-dot{
  background: #ef4444 !important;
  box-shadow: 0 0 0 2px #0f0f10 !important;
}

/* === Header arched bottom (v4.6) — convex curve like Modychat === */
.gh-topbar.gh-topbar--centered{
  /* Big horizontal radius (100%) makes the arcs meet in the middle; 30px vertical = arc height */
  border-radius: 0 0 50% 50% / 0 0 30px 30px !important;
  padding-bottom: 38px !important; /* extra room for the arc */
}

/* === Header diagonal curve bottom (v5.0) — SVG shape, dark short LEFT, tall RIGHT === */
.gh-topbar.gh-topbar--centered{
  border-radius: 0 !important;
  padding-bottom: 50px !important;
  -webkit-clip-path: none !important;
  clip-path: none !important;
  overflow: visible !important;
}
.gh-topbar.gh-topbar--centered::after{
  display: block !important;
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -1px !important;
  height: 70px !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><path d='M 0,30 Q 50,55 100,90 L 100,100 L 0,100 Z' fill='%23f3f3f5'/></svg>") !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  pointer-events: none !important;
  z-index: 2 !important;
  transform: none !important;
  border-radius: 0 !important;
}
.gh-topbar.gh-topbar--centered::before{ display: none !important; }

/* === Header curve via SVG element (v5.1) — clean override === */
.gh-topbar.gh-topbar--centered{
  border-radius: 0 !important;
  padding-bottom: 14px !important;
  overflow: visible !important;
}
.gh-topbar.gh-topbar--centered::after,
.gh-topbar.gh-topbar--centered::before{ display: none !important; }
.gh-bottom-curve{
  display: block !important;
  width: 100% !important;
  height: 30px !important;
  margin-top: -1px !important;
  position: relative !important;
  z-index: 6 !important;
  pointer-events: none !important;
}

/* === SVG curve INSIDE topbar (v5.2) === */
.gh-topbar.gh-topbar--centered{
  position: relative !important;
  overflow: hidden !important;
  padding-bottom: 36px !important;
}
.gh-bottom-curve{
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 38px !important;
  margin: 0 !important;
  z-index: 10 !important;
  pointer-events: none !important;
  display: block !important;
}

/* === White body cap OVER dark header (v5.5) === */
.gh-topbar.gh-topbar--centered{
  border-radius: 0 !important;
  padding-bottom: 24px !important;
  overflow: visible !important;
}
.gh-topbar.gh-topbar--centered::after,
.gh-topbar.gh-topbar--centered::before{ display: none !important; }

.gh-body-cap{
  display: block;
  width: 100%;
  height: 50px;
  margin-top: -28px;
  margin-bottom: -10px;
  position: relative;
  z-index: 6;
  pointer-events: none;
  filter: drop-shadow(0 -2px 8px rgba(0,0,0,0.06));
}
/* Page section flows from white body */
.gh-page, .gh-search-row{
  background: #ffffff !important;
  position: relative;
  z-index: 5;
}
.gh-page{
  padding-top: 6px !important;
}

/* === CLEAN convex bottom curve (v6.0) — like Modychat — symmetric smile === */
.gh-topbar.gh-topbar--centered{
  border-bottom-left-radius: 50% !important;
  border-bottom-right-radius: 50% !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  /* Use the slash syntax: horizontal-radius / vertical-radius */
  border-radius: 0 0 50% 50% / 0 0 28px 28px !important;
  padding-bottom: 38px !important;
  overflow: hidden !important;
  margin: 0 !important;
}
.gh-topbar.gh-topbar--centered::after,
.gh-topbar.gh-topbar--centered::before{ display: none !important; }
.gh-bottom-curve, .gh-body-cap{ display: none !important; }

/* === S-curve frontier (v6.1) — asymmetric S between dark and white === */
.gh-topbar.gh-topbar--centered{
  border-radius: 0 !important;
  padding-bottom: 12px !important;
  margin: 0 !important;
}
.gh-body-cap{
  display: block !important;
  width: 100% !important;
  height: 50px !important;
  margin-top: -28px !important;
  margin-bottom: -10px !important;
  position: relative !important;
  z-index: 6 !important;
  pointer-events: none !important;
}
.gh-page, .gh-search-row{
  background: #ffffff !important;
  position: relative;
  z-index: 5;
}

/* === Header rounded card all corners (v6.2) === */
.gh-topbar.gh-topbar--centered{
  margin: calc(env(safe-area-inset-top, 0px) + 8px) 12px 0 12px !important;
  border-radius: 24px !important;
  padding: 14px 16px !important;
  overflow: hidden !important;
}
.gh-topbar.gh-topbar--centered::after,
.gh-topbar.gh-topbar--centered::before{ display: none !important; }
.gh-body-cap{ display: none !important; }

/* === Header v6.4 — grey bg with animated red grid, larger logo === */
.gh-topbar.gh-topbar--centered{
  background: #3a3a42 !important;
  background-image:
    linear-gradient(rgba(239,68,68,0.20) 1px, transparent 1px),
    linear-gradient(90deg, rgba(239,68,68,0.20) 1px, transparent 1px) !important;
  background-size: 28px 28px, 28px 28px !important;
  animation: ghMeshSlide 6s linear infinite !important;
  grid-template-columns: 64px 1fr 44px !important;
  column-gap: 12px !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
}
@keyframes ghMeshSlide{ 0%{background-position:0 0,0 0} 100%{background-position:28px 28px,28px 28px} }
/* Logo bigger */
.gh-logo-circle{
  width: 56px !important; height: 56px !important;
  background: #ffffff !important;
  border: 2px solid #ef4444 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.30) !important;
  animation: none !important;
}
.gh-logo-circle::before, .gh-logo-circle::after{ display: none !important; }
.gh-logo.gh-logo--solid{
  width: 42px !important; height: 42px !important;
  max-width: 42px !important; max-height: 42px !important;
  position: static !important;
  transform: none !important;
}
/* Title white centered */
.gh-title-mod{
  color: #ffffff !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.30) !important;
}
/* Bell white */
.gh-bell-btn.gh-bell-btn--floating{
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.20) !important;
  color: #ffffff !important;
}

/* ====================================================================
   FREE DESIGN HEADER (v7.0) — designed without constraints
   Layered depth, ambient light, motion, typography hierarchy
   ==================================================================== */
.gh-topbar.gh-topbar--centered{
  margin: calc(env(safe-area-inset-top, 0px) + 8px) 12px 0 12px !important;
  border-radius: 26px !important;
  padding: 18px 18px 22px 18px !important;
  background: radial-gradient(circle at 75% 20%, rgba(239,68,68,0.28) 0%, rgba(239,68,68,0) 55%),
              radial-gradient(circle at 20% 80%, rgba(80,80,90,0.50) 0%, rgba(20,20,24,0) 60%),
              linear-gradient(135deg, #18181d 0%, #0f0f12 50%, #1c1c22 100%) !important;
  background-image: ;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow:
    0 18px 40px rgba(0,0,0,0.45),
    0 4px 12px rgba(0,0,0,0.30),
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 0 60px rgba(239,68,68,0.06) !important;
  grid-template-columns: 70px 1fr 44px !important;
  column-gap: 14px !important;
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  animation: none !important;
}
/* Ambient red glow blob top-right */
.gh-topbar.gh-topbar--centered::before{
  display: block !important;
  content: \x27\x27 !important;
  position: absolute !important;
  top: -50px; right: -50px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(239,68,68,0.38) 0%, transparent 65%);
  filter: blur(20px);
  pointer-events: none;
  z-index: 0;
  animation: ghAmbientPulse 5s ease-in-out infinite;
}
@keyframes ghAmbientPulse{ 0%,100%{opacity:0.7;transform:scale(1)} 50%{opacity:1;transform:scale(1.10)} }
/* Diagonal light streak */
.gh-topbar.gh-topbar--centered::after{
  display: block !important;
  content: \x27\x27 !important;
  position: absolute !important;
  top: -30%; left: -10%;
  width: 60%; height: 160%;
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,0.06) 50%, transparent 65%);
  pointer-events: none;
  z-index: 0;
  animation: ghStreakSlide 8s ease-in-out infinite;
}
@keyframes ghStreakSlide{ 0%,100%{transform:translateX(-30%)} 50%{transform:translateX(30%)} }

/* Bring content above bg layers */
.gh-logo-circle, .gh-text--free, .gh-bell-btn--floating{ position: relative !important; z-index: 2 !important; }

/* Logo with rotating gradient ring */
.gh-logo-circle{
  width: 60px !important; height: 60px !important;
  background: #fff !important;
  border: 0 !important;
  box-shadow:
    0 0 0 2px rgba(239,68,68,0.50),
    0 4px 16px rgba(239,68,68,0.40),
    0 2px 6px rgba(0,0,0,0.30) !important;
  align-self: center !important;
  animation: none !important;
  position: relative !important;
}
.gh-logo-circle::before{
  display: block !important;
  content: \x27\x27 !important;
  position: absolute !important;
  inset: -5px !important;
  border-radius: 50% !important;
  background: conic-gradient(from 0deg, rgba(239,68,68,0.0), rgba(239,68,68,0.7), rgba(255,255,255,0.6), rgba(239,68,68,0.0));
  animation: ghRingRotate 4s linear infinite !important;
  z-index: -1 !important;
  filter: blur(2px);
}
@keyframes ghRingRotate{ from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
.gh-logo.gh-logo--solid{
  width: 44px !important; height: 44px !important;
  max-width: 44px !important; max-height: 44px !important;
  position: static !important;
  transform: none !important;
}

/* Text : RT bold red gradient, MAROC light wide-spaced white */
.gh-text--free{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  text-align: center !important;
}
.gh-name-free{
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  font-family: \x27Geist\x27,\x27Inter\x27,system-ui,sans-serif;
  font-size: 22px;
  letter-spacing: 0.04em;
  line-height: 1;
}
.gh-name-free b{
  font-weight: 900;
  background: linear-gradient(180deg, #ff6b6b 0%, #ef4444 50%, #b91c1c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #ef4444;
  filter: drop-shadow(0 0 8px rgba(239,68,68,0.40));
  font-style: normal;
}
.gh-name-free i{
  font-weight: 300;
  font-style: normal;
  color: rgba(255,255,255,0.95);
  letter-spacing: 0.30em;
  padding-left: 0.05em;
}
.gh-tag-free{
  font-family: \x27Geist\x27,\x27Inter\x27,system-ui,sans-serif;
  font-size: 9px;
  font-weight: 600;
  color: rgba(255,255,255,0.50);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  padding-left: 0.32em;
}

/* Bell: glass with red dot */
.gh-bell-btn.gh-bell-btn--floating{
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  border-radius: 12px !important;
  width: 40px !important; height: 40px !important;
  color: #ffffff !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  align-self: center !important;
}
.gh-bell-dot{
  background: #ef4444 !important;
  box-shadow: 0 0 0 2px #18181d, 0 0 10px #ef4444 !important;
  animation: ghDotPulse 1.6s ease-in-out infinite !important;
}
@keyframes ghDotPulse{ 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.3);opacity:0.7} }

/* Bottom red racing stripe */
.gh-topbar.gh-topbar--centered{
  position: relative !important;
}

/* === Header MERGED with body (v7.1) — no card, transparent bg, integrated === */
.gh-topbar.gh-topbar--centered{
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px 12px 16px !important;
  grid-template-columns: 48px 1fr 40px !important;
  column-gap: 12px !important;
  overflow: visible !important;
  isolation: auto !important;
  animation: none !important;
}
.gh-topbar.gh-topbar--centered::before,
.gh-topbar.gh-topbar--centered::after{ display: none !important; }

/* Logo: simple white circle with subtle red ring, no animation */
.gh-logo-circle{
  width: 44px !important; height: 44px !important;
  background: #ffffff !important;
  border: 1px solid var(--sr-line) !important;
  box-shadow: 0 2px 6px rgba(15,15,16,0.08) !important;
  align-self: center !important;
}
.gh-logo-circle::before, .gh-logo-circle::after{ display: none !important; }
.gh-logo.gh-logo--solid{
  width: 32px !important; height: 32px !important;
  max-width: 32px !important; max-height: 32px !important;
}

/* Text : dark on light bg */
.gh-text--free{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
}
.gh-name-free{
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-family: 'Geist','Inter',system-ui,sans-serif;
  font-size: 17px;
  letter-spacing: 0.02em;
  line-height: 1;
}
.gh-name-free b{
  font-weight: 800;
  color: #ef4444 !important;
  background: none !important;
  -webkit-text-fill-color: #ef4444 !important;
  filter: none !important;
  font-style: normal;
}
.gh-name-free i{
  font-weight: 600;
  font-style: normal;
  color: var(--sr-text);
  letter-spacing: 0.10em;
}
.gh-tag-free{
  font-family: 'Geist','Inter',system-ui,sans-serif;
  font-size: 9px;
  font-weight: 600;
  color: var(--sr-text-3);
  letter-spacing: 0.20em;
  text-transform: uppercase;
}

/* Bell : minimal */
.gh-bell-btn.gh-bell-btn--floating{
  background: transparent !important;
  border: 1px solid var(--sr-line) !important;
  border-radius: 50% !important;
  width: 38px !important; height: 38px !important;
  color: var(--sr-text) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.gh-bell-dot{
  background: var(--sr-red) !important;
  box-shadow: 0 0 0 2px var(--sr-bg) !important;
  animation: ghDotPulse 1.6s ease-in-out infinite !important;
}