:root{
  --spa-bg-1:#061019;
  --spa-bg-2:#0b1622;
  --spa-bg-3:#102131;
  --spa-card:#132334ee;
  --spa-card-2:#182b3dee;
  --spa-card-3:#0f1c2bee;
  --spa-line:rgba(164,214,255,.10);
  --spa-line-2:rgba(255,255,255,.05);
  --spa-text:#eef6ff;
  --spa-muted:#9db0c4;
  --spa-accent:#9ad8ff;
  --spa-accent-2:#6ec2ff;
  --spa-accent-3:#d7f2ff;
  --spa-glow:rgba(116,196,255,.24);
  --spa-shadow:0 24px 60px rgba(0,0,0,.34);
  --spa-soft:0 14px 30px rgba(0,0,0,.20);
  --spa-radius:28px;
  --spa-radius-md:22px;
  --spa-radius-sm:18px;
  --spa-btn-h:52px;
  --spa-control-h:56px;
  --spa-container:1400px;
}

*{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
html,body{
  margin:0!important;
  padding:0!important;
  max-width:100%;
  overflow-x:hidden!important;
  background:
    radial-gradient(1200px 640px at 8% 0%, rgba(118,188,255,.08), transparent 52%),
    radial-gradient(900px 560px at 100% 0%, rgba(175,221,255,.05), transparent 42%),
    linear-gradient(180deg,var(--spa-bg-3) 0%,var(--spa-bg-2) 44%,var(--spa-bg-1) 100%)!important;
  color:var(--spa-text)!important;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif!important;
}
body{
  animation:spaPageIn .24s ease-out;
}
@keyframes spaPageIn{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:none}
}

img,svg,canvas,video{ max-width:100%; height:auto; }
table{ width:100%; border-collapse:collapse; }

h1,h2,h3,h4,h5,h6{
  color:var(--spa-text)!important;
  letter-spacing:-.03em;
  line-height:1.05;
  margin-top:0;
}
p,small,label,td,th,span,div{ color:inherit; }

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(113,184,255,.018) 1px, transparent 1px),
    linear-gradient(180deg, rgba(113,184,255,.014) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,0));
}

a{ color:inherit; text-decoration:none; }

button,.btn,.btnx,a.btn,a.btnx,input[type="submit"]{
  appearance:none;
  border:none!important;
  outline:none;
  min-height:var(--spa-btn-h);
  border-radius:18px!important;
  color:#f6fbff!important;
  font-weight:700!important;
  letter-spacing:-.01em;
  background:linear-gradient(135deg,#a8c9e5 0%,#93b8da 40%,#b5d7f0 100%)!important;
  box-shadow:
    0 14px 28px rgba(77,121,164,.22),
    inset 0 1px 0 rgba(255,255,255,.28)!important;
  transition:transform .16s ease,filter .16s ease,box-shadow .16s ease,opacity .16s ease!important;
}
button:hover,.btn:hover,.btnx:hover,a.btn:hover,a.btnx:hover,input[type="submit"]:hover{
  transform:translateY(-1px);
  filter:brightness(1.03);
}
button:active,.btn:active,.btnx:active,a.btn:active,a.btnx:active,input[type="submit"]:active{
  transform:scale(.985);
}
button.secondary,.btn.secondary,.btn.ghost,.btnx.ghost{
  background:linear-gradient(180deg, rgba(37,53,72,.92), rgba(26,39,56,.96))!important;
  color:var(--spa-text)!important;
  border:1px solid var(--spa-line)!important;
  box-shadow:var(--spa-soft)!important;
}

.card,.panel,.widget,.section,.box,.block,.cardx,.panelx,.wrap,.module,
.main-card,.glass,.panel-card,.tile,.tilex,.content-card,.content-box{
  background:linear-gradient(180deg, rgba(20,34,50,.93), rgba(14,25,38,.95))!important;
  border:1px solid var(--spa-line)!important;
  border-radius:var(--spa-radius)!important;
  box-shadow:var(--spa-soft)!important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

input,select,textarea{
  width:100%;
  max-width:100%;
  color:var(--spa-text)!important;
  background:linear-gradient(180deg, rgba(24,37,52,.92), rgba(17,28,40,.96))!important;
  border:1px solid rgba(167,214,255,.10)!important;
  border-radius:16px!important;
  padding:12px 14px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important;
}
input::placeholder,textarea::placeholder{ color:#89a0b6!important; }

.badge,.chip,.pill,.tag,#authPill,#mqttPill,#t1wPill{
  border-radius:999px!important;
  border:1px solid rgba(167,214,255,.14)!important;
  background:rgba(24,36,52,.74)!important;
  color:var(--spa-text)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important;
}

/* ===== top area / navigation ===== */
header,nav,.topbar,.top-nav,.navbar,#topbar,#topActions,.actions,.topbar-actions{
  max-width:100%;
}
#topActions,.actions,.topbar-actions{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:10px!important;
  align-items:center!important;
}
header,nav,.topbar,.navbar{
  border-radius:24px!important;
  background:linear-gradient(180deg, rgba(15,26,38,.90), rgba(11,21,31,.94))!important;
  border:1px solid var(--spa-line)!important;
  box-shadow:var(--spa-soft)!important;
}

