/* =========================================================
   锥坡工程量计算器 · 视觉系统
   基调：工程师的工具书 — 浅纸面、深墨色、克制装饰
   ========================================================= */

:root {
  /* 颜色 */
  --paper:        #faf7f0;       /* 暖白纸张色 */
  --paper-rule:   #e6dfd1;       /* 浅色分割线 */
  --ink:          #1a1a1a;       /* 深墨 */
  --ink-soft:     #525252;       /* 次级文字 */
  --ink-muted:    #8b8278;       /* 弱化文字 */
  --accent:       #7a3e2c;       /* 紫铜锈色（取代俗气蓝） */
  --accent-soft:  #b8694e;
  --accent-tint:  #f0e4dc;
  --field-bg:     #ffffff;
  --field-border: #d4cbb8;
  --field-focus:  #7a3e2c;
  --result-bg:    #fbfaf6;
  --result-band:  #f3eee2;
  --good:         #2c5f2d;
  --warn:         #964b00;

  /* 字体 */
  --font-display: 'DM Serif Display', 'Noto Serif SC', 'Source Han Serif SC', 'SimSun', serif;
  --font-body:    'IBM Plex Sans', 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Consolas, 'Liberation Mono', monospace;

  /* 间距 */
  --gap:    1rem;
  --gap-l:  1.75rem;
  --radius: 4px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  /* 隐约的网格底纹，模仿绘图纸 */
  background-image:
    linear-gradient(to right, rgba(180,160,120,0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(180,160,120,0.06) 1px, transparent 1px);
  background-size: 24px 24px;
  min-height: 100vh;
  -webkit-text-size-adjust: 100%;
}

/* ===== 页头 ===== */
.masthead {
  max-width: 1180px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 1.5rem;
}
.masthead .rule {
  height: 1px;
  background: var(--ink);
  margin: 0 0 1rem;
}
.masthead .rule + .rule, .masthead__inner + .rule {
  margin-top: 1rem;
  background: var(--paper-rule);
}
.masthead__inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap);
  flex-wrap: wrap;
}
.masthead__title h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: 0.95;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
}
.masthead__subtitle {
  margin: .5rem 0 0;
  font-size: 0.9rem;
  color: var(--ink-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.masthead__meta {
  display: flex;
  gap: 1.75rem;
  align-items: baseline;
}
.meta-item {
  display: flex;
  flex-direction: column;
  font-size: 0.85rem;
}
.meta-item span {
  color: var(--ink-muted);
  letter-spacing: 0.05em;
  font-size: 0.72rem;
  text-transform: uppercase;
}
.meta-item strong {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--ink);
  font-size: 0.95rem;
  margin-top: 0.15rem;
}

main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 1.5rem 4rem;
}

/* ===== 卡片 ===== */
.card {
  background: var(--field-bg);
  border: 1px solid var(--paper-rule);
  border-radius: var(--radius);
  padding: 1.5rem 1.5rem 1.75rem;
  margin-top: var(--gap-l);
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}
.card h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.4rem;
  margin: 0 0 1.15rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--paper-rule);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  color: var(--ink);
}
.card--global h2 { color: var(--accent); }

.cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-l);
  margin-top: var(--gap-l);
}
.cards-grid .card { margin-top: 0; }
@media (max-width: 760px) {
  .cards-grid { grid-template-columns: 1fr; gap: var(--gap); }
}

/* ===== 输入字段 ===== */
.inputs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
}
.inputs--row {
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 540px) {
  .inputs--row { grid-template-columns: 1fr; }
}

.field {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.4rem 0;
  border-bottom: 1px dotted var(--paper-rule);
}
.field:last-child { border-bottom: none; }

.field__label {
  font-size: 0.92rem;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
}

