:root {
  color-scheme: dark;
  --bg: #06101c;
  --panel: rgba(13, 27, 43, 0.94);
  --panel-soft: rgba(17, 34, 52, 0.82);
  --line: rgba(116, 151, 183, 0.18);
  --text: #edf6ff;
  --muted: #8297ab;
  --cyan: #45e0d6;
  --violet: #9b7cf6;
  --orange: #ffb45d;
  --positive: #ff5c72;
  --negative: #3bd995;
  font-family: "Stork Chinese Kai", "Stork Chinese Kai Fallback", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  min-width: 1100px;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 8% 0%, rgba(32, 119, 166, 0.2), transparent 32%),
    radial-gradient(circle at 91% 18%, rgba(118, 78, 210, 0.15), transparent 30%),
    var(--bg);
}
body.history-date-open { overflow: hidden; }

button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; }

.ambient { position: fixed; z-index: -1; border-radius: 999px; filter: blur(90px); opacity: .18; }
.ambient-one { width: 360px; height: 360px; left: -150px; top: 28%; background: #11b7b5; }
.ambient-two { width: 430px; height: 430px; right: -180px; bottom: 8%; background: #7750df; }

.page-shell { width: min(1760px, calc(100% - 48px)); margin: 0 auto; padding: 24px 0 32px; }
.topbar { display: flex; align-items: center; min-height: 70px; padding: 0 20px; border: 1px solid var(--line); border-radius: 18px; background: rgba(8, 20, 34, .88); box-shadow: 0 22px 70px rgba(0,0,0,.24); }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(69,224,214,.36); border-radius: 13px; background: rgba(69,224,214,.09); }
.brand-mark svg { width: 30px; fill: none; stroke: var(--cyan); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.brand strong, .brand small { display: block; letter-spacing: .08em; }
.brand strong { font-size: 16px; }
.brand small { margin-top: 4px; color: var(--muted); font-size: 13px; }
.topbar-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.topbar nav { display: flex; gap: 6px; margin-left: 55px; }
.topbar nav a { padding: 10px 15px; border-radius: 10px; color: #91a5b7; font-size: 15px; }
.topbar nav a:hover, .topbar nav a.active { color: var(--text); background: rgba(69,224,214,.09); }
.operator-label { margin-left: auto; color: #9fb2c4; font-size: 15px; }
body.page-performance .topbar .topbar-actions nav,
body.page-performance .topbar .topbar-actions .operator-label { margin-left: 0; }

.hero { display: flex; align-items: stretch; justify-content: space-between; gap: 28px; margin-top: 18px; padding: 26px 30px; border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(125deg, rgba(15,37,56,.95), rgba(11,25,42,.88)); }
.eyebrow, .panel header p, .cohort-context p { margin: 0 0 8px; color: var(--cyan); font-size: 12px; font-weight: 800; letter-spacing: .2em; }
.hero h1 { margin: 0; font-size: 30px; letter-spacing: -.03em; }
.hero > div > p:last-child { max-width: 850px; margin: 11px 0 0; color: #91a6b9; line-height: 1.7; }
.freshness-card { display: flex; min-width: 235px; flex-direction: column; justify-content: center; padding: 15px 22px; border: 1px solid rgba(69,224,214,.2); border-radius: 15px; background: rgba(3,17,27,.38); }
.freshness-card span { color: var(--muted); font-size: 14px; }
.freshness-card strong { margin: 6px 0 4px; color: var(--cyan); font-size: 25px; }
.freshness-card small { color: #71869a; }
.freshness-card .live-quote-meta { margin-top: 5px; color: var(--cyan); font-size: 11px; line-height: 1.35; }
.freshness-card .live-quote-meta.delayed { color: var(--orange); }

.message-bar { margin-top: 14px; padding: 12px 16px; color: #ffc4cd; border: 1px solid rgba(255,92,114,.35); border-radius: 12px; background: rgba(255,92,114,.08); }
.message-bar.success { color: #94f4ce; border-color: rgba(59,217,149,.35); background: rgba(59,217,149,.08); }

.panel { border: 1px solid var(--line); border-radius: 18px; background: var(--panel); box-shadow: 0 20px 50px rgba(0,0,0,.14); }
.panel > header { display: flex; align-items: center; justify-content: space-between; min-height: 68px; padding: 0 20px; border-bottom: 1px solid var(--line); }
.panel h2 { margin: 0; font-size: 19px; }
.selector-panel { margin-top: 14px; overflow: hidden; }
.date-selector-tools { display: flex; min-width: 0; flex-direction: column; align-items: flex-end; gap: 9px; }
.date-selector-tools > span { max-width: 680px; overflow: hidden; color: #7e93a6; font-size: 13px; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.date-navigation { display: flex; align-items: center; gap: 7px; }
.date-navigation button { height: 30px; color: #a9bdcd; border: 1px solid #2a4358; border-radius: 8px; background: #0b1d2d; transition: .16s ease; }
.date-navigation button:hover:not(:disabled) { color: var(--cyan); border-color: rgba(69,224,214,.48); transform: translateY(-1px); }
.date-navigation button:disabled, .history-date-pagination button:disabled { cursor: not-allowed; opacity: .35; }
.date-history-button { padding: 0 12px; font-size: 12px; }
.date-arrow { width: 32px; padding: 0; font-size: 22px; line-height: 1; }
.date-page-label { min-width: 45px; color: #70879a; font-size: 12px; text-align: center; font-variant-numeric: tabular-nums; }
.date-tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; padding: 14px; }
.date-tab { min-width: 0; padding: 14px 16px; color: #a5b7c7; text-align: left; border: 1px solid #253b50; border-radius: 13px; background: #0b1b2a; transition: .16s ease; }
.date-tab:hover { border-color: rgba(69,224,214,.4); transform: translateY(-1px); }
.date-tab.selected { color: var(--text); border-color: rgba(69,224,214,.7); background: linear-gradient(140deg, rgba(69,224,214,.14), rgba(17,41,57,.92)); box-shadow: inset 0 -2px 0 var(--cyan); }
.date-tab span, .date-tab strong, .date-tab small { display: block; }
.date-tab span { color: var(--cyan); font-size: 13px; font-weight: 800; letter-spacing: .06em; }
.date-tab strong { margin-top: 8px; font-size: 18px; }
.date-tab small { margin-top: 5px; color: #70879a; font-size: 12px; }
.selector-empty { width: 100%; padding: 24px; color: var(--muted); text-align: center; }

.history-date-modal { position: fixed; z-index: 80; inset: 0; display: grid; padding: 28px; place-items: center; background: rgba(2,8,15,.76); backdrop-filter: blur(12px); }
.history-date-dialog { display: flex; width: min(1040px, calc(100vw - 56px)); max-height: min(820px, calc(100vh - 56px)); overflow: hidden; flex-direction: column; border: 1px solid rgba(116,151,183,.28); border-radius: 22px; background: #0a1827; box-shadow: 0 32px 100px rgba(0,0,0,.56); }
.history-date-dialog > header { display: flex; min-height: 78px; align-items: center; justify-content: space-between; padding: 0 24px; border-bottom: 1px solid var(--line); background: linear-gradient(120deg, rgba(18,42,61,.96), rgba(11,27,44,.96)); }
.history-date-dialog header p { margin: 0 0 7px; color: var(--cyan); font-size: 11px; font-weight: 800; letter-spacing: .18em; }
.history-date-dialog header h2 { margin: 0; font-size: 21px; }
.history-close-button { display: grid; width: 38px; height: 38px; padding: 0; place-items: center; color: #91a6b8; border: 1px solid #30485d; border-radius: 11px; background: #102235; font-size: 25px; line-height: 1; }
.history-close-button:hover { color: var(--text); border-color: rgba(69,224,214,.45); }
.history-date-summary { display: flex; align-items: center; justify-content: space-between; padding: 12px 24px; color: #8ba0b3; border-bottom: 1px solid var(--line); background: rgba(7,19,31,.7); font-size: 13px; }
.history-date-summary small { color: #61788c; }
.history-date-list { min-height: 330px; padding: 20px 24px; overflow-y: auto; scrollbar-color: #29475f transparent; }
.history-month-group + .history-month-group { margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(116,151,183,.14); }
.history-month-group h3 { margin: 0 0 11px; color: #8ea5b8; font-size: 14px; font-weight: 800; letter-spacing: .08em; }
.history-month-dates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.history-date-option { min-width: 0; padding: 13px 15px; color: #a9bbc9; text-align: left; border: 1px solid #263e53; border-radius: 12px; background: #0d2031; transition: .16s ease; }
.history-date-option:hover { border-color: rgba(69,224,214,.46); transform: translateY(-1px); }
.history-date-option.selected { border-color: rgba(69,224,214,.75); background: linear-gradient(135deg, rgba(69,224,214,.14), rgba(13,33,49,.96)); box-shadow: inset 3px 0 0 var(--cyan); }
.history-date-option span, .history-date-option strong, .history-date-option small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-date-option span { color: var(--cyan); font-size: 14px; font-weight: 800; letter-spacing: .05em; }
.history-date-option strong { margin-top: 7px; color: #d7e5f0; font-size: 13px; }
.history-date-option small { margin-top: 5px; color: #6d8498; font-size: 11px; }
.history-date-empty { display: grid; min-height: 300px; place-items: center; color: #748a9e; font-size: 14px; }
.history-date-empty.error { color: #ffc0c9; }
.history-date-pagination { display: grid; grid-template-columns: 150px 1fr 150px; align-items: center; gap: 16px; padding: 14px 24px 18px; border-top: 1px solid var(--line); background: rgba(7,19,31,.7); }
.history-date-pagination button { height: 38px; color: #a8bbcb; border: 1px solid #2b4358; border-radius: 10px; background: #102235; }
.history-date-pagination button:hover:not(:disabled) { color: var(--cyan); border-color: rgba(69,224,214,.48); }
.history-date-pagination span { color: #788fa2; font-size: 13px; text-align: center; font-variant-numeric: tabular-nums; }

.strategy-selector { margin-top: 12px; }
.strategy-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 14px; }
.strategy-card { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; min-height: 86px; padding: 14px 18px; color: #a9bbc9; text-align: left; border: 1px solid #253b50; border-radius: 14px; background: #0b1a29; transition: .16s ease; }
.strategy-card:hover { border-color: rgba(155,124,246,.5); transform: translateY(-1px); }
.strategy-card.selected { color: var(--text); border-color: rgba(155,124,246,.78); background: linear-gradient(135deg, rgba(155,124,246,.13), rgba(12,29,45,.94)); box-shadow: inset 3px 0 0 var(--violet); }
.strategy-index { color: var(--violet); font-size: 14px; font-weight: 900; letter-spacing: .12em; }
.strategy-copy strong, .strategy-copy small, .strategy-progress b, .strategy-progress small { display: block; }
.strategy-copy strong { font-size: 19px; }
.strategy-copy small, .strategy-progress small { margin-top: 5px; color: #71879a; font-size: 12px; }
.strategy-progress { min-width: 165px; text-align: right; }
.strategy-progress b { color: #b8a5ff; font-size: 13px; }

.cohort-toolbar { display: grid; grid-template-columns: minmax(340px, 1fr) minmax(260px, 410px) auto; align-items: end; gap: 14px; margin-top: 14px; padding: 17px 19px; border: 1px solid var(--line); border-radius: 16px; background: rgba(11,24,39,.88); }
.cohort-context h2 { margin: 0; font-size: 21px; }
.cohort-context span { display: block; margin-top: 6px; color: #748a9e; font-size: 13px; }
.search-control { display: flex; min-width: 0; flex-direction: column; gap: 7px; }
.search-control span { padding-left: 2px; color: #758ca0; font-size: 12px; }
.search-control input { width: 100%; height: 40px; padding: 0 12px; color: #d9e7f3; border: 1px solid #253c51; border-radius: 10px; outline: none; background: #0a1928; }
.search-control input:focus { border-color: rgba(69,224,214,.6); box-shadow: 0 0 0 3px rgba(69,224,214,.08); }
.toolbar-actions { display: flex; gap: 9px; }
.toolbar-actions button { height: 40px; padding: 0 16px; border-radius: 10px; transition: .18s ease; }
button:disabled { cursor: wait; opacity: .55; }
.ghost-button { color: #a7b8c8; border: 1px solid #30465a; background: #102235; }
.primary-button { color: #04211f; border: 1px solid var(--cyan); background: var(--cyan); font-weight: 800; }
.ghost-button:hover, .primary-button:hover { transform: translateY(-1px); filter: brightness(1.08); }

.summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 12px; }
.summary-grid article { position: relative; min-height: 112px; padding: 18px 20px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--panel-soft); }
.summary-grid article::after { content: ""; position: absolute; right: -18px; bottom: -25px; width: 80px; height: 80px; border: 1px solid rgba(69,224,214,.13); border-radius: 50%; }
.summary-grid span, .summary-grid small { display: block; color: var(--muted); }
.summary-grid span { font-size: 13px; }
.summary-grid strong { display: block; margin: 9px 0 4px; font-size: 27px; font-variant-numeric: tabular-nums; }
.summary-grid small { max-width: calc(100% - 35px); font-size: 12px; }
.positive { color: var(--positive) !important; }
.negative { color: var(--negative) !important; }

.detail-panel { margin-top: 14px; overflow: hidden; }
.detail-head > span { color: #8ea3b6; font-size: 14px; }
.timeline-note { padding: 11px 20px; color: #71879b; border-bottom: 1px solid var(--line); background: rgba(7,20,32,.5); font-size: 13px; line-height: 1.6; }
.timeline-note strong { color: #b9cbd9; }
.table-wrap { max-height: 620px; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
table { width: 100%; min-width: 2936px; border-collapse: separate; border-spacing: 0; font-size: 14px; }
thead { position: sticky; z-index: 4; top: 0; background: #102236; }
th { min-width: 156px; padding: 13px 12px; color: #7f94a7; border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 800; letter-spacing: .05em; text-align: center; white-space: nowrap; }
th:first-child { position: sticky; z-index: 5; left: 0; min-width: 260px; text-align: left; background: #102236; }
td { min-width: 156px; padding: 0; border-bottom: 1px solid rgba(116,151,183,.11); color: #c9d7e3; text-align: center; font-variant-numeric: tabular-nums; vertical-align: middle; }
.stock-row:hover > td { background: rgba(69,224,214,.025); }
.stock-row > td:first-child { position: sticky; z-index: 2; left: 0; min-width: 260px; padding: 0 14px; text-align: left; background: #0d1d2d; box-shadow: 10px 0 20px rgba(4,12,21,.18); }
.stock-row:hover > td:first-child { background: #102335; }
.performance-stock-entry { display: flex; width: 100%; min-height: 94px; align-items: center; gap: 12px; }
.performance-stock-link { flex: 1 1 auto; min-width: 0; color: inherit; text-align: left; }
.performance-stock-link span, .performance-stock-link strong, .performance-stock-link small { display: block; }
.performance-stock-link strong { color: #edf6ff; font-size: 15px; }
.performance-stock-link small { margin-top: 6px; color: #71869a; font-size: 12px; }
.performance-stock-link small b { font-weight: 700; }
.stock-toggle { flex: 0 0 auto; padding: 8px 0 8px 8px; color: inherit; text-align: left; border: 0; background: transparent; }
.stock-toggle em { color: #8398aa; font-size: 12px; font-style: normal; }
.stock-toggle[aria-expanded="true"] em { color: var(--cyan); }
.status-complete { color: var(--cyan); }
.status-entry_unsettled, .status-sellable_tracking, .status-waiting_entry { color: var(--orange); }
.status-untradeable, .status-missed_entry, .status-data_missing { color: var(--positive); }

.stage-cell { display: flex; min-height: 94px; flex-direction: column; align-items: center; justify-content: center; padding: 10px 8px; }
.stage-cell span, .stage-cell strong, .stage-cell small { display: block; }
.stage-cell span { color: #7b91a5; font-size: 12px; letter-spacing: .04em; }
.stage-cell strong { max-width: 145px; margin: 7px 0 5px; overflow: hidden; color: #dce9f3; font-size: 16px; line-height: 1.25; text-overflow: ellipsis; }
.stage-cell small { max-width: 145px; color: #637a8e; font-size: 11px; line-height: 1.35; }
.stage-cell.signal-stage strong { font-size: 14px; }
.stage-cell.signal-stage small { color: #4dbeb8; }
.stage-cell.live-stage { background: rgba(69,224,214,.025); }
.stage-cell.live-stage strong { font-size: 17px; }
.stage-cell.live-stage small { max-width: 150px; }
.stage-cell.pending strong { color: #8294a4; }
.stage-cell.issue strong { color: var(--positive); font-size: 13px; white-space: normal; }

.stock-detail > td { padding: 14px 18px; text-align: left; background: #091826; }
.detail-grid { display: grid; grid-template-columns: repeat(6, minmax(120px, 1fr)); gap: 10px; }
.detail-grid > div { padding: 11px 13px; border: 1px solid rgba(116,151,183,.13); border-radius: 10px; background: rgba(15,34,50,.7); }
.detail-grid span, .detail-grid strong { display: block; }
.detail-grid span { color: #71869a; font-size: 11px; }
.detail-grid strong { margin-top: 6px; color: #cbd9e4; font-size: 13px; line-height: 1.45; }
.detail-grid .detail-note { grid-column: 1 / -1; }
.empty { height: 150px; padding: 20px; color: #71869a; text-align: center !important; }

footer { display: flex; justify-content: space-between; gap: 20px; padding: 18px 4px 0; color: #586f83; font-size: 13px; }
.icp-record-link { color: inherit; text-decoration: none; white-space: nowrap; }
.icp-record-link:hover, .icp-record-link:focus-visible { color: #e5d85f; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1280px) {
  .page-shell { width: calc(100% - 30px); }
  .strategy-cards { grid-template-columns: 1fr; }
  .cohort-toolbar { grid-template-columns: minmax(300px, 1fr) 300px; }
  .toolbar-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .detail-grid { grid-template-columns: repeat(3, minmax(140px, 1fr)); }
}
#refreshedAt { font-size: 14.5px; }
.history-date-summary small { font-size: 11.1667px; }