/* ===== generic two-column pages ===== */
.main,.container,.page,.content,.layout,.app,.dashboard,.shell{
  width:min(100% - 32px, var(--spa-container))!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* ===== control page premium layout ===== */
#apBadgeFx{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:9999;
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 18px;
  border-radius:999px;
  background:linear-gradient(135deg, rgba(74,126,174,.92), rgba(100,176,218,.88), rgba(170,219,242,.90));
  color:#f3fbff;
  font-weight:800;
  border:1px solid rgba(210,236,255,.22);
  box-shadow:0 16px 40px rgba(39,88,132,.26), inset 0 1px 0 rgba(255,255,255,.20);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  user-select:none;
  pointer-events:none;
  animation:spaFloat 3.2s ease-in-out infinite;
}
#apBadgeFx .ap-dot{
  width:12px;height:12px;border-radius:50%;
  background:#e6f8ff;
  box-shadow:0 0 0 0 rgba(191,235,255,.5),0 0 14px rgba(191,235,255,.7);
  animation:spaPulse 1.9s infinite;
}
#apBadgeFx .ap-rings{ position:relative; width:15px; height:15px; }
#apBadgeFx .ap-rings::before,#apBadgeFx .ap-rings::after{
  content:""; position:absolute; inset:-3px; border-radius:50%;
  border:1px solid rgba(226,246,255,.5); animation:spaRing 2.2s infinite;
}
#apBadgeFx .ap-rings::after{ animation-delay:1.1s; }
@keyframes spaPulse{
  0%{ box-shadow:0 0 0 0 rgba(191,235,255,.55),0 0 14px rgba(191,235,255,.70)}
  70%{ box-shadow:0 0 0 10px rgba(191,235,255,0),0 0 20px rgba(191,235,255,.25)}
  100%{ box-shadow:0 0 0 0 rgba(191,235,255,0),0 0 14px rgba(191,235,255,.25)}
}
@keyframes spaRing{
  0%{ transform:scale(.7); opacity:0 }
  30%{ opacity:.8 }
  100%{ transform:scale(1.6); opacity:0 }
}
@keyframes spaFloat{
  0%,100%{ transform:translateY(0) }
  50%{ transform:translateY(-4px) }
}

#ventFan.spinning{
  animation:spaFan .9s linear infinite!important;
  filter:drop-shadow(0 0 10px rgba(122,195,255,.45));
}
@keyframes spaFan{ from{transform:rotate(0deg)} to{transform:rotate(360deg)} }

/* ===== premium relay buttons ===== */
.toggle,.switch,.switcher,[role="switch"],
#tgSauna,#tgMain,#tgExtra,#tgClean,#tgVent,#tgDim{
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:112px!important;
  min-width:112px!important;
  max-width:112px!important;
  height:56px!important;
  min-height:56px!important;
  flex:0 0 112px!important;
  border-radius:20px!important;
  border:1px solid rgba(167,214,255,.16)!important;
  background:linear-gradient(180deg, rgba(42,60,82,.94), rgba(22,35,50,.98))!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -10px 18px rgba(0,0,0,.22),
    0 10px 20px rgba(0,0,0,.18)!important;
  overflow:hidden!important;
  transition:all .22s cubic-bezier(.22,1,.36,1)!important;
  font-size:0!important;
}

