/* ── Design tokens ─────────────────────────────────────────────────────────── */
:root {
  --nav-bg:          #ffffff;
  --nav-border:      #e5e7eb;
  --nav-text:        #111827;
  --nav-sub:         #6b7280;

  --body-bg:         #f1f3f7;
  --panel-bg:        #ffffff;
  --panel-border:    #e5e7eb;
  --panel-shadow:    0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
  --panel-shadow-lg: 0 4px 24px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.06);

  --text-primary:    #111827;
  --text-secondary:  #374151;
  --text-muted:      #6b7280;

  --accent:          #0052cc;
  --accent-hover:    #0041a3;
  --accent-light:    #e8f0ff;

  --tile-bg:         #f9fafb;
  --tile-border:     #d1d5db;
  --tile-active-bg:  #e8f0ff;
  --tile-active-border: #0052cc;
  --tile-active-text: #0052cc;

  --range-thumb:     #0052cc;
  --input-bg:        #ffffff;
  --input-border:    #d1d5db;
  --input-focus:     #0052cc;

  --radius-sm:       6px;
  --radius-md:       10px;
  --radius-lg:       14px;
  --radius-xl:       18px;

  --transition:      all 0.18s ease;

  --nav-height:      54px;
  --sidebar-left:    320px;
  --sidebar-right:   280px;
}

[data-bs-theme="dark"] {
  --nav-bg:          #0f1117;
  --nav-border:      #1e2330;
  --nav-text:        #f1f5f9;
  --nav-sub:         #94a3b8;

  --body-bg:         #0b0e17;
  --panel-bg:        #141928;
  --panel-border:    #1e2a40;
  --panel-shadow:    0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3);
  --panel-shadow-lg: 0 4px 20px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.4);

  --text-primary:    #f1f5f9;
  --text-secondary:  #cbd5e1;
  --text-muted:      #64748b;

  --accent:          #4d94ff;
  --accent-hover:    #6aa3ff;
  --accent-light:    #0e1f40;

  --tile-bg:         #1a2035;
  --tile-border:     #2a3555;
  --tile-active-bg:  #0e1f40;
  --tile-active-border: #4d94ff;
  --tile-active-text: #7db3ff;

  --input-bg:        #1a2035;
  --input-border:    #2a3555;
  --input-focus:     #4d94ff;
}

/* ── Reset & base ──────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--body-bg);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── Navigation ────────────────────────────────────────────────────────────── */
.app-nav {
  position: sticky;
  top: 0;
  z-index: 200;
  height: var(--nav-height);
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.25rem;
  box-shadow: 0 1px 0 var(--nav-border);
}

.app-nav__brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--nav-text);
  text-decoration: none;
  min-width: 0;
}

.app-nav__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--nav-text);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.app-nav__sub {
  font-size: 12px;
  color: var(--nav-sub);
  padding-left: 0.5rem;
  margin-left: 0.25rem;
  border-left: 1px solid var(--nav-border);
  white-space: nowrap;
}

.app-nav__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* ── Nav icon buttons ──────────────────────────────────────────────────────── */
.btn-nav-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0 0.625rem;
  height: 34px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  background: var(--panel-bg);
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition);
  font-size: 15px;
  font-family: inherit;
  white-space: nowrap;
}

.btn-nav-label {
  font-size: 13px;
  font-weight: 500;
}

.btn-nav-icon:hover {
  background: var(--tile-bg);
  color: var(--accent);
  border-color: var(--accent);
}

/* ── Offcanvas: base (mobile/tablet behaviour) ─────────────────────────────── */
.controls-offcanvas {
  width: min(92vw, 420px);
  background: var(--body-bg);
  border-right: 1px solid var(--panel-border);
}

.ctrl-offcanvas-header {
  background: var(--nav-bg);
  border-bottom: 1px solid var(--panel-border);
  padding: 0.875rem 1.25rem;
  color: var(--text-primary);
}

.ctrl-offcanvas-header .offcanvas-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ctrl-offcanvas-header .btn-close {
  filter: none;
  opacity: 0.5;
}

