.cm-main {
  padding-block: 48px 80px;
}

.cm-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.65fr);
  align-items: end;
  gap: 48px;
  padding: 12px 0 48px;
}

.cm-hero h1 {
  margin: 0;
  color: var(--signal-ink);
  font-size: var(--type-display);
  font-weight: 650;
  line-height: 1.12;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.cm-hero > div > p {
  max-width: 760px;
  margin: 16px 0 0;
  color: var(--signal-tertiary);
  font-size: var(--type-body);
  line-height: 1.55;
  text-wrap: pretty;
}

.cm-ledger-status {
  margin: 0;
  border-left: 2px solid var(--profit);
  padding-left: 20px;
}

.cm-ledger-status div {
  display: grid;
  grid-template-columns: minmax(112px, 1fr) auto;
  gap: 16px;
  padding-block: 8px;
  border-bottom: 1px solid var(--wire-soft);
}

.cm-ledger-status div:last-child {
  border-bottom: 0;
}

.cm-ledger-status dt,
.cm-ledger-status dd {
  margin: 0;
  font: 650 var(--type-meta)/1.3 "Ubuntu Mono", "Nimbus Mono PS", monospace;
  font-variant-numeric: tabular-nums;
}

.cm-ledger-status dt {
  color: var(--signal-muted);
}

.cm-ledger-status dd {
  color: var(--signal-ink);
  text-align: right;
}

.cm-warning,
.cm-review,
.cm-empty {
  border: 1px solid var(--wire);
  border-radius: var(--radius-panel);
  background: var(--terminal-raised);
}

.cm-warning {
  margin-bottom: 32px;
  border-left: 2px solid var(--caution);
  padding: 12px 16px;
}

.cm-warning p,
.cm-empty p {
  margin: 0;
  color: var(--signal-tertiary);
  font-size: var(--type-body);
  line-height: 1.5;
  text-wrap: pretty;
}

.cm-warning p + p {
  margin-top: 4px;
}

.cm-empty {
  padding: 24px;
}

.cm-empty strong {
  display: block;
  margin-bottom: 8px;
  color: var(--signal-ink);
  font-size: var(--type-body);
}

.cm-initial {
  min-height: 200px;
  display: grid;
  align-content: center;
  margin-top: 16px;
}

.cm-section {
  min-width: 0;
  margin-top: 64px;
}

#cm-current {
  margin-top: 16px;
}

.cm-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 20px;
}

.cm-section-heading h2 {
  margin: 0;
  color: var(--signal-ink);
  font-size: var(--type-key);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.cm-section-heading > p {
  max-width: 520px;
  margin: 0;
  color: var(--signal-tertiary);
  font-size: var(--type-body);
  line-height: 1.5;
  text-align: right;
  text-wrap: pretty;
}

.cm-position-book,
.cm-operation-tape,
.cm-performance-grid,
.cm-profile-list,
.cm-history-book,
.cm-anchor-list {
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--wire);
  border-radius: var(--radius-panel);
  background: var(--terminal-raised);
}

.cm-position,
.cm-profile-list > details,
.cm-history-row {
  border-bottom: 1px solid var(--wire-soft);
}

.cm-position:last-child,
.cm-profile-list > details:last-child,
.cm-history-row:last-child {
  border-bottom: 0;
}

.cm-position > summary,
.cm-profile-list summary,
.cm-history-row > summary,
.cm-review > summary {
  min-height: 68px;
  cursor: pointer;
  list-style: none;
  transition: background-color 150ms ease-out, color 150ms ease-out;
}

.cm-position > summary::-webkit-details-marker,
.cm-profile-list summary::-webkit-details-marker,
.cm-history-row > summary::-webkit-details-marker,
.cm-review > summary::-webkit-details-marker {
  display: none;
}

.cm-position > summary:hover,
.cm-profile-list summary:hover,
.cm-history-row > summary:hover,
.cm-review > summary:hover {
  background: var(--tape-surface);
}

.cm-position > summary:active,
.cm-profile-list summary:active,
.cm-history-row > summary:active,
.cm-filters button:active,
.cm-pagination a:active {
  transform: scale(0.97);
}

.cm-position > summary:focus-visible,
.cm-profile-list summary:focus-visible,
.cm-history-row > summary:focus-visible,
.cm-review > summary:focus-visible,
.cm-filters input:focus-visible,
.cm-filters select:focus-visible,
.cm-filters button:focus-visible,
.cm-pagination a:focus-visible,
.cm-operation-tape a:focus-visible,
.cm-position-detail a:focus-visible,
.cm-anchor-list a:focus-visible {
  outline: 2px solid var(--wire-focus);
  outline-offset: 2px;
}

