.wrap{max-width:1180px;margin:8px auto;padding:0 10px;display:flex;flex-direction:column;gap:8px}
.hero{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.prod{display:flex;flex-direction:column;gap:4px}.prod .img{height:64px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:26px}
.layout{display:grid;grid-template-columns:minmax(330px,430px) 1fr;gap:10px;align-items:start}
body.present .layout{grid-template-columns:minmax(300px,360px) 1fr}
@media(max-width:980px){.layout{grid-template-columns:1fr}}
.seg{display:flex;border:1px solid var(--line);border-radius:6px;overflow:hidden}.seg button{flex:1;border:0;border-radius:0;border-right:1px solid var(--line);padding:5px 4px}.seg button:last-child{border-right:0}
.seg button.on{background:var(--accent);color:#fff}
.opts label{display:flex;gap:5px;align-items:flex-start;margin:2px 0}.opts .grp{border-top:1px dashed var(--line);margin-top:5px;padding-top:4px}
body.present .dev{display:none}
.result{border-radius:7px;padding:8px 10px;border:1px solid var(--line)}.result.ok{background:var(--ok-soft);border-color:#b7e3cb}.result.fail{background:var(--fail-soft);border-color:#f3c3bf}
.phone-wrap{display:none;justify-content:center}.phone-wrap.on{display:flex;position:fixed;right:10px;bottom:10px;z-index:40;transform:scale(.68);transform-origin:bottom right;filter:drop-shadow(0 6px 18px rgba(0,0,0,.28))}
@media(max-width:980px){.phone-wrap.on{position:static;transform:none;filter:none}}
.phone-wrap iframe{width:318px;height:590px;border:0;background:transparent}
#spcsim{position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;background:rgba(10,20,30,.4)}#spcsim.on{display:flex}#spcsim iframe{width:380px;height:300px;border:0;background:transparent}
.nextbar{position:sticky;bottom:6px;display:none;gap:8px;justify-content:center}body.present .nextbar{display:flex}
button.pulse{animation:pl 1.2s infinite}@keyframes pl{50%{box-shadow:0 0 0 5px rgba(11,110,105,.25)}}

.scns{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.scn{display:flex;flex-direction:column;gap:2px;text-align:left;padding:7px 9px;border-radius:7px}.scn b{font-size:13px}.scn span{font-size:11px;color:var(--mute)}
.scn:hover:not(:disabled){background:var(--accent-soft)}.scn.on{border-color:var(--accent);background:var(--accent-soft)}
.atks{display:flex;flex-wrap:wrap;gap:5px}.atk{font-size:12px;padding:3px 8px;color:var(--fail);border-color:#f0c9c5}
#adv summary{cursor:pointer;color:var(--mute);font-weight:600}body.present #adv{display:none}
.setup-ok{color:var(--ok)}.setup-wait{color:var(--warn)}
@media(max-width:520px){.scns{grid-template-columns:1fr}}