/* DREAMCARS project-shell.css — canonical user/guest header + bottom nav shell.
   Extracted from assets/site-visual.css (keep in sync; do not edit site-visual for home-only fixes).
   Used on ?page=home with assets/guest-history.css for Story Slider viewport only.
   Sync guide — site-visual line ranges:
   L2-L14, L26-L27, L2058-L2059, L2061-2176, L3355-3363, L3674-3764, L3767-3816, L3821-3829,
   L10446-10541, L10605-10614, L10619-10635, L10697-10718, L13805-13859, L13862-13879,
   L20081-20089, L20218-20333, L20335-20361, L22574-22617, L22619-22780.
*/

/* DREAMCARS guest-shell.css — home/user shell subset extracted from site-visual.css */
/* Do not edit site-visual.css when updating home shell; sync critical rules here. */

/* --- source site-visual.css L2-L14 --- */
/* DREAMCARS premium logo + header/profile/mobile fix */
:root{--dream-orange:#ff8a00;--dream-orange-2:#ffb347;--dream-white:#ffffff;}
header{position:sticky;top:14px;z-index:50;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);}
.brand{display:inline-flex!important;align-items:center;gap:0!important;text-decoration:none!important;font-weight:900!important;letter-spacing:.8px!important;font-size:22px!important;line-height:1!important;text-transform:uppercase;position:relative;isolation:isolate;animation:logoFloat 4.5s ease-in-out infinite;}
.brand::before{content:"";position:absolute;inset:-10px -14px;border-radius:18px;background:radial-gradient(circle at 20% 50%,rgba(255,138,0,.28),transparent 55%);filter:blur(10px);opacity:.75;z-index:-1;animation:logoGlow 2.8s ease-in-out infinite alternate;}
.logo-dream{color:var(--dream-orange)!important;text-shadow:0 0 14px rgba(255,138,0,.55),0 0 30px rgba(255,138,0,.25);}
.logo-cars{color:var(--dream-white)!important;text-shadow:0 0 10px rgba(255,255,255,.32);}
.logo-dream,.logo-cars{display:inline-block;transition:transform .25s ease,text-shadow .25s ease;}
.brand:hover .logo-dream,.brand:hover .logo-cars{transform:translateY(-1px) scale(1.035);}
.brand:hover .logo-dream{text-shadow:0 0 18px rgba(255,138,0,.8),0 0 42px rgba(255,138,0,.35);}
.brand:hover .logo-cars{text-shadow:0 0 16px rgba(255,255,255,.55);}
.header-user{margin-left:auto;margin-right:16px;display:flex;align-items:center;gap:10px;min-width:0;}
.header-user-name{max-width:360px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff;font-weight:800;font-size:14px;padding:10px 14px;border:1px solid rgba(255,138,0,.45);background:linear-gradient(135deg,rgba(255,138,0,.12),rgba(255,255,255,.03));border-radius:999px;box-shadow:0 0 20px rgba(255,138,0,.12);}

/* --- source site-visual.css L26-L27 --- */
@keyframes logoGlow{from{opacity:.45;transform:scale(.96)}to{opacity:1;transform:scale(1.04)}}
@keyframes logoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}

