/* Features CSS: dark mode, zoom, toolbar, autosave indicator */
:root{
  --cv-zoom: 1;
  --mint-accent: #0b5960; /* muted teal */
  --mint-accent-strong: #0d9488;
  --mint-charcoal: #111827;
  --mint-surface: #ffffff;
}

/* Scale previews using CSS variable */
.cv-preview-container{
  transform-origin: top center;
  transform: scale(var(--cv-zoom,1));
  transition: transform 180ms ease;
}

/* Dark mode */
body.mint-dark{
  background-color: #0b1220 !important;
  color: #dbeafe !important;
}
body.mint-dark .editor-panel,
body.mint-dark .cv-preview-container,
body.mint-dark .a4-container{
  background-color: #071023 !important;
  color: #e6eef8 !important;
  border-color: rgba(255,255,255,0.06) !important;
}

/* Header toolbar */
.mint-toolbar{
  display:flex;
  gap:0.5rem;
  align-items:center;
}
.mint-tool-btn{
  background:transparent;
  border:1px solid rgba(0,0,0,0.06);
  padding:0.45rem 0.6rem;
  border-radius:8px;
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  cursor:pointer;
  font-size:0.85rem;
}
body.mint-dark .mint-tool-btn{
  border-color: rgba(255,255,255,0.08);
}
.mint-tool-btn:active{ transform: translateY(1px); }

/* Autosave indicator */
#mint-autosave{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  font-size:0.85rem;
  padding:0.25rem 0.6rem;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(11,89,96,0.06), rgba(13,148,136,0.02));
  border:1px solid rgba(11,89,96,0.10);
  color: var(--mint-accent-strong);
}
body.mint-dark #mint-autosave{ color:#c8fff3; background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.04); }
#mint-autosave.saving{ animation: pulse 1s infinite; }

/* Versions modal */
#mintage-versions-modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:2000; }
#mintage-versions-modal .modal-backdrop{ position:absolute; inset:0; background:rgba(2,6,23,0.6); }
#mintage-versions-modal .modal-panel{ position:relative; max-width:880px; width:94%; background: #fff; border-radius:12px; padding:1rem; z-index:2; box-shadow:0 30px 60px rgba(2,6,23,0.4); }
body.mint-dark #mintage-versions-modal .modal-panel{ background:#07172a; color:#e6eef8; }
.mintage-versions-list{ max-height:420px; overflow:auto; }
.mintage-version-item{ display:flex; justify-content:space-between; gap:0.5rem; padding:0.5rem; border-bottom:1px solid rgba(0,0,0,0.04); }
body.mint-dark .mintage-version-item{ border-bottom:1px solid rgba(255,255,255,0.03); }

/* Keyboard help */
#mint-shortcuts-help{ position:fixed; right:14px; bottom:14px; background:rgba(0,0,0,0.6); color:#fff; padding:0.6rem 0.8rem; border-radius:8px; font-size:0.85rem; display:none; z-index:2100; }
body.mint-dark #mint-shortcuts-help{ background:rgba(255,255,255,0.06); color:#e6eef8; }

/* Character counter bubble */
#mint-char-counter{ font-size:0.8rem; padding:0.25rem 0.5rem; border-radius:6px; background:rgba(0,0,0,0.04); }
body.mint-dark #mint-char-counter{ background:rgba(255,255,255,0.03); }

@keyframes pulse{ 0%{ opacity:1 } 50%{ opacity:0.6 } 100%{ opacity:1 } }

/* Read-only visual treatment for editor when reading mode is active */
body.mint-reading #app-container input[type="range"],
body.mint-reading #app-container textarea{
  opacity: 0.7;
}

body.mint-reading #app-container input[type="range"],
body.mint-reading #app-container input[type="text"],
body.mint-reading #app-container input[type="email"],
body.mint-reading #app-container input[type="tel"],
body.mint-reading #app-container input[type="url"],
body.mint-reading #app-container input[type="number"],
body.mint-reading #app-container textarea,
body.mint-reading #app-container select {
  pointer-events: none;
}

body.mint-reading .input-field{
  background-color: rgba(255,255,255,0.03) !important;
}

/* Ensure buttons remain clickable even in reading mode */
body.mint-reading button,
body.mint-reading .btn-primary,
body.mint-reading input[type="button"],
body.mint-reading input[type="submit"],
body.mint-reading input[type="reset"] {
  pointer-events: auto !important;
}