/* ============================================================================
   EDITOR CSS — Professional Document Editor Layout
   ============================================================================ */

/* ── EDITOR HEADER ─────────────────────────────────────────────────────── */
.editor-header {
  height: 56px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--sp-5);
  gap: var(--sp-4);
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: var(--shadow-xs);
}

.header-left {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-width: 0;
  flex: 1;
}

.logo-link {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-1);
  text-decoration: none;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}

.logo-link-icon {
  width: 28px;
  height: 28px;
  background: var(--primary);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.header-divider {
  width: 1px;
  height: 20px;
  background: var(--border);
  flex-shrink: 0;
}

.filename-input {
  border: none;
  background: transparent;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-2);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-sm);
  max-width: 180px;
  transition: all var(--t-fast);
}
.filename-input:focus {
  outline: none;
  background: var(--bg-alt);
  color: var(--text-1);
  box-shadow: none;
}

.header-center {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.action-group {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  background: var(--bg-alt);
  padding: var(--sp-1);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
}

.header-right {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: 1;
  justify-content: flex-end;
}

/* Page size selector in header */
.page-size-select {
  width: auto;
  padding: var(--sp-2) var(--sp-6) var(--sp-2) var(--sp-3);
  font-size: 0.8125rem;
  height: 34px;
  border-radius: var(--r-md);
  background-size: 14px;
}

/* ── EDITOR LAYOUT ─────────────────────────────────────────────────────── */
.editor-root {
  display: grid;
  grid-template-columns: 300px 1fr 260px;
  height: calc(100vh - 56px);
  overflow: hidden;
}

/* ── LEFT PANEL ─────────────────────────────────────────────────────────── */
.left-panel {
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.panel-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
}

.panel-tab {
  flex: 1;
  padding: var(--sp-3) var(--sp-2);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-3);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all var(--t-fast);
  border-bottom: 2px solid transparent;
  letter-spacing: 0.01em;
}
.panel-tab:hover { color: var(--text-1); }
.panel-tab.active { color: var(--primary); border-bottom-color: var(--primary); background: var(--surface); }

.panel-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

.panel-section {
  padding: var(--sp-5);
  border-bottom: 1px solid var(--border);
}

.panel-section-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--sp-4);
}

/* Logo upload zone */
.logo-drop-zone {
  border: 1.5px dashed var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  text-align: center;
  cursor: pointer;
  transition: all var(--t-base);
  background: var(--bg-alt);
  position: relative;
}
.logo-drop-zone:hover, .logo-drop-zone.dragover {
  border-color: var(--primary);
  background: var(--primary-glow);
}
.logo-drop-zone input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
  border: none;
  padding: 0;
}
.logo-drop-zone svg { margin: 0 auto var(--sp-2); color: var(--text-3); }
.logo-drop-text { font-size: 0.8rem; color: var(--text-3); font-weight: 500; }
.logo-preview-wrap {
  position: relative;
  display: inline-block;
}
.logo-preview-img {
  max-width: 100%;
  max-height: 64px;
  border-radius: var(--r-md);
  object-fit: contain;
}
.logo-remove-btn {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 20px;
  height: 20px;
  background: var(--danger);
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  line-height: 1;
}

/* Color picker */
.color-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.color-swatches {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: var(--sp-3);
}
.color-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform var(--t-fast), border-color var(--t-fast);
}
.color-swatch:hover { transform: scale(1.2); }
.color-swatch.active { border-color: var(--text-1); }
.color-hex-input {
  flex: 1;
  padding: var(--sp-2) var(--sp-3);
  font-size: 0.8rem;
  font-family: var(--font-mono);
  border-radius: var(--r-md);
}

/* Alignment buttons */
.align-group {
  display: flex;
  gap: var(--sp-1);
  background: var(--bg-alt);
  padding: 3px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
}
.align-btn {
  flex: 1;
  padding: var(--sp-2);
  border: none;
  background: transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--text-3);
  transition: all var(--t-fast);
  display: flex;
  align-items: center;
  justify-content: center;
}
.align-btn:hover { color: var(--text-1); background: var(--surface); }
.align-btn.active { background: var(--surface); color: var(--primary); box-shadow: var(--shadow-sm); }

