:root{--bg:#0b1020;--panel:#12172a;--ink:#eaf0ff;--muted:#9aa3ba;--accent:#6ea8fe;--card:#0f1530}
*{box-sizing:border-box}html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,'Noto Sans JP',sans-serif;background:radial-gradient(1200px 600px at 20% -10%, #1a2448, transparent), var(--bg);color:var(--ink)}
.wrap{display:grid;grid-template-columns:320px 1fr;gap:16px;height:100%;padding:16px}
@media (max-width:900px){.wrap{grid-template-columns:1fr;grid-auto-rows:min-content 1fr}}
.panel{background:linear-gradient(180deg,#161c34,#0f1530);border:1px solid #1f2a55;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.panel h2{margin:0;padding:14px 16px;font-size:18px;border-bottom:1px solid #1f2a55;color:#bcd0ff}
.panel .body{padding:14px 16px;display:grid;gap:12px}
.mainpanel{display:grid;grid-template-rows:56px 1fr;min-height:560px}
.btn{appearance:none;border:1px solid #294074;background:#1a2750;color:#eaf0ff;padding:10px 12px;border-radius:12px;cursor:pointer;font-weight:600}
.btn:hover{filter:brightness(1.08)}.btn:active{transform:translateY(1px)}.btn-ok{background:linear-gradient(180deg,#1e6dff,#1148b7);border-color:#2052bf}.btn-ghost{background:transparent;border-color:#33406b;color:#cfe0ff}
.control{display:grid;gap:6px}.tiny{font-size:11px;color:var(--muted)}.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.row>*{flex:1}
.assets{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.assets img{width:100%;aspect-ratio:1.2/1;object-fit:contain;background:#0c1126;border:1px dashed #2a3764;border-radius:10px;cursor:pointer}
.assets img:hover{outline:2px solid #3f63d6}
.stage{position:relative;background:radial-gradient(600px 300px at 60% -10%, #19234a, transparent), #0a0f22;border:1px solid #1f2a55;border-radius:16px;overflow:hidden;min-height:480px}
.toolbar{position:sticky;top:0;z-index:1000;display:flex;gap:8px;padding:10px;background:linear-gradient(180deg, rgba(8,12,30,.85), rgba(8,12,30,.45));backdrop-filter:blur(8px);border-bottom:1px solid #1f2a55}
.canvasArea{position:relative;width:100%;height:calc(100% - 56px)}
.photoHolder{position:absolute;inset:0;display:grid;place-items:center}
.photo{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.layer{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(1) rotate(0deg);touch-action:none;cursor:grab}
.layer:active{cursor:grabbing}
.layer img{display:block;width:260px;height:auto;pointer-events:none;filter:drop-shadow(0 10px 16px rgba(0,0,0,.35))}
.tint{position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;opacity:.0}
.layersList{display:grid;gap:8px}
.layerItem{display:grid;gap:8px;background:var(--card);border:1px solid #243062;border-radius:12px;padding:10px}
.layerItem h3{margin:0;font-size:14px;color:#cfe0ff}
.badge{font-size:11px;padding:2px 8px;border:1px solid #2b3b74;border-radius:99px;color:#cfe0ff;background:#111839}
.dropHint{position:absolute;inset:0;display:grid;place-items:center;color:#9aa3ba;opacity:.0;transition:opacity .2s ease;font-size:14px;pointer-events:none}
.stage.dragover .dropHint{opacity:.8}