:root { --bg:#f5f6f8; --card:#fff; --ink:#1d2330; --muted:#6b7280; --line:#e3e6eb; --accent:#2b59c3; --danger:#c62828; }
* { box-sizing: border-box; }
body { margin:0; font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background:var(--bg); color:var(--ink); }
.topbar { display:flex; gap:16px; align-items:baseline; padding:14px 24px; background:#111827; color:#fff; }
.topbar .brand { color:#fff; font-weight:700; font-size:18px; text-decoration:none; }
.topbar .muted { color:#9ca3af; }
.container { max-width:1280px; margin:0 auto; padding:24px; }
h1 { margin:0 0 12px; font-size:24px; } h2 { margin:0 0 10px; font-size:17px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:18px; margin-bottom:18px; }
.muted { color:var(--muted); font-weight:normal; } .small { font-size:12px; }
.grid { display:grid; grid-template-columns: minmax(0,1fr) 380px; gap:18px; align-items:start; }
@media (max-width: 960px) { .grid { grid-template-columns: 1fr; } }
.page-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; gap:12px; flex-wrap:wrap; }
.actions { display:flex; gap:8px; }
.row { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; }
.stack { display:flex; flex-direction:column; gap:10px; margin-top:10px; }
label { display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--muted); }
label.check { flex-direction:row; align-items:center; padding-bottom:8px; }
label.grow { flex:1; min-width:200px; }
input[type=text], input[type=number], textarea, input[type=file] { font:inherit; padding:7px 9px; border:1px solid #cfd4dc; border-radius:6px; background:#fff; color:var(--ink); }
input[type=color] { width:48px; height:36px; padding:2px; border:1px solid #cfd4dc; border-radius:6px; }
textarea { width:100%; font-family: ui-monospace, Menlo, monospace; }
.qty { width:80px; }
.btn { display:inline-block; font:inherit; padding:8px 14px; border-radius:6px; border:1px solid #cfd4dc; background:#fff; color:var(--ink); cursor:pointer; text-decoration:none; text-align:center; }
.btn:hover { background:#f0f2f5; }
.btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn.primary:hover { filter:brightness(1.08); }
.btn.danger { color:var(--danger); }
.btn.big { padding:10px 20px; font-weight:600; }
.btn.small { padding:4px 10px; font-size:13px; }
.btn.block { display:block; width:100%; margin-top:8px; }
.btn:disabled { opacity:.55; cursor:not-allowed; }
.flash { padding:10px 14px; border-radius:8px; margin-bottom:14px; }
.flash.notice { background:#e7f5ec; color:#1b5e20; }
.flash.alert { background:#fdecea; color:#8e1c1c; }
.flash.warn { background:#fff6e0; color:#7a5200; }
.table { width:100%; border-collapse:collapse; }
.table th, .table td { text-align:left; padding:8px; border-bottom:1px solid var(--line); vertical-align:middle; }
.table th { font-size:12px; text-transform:uppercase; color:var(--muted); font-weight:600; }
.items .thumb { width:64px; height:64px; text-align:center; border-radius:6px; }
.items .thumb img { max-width:56px; max-height:56px; display:block; margin:auto; }
.swatch { display:inline-block; width:28px; height:28px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px #cfd4dc; }
form.inline { display:inline; } form.button_to { display:inline; }
.badge { padding:2px 8px; border-radius:10px; font-size:12px; background:#eef0f3; }
.badge.done { background:#e7f5ec; color:#1b5e20; } .badge.failed { background:#fdecea; color:#8e1c1c; } .badge.processing { background:#e8eefc; color:var(--accent); }
.checker { background-color:#fff; background-image: linear-gradient(45deg,#e5e7eb 25%,transparent 25%), linear-gradient(-45deg,#e5e7eb 25%,transparent 25%), linear-gradient(45deg,transparent 75%,#e5e7eb 75%), linear-gradient(-45deg,transparent 75%,#e5e7eb 75%); background-size:16px 16px; background-position:0 0,0 8px,8px -8px,-8px 0; }
.sheet { margin-bottom:22px; }
.sheet-head { display:flex; justify-content:space-between; margin-bottom:6px; gap:8px; }
.preview { border:1px solid var(--line); max-height:640px; overflow:auto; }
.preview img { display:block; width:100%; }
.building { color:var(--accent); font-weight:600; }
details summary { cursor:pointer; color:var(--accent); margin-top:12px; }
code { background:#f0f2f5; padding:1px 4px; border-radius:4px; }

/* Drag-and-drop uploader */
.dropzone { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:34px 16px; border:2px dashed #c3c9d3; border-radius:10px; background:#fafbfc; cursor:pointer; text-align:center; transition: border-color .15s, background .15s; }
.dropzone:hover, .dropzone:focus-visible { border-color:var(--accent); outline:none; }
.dropzone.over, body.dragging-files .dropzone { border-color:var(--accent); background:#eef3fd; }
.dropzone.busy { opacity:.6; cursor:progress; }
.dropzone-icon { font-size:30px; line-height:1; color:var(--accent); }

/* Hex color field */
.hex-field { display:inline-flex; align-items:center; border:1px solid #cfd4dc; border-radius:6px; background:#fff; overflow:hidden; }
.hex-field .hex-swatch { width:34px; height:34px; padding:0; border:0; border-right:1px solid #cfd4dc; border-radius:0; cursor:pointer; background:none; }
.hex-field .hex-swatch::-webkit-color-swatch-wrapper { padding:0; }
.hex-field .hex-swatch::-webkit-color-swatch { border:0; }
.hex-field .hex-text { width:92px; border:0; border-radius:0; font-family: ui-monospace, Menlo, monospace; text-transform:uppercase; }
.hex-field .hex-text:focus { outline:none; }
.hex-field:focus-within { border-color:var(--accent); box-shadow:0 0 0 2px #dbe5fb; }
.hex-text:invalid { color:var(--danger); }
form.item-edit { display:flex; gap:8px; align-items:center; flex-wrap:nowrap; }
.item-edit label { gap:0; }

/* Staged uploads (size + qty before Add) */
.staged { margin-top:14px; border:1px solid var(--line); border-radius:8px; padding:4px 12px 12px; }
.staged-table td { vertical-align:top; }
.staged-table .thumb { width:56px; }
.staged-table .thumb img { max-width:48px; max-height:48px; display:block; margin:auto; }
.staged-table .file-name { display:block; max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.staged-table label { flex-direction:row; align-items:center; gap:6px; }
.size-inputs { display:flex; align-items:center; gap:6px; flex-wrap:nowrap; }
.size-inputs .dim { width:78px; }
.lock { border:1px solid #cfd4dc; background:#fff; border-radius:6px; width:32px; height:32px; cursor:pointer; font-size:14px; }
.lock[aria-pressed="false"] { background:#f5f6f8; }
.size-note { margin-top:4px; min-height:1em; }
.row-message { margin-top:4px; font-size:13px; }
.row-message .bar { display:block; height:6px; width:160px; background:#e5e7eb; border-radius:3px; overflow:hidden; }
.row-message .fill { display:block; height:100%; background:var(--accent); transition:width .15s; }
.staged-row.failed, .staged-row.invalid { background:#fff7f7; }
.error-text { color:var(--danger); }
.warn-text { color:#9a6700; }
.ok-text { color:#2e7d32; }
button.link { background:none; border:0; padding:0; color:var(--accent); cursor:pointer; font:inherit; text-decoration:underline; }
.staged-footer { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:10px; flex-wrap:wrap; }
.staged-actions { display:flex; gap:8px; }
.staged-actions .btn.primary { min-width:96px; font-weight:600; }
.staged { overflow-x:auto; }
.staged-table th, .staged-table td { padding:8px 6px; }
.staged-table .qty { width:64px; }
.size-inputs .dim { width:66px; }
.staged-table th:nth-child(4) { white-space:nowrap; }
.staged-table .thumb { width:44px; padding-left:0; }
.staged-table .thumb img { max-width:40px; max-height:40px; }
.staged-table .file-name { max-width:170px; }
.staged-table .lock { width:28px; height:30px; font-size:12px; }
.staged-table .size-inputs { gap:4px; }
.staged-table .size-inputs .dim { width:64px; }
.staged-table .file-name { max-width:140px; }
.staged-table td:nth-child(2) { max-width:150px; }
.staged-table .file-name { max-width:126px; }
.staged-table td:nth-child(2) { max-width:136px; }
.staged-table .qty { width:58px; }
.staged-table td:last-child { padding-right:0; }
.staged-table td:last-child .btn { padding:4px 8px; }