@page { size: A4; margin: 0; }
body {
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  margin: 0;
  padding: 0;
  background:
    radial-gradient(circle at 20% 0%, rgba(159, 198, 255, 0.28), transparent 38%),
    radial-gradient(circle at 100% 100%, rgba(255, 218, 167, 0.25), transparent 36%),
    #f1f6fc;
}
h1 { text-align:center; padding:10px; }
.a4-page {
  position: relative;
  width: 210mm;
  height: 297mm;
  margin: auto;
  border: 1px solid #ccc;
  background: #fff;
  margin-bottom: 20px;
  page-break-after: always;
}
.domain {
  position: absolute;
  width: 95mm;
  min-height: 50px;
  background: #fafafa;
  border: 1px dotted #999;
  box-sizing: border-box;
  z-index: 2;
}
.page-header,
.page-footer {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0 12px;
  overflow: hidden;
  z-index: 1;
}
.page-header {
  top: 0;
}
.page-footer {
  bottom: 0;
  justify-content: flex-end;
}
.page-number {
  font-weight: 700;
  color: #1f3f66;
}
.drag-handle {
  background: #2a4d69;
  color: #fff;
  padding: 4px;
  cursor: grab;
  user-select: none;
  font-size: 12px;
}
.drag-handle:active {
  cursor: grabbing;
}
.resize-handle {
  position: absolute;
  left: 0;
  right: 0;
  height: 10px;
  cursor: ns-resize;
  background: transparent;
  z-index: 5;
  user-select: none;
}
.resize-top { top: -5px; }
.resize-bottom { bottom: -5px; }
h3 { margin: 5px; color: #4b86b4; }
table { border-collapse: collapse; width: 95%; margin: 5px auto; }
th, td { border: 1px solid #ccc; padding: 4px; font-size: 12px; }
th { background: #f2f2f2; }
.guide-line {
  position: absolute;
  background: red;
  opacity: 0.5;
  pointer-events: none;
  z-index: 9999;
  display: none;
}
.guide-line.horizontal { height: 1px; width: 100%; }
.guide-line.vertical { width: 1px; height: 100%; }

/* Improved print rules: hide editor UI and print only the #pages area. Keep drag-handle visible. */
@media print {
  /* Hide editor/sidebar/tooling and controls from print */
  .app-header,
  .menu-bar,
  #sidebar,
  #toolbar,
  #localstorage-tools,
  #exportBtn,
  #importBtn,
  #importFile,
  .no-print,
  [data-no-print],
  .resize-handle,
  .guide-line {
    display: none !important;
    visibility: hidden !important;
  }

  /* Print only the #pages area (and everything inside it). Hide everything else. */
  body * { visibility: hidden !important; }
  #pages, #pages * { visibility: visible !important; }
  #pages { position: absolute !important; left: 0; top: 0; width: 100% !important; }

  /* Ensure A4 pages print cleanly */
  .a4-page { page-break-after: always; border: none !important; box-shadow: none !important; margin: 0 !important; }

  /* Ensure drag handles are visible in print */
  .drag-handle { display: block !important; visibility: visible !important; color: #fff; background: #2a4d69; -webkit-print-color-adjust: exact; }
}