/* ==========================================================================
   湖南钢材网 · 钢材报价系统
   视觉基准：Ardot 设计稿「钢材报价网站」
   深炭灰工业底 + 金属质感 + 橙红信号色 + 硬边直角
   ========================================================================== */

/* ---------- Tokens ----------
   2026-10-16 由「深炭灰工业风」翻转为「浅底高密度」，与首页 assets/home.css
   共用同一套设计语言。变量语义不变（--t1 最强 → --t6 最弱），
   只是把明暗关系倒过来：原来的「越亮越突出」变成「越深越突出」。
   report.html / admin.html 都读这一个文件，改这里等于两页同时换肤。 */
:root {
  --bg: #f2f3f5;
  --bg-alt: #ffffff;
  --bg-deep: #edeff2;
  --card: #ffffff;
  --card-head: #edeff2;
  --raised: #f7f8fa;

  --line: #e4e7ea;
  --line-2: #d3d7dc;
  --line-3: #bfc4cb;

  --brand: #e85d0b;
  --brand-soft: rgba(232, 93, 11, 0.1);
  --brand-line: rgba(232, 93, 11, 0.42);
  --brand-deep: rgba(232, 93, 11, 0.06);

  --up: #c62828;
  --down: #0e7a3c;
  --up-bg: #fdf0ef;
  --down-bg: #edf7f1;
  --flat-bg: #f0f2f4;

  --t1: #1d2126;
  --t2: #2e343b;
  --t3: #5b6370;
  --t4: #8b929c;
  --t5: #a3aab3;
  --t6: #b6bcc4;

  --font-cn: "Source Han Sans CN", "Noto Sans SC", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-num: "Barlow", "DIN Alternate", "Inter", "Helvetica Neue", Arial,
    sans-serif;

  --r-sm: 3px;
  --r-md: 4px;
  --r-lg: 5px;
  /* 与首页同宽：1180 是适合中文长表格阅读的行宽上限 */
  --shell: 1180px;
  --gutter: 20px;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--t2);
  font-family: var(--font-cn);
  font-size: 13px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img {
  max-width: 100%;
  display: block;
}
button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}
button {
  cursor: pointer;
  border: 0;
  background: none;
}
a {
  color: inherit;
  text-decoration: none;
}
h1,
h2,
h3,
h4,
p {
  margin: 0;
}
table {
  border-collapse: collapse;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---------- Utilities ---------- */
.num {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.wrap {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.section {
  padding: 80px 0;
  background: var(--bg);
}
.section--alt {
  background: var(--bg-alt);
}
.mono-eyebrow {
  font-family: var(--font-num);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--brand);
}
.sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 34px;
}
.sec-head__left {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* 区块头右侧的操作按钮组（导出 / 清空）。
   不套这层的话两个按钮会被 .sec-head 的 gap:40px 拉到两端。 */
.sec-head__acts {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.sec-head__title {
  display: flex;
  align-items: center;
  gap: 14px;
}
.sec-head__bar {
  width: 4px;
  height: 28px;
  background: var(--brand);
  flex: 0 0 auto;
}
.sec-head__title h2 {
  font-size: 32px;
  font-weight: 700;
  color: var(--t1);
  letter-spacing: -0.01em;
}
.sec-head__desc {
  font-size: 14px;
  color: var(--t4);
  max-width: 720px;
}
.sec-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--brand);
  white-space: nowrap;
  transition: opacity 0.15s;
}
.sec-link:hover {
  opacity: 0.78;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
}
.btn--primary {
  background: var(--brand);
  color: #131517;
}
.btn--primary:hover {
  background: #ff8038;
}
.btn--ghost {
  border: 1px solid var(--line-3);
  color: var(--t2);
}
.btn--ghost:hover {
  border-color: var(--brand-line);
  color: var(--brand);
}
.btn--lg {
  padding: 15px 28px;
  font-size: 15px;
}
.btn--sm {
  padding: 6px 14px;
  font-size: 12px;
  border-radius: var(--r-sm);
}
.btn--danger {
  border: 1px solid rgba(255, 92, 82, 0.45);
  color: var(--up);
}
.btn--danger:hover {
  background: var(--up-bg);
}
.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(23, 25, 28, 0.92);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  gap: 24px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}
.brand__mark {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
}
.brand__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.brand__name {
  font-size: 20px;
  font-weight: 700;
  color: var(--t1);
  line-height: 1.1;
}
.brand__sub {
  font-family: var(--font-num);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--t5);
  line-height: 1;
}
.main-nav {
  display: flex;
  align-items: center;
  gap: 32px;
}
.main-nav a {
  position: relative;
  font-size: 14px;
  font-weight: 500;
  color: var(--t3);
  padding-bottom: 5px;
  transition: color 0.15s;
}
.main-nav a:hover {
  color: var(--t1);
}
.main-nav a.is-active {
  color: var(--brand);
}
.main-nav a.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 18px;
  height: 2px;
  background: var(--brand);
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 22px;
  flex: 0 0 auto;
}
.header-phone {
  display: flex;
  align-items: center;
  gap: 8px;
}
.header-phone span {
  font-family: var(--font-num);
  font-size: 14px;
  font-weight: 600;
  color: var(--t1);
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  background: linear-gradient(120deg, #1d2024 0%, #131517 55%, #0e1012 100%);
  border-bottom: 1px solid var(--line);
  padding: 72px 0;
}
.hero__inner {
  display: grid;
  grid-template-columns: 660px minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}
.hero__copy {
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: flex-start;
}
.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 100px;
  background: var(--card);
  border: 1px solid var(--line-2);
  font-size: 12px;
  color: var(--t3);
}
.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--down);
  box-shadow: 0 0 0 0 rgba(35, 195, 106, 0.6);
  animation: pulse 2.2s infinite;
}
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(35, 195, 106, 0.55);
  }
  70% {
    box-shadow: 0 0 0 7px rgba(35, 195, 106, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(35, 195, 106, 0);
  }
}
.hero h1 {
  font-size: 48px;
  line-height: 1.28;
  font-weight: 700;
  color: var(--t1);
  letter-spacing: -0.02em;
}
.hero h1 em {
  font-style: normal;
  color: var(--brand);
}
.hero__sub {
  font-size: 15px;
  line-height: 1.75;
  color: var(--t3);
  max-width: 600px;
}
.hero__cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.hero__trust {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 4px;
}
.hero__trust-line {
  height: 1px;
  background: var(--line);
}
.hero__trust-row {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--t4);
}
.trust-sep {
  width: 1px;
  height: 12px;
  background: var(--line-3);
}

/* ---------- Quote quick card ---------- */
.qcard {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: hidden;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.qcard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
}
.qcard__title {
  display: flex;
  align-items: center;
  gap: 9px;
}
.qcard__title-bar {
  width: 3px;
  height: 15px;
  background: var(--brand);
}
.qcard__title strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--t1);
}
.qcard__meta {
  font-family: var(--font-num);
  font-size: 12px;
  font-weight: 500;
  color: var(--t5);
}
.qcard__divider {
  height: 1px;
  background: var(--line-2);
}
.qrow {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 20px;
  border-bottom: 1px solid rgba(42, 46, 52, 0.6);
  transition: background 0.15s;
}
.qrow:hover {
  background: rgba(255, 255, 255, 0.015);
}
.qrow:last-of-type {
  border-bottom: 0;
}
.qrow__info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.qrow__name {
  font-size: 14px;
  font-weight: 500;
  color: var(--t2);
}
.qrow__spec {
  font-family: var(--font-num);
  font-size: 11px;
  color: var(--t5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qrow__price {
  font-family: var(--font-num);
  font-size: 16px;
  font-weight: 600;
  color: var(--t1);
  flex: 0 0 auto;
}
.qcard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  background: var(--bg-alt);
  margin-top: auto;
  border-top: 1px solid var(--line-2);
}
.qcard__foot a {
  font-size: 13px;
  font-weight: 500;
  color: var(--brand);
}
.qcard__foot span {
  font-size: 12px;
  color: var(--t5);
}

/* ---------- Delta badge ---------- */
.delta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  padding: 3px 9px;
  border-radius: 3px;
  font-family: var(--font-num);
  font-size: 12px;
  font-weight: 600;
  background: var(--flat-bg);
  color: var(--t4);
}
.delta--up {
  background: var(--up-bg);
  color: var(--up);
}
.delta--down {
  background: var(--down-bg);
  color: var(--down);
}

/* ==========================================================================
   Chips / Toolbar
   ========================================================================== */
