:root{--bg:#f5f6f8;--fg:#1c2230;--mut:#5d6677;--card:#fff;--bd:#d9dde5;--pri:#1f4fd8;--err:#b3261e;--warn:#8a5a00;--ok:#1b6e3c}
@media (prefers-color-scheme:dark){:root{--bg:#12151c;--fg:#e6e9ef;--mut:#9aa3b4;--card:#1b202b;--bd:#313846;--pri:#6c93ff}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.5 system-ui,sans-serif}
.top{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;background:var(--card);border-bottom:1px solid var(--bd);flex-wrap:wrap;gap:.5rem}
.brand{font-weight:700;color:var(--fg);text-decoration:none}
nav{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
nav a,.link{color:var(--pri);text-decoration:none;background:none;border:0;font:inherit;cursor:pointer;padding:0}
.who{color:var(--mut);font-size:.9rem}
main{max-width:1200px;margin:0 auto;padding:1rem}
h1{font-size:1.5rem}
.card{background:var(--card);border:1px solid var(--bd);border-radius:10px;padding:1rem;margin:1rem 0}
.narrow{max-width:520px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem}
.design img{width:100%;border:1px solid var(--bd);border-radius:6px}
.design h2{font-size:1.05rem;margin:.5rem 0}
label{display:block;margin:.6rem 0;font-size:.95rem}
input:not([type=checkbox]):not([type=radio]):not([type=color]),select,textarea{display:block;width:100%;padding:.5rem;margin-top:.25rem;border:1px solid var(--bd);border-radius:6px;background:var(--bg);color:var(--fg);font:inherit}
input[type=color]{display:block;margin-top:.25rem;height:2.2rem;width:4rem}
.chk{display:flex;gap:.5rem;align-items:center}
.btn{display:inline-block;background:var(--pri);color:#fff;border:0;border-radius:6px;padding:.5rem .9rem;text-decoration:none;cursor:pointer;font:inherit}
.btn.sec{background:transparent;color:var(--pri);border:1px solid var(--pri)}
.btn.danger{background:transparent;color:var(--err);border:1px solid var(--err)}
.btn.small{padding:.2rem .6rem;font-size:.85rem}
.actions{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.inline{display:inline}
.alert{padding:.7rem 1rem;border-radius:8px;margin:.6rem 0;border:1px solid}
.alert.err{color:var(--err);border-color:var(--err)}
.alert.warn{color:var(--warn);border-color:var(--warn)}
.alert.ok{color:var(--ok);border-color:var(--ok)}
.hint{color:var(--mut);font-size:.88rem}
.names{columns:2;max-height:320px;overflow:auto}
fieldset{border:1px solid var(--bd);border-radius:8px;margin:.8rem 0}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.editor-wrap{display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,1fr);gap:1rem;align-items:start}
@media (max-width:900px){.editor-wrap{grid-template-columns:1fr}.names{columns:1}}
.tools{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;margin:.5rem 0}
.tools label{margin:0}
.dot{display:inline-block;width:.8rem;height:.8rem;border-radius:50%}.dot.blue{background:#1f4fd8}.dot.green{background:#1b9e4b}
#stage{position:relative;width:100%;line-height:0;user-select:none;touch-action:none;border:1px solid var(--bd);cursor:crosshair}
#stage img{width:100%;height:auto;display:block}
.area{position:absolute;border:2px solid;box-sizing:border-box;cursor:move;overflow:hidden;display:flex;align-items:center}
.area.name{border-color:#1f4fd8;background:rgba(31,79,216,.15)}
.area.body{border-color:#1b9e4b;background:rgba(27,158,75,.15)}
.area .txt{width:100%;line-height:1.2;white-space:pre-wrap;pointer-events:none}
.handle{position:absolute;width:12px;height:12px;background:#fff;border:2px solid #333;border-radius:2px}
.handle.nw{left:-6px;top:-6px;cursor:nwse-resize}.handle.ne{right:-6px;top:-6px;cursor:nesw-resize}
.handle.sw{left:-6px;bottom:-6px;cursor:nesw-resize}.handle.se{right:-6px;bottom:-6px;cursor:nwse-resize}