:root {
  --brand-gold: #bd963e;
  --brand-gold-bright: #d5b45e;
  --brand-silver: #c8c9c8;
  --ink: #201f1c;
  --muted: #77746c;
  --navy: #10100f;
  --blue: #5579b7;
  --line: #dcd8cf;
  --panel: #fffefa;
  --bg: #f4f2ed;
}

body[data-theme="dark"] {
  --ink: #f2eee4;
  --muted: #b5b0a5;
  --navy: #080808;
  --blue: #9db7e5;
  --line: #383633;
  --panel: #171615;
  --bg: #0c0c0b;
  --green: #79b89e;
  --red: #ee777a;
  --orange: #e0b45c;
  color-scheme: dark;
}

.status-dot.green {
  background: #42b883;
}

.brand { color: #f8f6f0; }
.brand-wordmark { display: block; font-weight: 900; letter-spacing: -.01em; line-height: 1.25; white-space: normal; overflow-wrap: break-word; }
.admin-brand { margin: 0 0 27px; padding: 2px 6px; font-size:18px; }
.auth-brand-name { margin: 0 0 24px; font-size:25px; }
.member-topbar { background: #080808; border-bottom-color: #4a4027; }
.member-brand { width: auto; min-width: 120px; padding: 0; font-size:25px; }
.member-topbar-right { gap: 10px; }
.sidebar { background: #080808; }
.side-caption { color: #9b8a5e; }
.nav-item { color: #c6c2b9; }
.nav-item.active { background: #282318; color: #f5e5b8; box-shadow: inset 2px 0 var(--brand-gold-bright); }
.nav-item.active .nav-icon, .nav-icon { color: var(--brand-gold-bright); }
.nav-item:hover { background: #211e17; color: #fff9e9; }
.sidebar-status { border-color: #51452a; background: #17140f; }
.sidebar-status strong { color: #eee6d4; }
.demo-ribbon { background: #17140d; color: #f1dfac; }
.demo-dot { background: var(--brand-gold-bright); box-shadow: 0 0 0 3px #6b5426; }
.topbar { border-bottom-color: var(--line); }
.button:hover, .text-button, .detail-source-link { color: #987126; }
.button:focus-visible, .theme-toggle:focus-visible, .member-font-controls button:focus-visible { outline: 2px solid var(--brand-gold); outline-offset: 2px; }
.tab.active, .member-tab.active { color: #70541b; background: #f2ead5; box-shadow: inset 0 0 0 1px #dfc98f; }
.candidate.selected, .candidate:hover { background: #f5f0e4; }
.candidate.selected { box-shadow: inset 2px 0 var(--brand-gold); }
.candidate-rank, .demo-candidate .candidate-rank { background: #efe8d8; color: #896b2b; }
.stock-score b, .strategy-badge, .lane-number, .department-summary strong { color: #8b6b24; }
.member-demo-chip { background: #302718; color: #f0d992; }
.member-demo-chip i { background: var(--brand-gold-bright); }
.member-data-notice { background: #f7f1df; border-color: #e4d6ae; color: #5f4a1d; }
.member-data-notice span { color: #79683d; }
.member-tab.active { background: #f2ead5; }
.member-candidate-card.selected { border-color: #c8a650; box-shadow: 0 0 0 2px #c8a65024; }
.member-select-label, .market-news-link { color: #89691f; }
.market-news-rank { background: #f0e8d6; color: #84651e; }
.chart-intervals button.active { border-color: var(--brand-gold); background: #f2ead5; color: #70541b; }
.member-risk-plan .member-plan-cell.risk { background: #fff8f1; }
.tag-demo { background: #f1ead8; color: #775b1d; }
.tag-blue { background: #edf0f4; color: #546985; }
.tag-orange { background: #f7edda; color: #8c6827; }
.connection-banner { background: #f3eedf; border-color: #e4d7b0; color: #6f571e; }
.connection-banner span { color: #85734b; }
.tabs { background: #e9e5dc; }
.member-tabs { background: #eeeadf; }
.member-stock-name-line strong, .stock-identity h3, .page-heading h1 { color: var(--ink); }
.theme-toggle:hover, .button:hover { border-color: var(--brand-gold); }

.member-font-controls { display: inline-flex; align-items: center; gap: 4px; padding: 3px; border: 1px solid #5c502f; border-radius: 8px; background: #17140f; color: #ded5be; white-space: nowrap; max-width: 100%; }
.member-font-controls { --ui-font-scale: 1; }
.member-font-controls > span { padding: 0 5px; font-size:13px; }
.member-font-controls button { min-width: 1.95rem; min-height: 1.8rem; padding: 2px 5px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: #eee7d7; font:700 14px var(--font); cursor: pointer; }
.member-font-controls button[data-member-font-size="xlarge"] { font-size:13px; }
.member-font-controls button[data-member-font-size="xxlarge"] { min-width: 2.7rem; font-size:12px; }
.member-font-controls button:hover { border-color: #79653a; }
.member-font-controls button.active { border-color: var(--brand-gold-bright); background: #3a301b; color: #ffe7a0; }
.admin-font-controls { flex-shrink: 0; }

.sector-risk-summary { margin: 0 0 12px; padding: 14px; border: 1px solid #d8c58c; border-radius: 8px; background: #f7f2e4; color: #2b281f; }
.sector-risk-summary[hidden] { display: none !important; }
.sector-summary-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 7px 14px; }
.sector-summary-heading strong { color: #795d1e; font-size:16px; }
.sector-summary-heading span, .sector-summary-foot { color: #756b55; font-size:13px; }
.sector-summary-copy { margin: 9px 0 12px; color: #49463e; font-size:14px; line-height: 1.65; }
.sector-representatives { display: grid; grid-template-columns: repeat(auto-fit,minmax(175px,1fr)); gap: 7px; }
.sector-representative { min-width: 0; padding: 9px 10px; border: 1px solid #e3dbc5; border-radius: 6px; background: #fffdf7; }
.sector-representative strong, .sector-representative b, .sector-representative small { display: block; }
.sector-representative strong { color: #302d25; font-size:14px; }
.sector-representative b { margin-top: 3px; color: #5579b7; font-size:14px; }
.sector-representative small { margin-top: 2px; color: #746d5d; font-size:12px; }
.sector-summary-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 7px; margin-top: 10px; padding-top: 9px; border-top: 1px solid #e2d7b7; }
.sector-summary-foot a { color: #80601d; font-weight: 700; text-decoration: none; }
.sector-summary-foot a:hover { text-decoration: underline; }
.detail-panel.sector-mode .chart-wrap { display: none; }
.member-chart-panel.sector-mode [data-chart-widget="member"],
.member-chart-panel.sector-mode .member-chart-label,
.member-chart-panel.sector-mode .member-chart-tools-note,
.member-chart-panel.sector-mode #member-indicator-status,
.member-chart-panel.sector-mode .member-chart,
.member-chart-panel.sector-mode .member-chart-foot { display: none !important; }
.member-chart-panel.sector-mode .sector-risk-summary { margin-top: 4px; }
.sector-candidate .member-stock-name-line strong { color: #70541b; }

body[data-theme="dark"] .sidebar-status { background: #15130e; border-color: #4b4029; }
body[data-theme="dark"] .member-data-notice { background: #211c11; border-color: #574722; color: #f1dfac; }
body[data-theme="dark"] .member-data-notice span { color: #cfbf91; }
body[data-theme="dark"] .member-demo-chip { background: #302615; color: #f2dd9a; }
body[data-theme="dark"] .member-tab.active, body[data-theme="dark"] .tab.active { background: #342b18; color: #ffdf89; box-shadow: inset 0 0 0 1px #7b6535; }
body[data-theme="dark"] .candidate.selected, body[data-theme="dark"] .candidate:hover { background: #242116; }
body[data-theme="dark"] .candidate.selected { box-shadow: inset 2px 0 var(--brand-gold-bright); }
body[data-theme="dark"] .member-candidate-card.selected { border-color: #c9a84f; box-shadow: 0 0 0 2px #c9a84f2a; }
body[data-theme="dark"] .member-font-controls { background: #15130e; border-color: #574a2c; color: #eee2c3; }
body[data-theme="dark"] .member-font-controls button { color: #f0e8d7; }
body[data-theme="dark"] .member-font-controls button.active { background: #3a301b; color: #ffe7a0; }
body[data-theme="dark"] .theme-toggle, body[data-theme="dark"] .button { background: #1c1a16; color: #eee7d8; border-color: #514a3a; }
body[data-theme="dark"] .button:hover, body[data-theme="dark"] .theme-toggle:hover { background: #2a2519; border-color: #a9893e; color: #fff1c5; }
body[data-theme="dark"] .tag-demo { background: #342b19; color: #f0d780; }
body[data-theme="dark"] .tag-blue { background: #242a31; color: #c7d4e6; }
body[data-theme="dark"] .tag-orange { background: #352b19; color: #f0d48a; }
body[data-theme="dark"] .demo-candidate .candidate-rank { background: #342b19; color: #f0d780; }
body[data-theme="dark"] .connection-banner { background: #211d13; border-color: #514328; color: #f0dfae; }
body[data-theme="dark"] .connection-banner span { color: #cabd99; }
body[data-theme="dark"] .tabs, body[data-theme="dark"] .member-tabs { background: #171613; }
body[data-theme="dark"] .chart-intervals button.active { background: #342b19; border-color: #ad8d40; color: #f6df9d; }
body[data-theme="dark"] .member-select-label, body[data-theme="dark"] .market-news-link { color: #e4c568; }
body[data-theme="dark"] .sector-risk-summary { background: #211d13; border-color: #68552d; color: #e9e1d0; }
body[data-theme="dark"] .sector-summary-heading strong { color: #f2d37d; }
body[data-theme="dark"] .sector-summary-heading span, body[data-theme="dark"] .sector-summary-foot { color: #c1b797; }
body[data-theme="dark"] .sector-summary-copy { color: #ddd5c3; }
body[data-theme="dark"] .sector-representative { background: #171612; border-color: #49412e; }
body[data-theme="dark"] .sector-representative strong { color: #f1ecde; }
body[data-theme="dark"] .sector-representative b { color: #9db7e5; }
body[data-theme="dark"] .sector-representative small { color: #c0b9a8; }
body[data-theme="dark"] .sector-summary-foot { border-top-color: #51452b; }
body[data-theme="dark"] .sector-summary-foot a { color: #e4c568; }

/* The admin dashboard hosts the same member screen used by the preview. */
body.dashboard-member-board > .demo-ribbon,
body.dashboard-member-board .app-shell > .main-content > .topbar { display: none !important; }
body.dashboard-member-board .app-shell { min-height: 100vh; }
body.dashboard-member-board .app-shell > .main-content > #view-overview { max-width: none; margin: 0; padding: 0; }
body.dashboard-member-board #overview-member-host > #member-shell { width: 100%; min-height: 100vh; }
body.dashboard-member-board #overview-member-host .member-content { max-width: none; padding: 30px clamp(18px,2.6vw,40px) 24px; }
body.dashboard-member-board #overview-member-host .member-topbar { padding-left: clamp(18px,2.6vw,40px); padding-right: clamp(18px,2.6vw,40px); }

@media(max-width:900px) {
  .member-topbar-right { gap: 7px; }
  .member-font-controls > span { display: none; }
  .member-account { display: none; }
}
@media(max-width:1100px) {
  .topbar-right { gap: 8px; }
  .admin-font-controls > span { display: none; }
}
@media(max-width:700px) {
  .admin-brand { margin-bottom: 20px; }
  .member-brand { min-width: 90px; font-size:22px; }
  .member-font-controls { gap: 2px; flex-wrap: wrap; }
  .member-font-controls button { min-width: 1.95rem; min-height: 1.8rem; height: auto; }
}
@media(max-width:560px) {
  .admin-font-controls { gap: 2px; padding: 2px; }
  .admin-font-controls button { min-width: 1.95rem; min-height: 1.8rem; height: auto; }
  .admin-font-controls button[data-member-font-size="xlarge"] { font-size:12px; }
  .admin-font-controls button[data-member-font-size="xxlarge"] { min-width: 2.7rem; font-size:12px; }
}

@media(max-width:850px) {
  .topbar { height: auto; min-height: 62px; padding-top: 8px; padding-bottom: 8px; gap: 8px; flex-wrap: wrap; }
  .breadcrumbs { flex: 1 1 100%; }
  .topbar-right { width: 100%; flex-wrap: wrap; justify-content: space-between; gap: 6px; }
  .account-identity { display: none; }
  .admin-font-controls > span { display: none; }
}
@media(max-width:560px) {
  .topbar { align-items: flex-start; padding-right: 12px; padding-left: 12px; }
  .topbar-right { align-items: center; }
  .member-topbar { height: auto; min-height: 60px; padding: 10px 14px; gap: 8px; flex-wrap: wrap; }
  .member-topbar-right { flex: 1 1 100%; max-width: 100%; justify-content: space-between; flex-wrap: wrap; }
  .member-font-controls { white-space: normal; }
  .member-account { display: none; }
  .member-tabs { flex-wrap: wrap; width: 100%; }
  .member-tab { flex: 1 1 auto; min-width: 4.5rem; white-space: nowrap; }
  .member-panel-heading { flex-wrap: wrap; }
  .member-scan-controls { width: 100%; display: flex; align-items: center; justify-content: space-between; justify-items: initial; flex-wrap: wrap; gap: 7px; }
  .member-scan-controls .button { white-space: nowrap; }
  .member-heading-actions { width: 100%; justify-content: flex-start; }
  .department-summary { grid-template-columns: 1fr; }
  .department-list { grid-template-columns: 1fr; }
  .department-card { min-width: 0; }
  .department-card p { overflow-wrap: anywhere; }
  .tabs { width: 100%; max-width: 100%; flex-wrap: wrap; }
  .tab { flex: 1 1 auto; white-space: nowrap; }
  .section-heading, .page-heading { align-items: flex-start; flex-wrap: wrap; gap: 10px; }
}

/* Keep member cards readable in the narrower content column beside the desktop menu. */
@media(max-width:1500px) {
  .member-board-grid { grid-template-columns: minmax(0,1fr); grid-template-areas: none; }
  .member-chart-panel { position: static; }
}

/* Reflow the whole workspace for phone sized windows instead of squeezing labels. */
@media(max-width:700px) {
  html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
  .app-shell { display: block; min-height: 100vh; }
  .sidebar { width: 100%; height: auto; padding: 10px 12px 8px; }
  .sidebar > .brand { margin: 0; padding: 2px 5px 10px; }
  .sidebar .brand-mark { width: 31px; height: 31px; }
  .side-caption, .sidebar-bottom { display: none; }
  .side-nav { display: flex; gap: 5px; overflow-x: auto; overscroll-behavior-x: contain; padding: 0 0 5px; }
  .nav-item { flex: 0 0 auto; min-height: 40px; height: auto; padding: 8px 10px; gap: 7px; white-space: nowrap; }
  .main-content { width: 100%; min-width: 0; }
  .view { width: 100%; max-width: 100%; padding: 20px 12px 24px; }
  .content-grid, .member-board-grid, .strategy-cards, .department-list, .account-admin-grid { grid-template-columns: minmax(0,1fr) !important; }
  .member-board-grid { grid-template-areas: none; }
  .ranking-panel, .detail-panel, .member-recommendations, .member-chart-panel, .market-news-panel { min-width: 0; padding: 12px; }
  .candidate { grid-template-columns: 26px minmax(0,1fr) auto; gap: 7px; }
  .candidate-note { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
  .member-topbar { height: auto; min-height: 0; padding: 10px 12px; flex-wrap: wrap; gap: 8px; }
  .member-topbar-right { width: 100%; max-width: 100%; flex: 1 1 100%; justify-content: space-between; flex-wrap: wrap; gap: 7px; }
  .member-brand { min-width: 0; }
  .member-font-controls { max-width: 100%; }
  .member-content { width: 100%; max-width: 100%; padding: 20px 12px 24px; }
  .member-heading { align-items: flex-start; flex-direction: column; gap: 10px; }
  .member-heading-actions { width: 100%; justify-content: flex-start; }
  .member-panel-heading { align-items: flex-start; flex-wrap: wrap; }
  .member-tabs { width: 100%; flex-wrap: wrap; }
  .member-tab { flex: 1 1 auto; min-width: 4.5rem; white-space: nowrap; }
  .member-stock-select { grid-template-columns: minmax(0,1fr); }
  .member-key-prices { grid-column: auto; grid-row: auto; grid-template-columns: repeat(3,minmax(0,1fr)); }
  .member-select-label { grid-column: auto; grid-row: auto; justify-self: start; }
  .member-analysis-item { grid-template-columns: minmax(70px,0.28fr) minmax(0,0.72fr); gap: 7px; }
  .member-chart-label { align-items: flex-start; flex-direction: column; }
  .chart-label-actions, .chart-intervals { flex-wrap: wrap; }
  .chart-interval-title, .chart-date-control { white-space: normal; }
  .chart-date-control input { max-width: 100%; }
  .member-evidence-grid { grid-template-columns: minmax(0,1fr); }
  .member-footer { flex-wrap: wrap; }
}

@media(max-width:420px) {
  .member-plan-grid { grid-template-columns: minmax(0,1fr); }
  .member-plan-cell, .member-plan-cell:nth-child(2n), .member-plan-cell:nth-child(4n) { border-right: 0; border-bottom: 1px solid var(--line); }
  .member-plan-cell:last-child { border-bottom: 0; }
  .member-key-prices { grid-template-columns: minmax(0,1fr); }
  .member-font-controls { gap: 1px; padding: 2px; }
  .member-font-controls button { min-width: 2rem; padding: 3px 4px; }
  .member-demo-chip { white-space: normal; }
  .connection-banner { align-items: flex-start; flex-wrap: wrap; }
  .connection-chip { white-space: normal; }
}

/* Keep the member tabs visible in both preview and the integrated dashboard. */
.member-board-grid > * { min-width: 0; }
.member-panel-heading { min-width: 0; }
.member-recommendations { container: member-ranking / inline-size; }
.member-recommendations .member-panel-heading {
  align-items: flex-start;
  flex-wrap: wrap;
}
.member-recommendations .member-panel-heading > div:first-child {
  flex: 1 1 100%;
  min-width: 0;
}
.member-recommendations .member-scan-controls {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  justify-items: stretch;
  gap: 8px;
}
.member-recommendations .member-tabs {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-column: 1;
  grid-row: 1;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 3px;
}
.member-recommendations .member-tab {
  min-width: 0;
  padding: 8px 5px;
  font-size: max(0.75rem,13px);
  line-height: 1.25;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  writing-mode: horizontal-tb;
  transform: none;
}
.member-recommendations .member-scan-controls > .button {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  white-space: nowrap;
}
.member-stock-name-line strong { word-break: keep-all; }
@container member-ranking (max-width: 560px) {
  .member-stock-select { grid-template-columns: minmax(0,1fr) auto; }
  .member-stock-title { grid-column: 1; grid-row: 1; }
  .member-key-prices { grid-column: 1 / -1; grid-row: 2; }
  .member-select-label { grid-column: 2; grid-row: 1; justify-self: end; }
}
@media(max-width:560px) {
  .member-recommendations .member-scan-controls {
    grid-template-columns: minmax(0,1fr);
  }
  .member-recommendations .member-scan-controls > .button {
    justify-self: stretch;
    grid-column: 1;
    grid-row: 2;
  }
  .member-recommendations .member-tabs { grid-row: 1; }
}