.chips {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.chip {
  padding: 8px 16px;
  border-radius: 100px;
  background: var(--card);
  border: 1px solid var(--line);
  font-size: 13px;
  font-weight: 500;
  color: var(--t3);
  transition: all 0.15s;
}
.chip:hover {
  border-color: var(--line-3);
  color: var(--t1);
}
.chip.is-active {
  background: var(--brand);
  border-color: var(--brand);
  color: #131517;
}

/* ==========================================================================
   Quote table
   ========================================================================== */
.table-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 280px;
  max-width: 100%;
  padding: 10px 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.search-box input {
  flex: 1 1 auto;
  min-width: 0;
  background: none;
  border: 0;
  outline: none;
  font-size: 13px;
  color: var(--t1);
}
.search-box input::placeholder {
  color: var(--t6);
}
.tools-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.tools-note {
  font-family: var(--font-num);
  font-size: 12px;
  color: var(--t5);
}

.price-table {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: hidden;
}
.pt-scroll {
  width: 100%;
  overflow-x: auto;
}
.pt-grid {
  min-width: 940px;
}
.pt-row {
  display: grid;
  /* 前台报价表是只读的，「操作」列（改价入口）已撤掉 */
  grid-template-columns: minmax(240px, 1fr) 110px 130px 130px 90px 110px;
  gap: 16px;
  align-items: center;
  padding: 12px 20px;
}
.pt-head {
  background: var(--card-head);
  padding-top: 13px;
  padding-bottom: 13px;
}
.pt-head span {
  font-size: 12px;
  font-weight: 500;
  color: var(--t5);
}
.pt-body .pt-row {
  border-bottom: 1px solid rgba(42, 46, 52, 0.62);
  transition: background 0.15s;
}
.pt-body .pt-row:hover {
  background: rgba(255, 255, 255, 0.018);
}
.pt-body .pt-row:last-child {
  border-bottom: 0;
}
.pt-row.is-flash {
  animation: flash 1.6s ease-out;
}
@keyframes flash {
  0% {
    background: rgba(255, 107, 26, 0.16);
  }
  100% {
    background: transparent;
  }
}
.al-r {
  text-align: right;
  justify-content: flex-end;
}
.cell-mat {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.cell-mat__name {
  font-size: 14px;
  font-weight: 500;
  color: var(--t1);
  white-space: nowrap;
}
.spec-pill {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 3px;
  background: var(--raised);
  font-family: var(--font-num);
  font-size: 11px;
  color: var(--t4);
  white-space: nowrap;
}
.cell-txt {
  font-size: 13px;
  color: var(--t3);
}
.cell-price {
  font-family: var(--font-num);
  font-size: 16px;
  font-weight: 600;
  color: var(--t1);
  text-align: right;
}
.cell-time {
  font-family: var(--font-num);
  font-size: 12px;
  font-weight: 500;
  color: var(--t5);
}
.cell-act {
  display: flex;
  justify-content: flex-end;
}
.pt-empty {
  padding: 56px 20px;
  text-align: center;
  color: var(--t5);
  font-size: 13px;
}
.pt-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 20px;
  background: var(--bg-alt);
  border-top: 1px solid var(--line-2);
  font-size: 12px;
  color: var(--t5);
}
.pager {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pager button {
  width: 26px;
  height: 26px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  font-family: var(--font-num);
  font-size: 12px;
  font-weight: 600;
  color: var(--t4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pager button:hover:not(:disabled) {
  border-color: var(--line-3);
  color: var(--t1);
}
.pager button.is-active {
  background: var(--brand);
  color: #131517;
}

/* ==========================================================================
   Category grid
   ========================================================================== */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.cat-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 2px;
  transition: border-color 0.18s, transform 0.18s;
}
.cat-card:hover {
  border-color: var(--brand-line);
  transform: translateY(-2px);
}
.cat-card__icon {
  width: 28px;
  height: 28px;
}
.cat-card__name {
  font-size: 16px;
  font-weight: 500;
  color: var(--t1);
}
.cat-card__spec {
  font-family: var(--font-num);
  font-size: 12px;
  color: var(--t5);
}
.cat-card__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 2px;
}
.cat-card__price b {
  font-family: var(--font-num);
  font-size: 20px;
  font-weight: 600;
  color: var(--t1);
}
.cat-card__price i {
  font-style: normal;
  font-size: 11px;
  color: var(--t5);
}

/* ==========================================================================
   Trend + News
   ========================================================================== */
.trend-body {
  display: grid;
  grid-template-columns: minmax(0, 1.52fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 2px;
}
.panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 24px;
}
.panel__head--pad {
  padding: 20px 24px;
}
.panel__head h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 700;
  color: var(--t1);
}
.panel__head h3::before {
  content: "";
  width: 3px;
  height: 15px;
  background: var(--brand);
}
.panel__head .link {
  font-size: 12px;
  color: var(--brand);
}
.panel__divider {
  height: 1px;
  background: var(--line-2);
}
.panel__pad {
  padding: 18px 24px;
}
.chart-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chart-meta__label {
  font-size: 12px;
  color: var(--t4);
}
.chart-meta__price {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.chart-meta__price b {
  font-family: var(--font-num);
  font-size: 26px;
  font-weight: 600;
  color: var(--t1);
}
.chart-meta__price span {
  font-size: 12px;
  color: var(--up);
}
.chart-meta__price span.is-down {
  color: var(--down);
}
.chart svg {
  display: block;
  width: 100%;
  height: auto;
}
.panel__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 24px;
  background: var(--bg-alt);
  border-top: 1px solid var(--line-2);
  font-size: 11px;
  color: var(--t6);
}
.legend {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: var(--t5);
}
.legend i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
}
.range-tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border-radius: var(--r-md);
  background: var(--bg-alt);
}
.range-tabs button {
  padding: 6px 14px;
  border-radius: var(--r-sm);
  font-size: 12px;
  font-weight: 500;
  color: var(--t4);
}
.range-tabs button.is-active {
  background: var(--brand);
  color: #131517;
}
.stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.news-item {
  display: flex;
  gap: 14px;
  padding: 15px 20px;
  border-bottom: 1px solid rgba(42, 46, 52, 0.62);
}
.news-item:last-child {
  border-bottom: 0;
}
.news-item__date {
  font-family: var(--font-num);
  font-size: 12px;
  font-weight: 600;
  color: var(--t5);
  flex: 0 0 auto;
  padding-top: 1px;
}
.news-item__text {
  font-size: 13px;
  line-height: 1.7;
  color: var(--t3);
}
.log-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 20px;
  border-bottom: 1px solid rgba(42, 46, 52, 0.62);
}
.log-item:last-child {
  border-bottom: 0;
}
.log-item__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.log-item__name {
  font-size: 12px;
  color: var(--t3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.log-item__meta {
  font-size: 11px;
  color: var(--t6);
}
.log-item__change {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.log-item__old {
  font-family: var(--font-num);
  font-size: 12px;
  font-weight: 500;
  color: var(--t5);
  text-decoration: line-through;
}
.log-item__new {
  font-family: var(--font-num);
  font-size: 13px;
  font-weight: 600;
}
.log-item__new.is-up {
  color: var(--up);
}
.log-item__new.is-down {
  color: var(--down);
}
.log-item__new.is-flat {
  color: var(--t4);
}
.log-empty {
  padding: 28px 20px;
  text-align: center;
  font-size: 12px;
  color: var(--t6);
}

/* ==========================================================================
   Inquiry
   ========================================================================== */
.inquiry {
  display: grid;
  grid-template-columns: minmax(0, 1.52fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.form-card__head {
  padding: 24px 28px;
  border-bottom: 1px solid var(--line-2);
}
.form-card__head h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--t1);
  margin-bottom: 9px;
}
.form-card__head p {
  font-size: 13px;
  color: var(--t4);
}
.form-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px 28px;
}
.field-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.field-row--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.field label {
  font-size: 12px;
  color: var(--t4);
}
.input {
  width: 100%;
  height: 42px;
  padding: 0 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 13px;
  color: var(--t1);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.input::placeholder {
  color: var(--t6);
}
.input:focus {
  border-color: var(--brand-line);
  box-shadow: 0 0 0 3px var(--brand-deep);
}
.input--err {
  border-color: rgba(255, 92, 82, 0.7);
}
.form-note {
  font-size: 11px;
  color: var(--t6);
}
.contact-card {
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.contact-card--tight {
  gap: 10px;
}
.contact-card__label {
  font-size: 12px;
  color: var(--t5);
}
.contact-card__phone {
  font-family: var(--font-num);
  font-size: 30px;
  font-weight: 600;
  color: var(--t1);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.contact-card__time {
  font-size: 12px;
  color: var(--t4);
}
.contact-card h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--t1);
}
.wechat-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.qr-box {
  width: 84px;
  height: 84px;
  flex: 0 0 auto;
  border-radius: var(--r-sm);
  background: var(--raised);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--t5);
  text-align: center;
  line-height: 1.4;
}
.wechat-info {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.wechat-info strong {
  font-size: 13px;
  font-weight: 500;
  color: var(--t2);
}
.wechat-info p {
  font-size: 12px;
  line-height: 1.6;
  color: var(--t5);
}
.wh-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.wh-row i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand);
  flex: 0 0 auto;
}
.wh-row span {
  font-size: 13px;
  color: var(--t3);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--bg-deep);
  border-top: 1px solid var(--line);
  padding: 56px 0 40px;
  overflow: hidden;
}
.footer-top {
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  gap: 60px;
  margin-bottom: 34px;
}
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.footer-brand__row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.footer-brand__row strong {
  font-size: 18px;
  font-weight: 700;
  color: var(--t1);
}
.footer-brand__desc {
  font-size: 12px;
  line-height: 1.75;
  color: var(--t5);
}
.footer-brand__contact {
  font-size: 12px;
  color: var(--t5);
}
.footer-links {
  display: flex;
  gap: 56px;
  justify-content: flex-end;
}
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.footer-col strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--t2);
}
.footer-col a {
  font-size: 12px;
  color: var(--t5);
  transition: color 0.15s;
}
.footer-col a:hover {
  color: var(--brand);
}
.footer-line {
  height: 1px;
  background: #22262b;
}
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 20px 0 8px;
  font-size: 11px;
  color: var(--t6);
}
.footer-giant {
  font-family: var(--font-num);
  font-size: 130px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  text-align: center;
  color: #191c21;
  user-select: none;
  margin: 8px 0 -24px;
  white-space: nowrap;
}

