/* ============================================
   APP.CSS — Video Tool Pro Editor
   Styles specific to the banner text editor (app.php)
   ============================================ */

/* Page-level layout */
.page-app .container { padding: 24px; }

.app-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-bottom: 20px;
  border-bottom: 3px solid var(--ink);
  margin-bottom: 32px;
  flex-wrap: wrap;
  gap: 16px;
}

.app-header h1 {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(28px, 4.5vw, 48px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin-top: 6px;
}

.app-header h1 em {
  font-style: normal;
  color: var(--magenta);
}

.status {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  color: var(--muted);
  text-align: right;
}

.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lime);
  margin-right: 6px;
  vertical-align: middle;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* Main grid */
.main {
  display: grid;
  grid-template-columns: 1fr 440px;
  gap: 28px;
}

@media (max-width: 1100px) {
  .main { grid-template-columns: 1fr; }
}

/* Panels */
.preview-panel,
.section {
  background: var(--paper);
  border: 3px solid var(--ink);
  padding: 20px;
  box-shadow: 8px 8px 0 var(--ink);
}

/* Preview */
.preview-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 14px;
  color: var(--muted);
}

.preview-container {
  position: relative;
  width: 100%;
  background: repeating-conic-gradient(#eaeaea 0% 25%, #f5f5f5 0% 50%) 50% / 20px 20px;
  border: 2px solid var(--ink);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.preview-container video,
.preview-container canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}

#previewVideo { z-index: 1; visibility: hidden; }
#previewCanvas { z-index: 2; pointer-events: none; }

.preview-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  z-index: 3;
}

/* Drop zone */
.drop-zone {
  border: 3px dashed var(--ink);
  padding: 40px 60px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  background: var(--paper);
}

.drop-zone:hover,
.drop-zone.dragover {
  background: var(--yellow);
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--ink);
}

.drop-zone-icon {
  font-size: 40px;
  margin-bottom: 8px;
}

