@media(max-width:1099px){
/* ORATOR mobile navigation R2: owner-approved native standard. */
.orator-animated-nav {
  --nav-bar-height:57px;
  --nav-accent:var(--accent,#f5a04f);
  --nav-on-accent:#07101c;
  --nav-surface:var(--bg-2,var(--panel-3,#05101c));
  --nav-muted:var(--nav-icon-muted,#8d9bb0);
  --nav-duration:320ms;
  --nav-ease:cubic-bezier(.22,.8,.2,1);
  --nav-wave-width:80px;
  --nav-wave-height:8px;
  --nav-safe-bottom:var(--mobile-nav-safe-bottom,env(safe-area-inset-bottom,0px));
  position:fixed;inset:auto 0 0;z-index:95;isolation:isolate;
  display:grid;grid-template-columns:repeat(var(--nav-count,6),minmax(0,1fr));align-items:center;
  width:100%;height:calc(var(--nav-bar-height) + var(--nav-safe-bottom));
  padding:5px max(4px,env(safe-area-inset-right,0px)) calc(4px + var(--nav-safe-bottom)) max(4px,env(safe-area-inset-left,0px));
  border:0;border-radius:0;background:transparent;overflow:visible;
}
/* The entire dock is painted by ONE filled path and ONE continuous open top edge.
   There is no straight border behind the crest, or separately stroked cap to join. */
.orator-animated-nav:before,.orator-animated-nav:after {content:none}
.orator-nav-surface {
  position:absolute;left:0;right:0;top:calc(-1 * var(--nav-wave-height));
  width:100%;height:calc(100% + var(--nav-wave-height));display:block;
  pointer-events:none;z-index:0;overflow:hidden;
}
.orator-nav-surface-fill {fill:var(--nav-surface);stroke:none}
.orator-nav-surface-edge {fill:none;stroke:var(--line-strong,#304b69);stroke-width:1;vector-effect:non-scaling-stroke;stroke-linecap:butt}
.orator-animated-nav .orator-animated-nav-item {
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  appearance:none;width:48px;height:48px;min-width:44px;min-height:44px;
  position:relative;justify-self:center;display:grid;place-items:center;
  border:0;border-radius:14px;padding:0;margin:0;background:transparent;
  color:var(--nav-muted);text-decoration:none;cursor:pointer;box-shadow:none;
  overflow:visible;isolation:isolate;z-index:1;transition:color 160ms ease;
}
.orator-animated-nav-item:before {
  content:"";position:absolute;width:44px;height:44px;border-radius:50%;left:50%;top:50%;
  background:var(--nav-accent);z-index:0;
  transform:translate(-50%,-50%) scale(.82);opacity:0;
  transition:transform 240ms var(--nav-ease),opacity 150ms ease;
}
.orator-animated-nav-item .orator-animated-nav-icon {
  display:grid;place-items:center;position:relative;z-index:1;width:24px;height:24px;
  color:inherit;transform:none;transition:color 160ms ease;pointer-events:none;
}
.orator-animated-nav-icon svg {display:block;width:24px;height:24px;stroke-width:1.8}
.orator-animated-nav-item[data-active="true"] {color:var(--nav-on-accent)}
.orator-animated-nav-item[data-active="true"]:before {opacity:1;transform:translate(-50%,-50%) scale(1)}
.orator-animated-nav-item[data-active="true"] .orator-animated-nav-icon {transform:none}
.orator-animated-nav-item:focus-visible {outline:2px solid var(--focus,#75adeb);outline-offset:2px}
.orator-animated-nav-item:disabled {opacity:.38;cursor:not-allowed}
.orator-animated-nav-item[data-active="true"]:disabled:before {opacity:.5}
/* A temporary traced copy is placed exactly over the original SVG. The original
   is restored on completion/cancellation; original path data is never rewritten. */
.orator-animated-nav-icon .orator-nav-trace-svg {
  position:absolute;inset:0;width:24px;height:24px;display:block;pointer-events:none;
  transform:none;overflow:visible;
}
.orator-animated-nav[data-motion="still"] *,
.orator-animated-nav[data-motion="still"] *:before {transition:none!important;animation:none!important}
@media(prefers-reduced-motion:reduce){
  .orator-animated-nav *,.orator-animated-nav *:before{transition:none!important;animation:none!important}
}
@media(max-width:370px){
  .orator-animated-nav{--nav-wave-width:72px}
  .orator-animated-nav .orator-animated-nav-item{width:44px;height:44px}
}

/* Sole visual-state owner. Native .active/.is-active describes the route and
   must not repaint the previous item or the filled More dots over this layer. */
html .orator-bottom-nav.orator-animated-nav[class] {
  border-top:0!important;background:transparent!important;padding-top:5px!important;
  overflow:visible!important;isolation:isolate;grid-template-columns:repeat(var(--nav-count,6),minmax(0,1fr))!important;
}
html .cabinet-bottom-nav.orator-animated-nav {--nav-surface:var(--panel-3,#081220)}
html .orator-bottom-nav.orator-animated-nav:before,
html .orator-bottom-nav.orator-animated-nav:after {content:none!important}
html .orator-bottom-nav.orator-animated-nav > .orator-animated-nav-item[data-active] {
  color:var(--nav-muted)!important;background:transparent!important;box-shadow:none!important;
  transform:none!important;overflow:visible!important;border:0!important;border-radius:14px!important;
}
html .orator-bottom-nav.orator-animated-nav > .orator-animated-nav-item[data-active="true"] {color:var(--nav-on-accent)!important}
html .orator-bottom-nav.orator-animated-nav > .orator-animated-nav-item:after {content:none!important}
html .orator-bottom-nav.orator-animated-nav .orator-animated-nav-icon {
  color:inherit!important;transform:none!important;transition:none!important;
}
html .orator-bottom-nav.orator-animated-nav .orator-animated-nav-icon svg {color:inherit!important}
/* Fill-only primitives (More dots / door handle) remain currentColor both in
   their traced copy and after the original SVG is restored. Never fill:none. */
html .orator-bottom-nav.orator-animated-nav .orator-animated-nav-icon [fill="currentColor"] {fill:currentColor}
.app-shell .content,.cabinet-shell .cabinet-main {padding-bottom:calc(var(--mobile-nav-space) + 12px)!important}
.toast-region {bottom:calc(var(--mobile-nav-space) + 10px)!important}
.sidebar,.cabinet-sidebar {padding-bottom:20px!important}
}
