:root {
  color-scheme: light;
  font-family: "PingFang SC","Microsoft YaHei UI",system-ui,sans-serif;
  color: #25251f;
  background: #f6f4ef;
  --accent: #a63232;
  --ink: #25251f;
  --muted: #65645b;
  --border: #e2ddd3;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
header, main { width: min(100%, 540px); margin: 0 auto; padding-inline: 20px; }
header {
  min-height: 84px;
  padding-top: env(safe-area-inset-top);
  display: flex;
  align-items: center;
  gap: 12px;
}
.mark {
  width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: 9px; background: var(--accent); color: #fff; font-size: 21px; font-weight: 700;
}
h1, h2, p { margin: 0; }
h1 { font-size: 24px; letter-spacing: .02em; }
h2 { font-size: 19px; font-weight: 700; }
p, small { color: var(--muted); }
p { font-size: 14px; line-height: 1.65; }
small { font-size: 12px; font-weight: 400; }
main { padding-bottom: max(28px, env(safe-area-inset-bottom)); }
#disconnect { margin-left: auto; }
.card {
  padding: 21px; border: 1px solid var(--border); border-radius: 14px;
  background: #fff; box-shadow: 0 5px 24px #554b3310;
}
.row { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.heading { margin-bottom: 17px; }
#feed { font-size: 12px; color: var(--muted); text-align: right; }
#connect p { margin: 9px 0 16px; }
button, input, select, a { font: inherit; }
input:not([type=radio]), select {
  display: block; width: 100%; min-height: 44px; padding: 9px 11px; border: 1px solid var(--border);
  border-radius: 8px; min-width: 0; background: #fff; color: var(--ink); font-size: 16px;
}
button, a.primary {
  min-height: 44px; padding: 9px 14px; border: 1px solid var(--border); border-radius: 8px;
  background: #fff; color: var(--ink); text-decoration: none; cursor: pointer;
}
button:disabled { opacity: .48; cursor: default; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.quiet { border-color: transparent; background: transparent; color: var(--muted); }
.primary { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; font-weight: 650; }
form > .primary { width: 100%; margin-top: 16px; }
fieldset { border: 0; padding: 0; margin: 0 0 17px; min-width: 0; }
legend, .field { padding: 0; display: block; font-size: 14px; font-weight: 650; margin-bottom: 7px; }
.field small { margin-left: 5px; }
.segments { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.segments label { position: relative; text-align: center; cursor: pointer; }
.visually-hidden, .segments input { position: absolute; clip-path: inset(50%); width: 1px !important; height: 1px !important; min-height: 0 !important; overflow: hidden; padding: 0 !important; }
.segments span { display: block; padding: 10px 1px; border: 1px solid var(--border); border-radius: 8px; }
.segments input:checked + span { border-color: #bf7771; background: #fbefeb; color: #8a2929; font-weight: 650; }
.segments input:focus-visible + span, .picker:has(+ input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.picker {
  margin-top: 17px; min-height: 112px; padding: 12px; display: grid; justify-items: center; align-content: center;
  gap: 4px; border: 1px dashed #c6a49a; background: #fdfaf7; border-radius: 9px; cursor: pointer; text-align: center;
}
.plus { font-size: 23px; line-height: 1.15; color: var(--accent); }
.history { margin-top: 25px; }
.history > h2 { margin-bottom: 9px; }
.job { border-bottom: 1px solid var(--border); padding: 11px 0; }
.job strong { font-size: 15px; overflow-wrap: anywhere; }
.job p { margin-top: 4px; overflow-wrap: anywhere; }
.job button { flex: none; }
.job .problem { color: #873332; }
#notice:not(:empty) { position: sticky; bottom: 9px; margin-top: 12px; padding: 9px 12px; background: #fff5eb; border: 1px solid #ebd5c7; border-radius: 8px; }
dialog { width: min(94%, 510px); max-height: 89dvh; border: 1px solid var(--border); border-radius: 14px; padding: 15px; color: var(--ink); }
dialog::backdrop { background: #1f1e1aa6; }
.dialog-heading { margin-bottom: 9px; }
#product { display: block; max-width: 100%; width: auto; margin: 0 auto; }
.preview-actions { justify-content: center; margin-top: 10px; }
.photo-tip { text-align: center; margin-top: 7px; }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 12px; }
.fields label { min-width: 0; font-size: 13px; color: var(--muted); }
.fields input, .fields select { margin-top: 4px; }
@media(max-width: 365px) { header, main { padding-inline: 13px; } .card { padding: 15px; } }