@import "https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap";
:root{--primary:#1a56db;--primary-dark:#1e429f;--secondary:#6c757d;--success:#0f9d58;--danger:#e53e3e;--warning:#f6c90e;--bg:#f4f6f9;--card-bg:#fff;--text:#1f2937;--text-muted:#6b7280;--border:#e5e7eb;--radius:10px;--shadow:0 2px 12px #00000014}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text);min-height:100vh;font-family:Roboto,sans-serif}a{color:inherit;text-decoration:none}.navbar{border-bottom:1px solid var(--border);z-index:100;background:#fff;justify-content:space-between;align-items:center;height:64px;padding:0 2rem;display:flex;position:sticky;top:0;box-shadow:0 1px 8px #0000000f}.navbar-brand{color:var(--primary);align-items:center;gap:.5rem;font-size:1.4rem;font-weight:700;display:flex}.navbar-links{align-items:center;gap:1.5rem;list-style:none;display:flex}.navbar-links a{color:var(--text);border-radius:6px;padding:.4rem .8rem;font-size:.95rem;font-weight:500;transition:background .15s}.navbar-links a:hover{background:var(--bg);color:var(--primary)}.hero{background:linear-gradient(135deg,var(--primary)0%,var(--primary-dark)100%);color:#fff;text-align:center;padding:5rem 2rem}.hero h1{margin-bottom:1rem;font-size:2.8rem;font-weight:700}.hero p{opacity:.85;margin-bottom:2rem;font-size:1.2rem}.btn{cursor:pointer;border:none;border-radius:8px;align-items:center;gap:.4rem;padding:.6rem 1.4rem;font-size:.95rem;font-weight:600;transition:all .2s;display:inline-flex}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-dark);transform:translateY(-1px)}.btn-secondary{background:var(--secondary);color:#fff}.btn-secondary:hover{opacity:.85}.btn-success{background:var(--success);color:#fff}.btn-danger{background:var(--danger);color:#fff}.btn-outline{border:2px solid var(--primary);color:var(--primary);background:0 0}.btn-outline:hover{background:var(--primary);color:#fff}.btn-sm{padding:.35rem .9rem;font-size:.85rem}.btn-lg{padding:.8rem 2rem;font-size:1.05rem}.container{max-width:1200px;margin:0 auto;padding:0 1.5rem}.section{padding:3rem 0}.section-title{color:var(--text);margin-bottom:.5rem;font-size:1.8rem;font-weight:700}.section-subtitle{color:var(--text-muted);margin-bottom:2rem;font-size:1rem}.card{background:var(--card-bg);border:1px solid var(--border);border-radius:6px;transition:transform .2s,box-shadow .2s;overflow:hidden;box-shadow:0 1px 4px #0000000f}.card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.card-img{object-fit:cover;width:100%;height:180px}.card-body{padding:.9rem}.card-title{margin-bottom:.3rem;font-size:.9rem;font-weight:600}.card-price{color:var(--primary);margin-bottom:.4rem;font-size:1.05rem;font-weight:700}.card-badge{color:var(--primary);background:#e0ecff;border-radius:20px;margin-bottom:.5rem;padding:.2rem .7rem;font-size:.78rem;font-weight:600;display:inline-block}.grid{gap:1.5rem;display:grid}.grid-3{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}.grid-4{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}.form-group{margin-bottom:.8rem}.form-label{margin-bottom:.3rem;font-size:.8rem;font-weight:500;display:block}.form-control{border:1px solid var(--border);background:#fff;border-radius:4px;width:100%;padding:.4rem .7rem;font-family:Roboto,sans-serif;font-size:.85rem;transition:border-color .15s}.form-control:focus{border-color:var(--primary);outline:none}.form-control:read-only{color:var(--text-muted);background:#f8f9fa}.admin-layout{min-height:100vh;display:flex}.sidebar{color:#fff;z-index:200;background:#1e2a3b;flex-direction:column;width:240px;height:100vh;padding:1.5rem 0;display:flex;position:fixed;top:0;left:0;overflow-y:auto}.sidebar-brand{color:#60a5fa;border-bottom:1px solid #ffffff1a;padding:0 1.5rem 1.5rem;font-size:1.2rem;font-weight:700}.sidebar-menu{flex:1;padding:1rem 0;list-style:none}.sidebar-menu li a{color:#ffffffb3;align-items:center;gap:.8rem;padding:.75rem 1.5rem;font-size:.95rem;transition:all .15s;display:flex}.sidebar-menu li a:hover,.sidebar-menu li a.active{color:#fff;background:#ffffff1a}.table-wrapper{overflow-x:auto}table{border-collapse:collapse;background:#fff;border-radius:6px;width:100%;overflow:hidden;box-shadow:0 1px 4px #0000000f}th{text-align:left;color:var(--text-muted);border-bottom:1px solid var(--border);padding:.5rem .7rem;font-size:.75rem;font-weight:600}thead th{background:#f8f9fa}td{border-bottom:1px solid var(--border);padding:.5rem .7rem;font-size:.82rem}tr:last-child td{border-bottom:none}tr:hover td{background:#f9fafb}.badge{border-radius:20px;padding:.25rem .7rem;font-size:.78rem;font-weight:600}.badge-success{color:#065f46;background:#d1fae5}.badge-danger{color:#991b1b;background:#fee2e2}.badge-warning{color:#92400e;background:#fef9c3}.badge-info{color:#1e429f;background:#e0ecff}.alert{border-radius:8px;margin-bottom:1rem;padding:.9rem 1.2rem;font-size:.95rem}.alert-success{color:#065f46;background:#d1fae5;border-left:4px solid #10b981}.alert-danger{color:#991b1b;background:#fee2e2;border-left:4px solid #ef4444}.img-gallery{flex-wrap:wrap;gap:.5rem;margin-top:.5rem;display:flex}.img-gallery img{object-fit:cover;border:2px solid var(--border);cursor:pointer;border-radius:6px;width:80px;height:80px;transition:border-color .15s}.img-gallery img:hover,.img-gallery img.active{border-color:var(--primary)}.img-main{object-fit:contain;border-radius:10px;width:100%;max-height:400px}footer{color:#ffffffb3;text-align:center;background:#1e2a3b;padding:1.5rem;font-size:.9rem}.skeleton{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%) 0 0/200% 100%;border-radius:8px;animation:1.5s infinite shimmer}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.empty-state{text-align:center;color:var(--text-muted);padding:4rem 2rem}.empty-state h3{margin-bottom:.5rem;font-size:1.3rem}@media (max-width:768px){.sidebar{width:0;overflow:hidden}.admin-content{margin-left:0;padding:1rem}.hero h1{font-size:1.8rem}.grid-3,.grid-4{grid-template-columns:1fr 1fr}}@media (max-width:480px){.grid-3,.grid-4{grid-template-columns:1fr}.navbar{padding:0 1rem}}