* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; background: #f4f4f5; color: #111; line-height: 1.45; }
header { background: #fff; padding: 18px 24px 14px; border-bottom: 1px solid #e5e5e7; }
.brand { text-align: center; line-height: 0; }
.brand svg { max-width: 200px; width: 60%; height: auto; }
.store { text-align: center; font-size: 11px; letter-spacing: 0.14em; color: #888; text-transform: uppercase; margin-top: 4px; }
.subtitle { text-align: center; font-size: 12px; color: #444; margin-top: 6px; font-weight: 500; }
.author { text-align: center; font-size: 10px; color: #999; margin-top: 4px; letter-spacing: 0.06em; }
.author strong { color: #555; }
.badge { background: #d4edda; color: #1e7e34; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 10px; letter-spacing: 0.06em; margin-left: 6px; }
.layout { display: grid; grid-template-columns: 380px 1fr; gap: 20px; max-width: 1600px; margin: 20px auto; padding: 0 20px; }
@media (max-width: 900px) { .layout { grid-template-columns: 1fr; } }
.panel { background: #fff; border: 1px solid #e5e5e7; border-radius: 8px; padding: 16px; }
.panel h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: #555; margin-bottom: 10px; }
.input-block { margin-bottom: 14px; }
.input-block label { display: block; font-size: 11px; color: #777; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; font-weight: 600; }
textarea { width: 100%; min-height: 220px; padding: 10px; border: 1px solid #d4d4d6; border-radius: 6px; font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: 12px; resize: vertical; }
textarea:focus { outline: none; border-color: #111; }
.hint { font-size: 11px; color: #888; margin-top: 4px; line-height: 1.4; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.btn { padding: 9px 14px; border: 1px solid #111; background: #111; color: #fff; border-radius: 6px; font-size: 12px; cursor: pointer; font-weight: 600; letter-spacing: 0.04em; }
.btn:hover { background: #333; }
.btn:disabled { background: #94a3b8; border-color: #94a3b8; cursor: wait; }
.btn.secondary { background: #fff; color: #111; }
.btn.secondary:hover { background: #f5f5f5; }
.btn.pdf { background: #1e40af; border-color: #1e40af; color: #fff; }
.btn.pdf:hover { background: #172a72; }
.toggles { display: flex; gap: 14px; font-size: 12px; margin-top: 10px; color: #555; flex-wrap: wrap; }
.toggles label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.quick-search { width: 100%; padding: 8px 12px; border: 1px solid #d4d4d6; border-radius: 6px; font-size: 12px; }
.quick-search:focus { outline: none; border-color: #111; }
.quick-results { max-height: 360px; overflow-y: auto; border: 1px solid #e5e5e7; border-radius: 6px; margin-top: 6px; }
.quick-row { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-bottom: 1px solid #f0f0f0; cursor: pointer; }
.quick-row:hover { background: #fafafa; }
.quick-row img { width: 75px; height: 40px; object-fit: cover; object-position: center 78%; border: 1px solid #e5e5e7; border-radius: 3px; background: linear-gradient(135deg, #f0f0f0, #e0e0e0); flex-shrink: 0; }
.quick-row .qr-info { flex: 1; min-width: 0; font-size: 11.5px; }
.quick-row .qr-info .qr-name { font-weight: 500; color: #111; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quick-row .qr-info .qr-sku { font-family: 'SF Mono', Menlo, Consolas, monospace; color: #888; font-size: 10.5px; }
.quick-row .add-x { background: #111; color: #fff; border: none; border-radius: 4px; padding: 4px 8px; font-size: 11px; cursor: pointer; }
.quick-row .add-x:hover { background: #333; }
.quick-row .add-x.rm { background: #b91c1c; }
.quick-row .add-x.rm:hover { background: #7f1d1d; }
.errors { font-size: 12px; color: #991b1b; background: #fef2f2; border: 1px solid #fecaca; padding: 8px 10px; border-radius: 6px; margin-bottom: 10px; max-height: 120px; overflow-y: auto; }
.preview-area { padding: 20px; background: #6b7280; min-height: 400px; border-radius: 8px; overflow: auto; }
.sheet { width: 210mm; height: 296mm; background: #fff; margin: 0 auto 16px; padding: 0; box-shadow: 0 4px 24px rgba(0,0,0,0.2); display: grid; grid-template-columns: 70mm 70mm 70mm; grid-template-rows: repeat(8, 37mm); gap: 0; page-break-after: always; box-sizing: border-box; }
.sticker { width: 70mm; height: 37mm; overflow: hidden; background: #f4f1ec; position: relative; display: flex; align-items: center; justify-content: center; margin: 0; box-sizing: border-box; outline: 0.5pt solid #e5e5e7; outline-offset: -0.5pt; cursor: pointer; transition: outline 0.1s; }
.sticker img { width: 100%; height: 100%; object-fit: cover; object-position: center 75%; display: block; }
.sticker .sticker-label { position: absolute; bottom: 0; left: 0; right: 0; background: transparent; font-size: 7pt; padding: 1px 4px; font-family: 'SF Mono', Menlo, Consolas, monospace; color: #111; text-align: center; line-height: 1.1; letter-spacing: 0.02em; font-weight: 700; text-shadow: 0 0 2px #fff, 1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff; }
.sticker .sticker-store { position: absolute; top: 0; right: 0; background: transparent; color: #111; font-size: 5pt; padding: 1px 3px; font-weight: 700; letter-spacing: 0.04em; line-height: 1.1; font-family: -apple-system, Helvetica, sans-serif; text-transform: uppercase; text-shadow: 0 0 2px #fff, 1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff; }
.sticker .sticker-delete { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; background: #dc2626; color: #fff; font-size: 16px; font-weight: bold; display: none; align-items: center; justify-content: center; cursor: pointer; z-index: 10; border: 2px solid #fff; line-height: 1; box-shadow: 0 2px 6px rgba(0,0,0,0.3); user-select: none; }
.sticker .sticker-delete:hover { background: #991b1b; transform: scale(1.1); }
.sticker.selected .sticker-delete { display: flex; }
.sticker.selected { outline: 2px solid #dc2626 !important; outline-offset: -2px; }
.sticker.empty { background: #fafafa; opacity: 0.4; cursor: default; }
.sticker.empty .sticker-delete { display: none !important; }
.sticker.loading { background: #eef2ff; }
.sticker.loading::after { content: 'Loading photo…'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 8pt; color: #6366f1; font-family: -apple-system, Helvetica, sans-serif; }
.sticker.no-img { background: #fef2f2; }
.sticker.no-img::after { content: attr(data-sku); font-size: 8pt; color: #991b1b; font-family: 'SF Mono', Menlo, Consolas, monospace; text-align: center; padding: 4px; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.empty-state { text-align: center; padding: 60px 20px; color: #ccc; font-size: 13px; }
.preview-toolbar { background: #fff; border-radius: 6px; padding: 10px 14px; margin-bottom: 10px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.preview-toolbar .info { flex: 1; font-size: 12px; color: #555; }
.preview-toolbar .info strong { color: #111; }
footer.attribution { text-align: center; padding: 12px; color: #777; font-size: 11px; background: #fff; border-top: 1px solid #e5e5e7; }
footer.attribution strong { color: #111; }
@media print {
  @page { size: A4 portrait; margin: 0 !important; }
  html, body { background: #fff !important; margin: 0 !important; padding: 0 !important; width: 210mm !important; }
  header, footer, footer.attribution, .panel, .input-area, .preview-area > .toolbar, .preview-toolbar { display: none !important; }
  .layout { display: block !important; max-width: none !important; padding: 0 !important; margin: 0 !important; gap: 0 !important; }
  .preview-area { background: #fff !important; padding: 0 !important; margin: 0 !important; min-height: 0 !important; overflow: visible !important; }
  .sheet { box-shadow: none !important; margin: 0 !important; padding: 0 !important; width: 210mm !important; height: 296mm !important; max-height: 296mm !important; }
  .sticker { outline: none !important; border: 0 !important; margin: 0 !important; padding: 0 !important; width: 70mm !important; height: 37mm !important; }
  .sticker img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
  .sticker-delete, .sticker.selected { outline: none !important; }
  .sticker-delete { display: none !important; }
}
/* Login overlay */
#lock-overlay { position: fixed; inset: 0; z-index: 99999; background: linear-gradient(135deg,#1a1a1a,#333); display: flex; align-items: center; justify-content: center; }
#lock-box { background: #fff; border-radius: 14px; padding: 34px 30px; width: 360px; max-width: 92vw; box-shadow: 0 18px 60px rgba(0,0,0,0.5); text-align: center; }
#lock-box .gg { font-family: Georgia, serif; font-size: 20px; letter-spacing: 3px; color: #111; }
#lock-box .gg small { display: block; font-family: Helvetica, sans-serif; font-size: 8px; letter-spacing: 3px; color: #999; margin-top: 3px; }
#lock-box h1 { font-size: 15px; margin: 18px 0 4px; color: #111; }
#lock-box p.sub { font-size: 12px; color: #777; margin-bottom: 20px; }
#lock-box input { width: 100%; padding: 12px 14px; border: 2px solid #d4d4d6; border-radius: 8px; font-size: 15px; text-align: center; font-family: 'SF Mono', Menlo, Consolas, monospace; margin-bottom: 10px; box-sizing: border-box; }
#lock-box input:focus { outline: none; border-color: #111; }
#lock-btn { width: 100%; padding: 12px; background: #111; color: #fff; border: none; border-radius: 8px; font-size: 14px; font-weight: 700; cursor: pointer; }
#lock-btn:hover { background: #333; }
#lock-msg { margin-top: 14px; font-size: 12.5px; min-height: 18px; }
#lock-msg.err { color: #b91c1c; }
#lock-msg.ok { color: #1e7e34; }
#lock-foot { margin-top: 20px; font-size: 10px; color: #aaa; letter-spacing: 0.04em; }
#lock-foot strong { color: #666; }
.lock-remember-row { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: #777; margin: 8px 0 10px; cursor: pointer; user-select: none; justify-content: center; }
body.locked { overflow: hidden; }