/* ==========================================================================
   Admin
   ========================================================================== */
.admin-bar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(23, 25, 28, 0.94);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.admin-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 68px;
}
.admin-bar__tag {
  padding: 3px 9px;
  border-radius: 3px;
  background: var(--brand-soft);
  border: 1px solid var(--brand-line);
  font-size: 11px;
  font-weight: 500;
  color: var(--brand);
}
.admin-user {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--t4);
}
.avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--raised);
  border: 1px solid var(--line-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-num);
  font-size: 12px;
  font-weight: 600;
  color: var(--brand);
}
.admin-main {
  padding: 34px 0 80px;
}
.admin-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.admin-head h1 {
  font-size: 26px;
  font-weight: 700;
  color: var(--t1);
  letter-spacing: -0.01em;
}
.admin-head p {
  font-size: 13px;
  color: var(--t4);
  margin-top: 8px;
}
.stat-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.stat {
  flex: 1 1 180px;
  padding: 16px 20px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 2px;
}
.stat__label {
  font-size: 12px;
  color: var(--t5);
  margin-bottom: 8px;
}
.stat__value {
  font-family: var(--font-num);
  font-size: 22px;
  font-weight: 600;
  color: var(--t1);
}
.stat__value small {
  font-size: 12px;
  font-weight: 400;
  color: var(--t5);
  margin-left: 4px;
}
.stat--brand {
  border-color: var(--brand-line);
  background: linear-gradient(
    135deg,
    rgba(255, 107, 26, 0.09),
    rgba(255, 107, 26, 0) 70%
  ),
  var(--card);
}
.stat__value--up {
  color: var(--up);
}
.stat__value--down {
  color: var(--down);
}

/* admin table */
.at-row {
  display: grid;
  grid-template-columns: 40px minmax(240px, 1fr) 80px 90px 80px 130px 90px 150px;
  gap: 16px;
  align-items: center;
  padding: 11px 20px;
}
.at-head {
  background: var(--card-head);
}
.at-head span {
  font-size: 12px;
  font-weight: 500;
  color: var(--t5);
}
.at-body .at-row {
  border-bottom: 1px solid rgba(42, 46, 52, 0.62);
  transition: background 0.15s;
}
.at-body .at-row:hover {
  background: rgba(255, 255, 255, 0.018);
}
.at-body .at-row.is-selected {
  background: rgba(255, 107, 26, 0.06);
}
.checkbox {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  border: 1.5px solid var(--line-3);
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex: 0 0 auto;
}
.checkbox.is-checked {
  background: var(--brand);
  border-color: var(--brand);
}
.cell-price-edit {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  font-family: var(--font-num);
  font-size: 16px;
  font-weight: 600;
  color: var(--t1);
}
.cell-price-edit .cur {
  font-size: 10px;
  color: var(--brand);
  font-family: var(--font-cn);
  font-weight: 400;
  border: 1px solid var(--brand-line);
  background: var(--brand-soft);
  border-radius: 3px;
  padding: 1px 5px;
  line-height: 1.4;
}
.price-changed {
  color: var(--brand);
}

/* login */
.login-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background: radial-gradient(
      900px 500px at 50% -10%,
      rgba(255, 107, 26, 0.09),
      transparent 65%
    ),
    var(--bg);
}

/* --- 启动闸门 -------------------------------------------------------------
   后台要等云端会话回话才知道该进「登录 / 待开通 / 后台」哪一个视图。这段空窗期
   里三个外壳一律压住、只留载入态，否则已登录时刷新页面会先渲染出登录框、
   几百毫秒后再被后台页顶掉 —— 看着像「被登出了又立刻恢复」。
   类名由 admin.html 的页内脚本加上，admin.js 在路由判定完成后摘掉。 */
html.is-booting #loginView,
html.is-booting #pendingView,
html.is-booting #adminView {
  display: none !important;
}
.boot-splash {
  display: none;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 13px;
  color: var(--t4);
  /* 与 .login-shell 同底色：载入完直接换成登录卡或后台页，中间不跳色 */
  background: radial-gradient(
      900px 500px at 50% -10%,
      rgba(255, 107, 26, 0.09),
      transparent 65%
    ),
    var(--bg);
}
html.is-booting .boot-splash {
  display: flex;
}
.boot-splash__spin {
  width: 14px;
  height: 14px;
  border: 2px solid var(--line-2);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: bootSpin 0.7s linear infinite;
}
@keyframes bootSpin {
  to {
    transform: rotate(360deg);
  }
}
.login-card {
  width: 100%;
  max-width: 420px;
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  padding: 34px 32px 30px;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.75);
}
.login-card__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 26px;
}
.login-card h1 {
  font-size: 20px;
  font-weight: 700;
  color: var(--t1);
  margin-bottom: 8px;
}
.login-card > p {
  font-size: 13px;
  color: var(--t4);
  margin-bottom: 24px;
}
.login-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.login-hint {
  margin-top: 20px;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  background: var(--bg);
  border: 1px dashed var(--line-3);
  font-size: 12px;
  color: var(--t5);
  line-height: 1.7;
}
.login-hint code {
  font-family: var(--font-num);
  color: var(--brand);
  font-weight: 600;
}
/* 浏览器禁用站点数据 / 云端不可用时的降级提示 */
.storage-warn,
.data-warn {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 20px;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  background: rgba(255, 107, 26, 0.08);
  border: 1px solid rgba(255, 107, 26, 0.32);
  font-size: 12px;
  line-height: 1.7;
  color: var(--t5);
}
.data-warn {
  margin: 18px 0 0;
}
/* .data-warn 自带 display:flex，会盖掉浏览器默认的 [hidden]{display:none}：
   云端模式下本该隐藏的提示条，会变成一个空白的橙色框常驻在页面顶部。 */
.data-warn[hidden] {
  display: none;
}
.storage-warn strong,
.data-warn strong {
  color: var(--brand);
  font-size: 12.5px;
  font-weight: 600;
}

/* --- 登录：验证码行 --- */
.code-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.code-row .input {
  flex: 1;
  min-width: 0;
}
.btn--code {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 0 16px;
  font-size: 13px;
}
.btn--code:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.field-hint {
  font-size: 11.5px;
  color: var(--t6);
  line-height: 1.6;
}
/* 重发之后旧验证码作废 —— 这条提示得让人一眼看到 */
.field-hint--warn {
  color: var(--brand);
}
/* 登录页底部的构建标识：用于分辨「当前打开的是哪个部署」 */
.build-tag {
  margin: 16px 0 0;
  font-size: 11px;
  color: var(--t5);
  letter-spacing: 0.2px;
  font-family: var(--font-num), var(--font-cn), monospace;
  word-break: break-all;
}

