:root{--primary:#4f46e5;--primary-light:#6366f1;--primary-dark:#4338ca;--secondary:#06b6d4;--success:#22c55e;--warning:#f59e0b;--danger:#ef4444;--dark:#1f2937;--light:#ffffff;--gray-50:#f9fafb;--gray-100:#f3f4f6;--gray-200:#e5e7eb;--gray-300:#d1d5db;--gray-400:#9ca3af;--gray-500:#6b7280;--gray-600:#4b5563;--gray-700:#374151;--gray-800:#1f2937;--border:#e5e7eb;--shadow:0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);--shadow-lg:0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);--radius:12px;--transition:all 0.2s ease}*{margin:0;padding:0;box-sizing:border-box}body{font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;background:linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);color:var(--gray-800);min-height:100vh;line-height:1.6}a{color:var(--primary);text-decoration:none;transition:var(--transition)}a:hover{color:var(--primary-dark)}.container{max-width:1200px;margin:0 auto;padding:0 20px}.header{background:var(--light);border-bottom:1px solid var(--border);padding:15px 0;position:sticky;top:0;z-index:1000;box-shadow:var(--shadow)}.header .container{display:flex;justify-content:space-between;align-items:center}.logo{font-size:1.5rem;font-weight:700;color:var(--primary);display:flex;align-items:center;gap:8px}.logo i{background:linear-gradient(135deg, var(--primary), var(--secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.nav{display:flex;gap:8px;align-items:center}.nav a{color:var(--gray-600);padding:10px 16px;border-radius:8px;transition:var(--transition);font-weight:500}.nav a:hover, .nav a.active{color:var(--primary);background:rgba(79, 70, 229, 0.1)}.user-info{display:flex;align-items:center;gap:12px}.balance{background:linear-gradient(135deg, var(--success), #16a34a);color:white;padding:8px 16px;border-radius:20px;font-weight:600;font-size:0.9rem;box-shadow:0 2px 8px rgba(34, 197, 94, 0.3)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;border-radius:var(--radius);font-weight:600;font-size:0.95rem;border:none;cursor:pointer;transition:var(--transition);text-decoration:none}.btn-primary{background:linear-gradient(135deg, var(--primary), var(--primary-dark));color:white;box-shadow:0 4px 12px rgba(79, 70, 229, 0.3)}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(79, 70, 229, 0.4);color:white}.btn-secondary{background:var(--gray-100);color:var(--gray-700);border:1px solid var(--border)}.btn-secondary:hover{background:var(--gray-200);color:var(--gray-800)}.btn-success{background:linear-gradient(135deg, var(--success), #16a34a);color:white;box-shadow:0 4px 12px rgba(34, 197, 94, 0.3)}.btn-danger{background:linear-gradient(135deg, var(--danger), #dc2626);color:white}.btn-sm{padding:8px 16px;font-size:0.85rem}.card{background:var(--light);border:1px solid var(--border);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);transition:var(--transition)}.card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--border)}.card-title{font-size:1.25rem;font-weight:600;color:var(--gray-800)}.products-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));gap:24px;margin-top:24px}.product-card{position:relative;overflow:hidden;background:var(--light)}.product-card .badge{position:absolute;top:16px;right:16px;background:linear-gradient(135deg, var(--warning), #d97706);color:white;padding:4px 12px;border-radius:20px;font-size:0.75rem;font-weight:600}.product-title{font-size:1.1rem;font-weight:600;color:var(--gray-800);margin-bottom:8px}.product-stock{color:var(--success);font-size:0.9rem;margin-bottom:16px}.product-price{font-size:1.5rem;font-weight:700;color:var(--primary);margin-bottom:16px}.form-group{margin-bottom:20px}.form-label{display:block;margin-bottom:8px;font-weight:500;color:var(--gray-700)}.form-control{width:100%;padding:12px 16px;background:var(--light);border:1px solid var(--border);border-radius:8px;color:var(--gray-800);font-size:1rem;transition:var(--transition)}.form-control:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(79, 70, 229, 0.15)}.form-control::placeholder{color:var(--gray-400)}.table-container{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--border)}table{width:100%;border-collapse:collapse;background:var(--light)}th, td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--border)}th{background:var(--gray-50);font-weight:600;color:var(--gray-600);font-size:0.85rem;text-transform:uppercase;letter-spacing:0.5px}tr:hover{background:var(--gray-50)}.status{display:inline-flex;align-items:center;padding:4px 12px;border-radius:20px;font-size:0.8rem;font-weight:600}.status-success{background:rgba(34, 197, 94, 0.15);color:#16a34a}.status-pending{background:rgba(245, 158, 11, 0.15);color:#d97706}.status-danger{background:rgba(239, 68, 68, 0.15);color:#dc2626}.hero{text-align:center;padding:60px 0}.hero h1{font-size:2.5rem;font-weight:800;margin-bottom:16px;color:var(--gray-800)}.hero h1 i{color:var(--primary)}.hero p{font-size:1.15rem;color:var(--gray-500);max-width:600px;margin:0 auto}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));gap:20px;margin-bottom:30px}.stat-card{background:var(--light);border:1px solid var(--border);padding:24px;border-radius:var(--radius);text-align:center;box-shadow:var(--shadow)}.stat-value{font-size:2rem;font-weight:700;color:var(--primary)}.stat-label{color:var(--gray-500);font-size:0.9rem;margin-top:4px}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0, 0, 0, 0.5);display:flex;align-items:center;justify-content:center;z-index:2000;opacity:0;visibility:hidden;transition:var(--transition)}.modal-overlay.active{opacity:1;visibility:visible}.modal{background:var(--light);border-radius:var(--radius);padding:32px;max-width:500px;width:90%;transform:scale(0.9);transition:var(--transition);box-shadow:var(--shadow-lg)}.modal-overlay.active .modal{transform:scale(1)}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.modal-close{background:none;border:none;color:var(--gray-400);font-size:1.5rem;cursor:pointer}.modal-close:hover{color:var(--gray-600)}.alert{padding:16px 20px;border-radius:8px;margin-bottom:20px;display:flex;align-items:center;gap:12px}.alert-success{background:rgba(34, 197, 94, 0.1);border:1px solid rgba(34, 197, 94, 0.3);color:#16a34a}.alert-error{background:rgba(239, 68, 68, 0.1);border:1px solid rgba(239, 68, 68, 0.3);color:#dc2626}.alert-warning{background:rgba(245, 158, 11, 0.1);border:1px solid rgba(245, 158, 11, 0.3);color:#d97706}.auth-container{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%)}.auth-card{background:var(--light);border:1px solid var(--border);border-radius:var(--radius);padding:40px;width:100%;max-width:420px;box-shadow:var(--shadow-lg)}.auth-title{text-align:center;font-size:1.75rem;font-weight:700;color:var(--gray-800);margin-bottom:8px}.auth-subtitle{text-align:center;color:var(--gray-500);margin-bottom:32px}.footer{background:var(--light);border-top:1px solid var(--border);padding:30px 0;margin-top:60px;text-align:center;color:var(--gray-500)}@media (max-width:768px){.header .container{flex-direction:column;gap:15px}.nav{flex-wrap:wrap;justify-content:center}.hero h1{font-size:1.75rem}.products-grid{grid-template-columns:1fr}.stats-grid{grid-template-columns:repeat(2, 1fr)}}@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn 0.5s ease forwards}.quantity-input{display:flex;align-items:center;gap:8px}.quantity-input button{width:36px;height:36px;border-radius:8px;border:1px solid var(--border);background:var(--gray-50);color:var(--gray-700);font-size:1.2rem;cursor:pointer;transition:var(--transition)}.quantity-input button:hover{background:var(--primary);color:white;border-color:var(--primary)}.quantity-input input{width:60px;text-align:center;background:var(--light);border:1px solid var(--border);border-radius:8px;padding:8px;color:var(--gray-800);font-size:1rem}.admin-layout{display:flex;min-height:100vh}.admin-sidebar{width:260px;background:var(--light);border-right:1px solid var(--border);padding:20px;position:fixed;height:100vh;overflow-y:auto}.admin-content{flex:1;margin-left:260px;padding:30px;background:var(--gray-50)}.sidebar-nav a{display:flex;align-items:center;gap:12px;padding:12px 16px;color:var(--gray-600);border-radius:8px;margin-bottom:4px;transition:var(--transition);font-weight:500}.sidebar-nav a:hover, .sidebar-nav a.active{background:rgba(79, 70, 229, 0.1);color:var(--primary)}@media (max-width:992px){.admin-sidebar{width:100%;position:relative;height:auto}.admin-content{margin-left:0}.admin-layout{flex-direction:column}}code{background:var(--gray-100);padding:2px 6px;border-radius:4px;font-family:'Monaco', 'Consolas', monospace;font-size:0.85em;color:var(--primary)}.mobile-menu-toggle{display:none;background:none;border:none;font-size:1.5rem;color:var(--gray-700);cursor:pointer;padding:8px;border-radius:8px;-webkit-tap-highlight-color:transparent}.mobile-menu-toggle:active{background:var(--gray-100)}@media (pointer:coarse){.btn, .nav a, .product-card .btn, .sidebar-nav a{min-height:44px;min-width:44px}input, select, textarea{min-height:44px;font-size:16px !important}}@media (max-width:992px){.container{padding:0 16px}.products-grid{grid-template-columns:repeat(2, 1fr);gap:16px}.header .container{flex-wrap:wrap}.stats-grid{grid-template-columns:repeat(2, 1fr)}}@media (max-width:768px){.mobile-menu-toggle{display:block}.header .container{gap:8px}.logo{font-size:1.2rem}.nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--light);flex-direction:column;padding:16px;border-top:1px solid var(--border);box-shadow:var(--shadow-lg);z-index:1001}.nav.active{display:flex}.nav a{padding:14px 16px;border-radius:8px;justify-content:flex-start}.user-info{gap:8px}.user-info .btn{padding:8px 12px;font-size:0.8rem}.balance{padding:6px 12px;font-size:0.85rem}.products-grid{grid-template-columns:1fr;gap:12px}.product-card{padding:16px}.product-header h3{font-size:1rem}.form-row{flex-direction:column;gap:12px}.stats-grid{grid-template-columns:1fr;gap:12px}.stat-card{padding:16px}.table-container{overflow-x:auto;-webkit-overflow-scrolling:touch}table{min-width:600px}.modal-content{width:95%;margin:10px;max-height:90vh;overflow-y:auto}.footer{padding:20px 0;text-align:center}.card{padding:16px;border-radius:10px}.quantity-input{flex-wrap:wrap;justify-content:center}.auth-container{padding:16px}.auth-card{padding:24px 16px}.toast-container{right:10px;left:10px;top:70px}.toast{min-width:auto;max-width:100%}}@media (max-width:480px){.header{padding:10px 0}.logo{font-size:1rem}.logo i{display:none}.user-info .btn span{display:none}.balance{padding:6px 10px;font-size:0.8rem}.notification-bell{padding:6px;margin-right:4px}.product-price{font-size:1.2rem}.btn{padding:10px 16px;font-size:0.9rem}.btn-lg{padding:14px 20px}h1{font-size:1.5rem}h2{font-size:1.25rem}}@media (max-height:500px) and (orientation:landscape){.header{position:relative}.nav{max-height:60vh;overflow-y:auto}}@media print{.header, .footer, .nav, .btn, .mobile-menu-toggle{display:none !important}body{background:white;color:black}.card, .product-card{box-shadow:none;border:1px solid #ddd}}@media (prefers-reduced-motion:reduce){*{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important}}@media (prefers-contrast:high){:root{--primary:#0000ff;--border:#000000}.btn-primary{background:var(--primary);border:2px solid black}}