:root { --bg:#faf7ff; --surface:#fff; --text:#1f1630; --muted:#5f5675; --line:#e4dcf2; --accent:#6d28d9; --accent-text:#fff; --danger:#b42318; --r:14px; color-scheme: light dark; }
@media (prefers-color-scheme: dark) { :root { --bg:#15101f; --surface:#1f1830; --text:#f1ecfb; --muted:#b0a6c6; --line:#33294a; --accent:#a78bfa; --accent-text:#15101f; --danger:#ff8a80; } }
* { box-sizing: border-box; }
html, body { margin:0; background:var(--bg); color:var(--text); font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
body { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
header { display:flex; align-items:center; justify-content:space-between; max-width:720px; margin:0 auto; padding:14px 16px 8px; }
h1 { font-size:1.35rem; margin:0; } h2 { font-size:1.1rem; margin:0; }
.hdr { display:flex; gap:8px; }
.bar { max-width:720px; margin:0 auto 4px; height:6px; background:var(--line); border-radius:6px; overflow:hidden; width:calc(100% - 32px); }
#barFill { height:100%; width:25%; background:var(--accent); transition:width .25s; }
main { max-width:720px; margin:0 auto; padding:8px 16px 40px; display:grid; gap:14px; }
.step { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:16px; display:grid; gap:14px; }
label { display:grid; gap:6px; font-size:.92rem; color:var(--muted); }
input, select, textarea { font:inherit; color:var(--text); background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:10px 12px; width:100%; }
textarea { resize:vertical; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; }
label.check { display:flex; align-items:center; gap:8px; color:var(--text); } label.check input { width:auto; }
.chips { display:flex; flex-wrap:wrap; gap:8px; } .chips button { font-size:.85rem; padding:6px 10px; border-radius:999px; }
.swatches { display:flex; gap:6px; min-height:22px; } .swatches i { width:34px; height:22px; border-radius:6px; border:1px solid var(--line); display:block; }
.colors { display:flex; align-items:center; gap:10px; color:var(--muted); } .colors input { width:48px; height:40px; padding:2px; }
.actions { display:flex; flex-wrap:wrap; gap:10px; }
button, .btn { font:inherit; border-radius:10px; padding:11px 16px; border:1px solid var(--line); cursor:pointer; text-decoration:none; text-align:center; color:var(--text); background:var(--surface); }
button.primary { background:var(--accent); color:var(--accent-text); border-color:var(--accent); font-weight:600; flex:1 1 160px; }
button.secondary, .btn.secondary { background:transparent; } button.small { padding:6px 10px; font-size:.85rem; }
button:disabled { opacity:.55; }
.banner { background:var(--surface); border:1px solid var(--accent); border-radius:var(--r); padding:12px 14px; font-size:.92rem; }
.hint { color:var(--muted); font-size:.88rem; margin:0; } .error { color:var(--danger); margin:0; white-space:pre-wrap; }
dl { margin:0; display:grid; gap:8px; } dt { color:var(--muted); font-size:.82rem; } dd { margin:0; }
#img { width:100%; height:auto; border-radius:10px; display:block; }
details summary { cursor:pointer; font-weight:600; } #promptMeta { font-weight:400; color:var(--muted); font-size:.85rem; }
#promptText { color:var(--muted); font-size:.9rem; white-space:pre-wrap; }
dialog { border:1px solid var(--line); border-radius:var(--r); background:var(--surface); color:var(--text); width:min(92vw,420px); } dialog form { display:grid; gap:14px; }
[hidden] { display:none !important; }