.drop-zone-text {
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.drop-zone-hint {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  color: var(--muted);
  margin-top: 6px;
}

/* Loading spinner overlay for drop zone */
.drop-zone-loading {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.drop-zone-loading.active {
  display: flex;
}

.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--ink);
  border-top-color: var(--magenta);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.drop-zone-loading-text {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Video controls */
.video-controls {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  align-items: center;
  flex-wrap: wrap;
}

.vc-btn {
  padding: 7px 12px;
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  border: 2px solid var(--ink);
  background: var(--paper);
  cursor: pointer;
  transition: all 0.15s;
}

.vc-btn:hover {
  background: var(--yellow);
  transform: translate(-1px, -1px);
  box-shadow: 2px 2px 0 var(--ink);
}

.time-display {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  color: var(--muted);
  margin-left: auto;
}

/* Controls panel */
.controls {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.section-title {
  font-family: 'Archivo Black', sans-serif;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.section-title .num {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  color: var(--muted);
}

/* Form fields */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.field:last-child { margin-bottom: 0; }

.field label {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.field input[type="text"],
.field select,
.field input[type="number"] {
  padding: 9px 11px;
  border: 2px solid var(--ink);
  background: var(--paper);
  font-family: 'Archivo', sans-serif;
  font-size: 13px;
  font-weight: 500;
  outline: none;
  transition: all 0.15s;
}

.field input:focus,
.field select:focus {
  background: var(--yellow);
  box-shadow: 3px 3px 0 var(--ink);
  transform: translate(-1px, -1px);
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.field-row-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}

/* Swatches (color picker) */
.swatches {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.swatch {
  width: 28px;
  height: 28px;
  border: 2px solid var(--ink);
  cursor: pointer;
  transition: transform 0.15s;
  position: relative;
}

.swatch:hover {
  transform: translate(-2px, -2px);
  box-shadow: 3px 3px 0 var(--ink);
}

.swatch.active::after {
  content: '';
  position: absolute;
  inset: -4px;
  border: 2px solid var(--ink);
  pointer-events: none;
}

/* Custom color picker input [FEAT-004] */
.color-picker-custom {
  width: 28px;
  height: 28px;
  border: 2px solid var(--ink);
  padding: 0;
  cursor: pointer;
  background: none;
  -webkit-appearance: none;
  appearance: none;
}

.color-picker-custom::-webkit-color-swatch-wrapper {
  padding: 0;
}

.color-picker-custom::-webkit-color-swatch {
  border: none;
}

.color-picker-custom::-moz-color-swatch {
  border: none;
}

/* Range inputs */
input[type="range"] {
  width: 100%;
  height: 5px;
  -webkit-appearance: none;
  background: var(--ink);
  outline: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  background: var(--magenta);
  border: 2px solid var(--ink);
  cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: var(--magenta);
  border: 2px solid var(--ink);
  cursor: pointer;
  border-radius: 0;
}

/* Position grid */
.pos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  padding: 3px;
  background: var(--ink);
  border: 2px solid var(--ink);
  aspect-ratio: 16 / 9;
}

.pos-cell {
  background: var(--paper);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  position: relative;
}

.pos-cell:hover { background: var(--yellow); }
.pos-cell.active { background: var(--magenta); }
.pos-cell.active::after { content: '●'; color: var(--paper); font-size: 10px; }

/* Buttons */
.btn {
  padding: 12px 18px;
  font-family: 'Archivo Black', sans-serif;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 3px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: all 0.15s;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn:hover:not(:disabled) {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--ink);
}

.btn:active:not(:disabled) {
  transform: translate(0, 0);
  box-shadow: none;
}

.btn-primary { background: var(--magenta); color: var(--paper); }

.btn-primary:disabled {
  background: #d0d0d0;
  color: var(--muted);
  cursor: not-allowed;
}

.btn-sm { padding: 8px 12px; font-size: 11px; }

.btn-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* Progress bar */
.progress-wrap {
  margin-top: 14px;
  display: none;
}

.progress-wrap.active { display: block; }

.progress-bar {
  height: 10px;
  border: 2px solid var(--ink);
  position: relative;
  overflow: hidden;
  background: var(--paper);
}

.progress-fill {
  height: 100%;
  background: var(--magenta);
  width: 0%;
  transition: width 0.1s;
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 8px,
    rgba(255, 255, 255, 0.3) 8px,
    rgba(255, 255, 255, 0.3) 16px
  );
}

.progress-text {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  margin-top: 6px;
  color: var(--muted);
}

/* Misc */
.file-info {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  color: var(--muted);
  margin-top: 8px;
  display: none;
}

.file-info.active { display: block; }

.reset-btn {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  background: transparent;
  border: none;
  color: var(--magenta);
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}

.alert {
  padding: 10px 14px;
  border: 2px solid var(--ink);
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  line-height: 1.5;
  margin-top: 12px;
  background: var(--yellow);
}

/* Layers */
.layers-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.layer-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 2px solid var(--ink);
  background: var(--paper);
  cursor: pointer;
  transition: all 0.15s;
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  font-weight: 700;
}

.layer-tab:hover { background: var(--yellow); }
.layer-tab.active { background: var(--ink); color: var(--paper); }

.layer-tab .layer-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.layer-tab .layer-del {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  padding: 0 4px;
}

.layer-tab .layer-del:hover { color: var(--magenta); }
.layer-tab.active .layer-del:hover { color: var(--yellow); }

/* [FEAT-009] Drag & drop layer reordering */
.layer-drag-handle {
  cursor: grab;
  opacity: 0.4;
  font-size: 14px;
  user-select: none;
  line-height: 1;
  padding: 0 2px;
}
.layer-drag-handle:active { cursor: grabbing; }
.layer-tab:hover .layer-drag-handle { opacity: 0.8; }
.layer-tab.dragging { opacity: 0.4; }
.layer-tab.drag-over {
  border-top: 3px solid var(--magenta);
  padding-top: 5px;
}

.add-layer-btn {
  padding: 10px;
  border: 2px dashed var(--ink);
  background: var(--paper);
  cursor: pointer;
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: all 0.15s;
  width: 100%;
}

.add-layer-btn:hover:not(:disabled) {
  background: var(--lime);
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--ink);
}

.add-layer-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Undo/Redo controls */
.layer-actions {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.layer-actions .add-layer-btn {
  flex: 1;
}

.undo-redo-group {
  display: flex;
  gap: 2px;
}

.undo-redo-btn {
  width: 38px;
  height: 38px;
  border: 2px solid var(--ink);
  background: var(--paper);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.undo-redo-btn:hover:not(:disabled) {
  background: var(--lime);
  transform: translate(-1px, -1px);
  box-shadow: 2px 2px 0 var(--ink);
}

.undo-redo-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Timing row */
.timing-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 10px;
  background: #f5f5f0;
  border: 2px solid var(--ink);
  margin-bottom: 12px;
}

.timing-row label {
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: 4px;
}

.timing-row input {
  width: 100%;
  padding: 6px 8px;
  border: 2px solid var(--ink);
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  background: var(--paper);
  outline: none;
}

/* Preset section */
.preset-section {
  background: var(--ink);
  color: var(--paper);
  border: 3px solid var(--ink);
  padding: 16px;
  box-shadow: 8px 8px 0 var(--magenta);
}

.preset-section .section-title {
  color: var(--paper);
  border-bottom-color: var(--paper);
}

.preset-section .section-title .num { color: rgba(255, 255, 255, 0.5); }

.preset-btn {
  padding: 10px 14px;
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  border: 2px solid var(--paper);
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  transition: all 0.15s;
}

.preset-btn:hover {
  background: var(--magenta);
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--paper);
}

.hidden-input { display: none; }

/* ============================================
   RESPONSIVE — Tablet (768px)
   ============================================ */
@media (max-width: 768px) {
  .page-app .container { padding: 16px; }

  .app-header {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 20px;
    padding-bottom: 14px;
  }

  .app-header h1 { font-size: clamp(22px, 5vw, 32px); }

  .status { text-align: left; }

  .main { gap: 16px; }

  .preview-panel,
  .section {
    padding: 14px;
    box-shadow: 5px 5px 0 var(--ink);
  }

  .video-controls {
    gap: 6px;
  }

  .vc-btn {
    padding: 6px 10px;
    font-size: 10px;
  }

  .timing-row {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 8px;
  }

  .pos-grid {
    max-width: 240px;
  }

  .layers-list {
    gap: 4px;
  }

  .layer-tab {
    padding: 8px 10px;
    font-size: 10px;
  }

  .preset-section {
    padding: 12px;
    box-shadow: 5px 5px 0 var(--magenta);
  }

  .preset-btn {
    padding: 8px 12px;
    font-size: 10px;
  }

  .btn {
    padding: 10px 14px;
    font-size: 12px;
  }

  .add-layer-btn {
    padding: 10px;
    font-size: 10px;
  }
}

/* ============================================
   RESPONSIVE — Mobile (480px)
   ============================================ */
@media (max-width: 480px) {
  .page-app .container { padding: 10px; }

  .app-header {
    margin-bottom: 14px;
    padding-bottom: 10px;
    gap: 8px;
  }

  .app-header h1 { font-size: 22px; }

  .main { gap: 12px; }

  .preview-panel,
  .section {
    padding: 10px;
    border-width: 2px;
    box-shadow: 4px 4px 0 var(--ink);
  }

  .preview-label {
    font-size: 9px;
    margin-bottom: 8px;
  }

  .video-controls {
    flex-direction: column;
    gap: 6px;
    align-items: stretch;
  }

  .vc-btn {
    width: 100%;
    text-align: center;
    padding: 8px;
    font-size: 10px;
  }

  .timing-row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 8px;
  }

  .swatches {
    gap: 4px;
  }

  .swatch {
    width: 24px;
    height: 24px;
  }

  .color-picker-custom {
    width: 24px;
    height: 24px;
  }

  .pos-grid {
    max-width: 180px;
  }

  .layers-list {
    gap: 3px;
  }

  .layer-tab {
    padding: 6px 8px;
    font-size: 9px;
  }

  .preset-section {
    padding: 10px;
    box-shadow: 4px 4px 0 var(--magenta);
  }

  .preset-btn {
    padding: 6px 10px;
    font-size: 9px;
  }

  .section-title {
    font-size: 10px;
    padding-bottom: 6px;
    margin-bottom: 10px;
  }

  .btn {
    padding: 10px 12px;
    font-size: 11px;
    width: 100%;
    text-align: center;
    box-shadow: 4px 4px 0 var(--ink);
  }

  .add-layer-btn {
    padding: 8px;
    font-size: 9px;
    box-shadow: 4px 4px 0 var(--ink);
  }

  .export-feedback {
    font-size: 11px;
    padding: 10px;
  }
}

/* [BUG-008] Credit badge for paid users */
.credit-badge {
  padding: 8px 14px;
  margin-bottom: 10px;
  background: var(--lime);
  color: var(--ink);
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  text-align: center;
}

/* [UX-003] Upgrade CTA for free users */
.upgrade-cta {
  margin-top: 12px;
  padding: 10px 14px;
  background: rgba(255, 0, 100, 0.08);
  border: 1px dashed var(--magenta);
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  text-align: center;
  color: var(--muted);
}
.upgrade-cta a {
  display: inline-block;
  margin-top: 4px;
  color: var(--magenta);
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
}
.upgrade-cta a:hover {
  text-decoration: underline;
}

/* [UX-020] Save-before-leave reminder — appears when user has unsaved preset work */
.save-before-leave {
  margin-top: 10px;
  padding: 12px 14px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #fff8e6;
  border: 3px solid #f0a500;
  box-shadow: 4px 4px 0 var(--ink);
  animation: sbl-pulse 2s ease-in-out 1;
}
.save-before-leave .sbl-icon {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
}
.save-before-leave .sbl-content {
  flex: 1;
  min-width: 0;
}
.save-before-leave strong {
  display: block;
  font-family: 'Archivo Black', sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}
.save-before-leave p {
  margin: 0 0 8px 0;
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  color: #6a4c00;
  line-height: 1.4;
}
.save-before-leave .sbl-btn {
  font-size: 11px;
  padding: 8px 14px;
  width: 100%;
}
@keyframes sbl-pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.02); box-shadow: 6px 6px 0 var(--ink); }
  100% { transform: scale(1); }
}
@media (max-width: 720px) {
  .save-before-leave { flex-direction: column; align-items: stretch; gap: 8px; }
  .save-before-leave .sbl-icon { text-align: center; }
}

