:root {
      --primary: #EB5424;
      --primary-hover: #d44a1e;
      --dark: #1B1B1B;
      --text: #2c2c2c;
      --text-secondary: #6b7280;
      --bg: #F4F4F4;
      --border: #e2e2e2;
    }

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

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: var(--bg);
      color: var(--text);
      line-height: 1.5;
      min-height: 100vh;
    }

    /* ── Header ── */
    header {
      background: var(--dark);
      padding: 0 40px;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: sticky;
      top: 0;
      z-index: 10;
    }

    .logo { display: flex; align-items: center; gap: 10px; }

    .logo-icon {
      width: 30px; height: 30px;
      background: var(--primary);
      border-radius: 7px;
      display: flex; align-items: center; justify-content: center;
    }

    .logo-icon svg { width: 16px; height: 16px; }

    .logo-name {
      color: white;
      font-size: 17px;
      font-weight: 700;
      letter-spacing: -0.3px;
    }

    .logo-tag {
      color: #6b7280;
      font-size: 13px;
      margin-left: 4px;
      font-weight: 400;
    }

    .header-badge {
      font-size: 11px;
      color: #9ca3af;
      background: #1f2937;
      border: 1px solid #374151;
      padding: 4px 10px;
      border-radius: 20px;
    }

    /* ── Main ── */
    main { max-width: 980px; margin: 0 auto; padding: 40px 24px 72px; }

    /* ── Setup Banner ── */
    .setup-banner {
      background: white;
      border: 1px solid var(--border);
      border-left: 4px solid var(--primary);
      border-radius: 10px;
      padding: 20px 24px;
      margin-bottom: 36px;
    }

    .setup-title {
      font-size: 11px; font-weight: 700; color: var(--primary);
      text-transform: uppercase; letter-spacing: 1px;
    }

    .setup-steps { display: flex; gap: 0; }

    .step {
      display: flex; align-items: flex-start; gap: 10px;
      flex: 1; padding-right: 24px;
      border-right: 1px solid var(--border); margin-right: 24px;
    }

    .step:last-child { border-right: none; margin-right: 0; padding-right: 0; }

    .step-num {
      background: var(--primary); color: white;
      font-size: 11px; font-weight: 700;
      width: 20px; height: 20px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; margin-top: 2px;
    }

    .step p { font-size: 13px; color: var(--text-secondary); }
    .step p strong { color: var(--text); }

    /* ── Demo animation ── */
    .demo-card {
      width: 300px; flex-shrink: 0;
      background: white; border: 1px solid var(--border);
      border-radius: 10px; overflow: hidden;
      box-shadow: 0 4px 24px rgba(0,0,0,.10);
      user-select: none;
    }

    .demo-chrome {
      background: #ececec; border-bottom: 1px solid #ddd;
      padding: 7px 10px; display: flex; align-items: center; gap: 8px;
    }

    .demo-dots { display: flex; gap: 5px; flex-shrink: 0; }
    .demo-dot  { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

    .demo-url-bar {
      flex: 1; background: white; border: 1px solid #ddd;
      border-radius: 4px; padding: 3px 8px;
      font-size: 10px; color: #888; text-align: center;
      transition: opacity 0.3s;
    }

    .demo-bm-bar {
      background: #f7f7f7; border-bottom: 1px solid #e0e0e0;
      padding: 5px 10px; display: flex; gap: 6px; align-items: center;
      min-height: 28px;
    }

    .demo-bm-item {
      font-size: 10px; padding: 3px 8px; border-radius: 4px;
      background: white; border: 1px solid #ddd;
      color: #444; white-space: nowrap;
      transition: all 0.15s;
    }

    .demo-bm-item.highlight {
      background: var(--primary); color: white;
      border-color: var(--primary); transform: scale(0.93);
    }

    /* Screen container */
    .demo-screens {
      position: relative; height: 160px; overflow: hidden;
    }

    .demo-screen {
      position: absolute; inset: 0; padding: 12px;
      opacity: 0; transition: opacity 0.4s ease;
      pointer-events: none;
    }

    .demo-screen.active { opacity: 1; }

    /* Screen 0 — PromptBar */
    .ds0-header {
      font-size: 11px; font-weight: 700; color: var(--dark);
      margin-bottom: 8px; display: flex; align-items: center; gap: 5px;
    }

    .ds0-card {
      border: 1px solid var(--border); border-radius: 7px;
      padding: 9px 10px; background: #fafafa;
    }

    .ds0-title  { font-size: 11px; font-weight: 600; color: var(--dark); margin-bottom: 2px; }
    .ds0-desc   { font-size: 10px; color: var(--text-secondary); margin-bottom: 8px; }
    .ds0-footer { display: flex; gap: 6px; }

    .ds0-drag-btn {
      font-size: 10px; padding: 4px 10px; border-radius: 5px;
      background: var(--dark); color: white; border: none;
      display: flex; align-items: center; gap: 4px;
    }

    .ds0-copy-btn {
      font-size: 10px; padding: 4px 8px; border-radius: 5px;
      background: white; border: 1px solid var(--border); color: #777;
    }

    /* Cursor */
    .demo-cursor-el {
      position: absolute; pointer-events: none;
      transition: top 0.6s cubic-bezier(.4,0,.2,1), left 0.6s cubic-bezier(.4,0,.2,1);
      z-index: 10;
    }

    .demo-cursor-el svg path { transition: fill 0.2s; }

    /* Screen 1 — Drag */
    .ds1-arrow {
      display: flex; flex-direction: column; align-items: center;
      padding-top: 4px; gap: 6px;
    }

    .ds1-item {
      font-size: 11px; padding: 5px 12px; border-radius: 5px;
      background: var(--dark); color: white;
      display: inline-flex; align-items: center; gap: 5px;
      box-shadow: 0 3px 10px rgba(0,0,0,.2);
      animation: drag-float 1.8s ease-in-out infinite;
    }

    @keyframes drag-float {
      0%, 100% { transform: translateY(0);   }
      50%       { transform: translateY(-6px); }
    }

    .ds1-path {
      width: 2px; height: 40px; background: linear-gradient(to top, #ddd, var(--primary));
      border-radius: 2px; position: relative;
    }

    .ds1-path::before {
      content: ''; position: absolute; top: -5px; left: -4px;
      border-left: 5px solid transparent; border-right: 5px solid transparent;
      border-bottom: 8px solid var(--primary);
    }

    .ds1-target {
      font-size: 10px; color: var(--primary); font-weight: 600;
      letter-spacing: 0.3px;
    }

    /* Screen 2 — Gemini empty */
    .ds2-label {
      font-size: 10px; color: #aaa; margin-bottom: 6px;
    }

    .ds2-input {
      background: white; border: 1px solid #e0e0e0;
      border-radius: 8px; padding: 10px 12px;
      font-size: 11px; color: #ccc; min-height: 62px;
      line-height: 1.5;
    }

    .ds2-hint {
      font-size: 10px; color: var(--primary); margin-top: 8px;
      font-weight: 500; text-align: center;
      animation: pulse-hint 1s ease-in-out infinite alternate;
    }

    @keyframes pulse-hint { from { opacity: 0.6; } to { opacity: 1; } }

    /* Screen 3 — Prompt injected */
    .ds3-input {
      background: white; border: 1px solid var(--primary);
      border-radius: 8px; padding: 10px 12px;
      font-size: 10.5px; color: var(--text);
      min-height: 62px; line-height: 1.6;
    }

    .ds3-typed {
      display: inline; overflow: hidden;
      white-space: pre-wrap; max-width: 0;
      animation: type-reveal 3s steps(55, end) forwards;
    }

    .ds3-typed::before {
      content: "You are a Technical Account Manager.\AReply to the customer email below.\A\AInput: ";
    }

    @keyframes type-reveal {
      0%   { max-width: 0; }
      100% { max-width: 260px; }
    }

    .ds3-cur {
      color: var(--primary);
      animation: blink-cur 0.7s step-end infinite;
    }

    @keyframes blink-cur { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

    /* Footer */
    .demo-footer {
      border-top: 1px solid var(--border); padding: 8px 12px;
      display: flex; align-items: center; gap: 10px;
      background: #fafafa;
    }

    .demo-step-dots { display: flex; gap: 5px; flex-shrink: 0; }

    .demo-step-dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: #ddd; transition: background 0.3s;
    }

    .demo-step-dot.active { background: var(--primary); }

    .demo-step-lbl {
      font-size: 10px; color: var(--text-secondary); flex: 1;
    }

    /* ── Search ── */
    .search-wrap {
      position: relative;
      margin-bottom: 16px;
    }

    .search-wrap svg.search-icon {
      position: absolute; left: 12px; top: 50%;
      transform: translateY(-50%);
      width: 15px; height: 15px;
      color: var(--text-secondary); pointer-events: none;
    }

    #search-input {
      width: 100%; padding: 10px 36px 10px 36px;
      border: 1px solid var(--border); border-radius: 8px;
      font-size: 13px; background: white; outline: none;
      transition: border-color 0.15s, box-shadow 0.15s;
    }

    #search-input:focus {
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(235,84,36,.08);
    }

    #search-input::placeholder { color: #9ca3af; }

    #search-clear {
      position: absolute; right: 10px; top: 50%;
      transform: translateY(-50%);
      background: none; border: none; cursor: pointer;
      color: var(--text-secondary); font-size: 16px; line-height: 1;
      display: none; align-items: center; padding: 2px 4px;
      border-radius: 4px;
    }

    #search-clear:hover { color: var(--text); }

    .search-results-label {
      font-size: 12px; color: var(--text-secondary);
      margin-bottom: 14px;
    }

    .tab-count {
      font-size: 10px; font-weight: 600;
      opacity: 0.65; margin-left: 3px;
    }

    .tab.active .tab-count { opacity: 0.85; }

    /* ── Tabs ── */
    .tabs {
      display: flex; gap: 6px;
      flex-wrap: wrap;
      margin-bottom: 24px;
    }

    .tab {
      padding: 7px 16px;
      border-radius: 20px;
      border: 1px solid var(--border);
      background: white;
      font-size: 13px; font-weight: 500;
      color: var(--text-secondary);
      cursor: pointer; white-space: nowrap;
      transition: all 0.15s; font-family: inherit;
    }

    .tab:hover { border-color: var(--primary); color: var(--primary); }

    .tab.active {
      background: var(--primary);
      border-color: var(--primary);
      color: white;
    }

    /* ── Section header ── */
    .section-header {
      display: flex; align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
    }

    .section-title { font-size: 16px; font-weight: 600; color: var(--dark); }

    .section-count {
      font-size: 12px; color: var(--text-secondary);
      background: white; border: 1px solid var(--border);
      padding: 3px 10px; border-radius: 20px;
    }

    .section-collapsible { cursor: pointer; }
    .section-collapsible:hover .section-title { color: var(--primary); }

    .section-chevron {
      width: 14px; height: 14px; flex-shrink: 0;
      color: var(--text-secondary);
      transition: transform 0.2s ease;
    }

    /* ── Template Grid ── */
    .templates-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
      gap: 14px;
      margin-bottom: 0;
    }

    .template-card {
      background: white; border: 1px solid var(--border);
      border-radius: 10px; padding: 18px;
      transition: box-shadow 0.15s, border-color 0.15s;
      display: flex; flex-direction: column;
    }

    .template-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.06); border-color: #d1d5db; }

    .card-clickable { cursor: pointer; }

    .card-top {
      display: flex; align-items: flex-start;
      justify-content: space-between; gap: 8px; margin-bottom: 5px;
    }

    .card-title { font-size: 14px; font-weight: 600; color: var(--dark); transition: color 0.15s; }
    .card-clickable:hover .card-title { color: var(--primary); }

    .card-tag {
      font-size: 11px; font-weight: 500;
      padding: 3px 8px; border-radius: 20px;
      background: #FEF0EB; color: var(--primary); flex-shrink: 0;
    }

    .card-tag-custom { background: #F0FDF4; color: #16a34a; }

    .card-desc { font-size: 12px; color: var(--text-secondary); margin-bottom: 0; }

    .expand-hint {
      display: flex; align-items: center; gap: 5px;
      font-size: 11px; color: var(--text-secondary);
      margin-top: 8px; user-select: none;
    }

    .expand-hint svg { width: 12px; height: 12px; transition: transform 0.2s; flex-shrink: 0; }
    .card-clickable:hover .expand-hint { color: var(--primary); }

    .prompt-preview {
      display: none; margin: 10px 0 12px;
      padding: 12px 14px;
      background: #F9FAFB; border: 1px solid var(--border);
      border-radius: 6px; font-size: 11.5px;
      font-family: 'SF Mono', 'Menlo', 'Monaco', monospace;
      white-space: pre-wrap; word-break: break-word;
      color: var(--text); line-height: 1.7;
    }

    .prompt-preview.open { display: block; }

    .card-footer {
      display: flex; align-items: center;
      gap: 7px; padding-top: 12px;
      border-top: 1px solid var(--border); margin-top: 12px;
      flex-wrap: wrap;
    }

    .bookmark-btn {
      display: inline-flex; align-items: center; gap: 6px;
      background: var(--dark); color: white;
      padding: 7px 12px; border-radius: 6px;
      font-size: 12px; font-weight: 500;
      text-decoration: none; cursor: grab;
      transition: background 0.15s; user-select: none; white-space: nowrap;
    }

    .bookmark-btn:hover { background: var(--primary); }
    .bookmark-btn:active { cursor: grabbing; }
    .bookmark-btn svg { width: 12px; height: 12px; flex-shrink: 0; }

    .copy-btn, .edit-btn {
      background: none; border: 1px solid var(--border);
      color: var(--text-secondary); padding: 7px 11px;
      border-radius: 6px; font-size: 12px; cursor: pointer;
      font-family: inherit; transition: border-color 0.15s, color 0.15s;
      display: inline-flex; align-items: center; gap: 5px;
    }

    .copy-btn:hover { border-color: var(--primary); color: var(--primary); }
    .copy-btn svg, .edit-btn svg { width: 12px; height: 12px; }

    .edit-btn:hover { border-color: #7c3aed; color: #7c3aed; }

    .delete-btn {
      background: none; border: 1px solid var(--border);
      color: #d1d5db; padding: 7px 9px; border-radius: 6px;
      cursor: pointer; display: inline-flex; align-items: center;
      transition: border-color 0.15s, color 0.15s;
    }

    .delete-btn:hover { border-color: #ef4444; color: #ef4444; }
    .delete-btn svg { width: 13px; height: 13px; }

    /* ── Empty state ── */
    .empty-state {
      text-align: center; padding: 32px 20px;
      color: var(--text-secondary); font-size: 13px;
      background: white; border: 1px dashed var(--border);
      border-radius: 10px;
    }

    /* ── Shared Pack Banner ── */
    .shared-pack-banner {
      background: white; border: 1px solid var(--border);
      border-left: 4px solid #7c3aed;
      border-radius: 10px; padding: 18px 22px;
      margin-bottom: 24px;
      display: flex; align-items: center;
      justify-content: space-between; gap: 16px; flex-wrap: wrap;
    }

    .shared-pack-banner-title { font-size: 14px; font-weight: 600; color: var(--dark); margin-bottom: 3px; }
    .shared-pack-banner-sub  { font-size: 12px; color: var(--text-secondary); }

    .shared-pack-import-btn {
      background: #7c3aed; color: white; border: none;
      padding: 9px 18px; border-radius: 6px; font-size: 13px;
      font-weight: 500; cursor: pointer; font-family: inherit;
      white-space: nowrap; transition: background 0.15s;
    }
    .shared-pack-import-btn:hover { background: #6d28d9; }

    .shared-pack-dismiss-btn {
      background: none; border: 1px solid var(--border);
      color: var(--text-secondary); padding: 9px 14px;
      border-radius: 6px; font-size: 13px; cursor: pointer;
      font-family: inherit; white-space: nowrap; transition: all 0.15s;
    }
    .shared-pack-dismiss-btn:hover { border-color: #ef4444; color: #ef4444; }

    /* ── Share Pack button (section headers) ── */
    .share-pack-btn {
      font-size: 11px; font-weight: 500; padding: 5px 12px;
      border-radius: 6px; border: 1px solid var(--border);
      background: white; color: var(--text-secondary);
      cursor: pointer; font-family: inherit;
      display: inline-flex; align-items: center; gap: 5px;
      transition: all 0.15s; flex-shrink: 0;
    }
    .share-pack-btn:hover { border-color: #7c3aed; color: #7c3aed; }
    .share-pack-btn svg { width: 12px; height: 12px; }

    /* ── My Templates header ── */
    .my-templates-header {
      display: flex; align-items: center;
      justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 10px;
    }

    .my-templates-header-left { display: flex; align-items: center; gap: 10px; }

    .import-export-btns { display: flex; gap: 8px; }

    .import-btn, .export-btn {
      font-size: 12px; font-weight: 500; padding: 7px 14px;
      border-radius: 6px; cursor: pointer; font-family: inherit;
      display: inline-flex; align-items: center; gap: 6px;
      transition: all 0.15s;
    }

    .import-btn {
      background: white; border: 1px solid var(--border); color: var(--text-secondary);
    }

    .import-btn:hover { border-color: var(--primary); color: var(--primary); }

    .export-btn {
      background: var(--primary); border: 1px solid var(--primary); color: white;
    }

    .export-btn:hover { background: var(--primary-hover); }

    .import-btn svg, .export-btn svg { width: 13px; height: 13px; }


    /* ── Divider ── */
    .section-divider {
      display: flex; align-items: center; gap: 16px; margin: 48px 0 32px;
    }

    .section-divider-line { flex: 1; height: 1px; background: var(--border); }

    .section-divider-label {
      font-size: 11px; font-weight: 700; color: var(--text-secondary);
      letter-spacing: 0.8px; text-transform: uppercase; white-space: nowrap;
    }

    /* ── Add Your Own ── */
    .add-section {
      background: white; border: 1px solid var(--border);
      border-radius: 10px; padding: 28px;
    }

    .add-section-header {
      display: flex; align-items: flex-start; gap: 14px;
      margin-bottom: 24px; padding-bottom: 20px;
      border-bottom: 1px solid var(--border);
    }

    .add-icon {
      width: 38px; height: 38px; background: #FEF0EB;
      border-radius: 8px; display: flex; align-items: center;
      justify-content: center; flex-shrink: 0;
    }

    .add-icon svg { width: 18px; height: 18px; color: var(--primary); }

    .add-section-header h2 { font-size: 16px; font-weight: 600; color: var(--dark); margin-bottom: 3px; }
    .add-section-header p { font-size: 13px; color: var(--text-secondary); }

    .guided-builder {
      margin-bottom: 24px;
      padding: 18px;
      background: linear-gradient(180deg, #fff9f6, #fffdfb);
      border: 1px solid #f1e4dc;
      border-radius: 12px;
    }

    .guided-builder-header {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      margin-bottom: 18px;
    }

    .guided-builder-icon {
      width: 34px; height: 34px;
      border-radius: 8px;
      background: #FEF0EB;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }

    .guided-builder-icon svg { width: 16px; height: 16px; color: var(--primary); }
    .guided-builder-header h3 { font-size: 15px; color: var(--dark); margin-bottom: 4px; }
    .guided-builder-header p { font-size: 12px; line-height: 1.6; color: var(--text-secondary); }

    .builder-presets {
      margin-bottom: 18px;
      padding: 12px;
      background: white;
      border: 1px solid var(--border);
      border-radius: 10px;
    }

    .builder-presets-label {
      font-size: 11px;
      font-weight: 700;
      color: var(--text-secondary);
      text-transform: uppercase;
      letter-spacing: 0.7px;
      margin-bottom: 10px;
    }

    .builder-preset-list {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .builder-preset-btn {
      background: #fff7f3;
      border: 1px solid #f1e4dc;
      color: var(--dark);
      padding: 7px 11px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 500;
      cursor: pointer;
      font-family: inherit;
      transition: all 0.15s;
    }

    .builder-preset-btn:hover {
      border-color: var(--primary);
      color: var(--primary);
      background: #fff2eb;
    }

    .builder-field-help {
      font-size: 11px;
      color: var(--text-secondary);
      line-height: 1.5;
      margin-top: -2px;
    }

    .guided-builder-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-bottom: 16px;
    }

    .guided-builder textarea {
      min-height: 90px;
    }

    .builder-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 14px;
    }

    .builder-secondary-btn {
      background: white;
      border: 1px solid var(--border);
      color: var(--text-secondary);
      padding: 9px 14px;
      border-radius: 6px;
      font-size: 13px;
      cursor: pointer;
      font-family: inherit;
      transition: all 0.15s;
    }

    .builder-secondary-btn:hover {
      border-color: var(--primary);
      color: var(--primary);
    }

    .builder-hint {
      font-size: 12px;
      color: var(--text-secondary);
    }

    .guided-builder-preview {
      margin: 0;
      padding: 14px 16px;
      background: #1f2937;
      color: #f9fafb;
      border-radius: 10px;
      font-size: 11.5px;
      line-height: 1.7;
      white-space: pre-wrap;
      word-break: break-word;
      font-family: 'SF Mono', 'Menlo', 'Monaco', monospace;
    }

    .manual-form-panel {
      border: 1px solid var(--border);
      border-radius: 12px;
      background: #fcfcfc;
      overflow: hidden;
    }

    .manual-form-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 16px 18px;
      background: white;
      border-bottom: 1px solid var(--border);
    }

    .manual-form-header h3 {
      font-size: 15px;
      color: var(--dark);
      margin-bottom: 4px;
    }

    .manual-form-header p {
      font-size: 12px;
      line-height: 1.6;
      color: var(--text-secondary);
    }

    .manual-form-toggle {
      background: white;
      border: 1px solid var(--border);
      color: var(--text-secondary);
      padding: 8px 14px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      font-family: inherit;
      transition: all 0.15s;
      flex-shrink: 0;
    }

    .manual-form-toggle:hover {
      border-color: var(--primary);
      color: var(--primary);
    }

    .manual-form-body {
      display: none;
      padding: 18px 18px 0;
    }

    .manual-form-panel.open .manual-form-body {
      display: block;
    }

    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
    .form-group { display: flex; flex-direction: column; gap: 6px; }

    label { font-size: 12px; font-weight: 600; color: var(--text); letter-spacing: 0.2px; }

    input, textarea, select {
      border: 1px solid var(--border); border-radius: 6px;
      padding: 9px 12px; font-size: 13px; font-family: inherit;
      color: var(--text); background: white;
      transition: border-color 0.15s, box-shadow 0.15s; outline: none;
    }

    input:focus, textarea:focus, select:focus {
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(235,84,36,.08);
    }

    textarea { resize: vertical; min-height: 130px; line-height: 1.6; }

    .form-actions { display: flex; align-items: center; gap: 10px; margin-top: 4px; flex-wrap: wrap; }

    .save-btn {
      background: var(--primary); color: white; border: none;
      padding: 9px 20px; border-radius: 6px; font-size: 13px;
      font-weight: 500; cursor: pointer; font-family: inherit;
      transition: background 0.15s; display: inline-flex; align-items: center; gap: 7px;
    }

    .save-btn:hover { background: var(--primary-hover); }
    .save-btn svg { width: 14px; height: 14px; }

    .cancel-btn {
      background: none; border: 1px solid var(--border);
      color: var(--text-secondary); padding: 9px 16px;
      border-radius: 6px; font-size: 13px; cursor: pointer;
      font-family: inherit; transition: all 0.15s;
    }

    .cancel-btn:hover { border-color: #ef4444; color: #ef4444; }

    .form-hint { font-size: 12px; color: var(--text-secondary); }

    /* ── Toast ── */
    .toast {
      position: fixed; bottom: 24px; right: 24px; z-index: 9999;
      background: var(--dark); color: white;
      padding: 12px 18px; border-radius: 8px;
      font-size: 13px; font-weight: 500;
      display: flex; align-items: center; gap: 8px;
      box-shadow: 0 4px 16px rgba(0,0,0,.25);
      border-left: 3px solid var(--primary);
      animation: slideIn 0.2s ease;
    }

    @keyframes slideIn {
      from { transform: translateY(8px); opacity: 0; }
      to   { transform: translateY(0);   opacity: 1; }
    }

    /* ── Footer ── */
    footer {
      text-align: center; padding: 28px 24px;
      font-size: 11px; color: #9ca3af;
      border-top: 1px solid var(--border);
    }

    /* ── Library hint ── */
    .library-hint {
      background: white; border: 1px solid var(--border);
      border-left: 4px solid var(--primary);
      border-radius: 8px; padding: 16px;
      margin-bottom: 20px; font-size: 12px;
      color: var(--text-secondary);
    }

    .library-hint > strong { display: block; margin-bottom: 12px; }

    .library-hint-options {
      display: flex; align-items: flex-start; gap: 0;
    }

    .library-hint-option {
      display: flex; gap: 10px; flex: 1;
    }

    .hint-option-icon {
      width: 28px; height: 28px; flex-shrink: 0;
      background: #FEF0EB; border-radius: 6px;
      display: flex; align-items: center; justify-content: center;
      margin-top: 1px;
    }

    .hint-option-icon svg { width: 13px; height: 13px; color: var(--primary); }

    .library-hint-option p { margin: 3px 0 6px; line-height: 1.6; }

    .hint-code {
      padding: 6px 9px; background: #F9FAFB;
      border: 1px solid var(--border); border-radius: 5px;
      font-family: 'SF Mono', 'Menlo', 'Monaco', monospace;
      font-size: 10.5px; color: var(--text); line-height: 1.6;
      margin-bottom: 8px; word-break: break-all;
    }

    .hint-link {
      color: var(--primary); font-weight: 600;
      text-decoration: none; font-size: 12px;
    }

    .hint-link:hover { text-decoration: underline; }

    .library-hint-divider {
      font-size: 11px; font-weight: 600; color: #d1d5db;
      padding: 0 16px; padding-top: 4px;
      flex-shrink: 0; text-transform: uppercase; letter-spacing: 0.5px;
    }

    /* ── Value section ── */
    .value-section {
      margin: 8px 0 28px;
      background: linear-gradient(180deg, #fff, #fff7f3);
      border: 1px solid #f1e4dc;
      border-radius: 14px;
      padding: 22px;
    }

    .value-kicker {
      display: inline-flex; align-items: center; gap: 8px;
      font-size: 11px; font-weight: 700; letter-spacing: 0.8px;
      text-transform: uppercase; color: var(--primary);
      margin-bottom: 10px;
    }

    .value-title {
      font-size: 18px; font-weight: 700; color: var(--dark);
      letter-spacing: -0.2px; margin-bottom: 8px;
    }

    .value-copy {
      font-size: 13px; line-height: 1.7; color: var(--text-secondary);
      max-width: 760px; margin-bottom: 18px;
    }

    .value-grid {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 10px;
    }

    .value-card {
      background: white;
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 14px 12px;
      min-height: 122px;
    }

    .value-card strong {
      display: block;
      font-size: 13px;
      color: var(--dark);
      margin-bottom: 6px;
    }

    .value-card p {
      font-size: 12px;
      line-height: 1.6;
      color: var(--text-secondary);
    }

    /* ── Mobile ── */
    @media (max-width: 640px) {
      header { padding: 0 16px; }
      main { padding: 24px 16px 64px; }

      /* Setup steps stack vertically */
      .setup-steps { flex-direction: column; gap: 12px; }
      .step { border-right: none; margin-right: 0; padding-right: 0; border-bottom: 1px solid var(--border); padding-bottom: 12px; }
      .step:last-child { border-bottom: none; padding-bottom: 0; }

      /* Hint stacks vertically */
      .library-hint-options { flex-direction: column; gap: 14px; }
      .library-hint-divider { padding: 0; text-align: center; }
      .hint-code { font-size: 10px; }

      /* Templates single column */
      .templates-grid { grid-template-columns: 1fr; }

      /* Section headers wrap */
      .section-header { flex-wrap: wrap; gap: 8px; }

      /* Card footer wraps */
      .card-footer { flex-wrap: wrap; }

      /* My Templates header stacks */
      .my-templates-header { flex-direction: column; align-items: flex-start; gap: 10px; }
      .import-export-btns { width: 100%; }
      .import-export-btns .import-btn,
      .import-export-btns .export-btn { flex: 1; justify-content: center; }

      /* Form rows stack */
      .form-row { grid-template-columns: 1fr; }

      .guided-builder-grid { grid-template-columns: 1fr; }

      /* Form actions wrap */
      .form-actions { flex-wrap: wrap; }

      .value-section { padding: 18px; }
      .value-grid { grid-template-columns: 1fr; }
    }

    /* Bookmarks bar doesn't exist on touch devices — hide drag button, promote copy */
    @media (hover: none) and (pointer: coarse) {
      .bookmark-btn { display: none; }
      .copy-btn {
        background: var(--dark); color: white;
        border-color: var(--dark); padding: 7px 16px;
      }
      .copy-btn:hover { background: var(--primary); border-color: var(--primary); }
      .setup-banner { display: none; }
    }