[data-bs-theme="dark"] .ctrl-offcanvas-header .btn-close {
  filter: invert(1);
}

.offcanvas-body.controls-body {
  padding: 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.offcanvas-body.controls-body::-webkit-scrollbar {
  width: 4px;
}

.offcanvas-body.controls-body::-webkit-scrollbar-track {
  background: transparent;
}

.offcanvas-body.controls-body::-webkit-scrollbar-thumb {
  background: var(--panel-border);
  border-radius: 2px;
}

/* ── Ctrl columns (single stack in offcanvas, sidebars on desktop) ─────────── */
.ctrl-column {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* On mobile/tablet both columns stack vertically */
.ctrl-column--left,
.ctrl-column--right {
  width: 100%;
}

/* Gap between the two column blocks in the offcanvas */
.ctrl-column--right {
  margin-top: 0.75rem;
}

/* ── Desktop layout: override offcanvas to become inline sidebars ──────────── */
@media (min-width: 1024px) {
  /*
   * On desktop the offcanvas must not behave like an offcanvas at all.
   * We reset all Bootstrap offcanvas positioning so it becomes a normal
   * flow element, and hide the offcanvas header (toggle/close row).
   */
  .controls-offcanvas {
    /* Reset offcanvas overrides */
    position: static !important;
    transform: none !important;
    visibility: visible !important;
    width: auto !important;
    border-right: none !important;
    background: transparent !important;
    z-index: auto !important;
    box-shadow: none !important;
    /* Become a flex row containing the two ctrl-columns */
    display: contents !important; /* children participate in app-workspace grid */
  }

  .ctrl-offcanvas-header {
    display: none !important;
  }

  .offcanvas-body.controls-body {
    display: contents !important;
    padding: 0 !important;
    overflow: visible !important;
    visibility: visible !important;
  }

  .ctrl-column--left {
    /* Left sidebar */
    width: var(--sidebar-left);
    min-width: var(--sidebar-left);
    max-width: var(--sidebar-left);
    height: calc(100vh - var(--nav-height));
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1.25rem 1rem 3rem 1.25rem;
    border-right: 1px solid var(--panel-border);
    background: var(--body-bg);
    position: sticky;
    top: var(--nav-height);
    align-self: start;
    flex-shrink: 0;
    /* Counteract Bootstrap's visibility:hidden set on the offcanvas wrapper */
    visibility: visible !important;
  }

  .ctrl-column--right {
    /* Right sidebar */
    width: var(--sidebar-right);
    min-width: var(--sidebar-right);
    max-width: var(--sidebar-right);
    height: calc(100vh - var(--nav-height));
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1.25rem 1.25rem 3rem 1rem;
    border-left: 1px solid var(--panel-border);
    background: var(--body-bg);
    position: sticky;
    top: var(--nav-height);
    align-self: start;
    flex-shrink: 0;
    margin-top: 0; /* reset the mobile gap */
    visibility: visible !important;
  }

  .ctrl-column--left::-webkit-scrollbar,
  .ctrl-column--right::-webkit-scrollbar {
    width: 4px;
  }
  .ctrl-column--left::-webkit-scrollbar-track,
  .ctrl-column--right::-webkit-scrollbar-track {
    background: transparent;
  }
  .ctrl-column--left::-webkit-scrollbar-thumb,
  .ctrl-column--right::-webkit-scrollbar-thumb {
    background: var(--panel-border);
    border-radius: 2px;
  }

  /* Hide the mobile-only controls toggle button */
  #controlsDrawerToggle {
    display: none !important;
  }
}

/* ── App workspace ─────────────────────────────────────────────────────────── */
.app-workspace {
  display: flex;
  min-height: calc(100vh - var(--nav-height));
}

/* On desktop, app-workspace becomes the three-column grid housing */
@media (min-width: 1024px) {
  .app-workspace {
    display: grid;
    grid-template-columns: var(--sidebar-left) 1fr var(--sidebar-right);
    align-items: stretch;
  }

  /*
   * Since .controls-offcanvas uses display:contents on desktop,
   * its children (ctrl-column--left, ctrl-column--right) become direct
   * grid children of app-workspace. We need to ensure they land in the
   * correct grid columns. We control placement via grid order.
   */
  .ctrl-column--left  { grid-column: 1; grid-row: 1; }
  .preview-col        { grid-column: 2; grid-row: 1; }
  .ctrl-column--right { grid-column: 3; grid-row: 1; }
}

/* ── Preview column ─────────────────────────────────────────────────────────── */
.preview-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.25rem 1rem;
  /* On desktop this column is sticky-scrollable via grid */
}

