:root {
  color-scheme: dark;
  font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: #0b1220;
  color: #f8fafc;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Reserve scrollbar gutter so centered layout width stays stable across routes. */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  min-width: 1280px;
  /* Keep the viewport gutter consistent so the sidebar does not shift between short and long pages. */
  overflow-y: scroll;
  background:
    radial-gradient(circle at top, rgba(16, 185, 129, 0.12), transparent 28%),
    linear-gradient(180deg, #0b1220 0%, #0b1220 100%);
  color: #f8fafc;
}

body.mobile-guide-mode {
  min-width: 0;
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

code {
  color: #93c5fd;
}

.app-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.feedback-entry {
  position: fixed;
  right: 0;
  bottom: 10%;
  z-index: 50;
  width: 30px;
  min-height: 100px;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  background: #26b941;
  box-shadow: 0 10px 24px rgba(11, 18, 32, 0.28);
  overflow: hidden;
}

.feedback-entry-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100px;
  padding: 8px 0;
  color: #ffffff;
  font-size: 16px;
  line-height: 24px;
  writing-mode: vertical-rl;
}

.feedback-entry-link:hover {
  background: rgba(255, 255, 255, 0.08);
}

.mobile-guide-shell {
  min-height: 100vh;
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.site-footer {
  margin-top: auto;
  padding: 20px 24px 28px;
}

.site-footer-inner {
  width: min(1440px, calc(100% - 48px));
  margin: 0 auto;
  display: grid;
  justify-items: center;
  gap: 8px;
  min-height: 44px;
  padding-top: 14px;
  border-top: 1px solid rgba(30, 41, 59, 0.92);
}

.site-footer-disclaimer-list {
  display: grid;
  gap: 6px;
  justify-items: center;
}

.site-footer-disclaimer-line {
  margin: 0;
  color: #7f8ea3;
  font-size: 12px;
  line-height: 1.7;
  text-align: center;
}

.site-footer-copyright {
  margin: 0;
  color: #94a3b8;
  font-size: 12px;
  line-height: 1.7;
  text-align: center;
}

.site-footer-record-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  color: #94a3b8;
  font-size: 13px;
  line-height: 1.6;
  transition: color 0.2s ease, background 0.2s ease;
}

.site-footer-record-link:hover,
.site-footer-record-link:focus-visible {
  color: #dbeafe;
  background: rgba(30, 41, 59, 0.7);
}

.mobile-guide-card {
  width: min(100%, 392px);
  max-height: calc(100vh - 24px);
  padding: 18px 16px 16px;
  border: 1px solid rgba(52, 211, 153, 0.2);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(2, 6, 23, 0.98) 100%);
  box-shadow: 0 24px 60px rgba(2, 6, 23, 0.52);
  overflow: auto;
}

.mobile-guide-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(52, 211, 153, 0.3);
  background: rgba(16, 185, 129, 0.1);
  color: #6ee7b7;
  font-size: 11px;
}

.mobile-guide-title {
  margin: 12px 0 6px;
  font-size: 24px;
  line-height: 1.2;
}

.mobile-guide-description {
  margin: 0;
  color: #cbd5e1;
  font-size: 13px;
  line-height: 1.65;
}

.mobile-guide-qr-panel {
  margin-top: 12px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(15, 23, 42, 0.9);
}

.mobile-guide-qr-image {
  display: block;
  width: min(100%, 170px);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  border-radius: 16px;
  background: #ffffff;
  object-fit: contain;
}

.mobile-guide-qr-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 146px;
  padding: 16px;
  border: 1px dashed rgba(148, 163, 184, 0.26);
  border-radius: 16px;
  color: #e2e8f0;
  text-align: center;
  line-height: 1.65;
  font-size: 13px;
}

.mobile-guide-search-card {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(30, 41, 59, 0.74);
  display: grid;
  gap: 4px;
}

.mobile-guide-search-label {
  color: #94a3b8;
  font-size: 11px;
}

.mobile-guide-summary {
  margin-top: 10px;
  color: #cbd5e1;
  font-size: 12px;
  line-height: 1.6;
}

.mobile-guide-feature-section {
  margin-top: 10px;
  padding: 10px 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(15, 23, 42, 0.78);
}

.mobile-guide-feature-title {
  color: #e2e8f0;
  font-size: 12px;
  font-weight: 600;
}

.mobile-guide-feature-grid {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mobile-guide-feature-item {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid rgba(52, 211, 153, 0.22);
  background: rgba(16, 185, 129, 0.08);
  color: #d1fae5;
  font-size: 11px;
}

.mobile-guide-button-row {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.mobile-guide-button {
  min-height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 600;
  transition: 0.2s ease;
}

.mobile-guide-button.primary {
  background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
  color: #04130d;
}

.mobile-guide-button.secondary {
  border-color: rgba(148, 163, 184, 0.22);
  background: rgba(15, 23, 42, 0.85);
  color: #e2e8f0;
}

.mobile-guide-tip-list {
  margin-top: 10px;
  display: grid;
  gap: 6px;
}

.mobile-guide-tip {
  padding-left: 12px;
  color: #94a3b8;
  font-size: 12px;
  line-height: 1.5;
  position: relative;
}

.mobile-guide-tip::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: #34d399;
}

.meta-bar {
  border-bottom: 1px solid rgba(30, 41, 59, 0.9);
  background: rgba(3, 7, 18, 0.95);
}

@media (max-width: 640px) {
  .mobile-guide-shell {
    padding: 10px;
  }

  .mobile-guide-card {
    max-height: calc(100vh - 20px);
    padding: 16px 14px 14px;
    border-radius: 20px;
  }

  .mobile-guide-title {
    font-size: 22px;
  }

  .mobile-guide-qr-panel {
    padding: 10px;
  }

  .mobile-guide-qr-fallback {
    min-height: 132px;
  }

  .mobile-guide-qr-image {
    width: min(100%, 156px);
  }

  .mobile-guide-feature-grid {
    gap: 5px;
  }

  .mobile-guide-feature-item {
    min-height: 24px;
    padding: 0 8px;
  }

  .mobile-guide-button {
    min-height: 38px;
    font-size: 12px;
  }
}

@media (max-height: 780px) {
  .mobile-guide-shell {
    padding: 8px;
  }

  .mobile-guide-card {
    max-height: calc(100vh - 16px);
    padding: 14px 12px 12px;
  }

  .mobile-guide-title {
    margin-top: 10px;
    font-size: 20px;
  }

  .mobile-guide-description,
  .mobile-guide-summary,
  .mobile-guide-tip {
    font-size: 11px;
    line-height: 1.45;
  }

  .mobile-guide-qr-panel,
  .mobile-guide-search-card,
  .mobile-guide-feature-section,
  .mobile-guide-button-row,
  .mobile-guide-tip-list {
    margin-top: 8px;
  }

  .mobile-guide-qr-image {
    width: min(100%, 140px);
  }

  .mobile-guide-qr-fallback {
    min-height: 116px;
    font-size: 12px;
  }

  .mobile-guide-feature-grid {
    margin-top: 6px;
    gap: 4px;
  }

  .mobile-guide-feature-item {
    min-height: 22px;
    font-size: 10px;
  }

  .mobile-guide-button {
    min-height: 34px;
    font-size: 12px;
  }
}

.meta-inner,
.nav-inner,
.subnav-inner,
.page {
  width: min(1440px, calc(100% - 48px));
  margin: 0 auto;
}

.meta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 42px;
}

.meta-copy {
  color: #94a3b8;
  font-size: 12px;
}

.meta-links {
  display: flex;
  align-items: center;
  gap: 12px;
}

.meta-link {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #cbd5e1;
  font-size: 12px;
}

.meta-tag {
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(16, 185, 129, 0.35);
  background: rgba(16, 185, 129, 0.12);
  color: #6ee7b7;
  font-size: 11px;
}

.layout-shell {
  width: min(1440px, calc(100% - 48px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 24px;
  padding-top: 18px;
  flex: 1 0 auto;
}

.sidebar-shell {
  position: sticky;
  top: 56px;
  align-self: start;
  border: 1px solid rgba(16, 185, 129, 0.16);
  border-radius: 24px;
  background: rgba(15, 23, 42, 0.92);
  box-shadow: 0 24px 80px rgba(2, 6, 23, 0.42);
  overflow: hidden;
}

.sidebar-brand {
  padding: 22px 16px 20px;
  border-bottom: 1px solid rgba(30, 41, 59, 0.85);
}

.tree-nav {
  padding: 10px 10px 6px;
  display: grid;
  gap: 6px;
}

.tree-group + .tree-group {
  margin-top: 8px;
}

.tree-group.single {
  margin-top: 0;
}

.tree-children {
  display: grid;
  gap: 6px;
  margin-top: 6px;
  padding-left: 12px;
}

.tree-link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  width: 100%;
  padding: 0 12px;
  border: 1px solid #243041;
  border-radius: 12px;
  background: rgba(30, 41, 59, 0.78);
  color: #cbd5e1;
  font-size: 12px;
  transition: 0.2s ease;
}

.tree-link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: currentColor;
}

.tree-link-icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tree-link-label {
  min-width: 0;
  flex: 1 1 auto;
}

.tree-link:hover {
  border-color: #3b4758;
  background: rgba(30, 41, 59, 0.94);
}

.tree-link.active {
  border-color: rgba(52, 211, 153, 0.55);
  background: rgba(16, 185, 129, 0.14);
  color: #6ee7b7;
}

