.tc-tool-page {
  --tc-tool-accent-1: #11b1d2;
  --tc-tool-accent-2: #ff9a3d;
  --tc-tool-accent-3: #1d4ed8;
  --tc-tool-soft-1: rgba(17, 177, 210, 0.16);
  --tc-tool-soft-2: rgba(255, 154, 61, 0.14);
  --tc-tool-danger: #dc2626;
  --tc-tool-warning: #f59e0b;
  --tc-tool-success: #16a34a;
  padding: var(--space-6) 0 var(--space-12);
}

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

.tc-tool-page .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.tc-tool-page .is-hidden {
  display: none !important;
}

.tc-tool-hero {
  position: relative;
  overflow: hidden;
  margin-bottom: var(--space-7);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: clamp(1.25rem, 2.2vw, 2.25rem);
  background:
    radial-gradient(circle at 14% 12%, var(--tc-tool-soft-1), transparent 42%),
    radial-gradient(circle at 86% 84%, var(--tc-tool-soft-2), transparent 44%),
    linear-gradient(160deg, var(--color-bg-alt), var(--color-bg-card));
}

.tc-tool-hero::before,
.tc-tool-hero::after {
  content: "";
  position: absolute;
  border: 1px dashed color-mix(in srgb, var(--tc-tool-accent-1) 36%, transparent);
  border-radius: 50%;
  pointer-events: none;
}

.tc-tool-hero::before {
  inset: -28% auto auto -12%;
  width: 340px;
  aspect-ratio: 1;
  animation: tc-tool-spin 34s linear infinite;
}

.tc-tool-hero::after {
  inset: auto -6% -22% auto;
  width: 280px;
  aspect-ratio: 1;
  border-color: color-mix(in srgb, var(--tc-tool-accent-2) 38%, transparent);
  animation: tc-tool-spin 24s linear reverse infinite;
}

@keyframes tc-tool-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.tc-tool-eyebrow,
.tc-tool-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 var(--space-2);
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--tc-tool-accent-1) 40%, transparent);
  background: color-mix(in srgb, var(--tc-tool-accent-1) 11%, var(--color-bg-card) 89%);
  color: var(--color-heading);
  font-size: 12px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.tc-tool-title {
  margin: 0;
  font-size: clamp(1.82rem, 4vw, 2.9rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.tc-tool-subtitle {
  margin: var(--space-3) 0 0;
  max-width: 70ch;
  color: var(--color-text-secondary);
  font-size: clamp(1rem, 1.5vw, 1.08rem);
}

.tc-tool-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: var(--space-4);
}

.tc-tool-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-bg-card) 90%, #ffffff 10%);
  font-size: 13px;
  color: var(--color-text-secondary);
}

.tc-tool-pill-grid,
.tc-tool-problem-grid,
.tc-tool-feature-grid,
.tc-tool-faq-grid,
.tc-tool-stat-grid,
.tc-tool-section-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--space-3);
}

.tc-tool-card,
.tc-tool-panel,
.tc-tool-kpi,
.tc-tool-service-card,
.tc-tool-result-card,
.tc-tool-mode-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-bg-card) 95%, #ffffff 5%);
  box-shadow: 0 10px 28px rgba(8, 21, 34, 0.08);
}

.tc-tool-card,
.tc-tool-panel,
.tc-tool-kpi,
.tc-tool-result-card,
.tc-tool-mode-card {
  padding: clamp(0.95rem, 1.8vw, 1.4rem);
}

.tc-tool-card h2,
.tc-tool-card h3,
.tc-tool-panel h2,
.tc-tool-panel h3,
.tc-tool-kpi h3,
.tc-tool-result-card h2,
.tc-tool-result-card h3,
.tc-tool-mode-card h3 {
  margin-top: 0;
}

.tc-tool-card p:last-child,
.tc-tool-panel p:last-child,
.tc-tool-result-card p:last-child {
  margin-bottom: 0;
}

.tc-tool-card--soft,
.tc-tool-panel--soft {
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--color-bg-card) 92%, var(--tc-tool-accent-1) 8%), var(--color-bg-card));
}

.tc-tool-card--warm,
.tc-tool-panel--warm {
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--color-bg-card) 92%, var(--tc-tool-accent-2) 8%), var(--color-bg-card));
}