/* Template list */
.templates-grid-panel {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-2);
}
.template-thumb {
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  cursor: pointer;
  transition: all var(--t-base);
  position: relative;
  background: #fff;
}
.template-thumb:hover { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-glow); transform: translateY(-2px); }
.template-thumb.active { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); }
.template-thumb.active::after {
  content: '✓';
  position: absolute;
  top: 4px; right: 4px;
  width: 16px; height: 16px;
  background: var(--primary);
  color: #fff;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

/* Real mini preview area */
.tpl-thumb-preview {
  aspect-ratio: 0.707;
  overflow: hidden;
  position: relative;
  background: #fff;
}
.mp-doc {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.mp-line {
  height: 3px;
  background: #e2e8f0;
  border-radius: 2px;
  margin-bottom: 4px;
  width: 100%;
}
.mp-w90 { width: 90%; }
.mp-w85 { width: 85%; }
.mp-w75 { width: 75%; }
.mp-w60 { width: 60%; }
.mp-gap { margin-top: 8px; }

/* Label below preview */
.tpl-thumb-label {
  padding: 5px 6px;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-2);
  text-align: center;
  background: var(--bg);
  border-top: 1px solid var(--border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.template-thumb:hover .tpl-thumb-label { color: var(--primary); }
.template-thumb.active .tpl-thumb-label { color: var(--primary); }

/* Form actions */
.panel-actions {
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--border);
  display: flex;
  gap: var(--sp-2);
  background: var(--surface);
}
.panel-actions .btn { flex: 1; font-size: 0.8125rem; padding: var(--sp-2) var(--sp-3); }

/* ── CANVAS AREA ────────────────────────────────────────────────────────── */
.canvas-area {
  background: var(--bg-alt);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

/* ── WRITING TOOLBAR (Word-style) ───────────────────────────────────────── */
.writing-toolbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.toolbar-row {
  display: flex;
  align-items: center;
  padding: 4px var(--sp-3);
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  min-height: 40px;
}
.toolbar-row::-webkit-scrollbar { display: none; }

.toolbar-btn {
  height: 30px;
  min-width: 28px;
  padding: 0 5px;
  border: none;
  background: transparent;
  color: var(--text-2);
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: var(--font-sans);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  transition: all var(--t-fast);
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
}
.toolbar-btn:hover { background: var(--bg-alt); color: var(--text-1); }
.toolbar-btn.active { background: var(--primary-glow); color: var(--primary); }

.toolbar-sep {
  width: 1px;
  height: 20px;
  background: var(--border);
  margin: 0 4px;
  flex-shrink: 0;
}

.toolbar-select {
  height: 28px;
  padding: 0 24px 0 6px;
  font-size: 0.8rem;
  border-radius: var(--r-sm);
  width: auto;
  flex-shrink: 0;
}
.toolbar-font-family { min-width: 140px; max-width: 160px; }
.toolbar-font-size   { min-width: 52px; }

/* Text / highlight color buttons */
.toolbar-color-wrap {
  position: relative;
  flex-shrink: 0;
}
.toolbar-color-btn {
  flex-direction: column;
  gap: 1px;
  padding: 4px 5px;
}
.color-indicator {
  display: block;
  width: 18px;
  height: 3px;
  border-radius: 2px;
  margin-top: 1px;
}

/* ── TOOLBAR DROPDOWNS (table / emoji / symbol) ──────────────────────────── */
.toolbar-dropdown-wrap {
  position: relative;
  flex-shrink: 0;
}
.toolbar-dropdown {
  display: none;
  position: fixed;
  z-index: 9000;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-float);
}
.toolbar-dropdown.open { display: block; }

/* Table picker */
.table-picker {
  padding: var(--sp-3);
  min-width: 220px;
}
.table-picker-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-3);
  margin-bottom: var(--sp-2);
  text-align: center;
}
.table-picker-grid {
  display: grid;
  grid-template-columns: repeat(8, 22px);
  gap: 3px;
}
.table-picker-cell {
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--border);
  border-radius: 3px;
  cursor: pointer;
  transition: all var(--t-fast);
  background: var(--surface);
}
.table-picker-cell:hover,
.table-picker-cell.highlighted {
  background: var(--primary-glow);
  border-color: var(--primary);
}

