:root{--bg-primary: #f0f2f5;--bg-secondary: #ffffff;--bg-tertiary: #f8f9fa;--text-primary: #1a1a1a;--text-secondary: #6c757d;--text-muted: #adb5bd;--accent-primary: #667eea;--accent-secondary: #764ba2;--border-color: #e9ecef;--shadow-light: #ffffff;--shadow-dark: #d1d5db;--success-color: #10b981;--error-color: #ef4444;--warning-color: #f59e0b;--shadow-inset: inset 3px 3px 6px var(--shadow-dark), inset -3px -3px 6px var(--shadow-light);--shadow-outset: 3px 3px 6px var(--shadow-dark), -3px -3px 6px var(--shadow-light);--shadow-pressed: inset 4px 4px 8px var(--shadow-dark), inset -4px -4px 8px var(--shadow-light);--shadow-hover: 4px 4px 8px var(--shadow-dark), -4px -4px 8px var(--shadow-light)}[data-theme=dark]{--bg-primary: #1a1a1a;--bg-secondary: #2d2d2d;--bg-tertiary: #3a3a3a;--text-primary: #ffffff;--text-secondary: #b3b3b3;--text-muted: #888888;--accent-primary: #667eea;--accent-secondary: #764ba2;--border-color: #404040;--shadow-light: #404040;--shadow-dark: #0d0d0d;--success-color: #10b981;--error-color: #ef4444;--warning-color: #f59e0b}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Inter,sans-serif;background:var(--bg-primary);min-height:100vh;color:var(--text-primary);transition:background-color .3s ease,color .3s ease;line-height:1.6;font-weight:400}.container{max-width:1200px;margin:0 auto;padding:20px;min-height:100vh;display:flex;flex-direction:column}.hidden{display:none!important}.theme-toggle{position:absolute;top:20px;right:20px;z-index:1000}.theme-btn{width:50px;height:50px;border-radius:50%;border:none;background:var(--bg-secondary);box-shadow:var(--shadow-outset);cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;font-size:20px}.theme-btn:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px)}.theme-btn:active{box-shadow:var(--shadow-pressed);transform:translateY(0)}.loading-screen{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;background:var(--bg-primary)}.spinner{width:60px;height:60px;border-radius:50%;background:var(--bg-secondary);box-shadow:var(--shadow-inset);position:relative;margin-bottom:30px;animation:spin 2s linear infinite}.spinner:before{content:"";position:absolute;top:5px;left:5px;right:5px;bottom:5px;border-radius:50%;background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));animation:spin-reverse 2s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spin-reverse{0%{transform:rotate(360deg)}to{transform:rotate(0)}}.loading-screen p{color:var(--text-secondary);font-size:16px;font-weight:500}#auth-container{justify-content:center;align-items:center;background:var(--bg-primary);position:relative;min-height:auto;padding:40px 20px}.auth-card{background:var(--bg-secondary);padding:40px;border-radius:20px;box-shadow:var(--shadow-outset);width:100%;max-width:400px;position:relative}.auth-header{text-align:center;margin-bottom:35px}.logo-container{display:flex;flex-direction:column;align-items:center;margin-bottom:15px}.logo-icon{width:60px;height:60px;background:var(--bg-secondary);border-radius:50%;box-shadow:var(--shadow-inset);display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:16px}.auth-header h1{font-size:28px;font-weight:700;color:var(--text-primary);margin:0}.auth-subtitle{color:var(--text-secondary);font-size:16px;font-weight:400}.input-group{position:relative;margin-bottom:20px}.input-group input{width:100%;padding:15px 48px 15px 20px;border:none;border-radius:12px;background:var(--bg-secondary);box-shadow:var(--shadow-inset);font-size:15px;color:var(--text-primary);transition:all .3s ease;font-weight:500;height:50px;line-height:20px}.input-group input::placeholder{color:var(--text-muted)}.input-group input:focus{outline:none;box-shadow:var(--shadow-inset),0 0 0 2px #667eea33}.input-icon{position:absolute;right:15px;top:0;bottom:0;margin:auto 0;font-size:16px;color:var(--text-muted);display:flex;align-items:center;justify-content:center;width:20px;height:20px;line-height:1;pointer-events:none}.auth-buttons{display:flex;flex-direction:column;gap:16px}.btn-primary,.btn-secondary{width:100%;padding:14px 20px;border:none;border-radius:12px;font-size:15px;font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:space-between;position:relative;height:48px}.btn-primary{background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));color:#fff;box-shadow:var(--shadow-outset)}.btn-primary:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px)}.btn-primary:active{transform:translateY(0)}.btn-secondary{background:var(--bg-secondary);color:var(--text-primary);box-shadow:var(--shadow-outset)}.btn-secondary:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px)}.btn-secondary:active{transform:translateY(0)}.btn-icon{font-size:18px;opacity:.8}.divider{display:flex;align-items:center;justify-content:center;position:relative;margin:10px 0}.divider:before{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:var(--border-color)}.divider span{background:var(--bg-secondary);padding:0 20px;color:var(--text-muted);font-size:14px;font-weight:500}button.loading{position:relative;color:transparent!important;pointer-events:none}.btn-primary.loading .btn-text,.btn-primary.loading .btn-icon,.btn-secondary.loading .btn-text,.btn-secondary.loading .btn-icon{opacity:0}button.loading:after{content:"";position:absolute;top:50%;left:50%;width:24px;height:24px;border:2px solid rgba(255,255,255,.3);border-top:2px solid white;border-radius:50%;animation:spin 1s linear infinite;transform:translate(-50%,-50%)}.btn-secondary.loading:after{border:2px solid var(--text-muted);border-top:2px solid var(--text-primary)}.app-header{display:flex;justify-content:space-between;align-items:center;background:var(--bg-secondary);padding:25px 30px;border-radius:20px;margin-bottom:30px;box-shadow:var(--shadow-outset)}.app-header h1{color:var(--text-primary);font-size:24px;font-weight:700}.header-actions{display:flex;align-items:center;gap:15px}.header-actions .theme-btn{width:45px;height:45px;font-size:16px}.header-actions button{padding:12px 24px;border:none;border-radius:12px;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:14px}.header-actions button.primary{background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));color:#fff;box-shadow:var(--shadow-outset)}.header-actions button.primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover)}.header-actions button.secondary{background:var(--bg-secondary);color:var(--text-primary);box-shadow:var(--shadow-outset)}.header-actions button.secondary:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover)}.main-content{flex:1}.platforms-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:25px;margin-bottom:30px}.platform-card{background:var(--bg-secondary);padding:30px;border-radius:20px;box-shadow:var(--shadow-outset);transition:all .3s ease,opacity .2s;cursor:pointer}.platform-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover)}.platform-card h3{margin-bottom:12px;color:var(--text-primary);font-size:20px;font-weight:600}.platform-card .account-count{color:var(--text-secondary);font-size:14px;font-weight:500;margin-bottom:8px}.platform-card .last-updated{color:var(--text-muted);font-size:12px;font-weight:400}.modal{position:fixed;top:0;left:0;right:0;bottom:0;background:#0009;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:flex;justify-content:center;align-items:center;z-index:1000;padding:20px}.modal-content{background:var(--bg-secondary);padding:35px;border-radius:24px;width:100%;max-width:650px;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-outset);position:relative}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}.modal-header h3{color:var(--text-primary);font-size:22px;font-weight:700}.modal-header-actions{display:flex;gap:10px;align-items:center}#salt-modal{z-index:2000;background:#000c}#salt-modal .modal-content{border:3px solid var(--accent-primary);box-shadow:var(--shadow-outset),0 20px 60px #667eea33;animation:saltModalAppear .3s ease-out}@keyframes saltModalAppear{0%{transform:scale(.8) translateY(-30px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}input[type=text],input[type=email],input[type=password]{width:100%;padding:16px 20px;margin-bottom:20px;border:none;border-radius:14px;background:var(--bg-secondary);box-shadow:var(--shadow-inset);font-size:15px;color:var(--text-primary);font-weight:500;transition:all .3s ease}input[type=text]:focus,input[type=email]:focus,input[type=password]:focus{outline:none;box-shadow:var(--shadow-inset),0 0 0 3px #667eea1a}input::placeholder{color:var(--text-muted)}.modal-loader{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(var(--bg-secondary),.95);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:flex;justify-content:center;align-items:center;border-radius:24px;z-index:1000}.modal-loader-overlay{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.modal-loader .spinner{width:50px;height:50px;margin-bottom:20px}.modal-loader p{color:var(--accent-primary);font-weight:600;font-size:16px;margin:0}.account-entry{background:var(--bg-tertiary);padding:25px;border-radius:16px;margin-bottom:20px;box-shadow:var(--shadow-inset)}.account-entry-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.account-label{font-weight:600;color:var(--text-primary);font-size:16px}.icon-btn{background:var(--bg-secondary);border:none;font-size:16px;padding:10px;cursor:pointer;border-radius:10px;margin:0;width:auto;min-width:40px;height:40px;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-outset);transition:all .3s ease}.icon-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover)}.icon-btn:active{transform:translateY(0);box-shadow:var(--shadow-pressed)}.delete-btn{color:var(--error-color)}.delete-btn:hover{background:#ef44441a}.warning{color:var(--error-color);font-size:14px;margin-bottom:20px;padding:15px 20px;background:#ef44441a;border-radius:12px;border-left:4px solid var(--error-color);font-weight:500}@media (max-width: 768px){.container{padding:15px}.auth-card{padding:35px 25px;border-radius:20px}.theme-toggle{top:15px;right:15px}.theme-btn{width:45px;height:45px;font-size:18px}.app-header{flex-direction:column;gap:20px;text-align:center;padding:20px}.header-actions{width:100%;justify-content:center}.platforms-grid{grid-template-columns:1fr;gap:20px}.modal-content{padding:25px 20px;margin:15px;border-radius:20px}.input-group input{padding:16px 20px 16px 45px}.btn-primary,.btn-secondary{padding:16px 20px}}@media (max-width: 768px){.modal-content{margin:15px;max-height:calc(100vh - 30px)}.field-display{flex-direction:column;align-items:stretch;gap:10px;padding:14px}.field-label{min-width:auto;font-size:14px;font-weight:600}.field-value{margin:0;padding:12px;font-size:14px}}@media (max-width: 480px){.auth-card{padding:30px 20px}.logo-icon{width:60px;height:60px;font-size:24px}.auth-header h1{font-size:24px}.platform-card{padding:25px 20px}.modal-content{margin:10px;max-height:calc(100vh - 20px);overflow-y:auto}.account-display{padding:16px;margin-bottom:16px}.account-header{margin-bottom:16px}.account-header h4{font-size:16px}.field-display{flex-direction:column;align-items:stretch;gap:8px;padding:12px}.field-label{min-width:auto;font-size:13px;font-weight:700;color:var(--text-primary)}.field-value{margin:0;padding:10px 12px;font-size:13px;word-break:break-all}.password-display{letter-spacing:1px;font-size:16px;text-align:center;padding:12px}.field-display .copy-btn,.field-display .password-view-toggle{margin-top:8px;padding:10px 16px;font-size:13px;align-self:center;min-width:80px;border-radius:8px;font-weight:500}.copy-btn{background:var(--accent-primary);color:#fff;border:none;box-shadow:var(--shadow-outset)}.copy-btn:hover{box-shadow:var(--shadow-hover);transform:translateY(-1px)}.password-view-toggle{background:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border-color);box-shadow:var(--shadow-outset);margin-bottom:6px}.password-view-toggle:hover{box-shadow:var(--shadow-hover);transform:translateY(-1px)}@supports not selector(:has(*)){.field-display .password-view-toggle{display:inline-block;margin-right:8px;margin-bottom:0;vertical-align:top}.field-display .password-view-toggle+.copy-btn{display:inline-block;margin-top:8px;vertical-align:top}}}.password-field-container{position:relative;display:flex;align-items:center;margin-bottom:15px}.password-field-container input{flex:1;margin-bottom:0;padding-right:50px}.password-toggle-btn{position:absolute;right:10px;background:transparent;border:none;font-size:16px;padding:8px;cursor:pointer;border-radius:6px;display:flex;align-items:center;justify-content:center;width:36px;height:36px;color:var(--text-muted)}.password-toggle-btn:hover{background:#667eea1a;color:var(--text-primary)}.modal-actions{display:flex;gap:15px;margin-top:30px}.modal-actions button{flex:1;padding:14px 20px;border:none;border-radius:12px;font-weight:600;cursor:pointer;transition:all .3s ease}.modal-actions .primary{background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));color:#fff;box-shadow:var(--shadow-outset)}.modal-actions .primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover)}.modal-actions .secondary{background:var(--bg-secondary);color:var(--text-primary);box-shadow:var(--shadow-outset)}.modal-actions .secondary:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover)}.account-display{background:var(--bg-tertiary);padding:25px;border-radius:16px;margin-bottom:20px;box-shadow:var(--shadow-inset)}.account-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--border-color)}.account-header h4{color:var(--text-primary);margin:0;font-size:18px;font-weight:600}.field-display{display:flex;align-items:center;margin-bottom:16px;padding:12px 16px;background:var(--bg-secondary);border-radius:12px;box-shadow:var(--shadow-outset);gap:12px}.field-label{font-weight:600;color:var(--text-secondary);min-width:100px;font-size:14px}.field-value{font-family:SF Mono,Monaco,Inconsolata,Roboto Mono,monospace;background:var(--bg-tertiary);padding:8px 12px;border-radius:8px;flex:1;word-break:break-all;font-size:14px;color:var(--text-primary);box-shadow:var(--shadow-inset)}.password-display{font-family:SF Mono,Monaco,Inconsolata,Roboto Mono,monospace;letter-spacing:2px}.copy-btn{background:var(--accent-primary);color:#fff;border:none;padding:6px 12px;border-radius:6px;font-size:12px;font-weight:500;cursor:pointer;transition:all .3s ease;box-shadow:var(--shadow-outset)}.copy-btn:hover{background:var(--accent-secondary);transform:translateY(-1px)}.password-view-toggle{background:var(--bg-secondary);border:none;border-radius:6px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;box-shadow:var(--shadow-outset);font-size:14px}.password-view-toggle:hover{transform:translateY(-1px);box-shadow:var(--shadow-hover)}.account-delete-btn{color:var(--error-color)}.account-delete-btn:hover{background:#ef44441a}.custom-field{background:var(--bg-tertiary);padding:16px;border-radius:12px;margin-bottom:16px;box-shadow:var(--shadow-inset)}.custom-field-value-container{position:relative;display:flex;align-items:center}.custom-field-value-container input{flex:1;margin-bottom:0;padding-right:45px}.custom-field-toggle{position:absolute;right:8px;background:transparent;border:none;font-size:16px;padding:6px;cursor:pointer;border-radius:4px;color:var(--text-muted)}.custom-field-toggle:hover{background:#667eea1a;color:var(--text-primary)}.custom-field-controls{display:flex;justify-content:space-between;align-items:center;margin-top:12px}.field-type-toggle{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13px}.field-type-toggle input[type=checkbox]{margin:0;width:auto;box-shadow:none}.field-type-label{color:var(--text-secondary);-webkit-user-select:none;user-select:none}.remove-field-btn{background:var(--error-color);color:#fff;padding:6px 12px;border:none;border-radius:8px;font-size:12px;font-weight:500;cursor:pointer;transition:all .3s ease}.remove-field-btn:hover{background:#dc2626;transform:translateY(-1px)}.add-field-btn,.add-account-btn{background:var(--success-color);color:#fff;padding:10px 16px;border:none;border-radius:8px;font-weight:500;cursor:pointer;transition:all .3s ease;box-shadow:var(--shadow-outset)}.add-field-btn:hover,.add-account-btn:hover{background:#059669;transform:translateY(-1px)}.add-account-btn{width:100%;margin-bottom:20px}