/* ScanAtlas public code studio — creator-first tools redesign. */

.tools-page {
  --tools-bg: #07090e;
  --tools-surface: #0e1118;
  --tools-surface-raised: #141822;
  --tools-surface-soft: #1a202c;
  --tools-line: rgba(240, 244, 255, 0.08);
  --tools-line-strong: rgba(240, 244, 255, 0.16);
  --tools-text: #f5f7fa;
  --tools-muted: #929aa9;
  --tools-accent: oklch(64.46% 0.0693 72.14);
  --tools-accent-bright: #e7c48a;
  --tools-accent-soft: rgba(231, 196, 138, 0.14);
  background:
    radial-gradient(ellipse 75% 360px at 50% -40px, rgba(231, 196, 138, 0.08), transparent 70%),
    radial-gradient(ellipse 60% 400px at 50% 120%, rgba(20, 30, 48, 0.25), transparent 75%),
    linear-gradient(180deg, #07090e 0%, #0a0d14 45%, #07090e 100%);
  color: var(--tools-text);
  font-family: "Figtree", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}

.tools-page *,
.tools-page *::before,
.tools-page *::after {
  box-sizing: border-box;
}

.tools-page :where(button, input, select, textarea) {
  font-family: inherit;
}

.tools-page :where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--tools-accent-bright);
  outline-offset: 3px;
}

.tools-page .container {
  width: min(1480px, calc(100% - 40px));
  max-width: none;
}

.tools-page .site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 100000;
  border-block-end: 1px solid var(--tools-line);
  background: rgba(7, 9, 14, 0.86);
  box-shadow: none;
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
}

.tools-page .nav {
  min-height: 68px;
}

.tools-page .brand-name,
.tools-page .nav-links a,
.tools-page .nav-button {
  font-family: inherit;
}

.tools-page .nav-links a {
  color: var(--tools-muted);
}

.tools-page .nav-links a:hover,
.tools-page .nav-links a[aria-current="page"] {
  color: var(--tools-text);
}

.tools-page .nav-button {
  min-height: 40px;
}

.tools-page main {
  min-width: 0;
  overflow: clip;
}

.tools-page .tools-hero {
  min-height: 0;
  padding: 12px 0 clamp(54px, 6vw, 86px);
}

.tools-page .tools-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(22px, 3vw, 34px);
}

.tools-page .tool-pro-copy>span {
  margin: 0 0 9px;
  color: var(--tools-accent-bright);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  line-height: 1.2;
  text-transform: uppercase;
}

.tools-page .tool-workbench {
  position: relative !important;
  z-index: 20 !important;
  justify-self: stretch;
  width: 100%;
  max-width: none;
  min-width: 0;
  overflow: visible;
  border: 1px solid var(--tools-line);
  border-radius: 24px;
  background: rgba(14, 17, 24, 0.96);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.45);
  padding: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.tools-page .tool-header-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  min-width: 0;
  border-block-end: 1px solid var(--tools-line);
  padding: 15px 18px;
}

