:root {
  --bg: #f4f1ec;
  --card: #ffffff;
  --ink: #23211e;
  --mute: #6f6a63;
  --line: #e4ded5;
  --accent: #c8792d;
  --red: #e5484d;
  --blue: #3b82f6;
  --green: #22a559;
  --grey: #8a8f98;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.65 -apple-system, "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  padding: 0 12px env(safe-area-inset-bottom);
}
header, section, footer { max-width: 900px; margin: 0 auto; }
header { padding: 22px 4px 8px; }
h1 { font-size: 24px; margin: 0 0 4px; letter-spacing: 0.5px; }
h2 { font-size: 18px; margin: 0 0 10px; }
h3 { font-size: 15px; margin: 0 0 4px; }
.sub { margin: 0 0 10px; color: var(--mute); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips span { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; font-size: 13px; }
.card { background: var(--card); border-radius: 14px; padding: 14px; margin: 12px auto; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.viewer-card { padding: 0; overflow: hidden; }
.viewer { position: relative; height: 62vh; min-height: 360px; max-height: 620px; touch-action: none; background: #e7e2da; }
.viewer canvas { display: block; width: 100%; height: 100%; }
.labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.label {
  position: absolute; left: 0; top: 0; pointer-events: auto;
  font: 12px/1 -apple-system, "PingFang SC", "Noto Sans CJK SC", sans-serif;
  background: rgba(35,33,30,0.78); color: #fff; border: 0; border-radius: 6px; padding: 4px 6px; white-space: nowrap;
}
.info {
  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 2;
  background: rgba(255,255,255,0.96); border-radius: 12px; padding: 10px 36px 10px 12px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.18); font-size: 14px;
}
.info .name { font-weight: 700; }
.info .size { color: var(--accent); font-size: 13px; }
.info .note { margin-top: 2px; }
.info .close { position: absolute; right: 6px; top: 4px; border: 0; background: none; font-size: 22px; color: var(--mute); padding: 4px 8px; }
.controls { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 10px 12px 0; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button {
  border: 1px solid var(--line); background: #faf8f5; color: var(--ink); border-radius: 8px; padding: 6px 11px; font-size: 14px;
}
.seg button.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.legend { padding: 8px 12px 0; font-size: 13px; color: var(--mute); }
.legend .k { display: inline-block; width: 14px; height: 4px; border-radius: 2px; vertical-align: middle; margin: 0 4px 0 8px; }
.k.red { background: var(--red); } .k.blue { background: var(--blue); } .k.green { background: var(--green); } .k.grey { background: var(--grey); } .k.white { background: #fff; outline: 1px solid #bbb; }
.hint { color: var(--mute); font-size: 13px; margin: 8px 0 0; }
.viewer-card .hint { padding: 0 12px 12px; }
.zones { display: grid; gap: 10px; }
@media (min-width: 720px) { .zones { grid-template-columns: 1fr 1fr; } }
.zone { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.zone ul, .wire ul, .assume { margin: 0; padding-left: 18px; }
.why { background: #fbf6ee; border-radius: 10px; padding: 10px 12px; margin: 12px 0 0; }
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.plan { display: block; width: 100%; min-width: 640px; height: auto; font-family: -apple-system, "PingFang SC", "Noto Sans CJK SC", sans-serif; }
.plan.side { min-width: 0; }
.plan.side .tiny { font-size: 3.3px; }
.plan .band { fill: rgba(59,130,246,0.07); }
.plan .bandline { stroke: rgba(59,130,246,0.45); stroke-width: 0.3; stroke-dasharray: 1.2 0.8; }
.plan .band-t { fill: #3b6fc4; }
.plan text { font-size: 3.6px; fill: var(--ink); }
.plan .tiny { font-size: 2.8px; fill: var(--mute); }
.plan .small { font-size: 3.2px; }
.plan .lbl { font-weight: 600; }
.plan .inv { fill: #fff; }
.plan .dim { font-size: 3px; fill: var(--mute); }
.plan .strong { fill: var(--ink); font-weight: 600; }
.plan .wardrobe { fill: #efe9df; stroke: #8a6a4f; stroke-width: 0.4; }
.plan .bed { fill: #dfe6ee; stroke: #9aa8b8; stroke-width: 0.4; }
.plan .wall { stroke: #8b8478; stroke-width: 1.2; }
.plan .cart { fill: #fbfbfa; stroke: #9a9a9a; stroke-width: 0.5; }
.plan .desk { fill: rgba(222,186,134,0.55); stroke: #b08a55; stroke-width: 0.5; }
.plan .under { fill: none; stroke: #7a7368; stroke-width: 0.45; }
.plan .outlet { fill: #fff; stroke: #555; stroke-width: 0.4; }
.plan .base { fill: #ecebe8; stroke: #aaa; stroke-width: 0.3; }
.plan .dark { fill: #2c2d31; }
.plan .light { fill: #f6f6f4; stroke: #a9a9a6; stroke-width: 0.35; }
.plan .shelf { fill: #e3cda4; stroke: #a88a5c; stroke-width: 0.4; }
.plan .tb { fill: #9da2a9; stroke: #6d7178; stroke-width: 0.3; }
.plan .ont { fill: #fff; stroke: #666; stroke-width: 0.4; }
.plan .seat { fill: none; stroke: #b9b2a7; stroke-width: 0.5; stroke-dasharray: 1.5 1.2; }
.plan .tick { stroke: #8b8478; stroke-width: 0.35; }
.plan .dimline { stroke: #8b8478; stroke-width: 0.35; }
.plan .budget { stroke-width: 2.2; }
.plan .budget.a { stroke: #9ec5e8; } .plan .budget.b { stroke: #2c2d31; } .plan .budget.c { stroke: #d8d2c8; } .plan .budget.d { stroke: #e3cda4; }
.plan .hatch { stroke: #bbb; stroke-width: 0.5; }
.plan .deskline { stroke: #b08a55; stroke-width: 1.2; }
.plan .wallside { fill: #efe4cf; }
.plan .shelfside { fill: #dcc092; }
.plan .leg { fill: #d9d9d6; }
.plan .tbside { fill: #8b9097; }
.plan .mbside { fill: #2c2d31; }
.plan .lid { fill: none; stroke-width: 0.9; stroke-linecap: round; }
.plan .lid.tb { stroke: #8b9097; } .plan .lid.mb { stroke: #2c2d31; }
.plan .ghost { fill: rgba(44,45,49,0.12); stroke: #888; stroke-width: 0.25; stroke-dasharray: 1 0.8; }
.plan .sight { stroke: var(--green); stroke-width: 0.35; stroke-dasharray: 1.2 0.8; }
.plan .eye { fill: var(--accent); }
.wires { display: grid; gap: 10px; }
@media (min-width: 720px) { .wires { grid-template-columns: 1fr 1fr; } }
.wire { border-left: 4px solid; border-radius: 6px; padding: 6px 10px; background: #faf8f5; }
.wire.red { border-color: var(--red); } .wire.blue { border-color: var(--blue); } .wire.green { border-color: var(--green); } .wire.grey { border-color: var(--grey); }
table { border-collapse: collapse; width: 100%; font-size: 14px; margin-top: 12px; }
th, td { border-bottom: 1px solid var(--line); padding: 6px 6px; text-align: left; vertical-align: top; }
th { color: var(--mute); font-weight: 600; }
.shop { display: grid; gap: 10px; margin-top: 10px; }
@media (min-width: 720px) { .shop { grid-template-columns: 1fr 1fr; } }
.item { border: 1px solid var(--line); border-left: 4px solid; border-radius: 10px; padding: 10px 12px; }
.item.must { border-left-color: var(--accent); } .item.need { border-left-color: #8fb3d9; } .item.opt { border-left-color: #cfc8bd; }
.item .h { display: flex; justify-content: space-between; gap: 8px; }
.item .h span { color: var(--accent); white-space: nowrap; }
.item p { margin: 4px 0 6px; font-size: 14px; }
.copy { display: inline-block; background: #f3efe8; border-radius: 6px; padding: 2px 8px; font-size: 13px; cursor: pointer; font-family: inherit; }
.copy.copied { background: #dff3e6; }
.copy.copied::after { content: " 已复制"; color: var(--green); }
.legend2 { font-size: 13px; color: var(--mute); }
.legend2 i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin: 0 4px 0 10px; vertical-align: -1px; }
.legend2 i.must { background: var(--accent); } .legend2 i.need { background: #8fb3d9; } .legend2 i.opt { background: #cfc8bd; }
.steps { padding-left: 22px; margin: 0; }
.steps li { margin-bottom: 6px; }
details summary { cursor: pointer; color: var(--accent); }
.fallback { padding: 40px 20px; text-align: center; color: var(--mute); }
footer { color: var(--mute); font-size: 12px; text-align: center; padding: 8px 0 28px; }
.ver { margin: 4px 0 8px; }
.ver .seg button { min-width: 44px; }
.ver-title { margin: 8px 0 2px; font-size: 16px; }
.banner { background: #fff4e5; border: 1px solid #f1d3a6; border-radius: 10px; padding: 8px 12px; font-size: 14px; margin: 0 0 10px; }
.banner a, .changelog a { color: var(--accent); }
.changelog { list-style: none; padding: 0; margin: 10px 0 0; }
.changelog .log { border-left: 3px solid var(--line); padding: 2px 0 2px 12px; margin-bottom: 14px; }
.changelog .log p { margin: 4px 0; font-size: 14px; }
.changelog .log-h { font-size: 15px; }
.badge { font-size: 12px; background: #eee9e1; color: var(--mute); border-radius: 999px; padding: 1px 8px; margin-left: 4px; white-space: nowrap; }
.badge.cur { background: var(--ink); color: #fff; }
.plan .pdu { fill: #1b1b1d; }
.plan .pdu-t { fill: var(--ink); }
.plan .store { fill: rgba(230,211,179,0.55); stroke: #a88a5c; stroke-width: 0.35; stroke-dasharray: 1.2 0.8; }
.plan .storeside { fill: #e6d3b3; stroke: #a88a5c; stroke-width: 0.3; }
.plan .lid.max { stroke: #2c2d31; stroke-dasharray: 1.2 0.9; stroke-width: 0.6; }