:root{--bg-primary: #0a0a0f;--bg-secondary: #12121a;--bg-card: #1a1a25;--bg-chat: #0d0d14;--accent-primary: #ff4d6d;--accent-secondary: #ff758f;--accent-gradient: linear-gradient(135deg, #ff4d6d 0%, #c9184a 100%);--text-primary: #ffffff;--text-secondary: #a0a0b0;--text-muted: #606070;--success: #10b981;--warning: #f59e0b;--error: #ef4444;--glass-bg: rgba(255, 255, 255, .05);--glass-border: rgba(255, 255, 255, .1);--font-main: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 20px;--radius-full: 9999px;--shadow-glow: 0 0 30px rgba(255, 77, 109, .3);--shadow-card: 0 4px 20px rgba(0, 0, 0, .3)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-main);background:var(--bg-primary);color:var(--text-primary);min-height:100vh;overflow-x:hidden}#root{min-height:100vh}.app{min-height:100vh;display:flex;flex-direction:column}.header{padding:1rem 1.5rem;background:var(--bg-secondary);border-bottom:1px solid var(--glass-border);display:flex;align-items:center;justify-content:space-between}.logo{font-size:1.5rem;font-weight:700;background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.user-info{display:flex;align-items:center;gap:1rem}.level-badge{background:var(--accent-gradient);padding:.4rem 1rem;border-radius:var(--radius-full);font-weight:600;font-size:.85rem}.main-content{flex:1;padding:1.5rem;max-width:1200px;margin:0 auto;width:100%}.character-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem;padding:1rem 0}.character-card{background:var(--bg-card);border:1px solid var(--glass-border);border-radius:var(--radius-lg);padding:1.5rem;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden}.character-card:hover:not(.locked){transform:translateY(-5px);box-shadow:var(--shadow-glow);border-color:var(--accent-primary)}.character-card.locked{opacity:.5;cursor:not-allowed}.character-card.locked:before{content:"🔒";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:3rem;z-index:10}.character-avatar{width:100%;aspect-ratio:1;background:var(--glass-bg);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:4rem;margin-bottom:1rem;overflow:hidden}.character-avatar-img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius-md)}.chat-avatar{width:48px;height:48px;border-radius:var(--radius-full);overflow:hidden;border:2px solid var(--accent-primary);flex-shrink:0}.chat-avatar img{width:100%;height:100%;object-fit:cover}.chat-avatar span{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:1.5rem;background:var(--glass-bg)}.score-delta{font-size:.9rem;margin-left:.5rem;animation:scorePop .5s ease}.score-delta.positive{color:var(--success)}.score-delta.negative{color:var(--error)}@keyframes scorePop{0%{transform:scale(1);opacity:0}50%{transform:scale(1.3);opacity:1}to{transform:scale(1);opacity:1}}.character-name{font-size:1.4rem;font-weight:700;margin-bottom:.3rem}.character-origin{color:var(--text-secondary);margin-bottom:.5rem}.character-difficulty{margin-bottom:.8rem}.character-personality{font-size:.9rem;color:var(--text-muted);line-height:1.4}.chat-view{display:flex;flex-direction:column;height:calc(100vh - 80px);background:var(--bg-chat)}.chat-header{padding:1rem 1.5rem;background:var(--bg-secondary);border-bottom:1px solid var(--glass-border);display:flex;align-items:center;gap:1rem}.back-button{background:none;border:none;color:var(--text-primary);font-size:1.5rem;cursor:pointer;padding:.5rem;border-radius:var(--radius-sm);transition:background .2s}.back-button:hover{background:var(--glass-bg)}.chat-character-info{flex:1}.chat-character-name{font-weight:700;font-size:1.1rem}.chat-character-status{font-size:.85rem;color:var(--text-secondary)}.score-display{text-align:right}.score-value{font-size:1.5rem;font-weight:700;color:var(--accent-primary)}.score-target{font-size:.8rem;color:var(--text-muted)}.messages-area{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.8rem}.message{max-width:80%;padding:.8rem 1rem;border-radius:var(--radius-md);line-height:1.5;animation:fadeIn .3s ease;word-wrap:break-word;overflow-wrap:break-word;white-space:pre-wrap}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.message.user{align-self:flex-end;background:var(--accent-gradient);color:#fff;border-bottom-right-radius:4px}.message.assistant{align-self:flex-start;background:var(--bg-card);border:1px solid var(--glass-border);border-bottom-left-radius:4px}.message-score{font-size:.75rem;margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--glass-border);color:var(--text-muted)}.message-score.positive{color:var(--success)}.message-score.negative{color:var(--error)}.chat-input-area{padding:1rem;background:var(--bg-secondary);border-top:1px solid var(--glass-border);display:flex;gap:.8rem}.chat-input{flex:1;background:var(--bg-card);border:1px solid var(--glass-border);border-radius:var(--radius-full);padding:.8rem 1.2rem;color:var(--text-primary);font-size:1rem;outline:none;transition:border-color .2s}.chat-input:focus{border-color:var(--accent-primary)}.chat-input::placeholder{color:var(--text-muted)}.send-button{background:var(--accent-gradient);border:none;border-radius:var(--radius-full);padding:.8rem 1.5rem;color:#fff;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s}.send-button:hover:not(:disabled){transform:scale(1.05);box-shadow:var(--shadow-glow)}.send-button:disabled{opacity:.5;cursor:not-allowed}.progress-container{padding:.5rem 1rem;background:var(--bg-secondary)}.progress-bar{height:6px;background:var(--bg-card);border-radius:var(--radius-full);overflow:hidden}.progress-fill{height:100%;background:var(--accent-gradient);transition:width .5s ease}.progress-text{display:flex;justify-content:space-between;font-size:.75rem;color:var(--text-muted);margin-top:.3rem}.modal-overlay{position:fixed;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:100;animation:fadeIn .3s ease}.modal{background:var(--bg-card);border:1px solid var(--glass-border);border-radius:var(--radius-lg);padding:2rem;text-align:center;max-width:400px;width:90%}.modal-icon{font-size:4rem;margin-bottom:1rem}.modal-title{font-size:1.8rem;font-weight:700;margin-bottom:.5rem}.modal-message{color:var(--text-secondary);margin-bottom:1.5rem}.modal-button{background:var(--accent-gradient);border:none;border-radius:var(--radius-full);padding:1rem 2rem;color:#fff;font-weight:600;font-size:1rem;cursor:pointer;transition:transform .2s}.modal-button:hover{transform:scale(1.05)}.loading{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:1rem;color:var(--text-muted)}.spinner{width:20px;height:20px;border:2px solid var(--glass-border);border-top-color:var(--accent-primary);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.credits-display{display:flex;align-items:center;gap:.3rem;background:var(--bg-card);padding:.4rem .8rem;border-radius:var(--radius-full);cursor:pointer;transition:background .2s}.credits-display:hover{background:var(--glass-bg)}.credits-icon{font-size:1.1rem}.credits-amount{font-weight:700;color:gold}.section-title{font-size:1.3rem;font-weight:700;margin-bottom:.3rem;color:var(--text-primary)}.section-subtitle{font-size:.9rem;color:var(--text-muted);margin-bottom:1rem}.character-card.card-premium{border-color:#ff6b35;background:linear-gradient(135deg,var(--bg-card) 0%,rgba(255,107,53,.1) 100%)}.character-card.card-exclusive{border-color:#ff4d6d;background:linear-gradient(135deg,var(--bg-card) 0%,rgba(255,77,109,.15) 100%)}.character-card.card-exclusive:after{content:"";position:absolute;inset:0;background:linear-gradient(45deg,transparent 40%,rgba(255,77,109,.1) 50%,transparent 60%);animation:shimmer 3s infinite}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.character-card.card-ultra{border-color:#9333ea;background:linear-gradient(135deg,var(--bg-card) 0%,rgba(147,51,234,.2) 100%);box-shadow:0 0 20px #9333ea4d}.character-card.card-ultra:after{content:"";position:absolute;inset:0;background:linear-gradient(45deg,transparent 30%,rgba(147,51,234,.15) 50%,transparent 70%);animation:shimmer 2s infinite}.section-ultra{color:#9333ea}.price-tag{position:absolute;top:1rem;right:1rem;background:var(--accent-gradient);padding:.3rem .8rem;border-radius:var(--radius-full);font-weight:700;font-size:.85rem;z-index:5}.price-tag.cant-afford{background:var(--bg-secondary);opacity:.7}.type-badge{position:absolute;top:1rem;left:1rem;background:#000000b3;padding:.2rem .6rem;border-radius:var(--radius-sm);font-size:.75rem;z-index:5}.purchase-overlay{position:absolute;bottom:0;left:0;right:0;padding:1rem;background:linear-gradient(transparent,#000000e6);display:flex;justify-content:center}.purchase-button{background:var(--accent-gradient);border:none;border-radius:var(--radius-full);padding:.7rem 1.5rem;color:#fff;font-weight:600;cursor:pointer;transition:transform .2s}.purchase-button:hover{transform:scale(1.05)}.shop-banner{margin-top:2rem;background:linear-gradient(135deg,#ff4d6d,#ff6b35);border-radius:var(--radius-lg);padding:1.5rem;cursor:pointer;transition:transform .2s}.shop-banner:hover{transform:scale(1.02)}.banner-content{display:flex;align-items:center;gap:1rem}.banner-emoji{font-size:2.5rem}.banner-title{font-weight:700;font-size:1.2rem}.banner-subtitle{font-size:.9rem;opacity:.9}.banner-arrow{margin-left:auto;font-size:1.5rem}.credits-shop{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem;margin-top:1rem}.credit-pack{background:var(--bg-card);border:1px solid var(--glass-border);border-radius:var(--radius-md);padding:1.5rem;text-align:center;cursor:pointer;transition:all .2s;position:relative}.credit-pack:hover{transform:translateY(-3px);border-color:var(--accent-primary)}.credit-pack.popular{border-color:var(--accent-primary);box-shadow:var(--shadow-glow)}.pack-badge{position:absolute;top:-10px;left:50%;transform:translate(-50%);background:var(--accent-gradient);padding:.2rem .8rem;border-radius:var(--radius-full);font-size:.7rem;font-weight:600}.pack-amount{font-size:1.5rem;font-weight:700;margin-bottom:.5rem}.pack-price{color:var(--text-secondary);font-size:1.1rem}.rescue-button{background:linear-gradient(135deg,gold,#ff6b35);border:none;border-radius:var(--radius-full);padding:.8rem 1.5rem;color:#000;font-weight:600;cursor:pointer;margin-top:.5rem;display:flex;align-items:center;gap:.5rem;justify-content:center}.rescue-button:hover{transform:scale(1.05)}@media(max-width:600px){.character-grid{grid-template-columns:1fr}.message{max-width:90%}}.auth-view{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg-primary);padding:1rem}.auth-container{background:var(--bg-card);border:1px solid var(--glass-border);border-radius:var(--radius-lg);padding:2rem;width:100%;max-width:400px;text-align:center}.auth-logo{font-size:2rem;font-weight:700;background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:1rem}.auth-title{font-size:1.5rem;margin-bottom:1.5rem}.auth-form{display:flex;flex-direction:column;gap:1rem}.auth-input{background:var(--bg-secondary);border:1px solid var(--glass-border);border-radius:var(--radius-md);padding:1rem;color:var(--text-primary);font-size:1rem;outline:none;transition:border-color .2s}.auth-input:focus{border-color:var(--accent-primary)}.auth-input::placeholder{color:var(--text-muted)}.auth-button{background:var(--accent-gradient);border:none;border-radius:var(--radius-md);padding:1rem;color:#fff;font-weight:600;font-size:1rem;cursor:pointer;transition:transform .2s}.auth-button:hover:not(:disabled){transform:scale(1.02)}.auth-button:disabled{opacity:.6;cursor:not-allowed}.auth-switch{margin-top:1.5rem;color:var(--text-secondary)}.auth-switch-button{background:none;border:none;color:var(--accent-primary);cursor:pointer;font-size:inherit}.auth-switch-button:hover{text-decoration:underline}.auth-error{background:#ef444433;border:1px solid var(--error);padding:.8rem;border-radius:var(--radius-sm);color:var(--error);margin-bottom:1rem}.auth-success{background:#10b98133;border:1px solid var(--success);padding:.8rem;border-radius:var(--radius-sm);color:var(--success);margin-bottom:1rem}.auth-features{margin-top:2rem;display:flex;flex-direction:column;gap:.5rem}.auth-features .feature{font-size:.9rem;color:var(--text-secondary)}.logout-button{background:none;border:none;font-size:1.2rem;cursor:pointer;padding:.3rem;opacity:.7;transition:opacity .2s}.logout-button:hover{opacity:1}.settings-view{min-height:100vh;background:var(--bg-primary)}.settings-header{display:flex;align-items:center;gap:1rem;padding:1rem;background:var(--bg-card);border-bottom:1px solid var(--glass-border)}.settings-header h1{margin:0;font-size:1.3rem}.settings-content{padding:1rem;max-width:600px;margin:0 auto}.settings-section{background:var(--bg-card);border:1px solid var(--glass-border);border-radius:var(--radius-lg);padding:1.5rem;margin-bottom:1rem}.settings-section h2{margin:0 0 1rem;font-size:1.1rem}.reset-mode-options{display:flex;flex-direction:column;gap:.8rem}.mode-button{display:flex;flex-direction:column;align-items:flex-start;padding:1rem;background:var(--bg-secondary);border:2px solid var(--glass-border);border-radius:var(--radius-md);cursor:pointer;transition:all .2s}.mode-button:hover{border-color:var(--accent-primary)}.mode-button.active{border-color:var(--accent-primary);background:#8b5cf61a}.mode-icon{font-size:1.5rem;margin-bottom:.3rem}.mode-title{font-weight:600;color:var(--text-primary)}.mode-desc{font-size:.8rem;color:var(--text-muted)}.settings-note{margin-top:1rem;padding:.8rem;background:#fbbf241a;border-radius:var(--radius-sm);color:#fbbf24;font-size:.85rem}.reset-all-button{width:100%;padding:1rem;background:linear-gradient(135deg,#ef4444,#dc2626);border:none;border-radius:var(--radius-md);color:#fff;font-weight:600;cursor:pointer;transition:transform .2s}.reset-all-button:hover{transform:scale(1.02)}.character-reset-list{display:flex;flex-direction:column;gap:.5rem}.character-reset-item{display:flex;justify-content:space-between;align-items:center;padding:.8rem;background:var(--bg-secondary);border-radius:var(--radius-md)}.char-info{display:flex;align-items:center;gap:.8rem}.char-avatar-small{width:40px;height:40px;border-radius:50%;object-fit:cover}.char-name{display:block;font-weight:600}.char-status{display:block;font-size:.75rem;color:var(--text-muted)}.reset-char-button{padding:.5rem 1rem;background:#ef444433;border:1px solid #ef4444;border-radius:var(--radius-sm);color:#ef4444;cursor:pointer;transition:all .2s}.reset-char-button:hover{background:#ef4444;color:#fff}.modal-buttons{display:flex;gap:.8rem;margin-top:1rem}.modal-button.secondary{background:var(--bg-secondary);border:1px solid var(--glass-border)}.modal-button.danger{background:linear-gradient(135deg,#ef4444,#dc2626)}.settings-button{background:none;border:none;font-size:1.2rem;cursor:pointer;padding:.3rem;opacity:.7;transition:opacity .2s}.settings-button:hover{opacity:1}.feedback-button{width:100%;padding:.8rem 1rem;margin-bottom:.8rem;background:linear-gradient(135deg,#3b82f6,#1d4ed8);border:none;border-radius:var(--radius-md);color:#fff;font-weight:500;cursor:pointer;transition:transform .2s}.feedback-button:hover{transform:scale(1.02)}.feedback-modal{max-width:450px;max-height:80vh;overflow-y:auto}.feedback-content{text-align:left;padding:1rem;background:var(--bg-secondary);border-radius:var(--radius-md);margin:1rem 0;max-height:300px;overflow-y:auto}.feedback-content p{margin:.5rem 0;line-height:1.5}.engagement-bar{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;background:linear-gradient(135deg,#1a1a25,#0d0d14);border-bottom:1px solid var(--glass-border);gap:.5rem}.streak-container{display:flex;align-items:center;gap:.5rem;padding:.4rem .8rem;background:linear-gradient(135deg,#ff6b35,#ff4500);border-radius:var(--radius-full);box-shadow:0 0 15px #ff6b3566}.streak-flame{font-size:1.2rem;animation:flamePulse 1s ease-in-out infinite}@keyframes flamePulse{0%,to{transform:scale(1)}50%{transform:scale(1.2)}}.streak-info{display:flex;flex-direction:column;line-height:1}.streak-count{font-size:1.1rem;font-weight:700;color:#fff}.streak-label{font-size:.6rem;color:#fffc;text-transform:uppercase}.daily-reward-btn{padding:.5rem 1rem;background:linear-gradient(135deg,gold,#ffb800);border:none;border-radius:var(--radius-full);color:#1a1a25;font-weight:600;font-size:.8rem;cursor:pointer;box-shadow:0 0 20px #ffd70080}.daily-reward-btn.pulse{animation:rewardPulse 2s ease-in-out infinite}@keyframes rewardPulse{0%,to{transform:scale(1);box-shadow:0 0 20px #ffd70080}50%{transform:scale(1.05);box-shadow:0 0 30px #ffd700cc}}.daily-reward-claimed{font-size:.75rem;color:var(--success)}.xp-container{display:flex;align-items:center;gap:.4rem}.level-badge-small{padding:.2rem .5rem;background:var(--accent-gradient);border-radius:var(--radius-full);font-size:.7rem;font-weight:700}.xp-bar{width:50px;height:6px;background:var(--bg-secondary);border-radius:var(--radius-full);overflow:hidden}.xp-fill{height:100%;background:linear-gradient(90deg,#10b981,#34d399);transition:width .3s ease}.xp-text{font-size:.65rem;color:var(--text-muted)}.reward-popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1000;animation:popIn .3s ease-out}@keyframes popIn{0%{transform:translate(-50%,-50%) scale(0);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}.reward-content{padding:1.5rem 2rem;background:linear-gradient(135deg,gold,#ffb800);color:#1a1a25;border-radius:var(--radius-lg);font-size:1.5rem;font-weight:700;box-shadow:0 0 50px #ffd70099}.notification-banner{display:flex;align-items:center;padding:.8rem 1rem;background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:var(--radius-md);margin:.5rem 1rem;gap:.8rem;cursor:pointer;animation:slideIn .3s ease-out;border:1px solid var(--glass-border)}@keyframes slideIn{0%{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}.notification-avatar{width:45px;height:45px;border-radius:50%;overflow:hidden;border:2px solid var(--accent-primary)}.notification-avatar img{width:100%;height:100%;object-fit:cover}.notification-content{flex:1;display:flex;flex-direction:column}.notification-name{font-weight:600;font-size:.9rem}.notification-message{font-size:.8rem;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}.notification-time{font-size:.7rem;color:var(--text-muted)}.online-indicator-bar{display:flex;align-items:center;padding:.6rem 1rem;gap:.8rem;overflow-x:auto;background:var(--bg-secondary);border-bottom:1px solid var(--glass-border)}.online-label{font-size:.75rem;color:var(--text-secondary);white-space:nowrap}.online-avatars{display:flex;gap:.5rem}.online-avatar{position:relative;width:40px;height:40px;border-radius:50%;overflow:hidden;border:2px solid var(--success);cursor:pointer;animation:bounceIn .5s ease-out both}@keyframes bounceIn{0%{transform:scale(0)}60%{transform:scale(1.1)}to{transform:scale(1)}}.online-avatar img{width:100%;height:100%;object-fit:cover}.online-dot{position:absolute;bottom:2px;right:2px;width:10px;height:10px;background:var(--success);border-radius:50%;border:2px solid var(--bg-secondary);animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.progress-card{padding:1rem;background:var(--bg-card);border-radius:var(--radius-md);border:1px solid var(--glass-border);margin:.5rem 1rem}.progress-card-header{display:flex;justify-content:space-between;margin-bottom:.5rem}.progress-card-title{font-size:.85rem;font-weight:500}.progress-card-reward{font-size:.8rem;color:var(--warning)}.progress-card-bar{height:8px;background:var(--bg-secondary);border-radius:var(--radius-full);overflow:hidden}.progress-card-fill{height:100%;background:linear-gradient(90deg,var(--accent-primary),var(--accent-secondary));transition:width .5s ease}.progress-card-text{font-size:.7rem;color:var(--text-muted);text-align:right;margin-top:.3rem}.miss-you-card{display:flex;align-items:center;padding:1rem;background:linear-gradient(135deg,#ff4d6d1a,#ff4d6d0d);border:1px solid rgba(255,77,109,.3);border-radius:var(--radius-md);margin:.5rem 1rem;gap:.8rem;cursor:pointer}.miss-you-avatar{position:relative;width:50px;height:50px;border-radius:50%;overflow:hidden}.miss-you-avatar img{width:100%;height:100%;object-fit:cover}.miss-you-badge{position:absolute;top:-5px;right:-5px;font-size:1rem}.miss-you-content{flex:1;display:flex;flex-direction:column}.miss-you-name{font-weight:600;font-size:.9rem}.miss-you-message{font-size:.8rem;color:var(--accent-primary);font-style:italic}.miss-you-time{font-size:.7rem;color:var(--text-muted)}.miss-you-btn{padding:.6rem 1rem;background:var(--accent-gradient);border:none;border-radius:var(--radius-full);font-size:1rem;cursor:pointer}@media(max-width:480px){.app{max-width:100vw;height:100vh;height:100dvh}.engagement-bar{padding:.5rem .75rem}.streak-container{padding:.3rem .6rem}.streak-count{font-size:1rem}}