.tools-page .tool-workbench-kicker {
  justify-self: start;
  margin: 0;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 24px rgba(231, 196, 138, 0.2);
  background-image: linear-gradient(110deg,
      #fff4d6 0%,
      #ffe6ad 15%,
      #e7c48a 35%,
      #d0af77 50%,
      #e7c48a 65%,
      #ffe6ad 85%,
      #fff4d6 100%);
  background-size: 200% 100%;
  background-repeat: repeat-x;
  background-clip: text;
  -webkit-background-clip: text;
  white-space: nowrap;
  font-size: clamp(1.05rem, 2.4vw, 2.3rem);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.15;
  text-transform: none;
  animation: toolKickerAurora 5s linear infinite;
  will-change: background-position;
}

@keyframes toolKickerAurora {
  from {
    background-position: 0% 50%;
  }

  to {
    background-position: 200% 50%;
  }
}

/* Desktop: lift the kicker out of flow so the enlarged title never changes
   the header-row height and the tabs/controls below never move. It stays
   vertically centered inside the row and may only use the free column space
   before the centered tabs. The tabs and meta get explicit column placement
   because removing the kicker from flow would otherwise re-arrange them. At
   small widths the kicker falls back to in-flow sizing (its own row in the
   stacked header layout). */
@media (min-width: 701px) {
  .tools-page .tool-header-row {
    position: relative;
  }

  .tools-page .tool-workbench-kicker {
    position: absolute;
    grid-column: 1;
    grid-row: 1;
    inset-block: 0;
    margin-block: auto;
    height: max-content;
    left: 18px;
    justify-self: start;
    /* The containing block for the absolutely positioned kicker is the
       row's padding box, whose center sits 7px below the row's border-box
       center (15px top padding vs 15px bottom padding + 1px bottom border).
       Shift up so the title lines up with the centered tabs. */
    transform: translateY(-7px);
  }

  .tools-page .tool-tabs-host {
    grid-column: 2;
    grid-row: 1;
  }

  .tools-page .tool-header-meta {
    grid-column: 3;
    grid-row: 1;
  }
}

.tools-page .tool-tabs-host {
  width: max-content;
  max-width: 100%;
  min-width: 0;
  justify-self: center;
}

.tools-page .tool-header-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  justify-self: end;
  gap: 9px;
  min-width: 0;
}

.tools-page .tool-workbench[data-generator-category="barcode"] .tool-code-type-field {
  /* The morph-select button overflows its field wrapper by 3px, so its
     bottom edge pokes 3px below the Data textarea next to it. With
     align-items: end the field must be pulled up to line the two up. */
  margin-bottom: 3px;
}

.tools-page .tool-panel {
  min-width: 0;
  padding: clamp(14px, 2vw, 22px);
}

.tools-page .tool-panel[hidden] {
  display: none;
}

.tools-page .tool-panel[data-tool-panel="generate"] {
  display: grid;
  align-content: start;
  gap: 14px;
  min-height: 0;
}

.tools-page .tool-create-input-grid {
  display: grid;
  grid-template-columns: minmax(260px, 520px) auto;
  align-items: end;
  justify-content: start;
  column-gap: 12px;
  row-gap: 7px;
}

.tools-page .tool-create-input-grid .tool-code-type-field {
  grid-column: 1;
  grid-row: 1;
}

.tools-page .tool-create-input-grid .tool-data-field {
  grid-column: 1 / -1;
  grid-row: 3;
}

.tools-page .tool-create-input-grid [data-action="render-code"] {
  grid-column: 2;
  grid-row: 1;
  min-width: 132px;
  min-height: 44px;
}

.tools-page .tool-create-input-grid .tool-description {
  grid-column: 1 / -1;
  grid-row: 2;
}

.tools-page .tool-create-input-grid .tool-validation {
  grid-column: 1 / -1;
  grid-row: 4;
}

.tools-page .tool-create-input-grid .tool-lock {
  grid-column: 1 / -1;
}

.tools-page .tool-code-type-field [data-island="beui-select-generator-type"] {
  width: 100%;
  min-width: 0;
}

.tools-page .tool-workbench[data-generator-category="barcode"] .tool-create-input-grid {
  grid-template-columns: minmax(180px, 260px) minmax(320px, 1fr) auto;
  justify-content: stretch;
}

.tools-page .tool-workbench[data-generator-category="barcode"] .tool-create-input-grid .tool-code-type-field {
  grid-column: 1;
  grid-row: 1;
}

.tools-page .tool-workbench[data-generator-category="barcode"] .tool-create-input-grid .tool-data-field {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
}

.tools-page .tool-workbench[data-generator-category="barcode"] .tool-create-input-grid [data-action="render-code"] {
  grid-column: 3;
  grid-row: 1;
}

/* The beUI Data field is taller than the native textarea box it replaced
   (50px field vs the page's 44px box), so the select and Update code button
   sit low against the field's bottom edge. Lift each so its middle lines up
   with the field's middle (measured: select -2px, 44px button -3px).
   Negative margins are ignored by the island/grid-item boxes here, so shift
   with relative positioning. */
