/* Sole owner of the three primary pages' shell and navigation layout. */
body.home-page, body.futu-watchlist-page {
  --app-nav-offset: var(--app-safe-top);
  background: var(--color-background); color: var(--color-text);
  font-family: var(--font-ui); font-size: var(--type-body);
  padding-bottom: calc(5.25rem + var(--app-safe-bottom));
  min-height: 100dvh;
}
body.home-page .shell, body.futu-watchlist-page .futu-page-shell {
  width: 100%; max-width: var(--app-content-width); margin: 0 auto;
  padding: max(var(--space-4), var(--app-safe-top)) var(--space-4) var(--space-6);
  padding-inline: max(var(--space-4), var(--app-safe-left)) max(var(--space-4), var(--app-safe-right));
  scroll-margin-top: calc(var(--app-nav-offset) + var(--space-4));
}
.primary-page-content { display: contents; }
.primary-navigation-frame {
  position: fixed; z-index: 100; top: var(--app-viewport-top, 0px); inset-inline: 0;
  height: var(--app-viewport-height, 100dvh); display: grid; align-items: end;
  /* The pill's inner bottom padding also separates buttons from the home indicator. */
  padding-bottom: max(var(--nav-bottom, 0px), calc(var(--app-safe-bottom) - var(--space-2))); pointer-events: none;
}
.primary-bottom-nav {
  position: relative; margin-inline: auto; pointer-events: auto;
  width: var(--nav-width, 100%); max-width: var(--app-content-width);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  padding-inline: max(var(--space-3), var(--app-safe-left)) max(var(--space-3), var(--app-safe-right));
  border: var(--nav-border, 0px); border-top: 1px solid var(--color-border); background: var(--nav-background);
  border-radius: var(--nav-radius, 0px); box-shadow: var(--nav-shadow, none);
  -webkit-backdrop-filter: var(--nav-filter, none); backdrop-filter: var(--nav-filter, none);
}
.primary-bottom-nav[hidden] { display: none; }
.primary-bottom-nav a {
  display: grid; place-items: center; align-content: center; gap: var(--space-1); min-height: var(--touch-target);
  border-radius: var(--radius-control); color: var(--color-text-muted);
  font-size: var(--type-body); font-weight: 650; text-decoration: none;
}
/* Installed phones: the document never becomes the list's scrolling surface.
   Navigation occupies its own grid row, without fixed/sticky or viewport JS. */