.tree-link-parent {
  cursor: default;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.tree-link-parent:hover {
  border-color: #243041;
  background: rgba(30, 41, 59, 0.78);
}

.tree-link-parent.active {
  border-color: rgba(71, 122, 105, 0.42);
  background: rgba(22, 52, 45, 0.18);
  color: #9bd8ba;
}

.tree-link-child {
  min-height: 34px;
  padding: 0 10px;
  border-color: rgba(36, 48, 65, 0.88);
  background: rgba(20, 29, 44, 0.72);
}

.tree-link-child:hover {
  border-color: rgba(59, 71, 88, 0.88);
  background: rgba(24, 35, 53, 0.92);
}

.tree-button {
  text-align: left;
}

.sidebar-foot {
  display: grid;
  gap: 8px;
  padding: 14px 12px 16px;
  border-top: 1px solid rgba(30, 41, 59, 0.85);
}

.page-content {
  min-width: 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-logo-image,
.brand-logo-placeholder {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  flex: 0 0 56px;
}

.brand-logo-image {
  display: block;
  object-fit: cover;
  border: 1px solid rgba(52, 211, 153, 0.2);
  background: rgba(15, 23, 42, 0.92);
}

.brand-logo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed rgba(52, 211, 153, 0.3);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.18), rgba(59, 130, 246, 0.12));
  color: #d1fae5;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.brand-copy {
  min-width: 0;
  flex: 1;
}

.brand-title {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.subnav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0 12px;
}

.subnav-copy {
  color: #94a3b8;
  font-size: 12px;
}

.subnav-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.subnav-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(30, 41, 59, 0.7);
  color: #e2e8f0;
  font-size: 12px;
}

.subnav-pill em {
  color: #6ee7b7;
  font-style: normal;
}

.page {
  width: 100%;
  margin: 0;
  padding: 0 0 48px;
}

.section {
  border: 1px solid rgba(16, 185, 129, 0.16);
  background: rgba(30, 41, 59, 0.82);
  border-radius: 24px;
  padding: 20px;
  box-shadow: 0 24px 80px rgba(2, 6, 23, 0.46);
}

.section + .section {
  margin-top: 24px;
}

.hero-shell,
.market-grid,
.home-portal-grid,
.content-grid,
.home-clean-layout,
.home-ops-section {
  margin-top: 24px;
}

.hero-layout,
.home-portal-grid,
.two-col-grid,
.market-grid,
.guide-grid,
.quick-tool-grid,
.metrics,
.stats-grid,
.password-grid,
.item-grid,
.button-grid {
  display: grid;
  gap: 16px;
}

.hero-layout {
  grid-template-columns: 1.45fr 0.72fr;
  gap: 24px;
}

.home-portal-grid {
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: start;
}

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

.market-grid {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 18px;
}

.ammo-profit-grid {
  display: grid;
  gap: 18px;
  margin-top: 24px;
}

.map-page-grid {
  display: grid;
  gap: 18px;
  margin-top: 24px;
}

.map-hero-card,
.map-frame-card {
  margin-top: 0;
}

.map-frame-card {
  padding: 16px;
}

.map-frame-shell {
  min-height: 780px;
  border: 1px solid rgba(52, 211, 153, 0.18);
  border-radius: 18px;
  overflow: hidden;
  background: rgba(11, 18, 32, 0.96);
}

.map-frame {
  display: block;
  width: 100%;
  height: 780px;
  border: 0;
  background: #0b1220;
}

.dept-exchange-grid {
  display: grid;
  gap: 18px;
  margin-top: 24px;
}

.manufacture-page-grid {
  display: grid;
  gap: 18px;
  margin-top: 24px;
}

.manufacture-page-stack {
  display: grid;
  gap: 18px;
}

.manufacture-page-stack > .section,
.manufacture-recommend-grid > .section {
  margin-top: 0;
}

.manufacture-filter-form .manufacture-filter-row {
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.manufacture-filter-form .market-filter-label {
  padding-top: 2px;
  line-height: 1.5;
}

.manufacture-filter-form .market-filter-options {
  gap: 8px 14px;
}

.manufacture-filter-form .market-filter-inline-controls {
  justify-content: flex-start;
  gap: 12px;
  align-items: center;
}

.manufacture-filter-form .market-reset-button {
  flex: 0 0 auto;
}

.manufacture-page-level-select select {
  min-width: 84px;
  height: 32px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid rgba(52, 211, 153, 0.16);
  background: rgba(8, 18, 36, 0.86);
  color: #e2e8f0;
}

.manufacture-filter-row-actions .market-filter-inline-controls {
  justify-content: flex-end;
}

.manufacture-recommend-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
  grid-auto-rows: 1fr;
}

.manufacture-recommend-grid.single {
  grid-template-columns: minmax(0, 1fr);
}

.manufacture-recommend-card {
  display: grid;
  grid-template-rows: auto 1fr;
  padding: 0;
  overflow: hidden;
  min-height: 100%;
}

.manufacture-recommend-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px 6px;
  border-bottom: 1px solid rgba(30, 41, 59, 0.92);
}

.manufacture-card-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(52, 211, 153, 0.2);
  background: rgba(16, 185, 129, 0.08);
  color: #8af2c9;
  font-size: 12px;
  font-weight: 700;
}

.manufacture-level-select {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #93a4ba;
  font-size: 12px;
  white-space: nowrap;
}

.manufacture-card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
}

.manufacture-level-select select {
  min-width: 76px;
  height: 32px;
  padding: 0 8px;
  border-radius: 10px;
  border: 1px solid rgba(52, 211, 153, 0.16);
  background: rgba(8, 18, 36, 0.86);
  color: #e2e8f0;
}

.manufacture-recommend-body {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(136px, 0.6fr);
  gap: 10px;
  padding: 8px 14px 10px;
  align-items: center;
}

.manufacture-item-card {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  border-radius: 14px;
}

.manufacture-detail-trigger {
  cursor: pointer;
}

.manufacture-detail-trigger .table-name {
  transition: color 0.18s ease;
}

.manufacture-detail-trigger:hover .table-name {
  color: #8af2c9;
}

.manufacture-detail-trigger:focus-visible .table-name {
  color: #8af2c9;
}

.manufacture-detail-trigger:focus-visible {
  outline: 1px solid rgba(60, 242, 178, 0.9);
  outline-offset: 2px;
}

.manufacture-item-copy {
  min-width: 0;
}

.manufacture-item-copy .table-name {
  margin: 0;
  font-size: 15px;
  line-height: 1.35;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.manufacture-item-card .grade-box.medium {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  flex-shrink: 0;
}

.manufacture-metrics {
  display: flex;
  flex-direction: column;
  gap: 5px;
  justify-self: end;
  justify-content: center;
  min-width: 136px;
}

.manufacture-metric {
  display: grid;
  grid-template-columns: auto max-content;
  align-items: center;
  justify-content: start;
  column-gap: 12px;
  color: #9fb0c4;
  font-size: 12px;
  white-space: nowrap;
}

.manufacture-metric.primary span {
  color: #8af2c9;
}

.manufacture-metric.primary strong {
  color: #34d399;
}

.manufacture-metric.secondary span {
  color: #cbd5e1;
}

.manufacture-metric.muted span {
  color: #8fb2d9;
}

.manufacture-metric.muted strong {
  color: #dbeafe;
}

.manufacture-metric strong {
  color: #e2e8f0;
  font-weight: 700;
  font-size: 13px;
}

.manufacture-jump-button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(52, 211, 153, 0.2);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.92);
  color: #8af2c9;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    color 0.2s ease,
    transform 0.18s ease;
  white-space: nowrap;
}

.manufacture-jump-button:hover,
.manufacture-jump-button:focus-visible {
  border-color: rgba(52, 211, 153, 0.38);
  background: rgba(16, 185, 129, 0.12);
  transform: translateY(-1px);
}

.manufacture-jump-button.active {
  border-color: rgba(96, 165, 250, 0.34);
  background: rgba(37, 99, 235, 0.12);
  color: #bfdbfe;
}

.manufacture-hero {
  margin-top: 0;
}

.manufacture-board {
  padding: 0;
  overflow: visible;
}

.manufacture-table-head,
.manufacture-row {
  display: grid;
  grid-template-columns: 52px minmax(260px, 1.8fr) minmax(88px, 0.7fr) 64px repeat(4, minmax(96px, 0.7fr));
  gap: 10px;
  align-items: center;
  padding: 14px 20px;
  min-width: 0;
}

.manufacture-table-head.single-department,
.manufacture-row.single-department {
  grid-template-columns: 52px minmax(320px, 2.2fr) 64px repeat(4, minmax(102px, 0.78fr));
}

.manufacture-table-head {
  position: sticky;
  top: 0;
  z-index: 4;
  border-bottom: 1px solid rgba(30, 41, 59, 0.82);
  color: #7f8ea3;
  font-size: 11px;
  letter-spacing: 0.02em;
  background: rgba(8, 18, 36, 0.94);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(2, 6, 23, 0.18);
}

.manufacture-table-head-active {
  color: #8af2c9;
}

.manufacture-row + .manufacture-row {
  border-top: 1px solid rgba(30, 41, 59, 0.82);
}

.manufacture-row:hover {
  background: linear-gradient(90deg, rgba(15, 23, 42, 0.78), rgba(12, 74, 110, 0.16));
  box-shadow: inset 3px 0 0 rgba(52, 211, 153, 0.3);
}

.market-list-row.manufacture-row .grade-box.medium {
  width: 56px;
  height: 56px;
  border-radius: 11px;
}

.market-list-row.manufacture-row .table-thumb {
  width: 44px;
  height: 44px;
}

.market-list-row.manufacture-row {
  padding-top: 10px;
  padding-bottom: 10px;
}

.manufacture-rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(96, 165, 250, 0.24);
  background: rgba(59, 130, 246, 0.08);
  color: #cbd5e1;
  font-size: 12px;
  font-weight: 700;
}

.manufacture-rank-badge.rank-1 {
  border-color: rgba(250, 204, 21, 0.34);
  background: rgba(250, 204, 21, 0.14);
  color: #fde047;
}

.manufacture-rank-badge.rank-2 {
  border-color: rgba(226, 232, 240, 0.28);
  background: rgba(148, 163, 184, 0.12);
  color: #e2e8f0;
}

.manufacture-rank-badge.rank-3 {
  border-color: rgba(251, 146, 60, 0.28);
  background: rgba(249, 115, 22, 0.12);
  color: #fdba74;
}