/* Emoji picker */
.emoji-picker {
  width: 300px;
  max-height: 340px;
  flex-direction: column;
}
.emoji-picker.open {
  display: flex !important;
}
.emoji-search-wrap {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border);
}
.emoji-search {
  width: 100%;
  height: 30px;
  font-size: 0.8rem;
  padding: 0 var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-alt);
  color: var(--text-1);
}
.emoji-search:focus { outline: none; border-color: var(--primary); }
.emoji-categories {
  display: flex;
  gap: 2px;
  padding: 4px var(--sp-2);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}
.emoji-categories::-webkit-scrollbar { display: none; }
.emoji-cat-btn {
  height: 26px;
  min-width: 26px;
  padding: 0 4px;
  border: none;
  background: transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 0.9rem;
  transition: background var(--t-fast);
  flex-shrink: 0;
}
.emoji-cat-btn:hover,
.emoji-cat-btn.active { background: var(--primary-glow); }
.emoji-grid {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-2);
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  align-content: flex-start;
}
.emoji-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-fast);
  flex-shrink: 0;
}
.emoji-btn:hover { background: var(--bg-alt); transform: scale(1.2); }

/* Symbol picker */
.symbol-picker {
  width: 320px;
  padding: var(--sp-3);
}
.symbol-picker-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--sp-2);
}
.symbol-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
.symbol-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--t-fast);
  color: var(--text-1);
}
.symbol-btn:hover {
  background: var(--primary-glow);
  border-color: var(--primary);
  color: var(--primary);
  transform: scale(1.15);
}

/* ── CONTENT PANEL — FIELD TOGGLES ──────────────────────────────────────── */
.field-row {
  margin-bottom: var(--sp-3);
  transition: opacity var(--t-fast);
}
.field-row.field-hidden > input,
.field-row.field-hidden > textarea { display: none; }
.field-row.field-hidden { opacity: 0.5; }

.field-row-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: 5px;
}

.field-label-text {
  flex: 1;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-2);
  letter-spacing: 0.01em;
}
.field-label-text[contenteditable="true"] {
  outline: none;
  border-bottom: 1.5px solid var(--primary);
  color: var(--text-1);
  padding: 0 2px;
}

.field-rename-btn {
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 0.75rem;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--t-fast);
  flex-shrink: 0;
}
.field-row-head:hover .field-rename-btn { opacity: 1; }

/* Toggle switch */
.toggle-switch {
  position: relative;
  width: 32px;
  height: 18px;
  flex-shrink: 0;
  cursor: pointer;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-track {
  position: absolute;
  inset: 0;
  background: var(--border);
  border-radius: var(--r-full);
  transition: background var(--t-fast);
}
.toggle-track::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform var(--t-fast);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.toggle-switch input:checked + .toggle-track { background: var(--primary); }
.toggle-switch input:checked + .toggle-track::after { transform: translateX(14px); }

/* Custom fields */
.custom-field-row {
  margin-bottom: var(--sp-3);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-3);
}
.custom-field-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}
.custom-field-label-input {
  flex: 1;
  height: 26px;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0 var(--sp-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text-1);
}
.custom-field-label-input:focus {
  outline: none;
  border-color: var(--primary);
}
.custom-field-delete {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: var(--danger);
  cursor: pointer;
  border-radius: var(--r-sm);
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-fast);
  flex-shrink: 0;
}
.custom-field-delete:hover { background: rgba(239,68,68,0.1); }

/* Inline table styling in letter body */
#letterBody table {
  border-collapse: collapse;
  width: 100%;
  margin: var(--sp-4) 0;
}
#letterBody table td,
#letterBody table th {
  border: 1px solid #cbd5e1;
  padding: 6px 10px;
  min-width: 60px;
  font-size: 14px;
  vertical-align: top;
}
#letterBody table th {
  background: #f1f5f9;
  font-weight: 600;
}

