:root {
  --sidebar-width: 260px;
  --header-height: 68px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --primary-color: #EE4046;
  --primary-hover: #D73339;
  --primary-light: #FEE2E2;
  --primary-subtle: rgba(238, 64, 70, 0.08);
  --primary-rgb: 238, 64, 70;
  --bg-subtle-custom: #F8FAFC;
  --card-bg: #FFFFFF;
  --border-color-custom: #E2E8F0;
  --card-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 10px 25px -5px rgba(0,0,0,0.04);
}

[data-bs-theme="dark"] {
  --bg-subtle-custom: #0B1120;
  --sidebar-bg: #0F172A;
  --card-bg: #1E293B;
  --border-color-custom: #334155;
  --card-shadow: 0 1px 3px rgba(0,0,0,0.3), 0 10px 25px -5px rgba(0,0,0,0.4);
}

[data-bs-theme="light"] {
  --sidebar-bg: #FFFFFF;
  --card-bg: #FFFFFF;
  --border-color-custom: #E2E8F0;
  --bs-body-bg: #F8FAFC;
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color: var(--bs-body-bg, #F8FAFC);
  min-height: 100vh;
}

/* Bootstrap component variables keep hover, focus and active states consistent. */
.btn-primary{--bs-btn-bg:#EE4046;--bs-btn-border-color:#EE4046;--bs-btn-color:#fff;--bs-btn-hover-bg:#c92e35;--bs-btn-hover-border-color:#c92e35;--bs-btn-hover-color:#fff;--bs-btn-active-bg:#b4232a;--bs-btn-active-border-color:#b4232a;--bs-btn-active-color:#fff;--bs-btn-disabled-bg:#EE4046;--bs-btn-disabled-border-color:#EE4046}
.btn-outline-primary{--bs-btn-color:#b4232a;--bs-btn-border-color:#EE4046;--bs-btn-hover-bg:#fff1f2;--bs-btn-hover-color:#b4232a;--bs-btn-hover-border-color:#EE4046;--bs-btn-active-bg:#EE4046;--bs-btn-active-color:#fff;--bs-btn-active-border-color:#EE4046}
.btn-outline-secondary{--bs-btn-hover-bg:#fff1f2;--bs-btn-hover-border-color:#EE4046;--bs-btn-hover-color:#b4232a;--bs-btn-active-bg:#EE4046;--bs-btn-active-border-color:#EE4046;--bs-btn-active-color:#fff}
.text-primary{color:#b4232a!important}.bg-primary{background-color:#EE4046!important}.bg-primary-subtle{background-color:#fff1f2!important}
/* Focus styles matching primary accent */
.form-control:focus,
.form-select:focus {
  border-color: rgba(238, 64, 70, 0.5);
  box-shadow: 0 0 0 0.25rem rgba(238, 64, 70, 0.15);
}

.form-check-input:checked {
  background-color: #EE4046;
  border-color: #EE4046;
}

.auth-body {
  background: radial-gradient(circle at 10% 20%, rgba(238, 64, 70, 0.08) 0%, rgba(248, 250, 252, 0.9) 90%);
}

[data-bs-theme="dark"] .auth-body {
  background: radial-gradient(circle at 10% 20%, rgba(238, 64, 70, 0.12) 0%, rgba(15, 23, 42, 0.95) 90%);
}

.auth-card-container {
  width: 100%;
  max-width: 440px;
  padding: 1rem;
  box-sizing: border-box;
  min-width: 0;
}
/* Phones: the card used to sit 24px past the right edge (horizontal scroll). */
@media (max-width: 575.98px) { .auth-card-container { max-width: 100%; } .auth-card .card-body { padding: 1.5rem !important; } }
.auth-logo .fq-logo-link { margin-inline: auto; }

/* Brand mark helpers still used by auth pages */
.qora-avatar { display:grid; place-items:center; flex-shrink:0; border-radius:50%; background:#fff1f2; color:#97252b; overflow:hidden; }
.freeqr360-avatar-text { font-size:10px; font-weight:700; line-height:1; }
.freeqr360-mark { display:block; flex-shrink:0; max-width:72px; max-height:72px; object-fit:contain; }
.qora-login-brand { display:grid; place-items:center; width:72px; height:72px; margin-inline:auto; }
@media(max-width:575.98px) { .qora-login-brand,.qora-login-brand .freeqr360-mark { max-width:64px; max-height:64px; } }
.profile-brand-image { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.login-brand-image { width: 190px; max-width: 70%; height: 64px; object-fit: contain; object-position: center; display: inline-block; }
.min-w-0 { min-width:0; }

/* Cards & UI elements */
.card-custom,
.card {
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color-custom);
  background-color: var(--card-bg);
  box-shadow: var(--card-shadow);
}

.rounded-12 {
  border-radius: var(--radius-md) !important;
}

/* QR Creator Styling */
.type-card {
  cursor: pointer;
  border: 2px solid var(--border-color-custom);
  border-radius: var(--radius-md);
  padding: 0.75rem 0.5rem;
  text-align: center;
  transition: all 0.15s ease;
  background: var(--card-bg);
}

.type-card:hover {
  border-color: var(--primary-color);
  background-color: var(--primary-subtle);
}

.type-card.selected {
  border-color: var(--primary-color);
  background-color: rgba(238, 64, 70, 0.1);
  color: var(--primary-color);
}

/* QORA create workspace: spacious type tiles and a quiet preview surface. */
.qr-create-page { max-width: 1440px; margin: 0 auto; }
.qr-create-page > .row { align-items: flex-start; }
.qr-create-page .card { border-color: #e8edf3; box-shadow: 0 8px 28px rgba(23, 37, 61, .06); }
.qr-create-page #typeChoices .qr-type-card {
  min-height: 112px; border: 1px solid #e6ebf1; border-radius: 15px; background: #fff;
  color: #132238; box-shadow: 0 5px 18px rgba(23,37,61,.06); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.qr-create-page #typeChoices .qr-type-card:hover { transform: translateY(-2px); border-color: rgba(238,64,70,.45); box-shadow: 0 10px 24px rgba(23,37,61,.1); }
.qr-create-page #typeChoices .btn-check:checked + .qr-type-card { background: #EE4046; border-color: #ed3341; color: #fff; box-shadow: 0 10px 24px rgba(238,64,70,.28); }
.qr-create-page #typeChoices .btn-check:checked + .qr-type-card small { color: rgba(255,255,255,.82) !important; }
.qr-type-icon { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: 50%; margin-bottom: .55rem; background: #fff0f1; color: #ee4046; font-size: 1.25rem; }
.btn-check:checked + .qr-type-card .qr-type-icon { background: rgba(255,255,255,.26); color: #fff; }
.qr-create-page #qrCanvasContainer { min-height: 430px; width: 100%; }
.qr-create-page .bg-light.rounded-4 { min-height: 455px !important; background: #f8fafc !important; border: 1px solid #f0f3f6; }
.qr-create-page .qr-preview-surface { min-height: 455px !important; background: #f8fafc !important; border: 1px solid #f0f3f6; }
.qr-create-page .sticky-top { top: 72px !important; }
.qr-create-page .form-control, .qr-create-page .form-select { min-height: 44px; border-radius: 10px; }
.qr-create-page h3 { letter-spacing: -.03em; }

.qr-details-page { max-width: 1440px; margin: 0 auto; }
.qr-breadcrumb { display:flex; align-items:center; gap:.65rem; color:#64748b; font-size:.95rem; margin-bottom:1.5rem; }
.qr-breadcrumb a { color:#64748b; text-decoration:none; }.qr-breadcrumb a:hover { color:#EE4046; }.qr-breadcrumb i { font-size:.75rem; }
.qr-status-pill { border:1px solid #b8ebca; background:#f0fff5; color:#168044; border-radius:9px; padding:.65rem 1rem; font-weight:600; white-space:nowrap; }
.qr-status-pill .bi-circle-fill { font-size:.65rem; margin-right:.45rem; color:#16b364; }
.qr-detail-preview-card,.qr-detail-info-card { border:1px solid #e8edf3; border-radius:16px; padding:1.5rem; box-shadow:0 8px 28px rgba(23,37,61,.06); }
.qr-detail-canvas { min-height:330px; display:flex; align-items:center; justify-content:center; background:#fff; border-radius:14px; padding:1rem; }
.qr-detail-canvas .qr-frame-wrapper { box-shadow:0 4px 14px rgba(0,0,0,.08); }
.qr-downloads { display:flex; flex-direction:column; gap:.7rem; margin-top:1.25rem; }.qr-downloads .btn { min-height:46px; border-radius:9px; font-weight:600; }
.qr-test-btn { background:#fff0f1; color:#ee4046; border:0; min-height:46px; font-weight:600; }.qr-test-btn:hover { background:#fee2e2; color:#d73339; }
.qr-detail-info-card { min-height:100%; }.qr-detail-heading { display:flex; align-items:center; gap:1rem; padding-bottom:1.25rem; border-bottom:1px solid #e5eaf0; }.qr-detail-type-icon { width:62px; height:62px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#ee4046; background:#fff0f1; font-size:1.65rem; }
.qr-mode-badge { color:#ee4046; background:#fff0f1; padding:.55rem .75rem; }.qr-detail-list { margin:0; display:grid; grid-template-columns:180px 1fr; }.qr-detail-list dt,.qr-detail-list dd { padding:.85rem 0; margin:0; border-bottom:1px solid #e5eaf0; }.qr-detail-list dt { color:#526175; font-weight:600; }.qr-detail-list dd { color:#172238; }.qr-detail-actions { margin-top:1.35rem; }.qr-detail-actions .btn { min-height:46px; border-radius:9px; font-weight:600; }.qr-detail-actions .btn-danger { margin-left:auto; }
@media (max-width: 767.98px) { .qr-detail-list > div { grid-template-columns:1fr; gap:.25rem; }.qr-detail-actions .btn-danger { margin-left:0; } }

@media (max-width: 991.98px) { .qr-create-page #qrCanvasContainer { min-height: 330px; } }

.type-card i {
  font-size: 1.4rem;
  display: block;
  margin-bottom: 0.25rem;
}

/* Preview Area */
.qr-preview-card {
  background: var(--card-bg);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color-custom);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 380px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--card-shadow);
}

#qrCanvasContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

#qrCanvasContainer canvas,
#qrCanvasContainer svg {
  max-width: 100%;
  height: auto;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  border-radius: 8px;
}

/* Frame wrappers */
.qr-frame-wrapper {
  display: inline-block;
  padding: 16px;
  background: #ffffff;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0,0,0,0.06);
}

.qr-frame-bottom-bar {
  border: 4px solid #EE4046;
  border-radius: 14px;
}

.qr-frame-bottom-bar .frame-banner {
  background-color: #EE4046;
  color: #fff;
  font-weight: bold;
  padding: 6px 12px;
  margin-top: 10px;
  border-radius: 6px;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
}

.qr-frame-top-bar {
  border: 4px solid #EE4046;
  border-radius: 14px;
}

.qr-frame-top-bar .frame-banner {
  background-color: #EE4046;
  color: #fff;
  font-weight: bold;
  padding: 6px 12px;
  margin-bottom: 10px;
  border-radius: 6px;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
}

.qr-frame-bubble {
  border: 2px dashed #94a3b8;
  border-radius: 16px;
}

/* Scannability meter */
.score-badge {
  font-size: 1.25rem;
  font-weight: 700;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

/* Poster Studio Flyer */
.poster-flyer-preview {
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  background: #ffffff;
  color: #0f172a;
  margin: 0 auto;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.poster-a4 {
  width: 100%;
  max-width: 480px;
  aspect-ratio: 1 / 1.414;
}

.poster-a5 {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1 / 1.414;
}

.poster-square {
  width: 100%;
  max-width: 440px;
  aspect-ratio: 1 / 1;
}

/* Responsive utilities */
.text-truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.resource-dialog{border:1px solid var(--border-color-custom);border-radius:16px;padding:28px;width:min(540px,calc(100% - 32px));max-height:90vh;overflow:auto;background:var(--card-bg);color:var(--bs-body-color)}
.resource-dialog::backdrop{background:#17223866}
.routing-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px;padding:12px;border:1px solid var(--border-color-custom);border-radius:10px}
.template-preview{display:flex;justify-content:center;min-width:0;margin:12px 0}.template-preview canvas{max-width:100%;height:auto}
.qr-frame-wrapper{max-width:100%;box-sizing:border-box}.qr-frame-wrapper canvas,.qr-frame-wrapper svg{max-width:100%;height:auto}.frame-banner{overflow-wrap:anywhere}
.qr-detail-list dd{color:var(--bs-body-color)}[data-bs-theme="dark"] .sidebar-wordmark{color:#fff}
.btn-check:checked+.qr-type-card:hover .qr-type-icon{color:#b4232a;background:white}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #ee404680;outline-offset:3px}
@media(max-width:575px){.app-content{padding:16px}.qr-detail-list{grid-template-columns:1fr}.qr-detail-list dt{border-bottom:0;padding-bottom:0}.qr-create-page>.d-flex{flex-wrap:wrap;gap:12px}.qr-create-page .card-body{padding:16px!important}.qr-create-page .sticky-top{position:static}.qr-create-page .bg-light.rounded-4{padding:8px!important}.routing-row{grid-template-columns:1fr}.qr-detail-preview-card{padding:12px}}


#typeChoices{max-height:340px;overflow-y:auto;padding:4px;margin-bottom:16px;scrollbar-gutter:stable}#typeChoices [hidden]{display:none}

.app-content canvas{max-width:100%}.app-content .row>*{min-width:0}

/* Create/Edit QR: the form and preview are siblings, not one scrolling page. */
.qr-workspace-body { display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,.85fr); gap:24px; min-height:0; }
.form-column,.preview-column { min-width:0; min-height:0; }
.preview-card { width:100%; }
.preview-inner { padding:24px; }
.qr-preview-stage { padding:16px; min-width:0; }
@media(min-width:769px) {
  html:has(body.qr-workspace-page),body.qr-workspace-page { height:100%; overflow:hidden; }
  .qr-workspace-page .app-wrapper { height:100vh; height:100dvh; min-height:0; overflow:hidden; }
  .qr-workspace-page .app-main { height:100%; min-height:0; overflow:hidden; }
  .qr-workspace-page .app-navbar,.qr-workspace-page .app-main>footer { flex-shrink:0; }
  .qr-workspace-page .app-content { display:flex; flex-direction:column; flex:1 1 0; min-height:0; overflow:hidden; } /* app.css sets .app-content{flex:1 0 auto}: flex-shrink:0 let it grow to full form height and defeat the scroll container */
  .qr-workspace-page #qrEditor { display:flex; flex-direction:column; flex:1; min-height:0; }
  .qr-workspace-page #qrEditor> .d-flex { flex-shrink:0; }
  .qr-workspace-body { flex:1; overflow:hidden; grid-template-columns:minmax(0,1fr) clamp(320px,34vw,520px); }
  .form-column { height:100%; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; scrollbar-gutter:stable; scrollbar-width:thin; scrollbar-color:#aeb7c4 transparent; padding:2px 8px 16px 2px; }
  .form-column::-webkit-scrollbar { width:8px; }
  .form-column::-webkit-scrollbar-thumb { background:#aeb7c4; border-radius:999px; }
  .qr-workspace-page #typeChoices { max-height:none; overflow:visible; scrollbar-gutter:auto; }
  .preview-column { height:100%; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; scrollbar-width:thin; padding:2px 2px 16px; }
  .preview-card { position:relative; }
}
@media(min-width:769px) and (max-width:1100px) {
  .qr-workspace-body { grid-template-columns:minmax(0,1fr) 340px; gap:16px; }
  .qr-workspace-page .app-content { padding:16px; }
  .preview-card>.preview-inner { padding:12px; }
  .qr-preview-stage { padding:4px; }
}
@media(max-width:768px) {
  .qr-workspace-body { display:flex; flex-direction:column; gap:24px; }
  .form-column,.preview-column { height:auto; overflow:visible; }
  .qr-workspace-page #typeChoices { max-height:none; overflow:visible; }
}