:root {
  color-scheme: light;
  font-family: Inter, "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  --page-bg: #f6f8fa;
  --bar-bg: #ffffff;
  --text: #1f2328;
  --muted: #59636e;
  --border: #d0d7de;
  --border-subtle: #e1e6eb;
  --table-head-bg: #f0f3f6;
  --row-hover: #f3f6f8;
  --button-bg: #ffffff;
  --button-hover: #f3f4f6;
  --button-border: #afb8c1;
  --positive: #1a7f37;
  --negative: #cf222e;
  --equity: #9a6700;
  --risk: #0969da;
  --refresh-start: #1a7f37;
  --refresh-mid: #4f8f60;
  --refresh-late: #788c7d;
  --refresh-end: #8c959f;
  background: var(--page-bg);
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --page-bg: #0d1117;
  --bar-bg: #161b22;
  --text: #e6edf3;
  --muted: #8b949e;
  --border: #30363d;
  --border-subtle: #21262d;
  --table-head-bg: #161b22;
  --row-hover: #161b22;
  --button-bg: #21262d;
  --button-hover: #30363d;
  --button-border: #3d444d;
  --positive: #3fb950;
  --negative: #f97583;
  --equity: #ffd866;
  --risk: #79c0ff;
  --refresh-start: #56d364;
  --refresh-mid: #3fb950;
  --refresh-late: #6e8c78;
  --refresh-end: #484f58;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background: var(--page-bg);
  color: var(--text);
}

button { font: inherit; letter-spacing: 0; }

.topbar {
  min-height: 76px;
  padding: 14px max(20px, calc((100vw - 1440px) / 2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bar-bg);
}

h1, h2 { margin: 0; letter-spacing: 0; }
h1 { font-size: 20px; line-height: 1.4; font-weight: 650; }
h2 { font-size: 15px; line-height: 1.4; font-weight: 650; }

.status {
  min-height: 20px;
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
}

.status.error { color: var(--negative); }
.status.fresh { color: var(--positive); }

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

.icon-button,
.refresh-button {
  height: 38px;
  border: 1px solid var(--button-border);
  border-radius: 6px;
  background: var(--button-bg);
  color: var(--text);
  cursor: pointer;
}

.icon-button {
  width: 38px;
  padding: 0;
  font-size: 19px;
  line-height: 1;
}

.icon-button:hover,
.refresh-button:hover { background: var(--button-hover); }

.refresh-button {
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.refresh-button:disabled { color: var(--muted); cursor: wait; }
.refresh-button:disabled span:first-child { animation: spin 1s linear infinite; }

@keyframes spin { to { transform: rotate(360deg); } }

main {
  width: min(100%, 1440px);
  margin: 0 auto;
  padding: 24px 20px 48px;
}

.target-section + .target-section {
  margin-top: 46px;
  padding-top: 34px;
  border-top: 2px solid var(--border);
}

.target-heading {
  min-height: 58px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.target-name { font-size: 17px; }

.summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(145px, 1fr));
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.metric {
  min-width: 0;
  padding: 17px 16px;
  border-right: 1px solid var(--border-subtle);
}

.metric:nth-child(4n) { border-right: 0; }
.metric:nth-child(-n+4) { border-bottom: 1px solid var(--border-subtle); }
.metric-label { color: var(--muted); font-size: 12px; }
.metric-value { min-height: 30px; margin-top: 4px; overflow-wrap: anywhere; color: var(--text); font-size: 20px; line-height: 1.5; font-weight: 620; }
.metric-equity .metric-value { color: var(--equity); }
.metric-pnl.positive .metric-value { color: var(--positive); }
.metric-pnl.negative .metric-value { color: var(--negative); }
.metric-risk .metric-value { color: var(--risk); }
.metric-refresh .metric-value {
  animation: refresh-fade var(--refresh-duration, 0s) linear both;
  animation-delay: var(--refresh-delay, 0s);
}
.metric-refresh.refresh-complete .metric-value { animation: none; color: var(--refresh-end); }

@keyframes refresh-fade {
  0% { color: var(--refresh-start); }
  35% { color: var(--refresh-mid); }
  70% { color: var(--refresh-late); }
  100% { color: var(--refresh-end); }
}

.positions-heading { min-height: 46px; padding-top: 24px; font-size: 14px; font-weight: 650; }
.upstream-time { color: var(--muted); font-size: 12px; }
.table-scroll { width: 100%; overflow-x: auto; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

table { width: 100%; min-width: 920px; border-collapse: collapse; }
th, td { height: 43px; padding: 0 13px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--border-subtle); }
th { height: 38px; color: var(--muted); background: var(--table-head-bg); font-size: 12px; font-weight: 600; }
th:first-child, td:first-child { text-align: left; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--row-hover); }
td { font-size: 13px; }
.direction-long { color: var(--negative); font-weight: 650; }
.direction-short { color: var(--positive); font-weight: 650; }
.pnl-positive { color: var(--positive); }
.pnl-negative { color: var(--negative); }
.trend { display: inline-block; width: 14px; margin-left: 4px; text-align: center; }
.empty { height: 100px; color: var(--muted); text-align: center !important; }

@media (max-width: 960px) {
  .table-scroll {
    overflow: visible;
    border: 0;
  }

  table,
  tbody { display: block; }

  table { min-width: 0; }
  thead { display: none; }

  tbody {
    display: grid;
    gap: 10px;
  }

  tbody tr {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bar-bg);
  }

  tbody tr:hover { background: var(--bar-bg); }

  tbody td {
    min-width: 0;
    height: auto;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    border-right: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  tbody td:nth-child(3n) { border-right: 0; }
  tbody td:nth-last-child(-n+3) { border-bottom: 0; }

  tbody td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 11px;
    font-weight: 400;
  }

  tbody td:first-child { font-weight: 650; }

  .empty-row { display: block; }
  .empty-row .empty { border: 0; }
  .empty-row .empty::before { content: none; }
}

@media (max-width: 780px) {
  .topbar { padding: 12px 14px; }
  main { padding: 18px 14px 36px; }
  .summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric { padding: 14px 12px; }
  .metric:nth-child(4n) { border-right: 1px solid var(--border-subtle); }
  .metric:nth-child(2n) { border-right: 0; }
  .metric:nth-child(-n+6) { border-bottom: 1px solid var(--border-subtle); }
  .metric-value { font-size: 17px; }
  .target-section + .target-section { margin-top: 34px; padding-top: 26px; }
  .target-heading { min-height: 54px; }
}

@media (max-width: 560px) {
  tbody tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  tbody td:nth-child(3n) { border-right: 1px solid var(--border-subtle); }
  tbody td:nth-last-child(-n+3) { border-bottom: 1px solid var(--border-subtle); }
  tbody td:nth-child(2n) { border-right: 0; }
  tbody td:last-child {
    grid-column: 1 / -1;
    border-right: 0;
    border-bottom: 0;
  }
}