@media (min-width: 1024px) {
  .preview-col {
    position: sticky;
    top: var(--nav-height);
    height: calc(100vh - var(--nav-height));
    padding: 1.5rem 1.25rem;
    overflow: hidden;
  }
}

/* ── Preview panel ──────────────────────────────────────────────────────────── */
.preview-panel {
  width: 100%;
  max-width: 520px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--panel-shadow-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.125rem;
  border-bottom: 1px solid var(--panel-border);
  flex-shrink: 0;
}

.preview-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.preview-size-label {
  font-size: 11px;
  font-family: "SF Mono", "Fira Code", monospace;
  color: var(--text-muted);
  background: var(--tile-bg);
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid var(--panel-border);
}

/* ── Preview stage ──────────────────────────────────────────────────────────── */
.preview-stage {
  position: relative;
  flex: 1;
  /* Fixed height on mobile so preview doesn't collapse */
  min-height: 260px;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--tile-bg);
}

@media (min-width: 640px) {
  .preview-stage {
    min-height: 320px;
  }
}

@media (min-width: 1024px) {
  .preview-stage {
    min-height: unset;
    max-height: calc(100vh - var(--nav-height) - 140px);
  }
}

/* Checkered transparency indicator */
.checker-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(45deg, #d1d5db 25%, transparent 25%),
    linear-gradient(-45deg, #d1d5db 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #d1d5db 75%),
    linear-gradient(-45deg, transparent 75%, #d1d5db 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  opacity: 0;
  transition: opacity 0.25s ease;
}

[data-bs-theme="dark"] .checker-bg {
  background-image:
    linear-gradient(45deg, #1e2a40 25%, transparent 25%),
    linear-gradient(-45deg, #1e2a40 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #1e2a40 75%),
    linear-gradient(-45deg, transparent 75%, #1e2a40 75%);
}

.checker-bg.visible {
  opacity: 1;
}

/* QR preview image */
.preview-img {
  max-width: 85%;
  max-height: 85%;
  object-fit: contain;
  border-radius: var(--radius-md);
  box-shadow: 0 4px 24px rgba(0,0,0,.12), 0 1px 4px rgba(0,0,0,.08);
  position: relative;
  z-index: 1;
  transition: opacity 0.2s ease;
}

.preview-img.loading {
  opacity: 0.3;
}

/* Loading spinner */
.preview-spinner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.preview-spinner.visible {
  opacity: 1;
  pointer-events: all;
}

.spinner-ring {
  width: 44px;
  height: 44px;
  border: 3px solid var(--panel-border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Error state */
.preview-error {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--tile-bg);
  color: #dc2626;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  padding: 2rem;
  z-index: 5;
}

/* Empty state */
.preview-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
  padding: 2rem;
}

/* ── Preview footer / download ──────────────────────────────────────────────── */
.preview-footer {
  padding: 0.875rem 1.125rem;
  border-top: 1px solid var(--panel-border);
  display: flex;
  justify-content: center;
  flex-shrink: 0;
}

.btn-download {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.75rem;
  background: var(--accent);
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
  box-shadow: 0 1px 3px rgba(0, 82, 204, 0.3);
  letter-spacing: 0.01em;
  width: 100%;
  justify-content: center;
}

@media (min-width: 480px) {
  .btn-download {
    width: auto;
  }
}

.btn-download:hover:not(:disabled) {
  background: var(--accent-hover);
  box-shadow: 0 4px 12px rgba(0, 82, 204, 0.35);
  transform: translateY(-1px);
}

.btn-download:active:not(:disabled) {
  transform: translateY(0);
}

.btn-download:disabled {
  background: var(--tile-border);
  color: var(--text-muted);
  cursor: not-allowed;
  box-shadow: none;
}

/* ── Control cards ─────────────────────────────────────────────────────────── */
.ctrl-card {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--panel-shadow);
  margin-bottom: 0;
}

.ctrl-card__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  font-weight: 600;
  font-size: 12px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--panel-border);
  background: var(--tile-bg);
}

.ctrl-card__header--toggle {
  width: 100%;
  text-align: left;
  background: var(--tile-bg);
  border: none;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  justify-content: space-between;
  font: inherit;
  transition: var(--transition);
}

.ctrl-card__header--toggle:not(.collapsed) {
  border-bottom-color: var(--panel-border);
}

.ctrl-card__header--toggle:hover {
  background: var(--accent-light);
  color: var(--accent);
}

.toggle-chevron {
  transition: transform 0.2s ease;
  font-size: 12px;
}

.ctrl-card__header--toggle:not(.collapsed) .toggle-chevron {
  transform: rotate(180deg);
}

.ctrl-card__body {
  padding: 0.875rem 1rem;
}

/* ── Data type tabs ─────────────────────────────────────────────────────────── */
.data-tabs {
  display: flex;
  gap: 3px;
  margin-bottom: 0.75rem;
  background: var(--tile-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  padding: 3px;
  flex-wrap: wrap;
}

.data-tab {
  flex: 1;
  min-width: 44px;
  padding: 0.3rem 0.2rem;
  font-size: 11.5px;
  font-weight: 500;
  border: none;
  background: transparent;
  color: var(--text-muted);
  border-radius: calc(var(--radius-md) - 2px);
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
  text-align: center;
}

.data-tab:hover {
  color: var(--text-primary);
  background: var(--panel-bg);
}

.data-tab.active {
  background: var(--panel-bg);
  color: var(--accent);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

/* ── QR data textarea ───────────────────────────────────────────────────────── */
.qr-data-input {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: "SF Mono", "Fira Code", "Consolas", monospace;
  font-size: 12.5px;
  resize: vertical;
  min-height: 68px;
  transition: border-color 0.15s ease;
}

.qr-data-input:focus {
  outline: none;
  border-color: var(--input-focus);
  box-shadow: 0 0 0 3px rgba(0, 82, 204, 0.12);
}

/* ── Color rows ─────────────────────────────────────────────────────────────── */
.color-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.color-label {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
}

.color-input-wrap {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.color-swatch {
  width: 34px;
  height: 34px;
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  padding: 2px;
  cursor: pointer;
  background: var(--input-bg);
  transition: var(--transition);
  flex-shrink: 0;
}

.color-swatch:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-light);
}

.color-hex {
  width: 80px;
  padding: 0.3rem 0.45rem;
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  color: var(--text-primary);
  font-family: "SF Mono", "Fira Code", monospace;
  font-size: 11.5px;
  transition: border-color 0.15s ease;
}

.color-hex:focus {
  outline: none;
  border-color: var(--input-focus);
  box-shadow: 0 0 0 2px rgba(0, 82, 204, 0.1);
}

.color-hex:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Toggle row ─────────────────────────────────────────────────────────────── */
.toggle-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.form-check-input {
  cursor: pointer;
}

.form-check-label {
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
}

/* ── Style / Shape tiles ────────────────────────────────────────────────────── */
.style-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.4rem;
}

.shape-grid {
  grid-template-columns: repeat(3, 1fr);
}

/* Right sidebar is narrower so 3-column style tiles also need adjustment */
.ctrl-column--right .style-grid:not(.shape-grid) {
  grid-template-columns: repeat(4, 1fr);
}

.style-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.5rem 0.2rem 0.4rem;
  background: var(--tile-bg);
  border: 1.5px solid var(--tile-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition);
  user-select: none;
}

.style-tile:hover {
  border-color: var(--accent);
  background: var(--accent-light);
}

.style-tile.active {
  background: var(--tile-active-bg);
  border-color: var(--tile-active-border);
  box-shadow: 0 0 0 1px var(--tile-active-border);
}

.style-tile__icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.style-tile__icon svg {
  width: 22px;
  height: 22px;
  fill: var(--text-secondary);
  transition: fill 0.15s ease;
}

.style-tile.active .style-tile__icon svg {
  fill: var(--tile-active-text);
}

.style-tile:hover .style-tile__icon svg {
  fill: var(--accent);
}

.style-tile__label {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text-muted);
  transition: color 0.15s ease;
  text-align: center;
}

