.wrap { max-width:1240px; margin:0 auto; padding:28px 16px 48px; }
  /* h1 { font-family:'Space Grotesk',sans-serif; font-size:1.7rem; margin:0; } */
  .sub { color:var(--muted); margin:4px 0 22px; }
  .grid { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:20px; align-items:start; }
  @media (max-width:960px) { .grid { grid-template-columns:1fr; } }
  .card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px; }
  .card + .card { margin-top:16px; }
  .plate-head { font-family:'Space Grotesk',sans-serif; font-size:1rem; letter-spacing:.04em; text-transform:uppercase; margin:0 0 10px; }
  .color-scheme { font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:14px 0 8px; }
  .viewlabel { display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
  .viewlabel span { color:var(--muted); font-size:.8rem; }

  /* svg { width:100%; height:auto; display:block; background:var(--sky); border-radius:8px; } */
  .pz { stroke-linejoin:round; transition:opacity .15s, filter .15s; }
  .pz:not([data-zone="fixed"]) { cursor:pointer; }
  svg.dim .pz:not(.hot) { opacity:.18; }
  .pz.hot { filter:drop-shadow(0 0 4px rgba(37,99,235,.85)); }

  .tip { position:fixed; pointer-events:none; background:#111827; color:#fff; font-size:.8rem; padding:6px 10px;
         border-radius:6px; opacity:0; z-index:20; transition:opacity .1s; }
  .tip small { display:block; opacity:.7; }

  select { width:100%; font:inherit; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:#fff; }
  .row2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }

  .zone { border:1px solid var(--line); border-radius:10px; padding:10px; margin-top:10px; transition:opacity .2s; }
  .zone.off { opacity:.4; }
  .zone-head { display:flex; align-items:center; gap:10px; cursor:pointer; }
  .zone-head .num { width:20px; height:20px; border-radius:50%; background:#111827; color:#fff; font-size:.72rem;
                    display:grid; place-items:center; flex:none; }
  .zone-head .chip { width:26px; height:26px; border-radius:6px; border:1px solid #0002; flex:none; }
  .zone-head .nm { font-weight:600; font-size:.85rem; }
  .zone-head .cur { font-family:'IBM Plex Mono',monospace; font-size:.72rem; color:var(--muted); }
  .zone-head .hint { margin-left:auto; font-size:.72rem; color:var(--muted); }
  .swatches { display:grid; grid-template-columns:repeat(8,1fr); gap:5px; margin-top:8px; }
  .sw { aspect-ratio:1; border-radius:5px; border:1px solid #0002; cursor:pointer; padding:0; }
  .sw.on { outline:3px solid var(--accent); outline-offset:1px; }

  .parts { list-style:none; margin:0; padding:0; }
  .parts li { display:flex; align-items:center; gap:8px; padding:6px; border-radius:6px; }
  .parts li:hover, .parts li.hot { background:#EEF2FF; }
  .parts label { flex:1; font-size:.88rem; cursor:pointer; display:flex; align-items:center; gap:8px; }
  .parts code { font-family:'IBM Plex Mono',monospace; font-size:.72rem; color:var(--muted); min-width:58px; }
  .parts .dots { display:flex; gap:3px; }
  .parts .dots i { width:14px; height:14px; border-radius:3px; border:1px solid #0003; display:inline-block; }
  .parts input[type=color] { width:26px; height:26px; border:none; background:none; padding:0; cursor:pointer; }
  .parts .na { font-size:.72rem; color:var(--muted); }

  .actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
  /* button.btn { font:inherit; font-size:.85rem; padding:8px 12px; border-radius:8px; border:1px solid var(--line); cursor:pointer; } */
  /* button.btn.primary { background:var(--accent); border-color:var(--accent); } */
  pre { background:#0B1220; color:#D1E3FF; font-family:'IBM Plex Mono',monospace; font-size:.75rem; padding:12px; border-radius:8px;
        max-height:240px; overflow:auto; margin:10px 0 0; display:none; }