: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);
}

/* QR inventory: saved configurations are rendered in independent canvases. */
.inventory-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
.inventory-card{min-width:0;background:var(--card-bg);border:1px solid var(--border-color-custom);border-radius:18px;box-shadow:0 4px 18px #17253d08;transition:transform .15s,border-color .15s,box-shadow .15s}
.inventory-card:hover{transform:translateY(-2px);border-color:#EE4046;box-shadow:0 10px 28px #17253d12}
.inventory-preview{margin:16px;min-height:250px;background:#f8f8f8;border-radius:12px;display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center;padding:14px;overflow:hidden}
.inventory-preview .qr-frame-wrapper{width:220px;max-width:100%;box-sizing:border-box;box-shadow:none;padding:8px}
.inventory-preview canvas,.inventory-preview svg{display:block;max-width:100%;height:auto!important}
.inventory-preview .frame-banner{overflow-wrap:anywhere}
.inventory-body{padding:0 18px 18px;min-width:0;flex:1;display:flex;flex-direction:column}.inventory-card{display:flex;flex-direction:column}.inventory-preview{height:300px;flex-shrink:0}.inventory-actions{margin-top:auto}
.inventory-title{font-size:1.05rem;display:flex;gap:8px;align-items:center;margin:0 0 10px;min-width:0}
.inventory-title span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.inventory-title i{color:#EE4046;flex-shrink:0}
.inventory-meta,.inventory-stats{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;align-items:center;font-size:.8rem;color:var(--bs-secondary-color)}
.inventory-badge{border-radius:6px;background:#ee404610;color:#EE4046;padding:4px 8px}
.inventory-stats{margin:14px 0}.inventory-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.inventory-actions .btn{font-size:.78rem}
.inventory-more{margin-left:auto;position:relative}.inventory-more summary{list-style:none}.inventory-more summary::-webkit-details-marker{display:none}.inventory-menu{position:absolute;right:0;bottom:35px;z-index:10;background:var(--card-bg);border:1px solid var(--border-color-custom);box-shadow:var(--card-shadow);border-radius:8px;padding:8px;min-width:130px;display:grid;gap:6px}
.inventory-sort{max-width:190px;margin-top:10px}.inventory-empty{grid-column:1/-1;text-align:center;padding:64px 20px;background:var(--card-bg);border:1px dashed var(--border-color-custom);border-radius:18px}.inventory-empty>i{font-size:48px;color:#64748b;display:block;margin-bottom:14px}
.inventory-skeleton{width:100%;height:230px;background:linear-gradient(90deg,#eee,#f8f8f8,#eee);background-size:200% 100%;border-radius:12px;animation:inventory-pulse 1.5s infinite}.inventory-loading{padding:20px}.skeleton-line{height:20px;margin-top:20px;width:70%}.inventory-pagination{display:flex;align-items:center;justify-content:center;gap:16px;margin:24px 0}
#qrInventory .btn-check:checked+label{background:#EE4046;border-color:#EE4046;color:white}
#qrInventory #searchQ{padding-left:36px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Ccircle cx='10' cy='10' r='7'/%3E%3Cpath d='m15 15 6 6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:10px center}
body:has(#qrInventory) .app-navbar>div:first-child>span,body:has(#qrInventory) .app-navbar .text-primary,body:has(#qrInventory) footer{display:none!important}
@keyframes inventory-pulse{to{background-position:-200% 0}}
@media(min-width:600px){.inventory-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.inventory-list{grid-template-columns:1fr}.inventory-list .inventory-card{flex-direction:row;align-items:center}.inventory-list .inventory-preview{width:130px;height:140px;min-height:130px;flex-shrink:0}.inventory-list .inventory-body{flex:1;padding:18px}.inventory-list .qr-frame-wrapper{padding:4px}.inventory-list .frame-banner{font-size:9px}}
@media(min-width:1200px){.inventory-grid:not(.inventory-list){grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1440px){.inventory-grid:not(.inventory-list){grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:599px){body:has(#qrInventory) .app-content{padding:16px}#qrInventory>.d-flex{gap:12px;flex-wrap:wrap}.inventory-preview{margin:12px;padding:10px}}
@media(prefers-reduced-motion:reduce){.inventory-skeleton{animation:none}.inventory-card{transition:none}}

[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 Overrides for #EE4046 Brand Theme */
.btn-primary {
  background-color: #EE4046 !important;
  border-color: #EE4046 !important;
  color: #ffffff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: #D73339 !important;
  border-color: #D73339 !important;
  color: #ffffff !important;
}

.btn-outline-primary {
  color: #EE4046 !important;
  border-color: #EE4046 !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  background-color: #EE4046 !important;
  border-color: #EE4046 !important;
  color: #ffffff !important;
}

.text-primary {
  color: #EE4046 !important;
}

.bg-primary {
  background-color: #EE4046 !important;
}

.bg-primary-subtle {
  background-color: rgba(238, 64, 70, 0.1) !important;
  color: #EE4046 !important;
}

.badge-primary {
  background-color: #EE4046 !important;
  color: #ffffff !important;
}

.badge.bg-primary {
  background-color: #EE4046 !important;
  color: #ffffff !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;
}

/* App Layout */
.app-wrapper {
  display: flex;
  min-height: 100vh;
}

.app-sidebar {
  width: var(--sidebar-width);
  background-color: var(--sidebar-bg);
  border-right: 1px solid var(--border-color-custom);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease-in-out;
}

.app-main {
  margin-left: var(--sidebar-width);
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.app-navbar {
  height: var(--header-height);
  background-color: var(--sidebar-bg);
  border-bottom: 1px solid var(--border-color-custom);
  position: sticky;
  top: 0;
  z-index: 1020;
}

.app-content {
  padding: 1.5rem;
  flex-grow: 1;
}

/* Sidebar Navigation */
.sidebar-brand {
  height: var(--header-height);
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  border-bottom: 1px solid var(--border-color-custom);
}

.sidebar-logo { width: 122px; height: auto; display: block; object-fit: contain; }
.sidebar-wordmark { font-size: 1.65rem; font-weight: 700; letter-spacing: -.05em; color: #182235; }

.brand-icon-badge {
  background: linear-gradient(135deg, #EE4046 0%, #D73339 100%);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(238, 64, 70, 0.35);
}

.nav-link-custom {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 1rem;
  margin: 0.15rem 0.75rem;
  border-radius: var(--radius-sm);
  color: var(--bs-body-color);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.93rem;
  transition: all 0.15s ease;
}

.nav-link-custom:hover {
  background-color: rgba(238, 64, 70, 0.08);
  color: #EE4046;
}

.nav-link-custom.active {
  background-color: #EE4046;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(238, 64, 70, 0.25);
}

.nav-link-custom i {
  font-size: 1.15rem;
}

/* 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: linear-gradient(135deg,#f0444f,#ed3341); 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: 86px !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) { .sidebar-logo { width: 170px; } .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%;
}

/* Mobile Drawer */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 1030;
}

@media (max-width: 991.98px) {
  .app-sidebar {
    transform: translateX(-100%);
    visibility: hidden;
  }
  .app-sidebar.show {
    transform: translateX(0);
    visibility: visible;
  }
  .app-main {
    margin-left: 0;
  }
  .sidebar-backdrop.show {
    display: block;
  }
}

/* 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;
}