.style-tile.active .style-tile__label {
  color: var(--tile-active-text);
  font-weight: 600;
}

.style-tile:hover .style-tile__label {
  color: var(--accent);
}

/* ── Shape options ──────────────────────────────────────────────────────────── */
.shape-options {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--panel-border);
}

/* ── Range inputs ───────────────────────────────────────────────────────────── */
.option-row {
  margin-bottom: 0.75rem;
}

.option-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12.5px;
  color: var(--text-secondary);
  font-weight: 500;
  margin-bottom: 0.3rem;
}

.range-val {
  font-family: "SF Mono", "Fira Code", monospace;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-light);
  padding: 1px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}

.form-range {
  width: 100%;
  accent-color: var(--range-thumb);
}

.form-select {
  background-color: var(--input-bg);
  border-color: var(--input-border);
  color: var(--text-primary);
  font-size: 13px;
}

.form-select:focus {
  border-color: var(--input-focus);
  box-shadow: 0 0 0 3px rgba(0, 82, 204, 0.12);
}

/* ── Logo upload area ───────────────────────────────────────────────────────── */
.logo-upload-area {
  position: relative;
  border: 2px dashed var(--panel-border);
  border-radius: var(--radius-md);
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
  overflow: hidden;
  background: var(--tile-bg);
}

