body { font-family: Inter, sans-serif; }

    .tool-card {
      background: #fff;
      border: 1px solid #e5e7eb;
      border-radius: 0.75rem;
      padding: 1.25rem;
      box-shadow: 0 3px 12px rgba(0,0,0,.04);
    }

    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(6px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .fade-up { animation: fadeUp 0.3s ease-out; }

    /* ── TWO-COLUMN LAYOUT ── */
    .builder-wrap {
      display: grid;
      grid-template-columns: 1fr 320px;
      gap: 1.25rem;
      align-items: start;
    }
    @media (max-width: 767px) {
      .builder-wrap { grid-template-columns: 1fr; }
    }

    /* ── PREVIEW ── */
    .slide-preview {
      position: relative; overflow: hidden;
      border-radius: 0.75rem;
      box-shadow: 0 6px 30px rgba(0,0,0,0.14);
      width: 100%;
    }
    .slide-preview.r1x1 { aspect-ratio: 1/1; }
    .slide-preview.r4x5 { aspect-ratio: 4/5; }

    .slide-overlay {
      position: absolute; inset: 0;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      padding: 1.5rem; word-break: break-word;
    }

    .slide-dots {
      position: absolute; bottom: 10px; left: 50%;
      transform: translateX(-50%); display: flex; gap: 5px;
    }
    .dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.4); transition: background .15s; }
    .dot.on { background: rgba(255,255,255,0.95); }

    .slide-wm {
      position: absolute; bottom: 7px; right: 9px;
      font-size: 9px; font-weight: 500; opacity: .7; pointer-events: none;
    }

    /* ── THUMB STRIP ── */
    .thumb-strip { display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; margin-top:10px; }
    .thumb-strip::-webkit-scrollbar { height:3px; }
    .thumb-strip::-webkit-scrollbar-thumb { background:#d1d5db; border-radius:2px; }

    .thumb {
      width:50px; height:50px; border-radius:8px; flex-shrink:0;
      cursor:pointer; position:relative; border:2.5px solid transparent;
      overflow:hidden; transition:border-color .15s;
      display:flex; align-items:center; justify-content:center;
    }
    .thumb.on { border-color:#059669; }
    .thumb-lbl { font-size:8px; text-align:center; padding:2px; line-height:1.2; position:relative; z-index:1; font-weight:600; }
    .thumb-del {
      position:absolute; top:-3px; right:-3px;
      background:#ef4444; color:#fff; border-radius:50%;
      width:15px; height:15px; font-size:10px; font-weight:700;
      display:flex; align-items:center; justify-content:center;
      cursor:pointer; z-index:10;
    }
    .thumb-add {
      width:50px; height:50px; border-radius:8px; flex-shrink:0;
      cursor:pointer; border:2px dashed #d1d5db;
      display:flex; align-items:center; justify-content:center;
      font-size:20px; color:#9ca3af;
      transition:border-color .15s, color .15s;
    }
    .thumb-add:hover { border-color:#059669; color:#059669; }

    /* ── MOBILE TABS ── */
    .mob-tabs { display:none; }
    @media (max-width:767px) {
      .mob-tabs {
        display:flex; border-bottom:1px solid #e5e7eb; margin-bottom:1rem;
      }
      .mob-tab {
        flex:1; padding:.5rem; text-align:center; font-size:.75rem; font-weight:600;
        color:#9ca3af; border-bottom:2px solid transparent; cursor:pointer;
        transition:color .15s, border-color .15s;
      }
      .mob-tab.on { color:#059669; border-bottom-color:#059669; }
      .tab-pane { display:none; }
      .tab-pane.on { display:flex; flex-direction:column; gap:.875rem; }
    }
    @media (min-width:768px) {
      .tab-pane { display:flex !important; flex-direction:column; gap:.875rem; }
    }

    /* ── RATIO PILLS ── */
    .r-pill {
      padding:.3rem .85rem; border-radius:999px;
      border:1.5px solid #e5e7eb; font-size:.75rem; font-weight:600;
      cursor:pointer; background:#fff;
      transition:background .15s, border-color .15s, color .15s;
    }
    .r-pill.on { background:#059669; border-color:#059669; color:#fff; }

    /* ── SWATCHES ── */
    .tpl-dot {
      width:30px; height:30px; border-radius:50%; cursor:pointer;
      border:2.5px solid transparent; flex-shrink:0;
      box-shadow:0 1px 4px rgba(0,0,0,.18);
      transition:transform .15s, border-color .15s;
    }
    .tpl-dot:hover { transform:scale(1.12); }
    .tpl-dot.on { border-color:#374151; }

    .sw {
      width:24px; height:24px; border-radius:50%; cursor:pointer;
      border:2px solid transparent; flex-shrink:0;
      transition:transform .15s;
    }
    .sw:hover { transform:scale(1.12); }
    .sw.lt { border-color:#e5e7eb !important; }

    /* ── ALIGN ── */
    .al-btn {
      flex:1; padding:.3rem 0; text-align:center;
      border:1px solid #e5e7eb; font-size:.73rem; font-weight:500;
      cursor:pointer; background:#fff; transition:background .15s;
    }
    .al-btn:first-child { border-radius:.5rem 0 0 .5rem; }
    .al-btn:last-child  { border-radius:0 .5rem .5rem 0; }
    .al-btn.on { background:#f0fdf4; border-color:#059669; color:#065f46; }

    /* ── EXPORT ── */
    .ex-btn {
      display:flex; align-items:center; justify-content:center; gap:.4rem;
      padding:.55rem 1rem; border-radius:.6rem;
      font-size:.82rem; font-weight:600; cursor:pointer; border:none; width:100%;
      transition:opacity .15s, transform .1s;
    }
    .ex-btn:hover  { opacity:.88; transform:translateY(-1px); }
    .ex-btn:active { transform:translateY(0); }
    .eg { background:#059669; color:#fff; }
    .ed { background:#1f2937; color:#fff; }
    .ew { background:#f3f4f6; color:#374151; border:1px solid #e5e7eb; }

    input[type=range] { accent-color:#059669; width:100%; }
    input[type=color] { width:30px; height:30px; padding:2px; border:1px solid #e5e7eb; border-radius:6px; cursor:pointer; }

    #exportArea { position:fixed; left:-9999px; top:0; }