/* 润泽暖通 · 公共样式（明亮产品风）。字阶 13/16/20/25/31，间距 4px 栅格，圆角 8/14 */
:root {
  --bg: #F4F6F9;
  --card: #FFFFFF;
  --ink: #111827;
  --ink-2: #4B5565;
  --ink-3: #7A8494;
  --line: #E3E7EE;
  --line-2: #EEF1F5;
  --brand: #1557A0;
  --brand-ink: #0E3F78;
  --brand-soft: #E8F0FA;
  --ok: #15803D;
  --ok-soft: #E7F5EC;
  --warn: #B45309;
  --warn-soft: #FDF1E3;
  --bad: #B91C1C;
  --bad-soft: #FCEBEB;
  --r1: 8px;
  --r2: 14px;
  --sh1: 0 1px 2px rgba(17, 24, 39, .06);
  --sh2: 0 8px 24px rgba(17, 24, 39, .10);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
button, input, textarea, select { font: inherit; color: inherit; }
input, textarea, select { font-size: 16px; } /* iOS 小于 16px 点进去会整页放大 */
img { display: block; max-width: 100%; }
a { color: var(--brand); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.ico { width: 20px; height: 20px; flex: none; display: inline-block; vertical-align: middle; }
.ico svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ico.s16 { width: 16px; height: 16px; }
.ico.s24 { width: 24px; height: 24px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border-radius: var(--r1); border: 1px solid var(--line); background: var(--card); color: var(--ink);
  font-weight: 500; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color .15s ease-out, opacity .15s ease-out;
}
.btn:active { opacity: .8; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.primary:active { background: var(--brand-ink); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--brand); padding: 0 8px; }
.btn.block { width: 100%; }
.btn:disabled { opacity: .5; cursor: default; }

.chip {
  display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: 999px;
  font-size: 13px; line-height: 1; font-weight: 500; white-space: nowrap; background: var(--line-2); color: var(--ink-2);
}
.chip.new { background: var(--warn-soft); color: var(--warn); }
.chip.assigned { background: var(--brand-soft); color: var(--brand); }
.chip.working { background: var(--brand); color: #fff; }
.chip.done, .chip.ok { background: var(--ok-soft); color: var(--ok); }
.chip.issue, .chip.urgent { background: var(--bad-soft); color: var(--bad); }
.chip.unclear { background: var(--warn-soft); color: var(--warn); }

.card { background: var(--card); border-radius: var(--r2); box-shadow: var(--sh1); }
.muted { color: var(--ink-3); }
.small { font-size: 13px; line-height: 1.5; }
.field { display: grid; gap: 4px; }
.field > span { font-size: 13px; color: var(--ink-2); }
.input {
  width: 100%; min-height: 44px; padding: 10px 12px; border-radius: var(--r1); border: 1px solid var(--line); background: #fff;
}
.input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
textarea.input { resize: vertical; min-height: 88px; line-height: 1.5; }

.photo { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; border-radius: var(--r1); background: var(--line-2); cursor: zoom-in; }
.viewer {
  position: fixed; inset: 0; z-index: 100; background: rgba(10, 14, 20, .92); display: flex; align-items: center; justify-content: center;
  padding: calc(16px + var(--safe-t)) 16px calc(16px + var(--safe-b));
}
.viewer img { max-height: 100%; object-fit: contain; border-radius: var(--r1); }
.viewer button { position: absolute; top: calc(12px + var(--safe-t)); right: 12px; width: 44px; height: 44px; border-radius: 999px; border: 0; background: rgba(255,255,255,.14); color: #fff; }

.toast {
  position: fixed; left: 50%; bottom: calc(96px + var(--safe-b)); transform: translateX(-50%); z-index: 120;
  max-width: calc(100% - 32px); padding: 10px 16px; border-radius: var(--r1); background: #1F2937; color: #fff; font-size: 14px;
  box-shadow: var(--sh2); animation: toast-in .2s ease-out;
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } }
@keyframes spin { to { transform: rotate(360deg); } }
.spin svg { animation: spin 1s linear infinite; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }