/* =============================
   CEO Dashboard — Premium Glass UI
   ============================= */

:root{
  --bg0:#060814;
  --bg1:#0a1024;
  --glass: rgba(255,255,255,.10);
  --glass2: rgba(255,255,255,.14);
  --stroke: rgba(255,255,255,.14);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.66);

  --shadow: 0 20px 60px rgba(0,0,0,.45);
  --shadow2: 0 10px 30px rgba(0,0,0,.35);

  --r16: 16px;
  --r20: 20px;
  --r24: 24px;

  --safeB: min(env(safe-area-inset-bottom, 0px), 34px);
  --safeT: min(env(safe-area-inset-top, 0px), 24px);
}

*{ box-sizing:border-box; -webkit-tap-highlight-color: transparent; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  overflow-x:hidden;
  background: #060814;
}

.app{
max-width: 480px;
  margin: 0 auto;
    padding: calc(6px + var(--safeT)) 14px calc(88px + var(--safeB));
  min-height: 100%;
}

.glass{
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.08));
  border: 1px solid var(--stroke);
  border-radius: var(--r20);
  box-shadow: var(--shadow2);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 12px;
}


/* === TOPBAR GREETING (moved hero into header) === */
.top-hello{
  flex: 1;
  display:flex;
  align-items:center;
  gap: 10px;
  justify-content:center;
  min-width: 0;
}

.hello.top{
  min-width: 0;
}

.hello.top .hello-main{
  font-size: 16px;
  font-weight: 1000;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}

.hello.top .hello-sub{
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}

.dotsep{
  opacity: .6;
  padding: 0 6px;
}

.avatar.small{
  width: 38px;
  height: 38px;
  border-radius: 14px;
}

.avatar.small .avatar-face{
  width: 30px;
  height: 30px;
  border-radius: 12px;
}

/* На очень узких экранах прячем "• Обновлено", чтобы не ломало строку */
@media (max-width: 370px){
  .dotsep{ display:none; }
  #updated{ display:none; }
}

.icon-btn{
  width:44px; height:44px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.08);
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  display:flex; align-items:center; justify-content:center;
  color: var(--text);
  cursor:pointer;
}
.icon-btn:active{ transform: translateY(1px) scale(.99); }

.chev{
  width:10px; height:10px;
  border-left: 2px solid rgba(255,255,255,.86);
  border-bottom: 2px solid rgba(255,255,255,.86);
  transform: rotate(45deg);
  margin-left:4px;
}
.dots{
  width:18px; height:4px;
  position:relative;
}
.dots:before,.dots:after,.dots i{
  content:"";
  position:absolute; top:0;
  width:4px; height:4px; border-radius:99px;
  background: rgba(255,255,255,.86);
}
.dots:before{ left:0; }
.dots:after{ right:0; }
.dots i{ left:7px; }

.title{ flex: 1; text-align:center; }
.title-main{ font-weight: 800; letter-spacing: .2px; font-size: 16px; }
.sep{ opacity:.5; padding:0 6px; }
.title-sub{ margin-top:3px; font-size:12px; color: var(--muted); }

.hero{
  padding: 14px;
  border-radius: var(--r24);
}
.hero-row{
  display:flex; align-items:center; gap:12px;
}
.avatar{
  width:54px; height:54px; border-radius: 18px;
  background: rgba(255,255,255,.08);
  border: 1px solid var(--stroke);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.avatar-face{
  width:42px; height:42px; border-radius: 16px;
  background:
    radial-gradient(circle at 35% 35%, rgba(255,255,255,.65), transparent 45%),
    linear-gradient(180deg, rgba(106,142,255,.55), rgba(90,255,205,.20));
}
.hello-main{ font-size: 20px; font-weight: 900; }
.hello-sub{ font-size: 13px; color: var(--muted); margin-top: 4px; }

.grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 12px 0 10px;
}
.tile{
  position:relative;
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 12px;
  border-radius: var(--r20);
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.08);
  box-shadow: var(--shadow2);
  cursor:pointer;
  text-align:left;
}
.tile:active{ transform: translateY(1px) scale(.995); }
.tile-ico{
  width:44px; height:44px;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.10);
  display:flex; align-items:center; justify-content:center;
}
.tile-title{ font-weight: 900; font-size: 15px; }
.tile-sub{ font-size: 12px; color: var(--muted); margin-top: 2px; }

.tile-badge{
  position:absolute;
  right:10px; top:10px;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.10);
}
.tile-badge.ok{
  background: rgba(88,255,205,.18);
}

.ico{ width:26px; height:26px; border-radius: 10px; opacity:.95; }
.ico.doc{ background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.18)); }
.ico.car{ background: linear-gradient(180deg, rgba(255,211,106,.65), rgba(255,138,76,.25)); }
.ico.driver{ background: linear-gradient(180deg, rgba(160,180,255,.70), rgba(106,142,255,.25)); }
.ico.wallet{ background: linear-gradient(180deg, rgba(88,255,205,.55), rgba(88,255,205,.18)); }
.ico.warn{ background: linear-gradient(180deg, rgba(255,130,130,.65), rgba(255,84,84,.22)); }
.ico.map{ background: linear-gradient(180deg, rgba(165,255,120,.55), rgba(88,255,205,.18)); }

.mini-kpi{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 10px 0 12px;
}
.mini{
  padding: 12px;
  border-radius: var(--r20);
  display:flex; align-items:center; justify-content:space-between;
}
.mini-left{ display:flex; align-items:center; gap:10px; }
.mini-ico{ width:22px; height:22px; border-radius: 8px; border:1px solid var(--stroke); }
.mini-ico.blue{ background: rgba(106,142,255,.25); }
.mini-ico.red{ background: rgba(255,84,84,.22); }
.mini-label{ color: var(--muted); font-size: 12px; }
.mini-value{ font-size: 18px; font-weight: 900; }
.mini-value.red{ color: rgba(255,130,130,.95); }

.cards{ display:flex; flex-direction:column; gap:10px; }
.card{
  padding: 14px;
  border-radius: var(--r24);
}
.card-title{ color: var(--muted); font-size: 13px; }
.big{
  font-size: 34px;
  font-weight: 1000;
  letter-spacing: .3px;
  margin-top: 6px;
}

.card-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.row{ display:flex; align-items:center; justify-content:space-between; }
.row-left{ display:flex; align-items:center; gap:10px; }
.row-ico{
  width:28px; height:28px; border-radius: 10px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.08);
}
.row-ico.wallet{ background: rgba(88,255,205,.16); }
.row-ico.crash{ background: rgba(255,84,84,.16); }
.row-title{ font-weight: 800; }
.row-val{ font-weight: 900; }
.row-val.red{ color: rgba(255,130,130,.95); }

.notif{
  margin-top: 12px;
  padding: 12px;
  border-radius: var(--r24);
}
.notif-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom: 10px;
}
.notif-title{ font-weight: 900; }
.link{
  border:0;
  background: transparent;
  color: rgba(180,200,255,.95);
  font-weight: 800;
  cursor:pointer;
}
.notif-list{ display:flex; flex-direction:column; gap:8px; }
.nitem{
  padding: 10px;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.07);
}
.nhead{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ntitle{ font-weight: 900; }
.ntime{ font-size: 12px; color: var(--muted); white-space:nowrap; }
.ntext{ margin-top: 6px; color: rgba(255,255,255,.78); font-size: 13px; line-height: 1.35; }
.tag{
  font-size: 11px;
  font-weight: 900;
  padding: 4px 8px;
  border-radius: 999px;
  border:1px solid var(--stroke);
}
.tag.info{ background: rgba(106,142,255,.18); }
.tag.warning{ background: rgba(255,211,106,.16); }
.tag.danger{ background: rgba(255,84,84,.16); }

.bottom{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 10px;
  width: min(480px, calc(100% - 24px));
  padding: 10px 10px calc(10px + var(--safeB));
  border-radius: 26px;
  display:flex;
  justify-content:space-between;
  gap: 8px;
  z-index: 50;
}
.bitem{
  flex:1;
  border:0;
  background: transparent;
  color: rgba(255,255,255,.82);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 6px;
  padding: 10px 6px;
  border-radius: 18px;
  cursor:pointer;
  position:relative;
}
.bitem.active{
  background: rgba(255,255,255,.08);
  border: 1px solid var(--stroke);
}
.bico{
  width:22px; height:22px;
  border-radius: 9px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.06);
}
.blabel{ font-size: 11px; font-weight: 800; color: rgba(255,255,255,.75); }
.bubble{
  position:absolute;
  top: 6px; right: 18px;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(106,142,255,.9);
  color: #0b1020;
  font-weight: 1000;
  font-size: 11px;
  display:flex; align-items:center; justify-content:center;
}
.bubble.red{ background: rgba(255,84,84,.95); color: #16080b; }

.toast{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(110px + var(--safeB));
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: rgba(255,255,255,.92);
  padding: 10px 12px;
  border-radius: 14px;
  box-shadow: var(--shadow2);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.toast.show{
  opacity: 1;
  transform: translateX(-50%) translateY(-6px);
}

@media (max-width: 370px){
  .big{ font-size: 30px; }
  .grid{ gap: 8px; }
}


/* GIF ICONS */
.tile-ico.img{
  padding: 0;
  overflow: hidden;
}
.tile-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px; /* как у tile-ico */
  display: block;
}



/* === BLURRED CITY BACKGROUND === */
body::before{ display:none !important; }


/* === SECTION VIEW === */
.section-view{
  position: fixed;
  inset: 0;
  padding: calc(10px + var(--safeT)) 14px calc(20px + var(--safeB));
  background: transparent;
  z-index: 100;
  display:flex;
  flex-direction:column;
  gap:12px;
  
  
}

.section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.section-title{
  font-size:18px;
  font-weight:900;
  text-align:center;
  flex:1;
}



.section-body{
  flex: 1;
  border-radius: var(--r24);
  padding: 12px;

  /* КРИТИЧНО: iOS/TG включает overflow только если min-height:0 в flex-контейнере */
  min-height: 0;

  /* Скроллим именно список/карточки */
  overflow-y: scroll;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;

  /* чтобы последняя карточка не пряталась под нижней панелью */
  padding-bottom: calc(170px + env(safe-area-inset-bottom));
}

.section-placeholder{
  color: var(--muted);
  font-size:15px;
  font-weight:600;
}


/* === SECTION OPEN MODE (hide dashboard, show section view) === */
body.section-open .app > :not(#sectionView):not(#toast):not(.bottom){
  display: none !important;
}


/* === FORCE HIDE SECTION VIEW BY DEFAULT === */


/* === SECTION VIEW TRANSITION === */
#sectionView{
  display:flex;                 /* всегда в DOM */
  opacity: 0;                   /* по умолчанию невидим */
  transform: translateY(14px);  /* лёгкий подъём */
  pointer-events: none;         /* клики не ловит */
  transition: opacity .18s ease, transform .18s ease;
  will-change: opacity, transform;
}

