/* ==========================================================================
   NCLI DESIGN STUDIO V2 — Canva-Level Editor UI
   Full-screen immersive editor with icon-strip sidebar, glassmorphism,
   smooth animations, loading skeletons, tooltips, dark/light mode.
   ========================================================================== */

/* ── 1. CSS CUSTOM PROPERTIES ─────────────────────────────────────────────── */
:root {
  /* Layout */
  --ds-topbar-h: 52px;
  --ds-bottombar-h: 36px;
  --ds-icon-strip-w: 68px;
  --ds-sidebar-w: 300px;
  --ds-right-w: 300px;

  /* Colors – Light */
  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc;
  --bg-tertiary: #f1f5f9;
  --bg-canvas: #e2e8f0;

  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;

  --border-color: #e2e8f0;
  --border-subtle: #f1f5f9;

  --accent: #7c3aed;
  --accent-light: #ede9fe;
  --accent-hover: #6d28d9;
  --accent-text: #ffffff;

  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.12);
  --shadow-xl: 0 20px 48px rgba(0,0,0,0.16);

  /* Glassmorphism */
  --glass-bg: rgba(255,255,255,0.72);
  --glass-border: rgba(255,255,255,0.25);
  --glass-blur: 16px;

  /* Transitions */
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-panel: 0.28s cubic-bezier(0.4, 0, 0.2, 1);

  /* Typography */
  --font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;
}

body.dark {
  --bg-primary: #0b0f19;
  --bg-secondary: #111827;
  --bg-tertiary: #1e2736;
  --bg-canvas: #0f1525;

  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;

  --border-color: #1e293b;
  --border-subtle: #1e293b;

  --accent: #a78bfa;
  --accent-light: rgba(167,139,250,0.12);
  --accent-hover: #8b5cf6;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.2);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.3);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.4);
  --shadow-xl: 0 20px 48px rgba(0,0,0,0.5);

  --glass-bg: rgba(15,21,37,0.82);
  --glass-border: rgba(255,255,255,0.06);
}

/* ── 2. PAGE RESET ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

.ds-app-body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  font-family: var(--font-family);
  font-size: 13px;
  color: var(--text-primary);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── 3. APPLICATION GRID ──────────────────────────────────────────────────── */
.ds-app {
  display: grid;
  grid-template-rows: var(--ds-topbar-h) 1fr var(--ds-bottombar-h);
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

.ds-workspace {
  display: grid;
  grid-template-columns: auto 1fr var(--ds-right-w);
  min-height: 0;
  overflow: hidden;
}

/* ── 4. TOP BAR ───────────────────────────────────────────────────────────── */
.ds-topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--ds-topbar-h);
  padding: 0 12px;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-color);
  z-index: 100;
  user-select: none;
}

.ds-topbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.ds-topbar-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--accent), #ec4899);
  color: #fff;
  font-size: 16px;
  text-decoration: none;
  flex-shrink: 0;
  transition: var(--transition-fast);
}
.ds-topbar-logo:hover { transform: scale(1.05); }

.ds-topbar-name {
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 6px;
  outline: none;
  min-width: 120px;
  max-width: 240px;
  transition: var(--transition-fast);
}
.ds-topbar-name:hover { background: var(--bg-tertiary); }
.ds-topbar-name:focus { background: var(--bg-tertiary); box-shadow: 0 0 0 2px var(--accent); }

.ds-topbar-center {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 auto;
}

.ds-topbar-right {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.ds-topbar-divider {
  width: 1px;
  height: 24px;
  background: var(--border-color);
  margin: 0 6px;
}

/* Top bar buttons */
.ds-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--bg-primary);
  color: var(--text-secondary);
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-fast);
  white-space: nowrap;
}
.ds-btn:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.ds-btn:disabled { opacity: 0.4; pointer-events: none; }

.ds-btn-icon {
  padding: 0;
  width: 34px;
  justify-content: center;
  border: none;
  background: transparent;
}
.ds-btn-icon:hover { background: var(--bg-tertiary); }

.ds-btn-primary {
  background: var(--accent);
  color: var(--accent-text);
  border-color: var(--accent);
}
.ds-btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }

/* Export dropdown */
.ds-export-wrap {
  position: relative;
}

.ds-export-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 180px;
  padding: 6px;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 200;
}
.ds-export-menu.ds-visible { display: block; animation: ds-dropdown-in 0.18s ease-out; }

.ds-export-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  border: none;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition-fast);
}
.ds-export-item:hover { background: var(--accent-light); color: var(--accent); }
.ds-export-item i { width: 16px; text-align: center; }

@keyframes ds-dropdown-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 5. LEFT SIDEBAR ──────────────────────────────────────────────────────── */
.ds-sidebar-left {
  display: flex;
  min-height: 0;
  border-right: 1px solid var(--border-color);
  user-select: none;
}

/* Icon strip */
.ds-icon-strip {
  width: var(--ds-icon-strip-w);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 6px;
  background: var(--bg-secondary);
  border-right: 1px solid var(--border-color);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
.ds-icon-strip::-webkit-scrollbar { display: none; }

.ds-strip-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 56px;
  height: 56px;
  border: none;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-family);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: var(--transition-fast);
  position: relative;
}
.ds-strip-btn i { font-size: 18px; transition: var(--transition-fast); }

.ds-strip-btn:hover {
  color: var(--text-primary);
  background: var(--bg-tertiary);
}

.ds-strip-btn.active {
  color: var(--accent);
  background: var(--accent-light);
}
.ds-strip-btn.active::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 24px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
}

/* Content panel */
.ds-sidebar-content {
  width: var(--ds-sidebar-w);
  background: var(--bg-primary);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  transition: width var(--transition-panel);
}
.ds-sidebar-content.ds-collapsed {
  width: 0;
  border: none;
}

.ds-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  flex-shrink: 0;
}
.ds-panel-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-primary);
}
.ds-panel-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition-fast);
}
.ds-panel-close:hover { background: var(--bg-tertiary); color: var(--text-primary); }

.ds-panel-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 16px 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) transparent;
}
.ds-panel-body::-webkit-scrollbar { width: 5px; }
.ds-panel-body::-webkit-scrollbar-track { background: transparent; }
.ds-panel-body::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }

/* Panel variants */
.ds-panel { display: none; flex-direction: column; height: 100%; }
.ds-panel.ds-active { display: flex; animation: ds-panel-fade 0.2s ease-out; }

@keyframes ds-panel-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── 6. CANVAS AREA ───────────────────────────────────────────────────────── */
.ds-canvas-area {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--bg-canvas);
  position: relative;
  overflow: hidden;
}

.dt-canvas-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  padding: 24px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) transparent;
}
.dt-canvas-wrap::-webkit-scrollbar { width: 6px; height: 6px; }
.dt-canvas-wrap::-webkit-scrollbar-track { background: transparent; }
.dt-canvas-wrap::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }

.dt-canvas-wrap .canvas-container {
  position: relative !important;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border-radius: 2px;
}

/* Grid overlay */
.canvas-container.dt-grid-on::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(59,130,246,.20) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59,130,246,.20) 1px, transparent 1px);
  background-size: 20px 20px;
}

