/* QR Code Generator */

/* Content type strip ------------------------------------------- */
.qr-types {
  display: flex;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  overflow-x: auto;
  scrollbar-width: none;
}

.qr-types::-webkit-scrollbar { display: none; }

.qr-type {
  flex: 1 0 auto;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 78px;
  padding: var(--space-2) var(--space-2) 7px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}

.qr-type .icon { color: var(--color-text-tertiary); transition: color var(--duration) var(--ease); }
.qr-type:hover { background: var(--color-surface); color: var(--color-text); }
.qr-type:hover .icon { color: var(--color-text-secondary); }
.qr-type[aria-selected="true"] { background: var(--color-primary-subtle); border-color: var(--color-primary-border); color: var(--color-primary); }
.qr-type[aria-selected="true"] .icon { color: var(--color-primary); }
.qr-type:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-focus); }

/* Layout ------------------------------------------------------- */
.qr-body { grid-template-columns: 404px minmax(0, 1fr); min-height: 640px; }
.qr-side { order: 0; border-left: 0; border-right: 1px solid var(--color-border); }
.qr-main { order: 1; border-bottom-left-radius: 0; border-bottom-right-radius: var(--radius-lg); display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); }
.qr-tabs { padding: 0 var(--space-2); }
.qr-tabs .panel-tab { flex: 1 0 auto; justify-content: center; padding: 0 10px; }
.ws-side.qr-side .qr-scroll { max-height: 760px; }

.qr-pane-intro { margin: 0 0 var(--space-4); font-size: var(--text-small); line-height: 1.55; color: var(--color-text-secondary); }

/* Forms -------------------------------------------------------- */
.qr-form-desc {
  margin: 0 0 var(--space-5);
  font-size: var(--text-small);
  line-height: 1.55;
  color: var(--color-text-secondary);
}

.qr-form .field { margin-bottom: var(--space-4); }
.qr-form .grid-2 > .field { margin-bottom: var(--space-4); }
.qr-form .grid-2 { gap: 0 var(--space-3); }
.qr-textarea { min-height: 96px; }
.qr-hint-top { margin: -8px 0 var(--space-4); }
.qr-grid-dates .input { padding: 0 8px; font-size: var(--text-small); }

.qr-pass { position: relative; }
.qr-pass .input { padding-right: 46px; }
.qr-pass-toggle { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); }

.qr-data {
  margin-top: var(--space-5);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.qr-data-label { font-size: var(--text-caption); font-weight: var(--weight-semibold); color: var(--color-text); }
.qr-data .field-value { font-size: var(--text-caption); }
.qr-meter { height: 4px; margin: var(--space-2) 0; border-radius: 2px; background: var(--color-border); overflow: hidden; }
.qr-meter span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--color-success); transition: width 200ms var(--ease); }
.qr-meter[data-level="mid"] span { background: #c98a12; }
.qr-meter[data-level="high"] span { background: var(--color-error); }
.qr-data-note { margin: 0; font-size: var(--text-caption); line-height: 1.5; color: var(--color-text-secondary); }

/* Option grids ------------------------------------------------- */
.qr-shape-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.qr-shape-grid-5 { grid-template-columns: repeat(5, 1fr); }
.qr-frame-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }

.qr-shape {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 10px 4px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-background);
  color: var(--color-text);
  font-size: 0.75rem;
  font-weight: var(--weight-medium);
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--duration) var(--ease), background-color var(--duration) var(--ease);
}

.qr-shape svg { width: 34px; height: 34px; color: #344054; }
.qr-shape span { color: var(--color-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.qr-shape-grid-5 .qr-shape { padding: 8px 2px 6px; }
.qr-shape-grid-5 .qr-shape svg { width: 28px; height: 28px; }
.qr-shape-grid-5 .qr-shape span { font-size: 0.6875rem; }
.qr-frame-grid .qr-shape svg { width: 52px; height: 58px; }
.qr-shape:hover { border-color: var(--color-border-strong); background: var(--color-surface); }
.qr-shape[aria-pressed="true"] { border-color: var(--color-primary); background: var(--color-primary-subtle); box-shadow: inset 0 0 0 1px var(--color-primary); }
.qr-shape[aria-pressed="true"] svg { color: var(--color-primary); }
.qr-shape[aria-pressed="true"] span { color: var(--color-primary); }
.qr-shape:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-focus); }

.qr-check-field { margin-top: var(--space-1); }
.qr-nested { margin-top: var(--space-3); padding-left: 26px; }
.qr-swap { margin-left: auto; }

/* Templates ---------------------------------------------------- */
.qr-template-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3) var(--space-2); }

