:root{
  --bg:#f6f8fb;
  --card:#ffffff;
  --muted:#6b7280;
  --accent:#1565c0;
  --danger:#d32f2f;
  --radius:12px;
  --gap:14px;
}
*{box-sizing:border-box}
body{font-family:Inter, system-ui, Arial, sans-serif; background:var(--bg); margin:20px; color:#111}
header{display:flex;align-items:center;gap:12px;margin-bottom:18px}
header h1{font-size:20px;margin:0}
.container{display:grid;grid-template-columns: 360px 1fr; gap:var(--gap)}
@media (max-width:880px){ .container{grid-template-columns:1fr} }
.card{background:var(--card);border-radius:var(--radius);padding:14px;box-shadow:0 6px 18px rgba(16,24,40,0.06)}
label.block{display:block;font-weight:600;margin:8px 0 6px}
input[type="text"], select, input[type="file"]{
  width:100%;padding:10px;border-radius:10px;border:1px solid #e6e9ee;background:#fbfdff;
}
.btn{display:inline-block;padding:9px 12px;border-radius:10px;border:0;background:var(--accent);color:#fff;cursor:pointer;margin-top:8px}
.btn.secondary{background:#eee;color:#111}
.btn.danger{background:var(--danger)}
.wardrobe{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;margin-top:12px}
.item{background:#fff;border-radius:10px;border:1px solid #eef2f7;padding:8px;text-align:center;overflow:hidden}
.item img{width:100%;height:110px;object-fit:cover;border-radius:8px}
.meta{font-size:13px;margin-top:8px;color:var(--muted)}
.outfit-area{display:flex;flex-direction:column;gap:10px}
.selected-preview{display:flex;gap:8px;flex-wrap:wrap}
.selected-preview .thumb{width:68px;height:68px;border-radius:8px;background:#fff;border:1px solid #eee;display:flex;align-items:center;justify-content:center}
.selected-preview .thumb img{width:100%;height:100%;object-fit:cover;border-radius:6px}
.outfits-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:10px}
.outfit-card{padding:10px;border-radius:10px;background:#fff;border:1px solid #eef2f7}
.outfit-card .mini{font-size:13px;color:var(--muted);margin-top:6px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.muted{color:var(--muted);font-size:13px}
footer{margin-top:18px;text-align:center;color:var(--muted);font-size:13px}
@media (max-width:480px){
  .item img{height:92px}
  .selected-preview .thumb{width:56px;height:56px}
}