*{margin:0;padding:0;box-sizing:border-box}html,body,#root{width:100%;height:100%;overflow:hidden;font-family:Avenir Next,Helvetica Neue,PingFang TC,sans-serif;background:#e8eef5}body:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:4;pointer-events:none;background:radial-gradient(circle at 50% 48%,transparent 50%,rgba(36,50,64,.12) 100%),linear-gradient(180deg,rgba(255,255,255,.22),transparent 22%,rgba(91,192,222,.06))}canvas{touch-action:none}.ui-panel{position:fixed;top:16px;left:16px;z-index:10;display:flex;flex-direction:column;gap:10px;padding:16px;width:240px;background:#f4f8fbe6;border:2px solid rgba(91,192,222,.85);border-radius:14px;color:#243240;box-shadow:0 12px #3a46541a,0 22px 50px #2c435638;-webkit-backdrop-filter:blur(12px) saturate(1.15);backdrop-filter:blur(12px) saturate(1.15)}.ui-panel h2{font-size:15px;font-weight:800;letter-spacing:0}.ui-panel.is-collapsed{width:auto;padding:0;gap:6px;background:transparent;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}.panel-toggle{width:100%;padding:10px 14px;border:2px solid #2f7d97;border-radius:10px;background:#5bc0de;color:#06303d;box-shadow:0 4px #2f7d97,0 16px 34px #2c435633;cursor:pointer;font:inherit;font-size:13px;font-weight:800}.panel-toggle:hover{background:#39a7d4}.ui-panel label{font-size:12px;color:#69573e}.ui-panel input:not([type=file]),.ui-panel select,.ui-panel .upload-btn{width:100%;padding:8px 10px;font-size:13px;border-radius:8px;border:2px solid rgba(58,70,84,.16);background:#fff;color:#243240;cursor:pointer}.ui-panel .upload-btn{text-align:center;background:#5bc0de;border:2px solid #2f7d97;color:#06303d;font-weight:800;box-shadow:0 4px #2f7d97;transition:background .15s ease}.ui-panel .upload-btn:hover{background:#39a7d4}.ui-panel .upload-btn.secondary{background:#54c275;border-color:#2f7d47;box-shadow:0 4px #2f7d47}.ui-panel .upload-btn.danger{background:#555;color:#fff4d8}.ui-panel .upload-btn:disabled{cursor:wait;opacity:.72}.sync-status{min-height:14px;font-size:11px;line-height:1.3;color:#69573e}.admin-login{display:flex;flex-direction:column;gap:8px}.admin-row{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;color:#69573e}.admin-row button{padding:5px 8px;border:2px solid rgba(76,55,34,.2);border-radius:8px;background:#fffaf0;color:#2f2b25;cursor:pointer;font:inherit;font-size:12px;font-weight:700}.login-error{font-size:11px;line-height:1.3;color:#a93824}.ui-panel input[type=file]{display:none}.music-control{position:fixed;top:16px;right:16px;z-index:12}.music-button{padding:10px 14px;min-width:88px;border:2px solid #2f7d97;border-radius:10px;background:#5bc0de;color:#06303d;box-shadow:0 4px #2f7d97,0 16px 34px #2c435633;cursor:pointer;font:inherit;font-size:13px;font-weight:800}.music-button:hover{background:#39a7d4}.school-brand{position:fixed;top:12px;left:50%;z-index:11;display:flex;align-items:center;gap:8px;transform:translate(-50%);padding:6px 12px 6px 8px;max-width:min(440px,calc(100vw - 260px));border:2px solid rgba(91,192,222,.45);border-radius:14px;background:#f8fbfddb;box-shadow:0 10px 30px #2c435633;-webkit-backdrop-filter:blur(12px) saturate(1.12);backdrop-filter:blur(12px) saturate(1.12);pointer-events:none}.school-brand img{width:34px;height:auto;flex:0 0 auto}.school-brand h1{overflow:hidden;color:#30246d;font-size:17px;font-weight:900;line-height:1.1;letter-spacing:0;text-overflow:ellipsis;white-space:nowrap}.enter-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:24px;cursor:pointer;background:radial-gradient(circle at 50% 38%,rgba(91,192,222,.18),transparent 60%),linear-gradient(160deg,#eaf2f9,#d6e6f1 55%,#cfe7e4);animation:enter-fade .4s ease}@keyframes enter-fade{0%{opacity:0}to{opacity:1}}.enter-card{display:flex;flex-direction:column;align-items:center;gap:10px;padding:36px 40px 30px;max-width:min(440px,calc(100vw - 32px));text-align:center;background:#ffffffe0;border:2px solid rgba(91,192,222,.7);border-radius:22px;box-shadow:0 18px 60px #2c435647;-webkit-backdrop-filter:blur(10px) saturate(1.1);backdrop-filter:blur(10px) saturate(1.1)}.enter-logo{width:84px;height:auto;margin-bottom:4px;filter:drop-shadow(0 6px 14px rgba(44,67,86,.25))}.enter-card h1{color:#30246d;font-size:22px;font-weight:900;line-height:1.25}.enter-sub{color:#2f7d97;font-size:14px;font-weight:700;letter-spacing:1px}.enter-btn{margin-top:14px;padding:13px 30px;border-radius:26px;background:#5bc0de;border:2px solid #2f7d97;color:#06303d;font-size:17px;font-weight:900;box-shadow:0 5px #2f7d97,0 16px 34px #2c435638;animation:enter-pulse 1.6s ease-in-out infinite}@keyframes enter-pulse{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}.enter-tip{margin-top:10px;color:#6b7c8c;font-size:12px}.crosshair{position:fixed;top:50%;left:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#ffffffb3;z-index:5;pointer-events:none}.joystick-base{position:fixed;bottom:24px;width:130px;height:130px;border-radius:50%;background:#f4f8fb80;border:3px solid rgba(91,192,222,.78);box-shadow:0 14px 40px #2c43563d;z-index:15;touch-action:none;display:flex;align-items:center;justify-content:center}.joystick-base.joystick-left{left:24px}.joystick-base.joystick-right{right:24px}.joystick-hint{position:absolute;top:-22px;font-size:12px;font-weight:800;color:#2f7d97;letter-spacing:1px;pointer-events:none}.joystick-knob{width:60px;height:60px;border-radius:50%;background:#5bc0deeb;border:3px solid #ffffff;box-shadow:inset 0 -6px #2f7d9738;pointer-events:none}.zoom-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:30;display:flex;align-items:center;justify-content:center;background:#1f253abd;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);padding:24px}.zoom-content{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;max-width:92vw;max-height:88vh}.zoom-img{max-width:88vw;max-height:74vh;border-radius:8px;box-shadow:0 18px #0000002e,0 28px 70px #0000007a;border:8px solid #ffffff}.zoom-placeholder{width:min(70vw,480px);height:min(50vh,360px);border-radius:8px;display:flex;align-items:center;justify-content:center;color:#ffffffe6;font-size:18px;border:8px solid #ffffff;box-shadow:0 18px #0000002e,0 28px 70px #0000007a}.zoom-caption{color:#fff;font-size:15px;letter-spacing:0;font-weight:700}.zoom-close{padding:10px 22px;font-size:14px;color:#06303d;background:#5bc0de;border:2px solid #2f7d97;border-radius:24px;cursor:pointer;font-weight:800}.zoom-close:hover{background:#39a7d4}@media (max-width: 640px){.ui-panel{top:10px;left:10px;width:min(220px,calc(100vw - 20px));padding:12px}.ui-panel.is-collapsed{width:auto;padding:0}.music-control{top:10px;right:10px}.school-brand{top:56px;max-width:calc(100vw - 20px);padding:5px 8px 5px 6px;gap:6px}.school-brand img{width:28px}.school-brand h1{font-size:13px}.music-button{min-width:74px;padding:8px 10px;font-size:12px}}