/* --- source site-visual.css L2058-L2059 --- */
@media (min-width:431px){body.user-mode{background:#000!important;}body.user-mode .wrap{box-shadow:0 0 0 1px rgba(255,255,255,.05),0 0 70px rgba(255,138,0,.08)!important;}}
@media (max-width:360px){body.user-mode header nav a{font-size:10px!important;padding-left:2px!important;padding-right:2px!important;}body.user-mode .brand{font-size:18px!important;}}

/* --- source site-visual.css L2061-L2220 --- */
/* === USER MENU POSITION FIX 20260509-2 ===
   User header keeps only logo + registered full name at the top.
   User navigation is always fixed at the bottom in required order from includes/user_menu.php.
*/
body.user-mode:not(.auth-mode){
  min-height:100dvh!important;
  padding-top:0!important;
  padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))!important;
  overflow-x:hidden!important;
}
body.user-mode:not(.auth-mode) .wrap{
  min-height:100dvh!important;
  padding-top:0!important;
  padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))!important;
}
body.user-mode:not(.auth-mode) header{
  position:sticky!important;
  top:0!important;
  z-index:900!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  gap:8px!important;
  min-height:86px!important;
  padding:calc(12px + env(safe-area-inset-top,0px)) 14px 12px!important;
  margin:0 -10px 12px!important;
  background:linear-gradient(180deg,rgba(0,0,0,.98),rgba(12,12,12,.94))!important;
  border:0!important;
  border-bottom:1px solid rgba(255,138,0,.24)!important;
  border-radius:0 0 22px 22px!important;
  box-shadow:0 12px 30px rgba(0,0,0,.32)!important;
}
body.user-mode:not(.auth-mode) header .brand{
  display:inline-flex!important;
  position:relative!important;
  z-index:2!important;
  font-size:22px!important;
  line-height:1!important;
  margin:0!important;
  padding:0!important;
  max-width:100%!important;
}
body.user-mode:not(.auth-mode) header .header-user{
  display:flex!important;
  position:relative!important;
  z-index:2!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
  justify-content:flex-start!important;
  min-width:0!important;
}
body.user-mode:not(.auth-mode) header .header-user-name{
  display:block!important;
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  font-size:13px!important;
  line-height:1.15!important;
  padding:7px 11px!important;
}
body.user-mode:not(.auth-mode) header nav{
  position:fixed!important;
  left:50%!important;
  right:auto!important;
  top:auto!important;
  bottom:0!important;
  transform:translateX(-50%)!important;
  z-index:3000!important;
  width:min(100%,430px)!important;
  max-width:430px!important;
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:5px!important;
  align-items:stretch!important;
  justify-content:stretch!important;
  padding:7px 7px calc(7px + env(safe-area-inset-bottom,0px))!important;
  margin:0!important;
  background:linear-gradient(180deg,rgba(20,20,20,.98),rgba(0,0,0,.99))!important;
  border-top:1px solid rgba(255,138,0,.30)!important;
  border-left:1px solid rgba(255,255,255,.06)!important;
  border-right:1px solid rgba(255,255,255,.06)!important;
  border-bottom:0!important;
  border-radius:18px 18px 0 0!important;
  box-shadow:0 -14px 36px rgba(0,0,0,.58),0 0 22px rgba(255,138,0,.10)!important;
}
body.user-mode:not(.auth-mode) header nav a{
  min-width:0!important;
  min-height:48px!important;
  height:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  padding:8px 3px!important;
  border-radius:13px!important;
  font-size:11px!important;
  line-height:1.05!important;
  font-weight:900!important;
  white-space:normal!important;
  word-break:normal!important;
}
body.user-mode:not(.auth-mode) header nav a[href*="user_logout"]{
  color:#ffd7d7!important;
  border-color:rgba(255,80,80,.28)!important;
}
@media (max-width:360px){
  body.user-mode:not(.auth-mode) header .brand{font-size:20px!important;}
  body.user-mode:not(.auth-mode) header nav{gap:4px!important;padding-left:5px!important;padding-right:5px!important;}
  body.user-mode:not(.auth-mode) header nav a{font-size:10px!important;min-height:46px!important;padding-left:2px!important;padding-right:2px!important;}
}

/* === FINAL FIX 20260509-3: меню отдельно снизу, верх только логотип + ФИО === */
body.user-mode:not(.auth-mode) header nav{display:none!important;}
body.user-mode:not(.auth-mode) .user-bottom-nav{
  position:fixed!important;
  left:50%!important;
  right:auto!important;
  top:auto!important;
  bottom:0!important;
  transform:translateX(-50%)!important;
  z-index:99999!important;
  width:100%!important;
  max-width:430px!important;
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:5px!important;
  padding:7px 7px calc(7px + env(safe-area-inset-bottom,0px))!important;
  margin:0!important;
  background:linear-gradient(180deg,rgba(20,20,20,.98),rgba(0,0,0,.99))!important;
  border-top:1px solid rgba(255,138,0,.30)!important;
  border-radius:18px 18px 0 0!important;
  box-shadow:0 -14px 36px rgba(0,0,0,.58),0 0 22px rgba(255,138,0,.10)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
}
body.user-mode:not(.auth-mode) .user-bottom-nav a{
  min-width:0!important;
  min-height:48px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  padding:8px 3px!important;
  border-radius:13px!important;
  font-size:11px!important;
  line-height:1.05!important;
  font-weight:900!important;
  white-space:normal!important;
  color:#fff!important;
  background:rgba(255,255,255,.045)!important;
  border:1px solid rgba(255,255,255,.08)!important;
  text-decoration:none!important;
}
body.user-mode:not(.auth-mode) .user-bottom-nav a:hover,
body.user-mode:not(.auth-mode) .user-bottom-nav a:active{border-color:rgba(255,138,0,.6)!important;color:#ffb347!important;background:rgba(255,138,0,.08)!important;}
body.user-mode:not(.auth-mode) .user-bottom-nav a[href*="user_logout"]{color:#ffd7d7!important;border-color:rgba(255,80,80,.28)!important;}
@media (max-width:360px){body.user-mode:not(.auth-mode) .user-bottom-nav{gap:4px!important;padding-left:5px!important;padding-right:5px!important;}body.user-mode:not(.auth-mode) .user-bottom-nav a{font-size:10px!important;min-height:46px!important;padding-left:2px!important;padding-right:2px!important;}}

/* --- source site-visual.css L3355-L3363 --- */
/* === User live signal on bottom menu === */
body.user-mode:not(.auth-mode) .user-bottom-nav a{position:relative!important;}
body.user-mode:not(.auth-mode) .user-bottom-nav .live-dot{
  display:none; position:absolute; right:7px; top:6px; width:9px; height:9px; border-radius:50%;
  background:#00d56f; box-shadow:0 0 0 2px rgba(0,0,0,.75), 0 0 12px rgba(0,213,111,.9);
}
body.user-mode:not(.auth-mode) .user-bottom-nav.live-is-active .nav-live-link .live-dot{display:block; animation:userLiveDotPulse 1s ease-in-out infinite;}
@keyframes userLiveDotPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.25;transform:scale(.72)}}
@media (max-width:360px){body.user-mode:not(.auth-mode) .user-bottom-nav .live-dot{right:5px;top:5px;width:8px;height:8px;}}

