/* Shared contrast and type scale for every Kawkab QR page. */
:root { --muted: #171717 !important; }
body { color: #111214; font-size: 16px; }
.hero h1 em, .footer { color: #171717 !important; }
.eyebrow:not(.hero .eyebrow) { color: #171717 !important; }

/* Grey supporting copy becomes near-black while brand and action colours remain. */
:is(p, li, label, .hint, .fineprint, .batch-note, .batch-plan-note, .status,
    .guide-copy, .site-info p, .contact-copy, .account-footnote, .menu-option small,
    .project-empty, .empty-state, .placeholder-copy small, .preview-title p,
    .section-head p, .feature p, .step p, .note, .trust, .support-copy,
    .form-help, .field-help, .error-copy, .success-copy, .plan-tag,
    .pricing-note, .footer-made-meta, .feature-strip span) {
  color: #171717 !important;
}

/* Comfortable body copy and controls, without changing the QR preview dimensions. */
:is(p, li, .hint, .fineprint, .batch-note, .batch-plan-note, .status,
    .guide-copy, .site-info p, .contact-copy, .account-footnote, .menu-option small,
    .project-empty, .empty-state, .placeholder-copy small, .preview-title p,
    .section-head p, .feature p, .step p, .note, .trust, .support-copy,
    .form-help, .field-help, .error-copy, .success-copy, .pricing-note) {
  font-size: max(14px, 1em) !important;
  line-height: 1.55;
}

small, .eyebrow, .top-nav a, .footer-links a, .preview-live,
.batch-format-option small, .guide-step-label, .field label,
.type, .btn, .footer, .footer-made-by, .footer-made-meta {
  font-size: max(12px, 1em) !important;
}

/* Keep the small brand descriptor compact but legible. */
.wordmark small, .brand-lockup .brand-descriptor, .form-brand small {
  font-size: 11px !important;
}

:is(input, select, textarea, button, [role="button"], [role="option"]) {
  font-size: max(14px, 1em);
}
input::placeholder, textarea::placeholder {
  color: #202124 !important;
  opacity: .9;
  font-size: max(14px, 1em);
}

/* Preserve accessible contrast on dark/featured surfaces. */
:is(.plan.featured, .featured, [data-theme="dark"]) :is(p, li, small, .plan-tag, .fineprint, .hint, .batch-note, .status, .footer-made-meta) {
  color: #f3f4f6 !important;
}
:is(.plan.featured, .featured, [data-theme="dark"]) :is(.price small, .plan-tag) {
  color: #e5e7eb !important;
}

@media (max-width: 560px) {
  body { font-size: 15px; }
  :is(p, li, .hint, .fineprint, .batch-note, .batch-plan-note, .status,
      .guide-copy, .site-info p, .contact-copy, .account-footnote, .menu-option small,
      .project-empty, .empty-state, .placeholder-copy small, .preview-title p,
      .section-head p, .feature p, .step p, .note, .trust, .support-copy,
      .form-help, .field-help, .error-copy, .success-copy, .pricing-note) {
    font-size: max(13px, 1em) !important;
  }
  small, .eyebrow, .preview-live, .batch-format-option small,
  .guide-step-label, .field label, .type, .btn, .footer,
  .footer-made-by, .footer-made-meta { font-size: max(11px, 1em) !important; }
  .wordmark small, .brand-lockup .brand-descriptor, .form-brand small { font-size: 10px !important; }
}

/* Darken low-emphasis navigation and controls without removing brand accents. */
:is(.top-nav a:not(.cta), .footer-links a, .btn.light, .type:not(.active),
    .menu-trigger, .menu-option, .swatch span, .project-manage, .text-button,
    .batch-format-option small, .faq summary, .faq p, .footer-made-by) {
  color: #111214 !important;
}

/* Keep the generator aligned with the site shell and make its frame continuous. */
.generator-frame-wrap {
  width: 100% !important;
  max-width: 1280px !important;
  margin: 34px auto 0 !important;
  padding: 7px !important;
  border: 1.5px solid #111214 !important;
  border-radius: 24px !important;
  box-sizing: border-box !important;
  background: #fff !important;
  box-shadow: 0 16px 44px #11121412 !important;
}
.generator-frame-wrap .generator-frame-label {
  top: -17px !important;
  border: 1px solid #111214 !important;
  color: #315fe8 !important;
  background: #fff !important;
  box-shadow: 0 0 0 5px #fff !important;
  animation: none !important;
}
.generator-frame-wrap .generator-frame-label::before { animation: none !important; }
.generator-frame-wrap #create.workspace {
  border: 1px solid #111214 !important;
  border-radius: 17px !important;
  scroll-margin-top: 84px !important;
}

/* The preview keeps its sticky desktop behavior without trapping wheel scroll. */
@media (min-width: 1025px) and (min-height: 560px) {
  .generator-frame-wrap .preview-pane {
    position: sticky !important;
    top: 14px !important;
    max-height: calc(100vh - 28px) !important;
    overflow-y: auto !important;
    overscroll-behavior-y: auto !important;
    scrollbar-width: thin !important;
    scroll-behavior: auto;
  }
}
.generator-frame-wrap .preview-pane .qr-stage,
.generator-frame-wrap .preview-pane .placeholder {
  width: min(100%, 240px) !important;
  max-width: 240px !important;
}
.preview-live {
  border-color: #111214 !important;
  color: #315fe8 !important;
}

/* A clear, consistent label hierarchy across the generator controls. */
.form-pane .field > label,
.form-pane #fields > .field > label,
.dynamic-top h2 { color: #315fe8 !important; }
.form-pane .field > label,
.form-pane #fields > .field > label { font-size: 13px !important; font-weight: 750 !important; }
.form-pane .section-head h2 { font-size: 22px !important; }
.form-pane .section-head p,
.preview-title p { color: #111214 !important; }
.form-pane #customization > .field:has(#qr-theme),
.form-pane #customization > .field:has(#shape-options),
.form-pane #customization > .row:has(#fg),
.form-pane #customization > .row:has(#frame-style),
.form-pane #customization > .field:has(.center-tabs),
.form-pane #customization > .row:has(#padding) {
  padding-bottom: 13px !important;
  margin-bottom: 13px !important;
  border-bottom: 1px solid #171717 !important;
}

/* Match the requested reading order in Batch Studio and Dynamic QR. */
.batch-studio-eyebrow { color: #315fe8 !important; font-size: 16px !important; }
.batch-studio-intro h2 { font-size: 15px !important; color: #111214 !important; }
.batch-studio-intro p { font-size: 13px !important; color: #111214 !important; }
.batch-kicker { color: #315fe8 !important; font-size: 15px !important; }
.batch-heading-copy > b { font-size: 14px !important; }
.batch-heading-copy > small { color: #111214 !important; font-size: 12px !important; }
.dynamic-top h2 { font-size: 25px !important; }
.dynamic-top p { color: #111214 !important; font-size: 14px !important; }
.dashboard#pricing-dashboard, #dashboard, .project-card, .saved-code {
  border-color: #171717 !important;
}
.project-card {
  border-width: 1px !important;
  border-radius: 15px !important;
  box-shadow: 0 8px 24px #1112140b !important;
}
.saved-code { border-top: 1px solid #171717 !important; }
.footer { font-size: 13px !important; }
.footer p, .footer-links a, .footer-made-by, .footer-made-meta { color: #111214 !important; }
.footer .footer-logo, .footer .footer-made img, .footer .brand-lockup img { color: inherit; }
.about-product {
  display: grid;
  justify-items: start;
  gap: 8px;
  margin: 12px 0 20px;
  padding: 18px 0;
  border-top: 1px solid #171717;
  color: #111214;
}
.about-product-title { display: flex; align-items: center; gap: 9px; }
.about-product-title > span { color: #315fe8; font-size: 12px; font-weight: 800; letter-spacing: .12em; }
.about-product-title > img { width: 25px; height: 25px; object-fit: contain; }
.about-product-title > strong { color: #111214; font: 700 17px/1.2 "Oxanium", "DM Sans", sans-serif; }
.about-product > p { margin: 0; color: #111214 !important; font-size: 14px !important; }

/* Compact export choices in one menu, with a reliable open/close animation. */
.preview-pane .result-actions { display: flex !important; flex-wrap: wrap; align-items: center; }
.preview-pane .export-menu { position: relative; flex: 1 1 180px; min-width: 160px; }
.preview-pane .export-menu > summary {
  min-height: 42px; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 0 13px; border: 1px solid #111214; border-radius: 10px;
  background: #fff; color: #111214; font-size: 13px; font-weight: 750;
  cursor: pointer; list-style: none;
}
.preview-pane .export-menu > summary::-webkit-details-marker { display: none; }
.preview-pane .export-menu > summary span { color: #315fe8; font-size: 18px; transition: transform .18s ease; }
.preview-pane .export-menu[open] > summary span { transform: rotate(180deg); }
.preview-pane .export-menu-list {
  position: absolute; z-index: 40; inset: auto 0 48px; display: grid; gap: 6px;
  padding: 8px; border: 1px solid #111214; border-radius: 12px; background: #fff;
  box-shadow: 0 12px 30px #11121420; animation: exportMenuIn .16s ease both;
}
.preview-pane .export-menu-list button { width: 100%; min-height: 38px; justify-content: flex-start; font-size: 13px !important; }
.preview-pane #save-project { flex: 1 1 100%; }
@keyframes exportMenuIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 1024px) {
  .generator-frame-wrap { padding: 6px !important; border-radius: 21px !important; }
  .generator-frame-wrap .preview-pane { position: static !important; max-height: none !important; overflow: visible !important; }
  .generator-frame-wrap .preview-pane .qr-stage,
  .generator-frame-wrap .preview-pane .placeholder { width: min(100%, 240px) !important; max-width: 240px !important; }
}
@media (max-width: 620px) {
  .generator-frame-wrap { margin-top: 29px !important; padding: 5px !important; border-radius: 18px !important; }
  .generator-frame-wrap .generator-frame-label { top: -15px !important; }
  .generator-frame-wrap #create.workspace { border-radius: 14px !important; }
  .generator-frame-wrap .preview-pane .qr-stage,
  .generator-frame-wrap .preview-pane .placeholder { width: min(100%, 240px) !important; max-width: 240px !important; }
  .batch-studio-section { padding: 17px 14px !important; }
  .batch-studio-eyebrow { font-size: 15px !important; }
  .batch-studio-intro h2 { font-size: 14px !important; }
}
@media (max-width: 560px) {
  .batch-studio-eyebrow { font-size: 14px !important; }
  .batch-studio-intro h2 { font-size: 13px !important; }
}

/* Keep account controls and the primary category easy to spot. */
.account-trigger { min-height: 40px !important; padding: 0 14px !important; font-size: 14px !important; }
.top-nav a:not(.cta) { font-size: 13px !important; }
.form-pane #fields > .field:first-child > label { font-size: 15px !important; }
@media(max-width:560px) { .account-trigger { min-height: 38px !important; padding: 0 11px !important; font-size: 13px !important; } .top-nav a:not(.cta) { font-size: 12px !important; } }
.about-brandline { display:flex; align-items:center; margin:0 0 12px; }
.about-brandline img { width:30px; height:30px; object-fit:contain; }
.about-brandline strong { color:#111214; font:600 21px/1 "Oxanium","DM Sans",sans-serif; letter-spacing:-.025em; }
.site-info#about .eyebrow { color:#315fe8 !important; font-size:14px !important; }

/* Final design pass requested across generator, workspaces, and page copy. */
:root { --line:#34373b !important; }
*:not(svg):not(path):not(canvas):not(img):not(video):not(iframe):not(.btn.primary):not(.type.active):not(.shape.active):not(.batch-format-option.is-active) {
  border-color:#34373b !important;
}
.generator-frame-wrap #create.workspace {
  border:2px solid #111214 !important;
  box-shadow:inset 0 0 0 1px #fff, 0 0 0 2px #111214, 0 16px 48px #11121418 !important;
}
.preview-live, .preview-live.is-generated { border:1px solid #111214 !important; color:#315fe8 !important; }
.preview-brand-copy > small { font-size:8px !important; }
.account-trigger, .account-trigger > span { font-size:12px !important; }
.form-pane .field > label, .form-pane #fields > .field > label { font-size:14px !important; color:#315fe8 !important; }
.form-pane #fields > .field:first-child > label { font-size:16px !important; }
.batch-studio-eyebrow { font-size:20px !important; }
.batch-studio-intro h2 { font-size:19px !important; }
.batch-studio-intro p { font-size:13px !important; color:#111214 !important; }
.batch-kicker { font-size:16px !important; }
.batch-heading-copy > b { font-size:16px !important; }
.batch-heading-copy > small { font-size:12px !important; color:#111214 !important; }
.dynamic-top h2 { color:#315fe8 !important; }
#dashboard.pricing, #dashboard.pricing.dashboard {
  padding:26px 22px 22px !important;
  border:1px solid #34373b !important;
  border-radius:20px !important;
  background:linear-gradient(140deg,#fff,#fafaff) !important;
}
.preview-pane .export-menu-list { position:static !important; inset:auto !important; margin-top:7px; }
.footer { font-size:13px !important; color:#111214 !important; }
.footer-links a, .footer-made-by, .footer-made-meta, .footer-made-meta strong { color:#111214 !important; }
.footer-links a { font-size:12px !important; }
.footer-made-by { font-size:12px !important; }
.footer-made-meta { font-size:10px !important; }
@media (max-width:620px) {
  .batch-studio-eyebrow { font-size:17px !important; }
  .batch-studio-intro h2 { font-size:17px !important; }
  .batch-kicker { font-size:14px !important; }
  .batch-heading-copy > b { font-size:15px !important; }
  .footer { font-size:12px !important; }
}

/* Batch QR workspace: straightforward typography, matching the rest of the app. */
.batch-studio-section { font-family: "DM Sans", system-ui, sans-serif !important; }
.batch-studio-eyebrow, .batch-kicker {
  color: #315fe8 !important; font: 600 13px/1.35 "DM Sans", system-ui, sans-serif !important;
  letter-spacing: 0 !important; text-transform: none !important;
}
.batch-studio-intro h2 {
  margin: 0 !important; color: #111214 !important;
  font: 650 18px/1.3 "DM Sans", system-ui, sans-serif !important; letter-spacing: 0 !important;
}
.batch-studio-intro p, .batch-heading-copy > small {
  color: #111214 !important; font: 400 13px/1.5 "DM Sans", system-ui, sans-serif !important;
}
.batch-heading-copy > b { color: #111214 !important; font: 650 15px/1.35 "DM Sans", system-ui, sans-serif !important; }
.batch-limit { font: 600 11px/1.3 "DM Sans", system-ui, sans-serif !important; }
.batch-plan-note, .batch-note { color: #111214 !important; font: 400 13px/1.5 "DM Sans", system-ui, sans-serif !important; }
.batch-input-label { font: 600 12px/1.4 "DM Sans", system-ui, sans-serif !important; letter-spacing: 0 !important; }
.batch-input-label small { color: #111214 !important; font: 400 12px/1.4 "DM Sans", system-ui, sans-serif !important; }
.batch-format-option > span { font: 600 12px/1.25 "DM Sans", system-ui, sans-serif !important; }
.batch-format-option small { font: 400 11px/1.3 "DM Sans", system-ui, sans-serif !important; }
.batch-download { font: 600 14px/1.3 "DM Sans", system-ui, sans-serif !important; }
@media (max-width:620px) {
  .batch-studio-intro h2 { font-size:17px !important; }
  .batch-studio-eyebrow, .batch-kicker { font-size:12px !important; }
  .batch-plan-note, .batch-note { font-size:12px !important; }
}

/* Preview branding and status polish requested from the latest screenshot. */
.generator-frame-wrap {
  position:relative !important; left:auto !important; transform:none !important;
  width:min(100%,1280px) !important; max-width:1280px !important;
  margin-left:auto !important; margin-right:auto !important;
}
.generator-frame-label::before {
  transform-origin:center;
  animation:generator-live-pulse 1.25s ease-in-out infinite !important;
}
.preview-brand-copy { display:grid !important; align-content:center; gap:2px !important; min-width:0; }
.preview-brand-name {
  display:block !important; margin:0 !important; white-space:nowrap;
  font:700 15px/1.05 "DM Sans",system-ui,sans-serif !important;
  letter-spacing:0 !important;
}
.preview-brand-name { color:#111214 !important; }
.preview-brand-name i { color:#315fe8 !important; font-style:normal !important; }
.preview-brand-copy > small {
  color:#7b8395 !important; font:700 8px/1.05 "DM Sans",system-ui,sans-serif !important;
  letter-spacing:.1em !important; text-transform:uppercase;
}
.preview-live {
  font:700 16px/1.2 "DM Sans",system-ui,sans-serif !important;
  letter-spacing:.08em !important; padding:8px 13px !important;
}
.preview-live.is-generated {
  color:#087eaf !important; border-color:#087eaf !important;
  background:#eefaff !important;
}
.preview-live.is-generated i {
  background:#087eaf !important; box-shadow:0 0 0 3px #087eaf20 !important;
}
#status.is-generated {
  color:#087eaf !important; border-color:#087eaf !important; background:#eefaff !important;
}
@media(max-width:620px) {
  .preview-live { font-size:13px !important; padding:7px 9px !important; letter-spacing:.04em !important; }
  .preview-brand-name { font-size:14px !important; }
  .preview-brand-copy > small { font-size:8px !important; }
}
@media(prefers-reduced-motion:reduce) {
  .generator-frame-label::before { animation:none !important; }
}

/* Keep Account and the primary header action at the same readable size. */
.nav-actions { display:flex !important; align-items:center !important; gap:8px !important; }
.nav-actions .cta, .nav-actions .account-trigger, .nav-actions .account-trigger > span {
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  min-height:40px !important; padding:0 14px !important;
  font:700 16px/1.2 "DM Sans",system-ui,sans-serif !important;
}
@media(max-width:900px) {
  .nav-actions { gap:7px !important; }
  .nav-actions .cta, .nav-actions .account-trigger, .nav-actions .account-trigger > span {
    min-height:38px !important; padding:0 12px !important; font-size:14px !important;
  }
}
@media(max-width:560px) {
  .nav-actions { gap:6px !important; }
  .nav-actions .cta, .nav-actions .account-trigger, .nav-actions .account-trigger > span {
    min-height:36px !important; padding:0 10px !important; font-size:12px !important;
  }
}

/* Header QR action: clear brand-blue treatment with a lightweight scanner mark. */
.top-nav .cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  white-space: nowrap;
  text-decoration: none;
  background: linear-gradient(125deg, #04cfee 8%, #1e75ff 53%, #6549d8 96%) !important;
  color: #fff !important;
  border: 1px solid transparent !important;
  border-radius: 11px !important;
  box-shadow: 0 6px 16px #1e75ff38, inset 0 1px #ffffff45 !important;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease !important;
}
.top-nav .cta:hover {
  transform: translateY(-1px);
  filter: saturate(1.08);
  box-shadow: 0 9px 20px #1e75ff40, inset 0 1px #ffffff55 !important;
}
.top-nav .cta:active { transform: translateY(0); }
.top-nav .cta .header-qr-scan { display: block; width: 18px; height: 18px; flex: none; }
.top-nav .cta > span { line-height: 1; }
@media (max-width: 560px) {
  .top-nav .cta { gap: 6px !important; }
  .top-nav .cta .header-qr-scan { width: 16px; height: 16px; }
}
@media (prefers-reduced-motion: reduce) { .top-nav .cta { transition: none !important; } }

/* Keep the live-generator badge polished and proportional to the preview header. */
.preview-live {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-height: 34px;
  padding: 6px 11px !important;
  border: 1px solid #dbe4f2 !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #365fe3 !important;
  font: 600 13px/1.2 "DM Sans", system-ui, sans-serif !important;
  letter-spacing: .045em !important;
  box-shadow: 0 2px 7px #263d6810;
}
body .preview-pane .preview-live:not(.is-generated) > i {
  width: 7px !important;
  height: 7px !important;
  flex: 0 0 7px;
  border-radius: 50%;
  background: #35bd91 !important;
  box-shadow: 0 0 0 3px #35bd911c !important;
}
.preview-live.is-generated {
  color: #087eaf !important;
  border-color: #b8e5f3 !important;
  background: #f0fbff !important;
}
body .preview-pane .preview-live.is-generated > i {
  background: #087eaf !important;
  box-shadow: 0 0 0 3px #087eaf1c !important;
}
@media(max-width:620px) {
  .preview-live { min-height: 30px; gap: 6px !important; padding: 5px 9px !important; font-size: 12px !important; }
  body .preview-pane .preview-live:not(.is-generated) > i { width: 6px !important; height: 6px !important; flex-basis: 6px; }
}

/* Batch workspace hierarchy: prominent section name, quieter supporting title. */
.batch-studio-section {
  padding: 23px 25px 25px !important;
  border: 1px solid #dce5f2 !important;
  border-radius: 20px !important;
  background: linear-gradient(145deg, #fff 0%, #f8fbff 72%, #fbf9ff 100%) !important;
  box-shadow: 0 14px 38px #263d680b !important;
}
.batch-studio-intro {
  display: grid !important;
  align-items: start !important;
  justify-items: start !important;
  gap: 4px !important;
  margin: 0 0 17px !important;
}
.batch-studio-eyebrow {
  color: #315fe8 !important;
  font: 700 20px/1.25 "Manrope", "DM Sans", system-ui, sans-serif !important;
  letter-spacing: -.025em !important;
  text-transform: none !important;
}
.batch-studio-intro h2 {
  color: #273149 !important;
  font: 600 15px/1.35 "DM Sans", system-ui, sans-serif !important;
  letter-spacing: 0 !important;
}
.batch-studio-intro p {
  margin-top: 2px !important;
  color: #66738a !important;
  font: 400 13px/1.5 "DM Sans", system-ui, sans-serif !important;
}
.batch-studio-section .batch {
  border-color: #e0e7f1 !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: 0 5px 18px #263d6808;
}
.batch-studio-section .batch-head { padding: 15px 17px !important; }
.batch-studio-section .batch-body { padding: 0 17px 17px !important; }
.batch-kicker {
  color: #4569d8 !important;
  font: 650 12px/1.3 "DM Sans", system-ui, sans-serif !important;
  letter-spacing: .015em !important;
  text-transform: none !important;
}
.batch-heading-copy > b { font: 650 15px/1.35 "DM Sans", system-ui, sans-serif !important; }
.batch-heading-copy > small { color: #66738a !important; font: 400 12px/1.45 "DM Sans", system-ui, sans-serif !important; }
.batch-limit { border-color: #e0e7f1 !important; background: #f8faff !important; }
.batch-studio-section .batch-format-option { border-color: #e0e7f1 !important; border-radius: 13px !important; }
.batch-studio-section .batch-format-option.is-active { border-color: #607cff !important; background: #f4f6ff !important; box-shadow: 0 0 0 2px #607cff18 !important; }
.batch-studio-section .batch-plan-note { border-color: #e5ebf5 !important; border-radius: 12px !important; background: #f7f9ff !important; }
.batch-studio-section #batch-input { border-color: #dfe6f1 !important; border-radius: 12px !important; }
.batch-studio-section #batch-input:focus { border-color: #607cff !important; box-shadow: 0 0 0 3px #607cff1c !important; outline: none; }
.batch-studio-section .batch-download { border-radius: 11px !important; }
@media(max-width:620px) {
  .batch-studio-section { padding: 18px 14px 16px !important; border-radius: 16px !important; }
  .batch-studio-eyebrow { font-size: 18px !important; }
  .batch-studio-intro h2 { font-size: 14px !important; }
  .batch-studio-intro p { font-size: 12px !important; }
  .batch-studio-intro { margin-bottom: 13px !important; }
  .batch-studio-section .batch-head { padding: 13px 12px !important; }
  .batch-studio-section .batch-body { padding: 0 12px 13px !important; }
}

/* Quiet header CTA: brand colour stays in the scan icon, with calm readable text. */
.top-nav .cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 40px !important;
  padding: 0 13px 0 7px !important;
  border: 1px solid #d9e4f3 !important;
  border-radius: 11px !important;
  background: #fff !important;
  color: #202b43 !important;
  font: 700 16px/1.1 "DM Sans", system-ui, sans-serif !important;
  letter-spacing: -.015em !important;
  box-shadow: 0 2px 7px #263d680d !important;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}
.top-nav .cta .header-qr-scan {
  display: block !important;
  width: 23px !important;
  height: 23px !important;
  flex: none !important;
  padding: 3px !important;
  border-radius: 7px;
  background: linear-gradient(135deg, #28bdd5, #3974f1 68%, #7258db) !important;
  color: #fff !important;
}
.top-nav .cta:hover {
  transform: translateY(-1px);
  border-color: #b9cafa !important;
  background: #f8fbff !important;
  color: #17243b !important;
  box-shadow: 0 5px 13px #315fe81a !important;
}
.top-nav .cta:active { transform: translateY(0); box-shadow: 0 1px 3px #315fe814 !important; }
.top-nav .cta:focus-visible { outline: 3px solid #315fe833 !important; outline-offset: 2px; }
@media(max-width:900px) {
  .top-nav .cta { min-height: 38px !important; padding: 0 10px 0 6px !important; font-size: 14px !important; }
  .top-nav .cta .header-qr-scan { width: 21px !important; height: 21px !important; }
}
@media(max-width:560px) {
  .top-nav .cta { min-height: 36px !important; gap: 6px !important; padding: 0 8px 0 5px !important; font-size: 12px !important; }
  .top-nav .cta .header-qr-scan { width: 19px !important; height: 19px !important; padding: 2px !important; }
}
@media(prefers-reduced-motion:reduce) { .top-nav .cta { transition: none !important; } }
/* Header primary action: calm solid QR blue with a simple white scanner glyph. */
.top-nav .cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 40px !important;
  padding: 0 14px !important;
  border: 1px solid #315fe8 !important;
  border-radius: 11px !important;
  background: #315fe8 !important;
  color: #fff !important;
  font: 650 16px/1.1 "DM Sans", system-ui, sans-serif !important;
  letter-spacing: -.015em !important;
  box-shadow: 0 4px 11px #315fe826 !important;
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease !important;
}
.top-nav .cta .header-qr-scan {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  flex: none !important;
  padding: 0 !important;
  border-radius: 0;
  background: transparent !important;
  color: #fff !important;
}
.top-nav .cta:hover {
  transform: translateY(-1px);
  border-color: #264fc8 !important;
  background: #264fc8 !important;
  color: #fff !important;
  box-shadow: 0 7px 16px #315fe83d !important;
}
.top-nav .cta:active { transform: translateY(0); box-shadow: 0 2px 6px #315fe826 !important; }
.top-nav .cta:focus-visible { outline: 3px solid #315fe833 !important; outline-offset: 2px; }
@media(max-width:900px) {
  .top-nav .cta { min-height: 38px !important; padding: 0 11px !important; font-size: 14px !important; }
  .top-nav .cta .header-qr-scan { width: 17px !important; height: 17px !important; }
}
@media(max-width:560px) {
  .top-nav .cta { min-height: 36px !important; gap: 6px !important; padding: 0 9px !important; font-size: 12px !important; }
  .top-nav .cta .header-qr-scan { width: 16px !important; height: 16px !important; }
}
@media(prefers-reduced-motion:reduce) { .top-nav .cta { transition: none !important; } }

/* Generator indicators: pulse the frame dot; keep live status blue until a QR is finalized. */
.generator-frame-wrap .generator-frame-label::before {
  background:#31c39a !important;
  box-shadow:0 0 0 0 #31c39a66 !important;
  animation:generator-live-pulse 1.6s ease-out infinite !important;
}
.preview-live {
  border-color:#c8d8ff !important;
  background:#f3f7ff !important;
  color:#315fe8 !important;
  box-shadow:0 3px 10px #315fe814 !important;
}
body .preview-pane .preview-live:not(.is-generated) > i {
  background:#315fe8 !important;
  box-shadow:0 0 0 3px #315fe81c !important;
  animation:none !important;
}
.preview-live.is-generated {
  border-color:#b7e6cc !important;
  background:#edfbf2 !important;
  color:#16804a !important;
  box-shadow:0 4px 13px #16804a18 !important;
}
body .preview-pane .preview-live.is-generated > i {
  background:#20a45a !important;
  box-shadow:0 0 0 3px #20a45a1e !important;
  animation:liveDotPulse 1.8s ease-in-out infinite alternate !important;
}
@media(prefers-reduced-motion:reduce) {
  .generator-frame-wrap .generator-frame-label::before,
  body .preview-pane .preview-live.is-generated > i { animation:none !important; }
}
/* Saved projects panel uses the same cool blue-lavender surface as the QR studio. */
#dashboard.pricing.dashboard {
  background:linear-gradient(135deg,#eaf4ff 0%,#f0f2ff 54%,#f8efff 100%) !important;
  box-shadow:0 14px 38px #465bc10c !important;
}
#dashboard.pricing.dashboard .project-empty,
#dashboard.pricing.dashboard .project-card {
  background:#ffffffd9 !important;
}
/* Use the product's complete QR Generator logo lockup in the footer. */
.footer .footer-product-lockup {
  display:inline-flex !important;
  align-items:center !important;
  flex:none;
  min-width:0;
}
.footer .footer-product-lockup .footer-brand-logo {
  display:block !important;
  width:190px !important; min-width:190px !important; height:53px !important; min-height:53px !important;
  height:auto !important;
  max-width:100%;
  object-fit:contain;
}
@media(max-width:560px) {
  .footer .footer-product-lockup .footer-brand-logo { width:164px !important; min-width:164px !important; height:46px !important; min-height:46px !important; }
}
/* Product lockups use the same icon, type and color treatment as the header. */
.preview-brand-name { font-family:"Oxanium","DM Sans",sans-serif !important; font-size:18px !important; font-weight:600 !important; letter-spacing:-.025em !important; color:#111827 !important; }
.preview-brand-name i { margin-left:2px; padding-right:2px; font-family:"Oxanium","DM Sans",sans-serif !important; font-size:inherit !important; font-weight:600 !important; letter-spacing:-.025em !important; background:linear-gradient(125deg,#04cfee 8%,#1e75ff 53%,#9b42ed 96%) !important; -webkit-background-clip:text !important; background-clip:text !important; color:transparent !important; filter:drop-shadow(0 2px 5px #6f54ee30); }
.preview-brand-copy > small { color:#17243B !important; font:600 8px/1 "DM Sans",sans-serif !important; letter-spacing:.2em !important; }
.footer .footer-product-lockup { display:flex !important; align-items:center !important; gap:11px !important; width:max-content; min-width:0; flex:none; color:inherit; text-decoration:none; }
.footer .footer-product-lockup .mark { width:48px !important; height:48px !important; flex:none; }
.footer .footer-product-lockup .wordmark { display:flex; flex-direction:column; align-items:flex-start; gap:3px; }
.footer .footer-product-lockup .brand-name { display:flex; align-items:baseline; color:#111827; font:600 21px/1 "Oxanium","DM Sans",sans-serif; letter-spacing:-.025em; }
.footer .footer-product-lockup .brand-x { margin-left:2px; padding-right:2px; font:600 21px/1 "Oxanium","DM Sans",sans-serif; letter-spacing:-.025em; background:linear-gradient(125deg,#04cfee 8%,#1e75ff 53%,#9b42ed 96%); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 2px 5px #6f54ee30); }
.footer .footer-product-lockup .wordmark small { display:block; margin:0 0 0 1px; color:#17243B; font:600 9px/1 "DM Sans",sans-serif; letter-spacing:.2em; text-transform:uppercase; }
@media(max-width:560px){.footer .footer-product-lockup .mark{width:44px!important;height:44px!important}.footer .footer-product-lockup .brand-name,.footer .footer-product-lockup .brand-x{font-size:19px}}

/* Keep footer branding identical to the header lockup and spacing consistent. */
.footer .footer-product-lockup{gap:11px!important}
.footer .footer-product-lockup .mark{width:48px!important;height:48px!important;overflow:visible!important}
.footer .footer-product-lockup .mark img{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important}
.footer .footer-product-lockup .wordmark{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:3px!important}
.footer .footer-product-lockup .brand-name,.footer .footer-product-lockup .brand-x{font-family:"Oxanium","DM Sans",sans-serif!important;font-size:21px!important;font-weight:600!important;letter-spacing:-.025em!important}
.footer .footer-product-lockup .wordmark small{font:600 9px/1 "DM Sans",sans-serif!important;letter-spacing:.2em!important;color:#17243b!important}
@media(max-width:560px){.footer .footer-product-lockup .mark{width:44px!important;height:44px!important}.footer .footer-product-lockup .brand-name,.footer .footer-product-lockup .brand-x{font-size:19px!important}}

/* Carry the hero's lavender dot texture down the right side of the whole app. */
html{background:#fbfbff}
body{background:radial-gradient(ellipse at 12% 8%,#eefcff 0,transparent 31%),radial-gradient(ellipse at 92% 16%,#f6efff 0,transparent 30%),#fbfbff!important}
body::before{content:"";position:fixed;z-index:0;top:0;right:0;bottom:0;width:min(46vw,760px);pointer-events:none;opacity:.68;background:radial-gradient(circle,#9272ea38 1.1px,transparent 1.8px) 0 0/15px 15px;mask-image:linear-gradient(90deg,transparent 0%,#000 38%,#000 100%),linear-gradient(180deg,transparent 0%,#000 15%,#000 84%,transparent 100%);mask-composite:intersect;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 38%,#000 100%),linear-gradient(180deg,transparent 0%,#000 15%,#000 84%,transparent 100%);-webkit-mask-composite:source-in}
.shell{position:relative;z-index:1}
.pricing-upgrade{padding:8px 0 0!important}
#features.pricing-upgrade + #how-to-use.site-info{padding-top:22px!important;padding-bottom:0!important}
#how-to-use.site-info + #about.site-info{padding-top:22px!important}
.site-info{padding-top:24px!important;padding-bottom:0!important}
#dynamic-manager{padding-top:26px!important;padding-bottom:26px!important}
#dashboard.pricing.dashboard{padding-top:26px!important;padding-bottom:0!important}
@media(max-width:560px){body::before{width:80vw;opacity:.42}.pricing-upgrade{padding-top:6px!important}#dynamic-manager{padding-top:22px!important;padding-bottom:22px!important}#dashboard.pricing.dashboard{padding-top:22px!important}.site-info{padding-top:22px!important}}
html.guide-embed-mode body::before{display:none!important}
.menu-select-featured .menu-value { display:flex; align-items:center; gap:10px; }
.menu-options .menu-option { display:flex; justify-content:flex-start; align-items:center; gap:11px; min-height:52px; padding:8px 10px!important; }
.menu-option-icon { display:grid; place-items:center; flex:0 0 34px; width:34px; height:34px; border:1px solid #e2e8fb; border-radius:10px; background:linear-gradient(145deg,#f0f7ff,#f4efff); color:#273252; }
.category-icon { display:block; width:21px; height:21px; overflow:visible; flex:none; }
.category-icon-accent { color:#526fe8; stroke:#526fe8; }
.menu-option-copy { display:flex; align-items:center; justify-content:space-between; flex:1; min-width:0; gap:12px; }
.menu-option-name { color:#242638; font:600 14px/1.25 "DM Sans",system-ui,sans-serif; }
.menu-option-copy small { color:#777d91!important; font:500 11px/1.3 "DM Sans",system-ui,sans-serif; text-align:right; white-space:normal; }
.menu-value .category-icon { width:20px; height:20px; color:#273252; }
.menu-value>span { font:600 13px "DM Sans",system-ui,sans-serif; }
.menu-options .menu-option[aria-selected="true"] { background:linear-gradient(100deg,#edf7ff,#f3efff)!important; }
@media(max-width:560px){.menu-options .menu-option{min-height:48px;gap:9px;padding:7px 8px!important}.menu-option-icon{flex-basis:30px;width:30px;height:30px;border-radius:9px}.category-icon{width:19px;height:19px}.menu-option-name{font-size:13px}.menu-option-copy small{font-size:10px;max-width:42%;}}
/* Export dropdown follows the same cool blue-lavender controls as QR settings. */
.preview-pane .export-menu > summary {
  min-height:46px !important;
  border:1px solid #dfe2ee !important;
  border-radius:12px !important;
  background:linear-gradient(135deg,#fff,#f7f8ff) !important;
  color:#242638 !important;
  box-shadow:0 2px 7px #272b4c08 !important;
  transition:border-color .18s,box-shadow .18s,background .18s !important;
}
.preview-pane .export-menu > summary:hover,
.preview-pane .export-menu[open] > summary {
  border-color:#aeb7dc !important;
  background:#fff !important;
  box-shadow:0 0 0 3px #7668dc18,0 6px 16px #322b7510 !important;
}
.preview-pane .export-menu > summary span { color:#5145aa !important; }
.preview-pane .export-menu-list {
  border:1px solid #e0e2ee !important;
  border-radius:14px !important;
  background:linear-gradient(145deg,#fff,#f8f8ff) !important;
  box-shadow:0 18px 44px #20234224 !important;
}
.preview-pane .export-menu-list button {
  min-height:40px !important;
  border:1px solid #e4e7f1 !important;
  border-radius:10px !important;
  background:#fff !important;
  color:#242638 !important;
  box-shadow:none !important;
  transition:background .16s,border-color .16s,transform .16s !important;
}
.preview-pane .export-menu-list button:hover,
.preview-pane .export-menu-list button:focus-visible {
  border-color:#cbd5f2 !important;
  background:linear-gradient(100deg,#eafaff,#f4efff) !important;
  color:#2c2755 !important;
  transform:translateX(2px);
}
.preview-pane .export-menu-list #download-jpg {
  border-color:#d7def7 !important;
  background:linear-gradient(100deg,#edf8ff,#f0edff) !important;
  color:#315fe8 !important;
}

/* Keep the plans callout concise so it does not dominate the page. */
#features .pricing-upgrade-card{padding:12px 22px!important}
#features .pricing-upgrade-card h2{margin:4px 0 2px;line-height:1.12}
#features .pricing-upgrade-card p{line-height:1.45}
@media(max-width:560px){#features .pricing-upgrade-card{padding:12px 15px!important}}

/* Bring the contact title down to the app's medium heading scale. */
.contact-inner h2{font-size:clamp(25px,3vw,34px)!important;line-height:1.1!important;letter-spacing:-.05em!important}

/* Center and clarify the generator frame label; animate its live dot gently. */
.generator-frame-wrap .generator-frame-label{
  left:50%!important;transform:translateX(-50%)!important;text-align:center;justify-content:center;
  padding:9px 21px!important;font-size:12px!important;line-height:1!important;letter-spacing:.24em!important;
}
.generator-frame-wrap .generator-frame-label::before{
  width:8px!important;height:8px!important;transform-origin:center;
  animation:generator-dot-breathe 1.35s ease-in-out infinite!important;
}
@keyframes generator-dot-breathe{
  0%,100%{transform:scale(.82);box-shadow:0 0 0 0 #31c39a35}
  50%{transform:scale(1.3);box-shadow:0 0 0 4px #31c39a12}
}
@media(max-width:560px){.generator-frame-wrap .generator-frame-label{padding:8px 17px!important;font-size:11px!important}}
@media(prefers-reduced-motion:reduce){.generator-frame-wrap .generator-frame-label::before{animation:none!important}}
/* Match the export menu arrow to the app's custom select chevron. */
.preview-pane .export-menu > summary .export-chevron{
  display:grid!important;place-items:center;width:25px;height:25px;flex:0 0 25px;
  border-radius:8px;background:linear-gradient(135deg,#e9fbff,#f2edff);
  color:#5145aa!important;font-size:0!important;transition:transform .22s cubic-bezier(.34,1.56,.64,1)!important;
}
.preview-pane .export-menu > summary .export-chevron svg{display:block;width:100%;height:100%}
.preview-pane .export-menu[open] > summary .export-chevron{transform:rotate(180deg)}
@media(max-width:560px){.preview-pane .export-menu > summary .export-chevron{width:24px;height:24px;flex-basis:24px}}
@media(prefers-reduced-motion:reduce){.preview-pane .export-menu > summary .export-chevron{transition:none!important}}
/* Lavender-blue outer generator frame border. */
.generator-frame-wrap{border-color:#8c91e8!important}

/* Medium-large display scale across the app, excluding the QR generator workspace. */
.hero h1{font-size:clamp(40px,5vw,60px)!important;line-height:1.04!important;letter-spacing:-.06em!important}
.intro h1{font-size:clamp(30px,4.2vw,42px)!important;line-height:1.08!important;letter-spacing:-.055em!important}
.brand-copy h1{font-size:clamp(30px,3.8vw,46px)!important;line-height:1.06!important;letter-spacing:-.06em!important}
.site-info-head h2,.about-card h2{font-size:clamp(26px,3vw,34px)!important;line-height:1.1!important;letter-spacing:-.05em!important}
.guide-heading h2{font-size:clamp(25px,3vw,32px)!important;line-height:1.1!important;letter-spacing:-.05em!important}