/* --- 待开通改价权限 --- */
.uid-box {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 0 0;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  background: var(--bg);
  border: 1px dashed var(--line-3);
}
.uid-box__label {
  font-size: 11.5px;
  color: var(--t6);
  white-space: nowrap;
}
.uid-box code {
  flex: 1;
  min-width: 0;
  font-family: var(--font-num);
  font-size: 13px;
  color: var(--brand);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.pending-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

/* --- 加载骨架 --- */
.sk-row {
  height: 46px;
  margin: 8px 14px;
  border-radius: 4px;
  background: linear-gradient(90deg, #1f2429 0%, #262c33 50%, #1f2429 100%);
  background-size: 200% 100%;
  animation: skSlide 1.3s ease-in-out infinite;
}
@keyframes skSlide {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.form-error {
  font-size: 12px;
  color: var(--up);
  min-height: 18px;
}

/* 弹窗里的保存失败：原来只是一行 12px 红字，压在明细表下方，
   滚动一下就在视野外。做成整块告警条，跟弹窗顶端的告警弹窗一起出现，
   关掉弹窗后它还在，不会「说完就没了」。 */
.form-error--banner {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 13px;
  border: 1px solid rgba(198, 40, 40, 0.28);
  border-left: 3px solid var(--up);
  border-radius: var(--r-sm);
  background: var(--up-bg);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--up);
  min-height: 0;
}
.form-error--banner[hidden] {
  display: none;
}
.form-error--banner::before {
  content: "!";
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--up);
  font-size: 11px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
  color: #fff;
}

/* log table */
.log-table .lt-row {
  display: grid;
  grid-template-columns: 130px minmax(220px, 1fr) 110px 130px 130px 120px;
  gap: 16px;
  align-items: center;
  padding: 11px 20px;
}
.log-table .lt-head {
  background: var(--card-head);
}
.log-table .lt-head span {
  font-size: 12px;
  color: var(--t5);
}
.log-table .lt-body .lt-row {
  border-bottom: 1px solid rgba(42, 46, 52, 0.62);
  font-size: 12px;
  color: var(--t3);
}
.log-table .lt-body .lt-row:last-child {
  border-bottom: 0;
}
.tag-reason {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  background: var(--raised);
  font-size: 11px;
  color: var(--t4);
}

/* ==========================================================================
   Modal & Toast
   ========================================================================== */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(6, 7, 9, 0.72);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s;
  overflow-y: auto;
}
.overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}
.modal {
  width: 100%;
  max-width: 580px;
  background: var(--card);
  border: 1px solid var(--line-3);
  border-radius: var(--r-lg);
  box-shadow: 0 30px 70px -12px rgba(0, 0, 0, 0.8);
  overflow: hidden;
  transform: translateY(10px) scale(0.99);
  transition: transform 0.2s;
  margin: auto;
}
.overlay.is-open .modal {
  transform: none;
}
.modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
}
.modal__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 700;
  color: var(--t1);
}
.modal__title::before {
  content: "";
  width: 3px;
  height: 17px;
  background: var(--brand);
}
.modal__close {
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--t5);
  font-size: 18px;
  line-height: 1;
}
.modal__close:hover {
  background: var(--raised);
  color: var(--t1);
}
.modal__divider {
  height: 1px;
  background: var(--line-2);
}
.modal__body {
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.modal__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 24px;
  background: var(--bg-alt);
}
.modal__foot-note {
  font-size: 11px;
  color: var(--t6);
}
.modal__btns {
  display: flex;
  gap: 10px;
  margin-left: auto;
}
.material-box {
  padding: 14px 16px;
  background: var(--bg);
  border-radius: var(--r-sm);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.material-box strong {
  font-size: 13px;
  font-weight: 500;
  color: var(--t2);
}
.material-box span {
  font-size: 11px;
  color: var(--t5);
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.value-readonly {
  height: 44px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  border-radius: var(--r-sm);
  background: var(--bg);
  border: 1px solid var(--line);
  font-family: var(--font-num);
  font-size: 16px;
  font-weight: 600;
  color: var(--t3);
}
.input--price {
  height: 44px;
  font-family: var(--font-num);
  font-size: 16px;
  font-weight: 600;
  border-color: var(--brand-line);
  border-width: 1.5px;
  text-align: right;
}
.preview-line {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--t4);
  flex-wrap: wrap;
}
.preview-line b {
  font-family: var(--font-num);
  font-size: 14px;
}
.notice {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: #21242a;
  font-size: 11px;
  line-height: 1.6;
  color: var(--t4);
}
.notice svg {
  flex: 0 0 auto;
}
.seg {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  border-radius: var(--r-md);
  background: var(--bg);
  border: 1px solid var(--line);
}
.seg button {
  padding: 7px 16px;
  border-radius: var(--r-sm);
  font-size: 12px;
  font-weight: 500;
  color: var(--t4);
}
.seg button.is-active {
  background: var(--brand);
  color: #131517;
}
select.input {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.5 5.5L7 9l3.5-3.5' stroke='%237C858F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
}
select.input option {
  background: #1c1f23;
  color: #e5e5e5;
}

.toast-host {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 240px;
  padding: 12px 16px;
  border-radius: var(--r-md);
  background: #20252b;
  border: 1px solid var(--line-3);
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.7);
  font-size: 13px;
  color: var(--t2);
  animation: toastIn 0.22s ease-out;
}
.toast::before {
  content: "";
  width: 3px;
  align-self: stretch;
  border-radius: 2px;
  background: var(--brand);
}
.toast--ok::before {
  background: var(--down);
}
.toast--warn::before {
  background: var(--up);
}
@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
.toast.is-out {
  animation: toastOut 0.2s forwards;
}
@keyframes toastOut {
  to {
    opacity: 0;
    transform: translateX(12px);
  }
}

/* ==========================================================================
   告警弹窗（保存失败 / 重复操作）
   ========================================================================== */
/* 必须压在其他弹窗之上：它常常是「编辑弹窗里点保存失败」弹出来的 */
.overlay--alert {
  z-index: 400;
}
.modal--alert {
  max-width: 460px;
}
/* .btn 自带 display:inline-flex，会盖掉浏览器默认的 [hidden]{display:none} ——
   「只有一个按钮」的告警会连另一个也显示出来（两个按钮还长得不一样，更容易点错）。
   用后代选择器把权重提到 .btn 之上，无论规则顺序如何都生效。 */
.modal--alert [hidden] {
  display: none;
}
.alert {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 24px 24px 20px;
}
.alert__badge {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(198, 40, 40, 0.35);
  background: var(--up-bg);
  font-size: 18px;
  font-weight: 700;
  line-height: 30px;
  text-align: center;
  color: var(--up);
}
.modal--alert[data-tone="warn"] .alert__badge {
  border-color: #f0e0a8;
  background: #fff8e1;
  color: #a8720a;
}
.alert__text {
  min-width: 0;
}
.alert__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--t1);
}
.alert__msg {
  margin-top: 7px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--t2);
  word-break: break-word;
}
.alert__detail {
  margin-top: 10px;
  padding: 9px 12px;
  border-left: 3px solid var(--line-3);
  border-radius: var(--r-sm);
  background: var(--raised);
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--t3);
}
.modal--alert .modal__foot-note {
  color: var(--t5);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1280px) {
  :root {
    --gutter: 40px;
  }
  .hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 36px;
  }
  .cat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .footer-giant {
    font-size: 96px;
  }
}
@media (max-width: 1080px) {
  .main-nav {
    display: none;
  }
  .hero h1 {
    font-size: 38px;
  }
  .hero__inner,
  .trend-body,
  .inquiry,
  .footer-top {
    grid-template-columns: minmax(0, 1fr);
  }
  .cat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .footer-links {
    justify-content: flex-start;
    gap: 40px;
    flex-wrap: wrap;
  }
  .field-row,
  .field-row--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  :root {
    --gutter: 20px;
  }
  .section,
  .hero {
    padding: 48px 0;
  }
  .hero h1 {
    font-size: 30px;
  }
  .sec-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
  .sec-head__title h2 {
    font-size: 24px;
  }
  .cat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .field-row,
  .field-row--2 {
    grid-template-columns: minmax(0, 1fr);
  }
  .header-phone {
    display: none;
  }
  .footer-giant {
    font-size: 52px;
    margin-bottom: -10px;
  }
  .search-box {
    width: 100%;
  }
  .stat {
    flex: 1 1 140px;
  }
}
@media (max-width: 520px) {
  .cat-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero__cta {
    width: 100%;
  }
  .hero__cta .btn {
    flex: 1 1 auto;
  }
}

/* ==========================================================================
   每日行情存档（首页列表）
   ========================================================================== */
.report-list {
  padding: 0;
}
.report-empty {
  padding: 34px 22px;
  color: var(--t5);
  font-size: 14px;
}
.report-empty .link {
  color: var(--brand);
}

.report-item {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 20px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  transition: background 0.16s ease;
}
.report-item:last-child {
  border-bottom: 0;
}
.report-item:hover {
  background: #1f2429;
}

.report-item__date {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--font-num);
}
.report-item__date b {
  font-size: 20px;
  font-weight: 700;
  color: var(--t1);
  letter-spacing: 0.02em;
  line-height: 1.1;
}
.report-item__date i {
  font-style: normal;
  font-size: 11px;
  color: var(--t6);
  letter-spacing: 0.08em;
}

.report-item__main {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.report-item__title {
  font-size: 15px;
  font-weight: 500;
  color: var(--t1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.report-item__meta {
  font-size: 12px;
  color: var(--t5);
}

.report-item__stats {
  display: flex;
  gap: 8px;
}
.rp-stat {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 100px;
  background: var(--flat-bg);
  color: var(--t4);
  white-space: nowrap;
}
.rp-stat--up {
  background: var(--up-bg);
  color: var(--up);
}
.rp-stat--down {
  background: var(--down-bg);
  color: var(--down);
}

.report-item__go {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--brand);
  white-space: nowrap;
}
.report-more {
  padding: 16px 22px;
  border-top: 1px solid var(--line);
  text-align: center;
}

/* ==========================================================================
   每日行情详情页
   ========================================================================== */
.rp-body {
  background: var(--bg);
}
.rp-main {
  padding: 26px 0 60px;
}

.rp-crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  font-size: 12px;
  color: var(--t6);
}
.rp-crumb a {
  color: var(--t4);
  text-decoration: none;
}
.rp-crumb a:hover {
  color: var(--brand);
}
.rp-crumb__cur {
  color: var(--t3);
}

.rp-panel {
  padding: 30px 32px 34px;
}
.rp-missing {
  padding: 64px 32px;
  text-align: center;
}
.rp-missing h2 {
  margin: 0 0 10px;
  font-size: 20px;
  color: var(--t1);
}
.rp-missing p {
  margin: 0 0 22px;
  font-size: 14px;
  color: var(--t5);
}

.rp-head {
  margin-bottom: 16px;
}
.rp-title {
  margin: 0 0 10px;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: var(--t1);
}
.rp-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--t5);
}
.rp-sub__sep {
  color: var(--line-3);
}

.rp-summary {
  margin: 0 0 22px;
  padding: 14px 16px;
  background: var(--bg-deep);
  border-left: 2px solid var(--brand);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 13px;
  line-height: 1.85;
  color: var(--t3);
}

