.sv-tool-page {
  --sv-tool-bg: #f6f8fb;
  --sv-tool-panel: #ffffff;
  --sv-tool-border: #d9e2ef;
  --sv-tool-text: #182230;
  --sv-tool-muted: #667085;
  --sv-tool-accent: #126b5f;
  --sv-tool-accent-dark: #0f5149;
  --sv-tool-highlight: #f2b84b;
  color: var(--sv-tool-text);
  background: var(--sv-tool-bg);
  padding: 24px;
}

.sv-tool-page * {
  box-sizing: border-box;
}

.sv-tool-breadcrumb {
  align-items: center;
  color: var(--sv-tool-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.9rem;
  gap: 8px;
  margin-bottom: 18px;
}

.sv-tool-breadcrumb a,
.sv-tool-cta a {
  color: var(--sv-tool-accent);
}

.sv-tool-header {
  margin: 0 auto 24px;
  max-width: 1180px;
}

.sv-tool-header__content {
  background: var(--sv-tool-panel);
  border: 1px solid var(--sv-tool-border);
  border-radius: 8px;
  padding: 28px;
}

.sv-tool-eyebrow {
  color: var(--sv-tool-accent);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0;
  margin: 0 0 8px;
  text-transform: uppercase;
}

.sv-tool-header h1 {
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.08;
  margin: 0 0 12px;
}

.sv-tool-summary {
  color: var(--sv-tool-muted);
  font-size: 1.05rem;
  line-height: 1.65;
  max-width: 760px;
}

.sv-tool-summary p {
  margin: 0;
}

.sv-tool-layout {
  align-items: start;
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr) 300px;
  margin: 0 auto;
  max-width: 1180px;
}

.sv-tool-main {
  display: grid;
  gap: 20px;
}

.sv-tool-panel,
.sv-tool-section,
.sv-tool-sidebar__section,
.sv-tool-cta {
  background: var(--sv-tool-panel);
  border: 1px solid var(--sv-tool-border);
  border-radius: 8px;
  padding: 22px;
}

.sv-tool-panel__header {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 14px;
}

.sv-tool-panel h2,
.sv-tool-section h2,
.sv-tool-sidebar h2,
.sv-tool-cta h2 {
  font-size: 1.2rem;
  line-height: 1.25;
  margin: 0 0 14px;
}

.sv-tool-panel__header h2 {
  margin: 0;
}

/* ==========================================================
   Generic Tool Inputs
========================================================== */

.sv-tool-input,
.sv-tool-panel textarea,
.sv-tool-panel input,
.sv-tool-panel select{

  border:1px solid var(--sv-tool-border);
  border-radius:8px;
  color:var(--sv-tool-text);
  display:block;
  font:inherit;
  line-height:1.6;
  padding:16px;
  width:100%;

}

.sv-tool-input{

  min-height:280px;

  resize:vertical;

}

.sv-tool-panel input{

  height:48px;

  min-height:auto;

}

.sv-tool-panel textarea:focus,
.sv-tool-panel input:focus,
.sv-tool-panel select:focus,
.sv-tool-input:focus{

  border-color:var(--sv-tool-accent);

  box-shadow:0 0 0 3px rgba(18,107,95,.16);

  outline:none;

}

/* ==========================================================
   Tool Statistics
========================================================== */

.sv-tool-actions,
.sv-tool-stats{

    display:grid;

    gap:12px;

    margin-top:16px;

}

.sv-tool-actions{

    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));

    color:var(--sv-tool-muted);

    font-size:.95rem;

}

.sv-tool-stats{

    grid-template-columns:repeat(auto-fit,minmax(140px,1fr));

}

.sv-tool-actions span,
.sv-tool-stat{

    background:#ffffff !important;    

    border:1px solid var(--sv-tool-border);

    border-radius:8px;

    padding:14px;

}

.sv-tool-stat span {
  color: var(--sv-tool-accent-dark);
  display: block;
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1;
}

.sv-tool-stat p {
  color: var(--sv-tool-muted);
  margin: 8px 0 0;
}