.cm-position > summary {
  display: grid;
  grid-template-columns: minmax(128px, 1fr) repeat(5, minmax(96px, 0.75fr)) 24px;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
}

.cm-position > summary > span {
  min-width: 0;
}

.cm-position > summary small,
.cm-symbol small,
.cm-profile-list summary small {
  display: block;
  margin-top: 6px;
  color: var(--signal-muted);
  font-size: var(--type-meta);
  line-height: 1.3;
}

.cm-position > summary > span:not(.cm-symbol) small {
  margin-top: 0;
  margin-bottom: 6px;
}

.cm-symbol strong {
  color: var(--signal-ink);
  font: 700 var(--type-key)/1 "Ubuntu Mono", "Nimbus Mono PS", monospace;
}

.cm-position > summary b {
  overflow-wrap: anywhere;
  color: var(--signal-secondary);
  font-size: var(--type-body);
  font-weight: 650;
}

.cm-number {
  font-family: "Ubuntu Mono", "Nimbus Mono PS", monospace;
  font-variant-numeric: tabular-nums;
}

.cm-return.state-profit {
  color: var(--profit);
}

.cm-return.state-risk {
  color: var(--risk);
}

.cm-return.state-flat,
.cm-return.state-unknown {
  color: var(--signal-secondary);
}

.cm-disclosure {
  width: 8px;
  height: 8px;
  justify-self: end;
  border-right: 2px solid var(--signal-muted);
  border-bottom: 2px solid var(--signal-muted);
  transform: rotate(45deg);
  transition: transform 150ms cubic-bezier(0.23, 1, 0.32, 1);
}

details[open] > summary .cm-disclosure {
  transform: rotate(225deg);
}

.cm-position-detail,
.cm-profile-list details > div,
.cm-history-row > div,
.cm-review > div {
  border-top: 1px solid var(--wire-soft);
  background: var(--tape-inset);
  padding: 16px;
}

.cm-position-detail dl {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
}

.cm-position-detail dl div {
  min-width: 0;
}

.cm-position-detail dt,
.cm-performance-grid dt {
  color: var(--signal-muted);
  font-size: var(--type-meta);
  line-height: 1.3;
}

.cm-position-detail dd,
.cm-performance-grid dd {
  margin: 6px 0 0;
  color: var(--signal-ink);
  font: 650 var(--type-body)/1.3 "Ubuntu Mono", "Nimbus Mono PS", monospace;
  font-variant-numeric: tabular-nums;
}

.cm-position-detail > p,
.cm-history-row > div p,
.cm-profile-list article p,
.cm-review p {
  margin: 16px 0 0;
  color: var(--signal-secondary);
  font-size: var(--type-body);
  line-height: 1.55;
  text-wrap: pretty;
}

.cm-position-detail a,
.cm-profile-list a,
.cm-history-row a,
.cm-operation-tape a,
.cm-anchor-list a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--tape-blue);
  font-size: var(--type-body);
  text-decoration: none;
  transition: color 150ms ease-out;
}

.cm-position-detail a:hover,
.cm-profile-list a:hover,
.cm-history-row a:hover,
.cm-operation-tape a:hover,
.cm-anchor-list a:hover {
  color: var(--profit);
}

.cm-operation-tape,
.cm-anchor-list {
  padding: 0;
  list-style: none;
}

.cm-operation-tape li {
  min-height: 56px;
  display: grid;
  grid-template-columns: 112px minmax(160px, 1fr) minmax(140px, 0.8fr) 80px;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid var(--wire-soft);
  padding: 8px 16px;
  box-shadow: inset 2px 0 0 var(--wire);
}

.cm-operation-tape li:last-child {
  border-bottom: 0;
}

.cm-operation-tape li.action-open,
.cm-operation-tape li.action-add {
  box-shadow: inset 2px 0 0 var(--profit);
}

.cm-operation-tape li.action-reduce {
  box-shadow: inset 2px 0 0 var(--caution);
}

.cm-operation-tape li.action-close {
  box-shadow: inset 2px 0 0 var(--risk);
}

.cm-operation-tape time,
.cm-anchor-list time,
.cm-profile-list time,
.cm-history-row time {
  color: var(--signal-muted);
  font: 650 var(--type-meta)/1.3 "Ubuntu Mono", "Nimbus Mono PS", monospace;
  font-variant-numeric: tabular-nums;
}

