/* Editorial system layer — deliberately loaded after the legacy responsive skin. */
:root {
  --ui-bg: #191a1d;
  --ui-bg-soft: #1d1f22;
  --ui-surface: #232529;
  --ui-surface-raised: #2a2d32;
  --ui-surface-muted: #202226;
  --ui-border: rgba(239, 236, 226, .14);
  --ui-border-soft: rgba(239, 236, 226, .075);
  --ui-text: #f0ede5;
  --ui-text-soft: #c1beb6;
  --ui-muted: #888a83;
  --ui-faint: #666861;
  --ui-primary: #dd675f;
  --ui-primary-strong: #c84d47;
  --ui-primary-soft: rgba(221, 103, 95, .1);
  --ui-blue: #a5b6be;
  --ui-blue-soft: rgba(165, 182, 190, .1);
  --ui-warning: #d1a754;
  --ui-danger: #d65e62;
  --ui-success: #438d6a;
  --ui-market-up: #db5b54;
  --ui-market-up-deep: #9f231f;
  --ui-market-down: #3e956d;
  --ui-market-down-deep: #17603f;
  --ui-radius-sm: 4px;
  --ui-radius: 6px;
  --ui-radius-lg: 8px;
  --ui-shadow: 0 16px 42px rgba(4, 5, 7, .22);
  --ui-header-height: 52px;
  --ui-sidebar-width: 252px;
  --ui-content-max: 1520px;
  --editorial-serif: "Songti SC", STSong, SimSun, Georgia, serif;
  --editorial-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --editorial-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --editorial-grid: rgba(239, 236, 226, .035);
}

html[data-theme="light"] {
  --ui-bg: #f1eee7;
  --ui-bg-soft: #ebe8e1;
  --ui-surface: #f8f6f0;
  --ui-surface-raised: #fffdf8;
  --ui-surface-muted: #eeece5;
  --ui-border: rgba(21, 23, 20, .2);
  --ui-border-soft: rgba(21, 23, 20, .09);
  --ui-text: #151714;
  --ui-text-soft: #464943;
  --ui-muted: #73766f;
  --ui-faint: #94968f;
  --ui-primary: #bd443f;
  --ui-primary-strong: #a8322e;
  --ui-primary-soft: rgba(189, 68, 63, .08);
  --ui-blue: #526b76;
  --ui-blue-soft: rgba(82, 107, 118, .08);
  --ui-warning: #8a641c;
  --ui-danger: #b33b40;
  --ui-success: #2b7353;
  --ui-market-up: #b83632;
  --ui-market-up-deep: #8f1714;
  --ui-market-down: #267351;
  --ui-market-down-deep: #125437;
  --ui-shadow: 0 12px 30px rgba(40, 36, 28, .055);
  --editorial-grid: rgba(21, 23, 20, .04);
}

html,
body {
  background: var(--ui-bg) !important;
}

body {
  color: var(--ui-text) !important;
  font-family: var(--editorial-sans) !important;
  background-image:
    linear-gradient(var(--editorial-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--editorial-grid) 1px, transparent 1px) !important;
  background-size: 78px 78px !important;
  background-attachment: fixed !important;
}

html:not([data-theme="light"]) body {
  background-image:
    radial-gradient(circle at 16% -14%, rgba(255, 255, 255, .045), transparent 32%),
    radial-gradient(circle at 88% -8%, rgba(221, 103, 95, .025), transparent 26%),
    linear-gradient(var(--editorial-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--editorial-grid) 1px, transparent 1px) !important;
}

body::before {
  position: fixed !important;
  inset: 0 !important;
  display: block !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--ui-bg) 88%, transparent), transparent 28%, transparent 72%, color-mix(in srgb, var(--ui-bg) 88%, transparent)) !important;
  opacity: 1 !important;
}

::selection {
  color: var(--ui-bg);
  background: var(--ui-text);
}

/* Compact exchange-style masthead. */
.app-header {
  min-height: var(--ui-header-height) !important;
  padding: 5px clamp(12px, 1.6vw, 24px) !important;
  background: color-mix(in srgb, var(--ui-bg) 92%, transparent) !important;
  border-bottom: 1px solid var(--ui-border) !important;
  backdrop-filter: blur(20px) saturate(110%) !important;
}