/* [UX-004] Post-export feedback */
.export-feedback {
  margin-top: 10px;
  padding: 10px 14px;
  background: var(--paper);
  border: 2px solid var(--ink);
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  text-align: center;
}
.export-feedback a {
  color: var(--magenta);
  font-weight: 700;
  text-decoration: none;
  margin-left: 6px;
}
.export-feedback a:hover {
  text-decoration: underline;
}

/* ============================================
   [UX-010] Keyboard shortcuts button + modal
   ============================================ */
.shortcuts-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 900;
  width: 40px;
  height: 40px;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-family: 'Space Mono', monospace;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform 0.1s, box-shadow 0.1s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shortcuts-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--ink);
}
.shortcuts-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--ink);
}

.shortcuts-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.5);
  align-items: center;
  justify-content: center;
}
.shortcuts-overlay.active {
  display: flex;
}

.shortcuts-modal {
  background: var(--paper);
  border: 3px solid var(--ink);
  box-shadow: 8px 8px 0 var(--ink);
  max-width: 380px;
  width: 90%;
  padding: 0;
  font-family: 'Space Mono', monospace;
}

.shortcuts-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 2px solid var(--ink);
}

.shortcuts-header h3 {
  font-family: 'Archivo Black', sans-serif;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}

.shortcuts-close {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--ink);
  font-family: inherit;
  padding: 0 4px;
}
.shortcuts-close:hover { color: var(--magenta); }