.tc-tool-section {
  margin-top: var(--space-8);
}

.tc-tool-section-head {
  margin-bottom: var(--space-4);
}

.tc-tool-section-head h2 {
  margin: 0;
  font-size: clamp(1.45rem, 2.4vw, 2rem);
}

.tc-tool-section-head p {
  margin: 10px 0 0;
  max-width: 72ch;
  color: var(--color-text-secondary);
}

.tc-tool-hero__panel-grid,
.tc-tool-problem-grid,
.tc-tool-feature-grid {
  margin-top: var(--space-5);
}

.tc-tool-pill-grid article,
.tc-tool-problem-grid article,
.tc-tool-feature-grid article {
  position: relative;
  z-index: 1;
  padding: var(--space-3) var(--space-4);
}

.tc-tool-pill-grid p,
.tc-tool-problem-grid p,
.tc-tool-feature-grid p {
  color: var(--color-text-secondary);
}

.tc-tool-workspace {
  margin-top: var(--space-8);
}

.tc-tool-workspace-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--space-4);
}

.tc-tool-sticky {
  align-self: start;
}

.tc-tool-sticky .tc-tool-panel {
  position: sticky;
  top: calc(var(--space-4) + 72px);
}

.tc-tool-fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.tc-tool-fieldset + .tc-tool-fieldset,
.tc-tool-field + .tc-tool-field,
.tc-tool-panel + .tc-tool-panel {
  margin-top: var(--space-3);
}

.tc-tool-label,
.tc-tool-field label,
.tc-tool-field legend {
  display: block;
  margin: 0 0 8px;
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tc-tool-input,
.tc-tool-select,
.tc-tool-textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-bg-card) 90%, #ffffff 10%);
  color: var(--color-text);
  font: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.tc-tool-textarea {
  min-height: 140px;
  resize: vertical;
}

.tc-tool-input:focus,
.tc-tool-select:focus,
.tc-tool-textarea:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--tc-tool-accent-1) 60%, var(--color-primary) 40%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tc-tool-accent-1) 20%, transparent);
}

.tc-tool-help,
.tc-tool-note,
.tc-tool-mini {
  margin: 8px 0 0;
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  line-height: 1.6;
}

.tc-tool-row {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--space-3);
}

.tc-tool-toggle-group,
.tc-tool-segmented,
.tc-tool-choice-grid {
  display: grid;
  gap: 12px;
}

.tc-tool-segmented {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tc-tool-toggle,
.tc-tool-choice,
.tc-tool-service-card,
.tc-tool-mode-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-bg-card) 94%, #ffffff 6%);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.tc-tool-toggle:hover,
.tc-tool-choice:hover,
.tc-tool-service-card:hover,
.tc-tool-mode-card:hover {
  transform: translateY(-1px);
}

.tc-tool-toggle input,
.tc-tool-choice input,
.tc-tool-service-card input,
.tc-tool-mode-card input {
  margin-top: 3px;
}

.tc-tool-toggle.is-active,
.tc-tool-choice.is-active,
.tc-tool-service-card.is-active,
.tc-tool-mode-card.is-active {
  border-color: color-mix(in srgb, var(--tc-tool-accent-1) 55%, transparent);
  box-shadow: 0 14px 28px color-mix(in srgb, var(--tc-tool-accent-1) 18%, transparent);
  background: color-mix(in srgb, var(--color-bg-card) 88%, var(--tc-tool-accent-1) 12%);
}

.tc-tool-toggle strong,
.tc-tool-choice strong,
.tc-tool-service-card strong,
.tc-tool-mode-card strong {
  display: block;
  color: var(--color-heading);
}

.tc-tool-toggle span,
.tc-tool-choice span,
.tc-tool-service-card span,
.tc-tool-mode-card span {
  display: block;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.tc-tool-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.tc-tool-actions > .tc-tool-note,
.tc-tool-actions > .tc-tool-mini {
  flex: 1 1 100%;
  margin-top: 0;
}

.tc-tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 11px 15px;
  color: #fff;
  font: inherit;
  font-weight: var(--weight-semibold);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  background: linear-gradient(135deg, var(--tc-tool-accent-1), var(--tc-tool-accent-3));
  box-shadow: 0 12px 22px color-mix(in srgb, var(--tc-tool-accent-3) 22%, transparent);
  transition: transform 0.15s ease, opacity 0.2s ease;
}

