:root { --bg:#f4f3f0; --ink:#27241d; --muted:#6b6862; --line:#dcd8cf; --red:#e2001a; --card:#fff; }
* { box-sizing: border-box; }
body { margin:0; font-family:"Space Grotesk",system-ui,sans-serif; background:var(--bg); color:var(--ink); }
.topbar { background:var(--ink); color:#fff; padding:14px 22px; font-weight:500; letter-spacing:.5px; }
.topbar .brand { color:var(--red); font-weight:700; text-decoration:none; }
.wrap { max-width:1280px; margin:24px auto; padding:0 22px; }
h1 { font-weight:700; } h2 { font-weight:500; font-size:1rem; margin:0 0 8px; }
.hint { color:var(--muted); font-size:.85rem; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:20px; max-width:560px; display:flex; flex-direction:column; gap:12px; }
.btn { display:inline-block; background:var(--ink); color:#fff; border:0; border-radius:8px; padding:10px 16px; cursor:pointer; text-decoration:none; font:inherit; }
.btn-primary { background:var(--red); }
.link { color:var(--muted); display:inline-block; margin-top:14px; }
.panes { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.pane { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:18px; }
.line { display:flex; gap:8px; margin-bottom:6px; }
.line input { flex:1; padding:6px 8px; border:1px solid var(--line); border-radius:6px; }
.line select { width:150px; }
.fields { width:100%; border-collapse:collapse; margin:8px 0 16px; }
.fields th { text-align:left; color:var(--muted); font-weight:500; padding:3px 8px 3px 0; width:120px; }
.fields td { padding:3px 0; }
.crop-wrap { position:relative; display:inline-block; border:1px solid var(--line); user-select:none; cursor:crosshair; }
.crop-wrap img { display:block; max-width:100%; }
.crop-box { position:absolute; border:2px solid var(--red); background:rgba(226,0,26,.12); pointer-events:none; }
label { display:flex; flex-direction:column; gap:4px; font-size:.9rem; }
label input { padding:8px; border:1px solid var(--line); border-radius:6px; }