:root {
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #1b1b1f;
  background: #f7f5f2;
}
* { box-sizing: border-box; }
body { margin: 0; background: #f7f5f2; }
.page { max-width: 560px; margin: 0 auto; padding: 20px; }
.hero { background: #fff; padding: 18px; border-radius: 14px; margin-bottom: 14px; }
.hero h1 { margin: 0 0 6px; font-size: 22px; }
.sub { margin: 0; color: #6a5a48; font-size: 13px; }
.card { background: #fff; padding: 16px; border-radius: 14px; }
.form { display: grid; gap: 12px; }
label { display: grid; gap: 6px; font-size: 14px; }
input, select, textarea { padding: 10px 12px; border: 1px solid #ddd; border-radius: 10px; font-size: 14px; }
button { border: none; background: #1b1b1f; color: #fff; padding: 10px 14px; border-radius: 10px; cursor: pointer; font-size: 15px; }
.muted { color: #7a6c5a; font-size: 13px; }
.note { margin-top: 12px; color: #7a6c5a; font-size: 12px; }
@media (max-width: 480px) {
  .page { padding: 16px; }
}

.inline { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.inline .ghost { background: #c8b8a6; color: #1b1b1f; }


.timeline {
  margin-top: 12px;
  border-top: 1px dashed #d5dbe6;
  padding-top: 10px;
  font-size: 13px;
  color: #4b5563;
}
.timeline-item {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px dashed #e5e7eb;
}
.timeline-time {
  min-width: 120px;
  color: #6b7280;
}
.timeline-label {
  font-weight: 600;
  color: #1f2937;
}
.timeline-detail {
  color: #6b7280;
}

.timeline-item.key {
  background: #fef3c7;
  border-left: 3px solid #f59e0b;
  padding-left: 8px;
}

.timeline-item {
  position: relative;
}
.timeline-item::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 8px;
  background: #cbd5e1;
}
.timeline-item.key::before { background: #f59e0b; }
.timeline-item.action-create::before { background: #22c55e; }
.timeline-item.action-status_change::before { background: #3b82f6; }
.timeline-item.action-update::before { background: #a855f7; }
.timeline-item.action-warranty_done::before { background: #f59e0b; }
.timeline-item.action-repair_done::before { background: #10b981; }
.timeline-item.action-closed::before { background: #6b7280; }