/*
 * Liquid Glass system
 * A final, shared visual layer loaded after each page's own stylesheet.
 * Persistent navigation and transient surfaces use real blur; content cards
 * use translucent material only, keeping long dashboards smooth while scrolling.
 */

:root {
  --liquid-radius-card: 22px;
  --liquid-radius-control: 14px;
  --liquid-radius-pill: 999px;
  --liquid-edge: rgba(255, 255, 255, 0.62);
  --liquid-edge-subtle: rgba(20, 28, 42, 0.1);
  --liquid-content: rgba(255, 255, 255, 0.52);
  --liquid-content-hover: rgba(255, 255, 255, 0.7);
  --liquid-surface: rgba(255, 255, 255, 0.68);
  --liquid-control: rgba(255, 255, 255, 0.58);
  --liquid-shadow: 0 22px 48px -34px rgba(18, 32, 54, 0.52), 0 3px 10px -7px rgba(18, 32, 54, 0.24);
  --liquid-shadow-hover: 0 28px 56px -34px rgba(18, 32, 54, 0.6), 0 10px 18px -14px rgba(18, 32, 54, 0.3);
  --liquid-inset: inset 0 1px 0 rgba(255, 255, 255, 0.92), inset 0 -1px 0 rgba(20, 28, 42, 0.04);
  --liquid-blur: blur(22px) saturate(165%);
  --liquid-blur-strong: blur(30px) saturate(180%);
  /* 与全站主曲线同源：起步柔和、中段加速、尾部平顺收住。 */
  --liquid-ease: var(--ease-apple, cubic-bezier(0.32, 0.72, 0, 1));
  --liquid-ease-press: var(--ease-apple);
  --liquid-fast: var(--motion-fast, 240ms);
  --liquid-base: var(--motion-base, 380ms);
}

:root[data-theme="dark"] {
  --liquid-edge: rgba(255, 255, 255, 0.14);
  --liquid-edge-subtle: rgba(255, 255, 255, 0.09);
  --liquid-content: rgba(27, 31, 38, 0.56);
  --liquid-content-hover: rgba(37, 43, 52, 0.72);
  --liquid-surface: rgba(24, 28, 34, 0.72);
  --liquid-control: rgba(42, 48, 58, 0.68);
  --liquid-shadow: 0 24px 54px -30px rgba(0, 0, 0, 0.78), 0 3px 10px -7px rgba(0, 0, 0, 0.48);
  --liquid-shadow-hover: 0 30px 62px -30px rgba(0, 0, 0, 0.84), 0 12px 22px -15px rgba(0, 0, 0, 0.58);
  --liquid-inset: inset 0 1px 0 rgba(255, 255, 255, 0.13), inset 0 -1px 0 rgba(0, 0, 0, 0.28);
}

html {
  scroll-behavior: smooth;
  scrollbar-color: color-mix(in srgb, var(--blue) 32%, var(--line)) transparent;
  scrollbar-width: thin;
}

::selection {
  background: color-mix(in srgb, var(--blue) 26%, transparent);
  color: var(--text);
}

/* Always-visible chrome gets the strongest material treatment. */
:where(
  .topbar,
  .section-nav,
  .home-header,
  .account-popover,
  .opportunity-popup-panel,
  .custom-select-menu,
  .workspace-anchor-nav,
  .app-notice-panel,
  .avatar-crop-panel
) {
  border-color: var(--liquid-edge) !important;
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0.16), transparent 38%, rgba(255, 255, 255, 0.04) 100%),
    var(--liquid-surface) !important;
  -webkit-backdrop-filter: var(--liquid-blur-strong) !important;
  backdrop-filter: var(--liquid-blur-strong) !important;
  box-shadow: var(--liquid-shadow), var(--liquid-inset) !important;
}

/* Dashboard cards use a light material without expensive per-card backdrop blur. */
:where(
  .card,
  .event-board,
  .strategy-board,
  .tactical-board,
  .signal-board,
  .portfolio-board,
  .workspace-card,
  .workspace-hero,
  .workspace-kpis,
  .workspace-metric-card,
  .home-hero,
  .home-command-card,
  .home-change-panel,
  .home-action-panel,
  .home-evidence-card,
  .home-dimension,
  .home-news-card,
  .home-opportunity-row,
  .settings-panel,
  .settings-audit-panel,
  .settings-session-panel,
  .portfolio-summary-panel,
  .portfolio-stress-panel,
  .asset-card,
  .indicator-card,
  .news-card,
  .news-impact-card,
  .holding-news-card,
  .holding-news-item,
  .journal-card,
  .alert-rule-card,
  .macro-release-card,
  .release-card,
  .stress-card,
  .watchlist-card,
  .tactical-card,
  .tactical-watch-card,
  .daily-focus-card,
  .review-item,
  .register-card,
  .portfolio-auth-gate,
  .workspace-auth-gate
) {
  border-color: var(--liquid-edge-subtle) !important;
  border-radius: var(--liquid-radius-card) !important;
  background:
    linear-gradient(128deg, var(--liquid-card-sheen, rgba(255, 255, 255, 0.18)), transparent 35%),
    var(--liquid-content) !important;
  box-shadow: var(--liquid-shadow), var(--liquid-inset) !important;
}