/* remove old inner knob/icons from markup */
#tgSauna > *,#tgMain > *,#tgExtra > *,#tgClean > *,#tgVent > *,#tgDim > *,
.toggle > *,.switch > *,.switcher > *{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  width:0!important;
  min-width:0!important;
  max-width:0!important;
  height:0!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
}

/* label */
.toggle::before,.switch::before,.switcher::before,[role="switch"]::before,
#tgSauna::before,#tgMain::before,#tgExtra::before,#tgClean::before,#tgVent::before,#tgDim::before{
  content:"ВЫКЛ";
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:800;
  letter-spacing:.08em;
  color:#dce9f6;
  text-transform:uppercase;
  z-index:2;
}

/* glass overlay */
.toggle::after,.switch::after,.switcher::after,[role="switch"]::after,
#tgSauna::after,#tgMain::after,#tgExtra::after,#tgClean::after,#tgVent::after,#tgDim::after{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 34%),
    radial-gradient(circle at 24% 18%, rgba(255,255,255,.08), transparent 26%);
  pointer-events:none;
}

.toggle:hover,.switch:hover,.switcher:hover,[role="switch"]:hover,
#tgSauna:hover,#tgMain:hover,#tgExtra:hover,#tgClean:hover,#tgVent:hover,#tgDim:hover{
  transform:translateY(-1px);
  border-color:rgba(188,228,255,.24)!important;
}

.toggle.on,.switch.on,.switcher.on,[role="switch"][aria-pressed="true"],
#tgSauna.on,#tgMain.on,#tgExtra.on,#tgClean.on,#tgVent.on,#tgDim.on{
  border-color:rgba(197,235,255,.42)!important;
  background:linear-gradient(135deg,#63b5ff 0%,#8dd6ff 52%,#bfeaff 100%)!important;
  box-shadow:
    inset 0 2px 14px rgba(255,255,255,.18),
    inset 0 -6px 12px rgba(65,130,192,.22),
    0 12px 28px rgba(76,158,238,.28),
    0 0 24px rgba(141,214,255,.18)!important;
}
.toggle.on::before,.switch.on::before,.switcher.on::before,[role="switch"][aria-pressed="true"]::before,
#tgSauna.on::before,#tgMain.on::before,#tgExtra.on::before,#tgClean.on::before,#tgVent.on::before,#tgDim.on::before{
  content:"ВКЛ";
  color:#fff;
  text-shadow:0 1px 10px rgba(255,255,255,.22);
}
.toggle.on::after,.switch.on::after,.switcher.on::after,[role="switch"][aria-pressed="true"]::after,
#tgSauna.on::after,#tgMain.on::after,#tgExtra.on::after,#tgClean.on::after,#tgVent.on::after,#tgDim.on::after{
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 34%),
    radial-gradient(circle at 24% 18%, rgba(255,255,255,.18), transparent 26%);
}

/* status/message blocks */
.msg,.msgx,#msgLights,#msgSauna,#msgDim,#msgTank,#msgTemp{
  min-height:24px!important;
  font-size:14px!important;
  color:var(--spa-muted)!important;
}

/* nicer cards on landing, profile, booking, admin */
table th,table td{
  padding:12px 10px!important;
  border-bottom:1px solid rgba(167,214,255,.08)!important;
}
table thead th{
  color:#dcefff!important;
  background:rgba(255,255,255,.02)!important;
}

/* ===== responsive ===== */
@media (max-width: 1200px){
  .main,.container,.page,.content,.layout,.app,.dashboard,.shell{
    width:min(100% - 24px, 100%)!important;
  }
}

@media (max-width: 980px){
  #topActions,.actions,.topbar-actions{
    justify-content:flex-start!important;
  }

  /* all big two-column layouts become one column */
  .grid,.dashboard-grid,.cards-grid,.main-grid,.content-grid{
    grid-template-columns:1fr!important;
  }

  /* control page side by side blocks */
  .row,.panes,.columns,.two-col,.split{
    flex-direction:column!important;
  }

  /* allow buttons to wrap */
  button,.btn,.btnx,a.btn,a.btnx{
    white-space:normal!important;
  }
}