/* Page canvas scroll wrapper */
.canvas-scroll {
  flex: 1;
  overflow: auto;
  display: flex;
  justify-content: center;
  padding: var(--sp-10) var(--sp-8);
}

/* A4 page wrapper — groups all page sheets */
.a4-page {
  width: 794px;
  background: transparent;
  flex-shrink: 0;
  position: relative;
  transition: transform var(--t-base);
  transform-origin: top center;
  display: flex;
  flex-direction: column;
  gap: 24px; /* gap between page sheets */
}

/* Individual page sheet — grows with content in editor, always ≥ A4 height */
.page-sheet {
  width: 794px;
  min-height: 1123px;
  background: #fff;
  box-shadow: var(--shadow-float);
  border-radius: 2px;
  position: relative;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  /* No overflow:hidden — content determines height */
}

/* Page-break dashed label */
.page-break-guide::after {
  content: attr(data-label);
  position: absolute;
  right: 8px;
  top: -16px;
  font-size: 9px;
  color: #93c5fd;
  font-family: var(--font-sans);
  letter-spacing: 0.05em;
  pointer-events: none;
}

/* Letterhead (non-editable) */
.letterhead-zone {
  user-select: none;
  pointer-events: none;
}

/* Editable letter body — single contenteditable spanning all content */
.letter-body {
  padding: 32px 50px;
  outline: none;
  font-size: 15px;
  line-height: 1.75;
  color: #1a1a1a;
  font-family: inherit;
  word-break: break-word;
  caret-color: var(--primary);
  position: relative;
  box-sizing: border-box;
  /* Natural height — grows with typed content */
  min-height: 200px;
}

/* The editable body lives in a special scrolling container */
.body-scroll-host {
  flex: 1;
  overflow: visible;
}

.letter-body:focus {
  background: rgba(37,99,235,0.012);
}

.letter-body:empty::before {
  content: attr(data-placeholder);
  color: #b0b8c8;
  pointer-events: none;
  position: absolute;
  font-size: 14px;
}

/* Letter footer (non-editable) */
.letterpad-footer-zone {
  user-select: none;
  pointer-events: none;
}

/* Zoom hint */
.zoom-indicator {
  position: absolute;
  bottom: var(--sp-4);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.6);
  color: #fff;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-full);
  font-size: 0.75rem;
  font-weight: 600;
  opacity: 0;
  transition: opacity var(--t-base);
  pointer-events: none;
}
.canvas-scroll:hover .zoom-indicator { opacity: 1; }

/* ── RIGHT PANEL ────────────────────────────────────────────────────────── */
.right-panel {
  background: var(--surface);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.right-section {
  padding: var(--sp-5);
  border-bottom: 1px solid var(--border);
}

.right-section-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--sp-4);
}

/* Export buttons */
.export-btn-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.export-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  cursor: pointer;
  background: var(--surface);
  transition: all var(--t-base);
  text-align: left;
  width: 100%;
}
.export-item:hover { border-color: var(--primary); background: var(--primary-glow); color: var(--primary); }
.export-item:hover .export-item-icon { background: var(--primary); color: #fff; }
.export-item-icon {
  width: 34px;
  height: 34px;
  background: var(--bg-alt);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text-2);
  font-size: 1rem;
  transition: all var(--t-fast);
}
.export-item-text { line-height: 1.3; }
.export-item-name { font-size: 0.875rem; font-weight: 600; color: var(--text-1); }
.export-item-desc { font-size: 0.75rem; color: var(--text-3); }

/* Zoom controls */
.zoom-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-2) var(--sp-3);
}
.zoom-btn {
  width: 28px;
  height: 28px;
  border: none;
  background: var(--surface);
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--t-fast);
  flex-shrink: 0;
}
.zoom-btn:hover { background: var(--primary); color: #fff; }
.zoom-value {
  flex: 1;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-1);
}

