@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap";body{margin:0;padding:0}:root{--bg-color:#0b0f19;--bg-gradient:radial-gradient(circle at top, #161e31 0%, #0b0f19 100%);--panel-bg:#161d30a6;--panel-border:#24324f80;--panel-border-hover:#8b5cf666;--text-primary:#f3f4f6;--text-secondary:#9ca3af;--text-muted:#6b7280;--accent-violet:#8b5cf6;--accent-violet-glow:#8b5cf659;--accent-violet-hover:#a78bfa;--accent-emerald:#10b981;--accent-emerald-glow:#10b98140;--accent-emerald-hover:#34d399;--accent-rose:#f43f5e;--accent-rose-hover:#fb7185;--font-sans:"Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--border-radius-sm:8px;--border-radius-md:14px;--border-radius-lg:20px;--transition-fast:.2s cubic-bezier(.4, 0, .2, 1);--transition-normal:.3s cubic-bezier(.4, 0, .2, 1)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}body{background-color:var(--bg-color);background-image:var(--bg-gradient);color:var(--text-primary);font-family:var(--font-sans);background-attachment:fixed;min-height:100vh;line-height:1.5;overflow-x:hidden}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-color)}::-webkit-scrollbar-thumb{background:var(--panel-border);border-radius:var(--border-radius-sm)}::-webkit-scrollbar-thumb:hover{background:var(--accent-violet)}.app-container{flex-direction:column;max-width:1200px;min-height:100vh;margin:0 auto;padding:1.5rem 1rem;display:flex}.app-header{border-bottom:1px solid var(--panel-border);justify-content:space-between;align-items:center;margin-bottom:2rem;padding-bottom:1rem;display:flex}.brand{align-items:center;gap:.75rem;display:flex}.brand h1{background:linear-gradient(135deg,#a78bfa 0%,#10b981 100%);-webkit-text-fill-color:transparent;letter-spacing:-.025em;-webkit-background-clip:text;font-size:1.75rem;font-weight:700}.header-actions{align-items:center;gap:.75rem;display:flex}.login-wrapper{justify-content:center;align-items:center;min-height:85vh;padding:1rem;display:flex}.login-card{background:var(--panel-bg);-webkit-backdrop-filter:blur(16px);border:1px solid var(--panel-border);border-radius:var(--border-radius-lg);text-align:center;width:100%;max-width:420px;padding:2.5rem 2rem;animation:.4s ease-out fadeIn;box-shadow:0 20px 40px #0006,0 0 50px #8b5cf60d}.login-logo{margin-bottom:1rem;font-size:3rem;animation:3s ease-in-out infinite float;display:inline-block}.login-card h2{margin-bottom:.5rem;font-size:1.8rem;font-weight:600}.login-card p{color:var(--text-secondary);margin-bottom:2rem;font-size:.95rem}.form-group{text-align:left;margin-bottom:1.5rem}.form-group label{color:var(--text-secondary);margin-bottom:.5rem;font-size:.875rem;font-weight:500;display:block}.input-control{border:1px solid var(--panel-border);border-radius:var(--border-radius-md);width:100%;color:var(--text-primary);font-family:var(--font-sans);transition:var(--transition-fast);background:#0f172a99;padding:.875rem 1rem;font-size:1rem}.input-control:focus{border-color:var(--accent-violet);box-shadow:0 0 0 3px var(--accent-violet-glow);outline:none}.error-message{color:var(--accent-rose);align-items:center;gap:.25rem;margin-top:.5rem;font-size:.85rem;display:flex}.dashboard-grid{grid-template-columns:260px 1fr;align-items:start;gap:2rem;display:grid}.accounts-sidebar{background:var(--panel-bg);-webkit-backdrop-filter:blur(12px);border:1px solid var(--panel-border);border-radius:var(--border-radius-md);flex-direction:column;gap:1.25rem;padding:1.5rem;display:flex}.sidebar-title{justify-content:space-between;align-items:center;display:flex}.sidebar-title h3{color:var(--text-primary);font-size:1.1rem;font-weight:600}.accounts-list{flex-direction:column;gap:.5rem;display:flex}.account-item{border-radius:var(--border-radius-sm);width:100%;color:var(--text-secondary);font-family:var(--font-sans);text-align:left;cursor:pointer;transition:var(--transition-fast);background:0 0;border:1px solid #0000;justify-content:space-between;align-items:center;padding:.75rem 1rem;font-size:.95rem;display:flex}.account-item:hover{color:var(--text-primary);background:#ffffff08}.account-item.active{border-color:var(--accent-violet);color:var(--text-primary);background:#8b5cf61a;font-weight:500}.btn-delete-small{color:var(--text-muted);cursor:pointer;transition:var(--transition-fast);background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;padding:.25rem;display:flex}.btn-delete-small:hover{color:var(--accent-rose);background:#f43f5e1a}.search-hub{background:var(--panel-bg);-webkit-backdrop-filter:blur(12px);border:1px solid var(--panel-border);border-radius:var(--border-radius-md);flex-direction:column;gap:1rem;margin-bottom:1.5rem;padding:1.5rem;display:flex}.search-filters-row{grid-template-columns:1fr auto auto auto;align-items:center;gap:1rem;display:grid}.search-input-wrapper{width:100%;position:relative}.search-icon{color:var(--text-muted);pointer-events:none;position:absolute;top:50%;left:1rem;transform:translateY(-50%)}.search-control{padding-left:2.75rem}.select-control{border:1px solid var(--panel-border);border-radius:var(--border-radius-md);color:var(--text-primary);font-family:var(--font-sans);cursor:pointer;appearance:none;transition:var(--transition-fast);background:#0f172a99 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239ca3af' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E") right .75rem center/1.25rem no-repeat;padding:.875rem 2.5rem .875rem 1rem;font-size:.95rem}.select-control:focus{border-color:var(--accent-violet);outline:none}.btn{font-family:var(--font-sans);border-radius:var(--border-radius-md);cursor:pointer;transition:var(--transition-fast);white-space:nowrap;border:1px solid #0000;justify-content:center;align-items:center;gap:.5rem;padding:.875rem 1.25rem;font-size:.95rem;font-weight:600;display:inline-flex}.btn-primary{background:var(--accent-violet);color:#fff;box-shadow:0 4px 14px var(--accent-violet-glow)}.btn-primary:hover{background:var(--accent-violet-hover);box-shadow:0 6px 20px var(--accent-violet-glow);transform:translateY(-1px)}.btn-primary:active{transform:translateY(0)}.btn-secondary{border-color:var(--panel-border);color:var(--text-primary);background:#ffffff0d}.btn-secondary:hover{background:#ffffff1a}.btn-danger{color:var(--accent-rose);background:#f43f5e26;border:1px solid #f43f5e4d}.btn-danger:hover{background:var(--accent-rose);color:#fff}.btn-icon-only{border-radius:var(--border-radius-md);padding:.875rem}.products-section{flex-direction:column;gap:1rem;display:flex}.products-grid{grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:1.25rem;display:grid}.product-card{background:var(--panel-bg);-webkit-backdrop-filter:blur(12px);border:1px solid var(--panel-border);border-radius:var(--border-radius-md);transition:transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);flex-direction:column;justify-content:space-between;gap:1.25rem;padding:1.25rem;display:flex;position:relative;overflow:hidden;box-shadow:0 4px 6px #0000001a}.product-card:hover{border-color:var(--panel-border-hover);transform:translateY(-2px);box-shadow:0 10px 20px #0003,0 0 25px #8b5cf60d}.product-card-header{justify-content:space-between;align-items:flex-start;gap:.5rem;display:flex}.account-badge{color:var(--accent-violet-hover);text-overflow:ellipsis;white-space:nowrap;background:#8b5cf626;border:1px solid #8b5cf64d;border-radius:50px;max-width:140px;padding:.25rem .6rem;font-size:.75rem;font-weight:600;display:inline-block;overflow:hidden}.btn-card-delete{color:var(--text-muted);cursor:pointer;transition:var(--transition-fast);background:0 0;border:none;border-radius:4px;padding:.25rem}.btn-card-delete:hover{color:var(--accent-rose);background:#f43f5e1a}.product-info{flex-direction:column;gap:.5rem;display:flex}.product-name-row{justify-content:space-between;align-items:flex-start;gap:.5rem;display:flex}.product-name{color:var(--text-primary);word-break:break-word;font-size:1.15rem;font-weight:600;line-height:1.4}.btn-copy-action{border:1px solid var(--panel-border);color:var(--text-secondary);cursor:pointer;transition:var(--transition-fast);background:#ffffff0a;border-radius:8px;justify-content:center;align-items:center;padding:.5rem;display:inline-flex}.btn-copy-action:hover{border-color:var(--accent-violet);color:var(--accent-violet-hover);background:#8b5cf61a}.btn-copy-action:active{transform:scale(.95)}.product-meta{border-top:1px dashed var(--panel-border);flex-direction:column;gap:.5rem;padding-top:.75rem;display:flex}.id-label{color:var(--text-muted);justify-content:space-between;align-items:center;gap:.5rem;font-size:.8rem;display:flex}.id-val{color:var(--text-secondary);font-family:monospace;font-size:.85rem}.last-digits-row{background:#10b9810d;border:1px solid #10b98126;border-radius:8px;justify-content:space-between;align-items:center;padding:.5rem .75rem;display:flex}.last-digits-label{color:var(--accent-emerald-hover);font-size:.8rem;font-weight:500}.last-digits-val{color:var(--accent-emerald);letter-spacing:.05em;font-family:monospace;font-size:1.05rem;font-weight:700}.product-actions-row{grid-template-columns:1fr auto;gap:.5rem;margin-top:auto;display:grid}.btn-visit{width:100%;padding:.6rem 1rem;font-size:.85rem}.empty-state{text-align:center;background:var(--panel-bg);-webkit-backdrop-filter:blur(12px);border:1px solid var(--panel-border);border-radius:var(--border-radius-md);color:var(--text-secondary);padding:4rem 2rem}.empty-state-icon{opacity:.5;margin-bottom:1rem;font-size:3rem}.empty-state h4{color:var(--text-primary);margin-bottom:.5rem;font-size:1.25rem;font-weight:600}.modal-overlay{-webkit-backdrop-filter:blur(8px);z-index:1000;background:#070a12cc;justify-content:center;align-items:center;padding:1rem;animation:.25s ease-out fadeIn;display:flex;position:fixed;inset:0}.modal-content{border:1px solid var(--panel-border);border-radius:var(--border-radius-lg);background:#111827;width:100%;max-width:500px;padding:2rem;animation:.3s cubic-bezier(.34,1.56,.64,1) scaleIn;position:relative;box-shadow:0 25px 50px -12px #00000080}.modal-header{justify-content:space-between;align-items:center;margin-bottom:1.5rem;display:flex}.modal-header h3{font-size:1.25rem;font-weight:600}.btn-close{color:var(--text-secondary);cursor:pointer;transition:var(--transition-fast);background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:.25rem;display:flex}.btn-close:hover{color:var(--text-primary);background:#ffffff0d}.modal-actions{justify-content:flex-end;gap:.75rem;margin-top:2rem;display:flex}.toast-container{z-index:1100;pointer-events:none;flex-direction:column;gap:.75rem;display:flex;position:fixed;bottom:2rem;left:50%;transform:translate(-50%)}.toast{-webkit-backdrop-filter:blur(8px);color:#fff;background:#10b981f2;border:1px solid #fff3;border-radius:50px;align-items:center;gap:.5rem;padding:.75rem 1.25rem;font-size:.9rem;font-weight:600;animation:.3s cubic-bezier(.16,1,.3,1) slideUpFade,.3s ease-out 2.2s forwards fadeOut;display:flex;box-shadow:0 10px 15px -3px #10b9814d}.toast-icon{background:#fff3;border-radius:50%;padding:2px;display:inline-flex}@media (width<=900px){.dashboard-grid{grid-template-columns:1fr;gap:1.5rem}.accounts-sidebar{order:2;gap:1rem;padding:1rem}.accounts-list{scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;flex-direction:row;padding-bottom:.5rem;overflow-x:auto}.account-item{scroll-snap-align:start;flex:none;width:auto;padding:.6rem 1rem;font-size:.9rem}.btn-delete-small{margin-left:.5rem}}@media (width<=680px){.app-header{flex-direction:column;align-items:flex-start;gap:1rem}.header-actions{justify-content:space-between;width:100%}.brand h1{font-size:1.5rem}.search-filters-row{grid-template-columns:1fr;gap:.75rem}.select-control{width:100%}.products-grid{grid-template-columns:1fr}.modal-content{border-radius:var(--border-radius-md);max-width:100%;padding:1.5rem}.modal-actions{flex-direction:column;gap:.5rem}.modal-actions .btn{width:100%}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes slideUpFade{0%{opacity:0;transform:translate(-50%,1rem)}to{opacity:1;transform:translate(-50%)}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-8px)}to{transform:translateY(0)}}