.app-brand-row { gap: 10px !important; }
.app-brand-mark {
  width: 34px !important;
  height: 34px !important;
  border-radius: 3px !important;
  border-color: var(--ui-border) !important;
  background: var(--ui-surface) !important;
  box-shadow: none !important;
}

.app-header h1 {
  color: var(--ui-text) !important;
  font-family: var(--editorial-serif) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: .1em !important;
}

.app-brand-subtitle {
  color: var(--ui-muted) !important;
  font-family: var(--editorial-mono);
  font-size: 8px !important;
  letter-spacing: .06em;
}

.app-back-button,
.mobile-menu-trigger {
  border-radius: 3px !important;
}

.global-index-ticker {
  margin-left: 14px !important;
  padding-left: 14px !important;
  border-color: var(--ui-border) !important;
}

.global-index-ticker-track {
  min-height: 21px !important;
  font-family: var(--editorial-mono);
  font-size: 9px !important;
}

.global-index-ticker-segment { gap: 18px !important; padding-right: 18px !important; }
.global-index-ticker-item { gap: 5px !important; }
.global-index-ticker-name { color: var(--ui-text-soft) !important; font-family: var(--editorial-sans); font-weight: 650 !important; }
.global-index-ticker-change.up { color: var(--ui-market-up) !important; }
.global-index-ticker-change.down { color: var(--ui-market-down) !important; }

/* Navigation becomes an index, with thin rules instead of pill blocks. */
.app-shell { min-height: calc(100svh - var(--ui-header-height)) !important; }
.app-sidebar {
  padding: 16px 13px 12px !important;
  gap: 12px !important;
  background: color-mix(in srgb, var(--ui-bg-soft) 95%, transparent) !important;
  border-right-color: var(--ui-border) !important;
  backdrop-filter: blur(18px);
}

.sidebar-title {
  color: var(--ui-text) !important;
  font-family: var(--editorial-serif);
  font-size: 13px !important;
  font-weight: 600 !important;
}

.sidebar-caption,
.nav-copy small { color: var(--ui-faint) !important; }
.sidebar-toggle,
.sidebar-account-pill {
  border-radius: 3px !important;
  box-shadow: none !important;
}

#navTabs { gap: 13px !important; }
.nav-section-label {
  padding: 0 8px 4px !important;
  color: var(--ui-faint) !important;
  font-family: var(--editorial-mono);
  font-size: 8px !important;
  letter-spacing: .16em !important;
}

.nav-section-items { gap: 0 !important; border-top: 1px solid var(--ui-border-soft); }
.nav-item {
  min-height: 43px !important;
  padding: 5px 7px !important;
  grid-template-columns: 30px minmax(0, 1fr) !important;
  gap: 8px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ui-border-soft) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.nav-item:hover {
  padding-left: 11px !important;
  color: var(--ui-text) !important;
  background: color-mix(in srgb, var(--ui-text) 3%, transparent) !important;
}

.nav-item.active {
  color: var(--ui-text) !important;
  background: transparent !important;
}

.nav-item.active::before {
  left: -13px !important;
  width: 3px !important;
  height: 100% !important;
  border-radius: 0 !important;
  background: var(--ui-primary) !important;
}

.nav-icon,
.nav-item.active .nav-icon {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  color: var(--ui-muted) !important;
  background: transparent !important;
}

.nav-item.active .nav-icon { color: var(--ui-primary) !important; }
.nav-copy b { font-size: 12px !important; font-weight: 650 !important; }

/* Page masthead and universal content surfaces. */
.app-content { padding: clamp(22px, 2.3vw, 38px) clamp(18px, 2.8vw, 48px) 54px !important; }
.workspace-header {
  position: relative;
  align-items: flex-end !important;
  margin-bottom: clamp(22px, 3vw, 38px) !important;
  padding: 0 0 clamp(18px, 2vw, 28px) !important;
  border-bottom-color: var(--ui-border) !important;
}