/* --- source site-visual.css L3674-L3764 --- */
@supports(padding:max(0px)){body.user-mode{padding-bottom:max(76px,env(safe-area-inset-bottom))}}

/* === PWA install button in user header 20260511pwa7 === */
body.user-mode:not(.auth-mode) header .user-top-line{
  width:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  position:relative!important;
  z-index:3!important;
}
body.user-mode:not(.auth-mode) header .pwa-install-btn{
  appearance:none!important;
  border:1px solid rgba(255,138,0,.58)!important;
  border-radius:999px!important;
  background:linear-gradient(135deg,#ff9b19,#ff6a00)!important;
  color:#111!important;
  font-weight:900!important;
  font-size:12px!important;
  line-height:1.05!important;
  padding:9px 11px!important;
  box-shadow:0 8px 18px rgba(255,106,0,.22), inset 0 1px 0 rgba(255,255,255,.36)!important;
  white-space:nowrap!important;
  cursor:pointer!important;
  max-width:170px!important;
}
body.user-mode:not(.auth-mode) header .pwa-install-btn[hidden]{display:none!important;}
body.user-mode:not(.auth-mode) header .pwa-install-btn:active{transform:translateY(1px)!important;}
@media (max-width:380px){
  body.user-mode:not(.auth-mode) header .pwa-install-btn{font-size:11px!important;padding:8px 9px!important;max-width:145px!important;}
  body.user-mode:not(.auth-mode) header .brand{font-size:19px!important;}
}
.pwa-ios-modal{position:fixed;inset:0;z-index:7000;display:flex;align-items:center;justify-content:center;padding:18px;}
.pwa-ios-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(8px);}
.pwa-ios-card{position:relative;z-index:1;width:min(92vw,390px);border-radius:24px;padding:22px;background:linear-gradient(180deg,#151515,#070707);border:1px solid rgba(255,138,0,.28);box-shadow:0 22px 70px rgba(0,0,0,.62);color:#fff;}
.pwa-ios-card h2{margin:8px 0 10px;font-size:22px;}
.pwa-ios-card p{margin:0 0 10px;color:rgba(255,255,255,.78);}
.pwa-ios-card ol{margin:10px 0 0;padding-left:20px;color:rgba(255,255,255,.88);line-height:1.55;}
.pwa-ios-icon{display:block;width:74px;height:74px;object-fit:cover;border-radius:18px;box-shadow:0 10px 24px rgba(0,0,0,.45);}
.pwa-ios-close{position:absolute;right:12px;top:10px;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);color:#fff;font-size:24px;line-height:1;cursor:pointer;}

/* === DREAMCARS PWA + guest access additions 20260511pwa7 === */
body.user-mode header .brand{display:inline-flex!important;align-items:center!important;gap:9px!important;text-decoration:none!important;min-width:0!important;}
body.user-mode header .brand-app-icon{width:38px!important;height:38px!important;border-radius:10px!important;object-fit:cover!important;box-shadow:0 0 0 1px rgba(255,138,0,.35),0 8px 20px rgba(0,0,0,.35)!important;flex:0 0 auto!important;}
body.user-mode header .brand-text{display:inline-flex!important;align-items:baseline!important;gap:1px!important;min-width:0!important;}
.guest-auth-modal{position:fixed;inset:0;z-index:8000;display:flex;align-items:center;justify-content:center;padding:18px;}
.guest-auth-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(8px);}
.guest-auth-card{position:relative;z-index:1;width:min(92vw,400px);border-radius:24px;padding:24px;background:linear-gradient(180deg,#151515,#070707);border:1px solid rgba(255,138,0,.3);box-shadow:0 24px 70px rgba(0,0,0,.65);color:#fff;}
.guest-auth-card h2{margin:0 0 10px;font-size:23px;}
.guest-auth-card p{margin:0 0 18px;color:rgba(255,255,255,.78);line-height:1.45;}
.guest-auth-actions{display:flex;gap:10px;flex-wrap:wrap;}
.guest-auth-close{position:absolute;right:12px;top:10px;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);color:#fff;font-size:24px;line-height:1;cursor:pointer;}
@media (max-width:380px){body.user-mode header .brand-app-icon{width:34px!important;height:34px!important}.guest-auth-actions .btn{width:100%;text-align:center}}


/* === Android instant/tap visual fix 20260511pwa7 === */
html,body,*{
  -webkit-tap-highlight-color: rgba(0,0,0,0)!important;
}
button,.btn,a,input[type="button"],input[type="submit"],.page-btn,header nav a,.user-bottom-nav a{
  -webkit-tap-highlight-color: transparent!important;
  touch-action: manipulation!important;
}
button:focus:not(:focus-visible),.btn:focus:not(:focus-visible),a:focus:not(:focus-visible),.page-btn:focus:not(:focus-visible),.user-bottom-nav a:focus:not(:focus-visible){
  outline:0!important;
  box-shadow:inherit;
}
body.user-mode .user-bottom-nav a,
body.user-mode .user-bottom-nav a:hover,
body.user-mode .user-bottom-nav a:active,
body.user-mode .user-bottom-nav a:focus{
  -webkit-tap-highlight-color: transparent!important;
}
@media (hover:none) and (pointer:coarse){
  body.user-mode .user-bottom-nav a:hover::before,
  body.user-mode .user-bottom-nav a:active::before,
  body.user-mode .user-bottom-nav a:focus::before,
  body.user-mode .btn:hover::before,
  body.user-mode button:hover::before,
  body.user-mode .btn:active::before,
  body.user-mode button:active::before{
    transform:translateX(-125%)!important;
    opacity:0!important;
  }
  body.user-mode .user-bottom-nav a:active,
  body.user-mode .user-bottom-nav a:focus{
    filter:none!important;
  }
}

/* --- source site-visual.css L3767-L3816 --- */
/* === Header/logo stability + fast lightweight logo 20260511pwa7 === */
body.user-mode header .brand,
body.user-mode header .brand *,
body.user-mode header .brand::before{
  animation:none!important;
  transition:none!important;
}
body.user-mode header .brand,
body.user-mode header .brand:hover,
body.user-mode header .brand:active,
body.user-mode header .brand:focus{
  transform:none!important;
}
body.user-mode header .brand:hover .logo-dream,
body.user-mode header .brand:hover .logo-cars,
body.user-mode header .brand:active .logo-dream,
body.user-mode header .brand:active .logo-cars{
  transform:none!important;
}
body.user-mode:not(.auth-mode) header .user-top-line{
  min-height:38px!important;
  flex:0 0 auto!important;
}
body.user-mode header .brand-app-icon{
  display:block!important;
  width:38px!important;
  height:38px!important;
  min-width:38px!important;
  min-height:38px!important;
  object-fit:cover!important;
  image-rendering:auto!important;
  transform:translateZ(0)!important;
  backface-visibility:hidden!important;
  background:#05070d!important;
}
body.user-mode header .brand-text{
  height:22px!important;
  line-height:22px!important;
  align-items:center!important;
}
body.user-mode header{
  contain:layout paint!important;
  will-change:auto!important;
}
@media (max-width:380px){
  body.user-mode header .brand-app-icon{
    width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;
  }
  body.user-mode:not(.auth-mode) header .user-top-line{min-height:34px!important;}
}

/* --- source site-visual.css L3821-L3829 --- */
/* === Push display + active feed nav fix 20260511pushdisplayfix === */
body.user-mode .user-bottom-nav a.nav-current,
body.user-mode:not(.auth-mode) .user-bottom-nav a.nav-current{
  border-color:rgba(255,138,0,.72)!important;
  color:#ffb347!important;
  background:linear-gradient(180deg,rgba(255,138,0,.18),rgba(255,138,0,.07))!important;
  box-shadow:0 0 0 1px rgba(255,138,0,.18) inset!important;
}
body.user-mode .user-bottom-nav a.nav-current .nav-label{color:#ffb347!important;}

/* --- source site-visual.css L10446-L10541 --- */
@media (min-width: 900px){
  body.user-mode:not(.auth-mode){
    padding:0!important;
    min-height:100vh!important;
    overflow-x:hidden!important;
  }
  body.user-mode:not(.auth-mode) .wrap{
    width:min(100%,1280px)!important;
    max-width:1280px!important;
    min-height:100vh!important;
    margin:0 auto!important;
    padding:22px 28px 42px!important;
    box-shadow:none!important;
  }
  body.user-mode:not(.auth-mode) header{
    position:sticky!important;
    top:18px!important;
    z-index:900!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:24px!important;
    min-height:84px!important;
    margin:0 0 24px!important;
    padding:18px 22px!important;
    border:1px solid rgba(255,138,0,.22)!important;
    border-radius:26px!important;
    background:linear-gradient(180deg,rgba(12,12,12,.96),rgba(8,8,8,.94))!important;
    box-shadow:0 18px 48px rgba(0,0,0,.34)!important;
  }
  body.user-mode:not(.auth-mode) header .user-top-line{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:18px!important;
    min-width:0!important;
    flex:1 1 auto!important;
  }
  body.user-mode:not(.auth-mode) header .brand{
    font-size:25px!important;
    flex:0 0 auto!important;
  }
  body.user-mode:not(.auth-mode) header .brand-app-icon{
    width:46px!important;
    height:46px!important;
    border-radius:13px!important;
  }
  body.user-mode:not(.auth-mode) header .pwa-install-btn{
    max-width:none!important;
    min-height:44px!important;
    padding:11px 16px!important;
    font-size:13px!important;
    white-space:nowrap!important;
  }
  body.user-mode:not(.auth-mode) header .header-user{
    width:auto!important;
    max-width:360px!important;
    flex:0 1 360px!important;
    justify-content:flex-end!important;
  }
  body.user-mode:not(.auth-mode) header .header-user-name{
    width:auto!important;
    max-width:360px!important;
    text-align:right!important;
    font-size:14px!important;
    padding:10px 14px!important;
  }
  body.user-mode:not(.auth-mode) .user-bottom-nav{
    position:sticky!important;
    left:auto!important;
    right:auto!important;
    top:122px!important;
    bottom:auto!important;
    transform:none!important;
    z-index:850!important;
    width:100%!important;
    max-width:none!important;
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:12px!important;
    margin:0 0 26px!important;
    padding:12px!important;
    border:1px solid rgba(255,138,0,.22)!important;
    border-radius:24px!important;
    background:linear-gradient(180deg,rgba(18,18,18,.94),rgba(10,10,10,.96))!important;
    box-shadow:0 14px 38px rgba(0,0,0,.28)!important;
  }
  body.user-mode:not(.auth-mode) .user-bottom-nav a{
    min-height:56px!important;
    padding:12px 14px!important;
    border-radius:16px!important;
    font-size:14px!important;
    line-height:1.2!important;
    white-space:nowrap!important;
  }
}

/* --- source site-visual.css L10697-L10718 --- */
/* === USER HEADER: registered subscribers count 2026-05-14 === */
body.user-mode:not(.auth-mode) header .header-subscribers-count{
  width:100%!important;
  margin:-2px 0 0!important;
  padding:0!important;
  text-align:center!important;
  font-size:11px!important;
  line-height:1.15!important;
  font-weight:700!important;
  letter-spacing:.02em!important;
  color:rgba(255,255,255,.62)!important;
  white-space:nowrap!important;
  pointer-events:none!important;
}
@media (max-width:699px){
  body.user-mode:not(.auth-mode) .wrap{
    padding-top:calc(114px + env(safe-area-inset-top,0px))!important;
  }
  body.user-mode:not(.auth-mode) header{
    min-height:102px!important;
  }
}

/* --- source site-visual.css L13866-L13879 --- */
@media (max-width:699px){
  body.user-mode:not(.auth-mode) header{
    position:fixed!important;
    top:0!important;
    left:50%!important;
    right:auto!important;
    transform:translateX(-50%)!important;
    width:min(100%,430px)!important;
    max-width:430px!important;
    margin:0!important;
    z-index:120000!important;
    box-sizing:border-box!important;
  }
}

/* --- source site-visual.css L20081-L20089 --- */
body.user-mode:not(.auth-mode):not(.dc-pwa-standalone) header .header-push-control{
  display:none!important;
}
body.user-mode:not(.auth-mode).dc-pwa-standalone header .pwa-install-btn{
  display:none!important;
}
body.user-mode:not(.auth-mode):not(.dc-pwa-standalone) header .user-top-line{
  padding-right:0!important;
}

/* --- source site-visual.css L20291-L20317 --- */
body.user-mode:not(.auth-mode) .user-bottom-nav .user-bottom-nav-placeholder{
  background:transparent!important;
  border-color:transparent!important;
  pointer-events:none!important;
}

body.user-mode:not(.auth-mode) .user-bottom-nav a.nav-current,
body.user-mode:not(.auth-mode) .user-bottom-nav a:hover,
body.user-mode:not(.auth-mode) .user-bottom-nav a:active{
  color:#ffb347!important;
  border-color:rgba(255,138,0,.6)!important;
  background:rgba(255,138,0,.08)!important;
  box-shadow:none!important;
  transform:none!important;
}

body.user-mode:not(.auth-mode) .user-bottom-nav a[href*="user_logout"]{
  color:#ffd7d7!important;
  border-color:rgba(255,80,80,.28)!important;
}

body.user-mode:not(.auth-mode).public-feed-open .user-bottom-nav{
  box-shadow:0 -2px 10px rgba(0,0,0,.22),0 0 14px rgba(255,138,0,.06)!important;
}

/* --- source site-visual.css L22619-L22768 --- */
/* User/auth brand wordmark parity with the admin header. */
body.user-mode:not(.auth-mode):not(.comments-mode):not(.comments-admin-user-visual) .brand,
body.user-mode.auth-mode .brand{
  display:inline-flex!important;
  align-items:center!important;
  gap:10px!important;
  min-width:0!important;
  max-width:min(56vw, 430px)!important;
  line-height:1!important;
  overflow:visible!important;
  text-decoration:none!important;
}

body.user-mode:not(.auth-mode):not(.comments-mode):not(.comments-admin-user-visual) .brand::before,
body.user-mode.auth-mode .brand::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:-10px -14px!important;
  border-radius:18px!important;
  background:radial-gradient(circle at 20% 50%,rgba(255,138,0,.18),transparent 58%)!important;
  filter:blur(10px)!important;
  opacity:.36!important;
  z-index:-1!important;
  transform:none!important;
  animation:none!important;
  pointer-events:none!important;
  box-shadow:none!important;
}

body.user-mode:not(.auth-mode):not(.comments-mode):not(.comments-admin-user-visual) .brand-app-icon,
body.user-mode.auth-mode .brand-app-icon{
  display:block!important;
  width:40px!important;
  height:40px!important;
  min-width:40px!important;
  min-height:40px!important;
  flex:0 0 auto!important;
  aspect-ratio:1/1!important;
  border-radius:12px!important;
  object-fit:contain!important;
  background:#05070d!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.12),0 10px 24px rgba(0,0,0,.36)!important;
}

body.user-mode:not(.auth-mode):not(.comments-mode):not(.comments-admin-user-visual) .brand-wordmark,
body.user-mode.auth-mode .brand-wordmark{
  display:inline-flex!important;
  align-items:center!important;
  gap:1px!important;
  width:clamp(260px, 24vw, 340px)!important;
  min-width:clamp(260px, 24vw, 340px)!important;
  max-width:clamp(260px, 24vw, 340px)!important;
  aspect-ratio:520/92!important;
  height:auto!important;
  line-height:1!important;
  white-space:nowrap!important;
  overflow:visible!important;
  text-overflow:clip!important;
  flex:0 0 auto!important;
  font-family:Impact,"Arial Black","Roboto Condensed",Arial,sans-serif!important;
  font-size:clamp(32px, 3.2vw, 44px)!important;
  font-style:normal!important;
  font-weight:900!important;
  letter-spacing:.005em!important;
  text-transform:uppercase!important;
  transform:none!important;
  transform-origin:left center!important;
  filter:none!important;
  text-shadow:none!important;
  box-shadow:none!important;
  mix-blend-mode:normal!important;
  opacity:1!important;
}

body.user-mode:not(.auth-mode):not(.comments-mode):not(.comments-admin-user-visual) .brand-wordmark-svg,
body.user-mode.auth-mode .brand-wordmark-svg{
  display:block!important;
  width:100%!important;
  height:auto!important;
  aspect-ratio:520/92!important;
  overflow:visible!important;
  transform:translateY(1px)!important;
  filter:none!important;
  box-shadow:none!important;
  text-shadow:none!important;
  mix-blend-mode:normal!important;
  opacity:1!important;
}

body.user-mode:not(.auth-mode):not(.comments-mode):not(.comments-admin-user-visual) .brand-wordmark-svg text,
body.user-mode:not(.auth-mode):not(.comments-mode):not(.comments-admin-user-visual) .brand-wordmark-svg tspan,
body.user-mode.auth-mode .brand-wordmark-svg text,
body.user-mode.auth-mode .brand-wordmark-svg tspan{
  font-family:"Arial Black",Impact,"Helvetica Neue",Arial,sans-serif!important;
  font-style:normal!important;
  font-stretch:normal!important;
  font-synthesis:none!important;
  letter-spacing:-4px!important;
  paint-order:stroke fill!important;
  text-rendering:geometricPrecision!important;
  filter:none!important;
  text-shadow:none!important;
  box-shadow:none!important;
  mix-blend-mode:normal!important;
  opacity:1!important;
}

@media (max-width:520px){
  body.user-mode:not(.auth-mode):not(.comments-mode):not(.comments-admin-user-visual) .brand,
  body.user-mode.auth-mode .brand{
    gap:8px!important;
    max-width:calc(100vw - 136px)!important;
  }

  body.user-mode:not(.auth-mode):not(.comments-mode):not(.comments-admin-user-visual) .brand-app-icon,
  body.user-mode.auth-mode .brand-app-icon{
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    min-height:34px!important;
    border-radius:10px!important;
  }

  body.user-mode:not(.auth-mode):not(.comments-mode):not(.comments-admin-user-visual) .brand-wordmark,
  body.user-mode.auth-mode .brand-wordmark{
    width:clamp(176px, 46vw, 184px)!important;
    min-width:clamp(176px, 46vw, 184px)!important;
    max-width:clamp(176px, 46vw, 184px)!important;
    font-size:clamp(23px, 7.25vw, 29px)!important;
  }
}

@media (max-width:380px){
  body.user-mode:not(.auth-mode):not(.comments-mode):not(.comments-admin-user-visual) .brand-wordmark,
  body.user-mode.auth-mode .brand-wordmark{
    font-size:clamp(21px, 6.8vw, 25px)!important;
  }
}

@supports (-webkit-touch-callout:none){
  @media (max-width:520px){
    body.user-mode:not(.auth-mode):not(.comments-mode):not(.comments-admin-user-visual) .brand-wordmark-svg text,
    body.user-mode:not(.auth-mode):not(.comments-mode):not(.comments-admin-user-visual) .brand-wordmark-svg tspan,
    body.user-mode.auth-mode .brand-wordmark-svg text,
    body.user-mode.auth-mode .brand-wordmark-svg tspan{
      letter-spacing:-2px!important;
    }
  }
}

/* --- source site-visual.css L10605-L10614 --- */
@media (min-width: 700px) and (max-width: 899px){
  body.user-mode:not(.auth-mode) .wrap{
    max-width:760px!important;
    padding-left:18px!important;
    padding-right:18px!important;
  }
  body.user-mode:not(.auth-mode) .user-bottom-nav{
    max-width:760px!important;
  }
}

/* --- fix: mobile fixed header + wrap offset (site-visual L10616-10635) --- */
/* === GUEST / USER MOBILE APP: fixed top header 2026-05-14 ===
   Keep the top shell visible while the public feed scrolls in the mobile app.
   Applied to the shared mobile user shell, including guest viewing of the public feed. */
@media (max-width: 699px){
  body.user-mode:not(.auth-mode) .wrap{
    padding-top:calc(98px + env(safe-area-inset-top,0px))!important;
  }
  body.user-mode:not(.auth-mode) header{
    position:fixed!important;
    top:0!important;
    left:50%!important;
    right:auto!important;
    transform:translateX(-50%)!important;
    width:min(100%,430px)!important;
    max-width:430px!important;
    margin:0!important;
    z-index:120000!important;
    box-sizing:border-box!important;
  }
}

/* --- fix: push button header layout v153 (site-visual L13805-13859) --- */
/* === DREAMCARS v153: user push button fixed at the top-right beside the logo row === */
body.user-mode:not(.auth-mode) header{
  position:relative!important;
}
body.user-mode:not(.auth-mode) header .header-push-control{
  position:absolute!important;
  top:16px!important;
  right:18px!important;
  z-index:8!important;
  width:auto!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  pointer-events:auto!important;
}
body.user-mode:not(.auth-mode) header .header-push-btn{
  min-height:38px!important;
  padding:9px 12px!important;
  font-size:12px!important;
  max-width:min(48vw,240px)!important;
}
body.user-mode:not(.auth-mode) header .user-top-line{
  padding-right:min(52vw,260px)!important;
}
@media (max-width:520px){
  body.user-mode:not(.auth-mode) header .header-push-control{
    top:14px!important;
    right:14px!important;
  }
  body.user-mode:not(.auth-mode) header .header-push-btn{
    min-height:36px!important;
    padding:8px 10px!important;
    font-size:11px!important;
    max-width:min(50vw,190px)!important;
  }
  body.user-mode:not(.auth-mode) header .user-top-line{
    padding-right:min(54vw,205px)!important;
  }
}
@media (min-width:900px){
  body.user-mode:not(.auth-mode) header .header-push-control{
    top:18px!important;
    right:22px!important;
  }
  body.user-mode:not(.auth-mode) header .header-push-btn{
    min-height:44px!important;
    padding:11px 16px!important;
    font-size:13px!important;
    max-width:none!important;
  }
  body.user-mode:not(.auth-mode) header .user-top-line{
    padding-right:270px!important;
  }
}

/* --- fix: V380 unified bottom nav — keeps menu fixed at bottom (site-visual L20218-20333) --- */
:root{
  --dc-bottom-nav-max-width:430px;
  --dc-bottom-nav-gap:5px;
  --dc-bottom-nav-padding-x:7px;
  --dc-bottom-nav-padding-top:7px;
  --dc-bottom-nav-padding-bottom:calc(7px + env(safe-area-inset-bottom,0px));
  --dc-bottom-nav-item-min-height:48px;
}

body.user-mode:not(.auth-mode) .user-bottom-nav{
  position:fixed!important;
  left:50%!important;
  right:auto!important;
  top:auto!important;
  bottom:0!important;
  transform:translateX(-50%)!important;
  z-index:99999!important;
  width:100%!important;
  max-width:var(--dc-bottom-nav-max-width)!important;
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:var(--dc-bottom-nav-gap)!important;
  align-items:stretch!important;
  justify-content:stretch!important;
  padding:var(--dc-bottom-nav-padding-top) var(--dc-bottom-nav-padding-x) var(--dc-bottom-nav-padding-bottom)!important;
  margin:0!important;
  box-sizing:border-box!important;
  background:linear-gradient(180deg,rgba(20,20,20,.98),rgba(0,0,0,.99))!important;
  border-top:1px solid rgba(255,138,0,.30)!important;
  border-left:0!important;
  border-right:0!important;
  border-bottom:0!important;
  border-radius:18px 18px 0 0!important;
  box-shadow:0 -6px 18px rgba(0,0,0,.34),0 0 18px rgba(255,138,0,.08)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
}

body.user-mode:not(.auth-mode) .user-bottom-nav a,
body.user-mode:not(.auth-mode) .user-bottom-nav .user-bottom-nav-placeholder{
  min-width:0!important;
  min-height:var(--dc-bottom-nav-item-min-height)!important;
  height:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  padding:8px 3px!important;
  border-radius:13px!important;
  font-size:11px!important;
  line-height:1.05!important;
  font-weight:900!important;
  white-space:normal!important;
  color:#fff!important;
  background:rgba(255,255,255,.045)!important;
  border:1px solid rgba(255,255,255,.08)!important;
  text-decoration:none!important;
  box-shadow:none!important;
  transform:none!important;
}

body.user-mode:not(.auth-mode) .user-bottom-nav .user-bottom-nav-placeholder{
  background:transparent!important;
  border-color:transparent!important;
  pointer-events:none!important;
}

body.user-mode:not(.auth-mode) .user-bottom-nav a.nav-current,
body.user-mode:not(.auth-mode) .user-bottom-nav a:hover,
body.user-mode:not(.auth-mode) .user-bottom-nav a:active{
  color:#ffb347!important;
  border-color:rgba(255,138,0,.6)!important;
  background:rgba(255,138,0,.08)!important;
  box-shadow:none!important;
  transform:none!important;
}

body.user-mode:not(.auth-mode) .user-bottom-nav a[href*="user_logout"]{
  color:#ffd7d7!important;
  border-color:rgba(255,80,80,.28)!important;
}

@media (max-width:360px){
  body.user-mode:not(.auth-mode) .user-bottom-nav{
    --dc-bottom-nav-gap:4px;
    --dc-bottom-nav-padding-x:5px;
  }
  body.user-mode:not(.auth-mode) .user-bottom-nav a,
  body.user-mode:not(.auth-mode) .user-bottom-nav .user-bottom-nav-placeholder{
    min-height:46px!important;
    padding-left:2px!important;
    padding-right:2px!important;
    font-size:10px!important;
  }
}

/* --- fix: unified black shell background (site-visual L20335-20361) --- */
html,
body{
  background:#000!important;
  background-color:#000!important;
  background-image:none!important;
  background-attachment:fixed!important;
}

body::before{
  content:""!important;
  position:fixed!important;
  inset:0!important;
  z-index:-1!important;
  pointer-events:none!important;
  background:#000!important;
}

body.user-mode{
  background:#000!important;
  background-color:#000!important;
  background-image:none!important;
  background-attachment:fixed!important;
}

/* --- source site-visual.css L22574-L22617 --- */
/* User/public header shell alignment: guest and user pages (parity with ?page=public). */
body.user-mode:not(.auth-mode):not(.comments-mode):not(.comments-admin-user-visual) .wrap{
  padding-top:calc(104px + env(safe-area-inset-top,0px))!important;
}

body.user-mode:not(.auth-mode):not(.comments-mode):not(.comments-admin-user-visual) header{
  position:fixed!important;
  top:0!important;
  left:0!important;
  right:0!important;
  transform:none!important;
  width:100%!important;
  max-width:none!important;
  min-height:84px!important;
  margin:0!important;
  padding:12px 18px!important;
  border-radius:0 0 24px 24px!important;
  border:1px solid rgba(255,255,255,.10)!important;
  border-top:0!important;
  background:
    radial-gradient(circle at 12% 50%,rgba(255,255,255,.07),transparent 28%),
    linear-gradient(180deg,rgba(24,24,24,.96),rgba(8,8,8,.96))!important;
  box-shadow:0 18px 48px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.06)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
  box-sizing:border-box!important;
}

@media (max-width:699px){
  body.user-mode:not(.auth-mode):not(.comments-mode):not(.comments-admin-user-visual) .wrap{
    padding-top:calc(114px + env(safe-area-inset-top,0px))!important;
  }

  body.user-mode:not(.auth-mode):not(.comments-mode):not(.comments-admin-user-visual) header{
    left:0!important;
    right:0!important;
    transform:none!important;
    width:100%!important;
    max-width:none!important;
    min-height:96px!important;
    padding:10px 14px!important;
    border-radius:0 0 20px 20px!important;
  }
}