:root {
  --green: #168047;
  --red: #c84343;
  --dark: #1f2b24;
  --muted: #5f6f68;
  --page-width: 210mm;
  --page-height: 297mm;
  --scale: 1;
  --logo-size: 88px;
  /* Writing area fixed: starts after the left ribbon and below the header. */
  --safe-left: 38mm;
  --safe-top: 51mm;
  --safe-width: 154mm;
  --safe-height: 207mm;
}


* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  font-family: "Noto Sans Bengali", "Noto Sans", "Segoe UI", Arial, sans-serif;
  background: #eef2f0;
  color: var(--dark);
}

button, input, select { font: inherit; }

.toolbar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 340px;
  overflow-y: auto;
  padding: 18px;
  background: #ffffff;
  border-right: 1px solid #d7ddd9;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  z-index: 20;
}

.brand-panel {
  padding: 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(22,128,71,.12), rgba(200,67,67,.10));
  margin-bottom: 14px;
}

.brand-panel h1 {
  margin: 0 0 8px;
  font-size: 22px;
  color: var(--green);
}

.brand-panel p {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}

details {
  border: 1px solid #dce2de;
  border-radius: 14px;
  margin-bottom: 12px;
  padding: 12px;
  background: #fbfdfc;
}

summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--green);
  margin-bottom: 10px;
}

label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin: 10px 0;
  color: #33443a;
}

input[type="text"], input[type="file"], select, textarea {
  width: 100%;
  margin-top: 6px;
  border: 1px solid #cfd8d3;
  border-radius: 10px;
  padding: 10px 11px;
  background: #fff;
  color: #1b2f25;
}

textarea { resize: vertical; min-height: 44px; }

input[type="range"] {
  width: 100%;
  margin-top: 8px;
}

.button-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.button-grid button,
.actions button {
  border: 1px solid #cfd8d3;
  border-radius: 10px;
  background: #fff;
  padding: 9px 8px;
  cursor: pointer;
  transition: .15s ease;
}

.button-grid button:hover,
.actions button:hover {
  transform: translateY(-1px);
  border-color: var(--green);
}

.page-info {
  margin: 12px 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f2faf5;
  color: var(--green);
  font-weight: 800;
  font-size: 14px;
}

.actions {
  display: grid;
  gap: 8px;
  padding-bottom: 30px;
}

.actions .primary {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
  font-weight: 800;
}

.workspace {
  margin-left: 340px;
  min-height: 100vh;
  padding: 24px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.mobile-note {
  display: none;
  position: fixed;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 30;
  padding: 10px 12px;
  border-radius: 12px;
  background: #1d2a23;
  color: #fff;
  font-size: 13px;
  text-align: center;
}

.pages-zoom {
  transform: scale(var(--scale));
  transform-origin: top center;
  width: var(--page-width);
}

.pages-wrap {
  width: var(--page-width);
}

.a4-page {
  position: relative;
  width: var(--page-width);
  height: var(--page-height);
  margin: 0 auto 18px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 16px 60px rgba(0,0,0,.18);
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

.left-ribbon {
  position: absolute;
  left: 12mm;
  top: 9mm;
  bottom: 10mm;
  width: 8mm;
  background: var(--green);
}

.left-ribbon::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 54mm;
  background: var(--red);
}

.left-ribbon::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 54mm;
  border-left: 8mm solid var(--red);
  border-top: 10mm solid transparent;
  z-index: 1;
}

.letterhead-header {
  position: absolute;
  top: 8mm;
  left: 28mm;
  right: 13mm;
  min-height: 30mm;
  display: flex;
  align-items: flex-start;
  gap: 9mm;
}

