:root{--primary: #6366f1;--primary-dark: #4f46e5;--primary-light: #e0e7ff;--danger: #ef4444;--success: #22c55e;--gray-50: #f9fafb;--gray-100: #f3f4f6;--gray-200: #e5e7eb;--gray-400: #9ca3af;--gray-600: #4b5563;--gray-900: #111827;--radius: 12px;--shadow: 0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.06)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:var(--gray-50);color:var(--gray-900);line-height:1.5}.login-container,.register-container{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#667eea,#764ba2);padding:20px}.login-form,.register-form{background:#fff;border-radius:20px;padding:48px 40px;width:100%;max-width:420px;box-shadow:0 24px 64px #00000026}.login-form h2,.register-form h2{font-size:1.75rem;font-weight:700;color:var(--gray-900);margin-bottom:20px;text-align:center}.form-group{margin-bottom:20px}.form-group label{display:block;font-size:.875rem;font-weight:600;color:var(--gray-600);margin-bottom:8px}.form-control{width:100%;padding:12px 16px;border:1.5px solid var(--gray-200);border-radius:10px;font-size:.95rem;transition:all .2s;background:var(--gray-50)}.form-control:focus{outline:none;border-color:var(--primary);background:#fff;box-shadow:0 0 0 3px #6366f11f}.btn{padding:12px 20px;border:none;border-radius:10px;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .2s}.btn-primary{background:var(--primary);color:#fff;width:100%}.btn-primary:hover{background:var(--primary-dark);transform:translateY(-1px);box-shadow:0 4px 12px #6366f159}.btn-block{width:100%;display:block}.text-center{text-align:center}.form-footer{text-align:center;margin-top:20px;color:var(--gray-400);font-size:.875rem}.form-footer a{color:var(--primary);font-weight:600;text-decoration:none}.error-message{background:#fef2f2;color:var(--danger);padding:10px 14px;border-radius:8px;font-size:.875rem;margin-bottom:16px;border:1px solid #fecaca}.logout-button{padding:8px 16px;background:#fff;color:var(--danger);border:1.5px solid var(--danger);border-radius:8px;font-size:.875rem;font-weight:600;cursor:pointer;transition:all .2s;position:absolute;top:20px;right:20px}.logout-button:hover{background:var(--danger);color:#fff}.dashboard{max-width:900px;margin:0 auto;padding:32px 20px;position:relative}.dashboard h1{font-size:1.5rem;font-weight:700;color:var(--gray-900);margin-bottom:24px}.product-form{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:28px;margin-bottom:24px;border:1px solid var(--gray-200)}.product-form h2{font-size:1.1rem;font-weight:700;color:var(--primary);margin-bottom:20px}.product-form input,.product-form select{width:100%;padding:11px 14px;border:1.5px solid var(--gray-200);border-radius:10px;font-size:.95rem;background:var(--gray-50);transition:all .2s;margin-bottom:12px}.product-form input:focus,.product-form select:focus{outline:none;border-color:var(--primary);background:#fff;box-shadow:0 0 0 3px #6366f11a}.product-form button{padding:12px 24px;background:var(--primary);color:#fff;border:none;border-radius:10px;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .2s;width:100%}.product-form button:hover{background:var(--primary-dark);transform:translateY(-1px);box-shadow:0 4px 12px #6366f14d}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}.toggle-btn{padding:8px 18px;background:#fff;color:var(--gray-600);border:1.5px solid var(--gray-200);border-radius:8px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s;margin-bottom:20px}.toggle-btn:hover{border-color:var(--primary);color:var(--primary)}table{width:100%;border-collapse:collapse;font-size:.875rem;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}thead th{background:var(--gray-50);color:var(--gray-600);font-weight:600;text-align:left;padding:12px 16px;border-bottom:2px solid var(--gray-200);white-space:nowrap}tbody td{padding:14px 16px;border-bottom:1px solid var(--gray-100);color:var(--gray-900);vertical-align:middle}tbody tr:last-child td{border-bottom:none}tbody tr:hover{background:var(--gray-50)}.product-img{width:48px;height:48px;object-fit:cover;border-radius:8px;border:1px solid var(--gray-200)}.btn-edit{padding:6px 14px;background:#fff;color:var(--primary);border:1.5px solid var(--primary);border-radius:8px;font-size:.8rem;font-weight:600;cursor:pointer;transition:all .2s}.btn-edit:hover{background:var(--primary);color:#fff}.admin-dashboard{max-width:1100px;margin:0 auto;padding:32px 20px;position:relative}.admin-dashboard h1{font-size:1.5rem;font-weight:700;margin-bottom:28px}.users-section,.summary-section,.products-section{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:28px;margin-bottom:24px;border:1px solid var(--gray-200)}.users-section h2,.summary-section h2,.products-section h2{font-size:1.05rem;font-weight:700;color:var(--primary);margin-bottom:18px;padding-bottom:12px;border-bottom:2px solid var(--primary-light)}.edit-form{background:var(--gray-50);border:1.5px solid var(--primary-light);border-radius:var(--radius);padding:24px;margin-bottom:20px}.edit-form h3{font-size:1rem;font-weight:700;color:var(--primary);margin-bottom:16px}.edit-form input{width:100%;padding:10px 14px;border:1.5px solid var(--gray-200);border-radius:8px;font-size:.9rem;margin-bottom:12px;background:#fff}.edit-form button[type=submit]{padding:9px 20px;background:var(--primary);color:#fff;border:none;border-radius:8px;font-weight:600;font-size:.875rem;cursor:pointer;margin-right:10px}.edit-form button[type=button]{padding:9px 20px;background:#fff;color:var(--gray-600);border:1.5px solid var(--gray-200);border-radius:8px;font-weight:600;font-size:.875rem;cursor:pointer}@keyframes slideUp{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}.login-form,.register-form,.product-form,.users-section,.summary-section,.products-section{animation:slideUp .35s ease}@media (max-width: 640px){.login-form,.register-form{padding:32px 24px}.form-row{grid-template-columns:1fr}.dashboard,.admin-dashboard{padding:20px 12px}.users-section,.summary-section,.products-section,.product-form{padding:20px}thead th,tbody td{padding:10px 12px}}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}#root{width:100%;min-height:100vh}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}