:root{font-family:system-ui,Arial,sans-serif;color:#16374b;background:#edf8fc}*{box-sizing:border-box}body{margin:0}header{background:#102d45;color:#fff;padding:16px 5%;display:flex;justify-content:space-between;align-items:center;gap:12px}header b{color:#f2c15b}button,input,select{font:inherit;border-radius:10px;padding:10px;border:1px solid #b9d4df}button{cursor:pointer;background:#087f9d;color:#fff;border:0}button.secondary{background:#e7f3f8;color:#16374b}button:disabled{opacity:.45;cursor:not-allowed}main{max-width:1100px;margin:28px auto;padding:0 16px}.card{background:#fff;border-radius:20px;padding:24px;box-shadow:0 8px 30px #1d5b7615;margin:16px 0}.hero{text-align:center;padding:36px 12px}.hero h1{font-size:clamp(25px,5vw,40px)}.actions,.tools,.class-list{display:flex;flex-wrap:wrap;gap:10px}.class-list button{background:#d8f1f6;color:#174158}.aquarium{height:340px;position:relative;overflow:hidden;border-radius:18px;background:linear-gradient(#72d9ec,#218ab5 75%,#17678e);border:5px solid #bcebf4}.aquarium:before{content:"🪸 🪨 🌿 🪸 🌱 🐚 🌿";position:absolute;bottom:0;left:0;right:0;font-size:36px;letter-spacing:15px;background:#d9c08a;padding:8px}.fish{position:absolute;display:flex;flex-direction:column;align-items:center;will-change:transform;transform-origin:center}.fish .emoji{transition:transform .25s ease;font-size:var(--size);filter:drop-shadow(0 4px 3px #14506a55)}.fish span{background:#ffffffd9;padding:3px 8px;border-radius:20px;font-size:12px;white-space:nowrap}.bubble{position:absolute;border:2px solid #ffffff77;border-radius:50%;animation:rise 5s linear infinite}@keyframes rise{0%{bottom:-20px;opacity:1}to{bottom:100%;opacity:0}}form{display:flex;flex-wrap:wrap;gap:9px;margin:12px 0}form input,form select{min-width:150px;flex:1}.notice{padding:12px;background:#fff3d8;border-radius:10px}.muted{color:#5a7988}.row{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}.students{display:grid;gap:10px}.student{display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid #e5eef1;padding:10px 0}.student .tools{align-items:center}@media(max-width:600px){.student{align-items:flex-start;flex-direction:column}.aquarium{height:300px}}.fish-3d-layer{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none;z-index:2}.aquarium:has(.fish-3d-layer) .fish .emoji{visibility:hidden}.aquarium .fish{z-index:3;pointer-events:none}.aquarium:before{z-index:1}