@media (max-width: 768px){
  html,body{
    overflow-x:hidden!important;
  }

  .main,.container,.page,.content,.layout,.app,.dashboard,.shell{
    width:calc(100% - 18px)!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  h1{ font-size:42px!important; line-height:1.02!important; }
  h2{ font-size:30px!important; }
  h3{ font-size:24px!important; }
  p,small,span,div,label,td,th{ font-size:inherit; }

  header,nav,.topbar,.navbar{
    border-radius:20px!important;
    padding:14px!important;
  }

  #topActions,.actions,.topbar-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
    width:100%!important;
  }
  #topActions > *, .actions > *, .topbar-actions > *{
    width:100%!important;
    min-width:0!important;
  }

  button,.btn,.btnx,a.btn,a.btnx,input[type="submit"]{
    min-height:48px!important;
    padding:12px 14px!important;
    border-radius:16px!important;
    font-size:15px!important;
  }

  .card,.panel,.widget,.section,.box,.block,.cardx,.panelx,.wrap,.module,
  .main-card,.glass,.panel-card,.tile,.tilex,.content-card,.content-box{
    border-radius:22px!important;
  }

  /* control buttons smaller on mobile but keep style */
  .toggle,.switch,.switcher,[role="switch"],
  #tgSauna,#tgMain,#tgExtra,#tgClean,#tgVent,#tgDim{
    width:88px!important;
    min-width:88px!important;
    max-width:88px!important;
    height:48px!important;
    min-height:48px!important;
    flex:0 0 88px!important;
    border-radius:16px!important;
  }
  .toggle::before,.switch::before,.switcher::before,[role="switch"]::before,
  #tgSauna::before,#tgMain::before,#tgExtra::before,#tgClean::before,#tgVent::before,#tgDim::before{
    font-size:11px!important;
    letter-spacing:.06em!important;
  }

  /* floating access badge */
  #apBadgeFx{
    right:12px!important;
    left:auto!important;
    bottom:12px!important;
    padding:10px 14px!important;
    font-size:14px!important;
    gap:8px!important;
    max-width:calc(100vw - 24px)!important;
  }

  /* theme button smaller */
  #btnTheme,.theme-btn{
    min-height:44px!important;
    padding:10px 14px!important;
  }

  /* tables scroll safely */
  .table-wrap, .table-responsive, .overflow-x{
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch;
  }

  /* booking/profile/admin forms */
  form,.form,.form-grid,.inputs,.controls{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
  }
}

@media (max-width: 560px){
  body{
    font-size:15px!important;
  }

  h1{ font-size:30px!important; }
  h2{ font-size:24px!important; }
  h3{ font-size:20px!important; }

  .main,.container,.page,.content,.layout,.app,.dashboard,.shell{
    width:calc(100% - 12px)!important;
  }

  header,nav,.topbar,.navbar{
    padding:10px!important;
    border-radius:18px!important;
  }

  #topActions,.actions,.topbar-actions{
    grid-template-columns:1fr!important;
    gap:8px!important;
  }

  .card,.panel,.widget,.section,.box,.block,.cardx,.panelx,.wrap,.module,
  .main-card,.glass,.panel-card,.tile,.tilex,.content-card,.content-box{
    border-radius:18px!important;
    padding-left:12px!important;
    padding-right:12px!important;
  }

  button,.btn,.btnx,a.btn,a.btnx,input[type="submit"]{
    min-height:46px!important;
    font-size:14px!important;
  }

  .toggle,.switch,.switcher,[role="switch"],
  #tgSauna,#tgMain,#tgExtra,#tgClean,#tgVent,#tgDim{
    width:82px!important;
    min-width:82px!important;
    max-width:82px!important;
    height:44px!important;
    min-height:44px!important;
    flex:0 0 82px!important;
  }

  #apBadgeFx{
    font-size:13px!important;
    padding:9px 12px!important;
    bottom:72px!important; /* above mobile browser bar */
    right:10px!important;
  }

  /* prevent overlays from covering content */
  #btnRefreshAll,#btnTempRefresh,.floating-btn,.fab{
    position:static!important;
  }
}

/* ===== FIX STICKY TOP BAR / MOBILE HEADER ===== */
html,body{
  overflow-x:hidden !important;
}