body.section-open #sectionView{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}


/* === SECTION LIST === */
.slist{
  display:flex;
  flex-direction:column;
  gap:10px;
  width:100%;
}

.sitem{
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.08);
  box-shadow: var(--shadow2);
}

.srow{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.sstrong{
  font-weight:900;
  font-size:15px;
}

.smuted{
  font-size:13px;
  color: var(--muted);
}


/* === SECTION SEARCH === */
.section-search{
  padding: 10px 12px;
  border-radius: var(--r24);
}

.search-input{
  width: 100%;
  border: 0;
  outline: none;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--stroke);
  color: var(--text);
  border-radius: 16px;
  padding: 12px 12px;
  font-size: 14px;
  font-weight: 700;
}

.search-input::placeholder{
  color: rgba(255,255,255,.55);
}


/* === SEARCH HIGHLIGHT === */
mark.hl{
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.22);
  color: rgba(255,255,255,.95);
  padding: 0 3px;
  border-radius: 6px;
}


/* === DISABLE DOUBLE TAP ZOOM (Mini App feel) === */
html, body{
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
}

.app, button, a{
  touch-action: manipulation;
}


/* === OVERLAY VIEW (Tasks/Notifications) === */
.overlay-view{
  position: fixed;
  inset: 0;
  padding: calc(10px + var(--safeT)) 14px calc(20px + var(--safeB));
  z-index: 120;
  display:flex;
  flex-direction:column;
  gap:12px;

  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  will-change: opacity, transform;
}

body.tasks-open #tasksView,
body.notif-open #notifView{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.overlay-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.overlay-title{
  flex:1;
  text-align:center;
  font-size:18px;
  font-weight:900;
}

.overlay-body{
  flex:1;
  border-radius: var(--r24);
  padding: 12px;
  overflow:auto;
}

/* iOS-like list blocks */
.ios-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.ios-card{
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.08);
  box-shadow: var(--shadow2);
  padding: 12px 14px;
}

.ios-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.ios-title{
  font-weight: 900;
}

.ios-time{
  font-size:12px;
  color: var(--muted);
  white-space:nowrap;
}

.ios-sub{
  margin-top: 6px;
  color: rgba(255,255,255,.78);
  font-size: 13px;
  line-height: 1.35;
}

/* Bottom icons (simple shapes) */
.bico.home{ background: rgba(255,255,255,.06); }
.bico.list{ background: rgba(255,255,255,.06); }
.bico.bell{ background: rgba(255,255,255,.06); }
.bico.more{ background: rgba(255,255,255,.06); }


/* === APP MODE SWITCH (hide Home when other views open) === */
body.section-open .app > :not(#sectionView):not(#toast):not(.bottom){
  display: none !important;
}
body.tasks-open .app > :not(#tasksView):not(#toast):not(.bottom){
  display: none !important;
}
body.notif-open .app > :not(#notifView):not(#toast):not(.bottom){
  display: none !important;
}


/* === BACKGROUND TUNING (blur + contrast) === */
/* Если фон сделан через body::before — размоем именно его */
body::before{ display:none !important; }

/* Дополнительная затемняющая плёнка поверх фона */
body::after{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.48));
}


/* === DARK UI CONTRAST TUNE (readability) === */
:root{
  --text: rgba(255,255,255,.95);
  --muted: rgba(255,255,255,.78);
  --stroke: rgba(255,255,255,.18);

  /* Glass чуть плотнее, чтобы на сером фоне читалось */
  --glass: rgba(0,0,0,.28);
  --glass2: rgba(0,0,0,.34);
}

/* Карточки/гласс — чуть темнее и контрастнее */
.glass{
  background: linear-gradient(180deg, rgba(0,0,0,.34), rgba(0,0,0,.22)) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.45) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* Кнопки (верх/назад/меню) */
.icon-btn{
  background: rgba(0,0,0,.35) !important;
  border: 1px solid rgba(255,255,255,.20) !important;
}

/* Заголовки делаем белее */
.title-main, .overlay-title, .hello-main{
  color: rgba(255,255,255,.96);
}

/* Подписи/вторичный текст */
.title-sub, .hello-sub, .tile-sub, .smuted, .ios-time, .ios-sub{
  color: rgba(255,255,255,.78) !important;
}

/* Плитки — чуть плотнее */
.tile{
  background: rgba(0,0,0,.30) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
}

/* Нижняя панель — плотнее, чтобы читалось */
.bottom{
  background: rgba(0,0,0,.35) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
}

/* Активный таб — заметнее */
.bitem.active{
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
}


/* === CAR VIEW === */
body.car-open #carView{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
body.car-open .app > :not(#carView):not(#toast):not(.bottom){
  display: none !important;
}

.car-meta{
  display:flex;
  flex-direction:column;
  gap: 6px;
  margin-bottom: 14px;
}
.car-plate{
  font-size: 22px;
  font-weight: 1000;
  letter-spacing: .3px;
}
.car-sub{
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
.car-badges{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}
.car-badge{
  font-size: 12px;
  font-weight: 900;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.08);
}

.car-block{
  margin-top: 12px;
}
.car-block-title{
  font-weight: 900;
  margin-bottom: 8px;
}
.car-photos{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.car-photo{
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.06);
  box-shadow: var(--shadow2);
}
.car-photo img{
  width: 100%;
  height: 140px;
  object-fit: cover;
  display:block;
}



/* === iOS Segmented Control (Cars status filters) === */
.segwrap{
  margin-top: 10px;
}

.seg{
  display:flex;
  gap: 6px;
  padding: 6px;
  border-radius: 18px;
  background: rgba(0,0,0,.28);
}

.seg-btn{
  flex: 1;
  border: 0;
  cursor: pointer;
  color: rgba(255,255,255,.82);
  background: transparent;
  border-radius: 14px;
  padding: 10px 8px;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .2px;
  border: 1px solid transparent;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, color .12s ease;
}

.seg-btn:active{
  transform: scale(.985);
}

.seg-btn.active{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
  color: rgba(255,255,255,.96);
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}

/* === Cars list item (more premium iOS card) === */
.sitem.car-item{
  border-radius: 18px;
  padding: 14px 14px;
  transition: transform .12s ease, background .12s ease;
}
.sitem.car-item:active{
  transform: translateY(1px) scale(.995);
  background: rgba(255,255,255,.10);
}

.car-meta-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}

.car-right{
  display:flex;
  align-items:center;
  gap: 8px;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  font-size: 11px;
  font-weight: 1000;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.86);
  white-space: nowrap;
}

.pill.dot::before{
  content:"";
  width: 7px; height: 7px;
  border-radius: 99px;
  background: rgba(255,255,255,.45);
  box-shadow: 0 0 0 4px rgba(255,255,255,.06);
}

.pill.dot.active::before{ background: rgba(88,255,205,.95); box-shadow: 0 0 0 4px rgba(88,255,205,.14); }
.pill.dot.repair::before{ background: rgba(255,211,106,.95); box-shadow: 0 0 0 4px rgba(255,211,106,.14); }
.pill.dot.dtp::before{ background: rgba(255,84,84,.95); box-shadow: 0 0 0 4px rgba(255,84,84,.14); }
.pill.dot.idle::before{ background: rgba(160,180,255,.95); box-shadow: 0 0 0 4px rgba(160,180,255,.14); }

.chev-right{
  width: 8px; height: 8px;
  border-right: 2px solid rgba(255,255,255,.55);
  border-top: 2px solid rgba(255,255,255,.55);
  transform: rotate(45deg);
  margin-left: 2px;
  opacity: .85;
}


/* === Sticky panel (search + segmented) for Section View === */
.section-head{
  position: sticky;
  top: 0;
  z-index: 140;
  padding-top: 0;
  padding-bottom: 4px;
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.00));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.section-search{
  position: sticky;
  top: 56px; /* примерно высота header */
  z-index: 139;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.segwrap{
  position: sticky;
  top: 118px; /* search + отступ */
  z-index: 138;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Section body scroll looks premium */
.section-body{
  overflow: visible; /* скроллит контейнер section-view */
}


/* === Segmented badges === */
.seg-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
}

.seg-text{
  line-height: 1;
}

.seg-badge{
  min-width: 22px;
  height: 18px;
  padding: 0 7px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size: 11px;
  font-weight: 1000;
  color: rgba(255,255,255,.90);
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 10px 20px rgba(0,0,0,.22);
}

.seg-btn.active .seg-badge{
  background: rgba(106,142,255,.55);
  border-color: rgba(106,142,255,.60);
  color: #0b1020;
}


/* === Segmented badge colors by status === */
.seg-badge[data-badge="all"]{
  background: rgba(106,142,255,.40);
  border-color: rgba(106,142,255,.55);
  color: #0b1020;
}

.seg-badge[data-badge="active"]{
  background: rgba(88,255,205,.32);
  border-color: rgba(88,255,205,.50);
  color: rgba(255,255,255,.92);
}

.seg-badge[data-badge="repair"]{
  background: rgba(255,211,106,.30);
  border-color: rgba(255,211,106,.52);
  color: rgba(255,255,255,.92);
}

.seg-badge[data-badge="dtp"]{
  background: rgba(255,84,84,.28);
  border-color: rgba(255,84,84,.50);
  color: rgba(255,255,255,.92);
}

.seg-badge[data-badge="idle"]{
  background: rgba(160,180,255,.30);
  border-color: rgba(160,180,255,.55);
  color: rgba(255,255,255,.92);
}

/* Active segment = badge becomes more “solid” */
.seg-btn.active .seg-badge[data-badge="active"]{
  background: rgba(88,255,205,.80);
  border-color: rgba(88,255,205,.85);
  color: #07120f;
}
.seg-btn.active .seg-badge[data-badge="repair"]{
  background: rgba(255,211,106,.85);
  border-color: rgba(255,211,106,.90);
  color: #201607;
}
.seg-btn.active .seg-badge[data-badge="dtp"]{
  background: rgba(255,84,84,.85);
  border-color: rgba(255,84,84,.90);
  color: #1a0608;
}
.seg-btn.active .seg-badge[data-badge="idle"]{
  background: rgba(160,180,255,.85);
  border-color: rgba(160,180,255,.90);
  color: #0b1020;
}


/* === HARD STOP HORIZONTAL OVERFLOW === */
html, body{
  overflow-x: hidden !important;
}
.app{
  overflow-x: hidden !important;
}


/* === SEGMENTED FIX: fit or horizontal scroll === */
.segwrap{
  width: 100%;
  max-width: 100%;
}

.seg{
  width: 100%;
  max-width: 100%;
  overflow-x: auto;                 /* <- скролл внутри */
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;            /* Firefox hide */
  display:flex;
  justify-content: flex-start;      /* чтобы не растягивало */
  gap: 6px;
  white-space: nowrap;
  scroll-snap-type: x mandatory;
}
.seg::-webkit-scrollbar{ display:none; } /* WebKit hide */

.seg-btn{
  flex: 0 0 auto !important;        /* <- не растягиваем на всю ширину */
  scroll-snap-align: start;
  padding: 10px 10px;               /* чуть компактнее */
  font-size: 12px;
}

.seg-text{ white-space: nowrap; }

@media (max-width: 420px){
  .seg-btn{
    padding: 9px 10px;
    font-size: 11px;
    border-radius: 13px;
  }
  .seg-badge{
    min-width: 20px;
    height: 17px;
    padding: 0 6px;
    font-size: 10.5px;
  }
}


/* === Segmented scroll hint shadows (left/right) === */
.segwrap{
  position: relative;
}

/* левая тень */
.segwrap::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:18px;
  pointer-events:none;
  z-index:2;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,.55),
    rgba(0,0,0,.25),
    rgba(0,0,0,0)
  );
}

