/* =========================================================
   Tools pages — extends the tokens defined in ../style.css
   (--ink, --yellow, --marketing, --dev, --card, --line, etc.)
   ========================================================= */

/* ---------- shared page shell ---------- */
.tools-hero{
  padding:64px 0 8px;
}
.tools-hero .eyebrow{ margin-bottom:14px; }
.tools-hero h1{
  font-size:clamp(2rem, 4.4vw, 3rem);
  font-weight:900; letter-spacing:-0.03em; line-height:1.05;
  margin-bottom:14px;
}
.tools-hero p{
  color:var(--ink-soft); font-size:1rem; max-width:560px;
}
.back-link{
  display:inline-flex; align-items:center; gap:7px;
  font-size:0.86rem; font-weight:700; color:var(--ink-faint);
  margin-bottom:26px; transition:color .2s ease, gap .25s var(--ease);
}
.back-link svg{ width:15px; height:15px; }
.back-link:hover{ color:var(--ink); gap:11px; }

/* ---------- tool listing grid ---------- */
.tools-listing{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:22px;
  margin-top:40px;
}
.tool-page-card{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius-md); padding:28px;
  display:flex; flex-direction:column; gap:16px;
  transition:transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s ease;
}
.tool-page-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-lg);
  border-color:var(--yellow-line);
}
.tool-page-card .tool-page-icon{
  width:46px; height:46px; border-radius:13px;
  background:linear-gradient(135deg, var(--marketing), var(--dev));
  display:flex; align-items:center; justify-content:center;
  color:#fff; transition:transform .3s var(--ease);
}
.tool-page-card:hover .tool-page-icon{ transform:rotate(-8deg) scale(1.08); }
.tool-page-icon svg{ width:22px; height:22px; }
.tool-page-card h3{ font-size:1.08rem; font-weight:800; letter-spacing:-0.01em; }
.tool-page-card p{ font-size:0.89rem; color:var(--ink-soft); flex-grow:1; }
.tool-page-card .open-tool{
  display:inline-flex; align-items:center; gap:6px;
  font-weight:700; font-size:0.87rem; color:var(--ink);
  border-bottom:1.5px solid var(--ink); padding-bottom:2px; align-self:flex-start;
  transition:gap .25s var(--ease), color .2s ease, border-color .2s ease;
}
.tool-page-card .open-tool svg{ width:13px; height:13px; transition:transform .25s var(--ease); }
.tool-page-card:hover .open-tool{ gap:11px; color:var(--marketing); border-color:var(--marketing); }
.tool-page-card:hover .open-tool svg{ transform:translateX(2px); }

.tool-page-card.coming-soon{
  opacity:0.55; pointer-events:none;
}
.status-chip{
  align-self:flex-start;
  font-size:0.7rem; font-weight:800; text-transform:uppercase; letter-spacing:0.08em;
  padding:5px 10px; border-radius:999px;
  background:var(--yellow-soft); color:var(--ink-faint); border:1px solid var(--yellow-line);
}

/* ---------- generic tool app shell ---------- */
.tool-app{
  padding:12px 0 90px;
}
.tool-app-grid{
  display:grid;
  grid-template-columns: 1fr 1.35fr;
  gap:26px;
  align-items:start;
}
@media (max-width: 880px){
  .tool-app-grid{ grid-template-columns:1fr; }
}

.panel{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius-md); padding:28px;
  box-shadow:var(--shadow);
}
.panel + .panel{ margin-top:20px; }
.panel-title{
  font-size:0.75rem; font-weight:800; text-transform:uppercase; letter-spacing:0.1em;
  color:var(--marketing); margin-bottom:20px;
}

.field{ margin-bottom:20px; }
.field:last-child{ margin-bottom:0; }
.field label{
  display:flex; align-items:baseline; justify-content:space-between;
  font-weight:700; font-size:0.86rem; margin-bottom:9px; color:var(--ink);
}
.field label .val{
  font-weight:700; color:var(--marketing); font-size:0.83rem;
}

