/*
 * Page structure: compact masthead -> command bar -> group/filter rail ->
 * portfolio summary -> repeated fund workspaces. Visual theme: calm instrument
 * panel, using flat neutral surfaces and steel-blue interaction states.
 */
:root {
  --fund-page: #f4f6f8;
  --fund-surface: #ffffff;
  --fund-surface-muted: #f7f8fa;
  --fund-surface-subtle: #fafbfc;
  --fund-line: #d8dee6;
  --fund-line-strong: #c4ccd7;
  --fund-text: #1d2633;
  --fund-copy: #4f5b6b;
  --fund-muted: #788394;
  --fund-accent: #4f86c6;
  --fund-accent-strong: #2f6fab;
  --fund-accent-soft: #e4f0fb;
  --fund-up: #d84a55;
  --fund-down: #218a75;
  --fund-danger-soft: #fff3f3;
  --fund-radius-panel: 14px;
  --fund-radius-control: 10px;
  --fund-radius-small: 8px;
  --fund-data: "Geist", "Inter", Arial, sans-serif;
  --fund-ui: "MiSans", "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}

html,
body {
  background: var(--fund-page) !important;
  background-image: none !important;
  color: var(--fund-text) !important;
  font-family: var(--fund-ui) !important;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

body :where(.masthead, .shell, .section, .fund-card, .modal, .toast, .suggestions) {
  border: 1px solid var(--fund-line) !important;
  border-radius: var(--fund-radius-panel) !important;
  background: var(--fund-surface) !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.page {
  width: min(1760px, calc(100vw - 32px)) !important;
  max-width: 1760px !important;
  padding: 16px 0 32px !important;
}

.masthead {
  align-items: center !important;
  margin-bottom: 12px !important;
  padding: 18px 20px !important;
}

.eyebrow {
  margin-bottom: 6px !important;
  color: var(--fund-accent-strong) !important;
  font: 700 10px/1 var(--fund-data) !important;
  letter-spacing: .08em !important;
}

.eyebrow::before { background: var(--fund-accent) !important; }

h1 {
  color: var(--fund-text) !important;
  font-size: clamp(26px, 3vw, 38px) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: -.02em !important;
}

h1 em { color: var(--fund-accent-strong) !important; font-style: normal !important; }

.subtitle {
  max-width: 920px !important;
  margin-top: 7px !important;
  color: var(--fund-copy) !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}

.status {
  min-width: 238px !important;
  color: var(--fund-muted) !important;
  font: 500 11px/1.75 var(--fund-data) !important;
  font-variant-numeric: tabular-nums;
}

.status #refreshStatus { color: var(--fund-accent-strong) !important; font-weight: 650 !important; }

.shell { margin-bottom: 8px !important; padding: 10px !important; }

.toolbar {
  grid-template-columns: minmax(280px, 1fr) minmax(150px, 220px) auto !important;
  gap: 8px !important;
}

.search-box input,
.control,
.num-input,
textarea,
.btn,
.chip,
.icon-btn,
.tag {
  border: 1px solid var(--fund-line-strong) !important;
  border-radius: var(--fund-radius-control) !important;
  background: var(--fund-surface) !important;
  background-image: none !important;
  color: var(--fund-text) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.search-box input,
.control,
.num-input { height: 38px !important; }

.search-box input:focus,
.control:focus,
.num-input:focus,
textarea:focus {
  border-color: var(--fund-accent) !important;
  box-shadow: 0 0 0 3px rgba(79, 134, 198, .14) !important;
}

.actions { gap: 6px !important; }

.btn,
.chip,
.icon-btn {
  min-height: 38px !important;
  padding-inline: 12px !important;
  transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease !important;
}

.btn:hover,
.chip:hover,
.icon-btn:hover {
  transform: none !important;
  border-color: var(--fund-accent) !important;
  background: var(--fund-surface-muted) !important;
}

.btn.primary,
.chip.active,
.segmented button.active {
  border-color: var(--fund-accent) !important;
  background: var(--fund-accent-soft) !important;
  color: var(--fund-accent-strong) !important;
}

.btn.danger { border-color: #e3c3c6 !important; color: #b7404a !important; }
.btn.danger:hover { background: var(--fund-danger-soft) !important; }
.btn:disabled { cursor: wait; opacity: .62; }

.refresh-setting {
  display: inline-flex !important;
  align-items: center;
  min-height: 38px;
  padding: 4px 8px !important;
  white-space: nowrap;
}

.refresh-setting .num-input { width: 58px !important; height: 28px !important; margin: 0 5px !important; padding-inline: 6px !important; }

.fund-viewbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  padding: 6px 8px;
  border: 1px solid var(--fund-line);
  border-radius: var(--fund-radius-panel);
  background: var(--fund-surface);
}

.tabs {
  margin: 0 !important;
  gap: 2px !important;
  padding: 3px !important;
  border: 1px solid var(--fund-line) !important;
  border-radius: var(--fund-radius-control) !important;
  background: var(--fund-surface-muted) !important;
}
.chip { min-height: 32px !important; padding-inline: 10px !important; color: var(--fund-copy) !important; }
.chip small { margin-left: 4px; color: inherit !important; font-family: var(--fund-data); }

.view-controls { display: flex; align-items: center; gap: 8px; }
.segmented { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--fund-line) !important; border-radius: var(--fund-radius-control) !important; background: var(--fund-surface-muted) !important; }
.segmented button { min-height: 28px; padding: 0 10px; border: 1px solid transparent; border-radius: var(--fund-radius-small); background: transparent; color: var(--fund-copy); cursor: pointer; }
.sort-select { width: 150px !important; height: 34px !important; }

.summary-grid {
  grid-template-columns: repeat(5, minmax(140px, 1fr)) !important;
  gap: 8px !important;
  margin-bottom: 8px !important;
}

.section { padding: 12px 14px !important; }
.metric-label { margin-bottom: 5px !important; color: var(--fund-muted) !important; font-size: 11px !important; letter-spacing: 0 !important; text-transform: none !important; }
.metric-value { color: var(--fund-text) !important; font: 600 21px/1.2 var(--fund-data) !important; font-variant-numeric: tabular-nums; }
.metric-sub { margin-top: 5px !important; color: var(--fund-muted) !important; font-size: 11px !important; }
.up, .metric-value.up { color: var(--fund-up) !important; }
.down, .metric-value.down { color: var(--fund-down) !important; }

.grid { gap: 8px !important; }
.grid > .fund-card:only-child { grid-column: 1 / -1; }
.fund-card { padding: 14px !important; overflow: hidden !important; }
.fund-card::before,
.fund-card::after,
.shell::after,
.section::after { content: none !important; display: none !important; }
.fund-card.is-loading { border-color: #b9c8d7 !important; }
.fund-card.has-error { border-color: #e2b9bd !important; }

.fund-head { margin-bottom: 10px !important; }
.fund-name { color: var(--fund-text) !important; font-size: 16px !important; font-weight: 650 !important; }
.fund-code { color: var(--fund-muted) !important; font: 500 11px/1.4 var(--fund-data) !important; }
.tag-row { gap: 4px !important; }
.tag { padding: 4px 7px !important; color: var(--fund-muted) !important; font-size: 10px !important; }
.tag.status-loading { border-color: #b9c8d7 !important; color: var(--fund-accent-strong) !important; }
.tag.status-error { border-color: #e2b9bd !important; color: #b7404a !important; }

.stats { gap: 6px !important; margin-bottom: 8px !important; }
.stat { padding: 9px 10px !important; border: 1px solid var(--fund-line) !important; border-radius: var(--fund-radius-control) !important; background: var(--fund-surface-muted) !important; }
.stat label { margin-bottom: 5px !important; color: var(--fund-muted) !important; font-size: 10px !important; }
.stat strong { color: var(--fund-text) !important; font: 600 16px/1.2 var(--fund-data) !important; font-variant-numeric: tabular-nums; }

.intraday-panel { margin: 8px 0 !important; padding: 10px !important; border: 1px solid var(--fund-line) !important; border-radius: var(--fund-radius-control) !important; background: var(--fund-surface-subtle) !important; }
.intraday-head { margin-bottom: 6px !important; color: var(--fund-muted) !important; font-size: 11px !important; }
.intraday-head b { color: var(--fund-text) !important; font-weight: 600 !important; }
.intraday-chart,
.intraday-img,
.intraday-empty { width: 100% !important; height: 150px !important; border-radius: var(--fund-radius-small) !important; background: var(--fund-surface) !important; background-image: none !important; }

.card-actions { margin: 8px 0 !important; gap: 8px !important; }
.hold-form { gap: 6px !important; }
.hold-form .num-input { min-width: 0; }
.holdings { margin-top: 8px !important; padding-top: 8px !important; border-color: var(--fund-line) !important; }
.holdings-head { color: var(--fund-muted) !important; font-size: 11px !important; }
table { color: var(--fund-text) !important; font-family: var(--fund-ui) !important; }
th, td { padding: 7px 8px !important; border-color: var(--fund-line) !important; }
th { background: var(--fund-surface-muted) !important; color: var(--fund-copy) !important; }

.suggestions { background: var(--fund-surface) !important; }
.suggestion { color: var(--fund-text) !important; }
.suggestion:hover { background: var(--fund-accent-soft) !important; }
.empty { border: 1px dashed var(--fund-line-strong) !important; border-radius: var(--fund-radius-panel) !important; background: var(--fund-surface) !important; color: var(--fund-muted) !important; }
.toast { background: var(--fund-text) !important; color: #fff !important; box-shadow: 0 10px 28px rgba(29, 38, 51, .16) !important; }
.modal-backdrop { background: rgba(29, 38, 51, .28) !important; }
.modal { box-shadow: 0 18px 48px rgba(29, 38, 51, .16) !important; }
.foot { margin-top: 12px !important; color: var(--fund-muted) !important; }
.foot a { color: var(--fund-accent-strong) !important; }
.spinner { border-color: rgba(96, 127, 159, .24) !important; border-top-color: var(--fund-accent-strong) !important; }

html body .fund-viewbar .tabs .chip {
  border: 1px solid transparent !important;
  border-radius: var(--fund-radius-small) !important;
  background: transparent !important;
  color: var(--fund-copy) !important;
}

html body .fund-viewbar .tabs .chip.active,
html body .fund-viewbar .segmented button.active {
  border-color: var(--fund-accent) !important;
  border-radius: var(--fund-radius-small) !important;
  background: var(--fund-accent-soft) !important;
  color: var(--fund-accent-strong) !important;
}

html body .fund-viewbar .segmented button:not(.active) {
  border-color: transparent !important;
  background: transparent !important;
  color: var(--fund-copy) !important;
}

@media (max-width: 1180px) {
  .toolbar { grid-template-columns: minmax(260px, 1fr) 190px !important; }
  .toolbar > .actions { grid-column: 1 / -1; justify-content: flex-start !important; }
  .fund-viewbar { align-items: flex-start; flex-direction: column; }
  .view-controls { width: 100%; justify-content: space-between; }
}

@media (max-width: 760px) {
  .page { width: min(100% - 20px, 1760px) !important; padding-top: 10px !important; }
  .masthead { align-items: flex-start !important; padding: 14px !important; }
  .status { min-width: 0 !important; text-align: left !important; }
  .toolbar { grid-template-columns: 1fr !important; }
  .toolbar > .actions { grid-column: auto; }
  .view-controls { align-items: stretch; flex-direction: column; }
  .segmented { display: grid; grid-template-columns: repeat(3, 1fr); }
  .sort-select { width: 100% !important; }
  .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .summary-grid .section:last-child { grid-column: 1 / -1; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .card-actions, .hold-form { display: grid !important; grid-template-columns: 1fr !important; }
  .card-actions > .actions { justify-content: stretch !important; }
  .card-actions > .actions > * { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}