.tc-tool-btn:hover {
  transform: translateY(-1px);
}

.tc-tool-btn:disabled {
  cursor: not-allowed;
  opacity: 0.65;
  transform: none;
}

.tc-tool-btn--ghost {
  color: var(--color-text);
  border: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-bg-card) 92%, #ffffff 8%);
  box-shadow: none;
}

.tc-tool-btn--warm {
  background: linear-gradient(135deg, var(--tc-tool-accent-2), var(--tc-tool-accent-3));
}

.tc-tool-score {
  display: grid;
  gap: 16px;
  align-items: center;
}

.tc-tool-score--inline {
  grid-template-columns: auto 1fr;
}

.tc-tool-score-ring {
  --tc-tool-score-value: 50;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at center, var(--color-bg-card) 0 55%, transparent 56%),
    conic-gradient(
      var(--tc-tool-accent-1) calc(var(--tc-tool-score-value) * 1%),
      color-mix(in srgb, var(--color-border) 82%, var(--color-bg-card) 18%) 0
    );
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-border) 70%, transparent);
}

.tc-tool-score-ring__inner {
  text-align: center;
}

.tc-tool-score-ring__value {
  display: block;
  color: var(--color-heading);
  font-size: 2rem;
  line-height: 1;
  font-weight: 800;
}

.tc-tool-score-ring__label {
  display: block;
  margin-top: 4px;
  color: var(--color-text-secondary);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.tc-tool-grade {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  padding: 10px 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--tc-tool-accent-2) 18%, transparent);
  color: var(--color-heading);
  font-size: 1.15rem;
  font-weight: 800;
}

.tc-tool-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-bg-alt) 70%, var(--color-bg-card) 30%);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.tc-tool-status--good {
  border-color: color-mix(in srgb, var(--tc-tool-success) 40%, transparent);
  background: color-mix(in srgb, var(--tc-tool-success) 14%, transparent);
  color: color-mix(in srgb, var(--tc-tool-success) 72%, var(--color-heading) 28%);
}

.tc-tool-status--warn {
  border-color: color-mix(in srgb, var(--tc-tool-warning) 42%, transparent);
  background: color-mix(in srgb, var(--tc-tool-warning) 16%, transparent);
  color: color-mix(in srgb, var(--tc-tool-warning) 74%, var(--color-heading) 26%);
}

.tc-tool-status--bad {
  border-color: color-mix(in srgb, var(--tc-tool-danger) 42%, transparent);
  background: color-mix(in srgb, var(--tc-tool-danger) 14%, transparent);
  color: color-mix(in srgb, var(--tc-tool-danger) 74%, var(--color-heading) 26%);
}

.tc-tool-metrics {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

.tc-tool-kpi strong {
  display: block;
  margin-top: 8px;
  color: var(--color-heading);
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  line-height: 1.1;
}

.tc-tool-kpi span {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.tc-tool-list,
.tc-tool-checklist,
.tc-tool-detail-list {
  margin: 0;
  padding-left: 1.2rem;
}

.tc-tool-list li,
.tc-tool-checklist li,
.tc-tool-detail-list li {
  margin-bottom: 10px;
  color: var(--color-text-secondary);
}

.tc-tool-checklist li::marker {
  color: var(--tc-tool-accent-1);
}

.tc-tool-summary-box,
.tc-tool-code-wrap,
.tc-tool-report,
.tc-tool-preview {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-bg-alt) 68%, var(--color-bg-card) 32%);
  padding: var(--space-3);
}

.tc-tool-panel,
.tc-tool-cta,
.tc-tool-summary-box,
.tc-tool-code-wrap,
.tc-tool-report,
.tc-tool-preview,
.tc-tool-page form {
  display: grid;
  align-content: start;
  gap: var(--space-3);
}

.tc-tool-panel > .tc-tool-section-head,
.tc-tool-cta > .tc-tool-section-head,
.tc-tool-summary-box > .tc-tool-section-head,
.tc-tool-code-wrap > .tc-tool-section-head,
.tc-tool-report > .tc-tool-section-head,
.tc-tool-preview > .tc-tool-section-head,
.tc-tool-page form > .tc-tool-section-head {
  margin-bottom: 0;
}

