/* Tool pages (UTM/QR): layout, forms, and helper UI */
.tool-hero {
  padding: var(--section-spacing-tight) 0 var(--space-lg);
}

.tool-hero + .section {
  padding-top: var(--space-lg);
}

.tool-layout {
  display: grid;
  gap: var(--space-xl);
}

@media (min-width: 960px) {
  .tool-layout {
    grid-template-columns: 1.1fr 0.9fr;
  }
}

.tool-panel {
  --card-radius: var(--radius-lg);
  --card-border: rgba(10, 32, 214, 0.1);
  --card-shadow: 0 20px 40px var(--color-shadow);
  --tool-actions-margin: var(--space-lg);
  padding: var(--space-xl);
}

.tool-panel h3 {
  margin-top: 0;
}

.field-suggest {
  position: relative;
}

.suggest-list {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 0.35rem);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(10, 32, 214, 0.18);
  border-radius: 12px;
  padding: 0.4rem;
  box-shadow: 0 18px 30px rgba(15, 23, 42, 0.15);
  display: none;
  z-index: 5;
  backdrop-filter: blur(6px);
}

.suggest-list.is-open {
  display: grid;
  gap: 0.2rem;
}

.suggest-list button {
  border: none;
  background: transparent;
  padding: 0.45rem 0.6rem;
  text-align: left;
  border-radius: 10px;
  font-size: 0.95rem;
  color: var(--color-ink);
  cursor: pointer;
}

.suggest-list button:hover,
.suggest-list button:focus {
  background: rgba(10, 32, 214, 0.08);
  outline: none;
}

.output-box {
  background: rgba(10, 32, 214, 0.06);
  border-radius: 12px;
  padding: 1rem;
  word-break: break-all;
  min-height: 80px;
  border: 1px dashed rgba(10, 32, 214, 0.3);
}

.qr-preview {
  display: grid;
  place-items: center;
  min-height: 220px;
  border-radius: var(--radius-md);
  background: rgba(10, 32, 214, 0.06);
  border: 1px dashed rgba(10, 32, 214, 0.3);
}

@media (max-width: 640px) {
  .tool-panel {
    padding: var(--space-lg);
  }
}