/* правая тень */
.segwrap::after{
  content:"";
  position:absolute;
  right:0;
  top:0;
  bottom:0;
  width:18px;
  pointer-events:none;
  z-index:2;
  background: linear-gradient(
    270deg,
    rgba(0,0,0,.55),
    rgba(0,0,0,.25),
    rgba(0,0,0,0)
  );
}

/* чтобы кнопки не залезали под тени */
.seg{
  padding-left: 8px;
  padding-right: 8px;
}


/* === FIX iOS STICKY SCROLL (Telegram WebView safe) === */
.section-view{
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* ВАЖНО: без auto */
}

/* Header + search + filters — всегда сверху */
.section-head,
.section-search,
.segwrap{
  flex-shrink: 0;
}

/* Скроллим ТОЛЬКО список */
.section-body{
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 12px;
}


/* === FINAL iOS FIX: no sticky, scroll only list === */
.section-view{
  position: fixed !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;   /* важно */
}

/* убиваем sticky, чтобы Telegram iOS не ломал поток */
.section-head,
.section-search,
.segwrap{
  position: relative !important;
  top: auto !important;
  z-index: auto !important;
}

/* список = единственная зона скролла */
.section-body{
  flex: 1 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 16px;
}

/* на всякий случай — запрет горизонтального “уезда” */
html, body, .app{
  overflow-x: hidden !important;
}


/* === CAR ACCORDION === */
.car-acc-btn{
  width: 100%;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  border-radius: 18px;
  padding: 12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  font-weight: 1000;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}

.car-acc-btn:active{
  transform: translateY(1px) scale(.995);
}

.car-acc-right{
  display:flex;
  align-items:center;
  gap: 10px;
}

.car-acc-count{
  min-width: 26px;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size: 12px;
  font-weight: 1000;
  background: rgba(106,142,255,.35);
  border: 1px solid rgba(106,142,255,.50);
  color: rgba(255,255,255,.92);
}

.car-acc-chev{
  width: 9px; height: 9px;
  border-right: 2px solid rgba(255,255,255,.60);
  border-bottom: 2px solid rgba(255,255,255,.60);
  transform: rotate(45deg);
  transition: transform .16s ease;
  opacity: .9;
}

.car-acc-btn[aria-expanded="true"] .car-acc-chev{
  transform: rotate(-135deg); /* вверх */
}

.car-acc-body{
  margin-top: 10px;
  padding: 0;
}


/* === DRIVER VIEW === */
body.driver-open #driverView{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
body.driver-open .app > :not(#driverView):not(#toast):not(.bottom){
  display: none !important;
}

.driver-meta{
  display:flex;
  flex-direction:column;
  gap: 8px;
  margin-bottom: 14px;
}
.driver-name{
  font-size: 20px;
  font-weight: 1000;
  letter-spacing: .2px;
}
.driver-sub{
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}
.driver-addr{
  color: rgba(255,255,255,.78);
  font-size: 13px;
  line-height: 1.35;
}
.driver-badges{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}
.driver-badge{
  font-size: 12px;
  font-weight: 900;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.08);
}


/* === MINI KPI COLORS === */
.mini-kpi{
  grid-template-columns: 1fr 1fr;
}

.mini-ico.green{ background: rgba(88,255,205,.30); }
.mini-ico.yellow{ background: rgba(255,211,106,.35); }
.mini-ico.red{ background: rgba(255,84,84,.35); }
.mini-ico.blue{ background: rgba(160,180,255,.35); }


/* === KPI clickable === */
.kpi-mini{
  cursor: pointer;
  user-select: none;
}
.kpi-mini:active{
  transform: translateY(1px) scale(.995);
}



/* === TOP HELLO HEADER (replace title/updated) === */
.topbar.top-hello{
  padding: 10px 10px;
  border-radius: 22px;
}

.top-hello-center{
  flex: 1;
  text-align: center;
  min-width: 0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap: 2px;
}

.top-hello-main{
  font-weight: 1000;
  font-size: 16px;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.top-hello-sub{
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}



/* === MAGNIFIER ICON (top-right) === */
.mag{
  position: relative;
  width: 18px;
  height: 18px;
  display: inline-block;
}
.mag::before{
  content:"";
  position:absolute;
  left:0; top:0;
  width: 12px; height: 12px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.86);
  box-sizing: border-box;
}
.mag::after{
  content:"";
  position:absolute;
  left: 11px; top: 11px;
  width: 8px; height: 2px;
  background: rgba(255,255,255,.86);
  border-radius: 2px;
  transform: rotate(45deg);
}

/* === GLOBAL SEARCH VIEW === */

/* Мини-окно поиска поверх главного (НЕ отдельный экран) */
#globalSearchView{
  position: fixed;
  inset: 0;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .14s ease;
}





#globalSearchView::before{
  content:"";
  position:absolute;
  inset:0;

  /* ЛЁГКАЯ стеклянная вуаль, без затемнения */
  background: rgba(255,255,255,.06);

  /* НАСТОЯЩИЙ blur того, что ПОД слоем */
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
}

/* лёгкое затемнение, чтобы фокус был на поиске */
/* контейнер окна */
#globalSearchView .gsearch-inner{
  position: relative;
  height: 100%;
  padding: calc(10px + var(--safeT)) 14px calc(88px + var(--safeB));
  display:flex;
  align-items:flex-start;
  justify-content:center;
}

/* само окно (плотнее, меньше прозрачности) */
#globalSearchView .gsearch-card{
  width: 100%;
  max-width: 480px;
  background: rgba(10,16,36,.92);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 22px;
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding: 12px;
}

body.gsearch-open #globalSearchView{
  opacity: 1;
  pointer-events: auto;
}

#globalSearchView{
  position: fixed;
  inset: 0;
  z-index: 9999;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}

/* затемнение + blur фона */
/* сам контейнер поиска */
#globalSearchView .gsearch-inner{
  position: relative;
  z-index: 1;
  height: 100%;
  padding: calc(10px + var(--safeT)) 14px calc(88px + var(--safeB));
}

/* "плотная" карточка, чтобы не сливалось */
#globalSearchView .gsearch-card{
  background: rgba(10,16,36,.92);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 22px;
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

/* поле ввода */
#globalSearchView input{
  width: 100%;
  outline: none;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: var(--text);
  border-radius: 16px;
  padding: 12px 14px;
  font-weight: 800;
}

/* открыто */
body.gsearch-open #globalSearchView{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ВАЖНО: пока поиск открыт — скрываем всё остальное, чтобы не "сливалось" */
.gsearch-box{
  margin-bottom: 10px;
}


/* === PART VIEW === */
body.part-open #partView{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
body.part-open .app > :not(#partView):not(#toast):not(.bottom){
  display: none !important;
}

.part-meta{
  display:flex;
  flex-direction:column;
  gap: 8px;
  margin-bottom: 14px;
}

.part-name{
  font-size: 20px;
  font-weight: 1000;
  letter-spacing: .2px;
}

.part-sub{
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.part-badges{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}

.part-badge{
  font-size: 12px;
  font-weight: 900;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.08);
}


/* === TG AVATAR (topbar) === */
.top-hello-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  min-width: 0;
}

.top-hello-text{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 2px;
  min-width: 0;
}

/* контейнер аватара */
.tg-avatar{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  flex: 0 0 38px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
}

/* фото */
.tg-avatar-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;              /* включим через JS если есть photo_url */
  object-fit: cover;
}

