:root {
  --master-top: calc(52px + env(safe-area-inset-top, 0px));
  --master-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  --master-bg: #19222c;
}
html { scroll-padding-top: calc(var(--master-top) + 110px); }
body.master-shell {
  padding-top: calc(var(--master-original-top, 56px) + var(--master-top)) !important;
  padding-bottom: max(var(--master-original-bottom, 100px), var(--master-bottom)) !important;
}
.master-shell > .navbar.fixed-top { top: var(--master-top) !important; }
.master-shell [data-master-offset] { top: calc(var(--master-element-top) + var(--master-top)) !important; }
.master-tabs {
  box-sizing: border-box;
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--master-top);
  padding: env(safe-area-inset-top, 0px) max(12px, env(safe-area-inset-right, 0px)) 0 max(12px, env(safe-area-inset-left, 0px));
  z-index: 1040;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  background: var(--master-bg);
  border-bottom: 1px solid #ffffff1c;
  color: #f8fafc;
  font-family: system-ui, sans-serif;
  transition: opacity .35s ease;
}
.master-tabs a {
  flex: 1;
  max-width: 260px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #b9c4d0;
  border-bottom: 3px solid transparent;
  text-decoration: none;
  font-size: 16px;
  font-weight: 700;
  -webkit-tap-highlight-color: transparent;
}
.master-tabs a[aria-current=page] { color: #ffffff; border-color: #86d8bd; }
.master-tabs svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.master-tabs a:focus-visible, .master-actions button:focus-visible { outline: 3px solid #86d8bd; outline-offset: -3px; }
.master-actions {
  box-sizing: border-box;
  display: flex;
  flex: 0 0 100%;
  width: 100%;
  gap: 8px;
  padding: 6px max(12px, env(safe-area-inset-right, 0px)) 6px max(12px, env(safe-area-inset-left, 0px));
  background: var(--master-bg);
  border-top: 1px solid #ffffff1c;
  font-family: system-ui, sans-serif;
}
.master-actions button {
  appearance: none;
  flex: 1;
  min-width: 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 4px;
  background: #ffffff0c;
  border: 1px solid #ffffff18;
  border-radius: 8px;
  color: #e5edf5;
  font: 600 13px/1.2 system-ui, sans-serif;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.master-actions button:hover { background: #ffffff18; }
.master-actions button:active { background: #ffffff28; }
.master-actions svg { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.master-shell .master-reader-bar {
  flex-wrap: wrap !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}
.master-shell .master-reader-bar > .master-actions { order: 100; }
.master-standalone-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1030;
  background: var(--master-bg);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transition: opacity .35s ease;
}
.master-error { max-width: 560px; margin: 15vh auto; padding: 24px; font: 16px/1.8 system-ui, sans-serif; }
.master-error h1 { font-size: 24px; }
@media (prefers-reduced-motion: reduce) {
  .master-tabs, .master-standalone-bar { transition: none; }
}