.rp-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.rp-toolbar__left {
  display: flex;
  gap: 10px;
}
.rp-toolbar__right {
  display: flex;
  gap: 8px;
}
.rp-nav__btn {
  padding: 6px 10px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  font-size: 12px;
  color: var(--t4);
  text-decoration: none;
}
.rp-nav__btn:hover {
  border-color: var(--brand-line);
  color: var(--brand);
}
.rp-nav__btn.is-off {
  border-color: var(--line);
  color: var(--t6);
}

/* 筛选 */
.rp-filters {
  margin-bottom: 20px;
}
.rp-filters__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.3fr);
  gap: 12px;
}
.rp-filter {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.rp-filter__label {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--t6);
}
.input--select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 30px;
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239aa3ad' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.rp-filters__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 14px;
}
.rp-active {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.rp-active__none {
  font-size: 12px;
  color: var(--t6);
}
.rp-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px;
  background: var(--brand-soft);
  border: 1px solid var(--brand-line);
  border-radius: 100px;
  font-size: 12px;
  color: var(--brand);
  cursor: pointer;
}
.rp-chip__x {
  font-size: 10px;
  opacity: 0.75;
}
.rp-filters__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 数据表 */
.rp-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
}
.rp-table {
  width: 100%;
  min-width: 880px;
  border-collapse: collapse;
  font-size: 13px;
}
.rp-th {
  padding: 11px 14px;
  background: var(--card-head);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line-3);
  font-family: var(--font-num);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--t3);
  text-align: left;
  white-space: nowrap;
}
.rp-th:last-child {
  border-right: 0;
}
.rp-th--num {
  text-align: right;
}
.rp-td {
  padding: 10px 14px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--t3);
  vertical-align: top;
}
.rp-td:last-child {
  border-right: 0;
}
.rp-table tbody tr:last-child .rp-td {
  border-bottom: 0;
}
.rp-table tbody tr:hover .rp-td {
  background: #1f2429;
}
.rp-td--mat {
  font-weight: 500;
  color: var(--t1);
}
.rp-td--num {
  font-family: var(--font-num);
  text-align: right;
  white-space: nowrap;
}
.rp-td--price {
  font-size: 14px;
  font-weight: 600;
  color: var(--t1);
}
.rp-chg.is-up {
  color: var(--up);
}
.rp-chg.is-down {
  color: var(--down);
}
.rp-chg.is-flat {
  color: var(--t6);
}
.rp-empty {
  padding: 30px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--t5);
}

/* 备注说明 */
.rp-notes {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.rp-notes h3 {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--t2);
}
.rp-notes__body {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.rp-note-line {
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--t4);
}

/* ==========================================================================
   打印：只输出数据表
   ========================================================================== */
@media print {
  @page {
    size: A4 landscape;
    margin: 10mm;
  }

  html,
  body {
    background: #fff !important;
  }

  .no-print,
  .site-header,
  .site-footer,
  .rp-crumb,
  .rp-head,
  .rp-summary,
  .rp-toolbar,
  .rp-filters,
  .rp-notes,
  .data-warn,
  .toast-host {
    display: none !important;
  }

  .rp-main {
    padding: 0 !important;
  }
  .wrap {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .panel,
  .rp-panel {
    padding: 0 !important;
    background: #fff !important;
    border: 0 !important;
  }

  .rp-table-wrap {
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
  }
  .rp-table {
    width: 100% !important;
    min-width: 0 !important;
    font-size: 10.5pt;
  }
  .rp-th {
    padding: 6px 8px;
    background: #f0f0f0 !important;
    border: 1px solid #666 !important;
    color: #000 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .rp-td {
    padding: 5px 8px;
    border: 1px solid #666 !important;
    background: transparent !important;
    color: #000 !important;
  }
  .rp-td--mat,
  .rp-td--price,
  .rp-chg,
  .rp-chg.is-up,
  .rp-chg.is-down,
  .rp-chg.is-flat {
    color: #000 !important;
  }
  .rp-empty {
    display: none !important;
  }
  thead {
    display: table-header-group;
  }
  tr {
    page-break-inside: avoid;
  }
}

/* ==========================================================================
   响应式
   ========================================================================== */
@media (max-width: 1080px) {
  .rp-filters__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .rp-filter--kw {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .report-item {
    grid-template-columns: 68px minmax(0, 1fr) auto;
    gap: 14px;
    padding: 14px 16px;
  }
  .report-item__stats {
    display: none;
  }
  .rp-panel {
    padding: 22px 16px 26px;
  }
  .rp-title {
    font-size: 20px;
  }
  .rp-toolbar__right {
    width: 100%;
  }
  .rp-table {
    min-width: 720px;
  }
}

@media (max-width: 520px) {
  .rp-filters__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .rp-filters__actions {
    width: 100%;
    justify-content: space-between;
  }
}

/* ==========================================================================
   后台 · 行情日报管理
   ========================================================================== */
/* 日报弹窗字段多且明细可长，钉住头尾、只让主体滚动 */
.modal--wide {
  max-width: 1000px;
  max-height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
}
.modal--wide > .modal__head {
  flex: 0 0 auto;
}
.modal--wide > form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.modal--wide .modal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* 主体是 flex 列容器：子项默认 flex-shrink:1，而 overflow:hidden 的块自动最小高度为 0，
   会被压扁（明细区就踩过这个坑）。这里统一禁止子项收缩，溢出交给主体滚动。 */
.modal--wide .modal__body > *,
.modal--wide .field > *,
.modal--wide .textarea {
  flex: 0 0 auto;
}
.modal--wide .modal__foot {
  flex: 0 0 auto;
}

.textarea {
  height: auto;
  padding: 10px 14px;
  line-height: 1.7;
  resize: vertical;
  font-family: var(--font-cn);
}
.textarea--paste {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  white-space: pre;
  overflow-x: auto;
}

.field-hint-inline {
  margin-left: 8px;
  font-size: 11px;
  font-weight: 400;
  color: var(--t6);
}

.rp-paste {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.rp-paste__foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 9px;
}

/* ---- 行情日报·表格粘贴导入 ---- */
.rp-import-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
}
.input--mini {
  width: 110px;
  height: 30px;
  padding: 0 10px;
  margin-left: 6px;
  font-size: 12px;
}
.rp-import-status {
  margin: 8px 0 0;
  line-height: 1.6;
}
.rp-import-status[data-tone="ok"] { color: #0E7A3C; }
.rp-import-status[data-tone="warn"] { color: #C62828; }
.rp-import-status[data-tone="busy"] { color: var(--t6); }

.rp-items-wrap {
  margin-top: 6px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  /* 用 auto 而不是 hidden：窄屏时明细表要能横向滚动，否则右侧「删」列会被直接裁掉 */
  overflow-x: auto;
}

/* 行情日报列表上方的日期筛选条。
   库里已经 136 期 / 14 页，先按时间段收窄再翻页。
   不另起一套外观：只留一条发丝分隔线（同日报页 .rp-toolbar），日期格与全站输入框
   同规格（1px --line-2 边框、--r-sm 圆角、--card 底），按钮直接用 .btn--primary /
   .btn--ghost 的 .btn--sm 尺寸。
   原生 date 不露外观（Win Chrome 是「年/月/日」三段 + 小日历），input 绝对定位
   铺满整格并 opacity:0，值由 .pt-filter__val 显示；点按 / 键盘 / 读屏仍走原生控件。 */
.pt-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 18px;
  border-bottom: 1px solid var(--line);
}
.pt-filter__label {
  font-size: 12px;
  color: var(--t5);
  white-space: nowrap;
}
/* 日期格子：日历图标 + 文字，透明 input 盖在上面。
   文字左对齐、12.5px，圆角与 .btn--sm 同为 --r-sm —— 跟全站输入框一个读法。 */
.pt-filter__field {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 9px;
  min-width: 134px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--card);
  transition: border-color 0.12s, box-shadow 0.12s;
}
.pt-filter__field:hover {
  border-color: var(--line-3);
}
.pt-filter__field:focus-within {
  border-color: var(--brand-line);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.pt-filter__icon {
  width: 12px;
  height: 12px;
  flex: none;
  color: var(--t6);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
  transition: color 0.12s;
}
.pt-filter__field:hover .pt-filter__icon {
  color: var(--t4);
}
.pt-filter__field:focus-within .pt-filter__icon {
  color: var(--brand);
}
.pt-filter__val {
  font-family: var(--font-num);
  font-size: 12.5px;
  color: var(--t1);
  white-space: nowrap;
}
/* 没选日期时显示占位灰字（值本身在 input 里，这层只负责"看起来像没填"） */
.pt-filter__val.is-empty {
  font-family: var(--font-cn);
  color: var(--t6);
}
.pt-filter__date {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  opacity: 0;
  cursor: pointer;
}
/* 藏掉原生那颗小日历。原因：点它才会弹面板，而 input 铺满整格且全透明，
   那颗图标也看不见 —— 用户点到的永远是文字段（只聚焦、不弹）。
   面板改由 JS 的 showPicker() 唤（见 admin.js 的 openDatePicker）。
   必须藏：留着它，一次点击会被"原生图标"和"showPicker"各开一次，开了立刻关。 */
.pt-filter__date::-webkit-calendar-picker-indicator {
  display: none;
}
.pt-filter__sep {
  font-size: 12px;
  color: var(--t6);
}
/* 搜索 / 清空：外观全交给 .btn--primary / .btn--ghost 的 .btn--sm（字号、字重、
   圆角都不动），这里只统一高度到日期格，免得一行里出现 30 / 32 两种高度。
   用 .pt-filter .btn 而不是给 #rpFilterClear 单写 —— 后者 id 权重会压过下面
   媒体查询里的类规则，手机上「清空」会固执地停在 32px。 */
.pt-filter .btn {
  height: 32px;
}
/* 改了日期还没点搜索 → 与输入框聚焦同一圈环，不另造提示 */
.pt-filter.is-dirty .pt-filter__go {
  box-shadow: 0 0 0 3px var(--brand-soft);
}
/* .btn 自带 display:inline-flex，会盖掉浏览器默认的 [hidden]{display:none} ——
   不加这条，「清空」没筛选时也一直亮着（前台 .arch-filter .btn 同款）。 */
.pt-filter .btn[hidden] {
  display: none;
}

.rp-adm-scroll {
  overflow-x: auto;
}
.rp-adm-grid {
  display: grid;
  /* 列模板必须放在基础类上：表头与数据行共用一个网格，漏了数据行就会竖着堆叠 */
  grid-template-columns: 110px minmax(0, 1fr) 90px 140px 220px;
  align-items: center;
  gap: 12px;
  min-width: 900px;
  padding: 0 18px;
}
.rp-adm-head {
  height: 44px;
  background: var(--card-head);
  border-bottom: 1px solid var(--line-3);
  font-family: var(--font-num);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--t3);
}
.rp-adm-head--items,
.rp-adm-row--items {
  /* 品名 / 规格 / 材质 / 价格 / 涨跌 / 删
     2026-10-21 两轮精简：先去「钢厂/产地」，再去「备注」「钢号」——
     与 mysteel 价格指数表一一对应（品名/规格(mm)/牌号/指数/涨跌） */
  grid-template-columns: repeat(3, minmax(0, 1fr)) 96px 84px 56px;
  min-width: 600px;
  padding: 0 12px;
}
.rp-adm-row {
  border-bottom: 1px solid var(--line);
  min-height: 58px;
  font-size: 13px;
  color: var(--t3);
}
.rp-adm-row:last-child {
  border-bottom: 0;
}
.rp-adm-row:hover {
  background: #1f2429;
}
.rp-adm-row--items {
  padding: 8px 12px;
  min-height: 0;
}
.rp-adm-date {
  font-family: var(--font-num);
  font-size: 13px;
  font-weight: 600;
  color: var(--t1);
}
.rp-adm-title {
  color: var(--t2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rp-adm-acts {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.rp-cell {
  width: 100%;
  height: 32px;
  padding: 0 9px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 12.5px;
  color: var(--t1);
  outline: none;
  min-width: 0;
}
.rp-cell:focus {
  border-color: var(--brand-line);
  box-shadow: 0 0 0 2px var(--brand-deep);
}
.rp-cell--num {
  text-align: right;
  font-family: var(--font-num);
}

@media (max-width: 1080px) {
  .rp-adm-head {
    grid-template-columns: 100px minmax(0, 1fr) 76px 118px 190px;
  }
}

/* ==========================================================================
   后台 · 客户询价单
   ========================================================================== */
.inq-scroll {
  overflow-x: auto;
}
.inq-grid {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) 84px 172px minmax(0, 1fr) 96px 118px 78px;
  align-items: center;
  gap: 16px;
  min-width: 1100px;
  padding: 12px 20px;
}
.inq-head {
  padding-top: 13px;
  padding-bottom: 13px;
  background: var(--card-head);
  border-bottom: 1px solid var(--line-3);
  font-family: var(--font-num);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--t3);
}
.inq-row {
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  color: var(--t3);
}
.inq-row:last-child {
  border-bottom: 0;
}
.inq-row:hover {
  background: #1f2429;
}
.inq-time {
  font-family: var(--font-num);
  font-size: 12px;
  color: var(--t5);
  white-space: nowrap;
}
.inq-company {
  font-weight: 500;
  color: var(--t1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inq-contact {
  color: var(--t2);
}
.inq-cat {
  color: var(--t4);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inq-phone {
  display: flex;
  align-items: center;
  gap: 8px;
}
.inq-phone a {
  font-family: var(--font-num);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--brand);
  text-decoration: none;
  white-space: nowrap;
}
.inq-phone a:hover {
  text-decoration: underline;
}
.inq-copy {
  padding: 2px 7px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--t5);
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
}
.inq-copy:hover {
  border-color: var(--brand-line);
  color: var(--brand);
}

/* 状态下拉：颜色跟着状态走，一眼能扫出哪些还没跟 */
.inq-status {
  appearance: none;
  -webkit-appearance: none;
  padding: 5px 26px 5px 10px;
  border: 1px solid var(--line-2);
  border-radius: 100px;
  background-color: var(--flat-bg);
  color: var(--t3);
  font-family: var(--font-cn);
  font-size: 12px;
  cursor: pointer;
  outline: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6'%3E%3Cpath d='M1 1l3.5 3.5L8 1' stroke='%239aa3ad' stroke-width='1.3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
}
.inq-status.is-new {
  background-color: var(--brand-soft);
  border-color: var(--brand-line);
  color: var(--brand);
}
.inq-status.is-contacted {
  background-color: #1c2733;
  border-color: #2f4356;
  color: #6bb0e8;
}
.inq-status.is-won {
  background-color: var(--down-bg);
  border-color: #2a5740;
  color: var(--down);
}
.inq-status.is-lost {
  background-color: var(--flat-bg);
  border-color: var(--line-2);
  color: var(--t6);
}
.inq-status:disabled {
  opacity: 0.6;
  cursor: wait;
}

/* 待联系角标 */
.inq-badge {
  flex: 0 0 auto;
  padding: 6px 14px;
  border-radius: 100px;
  background: var(--brand-soft);
  border: 1px solid var(--brand-line);
  color: var(--brand);
  font-family: var(--font-num);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  animation: inqPulse 2.6s ease-in-out infinite;
}
@keyframes inqPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 107, 26, 0);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(255, 107, 26, 0.1);
  }
}