.qr-template {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: 0.75rem;
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  text-align: center;
  cursor: pointer;
}

.qr-template-img {
  display: block;
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: 0 0 0 1px var(--color-border);
  overflow: hidden;
  transition: box-shadow var(--duration) var(--ease);
}

.qr-template canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 200ms var(--ease); }
.qr-template.is-ready canvas { opacity: 1; }
.qr-template-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qr-template:hover .qr-template-img { box-shadow: 0 0 0 1px var(--color-border-strong), var(--shadow-md); }
.qr-template[aria-pressed="true"] { color: var(--color-primary); }
.qr-template[aria-pressed="true"] .qr-template-img { box-shadow: 0 0 0 2px var(--color-primary); }
.qr-template:focus-visible { outline: none; }
.qr-template:focus-visible .qr-template-img { box-shadow: 0 0 0 3px var(--color-focus); }

/* Logo --------------------------------------------------------- */
.qr-upload {
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  transition: border-color var(--duration) var(--ease), background-color var(--duration) var(--ease);
}

.qr-upload.is-dragover { border-color: var(--color-primary); background: var(--color-primary-subtle); }
.qr-upload:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--color-focus); }

.qr-upload-empty {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-3);
  align-items: start;
  padding: var(--space-4);
}

.qr-upload-empty .btn { grid-column: 2; justify-self: start; cursor: pointer; }
.qr-upload-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-md); background: var(--color-background); color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-border); }
.qr-upload-title { margin: 0 0 2px; font-size: var(--text-small); font-weight: var(--weight-semibold); }
.qr-upload-meta { display: block; margin: 0; font-size: var(--text-caption); line-height: 1.45; color: var(--color-text-secondary); }

.qr-upload-file { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); }
.qr-upload-thumb { width: 44px; height: 44px; object-fit: contain; border-radius: var(--radius-sm); background: #fff; box-shadow: 0 0 0 1px var(--color-border); }
.qr-upload-text { flex: 1; min-width: 0; }
.qr-upload-name { display: block; font-size: var(--text-small); font-weight: var(--weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.qr-icon-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }

.qr-icon {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  min-width: 0;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-background);
  color: #344054;
  cursor: pointer;
  transition: border-color var(--duration) var(--ease), background-color var(--duration) var(--ease);
}

.qr-icon:hover { border-color: var(--color-border-strong); background: var(--color-surface); }
.qr-icon[aria-pressed="true"] { border-color: var(--color-primary); background: var(--color-primary-subtle); color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); }
.qr-icon:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-focus); }
.qr-icon[data-icon=""] { color: var(--color-text-tertiary); }

.qr-logo-note { margin-top: var(--space-4); }

/* Frame -------------------------------------------------------- */
.qr-cta-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-3); }

.qr-chip {
  padding: 4px 10px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-background);
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
  cursor: pointer;
}

.qr-chip:hover { border-color: var(--color-border-strong); color: var(--color-text); }
.qr-chip:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-focus); }

/* Preview ------------------------------------------------------ */
.qr-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 1px 1px, rgba(16, 24, 40, 0.07) 1px, transparent 0) 0 0 / 18px 18px,
    var(--color-background);
  box-shadow: 0 0 0 1px var(--color-border);
}

.qr-preview {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 440px;
}

.qr-canvas {
  display: block;
  max-width: 100%;
  border-radius: 4px;
  filter: drop-shadow(0 6px 18px rgba(16, 24, 40, 0.12));
  transition: opacity 160ms var(--ease);
}