.sv-tool-button {
  align-items: center;
  background: var(--sv-tool-accent);
  border: 1px solid var(--sv-tool-accent);
  border-radius: 8px;
  color: #ffffff;
  cursor: pointer;
  display: inline-flex;
  font-weight: 700;
  justify-content: center;
  min-height: 42px;
  padding: 10px 16px;
  text-decoration: none;
}

.sv-tool-button:hover,
.sv-tool-button:focus {
  background: var(--sv-tool-accent-dark);
  border-color: var(--sv-tool-accent-dark);
  color: #ffffff;
}

.sv-tool-section {
  line-height: 1.65;
}

.sv-tool-section > :last-child,
.sv-tool-sidebar__section > :last-child,
.sv-tool-cta > :last-child {
  margin-bottom: 0;
}

.sv-tool-feature-list {
  display: grid;
  gap: 10px;
  margin-bottom: 0;
  padding-left: 20px;
}

.sv-tool-section details {
  border-top: 1px solid var(--sv-tool-border);
  padding: 14px 0;
}

.sv-tool-section details:last-child {
  border-bottom: 1px solid var(--sv-tool-border);
}

.sv-tool-section summary {
  cursor: pointer;
  font-weight: 700;
}

.sv-tool-sidebar {
  display: grid;
  gap: 20px;
  position: sticky;
  top: 24px;
}

.sv-tool-sidebar dl {
  display: grid;
  gap: 12px;
  margin: 0;
}

.sv-tool-sidebar dl div {
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.sv-tool-sidebar dt {
  color: var(--sv-tool-muted);
}

.sv-tool-sidebar dd {
  font-weight: 700;
  margin: 0;
  text-align: right;
}

.sv-tool-cta {
  align-items: center;
  display: flex;
  gap: 18px;
  justify-content: space-between;
}

@media (max-width: 900px) {
  .sv-tool-layout {
    grid-template-columns: 1fr;
  }

  .sv-tool-sidebar {
    position: static;
  }
}

@media (max-width: 640px) {
  .sv-tool-page {
    padding: 16px;
  }

  .sv-tool-header__content,
  .sv-tool-panel,
  .sv-tool-section,
  .sv-tool-sidebar__section,
  .sv-tool-cta {
    padding: 18px;
  }

  .sv-tool-actions,
  .sv-tool-stats{

      grid-template-columns:1fr;

  }

  .sv-tool-form-grid{

      grid-template-columns:1fr;

  }

  .sv-tool-cta {
    align-items: stretch;
    flex-direction: column;
  }
}



.sv-faq-item{
    border:1px solid #ddd;
    border-radius:8px;
    margin-bottom:15px;
    overflow:hidden;
    background:#fff;
}

.sv-faq-question{
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:18px 20px;
    border:none;
    cursor:pointer;
    background:#fff;
    color:#222;
    font-size:16px;
    font-weight:600;
    transition:.3s;
}

.sv-faq-question:hover{
    background:#6C63FF;
    color:#fff;
}

.sv-faq-question.active{
    background:#6C63FF;
    color:#fff;
}

.sv-faq-answer{
    display:none;
    padding:20px;
    border-top:1px solid #eee;
    background:#fafafa;
}

.sv-faq-answer.active{
    display:block;
}

.sv-tool-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:100px;
    padding:12px 24px;
    border-radius:8px;
    background:#198754;
    color:#ffffff !important;
    text-decoration:none;
    font-weight:600;
    transition:.3s;
}

.sv-tool-button:hover{
    background:#157347;
    color:#ffffff !important;
}

/* ==========================================================
   Tool Forms
========================================================== */

.sv-tool-form-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
    margin:20px 0;
}

.sv-tool-form-group{
    display:flex;
    flex-direction:column;
}

.sv-tool-form-group label{
    font-weight:600;
    margin-bottom:8px;
    color:var(--sv-tool-text);
}

.sv-tool-form-group input,
.sv-tool-form-group select{
    height:48px;
}

/* ==========================================================
   Tool Buttons
========================================================== */

.sv-tool-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:10px 18px;
    min-width:auto;
}