:root{ --bg:#f7f7fb; --card:#fff; --text:#222; --muted:#666; --primary:#0ea5e9; --warn:#f59e0b; }
*{ box-sizing:border-box }
body{ margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial; background:var(--bg); color:var(--text); padding-bottom:200px }

.header{ display:flex; gap:12px; align-items:center; padding:12px 16px; background:var(--card); box-shadow:0 1px 4px rgba(0,0,0,.06); position:sticky; top:0; z-index:10 }
.container{ display:grid; grid-template-columns: 3fr 2fr; gap:16px; padding:16px }
.input{ flex:1; padding:10px 12px; border:1px solid #e5e7eb; border-radius:10px }
.btn{ background:var(--primary); color:#fff; padding:10px 12px; border:none; border-radius:10px; cursor:pointer; transition:opacity 0.2s }
.btn:hover:not(:disabled){ opacity:0.9 }
.btn:disabled{ opacity:0.5; cursor:not-allowed }
.btn-secondary{ background:#e5e7eb; color:#111827 }
.card{ background:var(--card); border:1px solid #e5e7eb; border-radius:14px; padding:12px }

.grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap:12px }
.prod{ background:var(--card); border:2px dashed #e5e7eb; border-radius:12px; padding:10px; min-height:120px; position:relative; cursor:pointer }
.prod.dragover{ border-color:var(--primary); background:#e0f2fe }
.prod.selected{ outline:2px solid var(--primary) }
.prod h4{ margin:0 0 6px 0; font-size:14px }
.meta{ font-size:12px; color:var(--muted); line-height:1.3 }
.badge{ font-size:11px; background:#eef2ff; color:#3730a3; border-radius:999px; padding:2px 8px; display:inline-block }
.prod.prod-empty{ border-style: solid; border-color: var(--warn); background:#fff7ed }
.prod .badge + .badge { margin-left: 8px }

.right{ display:flex; flex-direction:column; gap:12px }
.gallery{ display:grid; grid-template-columns:repeat(auto-fill, minmax(110px,1fr)); gap:8px; max-height:70vh; overflow:auto }
.thumb{ border:1px solid #e5e7eb; border-radius:10px; padding:6px; background:#fff; cursor:grab; user-select:none }
.thumb img{ width:100%; height:90px; object-fit:cover; border-radius:6px }
.thumb input[type=checkbox]{ margin-top:6px }

.toolbar{ display:flex; gap:8px; align-items:center }
.small{ font-size:12px; color:var(--muted) }
.assignbar{ display:flex; gap:8px; align-items:center; margin-left:8px }
.hidden{ display:none }

/* Fixed bottom gallery */
.bottom{ position:fixed; bottom:0; left:0; right:0; height:200px; background:var(--card); border-top:2px solid #e5e7eb; box-shadow:0 -2px 6px rgba(0,0,0,0.05); overflow:hidden; z-index:20; padding:8px 16px }
.bottom .code-title{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px }
.bottom .code-gallery{ display:flex; gap:8px; overflow-x:auto; height:calc(100% - 30px); padding-bottom:8px }

.code-thumb{ border:1px solid #e5e7eb; border-radius:10px; padding:6px; background:#fff; flex:0 0 auto; display:flex; flex-direction:column; align-items:center }
.code-thumb img{ max-height:90px; width:auto; object-fit:contain; border-radius:6px }
.code-actions{ display:flex; gap:6px; margin-top:4px }
.code-actions button{ font-size:11px; padding:2px 6px; border-radius:6px; border:1px solid #e5e7eb; background:#fafafa; cursor:pointer }

/* Pagination */
.pagination{ display:flex; justify-content:center; align-items:center; gap:12px; margin-top:12px; padding-top:12px; border-top:1px solid #e5e7eb }
.pagination .btn{ padding:6px 12px; font-size:12px }
.pagination .btn:disabled{ opacity:0.5; cursor:not-allowed }
.pagination #page-info{ font-weight:500 }