/* Existing app-tabs: same 75px content reservation, including iPhone safe area. */
html body nav.app-tabs[data-syoper-navigation="star"] {
  left:50%;right:auto;bottom:0;margin:0;transform:translateX(-50%);width:min(100%,620px);
  height:calc(75px + env(safe-area-inset-bottom,0px));
  padding:8px max(9px,env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(9px,env(safe-area-inset-left,0px));
  border:1px solid rgba(255,255,255,.13);border-bottom:0;
  border-radius:24px 24px 0 0;background:rgba(20,21,27,.96)!important;
  box-shadow:0 -4px 20px #0002;overflow:visible;
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  align-items:flex-start;isolation:isolate;
}
html body nav.app-tabs[data-syoper-navigation="star"] > a {
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:44px;min-height:54px;width:auto;flex:1 1 0;padding:3px 0;gap:5px;
  color:#bfc0c8!important;font-size:10px;line-height:13px;font-weight:500;
  text-decoration:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
html body nav.app-tabs[data-syoper-navigation="star"] > a > span {display:grid;place-items:center;width:28px;height:28px;padding:0;background:none;border:0;border-radius:0;box-shadow:none}
html body nav.app-tabs[data-syoper-navigation="star"] > a svg {width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
html body nav.app-tabs[data-syoper-navigation="star"] > a.selected,html body nav.app-tabs[data-syoper-navigation="star"] > a[aria-current="page"] {color:#ff0057!important}
/* Touch focus has no box; keyboard focus keeps a neutral underline. */
html body nav.app-tabs[data-syoper-navigation="star"] > a:focus {outline:none;box-shadow:none}
html body nav.app-tabs[data-syoper-navigation="star"] > a:focus-visible {outline:none;box-shadow:inset 0 -2px 0 #bfc0c8}
html body nav.app-tabs[data-syoper-navigation="star"] > a.create-tab {font-size:0;gap:0;overflow:visible;color:white!important}
html body nav.app-tabs[data-syoper-navigation="star"] > a.create-tab > span {position:absolute;top:-14px;background:none;border-radius:0;padding:0;width:64px;height:64px;transition:transform 180ms ease,filter 180ms ease;filter:drop-shadow(0 0 5px #ff005780) drop-shadow(0 3px 9px #ff005740)}
html body nav.app-tabs[data-syoper-navigation="star"] > a.create-tab svg {width:64px;height:64px;overflow:visible;stroke:none}
html body nav.app-tabs[data-syoper-navigation="star"] .syoper-star-fill {fill:#ff0057;stroke:#ff266f;stroke-width:.7}
html body nav.app-tabs[data-syoper-navigation="star"] .syoper-star-highlight {fill:none;stroke:#ff7bac;stroke-width:1;opacity:.55}
html body nav.app-tabs[data-syoper-navigation="star"] .syoper-star-plus {fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round}
html body nav.app-tabs[data-syoper-navigation="star"] .syoper-inbox-dot {fill:currentColor;stroke:none}
html body nav.app-tabs[data-syoper-navigation="star"] > a.create-tab:active > span {transform:scale(.91);filter:drop-shadow(0 0 7px #ff0057ba) drop-shadow(0 3px 11px #ff005770)}
html body nav.app-tabs[data-syoper-navigation="star"] .syoper-nav-spinner {display:none;fill:none;stroke:#fff;stroke-width:1.8;stroke-dasharray:28 12;transform-origin:32px 32px}
html body nav.app-tabs[data-syoper-navigation="star"] > a.create-tab[aria-busy="true"] .syoper-star-plus {display:none}
html body nav.app-tabs[data-syoper-navigation="star"] > a.create-tab[aria-busy="true"] .syoper-nav-spinner {display:block;animation:syoper-nav-spin .8s linear infinite}
@keyframes syoper-nav-spin {to{transform:rotate(360deg)}}
@media(max-width:360px){html body nav.app-tabs[data-syoper-navigation="star"] > a.create-tab > span,html body nav.app-tabs[data-syoper-navigation="star"] > a.create-tab svg{width:58px;height:58px}html body nav.app-tabs[data-syoper-navigation="star"] > a.create-tab > span{top:-11px}}
@media(prefers-reduced-motion:reduce){html body nav.app-tabs[data-syoper-navigation="star"] > a.create-tab > span{transition:none}html body nav.app-tabs[data-syoper-navigation="star"] > a.create-tab:active > span{transform:none}html body nav.app-tabs[data-syoper-navigation="star"] .syoper-nav-spinner{animation:none!important}}

/* Shared focus treatment across SYOPER screens. Keep decorative brand borders. */
:focus:not(:focus-visible){outline:none!important}
:focus-visible{outline-color:#8b8b96!important}