/* ── EXPORT LOADING OVERLAY ─────────────────────────────────────────────── */
.export-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10,15,30,0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 2000;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--sp-5);
  animation: fadeIn 200ms var(--ease);
}
.export-overlay.active { display: flex; }

.export-spinner {
  width: 52px;
  height: 52px;
  border: 3px solid rgba(255,255,255,0.15);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}

.export-progress-text {
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
}

.export-success-icon {
  width: 64px;
  height: 64px;
  background: var(--success);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 2rem;
  animation: slideInUp 300ms var(--ease-spring);
}

/* ── SUPPORT MODAL ──────────────────────────────────────────────────────── */
@keyframes sup-in     { from { opacity:0; transform:translateY(40px) scale(0.95); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes steam-rise { 0%,100% { opacity:0; transform:translateY(0) scaleX(1); } 20% { opacity:.8; } 60% { opacity:.4; transform:translateY(-18px) scaleX(1.3); } }
@keyframes liquid-bob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-2px); } }
@keyframes particle   { 0% { opacity:0; transform:translateY(0) scale(0); } 20% { opacity:1; } 100% { opacity:0; transform:translateY(-120px) scale(1.4); } }
@keyframes bar-drain  { from { width:100%; } to { width:0%; } }
@keyframes shine-move { 0% { left:-60%; } 100% { left:130%; } }

.sup-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(5,8,20,0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 3000;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
}
.sup-backdrop.active { display: flex; }

.sup-modal {
  background: var(--surface);
  border-radius: 24px;
  box-shadow: 0 32px 80px rgba(0,0,0,0.28), 0 0 0 1px var(--border-light);
  width: 100%;
  max-width: 560px;
  max-height: 92vh;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  animation: sup-in 400ms var(--ease-spring) both;
}

/* Floating particles */
.sup-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: 24px;
  z-index: 0;
}
.sup-particle {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  animation: particle var(--dur, 3s) var(--delay, 0s) infinite;
  opacity: 0;
}

/* Hero section */
.sup-hero {
  position: relative;
  padding: 36px var(--sp-8) var(--sp-6);
  text-align: center;
  background: linear-gradient(145deg, #1e1b4b 0%, #312e81 45%, #4c1d95 100%);
  border-radius: 24px 24px 0 0;
  overflow: hidden;
  z-index: 1;
}
.sup-hero-glow {
  position: absolute;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(139,92,246,0.35) 0%, transparent 70%);
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}

/* CSS coffee cup animation */
.sup-coffee-anim {
  display: flex;
  justify-content: center;
  margin-bottom: var(--sp-4);
}
.coffee-cup { position: relative; width: 60px; }
.cup-body {
  width: 56px;
  height: 44px;
  background: linear-gradient(180deg, #d97706 0%, #b45309 100%);
  border-radius: 4px 4px 10px 10px;
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  box-shadow: inset 0 -4px 8px rgba(0,0,0,0.2);
}
.cup-liquid {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 70%;
  background: linear-gradient(180deg, #78350f 0%, #451a03 100%);
  border-radius: 0 0 8px 8px;
  animation: liquid-bob 2.5s ease-in-out infinite;
}
.cup-steam {
  position: absolute;
  top: -22px;
  width: 4px;
  height: 20px;
  background: rgba(255,255,255,0.5);
  border-radius: 4px;
  animation: steam-rise 2.2s ease-in-out infinite;
}
.s1 { left: 10px; animation-delay: 0s;   --delay:0s; }
.s2 { left: 24px; animation-delay: 0.4s; --delay:.4s; }
.s3 { left: 38px; animation-delay: 0.8s; --delay:.8s; }
.cup-handle {
  position: absolute;
  right: -10px;
  top: 10px;
  width: 14px;
  height: 20px;
  border: 5px solid #b45309;
  border-left: none;
  border-radius: 0 12px 12px 0;
}
.cup-saucer {
  width: 66px;
  height: 8px;
  background: linear-gradient(180deg, #d97706 0%, #92400e 100%);
  border-radius: 0 0 20px 20px;
  margin: 0 auto;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

.sup-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.03em;
  margin: 0 0 var(--sp-2);
  line-height: 1.25;
}
.sup-sub {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.72);
  margin: 0;
  line-height: 1.6;
}
.sup-sub strong { color: #fde68a; }

/* Countdown bar */
.sup-countdown-bar {
  position: relative;
  height: 36px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sup-countdown-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, rgba(99,102,241,0.18), rgba(139,92,246,0.22));
  width: 100%;
  transform-origin: left;
}
.sup-countdown-fill.running {
  animation: bar-drain linear forwards;
}
.sup-countdown-text {
  position: relative;
  z-index: 1;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-2);
  letter-spacing: 0.02em;
}

/* Body: two cards side by side */
.sup-body {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  align-items: start;
}

.sup-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-4);
  border-radius: var(--r-xl);
  border: 1.5px solid var(--border);
  background: var(--surface-2);
  text-align: center;
  transition: border-color var(--t-base), box-shadow var(--t-base);
  position: relative;
  overflow: hidden;
}
.sup-card:hover {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
}