.workspace-eyebrow {
  margin-bottom: 8px !important;
  color: var(--ui-primary) !important;
  font-family: var(--editorial-mono);
  font-size: 8px !important;
  letter-spacing: .19em !important;
}

.workspace-heading h2 {
  color: var(--ui-text) !important;
  font-family: var(--editorial-serif) !important;
  font-size: clamp(34px, 3.25vw, 54px) !important;
  font-weight: 500 !important;
  line-height: 1.03 !important;
  letter-spacing: -.045em !important;
}

#workspacePageTitle:focus,
#workspacePageTitle:focus-visible {
  outline: none !important;
}

.card,
.modal-content,
.auth-modal-content,
.membership-status,
.membership-plan-card,
.membership-disclaimer,
.training-panel,
.training-panel-soft,
[class*="rounded-lg"][class*="border"] {
  border-color: var(--ui-border) !important;
  border-radius: var(--ui-radius) !important;
  background: color-mix(in srgb, var(--ui-surface) 96%, transparent) !important;
  box-shadow: var(--ui-shadow) !important;
}

.card { position: relative; }
.card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 18px;
  width: 34px;
  height: 1px;
  background: var(--ui-primary);
  opacity: .56;
  pointer-events: none;
}

.card:hover {
  border-color: color-mix(in srgb, var(--ui-text) 28%, transparent) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .16) !important;
}

.card h3,
.card h4,
.modal-content h2,
.modal-content h3,
.membership-section-head h3,
.event-page-heading h2,
.event-month-heading h3 {
  color: var(--ui-text) !important;
  font-family: var(--editorial-serif);
  font-weight: 600 !important;
  letter-spacing: -.02em;
}

.font-mono,
[id$="Price"],
[id$="Value"],
[id$="Count"],
.index-value,
.index-change,
td:nth-last-child(-n + 3) {
  font-family: var(--editorial-mono) !important;
  font-variant-numeric: tabular-nums;
}

/* Form controls and actions use square editorial geometry. */
input,
select,
textarea,
.auth-input,
#globalSearch,
#homeWatchlistSearch {
  min-height: 39px !important;
  border-color: var(--ui-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  color: var(--ui-text) !important;
  background: var(--ui-surface-muted) !important;
  box-shadow: none !important;
}

input:focus,
select:focus,
textarea:focus,
.auth-input:focus {
  border-color: var(--ui-primary) !important;
  box-shadow: 0 0 0 2px var(--ui-primary-soft) !important;
}

.btn,
button.ui-subtab,
.ui-subtab {
  border-radius: var(--ui-radius-sm) !important;
  box-shadow: none !important;
}

.btn {
  position: relative;
  min-height: 38px !important;
  font-size: 12px !important;
  font-weight: 680 !important;
  letter-spacing: .01em;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease, transform 180ms ease !important;
}

.btn:hover { transform: translateY(-2px) !important; }
.btn-primary {
  border-color: var(--ui-text) !important;
  color: var(--ui-bg) !important;
  background: var(--ui-text) !important;
}

.btn-primary:hover {
  color: var(--ui-text) !important;
  background: transparent !important;
}

.btn-primary:not(:empty)::after {
  content: "↗";
  display: inline-block;
  margin-left: 8px;
  font-size: 13px;
  transition: transform 180ms ease;
}