.manufacture-animate-value {
  animation: manufacture-value-fade 0.24s ease;
}

@keyframes manufacture-value-fade {
  0% {
    opacity: 0;
    transform: translateY(4px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.ammo-profit-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
  grid-auto-rows: 1fr;
}

.ammo-profit-card-grid > .section {
  margin-top: 0;
}

.ammo-profit-hero .stats-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ammo-profit-pack-card {
  display: grid;
  grid-template-rows: auto 1fr;
  padding: 0;
  overflow: hidden;
  min-height: 100%;
}

.ammo-profit-pack-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(30, 41, 59, 0.92);
}

.ammo-profit-pack-head > div {
  min-width: 0;
}

.ammo-profit-pack-head .section-subtitle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ammo-profit-table-head {
  display: grid;
  grid-template-columns: 32px minmax(0, 1.3fr) repeat(2, minmax(72px, 0.7fr));
  gap: 6px;
  align-items: center;
  padding: 5px 12px;
  border-bottom: 1px solid rgba(30, 41, 59, 0.82);
  color: #7f8ea3;
  font-size: 10px;
  letter-spacing: 0.02em;
  background: rgba(8, 18, 36, 0.56);
}

.ammo-profit-rank-list {
  display: grid;
  min-width: 0;
}

.ammo-profit-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1.3fr) repeat(2, minmax(72px, 0.7fr));
  gap: 6px;
  align-items: center;
  min-height: 62px;
  padding: 6px 12px;
  min-width: 0;
}

.ammo-profit-row + .ammo-profit-row {
  border-top: 1px solid rgba(30, 41, 59, 0.82);
}

.ammo-profit-row:hover {
  background: linear-gradient(90deg, rgba(15, 23, 42, 0.78), rgba(12, 74, 110, 0.16));
  box-shadow: inset 3px 0 0 rgba(52, 211, 153, 0.3);
}

.ammo-profit-row-clickable {
  cursor: pointer;
}

.ammo-profit-row-clickable:focus-visible {
  outline: 1px solid rgba(60, 242, 178, 0.9);
  outline-offset: -1px;
}

.low-price-row-clickable {
  cursor: pointer;
}

.low-price-row-clickable:focus-visible {
  outline: 1px solid rgba(60, 242, 178, 0.9);
  outline-offset: -1px;
}

.ammo-profit-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  border: 1px solid rgba(52, 211, 153, 0.28);
  background: rgba(16, 185, 129, 0.08);
  color: #6ee7b7;
  font-size: 12px;
  font-weight: 700;
}

.ammo-profit-rank.rank-1 {
  border-color: rgba(250, 204, 21, 0.42);
  background: rgba(250, 204, 21, 0.12);
  color: #fde047;
}

.ammo-profit-rank.rank-2 {
  border-color: rgba(226, 232, 240, 0.38);
  background: rgba(148, 163, 184, 0.12);
  color: #e2e8f0;
}

.ammo-profit-rank.rank-3 {
  border-color: rgba(251, 146, 60, 0.38);
  background: rgba(249, 115, 22, 0.12);
  color: #fdba74;
}

.ammo-profit-profit.rank-1 {
  color: #fde047;
}

.ammo-profit-profit.rank-2 {
  color: #e2e8f0;
}

.ammo-profit-profit.rank-3 {
  color: #fdba74;
}

.ammo-profit-rank.rank-4 {
  border-color: rgba(96, 165, 250, 0.32);
  background: rgba(59, 130, 246, 0.1);
  color: #93c5fd;
}

.ammo-profit-rank.rank-5 {
  border-color: rgba(52, 211, 153, 0.28);
  background: rgba(16, 185, 129, 0.08);
  color: #6ee7b7;
}

.ammo-profit-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.ammo-profit-item-copy {
  min-width: 0;
}

.low-price-timeline-shell {
  padding: 0;
  overflow: hidden;
}

.low-price-timeline {
  display: grid;
  min-width: 0;
}

.low-price-timeline-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  min-width: 0;
}

.low-price-timeline-row + .low-price-timeline-row {
  border-top: 1px solid rgba(30, 41, 59, 0.82);
}

.low-price-hour-label {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 12px;
  border-right: 1px solid rgba(30, 41, 59, 0.82);
  background: rgba(4, 11, 24, 0.72);
  color: #e2e8f0;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}

.low-price-item-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  min-width: 0;
}

.low-price-item-card {
  position: relative;
  display: grid;
  grid-template-rows: auto auto;
  align-content: start;
  gap: 12px;
  min-height: 148px;
  width: 172px;
  padding: 14px 12px 12px;
  border-left: 1px solid rgba(30, 41, 59, 0.82);
  transition: background 0.2s ease;
}

.low-price-corner-tag {
  position: absolute;
  top: 8px;
  left: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: calc(100% - 16px);
  min-height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(59, 130, 246, 0.28);
  color: #bfdbfe;
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.low-price-item-card:hover {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.86), rgba(12, 74, 110, 0.14));
  box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.14);
}

.low-price-item-media {
  display: grid;
  justify-items: center;
  gap: 10px;
  min-width: 0;
  padding-top: 18px;
}

.low-price-item-copy {
  width: 100%;
  min-width: 0;
  text-align: center;
}

.low-price-item-copy .table-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 600;
}

.low-price-item-bottom {
  display: grid;
  justify-items: center;
  gap: 0;
}

.low-price-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(52, 211, 153, 0.92);
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.1);
  color: #6ee7b7;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

.low-price-item-card:first-child {
  border-left: none;
}

.ammo-profit-item-copy .table-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  line-height: 1.35;
}

.ammo-profit-item-copy .section-subtitle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  line-height: 1.25;
}

.ammo-profit-metric {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  justify-items: end;
  text-align: right;
  min-width: 0;
}

.ammo-profit-metric strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  font-size: 14px;
  font-weight: 700;
  color: #f8fafc;
}

.ammo-profit-pack-card .grade-box.medium {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  flex: 0 0 42px;
}

.low-price-item-card .grade-box.medium {
  width: 48px;
  height: 48px;
  border-radius: 11px;
  flex: 0 0 48px;
}

.ammo-profit-pack-card .table-thumb {
  width: 34px;
  height: 34px;
}

.low-price-item-card .table-thumb {
  width: 36px;
  height: 36px;
}

.ammo-profit-pack-card .section-title {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.ammo-profit-pack-card .pill {
  padding: 3px 8px;
  font-size: 10px;
}

.market-main-stack {
  display: grid;
  gap: 16px;
  min-width: 0;
}

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

.quick-tool-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.metrics,
.stats-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}


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

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

.hero-main,
.hero-side,
.home-main-column,
.home-sidebar,
.side-stack,
.list-stack {
  display: grid;
  gap: 16px;
}

.home-clean-layout {
  display: block;
}

.home-ops-section {
  display: grid;
  gap: 14px;
}

.ops-password-strip,
.ops-panel {
  border: 1px solid rgba(30, 64, 94, 0.95);
  background: linear-gradient(180deg, rgba(23, 40, 67, 0.96), rgba(16, 32, 55, 0.96));
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(2, 6, 23, 0.32);
}

.ops-password-strip {
  position: relative;
  padding: 12px 18px 0;
  overflow: hidden;
  background:
    radial-gradient(circle at top left, rgba(59, 130, 246, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(24, 46, 80, 0.98), rgba(16, 32, 55, 0.98));
}

.ops-password-strip::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(125, 211, 252, 0.22), rgba(255, 255, 255, 0.04), rgba(125, 211, 252, 0.18));
  pointer-events: none;
}

.ops-password-head {
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(71, 85, 105, 0.2);
}

.ops-password-head .ops-block-title {
  font-size: 19px;
}

.ops-password-strip .ops-date {
  color: #cbd5e1;
  font-size: 13px;
}

.ops-password-head,
.ops-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.ops-password-head {
  align-items: center;
}

.ops-panel-head-main {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  flex-wrap: wrap;
}

.ops-block-title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  color: #e2e8f0;
}

.ops-date,
.ops-panel-time {
  color: #94a3b8;
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
}

.ops-password-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 0;
  align-items: stretch;
  grid-auto-rows: 1fr;
}

.ops-password-item {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 10px;
  min-height: 116px;
  padding: 18px 16px 16px;
  border-left: 1px solid rgba(71, 85, 105, 0.28);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.015), rgba(255, 255, 255, 0));
  align-content: space-between;
  justify-items: center;
  text-align: center;
  transition: background 0.2s ease, transform 0.2s ease;
}

.ops-password-item:first-child {
  border-left: none;
}

.ops-password-item.is-clickable {
  cursor: pointer;
}

.ops-password-item.is-clickable:hover {
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.12), rgba(30, 64, 94, 0.08));
  transform: translateY(-1px);
}

.ops-password-item.is-disabled {
  cursor: default;
}

.ops-password-meta {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.ops-password-name {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
}

.ops-password-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.ops-password-code {
  font-size: 46px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.05em;
  color: #f8fafc;
  text-shadow: 0 8px 22px rgba(15, 23, 42, 0.36);
}

.ops-password-map-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 9px;
  flex: 0 0 26px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow:
    0 8px 18px rgba(15, 23, 42, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.ops-password-map-icon svg {
  width: 16px;
  height: 16px;
  stroke: #f8fafc;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ops-password-map-icon.dam {
  background: linear-gradient(180deg, rgba(34, 211, 238, 0.3), rgba(8, 145, 178, 0.32));
  color: #67e8f9;
}

.ops-password-map-icon.valley {
  background: linear-gradient(180deg, rgba(163, 230, 53, 0.3), rgba(77, 124, 15, 0.32));
  color: #bef264;
}

.ops-password-map-icon.fort {
  background: linear-gradient(180deg, rgba(132, 204, 22, 0.28), rgba(74, 222, 128, 0.2));
  color: #bbf7d0;
}

.ops-password-map-icon.space {
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.34), rgba(217, 119, 6, 0.3));
  color: #fde68a;
}

