:root{
 --bg:#0b1220;
 --panel:#111827;
 --card:#0f172a;
 --text:#e5e7eb;
 --accent:#f97316;
 --joki:#22c55e;
}
body.light{
 --bg:#f8fafc;
 --panel:#ffffff;
 --card:#f1f5f9;
 --text:#020617;
}
*{box-sizing:border-box}
body{
 margin:0;
 font-family:Arial;
 background:var(--bg);
 color:var(--text)
}
header{
 padding:14px 20px;
 background:var(--panel);
 display:flex;
 justify-content:space-between;
 align-items:center;
 font-weight:bold
}
.logo{display:flex;gap:10px;align-items:center;color:inherit;text-decoration:none}
.logo img{height:32px;width:32px;border-radius:50%}
.theme-toggle{cursor:pointer;padding:6px 10px;border-radius:8px;background:var(--card)}
.main{display:grid;grid-template-columns:260px 1fr;gap:20px;padding:20px}
@media(max-width:900px){.main{grid-template-columns:1fr}}
.sidebar{background:var(--panel);padding:15px;border-radius:14px}
.sidebar h4{margin:15px 0 8px;font-size:13px}
.sidebar input,.sidebar select{
 width:100%;padding:10px;border-radius:10px;border:none;
 background:var(--card);color:var(--text)
}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px}
.card{background:var(--card);border-radius:16px;padding:12px;position:relative}
.card img{width:100%;border-radius:12px}
.title{font-size:14px;margin:8px 0 4px}
.price{color:var(--accent);font-weight:bold}
.stock{font-size:12px;color:#22c55e}
.qty-box{display:flex;gap:6px;margin-top:8px}
.qty-box button{width:28px;height:28px;border:none;border-radius:6px;background:#111827;color:#fff}
.qty-box input{width:40px;text-align:center;border:none;border-radius:6px;background:#020617;color:#fff}
.btn{margin-top:8px;width:100%;padding:8px;border:none;border-radius:10px;background:var(--accent);font-weight:bold}
.product[data-category^='joki']::before{
 content:'JOKI';position:absolute;top:10px;right:10px;
 background:var(--joki);color:#000;font-size:11px;font-weight:bold;
 padding:4px 8px;border-radius:8px
}
.product[data-badge]::after{
 position:absolute;top:10px;left:10px;
 color:#fff;font-size:11px;font-weight:bold;
 padding:4px 8px;border-radius:8px
}
.product[data-badge='item']::after{content:'ITEM';background:#3b82f6}
.product[data-badge='best']::after{content:'BEST';background:#facc15;color:#000}
.cart-btn{
 position:fixed;bottom:20px;right:20px;
 background:#22c55e;color:#000;
 padding:14px;border-radius:50%
}
#cart{
 display:none;position:fixed;bottom:80px;right:10px;
 width:95%;max-width:360px;background:var(--panel);
 padding:15px;border-radius:14px
}
.item{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.item button{background:#ef4444;color:#fff;border:none;border-radius:6px;padding:2px 8px}

/* ===== USER FORM MODAL ===== */
.modal-overlay{
 position:fixed;
 inset:0;
 background:rgba(0,0,0,.65);
 display:none;
 align-items:center;
 justify-content:center;
 z-index:9999;
}

.modal{
 background:var(--panel,#111827);
 width:90%;
 max-width:380px;
 padding:20px;
 border-radius:16px;
 box-shadow:0 20px 60px rgba(0,0,0,.5);
 animation:pop .25s ease;
}

@keyframes pop{
 from{transform:scale(.9);opacity:0}
 to{transform:scale(1);opacity:1}
}

.modal h3{
 margin:0 0 12px;
 text-align:center;
 font-size:18px;
}

.modal input{
 width:100%;
 padding:12px;
 margin-bottom:10px;
 border-radius:10px;
 border:none;
 background:#020617;
 color:#fff;
 font-size:14px;
}

.modal input::placeholder{
 color:#94a3b8;
}

.modal .actions{
 display:flex;
 gap:10px;
}

.modal button{
 flex:1;
 padding:10px;
 border:none;
 border-radius:10px;
 font-weight:bold;
 cursor:pointer;
}

.modal .btn-primary{
 background:#f97316;
 color:#000;
}

.modal .btn-cancel{
 background:#374151;
 color:#fff;
}