/* фолбек */
.tg-avatar-fallback{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tg-avatar-letter{
  font-size: 14px;
  font-weight: 1000;
  color: rgba(255,255,255,.92);
  text-shadow: 0 6px 18px rgba(0,0,0,.35);
  user-select: none;
}

/* === KPI GIF ICONS === */
.mini-kpi-img{
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
}



/* ===== KPI GIF HARD FIX ===== */
.mini-kpi img,
.mini-kpi-img{
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;

  object-fit: contain !important;
  display: block !important;
  flex: 0 0 22px !important;
}

/* страховка от растягивания */
.mini-kpi{
  align-items: center !important;
}

/* ===== KPI IMG FINAL (hard override) ===== */
.kpi-mini .mini-left{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  min-width: 0;
}

/* убираем любые "контейнеры/рамки" вокруг иконки */
.kpi-mini .mini-left > *{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.kpi-mini img,
.mini-kpi-img{
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
  object-fit: contain !important;
  display: block !important;
  flex: 0 0 28px !important;

  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
/* ===== /KPI IMG FINAL ===== */

/* ===== TILE ICONS: NO CONTAINERS ===== */
/* убираем рамку/фон вокруг иконок плиток */
.tile-ico{
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* чтобы гифки не обрезались и не "сидели" в капсуле */
.tile-ico.img{
  overflow: visible !important;
}

/* нормальный размер и без рамок у самой картинки */
.tile-img{
  width: 44px !important;
  height: 44px !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  display: block !important;
}
/* ===== /TILE ICONS: NO CONTAINERS ===== */


/* ===== BOTTOM NAV ALWAYS VISIBLE ===== */
.bottom{
  display: flex !important;
  z-index: 10000; /* выше экранов */
}
/* ===== /BOTTOM NAV ALWAYS VISIBLE ===== */

/* ===== BOTTOM NAV GIF ICONS ===== */
.bottom-gif{
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  object-fit: contain !important;
  display: block !important;

  /* никаких рамок/пленок */
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
}

.bottom .bico{ display:none !important; }
/* ===== /BOTTOM NAV GIF ICONS ===== */

/* === HIDE BOTTOM BAR DURING GLOBAL SEARCH === */
body.gsearch-open .bottom{
  display: none !important;
}


/* === GLOBAL SEARCH: FOCUS MODE (dim underlying UI slightly) === */

/* ===== GLOBAL SEARCH: HARD BLUR FALLBACK (works even if backdrop-filter unsupported) ===== */
body.gsearch-open .app > :not(#globalSearchView):not(#toast){
  filter: blur(10px) saturate(1.08);
  transform: scale(1.01);
  opacity: .92;
  pointer-events: none;            /* чтобы случайно не кликнуть по фону */
  transition: filter .16s ease, transform .16s ease, opacity .16s ease;
  will-change: filter, transform, opacity;
}

/* поиск сверху — всегда четкий и кликабельный */
body.gsearch-open #globalSearchView{
  pointer-events: auto;
}

/* лёгкая стеклянная плёнка (не тьма) */
body.gsearch-open #globalSearchView::before{
  background: rgba(255,255,255,.05) !important;
}

/* === TOP HELLO: NO CARD / NO FRAME === */

/* === TOP HELLO: NO CARD / NO FRAME === */
.topbar.top-hello,
.topbar.top-hello.glass{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* на всякий случай — если glass навешан вложенно */
.topbar.top-hello .glass{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* === TOPBAR: HIDE BACK + LEFT ALIGN GREETING === */

/* === TOPBAR: HIDE BACK + LEFT ALIGN GREETING === */
#btnBack{
  display: none !important;
}

/* теперь приветствие занимает левую часть */
.topbar.top-hello{
  justify-content: flex-start !important;
  gap: 10px !important;
}

/* центр больше не центр — выравниваем влево */
.top-hello-center{
  flex: 1 !important;
  text-align: left !important;
  align-items: flex-start !important;
}

/* аватар+текст влево */
.top-hello-row{
  justify-content: flex-start !important;
}

.top-hello-text{
  align-items: flex-start !important;
}

/* === TOP HELLO: HIDE LINE INFO === */

/* === TOP HELLO: HIDE LINE INFO === */
#lineInfo{
  display: none !important;
}

/* === FORCE SCROLL SECTION BODY (EVEN WITH FEW ITEMS) === */

/* === FORCE SCROLL SECTION BODY (EVEN WITH FEW ITEMS) === */

/* section-body ВСЕГДА скролл-контейнер */
.section-body{
  overflow-y: scroll !important;          /* не auto */
  -webkit-overflow-scrolling: touch;
  min-height: 0 !important;
}

/* виртуальный «хвост», чтобы iOS не отключал scroll при малом контенте */
.section-body::after{
  content: "";
  display: block;
  height: 40px;                           /* небольшой запас */
  pointer-events: none;
}

/* === FORCE SCROLL ALWAYS (iOS/Telegram) === */
/* === FORCE SCROLL ALWAYS (iOS/Telegram) === */

/* важно: section-view фиксирован и скрывает внешний скролл */
.section-view{
  height: var(--vvh, 100dvh) !important;
}

/* делаем скролл всегда активным */
.section-body{
  overflow-y: scroll !important;          /* не auto */
  -webkit-overflow-scrolling: touch;
  min-height: 0 !important;
  flex: 1 1 auto !important;

  /* этот padding гарантированно добавляет scrollHeight */
  padding-bottom: 80px !important;

  /* iOS иногда лучше реагирует так */
  touch-action: pan-y;
  overscroll-behavior: contain;
}

/* === NO WINDOW-IN-WINDOW (sections/overlays) === */
/* убираем “рамку” вокруг поиска/контента в разделах */
.section-search,
.section-body,
.overlay-body{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* чуть аккуратнее отступы (без большого “внутреннего окна”) */
.section-search{
  padding: 0 !important;
}
.section-body{
  padding: 0 !important;
  border-radius: 0 !important;
}

/* если вдруг где-то остался .glass на этих контейнерах — тоже гасим */
.section-search.glass,
.section-body.glass,
.overlay-body.glass{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* === KEYBOARD: HIDE BOTTOM BAR ON INPUT FOCUS === */
body.kb-open .bottom{ display: none !important; }


/* =============================
   FIX: last list item hidden under bottom bar
   ============================= */

/* Section lists (cars/drivers/parts) */
body.section-open .section-body{
  padding-bottom: calc(88px + var(--safeB)) !important; /* запас под нижнюю панель */
  scroll-padding-bottom: calc(88px + var(--safeB)) !important;
}

/* страховка: даже если padding где-то сбросят — добавим "хвост" внизу */
body.section-open .section-body::after{
  content:"";
  display:block;
  height: calc(88px + var(--safeB));
}

/* Overlays lists too (tasks/notifications/etc) */
body.tasks-open .overlay-body,
body.notif-open .overlay-body,
body.car-open .overlay-body,
body.driver-open .overlay-body,
body.part-open .overlay-body{
  padding-bottom: calc(88px + var(--safeB)) !important;
  scroll-padding-bottom: calc(88px + var(--safeB)) !important;
}


/* ===== KEYBOARD / VISUAL VIEWPORT FIX (iOS Telegram WebView) ===== */
:root{ --vvh: 100dvh; }

/* все "полноэкранные" контейнеры подстраиваем под visualViewport */
.section-view,
.overlay-view,
#globalSearchView{
  height: var(--vvh, 100dvh) !important;
}

/* когда открыт ввод (клава) — прячем нижнюю панель и убираем лишний хвост */
body.kbd-open .bottom{
  display: none !important;
}

/* убираем нижний "запас" под панель, чтобы не было пустоты над клавой */
body.kbd-open .section-body{
  padding-bottom: 16px !important;
}
body.kbd-open .overlay-body{
  padding-bottom: 16px !important;
}
/* ===== /KEYBOARD FIX ===== */


/* ===== KEYBOARD GAP KILL (no empty area above iOS keyboard) ===== */
body.kbd-open .section-view,
body.kbd-open .overlay-view{
  padding-bottom: 8px !important;   /* убираем нижний "запас" у контейнера */
}

body.kbd-open .section-body,
body.kbd-open .overlay-body{
  padding-bottom: 0px !important;   /* убираем хвост внутри списка */
}

/* если где-то добавляли "виртуальный хвост" через ::after — гасим его при клавиатуре */
body.kbd-open .section-body::after{
  height: 0px !important;
  content: "" !important;
}
/* ===== /KEYBOARD GAP KILL ===== */

/* ===== KBD SAFEAREA + VVH FINAL FIX ===== */
/* Реальная высота окна (Telegram iOS keyboard) */
:root{
  --vvh: 100dvh; /* будет перезаписано JS-ом */
}

/* Все полноэкранные вьюхи подчиняемся --vvh (а не 100vh/100dvh) */
.section-view,
.overlay-view,
#sectionView,
#tasksView,
#notifView,
#carView,
#driverView,
#partView,
#globalSearchView{
  height: var(--vvh) !important;
  max-height: var(--vvh) !important;
}

/* Когда клавиатура открыта — убираем ВСЁ, что даёт нижний зазор */
body.kbd-open{
  --safeB: 0px !important; /* вот это обычно и даёт остаточную "пустоту" */
}

body.kbd-open .section-view,
body.kbd-open .overlay-view{
  padding-bottom: 0px !important;
}

body.kbd-open .section-body,
body.kbd-open .overlay-body{
  padding-bottom: 0px !important;
}

/* если есть виртуальный хвост — гасим */
body.kbd-open .section-body::after{
  height: 0px !important;
  content: "" !important;
}
/* ===== /KBD SAFEAREA + VVH FINAL FIX ===== */


/* =========================
   GLOBAL SEARCH — CLICK/FIELD FIX (hard)
   ========================= */

/* фон НЕ должен перехватывать тапы (иначе input не фокусится) */
#globalSearchView::before{
  pointer-events: none !important;
}

/* гарантируем, что контент поиска выше фона */
#globalSearchView .gsearch-inner{
  position: relative !important;
  z-index: 1 !important;
  pointer-events: auto !important;
}

/* сама карточка и всё внутри — кликабельны */
#globalSearchView .gsearch-card{
  position: relative !important;
  z-index: 2 !important;
  pointer-events: auto !important;
}

#globalSearchView .gsearch-card *{
  pointer-events: auto !important;
}

/* input всегда сверху и кликается */
#globalSearchInput{
  position: relative !important;
  z-index: 3 !important;
  pointer-events: auto !important;
}

/* === HARD FIX: respect [hidden] attribute (prevents invisible inputs stealing taps) === */
#sectionView[hidden]{ display:none !important; }


/* === HARD FIX: when global search is closed, overlay must not intercept taps === */
body:not(.gsearch-open) #globalSearchView{
  display:none !important;
  pointer-events:none !important;
}
body.gsearch-open #globalSearchView{
  display:block;
  pointer-events:auto;
}
/* reduce "click delay" / ghost taps on mobile */
.tile, .bitem, button{ touch-action: manipulation; }



/* === clickable pill link (driver -> car) === */
.linkpill{
  appearance:none;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  padding:0;
  margin:0;
  cursor:pointer;
  text-align:left;
}
.linkpill:active{ transform: scale(0.99); }




