: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);}

/* ---------- Tools Hub ---------- */
.tool-hub-card{border:1px solid #eef0f4;border-radius:16px;padding:22px;height:100%;background:#fff;display:flex;flex-direction:column;transition:transform .15s;}
.tool-hub-card:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(79,70,229,.1);}
.tool-hub-icon{width:48px;height:48px;border-radius:12px;background:#eef2ff;color:#4f46e5;display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin-bottom:12px;}

/* ---------- Print Tool (shared by all layout tools) ---------- */
.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;}

.id-slot{border:2px dashed #c7d2fe;border-radius:10px;background:#eef2ff;aspect-ratio:85.6/54;display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;position:relative;}
.id-slot img{width:100%;height:100%;object-fit:contain;background:#fff;}
.id-slot-empty{color:#4f46e5;text-align:center;}

/* ---------- Ad Slots ----------
   These are always wrapped with .no-print, and assets/css/print.css
   independently hides everything outside #printArea, so ad content
   can never appear in a printed page regardless of where it's placed. */
.ad-slot{background:#f8fafc;border:1px dashed #cbd5e1;border-radius:10px;padding:10px;margin:16px auto;text-align:center;overflow:hidden;max-width:100%;}
.ad-slot-label{display:block;font-size:.65rem;letter-spacing:.05em;text-transform:uppercase;color:#94a3b8;margin-bottom:6px;}
.ad-slot-header{max-width:970px;}
.ad-slot-footer{max-width:970px;}
.ad-slot-sidebar{margin-top:20px;}
.ad-slot-incontent{max-width:728px;}

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