:root{font-family:Inter,system-ui,-apple-system,sans-serif;line-height:1.5;font-weight:400;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:#f7f7fb;background-color:#0f1115}body{margin:0;min-width:320px;background-color:#0f1115}:root{font-family:Inter,system-ui,-apple-system,sans-serif;line-height:1.5;font-weight:400;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:#fff;background-color:#000;--background: #000000;--surface: #1c1c1e;--text: #ffffff;--text-secondary: #999999;--border: #38383a;--accent: #ffffff;--error: #ff453a;--success: #32d74b;--button-bg: #ffffff;--button-text: #000000;--button-outline: #38383a}@media(prefers-color-scheme:light){:root{color:#000;background-color:#fff;--background: #ffffff;--surface: #f5f5f5;--text: #000000;--text-secondary: #666666;--border: #e0e0e0;--accent: #000000;--error: #ff3b30;--success: #34c759;--button-bg: #000000;--button-text: #ffffff;--button-outline: #e0e0e0}}*{box-sizing:border-box}body{margin:0;min-width:320px;background-color:var(--background);color:var(--text)}input,button{font-family:inherit}button{transition:transform .2s ease,box-shadow .2s ease}button:active{transform:translateY(1px)}:root{--bg-primary: #0a0a0a;--bg-secondary: #1a1a1a;--bg-tertiary: #2a2a2a;--text-primary: #ffffff;--text-secondary: #a0a0a0;--border: #333333;--accent: #3b82f6;--accent-hover: #2563eb;--success: #22c55e;--danger: #ef4444;--warning: #f59e0b}*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--bg-primary);color:var(--text-primary)}.app{min-height:100vh;padding-bottom:80px}.auth-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:24px;gap:24px}.auth-container h1{font-size:32px;font-weight:700;margin-bottom:8px}.auth-prompt{background:var(--bg-secondary);border:1px solid var(--border);border-radius:16px;padding:32px;text-align:center;max-width:400px;width:100%}.auth-prompt p{color:var(--text-secondary);margin-bottom:24px;font-size:15px;line-height:1.5}.auth-prompt button,.auth-container button{background:var(--accent);color:#fff;border:none;border-radius:12px;padding:12px 24px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s;width:100%}.auth-prompt button:hover,.auth-container button:hover{background:var(--accent-hover);transform:translateY(-1px)}.auth-prompt button:disabled{opacity:.5;cursor:not-allowed;transform:none}.device-auth{background:var(--bg-secondary);border:1px solid var(--border);border-radius:16px;padding:32px;max-width:500px;width:100%}.device-auth h2{font-size:24px;margin-bottom:16px}.device-auth p{color:var(--text-secondary);margin:12px 0;font-size:15px}.user-code{background:var(--bg-tertiary);border:2px solid var(--accent);border-radius:12px;padding:16px;font-size:32px;font-weight:700;letter-spacing:4px;text-align:center;margin:16px 0;font-family:Courier New,monospace}.device-auth a{color:var(--accent);text-decoration:none;word-break:break-all}.device-auth a:hover{text-decoration:underline}.waiting{margin-top:24px;color:var(--warning)!important;font-weight:500}.auth-container input[type=password],.auth-container input[type=text]{background:var(--bg-secondary);border:1px solid var(--border);border-radius:12px;padding:12px 16px;font-size:16px;color:var(--text-primary);width:100%;margin-bottom:16px}.auth-container input:focus{outline:none;border-color:var(--accent)}.auth-container .error{color:var(--danger);font-size:14px;margin-bottom:16px}.app-header{background:var(--bg-secondary);border-bottom:1px solid var(--border);padding:16px 24px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100}.app-header h1{font-size:24px;font-weight:700}.header-actions{display:flex;align-items:center;gap:12px}.search-input{background:var(--bg-tertiary);border:1px solid var(--border);border-radius:8px;padding:8px 12px;font-size:14px;color:var(--text-primary);width:200px}.search-input:focus{outline:none;border-color:var(--accent)}.logout-btn{background:transparent;border:1px solid var(--border);border-radius:8px;padding:8px 16px;font-size:14px;color:var(--text-primary);cursor:pointer;transition:all .2s}.logout-btn:hover{background:var(--bg-tertiary);border-color:var(--danger);color:var(--danger)}.sync-error{background:var(--danger);color:#fff;padding:12px 16px;margin:16px 24px;border-radius:8px;display:flex;align-items:center;justify-content:space-between;font-size:14px}.sync-error button{background:transparent;border:none;color:#fff;font-size:20px;cursor:pointer;padding:0 8px}.accounts-container{padding:24px;max-width:600px;margin:0 auto}.empty-state{text-align:center;padding:64px 24px}.empty-state p{color:var(--text-secondary);font-size:16px;margin-bottom:24px}.empty-state button{background:var(--accent);border:none;border-radius:12px;padding:12px 24px;font-size:16px;font-weight:600;color:#fff;cursor:pointer;transition:all .2s}.empty-state button:hover{background:var(--accent-hover);transform:translateY(-1px)}.account-card{background:var(--bg-secondary);border:1px solid var(--border);border-radius:16px;padding:20px;margin-bottom:16px;transition:all .1s ease-out;cursor:pointer;position:relative}.account-card:hover{transform:translateY(-2px)}.account-card.press-scale:active{transform:scale(.95)}.account-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.account-info{flex:1}.account-issuer{font-size:18px;font-weight:600;margin-bottom:4px}.account-label{font-size:14px;color:var(--text-secondary)}.delete-btn{background:transparent;border:1px solid var(--border);border-radius:8px;padding:6px 12px;font-size:18px;cursor:pointer;transition:all .2s}.delete-btn:hover{background:var(--danger);border-color:var(--danger);transform:scale(1.1)}.totp-display{display:flex;align-items:center;justify-content:space-between;gap:16px}.copied-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#000000b3;border-radius:12px;animation:fadeIn .2s ease-out;z-index:10}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.copied-badge{display:flex;align-items:center;gap:6px;padding:8px 16px;background:var(--accent);border-radius:20px;color:#fff}.copied-icon{font-size:16px;font-weight:700}.copied-text{font-size:14px;font-weight:600}.totp-icon{width:40px;height:40px;border-radius:8px;background:#8080801a;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}.totp-icon img{width:32px;height:32px}.totp-icon-fallback{font-size:24px;color:var(--text-secondary)}.totp-code-container{flex:1;display:flex;justify-content:center}.totp-code{font-size:28px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:3px;text-align:center;color:var(--text-primary)}.totp-code.expiring{color:var(--danger)}.totp-timer{position:relative;width:36px;height:36px;flex-shrink:0}.circular-progress{transform:rotate(-90deg)}.progress-circle-bg{fill:none;stroke:#80808026}.progress-circle{fill:none;stroke:var(--accent);stroke-linecap:round;transition:stroke-dashoffset 1s linear}.progress-circle.expiring{stroke:var(--danger)}.timer-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text-secondary)}.timer-text.expiring{color:var(--danger)}.progress-bar,.time-left{display:none}.fab{position:fixed;bottom:24px;right:24px;width:56px;height:56px;border-radius:50%;background:var(--accent);color:#fff;border:none;font-size:28px;font-weight:300;cursor:pointer;box-shadow:0 4px 12px #3b82f666;transition:all .2s;z-index:50}.fab:hover{background:var(--accent-hover);transform:scale(1.1);box-shadow:0 6px 16px #3b82f699}.add-account-form{padding:24px;max-width:500px;margin:0 auto}.add-account-form input{background:var(--bg-secondary);border:1px solid var(--border);border-radius:12px;padding:12px 16px;font-size:16px;color:var(--text-primary);width:100%;margin-bottom:16px}.add-account-form input:focus{outline:none;border-color:var(--accent)}.form-row{display:flex;gap:16px;margin-bottom:16px}.form-row label{flex:1;display:flex;flex-direction:column;gap:8px;font-size:14px;font-weight:500}.form-row input{margin-bottom:0}.add-account-form button{background:var(--accent);border:none;border-radius:12px;padding:12px 24px;font-size:16px;font-weight:600;color:#fff;cursor:pointer;width:100%;transition:all .2s}.add-account-form button:hover:not(:disabled){background:var(--accent-hover);transform:translateY(-1px)}.add-account-form button:disabled{opacity:.5;cursor:not-allowed}.app-header button{background:transparent;border:1px solid var(--border);border-radius:8px;padding:8px 16px;font-size:14px;color:var(--text-primary);cursor:pointer;transition:all .2s}.app-header button:hover{background:var(--bg-tertiary);border-color:var(--accent)}@media(max-width:640px){.search-input{width:120px}.totp-code{font-size:28px;letter-spacing:4px}.account-card{padding:16px}.form-row{flex-direction:column;gap:0}}