/* Controls share a raised translucent material but keep each component's size. */
:where(
  button,
  .account-primary-button,
  .account-secondary-button,
  .secondary-button,
  .refresh-button,
  .market-home-link,
  .topbar-home-link,
  .workspace-account-link,
  .home-account-link,
  .home-icon-button,
  .home-menu-toggle,
  .mobile-nav-toggle,
  .workspace-row-action,
  .holding-news-action
) {
  border-color: var(--liquid-edge-subtle);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 4px 10px -8px rgba(18, 32, 54, 0.42);
}

:where(button, .account-secondary-button, .secondary-button, .refresh-button, .market-home-link, .topbar-home-link, .workspace-row-action, .holding-news-action) {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.18), transparent 58%),
    var(--liquid-control);
}

:where(.account-primary-button, .home-primary-action, .home-refresh, .register-submit, .login-submit) {
  border-color: color-mix(in srgb, var(--blue) 65%, transparent) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.22), transparent 44%),
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 92%, #755dff), var(--blue)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), 0 14px 25px -17px color-mix(in srgb, var(--blue) 78%, transparent) !important;
}

:where(input, select, textarea) {
  border-color: var(--liquid-edge-subtle) !important;
  background: color-mix(in srgb, var(--liquid-control) 88%, transparent) !important;
  box-shadow: inset 0 1px 1px rgba(18, 32, 54, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

:where(input, select, textarea):focus {
  border-color: color-mix(in srgb, var(--blue) 68%, var(--liquid-edge)) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 14%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
}

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--blue) 74%, white);
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  :where(
    .card,
    .home-command-card,
    .home-evidence-card,
    .home-dimension,
    .home-news-card,
    .home-opportunity-row,
    .workspace-card,
    .workspace-metric-card,
    .asset-card,
    .indicator-card,
    .news-card,
    .holding-news-item,
    .journal-card,
    .alert-rule-card,
    .macro-release-card,
    .release-card,
    .stress-card,
    .tactical-card,
    .review-item
  ) {
    transition: transform var(--liquid-base) var(--liquid-ease), box-shadow var(--liquid-base) var(--liquid-ease), background-color var(--liquid-base) var(--liquid-ease), border-color var(--liquid-base) var(--liquid-ease);
  }

  :where(
    .card,
    .home-command-card,
    .home-evidence-card,
    .home-dimension,
    .home-news-card,
    .home-opportunity-row,
    .workspace-card,
    .workspace-metric-card,
    .asset-card,
    .indicator-card,
    .news-card,
    .holding-news-item,
    .journal-card,
    .alert-rule-card,
    .macro-release-card,
    .release-card,
    .stress-card,
    .tactical-card,
    .review-item
  ):hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--blue) 20%, var(--liquid-edge)) !important;
    background-color: var(--liquid-content-hover) !important;
    box-shadow: var(--liquid-shadow-hover), var(--liquid-inset) !important;
  }

  :where(button, .account-primary-button, .account-secondary-button, .secondary-button, .refresh-button, .market-home-link, .topbar-home-link, .workspace-row-action, .holding-news-action):not(:disabled):hover {
    transform: translateY(-1px) scale(1.012);
    border-color: color-mix(in srgb, var(--blue) 30%, var(--liquid-edge));
    filter: brightness(1.035);
  }
}

:where(button, .account-primary-button, .account-secondary-button, .secondary-button, .refresh-button, .market-home-link, .topbar-home-link, .workspace-row-action, .holding-news-action):not(:disabled):active {
  transform: scale(0.975) !important;
  transition-duration: var(--motion-instant, 140ms) !important;
}

/* A restrained page arrival makes navigation feel connected without delaying data. */
@media (prefers-reduced-motion: no-preference) {
  :where(.shell, .home-header, .home-main, .register-shell) {
    animation: liquid-page-arrive 680ms var(--liquid-ease) both;
  }

  :where(main > section, main > article, .home-main > section):not([hidden]) {
    animation: liquid-section-arrive 600ms var(--liquid-ease) both;
  }

  /* 区块之间拉开一点间隔，形成依次落位的节奏，而不是整屏一起弹出来。 */
  :where(main > section, main > article, .home-main > section):nth-child(2) { animation-delay: 55ms; }
  :where(main > section, main > article, .home-main > section):nth-child(3) { animation-delay: 110ms; }
  :where(main > section, main > article, .home-main > section):nth-child(4) { animation-delay: 165ms; }
  :where(main > section, main > article, .home-main > section):nth-child(5) { animation-delay: 220ms; }
  :where(main > section, main > article, .home-main > section):nth-child(6) { animation-delay: 275ms; }
}

@keyframes liquid-page-arrive {
  from { opacity: 0; transform: translateY(8px) scale(0.994); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes liquid-section-arrive {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 720px) {
  :root {
    --liquid-radius-card: 18px;
    --liquid-radius-control: 12px;
    --liquid-blur: blur(16px) saturate(150%);
    --liquid-blur-strong: blur(20px) saturate(155%);
  }

  :where(.topbar, .section-nav, .home-header, .account-popover, .workspace-anchor-nav) {
    -webkit-backdrop-filter: var(--liquid-blur) !important;
    backdrop-filter: var(--liquid-blur) !important;
  }
}

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

  :where(.shell, .home-header, .home-main, .register-shell, main > section, main > article) {
    animation: none !important;
  }

  :where(button, a, input, select, textarea, summary, .card, .workspace-card, .home-command-card) {
    transition-duration: 1ms !important;
  }
}