/* 有未处理的询价时，「待联系」chip 用品牌色提醒（选中态保持原样） */
.chips .chip--alert:not(.is-active) {
  background: var(--brand-soft);
  border-color: var(--brand-line);
  color: var(--brand);
}

@media (max-width: 1080px) {
  .inq-grid {
    grid-template-columns: 108px minmax(0, 1fr) 76px 160px minmax(0, 1fr) 88px 112px 72px;
    gap: 12px;
  }
}

/* ==========================================================================
   浅色主题 · 定点覆盖（2026-10-16）
   --------------------------------------------------------------------------
   上面的 token 已经整体翻转为浅色，绝大多数组件自动跟着变。这里只兜两类：

     ① 当初写死在规则里、拿不到 token 的深色值（顶栏半透明底、页脚、
        提示块、弹窗投影、Toast…）；
     ② 明暗关系必须重新安排的 —— 最典型的是「悬停态」：深色主题靠
        rgba(255,255,255,.015) 提亮表示，浅底上提亮等于看不见，得改成压暗。

   集中放在文件末尾而不是就地逐条改，是为了让这次换肤「一眼可见、可整体回退」。
   ========================================================================== */

/* --- 品牌橙实底：文字统一改白（原来是写死的深色 #131517） --- */
.btn--primary,
.chip.is-active,
.pager button.is-active,
.range-tabs button.is-active,
.seg button.is-active {
  color: #fff;
}
.btn--primary:hover {
  background: #d05206;
}
.btn--danger {
  border-color: rgba(198, 40, 40, 0.4);
}
.input--err {
  border-color: rgba(198, 40, 40, 0.55);
}

/* --- 表单控件：深色主题下输入框比卡片更深（凹陷感），浅底上这个差值太小，
       白卡里的输入框会灰得像禁用态。改成白底 + 稍深的描边。 --- */
.input,
.textarea,
.rp-cell {
  background: var(--card);
  border-color: var(--line-2);
}

/* --- 顶栏 / 后台栏：深色半透明 → 白底半透明 --- */
.site-header {
  background: rgba(255, 255, 255, 0.92);
}
.admin-bar {
  background: rgba(255, 255, 255, 0.94);
}

/* --- .hero 目前没有任何页面在用（首页走 home.css 自己的 .hero），
       但把一段纯深色渐变留在浅色主题里始终是个隐患，顺手改掉 --- */