header, nav, .topbar, .navbar, #topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 3000 !important;
  width: min(100% - 20px, var(--spa-container)) !important;
  margin: 10px auto 14px auto !important;
  padding: 14px 16px !important;
  border-radius: 24px !important;
  background: linear-gradient(180deg, rgba(12,22,33,.92), rgba(10,18,28,.97)) !important;
  border: 1px solid rgba(166,214,255,.10) !important;
  box-shadow:
    0 14px 34px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.04) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

/* убираем лишнюю громоздкость */
header::before, nav::before, .topbar::before, .navbar::before, #topbar::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0) 42%);
}

header > *, nav > *, .topbar > *, .navbar > *, #topbar > * {
  position: relative;
  z-index: 1;
}

/* верхние действия */
#topActions, .actions, .topbar-actions{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:10px !important;
}

#topActions > *, .actions > *, .topbar-actions > *{
  margin:0 !important;
}

/* логотип / название */
.brand, .logo, .site-logo, .site-brand{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
}

/* кнопки в шапке компактнее */
header .btn, nav .btn, .topbar .btn, .navbar .btn, #topbar .btn,
header button, nav button, .topbar button, .navbar button, #topbar button,
#topActions .btn, .actions .btn, .topbar-actions .btn {
  min-height: 44px !important;
  padding: 10px 16px !important;
  border-radius: 16px !important;
  font-size: 15px !important;
  line-height: 1 !important;
}

/* инфо-плашки в шапке */
#topActions .pill, #topActions .badge, #topActions .chip,
.actions .pill, .actions .badge, .actions .chip,
.topbar-actions .pill, .topbar-actions .badge, .topbar-actions .chip{
  min-height: 44px !important;
  padding: 0 14px !important;
  display:inline-flex !important;
  align-items:center !important;
  border-radius: 16px !important;
}

/* чтобы контент не прятался под sticky header */
main, .main, .container, .page, .content, .layout, .app, .dashboard, .shell{
  scroll-margin-top: 110px !important;
}

/* мобильная версия */
@media (max-width: 768px){
  header, nav, .topbar, .navbar, #topbar{
    top: 8px !important;
    width: calc(100% - 12px) !important;
    margin: 8px auto 12px auto !important;
    padding: 12px !important;
    border-radius: 20px !important;
  }

  #topActions, .actions, .topbar-actions{
    display:grid !important;
    grid-template-columns: 1fr !important;
    justify-content:stretch !important;
    gap:8px !important;
    margin-top:10px !important;
  }

  #topActions > *, .actions > *, .topbar-actions > *{
    width:100% !important;
  }

  header .btn, nav .btn, .topbar .btn, .navbar .btn, #topbar .btn,
  header button, nav button, .topbar button, .navbar button, #topbar button{
    min-height: 42px !important;
    padding: 10px 14px !important;
    border-radius: 14px !important;
    font-size: 14px !important;
  }

  .brand, .logo, .site-logo, .site-brand{
    align-items:flex-start !important;
  }
}

/* очень маленькие экраны */
@media (max-width: 480px){
  header, nav, .topbar, .navbar, #topbar{
    padding: 10px !important;
    border-radius: 18px !important;
  }

  header .btn, nav .btn, .topbar .btn, .navbar .btn, #topbar .btn,
  header button, nav button, .topbar button, .navbar button, #topbar button{
    font-size: 13px !important;
    min-height: 40px !important;
  }
}


/* ===== PREMIUM FIXED HEADER ===== */
:root{
  --fixed-topbar-h: 108px;
  --fixed-topbar-h-mobile: 168px;
}

/* убираем любые старые варианты прилипания */
header, nav, .topbar, .navbar, #topbar{
  position: fixed !important;
  top: 12px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 9999 !important;
  width: min(calc(100% - 24px), 1320px) !important;
  margin: 0 !important;
  padding: 14px 18px !important;
  border-radius: 26px !important;
  background:
    linear-gradient(180deg, rgba(14,24,36,.94), rgba(10,18,29,.98)) !important;
  border: 1px solid rgba(170,220,255,.12) !important;
  box-shadow:
    0 18px 44px rgba(0,0,0,.34),
    0 4px 20px rgba(90,170,255,.10),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
  backdrop-filter: blur(18px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(135%) !important;
  overflow: visible !important;
}