/* ===== HOME BACKGROUND (LED) ===== */
body.home-bg::before{
  content:"";
  position: fixed;
  inset: 0;
  background:
    linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.75)),
    url("/assets/led-bg.jpg") center / cover no-repeat;
  z-index: -1;
}



/* === VIDEO BACKGROUND === */
#bgVideo{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -3;
  pointer-events: none;
  background: #000;
}



/* === VIDEO BLUR OVERLAY (light, safe) === */
body::after{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -2;            /* выше видео, ниже UI */
  pointer-events: none;

  /* лёгкая плёнка + лёгкий блюр */
  background: rgba(0,0,0,.18);
  backdrop-filter: blur(4px) saturate(1.10);
  -webkit-backdrop-filter: blur(4px) saturate(1.10);
}



/* =============================
   TASKS + NOTIFICATIONS — SAME GLASS CONTAINERS AS HOME
   ============================= */

/* Возвращаем “glass” контейнер в overlay-body (только задачи/уведомления) */
body.tasks-open #tasksView .overlay-body,
body.notif-open #notifView .overlay-body{
  background: linear-gradient(180deg, rgba(0,0,0,.34), rgba(0,0,0,.22)) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.45) !important;
  border-radius: var(--r24) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;

  /* если раньше обнуляли паддинги — возвращаем приятные */
  padding: 12px !important;
}

/* Карточки внутри — как премиум плитки */
body.tasks-open #tasksView .ios-card,
body.notif-open #notifView .ios-card{
  background: rgba(0,0,0,.30) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.25) !important;
}

/* Чуть “выше контраст”, чтобы читалось на фоне */
body.tasks-open #tasksView .ios-title,
body.notif-open #notifView .ios-title{
  color: rgba(255,255,255,.96) !important;
}
body.tasks-open #tasksView .ios-time,
body.notif-open #notifView .ios-time,
body.tasks-open #tasksView .ios-sub,
body.notif-open #notifView .ios-sub{
  color: rgba(255,255,255,.78) !important;
}



/* =============================
   ALL SECTIONS / CARDS — SAME GLASS AS HOME
   ============================= */

/* 1) Главный контейнер списка в разделах (Учет авто / Водители / Запчасти) */
body.section-open #sectionView .section-body{
  background: linear-gradient(180deg, rgba(0,0,0,.34), rgba(0,0,0,.22)) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.45) !important;
  border-radius: var(--r24) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  padding: 12px !important;
}

/* 2) Контейнеры “карточек деталей” (авто/водитель/запчасть) — они у тебя тоже overlay-body */
body.car-open #carView .overlay-body,
body.driver-open #driverView .overlay-body,
body.part-open #partView .overlay-body{
  background: linear-gradient(180deg, rgba(0,0,0,.34), rgba(0,0,0,.22)) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.45) !important;
  border-radius: var(--r24) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  padding: 12px !important;
}

/* 3) Сами элементы списков (строки авто/водителей/запчастей) — “премиум карточка” */
body.section-open #sectionView .sitem,
body.section-open #sectionView .ios-card{
  background: rgba(0,0,0,.30) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.25) !important;
}

/* 4) Карточки внутри overlay (например блоки в карточке авто/водителя) */
body.car-open #carView .ios-card,
body.driver-open #driverView .ios-card,
body.part-open #partView .ios-card{
  background: rgba(0,0,0,.30) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.25) !important;
}

/* 5) Читабельность текста */
body.section-open #sectionView .sstrong,
body.section-open #sectionView .ios-title,
body.car-open #carView .car-plate,
body.driver-open #driverView .driver-name,
body.part-open #partView .part-name{
  color: rgba(255,255,255,.96) !important;
}

body.section-open #sectionView .smuted,
body.section-open #sectionView .ios-time,
body.section-open #sectionView .ios-sub,
body.car-open #carView .car-sub,
body.driver-open #driverView .driver-sub,
body.part-open #partView .part-sub{
  color: rgba(255,255,255,.78) !important;
}



/* =============================
   MATTE GLASS — FOCUS MODE
   ============================= */

/* Общий уровень матовости (чем больше — тем менее видно фон) */
:root{
  --matte-bg-top: rgba(0,0,0,.72);
  --matte-bg-bot: rgba(0,0,0,.58);
  --matte-border: rgba(255,255,255,.14);
}

/* Главные контейнеры (домашний экран, разделы, оверлеи) */
.glass,
.section-body,
.overlay-body{
  background: linear-gradient(
    180deg,
    var(--matte-bg-top),
    var(--matte-bg-bot)
  ) !important;

  border: 1px solid var(--matte-border) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.55) !important;

  /* blur уменьшаем, чтобы не “мыло”, а мат */
  backdrop-filter: blur(10px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.05) !important;
}

/* Карточки внутри (списки, ios-card, sitem) */
.ios-card,
.sitem,
.card{
  background: rgba(0,0,0,.55) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.45) !important;
}

/* Карточки авто / водителя / запчасти */
.car-meta,
.driver-meta,
.part-meta,
.car-block{
  background: rgba(0,0,0,.50) !important;
  border-radius: var(--r20);
}

/* Сегменты, поиск, аккордеоны — тоже мат */
.seg,
.search-input,
.car-acc-btn{
  background: rgba(0,0,0,.60) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  backdrop-filter: blur(8px) !important;
}

/* Немного усилим текст для фокуса */
.title-main,
.overlay-title,
.section-title,
.car-plate,
.driver-name,
.part-name{
  color: rgba(255,255,255,.98) !important;
}

.tile-sub,
.ios-sub,
.ios-time,
.smuted,
.car-sub,
.driver-sub,
.part-sub{
  color: rgba(255,255,255,.80) !important;
}



/* =============================
   MATTE GLASS — TASKS/NOTIF/CARDS (HARD)
   ============================= */

/* Базовые переменные матовости (если ещё не заданы) */
:root{
  --matte2-top: rgba(0,0,0,.74);
  --matte2-bot: rgba(0,0,0,.60);
  --matte2-border: rgba(255,255,255,.14);
}

/* ГЛАВНОЕ: жёстко возвращаем “контейнер” в задачах/уведомлениях/карточках */
body.tasks-open #tasksView .overlay-body,
body.notif-open #notifView .overlay-body,
body.car-open #carView .overlay-body,
body.driver-open #driverView .overlay-body,
body.part-open #partView .overlay-body,
body.section-open #sectionView .section-body{
  background: linear-gradient(180deg, var(--matte2-top), var(--matte2-bot)) !important;
  border: 1px solid var(--matte2-border) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.55) !important;

  /* матовый blur (легкий) */
  backdrop-filter: blur(10px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.05) !important;
}

/* Карточки внутри этих экранов (списки/элементы) */
body.tasks-open #tasksView .ios-card,
body.notif-open #notifView .ios-card,
body.section-open #sectionView .sitem,
body.car-open #carView .ios-card,
body.driver-open #driverView .ios-card,
body.part-open #partView .ios-card,
#carView .card,
#driverView .card,
#partView .card{
  background: rgba(0,0,0,.56) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.45) !important;
}

/* Если где-то ранее было “NO WINDOW-IN-WINDOW” и всё делали прозрачным — перебиваем */
body.tasks-open #tasksView .overlay-body,
body.notif-open #notifView .overlay-body,
body.car-open #carView .overlay-body,
body.driver-open #driverView .overlay-body,
body.part-open #partView .overlay-body,
body.section-open #sectionView .section-body{
  background-clip: padding-box !important;
}

/* Немного читаемости */
body.tasks-open #tasksView .overlay-title,
body.notif-open #notifView .overlay-title,
body.section-open #sectionView .section-title{
  color: rgba(255,255,255,.98) !important;
}



/* =============================
   REMOVE OUTER CONTAINER (NO FRAME IN FRAME)
   ============================= */

/* 1️⃣ УБИРАЕМ карточный вид у контейнеров списков */
body.section-open #sectionView .section-body,
body.tasks-open #tasksView .overlay-body,
body.notif-open #notifView .overlay-body{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
}

/* 2️⃣ Оставляем матовый glass ТОЛЬКО у самих карточек */
body.section-open #sectionView .sitem,
body.tasks-open #tasksView .ios-card,
body.notif-open #notifView .ios-card,
body.car-open #carView .ios-card,
body.driver-open #driverView .ios-card,
body.part-open #partView .ios-card{
  background: rgba(0,0,0,.58) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.45) !important;
  backdrop-filter: blur(10px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.05) !important;
}

/* 3️⃣ Немного воздуха между карточками */
body.section-open #sectionView .slist,
body.tasks-open #tasksView .ios-list,
body.notif-open #notifView .ios-list{
  gap: 12px !important;
}

/* ===== FINAL CARD POLISH (matte + no sharp corners) ===== */
:root{
  --cardR: 24px;
  --cardStroke: rgba(255,255,255,.14);
  --cardBg: rgba(10,16,36,.72);      /* матовее (фон меньше просвечивает) */
  --cardBg2: rgba(10,16,36,.62);
}

/* общая “идеальная” карточка без жирных теней */
.tile,
.sitem,
.nitem,
.ios-card,
.card,
.mini,
.car-photo,
.car-badge,
.driver-badge,
.part-badge{
  border-radius: var(--cardR) !important;
  background: var(--cardBg) !important;
  border: 1px solid var(--cardStroke) !important;
  box-shadow: none !important;       /* убираем лишние тени */
}

/* если где-то есть активная “вдавленная” тень — тоже гасим */
.tile:active,
.sitem:active,
.nitem:active,
.ios-card:active{
  transform: translateY(1px) scale(.995);
  box-shadow: none !important;
}

