:root {
  color: #111827;
  background: #3158a5;
  font-family: Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-synthesis: none;
  --page-blue: #3158a5;
  --line-blue: #315aa8;
  --table-head: #d4ddec;
  --table-alt: #edf1f7;
  --table-border: #e1e6ef;
  --paper: #fff;
}

* { box-sizing: border-box; }

html,
body {
  min-width: 320px;
  min-height: 100%;
  margin: 0;
  overflow-x: clip;
  background: var(--page-blue);
}

body { min-height: 100vh; }
button { font: inherit; }
[hidden] { display: none !important; }

.page-shell {
  width: min(1220px, calc(100% - 40px));
  min-height: 100vh;
  margin: 0 auto;
  padding: 24px 0 28px;
}

.status-panel {
  min-height: calc(100vh - 60px);
  display: grid;
  place-items: center;
  color: #fff;
  text-align: center;
}

.loading-state,
.message-state { width: min(520px, 100%); }

.loading-spinner {
  display: inline-block;
  width: 34px;
  height: 34px;
  border: 3px solid rgba(255, 255, 255, 0.28);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.loading-state h1,
.message-state h1 {
  margin: 20px 0 10px;
  font-size: 24px;
}

.loading-state p,
.message-state p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 14px;
  line-height: 1.7;
}

.message-state {
  padding: 36px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  background: rgba(15, 39, 92, 0.3);
}

.message-code {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.15em;
  opacity: 0.65;
}

.retry-button {
  margin-top: 22px;
  padding: 10px 24px;
  border: 0;
  border-radius: 5px;
  color: var(--page-blue);
  background: #fff;
  cursor: pointer;
  font-weight: 700;
}

.report {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  animation: report-in 0.28s ease-out both;
}

.report-header {
  position: relative;
  padding: 2px 20px 26px;
  color: #fff;
  text-align: center;
}

.report-header h1 {
  margin: 0;
  font-size: clamp(23px, 3vw, 30px);
  font-weight: 700;
  line-height: 1.4;
}

.report-header p {
  margin: 12px 0 0;
  font-size: 13px;
}

.report-header .report-description {
  margin-top: 7px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 12px;
}

.report-navigation {
  position: absolute;
  z-index: 20;
  top: 2px;
  right: 74px;
  color: #111827;
  text-align: left;
  transition: top 0.16s ease;
}

.report-navigation--table-stuck {
  position: fixed;
  top: 10px;
  right: max(84px, calc((100vw - 1220px) / 2 + 74px));
}

.report-menu-button {
  display: flex;
  height: 38px;
  align-items: center;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 6px;
  color: var(--page-blue);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 3px 12px rgba(13, 38, 89, 0.18);
  cursor: pointer;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
}

.report-menu-button:hover,
.report-menu-button[aria-expanded="true"] {
  color: #173d86;
  background: #fff;
}

.menu-icon {
  display: grid;
  width: 16px;
  gap: 3px;
}

.menu-icon i {
  display: block;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
}

.report-menu {
  position: absolute;
  top: 100%;
  right: 0;
  width: min(280px, calc(100vw - 40px));
  margin-top: 8px;
  overflow: hidden;
  border: 1px solid #dbe2ed;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(13, 38, 89, 0.25);
}

.report-menu > p {
  margin: 0;
  padding: 13px 15px 10px;
  color: #778198;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.report-menu ol {
  max-height: min(420px, calc(100vh - 120px));
  margin: 0;
  padding: 0 8px 8px;
  overflow-y: auto;
  list-style: none;
}

.report-menu li + li {
  border-top: 1px solid #edf0f5;
}

.report-menu-item {
  display: grid;
  width: 100%;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  padding: 11px 7px;
  border: 0;
  color: #293548;
  background: transparent;
  cursor: pointer;
  gap: 5px;
  text-align: left;
}

.report-menu-item:hover,
.report-menu-item:focus-visible {
  color: var(--page-blue);
  background: #f0f4fa;
  outline: none;
}

.report-menu-item__index {
  color: #8a94a6;
  font-size: 11px;
  font-weight: 700;
}