.ops-password-map-icon.prison {
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.28), rgba(37, 99, 235, 0.3));
  color: #bfdbfe;
}

.ops-dual-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(300px, 0.64fr);
  gap: 14px;
  /* 首页双栏面板保持等高，避免右侧活动卡片比左侧制造卡片矮。 */
  align-items: stretch;
}

.ops-panel {
  padding: 12px;
  align-self: stretch;
}

.ops-manufacture-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.ops-metric-toggle {
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(71, 85, 105, 0.72);
  border-radius: 999px;
  background: rgba(19, 32, 53, 0.92);
  color: #cbd5e1;
  white-space: nowrap;
}

.ops-metric-toggle.active.total {
  border-color: rgba(16, 185, 129, 0.5);
  background: rgba(16, 185, 129, 0.12);
  color: #6ee7b7;
}

.ops-metric-toggle.active.hour {
  border-color: rgba(96, 165, 250, 0.5);
  background: rgba(96, 165, 250, 0.12);
  color: #93c5fd;
}

.ops-table {
  overflow: hidden;
  margin-top: 14px;
  border: 1px solid rgba(71, 85, 105, 0.4);
  border-radius: 12px;
}

.ops-table-head,
.ops-table-row {
  display: grid;
  grid-template-columns: minmax(84px, 0.96fr) minmax(104px, 1.06fr) minmax(190px, 1.92fr) minmax(78px, 0.82fr) minmax(78px, 0.82fr);
  gap: 7px;
  align-items: center;
  padding: 11px 14px;
  box-sizing: border-box;
}

.ops-table-head {
  background: linear-gradient(180deg, rgba(86, 102, 124, 0.8), rgba(64, 78, 98, 0.74));
  color: #f8fafc;
  font-size: 12px;
  font-weight: 600;
  border-bottom: 1px solid rgba(148, 163, 184, 0.24);
}

.ops-table-row + .ops-table-row {
  border-top: 1px solid rgba(96, 114, 137, 0.32);
}

.ops-table-row:nth-child(even) {
  background: rgba(18, 33, 55, 0.42);
}

.ops-facility-name {
  color: #e2e8f0;
  font-weight: 600;
}

.ops-table-metric-head,
.ops-table-metric-value {
  min-width: 0;
  width: 100%;
  text-align: right;
  justify-self: end;
}

.ops-level-select {
  width: 100%;
  min-height: 36px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(51, 65, 85, 0.95);
  border-radius: 10px;
  background: rgba(20, 32, 53, 0.96);
  color: #cbd5e1;
  font-size: 12px;
}

.ops-item-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.ops-item-cell-clickable {
  cursor: pointer;
  border-radius: 10px;
  transition: background 0.2s ease;
}

.ops-item-cell-clickable:hover {
  background: rgba(15, 23, 42, 0.42);
}

.ops-item-cell-clickable:focus-visible {
  outline: 1px solid rgba(60, 242, 178, 0.9);
  outline-offset: 2px;
}

.ops-item-cell > div:last-child {
  min-width: 0;
  flex: 1 1 auto;
}

.ops-item-cell .row-title {
  line-height: 1.35;
  word-break: break-word;
}

.ops-profit-total,
.ops-profit-hour {
  font-weight: 700;
  opacity: 0.7;
  font-size: 16px;
  line-height: 1.2;
  white-space: nowrap;
}

.ops-profit-total {
  color: #ff7f96;
}

.ops-profit-hour {
  color: #ff96ad;
}

.ops-profit-total.is-active,
.ops-profit-hour.is-active {
  opacity: 1;
  text-shadow: 0 0 12px rgba(255, 127, 150, 0.3);
}

.align-right {
  text-align: right;
}

.ops-activity-banner {
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(70, 121, 87, 0.92);
  color: #dcfce7;
  display: grid;
  gap: 6px;
}

.ops-activity-name,
.ops-activity-time {
  font-size: 15px;
  font-weight: 600;
}

.ops-activity-list {
  display: grid;
  margin-top: 10px;
}

.ops-activity-item {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
  padding: 12px 4px;
}

.ops-activity-item-clickable {
  cursor: pointer;
  border-radius: 12px;
  transition: background 0.2s ease;
}

.ops-activity-item-clickable:hover {
  background: rgba(15, 23, 42, 0.4);
}

.ops-activity-item-clickable:focus-visible {
  outline: 1px solid rgba(60, 242, 178, 0.9);
  outline-offset: 2px;
}

.ops-activity-item + .ops-activity-item {
  border-top: 1px solid rgba(71, 85, 105, 0.28);
}

.ops-activity-body {
  display: grid;
  gap: 4px;
}

.ops-activity-prices {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  color: #f59e0b;
  font-size: 12px;
}

.ops-activity-current-row {
  display: flex;
  align-items: flex-end;
  gap: 14px;
}

.ops-activity-current {
  color: #f87171;
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
}

.ops-activity-time-muted {
  color: #7f8ea3;
  font-size: 11px;
  line-height: 1.4;
}

.is-placeholder {
  opacity: 0.72;
}

.home-error-banner {
  margin-top: 24px;
  padding: 12px 16px;
  border: 1px solid rgba(248, 113, 113, 0.3);
  border-radius: 12px;
  background: rgba(127, 29, 29, 0.2);
  color: #fecaca;
}

.password-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(2, 6, 23, 0.7);
  backdrop-filter: blur(8px);
}

.password-dialog {
  width: min(720px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  padding: 22px 24px 24px;
  border: 1px solid rgba(71, 85, 105, 0.55);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(28, 46, 76, 0.98), rgba(20, 33, 56, 0.98));
  box-shadow: 0 24px 60px rgba(2, 6, 23, 0.5);
}

.password-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.password-dialog-title {
  color: #e2e8f0;
  font-size: 20px;
  font-weight: 700;
}

.password-dialog-subtitle {
  margin-top: 6px;
  color: #94a3b8;
  font-size: 13px;
}

.password-dialog-close {
  border: none;
  background: transparent;
  color: #cbd5e1;
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
}

.password-dialog-divider {
  height: 1px;
  margin: 16px 0 18px;
  background: rgba(148, 163, 184, 0.18);
}

.password-dialog-image {
  display: block;
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(71, 85, 105, 0.32);
  object-fit: cover;
}

.password-dialog-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

.password-dialog-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.45);
  color: #f8fafc;
  font-size: 14px;
  font-weight: 600;
}

.password-dialog-detail {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}

.password-dialog-label {
  color: #fcd34d;
  font-size: 14px;
  font-weight: 600;
}

.password-dialog-value {
  color: #e2e8f0;
  font-size: 15px;
  line-height: 1.7;
}

.password-dialog-location {
  white-space: pre-line;
  font-size: 18px;
  font-weight: 600;
}

.detail-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: flex;
  justify-content: flex-end;
  background: rgba(2, 6, 23, 0.42);
  backdrop-filter: blur(2px);
}

.detail-drawer {
  width: min(560px, calc(100vw - 24px));
  height: 100%;
  overflow-y: auto;
  border-left: 1px solid rgba(71, 85, 105, 0.42);
  background: linear-gradient(180deg, rgba(28, 46, 74, 0.98), rgba(17, 30, 49, 0.98));
  box-shadow: -18px 0 40px rgba(2, 6, 23, 0.42);
}

.detail-drawer-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(71, 85, 105, 0.32);
  background: rgba(29, 47, 75, 0.98);
}

.detail-drawer-title {
  color: #f8fafc;
  font-size: 28px;
  font-weight: 700;
}

.detail-drawer-subtitle {
  margin-top: 6px;
  color: #94a3b8;
  font-size: 13px;
}

.detail-drawer-close {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 10px;
  background: rgba(148, 163, 184, 0.12);
  color: #cbd5e1;
  font-size: 24px;
  line-height: 1;
}

.detail-drawer-body,
.detail-drawer-loading {
  padding: 14px 16px 22px;
}

.detail-drawer-loading {
  display: grid;
  gap: 8px;
}

.detail-item-panel,
.detail-section,
.detail-stat-grid {
  border: 1px solid rgba(56, 89, 132, 0.34);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(18, 33, 56, 0.96), rgba(10, 21, 40, 0.98));
}

.detail-item-panel {
  overflow: hidden;
}

.detail-item-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 16px 12px;
  background: linear-gradient(180deg, rgba(44, 67, 103, 0.32), rgba(22, 35, 56, 0.16));
}

.detail-item-title-wrap {
  min-width: 0;
  flex: 1 1 0;
}

.detail-item-side {
  display: grid;
  align-content: space-between;
  gap: 10px;
  flex: 0 0 248px;
  min-width: 248px;
  max-width: 280px;
  min-height: 96px;
  padding: 10px 14px;
  border: 1px solid rgba(57, 89, 135, 0.32);
  background: linear-gradient(180deg, rgba(18, 34, 58, 0.86), rgba(12, 24, 42, 0.96));
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.detail-item-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.detail-chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(78, 109, 154, 0.38);
  background: rgba(14, 24, 43, 0.82);
  color: #dbe3ee;
  font-size: 14px;
  font-weight: 600;
}

.detail-chip-highlight {
  border-color: rgba(245, 200, 92, 0.3);
  background: linear-gradient(180deg, rgba(241, 198, 86, 0.96), rgba(219, 171, 57, 0.96));
  color: #1a2435;
}

.detail-image-stage {
  display: flex;
  justify-content: center;
  padding: 14px 16px 8px;
}

.detail-image-stage.is-portrait {
  padding-top: 8px;
}

