:root { color-scheme: light dark; }
* { box-sizing: border-box; }
body { font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; margin:2rem; line-height:1.35; }
h1 { margin:0 0 .5rem; font-size:1.6rem; }
h2 { margin:.25rem 0 1rem; font-size:1.05rem; }

.wrap { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:380px 1fr; gap:1.25rem; }
@media (max-width:1000px){ .wrap { grid-template-columns:1fr; } }

.panel { border:1px solid #d0d0d0; border-radius:16px; padding:1rem; background:Canvas; }
.grid { display:grid; gap:.75rem; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.grid3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:.75rem; }
@media (max-width:600px){ .grid2,.grid3 { grid-template-columns:1fr; } }

.card { border:1px solid #e5e5e5; border-radius:12px; padding:.75rem; background: color-mix(in oklab, Canvas 92%, #fff); }
.row { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }
.muted { color:#666; font-size:.92rem; }
.section { margin-top:.75rem; padding-top:.75rem; border-top:1px dashed #ddd; }

.field { display:grid; grid-template-columns:1fr auto; gap:.35rem .6rem; align-items:center; }
.field label { grid-column:1 / -1; font-weight:600; font-size:.95rem; }
.value-badge { font-size:.82rem; padding:.1rem .45rem; border-radius:999px; border:1px solid #bbb; min-width:52px; text-align:center; color:#333; background: color-mix(in oklab, Canvas 94%, #fff); }

.btn { padding:.7rem 1rem; border-radius:12px; border:0; background:#2b7cff; color:#fff; font-weight:700; cursor:pointer; text-decoration:none; }
.btn.secondary { background:#444; }
.btn.ghost { background:transparent; border:1px solid #bbb; color:inherit; }

.pill { font-size:.8rem; padding:.15rem .6rem; border:1px solid #bbb; border-radius:999px; color:#444; }

.preview { display:grid; grid-template-columns:1fr 1fr; gap:1rem; align-items:start; }
@media (max-width:900px){ .preview { grid-template-columns:1fr; } }
.imgbox { border:1px solid #e0e0e0; border-radius:12px; padding:.5rem; background:#fff; }
img { width:100%; height:auto; display:block; border-radius:8px; background:#f7f7f7; }

.empty { border:1px dashed #c8c8c8; border-radius:10px; padding:1.25rem; text-align:center; color:#777; font-size:.95rem; background:#fafafa; }
input[type="range"] { width:100%; }
select, input[type="file"] { width:100%; }
#status { font-size:.92rem; color:#666; }
.hidden { display:none; }