.btn-primary:hover::after { transform: translate(2px, -2px); }
.btn-ghost,
.btn-outline {
  border-color: var(--ui-border) !important;
  color: var(--ui-text-soft) !important;
  background: transparent !important;
}
.btn-ghost:hover,
.btn-outline:hover { border-color: var(--ui-text-soft) !important; color: var(--ui-text) !important; background: var(--ui-surface-raised) !important; }
.btn-success { color: #f7f5ed !important; background: var(--ui-success) !important; }
.btn-danger { color: #fff !important; background: var(--ui-danger) !important; }

.ui-subtab-bar {
  padding: 2px !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  background: transparent !important;
}

.ui-subtab {
  color: var(--ui-muted) !important;
  background: transparent !important;
}
.ui-subtab.active,
.ui-subtab[aria-selected="true"],
.ui-subtab[aria-pressed="true"] {
  color: var(--ui-bg) !important;
  background: var(--ui-text) !important;
}

.tag {
  border: 1px solid var(--ui-border) !important;
  border-radius: 999px !important;
  color: var(--ui-muted) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 10px !important;
}
.tag-bullish { color: var(--ui-market-up) !important; border-color: color-mix(in srgb, var(--ui-market-up) 42%, transparent) !important; }
.tag-bearish { color: var(--ui-market-down) !important; border-color: color-mix(in srgb, var(--ui-market-down) 42%, transparent) !important; }

table { border-collapse: collapse; }
th {
  padding-block: 9px !important;
  color: var(--ui-faint) !important;
  font-family: var(--editorial-mono);
  font-size: 8px !important;
  font-weight: 600 !important;
  letter-spacing: .1em;
  text-transform: uppercase;
}
td { padding-block: 10px !important; color: var(--ui-text-soft); border-bottom-color: var(--ui-border-soft) !important; }
tr { border-color: var(--ui-border-soft) !important; }
tr:hover td { background: color-mix(in srgb, var(--ui-text) 2.5%, transparent); }

.modal {
  background: rgba(2, 3, 3, .72) !important;
  backdrop-filter: blur(11px) !important;
}
.modal-content,
.auth-modal-content {
  border-radius: 6px !important;
  box-shadow: 0 34px 90px rgba(0, 0, 0, .35) !important;
}

/* Market overview: asymmetric editorial grid and large primary index rhythm. */
.home-market-grid {
  grid-template-columns: minmax(0, 1.52fr) minmax(300px, .58fr) !important;
  gap: clamp(14px, 1.5vw, 24px) !important;
}
.home-market-main,
.home-watch-column { gap: 14px; }
.home-market-main,
.home-watch-card,
.home-ai-card {
  border-radius: var(--ui-radius) !important;
  border-color: var(--ui-border) !important;
  background: color-mix(in srgb, var(--ui-surface) 96%, transparent) !important;
  box-shadow: var(--ui-shadow) !important;
}
.home-bullbear-stage { border-bottom-color: var(--ui-border) !important; }
.home-bullbear-summary { color: var(--ui-text-soft) !important; font-family: var(--editorial-serif); font-size: 15px !important; }
.home-index-strip { border-top: 1px solid var(--ui-border) !important; border-bottom: 1px solid var(--ui-border) !important; }
.home-index-card {
  min-height: 94px;
  padding: 18px !important;
  border-right: 1px solid var(--ui-border) !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.home-index-card:last-child { border-right: 0 !important; }
.home-index-card .index-label { color: var(--ui-muted) !important; font-family: var(--editorial-mono); font-size: 8px !important; letter-spacing: .1em; }
.home-index-card .index-value { margin-top: 7px; color: var(--ui-text) !important; font-family: var(--editorial-serif) !important; font-size: clamp(22px, 2vw, 32px) !important; }
.home-market-breadth { border-radius: 0 !important; border-color: var(--ui-border) !important; background: transparent !important; }
.home-market-breadth-head strong { font-family: var(--editorial-serif); color: var(--ui-text) !important; }
.home-stock-search-control { border-radius: var(--ui-radius-sm) !important; border-color: var(--ui-border) !important; background: var(--ui-surface) !important; }
.home-watch-card h3,
.home-ai-card h3 { font-size: 16px !important; }

/* Watchlist and monitor share the same restrained panel language. */
#page-watchlist > .card { padding: clamp(18px, 2.3vw, 32px) !important; }
.watchlist-radar-panel,
.watchlist-radar-item,
.monitor-panel,
.monitor-add-tile,
.monitor-add-dialog {
  border-color: var(--ui-border) !important;
  border-radius: var(--ui-radius) !important;
  background: var(--ui-surface) !important;
  box-shadow: none !important;
}
.watchlist-radar-item:hover,
.monitor-panel:hover { border-color: var(--ui-text-soft) !important; }
.monitor-panel-head { border-bottom-color: var(--ui-border) !important; background: var(--ui-surface-muted) !important; }
.monitor-resize-edge::after { background: var(--ui-primary) !important; }
.monitor-drag-placeholder,
.monitor-panel.is-dragging { border-color: var(--ui-primary) !important; }

/* Quant: the search/list column reads as an index, the chart remains still and dominant. */
#page-quant .quant-layout,
#page-quant .quant-workspace,
#page-quant .quant-grid { gap: 12px !important; }
#page-quant .card { box-shadow: none !important; }
#candidateList > *,
#watchlistQuantList > * { border-bottom: 1px solid var(--ui-border-soft) !important; }
#klineChart,
#quantRadarChart,
#qmdKlineChart { background: transparent !important; }

/* Reading pages use generous line spacing and ruled, magazine-like rows. */
#page-reports,
#page-news,
#page-events { max-width: 1280px !important; }
#page-reports > .card,
#page-news > .card { padding: clamp(20px, 3vw, 40px) !important; }
#externalReportsList > *,
#reportsList > *,
#newsList > * {
  border-color: var(--ui-border-soft) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
#externalReportsList > *:hover,
#reportsList > *:hover,
#newsList > *:hover { background: color-mix(in srgb, var(--ui-text) 2.5%, transparent) !important; }
.news-pin-shell {
  border-color: var(--ui-border) !important;
  border-radius: var(--ui-radius) !important;
  background: transparent !important;
  box-shadow: none !important;
}
.news-pin-toggle,
.news-pin-toggle:hover {
  border-bottom-color: var(--ui-border) !important;
  background: color-mix(in srgb, var(--ui-primary) 5%, transparent) !important;
}
.news-pin-list { gap: 0 !important; padding: 0 !important; }
.news-pin-card {
  padding: 14px 16px !important;
  border-width: 0 0 1px 0 !important;
  border-color: var(--ui-border-soft) !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.news-pin-card.is-lead { border-color: var(--ui-border-soft) !important; }
.news-pin-count { color: var(--ui-primary) !important; border-color: color-mix(in srgb, var(--ui-primary) 34%, transparent) !important; background: transparent !important; }
.event-page-heading h2 { font-size: clamp(36px, 4.4vw, 64px) !important; font-weight: 500 !important; }
.event-month-panel,
.event-agenda-panel,
.event-list-panel { border-color: var(--ui-border) !important; border-radius: var(--ui-radius) !important; background: var(--ui-surface) !important; box-shadow: none !important; }
.event-month-grid > *,
.event-timeline > * { border-color: var(--ui-border-soft) !important; }

/* Training, pattern research and backtesting read as one laboratory family. */
#page-training,
#page-patternlab,
#page-backtest { --lab-accent: var(--ui-warning); }
.training-panel,
.training-panel-soft,
.training-strategy-guide,
.patternlab-panel,
.backtest-workspace [class*="rounded"] {
  border-radius: var(--ui-radius) !important;
  border-color: var(--ui-border) !important;
  box-shadow: none !important;
}
.training-kicker,
.patternlab-kicker,
.backtest-workspace label > span { font-family: var(--editorial-mono); letter-spacing: .04em; }
.training-btn-submit {
  border-radius: var(--ui-radius-sm) !important;
  background: var(--ui-text) !important;
  color: var(--ui-bg) !important;
  box-shadow: none !important;
}
#btStatsCards > *,
.training-account-grid > * { border-radius: 0 !important; border-color: var(--ui-border) !important; background: transparent !important; }

/* Account, settings and administration use the same form and status vocabulary. */
.membership-surface,
.settings-page-shell,
.admin-section {
  border-color: var(--ui-border) !important;
  border-radius: var(--ui-radius) !important;
  background: var(--ui-surface) !important;
  box-shadow: none !important;
}
.membership-section-head > div > span { color: var(--ui-primary) !important; font-family: var(--editorial-mono); letter-spacing: .13em; }
.membership-quota-card,
.membership-plan-card { border-radius: var(--ui-radius) !important; border-color: var(--ui-border) !important; box-shadow: none !important; }
#page-admin .card { box-shadow: none !important; }

/* Membership is a compact account workspace, not a second nested landing page. */
body[data-current-page="membership"] #workspaceHeader { display: none !important; }
#page-membership .membership-page-shell {
  max-width: 1280px;
  gap: 18px;
}
#page-membership .membership-mobile-tabs {
  display: flex !important;
  gap: 4px;
  width: fit-content;
  padding: 0;
  border: 0 !important;
  background: transparent !important;
}
#page-membership .membership-mobile-tabs .ui-subtab {
  min-width: 84px;
  justify-content: center;
}
#page-membership .membership-dashboard {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px;
}
#page-membership .membership-surface {
  padding: clamp(18px, 2.2vw, 28px);
  border-radius: 0 !important;
}
#page-membership .membership-rights { grid-column: 1 / span 7; }
#page-membership .membership-invites { grid-column: 8 / -1; }
#page-membership .membership-upgrade { grid-column: 1 / -1; }
#page-membership .membership-quota-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#page-membership .membership-quota-card-wide { grid-column: 1 / -1; }
#page-membership .membership-quota-card {
  min-height: 92px;
  border-width: 1px 0 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}