.tc-tool-panel > .tc-tool-progress,
.tc-tool-panel > .tc-tool-inline-tags,
.tc-tool-page form > .tc-tool-progress,
.tc-tool-page form > .tc-tool-inline-tags {
  margin-top: 0;
}

.tc-tool-report h3,
.tc-tool-preview h3,
.tc-tool-summary-box h3 {
  margin-top: 0;
}

.tc-tool-code-wrap pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--color-heading);
  font-size: 13px;
  line-height: 1.6;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.tc-tool-code-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  color: var(--color-text-secondary);
  font-size: 13px;
}

.tc-tool-inline-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--space-3);
}

.tc-tool-inline-tags span {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-bg-card) 86%, var(--tc-tool-accent-2) 14%);
  border: 1px solid color-mix(in srgb, var(--color-border) 68%, var(--tc-tool-accent-2) 32%);
  font-size: 12px;
  color: var(--color-text-secondary);
}

.tc-tool-range {
  width: 100%;
}

.tc-tool-progress {
  margin-top: var(--space-3);
}

.tc-tool-progress__meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.tc-tool-progress__bar {
  width: 100%;
  height: 10px;
  margin-top: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--color-bg-card) 74%, #000 26%);
}

.tc-tool-progress__bar span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--tc-tool-danger), var(--tc-tool-warning), var(--tc-tool-success));
}

.tc-tool-preview-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  background: linear-gradient(165deg, color-mix(in srgb, var(--color-bg-card) 90%, #ffffff 10%), var(--color-bg-card));
}

.tc-tool-preview-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
  color: var(--color-text-secondary);
  font-size: 13px;
}

.tc-tool-preview-card__title {
  margin: 0 0 8px;
  font-size: 1.12rem;
  color: var(--color-heading);
}

.tc-tool-table-wrap {
  overflow-x: auto;
}

.tc-tool-table {
  width: 100%;
  border-collapse: collapse;
}

.tc-tool-table th,
.tc-tool-table td {
  padding: 12px;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.tc-tool-table th {
  color: var(--color-heading);
  font-size: var(--text-sm);
}

.tc-tool-table td {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.tc-tool-disclosure {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-bg-card) 94%, #ffffff 6%);
  padding: 0;
}

.tc-tool-disclosure + .tc-tool-disclosure {
  margin-top: 12px;
}

.tc-tool-disclosure summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 16px;
  font-weight: var(--weight-semibold);
  color: var(--color-heading);
}

.tc-tool-disclosure summary::-webkit-details-marker {
  display: none;
}

.tc-tool-disclosure__body {
  padding: 0 16px 16px;
  color: var(--color-text-secondary);
}

.tc-tool-empty {
  padding: var(--space-4);
  border: 1px dashed color-mix(in srgb, var(--color-border) 72%, var(--tc-tool-accent-1) 28%);
  border-radius: var(--radius-lg);
  color: var(--color-text-secondary);
  background: color-mix(in srgb, var(--color-bg-card) 90%, var(--tc-tool-accent-1) 10%);
}

.tc-tool-cta {
  padding: clamp(1rem, 2vw, 1.5rem);
  border-radius: var(--radius-xl);
  border: 1px solid color-mix(in srgb, var(--tc-tool-accent-2) 22%, var(--color-border) 78%);
  background:
    radial-gradient(circle at 15% 20%, var(--tc-tool-soft-2), transparent 34%),
    linear-gradient(150deg, color-mix(in srgb, var(--color-bg-alt) 86%, var(--tc-tool-accent-2) 14%), var(--color-bg-card));
}

.tc-tool-cta h2 {
  margin-top: 0;
}

.tc-tool-divider {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: var(--space-4) 0;
}

@media (min-width: 720px) {
  .tc-tool-pill-grid,
  .tc-tool-problem-grid,
  .tc-tool-feature-grid,
  .tc-tool-faq-grid,
  .tc-tool-stat-grid,
  .tc-tool-metrics,
  .tc-tool-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tc-tool-choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 980px) {
  .tc-tool-workspace-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  }

  .tc-tool-pill-grid,
  .tc-tool-problem-grid,
  .tc-tool-feature-grid,
  .tc-tool-stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tc-tool-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tc-tool-choice-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}