/* ============================================
   BETLEWSKI Laser Generator — Design System
   Two themes: cool (dark) / warm (light)
   ============================================ */

   /* ---------- Theme tokens ---------- */
   :root,
   [data-theme="cool"] {
       --bg-page: #0e1017;
       --bg-header: #12141c;
       --bg-sidebar: #12141c;
       --bg-input: #1a1c28;
       --bg-canvas: #e8e9ed;
       --bg-card: #171921;
       --bg-card-hover: #1d1f2a;
   
       --border: #2a2d3a;
       --border-light: #22252f;
       --border-accent: #c0392b;
   
       --text-primary: #d0d1d8;
       --text-secondary: #8a8d9a;
       --text-muted: #5a5d6e;
       --text-on-canvas: #1a1a1a;
   
       --accent: #c0392b;
       --accent-hover: #d94435;
       --accent-text: #ffffff;
   
       --btn-secondary-bg: #1a1c28;
       --btn-secondary-text: #8a8d9a;
       --btn-secondary-border: #2a2d3a;
   
       --btn-success-bg: #1b6e3d;
       --btn-success-hover: #22874b;
       --btn-warning-bg: #a67c1a;
       --btn-warning-hover: #c49422;
       --btn-danger-bg: #a32d2d;
       --btn-danger-hover: #c03636;
   
       --shadow: rgba(0, 0, 0, 0.3);
       --overlay: rgba(0, 0, 0, 0.55);
   
       --flash-success-bg: #132b1c;
       --flash-success-border: #1b6e3d;
       --flash-success-text: #6dd89e;
       --flash-error-bg: #2b1313;
       --flash-error-border: #a32d2d;
       --flash-error-text: #f09595;
   
       --disabled-overlay-bg: rgba(180, 50, 50, 0.85);
   
       --switch-track: #2a2d3a;
       --switch-dot: #c8c8d0;
   
       --scrollbar-thumb: #2a2d3a;
       --scrollbar-track: #12141c;
   }
   
   [data-theme="warm"] {
       --bg-page: #faf8f5;
       --bg-header: #ffffff;
       --bg-sidebar: #ffffff;
       --bg-input: #f5f0eb;
       --bg-canvas: #ffffff;
       --bg-card: #ffffff;
       --bg-card-hover: #faf8f5;
   
       --border: #e0d6ca;
       --border-light: #ebe4da;
       --border-accent: #8b5e3c;
   
       --text-primary: #2c2519;
       --text-secondary: #6a5d4e;
       --text-muted: #a89880;
       --text-on-canvas: #1a1a1a;
   
       --accent: #8b5e3c;
       --accent-hover: #a06e48;
       --accent-text: #ffffff;
   
       --btn-secondary-bg: #f5f0eb;
       --btn-secondary-text: #6a5d4e;
       --btn-secondary-border: #e0d6ca;
   
       --btn-success-bg: #27ae60;
       --btn-success-hover: #2ecc71;
       --btn-warning-bg: #d4a017;
       --btn-warning-hover: #e6b422;
       --btn-danger-bg: #b92020;
       --btn-danger-hover: #d42a2a;
   
       --shadow: rgba(0, 0, 0, 0.06);
       --overlay: rgba(0, 0, 0, 0.35);
   
       --flash-success-bg: #eaf7ef;
       --flash-success-border: #8dd6a0;
       --flash-success-text: #1e5a30;
       --flash-error-bg: #fdf0f0;
       --flash-error-border: #ef9a9a;
       --flash-error-text: #7a1f1f;
   
       --disabled-overlay-bg: rgba(231, 76, 60, 0.85);
   
       --switch-track: #e0d6ca;
       --switch-dot: #8b5e3c;
   
       --scrollbar-thumb: #d8d0c4;
       --scrollbar-track: #f5f0eb;
   }
   
   /* ---------- Reset & base ---------- */
   *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
   
   html { height: 100%; }
   
   body {
       min-height: 100vh;
       font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
       font-size: 14px;
       color: var(--text-primary);
       background: var(--bg-page);
       -webkit-font-smoothing: antialiased;
       overflow-x: hidden;
   }
   
   /* ---------- Scrollbar ---------- */
   ::-webkit-scrollbar { width: 6px; }
   ::-webkit-scrollbar-track { background: var(--scrollbar-track); }
   ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }
   
   /* ---------- Full-page layout ---------- */
   .page-wrap {
       display: flex;
       flex-direction: column;
       min-height: 100vh;
   }
   
   .page-body {
       flex: 1;
       display: flex;
   }
   
   /* ==========================================
      HEADER
      ========================================== */
   .app-header {
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 0 24px;
       height: 52px;
       background: var(--bg-header);
       border-bottom: 0.5px solid var(--border);
       flex-shrink: 0;
       position: relative;
       z-index: 100;
   }
   
   .app-header__brand {
       display: flex;
       align-items: center;
       gap: 10px;
   }
   
   .app-header__logo {
       width: 30px;
       height: 30px;
       border-radius: 6px;
       background: var(--bg-input);
       border: 0.5px solid var(--border);
       display: flex;
       align-items: center;
       justify-content: center;
       overflow: hidden;
   }
   
   .app-header__logo img,
   .app-header__logo svg {
       width: 100%;
       height: 100%;
       object-fit: contain;
   }
   
   .app-header__title {
       font-size: 15px;
       font-weight: 600;
       color: var(--text-primary);
       letter-spacing: 1px;
   }
   
   .app-header__subtitle {
       font-size: 12px;
       color: var(--text-muted);
       margin-left: 4px;
   }
   
   .app-header__actions {
       display: flex;
       align-items: center;
       gap: 12px;
   }
   
   .app-header__logout {
       font-size: 12px;
       padding: 7px 18px;
       text-decoration: none;
   }
   
   /* ==========================================
      THEME SWITCH
      ========================================== */
   .theme-switch {
       display: flex;
       align-items: center;
       gap: 8px;
       cursor: pointer;
       user-select: none;
   }
   
   .theme-switch__label {
       font-size: 11px;
       text-transform: uppercase;
       letter-spacing: 0.5px;
       color: var(--text-muted);
       transition: color 0.3s;
   }
   
   .theme-switch__label--active {
       color: var(--text-secondary);
   }
   
   .theme-switch__track {
       width: 36px;
       height: 20px;
       background: var(--switch-track);
       border-radius: 10px;
       position: relative;
       transition: background 0.3s;
   }
   
   .theme-switch__dot {
       width: 16px;
       height: 16px;
       background: var(--switch-dot);
       border-radius: 50%;
       position: absolute;
       top: 2px;
       left: 2px;
       transition: left 0.3s, background 0.3s;
   }
   
   [data-theme="warm"] .theme-switch__dot {
       left: 18px;
   }
   
   /* ==========================================
      FOOTER
      ========================================== */
   .app-footer {
       padding: 10px 24px;
       background: var(--bg-header);
       border-top: 0.5px solid var(--border);
       text-align: center;
       font-size: 11px;
       color: var(--text-muted);
       flex-shrink: 0;
   }
   
   /* ==========================================
      GENERATOR — canvas + sidebar
      ========================================== */
   .generator-canvas {
       flex: 1;
       min-width: 0;
       display: flex;
       align-items: center;
       justify-content: center;
       background: var(--bg-canvas);
       padding: 24px;
   }
   
   .canvas {
       box-sizing: border-box;
       width: min(560px, 100%, 88vmin);
       max-width: 100%;
       aspect-ratio: 1;
       height: auto;
       border: 1px dashed #e0e0e0;
       border-radius: 10px;
       background: #fefefe;
       overflow: hidden;
   }
   
   .generator-sidebar {
       width: clamp(360px, 34vw, 520px);
       padding: 20px;
       background: var(--bg-sidebar);
       border-left: 0.5px solid var(--border);
       display: flex;
       flex-direction: column;
       overflow-y: auto;
       flex-shrink: 0;
   }
   
   .generator-sidebar__section {
       margin-bottom: 20px;
   }
   
   .generator-sidebar__label {
       font-size: 11px;
       text-transform: uppercase;
       letter-spacing: 0.8px;
       color: var(--text-muted);
       display: block;
       margin-bottom: 6px;
   }
   
   /* ---------- Text inputs ---------- */
   .forms {
       display: grid;
       gap: 12px;
       margin-bottom: 20px;
   }
   
   .ontaptext {
       width: 100%;
       padding: 9px 12px;
       border: 0.5px solid var(--border);
       border-radius: 6px;
       font-size: 14px;
       font-family: inherit;
       color: var(--text-primary);
       background: var(--bg-input);
       outline: none;
       transition: border-color 0.2s;
   }
   
   .ontaptext:focus {
       border-color: var(--accent);
   }
   
   .ontaptext::placeholder {
       color: var(--text-muted);
   }
   
   /* ---------- Template thumbnails ---------- */
   .variants {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
       gap: 10px;
   }
   
   .template-thumb {
       aspect-ratio: 1;
       border: 0.5px solid var(--border);
       border-radius: 8px;
       background: var(--bg-input);
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
       transition: transform 0.15s, border-color 0.2s, box-shadow 0.2s;
       padding: 8px;
       overflow: hidden;
       appearance: none;
       -webkit-appearance: none;
       line-height: 0;
       position: relative;
   }
   
   .template-thumb:hover {
       transform: scale(1.04);
       box-shadow: 0 2px 12px var(--shadow);
   }
   
   .template-thumb.selected {
       border: 1.5px solid var(--border-accent);
   }
   
   .template-thumb img,
   .template-thumb svg {
       width: 100%;
       height: 100%;
       object-fit: contain;
       display: block;
   }
   
   /* invert SVG previews in dark theme so black strokes are visible */
   [data-theme="cool"] .template-thumb img,
   [data-theme="cool"] .template-thumb svg {
       filter: invert(0.85);
   }
   
   /* ---------- Sidebar buttons ---------- */
   .generator-sidebar__actions {
       margin-top: auto;
       display: flex;
       gap: 8px;
       padding-top: 16px;
   }
   
   /* ==========================================
      BUTTONS
      ========================================== */
   .btn {
       padding: 9px 20px;
       border-radius: 6px;
       font-size: 13px;
       font-weight: 500;
       font-family: inherit;
       cursor: pointer;
       text-decoration: none;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       gap: 6px;
       border: 0.5px solid transparent;
       transition: background 0.2s, border-color 0.2s, transform 0.1s;
       line-height: 1.4;
   }
   
   .btn:active { transform: scale(0.97); }
   
   .btn-primary {
       background: var(--accent);
       color: var(--accent-text);
       border-color: var(--accent);
   }
   .btn-primary:hover { background: var(--accent-hover); }
   
   .btn-secondary {
       background: var(--btn-secondary-bg);
       color: var(--btn-secondary-text);
       border-color: var(--btn-secondary-border);
   }
   .btn-secondary:hover { background: var(--bg-card-hover); }
   
   .btn-danger {
       background: var(--btn-danger-bg);
       color: #fff;
       border-color: var(--btn-danger-bg);
   }
   .btn-danger:hover { background: var(--btn-danger-hover); }
   
   .btn-success {
       background: var(--btn-success-bg);
       color: #fff;
       border-color: var(--btn-success-bg);
   }
   .btn-success:hover { background: var(--btn-success-hover); }
   
   .btn-warning {
       background: var(--btn-warning-bg);
       color: #fff;
       border-color: var(--btn-warning-bg);
   }
   .btn-warning:hover { background: var(--btn-warning-hover); }
   
   .btn-small {
       padding: 4px 10px;
       font-size: 12px;
       border-radius: 4px;
   }
   
   .btn-flex { flex: 1; }
   
   .btn-ghost {
       background: transparent;
       color: var(--text-secondary);
       border-color: transparent;
   }
   .btn-ghost:hover { color: var(--text-primary); }
   
   #download-link[hidden],
   .canvas-actions[hidden] {
       display: none !important;
   }
   
   /* ==========================================
      ADMIN — Login
      ========================================== */
   .admin-login-page {
       min-height: 100vh;
       display: flex;
       align-items: center;
       justify-content: center;
       background: var(--bg-page);
   }
   
   .admin-login-form {
       width: min(400px, 90vw);
       display: grid;
       gap: 12px;
       background: var(--bg-card);
       border: 0.5px solid var(--border);
       border-radius: 12px;
       padding: 32px 28px;
   }
   
   .admin-login-form h1 {
       font-size: 20px;
       font-weight: 600;
       color: var(--text-primary);
       margin-bottom: 4px;
   }
   
   .admin-login-form label {
       font-size: 12px;
       color: var(--text-secondary);
       margin-bottom: -6px;
   }
   
   .admin-login-form input {
       padding: 10px 12px;
       border: 0.5px solid var(--border);
       border-radius: 6px;
       background: var(--bg-input);
       color: var(--text-primary);
       font-family: inherit;
       font-size: 14px;
       outline: none;
       transition: border-color 0.2s;
   }
   
   .admin-login-form input:focus {
       border-color: var(--accent);
   }
   
   /* ==========================================
      ADMIN — Dashboard
      ========================================== */
   .admin-dashboard {
       flex: 1;
       max-width: 1200px;
       width: 100%;
       margin: 0 auto;
       padding: 24px;
   }
   
   .admin-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-bottom: 20px;
   }
   
   .admin-header h1 {
       font-size: 20px;
       font-weight: 600;
   }
   
   .admin-upload,
   .admin-templates {
       margin-bottom: 20px;
       padding: 20px;
       border: 0.5px solid var(--border);
       border-radius: 10px;
       background: var(--bg-card);
   }
   
   .admin-upload h2,
   .admin-templates h2 {
       font-size: 16px;
       font-weight: 500;
       margin-bottom: 14px;
       color: var(--text-primary);
   }
   
   .admin-upload form {
       display: flex;
       align-items: center;
       gap: 12px;
       flex-wrap: wrap;
   }
   
   .admin-upload input[type="file"] {
       font-size: 13px;
       color: var(--text-secondary);
   }
   
   /* ---------- Template grid ---------- */
   .templates-grid {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
       gap: 16px;
   }
   
   .template-card {
       border: 0.5px solid var(--border);
       border-radius: 10px;
       padding: 12px;
       text-align: center;
       background: var(--bg-card);
       transition: box-shadow 0.2s, border-color 0.2s;
   }
   
   .template-card:hover {
       box-shadow: 0 4px 16px var(--shadow);
       border-color: var(--border-light);
   }
   
   .template-disabled { opacity: 0.5; }
   .template-disabled:hover { opacity: 0.7; }
   
   .template-preview {
       width: 100%;
       aspect-ratio: 1;
       display: flex;
       align-items: center;
       justify-content: center;
       padding: 16px;
       overflow: hidden;
       border: 0.5px solid var(--border);
       border-radius: 8px;
       background: var(--bg-input);
       margin: 0 auto 8px;
       line-height: 0;
       position: relative;
   }
   
   .disabled-overlay {
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       background: var(--disabled-overlay-bg);
       color: #fff;
       padding: 4px 12px;
       border-radius: 4px;
       font-size: 11px;
       font-weight: 600;
       letter-spacing: 1px;
   }
   
   .template-preview img,
   .template-preview svg {
       width: 100%;
       height: 100%;
       object-fit: contain;
       display: block;
   }
   
   [data-theme="cool"] .template-preview img,
   [data-theme="cool"] .template-preview svg {
       filter: invert(0.85);
   }
   
   .template-card > p {
       font-size: 13px;
       color: var(--text-secondary);
       margin: 6px 0;
   }
   
   .template-actions {
       display: flex;
       gap: 4px;
       flex-wrap: wrap;
       justify-content: center;
       margin-top: 8px;
   }
   
   /* ==========================================
      ADMIN — Template Editor
      ========================================== */
   .editor-toolbar {
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 12px;
       padding: 8px 20px;
       background: var(--bg-card);
       border-bottom: 0.5px solid var(--border);
       flex-wrap: wrap;
   }
   
   .editor-toolbar__left {
       display: flex;
       align-items: center;
       gap: 10px;
   }
   
   .editor-toolbar__right {
       display: flex;
       align-items: center;
       gap: 8px;
   }
   
   .editor-toolbar__sep {
       width: 1px;
       height: 24px;
       background: var(--border);
   }
   
   .editor-toolbar__id {
       font-size: 12px;
       color: var(--text-muted);
   }
   
   .editor-toolbar .rename-form {
       display: flex;
       align-items: center;
       gap: 6px;
   }
   
   .editor-toolbar .rename-input {
       padding: 5px 8px;
       border: 0.5px solid var(--border);
       border-radius: 5px;
       font-size: 13px;
       font-family: inherit;
       width: 140px;
       background: var(--bg-input);
       color: var(--text-primary);
       outline: none;
   }
   
   .editor-toolbar .rename-input:focus {
       border-color: var(--accent);
   }
   
   .editor-notice-inline {
       padding: 5px 12px;
       border-radius: 6px;
       font-size: 12px;
       font-weight: 500;
       border: 0.5px solid transparent;
       white-space: nowrap;
   }
   
   .editor-notice-inline[hidden] { display: none !important; }
   
   .editor-workspace {
       flex: 1;
       min-height: 0;
       display: flex;
       overflow: hidden;
   }
   
   .editor-canvas {
       flex: 1;
       max-width: 700px;
       background: var(--bg-canvas);
       min-height: 0;
       min-width: 0;
       overflow: hidden;
       border: none;
       border-radius: 0;
       position: relative;
   }
   
   .editor-sidebar {
       flex: 1;
       min-width: 0;
       width: 100%;
       max-width: 100%;
       padding: 16px;
       background: var(--bg-sidebar);
       border-left: 0.5px solid var(--border);
       overflow-y: auto;
       overflow-x: hidden;
       flex-shrink: 1;
       border-radius: 0;
       border-top: none;
       max-height: none;
   }
   
   .editor-sidebar__header {
       font-size: 12px;
       text-transform: uppercase;
       letter-spacing: 1px;
       color: var(--text-muted);
       margin-bottom: 12px;
   }
   
   .editor-notice-slot {
       min-height: 40px;
       margin-bottom: 10px;
   }
   
   .editor-notice {
       padding: 10px 14px;
       border-radius: 8px;
       font-size: 13px;
       border: 0.5px solid transparent;
   }
   
   .notice-success {
       background: var(--flash-success-bg);
       border-color: var(--flash-success-border);
       color: var(--flash-success-text);
   }
   
   .notice-error {
       background: var(--flash-error-bg);
       border-color: var(--flash-error-border);
       color: var(--flash-error-text);
   }
   
   /* ---------- Zones: max 2 kolumny (w jednym rzędzie) ---------- */
   #zones-list {
       display: grid;
       grid-template-columns: repeat(2, minmax(0, 1fr));
       gap: 10px;
   }
   
   /* ---------- Zone cards ---------- */
   .zone-card {
       border: 0.5px solid var(--border);
       border-radius: 10px;
       padding: 12px;
       background: var(--bg-input);
       transition: border-color 0.2s;
   }
   
   .zone-card.zone-selected {
       border-color: var(--accent);
   }
   
   .zone-card-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-bottom: 8px;
   }
   
   .zone-card-header strong {
       font-size: 13px;
       font-weight: 500;
   }
   
   .zone-card-actions { display: flex; gap: 3px; }
   
   /* Zone icon buttons */
   .zc-icon-btn {
       width: 24px;
       height: 24px;
       border-radius: 5px;
       border: 0.5px solid var(--border);
       background: var(--bg-card);
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
       padding: 0;
       transition: border-color 0.15s;
   }
   
   .zc-icon-btn svg { width: 12px; height: 12px; }
   
   .zc-icon-btn--dup { color: #5a8fbd; }
   .zc-icon-btn--dup:hover { border-color: #5a8fbd; }
   .zc-icon-btn--del { color: #e25555; }
   .zc-icon-btn--del:hover { border-color: #e25555; }
   
   /* Tabs */
   .zc-tabs {
       display: flex;
       background: var(--bg-card);
       border-radius: 6px;
       padding: 2px;
       margin-bottom: 10px;
   }
   
   .zc-tab {
       flex: 1;
       text-align: center;
       padding: 5px;
       border-radius: 4px;
       font-size: 11px;
       color: var(--text-muted);
       cursor: pointer;
       transition: all 0.15s;
       user-select: none;
   }
   
   .zc-tab--on {
       background: var(--bg-card-hover);
       color: var(--text-primary);
   }
   
   .zc-tab:hover:not(.zc-tab--on) {
       color: var(--text-secondary);
   }
   
   /* Fields grid — max 2 pola w rzędzie (np. X+Y, potem szerokosc+wysokosc) */
   .zc-fields {
       display: grid;
       grid-template-columns: repeat(2, minmax(0, 1fr));
       gap: 7px;
   }
   
   .zc-field-span-2 {
       grid-column: 1 / -1;
   }
   
   .zc-lbl {
       display: block;
       font-size: 10px;
       text-transform: uppercase;
       letter-spacing: 0.3px;
       color: var(--text-muted);
       margin-bottom: 2px;
   }
   
   /* Custom number input with -/+ */
   .zc-num {
       display: flex;
       align-items: stretch;
       border: 0.5px solid var(--border);
       border-radius: 5px;
       overflow: hidden;
       background: var(--bg-card);
   }
   
   .zc-num-input {
       flex: 1;
       min-width: 0;
       padding: 5px 4px;
       background: transparent;
       border: none;
       color: var(--text-primary);
       font-size: 12px;
       font-family: inherit;
       text-align: center;
       outline: none;
       -moz-appearance: textfield;
   }
   
   .zc-num-input::-webkit-outer-spin-button,
   .zc-num-input::-webkit-inner-spin-button {
       -webkit-appearance: none;
       margin: 0;
   }
   
   .zc-num-btn {
       width: 24px;
       background: var(--bg-card-hover);
       border: none;
       color: var(--text-muted);
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 14px;
       font-family: inherit;
       transition: color 0.15s;
       padding: 0;
       line-height: 1;
   }
   
   .zc-num-btn:hover { color: var(--text-primary); }
   
   .zc-num-l { border-right: 0.5px solid var(--border); }
   .zc-num-r { border-left: 0.5px solid var(--border); }
   
   /* Zone selects & text inputs */
   .zc-fields select {
       width: 100%;
       padding: 5px 6px;
       background: var(--bg-card);
       border: 0.5px solid var(--border);
       border-radius: 5px;
       color: var(--text-primary);
       font-size: 12px;
       font-family: inherit;
       outline: none;
       cursor: pointer;
   }
   
   .zc-fields select:focus { border-color: var(--accent); }
   
   .zc-text-input {
       width: 100%;
       padding: 5px 6px;
       background: var(--bg-card);
       border: 0.5px solid var(--border);
       border-radius: 5px;
       color: var(--text-primary);
       font-size: 12px;
       font-family: inherit;
       outline: none;
   }
   
   .zc-text-input:focus { border-color: var(--accent); }
   
   /* ---------- Zone handles ---------- */
   .zone-handle { stroke: #fff; stroke-width: 1; pointer-events: all; }
   .zone-handle-n, .zone-handle-s { cursor: ns-resize; }
   .zone-handle-e, .zone-handle-w { cursor: ew-resize; }
   .zone-handle-ne, .zone-handle-sw { cursor: nesw-resize; }
   .zone-handle-nw, .zone-handle-se { cursor: nwse-resize; }
   
   /* ==========================================
      FLASH messages
      ========================================== */
   .flash {
       padding: 10px 14px;
       border-radius: 8px;
       font-size: 13px;
       margin-bottom: 16px;
       border: 0.5px solid transparent;
   }
   
   .flash-success {
       background: var(--flash-success-bg);
       border-color: var(--flash-success-border);
       color: var(--flash-success-text);
   }
   
   .flash-error {
       background: var(--flash-error-bg);
       border-color: var(--flash-error-border);
       color: var(--flash-error-text);
   }
   
   .flash[hidden] {
       display: none !important;
   }
   
   /* ---------- Toasts: fixed, no layout shift ---------- */
   .toast-stack {
       position: fixed;
       left: 50%;
       transform: translateX(-50%);
       width: min(520px, calc(100vw - 24px));
       z-index: 2800;
       display: flex;
       flex-direction: column;
       gap: 8px;
       align-items: stretch;
       pointer-events: none;
       top: 62px;
   }
   
   body:has(.editor-toolbar) .toast-stack {
       top: 106px;
   }
   
   body:not(:has(.page-wrap)) .toast-stack {
       top: max(16px, env(safe-area-inset-top, 0px));
   }
   
   .toast-stack .flash,
   .toast-stack .editor-notice-inline {
       pointer-events: auto;
       margin: 0 !important;
       box-shadow: 0 10px 36px var(--shadow);
       text-align: center;
   }
   
   .toast-stack .editor-notice-inline {
       white-space: normal;
       max-width: 100%;
       padding: 10px 14px;
       font-size: 13px;
       border: 0.5px solid transparent;
   }
   
   /* ==========================================
      MODAL
      ========================================== */
   .modal-backdrop {
       position: fixed;
       inset: 0;
       background: var(--overlay);
       display: flex;
       align-items: center;
       justify-content: center;
       padding: 1rem;
       z-index: 3500;
   }
   
   .modal-backdrop[hidden] { display: none !important; }
   
   .modal-card {
       width: min(420px, 100%);
       background: var(--bg-card);
       border-radius: 12px;
       border: 0.5px solid var(--border);
       box-shadow: 0 16px 48px var(--shadow);
       padding: 24px;
   }
   
   .modal-card h3 {
       font-size: 16px;
       font-weight: 600;
       margin-bottom: 8px;
   }
   
   .modal-card p {
       font-size: 14px;
       color: var(--text-secondary);
       margin-bottom: 16px;
   }
   
   .modal-actions {
       display: flex;
       justify-content: flex-end;
       gap: 8px;
   }
   
   /* ==========================================
      RESPONSIVE
      ========================================== */
   @media (max-width: 900px) {
       .page-body { flex-direction: column; }
   
       .generator-sidebar {
           width: 100%;
           border-left: none;
           border-top: 0.5px solid var(--border);
       }
   
       .generator-canvas {
           min-height: 0;
           flex: 0 0 auto;
           padding: 12px 16px;
       }
   
       /* Kwadrat w granicach ekranu — unika przycinania przy 80vw + padding */
       .canvas {
           width: min(560px, 100%, min(92vw, 72vh));
           max-width: 100%;
       }
   
       .editor-workspace {
           flex-direction: column;
           overflow-y: auto;
           -webkit-overflow-scrolling: touch;
       }
   
       /* Canvas nie rozciaga sie na cala wysokosc — mniej pustki i skrolowania do stref na telefonie */
       .editor-canvas {
           flex: 0 0 auto;
           max-width: none;
           width: 100%;
           height: clamp(200px, 36vh, 300px);
       }
   
       .editor-sidebar {
           flex: 1 1 auto;
           width: 100%;
           min-width: 0;
           min-height: 0;
           border-left: none;
           border-top: 0.5px solid var(--border);
           max-height: none;
       }
   
       #zones-list {
           grid-template-columns: 1fr;
       }
   
       .variants { grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); }
   }
   
   @media (max-width: 480px) {
       .app-header { padding: 0 14px; }
       .app-header__subtitle { display: none; }
       .generator-sidebar { padding: 16px; }
       .canvas {
           width: min(560px, 100%, min(94vw, 68vh));
       }
   }
   
   /* ==========================================
      ADMIN — Upload zone (drag & drop)
      ========================================== */
   .upload-zone {
       border: 1.5px dashed var(--border);
       border-radius: 12px;
       padding: 32px;
       text-align: center;
       margin-bottom: 24px;
       cursor: pointer;
       background: var(--bg-card);
       transition: border-color 0.2s, background 0.2s;
   }
   
   .upload-zone:hover,
   .upload-zone--drag {
       border-color: var(--text-muted);
       background: var(--bg-card-hover);
   }
   
   .upload-zone__icon {
       width: 44px;
       height: 44px;
       margin: 0 auto 12px;
       border-radius: 10px;
       background: var(--bg-input);
       border: 0.5px solid var(--border);
       display: flex;
       align-items: center;
       justify-content: center;
       color: var(--text-muted);
   }
   
   .upload-zone__icon svg {
       width: 22px;
       height: 22px;
   }
   
   .upload-zone__title {
       font-size: 14px;
       font-weight: 500;
       color: var(--text-primary);
       margin-bottom: 4px;
   }
   
   .upload-zone__hint {
       font-size: 12px;
       color: var(--text-muted);
   }
   
   .upload-zone__btn {
       margin-top: 14px;
       font-size: 12px;
       padding: 7px 18px;
   }
   
   .upload-zone__input {
       display: none;
   }
   
   /* ==========================================
      ADMIN — Templates section header
      ========================================== */
   .admin-templates {
       margin-bottom: 20px;
   }
   
   .admin-templates__header {
       font-size: 12px;
       text-transform: uppercase;
       letter-spacing: 1px;
       color: var(--text-muted);
       margin-bottom: 14px;
   }
   
   /* ==========================================
      ADMIN — Template cards (new)
      ========================================== */
   .templates-grid {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
       gap: 14px;
   }
   
   .template-card {
       border: 0.5px solid var(--border);
       border-radius: 10px;
       overflow: hidden;
       background: var(--bg-card);
       transition: border-color 0.2s, box-shadow 0.2s;
       padding: 0;
       text-align: left;
   }
   
   .template-card:hover {
       border-color: var(--text-muted);
       box-shadow: 0 4px 16px var(--shadow);
   }
   
   .template-card--disabled {
       opacity: 0.5;
   }
   .template-card--disabled:hover {
       opacity: 0.7;
   }
   
   .template-preview {
       aspect-ratio: 1;
       display: flex;
       align-items: center;
       justify-content: center;
       padding: 20px;
       background: var(--bg-input);
       position: relative;
       line-height: 0;
       overflow: hidden;
       border: none;
       border-radius: 0;
       margin: 0;
       width: 100%;
   }
   
   .template-badge-off {
       position: absolute;
       top: 8px;
       right: 8px;
       background: var(--disabled-overlay-bg);
       color: #fff;
       font-size: 9px;
       font-weight: 600;
       padding: 2px 8px;
       border-radius: 4px;
       letter-spacing: 0.5px;
   }
   
   .template-card__footer {
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 8px;
       padding: 10px 12px;
       border-top: 0.5px solid var(--border);
   }
   
   .template-card__actions {
       display: flex;
       gap: 4px;
       justify-content: center;
   }
   
   .template-card__name {
       font-size: 13px;
       font-weight: 500;
       color: var(--text-primary);
       text-align: center;
   }
   
   /* ==========================================
      Icon buttons (with tooltip)
      ========================================== */
   .icon-btn-form {
       display: inline-flex;
   }
   
   .icon-btn {
       width: 30px;
       height: 30px;
       border-radius: 6px;
       border: 0.5px solid var(--border);
       background: var(--bg-input);
       cursor: pointer;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       position: relative;
       transition: background 0.15s, border-color 0.15s;
       padding: 0;
       text-decoration: none;
   }
   
   .icon-btn svg {
       width: 14px;
       height: 14px;
       flex-shrink: 0;
   }
   
   .icon-btn:hover {
       background: var(--bg-card-hover);
       border-color: var(--text-muted);
   }
   
   /* Color variants */
   .icon-btn--edit {
       color: var(--text-secondary);
   }
   .icon-btn--edit:hover {
       color: var(--text-primary);
   }
   
   .icon-btn--toggle-off {
       color: var(--btn-warning-bg);
   }
   .icon-btn--toggle-off:hover {
       border-color: var(--btn-warning-bg);
   }
   
   .icon-btn--toggle-on {
       color: var(--btn-success-bg);
   }
   .icon-btn--toggle-on:hover {
       border-color: var(--btn-success-bg);
   }
   
   .icon-btn--copy {
       color: var(--text-secondary);
   }
   .icon-btn--copy:hover {
       color: var(--text-primary);
   }
   
   .icon-btn--delete {
       color: #e25555;
   }
   .icon-btn--delete:hover {
       border-color: #e25555;
   }
   
   /* Tooltip */
   .icon-btn__tip {
       display: none;
       position: absolute;
       bottom: 100%;
       left: 50%;
       transform: translateX(-50%);
       background: var(--bg-card);
       border: 0.5px solid var(--border);
       color: var(--text-primary);
       font-size: 11px;
       font-weight: 400;
       padding: 3px 8px;
       border-radius: 4px;
       white-space: nowrap;
       margin-bottom: 6px;
       pointer-events: none;
       z-index: 10;
   }
   
   .icon-btn:hover .icon-btn__tip {
       display: block;
   }