#alert-container{margin-bottom:1.5rem}.alert{padding:1rem 1.25rem;margin-bottom:12px;display:flex;align-items:center;gap:12px;font-family:var(--font-code);font-size:.85rem}.alert-success{background:#00ff411a;color:var(--accent-green);border:1px solid var(--accent-green)}.alert-error{background:#ff33331a;color:var(--accent-red);border:1px solid var(--accent-red)}.loading-state{text-align:center;padding:80px 20px}.spinner{width:48px;height:48px;border:2px solid var(--border);border-top-color:var(--text-main);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 16px}@keyframes spin{to{transform:rotate(360deg)}}.loading-state p{color:var(--text-muted)}.settings-container{max-width:900px;display:flex;flex-direction:column;gap:2rem}.settings-card{background:var(--surface);border:1px solid var(--border);overflow:hidden}.card-header{padding:1.5rem 2rem;border-bottom:1px solid var(--border);background:#ffffff05}.card-header-row{display:flex;justify-content:space-between;align-items:center;width:100%;gap:1rem}.card-title{font-size:1.1rem;font-weight:700;margin-bottom:5px;color:var(--text-main)}.card-desc{color:var(--text-muted);font-size:.85rem}.card-body{padding:2rem}.setting-row{display:flex;justify-content:space-between;align-items:center;padding:1rem 0;border-bottom:1px solid #1a1a1a}.setting-row:last-child{border-bottom:none}.setting-label{font-size:.9rem;color:var(--text-muted);min-width:150px;flex-shrink:0}.setting-hint{font-size:.75rem;color:#444;margin-top:5px;line-height:1.4}.setting-value{flex:1;font-family:var(--font-code);color:#fff;font-size:.9rem;padding:0 1rem;overflow-wrap:break-word}.setting-action{margin-left:1rem;flex-shrink:0}.user-id-box{background:#000;border:1px dashed var(--border);padding:.5rem 1rem;color:var(--text-muted);font-size:.8rem;display:inline-flex;align-items:center;gap:10px;width:100%;max-width:450px;word-break:break-all}.status-text{font-family:var(--font-code);font-size:.8rem}.status-off{color:var(--accent-red)}.status-on{color:var(--accent-green)}.empty-text{color:var(--text-muted);font-size:.85rem;padding:1rem 0}.passkeys-list{margin-top:.5rem}.passkey-item{display:flex;align-items:center;gap:1rem;padding:1rem;background:#ffffff08;border:1px solid var(--border);margin-top:.75rem}.passkey-icon{font-size:1.2rem}.passkey-details{flex:1}.passkey-details h4{font-size:.9rem;font-weight:600;color:#fff}.passkey-meta{font-family:var(--font-code);font-size:.75rem;color:var(--text-muted);margin-top:4px}.sessions-list{display:flex;flex-direction:column}.session-item{display:flex;align-items:center;gap:1rem;padding:1rem;background:#ffffff08;border:1px solid var(--border);margin-top:.75rem}.session-item:first-child{margin-top:0}.session-icon{font-size:1.5rem;flex-shrink:0}.session-details{flex:1;min-width:0}.session-details h4{font-size:.9rem;font-weight:600;color:#fff;display:flex;align-items:center;flex-wrap:wrap;gap:8px}.session-meta{font-family:var(--font-code);font-size:.75rem;color:var(--text-muted);margin-top:4px}.current-badge{background:var(--accent-green);color:#000;font-family:var(--font-code);font-size:.6rem;padding:2px 6px;border-radius:2px;font-weight:700}.btn-sm{background:transparent;border:1px solid var(--border);color:#fff;padding:.5rem 1rem;font-family:var(--font-code);font-size:.75rem;transition:all .2s;text-decoration:none;display:inline-block;cursor:none}.btn-sm:hover{border-color:#fff;background:#fff;color:#000}.btn-primary{background:#fff;color:#000;border-color:#fff}.btn-primary:hover{background:#ccc;border-color:#ccc}.btn-danger{border-color:#522;color:#f44}.btn-danger:hover{background:#f44;color:#fff;border-color:#f44}.modal{display:none;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;background:#000c;backdrop-filter:blur(4px)}.modal.show{display:flex;align-items:center;justify-content:center}.modal-content{background:var(--surface);border:1px solid var(--border);max-width:500px;width:90%;animation:modalFadeIn .2s ease-out}@keyframes modalFadeIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.modal-header{padding:1.5rem 2rem 1rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}.modal-header h2{margin:0;font-size:1.1rem;color:var(--text-main)}.modal-close{background:none;border:none;font-size:28px;color:var(--text-muted);cursor:none;padding:0;width:32px;height:32px;line-height:1}.modal-close:hover{color:var(--text-main)}.modal-body{padding:1.5rem 2rem}.modal-body>p:first-child{color:var(--text-muted);font-size:.9rem}.modal-text{margin:16px 0 8px;font-size:.9rem;color:var(--text-muted)}.qr-container{text-align:center;margin:20px 0;background:var(--text-main);padding:20px;display:flex;justify-content:center;align-items:center}.qr-container img,.qr-container canvas{max-width:200px;width:100%;height:auto}.secret-code{background:var(--bg);border:1px dashed var(--border);padding:1rem;font-family:var(--font-code);font-size:.85rem;text-align:center;word-break:break-all;margin:8px 0 16px;color:var(--text-muted)}.form-group{margin-bottom:1.25rem}.form-group:last-child{margin-bottom:0}.form-group label{display:block;margin-bottom:8px;font-weight:500;font-size:.85rem;color:var(--text-muted)}.modal-input{width:100%;padding:.75rem 1rem;font-size:.9rem;background:var(--bg);border:1px solid var(--border);color:var(--text-main);font-family:var(--font-ui)}.modal-input[type=text][maxlength="6"],.modal-input[maxlength="6"]{text-align:center;font-family:var(--font-code);font-size:1.25rem;letter-spacing:4px}.modal-input:focus{outline:none;border-color:var(--border-active)}.modal-input::placeholder{color:var(--text-muted)}.modal-footer{padding:1rem 2rem 1.5rem;display:flex;gap:12px;justify-content:flex-end}.recovery-codes{background:var(--bg);border:1px dashed var(--border);padding:1rem;margin:16px 0}.recovery-codes code{display:block;font-family:var(--font-code);font-size:.85rem;padding:6px 8px;margin:4px 0;background:var(--surface);border:1px solid var(--border);color:var(--text-main)}@media(max-width:1024px){.card-body{padding:1.5rem}.setting-row{flex-direction:column;align-items:flex-start;gap:.5rem}.setting-label{margin-bottom:5px;min-width:auto}.setting-value{padding:0;margin-bottom:10px;width:100%}.setting-action{margin-left:0;width:100%}.btn-sm{width:100%;text-align:center}.user-id-box{font-size:.7rem;max-width:100%}.card-header-row{flex-direction:column;align-items:flex-start;gap:1rem}.card-header-row .btn-sm{width:auto}.session-item,.session-details h4,.passkey-item{flex-direction:column;align-items:flex-start}.modal-content{width:95%;max-width:none}.modal-footer{flex-direction:column}.modal-footer button{width:100%}}