/* QR Pro Studio: layout and controls on top of the shared tokens (core/ui-components.css). */
:root[data-theme="dark"] { --accent-ink: #ffffff; }

[hidden] { display: none !important; }
.qr { display: flex; flex-direction: column; gap: var(--s-5); }
.qr__controls, .qr__output { display: grid; gap: var(--s-5); align-content: start; }
.qr__panel { padding: var(--s-5); }
.qr__output { order: -1; }
@media (min-width: 1100px) {
  .qr { display: grid; }
  .qr__output { order: 0; position: sticky; top: var(--s-5); }
}

/* Chips */
.qr-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.qr-chip {
  padding: .4em .85em; border: 1px solid var(--border); border-radius: var(--radius);
  background: transparent; color: var(--text); font: inherit; font-size: var(--fs-small); cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.qr-chip:hover { border-color: var(--text); }
.qr-chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.qr-chip:focus-visible, .qr-swatch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.qr-chip.is-locked { color: var(--text-muted); }
#types { margin-bottom: var(--s-4); }

/* Form */
.qr-fields { display: block; }
.qr-fields .ow-textarea { resize: vertical; }
.qr-check { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--space); }
.qr-check input { width: 1.1rem; height: 1.1rem; accent-color: var(--accent); }
#status.is-error { color: var(--danger); }

/* Style rows */
.qr-row { display: grid; grid-template-columns: 7rem 1fr; gap: var(--s-2) var(--s-4); align-items: start; padding: var(--s-3) 0; border-top: 1px solid var(--border); }
.qr-row--stack { grid-template-columns: 1fr; }
.qr-row__label { font-weight: 600; font-size: var(--fs-small); display: inline-flex; align-items: center; gap: var(--s-2); padding-top: .35em; }
.qr-stack { display: grid; gap: var(--s-3); }
.qr-lock { display: none; color: var(--text-muted); }
.is-locked .qr-lock { display: inline-flex; }
@media (max-width: 720px) { .qr-row { grid-template-columns: 1fr; } }

.qr-swatches { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.qr-swatch {
  width: 2rem; height: 2rem; padding: 0; border-radius: 50%; border: 2px solid var(--surface);
  background: var(--swatch); box-shadow: 0 0 0 1px var(--border); cursor: pointer;
}
.qr-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--accent); }
.is-locked .qr-swatch { opacity: .75; }
.qr-thumb { width: 2.25rem; height: 2.25rem; object-fit: contain; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }
.qr-slider { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-small); color: var(--text-muted); }
.qr-slider input { flex: 1; accent-color: var(--accent); }

/* Preview */
.qr-stage { display: grid; place-items: center; padding: var(--s-4); border-radius: var(--radius); background: color-mix(in srgb, var(--text) 5%, var(--bg)); min-height: 14rem; margin-bottom: var(--s-4); }
.qr-stage__canvas { display: contents; }
.qr-stage__canvas canvas { display: block; width: min(100%, 22rem); height: auto; filter: drop-shadow(var(--shadow-md)); }
.qr-stage.is-page .qr-stage__canvas canvas { width: min(100%, 16rem); border-radius: 4px; }
.qr-stage__note { margin: 0; text-align: center; max-width: 18rem; }
.qr-stage:not(.is-empty) .qr-stage__note { display: none; }
.qr-stage.is-empty .qr-stage__canvas { display: none; }
.qr-stage.is-error .qr-stage__note { color: var(--danger); }
.qr-stage.is-landing .qr-stage__canvas canvas { animation: qr-land 320ms var(--ease); }
@keyframes qr-land { from { opacity: 0; transform: translateY(6px) scale(.98); } }
#scan { margin: 0 0 var(--s-2); }
#caption { margin: 0 0 var(--s-3); }
.qr-actions { margin-top: var(--s-4); }
.qr-actions .ow-btn { flex: 1 1 12rem; }
#csv-btn.is-locked { color: var(--text-muted); }

/* Stronger accent */
.qr__panel { border-top: 3px solid var(--accent); }
.qr .ow-card__title { display: flex; align-items: center; gap: var(--s-2); }
.qr .ow-card__title::before { content: ""; width: .3rem; height: 1.1em; border-radius: 2px; background: var(--accent); }
.qr-row__label { color: var(--accent); }
.qr-chip:hover { border-color: var(--accent); color: var(--accent); }
.qr-chip[aria-pressed="true"]:hover { color: var(--accent-ink); }
.qr-chip[aria-pressed="true"] { box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--accent) 60%, transparent); }
#download { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
#download:hover:not(:disabled) { filter: brightness(1.12); }
#csv-btn:hover { border-color: var(--accent); color: var(--accent); }
.qr-stage { background: color-mix(in srgb, var(--accent) 14%, var(--bg)); }
.ow-input:focus-visible, .ow-textarea:focus-visible, .ow-select:focus-visible { border-color: var(--accent); }
.qr-lock { display: none !important; } /* replaced by the shared Premium badge */

/* Gradient swatches are Premium: the star badge sits on the corner of the swatch */
.qr-swatch { position: relative; }
.qr-swatch .ow-premium { position: absolute; right: -.45rem; top: -.45rem; margin: 0; padding: .2em; background: var(--surface); }
.qr-swatch.is-locked { opacity: .85; }