/* контейнеры списков — без рамки “рамка в рамке” */
.section-body,
.overlay-body{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* поисковая строка и сегменты — тоже матовые и без жёсткой тени */
.search-input,
.seg{
  border-radius: var(--cardR) !important;
  background: var(--cardBg2) !important;
  border: 1px solid var(--cardStroke) !important;
  box-shadow: none !important;
}

/* на всякий: правые “плашки-статусы” без острых краёв */
.pill,
.car-acc-btn,
.bitem.active{
  border-radius: 999px !important;
  box-shadow: none !important;
}
/* ===== /FINAL CARD POLISH ===== */

/* ===== NO WRAPPER CONTAINERS (no frame-in-frame) ===== */
/* убираем “большой контейнер” вокруг списков/карточек */
.section-body,
.overlay-body,
.section-body.glass,
.overlay-body.glass{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* если где-то список завернули в “гласс” — тоже гасим */
#sectionView .glass,
#tasksView .glass,
#notifView .glass,
#carView .glass,
#driverView .glass,
#partView .glass{
  /* НЕ трогаем карточки (.tile/.ios-card/.sitem), только контейнеры */
}

/* конкретно для iOS-листов — никаких фонов у обёрток */
.ios-list{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
/* ===== /NO WRAPPER CONTAINERS ===== */

/* ===== MATTE CARDS FINAL ===== */
/* 1) Общие переменные “матовости” */
:root{
  --card-bg: rgba(0,0,0,.46);          /* матовее */
  --card-bg-2: rgba(0,0,0,.38);
  --card-stroke: rgba(255,255,255,.14);
  --card-shadow: 0 10px 26px rgba(0,0,0,.18);  /* мягче */
  --card-r: 22px;
}

/* 2) Убираем “рамку-контейнер” у списков (страховка) */
.section-body,
.overlay-body{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 3) Список: лёгкие отступы без отдельной карточки */
.ios-list{
  padding: 0 !important;
  margin: 0 !important;
  gap: 12px !important;
}

/* 4) ВСЕ карточки в задачах/уведомлениях/поиске */
.ios-card,
.nitem,
.sitem{
  border-radius: var(--card-r) !important;
  background: linear-gradient(180deg, var(--card-bg), var(--card-bg-2)) !important;
  border: 1px solid var(--card-stroke) !important;

  /* главное: убираем “жирные” тени и “острые” артефакты */
  box-shadow: var(--card-shadow) !important;
  overflow: hidden !important;
  background-clip: padding-box !important;

  backdrop-filter: blur(10px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.08) !important;
}

/* 5) Спец-стили, которые могли добавлять лишнюю “рамку” */
.sitem.car-item{
  border-radius: var(--card-r) !important;
  box-shadow: var(--card-shadow) !important;
}
.sitem.car-item:active{
  transform: translateY(1px) scale(.995);
  background: linear-gradient(180deg, rgba(0,0,0,.52), rgba(0,0,0,.40)) !important;
}

/* 6) Аккордеон-кнопки в карточках авто/водителя — тем же стилем */
.car-acc-btn{
  border-radius: var(--card-r) !important;
  background: linear-gradient(180deg, var(--card-bg), var(--card-bg-2)) !important;
  border: 1px solid var(--card-stroke) !important;
  box-shadow: var(--card-shadow) !important;
}

/* 7) Поле поиска и сегменты — без “острых” граней */
.search-input{
  border-radius: var(--card-r) !important;
  background: linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.30)) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: var(--card-shadow) !important;
}

.seg{
  border-radius: var(--card-r) !important;
  background: rgba(0,0,0,.34) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: none !important; /* сегменты без лишней рамки */
}

/* 8) Убираем слишком резкие “внутренние” бордеры у pill */
.pill, .car-badge, .tag{
  border-color: rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.06) !important;
}

/* ===== /MATTE CARDS FINAL ===== */


/* === FINAL MATTE CARDS (NO SHADOW / ROUND) === */
/* цель: в задачах/уведомлениях/разделах/карточках убрать тени и острые углы, сделать матово */

:root{
  --matte-bg: rgba(10,16,36,.62);      /* плотнее, меньше видно фон */
  --matte-bg-2: rgba(10,16,36,.52);
  --matte-stroke: rgba(255,255,255,.18);
}

/* Отключаем тени у карточек ВО ВСЕХ оверлеях/разделах */
body.section-open .sitem,
body.tasks-open .ios-card,
body.notif-open .ios-card,
body.car-open .ios-card,
body.driver-open .ios-card,
body.part-open .ios-card,
body.gsearch-open .ios-card,
body.tasks-open .nitem,
body.notif-open .nitem{
  box-shadow: none !important;
  filter: none !important;
}

/* Унифицируем радиусы + матовость */
body.section-open .sitem,
body.tasks-open .ios-card,
body.notif-open .ios-card,
body.car-open .ios-card,
body.driver-open .ios-card,
body.part-open .ios-card,
body.gsearch-open .ios-card,
body.tasks-open .nitem,
body.notif-open .nitem,
body.section-open .seg,
body.section-open .search-input,
body.tasks-open .overlay-head .icon-btn,
body.notif-open .overlay-head .icon-btn,
body.section-open .section-head .icon-btn{
  border-radius: 24px !important;
}

/* Карточки списков (учёт авто / водители / запчасти) */
body.section-open .sitem{
  background: var(--matte-bg) !important;
  border: 1px solid var(--matte-stroke) !important;
}

/* Карточки задач/уведомлений/поиска */
body.tasks-open .ios-card,
body.notif-open .ios-card,
body.gsearch-open .ios-card,
body.tasks-open .nitem,
body.notif-open .nitem{
  background: var(--matte-bg) !important;
  border: 1px solid var(--matte-stroke) !important;
}

/* Убираем “внутренние”/inset-эффекты если где-то появлялись */
body.section-open .sitem::before,
body.section-open .sitem::after,
body.tasks-open .ios-card::before,
body.tasks-open .ios-card::after,
body.notif-open .ios-card::before,
body.notif-open .ios-card::after,
body.tasks-open .nitem::before,
body.tasks-open .nitem::after,
body.notif-open .nitem::before,
body.notif-open .nitem::after{
  content: none !important;
}

/* Аккордеон-кнопки в карточке авто — тоже матовые и без теней */
.car-acc-btn{
  box-shadow: none !important;
  border-radius: 22px !important;
  background: var(--matte-bg-2) !important;
  border: 1px solid var(--matte-stroke) !important;
}

/* Фото-блоки в карточке авто — без теней и с круглыми краями */
.car-photo{
  box-shadow: none !important;
  border-radius: 22px !important;
  border: 1px solid var(--matte-stroke) !important;
}

/* На всякий: overlay-body/section-body не должны создавать ощущение “контейнера” */
.section-body,
.overlay-body{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* === /FINAL MATTE CARDS (NO SHADOW / ROUND) === */

/* === SUPER FINAL OVERRIDE (NO SHADOWS ANYWHERE) === */
/* Должно быть ПОСЛЕДНИМ в файле. Побеждает все предыдущие !important. */

body.section-open, body.tasks-open, body.notif-open, body.car-open, body.driver-open, body.part-open, body.gsearch-open{
  --card-shadow: none !important;
}

body.section-open #sectionView .sitem,
body.section-open #sectionView .sitem.car-item,
body.tasks-open #tasksView .ios-card,
body.tasks-open #tasksView .nitem,
body.notif-open #notifView .ios-card,
body.notif-open #notifView .nitem,
body.car-open #carView .ios-card,
body.driver-open #driverView .ios-card,
body.part-open #partView .ios-card,
body.gsearch-open #globalSearchView .ios-card{
  box-shadow: none !important;
  filter: none !important;
}

body.section-open #sectionView .sitem,
body.tasks-open #tasksView .ios-card,
body.notif-open #notifView .ios-card,
body.car-open #carView .ios-card,
body.driver-open #driverView .ios-card,
body.part-open #partView .ios-card,
body.gsearch-open #globalSearchView .ios-card{
  border-radius: 24px !important;
}

/* На всякий: если где-то тени навешаны на вложенные блоки */
body.section-open #sectionView .sitem * ,
body.tasks-open #tasksView .ios-card * ,
body.notif-open #notifView .ios-card * {
  box-shadow: none !important;
}

/* === /SUPER FINAL OVERRIDE (NO SHADOWS ANYWHERE) === */

/* === FILTERS: remove wrapper container === */
body.section-open #sectionView .segwrap{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 10px 0 0 !important;
}

body.section-open #sectionView .seg{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* иногда "контейнер" даёт сама секция поиска */
body.section-open #sectionView .section-search{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* но сами сегмент-кнопки оставляем как есть (если вдруг стали некрасивые) */
body.section-open #sectionView .seg-btn{
  border-radius: 16px !important;
}
/* === /FILTERS === */

/* ==== UI POLISH OVERRIDES v2 (no header shadow, no filter container) ==== */
:root{
  --card-radius: 22px;
}

/* 1) Хедеры (название раздела/оверлея) — убрать тень и “острые” углы */
.section-head,
.overlay-head{
  border-radius: 0 !important;         /* чтобы не было “подложки” со скруглением */
  box-shadow: none !important;          /* убрать верхнюю тень */
  background: rgba(0,0,0,.18) !important; /* лёгкий матовый слой без тени */
  -webkit-backdrop-filter: blur(10px) !important;
  backdrop-filter: blur(10px) !important;
}

/* Иногда тень сидит на псевдо-слоях */
.section-head::before,
.section-head::after,
.overlay-head::before,
.overlay-head::after{
  content: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* 2) Контейнер фильтров (рамка вокруг сегментов) — убрать */
#carFilters,
.segwrap{
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin-top: 10px !important;
}

/* Сам блок сегментов (если у него был glass) — делаем “без контейнера” */
.seg{
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* 3) Карточки — ровные округления, без теней/лишних слоёв */
.ios-card,
.sitem,
.nitem{
  border-radius: var(--card-radius) !important;
  box-shadow: none !important;
  outline: none !important;
}

.ios-card::before,
.ios-card::after,
.sitem::before,
.sitem::after,
.nitem::before,
.nitem::after{
  content: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* 4) На всякий — убираем любые активные “подпрыгивающие” тени */
.ios-card:active,
.sitem:active,
.nitem:active{
  box-shadow: none !important;
  transform: none !important;
}
/* ==== /UI POLISH OVERRIDES v2 ==== */