.detail-image-box {
  position: relative;
  width: min(100%, 436px);
  height: 232px;
  border-radius: 22px;
  border: 1px solid rgba(72, 102, 145, 0.28);
  background: linear-gradient(135deg, rgba(56, 76, 105, 0.88), rgba(28, 44, 72, 0.96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.detail-image-box.is-landscape {
  width: min(100%, 452px);
  height: 224px;
}

.detail-image-box.is-square {
  width: min(100%, 320px);
  height: 232px;
}

.detail-image-box.is-portrait {
  width: min(100%, 300px);
  height: 204px;
}

.detail-image-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  transform-origin: center center;
}

.detail-slot-grid-wrap {
  position: absolute;
  right: 14px;
  bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  background: rgba(10, 20, 38, 0.18);
}

.detail-slot-grid {
  display: grid;
  grid-template-columns: repeat(8, 7px);
  gap: 2px;
}

.detail-slot-cell {
  width: 7px;
  height: 7px;
  border: 1px solid rgba(110, 133, 164, 0.38);
  background: rgba(10, 20, 38, 0.16);
  box-sizing: border-box;
}

.detail-slot-cell.active {
  border-color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.92);
}

.detail-image-box.is-portrait img {
  width: auto;
  max-width: 78%;
  margin: 0 auto;
}

.detail-image-box.is-square img {
  width: auto;
  max-width: 84%;
  margin: 0 auto;
}

.detail-item-name {
  color: #f8fafc;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  word-break: keep-all;
}

.detail-item-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 2px 16px 14px;
}

.detail-update-time {
  color: rgba(226, 232, 240, 0.72);
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
}

.detail-item-side .detail-update-time {
  text-align: right;
}

.detail-main-price-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #f8fafc;
}

.detail-item-side .detail-main-price-row {
  justify-content: flex-end;
}

.detail-main-price-row strong {
  font-size: 21px;
  font-weight: 800;
}

.detail-coin-mark {
  color: rgba(226, 232, 240, 0.72);
  font-size: 18px;
}

.detail-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
  padding: 0;
}

.detail-stat-grid-compact {
  background: transparent;
  border: none;
  border-radius: 0;
}

.detail-stat-card,
.detail-info-item {
  padding: 14px 14px 12px;
  border-radius: 0;
  border: 1px solid rgba(49, 80, 122, 0.34);
  background: linear-gradient(180deg, rgba(17, 31, 54, 0.94), rgba(10, 20, 38, 0.98));
}

.detail-stat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 24px;
}

.detail-stat-head span,
.detail-info-label {
  color: rgba(226, 232, 240, 0.86);
  font-size: 12px;
}

.detail-stat-head em {
  color: rgba(226, 232, 240, 0.72);
  font-style: normal;
  font-size: 11px;
}

.detail-stat-head i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  padding: 0 6px;
  border-radius: 6px;
  background: #2cf3b1;
  color: #032a1e;
  font-style: italic;
  font-size: 11px;
  font-weight: 700;
}

.detail-stat-card strong {
  display: block;
  margin-top: 10px;
  color: #f8fafc;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
}

.detail-stat-card.compact {
  display: grid;
  align-content: center;
  justify-items: center;
  min-height: 100px;
}

.detail-stat-card.compact .detail-stat-head {
  order: 2;
  justify-content: center;
  margin-top: 10px;
}

.detail-stat-card.compact strong {
  order: 1;
  margin-top: 0;
  font-size: 16px;
}

.detail-section {
  margin-top: 14px;
  padding: 16px;
}

.detail-special-section {
  padding: 16px 18px 18px;
}

.detail-special-body {
  display: grid;
  gap: 20px;
  margin-top: 16px;
}

.detail-progress-row {
  display: grid;
  gap: 10px;
}

.detail-progress-top,
.detail-kv-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.detail-progress-top span,
.detail-kv-row span {
  color: #dbe3ee;
  font-size: 15px;
}

.detail-progress-top strong,
.detail-kv-row strong {
  color: #f8fafc;
  font-size: 15px;
  font-weight: 700;
  text-align: right;
}

.detail-kv-row strong.detail-value-positive {
  color: #3cf2b2;
}

.detail-kv-row strong.detail-value-negative {
  color: #ff8fa1;
}

.detail-progress-track {
  height: 8px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.18);
  overflow: hidden;
}

.detail-progress-bar {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #15e7a3, #1fd6b5);
}

.detail-ammo-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.detail-ammo-card {
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(49, 80, 122, 0.34);
  background: linear-gradient(180deg, rgba(17, 31, 54, 0.94), rgba(10, 20, 38, 0.98));
}

.detail-ammo-card img {
  display: block;
  width: 100%;
  height: 72px;
  object-fit: contain;
  background: rgba(12, 22, 39, 0.74);
}

.detail-ammo-name {
  min-height: 54px;
  padding: 8px 10px 10px;
  color: #f8fafc;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

.detail-gun-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
  margin-top: 16px;
}

.detail-gun-col {
  display: grid;
  gap: 18px;
}

.detail-accessory-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.detail-effect-group {
  padding: 14px;
  border: 1px solid rgba(49, 80, 122, 0.34);
  background: linear-gradient(180deg, rgba(17, 31, 54, 0.94), rgba(10, 20, 38, 0.98));
}

.detail-effect-title {
  color: #f8fafc;
  font-size: 15px;
  font-weight: 700;
}

.detail-effect-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.detail-effect-item {
  padding: 10px 12px;
  border-left: 3px solid transparent;
  background: rgba(255, 255, 255, 0.03);
}

.detail-effect-item span {
  color: #dbe3ee;
  font-size: 13px;
  line-height: 1.6;
}

.detail-effect-item.is-positive {
  border-left-color: #2cf3b1;
}

.detail-effect-item.is-positive span {
  color: #8ff8d0;
}

.detail-effect-item.is-negative {
  border-left-color: #ff6b7a;
}

.detail-effect-item.is-negative span {
  color: #ffb3bf;
}

.detail-section-title {
  color: #f8fafc;
  font-size: 17px;
  font-weight: 700;
}

.detail-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.detail-info-value {
  margin-top: 6px;
  color: #f8fafc;
  font-size: 14px;
  line-height: 1.6;
  word-break: break-word;
}

.detail-description {
  margin-top: 12px;
  color: #dbe3ee;
  font-size: 15px;
  line-height: 1.9;
  white-space: pre-line;
}

.detail-stat-card.accent-green strong {
  color: #2cf3b1;
}

.detail-stat-card.accent-red strong {
  color: #ff6b7a;
}

.detail-stat-card.accent-purple strong {
  color: #c084fc;
}

.detail-stat-card.accent-orange strong {
  color: #ffa63f;
}

.detail-stat-card.accent-yellow strong {
  color: #ffd43b;
}

.detail-stat-card.accent-blue strong {
  color: #46a6ff;
}

.hero-tag {
  display: inline-flex;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(52, 211, 153, 0.28);
  background: rgba(16, 185, 129, 0.12);
  color: #6ee7b7;
  font-size: 12px;
  letter-spacing: 0.24em;
}

.hero-title {
  margin: 14px 0 0;
  font-size: 42px;
  line-height: 1.15;
  font-weight: 700;
}

.market-title {
  font-size: 32px;
}

.hero-desc {
  max-width: 860px;
  margin: 12px 0 0;
  color: #cbd5e1;
  font-size: 14px;
  line-height: 1.85;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.hero-button,
.inline-button,
.card-action,
.mini-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(52, 211, 153, 0.35);
  background: rgba(16, 185, 129, 0.1);
  color: #6ee7b7;
  padding: 0 16px;
}

.hero-button.primary {
  border-color: rgba(52, 211, 153, 0.62);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.26), rgba(16, 185, 129, 0.12));
}

.hero-button.secondary {
  border-color: rgba(148, 163, 184, 0.24);
  background: rgba(30, 41, 59, 0.72);
  color: #e2e8f0;
}

.metric-card,
.hero-side-card,
.announcement-item,
.quick-tool-card,
.stat-card,
.password-card,
.item-card,
.manufacture-row,
.bazaar-row,
.side-card,
.pagination-bar,
.table-shell,
.guide-card,
.filter-group,
.market-summary {
  border: 1px solid #1e293b;
  background: rgba(30, 41, 59, 0.62);
  border-radius: 18px;
}

.metric-card,
.hero-side-card,
.announcement-item,
.quick-tool-card,
.stat-card,
.password-card,
.item-card,
.side-card,
.guide-card,
.filter-group,
.market-summary {
  padding: 16px;
}

.accent-green {
  border-color: rgba(52, 211, 153, 0.28);
}

.accent-blue {
  border-color: rgba(96, 165, 250, 0.24);
}

.accent-amber {
  border-color: rgba(251, 191, 36, 0.28);
}

.accent-border {
  border-color: rgba(52, 211, 153, 0.24);
}

.market-query-button {
  min-width: 92px;
  min-height: 48px;
  border-radius: 12px;
}

.market-reset-button {
  min-width: 88px;
  min-height: 48px;
  border: 1px solid rgba(100, 116, 139, 0.4);
  border-radius: 12px;
  background: rgba(30, 41, 59, 0.78);
  color: #cbd5e1;
}

.market-inline-chip,
.market-mini-tag {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(71, 85, 105, 0.52);
  background: rgba(30, 41, 59, 0.72);
  color: #dbe7f5;
}

.market-inline-chip {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12px;
}

.market-filter-panel {
  padding: 0;
}

.market-filter-panel {
  overflow: hidden;
}

.market-panel-label {
  color: #7dd3fc;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.market-filter-tabs {
  padding: 6px 8px 0;
}

.jiazhang-filter-tabs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.market-filter-tabs-track {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 4px;
  border-bottom: 1px solid rgba(71, 85, 105, 0.35);
  background: rgba(37, 58, 91, 0.8);
  border-radius: 14px 14px 0 0;
}

.jiazhang-update-tag,
.data-update-tag {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 6px;
  min-height: 30px;
  max-width: 300px;
  padding: 0 12px;
  border: 1px solid rgba(71, 85, 105, 0.48);
  border-radius: 999px;
  background: rgba(9, 19, 36, 0.88);
  color: #cbd5e1;
  line-height: 1;
  white-space: nowrap;
}

