/* Equal navigation cells; glass optics belong to the surface, never the icons. */
:root {
  --dock-bottom: calc(12px + env(safe-area-inset-bottom,0px));
  --dock-action-bottom: calc(110px + env(safe-area-inset-bottom,0px));
  --dock-surface: #edf0ffbd;
  --dock-border: #ffffffdf;
  --dock-ink: #545576;
  --dock-selected: linear-gradient(145deg,#ffffffb5,#c6b4ff94);
  --dock-selected-line: #9c85dcb0;
  --dock-selected-ink: #46258b;
}
:root[data-theme="dark"] {
  --dock-surface: #20273cba;
  --dock-border: #a4b4de70;
  --dock-ink: #bec7e0;
  --dock-selected: linear-gradient(145deg,#9f87e765,#7760b94a);
  --dock-selected-line: #c3b4fca0;
  --dock-selected-ink: #fff;
}
:root[data-theme] #tabbar.tabbar {
  box-sizing: border-box;
  position: fixed; left: 50%; right: auto;
  bottom: var(--dock-bottom) !important;
  transform: translateX(-50%) !important;
  width: min(526px,calc(100% - 24px)) !important;
  max-width: none !important;
  height: 82px !important; min-height: 82px !important;
  display: grid; grid-template-columns: repeat(5,minmax(0,1fr));
  align-items: stretch; gap: 4px !important; padding: 6px !important;
  border: 1px solid var(--dock-border) !important;
  border-radius: 26px !important;
  background: var(--dock-surface) !important;
  backdrop-filter: blur(24px) saturate(155%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(155%) !important;
  box-shadow: 0 8px 25px #1116312b,inset 0 1px 0 #ffffff70,inset 0 -1px 0 #ffffff14 !important;
  isolation: isolate; overflow: hidden; z-index: 14;
  will-change: auto; filter: none !important;
}
:root[data-theme] #tabbar::before {
  content: ""; display: block; position: absolute; inset: 0;
  border: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: url('../img/dock-glass-20260919.webp') center / cover no-repeat;
  opacity: .25; transform: none; filter: none;
}
:root[data-theme] #tabbar::after { display: none !important; }
:root[data-theme] #tabThumb { display: none !important; }
:root[data-theme] #tabbar > button {
  box-sizing: border-box; position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 3px 2px !important; margin: 0;
  width: 100%; min-width: 0; height: 68px; min-height: 68px;
  border: 1px solid transparent !important; border-radius: 20px !important;
  background: transparent !important; box-shadow: none !important;
  color: var(--dock-ink) !important;
  font-size: 11px; font-weight: 650; line-height: 14px; letter-spacing: 0;
  text-shadow: none; transform: none !important; filter: none;
  transition: background .15s,border-color .15s,color .15s;
  overflow: hidden;
}
:root[data-theme] #tabbar > button[aria-current="true"] {
  background: var(--dock-selected) !important;
  border-color: var(--dock-selected-line) !important;
  box-shadow: inset 0 1px 0 #ffffff78,0 2px 6px #35266a1f !important;
  color: var(--dock-selected-ink) !important; font-weight: 750;
}
:root[data-theme] #tabbar > button::before,:root[data-theme] #tabbar > button::after { display: none !important; }
:root[data-theme] #tabbar .dock-icon {
  display: block; width: 42px; min-width: 42px; max-width: 42px;
  height: 42px; flex: 0 0 42px;
  background-position: center; background-repeat: no-repeat; background-size: contain;
  opacity: .88; transform: none; filter: none; animation: none;
}
:root[data-theme] #tabbar > button[aria-current="true"] .dock-icon { opacity: 1; }
:root[data-theme] #tabbar .dock-label { display: block; line-height: 14px; max-width: 100%; white-space: nowrap; }
:root[data-theme] #tabbar .badge { top: 2px; right: 2px; z-index: 2; font-size: 9px; border-width: 1px; }
:root[data-theme] #tabbar > button:focus-visible { outline: 2px solid #78b9ff !important; outline-offset: -3px; }
/* Preserve the approved blue plus artwork and remove the later violet backing. */
:root[data-theme] #fab.fab:not(.ui-disabled) {
  width: 62px !important; min-width: 62px !important; max-width: 62px !important; height: 62px !important;
  padding: 0 !important; background: none !important; border: 0 !important; border-image: none !important;
  box-shadow: none !important; filter: drop-shadow(0 6px 10px #3a2a8a40);
  bottom: var(--dock-action-bottom) !important;
}
/* Размер значка — в пикселях: WebKit на телефоне брал ширину из атрибута svg (34), а высоту
   растягивал до кнопки, и кристалл «+» вытягивался в каплю. */