body.dark .canvas-container.dt-grid-on::after {
  background-image:
    linear-gradient(rgba(147,197,253,.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(147,197,253,.22) 1px, transparent 1px);
}

/* Floating contextual toolbar */
.ds-float-toolbar {
  display: none;
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 10px;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 50;
  gap: 4px;
  align-items: center;
}
.ds-float-toolbar.ds-visible { display: flex; animation: ds-float-in 0.2s ease-out; }

@keyframes ds-float-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Crop control bar */
.dt-crop-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  background: #0f172a;
  color: #fff;
  padding: 10px;
  border-radius: var(--radius);
  margin: 8px 16px 0;
  z-index: 100;
}

/* Page bar */
.dt-page-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: var(--bg-primary);
  border-top: 1px solid var(--border-color);
  flex-shrink: 0;
}

.dt-page-tabs {
  display: flex;
  gap: 4px;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
}
.dt-page-tabs::-webkit-scrollbar { display: none; }

.dt-page-tab {
  padding: 5px 14px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-family: var(--font-family);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition-fast);
}
.dt-page-tab:hover { background: var(--bg-tertiary); }
.dt-page-tab.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.dt-page-add {
  width: 28px;
  height: 28px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}

/* ── 7. RIGHT SIDEBAR ─────────────────────────────────────────────────────── */
.ds-sidebar-right {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--bg-primary);
  border-left: 1px solid var(--border-color);
  overflow: hidden;
}

/* Tab headers */
.dt-tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-primary);
  flex-shrink: 0;
}

.dt-tab {
  min-height: 42px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: var(--transition-fast);
}
.dt-tab:hover { color: var(--text-secondary); }
.dt-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.dt-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) transparent;
}
.dt-scroll::-webkit-scrollbar { width: 5px; }
.dt-scroll::-webkit-scrollbar-track { background: transparent; }
.dt-scroll::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }

.dt-panel { display: none; }
.dt-panel.active { display: block; }

/* ── 8. BOTTOM BAR ────────────────────────────────────────────────────────── */
.ds-bottombar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--ds-bottombar-h);
  padding: 0 12px;
  background: var(--bg-primary);
  border-top: 1px solid var(--border-color);
  font-size: 11px;
  color: var(--text-muted);
  z-index: 100;
  user-select: none;
}

.ds-bottombar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

.ds-bottombar-center {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  min-width: 0;
}

.ds-bottombar-right {
  display: flex;
  align-items: center;
  gap: 4px;
}

.ds-canvas-size-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-family: var(--font-family);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition-fast);
}
.ds-canvas-size-btn:hover { background: var(--bg-tertiary); }

.ds-selection-status {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds-selection-status i { color: var(--accent); font-size: 12px; }

.ds-shortcut-hint {
  color: var(--text-muted);
  font-size: 10px;
  opacity: 0.7;
}
.ds-shortcut-hint kbd {
  padding: 1px 5px;
  border: 1px solid var(--border-color);
  border-radius: 3px;
  background: var(--bg-secondary);
  font-family: var(--font-family);
  font-size: 10px;
  font-weight: 700;
}

/* Zoom controls */
.ds-zoom-controls {
  display: flex;
  align-items: center;
  gap: 2px;
}
.ds-zoom-controls button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 26px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: var(--transition-fast);
}
.ds-zoom-controls button:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.ds-zoom-controls button.active { background: var(--accent); color: #fff; }

.dt-zoom-select {
  height: 26px;
  padding: 0 6px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-family: var(--font-family);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  outline: none;
}

/* Canvas size popover */
.ds-size-popover {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  min-width: 340px;
  padding: 12px;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 200;
}
.ds-size-popover.ds-visible { display: block; animation: ds-popover-up 0.2s ease-out; }

@keyframes ds-popover-up {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ds-size-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.ds-size-preset {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 4px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-family: var(--font-family);
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-fast);
}
.ds-size-preset i { font-size: 14px; color: var(--text-muted); }
.ds-size-preset:hover { background: var(--accent-light); color: var(--accent); border-color: var(--accent); }
.ds-size-preset:hover i { color: var(--accent); }

/* ── 9. dt-* CLASS DEFINITIONS (preserved for JS compatibility) ───────────── */

/* Hidden utility */
.dt-hidden { display: none !important; }

/* Tool buttons */
.dt-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-fast);
  white-space: nowrap;
}
.dt-tool:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.dt-tool.active { background: var(--accent-light); color: var(--accent); border-color: var(--accent); }
.dt-tool.danger { color: var(--danger); }
.dt-tool.danger:hover { background: rgba(239,68,68,0.08); }
.dt-tool.success { background: var(--success); color: #fff; border-color: var(--success); }
.dt-tool:disabled, .dt-tool.dt-disabled { opacity: 0.4; pointer-events: none; }
.dt-tool.dt-icon-only { padding: 6px 8px; }

.dt-head-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 34px;
  padding: 0 10px;
  border: none;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-fast);
}
.dt-head-btn:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.dt-head-btn:disabled { opacity: 0.35; pointer-events: none; }
.dt-head-btn span { display: none; }

.dt-export-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-fast);
}
.dt-export-btn:hover { background: var(--bg-tertiary); }
.dt-export-btn.dt-export-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.dt-export-btn.dt-export-primary:hover { background: var(--accent-hover); }

/* Input fields */
.dt-input, .dt-select, .dt-number, .dt-color {
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: 600;
  outline: none;
  transition: var(--transition-fast);
}
.dt-input:focus, .dt-select:focus, .dt-number:focus, .dt-color:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(124,58,237,0.1);
}
.dt-input { padding: 8px 10px 8px 34px; }
.dt-select { padding: 8px 10px; }
.dt-number { padding: 8px 10px; text-align: center; }
.dt-color { height: 36px; padding: 3px; cursor: pointer; }
.dt-range {
  width: 100%;
  accent-color: var(--accent);
  cursor: pointer;
}

/* Search bar */
.dt-search {
  position: relative;
  margin-bottom: 12px;
}
.dt-search i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 12px;
}
.dt-shape-search { margin-bottom: 10px; }

/* Tags / Chips */
.dt-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.dt-chip {
  padding: 5px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-family: var(--font-family);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition-fast);
}
.dt-chip:hover { background: var(--bg-tertiary); }
.dt-chip.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Section titles */
.dt-section { margin-bottom: 16px; }
.dt-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 10px;
}
.dt-section-title i { color: var(--accent); font-size: 13px; }

/* Field and rows */
.dt-field { margin-bottom: 10px; }
.dt-field label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 5px;
}
.dt-field-sub { display: flex; flex-direction: column; }
.dt-field-sub label { margin-bottom: 3px; }
.dt-field-help {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.dt-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.dt-row-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 6px;
}

/* Template gallery */
.dt-template-list { margin-top: 8px; }
.dt-template-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.dt-template-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-primary);
  cursor: pointer;
  transition: var(--transition-smooth);
}
.dt-template-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent);
}
.dt-thumb {
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dt-thumb-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: rgba(0,0,0,0.35);
  font-size: 24px;
}
.dt-thumb-inner span { font-size: 9px; font-weight: 700; text-transform: uppercase; }
.dt-card-body { padding: 8px 10px; }
.dt-card-title { font-size: 12px; font-weight: 700; color: var(--text-primary); margin: 0; }
.dt-card-meta { font-size: 10px; color: var(--text-muted); margin: 2px 0 0; }