header::before, nav::before, .topbar::before, .navbar::before, #topbar::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:
    radial-gradient(circle at 15% 20%, rgba(108,185,255,.10), transparent 32%),
    radial-gradient(circle at 85% 15%, rgba(214,240,255,.07), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 42%);
}

/* чтобы контент не прятался под fixed header */
body{
  padding-top: calc(var(--fixed-topbar-h) + 28px) !important;
  overflow-x: hidden !important;
}

main, .main, .page, .container, .content, .layout, .dashboard, .shell, .wrap{
  padding-top: 0 !important;
}

/* внутренняя раскладка шапки */
header, nav, .topbar, .navbar, #topbar{
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  align-items: center !important;
  gap: 14px 18px !important;
}

.brand, .logo, .site-brand, .site-logo{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  min-width: 0 !important;
}

#topActions, .actions, .topbar-actions{
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:flex-end !important;
  align-items:center !important;
  gap:10px !important;
  min-width:0 !important;
}

#topActions > *, .actions > *, .topbar-actions > *{
  margin:0 !important;
}

/* кнопки премиальнее */
header .btn, nav .btn, .topbar .btn, .navbar .btn, #topbar .btn,
header button, nav button, .topbar button, .navbar button, #topbar button,
#topActions .btn, .actions .btn, .topbar-actions .btn{
  min-height: 46px !important;
  padding: 12px 18px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(176,223,255,.16) !important;
  background:
    linear-gradient(180deg, rgba(208,232,255,.92), rgba(180,215,247,.88)) !important;
  color: #112235 !important;
  font-weight: 700 !important;
  box-shadow:
    0 10px 24px rgba(118,183,255,.18),
    inset 0 1px 0 rgba(255,255,255,.70) !important;
  text-shadow: none !important;
}

header .btn:hover, nav .btn:hover, .topbar .btn:hover, .navbar .btn:hover, #topbar .btn:hover,
header button:hover, nav button:hover, .topbar button:hover, .navbar button:hover, #topbar button:hover{
  transform: translateY(-1px) !important;
  box-shadow:
    0 14px 28px rgba(118,183,255,.22),
    inset 0 1px 0 rgba(255,255,255,.76) !important;
}

/* статус-плашки */
.pill, .badge, .chip, #authPill, #mqttPill{
  min-height: 42px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:10px !important;
  border: 1px solid rgba(155,206,255,.12) !important;
  background: linear-gradient(180deg, rgba(21,34,52,.88), rgba(14,24,38,.94)) !important;
  color:#d7e6f7 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03) !important;
}

/* на всякий случай убираем влияние родительских transform/overflow */
body *, body *::before, body *::after{
  box-sizing: border-box;
}

/* мобильная шапка */
@media (max-width: 900px){
  :root{
    --fixed-topbar-h: var(--fixed-topbar-h-mobile);
  }

  header, nav, .topbar, .navbar, #topbar{
    width: calc(100% - 14px) !important;
    top: 7px !important;
    padding: 12px !important;
    border-radius: 22px !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .brand, .logo, .site-brand, .site-logo{
    justify-content: flex-start !important;
  }

  #topActions, .actions, .topbar-actions{
    display:grid !important;
    grid-template-columns: 1fr !important;
    justify-content:stretch !important;
    gap:8px !important;
  }

  #topActions > *, .actions > *, .topbar-actions > *{
    width:100% !important;
  }

  header .btn, nav .btn, .topbar .btn, .navbar .btn, #topbar .btn,
  header button, nav button, .topbar button, .navbar button, #topbar button{
    min-height: 44px !important;
    width:100% !important;
    justify-content:center !important;
    font-size: 15px !important;
  }

  .pill, .badge, .chip, #authPill, #mqttPill{
    width:100% !important;
    justify-content:center !important;
  }

  body{
    padding-top: calc(var(--fixed-topbar-h-mobile) + 24px) !important;
  }
}

@media (max-width: 520px){
  :root{
    --fixed-topbar-h-mobile: 196px;
  }

  body{
    padding-top: calc(var(--fixed-topbar-h-mobile) + 20px) !important;
  }
}