:root { --bg:#eef4ff; --card:#fff; --text:#1f2a44; --sub:#60708f; }
*{box-sizing:border-box}
body{margin:0;font-family:"Microsoft YaHei",sans-serif;background:var(--bg);color:var(--text)}
.app{max-width:1180px;margin:0 auto;padding:16px}
.card{background:var(--card);border-radius:16px;box-shadow:0 10px 24px rgba(43,76,160,.12)}
.hero{padding:16px;margin-bottom:14px}.hero h1{margin:0 0 6px}.hero p{margin:0;color:var(--sub)}
.layout{display:grid;grid-template-columns:1fr 320px;gap:14px}
.lab{padding:14px;min-height:540px}
.tube-area{display:grid;grid-template-columns:repeat(auto-fit,minmax(86px,1fr));gap:14px;align-items:end}
.tube{height:220px;border:3px solid #90a7d8;border-top:none;border-radius:0 0 18px 18px;background:#f8fbff;position:relative;overflow:hidden;cursor:pointer}
.tube.selected{outline:4px solid #5a7bff;outline-offset:2px}
.slot{height:25%;border-top:1px solid rgba(130,150,210,.25);position:relative}
.slot.fill::after{content:"";position:absolute;left:0;right:0;top:0;bottom:0;background:var(--color)}
.slot.fill.bubble::before{content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.6);left:18%;bottom:8px;animation:bubble 1s infinite ease-in-out}
@keyframes bubble{0%{transform:translateY(0);opacity:.1}50%{opacity:.9}100%{transform:translateY(-14px);opacity:0}}
.panel{padding:14px}.status{min-height:48px;color:var(--sub);font-weight:700}
.actions{display:grid;gap:8px;margin:10px 0}
button{border:0;border-radius:10px;padding:8px 12px;background:#4d71ff;color:#fff;font-weight:700;cursor:pointer}
button.ghost{background:#eaf0ff;color:var(--text)}
@media (max-width:980px){.layout{grid-template-columns:1fr}}