.report-menu-item__title {
  overflow: hidden;
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-tables {
  display: grid;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  gap: 20px;
}

.table-card {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
  padding: 14px 14px 17px;
  border-radius: 9px;
  background: var(--paper);
  box-shadow: 0 1px 2px rgba(9, 30, 66, 0.08);
  scroll-margin-top: 82px;
  transition: box-shadow 0.2s ease;
}

.table-card--target {
  box-shadow: 0 0 0 3px #ffcf5a, 0 8px 24px rgba(9, 30, 66, 0.2);
  outline: none;
}

.table-card__header {
  position: sticky;
  z-index: 12;
  top: 0;
  display: flex;
  min-height: 56px;
  align-items: center;
  justify-content: space-between;
  margin: -14px -14px 0;
  padding: 10px 15px;
  border-radius: 9px 9px 0 0;
  background: #fff;
  box-shadow: 0 1px 0 var(--table-border);
  gap: 20px;
}

.table-card__title {
  position: relative;
  min-width: 0;
  margin: 0;
  padding-left: 12px;
  overflow: hidden;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-card__title::before {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 0;
  width: 2px;
  background: var(--line-blue);
  content: "";
}

.download-button {
  position: relative;
  width: 30px;
  height: 28px;
  flex: 0 0 30px;
  padding: 0;
  border: 0;
  color: var(--line-blue);
  background: transparent;
  cursor: pointer;
}

.download-button::before {
  position: absolute;
  top: 3px;
  left: 13px;
  width: 4px;
  height: 12px;
  border-radius: 1px;
  background: currentColor;
  content: "";
}

.download-button::after {
  position: absolute;
  top: 10px;
  left: 9px;
  width: 8px;
  height: 8px;
  border-right: 4px solid currentColor;
  border-bottom: 4px solid currentColor;
  content: "";
  transform: rotate(45deg);
}

.download-button span {
  position: absolute;
  right: 4px;
  bottom: 2px;
  left: 4px;
  height: 5px;
  border: 3px solid currentColor;
  border-top: 0;
}

.download-button:hover {
  color: #173d86;
  transform: translateY(1px);
}

.table-viewport {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  max-height: none;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-color: #8d8d8d #f2f2f2;
  scrollbar-width: auto;
}

.table-viewport--overflowing {
  overflow-x: scroll;
  scrollbar-gutter: stable;
}

.table-viewport::-webkit-scrollbar {
  height: 12px;
  background: #f2f2f2;
}

.table-viewport::-webkit-scrollbar-track {
  background: #f2f2f2;
}

.table-viewport::-webkit-scrollbar-thumb {
  min-width: 48px;
  border: 2px solid #f2f2f2;
  border-radius: 999px;
  background: #8d8d8d;
}

.table-viewport::-webkit-scrollbar-thumb:hover {
  background: #737373;
}

.table-column-header {
  position: sticky;
  z-index: 10;
  top: 56px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin-top: 10px;
  overflow: hidden;
  background: var(--table-head);
  box-shadow: 0 2px 4px rgba(26, 47, 82, 0.12);
  scrollbar-width: none;
}

.table-column-header::-webkit-scrollbar {
  display: none;
}

.data-table {
  width: 100%;
  min-width: var(--table-min-width, 1020px);
  border-spacing: 0;
  border-collapse: separate;
  table-layout: fixed;
  font-size: 12px;
  text-align: center;
}

.data-table th,
.data-table td {
  height: 42px;
  padding: 8px 10px;
  overflow: hidden;
  border-right: 1px solid var(--table-border);
  border-bottom: 1px solid var(--table-border);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-table th:first-child,
.data-table td:first-child { border-left: 1px solid var(--table-border); }

.data-table th.data-table__full-text,
.data-table td.data-table__full-text {
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.5;
}

.data-table thead th {
  height: 43px;
  color: #111827;
  background: var(--table-head);
  font-weight: 400;
}

.data-table--header {
  border-top: 1px solid var(--table-border);
}

.data-table--body tr:first-child td {
  border-top: 0;
}

.data-table tbody tr:nth-child(odd) td { background: #fff; }
.data-table tbody tr:nth-child(even) td { background: var(--table-alt); }
.data-table tbody tr:hover td { background: #e1e8f4; }
.data-table tbody tr td.data-table__empty,
.data-table tbody tr:hover td.data-table__empty {
  height: 84px;
  color: #8a94a6;
  background: #fff;
  font-size: 14px;
}
.data-table td.align-left,
.data-table th.align-left { text-align: left; }
.data-table td.align-right,
.data-table th.align-right { text-align: right; }

.data-table tfoot td {
  height: 43px;
  background: var(--table-alt);
  font-weight: 700;
}

.empty-table {
  margin: 0;
  padding: 40px 20px;
  border: 1px solid var(--table-border);
  color: #6b7280;
  font-size: 13px;
  text-align: center;
}

.report-footer {
  display: flex;
  justify-content: center;
  padding: 18px 12px 0;
  color: rgba(255, 255, 255, 0.68);
  gap: 24px;
  font-size: 11px;
}

.report-footer strong {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 400;
}

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

@keyframes report-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 720px) {
  .page-shell {
    width: calc(100% - 20px);
    padding-top: 20px;
  }

  .report-header { padding: 0 10px 20px; }
  .report-header h1 { font-size: 21px; }
  .report-navigation { top: 0; right: 0; }
  .report-navigation--table-stuck { top: 10px; right: 58px; }
  .report-menu-button { height: 36px; }
  .table-card { padding: 12px 10px 13px; }
  .table-card__header {
    min-height: 52px;
    margin: -12px -10px 0;
    padding: 9px 11px;
  }
  .table-card__title { font-size: 15px; }
  .table-column-header { top: 52px; }

  .report-footer {
    align-items: center;
    flex-direction: column;
    gap: 5px;
  }
}

@media print {
  @page { size: landscape; margin: 10mm; }
  html,
  body { background: #fff; }
  .page-shell { width: 100%; padding: 0; }
  .report-header { color: #111827; }
  .report-tables { gap: 12px; }

  .table-card {
    break-inside: avoid;
    border: 1px solid #d8dee8;
    box-shadow: none;
  }

  .download-button,
  .report-navigation,
  .report-footer { display: none; }

  .table-card__header {
    position: static;
    margin-top: -14px;
  }

  .table-viewport {
    max-height: none !important;
    overflow: visible;
  }

  .table-column-header {
    position: static;
    overflow: visible;
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}