.logo-box {
  width: 40mm;
  min-height: 28mm;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.logo-box img {
  max-width: var(--logo-size);
  max-height: 92px;
  object-fit: contain;
}

.header-copy {
  flex: 1;
  text-align: center;
  padding-top: 1mm;
}

.header-copy h2 {
  margin: 0 0 2mm;
  color: var(--red);
  font-size: 22px;
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: .2px;
}

.header-copy p {
  margin: 1mm 0;
  line-height: 1.2;
  color: #35594b;
  font-weight: 600;
}

.company-name-line { font-size: 22px; }
.address-line { font-size: 14px; }
.contact-line { font-size: 15px; }
.tagline-line {
  color: #53806a !important;
  font-size: 13px;
}

.top-rule {
  position: absolute;
  top: 38mm;
  left: 28mm;
  right: 17mm;
  height: 3mm;
  border-top: 1px solid rgba(200,67,67,.7);
}

.top-rule span {
  display: block;
  width: 82mm;
  height: 3mm;
  margin-top: -1px;
  background: var(--green);
}

.writing-box {
  position: absolute;
  top: calc(var(--safe-top) - 2mm);
  left: calc(var(--safe-left) - 2mm);
  width: calc(var(--safe-width) + 4mm);
  height: calc(var(--safe-height) + 4mm);
  border: 1.4px dashed rgba(22,128,71,.40);
  border-radius: 2mm;
  pointer-events: none;
  z-index: 3;
}

.editor-shell {
  position: absolute !important;
  top: var(--safe-top) !important;
  left: var(--safe-left) !important;
  width: var(--safe-width) !important;
  height: var(--safe-height) !important;
  overflow: hidden !important;
  clip-path: inset(0);
  contain: layout paint;
  isolation: isolate;
  z-index: 4;
  background: transparent;
}

.page-editor {
  position: relative !important;
  display: block;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  outline: none;
  background: transparent;
  font-size: 14px;
  line-height: 1.45;
  color: #111;
  text-align: left;
  word-break: normal;
  overflow-wrap: break-word;
  white-space: normal;
}

/* Strong guard: pasted Word/web text cannot position itself outside the fixed box. */
.page-editor,
.page-editor * {
  box-sizing: border-box !important;
  max-width: 100% !important;
}

.page-editor * {
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  float: none !important;
  transform: none !important;
}

.page-editor:focus {
  outline: 1.5px dashed rgba(22,128,71,.45);
  outline-offset: 3px;
}

.page-editor > :first-child { margin-top: 0 !important; }
.page-editor > :last-child { margin-bottom: 0 !important; }
.editor-shell::before { content: ''; position: absolute; inset: 0; pointer-events: none; }

.page-editor p,
.page-editor div {
  margin: 0 0 12px;
}

.page-editor ul,
.page-editor ol {
  margin-top: 0;
  margin-bottom: 12px;
  padding-left: 22px;
}

.page-editor table {
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  margin: 12px 0 10px;
  font-size: 13px;
}

.page-editor th,
.page-editor td {
  border: 1px solid #111;
  padding: 5px 6px;
  min-height: 20px;
  vertical-align: middle;
  word-break: normal;
  overflow-wrap: break-word;
}

.page-editor th {
  background: #f1f1f1;
  font-weight: 800;
  text-align: center;
}

.page-number {
  position: absolute;
  right: 17mm;
  bottom: 25mm;
  color: #79847e;
  font-size: 10px;
}

.letterhead-footer {
  position: absolute;
  left: 29mm;
  right: 16mm;
  bottom: 7mm;
  z-index: 2;
}

.footer-line {
  height: 1px;
  background: rgba(200,67,67,.75);
  margin-bottom: 6mm;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1.45fr;
  gap: 10mm;
  align-items: center;
}

.footer-item {
  display: flex;
  align-items: center;
  gap: 3mm;
  min-width: 0;
}

.footer-icon {
  width: 10mm;
  height: 10mm;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--green);
  color: #fff;
  font-size: 16px;
  flex: 0 0 auto;
}

.footer-item p {
  margin: 0;
  font-size: 10.5px;
  line-height: 1.22;
  color: var(--red);
  font-weight: 700;
}

@media (max-width: 900px) {
  .toolbar {
    position: relative;
    width: 100%;
    inset: auto;
    border-right: 0;
    border-bottom: 1px solid #d7ddd9;
  }

  .workspace {
    margin-left: 0;
    padding: 14px 0 68px;
  }

  .mobile-note { display: block; }
}

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

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

  .toolbar,
  .mobile-note {
    display: none !important;
  }

  .workspace {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
  }

  .pages-zoom {
    transform: none !important;
    width: 210mm !important;
  }

  .pages-wrap {
    width: 210mm !important;
  }

  .a4-page {
    display: block !important;
    width: 210mm !important;
    height: 297mm !important;
    margin: 0 !important;
    box-shadow: none !important;
    page-break-after: always;
    break-after: page;
  }

  .a4-page:last-child {
    page-break-after: auto;
    break-after: auto;
  }

  .page-editor:focus {
    outline: none !important;
  }

  .editor-shell {
    position: absolute !important;
    top: var(--safe-top) !important;
    left: var(--safe-left) !important;
    width: var(--safe-width) !important;
    height: var(--safe-height) !important;
    overflow: hidden !important;
    clip-path: inset(0) !important;
  }

  .page-editor {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }

  .writing-box {
    display: none !important;
  }
}