.tag--tool { background: rgba(45, 147, 253, 0.14); color: var(--color-accent-strong) }
[data-theme="dark"] .tag--tool {
  background: rgba(45, 147, 253, 0.16);
  color: var(--color-accent-strong);
}
.card__image--tool {
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 30% 30%, var(--color-accent-subtle), transparent 60%), var(--color-bg-subtle);
}
.card__image--tool-cover { object-fit: contain; padding: var(--space-2) }
.card__image--tool::before {
  content: '';
  width: 96px;
  height: 96px;
  border-radius: var(--radius-lg);
  background: linear-gradient(90deg, transparent 40%, currentColor 42%, currentColor 58%, transparent 60%), linear-gradient(90deg, transparent 40%, currentColor 42%, currentColor 58%, transparent 60%), repeating-linear-gradient(0deg, transparent 0 8px, rgba(127, 136, 148, 0.35) 8px 10px);
  background-position: center;
  color: var(--color-text-muted);
}
.tool-frame {
  max-width: 920px;
  margin: 0 auto var(--space-12);
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.tool-mount { padding: var(--space-6) }
.btn--sm { padding: var(--space-2) var(--space-4); font-size: var(--text-xs) }
.btn.is-loading { opacity: 0.7; pointer-events: none }
.btn.is-error { background: #d64545; border-color: #d64545; color: #fff }
.qr-icon { flex: 0 0 auto; display: block }
.qr-card {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.qr-card__head { display: flex; align-items: center; gap: var(--space-3) }
.qr-card__title {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}
.qr-stepnum {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: var(--radius-full);
  background: var(--color-accent-subtle);
  color: var(--color-accent-strong);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}
.qr-lead { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted) }
.qr-hint { margin: 0; font-size: var(--text-xs); color: var(--color-text-muted) }
.qr-hint--warn { color: #b45309; font-weight: var(--weight-medium) }
[data-theme="dark"] .qr-hint--warn { color: #fbbf24 }
.qr-privacy {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.qr-privacy .qr-icon { color: var(--color-brand) }
.qr-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: var(--space-2);
}
.qr-type {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
  font: inherit;
  font-size: var(--text-sm);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-default), background var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default);
}
.qr-type--wide { grid-column: auto }
.qr-type:hover { border-color: var(--color-border); color: var(--color-text) }
.qr-type.is-active {
  border-color: var(--color-accent);
  background: var(--color-accent-subtle);
  color: var(--color-text);
  font-weight: var(--weight-medium);
}
.qr-type__icon { display: grid; place-items: center; color: var(--color-text-muted) }
.qr-type.is-active .qr-type__icon { color: var(--color-accent-strong) }
.qr-type__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.qr-fields { display: grid; gap: var(--space-4) }
.qr-field { display: grid; gap: var(--space-2) }
.qr-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
}
.qr-req { color: var(--color-accent-strong); font-weight: var(--weight-semibold) }
.qr-control { display: flex; align-items: stretch; gap: var(--space-2) }
.qr-control__actions { display: flex; flex-wrap: wrap; gap: var(--space-2) }
.qr-mini {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--text-xs);
  cursor: pointer;
  white-space: nowrap;
}
.qr-mini:hover {
  color: var(--color-text);
  border-color: var(--color-text-secondary);
  border-style: solid;
}
.qr-input, .qr-select, .sl-input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast) var(--ease-default), box-shadow var(--duration-fast) var(--ease-default);
}
.qr-input:focus, .qr-select:focus, .sl-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-subtle);
}
.qr-field--invalid .qr-input, .sl-field--invalid .sl-input, .qr-field--invalid .sl-input { border-color: #d64545 }
.qr-field--invalid .qr-input:focus, .sl-field--invalid .sl-input:focus { box-shadow: 0 0 0 3px rgba(214, 69, 69, 0.18) }
textarea.qr-input {
  resize: vertical;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
}
.qr-counter {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.qr-error, .sl-error {
  margin: 0;
  min-height: 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: #d64545;
}
.qr-error:not(:empty), .sl-error:not(:empty) { min-height: 1rem }
.sl-mail {
  display: inline;
  margin-left: 0.25em;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-family: var(--font-mono);
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.sl-mail:hover { color: var(--color-accent) }
.sl-mail:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px }
.qr-design {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-bg-subtle);
}
.qr-design__summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  cursor: pointer;
  list-style: none;
}
.qr-design__summary::-webkit-details-marker { display: none }
.qr-design__summarytext { flex: 1 }
.qr-design__summaryicon { display: grid; place-items: center; color: var(--color-text-muted) }
.qr-design__chevron {
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--color-text-muted);
  border-bottom: 2px solid var(--color-text-muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--duration-fast) var(--ease-default);
}
.qr-design[open] .qr-design__chevron { transform: rotate(225deg) translate(0, 0) }
.qr-design__body { display: grid; gap: var(--space-5); padding: 0 var(--space-4) var(--space-4) }
.qr-group {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.qr-legend {
  padding: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}
.qr-presets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: var(--space-2);
}
.qr-preset--icon { place-items: center; padding: var(--space-2); color: inherit; text-align: center }
.qr-preset--icon:hover { transform: translateY(-1px) }
.qr-preset__thumb, .qr-opt__thumb {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: #ffffff;
}
.qr-preset--icon .qr-preset__thumb { box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06) }
.qr-preset {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font: inherit;
  font-size: var(--text-xs);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-default), box-shadow var(--duration-fast) var(--ease-default);
}
.qr-preset:hover { border-color: var(--color-border); color: var(--color-text) }
.qr-preset.is-active {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-subtle);
  color: var(--color-text);
}
.qr-preset__thumb, .qr-opt__thumb {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: #ffffff;
}
.qr-preset__thumb svg, .qr-opt__thumb svg {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
}
.qr-preset__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: var(--weight-medium);
}
.qr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: var(--space-2);
}
.qr-grid--flip { grid-template-columns: repeat(2, 1fr) }
.qr-opt {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font: inherit;
  font-size: var(--text-xs);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-default), box-shadow var(--duration-fast) var(--ease-default), transform var(--duration-fast) var(--ease-default);
}
.qr-opt:hover { border-color: var(--color-border); color: var(--color-text) }
.qr-opt.is-active {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-subtle);
  color: var(--color-text);
}
.qr-opt--icon { padding: var(--space-2) }
.qr-opt--icon .qr-opt__thumb { box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06) }
.qr-opt--icon:hover { transform: translateY(-1px) }
.qr-opt__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: var(--weight-medium);
}
.qr-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2) }
.qr-mode {
  display: grid;
  place-items: center;
  padding: var(--space-2);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-default), box-shadow var(--duration-fast) var(--ease-default), transform var(--duration-fast) var(--ease-default);
}
.qr-mode:hover { border-color: var(--color-border); transform: translateY(-1px) }
.qr-mode.is-active {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-subtle);
}
.qr-mode__icon {
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: #ffffff;
}
.qr-mode__icon svg { display: block; width: 100%; height: 100%; aspect-ratio: 1 / 1 }
.qr-colorslot { display: grid; gap: var(--space-3); margin-top: var(--space-1) }
.qr-legend--sub { margin-top: var(--space-2); color: var(--color-text-secondary) }
.qr-slider {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.qr-slider__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}
.qr-slider__name {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}
.qr-slider__pct {
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--color-accent);
}
.qr-slider__ticks {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}
.qr-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 1.5rem;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.qr-range::-webkit-slider-runnable-track {
  height: 0.5rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent) var(--qr-track, 33%), var(--color-border-subtle) var(--qr-track, 33%), var(--color-border-subtle) 100%);
}
.qr-range::-moz-range-track {
  height: 0.5rem;
  border-radius: 999px;
  background: var(--color-border-subtle);
}
.qr-range::-moz-range-progress {
  height: 0.5rem;
  border-radius: 999px;
  background: var(--color-accent);
}
.qr-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: -0.375rem;
  border: 2px solid var(--color-surface);
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.3);
}
.qr-range::-moz-range-thumb {
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--color-surface);
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.3);
}
.qr-range:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
  border-radius: 999px;
}
.qr-flipgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3) }
.qr-flipcol { display: grid; gap: var(--space-2); min-width: 0 }
.qr-flipcol__label {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
}
.qr-colorrow { display: grid; gap: var(--space-2) }
.qr-colorrow__main { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap }
.qr-colorrow__main .qr-label { flex: 1 1 100% }
.qr-colorpick { display: flex; align-items: center; gap: var(--space-2) }
.qr-color {
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  cursor: pointer;
}
.qr-color::-webkit-color-swatch-wrapper { padding: 3px }
.qr-color::-webkit-color-swatch { border: none; border-radius: var(--radius-sm) }
.qr-color::-moz-color-swatch { border: none; border-radius: var(--radius-sm) }
.qr-hex {
  width: 6.5rem;
  padding: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.qr-hex:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-subtle);
}
.qr-palette { display: flex; flex-wrap: wrap; gap: var(--space-2) }
.qr-palette__dot {
  width: 1.4rem;
  height: 1.4rem;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--dot);
  cursor: pointer;
}
.qr-palette__dot.is-active { box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-accent) }
.qr-logo-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap }
.qr-logo-chip {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--text-2xl);
  overflow: hidden;
  cursor: pointer;
}
.qr-logo-chip img { width: 100%; height: 100%; object-fit: contain }
.qr-logo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) }
.qr-checkwrap {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  cursor: pointer;
}
.qr-check { width: 1rem; height: 1rem; accent-color: var(--color-accent) }
.qr-file {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.qr-sizes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2) }
.qr-size {
  display: grid;
  gap: 2px;
  padding: var(--space-2);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font: inherit;
  font-size: var(--text-xs);
  text-align: center;
  cursor: pointer;
}
.qr-size.is-active {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-subtle);
  color: var(--color-text);
}
.qr-size__px { font-weight: var(--weight-semibold) }
.qr-size__hint { color: var(--color-text-muted) }
.qr-side { display: grid; gap: var(--space-4); min-width: 0 }
.qr-panelbox {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.qr-preview {
  display: grid;
  place-items: center;
  min-height: 240px;
  padding: var(--space-4);
  background: linear-gradient(45deg, var(--color-bg-subtle) 25%, transparent 25%, transparent 75%, var(--color-bg-subtle) 75%), linear-gradient(45deg, var(--color-bg-subtle) 25%, transparent 25%, transparent 75%, var(--color-bg-subtle) 75%) 8px 8px;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
}
.qr-preview svg {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  image-rendering: pixelated;
}
.qr-preview__empty {
  display: grid;
  place-items: center;
  gap: var(--space-2);
  max-width: 220px;
  margin: 0 auto;
  padding: var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
}
.qr-preview__empty svg { width: 30px; height: 30px; opacity: 0.8 }
.qr-preview__empty p { margin: 0; font-size: var(--text-sm); line-height: 1.45 }
.qr-preview__empty--warn { color: #d64545; font-weight: var(--weight-medium) }
.qr-meters { display: grid; gap: var(--space-2) }
.qr-meter {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}
.qr-meter__dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-border);
}
.qr-meter.is-ok .qr-meter__dot { background: var(--color-brand) }
.qr-meter.is-warn .qr-meter__dot { background: #f59e0b }
.qr-meter.is-bad .qr-meter__dot { background: #d64545 }
.qr-meter.is-idle .qr-meter__dot, .qr-meter:not([class*='is-']) .qr-meter__dot { background: var(--color-border) }
.qr-contentinfo {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-code-bg);
}
.qr-contentinfo__label { flex: 0 0 auto; font-size: var(--text-xs); color: var(--color-text-muted) }
.qr-contentinfo__value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}
.qr-actions { display: grid; gap: var(--space-3) }
.qr-actions__downloads {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}
.qr-btn, .qr-actions__downloads .btn { width: 100%; justify-content: center; text-align: center }
.qr-caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-height: 1.25rem;
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}
.qr-caption__ok { color: var(--color-brand); font-weight: var(--weight-medium) }
.qr-verifynote {
  min-height: 1.25rem;
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}
.qr-verifynote.is-ok { color: var(--color-brand); font-weight: var(--weight-medium) }
.qr-verifynote.is-bad { color: var(--color-danger, #c0392b); font-weight: var(--weight-medium) }
.qr-verifynote.is-warn { color: var(--color-warning, #b26a00) }
#qr-verify.is-ok { border-color: var(--color-brand) }
.sl-app { display: grid; gap: var(--space-5); align-items: start }
.sl-card {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.sl-steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.sl-step {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.sl-step__num {
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: 0.7rem;
  font-weight: var(--weight-semibold);
}
.sl-step.is-active { color: var(--color-text) }
.sl-step.is-active .sl-step__num {
  border-color: var(--color-accent);
  background: var(--color-accent-subtle);
  color: var(--color-accent-strong);
}
.sl-step.is-done .sl-step__num {
  border-color: var(--color-brand);
  background: var(--color-brand-subtle);
  color: var(--color-on-brand);
}
.sl-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
}
.sl-help { margin: 0; font-size: var(--text-xs); color: var(--color-text-muted) }
.sl-inputrow { display: flex; align-items: stretch; gap: var(--space-2) }
.sl-counter {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.sl-samples { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) }
.sl-chip {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-secondary);
  font: inherit;
  font-size: var(--text-xs);
  cursor: pointer;
}
.sl-chip:hover {
  border-color: var(--color-text-secondary);
  color: var(--color-text);
  background: var(--color-surface-hover);
}
.sl-slugbox {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0 var(--space-2) 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  transition: border-color var(--duration-fast) var(--ease-default), box-shadow var(--duration-fast) var(--ease-default);
}
.sl-slugbox:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-subtle);
}
.sl-field--invalid .sl-slugbox { border-color: #d64545 }
.sl-slugbox__prefix {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  white-space: nowrap;
}
.sl-input--slug {
  flex: 1;
  min-width: 0;
  padding-left: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-mono);
}
.sl-input--slug:focus { box-shadow: none }
.sl-iconbtn {
  flex: 0 0 auto;
  padding: var(--space-1) var(--space-2);
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--color-code-bg);
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--text-xs);
  cursor: pointer;
}
.sl-iconbtn:hover { color: var(--color-text) }
.sl-slugstatus {
  margin: 0;
  min-height: 1rem;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.sl-slugstatus.is-available { color: var(--color-brand); font-weight: var(--weight-medium) }
.sl-slugstatus.is-checking { color: var(--color-text-muted) }
.sl-slugstatus.is-reserved, .sl-slugstatus.is-invalid, .sl-slugstatus.is-error {
  color: #d64545;
  font-weight: var(--weight-medium);
}
.sl-togglebox {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
}
.sl-togglebox.is-active { border-color: var(--color-accent); background: var(--color-accent-subtle) }
.sl-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text);
  cursor: pointer;
}
.sl-toggle input { width: 1rem; height: 1rem; accent-color: var(--color-accent) }
.sl-savings {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
}
.sl-savings.is-save { border-color: var(--color-brand); background: var(--color-brand-subtle) }
.sl-savings.is-grow { border-color: #f59e0b; background: rgba(245, 158, 11, 0.12) }
.sl-savings__head { display: flex; align-items: center; gap: var(--space-2) }
.sl-savings__icon {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  border-radius: var(--radius-full);
  background: var(--color-text-muted);
}
.sl-savings.is-save .sl-savings__icon { background: var(--color-brand) }
.sl-savings.is-grow .sl-savings__icon { background: #f59e0b }
.sl-savings__text {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text);
}
.sl-savings__bar {
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-code-bg);
  overflow: hidden;
}
.sl-savings__fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--color-text-muted);
  transition: width var(--duration-normal) var(--ease-default);
}
.sl-savings.is-save .sl-savings__fill { background: var(--color-brand) }
.sl-savings.is-grow .sl-savings__fill { background: #f59e0b }
.sl-savings__note { margin: 0; font-size: var(--text-xs); color: var(--color-text-muted) }
.sl-submit, .sl-again { justify-content: center }
.sl-perks {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.sl-perks li { display: flex; align-items: flex-start; gap: var(--space-2) }
.sl-perks li::before {
  content: '';
  flex: 0 0 auto;
  width: 0.9rem;
  height: 0.9rem;
  margin-top: 0.15rem;
  border-radius: var(--radius-full);
  background: var(--color-brand-subtle);
  box-shadow: inset 0 0 0 1px var(--color-brand);
}
.sl-result {
  display: grid;
  align-content: start;
  min-height: 200px;
  padding: var(--space-5);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.sl-result__empty {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: var(--space-2);
  text-align: center;
}
.sl-result__badge {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: var(--radius-full);
  background: var(--color-accent-subtle);
  color: var(--color-accent-strong);
}
.sl-result__title {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}
.sl-result__text {
  margin: 0;
  max-width: 34ch;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.sl-result__preview {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-accent-strong);
  word-break: break-all;
}
.sl-done { display: grid; gap: var(--space-3) }
.sl-done__badge {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-brand);
}
.sl-done__check {
  position: relative;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: var(--radius-full);
  background: var(--color-brand);
}
.sl-done__check::after {
  content: '';
  position: absolute;
  top: 0.28rem;
  left: 0.36rem;
  width: 0.3rem;
  height: 0.55rem;
  border: 2px solid var(--color-on-brand);
  border-top: 0;
  border-left: 0;
  transform: rotate(42deg);
}
.sl-done.is-grow .sl-done__badge { color: #b45309 }
.sl-done__title {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}
.sl-done__title:focus { outline: none }
.sl-done__note { margin: 0; font-size: var(--text-xs); color: var(--color-text-muted) }
.sl-linkbox {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding: var(--space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-code-bg);
}
.sl-linkbox__url {
  flex: 1 1 12rem;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text);
  word-break: break-all;
}
.sl-copy { flex: 0 0 auto }
.sl-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
  text-align: center;
}
.sl-stat { display: grid; gap: 2px; min-width: 0 }
.sl-stat__value {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.sl-stat__label { font-size: var(--text-xs); color: var(--color-text-muted) }
.sl-qr { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-4) }
.sl-qr__box {
  flex: 0 0 auto;
  padding: var(--space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: #ffffff;
}
.sl-qr__img { display: block; width: 180px; max-width: 100%; height: 180px; image-rendering: pixelated }
.sl-qr__info {
  flex: 1 1 12rem;
  display: grid;
  align-content: start;
  gap: var(--space-2);
  min-width: 0;
}
.sl-qr__title {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}
.sl-qr__text { margin: 0; font-size: var(--text-xs); color: var(--color-text-muted) }
.sl-qr__actions { display: flex; flex-wrap: wrap; gap: var(--space-2) }
.sl-details {
  padding: var(--space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
}
.sl-details summary {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  cursor: pointer;
}
.sl-dl {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2) var(--space-3);
  margin: var(--space-3) 0 0;
  font-size: var(--text-xs);
}
.sl-dl dt { color: var(--color-text-muted) }
.sl-dl dd {
  margin: 0;
  min-width: 0;
  font-family: var(--font-mono);
  color: var(--color-text-secondary);
  word-break: break-all;
}
.sl-note {
  margin: 0;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.sl-copy.is-error { background: #d64545; border-color: #d64545; color: #ffffff }
@media (min-width: 900px) {
  .qr-app { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px) }
  .sl-app { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px) }
  .qr-side { position: sticky; top: calc(var(--header-height) + var(--space-4)) }
}
@media (max-width: 899px) {
  .qr-flipgrid { grid-template-columns: 1fr }
  .qr-actions__downloads { grid-template-columns: repeat(3, 1fr) }
  .sl-linkbox { flex-direction: column; align-items: stretch }
  .sl-copy { justify-content: center }
}
@media (max-width: 480px) {
  .sl-dl { grid-template-columns: 1fr }
  .sl-qr { flex-direction: column; align-items: stretch }
  .sl-qr__box { flex: 0 0 auto; max-width: 100%; width: 100%; display: flex; justify-content: center }
  .sl-qr__img { width: 100%; max-width: 180px; height: auto; aspect-ratio: 1 / 1 }
  .sl-qr__actions .btn { flex: 1 1 100%; justify-content: center }
}
@media (prefers-reduced-motion: reduce) {
  .qr-type, .qr-preset, .qr-opt, .qr-size, .qr-palette__dot, .qr-design__chevron, .sl-savings__fill, .sl-chip, .btn { transition: none }
}