.sup-card-badge {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #f59e0b, #ef4444);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 0 0 8px 8px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.sup-card-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text-1);
  margin: var(--sp-3) 0 0;
}
.sup-card-desc {
  font-size: 0.75rem;
  color: var(--text-3);
  margin: 0;
  line-height: 1.5;
}

/* Amount buttons */
.sup-amounts {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.sup-amount {
  padding: 7px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text-2);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--t-fast);
  font-family: var(--font-sans);
  text-align: left;
}
.sup-amount:hover { border-color: #f59e0b; color: #92400e; background: #fffbeb; }
.sup-amount.active { border-color: #f59e0b; background: #fef3c7; color: #92400e; }

.sup-btn-bmc {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  background: linear-gradient(135deg, #FFDD00 0%, #FFA500 100%);
  color: #1a1000;
  border-radius: var(--r-lg);
  font-weight: 800;
  font-size: 0.875rem;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(255,165,0,0.35);
  transition: all var(--t-base);
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  position: relative;
  overflow: hidden;
}
.sup-btn-bmc::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 50%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  animation: shine-move 2.5s ease-in-out infinite;
}
.sup-btn-bmc:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255,165,0,0.45);
  color: #1a1000;
}

/* Vertical OR divider */
.sup-or {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--sp-3);
  margin-top: 80px;
}
.sup-or span {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  writing-mode: vertical-lr;
  background: var(--surface);
  padding: var(--sp-2) 0;
  position: relative;
}
.sup-or span::before,
.sup-or span::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 30px;
  background: var(--border);
}
.sup-or span::before { bottom: 100%; margin-bottom: 4px; }
.sup-or span::after  { top: 100%;  margin-top: 4px; }

/* UPI QR */
.sup-qr-wrap {
  position: relative;
  background: #fff;
  border: 2px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-2);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: transform var(--t-base), box-shadow var(--t-base);
  overflow: hidden;
}
.sup-qr-wrap:hover {
  transform: scale(1.04);
  box-shadow: var(--shadow-lg);
}
.sup-qr-svg { width: 110px; height: 110px; display: block; }
.sup-qr-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%);
  opacity: 0;
  transition: opacity 0.3s;
}
.sup-qr-wrap:hover .sup-qr-shine { opacity: 1; }

.sup-upi-id {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-1);
  margin: 0;
  font-family: monospace;
  letter-spacing: 0.02em;
}
.sup-upi-apps {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
}
.sup-upi-apps span {
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--text-3);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
}