.shortcuts-list {
  padding: 12px 16px;
}

.shortcut-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-size: 12px;
  border-bottom: 1px solid #eee;
}
.shortcut-row:last-child { border-bottom: none; }

.shortcut-row kbd {
  display: inline-block;
  padding: 3px 8px;
  border: 2px solid var(--ink);
  background: var(--paper);
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  min-width: 24px;
  text-align: center;
}

.shortcut-row span {
  flex: 1;
  color: var(--muted);
}

.hidden-input { display: none; }

/* [UX-024] Canvas loading overlay */
.canvas-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  z-index: 5;
  gap: 12px;
}

.canvas-loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: var(--lime);
  border-radius: 50%;
  animation: canvas-spin 0.8s linear infinite;
}

@keyframes canvas-spin {
  to { transform: rotate(360deg); }
}

/* ============================================
   [BUG-FIX] TOAST NOTIFICATIONS
   Toasts were appearing after the footer because no CSS was defined.
   Fixed-position top-right stack, FTMPUB styling (paper + ink borders + drop shadow).
   ============================================ */
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  max-width: calc(100vw - 40px);
  width: 380px;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: var(--paper);
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink);
  pointer-events: auto;
  cursor: pointer;
  animation: toast-in 0.25s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  word-break: break-word;
}

