:root{--cb-neon-blue: #00f0ff;--cb-neon-pink: #ff2d78;--cb-neon-purple: #b829dd;--cb-neon-green: #39ff14;--cb-neon-orange: #ff6e27;--cb-bg-deep: #0a0a0f;--cb-bg-dark: #12121a;--cb-bg-card: #1a1a2e;--cb-bg-input: #2a2a3e;--cb-bg-hover: #2e2e45;--cb-text-primary: #e0e0ff;--cb-text-secondary: #8888aa;--cb-text-muted: #555577;--cb-space-xs: 4px;--cb-space-sm: 8px;--cb-space-md: 12px;--cb-space-lg: 16px;--cb-space-xl: 24px;--cb-radius-sm: 4px;--cb-radius-md: 8px;--cb-radius-lg: 12px;--cb-sidebar-width: 380px;--cb-font-pixel: "Press Start 2P", monospace;--cb-font-ui: "Inter", system-ui, -apple-system, sans-serif;--cb-glow-blue: 0 0 20px rgba(0, 240, 255, .3);--cb-glow-pink: 0 0 20px rgba(255, 45, 120, .3);--cb-glow-purple: 0 0 20px rgba(184, 41, 221, .3)}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;background:var(--cb-bg-deep);color:var(--cb-text-primary);font-family:var(--cb-font-ui);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}.hidden{display:none!important}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--cb-bg-input);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--cb-text-muted)}#login-screen{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 30% 20%,rgba(0,240,255,.08) 0%,transparent 50%),radial-gradient(ellipse at 70% 80%,rgba(184,41,221,.08) 0%,transparent 50%),var(--cb-bg-deep);z-index:1000;animation:loginFadeIn .6s ease-out}@keyframes loginFadeIn{0%{opacity:0}to{opacity:1}}.login-container{text-align:center;padding:var(--cb-space-xl) 40px;background:linear-gradient(135deg,#1a1a2ee6,#12121af2);border:1px solid rgba(0,240,255,.15);border-radius:var(--cb-radius-lg);box-shadow:var(--cb-glow-blue),inset 0 1px #ffffff0d;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);width:420px;max-width:90vw;animation:loginSlideUp .6s ease-out}@keyframes loginSlideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.login-title{font-family:var(--cb-font-pixel);font-size:20px;color:var(--cb-neon-blue);text-shadow:0 0 30px rgba(0,240,255,.5);margin-bottom:var(--cb-space-xs);letter-spacing:2px}.login-subtitle{font-family:var(--cb-font-pixel);font-size:8px;color:var(--cb-neon-pink);text-shadow:0 0 20px rgba(255,45,120,.4);letter-spacing:6px;margin-bottom:var(--cb-space-xl)}.auth-tabs{display:flex;margin-bottom:var(--cb-space-lg);border-bottom:1px solid rgba(0,240,255,.2)}.auth-tab{flex:1;background:transparent;border:none;padding:var(--cb-space-sm) 0;color:var(--cb-text-muted);font-family:var(--cb-font-pixel);font-size:10px;cursor:pointer;transition:all .3s}.auth-tab.active{color:var(--cb-neon-blue);box-shadow:inset 0 -2px 0 var(--cb-neon-blue);text-shadow:0 0 10px rgba(0,240,255,.5)}.login-form{display:flex;flex-direction:column;gap:var(--cb-space-md)}.login-label{text-align:left;font-size:12px;font-weight:600;color:var(--cb-text-secondary);text-transform:uppercase;letter-spacing:1px}.login-input{width:100%;padding:var(--cb-space-md) var(--cb-space-lg);background:var(--cb-bg-input);border:1px solid rgba(0,240,255,.1);border-radius:var(--cb-radius-md);color:var(--cb-text-primary);font-family:var(--cb-font-ui);font-size:16px;outline:none;transition:border-color .2s,box-shadow .2s}.login-input:focus{border-color:var(--cb-neon-blue);box-shadow:0 0 12px #00f0ff33}.login-input::placeholder{color:var(--cb-text-muted)}.pet-select{display:flex;gap:var(--cb-space-sm);justify-content:center;margin:var(--cb-space-sm) 0}.pet-option{width:52px;height:52px;display:flex;align-items:center;justify-content:center;font-size:24px;background:var(--cb-bg-input);border:2px solid transparent;border-radius:var(--cb-radius-md);cursor:pointer;transition:all .2s}.pet-option:hover{background:var(--cb-bg-hover);border-color:#00f0ff4d;transform:translateY(-2px)}.pet-option.selected{border-color:var(--cb-neon-blue);background:#00f0ff1a;box-shadow:0 0 12px #00f0ff33}.login-button{width:100%;padding:var(--cb-space-md) var(--cb-space-lg);margin-top:var(--cb-space-sm);background:linear-gradient(135deg,var(--cb-neon-blue),var(--cb-neon-purple));border:none;border-radius:var(--cb-radius-md);color:#fff;font-family:var(--cb-font-pixel);font-size:11px;letter-spacing:3px;cursor:pointer;transition:all .3s;position:relative;overflow:hidden}.login-button:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,transparent 40%,rgba(255,255,255,.15) 50%,transparent 60%);transform:translate(-100%);transition:transform .6s}.login-button:hover:before{transform:translate(100%)}.login-button:hover{transform:translateY(-2px);box-shadow:0 4px 20px #00f0ff4d}.login-button:active{transform:translateY(0)}.login-error{color:var(--cb-neon-pink);font-size:12px;min-height:18px}.login-footer{margin-top:var(--cb-space-lg);font-size:11px;color:var(--cb-text-muted)}#app{display:flex;flex-direction:column;height:100vh}#app-header{display:flex;align-items:center;justify-content:space-between;padding:var(--cb-space-sm) var(--cb-space-lg);background:var(--cb-bg-dark);border-bottom:1px solid rgba(0,240,255,.1);height:44px;flex-shrink:0}.header-title{font-family:var(--cb-font-pixel);font-size:11px;color:var(--cb-neon-blue);text-shadow:0 0 15px rgba(0,240,255,.4)}.header-info{font-size:12px;color:var(--cb-text-secondary)}#app-main{display:flex;flex:1;overflow:hidden}#canvas-container{flex:1;position:relative;background:var(--cb-bg-deep);overflow:hidden}#bathhouse-canvas{display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges;cursor:crosshair}#sidebar{width:var(--cb-sidebar-width);min-width:320px;display:flex;flex-direction:column;background:var(--cb-bg-dark);border-left:1px solid rgba(0,240,255,.08)}.sidebar-tabs{display:flex;gap:2px;padding:var(--cb-space-xs);background:var(--cb-bg-deep);border-bottom:1px solid rgba(0,240,255,.08)}.tab-btn{flex:1;padding:var(--cb-space-sm) 0;background:transparent;border:none;font-size:18px;cursor:pointer;border-radius:var(--cb-radius-sm);transition:background .15s;opacity:.5}.tab-btn:hover{background:var(--cb-bg-card);opacity:.8}.tab-btn.active{background:var(--cb-bg-card);opacity:1;box-shadow:inset 0 -2px 0 var(--cb-neon-blue)}.sidebar-content{flex:1;overflow-y:auto;display:flex;flex-direction:column}.panel{display:flex;flex-direction:column;height:100%}.panel-header{padding:var(--cb-space-md) var(--cb-space-lg);font-family:var(--cb-font-pixel);font-size:9px;color:var(--cb-neon-blue);border-bottom:1px solid rgba(0,240,255,.06);letter-spacing:1px}.chat-messages{flex:1;overflow-y:auto;padding:var(--cb-space-md);display:flex;flex-direction:column;gap:var(--cb-space-sm)}.chat-message{padding:var(--cb-space-sm) var(--cb-space-md);background:var(--cb-bg-card);border-radius:var(--cb-radius-md);animation:msgAppear .15s ease-out}@keyframes msgAppear{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.chat-message__name{font-size:11px;font-weight:600;color:var(--cb-neon-blue);margin-bottom:2px}.chat-message__name--agent{color:var(--cb-neon-purple)}.chat-message__text{font-size:13px;color:var(--cb-text-primary);word-break:break-word}.chat-message__time{font-size:10px;color:var(--cb-text-muted);margin-top:2px}.chat-system{text-align:center;font-size:11px;color:var(--cb-text-muted);padding:var(--cb-space-xs);font-style:italic}.chat-input-bar{display:flex;gap:var(--cb-space-sm);padding:var(--cb-space-md);border-top:1px solid rgba(0,240,255,.06)}.chat-input{flex:1;padding:var(--cb-space-sm) var(--cb-space-md);background:var(--cb-bg-input);border:1px solid rgba(0,240,255,.08);border-radius:var(--cb-radius-md);color:var(--cb-text-primary);font-family:var(--cb-font-ui);font-size:13px;outline:none;transition:border-color .2s}.chat-input:focus{border-color:var(--cb-neon-blue)}.chat-send-btn{padding:var(--cb-space-sm) var(--cb-space-lg);background:linear-gradient(135deg,var(--cb-neon-blue),var(--cb-neon-purple));border:none;border-radius:var(--cb-radius-md);color:#fff;font-size:13px;font-weight:600;cursor:pointer;transition:transform .15s,box-shadow .15s}.chat-send-btn:hover{transform:translateY(-1px);box-shadow:0 2px 12px #00f0ff4d}.chat-send-btn:active{transform:translateY(0)}.user-list{padding:var(--cb-space-md);display:flex;flex-direction:column;gap:var(--cb-space-sm)}.user-item{display:flex;align-items:center;gap:var(--cb-space-md);padding:var(--cb-space-sm) var(--cb-space-md);background:var(--cb-bg-card);border-radius:var(--cb-radius-md);cursor:pointer;transition:background .15s}.user-item:hover{background:var(--cb-bg-hover)}.user-item__icon{font-size:20px}.user-item__info{flex:1}.user-item__name{font-size:13px;font-weight:600;color:var(--cb-text-primary)}.user-item__state{font-size:11px;color:var(--cb-text-secondary)}.user-item__hp{font-family:var(--cb-font-pixel);font-size:8px;color:var(--cb-neon-green)}.placeholder-panel{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:var(--cb-space-lg);color:var(--cb-text-muted)}.placeholder-panel__icon{font-size:48px;opacity:.5}.placeholder-panel__text{font-family:var(--cb-font-pixel);font-size:9px;letter-spacing:1px}.placeholder-panel__hint{font-size:12px;text-align:center;max-width:260px;line-height:1.6}.settings-form{display:flex;flex-direction:column;gap:var(--cb-space-sm);padding:var(--cb-space-md)}.settings-actions{display:flex;gap:var(--cb-space-sm)}.admin-grid{display:flex;flex-direction:column;gap:var(--cb-space-md);padding:var(--cb-space-md)}.admin-grid h4{color:var(--cb-neon-blue);font-size:12px}.admin-row{display:flex;justify-content:space-between;align-items:center;gap:var(--cb-space-md);padding:var(--cb-space-sm);background:var(--cb-bg-card);border-radius:var(--cb-radius-sm);margin-bottom:6px}.admin-role-select{background:var(--cb-bg-input);color:var(--cb-text-primary);border:1px solid rgba(0,240,255,.2);border-radius:var(--cb-radius-sm);padding:4px 6px}#app-footer{display:flex;align-items:center;justify-content:space-between;padding:var(--cb-space-xs) var(--cb-space-lg);background:var(--cb-bg-dark);border-top:1px solid rgba(0,240,255,.08);font-size:11px;color:var(--cb-text-muted);height:32px;flex-shrink:0}@media(max-width:900px){#sidebar{width:320px;min-width:280px}}@media(max-width:700px){#app-main{flex-direction:column}#canvas-container{height:45vh}#sidebar{width:100%;min-width:unset;border-left:none;border-top:1px solid rgba(0,240,255,.08)}}