/* === Base (merged from tool-template.css) === */
:root{
  --bg:#111113;--sf:#1c1c1e;--sf2:#26262a;--sf3:#202024;--bd:#333338;
  --tx:#f3f4f6;--sub:#888890;--muted:#5f6068;--gold:#fbbf24;--pink:#f472b6;
  --purple:#a78bfa;--cyan:#67e8f9;--green:#34d399;--danger:#fb7185;
  --r:8px;--panel:288px;--shadow:0 24px 80px rgba(0,0,0,.62)
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:'SF Pro Display',-apple-system,'Segoe UI',sans-serif;background:var(--bg);color:var(--tx);overflow:hidden}
.tool-app{display:grid;grid-template-columns:var(--panel) 1fr var(--panel);height:100vh;min-height:0}
.tool-panel{background:var(--sf);border-color:var(--bd);overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--bd) transparent}
.tool-panel.left{border-right:1px solid var(--bd)}.tool-panel.right{border-left:1px solid var(--bd)}
.tool-panel::-webkit-scrollbar{width:4px}.tool-panel::-webkit-scrollbar-thumb{background:var(--bd);border-radius:2px}
.tool-header{padding:18px 16px 12px;border-bottom:1px solid var(--bd)}
.brand-kicker{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:2px}
.tool-title{font-size:16px;font-weight:800;letter-spacing:-.01em}.tool-subtitle{font-size:10px;color:var(--sub);margin-top:3px;line-height:1.45;letter-spacing:.04em}
.tool-section{border-bottom:1px solid var(--bd);padding:12px 16px}.section-title{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--sub);margin-bottom:10px;font-weight:700}
.hint{font-size:11px;color:var(--sub);line-height:1.55}.caption{font-size:10px;color:var(--muted);line-height:1.45}.mono{font-family:'SF Pro Mono','Menlo','Consolas',monospace}
.btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:9px 12px;border-radius:var(--r);border:1px solid var(--bd);background:var(--sf2);color:var(--tx);font-size:12px;font-weight:600;cursor:pointer;transition:.15s;margin-bottom:6px;letter-spacing:.02em;font-family:inherit}
.btn:hover{background:#2e2e34;border-color:#555}.btn:active{transform:scale(.98)}.btn.primary{background:var(--gold);border-color:var(--gold);color:#111;font-weight:800}.btn.accent{background:transparent;border-color:var(--gold);color:var(--gold)}
.button-row{display:flex;gap:6px;margin-bottom:6px}.button-row .btn{flex:1;margin-bottom:0;font-size:11px;padding:8px 9px}
.upload-area{border:1.5px dashed var(--bd);border-radius:var(--r);padding:16px;text-align:center;cursor:pointer;transition:.2s;position:relative;margin-bottom:8px;background:rgba(255,255,255,.01)}
.upload-area:hover,.upload-area.drag{border-color:var(--gold);background:rgba(251,191,36,.05)}.upload-area input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.upload-icon{font-size:22px;margin-bottom:4px}.upload-text{font-size:11px;color:var(--sub)}.upload-hint{font-size:10px;color:var(--muted);margin-top:2px}
.control-row{margin-bottom:10px}.control-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.control-label{font-size:11px;color:var(--sub)}.control-value{font-size:11px;color:var(--gold);font-variant-numeric:tabular-nums;min-width:34px;text-align:right}
input[type=range]{width:100%;height:3px;appearance:none;background:var(--bd);border-radius:2px;outline:none;cursor:pointer}input[type=range]::-webkit-slider-thumb{appearance:none;width:14px;height:14px;border-radius:50%;background:var(--gold);cursor:pointer;transition:.1s}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}
.text-input{width:100%;background:var(--sf2);border:1px solid var(--bd);border-radius:var(--r);color:var(--tx);font-size:12px;padding:7px 10px;outline:none;transition:.15s;margin-bottom:6px;font-family:inherit}.text-input:focus{border-color:var(--gold)}
.toggle-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.toggle-label{font-size:12px;color:var(--tx)}.toggle{position:relative;width:36px;height:20px;cursor:pointer}.toggle input{display:none}.toggle-track{position:absolute;inset:0;background:var(--bd);border-radius:10px;transition:.2s}.toggle input:checked+.toggle-track{background:var(--gold)}.toggle-thumb{position:absolute;top:3px;left:3px;width:14px;height:14px;background:#fff;border-radius:50%;transition:.2s;pointer-events:none}.toggle input:checked~.toggle-thumb{left:19px}
.chips{display:flex;flex-wrap:wrap;gap:4px}.chip{padding:4px 9px;border-radius:4px;background:var(--sf2);border:1px solid var(--bd);font-size:10px;color:var(--sub);cursor:pointer;transition:.15s;white-space:nowrap}.chip:hover,.chip.active{background:rgba(251,191,36,.12);border-color:var(--gold);color:var(--gold)}
.stage{position:relative;display:flex;align-items:center;justify-content:center;background:#0a0a0c;overflow:hidden;min-width:0}.stage::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 40%,rgba(251,191,36,.06),transparent 38%),linear-gradient(135deg,rgba(255,255,255,.025),transparent 42%);pointer-events:none}.canvas-wrap{position:relative;box-shadow:0 0 0 1px var(--bd),var(--shadow);border-radius:4px;overflow:hidden;background:#050507}.canvas-wrap canvas{display:block;touch-action:none}
.tool-toolbar{position:absolute;top:16px;left:50%;transform:translateX(-50%);display:flex;gap:6px;background:rgba(20,20,24,.9);backdrop-filter:blur(12px);border:1px solid var(--bd);border-radius:10px;padding:6px 10px;z-index:10;white-space:nowrap}.tool-tab{padding:5px 11px;border-radius:6px;border:1px solid transparent;background:transparent;color:var(--sub);font-size:11px;cursor:pointer;transition:.15s;font-family:inherit}.tool-tab:hover{color:var(--tx);background:var(--sf2)}.tool-tab.active{background:var(--sf2);color:var(--gold);border-color:var(--bd)}.toolbar-sep{width:1px;background:var(--bd);margin:2px 0}
.statusbar{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);font-size:10px;color:var(--sub);background:rgba(20,20,24,.75);backdrop-filter:blur(8px);border:1px solid var(--bd);border-radius:6px;padding:4px 12px;letter-spacing:.04em;pointer-events:none;white-space:nowrap}
.empty-state{position:absolute;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--sub);pointer-events:none}.empty-icon{font-size:48px;opacity:.3}.empty-text{font-size:13px;opacity:.55}
.loading{position:absolute;inset:0;background:rgba(10,10,12,.75);display:none;align-items:center;justify-content:center;z-index:20;flex-direction:column;gap:12px}.spinner{width:32px;height:32px;border:2px solid var(--bd);border-top-color:var(--gold);border-radius:50%;animation:spin .8s linear infinite}.loading-text{font-size:11px;color:var(--sub);letter-spacing:.06em}@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:860px){body{overflow:auto}.tool-app{display:flex;flex-direction:column;height:auto;min-height:100vh}.tool-panel{width:100%;min-height:0;max-height:42vh;border-left:0!important;border-right:0!important;border-bottom:1px solid var(--bd)}.stage{min-height:58vh;padding:16px}.tool-toolbar{top:8px;max-width:calc(100vw - 24px);overflow-x:auto}.statusbar{bottom:8px}}