/* Shape library */
.dt-shape-library { display: flex; flex-direction: column; gap: 6px; }
.dt-shape-group { border: 1px solid var(--border-color); border-radius: var(--radius); overflow: hidden; }
.dt-shape-group-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition-fast);
}
.dt-shape-group-toggle:hover { background: var(--bg-tertiary); }
.dt-shape-group-toggle i { transition: transform 0.2s; }
.dt-shape-group.open .dt-shape-group-toggle i { transform: rotate(90deg); }
.dt-shape-grid {
  display: none;
  grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
  gap: 6px;
  padding: 8px;
}
.dt-shape-group.open .dt-shape-grid { display: grid; }
.dt-shape-item {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  min-width: 0;
  padding: 6px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-primary);
  cursor: pointer;
  transition: var(--transition-fast);
  overflow: hidden;
  position: relative;
}
.dt-shape-item:hover { border-color: var(--accent); background: var(--accent-light); transform: scale(1.05); }
.dt-shape-item:active { transform: scale(0.95); }
.dt-shape-item svg { width: 100%; height: 100%; fill: var(--text-secondary); flex-shrink: 0; }
.dt-shape-item:hover svg { fill: var(--accent); }
.dt-shape-item span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Recent shapes */
.dt-recent-shapes { margin-bottom: 12px; }
.dt-recent-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.dt-recent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
  gap: 6px;
}

/* Icon grid */
.dt-icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
  gap: 4px;
}
.dt-square {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-primary);
  color: var(--text-secondary);
  font-size: 16px;
  cursor: pointer;
  transition: var(--transition-fast);
}
.dt-square:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }

/* Layer list */
.dt-layer {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: var(--transition-fast);
}
.dt-layer:hover { background: var(--bg-tertiary); }
.dt-layer.active { background: var(--accent-light); border-color: var(--accent); }
.dt-layer-name { flex: 1; min-width: 0; }
.dt-layer-input {
  min-width: 0;
  width: 100%;
  border: 0;
  border-radius: 4px;
  padding: 3px 5px;
  color: inherit;
  background: transparent;
  font: inherit;
  outline: none;
}
.dt-layer.active .dt-layer-input, .dt-layer-input:focus {
  background: var(--bg-primary);
  box-shadow: inset 0 0 0 1px rgba(124,58,237,0.2);
}
.dt-layer-actions {
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: var(--transition-fast);
}
.dt-layer:hover .dt-layer-actions { opacity: 1; }
.dt-layer-actions button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--text-muted);
  font-size: 11px;
  cursor: pointer;
  transition: var(--transition-fast);
}
.dt-layer-actions button:hover { background: var(--bg-primary); color: var(--text-primary); }

/* Image results (Pexels) */
.dt-image-results {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 10px;
}
.dt-image-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: var(--transition-fast);
}
.dt-image-card:hover { transform: scale(1.02); }
.dt-image-card img { width: 100%; height: auto; display: block; }
.dt-image-actions {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 6px;
  background: linear-gradient(transparent, rgba(0,0,0,0.6));
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: var(--transition-fast);
}
.dt-image-actions button,
.dt-image-actions a {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  transition: var(--transition-fast);
}
.dt-image-actions button {
  background: var(--accent);
  color: #fff;
}
.dt-image-actions button:hover {
  background: var(--accent-dark, #6d28d9);
}
.dt-image-actions a {
  background: rgba(255,255,255,0.2);
  color: #fff;
  backdrop-filter: blur(4px);
}
.dt-image-actions a:hover {
  background: rgba(255,255,255,0.35);
}
.dt-image-card:hover .dt-image-actions { opacity: 1; }

/* Color palette */
.dt-color-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.dt-swatch {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: var(--transition-fast);
}
.dt-swatch:hover { transform: scale(1.15); }

/* Gradient builder */
.dt-gradient-builder {
  background: var(--bg-tertiary);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 8px;
}
.dt-gradient-preview {
  height: 36px;
  border-radius: 6px;
  margin-bottom: 8px;
  border: 1px solid var(--border-color);
}
.dt-gradient-options {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.dt-gradient-stops { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.dt-gradient-stop {
  display: flex;
  align-items: center;
  gap: 6px;
}
.dt-gradient-stop input[type="color"] { width: 32px; height: 28px; flex-shrink: 0; }
.dt-gradient-stop input[type="range"] { flex: 1; }
.dt-gradient-stop span { font-size: 11px; font-weight: 700; color: var(--text-muted); min-width: 28px; }
.dt-gradient-builder-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.dt-gradient-apply { margin-top: 4px; }
.dt-mini-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-primary);
  color: var(--text-secondary);
  font-family: var(--font-family);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-fast);
}
.dt-mini-action:hover { background: var(--bg-tertiary); }
.dt-angle-field {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-muted);
}
.dt-angle-field input { width: 52px; }
.dt-remove-stop {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--danger);
  font-size: 11px;
  cursor: pointer;
  flex-shrink: 0;
}
.dt-remove-stop:hover { background: rgba(239,68,68,0.1); }

/* Gradient presets row */
.dt-gradient-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 8px;
}
.dt-gradient {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: var(--transition-fast);
}
.dt-gradient:hover { transform: scale(1.12); border-color: var(--accent); }

/* Merge controls */
.dt-merge-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.dt-merge-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--bg-secondary);
  cursor: pointer;
  transition: var(--transition-fast);
}
.dt-merge-btn:hover { background: var(--accent-light); border-color: var(--accent); }
.dt-merge-btn b { font-size: 10px; color: var(--text-secondary); }
.dt-merge-icon {
  width: 32px;
  height: 32px;
  position: relative;
}
.dt-merge-icon i {
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2px solid var(--accent);
  border-radius: 4px;
}
.dt-merge-icon i:first-child { top: 0; left: 0; }
.dt-merge-icon i:last-child { bottom: 0; right: 0; }
.merge-union i { background: var(--accent-light); }
.merge-combine i:last-child { background: var(--bg-primary); }
.merge-fragment i { border-style: dashed; }
.merge-intersect i:last-child { background: var(--accent); opacity: 0.3; }
.merge-subtract i:last-child { background: var(--danger); opacity: 0.2; }

/* Feature badge */
.dt-feature-badge {
  display: inline-flex;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  background: var(--accent-light);
  color: var(--accent);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

/* Border style pills */
.style-pill { flex: 1; }
.style-pill.active { background: var(--accent-light); color: var(--accent); border-color: var(--accent); }

/* Student templates */
.dt-student-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.dt-student-track {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: thin;
}
.dt-student-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 180px;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--bg-secondary);
  font-size: 12px;
}
.dt-student-card strong { color: var(--text-primary); }
.dt-student-card span { color: var(--text-muted); font-size: 11px; }

/* Emoji popover */
.dt-emoji-popover {
  position: absolute;
  z-index: 200;
}

/* ── 10. CONTEXT MENU ─────────────────────────────────────────────────────── */
.dt-context-menu {
  position: fixed;
  min-width: 200px;
  padding: 6px;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  display: none;
}
.dt-context-menu.visible { display: block; animation: ds-dropdown-in 0.15s ease-out; }