.hero {
  background: linear-gradient(180deg, #ffffff 0%, #fafbfc 62%, #f2f3f5 100%);
}

/* --- 页脚：跟首页一致改为深色收尾，形成「浅页面 + 深页脚」的节奏 --- */
.site-footer {
  background: #1d2126;
  border-top: 0;
}
.site-footer .footer-brand__row strong {
  color: #fff;
}
.site-footer .footer-brand__desc,
.site-footer .footer-brand__contact,
.site-footer .footer-col a {
  color: #8b929c;
}
.site-footer .footer-col strong {
  color: #c9cfd6;
}
.site-footer .footer-col a:hover {
  color: #e85d0b;
}
.site-footer .footer-line {
  background: #2e343b;
}
.site-footer .footer-bottom {
  color: #6e767f;
}
.site-footer .footer-giant {
  color: #23272d;
}

/* --- 列表分隔线：写死的深灰 → 统一走 --line --- */
.qrow,
.news-item,
.log-item,
.pt-body .pt-row,
.at-body .at-row,
.log-table .lt-body .lt-row {
  border-bottom-color: var(--line);
}

/* --- 悬停 / 选中：由「提亮」改为「压暗」 --- */
.qrow:hover,
.pt-body .pt-row:hover,
.at-body .at-row:hover {
  background: #f7f8fa;
}
.report-item:hover,
.rp-adm-row:hover,
.inq-row:hover,
.rp-table tbody tr:hover .rp-td {
  background: #fafbfc;
}
.at-body .at-row.is-selected {
  background: #fff3ea;
}

/* --- 骨架屏 --- */
.sk-row {
  background: linear-gradient(90deg, #edeff2 0%, #e2e6ea 50%, #edeff2 100%);
}

/* --- 提示块：统一成首页那套淡黄警示 --- */
.notice {
  background: #fff8e1;
  border: 1px solid #f0e0a8;
  color: #7a5c0a;
}
.storage-warn,
.data-warn {
  background: #fff8e1;
  border-color: #f0e0a8;
  border-left: 3px solid #d9a400;
  color: #7a5c0a;
}
.storage-warn strong,
.data-warn strong {
  color: #7a5c0a;
}

/* --- 下拉选项 / Toast / 弹窗遮罩与投影 --- */
select.input option {
  background: #fff;
  color: #1d2126;
}
.toast {
  background: #1d2126;
  border-color: #2e343b;
  box-shadow: 0 16px 40px -12px rgba(20, 26, 33, 0.35);
}
.overlay {
  background: rgba(23, 28, 34, 0.45);
}
.modal {
  box-shadow: 0 24px 60px -18px rgba(20, 26, 33, 0.28);
}
.modal__foot {
  background: #f7f8fa;
}
.login-card {
  box-shadow: 0 20px 50px -22px rgba(20, 26, 33, 0.25);
}

/* --- 统计卡品牌底、状态徽章、脉冲环 --- */
.stat--brand {
  background: linear-gradient(
    135deg,
    rgba(232, 93, 11, 0.07),
    rgba(232, 93, 11, 0) 70%
  );
}
.inq-status.is-won {
  border-color: #b6ddc6;
}
.inq-status.is-contacted {
  background-color: #eaf3fb;
  border-color: #bbd8ef;
  color: #0b62c4;
}
@keyframes inqPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(232, 93, 11, 0);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(232, 93, 11, 0.12);
  }
}

/* ==========================================================================
   报价表「备注 / 钢号」单元 —— 与前台行情表（report.css 的 .rp-flag/.rp-code）
   同一套读法：备注是紧缺提示，钢号是货号一类的自由文本。空值统一显示为浅灰破折号。
   ========================================================================== */
.cell-flag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 2px;
  background: var(--up-bg);
  border: 1px solid #f3d3d0;
  color: var(--up);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.cell-code {
  color: var(--t3);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.cell-none {
  color: var(--t6);
  font-size: 12px;
}

/* ==========================================================================
   后台区块子导航 + 询价分页 + 日志收起（2026-10-17）
   --------------------------------------------------------------------------
   动因：后台是一条长页面，4 个区块没有任何页内导航；调价日志最多渲染 80 行
   （≈3100px），会把「客户询价」顶到屏幕下方 4 屏之外。处理方式：
     ① 加一条 sticky 子导航，贴在 .admin-bar（68px）下面，一键跳区块；
     ② 日志默认只显示 10 条，其余靠「查看全部」展开；
     ③ 询价改成分页（20 条/页），页面高度从此有上界。
   颜色一律走 token，不写死明暗值 —— 这份文件同时服务 report.html，
   所以新类名都带 subnav / inq-pager 前缀，避免污染公共类。
   ========================================================================== */

.subnav {
  position: sticky;
  top: 68px; /* = .admin-bar__inner 的固定高度（顶栏本身 sticky top:0） */
  z-index: 55; /* 低于 admin-bar(60)，高于表格内容 */
  background: var(--bg-alt);
  border-bottom: 1px solid var(--line);
}
.subnav__inner {
  display: flex;
  align-items: stretch;
  gap: 4px;
  overflow-x: auto; /* 窄屏放不下时横向滚，而不是换行把顶栏撑高 */
  scrollbar-width: none;
}
.subnav__inner::-webkit-scrollbar {
  display: none;
}
.subnav__a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--t4);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.subnav__a:hover {
  color: var(--t1);
}
.subnav__a.is-on {
  color: var(--t1);
  border-bottom-color: var(--brand);
}
.subnav__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  border-radius: 100px;
  background: var(--brand);
  color: #fff;
  font-family: var(--font-num);
  font-size: 11px;
  font-weight: 700;
  font-style: normal;
  line-height: 1;
}
/* .subnav__n 自带 display:inline-flex，会盖掉浏览器默认的 [hidden]{display:none}，
   不写这一条的话没有待联系询价时也会留下一个空橙点（后台告警弹窗踩过同一个坑）。 */
.subnav__n[hidden] {
  display: none;
}

/* 锚点跳转后，区块标题要落在两条 sticky 栏（68 + 46）之下，而不是被压在栏后面 */
#quotes,
#logs,
#reports,
#inquiries {
  scroll-margin-top: 118px;
}

/* --- 询价分页器 --- */
.inq-pager {
  display: flex;
  align-items: center;
  gap: 8px;
}
.inq-pager[hidden] {
  display: none;
}
.inq-pager__info {
  min-width: 42px;
  text-align: center;
  font-family: var(--font-num);
  font-size: 12px;
  font-weight: 600;
  color: var(--t4);
}

/* ---------------- 通用数据表翻页器（报价维护 / 行情日报） ----------------
   和 .inq-pager 同一套视觉，只是换个中性类名，避免「询价」的语义泄漏到
   报价表和日报页上。hidden 必须显式 display:none —— 自带 display:flex
   会盖掉浏览器对 [hidden] 的默认样式。 */
.data-pager {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.data-pager[hidden] {
  display: none;
}
.data-pager__info {
  min-width: 48px;
  text-align: center;
  font-family: var(--font-num);
  font-size: 12px;
  font-weight: 600;
  color: var(--t4);
}
/* 表格脚栏里的操作提示：单独占一行，别和翻页器抢同一行的宽度 */
.pt-foot__hint {
  flex-basis: 100%;
  order: 3;
}
.pt-foot__right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-left: auto;
}

/* ==========================================================================
   H5 适配（手机竖屏）— 后台
   --------------------------------------------------------------------------
   2026-10-19 用 CDP 真机视口（390×844 / DPR3）实测后补。
   实测问题（比前台严重）：
   ① 整页 scrollWidth 466 > clientWidth 390 —— body 级横向溢出 76px，
      顶栏「价格管理后台」被挤成竖排单个字，「查看前台」按钮被裁掉一半；
   ② .at-row 是 8 列定宽网格（合计 1052px），390px 下只能看到
      「勾选框 + 品种」，价格、涨跌、改价按钮全在屏幕外 —— 手机无法改价；
   ③ 调价日志 6 列、日报列表 5 列、询价 8 列（min-width:1100px）同样只剩前两列。
   改法：顶栏瘦身 + 四类行全部卡片化（一条记录一张卡），不再依赖横向滑动。
   断点取 820：报价表 8 列实际需要 1052px，任何更窄的视口都得横向滑动；
   820 刚好覆盖 iPad 竖屏（768 / 810）。1024 以上桌面不受影响。
   ========================================================================== */