.logo-upload-area:hover,
.logo-upload-area.drag-over {
  border-color: var(--accent);
  background: var(--accent-light);
}

.logo-file-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}

.logo-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  color: var(--text-muted);
  font-size: 12.5px;
  pointer-events: none;
  padding: 1rem;
  text-align: center;
}

.logo-preview-wrap {
  position: relative;
  padding: 0.625rem;
}

.logo-thumb {
  max-width: 72px;
  max-height: 72px;
  border-radius: var(--radius-sm);
  display: block;
  object-fit: contain;
  border: 1px solid var(--panel-border);
}

.btn-clear-logo {
  position: absolute;
  top: 0.2rem;
  right: 0.2rem;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 50%;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1;
  transition: var(--transition);
  z-index: 3;
  padding: 0;
}

.btn-clear-logo:hover {
  background: #fee2e2;
  color: #dc2626;
  border-color: #dc2626;
}

/* ── Footer ─────────────────────────────────────────────────────────────────── */
.app-footer {
  text-align: center;
  padding: 1rem 1.5rem;
  font-size: 12px;
  color: var(--text-muted);
  border-top: 1px solid var(--panel-border);
  background: var(--nav-bg);
}

.app-footer a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}

.app-footer a:hover {
  color: var(--accent);
}

.app-footer__sep {
  margin: 0 0.5rem;
  opacity: 0.4;
}

/* ── Bootstrap overrides ────────────────────────────────────────────────────── */
.form-text {
  font-size: 11.5px;
  color: var(--text-muted);
}

.form-check-input:checked {
  background-color: var(--accent);
  border-color: var(--accent);
}

.form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(0, 82, 204, 0.15);
  border-color: var(--accent);
}

/* Bootstrap offcanvas backdrop */
.offcanvas-backdrop {
  z-index: 150;
}

/* ── Responsive: nav sub-label ──────────────────────────────────────────────── */
@media (max-width: 479px) {
  .app-nav {
    padding: 0 0.875rem;
  }
  .app-nav__sub {
    display: none;
  }
  .btn-nav-label {
    display: none;
  }
}

/* ── Medium breakpoint: ensure preview panel has sensible height ─────────────── */
@media (min-width: 640px) and (max-width: 1023px) {
  .preview-panel {
    max-width: 440px;
  }
}