/* Molecule Builder: dark violet stage + white side cards (same family as Atom Builder). Frame from /shared/style.css. */
.mb-head{max-width:1080px;margin:0 auto;padding:4px 16px 0}
.mb-head h1{margin:6px 0 4px;font-size:clamp(24px,6vw,34px)}
.mb-head p{margin:0 0 10px;color:#4b5563;font-size:15px}
#mb-wrap{position:relative;max-width:1080px;margin:0 auto;padding:0 8px;user-select:none;-webkit-user-select:none}
.mb-bar{display:flex;align-items:center;gap:8px;padding:0 4px 8px}
.mb-bar .sp{flex:1}
.mb-bar button{height:40px;min-width:40px;padding:0 12px;border-radius:12px;border:0;background:#fff;box-shadow:0 1px 3px #0002;font:600 14px/1 system-ui,sans-serif;color:#1f2a3a;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.mb-main{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:14px;align-items:start}
#mb-stage{position:relative;border-radius:22px;background:radial-gradient(circle at 50% 40%,#3a3466,#1d1a38 72%);box-shadow:0 6px 16px #0003;overflow:hidden}
#mb-svg{display:block;width:100%;height:auto;max-height:calc(100vh - 280px);min-height:250px;margin:0 auto;touch-action:none;cursor:grab}
#mb-svg .mb-atom{cursor:pointer}
.mb-hot{animation:mbhot 1s ease-in-out infinite alternate}
@keyframes mbhot{from{opacity:.55}to{opacity:1}}
#mb-banner{position:absolute;top:12px;left:50%;transform:translateX(-50%);background:#3a1f5ce6;box-shadow:0 0 0 2px #ffc34a88;color:#fff;font:800 18px system-ui,sans-serif;padding:7px 18px;border-radius:14px;pointer-events:none;white-space:nowrap}
#mb-banner.pop{animation:mbpop .5s}
@keyframes mbpop{30%{transform:translateX(-50%) scale(1.15)}}
.mb-msg{position:absolute;left:12px;right:12px;bottom:104px;margin:0 auto;max-width:520px;padding:8px 14px;border-radius:14px;font:600 14px/1.35 system-ui,sans-serif;text-align:center;background:#0d1424d9;color:#fff;pointer-events:none}
.mb-msg.warn{background:#5c4400e6}
#mb-banner[hidden],.mb-msg[hidden],#mb-float[hidden]{display:none}
.mb-tray{display:flex;justify-content:center;gap:10px;padding:2px 10px 14px}
.mb-at{position:relative;flex:0 1 86px;border-radius:16px;background:#ffffff12;border:2px solid #ffffff26;padding:6px 4px 6px;display:flex;flex-direction:column;align-items:center;gap:1px;cursor:grab;touch-action:none;color:#fff;font:700 12px system-ui,sans-serif}
.mb-at:hover{background:#ffffff1c}
.mb-at svg{pointer-events:none}
.mb-at.glow{border-color:#ffd24a;box-shadow:0 0 0 4px #ffd24a33;animation:mbpulse 1.2s ease-in-out infinite alternate}
@keyframes mbpulse{to{box-shadow:0 0 0 7px #ffd24a22}}
#mb-hand{position:absolute;right:-6px;bottom:-14px;font-size:30px;filter:drop-shadow(0 2px 2px #0007);pointer-events:none;animation:mbtap 1s ease-in-out infinite}
@keyframes mbtap{50%{transform:translate(-4px,-6px) scale(.92)}}
#mb-float{position:fixed;z-index:50;pointer-events:none;filter:drop-shadow(0 6px 8px #0005)}
.mb-side{display:flex;flex-direction:column;gap:12px}
.mb-card{background:#fff;border-radius:18px;box-shadow:0 1px 4px #0002;padding:14px 16px}
#mb-formula{font:800 34px/1.05 system-ui,sans-serif}
#mb-formula sub{font-size:20px}
#mb-name{font:800 20px system-ui,sans-serif;margin-top:4px}
#mb-shape{font:800 15px system-ui,sans-serif;color:#6d28d9;margin-top:6px}
#mb-shape.open{color:#b26a00}
#mb-shape:empty{display:none}
#mb-line{font:14px/1.45 system-ui,sans-serif;color:#374151;margin:6px 0 0}
.mb-lab{font:700 12px system-ui,sans-serif;color:#6b7280;text-transform:uppercase;letter-spacing:.6px;display:flex;justify-content:space-between;margin-bottom:8px}
#mb-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
#mb-grid div{border-radius:6px;background:#eef0f3;color:#9aa3ae;font:700 12px system-ui,sans-serif;display:grid;place-items:center;height:30px;white-space:nowrap;overflow:hidden}
#mb-grid sub{font-size:9px;vertical-align:-2px;line-height:0}
#mb-grid .got{background:#ede4ff;color:#5b21b6}
#mb-grid .now{background:#6d28d9;color:#fff}
.mb-pack{display:flex;flex-direction:column;gap:8px}
.mb-pack a{display:flex;gap:12px;align-items:center;background:#fff;border-radius:16px;box-shadow:0 1px 4px #0002;padding:12px 14px;text-decoration:none;color:#1f2a3a}
.mb-pack img{flex:0 0 auto;width:52px;height:auto;border-radius:6px;box-shadow:0 1px 4px #0003}
.mb-pack .tag{display:block;font:700 12px system-ui,sans-serif;color:#6b7280;text-transform:uppercase;letter-spacing:.5px}
.mb-pack b{display:block;color:#0f6b4f;font-size:15px;margin:2px 0;line-height:1.3}
.mb-pack .ln{display:block;font-size:13px;color:#4b5563;line-height:1.4}
.mb-info{max-width:820px;margin:26px auto 0;padding:0 16px 30px}
.mb-info h2{font-size:22px;margin:26px 0 8px}.mb-info h3{font-size:17px;margin:18px 0 4px}
.mb-info p,.mb-info li{font-size:16px;line-height:1.6;color:#374151}
.mb-info ul{margin:0;padding-left:22px}
.mb-info li{margin:4px 0;padding-left:2px}
@media (max-width:820px){.mb-main{grid-template-columns:1fr}#mb-svg{max-height:none}}
@media (max-width:420px){.mb-tray{gap:5px;padding:2px 6px 12px}.mb-at{font-size:11px;padding:5px 2px}.mb-bar button .lbl{display:none}#mb-formula{font-size:28px}#mb-banner{font-size:15px}.mb-msg{bottom:92px}}