/* === FIX CLEAN HEADERS + FILTERS (NO BOXES) === */
body.section-open .section-head,
body.tasks-open   .overlay-head,
body.notif-open   .overlay-head,
body.car-open     .overlay-head,
body.driver-open  .overlay-head,
body.part-open    .overlay-head{
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
  border-radius: 0 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* если где-то рисуется "полоса" через псевдо-элементы */
body.section-open .section-head::before,
body.section-open .section-head::after,
body.tasks-open   .overlay-head::before,
body.tasks-open   .overlay-head::after,
body.notif-open   .overlay-head::before,
body.notif-open   .overlay-head::after,
body.car-open     .overlay-head::before,
body.car-open     .overlay-head::after,
body.driver-open  .overlay-head::before,
body.driver-open  .overlay-head::after,
body.part-open    .overlay-head::before,
body.part-open    .overlay-head::after{
  content: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* убираем "прямоугольник" под названием раздела */
body.section-open .section-title,
body.tasks-open   .overlay-title,
body.notif-open   .overlay-title,
body.car-open     .overlay-title,
body.driver-open  .overlay-title,
body.part-open    .overlay-title{
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* === FILTERS: убрать контейнер вокруг сегментов === */
#carFilters,
.segwrap{
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 10px 0 0 !important;  /* чуть воздуха, но без "рамки" */
}

/* сама полоска сегментов — без теней/рамок и без "капсулы" вокруг */
#carFilters .seg{
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* если у seg-btn есть тени/рамки — гасим */
#carFilters .seg-btn{
  box-shadow: none !important;
}

/* на всякий — иногда тень идёт от section-search */
.section-search{
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
/* === /FIX === */



/* ===== REMOVE FILTER CONTAINER (SEG WRAP) ===== */
.segwrap,
.seg {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* убираем псевдо-слои если есть */
.seg::before,
.seg::after {
  display: none !important;
}


/* ===== REMOVE FILTER SIDE SHADOWS (EDGE FADES) ===== */
.section-search::before,
.section-search::after,
.segwrap::before,
.segwrap::after {
  display: none !important;
  content: none !important;
  background: none !important;
  box-shadow: none !important;
}


/* FIX: section list not hidden behind bottom bar */
:root {
  /* высота нижней панели + запас под safe-area (iPhone) */
  --bottom-bar-h: 92px;
}

body.section-open #sectionView .section-body,
body.section-open #sectionView .slist {
  padding-bottom: calc(var(--bottom-bar-h) + env(safe-area-inset-bottom, 0px));
}

body.section-open #sectionView {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* /FIX */


/* FIX: seg scroll even when few items */
#carFilters .seg {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
  scrollbar-width: none;           /* Firefox */
}
#carFilters .seg::-webkit-scrollbar {
  display: none;                   /* iOS/Safari */
}
/* создаём "куда скроллить" даже когда кнопок мало */
#carFilters .seg::after {
  content: "";
  flex: 0 0 28vw;                  /* можно 20-40vw, если хочешь сильнее */
}
/* /FIX */


/* FIX: allow vertical scroll even when list is short */
#sectionView .section-body {
  overflow-y: scroll;                 /* ВАЖНО: scroll, а не auto */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  padding-bottom: calc(140px + env(safe-area-inset-bottom)); /* чтобы карточки не прятались */
}

/* добавляем "хвост", чтобы было куда тянуть даже если карточек мало */
#sectionView .section-body::after {
  content: "";
  display: block;
  height: 22vh;                       /* можно 15-30vh под вкус */
}
/* /FIX */



/* FIX: section body always scrollable (iOS/TG) */
#sectionView {
  position: fixed;
  left: 0; right: 0; top: 0; bottom: 0;
  height: var(--vvh, 100vh);
  display: flex;
  flex-direction: column;
  overflow: hidden; /* важно: скролл только внутри body */
}

#sectionView .section-head,
#sectionView .section-search {
  flex: 0 0 auto;
}

#sectionView .section-body {
  flex: 1 1 auto;
  min-height: 0;                 /* КРИТИЧНО для iOS, иначе overflow не включается */
  overflow-y: scroll !important; /* scroll, а не auto */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  padding-bottom: calc(160px + env(safe-area-inset-bottom)) !important; /* чтобы низ не прятался */
}

/* "хвост" чтобы можно было тянуть вверх/вниз даже если карточек мало */
#sectionView .section-body::after {
  content: "";
  display: block;
  height: 28vh;
}
/* /FIX */


/* FINAL OVERRIDE: section scroll ALWAYS works (iOS/TG) */
#sectionView {
  position: fixed !important;
  left: 0 !important; right: 0 !important; top: 0 !important; bottom: 0 !important;
  height: var(--vvh, 100vh) !important;
  max-height: var(--vvh, 100vh) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;          /* внешний скролл запрещён */
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
}

#sectionView .section-head,
#sectionView .section-search {
  flex: 0 0 auto !important;
}

#sectionView .section-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;             /* КРИТИЧНО для iOS */
  overflow-y: scroll !important;        /* всегда scroll */
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
  touch-action: pan-y !important;

  /* чтобы последний элемент не прятался под нижней панелью */
  padding-bottom: calc(170px + env(safe-area-inset-bottom)) !important;
}

/* чтобы можно было "играться" скроллом даже если карточек мало */
#sectionView .section-body::after {
  content: "" !important;
  display: block !important;
  height: 28vh !important;
}
/* /FINAL OVERRIDE */

/* ======================
   FINAL OVERRIDES (NO SCROLL TAIL, KEEP SCROLL)
   ====================== */
body.section-open #sectionView .section-body{
  overflow-y: scroll !important;          /* скролл всегда доступен */
  -webkit-overflow-scrolling: touch;
  padding-bottom: 12px !important;        /* НИКАКОЙ доп. пустоты снизу */
  margin-bottom: 0 !important;
  scroll-padding-bottom: 0 !important;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
}

/* УБИРАЕМ любой "хвост" через псевдоэлементы (если они где-то добавлены) */
body.section-open #sectionView .section-body::after,
#sectionView .section-body::after,
.section-body::after{
  content: none !important;
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ======================
   FINAL OVERRIDES (LIVE SCROLL WITHOUT TAIL)
   ====================== */
body.section-open #sectionView{
  height: var(--vvh, 100dvh) !important;
  max-height: var(--vvh, 100dvh) !important;
  overflow: hidden !important;
}

body.section-open #sectionView .section-body{
  flex: 1 1 auto !important;
  min-height: 0 !important;              /* критично для iOS */
  overflow-y: scroll !important;         /* всегда "скролл", даже если мало */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: auto;           /* разрешаем "пружину" */
  touch-action: pan-y;
  scrollbar-gutter: stable both-edges;
  padding-bottom: 12px !important;       /* без хвоста */
  margin-bottom: 0 !important;
}

/* УБИРАЕМ любой хвост/пустоту через псевдоэлементы */
body.section-open #sectionView .section-body::after,
#sectionView .section-body::after,
.section-body::after{
  content: none !important;
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}


/* ======================
   LIVE SCROLL (FORCE 1-2px OVERFLOW, NO VISIBLE TAIL)
   ====================== */

/* scroll-container */
body.section-open #sectionView .section-body{
  display: block !important;             /* важно: не flex */
  min-height: 0 !important;
  overflow-y: scroll !important;         /* всегда scroll */
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: auto;
  touch-action: pan-y;
}

/* создаём микро-overflow, чтобы скролл был "живой" даже при малом контенте */
body.section-open #sectionView .section-body > .slist{
  min-height: calc(100% + 2px) !important;  /* вот это даёт реальный scroll */
}

/* страховка: никаких "хвостов" через ::after */
body.section-open #sectionView .section-body::after,
body.section-open #sectionView .section-body > .slist::after{
  content: none !important;
  display: none !important;
  height: 0 !important;
}
/* =========================================================
   CLEAN PATCH (2026-01-31 12:14:26)
   Fix: Global Search overlay (click/focus/visibility)
   ========================================================= */

/* 1) Когда поиск ЗАКРЫТ — его вообще нет, чтобы не крал клики */
body:not(.gsearch-open) #globalSearchView {
  display: none !important;
  pointer-events: none !important;
  opacity: 0 !important;
  transform: translateY(10px) !important;
}

/* 2) Когда поиск ОТКРЫТ — показываем как обычный overlay-view */
body.gsearch-open #globalSearchView {
  display: flex !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
  z-index: 9999 !important;
}

/* 3) Стеклянная вуаль над фоном, но НЕ перехватывает тапы */
body.gsearch-open #globalSearchView::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,.28) !important;
  backdrop-filter: blur(16px) saturate(1.15) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.15) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* 4) Внутренности поиска всегда выше вуали и кликабельны */
body.gsearch-open #globalSearchView .overlay-head,
body.gsearch-open #globalSearchView .overlay-body {
  position: relative !important;
  z-index: 1 !important;
  pointer-events: auto !important;
}

/* 5) Поле ввода — гарантированно кликается/фокусится */
body.gsearch-open #globalSearchInput {
  position: relative !important;
  z-index: 2 !important;
  pointer-events: auto !important;
  -webkit-user-select: text !important;
  user-select: text !important;
}

/* 6) На время поиска — фон слегка блюрим, но без “мертвых” кликов */
body.gsearch-open .app > :not(#globalSearchView):not(#toast) {
  filter: blur(10px) saturate(1.06) !important;
  opacity: .92 !important;
  pointer-events: none !important;
}

/* 7) Нижнюю панель скрываем, чтобы не мешала */
body.gsearch-open .bottom {
  display: none !important;
}

/* 8) Если вдруг hidden атрибут где-то стоит — он должен работать */
#globalSearchView[hidden] {
  display: none !important;
}

/* ========================================================= */


/* ======================
   PHOTO CONTROL
   ====================== */
.pc-wrap { padding-bottom: 24px; }
.pc-select{
  width: 100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.72);
  outline: none;
}

.pc-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}

.pc-col{
  border-radius: 18px;
  padding: 12px;
  background: rgba(255,255,255,.58);
  border: 1px solid rgba(0,0,0,.10);
  backdrop-filter: blur(10px);
}

.pc-label{
  font-size: 13px;
  opacity: .85;
  margin-bottom: 8px;
}

.pc-box{
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  height: 120px;
  background: rgba(0,0,0,.04);
  display:flex;
  align-items:center;
  justify-content:center;
}

.pc-preview{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pc-empty{
  font-size: 12px;
  opacity: .55;
}

.pc-file{ display:none; }

.pc-btn{
  width: 100%;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.72);
}

.pc-send{
  width: 100%;
  margin-top: 14px;
  padding: 14px 14px;
  border-radius: 16px;
  border: 0;
  background: rgba(0,0,0,.86);
  color: #fff;
}

.pc-send:disabled{
  opacity: .5;
}
/* ======================
   /PHOTO CONTROL
   ====================== */


/* === ACC SPACING (car card accordions) === */
#carView .acc{ margin-bottom: 12px; }
#carView .acc:last-child{ margin-bottom: 0; }
/* === /ACC SPACING (car card accordions) === */


