@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Inter:wght@400;500;600&display=swap";:root{--bg-base:#09090b;--bg-surface:#18181b;--bg-elevated:#27272a;--bg-hover:#ffffff14;--bg-input:#18181b;--accent-1:#3b82f6;--accent-2:#8b5cf6;--accent-hover:#60a5fa;--accent-glow:#3b82f666;--danger:#ef4444;--danger-hover:#f87171;--success:#10b981;--text-primary:#fafafa;--text-secondary:#a1a1aa;--text-muted:#71717a;--border:#27272a;--border-focus:#3b82f6;--gradient-1:#3b82f626;--gradient-2:#8b5cf626;--radius-sm:6px;--radius-md:12px;--radius-lg:16px;--radius-full:9999px;--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 4px 6px -1px #0000001a, 0 2px 4px -1px #0000000f;--shadow-lg:0 10px 15px -3px #0000001a, 0 4px 6px -2px #0000000d;--shadow-glow:0 0 20px var(--accent-glow);--font-heading:"Outfit", sans-serif;--font-body:"Inter", sans-serif}:root:not(.dark){--bg-base:#f8fafc;--bg-surface:#ffffffd9;--bg-elevated:#fff;--bg-hover:#00000008;--bg-input:#f1f5f9;--accent-1:#4f46e5;--accent-2:#7c3aed;--accent-hover:#4338ca;--accent-glow:#4f46e540;--danger:#e11d48;--danger-hover:#be123c;--success:#059669;--text-primary:#0f172a;--text-secondary:#475569;--text-muted:#94a3b8;--border:#00000014;--border-focus:#4f46e5;--gradient-1:#4f46e50d;--gradient-2:#7c3aed0d;--shadow-sm:0 4px 6px -1px #0000000d, 0 2px 4px -1px #00000008;--shadow-md:0 10px 25px -5px #00000014, 0 8px 10px -6px #0000000a;--shadow-lg:0 20px 25px -5px #0000001a, 0 10px 10px -5px #0000000a}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;font-family:var(--font-body);background:var(--bg-base);color:var(--text-primary);-webkit-font-smoothing:antialiased;transition:background-color .4s,color .4s}body:before{content:"";background:radial-gradient(circle at 15% 50%, var(--gradient-1), transparent 30%), radial-gradient(circle at 85% 30%, var(--gradient-2), transparent 30%);z-index:-1;pointer-events:none;position:fixed;inset:0}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);letter-spacing:-.02em;font-weight:600}a{color:var(--accent-1);text-decoration:none;transition:all .2s}a:hover{color:var(--accent-hover)}.text-gradient{background:linear-gradient(135deg, var(--accent-1), var(--accent-2));-webkit-text-fill-color:transparent;-webkit-background-clip:text}.theme-switch-wrapper{cursor:pointer;align-items:center;margin-right:16px;display:flex}.theme-switch{background-color:var(--border-color,#d1d5db);border-radius:24px;width:44px;height:24px;transition:background-color .3s;position:relative;box-shadow:inset 0 1px 3px #0000001a}.theme-switch.active{background-color:var(--accent-1)}.theme-switch-thumb{background-color:#fff;border-radius:50%;width:18px;height:18px;transition:transform .3s cubic-bezier(.4,0,.2,1);position:absolute;top:3px;left:3px;box-shadow:0 1px 3px #0003}.theme-switch.active .theme-switch-thumb{transform:translate(20px)}::view-transition-old(root){mix-blend-mode:normal;animation:none}::view-transition-new(root){mix-blend-mode:normal;animation:none}:root.dark::view-transition-new(root){z-index:1}:root.dark::view-transition-old(root){z-index:0}:root:not(.dark)::view-transition-new(root){z-index:1}:root:not(.dark)::view-transition-old(root){z-index:0}.theme-toggle-btn{position:relative;overflow:hidden}.theme-toggle-btn svg{transition:transform .5s cubic-bezier(.4,0,.2,1),opacity .5s}.icon-moon{opacity:0;transform:rotate(-90deg)scale(0)}:root:not(.dark) .icon-moon,.icon-sun{opacity:1;transform:rotate(0)scale(1)}:root:not(.dark) .icon-sun{opacity:0;transform:rotate(90deg)scale(0)}.auth-page{justify-content:center;align-items:center;min-height:100vh;padding:24px;display:flex}.auth-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);width:100%;max-width:440px;box-shadow:var(--shadow-md);-webkit-backdrop-filter:blur(24px);padding:48px 40px;animation:.6s cubic-bezier(.16,1,.3,1) forwards fadeUp}@keyframes fadeUp{0%{opacity:0;transform:translateY(30px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}.auth-logo{text-align:center;margin-bottom:40px}.auth-logo-icon{filter:drop-shadow(0 8px 16px var(--accent-glow));margin-bottom:16px;font-size:56px;line-height:1;animation:4s ease-in-out infinite float;display:inline-block}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.auth-title{margin-bottom:8px;font-size:28px}.auth-subtitle{color:var(--text-secondary);font-size:15px}.auth-form,.modal-form{flex-direction:column;gap:20px;display:flex}.form-group{flex-direction:column;gap:8px;display:flex}.form-group label{font-family:var(--font-heading);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;font-size:13px;font-weight:500}.form-group input{background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text-primary);font-size:15px;font-family:var(--font-body);outline:none;padding:14px 16px;transition:all .25s;box-shadow:inset 0 2px 4px #00000005}.form-group input:focus{border-color:var(--accent-1);box-shadow:0 0 0 4px var(--accent-glow), inset 0 2px 4px #00000005;background:var(--bg-elevated)}.form-group input::placeholder{color:var(--text-muted)}.form-group input:-webkit-autofill{transition:background-color 5000s ease-in-out;-webkit-box-shadow:0 0 0 30px var(--bg-input) inset!important;-webkit-text-fill-color:var(--text-primary)!important}.form-group input:-webkit-autofill:hover{transition:background-color 5000s ease-in-out;-webkit-box-shadow:0 0 0 30px var(--bg-input) inset!important;-webkit-text-fill-color:var(--text-primary)!important}.form-group input:-webkit-autofill:focus{transition:background-color 5000s ease-in-out;-webkit-box-shadow:0 0 0 30px var(--bg-input) inset!important;-webkit-text-fill-color:var(--text-primary)!important}.form-group input:-webkit-autofill:active{transition:background-color 5000s ease-in-out;-webkit-box-shadow:0 0 0 30px var(--bg-input) inset!important;-webkit-text-fill-color:var(--text-primary)!important}.password-input-wrapper{align-items:center;display:flex;position:relative}.password-input-wrapper input{width:100%;padding-right:48px}.btn-toggle-password{color:var(--text-muted);cursor:pointer;border-radius:var(--radius-full);background:0 0;border:none;justify-content:center;align-items:center;padding:6px;font-size:18px;transition:all .2s;display:flex;position:absolute;right:12px}.btn-toggle-password:hover{color:var(--text-primary);background:var(--bg-hover)}.btn-primary{background:linear-gradient(135deg, var(--accent-1), var(--accent-2));color:#fff;border-radius:var(--radius-md);font-size:16px;font-weight:600;font-family:var(--font-heading);cursor:pointer;box-shadow:0 4px 12px var(--accent-glow);border:none;justify-content:center;align-items:center;gap:10px;padding:14px 24px;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex}.btn-primary:hover:not(:disabled){box-shadow:0 8px 20px var(--accent-glow);transform:translateY(-2px)}.btn-primary:active:not(:disabled){transform:translateY(0)}.btn-primary:disabled{opacity:.6;cursor:not-allowed;box-shadow:none}.btn-secondary{background:var(--bg-elevated);color:var(--text-primary);border:1px solid var(--border);border-radius:var(--radius-md);font-weight:500;font-family:var(--font-heading);cursor:pointer;padding:12px 24px;transition:all .2s}.btn-secondary:hover{background:var(--bg-hover);border-color:var(--text-secondary)}.btn-sm{background:var(--bg-elevated);color:var(--text-secondary);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;padding:6px 14px;font-size:13px;font-weight:500;transition:all .2s}.btn-sm:hover:not(:disabled){background:var(--bg-hover);color:var(--text-primary)}.btn-edit{color:var(--accent-1);background:#6366f11a;border-color:#0000}.btn-edit:hover{background:#6366f133;border-color:#0000}.btn-delete{color:var(--danger);background:#f43f5e1a;border-color:#0000}.btn-delete:hover{background:#f43f5e33;border-color:#0000}.btn-copied{color:#10b981!important;background:#10b9811f!important;border-color:#10b9814d!important}.btn-copied:hover{background:#10b98133!important}.btn-icon{background:var(--bg-elevated);border:1px solid var(--border);color:var(--text-secondary);cursor:pointer;border-radius:var(--radius-full);justify-content:center;align-items:center;width:36px;height:36px;font-size:18px;transition:all .2s;display:flex}.btn-icon:hover{background:var(--bg-hover);color:var(--text-primary);transform:scale(1.05)}.btn-logout{color:var(--danger);border-radius:var(--radius-full);font-size:14px;font-weight:600;font-family:var(--font-heading);cursor:pointer;background:#f43f5e1a;border:none;padding:8px 20px;transition:all .2s}.btn-logout:hover{background:var(--danger);color:#fff}.navbar{z-index:100;background:var(--bg-surface);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;height:72px;padding:0 40px;display:flex;position:sticky;top:0}.navbar-brand{align-items:center;gap:12px;display:flex}.navbar-icon{filter:drop-shadow(0 2px 8px var(--accent-glow));font-size:28px}.navbar-title{letter-spacing:-.02em;font-size:20px;font-weight:700}.navbar-right{align-items:center;gap:20px;display:flex}.navbar-user{color:var(--text-secondary);align-items:center;gap:8px;font-size:14px;font-weight:500;display:flex}.dashboard{flex-direction:column;min-height:100vh;display:flex}.dashboard-content{flex:1;width:100%;max-width:1400px;margin:0 auto;padding:40px;animation:.5s fadeUp}.table-container{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);overflow:hidden}.table-header{border-bottom:1px solid var(--border);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding:24px 32px;display:flex}.table-title{align-items:center;gap:12px;font-size:22px;display:flex}.badge{background:var(--bg-elevated);border:1px solid var(--border);color:var(--text-secondary);border-radius:var(--radius-full);padding:4px 12px;font-size:13px;font-weight:600}.table-header-actions{flex-wrap:wrap;align-items:center;gap:16px;display:flex}.search-input{background:var(--bg-input) url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%2394a3b8\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"></circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line></svg>") no-repeat 16px center;border:1px solid var(--border);border-radius:var(--radius-full);color:var(--text-primary);width:280px;padding:12px 20px 12px 44px;font-size:14px;transition:all .25s}.search-input:focus{border-color:var(--accent-1);width:340px;box-shadow:0 0 0 3px var(--accent-glow);background-color:var(--bg-elevated)}.table-scroll{padding:0 16px;overflow-x:auto}.cred-table{border-collapse:separate;border-spacing:0 8px;width:100%}.cred-table th{text-align:left;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);font-size:12px;font-weight:600;font-family:var(--font-heading);padding:16px 24px}.credential-row td{background:var(--bg-elevated);vertical-align:middle;border-top:1px solid #0000;border-bottom:1px solid #0000;padding:20px 24px;transition:all .2s}.credential-row td:first-child{border-top-left-radius:var(--radius-md);border-bottom-left-radius:var(--radius-md);border-left:1px solid #0000}.credential-row td:last-child{border-top-right-radius:var(--radius-md);border-bottom-right-radius:var(--radius-md);border-right:1px solid #0000}.credential-row:hover td{background:var(--bg-hover);border-color:var(--border);transform:scale(1.002)}.site-link{text-overflow:ellipsis;white-space:nowrap;max-width:280px;font-weight:600;display:inline-block;overflow:hidden}.password-cell{flex-direction:column;gap:4px;display:flex}.password-mask{color:var(--text-secondary);letter-spacing:4px;background:#0000001a;border-radius:6px;width:fit-content;padding:4px 12px;font-family:monospace;font-size:18px;display:inline-block}.pw-error{color:var(--danger);font-size:12px;font-weight:500}.action-btns{align-items:center;gap:10px;display:flex}.modal-overlay{z-index:200;-webkit-backdrop-filter:blur(12px);background:#0009;justify-content:center;align-items:center;padding:20px;animation:.25s fadeIn;display:flex;position:fixed;inset:0}.modal{-webkit-backdrop-filter:blur(24px);background:linear-gradient(145deg,#161928f7 0%,#0f111cf7 100%);border:1px solid #6366f140;border-radius:24px;width:100%;max-width:480px;padding:0;animation:.35s cubic-bezier(.16,1,.3,1) scaleUp;position:relative;overflow:hidden;box-shadow:0 0 0 1px #6366f114,0 25px 50px -12px #0009,0 0 80px -20px #6366f133}.modal:before{content:"";background:linear-gradient(90deg, var(--accent-1), var(--accent-2), var(--accent-1));background-size:200%;border-radius:24px 24px 0 0;height:2px;animation:3s linear infinite shimmer;position:absolute;top:0;left:0;right:0}@keyframes shimmer{0%{background-position:0%}to{background-position:200%}}.modal>*{position:relative}.modal-inner{padding:36px 40px 40px}@keyframes scaleUp{0%{opacity:0;transform:scale(.92)translateY(24px)}to{opacity:1;transform:scale(1)translateY(0)}}.modal-header{justify-content:space-between;align-items:center;margin-bottom:28px;padding:28px 40px 0;display:flex}.modal-header h2{background:linear-gradient(135deg,#fff 40%,#fff9);-webkit-text-fill-color:transparent;letter-spacing:-.03em;-webkit-background-clip:text;background-clip:text;font-size:22px;font-weight:700}.modal-close{color:var(--text-muted);cursor:pointer;background:#ffffff0f;border:1px solid #ffffff1a;border-radius:50%;justify-content:center;align-items:center;width:34px;height:34px;font-size:14px;transition:all .2s;display:flex}.modal-close:hover{color:var(--danger);background:#f43f5e26;border-color:#f43f5e66;transform:rotate(90deg)}.modal-form{flex-direction:column;gap:20px;padding:0 40px 32px;display:flex}.modal-form .form-group label{letter-spacing:.1em;text-transform:uppercase;color:#94a3b8b3;margin-bottom:6px;font-size:11px;font-weight:600}.modal-form .form-group input{color:var(--text-primary);font-size:14px;font-family:var(--font-body);background:#ffffff0d;border:1px solid #ffffff1a;border-radius:12px;outline:none;width:100%;padding:14px 16px;transition:all .25s}.modal-form .form-group input:hover{background:#ffffff12;border-color:#ffffff2e}.modal-form .form-group input:focus{border-color:var(--accent-1);background:#6366f114;box-shadow:0 0 0 3px #6366f126,inset 0 1px #ffffff0d}.modal-form .form-group input::placeholder{color:#64748bb3}.modal-form .form-group input:-webkit-autofill{caret-color:var(--text-primary);-webkit-text-fill-color:var(--text-primary)!important;-webkit-box-shadow:inset 0 0 0 30px #141623fa!important}.modal-form .form-group input:-webkit-autofill:hover{caret-color:var(--text-primary);-webkit-text-fill-color:var(--text-primary)!important;-webkit-box-shadow:inset 0 0 0 30px #141623fa!important}.modal-form .form-group input:-webkit-autofill:focus{caret-color:var(--text-primary);-webkit-text-fill-color:var(--text-primary)!important;-webkit-box-shadow:inset 0 0 0 30px #141623fa!important}.modal-form .password-input-wrapper input{padding-right:48px}.hint{color:var(--text-muted);text-transform:none;letter-spacing:0;margin-left:4px;font-size:10px;font-weight:400}.modal-actions{border-top:1px solid #ffffff0f;justify-content:flex-end;gap:12px;margin-top:8px;padding-top:8px;display:flex}.modal-actions .btn-secondary{color:var(--text-secondary);cursor:pointer;background:#ffffff0f;border:1px solid #ffffff1a;border-radius:10px;padding:11px 22px;font-size:14px;font-weight:500;transition:all .2s}.modal-actions .btn-secondary:hover{color:var(--text-primary);background:#ffffff1a}.modal-actions .btn-primary{border-radius:10px;padding:11px 24px;font-size:14px;box-shadow:0 4px 15px #6366f159}.modal-sm{max-width:380px}.modal-sm h2{padding:28px 32px 0;font-size:18px}.modal-sm p{color:var(--text-secondary);padding:8px 32px 20px;font-size:14px;line-height:1.5}.modal-sm .modal-actions{border-top:none;margin-top:0;padding:0 32px 28px}.auth-error{border-left:4px solid var(--danger);color:var(--danger);border-radius:0 var(--radius-sm) var(--radius-sm) 0;background:#f43f5e1a;padding:14px 16px;font-size:14px;font-weight:500;animation:.4s shake}.auth-success{border-left:4px solid var(--success);color:var(--success);border-radius:0 var(--radius-sm) var(--radius-sm) 0;background:#10b9811a;padding:14px 16px;font-size:14px;font-weight:500}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}.spinner{border:3px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:20px;height:20px;animation:.8s cubic-bezier(.4,0,.2,1) infinite spin;display:inline-block}.spinner-sm{border:2px solid var(--border);border-top-color:var(--accent-1);border-radius:50%;width:14px;height:14px;animation:.8s linear infinite spin;display:inline-block}.spinner-lg{border:4px solid var(--border);border-top-color:var(--accent-1);border-radius:50%;width:48px;height:48px;animation:.8s cubic-bezier(.4,0,.2,1) infinite spin}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes spin{to{transform:rotate(360deg)}}.empty-state{flex-direction:column;justify-content:center;align-items:center;gap:20px;padding:100px 20px;display:flex}.empty-icon{opacity:.8;filter:drop-shadow(0 10px 20px #0000001a);font-size:72px;animation:6s ease-in-out infinite float}.empty-state p{color:var(--text-muted);font-size:18px;font-weight:500}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{border-radius:var(--radius-full);background:#94a3b84d}.pagination{justify-content:center;align-items:center;gap:16px;padding:20px 0;display:flex}.pagination span{color:var(--text-secondary);font-size:14px}.dashboard-error{margin-bottom:24px}.spin-refresh{animation:1s linear infinite spin}