@media (max-width: 799px), (max-height: 599px) {
  html[data-app-display="standalone"] {
    /* Installed WebKit can exclude the status-bar inset from its small viewport.
       Cap compensation at the large viewport; a system-reserved status bar reports zero inset. */
    height: 100dvh;
    height: min(100lvh, calc(100dvh + var(--app-safe-top)));
    overflow: hidden;
  }
  html[data-app-display="standalone"] :is(body.home-page, body.futu-watchlist-page) {
    height: 100%; min-height: 0; padding-bottom: 0; overflow: hidden;
    display: grid; grid-template-rows: minmax(0, 1fr) auto;
  }
  html[data-app-display="standalone"] .primary-page-content {
    display: block; grid-row: 1; min-height: 0; overflow: auto; overscroll-behavior-y: contain;
    scroll-padding-block: calc(var(--app-safe-top) + var(--space-3)) var(--space-6);
  }
  html[data-app-display="standalone"] .primary-navigation-frame {
    position: static; grid-row: 2; height: auto; display: block;
  }
}
@media (hover: hover) and (pointer: fine) {
  .primary-bottom-nav a:hover { color: var(--color-text); }
}
.primary-bottom-nav a[aria-current="page"] { color: var(--nav-active-text); background: var(--nav-active-background); }
.primary-bottom-nav a:focus-visible, .app-skip-link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.app-skip-link { position: fixed; z-index: 1000; left: var(--space-4); top: -10rem; min-height: var(--touch-target); padding: var(--space-3); color: var(--color-text); background: var(--color-surface); }
.app-skip-link:focus { top: var(--space-2); }
body.home-page .home-review-topbar, .futu-watchlist-page .futu-watchlist-header { min-height: 3.25rem; padding: 0 0 var(--space-2); flex-wrap: var(--topbar-wrap, nowrap); }
body.home-page .home-review-topbar h1, .futu-watchlist-page .futu-watchlist-header h1 { margin: 0; font-size: var(--type-title); line-height: 1.35; font-weight: 700; letter-spacing: var(--heading-tracking, 0); }
body.home-page .home-live-status { font-size: var(--type-small); white-space: normal; overflow-wrap: anywhere; }
body.home-page .home-review-topbar > div { min-width: var(--heading-min-width, 0px); }
.home-review-topbar .home-refresh-btn, .futu-watchlist-header .futu-watchlist-sync {
  flex: 0 0 auto; min-width: 3.75rem; min-height: var(--touch-target);
  padding: var(--space-2) var(--space-3); border: 1px solid var(--control-border, var(--color-border)); border-radius: var(--radius-control);
  background: var(--color-surface); color: var(--color-accent); font: inherit; font-size: var(--type-body); cursor: pointer;
}
.home-review-topbar .home-refresh-btn:focus-visible, .futu-watchlist-header .futu-watchlist-sync:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.home-review-topbar .home-refresh-btn:disabled, .futu-watchlist-header .futu-watchlist-sync:disabled { opacity: .65; cursor: wait; }
.portfolio-asset-status[data-status="stale"], .portfolio-asset-status[data-status="unknown"],
.portfolio-asset-status[data-status="partial"], .futu-radar-status[data-status="partial"] { color: var(--color-attention); }
.futu-date-strip { grid-template-columns: repeat(7, minmax(var(--touch-target), 1fr)); overflow-x: auto; scrollbar-width: thin; }
@media (min-width: 800px) and (min-height: 600px) {
  body.home-page, body.futu-watchlist-page { padding-bottom: 0; --app-nav-offset: 4.5rem; }
  .primary-navigation-frame { position: sticky; top: 0; height: auto; display: block; padding: 0; }
  .primary-bottom-nav {
    display: flex; gap: var(--space-2); margin: 0 auto; padding: var(--space-3) var(--space-4);
    border: 0; border-bottom: 1px solid var(--color-border); border-radius: 0; box-shadow: none;
  }
  .primary-bottom-nav a { flex: 0 1 7rem; min-width: 5rem; display: flex; justify-content: center; gap: var(--space-2); }
  body.home-page .shell, body.futu-watchlist-page .futu-page-shell { padding-top: var(--space-6); }


}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Shared page hierarchy and navigation glyphs; native SVG masks, no icon runtime. */
body.home-page .home-review-topbar > div { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1rem; align-items: baseline; gap: 0 var(--space-3); }
body.home-page .home-review-topbar h1 { grid-column: 1; grid-row: 1; }
body.home-page .home-live-status { grid-column: 2; grid-row: 1; }
body.home-page #pwaUpdateStatus { grid-column: 1 / -1; grid-row: 2; line-height: 1; }
.page-purpose { flex: 0 0 100%; order: 1; margin: 0; color: var(--color-text-muted); font-size: var(--type-body); line-height: 1.6; }
.primary-bottom-nav a::before { content: ''; width: 1.125rem; height: 1.125rem; background: currentColor; mask: var(--nav-icon) center / contain no-repeat; }
.primary-bottom-nav a[href='/'] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7'%3E%3Crect x='4' y='5' width='16' height='16' rx='3'/%3E%3Cpath d='M4 10h16M8 3v4m8-4v4M8 14h3m-3 3h8'/%3E%3C/svg%3E"); }
.primary-bottom-nav a[href='/holdings'] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7'%3E%3Crect x='3' y='6' width='18' height='15' rx='3'/%3E%3Cpath d='M8 6V3h8v3M3 12h18M10 12v3h4v-3'/%3E%3C/svg%3E"); }
.primary-bottom-nav a[href='/watchlist'] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cpath d='m12 12 7-7'/%3E%3C/svg%3E"); }
.primary-bottom-nav a[aria-current='page'] { box-shadow: var(--nav-active-shadow, inset 0 2px var(--color-accent)); }
#appMain:focus { outline: none; }
#appMain:focus-visible { outline: 1px solid var(--color-border); outline-offset: 3px; }
@media (min-width: 800px) and (min-height: 600px) {
  .primary-bottom-nav::before { content: '投资工作台'; color: var(--color-text); font-size: 1rem; font-weight: 650; align-self: center; margin-right: auto; letter-spacing: .04em; }
  .primary-bottom-nav a[aria-current='page'] { box-shadow: var(--nav-active-shadow, inset 0 -2px var(--color-accent)); }
}

/* Immediate feedback, shared by the three primary pages. */
:is(body.home-page, body.futu-watchlist-page) :is(button, summary, a) { touch-action: manipulation; }
:is(body.home-page, body.futu-watchlist-page) :is(button, .primary-bottom-nav a) { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
:is(body.home-page, body.futu-watchlist-page) :is(button, summary, a):active { opacity: .7; }
.primary-page-content > footer a { display: inline-flex; align-items: center; min-height: var(--touch-target); }