/* === PATCH: HIDE BOTTOM BAR IN CARDS/OVERLAYS (auto) === */
/* ВАЖНО: у тебя раньше был блок "BOTTOM NAV ALWAYS VISIBLE" (.bottom{display:flex !important}).
   Поэтому используем БОЛЕЕ специфичные селекторы body.<mode> .bottom и !important. */

body.section-open .bottom,
body.tasks-open .bottom,
body.notif-open .bottom,
body.car-open .bottom,
body.driver-open .bottom,
body.part-open .bottom,
body.dtp-open .bottom,
body.gsearch-open .bottom,
body.kb-open .bottom,
body.kbd-open .bottom {
  display: none !important;
  pointer-events: none !important;
}

/* На главной — возвращаем */
body:not(.section-open):not(.tasks-open):not(.notif-open):not(.car-open):not(.driver-open):not(.part-open):not(.dtp-open):not(.gsearch-open) .bottom {
  display: flex !important;
  pointer-events: auto !important;
}

/* === DTP VIEW (у тебя есть dtpView в HTML, добавляем режим отображения) === */
body.dtp-open #dtpView {
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}
body.dtp-open .app > :not(#dtpView):not(#toast):not(.bottom) {
  display: none !important;
}
/* === /PATCH === */


/* === FORCE bottom bar visible (home/tasks/notifications only) === */
body.bottom-force nav.bottom{
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
  transform: translateX(-50%) translateY(0) !important;
  bottom: env(safe-area-inset-bottom, 0px) !important;
}
/* === /FORCE bottom bar visible === */



/* === PHOTO CONTROL: INPUT + LIST (unified) === */
.pc-carbox{ display:flex; flex-direction:column; gap:10px; }
.pc-input{ width:100%; border-radius:16px; padding:12px 12px; }

.pc-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height:240px;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}

.pc-item{
  padding:12px 12px;
  border-radius:16px;
  background: rgba(0,0,0,.46);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
  font-weight:800;
  cursor:pointer;
  user-select:none;
}
.pc-item.muted{ opacity:.65; cursor:default; }
.pc-item.active{
  background: rgba(106,142,255,.22);
  border-color: rgba(106,142,255,.35);
}
.pc-hint{ font-size:12px; opacity:.78; margin-top:2px; }
/* === /PHOTO CONTROL: INPUT + LIST (unified) === */

/* === FLAT HEADER (no frame-in-frame) === */
   Убираем эффект "карта внутри карты" в шапке карточек авто/водителя.
   Идея: первый верхний блок/карта в оверлеях становится плоским: без тени/бордера/второго стекла.
*/
body.car-open #carView .ios-card:first-of-type,
body.driver-open #driverView .ios-card:first-of-type,
body.car-open .car-view .ios-card:first-of-type,
body.driver-open .driver-view .ios-card:first-of-type,
body.car-open #carView .card:first-of-type,
body.driver-open #driverView .card:first-of-type {
  box-shadow: none !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* На всякий случай: любые явные "header/top/hero" контейнеры в оверлеях тоже делаем плоскими */
body.car-open #carView .car-header,
body.car-open #carView .car-hero,
body.car-open #carView .car-top,
body.driver-open #driverView .driver-header,
body.driver-open #driverView .driver-hero,
body.driver-open #driverView .driver-top {
  box-shadow: none !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}


/* === FLAT HEADER (auto-detected from index.html) === */
   Убираем "рамка в рамке" в шапке карточек авто/водителя.
   Селекторы собраны автоматически по контейнерам вокруг #carPlate/#driverName.
*/
body.carView-open #carView .overlay-head,
body.carView-open #carView .overlay-head:first-child,
body.carView-open #carView > div:first-of-type,
body.driverView-open #driverView .overlay-head,
body.driverView-open #driverView .overlay-head:first-child,
body.driverView-open #driverView > div:first-of-type {
  box-shadow: none !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body.carView-open #carView .overlay-title,
body.driverView-open #driverView .overlay-title {
  text-shadow: none !important;
}

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

/* === FLAT OVERLAY META (car/driver) === */
/* Убираем "рамка в рамке" в шапке карточек авто/водителя (и ДТП, если нужно) */
body.car-open #carView .overlay-head,
body.driver-open #driverView .overlay-head,
body.dtp-open #dtpView .overlay-head {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body.car-open #carView .car-meta,
body.driver-open #driverView .driver-meta,
body.dtp-open #dtpView .car-meta {
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body.car-open #carView .car-meta::before,
body.car-open #carView .car-meta::after,
body.driver-open #driverView .driver-meta::before,
body.driver-open #driverView .driver-meta::after,
body.dtp-open #dtpView .car-meta::before,
body.dtp-open #dtpView .car-meta::after {
  content: none !important;
  display: none !important;
}
/* === /FLAT OVERLAY META === */

/* === FLAT CAR BLOCKS (photos/history/pc) === */
/* Убираем рамки/тени контейнеров в карточке авто:
   - вокруг фото
   - вокруг истории водителей
   - вокруг фотоконтроля
   При этом сами кнопки аккордеонов (car-acc-btn) не трогаем.
*/
body.car-open #carView .car-block,
body.car-open #carView .acc,
body.car-open #carView .car-photos {
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body.car-open #carView .car-block::before,
body.car-open #carView .car-block::after,
body.car-open #carView .acc::before,
body.car-open #carView .acc::after,
body.car-open #carView .car-photos::before,
body.car-open #carView .car-photos::after {
  content: none !important;
  display: none !important;
}
/* === /FLAT CAR BLOCKS === */


/* FIX: GLOBAL SEARCH TITLE FLAT */
#globalSearchView .overlay-head,
#globalSearchView .overlay-title {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* если “рамка” рисуется псевдоэлементом */
#globalSearchView .overlay-title::before,
#globalSearchView .overlay-title::after {
  content: none !important;
  display: none !important;
}


/* =============================
   ACCOUNT VIEW (My Cabinet)
   ============================= */
body.account-open #accountView{
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}
body.account-open .app > :not(#accountView):not(#toast):not(.bottom){
  display: none !important;
}
body.account-open .bottom{ display:none !important; pointer-events:none !important; }

#accountView .acc-hero-row{ display:flex; gap:12px; align-items:center; }
#accountView .acc-hero-text{ min-width:0; flex:1; }
#accountView .acc-actions{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }

#accountView .acc-btn{
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  border-radius: 18px;
  padding: 12px 12px;
  font-weight: 1000;
  cursor: pointer;
}
#accountView .acc-btn:active{ transform: translateY(1px) scale(.995); }

#accountView .acc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px; }
#accountView .acc-kv{
  display:flex; flex-direction:column; gap:4px;
  padding:10px 12px; border-radius:18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
}
#accountView .acc-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; }
#accountView .acc-list{ display:flex; flex-direction:column; gap:10px; margin-top:10px; }
#accountView .acc-note{ margin-top:10px; opacity:.85; }

#accountView .acc-avatar{ width:46px; height:46px; border-radius:16px; flex:0 0 46px; }


/* =============================
   ACCOUNT SHEET + MODE (presentation)
   ============================= */
#accountView .acc-mode{ margin-top: 10px; }
#accountView .acc-mode .seg{ padding: 6px; background: rgba(0,0,0,.28); border-radius: 18px; }
#accountView .acc-mode .seg-btn{ padding: 10px 12px; }

/* Action sheet */
#accountView .acc-sheet{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 14px 14px calc(14px + env(safe-area-inset-bottom,0px));
  background: rgba(0,0,0,.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
#accountView .acc-sheet-card{
  width: min(480px, 100%);
  border-radius: 22px;
  padding: 12px;
}
#accountView .acc-sheet-btn,
#accountView .acc-sheet-cancel{
  width: 100%;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  border-radius: 18px;
  padding: 14px 14px;
  font-weight: 1000;
  cursor: pointer;
  margin-top: 10px;
}
#accountView .acc-sheet-btn.danger{
  background: rgba(255,84,84,.14);
  border-color: rgba(255,84,84,.24);
}
#accountView .acc-sheet-cancel{
  background: rgba(255,255,255,.10);
}

/* Live mode: make it look “real” */
body.acc-live #accountView .tag.warning{ background: rgba(88,255,205,.18) !important; border-color: rgba(88,255,205,.28) !important; }
body.acc-live #accountView .acc-note{ opacity: .95; }

/* === ICON: USER (for Account tile) === */
.ico.user{
  background: linear-gradient(180deg, rgba(160,180,255,.70), rgba(106,142,255,.25));
  position: relative;
}
.ico.user::before{
  content:"";
  position:absolute;
  left:50%; top:36%;
  width: 12px; height: 12px;
  transform: translate(-50%,-50%);
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  opacity:.9;
}
.ico.user::after{
  content:"";
  position:absolute;
  left:50%; top:72%;
  width: 18px; height: 10px;
  transform: translate(-50%,-50%);
  border-radius: 999px 999px 14px 14px;
  background: rgba(255,255,255,.55);
  opacity:.85;
}
/* === /ICON: USER === */


/* === PATCH: ACCOUNT VIEW BOTTOM BAR + PADDING === */
/* 1) В 'Мой кабинет' нижняя панель должна быть недоступна/скрыта */
body.account-open .bottom{
  display: none !important;
  pointer-events: none !important;
}

/* 2) Страховка: контент 'Мой кабинет' не прячется снизу */
#accountView .overlay-body{
  padding-bottom: calc(88px + var(--safeB)) !important;
  scroll-padding-bottom: calc(88px + var(--safeB)) !important;
}
/* === /PATCH: ACCOUNT VIEW BOTTOM BAR + PADDING === */

/* === ACCOUNT SAFE BOTTOM (auto) === */
:root {
  --bottombar-h: 96px; /* высота нижней панели + запас */
}

#accountView .overlay-body,
#accountView .overlay-content,
#accountView .overlay-inner,
#accountView .acc-content,
#accountView .acc-wrap,
#accountView .sheet-body {
  padding-bottom: calc(var(--bottombar-h) + env(safe-area-inset-bottom, 0px)) !important;
  scroll-padding-bottom: calc(var(--bottombar-h) + env(safe-area-inset-bottom, 0px)) !important;
}
/* === /ACCOUNT SAFE BOTTOM (auto) === */