.cm-operation-tape strong {
  color: var(--signal-ink);
  font-size: var(--type-body);
}

.cm-operation-tape span {
  color: var(--signal-secondary);
  font-size: var(--type-body);
}

.cm-two-column {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.7fr);
  align-items: start;
  gap: 24px;
}

.cm-two-column > .cm-section {
  margin-top: 64px;
}

.cm-two-column .cm-section-heading {
  display: block;
}

.cm-two-column .cm-section-heading > p {
  margin-top: 12px;
  text-align: left;
}

.cm-performance-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cm-performance-grid div {
  min-height: 88px;
  padding: 16px;
  border-right: 1px solid var(--wire-soft);
  border-bottom: 1px solid var(--wire-soft);
}

.cm-performance-grid div:nth-child(2n) {
  border-right: 0;
}

.cm-performance-grid div:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.cm-performance-grid dd {
  font-size: var(--type-key);
}

.cm-sample-note {
  margin: 12px 0 0;
  color: var(--caution);
  font-size: var(--type-meta);
  line-height: 1.4;
}

.cm-profile-list summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
}

.cm-profile-list summary strong {
  color: var(--signal-ink);
  font-size: var(--type-body);
}

.cm-profile-list details > div > p {
  margin-top: 0;
}

.cm-profile-list article {
  margin-top: 16px;
  border-top: 1px solid var(--wire-soft);
  padding-top: 16px;
}

.cm-profile-list article p {
  margin-top: 8px;
}

.cm-filters {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(160px, 0.8fr) minmax(160px, 0.8fr) 96px;
  align-items: end;
  gap: 12px;
  margin-bottom: 16px;
  border: 1px solid var(--wire);
  border-radius: var(--radius-panel);
  background: var(--terminal-raised);
  padding: 16px;
}

.cm-filters label,
.cm-filters label > span {
  display: block;
}

.cm-filters label > span {
  margin-bottom: 8px;
  color: var(--signal-muted);
  font-size: var(--type-meta);
  font-weight: 650;
}

.cm-filters input,
.cm-filters select,
.cm-filters button {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--wire);
  border-radius: var(--radius-control);
  color: var(--signal-ink);
  font: 600 var(--type-body)/1.3 "Noto Sans CJK SC", "PingFang SC", "Microsoft YaHei", "Nimbus Sans", sans-serif;
}

.cm-filters input,
.cm-filters select {
  background: var(--tape-inset);
  padding: 8px 12px;
}

.cm-filters button {
  cursor: pointer;
  background: var(--tape-surface);
  padding: 8px 16px;
  transition: background-color 150ms ease-out, color 150ms ease-out, transform 120ms ease-out;
}

.cm-filters button:hover {
  color: var(--profit);
}

.cm-history-row > summary {
  display: grid;
  grid-template-columns: 112px minmax(160px, 1fr) minmax(180px, 0.9fr) 96px 20px;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
}

.cm-history-row > summary strong {
  color: var(--signal-ink);
  font-size: var(--type-body);
}

.cm-history-row > summary span {
  color: var(--signal-secondary);
  font-size: var(--type-body);
}

.cm-history-row > div p {
  margin-top: 0;
}

.cm-pagination {
  min-height: 52px;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 96px;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
}

.cm-pagination a,
.cm-pagination span {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--wire);
  border-radius: var(--radius-control);
  background: var(--terminal-raised);
  color: var(--signal-secondary);
  text-decoration: none;
  transition: color 150ms ease-out, background-color 150ms ease-out, transform 120ms ease-out;
}

.cm-pagination a:hover {
  color: var(--profit);
  background: var(--tape-surface);
}

.cm-pagination span {
  color: var(--signal-muted);
}

.cm-pagination strong {
  color: var(--signal-secondary);
  font: 650 var(--type-meta)/1.3 "Ubuntu Mono", "Nimbus Mono PS", monospace;
  text-align: center;
}

.cm-anchor-list li {
  min-height: 56px;
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr) 96px;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid var(--wire-soft);
  padding: 8px 16px;
}

.cm-anchor-list li:last-child {
  border-bottom: 0;
}

.cm-anchor-list strong {
  color: var(--signal-ink);
  font-size: var(--type-body);
}

.cm-review {
  margin-top: 32px;
}