.tools-page .tool-workbench[data-generator-category="barcode"] .tool-create-input-grid .tool-code-type-field [data-island="beui-select-generator-type"] {
  position: relative;
  top: -2px;
}
.tools-page .tool-workbench[data-generator-category="barcode"] .tool-create-input-grid [data-action="render-code"] {
  position: relative;
  top: -1px;
}

.tools-page .tool-workbench[data-generator-category="barcode"] .tool-create-input-grid .tool-description {
  grid-column: 1;
  grid-row: 2;
}

.tools-page .tool-workbench[data-generator-category="barcode"] .tool-create-input-grid .tool-validation {
  grid-column: 2 / -1;
  grid-row: 2;
}

.tools-page .tool-workbench[data-generator-category="barcode"] .tool-create-input-grid .tool-lock {
  grid-column: 1 / -1;
  grid-row: 3;
}

.tools-page .tool-field {
  min-width: 0;
  gap: 7px;
}

.tools-page .tool-field>span {
  color: var(--tools-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: none;
}

.tools-page .tool-field :where(input, textarea, select),
.tools-page .tool-template-save-row input {
  border-color: var(--tools-line);
  border-radius: 12px;
  background: #0a0d13;
  color: var(--tools-text);
  box-shadow: none;
}

.tools-page .tool-field :where(input, textarea, select):hover,
.tools-page .tool-template-save-row input:hover {
  border-color: var(--tools-line-strong);
}

.tools-page .tool-field :where(input, textarea, select):focus,
.tools-page .tool-template-save-row input:focus {
  border-color: var(--tools-accent);
  box-shadow: 0 0 0 3px var(--tools-accent-soft);
}

.tools-page .tool-field textarea {
  min-height: 74px;
  font-family: inherit;
  font-size: max(0.94rem, 16px);
  line-height: 1.5;
}

.tools-page .tool-workbench[data-generator-category="barcode"] .tool-create-input-grid .tool-data-field textarea {
  min-height: 44px;
  height: 44px;
  resize: none;
}

.tools-page .tool-data-field {
  width: min(100%, 720px);
}

.tools-page .tool-description {
  max-width: 760px;
  margin: -3px 0 0;
  color: var(--tools-muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

.tools-page .tool-validation,
.tools-page .tool-status {
  min-height: 0;
  font-size: 0.86rem;
}

.tools-page .tool-validation:empty,
.tools-page .tool-status:empty {
  display: none;
}

.tools-page .tool-workbench[data-generator-category="qr"] .tool-data-field,
.tools-page .tool-workbench[data-generator-category="qr"] .tool-description,
.tools-page .tool-workbench[data-generator-category="qr"] .tool-validation {
  display: none;
}

.tools-page .tool-generator-studio {
  display: grid;
  grid-template-columns: minmax(0, 1.48fr) minmax(390px, 0.82fr);
  grid-template-rows: auto auto;
  align-items: start;
  gap: 14px;
  min-width: 0;
  min-height: 0;
  max-height: none !important;
  overflow: visible !important;
  padding: 0;
}

.tools-page [data-barcode-tool][data-generator-category="qr"] .tool-generator-studio {
  grid-template-columns: minmax(0, 1.48fr) minmax(390px, 0.82fr);
  grid-template-rows: auto auto;
  align-items: start;
}

.tools-page .tool-generator-studio>* {
  min-width: 0;
  max-width: 100%;
}

.tools-page .tool-preview-card {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: grid;
  grid-template-rows: minmax(360px, 1fr) auto;
  gap: 10px;
  min-height: clamp(520px, 64vh, 720px);
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.tools-page [data-barcode-tool][data-generator-category="qr"] .tool-preview-card,
.tools-page [data-barcode-tool][data-generator-category="qr"] .tool-generator-studio>.tool-preview-card {
  grid-column: 1;
  grid-row: 1 / span 2;
  grid-template-rows: auto auto;
  min-height: 0;
  height: auto;
  align-self: start;
  justify-items: start;
  gap: 8px;
  margin-top: 0;
  padding-left: clamp(14px, 2vw, 28px);
}

.tools-page [data-barcode-tool][data-generator-category="qr"] .tool-preview-stage {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  place-items: start;
  min-height: 0;
  padding: 0;
  width: 100%;
}

.tools-page [data-barcode-tool][data-generator-category="qr"] .tool-preview-card canvas {
  margin: 0;
  align-self: flex-start;
  justify-self: start;
}

.tools-page [data-barcode-tool][data-generator-category="qr"] .tool-preview-hint {
  text-align: start;
  margin: 0;
  max-width: min(100%, 540px);
}

.tools-page .tool-preview-hint {
  color: var(--tools-muted);
  font-size: 0.75rem;
  line-height: 1.4;
}

.tools-page .tool-preview-stage {
  position: relative;
  isolation: isolate;
  display: grid;
  min-width: 0;
  min-height: 0;
  place-items: center;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: clamp(18px, 3vw, 42px);
}

.tools-page .tool-preview-card canvas {
  position: relative;
  z-index: 1;
  display: block;
  width: auto;
  height: auto;
  max-width: min(100%, 660px);
  max-height: min(52vh, 530px);
  border-radius: 14px;
  box-shadow: 0 24px 55px rgba(0, 0, 0, 0.28);
  object-fit: contain;
  opacity: 1;
  transform: none;
}

.tools-page .tool-preview-card.is-fresh canvas {
  animation: tools-preview-settle 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.tools-page .tool-preview-hint {
  margin: 0;
  text-align: center;
}

.tools-page .tool-builder-card {
  grid-column: 2;
  display: grid;
  align-content: start;
  gap: 14px;
  max-height: none !important;
  overflow: visible !important;
  border: 1px solid var(--tools-line);
  border-radius: 18px;
  background: var(--tools-surface-raised);
  padding: clamp(14px, 1.7vw, 18px);
}

.tools-page .tool-builder-card[data-qr-builder] {
  grid-row: 1;
}

.tools-page [data-barcode-tool][data-generator-category="qr"] .tool-generator-studio [data-qr-builder] {
  grid-column: 2;
  grid-row: 1;
}

.tools-page .tool-builder-card[data-design-builder] {
  grid-row: 2;
}

.tools-page [data-barcode-tool][data-generator-category="qr"] .tool-generator-studio [data-design-builder] {
  grid-column: 2;
  grid-row: 2;
}

/* QR mode (desktop): move the "QR content" and "Design & print" builders up
   beside the Code type select so the whole control stack stays visible in the
   hero. The studio is flattened into the generate-panel grid (display:
   contents) so the input row and the builder column share the top row of the
   workbench — the two builders keep their stacked order in the right column,
   while the preview keeps its original left-column spot and height. Barcode
   mode and narrow viewports keep the original stacked layout untouched. */
@media (min-width: 1181px) {
  .tools-page [data-barcode-tool][data-generator-category="qr"] .tool-panel[data-tool-panel="generate"] {
    grid-template-columns: minmax(0, 1.72fr) minmax(390px, 0.78fr);
    grid-template-rows: auto auto auto auto auto auto;
    align-items: start;
    row-gap: 10px;
  }

  .tools-page [data-barcode-tool][data-generator-category="qr"] .tool-generator-studio {
    display: contents;
  }

  .tools-page [data-barcode-tool][data-generator-category="qr"] .tool-generator-studio[hidden] {
    display: none;
  }

  .tools-page [data-barcode-tool][data-generator-category="qr"] .tool-create-input-grid {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    justify-content: center;
    /* Match the preview card's content width (card width minus its inline
       padding) so the Code type select is exactly as wide as the QR. */
    width: calc(100% - clamp(28px, 4vw, 56px));
    margin-inline: auto;
    margin-top: -6px;
  }

  /* The QR preview is square and sized by min(62vh, 640px); mirror that so
     the select and the code are perfectly aligned edge to edge. */
  .tools-page [data-barcode-tool][data-generator-category="qr"] .tool-create-input-grid .tool-code-type-field {
    width: min(100%, 62vh, 640px);
  }

  .tools-page [data-barcode-tool][data-generator-category="qr"] .tool-create-input-grid .tool-code-type-field>span {
    text-align: center;
  }

  /* The beui bridge wraps the Update code button in a display:contents
     span, so target it by data-action instead of .button. */
  .tools-page [data-barcode-tool][data-generator-category="qr"] .tool-create-input-grid [data-action="render-code"] {
    display: none;
  }

  .tools-page [data-barcode-tool][data-generator-category="qr"] .tool-generator-studio>.tool-preview-card {
    grid-column: 1;
    grid-row: 2 / span 2;
    min-height: 0;
    align-self: start;
    padding-inline: clamp(14px, 2vw, 28px);
    /* Row 1 is sized by the taller "QR content" builder (198px) while the
       input grid is only ~61px tall with the Update button hidden. Pull
       the preview up by the difference so the QR sits right below the
       Code type select instead of trailing the builder, and the whole
       code stays above the fold. */
    margin-top: -141px;
  }

  /* Desktop QR mode: let the preview fill the hero column instead of the
     generic 660px/52vh cap so the empty space beside the builders is used.
     Kept short enough that the whole code fits above the fold at common
     desktop heights. The canvas itself renders at 720px, so it stays crisp
     at this size. */
  .tools-page [data-barcode-tool][data-generator-category="qr"] .tool-generator-studio>.tool-preview-card canvas {
    max-width: min(100%, 740px);
    max-height: min(62vh, 640px);
    align-self: center;
  }

  .tools-page [data-barcode-tool][data-generator-category="qr"] .tool-preview-hint {
    margin-inline: auto;
  }

  .tools-page [data-barcode-tool][data-generator-category="qr"] .tool-generator-studio [data-qr-builder] {
    grid-column: 2;
    grid-row: 1;
  }

  .tools-page [data-barcode-tool][data-generator-category="qr"] .tool-generator-studio [data-design-builder] {
    grid-column: 2;
    grid-row: 2 / span 2;
  }

  .tools-page [data-barcode-tool][data-generator-category="qr"] .tool-output-actions {
    grid-column: 1 / -1;
    grid-row: 4;
  }

  .tools-page [data-barcode-tool][data-generator-category="qr"] .tool-pro-funnel {
    grid-column: 1 / -1;
    grid-row: 5;
  }

  .tools-page [data-barcode-tool][data-generator-category="qr"] .tool-status {
    grid-column: 1 / -1;
    grid-row: 6;
  }
}

.tools-page .tool-workbench[data-generator-category="barcode"] .tool-builder-card[data-design-builder] {
  grid-row: 1 / span 2;
}

.tools-page .tool-builder-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.tools-page .tool-builder-head strong {
  color: var(--tools-text);
  font-family: inherit;
  font-size: 0.96rem;
  font-weight: 650;
}

.tools-page .tool-builder-head span,
.tools-page .tool-generator-studio .tool-builder-head span {
  display: block;
  max-width: 230px;
  color: var(--tools-muted);
  font-size: 0.75rem;
  line-height: 1.35;
  text-align: end;
  text-wrap: pretty;
}

.tools-page .tool-dynamic-fields,
.tools-page .tool-option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-height: none !important;
  overflow: visible !important;
  padding: 0;
}

.tools-page .tool-dynamic-fields .tool-field:first-child,
.tools-page .tool-dynamic-fields .tool-field:has(textarea),
.tools-page .tool-design-swatches-root,
.tools-page .tool-size-sliders-root {
  grid-column: 1 / -1;
}

.tools-page .tool-design-swatches-root {
  min-width: 0;
  padding-block-end: 2px;
}

.tools-page .tool-design-swatches-root>div {
  gap: 14px;
}

.tools-page .tool-check-field,
.tools-page .tool-file-button-compact {
  min-height: 42px;
  border-color: var(--tools-line);
  border-radius: 12px;
  background: #0a0d13;
  color: var(--tools-text);
}

.tools-page .tool-check-field:hover,
.tools-page .tool-file-button-compact:hover {
  border-color: var(--tools-line-strong);
}

.tools-page .tool-size-sliders-root {
  --active: var(--tools-accent);
  --background: #0a0d13;
  --foreground: #fff;
  --muted-foreground: #fff;
  --color-foreground: #fff;
  --color-muted-foreground: #fff;
  --border: rgba(240, 244, 255, 0.12);
  --focus-ring: var(--tools-accent-bright);
  --color-accent: var(--tools-accent);
  min-width: 0;
  color: #fff;
}

.tools-page .tool-size-sliders-root .absolute.inset-0.flex.justify-between .rounded-full {
  background-color: #fff !important;
  opacity: 1 !important;
}

.tools-page .tool-fluid-slider-stack {
  display: grid;
  gap: 10px;
}

.tools-page .tool-fluid-slider-field {
  min-width: 0;
  border: 1px solid var(--tools-line);
  border-radius: 13px;
  background: #0a0d13;
  padding: 10px 12px;
}

.tools-page .tool-output-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding-block: 2px;
}

.tools-page .tool-output-actions .button {
  min-height: 44px;
  min-width: 150px;
  border-radius: 12px;
}

.tools-page .tool-pro-funnel {
  display: grid;
  grid-template-columns: minmax(250px, 0.58fr) minmax(0, 1.42fr);
  gap: clamp(18px, 3vw, 36px);
  min-width: 0;
  margin-block-start: 4px;
  border: 1px solid rgba(231, 196, 138, 0.22);
  border-radius: 18px;
  background:
    radial-gradient(circle at 0 0, rgba(231, 196, 138, 0.12), transparent 38%),
    #0c0f16;
  padding: clamp(16px, 2vw, 22px);
}

.tools-page .tool-pro-copy {
  align-self: start;
  min-width: 0;
}

.tools-page .tool-pro-copy h2 {
  max-width: 360px;
  margin: 0;
  color: var(--tools-text);
  font-family: inherit;
  font-size: clamp(1.2rem, 2vw, 1.65rem);
  font-weight: 650;
  letter-spacing: -0.025em;
  line-height: 1.12;
  text-wrap: balance;
}

.tools-page .tool-pro-copy p {
  max-width: 430px;
  margin: 10px 0 0;
  color: var(--tools-muted);
  font-size: 0.88rem;
  line-height: 1.55;
  text-wrap: pretty;
}

.tools-page .tool-pro-controls {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
}

.tools-page .tool-templates-root,
.tools-page .tool-bulk-panel {
  min-width: 0;
}

.tools-page .tool-bulk-panel {
  border-color: var(--tools-line);
  border-radius: 16px;
  background: var(--tools-surface-raised);
  padding: 13px 14px;
}

.tools-page .tool-bulk-toggle {
  min-height: 48px;
}

.tools-page .tool-bulk-toggle strong {
  color: var(--tools-text);
  font-family: inherit;
  font-weight: 650;
}

.tools-page .tool-bulk-toggle em {
  color: var(--tools-muted);
  font-size: 0.8rem;
}

.tools-page .tool-bulk-toggle b,
.tools-page .tool-mini-pill {
  border: 1px solid rgba(231, 196, 138, 0.25);
  background: var(--tools-accent-soft);
  color: var(--tools-accent-bright) !important;
}

.tools-page .tool-bulk-body {
  gap: 14px;
  min-width: 0;
  padding-block-start: 12px;
}

.tools-page .tool-bulk-presets,
.tools-page .tool-bulk-input-grid,
.tools-page .tool-bulk-manual-grid {
  min-width: 0;
}

.tools-page .tool-bulk-presets button,
.tools-page .tool-bulk-preview,
.tools-page .tool-template-item {
  min-width: 0;
  overflow-wrap: anywhere;
}

.tools-page .tool-scan-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(250px, 0.45fr);
  gap: 14px;
}

.tools-page .tool-camera {
  min-height: clamp(360px, 55vh, 640px);
  border: 1px solid var(--tools-line);
  border-radius: 18px;
  background: #040508;
}

.tools-page .tool-camera video {
  min-height: inherit;
}

.tools-page .tool-camera-empty {
  color: var(--tools-muted);
}

.tools-page .tool-actions-stack {
  align-content: start;
  gap: 9px;
}

.tools-page .tool-actions-stack>*,
.tools-page .tool-actions-stack .button {
  width: 100%;
  min-height: 44px;
  border-radius: 12px;
}

.tools-page .tool-result {
  max-height: none;
  overflow: visible;
}

.tools-page .tool-result-head,
.tools-page .tool-result-block,
.tools-page .tool-empty-state,
.tools-page .tool-lock {
  border-color: var(--tools-line);
  border-radius: 14px;
  background: var(--tools-surface-raised);
}

.tools-page .tools-seo-section,
.tools-page .tools-answer-section {
  position: relative;
  z-index: 1;
  padding-block: clamp(50px, 7vw, 88px);
}

.tools-page .tools-seo-section {
  border-block-start: 1px solid var(--tools-line);
}

.tools-page .section-heading,
.tools-page .tools-answer-grid>div:first-child {
  max-width: 760px;
}

.tools-page .section-kicker {
  color: var(--tools-accent-bright);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
}

.tools-page .section-title {
  color: var(--tools-text);
  font-family: inherit;
  font-size: clamp(1.8rem, 3.5vw, 3.2rem);
  font-weight: 650;
  letter-spacing: -0.045em;
  line-height: 1.03;
  text-wrap: balance;
}

.tools-page .section-copy {
  max-width: 680px;
  color: var(--tools-muted);
  line-height: 1.6;
  text-wrap: pretty;
}

.tools-page .tools-seo-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.tools-page .tools-seo-card,
.tools-page .tools-answer-list details {
  min-width: 0;
  border-color: var(--tools-line);
  border-radius: 16px;
  background: var(--tools-surface);
  box-shadow: none;
  overflow-wrap: anywhere;
}

.tools-page .tools-seo-card {
  padding: 18px;
}

.tools-page .tools-seo-card span {
  color: var(--tools-accent-bright);
}

.tools-page .tools-seo-card h3,
.tools-page .tools-answer-list summary {
  color: var(--tools-text);
  font-family: inherit;
}

.tools-page .tools-seo-card p,
.tools-page .tools-answer-list p {
  color: var(--tools-muted);
}

.tools-page .tools-seo-card a {
  color: var(--tools-accent-bright);
}

.tools-page .site-footer {
  border-block-start: 1px solid var(--tools-line);
  background: #05070a;
}

@keyframes tools-preview-settle {
  from {
    opacity: 0.64;
    transform: scale(0.982);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (max-width: 1180px) {
  .tools-page .tool-generator-studio {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
  }

  .tools-page [data-barcode-tool][data-generator-category="qr"] .tool-generator-studio {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
  }

  .tools-page .tool-preview-card,
  .tools-page .tool-builder-card,
  .tools-page .tool-builder-card[data-qr-builder],
  .tools-page .tool-builder-card[data-design-builder],
  .tools-page .tool-workbench[data-generator-category="barcode"] .tool-builder-card[data-design-builder] {
    grid-column: 1;
    grid-row: auto;
  }

  .tools-page [data-barcode-tool][data-generator-category="qr"] .tool-generator-studio>.tool-preview-card,
  .tools-page [data-barcode-tool][data-generator-category="qr"] .tool-generator-studio [data-qr-builder],
  .tools-page [data-barcode-tool][data-generator-category="qr"] .tool-generator-studio [data-design-builder] {
    grid-column: 1;
    grid-row: auto;
  }

  .tools-page [data-barcode-tool][data-generator-category="qr"] .tool-generator-studio>.tool-preview-card {
    min-height: 0;
    align-self: start;
  }

  .tools-page .tool-preview-card {
    min-height: clamp(480px, 62vh, 680px);
  }

  .tools-page .tools-seo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {

  .tools-page .tool-pro-funnel,
  .tools-page .tool-scan-grid,
  .tools-page .tools-answer-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .tools-page .tool-scan-grid {
    gap: 10px;
  }

  .tools-page .tool-camera {
    min-height: clamp(300px, 48vh, 520px);
  }

  .tools-page .tool-actions-stack {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .tools-page .container {
    width: min(100%, calc(100% - 20px));
  }

  .tools-page .nav-links {
    display: none;
  }

  .tools-page .tool-workbench {
    border-radius: 20px;
  }

  .tools-page .tool-header-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
  }

  .tools-page .tool-workbench-kicker {
    grid-column: 1;
    grid-row: 1;
  }

  .tools-page .tool-header-meta {
    grid-column: 2;
    grid-row: 1;
    justify-content: flex-end;
  }

  .tools-page .tool-tabs-host {
    grid-column: 1 / -1;
    grid-row: 2;
    width: max-content;
    max-width: 100%;
    justify-self: center;
  }

  .tools-page .tool-create-input-grid,
  .tools-page .tool-workbench[data-generator-category="barcode"] .tool-create-input-grid,
  .tools-page .tool-dynamic-fields,
  .tools-page .tool-option-grid,
  .tools-page .tool-bulk-presets,
  .tools-page .tool-bulk-input-grid,
  .tools-page .tool-bulk-manual-grid,
  .tools-page .tool-bulk-options {
    grid-template-columns: minmax(0, 1fr);
  }

  .tools-page .tool-create-input-grid .tool-code-type-field,
  .tools-page .tool-create-input-grid .tool-data-field,
  .tools-page .tool-create-input-grid [data-action="render-code"],
  .tools-page .tool-create-input-grid .tool-description,
  .tools-page .tool-create-input-grid .tool-validation,
  .tools-page .tool-create-input-grid .tool-lock,
  .tools-page .tool-workbench[data-generator-category="barcode"] .tool-create-input-grid .tool-code-type-field,
  .tools-page .tool-workbench[data-generator-category="barcode"] .tool-create-input-grid .tool-data-field,
  .tools-page .tool-workbench[data-generator-category="barcode"] .tool-create-input-grid [data-action="render-code"],
  .tools-page .tool-workbench[data-generator-category="barcode"] .tool-create-input-grid .tool-description,
  .tools-page .tool-workbench[data-generator-category="barcode"] .tool-create-input-grid .tool-validation,
  .tools-page .tool-workbench[data-generator-category="barcode"] .tool-create-input-grid .tool-lock {
    grid-column: 1;
    grid-row: auto;
  }

  .tools-page .tool-create-input-grid [data-action="render-code"] {
    width: 100%;
  }

  .tools-page .tool-workbench[data-generator-category="barcode"] .tool-create-input-grid .tool-data-field textarea {
    min-height: 56px;
    height: 56px;
  }

  .tools-page .tool-preview-card {
    grid-template-rows: minmax(280px, 1fr) auto;
    min-height: 390px;
    padding: 0;
  }

  .tools-page .tool-preview-stage {
    padding: 16px;
  }

  .tools-page .tool-builder-head {
    display: grid;
  }

  .tools-page .tool-builder-head span,
  .tools-page .tool-generator-studio .tool-builder-head span {
    max-width: none;
    text-align: start;
  }

  .tools-page .tool-output-actions .button {
    flex: 1 1 100%;
    width: 100%;
  }

  .tools-page .tool-actions-stack {
    grid-template-columns: minmax(0, 1fr);
  }

  .tools-page .tools-seo-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 440px) {
  .tools-page .nav-actions .nav-button-secondary {
    display: none;
  }

  .tools-page .tool-header-meta {
    justify-content: flex-end;
  }

  .tools-page .tool-panel {
    padding: 11px;
  }

  .tools-page .tool-pro-funnel {
    padding: 13px;
  }

  .tools-page .tool-template-save-row,
  .tools-page .tool-template-item,
  .tools-page .tool-bulk-toggle {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {

  .tools-page *,
  .tools-page *::before,
  .tools-page *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}