/* Atom Builder: dark stage + white side cards. Page frame comes from /shared/style.css. */
.ab-head{max-width:1080px;margin:0 auto;padding:4px 16px 0}
.ab-head h1{margin:6px 0 4px;font-size:clamp(24px,6vw,34px)}
.ab-head p{margin:0 0 10px;color:#4b5563;font-size:15px}
#ab-wrap{position:relative;max-width:1080px;margin:0 auto;padding:0 8px;user-select:none;-webkit-user-select:none}
.ab-bar{display:flex;align-items:center;gap:8px;padding:0 4px 8px}
.ab-bar .sp{flex:1}
.ab-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}
.ab-bar button:active{transform:translateY(1px)}
.ab-main{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:14px;align-items:start}
#ab-stage{position:relative;border-radius:22px;background:radial-gradient(circle at 50% 42%,#33436a,#1b2438 72%);box-shadow:0 6px 16px #0003;overflow:hidden;touch-action:none}
#ab-svg{display:block;width:100%;height:auto;max-height:calc(100vh - 250px);min-height:280px;margin:0 auto;touch-action:none;cursor:default}
#ab-svg .ab-pt{cursor:pointer}
.ab-msg{position:absolute;left:12px;right:12px;top:10px;margin:0 auto;max-width:560px;padding:9px 14px;border-radius:14px;font:600 15px/1.35 system-ui,sans-serif;text-align:center;background:#0d1424d9;color:#fff;pointer-events:none}
.ab-msg.warn{background:#5c4400e6}
.ab-msg.decay{background:#3a1f5ce6;box-shadow:0 0 0 2px #ffc34a88}
.ab-msg[hidden],#ab-float[hidden]{display:none}
.ab-bins{display:flex;justify-content:center;gap:12px;padding:2px 10px 14px}
.ab-bin{position:relative;flex:0 1 132px;border-radius:16px;background:#ffffff12;border:2px solid #ffffff26;padding:8px 6px 6px;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:grab;touch-action:none;color:#fff;font:700 13px system-ui,sans-serif}
.ab-bin:hover{background:#ffffff1c}
.ab-bin .balls{display:flex;height:30px;align-items:center}
.ab-bin .balls svg{margin-left:-9px}.ab-bin .balls svg:first-child{margin-left:0}
.ab-bin .nm{opacity:.9}
.ab-bin.glow{border-color:#ffd24a;box-shadow:0 0 0 4px #ffd24a33;animation:abpulse 1.2s ease-in-out infinite alternate}
@keyframes abpulse{to{box-shadow:0 0 0 7px #ffd24a22}}
.ab-bin.shake{animation:abshake .35s}
@keyframes abshake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
#ab-hand{position:absolute;right:-8px;bottom:-16px;font-size:32px;filter:drop-shadow(0 2px 2px #0007);pointer-events:none;animation:abtap 1s ease-in-out infinite}
@keyframes abtap{50%{transform:translate(-4px,-6px) scale(.92)}}
#ab-float{position:fixed;z-index:50;pointer-events:none;filter:drop-shadow(0 6px 8px #0005)}
.ab-side{display:flex;flex-direction:column;gap:12px}
.ab-card{background:#fff;border-radius:18px;box-shadow:0 1px 4px #0002;padding:14px 16px}
.ab-top{display:flex;gap:14px;align-items:flex-start}
#ab-facts .nm{font-size:18px}
#ab-nums .chips{display:flex;gap:6px;margin-top:12px}
#ab-nums .chip{flex:1;display:flex;align-items:center;gap:5px;background:#f3f4f6;border-radius:10px;padding:6px 7px;font:13px system-ui,sans-serif;color:#374151;white-space:nowrap}
#ab-nums .chip b{font-size:15px;color:#1f2a3a}
#ab-nums .chip i{flex:0 0 12px;height:12px;border-radius:50%}
#ab-nums .chip.p i{background:#e5483a}#ab-nums .chip.n i{background:#a9b1bc}#ab-nums .chip.e i{background:#3b8fe0}
#ab-nums .az{margin-top:8px;font:14px system-ui,sans-serif;color:#374151}
.ab-tile{flex:0 0 auto;width:92px;height:104px;border-radius:14px;background:#e9f3ea;border:3px solid #2f8f5b;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}
.ab-tile.empty{background:#f3f4f6;border:3px dashed #9aa3ae}
.ab-tile.beyond{background:#eef0fb;border-color:#5561b8}
.ab-tile #ab-tz{position:absolute;top:5px;left:9px;font:700 15px system-ui,sans-serif;color:#2f8f5b}
.ab-tile #ab-ts{font:800 44px/1 system-ui,sans-serif;color:#1f2a3a}
.ab-tile #ab-ts.two{font-size:36px;margin-top:8px}
.ab-tile #ab-ts sup{font-size:20px;vertical-align:top;margin-left:1px;color:#b4501f}
.ab-tile #ab-tn{font:600 13px system-ui,sans-serif;margin-top:4px}
.ab-tile.pop{animation:abpop .35s}.ab-tile.popbig{animation:abpopbig .6s}
@keyframes abpop{40%{transform:scale(1.08)}}
@keyframes abpopbig{30%{transform:scale(1.18) rotate(-4deg);box-shadow:0 0 0 8px #2f8f5b33}60%{transform:scale(.97) rotate(2deg)}}
#ab-facts{font:15px/1.5 system-ui,sans-serif;color:#1f2a3a;min-width:0}
#ab-facts .row{font-size:14px}
#ab-facts .dim{color:#6b7280;font-size:13px}
#ab-facts .ok{color:#2f8f5b;font-weight:800}
#ab-facts .warn{color:#b26a00;font-weight:800}
#ab-facts .bad{color:#c0392b;font-weight:800}
#ab-facts .ion{color:#b4501f}
.ab-table{background:#fff;border-radius:18px;box-shadow:0 1px 4px #0002;padding:12px 14px}
.ab-table .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}
#ab-pt{display:grid;grid-template-columns:repeat(8,1fr);gap:4px}
#ab-pt div{aspect-ratio:1;border-radius:6px;background:#eef0f3;color:#9aa3ae;font:700 12px system-ui,sans-serif;display:grid;place-items:center;transition:background .3s}
#ab-pt .got{background:#dff0e4;color:#1f6b43}
#ab-pt .now{background:#2f8f5b;color:#fff;box-shadow:0 0 0 3px #2f8f5b55}
.ab-pack{display:flex;flex-direction:column;gap:8px}
.ab-pack a{display:flex;gap:14px;align-items:center;background:#fff;border-radius:16px;box-shadow:0 1px 4px #0002;padding:12px 14px;text-decoration:none;color:#1f2a3a}
.ab-pack img{flex:0 0 auto;width:56px;height:auto;border-radius:6px;box-shadow:0 1px 4px #0003}
.ab-pack .tag{display:block;font:700 12px system-ui,sans-serif;color:#6b7280;text-transform:uppercase;letter-spacing:.5px}
.ab-pack b{display:block;color:#0f6b4f;font-size:15px;margin:2px 0;line-height:1.3}
.ab-pack .ln{display:block;font-size:13px;color:#4b5563;line-height:1.4}
.ab-info{max-width:820px;margin:26px auto 0;padding:0 16px 30px}
.ab-info h2{font-size:22px;margin:26px 0 8px}.ab-info h3{font-size:17px;margin:18px 0 4px}
.ab-info p,.ab-info li{font-size:16px;line-height:1.6;color:#374151}
.ab-info ul{margin:0;padding-left:22px}
.ab-info li{margin:4px 0;padding-left:2px}
@media (max-width:820px){.ab-main{grid-template-columns:1fr}#ab-svg{max-height:none}}
@media (max-width:420px){#ab-nums .chip{font-size:12px;padding:6px 5px}.ab-bin{font-size:12px;padding:6px 4px 5px}.ab-card{padding:12px}.ab-tile{width:80px;height:92px}.ab-tile #ab-ts{font-size:38px}#ab-facts{font-size:14px}#ab-facts .row{font-size:13px}.ab-bar button .lbl{display:none}}
#ab-mini{display:none}
@media (max-width:820px){#ab-mini:not(:empty){display:flex;position:absolute;left:10px;top:10px;align-items:center;gap:8px;background:#ffffff14;border:1.5px solid #ffffff2a;border-radius:12px;padding:5px 10px 5px 8px;color:#fff;pointer-events:none}
#ab-mini b{font:800 26px/1 system-ui,sans-serif}#ab-mini b sup{font-size:13px;color:#ffb38a}
#ab-mini span{font:700 13px/1.25 system-ui,sans-serif}#ab-mini i{font-style:normal;font-weight:600;font-size:12px}
#ab-mini i.stable{color:#8fe0ad}#ab-mini i.unstable{color:#ffc34a}#ab-mini i.unbound{color:#ff8f80}
.ab-msg{top:62px}}