.dt-context-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 6px;
  color: var(--text-primary);
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition-fast);
}
.dt-context-menu-item:hover { background: var(--accent-light); color: var(--accent); }
.dt-context-menu-item i { width: 16px; text-align: center; color: var(--text-muted); }
.dt-context-menu-item:hover i { color: var(--accent); }
.dt-context-menu-divider {
  border: none;
  border-top: 1px solid var(--border-color);
  margin: 4px 0;
}

/* ── 11. MODALS ───────────────────────────────────────────────────────────── */
.dt-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500;
  animation: ds-modal-bg-in 0.2s ease-out;
}
.dt-modal {
  width: 90%;
  max-width: 480px;
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  animation: ds-modal-in 0.25s ease-out;
  overflow: hidden;
}
.dt-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
}
.dt-modal-header h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
}
.dt-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
  transition: var(--transition-fast);
}
.dt-modal-close:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.dt-modal-body { padding: 20px; }
.dt-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--border-color);
}
.dt-primary {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
}
.dt-primary:hover { background: var(--accent-hover) !important; }

@keyframes ds-modal-bg-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes ds-modal-in {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

/* Shortcuts modal */
.ds-shortcuts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.ds-shortcut-group h4 {
  font-size: 12px;
  font-weight: 800;
  color: var(--accent);
  margin-bottom: 8px;
  text-transform: uppercase;
}
.ds-shortcut-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  font-size: 12px;
  color: var(--text-secondary);
}
.ds-shortcut-keys {
  display: flex;
  gap: 3px;
}
.ds-shortcut-keys kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 24px;
  padding: 0 6px;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  background: var(--bg-tertiary);
  font-family: var(--font-family);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
}

/* ── 12. TOAST NOTIFICATION ───────────────────────────────────────────────── */
.dt-editor-toast {
  position: fixed;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  padding: 10px 20px;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
  z-index: 600;
}
.dt-editor-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.dt-editor-toast.warning { background: rgba(245,158,11,0.9); color: #fff; border-color: transparent; }

/* ── 13. EMPTY STATES ─────────────────────────────────────────────────────── */
.dt-empty, .ds-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 32px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}
.ds-empty-icon {
  font-size: 32px;
  color: var(--border-color);
  margin-bottom: 4px;
}

/* ── 14. LOADING SKELETONS ────────────────────────────────────────────────── */
.ds-skeleton {
  border-radius: var(--radius);
  background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-secondary) 50%, var(--bg-tertiary) 75%);
  background-size: 200% 100%;
  animation: ds-shimmer 1.5s infinite;
}
@keyframes ds-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.ds-skeleton-card {
  height: 130px;
  border-radius: var(--radius-lg);
}
.ds-skeleton-text {
  height: 14px;
  margin-top: 6px;
  width: 80%;
}

/* ── 15. TOOLTIPS ─────────────────────────────────────────────────────────── */
[data-tooltip] {
  position: relative;
}
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  padding: 5px 10px;
  border-radius: 6px;
  background: #1e293b;
  color: #f1f5f9;
  font-family: var(--font-family);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s, transform 0.15s;
  transition-delay: 0s;
  z-index: 9999;
}
[data-tooltip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0.4s;
}
body.dark [data-tooltip]::after {
  background: #334155;
  color: #f1f5f9;
}
/* Sidebar icon tooltips — show to the right */
.ds-icon-strip [data-tooltip]::after {
  top: 50%;
  left: calc(100% + 8px);
  transform: translateY(-50%) translateX(-4px);
}
.ds-icon-strip [data-tooltip]:hover::after {
  transform: translateY(-50%) translateX(0);
}
/* Bottom bar tooltips — show above */
.ds-bottombar [data-tooltip]::after {
  top: auto;
  bottom: calc(100% + 8px);
  transform: translateX(-50%) translateY(4px);
}
.ds-bottombar [data-tooltip]:hover::after {
  transform: translateX(-50%) translateY(0);
}

/* ── 16. UPLOAD PANEL ─────────────────────────────────────────────────────── */
.ds-upload-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 28px 16px;
  border: 2px dashed var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--bg-tertiary);
  color: var(--text-muted);
  text-align: center;
  cursor: pointer;
  transition: var(--transition-fast);
}
.ds-upload-zone:hover { border-color: var(--accent); color: var(--accent); }
.ds-upload-zone i { font-size: 28px; }
.ds-upload-zone span { font-size: 12px; font-weight: 600; }
.ds-upload-zone small { font-size: 10px; color: var(--text-muted); }
.ds-upload-zone input[type="file"] { display: none; }

.ds-upload-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 12px;
}
.ds-upload-thumb {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 1;
  transition: var(--transition-fast);
}
.ds-upload-thumb:hover { transform: scale(1.04); box-shadow: var(--shadow-md); }
.ds-upload-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* ── 17. TEXT PRESET PANEL ────────────────────────────────────────────────── */
.ds-text-preset {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ds-text-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--bg-secondary);
  cursor: pointer;
  transition: var(--transition-smooth);
}
.ds-text-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); border-color: var(--accent); }
.ds-text-preview {
  font-family: var(--font-family);
  line-height: 1.2;
}
.ds-text-label { font-size: 11px; color: var(--text-muted); font-weight: 600; }

/* ── 18. BACKGROUNDS PANEL ────────────────────────────────────────────────── */
.ds-bg-section { margin-bottom: 16px; }
.ds-bg-label {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-secondary);
  margin-bottom: 8px;
  text-transform: uppercase;
}
.ds-bg-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.ds-bg-swatch {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: var(--transition-fast);
}
.ds-bg-swatch:hover { transform: scale(1.08); border-color: var(--accent); }

/* ── 19. NODE EDITING (hidden by default via CSS override) ────────────────── */
#btnEditNodes, #convertPathBtn, #nodeEditingPanel {
  display: none !important;
}

/* ── 20. RESPONSIVE ───────────────────────────────────────────────────────── */
@media (min-width: 1500px) {
  :root {
    --ds-sidebar-w: 320px;
    --ds-right-w: 340px;
  }
}

@media (max-width: 1279px) {
  :root {
    --ds-sidebar-w: 260px;
    --ds-right-w: 280px;
  }
}

@media (max-width: 1023px) {
  .ds-workspace {
    grid-template-columns: auto 1fr;
  }
  .ds-sidebar-right {
    position: fixed;
    right: 0;
    top: var(--ds-topbar-h);
    bottom: var(--ds-bottombar-h);
    width: var(--ds-right-w);
    z-index: 200;
    box-shadow: var(--shadow-xl);
    transform: translateX(100%);
    transition: transform var(--transition-panel);
  }
  .ds-sidebar-right.ds-open {
    transform: translateX(0);
  }
  .ds-right-toggle {
    display: flex;
  }
}

