:root{
 --primary:#191594;
 --accent:#25D366;
 --bg:#f1f5f9;
 --surface:#ffffff;
 --text:#0f172a;
 --muted:#64748b;
 --border:#e2e8f0;
 --radius:18px;
 --skeleton-1:#e2e8f0;
 --skeleton-2:#f8fafc;
}
.dark{
 --bg:#0f172a;
 --surface:#1e293b;
 --text:#f1f5f9;
 --muted:#94a3b8;
 --border:#334155;
 --skeleton-1:#334155;
 --skeleton-2:#475569;
}
body{margin:0;font-family:'Plus Jakarta Sans',sans-serif;background:var(--bg);color:var(--text)}
header{position:sticky;top:0;background:var(--surface);padding:14px 18px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border);z-index:5}
.logo{font-weight:800;color:var(--primary);font-size:1.4rem;cursor:pointer}
.sidebar{position:fixed;top:0;left:0;height:100%;width:280px;background:var(--surface);transform:translateX(-100%);transition:.3s;padding:30px;z-index:10;overflow:auto}
.sidebar.active{transform:translateX(0)}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.3);display:none;z-index:9}
.overlay.active{display:block}
.menu-item{padding:12px;border-radius:12px;border:1px solid var(--border);margin-bottom:10px;cursor:pointer}
.container{max-width:900px;margin:auto;padding:20px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}
.card{position:relative;background:var(--surface);border-radius:18px;border:1px solid var(--border);overflow:hidden;cursor:pointer;transition:transform .3s ease,box-shadow .3s ease}
.card:hover{transform:translateY(-5px);box-shadow:0 10px 20px rgba(0,0,0,.1)}
.card img{width:100%;height:160px;object-fit:cover}
.card-body{padding:12px}
.price{color:var(--primary);font-weight:800}
.badge{position:absolute;top:-6px;right:-8px;background:var(--accent);color:white;font-size:10px;padding:2px 6px;border-radius:20px}
.btn{background:var(--primary);color:white;border:none;padding:14px;border-radius:14px;width:100%;font-weight:700;cursor:pointer}
input,select,textarea{width:100%;padding:12px;margin-bottom:12px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);font-family:inherit;box-sizing:border-box}
.page{display:none}
.page.active{display:block}
footer{background:linear-gradient(45deg,var(--primary),#2563eb,var(--primary));background-size:200% 200%;color:white;text-align:center;padding:30px;margin-top:40px;border-radius:24px 24px 0 0;animation:bgPan 5s ease infinite}
@keyframes bgPan{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.2)}100%{transform:scale(1)}}
.scroll-top{position:fixed;bottom:20px;right:20px;background:var(--primary);color:white;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;pointer-events:none;transition:.3s;z-index:99}
.scroll-top.active{opacity:1;pointer-events:all}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);padding:14px 24px;border-radius:14px;box-shadow:0 5px 15px rgba(0,0,0,.1);z-index:100;opacity:0;pointer-events:none;transition:all .3s ease;font-weight:600}
.toast.show{bottom:40px;opacity:1;pointer-events:all}
.toast.success{background:var(--accent);color:white}
.toast.error{background:#ef4444;color:white}
.sale-badge{position:absolute;top:10px;left:10px;background:#ef4444;color:white;padding:4px 12px;border-radius:20px;font-size:12px;font-weight:800;z-index:2;box-shadow:0 2px 5px rgba(0,0,0,0.2)}
.skeleton{background:var(--skeleton-1);background:linear-gradient(90deg,var(--skeleton-1) 25%,var(--skeleton-2) 50%,var(--skeleton-1) 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;border-radius:6px}
@keyframes skeleton-loading{0%{background-position:200% 0}100%{background-position:-200% 0}}
.thumbnail-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:10px;margin-top:10px}
.thumb{width:100%;border-radius:8px;cursor:pointer;border:2px solid transparent;transition:border-color .3s;box-sizing:border-box}
.thumb:hover{border-color:var(--muted)}
.thumb.active{border-color:var(--primary)}

.wishlist-btn{
    position:absolute;
    top:10px;
    right:10px;
    z-index:3;
    color:var(--muted);
    cursor:pointer;
    font-size:1.2rem;
    transition: color .2s;
}
.wishlist-btn:hover { color: #ff4757; }
.wishlist-btn.fa-solid{ color: #ff4757; }

.refresh-loader{position:fixed;top:-60px;left:0;width:100%;height:60px;display:flex;justify-content:center;align-items:center;transition:top .3s ease;z-index:1001;pointer-events:none}
.refresh-loader.show{top:70px}
.spinner{width:25px;height:25px;border:3px solid var(--primary);border-top-color:transparent;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{100%{transform:rotate(360deg)}}

.search-history{position:absolute;top:100%;left:0;width:100%;background:var(--surface);border:1px solid var(--border);border-radius:0 0 12px 12px;z-index:100;display:none;box-shadow:0 4px 6px -1px rgba(0,0,0,.1);max-height:200px;overflow-y:auto;margin-top:-10px}
.history-item{padding:12px 15px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border);font-size:0.9rem;color:var(--text)}
.history-item:last-child{border-bottom:none}
.history-item:hover{background:var(--bg)}
.clear-history{
    justify-content: center;
    color: var(--primary);
    font-weight: 600;
}

.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;z-index:2000}
.modal.active{display:flex}
.modal-content{background:var(--surface);padding:24px;border-radius:24px;width:90%;max-width:320px;text-align:center;box-shadow:0 10px 25px rgba(0,0,0,.2);border:1px solid var(--border)}
.size-table{width:100%;border-collapse:collapse;margin-bottom:10px}
.size-table th, .size-table td{border:1px solid var(--border);padding:8px;text-align:left}
.size-table th{background:var(--bg)}