:root {
  --bg: #f3f6fa;
  --card: #ffffff;
  --text: #152235;
  --muted: #6f7e90;
  --line: #dfe6ee;
  --brand: #0f4c81;
  --brand-dark: #0a3a63;
  --soft: #eaf3fb;
  --danger: #b42318;
  --shadow: 0 12px 30px rgba(24, 43, 65, .08);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: linear-gradient(180deg, #edf4fa 0, var(--bg) 260px);
  color: var(--text);
}
button, input, textarea { font: inherit; }
.app-shell { max-width: 1180px; margin: 0 auto; padding: 34px 22px 60px; }
.topbar { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:24px; }
.eyebrow { font-size:12px; font-weight:800; letter-spacing:.16em; color:var(--brand); }
h1 { margin:4px 0 4px; font-size:34px; line-height:1.05; }
.topbar p { margin:0; color:var(--muted); }
.top-actions { display:flex; gap:10px; flex-wrap:wrap; }
.btn { border:0; border-radius:11px; padding:12px 16px; font-weight:750; cursor:pointer; transition:.15s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background:var(--brand); color:#fff; box-shadow:0 8px 18px rgba(15,76,129,.18); }
.btn-primary:hover { background:var(--brand-dark); }
.btn-secondary { background:#fff; color:var(--text); border:1px solid var(--line); }
.card { background:var(--card); border:1px solid rgba(212,222,233,.9); border-radius:18px; box-shadow:var(--shadow); }
.composer { padding:22px; margin-bottom:22px; }
.section-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; }
.section-head h2 { margin:3px 0 0; font-size:20px; }
.step { font-size:11px; font-weight:800; letter-spacing:.12em; color:var(--brand); text-transform:uppercase; }
.save-state { font-size:12px; color:var(--muted); }
.composer-grid { display:grid; grid-template-columns: 250px 1fr; gap:24px; }
.label { display:block; margin-bottom:8px; font-size:13px; font-weight:750; }
.dropzone { height:220px; border:2px dashed #c8d6e5; border-radius:14px; background:#f8fbfe; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; cursor:pointer; outline:none; }
.dropzone.dragover { border-color:var(--brand); background:var(--soft); }
.empty-preview { display:flex; flex-direction:column; align-items:center; text-align:center; gap:7px; color:var(--muted); padding:22px; font-size:13px; }
.empty-preview strong { color:var(--text); }
.upload-icon { width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:#fff; border:1px solid var(--line); color:var(--brand); font-size:26px; }
#imagePreview { width:100%; height:100%; object-fit:contain; background:#fff; }
.remove-image { position:absolute; right:8px; top:8px; width:32px; height:32px; border-radius:50%; border:1px solid var(--line); background:rgba(255,255,255,.94); font-size:22px; line-height:1; cursor:pointer; }
.title-side { display:flex; flex-direction:column; }
textarea, input[type="search"] { border:1px solid var(--line); border-radius:11px; padding:13px 14px; color:var(--text); background:#fff; outline:none; }
textarea { width:100%; min-height:154px; resize:vertical; line-height:1.5; }
textarea:focus, input[type="search"]:focus { border-color:#87afd1; box-shadow:0 0 0 3px rgba(15,76,129,.08); }
.form-footer { margin-top:auto; padding-top:12px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.hint { color:var(--muted); font-size:12px; }
.list-card { overflow:hidden; }
.list-head { padding:22px 22px 0; }
.list-tools input { width:260px; }
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; min-width:720px; }
th { text-align:left; padding:12px 16px; font-size:12px; color:var(--muted); font-weight:800; background:#f8fafc; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
td { padding:14px 16px; border-bottom:1px solid var(--line); vertical-align:middle; }
tr[draggable="true"] { cursor:grab; }
tr.dragging { opacity:.45; }
.nr-col { width:70px; text-align:center; }
.image-col { width:135px; }
.actions-col { width:95px; }
.nr { text-align:center; font-weight:800; color:var(--muted); }
.product-thumb { width:88px; height:88px; object-fit:contain; border:1px solid var(--line); border-radius:10px; background:#fff; display:block; }
.title-cell { font-size:14px; line-height:1.45; font-weight:650; }
.row-actions { display:flex; justify-content:flex-end; gap:7px; }
.icon-btn { width:34px; height:34px; border-radius:9px; border:1px solid var(--line); background:#fff; cursor:pointer; color:var(--muted); }
.icon-btn:hover { color:var(--text); background:#f8fafc; }
.icon-btn.delete:hover { color:var(--danger); border-color:#f0b7b2; background:#fff7f6; }
.empty-list { padding:46px 20px; display:flex; flex-direction:column; align-items:center; gap:5px; color:var(--muted); }
.empty-list strong { color:var(--text); }
.toast { position:fixed; right:22px; bottom:22px; background:#142234; color:white; padding:12px 16px; border-radius:10px; box-shadow:var(--shadow); opacity:0; transform:translateY(10px); pointer-events:none; transition:.2s ease; font-size:13px; }
.toast.show { opacity:1; transform:translateY(0); }
@media (max-width: 760px) {
  .app-shell { padding:22px 14px 40px; }
  .topbar { align-items:flex-start; flex-direction:column; }
  .top-actions { width:100%; }
  .top-actions .btn { flex:1; }
  .composer-grid { grid-template-columns:1fr; }
  .dropzone { height:240px; }
  .form-footer { align-items:stretch; flex-direction:column; }
  .hint { order:2; }
  .list-head { align-items:stretch; flex-direction:column; }
  .list-tools input { width:100%; }
}