.qr-preview.is-transparent .qr-canvas {
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #e6e8ec 25%, transparent 25%),
    linear-gradient(-45deg, #e6e8ec 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e6e8ec 75%),
    linear-gradient(-45deg, transparent 75%, #e6e8ec 75%);
  background-size: 14px 14px;
  background-position: 0 0, 0 7px, 7px -7px, -7px 0;
  filter: none;
}

.qr-preview.is-sample .qr-canvas { opacity: 0.45; }

.qr-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(21, 25, 34, 0.86);
  color: #fff;
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  box-shadow: var(--shadow-md);
}

.qr-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }

.qr-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--color-background);
  box-shadow: 0 0 0 1px var(--color-border);
  font-size: var(--text-caption);
  font-variant-numeric: tabular-nums;
}

.qr-stat-k { color: var(--color-text-tertiary); }
.qr-stat-v { color: var(--color-text); font-weight: var(--weight-medium); }

.qr-checks { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }

.qr-check {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid;
  border-radius: var(--radius-md);
  font-size: var(--text-caption);
  line-height: 1.5;
}

.qr-check .icon { flex-shrink: 0; margin-top: 1px; }
.qr-check.is-ok { background: var(--color-success-bg); border-color: var(--color-success-border); color: var(--color-success); }
.qr-check.is-warn { background: var(--color-warning-bg); border-color: var(--color-warning-border); color: var(--color-warning); }
.qr-check.is-info { background: var(--color-background); border-color: var(--color-border); color: var(--color-text-secondary); }

/* Export ------------------------------------------------------- */
.qr-export {
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-background);
  box-shadow: 0 0 0 1px var(--color-border);
}

.qr-export-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.qr-export-title { margin: 0; font-size: var(--text-small); font-weight: var(--weight-semibold); }
.qr-export-opts .field { margin-bottom: var(--space-3); }
.qr-export-opts .grid-2 .field { margin-bottom: var(--space-3); }
.qr-export-desc { margin: 0 0 var(--space-3); font-size: var(--text-caption); line-height: 1.5; color: var(--color-text-secondary); }
.qr-export .alert { margin-bottom: var(--space-3); }
.qr-export-actions { display: flex; gap: var(--space-2); }
.qr-download { flex: 1; }
.qr-export-hint { margin: var(--space-3) 0 0; font-size: var(--text-caption); line-height: 1.5; color: var(--color-text-secondary); }

/* Responsive --------------------------------------------------- */
@media (max-width: 1024px) {
  .qr-body { grid-template-columns: 360px minmax(0, 1fr); }
  .qr-main { padding: var(--space-4); }
}

@media (max-width: 860px) {
  .qr-body { grid-template-columns: 1fr; }
  .qr-side { border-right: 0; border-bottom: 1px solid var(--color-border); }
  .ws-side.qr-side .qr-scroll { max-height: none; }
  .qr-main { border-bottom-left-radius: var(--radius-lg); }
  .qr-template-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 600px) {
  .qr-type { min-width: 70px; }
  .qr-main { padding: var(--space-3); }
  .qr-stage { min-height: 0; padding: var(--space-4); }
  .qr-template-grid { grid-template-columns: repeat(3, 1fr); }
  .qr-icon-grid { grid-template-columns: repeat(6, 1fr); }
  .qr-export-actions { flex-direction: column; }
  .qr-download { flex: none; }
  .qr-stat { padding: 3px 8px; }
  .qr-export-head { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .qr-type, .qr-shape, .qr-icon, .qr-template-img, .qr-template canvas, .qr-canvas, .qr-meter span, .qr-upload { transition: none; }
}

/* Corner centers that do not suit the chosen frame */
.qr-shape { position: relative; }
.qr-shape.is-risky::after {
  content: "";
  position: absolute;
  top: 5px;
  right: 5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d08a0e;
}
.qr-shape.is-risky svg { opacity: 0.55; }
.qr-fix { font-size: inherit; color: inherit; text-decoration: underline; font-weight: var(--weight-semibold); }

[data-frame-opts] > .section-label:first-child,
[data-logo-opts] > .section-label:first-child { margin-top: var(--space-6); }