/* Footer */
.sup-footer {
  padding: 0 var(--sp-5) var(--sp-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
}

.sup-download-btn {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-6);
  background: var(--text-1);
  color: var(--text-inv);
  border: none;
  border-radius: var(--r-full);
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: all var(--t-base);
  box-shadow: var(--shadow-md);
}
.sup-download-btn:hover {
  background: var(--primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}

.sup-thanks-note {
  font-size: 0.82rem;
  color: var(--success);
  font-weight: 600;
  margin: 0;
  animation: slideInUp 300ms var(--ease-spring);
}

/* Mobile */
@media (max-width: 540px) {
  .sup-body {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
  .sup-or {
    margin-top: 0;
    padding: var(--sp-2) 0;
  }
  .sup-or span { writing-mode: horizontal-tb; }
  .sup-or span::before { left: auto; right: 100%; bottom: 50%; top: auto; transform: translateY(50%); width: 30px; height: 1px; margin: 0 4px 0 0; }
  .sup-or span::after  { left: 100%; bottom: 50%; top: auto; transform: translateY(50%); width: 30px; height: 1px; margin: 0 0 0 4px; }
  .sup-hero { padding: var(--sp-6) var(--sp-5) var(--sp-4); }
  .sup-title { font-size: 1.1rem; }
}

/* ── KEYBOARD SHORTCUT TOOLTIP ─────────────────────────────────────────── */
.shortcut-hint {
  position: fixed;
  bottom: var(--sp-6);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15,23,42,0.9);
  color: #fff;
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--r-full);
  font-size: 0.8125rem;
  font-weight: 500;
  z-index: 100;
  opacity: 0;
  transition: opacity var(--t-base);
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.shortcut-hint.visible { opacity: 1; }
kbd {
  background: rgba(255,255,255,0.15);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

/* ── POST-DOWNLOAD AD MODAL ─────────────────────────────────────────────── */
.ad-modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10,15,30,0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 4000;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  animation: fadeIn 200ms var(--ease);
}
.ad-modal-backdrop.active { display: flex; }

.ad-modal {
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-float);
  border: 1px solid var(--border-light);
  width: 100%;
  max-width: 420px;
  overflow: hidden;
  animation: slideInUp 300ms var(--ease-spring);
  display: flex;
  flex-direction: column;
}

.ad-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
}

.ad-modal-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.ad-modal-close {
  width: 26px;
  height: 26px;
  border: none;
  background: var(--border);
  color: var(--text-2);
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--t-fast);
  line-height: 1;
  font-family: var(--font-sans);
}
.ad-modal-close:hover { background: var(--text-3); color: #fff; }

.ad-modal-body {
  min-height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
}

/* Placeholder shown before real ad code is added */
.ad-placeholder {
  width: 100%;
}
.ad-placeholder-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-8);
  border: 2px dashed var(--border);
  border-radius: var(--r-lg);
  text-align: center;
}
.ad-placeholder-text {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-2);
  margin: 0;
}
.ad-placeholder-sub {
  font-size: 0.75rem;
  color: var(--text-3);
  margin: 0;
  line-height: 1.6;
}
.ad-placeholder-sub code {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  padding: 1px 5px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 0.7rem;
  color: var(--primary);
}

.ad-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  gap: var(--sp-3);
}

.ad-modal-thanks {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--success);
  margin: 0;
  flex: 1;
}

.ad-modal-done-btn {
  padding: var(--sp-2) var(--sp-5);
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--r-full);
  font-size: 0.8375rem;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: all var(--t-fast);
  flex-shrink: 0;
}
.ad-modal-done-btn:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
}

@media (max-width: 480px) {
  .ad-modal { max-width: 100%; border-radius: var(--r-lg); }
  .ad-modal-body { min-height: 200px; padding: var(--sp-3); }
}

/* ── SECURITY — disable selection/drag on non-editable regions ─────────── */
.editor-header,
.left-panel,
.right-panel,
.writing-toolbar,
.panel-section-title,
.mobile-tab-bar,
.sup-modal,
.sup-hero {
  user-select: none;
  -webkit-user-select: none;
}
/* Re-enable where users must interact */
.letter-body,
input, textarea, select,
.field-label-text[contenteditable="true"] {
  user-select: text;
  -webkit-user-select: text;
}
/* Prevent dragging images / UI elements */
img, svg, button, .toolbar-btn {
  -webkit-user-drag: none;
  user-drag: none;
}

