:root{
  --sdp-primary:#4f46e5;
  --sdp-primary-dark:#4338ca;
  --sdp-ink:#1e1b4b;
}
body{font-family:'Segoe UI',system-ui,sans-serif;color:#1f2937;}
.btn-primary{background:var(--sdp-primary);border-color:var(--sdp-primary);}
.btn-primary:hover{background:var(--sdp-primary-dark);border-color:var(--sdp-primary-dark);}
.hero{background:linear-gradient(135deg,#eef2ff,#f8fafc);padding:70px 0;}
.hero h1{font-weight:800;color:var(--sdp-ink);}
.feature-card{border:1px solid #eef0f4;border-radius:16px;padding:24px;height:100%;background:#fff;transition:transform .15s;}
.feature-card:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(79,70,229,.1);}

/* ---------- Print Tool ---------- */
.tool-shell{display:flex;min-height:80vh;}
.tool-sidebar{width:320px;flex-shrink:0;background:#fff;border-right:1px solid #e5e7eb;padding:20px;overflow-y:auto;}
.tool-canvas{flex:1;background:#e2e8f0;overflow:auto;padding:30px;display:flex;flex-direction:column;align-items:center;gap:24px;}
.dropzone{border:2px dashed #c7d2fe;border-radius:12px;padding:24px;text-align:center;background:#eef2ff;cursor:pointer;transition:.15s;}
.dropzone.dragover{background:#e0e7ff;border-color:var(--sdp-primary);}
.thumb-list{display:flex;flex-direction:column;gap:8px;max-height:260px;overflow-y:auto;}
.thumb-item{display:flex;align-items:center;gap:8px;border:1px solid #e5e7eb;border-radius:8px;padding:6px;background:#fff;cursor:grab;}
.thumb-item img{width:42px;height:42px;object-fit:cover;border-radius:4px;}
.thumb-item .thumb-name{font-size:.78rem;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.thumb-item.dragging{opacity:.4;}

.a4-page{
  background:#fff;
  box-shadow:0 4px 18px rgba(0,0,0,.15);
  position:relative;
  display:grid;
  gap:var(--gap-mm,4mm);
  box-sizing:border-box;
}
.a4-page .cell{
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  border:1px dashed transparent;
}
.a4-page .cell img{max-width:100%;max-height:100%;object-fit:contain;}
.page-label{font-size:.75rem;color:#64748b;text-align:center;}

@media (max-width: 991px){
  .tool-shell{flex-direction:column;}
  .tool-sidebar{width:100%;border-right:none;border-bottom:1px solid #e5e7eb;}
}