:root {
  --bg: #0e1116; --panel: rgba(255,255,255,0.06); --border: rgba(255,255,255,0.12);
  --text: #e9eef4; --muted: #9fb0c0; --accent: #64b5f6; --radius: 14px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
body{
  margin:0; font-family:'Noto Sans JP',system-ui,sans-serif; color:var(--text);
  background: radial-gradient(1200px 800px at 20% -10%, #1b2230 0%, #0e1116 50%) fixed;
}
.app-header{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:16px 20px; position:sticky; top:0; z-index:10;
  background:linear-gradient(180deg,rgba(12,15,20,.9),rgba(12,15,20,.55));
  backdrop-filter:blur(10px); border-bottom:1px solid var(--border);
}
.app-header h1{margin:0;font-size:18px;letter-spacing:.5px}
.header-actions{display:flex;gap:8px;flex-wrap:wrap}
button{
  background:linear-gradient(180deg,rgba(100,181,246,.18),rgba(156,123,245,.18));
  border:1px solid var(--border); color:var(--text); padding:10px 14px; border-radius:10px;
  cursor:pointer; transition:.2s ease; box-shadow:var(--shadow);
}
button:hover{transform:translateY(-1px);border-color:rgba(100,181,246,.5)}
button.ghost{background:transparent;box-shadow:none}
#themeBtn{width:42px;padding:10px}

main{max-width:980px;margin:20px auto;padding:0 16px}
.panel{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  padding:16px; margin-bottom:16px; box-shadow:var(--shadow)
}
.panel h2{margin:0 0 12px;font-size:16px;color:var(--muted)}
.slot-row{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.slot{aspect-ratio:1;width:100%;position:relative;overflow:hidden;border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
  border:1px solid var(--border); display:grid; place-items:center}
.slot img{width:100%;height:100%;object-fit:cover;display:none}
.slot .placeholder{font-size:28px;color:var(--muted)}
.slot .badge{position:absolute;top:6px;left:6px;background:rgba(0,0,0,.55);
  color:#fff;font-size:12px;padding:2px 6px;border-radius:12px;display:none}
.slot .remove{position:absolute;top:6px;right:6px;background:rgba(239,83,80,.9);
  border-radius:10px;padding:2px 6px;display:none}
.slot.filled .placeholder{display:none}
.slot.filled img,.slot.filled .remove{display:block}
.slot.filled .badge{display:inline-block}

dialog#pickerDialog{
  width:min(900px,92vw);max-height:88vh;border:1px solid var(--border);
  border-radius:16px;padding:8px 12px;background:#0f141c;color:var(--text)
}
.dialog-head{display:flex;gap:8px;align-items:center}
#searchBox{flex:1;padding:10px 12px;border-radius:10px;border:1px solid var(--border);
  background:rgba(255,255,255,.06);color:var(--text)}
.image-grid{margin-top:12px;display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(90px,1fr))}
.option{position:relative;aspect-ratio:1;border:1px solid var(--border);border-radius:12px;
  overflow:hidden;background:rgba(255,255,255,.04);cursor:pointer;transition:.15s}
.option:hover{transform:translateY(-2px);border-color:rgba(100,181,246,.6)}
.option img{width:100%;height:100%;object-fit:cover}
.option .name{position:absolute;left:0;right:0;bottom:0;padding:3px 6px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.75));color:#fff;font-size:11px;text-align:center}

@media (max-width:640px){.slot-row{grid-template-columns:repeat(5,1fr)}.header-actions{gap:6px}}