*{box-sizing:border-box}body{margin:0;background:#f4f6f8;color:#17202a;font-family:Inter,system-ui,-apple-system,Segoe UI,Arial,sans-serif}.topbar{height:68px;background:#101820;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 28px}.topbar strong{font-size:19px}.topbar span{font-size:12px;opacity:.65;margin-left:14px}.app{max-width:1400px;margin:24px auto;padding:0 18px;display:grid;gap:20px}.card{background:#fff;border:1px solid #e1e5e9;border-radius:16px;box-shadow:0 8px 30px #17202a0b;padding:22px}.section-title{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:18px}.section-title h2{font-size:20px;margin:0}.section-title span{font-size:13px;color:#6b7280}.upload-row,.sheet-actions,.result-actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap}.upload-btn,.tool,.primary,.ghost{border:1px solid #d8dde3;border-radius:9px;padding:10px 14px;background:#fff;cursor:pointer;font-weight:600;font-size:13px}.upload-btn:hover,.tool:hover,.ghost:hover{background:#f1f4f7}.primary{background:#1463ff;color:white;border-color:#1463ff}.primary:hover{background:#0d52dc}.ghost{background:#ffffff20;color:#fff;border-color:#ffffff40}.tool:disabled,.primary:disabled{opacity:.45;cursor:not-allowed}.editor-grid{display:grid;grid-template-columns:minmax(400px,1fr) 280px;gap:20px;margin-top:18px}.crop-area{height:500px;background:#101820;border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center}.crop-area img{display:block;max-width:100%}.crop-area #cropEmpty{color:#94a3b8}.controls{border:1px solid #e4e8ec;border-radius:12px;padding:16px}.controls h3,.result-row h3{margin:0 0 13px;font-size:14px}.controls label,.settings-inline label{font-size:12px;color:#59636e;display:grid;gap:5px;margin-bottom:11px}.controls input,.controls select,.settings-inline input,.settings-inline select{width:100%;padding:9px;border:1px solid #d9dee5;border-radius:7px;background:#fff}.size-note{font-size:11px;color:#64748b;margin-top:10px}.result-row{display:flex;align-items:end;gap:30px;margin-top:20px;padding-top:20px;border-top:1px solid #e8ebef}.result-row canvas{width:124px;height:159px;border:1px solid #cfd5dc;display:block;background:#fff}.result-actions{padding-bottom:3px}.settings-inline{display:flex;gap:10px;align-items:end;flex-wrap:wrap;padding:12px;background:#f7f8fa;border:1px solid #e5e8ec;border-radius:10px;margin-bottom:18px}.settings-inline label{width:145px;margin:0}.settings-inline button{height:38px}.a4-page{background:#e7eaee;padding:20px;border-radius:12px;margin-bottom:20px;overflow:auto}.a4-paper{background:white;margin:auto;position:relative;box-shadow:0 5px 20px #0001}.slot{position:absolute;border:1px dashed #b7c0ca;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#fafafa;cursor:pointer}.slot.empty:hover{background:#eef5ff;border-color:#1463ff}.slot img{width:100%;height:100%;object-fit:fill;display:block}.slot .plus{font-size:18px;color:#9aa5b1}.slot .remove{position:absolute;right:2px;top:2px;width:22px;height:22px;border:0;border-radius:50%;background:#111b;color:white;font-size:12px;display:none;cursor:pointer}.slot.occupied:hover .remove{display:block}.page-label{text-align:center;font-size:12px;color:#66717d;margin:0 0 8px}.hint{font-size:12px;color:#66717d;margin:10px 0 0}.print-only{display:none}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:#111820;color:#fff;padding:11px 16px;border-radius:9px;opacity:0;pointer-events:none;transition:.2s;z-index:99;font-size:13px}#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}@media(max-width:850px){.editor-grid{grid-template-columns:1fr}.crop-area{height:390px}.topbar{padding:0 15px}.topbar span{display:none}}

@page {
  size: A4 portrait;
  margin: 0;
}

.a4-page {
  background: #e5e7eb;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 12px;
  overflow: auto;
}

.a4-paper {
  width: 567px;
  height: 801.9px;
  background: #fff;
  position: relative;
  margin: auto;
  box-shadow: 0 5px 20px rgba(0,0,0,.12);
  overflow: hidden;
}

.a4-canvas {
  display: block;
  width: 567px;
  height: 801.9px;
  background: #fff;
}

.a4-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.slot-overlay {
  position: absolute;
  margin: 0;
  padding: 0;
  border: 1px dashed rgba(120,130,140,.35);
  background: transparent;
  cursor: pointer;
  box-sizing: border-box;
}

.slot-overlay.empty:hover {
  background: rgba(20,99,255,.08);
  border-color: #1463ff;
}

.slot-overlay.occupied {
  border-color: transparent;
}

.slot-overlay.occupied:hover {
  background: rgba(0,0,0,.08);
  border-color: rgba(0,0,0,.25);
}

.empty-plus {
  color: #9aa5b1;
  font-size: 18px;
}

.remove-dot {
  display: none;
  position: absolute;
  right: 3px;
  top: 3px;
  width: 22px;
  height: 22px;
  line-height: 22px;
  border-radius: 50%;
  background: #111820;
  color: #fff;
  font-size: 14px;
  text-align: center;
}

.slot-overlay.occupied:hover .remove-dot {
  display: block;
}

@media print {
  html,
  body {
    width: 210mm !important;
    height: 297mm !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
  }

  body * {
    visibility: hidden !important;
  }

  #pages,
  #pages .a4-page,
  #pages .a4-paper,
  #pages .a4-canvas {
    visibility: visible !important;
  }

  .topbar,
  .editor-card,
  .sheet-card > .section-title,
  .settings-inline,
  .hint,
  .page-label,
  #toast,
  .a4-overlay {
    display: none !important;
  }

  .app,
  .sheet-card {
    display: block !important;
    width: 210mm !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .a4-page {
    display: block !important;
    width: 210mm !important;
    height: 297mm !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #fff !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    page-break-after: always !important;
    break-after: page !important;
  }

  .a4-paper {
    width: 210mm !important;
    height: 297mm !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  .a4-canvas {
    display: block !important;
    width: 210mm !important;
    height: 297mm !important;
    max-width: none !important;
    margin: 0 !important;
  }
}