@media (max-width: 767px) {
  :root {
    --ds-topbar-h: 48px;
    --ds-icon-strip-w: 52px;
    --ds-sidebar-w: 100vw;
  }
  .ds-sidebar-content {
    position: fixed;
    left: var(--ds-icon-strip-w);
    top: var(--ds-topbar-h);
    bottom: var(--ds-bottombar-h);
    width: calc(100vw - var(--ds-icon-strip-w));
    z-index: 150;
    box-shadow: var(--shadow-xl);
  }
  .ds-sidebar-content.ds-collapsed {
    display: none;
  }
  .ds-topbar-name { max-width: 120px; font-size: 12px; }
  .ds-btn span { display: none; }
  .ds-shortcut-hint { display: none; }
  .ds-shortcuts-grid { grid-template-columns: 1fr; }
  .dt-template-grid { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  :root {
    --ds-icon-strip-w: 48px;
  }
  .ds-strip-btn { width: 42px; height: 42px; font-size: 0; }
  .ds-strip-btn i { font-size: 16px; }
  .ds-topbar-center { display: none; }
}

/* Right panel toggle button (visible on tablet) */
.ds-right-toggle {
  display: none;
  position: fixed;
  right: 12px;
  top: calc(var(--ds-topbar-h) + 12px);
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  color: var(--text-secondary);
  font-size: 16px;
  cursor: pointer;
  z-index: 100;
  box-shadow: var(--shadow-md);
  transition: var(--transition-fast);
}
.ds-right-toggle:hover { background: var(--bg-tertiary); }

/* ── 21. DARK MODE EXTRA OVERRIDES ────────────────────────────────────────── */
body.dark .dt-shape-item svg { fill: var(--text-secondary); }
body.dark .dt-shape-item:hover svg { fill: var(--accent); }
body.dark .dt-thumb-inner { color: rgba(255,255,255,0.25); }
body.dark .dt-context-menu { background: var(--glass-bg); color: var(--text-primary); }
body.dark .ds-upload-zone { background: var(--bg-secondary); color: var(--text-secondary); }
body.dark .ds-text-card { background: var(--bg-tertiary); color: var(--text-primary); }
body.dark .dt-page-bar { border-color: var(--border-color); }
body.dark .dt-zoom-select { border-color: var(--border-color); color: var(--text-secondary); background: var(--bg-secondary); }
body.dark .dt-layer.active .dt-layer-input, body.dark .dt-layer-input:focus {
  background: rgba(15,23,42,0.82);
}

/* Dark mode — full content & text visibility fixes */
body.dark .ds-panel-title { color: var(--text-primary); }
body.dark .ds-panel-body { color: var(--text-primary); }
body.dark .dt-section-title { color: var(--text-primary); }
body.dark .dt-section-title i { color: var(--accent); }
body.dark .dt-field label { color: var(--text-secondary); }
body.dark .dt-field-sub label { color: var(--text-secondary); }
body.dark .dt-input,
body.dark .dt-select,
body.dark .dt-number { background: var(--bg-tertiary); color: var(--text-primary); border-color: rgba(255,255,255,0.08); }
body.dark .dt-input::placeholder { color: var(--text-muted); }
body.dark .dt-select option { background: var(--bg-secondary); color: var(--text-primary); }
body.dark .dt-tool { background: var(--bg-tertiary); color: var(--text-secondary); border-color: rgba(255,255,255,0.06); }
body.dark .dt-tool:hover { background: rgba(167,139,250,0.12); color: var(--text-primary); }
body.dark .dt-tool.dt-primary { background: var(--accent); color: #fff; }
body.dark .ds-btn { color: var(--text-secondary); }
body.dark .ds-btn:hover { color: var(--text-primary); background: var(--bg-tertiary); }
body.dark .ds-btn-icon { color: var(--text-secondary); }
body.dark .ds-btn-icon:hover { color: var(--text-primary); background: var(--bg-tertiary); }
body.dark .ds-btn-primary { color: #fff; }
body.dark .ds-topbar-name { color: var(--text-primary); background: transparent; }
body.dark .ds-topbar-name:focus { background: var(--bg-tertiary); }
body.dark .ds-bg-label { color: var(--text-secondary); }
body.dark .ds-bg-swatch { border-color: rgba(255,255,255,0.1); }
body.dark .dt-chip { background: var(--bg-tertiary); color: var(--text-secondary); border-color: rgba(255,255,255,0.06); }
body.dark .dt-chip:hover { border-color: var(--accent); color: var(--accent); }
body.dark .ds-text-preview { color: var(--text-primary); }
body.dark .ds-text-label { color: var(--text-muted); }
body.dark .dt-empty { color: var(--text-muted); }
body.dark .ds-shortcut-hint { color: var(--text-muted); }
body.dark .ds-shortcut-hint kbd { background: var(--bg-tertiary); color: var(--text-secondary); border-color: rgba(255,255,255,0.08); }
body.dark .ds-selection-status { color: var(--text-secondary); }
body.dark .ds-canvas-size-btn { color: var(--text-secondary); background: var(--bg-secondary); border-color: rgba(255,255,255,0.06); }
body.dark .ds-size-popover { background: var(--bg-secondary); border-color: rgba(255,255,255,0.06); }
body.dark .ds-size-preset { background: var(--bg-tertiary); color: var(--text-secondary); border-color: rgba(255,255,255,0.06); }
body.dark .ds-size-preset:hover { border-color: var(--accent); color: var(--accent); }
body.dark .dt-modal { background: var(--bg-secondary); color: var(--text-primary); }
body.dark .dt-modal-header { border-color: rgba(255,255,255,0.06); }
body.dark .dt-modal-header h3 { color: var(--text-primary); }
body.dark .dt-modal-footer { border-color: rgba(255,255,255,0.06); }
body.dark .ds-shortcuts-grid h4 { color: var(--text-primary); }
body.dark .ds-shortcut-row { color: var(--text-secondary); }
body.dark .ds-shortcut-row span:first-child { color: var(--text-primary); }
body.dark .ds-shortcut-keys kbd { background: var(--bg-tertiary); color: var(--text-secondary); border-color: rgba(255,255,255,0.08); }
body.dark .dt-context-menu-item { color: var(--text-primary); }
body.dark .dt-context-menu-item:hover { background: rgba(167,139,250,0.12); }
body.dark .dt-context-menu-divider { background: rgba(255,255,255,0.06); }
body.dark .ds-strip-btn { color: var(--text-muted); }
body.dark .ds-strip-btn:hover, body.dark .ds-strip-btn.active { color: var(--accent); }
body.dark .ds-bottombar { border-color: rgba(255,255,255,0.06); }
body.dark .ds-topbar { border-color: rgba(255,255,255,0.06); }
body.dark .ds-topbar-divider { background: rgba(255,255,255,0.06); }
body.dark .dt-tabs { border-color: rgba(255,255,255,0.06); }
body.dark .dt-tab { color: var(--text-muted); }
body.dark .dt-tab.active { color: var(--accent); border-color: var(--accent); }
body.dark .dt-gradient { border-color: rgba(255,255,255,0.08); }
body.dark .dt-feature-badge { background: rgba(167,139,250,0.15); color: var(--accent); }
body.dark .dt-student-card { background: var(--bg-tertiary); border-color: rgba(255,255,255,0.06); color: var(--text-primary); }
body.dark .ds-icon-strip { border-color: rgba(255,255,255,0.06); }
body.dark .dt-shape-group-toggle { background: var(--bg-tertiary); color: var(--text-primary); }
body.dark .dt-shape-group-toggle:hover { background: rgba(167,139,250,0.1); }
body.dark .dt-shape-group { border-color: rgba(255,255,255,0.06); }
body.dark .dt-shape-item { background: var(--bg-secondary); border-color: rgba(255,255,255,0.06); }
body.dark .dt-shape-grid { background: var(--bg-secondary); }
body.dark .dt-layer { border-color: rgba(255,255,255,0.06); }
body.dark .dt-layer-input { color: var(--text-primary); }
body.dark .ds-export-menu { background: var(--bg-secondary); border-color: rgba(255,255,255,0.06); }
body.dark .ds-export-item { color: var(--text-primary); }
body.dark .ds-export-item:hover { background: rgba(167,139,250,0.12); }
body.dark .ds-export-section-label { color: var(--text-muted); }
body.dark .ds-export-divider { background: rgba(255,255,255,0.06); }
body.dark .dt-range { background: var(--bg-tertiary); }
body.dark .dt-color { border-color: rgba(255,255,255,0.08); }
body.dark .style-pill { color: var(--text-secondary); }
body.dark .dt-swatch { border-color: rgba(255,255,255,0.1); }
body.dark #selectionProperties label { color: var(--text-secondary); }
body.dark .dt-merge-btn { background: var(--bg-tertiary); border-color: rgba(255,255,255,0.06); color: var(--text-secondary); }
body.dark .dt-merge-btn:hover { border-color: var(--accent); color: var(--accent); }
body.dark .ds-float-toolbar { background: var(--glass-bg); border-color: rgba(255,255,255,0.06); }
body.dark .dt-crop-bar { background: var(--bg-secondary); color: var(--text-primary); }
body.dark .ds-autosave-badge { background: var(--bg-tertiary); }
body.dark .dt-poster-builder .dt-field label { color: var(--text-secondary); }

/* ── 21b. MAGIC THEME TOGGLE (from website) ──────────────────────────────── */
.ds-topbar .magic-theme-toggle {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.mtt-track {
  width: 66px;
  height: 32px;
  border-radius: 34px;
  background: #4facfe;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.2), 0 2px 5px rgba(0,0,0,0.1);
  overflow: hidden;
  position: relative;
  transition: background 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.mtt-sky { width: 100%; height: 100%; position: relative; }
.mtt-sun-moon {
  position: absolute; top: 3px; left: 3px;
  width: 26px; height: 26px; border-radius: 50%;
  background: #fcd34d;
  box-shadow: 0 0 8px #fde68a, inset -2px -2px 4px rgba(0,0,0,0.1);
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; z-index: 5;
}
.mtt-clouds { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: opacity 0.3s ease, transform 0.5s ease; }
.mtt-cloud { background: #fff; position: absolute; border-radius: 50px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.mtt-cloud-1 { width: 20px; height: 8px; top: 6px; right: 8px; }
.mtt-cloud-1::before, .mtt-cloud-1::after { content: ''; position: absolute; background: #fff; border-radius: 50%; }
.mtt-cloud-1::before { width: 10px; height: 10px; top: -4px; left: 2px; }
.mtt-cloud-1::after { width: 6px; height: 6px; top: -2px; right: 2px; }
.mtt-cloud-2 { width: 14px; height: 6px; top: 18px; right: 22px; opacity: 0.8; }
.mtt-stars { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transform: translateY(10px); transition: opacity 0.4s ease, transform 0.5s ease; }
.mtt-star { position: absolute; background: #fff; border-radius: 50%; box-shadow: 0 0 3px #fff; animation: mtt-twinkle 2s infinite ease-in-out alternate; }
.mtt-star:nth-child(1) { width: 3px; height: 3px; top: 5px; left: 14px; }
.mtt-star:nth-child(2) { width: 2px; height: 2px; top: 16px; left: 8px; animation-delay: 0.5s; }
.mtt-star:nth-child(3) { width: 4px; height: 4px; top: 10px; left: 28px; animation-delay: 1s; }
.mtt-star:nth-child(4) { width: 2px; height: 2px; top: 20px; left: 22px; animation-delay: 1.5s; }
@keyframes mtt-twinkle { 0% { opacity: 0.3; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.2); } }
.mtt-craters { width: 100%; height: 100%; position: relative; opacity: 0; transform: rotate(-45deg); transition: all 0.5s ease; }
.mtt-crater { position: absolute; background: rgba(0,0,0,0.15); border-radius: 50%; box-shadow: inset 1px 1px 2px rgba(0,0,0,0.2); }
.mtt-crater:nth-child(1) { width: 5px; height: 5px; top: 4px; left: 12px; }
.mtt-crater:nth-child(2) { width: 3px; height: 3px; top: 12px; left: 6px; }
.mtt-crater:nth-child(3) { width: 7px; height: 7px; top: 12px; left: 14px; }
body.dark .mtt-track { background: #0f172a; box-shadow: inset 0 2px 6px rgba(0,0,0,0.5), 0 2px 5px rgba(0,0,0,0.2); }
body.dark .mtt-sun-moon { transform: translateX(34px); background: #cbd5e1; box-shadow: 0 0 10px rgba(255,255,255,0.4), inset -2px -2px 5px rgba(0,0,0,0.2); }
body.dark .mtt-clouds { opacity: 0; transform: translateY(10px); }
body.dark .mtt-stars { opacity: 1; transform: translateY(0); }
body.dark .mtt-craters { opacity: 1; transform: rotate(0deg); }
.magic-theme-toggle:focus-visible .mtt-track { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── 22. PRINT SUPPRESSION ────────────────────────────────────────────────── */
@media print { .ds-app { display: none; } }

/* ═══════════════════════════════════════════════════════════════════════════
   23. PRO FEATURES — Text Effects, Poster Builder, Brand Kit, Contact, Export
   ═══════════════════════════════════════════════════════════════════════════ */

/* Text Effects Grid */
.dt-text-effects-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.dt-text-fx {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--bg-secondary);
  cursor: pointer;
  transition: var(--transition-fast);
}
.dt-text-fx:hover {
  border-color: var(--accent);
  background: var(--bg-tertiary);
  transform: translateY(-1px);
}
.dt-fx-preview {
  font-size: 22px;
  line-height: 1;
}
.dt-text-fx small {
  font-size: 9px;
  color: var(--text-tertiary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Text Presets Grid */
.dt-text-presets-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.dt-text-preset-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 6px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--bg-secondary);
  cursor: pointer;
  transition: var(--transition-fast);
  text-align: center;
}
.dt-text-preset-card:hover {
  border-color: var(--accent);
  background: var(--bg-tertiary);
  box-shadow: var(--shadow-sm);
}
.dt-text-preset-card small {
  font-size: 10px;
  color: var(--text-tertiary);
}

/* Poster Builder */
.dt-poster-builder .dt-field {
  margin-bottom: 10px;
}
.dt-poster-builder .dt-field label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 4px;
  display: block;
}
.dt-poster-styles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 6px;
}
.dt-poster-style {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border: 2px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--bg-secondary);
  cursor: pointer;
  transition: var(--transition-fast);
}
.dt-poster-style.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.2);
}
.dt-poster-style:hover {
  border-color: var(--accent);
}
.dt-poster-style small {
  font-size: 10px;
  color: var(--text-secondary);
  font-weight: 600;
}

/* Brand Kit */
.dt-brand-color-add {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 8px;
}
.dt-brand-color-add .dt-color {
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  border: 1px solid var(--border-color);
}

/* Social Icons Grid */
.dt-social-icons-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.dt-social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--bg-secondary);
  cursor: pointer;
  transition: var(--transition-fast);
  font-size: 20px;
}
.dt-social-icon:hover {
  border-color: var(--accent);
  background: var(--bg-tertiary);
  transform: scale(1.08);
}

/* Enhanced Export Menu */
.ds-export-section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-tertiary);
  padding: 6px 14px 2px;
}
.ds-export-divider {
  height: 1px;
  background: var(--border-color);
  margin: 4px 12px;
}
.ds-export-quality {
  display: flex;
  gap: 4px;
  padding: 4px 12px 8px;
}
.ds-quality-btn {
  flex: 1;
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition-fast);
}
.ds-quality-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.ds-quality-btn:hover:not(.active) {
  border-color: var(--accent);
}