.jiazhang-update-tag::before,
.data-update-tag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #34d399;
  box-shadow: 0 0 10px rgba(52, 211, 153, 0.55);
}

.jiazhang-update-tag-label,
.data-update-tag-label {
  color: #8fa2bb;
  font-size: 11px;
  letter-spacing: 0.04em;
}

.jiazhang-update-tag-time,
.data-update-tag-time {
  color: #e2e8f0;
  font-size: 12px;
  font-weight: 600;
}

.section-header-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 56%;
}

.market-filter-tab {
  min-width: 52px;
  min-height: 32px;
  padding: 0 10px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: rgba(226, 232, 240, 0.88);
  font-size: 13px;
  font-weight: 600;
}

.market-filter-tab.active {
  background: rgba(10, 24, 45, 0.92);
  color: #1af0a0;
  box-shadow: inset 0 0 0 1px rgba(34, 255, 170, 0.08);
}

.market-filter-form {
  margin: 0 8px 8px;
  padding: 10px 12px 12px;
  border-radius: 0 0 14px 14px;
  background: rgba(8, 23, 46, 0.92);
}

.market-filter-row + .market-filter-row {
  margin-top: 8px;
}

.market-filter-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 6px;
  align-items: center;
}

.market-filter-row-compact {
  align-items: center;
}

.market-filter-label {
  color: #f8fafc;
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
}

.market-filter-control {
  min-width: 0;
}

.jiazhang-second-class-select {
  width: min(320px, 100%);
}

.market-filter-text-input,
.market-filter-select {
  min-height: 32px;
  border-radius: 8px;
  border-color: rgba(103, 130, 162, 0.72);
  background: rgba(11, 24, 45, 0.96);
  padding: 5px 10px;
}

.market-filter-text-input::placeholder {
  color: #62748d;
}

.market-filter-search-row {
  display: grid;
  grid-template-columns: minmax(0, 520px) auto;
  gap: 6px;
  align-items: center;
}

.market-filter-search-input {
  width: 100%;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 28px;
  padding: 3px 10px;
}

.market-filter-search-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 6px;
  align-items: center;
}

.market-filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}

.market-radio-option {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 22px;
  padding: 0;
  border: none;
  background: transparent;
  color: #f8fafc;
  font-size: 12px;
}

.market-radio-dot {
  width: 12px;
  height: 12px;
  border: 1px solid rgba(67, 124, 241, 0.95);
  border-radius: 999px;
  box-shadow: inset 0 0 0 2px transparent;
  transition: 0.2s ease;
}

.market-radio-option.active {
  color: #f8fafc;
}

.market-radio-option.active .market-radio-dot {
  border-color: #1af0a0;
  box-shadow: inset 0 0 0 2px #1af0a0;
}

.market-filter-inline-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.market-filter-inline-controls.market-filter-search-row {
  display: grid;
  grid-template-columns: minmax(0, 520px) auto;
  flex-wrap: nowrap;
}

.market-filter-inline-controls.market-filter-search-row .market-filter-search-input {
  width: 100%;
  min-width: 0;
}

.market-filter-query-button {
  min-width: 72px;
  min-height: 30px;
  border-radius: 8px;
  padding: 0 10px;
}

.market-filter-reset-button {
  min-width: 68px;
  min-height: 30px;
  border-radius: 8px;
  padding: 0 10px;
}

.yesterday-ammo-profit-filter-form .market-filter-row {
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 10px;
}

.market-filter-inline-controls.market-filter-search-row.yesterday-ammo-profit-search-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
}

.market-filter-inline-controls.market-filter-search-row .yesterday-ammo-profit-search-input {
  flex: 0 0 180px;
  width: 180px;
  max-width: 100%;
}

.yesterday-ammo-profit-search-actions {
  gap: 8px;
}

.yesterday-ammo-profit-calc-button {
  min-width: 92px;
  min-height: 32px;
  border: 1px solid rgba(52, 211, 153, 0.42);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(32, 214, 156, 0.22), rgba(16, 185, 129, 0.14));
  color: #dffcf1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 4px 14px rgba(16, 185, 129, 0.12);
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.yesterday-ammo-profit-calc-button:hover,
.yesterday-ammo-profit-calc-button:focus-visible {
  border-color: rgba(94, 234, 212, 0.6);
  background: linear-gradient(180deg, rgba(45, 212, 191, 0.28), rgba(20, 184, 166, 0.18));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 8px 18px rgba(20, 184, 166, 0.16);
}

.yesterday-ammo-profit-calc-button:active {
  transform: translateY(1px);
}

.market-board {
  border-color: rgba(52, 211, 153, 0.14);
}

.zhanbei-config-page {
  gap: 18px;
}

.zhanbei-config-toolbar {
  padding: 18px;
  background:
    radial-gradient(circle at top left, rgba(30, 144, 255, 0.14), transparent 30%),
    linear-gradient(180deg, rgba(17, 32, 57, 0.98), rgba(9, 22, 42, 0.98));
  border: 1px solid rgba(42, 72, 110, 0.9);
}

.zhanbei-config-toolbar-head,
.zhanbei-config-result-head,
.zhanbei-config-detail-head,
.zhanbei-config-result-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.zhanbei-config-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  /* Subtract the tabs container padding so the actual buttons align with the chip column below. */
  margin-left: 64px;
  padding: 4px;
  border-radius: 14px;
  background: rgba(24, 42, 71, 0.92);
  box-shadow: inset 0 0 0 1px rgba(71, 85, 105, 0.28);
}

.zhanbei-config-tab,
.zhanbei-config-chip {
  border: 1px solid rgba(71, 85, 105, 0.48);
  background: rgba(15, 23, 42, 0.82);
  color: #e2e8f0;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.zhanbei-config-tab {
  min-width: 92px;
  min-height: 38px;
  padding: 0 18px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
}

.zhanbei-config-head-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

.zhanbei-config-filter-grid {
  display: grid;
  gap: 14px;
}

.zhanbei-config-filter-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.zhanbei-config-filter-label {
  display: flex;
  align-items: center;
  color: #94a3b8;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}

.zhanbei-config-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.zhanbei-config-display-group {
  display: flex;
  align-items: center;
  min-height: 44px;
}

.zhanbei-config-display-text {
  color: #e2e8f0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}

.zhanbei-config-chip {
  min-height: 44px;
  padding: 11px 14px;
  border-radius: 12px;
  text-align: left;
}

.zhanbei-config-chip span,
.zhanbei-config-chip em {
  display: block;
  font-style: normal;
}

.zhanbei-config-chip span {
  font-size: 14px;
  font-weight: 600;
}

.zhanbei-config-filter-row:first-child .zhanbei-config-chip {
  display: inline-flex;
  align-items: center;
}

.zhanbei-plan-chip-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.zhanbei-plan-check {
  width: 16px;
  height: 16px;
  border-radius: 5px;
  border: 1px solid rgba(148, 163, 184, 0.55);
  background: rgba(15, 23, 42, 0.78);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  color: transparent;
}

.zhanbei-plan-check.checked {
  border-color: rgba(34, 255, 170, 0.62);
  background: rgba(26, 240, 160, 0.22);
  color: #1af0a0;
}

.zhanbei-config-chip.checked {
  border-color: rgba(34, 255, 170, 0.42);
}

.zhanbei-config-chip em {
  margin-top: 5px;
  color: #94a3b8;
  font-size: 11px;
}

.zhanbei-config-tab:hover,
.zhanbei-config-tab:focus-visible,
.zhanbei-config-chip:hover,
.zhanbei-config-chip:focus-visible,
.zhanbei-item-card-clickable:hover,
.zhanbei-item-card-clickable:focus-visible {
  border-color: rgba(52, 211, 153, 0.48);
  background: rgba(12, 28, 45, 0.92);
  box-shadow: 0 10px 24px rgba(2, 6, 23, 0.26);
}

.zhanbei-config-tab.active,
.zhanbei-config-chip.active {
  border-color: rgba(52, 211, 153, 0.62);
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.16), rgba(15, 23, 42, 0.92));
}

.zhanbei-config-chip.muted {
  opacity: 0.76;
}

.zhanbei-config-tab:focus-visible,
.zhanbei-config-chip:focus-visible,
.zhanbei-item-card-clickable:focus-visible {
  outline: none;
}

.zhanbei-config-summary-card,
.zhanbei-config-detail-board {
  border: 1px solid rgba(71, 85, 105, 0.32);
  border-radius: 14px;
  background: rgba(10, 24, 45, 0.76);
}

.zhanbei-config-result-panel {
  padding: 18px;
}

.zhanbei-config-result-body {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.zhanbei-config-summary {
  display: grid;
  gap: 12px;
}

.zhanbei-config-summary-card {
  padding: 16px;
}

.zhanbei-config-summary-value {
  margin-top: 8px;
  font-size: 28px;
  font-weight: 700;
}

.zhanbei-config-detail {
  min-width: 0;
}

.zhanbei-config-detail-board {
  padding: 14px;
}

.zhanbei-plan-grid-layout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.zhanbei-plan-grid-layout > .section + .section {
  margin-top: 0;
}

.zhanbei-plan-panel {
  padding: 10px;
  border: 1px solid rgba(42, 72, 110, 0.86);
  background:
    radial-gradient(circle at top right, rgba(16, 185, 129, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(17, 32, 57, 0.92), rgba(9, 22, 42, 0.92));
  min-height: 100%;
}

.zhanbei-plan-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  min-height: 42px;
}

.zhanbei-plan-panel-head > div {
  min-width: 0;
}

.zhanbei-plan-panel-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.zhanbei-plan-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(245, 158, 11, 0.48);
  background: rgba(245, 158, 11, 0.16);
  color: rgba(253, 230, 138, 0.96);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
  flex: 0 0 auto;
}

.zhanbei-plan-summary {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr);
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(71, 85, 105, 0.32);
  background: rgba(10, 24, 45, 0.75);
}

