/* ============================================================
   StickerForge mini-tool page styles
   Clean two-column studio layout, reuses site design tokens.
   ============================================================ */
.tool-wrap{ max-width:1180px; margin:0 auto; padding:24px 20px 60px; }
.tool-head{ text-align:center; margin-bottom:26px; }
.tool-head .back{ display:inline-flex; align-items:center; gap:6px; font-size:.82rem; color:var(--ink-faint); text-decoration:none; font-weight:700; margin-bottom:12px; }
.tool-head .back:hover{ color:var(--ink); }
.tool-head h1{ font-size:clamp(1.6rem,4vw,2.4rem); line-height:1.1; margin:6px 0; }
.tool-head p{ color:var(--ink-soft); max-width:620px; margin:0 auto; }
.tool-studio{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:24px;
  background:var(--paper); border:var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-2); padding:24px;
}
.tool-panel{ display:flex; flex-direction:column; gap:16px; }
.tool-panel h3{ font-size:1.05rem; margin:0 0 -4px; }
.tool-row{ display:flex; flex-direction:column; gap:6px; }
.tool-row label{ font-size:.82rem; font-weight:700; color:var(--ink); }
.tool-row .hint{ font-size:.76rem; color:var(--ink-faint); }
.tool-input{
  width:100%; box-sizing:border-box; padding:10px 12px; font-size:.95rem;
  background:var(--white); border:2px solid var(--line); border-radius:10px;
  font-family:inherit; color:var(--ink); outline:none; transition:border-color .15s;
}
.tool-input:focus{ border-color:var(--ink); }
select.tool-input{ cursor:pointer; }
.tool-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.tool-chip{
  padding:6px 14px; font-size:.85rem; font-weight:700; cursor:pointer;
  background:var(--white); border:2px solid var(--line); border-radius:999px;
  transition:all .14s;
}
.tool-chip:hover{ transform:translateY(-1px); }
.tool-chip.active{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.tool-colors{ display:flex; flex-wrap:wrap; gap:8px; }
.tool-swatch{
  width:30px; height:30px; border-radius:50%; border:2px solid var(--ink);
  cursor:pointer; position:relative; transition:transform .12s;
}
.tool-swatch:hover{ transform:scale(1.1); }
.tool-swatch.active{ box-shadow:0 0 0 3px var(--paper), 0 0 0 5px var(--ink); }
.tool-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:4px; }
.tool-btn{
  display:inline-flex; align-items:center; gap:8px; padding:10px 18px;
  font-size:.92rem; font-weight:800; border-radius:12px; cursor:pointer;
  border:2px solid var(--ink); font-family:inherit; transition:all .14s;
}
.tool-btn-primary{ background:var(--coral); color:var(--paper); }
.tool-btn-primary:hover{ transform:translate(-1px,-1px); box-shadow:3px 3px 0 var(--ink); }
.tool-btn-dark{ background:var(--ink); color:var(--paper); }
.tool-btn-dark:hover{ background:var(--ink-soft); }
.tool-btn-light{ background:var(--white); color:var(--ink); }
.tool-btn-light:hover{ background:var(--paper-2); }
.tool-preview{
  background:repeating-conic-gradient(var(--paper-2) 0% 25%, #fff 0% 50%) 50% / 24px 24px;
  border:2px solid var(--line); border-radius:14px; min-height:360px;
  display:flex; align-items:center; justify-content:center; padding:16px;
}
.tool-preview canvas{ max-width:100%; height:auto; border-radius:8px; box-shadow:var(--shadow-1); }
.tool-file{ display:none; }
.tool-drop{
  border:2px dashed var(--line); border-radius:12px; padding:20px; text-align:center;
  color:var(--ink-faint); font-size:.88rem; cursor:pointer; transition:all .14s;
}
.tool-drop:hover, .tool-drop.drag{ background:var(--paper-2); border-color:var(--ink-soft); color:var(--ink); }

/* tools gallery */
.tools-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:18px;
}
.tool-card{
  display:block; text-decoration:none; color:inherit;
  background:var(--white); border:var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-1); padding:22px; transition:all .16s; position:relative;
}
.tool-card:hover{ transform:translate(-3px,-3px); box-shadow:var(--shadow-3); }
.tool-card .ic{ font-size:2rem; margin-bottom:10px; }
.tool-card h3{ font-size:1.1rem; margin:0 0 6px; }
.tool-card p{ font-size:.85rem; color:var(--ink-soft); margin:0; line-height:1.5; }
.tool-card .tag{
  position:absolute; top:12px; right:12px; font-size:.66rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.06em; color:var(--paper); background:var(--ink-faint);
  padding:3px 8px; border-radius:6px;
}

@media (max-width:820px){
  .tool-studio{ grid-template-columns:1fr; padding:18px; }
  .tool-preview{ min-height:280px; }
}