/* file upload */
.file-drop{
  position:relative;
  border:1.5px dashed var(--yellow-line);
  border-radius:var(--radius-sm);
  background:var(--yellow-soft);
  padding:22px 16px;
  text-align:center;
  cursor:pointer;
  transition:border-color .22s ease, background .22s ease;
}
.file-drop:hover{ border-color:var(--marketing); background:#fbf3d9; }
.file-drop input[type="file"]{
  position:absolute; inset:0; opacity:0; cursor:pointer;
}
.file-drop .fd-icon{
  width:34px; height:34px; margin:0 auto 10px;
  color:var(--marketing);
}
.file-drop .fd-text{
  font-size:0.87rem; font-weight:700; color:var(--ink);
}
.file-drop .fd-sub{
  font-size:0.78rem; color:var(--ink-faint); margin-top:4px;
}
.file-drop .fd-filename{
  font-size:0.8rem; color:var(--ink-soft); margin-top:8px; font-weight:600;
  word-break:break-all;
}

/* text + range inputs, restyled to match brand */
.tool-app input[type="text"]{
  width:100%;
  font-family:inherit; font-size:0.92rem; color:var(--ink);
  padding:12px 14px;
  border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--bg-tint);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.tool-app input[type="text"]:focus{
  outline:none; border-color:var(--marketing);
  box-shadow:0 0 0 3px rgba(193,121,10,0.14);
}
.tool-app input[type="range"]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:5px; border-radius:999px;
  background:var(--yellow-line);
  cursor:pointer;
}
.tool-app input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:18px; height:18px; border-radius:50%;
  background:var(--ink);
  border:3px solid var(--yellow);
  cursor:pointer;
  transition:transform .2s var(--ease);
}
.tool-app input[type="range"]::-webkit-slider-thumb:hover{ transform:scale(1.12); }
.tool-app input[type="range"]::-moz-range-thumb{
  width:16px; height:16px; border-radius:50%;
  background:var(--ink); border:3px solid var(--yellow); cursor:pointer;
}

.color-row{ display:flex; gap:10px; }
.color-swatch{
  width:36px; height:36px; border-radius:10px;
  border:1.5px solid var(--line); cursor:pointer;
  transition:transform .2s var(--ease), border-color .2s ease;
}
.color-swatch:hover{ transform:translateY(-2px); }
.color-swatch.active{ border-color:var(--ink); box-shadow:0 0 0 2px var(--yellow); }

.security-note{
  display:flex; align-items:flex-start; gap:10px;
  background:var(--yellow-soft); border:1px solid var(--yellow-line);
  border-radius:var(--radius-sm); padding:13px 15px;
  font-size:0.83rem; color:var(--ink-soft); margin-bottom:22px;
  line-height:1.5;
}
.security-note svg{
  width:18px; height:18px; flex-shrink:0; color:var(--marketing); margin-top:1px;
}
.security-note strong{ color:var(--ink); }

.tool-app button.primary-action{
  width:100%;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:inherit; border:none; cursor:pointer;
  background:var(--ink); color:var(--yellow);
  font-weight:700; font-size:0.94rem;
  padding:14px 24px; border-radius:999px;
  box-shadow:0 14px 28px -14px rgba(27,21,8,0.5);
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), background .22s ease, opacity .2s ease;
}
.tool-app button.primary-action:hover{ transform:translateY(-3px); box-shadow:0 20px 34px -14px rgba(27,21,8,0.55); }
.tool-app button.primary-action:active{ transform:translateY(-1px) scale(.98); }
.tool-app button.primary-action:disabled{
  background:var(--yellow-line); color:var(--ink-faint);
  cursor:not-allowed; box-shadow:none; transform:none;
}
.tool-app button.primary-action svg{ width:17px; height:17px; }

/* preview column */
.preview-panel{
  min-height:420px;
  display:flex; flex-direction:column;
}
.preview-canvas-wrap{
  flex-grow:1;
  border:1.5px dashed var(--yellow-line);
  border-radius:var(--radius-sm);
  background:var(--bg-tint);
  display:flex; align-items:center; justify-content:center;
  overflow:auto;
  padding:16px;
  min-height:360px;
}
.preview-canvas-wrap canvas{
  max-width:100%; height:auto;
  display:none;
  border-radius:8px;
  box-shadow:var(--shadow);
}
.preview-placeholder{
  text-align:center; color:var(--ink-faint);
}
.preview-placeholder svg{
  width:44px; height:44px; margin:0 auto 12px; opacity:0.5;
}
.preview-placeholder p{ font-size:0.9rem; font-weight:600; }
.preview-placeholder span{ font-size:0.78rem; color:var(--ink-faint); }