#page-membership .membership-plan-grid { gap: 18px; }
#page-membership .membership-plan-card {
  min-height: 220px !important;
  padding: 24px !important;
  border-radius: 0 !important;
  background: transparent !important;
}
#page-membership .membership-plan-card.featured {
  background: color-mix(in srgb, var(--ui-primary) 5%, transparent) !important;
}
#page-membership .membership-comparison-table { border-radius: 0; }
#page-membership .membership-comparison-row > * { padding: 13px 16px; }

/* Market tone remains A-share red-up and green-down, including utility classes. */
.text-red-300,
.text-red-400,
.text-red-500 { color: var(--ui-market-up) !important; }
.text-emerald-300,
.text-emerald-400,
.text-emerald-500,
.text-green-300,
.text-green-400 { color: var(--ui-market-down) !important; }
.text-white,
.text-slate-100,
.text-slate-200 { color: var(--ui-text) !important; }
.text-slate-300,
.text-slate-400 { color: var(--ui-text-soft) !important; }
.text-slate-500,
.text-slate-600 { color: var(--ui-muted) !important; }

/* Site-wide reveal system; JS only registers stable content surfaces. */
body.motion-ready .motion-reveal {
  opacity: 0;
  transform: translateY(24px);
  clip-path: inset(0 0 17% 0);
}