/* === Keyword Grid specific === */

/* Stage reserves vertical room for the floating toolbar (top) and statusbar (bottom)
   so a tall canvas constrained to max-height:100% never spills out and gets clipped. */
.stage {
  padding: 64px 24px 56px;
}
.keywords-input {
  resize: vertical;
  min-height: 90px;
  line-height: 1.5;
  font-size: 12px;
  font-family: 'SF Pro Mono', 'Menlo', 'Consolas', monospace;
  text-transform: uppercase;
}

.upload-area {
  display: block;
  border: 1.5px dashed var(--bd);
  border-radius: var(--r);
  padding: 16px;
  text-align: center;
  cursor: pointer;
  transition: .2s;
  margin-bottom: 8px;
  background: rgba(255,255,255,.01);
}
.upload-area:hover,
.upload-area.drag {
  border-color: var(--gold);
  background: rgba(251,191,36,.05);
}

#canvas-wrap {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: inline-flex;
  overflow: visible;
  min-width: 0;
  min-height: 0;
}

#canvas-wrap canvas {
  display: block;
  /* Bound directly to the viewport (NOT parent %, which fails to resolve under
     grid/flex auto-min-size and lets the canvas keep its full natural height).
     Reserve ~120px vertical for the floating toolbar/statusbar and side panels. */
  max-width: min(100%, calc(100vw - 640px));
  max-height: calc(100vh - 130px);
  width: auto;
  height: auto;
  object-fit: contain;
}

/* === Light Theme === */
[data-theme="light"]{
  --bg:#f0f2f5;--sf:#ffffff;--sf2:#f4f5f7;--sf3:#ecedf0;--bd:#d8dade;
  --tx:#1a1a1e;--sub:#6b7280;--muted:#9ca3af;--shadow:0 24px 80px rgba(0,0,0,.12)
}
[data-theme="light"] body{background:var(--bg)}
[data-theme="light"] .stage{background:#e4e6ea}
[data-theme="light"] .stage::before{background:radial-gradient(circle at 50% 40%,rgba(251,191,36,.08),transparent 38%),linear-gradient(135deg,rgba(0,0,0,.015),transparent 42%)}
[data-theme="light"] .canvas-wrap{background:#d8dade}
[data-theme="light"] .tool-toolbar{background:rgba(255,255,255,.92);border-color:var(--bd)}
[data-theme="light"] .statusbar{background:rgba(255,255,255,.82);border-color:var(--bd)}
[data-theme="light"] .btn:hover{background:#ecedf0;border-color:#c0c4cc}
[data-theme="light"] input[type=range]{background:var(--bd)}
[data-theme="light"] .text-input{color:var(--tx)}

/* Theme toggle button */
.theme-btn{position:fixed;bottom:20px;right:20px;width:36px;height:36px;border-radius:50%;border:1px solid var(--bd);background:var(--sf2);color:var(--tx);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:100;transition:.2s;box-shadow:0 2px 8px rgba(0,0,0,.2);line-height:1}
.theme-btn:hover{transform:scale(1.1)}