:root {
  --ink:#14263f;
  --muted:#687b91;
  --teal:#087f83;
  --teal-light:#e8f6f3;
  --border:#e3eaf0;
  --surface:#fff;
  --background:#f4f7fa;
  --red:#ad4754;
  --red-light:#fcf0f1;
  --shadow:0 3px 20px rgba(26,47,76,.035);
}

.card-confirmed-time {
  font-size:9px;
  color:var(--muted);
  margin-top:7px;
  line-height:1.4;
}

.paper-badge {
  font-size:9px;
  font-weight:600;
  padding:2px 6px;
  border-radius:4px;
  color:#526987;
  background:#edf2f8;
  letter-spacing:0;
}

.positions-grid .position-panel:last-child:nth-child(odd) {
  grid-column:1/-1;
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
  background:var(--background);
  color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:14px;
  line-height:1.55;
}

button,input,select {
  font:inherit;
}

button,select {
  cursor:pointer;
}

button {
  touch-action:manipulation;
}

a {
  color:inherit;
}

button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,canvas:focus-visible,a:focus-visible {
  outline:3px solid #63bfbc;
  outline-offset:3px;
}

button:disabled {
  cursor:wait;
  opacity:.6;
}

[hidden] {
  display:none!important;
}

h1,h2,h3,p {
  margin:0;
}

h1 {
  font-size:32px;
  letter-spacing:-1px;
  font-weight:650;
  line-height:1.2;
}

h2 {
  font-size:21px;
  letter-spacing:-.5px;
  line-height:1.3;
}

h3 {
  font-size:16px;
}

.muted {
  color:var(--muted);
}

.eyebrow {
  font-size:10px;
  font-weight:750;
  letter-spacing:1.8px;
  color:var(--teal);
  margin-bottom:7px;
}

.site-header {
  background:var(--surface);
  border-bottom:1px solid var(--border);
}

.header-inner {
  max-width:1504px;
  padding:20px 40px;
  margin:auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
}

.brand {
  display:flex;
  align-items:center;
  gap:11px;
  font-size:17px;
  font-weight:700;
  letter-spacing:-.4px;
  text-decoration:none;
}

.brand-mark {
  display:grid;
  place-items:center;
  background:var(--ink);
  color:#fff;
  border-radius:11px;
  width:35px;
  height:35px;
  font-size:20px;
  font-weight:600;
}

.header-actions {
  display:flex;
  align-items:center;
  gap:20px;
}

.private-badge {
  font-size:11px;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:6px;
}

.private-badge:before {
  content:"";
  width:5px;
  height:5px;
  background:var(--teal);
  border-radius:50%;
}

.button {
  border:1px solid var(--border);
  border-radius:8px;
  background:#fff;
  color:var(--ink);
  padding:10px 16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  font-weight:650;
  white-space:nowrap;
}

.button-primary {
  background:var(--teal);
  border-color:var(--teal);
  color:#fff;
}

.button-primary:hover {
  background:#07696c;
}

.button-quiet {
  font-size:12px;
  padding:7px 12px;
}

.dashboard {
  max-width:1504px;
  margin:auto;
  padding:35px 40px 24px;
}

.page-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin-bottom:28px;
}

.page-heading .muted {
  margin-top:9px;
}

.capture-status {
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
}

.status-pill {
  font-size:11px;
  font-weight:650;
  display:inline-flex;
  align-items:center;
  gap:7px;
  border-radius:20px;
  padding:5px 11px;
  background:#e8edf3;
  color:var(--muted);
}

.status-pill:before {
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:currentColor;
}

.status-pill.live {
  color:var(--teal);
  background:var(--teal-light);
}

.status-pill.stale {
  color:#976316;
  background:#fff3d9;
}

.status-pill.error {
  color:var(--red);
  background:var(--red-light);
}

.status-detail {
  font-size:11px;
  color:var(--muted);
}

.controls {
  padding:18px 20px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  display:flex;
  align-items:flex-start;
  gap:24px;
  box-shadow:var(--shadow);
  margin-bottom:18px;
}

.control {
  display:flex;
  flex-direction:column;
  gap:5px;
  min-width:160px;
}

.control label,.login-form label {
  font-size:11px;
  font-weight:650;
  color:#54667c;
}

.control input,.control select,.login-form input {
  height:39px;
  border:1px solid #dbe4eb;
  border-radius:7px;
  padding:7px 10px;
  background:#fff;
  color:var(--ink);
  width:100%;
}

.control select {
  padding-right:30px;
}

.capital-control {
  width:190px;
}

.control-hint {
  font-size:10px;
  color:var(--muted);
}

.refresh-control {
  margin-left:auto;
  padding-top:22px;
  display:flex;
  align-items:center;
  gap:16px;
}

.refresh-note {
  font-size:11px;
  color:var(--muted);
}

