*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --bg:        #0d0d0d;
      --surface:   #161616;
      --surface2:  #1f1f1f;
      --border:    #2a2a2a;
      --accent:    #e8ff57;
      --text:      #f0f0f0;
      --muted:     #777;
      --danger:    #ff5757;
      --success:   #57ff8f;
      --radius:    16px;
      --radius-sm: 10px;
    }

    html, body {
      height: 100%;
      overflow: hidden;
      background: var(--bg);
      color: var(--text);
      font-family: 'DM Sans', sans-serif;
      font-size: 14px;
    }

    /* ── LAYOUT ── */
    #app {
      display: flex;
      flex-direction: column;
      height: 100vh;
    }

    /* ── TOOLBAR ── */
    #toolbar {
      height: 52px;
      background: var(--bg);
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      padding: 0 12px;
      gap: 8px;
      flex-shrink: 0;
      z-index: 100;
    }

    #toolbar .logo {
      font-family: 'Syne', sans-serif;
      font-weight: 800;
      font-size: 16px;
      color: var(--accent);
      margin-right: 8px;
      white-space: nowrap;
    }

    #toolbar .divider {
      width: 1px;
      height: 24px;
      background: var(--border);
      margin: 0 4px;
    }

    #toolbar .spacer { flex: 1; }

    #toolbar .canvas-size-badge {
      font-size: 12px;
      color: var(--muted);
      padding: 4px 10px;
      background: var(--surface2);
      border-radius: 100px;
      border: 1px solid var(--border);
    }

    /* ── MAIN AREA ── */
    #main {
      display: flex;
      flex: 1;
      overflow: hidden;
    }

    /* ── PANELS ── */
    #left-panel {
      width: 260px;
      min-width: 260px;
      background: var(--surface);
      border-right: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    #right-panel {
      width: 280px;
      min-width: 280px;
      background: var(--surface);
      border-left: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      overflow-y: auto;
    }

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

    .panel-section-title {
      font-size: 11px;
      font-weight: 600;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 10px;
    }

    /* ── CANVAS AREA ── */
    #canvas-area {
      flex: 1;
      background: var(--bg);
      overflow: hidden;
      position: relative;
      cursor: default;
      /* Dot-grid via pseudo-element so it's on its own layer, not repainted with canvas */
    }

    #canvas-area::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: radial-gradient(circle, #2a2a2a 1px, transparent 1px);
      background-size: 24px 24px;
      pointer-events: none;
      will-change: auto;
    }

    #canvas-viewport {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      overflow: hidden;
    }

    #canvas-transform {
      position: absolute;
      transform-origin: 0 0;
      /* Entire canvas on its own GPU compositor layer */
      will-change: transform;
    }

    #design-canvas {
      position: relative;
      background: #ffffff;
      overflow: hidden;
      box-shadow: 0 8px 48px rgba(0,0,0,0.5);
    }

    /* Canvas element fills design-canvas exactly */
    #canvas-el {
      position: absolute;
      top: 0; left: 0;
      display: block;
      pointer-events: all;
    }

    /* Inline text editor overlay (positioned in canvas-space) */
    #text-editor {
      position: absolute;
      display: none;
      box-sizing: border-box;
      pointer-events: all;
      cursor: text;
      outline: 2px solid var(--accent);
      padding: 4px;
      word-break: break-word;
      overflow: hidden;
      white-space: pre-wrap;
      background: transparent;
      z-index: 10;
    }

    #canvas-grid {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      pointer-events: none;
      display: none;
    }

    #canvas-grid.visible {
      display: block;
      background-image:
        linear-gradient(to right, rgba(0,0,0,0.07) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0,0,0,0.07) 1px, transparent 1px);
      background-size: 20px 20px;
    }

    #canvas-placeholder {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      color: #ccc;
      font-size: 14px;
      font-family: 'DM Sans', sans-serif;
      pointer-events: none;
      text-align: center;
      white-space: nowrap;
      opacity: 0.5;
    }

    /* ── CANVAS CURSOR STATES ── */
    #canvas-el { cursor: default; }
    #canvas-el.cursor-move   { cursor: move; }
    #canvas-el.cursor-grab   { cursor: grabbing; }
    #canvas-el.cursor-nw     { cursor: nw-resize; }
    #canvas-el.cursor-n      { cursor: n-resize; }
    #canvas-el.cursor-ne     { cursor: ne-resize; }
    #canvas-el.cursor-e      { cursor: e-resize; }
    #canvas-el.cursor-se     { cursor: se-resize; }
    #canvas-el.cursor-s      { cursor: s-resize; }
    #canvas-el.cursor-sw     { cursor: sw-resize; }
    #canvas-el.cursor-w      { cursor: w-resize; }
    #canvas-el.cursor-rotate { cursor: crosshair; }

    /* ── BUTTONS ── */
    .btn {
      padding: 8px 16px;
      border-radius: 100px;
      font-size: 13px;
      font-family: 'DM Sans', sans-serif;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: all 0.15s ease;
      white-space: nowrap;
    }

    .btn-sm { padding: 6px 12px; font-size: 12px; }
    .btn-icon { padding: 8px; border-radius: 10px; }
    .btn-icon.btn-sm { padding: 6px; }

    .btn-accent { background: var(--accent); color: #0d0d0d; font-weight: 600; border: none; }
    .btn-accent:hover { background: #d4eb3e; }

    .btn-outline { background: transparent; border: 1px solid var(--border); color: var(--text); }
    .btn-outline:hover { border-color: var(--accent); color: var(--accent); }

    .btn-ghost { background: transparent; border: none; color: var(--muted); }
    .btn-ghost:hover { color: var(--text); background: var(--surface2); }

    .btn-danger { background: rgba(255,87,87,.12); color: var(--danger); border: 1px solid rgba(255,87,87,.2); }
    .btn-danger:hover { background: rgba(255,87,87,.2); }

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

    .btn.active {
      background: var(--surface2);
      border-color: var(--accent);
      color: var(--accent);
    }

    /* ── TOOL BUTTONS ── */
    .tool-btn {
      width: 36px; height: 36px;
      border-radius: var(--radius-sm);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      color: var(--muted);
      border: 1px solid transparent;
      background: transparent;
      transition: all 0.15s;
    }
    .tool-btn:hover { color: var(--text); background: var(--surface2); }
    .tool-btn.active { color: var(--accent); border-color: var(--accent); background: rgba(232,255,87,0.08); }

    /* ── LEFT PANEL TABS ── */
    #left-tabs {
      display: flex;
      border-bottom: 1px solid var(--border);
      padding: 8px 8px 0;
      gap: 2px;
    }

    .left-tab {
      flex: 1;
      padding: 7px 4px;
      text-align: center;
      font-size: 11px;
      font-weight: 500;
      color: var(--muted);
      cursor: pointer;
      border-radius: 8px 8px 0 0;
      border: 1px solid transparent;
      border-bottom: none;
      transition: all 0.15s;
    }

    .left-tab:hover { color: var(--text); }
    .left-tab.active {
      color: var(--accent);
      border-color: var(--border);
      background: var(--surface2);
    }

    #left-content {
      flex: 1;
      overflow-y: auto;
    }

    .tab-pane { display: none; }
    .tab-pane.active { display: block; }

    /* ── ELEMENT GRID (shapes etc) ── */
    .element-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      padding: 12px;
    }

    .element-card {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 14px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      transition: all 0.15s;
      font-size: 12px;
      color: var(--muted);
    }

    .element-card:hover {
      border-color: var(--accent);
      color: var(--accent);
      background: rgba(232,255,87,0.04);
    }

    .element-card svg { width: 24px; height: 24px; }

    /* ── TEMPLATE BROWSER ── */
    /* #left-content handles scrolling; template tab is just block */
    #tab-templates.active { display: block !important; }

    .tpl-search-row { padding: 10px 12px 6px; }
    .tpl-search {
      width: 100%;
      padding: 7px 10px;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text);
      font-size: 12px;
      font-family: 'DM Sans', sans-serif;
      outline: none;
    }
    .tpl-search:focus { border-color: var(--accent); }
    .tpl-search::placeholder { color: var(--muted); }

    .tpl-cats-wrap { padding: 6px 12px 8px; }
    .tpl-cats {
      display: flex;
      gap: 5px;
      overflow-x: auto;
      scrollbar-width: none;
      padding-bottom: 2px;
    }
    .tpl-cats::-webkit-scrollbar { display: none; }

    .tpl-cat-pill {
      flex-shrink: 0;
      padding: 4px 10px;
      border-radius: 100px;
      border: 1px solid var(--border);
      background: none;
      color: var(--muted);
      font-size: 11px;
      font-weight: 500;
      font-family: 'DM Sans', sans-serif;
      cursor: pointer;
      transition: all 0.15s;
      white-space: nowrap;
    }
    .tpl-cat-pill:hover { border-color: var(--accent); color: var(--text); }
    .tpl-cat-pill.active { border-color: var(--accent); color: var(--accent); background: rgba(232,255,87,0.08); }

    .tpl-grid {
      padding: 0 10px 16px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .tpl-card {
      cursor: pointer;
      border-radius: 10px;
      overflow: hidden;
      border: 1.5px solid var(--border);
      background: var(--surface2);
      transition: border-color 0.15s, transform 0.14s, box-shadow 0.14s;
    }
    .tpl-card:hover {
      border-color: var(--accent);
      transform: translateY(-2px);
      box-shadow: 0 6px 18px rgba(0,0,0,0.5);
    }

    /* Thumbnail: scaled-down live HTML preview */
    .tpl-thumb {
      display: block;
      width: 100%;
      height: 0;
      /* padding-bottom is set inline per-template based on aspect ratio */
      position: relative;
      overflow: hidden;
      border-radius: 8px 8px 0 0;
      background: #1a1a1a;   /* fallback while preview loads */
    }

    .tpl-thumb-label {
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 7px 8px;
      background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.1) 45%, transparent 100%);
      font-size: 10px;
      font-weight: 700;
      color: #fff;
      text-shadow: 0 1px 5px rgba(0,0,0,1);
      line-height: 1.3;
      pointer-events: none;
      z-index: 2;
    }

    .tpl-card-meta {
      padding: 5px 7px 6px;
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 4px;
    }
    .tpl-card-name {
      font-size: 11px;
      font-weight: 600;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .tpl-card-size {
      font-size: 9px;
      color: var(--muted);
      flex-shrink: 0;
    }

    /* ── LAYERS ── */
    .layer-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 7px 12px;
      cursor: pointer;
      border-bottom: 1px solid transparent;
      transition: all 0.1s;
      font-size: 13px;
      color: var(--text);
    }

    .layer-item:hover { background: var(--surface2); }
    .layer-item.selected { background: rgba(232,255,87,0.08); border-left: 2px solid var(--accent); }
    .layer-item .layer-type-icon { color: var(--muted); flex-shrink: 0; }
    .layer-item .layer-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .layer-item .layer-actions { display: flex; gap: 4px; opacity: 0; }
    .layer-item:hover .layer-actions { opacity: 1; }
    .layer-item .icon-btn {
      background: none; border: none; cursor: pointer;
      color: var(--muted); padding: 2px;
      display: flex; align-items: center;
    }
    .layer-item .icon-btn:hover { color: var(--text); }
    .layer-item.hidden { opacity: 0.4; }

    /* ── INPUTS ── */
    .form-group { margin-bottom: 12px; }
    .form-label {
      font-size: 11px;
      color: var(--muted);
      margin-bottom: 5px;
      display: block;
    }

    input[type="text"],
    input[type="number"],
    select,
    textarea {
      width: 100%;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      color: var(--text);
      font-family: 'DM Sans', sans-serif;
      font-size: 13px;
      padding: 8px 10px;
      outline: none;
      transition: border-color 0.15s;
    }

    input[type="text"]:focus,
    input[type="number"]:focus,
    select:focus,
    textarea:focus {
      border-color: var(--accent);
    }

    input[type="range"] {
      width: 100%;
      accent-color: var(--accent);
      cursor: pointer;
    }

    input[type="color"] {
      width: 36px; height: 36px;
      border: 2px solid var(--border);
      border-radius: 8px;
      cursor: pointer;
      background: none;
      padding: 2px;
    }

    .input-row {
      display: flex;
      gap: 8px;
      align-items: center;
    }

    .input-row .form-group { flex: 1; margin-bottom: 0; }

    .color-row {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .color-row input[type="color"] { flex-shrink: 0; }
    .color-row input[type="text"] { flex: 1; }

    select { appearance: none; cursor: pointer; }

    /* ── PROPERTIES PANEL ── */
    #props-empty {
      padding: 24px 16px;
      text-align: center;
      color: var(--muted);
      font-size: 13px;
    }

    #props-empty .empty-icon { margin-bottom: 12px; opacity: 0.3; }

    .props-section {
      padding: 14px;
      border-bottom: 1px solid var(--border);
    }

    .props-section-title {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--muted);
      margin-bottom: 12px;
    }

    .checkbox-row {
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      font-size: 13px;
      color: var(--text);
    }

    .checkbox-row input[type="checkbox"] {
      accent-color: var(--accent);
      width: 14px; height: 14px;
    }

    /* ── FONT WEIGHT / ALIGN BUTTONS ── */
    .btn-group {
      display: flex;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      overflow: hidden;
    }

    .btn-group .btn-toggle {
      flex: 1; padding: 7px;
      background: transparent;
      border: none;
      border-right: 1px solid var(--border);
      color: var(--muted);
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: all 0.15s;
      font-size: 13px;
      font-family: 'DM Sans', sans-serif;
    }

    .btn-group .btn-toggle:last-child { border-right: none; }
    .btn-group .btn-toggle:hover { background: var(--surface2); color: var(--text); }
    .btn-group .btn-toggle.active { background: rgba(232,255,87,0.12); color: var(--accent); }

    /* ── ZOOM CONTROLS ── */
    #zoom-controls {
      position: absolute;
      bottom: 16px;
      right: 16px;
      display: flex;
      align-items: center;
      gap: 4px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 100px;
      padding: 4px 8px;
      z-index: 50;
    }

    #zoom-display {
      font-size: 12px;
      color: var(--text);
      min-width: 40px;
      text-align: center;
    }

    /* ── TOAST ── */
    #toast {
      position: fixed;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%) translateY(80px);
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 100px;
      padding: 10px 20px;
      font-size: 13px;
      color: var(--text);
      z-index: 9999;
      transition: transform 0.25s ease;
      white-space: nowrap;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    #toast.show { transform: translateX(-50%) translateY(0); }
    #toast.success { border-color: rgba(87,255,143,0.3); color: var(--success); }
    #toast.error { border-color: rgba(255,87,87,0.3); color: var(--danger); }

    /* ── CANVAS SIZE PICKER ── */
    .size-modal-overlay {
      position: fixed; inset: 0;
      background: rgba(0,0,0,0.7);
      z-index: 200;
      display: flex; align-items: center; justify-content: center;
      display: none;
    }

    .size-modal-overlay.open { display: flex; }

    .size-modal {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 24px;
      min-width: 320px;
    }

    .size-modal h3 {
      font-family: 'Syne', sans-serif;
      font-size: 16px;
      margin-bottom: 16px;
    }

    .size-presets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }

    .size-preset {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 10px;
      cursor: pointer;
      transition: all 0.15s;
      text-align: center;
    }

    .size-preset:hover, .size-preset.active {
      border-color: var(--accent);
      color: var(--accent);
    }

    .size-preset .preset-name { font-size: 13px; font-weight: 600; }
    .size-preset .preset-dims { font-size: 11px; color: var(--muted); margin-top: 2px; }

    /* ── SCROLLBAR ── */
    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
    ::-webkit-scrollbar-thumb:hover { background: #3a3a3a; }

    /* ── UPLOAD ZONE ── */
    .upload-zone {
      border: 2px dashed var(--border);
      border-radius: var(--radius-sm);
      padding: 24px;
      text-align: center;
      cursor: pointer;
      transition: all 0.15s;
      color: var(--muted);
      font-size: 13px;
      margin: 12px;
    }

    .upload-zone:hover {
      border-color: var(--accent);
      color: var(--accent);
    }

    /* ── CANVAS FORMAT BADGE ── */
    .format-pills {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      padding: 8px 12px;
    }

    .format-pill {
      padding: 5px 12px;
      border-radius: 100px;
      border: 1px solid var(--border);
      font-size: 12px;
      cursor: pointer;
      color: var(--muted);
      transition: all 0.15s;
      background: var(--surface2);
    }

    .format-pill:hover { border-color: var(--accent); color: var(--accent); }
    .format-pill.active { border-color: var(--accent); color: var(--accent); background: rgba(232,255,87,0.08); }

    /* Multi-select outline */
    .el.multi-selected > .el-content {
      outline: 2px solid rgba(232,255,87,0.6);
      outline-offset: 1px;
    }

    /* ── ASPECT LOCK BUTTON ── */
    .aspect-lock-btn {
      display: flex;
      align-items: center;
      gap: 7px;
      width: 100%;
      margin-top: 6px;
      padding: 7px 10px;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--muted);
      font-size: 12px;
      font-family: 'DM Sans', sans-serif;
      cursor: pointer;
      transition: all 0.15s;
      text-align: left;
    }
    .aspect-lock-btn:hover { border-color: var(--accent); color: var(--text); }
    .aspect-lock-btn.active {
      border-color: var(--accent);
      color: var(--accent);
      background: rgba(232,255,87,0.08);
    }
    .aspect-lock-btn.active #aspect-lock-label { color: var(--accent); }

    /* ── EXPORT DROPDOWN ── */
    .export-wrap {
      position: relative;
    }

    .export-menu {
      display: none;
      position: absolute;
      top: calc(100% + 6px);
      right: 0;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      overflow: hidden;
      z-index: 1000;
      min-width: 110px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    }
    .export-menu.open { display: block; }

    .export-option {
      display: flex;
      align-items: center;
      gap: 7px;
      width: 100%;
      padding: 9px 14px;
      background: none;
      border: none;
      color: var(--text);
      font-size: 13px;
      font-family: 'DM Sans', sans-serif;
      cursor: pointer;
      text-align: left;
      transition: background 0.1s;
    }
    .export-option:hover { background: var(--surface); color: var(--accent); }

    /* ── KLEURMODEL TOGGLE BAR (always visible) ── */
    .color-mode-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 14px;
      border-bottom: 1px solid var(--border);
      background: var(--surface);
    }
    .color-mode-bar-label {
      font-size: 11px;
      font-weight: 600;
      color: var(--muted);
      letter-spacing: 0.04em;
    }
    .color-mode-toggle {
      display: flex;
      gap: 0;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 2px;
    }
    .color-mode-btn {
      padding: 4px 12px;
      border: none;
      border-radius: 6px;
      background: none;
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
      cursor: pointer;
      font-family: 'DM Sans', sans-serif;
      letter-spacing: 0.06em;
      transition: all 0.15s;
    }
    .color-mode-btn:hover { color: var(--text); }
    .color-mode-btn.active { background: var(--accent); color: #0d0d0d; }

    /* CMYK inputs shown with a clear label */
    .cmyk-mode-indicator {
      display: none;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.08em;
      color: var(--accent);
      margin-bottom: 4px;
    }
    body.cmyk-active .cmyk-mode-indicator { display: block; }

    /* ── CMYK INPUTS ── */
    .cmyk-row {
      display: none;
      gap: 4px;
      margin-top: 6px;
    }
    .cmyk-field {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex: 1;
      gap: 2px;
    }
    .cmyk-field span {
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.05em;
      color: var(--muted);
    }
    .cmyk-field input[type="number"] {
      width: 100%;
      text-align: center;
      padding: 4px 2px;
      font-size: 12px;
    }
    /* hide number spinners */
    .cmyk-field input[type="number"]::-webkit-outer-spin-button,
    .cmyk-field input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; }
    .cmyk-field input[type="number"] { -moz-appearance: textfield; }

    /* ── PROJECT TABS ── */
    #project-tabs {
      height: 36px;
      background: var(--bg);
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: stretch;
      overflow-x: auto;
      scrollbar-width: none;
      padding: 0 6px;
      gap: 1px;
      flex-shrink: 0;
    }
    #project-tabs::-webkit-scrollbar { display: none; }

    .project-tab {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 0 10px;
      font-size: 12px;
      color: var(--muted);
      cursor: pointer;
      border-bottom: 2px solid transparent;
      white-space: nowrap;
      user-select: none;
      transition: color 0.15s;
    }
    .project-tab:hover { color: var(--text); }
    .project-tab.active { color: var(--text); border-bottom-color: var(--accent); }

    .project-tab-name {
      max-width: 120px;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .project-tab-close {
      width: 16px;
      height: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 3px;
      font-size: 14px;
      line-height: 1;
      color: var(--muted);
      transition: all 0.1s;
    }
    .project-tab-close:hover { background: var(--surface2); color: var(--danger); }

    .project-tab-new {
      display: flex;
      align-items: center;
      padding: 0 10px;
      color: var(--muted);
      cursor: pointer;
      font-size: 20px;
      font-weight: 300;
      transition: color 0.15s;
      flex-shrink: 0;
    }
    .project-tab-new:hover { color: var(--accent); }

    /* ── TEMPLATE MODAL ── */
    .tpl-modal-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.78);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      z-index: 2000;
      align-items: center;
      justify-content: center;
    }
    .tpl-modal-overlay.open { display: flex; }

    .tpl-modal {
      background: var(--surface);
      border-radius: 20px;
      width: 92vw;
      max-width: 1300px;
      height: 88vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border: 1px solid var(--border);
      box-shadow: 0 40px 100px rgba(0,0,0,0.75);
      animation: tplModalIn 0.2s ease;
    }
    @keyframes tplModalIn {
      from { opacity: 0; transform: scale(0.96) translateY(12px); }
      to   { opacity: 1; transform: scale(1)    translateY(0); }
    }

    .tpl-modal-header {
      padding: 18px 24px 14px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      gap: 16px;
      flex-shrink: 0;
    }
    .tpl-modal-header h2 {
      font-family: 'Syne', sans-serif;
      font-size: 20px;
      font-weight: 800;
      white-space: nowrap;
      color: var(--text);
    }
    .tpl-modal-header .tpl-search {
      flex: 1;
      max-width: 420px;
      padding: 9px 16px;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 100px;
      color: var(--text);
      font-size: 13px;
      font-family: 'DM Sans', sans-serif;
      outline: none;
      transition: border-color 0.15s;
    }
    .tpl-modal-header .tpl-search:focus { border-color: var(--accent); }
    .tpl-modal-header .tpl-search::placeholder { color: var(--muted); }

    .tpl-modal-count {
      font-size: 12px;
      color: var(--muted);
      margin-left: auto;
      white-space: nowrap;
    }

    .tpl-modal-close {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: var(--surface2);
      border: 1px solid var(--border);
      color: var(--muted);
      font-size: 20px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.15s;
      flex-shrink: 0;
    }
    .tpl-modal-close:hover { background: var(--danger); color: #fff; border-color: var(--danger); }

    .tpl-modal-body {
      display: flex;
      flex: 1;
      overflow: hidden;
    }

    .tpl-modal-sidebar {
      width: 196px;
      flex-shrink: 0;
      overflow-y: auto;
      padding: 14px 8px;
      border-right: 1px solid var(--border);
    }
    .tpl-modal-sidebar-title {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.08em;
      color: var(--muted);
      text-transform: uppercase;
      padding: 0 8px 10px;
    }
    .tpl-cat-item {
      display: block;
      width: 100%;
      text-align: left;
      padding: 7px 12px;
      border-radius: 8px;
      font-size: 13px;
      font-family: 'DM Sans', sans-serif;
      color: var(--muted);
      background: none;
      border: none;
      cursor: pointer;
      transition: all 0.12s;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .tpl-cat-item:hover { background: var(--surface2); color: var(--text); }
    .tpl-cat-item.active { background: rgba(232,255,87,0.1); color: var(--accent); font-weight: 600; }

    .tpl-modal-main {
      flex: 1;
      overflow-y: auto;
      padding: 20px 24px;
    }

    .tpl-grid-modal {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 18px;
    }

    .tpl-card-modal {
      cursor: pointer;
      border-radius: 14px;
      overflow: hidden;
      border: 2px solid var(--border);
      background: var(--surface2);
      transition: border-color 0.15s, transform 0.14s, box-shadow 0.14s;
    }
    .tpl-card-modal:hover {
      border-color: var(--accent);
      transform: translateY(-4px);
      box-shadow: 0 16px 40px rgba(0,0,0,0.55);
    }
    .tpl-card-modal .tpl-card-meta {
      padding: 8px 10px 10px;
    }
    .tpl-card-modal .tpl-card-name { font-size: 12px; font-weight: 600; }
    .tpl-card-modal .tpl-card-size { font-size: 10px; }

    .tpl-modal-empty {
      text-align: center;
      padding: 80px 20px;
      color: var(--muted);
      font-size: 14px;
    }

    /* Template button in left panel */
    .tpl-open-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin: 16px 12px;
      padding: 36px 16px;
      border: 2px dashed var(--border);
      border-radius: 12px;
      color: var(--muted);
      cursor: pointer;
      transition: all 0.15s;
      font-size: 13px;
      background: none;
      width: calc(100% - 24px);
      font-family: 'DM Sans', sans-serif;
    }
    .tpl-open-btn:hover {
      border-color: var(--accent);
      color: var(--accent);
      background: rgba(232,255,87,0.04);
    }
    .tpl-open-btn .tpl-open-icon { font-size: 28px; }

    /* ── CUSTOM CONFIRM / DIALOG MODAL ── */
    .dialog-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.65);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      z-index: 4000;
      align-items: center;
      justify-content: center;
    }
    .dialog-overlay.open { display: flex; }

    .dialog-box {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 18px;
      padding: 28px 28px 22px;
      width: 380px;
      max-width: 94vw;
      box-shadow: 0 28px 72px rgba(0,0,0,0.72);
      animation: dialogIn 0.16s cubic-bezier(0.34,1.56,0.64,1);
    }
    @keyframes dialogIn {
      from { opacity: 0; transform: scale(0.92) translateY(10px); }
      to   { opacity: 1; transform: scale(1)    translateY(0); }
    }

    .dialog-icon {
      width: 46px;
      height: 46px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      margin-bottom: 16px;
    }
    .dialog-icon.danger  { background: rgba(255,87,87,0.14); }
    .dialog-icon.warning { background: rgba(255,180,0,0.14); }
    .dialog-icon.info    { background: rgba(100,180,255,0.14); }

    .dialog-title {
      font-family: 'Syne', sans-serif;
      font-size: 16px;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 8px;
    }
    .dialog-msg {
      font-size: 13px;
      color: var(--muted);
      line-height: 1.6;
      margin-bottom: 24px;
    }
    .dialog-input {
      width: 100%;
      padding: 10px 14px;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 10px;
      color: var(--text);
      font-size: 14px;
      font-family: 'DM Sans', sans-serif;
      outline: none;
      margin-bottom: 20px;
      transition: border-color 0.15s;
    }
    .dialog-input:focus { border-color: var(--accent); }
    .dialog-actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
    }
    .dialog-btn {
      padding: 9px 20px;
      border-radius: 10px;
      font-size: 13px;
      font-weight: 600;
      font-family: 'DM Sans', sans-serif;
      cursor: pointer;
      border: 1px solid var(--border);
      transition: all 0.15s;
    }
    .dialog-btn-cancel {
      background: var(--surface2);
      color: var(--muted);
    }
    .dialog-btn-cancel:hover { color: var(--text); border-color: var(--muted); }
    .dialog-btn-ok {
      background: var(--accent);
      color: #0d0d0d;
      border-color: var(--accent);
    }
    .dialog-btn-ok:hover { filter: brightness(1.1); }
    .dialog-btn-ok.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
    .dialog-btn-ok.danger:hover { filter: brightness(1.15); }

    /* Inline rename input inside project tab */
    .project-tab-rename {
      background: var(--surface2);
      border: 1px solid var(--accent);
      border-radius: 4px;
      color: var(--text);
      font-size: 12px;
      font-family: 'DM Sans', sans-serif;
      padding: 1px 5px;
      max-width: 120px;
      outline: none;
    }