/* Auto-save Badge */
.ds-autosave-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 12px;
  color: var(--text-tertiary);
  background: var(--bg-tertiary);
  white-space: nowrap;
  transition: var(--transition-fast);
}
.ds-autosave-badge.saved {
  color: #22c55e;
}
.ds-autosave-badge.saving {
  color: var(--accent);
}
.ds-autosave-badge.error {
  color: #ef4444;
}

/* Layer Toolbar */
.dt-layer-toolbar {
  padding: 0 0 4px;
}
.dt-layer-toolbar .dt-row {
  display: flex;
}

/* Layer Drag */
.dt-layer[draggable="true"] {
  cursor: grab;
}
.dt-layer.dt-dragging {
  opacity: 0.4;
}
.dt-layer.dt-drag-over {
  border-top: 2px solid var(--accent);
}

/* Dark mode additions */
body.dark .dt-text-fx { background: var(--bg-tertiary); }
body.dark .dt-text-preset-card { background: var(--bg-tertiary); }
body.dark .dt-poster-style { background: var(--bg-tertiary); }
body.dark .dt-social-icon { background: var(--bg-tertiary); }
body.dark .ds-quality-btn { background: var(--bg-tertiary); }

/* Active state for text wrap buttons */
.dt-tool.dt-active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.dt-tool.dt-active:hover {
  background: var(--accent-dark, #6d28d9);
}

/* Text Warp Grid */
.dt-text-warp-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.dt-text-warp-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 4px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition-fast);
}
.dt-text-warp-btn svg {
  width: 32px;
  height: 20px;
  flex-shrink: 0;
}
.dt-text-warp-btn small {
  font-size: 9px;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.dt-text-warp-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--bg-tertiary);
}
.dt-text-warp-btn.active {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

/* Stylish Text Grid */
.dt-stylish-text-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
.dt-stylish-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 6px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--bg-secondary);
  cursor: pointer;
  transition: var(--transition-fast);
  min-height: 48px;
  overflow: hidden;
}
.dt-stylish-btn:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Dark mode for warp & stylish */
body.dark .dt-text-warp-btn { background: var(--bg-tertiary); border-color: var(--border-color); color: var(--text-secondary); }
body.dark .dt-text-warp-btn:hover { border-color: var(--accent); color: var(--accent); }
body.dark .dt-stylish-btn { background: var(--bg-tertiary); border-color: var(--border-color); }
body.dark .dt-stylish-btn:hover { border-color: var(--accent); }