.period-label {
  font-size:11px;
  color:var(--muted);
  margin:14px 2px 15px;
  font-variant-numeric:tabular-nums;
}

.notice {
  padding:11px 15px;
  border-radius:8px;
  font-size:12px;
  margin-bottom:12px;
}

.notice-error {
  background:var(--red-light);
  color:#983342;
  border:1px solid #f0d1d5;
}

.notice-warning {
  background:#fff7e5;
  color:#906322;
  border:1px solid #f1dfb9;
}

.summary-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin-bottom:26px;
}

.summary-card {
  border:1px solid var(--border);
  border-radius:11px;
  padding:18px 17px;
  background:var(--surface);
  box-shadow:var(--shadow);
  min-width:0;
}

.card-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:5px;
  margin-bottom:15px;
}

.card-name {
  font-size:13px;
  font-weight:750;
  display:flex;
  align-items:center;
  gap:8px;
}

.color-dot {
  width:8px;
  height:8px;
  border-radius:50%;
  display:inline-block;
  flex-shrink:0;
}

.card-state {
  font-size:9px;
  color:var(--muted);
}

.card-state.incomplete {
  color:#976316;
}

.card-return {
  font-size:25px;
  font-weight:650;
  letter-spacing:-.7px;
  font-variant-numeric:tabular-nums;
  line-height:1.25;
  white-space:nowrap;
}

.positive {
  color:var(--teal);
}

.negative {
  color:var(--red);
}

.card-pnl {
  font-size:12px;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
  margin-top:3px;
}

.card-divider {
  height:1px;
  background:var(--border);
  margin:14px 0 11px;
}

.card-detail {
  display:flex;
  justify-content:space-between;
  gap:4px;
  font-size:10px;
  color:var(--muted);
  margin-top:5px;
}

.card-detail strong {
  color:var(--ink);
  font-weight:550;
  font-variant-numeric:tabular-nums;
}

.card-note {
  font-size:10px;
  color:#976316;
  margin-top:9px;
}

.empty-summary {
  grid-column:1/-1;
  padding:26px;
  color:var(--muted);
  text-align:center;
  background:#fff;
  border:1px dashed var(--border);
  border-radius:12px;
}

.panel {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:var(--shadow);
}

.panel-heading {
  padding:23px 25px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

.panel-description {
  font-size:12px;
  color:var(--muted);
  margin-top:6px;
}

.unit-label {
  font-size:9px;
  letter-spacing:1px;
  font-weight:650;
  color:var(--muted);
  white-space:nowrap;
}

.chart-legend {
  display:flex;
  flex-wrap:wrap;
  gap:7px 17px;
  padding:0 25px 12px;
}

.legend-button {
  background:transparent;
  border:0;
  display:flex;
  align-items:center;
  gap:7px;
  padding:4px 0;
  font-size:11px;
  font-weight:550;
  color:var(--ink);
}

.legend-button[aria-pressed=false] {
  opacity:.35;
}

.legend-button[aria-pressed=false] .legend-name {
  text-decoration:line-through;
}

.canvas-wrap {
  width:100%;
  padding:0 12px;
}

.canvas-wrap canvas {
  display:block;
  width:100%;
  height:100%;
  outline-offset:-3px;
}

.performance-wrap {
  height:355px;
}

.chart-tooltip {
  min-height:51px;
  border-top:1px solid #edf1f5;
  padding:11px 25px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:5px 22px;
  font-size:11px;
  font-variant-numeric:tabular-nums;
}

.tooltip-time {
  color:var(--muted);
}

.tooltip-value {
  display:flex;
  align-items:center;
  gap:6px;
}

.positions-section {
  margin-top:30px;
}

.section-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  margin:0 2px 17px;
}

.positions-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}

.position-panel .panel-heading {
  padding:18px 22px 9px;
}

.position-panel .panel-description {
  font-size:10px;
  margin-top:3px;
}

.position-title {
  display:flex;
  align-items:center;
  gap:8px;
}

.position-wrap {
  height:235px;
}

.position-panel .chart-tooltip {
  min-height:45px;
  padding:10px 22px;
  font-size:10px;
}

.position-net {
  font-size:11px;
  color:var(--muted);
  text-align:right;
  font-variant-numeric:tabular-nums;
}

.symbol-filter {
  margin-top:15px;
  padding:15px 22px;
}

.symbol-filter summary {
  font-size:12px;
  font-weight:650;
  cursor:pointer;
}

.symbol-filter summary .muted {
  font-size:10px;
  font-weight:400;
  margin-left:6px;
}

.symbol-filter .chart-legend {
  padding:15px 0 0;
  gap:5px 16px;
}

.summary-help {
  float:right;
}

.allocation-panel {
  margin-top:27px;
  overflow:hidden;
}

.allocation-control {
  min-width:100px;
}