.zhanbei-plan-summary-cost {
  margin-top: 4px;
  font-size: 26px;
  font-weight: 800;
  color: #1af0a0;
  line-height: 1;
}

.zhanbei-plan-summary-side {
  display: grid;
  gap: 6px;
  align-content: start;
}

.zhanbei-plan-summary-row {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 8px;
  color: #cbd5e1;
  font-size: 12px;
  white-space: nowrap;
}

.zhanbei-plan-summary-row span {
  color: #94a3b8;
  font-size: 10px;
  white-space: nowrap;
}

.zhanbei-plan-summary-row strong {
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
}

.zhanbei-plan-item-list {
  margin-top: 6px;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(71, 85, 105, 0.32);
  background: rgba(10, 24, 45, 0.75);
}

.zhanbei-plan-item-row {
  width: 100%;
  border: none;
  background: transparent;
  color: #f8fafc;
  padding: 7px 10px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 72px;
  gap: 9px;
  align-items: center;
  text-align: left;
  position: relative;
}

.zhanbei-plan-item-row + .zhanbei-plan-item-row {
  border-top: 1px solid rgba(71, 85, 105, 0.26);
}

.zhanbei-plan-item-row:hover,
.zhanbei-plan-item-row:focus-visible {
  background: linear-gradient(90deg, rgba(15, 23, 42, 0.82), rgba(12, 74, 110, 0.18));
  box-shadow: inset 3px 0 0 rgba(52, 211, 153, 0.26);
}

.zhanbei-plan-item-thumb {
  width: 42px;
  height: 42px;
  border-radius: 9px;
  border: 1px solid rgba(71, 85, 105, 0.35);
  background: rgba(15, 23, 42, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.zhanbei-plan-item-thumb img {
  width: 27px;
  height: 27px;
  object-fit: contain;
}

.zhanbei-plan-item-name {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
}

.zhanbei-plan-item-name-text,
.zhanbei-plan-item-name {
  min-width: 0;
}

.zhanbei-plan-item-info {
  min-width: 0;
}

.zhanbei-plan-item-name {
  overflow: hidden;
}

.zhanbei-plan-item-name-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.zhanbei-plan-item-meta {
  margin-top: 1px;
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  color: #64748b;
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
}

.zhanbei-plan-item-meta span {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  min-width: 0;
  color: #708399;
}

.zhanbei-plan-item-meta strong {
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  flex: 0 0 auto;
}

.zhanbei-plan-item-meta span:first-child strong {
  color: #d7e0ea;
}

.zhanbei-plan-item-meta span:last-child strong {
  color: #34d399;
}

.zhanbei-exchange-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 16px;
  padding: 0 6px;
  border-radius: 999px;
  border: 1px solid rgba(250, 204, 21, 0.28);
  background: rgba(250, 204, 21, 0.12);
  color: #fde68a;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.zhanbei-plan-item-diff {
  font-size: 14px;
  font-weight: 800;
  text-align: right;
  white-space: nowrap;
}

.zhanbei-plan-summary .small-label {
  white-space: nowrap;
  font-size: 10px;
}

.zhanbei-plan-item-row.gun-slot-row {
  padding-left: 52px;
}

.zhanbei-plan-item-row.gun-slot-row::before {
  content: attr(data-slot-label);
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  opacity: 0.92;
}

.zhanbei-plan-item-row.gun-root-row {
  box-shadow: inset 2px 0 0 rgba(148, 163, 184, 0.22);
  background: rgba(14, 28, 47, 0.38);
}

.zhanbei-plan-item-row.gun-part-row {
  padding-left: 64px;
}

.zhanbei-plan-item-row.gun-part-row::before {
  font-size: 10px;
  left: 12px;
  opacity: 0.86;
}

.zhanbei-plan-item-row.gun-slot-1::before {
  color: #1af0a0;
}

.zhanbei-plan-item-row.gun-slot-2::before {
  color: #93c5fd;
}

.zhanbei-plan-item-row.gun-root-row.gun-slot-1 {
  box-shadow: inset 2px 0 0 rgba(34, 255, 170, 0.34);
}

.zhanbei-plan-item-row.gun-root-row.gun-slot-2 {
  box-shadow: inset 2px 0 0 rgba(96, 165, 250, 0.34);
}

.zhanbei-plan-item-row.gun-group-start {
  margin-top: 6px;
  border-top: 1px solid rgba(56, 189, 248, 0.22);
}

.zhanbei-plan-item-row.exchange-item-row {
  background: linear-gradient(90deg, rgba(120, 53, 15, 0.18), rgba(10, 24, 45, 0));
}

.zhanbei-item-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.zhanbei-item-card {
  min-height: 100%;
  padding: 14px;
  border-radius: 14px;
  background: rgba(14, 27, 48, 0.95);
  box-shadow: none;
}

.zhanbei-item-card-clickable {
  cursor: pointer;
}

.zhanbei-item-card .grade-box.large {
  height: 96px;
}

.zhanbei-item-card .grade-box img {
  width: 60px;
  height: 60px;
}

.zhanbei-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.market-category-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.market-table-head,
.market-list-row {
  display: grid;
  grid-template-columns: minmax(260px, 2.1fr) repeat(4, minmax(104px, 0.88fr));
  gap: 14px;
  align-items: center;
  padding: 14px 20px;
}

.unit-price-table-head,
.unit-price-row {
  display: grid;
  grid-template-columns: minmax(260px, 2.1fr) repeat(3, minmax(104px, 0.88fr));
  gap: 14px;
  align-items: center;
  padding: 14px 20px;
}

.dept-exchange-table-head,
.dept-exchange-row {
  display: grid;
  grid-template-columns: minmax(260px, 2.2fr) repeat(5, minmax(88px, 0.8fr));
  gap: 14px;
  align-items: center;
  padding: 14px 20px;
}

.yesterday-ammo-profit-table-head,
.yesterday-ammo-profit-row {
  display: grid;
  grid-template-columns: 72px minmax(240px, 1.8fr) repeat(3, minmax(112px, 0.72fr));
  gap: 14px;
  align-items: center;
  padding: 14px 20px;
}

.manufacture-table-head,
.market-list-row.manufacture-row {
  display: grid;
  grid-template-columns: 52px minmax(260px, 1.8fr) minmax(88px, 0.7fr) 64px repeat(4, minmax(96px, 0.7fr));
  gap: 10px;
  align-items: center;
  padding: 14px 20px;
  min-width: 0;
}

.manufacture-table-head.single-department,
.market-list-row.manufacture-row.single-department {
  grid-template-columns: 52px minmax(320px, 2.2fr) 64px repeat(4, minmax(102px, 0.78fr));
}

.table-sticky-head {
  position: sticky;
  top: 0;
  z-index: 4;
  color: #7f8ea3;
  font-size: 11px;
  letter-spacing: 0.02em;
  border-bottom: 1px solid rgba(30, 41, 59, 0.82);
  background: rgba(8, 18, 36, 0.94);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(2, 6, 23, 0.18);
}

.market-sort-head {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  color: #94a3b8;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

.market-sort-head:hover,
.market-sort-head:focus-visible {
  color: #e2e8f0;
}

.market-sort-head:focus-visible {
  outline: none;
}

.market-sort-head.active {
  color: #f8fafc;
}

.market-sort-label {
  line-height: 1.2;
}

.market-sort-icon {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  align-items: center;
  justify-items: center;
  width: 22px;
  height: 28px;
  padding: 4px 0;
  border: 1px solid rgba(71, 85, 105, 0.42);
  border-radius: 4px;
  background: rgba(30, 41, 59, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}

.market-sort-caret {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  transition: border-color 0.2s ease, opacity 0.2s ease;
}

.market-sort-caret-up {
  border-bottom: 6px solid rgba(148, 163, 184, 0.62);
}

.market-sort-caret-down {
  border-top: 6px solid rgba(148, 163, 184, 0.62);
}

.market-sort-head:hover .market-sort-icon,
.market-sort-head:focus-visible .market-sort-icon {
  border-color: rgba(96, 165, 250, 0.55);
  background: rgba(15, 23, 42, 0.92);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.12);
}

.market-sort-head:hover .market-sort-caret-up,
.market-sort-head:focus-visible .market-sort-caret-up {
  border-bottom-color: rgba(191, 219, 254, 0.88);
}

.market-sort-head:hover .market-sort-caret-down,
.market-sort-head:focus-visible .market-sort-caret-down {
  border-top-color: rgba(191, 219, 254, 0.88);
}

.market-sort-head.active .market-sort-icon {
  border-color: rgba(52, 211, 153, 0.38);
  background: rgba(15, 23, 42, 0.96);
}

.market-sort-head.active.is-asc .market-sort-caret-up {
  border-bottom-color: #34d399;
}

.market-sort-head.active.is-asc .market-sort-caret-down {
  border-top-color: rgba(148, 163, 184, 0.4);
}

.market-sort-head.active.is-desc .market-sort-caret-up {
  border-bottom-color: rgba(148, 163, 184, 0.4);
}

.market-sort-head.active.is-desc .market-sort-caret-down {
  border-top-color: #34d399;
}

.market-table-body {
  display: grid;
}

.market-list-row {
  position: relative;
  min-height: 72px;
  padding: 10px 16px;
  transition: background 0.2s ease;
}

.unit-price-row {
  position: relative;
  min-height: 72px;
  padding: 10px 16px;
  transition: background 0.2s ease;
}

.dept-exchange-row {
  position: relative;
  min-height: 72px;
  padding: 10px 16px;
  transition: background 0.2s ease;
}

.yesterday-ammo-profit-row {
  position: relative;
  min-height: 72px;
  padding: 10px 16px;
  transition: background 0.2s ease;
}

.market-list-row-clickable {
  cursor: pointer;
}

.unit-price-row-clickable {
  cursor: pointer;
}

.dept-exchange-row-clickable {
  cursor: pointer;
}

.yesterday-ammo-profit-row-clickable {
  cursor: pointer;
}

.market-list-row + .market-list-row {
  border-top: 1px solid rgba(30, 41, 59, 0.82);
}

.unit-price-row + .unit-price-row {
  border-top: 1px solid rgba(30, 41, 59, 0.82);
}

.dept-exchange-row + .dept-exchange-row {
  border-top: 1px solid rgba(30, 41, 59, 0.82);
}

.yesterday-ammo-profit-row + .yesterday-ammo-profit-row {
  border-top: 1px solid rgba(30, 41, 59, 0.82);
}

.market-list-row:hover {
  background: linear-gradient(90deg, rgba(15, 23, 42, 0.78), rgba(12, 74, 110, 0.16));
  box-shadow: inset 3px 0 0 rgba(52, 211, 153, 0.3);
}

.unit-price-row:hover {
  background: linear-gradient(90deg, rgba(15, 23, 42, 0.78), rgba(12, 74, 110, 0.16));
  box-shadow: inset 3px 0 0 rgba(52, 211, 153, 0.3);
}

.dept-exchange-row:hover {
  background: linear-gradient(90deg, rgba(15, 23, 42, 0.78), rgba(12, 74, 110, 0.16));
  box-shadow: inset 3px 0 0 rgba(52, 211, 153, 0.3);
}

.yesterday-ammo-profit-row:hover {
  background: linear-gradient(90deg, rgba(15, 23, 42, 0.78), rgba(12, 74, 110, 0.16));
  box-shadow: inset 3px 0 0 rgba(52, 211, 153, 0.3);
}

.market-list-row-clickable:hover .table-name {
  color: #7ef7c8;
}

.unit-price-row-clickable:hover .table-name {
  color: #7ef7c8;
}

.dept-exchange-row-clickable:hover .table-name {
  color: #7ef7c8;
}

.yesterday-ammo-profit-row-clickable:hover .table-name {
  color: #7ef7c8;
}

.market-list-row-clickable:focus-visible {
  outline: 1px solid rgba(60, 242, 178, 0.9);
  outline-offset: -1px;
}

.unit-price-row-clickable:focus-visible {
  outline: 1px solid rgba(60, 242, 178, 0.9);
  outline-offset: -1px;
}

.dept-exchange-row-clickable:focus-visible {
  outline: 1px solid rgba(60, 242, 178, 0.9);
  outline-offset: -1px;
}

.yesterday-ammo-profit-row-clickable:focus-visible {
  outline: 1px solid rgba(60, 242, 178, 0.9);
  outline-offset: -1px;
}

.market-item-card {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.market-item-copy {
  min-width: 0;
}

.market-item-copy .table-name {
  font-size: 14px;
  transition: color 0.2s ease;
}

.market-mini-tag {
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11px;
}

.market-value {
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.market-value.is-sorted-column {
  padding: 8px 10px;
  border: 1px solid rgba(52, 211, 153, 0.28);
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.18), rgba(15, 23, 42, 0.08));
  box-shadow:
    inset 0 0 0 1px rgba(15, 23, 42, 0.18),
    0 6px 14px rgba(5, 150, 105, 0.08);
}

.market-value.price {
  color: #f8fafc;
  font-size: 16px;
}

.market-list-row .grade-box.medium {
  width: 52px;
  height: 52px;
  border-radius: 10px;
}

.unit-price-row .grade-box.medium {
  width: 52px;
  height: 52px;
  border-radius: 10px;
}

.dept-exchange-row .grade-box.medium {
  width: 52px;
  height: 52px;
  border-radius: 10px;
}

.yesterday-ammo-profit-row .grade-box.medium {
  width: 52px;
  height: 52px;
  border-radius: 10px;
}

.market-list-row .table-thumb {
  width: 40px;
  height: 40px;
}

.unit-price-row .table-thumb {
  width: 40px;
  height: 40px;
}

.dept-exchange-row .table-thumb {
  width: 40px;
  height: 40px;
}

.yesterday-ammo-profit-row .table-thumb {
  width: 40px;
  height: 40px;
}

.dept-exchange-row .market-item-copy .section-subtitle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yesterday-ammo-profit-row .market-item-copy .section-subtitle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metric-label,
.small-label,
.section-subtitle {
  color: #94a3b8;
  font-size: 12px;
}

.metric-value,
.stat-value {
  margin-top: 10px;
  font-size: 28px;
  font-weight: 700;
}

.section-header,
.panel-title,
.market-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.align-start {
  align-items: flex-start;
}

.panel-title h2,
.section-title {
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
}

.pill,
.card-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(16, 185, 129, 0.28);
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.14), rgba(14, 116, 144, 0.08));
  color: #b8f7dd;
  font-size: 12px;
  font-weight: 600;
}

