:root{
  --ink:#1d1d1f;
  --sub:#6e6e73;
  --bg:#f5f5f7;
  --card:#ffffff;
  --accent:#e11d2e;
  --border:#e5e5e7;
  --radius:18px;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;
  background:var(--bg);
  color:var(--ink);
}
.topbar{
  position:sticky; top:0; z-index:20;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--border);
}
.topbar-inner{
  max-width:1200px; margin:0 auto; padding:14px 24px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{font-size:19px; font-weight:600; letter-spacing:-.01em;}
.brand span{font-weight:400; color:var(--sub);}
.topbar-actions{display:flex; align-items:center; gap:14px;}
.progress-pill{
  font-size:13px; color:var(--sub); background:var(--bg);
  border:1px solid var(--border); padding:6px 14px; border-radius:999px;
}
.progress-pill span{color:var(--ink); font-weight:600;}
.btn{
  border:none; border-radius:999px; padding:10px 20px;
  font-size:14px; font-weight:600; cursor:pointer; transition:.15s ease;
}
.btn-primary{background:var(--ink); color:#fff;}
.btn-primary:hover{background:#000;}
.btn-primary:disabled{background:#c7c7cc; cursor:not-allowed;}
.wrap{max-width:1200px; margin:0 auto; padding:28px 24px 80px;}
.toolbar{display:flex; gap:12px; margin-bottom:22px; flex-wrap:wrap;}
.search,.select{
  border:1px solid var(--border); border-radius:12px; padding:11px 14px;
  font-size:14px; background:#fff; color:var(--ink);
}
.search{flex:1; min-width:220px;}
.select{min-width:200px;}
.grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:18px;
}
.card{
  background:var(--card); border-radius:var(--radius); border:1px solid var(--border);
  overflow:hidden; display:flex; flex-direction:column;
}
.card-cat{
  font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--accent);
  font-weight:700; padding:12px 14px 0;
}
.dropzone{
  margin:10px 14px 0; height:150px; border-radius:14px;
  border:1.5px dashed var(--border); background:var(--bg);
  display:flex; align-items:center; justify-content:center; text-align:center;
  cursor:pointer; position:relative; overflow:hidden; transition:.15s ease;
}
.dropzone:hover, .dropzone.dragover{border-color:var(--ink); background:#eee;}
.dropzone img{width:100%; height:100%; object-fit:contain;}
.dropzone .dz-label{font-size:12px; color:var(--sub); padding:0 12px;}
.dropzone input{display:none;}
.dz-badge{
  position:absolute; top:8px; right:8px; background:#1d1d1f; color:#fff;
  font-size:10px; padding:2px 8px; border-radius:999px; opacity:.9;
}
.card-body{padding:12px 14px 16px; flex:1; display:flex; flex-direction:column; gap:4px;}
.card-item{font-size:12px; color:var(--sub); font-weight:600;}
.card-desc{font-size:14px; font-weight:600; line-height:1.3; min-height:36px;}
.card-meta{font-size:12px; color:var(--sub); display:flex; justify-content:space-between; margin-top:4px;}
.card-rate{font-size:14px; font-weight:700;}
.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--ink); color:#fff; padding:12px 20px; border-radius:12px;
  font-size:13px; opacity:0; pointer-events:none; transition:.25s ease; z-index:50;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}