/* ==========================================================================
   Creator Toolkit — Tool Page V2
   Shares design tokens with home-v2.css (same :root variables).
   Load home-v2.css BEFORE this file on every tool/inner page.
   ========================================================================== */

/* ---------------- Page header (replaces greeting on inner pages) ---------------- */
.page-header{
  display:flex; align-items:center; gap:12px;
  padding: var(--space-6) 0 var(--space-5);
  animation: v2fade .5s var(--ease) both;
}
.back-btn{
  width:38px; height:38px; flex-shrink:0;
  border-radius: var(--r-pill);
  display:flex; align-items:center; justify-content:center;
  background: var(--card);
  border: 1px solid var(--border);
  font-size:17px; color: var(--text);
  transition: transform .15s var(--ease), background .15s var(--ease);
}
.back-btn:active{ transform: scale(0.92); }
.page-header-text h1{
  font-size:20px; font-weight:700; color: var(--text);
  display:flex; align-items:center; gap:8px;
}
.page-header-text p{
  margin-top:4px; font-size:14px; color: var(--text-secondary);
}

/* ---------------- Tool card (the working area) ---------------- */
.tool-card-form{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
  box-shadow: var(--shadow-sm);
  animation: v2fade .5s .05s var(--ease) both;
}

.field-group{ margin-bottom: var(--space-4); }
.field-label{
  display:block; font-size:14px; font-weight:600;
  color: var(--text-secondary); margin-bottom:8px;
}

.input-v2, .textarea-v2, .select-v2{
  width:100%;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 13px 16px;
  font-size:14.5px;
  font-family:'Inter', sans-serif;
  color: var(--text);
  outline:none;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.input-v2::placeholder, .textarea-v2::placeholder{ color: var(--text-faint); }
.input-v2:focus, .textarea-v2:focus, .select-v2:focus{
  border-color: rgba(108,99,255,0.55);
  box-shadow: var(--shadow-glow);
}
.textarea-v2{ min-height:110px; resize:vertical; line-height:1.6; }

.select-v2{
  cursor:pointer; appearance:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238B93A1' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position: right 16px center;
}
.select-v2 option{ background: var(--card); color: var(--text); }

/* ---------------- Buttons ---------------- */
.btn-primary-v2{
  width:100%;
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 20px;
  border-radius: var(--r-sm);
  background: var(--grad-1);
  color:#fff;
  font-size:14.5px; font-weight:700;
  box-shadow: var(--shadow-glow);
  transition: transform .15s var(--ease), opacity .15s var(--ease);
  margin-bottom:10px;
}
.btn-primary-v2:active{ transform: scale(0.98); }
.btn-primary-v2:disabled{ opacity:.6; }

.btn-secondary-v2{
  width:100%;
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 20px;
  border-radius: var(--r-sm);
  background: var(--card-hover);
  border: 1px solid var(--border);
  color: var(--text);
  font-size:14px; font-weight:600;
  transition: transform .15s var(--ease), border-color .15s var(--ease);
}
.btn-secondary-v2:active{ transform: scale(0.98); }
.btn-secondary-v2:hover{ border-color: rgba(255,255,255,0.16); }

/* ---------------- Output box ---------------- */
.output-v2{
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 16px;
  min-height:150px;
  white-space: pre-wrap;
  color: var(--text-secondary);
  font-size:14px; line-height:1.7;
  margin-bottom: var(--space-4);
}
.output-v2:empty::before{
  content: attr(data-placeholder);
  color: var(--text-faint);
}

/* result "chip" style for tags/hashtags */
.result-chip{
  display:inline-block;
  background: var(--primary-soft);
  color: var(--text);
  border: 1px solid rgba(108,99,255,0.3);
  border-radius: var(--r-pill);
  padding:5px 12px;
  margin:3px 4px 3px 0;
  font-size:14px; font-weight:600;
}

/* ---------------- Related tools strip ---------------- */
.related-tools{ padding-bottom: var(--space-7); animation: v2fade .5s .1s var(--ease) both; }

/* ---------------- Content sections (about/contact/privacy) ---------------- */
.content-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-5);
  box-shadow: var(--shadow-sm);
  animation: v2fade .5s .05s var(--ease) both;
}
.content-card h2{ font-size:16px; font-weight:700; margin-bottom:10px; color: var(--text); }
.content-card p{ font-size:14px; line-height:1.75; color: var(--text-secondary); margin-bottom:12px; }
.content-card p:last-child{ margin-bottom:0; }
.content-card ul{ padding-left:20px; color: var(--text-secondary); font-size:14px; line-height:1.8; }

.contact-link-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 4px; border-bottom:1px solid var(--border-soft);
  font-size:14px; color: var(--text);
}
.contact-link-row:last-child{ border-bottom:none; }
.contact-link-row .arrow{ color: var(--text-faint); }

/* ---------------- Legacy JS compatibility ----------------
   Some tool scripts (thumbnail.js) inject buttons with the old
   .format-btn class directly via innerHTML — style it to match
   the new primary button so it doesn't fall back to the browser default. */
.format-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 20px;
  border-radius: var(--r-sm);
  background: var(--grad-1);
  color:#fff; border:none;
  font-size:14px; font-weight:700;
  font-family:'Inter', sans-serif;
  box-shadow: var(--shadow-glow);
  cursor:pointer;
}

.thumbnail-preview-box{ text-align:center; }
.thumbnail-preview-box:empty::before{
  content: attr(data-placeholder);
  color: var(--text-faint);
  font-size:14px;
}

/* ---------------- Stats row (About page) ---------------- */
.stats-row-v2{
  display:flex; gap:10px; margin: var(--space-2) 0 var(--space-5);
}
.stat-box-v2{
  flex:1; text-align:center;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding:16px 8px;
}
.stat-box-v2 .stat-num{ font-size:20px; font-weight:800; color: var(--text); }
.stat-box-v2 .stat-label{ font-size:14px; color: var(--text-secondary); margin-top:4px; }

/* ---------------- Big CTA button (About/Contact/Privacy) ---------------- */
.cta-link-v2{
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 20px;
  border-radius: var(--r-sm);
  background: var(--grad-1);
  color:#fff !important;
  font-size:14.5px; font-weight:700;
  box-shadow: var(--shadow-glow);
  text-decoration:none;
  margin-top: var(--space-2);
}

/* ---------------- Small helpers ---------------- */
.mt-6{ margin-top: var(--space-6); }
.center-text{ text-align:center; }

/* ---------------- Desktop layout ----------------
   On wide screens the app-shell itself grows (see home-v2.css),
   but forms and reading content stay at a comfortable width
   instead of stretching edge-to-edge. */
@media (min-width: 900px){
  .page-header{ max-width: 640px; margin-left:auto; margin-right:auto; }
  .tool-card-form{ max-width: 640px; margin-left:auto; margin-right:auto; }
  .content-card{ max-width: 640px; margin-left:auto; margin-right:auto; }
  .seo-block{ max-width: 640px; margin-left:auto; margin-right:auto; }
  .cta-link-v2{ max-width: 640px; margin-left:auto; margin-right:auto; }

  .related-tools{ max-width: 900px; margin-left:auto; margin-right:auto; }
  .related-tools .tools-grid-v2{ grid-template-columns: repeat(4, 1fr); }
}