/* ==========================================================================
   NCLI DESIGN STUDIO — PREMIUM LANDING OVERLAY
   ========================================================================== */
.ncli-landing-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99999;
  overflow-y: auto;
  overflow-x: hidden;
  background: #0b0f19;
  animation: ncliLandFadeIn 0.5s ease;
}
@keyframes ncliLandFadeIn { from { opacity: 0; } to { opacity: 1; } }
.ncli-landing-overlay.ncli-landing-exit {
  animation: ncliLandFadeOut 0.6s ease forwards;
}
@keyframes ncliLandFadeOut { to { opacity: 0; transform: scale(1.04); } }

/* Animated background */
.ncli-landing-bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  overflow: hidden;
}
.ncli-landing-grid {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    linear-gradient(rgba(124,58,237,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,58,237,0.06) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: ncliGridScroll 30s linear infinite;
}
@keyframes ncliGridScroll {
  to { transform: translate(60px, 60px); }
}
.ncli-landing-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.35;
  animation: ncliGlowFloat 8s ease-in-out infinite alternate;
}
.ncli-landing-glow-1 {
  width: 400px; height: 400px;
  background: #7c3aed;
  top: -100px; left: -100px;
}
.ncli-landing-glow-2 {
  width: 350px; height: 350px;
  background: #2563eb;
  top: 40%; right: -80px;
  animation-delay: 3s;
}
.ncli-landing-glow-3 {
  width: 300px; height: 300px;
  background: #06b6d4;
  bottom: -60px; left: 30%;
  animation-delay: 5s;
}
@keyframes ncliGlowFloat {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(30px, -30px) scale(1.15); }
}

/* Content container */
.ncli-landing-content {
  position: relative;
  z-index: 2;
  max-width: 960px;
  margin: 0 auto;
  padding: 48px 24px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
}

/* Hero */
.ncli-landing-hero {
  text-align: center;
  margin-bottom: 48px;
}
.ncli-landing-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #c084fc;
  background: rgba(124,58,237,0.15);
  border: 1px solid rgba(124,58,237,0.3);
  padding: 6px 16px;
  border-radius: 50px;
  margin-bottom: 24px;
  animation: ncliBadgePulse 2s ease-in-out infinite;
}
@keyframes ncliBadgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(124,58,237,0.3); }
  50% { box-shadow: 0 0 0 8px rgba(124,58,237,0); }
}
.ncli-landing-title {
  margin: 0;
  line-height: 1;
}
.ncli-landing-title-line {
  display: block;
  font-size: clamp(56px, 10vw, 96px);
  font-weight: 900;
  color: #fff;
  letter-spacing: 6px;
  text-shadow: 0 4px 20px rgba(124,58,237,0.3);
}
.ncli-landing-title-gradient {
  display: block;
  font-size: clamp(32px, 6vw, 54px);
  font-weight: 700;
  background: linear-gradient(135deg, #c084fc, #60a5fa, #34d399);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-top: 4px;
}
.ncli-landing-subtitle {
  font-size: clamp(15px, 2.2vw, 19px);
  color: #94a3b8;
  margin: 20px auto 0;
  max-width: 560px;
  line-height: 1.6;
}
.ncli-landing-subtitle strong {
  color: #34d399;
  font-weight: 700;
}
.ncli-landing-by {
  font-size: 13px;
  color: #64748b;
  margin-top: 12px;
}
.ncli-landing-by strong {
  color: #94a3b8;
}

/* Feature Cards */
.ncli-landing-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  width: 100%;
  margin-bottom: 48px;
}
.ncli-landing-feature {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 28px 16px 24px;
  text-align: center;
  transition: all 0.3s ease;
  backdrop-filter: blur(8px);
}
.ncli-landing-feature:hover {
  border-color: rgba(124,58,237,0.4);
  background: rgba(124,58,237,0.08);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(124,58,237,0.15);
}
.ncli-lf-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, #7c3aed, #2563eb);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  font-size: 20px;
  color: #fff;
}
.ncli-landing-feature h3 {
  font-size: 14px;
  font-weight: 700;
  color: #f1f5f9;
  margin: 0 0 6px;
}
.ncli-landing-feature p {
  font-size: 12px;
  color: #64748b;
  margin: 0;
  line-height: 1.4;
}