@media (max-width: 820px) {
  /* --- 顶栏：68 → 52px，只留品牌 + 头像 + 两个动作 --- */
  .admin-bar__inner {
    height: 52px;
    gap: 10px;
  }
  .admin-bar__tag,
  #userName {
    display: none;
  }
  .admin-user {
    gap: 8px;
    font-size: 12px;
  }
  .avatar {
    width: 26px;
    height: 26px;
    font-size: 11px;
  }
  .admin-bar__inner .brand__sub {
    display: none;
  }
  .admin-bar__inner .brand__name {
    font-size: 14px;
  }
  .admin-bar__inner .btn--sm {
    min-height: 34px;
    padding: 0 9px;
    font-size: 12px;
  }

  /* --- 子导航与锚点偏移：顶栏变矮后这两个值必须同步，否则点击锚点会盖住标题 --- */
  .subnav {
    top: 52px;
  }
  .subnav__a {
    padding: 11px 11px;
    font-size: 12.5px;
  }
  #quotes,
  #logs,
  #reports,
  #inquiries {
    scroll-margin-top: 100px;
  }

  /* --- 通用：输入框 16px 防 iOS 聚焦自动放大 ---
     iOS Safari 对 font-size < 16px 的输入框，聚焦时会自动把整页放大，
     而且不会自己缩回去，用户得双指捏回。搜索框、状态下拉同样要压住。 */
  .field input,
  .field select,
  .field textarea,
  .modal input,
  .modal select,
  .modal textarea,
  #adminSearch,
  .input {
    font-size: 16px;
    min-height: 42px;
  }

  /* --- 先解除内层的最小宽度 ---
     卡片化只改行本身不够：这三张表外面还套着一层定宽容器
     （.pt-grid 1120px、日志体 1020px、日报体 900px），它们撑宽了整个网格，
     1fr 于是分到 978px，价格/操作列被顶到 1120px 处 —— 表面上「卡片化成功」，
     实际卡片里只剩左半截。必须同时把这层压回 0。 */
  .pt-scroll > .pt-grid,
  .lt-scroll > div,
  .rp-adm-scroll > div {
    /* ⚠️ 前两处的最小宽度是写在 HTML 内联 style 里的（admin.html 第 221、261 行），
       类选择器优先级再高也压不住内联样式，这里必须 !important。 */
    min-width: 0 !important;
  }

  /* --- 报价表：8 列 → 三行卡片 --- */
  .at-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "pick mat   price"
      "pick mill  delta"
      "pick note  act";
    gap: 3px 10px;
    align-items: start;
    padding: 11px 14px;
  }
  /* 表头保留「全选」复选框（#checkAll 在第一个 span 里），其余列名在卡片里已无意义 */
  .at-row.at-head {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "pick hint";
    align-items: center;
    padding: 9px 14px;
  }
  .at-row.at-head > span:nth-child(1) {
    grid-area: pick;
  }
  .at-row.at-head > span:nth-child(2) {
    grid-area: hint;
    font-size: 12px;
    color: var(--t5);
  }
  .at-row.at-head > span:nth-child(n + 3) {
    display: none;
  }

  .at-row > span:nth-child(1) {
    grid-area: pick;
    align-self: start;
    padding-top: 2px;
  }
  .at-row .cell-mat {
    grid-area: mat;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
  }
  .at-row .cell-mat__name {
    font-size: 13.5px;
  }
  .at-row > span:nth-child(3) {
    grid-area: mill;
    font-size: 11.5px;
  }
  .at-row > span:nth-child(4) {
    grid-area: note;
    font-size: 11.5px;
  }
  /* 钢号在手机端直接收起：quotes.steel_no 目前全空，日报明细里也基本不填，
     留着只会让每张卡多出 20px 空白。桌面端仍然完整可见。 */
  .at-row > span:nth-child(5) {
    display: none;
  }
  .at-row .cell-price-edit {
    grid-area: price;
    justify-self: end;
    align-self: start;
    font-size: 15px;
    font-weight: 700;
  }
  .at-row > span:nth-child(7) {
    grid-area: delta;
    justify-self: end;
    font-size: 12px;
  }
  .at-row .cell-act {
    grid-area: act;
    justify-self: end;
    align-self: end;
  }
  .at-row .cell-act .btn {
    min-height: 34px;
    padding: 0 12px;
  }
  /* 备注/钢号为空时是「—」占位，卡片里不重复显示 */
  .at-row .cell-none {
    display: none;
  }

  /* --- 调价日志：6 列 → 三行 --- */
  .log-table .lt-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "mat  mat    price"
      "mill time   old"
      "reason reason reason";
    gap: 3px 10px;
    padding: 10px 14px;
  }
  .log-table .lt-head {
    display: none;
  }
  .log-table .lt-body .lt-row > span:nth-child(1) {
    grid-area: time;
    font-size: 11px;
    color: var(--t5);
  }
  .log-table .lt-body .lt-row > span:nth-child(2) {
    grid-area: mat;
    font-size: 13px;
    font-weight: 600;
    color: var(--t1);
  }
  .log-table .lt-body .lt-row > span:nth-child(3) {
    grid-area: mill;
    font-size: 11px;
  }
  .log-table .lt-body .lt-row > span:nth-child(4) {
    grid-area: old;
    text-align: right;
    font-size: 11px;
  }
  .log-table .lt-body .lt-row > span:nth-child(4)::before {
    content: "原 ";
    color: var(--t5);
  }
  .log-table .lt-body .lt-row > span:nth-child(5) {
    grid-area: price;
    text-align: right;
    font-size: 14px;
    font-weight: 700;
  }
  .log-table .lt-body .lt-row > span:nth-child(6) {
    grid-area: reason;
    text-align: left;
  }

  /* --- 日报列表：5 列 → 三行 --- */
  .rp-adm-grid {
    grid-template-columns: auto auto minmax(0, 1fr);
    grid-template-areas:
      "date  count range"
      "title title title"
      "acts  acts  acts";
    gap: 4px 10px;
    padding: 10px 14px;
    min-width: 0;
  }

  /* 日期筛选条：平板上「标签 + 两个日期 + 搜索 + 清空」一行还放得下（约 503px），
     只把日期格与按钮抬到 40px 好点；真正的折行（收掉标签、日期各占一半）
     放到底下 560 的断点里，否则 iPad 竖屏会白占两行高度。 */
  .pt-filter {
    padding: 10px 14px;
    gap: 6px 8px;
  }
  .pt-filter__field {
    height: 40px; /* 手机上 32px 偏小，点不中 */
  }
  .pt-filter .btn {
    height: 40px;
  }

  .rp-adm-head {
    display: none;
  }
  .rp-adm-row {
    min-height: 0;
  }
  .rp-adm-row > span:nth-child(1) {
    grid-area: date;
  }
  .rp-adm-row > span:nth-child(2) {
    grid-area: title;
    font-size: 13px;
    white-space: normal;
  }
  .rp-adm-row > span:nth-child(3) {
    grid-area: count;
    text-align: left;
  }
  .rp-adm-row > span:nth-child(4) {
    grid-area: range;
    text-align: right;
  }
  .rp-adm-row > span:nth-child(5) {
    grid-area: acts;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
  .rp-adm-row > span:nth-child(5) .btn {
    min-height: 34px;
  }

  /* --- 询价：8 列 → 四行 --- */
  .inq-scroll {
    overflow-x: visible;
  }
  .inq-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto;
    grid-template-areas:
      "company  company  status"
      "contact  phone    del"
      "cat      cat      qty"
      "time     time     time";
    gap: 5px 10px;
    min-width: 0;
    padding: 12px 14px;
  }
  .inq-head {
    display: none;
  }
  .inq-row .inq-company {
    grid-area: company;
    font-size: 13.5px;
    font-weight: 600;
    white-space: normal;
  }
  .inq-row .inq-contact {
    grid-area: contact;
    font-size: 12px;
  }
  .inq-row .inq-phone {
    grid-area: phone;
    font-size: 12.5px;
  }
  .inq-row .inq-cat {
    grid-area: cat;
    font-size: 11.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .inq-row > span:nth-child(6) {
    grid-area: qty;
    text-align: right;
    font-size: 12px;
  }
  .inq-row > span:nth-child(7) {
    grid-area: status;
  }
  .inq-row > span:nth-child(8) {
    grid-area: del;
    justify-self: end;
  }
  .inq-row .inq-time {
    grid-area: time;
    font-size: 11px;
    color: var(--t5);
  }
  .inq-row .inq-status {
    min-height: 34px;
    font-size: 12px;
  }

  /* --- 触控目标 ---
     勾选框原本 16×16，手机上基本点不中；放到 22×22。其余工具按钮统一 36px。 */
  .checkbox {
    width: 22px;
    height: 22px;
    border-width: 2px;
  }
  #resetBtn,
  #clearSelBtn,
  #batchBtn,
  #genReportBtn,
  #logClearBtn,
  #logMoreBtn {
    min-height: 36px;
  }
  .chip {
    min-height: 36px;
  }

  /* --- 统计卡 / 工具条 --- */
  .stat {
    flex: 1 1 calc(50% - 8px);
    min-width: 0;
  }
  .pt-foot {
    flex-wrap: wrap;
    gap: 10px;
  }
  .pt-foot__hint {
    font-size: 11.5px;
    line-height: 1.6;
  }

  /* --- 弹窗：手机上贴边全宽，内部可滚，避免 360×640 上按钮跑出屏幕 --- */
  .modal {
    width: calc(100vw - 24px);
    max-width: none;
    /* dvh 在 iOS 15.4+ 才支持：按「可视高度」而非「包含地址栏的窗口高度」算，
       否则弹窗底部按钮会被 Safari 工具栏盖住。前一行是旧内核的兜底。 */
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
  }
  .modal__foot {
    flex-wrap: wrap;
  }
  .modal__foot .btn {
    min-height: 44px;
    flex: 1 1 auto;
  }
}

/* ---- ≤560px：手机上的日期筛选条折成两行 ----
   560 以下一行放不下（约 503px）。标签收掉（「开始/结束日期」自己说得清用途）→
   两个日期格各占一半 → 搜索与清空一行两列（清空收起时搜索自己占满）。
   与前台 .arch-filter 同一套排法。 */
@media (max-width: 560px) {
  .pt-filter__label {
    display: none;
  }
  .pt-filter__field {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    height: 40px;
  }
  .pt-filter__sep {
    display: none;
  }
  /* iOS 对 <16px 的输入框聚焦时会放大整页（input 是透明的，但仍是真 input） */
  .pt-filter__date {
    font-size: 16px;
  }
  /* 按钮按内容宽度排（同站内移动端工具条：「清空选择」「批量调价」都这样），
     不拉满整行做通栏色块，也不硬撑半行留一半空白 */
  .pt-filter .btn {
    flex: 0 0 auto;
    height: 40px;
  }
}