/* CARHUNTER adaptive layout: desktop, tablet, Android and iOS standalone PWA */
:root{--ch-top:env(safe-area-inset-top,0px);--ch-bottom:env(safe-area-inset-bottom,0px);--ch-left:env(safe-area-inset-left,0px);--ch-right:env(safe-area-inset-right,0px)}
html{width:100%;min-height:100%;-webkit-text-size-adjust:100%;scroll-padding-top:110px}
body{width:100%;min-width:0;min-height:100vh;min-height:100dvh;overflow-x:hidden}
.app{min-height:100vh;min-height:100dvh;max-width:1180px;width:100%;box-sizing:border-box}
.app>header{box-sizing:border-box;width:100%;min-height:80px;height:auto!important;padding:16px max(22px,var(--ch-right)) 16px max(22px,var(--ch-left))!important;transform:none;scroll-margin-top:0}
.app>header .brandwrap,.app>header .headright{min-width:0}
.app>header .brandwrap{flex:1 1 auto}
.app>header .headright{flex:0 0 auto}
.app>header .brandtext{overflow:hidden}
.app>header .brandtext span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#view{min-width:0}
#view img{max-width:100%}
button,a,input,select,textarea{touch-action:manipulation}
input,select,textarea{max-width:100%}
@media(min-width:1100px){.app>header{min-height:96px;padding:18px 30px!important}#view{max-width:1180px}}
@media(min-width:701px) and (max-width:1099px){.app>header{min-height:82px;padding:14px 24px!important}main{padding-left:24px!important;padding-right:24px!important}.homecards{grid-template-columns:repeat(2,minmax(0,1fr))!important}.brandtext strong{font-size:21px}}
@media(max-width:700px){
 .app>header{min-height:70px;padding:10px max(14px,var(--ch-right)) 10px max(14px,var(--ch-left))!important;gap:8px}
 .app>header .menuToggle{flex-shrink:0}
 .app>header .brandwrap{gap:9px}
 .app>header .headright{gap:7px}
 .app>header .brandtext strong{font-size:clamp(16px,4.3vw,20px)}
 .app>header .brandtext span{font-size:10px}
 .app>header .notifybtn,.app>header .profilebtn{flex-shrink:0;width:42px;height:42px;min-width:42px;min-height:42px}
 .app>header .menuToggle{width:42px;height:42px;min-width:42px;min-height:42px}
 main{padding-left:max(14px,var(--ch-left))!important;padding-right:max(14px,var(--ch-right))!important}
 .app{padding-bottom:calc(90px + var(--ch-bottom))!important}
 .sidebar{padding-top:calc(18px + var(--ch-top))!important;padding-bottom:calc(16px + var(--ch-bottom))!important}
 .homecards,.homequick,.filtergrid{min-width:0}
}
@media(max-width:380px){.app>header .brandtext span{display:none}.app>header .brandwrap{gap:6px}.app>header .headright{gap:5px}.app>header .notifybtn,.app>header .profilebtn{width:38px;height:38px;min-width:38px;min-height:38px}}
/* iOS standalone: reserve physical space for Dynamic Island/status bar. */
@media(display-mode:standalone){
 .app>header{padding-top:calc(var(--ch-top) + 12px)!important;min-height:calc(72px + var(--ch-top))!important}
 .app>header.header-hidden{transform:none!important}
 .app{padding-bottom:calc(94px + var(--ch-bottom))!important}
}
@supports(-webkit-touch-callout:none){
 @media(display-mode:standalone){
  .app>header{padding-top:calc(max(20px,var(--ch-top)) + 12px)!important;min-height:calc(72px + max(20px,var(--ch-top)))!important}
 }
}
@media(max-width:700px) and (display-mode:standalone){
 .app>header{padding-left:max(14px,var(--ch-left))!important;padding-right:max(14px,var(--ch-right))!important}
}
@media(orientation:landscape) and (max-height:550px){.app>header{min-height:60px!important;padding-top:max(8px,var(--ch-top))!important;padding-bottom:8px!important}.app>header .brandtext span{display:none}}

/* Center brand geometrically on phones, independent of right-side icons. */
@media(max-width:700px){
 .app>header{display:flex!important;position:relative!important;align-items:center!important;justify-content:space-between!important}
 .app>header .brandwrap{display:flex!important;flex:0 0 auto!important}
 .app>header .menuToggle{grid-column:1!important;grid-row:1!important;justify-self:start!important}
 .app>header .brandmark{display:none!important}
 .app>header .brandtext{position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;display:flex!important;flex-direction:column!important;align-items:center!important;text-align:center!important;width:max-content!important;max-width:calc(100% - 190px)!important;pointer-events:none!important}
 .app>header .headright{margin-left:auto!important;position:relative!important;z-index:1!important}
 .app>header .brandtext strong{font-size:clamp(15px,4vw,20px)!important}
 .app>header .brandtext span{font-size:9px!important}
 .app>header .headtitle{display:none!important}
}
@media(max-width:390px){.app>header .brandtext span{display:none!important}.app>header .headright{gap:4px!important}}

/* Mobile layout normalization — overrides legacy absolute header positions. */
@media(max-width:700px){
 .app>header{
  position:sticky!important;top:0!important;
  display:grid!important;
  grid-template-columns:44px minmax(0,1fr) 94px!important;
  align-items:center!important;
  justify-content:stretch!important;
  gap:0!important;
  height:72px!important;min-height:72px!important;
  padding:10px max(14px,var(--ch-right)) 10px max(14px,var(--ch-left))!important;
  box-sizing:border-box!important;
 }
 .app>header .brandwrap{
  display:contents!important;position:static!important;
  transform:none!important;width:auto!important;
 }
 .app>header .menuToggle{
  position:relative!important;left:auto!important;right:auto!important;
  top:auto!important;bottom:auto!important;transform:none!important;
  grid-column:1!important;grid-row:1!important;
  justify-self:start!important;align-self:center!important;
  margin:0!important;width:42px!important;height:42px!important;
  min-width:42px!important;min-height:42px!important;
 }
 .app>header .brandmark{display:none!important}
 .app>header .brandtext{
  position:static!important;left:auto!important;right:auto!important;
  top:auto!important;bottom:auto!important;transform:none!important;
  grid-column:2!important;grid-row:1!important;
  justify-self:center!important;align-self:center!important;
  display:flex!important;flex-direction:column!important;align-items:center!important;
  width:auto!important;min-width:0!important;max-width:100%!important;
  text-align:center!important;overflow:hidden!important;pointer-events:none!important;
 }
 .app>header .brandtext strong{font-size:clamp(15px,4vw,20px)!important;line-height:1.2!important}
 .app>header .brandtext span{font-size:9px!important;max-width:100%!important}
 .app>header .headright{
  position:static!important;left:auto!important;right:auto!important;
  top:auto!important;bottom:auto!important;transform:none!important;
  grid-column:3!important;grid-row:1!important;
  justify-self:end!important;align-self:center!important;
  display:flex!important;align-items:center!important;justify-content:flex-end!important;
  gap:6px!important;margin:0!important;width:auto!important;
  z-index:1!important;
 }
 .app>header .notifybtn,.app>header .profilebtn{
  position:relative!important;top:auto!important;right:auto!important;
  left:auto!important;bottom:auto!important;transform:none!important;
  flex:0 0 40px!important;width:40px!important;height:40px!important;
  min-width:40px!important;min-height:40px!important;
  margin:0!important;padding:0!important;
 }
 .app>header .headtitle,.app>header .radar{display:none!important}
 #view,.app main{min-width:0!important;max-width:100%!important}
 .cards,.homecards{grid-template-columns:minmax(0,1fr)!important;gap:14px!important}
 .cards>.card,.homecards>.card{min-width:0!important;max-width:100%!important}
 .homecards .thumb{height:auto!important;aspect-ratio:16/10;max-height:300px}
 .card h3,.carddesc,.detaildesc,.analysistext{overflow-wrap:anywhere}
 .homepanel,.profilecover,.profilepanel,.filterbox,.card{max-width:100%;min-width:0}
 .filtergrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .filtergrid label,.filtergrid input,.filtergrid select{min-width:0!important}
 .compgrid,.profilegrid,.helpgrid{grid-template-columns:minmax(0,1fr)!important}
 .compcard{grid-template-columns:clamp(76px,25vw,105px) minmax(0,1fr)!important}
 .profiletop,.panelhead,.row{min-width:0}
 .homeactions,.quickactions{min-width:0}
 .sidebar{max-width:86vw!important;max-height:100dvh!important;overflow-y:auto!important}
 .app{padding-bottom:calc(92px + var(--ch-bottom))!important}
}
@media(max-width:390px){
 .app>header{grid-template-columns:40px minmax(0,1fr) 82px!important;padding-left:max(10px,var(--ch-left))!important;padding-right:max(10px,var(--ch-right))!important}
 .app>header .menuToggle{width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important}
 .app>header .notifybtn,.app>header .profilebtn{width:37px!important;height:37px!important;min-width:37px!important;min-height:37px!important;flex-basis:37px!important}
 .app>header .headright{gap:4px!important}
 .app>header .brandtext span{display:none!important}
 .app>header .brandtext strong{font-size:clamp(14px,4vw,17px)!important}
 .filtergrid{grid-template-columns:minmax(0,1fr)!important}
 .profilemetrics{grid-template-columns:repeat(3,minmax(0,1fr))!important}
 .profilemetrics div{min-width:0!important;padding:8px 5px!important}
 .profilemetrics strong{font-size:16px!important}
 .profilemetrics span{font-size:9px!important;overflow-wrap:anywhere}
}
@media(max-width:700px) and (display-mode:standalone){
 .app>header{height:calc(72px + var(--ch-top))!important;min-height:calc(72px + var(--ch-top))!important;padding-top:calc(10px + var(--ch-top))!important}
}
@supports(-webkit-touch-callout:none){
 @media(max-width:700px) and (display-mode:standalone){
  .app>header{height:calc(72px + max(20px,var(--ch-top)))!important;min-height:calc(72px + max(20px,var(--ch-top)))!important;padding-top:calc(10px + max(20px,var(--ch-top)))!important}
 }
}