/* Info Cards (Courses & Services) */
.ncli-landing-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  width: 100%;
  margin-bottom: 48px;
}
.ncli-landing-info-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 24px;
  backdrop-filter: blur(8px);
}
.ncli-landing-info-card h3 {
  font-size: 16px;
  font-weight: 700;
  color: #f1f5f9;
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ncli-landing-courses h3 i { color: #c084fc; }
.ncli-landing-services h3 i { color: #60a5fa; }
.ncli-landing-info-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ncli-landing-info-card li {
  font-size: 13px;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ncli-landing-info-card li i {
  color: #34d399;
  font-size: 11px;
  flex-shrink: 0;
}

/* CTA */
.ncli-landing-cta {
  text-align: center;
  margin-bottom: 40px;
}
.ncli-landing-launch-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 48px;
  font-size: 18px;
  font-weight: 700;
  font-family: inherit;
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #2563eb);
  border: none;
  border-radius: 60px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 8px 32px rgba(124,58,237,0.35);
  position: relative;
  overflow: hidden;
}
.ncli-landing-launch-btn::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 62px;
  background: linear-gradient(135deg, #c084fc, #60a5fa, #34d399, #c084fc);
  background-size: 300% 300%;
  z-index: -1;
  animation: ncliGradientBorder 4s ease infinite;
  opacity: 0;
  transition: opacity 0.3s;
}
.ncli-landing-launch-btn:hover::before { opacity: 1; }
@keyframes ncliGradientBorder {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.ncli-landing-launch-btn:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 16px 48px rgba(124,58,237,0.45);
}
.ncli-landing-launch-btn:active {
  transform: translateY(0) scale(0.98);
}
.ncli-landing-launch-btn .fa-arrow-right {
  transition: transform 0.3s;
}
.ncli-landing-launch-btn:hover .fa-arrow-right {
  transform: translateX(4px);
}

/* Contact links */
.ncli-landing-contact {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 20px;
}
.ncli-landing-contact a {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #94a3b8;
  text-decoration: none;
  transition: color 0.2s;
}
.ncli-landing-contact a:hover { color: #c084fc; }
.ncli-landing-contact .fa-whatsapp { color: #22c55e; }
.ncli-landing-contact .fa-phone { color: #60a5fa; }
.ncli-landing-contact .fa-globe { color: #c084fc; }

/* Footer */
.ncli-landing-footer {
  text-align: center;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.06);
  width: 100%;
}
.ncli-landing-footer p {
  font-size: 12px;
  color: #475569;
  margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
  .ncli-landing-features {
    grid-template-columns: repeat(2, 1fr);
  }
  .ncli-landing-info {
    grid-template-columns: 1fr;
  }
  .ncli-landing-launch-btn {
    padding: 16px 36px;
    font-size: 16px;
  }
  .ncli-landing-contact {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
}
@media (max-width: 480px) {
  .ncli-landing-content {
    padding: 32px 16px 24px;
  }
  .ncli-landing-features {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .ncli-landing-feature {
    padding: 20px 16px;
  }
}

/* Premium Design Studio features */
.ds-premium-upload-zone {
  padding: 12px;
}

.ds-premium-upload-zone i {
  font-size: 22px;
}

.ds-magic-swatch {
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.12), 0 4px 10px rgba(15, 23, 42, 0.12);
}

.festival-radar {
  position: fixed;
  right: 20px;
  bottom: 70px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(420px, calc(100vw - 32px));
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, #f59e0b, #dc2626);
  color: #fff;
  box-shadow: 0 18px 46px rgba(220, 38, 38, 0.36);
  font-size: 13px;
  font-weight: 700;
  animation: radarPop 0.45s ease;
}

.festival-radar button {
  border: 0;
  border-radius: 10px;
  background: #fff;
  color: #dc2626;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  padding: 7px 12px;
  white-space: nowrap;
}

.festival-radar .festival-radar-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

@keyframes radarPop {
  from {
    opacity: 0;
    transform: translateY(26px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.ds-mockup-tabs {
  gap: 6px;
  margin-bottom: 12px;
}

.ds-mockup-tabs .dt-tool.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
}

.mockup-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 380px;
  padding: 20px;
  border-radius: 14px;
  background: var(--bg-tertiary);
  overflow: hidden;
}

.mockup-frame-scene,
.mockup-phone-scene,
.mockup-banner-scene,
.mockup-tshirt-scene {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 380px;
  border-radius: 14px;
  overflow: hidden;
}

.mockup-frame-scene {
  background:
    radial-gradient(circle at 24% 18%, rgba(255, 255, 255, 0.5), transparent 26%),
    linear-gradient(180deg, #d6cfc4, #b8ac9c);
}

.mockup-frame-scene img {
  max-width: 55%;
  max-height: 65%;
  border: 14px solid #4a3728;
  background: #fff;
  box-shadow: 0 0 0 3px #2d2117, 0 20px 40px rgba(0, 0, 0, 0.45);
}

.mockup-phone-scene {
  background: radial-gradient(circle at top, #334155, #0f172a 68%);
}

.mockup-phone-body {
  position: relative;
  width: 170px;
  height: 340px;
  padding: 10px 8px;
  border-radius: 30px;
  background: #050505;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), inset 0 0 0 2px rgba(255, 255, 255, 0.08);
}

.mockup-phone-body::before {
  content: '';
  position: absolute;
  top: 14px;
  left: 50%;
  z-index: 2;
  width: 60px;
  height: 16px;
  border-radius: 10px;
  background: #000;
  transform: translateX(-50%);
}

.mockup-phone-body img {
  width: 100%;
  height: 100%;
  border-radius: 22px;
  object-fit: cover;
}

.mockup-banner-scene {
  perspective: 800px;
  background: linear-gradient(180deg, #87ceeb 0 60%, #8fbc8f 60% 100%);
}

.mockup-banner-scene img {
  max-width: 70%;
  max-height: 55%;
  border: 6px solid #333;
  box-shadow: 20px 25px 40px rgba(0, 0, 0, 0.4);
  transform: rotateY(-12deg);
}

.mockup-tshirt-scene {
  background: linear-gradient(180deg, #e2e8f0, #cbd5e1);
}

.mockup-tshirt-body {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 260px;
  height: 300px;
  background: #fff;
  clip-path: polygon(25% 0, 75% 0, 85% 8%, 100% 22%, 88% 32%, 82% 25%, 82% 100%, 18% 100%, 18% 25%, 12% 32%, 0 22%, 15% 8%);
  filter: drop-shadow(0 15px 35px rgba(0, 0, 0, 0.25));
}

.mockup-tshirt-body img {
  max-width: 45%;
  max-height: 40%;
  margin-top: 30px;
}

body.dark .mockup-stage {
  background: rgba(15, 23, 42, 0.96);
}

body.dark .festival-radar {
  box-shadow: 0 18px 48px rgba(245, 158, 11, 0.22);
}

@media (max-width: 768px) {
  .festival-radar {
    right: 12px;
    bottom: 74px;
    left: 12px;
    justify-content: space-between;
  }

  .ds-mockup-tabs {
    flex-wrap: wrap;
  }

  .mockup-stage,
  .mockup-frame-scene,
  .mockup-phone-scene,
  .mockup-banner-scene,
  .mockup-tshirt-scene {
    min-height: 320px;
    height: 320px;
  }
}