.tool-card-top,
.tool-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.tool-card-title,
.guide-title,
.password-card-title,
.item-title,
.row-title,
.table-name,
.sponsor-title {
  font-size: 15px;
  font-weight: 600;
}

.sponsor-title {
  font-size: 18px;
  margin: 10px 0 0;
}

.tool-card-title,
.guide-title {
  margin-top: 16px;
}

.tool-card-desc,
.guide-desc {
  margin-top: 8px;
  line-height: 1.75;
}

.compact-list .announcement-item {
  padding: 14px;
}

.quick-tool-card {
  min-height: 224px;
  display: flex;
  flex-direction: column;
}

.tool-card-footer {
  margin-top: auto;
  padding-top: 18px;
}

.guide-card {
  min-height: 210px;
  display: flex;
  flex-direction: column;
}

.guide-card .card-action {
  margin-top: auto;
}

.row-flex {
  display: flex;
  align-items: center;
  gap: 16px;
}

.row-top {
  align-items: flex-start;
  justify-content: space-between;
}

.row-end {
  justify-content: flex-end;
}

.password-code {
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(52, 211, 153, 0.32);
  background: rgba(16, 185, 129, 0.1);
  color: #6ee7b7;
  font-size: 22px;
  font-weight: 700;
}

.grade-box {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
}

.grade-box.large {
  height: 88px;
}

.grade-box.medium {
  width: 64px;
  height: 64px;
}

.grade-1 {
  background: linear-gradient(135deg, rgba(100, 116, 139, 0.45), rgba(30, 41, 59, 0.8));
}

.grade-2 {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.4), rgba(6, 95, 70, 0.85));
}

.grade-3 {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.38), rgba(30, 64, 175, 0.85));
}

.grade-4 {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.42), rgba(88, 28, 135, 0.88));
}

.grade-5 {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.42), rgba(154, 52, 18, 0.88));
}

.grade-6 {
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.42), rgba(136, 19, 55, 0.9));
}

.item-card img,
.manufacture-thumb,
.bazaar-thumb,
.table-thumb {
  width: 52px;
  height: 52px;
  object-fit: contain;
}

.pagination-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(30, 41, 59, 0.82);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(9, 20, 38, 0.94), rgba(8, 18, 36, 0.9));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.number-green,
.trend-up {
  color: #3cf2b2;
}

.number-amber {
  color: #fbbf24;
}

.trend-down {
  color: #ff8fa1;
}

.tips-list {
  padding-left: 18px;
  margin: 10px 0 0;
  color: #cbd5e1;
  line-height: 1.8;
}

.sticky-panel {
  position: sticky;
  top: 24px;
}

.input,
.select,
.nav-button {
  width: 100%;
  border: 1px solid #334155;
  border-radius: 14px;
  background: rgba(2, 6, 23, 0.9);
  color: #f8fafc;
  padding: 12px 14px;
}

.filter-group label {
  display: block;
  margin-bottom: 10px;
  color: #94a3b8;
  font-size: 12px;
}

.nav-button.active {
  border-color: rgba(52, 211, 153, 0.54);
  background: rgba(16, 185, 129, 0.12);
  color: #6ee7b7;
}

.table-shell {
  overflow: hidden;
}

.table-shell.market-board,
.table-shell.manufacture-board {
  overflow: visible;
}

.table-header,
.table-row {
  display: grid;
  grid-template-columns: 84px 1.5fr repeat(4, minmax(0, 0.8fr));
  gap: 16px;
  align-items: center;
  padding: 16px 20px;
}

.table-header {
  border-bottom: 1px solid #1e293b;
  color: #64748b;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.table-row + .table-row {
  border-top: 1px solid #1e293b;
}

.table-right {
  text-align: right;
}

button[disabled] {
  cursor: not-allowed;
  opacity: 0.48;
}

.state-block {
  min-height: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  padding: 28px 20px;
  border: 1px solid rgba(30, 41, 59, 0.82);
  background: radial-gradient(circle at top, rgba(16, 185, 129, 0.08), transparent 40%), rgba(8, 18, 36, 0.88);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.state-icon {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: 1px solid rgba(52, 211, 153, 0.3);
  background: rgba(16, 185, 129, 0.1);
  box-shadow:
    inset 0 0 0 8px rgba(6, 95, 70, 0.16),
    0 10px 24px rgba(5, 150, 105, 0.12);
}

.top-gap {
  margin-top: 16px;
}

.top-gap-sm {
  margin-top: 10px;
}

.top-gap-xs {
  margin-top: 6px;
}

.hidden {
  display: none !important;
}

@media (max-width: 1440px) {
  .jiazhang-filter-tabs-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .jiazhang-update-tag {
    max-width: 100%;
  }

  .zhanbei-plan-grid-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .zhanbei-plan-summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .zhanbei-plan-item-row {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .zhanbei-plan-item-diff {
    grid-column: 2;
    text-align: left;
  }

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

  .zhanbei-config-toolbar-head,
  .zhanbei-config-result-head,
  .zhanbei-config-detail-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .zhanbei-config-filter-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .zhanbei-config-filter-label {
    padding-top: 0;
  }

  .zhanbei-config-head-meta {
    justify-content: flex-start;
  }

  .zhanbei-config-tabs {
    margin-left: 0;
  }

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

  .ammo-profit-card-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 1080px) {
  .zhanbei-plan-grid-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}