.field__input {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  background: var(--paper);
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  padding: 0 0.55rem;
  transition: border-color .15s, background-color .15s;
  min-width: 130px;
}
.field__input:focus-within {
  border-color: var(--field-focus);
  background: #fff;
  box-shadow: 0 0 0 3px var(--accent-tint);
}
.field__input input[type=number] {
  background: transparent;
  border: 0;
  outline: 0;
  width: 90px;
  padding: 0.45rem 0;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: var(--ink);
  text-align: right;
  appearance: textfield;
  -moz-appearance: textfield;
}
.field__input input::-webkit-outer-spin-button,
.field__input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.field__unit {
  font-family: var(--font-mono);
  color: var(--ink-muted);
  font-size: 0.82rem;
  min-width: 1.5em;
  text-align: left;
}

/* ===== 操作按钮 ===== */
.actions {
  display: flex;
  align-items: center;
  gap: var(--gap);
  margin: var(--gap-l) 0 0;
  padding: 0;
  flex-wrap: wrap;
}
.btn {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  padding: 0.7rem 1.65rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .08s ease, background-color .15s, border-color .15s;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.55; cursor: progress; }
.btn--primary {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.btn--primary:hover:not(:disabled) {
  background: var(--accent);
  border-color: var(--accent);
}
.btn--ghost {
  background: transparent;
  color: var(--ink-soft);
  border-color: var(--field-border);
}
.btn--ghost:hover { color: var(--ink); border-color: var(--ink-soft); }

.status {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--ink-muted);
}
.status[data-kind="busy"] { color: var(--accent); }
.status[data-kind="ok"]   { color: var(--good); }
.status[data-kind="err"]  { color: #b00020; }

/* ===== 结果表 ===== */
.card--results { background: var(--result-bg); }
.result-note {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-muted);
  letter-spacing: 0;
  text-transform: none;
}
.table-wrap { overflow-x: auto; }

table.results {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
table.results th, table.results td {
  padding: 0.6rem 0.7rem;
  text-align: right;
  border-bottom: 1px solid var(--paper-rule);
}
table.results thead th {
  background: var(--result-band);
  color: var(--ink);
  font-weight: 500;
  letter-spacing: 0.03em;
  border-bottom: 2px solid var(--ink);
  border-top: 1px solid var(--paper-rule);
  text-transform: none;
  font-size: 0.82rem;
}
.th-item, .td-item { text-align: left; min-width: 9em; }
.td-item { color: var(--ink-soft); }
.th-unit, .td-unit { text-align: center; color: var(--ink-muted); font-family: var(--font-mono); font-size: 0.8rem; min-width: 3em; }
.td-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  color: var(--ink);
}
.td-total {
  font-weight: 600;
  color: var(--accent);
  background: rgba(122,62,44,0.04);
}
.td-num.flash {
  animation: flash 0.5s ease-out;
}
@keyframes flash {
  from { background-color: var(--accent-tint); }
  to   { background-color: transparent; }
}
.td-total.flash {
  animation: flash-total 0.5s ease-out;
}
@keyframes flash-total {
  from { background-color: var(--accent-tint); }
  to   { background-color: rgba(122,62,44,0.04); }
}

/* ===== 底部 ===== */
.footer {
  margin-top: 3rem;
  padding: 2rem 0;
  border-top: 1px solid var(--paper-rule);
  text-align: center;
  color: var(--ink-muted);
  font-size: 0.85rem;
  line-height: 1.7;
}
.footer p { margin: 0.5rem 0; }
.footer__credit {
  font-family: var(--font-display);
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

/* ===== 响应式微调 ===== */
@media (max-width: 540px) {
  body { font-size: 14.5px; }
  main, .masthead { padding-left: 1rem; padding-right: 1rem; }
  .masthead__inner { flex-direction: column; align-items: flex-start; }
  .masthead__meta { gap: 1rem; }
  .card { padding: 1.1rem 1.1rem 1.25rem; }
  .field__input input[type=number] { width: 70px; }
  .field__input { min-width: 110px; }
}