#auth-panel{position:fixed;top:0;left:0;width:100%;height:100%;z-index:102;transition:visibility 0.3s ease-out, opacity 0.3s ease-out}#auth-panel.hidden{visibility:hidden;opacity:0;pointer-events:none}#auth-backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background:rgb(0 0 0 / 50%)}#auth-container{position:relative;display:flex;justify-content:center;align-items:center;width:100%;height:100%;pointer-events:none}#auth-slider{position:relative;display:flex;width:420px;max-width:calc(100% - 32px);overflow:hidden;pointer-events:none;transition:height 0.3s ease-in-out}.auth-slide{min-width:100%;transition:transform 0.35s ease-in-out;pointer-events:none}.auth-slide-inner{display:flex;flex-direction:column;gap:20px;padding:28px 24px;background:#1e1e1e;border-radius:20px;box-sizing:border-box;pointer-events:auto}.auth-header{position:relative;display:flex;align-items:center;justify-content:center;min-height:36px}.auth-header h2,.auth-profile-title{font-size:1.3em;font-weight:600;color:#e4e4e4;margin:0;text-align:center;padding:0 44px;box-sizing:border-box;width:100%}.auth-back{position:absolute;left:0;top:50%;transform:translateY(-50%)}#auth-close,.auth-close-btn{position:absolute;right:0;top:50%;transform:translateY(-50%)}.auth-back,#auth-close,.auth-close-btn{display:flex;align-items:center;justify-content:center;padding:6px;cursor:pointer;flex-shrink:0}.auth-header-spacer{display:none}.auth-input-password{position:relative}.auth-input-password .auth-input{padding-right:48px}.auth-password-toggle{position:absolute;right:12px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:28px;height:28px;cursor:pointer;opacity:0.6;transition:opacity 0.2s ease;user-select:none}.auth-password-toggle:hover{opacity:1}.auth-password-toggle img{display:block}.auth-back,#auth-close,.auth-close-btn{display:flex;align-items:center;justify-content:center;padding:6px;cursor:pointer;flex-shrink:0}.auth-buttons{display:flex;flex-direction:column;gap:12px}.auth-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:14px 20px;border:1.5px solid #3a3a3a;border-radius:12px;background:#2a2a2a;color:#e4e4e4;font-size:1em;font-family:"Roboto", sans-serif;cursor:pointer;transition:all 0.2s ease;box-sizing:border-box}.auth-btn:hover{border-color:#636bff;background:#333}.auth-btn:active{transform:scale(0.98)}.auth-btn-primary{background:#636bff;border-color:#636bff;color:#fff;font-weight:600}.auth-btn-primary:hover{background:#5258e0;border-color:#5258e0}.auth-btn-primary:disabled{opacity:0.5;cursor:not-allowed}.auth-btn-yandex{background:#1a1a1a;border-color:#fc0;color:#fc0}.auth-btn-yandex:hover{background:#2a2a0a;border-color:#fc0}.auth-btn-email{padding:18px 20px}.auth-btn-email img,.auth-btn-yandex img{flex-shrink:0}.auth-btn-logout{background:transparent;border-color:#f44336;color:#f44336;margin-top:8px}.auth-btn-logout:hover{background:#f44336;color:#fff;border-color:#f44336}.auth-form{display:flex;flex-direction:column;gap:14px}.auth-input-group{position:relative}.auth-input{width:100%;padding:14px 16px;background:#2a2a2a;border:1.5px solid #3a3a3a;border-radius:10px;color:#e4e4e4;font-size:1em;font-family:"Roboto", sans-serif;box-sizing:border-box;transition:border-color 0.2s ease}.auth-input:focus{border-color:#636bff;outline:none}.auth-input::placeholder{color:#777}.auth-message{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;min-height:20px;font-size:0.85em;text-align:center;transition:all 0.2s ease}.auth-message:empty{display:none}.auth-message.success{color:#4caf50}.auth-message.error{color:#f44336}.auth-footer-link{text-align:center;font-size:0.9em;color:#888}.auth-link{color:#636bff;cursor:pointer;transition:color 0.2s}.auth-link:hover{color:#8b91ff;text-decoration:underline}.auth-divider{display:flex;align-items:center;gap:12px;color:#555;font-size:0.85em}.auth-divider::before,.auth-divider::after{content:"";flex-grow:1;height:1px;background:#333}#auth-profile{display:flex;flex-direction:column;align-items:center;gap:12px}#auth-profile-avatar-area{display:flex;justify-content:center}#auth-profile-avatar{background:#333}#auth-profile-name{font-size:1.3em;font-weight:600;color:#e4e4e4}#auth-profile-email{font-size:0.9em;color:#888}#auth-profile-subscription{padding:6px 14px;border-radius:8px;font-size:0.85em}#auth-profile-email-status{font-size:0.8em}.auth-profile-title{flex-grow:1;font-size:1.3em;font-weight:600;color:#e4e4e4;text-align:center}.auth-header-spacer{width:36px;height:36px;flex-shrink:0}.sub-none{background:#333;color:#888}.sub-active{background:#1e2047;color:#8b91ff;border:1px solid #636bff}#auth-captcha-container{display:flex;flex-direction:column;gap:12px;background:#2a2a2a;border-radius:12px;padding:16px}#auth-captcha-bg-wrapper{position:relative;width:300px;height:150px;max-width:100%;align-self:center;user-select:none;border-radius:8px;overflow:hidden}#auth-captcha-bg{width:100%;height:100%;display:block}#auth-captcha-puzzle{position:absolute;top:0;left:0;filter:drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5))}#auth-captcha-slider-track{position:relative;width:300px;max-width:100%;height:44px;background:#1e1e1e;border-radius:22px;align-self:center;user-select:none;overflow:hidden}#auth-captcha-slider-thumb{position:absolute;top:2px;left:2px;width:40px;height:40px;background:#636bff;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:grab;transition:left 0.05s linear;z-index:1}#auth-captcha-slider-thumb:active{cursor:grabbing}#auth-captcha-slider-label{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#666;font-size:0.85em;pointer-events:none}#h-auth{display:flex;align-items:center;justify-content:center;cursor:pointer;width:28px}#h-auth-avatar{width:28px}#auth-profile-email-status-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center}.auth-btn-resend{display:inline-flex;align-items:center;justify-content:center;padding:6px 14px;border:1.5px solid #636bff;border-radius:8px;background:transparent;color:#636bff;font-size:0.8em;font-family:"Roboto", sans-serif;cursor:pointer;transition:all 0.2s ease;white-space:nowrap}.auth-btn-resend:hover{background:#636bff;color:#fff}.auth-btn-resend:disabled{opacity:0.4;cursor:not-allowed;border-color:#555;color:#888;background:transparent}.auth-btn-resend:disabled:hover{background:transparent;color:#888}#auth-resend-captcha-container{display:flex;flex-direction:column;gap:12px;background:#2a2a2a;border-radius:12px;padding:16px}#auth-resend-captcha-bg-wrapper{position:relative;width:300px;height:150px;max-width:100%;align-self:center;user-select:none;border-radius:8px;overflow:hidden}#auth-resend-captcha-bg{width:100%;height:100%;display:block}#auth-resend-captcha-puzzle{position:absolute;top:0;left:0;cursor:grab;filter:drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5))}#auth-resend-captcha-puzzle:active{cursor:grabbing}#auth-resend-captcha-slider-track{position:relative;width:300px;max-width:100%;height:44px;background:#1e1e1e;border-radius:22px;align-self:center;user-select:none;overflow:hidden}#auth-resend-captcha-slider-thumb{position:absolute;top:2px;left:2px;width:40px;height:40px;background:#636bff;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:grab;transition:left 0.05s linear;z-index:1}#auth-resend-captcha-slider-thumb:active{cursor:grabbing}#auth-resend-captcha-slider-label{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#666;font-size:0.85em;pointer-events:none}#auth-reg-captcha-container{display:flex;flex-direction:column;gap:12px;background:#2a2a2a;border-radius:12px;padding:16px}#auth-reg-captcha-bg-wrapper{position:relative;width:300px;height:150px;max-width:100%;align-self:center;user-select:none;border-radius:8px;overflow:hidden}#auth-reg-captcha-bg{width:100%;height:100%;display:block}#auth-reg-captcha-puzzle{position:absolute;top:0;left:0;cursor:grab;filter:drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5))}#auth-reg-captcha-puzzle:active{cursor:grabbing}#auth-reg-captcha-slider-track{position:relative;width:300px;max-width:100%;height:44px;background:#1e1e1e;border-radius:22px;align-self:center;user-select:none;overflow:hidden}#auth-reg-captcha-slider-thumb{position:absolute;top:2px;left:2px;width:40px;height:40px;background:#636bff;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:grab;transition:left 0.05s linear;z-index:1}#auth-reg-captcha-slider-thumb:active{cursor:grabbing}#auth-reg-captcha-slider-label{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#666;font-size:0.85em;pointer-events:none}.hero-sprite{display:block;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges;background-position:0 0}.hero-sprite-animate{animation:hero-sprite-walk var(--duration) steps(var(--frames)) infinite}@keyframes hero-sprite-walk{from{background-position:0 0}to{background-position:calc(-1 * var(--frames) * var(--frame-w)) 0}}#auth-profile-avatar-area{min-height:80px;display:flex;justify-content:center;align-items:center;-webkit-tap-highlight-color:rgba(0,0,0,0)}/* ═══════════════════════════════════════════════════ Profile hero row ═══════════════════════════════════════════════════ */#hero-profile-row{display:flex;align-items:center;justify-content:center;gap:8px}.hero-switch-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:1.5px solid #3a3a3a;border-radius:50%;background:#2a2a2a;cursor:pointer;transition:border-color 0.2s, background 0.2s;flex-shrink:0}.hero-switch-btn:hover{border-color:#636bff;background:#333}.hero-switch-btn:active{transform:scale(0.92)}.hero-switch-btn img{display:block;pointer-events:none}#hero-name-label{text-align:center;font-size:0.82em;color:#888;min-height:18px;margin-top:-4px}.hero-play-btn{background:#2a2a2a!important;border-color:#636bff!important;color:#636bff!important;padding:10px 24px!important;font-size:0.92em!important;width:auto!important;align-self:center}.hero-play-btn:hover{background:#636bff!important;color:#fff!important}@media screen and (max-width:600px){#h-auth-icon{height:var(--icon-size);width:var(--icon-size)}}@media screen and (max-width:480px){.auth-slide-inner{padding:20px 16px;border-radius:16px}.auth-header h2{font-size:1.1em}.auth-profile-title{font-size:1.1em}#auth-captcha-bg-wrapper,#auth-captcha-slider-track{width:260px}#auth-resend-captcha-bg-wrapper,#auth-resend-captcha-slider-track{width:260px}}@media screen and (max-width:320px){#auth-captcha-bg-wrapper,#auth-captcha-slider-track{width:220px}}/* ═══════════════════════════════════════════════════ Subscription Button in Profile ═══════════════════════════════════════════════════ */.auth-btn-subscribe{background:linear-gradient(135deg, #636bff 0%, #8b5cf6 100%)!important;border:1.5px solid #636bff!important;color:#fff!important;font-weight:600!important;font-size:0.95em!important;padding:12px 20px!important;transition:all 0.2s ease!important;position:relative;overflow:hidden}.auth-btn-subscribe:hover{background:linear-gradient(135deg, #5258e0 0%, #7c3aed 100%)!important;border-color:#5258e0!important;transform:scale(1.02)}.auth-btn-subscribe:active{transform:scale(0.98)!important}.auth-btn-subscribe:disabled{opacity:0.5!important;cursor:not-allowed!important;transform:none!important}/* ═══════════════════════════════════════════════════ Subscription Modal ═══════════════════════════════════════════════════ */#sub-modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:103;display:flex;justify-content:center;align-items:center;transition:visibility 0.3s ease-out, opacity 0.3s ease-out}#sub-modal.sub-modal-hidden{visibility:hidden;opacity:0;pointer-events:none}#sub-modal-backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background:rgb(0 0 0 / 60%)}#sub-modal-container{position:relative;z-index:1;width:400px;max-width:calc(100% - 32px);max-height:calc(100vh - 40px);overflow-y:auto}#sub-modal-inner{display:flex;flex-direction:column;gap:20px;padding:28px 24px;background:#1e1e1e;border-radius:20px;box-sizing:border-box}.sub-modal-header{display:flex;align-items:center;justify-content:center;position:relative;min-height:36px}.sub-modal-header h2{font-size:1.3em;font-weight:600;color:#e4e4e4;margin:0;text-align:center}#sub-modal-close{position:absolute;right:0;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;padding:6px;cursor:pointer}.sub-modal-desc{display:flex;flex-direction:column;color:#c8c8c8;font-size:0.9em;line-height:1.5}.sub-modal-feature{display:flex;align-items:center;gap:12px;padding:10px 14px;background:#2a2a2a;border:1px solid #3a3a3a;border-radius:10px}.sub-modal-feature span{flex:1;text-align:center}.sub-modal-feature img{flex-shrink:0;opacity:0.85}.sub-modal-desc > div{margin-top:6px}.sub-modal-desc > div:first-child{margin-top:0}#sub-plans{display:flex;flex-direction:column;gap:12px}.sub-plan{display:flex;align-items:center;gap:14px;padding:16px 18px;background:#2a2a2a;border:2px solid #3a3a3a;border-radius:14px;cursor:pointer;transition:all 0.2s ease;user-select:none}.sub-plan:hover{border-color:#555;background:#303030}.sub-plan-selected{border-color:#636bff!important;background:#1e2047!important}.sub-plan-selected:hover{background:#242857!important}.sub-plan-radio{width:22px;height:22px;min-width:22px;border:2px solid #555;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:border-color 0.2s ease}.sub-plan-selected .sub-plan-radio{border-color:#636bff}.sub-plan-radio-dot{width:10px;height:10px;border-radius:50%;background:transparent;transition:background 0.2s ease}.sub-plan-selected .sub-plan-radio-dot{background:#636bff}.sub-plan-info{display:flex;flex-direction:column;gap:4px;flex:1}.sub-plan-title{font-size:1.05em;font-weight:600;color:#e4e4e4;display:flex;align-items:center;gap:8px}.sub-plan-badge{display:inline-flex;align-items:center;padding:2px 8px;background:linear-gradient(135deg, #636bff, #8b5cf6);color:#fff;font-size:0.72em;font-weight:700;border-radius:6px;letter-spacing:0.3px}.sub-plan-price-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.sub-plan-price{font-size:1.1em;font-weight:700;color:#e4e4e4}.sub-plan-old-price{font-size:0.85em;color:#777;text-decoration:line-through}.sub-plan-per-month{font-size:0.8em;color:#8b91ff;font-weight:500}.sub-pay-btn{font-size:1.05em!important;padding:16px 20px!important}.sub-modal-footer{text-align:center;color:#666;font-size:0.78em}@media screen and (max-width:480px){#sub-modal-inner{padding:20px 16px;border-radius:16px}.sub-modal-header h2{font-size:1.1em}.sub-plan{padding:14px 14px}}