.tutorial-popup{position:fixed;top:80px;right:20px;z-index:15000;transform:translateX(100%);transition:transform .3s ease}.tutorial-popup.visible{transform:translateX(0)}.tutorial-content-wrapper{display:flex;flex-direction:column;background:var(--danger-soft);border-radius:1rem;box-shadow:0 0 10px 2px rgba(0,0,0,.15);max-width:400px;width:55rem;height:-moz-fit-content;height:fit-content;overflow:hidden;border:1px solid var(--border);justify-content:flex-start}.tutorial-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid var(--border);background:var(--danger-soft)}.tutorial-progress{display:flex;align-items:center;gap:1rem;flex:1}.tutorial-progress-text{font-size:12px;color:var(--text-secondary);font-weight:500;min-width:35px}.tutorial-close{background:none;border:none;font-size:16px;color:var(--text-secondary);cursor:pointer;padding:4px;border-radius:4px;transition:all .2s ease}.tutorial-close:hover{background:var(--surface-hover);color:var(--text-secondary)}.tutorial-content{padding:1rem;text-align:center;display:flex;flex-direction:column;gap:1rem}.tutorial-title{font-size:18px;font-weight:700;color:var(--text-primary);line-height:1.3}.tutorial-description{font-size:1.2rem;color:var(--text-primary);line-height:1.5;text-align:left}.tutorial-description a{color:var(--accent);text-decoration:underline}.tutorial-description a:hover{color:var(--text-primary)}.tutorial-gif-container{position:relative;border-radius:.5rem;overflow:hidden;border:1px solid rgba(var(--text-primary-rgb),.3);box-shadow:0 0 5px 0 rgba(0,0,0,.15);min-height:150px;display:flex;align-items:center;justify-content:center;width:-moz-fit-content;width:fit-content;margin:auto}.tutorial-gif{width:100%;height:100%;-o-object-fit:contain;object-fit:contain}.tutorial-gif-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px;color:var(--text-muted);gap:1.5rem}.tutorial-gif-placeholder .placeholder-icon{font-size:32px;margin-bottom:12px}.tutorial-gif-placeholder p{margin:0;font-size:1.25rem}.tutorial-footer{padding:1rem 1rem 1.5rem;display:flex;flex-direction:column;gap:1rem;border-top:1px solid var(--border);background:var(--danger-soft)}.tutorial-navigation{display:flex;justify-content:space-between;align-items:center}.tutorial-btn{padding:.6rem 1rem!important;border-radius:1rem;font-weight:600!important;cursor:pointer;transition:all .2s;border:none;font-size:1rem!important;box-shadow:inset 0 -2px 0 0 var(--shadow-ink)}.tutorial-btn.tutorial-btn-primary{background-color:var(--accent-solid);color:#fff}.tutorial-btn.tutorial-btn-primary:hover{background-color:var(--accent-dark)}.tutorial-btn.tutorial-btn-secondary{padding:.5rem 1.25rem;gap:.75rem;display:flex;align-items:center;flex-shrink:0;cursor:pointer;background-color:none;box-shadow:inset 0 0 0 1px var(--accent)!important;border:none!important;color:var(--text-primary);border-radius:1rem;font-weight:600;font-size:1rem}.tutorial-btn.tutorial-btn-secondary:hover:not(.disabled){box-shadow:inset 0 0 2.5px 1px var(--accent)!important}.tutorial-btn.tutorial-btn-secondary.disabled{opacity:.5;cursor:not-allowed}.tutorial-dots{display:flex;justify-content:center;gap:6px}.tutorial-dot{width:6px;height:6px;border-radius:50%;background:var(--text-muted);border:none;cursor:pointer;transition:all .2s ease}.tutorial-dot.active{color:var(--accent);background-color:var(--accent)}@media(max-width:768px){.tutorial-popup{top:40px;right:10px;left:10px;transform:translateY(0)!important}.tutorial-popup.visible{transform:translateY(0)}.tutorial-content-wrapper{width:100%;max-width:none;height:800px;min-height:800px}.tutorial-content{padding:16px}.tutorial-title{font-size:16px}.tutorial-description{font-size:13px}.tutorial-navigation{flex-direction:row;gap:8px}}.settings-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:10000;display:flex;align-items:center;justify-content:center;animation:fadeIn .2s ease-out}.settings-overlay-backdrop{position:absolute;top:0;left:0;right:0;bottom:0;background-color:var(--overlay);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.settings-overlay-content{position:relative;background:rgba(0,0,0,0);border-radius:1rem;box-shadow:0 20px 25px -5px var(--shadow-weak),0 10px 10px -5px var(--shadow-weak);width:90vw;max-width:800px;max-height:90dvh;overflow:hidden;display:flex;flex-direction:column;animation:slideIn .3s ease-out}.settings-overlay-content .modal-header-bar{flex-shrink:0}.settings-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem!important;background:var(--accent-solid)}.settings-header h2{margin:0;font-size:1.25rem;font-weight:600;color:#fff}.settings-close-btn{background:none;border:none;cursor:pointer;border-radius:4px;color:#fff;display:flex;align-items:center;justify-content:center;transition:all .2s ease;padding:0!important}.settings-close-btn:hover{background:hsla(0,0%,100%,.15)}.settings-close-btn svg{width:20px;height:20px}.settings-tabs{flex-shrink:0;border:none}.settings-tab,.settings-tabs{display:flex;border-bottom:1px solid var(--border)}.settings-tab{flex:1;background-color:var(--danger-soft);padding:1rem 1.5rem;border-left:none;border-top:none;border-right:1px solid var(--border);cursor:pointer;align-items:center;gap:1rem;font-size:1rem;font-weight:500;color:var(--text-primary);border-bottom:3px solid rgba(0,0,0,0);transition:all .2s}.settings-tab img{width:1.5rem;height:1.5rem}.settings-tab:hover{background-color:var(--surface-hover);border-bottom-color:var(--accent);color:var(--text-secondary)}.settings-tab.active{color:var(--accent);border-bottom-color:var(--accent);background-color:var(--danger-soft)}.settings-tab.active img{opacity:1}.settings-content{flex:1;min-height:0;padding:1rem 2rem;overflow-y:auto;-webkit-overflow-scrolling:touch;background-color:var(--danger-soft)}.settings-section h3{margin:0 0 1rem;font-size:1.25rem;font-weight:600;color:var(--text-primary)}.settings-section h4{padding:0;font-size:1rem;font-weight:600;color:var(--text-primary)}.settings-form-group{margin-bottom:1rem}.settings-form-group input:not(.input-base):not(.input-number):not(.input-checkbox):not([type=password]):not([type=checkbox]){font-family:Inter,serif;padding:.5rem;border:1px solid rgba(var(--text-primary-rgb),.3);box-shadow:0 0 5px 0 var(--shadow-weak);border-radius:.5rem;font-size:1rem;box-sizing:border-box;width:100%;height:2.5rem;outline:none;background-color:var(--accent-soft);transition:border-color .3s ease;color:var(--text-primary)}.settings-form-group input:not(.input-base):not(.input-number):not(.input-checkbox):not([type=password]):not([type=checkbox])::-moz-placeholder{color:var(--text-muted);opacity:1;font-weight:300}.settings-form-group input:not(.input-base):not(.input-number):not(.input-checkbox):not([type=password]):not([type=checkbox])::placeholder{color:var(--text-muted);opacity:1;font-weight:300}.settings-form-group input:not(.input-base):not(.input-number):not(.input-checkbox):not([type=password]):not([type=checkbox]):focus{border-color:var(--accent)}.settings-form-group input:not(.input-base):not(.input-number):not(.input-checkbox):not([type=password]):not([type=checkbox]).disabled,.settings-form-group input:not(.input-base):not(.input-number):not(.input-checkbox):not([type=password]):not([type=checkbox]):disabled{background-color:var(--surface-subtle);color:var(--text-secondary);cursor:not-allowed}.settings-form-group label{display:block;margin-bottom:.5rem;font-weight:500;color:var(--text-secondary)}.settings-form-group .input-with-icon{position:relative;width:100%}.settings-form-group .input-with-icon input.input-base{width:100%;padding-right:2.5rem}.settings-form-group .toggle-password-btn{all:unset;position:absolute;top:50%;right:.5rem;transform:translateY(-50%);cursor:pointer;display:flex;align-items:center;justify-content:center}.settings-form-group .toggle-password-btn img{width:1.5rem;height:1.5rem}.settings-form-group input:not(.input-base):not(.input-number):not(.input-checkbox):not([type=checkbox]){font-family:Inter,serif;padding:.5rem;border:1px solid rgba(var(--text-primary-rgb),.3);box-shadow:0 0 5px 0 var(--shadow-weak);border-radius:.5rem;font-size:1rem;box-sizing:border-box;width:100%;height:2.5rem;outline:none;background-color:var(--accent-soft);transition:border-color .3s ease;color:var(--text-primary)}.settings-form-group input:not(.input-base):not(.input-number):not(.input-checkbox):not([type=checkbox])::-moz-placeholder{color:var(--text-muted);opacity:1;font-weight:300}.settings-form-group input:not(.input-base):not(.input-number):not(.input-checkbox):not([type=checkbox])::placeholder{color:var(--text-muted);opacity:1;font-weight:300}.settings-form-group input:not(.input-base):not(.input-number):not(.input-checkbox):not([type=checkbox]):focus{border-color:var(--accent)}.settings-form-group input:not(.input-base):not(.input-number):not(.input-checkbox):not([type=checkbox]).disabled,.settings-form-group input:not(.input-base):not(.input-number):not(.input-checkbox):not([type=checkbox]):disabled{background-color:var(--surface-subtle);color:var(--text-secondary);cursor:not-allowed}.settings-form-group select:not(.input-select){font-family:Inter,serif;border:1px solid rgba(var(--text-primary-rgb),.3);box-shadow:0 0 5px 0 var(--shadow-weak);border-radius:.5rem;font-size:1rem;box-sizing:border-box;width:100%;height:2.5rem;outline:none;background-color:var(--accent-soft);transition:border-color .3s ease;color:var(--text-primary);-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:.5rem 2.5rem .5rem .5rem;background-image:url(/images/select-icon-black.svg);background-repeat:no-repeat;background-position:right .75rem center;background-size:1.5rem auto}.settings-form-group select:not(.input-select)::-ms-expand{display:none}.settings-form-group select:not(.input-select):focus,.settings-form-group select:not(.input-select):hover{border-color:var(--accent)}.settings-form-group small{display:block;margin-top:.25rem;color:var(--accent);font-size:.85rem}.settings-photo-section{border-top:1px solid var(--border);padding-top:1rem}.settings-photo-container{display:flex;flex-direction:row;align-items:center;gap:1.5rem}.settings-photo-preview{-o-object-fit:cover;object-fit:cover}.settings-photo-placeholder,.settings-photo-preview{width:6rem;height:6rem;border-radius:50%;border:3px solid var(--border)}.settings-photo-placeholder{background-color:var(--text-primary);color:var(--text-inverse);display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:700}.settings-checkbox-group{display:flex;flex-direction:column;gap:.75rem}.settings-checkbox{display:flex!important;align-items:center;gap:.75rem;cursor:pointer;margin:0!important}.settings-checkbox .input-checkbox{flex-shrink:0}.settings-checkbox span{font-weight:400;color:var(--text-secondary)}.password-requirements{background:var(--surface-subtle);padding:.5rem;border-radius:.5rem;border:1px solid var(--border)}.password-requirements h4{padding:0}.password-checks{list-style:none;padding:0;margin:.5rem 0 0}.password-checks li{display:flex;align-items:center;gap:.5rem;padding:.25rem 0;font-size:.9rem}.password-checks li.valid{color:var(--accent)}.password-checks li.invalid{color:var(--danger)}.password-checks .check-icon{display:flex;align-items:center;border:none}.settings-actions{margin-top:1rem;padding-top:1.5rem;border-top:1px solid var(--border);display:flex;gap:1rem;justify-content:flex-end}.settings-btn{padding:.6rem 1rem!important;border-radius:1rem;font-weight:600!important;cursor:pointer;transition:all .2s;border:none;font-size:1rem!important;box-shadow:inset 0 -2px 0 0 var(--shadow-ink)}.settings-btn.primary{background-color:var(--accent-solid);color:#fff}.settings-btn.primary:hover:not(:disabled){background-color:var(--accent-deep)}.settings-btn.primary:disabled{background-color:var(--text-muted);cursor:not-allowed}.settings-btn.secondary{padding:.5rem 1.25rem;gap:.75rem;display:flex;align-items:center;flex-shrink:0;cursor:pointer;background-color:none;box-shadow:inset 0 0 0 1px var(--accent)!important;border:none!important;color:var(--text-primary);border-radius:1rem;font-weight:600;font-size:1rem}.settings-btn.secondary img{width:2rem}.settings-btn.secondary:hover{box-shadow:inset 0 0 2.5px 1px var(--accent)!important}.subcancel-btn{background-color:rgba(0,0,0,0);color:#ff6b6b;box-shadow:none;border:none;letter-spacing:0;font-weight:600;font-size:.9rem;margin-top:auto;cursor:pointer}.subcancel-btn:hover{color:var(--text-primary)!important}.settings-loading{display:flex;align-items:center;justify-content:center;padding:3rem;color:var(--text-secondary);font-size:1.1rem}@keyframes skeleton-pulse{0%,to{opacity:.9}50%{opacity:.66}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:scale(.95) translateY(-10px)}to{opacity:1;transform:scale(1) translateY(0)}}@media(max-width:768px){.settings-overlay-content{width:95vw;max-height:95dvh;margin:1rem}.settings-header{padding:1rem 1.5rem;background-color:var(--accent)}.settings-content{padding:1.5rem}.settings-tabs{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin}.settings-tabs::-webkit-scrollbar{height:4px}.settings-tabs::-webkit-scrollbar-track{background:rgba(0,0,0,0)}.settings-tabs::-webkit-scrollbar-thumb{background:var(--accent);border-radius:2px}.settings-tabs .settings-tab{flex:0 0 auto;min-width:-moz-fit-content;min-width:fit-content;padding:.75rem;font-size:.85rem;white-space:nowrap;gap:.5rem}.settings-tabs .settings-tab img{width:1rem;height:1rem;flex-shrink:0}.settings-photo-container{flex-direction:column;text-align:center}.settings-actions{flex-direction:column}}