:root {
  color-scheme: light;
  --bg: #f4f6f8;
  --surface: #ffffff;
  --surface-muted: #eef3f3;
  --text: #1f2933;
  --muted: #64707d;
  --border: #d7dee5;
  --accent: #117a7a;
  --accent-strong: #0d5f5f;
  --warn: #b45309;
  --danger: #b42318;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
}

.app-header {
  align-items: center;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: grid;
  column-gap: 12px;
  grid-template-columns: 252px minmax(0, 1fr);
  row-gap: 10px;
  padding: 10px 18px;
}

.public-risk-disclaimer {
  background: #fff8ea;
  border: 1px solid #edcf9b;
  border-radius: 8px;
  color: var(--warn);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  margin: 10px 18px 0;
  padding: 9px 14px;
  text-align: center;
}

.brand-heading {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: center;
  min-height: 56px;
  min-width: 0;
  text-align: center;
}

.brand-logo {
  border-radius: 50%;
  flex: 0 0 56px;
  height: 56px;
  object-fit: cover;
  width: 56px;
}

.header-toolbar {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  justify-content: space-between;
  min-width: 0;
  padding-left: 14px;
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-size: 22px;
  font-weight: 700;
  white-space: nowrap;
}

.brand-heading h1 {
  font-size: 40px;
  line-height: 1.05;
  text-align: center;
}

h2 {
  font-size: 16px;
}

p,
span,
label {
  color: var(--muted);
  font-size: 13px;
}

button {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  min-height: 34px;
  padding: 7px 12px;
}

button:hover {
  border-color: var(--accent);
}

button.danger {
  border-color: #e2b6b0;
  color: var(--danger);
}

button.danger:hover {
  background: #fff4f2;
  border-color: #d66b5f;
}

button.primary,
.tab-list button.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.tab-list button {
  position: relative;
}

.tab-list button.loading {
  cursor: progress;
}

.tab-list button.loading::after {
  animation: tab-loading-spin 0.8s linear infinite;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  content: "";
  height: 13px;
  margin-top: -6.5px;
  opacity: 0.9;
  position: absolute;
  right: 11px;
  top: 50%;
  width: 13px;
}

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

button:disabled {
  cursor: wait;
  opacity: 0.65;
}

input {
  border: 1px solid var(--border);
  border-radius: 6px;
  font: inherit;
  margin-left: 6px;
  padding: 6px 8px;
  width: 88px;
}

.header-actions,
.calc-controls,
.panel-actions,
.panel-title,
.table-refresh-controls {
  align-items: center;
  display: flex;
  gap: 10px;
}

.table-refresh-controls[hidden] {
  display: none;
}

.header-actions {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: 8px;
  justify-content: flex-end;
  margin-left: auto;
  min-width: 0;
}

.header-actions button,
.table-refresh-controls button {
  min-height: 32px;
  padding: 6px 10px;
}

.auto-refresh-control {
  align-items: center;
  display: inline-flex;
  gap: 6px;
}

.auto-refresh-control input {
  margin-left: 0;
  padding-left: 6px;
  padding-right: 6px;
  width: 54px;
}

.logout-form {
  align-items: center;
  display: inline-flex;
  gap: 8px;
  margin: 0;
  min-width: 0;
}

.public-account-menu {
  min-width: 0;
  position: relative;
}

.public-account-trigger {
  align-items: center;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  gap: 6px;
  min-height: 32px;
  min-width: 0;
  padding: 6px 10px;
  white-space: nowrap;
}

.public-account-trigger::-webkit-details-marker {
  display: none;
}

.public-account-trigger::marker {
  content: "";
}

.public-account-trigger:focus-visible {
  outline: 2px solid rgba(17, 122, 122, 0.32);
  outline-offset: 2px;
}

.public-account-caret {
  color: var(--muted);
  font-size: 11px;
  line-height: 1;
}

.public-account-popover {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(31, 41, 51, 0.14);
  display: grid;
  gap: 12px;
  min-width: min(330px, calc(100vw - 24px));
  padding: 14px;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  width: min(350px, calc(100vw - 24px));
  z-index: 20;
}

.public-account-logout {
  justify-self: stretch;
  min-height: 36px;
  padding: 6px 10px;
}

.public-user-label {
  color: var(--text);
  font-weight: 700;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.public-user-label--plain {
  display: inline-block;
}

.public-expiry-label {
  color: var(--muted);
  font-size: 13px;
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.public-account-profile {
  align-items: center;
  display: flex;
  gap: 10px;
  min-width: 0;
}

.public-account-avatar {
  align-items: center;
  background: #edf7f5;
  border-radius: 999px;
  color: var(--accent-strong);
  display: inline-flex;
  flex: 0 0 42px;
  font-size: 18px;
  font-weight: 900;
  height: 42px;
  justify-content: center;
  line-height: 1;
  text-transform: uppercase;
  width: 42px;
}

.public-account-profile-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.public-account-profile-name {
  color: var(--text);
  font-size: 19px;
  font-weight: 850;
  line-height: 1.18;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.public-account-status-list {
  background: linear-gradient(180deg, #f8fbfc, #ffffff);
  border: 1px solid #e1e9ef;
  border-radius: 12px;
  display: grid;
  gap: 10px;
  padding: 11px 12px;
}

.public-account-status-row {
  align-items: center;
  column-gap: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  line-height: 1.35;
  min-height: 22px;
  min-width: 0;
}

.public-account-status-label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.public-account-status-value {
  color: var(--text);
  flex: 0 0 auto;
  font-size: 15px;
  font-weight: 800;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.public-account-status-row--push .public-account-status-value {
  color: var(--accent-strong);
}

.public-account-status-row--entitlement .public-account-status-label {
  color: #60717c;
}

.public-account-status-row--entitlement .public-account-status-value {
  color: var(--accent-strong);
}

.public-merit-label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.public-merit-button {
  justify-self: stretch;
  min-height: 36px;
  padding: 6px 10px;
}

.feedback-entry--header {
  background: #f2fbfa;
  border-color: #c7dcdc;
  color: var(--accent-strong);
  font-weight: 800;
  white-space: nowrap;
}

.mobile-filter-sheet-handle,
.mobile-filter-sheet-head,
.mobile-filter-sheet-tip,
.mobile-filter-sheet-actions {
  display: none;
}

#autoRefreshStatus {
  min-width: 0;
  white-space: nowrap;
}

.layout {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  padding: 12px 18px 18px;
}

.workspace {
  display: grid;
  gap: 12px;
  grid-template-columns: 252px minmax(0, 1fr);
  min-width: 0;
}

.side-panel,
.data-panel,
.calc-panel,
.log-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  min-width: 0;
}

.side-panel {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 107px);
  min-height: 660px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 14px;
}

.side-panel-board-tag {
  align-items: center;
  appearance: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  cursor: pointer;
  display: flex;
  font-family: inherit;
  font-size: 17px;
  font-weight: 800;
  justify-content: center;
  line-height: 1;
  margin-bottom: 14px;
  min-height: 38px;
  padding: 8px 12px;
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
  white-space: nowrap;
  width: 100%;
}

.side-panel-board-tag:hover {
  border-color: var(--accent);
}

.side-panel-board-tag.active,
.side-panel-board-tag[aria-current="page"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.side-panel-board-tag.active:hover,
.side-panel-board-tag[aria-current="page"]:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}

.side-panel-board-tag:focus-visible {
  outline: 2px solid rgba(20, 135, 132, 0.28);
  outline-offset: 2px;
}

.side-panel-board-tag[aria-busy="true"] {
  cursor: progress;
}

.side-panel-board-tag[disabled] {
  cursor: not-allowed;
  opacity: 0.55;
}

.data-panel {
  position: relative;
}

.data-panel-watermark-layer {
  --watermark-tilt: 32deg;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  user-select: none;
  z-index: 1;
}

.data-panel .data-panel-watermark {
  color: var(--accent-strong);
  font-size: var(--watermark-font-size, clamp(88px, 9vw, 178px));
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  max-width: min(980px, calc(100% - 48px));
  opacity: 0.125;
  overflow: hidden;
  position: absolute;
  text-align: center;
  text-overflow: ellipsis;
  transform: translate(-50%, -50%) rotate(var(--watermark-tilt)) scale(var(--watermark-scale, 1));
  transform-origin: center;
  white-space: nowrap;
}

.data-panel-header {
  align-items: center;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  min-height: 66px;
  padding: 10px 14px;
}

.data-panel-header[hidden] {
  display: none;
}

.data-panel--portfolio-reports .data-panel-header {
  justify-content: flex-start;
  position: relative;
}

.data-panel--portfolio-reports .active-table-heading {
  justify-items: center;
  left: var(--portfolio-title-center-x, 50%);
  max-width: calc(100% - 28px);
  position: absolute;
  text-align: center;
  top: 50%;
  transform: translate(-50%, -50%);
  width: max-content;
}

.table-refresh-controls {
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
  margin-left: auto;
  min-width: 0;
}

.active-table-heading {
  display: grid;
  gap: 5px;
  min-width: 0;
}

#activeTableTitle {
  font-size: 18px;
  line-height: 1.25;
}

.active-table-meta {
  align-items: center;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  line-height: 1.4;
}

.active-table-meta-main {
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
}

.active-table-meta-note {
  color: var(--muted);
  font-size: 13px;
}

.active-table-filter-summary {
  color: var(--muted);
  display: none;
  font-size: 12px;
  font-weight: 650;
  min-width: 0;
}

.active-table-meta-chip {
  background: #e8f4f4;
  border: 1px solid #b7dcdc;
  border-radius: 999px;
  color: var(--accent-strong);
  display: inline-flex;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  padding: 5px 8px;
  white-space: nowrap;
}

.side-panel > h2,
.side-nav-section > h2 {
  font-size: 24px;
  line-height: 1.2;
  margin-top: 4px;
  text-align: center;
}

.side-nav-shell {
  background: linear-gradient(180deg, #f7fbfb 0%, #eef7f6 100%);
  border: 1px solid #bfd2d2;
  border-radius: 8px;
  display: grid;
  gap: 12px;
  padding: 12px 10px;
}

.side-nav-shell--data-timing {
  gap: 8px;
}

.side-nav-shell[hidden] {
  display: none;
}

.side-nav-shell + .side-nav-shell {
  margin-top: 12px;
}

.side-nav-shell-head {
  align-items: center;
  display: flex;
  justify-content: space-between;
  min-width: 0;
}

.side-nav-shell-head h2 {
  color: var(--accent-strong);
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  margin: 0;
}

.side-nav-shell-head span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
}

.side-nav-shell .side-nav-section {
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid #cfe1e1;
  border-radius: 7px;
  display: grid;
  gap: 8px;
  padding: 10px;
}

.side-nav-shell .side-nav-section > h2,
.side-nav-section--strategy-list > h2 {
  align-items: center;
  display: flex;
  font-size: 16px;
  font-weight: 800;
  gap: 8px;
  line-height: 1.2;
  margin: 0;
  text-align: left;
}

.side-nav-shell .side-nav-section > h2::before,
.side-nav-section--strategy-list > h2::before {
  background: var(--accent);
  border-radius: 999px;
  content: "";
  flex: 0 0 auto;
  height: 18px;
  width: 4px;
}

.side-nav-shell .tab-list {
  gap: 6px;
  margin-top: 0;
}

.side-nav-shell .side-controls {
  border-top-color: #cfe1e1;
  margin-top: 0;
  padding-top: 10px;
}

.side-nav-shell .side-controls[hidden] {
  display: none;
}

.side-nav-shell--strategy {
  background: linear-gradient(180deg, #fffaf1 0%, #fff4df 100%);
  border-color: #ebc783;
}

.side-nav-shell--strategy .side-nav-shell-head h2,
.side-nav-shell--strategy .side-nav-section > h2 {
  color: #8a3f08;
}

.side-nav-shell--strategy .side-nav-section,
.side-nav-shell--strategy .side-nav-section--strategy-list {
  border-color: #efd2a3;
}

.side-nav-shell--strategy .side-nav-section > h2::before,
.side-nav-section--strategy-list > h2::before {
  background: #b45309;
}

.side-nav-shell--portfolio {
  background: #fbfcfd;
  border-color: var(--border);
}

.side-nav-shell--portfolio .side-nav-shell-head h2 {
  color: var(--text);
}

.side-nav-section {
  display: grid;
  gap: 0;
}

.side-nav-section[hidden] {
  display: none;
}

.side-nav-section + .side-nav-section,
.side-controls + .side-nav-section {
  border-top: 1px solid var(--border);
  margin-top: 28px;
  padding-top: 22px;
}

.side-nav-shell .side-nav-section + .side-nav-section,
.side-nav-shell .side-controls + .side-nav-section {
  border-top: 0;
  margin-top: 0;
  padding-top: 10px;
}

.side-nav-shell--data-timing .side-controls[hidden] + .side-nav-section--tech-indicator {
  margin-top: 0;
  padding-top: 0;
}

.side-controls:not(:has(.side-control-row:not([hidden]))) {
  display: none;
}

.side-nav-section + .side-nav-section.side-nav-section--strategy,
.side-controls + .side-nav-section.side-nav-section--strategy,
.side-nav-section + .side-nav-section.side-nav-section--tech-indicator,
.side-controls + .side-nav-section.side-nav-section--tech-indicator {
  border-top: 0;
  margin-top: 32px;
  padding-top: 24px;
  position: relative;
}

.side-nav-section--strategy::before,
.side-nav-section--tech-indicator::before {
  background: linear-gradient(
    90deg,
    #d4e3e3 0 calc(50% - 32px),
    var(--accent) calc(50% - 32px) calc(50% + 32px),
    #d4e3e3 calc(50% + 32px) 100%
  );
  border-radius: 999px;
  content: "";
  height: 3px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.side-nav-shell .side-nav-section--strategy::before,
.side-nav-shell .side-nav-section--tech-indicator::before {
  display: none;
}

.tab-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.tab-list button {
  font-size: 17px;
  font-weight: 700;
}

.mobile-filter-bar {
  display: none;
}

.mobile-filter-bar[hidden] {
  display: none;
}

.side-controls {
  align-content: start;
  border-top: 1px solid var(--border);
  display: grid;
  flex: 0 1 auto;
  gap: 0;
  margin-top: 14px;
  min-height: 0;
  overflow-y: auto;
  padding-top: 12px;
}

@media (min-width: 861px) {
  .data-panel > .side-controls--data-panel {
    align-items: center;
    background: #fff;
    border: 1px solid #d8e6e6;
    border-left: 0;
    border-right: 0;
    box-shadow: 0 1px 0 rgba(31, 41, 51, 0.03);
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    min-height: 58px;
    overflow: visible;
    padding: 10px 12px;
  }

  .data-panel > .side-controls--data-panel[hidden] {
    display: none;
  }

  .data-panel > .side-controls--data-panel .mobile-filter-sheet-handle,
  .data-panel > .side-controls--data-panel .mobile-filter-sheet-head,
  .data-panel > .side-controls--data-panel .mobile-filter-sheet-tip,
  .data-panel > .side-controls--data-panel .mobile-filter-sheet-actions {
    display: none;
  }

  .data-panel > .side-controls--data-panel .side-control-group {
    align-items: center;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    gap: 10px;
    padding: 0;
  }

  .data-panel > .side-controls--data-panel .side-control-group--filters {
    flex: 1 1 auto;
  }

  .data-panel > .side-controls--data-panel .side-control-group--filters .side-control-row {
    order: 2;
  }

  .data-panel > .side-controls--data-panel .side-control-group:has(.side-control-row:not([hidden])) {
    display: flex;
  }

  .data-panel > .side-controls--data-panel .side-control-group + .side-control-group:has(.side-control-row:not([hidden])) {
    border-left: 1px solid #e2e8ee;
    border-top: 0;
    padding-left: 10px;
    padding-top: 0;
  }

  .data-panel > .side-controls--data-panel .side-control-group-title {
    align-items: center;
    color: var(--accent-strong);
    display: inline-flex;
    font-size: 13px;
    font-weight: 850;
    line-height: 1.2;
    min-height: 32px;
    white-space: nowrap;
  }

  .data-panel > .side-controls--data-panel .side-control-group-title::before {
    display: none;
  }

  .data-panel > .side-controls--data-panel .side-control-row {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 6px;
    min-height: 32px;
    padding: 0;
  }

  .data-panel > .side-controls--data-panel .side-control-row[hidden] {
    display: none;
  }

  .data-panel > .side-controls--data-panel .lof-code-filter,
  .data-panel > .side-controls--data-panel .filter-reset-row {
    padding: 0;
  }

  .data-panel > .side-controls--data-panel .side-control-text {
    align-items: center;
    display: inline-flex;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
  }

  .data-panel > .side-controls--data-panel .lof-code-filter .side-control-text {
    height: auto;
    overflow: visible;
    position: static;
    width: auto;
  }

  .data-panel > .side-controls--data-panel .side-control-row input:not([type="checkbox"]) {
    background: #fff;
    border-color: #cedbe4;
    border-radius: 7px;
    grid-column: auto;
    justify-self: auto;
    min-height: 28px;
    padding: 4px 7px;
    width: 54px;
  }

  .data-panel > .side-controls--data-panel .side-control-row.lof-code-filter input:not([type="checkbox"]) {
    border-radius: 7px;
    width: 112px;
  }

  .data-panel > .side-controls--data-panel .lof-trade-filter input {
    width: 54px;
  }

  .data-panel > .side-controls--data-panel .side-control-row input[type="checkbox"] {
    flex: 0 0 40px;
    height: 22px;
    min-height: 22px;
    padding: 0;
    width: 40px;
  }

  .data-panel > .side-controls--data-panel .unit-input {
    align-items: center;
    display: inline-flex;
    gap: 5px;
  }

  .data-panel > .side-controls--data-panel .unit-input span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    grid-column: auto;
  }

  .data-panel > .side-controls--data-panel .qdii-filter:not([hidden]) {
    margin-left: 8px;
    padding-left: 16px;
    position: relative;
  }

  .data-panel > .side-controls--data-panel .qdii-filter:not([hidden])::before {
    background: #e2e8ee;
    bottom: 5px;
    content: "";
    left: 0;
    position: absolute;
    top: 5px;
    width: 1px;
  }

  .data-panel > .side-controls--data-panel .side-control-group--filters .filter-reset-row {
    flex: 0 0 auto;
    margin-top: 0;
    order: 3;
  }

  .data-panel > .side-controls--data-panel .filter-reset-row button {
    background: #f8fafc;
    border-color: #d5e0e8;
    color: #4b5c68;
    font-size: 13px;
    font-weight: 750;
    min-height: 32px;
    padding: 0 14px;
    width: auto;
  }

  .data-panel > .side-controls--data-panel .filter-reset-row button.is-reset-feedback {
    background: #e8f4f4;
    border-color: #9fd0d0;
    color: var(--accent-strong);
  }
}

.side-control-group {
  display: none;
  gap: 6px;
  padding: 0 0 12px;
}

.side-control-group:has(.side-control-row:not([hidden])) {
  display: grid;
}

.side-control-group + .side-control-group:has(.side-control-row:not([hidden])) {
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

.side-control-group-title {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-size: 13px;
  font-weight: 700;
  gap: 8px;
  line-height: 1.2;
}

.side-control-group-title::before {
  background: var(--accent);
  border-radius: 999px;
  content: "";
  flex: 0 0 auto;
  height: 18px;
  width: 4px;
}

.side-control-row {
  align-items: center;
  column-gap: 6px;
  display: grid;
  font-size: 14px;
  grid-template-columns: minmax(0, 1fr) 64px 34px;
  min-height: 32px;
}

.side-control-text {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  min-width: 0;
  white-space: nowrap;
}

.side-control-row input {
  font-size: 14px;
  grid-column: 2;
  justify-self: end;
  margin: 0;
  min-height: 32px;
  width: 64px;
}

.side-control-row[hidden] {
  display: none;
}

.side-control-row:has(input[type="checkbox"]) {
  border-radius: 6px;
}

.side-control-row:has(input[type="checkbox"]:hover) {
  background: #f5f8fa;
}

.unit-input {
  display: contents;
}

.unit-input span {
  font-size: 13px;
  grid-column: 3;
  white-space: nowrap;
}

.lof-trade-filter input {
  text-align: right;
  width: 64px;
}

.lof-code-filter input {
  grid-column: 1;
  justify-self: stretch;
  width: 100%;
}

.lof-code-filter {
  align-items: stretch;
  gap: 6px;
  grid-template-columns: minmax(0, 1fr);
}

.lof-code-filter .side-control-text {
  height: 1px;
  overflow: hidden;
  position: absolute;
  width: 1px;
}

.filter-reset-row {
  grid-template-columns: minmax(0, 1fr);
  margin-top: 6px;
}

.filter-reset-row button {
  font-size: 14px;
  grid-column: 1;
  justify-self: center;
  min-height: 32px;
  padding: 0 14px;
  width: min(150px, 100%);
}

.side-control-row input[type="checkbox"] {
  appearance: none;
  background:
    radial-gradient(circle at 10px 50%, #fff 0 7px, transparent 7.5px),
    #d7e1ea;
  border-color: #c6d2dc;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(100, 112, 125, 0.08);
  cursor: pointer;
  grid-column: 2;
  height: 22px;
  justify-self: center;
  min-height: 22px;
  padding: 0;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  width: 40px;
}

.side-control-row input[type="checkbox"]:checked {
  background:
    radial-gradient(circle at 30px 50%, #fff 0 7px, transparent 7.5px),
    var(--accent);
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(13, 95, 95, 0.12);
}

.side-control-row input[type="checkbox"]:focus-visible {
  outline: 2px solid rgba(17, 122, 122, 0.28);
  outline-offset: 2px;
}

.panel-title {
  border-bottom: 1px solid var(--border);
  justify-content: space-between;
  padding: 12px 14px;
}

.panel-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.table-wrap {
  cursor: default;
  max-height: 430px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-color: #8fbebb #f4f7f7;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  user-select: text;
  -webkit-user-select: text;
}

.table-wrap::-webkit-scrollbar {
  height: 14px;
  width: 14px;
}

.table-wrap::-webkit-scrollbar-track {
  background: #f4f7f7;
}

.table-wrap::-webkit-scrollbar-thumb {
  background: #8fbebb;
  border: 3px solid #f4f7f7;
  border-radius: 999px;
}

.table-wrap::-webkit-scrollbar-corner {
  background: #f4f7f7;
}

.table-scrollbar-row {
  background: #fff;
  border-top: 1px solid var(--border);
  padding: 8px 10px 10px;
}

.table-scrollbar-row[hidden] {
  display: none;
}

.table-scrollbar-range {
  appearance: none;
  background: transparent;
  cursor: pointer;
  display: block;
  height: 18px;
  margin: 0;
  min-height: 18px;
  padding: 0;
  width: 100%;
}

.table-scrollbar-range::-webkit-slider-runnable-track {
  background: #f4f7f7;
  border: 1px solid #d6e2e1;
  border-radius: 999px;
  height: 12px;
}

.table-scrollbar-range::-webkit-slider-thumb {
  appearance: none;
  background: #8fbebb;
  border: 2px solid #f4f7f7;
  border-radius: 999px;
  height: 18px;
  margin-top: -4px;
  width: 56px;
}

.table-scrollbar-range:focus-visible {
  outline: 2px solid rgba(17, 122, 122, 0.28);
  outline-offset: 3px;
}

.table-scrollbar-range::-moz-range-track {
  background: #f4f7f7;
  border: 1px solid #d6e2e1;
  border-radius: 999px;
  height: 12px;
}

.table-scrollbar-range::-moz-range-thumb {
  background: #8fbebb;
  border: 2px solid #f4f7f7;
  border-radius: 999px;
  height: 16px;
  width: 56px;
}

.data-panel-status {
  align-items: center;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(31, 41, 51, 0.08);
  display: grid;
  gap: 8px;
  justify-items: center;
  left: 50%;
  min-width: min(320px, calc(100% - 40px));
  padding: 22px 26px;
  pointer-events: none;
  position: absolute;
  text-align: center;
  top: 38%;
  transform: translate(-50%, -50%);
  z-index: 6;
}

.data-panel-status[hidden] {
  display: none;
}

.data-panel-status strong {
  color: var(--text);
  font-size: 16px;
  line-height: 1.3;
}

.data-panel-status-detail {
  line-height: 1.4;
}

.data-panel-status-spinner {
  animation: tab-loading-spin 0.8s linear infinite;
  border: 3px solid rgba(17, 122, 122, 0.18);
  border-right-color: var(--accent);
  border-radius: 50%;
  height: 28px;
  width: 28px;
}

.data-panel-status[data-state="error"] .data-panel-status-spinner {
  animation: none;
  border-color: var(--danger);
}

.data-panel .table-wrap {
  height: clamp(580px, calc(100vh - 236px), 1130px);
  max-height: clamp(580px, calc(100vh - 236px), 1130px);
}

.portfolio-report-panel {
  align-content: start;
  background: #f8fafc;
  container-name: portfolio-report;
  container-type: inline-size;
  display: grid;
  gap: 10px;
  grid-auto-rows: max-content;
  height: clamp(580px, calc(100vh - 236px), 1130px);
  max-height: clamp(580px, calc(100vh - 236px), 1130px);
  overflow: auto;
  padding: 14px;
}

.portfolio-report-panel[hidden] {
  display: none;
}

.fund-diagnosis-panel,
.fund-selection-panel,
.fund-research-panel {
  align-content: start;
  background: #f8fafc;
  display: grid;
  gap: 14px;
  height: clamp(580px, calc(100vh - 236px), 1130px);
  max-height: clamp(580px, calc(100vh - 236px), 1130px);
  overflow: auto;
  padding: 14px;
}

.fund-diagnosis-panel[hidden],
.fund-selection-panel[hidden],
.fund-research-panel[hidden] {
  display: none;
}

.fund-diagnosis-query,
.fund-selection-query,
.fund-research-query,
.fund-diagnosis-hero,
.fund-diagnosis-card,
.fund-diagnosis-foot,
.fund-diagnosis-empty,
.fund-selection-empty,
.fund-research-empty,
.fund-selection-table-shell {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.fund-diagnosis-query,
.fund-selection-query,
.fund-research-query {
  align-items: center;
  display: flex;
  gap: 14px;
  justify-content: space-between;
  padding: 14px 16px;
}

.fund-diagnosis-query h3,
.fund-selection-query h3,
.fund-research-query h3 {
  color: var(--text);
  font-size: 18px;
  line-height: 1.25;
  margin: 0;
}

.fund-diagnosis-meta,
.fund-diagnosis-status,
.fund-selection-meta,
.fund-selection-status {
  color: var(--muted);
  font-size: 13px;
}

.fund-diagnosis-form,
.fund-selection-form {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.fund-diagnosis-code,
.fund-selection-form label,
.fund-selection-cache-tools label,
.fund-selection-heading {
  display: grid;
  gap: 4px;
}

.fund-diagnosis-code span,
.fund-selection-cache-tools label span,
.fund-selection-form label span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.fund-diagnosis-code input,
.fund-selection-cache-tools input,
.fund-selection-form input,
.fund-selection-form select {
  border: 1px solid #cbd6dd;
  border-radius: 6px;
  font-size: 14px;
  height: 34px;
  padding: 6px 10px;
  width: 150px;
}

.fund-selection-cache-tools {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.fund-selection-cache-tools[hidden] {
  display: none;
}

.fund-selection-cache-tools input {
  width: 110px;
}

.fund-selection-codes input {
  width: 210px;
}

.fund-selection-cache-tools button {
  border: 1px solid #cbd6dd;
  border-radius: 6px;
  height: 34px;
  padding: 0 12px;
}

.fund-diagnosis-result {
  display: grid;
  gap: 14px;
}

.fund-selection-result {
  min-width: 0;
}

.fund-diagnosis-hero {
  align-items: stretch;
  display: grid;
  gap: 16px;
  grid-template-columns: 168px minmax(0, 1fr);
  padding: 16px;
}

.fund-diagnosis-score {
  align-content: center;
  background: #eef7f5;
  border: 1px solid #cbe2de;
  border-radius: 8px;
  display: grid;
  justify-items: center;
  min-height: 150px;
  padding: 14px;
}

.fund-diagnosis-score span,
.fund-diagnosis-score small {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.fund-diagnosis-score strong {
  color: var(--accent);
  font-size: 48px;
  line-height: 1.05;
}

.fund-diagnosis-copy {
  align-content: center;
  display: grid;
  gap: 10px;
  min-width: 0;
}

.fund-diagnosis-fund {
  display: grid;
  gap: 4px;
}

.fund-diagnosis-fund strong {
  color: var(--text);
  font-size: 18px;
  line-height: 1.3;
}

.fund-diagnosis-fund span,
.fund-diagnosis-copy p,
.fund-diagnosis-card p,
.fund-diagnosis-foot span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}

.fund-diagnosis-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.fund-diagnosis-flags span {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 999px;
  color: #9a3412;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 8px;
}

.fund-diagnosis-dimensions {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.fund-diagnosis-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 14px;
}

.fund-diagnosis-card[data-status="missing"] {
  background: #fbfcfd;
}

.fund-diagnosis-card-head {
  align-items: start;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.fund-diagnosis-card-head div {
  display: grid;
  gap: 3px;
}

.fund-diagnosis-card-head strong {
  color: var(--text);
  font-size: 15px;
}

.fund-diagnosis-card-head span {
  color: var(--muted);
  font-size: 12px;
}

.fund-diagnosis-card-head b {
  color: var(--accent);
  font-size: 24px;
  line-height: 1;
}

.fund-diagnosis-metric-list {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fund-diagnosis-metric-list span {
  background: #f5f8fa;
  border: 1px solid #e0e7ec;
  border-radius: 6px;
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 7px 8px;
}

.fund-diagnosis-metric-list small {
  color: var(--muted);
  font-size: 11px;
}

.fund-diagnosis-metric-list strong {
  color: var(--text);
  font-size: 13px;
}

.fund-diagnosis-foot {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
}

.fund-diagnosis-foot div {
  display: grid;
  gap: 4px;
}

.fund-diagnosis-foot strong {
  color: var(--text);
  font-size: 13px;
}

.fund-diagnosis-empty,
.fund-selection-empty {
  color: var(--muted);
  display: grid;
  min-height: 180px;
  padding: 24px;
  place-items: center;
}

.fund-selection-table-shell {
  overflow: auto;
}

.fund-selection-table {
  border-collapse: separate;
  border-spacing: 0;
  min-width: 1280px;
  width: 100%;
}

.fund-selection-table th,
.fund-selection-table td {
  border-bottom: 1px solid #e6edf2;
  color: var(--text);
  font-size: 13px;
  padding: 9px 10px;
  text-align: right;
  vertical-align: middle;
  white-space: nowrap;
}

.fund-selection-table th {
  background: #f5f8fa;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  position: sticky;
  top: 0;
  z-index: 1;
}

.fund-selection-table th:first-child,
.fund-selection-table td:first-child,
.fund-selection-table th:nth-child(2),
.fund-selection-table td:nth-child(2) {
  text-align: left;
}

.fund-selection-table td:first-child {
  display: grid;
  gap: 3px;
  min-width: 240px;
  white-space: normal;
}

.fund-selection-table td:first-child strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.25;
}

.fund-selection-table td:first-child span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.fund-selection-table td:nth-child(2) b {
  color: var(--accent);
  font-size: 18px;
}

.fund-selection-table tr:hover td {
  background: #fbfdff;
}

.portfolio-report-panel--holding-only {
  height: auto;
  max-height: none;
  min-height: 0;
  overflow: visible;
}

.portfolio-report-panel--holding-only #portfolioHoldingsTitle {
  display: none;
}

.portfolio-report-panel--custom #portfolioHoldingsPanel {
  min-width: 0;
  width: auto;
}

.portfolio-report-panel--custom #portfolioHoldingsGrid {
  display: block;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  width: 100%;
}

.portfolio-view-bar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  justify-content: flex-start;
  min-width: 0;
}

.portfolio-report-toolbar {
  align-items: center;
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
  min-width: 0;
}

.portfolio-report-toolbar[hidden] {
  display: none;
}

.portfolio-refresh-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-start;
  min-width: 0;
}

.portfolio-report-status {
  color: var(--muted);
  font-size: 13px;
}

.portfolio-report-section {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.portfolio-report-section[hidden] {
  display: none;
}

.portfolio-report-section--correlation {
  margin-top: 18px;
}

.portfolio-report-panel > .portfolio-performance-panel {
  margin-top: 12px;
  max-width: min(100%, var(--portfolio-main-row-width, 100%));
  width: min(100%, var(--portfolio-main-row-width, 100%));
}

.portfolio-report-main-row {
  align-items: start;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr);
  justify-content: stretch;
  min-width: 0;
  width: 100%;
}

.portfolio-report-main-row .portfolio-report-section--without-title {
  grid-column: 1;
  grid-template-columns: minmax(0, 1fr);
  max-width: 100%;
  overflow: visible;
  width: 100%;
}

.portfolio-report-main-row #portfolioHoldingsGrid {
  justify-content: start;
  max-width: 100%;
  overflow-x: auto;
  width: 100%;
}

.portfolio-report-main-row #portfolioHoldingsPanel.portfolio-report-section--without-title {
  grid-template-columns: minmax(0, 1fr);
  padding-bottom: 0;
}

.portfolio-report-main-row #portfolioHoldingsPanel.portfolio-report-section--without-title #portfolioHoldingsGrid,
.portfolio-report-main-row #portfolioHoldingsPanel.portfolio-report-section--without-title #portfolioCompositionOverview {
  grid-column: 1;
}

.portfolio-composition-overview {
  background: #fff;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 10px 12px 12px;
  width: 100%;
}

.portfolio-composition-overview[hidden] {
  display: none;
}

.portfolio-composition-overview__title {
  color: var(--text, #111827);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}

.portfolio-composition-overview__grid {
  align-items: stretch;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  min-width: 0;
}

.portfolio-composition-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  min-width: 0;
}

.portfolio-composition-overview .penetration-asset-section {
  gap: 8px;
  grid-column: auto;
  grid-row: auto;
}

.portfolio-composition-overview .penetration-fund-type-title,
.portfolio-composition-overview .penetration-asset-view-title {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  height: 30px;
  justify-content: center;
  min-height: 30px;
  padding: 0;
}

.portfolio-composition-overview .penetration-fund-type-row {
  box-sizing: border-box;
  flex: 1 1 auto;
  min-height: 174px;
}

.portfolio-composition-overview .penetration-asset-section .penetration-fund-type-row {
  min-height: 174px;
}

.portfolio-composition-overview .penetration-asset-card-row {
  align-items: center;
  flex-direction: row;
  position: relative;
}

.portfolio-composition-overview .penetration-asset-card-main {
  flex: 0 1 auto;
  transform: translateY(-10px);
  width: 100%;
}

.portfolio-composition-overview .portfolio-composition-card--fund-type .penetration-donut-chart,
.portfolio-composition-overview .portfolio-composition-card--fund-type .penetration-fund-type-legend {
  transform: translateY(-10px);
}

.portfolio-composition-overview .penetration-asset-coverage-hint {
  bottom: 9px;
  left: 0;
  padding: 0 8px;
  position: absolute;
  right: 0;
  transform: translateX(-2em);
}

.portfolio-report-main-row .portfolio-report-section--without-title #portfolioPerformancePanel {
  min-width: 0;
}

/* ===== 持仓穿透面板 ===== */
.portfolio-penetration-panel {
  align-self: start;
  background: #fff;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-self: start;
  max-height: none;
  min-height: 0;
  overflow: visible;
  padding: 10px 12px;
  width: min(100%, 860px);
}

.portfolio-penetration-panel[hidden] {
  display: none;
}

/* 报告期选择栏 */
.penetration-period-bar {
  align-items: center;
  display: flex;
  gap: 6px;
  margin-left: 10px;
  padding: 0;
}

.penetration-period-label {
  color: var(--text-muted, #6b7280);
  font-size: 12px;
  white-space: nowrap;
}

.penetration-period-select {
  background: #fff;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 4px;
  color: var(--text, #111827);
  cursor: pointer;
  font-size: 12px;
  padding: 3px 20px 3px 6px;
}

.penetration-period-button {
  align-items: center;
  background: #fff;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 4px;
  color: var(--text, #111827);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  gap: 6px;
  min-height: 28px;
  min-width: 92px;
  padding: 3px 22px 3px 8px;
  position: relative;
  white-space: nowrap;
}

.penetration-period-button::after {
  border: 4px solid transparent;
  border-top-color: currentColor;
  content: "";
  position: absolute;
  right: 8px;
  top: calc(50% - 1px);
}

.penetration-period-button:hover,
.penetration-period-button:focus,
.penetration-period-button[aria-expanded="true"] {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
  outline: none;
}

.penetration-period-menu {
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
  box-sizing: border-box;
  display: grid;
  gap: 2px;
  max-height: min(320px, calc(100vh - 24px));
  overflow-y: auto;
  padding: 4px;
  position: fixed;
  z-index: 3200;
}

.penetration-period-menu[hidden] {
  display: none;
}

.penetration-period-option {
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: var(--text, #111827);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  min-height: 28px;
  padding: 5px 9px;
  text-align: left;
  white-space: nowrap;
}

.penetration-period-option:hover,
.penetration-period-option:focus {
  background: #eef6ff;
  outline: none;
}

.penetration-period-option[aria-selected="true"] {
  background: #2563eb;
  color: #fff;
}

.penetration-header {
  align-items: center;
  display: flex;
  gap: 6px;
  justify-content: space-between;
}

.penetration-header strong {
  font-size: 14px;
}

.penetration-status {
  color: var(--text-muted, #6b7280);
  font-size: 11px;
}

/* 行业分布区块 */
.penetration-industry-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  grid-column: 1 / -1;
  grid-row: 1;
  min-width: 0;
}

.penetration-industry-header {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  justify-content: center;
  padding: 0;
}

.penetration-industry-title {
  color: var(--text, #111827);
  font-size: 13px;
  font-weight: 600;
}

.penetration-industry-subtitle {
  color: var(--text-muted, #6b7280);
  font-size: 11px;
  font-weight: 400;
}

.penetration-industry-more {
  align-self: center;
  color: #2563eb;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  margin-left: 0;
  text-decoration: none;
  white-space: nowrap;
}

.penetration-industry-more:hover {
  text-decoration: underline;
}

.penetration-industry-body {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
  min-height: 154px;
  padding: 0;
}

.penetration-industry-body.penetration-status-state {
  justify-content: center;
}

.penetration-industry-body.penetration-status-state .penetration-industry-chart {
  display: none;
}

.penetration-industry-body.penetration-status-state .penetration-industry-copy {
  align-items: center;
  text-align: center;
}

.penetration-industry-main {
  align-items: stretch;
  box-sizing: border-box;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(390px, 1fr) minmax(280px, 360px);
  min-width: 0;
  width: 100%;
}

.penetration-industry-breakdown {
  background: linear-gradient(180deg, #fff 0%, #fbfdff 100%);
  border: 1px solid #d6e0e6;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 13px 14px 10px;
}

.penetration-industry-breakdown-main {
  align-items: center;
  display: flex;
  flex-direction: row;
  gap: 14px;
  justify-content: center;
  min-width: 0;
}

.penetration-industry-chart {
  flex-shrink: 0;
  height: 118px;
  --penetration-chart-active-stroke: 22;
  --penetration-chart-stroke: 18;
  cursor: pointer;
  shape-rendering: geometricPrecision;
  transform: translateX(-6px);
  width: 118px;
}

.penetration-industry-chart circle {
  fill: none;
  stroke-linecap: butt;
  stroke-width: var(--penetration-chart-stroke);
  vector-effect: non-scaling-stroke;
}

.penetration-industry-slice {
  pointer-events: visiblePainted;
}

.penetration-industry-copy {
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  gap: 6px;
  max-width: min(100%, 220px);
  min-width: 0;
}

.penetration-industry-legend {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 100%;
  overflow: visible;
  width: fit-content;
}

.penetration-industry-legend.penetration-industry-legend--expanded {
  max-height: none;
}

.penetration-industry-legend__item {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  font-size: 13px;
  gap: 5px;
  line-height: 1.25;
  min-width: 0;
  padding: 2px 4px;
  transition: background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, opacity 0.16s ease;
  white-space: normal;
}

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

.penetration-industry-legend__label {
  color: var(--text, #111827);
  flex: 0 0 auto;
}

.penetration-industry-legend__pct {
  color: var(--text-muted, #6b7280);
  font-variant-numeric: tabular-nums;
  margin-left: 2px;
  overflow-wrap: anywhere;
}

.penetration-industry-summary {
  background: #fff;
  border: 1px solid #d6e0e6;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-left: 0;
  margin-top: 0;
  min-width: 0;
  overflow: hidden;
  padding: 14px 12px 15px;
}

.penetration-industry-summary:empty {
  display: none;
}

.penetration-industry-summary__head {
  align-items: baseline;
  display: flex;
  flex-direction: row;
  gap: 7px;
  justify-content: center;
  margin-bottom: 13px;
}

.penetration-industry-summary__head span {
  color: #34435a;
  font-size: 18px;
  font-weight: 850;
  line-height: 1;
}

.layout .penetration-industry-summary__head span {
  font-size: 18px;
}

.penetration-industry-summary__dot {
  color: #9aa7b5;
  font-size: 17px;
  font-weight: 700;
}

.layout .penetration-industry-summary__head .penetration-industry-summary__dot {
  font-size: 17px;
}

.penetration-industry-summary__state {
  font-size: 20px;
  font-weight: 850;
  line-height: 1;
}

.penetration-industry-summary__state--balanced {
  color: var(--accent-strong, #0d5f5f);
}

.penetration-industry-summary__state--concentrated {
  color: #c2410c;
}

.penetration-industry-summary__state--diverse {
  color: #047857;
}

.penetration-industry-summary__meter {
  align-items: center;
  background: #f8fbfc;
  border: 1px solid #d6e0e6;
  border-radius: 50%;
  display: flex;
  height: 34px;
  justify-content: center;
  margin-bottom: 10px;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  width: 34px;
}

.penetration-industry-summary__meter-fill {
  border-radius: 50%;
  display: block;
  height: 18px;
  width: 18px !important;
}

.penetration-industry-summary__meter-fill--balanced {
  background: linear-gradient(90deg, var(--accent, #117a7a), var(--accent-strong, #0d5f5f));
}

.penetration-industry-summary__meter-fill--concentrated {
  background: #f97316;
}

.penetration-industry-summary__meter-fill--diverse {
  background: #10b981;
}

.penetration-industry-summary__primary {
  align-items: baseline;
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 11px;
  margin-top: 14px;
}

.penetration-industry-summary__primary strong {
  color: #172033;
  font-size: 36px;
  font-variant-numeric: tabular-nums;
  font-weight: 850;
  line-height: 0.9;
}

.penetration-industry-summary__primary-label {
  color: var(--muted, #64707d);
  font-size: 20px;
  font-weight: 850;
  line-height: 1;
}

.layout .penetration-industry-summary__primary-label {
  font-size: 20px;
}

.penetration-industry-summary__secondary {
  border-top: 1px solid #edf2f5;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding-top: 12px;
}

.penetration-industry-summary__secondary > span {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  text-align: center;
}

.penetration-industry-summary__secondary > span + span {
  border-left: 1px solid #edf2f5;
}

.penetration-industry-summary__secondary small {
  color: var(--muted, #64707d);
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}

.penetration-industry-summary__secondary strong {
  color: #172033;
  font-size: 19px;
  font-variant-numeric: tabular-nums;
  font-weight: 850;
  line-height: 1.05;
}

.penetration-industry-hint {
  align-items: center;
  align-self: center;
  background: transparent;
  border-top: 1px solid #e5edef;
  border-radius: 0;
  color: var(--text-muted, #6b7280);
  display: flex;
  font-size: 12px;
  gap: 12px;
  justify-content: center;
  line-height: 1.35;
  margin-left: 0;
  margin-top: 0;
  max-width: none;
  padding: 8px 4px 0;
  text-align: center;
  width: 100%;
}

.penetration-valuation-summary {
  align-items: center;
  background: #fbfdff;
  border: 1px solid #d6e0e6;
  border-radius: 6px;
  box-sizing: border-box;
  display: grid;
  gap: 12px;
  min-height: 58px;
  min-width: 0;
  padding: 9px 14px;
}

.penetration-valuation-summary[hidden] {
  display: none;
}

.penetration-valuation-summary__metrics {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr)) 26px;
  height: 100%;
  min-width: 0;
}

.penetration-valuation-summary__metrics > span {
  align-items: center;
  display: flex;
  gap: 4px;
  justify-content: center;
  min-width: 0;
  white-space: nowrap;
}

.penetration-valuation-summary__metrics small {
  color: #64748b;
  font-size: 17px;
  font-weight: 800;
}

.penetration-valuation-summary__metrics strong {
  color: #172033;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  font-weight: 850;
  line-height: 1;
}

.penetration-valuation-summary__metrics > span:nth-child(3) strong {
  color: #c2410c;
}

.penetration-valuation-summary--empty strong {
  color: #94a3b8;
}

.penetration-valuation-summary__help {
  align-items: center;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 50%;
  box-sizing: border-box;
  color: #64748b;
  cursor: help;
  display: inline-flex;
  font-size: 14px;
  font-weight: 850;
  height: 24px;
  justify-content: center;
  line-height: 1;
  min-height: 24px;
  padding: 0;
  position: relative;
  width: 24px;
}

.penetration-valuation-summary__help:hover,
.penetration-valuation-summary__help:focus-visible {
  border-color: #117a7a;
  color: #117a7a;
  outline: none;
}

.penetration-valuation-summary__help::after {
  background: #fffdf8;
  border: 1px solid #f1d8b8;
  border-radius: 6px;
  bottom: calc(100% + 8px);
  box-shadow: 0 10px 24px rgba(120, 53, 15, 0.12);
  color: #34435a;
  content: attr(data-tooltip);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.45;
  max-width: min(320px, 78vw);
  opacity: 0;
  padding: 8px 10px;
  pointer-events: none;
  position: absolute;
  right: 0;
  text-align: left;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  visibility: hidden;
  white-space: pre-wrap;
  width: max-content;
  z-index: 20;
}

.penetration-valuation-summary__help:hover::after,
.penetration-valuation-summary__help:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

@media (max-width: 720px) {
  .penetration-industry-main {
    grid-template-columns: minmax(0, 1fr);
  }

  .penetration-industry-breakdown-main {
    flex-wrap: wrap;
  }

  .penetration-industry-more {
    margin-left: 0;
  }

  .penetration-industry-hint {
    flex-wrap: wrap;
    margin-left: 0;
    max-width: 100%;
  }

  .penetration-industry-summary {
    margin-left: 0;
    margin-top: 0;
  }

  .penetration-valuation-summary__metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr)) 24px;
  }
}

.penetration-asset-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}

.penetration-asset-section .penetration-fund-type-row {
  min-height: 130px;
}

.penetration-asset-card-row {
  align-items: stretch;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
}

.penetration-asset-card-main {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  gap: 14px;
  justify-content: center;
  min-width: 0;
}

.penetration-asset-view-title {
  background: #f9fafb;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 4px;
  color: var(--text, #111827);
  font-size: 12px;
  font-weight: 500;
  min-height: 28px;
  padding: 6px 0;
  text-align: center;
}

.penetration-asset-coverage-hint {
  box-sizing: border-box;
  color: var(--text-muted, #6b7280);
  font-size: 12px;
  line-height: 1.45;
  margin-top: auto;
  min-width: 0;
  overflow-wrap: anywhere;
  padding: 7px 8px 0;
  text-align: center;
  width: 100%;
}

.penetration-asset-coverage-hint[hidden] {
  display: none;
}

.penetration-body {
  align-items: start;
  background: #fff;
  border: 1px solid #d9e2ea;
  border-radius: 8px;
  box-sizing: border-box;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(390px, 1fr) minmax(280px, 360px);
  grid-template-rows: auto auto;
  flex: 0 0 auto;
  min-height: 0;
  min-width: 0;
  padding: 12px;
}

/* 资产配置条 */
.penetration-asset-bar {
  border-radius: 3px;
  display: flex;
  height: 6px;
  overflow: hidden;
  width: 100%;
}

.penetration-asset-bar__segment {
  height: 100%;
  transition: width 0.3s ease;
}

.penetration-asset-bar__segment--stock { background: #ef4444; }
.penetration-asset-bar__segment--cash  { background: #f59e0b; }
.penetration-asset-bar__segment--bond  { background: #3b82f6; }
.penetration-asset-bar__segment--other { background: #9ca3af; }

.penetration-asset-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}

.penetration-asset-legend__item {
  align-items: center;
  display: flex;
  font-size: 11px;
  gap: 4px;
}

.penetration-asset-legend__dot {
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  height: 7px;
  width: 7px;
}

/* 基金类别 - 环形图 */
.penetration-fund-type-section {
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 6px;
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
}

.penetration-fund-type-title {
  background: #f9fafb;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 4px;
  color: var(--text, #111827);
  font-size: 12px;
  font-weight: 500;
  min-height: 28px;
  padding: 6px 0;
  text-align: center;
}

.penetration-fund-type-row {
  align-items: center;
  background: linear-gradient(180deg, #fff 0%, #f8fbfb 100%);
  border: 1px solid #e5edef;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  display: flex;
  gap: 14px;
  justify-content: center;
  min-height: 150px;
  padding: 14px 12px;
}

.penetration-fund-type-row.penetration-status-state {
  justify-content: center;
}

.penetration-fund-type-row.penetration-status-state .penetration-donut-chart {
  display: none;
}

.penetration-fund-type-row.penetration-status-state .penetration-fund-type-legend {
  align-items: center;
}

.penetration-donut-chart {
  flex-shrink: 0;
  height: 120px;
  --penetration-chart-active-stroke: 20;
  --penetration-chart-stroke: 16;
  cursor: pointer;
  shape-rendering: geometricPrecision;
  width: 120px;
}

.penetration-donut-chart circle {
  fill: none;
  stroke-linecap: butt;
  stroke-width: var(--penetration-chart-stroke);
  vector-effect: non-scaling-stroke;
}

.penetration-chart-segment {
  outline: none;
  pointer-events: none;
  transform-box: fill-box;
  transform-origin: center;
  transition: filter 0.16s ease, opacity 0.16s ease, stroke-width 0.16s ease, transform 0.16s ease;
}

.penetration-chart-segment--active {
  filter: drop-shadow(0 2px 4px rgba(15, 23, 42, 0.18));
  opacity: 1;
  stroke-width: var(--penetration-chart-active-stroke);
  transform: scale(1.05);
}

.penetration-chart-segment--dimmed {
  opacity: 0.42;
}

.penetration-fund-type-legend {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.penetration-fund-type-legend__item {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  font-size: 11px;
  gap: 5px;
  padding: 2px 4px;
  transition: background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, opacity 0.16s ease;
  white-space: nowrap;
}

.penetration-legend-item--active {
  background: #f8fafc;
  border-color: #cbd5e1;
  box-shadow: inset 3px 0 0 currentColor;
  color: #0f172a;
}

.penetration-legend-item--active .penetration-industry-legend__pct,
.penetration-legend-item--active .penetration-fund-type-legend__pct {
  color: #0f172a;
  font-weight: 700;
}

.penetration-legend-item--dimmed {
  opacity: 0.52;
}

.penetration-fund-type-legend__dot {
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  height: 8px;
  width: 8px;
}

.penetration-fund-type-legend__label {
  color: var(--text, #111827);
}

.penetration-fund-type-legend__pct {
  color: var(--text-muted, #6b7280);
  font-variant-numeric: tabular-nums;
  margin-left: 2px;
}

.penetration-stock-distribution-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.penetration-stock-distribution-section--panel {
  align-content: start;
  align-self: start;
  display: grid;
  grid-column: 2;
  grid-row: 2;
  grid-template-rows: auto auto auto;
  height: auto;
}

.penetration-stock-distribution-title {
  background: #f9fafb;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 4px;
  color: var(--text, #111827);
  font-size: 12px;
  font-weight: 500;
  min-height: 28px;
  padding: 6px 0;
  text-align: center;
}

.penetration-stock-distribution-grid {
  align-content: start;
  align-self: start;
  display: grid;
  gap: 3px;
  grid-auto-rows: minmax(96px, 124px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-height: 0;
}

.penetration-stock-distribution-cell:nth-child(9) {
  grid-column: 3;
}

.penetration-stock-distribution-cell:nth-child(10) {
  grid-column: 1;
}

.penetration-stock-distribution-cell:nth-child(11) {
  grid-column: 2;
}

.penetration-stock-distribution-cell:nth-child(12) {
  grid-column: 3;
}

.penetration-stock-distribution-cell {
  align-items: center;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0.08)),
    rgba(15, 118, 110, var(--distribution-heat-alpha, 0.03));
  border: 1px solid rgba(15, 118, 110, var(--distribution-border-alpha, 0.12));
  border-radius: 4px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
  min-height: 50px;
  min-width: 0;
  overflow: hidden;
  padding: 6px 4px;
  position: relative;
  text-align: center;
}

.penetration-stock-distribution-cell--neutral {
  background: #f8fafc;
  border-color: #d8e1e8;
}

.penetration-stock-distribution-cell--active {
  border-color: rgba(15, 118, 110, 0.42);
  box-shadow: 0 6px 14px rgba(15, 118, 110, 0.16);
  z-index: 1;
}

.penetration-stock-distribution-cell--active::after {
  background: #0f766e;
  border-radius: 999px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.94);
  content: "";
  height: 12px;
  left: 8px;
  position: absolute;
  top: 8px;
  width: 12px;
}

.penetration-stock-distribution-hint {
  align-self: end;
  color: var(--text-muted, #6b7280);
  flex: 0 0 auto;
  font-size: 13px;
  line-height: 1.15;
  margin-bottom: 15px;
  margin-top: 8px;
  text-align: center;
}

.penetration-stock-distribution-label {
  align-items: center;
  color: var(--text, #111827);
  display: flex;
  flex-direction: column;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.1;
  white-space: nowrap;
}

.penetration-stock-distribution-value {
  color: var(--text, #111827);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  white-space: nowrap;
}

/* 重仓股票区域 */
.penetration-stock-section {
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 4px;
  grid-column: 1;
  grid-row: 2;
  height: calc(100% - 16px);
  max-width: none;
  min-width: 0;
}

.penetration-stock-title {
  background: #f9fafb;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 4px;
  color: var(--text, #111827);
  font-size: 12px;
  font-weight: 500;
  min-height: 28px;
  padding: 6px 0;
  text-align: center;
}

.penetration-stock-list {
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  flex: 1 1 auto;
  height: calc(30px + (var(--penetration-stock-row-height, 49px) * 10));
  max-height: none;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.penetration-stock-table {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  table-layout: fixed;
  width: 100%;
}

.penetration-stock-col-name {
  width: 38%;
}

.penetration-stock-col-sector {
  width: 25%;
}

.penetration-stock-col-pct {
  width: 21%;
}

.penetration-stock-col-detail {
  width: 16%;
}

.penetration-stock-table th {
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
  box-sizing: border-box;
  color: #6b7280;
  font-size: 11px;
  font-weight: 500;
  height: 28px;
  padding: 5px 6px;
  position: sticky;
  text-align: center;
  top: 0;
  z-index: 1;
}

.penetration-stock-table tbody tr {
  background: #fff;
}

.penetration-stock-table tbody tr:nth-child(odd) {
  background: #fff;
}

.penetration-stock-table tbody tr:nth-child(even) {
  background: #f7fafc;
}

.penetration-stock-table tbody tr.penetration-stock-row--selected {
  background: linear-gradient(90deg, #fff7ed 0%, #fff 42%);
}

.penetration-stock-table tbody tr.penetration-stock-row--selected td:first-child {
  box-shadow: inset 4px 0 0 #f59e0b;
}

.penetration-stock-table td:nth-child(3) {
  text-align: center;
}

.penetration-stock-table td:nth-child(2),
.penetration-stock-table td:nth-child(4) {
  text-align: center;
}

.penetration-stock-table td {
  background: inherit;
  border-bottom: 1px solid #f3f4f6;
  box-sizing: border-box;
  color: var(--text, #111827);
  height: var(--penetration-stock-row-height, 49px);
  line-height: 1.35;
  overflow: hidden;
  padding: 6px;
  vertical-align: middle;
}

.penetration-stock-table tbody tr:last-child td {
  border-bottom: none;
}

.penetration-stock-name {
  min-width: 0;
  text-align: left;
}

.penetration-stock-name__text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.penetration-stock-sector {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.penetration-stock-tag {
  box-sizing: border-box;
  border-radius: 3px;
  color: #4f6475;
  display: inline-block;
  font-size: 10px;
  line-height: 16px;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  padding: 1px 6px;
  text-align: center;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
}

.penetration-stock-tag--communication {
  background: #e9f7fb;
  color: #23708a;
}

.penetration-stock-tag--media {
  background: #f4edff;
  color: #7251ba;
}

.penetration-stock-tag--consumer {
  background: #fff3dd;
  color: #a45c05;
}

.penetration-stock-tag--equipment {
  background: #edf6ff;
  color: #306bba;
}

.penetration-stock-tag--service {
  background: #eef9f3;
  color: #25784f;
}

.penetration-stock-tag--technology {
  background: #f0f4f8;
  color: #4f6475;
}

.penetration-stock-tag--healthcare {
  background: #fff1f2;
  color: #b23b47;
}

.penetration-stock-tag--finance {
  background: #f0f7ec;
  color: #4c7b27;
}

.penetration-stock-tag--default {
  background: #f3f4f6;
  color: #6b7280;
}

.penetration-stock-tag--index {
  background: #eff6ff;
  color: #1d4ed8;
}

.penetration-stock-tag--star {
  background: #eef2ff;
  color: #4338ca;
}

.penetration-stock-tag--chinext {
  background: #ecfdf5;
  color: #047857;
}

.penetration-stock-tag--bse {
  background: #fdf2f8;
  color: #be185d;
}

.penetration-stock-tag--hk {
  background: #fff7ed;
  color: #c2410c;
}

.penetration-stock-tag--microcap {
  background: #f8fafc;
  color: #475569;
}

.penetration-stock-pct {
  align-items: center;
  color: var(--text, #111827);
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.penetration-stock-pct__value {
  display: block;
  line-height: 1.15;
}

.penetration-stock-pct__track {
  background: #deeceb;
  border-radius: 999px;
  display: block;
  height: 5px;
  overflow: hidden;
  width: min(100%, 86px);
}

.penetration-stock-pct__track span {
  background: linear-gradient(90deg, #14a596, #2f6fdd);
  border-radius: inherit;
  display: block;
  height: 100%;
}

.penetration-stock-detail {
  background: transparent;
  border: 0;
  color: #6b7280;
  cursor: pointer;
  font-size: 11px;
  padding: 0;
  text-align: center;
  white-space: nowrap;
}

.penetration-stock-detail:hover {
  color: var(--primary, #2563eb);
}

.penetration-loading,
.penetration-error {
  color: var(--text-muted, #6b7280);
  font-size: 12px;
  line-height: 1.35;
  padding: 16px 0;
  text-align: center;
}

.penetration-stock-distribution-grid > .penetration-loading,
.penetration-stock-distribution-grid > .penetration-error {
  grid-column: 1 / -1;
  min-height: 120px;
}

.penetration-error {
  color: #dc2626;
}

/* 详情弹窗 */
.penetration-detail-modal {
  align-items: center;
  background: rgba(21, 32, 36, 0.36);
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  padding: 20px;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 9000;
}

.penetration-detail-content {
  background: #fff;
  border: 1px solid #d7e1e3;
  border-radius: 10px;
  box-shadow: 0 18px 54px rgba(16, 33, 40, 0.2), 0 3px 14px rgba(16, 33, 40, 0.1);
  display: grid;
  gap: 12px;
  max-height: min(76vh, 560px);
  max-width: 520px;
  overflow-y: auto;
  padding: 18px;
  width: min(92vw, 520px);
}

.penetration-detail-header {
  align-items: start;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.penetration-detail-title {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.penetration-detail-name-row {
  align-items: center;
  display: flex;
  gap: 8px;
  min-width: 0;
}

.penetration-detail-name {
  color: #17242d;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.penetration-detail-subtitle {
  color: #667783;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

.penetration-detail-icon-close {
  align-items: center;
  background: #f4f7f7;
  border: 1px solid #dbe5e7;
  border-radius: 6px;
  color: #5b6a74;
  cursor: pointer;
  display: flex;
  flex: 0 0 auto;
  font-size: 20px;
  font-weight: 700;
  height: 34px;
  justify-content: center;
  line-height: 1;
  padding: 0;
  width: 34px;
}

.penetration-detail-summary {
  display: grid;
  gap: 6px;
  grid-template-columns: minmax(0, 1fr) 96px;
}

.penetration-detail-metric {
  background: #f7faf9;
  border: 1px solid #e3ecec;
  border-radius: 7px;
  min-width: 0;
  padding: 9px 10px;
}

.penetration-detail-metric--primary {
  background: #edf8f7;
  border-color: #cce5e2;
}

.penetration-detail-metric-label {
  color: #667783;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}

.penetration-detail-metric-value {
  color: #17242d;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
  margin-top: 4px;
}

.penetration-detail-metric-value--accent {
  color: #177f78;
  font-size: 19px;
}

.penetration-detail-table-wrap {
  display: grid;
  gap: 7px;
}

.penetration-detail-number {
  color: #17242d;
  font-variant-numeric: tabular-nums;
  font-weight: 750;
  white-space: nowrap;
}

.penetration-detail-source-list {
  display: grid;
  gap: 7px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.penetration-detail-source {
  align-items: center;
  background: #fff;
  border: 1px solid #e5ecee;
  border-radius: 8px;
  display: flex;
  gap: 8px;
  min-width: 0;
  padding: 10px;
}

.penetration-detail-source-rank {
  align-items: center;
  background: #edf4f4;
  border-radius: 999px;
  color: #53646d;
  display: flex;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 800;
  height: 24px;
  justify-content: center;
  width: 24px;
}

.penetration-detail-source-main {
  display: grid;
  gap: 5px;
  min-width: 0;
  width: 100%;
}

.penetration-detail-source-top {
  align-items: baseline;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.penetration-detail-source-top strong {
  color: #17242d;
  font-size: 13px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.penetration-detail-source-top span {
  color: #177f78;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  white-space: nowrap;
}

.penetration-detail-source-meta {
  color: #6a7a84;
  font-size: 12px;
  font-weight: 700;
}

.penetration-detail-bar {
  background: #e6eeee;
  border-radius: 999px;
  height: 5px;
  overflow: hidden;
}

.penetration-detail-bar span {
  background: #177f78;
  border-radius: inherit;
  display: block;
  height: 100%;
}

.penetration-detail-empty {
  color: #667783;
  font-size: 13px;
  font-weight: 700;
  padding: 18px;
  text-align: center;
}

@media (max-width: 720px) {
  .penetration-detail-content {
    padding: 16px;
  }

  .penetration-detail-summary {
    grid-template-columns: 1fr;
  }
}

.market-dashboard-panel {
  overflow-x: auto;
}

.market-dashboard-panel[hidden] {
  display: none;
}

.data-review-panel {
  background: #fff;
  height: calc(100vh - 107px);
  max-height: none;
  min-height: 660px;
  min-width: 0;
  overflow: hidden;
}

.data-review-panel[hidden] {
  display: none;
}

.data-review-frame {
  background: #f8fafc;
  border: 0;
  display: block;
  height: 100%;
  width: 100%;
}

.market-dashboard-content {
  align-items: stretch;
  display: grid;
  gap: 14px;
  grid-template-columns: 340px minmax(0, 1fr);
  max-width: 1920px;
  min-width: 2414px;
  width: 100%;
}

.market-dashboard-top-row {
  align-items: start;
  align-self: start;
  display: grid;
  gap: 14px;
  grid-column: 1;
  grid-row: 1;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  min-width: 0;
}

.today-market-board {
  align-self: start;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 8px;
  display: grid;
  gap: 0;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  max-width: 340px;
  width: 340px;
}

.today-market-board-head {
  align-items: center;
  border-bottom: 1px solid #e3eaf0;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  min-height: 48px;
  padding: 10px 12px;
}

.today-market-board-title {
  align-items: baseline;
  display: flex;
  gap: 8px;
  min-width: 0;
}

.today-market-board-title strong {
  color: var(--text);
  font-size: 18px;
  line-height: 1;
  white-space: nowrap;
}

.today-market-board-title span {
  background: #e8f4f4;
  border-radius: 999px;
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 800;
  padding: 4px 7px;
  white-space: nowrap;
}

#todayMarketBoardMeta {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.today-market-board-grid {
  aspect-ratio: 1 / 1;
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  padding: 10px;
}

.today-market-card {
  background: linear-gradient(135deg, #f8fafc, #ffffff);
  border: 1px solid #e1e9ef;
  border-radius: 8px;
  display: grid;
  gap: 7px;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  padding: 9px;
}

.today-market-card.heat-positive.heat-level-1 {
  background: linear-gradient(135deg, #fff7ed, #fff1f2);
  border-color: #fed7aa;
}

.today-market-card.heat-positive.heat-level-2 {
  background: linear-gradient(135deg, #ffedd5, #ffe4e6);
  border-color: #fdba74;
}

.today-market-card.heat-positive.heat-level-3 {
  background: linear-gradient(135deg, #fed7aa, #fecdd3);
  border-color: #fb923c;
}

.today-market-card.heat-positive.heat-level-4 {
  background: linear-gradient(135deg, #fecaca, #fda4af);
  border-color: #f87171;
}

.today-market-card.heat-positive.heat-level-5 {
  background: linear-gradient(135deg, #fca5a5, #fb7185);
  border-color: #ef4444;
}

.today-market-card.heat-negative.heat-level-1 {
  background: linear-gradient(135deg, #f0fdf4, #ecfeff);
  border-color: #bbf7d0;
}

.today-market-card.heat-negative.heat-level-2 {
  background: linear-gradient(135deg, #dcfce7, #ccfbf1);
  border-color: #86efac;
}

.today-market-card.heat-negative.heat-level-3 {
  background: linear-gradient(135deg, #bbf7d0, #99f6e4);
  border-color: #4ade80;
}

.today-market-card.heat-negative.heat-level-4 {
  background: linear-gradient(135deg, #86efac, #5eead4);
  border-color: #22c55e;
}

.today-market-card.heat-negative.heat-level-5 {
  background: linear-gradient(135deg, #4ade80, #2dd4bf);
  border-color: #16a34a;
}

.today-market-card.heat-flat {
  background: linear-gradient(135deg, #f8fafc, #eef2f7);
  border-color: #dbe4ee;
}

.today-market-card--missing {
  background: #f8fafc;
}

.today-market-name {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.today-market-close {
  font-size: 19px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.today-market-change {
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}

.today-market-card small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.today-market-board .positive {
  color: #d00000;
}

.today-market-board .negative {
  color: #15803d;
}

.today-market-board .flat {
  color: var(--muted);
}

.today-market-board-empty {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-size: 13px;
  font-weight: 700;
  grid-column: 1 / -1;
  justify-content: center;
  min-height: 210px;
  text-align: center;
}

.industry-strength-board {
  align-self: stretch;
  background: #f3f6f8;
  border: 1px solid #dce6ec;
  border-radius: 8px;
  box-shadow: 0 14px 42px rgba(15, 23, 42, 0.08);
  display: grid;
  grid-column: 2;
  grid-row: 1;
  grid-template-areas:
    "head"
    "tabs"
    "matrix"
    "trend";
  grid-template-columns: minmax(0, 1fr);
  max-width: 2060px;
  min-width: 0;
  overflow: hidden;
  width: 100%;
}

.industry-strength-board--with-trend {
  grid-template-areas:
    "head head"
    "tabs tabs"
    "matrix trend";
  grid-template-columns: minmax(1310px, 1fr) minmax(750px, 0.57fr);
  grid-template-rows: auto auto minmax(0, 1fr);
}

.industry-strength-heat-slot {
  align-self: start;
  min-width: 0;
}

.industry-strength-heat-slot > .industry-strength-panel {
  height: auto;
}

.market-dashboard-top-row .industry-strength-panel--heat-summary {
  height: auto;
}

.industry-strength-heat-slot .industry-strength-panel-head {
  min-height: 44px;
  padding: 8px 12px;
}

.industry-strength-heat-slot .industry-strength-heat-grid {
  gap: 6px;
  padding: 8px;
}

.industry-strength-heat-slot .industry-strength-heat-card {
  gap: 4px;
  min-height: 70px;
  padding: 8px 10px;
}

.industry-strength-heat-slot .industry-strength-heat-card span {
  font-size: 18px;
}

.industry-strength-heat-slot .industry-strength-heat-card strong {
  font-size: 18px;
}

.industry-strength-heat-slot .industry-strength-heat-card small {
  font-size: 13px;
}

.industry-strength-heat-slot .industry-strength-heat-card b {
  font-size: 34px;
  right: 5px;
}

.industry-strength-heat-slot .industry-strength-summary-grid {
  gap: 6px;
  padding: 8px;
}

.industry-strength-heat-slot .industry-strength-summary-grid span {
  gap: 3px;
  padding: 7px 8px;
}

.industry-strength-heat-slot .industry-strength-summary-grid strong {
  font-size: 16px;
}

.industry-strength-head {
  align-items: center;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafb 100%);
  border-bottom: 1px solid #dde7ee;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  min-height: 52px;
  padding: 10px 16px;
  grid-area: head;
}

.industry-strength-incomplete-notice {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 999px;
  color: #9a3412;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  max-width: 100%;
  opacity: 0;
  padding: 7px 10px;
  transform: translateY(-4px);
  transition: opacity 180ms ease, transform 180ms ease;
  white-space: nowrap;
}

.industry-strength-incomplete-notice.visible {
  opacity: 1;
  transform: translateY(0);
}

.industry-strength-title {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.industry-strength-title strong {
  color: var(--text);
  font-size: 21px;
  letter-spacing: 0;
  line-height: 1.05;
  white-space: nowrap;
}

.industry-strength-title span {
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
}

.industry-strength-meta-bar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  min-width: 0;
}

.industry-strength-meta-bar span,
#industryStrengthMeta {
  background: #ffffff;
  border: 1px solid #dce6ee;
  border-radius: 999px;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  padding: 7px 10px;
  white-space: nowrap;
}

.industry-strength-live-pill {
  color: #b91c1c !important;
}

.industry-strength-live-pill::before {
  background: #ef4444;
  border-radius: 999px;
  content: "";
  display: inline-block;
  height: 6px;
  margin-right: 6px;
  vertical-align: 1px;
  width: 6px;
}

.industry-strength-tabs {
  background: #f8fafc;
  border-bottom: 1px solid #e3eaf0;
  display: none;
  gap: 6px;
  grid-area: tabs;
  padding: 8px 10px;
}

.industry-strength-tabs button {
  background: #f6f8fa;
  border: 1px solid #dbe4eb;
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  min-height: 30px;
  padding: 5px 9px;
}

.industry-strength-tabs button.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.industry-strength-matrix {
  align-self: stretch;
  display: grid;
  grid-area: matrix;
  min-width: 0;
  overflow: hidden;
  padding: 12px;
}

.industry-strength-overview {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1.72fr) minmax(320px, 0.94fr);
}

.industry-strength-panel {
  background: #ffffff;
  border: 1px solid #dde7ee;
  border-radius: 8px;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
  min-width: 0;
  overflow: hidden;
}

.industry-strength-panel--matrix {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
  min-width: 0;
}

.industry-strength-panel-head {
  align-items: center;
  border-bottom: 1px solid #e7eef3;
  display: flex;
  gap: 10px;
  min-height: 54px;
  padding: 9px 12px;
}

.industry-strength-panel-head > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.industry-strength-panel-head h4 {
  color: var(--text);
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  margin: 0;
}

.industry-strength-panel-head p {
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
}

.industry-strength-link-hint {
  color: #66788e;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.25;
  margin: 0;
}

.industry-strength-section-mark {
  align-items: center;
  background: #0f807f;
  border-radius: 6px;
  box-shadow: 0 3px 8px rgba(17, 122, 122, 0.12);
  color: #fff;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 900;
  height: 27px;
  justify-content: center;
  width: 27px;
}

.industry-strength-score-label {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  color: #475569;
  font-size: 11px;
  font-weight: 900;
  margin-left: auto;
  padding: 6px 9px;
  white-space: nowrap;
}

.industry-strength-period-grid {
  display: block;
  overflow: auto;
  padding: 8px;
  position: relative;
  z-index: 1;
}

.industry-strength-matrix-table {
  background: #ffffff;
  border: 1px solid #dce4ec;
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
}

.industry-strength-matrix-table th,
.industry-strength-matrix-table td {
  border: 1px solid #dce4ec;
  height: 34px;
  padding: 0;
  vertical-align: middle;
}

.industry-strength-matrix-table thead th {
  background: #f5f7f9;
  color: #526277;
  font-size: 12.5px;
  font-weight: 820;
  position: sticky;
  top: 0;
  text-align: left;
  z-index: 3;
}

.industry-strength-matrix-table thead .industry-strength-rank-head {
  left: 0;
  z-index: 4;
}

.industry-strength-matrix-table th:last-child,
.industry-strength-matrix-table td:last-child {
  border-right-color: #cbd5e1;
}

.industry-strength-period-heading {
  align-items: center;
  display: inline-flex;
  gap: 7px;
  min-width: 0;
  padding: 0 8px;
}

.industry-strength-period-count {
  align-items: center;
  background: #f39a78;
  border-radius: 5px;
  color: #ffffff;
  display: inline-flex;
  font-size: 10.5px;
  font-weight: 900;
  height: 16px;
  justify-content: center;
  min-width: 16px;
  padding: 0 4px;
}

.industry-strength-rank-head {
  background: #fbfcfd;
  color: #607086;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
  width: 44px;
}

.industry-strength-cell {
  background: #ffffff;
  min-width: 0;
}

.industry-strength-cell.active,
.industry-strength-period-head.active {
  background: #ffffff;
}

.industry-strength-row {
  align-items: center;
  background: transparent;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: 0;
  cursor: pointer;
  display: grid;
  gap: 5px;
  grid-template-columns: minmax(0, 1fr);
  height: 100%;
  min-height: 33px;
  padding: 0 6px;
  transition: background 0.16s ease, border-color 0.16s ease;
}

.industry-strength-row:last-child {
  margin-bottom: 0;
}

.industry-strength-row:hover {
  background: #fff7ed;
  border-left-color: #f59e0b;
}

.industry-strength-row:focus-visible {
  outline: 2px solid rgba(234, 88, 12, 0.34);
  outline-offset: -2px;
}

.industry-strength-row.selected {
  background: #fff7ed;
  border-left-color: #f5a25d;
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.22);
}

.industry-strength-row.selected .industry-strength-name {
  color: #0f172a;
}

.industry-strength-row.selected .industry-strength-change {
  box-shadow: none;
}

.industry-strength-main {
  align-items: center;
  display: inline-flex;
  gap: 6px;
  justify-content: flex-start;
  min-width: 0;
  overflow: hidden;
  width: 100%;
}

.industry-strength-name {
  color: #1f2937;
  font-size: 13px;
  font-weight: 720;
  line-height: 1.1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.industry-strength-change {
  align-self: center;
  border-radius: 999px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  line-height: 18px;
  min-width: 51px;
  padding: 0 6px;
  text-align: center;
  flex: 0 0 auto;
  white-space: nowrap;
}

.industry-strength-change.positive {
  background: #fff7f6;
  color: #c7372f;
}

.industry-strength-change.negative {
  background: #f2fbf6;
  color: #0b7650;
}

.industry-strength-change.flat {
  background: #eef2f6;
  color: #64748b;
}

.industry-strength-cell-empty {
  color: #94a3b8;
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.industry-strength-column-empty,
.industry-strength-empty {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-size: 13px;
  font-weight: 700;
  justify-content: center;
  min-height: 150px;
  padding: 16px;
  text-align: center;
}

.industry-strength-empty {
  background: #fff;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
}

.industry-strength-heat-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 10px;
}

.industry-strength-panel--heat-summary {
  align-self: start;
}

.industry-strength-heat-strip {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 8px;
}

.market-dashboard-top-row .industry-strength-heat-strip {
  grid-auto-rows: minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
}

.market-dashboard-top-row .industry-strength-heat-chip {
  min-height: 74px;
}

.industry-strength-heat-chip {
  --industry-strength-heat-tone: #48657f;
  background: #ffffff;
  border: 1px solid #e1e9ef;
  border-left: 4px solid var(--industry-strength-heat-tone);
  border-radius: 8px;
  display: grid;
  gap: 4px 8px;
  grid-template-areas:
    "rank title score"
    "rank meta score";
  grid-template-columns: 34px minmax(0, 1fr) 42px;
  min-height: 58px;
  min-width: 0;
  padding: 7px 9px;
}

.industry-strength-heat-chip.hot,
.industry-strength-heat-chip.teal {
  --industry-strength-heat-tone: #c81e3a;
}

.industry-strength-heat-chip.warm,
.industry-strength-heat-chip.green {
  --industry-strength-heat-tone: #b45309;
}

.industry-strength-heat-chip.cool,
.industry-strength-heat-chip.flat {
  --industry-strength-heat-tone: #48657f;
}

.industry-strength-heat-title {
  align-items: baseline;
  display: flex;
  gap: 8px;
  grid-area: title;
  min-width: 0;
}

.industry-strength-heat-title strong {
  color: #1f2937;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.05;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.industry-strength-heat-title em {
  color: #5a6b80;
  flex: 0 0 auto;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.industry-strength-heat-rank {
  align-items: center;
  background: color-mix(in srgb, var(--industry-strength-heat-tone) 10%, #ffffff);
  border: 1px solid color-mix(in srgb, var(--industry-strength-heat-tone) 28%, #ffffff);
  border-radius: 7px;
  color: var(--industry-strength-heat-tone);
  display: inline-flex;
  font-size: 12px;
  grid-area: rank;
  font-weight: 900;
  height: 24px;
  justify-content: center;
  line-height: 1;
  width: 32px;
}

.industry-strength-heat-score {
  align-items: flex-end;
  color: var(--industry-strength-heat-tone);
  display: flex;
  flex-direction: column;
  font-size: 21px;
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  gap: 3px;
  grid-area: score;
  justify-self: end;
  line-height: 1;
}

.industry-strength-heat-score small {
  color: #5a6b80;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.industry-strength-heat-meta {
  align-items: center;
  display: flex;
  gap: 5px;
  grid-area: meta;
  min-width: 0;
}

.industry-strength-heat-pill {
  background: #f2f6f9;
  border: 1px solid #e0e8ef;
  border-radius: 999px;
  color: #5a6b80;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  min-width: 0;
  overflow: hidden;
  padding: 5px 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.industry-strength-heat-pill--change {
  flex: 0 0 auto;
}

.industry-strength-heat-card {
  border-radius: 8px;
  color: #7f1d1d;
  display: grid;
  gap: 6px;
  min-height: 108px;
  overflow: hidden;
  padding: 12px;
  position: relative;
  text-shadow: none;
}

.industry-strength-heat-card span,
.industry-strength-heat-card strong,
.industry-strength-heat-card small {
  min-width: 0;
  position: relative;
  z-index: 1;
}

.industry-strength-heat-card span {
  color: #7f1d1d;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  overflow-wrap: anywhere;
}

.industry-strength-heat-card strong {
  color: #be123c;
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  gap: 8px;
  line-height: 1;
}

.industry-strength-heat-card strong em {
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
}

.industry-strength-heat-card small {
  color: #9f1239;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}

.industry-strength-heat-card b {
  bottom: -4px;
  color: rgba(190, 18, 60, 0.16);
  font-size: 42px;
  font-weight: 900;
  line-height: 1;
  position: absolute;
  right: 6px;
}

.industry-strength-heat-card.hot {
  background: linear-gradient(135deg, #fff1f2, #ffe4e6);
  border: 1px solid #fecdd3;
}

.industry-strength-heat-card.warm {
  background: linear-gradient(135deg, #fff7ed, #ffedd5);
  border: 1px solid #fed7aa;
}

.industry-strength-heat-card.teal {
  background: linear-gradient(135deg, #fff1f2, #ffe4e6);
  border: 1px solid #fecdd3;
}

.industry-strength-heat-card.green {
  background: linear-gradient(135deg, #fff7ed, #ffedd5);
  border: 1px solid #fed7aa;
}

.industry-strength-heat-card.cool {
  background: linear-gradient(135deg, #f8fafc, #eef2f7);
  border: 1px solid #dbe4ee;
  color: #334155;
}

.industry-strength-heat-card.flat {
  background: linear-gradient(135deg, #f8fafc, #eef2f7);
  border: 1px solid #dbe4ee;
  color: #334155;
}

.industry-strength-heat-card.cool span,
.industry-strength-heat-card.flat span {
  color: #334155;
}

.industry-strength-heat-card.cool strong,
.industry-strength-heat-card.flat strong {
  color: #475569;
}

.industry-strength-heat-card.cool small,
.industry-strength-heat-card.flat small {
  color: #64748b;
}

.industry-strength-heat-card.cool b,
.industry-strength-heat-card.flat b {
  color: rgba(71, 85, 105, 0.16);
}

/* 方案B：今日行情固定在左侧，主线摘要在其下方，行业强弱排名作为右侧主工作区。 */
.market-dashboard-top-row {
  grid-template-columns: minmax(0, 1fr);
}

.today-market-board {
  max-width: 340px;
  width: 340px;
}

@media (max-width: 860px) {
  .market-dashboard-top-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .today-market-board {
    max-width: 380px;
    width: 100%;
  }
}

@media (max-width: 900px) {
  .fund-diagnosis-panel,
  .fund-selection-panel,
  .fund-research-panel {
    height: auto;
    max-height: none;
    min-height: 560px;
  }

  .fund-diagnosis-query,
  .fund-diagnosis-form,
  .fund-diagnosis-hero,
  .fund-selection-query,
  .fund-selection-form,
  .fund-research-query {
    align-items: stretch;
    grid-template-columns: minmax(0, 1fr);
  }

  .fund-diagnosis-query,
  .fund-diagnosis-form,
  .fund-selection-query,
  .fund-selection-form,
  .fund-research-query {
    display: grid;
  }

  .fund-diagnosis-code input,
  .fund-selection-form input,
  .fund-selection-form select,
  .fund-selection-codes input {
    width: 100%;
  }

  .fund-diagnosis-dimensions {
    grid-template-columns: minmax(0, 1fr);
  }
}

.industry-strength-meta-bar,
#industryStrengthMeta {
  display: none;
}

.industry-strength-title span {
  display: none;
}

.industry-strength-summary-grid {
  border-top: 1px solid #e7eef3;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 10px;
}

.industry-strength-summary-grid span {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 9px;
}

.industry-strength-summary-grid small {
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
}

.industry-strength-summary-grid strong {
  color: var(--text);
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}

.industry-strength-trend {
  background: #ffffff;
  border: 1px solid #dde7ee;
  border-radius: 8px;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
  display: grid;
  grid-area: trend;
  margin: 0 12px 12px;
  min-width: 0;
  overflow: hidden;
}

.industry-strength-board--with-trend .industry-strength-trend {
  align-self: stretch;
  grid-template-rows: auto minmax(0, 1fr);
  height: var(--industry-strength-body-height, auto);
  margin: 12px 0 12px 12px;
}

.industry-strength-board--with-trend .industry-strength-matrix {
  align-self: stretch;
  display: grid;
}

.industry-strength-board--with-trend .industry-strength-panel--matrix {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: var(--industry-strength-body-height, 100%);
}

.industry-strength-board--with-trend .industry-strength-period-grid {
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
}

.industry-strength-board--with-trend .industry-strength-row {
  min-height: 0;
}

.industry-strength-board--with-trend .industry-strength-trend-table {
  align-content: stretch;
  padding: 8px;
}

.industry-strength-board--with-trend .industry-strength-trend-header,
.industry-strength-board--with-trend .industry-strength-trend-row {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.05fr) minmax(0, 0.72fr) minmax(0, 1.5fr);
  min-width: 0;
  width: 100%;
}

.industry-strength-board--with-trend .industry-strength-trend-row strong {
  font-size: 13px;
}

.industry-strength-board--with-trend .industry-strength-trend-row p {
  font-size: 12px;
  padding-left: 8px;
  padding-right: 8px;
}

.industry-strength-board--with-trend .industry-strength-sparkline {
  max-width: 198px;
}

.industry-strength-trend:empty {
  display: none;
}

.industry-strength-trend-table {
  display: grid;
  min-width: 0;
  overflow-x: auto;
  padding: 10px;
}

.industry-strength-trend-header,
.industry-strength-trend-row {
  align-items: center;
  display: grid;
  gap: 0;
  grid-template-columns: minmax(110px, 180px) 220px 118px minmax(330px, 510px);
  min-width: 778px;
  width: fit-content;
}

.industry-strength-trend-header {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 8px 8px 0 0;
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
  min-height: 34px;
}

.industry-strength-trend-row {
  border-color: #e2e8f0;
  border-style: solid;
  border-width: 0 1px 1px;
  cursor: pointer;
  min-height: 54px;
  transition: background 0.16s ease, box-shadow 0.16s ease;
}

.industry-strength-trend-row:last-child {
  border-radius: 0 0 8px 8px;
}

.industry-strength-trend-row:hover {
  background: #fff7ed;
}

.industry-strength-trend-row:focus-visible {
  outline: 2px solid rgba(234, 88, 12, 0.34);
  outline-offset: -2px;
}

.industry-strength-trend-row.selected {
  background: #fff7ed;
  box-shadow: inset 3px 0 0 #f5a25d, inset 0 0 0 1px rgba(245, 158, 11, 0.18);
}

.industry-strength-trend-header > span,
.industry-strength-trend-row > strong,
.industry-strength-trend-row > div,
.industry-strength-trend-row > p {
  align-self: stretch;
  align-items: center;
  display: flex;
  justify-content: center;
  min-width: 0;
  padding: 8px 10px;
  text-align: center;
}

.industry-strength-trend-status {
  justify-content: center;
}

.industry-strength-trend-header > span:not(:first-child),
.industry-strength-trend-row > *:not(:first-child) {
  border-left: 1px solid #e2e8f0;
}

.industry-strength-trend-row strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
  gap: 7px;
  justify-content: flex-start;
  line-height: 1.25;
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: left;
}

.industry-strength-trend-row strong i {
  align-items: center;
  background: #e8f4f4;
  border: 1px solid #c7dede;
  border-radius: 999px;
  color: var(--accent-strong);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  height: 20px;
  justify-content: center;
  width: 20px;
}

.industry-strength-trend-row mark {
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  font-size: 12px;
  font-weight: 900;
  justify-content: center;
  justify-self: start;
  line-height: 1;
  min-height: auto;
  padding: 7px 9px;
  align-self: center;
  white-space: nowrap;
}

.industry-strength-trend-row mark.strong {
  background: #dc2626;
}

.industry-strength-trend-row mark.warm {
  background: #ea580c;
}

.industry-strength-trend-row mark.neutral {
  background: #b7791f;
}

.industry-strength-trend-row mark.weak {
  background: #15803d;
}

.industry-strength-trend-row mark.flat {
  background: #64748b;
}

.industry-strength-trend-row p {
  align-items: center;
  color: #475569;
  display: flex;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  margin: 0;
}

.industry-strength-sparkline {
  display: block;
  height: 34px;
  max-width: 184px;
  width: 100%;
}

.industry-strength-sparkline line {
  stroke: #e2e8f0;
  stroke-width: 1;
}

.industry-strength-sparkline polyline {
  fill: none;
  stroke: var(--accent-strong);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

.industry-strength-sparkline-empty {
  color: #94a3b8;
  font-size: 11px;
  font-weight: 900;
}

/* ===== 调仓推送订阅 ===== */

.portfolio-subscribe-button {
  background: #eef6f6;
  border: 1px solid #c8dcdd;
  border-radius: 999px;
  color: var(--accent-strong, #0f766e);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  min-height: 28px;
  padding: 3px 11px;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.portfolio-subscribe-button:hover {
  background: #e2f1f1;
  border-color: var(--accent, #117a7a);
  color: var(--accent, #117a7a);
}

.portfolio-subscribe-button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.portfolio-push-status {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
}

.portfolio-push-risk-modal {
  padding: 24px;
  z-index: 2300;
}

.site-message-dialog.portfolio-push-risk-dialog {
  gap: 18px;
  max-width: min(560px, calc(100vw - 32px));
  padding: 28px 30px;
}

.portfolio-push-risk-header {
  display: grid;
  gap: 8px;
}

.portfolio-push-risk-kicker {
  color: #b45309;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
}

.site-message-dialog.portfolio-push-risk-dialog h2 {
  font-size: 23px;
  line-height: 1.35;
  margin: 0;
}

.portfolio-push-risk-body {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 6px;
  display: grid;
  gap: 8px;
  padding: 14px 16px;
}

.site-message-dialog .portfolio-push-risk-body p {
  color: #7c2d12;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.65;
  margin: 0;
  white-space: normal;
}

.portfolio-push-risk-actions {
  gap: 10px;
}

.site-message-actions.portfolio-push-risk-actions button {
  font-size: 15px;
  min-height: 42px;
  min-width: 104px;
}

.portfolio-push-qr-modal {
  z-index: 2200;
}

.portfolio-push-qr-dialog {
  max-width: 420px;
  padding: 28px;
  text-align: center;
}

.portfolio-push-qr-body {
  display: grid;
  gap: 12px;
  justify-items: center;
}

.portfolio-push-qr-image-wrap {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 16px;
}

.portfolio-push-qr-image-wrap img {
  display: block;
  height: auto;
  max-width: 260px;
  width: 100%;
}

.portfolio-push-qr-expiry {
  color: var(--muted);
  font-size: 12px;
}

.portfolio-push-qr-body p {
  margin: 0;
}

.site-message-modal.portfolio-push-error-modal {
  z-index: 2400;
}

.site-message-dialog.portfolio-push-error-dialog {
  gap: 14px;
  max-width: min(420px, calc(100vw - 32px));
  padding: 26px 28px;
}

.site-message-dialog.portfolio-push-error-dialog h2 {
  font-size: 22px;
  line-height: 1.35;
  margin: 0;
}

.site-message-dialog.portfolio-push-error-dialog p {
  color: var(--text);
  font-size: 16px;
  line-height: 1.65;
  margin: 0;
  white-space: normal;
}

.portfolio-push-error-actions button {
  font-size: 15px;
  min-height: 42px;
  min-width: 92px;
}

.portfolio-push-disclaimer {
  background: #fef3c7;
  border: 1px solid #f59e0b;
  border-radius: 6px;
  color: #92400e;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  margin: 0;
  padding: 10px 14px;
  text-align: center;
}

.portfolio-report-section h3 {
  color: var(--text);
  font-size: 15px;
  line-height: 1.3;
  margin: 0;
}

.portfolio-report-section--without-title {
  align-items: stretch;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr);
  justify-content: stretch;
  max-width: 100%;
  min-width: 0;
  overflow: visible;
  overflow-y: visible;
  padding-bottom: 6px;
  width: 100%;
}

.portfolio-report-section--without-title #portfolioHoldingsTitle {
  display: none;
}

.portfolio-report-section--without-title #portfolioHoldingsGrid {
  align-self: stretch;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  width: 100%;
}

.portfolio-report-section--without-title #portfolioHoldingsGrid > .portfolio-holdings-card {
  box-sizing: border-box;
  min-width: var(--portfolio-table-width, max-content);
  width: max-content;
}

.portfolio-report-section--without-title #portfolioPerformancePanel {
  align-self: start;
  box-sizing: border-box;
  height: auto;
  margin-top: 0;
  max-width: min(100%, var(--portfolio-main-row-width, 100%));
  min-width: 0;
  overflow: hidden;
  width: min(100%, var(--portfolio-main-row-width, 100%));
}

@container portfolio-report (min-width: 1600px) {
  .portfolio-report-section--without-title {
    grid-template-columns: minmax(0, max-content) minmax(0, min(100%, 1307px));
    justify-content: start;
    max-width: none;
  }

  .portfolio-report-section--without-title #portfolioHoldingsGrid {
    max-width: none;
    overflow: visible;
    width: max-content;
  }

  .portfolio-report-section--without-title #portfolioHoldingsGrid > .portfolio-holdings-card {
    width: 100%;
  }
}

@media (max-width: 1500px) {
  .portfolio-report-section--without-title {
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
    max-width: 100%;
    overflow-x: visible;
  }

  .portfolio-report-section--without-title #portfolioHoldingsGrid {
    max-width: 100%;
    overflow-x: auto;
    width: 100%;
  }

  .portfolio-report-section--without-title #portfolioHoldingsGrid > .portfolio-holdings-card {
    height: auto;
    width: max-content;
  }

  .portfolio-report-section--without-title #portfolioPerformancePanel,
  .portfolio-performance-panel {
    max-width: min(100%, var(--portfolio-main-row-width, 100%));
    width: min(100%, var(--portfolio-main-row-width, 100%));
  }

  .portfolio-report-main-row {
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
    width: 100%;
  }
}

@container portfolio-report (min-width: 1560px) {
  .portfolio-report-main-row {
    grid-template-columns: minmax(0, max-content) minmax(720px, 860px);
    justify-content: start;
    width: max-content;
  }
}

@container portfolio-report (max-width: 1180px) {
  .portfolio-report-main-row {
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
    width: 100%;
  }

  .portfolio-report-panel--custom .portfolio-report-main-row {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  .portfolio-penetration-panel {
    justify-self: stretch;
    max-width: 100%;
    width: 100%;
  }

  .penetration-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .penetration-industry-section,
  .penetration-asset-section,
  .penetration-stock-section,
  .penetration-fund-type-section,
  .penetration-stock-distribution-section--panel {
    grid-column: auto;
    grid-row: auto;
    height: auto;
    min-width: 0;
    width: 100%;
  }
}

.portfolio-report-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  min-width: 0;
}

/* ===== 策略跟踪 ===== */

.strategy-tracking-panel {
  --strategy-row-shift: 32px;
  align-content: start;
  background: #f8fafc;
  display: grid;
  gap: 18px;
  height: clamp(580px, calc(100vh - 236px), 1130px);
  max-height: clamp(580px, calc(100vh - 236px), 1130px);
  overflow: auto;
  padding: 14px;
}

.strategy-tracking-panel[hidden] {
  display: none;
}

.strategy-tracking-divider {
  border: none;
  border-top: 1px solid #cbd5e1;
  margin: 0 14px;
}

.strategy-tracking-divider[hidden] {
  display: none;
}

/* ===== 技术指标 ===== */

.tech-indicator-panel {
  background: #f8fafc;
  color: #1f2937;
  display: grid;
  gap: 8px;
  min-height: 760px;
  padding: 10px 12px 12px;
  position: relative;
}

.tech-indicator-panel[hidden] {
  display: none;
}

.tech-indicator-toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 38px;
  position: relative;
}

.tech-indicator-input-group {
  align-items: center;
  display: flex;
  gap: 8px;
}

.tech-indicator-search {
  position: relative;
}

.tech-indicator-input-group label {
  align-items: center;
  color: #475569;
  display: flex;
  font-size: 13px;
  gap: 8px;
  white-space: nowrap;
}

.tech-indicator-input-group input {
  background: #ffffff;
  border: 1px solid #d8dee8;
  border-radius: 4px;
  color: #1f2937;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  height: 32px;
  padding: 5px 8px;
  width: 116px;
}

.tech-indicator-input-group input.is-error {
  border-color: #dc2626;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.12);
}

.tech-indicator-suggestions {
  background: #ffffff;
  border: 1px solid #d8dee8;
  border-radius: 6px;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.16);
  left: 34px;
  max-height: 260px;
  min-width: 260px;
  overflow: auto;
  padding: 4px;
  position: absolute;
  top: 38px;
  z-index: 30;
}

.tech-indicator-suggestion {
  align-items: center;
  border-radius: 4px;
  color: #334155;
  cursor: pointer;
  display: grid;
  gap: 2px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 7px 8px;
}

.tech-indicator-suggestion:hover,
.tech-indicator-suggestion.active {
  background: #eff6ff;
  color: #1d4ed8;
}

.tech-indicator-suggestion-name {
  font-size: 13px;
  font-weight: 700;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tech-indicator-suggestion-code {
  color: #64748b;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  justify-self: end;
}

.tech-indicator-suggestion-source {
  color: #94a3b8;
  font-size: 11px;
}

.tech-indicator-input-group button,
.tech-indicator-ranges button {
  background: #ffffff;
  border: 1px solid #d8dee8;
  border-radius: 4px;
  color: #334155;
  cursor: pointer;
  font-size: 13px;
  height: 32px;
  line-height: 1;
  padding: 5px 10px;
}

.tech-indicator-input-group button:disabled {
  cursor: default;
}

.tech-indicator-input-group button.loading {
  align-items: center;
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
  display: inline-flex;
  gap: 6px;
  min-width: 76px;
}

.tech-indicator-input-group button.loading::before {
  animation: techIndicatorSpin 0.9s linear infinite;
  border: 2px solid rgba(255, 255, 255, 0.42);
  border-radius: 50%;
  border-top-color: #ffffff;
  content: "";
  height: 12px;
  width: 12px;
}

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

.tech-indicator-input-group button:hover,
.tech-indicator-ranges button:hover,
.tech-indicator-ranges button.active {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
}

.tech-indicator-input-group button.is-success,
.tech-indicator-input-group button.is-success:hover {
  background: #059669;
  border-color: #059669;
  color: #ffffff;
}

.tech-indicator-input-group button.is-cache,
.tech-indicator-input-group button.is-cache:hover {
  background: #f97316;
  border-color: #f97316;
  color: #ffffff;
}

.tech-indicator-input-group button.is-error,
.tech-indicator-input-group button.is-error:hover {
  background: #dc2626;
  border-color: #dc2626;
  color: #ffffff;
}

.tech-indicator-ranges {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.tech-indicator-readout {
  align-items: center;
  background: #ffffff;
  border: 1px solid #e6eaf0;
  border-radius: 4px;
  color: #1f2937;
  display: flex;
  gap: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  min-height: 36px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 5px 8px;
  position: relative;
  white-space: nowrap;
}

.tech-indicator-readout-date,
.tech-indicator-readout-item {
  align-items: center;
  border-radius: 4px;
  display: inline-flex;
  flex: 0 0 auto;
  min-height: 26px;
}

.tech-indicator-readout-date {
  background: #f8fafc;
  border: 1px solid #dbe4ee;
  color: #1f2937;
  font-size: 14px;
  font-weight: 800;
  padding: 0 10px;
}

.tech-indicator-readout-title {
  align-items: center;
  color: #475569;
  display: inline-flex;
  flex: 0 1 360px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 800;
  justify-content: center;
  min-height: 26px;
  max-width: min(42vw, 420px);
  min-width: 0;
  overflow: hidden;
  padding: 0 6px;
  position: static;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tech-indicator-name {
  min-width: 0;
}

@media (max-width: 1360px) {
  .tech-indicator-readout-title {
    font-size: 15px;
    font-weight: 700;
  }

  .future-table-main {
    grid-template-columns: minmax(0, 1fr);
  }

  .future-table-hero,
  .future-table-main .future-detail-card,
  .future-kline-card {
    max-width: var(--future-panel-width);
  }
}

.tech-indicator-readout-item {
  background: #f8fafc;
  border: 1px solid #dbe4ee;
  gap: 5px;
  padding: 0 8px;
}

.tech-indicator-readout-item span {
  color: #64748b;
  font-weight: 700;
}

.tech-indicator-readout-item strong {
  color: #1f2937;
  font-weight: 800;
}

.tech-indicator-readout-change.positive {
  background: #fff1f0;
  border-color: #ffd4cf;
}

.tech-indicator-readout-change.positive span,
.tech-indicator-readout-change.positive strong {
  color: #d43f31;
}

.tech-indicator-readout-change.negative {
  background: #effaf4;
  border-color: #c8ecd5;
}

.tech-indicator-readout-change.negative span,
.tech-indicator-readout-change.negative strong {
  color: #178244;
}

.tech-indicator-readout-change.flat {
  background: #f1f5f9;
}

.tech-indicator-readout-item--locked {
  background: #fff8ea;
  border-color: #edcf9b;
  color: #9a5b08;
  font-family: inherit;
  font-weight: 750;
}

.tech-indicator-chart {
  background: #ffffff;
  border: 1px solid #d8dee8;
  border-radius: 4px;
  height: min(76vh, 860px);
  min-height: 820px;
  position: relative;
  width: 100%;
}

.tech-indicator-pane-label {
  color: #111827;
  font-size: 13px;
  font-weight: 600;
  left: 44px;
  line-height: 1.2;
  pointer-events: none;
  position: absolute;
  white-space: nowrap;
  z-index: 2;
}

.tech-indicator-pane-label--locked {
  color: #9a5b08;
}

.tech-indicator-indicator-lock {
  align-items: center;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid #d8dee8;
  border-radius: 6px;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.07);
  display: flex;
  gap: 12px;
  left: 50%;
  max-width: min(760px, calc(100% - 80px));
  min-height: 76px;
  padding: 13px 16px;
  position: absolute;
  transform: translateX(-50%);
  width: 760px;
  z-index: 4;
}

.tech-indicator-indicator-lock[hidden] {
  display: none;
}

.tech-indicator-indicator-lock-icon {
  align-items: center;
  background: #e8f4f4;
  border: 1px solid #b7dcdc;
  border-radius: 4px;
  color: #0d5f5f;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 15px;
  font-weight: 800;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.tech-indicator-indicator-lock-copy {
  display: grid;
  flex: 1 1 auto;
  gap: 3px;
  min-width: 0;
}

.tech-indicator-indicator-lock-copy strong {
  color: #1f2937;
  font-size: 15px;
  line-height: 1.35;
}

.tech-indicator-indicator-lock-copy span {
  color: #64748b;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.45;
}

.tech-indicator-indicator-lock-actions {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}

.tech-indicator-indicator-lock-actions button {
  background: #ffffff;
  border: 1px solid #d8dee8;
  border-radius: 4px;
  color: #334155;
  cursor: pointer;
  font-size: 13px;
  font-weight: 750;
  min-height: 30px;
  padding: 5px 10px;
  white-space: nowrap;
}

.tech-indicator-indicator-lock-actions button.primary {
  background: #117a7a;
  border-color: #117a7a;
  color: #ffffff;
}

.tech-indicator-indicator-lock-actions button:disabled,
.tech-indicator-indicator-lock-actions button[aria-disabled="true"] {
  background: #f1f5f9;
  border-color: #d8dee8;
  color: #94a3b8;
  cursor: not-allowed;
}

.tech-indicator-indicator-lock-actions button.primary:disabled,
.tech-indicator-indicator-lock-actions button.primary[aria-disabled="true"] {
  background: #dbe4e8;
  border-color: #cbd5e1;
  color: #64748b;
}

.tech-indicator-indicator-lock-actions button:not(:disabled):hover {
  border-color: #117a7a;
  color: #0d5f5f;
}

.tech-indicator-indicator-lock-actions button.primary:not(:disabled):hover {
  background: #0d5f5f;
  color: #ffffff;
}

.tech-indicator-status {
  color: #64748b;
  font-size: 14px;
  min-height: 22px;
  text-align: center;
}

.tech-indicator-center-message {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid #edcf9b;
  border-left: 6px solid #f59e0b;
  border-radius: 6px;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18);
  color: #8a3d06;
  font-size: 24px;
  font-weight: 800;
  left: 50vw;
  line-height: 1.45;
  max-width: min(720px, calc(100vw - 32px));
  padding: 22px 30px;
  position: fixed;
  text-align: center;
  top: 50vh;
  transform: translate(-50%, -50%);
  width: min(720px, calc(100vw - 32px));
  z-index: 60;
}

.tech-indicator-center-message[hidden] {
  display: none;
}

.strategy-stats-header {
  align-items: start;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  justify-content: space-between;
  min-width: 0;
}

.strategy-stats-header + .strategy-tracking-section {
  margin-top: 0;
}

.strategy-tracking-toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  justify-content: start;
}

.strategy-tracking-toolbar button {
  font-size: 16px;
  min-height: 34px;
  min-width: 68px;
}

.strategy-tracking-status {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.4;
  text-align: left;
}

.strategy-tracking-section {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.strategy-tracking-section[aria-labelledby="strategyRebalanceTitle"],
.strategy-tracking-section[aria-labelledby="strategyRebalanceTitleB"],
.strategy-tracking-section[aria-labelledby="strategyRebalanceTitleC"] {
  margin-top: var(--strategy-row-shift);
}

.strategy-section-heading {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  min-width: 0;
}

.strategy-tracking-section h3 {
  color: var(--text);
  font-size: 24px;
  line-height: 1.3;
  margin: 0;
}

.strategy-section-heading-meta {
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
}

.strategy-section-heading-meta[hidden] {
  display: none;
}

.strategy-realtime-access-bar {
  align-items: start;
  background:
    linear-gradient(135deg, rgba(17, 122, 122, 0.08), rgba(255, 255, 255, 0.96) 44%, rgba(241, 246, 246, 0.9)),
    repeating-linear-gradient(135deg, rgba(15, 118, 110, 0.055) 0 1px, transparent 1px 9px);
  border: 1px solid rgba(17, 122, 122, 0.22);
  border-radius: 8px;
  box-sizing: border-box;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.76);
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr);
  justify-content: start;
  margin-top: 8px;
  max-width: 100%;
  min-width: 0;
  padding: 16px 18px;
  width: 480px;
}

.strategy-realtime-access-bar[hidden] {
  display: none;
}

.strategy-realtime-access-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.strategy-realtime-access-copy span {
  color: var(--accent);
  font-size: 14px;
  font-weight: 750;
  line-height: 1.2;
}

.strategy-realtime-access-copy strong {
  color: var(--text);
  font-size: 24px;
  line-height: 1.22;
}

.strategy-realtime-access-copy small,
.strategy-realtime-access-actions span {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.strategy-realtime-access-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  justify-content: start;
  min-width: 0;
}

.strategy-realtime-access-actions button {
  min-height: 38px;
  white-space: nowrap;
}

.strategy-realtime-access-actions button:disabled {
  cursor: not-allowed;
}

.strategy-realtime-overview {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.strategy-realtime-main {
  --strategy-realtime-table-width: 980px;
  align-content: start;
  display: grid;
  gap: 12px;
  min-width: 0;
}

.strategy-rebalance-with-game {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.strategy-realtime-overview--with-game .strategy-rebalance-with-game {
  align-items: stretch;
  grid-template-columns: minmax(0, 1060px) 1020px;
}

.strategy-realtime-game-rail {
  align-self: stretch;
  display: grid;
  height: 100%;
  min-width: 0;
}

.strategy-realtime-game-rail[hidden] {
  display: none;
}

.strategy-realtime-game-rail .strategy-runaway-stage,
.strategy-realtime-game-rail .strategy-static-lock {
  height: 100%;
  min-height: 100%;
}

.strategy-tracking-grid {
  max-width: min(100%, 1060px);
  min-width: 0;
  overflow-x: auto;
  padding-bottom: 1px;
}

#strategyRebalanceGrid,
#strategyRebalanceGridB,
#strategyRebalanceGridC {
  max-width: min(100%, 1060px);
}

#strategyRebalanceGrid:has(.strategy-tracking-empty),
#strategyRebalanceGridB:has(.strategy-tracking-empty),
#strategyRebalanceGridC:has(.strategy-tracking-empty) {
  max-width: min(100%, 1060px);
}

.strategy-tracking-date-label {
  color: var(--text);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
}

.strategy-tracking-meta {
  color: var(--muted);
  font-size: 20px;
  line-height: 1.3;
}

.strategy-tracking-section[aria-labelledby="strategyHoldingsTitle"],
.strategy-tracking-section[aria-labelledby="strategyHoldingsTitleB"],
.strategy-tracking-section[aria-labelledby="strategyHoldingsTitleC"] {
  margin-top: calc(10px + var(--strategy-row-shift));
}

.strategy-holdings-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 20px 20px;
}

#strategyRebalanceGrid .strategy-tracking-meta,
#strategyRebalanceGridB .strategy-tracking-meta,
#strategyRebalanceGridC .strategy-tracking-meta,
#strategyHoldingsGrid .strategy-tracking-date-label,
#strategyHoldingsGridB .strategy-tracking-date-label,
#strategyHoldingsGridC .strategy-tracking-date-label {
  margin-bottom: 20px;
}

#strategyRebalanceGrid .strategy-tracking-date-label,
#strategyRebalanceGridB .strategy-tracking-date-label,
#strategyRebalanceGridC .strategy-tracking-date-label {
  margin-bottom: 12px;
}

.strategy-tracking-table {
  background: var(--surface);
  border: 1px solid var(--border);
  border-collapse: collapse;
  border-radius: 8px;
  font-size: 18px;
  min-width: min(100%, 680px);
  table-layout: auto;
  width: max-content;
}

#strategyRebalanceGrid .strategy-tracking-table,
#strategyRebalanceGridB .strategy-tracking-table,
#strategyRebalanceGridC .strategy-tracking-table,
#strategyHoldingsGrid .strategy-tracking-table,
#strategyHoldingsGridB .strategy-tracking-table,
#strategyHoldingsGridC .strategy-tracking-table {
  min-width: var(--strategy-realtime-table-width);
  table-layout: fixed;
  width: var(--strategy-realtime-table-width);
}

#strategyRebalanceGrid .strategy-secret-table,
#strategyRebalanceGridB .strategy-secret-table,
#strategyRebalanceGridC .strategy-secret-table,
#strategyHoldingsGrid .strategy-secret-table,
#strategyHoldingsGridB .strategy-secret-table,
#strategyHoldingsGridC .strategy-secret-table {
  min-width: 100%;
  width: 100%;
}

.strategy-tracking-table th,
.strategy-tracking-table td {
  border-bottom: 1px solid var(--border);
  font-size: 18px;
  line-height: 1.25;
  padding: 12px 14px;
  vertical-align: middle;
  white-space: nowrap;
}

.strategy-tracking-table td {
  text-align: left;
}

.strategy-tracking-table th {
  background: var(--surface-muted);
  color: var(--text);
  font-size: 20px;
  font-weight: 600;
  text-align: center;
}

.strategy-tracking-table .strategy-col-fund {
  width: 265px;
}

.strategy-tracking-table .strategy-col-position {
  width: 140px;
}

.strategy-tracking-table .strategy-col-date {
  width: 150px;
}

.strategy-tracking-table .strategy-col-cost,
.strategy-tracking-table .strategy-col-close {
  width: 140px;
}

.strategy-tracking-table .strategy-col-return {
  width: 145px;
}

.strategy-tracking-table td.cell-seq,
.strategy-tracking-table td.cell-date,
.strategy-tracking-table td.cell-type {
  text-align: center;
}

.strategy-tracking-table td.cell-number {
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.strategy-tracking-table tbody tr:last-child td {
  border-bottom: none;
}

.strategy-tracking-table .positive {
  color: #e74c3c;
}

.strategy-tracking-table .negative {
  color: #27ae60;
}

.strategy-tracking-table .strategy-code {
  color: var(--muted);
  font-size: 16px;
}

.strategy-tracking-empty {
  color: var(--muted);
  font-size: 18px;
  padding: 20px;
  text-align: center;
}

.strategy-no-rebalance {
  align-items: center;
  background: #fbfdfd;
  border: 1px solid var(--border);
  border-radius: 8px;
  display: grid;
  gap: 14px;
  grid-template-columns: auto minmax(0, 1fr);
  max-width: min(100%, 760px);
  min-height: 86px;
  padding: 16px 18px;
}

.strategy-no-rebalance-mark {
  align-items: center;
  background: #edf8f6;
  border: 1px solid #b9ded8;
  border-radius: 50%;
  color: var(--accent);
  display: inline-flex;
  font-size: 22px;
  font-weight: 900;
  height: 40px;
  justify-content: center;
  line-height: 1;
  width: 40px;
}

.strategy-no-rebalance-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.strategy-no-rebalance-copy strong {
  color: var(--text);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
}

.strategy-no-rebalance-copy span {
  color: var(--muted);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.4;
}

.strategy-sensitive-lock {
  background:
    linear-gradient(135deg, rgba(14, 132, 126, 0.08), rgba(255, 255, 255, 0.94) 42%),
    repeating-linear-gradient(135deg, rgba(15, 118, 110, 0.07) 0 1px, transparent 1px 9px);
  border: 1px solid rgba(14, 132, 126, 0.2);
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.75);
  display: grid;
  gap: 14px;
  max-width: min(100%, 1060px);
  overflow: hidden;
  padding: 16px;
  position: relative;
}

.strategy-sensitive-copy {
  display: grid;
  gap: 4px;
  max-width: 760px;
  position: relative;
  z-index: 1;
}

.strategy-sensitive-copy span {
  color: #0f766e;
  font-size: 15px;
  font-weight: 700;
}

.strategy-sensitive-copy strong {
  color: var(--text);
  font-size: 24px;
  line-height: 1.25;
}

.strategy-sensitive-copy small,
.strategy-sensitive-actions span,
.strategy-runaway-copy small {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.strategy-sensitive-table-shell {
  filter: blur(0.2px);
  opacity: 0.74;
  overflow-x: auto;
  pointer-events: none;
  position: relative;
}

.strategy-secret-table {
  table-layout: fixed;
  width: 100%;
}

.strategy-secret-table .strategy-col-fund {
  width: 26%;
}

.strategy-secret-table .strategy-col-position {
  width: 14%;
}

.strategy-secret-table .strategy-col-date {
  width: 16%;
}

.strategy-secret-table .strategy-col-cost,
.strategy-secret-table .strategy-col-close {
  width: 14%;
}

.strategy-secret-table .strategy-col-return {
  width: 16%;
}

.strategy-secret-table th,
.strategy-secret-table td {
  font-size: 16px;
  padding-left: 8px;
  padding-right: 8px;
}

.strategy-secret-table td {
  height: 47px;
}

.strategy-secret-bar {
  animation: strategy-secret-sweep 2.4s ease-in-out infinite;
  background: linear-gradient(90deg, rgba(148, 163, 184, 0.34), rgba(20, 184, 166, 0.28), rgba(148, 163, 184, 0.34));
  border-radius: 999px;
  display: block;
  height: 12px;
  margin: 0 auto;
  max-width: 180px;
  width: var(--bar-width, 58%);
}

.strategy-runaway-stage {
  background:
    linear-gradient(135deg, rgba(17, 122, 122, 0.08), rgba(255, 255, 255, 0.96) 42%, rgba(238, 243, 243, 0.92)),
    repeating-linear-gradient(135deg, rgba(15, 118, 110, 0.045) 0 1px, transparent 1px 9px),
    var(--surface);
  border: 1px solid rgba(17, 122, 122, 0.22);
  border-radius: 8px;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.82);
  cursor: default;
  min-height: 236px;
  overflow: hidden;
  position: relative;
  touch-action: none;
  user-select: none;
  z-index: 1;
}

.strategy-runaway-stage::before {
  background:
    linear-gradient(90deg, rgba(17, 122, 122, 0.055) 1px, transparent 1px),
    linear-gradient(rgba(17, 122, 122, 0.045) 1px, transparent 1px);
  background-size: 34px 34px;
  border: 1px solid rgba(17, 122, 122, 0.08);
  border-radius: 6px;
  content: "";
  inset: 14px;
  opacity: 0.72;
  pointer-events: none;
  position: absolute;
}

.strategy-runaway-stage::after {
  background: rgba(17, 122, 122, 0.12);
  border-radius: 999px;
  bottom: 16px;
  box-shadow: inset 0 0 0 1px rgba(17, 122, 122, 0.08);
  content: "";
  height: 6px;
  left: 18px;
  opacity: 0.82;
  pointer-events: none;
  position: absolute;
  right: 18px;
  transform-origin: left center;
  z-index: 2;
}

.strategy-runaway-stage.is-running::after {
  animation: strategy-runaway-countdown var(--strategy-game-duration, 10s) linear forwards;
  background: linear-gradient(90deg, var(--accent), rgba(20, 184, 166, 0.72));
  opacity: 0.95;
}

.strategy-runaway-stage.is-cooldown::after {
  animation: strategy-runaway-countdown var(--strategy-game-cooldown, 10s) linear forwards;
  background: linear-gradient(90deg, #d97706, rgba(245, 158, 11, 0.72));
  opacity: 0.9;
}

.strategy-runaway-copy {
  border-left: 3px solid var(--accent);
  display: grid;
  gap: 4px;
  left: 18px;
  max-width: min(460px, calc(100% - 36px));
  padding-left: 12px;
  pointer-events: none;
  position: absolute;
  top: 18px;
  z-index: 2;
}

.strategy-runaway-copy span {
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
}

.strategy-runaway-copy strong {
  color: var(--text);
  font-size: 24px;
  line-height: 1.25;
  white-space: nowrap;
}

.strategy-runaway-stage.is-escaped .strategy-runaway-copy strong {
  color: #b45309;
}

.strategy-runaway-stage.is-cooldown .strategy-runaway-copy strong {
  color: #92400e;
  font-size: 18px;
}

.strategy-runaway-stage.is-success .strategy-runaway-copy strong,
.strategy-runaway-stage.is-catchable .strategy-runaway-copy strong {
  color: #047857;
}

.strategy-runaway-stage.is-starting .strategy-runaway-copy strong {
  color: var(--accent-strong);
}

.strategy-runaway-success {
  align-content: center;
  background:
    linear-gradient(135deg, rgba(5, 150, 105, 0.14), rgba(255, 255, 255, 0.98) 48%, rgba(236, 253, 245, 0.94)),
    var(--surface);
  border: 1px solid rgba(5, 150, 105, 0.36);
  border-radius: 8px;
  box-shadow: 0 18px 38px rgba(5, 150, 105, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.86);
  display: grid;
  gap: 8px;
  min-height: 236px;
  padding: 28px;
  position: relative;
  z-index: 1;
}

.strategy-runaway-success::before {
  background: #059669;
  border-radius: 999px;
  content: "";
  height: 7px;
  left: 28px;
  position: absolute;
  right: 28px;
  top: 24px;
}

.strategy-runaway-success span {
  color: #047857;
  font-size: 14px;
  font-weight: 700;
}

.strategy-runaway-success strong {
  color: #047857;
  font-size: 30px;
  line-height: 1.18;
}

.strategy-runaway-success small {
  color: var(--text);
  font-size: 15px;
  line-height: 1.45;
}

.strategy-static-lock {
  background:
    linear-gradient(135deg, rgba(17, 122, 122, 0.08), rgba(255, 255, 255, 0.96) 52%, rgba(238, 243, 243, 0.92)),
    var(--surface);
  border: 1px solid rgba(17, 122, 122, 0.2);
  border-radius: 8px;
  display: grid;
  gap: 5px;
  min-height: 118px;
  padding: 20px;
  position: relative;
  z-index: 1;
}

.strategy-static-lock span {
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
}

.strategy-static-lock strong {
  color: var(--text);
  font-size: 24px;
  line-height: 1.25;
}

.strategy-static-lock small {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.strategy-runaway-button {
  align-items: center;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(17, 122, 122, 0.38);
  border-radius: 8px;
  box-shadow: 0 12px 24px rgba(15, 118, 110, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.72);
  color: var(--accent-strong);
  display: grid;
  gap: 2px;
  grid-template-columns: 1fr;
  height: 76px;
  justify-items: center;
  left: 0;
  min-width: 232px;
  overflow: hidden;
  padding: 8px 26px;
  pointer-events: none;
  position: absolute;
  top: 0;
  transition: box-shadow 0.16s ease, background 0.16s ease;
  will-change: transform;
  z-index: 3;
}

.strategy-runaway-button::before {
  background: var(--accent);
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  top: 0;
  width: 5px;
}

.strategy-runaway-button span {
  color: inherit;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.1;
}

.strategy-runaway-button small {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.1;
}

.strategy-runaway-button:hover,
.strategy-runaway-button:focus-visible {
  background: #ffffff;
  box-shadow: 0 16px 28px rgba(15, 118, 110, 0.18);
  outline: none;
}

.strategy-runaway-stage.is-catchable .strategy-runaway-button,
.strategy-runaway-stage.is-success .strategy-runaway-button {
  border-color: #059669;
  box-shadow: 0 14px 26px rgba(5, 150, 105, 0.18);
  color: #047857;
}

.strategy-runaway-stage.is-cooldown .strategy-runaway-button {
  border-color: #d97706;
  color: #92400e;
  opacity: 0.84;
}

.strategy-runaway-stage.is-cooldown .strategy-runaway-button::before {
  background: #d97706;
}

.strategy-sensitive-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  position: relative;
  z-index: 1;
}

.strategy-sensitive-actions button {
  min-height: 36px;
}

.strategy-follow-gate {
  background:
    linear-gradient(135deg, rgba(17, 122, 122, 0.08), rgba(255, 255, 255, 0.96) 44%, rgba(241, 246, 246, 0.9));
  border: 1px solid rgba(17, 122, 122, 0.22);
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.76);
  display: grid;
  gap: 14px;
  margin-top: 8px;
  max-width: min(100%, 760px);
  padding: 18px;
}

.strategy-follow-gate[hidden] {
  display: none;
}

.strategy-follow-gate-copy {
  display: grid;
  gap: 5px;
}

.strategy-follow-gate-copy span {
  color: var(--accent);
  font-size: 14px;
  font-weight: 750;
}

.strategy-follow-gate-copy strong {
  color: var(--text);
  font-size: 24px;
  line-height: 1.22;
}

.strategy-follow-gate-copy small {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.strategy-follow-progress {
  display: grid;
  gap: 8px;
}

.strategy-follow-progress-bar {
  background: #dce8e8;
  border-radius: 999px;
  height: 8px;
  overflow: hidden;
}

.strategy-follow-progress-bar span {
  background: var(--accent);
  display: block;
  height: 100%;
  width: var(--follow-progress, 0%);
}

.strategy-follow-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.strategy-follow-error {
  color: #b91c1c;
  font-size: 13px;
}

.strategy-follow-qr {
  border: 1px solid var(--border);
  border-radius: 8px;
  height: 92px;
  object-fit: cover;
  width: 92px;
}

@media (max-width: 720px) {
  .strategy-follow-gate {
    max-width: 100%;
    padding: 14px;
  }

  .strategy-follow-gate-copy strong {
    font-size: 20px;
  }

  .strategy-follow-actions {
    align-items: stretch;
    display: grid;
  }

  .strategy-follow-qr {
    height: 112px;
    width: 112px;
  }
}

@keyframes strategy-secret-sweep {
  0%, 100% {
    opacity: 0.55;
    transform: scaleX(0.92);
  }
  50% {
    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes strategy-runaway-countdown {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

@media (max-width: 1900px) {
  .strategy-realtime-overview--with-game .strategy-rebalance-with-game {
    grid-template-columns: minmax(0, 1fr);
  }

  .strategy-realtime-game-rail .strategy-runaway-stage,
  .strategy-realtime-game-rail .strategy-static-lock {
    min-height: 236px;
  }
}

.strategy-decision-card {
  align-items: center;
  background: #eaf7f4;
  border: 1px solid #b9ded8;
  border-radius: 8px;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) auto;
  max-width: 720px;
  padding: 20px 22px;
}

.strategy-decision-card strong {
  color: var(--text);
  font-size: 34px;
  font-weight: 850;
  line-height: 1.1;
}

.strategy-decision-copy {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.strategy-decision-copy small {
  color: var(--muted);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}

.strategy-decision-copy em {
  color: var(--muted);
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.45;
}

.strategy-decision-card span {
  background: var(--surface);
  border: 1px solid #b9ded8;
  border-radius: 8px;
  color: var(--accent);
  font-size: 22px;
  font-weight: 850;
  line-height: 1.15;
  padding: 12px 16px;
  white-space: nowrap;
}

.strategy-decision-card--pending {
  background: #f8fbfd;
  border-color: var(--border);
  gap: 14px;
  grid-template-columns: auto auto;
  max-width: 100%;
  padding: 10px 14px;
  width: fit-content;
}

.strategy-decision-card--pending .strategy-decision-copy {
  align-self: center;
  gap: 0;
}

.strategy-decision-card--pending .strategy-decision-copy small {
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}

.strategy-decision-card--pending strong {
  font-size: 26px;
}

.strategy-decision-card--pending strong:empty {
  display: none;
}

.strategy-decision-card--pending span {
  align-self: center;
  border-color: var(--border);
  color: var(--accent);
  font-size: 20px;
  justify-self: start;
  padding: 9px 14px;
}

.strategy-cash-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  max-width: 520px;
  padding: 18px 20px;
}

.strategy-cash-card span {
  color: var(--muted);
  font-size: 15px;
  font-weight: 750;
  line-height: 1.25;
}

.strategy-cash-card strong {
  color: var(--text);
  font-size: 24px;
  font-weight: 850;
  line-height: 1.2;
}

/* ===== 策略统计与图表 ===== */
.strategy-stats-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  display: grid;
  gap: 14px;
  padding: 16px;
}

.strategy-info-header {
  align-items: start;
  display: grid;
  flex: 1 1 420px;
  justify-content: stretch;
  min-width: 0;
  width: 100%;
}

.strategy-info-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.strategy-info-name {
  color: var(--text);
  font-size: 28px;
  font-weight: 800;
  line-height: 1.18;
}

.strategy-info-meta {
  color: var(--muted);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
}

.strategy-history-stats-title {
  color: var(--text);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  margin-top: var(--strategy-row-shift);
}

.strategy-history-meta {
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  font-weight: 650;
  gap: 8px 16px;
  line-height: 1.4;
  margin-top: -6px;
}

.strategy-history-meta span {
  white-space: nowrap;
}

/* 标签页 */
.strategy-stat-row {
  align-items: center;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.strategy-tabs {
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

.strategy-stat-tabs {
  border-bottom: 0;
}

.strategy-tabs.strategy-stat-tabs button {
  font-size: 16px;
}

.strategy-tabs button {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
  padding: 8px 14px;
  transition: color 0.15s, border-color 0.15s;
}

.strategy-tabs button:hover {
  color: var(--text);
}

.strategy-tabs button.active {
  border-bottom-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

/* 统计表格 */
.strategy-stats-content {
  min-height: 0;
  overflow-x: auto;
  text-align: left;
}

.strategy-stats-grid {
  display: inline-block;
  min-width: 100%;
}

.strategy-stats-table {
  border-collapse: collapse;
  display: inline-table;
  font-size: 13px;
  min-width: 100%;
  outline: 1px solid var(--border);
  outline-offset: -1px;
  table-layout: auto;
  width: 100%;
}

.strategy-stats-table[hidden] {
  display: none !important;
}

.strategy-stats-table th,
.strategy-stats-table td {
  border: 1px solid var(--border);
  padding: 6px 10px;
  text-align: center;
  white-space: nowrap;
}

.strategy-stats-table th {
  background: var(--surface-muted);
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
}

.strategy-stats-table td:first-child {
  background: var(--surface-muted);
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}

.strategy-summary-table.strategy-stats-table td:first-child {
  text-align: center;
}

.strategy-stats-table .positive {
  color: #e74c3c;
}

.strategy-stats-table .negative {
  color: #27ae60;
}

/* 交易统计复用收益统计表格样式 */
.strategy-trade-table {
  table-layout: auto;
  width: 100%;
}

.strategy-trade-table tbody td {
  background: var(--surface);
  font-variant-numeric: tabular-nums;
  text-align: center;
  vertical-align: middle;
}

.strategy-trade-table .strategy-trade-empty {
  visibility: hidden;
}

/* 图表控制区 */
.strategy-chart-controls {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 4px 0;
}

.strategy-chart-mode,
.strategy-chart-log {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  font-size: 13px;
  gap: 6px;
}

.strategy-chart-mode input,
.strategy-chart-log input {
  cursor: pointer;
  margin: 0;
}

/* 时间区间选择 */
.strategy-chart-range {
  display: inline-flex;
  gap: 4px;
}

.strategy-chart-range button {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  padding: 3px 10px;
  transition: all 0.15s ease;
}

.strategy-chart-range button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.strategy-chart-range button.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Ensure hidden attribute works on flex/inline-flex elements */
.strategy-chart-mode[hidden],
.strategy-chart-log[hidden],
.strategy-chart-range[hidden],
.strategy-chart-granularity[hidden] {
  display: none !important;
}

/* 收益分布粒度切换 */
.strategy-chart-granularity {
  display: inline-flex;
  gap: 4px;
}

.strategy-chart-granularity button {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  padding: 3px 10px;
  transition: all 0.15s ease;
}

.strategy-chart-granularity button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.strategy-chart-granularity button.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* 图表容器 */
.strategy-chart-wrapper {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  min-height: 360px;
  padding: 12px;
  position: relative;
}

.strategy-chart-wrapper canvas {
  max-height: 400px;
}

.strategy-chart-issue {
  align-items: center;
  background: var(--surface-muted);
  border: 1px dashed var(--border);
  border-radius: 6px;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
  min-height: 220px;
  padding: 24px;
  text-align: center;
}

.strategy-chart-issue strong {
  color: var(--text);
  font-size: 15px;
}

/* 周收益/分布图表容器 */
.strategy-chart-wrapper--bar {
  min-height: 280px;
}

.strategy-chart-wrapper--bar canvas {
  max-height: 320px;
}

.portfolio-report-grid--holding {
  grid-template-columns: max-content;
  justify-content: start;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
}

.portfolio-report-figure {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  display: grid;
  gap: 8px;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  padding: 10px;
}

.portfolio-report-figure a {
  align-items: center;
  background: #f3f6f8;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  min-height: 220px;
  overflow: hidden;
  position: relative;
}

.portfolio-report-figure img {
  display: block;
  height: auto;
  max-height: 760px;
  max-width: 100%;
  object-fit: contain;
  width: auto;
}

.portfolio-report-figure figcaption {
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.portfolio-report-grid--holding .portfolio-report-figure figcaption {
  display: none;
}

.portfolio-report-empty {
  align-items: center;
  background: #fff;
  border: 1px dashed var(--border);
  border-radius: 6px;
  color: var(--muted);
  display: flex;
  font-size: 13px;
  font-weight: 700;
  justify-content: center;
  min-height: 88px;
  padding: 16px;
  text-align: center;
}

.portfolio-performance-panel {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-sizing: border-box;
  display: grid;
  gap: 8px;
  margin-top: 14px;
  max-width: min(100%, 1307px);
  min-width: 0;
  padding: 12px 14px;
}

.portfolio-performance-panel[hidden] {
  display: none;
}

.portfolio-performance-header {
  align-items: center;
  display: grid;
  gap: 8px 12px;
  grid-template-columns: minmax(0, max-content) minmax(180px, 1fr) max-content;
}

.portfolio-performance-heading {
  min-width: 0;
}

.portfolio-performance-title-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  min-width: 0;
  width: 100%;
}

.portfolio-performance-header h3 {
  color: var(--text);
  flex: 0 0 auto;
  font-size: 15px;
  line-height: 1.3;
  margin: 0;
}

.portfolio-performance-status {
  color: var(--muted);
  display: block;
  font-size: 12px;
  justify-self: center;
  margin-top: 0;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

.portfolio-performance-status--fund-title {
  color: var(--text);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
  margin: 0;
}

.portfolio-performance-controls {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: end;
  justify-self: end;
  max-width: 640px;
  min-width: 0;
}

.portfolio-performance-toolbar {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
  min-width: 0;
}

.portfolio-performance-subject,
.portfolio-performance-range,
.portfolio-performance-more-range,
.portfolio-performance-custom-start,
.portfolio-performance-mode {
  align-items: center;
  background: #f3f6f8;
  border: 1px solid #dbe4ea;
  border-radius: 7px;
  display: flex;
  gap: 2px;
  padding: 2px;
}

.portfolio-performance-more-range {
  box-sizing: border-box;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  gap: 5px;
  min-height: 34px;
  padding: 2px 6px 2px 8px;
  white-space: nowrap;
}

.portfolio-performance-more-range.active {
  border-color: rgba(17, 122, 122, 0.42);
  box-shadow: 0 0 0 2px rgba(17, 122, 122, 0.08);
}

.portfolio-performance-more-range select {
  appearance: auto;
  background: #fff;
  border: 1px solid #dbe4ea;
  border-radius: 5px;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  min-height: 26px;
  min-width: 86px;
  padding: 3px 5px;
}

.portfolio-performance-custom-start {
  box-sizing: border-box;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  gap: 0;
  min-height: 34px;
  padding: 2px 6px 2px 8px;
  white-space: nowrap;
}

.portfolio-performance-custom-start label {
  align-items: center;
  display: inline-flex;
  gap: 5px;
  min-width: 0;
}

.portfolio-performance-custom-start.active {
  border-color: rgba(17, 122, 122, 0.42);
  box-shadow: 0 0 0 2px rgba(17, 122, 122, 0.08);
}

.portfolio-performance-custom-start input {
  appearance: auto;
  background: #fff;
  border: 1px solid #dbe4ea;
  border-radius: 5px;
  box-sizing: border-box;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  min-height: 26px;
  min-width: 112px;
  padding: 3px 5px;
  width: 112px;
}

.portfolio-performance-benchmark {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--muted);
  display: inline-flex;
  box-sizing: border-box;
  font-size: 12px;
  font-weight: 700;
  gap: 5px;
  justify-content: flex-end;
  max-width: 100%;
  min-height: 34px;
  min-width: 238px;
  padding: 0;
}

.portfolio-performance-benchmark select {
  appearance: auto;
  background: #fff;
  border: 1px solid #dbe4ea;
  border-radius: 5px;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  max-width: min(260px, 62vw);
  min-height: 26px;
  min-width: 176px;
  padding: 3px 5px;
}

.portfolio-performance-subject button,
.portfolio-performance-range button,
.portfolio-performance-mode button {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  min-height: 30px;
  min-width: 0;
  padding: 5px 8px;
  white-space: nowrap;
}

.portfolio-performance-subject button {
  min-width: 68px;
}

.portfolio-performance-subject [data-portfolio-subject="fund"] {
  min-width: 104px;
}

.portfolio-performance-range button {
  min-width: 42px;
}

.portfolio-performance-mode button {
  min-width: 50px;
}

.portfolio-performance-mode {
  margin-left: 10px;
}

.portfolio-performance-subject button:hover,
.portfolio-performance-range button:hover,
.portfolio-performance-mode button:hover {
  background: #fff;
  border-color: #b9d5d2;
  color: var(--accent);
}

.portfolio-performance-subject button.active,
.portfolio-performance-range button.active,
.portfolio-performance-mode button.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.portfolio-performance-subject button:disabled {
  color: #a9b6c2;
  cursor: not-allowed;
}

.portfolio-performance-cards {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  width: 100%;
}

.portfolio-performance-card {
  background: #f8f9fa;
  border: 1px solid #e6edf3;
  border-radius: 6px;
  display: grid;
  justify-content: stretch;
  min-height: 56px;
  min-width: 0;
  padding: 8px 10px;
}

.portfolio-performance-card--loading {
  gap: 8px;
}

.portfolio-performance-card--loading span,
.portfolio-performance-card--loading strong {
  background: linear-gradient(90deg, #eef3f6 0%, #f8fafc 50%, #eef3f6 100%);
  background-size: 180% 100%;
  border-radius: 999px;
  display: block;
  height: 12px;
  width: 58%;
  animation: portfolio-loading-sheen 1.2s ease-in-out infinite;
}

.portfolio-performance-card--loading strong {
  height: 18px;
  width: 72%;
}

.portfolio-performance-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

.portfolio-performance-value {
  color: var(--text);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portfolio-performance-value.positive {
  color: #e74c3c;
}

.portfolio-performance-value.negative {
  color: #27ae60;
}

.portfolio-performance-chart-card,
.portfolio-performance-excess-card,
.portfolio-performance-drawdown-card {
  background: #fff;
  border: 1px solid #e6edf3;
  border-radius: 6px;
  box-sizing: border-box;
  min-width: 0;
  overflow: hidden;
  padding: 10px;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  width: 100%;
}

.portfolio-performance-chart-card {
  display: grid;
  gap: 6px;
  min-height: 310px;
  position: relative;
}

.portfolio-performance-chart-loading {
  align-items: center;
  background: transparent;
  color: var(--muted);
  display: inline-flex;
  flex-direction: column;
  font-size: 13px;
  font-weight: 800;
  gap: 10px;
  inset: 0;
  justify-content: center;
  line-height: 1.35;
  pointer-events: none;
  position: absolute;
  text-align: center;
  z-index: 2;
}

.portfolio-performance-chart-spinner {
  animation: portfolio-chart-spin 0.8s linear infinite;
  background: rgba(255, 255, 255, 0.86);
  border: 3px solid #d9e5ea;
  border-top-color: var(--accent);
  border-radius: 999px;
  box-sizing: border-box;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
  height: 34px;
  width: 34px;
}

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

@keyframes portfolio-loading-sheen {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

.portfolio-performance-chart-card canvas,
.portfolio-performance-excess-card canvas,
.portfolio-performance-drawdown-card canvas {
  display: block;
  max-height: 320px;
  max-width: 100%;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  width: 100% !important;
}

.portfolio-performance-axis-dates {
  align-items: center;
  color: var(--muted);
  display: none;
  font-size: 12px;
  font-weight: 700;
  justify-content: space-between;
  line-height: 1.2;
  min-height: 15px;
  padding: 0 2px;
}

.portfolio-performance-excess-card,
.portfolio-performance-drawdown-card {
  display: grid;
  gap: 6px;
  min-height: 150px;
}

.portfolio-performance-excess-card {
  gap: 0;
  min-height: 168px;
  position: relative;
}

.portfolio-performance-excess-card[hidden] {
  display: none;
}

.portfolio-performance-excess-card canvas,
.portfolio-performance-drawdown-card canvas {
  max-height: 130px;
}

.portfolio-performance-excess-card canvas {
  max-height: 150px;
}

.portfolio-performance-excess-title,
.portfolio-performance-drawdown-title {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.portfolio-performance-excess-title {
  background: rgba(255, 255, 255, 0.86);
  border-radius: 4px;
  left: 12px;
  line-height: 1.2;
  padding: 1px 4px;
  pointer-events: none;
  position: absolute;
  top: 6px;
  z-index: 1;
}

.portfolio-holdings-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  display: inline-block;
  max-width: none;
  overflow: visible;
  padding: 12px;
  width: max-content;
}

.portfolio-summary {
  align-items: center;
  display: flex;
  column-gap: 22px;
  row-gap: 10px;
  margin-bottom: 12px;
  padding: 14px 16px;
  background: #f8f9fa;
  border-radius: 6px;
  flex-wrap: nowrap;
  overflow: visible;
}

.portfolio-holdings-card .portfolio-summary {
  box-sizing: border-box;
  min-width: var(--portfolio-summary-width, var(--portfolio-table-width, auto));
  overflow: visible;
  width: var(--portfolio-summary-width, var(--portfolio-table-width, auto));
}

.summary-item {
  display: flex;
  align-items: baseline;
  column-gap: 8px;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  min-width: 0;
  row-gap: 3px;
  white-space: nowrap;
}

.summary-label {
  font-size: 14px;
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
}

.summary-value {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

.summary-value.positive {
  color: #e74c3c;
}

.summary-value.negative {
  color: #27ae60;
}

.summary-meta {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.summary-refresh-slot {
  align-items: center;
  display: inline-flex;
}

.summary-refresh-button {
  border-radius: 4px;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  min-height: 0;
  padding: 3px 8px;
  white-space: nowrap;
}

.summary-buy-calc-button {
  border-radius: 4px;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  min-height: 0;
  padding: 3px 8px;
  white-space: nowrap;
}

.portfolio-buy-calc {
  align-items: start;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 6px;
  display: inline-grid;
  gap: 8px;
  grid-template-columns: max-content;
  margin-bottom: 12px;
  max-width: var(--portfolio-table-width, 100%);
  padding: 8px 10px;
  width: fit-content;
}

.portfolio-buy-calc--with-result {
  grid-template-columns: minmax(0, 1fr);
  width: min(660px, var(--portfolio-table-width, 660px));
}

.portfolio-buy-calc-note,
.portfolio-buy-calc-empty,
.portfolio-buy-calc-error {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}

.portfolio-buy-calc-note {
  width: max-content;
}

.portfolio-buy-calc-error {
  color: var(--danger);
  flex-basis: 100%;
}

.portfolio-buy-calc-controls {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.portfolio-buy-calc-controls label {
  align-items: center;
  color: var(--muted);
  display: inline-flex;
  flex-wrap: nowrap;
  font-size: 13px;
  font-weight: 650;
  gap: 6px;
}

.portfolio-buy-calc-controls input {
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font: inherit;
  min-height: 30px;
  padding: 4px 8px;
  text-align: right;
  width: 132px;
}

.portfolio-buy-calc-controls input:focus {
  border-color: var(--accent);
  outline: 2px solid rgba(17, 122, 122, 0.14);
}

.portfolio-buy-calc-table {
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed;
  width: 100%;
}

.portfolio-buy-calc-table col.portfolio-buy-col-code {
  width: 86px;
}

.portfolio-buy-calc-table col.portfolio-buy-col-name {
  width: auto;
}

.portfolio-buy-calc-table col.portfolio-buy-col-ratio {
  width: 86px;
}

.portfolio-buy-calc-table col.portfolio-buy-col-amount {
  width: 128px;
}

.portfolio-buy-calc-table thead {
  background: #eef5f5;
}

.portfolio-buy-calc-table th,
.portfolio-buy-calc-table td {
  border-bottom: 1px solid var(--border);
  color: var(--text);
  padding: 8px;
  text-align: center;
  white-space: nowrap;
}

.portfolio-buy-calc-table th {
  color: var(--muted);
  font-weight: 700;
}

.portfolio-buy-calc-table td:nth-child(2) {
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
}

.portfolio-buy-calc-table td:nth-child(4) {
  color: var(--text);
  font-weight: 700;
}

.portfolio-buy-calc-summary-row td {
  background: #f8fafc;
  font-weight: 700;
}

.summary-item--actual-gain {
  align-items: center;
  column-gap: 18px;
  flex: 0 0 auto;
  flex-wrap: nowrap;
}

.summary-change-group {
  align-items: baseline;
  column-gap: 8px;
  display: inline-flex;
  flex: 0 0 auto;
  white-space: nowrap;
}

.summary-item--actual-gain .summary-label,
.summary-item--actual-gain .summary-value {
  white-space: nowrap;
}

.portfolio-refresh-pill {
  align-items: center;
  background: #edf7f7;
  border: 1px solid #c9e8e8;
  border-radius: 999px;
  color: var(--accent-strong);
  display: flex;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  gap: 6px;
  line-height: 1.2;
  min-height: 22px;
  padding: 3px 9px;
  white-space: nowrap;
}

.portfolio-refresh-pill__dot {
  animation: portfolio-refresh-pulse 1.1s ease-in-out infinite;
  background: var(--accent);
  border-radius: 50%;
  display: inline-block;
  height: 6px;
  width: 6px;
}

@keyframes portfolio-refresh-pulse {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(0.82);
  }

  50% {
    opacity: 1;
    transform: scale(1);
  }
}

.portfolio-value-pending {
  background: linear-gradient(90deg, #f7fafc 0%, #edf3f5 45%, #f7fafc 90%);
  background-size: 200% 100%;
  color: #8a98a7;
}

@media (prefers-reduced-motion: no-preference) {
  .portfolio-value-pending {
    animation: portfolio-pending-shimmer 1.4s ease-in-out infinite;
  }
}

@keyframes portfolio-pending-shimmer {
  to {
    background-position: -200% 0;
  }
}

.custom-portfolio-summary {
  align-items: center;
  column-gap: 16px;
  justify-content: space-between;
  min-width: 1120px;
}

.portfolio-holdings-card .custom-portfolio-summary {
  max-width: 1120px;
  min-width: 1120px;
  width: 1120px;
}

.custom-portfolio-actions {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: 8px;
  justify-content: flex-end;
  min-width: 0;
}

.custom-portfolio-actions button.primary {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}

.custom-portfolio-actions button.primary:hover {
  border-color: var(--accent);
}

.custom-portfolio-status {
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--muted);
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  max-width: 112px;
  min-width: max-content;
  overflow: hidden;
  padding: 3px 8px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custom-portfolio-status[hidden] {
  display: none;
}

.custom-portfolio-status--dirty,
.custom-portfolio-status--refreshing {
  background: #fff7ed;
  border-color: #fed7aa;
  color: var(--warn);
}

.custom-portfolio-switcher {
  align-items: center;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 12px;
  min-width: 1120px;
  padding: 10px 12px;
}

.custom-portfolio-switcher-main {
  align-items: center;
  display: flex;
  gap: 10px;
  min-width: 0;
}

.custom-portfolio-switcher-label {
  color: var(--text);
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 600;
}

.custom-portfolio-chip-list {
  display: flex;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
  padding: 2px 0;
}

.custom-portfolio-chip {
  align-items: center;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  display: inline-flex;
  flex: 0 0 auto;
  font-weight: 700;
  gap: 6px;
  line-height: 1.2;
  min-height: 34px;
  padding: 5px 10px;
  white-space: nowrap;
}

.custom-portfolio-chip.active {
  background: #f8fafc;
  border-color: var(--accent);
  box-shadow: none;
  color: var(--text);
}

.custom-portfolio-chip.active span {
  color: var(--text);
  font-weight: 850;
}

.custom-portfolio-chip small {
  color: inherit;
  font-size: 12px;
  font-weight: 700;
  opacity: 0.9;
}

.custom-portfolio-chip.active small {
  background: rgba(0, 0, 0, 0.06);
  border-radius: 999px;
  color: var(--text);
  padding: 1px 5px;
  opacity: 1;
}

.custom-portfolio-manager-actions {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}

.custom-portfolio-card-title {
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 8px;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 1120px;
}

.portfolio-holdings-table {
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 16px;
  min-width: var(--portfolio-table-width, auto);
  width: var(--portfolio-table-width, auto);
}

.portfolio-holdings-table col.portfolio-col-id {
  width: 52px;
}

.portfolio-holdings-table col.portfolio-col-code {
  width: 70px;
}

.portfolio-holdings-table col.portfolio-col-name {
  width: var(--portfolio-name-width, 300px);
}

.portfolio-holdings-table col.portfolio-col-ratio {
  width: 82px;
}

.portfolio-holdings-table col.portfolio-col-nav-change {
  width: 94px;
}

.portfolio-holdings-table col.portfolio-col-estimate-change {
  width: 94px;
}

.portfolio-holdings-table col.portfolio-col-nav-date {
  width: 116px;
}

.portfolio-holdings-table thead {
  background: #f8f9fa;
}

.portfolio-holdings-table th {
  padding: 10px 8px;
  text-align: center;
  font-weight: 600;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  position: static;
  white-space: nowrap;
  z-index: auto;
}

.portfolio-holdings-table td {
  padding: 8px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  text-align: center;
  white-space: nowrap;
}

.portfolio-holdings-table td:nth-child(3) {
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portfolio-holdings-table td:nth-child(6) {
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

.portfolio-holdings-table tbody tr:hover {
  background: #f8f9fa;
}

.portfolio-holdings-table tbody tr[data-portfolio-holding-code] {
  cursor: pointer;
}

.portfolio-holdings-table tbody tr[data-portfolio-holding-code]:focus-visible {
  outline: 2px solid rgba(15, 127, 131, 0.45);
  outline-offset: -2px;
}

.portfolio-holdings-table tbody tr.portfolio-holding-row--selected td {
  background: #eef8fb;
  border-bottom-color: #b9dce2;
}

.portfolio-holdings-table tbody tr.portfolio-holding-row--selected td:first-child {
  border-left: 2px solid var(--accent);
}

.portfolio-holdings-table tbody tr.portfolio-holdings-summary-row td {
  background: #f8fafc;
  border-top: 1px solid var(--border);
  font-weight: 700;
}

.portfolio-holdings-table tbody tr.portfolio-holdings-summary-row td:nth-child(3) {
  text-align: center;
}

.portfolio-holdings-table tbody tr:last-child td {
  border-bottom: 1px solid var(--border);
}

.portfolio-holdings-table td.positive {
  color: #e74c3c;
  font-weight: 600;
}

.portfolio-holdings-table td.negative {
  color: #27ae60;
  font-weight: 600;
}

.portfolio-nav-change-value {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 4px;
  display: inline-flex;
  font-weight: 700;
  justify-content: center;
  line-height: 1.2;
  min-width: 58px;
  padding: 2px 6px;
}

.portfolio-nav-change-value.positive {
  background: #fff1f0;
  border-color: #ffd6d1;
  color: #e74c3c;
}

.portfolio-nav-change-value.negative {
  background: #eefaf2;
  border-color: #ccefd8;
  color: #27ae60;
}

.portfolio-holdings-table td.portfolio-date-latest {
  background: #fff7d6;
  box-shadow: inset 0 0 0 1px #f1c84b;
  color: #8a5a00;
  font-weight: 700;
}

.portfolio-holdings-table tbody tr:hover td.portfolio-date-latest {
  background: #fff1b8;
}

.custom-portfolio-card {
  min-width: 1120px;
}

.custom-portfolio-table {
  min-width: 1120px;
  width: 1120px;
}

.custom-portfolio-table col.custom-col-code {
  width: 96px;
}

.custom-portfolio-table col.custom-col-name {
  width: 210px;
}

.custom-portfolio-table col.custom-col-weight {
  width: 86px;
}

.custom-portfolio-table col.custom-col-date,
.custom-portfolio-table col.custom-col-change {
  width: 96px;
}

.custom-portfolio-table col.custom-col-time {
  width: 138px;
}

.custom-portfolio-table col.custom-col-action {
  width: 82px;
}

.custom-portfolio-code-input,
.custom-portfolio-weight-input {
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  display: block;
  font: inherit;
  margin: 0 auto;
  min-height: 30px;
  padding: 4px 6px;
  text-align: center;
  width: 100%;
}

.custom-portfolio-code-input:focus,
.custom-portfolio-weight-input:focus {
  border-color: var(--accent);
  outline: 2px solid rgba(17, 122, 122, 0.14);
}

.custom-portfolio-add-row td {
  background: #eef8f7;
  border-top: 1px solid #cbe4e2;
}

.custom-portfolio-add-row:hover td {
  background: #e8f5f4;
}

.custom-portfolio-draft-hint {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custom-portfolio-draft-hint,
.custom-portfolio-muted-cell {
  color: var(--muted);
  font-size: 12px;
}

.custom-portfolio-add-button {
  min-width: 58px;
}

.custom-portfolio-image-modal {
  inset: 0;
  position: fixed;
  z-index: 1400;
}

.custom-portfolio-image-backdrop {
  background: rgba(15, 23, 42, 0.42);
  inset: 0;
  position: absolute;
}

.custom-portfolio-image-dialog {
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.42);
  border-radius: 8px;
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.22);
  color: var(--text);
  display: flex;
  flex-direction: column;
  left: 50%;
  max-height: min(86vh, 760px);
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(640px, calc(100vw - 32px));
}

.custom-portfolio-image-header {
  align-items: center;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  padding: 16px 18px 12px;
}

.custom-portfolio-image-header h2 {
  font-size: 20px;
  line-height: 1.25;
  margin: 0;
}

.custom-portfolio-image-close {
  align-items: center;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--muted);
  display: inline-flex;
  font-size: 20px;
  height: 30px;
  justify-content: center;
  order: 2;
  padding: 0;
  width: 30px;
}

.custom-portfolio-image-stepper {
  background: #f8fafc;
  border-bottom: 1px solid var(--border);
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 10px 18px;
}

.custom-portfolio-image-step {
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  padding: 8px 10px;
  text-align: center;
}

.custom-portfolio-image-step.active {
  background: #eef8f7;
  border-color: rgba(17, 122, 122, 0.36);
  color: var(--accent);
}

.custom-portfolio-image-body {
  overflow: auto;
  padding: 16px 18px;
}

.custom-portfolio-image-section {
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  padding: 16px;
}

.custom-portfolio-image-section h3 {
  align-items: center;
  display: flex;
  font-size: 16px;
  gap: 8px;
  margin: 0;
}

.custom-portfolio-image-section h3 span {
  align-items: center;
  background: #eef8f7;
  border: 1px solid rgba(17, 122, 122, 0.24);
  border-radius: 999px;
  color: var(--accent);
  display: inline-flex;
  font-size: 12px;
  height: 24px;
  justify-content: center;
  width: 24px;
}

.custom-portfolio-image-upload {
  align-items: center;
  background: #f8fafc;
  border: 1px dashed #b9c4cf;
  border-radius: 8px;
  cursor: pointer;
  display: grid;
  gap: 12px;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  min-height: 90px;
  padding: 12px 14px;
}

.custom-portfolio-image-thumb {
  background: linear-gradient(135deg, #eef8f7 0%, #f8fafc 60%, #fff7ed 100%);
  border: 1px solid var(--border);
  border-radius: 6px;
  height: 52px;
  width: 52px;
}

.custom-portfolio-image-upload-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.custom-portfolio-image-upload-copy strong,
.custom-portfolio-image-upload-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custom-portfolio-image-upload-copy small {
  color: var(--muted);
  font-size: 12px;
}

.custom-portfolio-image-upload-icon {
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  display: inline-flex;
  font-size: 26px;
  font-weight: 800;
  justify-content: center;
  min-height: 80px;
  min-width: 144px;
  padding: 16px 32px;
}

.custom-portfolio-image-actions button {
  min-height: 36px;
  white-space: nowrap;
}

.custom-portfolio-image-loading,
.custom-portfolio-image-error,
.custom-portfolio-image-notice,
.custom-portfolio-image-empty {
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.5;
  padding: 9px 10px;
}

.custom-portfolio-image-loading {
  align-items: center;
  background: #f8fafc;
  color: var(--muted);
  display: flex;
  gap: 8px;
}

.custom-portfolio-image-error {
  background: #fff1f0;
  border: 1px solid #ffd6d1;
  color: #b42318;
}

.custom-portfolio-image-notice {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #9a3412;
}

.custom-portfolio-image-results-panel {
  border-top: 1px solid var(--border);
  display: grid;
  gap: 10px;
  padding-top: 2px;
}

.custom-portfolio-image-result-header {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.custom-portfolio-image-result-header strong {
  font-size: 14px;
}

.custom-portfolio-image-result-header span {
  color: var(--muted);
  font-size: 12px;
}

.custom-portfolio-image-results {
  display: grid;
  gap: 8px;
  max-height: 320px;
  overflow: auto;
}

.custom-portfolio-image-empty {
  background: #f8fafc;
  border: 1px solid var(--border);
  color: var(--muted);
}

.custom-portfolio-image-result {
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 6px;
  display: grid;
  gap: 10px;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  padding: 9px 10px;
}

.custom-portfolio-image-result.skipped {
  background: #f8fafc;
  color: var(--muted);
}

.custom-portfolio-image-check {
  align-items: center;
  display: inline-flex;
  justify-content: center;
}

.custom-portfolio-image-result-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.custom-portfolio-image-result-main strong,
.custom-portfolio-image-result-main span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custom-portfolio-image-result-main span {
  color: var(--muted);
  font-size: 12px;
}

.custom-portfolio-image-confidence {
  background: #eef8f7;
  border: 1px solid rgba(17, 122, 122, 0.24);
  border-radius: 999px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  min-width: 34px;
  padding: 3px 8px;
  text-align: center;
}

.custom-portfolio-image-confidence.medium {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #9a3412;
}

.custom-portfolio-image-confidence.skip {
  background: #f1f5f9;
  border-color: var(--border);
  color: var(--muted);
}

.custom-portfolio-image-actions {
  align-items: center;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 12px 18px;
}

.custom-portfolio-image-actions .primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
}

@media (max-width: 760px) {
  .custom-portfolio-image-dialog {
    max-height: calc(100vh - 20px);
    width: calc(100vw - 20px);
  }

  .custom-portfolio-image-body {
    grid-template-columns: 1fr;
  }

  .custom-portfolio-image-upload {
    grid-template-columns: 1fr;
  }

  .custom-portfolio-image-upload-icon {
    justify-self: stretch;
    text-align: center;
  }

}

.compact-button {
  border-radius: 4px;
  font-size: 12px;
  min-height: 28px;
  padding: 4px 8px;
}

.layout:has(.log-panel:not([hidden])) .data-panel .table-wrap {
  height: clamp(460px, calc(100vh - 516px), 700px);
  max-height: clamp(460px, calc(100vh - 516px), 700px);
}

.layout:has(.log-panel:not([hidden])) .portfolio-report-panel {
  height: clamp(460px, calc(100vh - 516px), 700px);
  max-height: clamp(460px, calc(100vh - 516px), 700px);
}

table {
  border-collapse: collapse;
  font-size: 13px;
  min-width: 100%;
  table-layout: fixed;
  width: max-content;
}

th,
td {
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  cursor: text;
  overflow: hidden;
  padding: 8px 10px;
  text-align: left;
  text-overflow: ellipsis;
  user-select: text;
  -webkit-user-select: text;
  white-space: nowrap;
}

th:last-child,
td:last-child {
  border-right: 0;
}

th {
  background: var(--surface-muted);
  overflow: visible;
  position: sticky;
  text-align: center;
  top: 0;
  z-index: 3;
}

#dataTable td {
  text-align: center;
}

tbody tr:nth-child(even) td {
  background: #f7f9fc;
}

tbody tr:nth-child(odd) td {
  background: #fff;
}

.table-empty-cell {
  background: #fff;
  color: var(--muted);
  font-weight: 600;
  height: 56px;
  padding: 0;
  position: relative;
}

#dataTable .table-empty-cell,
#calcTable .table-empty-cell {
  text-align: center;
}

.table-empty-message {
  align-items: center;
  bottom: 0;
  display: flex;
  gap: 10px;
  justify-content: center;
  left: 0;
  line-height: 1.4;
  position: absolute;
  top: 0;
}

.table-empty-copy {
  align-items: center;
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.table-empty-title,
.table-empty-detail {
  max-width: min(760px, 78vw);
  overflow-wrap: anywhere;
}

.table-empty-detail {
  color: #7c8b96;
  font-size: 12px;
  font-weight: 500;
}

.table-empty-action {
  appearance: none;
  background: #f5f8fa;
  border: 1px solid #d4dee6;
  border-radius: 6px;
  color: #33434d;
  cursor: pointer;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  padding: 7px 10px;
}

.table-empty-action:hover {
  background: #eef4f7;
  border-color: #c4d1da;
}

.table-empty-action:focus-visible {
  outline: 2px solid rgba(17, 122, 122, 0.28);
  outline-offset: 2px;
}

table[data-selectable-rows="true"] tbody tr[data-row-key] {
  cursor: pointer;
}

table[data-selectable-rows="true"] tbody tr[data-row-key] td {
  cursor: text;
}

table[data-selectable-rows="true"] tbody tr[data-row-key]:hover td {
  background: #e8f3f3;
}

.sticky-column {
  box-shadow: inset -1px 0 var(--border);
  position: sticky;
  z-index: 2;
}

th.sticky-column {
  z-index: 4;
}

.sticky-column-last {
  box-shadow:
    inset -1px 0 var(--border),
    8px 0 10px -10px rgba(31, 41, 51, 0.45);
}

.header-label {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

th.sortable {
  cursor: pointer;
  user-select: none;
}

th.sortable:hover,
th.sorted {
  background: #dfeaea;
  color: var(--accent-strong);
}

th.estimate-premium-header {
  background: #a7f3e7;
  box-shadow:
    inset 0 -3px #10b6a7,
    inset 0 1px rgba(255, 255, 255, 0.65);
  color: #064e4a;
}

th.estimate-premium-header:hover,
th.estimate-premium-header.sorted {
  background: #8ce6dc;
  color: #064e4a;
}

tr[data-status="skipped"] td,
tr[data-status="stale"] td {
  color: var(--muted);
}

tr[data-status="stale"] td {
  background: #fff8e6;
}

.estimate-no-trade {
  color: #8a5a00;
  font-weight: 600;
}

tbody tr td.market-up {
  color: #d00000;
  font-weight: 600;
}

tbody tr td.market-down {
  color: #008000;
  font-weight: 600;
}

tbody tr td.hit {
  color: var(--danger);
  font-weight: 700;
}

.estimate-source-mark {
  align-items: center;
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  font-size: 10px;
  font-weight: 700;
  height: 15px;
  justify-content: center;
  line-height: 1;
  margin-left: 5px;
  vertical-align: 1px;
  width: 15px;
}

.estimate-warning-mark {
  background: #facc15;
  color: #713f12;
}

.estimate-warning-mark::before {
  content: "!";
}

.estimate-nav-strike {
  color: var(--muted);
  text-decoration-color: var(--muted);
  text-decoration-line: line-through;
  text-decoration-skip-ink: none;
  text-decoration-thickness: 2px;
}

.fast-tooltip {
  background: #111827;
  border-radius: 6px;
  box-shadow: 0 10px 24px rgba(31, 41, 51, 0.22);
  color: #fff;
  font-size: 12px;
  line-height: 1.45;
  max-width: min(520px, calc(100vw - 16px));
  padding: 8px 10px;
  pointer-events: none;
  position: fixed;
  white-space: normal;
  z-index: 1000;
}

.fast-tooltip[hidden] {
  display: none;
}

tbody tr td.apply-status-paused {
  background: #ffe1e1;
  color: var(--danger);
  font-weight: 700;
}

tbody tr td.apply-status-limited {
  background: #fff4c2;
  color: #6f5200;
  font-weight: 700;
}

table[data-selectable-rows="true"] tbody tr.row-selected[data-row-key] td,
table[data-selectable-rows="true"] tbody tr.row-selected[data-row-key] td.apply-status-limited,
table[data-selectable-rows="true"] tbody tr.row-selected[data-row-key] td.apply-status-paused,
table[data-selectable-rows="true"] tbody tr.row-selected[data-row-key][data-status="stale"] td {
  background: #d7eeee;
}

.table-link {
  color: #005bd3;
  font-weight: 600;
  text-decoration: none;
}

.table-link:hover {
  color: #003f9e;
  text-decoration: underline;
}

.fund-code-cell {
  align-items: center;
  display: inline-flex;
  gap: 6px;
  min-width: 0;
}

.fund-watchlist-button {
  appearance: none;
  background: transparent;
  border: 0;
  color: #9aa8b2;
  cursor: pointer;
  flex: 0 0 auto;
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
  min-height: 24px;
  padding: 0 2px;
}

.fund-watchlist-button:hover,
.fund-watchlist-button--selected {
  color: #d99600;
}

.fund-watchlist-button:disabled {
  cursor: wait;
  opacity: 0.72;
}

.fund-watchlist-button:focus-visible {
  border-radius: 4px;
  outline: 2px solid rgba(217, 150, 0, 0.28);
  outline-offset: 1px;
}

.fund-watchlist-action-cell {
  text-align: center;
}

.fund-watchlist-action {
  appearance: none;
  background: #f5f8fa;
  border: 1px solid #d8e0e6;
  border-radius: 999px;
  color: #45535d;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  min-width: 78px;
  padding: 7px 10px;
}

.fund-watchlist-action:hover {
  background: #eef4f7;
  border-color: #c8d4dc;
}

.fund-watchlist-action--selected {
  background: #fff6df;
  border-color: #f0cf7a;
  color: #986600;
}

.fund-watchlist-action:disabled {
  cursor: wait;
  opacity: 0.72;
}

.fund-watchlist-action:focus-visible {
  outline: 2px solid rgba(217, 150, 0, 0.32);
  outline-offset: 2px;
}

.calc-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 14px;
}

.future-calc-dashboard {
  --future-panel-width: 1020px;
  display: grid;
  gap: 12px;
  padding: 0 14px 12px;
}

.future-calc-dashboard[hidden] {
  display: none;
}

.future-table-dashboard {
  --future-panel-width: 816px;
  --future-detail-width: 760px;
  --future-left-width: 680px;
  --future-kline-min-width: 520px;
  --future-monitor-height: 500px;
  --future-row-height: 566px;
  align-content: start;
  background: #f8fafc;
  display: grid;
  gap: 12px;
  min-height: 0;
  overflow: visible;
  padding: 16px;
}

.future-table-dashboard[hidden] {
  display: none;
}

.future-table-empty {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted);
  display: flex;
  font-weight: 700;
  justify-content: center;
  min-height: 220px;
}

.future-family-tabs {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: var(--future-panel-width);
  width: 100%;
}

.future-family-tab {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: grid;
  gap: 4px;
  min-height: 54px;
  padding: 9px 11px;
  text-align: left;
}

.future-family-tab strong {
  color: var(--text);
  font-size: 14px;
}

.future-family-tab span {
  color: var(--muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.future-family-tab b {
  color: var(--accent-strong);
  font-size: 13px;
}

.future-family-tab.active {
  background: #e7f4f2;
  border-color: #a8d4d0;
  box-shadow: inset 3px 0 0 var(--accent);
}

.future-table-main {
  align-items: start;
  display: grid;
  gap: 12px;
  grid-template-areas: "monitor detail kline";
  grid-template-columns:
    minmax(560px, var(--future-left-width))
    minmax(700px, var(--future-detail-width))
    minmax(var(--future-kline-min-width), 1fr);
  justify-content: stretch;
  width: 100%;
}

.future-table-left {
  display: grid;
  gap: 12px;
  grid-template-rows: auto minmax(0, 1fr);
  max-width: none;
  min-width: 0;
  width: 100%;
  grid-area: monitor;
}

.future-calc-hero {
  align-items: stretch;
  background: linear-gradient(180deg, rgba(17, 122, 122, 0.08), rgba(17, 122, 122, 0)), var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr);
  justify-content: start;
  max-width: var(--future-panel-width);
  overflow: hidden;
  padding: 16px;
  width: 100%;
}

.future-table-hero {
  grid-template-rows: minmax(0, 1fr);
  height: var(--future-monitor-height);
  max-width: none;
  min-height: 0;
}

.future-calc-title {
  align-items: start;
  display: flex;
  gap: 12px;
  grid-column: 1 / -1;
  justify-content: space-between;
}

.future-calc-title h3,
.future-image-card h4,
.future-rank-card h4 {
  margin: 0;
}

.future-calc-title h3 {
  color: var(--text);
  font-size: 20px;
  line-height: 1.1;
}

.future-calc-title span {
  color: var(--muted);
  display: block;
  font-size: 13px;
  margin-top: 4px;
}

.future-state-pill {
  background: #e7f4f2;
  border: 1px solid #bedbd8;
  border-radius: 999px;
  color: var(--accent-strong) !important;
  flex: 0 0 auto;
  font-size: 13px !important;
  font-weight: 800;
  margin-top: 0 !important;
  padding: 5px 9px;
}

.future-overlap-stage {
  align-items: stretch;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) 250px;
  justify-self: stretch;
  min-height: 340px;
  position: relative;
  width: 100%;
}

.future-table-main .future-overlap-stage {
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
}

.future-image-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 14px 32px rgba(31, 41, 51, 0.08);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
  min-width: 0;
  overflow: hidden;
}

.future-image-card--index {
  z-index: 1;
}

.future-image-card--contract {
  align-self: stretch;
  justify-self: stretch;
  min-height: 0;
  width: auto;
}

.future-image-card-head {
  align-items: center;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 8px;
  justify-content: space-between;
  min-height: 40px;
  padding: 10px 12px;
}

.future-basis-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.future-image-card h4 {
  color: var(--text);
  font-size: 14px;
}

.future-basis-card-title {
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
  justify-self: center;
}

.future-basis-card-actions {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  justify-self: end;
  min-width: 0;
}

.future-image-card-head span {
  color: var(--muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.future-basis-card-head .future-state-pill {
  justify-self: end;
}

.future-chart-surface,
.future-basis-chart {
  display: grid;
  gap: 2px;
  min-height: 0;
  padding: 10px;
}

.future-chart-surface {
  grid-template-rows: auto minmax(0, 1fr);
}

.future-basis-chart {
  grid-template-rows: minmax(0, 1fr);
}

.future-basis-chart svg {
  display: block;
  height: 220px;
  min-height: 0;
  width: 100%;
}

.future-table-main .future-basis-chart svg {
  height: 100%;
  min-height: 0;
}

.future-basis-chart--empty {
  align-items: center;
  color: var(--muted);
  font-size: 13px;
  justify-items: center;
}

.future-basis-plot-bg {
  fill: #fff;
  shape-rendering: crispEdges;
  stroke: #d4dde7;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.future-basis-gridline,
.future-basis-x-tick {
  shape-rendering: crispEdges;
  stroke: #e6edf4;
  stroke-width: 0.8;
  vector-effect: non-scaling-stroke;
}

.future-basis-axis {
  shape-rendering: crispEdges;
  stroke: #c2ccd8;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.future-basis-index-line {
  stroke: var(--accent);
  stroke-dasharray: 5 4;
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}

.future-basis-future-line {
  fill: none;
  stroke: #a34f06;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.future-basis-spread {
  opacity: 0.24;
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}

.future-basis-spread.is-discount {
  stroke: #117a7a;
}

.future-basis-spread.is-premium {
  stroke: #a34f06;
}

.future-basis-point {
  fill: #a34f06;
  stroke: #fff;
  stroke-width: 2.4;
  vector-effect: non-scaling-stroke;
}

.future-basis-y-label,
.future-basis-x-label,
.future-basis-axis-title {
  fill: #526174;
  font-size: 11px;
  font-weight: 600;
}

.future-basis-point-label {
  fill: #475569;
  font-size: 11px;
  font-weight: 700;
  paint-order: stroke;
  stroke: #fff;
  stroke-linejoin: round;
  stroke-width: 3px;
}

.future-basis-y-label {
  text-anchor: end;
}

.future-basis-x-label,
.future-basis-point-label,
.future-basis-axis-title--x {
  text-anchor: middle;
}

.future-basis-axis-title--y {
  text-anchor: middle;
  transform-box: fill-box;
  transform-origin: center;
  writing-mode: tb;
}

.future-chart-grid {
  background: linear-gradient(#edf1f5 1px, transparent 1px), linear-gradient(90deg, #edf1f5 1px, transparent 1px);
  background-size: 100% 42px, 54px 100%;
  border-bottom: 1px solid var(--border);
  border-left: 1px solid var(--border);
  min-height: 158px;
  position: relative;
}

.future-chart-line {
  border-radius: 999px;
  height: 3px;
  left: 14px;
  position: absolute;
  transform-origin: left center;
}

.future-chart-line--index {
  background: var(--accent);
  top: 94px;
  transform: rotate(-10deg);
  width: 70%;
}

.future-chart-line--contract {
  background: #b45309;
  opacity: 0.82;
  top: 76px;
  transform: rotate(6deg);
  width: 62%;
}

.future-chart-dot {
  background: var(--accent-strong);
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(13, 95, 95, 0.22);
  height: 13px;
  left: 70%;
  position: absolute;
  top: 76px;
  width: 13px;
}

.future-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}

.future-basis-card-legend {
  align-items: center;
  justify-content: flex-end;
}

.future-chart-legend span {
  align-items: center;
  color: var(--muted);
  display: inline-flex;
  font-size: 12px;
  gap: 5px;
}

.future-chart-legend i {
  border-radius: 50%;
  height: 7px;
  width: 7px;
}

.future-contract-body {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.future-big-rate {
  color: var(--accent-strong);
  display: block;
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
}

.future-contract-body span {
  color: var(--muted);
  font-size: 13px;
}

.future-field-grid {
  display: grid;
  gap: 6px;
  grid-template-columns: 1fr 1fr;
}

.future-field-grid span {
  background: var(--surface-muted);
  border: 1px solid #dce7e7;
  border-radius: 6px;
  display: grid;
  gap: 2px;
  min-height: 58px;
  padding: 8px;
}

.future-field-grid small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.future-field-grid b {
  color: var(--text);
  font-size: 15px;
}

.future-rank-card {
  align-content: start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: grid;
  gap: 0 12px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  padding: 13px;
}

.future-rank-card h4 {
  color: var(--text);
  font-size: 15px;
  grid-column: 1 / -1;
  margin-bottom: 10px;
}

.future-rank-row {
  align-items: center;
  border-bottom: 1px solid var(--border);
  display: grid;
  gap: 8px;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  min-height: 42px;
}

.future-rank-row:last-child {
  border-bottom: 0;
}

.future-rank-code {
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
}

.future-rank-meta {
  color: var(--muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.future-rank-value,
.future-big-rate.is-discount,
.future-family-tab b.is-discount,
.future-field-grid b.is-discount {
  color: var(--accent-strong);
}

.future-rank-value.is-premium,
.future-big-rate.is-premium,
.future-family-tab b.is-premium,
.future-field-grid b.is-premium {
  color: var(--danger);
}

.future-contract-matrix {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.future-contract-group {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
}

.future-contract-group-head {
  align-items: baseline;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.future-contract-group-head strong {
  color: var(--text);
  font-size: 16px;
  font-weight: 900;
}

.future-contract-group-head span {
  color: var(--muted);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.future-contract-chips {
  display: grid;
  gap: 7px;
}

.future-contract-chip {
  align-items: center;
  background: var(--surface-muted);
  border: 1px solid #dce7e7;
  border-radius: 6px;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  min-height: 34px;
  padding: 7px 8px;
}

.future-contract-chip b {
  color: var(--text);
  font-size: 13px;
}

.future-contract-chip small {
  color: var(--muted);
  font-size: 12px;
}

.future-contract-chip--empty {
  color: var(--muted);
  justify-content: center;
}

.future-detail-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  max-width: none;
  overflow: auto;
  width: 100%;
}

.future-table-main .future-detail-card {
  grid-area: detail;
  height: auto;
  justify-self: start;
  max-width: 100%;
  min-height: 0;
  overflow: hidden;
  width: 100%;
}

.future-table-main .future-detail-table {
  table-layout: fixed;
  width: 100%;
}

.future-detail-table {
  border-collapse: collapse;
  min-width: 0;
  table-layout: fixed;
  width: 100%;
}

.future-detail-col-symbol {
  width: 12%;
}

.future-detail-col-price {
  width: 13%;
}

.future-detail-col-rate {
  width: 15%;
}

.future-detail-col-rate-wide {
  width: 16%;
}

.future-detail-col-days {
  width: 12%;
}

.future-detail-col-date {
  width: 19%;
}

.future-detail-table th,
.future-detail-table td {
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: 12px;
  line-height: 1.2;
  min-width: 0;
  overflow: hidden;
  padding: 7px 6px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.future-table-main .future-detail-table th,
.future-table-main .future-detail-table td {
  font-size: 14px;
  padding: 10px 8px;
  text-align: center;
}

.future-detail-table th {
  color: var(--muted);
  font-weight: 800;
}

.future-detail-table tbody tr.future-family-band--base td {
  background: #ffffff;
}

.future-detail-table tbody tr.future-family-band--alt td {
  background: #f3f7fa;
}

.future-detail-table tbody tr.future-family-band--active td {
  background: #e3f1ee;
}

.future-detail-table tbody tr.future-family-band--active td:first-child {
  box-shadow: inset 3px 0 0 var(--accent);
  color: var(--accent-strong);
}

.future-detail-table tbody tr:hover td {
  background: #e8f2f5;
}

.future-detail-table tbody tr.future-family-band--active:hover td {
  background: #d8ece8;
}

.future-detail-table tbody tr.future-contract-row {
  cursor: pointer;
}

.future-detail-table tbody tr.future-contract-row--selected td {
  background: #d6ece9;
}

.future-detail-table tbody tr.future-contract-row--selected td:first-child {
  box-shadow: inset 3px 0 0 var(--accent-strong);
}

.future-detail-table tbody tr:last-child td {
  border-bottom: 0;
}

.future-detail-table td:first-child {
  font-weight: 900;
}

.future-detail-table .is-discount {
  color: var(--accent-strong);
  font-weight: 900;
}

.future-detail-table .is-premium {
  color: var(--danger);
  font-weight: 900;
}

.future-kline-card {
  align-self: start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: var(--future-row-height);
  grid-area: kline;
  min-height: 0;
  overflow: hidden;
  width: 100%;
}

.future-kline-chart {
  height: 100%;
  max-height: none;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

.future-kline-chart .tv-lightweight-charts tr > td:nth-child(3) {
  min-width: 76px !important;
  width: 76px !important;
}

.future-kline-empty {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-size: 13px;
  font-weight: 700;
  height: 100%;
  justify-content: center;
  min-height: 240px;
  padding: 16px;
  text-align: center;
}

@media (max-width: 2200px) {
  .future-table-main {
    grid-template-areas:
      "monitor detail"
      "kline kline";
    grid-template-columns: minmax(500px, 0.9fr) minmax(660px, 1.1fr);
  }

  .future-kline-card {
    min-height: 460px;
  }
}

@media (max-width: 1500px) {
  .future-table-main {
    grid-template-areas:
      "monitor"
      "detail"
      "kline";
    grid-template-columns: minmax(0, 1fr);
  }

  .future-family-tabs,
  .future-table-hero,
  .future-table-main .future-detail-card,
  .future-kline-card {
    max-width: none;
    width: 100%;
  }

  .future-table-main .future-detail-card {
    overflow-x: auto;
  }

  .future-table-main .future-detail-table {
    min-width: 680px;
  }
}

.summary-line {
  color: var(--muted);
  font-size: 13px;
  padding: 0 14px 12px;
  white-space: pre-line;
}

.calc-results {
  max-height: 360px;
}

.log-panel pre {
  color: #25303b;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 12px;
  margin: 0;
  max-height: 260px;
  overflow: auto;
  padding: 14px;
  white-space: pre-wrap;
}

.log-panel[hidden] {
  display: none;
}

.app-header,
.layout {
  font-size: 14px;
}

.app-header .brand-heading {
  gap: 10px;
  min-height: 52px;
}

.app-header .brand-logo {
  flex-basis: 48px;
  height: 48px;
  width: 48px;
}

.app-header .brand-heading h1 {
  font-size: 24px;
}

.app-header :is(button, input, label, p, span),
.layout :is(button, input, label, p, span) {
  font-size: 14px;
}

.layout #activeTableTitle {
  font-size: 16px;
}

.layout :is(.side-panel > h2, .side-nav-section > h2) {
  font-size: 16px;
}

.layout .tab-list button {
  font-size: 14px;
}

.layout :is(
  .active-table-meta-main,
  .portfolio-report-section h3,
  .portfolio-performance-header h3
) {
  font-size: 16px;
}

.layout :is(
  .active-table-filter-summary,
  .active-table-meta-chip,
  .summary-meta,
  .summary-refresh-button,
  .compact-button,
  .estimate-source-mark
) {
  font-size: 12px;
}

.layout :is(
  .active-table-meta-note,
  .portfolio-report-status,
  .portfolio-report-figure figcaption,
  .portfolio-report-empty,
  .side-control-group-title,
  .unit-input span,
  .portfolio-holdings-table,
  table,
  .summary-line
) {
  font-size: 13px;
}

.layout :is(
  .side-control-row,
  .side-control-text,
  .side-control-row input,
  .filter-reset-row button,
  .fast-tooltip,
  .log-panel pre
) {
  font-size: 14px;
}

.layout :is(
  .summary-label,
  .portfolio-nav-change-value
) {
  font-size: 13px;
}

.layout .summary-value {
  font-size: 15px;
}

.layout .portfolio-summary .summary-label {
  font-size: 14px;
}

.layout .portfolio-summary .summary-value {
  font-size: 17px;
}

.layout .portfolio-summary :is(.summary-meta, .summary-refresh-button) {
  font-size: 13px;
}

.layout .portfolio-performance-value {
  font-size: 15px;
}

.layout .portfolio-report-section--without-title {
  grid-template-columns: minmax(0, 1fr);
  justify-content: stretch;
  max-width: 100%;
  width: 100%;
}

.layout .portfolio-report-section--without-title #portfolioPerformancePanel {
  max-width: min(100%, var(--portfolio-main-row-width, 100%));
  min-width: 0;
  overflow: hidden;
  width: min(100%, var(--portfolio-main-row-width, 100%));
}

@container portfolio-report (min-width: 1600px) {
  .layout .portfolio-report-section--without-title {
    grid-template-columns: minmax(0, max-content) minmax(0, min(100%, 1307px));
    justify-content: start;
    max-width: none;
  }
}

@media (max-width: 1500px) {
  .layout .portfolio-report-section--without-title {
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
  }

  .layout .portfolio-report-section--without-title #portfolioHoldingsGrid {
    max-width: 100%;
    overflow-x: auto;
    width: 100%;
  }

  .layout .portfolio-report-section--without-title #portfolioPerformancePanel,
  .layout .portfolio-performance-panel {
    max-width: min(100%, var(--portfolio-main-row-width, 100%));
    width: min(100%, var(--portfolio-main-row-width, 100%));
  }
}

@container portfolio-report (max-width: 1280px) {
  .portfolio-report-section--without-title,
  .layout .portfolio-report-section--without-title {
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
    max-width: 100%;
    overflow-x: visible;
  }

  .portfolio-report-section--without-title #portfolioHoldingsGrid,
  .layout .portfolio-report-section--without-title #portfolioHoldingsGrid {
    max-width: 100%;
    overflow-x: auto;
    width: 100%;
  }

  .portfolio-report-section--without-title #portfolioHoldingsGrid > .portfolio-holdings-card,
  .layout .portfolio-report-section--without-title #portfolioHoldingsGrid > .portfolio-holdings-card {
    height: auto;
    width: max-content;
  }

  .portfolio-report-section--without-title #portfolioPerformancePanel,
  .portfolio-performance-panel,
  .layout .portfolio-report-section--without-title #portfolioPerformancePanel,
  .layout .portfolio-performance-panel {
    max-width: min(100%, var(--portfolio-main-row-width, 100%));
    min-width: 0;
    overflow: hidden;
    width: min(100%, var(--portfolio-main-row-width, 100%));
  }
}

.maintenance-page {
  align-items: center;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(244, 246, 248, 0.96)),
    var(--bg);
  display: flex;
  justify-content: center;
  min-height: 100vh;
  padding: 28px;
}

.maintenance-shell {
  align-items: center;
  display: grid;
  gap: 14px;
  max-width: 560px;
  text-align: center;
}

.maintenance-logo {
  border-radius: 50%;
  height: 88px;
  justify-self: center;
  object-fit: cover;
  width: 88px;
}

.maintenance-shell h1 {
  color: var(--text);
  font-size: 34px;
  line-height: 1.15;
  white-space: normal;
}

.maintenance-message {
  color: var(--text);
  font-size: 17px;
  line-height: 1.7;
}

.maintenance-note {
  color: var(--muted);
  font-size: 13px;
}

.admin-page {
  min-height: 100vh;
}

.admin-topbar {
  align-items: center;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 14px;
  justify-content: space-between;
  padding: 16px 18px;
}

.admin-title {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.admin-title h1 {
  font-size: 24px;
  line-height: 1.2;
}

.admin-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.admin-actions label {
  align-items: center;
  display: inline-flex;
  gap: 6px;
}

.admin-actions select {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font: inherit;
  min-height: 34px;
  padding: 6px 32px 6px 10px;
}

.admin-link-button {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  display: inline-flex;
  font-size: 13px;
  min-height: 34px;
  padding: 7px 12px;
  text-decoration: none;
}

.admin-link-button:hover {
  border-color: var(--accent);
}

.admin-layout-toolbar {
  align-items: center;
  background: #f8fafc;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 14px;
  justify-content: space-between;
  padding: 10px 18px;
}

.admin-layout-toolbar-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.admin-layout-toolbar-copy strong {
  color: var(--text);
  font-size: 14px;
  line-height: 1.25;
}

.admin-layout-toolbar-copy span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.admin-layout-toolbar-actions {
  align-items: center;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.admin-dashboard {
  display: grid;
  gap: 12px;
  padding: 12px 18px 18px;
}

.admin-dashboard.grid-stack {
  display: block;
  margin: 12px 18px 18px;
  padding: 0;
}

.admin-dashboard.grid-stack > .grid-stack-item {
  min-width: 0;
  overflow: hidden;
}

.admin-dashboard.grid-stack > .admin-panel,
.admin-dashboard.grid-stack > .admin-stat-grid,
.admin-dashboard.grid-stack > .admin-grid {
  margin: 0;
}

.admin-dashboard.grid-stack > .admin-panel.grid-stack-item {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.admin-dashboard.grid-stack > .admin-stat-grid {
  align-content: start;
  overflow: hidden;
}

.admin-dashboard.grid-stack .grid-stack-item-content {
  overflow: hidden;
}

.admin-dashboard.grid-stack .admin-table-wrap {
  max-height: 100%;
  min-height: 0;
  overflow-x: auto;
  overflow-y: auto;
}

.admin-dashboard.grid-stack > .grid-stack-item > .admin-panel-title {
  flex: 0 0 auto;
}

.admin-dashboard.grid-stack > .grid-stack-item > .admin-haoetf-body,
.admin-dashboard.grid-stack > .grid-stack-item > .admin-maintenance-body,
.admin-dashboard.grid-stack > .grid-stack-item > .admin-public-users-body,
.admin-dashboard.grid-stack > .grid-stack-item > .admin-merit-codes-body,
.admin-dashboard.grid-stack > .grid-stack-item > .admin-merit-wechat-body,
.admin-dashboard.grid-stack > .grid-stack-item > .admin-password-reset-smtp-body,
.admin-dashboard.grid-stack > .grid-stack-item > .admin-table-wrap {
  flex: 1 1 auto;
  min-height: 0;
}

.admin-layout-button {
  align-items: center;
  border: 0;
  border-radius: 6px;
  color: #fff;
  display: none;
  font-size: 12px;
  font-weight: 700;
  height: 28px;
  justify-content: center;
  left: 10px;
  line-height: 1;
  padding: 0;
  position: absolute;
  top: 10px;
  width: 28px;
  z-index: 4;
}

.admin-layout-drag-handle {
  background: var(--accent);
  cursor: grab;
}

.admin-layout-hide-button {
  background: #b42318;
  cursor: pointer;
  left: 42px;
}

.admin-layout-drag-handle:active {
  cursor: grabbing;
}

.admin-layout-editing .admin-layout-button {
  display: inline-flex;
}

.admin-layout-editing .admin-sub-layout.grid-stack > .grid-stack-item > .admin-layout-button {
  z-index: 120;
}

.admin-layout-editing [data-layout-id="visit_stats"] > .admin-layout-drag-handle--main,
.admin-layout-editing [data-layout-id="visit_rankings"] > .admin-layout-drag-handle--main {
  left: auto;
  right: 46px;
}

.admin-layout-editing [data-layout-id="visit_stats"] > .admin-layout-hide-button--main,
.admin-layout-editing [data-layout-id="visit_rankings"] > .admin-layout-hide-button--main {
  left: auto;
  right: 14px;
}

.admin-layout-editing .admin-dashboard.grid-stack > .grid-stack-item {
  outline: 2px dashed rgba(55, 103, 246, 0.38);
  outline-offset: -4px;
}

.admin-layout-editing .admin-dashboard.grid-stack > .grid-stack-item > .admin-panel-title,
.admin-layout-editing .admin-dashboard.grid-stack > .grid-stack-item > .admin-haoetf-body,
.admin-layout-editing .admin-dashboard.grid-stack > .grid-stack-item > .admin-public-users-body,
.admin-layout-editing .admin-dashboard.grid-stack > .grid-stack-item > .admin-table-wrap,
.admin-layout-editing .admin-dashboard.grid-stack > .grid-stack-item > .admin-merit-codes-body,
.admin-layout-editing .admin-dashboard.grid-stack > .grid-stack-item > .admin-merit-wechat-body,
.admin-layout-editing .admin-dashboard.grid-stack > .grid-stack-item > .admin-password-reset-smtp-body,
.admin-layout-editing .admin-dashboard.grid-stack > .grid-stack-item > .admin-bar-list {
  position: relative;
}

.admin-layout-editing .admin-dashboard.grid-stack > .grid-stack-item > .admin-panel-title {
  padding-left: 82px;
}

.admin-layout-editing .admin-haoetf-layout.grid-stack > .grid-stack-item {
  outline: 1px dashed rgba(15, 118, 110, 0.42);
  outline-offset: -3px;
}

.admin-layout-drag-handle--sub {
  background: #0f766e;
  height: 24px;
  left: 8px;
  top: 8px;
  width: 24px;
}

.admin-layout-hide-button--sub {
  height: 24px;
  left: 36px;
  top: 8px;
  width: 24px;
}

.admin-sub-layout.grid-stack {
  display: block !important;
  height: 100%;
  min-height: 0;
  overflow: auto;
}

.admin-sub-layout.grid-stack > .grid-stack-item {
  overflow: hidden;
}

.admin-sub-layout.grid-stack > .grid-stack-item > .grid-stack-item-content,
.admin-sub-content {
  min-height: 0;
  overflow: auto;
}

.admin-dashboard.grid-stack > .grid-stack-item > .admin-sub-layout.grid-stack,
.admin-dashboard.grid-stack > .grid-stack-item > .admin-haoetf-body .admin-haoetf-layout.grid-stack {
  height: auto !important;
  min-height: 0 !important;
  overflow: auto;
}

.admin-layout-main-content {
  height: 100%;
  min-height: 0;
  width: 100%;
}

.admin-layout-editing .admin-sub-layout.grid-stack > .grid-stack-item {
  outline: 1px dashed rgba(15, 118, 110, 0.42);
  outline-offset: -3px;
}

.admin-layout-editing .admin-layout-drag-surface--sub {
  cursor: grab;
}

.admin-layout-editing .admin-layout-drag-surface--sub:active {
  cursor: grabbing;
}

.admin-maintenance-body.admin-sub-layout,
.admin-public-users-body.admin-sub-layout,
.admin-merit-codes-body.admin-sub-layout,
.admin-merit-wechat-body.admin-sub-layout {
  padding: 14px;
}

.admin-maintenance-body.admin-sub-layout {
  padding: 8px;
}

.admin-maintenance-body.admin-sub-layout,
.admin-public-users-body.admin-sub-layout {
  min-height: 560px;
}

.admin-merit-codes-body.admin-sub-layout,
.admin-merit-wechat-body.admin-sub-layout {
  min-height: 430px;
}

.admin-dashboard.grid-stack > .grid-stack-item > .admin-maintenance-body.admin-sub-layout,
.admin-dashboard.grid-stack > .grid-stack-item > .admin-public-users-body.admin-sub-layout,
.admin-dashboard.grid-stack > .grid-stack-item > .admin-merit-codes-body.admin-sub-layout,
.admin-dashboard.grid-stack > .grid-stack-item > .admin-merit-wechat-body.admin-sub-layout {
  min-height: 0 !important;
}

.admin-stat-sub-layout.admin-sub-layout,
.admin-ranking-sub-layout.admin-sub-layout {
  min-height: 100%;
}

.admin-public-users-body.admin-sub-layout {
  background: var(--surface);
}

.admin-public-users-body.admin-sub-layout .admin-public-users-table-panel {
  max-height: none;
  max-width: none;
}

.admin-merit-wechat-body.admin-sub-layout {
  justify-items: stretch;
  max-width: none;
  overflow: hidden;
  width: 100%;
}

.admin-merit-wechat-body.admin-sub-layout .admin-merit-wechat-grid,
.admin-merit-wechat-body.admin-sub-layout .admin-merit-wechat-grid > .admin-sub-content--form {
  max-width: 100%;
  width: 100%;
}

.admin-dashboard.grid-stack > .admin-stat-grid.grid-stack-item,
.admin-dashboard.grid-stack > .admin-grid.grid-stack-item {
  display: block;
}

.admin-stat-sub-layout,
.admin-ranking-sub-layout {
  height: 100%;
  width: 100%;
}

.admin-stat.grid-stack-item {
  padding: 0;
}

.admin-stat .admin-sub-content {
  display: grid;
  gap: 6px;
  padding: 14px;
}

.admin-stat-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.admin-stat,
.admin-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  min-width: 0;
}

.admin-stat {
  display: grid;
  gap: 8px;
  padding: 16px;
}

.admin-stat strong {
  color: var(--text);
  font-size: 26px;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.admin-panel-title {
  align-items: center;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  min-height: 48px;
  padding: 12px 14px;
}

.admin-panel-actions {
  align-items: center;
  display: flex;
  gap: 10px;
  min-width: 0;
}

.admin-panel-actions span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-panel-actions button {
  min-height: 30px;
  padding: 5px 10px;
}

#toggleCreatePublicUser {
  min-width: 82px;
  white-space: nowrap;
}

#publicUsersStatus {
  flex: 0 0 auto;
  overflow: visible;
  text-overflow: clip;
}

.admin-public-user-search {
  align-items: center;
  display: inline-flex;
  flex: 0 1 240px;
  gap: 6px;
  min-width: 0;
}

.admin-public-user-search span {
  color: var(--muted);
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
}

.admin-public-user-search input {
  min-height: 30px;
  min-width: 130px;
  padding: 5px 9px;
  width: 180px;
}

.admin-public-users-panel > .admin-panel-title {
  justify-content: flex-start;
}

.admin-haoetf-body {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.admin-haoetf-layout.grid-stack {
  display: block;
  min-height: 360px;
}

.admin-haoetf-subcontent {
  background: var(--surface);
  border-radius: 8px;
  min-width: 0;
}

.admin-haoetf-summary-content {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.admin-haoetf-summary-item {
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 8px 10px;
}

.admin-haoetf-summary-item span,
.admin-haoetf-card-head span,
.admin-haoetf-note {
  color: var(--muted);
  font-size: 12px;
}

.admin-haoetf-summary-item span {
  font-size: 11px;
  line-height: 1.2;
}

.admin-haoetf-summary-item strong {
  color: var(--text);
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-haoetf-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  height: 100%;
  min-width: 0;
  overflow: visible;
}

.admin-haoetf-card > .admin-haoetf-subcontent,
.admin-haoetf-note-card > .admin-haoetf-subcontent {
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.admin-haoetf-card > .admin-haoetf-subcontent > .admin-table-wrap,
.admin-haoetf-card > .admin-haoetf-subcontent > .admin-haoetf-mini-list,
.admin-haoetf-card > .admin-haoetf-subcontent > .admin-haoetf-cause-tags,
.admin-haoetf-note-card > .admin-haoetf-subcontent {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.admin-haoetf-card-head {
  align-items: center;
  background: var(--surface-muted);
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 10px;
  justify-content: space-between;
  min-height: 42px;
  padding: 10px 12px;
}

.admin-haoetf-card-head h3 {
  font-size: 15px;
  line-height: 1.25;
  margin: 0;
}

.admin-haoetf-cause-head {
  border-top: 1px solid var(--border);
  margin-top: 10px;
}

.admin-haoetf-alerts-wrap {
  border: 0;
  border-radius: 0;
  max-height: none;
}

.admin-table.admin-haoetf-alerts-table {
  min-width: max-content;
  table-layout: auto;
  width: 100%;
}

.admin-haoetf-alerts-table th,
.admin-haoetf-alerts-table td {
  padding: 8px 10px;
}

.admin-table.admin-haoetf-alerts-table th,
.admin-table.admin-haoetf-alerts-table td {
  width: auto;
}

.admin-table.admin-haoetf-alerts-table :is(th, td):nth-child(n) {
  width: auto;
}

.admin-haoetf-code,
.admin-haoetf-number {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.admin-haoetf-code {
  font-weight: 800;
}

.admin-haoetf-number {
  text-align: right;
}

.admin-haoetf-number.warning {
  color: #b42318;
  font-weight: 800;
}

.admin-haoetf-cause-cell {
  max-width: 220px;
}

.admin-haoetf-mini-list {
  display: grid;
  gap: 8px;
  padding: 12px;
}

.admin-haoetf-mini-item {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 7px;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 38px;
  padding: 8px 10px;
}

.admin-haoetf-mini-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-haoetf-mini-count {
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.admin-haoetf-cause-tags {
  align-content: start;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px;
}

.admin-haoetf-note {
  margin: 0;
}

.admin-haoetf-note-content {
  align-items: center;
  display: flex;
  padding: 10px 12px;
}

.admin-link-button.is-disabled {
  opacity: 0.55;
  pointer-events: none;
}

#logPath {
  color: var(--muted);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-bar-list {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.admin-bar-row {
  align-items: center;
  column-gap: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(58px, 210px);
  row-gap: 6px;
}

.admin-bar-name,
.admin-bar-count {
  color: var(--text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-bar-count {
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  justify-self: end;
}

.admin-bar-track {
  background: #edf2f7;
  border-radius: 999px;
  grid-column: 1 / -1;
  height: 8px;
  overflow: hidden;
}

.admin-bar-fill {
  background: var(--accent);
  border-radius: 999px;
  height: 100%;
  min-width: 4px;
}

.admin-maintenance-panel {
  grid-column: 1 / -1;
}

.admin-maintenance-panel h3 {
  margin: 0;
}

.admin-public-users-panel {
  grid-column: 1 / -1;
}

.admin-maintenance-body {
  align-items: start;
  display: grid;
  grid-template-columns: minmax(0, min(920px, 58%)) minmax(360px, min(720px, 42%));
  justify-content: start;
  min-height: 308px;
}

.admin-message-field {
  align-items: start;
  display: grid;
  gap: 8px;
  min-width: 0;
}

.admin-message-field input {
  margin-left: 0;
  width: 100%;
}

.admin-maintenance-editors {
  align-content: start;
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
}

.admin-maintenance-section,
.admin-login-notice-settings {
  align-content: start;
  container-type: inline-size;
  display: grid;
  gap: 10px;
  justify-self: stretch;
  max-width: 1280px;
  min-width: 0;
  width: 100%;
}

.admin-maintenance-section-head,
.admin-login-notice-head,
.admin-site-preview-head,
.admin-preview-card-head {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  min-width: 0;
}

.admin-maintenance-section-title {
  align-items: center;
  display: flex;
  gap: 10px;
  min-width: 0;
}

.admin-maintenance-section-head h3,
.admin-login-notice-head h3,
.admin-site-preview-head h3 {
  color: var(--text);
  font-size: 16px;
  line-height: 1.25;
}

.admin-maintenance-command-row {
  align-items: stretch;
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
  justify-content: stretch;
  min-width: 0;
  width: 100%;
}

.admin-maintenance-message-field {
  align-items: stretch;
  justify-items: stretch;
  min-width: 0;
  text-align: center;
}

.admin-maintenance-message-label {
  color: var(--muted);
  display: block;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}

.admin-create-field {
  color: var(--text);
  display: grid;
  font-weight: 700;
  gap: 6px;
  min-width: 0;
}

.admin-create-field input {
  margin-left: 0;
  min-height: 34px;
  width: 100%;
}

.admin-create-actions {
  display: flex;
  gap: 8px;
}

.admin-create-actions button {
  min-height: 34px;
}

.admin-maintenance-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-maintenance-actions button {
  min-height: 32px;
}

.admin-maintenance-switch-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
}

.admin-strategy-control-list {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  container-type: inline-size;
  display: grid;
  justify-self: stretch;
  max-width: none;
  overflow: hidden;
  width: 100%;
}

.admin-strategy-control-card {
  align-items: stretch;
  background: #fff;
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr;
  justify-content: stretch;
  min-height: 50px;
  min-width: 0;
  padding: 6px 8px 6px 12px;
}

.admin-strategy-control-copy {
  min-width: 0;
}

.admin-strategy-control-card + .admin-strategy-control-card {
  border-top: 1px solid #e8edf2;
}

.admin-strategy-control-copy strong {
  display: block;
  font-size: 14px;
  line-height: 1.25;
  margin-bottom: 2px;
}

.admin-strategy-control-copy span {
  color: var(--muted);
  display: block;
  font-size: 12px;
  line-height: 1.35;
}

.admin-strategy-control-field {
  align-items: stretch;
  display: grid;
  gap: 4px;
  min-width: 0;
}

.admin-strategy-control-field > span:first-child {
  color: #46556b;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.15;
}

.admin-strategy-control-field input {
  padding: 6px 10px;
}

.admin-ttjj-token-fields {
  display: grid;
  gap: 6px;
  min-width: min(420px, 100%);
}

.admin-ttjj-token-fields .admin-strategy-control-field {
  min-width: 0;
}

.admin-ttjj-token-actions {
  align-content: center;
  display: grid;
  gap: 6px;
  justify-items: stretch;
  min-width: 0;
}

.admin-strategy-control-card button {
  min-height: 32px;
  padding: 6px 12px;
  white-space: nowrap;
}

#strategyTrackingRefreshStatus {
  justify-self: start;
  line-height: 1.25;
  max-width: min(480px, 100%);
  white-space: normal;
}

#realNavStatus:empty {
  display: none;
}

.admin-ttjj-token-actions .admin-state-pill {
  justify-self: end;
  line-height: 1.25;
  max-width: 220px;
  text-align: left;
  white-space: normal;
}

.admin-ttjj-token-actions .admin-state-pill:empty {
  display: none;
}

.admin-runtime-secret-state {
  border-radius: 999px;
  display: inline-flex;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  padding: 5px 8px;
  width: fit-content;
}

.admin-runtime-secret-state.ok {
  background: #dcfce7;
  color: #166534;
}

.admin-runtime-secret-state.warning {
  background: #fff7ed;
  color: #c2410c;
}

.admin-runtime-secret-path {
  color: #64748b;
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.admin-runtime-config-values {
  display: grid;
  gap: 6px;
  margin: 0;
  min-width: 0;
}

.admin-runtime-config-values div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.admin-runtime-config-values dt {
  color: #46556b;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.15;
}

.admin-runtime-config-values dd {
  background: #f7f9fc;
  border: 1px solid #e1e7ef;
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 1.3;
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  padding: 6px 8px;
}

.admin-runtime-config-values input,
.admin-runtime-config-values output {
  background: transparent;
  border: 0;
  color: inherit;
  display: block;
  font: inherit;
  margin: 0;
  min-width: 0;
  outline: 0;
  padding: 0;
  width: 100%;
}

.admin-runtime-config-values input:focus {
  outline: 2px solid rgba(37, 99, 235, 0.28);
  outline-offset: 4px;
}

.admin-runtime-config-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.admin-portfolio-switch {
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.admin-portfolio-switch input {
  height: 16px;
  margin: 0;
  width: 16px;
}

#siteStateStatus {
  background: #f7fafb;
  border: 1px dashed #cbd5df;
  border-radius: 6px;
  box-sizing: border-box;
  color: var(--muted);
  line-height: 1.35;
  padding: 8px 10px;
  width: 100%;
}

.admin-login-notice-settings {
  border-top: 1px solid var(--border);
  padding-top: 10px;
}

.admin-login-notice-switch {
  color: var(--text);
  font-weight: 700;
}

.admin-login-notice-grid {
  align-items: end;
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
  min-width: 0;
  width: 100%;
}

.admin-login-notice-grid textarea,
.admin-public-user-create textarea,
.admin-reward-fields textarea {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font: inherit;
  line-height: 1.4;
  margin-left: 0;
  min-height: 62px;
  padding: 7px 9px;
  resize: vertical;
  width: 100%;
}

.admin-login-notice-message {
  grid-column: 1 / -1;
}

.admin-login-notice-actions {
  align-items: stretch;
  display: flex;
  grid-column: auto;
  grid-row: auto;
  justify-content: flex-start;
}

.admin-login-notice-actions button {
  min-height: 32px;
  white-space: nowrap;
}

@container (min-width: 560px) {
  .admin-maintenance-command-row {
    align-items: end;
    grid-template-columns: auto minmax(0, 1fr);
  }
}

@container (min-width: 680px) {
  .admin-strategy-control-card {
    align-items: center;
    grid-template-columns: minmax(0, 190px) minmax(180px, 1fr) auto;
  }

  .admin-runtime-config-card {
    grid-template-columns: minmax(0, 190px) minmax(220px, 1fr) auto;
  }

  .admin-ttjj-token-actions {
    justify-self: end;
    min-width: max-content;
  }
}

@container (min-width: 760px) {
  .admin-login-notice-grid {
    grid-template-columns: minmax(0, 270px) minmax(0, 150px) auto minmax(0, 1fr);
  }

  .admin-login-notice-message {
    grid-column: 1 / -1;
  }

  .admin-login-notice-actions {
    align-items: end;
    grid-column: 3;
    grid-row: 1;
  }
}

.admin-site-preview {
  align-content: start;
  background: linear-gradient(180deg, #f9fbfc 0%, #edf3f4 100%);
  border-left: 1px solid var(--border);
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 10px;
}

.admin-site-preview-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.admin-preview-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(31, 41, 51, 0.08);
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 10px;
}

.admin-login-preview-card h3 {
  color: var(--text);
  font-size: 19px;
  line-height: 1.25;
  white-space: normal;
}

.admin-login-preview-card p,
.admin-maintenance-preview-card p {
  color: var(--text);
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

.admin-login-preview-card.is-disabled {
  opacity: 0.68;
}

.admin-login-preview-card button {
  justify-self: start;
  min-height: 36px;
  pointer-events: none;
}

.admin-maintenance-preview-card {
  align-content: center;
  justify-items: center;
  min-height: 108px;
  text-align: center;
}

.admin-confirm-modal[hidden] {
  display: none;
}

.admin-confirm-modal {
  align-items: center;
  display: grid;
  inset: 0;
  justify-items: center;
  padding: 24px;
  position: fixed;
  z-index: 80;
}

.admin-confirm-backdrop {
  background: rgba(31, 41, 51, 0.48);
  inset: 0;
  position: absolute;
}

.admin-confirm-dialog {
  background: var(--surface);
  border: 1px solid rgba(203, 213, 223, 0.86);
  border-radius: 8px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
  display: grid;
  gap: 14px;
  max-width: calc(100vw - 32px);
  padding: 22px;
  position: relative;
  width: 450px;
  z-index: 1;
}

.admin-confirm-dialog h2 {
  color: var(--text);
  font-size: 18px;
  line-height: 1.3;
  margin: 0;
}

.admin-confirm-dialog p {
  color: var(--text);
  line-height: 1.65;
  margin: 0;
  white-space: pre-line;
}

.admin-confirm-actions {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.admin-confirm-actions button {
  min-height: 36px;
  min-width: 72px;
}

.admin-preview-logo {
  border-radius: 50%;
  height: 36px;
  object-fit: cover;
  width: 36px;
}

.admin-state-pill {
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  display: inline-flex;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  padding: 6px 10px;
}

.admin-state-pill.ok {
  background: #e7f6ee;
  border-color: #b7e1c6;
  color: #146c43;
}

.admin-state-pill.warning {
  background: #fff4e5;
  border-color: #f5c47a;
  color: var(--warn);
}

.admin-state-pill.danger {
  background: #fff4f2;
  border-color: #f3b8b1;
  color: var(--danger);
}

.admin-empty {
  color: var(--muted);
  display: block;
  padding: 10px 0;
  text-align: center;
}

.admin-table-wrap {
  box-sizing: border-box;
  max-height: 520px;
  max-width: 100%;
  min-width: 0;
  overflow: auto;
  width: 100%;
}

.admin-table {
  min-width: 100%;
  table-layout: fixed;
  width: 100%;
}

.admin-table th:last-child,
.admin-table td:last-child {
  border-right: 1px solid var(--border);
}

.admin-table th:nth-child(1),
.admin-table td:nth-child(1) {
  width: 128px;
}

.admin-table th:nth-child(2),
.admin-table td:nth-child(2) {
  width: 142px;
}

.admin-table th:nth-child(3),
.admin-table td:nth-child(3) {
  width: 72px;
}

.admin-table th:nth-child(5),
.admin-table td:nth-child(5),
.admin-table th:nth-child(6),
.admin-table td:nth-child(6) {
  width: 72px;
}

.admin-table td {
  font-variant-numeric: tabular-nums;
}

.admin-duration-cell,
.admin-size-cell,
.admin-snapshot-cell {
  white-space: nowrap;
}

.admin-duration-cell {
  color: var(--text);
  font-weight: 700;
  width: 86px;
}

.admin-size-cell,
.admin-snapshot-cell {
  width: 78px;
}

.admin-duration-cell.warning,
.admin-slow-row td {
  background: #fff8e6;
}

.admin-duration-cell.warning {
  color: #8a5a00;
}

.admin-public-users-body {
  align-items: start;
  --admin-public-users-column-height: clamp(660px, calc(100vh - 220px), 760px);
  --admin-public-users-divider-width: 14px;
  --admin-public-users-right-divider-width: 12px;
  --admin-public-users-table-width: min(100%, 1760px);
  --admin-public-users-table-view-width: 100%;
  background: var(--surface);
  display: grid;
  grid-template-columns: minmax(0, var(--admin-public-users-table-view-width)) minmax(360px, 390px) minmax(250px, 1fr);
  justify-content: stretch;
  min-height: 190px;
  overflow: hidden;
}

.admin-public-users-table-panel {
  border-right: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  height: var(--admin-public-users-column-height);
  justify-self: stretch;
  max-height: var(--admin-public-users-column-height);
  max-width: none;
  min-width: 0;
  width: 100%;
}

.admin-public-users-wrap {
  max-height: none;
  min-height: 0;
  min-width: 0;
  overflow-x: auto;
  overflow-y: auto;
  scrollbar-color: #7da8a6 #e8eef2;
  scrollbar-gutter: stable both-edges;
  scrollbar-width: thin;
  width: 100%;
}

.admin-public-users-wrap::-webkit-scrollbar {
  height: 14px;
  width: 12px;
}

.admin-public-users-wrap::-webkit-scrollbar-track {
  background: #e8eef2;
  border-radius: 999px;
}

.admin-public-users-wrap::-webkit-scrollbar-thumb {
  background: #7da8a6;
  border: 3px solid #e8eef2;
  border-radius: 999px;
}

.admin-public-users-wrap::-webkit-scrollbar-thumb:hover {
  background: #5f9290;
}

.admin-public-users-wrap::-webkit-scrollbar-corner {
  background: #f8fafc;
}

.admin-public-users-scrollbar {
  background: #fff;
  border-top: 1px solid var(--border);
  padding: 8px 12px 10px;
}

.admin-public-users-scrollbar[hidden] {
  display: none;
}

.admin-public-users-scrollbar-range {
  appearance: none;
  background: transparent;
  cursor: pointer;
  display: block;
  height: 18px;
  margin: 0;
  min-height: 18px;
  padding: 0;
  width: 100%;
}

.admin-public-users-scrollbar-range::-webkit-slider-runnable-track {
  background: #e8eef2;
  border: 1px solid #d4e0df;
  border-radius: 999px;
  height: 12px;
}

.admin-public-users-scrollbar-range::-webkit-slider-thumb {
  appearance: none;
  background: #7da8a6;
  border: 2px solid #e8eef2;
  border-radius: 999px;
  height: 18px;
  margin-top: -4px;
  width: 64px;
}

.admin-public-users-scrollbar-range:focus-visible {
  outline: 2px solid rgba(17, 122, 122, 0.28);
  outline-offset: 3px;
}

.admin-public-users-scrollbar-range::-moz-range-track {
  background: #e8eef2;
  border: 1px solid #d4e0df;
  border-radius: 999px;
  height: 12px;
}

.admin-public-users-scrollbar-range::-moz-range-thumb {
  background: #7da8a6;
  border: 2px solid #e8eef2;
  border-radius: 999px;
  height: 16px;
  width: 64px;
}

.admin-public-users-table {
  min-width: var(--admin-public-users-table-fit-width, var(--admin-public-users-table-width));
  table-layout: fixed;
  width: max(100%, var(--admin-public-users-table-fit-width, var(--admin-public-users-table-width)));
}

.admin-public-users-table col.public-user-col-user {
  width: var(--public-user-col-user-width, 112px);
}

.admin-public-users-table col.public-user-col-phone {
  width: var(--public-user-col-phone-width, 116px);
}

.admin-public-users-table col.public-user-col-enabled {
  width: var(--public-user-col-enabled-width, 72px);
}

.admin-public-users-table col.public-user-col-bind-mode {
  width: var(--public-user-col-bind-mode-width, 72px);
}

.admin-public-users-table col.public-user-col-expiry {
  width: var(--public-user-col-expiry-width, 128px);
}

.admin-public-users-table col.public-user-col-actions {
  width: var(--public-user-col-actions-width, 74px);
}

.admin-public-users-table col.public-user-col-devices {
  width: var(--public-user-col-devices-width, 132px);
}

.admin-public-users-table col.public-user-col-status {
  width: var(--public-user-col-status-width, 92px);
}

.admin-public-users-table col.public-user-col-merit {
  width: var(--public-user-col-merit-width, 150px);
}

.admin-public-users-table col.public-user-col-portfolio-push {
  width: var(--public-user-col-portfolio-push-width, 118px);
}

.admin-public-users-table col.public-user-col-wechat {
  width: var(--public-user-col-wechat-width, 118px);
}

.admin-public-users-table col.public-user-col-reward {
  width: var(--public-user-col-reward-width, 108px);
}

.admin-public-users-table col.public-user-col-remark {
  width: var(--public-user-col-remark-width, 132px);
}

.admin-public-users-table tbody tr {
  height: 68px;
}

.admin-public-users-side {
  align-content: start;
  align-self: start;
  background: var(--surface);
  border-left: 1px solid var(--border);
  display: grid;
  grid-template-rows: auto auto minmax(150px, auto) 220px minmax(180px, 1fr);
  height: var(--admin-public-users-column-height);
  max-height: var(--admin-public-users-column-height);
  min-width: 0;
  overflow: auto;
}

.admin-public-users-side--creating {
  grid-template-rows: auto auto minmax(150px, auto) 220px auto minmax(180px, 1fr);
}

.admin-public-users-side--creating .admin-public-user-create {
  order: 4;
}

.admin-public-users-side--creating .admin-side-risk-panel {
  order: 5;
}

.admin-security-matrix {
  align-self: start;
  background: var(--surface);
  border-left: 1px solid #c8dcda;
  border-right: 1px solid #c8dcda;
  box-shadow:
    calc(0px - var(--admin-public-users-divider-width)) 0 0 #f3f8f7,
    calc(-1px - var(--admin-public-users-divider-width)) 0 0 #d6e4e2,
    var(--admin-public-users-right-divider-width) 0 0 #f3f8f7,
    calc(var(--admin-public-users-right-divider-width) + 1px) 0 0 #d6e4e2;
  display: grid;
  gap: 8px;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  height: var(--admin-public-users-column-height);
  margin-left: var(--admin-public-users-divider-width);
  margin-right: var(--admin-public-users-right-divider-width);
  max-height: var(--admin-public-users-column-height);
  min-width: 0;
  overflow: hidden;
  padding: 12px;
}

.admin-security-head {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  min-width: 0;
}

.admin-security-head h3,
.admin-security-lists h4 {
  margin: 0;
}

.admin-security-head h3 {
  font-size: 16px;
}

.admin-security-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-security-metrics {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-security-metric {
  border-left: 3px solid #80c8c2;
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 5px 7px;
}

.admin-security-metric-warning {
  background: #fff8e6;
  border-left-color: #d97706;
}

.admin-security-metric span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-security-metric strong {
  color: var(--text);
  font-size: 18px;
  line-height: 1.1;
}

.admin-security-priority {
  background: #fff;
  border: 1px solid #58c6bd;
  border-radius: 8px;
  box-shadow: inset 3px 0 0 rgba(22, 165, 154, 0.18);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

.admin-security-group-head {
  align-items: center;
  background: #f0fbf8;
  border-bottom: 1px solid #b7e5df;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  min-width: 0;
  padding: 8px 12px;
}

.admin-security-group-head h4,
.admin-security-account-links h4 {
  margin: 0;
}

.admin-security-group-head h4 {
  font-size: 14px;
}

.admin-security-group-head span {
  color: #0f766e;
  font-size: 12px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-security-priority-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  min-width: 0;
  overflow: auto;
  padding: 10px;
}

.admin-security-risk {
  align-items: start;
  align-content: start;
  appearance: none;
  background: #fff;
  border: 1px solid var(--border);
  border-left: 4px solid #80c8c2;
  border-radius: 7px;
  color: var(--text);
  cursor: pointer;
  display: grid;
  flex: 0 0 auto;
  gap: 8px;
  grid-template-columns: 36px minmax(0, 1fr);
  height: auto;
  min-width: 0;
  overflow: visible;
  padding: 8px 10px;
  text-align: left;
  width: 100%;
}

.admin-security-risk.high {
  border-left-color: #d97706;
}

.admin-security-risk.medium {
  border-left-color: #fb7185;
}

.admin-security-risk.low {
  border-left-color: #0f766e;
}

.admin-security-risk-selected {
  box-shadow: inset 0 0 0 2px #0f766e;
}

.admin-security-risk-level {
  border-radius: 999px;
  display: inline-flex;
  font-size: 12px;
  font-weight: 900;
  justify-content: center;
  line-height: 1;
  padding: 6px 0;
  width: 32px;
}

.admin-security-risk-level.high {
  background: #fff0db;
  color: #9a5a00;
}

.admin-security-risk-level.medium {
  background: #fff1f2;
  color: #b42337;
}

.admin-security-risk-level.low {
  background: #e7f7f4;
  color: #0f766e;
}

.admin-security-risk-body {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.admin-security-risk-title {
  align-items: baseline;
  display: flex;
  gap: 8px;
  line-height: 1.25;
  min-width: 0;
  row-gap: 2px;
  flex-wrap: wrap;
}

.admin-security-risk-type {
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

.admin-security-risk-subject {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  min-width: 0;
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

.admin-security-risk-detail {
  color: var(--text);
  display: block;
  font-size: 12px;
  line-height: 1.38;
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: normal;
  word-break: break-word;
}

.admin-security-account-links {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 7px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 112px;
  min-width: 0;
  overflow: hidden;
}

.admin-security-account-links h4 {
  align-items: center;
  background: #f8fafc;
  border-bottom: 1px solid var(--border);
  display: flex;
  font-size: 13px;
  gap: 8px;
  min-height: 32px;
  padding: 7px 10px;
}

.admin-security-account-links h4::before {
  background: #80c8c2;
  border-radius: 999px;
  content: "";
  height: 18px;
  width: 3px;
}

.admin-security-account-list {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
  overflow: auto;
  padding: 8px;
}

.admin-security-account-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  cursor: pointer;
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 7px 8px;
  text-align: left;
}

.admin-security-account-name {
  font-size: 13px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-security-account-detail {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.admin-public-users-body.admin-sub-layout.grid-stack {
  align-items: stretch;
}

.admin-public-users-body.admin-sub-layout.grid-stack > .grid-stack-item.admin-public-users-table-panel,
.admin-public-users-body.admin-sub-layout.grid-stack > .grid-stack-item.admin-security-matrix,
.admin-public-users-body.admin-sub-layout.grid-stack > .grid-stack-item.admin-security-priority-panel,
.admin-public-users-body.admin-sub-layout.grid-stack > .grid-stack-item.admin-security-account-links-panel,
.admin-public-users-body.admin-sub-layout.grid-stack > .grid-stack-item.admin-public-users-side,
.admin-public-users-body.admin-sub-layout.grid-stack > .grid-stack-item.admin-side-risk-grid-panel {
  align-self: stretch;
  box-sizing: border-box;
  height: auto;
  margin-left: 0;
  margin-right: 0;
  max-height: none !important;
  max-width: none;
  min-height: 0;
  overflow: hidden;
  padding: 0;
}

.admin-public-users-body.admin-sub-layout.grid-stack > .grid-stack-item > .admin-sub-content {
  box-sizing: border-box;
  height: 100%;
}

.admin-public-users-body.admin-sub-layout.grid-stack > .admin-public-users-table-panel > .admin-sub-content {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 7px;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
}

.admin-layout-editing .admin-public-users-body.admin-sub-layout.grid-stack > .admin-public-users-table-panel > .ui-resizable-handle {
  display: block !important;
  opacity: 1;
  z-index: 10;
}

.admin-layout-editing .admin-public-users-body.admin-sub-layout.grid-stack > .admin-public-users-table-panel > .ui-resizable-s {
  background: rgba(15, 118, 110, 0.14);
  bottom: 0;
  height: 10px;
}

.admin-layout-editing .admin-public-users-body.admin-sub-layout.grid-stack > .admin-public-users-table-panel > .ui-resizable-se {
  background-color: #fff;
  border: 1px solid rgba(15, 118, 110, 0.5);
  border-radius: 6px;
  bottom: 3px;
  height: 22px;
  right: 3px;
  width: 22px;
}

.admin-public-users-body.admin-sub-layout.grid-stack > .admin-security-matrix > .admin-sub-content {
  background: var(--surface);
  border-left: 1px solid #c8dcda;
  border-right: 1px solid #c8dcda;
  box-shadow:
    calc(0px - var(--admin-public-users-divider-width)) 0 0 #f3f8f7,
    calc(-1px - var(--admin-public-users-divider-width)) 0 0 #d6e4e2,
    var(--admin-public-users-right-divider-width) 0 0 #f3f8f7,
    calc(var(--admin-public-users-right-divider-width) + 1px) 0 0 #d6e4e2;
  display: grid;
  gap: 8px;
  grid-template-rows: auto auto minmax(0, 1fr) minmax(86px, auto);
  min-height: 0;
  overflow: auto;
  padding: 12px;
}

.admin-public-users-body.admin-sub-layout.grid-stack > .admin-public-users-side > .admin-sub-content {
  background: var(--surface);
  border-left: 1px solid var(--border);
  display: grid;
  grid-template-rows: auto auto minmax(150px, auto) minmax(180px, 1fr);
  min-height: 0;
  overflow: auto;
}

.admin-public-users-body.admin-sub-layout.grid-stack > .admin-public-users-side.admin-public-users-side--creating > .admin-sub-content {
  grid-template-rows: auto auto minmax(150px, auto) minmax(180px, 1fr) auto;
}

.admin-public-users-body.admin-sub-layout.grid-stack > .admin-side-risk-grid-panel > .admin-side-risk-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 7px;
}

.admin-security-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

.admin-security-primary {
  display: grid;
  gap: 8px;
  grid-column: 1 / span 2;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

.admin-security-table-wrap {
  align-self: start;
  max-height: 100%;
  min-width: 0;
  overflow: auto;
  scroll-snap-type: y mandatory;
}

.admin-security-table {
  min-width: 300px;
  width: 100%;
}

.admin-security-table th,
.admin-security-table td {
  padding: 8px;
}

.admin-security-table thead tr {
  scroll-snap-align: start;
}

.admin-security-row {
  cursor: pointer;
  scroll-snap-align: start;
}

.admin-security-row.high td {
  background: #fff1f2;
}

.admin-security-row.medium td {
  background: #fff8e6;
}

.admin-security-row.low td {
  background: #eef8f7;
}

.admin-security-row-selected td {
  box-shadow: inset 0 2px 0 #0f766e, inset 0 -2px 0 #0f766e;
}

.admin-security-row-selected td:first-child {
  box-shadow: inset 4px 0 0 #0f766e, inset 0 2px 0 #0f766e, inset 0 -2px 0 #0f766e;
}

.admin-security-subject {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-security-event.high {
  border-color: #fb7185;
}

.admin-security-lists,
.admin-security-extra {
  display: grid;
  gap: 10px;
  max-height: 100%;
  min-height: 0;
  min-width: 0;
  overflow: auto;
}

.admin-security-lists {
  grid-column: 3 / span 2;
}

.admin-security-extra {
  gap: 6px;
  grid-template-rows: auto minmax(0, 1fr);
  height: 126px;
  max-height: 126px;
}

.admin-security-lists section,
.admin-security-extra {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  display: grid;
  gap: 0;
  min-width: 0;
  overflow: hidden;
}

.admin-security-lists h4,
.admin-security-extra h4 {
  align-items: center;
  background: #f8fafc;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  display: flex;
  font-size: 13px;
  line-height: 1.2;
  margin: 0;
  min-height: 30px;
  padding: 7px 10px 7px 24px;
  position: relative;
}

.admin-security-lists h4::before,
.admin-security-extra h4::before {
  background: #80c8c2;
  border-radius: 999px;
  bottom: 7px;
  content: "";
  left: 10px;
  position: absolute;
  top: 7px;
  width: 3px;
}

.admin-security-list {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 8px 10px;
}

.admin-security-list .admin-empty {
  color: var(--muted);
  padding: 8px 0;
}

.admin-security-extra .admin-security-list {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.admin-security-event {
  background: #fff;
  border: 1px solid var(--border);
  border-left: 3px solid #80c8c2;
  border-radius: 6px;
  color: var(--text);
  cursor: pointer;
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 7px 9px;
  text-align: left;
}

.admin-security-event.medium {
  border-left-color: #d97706;
}

.admin-security-event.low {
  border-left-color: #0f766e;
}

.admin-security-event-title,
.admin-security-event-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-security-event-title {
  font-size: 13px;
  font-weight: 700;
}

.admin-security-event-meta {
  color: var(--muted);
  font-size: 12px;
}

.admin-public-user-highlight td {
  background: #d6f6f2;
  box-shadow: inset 0 1px 0 #14b8a6, inset 0 -1px 0 #14b8a6;
  transition: background 160ms ease;
}

.admin-public-user-highlight td:first-child {
  box-shadow: inset 4px 0 0 #0f766e, inset 0 1px 0 #14b8a6, inset 0 -1px 0 #14b8a6;
}

.admin-user-summary {
  display: grid;
  gap: 14px 18px;
  grid-template-columns: repeat(4, minmax(92px, 1fr));
  padding: 14px;
}

.admin-online-summary {
  border-top: 1px solid var(--border);
  display: grid;
  gap: 14px 18px;
  grid-template-columns: repeat(4, minmax(92px, 1fr));
  padding: 14px;
}

.admin-public-users-side .admin-user-summary,
.admin-public-users-side .admin-online-summary {
  gap: 10px 8px;
  grid-template-columns: repeat(auto-fit, minmax(82px, 1fr));
}

.admin-user-summary-item {
  border-left: 3px solid #c7dcdc;
  display: grid;
  gap: 4px;
  min-width: 0;
  padding-left: 8px;
}

.admin-user-summary-item span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-user-summary-item strong {
  color: var(--text);
  font-size: 20px;
  line-height: 1.1;
}

.admin-online-summary .admin-user-summary-item strong {
  font-size: 16px;
}

.admin-online-panel {
  border-top: 1px solid var(--border);
  display: grid;
  gap: 10px;
  min-height: 0;
  padding: 14px;
}

.admin-online-title {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  min-width: 0;
}

.admin-online-title h3 {
  font-size: 16px;
  margin: 0;
}

.admin-online-title span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.admin-online-list {
  display: grid;
  gap: 8px;
  max-height: 240px;
  min-height: 0;
  overflow: auto;
}

.admin-online-card {
  border: 1px solid var(--border);
  border-radius: 6px;
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 8px 10px;
}

.admin-online-card-head {
  align-items: baseline;
  display: flex;
  gap: 8px;
  min-width: 0;
}

.admin-online-card-head strong,
.admin-online-card-head span,
.admin-online-line {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-online-card-head strong {
  color: var(--text);
  flex: 0 1 auto;
}

.admin-online-card-head span,
.admin-online-line {
  color: var(--text);
  font-size: 12px;
}

.admin-online-line.muted {
  color: var(--muted);
}

.admin-login-ranking-panel {
  border-top: 1px solid var(--border);
  display: grid;
  gap: 10px;
  grid-template-rows: auto auto minmax(0, 1fr);
  min-height: 0;
  padding: 14px;
}

.admin-login-ranking-title {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  min-width: 0;
}

.admin-login-ranking-title h3 {
  font-size: 16px;
  margin: 0;
}

.admin-login-ranking-title span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-login-ranking-tabs {
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 7px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
}

.admin-login-ranking-tabs button {
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  min-height: 30px;
  padding: 6px 8px;
}

.admin-login-ranking-tabs button + button {
  border-left: 1px solid var(--border);
}

.admin-login-ranking-tabs button.is-active {
  background: #e7f7f4;
  color: #0f766e;
}

.admin-login-ranking-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 260px;
  min-height: 0;
  overflow: auto;
}

.admin-login-ranking-card {
  appearance: none;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  cursor: pointer;
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 8px 10px;
  text-align: left;
  width: 100%;
}

.admin-login-ranking-card:hover,
.admin-login-ranking-card:focus-visible {
  border-color: #8ccfca;
  outline: 0;
}

.admin-login-ranking-card-head {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-width: 0;
}

.admin-login-ranking-rank,
.admin-login-ranking-count {
  color: #0f766e;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.admin-login-ranking-name {
  font-size: 13px;
  font-weight: 800;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-login-ranking-meta,
.admin-login-ranking-time {
  color: var(--muted);
  display: block;
  font-size: 12px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-login-ranking-bar {
  background: #eef6f5;
  border-radius: 999px;
  display: block;
  height: 5px;
  overflow: hidden;
}

.admin-login-ranking-bar span {
  background: #20a59b;
  display: block;
  height: 100%;
}

.admin-side-risk-panel {
  border-top: 1px solid var(--border);
  display: grid;
  gap: 10px;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  padding: 14px;
}

.admin-side-risk-title {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  min-width: 0;
}

.admin-side-risk-title h3 {
  font-size: 16px;
  margin: 0;
}

.admin-side-risk-title span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-side-risk-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  overflow: auto;
}

.admin-side-risk-card {
  appearance: none;
  background: #fff;
  border: 1px solid var(--border);
  border-left: 4px solid #80c8c2;
  border-radius: 6px;
  color: var(--text);
  cursor: pointer;
  display: grid;
  flex: 0 0 auto;
  gap: 4px;
  height: auto;
  min-width: 0;
  overflow: visible;
  padding: 8px 10px;
  text-align: left;
  width: 100%;
}

.admin-side-risk-card.high {
  border-left-color: #d97706;
}

.admin-side-risk-card.medium {
  border-left-color: #fb7185;
}

.admin-side-risk-card.low {
  border-left-color: #0f766e;
}

.admin-side-risk-card:hover,
.admin-side-risk-card:focus-visible {
  border-color: #8ccfca;
  outline: 0;
}

.admin-side-risk-card-head {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  min-width: 0;
}

.admin-side-risk-type,
.admin-side-risk-subject {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-side-risk-type {
  font-size: 13px;
  font-weight: 800;
}

.admin-side-risk-level {
  border-radius: 999px;
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  padding: 4px 7px;
}

.admin-side-risk-level.high {
  background: #fff0db;
  color: #9a5a00;
}

.admin-side-risk-level.medium {
  background: #fff1f2;
  color: #b42337;
}

.admin-side-risk-level.low {
  background: #e7f7f4;
  color: #0f766e;
}

.admin-side-risk-subject {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.admin-side-risk-detail {
  color: var(--text);
  display: block;
  font-size: 12px;
  line-height: 1.35;
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: normal;
  word-break: break-word;
}

.admin-public-user-create {
  background: var(--surface);
  border: 1px solid rgba(203, 213, 223, 0.86);
  border-radius: 8px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  left: 50%;
  max-height: calc(100vh - 48px);
  max-width: calc(100vw - 32px);
  overflow: auto;
  padding: 18px;
  position: fixed;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 640px;
  z-index: 140;
}

.admin-create-field-wide {
  grid-column: 1 / -1;
}

.admin-public-user-create[hidden] {
  display: none;
}

body.admin-create-public-user-open {
  overflow: hidden;
}

body.admin-create-public-user-open::before {
  background: rgba(31, 41, 51, 0.48);
  content: "";
  inset: 0;
  position: fixed;
  z-index: 139;
}

.admin-public-user-create .admin-check-field {
  align-self: center;
}

.admin-table-header-filter {
  align-items: stretch;
  display: grid;
  gap: 5px;
  justify-items: center;
  min-width: 0;
}

.admin-table-header-filter span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-header-filter-field {
  font-size: 11px;
  margin-left: 0;
  min-height: 26px;
  min-width: 0;
  padding: 3px 5px;
  text-align: center;
  width: 100%;
}

.admin-public-users-table select.admin-header-filter-field {
  padding-right: 2px;
}

.admin-public-users-table th,
.admin-public-users-table td {
  padding-left: 8px;
  padding-right: 8px;
}

.admin-public-users-table th.public-user-col-user,
.admin-public-users-table td.public-user-col-user {
  left: 0;
  position: sticky;
  width: var(--public-user-col-user-width, 112px);
}

.admin-public-users-table th.public-user-col-user {
  background: var(--surface-muted);
  box-shadow: inset -1px 0 var(--border), 10px 0 12px -12px rgba(31, 41, 51, 0.45);
  z-index: 6;
}

.admin-public-users-table td.public-user-col-user {
  box-shadow: inset -1px 0 var(--border), 10px 0 12px -12px rgba(31, 41, 51, 0.22);
  overflow: visible;
  text-align: center;
  text-overflow: clip;
  white-space: nowrap;
  z-index: 2;
}

.admin-public-users-table tbody tr:nth-child(even) td.public-user-col-user {
  background: #f7f9fc;
}

.admin-public-users-table tbody tr:nth-child(odd) td.public-user-col-user {
  background: #fff;
}

.admin-public-user-highlight td.public-user-col-user {
  background: #d6f6f2;
  box-shadow:
    inset 4px 0 0 #0f766e,
    inset -1px 0 var(--border),
    inset 0 1px 0 #14b8a6,
    inset 0 -1px 0 #14b8a6,
    10px 0 12px -12px rgba(31, 41, 51, 0.32);
}

.admin-public-users-table th.public-user-col-phone,
.admin-public-users-table td.public-user-col-phone {
  text-align: center;
  white-space: nowrap;
  width: var(--public-user-col-phone-width, 116px);
}

.admin-public-users-table td.public-user-col-phone {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.admin-public-users-table th.public-user-col-status,
.admin-public-users-table td.public-user-col-status {
  width: var(--public-user-col-status-width, 92px);
}

.admin-public-users-table th.public-user-col-merit,
.admin-public-users-table td.public-user-col-merit {
  width: var(--public-user-col-merit-width, 150px);
}

.admin-public-users-table th.public-user-col-portfolio-push,
.admin-public-users-table td.public-user-col-portfolio-push {
  width: var(--public-user-col-portfolio-push-width, 118px);
}

.admin-public-users-table th.public-user-col-wechat,
.admin-public-users-table td.public-user-col-wechat {
  width: var(--public-user-col-wechat-width, 118px);
}

.admin-public-users-table th.public-user-col-enabled,
.admin-public-users-table td.public-user-col-enabled {
  width: var(--public-user-col-enabled-width, 72px);
}

.admin-public-users-table th.public-user-col-bind-mode,
.admin-public-users-table td.public-user-col-bind-mode {
  width: var(--public-user-col-bind-mode-width, 72px);
}

.admin-public-users-table th.public-user-col-expiry,
.admin-public-users-table td.public-user-col-expiry {
  padding-left: 5px;
  padding-right: 5px;
  width: var(--public-user-col-expiry-width, 128px);
}

.admin-public-users-table th.public-user-col-actions,
.admin-public-users-table td.public-user-col-actions {
  width: var(--public-user-col-actions-width, 74px);
}

.admin-public-users-table th.public-user-col-devices,
.admin-public-users-table td.public-user-col-devices {
  width: var(--public-user-col-devices-width, 132px);
}

.admin-public-users-table td.public-user-col-devices {
  overflow: visible;
  position: relative;
}

.admin-public-users-table td.public-user-col-devices:has(.admin-device-manager[open]) {
  z-index: 8;
}

.admin-public-users-table th.public-user-col-remark,
.admin-public-users-table td.public-user-col-remark {
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
  width: var(--public-user-col-remark-width, 132px);
}

.admin-public-users-table td.public-user-col-remark {
  text-align: center;
}

.admin-public-users-table th:last-child,
.admin-public-users-table td:last-child {
  border-right: 1px solid var(--border);
}

.admin-public-users-table th.public-user-col-reward,
.admin-public-users-table td.public-user-col-reward {
  width: var(--public-user-col-reward-width, 108px);
}

.admin-public-users-table td.public-user-col-reward:has(.admin-reward-editor[open]) {
  overflow: visible;
  padding-bottom: 10px;
  padding-top: 10px;
  position: relative;
  vertical-align: top;
  z-index: 7;
}

.admin-public-users-table td.public-user-col-wechat:has(.admin-wechat-editor[open]) {
  overflow: visible;
  padding-bottom: 10px;
  padding-top: 10px;
  position: relative;
  vertical-align: top;
  z-index: 7;
}

.admin-merit-cell {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.admin-merit-cell strong,
.admin-merit-cell span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-merit-cell strong {
  color: var(--text);
  font-size: 13px;
}

.admin-merit-cell span {
  color: var(--muted);
  font-size: 12px;
}

.admin-user-merit-delta {
  margin-left: 0;
  min-height: 28px;
  width: 100%;
}

.admin-merit-actions {
  display: grid;
  gap: 5px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-merit-actions button {
  min-height: 28px;
  padding: 4px 6px;
}

.admin-portfolio-push-cell {
  align-items: center;
  display: grid;
  gap: 6px;
  justify-items: center;
  min-width: 0;
}

.admin-portfolio-push-cell .admin-state-pill {
  white-space: nowrap;
}

.admin-portfolio-push-expiry {
  color: var(--muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-merit-products-wrap {
  max-height: min(62vh, 680px);
  overflow: auto;
}

.admin-merit-products-table {
  min-width: var(--admin-merit-products-table-fit-width, 1128px);
  table-layout: fixed;
  width: var(--admin-merit-products-table-fit-width, 1128px);
}

.admin-merit-products-table th,
.admin-merit-products-table td {
  vertical-align: top;
}

.admin-merit-products-table th {
  position: sticky;
}

.admin-merit-products-table th:last-child,
.admin-merit-products-table td:last-child {
  border-right: 1px solid var(--border);
}

.admin-merit-product-column-resizer {
  background: transparent;
  border: 0;
  border-radius: 0;
  bottom: 0;
  cursor: col-resize;
  min-height: 0;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 8px;
  z-index: 7;
}

.admin-merit-product-column-resizer::after {
  background: transparent;
  bottom: 7px;
  content: "";
  position: absolute;
  right: 3px;
  top: 7px;
  width: 2px;
}

.admin-merit-product-column-resizer:hover::after,
.admin-merit-product-column-resizer:focus-visible::after,
.admin-merit-product-column-resizer.is-resizing::after {
  background: var(--accent);
}

.admin-merit-products-table.is-column-resizing,
.admin-merit-products-table.is-column-resizing * {
  cursor: col-resize !important;
  user-select: none;
  -webkit-user-select: none;
}

.admin-merit-products-table input,
.admin-merit-products-table select,
.admin-merit-products-table textarea {
  margin-left: 0;
  width: 100%;
}

.admin-merit-products-table textarea {
  min-height: 56px;
  resize: vertical;
}

.admin-merit-products-table .admin-check-field {
  justify-content: center;
}

.admin-merit-products-table col.merit-product-col-sort,
.admin-merit-products-table th.merit-product-col-sort,
.admin-merit-products-table td.merit-product-col-sort {
  text-align: center;
  width: var(--merit-product-col-sort-width, 48px);
}

.admin-merit-products-table col.merit-product-col-enabled,
.admin-merit-products-table th.merit-product-col-enabled,
.admin-merit-products-table td.merit-product-col-enabled {
  width: var(--merit-product-col-enabled-width, 72px);
}

.admin-merit-products-table col.merit-product-col-key,
.admin-merit-products-table th.merit-product-col-key,
.admin-merit-products-table td.merit-product-col-key {
  width: var(--merit-product-col-key-width, 190px);
}

.admin-merit-products-table col.merit-product-col-name,
.admin-merit-products-table th.merit-product-col-name,
.admin-merit-products-table td.merit-product-col-name {
  width: var(--merit-product-col-name-width, 200px);
}

.admin-merit-products-table col.merit-product-col-category,
.admin-merit-products-table th.merit-product-col-category,
.admin-merit-products-table td.merit-product-col-category {
  width: var(--merit-product-col-category-width, 108px);
}

.admin-merit-products-table col.merit-product-col-cost,
.admin-merit-products-table th.merit-product-col-cost,
.admin-merit-products-table td.merit-product-col-cost {
  width: var(--merit-product-col-cost-width, 84px);
}

.admin-merit-products-table col.merit-product-col-type,
.admin-merit-products-table th.merit-product-col-type,
.admin-merit-products-table td.merit-product-col-type {
  width: var(--merit-product-col-type-width, 124px);
}

.admin-merit-products-table col.merit-product-col-params,
.admin-merit-products-table th.merit-product-col-params,
.admin-merit-products-table td.merit-product-col-params {
  width: var(--merit-product-col-params-width, 260px);
}

.admin-merit-products-table col.merit-product-col-action,
.admin-merit-products-table th.merit-product-col-action,
.admin-merit-products-table td.merit-product-col-action {
  width: var(--merit-product-col-action-width, 76px);
}

.admin-merit-product-drag {
  cursor: grab;
  font-size: 16px;
  min-height: 30px;
  padding: 4px 8px;
}

.admin-merit-product-drag:disabled {
  cursor: not-allowed;
  opacity: 0.38;
}

.admin-merit-product-row.is-dragging {
  opacity: 0.58;
}

.admin-merit-product-row.is-drop-before {
  box-shadow: inset 0 3px 0 var(--accent);
}

.admin-merit-product-row.is-drop-after {
  box-shadow: inset 0 -3px 0 var(--accent);
}

.admin-merit-product-params {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.admin-merit-product-params:has(.admin-merit-product-param[data-merit-param="device_type"]:not([hidden])) {
  align-items: center;
  column-gap: 8px;
  grid-template-columns: minmax(130px, 1.2fr) minmax(82px, 0.8fr);
}

.admin-merit-product-param {
  display: grid;
  gap: 4px;
}

.admin-merit-product-param[data-merit-param="device_type"],
.admin-merit-product-param[data-merit-param="extra"] {
  align-items: center;
  gap: 6px;
  grid-template-columns: max-content minmax(0, 1fr);
}

.admin-merit-product-param[hidden] {
  display: none;
}

.admin-merit-product-param span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.admin-merit-codes-body {
  display: grid;
  gap: 14px;
}

.admin-merit-code-form {
  align-items: end;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
}

.admin-merit-code-form.grid-stack-item {
  display: block;
}

.admin-merit-code-form > .admin-sub-content--form {
  align-items: end;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
}

.admin-merit-code-form .admin-message-field {
  margin: 0;
}

.admin-merit-code-form input {
  min-width: 0;
}

.admin-merit-code-form button {
  min-height: 36px;
  white-space: nowrap;
}

.admin-merit-code-generated {
  display: block;
}

.admin-merit-code-generated > .admin-sub-content {
  border: 1px solid var(--border);
  border-radius: 8px;
  box-sizing: border-box;
  display: grid;
  gap: 8px;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
  overflow: hidden;
  padding: 10px;
  width: 100%;
}

.admin-merit-code-generated-head {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.admin-layout-editing .admin-merit-code-generated-head {
  background: #f2fbfa;
  border: 1px dashed rgba(15, 118, 110, 0.42);
  border-radius: 6px;
  margin: -2px;
  padding: 2px 4px;
}

.admin-layout-editing .admin-merit-code-generated > .ui-resizable-handle {
  display: block !important;
  opacity: 1;
  z-index: 5;
}

.admin-layout-editing .admin-merit-code-generated > .ui-resizable-se {
  background-color: #fff;
  border: 1px solid rgba(15, 118, 110, 0.42);
  border-radius: 6px;
  bottom: 4px;
  height: 24px;
  right: 4px;
  width: 24px;
}

.admin-merit-code-generated textarea {
  border: 1px solid var(--border);
  border-radius: 6px;
  box-sizing: border-box;
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  height: 100%;
  min-height: 0;
  overflow: auto;
  padding: 10px;
  resize: none;
  width: 100%;
}

.admin-merit-code-tables {
  display: block;
}

.admin-merit-code-tables > .admin-sub-content--tables {
  align-content: start;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
  justify-content: start;
  overflow: auto;
}

.admin-merit-code-batches-wrap {
  max-height: 260px;
  overflow-x: hidden;
  overflow-y: auto;
  width: min(100%, 460px);
}

.admin-merit-code-items-table {
  min-width: 680px;
  table-layout: fixed;
  width: 680px;
}

.admin-merit-code-batches-table {
  min-width: 0;
  table-layout: auto;
  width: 100%;
}

.admin-merit-code-batches-table thead {
  display: none;
}

.admin-merit-code-batch-cell {
  border-right: 0;
  padding: 6px;
}

.admin-merit-code-batch-card {
  align-items: stretch;
  background: #fff;
  border: 1px solid #d8e3e8;
  border-radius: 6px;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 8px;
}

.admin-merit-code-batches-table tr.is-selected .admin-merit-code-batch-card {
  background: #f2fbfa;
  border-color: #b9d8d8;
}

.admin-merit-code-batch-body {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.admin-merit-code-batch-title {
  color: var(--text);
  font-size: 13px;
  line-height: 1.25;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-merit-code-batch-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}

.admin-merit-code-batch-stat {
  align-items: center;
  background: #f8fafc;
  border: 1px solid #dfe8ee;
  border-radius: 999px;
  display: inline-flex;
  gap: 4px;
  min-height: 24px;
  padding: 3px 7px;
}

.admin-merit-code-batch-stat small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.admin-merit-code-batch-stat b {
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.admin-merit-code-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-merit-code-actions button {
  white-space: nowrap;
}

.admin-merit-code-batches-table .admin-merit-code-actions {
  align-items: flex-start;
  flex-direction: column;
}

.admin-merit-code-batches-table .admin-merit-code-actions button {
  min-height: 30px;
  padding: 5px 9px;
}

.admin-merit-wechat-body {
  --admin-merit-wechat-content-width: 100%;
  display: grid;
  gap: 14px;
  justify-items: stretch;
  max-width: 100%;
  overflow: auto;
  padding: 14px;
  width: 100%;
}

.admin-merit-wechat-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr);
  justify-content: stretch;
  max-width: 100%;
  width: 100%;
}

.admin-merit-wechat-grid.grid-stack-item {
  display: block;
}

.admin-merit-wechat-grid > .admin-sub-content--form {
  align-items: end;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  justify-content: stretch;
  max-width: 100%;
  width: 100%;
}

.admin-merit-wechat-grid .admin-check-field {
  align-self: end;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  min-height: 38px;
  padding: 8px 10px;
  width: 100%;
}

.admin-merit-wechat-grid .admin-message-field {
  width: 100%;
}

.admin-merit-wechat-grid .admin-message-field:has(#meritWechatAgentid),
.admin-merit-wechat-grid .admin-message-field:has(#meritWechatTimeout) {
  width: 100%;
}

.admin-merit-wechat-grid input {
  margin-left: 0;
  width: 100%;
}

.admin-merit-wechat-test-message {
  grid-column: 1 / -1;
  width: 100%;
}

.admin-merit-wechat-state,
.admin-merit-wechat-products {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 100%;
  min-width: 0;
  width: 100%;
}

.admin-merit-wechat-hint {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  margin-top: 4px;
}

.admin-merit-wechat-products {
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

.admin-merit-wechat-product {
  background: #fff;
  border: 1px solid #dce4eb;
  border-radius: 6px;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  min-height: 30px;
  padding: 5px 9px;
}

.admin-merit-wechat-product span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.admin-merit-wechat-product.is-locked {
  background: #eef7f7;
  border-color: #b9d8d8;
  cursor: default;
}

.admin-merit-wechat-product.is-locked span {
  color: var(--accent-strong);
}

.admin-merit-wechat-product.is-locked input {
  cursor: default;
}

.admin-merit-wechat-empty {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.admin-password-reset-smtp-body {
  display: grid;
  gap: 10px;
  align-content: start;
  box-sizing: border-box;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  justify-content: stretch;
  max-width: 100%;
  min-height: 0;
  overflow: auto;
  padding: 14px;
  width: 100%;
}

.admin-password-reset-smtp-body .admin-check-field {
  align-self: end;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  min-height: 38px;
  padding: 8px 10px;
  width: 100%;
}

.admin-password-reset-smtp-body .admin-message-field {
  width: 100%;
}

.admin-password-reset-smtp-body .admin-password-reset-smtp-port {
  width: 100%;
}

.admin-password-reset-smtp-body input {
  margin-left: 0;
  width: 100%;
}

.admin-password-reset-smtp-state {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  grid-column: 1 / -1;
}

.admin-merit-admin-events-wrap {
  max-height: min(42vh, 420px);
  overflow: auto;
}

.admin-merit-admin-events-table {
  min-width: var(--admin-merit-admin-events-table-fit-width, 658px);
  table-layout: fixed;
  width: var(--admin-merit-admin-events-table-fit-width, 658px);
}

.admin-merit-admin-events-table col.merit-admin-event-col-time,
.admin-merit-admin-events-table th.merit-admin-event-col-time,
.admin-merit-admin-events-table td.merit-admin-event-col-time {
  width: var(--merit-admin-event-col-time-width, 128px);
}

.admin-merit-admin-events-table col.merit-admin-event-col-action,
.admin-merit-admin-events-table th.merit-admin-event-col-action,
.admin-merit-admin-events-table td.merit-admin-event-col-action {
  width: var(--merit-admin-event-col-action-width, 96px);
}

.admin-merit-admin-events-table col.merit-admin-event-col-target,
.admin-merit-admin-events-table th.merit-admin-event-col-target,
.admin-merit-admin-events-table td.merit-admin-event-col-target {
  width: var(--merit-admin-event-col-target-width, 92px);
}

.admin-merit-admin-events-table col.merit-admin-event-col-summary,
.admin-merit-admin-events-table th.merit-admin-event-col-summary,
.admin-merit-admin-events-table td.merit-admin-event-col-summary {
  width: var(--merit-admin-event-col-summary-width, 260px);
}

.admin-merit-admin-events-table col.merit-admin-event-col-actor,
.admin-merit-admin-events-table th.merit-admin-event-col-actor,
.admin-merit-admin-events-table td.merit-admin-event-col-actor {
  width: var(--merit-admin-event-col-actor-width, 82px);
}

.admin-merit-admin-events-table th:last-child,
.admin-merit-admin-events-table td:last-child {
  border-right: 1px solid var(--border);
}

.admin-merit-admin-event-summary {
  overflow-wrap: anywhere;
  white-space: normal;
}

.admin-reward-editor {
  display: inline-block;
  max-width: 100%;
  min-width: 0;
  text-align: left;
}

.admin-reward-editor[open] {
  display: block;
  width: 100%;
}

.admin-reward-editor summary {
  color: var(--text);
  cursor: pointer;
  font-weight: 700;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-reward-fields {
  background: #f8fafc;
  border: 1px solid #d7e2e7;
  border-radius: 8px;
  display: grid;
  gap: 8px;
  margin-top: 8px;
  padding: 10px;
}

.admin-reward-fields input {
  box-sizing: border-box;
  margin-left: 0;
  min-height: 30px;
  width: 100%;
}

.admin-reward-fields textarea {
  box-sizing: border-box;
}

.admin-reward-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-reward-actions button {
  min-height: 28px;
  padding: 4px 8px;
  white-space: nowrap;
}

.admin-reward-clear {
  color: var(--danger);
}

.admin-reward-clear:hover {
  background: #fff4f2;
  border-color: #f3b8b1;
}

.admin-check-field {
  align-items: center;
  display: inline-flex;
  gap: 6px;
}

.admin-check-field input {
  margin-left: 0;
  width: auto;
}

.admin-user-expiry {
  margin-left: 0;
  min-width: 112px;
  width: 100%;
}

.admin-user-name {
  margin-left: 0;
  text-align: center;
  width: 100%;
}

.admin-user-remark {
  box-sizing: border-box;
  margin-left: 0;
  min-width: 0;
  text-align: center;
  width: 100%;
}

.admin-user-actions {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
}

.admin-user-actions button {
  min-height: 30px;
  min-width: 52px;
  padding: 5px 8px;
}

.admin-device-list {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.admin-public-users-table td.public-user-col-devices--state,
.admin-public-users-table td.public-user-col-portfolio-push,
.admin-public-users-table td.public-user-col-wechat,
.admin-public-users-table td.public-user-col-reward {
  text-align: center;
  vertical-align: middle;
}

.admin-user-status-stack {
  align-items: center;
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
  text-align: center;
}

.admin-enable-user-button,
.admin-renew-enable-user {
  min-height: 26px;
  padding: 4px 8px;
  white-space: nowrap;
}

.admin-device-list--state {
  align-content: center;
  justify-items: center;
  min-height: 52px;
}

.admin-device-state {
  background: #eef2f6;
  border: 1px solid #dce4eb;
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  min-height: 28px;
  padding: 4px 10px;
}

.admin-device-summary {
  align-items: center;
  display: grid;
  gap: 6px;
  justify-items: center;
  margin: 0 auto;
  max-width: 132px;
  min-width: 0;
  position: relative;
}

.admin-device-summary-metrics {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.admin-device-metric {
  align-items: center;
  background: #eef2f6;
  border: 1px solid #dce4eb;
  border-radius: 999px;
  color: #4b5563;
  display: inline-flex;
  font-size: 12px;
  font-weight: 700;
  gap: 4px;
  justify-content: center;
  min-height: 26px;
  padding: 3px 8px;
  white-space: nowrap;
  width: 100%;
}

.admin-device-metric.is-bound {
  background: #dff4f1;
  border-color: #9ad7d1;
  color: #0f766e;
}

.admin-device-metric strong {
  color: var(--text);
  font-size: 12px;
}

.admin-device-manager {
  justify-self: center;
  max-width: 100%;
  position: static;
  width: 100%;
}

.admin-device-manager summary {
  list-style: none;
}

.admin-device-manager summary::-webkit-details-marker {
  display: none;
}

.admin-device-manage-button {
  align-items: center;
  background: #fff;
  border: 1px solid #cfd8e3;
  border-radius: 6px;
  color: var(--accent);
  cursor: pointer;
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  justify-content: center;
  min-height: 30px;
  padding: 4px 8px;
  user-select: none;
  white-space: nowrap;
}

.admin-device-popover {
  background: #fff;
  border: 1px solid #cbd5df;
  border-radius: 8px;
  box-shadow: 0 18px 44px rgba(31, 41, 51, 0.16);
  display: grid;
  gap: 8px;
  margin-block-start: 8px;
  max-width: 100%;
  padding: 10px;
  position: static;
  text-align: left;
  width: min(224px, 100%);
}

.admin-device-popover::before {
  content: none;
}

.admin-device-slot-row {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: 40px minmax(0, 1fr) auto;
}

.admin-device-slot-name,
.admin-device-slot-state {
  font-size: 12px;
  font-weight: 700;
  min-width: 0;
  overflow-wrap: anywhere;
}

.admin-device-slot-name {
  color: var(--muted);
}

.admin-device-slot-state {
  color: #4b5563;
}

.admin-device-slot-state.is-bound {
  color: #0f766e;
}

.admin-device-unbind {
  min-height: 28px;
  padding: 4px 8px;
  white-space: nowrap;
}

.admin-delete-user {
  color: var(--danger);
}

.admin-delete-user:hover {
  background: #fff4f2;
  border-color: #f3b8b1;
}

.admin-path-cell,
.admin-ua-cell {
  max-width: 1px;
}

.admin-empty-cell {
  color: var(--muted);
  font-weight: 600;
  height: 58px;
  text-align: center;
}

.auth-page {
  background: var(--bg);
  min-height: 100vh;
}

.auth-shell {
  display: grid;
  min-height: 100vh;
  padding: 28px;
  place-items: center;
}

.auth-stage {
  align-items: stretch;
  display: grid;
  gap: 22px;
  grid-template-columns: minmax(0, 520px) minmax(280px, 300px);
  max-width: 842px;
  width: 100%;
}

.auth-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 18px 48px rgba(31, 41, 51, 0.08);
  display: grid;
  gap: 22px;
  max-width: 520px;
  padding: 36px;
  width: 100%;
}

.auth-brand {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: center;
  min-width: 0;
  text-align: center;
}

.auth-brand .brand-logo {
  flex: 0 0 56px;
  height: 56px;
  left: auto;
  position: static;
  top: auto;
  width: 56px;
}

.auth-brand h1 {
  font-size: 34px;
  line-height: 1.15;
  min-width: 0;
  white-space: normal;
}

.auth-user {
  color: var(--text);
  font-weight: 700;
}

.auth-form {
  display: grid;
  gap: 18px;
}

.auth-form[data-modal-locked] {
  pointer-events: none;
}

.auth-form label {
  color: var(--text);
  display: grid;
  font-size: 15px;
  font-weight: 700;
  gap: 8px;
}

.auth-form input {
  font-size: 16px;
  margin-left: 0;
  min-height: 48px;
  width: 100%;
}

.auth-field-note {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}

.auth-form button {
  font-size: 17px;
  min-height: 50px;
  width: 100%;
}

.auth-turnstile {
  align-items: center;
  background: #f7fbfb;
  border: 1px solid #c9dddc;
  border-radius: 8px;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  min-height: 50px;
  padding: 6px 14px;
}

.auth-turnstile-label {
  color: var(--text);
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 900;
}

.auth-turnstile .cf-turnstile {
  flex: 0 0 auto;
  max-width: 100%;
}

.auth-access-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 18px 48px rgba(31, 41, 51, 0.06);
  display: grid;
  gap: 18px;
  padding: 30px 26px;
}

.auth-access-head {
  display: grid;
  gap: 6px;
  justify-items: center;
  text-align: center;
}

.auth-access-kicker {
  color: var(--accent-strong);
  font-size: 19px;
  font-weight: 900;
  line-height: 1.2;
}

.auth-access-head h2 {
  color: var(--text);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.25;
}

.auth-access-rule {
  background: #fff8ea;
  border: 1px solid #edcf9b;
  border-radius: 7px;
  display: grid;
  gap: 8px;
  padding: 14px;
}

.auth-access-rule p {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.55;
}

.auth-access-rule .auth-access-rule-main {
  color: var(--text);
  font-size: 15px;
  font-weight: 800;
}

.auth-merit-float {
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid #c7dcdc;
  border-radius: 8px;
  box-shadow: 0 24px 56px rgba(31, 41, 51, 0.18), 0 4px 16px rgba(31, 41, 51, 0.10);
  display: grid;
  gap: 9px;
  overflow: hidden;
  padding: 20px;
  position: fixed;
  right: max(clamp(18px, 1.6vw, 28px), calc((100vw - 1263px) / 2 - 416px));
  top: max(61px, calc((100vh - 788px) / 2 + 19px));
  width: min(390px, calc(100vw - 40px));
  z-index: 60;
}

.auth-merit-float::before {
  background: linear-gradient(90deg, #f5c64f 0%, #0d7777 100%);
  content: "";
  height: 4px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.auth-merit-float[hidden] {
  display: none;
}

.auth-merit-close {
  align-items: center;
  background: #f2f7f7;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  font-size: 21px;
  font-weight: 700;
  height: 34px;
  justify-content: center;
  line-height: 1;
  padding: 0;
  position: absolute;
  right: 10px;
  top: 10px;
  width: 34px;
}

.auth-merit-close:hover,
.auth-merit-close:focus-visible {
  background: #e4eeee;
  border-color: #c7dcdc;
  color: var(--accent-strong);
}

.auth-merit-leaderboard-head {
  display: grid;
  gap: 10px;
  justify-items: center;
}

.auth-merit-leaderboard-head h2 {
  color: var(--text);
  font-size: 21px;
  font-weight: 900;
  line-height: 1.25;
  margin: 0;
  text-align: center;
  width: 100%;
}

.auth-merit-marquee {
  align-items: center;
  background: #eef6f4;
  border: 1px solid #dcebe8;
  border-radius: 999px;
  color: var(--muted);
  display: flex;
  font-size: 13px;
  font-weight: 700;
  height: 26px;
  line-height: 1;
  max-width: 100%;
  overflow: hidden;
  position: relative;
  width: min(314px, 100%);
}

.auth-merit-marquee::before,
.auth-merit-marquee::after {
  content: "";
  height: 100%;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 34px;
  z-index: 1;
}

.auth-merit-marquee::before {
  background: linear-gradient(90deg, rgba(238, 246, 244, 1), rgba(238, 246, 244, 0));
  left: 0;
}

.auth-merit-marquee::after {
  background: linear-gradient(270deg, rgba(238, 246, 244, 1), rgba(238, 246, 244, 0));
  right: 0;
}

.auth-merit-marquee-track {
  animation: auth-merit-marquee-scroll 12s linear infinite;
  display: inline-flex;
  min-width: max-content;
}

.auth-merit-marquee-track span {
  flex: 0 0 auto;
  padding-right: 34px;
  white-space: nowrap;
}

@keyframes auth-merit-marquee-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-merit-marquee-track {
    animation: none;
  }
}

.auth-merit-rank-list {
  display: grid;
  gap: 7px;
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
}

.auth-merit-rank-row {
  align-items: center;
  border-radius: 6px;
  display: grid;
  gap: 12px;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  min-height: 54px;
  padding: 8px 10px;
}

.auth-merit-rank-row:first-child {
  background: #fff8e6;
}

.auth-merit-rank-row:nth-child(2),
.auth-merit-rank-row:nth-child(3) {
  background: #f8fafc;
}

.auth-merit-rank-badge {
  align-items: center;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  display: inline-flex;
  font-size: 14px;
  font-weight: 900;
  height: 32px;
  justify-content: center;
  width: 32px;
}

.auth-merit-rank-row:first-child .auth-merit-rank-badge {
  background: #ffe8a3;
  border-color: #e9c66c;
  color: #7a4a00;
}

.auth-merit-rank-user {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.auth-merit-rank-user strong {
  color: var(--text);
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auth-merit-rank-user span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auth-merit-rank-gain {
  color: var(--accent-strong);
  font-size: 17px;
  font-weight: 900;
  white-space: nowrap;
}

.auth-merit-note {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.55;
  margin: 0;
}

.auth-access-list {
  color: var(--muted);
  display: grid;
  font-size: 13px;
  font-weight: 700;
  gap: 8px;
  line-height: 1.5;
  margin: 0;
  padding-left: 18px;
}

.auth-access-list li {
  padding-left: 2px;
}

.auth-wechat-block {
  align-items: center;
  border-top: 1px solid var(--border);
  display: grid;
  gap: 10px;
  justify-items: center;
  padding-top: 18px;
  text-align: center;
}

.auth-wechat-block p {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}

.auth-wechat-qr {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  display: block;
  height: auto;
  padding: 6px;
  width: 142px;
}

.auth-notice {
  background: #eef8f6;
  border: 1px solid #c7e6df;
  border-radius: 6px;
  color: var(--accent-strong);
  display: grid;
  gap: 2px;
  font-weight: 700;
  justify-items: center;
  line-height: 1.45;
  margin: 0;
  padding: 9px 10px;
  text-align: center;
}

.auth-notice-line {
  color: inherit;
  display: block;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  white-space: nowrap;
}

.auth-disclaimer {
  align-items: center;
  background: #fff8ea;
  border: 1px solid #edcf9b;
  border-radius: 6px;
  color: var(--warn);
  display: flex;
  font-size: 14px;
  font-weight: 800;
  gap: 8px;
  justify-content: center;
  line-height: 1.45;
  margin: 0;
  min-height: 44px;
  padding: 8px 14px;
  text-align: center;
}

.auth-disclaimer::before {
  border: 1px solid #edcf9b;
  border-radius: 999px;
  color: #c36a09;
  content: "!";
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 900;
  height: 18px;
  justify-content: center;
  line-height: 1;
  width: 18px;
}

.auth-support-zone {
  display: grid;
  gap: 4px;
  padding: 2px 0;
}

.auth-support-row {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: auto minmax(0, 1fr);
  min-height: 34px;
}

.auth-support-label {
  background: #eef8f6;
  border: 1px solid #c7dcdc;
  border-radius: 999px;
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  min-width: 72px;
  padding: 7px 10px;
  text-align: center;
  white-space: nowrap;
}

.auth-support-text {
  color: var(--accent-strong);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.5;
  min-width: 0;
}

.auth-risk-text {
  color: var(--danger);
  font-weight: 950;
}

.auth-account-text,
.auth-feedback-text {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
}

.auth-support-feedback {
  appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-align: left;
  width: 100%;
}

.auth-support-feedback:hover .auth-support-label,
.auth-support-feedback:focus-visible .auth-support-label {
  background: #e3f3f1;
  border-color: #9dc8c6;
}

.auth-support-feedback:focus-visible {
  outline: 2px solid rgba(17, 122, 122, 0.28);
  outline-offset: 4px;
}

@media (min-width: 900px) {
  .auth-login-page .auth-shell {
    padding: 42px;
  }

  .auth-login-page .auth-stage {
    gap: 33px;
    grid-template-columns: minmax(0, 780px) minmax(360px, 450px);
    max-width: 1263px;
  }

  .auth-login-page .auth-panel {
    gap: 33px;
    max-width: 780px;
    padding: 54px;
  }

  .auth-login-page .auth-brand {
    gap: 18px;
  }

  .auth-login-page .auth-brand .brand-logo {
    flex-basis: 84px;
    height: 84px;
    width: 84px;
  }

  .auth-login-page .auth-brand h1 {
    font-size: 51px;
  }

  .auth-login-page .auth-form {
    gap: 27px;
  }

  .auth-login-page .auth-form label {
    font-size: 18px;
    gap: 12px;
  }

  .auth-login-page .auth-form input {
    font-size: 20px;
    min-height: 72px;
    padding: 10px 12px;
  }

  .auth-login-page .auth-form button {
    font-size: 22px;
    min-height: 75px;
  }

  .auth-login-page .auth-turnstile {
    min-height: 72px;
    padding: 3px 18px;
  }

  .auth-login-page .auth-turnstile-label {
    font-size: 17px;
  }

  .auth-login-page .auth-support-zone {
    gap: 4px;
  }

  .auth-login-page .auth-access-panel {
    gap: 27px;
    padding: 45px 39px;
  }

  .auth-login-page .auth-merit-float {
    top: max(42px, calc((100vh - 788px) / 2));
  }

  .auth-login-page .auth-access-head {
    gap: 9px;
  }

  .auth-login-page .auth-access-kicker {
    font-size: 29px;
  }

  .auth-login-page .auth-access-head h2 {
    font-size: 27px;
  }

  .auth-login-page .auth-access-rule {
    gap: 12px;
    padding: 21px;
  }

  .auth-login-page .auth-access-rule p {
    font-size: 16px;
  }

  .auth-login-page .auth-access-rule .auth-access-rule-main {
    font-size: 18px;
  }

  .auth-login-page .auth-access-list {
    font-size: 16px;
    gap: 12px;
    padding-left: 27px;
  }

  .auth-login-page .auth-wechat-block {
    gap: 15px;
    padding-top: 27px;
  }

  .auth-login-page .auth-wechat-block p {
    font-size: 16px;
  }

  .auth-login-page .auth-wechat-qr {
    padding: 9px;
    width: 213px;
  }
}

.auth-error {
  background: #fff4f2;
  border: 1px solid #f3b8b1;
  border-radius: 6px;
  color: var(--danger);
  line-height: 1.45;
  padding: 9px 10px;
}

.auth-rate-limit {
  display: grid;
  gap: 4px;
}

.auth-rate-limit strong {
  font-weight: 800;
}

.auth-message {
  background: #eef8f6;
  border: 1px solid #c7e6df;
  border-radius: 6px;
  color: var(--accent-strong);
  font-weight: 800;
  line-height: 1.45;
  padding: 9px 10px;
}

.auth-link {
  color: var(--accent-strong);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

.auth-link:hover {
  text-decoration: underline;
}

.auth-feedback-cta {
  align-items: stretch;
  border: 1px solid var(--accent);
  border-radius: 8px;
  box-shadow: 0 1px 0 rgba(17, 122, 122, 0.08);
  display: inline-flex;
  flex: 0 1 auto;
  max-width: 100%;
  min-height: 32px;
  overflow: hidden;
  white-space: nowrap;
}

.auth-feedback-action,
.auth-feedback-reward {
  align-items: center;
  display: inline-flex;
  font-weight: 900;
  justify-content: center;
  line-height: 1;
}

.auth-feedback-action {
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  padding: 8px 13px;
  transition: background 0.15s ease;
}

.auth-support-feedback:hover .auth-feedback-action,
.auth-support-feedback:focus-visible .auth-feedback-action {
  background: var(--accent-strong);
}

.auth-support-feedback:hover .auth-feedback-cta,
.auth-support-feedback:focus-visible .auth-feedback-cta {
  border-color: var(--accent-strong);
}

.auth-feedback-reward {
  background: #fff3d8;
  color: #b65f00;
  font-size: 13px;
  padding: 8px 11px;
}

.site-message-modal[hidden] {
  display: none;
}

.site-message-modal {
  align-items: center;
  display: grid;
  inset: 0;
  justify-items: center;
  padding: 32px;
  position: fixed;
  z-index: 2000;
}

.site-message-backdrop {
  background: rgba(15, 23, 42, 0.46);
  inset: 0;
  position: absolute;
}

.site-message-dialog {
  background: var(--surface);
  border: 1px solid rgba(17, 122, 122, 0.2);
  border-radius: 8px;
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.22);
  display: grid;
  gap: 18px;
  max-width: min(720px, calc(100vw - 40px));
  padding: 40px 44px;
  position: relative;
  width: 100%;
}

.site-message-kicker {
  color: var(--accent-strong);
  font-size: 13px;
  font-weight: 800;
}

.site-message-dialog h2 {
  color: var(--text);
  font-size: 34px;
  line-height: 1.25;
  white-space: normal;
}

.site-message-dialog p {
  color: var(--text);
  font-size: 18px;
  line-height: 1.85;
  margin: 0;
  white-space: pre-line;
}

.site-message-dialog p strong {
  color: var(--text);
  font-weight: 900;
}

.custom-portfolio-name-dialog {
  gap: 14px;
  max-width: min(460px, calc(100vw - 32px));
  padding: 24px 26px;
}

.custom-portfolio-name-dialog h2 {
  font-size: 22px;
  margin: 0;
}

.custom-portfolio-name-field {
  display: grid;
  gap: 8px;
}

.custom-portfolio-name-field span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.custom-portfolio-name-field input {
  border: 1px solid #cbd6dd;
  border-radius: 6px;
  color: var(--text);
  font: inherit;
  min-height: 38px;
  padding: 8px 10px;
  width: 100%;
}

.custom-portfolio-name-field input:focus {
  border-color: var(--accent);
  outline: 2px solid rgba(17, 122, 122, 0.14);
}

.custom-portfolio-name-error {
  color: #c0392b !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}

.custom-portfolio-name-actions {
  margin-top: 4px;
}

.site-message-thanks {
  background: #fff8e6;
  border: 1px solid #f2d7a5;
  border-radius: 6px;
  color: #805100;
  font-weight: 800;
  line-height: 1.45;
  padding: 9px 10px;
}

.site-message-actions {
  display: flex;
  justify-content: flex-end;
}

.merit-dialog .site-message-actions {
  justify-content: center;
}

.site-message-actions button {
  font-size: 18px;
  min-height: 50px;
  min-width: 128px;
}

.feedback-dialog {
  gap: 16px;
  max-width: min(600px, calc(100vw - 40px));
  padding: 30px 34px;
}

.feedback-dialog h2 {
  font-size: 26px;
  line-height: 1.3;
}

.feedback-form-panel,
.feedback-form,
.feedback-success {
  display: grid;
  gap: 16px;
}

.feedback-form-panel[hidden],
.feedback-success[hidden] {
  display: none;
}

.feedback-type-options {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.feedback-type-options label {
  min-width: 0;
  position: relative;
}

.feedback-type-options input {
  height: 1px;
  left: 8px;
  margin: 0;
  opacity: 0;
  position: absolute;
  top: 8px;
  width: 1px;
}

.feedback-type-options span {
  align-items: center;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  display: flex;
  font-size: 14px;
  font-weight: 800;
  justify-content: center;
  min-height: 40px;
  padding: 8px 10px;
  text-align: center;
  white-space: nowrap;
}

.feedback-type-options input:checked + span {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.feedback-type-options input:focus-visible + span {
  outline: 2px solid rgba(17, 122, 122, 0.32);
  outline-offset: 2px;
}

.feedback-field {
  color: var(--text);
  display: grid;
  font-size: 14px;
  font-weight: 800;
  gap: 8px;
}

.feedback-field span {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.feedback-field input,
.feedback-field textarea {
  border: 1px solid var(--border);
  border-radius: 6px;
  font: inherit;
  margin-left: 0;
  padding: 9px 10px;
  width: 100%;
}

.feedback-field textarea {
  min-height: 132px;
  resize: vertical;
}

.feedback-image-field input[type="file"] {
  background: #f8fafc;
  cursor: pointer;
  font-size: 13px;
}

.feedback-image-list {
  display: grid;
  gap: 6px;
}

.feedback-image-list:empty,
.feedback-image-list[hidden] {
  display: none;
}

.feedback-image-item {
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
  overflow-wrap: anywhere;
  padding: 8px 10px;
}

.feedback-trap {
  display: none;
}

.feedback-helper {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.feedback-status {
  color: var(--accent-strong);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
  min-height: 19px;
}

.feedback-status:empty {
  display: none;
}

.feedback-status[data-tone="error"] {
  color: var(--danger);
}

.feedback-actions {
  gap: 10px;
}

.feedback-actions button {
  font-size: 15px;
  min-height: 42px;
  min-width: 96px;
}

.feedback-success p {
  font-size: 16px;
  line-height: 1.7;
}

.feedback-success-meta {
  background: #f2fbfa;
  border: 1px solid #c7dcdc;
  border-radius: 6px;
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.55;
  padding: 10px 12px;
}

.merit-dialog {
  max-width: min(760px, calc(100vw - 40px));
}

.merit-confirm-modal {
  padding: 24px;
  z-index: 2200;
}

.merit-confirm-dialog {
  gap: 16px;
  max-width: min(460px, calc(100vw - 32px));
  padding: 28px 30px;
}

.merit-confirm-dialog h2 {
  font-size: 22px;
  line-height: 1.35;
}

.merit-confirm-body {
  display: grid;
  gap: 8px;
}

.merit-confirm-body p {
  color: var(--text);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
  white-space: normal;
}

.merit-confirm-actions {
  gap: 10px;
}

.merit-confirm-actions button {
  font-size: 15px;
  min-height: 42px;
  min-width: 92px;
}

.merit-dialog-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.merit-dialog-summary span,
.merit-redeem-status {
  background: #f2fbfa;
  border: 1px solid #c7dcdc;
  border-radius: 6px;
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
  padding: 7px 9px;
}

.merit-redeem-status:empty {
  display: none;
}

.merit-affordable-filter {
  align-items: center;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 8px;
  display: inline-grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
  justify-self: start;
  min-height: 40px;
  padding: 7px 10px 7px 12px;
  position: relative;
}

.merit-affordable-filter span:first-child {
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.merit-affordable-filter input {
  height: 1px;
  margin: 0;
  opacity: 0;
  position: absolute;
  width: 1px;
}

.merit-affordable-switch {
  background: #d7dee5;
  border-radius: 999px;
  height: 22px;
  position: relative;
  transition: background 0.16s ease;
  width: 40px;
}

.merit-affordable-switch::after {
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.24);
  content: "";
  height: 18px;
  left: 2px;
  position: absolute;
  top: 2px;
  transition: transform 0.16s ease;
  width: 18px;
}

.merit-affordable-filter input:checked + .merit-affordable-switch {
  background: var(--accent);
}

.merit-affordable-filter input:checked + .merit-affordable-switch::after {
  transform: translateX(18px);
}

.merit-affordable-filter input:focus-visible + .merit-affordable-switch {
  outline: 2px solid rgba(17, 122, 122, 0.32);
  outline-offset: 2px;
}

.merit-entitlement-hints {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.merit-entitlement-hints #meritDialogBalance {
  background: #f2fbfa;
  border: 1px solid #c7dcdc;
  border-radius: 6px;
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
  padding: 7px 9px;
}

.merit-entitlement-hint,
.merit-entitlement-empty {
  background: #f2fbfa;
  border: 1px solid #c7dcdc;
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  padding: 7px 9px;
}

.merit-entitlement-hint.is-expiring {
  background: #fff1f1;
  border-color: #efb9b9;
  color: #8a2424;
}

.merit-code-form {
  border: 1px solid var(--border);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  padding: 12px;
}

.merit-code-form label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.merit-code-row {
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.merit-code-row input {
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 15px;
  min-width: 260px;
  padding: 10px 11px;
  text-transform: uppercase;
}

.merit-code-row button {
  min-height: 42px;
  white-space: nowrap;
}

.merit-product-list {
  display: grid;
  gap: 16px;
  max-height: min(58vh, 560px);
  overflow: auto;
  padding-right: 4px;
}

.merit-product-group {
  display: grid;
  gap: 8px;
}

.merit-product-group h3 {
  color: var(--muted);
  font-size: 14px;
  margin: 0;
}

.merit-product-card {
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 10px 12px;
}

.merit-product-body {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.merit-product-body strong,
.merit-product-body span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.merit-product-body strong {
  color: var(--text);
  font-size: 15px;
}

.merit-product-body span,
.merit-empty {
  color: var(--muted);
  font-size: 13px;
}

@media (max-width: 1360px) {
  .admin-public-users-body {
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .admin-public-users-table-panel {
    border-right: 0;
    height: var(--admin-public-users-column-height);
    max-height: var(--admin-public-users-column-height);
    max-width: none;
  }

  .admin-public-users-wrap {
    height: auto;
  }

  .admin-security-matrix {
    border-left: 0;
    border-right: 0;
    border-top: 1px solid var(--border);
    box-shadow: none;
    height: var(--admin-public-users-column-height);
    margin-left: 0;
    margin-right: 0;
    max-height: var(--admin-public-users-column-height);
    overflow: hidden;
  }

  .admin-public-users-side {
    border-left: 0;
    border-top: 1px solid var(--border);
    height: var(--admin-public-users-column-height);
    max-height: var(--admin-public-users-column-height);
    overflow: auto;
  }
}

@media (min-width: 861px) and (max-width: 1440px) {
  body[data-admin-view="true"] .app-header {
    grid-template-columns: 220px minmax(0, 1fr);
    padding: 8px 12px;
  }

  body[data-admin-view="true"] .brand-heading {
    gap: 10px;
    min-height: 52px;
  }

  body[data-admin-view="true"] .brand-logo {
    flex-basis: 52px;
    height: 52px;
    width: 52px;
  }

  body[data-admin-view="true"] .brand-heading h1 {
    font-size: 34px;
  }

  body[data-admin-view="true"] .header-toolbar {
    padding-left: 8px;
  }

  body[data-admin-view="true"] .layout {
    gap: 10px;
    padding: 10px 12px 14px;
  }

  body[data-admin-view="true"] .workspace {
    gap: 10px;
    grid-template-columns: 220px minmax(0, 1fr);
  }

  body[data-admin-view="true"] .side-panel {
    height: calc(100vh - 95px);
    min-height: 620px;
    padding: 12px;
  }

  body[data-admin-view="true"] .side-panel > h2,
  body[data-admin-view="true"] .side-nav-section > h2 {
    font-size: 21px;
  }

  body[data-admin-view="true"] .tab-list button {
    font-size: 17px;
    min-height: 36px;
    padding: 5px 9px;
  }

  body[data-admin-view="true"] .side-control-row {
    grid-template-columns: minmax(0, 1fr) 58px 30px;
  }

  body[data-admin-view="true"] .side-control-row input,
  body[data-admin-view="true"] .lof-trade-filter input {
    width: 58px;
  }

  body[data-admin-view="true"] .data-panel-header {
    min-height: 58px;
    padding: 8px 12px;
  }

  body[data-admin-view="true"] .table-refresh-controls {
    gap: 6px;
  }

  body.admin-page .admin-topbar,
  body.admin-page .admin-layout-toolbar {
    padding-left: 12px;
    padding-right: 12px;
  }

  body.admin-page .admin-dashboard.grid-stack {
    margin: 10px 12px 14px;
  }
}

@media (max-width: 1180px) {
  .future-calc-hero,
  .portfolio-report-main-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .portfolio-penetration-panel {
    width: 100%;
  }

  .penetration-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .penetration-industry-section,
  .penetration-asset-section,
  .penetration-stock-section,
  .penetration-fund-type-section,
  .penetration-stock-distribution-section--panel {
    grid-column: auto;
    grid-row: auto;
    height: auto;
  }

  .portfolio-composition-overview__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .penetration-stock-list {
    height: auto !important;
  }

  .custom-portfolio-switcher {
    align-items: stretch;
    flex-direction: column;
  }

  .custom-portfolio-switcher-main {
    align-items: flex-start;
    flex-direction: column;
  }

  .custom-portfolio-chip-list {
    max-width: 100%;
    width: 100%;
  }

  .custom-portfolio-manager-actions {
    flex-wrap: wrap;
  }

  .future-contract-matrix {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .today-market-board {
    max-width: 340px;
    width: 340px;
  }

  .market-dashboard-content {
    grid-template-columns: minmax(0, 1fr);
  }

  .market-dashboard-top-row,
  .industry-strength-board {
    grid-column: auto;
    grid-row: auto;
  }

  .industry-strength-overview {
    grid-template-columns: minmax(0, 1fr);
  }

  .industry-strength-board--with-trend {
    grid-template-areas:
      "head"
      "tabs"
      "matrix"
      "trend";
    grid-template-columns: minmax(0, 1fr);
  }

  .industry-strength-board--with-trend .industry-strength-trend {
    margin: 0 12px 12px;
  }

  .industry-strength-board--with-trend .industry-strength-trend-header,
  .industry-strength-board--with-trend .industry-strength-trend-row {
    grid-template-columns: minmax(110px, 180px) 220px 118px minmax(330px, 510px);
    min-width: 778px;
    width: fit-content;
  }

  .industry-strength-board--with-trend .industry-strength-trend-row strong {
    font-size: 13px;
  }

  .industry-strength-board--with-trend .industry-strength-trend-row p {
    font-size: 12px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .industry-strength-board--with-trend .industry-strength-sparkline {
    max-width: 184px;
  }

  .industry-strength-period-grid {
    overflow-x: auto;
  }

  .industry-strength-matrix-table {
    min-width: 1180px;
  }
}

@media (max-width: 860px) {
  body {
    background: #eef3f5;
  }

  .future-family-tabs {
    grid-template-columns: minmax(0, 1fr);
  }

  .future-contract-matrix {
    grid-template-columns: minmax(0, 1fr);
  }

  .future-overlap-stage {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .future-image-card--contract {
    justify-self: stretch;
    width: auto;
  }

  .future-table-hero,
  .future-table-main .future-detail-card,
  .future-kline-card {
    min-height: 0;
  }

  .future-kline-chart {
    height: 320px;
    max-height: 320px;
    min-height: 0;
  }

  .future-table-main .future-basis-chart svg {
    height: 220px;
  }

  .future-calc-title {
    align-items: flex-start;
    flex-direction: column;
  }

  .market-dashboard-top-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .today-market-board {
    max-width: 340px;
    width: 100%;
  }

  .industry-strength-board {
    margin-top: 10px;
  }

  .industry-strength-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
    min-height: 44px;
  }

  .industry-strength-title {
    gap: 5px;
  }

  .industry-strength-title strong {
    font-size: 20px;
  }

  .industry-strength-meta-bar {
    justify-content: flex-start;
  }

  .industry-strength-incomplete-notice {
    border-radius: 8px;
    white-space: normal;
  }

  .industry-strength-tabs {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .industry-strength-tabs button {
    font-size: 11px;
    min-height: 30px;
    padding: 4px 3px;
  }

  .industry-strength-matrix {
    padding: 10px;
  }

  .industry-strength-period-grid {
    padding: 8px;
  }

  .industry-strength-row {
    min-height: 34px;
  }

  .industry-strength-change {
    align-self: center;
  }

  .industry-strength-heat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .industry-strength-heat-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .industry-strength-summary-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .industry-strength-trend {
    margin: 0 10px 10px;
  }

  .industry-strength-board--with-trend .industry-strength-trend {
    margin: 0 10px 10px;
  }

  .industry-strength-trend-row {
    min-width: 810px;
  }

  .industry-strength-board--with-trend .industry-strength-trend-row {
    min-width: 810px;
  }

  .app-header {
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 1px 0 var(--border);
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    min-height: 104px;
    padding: 8px 12px 10px;
    position: sticky;
    top: 0;
    z-index: 30;
  }

  .app-header .brand-heading {
    display: flex;
    gap: 10px;
    justify-content: flex-start;
    min-height: 0;
  }

  .app-header .header-toolbar {
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    padding-left: 0;
    position: static;
  }

  .app-header .brand-heading h1 {
    font-size: 32px;
    font-weight: 800;
    line-height: 1.08;
    overflow: hidden;
    position: static;
    text-align: left;
    text-overflow: ellipsis;
  }

  .app-header .brand-logo {
    flex-basis: 62px;
    height: 62px;
    position: static;
    width: 62px;
  }

  .header-actions,
  .table-refresh-controls {
    align-items: center;
    flex-direction: row;
  }

  .table-refresh-controls {
    display: none;
  }

  #toggleAutoRefresh,
  .auto-refresh-control,
  #autoRefreshStatus {
    display: none;
  }

  .header-actions {
    flex: 0 0 auto;
    flex-wrap: wrap;
    margin-left: 0;
  }

  .logout-form {
    align-items: center;
    flex-direction: row;
  }

  .header-actions button,
  .table-refresh-controls button,
  .public-account-trigger {
    min-height: 30px;
    padding: 0 10px;
  }

  .public-account-trigger {
    border-radius: 999px;
    justify-content: center;
    width: auto;
  }

  .public-account-popover {
    padding: 8px;
    position: absolute;
    text-align: left;
    top: calc(100% + 6px);
  }

  .public-user-label {
    max-width: none;
    text-align: center;
  }

  .public-expiry-label {
    max-width: none;
    text-align: center;
  }

  .public-account-logout {
    min-height: 34px;
  }

  .feedback-entry--header {
    font-size: 13px;
    min-width: 0;
    padding: 0 10px;
  }

  .layout {
    gap: 8px;
    padding: 8px 10px 12px;
  }

  .public-risk-disclaimer {
    border-radius: 6px;
    font-size: 13px;
    margin: 8px 10px 0;
    padding: 8px 10px;
    text-align: left;
  }

  .workspace {
    display: block;
    grid-template-columns: 1fr;
  }

  .side-panel,
  .data-panel {
    box-shadow: 0 6px 18px rgba(31, 41, 51, 0.05);
  }

  .side-panel {
    height: auto;
    min-height: 0;
    overflow: visible;
    padding: 10px;
  }

  .side-panel > h2,
  .side-nav-section > h2 {
    display: none;
  }

  .side-nav-shell {
    gap: 8px;
    padding: 9px;
  }

  .side-nav-shell + .side-nav-shell {
    margin-top: 10px;
  }

  .side-nav-shell-head h2 {
    display: block;
    font-size: 15px;
  }

  .side-nav-shell-head span {
    font-size: 11px;
  }

  .side-nav-shell .side-nav-section {
    padding: 0;
    background: transparent;
    border: 0;
  }

  .side-nav-shell .side-nav-section > h2,
  .side-nav-section--strategy-list > h2 {
    display: none;
  }

  .side-nav-section + .side-nav-section,
  .side-controls + .side-nav-section {
    margin-top: 16px;
    padding-top: 12px;
  }

  .side-nav-section + .side-nav-section.side-nav-section--strategy,
  .side-controls + .side-nav-section.side-nav-section--strategy,
  .side-nav-section + .side-nav-section.side-nav-section--tech-indicator,
  .side-controls + .side-nav-section.side-nav-section--tech-indicator {
    margin-top: 16px;
    padding-top: 12px;
  }

  .side-nav-section--strategy::before,
  .side-nav-section--tech-indicator::before {
    background: linear-gradient(
      90deg,
      #d4e3e3 0 calc(50% - 26px),
      var(--accent) calc(50% - 26px) calc(50% + 26px),
      #d4e3e3 calc(50% + 26px) 100%
    );
    height: 2px;
  }

  .side-nav-shell .side-nav-section--strategy::before,
  .side-nav-shell .side-nav-section--tech-indicator::before {
    display: none;
  }

  .tab-list {
    gap: 6px;
    grid-template-columns: 1fr 1fr;
    margin-top: 0;
  }

  .tab-list button {
    font-size: 16px;
    font-weight: 800;
    min-height: 42px;
    padding: 0 10px;
  }

  .mobile-filter-bar {
    display: grid;
    gap: 8px;
    margin-top: 8px;
  }

  .mobile-filter-main {
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) 42px;
  }

  .mobile-code-search input {
    font-size: 15px;
    font-weight: 650;
    margin: 0;
    min-height: 38px;
    width: 100%;
  }

  .mobile-refresh-button {
    align-items: center;
    background: var(--accent);
    border-color: var(--accent);
    border-radius: 7px;
    color: #fff;
    display: inline-flex;
    justify-content: center;
    min-height: 38px;
    padding: 0;
    width: 42px;
  }

  .mobile-refresh-button:disabled {
    cursor: wait;
    opacity: 0.72;
  }

  .mobile-refresh-icon {
    fill: none;
    height: 19px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.4;
    width: 19px;
  }

  .mobile-filter-chips {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .mobile-filter-chips::-webkit-scrollbar {
    display: none;
  }

  .mobile-filter-chip {
    appearance: none;
    background: #e8f4f4;
    border: 1px solid #b7dcdc;
    border-radius: 999px;
    color: var(--accent-strong);
    cursor: pointer;
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    min-height: 34px;
    padding: 7px 9px;
    white-space: nowrap;
  }

  .mobile-filter-chip:focus-visible {
    outline: 2px solid rgba(17, 122, 122, 0.28);
    outline-offset: 2px;
  }

  .mobile-filter-chip--off,
  .mobile-filter-chip--muted {
    background: #f8fafc;
    color: var(--muted);
  }

  .side-controls {
    display: none;
    flex: none;
    margin-top: 10px;
    min-height: 0;
    overflow: visible;
  }

  .side-panel.mobile-filters-open::before {
    background: rgba(31, 41, 51, 0.18);
    bottom: 0;
    content: "";
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 70;
  }

  .side-panel.mobile-filters-open .side-controls {
    display: grid;
    background: var(--surface);
    border: 0;
    border-radius: 14px 14px 0 0;
    bottom: 0;
    box-shadow: 0 -14px 34px rgba(31, 41, 51, 0.18);
    gap: 12px;
    left: 0;
    margin: 0;
    max-height: min(78vh, 620px);
    overflow: auto;
    padding: 10px 12px 16px;
    position: fixed;
    right: 0;
    width: 100%;
    z-index: 71;
  }

  .side-panel.mobile-filters-open .side-control-group--locator,
  .side-panel.mobile-filters-open .filter-reset-row {
    display: none;
  }

  .mobile-filter-sheet-handle {
    background: #d8e2e8;
    border-radius: 999px;
    display: block;
    height: 4px;
    justify-self: center;
    width: 38px;
  }

  .mobile-filter-sheet-head {
    align-items: center;
    display: flex;
    justify-content: space-between;
  }

  .mobile-filter-sheet-head strong {
    color: var(--text);
    font-size: 17px;
  }

  .mobile-filter-sheet-head button {
    border: 0;
    color: var(--accent);
    font-size: 13px;
    font-weight: 800;
    min-height: 30px;
    padding: 0 2px;
  }

  .side-panel.mobile-filters-open .side-control-group {
    display: grid;
    gap: 8px;
    padding: 0;
  }

  .side-panel.mobile-filters-open .side-control-group + .side-control-group {
    border-top: 0;
    padding-top: 0;
  }

  .mobile-filter-sheet-tip {
    align-items: center;
    background: #f2f7f5;
    border: 1px solid #d8e9e3;
    border-radius: 8px;
    color: #527066;
    display: flex;
    gap: 7px;
    min-height: 34px;
    padding: 8px 10px;
  }

  .mobile-filter-sheet-tip span {
    color: inherit;
    font-size: 12px;
    font-weight: 650;
  }

  .mobile-filter-sheet-tip-icon {
    align-items: center;
    background: var(--accent);
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    flex: 0 0 16px;
    height: 16px;
    justify-content: center;
    line-height: 1;
    width: 16px;
  }

  .mobile-filter-sheet-actions {
    background: var(--surface);
    display: grid;
    gap: 8px;
    grid-template-columns: 1fr 1fr;
    margin-top: 2px;
    padding-top: 4px;
    position: sticky;
    bottom: 0;
  }

  .mobile-filter-sheet-actions button {
    min-height: 38px;
  }

  .side-control-row {
    grid-template-columns: minmax(0, 1fr) minmax(56px, 72px) 30px;
    min-height: 42px;
  }

  .side-control-row input {
    min-height: 38px;
    width: 100%;
  }

  .side-control-text {
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .data-panel {
    margin-top: 8px;
    overflow: hidden;
  }

  .data-panel .data-panel-watermark {
    font-size: var(--watermark-font-size, clamp(58px, 18vw, 104px));
    max-width: calc(100% - 24px);
  }

  .data-panel-header {
    align-items: flex-start;
    min-height: 0;
    padding: 10px 12px;
  }

  #activeTableTitle {
    font-size: 21px;
  }

  .active-table-meta {
    gap: 5px;
    line-height: 1.35;
  }

  .active-table-meta-main,
  .active-table-meta-note {
    font-size: 14px;
  }

  .active-table-meta-note {
    display: none;
  }

  .active-table-filter-summary {
    display: block;
    flex: 0 1 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .active-table-meta-chip {
    display: none;
  }

  .data-panel .table-wrap {
    height: clamp(420px, calc(100vh - 330px), 720px);
    max-height: clamp(420px, calc(100vh - 330px), 720px);
  }

  .portfolio-report-panel {
    grid-auto-rows: max-content;
    height: clamp(420px, calc(100vh - 330px), 720px);
    max-height: clamp(420px, calc(100vh - 330px), 720px);
    padding: 12px;
  }

  .portfolio-report-toolbar {
    align-items: center;
    justify-content: flex-start;
  }

  .portfolio-report-toolbar button {
    min-height: 28px;
  }

  .portfolio-refresh-actions {
    gap: 6px;
    justify-content: flex-start;
  }

  .portfolio-report-grid,
  .portfolio-report-grid--holding {
    grid-template-columns: 1fr;
  }

  .portfolio-report-grid--holding {
    grid-template-columns: max-content;
  }

  .portfolio-report-figure a {
    min-height: 160px;
  }

  .portfolio-report-section--without-title {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr;
    justify-content: stretch;
    max-width: 100%;
    overflow-x: visible;
    overflow-y: visible;
    padding-bottom: 0;
    width: 100%;
  }

  .portfolio-report-section--without-title #portfolioHoldingsGrid {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
  }

  .portfolio-report-section--without-title #portfolioHoldingsGrid > .portfolio-holdings-card {
    display: inline-block;
    height: auto;
    width: max-content;
  }

  .portfolio-report-section--without-title #portfolioPerformancePanel {
    max-width: min(100%, var(--portfolio-main-row-width, 100%));
    min-width: 0;
    overflow: hidden;
    width: min(100%, var(--portfolio-main-row-width, 100%));
  }

  .portfolio-performance-panel {
    max-width: min(100%, var(--portfolio-main-row-width, 100%));
    min-width: 0;
    width: min(100%, var(--portfolio-main-row-width, 100%));
  }

  .portfolio-performance-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .portfolio-performance-heading,
  .portfolio-performance-title-row {
    width: 100%;
  }

  .portfolio-performance-status--fund-title {
    max-width: 100%;
    min-width: 0;
  }

  .portfolio-performance-controls {
    justify-content: start;
    justify-self: stretch;
    width: 100%;
  }

  .portfolio-performance-toolbar {
    justify-content: stretch;
    width: 100%;
  }

  .portfolio-performance-benchmark {
    justify-content: space-between;
    min-width: 0;
    width: 100%;
  }

  .portfolio-performance-benchmark select {
    flex: 1;
    max-width: none;
    min-width: 0;
  }

  .portfolio-performance-subject,
  .portfolio-performance-range,
  .portfolio-performance-more-range,
  .portfolio-performance-custom-start,
  .portfolio-performance-mode {
    display: grid;
    width: 100%;
  }

  .portfolio-performance-subject {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .portfolio-performance-range {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .portfolio-performance-more-range {
    grid-template-columns: minmax(0, 1fr);
  }

  .portfolio-performance-more-range select {
    min-width: 0;
    width: 100%;
  }

  .portfolio-performance-mode {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-left: 0;
  }

  .portfolio-performance-custom-start {
    grid-template-columns: max-content minmax(0, 1fr);
  }

  .portfolio-performance-custom-start label {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
  }

  .portfolio-performance-custom-start input {
    min-width: 0;
    width: 100%;
  }

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

  th,
  td {
    padding: 9px 10px;
  }

  th {
    background: #eef4f4;
  }

  .auth-shell {
    padding: 18px;
  }

  .auth-merit-float {
    bottom: 14px;
    left: 14px;
    max-height: min(440px, calc(100vh - 28px));
    overflow: auto;
    padding: 16px;
    right: 14px;
    top: auto;
    width: auto;
  }

  .auth-stage {
    gap: 12px;
    grid-template-columns: 1fr;
    max-width: 520px;
  }

  .auth-panel {
    max-width: 100%;
    padding: 28px 22px;
  }

  .auth-turnstile {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }

  .auth-support-row {
    align-items: start;
    gap: 7px;
    grid-template-columns: 1fr;
  }

  .auth-support-label {
    justify-self: start;
  }

  .auth-disclaimer {
    align-items: stretch;
    flex-direction: column;
  }

  .auth-feedback-action {
    width: auto;
  }

  .auth-brand .brand-logo {
    flex-basis: 52px;
    height: 52px;
    width: 52px;
  }

  .auth-brand h1 {
    font-size: 28px;
  }

  .auth-access-panel {
    gap: 14px;
    padding: 22px;
  }

  .auth-access-kicker {
    font-size: 18px;
  }

  .auth-access-head h2 {
    font-size: 18px;
  }

  .auth-wechat-block {
    align-items: center;
    grid-template-columns: auto minmax(0, 1fr);
    justify-items: start;
    text-align: left;
  }

  .auth-wechat-qr {
    width: 104px;
  }

  .site-message-modal {
    padding: 18px;
  }

  .site-message-dialog {
    max-width: calc(100vw - 24px);
    padding: 30px 24px;
  }

  .site-message-dialog h2 {
    font-size: 27px;
  }

  .site-message-dialog p {
    font-size: 16px;
  }

  .site-message-actions button {
    width: 100%;
  }

  .merit-code-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .feedback-dialog {
    max-height: calc(100vh - 36px);
    overflow: auto;
    padding: 24px 18px;
  }

  .feedback-type-options {
    grid-template-columns: 1fr 1fr;
  }

  .feedback-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .merit-confirm-dialog h2 {
    font-size: 22px;
  }

  .merit-confirm-actions button {
    flex: 1;
    width: auto;
  }

  .portfolio-push-risk-actions button {
    flex: 1;
    width: auto;
  }

  .admin-topbar,
  .admin-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-actions label {
    align-items: stretch;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-actions select {
    margin-left: 0;
    width: 100%;
  }

  .admin-layout-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-layout-toolbar-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-panel-title {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-panel-actions {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .admin-public-user-search {
    flex: 1 1 100%;
  }

  .admin-public-user-search input {
    flex: 1 1 auto;
    width: 100%;
  }

  .admin-stat-grid,
  .admin-grid {
    grid-template-columns: 1fr;
  }

  .admin-maintenance-body {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .admin-maintenance-command-row {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .admin-strategy-control-card {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .admin-strategy-control-list {
    max-width: 100%;
    width: 100%;
  }

  #strategyTrackingRefreshStatus,
  #realNavStatus {
    justify-self: start;
  }

  .admin-site-preview {
    border-left: 0;
    border-top: 1px solid var(--border);
  }

  .admin-site-preview-head {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-login-notice-grid {
    grid-template-columns: 1fr;
  }

  .admin-login-notice-message {
    grid-column: auto;
  }

  .admin-merit-code-form {
    grid-template-columns: 1fr;
  }

  .admin-merit-code-note {
    grid-column: auto;
  }

  .admin-merit-code-tables > .admin-sub-content--tables {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-merit-wechat-body {
    justify-items: stretch;
    width: auto;
  }

  .admin-merit-wechat-grid {
    grid-template-columns: 1fr;
    width: auto;
  }

  .admin-merit-wechat-grid .admin-check-field,
  .admin-merit-wechat-grid .admin-message-field,
  .admin-merit-wechat-grid .admin-message-field:has(#meritWechatAgentid),
  .admin-merit-wechat-grid .admin-message-field:has(#meritWechatTimeout),
  .admin-merit-wechat-test-message {
    grid-column: auto;
    width: 100%;
  }

  .admin-merit-wechat-state,
  .admin-merit-wechat-products {
    width: auto;
  }

  .admin-password-reset-smtp-body {
    grid-template-columns: 1fr;
  }

  .admin-password-reset-smtp-body .admin-check-field,
  .admin-password-reset-smtp-body .admin-message-field,
  .admin-password-reset-smtp-body .admin-password-reset-smtp-port {
    width: 100%;
  }

  .admin-login-notice-actions {
    align-items: stretch;
    grid-column: auto;
    grid-row: auto;
  }

  .admin-public-users-body {
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .admin-public-users-table-panel {
    border-right: 0;
    height: var(--admin-public-users-column-height);
    max-height: var(--admin-public-users-column-height);
    max-width: none;
  }

  .admin-public-users-wrap {
    height: auto;
  }

  .admin-security-matrix {
    border-left: 0;
    border-right: 0;
    border-top: 1px solid var(--border);
    box-shadow: none;
    height: var(--admin-public-users-column-height);
    margin-left: 0;
    margin-right: 0;
    max-height: var(--admin-public-users-column-height);
    overflow: hidden;
  }

  .admin-security-grid,
  .admin-security-metrics {
    grid-template-columns: 1fr;
  }

  .admin-public-users-side {
    border-left: 0;
    border-top: 1px solid var(--border);
    height: var(--admin-public-users-column-height);
    max-height: var(--admin-public-users-column-height);
    overflow: auto;
  }

  .admin-user-summary,
  .admin-online-summary,
  .admin-public-user-create {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .admin-online-list {
    max-height: 320px;
  }

  .admin-maintenance-actions {
    flex-direction: column;
  }

  .admin-public-user-create .admin-check-field {
    padding-top: 0;
  }

  .admin-create-actions {
    flex-direction: column;
  }

  .strategy-stats-header,
  .strategy-tracking-toolbar {
    align-items: stretch;
    display: grid;
    justify-content: stretch;
  }

  .strategy-tracking-toolbar {
    margin-left: 0;
  }

  .strategy-tracking-status {
    text-align: left;
  }

  .admin-actions label,
  .admin-actions select,
  .admin-actions button,
  .admin-link-button,
  .admin-panel-actions button,
  .admin-maintenance-actions button,
  .admin-strategy-control-card button,
  .admin-login-notice-actions button,
  .admin-create-actions button {
    width: 100%;
  }
}

/* 低波稳健策略图表控件：覆盖全局 input 宽度，避免单选/复选框与文字被撑开。 */
.strategy-chart-controls {
  gap: 10px 14px;
}

.strategy-chart-mode,
.strategy-chart-log {
  gap: 4px;
  white-space: nowrap;
}

.strategy-chart-mode input,
.strategy-chart-log input {
  flex: 0 0 auto;
  height: auto;
  padding: 0;
  width: auto;
}

.strategy-chart-custom-legend {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  justify-content: center;
  margin: 0 0 10px;
  min-height: 24px;
}

.strategy-chart-custom-legend[hidden],
.strategy-range-summary[hidden],
.strategy-chart-canvas-shell[hidden] {
  display: none !important;
}

.strategy-chart-legend-item {
  align-items: center;
  color: var(--muted);
  display: inline-flex;
  font-size: 14px;
  font-weight: 700;
  gap: 7px;
  white-space: nowrap;
}

.strategy-chart-legend-dot {
  border: 2px solid currentColor;
  border-radius: 50%;
  display: inline-block;
  height: 15px;
  width: 15px;
}

.strategy-chart-legend-dot--benchmark {
  color: #ff0000;
}

.strategy-chart-legend-dot--strategy {
  color: #2776b6;
}

.strategy-chart-legend-dot--created {
  background: #2175ee;
  border-color: #2175ee;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.72);
}

.strategy-chart-return-layout {
  min-width: 0;
}

.strategy-chart-canvas-shell {
  min-height: 336px;
  min-width: 0;
}

.strategy-chart-canvas-shell canvas {
  height: 100% !important;
  width: 100% !important;
}

.strategy-chart-wrapper--range-summary {
  --strategy-range-summary-lift: 34px;
  min-height: 0;
  max-width: none;
  width: 80%;
}

.strategy-chart-wrapper--range-summary .strategy-chart-return-layout {
  align-items: stretch;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) 260px;
}

.strategy-chart-wrapper--range-summary .strategy-chart-canvas-shell {
  height: 300px;
  min-height: 0;
}

.strategy-chart-wrapper--range-summary canvas {
  max-height: none;
}

.strategy-chart-wrapper--range-summary .strategy-range-summary {
  display: flex;
  flex-direction: column;
  height: calc(100% + var(--strategy-range-summary-lift));
  margin-top: calc(-1 * var(--strategy-range-summary-lift));
}

.strategy-chart-wrapper--range-summary .strategy-range-summary-head,
.strategy-chart-wrapper--range-summary .strategy-range-summary-hero {
  border-bottom: 1px solid var(--border);
  border-right: 0;
}

.strategy-chart-wrapper--range-summary .strategy-range-summary-list {
  display: block;
}

.strategy-chart-wrapper--range-summary .strategy-range-summary-row {
  border-bottom: 1px solid var(--border);
  border-right: 0;
}

.strategy-chart-wrapper--range-summary .strategy-range-summary-row:last-child {
  border-bottom: 0;
}

.strategy-range-summary {
  background: #fbfcfd;
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.strategy-range-summary-head {
  background: #eef7f7;
  border-bottom: 1px solid var(--border);
  padding: 12px 12px 11px;
}

.strategy-range-summary-eyebrow {
  color: var(--accent-strong);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 4px;
}

.strategy-range-summary-date {
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
}

.strategy-range-summary-note {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
  margin-top: 4px;
}

.strategy-range-summary-hero {
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: 14px 12px 14px;
}

.strategy-range-summary-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.strategy-range-summary-hero-value {
  color: #1f6faf;
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
  margin: 5px 0 6px;
}

.strategy-range-summary-hero-value.negative {
  color: #0f9f6e;
}

.strategy-range-summary-comment {
  color: var(--text);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.35;
}

.strategy-range-summary-list {
  background: #fff;
}

.strategy-range-summary-row {
  border-bottom: 1px solid var(--border);
  padding: 10px 12px;
}

.strategy-range-summary-row:last-child {
  border-bottom: 0;
}

.strategy-range-summary-row-main {
  align-items: baseline;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.strategy-range-summary-value {
  color: var(--text);
  font-size: 17px;
  font-weight: 900;
  line-height: 1.1;
  text-align: right;
  white-space: nowrap;
}

.strategy-range-summary-value.positive {
  color: #c43b32;
}

.strategy-range-summary-value.negative {
  color: #0f9f6e;
}

@media (max-width: 980px) {
  .admin-haoetf-summary-content {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-haoetf-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-haoetf-grid > .admin-haoetf-card:first-child,
  .admin-haoetf-grid > .admin-haoetf-card:last-child {
    width: 100%;
  }

  .strategy-chart-wrapper--range-summary {
    --strategy-range-summary-lift: 0px;
    width: 100%;
  }

  .strategy-chart-wrapper--range-summary .strategy-chart-return-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .strategy-chart-wrapper--range-summary .strategy-chart-canvas-shell {
    height: 280px;
    min-height: 0;
  }

  .strategy-chart-wrapper--range-summary .strategy-range-summary {
    display: flex;
    flex-direction: column;
    height: auto;
  }

  .strategy-chart-wrapper--range-summary .strategy-range-summary-head {
    border-bottom: 1px solid var(--border);
    border-right: 0;
  }

  .strategy-chart-wrapper--range-summary .strategy-range-summary-hero {
    border-bottom: 1px solid var(--border);
    border-right: 0;
  }

  .strategy-chart-wrapper--range-summary .strategy-range-summary-list {
    display: block;
  }

  .strategy-chart-wrapper--range-summary .strategy-range-summary-row {
    border-bottom: 1px solid var(--border);
    border-right: 0;
  }

  .strategy-chart-wrapper--range-summary .strategy-range-summary-row:last-child {
    border-bottom: 0;
  }

  .strategy-info-header {
    grid-template-columns: minmax(0, 1fr);
  }

  .strategy-realtime-access-bar {
    align-items: stretch;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  .strategy-realtime-access-actions {
    align-items: stretch;
    justify-items: stretch;
    min-width: 0;
  }

  .strategy-realtime-access-actions button {
    width: 100%;
  }

  .strategy-realtime-overview--with-game .strategy-rebalance-with-game {
    grid-template-columns: minmax(0, 1fr);
  }

  .strategy-realtime-game-rail .strategy-runaway-stage,
  .strategy-realtime-game-rail .strategy-static-lock {
    min-height: 236px;
  }

  .strategy-stats-header + .strategy-tracking-section {
    margin-top: 0;
  }

  .strategy-decision-card {
    grid-template-columns: minmax(0, 1fr);
    max-width: none;
  }

  .strategy-decision-card--pending {
    grid-template-columns: auto auto;
    max-width: 100%;
    width: fit-content;
  }

  .strategy-decision-card span {
    justify-self: start;
  }

  .strategy-no-rebalance {
    grid-template-columns: 36px minmax(0, 1fr);
    max-width: none;
  }

  .strategy-no-rebalance-mark {
    font-size: 20px;
    height: 36px;
    width: 36px;
  }

  .strategy-no-rebalance-copy strong {
    font-size: 22px;
  }
}

@media (max-width: 720px) {
  .strategy-secret-table th,
  .strategy-secret-table td {
    font-size: 12px;
    padding-left: 3px;
    padding-right: 3px;
  }

  .strategy-secret-table th {
    line-height: 1.15;
    white-space: normal;
  }

  .tech-indicator-panel {
    min-height: 680px;
    padding: 8px;
  }

  .tech-indicator-toolbar {
    align-items: stretch;
  }

  .tech-indicator-pane-label {
    font-size: 12px;
    left: 36px;
  }

  .tech-indicator-readout {
    font-size: 12px;
  }

  .tech-indicator-indicator-lock {
    align-items: stretch;
    flex-direction: column;
    gap: 9px;
    left: 12px;
    max-width: calc(100% - 24px);
    padding: 12px;
    transform: none;
    width: calc(100% - 24px);
  }

  .tech-indicator-indicator-lock-actions {
    flex-wrap: wrap;
  }

  .tech-indicator-indicator-lock-actions button {
    flex: 1 1 128px;
  }

  .tech-indicator-center-message {
    font-size: 19px;
    max-width: calc(100vw - 24px);
    padding: 18px 20px;
    width: calc(100vw - 24px);
  }

  .tech-indicator-chart {
    height: 720px;
    min-height: 720px;
  }
}

/* 行情看板热力卡：上涨不用绿色，改成低饱和浅红/浅橙，降低盯盘时的视觉冲击。 */
.industry-strength-heat-card {
  color: #7f1d1d;
  text-shadow: none;
}

.industry-strength-heat-card span {
  color: #7f1d1d;
}

.industry-strength-heat-card strong {
  color: #be123c;
}

.industry-strength-heat-card small {
  color: #9f1239;
  opacity: 1;
}

.industry-strength-heat-card b {
  color: rgba(190, 18, 60, 0.16);
}

.industry-strength-heat-card.hot,
.industry-strength-heat-card.teal {
  background: linear-gradient(135deg, #fff1f2, #ffe4e6);
  border: 1px solid #fecdd3;
}

.industry-strength-heat-card.warm,
.industry-strength-heat-card.green {
  background: linear-gradient(135deg, #fff7ed, #ffedd5);
  border: 1px solid #fed7aa;
}

.industry-strength-heat-card.cool,
.industry-strength-heat-card.flat {
  background: linear-gradient(135deg, #f8fafc, #eef2f7);
  border: 1px solid #dbe4ee;
  color: #334155;
}

.industry-strength-heat-card.cool span,
.industry-strength-heat-card.flat span {
  color: #334155;
}

.industry-strength-heat-card.cool strong,
.industry-strength-heat-card.flat strong {
  color: #475569;
}

.industry-strength-heat-card.cool small,
.industry-strength-heat-card.flat small {
  color: #64748b;
}

.industry-strength-heat-card.cool b,
.industry-strength-heat-card.flat b {
  color: rgba(71, 85, 105, 0.16);
}

/* ===== 站内信收件箱 ===== */

.inbox-trigger {
  position: relative;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 4px 8px;
  color: #475569;
  transition: background 0.15s, color 0.15s;
}

.inbox-trigger:hover {
  background: #f1f5f9;
  color: #0f766e;
}

.inbox-icon {
  display: inline-block;
  vertical-align: middle;
}

.inbox-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 10px;
  min-width: 16px;
  padding: 1px 5px;
  line-height: 1.4;
  text-align: center;
}

.inbox-modal .inbox-dialog {
  max-width: min(620px, calc(100vw - 32px));
  max-height: min(70vh, 600px);
  padding: 0;
  gap: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.inbox-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #e2e8f0;
  flex-shrink: 0;
}

.inbox-header h2 {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  color: #1e293b;
}

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

.inbox-action-btn {
  font-size: 13px;
  color: #0f766e;
  background: transparent;
  border: 1px solid #ccfbf1;
  border-radius: 4px;
  padding: 4px 10px;
  cursor: pointer;
  transition: background 0.15s;
}

.inbox-action-btn:hover {
  background: #f0fdfa;
}

.inbox-close-btn {
  background: transparent;
  border: none;
  font-size: 22px;
  color: #94a3b8;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}

.inbox-close-btn:hover {
  color: #475569;
}

.inbox-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

.inbox-empty {
  color: #94a3b8;
  text-align: center;
  padding: 40px 20px;
  font-size: 14px;
}

.inbox-item {
  padding: 12px 20px;
  border-bottom: 1px solid #f1f5f9;
  cursor: pointer;
  transition: background 0.12s;
}

.inbox-item:hover {
  background: #f8fafc;
}

.inbox-item--unread {
  background: #f0fdfa;
  border-left: 3px solid #14b8a6;
}

.inbox-item--unread:hover {
  background: #ccfbf1;
}

.inbox-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.inbox-item-from {
  font-size: 13px;
  font-weight: 600;
  color: #334155;
}

.inbox-item-time {
  font-size: 12px;
  color: #94a3b8;
}

.inbox-item-preview {
  font-size: 14px;
  color: #64748b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.inbox-item--unread .inbox-item-preview {
  color: #0f172a;
  font-weight: 500;
}

.inbox-item-actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

.inbox-item-action {
  font-size: 12px;
  color: #64748b;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 3px;
}

.inbox-item-action:hover {
  background: #f1f5f9;
  color: #334155;
}

.inbox-item-action--danger:hover {
  background: #fef2f2;
  color: #dc2626;
}

.inbox-detail {
  padding: 16px 20px;
}

.inbox-detail-back {
  font-size: 13px;
  color: #0f766e;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-bottom: 12px;
}

.inbox-detail-back:hover {
  text-decoration: underline;
}

.inbox-detail-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 12px;
  color: #94a3b8;
}

.inbox-detail-content {
  font-size: 14px;
  color: #1e293b;
  line-height: 1.65;
  white-space: pre-wrap;
  margin-bottom: 16px;
}

.inbox-replies-section {
  border-top: 1px solid #e2e8f0;
  padding-top: 12px;
}

.inbox-replies-title {
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  margin-bottom: 8px;
}

.inbox-reply-item {
  background: #f8fafc;
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 8px;
  font-size: 13px;
  color: #334155;
}

.inbox-reply-item .inbox-reply-meta {
  font-size: 11px;
  color: #94a3b8;
  margin-bottom: 2px;
}

.inbox-reply-form {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.inbox-reply-input {
  flex: 1;
  font-size: 13px;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 6px 10px;
  outline: none;
  resize: none;
  font-family: inherit;
}

.inbox-reply-input:focus {
  border-color: #14b8a6;
  box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.1);
}

.inbox-reply-send {
  font-size: 13px;
  background: #0f766e;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  cursor: pointer;
  white-space: nowrap;
}

.inbox-reply-send:hover {
  background: #115e59;
}

.inbox-reply-send:disabled {
  background: #94a3b8;
  cursor: not-allowed;
}

/* ===== 管理员站内信发送表单 ===== */

.admin-messages-send-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-end;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}

.admin-messages-send-form label {
  font-size: 13px;
  color: #475569;
  font-weight: 600;
}

.admin-messages-send-form select,
.admin-messages-send-form textarea {
  font-size: 13px;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 6px 10px;
  font-family: inherit;
  outline: none;
}

.admin-messages-send-form select:focus,
.admin-messages-send-form textarea:focus {
  border-color: #14b8a6;
}

.admin-messages-send-form textarea {
  flex: 1 1 300px;
  min-height: 40px;
  resize: vertical;
}

.admin-messages-send-form .primary {
  white-space: nowrap;
}

.admin-messages-table {
  table-layout: fixed;
}

.admin-message-time-col,
.admin-message-time-cell {
  white-space: nowrap;
  width: 96px;
}

.admin-messages-table :is(th, td):nth-child(1) {
  width: 96px;
}

.admin-message-recipient-col,
.admin-message-recipient-cell {
  max-width: 18ch;
  white-space: nowrap;
  width: 86px;
}

.admin-messages-table :is(th, td):nth-child(2) {
  width: 86px;
}

.admin-message-content-col {
  width: calc(100% - 366px);
}

.admin-message-content-cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: calc(100% - 366px);
}

.admin-messages-table :is(th, td):nth-child(3) {
  width: calc(100% - 366px);
}

.admin-message-replies-col,
.admin-message-replies-cell {
  max-width: 24ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 112px;
}

.admin-messages-table :is(th, td):nth-child(4) {
  width: 112px;
}

.admin-message-replies-cell > div {
  max-width: 24ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-message-action-col,
.admin-message-action-cell {
  text-align: center;
  white-space: nowrap;
  width: 72px;
}

.admin-messages-table :is(th, td):nth-child(5) {
  width: 72px;
}