.cm-review > summary {
  min-height: 52px;
  display: flex;
  align-items: center;
  padding: 8px 16px;
  color: var(--signal-secondary);
  font-size: var(--type-body);
}

.cm-review p:first-child {
  margin-top: 0;
}

@media (max-width: 980px) {
  .cm-hero,
  .cm-two-column {
    grid-template-columns: 1fr;
  }

  .cm-hero {
    align-items: start;
    gap: 32px;
  }

  .cm-ledger-status {
    max-width: 520px;
  }

  .cm-two-column > .cm-section + .cm-section {
    margin-top: 24px;
  }
}

@media (max-width: 840px) {
  .cm-section-heading {
    display: block;
  }

  .cm-section-heading > p {
    margin-top: 12px;
    text-align: left;
  }

  .cm-position > summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .cm-symbol,
  .cm-position > summary .cm-disclosure {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .cm-position > summary > span:not(.cm-symbol) {
    border-top: 1px solid var(--wire-soft);
    padding-top: 12px;
  }

  .cm-position-detail dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cm-operation-tape li {
    grid-template-columns: 112px minmax(0, 1fr) 80px;
  }

  .cm-operation-tape li > span {
    grid-column: 2;
  }

  .cm-operation-tape li > a {
    grid-column: 3;
    grid-row: 1 / 3;
  }

  .cm-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cm-history-row > summary {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 20px;
  }

  .cm-history-row > summary time {
    grid-column: 1;
  }

  .cm-history-row > summary strong {
    grid-column: 2;
  }

  .cm-history-row > summary span {
    grid-column: span 1;
  }

  .cm-history-row > summary .cm-disclosure {
    grid-column: 3;
    grid-row: 1;
  }
}

@media (max-width: 600px) {
  .cm-main {
    padding-block: 32px 56px;
  }

  .cm-hero {
    padding-bottom: 32px;
  }

  .cm-hero h1 {
    line-height: 1.18;
  }

  .cm-section {
    margin-top: 48px;
  }

  #cm-current {
    margin-top: 0;
  }

  .cm-two-column > .cm-section {
    margin-top: 48px;
  }

  .cm-position > summary,
  .cm-position-detail dl,
  .cm-performance-grid,
  .cm-filters {
    grid-template-columns: 1fr;
  }

  .cm-symbol,
  .cm-position > summary .cm-disclosure {
    grid-column: 1;
  }

  .cm-position > summary > span:not(.cm-symbol) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(112px, auto);
    align-items: baseline;
    gap: 12px;
  }

  .cm-position > summary > span:not(.cm-symbol) small {
    margin: 0;
  }

  .cm-position > summary > span:not(.cm-symbol) b {
    text-align: right;
  }

  .cm-operation-tape li {
    grid-template-columns: 1fr auto;
    gap: 8px 12px;
    padding-block: 12px;
  }

  .cm-operation-tape li time,
  .cm-operation-tape li strong,
  .cm-operation-tape li > span {
    grid-column: 1;
  }

  .cm-operation-tape li > a {
    grid-column: 2;
    grid-row: 1 / 4;
  }

  .cm-performance-grid div,
  .cm-performance-grid div:nth-child(2n),
  .cm-performance-grid div:nth-last-child(-n + 2) {
    border-right: 0;
    border-bottom: 1px solid var(--wire-soft);
  }

  .cm-performance-grid div:last-child {
    border-bottom: 0;
  }

  .cm-history-row > summary {
    grid-template-columns: minmax(0, 1fr) 20px;
    gap: 8px 12px;
  }

  .cm-history-row > summary time,
  .cm-history-row > summary strong,
  .cm-history-row > summary span {
    grid-column: 1;
  }

  .cm-history-row > summary .cm-disclosure {
    grid-column: 2;
    grid-row: 1;
  }

  .cm-pagination {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .cm-pagination strong {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .cm-pagination a,
  .cm-pagination span {
    grid-row: 2;
  }

  .cm-anchor-list li {
    grid-template-columns: 1fr auto;
    gap: 4px 12px;
    padding-block: 12px;
  }

  .cm-anchor-list li strong {
    grid-column: 1;
  }

  .cm-anchor-list li a {
    grid-column: 2;
    grid-row: 1 / 3;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cm-position > summary,
  .cm-profile-list summary,
  .cm-history-row > summary,
  .cm-review > summary,
  .cm-disclosure,
  .cm-filters button,
  .cm-pagination a {
    transition-duration: 0.01ms;
  }
}