:root[data-theme] #fab.fab svg { width: 62px !important; height: 62px !important; min-width: 62px; min-height: 62px; max-width: none; max-height: none; flex: none; display: block; aspect-ratio: 1 / 1; }
:root[data-theme] #fab.fab.hide { display: none !important; }
:root[data-theme] #wizbar,:root[data-theme] #savebar { bottom: var(--dock-action-bottom) !important; }
:root[data-theme] #scroll { padding-bottom: calc(120px + env(safe-area-inset-bottom,0px)) !important; }
:root[data-theme] .phone:has(#wizbar.on) #scroll,:root[data-theme] .phone:has(#savebar.on) #scroll { padding-bottom: calc(240px + env(safe-area-inset-bottom,0px)) !important; }
/* New brand artwork; the robot and the subscription crown are separate assets. */
:root[data-theme] #brandLogo.brand-hd { height: 40px; overflow: hidden; }
:root[data-theme] #brandLogo.brand-hd .word {
  width: 100% !important; max-width: 190px !important;
  height: 40px !important; max-height: 40px !important;
  object-fit: cover; object-position: center; filter: none;
}
:root[data-theme] .ownercard .crystalm {
  background: url('../img/ref-m-20260919.webp') center / contain no-repeat !important;
  filter: none !important;
}
/* Numeral artwork is one atlas; each glyph uses its measured, equal-height viewport. */
:root[data-theme] .wizard-steps .wizard-number::before { display: none !important; }
:root[data-theme] .wizard-steps .wizard-number .crystal-digit {
  display: block !important; width: 28px !important; height: 28px !important;
  margin: auto; flex: 0 0 28px; opacity: 1; filter: none; transform: none !important;
}
@media (max-width:350px) {
  :root[data-theme] #brandLogo.brand-hd .word { height: 32px !important; }
  :root[data-theme] #tabbar > button { font-size: 10.5px; }
  :root[data-theme] .wizard-steps .wizard-number .crystal-digit { width: 25px !important; height: 25px !important; }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  :root[data-theme] #tabbar.tabbar { background: #edf0ff !important; }
  :root[data-theme="dark"] #tabbar.tabbar { background: #252c43 !important; }
}
@media (prefers-reduced-motion:reduce) {
  :root[data-theme] #tabbar > button { transition: none; }
}
/* Keep labels whole even on 320 px; override the historical span font rule. */
:root[data-theme] #tabbar .dock-label { font-size: inherit !important; font-weight: inherit !important; line-height: 14px !important; }
:root[data-theme] .wizard-steps .wizard-number.current[aria-current="step"] {
 background: linear-gradient(145deg,#7954d9,#493082),var(--action-art) center / cover no-repeat !important;
 border-color: #c8b4ff !important; box-shadow: inset 0 1px 0 #ffffff65,0 0 0 1px #9975ec !important;
}
:root[data-theme] #tabbar .dock-label { font-size: 11px !important; }
@media(max-width:350px) { :root[data-theme] #tabbar .dock-label { font-size: 10px !important; } }

/* Original jewel tiles, exact artwork and colours. No substituted pictograms. */
:root[data-theme] #tabbar.tabbar button svg.dock-icon.crystal-icon { width:42px !important; height:42px !important; min-width:42px !important; flex:0 0 42px; background-size:600% 600%; opacity:1; transform:none !important; filter:none !important; }
:root[data-theme] #tabbar.tabbar { border-color:#b4c9f5 !important; box-shadow:0 8px 24px #18245125,inset 0 1px 0 #fff,inset 0 -1px 0 #a19cdd55 !important; }
:root[data-theme="dark"] #tabbar.tabbar { border-color:#8192bf !important; background:#222b43cc !important; box-shadow:0 8px 24px #070d2260,inset 0 1px 0 #c8d8ff66,inset 0 -1px 0 #8090cc30 !important; }
:root[data-theme] #tabbar > button[aria-current="true"] { border-color:#9677df !important; background:linear-gradient(145deg,#fff9,#b7afff99) !important; }
:root[data-theme="dark"] #tabbar > button[aria-current="true"] { border-color:#b6a5f0 !important; background:linear-gradient(145deg,#8c70d475,#53418470) !important; }