/* V97.190: one visual contract for the member bottom navigation (React site + standalone closet).
   Phones only; from 768px the same destinations sit in the header instead. */
:root{--bottom-nav-h:0px;--bottom-nav-rise:0px}
[data-nav-count][hidden]{display:none}
.sty-nav{display:none}
@media (max-width:767.98px){
  /* --bottom-nav-rise: how far the raised centre button pokes above the bar; anything sitting on the bar leaves that much room. */
  /* V97.214: the bar floats as a pill (owner: "橢圓形長方條懸浮嘅效果兩邊唔掂到"). --bottom-nav-lift = gap under the pill:
     10px, or just clear of the phone's home indicator when the page runs edge to edge. --bottom-nav-h = pill + that gap,
     i.e. how much room the page keeps free at the bottom. */
  .has-bottom-nav{--bottom-nav-lift:max(10px,calc(env(safe-area-inset-bottom,0px) - 10px));--bottom-nav-h:calc(60px + var(--bottom-nav-lift));--bottom-nav-rise:18px}
  /* Bottom-anchored pieces stack under the bar so the raised button is never cut in half. */
  .has-bottom-nav .nav-under{z-index:39}
  .sty-nav{position:fixed;left:12px;right:12px;bottom:max(10px,calc(env(safe-area-inset-bottom,0px) - 10px));z-index:40;box-sizing:border-box;display:flex;align-items:stretch;max-width:480px;height:60px;margin:0 auto;padding:0 6px;background:rgba(255,255,255,.96);border:1px solid #e6dfd5;border-radius:30px;box-shadow:0 8px 24px rgba(47,38,32,.16),0 1px 3px rgba(47,38,32,.08);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font-family:inherit}
  .sty-nav[hidden]{display:none}
  .sty-nav-item{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;margin:0;padding:0;border:0;background:none;color:#6b6259;font:inherit;font-size:12px;line-height:16px;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .sty-nav-ico{position:relative;box-sizing:border-box;display:grid;place-items:center;width:52px;height:28px;border-radius:14px;transition:background-color .15s}
  .sty-nav .sty-nav-ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
  .sty-nav-label{white-space:nowrap}
  .sty-nav-item[aria-current="page"]{color:#2f2620;font-weight:700}
  .sty-nav-item[aria-current="page"] .sty-nav-ico{background:#f7dcc8}
  .sty-nav-item:active .sty-nav-ico{background:#f1e9df}
  .sty-nav-item:focus-visible{outline:2px solid #D96A33;outline-offset:-2px;border-radius:12px}
  .sty-nav-badge{position:absolute;top:-5px;left:29px;box-sizing:content-box;display:grid;place-items:center;min-width:17px;height:17px;padding:0 4px;border:2px solid #fff;border-radius:11px;background:#a33d35;color:#fff;font-size:10.5px;font-weight:700;line-height:1}
  .sty-nav-badge[hidden]{display:none}
  .sty-nav-up{color:#B5521A;font-weight:700}
  .sty-nav-up .sty-nav-ico{box-sizing:content-box;width:46px;height:46px;margin-top:-24px;border:3px solid #fff;border-radius:50%;background:#DD7947;color:#fff;box-shadow:0 6px 14px rgba(217,106,51,.3)}
  .sty-nav .sty-nav-up .sty-nav-ico svg{width:24px;height:24px;stroke-width:2.2}
  .sty-nav-up:active .sty-nav-ico{background:#D96A33}
  /* V97.225 (owner: 「橙色只淺10%」): the raised 上載 button is the brand orange mixed 10% with white (#D96A33 → #DD7947).
     Its label keeps the full colour. Pressed = the full colour.
     V97.253 (owner: 「全部可以用返橙色」): the same orange on every zone tab; the zone colours of V97.223 are gone. */
  /* V97.208: 上載 and the lit 登入 use the logo's orange #D96A33 (were a darker brick); their labels #B5521A (5:1 on white). */
  /* V97.196: visitors' 「登入」 (in the 「帳戶」 slot) is lit orange, with a slow glow, so it invites a tap. */
  .sty-nav-lit{color:#B5521A;font-weight:700}
  .sty-nav-lit .sty-nav-ico{background:#D96A33;color:#fff;animation:sty-nav-glow 2.4s ease-out infinite}
  .sty-nav-lit:active .sty-nav-ico{background:#C55E2B}
  /* V97.198: visitors cannot use 訊息 and 上載 yet: grey, no press feedback, not a link. */
  .sty-nav-off,.sty-nav-up.sty-nav-off{color:#b3aaa0;font-weight:400;cursor:default}
  .sty-nav-off:active .sty-nav-ico{background:none}
  .sty-nav-up.sty-nav-off .sty-nav-ico,.sty-nav-up.sty-nav-off:active .sty-nav-ico{background:#d8d1c8;color:#fff;box-shadow:none}
}
@keyframes sty-nav-glow{0%{box-shadow:0 0 0 0 rgba(217,106,51,.5)}70%,100%{box-shadow:0 0 0 9px rgba(217,106,51,0)}}
@media (max-width:767.98px) and (prefers-reduced-motion:reduce){.sty-nav-ico{transition:none}.sty-nav-lit .sty-nav-ico{animation:none;box-shadow:0 0 0 3px rgba(217,106,51,.22)}}