@ashraf_mizo/htmlcanvas 1.0.0

package/editor/editor.css

@@ -0,0 +1,1996 @@
+/* ── HTMLCanvas editor styles ── */
+
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+:root {
+  --toolbar-h: 48px;
+  --sidebar-w: clamp(240px, 18vw, 400px);
+  --sidebar-collapsed-w: 0px;
+  --bg-workspace: #141414;
+  --bg-panel: #1c1c1e;
+  --bg-toolbar: #1c1c1e;
+  --border-panel: #2a2a2e;
+  --text-muted: rgba(255, 255, 255, 0.4);
+  --text-primary: rgba(255, 255, 255, 0.88);
+  --accent: #E87420;
+  --accent-hover: #d06519;
+  --accent-blue: #2C4685;
+  --accent-purple: #7c3aed;
+}
+
+html, body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  font-family: 'DM Sans', system-ui, sans-serif;
+  background: var(--bg-workspace);
+  color: var(--text-primary);
+  overflow: hidden;
+}
+
+/* ── Layout grid ─────────────────────────────────────────────────────────── */
+
+.editor-layout {
+  display: grid;
+  grid-template-rows: var(--toolbar-h) 1fr;
+  grid-template-columns: var(--sidebar-w) 1fr var(--sidebar-w);
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+/* Collapsed states */
+.editor-layout.left-collapsed {
+  grid-template-columns: var(--sidebar-collapsed-w) 1fr var(--sidebar-w);
+}
+.editor-layout.right-collapsed {
+  grid-template-columns: var(--sidebar-w) 1fr var(--sidebar-collapsed-w);
+}
+.editor-layout.left-collapsed.right-collapsed {
+  grid-template-columns: var(--sidebar-collapsed-w) 1fr var(--sidebar-collapsed-w);
+}
+
+/* ── Toolbar ─────────────────────────────────────────────────────────────── */
+
+.toolbar {
+  grid-column: 1 / -1;
+  grid-row: 1;
+  background: var(--bg-toolbar);
+  border-bottom: 1px solid var(--border-panel);
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
+  gap: 12px;
+  user-select: none;
+  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
+  z-index: 5;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-width: 0;
+  position: relative;
+}
+
+/* Extend toolbar background beyond max-width grid on wide viewports */
+.toolbar::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 100%;
+  width: 100vw;
+  height: 100%;
+  background: var(--bg-toolbar);
+  border-bottom: 1px solid var(--border-panel);
+  pointer-events: none;
+}
+
+
+/* Hide toolbar scrollbar but keep it scrollable */
+.toolbar::-webkit-scrollbar { height: 0; }
+.toolbar { scrollbar-width: none; }
+
+.toolbar-wordmark {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+}
+
+.toolbar-logo {
+  flex-shrink: 0;
+  height: 28px;
+  width: auto;
+}
+
+.wordmark-dot {
+  color: var(--accent);
+}
+
+.toolbar-separator {
+  width: 1px;
+  height: 20px;
+  background: var(--border-panel);
+  flex-shrink: 0;
+}
+
+#current-filename {
+  font-size: 13px;
+  color: var(--text-muted);
+  flex: 1;
+  min-width: 40px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.toolbar-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.btn-toolbar {
+  padding: 5px 12px;
+  border-radius: 5px;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  border: none;
+  transition: background 0.15s, opacity 0.15s;
+}
+
+.btn-toolbar.btn-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  padding: 0;
+  background: transparent;
+  color: var(--text-muted);
+  border: 1px solid var(--border-panel);
+  border-radius: 5px;
+}
+
+.btn-toolbar.btn-icon:hover {
+  background: rgba(255, 255, 255, 0.08);
+  color: var(--text-primary);
+}
+
+.toolbar-history {
+  display: flex;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
+#btn-save {
+  background: var(--accent);
+  color: #fff;
+}
+
+#btn-save:hover {
+  background: var(--accent-hover);
+}
+
+#btn-save:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+
+#btn-export {
+  background: transparent;
+  border: 1px solid var(--border-panel);
+  color: var(--text-primary);
+}
+
+#btn-export:hover {
+  background: rgba(255, 255, 255, 0.06);
+}
+
+#btn-export-pdf {
+  background: transparent;
+  border: 1px solid var(--accent);
+  color: var(--accent);
+  font-weight: 600;
+  font-size: 11px;
+  letter-spacing: 0.3px;
+}
+#btn-export-pdf:hover {
+  background: rgba(232, 116, 32, 0.12);
+}
+#btn-export-pdf:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+#toolbar-status {
+  font-size: 11px;
+  color: var(--accent);
+  opacity: 0;
+  transition: opacity 0.3s;
+  pointer-events: none;
+}
+
+#toolbar-status.visible {
+  opacity: 1;
+}
+
+/* ── Zoom controls ──────────────────────────────────────────────────── */
+
+.toolbar-zoom {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  flex-shrink: 0;
+}
+
+.btn-zoom {
+  width: 28px;
+  height: 28px;
+  border: 1px solid var(--border-panel);
+  background: transparent;
+  color: var(--text-primary);
+  border-radius: 4px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.12s;
+  padding: 0;
+  line-height: 1;
+}
+
+.btn-zoom:hover {
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.btn-zoom-level {
+  height: 28px;
+  padding: 0 8px;
+  border: 1px solid var(--border-panel);
+  background: transparent;
+  color: var(--text-muted);
+  border-radius: 4px;
+  font-size: 11px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.12s, color 0.12s;
+  min-width: 48px;
+  text-align: center;
+  font-family: 'DM Sans', system-ui, sans-serif;
+}
+
+.btn-zoom-level:hover {
+  background: rgba(255, 255, 255, 0.06);
+  color: var(--text-primary);
+}
+
+/* ── Slide count indicator ──────────────────────────────────────────── */
+
+.toolbar-slide-count {
+  font-size: 11px;
+  color: var(--text-muted);
+  padding: 4px 10px;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid var(--border-panel);
+  border-radius: 4px;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+/* ── Panels ──────────────────────────────────────────────────────────────── */
+
+.panel-layers,
+.panel-properties {
+  grid-row: 2;
+  background: var(--bg-panel);
+  border-right: 1px solid var(--border-panel);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  position: relative;
+  min-width: 0;           /* prevent grid blowout */
+}
+
+.panel-properties {
+  grid-row: 2;
+  grid-column: 3;
+  border-right: none;
+  border-left: 1px solid var(--border-panel);
+  position: relative;
+}
+
+/* Extend right panel background to fill any viewport space beyond the max-width grid */
+.panel-properties::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 100%;
+  width: 100vw;
+  height: 100%;
+  background: var(--bg-panel);
+  pointer-events: none;
+}
+
+
+/* Panel inner wrapper — hides content when collapsed */
+.panel-inner {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: hidden;
+  min-width: 0;
+  transition: opacity 0.2s ease;
+}
+
+.panel-layers.collapsed .panel-inner,
+.panel-properties.collapsed .panel-inner {
+  opacity: 0;
+  pointer-events: none;
+  overflow: hidden;
+}
+
+/* Collapsed panels shrink to 0 via grid, hide border */
+.panel-layers.collapsed {
+  border-right: none;
+}
+.panel-properties.collapsed {
+  border-left: none;
+}
+
+/* ── Panel collapse toggle buttons ─────────────────────────────────── */
+.panel-collapse-btn {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 10;
+  width: 20px;
+  height: 48px;
+  border: 1px solid var(--border-panel);
+  background: var(--bg-panel);
+  color: var(--text-muted);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  transition: background 0.15s, color 0.15s, opacity 0.15s;
+  opacity: 0;
+}
+
+.panel-layers:hover .panel-collapse-btn,
+.panel-properties:hover .panel-collapse-btn,
+.panel-collapse-btn:hover {
+  opacity: 1;
+}
+
+.panel-collapse-btn:hover {
+  background: rgba(255, 255, 255, 0.08);
+  color: var(--text-primary);
+}
+
+/* Left toggle sits on right edge of left panel */
+.panel-collapse-btn-left {
+  right: -20px;
+  border-radius: 0 6px 6px 0;
+  border-left: none;
+}
+
+/* Right toggle sits on left edge of right panel */
+.panel-collapse-btn-right {
+  left: -20px;
+  border-radius: 6px 0 0 6px;
+  border-right: none;
+}
+
+/* When collapsed, toggle is always visible and repositioned */
+.panel-layers.collapsed .panel-collapse-btn-left {
+  opacity: 1;
+  right: -20px;
+}
+.panel-properties.collapsed .panel-collapse-btn-right {
+  opacity: 1;
+  left: -20px;
+}
+
+/* Arrow icon direction: show open icon normally, closed icon when collapsed */
+.collapse-icon-closed { display: none; }
+.collapsed .collapse-icon-open { display: none; }
+.collapsed .collapse-icon-closed { display: inline; }
+
+.panel-header {
+  padding: 10px 14px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+  border-bottom: 1px solid var(--border-panel);
+  flex-shrink: 0;
+}
+
+.panel-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 14px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+}
+
+.panel-placeholder {
+  font-size: 12px;
+  color: var(--text-muted);
+  text-align: center;
+  padding-top: 20px;
+}
+
+/* ── Canvas area ─────────────────────────────────────────────────────────── */
+
+.canvas-area {
+  grid-column: 2;
+  grid-row: 2;
+  background: var(--bg-workspace);
+  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
+  background-size: 20px 20px;
+  overflow: auto;
+  scrollbar-gutter: stable;
+  position: relative;
+  min-width: 0;
+}
+
+/* Custom scrollbar */
+.canvas-area::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+.canvas-area::-webkit-scrollbar-track {
+  background: var(--bg-workspace);
+}
+.canvas-area::-webkit-scrollbar-thumb {
+  background: var(--border-panel);
+  border-radius: 4px;
+}
+
+#canvas-empty-state {
+  text-align: center;
+  pointer-events: none;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+#canvas-empty-state .empty-icon {
+  font-size: 40px;
+  margin-bottom: 12px;
+  opacity: 0.15;
+}
+
+#canvas-empty-state p {
+  margin: 0;
+  font-size: 13px;
+  color: var(--text-muted);
+}
+
+/* ── iframe render container ────────────────────────────────────────── */
+
+#iframe-container {
+  margin: 24px;
+  transform-origin: top left;
+  /* Width and height are set dynamically by editor.js based on content */
+}
+
+#render-iframe {
+  border: none;
+  background: #fff;
+  display: block;
+  /* Width and height are set dynamically by editor.js */
+  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
+}
+
+/* ── Welcome screen ──────────────────────────────────────────────────────── */
+
+#welcome-screen {
+  position: fixed;
+  inset: 0;
+  z-index: 100;
+  background: #111;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 20px;
+  overflow: hidden;
+}
+
+/* Gradient glow blobs (matches s2-video-section on ashrafbuilds.com) */
+.welcome-blob {
+  position: absolute;
+  border-radius: 9999px;
+  filter: blur(120px);
+  opacity: 0.45;
+  pointer-events: none;
+}
+
+.welcome-blob-1 {
+  width: 50vw; height: 50vh; top: -15%; left: -10%;
+  background: radial-gradient(circle, #2C4685 0%, transparent 70%);
+}
+
+.welcome-blob-2 {
+  width: 60vw; height: 60vh; top: 20%; right: -15%;
+  background: radial-gradient(circle, #E87420 0%, transparent 70%);
+}
+
+.welcome-blob-3 {
+  width: 45vw; height: 45vh; bottom: -10%; left: 25%;
+  background: radial-gradient(circle, #8B3A0F 0%, transparent 70%);
+}
+
+/* Grain overlay */
+#welcome-screen::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  opacity: 0.4;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
+  background-repeat: repeat;
+  background-size: 180px 180px;
+}
+
+.welcome-logo {
+  position: relative;
+  z-index: 1;
+}
+
+.welcome-logo-img {
+  width: 220px;
+  height: auto;
+}
+
+.welcome-subtitle,
+#btn-open,
+.recent-files-section {
+  position: relative;
+  z-index: 1;
+}
+
+.welcome-subtitle {
+  font-size: 15px;
+  color: var(--text-muted);
+  margin: -8px 0 0 0;
+}
+
+#btn-open {
+  padding: 10px 28px;
+  background: var(--accent);
+  color: #fff;
+  border: none;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+#btn-open:hover {
+  background: var(--accent-hover);
+}
+
+.recent-files-section {
+  width: 320px;
+  max-width: 90vw;
+}
+
+.recent-files-section h3 {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+  margin: 0 0 10px 0;
+}
+
+#recent-files-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+#recent-files-list li {
+  padding: 8px 12px;
+  border-radius: 6px;
+  background: transparent;
+  border: 1.5px solid rgba(255, 255, 255, 0.7);
+  cursor: pointer;
+  transition: background 0.12s, border-color 0.12s;
+}
+
+#recent-files-list li:hover {
+  background: rgba(255, 255, 255, 0.06);
+  border-color: #fff;
+}
+
+#recent-files-list .recent-filename {
+  font-size: 13px;
+  color: #fff;
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+#recent-files-list .recent-path {
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.55);
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-top: 2px;
+}
+
+.recent-files-empty {
+  font-size: 12px;
+  color: var(--text-muted);
+  font-style: italic;
+}
+
+/* ── Drop overlay ────────────────────────────────────────────────────────── */
+
+#drop-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  background: rgba(232, 116, 32, 0.12);
+  border: 3px dashed var(--accent);
+  display: none;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}
+
+#drop-overlay.active {
+  display: flex;
+}
+
+#drop-overlay p {
+  font-size: 20px;
+  font-weight: 600;
+  color: var(--accent);
+}
+
+/* ── File-changed banner ─────────────────────────────────────────────────── */
+
+#file-changed-banner {
+  position: fixed;
+  bottom: 16px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: #333;
+  color: var(--text-primary);
+  padding: 10px 20px;
+  border-radius: 6px;
+  z-index: 200;
+  display: none;
+  align-items: center;
+  gap: 12px;
+  font-size: 13px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
+  border: 1px solid var(--border-panel);
+  white-space: nowrap;
+}
+
+#file-changed-banner.visible {
+  display: flex;
+}
+
+#file-changed-banner button {
+  padding: 4px 10px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  border: 1px solid var(--border-panel);
+  background: rgba(255, 255, 255, 0.08);
+  color: var(--text-primary);
+  transition: background 0.12s;
+}
+
+#file-changed-banner button:hover {
+  background: rgba(255, 255, 255, 0.14);
+}
+
+#file-changed-banner #btn-banner-reload {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: #fff;
+}
+
+#file-changed-banner #btn-banner-reload:hover {
+  background: var(--accent-hover);
+}
+
+/* ── Selection overlays ──────────────────────────────────────────────────── */
+
+#hover-overlay {
+  position: absolute;
+  pointer-events: none;
+  border: 1.5px dashed #4a7fd4;
+  box-sizing: border-box;
+  z-index: 10;
+}
+
+#selection-overlay {
+  position: absolute;
+  pointer-events: none;
+  border: 1.5px solid #4a7fd4;
+  box-sizing: border-box;
+  z-index: 11;
+}
+
+.sel-drag-surface {
+  position: absolute;
+  inset: 0;
+  pointer-events: all;
+  cursor: move;
+}
+
+.sel-handle {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background: #4a7fd4;
+  border: 1px solid #fff;
+  box-sizing: border-box;
+  pointer-events: all; /* handles ARE clickable for parent escalation */
+  cursor: default;
+}
+
+/* Handle positions: offset by -50% to center on corner/edge */
+.sel-handle[data-pos="tl"] { transform: translate(-50%, -50%); }
+.sel-handle[data-pos="tm"] { left: 50%; transform: translate(-50%, -50%); }
+.sel-handle[data-pos="tr"] { left: 100%; transform: translate(-50%, -50%); }
+.sel-handle[data-pos="ml"] { top: 50%; transform: translate(-50%, -50%); }
+.sel-handle[data-pos="mr"] { left: 100%; top: 50%; transform: translate(-50%, -50%); }
+.sel-handle[data-pos="bl"] { top: 100%; transform: translate(-50%, -50%); }
+.sel-handle[data-pos="bm"] { left: 50%; top: 100%; transform: translate(-50%, -50%); }
+.sel-handle[data-pos="br"] { left: 100%; top: 100%; transform: translate(-50%, -50%); }
+
+.sel-dim-label {
+  position: absolute;
+  top: calc(100% + 6px);
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 10px;
+  font-family: 'DM Sans', system-ui, sans-serif;
+  color: #4a7fd4;
+  white-space: nowrap;
+  pointer-events: none;
+  background: rgba(30, 30, 30, 0.75);
+  padding: 1px 5px;
+  border-radius: 3px;
+}
+
+.sel-rotate-handle {
+  position: absolute;
+  left: 50%;
+  top: -24px;
+  width: 12px;
+  height: 12px;
+  background: #4a7fd4;
+  border: 1px solid #fff;
+  border-radius: 50%;
+  transform: translateX(-50%);
+  cursor: grab;
+  pointer-events: all;
+}
+
+.sel-rotate-handle:active {
+  cursor: grabbing;
+}
+
+/* ── Marquee selection rect ───────────────────────────────────────────────── */
+
+.marquee-rect {
+  position: absolute;
+  border: 1px dashed #4a90d9;
+  background: rgba(74, 144, 217, 0.08);
+  pointer-events: none;
+  z-index: 1000;
+  box-sizing: border-box;
+}
+
+/* ── Multi-selection bounding box overlay ─────────────────────────────────── */
+
+#multi-selection-overlay {
+  position: absolute;
+  pointer-events: none;
+  border: 1.5px dashed #4a90d9;
+  background: rgba(74, 144, 217, 0.05);
+  box-sizing: border-box;
+  z-index: 12;
+}
+
+.multi-drag-surface {
+  position: absolute;
+  inset: 0;
+  pointer-events: all;
+  cursor: move;
+}
+
+/* ── Layer panel ──────────────────────────────────────────────────────────── */
+
+.layer-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.layer-item {
+  padding: 4px 8px;
+  font-size: 12px;
+  font-family: 'DM Sans', sans-serif;
+  color: #ccc;
+  cursor: pointer;
+  border-radius: 4px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  user-select: none;
+}
+
+.layer-item:hover {
+  background: rgba(255, 255, 255, 0.06);
+}
+
+.layer-item.active {
+  background: rgba(44, 70, 133, 0.3);
+  color: #fff;
+}
+
+/* (Layer tree is now in right panel only) */
+
+/* SortableJS drag ghost */
+.layer-item.sortable-ghost {
+  opacity: 0.4;
+}
+
+.layer-item.sortable-chosen {
+  background: rgba(44, 70, 133, 0.2);
+}
+
+/* Left panel body (assets/components) */
+.panel-layers .panel-body {
+  align-items: flex-start;
+  justify-content: flex-start;
+  padding: 8px 0;
+}
+
+/* Right-side layer panel (inside properties aside) */
+.panel-section-right-layers {
+  flex: none !important;
+  max-height: 220px;
+  overflow-y: auto;
+  border-bottom: 1px solid var(--border-panel);
+  padding: 4px 0 !important;
+  flex-direction: column !important;
+  align-items: stretch !important;
+  justify-content: flex-start !important;
+}
+
+.panel-section-right-layers .layer-list {
+  width: 100%;
+}
+
+/* Layer groups (slide grouping) */
+.layer-group {
+  width: 100%;
+  margin-bottom: 2px;
+}
+
+.layer-group-label {
+  padding: 5px 10px;
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  cursor: pointer;
+  user-select: none;
+}
+
+.layer-group-label:hover {
+  color: var(--text-primary);
+}
+
+/* ── Moveable handle overrides ───────────────────────────────────────────── */
+/* Blue accent (#2680EB) to match editor's selection visual language */
+
+.moveable-control-box .moveable-line {
+  background: #2680EB !important;
+  height: 1px !important;
+}
+
+.moveable-control-box .moveable-control {
+  background: #fff !important;
+  border: 1.5px solid #2680EB !important;
+  border-radius: 50% !important;
+  width: 8px !important;
+  height: 8px !important;
+  margin-top: -4px !important;
+  margin-left: -4px !important;
+}
+
+.moveable-control-box .moveable-rotation-control {
+  border-radius: 50% !important;
+  background: #fff !important;
+  border: 1.5px solid #2680EB !important;
+}
+
+/* ── Snap guide lines (Figma-style pink) ─────────────────────────────────── */
+
+.moveable-line.moveable-direction {
+  background: rgba(255, 0, 153, 0.85) !important;
+  height: 1px !important;
+}
+
+.moveable-line.moveable-dashed {
+  border-color: rgba(255, 0, 153, 0.85) !important;
+}
+
+/* ── Properties panel ───────────────────────────────────────────────────────── */
+
+/* Override panel-body alignment for properties panel (left-align all controls) */
+.panel-properties .panel-body-properties {
+  align-items: flex-start;
+  justify-content: flex-start;
+  flex-direction: column;
+  padding: 0;
+  gap: 0;
+}
+
+.prop-section {
+  width: 100%;
+  border-bottom: 1px solid var(--border-panel);
+}
+
+.prop-section.prop-disabled {
+  opacity: 0.4;
+  pointer-events: none;
+}
+
+.prop-section-header {
+  padding: 7px 12px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+  cursor: pointer;
+  user-select: none;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  transition: color 0.12s;
+}
+
+.prop-section-header:hover {
+  color: var(--text-primary);
+}
+
+.prop-section-arrow {
+  font-size: 9px;
+  transition: transform 0.15s;
+  flex-shrink: 0;
+}
+
+.prop-section.prop-section-collapsed .prop-section-arrow {
+  transform: rotate(-90deg);
+}
+
+.prop-section.prop-section-collapsed .prop-section-body {
+  display: none;
+}
+
+.prop-section-body {
+  padding: 4px 10px 8px 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+/* 2x2 grid for X/Y/W/H */
+.prop-grid-2x2 {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 4px;
+}
+
+.prop-row {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  min-height: 26px;
+}
+
+.prop-row-full {
+  width: 100%;
+}
+
+.prop-label {
+  font-size: 11px;
+  color: var(--text-muted);
+  min-width: 40px;
+  flex-shrink: 0;
+}
+
+.prop-unit {
+  font-size: 11px;
+  color: var(--text-muted);
+  flex-shrink: 0;
+}
+
+.prop-input {
+  flex: 1;
+  height: 26px;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid var(--border-panel);
+  border-radius: 4px;
+  color: var(--text-primary);
+  font-size: 11px;
+  font-family: 'DM Sans', system-ui, sans-serif;
+  padding: 0 6px;
+  min-width: 0;
+  transition: border-color 0.12s;
+}
+
+.prop-input:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+
+.prop-input.prop-locked,
+.prop-select.prop-locked {
+  opacity: 0.45;
+  cursor: not-allowed;
+  border-style: dashed;
+}
+
+.prop-select {
+  flex: 1;
+  height: 26px;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid var(--border-panel);
+  border-radius: 4px;
+  color: var(--text-primary);
+  font-size: 11px;
+  font-family: 'DM Sans', system-ui, sans-serif;
+  padding: 0 4px;
+  cursor: pointer;
+  min-width: 0;
+  appearance: none;
+  -webkit-appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 6px center;
+  padding-right: 22px;
+}
+
+.prop-select:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+
+.prop-select-full {
+  width: 100%;
+  flex: none;
+}
+
+/* ── Custom font picker (searchable dropdown) ──────────────────────────────── */
+
+.font-picker {
+  width: 100%;
+  position: relative;
+}
+
+.font-picker-trigger {
+  width: 100%;
+  height: 26px;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid var(--border-panel);
+  border-radius: 4px;
+  color: var(--text-primary);
+  font-size: 11px;
+  font-family: 'DM Sans', system-ui, sans-serif;
+  padding: 0 22px 0 6px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  text-align: left;
+  position: relative;
+}
+
+.font-picker-trigger:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+
+.font-picker-trigger:hover {
+  border-color: rgba(255, 255, 255, 0.2);
+}
+
+.font-picker-value {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+}
+
+.font-picker-arrow {
+  position: absolute;
+  right: 6px;
+  top: 50%;
+  transform: translateY(-50%);
+  pointer-events: none;
+}
+
+.font-picker.open .font-picker-arrow {
+  transform: translateY(-50%) rotate(180deg);
+}
+
+.font-picker-dropdown {
+  position: fixed;
+  width: 220px;
+  max-height: 280px;
+  background: #1e1e22;
+  border: 1px solid var(--border-panel);
+  border-radius: 6px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
+  z-index: 10000;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.font-picker-search {
+  width: 100%;
+  height: 30px;
+  background: rgba(255, 255, 255, 0.06);
+  border: none;
+  border-bottom: 1px solid var(--border-panel);
+  color: var(--text-primary);
+  font-size: 11px;
+  font-family: 'DM Sans', system-ui, sans-serif;
+  padding: 0 8px;
+  outline: none;
+}
+
+.font-picker-search::placeholder {
+  color: var(--text-muted);
+}
+
+.font-picker-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 4px 0;
+}
+
+.font-picker-option {
+  padding: 5px 10px;
+  font-size: 11px;
+  color: var(--text-primary);
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.font-picker-option:hover,
+.font-picker-option.highlighted {
+  background: rgba(232, 116, 32, 0.2);
+}
+
+.font-picker-option.active {
+  background: rgba(232, 116, 32, 0.35);
+  font-weight: 600;
+}
+
+.font-picker-separator {
+  height: 1px;
+  background: var(--border-panel);
+  margin: 4px 0;
+}
+
+.font-picker.prop-locked .font-picker-trigger {
+  opacity: 0.45;
+  cursor: not-allowed;
+  border-style: dashed;
+}
+
+.prop-color-swatch {
+  width: 26px;
+  height: 26px;
+  border: 1px solid var(--border-panel);
+  border-radius: 4px;
+  padding: 2px;
+  background: transparent;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.prop-color-swatch::-webkit-color-swatch-wrapper {
+  padding: 0;
+  border-radius: 2px;
+}
+
+.prop-color-swatch::-webkit-color-swatch {
+  border: none;
+  border-radius: 2px;
+}
+
+.prop-hex-input {
+  width: 72px;
+  flex: none;
+}
+
+.prop-var-lock {
+  font-size: 10px;
+  color: var(--accent);
+  font-weight: 500;
+  background: rgba(232, 116, 32, 0.1);
+  border: 1px solid rgba(232, 116, 32, 0.3);
+  padding: 1px 5px;
+  border-radius: 3px;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+/* ── Snap toggle button ──────────────────────────────────────────────────── */
+
+#btn-snap {
+  background: transparent;
+  border: 1px solid var(--border-panel);
+  color: var(--text-muted);
+  transition: background 0.12s, color 0.12s, border-color 0.12s;
+}
+
+#btn-snap:hover {
+  background: rgba(255, 255, 255, 0.06);
+  color: var(--text-primary);
+}
+
+#btn-snap.active {
+  background: rgba(232, 116, 32, 0.12);
+  border-color: var(--accent);
+  color: var(--accent);
+}
+
+/* ── Shape picker dropdown ─────────────────────────────────────────────────── */
+
+.shape-picker-wrapper {
+  position: relative;
+}
+
+#btn-shapes {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  width: auto;
+  padding: 0 6px;
+}
+
+.btn-shapes-caret {
+  flex-shrink: 0;
+  opacity: 0.5;
+  margin-left: -1px;
+}
+
+.shape-picker-dropdown {
+  position: absolute;
+  top: calc(100% + 6px);
+  left: 0;
+  width: 260px;
+  max-height: 380px;
+  overflow-y: auto;
+  background: #1e1e22;
+  border: 1px solid var(--border-panel);
+  border-radius: 8px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+  z-index: 10000;
+  padding: 6px;
+}
+
+.shape-picker-dropdown::-webkit-scrollbar {
+  width: 5px;
+}
+
+.shape-picker-dropdown::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.12);
+  border-radius: 3px;
+}
+
+.shape-picker-cat {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-muted);
+  padding: 6px 6px 4px 6px;
+}
+
+.shape-picker-grid {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  gap: 2px;
+  padding: 0 2px 6px 2px;
+}
+
+.shape-picker-item {
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 5px;
+  color: var(--text-muted);
+  cursor: pointer;
+  padding: 0;
+  transition: background 0.1s, color 0.1s, border-color 0.1s;
+}
+
+.shape-picker-item:hover {
+  background: rgba(232, 116, 32, 0.12);
+  border-color: rgba(232, 116, 32, 0.3);
+  color: var(--accent);
+}
+
+.shape-picker-item svg {
+  pointer-events: none;
+}
+
+/* ── Asset browser & component library (05-04) ── */
+.toolbar-shapes { display: flex; gap: 2px; flex-shrink: 0; }
+.panel-header-collapsible { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 6px; }
+.panel-header-collapsible::before { content: '▾'; font-size: 10px; }
+.panel-header-collapsible.collapsed::before { transform: rotate(-90deg); }
+.panel-section-assets, .panel-section-components { flex: none; overflow-y: auto; max-height: 180px; border-bottom: 1px solid var(--border-panel); }
+.asset-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 8px; }
+.asset-thumb { width: 60px; height: 60px; object-fit: cover; border-radius: 4px; cursor: grab; border: 1px solid transparent; background: rgba(255,255,255,0.06); }
+.asset-thumb:hover { border-color: var(--accent); }
+.component-list { display: flex; flex-direction: column; padding: 6px; gap: 3px; }
+.component-item { padding: 6px 10px; font-size: 11px; color: var(--text-primary); background: rgba(255,255,255,0.04); border: 1px solid var(--border-panel); border-radius: 4px; cursor: grab; }
+.context-menu { position: fixed; z-index: 10000; background: #1e1e22; border: 1px solid var(--border-panel); border-radius: 6px; padding: 4px; }
+.context-menu-item { padding: 7px 12px; font-size: 12px; color: var(--text-primary); border-radius: 4px; cursor: pointer; }
+.context-menu-item:hover { background: rgba(232,116,32,0.15); color: var(--accent); }
+
+/* ── Properties panel action buttons ── */
+.prop-section-actions { border-bottom: 1px solid var(--border-panel); padding: 8px 10px; }
+.prop-actions-row { display: flex; gap: 6px; }
+.prop-action-btn {
+  display: inline-flex; align-items: center; gap: 5px;
+  padding: 5px 10px; font-size: 11px; font-family: inherit;
+  color: var(--text-primary); background: rgba(255,255,255,0.06);
+  border: 1px solid var(--border-panel); border-radius: 4px;
+  cursor: pointer; transition: background 0.12s, border-color 0.12s;
+}
+.prop-action-btn:hover { background: rgba(232,116,32,0.12); border-color: var(--accent); color: var(--accent); }
+.prop-action-btn svg { flex-shrink: 0; }
+
+/* ── Shape mask picker ── */
+.prop-mask-wrapper { position: relative; }
+
+.mask-picker {
+  position: absolute;
+  top: calc(100% + 6px);
+  left: 0;
+  width: 220px;
+  background: #1e1e22;
+  border: 1px solid var(--border-panel);
+  border-radius: 8px;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
+  z-index: 10001;
+  padding: 8px;
+}
+
+.mask-picker-grid {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  gap: 3px;
+  margin-bottom: 6px;
+}
+
+.mask-picker-item {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255,255,255,0.05);
+  border: 1px solid transparent;
+  border-radius: 4px;
+  cursor: pointer;
+  padding: 0;
+  transition: background 0.12s, border-color 0.12s;
+}
+
+.mask-picker-item:hover,
+.mask-picker-item.active {
+  background: rgba(232,116,32,0.15);
+  border-color: var(--accent);
+}
+
+.mask-picker-item svg { pointer-events: none; }
+
+.mask-picker-remove {
+  width: 100%;
+  padding: 5px;
+  font-size: 11px;
+  font-family: inherit;
+  color: var(--text-muted);
+  background: rgba(255,255,255,0.04);
+  border: 1px solid var(--border-panel);
+  border-radius: 4px;
+  cursor: pointer;
+  transition: color 0.12s, border-color 0.12s;
+}
+
+.mask-picker-remove:hover { color: var(--text-primary); border-color: var(--text-muted); }
+
+/* ── Text-edit cursor hint on drag surface ── */
+.sel-drag-surface { cursor: move; }
+.sel-drag-surface.text-cursor { cursor: text; }
+
+/* ── Alignment toolbar ── */
+.toolbar-align {
+  display: flex;
+  gap: 2px;
+  flex-shrink: 0;
+}
+
+/* ── Toggle button group (text-align, text-decoration, etc.) ── */
+.prop-btn-group {
+  display: flex;
+  gap: 2px;
+  flex: 1;
+}
+
+.prop-btn-toggle {
+  width: 28px;
+  height: 26px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid var(--border-panel);
+  border-radius: 4px;
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: background 0.12s, color 0.12s, border-color 0.12s;
+  padding: 0;
+  font-family: inherit;
+}
+
+.prop-btn-toggle:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text-primary);
+}
+
+.prop-btn-toggle.active {
+  background: rgba(232, 116, 32, 0.15);
+  border-color: var(--accent);
+  color: var(--accent);
+}
+
+/* ── Fill / Border chip toggles ── */
+.prop-chip-group {
+  display: flex;
+  gap: 4px;
+}
+
+.prop-chip {
+  flex: 1;
+  height: 26px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid var(--border-panel);
+  border-radius: 4px;
+  color: var(--text-muted);
+  cursor: pointer;
+  font-size: 11px;
+  font-family: inherit;
+  font-weight: 500;
+  transition: background 0.12s, color 0.12s, border-color 0.12s;
+}
+
+.prop-chip:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text-primary);
+}
+
+.prop-chip.active {
+  background: rgba(232, 116, 32, 0.15);
+  border-color: var(--accent);
+  color: var(--accent);
+}
+
+/* ── Opacity range slider ── */
+.prop-range {
+  flex: 1;
+  height: 4px;
+  -webkit-appearance: none;
+  appearance: none;
+  background: rgba(255, 255, 255, 0.12);
+  border-radius: 2px;
+  outline: none;
+  cursor: pointer;
+}
+
+.prop-range::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--accent);
+  border: 2px solid #fff;
+  cursor: pointer;
+}
+
+.prop-range::-moz-range-thumb {
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--accent);
+  border: 2px solid #fff;
+  cursor: pointer;
+}
+
+.prop-input-sm {
+  width: 48px;
+  flex: none;
+}
+
+/* ── Small action button variant ── */
+.prop-action-btn-sm {
+  font-size: 10px;
+  padding: 3px 8px;
+}
+
+/* ── Aspect ratio lock button ── */
+.prop-row-linked {
+  position: relative;
+}
+
+.prop-link-btn {
+  width: 22px;
+  height: 22px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: 1px solid var(--border-panel);
+  border-radius: 3px;
+  color: var(--text-muted);
+  cursor: pointer;
+  padding: 0;
+  flex-shrink: 0;
+  transition: background 0.12s, color 0.12s, border-color 0.12s;
+}
+
+.prop-link-btn:hover {
+  background: rgba(255, 255, 255, 0.08);
+  color: var(--text-primary);
+}
+
+.prop-link-btn.active {
+  background: rgba(232, 116, 32, 0.15);
+  border-color: var(--accent);
+  color: var(--accent);
+}
+
+/* ── Layer item lock/hide toggles ── */
+.layer-item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.layer-item-label {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.layer-toggle {
+  width: 18px;
+  height: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  color: var(--text-muted);
+  cursor: pointer;
+  padding: 0;
+  border-radius: 3px;
+  opacity: 0;
+  transition: opacity 0.12s, color 0.12s;
+  flex-shrink: 0;
+}
+
+.layer-item:hover .layer-toggle,
+.layer-toggle.active {
+  opacity: 1;
+}
+
+.layer-toggle:hover {
+  color: var(--text-primary);
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.layer-toggle.active {
+  color: var(--accent);
+}
+
+/* ── Recent color swatches ── */
+.prop-recent-colors {
+  display: flex;
+  gap: 3px;
+  flex-wrap: wrap;
+  margin-top: 4px;
+}
+
+.prop-recent-swatch {
+  width: 18px;
+  height: 18px;
+  border-radius: 3px;
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  cursor: pointer;
+  padding: 0;
+  transition: border-color 0.12s;
+}
+
+.prop-recent-swatch:hover {
+  border-color: var(--accent);
+}
+
+/* ── Rulers and Guides ─────────────────────────────────────────────────────── */
+
+/* Rulers use a wrapper that sits on top of the canvas and doesn't scroll */
+.canvas-rulers-wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  z-index: 15;
+  overflow: hidden;
+  /* width/height and top/left are set dynamically by JS to track the scroll viewport */
+}
+
+.canvas-ruler {
+  position: absolute;
+  background: #1c1c1e;
+  pointer-events: all;
+  overflow: hidden;
+}
+
+.canvas-ruler canvas {
+  display: block;
+}
+
+.canvas-ruler-h {
+  top: 0;
+  left: 20px;
+  right: 0;
+  height: 20px;
+  cursor: s-resize;
+  border-bottom: 1px solid #2a2a2e;
+}
+
+.canvas-ruler-v {
+  top: 20px;
+  left: 0;
+  bottom: 0;
+  width: 20px;
+  cursor: e-resize;
+  border-right: 1px solid #2a2a2e;
+}
+
+.canvas-ruler-corner {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 20px;
+  height: 20px;
+  background: #1c1c1e;
+  border-right: 1px solid #2a2a2e;
+  border-bottom: 1px solid #2a2a2e;
+  z-index: 16;
+  pointer-events: all;
+}
+
+.canvas-guides-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 1px;
+  height: 1px;
+  overflow: visible;
+  pointer-events: none;
+  z-index: 9;
+}
+
+.canvas-guide {
+  pointer-events: all !important;
+}
+
+.canvas-guide-h {
+  height: 0;
+  border-top: 1px dashed rgba(0, 160, 255, 0.45);
+  background: none;
+}
+
+.canvas-guide-v {
+  width: 0;
+  border-left: 1px dashed rgba(0, 160, 255, 0.45);
+  background: none;
+}
+
+/* ── Slide panel (PowerPoint-style thumbnails) ────────────────────────────── */
+
+.slide-panel {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 12px 6px 12px 4px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+/* Scrollbar for slide panel */
+.slide-panel::-webkit-scrollbar {
+  width: 6px;
+}
+.slide-panel::-webkit-scrollbar-track {
+  background: transparent;
+}
+.slide-panel::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 3px;
+}
+
+.slide-thumb {
+  display: flex;
+  align-items: flex-start;
+  gap: 6px;
+  padding: 4px;
+  cursor: pointer;
+  border-radius: 6px;
+  transition: background 0.12s;
+  flex-shrink: 0;
+}
+
+.slide-thumb:hover {
+  background: rgba(255, 255, 255, 0.04);
+}
+
+.slide-thumb-num {
+  font-size: 10px;
+  color: var(--text-muted);
+  width: 16px;
+  text-align: right;
+  flex-shrink: 0;
+  padding-top: 4px;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+}
+
+.slide-thumb-preview {
+  flex: 1;
+  overflow: hidden;
+  border-radius: 3px;
+  border: 2px solid rgba(255, 255, 255, 0.08);
+  position: relative;
+  background: #fff;
+  transition: border-color 0.15s, box-shadow 0.15s;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+}
+
+.slide-thumb.active .slide-thumb-preview {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 1px var(--accent), 0 2px 8px rgba(232, 116, 32, 0.25);
+}
+
+.slide-thumb:hover:not(.active) .slide-thumb-preview {
+  border-color: rgba(255, 255, 255, 0.2);
+}
+
+.slide-thumb-iframe {
+  border: none;
+  pointer-events: none;
+  transform-origin: top left;
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: block;
+}
+
+/* ── Crop overlay ──────────────────────────────────────────────────────────── */
+
+.crop-overlay {
+  position: absolute;
+  z-index: 20;
+  pointer-events: none;
+}
+
+.crop-dim-area {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  pointer-events: none;
+}
+
+/* Edge handles */
+.crop-handle {
+  position: absolute;
+  pointer-events: all;
+  z-index: 21;
+}
+
+.crop-handle-t, .crop-handle-b {
+  height: 6px;
+  margin-top: -3px;
+  cursor: ns-resize;
+}
+
+.crop-handle-l, .crop-handle-r {
+  width: 6px;
+  margin-left: -3px;
+  cursor: ew-resize;
+}
+
+/* Corner handles */
+.crop-handle-tl, .crop-handle-tr, .crop-handle-bl, .crop-handle-br {
+  width: 12px;
+  height: 12px;
+  background: #fff;
+  border: 2px solid var(--accent);
+  border-radius: 2px;
+  margin-left: -6px;
+  margin-top: -6px;
+  z-index: 22;
+}
+
+.crop-handle-tl { cursor: nwse-resize; }
+.crop-handle-tr { cursor: nesw-resize; }
+.crop-handle-bl { cursor: nesw-resize; }
+.crop-handle-br { cursor: nwse-resize; }
+
+/* Crop toolbar */
+.crop-toolbar {
+  position: absolute;
+  display: flex;
+  gap: 6px;
+  pointer-events: all;
+  z-index: 23;
+  padding-top: 8px;
+}
+
+.crop-btn {
+  padding: 5px 12px;
+  font-size: 11px;
+  font-weight: 600;
+  font-family: 'DM Sans', system-ui, sans-serif;
+  border-radius: 4px;
+  cursor: pointer;
+  border: none;
+  transition: background 0.12s;
+}
+
+.crop-btn-apply {
+  background: var(--accent);
+  color: #fff;
+}
+
+.crop-btn-apply:hover {
+  background: var(--accent-hover);
+}
+
+.crop-btn-cancel, .crop-btn-reset {
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text-primary);
+  border: 1px solid var(--border-panel);
+}
+
+.crop-btn-cancel:hover, .crop-btn-reset:hover {
+  background: rgba(255, 255, 255, 0.18);
+}
+
+/* ── Z-order controls (layer ordering) ─────────────────────────────────── */
+
+.prop-zorder-row {
+  display: flex;
+  gap: 4px;
+  flex-wrap: wrap;
+}
+
+.prop-zorder-btn {
+  flex: 1;
+  min-width: 0;
+  padding: 4px 2px;
+  border: 1px solid var(--border-panel);
+  background: transparent;
+  color: var(--text-muted);
+  border-radius: 4px;
+  font-size: 10px;
+  font-weight: 500;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 3px;
+  transition: background 0.12s, color 0.12s;
+  white-space: nowrap;
+}
+
+.prop-zorder-btn:hover {
+  background: rgba(255, 255, 255, 0.08);
+  color: var(--text-primary);
+}
+
+.prop-zorder-btn svg {
+  flex-shrink: 0;
+}
+
+/* ── Responsive: small viewports ──────────────────────────────────────── */
+
+@media (max-width: 1100px) {
+  :root {
+    --sidebar-w: 180px;
+  }
+  .panel-section-right-layers {
+    max-height: 160px;
+  }
+}
+
+@media (max-width: 900px) {
+  :root {
+    --sidebar-w: 160px;
+    --toolbar-h: 40px;
+  }
+  .panel-inner {
+    zoom: 0.88;
+  }
+  .panel-section-right-layers {
+    max-height: 120px;
+  }
+  .toolbar {
+    padding: 0 8px;
+    gap: 4px;
+  }
+  .toolbar-wordmark { font-size: 12px; }
+  .toolbar-separator { display: none; }
+  .toolbar-wordmark span { display: none; }
+  #current-filename { min-width: 20px; flex: 0 1 auto; }
+  .btn-toolbar { padding: 4px 6px; font-size: 11px; }
+  .btn-toolbar.btn-icon { width: 26px; height: 26px; }
+  #btn-export { display: none; }
+  .btn-zoom { width: 24px; height: 24px; font-size: 12px; }
+  .btn-zoom-level { height: 24px; font-size: 10px; min-width: 40px; }
+  #iframe-container { margin: 20px auto; }
+}