.allocation-control select {
  height:35px;
}

.allocation-totals {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin:0 25px 21px;
  padding:15px 18px;
  background:#f6f9fb;
  border:1px solid #eaf0f4;
  border-radius:8px;
  gap:20px;
}

.allocation-total {
  display:flex;
  flex-direction:column;
  gap:3px;
}

.allocation-total span {
  font-size:10px;
  color:var(--muted);
}

.allocation-total strong {
  font-size:16px;
  font-weight:650;
  font-variant-numeric:tabular-nums;
}

.table-scroll {
  overflow-x:auto;
}

table {
  width:100%;
  border-collapse:collapse;
  font-size:12px;
  text-align:left;
}

th {
  font-size:10px;
  letter-spacing:.7px;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:650;
  padding:12px 25px;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  background:#fafbfd;
}

td {
  padding:12px 25px;
  border-bottom:1px solid #edf1f5;
  white-space:nowrap;
}

tbody tr:last-child td {
  border-bottom:0;
}

tbody tr:hover {
  background:#fafcfd;
}

.numeric {
  text-align:right;
  font-variant-numeric:tabular-nums;
}

.symbol-cell {
  font-weight:650;
}

.symbol-cell .color-dot {
  margin-right:9px;
}

.direction-pill {
  font-size:10px;
  padding:3px 8px;
  border-radius:4px;
  background:#eef2f6;
  color:var(--muted);
}

.direction-pill.long {
  color:var(--teal);
  background:var(--teal-light);
}

.direction-pill.short {
  color:var(--red);
  background:var(--red-light);
}

progress {
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  max-width:210px;
  min-width:100px;
  height:5px;
  border:0;
  background:#eef2f5;
  border-radius:3px;
  display:block;
}

progress::-webkit-progress-bar {
  background:#eef2f5;
  border-radius:3px;
}

progress::-webkit-progress-value {
  background:var(--teal);
  border-radius:3px;
}

progress::-moz-progress-bar {
  background:var(--teal);
  border-radius:3px;
}

progress.short::-webkit-progress-value {
  background:#c66b77;
}

progress.short::-moz-progress-bar {
  background:#c66b77;
}

.empty-table {
  text-align:center;
  padding:32px;
  color:var(--muted);
}

.dashboard-footer {
  font-size:10px;
  color:var(--muted);
  line-height:1.8;
  margin:24px 2px;
}

.dashboard-footer .funding-delayed {
  color:var(--red);
}

