:root{--bg: #f7f7fb;--card: #ffffff;--text: #111827;--muted: #6b7280;--accent: #1f6feb}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial;background:var(--bg);color:var(--text)}.app-header{background:linear-gradient(90deg,#fff 0 20%,#f1f5f9);padding:16px 20px;border-bottom:1px solid #e6e9ee}.app-header h1{margin:0;font-size:20px}main{padding:20px}.dashboard-container{max-width:1200px;margin:0 auto;padding:18px;min-height:70vh}.controls{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}.search-input{width:100%;padding:10px 12px;border-radius:8px;border:1px solid #d1d5db;background:#fff;outline:none;font-size:14px}.filters-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:6px}.select{padding:8px 10px;border-radius:8px;border:1px solid #d1d5db;background:#fff;font-size:14px}.clear-btn{background:transparent;border:1px solid #d1d5db;padding:8px 10px;border-radius:8px;cursor:pointer}.products-area{margin-top:18px}.products-container{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}@media (max-width: 1024px){.products-container{grid-template-columns:repeat(3,1fr)}}@media (max-width: 768px){.products-container{grid-template-columns:repeat(2,1fr)}}@media (max-width: 480px){.products-container{grid-template-columns:1fr}}.loading,.error,.no-results{padding:40px;text-align:center;color:var(--muted)}.pagination{display:flex;gap:8px;justify-content:center;margin-top:18px;flex-wrap:wrap}.pagination button{padding:8px 12px;border-radius:8px;border:1px solid #e6e9ee;background:#fff;cursor:pointer}.pagination button.active-page{background:var(--accent);border-color:var(--accent)}.pagination button:disabled{opacity:.5;cursor:not-allowed}.backdrop{position:fixed;inset:0;background:#02061773;display:flex;align-items:center;justify-content:center;z-index:1000}.modal{width:92%;max-width:1000px;background:#fff;border-radius:12px;padding:18px;position:relative;box-shadow:0 20px 60px #0206174d;max-height:86vh;overflow:auto}.close-btn{position:absolute;right:12px;top:12px;background:transparent;border:none;font-size:18px;cursor:pointer}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}@media (max-width:850px){.detail-grid{grid-template-columns:1fr}}.gallery .main-image{width:100%;height:360px;display:flex;align-items:center;justify-content:center;background:#f8fafb;border-radius:8px;overflow:hidden}.gallery .main-image img{max-width:100%;max-height:100%;object-fit:contain}.thumbs{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}.thumb{border:1px solid #e6e9ee;padding:4px;border-radius:6px;background:#fff;cursor:pointer}.thumb img{width:64px;height:64px;object-fit:cover;display:block}.active-thumb{outline:2px solid var(--accent)}.meta h2{margin:0 0 8px}.meta .brand,.meta .category,.meta .rating,.meta .stock{color:var(--muted);margin:6px 0}.meta .price{font-weight:800;font-size:20px;color:var(--accent);margin-top:8px}.description{margin-top:10px;color:#374151;line-height:1.45}.card{background:var(--card);border-radius:12px;box-shadow:0 6px 18px #0f172a0f;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;height:100%;transition:transform .12s ease;border:1px solid rgba(0,0,0,.04)}.card-media{width:100%;height:180px;display:flex;align-items:center;justify-content:center;background:#fafafb;overflow:hidden}.card-media img{max-width:100%;max-height:100%;object-fit:cover}.card-body{padding:12px;display:flex;justify-content:space-between;align-items:center}.card-title{font-size:14px;margin:0;font-weight:600;flex:1}.card-price{font-weight:700;color:var(--accent);margin:0 0 0 8px}h1{text-align:center;margin-top:20px}