body.motion-ready .motion-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  clip-path: inset(0 0 0 0);
  transition:
    opacity 640ms var(--motion-delay, 0ms) cubic-bezier(.2, .75, .18, 1),
    transform 640ms var(--motion-delay, 0ms) cubic-bezier(.2, .75, .18, 1),
    clip-path 640ms var(--motion-delay, 0ms) cubic-bezier(.2, .75, .18, 1),
    border-color 180ms ease,
    box-shadow 180ms ease;
}

body.motion-ready .workspace-heading.is-page-entering h2 {
  animation: editorial-title-reveal 720ms cubic-bezier(.2, .75, .18, 1) both;
}
body.motion-ready .workspace-heading.is-page-entering p,
body.motion-ready .workspace-heading.is-page-entering .workspace-eyebrow {
  animation: editorial-copy-reveal 560ms 120ms cubic-bezier(.2, .75, .18, 1) both;
}
.number-updated { animation: editorial-number-pulse 480ms ease both; }

@keyframes editorial-title-reveal {
  from { opacity: 0; transform: translateY(28px); clip-path: inset(0 0 50% 0); }
  to { opacity: 1; transform: translateY(0); clip-path: inset(0 0 0 0); }
}
@keyframes editorial-copy-reveal {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes editorial-number-pulse {
  0% { opacity: .45; transform: translateY(5px); }
  100% { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1080px) {
  .home-market-grid { grid-template-columns: minmax(0, 1fr) minmax(270px, .5fr) !important; }
}

@media (max-width: 860px) {
  body { background-size: 54px 54px !important; }
  .app-header {
    display: flex !important;
    width: 100% !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    padding-inline: 10px !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    overflow: hidden !important;
  }
  .app-brand-mark { width: 32px !important; height: 32px !important; }
  .app-brand-subtitle { display: block !important; }
  .app-brand-row {
    height: 38px !important;
    max-height: 38px !important;
    flex: 0 0 auto !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    overflow: hidden !important;
  }
  .global-index-ticker {
    display: block !important;
    min-width: 0 !important;
    height: 24px !important;
    max-height: 24px !important;
    margin-left: 8px !important;
    padding-left: 8px !important;
    flex: 1 1 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }
  .global-index-ticker-viewport {
    display: block !important;
    width: 100% !important;
    height: 24px !important;
    max-height: 24px !important;
    overflow: hidden !important;
  }
  .global-index-ticker-track {
    display: flex !important;
    width: max-content !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    overflow: visible !important;
    white-space: nowrap !important;
  }
  .global-index-ticker-segment {
    display: flex !important;
    height: 24px !important;
    flex: 0 0 auto !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    white-space: nowrap !important;
  }
  .global-index-ticker-item {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: baseline !important;
    white-space: nowrap !important;
  }
  .app-sidebar { padding: 14px !important; }
  .app-content { padding: 20px 12px 84px !important; }
  .workspace-header { margin-bottom: 20px !important; padding-bottom: 16px !important; }
  .workspace-heading h2 { font-size: 34px !important; }
  .workspace-heading p { font-size: 11px !important; }
  .home-market-grid { grid-template-columns: 1fr !important; }
  .card { box-shadow: none !important; }
  .mobile-bottom-nav {
    border-top: 1px solid var(--ui-border) !important;
    background: color-mix(in srgb, var(--ui-bg) 92%, transparent) !important;
    backdrop-filter: blur(18px) !important;
  }
  .mobile-bottom-item { color: var(--ui-muted) !important; }
  .mobile-bottom-item.active { color: var(--ui-primary) !important; background: transparent !important; }
  .mobile-bottom-item.active::before { border-radius: 0 !important; background: var(--ui-primary) !important; }
}

@media (max-width: 520px) {
  .app-brand-copy { max-width: 78px !important; }
  .app-brand-subtitle { overflow: hidden; text-overflow: ellipsis; }
  .workspace-heading h2 { font-size: 31px !important; }
  .home-index-strip { grid-template-columns: repeat(3, 1fr) !important; }
  .home-index-card { min-height: 78px; padding: 12px 8px !important; }
  .home-index-card .index-value { font-size: 18px !important; }
  .home-index-card .index-label { font-size: 7px !important; }
  #page-reports > .card,
  #page-news > .card { padding: 16px !important; }
  .btn-primary:not(:empty)::after { margin-left: 5px; }
}

@media (max-width: 980px) {
  #page-membership .membership-dashboard { grid-template-columns: 1fr; }
  #page-membership .membership-rights,
  #page-membership .membership-invites,
  #page-membership .membership-upgrade { grid-column: auto; }
}

@media (max-width: 680px) {
  #page-membership .membership-page-shell { gap: 12px; }
  #page-membership .membership-mobile-tabs {
    position: sticky;
    top: calc(var(--ui-header-height) - 1px);
    z-index: 12;
    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    padding: 6px;
    border-bottom: 1px solid var(--ui-border) !important;
    background: color-mix(in srgb, var(--ui-bg) 94%, transparent) !important;
    backdrop-filter: blur(14px);
  }
  #page-membership .membership-mobile-tabs .ui-subtab { min-width: 0; }
  #page-membership .membership-surface { padding: 18px; }
  #page-membership .membership-quota-grid,
  #page-membership .membership-plan-grid { grid-template-columns: 1fr; }
  #page-membership .membership-quota-card-wide { grid-column: auto; }
  #page-membership .membership-plan-card { min-height: 205px !important; padding: 20px !important; }
  #page-membership .membership-comparison-row {
    grid-template-columns: minmax(104px, 1.2fr) repeat(2, minmax(82px, 1fr));
  }
  #page-membership .membership-comparison-row > * { padding: 10px 8px; font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  body.motion-ready .motion-reveal,
  body.motion-ready .motion-reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  .btn:hover,
  .card:hover { transform: none !important; }
}