.login-page {
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:radial-gradient(ellipse at 25% 20%,#e9f2f2 0,transparent 55%),var(--background);
}

.login-card {
  background:#fff;
  width:450px;
  max-width:100%;
  border:1px solid var(--border);
  border-radius:17px;
  padding:38px;
  box-shadow:0 16px 65px rgba(24,47,71,.07);
}

.login-card .brand {
  margin-bottom:42px;
}

.login-card h1 {
  font-size:29px;
  max-width:320px;
}

.login-copy {
  font-size:13px;
  color:var(--muted);
  margin-top:14px;
}

.login-form {
  display:flex;
  flex-direction:column;
  gap:9px;
  margin-top:29px;
}

.login-form input {
  height:45px;
}

.login-form .button {
  margin-top:10px;
  height:45px;
  justify-content:space-between;
}

.login-note {
  font-size:10px;
  color:var(--muted);
  margin-top:25px;
  text-align:center;
}

.form-error {
  color:var(--red);
  background:var(--red-light);
  border-radius:7px;
  padding:10px 12px;
  font-size:12px;
  margin-top:20px;
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.color-0 {
  background:#087f83;
}

.color-1 {
  background:#5471bc;
}

.color-2 {
  background:#d6943d;
}

.color-3 {
  background:#9c66ad;
}

.color-4 {
  background:#e07666;
}

.color-5 {
  background:#375575;
}

.color-6 {
  background:#3da789;
}

.color-7 {
  background:#c179a0;
}

.color-8 {
  background:#88923c;
}

.color-9 {
  background:#63899b;
}

.color-10 {
  background:#5f79a6;
}

.color-11 {
  background:#bb963e;
}

.color-12 {
  background:#a34f68;
}

.color-13 {
  background:#659c4c;
}

.color-14 {
  background:#875a9b;
}

.color-15 {
  background:#dc8351;
}

.color-16 {
  background:#4c9bac;
}

.color-17 {
  background:#aa798b;
}

.color-18 {
  background:#758655;
}

.color-19 {
  background:#6c64af;
}

.color-20 {
  background:#557695;
}

.color-21 {
  background:#ad7c34;
}

.color-22 {
  background:#7d5a76;
}

.color-23 {
  background:#438470;
}

.color-24 {
  background:#936249;
}

.color-25 {
  background:#7689bd;
}

.color-26 {
  background:#be7560;
}

.color-27 {
  background:#599552;
}

.color-28 {
  background:#985295;
}

.color-29 {
  background:#40949d;
}

.color-30 {
  background:#a7944a;
}

.color-31 {
  background:#bd6085;
}

.color-32 {
  background:#576d46;
}

.color-33 {
  background:#b06c3c;
}

.color-34 {
  background:#5d80a2;
}

.color-35 {
  background:#8b64b8;
}

.color-36 {
  background:#bd8869;
}

.color-37 {
  background:#458e87;
}

.color-38 {
  background:#aa5460;
}

.color-39 {
  background:#a6a25d;
}

.color-40 {
  background:#776e9b;
}

.color-41 {
  background:#789fa6;
}

.color-42 {
  background:#b9889d;
}

.color-43 {
  background:#739569;
}

.color-44 {
  background:#c3a468;
}

.color-45 {
  background:#7c879c;
}

.color-46 {
  background:#a98157;
}

.color-47 {
  background:#8f9f45;
}

.color-48 {
  background:#a55b8b;
}

.color-49 {
  background:#7390be;
}

.color-50 {
  background:#8a7558;
}

.color-51 {
  background:#5b9b6d;
}

.color-52 {
  background:#b58b48;
}

.color-53 {
  background:#7184a3;
}

.color-54 {
  background:#a26d9e;
}

.color-55 {
  background:#b16453;
}

.color-56 {
  background:#799557;
}

.color-57 {
  background:#538c9a;
}

.color-58 {
  background:#aa7489;
}

.color-59 {
  background:#978c63;
}

@media(max-width:1250px) {
  .summary-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .refresh-note {
    display:none;
  }
  .controls {
    gap:18px;
  }
  .capital-control {
    width:170px;
  }
  .dashboard,.header-inner {
    padding-left:28px;
    padding-right:28px;
  }
}

@media(max-width:850px) {
  .controls {
    flex-wrap:wrap;
    gap:15px;
  }
  .control {
    flex:1 1 180px;
    min-width:0;
  }
  .capital-control {
    flex:1 1 180px;
    width:auto;
  }
  .refresh-control {
    flex:0 0 auto;
    padding-top:22px;
  }
  .positions-grid {
    grid-template-columns:1fr;
  }
  .summary-help {
    float:none;
    display:block;
    margin-top:5px;
  }
  .capture-status {
    max-width:230px;
  }
  .allocation-control {
    flex:none;
    min-width:95px;
  }
}

@media(max-width:600px) {
  .dashboard {
    padding:24px 15px;
  }
  .header-inner {
    padding:15px;
  }
  .brand {
    font-size:14px;
  }
  .brand-mark {
    width:30px;
    height:30px;
    font-size:17px;
  }
  .private-badge {
    display:none;
  }
  .header-actions {
    gap:8px;
  }
  .page-heading {
    align-items:flex-start;
    flex-direction:column;
    gap:15px;
    margin-bottom:20px;
  }
  h1 {
    font-size:27px;
  }
  .capture-status {
    align-items:flex-start;
    gap:6px;
    max-width:none;
  }
  .controls {
    padding:14px;
    gap:12px;
  }
  .control {
    flex:1 1 130px;
  }
  .refresh-control {
    padding:0;
    align-self:flex-end;
  }
  .capital-control {
    flex-basis:140px;
  }
  .summary-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin-bottom:20px;
  }
  .summary-card {
    padding:14px 12px;
  }
  .card-return {
    font-size:24px;
  }
  .card-state {
    font-size:8px;
  }
  .panel-heading {
    padding:19px 17px 13px;
  }
  .chart-legend {
    padding:0 17px 10px;
    gap:5px 13px;
  }
  .performance-wrap {
    height:305px;
    padding:0 3px;
  }
  .chart-tooltip {
    padding:10px 17px;
    gap:5px 15px;
  }
  .panel-description {
    font-size:11px;
  }
  .unit-label {
    font-size:8px;
  }
  .position-wrap {
    height:220px;
    padding:0 3px;
  }
  .positions-section {
    margin-top:25px;
  }
  .section-heading {
    align-items:flex-start;
  }
  .allocation-totals {
    margin:0 17px 17px;
    padding:13px;
    gap:12px;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  td,th {
    padding:11px 17px;
  }
  .allocation-panel .panel-heading {
    align-items:flex-start;
  }
  .allocation-control {
    flex:none;
    min-width:85px;
  }
  .login-card {
    padding:29px;
  }
  .login-card .brand {
    margin-bottom:33px;
  }
  h2 {
    font-size:19px;
  }
  .symbol-filter {
    padding:14px 17px;
  }
}

@media(prefers-reduced-motion:no-preference) {
  .button,.legend-button {
    transition:background .15s ease,opacity .15s ease;
  }
}