/* 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; gap:9px; margin:3px 0 12px; }
.about-brandline img { width:30px; height:30px; object-fit:contain; }
.about-brandline strong { color:#111214; font:700 18px/1.15 "Oxanium","DM Sans",sans-serif; }
.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:9px !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; }
}