.qr-workspace { padding-block: clamp(1rem, 3vw, 2.5rem); }
.qr-top, .qr-top-links, .qr-inline, .qr-manager-heading {
  display: flex; align-items: center; flex-wrap: wrap; gap: .7rem;
}
.qr-top, .qr-manager-heading { justify-content: space-between; }
.qr-top { padding-bottom: 1rem; border-bottom: 1px solid var(--ink); }
.qr-brand img { width: 1.5rem; height: 1.5rem; }
.button-google {
  min-height: 2.9rem;
  padding-inline: 12px;
  gap: 10px;
  border-color: #747775;
  border-radius: 999px;
  color: #1f1f1f;
  box-shadow: 3px 3px 0 var(--ink);
  font-weight: 750;
}
.button-google:hover { border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink), 0 0 0 3px var(--lavender); }
.button-google img { flex: none; }
.qr-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1.1rem;
  margin: 1rem 0; padding: clamp(1rem, 4vw, 2.8rem);
  border: 1px solid var(--ink); border-radius: clamp(1rem, 2.5vw, 1.6rem);
  background: linear-gradient(112deg, var(--paper) 68%, var(--lavender) 68%);
}
.qr-hero h1 { font: 400 clamp(1.8rem, 7vw, 5.2rem)/1 var(--display); letter-spacing: -.075em; }
.qr-hero h1 span { display: inline; margin: 0; }
.qr-hero p { margin-top: .85rem; max-width: 42ch; font-weight: 650; }
.qr-hero-mark {
  width: clamp(3.25rem, 10vw, 7rem); aspect-ratio: 1; display: grid; place-items: center;
  border: 1px solid var(--ink); border-radius: .8rem; background: var(--paper); box-shadow: 4px 4px var(--ink);
}
.qr-hero-mark img { width: 62%; }
.qr-generator { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); grid-template-areas: "editor preview" "custom preview"; align-items: start; gap: .9rem; }
.qr-card { min-width: 0; border: 1px solid var(--ink); border-radius: 1rem; padding: clamp(1rem, 3vw, 1.7rem); }
.qr-editor { grid-area: editor; display: grid; gap: .85rem; }
.qr-custom { grid-area: custom; display: grid; gap: .85rem; }
.qr-preview { grid-area: preview; display: grid; align-content: start; gap: .8rem; background: var(--lavender); }
.qr-card h2 { font-size: clamp(1.12rem, 2.1vw, 1.6rem); margin: 0; }
.qr-heading p { margin-top: .25rem; font-size: .9rem; }
.qr-pills {
  display: flex; flex-wrap: wrap; gap: .45rem; width: fit-content; max-width: 100%;
}
.qr-pills .button { border-radius: 999px; }
.qr-pills .button[aria-pressed="true"] { background: var(--lavender); }
.qr-fields { display: grid; gap: .75rem; min-width: 0; }
.qr-field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.qr-field { display: grid; gap: .28rem; min-width: 0; font-weight: 700; font-size: .9rem; }
.qr-field small, .qr-hint { font-size: .82rem; font-weight: 450; }
.qr-field input, .qr-field textarea, .qr-field select {
  width: 100%; min-width: 0; min-height: 2.7rem; padding: .5rem .62rem;
  border: 1px solid var(--ink); border-radius: .5rem; background: var(--paper); color: var(--ink); font: inherit; font-weight: 450;
}
.qr-field textarea { resize: vertical; }
.qr-field input[type="file"] { border-style: dashed; }
.qr-check { display: flex; align-items: center; gap: .5rem; font-size: .9rem; font-weight: 700; }
.qr-check input { accent-color: var(--ink); width: 1.1rem; height: 1.1rem; }
.qr-color { display: grid; grid-template-columns: 2.7rem minmax(0, 1fr); gap: .4rem; }
.qr-color input[type="color"] { padding: .25rem; cursor: pointer; }
.qr-color input:not([type]) { font-family: var(--mono); font-weight: 600; }
.qr-stage { position: relative; display: grid; place-items: center; width: min(100%, 20rem); aspect-ratio: 1; margin: .25rem auto; overflow: hidden; background: var(--paper); border: 1px solid var(--ink); border-radius: .8rem; box-shadow: 4px 4px var(--ink); }
.qr-frame { width: 100%; height: 100%; }
.qr-frame svg { display: block; width: 100%; height: 100%; }
.qr-empty { position: absolute; width: 23%; opacity: .35; }
.qr-encoded { font: 650 .83rem var(--mono); overflow-wrap: anywhere; text-align: center; }
.qr-downloads { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.qr-downloads .button { width: 100%; }
.qr-copy { width: 100%; }
.qr-preview .button-outline:hover:not(:disabled) { background: var(--ink); color: var(--paper); }
.qr-manager { display: grid; gap: .85rem; margin-top: 1rem; }
.qr-link-card { display: grid; gap: .45rem; padding: .85rem; border: 1px solid var(--ink); border-radius: .65rem; overflow-wrap: anywhere; }
.qr-status { padding: .15rem .55rem; border: 1px solid var(--ink); border-radius: 999px; background: var(--lavender); font-size: .8rem; font-weight: 750; }
.qr-toast { position: fixed; inset: auto 1rem 1rem auto; z-index: 2; max-width: calc(100% - 2rem); padding: .65rem .9rem; border: 1px solid var(--ink); border-radius: .55rem; background: var(--paper); box-shadow: 3px 3px var(--ink); font-weight: 650; }
@media (max-width: 43rem) {
  .qr-top:has(.button-google) { display: grid; grid-template-columns: auto minmax(0, 1fr); }
  .qr-top-links:has(.button-google) { display: contents; }
  .qr-top-links:has(.button-google) > .button-compact { justify-self: end; }
  .qr-top-links .button-google { grid-column: 1 / -1; width: 100%; }
  .qr-generator { grid-template-columns: minmax(0, 1fr); grid-template-areas: "editor" "preview" "custom"; }
  .qr-hero { background: linear-gradient(112deg, var(--paper) 74%, var(--lavender) 74%); }
}
@media (max-width: 24rem) {
  .qr-hero { gap: .55rem; }
  .qr-hero h1 { font-size: clamp(1.65rem, 8vw, 2.4rem); }
  .qr-field-row { gap: .45rem; }
  .qr-downloads .button { padding-inline: .5rem; gap: .35rem; }
}