:root{
  --bg:#f7f8fb; --card:#fff; --ink:#0f172a; --muted:#6b7280;
  --line:#e5e7eb; --accent:#3b82f6; --accent-2:#2563eb;
  --radius:12px; --shadow:0 6px 18px rgba(0,0,0,.06);
}

*{box-sizing:border-box} body{margin:0;background:linear-gradient(180deg,#f9fafb, #eef6ff)}
.page{max-width:1200px;margin:0 auto;padding:24px}

.topbar{display:flex;justify-content:space-between;align-items:center;background:var(--card);
  padding:16px 18px;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.topbar h1{margin:0;font:700 20px/1.1 ui-sans-serif,system-ui;color:var(--ink)}
.row{display:flex;align-items:center}
.gap12{gap:12px}
.field{display:flex;flex-direction:column;font:12px/1.2 ui-sans-serif;color:var(--muted)}
.field select{margin-top:6px;border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:#fff}

.layout{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;margin-top:18px}
@media (max-width:980px){.layout{grid-template-columns:1fr}}

.preview .stage{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px}
.canvas{height:480px;border:2px solid var(--line);border-radius:10px;position:relative;background:#fff;
  display:grid;place-items:center}
.canvas-label{position:absolute;top:8px;left:8px;background:rgba(0,0,0,.6);color:#fff;font:600 12px/1 ui-sans-serif;padding:4px 6px;border-radius:6px}
.layer{position:absolute;padding:4px 8px;font:600 12px/1 ui-sans-serif;color:#334155;border-radius:6px}
.layer.back{top:30%;left:18%;background:#e9f5ff;border:1px solid #cfe9ff}
.layer.body{top:40%;left:35%;background:#f1fff1;border:1px solid #c7f3c7}
.layer.head{top:30%;left:55%;background:#fff4e6;border:1px solid #ffe0b8}
.layer.hat{top:22%;left:58%;background:#f7e8ff;border:1px solid #ead5ff}
.layer.tail{top:48%;left:70%;background:#eef2ff;border:1px solid #dfe5ff}

.tip{margin:10px 0 0;color:var(--muted);font:12px/1.4 ui-sans-serif;text-align:center}

.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:12px}

.tabs{display:flex;gap:6px;background:#f3f4f6;border:1px solid var(--line);border-radius:10px;padding:4px;margin-bottom:12px}
.tab{flex:1;border:0;background:transparent;padding:10px 8px;border-radius:8px;font:700 12px/1 ui-sans-serif;color:#475569;cursor:pointer}
.tab.is-active{background:var(--accent);color:#fff}

.subtabs{display:flex;gap:6px;margin:6px 0 12px}
.sub{border:1px solid var(--line);background:#fff;border-radius:8px;padding:8px 10px;font:600 12px/1 ui-sans-serif;color:#475569;cursor:pointer}
.sub.is-active{border-color:var(--accent);color:var(--accent)}

.tabpane{display:none}.tabpane.is-active{display:block}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.card{border:1px solid var(--line);border-radius:10px;padding:10px;background:#fff}
.card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.card-head strong{font:700 13px/1 ui-sans-serif;color:var(--ink)}
.mini{border:1px solid var(--line);background:#fff;border-radius:6px;font:600 12px/1 ui-sans-serif;color:#475569;padding:6px 8px;cursor:pointer}
.thumb{height:96px;border:2px dashed var(--line);border-radius:10px;display:grid;place-items:center;background:#fafafa;color:#9aa3af;font:700 12px/1.1 ui-sans-serif;margin-bottom:8px}
.thumb.empty::after{content:"Drop PNG here"}
.controls{display:flex;gap:6px;margin-bottom:8px}
.btn{border:1px solid var(--accent);background:var(--accent);color:#fff;border-radius:8px;padding:8px 10px;font:700 12px/1 ui-sans-serif;cursor:pointer}
.btn.small{padding:6px 8px}
.btn.ghost{background:#fff;color:var(--accent);border-color:var(--accent)}
.xyz{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
.xyz label{display:flex;flex-direction:column;font:600 11px/1 ui-sans-serif;color:#475569}
.xyz input[type=range]{width:100%}