/* ── RESPONSIVE ───────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .editor-root { grid-template-columns: 280px 1fr 240px; }
}

@media (max-width: 1000px) {
  .editor-root { grid-template-columns: 260px 1fr; }
  .right-panel { display: none; }
}

/* ── MOBILE (≤ 768px) — full panel-drawer UX ─────────────────────────── */
@media (max-width: 768px) {

  /* Header compact */
  .editor-header {
    padding: 0 var(--sp-3);
    height: 50px;
    gap: var(--sp-2);
  }
  .header-divider,
  .filename-input { display: none; }
  .logo-link span { display: none; }
  .header-center { gap: var(--sp-2); }
  .action-group { gap: 0; padding: 3px; }
  .page-size-select { font-size: 0.75rem; height: 30px; }
  /* Hide download + dark mode in header — use bottom tab bar instead */
  #downloadBtn,
  #darkModeToggle { display: none; }

  /* Full-screen stacked layout */
  .editor-root {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 50px);
    overflow: hidden;
  }

  /* Left panel slides in from bottom as a drawer */
  .left-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 200;
    border-right: none;
    border-top: 1px solid var(--border);
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    box-shadow: var(--shadow-float);
    max-height: 70vh;
    transform: translateY(100%);
    transition: transform 300ms var(--ease-out);
    /* Leave room for bottom tab bar */
    padding-bottom: 60px;
  }
  .left-panel.mobile-open {
    transform: translateY(0);
  }

  /* Right panel hidden on mobile */
  .right-panel { display: none; }

  /* Canvas fills entire viewport */
  .canvas-area {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    /* Pad bottom for floating tab bar */
    padding-bottom: 56px;
  }

  /* Writing toolbar scrolls horizontally */
  .writing-toolbar { }
  .toolbar-row {
    padding: 3px var(--sp-2);
    min-height: 36px;
    -webkit-overflow-scrolling: touch;
  }
  .toolbar-btn {
    height: 28px;
    min-width: 26px;
    font-size: 0.8125rem;
  }
  .toolbar-select { height: 26px; font-size: 0.75rem; }
  .toolbar-font-family { min-width: 110px; max-width: 130px; }

  /* Canvas scroll — auto-zoom to fit screen width */
  .canvas-scroll {
    padding: var(--sp-4) var(--sp-2);
    -webkit-overflow-scrolling: touch;
  }

  /* A4 page itself — keep logical width, let JS scale it */
  .a4-page {
    width: 794px;
    transform-origin: top center;
    /* JS sets transform: scale(ratio) where ratio = (window.innerWidth - 16) / 794 */
  }

  /* Floating bottom tab bar */
  .mobile-tab-bar {
    display: flex !important;
  }

  /* Floating PDF export button */
  .mobile-export-fab {
    display: flex !important;
  }
}

/* Drawer pull handle */
.drawer-handle {
  display: none;
  width: 36px;
  height: 4px;
  background: var(--border);
  border-radius: var(--r-full);
  margin: var(--sp-3) auto var(--sp-1);
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .drawer-handle { display: block; }
}

/* Mobile tab bar — hidden on desktop */
.mobile-tab-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 56px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  z-index: 300;
  align-items: stretch;
  box-shadow: 0 -4px 20px rgba(15,23,42,0.08);
}

.mobile-tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: none;
  background: transparent;
  color: var(--text-3);
  font-size: 0.6rem;
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: color var(--t-fast), background var(--t-fast);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0;
}
.mobile-tab-item svg { width: 20px; height: 20px; }
.mobile-tab-item.active { color: var(--primary); }
.mobile-tab-item.active svg { stroke: var(--primary); }

/* Panel open overlay (backdrop) */
.mobile-panel-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10,15,30,0.45);
  z-index: 190;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.mobile-panel-backdrop.active { display: block; }

/* Floating export FAB */
.mobile-export-fab {
  display: none;
  position: fixed;
  bottom: 68px;
  right: var(--sp-4);
  z-index: 150;
  width: 48px;
  height: 48px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 50%;
  box-shadow: 0 4px 16px rgba(37,99,235,0.4);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: transform var(--t-spring), box-shadow var(--t-base);
}
.mobile-export-fab:active {
  transform: scale(0.92);
  box-shadow: 0 2px 8px rgba(37,99,235,0.3);
}
.mobile-export-fab svg { width: 22px; height: 22px; }