.toast-icon {
  flex: 0 0 auto;
  font-family: 'Archivo Black', sans-serif;
  font-size: 14px;
  line-height: 1.4;
}

.toast-message {
  flex: 1 1 auto;
}

.toast--error   { border-color: #d32f2f; background: #fff4f4; }
.toast--error .toast-icon   { color: #d32f2f; }

.toast--warning { border-color: #f0a500; background: #fff8e6; }
.toast--warning .toast-icon { color: #f0a500; }

.toast--success { border-color: var(--lime, #c4ff00); background: #f4fff0; }
.toast--success .toast-icon { color: #2e7d32; }

.toast--info    { border-color: var(--ink); background: var(--paper); }
.toast--info .toast-icon    { color: var(--magenta, #ff00c8); }

.toast.toast-out {
  animation: toast-out 0.2s ease-in both;
}

@keyframes toast-in {
  from { transform: translateX(20px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

@keyframes toast-out {
  from { transform: translateX(0); opacity: 1; }
  to   { transform: translateX(20px); opacity: 0; }
}

@media (max-width: 600px) {
  .toast-container {
    top: auto;
    bottom: 20px;
    right: 20px;
    left: 20px;
    width: auto;
  }
  .toast { animation: toast-in-mobile 0.25s both; }
  @keyframes toast-in-mobile {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
  }
}

/* ============================================
   [FEAT] DRAG & DROP PRESET JSON
   When a file is dragged over the document, highlight the preset section
   as the drop target. The drop handler itself listens on document to avoid
   accidental misses while the user moves over child elements.
   ============================================ */
body.dragging-preset .preset-section {
  outline: 3px dashed var(--magenta, #ff00c8);
  outline-offset: 4px;
  background: rgba(255, 0, 200, 0.05);
  position: relative;
}

body.dragging-preset .preset-section::after {
  content: "↓ Drop your preset JSON here";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.92);
  font-family: 'Archivo Black', sans-serif;
  font-size: 13px;
  color: var(--magenta, #ff00c8);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  pointer-events: none;
  border: 2px dashed var(--magenta, #ff00c8);
}

body.dragging-preset::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.05);
  pointer-events: none;
  z-index: 9998;
}

.canvas-loading-text {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--paper);
}


/* [UX-029] Touch scrub indicator */
.touch-scrub-indicator {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(10, 10, 10, 0.75);
  color: var(--paper);
  font-family: 'Space Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 6px 14px;
  border-radius: 4px;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
}

.touch-scrub-indicator.active {
  opacity: 1;
}

/* [UX-030] Export format badge */
.export-format-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  margin-bottom: 8px;
  border-radius: 4px;
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: rgba(0, 255, 170, 0.1);
  border: 1px solid rgba(0, 255, 170, 0.3);
  color: var(--accent);
}
.export-format-badge .format-icon {
  font-size: 14px;
}
.export-format-badge.format-mp4 {
  background: rgba(255, 170, 0, 0.1);
  border-color: rgba(255, 170, 0, 0.3);
  color: #ffaa00;
}

/* [FEAT-008] Drag cursor on canvas */
#previewCanvas {
  cursor: default;
}
#previewCanvas:active {
  cursor: grabbing;
}

/* [UX-030] Export format badge */
.export-format-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  margin-bottom: 8px;
  border-radius: 4px;
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: rgba(0, 255, 170, 0.1);
  border: 1px solid rgba(0, 255, 170, 0.3);
  color: var(--accent);
}
.export-format-badge .format-icon {
  font-size: 14px;
}
.export-format-badge.format-mp4 {
  background: rgba(255, 170, 0, 0.1);
  border-color: rgba(255, 170, 0, 0.3);
  color: #ffaa00;
}

/* [FEAT-008] Drag cursor on canvas */
#previewCanvas {
  cursor: default;
}
#previewCanvas:active {
  cursor: grabbing;
}