:root{--primary: #FF1493;--primary-glow: rgba(255, 20, 147, .5);--secondary: #00F5FF;--secondary-glow: rgba(0, 245, 255, .5);--accent: #FFD700;--accent-glow: rgba(255, 215, 0, .5);--bg-primary: #0a0a0f;--bg-secondary: #14141f;--bg-elevated: #1c1c2e;--bg-overlay: rgba(20, 20, 31, .95);--bg-glass: rgba(28, 28, 46, .7);--text-primary: #ffffff;--text-secondary: #b8b8d1;--text-tertiary: #7a7a9a;--border-color: rgba(255, 255, 255, .1);--border-glow: rgba(0, 245, 255, .3);--gradient-primary: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);--gradient-glow: linear-gradient(135deg, var(--primary-glow) 0%, var(--secondary-glow) 100%);--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-2xl: 3rem;--radius-sm: .5rem;--radius-md: 1rem;--radius-lg: 1.5rem;--radius-full: 50%;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .3);--shadow-md: 0 4px 16px rgba(0, 0, 0, .4);--shadow-lg: 0 8px 32px rgba(0, 0, 0, .5);--shadow-glow-primary: 0 0 20px var(--primary-glow);--shadow-glow-secondary: 0 0 20px var(--secondary-glow);--shadow-glow-accent: 0 0 20px var(--accent-glow);--font-base: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 2rem;--font-size-4xl: 3rem;--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-base: .3s cubic-bezier(.4, 0, .2, 1);--transition-slow: .5s cubic-bezier(.4, 0, .2, 1)}*{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-base);background:var(--bg-primary);color:var(--text-primary);line-height:1.6;overflow-x:hidden}#root{min-height:100vh;display:flex;flex-direction:column}h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.2}h1{font-size:var(--font-size-3xl)}h2{font-size:var(--font-size-2xl)}h3{font-size:var(--font-size-xl)}button{font-family:var(--font-base);border:none;background:none;cursor:pointer;transition:all var(--transition-base)}button:disabled{opacity:.5;cursor:not-allowed}.glass{background:var(--bg-glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border-color)}.glow-primary{box-shadow:var(--shadow-glow-primary)}.glow-secondary{box-shadow:var(--shadow-glow-secondary)}.glow-accent{box-shadow:var(--shadow-glow-accent)}.gradient-text{background:var(--gradient-primary);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--bg-elevated);border-radius:var(--radius-sm)}::-webkit-scrollbar-thumb:hover{background:var(--primary)}@keyframes pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:.8}}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideIn{0%{transform:translate(-20px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes glow{0%,to{box-shadow:0 0 20px var(--primary-glow)}50%{box-shadow:0 0 40px var(--primary-glow)}}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.animate-pulse{animation:pulse 2s infinite}.animate-slide-up{animation:slideUp var(--transition-base) ease-out}.animate-slide-in{animation:slideIn var(--transition-base) ease-out}.animate-glow{animation:glow 2s infinite}.app-container{max-width:100%;min-height:100vh;margin:0 auto;display:flex;flex-direction:column;position:relative}@media(min-width:768px){.app-container{max-width:480px;border-left:1px solid var(--border-color);border-right:1px solid var(--border-color)}}.main-content{flex:1;padding:var(--spacing-md);padding-bottom:80px;overflow-y:auto}.bottom-nav{position:fixed;bottom:0;left:0;right:0;height:70px;background:var(--bg-glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--border-color);display:flex;justify-content:space-around;align-items:center;z-index:100;padding:0 var(--spacing-md)}@media(min-width:768px){.bottom-nav{max-width:480px;left:50%;right:auto;transform:translate(-50%);border-left:1px solid var(--border-color);border-right:1px solid var(--border-color)}}.nav-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm);color:var(--text-secondary);transition:all var(--transition-base);position:relative}.nav-item.active,.nav-item:hover{color:var(--primary)}.nav-item:before{content:"";position:absolute;top:-2px;left:50%;transform:translate(-50%);width:0;height:3px;background:var(--gradient-primary);transition:width var(--transition-base);border-radius:var(--radius-sm)}.nav-item.active:before{width:60%}.nav-icon{font-size:var(--font-size-2xl);line-height:1}.nav-label{font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;letter-spacing:.05em}.badge{position:absolute;top:0;right:0;background:var(--primary);color:#fff;font-size:var(--font-size-xs);font-weight:700;padding:2px 6px;border-radius:var(--radius-full);min-width:18px;text-align:center;box-shadow:var(--shadow-glow-primary)}.drink-counter{padding:var(--spacing-lg) 0;animation:slideUp var(--transition-base) ease-out}.counter-header{text-align:center;margin-bottom:var(--spacing-xl)}.counter-header h1{font-size:var(--font-size-4xl);margin-bottom:var(--spacing-sm);font-weight:800}.subtitle{color:var(--text-secondary);font-size:var(--font-size-lg)}.level-display{padding:var(--spacing-lg);border-radius:var(--radius-lg);margin-bottom:var(--spacing-xl)}.level-info{display:flex;align-items:center;gap:var(--spacing-md);margin-bottom:var(--spacing-md)}.level-emoji{font-size:var(--font-size-4xl);line-height:1}.level-info h3{color:var(--text-primary);margin-bottom:var(--spacing-xs)}.level-detail{color:var(--text-secondary);font-size:var(--font-size-sm)}.progress-container{width:100%;height:8px;background:var(--bg-secondary);border-radius:var(--radius-full);overflow:hidden}.progress-bar{height:100%;background:var(--gradient-primary);transition:width var(--transition-base);border-radius:var(--radius-full);box-shadow:var(--shadow-glow-primary)}.counter-display{display:flex;justify-content:center;margin-bottom:var(--spacing-xl);transition:transform var(--transition-base)}.counter-display.pulse{animation:pulse .6s ease-out}.count-circle{width:250px;height:250px;border-radius:var(--radius-full);display:flex;flex-direction:column;align-items:center;justify-content:center;border:3px solid var(--border-color);transition:all var(--transition-base)}.count-circle:hover{border-color:var(--primary);transform:scale(1.05)}.count-number{font-size:6rem;font-weight:800;line-height:1;background:var(--gradient-primary);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.count-label{font-size:var(--font-size-lg);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.1em;margin-top:var(--spacing-sm)}.counter-controls{display:flex;gap:var(--spacing-md);justify-content:center;align-items:center;margin-bottom:var(--spacing-xl)}.control-btn{border-radius:var(--radius-md);padding:var(--spacing-md) var(--spacing-lg);font-weight:600;transition:all var(--transition-base);display:flex;align-items:center;gap:var(--spacing-sm);min-height:60px}.control-btn:hover{transform:translateY(-2px)}.control-btn:active{transform:translateY(0)}.btn-icon{font-size:var(--font-size-2xl);line-height:1}.btn-label{font-size:var(--font-size-base)}.primary-btn{background:var(--gradient-primary);color:#fff;flex:1;max-width:200px;justify-content:center}.primary-btn:hover{box-shadow:var(--shadow-glow-primary),var(--shadow-md)}.decrement-btn,.reset-btn{width:60px;justify-content:center;color:var(--text-secondary)}.decrement-btn:hover,.reset-btn:hover{color:var(--primary);border-color:var(--primary)}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-md)}.stat-card{padding:var(--spacing-lg);border-radius:var(--radius-md);text-align:center}.stat-value{font-size:var(--font-size-3xl);font-weight:700;color:var(--primary);margin-bottom:var(--spacing-xs)}.stat-label{font-size:var(--font-size-sm);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em}.level-up-overlay{position:fixed;inset:0;background:#000000e6;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn var(--transition-base)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.level-up-content{text-align:center;padding:var(--spacing-2xl)}.level-up-content .level-emoji{font-size:8rem;margin-bottom:var(--spacing-lg);animation:pulse 2s infinite}.level-up-content h2{font-size:var(--font-size-3xl);margin-bottom:var(--spacing-md);color:#fff}.level-up-content p{font-size:var(--font-size-2xl);font-weight:700}.chat-room{display:flex;flex-direction:column;height:calc(100vh - 150px);animation:slideUp var(--transition-base) ease-out}.chat-header{padding:var(--spacing-lg);border-radius:var(--radius-lg);margin-bottom:var(--spacing-md)}.chat-header-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-md)}.chat-header h2{margin:0}.connection-info{display:flex;flex-direction:column;align-items:flex-end;gap:var(--spacing-xs)}.connection-status{font-size:var(--font-size-xs);color:var(--text-secondary);font-weight:600}.online-badge{background:var(--gradient-primary);color:#fff;font-size:var(--font-size-xs);font-weight:700;padding:4px 10px;border-radius:var(--radius-full);box-shadow:var(--shadow-glow-primary)}.nickname-section{margin-top:var(--spacing-md);padding-top:var(--spacing-md);border-top:1px solid var(--border-color)}.nickname-display{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);background:var(--bg-elevated);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-base)}.nickname-display:hover{background:var(--bg-secondary);border-color:var(--primary)}.nickname-label{font-size:var(--font-size-sm);color:var(--text-secondary)}.nickname-value{font-size:var(--font-size-base);color:var(--primary);font-weight:600}.nickname-edit-icon{margin-left:auto;opacity:.5;transition:opacity var(--transition-base)}.nickname-display:hover .nickname-edit-icon{opacity:1}.nickname-form{display:flex;gap:var(--spacing-sm)}.nickname-input{flex:1;background:var(--bg-elevated);border:2px solid var(--border-color);color:var(--text-primary);font-size:var(--font-size-base);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);outline:none;font-family:var(--font-base);transition:border-color var(--transition-base)}.nickname-input:focus{border-color:var(--primary)}.nickname-save-btn,.nickname-cancel-btn{width:40px;height:40px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:var(--font-size-lg);transition:all var(--transition-base)}.nickname-save-btn{background:var(--gradient-primary);color:#fff}.nickname-save-btn:hover{transform:scale(1.05);box-shadow:var(--shadow-glow-primary)}.nickname-cancel-btn{background:var(--bg-elevated);color:var(--text-secondary)}.nickname-cancel-btn:hover{background:var(--bg-secondary);color:var(--text-primary)}.messages-container{flex:1;border-radius:var(--radius-lg);overflow:hidden;margin-bottom:var(--spacing-md);display:flex;flex-direction:column}.messages-list{flex:1;overflow-y:auto;padding:var(--spacing-lg);display:flex;flex-direction:column;gap:var(--spacing-md)}.empty-state{display:flex;align-items:center;justify-content:center;height:100%;color:var(--text-tertiary);font-size:var(--font-size-base);text-align:center}.message{display:flex;flex-direction:column;max-width:80%;animation:slideIn var(--transition-base) ease-out}.message-user{align-self:flex-end}.message-bot{align-self:flex-start}.message-system{align-self:center;max-width:90%}.message-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-xs);padding:0 var(--spacing-sm)}.message-user-name{font-size:var(--font-size-sm);font-weight:600;color:var(--text-secondary)}.message-time{font-size:var(--font-size-xs);color:var(--text-tertiary)}.message-bubble{padding:var(--spacing-md) var(--spacing-lg);border-radius:var(--radius-md);word-wrap:break-word;position:relative}.message-user .message-bubble{background:var(--gradient-primary);color:#fff;border-bottom-right-radius:var(--spacing-xs);box-shadow:var(--shadow-glow-primary)}.message-bot .message-bubble{background:var(--bg-elevated);color:var(--text-primary);border-bottom-left-radius:var(--spacing-xs);border:1px solid var(--border-color)}.message-system .message-bubble{background:transparent;color:var(--text-tertiary);border:1px dashed var(--border-color);text-align:center;font-size:var(--font-size-sm);padding:var(--spacing-sm) var(--spacing-md)}.chat-input-form{position:relative}.input-container{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm);border-radius:var(--radius-lg)}.chat-input{flex:1;background:transparent;border:none;color:var(--text-primary);font-size:var(--font-size-base);padding:var(--spacing-md);outline:none;font-family:var(--font-base)}.chat-input::placeholder{color:var(--text-tertiary)}.chat-input:disabled{opacity:.5;cursor:not-allowed}.send-btn{width:48px;height:48px;border-radius:var(--radius-full);background:var(--gradient-primary);color:#fff;display:flex;align-items:center;justify-content:center;transition:all var(--transition-base);flex-shrink:0}.send-btn:hover:not(:disabled){transform:scale(1.1);box-shadow:var(--shadow-glow-primary)}.send-btn:active:not(:disabled){transform:scale(.95)}.send-btn:disabled{opacity:.3;cursor:not-allowed}.send-icon{font-size:var(--font-size-xl);line-height:1}.messages-list::-webkit-scrollbar{width:6px}.messages-list::-webkit-scrollbar-track{background:transparent}.messages-list::-webkit-scrollbar-thumb{background:var(--bg-elevated);border-radius:var(--radius-sm)}.messages-list::-webkit-scrollbar-thumb:hover{background:var(--primary)}.message-user-info{display:flex;flex-direction:column;gap:2px}.message-level-badge{font-size:var(--font-size-xs);color:var(--text-tertiary);font-weight:500;background:var(--bg-elevated);padding:2px 8px;border-radius:var(--radius-sm);border:1px solid var(--border-color);white-space:nowrap}