/* 01. Foundations: tokens, reset, and base elements */
:root{
  --bg: #f4fbfa;
  --surface: #ffffff;
  --surface-2: #eef8f7;
  --text: #10232b;
  --muted: #566b75;
  --line: #d5e8e4;
  --primary: #08b5a6;
  --primary-dark: #067f77;
  --accent: #2563eb;
  --danger: #dc2626;
  --warning: #c2410c;
  --shadow: 0 30px 90px rgba(16, 35, 43, 0.12);
  --shadow-soft: 0 16px 42px rgba(16, 35, 43, 0.08);
  --radius: 24px;
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  font-family: "Plus Jakarta Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 10% 2%, rgba(8, 181, 166, 0.16), transparent 26rem),
    radial-gradient(circle at 91% 8%, rgba(37, 99, 235, 0.10), transparent 22rem),
    linear-gradient(180deg, #fbfefe 0%, #f4fbfa 58%, #f2faf8 100%);
  line-height: 1.55;
}

img,
svg,
canvas{ max-width: 100%; }

a{ color: inherit; text-decoration: none; }

button,
input,
textarea,
select{ font: inherit; }

button{ cursor: pointer; }

.container{
  width: min(1160px, calc(100% - 32px));
  margin-inline: auto;
}

.skip-link{
  position: absolute;
  top: -60px;
  left: 16px;
  z-index: 999;
  background: var(--text);
  color: #fff;
  padding: 10px 14px;
  border-radius: 10px;
}

.skip-link:focus{ top: 16px; }


/* 02. Site chrome: header, navigation, and global shell */
.site-header{
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(16px);
  background: rgba(247, 243, 234, 0.86);
  border-bottom: 1px solid rgba(231, 222, 208, 0.82);
}

.nav{
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 850;
  letter-spacing: -0.03em;
  font-size: 1.08rem;
}

.brand-mark{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background:
    linear-gradient(135deg, #14211d 0 50%, #0f766e 50% 100%);
  box-shadow: 0 10px 28px rgba(15, 118, 110, 0.26);
  position: relative;
}

.brand-mark::before,
.brand-mark::after{
  content: "";
  position: absolute;
  background: var(--surface);
  border-radius: 3px;
}

.brand-mark::before{ width: 8px; height: 8px; left: 8px; top: 8px; box-shadow: 12px 0 0 #fff, 0 12px 0 #fff; }
.brand-mark::after{ width: 7px; height: 7px; right: 8px; bottom: 8px; box-shadow: -10px 0 0 rgba(255,255,255,.8), 0 -10px 0 rgba(255,255,255,.8); }

.nav-links{
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-weight: 650;
  font-size: 0.94rem;
}

.nav-links a{
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 11px;
  border-radius: 999px;
  transition: color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.nav-links a:hover{
  color: var(--primary);
  background: rgba(15, 118, 110, 0.08);
}

.nav-links a.is-active,
.nav-links a[aria-current="page"],
.nav-links a[aria-current="true"]{
  color: var(--primary);
  background: rgba(15, 118, 110, 0.16);
  box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.28), 0 10px 24px rgba(15, 118, 110, 0.10);
}

.nav-links a.is-active::after,
.nav-links a[aria-current="page"]::after,
.nav-links a[aria-current="true"]::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transform: translateX(-50%);
}


/* 03. Shared editorial and landing-page surfaces */
.hero{
  padding: 58px 0 42px;
}

.section-kicker{
  margin: 0 0 10px;
  color: var(--primary);
  text-transform: uppercase;
  font-size: 0.76rem;
  font-weight: 850;
  letter-spacing: 0.12em;
}

h1,
h2,
h3,
p{ margin-top: 0; }

h1{
  font-size: clamp(2.35rem, 6vw, 5.25rem);
  line-height: 0.96;
  letter-spacing: -0.075em;
  max-width: 980px;
  margin-bottom: 20px;
}

.badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 252, 245, 0.88);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #41514a;
  padding: 8px 12px;
  font-size: 0.88rem;
  font-weight: 700;
}


/* 04. Single Builder and shared generator components */
.generator-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
}

.panel{
  background: rgba(255, 252, 245, 0.94);
  border: 1px solid rgba(231, 222, 208, 0.95);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.form-panel,
.preview-panel{
  padding: 22px;
  height: 100%;
}

.panel-heading{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.panel-heading h2,
.section-header h2,
.split-section h2{
  font-size: clamp(1.55rem, 3vw, 2.35rem);
  line-height: 1.05;
  letter-spacing: -0.045em;
  margin-bottom: 0;
}

.preview-heading{ margin-bottom: 12px; }


.field{
  display: grid;
  gap: 8px;
  margin-bottom: 15px;
}

.field span,
.field label{
  color: #41514a;
  font-size: 0.9rem;
  font-weight: 750;
}

input[type="text"],
input[type="url"],
input[type="email"],
input[type="tel"],
input[type="datetime-local"],
textarea,
select{
  width: 100%;
  border: 1px solid #d8cec0;
  background: var(--surface);
  color: var(--text);
  border-radius: 14px;
  min-height: 48px;
  padding: 12px 14px;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}

textarea{ min-height: 104px; resize: vertical; }

input:focus,
textarea:focus,
select:focus{
  border-color: rgba(15, 118, 110, 0.72);
  box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.13);
}

input[type="color"]{
  width: 100%;
  height: 48px;
  border: 1px solid #d8cec0;
  border-radius: 14px;
  background: var(--surface);
  padding: 5px;
}

input[type="range"]{ width: 100%; accent-color: var(--primary); }

small{ color: var(--muted); }

.field-note{ display: block; margin-top: 6px; color: var(--muted); line-height: 1.45; }

.dynamic-fields{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 14px;
}

.dynamic-fields .wide{ grid-column: 1 / -1; }

.settings-block{
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff8ec;
  margin-top: 14px;
  overflow: hidden;
}

.settings-block summary{
  padding: 15px 16px;
  font-weight: 850;
  cursor: pointer;
}

.settings-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 14px;
  padding: 0 16px 16px;
}

.settings-grid .wide{ grid-column: 1 / -1; }

.compact{ margin-bottom: 10px; }

.checkbox-field{
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding-top: 25px;
}

.checkbox-field input{ width: 18px; height: 18px; accent-color: var(--primary); }


.visually-hidden{
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.logo-upload-field{
  margin-bottom: 16px;
}

.logo-dropzone{
  min-height: 154px;
  border: 1.5px dashed #cbbdaa;
  background:
    linear-gradient(135deg, rgba(15, 118, 110, 0.07), rgba(249, 115, 22, 0.05)),
    var(--surface);
  border-radius: 20px;
  padding: 18px;
  display: grid;
  place-items: center;
  text-align: center;
  gap: 8px;
  color: var(--muted);
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, background .2s ease;
}

.logo-dropzone:hover,
.logo-dropzone.drag-over,
.logo-dropzone:focus-within{
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.13);
  transform: translateY(-1px);
}

.logo-drop-icon{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  font-size: 1.45rem;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 14px 30px rgba(15, 118, 110, 0.22);
}

.logo-dropzone strong{
  color: var(--text);
  font-size: 0.98rem;
  line-height: 1.25;
}

.logo-dropzone small{
  max-width: 360px;
  line-height: 1.4;
}

.logo-dropzone em{
  display: inline-flex;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 10px;
  color: var(--muted);
  background: rgba(255, 252, 245, 0.76);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.link-button{
  border: 0;
  color: var(--primary);
  background: transparent;
  font-weight: 800;
  margin: 0 16px 16px;
  padding: 0;
}

.preview-panel{
  position: sticky;
  top: 92px;
  display: flex;
  flex-direction: column;
}

.status-dot{
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #cfc7b9;
  margin-top: 8px;
  box-shadow: 0 0 0 6px rgba(207, 199, 185, 0.24);
}

.status-dot.ready{ background: var(--primary); box-shadow: 0 0 0 6px rgba(15, 118, 110, 0.18); }
.status-dot.warn{ background: var(--warning); box-shadow: 0 0 0 6px rgba(194, 65, 12, 0.16); }
.status-dot.error{ background: var(--danger); box-shadow: 0 0 0 6px rgba(220, 38, 38, 0.14); }

.preview-card{
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #fffdf8, #f4eee3);
  border-radius: 22px;
  min-height: 390px;
  padding: 26px;
  margin-bottom: 16px;
}

.qr-preview{
  width: min(320px, 100%);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  overflow: visible;
}

.qr-preview > div{
  width: 100% !important;
  height: 100% !important;
  max-width: 320px;
  max-height: 320px;
  display: grid !important;
  place-items: center !important;
}

.qr-preview canvas,
.qr-preview svg{
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: 320px;
  max-height: 320px;
  object-fit: contain;
  border-radius: 14px;
}

.empty-preview{
  display: grid;
  place-items: center;
  text-align: center;
  gap: 8px;
  color: var(--muted);
  min-height: 300px;
  border: 1px dashed #cfc7b9;
  border-radius: 20px;
  padding: 24px;
}

.empty-preview strong{ color: var(--text); }

.preview-label{
  margin: 10px 0 0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 900;
  color: var(--text);
}

.scan-report{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

.scan-report div{
  background: var(--surface-2);
  border-radius: 16px;
  padding: 12px;
}

.scan-report span{
  display: block;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.scan-report strong{ font-size: 0.93rem; }

.message{
  min-height: 24px;
  color: var(--muted);
  font-size: 0.92rem;
  margin-bottom: 14px;
}

.message.error{ color: var(--danger); font-weight: 750; }
.message.good{ color: #0f766e; font-weight: 750; }
.message.warn{ color: var(--warning); font-weight: 750; }

.download-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 8px;
}

.primary-button,
.secondary-button,
.ghost-button{
  border: 0;
  min-height: 46px;
  padding: 11px 14px;
  border-radius: 14px;
  font-weight: 850;
  transition: transform .18s ease, opacity .18s ease, box-shadow .18s ease;
}

.primary-button:hover:not(:disabled),
.secondary-button:hover:not(:disabled),
.ghost-button:hover:not(:disabled){ transform: translateY(-1px); }

.primary-button{
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  box-shadow: 0 14px 30px rgba(15, 118, 110, 0.25);
}

.secondary-button{
  background: #14211d;
  color: #fff;
}

.ghost-button{
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line);
}

button:disabled{
  opacity: .45;
  cursor: not-allowed;
}

.section{ padding: 70px 0; }

.section-header{
  max-width: 780px;
  margin-bottom: 26px;
}

.section-header p{ color: var(--muted); font-size: 1.06rem; }

.compact-header{ max-width: 640px; }

.feature-grid,
.use-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.feature-card,
.use-card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 20px;
  box-shadow: 0 14px 36px rgba(20, 33, 29, 0.06);
}

.feature-card h3{ margin-bottom: 8px; letter-spacing: -0.02em; }
.feature-card p{ color: var(--muted); margin-bottom: 0; }

.soft-section{
  background: #14211d;
  color: #fff;
}

.soft-section .section-kicker{ color: #fed7aa; }
.soft-section .use-card{
  color: #fff;
  text-align: left;
  min-height: 92px;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.13);
  font-weight: 850;
}
.soft-section .use-card:hover{ background: rgba(255, 255, 255, 0.14); }

.split-section{
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: 40px;
  align-items: start;
}

.tips-list{
  display: grid;
  gap: 12px;
}

.tips-list p{
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  margin: 0;
  color: var(--muted);
}

.tips-list strong{ color: var(--text); }

.faq-list{
  display: grid;
  gap: 12px;
}

.faq-list details{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px 20px;
}

.faq-list summary{
  font-weight: 850;
  cursor: pointer;
}

.faq-list p{ color: var(--muted); margin: 12px 0 0; }

.site-footer{
  padding: 44px 0;
  border-top: 1px solid var(--line);
  background: var(--surface);
}


.footer-links{ display: flex; flex-wrap: wrap; gap: 16px; color: var(--muted); font-weight: 700; }
.footer-links a{ transition: color .18s ease; }
.footer-links a:hover,
.footer-links a.is-active,
.footer-links a[aria-current="page"]{ color: var(--primary); }

.legal-main{ padding: 58px 0 82px; }
.legal-card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(24px, 5vw, 54px);
  max-width: 900px;
}
.legal-card h1{ font-size: clamp(2rem, 5vw, 3.75rem); }
.legal-card h2{ margin-top: 30px; letter-spacing: -0.03em; }
.legal-card p,
.legal-card li{ color: var(--muted); }
.legal-card a{ color: var(--primary); font-weight: 750; }

@media (max-width: 980px) {
  .generator-grid,
.split-section{ grid-template-columns: 1fr; }
  .preview-panel{ position: static; }
  .feature-grid,
.use-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .nav-links{ display: none; }
  .hero{ padding-top: 38px; }
  .form-panel,
.preview-panel{ padding: 16px; }
  .dynamic-fields,
.settings-grid,
.download-grid,
.feature-grid,
.use-grid,
.scan-report{ grid-template-columns: 1fr; }
  .checkbox-field{ padding-top: 0; }
  .preview-card{ min-height: 320px; padding: 16px; }
  
}


html[data-theme="dark"]{
  --bg: #0b1110;
  --surface: #121c1a;
  --surface-2: #172522;
  --text: #f4fbf8;
  --muted: #a9b9b3;
  --line: #28413b;
  --primary: #2dd4bf;
  --primary-dark: #0f766e;
  --accent: #fb923c;
  --shadow: 0 26px 80px rgba(0, 0, 0, 0.34);
  --shadow-soft: 0 18px 44px rgba(0, 0, 0, 0.24);
}

html[data-theme="dark"] body{
  background:
    radial-gradient(circle at top left, rgba(45, 212, 191, 0.18), transparent 32rem),
    radial-gradient(circle at top right, rgba(251, 146, 60, 0.13), transparent 28rem),
    linear-gradient(180deg, #0b1110 0%, #101815 100%);
}

html[data-theme="dark"] .site-header{
  background: rgba(11, 17, 16, 0.82);
  border-bottom-color: rgba(40, 65, 59, 0.78);
}

html[data-theme="dark"] .panel,
html[data-theme="dark"] .feature-card,
html[data-theme="dark"] .faq-list details,
html[data-theme="dark"] .tips-list p,
html[data-theme="dark"] .legal-card,
html[data-theme="dark"] .site-footer{
  background: rgba(18, 28, 26, 0.92);
  border-color: var(--line);
}

html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="url"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="datetime-local"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] input[type="color"],
html[data-theme="dark"] .ghost-button,
html[data-theme="dark"] .badge{
  background: #0f1715;
  border-color: #31524a;
  color: var(--text);
}

html[data-theme="dark"] .settings-block{
  background: rgba(23, 37, 34, 0.8);
  border-color: var(--line);
}

html[data-theme="dark"] .preview-card{
  background: linear-gradient(180deg, #101916, #0c1311);
  border-color: var(--line);
}

html[data-theme="dark"] .logo-dropzone{
  background:
    linear-gradient(135deg, rgba(45, 212, 191, 0.08), rgba(251, 146, 60, 0.05)),
    #0f1715;
  border-color: #31524a;
}

html[data-theme="dark"] .logo-dropzone.drag-over,
html[data-theme="dark"] .logo-dropzone:hover,
html[data-theme="dark"] .logo-dropzone:focus-within{
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(45, 212, 191, 0.13);
}

html[data-theme="dark"] .logo-dropzone em{
  background: rgba(15, 23, 21, 0.88);
  border-color: #31524a;
}

html[data-theme="dark"] .secondary-button{ background: #f4fbf8; color: #0b1110; }
html[data-theme="dark"] .soft-section{ background: #07100e; }
html[data-theme="dark"] .empty-preview{ border-color: #31524a; }
html[data-theme="dark"] .field span,
html[data-theme="dark"] .field label{ color: #d0ddd8; }
html[data-theme="dark"] .feature-card h3,
html[data-theme="dark"] .tips-list strong,
html[data-theme="dark"] .empty-preview strong{ color: var(--text); }

.nav-right{
  display: flex;
  align-items: center;
  gap: 20px;
}

.nav-actions{
  display: flex;
  align-items: center;
  gap: 8px;
}

.utility-button{
  min-height: 40px;
  border: 1px solid var(--line);
  background: rgba(255, 252, 245, 0.84);
  color: var(--text);
  border-radius: 999px;
  padding: 8px 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.86rem;
  font-weight: 850;
  box-shadow: 0 10px 24px rgba(20, 33, 29, 0.08);
}

.utility-button:hover{ transform: translateY(-1px); }
html[data-theme="dark"] .utility-button{ background: #0f1715; }
html[data-theme="dark"] .nav-links a:hover{
  background: rgba(45, 212, 191, 0.09);
}

html[data-theme="dark"] .nav-links a.is-active,
html[data-theme="dark"] .nav-links a[aria-current="page"],
html[data-theme="dark"] .nav-links a[aria-current="true"]{
  color: #99f6e4;
  background: rgba(45, 212, 191, 0.17);
  box-shadow: inset 0 0 0 1px rgba(45, 212, 191, 0.30), 0 10px 24px rgba(45, 212, 191, 0.10);
}

.utility-icon{ font-size: 0.95rem; }

.hero{
  position: relative;
  padding-top: 52px;
  isolation: isolate;
}

.hero::before,
.hero::after{
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
  filter: blur(42px);
  opacity: .82;
}

.hero::before{
  width: min(760px, 72vw);
  height: 360px;
  top: 10px;
  left: -10vw;
  background: radial-gradient(circle, rgba(15, 118, 110, 0.24), transparent 68%);
}

.hero::after{
  width: min(620px, 64vw);
  height: 340px;
  top: 42px;
  right: -12vw;
  background: radial-gradient(circle, rgba(249, 115, 22, 0.18), transparent 70%);
}

html[data-theme="dark"] .hero::before{
  background: radial-gradient(circle, rgba(45, 212, 191, 0.24), transparent 68%);
}

html[data-theme="dark"] .hero::after{
  background: radial-gradient(circle, rgba(251, 146, 60, 0.16), transparent 70%);
}

.hero h1{
  text-wrap: balance;
}

@media (max-width: 760px) {
  .nav{ height: auto; padding: 14px 0; align-items: flex-start; }
  .nav-right{ gap: 10px; }
  .nav-actions{ flex-wrap: wrap; justify-content: flex-end; }
  .utility-button{ min-height: 36px; padding: 7px 10px; }
  #themeText{ display: none; }
  .hero::before{ inset-inline: 0; border-radius: 28px; }
}


.hero{
  overflow: hidden;
  padding-top: 64px;
}

.hero::before{
  inset: -120px -80px auto;
  height: 560px;
  background:
    radial-gradient(circle at 16% 22%, rgba(15, 118, 110, 0.18), transparent 24rem),
    radial-gradient(circle at 76% 18%, rgba(249, 115, 22, 0.14), transparent 22rem),
    radial-gradient(circle at 48% 0%, rgba(255, 252, 245, 0.72), transparent 28rem);
  border-radius: 999px;
  filter: blur(18px);
  opacity: .95;
}

html[data-theme="dark"] .hero::before{
  background:
    radial-gradient(circle at 16% 22%, rgba(45, 212, 191, 0.20), transparent 24rem),
    radial-gradient(circle at 76% 18%, rgba(251, 146, 60, 0.12), transparent 22rem),
    radial-gradient(circle at 48% 0%, rgba(45, 212, 191, 0.08), transparent 28rem);
  opacity: .9;
}

.hero h1{
  max-width: 900px;
}

.generator-grid{
  margin-top: 12px;
}

.preview-panel{
  justify-content: flex-start;
}


@media (max-width: 760px) {
  .hero{ padding-top: 42px; }
  .hero::before{ left: -32vw; width: 92vw; height: 380px; }
  .hero::after{ right: -38vw; width: 86vw; height: 320px; }
}


.error-page{
  min-height: calc(100vh - 72px);
  display: grid;
  place-items: center;
  padding: 72px 0;
  position: relative;
  isolation: isolate;
}

.error-page::before,
.error-page::after{
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
  filter: blur(46px);
  opacity: .76;
}

.error-page::before{
  width: 540px;
  height: 360px;
  left: -160px;
  top: 80px;
  background: radial-gradient(circle, rgba(45, 212, 191, .24), transparent 70%);
}

.error-page::after{
  width: 520px;
  height: 340px;
  right: -180px;
  bottom: 80px;
  background: radial-gradient(circle, rgba(251, 146, 60, .18), transparent 70%);
}

.error-card{
  width: min(980px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 34px;
  align-items: center;
  border: 1px solid rgba(45, 212, 191, .16);
  background: linear-gradient(135deg, rgba(18, 28, 26, .82), rgba(15, 23, 21, .66));
  border-radius: 34px;
  box-shadow: var(--shadow);
  padding: clamp(24px, 5vw, 46px);
}

html[data-theme="light"] .error-card{
  border-color: rgba(231, 222, 208, .72);
  background: linear-gradient(135deg, rgba(255, 252, 245, .9), rgba(255, 248, 236, .72));
}

.error-code{
  display: inline-flex;
  margin-bottom: 12px;
  color: var(--accent);
  font-weight: 950;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: .82rem;
}

.error-card h1{
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  max-width: 720px;
  margin-bottom: 18px;
}

.error-card p{
  color: var(--muted);
  font-size: 1.06rem;
  max-width: 620px;
}

.error-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.error-qr-wrap{
  display: grid;
  justify-items: center;
  gap: 12px;
}

.error-qr{
  width: 230px;
  height: 230px;
  border-radius: 28px;
  padding: 16px;
  background: #fff;
  box-shadow: 0 22px 60px rgba(0,0,0,.22);
}

.error-qr img,
.error-qr svg{
  width: 100%;
  height: 100%;
  display: block;
}

.error-qr-wrap small{
  color: var(--muted);
  text-align: center;
  font-weight: 800;
}

@media (max-width: 760px) {
  .error-card{
    grid-template-columns: 1fr;
    text-align: left;
  }
  .error-qr-wrap{ justify-items: start; }
  .error-qr{ width: 190px; height: 190px; }
}

.error-actions .primary-button,
.error-actions .ghost-button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}


.brand-mark{
  background: url("brand-icon.svg") center / cover no-repeat !important;
  box-shadow: 0 10px 28px rgba(45, 212, 191, 0.18);
}
.brand-mark::before,
.brand-mark::after{
  content: none !important;
  display: none !important;
}
.hero{
  overflow: visible;
  padding-top: 64px;
}
.hero::before,
.hero::after{
  content: none !important;
  display: none !important;
  background: none !important;
}
@media (max-width: 760px) {
  .hero::before,
.hero::after{ display: none !important; }
}


body{ background: var(--bg) !important; }
html[data-theme="dark"] body{ background: #0b1110 !important; }

.copyright{
  font-size: 0.86rem;
  color: var(--muted);
}


.nav-links a.is-active,
.nav-links a[aria-current="page"],
.nav-links a[aria-current="true"]{
  color: #ffffff !important;
  background: var(--primary) !important;
  box-shadow: 0 12px 28px rgba(15, 118, 110, 0.24), inset 0 0 0 1px rgba(255, 255, 255, 0.18) !important;
}

html[data-theme="dark"] .nav-links a.is-active,
html[data-theme="dark"] .nav-links a[aria-current="page"],
html[data-theme="dark"] .nav-links a[aria-current="true"]{
  color: #07100e !important;
  background: #2dd4bf !important;
  box-shadow: 0 12px 28px rgba(45, 212, 191, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.20) !important;
}

.footer-links a.is-active,
.footer-links a[aria-current="page"]{
  color: var(--primary) !important;
  text-decoration: underline;
  text-underline-offset: 4px;
}


html{
  scroll-padding-top: 150px;
}

.nav-links{
  min-width: 0;
}

.nav-actions{
  min-width: 0;
}

.utility-button{
  white-space: nowrap;
  touch-action: manipulation;
}

.primary-button,
.secondary-button,
.ghost-button,
.use-card,
.utility-button{
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 900px) {
  .container{
    width: min(100% - 24px, 1160px);
  }

  .site-header{
    position: sticky;
    top: 0;
  }

  .nav{
    height: auto;
    min-height: 0;
    padding: 10px 0 12px;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
  }

  .brand{
    flex: 1 1 auto;
    min-width: 0;
  }

  .brand span:last-child{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .brand-mark{
    flex: 0 0 36px;
  }

  .nav-right{
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .nav-actions{
    order: 1;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    justify-content: stretch;
  }

  .utility-button{
    width: 100%;
    justify-content: center;
    min-height: 42px;
    padding: 9px 10px;
    font-size: 0.88rem;
  }

  #themeText{
    display: inline !important;
  }

  .nav-links{
    order: 2;
    display: flex !important;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 8px;
    padding: 4px 2px 8px;
    margin: 0;
    white-space: nowrap;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
  }

  .nav-links::-webkit-scrollbar{
    display: none;
  }

  .nav-links a{
    flex: 0 0 auto;
    min-height: 40px;
    padding: 8px 12px;
    scroll-snap-align: start;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.06);
  }

  html[data-theme="light"] .nav-links a{
    background: rgba(255, 252, 245, 0.7);
    border-color: rgba(231, 222, 208, 0.9);
  }

  .hero{
    padding-top: 32px;
  }

  h1{
    font-size: clamp(2.25rem, 11vw, 3.9rem);
    line-height: 1;
    letter-spacing: -0.055em;
  }

  .generator-grid{
    gap: 16px;
  }

  .panel-heading{
    gap: 12px;
  }

  .panel-heading h2,
.section-header h2,
.split-section h2{
    font-size: clamp(1.45rem, 7vw, 2rem);
  }

  .form-panel,
.preview-panel{
    border-radius: 22px;
  }

  input[type="text"],
input[type="url"],
input[type="email"],
input[type="tel"],
input[type="datetime-local"],
textarea,
select{
    font-size: 16px;
  }

  .logo-dropzone{
    min-height: 132px;
    padding: 16px 12px;
  }

  .logo-drop-icon{
    width: 40px;
    height: 40px;
    border-radius: 14px;
  }

  .preview-card{
    min-height: 300px;
  }

  .qr-preview{
    width: min(280px, 100%);
  }

  .qr-preview > div,
.qr-preview canvas,
.qr-preview svg{
    max-width: 280px;
    max-height: 280px;
  }

  .section{
    padding: 54px 0;
  }

  .feature-card,
.use-card,
.tips-list p,
.faq-list details{
    border-radius: 20px;
  }

  

  .footer-links{
    width: 100%;
    gap: 10px;
  }
}

@media (max-width: 560px) {
  .container{
    width: min(100% - 20px, 1160px);
  }

  .nav{
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
  }

  .utility-button{
    font-size: 0.84rem;
    padding-inline: 8px;
  }

  .nav-links a{
    font-size: 0.88rem;
    padding-inline: 11px;
  }

  .panel-heading{
    align-items: flex-start;
  }

  .badge{
    padding: 7px 10px;
  }

  .download-grid{
    gap: 9px;
  }

  .primary-button,
.secondary-button,
.ghost-button{
    min-height: 48px;
  }

  .footer-links{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 380px) {
  .nav-actions{
    grid-template-columns: 1fr;
  }

  .brand{
    font-size: 1rem;
  }

  .brand-mark{
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }

  h1{
    font-size: clamp(2rem, 12vw, 2.7rem);
  }

  .footer-links{
    grid-template-columns: 1fr;
  }
}


.nav-menu-toggle{
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 252, 245, 0.86);
  color: var(--text);
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-direction: column;
  box-shadow: 0 10px 24px rgba(20, 33, 29, 0.08);
  -webkit-tap-highlight-color: transparent;
}

.nav-menu-toggle span{
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transition: transform .2s ease, opacity .2s ease;
}

.nav-menu-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.nav-menu-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav-menu-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

html[data-theme="dark"] .nav-menu-toggle{
  background: #0f1715;
  border-color: #31524a;
}

@media (max-width: 900px) {
  .nav{
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 0;
  }

  .brand{
    flex: 1 1 auto;
  }

  .nav-menu-toggle{
    display: inline-flex;
    flex: 0 0 auto;
  }

  .nav-right{
    display: none !important;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    z-index: 60;
    width: 100% !important;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: rgba(255, 252, 245, 0.98);
    box-shadow: 0 24px 70px rgba(20, 33, 29, 0.18);
    backdrop-filter: blur(18px);
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    max-height: min(78vh, 620px);
    overflow-y: auto;
    overflow-x: hidden;
  }

  body.nav-menu-open .nav-right{
    display: flex !important;
  }

  html[data-theme="dark"] .nav-right{
    background: rgba(18, 28, 26, 0.98);
    border-color: #31524a;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.42);
  }

  .nav-links{
    order: 1;
    display: grid !important;
    grid-template-columns: 1fr;
    width: 100%;
    gap: 8px;
    padding: 0;
    margin: 0;
    overflow: visible !important;
    white-space: normal;
    scroll-snap-type: none;
  }

  .nav-links a{
    width: 100%;
    flex: 1 1 auto;
    min-height: 46px;
    justify-content: flex-start;
    padding: 11px 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.035);
    scroll-snap-align: unset;
  }

  html[data-theme="light"] .nav-links a{
    background: rgba(247, 243, 234, 0.75);
    border-color: rgba(231, 222, 208, 0.95);
  }

  .nav-links a.is-active,
.nav-links a[aria-current="page"],
.nav-links a[aria-current="true"]{
    justify-content: flex-start;
  }

  .nav-links a.is-active::after,
.nav-links a[aria-current="page"]::after,
.nav-links a[aria-current="true"]::after{
    display: none !important;
  }

  .nav-actions{
    order: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
  }

  .utility-button{
    width: 100%;
    min-height: 44px;
    justify-content: center;
  }

  #themeText{
    display: inline !important;
  }
}

@media (max-width: 520px) {
  .nav-actions{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 360px) {
  .nav-actions{
    grid-template-columns: 1fr;
  }
}


html{
  -webkit-text-size-adjust: 100%;
}

@media (min-width: 901px) {
  .nav-menu-toggle{
    display: none !important;
  }

  .nav-right{
    display: flex !important;
  }

  body.nav-menu-open{
    overflow: auto;
  }
}

@media (max-width: 900px) {
  .site-header{
    z-index: 1000;
  }

  .nav{
    height: auto !important;
    min-height: 64px;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 0 10px !important;
    align-items: center !important;
  }

  .brand{
    min-width: 0;
  }

  .brand span:last-child{
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .nav-menu-toggle{
    display: inline-flex !important;
  }

  .nav-right{
    display: none !important;
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-height: calc(100dvh - 88px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  body.nav-menu-open{
    overflow: hidden;
  }

  body.nav-menu-open .nav-right{
    display: flex !important;
  }

  .nav-links{
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    min-width: 0;
  }

  .nav-links a{
    width: 100% !important;
    min-width: 0;
    min-height: 48px;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  .nav-actions{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    min-width: 0;
  }

  .utility-button{
    width: 100%;
    min-width: 0;
    min-height: 46px;
    text-align: center;
  }

  .generator-grid,
.split-section{
    grid-template-columns: 1fr !important;
  }

  .preview-panel{
    position: static !important;
  }
}

@media (max-width: 640px) {
  .container{
    width: min(100% - 24px, 1160px);
  }

  .hero{
    padding: 34px 0 30px;
  }

  h1{
    font-size: clamp(2rem, 11.5vw, 3.1rem);
    letter-spacing: -0.055em;
  }

  .form-panel,
.preview-panel,
.legal-card{
    padding: 16px;
    border-radius: 22px;
  }

  .panel-heading{
    align-items: flex-start;
  }

  .dynamic-fields,
.settings-grid,
.download-grid,
.scan-report,
.feature-grid,
.use-grid{
    grid-template-columns: 1fr !important;
  }

  .logo-dropzone{
    min-height: 128px;
    padding: 16px 12px;
  }

  .preview-card{
    min-height: 292px;
    padding: 16px;
  }

  .qr-preview{
    width: min(276px, 100%);
  }

  .qr-preview > div,
.qr-preview canvas,
.qr-preview svg{
    max-width: 276px;
    max-height: 276px;
  }

  

  .footer-links{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
}

@media (max-width: 420px) {
  .container{
    width: min(100% - 18px, 1160px);
  }

  .brand{
    font-size: 0.98rem;
  }

  .brand-mark{
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
  }

  .nav-actions,
.footer-links{
    grid-template-columns: 1fr !important;
  }

  .primary-button,
.secondary-button,
.ghost-button{
    min-height: 50px;
  }
}


.learn-section{
  position: relative;
}

.learn-header{
  max-width: 880px;
}

.learn-feature-strip{
  display: flex;
  justify-content: space-between;
  gap: 22px;
  align-items: center;
  margin-top: 18px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--surface-2);
}

.learn-feature-strip h3{
  margin-bottom: 8px;
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.learn-feature-strip p{
  color: var(--muted);
  margin-bottom: 0;
  max-width: 720px;
}

.learn-button{
  text-align: center;
  white-space: nowrap;
}


html[data-theme="dark"] .learn-feature-strip{
  background: rgba(23, 37, 34, 0.82);
  border-color: var(--line);
}

@media (max-width: 980px) {
  

  
}

@media (max-width: 720px) {

  .learn-feature-strip{
    flex-direction: column;
    align-items: stretch;
  }

  .learn-button{
    width: 100%;
  }

  
}

.bulk-main{
  padding-bottom: 70px;
}

.bulk-panel{
  padding: 24px;
}

.bulk-muted{
  color: var(--muted);
}

.bulk-export-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 18px;
}

.bulk-export-actions .primary-button,
.bulk-export-actions .secondary-button,
.bulk-export-actions .ghost-button{
  min-width: 160px;
}

.bulk-dropzone{
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 214px;
  text-align: center;
  padding: 26px;
  border: 2px dashed rgba(45, 212, 191, .45);
  border-radius: 26px;
  background: linear-gradient(135deg, rgba(45, 212, 191, .08), rgba(251, 146, 60, .05)), var(--surface-2);
  cursor: pointer;
  transition: border-color .2s ease, transform .2s ease, background .2s ease;
}

.bulk-dropzone:hover,
.bulk-dropzone.is-dragover{
  border-color: var(--primary);
  transform: translateY(-1px);
}

.bulk-dropzone input{
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.bulk-drop-icon{
  display: inline-grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: var(--primary);
  color: #07100e;
  font-size: 2rem;
  font-weight: 900;
}

.bulk-dropzone strong{
  font-size: 1.05rem;
}

.bulk-dropzone small{
  max-width: 430px;
}


/* 05. Batch Builder */
.bulk-preview-section{
  margin-top: 24px;
}

.bulk-logo-field{
  margin-top: 14px;
}

.bulk-logo-dropzone{
  min-height: 156px;
  margin-top: 8px;
}


.bulk-qr-preview-grid{
  display: grid;
  grid-template-columns: minmax(220px, 284px);
  justify-content: start;
  align-items: stretch;
  gap: 12px;
}

.bulk-qr-preview-card{
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 10px;
  place-items: center;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
}

.bulk-qr-thumb{
  display: grid;
  place-items: center;
  width: min(224px, 100%);
  aspect-ratio: 1 / 1;
  padding: 10px;
  border-radius: 18px;
  background: #fff;
  overflow: hidden;
}

.bulk-qr-thumb > div{
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  display: grid !important;
  place-items: center !important;
}

.bulk-qr-thumb canvas,
.bulk-qr-thumb svg,
.bulk-qr-thumb > div > canvas,
.bulk-qr-thumb > div > svg{
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain;
}

.bulk-qr-preview-label{
  width: 100%;
  color: var(--text);
  font-size: .82rem;
  font-weight: 850;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bulk-qr-preview-file{
  width: 100%;
  color: var(--muted);
  font-size: .8rem;
  font-weight: 700;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bulk-qr-preview-empty{
  grid-column: 1 / -1;
  padding: 24px;
  border: 1px dashed var(--line);
  border-radius: 18px;
  color: var(--muted);
  text-align: center;
  font-weight: 750;
}

.bulk-table-wrap{
  max-height: 620px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 20px;
}

.bulk-table{
  width: 100%;
  border-collapse: collapse;
  min-width: 680px;
}

.bulk-table th,
.bulk-table td{
  padding: 13px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.bulk-table th{
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-2);
  color: var(--text);
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.bulk-content-cell{
  display: inline-block;
  max-width: 360px;
  color: var(--muted);
  word-break: break-word;
}

.bulk-status{
  display: inline-flex;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: .8rem;
  font-weight: 850;
}

.bulk-status.ready{
  background: rgba(45, 212, 191, .14);
  color: var(--primary);
}

.bulk-status.issue{
  background: rgba(220, 38, 38, .14);
  color: var(--danger);
}

.bulk-progress{
  height: 10px;
  margin-top: 18px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}

.bulk-progress div{
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transition: width .18s ease;
}

.bulk-help-section{
  padding-top: 72px;
}

html[data-theme="dark"] .bulk-table th,
html[data-theme="dark"] .bulk-dropzone,
html[data-theme="dark"] .bulk-qr-preview-card,
html[data-theme="dark"] .bulk-progress{
  background-color: rgba(18, 28, 26, 0.92);
  border-color: var(--line);
}

html[data-theme="dark"] .bulk-qr-thumb{
  background: #f4fbf8;
}

html[data-theme="dark"] .bulk-table-wrap,
html[data-theme="dark"] .bulk-table th,
html[data-theme="dark"] .bulk-table td{
  border-color: var(--line);
}

@media (max-width: 720px) {
  .bulk-export-actions{
    align-items: stretch;
  }

  .bulk-export-actions .primary-button,
.bulk-export-actions .secondary-button,
.bulk-export-actions .ghost-button{
    width: 100%;
    justify-content: center;
  }

  .bulk-panel{
    padding: 18px;
  }

  .bulk-dropzone{
    min-height: 190px;
    padding: 22px 16px;
  }

  .bulk-qr-preview-grid{
    grid-template-columns: repeat(2, minmax(136px, 1fr));
    justify-content: stretch;
  }

  .bulk-qr-preview-card{
    width: 100%;
  }

  .bulk-table-wrap{
    max-height: 540px;
  }

  .bulk-help-grid{
    grid-template-columns: 1fr;
  }
}

@media (min-width: 901px) and (max-width: 1180px) {
  .nav-links{
    gap: 6px;
  }

  .nav-links a{
    padding-inline: 8px;
    font-size: .86rem;
  }

  .nav-actions{
    gap: 6px;
  }

  .utility-button{
    padding-inline: 9px;
  }
}


.bulk-qr-preview-card:hover{
  transform: translateY(-1px);
  transition: transform .18s ease, border-color .18s ease;
  border-color: rgba(15, 118, 110, 0.45);
}

@media (max-width: 440px) {
  .bulk-qr-preview-grid{
    grid-template-columns: 1fr;
  }

  .bulk-qr-preview-card{
    width: 100%;
  }

  .bulk-qr-thumb{
    width: min(210px, 100%);
    height: auto;
  }
}

.bulk-qr-preview-grid{
  width: 100%;
  min-height: 378px;
  display: grid;
  grid-template-columns: minmax(260px, 340px);
  place-content: center;
  justify-items: center;
}

.bulk-qr-preview-card{
  width: min(340px, 100%);
  min-height: 100%;
  align-content: center;
  justify-items: center;
  padding: 18px;
}

.bulk-qr-thumb{
  width: min(260px, 100%);
  max-width: 260px;
  margin-inline: auto;
  padding: 12px;
}

.bulk-qr-thumb > div{
  overflow: hidden;
}

.bulk-qr-thumb > div,
.bulk-qr-thumb canvas,
.bulk-qr-thumb svg,
.bulk-qr-thumb > div > canvas,
.bulk-qr-thumb > div > svg{
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
}

@media (max-width: 980px) {

  .bulk-qr-preview-grid{
    min-height: auto;
  }
}

@media (max-width: 520px) {

  .bulk-qr-thumb{
    width: min(230px, 100%);
    max-width: 230px;
  }

  .bulk-qr-preview-card{
    width: 100%;
  }
}
.bulk-export-actions{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bulk-export-actions #bulkDownloadPdf{ grid-column: 1 / -1; }
@media (max-width: 560px) { .bulk-export-actions{ grid-template-columns: 1fr; } .bulk-export-actions #bulkDownloadPdf{ grid-column: auto; } }

.bulk-type-select{
  margin-bottom: 0;
}

.bulk-template-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.bulk-template-actions .primary-button,
.bulk-template-actions .ghost-button{
  min-width: 160px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 760px) {

  .bulk-template-actions{
    justify-content: stretch;
  }

  .bulk-template-actions .primary-button,
.bulk-template-actions .ghost-button{
    width: 100%;
  }
}


.bulk-tool-grid{
  margin-top: 18px;
}

.bulk-template-columns-inline{
  display: grid;
  gap: 6px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, .28);
  overflow-x: auto;
}

.bulk-template-columns-inline strong{
  color: var(--primary);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.bulk-template-columns-inline code{
  color: var(--muted);
  white-space: nowrap;
}

.bulk-preview-card{
  min-height: 430px;
  padding: 26px;
}

.bulk-preview-card .bulk-qr-preview-grid{
  width: 100%;
  min-height: 0;
  grid-template-columns: minmax(260px, 360px);
  place-content: center;
  justify-items: center;
}

.bulk-preview-card .bulk-qr-preview-card{
  width: min(360px, 100%);
  min-height: auto;
  padding: 18px;
  border-radius: 24px;
}

.bulk-preview-card .bulk-qr-thumb{
  width: min(280px, 100%);
  max-width: 280px;
  padding: 12px;
  border-radius: 22px;
}

.bulk-preview-card .bulk-qr-preview-empty{
  width: min(360px, 100%);
  min-height: 260px;
  display: grid;
  place-items: center;
}

.bulk-batch-report{
  margin-bottom: 14px;
}

.bulk-preview-mini-copy{
  color: var(--muted);
  font-size: .92rem;
  margin-bottom: 14px;
}

.bulk-preview-mini-copy strong,
.bulk-preview-mini-copy span{
  display: block;
}

.bulk-preview-mini-copy strong{
  color: var(--text);
  margin-bottom: 3px;
}

.bulk-preview-mini-copy p{
  margin: 8px 0 0;
}

.bulk-export-actions{
  margin-top: auto;
}

.bulk-export-actions #bulkDownloadPdf{
  grid-column: 1 / -1;
}

.bulk-rows-panel{
  margin-top: 0;
}

html[data-theme="dark"] .bulk-template-columns-inline{
  background-color: rgba(18, 28, 26, 0.92);
  border-color: var(--line);
}

@media (max-width: 760px) {

  .bulk-preview-card{
    min-height: 340px;
    padding: 16px;
  }

  .bulk-preview-card .bulk-qr-preview-grid{
    grid-template-columns: 1fr;
  }

  .bulk-preview-card .bulk-qr-thumb{
    width: min(240px, 100%);
    max-width: 240px;
  }

  .bulk-export-actions,
.bulk-export-actions #bulkDownloadPdf{
    grid-template-columns: 1fr;
    grid-column: auto;
  }
}

.bulk-tool-grid{
  margin-top: 4px;
}

.bulk-type-select{
  margin-bottom: 10px;
}

.bulk-template-columns-inline{
  margin-top: 10px;
  padding: 10px;
  border-radius: 14px;
}

.bulk-preview-card{
  min-height: 310px;
  padding: 14px;
}

.bulk-preview-card .bulk-qr-preview-grid{
  min-height: 100%;
  grid-template-columns: 1fr;
  place-content: center;
}

.bulk-preview-card .bulk-qr-preview-card{
  width: 100%;
  max-width: 230px;
  padding: 14px;
  border-radius: 22px;
}

.bulk-preview-card .bulk-qr-thumb{
  width: min(196px, 100%);
  max-width: 196px;
  padding: 10px;
}

.bulk-batch-report{
  grid-template-columns: 1fr;
  gap: 8px;
  margin-bottom: 0;
}

.bulk-batch-report div{
  padding: 10px 12px;
}

.bulk-preview-mini-copy{
  margin-bottom: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-2);
}

.bulk-preview-mini-copy p{
  font-size: .88rem;
  line-height: 1.4;
}

.bulk-export-settings{
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-2);
}

.bulk-export-settings .field{
  margin-bottom: 0;
}

.bulk-pdf-label-checkbox{
  padding-top: 0;
  min-height: auto;
}

.bulk-export-actions{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-top: 0;
}

.bulk-export-actions #bulkDownloadPdf{
  grid-column: auto;
}

.bulk-export-actions button{
  min-height: 44px;
  padding: 10px;
}

html[data-theme="dark"] .bulk-template-columns-inline,
html[data-theme="dark"] .bulk-preview-mini-copy,
html[data-theme="dark"] .bulk-export-settings{
  background-color: rgba(18, 28, 26, 0.92);
  border-color: var(--line);
}

@media (max-width: 1180px) {

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

  .bulk-preview-card{
    min-height: 280px;
  }
}

@media (max-width: 760px) {

  .bulk-batch-report{
    grid-template-columns: 1fr;
  }

  .bulk-export-actions{
    grid-template-columns: 1fr 1fr;
  }

  .bulk-export-actions #bulkDownloadPdf{
    grid-column: 1 / -1;
  }
}

@media (max-width: 480px) {
  .bulk-export-actions{
    grid-template-columns: 1fr;
  }

  .bulk-export-actions #bulkDownloadPdf{
    grid-column: auto;
  }

  .bulk-preview-card .bulk-qr-preview-card{
    max-width: 100%;
  }
}


.bulk-workflow-panel{
  padding: clamp(18px, 3vw, 28px);
  overflow: hidden;
}

.bulk-workflow-heading{
  align-items: center;
  margin-bottom: 22px;
}

.bulk-workflow-heading h2{
  margin-bottom: 8px;
}

.bulk-workflow-intro{
  max-width: 820px;
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
}

.bulk-workflow-content{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.bulk-step-card{
  min-width: 0;
  background: rgba(255, 252, 245, 0.62);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: clamp(16px, 2.2vw, 22px);
  box-shadow: 0 12px 34px rgba(20, 33, 29, 0.055);
}

html[data-theme="dark"] .bulk-step-card{
  background: rgba(15, 23, 21, 0.58);
  border-color: rgba(45, 212, 191, 0.18);
}

.bulk-step-head{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.bulk-step-head h3{
  display: block;
  margin: 0;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
}

.bulk-template-row{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.bulk-template-row .field{
  margin-bottom: 0;
}

.bulk-template-actions{
  display: flex;
  gap: 10px;
  align-items: center;
}

.bulk-template-actions .primary-button,
.bulk-template-actions .ghost-button{
  min-height: 48px;
  white-space: nowrap;
}

.bulk-template-summary{
  margin-top: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.7fr);
  gap: 12px;
  align-items: stretch;
}

.bulk-template-summary > div,
.bulk-template-columns-inline{
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.34);
  padding: 14px;
}

html[data-theme="dark"] .bulk-template-summary > div,
html[data-theme="dark"] .bulk-template-columns-inline{
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(45, 212, 191, 0.16);
}

.bulk-template-summary strong,
.bulk-template-columns-inline strong{
  display: block;
  color: var(--text);
  font-weight: 900;
}

.bulk-template-summary p{
  margin: 6px 0 0;
  color: var(--muted);
}

.bulk-template-columns-inline code{
  display: block;
  margin-top: 7px;
  white-space: normal;
  overflow-wrap: anywhere;
}

.bulk-step-upload .bulk-dropzone,
.bulk-step-upload .message{
  margin-bottom: 0;
}

.bulk-step-export{
  grid-column: 1 / -1;
}

.bulk-style-column{
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.24);
}

html[data-theme="dark"] .bulk-style-column{
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(45, 212, 191, 0.16);
}

.bulk-style-column h4{
  margin: 0 0 12px;
  letter-spacing: -0.02em;
}

.bulk-style-column .settings-grid{
  padding: 0;
}

.bulk-style-column .logo-upload-field{
  margin-bottom: 0;
}

.bulk-export-actions{
  margin: 0;
}

.bulk-progress{
  margin-top: 0;
}

.bulk-rows-panel{
  margin-top: 18px;
}

@media (max-width: 1100px) {
  .bulk-workflow-content{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .bulk-workflow-panel{
    padding: 16px;
  }

  .bulk-workflow-heading{
    align-items: flex-start;
  }

  .bulk-template-row,
.bulk-template-summary{
    grid-template-columns: 1fr;
  }

  .bulk-template-actions,
.bulk-export-actions{
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .bulk-template-actions .primary-button,
.bulk-template-actions .ghost-button,
.bulk-export-actions button{
    width: 100%;
  }

  .bulk-step-card{
    padding: 15px;
    border-radius: 18px;
  }

  .bulk-step-head{
    gap: 10px;
  }

  .bulk-style-column{
    padding: 14px;
  }

  .bulk-style-column .settings-grid,
.bulk-logo-controls{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 420px) {
  .bulk-workflow-heading .badge{
    display: none;
  }

  .bulk-step-card{
    padding: 13px;
  }

  .bulk-step-head h3{
    font-size: 1.08rem;
  }
}


.bulk-workflow-heading{
  border-bottom: 1px solid var(--line);
  padding-bottom: 18px;
}

.bulk-workflow-panel .badge{
  white-space: nowrap;
}

.bulk-step-card{
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.bulk-step-card:focus-within{
  border-color: rgba(45, 212, 191, 0.42);
  box-shadow: 0 0 0 4px rgba(45, 212, 191, 0.08), 0 14px 34px rgba(20, 33, 29, 0.08);
}

.bulk-step-upload .message{
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-2);
}

.bulk-step-upload .message.good{
  border-color: rgba(15, 118, 110, 0.28);
  background: rgba(15, 118, 110, 0.08);
}

.bulk-step-upload .message.warn{
  border-color: rgba(194, 65, 12, 0.28);
  background: rgba(194, 65, 12, 0.08);
}

.bulk-step-upload .message.error{
  border-color: rgba(220, 38, 38, 0.28);
  background: rgba(220, 38, 38, 0.08);
}

.bulk-dropzone.has-file{
  border-color: rgba(15, 118, 110, 0.55);
  background: linear-gradient(135deg, rgba(15, 118, 110, 0.10), rgba(45, 212, 191, 0.06));
}

.bulk-csv-file-name{
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255, 255, 255, .28);
  font-size: .82rem;
  font-style: normal;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bulk-dropzone.has-file .bulk-csv-file-name{
  color: var(--primary);
  border-color: rgba(15, 118, 110, .28);
  background: rgba(15, 118, 110, .08);
}

.bulk-qr-preview-empty{
  gap: 10px;
  text-align: center;
  padding: 24px;
}

.bulk-qr-preview-empty strong{
  display: block;
  color: var(--text);
  max-width: 320px;
}

.bulk-qr-preview-empty small{
  display: block;
  max-width: 300px;
  color: var(--muted);
  line-height: 1.4;
}

.bulk-rows-panel .panel-heading h2{
  margin-bottom: 0;
}

html[data-theme="dark"] .bulk-step-upload .message,
html[data-theme="dark"] .bulk-csv-file-name{
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(45, 212, 191, 0.16);
}

html[data-theme="dark"] .bulk-dropzone.has-file{
  border-color: rgba(45, 212, 191, 0.45);
  background: linear-gradient(135deg, rgba(45, 212, 191, 0.10), rgba(15, 118, 110, 0.06));
}

html[data-theme="dark"] .bulk-dropzone.has-file .bulk-csv-file-name{
  color: #99f6e4;
  border-color: rgba(45, 212, 191, .28);
  background: rgba(45, 212, 191, .08);
}

@media (max-width: 900px) {
  .bulk-workflow-content{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {

  .bulk-workflow-heading{
    display: grid;
    gap: 12px;
  }

  .bulk-workflow-heading .badge{
    justify-self: start;
  }

  .bulk-template-summary{
    gap: 12px;
  }

  .bulk-dropzone,
.logo-dropzone{
    min-height: 132px;
  }

  .bulk-export-settings,
.bulk-preview-mini-copy{
    padding: 12px;
  }
}

@media (max-width: 380px) {

  .bulk-step-head h3{
    font-size: 1rem;
  }

  .bulk-template-actions .primary-button,
.bulk-template-actions .ghost-button,
.bulk-export-actions button{
    min-height: 44px;
    padding-inline: 10px;
  }
}


/* 06. Scan & Safety Lab */
.checker-main{
  padding-bottom: 74px;
}

.checker-tool-grid{
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: 22px;
  align-items: stretch;
}

.checker-upload-panel,
.checker-result-panel{
  padding: 22px;
  min-height: 100%;
}

.checker-panel-note{
  color: var(--muted);
  margin: 10px 0 0;
  max-width: 620px;
}

.checker-dropzone{
  min-height: 236px;
  border: 1.5px dashed rgba(15, 118, 110, 0.48);
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(15,118,110,.08), rgba(255,255,255,.02));
  display: grid;
  place-items: center;
  text-align: center;
  gap: 10px;
  padding: 24px;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.checker-dropzone:hover,
.checker-dropzone.is-dragover{
  transform: translateY(-1px);
  border-color: var(--primary);
  box-shadow: 0 18px 40px rgba(15, 118, 110, .16);
  background: linear-gradient(180deg, rgba(15,118,110,.14), rgba(255,255,255,.04));
}

.checker-dropzone.has-file{
  border-style: solid;
}

.checker-drop-icon{
  width: 60px;
  height: 60px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  background: rgba(15,118,110,.12);
  border: 1px solid rgba(15,118,110,.22);
  color: var(--primary);
  font-size: 2rem;
  font-weight: 900;
}

.checker-dropzone strong{
  font-size: 1.15rem;
}

.checker-dropzone small,
.checker-dropzone em{
  color: var(--muted);
  font-style: normal;
}

.checker-dropzone em{
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: .88rem;
  font-weight: 800;
}

.checker-upload-preview{
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface-2);
  padding: 14px;
  display: grid;
  place-items: center;
}

.checker-upload-preview[hidden],
.checker-upload-preview img[hidden]{
  display: none !important;
}

.checker-upload-preview img{
  width: min(100%, 360px);
  max-height: 360px;
  object-fit: contain;
  background: #fff;
  border-radius: 16px;
  padding: 10px;
}

.checker-reset{
  margin-top: 8px;
}

.checker-empty-state{
  min-height: 460px;
  border: 1px dashed var(--line);
  border-radius: 24px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  text-align: center;
  padding: 26px;
  color: var(--muted);
  background: var(--surface-2);
}

.checker-empty-state strong{
  color: var(--text);
  font-size: 1.18rem;
}

.checker-result{
  display: grid;
  gap: 16px;
}

.checker-verdict-card{
  border-radius: 22px;
  border: 1px solid var(--line);
  padding: 18px;
  background: var(--surface-2);
}

.checker-verdict-card.good{
  border-color: rgba(15, 118, 110, .34);
  background: rgba(15, 118, 110, .08);
}

.checker-verdict-card.warn{
  border-color: rgba(194, 65, 12, .32);
  background: rgba(249, 115, 22, .10);
}

.checker-verdict-card.danger{
  border-color: rgba(220, 38, 38, .32);
  background: rgba(220, 38, 38, .10);
}

.checker-verdict-card strong{
  display: block;
  font-size: clamp(1.25rem, 2vw, 1.7rem);
  line-height: 1.15;
  letter-spacing: -.03em;
  margin-bottom: 8px;
}

.checker-verdict-card p:last-child{
  margin-bottom: 0;
  color: var(--muted);
}

.checker-behavior-card{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  border: 1px solid var(--line);
  background: var(--surface-2);
  border-radius: 22px;
  padding: 18px;
}

.checker-behavior-card.static{
  border-color: rgba(15, 118, 110, .34);
  background: rgba(15, 118, 110, .08);
}

.checker-behavior-card.direct{
  border-color: rgba(45, 212, 191, .34);
  background: rgba(45, 212, 191, .08);
}

.checker-behavior-card.dynamic{
  border-color: rgba(249, 115, 22, .38);
  background: rgba(249, 115, 22, .11);
}

.checker-behavior-card.unknown{
  border-color: rgba(148, 163, 184, .32);
  background: rgba(148, 163, 184, .08);
}

.checker-behavior-copy strong{
  display: block;
  font-size: clamp(1.1rem, 2vw, 1.42rem);
  line-height: 1.18;
  letter-spacing: -.02em;
  margin-bottom: 8px;
}

.checker-behavior-copy p:last-child{
  margin-bottom: 0;
  color: var(--muted);
}

.checker-behavior-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 84px;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .08em;
}

.checker-behavior-card.static .checker-behavior-pill,
.checker-behavior-card.direct .checker-behavior-pill{
  color: var(--primary);
  border-color: rgba(15, 118, 110, .32);
}

.checker-behavior-card.dynamic .checker-behavior-pill{
  color: var(--warning);
  border-color: rgba(249, 115, 22, .38);
}

.checker-meta-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.checker-meta-grid div{
  border: 1px solid var(--line);
  background: var(--surface-2);
  border-radius: 18px;
  padding: 14px;
  min-width: 0;
}

.checker-meta-grid span{
  display: block;
  color: var(--muted);
  font-size: .75rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 6px;
}

.checker-meta-grid strong{
  display: block;
  overflow-wrap: anywhere;
}

.checker-warning-wrap{
  border: 1px solid var(--line);
  background: var(--surface-2);
  border-radius: 22px;
  padding: 18px;
}

.checker-warning-wrap h3{
  margin-bottom: 12px;
  letter-spacing: -.02em;
}

#checkerWarnings{
  display: grid;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.checker-warning{
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px;
  background: var(--surface);
}

.checker-warning span{
  color: var(--muted);
}

.checker-warning.medium{
  border-color: rgba(194, 65, 12, .34);
}

.checker-warning.high{
  border-color: rgba(220, 38, 38, .38);
}

.checker-warning.low{
  border-color: rgba(15, 118, 110, .28);
}

.checker-warning.info{
  border-color: rgba(37, 99, 235, .28);
}

.checker-no-warnings{
  margin: 0;
  color: var(--muted);
}

.checker-payload-field textarea{
  min-height: 132px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: .92rem;
}

.checker-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.checker-actions a,
.checker-actions button{
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.checker-guide-grid{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

html[data-theme="dark"] .checker-dropzone,
html[data-theme="dark"] .checker-empty-state,
html[data-theme="dark"] .checker-behavior-card,
html[data-theme="dark"] .checker-meta-grid div,
html[data-theme="dark"] .checker-warning-wrap,
html[data-theme="dark"] .checker-warning{
  border-color: var(--line);
}

html[data-theme="dark"] .checker-dropzone{
  background: linear-gradient(180deg, rgba(45,212,191,.08), rgba(255,255,255,.02));
}

html[data-theme="dark"] .checker-upload-preview img{
  background: #f6fcfa;
}

@media (max-width: 980px) {
  .checker-tool-grid{
    grid-template-columns: 1fr;
  }

  .checker-empty-state{
    min-height: 300px;
  }
}

@media (max-width: 760px) {

  .checker-upload-panel,
.checker-result-panel{
    padding: 16px;
  }

  .checker-dropzone{
    min-height: 210px;
    padding: 18px;
  }

  .checker-meta-grid,
.checker-guide-grid{
    grid-template-columns: 1fr;
  }

  .checker-actions > *{
    width: 100%;
  }
}


.checker-mode-tabs{
  display: inline-flex;
  width: 100%;
  gap: 10px;
  margin: 0 0 16px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
}

.checker-mode-tab{
  flex: 1 1 0;
  min-height: 46px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-weight: 850;
  padding: 10px 16px;
  transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.checker-mode-tab:hover{
  color: var(--text);
  transform: translateY(-1px);
}

.checker-mode-tab.is-active{
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  box-shadow: 0 12px 26px rgba(15, 118, 110, .22);
}

.checker-mode-panel[hidden]{
  display: none !important;
}

.checker-camera-panel{
  display: grid;
  gap: 14px;
}

.checker-camera-shell{
  position: relative;
  min-height: 330px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: #050b0a;
  display: grid;
  place-items: center;
}

.checker-camera-shell video{
  width: 100%;
  height: 100%;
  min-height: 330px;
  object-fit: cover;
  display: block;
  background: #050b0a;
}

.checker-camera-frame{
  position: absolute;
  inset: 14%;
  border: 2px solid rgba(45, 212, 191, .86);
  border-radius: 26px;
  box-shadow:
    0 0 0 999px rgba(0, 0, 0, .34),
    inset 0 0 0 1px rgba(255, 255, 255, .18);
  pointer-events: none;
}

.checker-camera-frame::before,
.checker-camera-frame::after,
.checker-camera-frame span::before,
.checker-camera-frame span::after{
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  border-color: #fff;
  border-style: solid;
  border-width: 0;
}

.checker-camera-frame::before{
  top: -2px;
  left: -2px;
  border-top-width: 4px;
  border-left-width: 4px;
  border-top-left-radius: 20px;
}

.checker-camera-frame::after{
  top: -2px;
  right: -2px;
  border-top-width: 4px;
  border-right-width: 4px;
  border-top-right-radius: 20px;
}

.checker-camera-frame span::before{
  bottom: -2px;
  left: -2px;
  border-bottom-width: 4px;
  border-left-width: 4px;
  border-bottom-left-radius: 20px;
}

.checker-camera-frame span::after{
  right: -2px;
  bottom: -2px;
  border-right-width: 4px;
  border-bottom-width: 4px;
  border-bottom-right-radius: 20px;
}

.checker-camera-note{
  margin: 0;
  color: var(--muted);
  font-size: .96rem;
}

.checker-camera-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.checker-camera-actions > *{
  min-width: 180px;
}

html[data-theme="dark"] .checker-mode-tabs,
html[data-theme="dark"] .checker-camera-shell{
  border-color: var(--line);
}

@media (max-width: 760px) {
  .checker-mode-tabs{
    display: grid;
    grid-template-columns: 1fr;
    border-radius: 22px;
  }

  .checker-mode-tab{
    width: 100%;
  }

  .checker-camera-shell,
.checker-camera-shell video{
    min-height: 270px;
  }

  .checker-camera-frame{
    inset: 12%;
  }

  .checker-camera-actions > *{
    width: 100%;
    min-width: 0;
  }
}


@media (max-width: 680px){
  .checker-behavior-card {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .checker-behavior-pill {
    justify-self: start;
  }
}


.brand-mark{
  background: url("brand-icon.svg") center / contain no-repeat !important;
  box-shadow: 0 12px 30px rgba(45, 212, 191, 0.20) !important;
  border-radius: 12px !important;
}
.brand-mark::before,
.brand-mark::after{
  display: none !important;
  content: none !important;
}


.reliability-meter{
  display: grid;
  gap: 14px;
  margin-bottom: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface-2);
}

.reliability-head{
  display: grid;
  grid-template-columns: minmax(150px, .72fr) minmax(0, 1.28fr);
  gap: 16px;
  align-items: center;
}

.reliability-score-wrap{
  display: grid;
  align-content: start;
}

.reliability-kicker{
  margin-bottom: 6px;
}

.reliability-score{
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  color: var(--text);
  font-size: clamp(2.35rem, 5vw, 3.2rem);
  line-height: 1;
  letter-spacing: -0.06em;
}

.reliability-score small{
  color: var(--muted);
  font-size: .95rem;
  letter-spacing: -0.02em;
}

.reliability-verdict{
  display: grid;
  gap: 8px;
  justify-items: start;
}

.reliability-verdict p{
  margin: 0;
  color: var(--muted);
  font-size: .94rem;
}

.reliability-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.reliability-badge.neutral{
  color: var(--muted);
}

.reliability-badge.excellent,
.reliability-badge.strong{
  color: #065f46;
  border-color: rgba(16, 185, 129, .26);
  background: rgba(16, 185, 129, .14);
}

.reliability-badge.usable{
  color: #0f766e;
  border-color: rgba(45, 212, 191, .28);
  background: rgba(45, 212, 191, .14);
}

.reliability-badge.review{
  color: #a16207;
  border-color: rgba(234, 179, 8, .30);
  background: rgba(234, 179, 8, .16);
}

.reliability-badge.risky{
  color: #b91c1c;
  border-color: rgba(239, 68, 68, .30);
  background: rgba(239, 68, 68, .14);
}

.reliability-bar{
  width: 100%;
  height: 11px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(105, 117, 111, .18);
}

.reliability-bar span{
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--primary));
  transition: width .28s ease;
}

.reliability-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.reliability-grid div{
  min-height: 68px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}

.reliability-grid span{
  display: block;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.reliability-grid strong{
  display: block;
  margin-top: 5px;
  color: var(--text);
  font-size: .95rem;
  line-height: 1.3;
}

.reliability-tips{
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.reliability-tips li{
  position: relative;
  margin: 0;
  padding: 11px 12px 11px 34px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--surface);
  color: var(--muted);
  font-size: .9rem;
}

.reliability-tips li::before{
  content: "✓";
  position: absolute;
  left: 12px;
  top: 10px;
  color: var(--primary);
  font-weight: 950;
}

html[data-theme="dark"] .reliability-badge.excellent,
html[data-theme="dark"] .reliability-badge.strong{
  color: #9ff5df;
  border-color: rgba(45, 212, 191, .28);
  background: rgba(45, 212, 191, .12);
}

html[data-theme="dark"] .reliability-badge.usable{
  color: #99f6e4;
  border-color: rgba(45, 212, 191, .28);
  background: rgba(45, 212, 191, .12);
}

html[data-theme="dark"] .reliability-badge.review{
  color: #fde68a;
  border-color: rgba(250, 204, 21, .28);
  background: rgba(250, 204, 21, .12);
}

html[data-theme="dark"] .reliability-badge.risky{
  color: #fca5a5;
  border-color: rgba(248, 113, 113, .28);
  background: rgba(248, 113, 113, .12);
}

@media (max-width: 720px) {
  .reliability-head,
.reliability-grid{
    grid-template-columns: 1fr;
  }

  .reliability-meter{
    padding: 14px;
  }
}


.bulk-reliability-meter{
  margin-top: 14px;
  margin-bottom: 16px;
}

.bulk-reliability-basis{
  display: block;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.4;
}



/* 07. Design & Print Lab */
.studio-main{ padding-bottom: 34px; }
.studio-grid{ display:grid; grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr); gap:22px; align-items:start; }
.studio-form-panel,
.studio-preview-panel{ padding:22px; }
.studio-dynamic-fields{ display:grid; gap:14px; }
.studio-field-grid,
.studio-template-grid-fields{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.studio-template-grid-fields .wide{ grid-column:1/-1; }


.studio-logo-column{ display:grid; align-content:start; gap:10px; }
.field-label{ color:var(--muted); font-weight:850; font-size:.92rem; }
.studio-logo-dropzone{ min-height:210px; }
.studio-logo-check{ margin-top:4px; }
.studio-preview-panel{ position:sticky; top:92px; }


.studio-preview-canvas{ width:100%; display:grid; place-items:center; }
.studio-preview-canvas svg{ width:100%; max-height:620px; display:block; border-radius:24px; box-shadow:0 18px 50px rgba(0,0,0,.18); }
.studio-reliability{ margin-top:16px; padding:16px; border:1px solid var(--line); border-radius:20px; background:var(--surface-2); }


.studio-reliability p{ margin:0; color:var(--muted); font-size:.92rem; }


.studio-help-grid{ margin-top:18px; }
html[data-theme="dark"] .studio-reliability{ background:rgba(18,28,26,.92); border-color:var(--line); }

@media (max-width:1100px){ .studio-grid{ grid-template-columns:1fr; } .studio-preview-panel{position:static;} }
@media (max-width:780px){ .studio-form-panel,
.studio-preview-panel{padding:16px;} .studio-field-grid,
.studio-template-grid-fields{grid-template-columns:1fr;}   }
@media (max-width:520px){   }


.nav-platform-links{
  align-items: center;
  gap: 10px;
}

.nav-dropdown{
  position: relative;
  display: inline-flex;
  align-items: center;
}

.nav-dropdown-toggle{
  min-height: 42px;
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
  border-radius: 999px;
  padding: 10px 13px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.nav-dropdown-toggle:hover,
.nav-dropdown:focus-within > .nav-dropdown-toggle,
.nav-dropdown.is-open > .nav-dropdown-toggle,
.nav-dropdown.has-active > .nav-dropdown-toggle{
  background: rgba(15, 118, 110, 0.12);
  border-color: rgba(15, 118, 110, 0.24);
  color: var(--primary);
}

html[data-theme="dark"] .nav-dropdown-toggle:hover,
html[data-theme="dark"] .nav-dropdown:focus-within > .nav-dropdown-toggle,
html[data-theme="dark"] .nav-dropdown.is-open > .nav-dropdown-toggle,
html[data-theme="dark"] .nav-dropdown.has-active > .nav-dropdown-toggle{
  background: rgba(45, 212, 191, 0.12);
  border-color: rgba(45, 212, 191, 0.24);
  color: #99f6e4;
}

.nav-chevron{
  font-size: .9rem;
  line-height: 1;
  transition: transform .18s ease;
}

.nav-dropdown.is-open .nav-chevron,
.nav-dropdown:hover .nav-chevron,
.nav-dropdown:focus-within .nav-chevron{
  transform: rotate(180deg);
}

.nav-dropdown-menu{
  position: absolute;
  z-index: 55;
  left: 0;
  top: calc(100% + 12px);
  width: min(340px, calc(100vw - 32px));
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255, 252, 245, .98);
  box-shadow: 0 24px 70px rgba(20, 33, 29, 0.18);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}

html[data-theme="dark"] .nav-dropdown-menu{
  background: rgba(18, 28, 26, .98);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
}

.nav-dropdown:hover > .nav-dropdown-menu,
.nav-dropdown:focus-within > .nav-dropdown-menu,
.nav-dropdown.is-open > .nav-dropdown-menu{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.nav-dropdown-menu a{
  width: 100%;
  border-radius: 14px;
  padding: 11px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-weight: 800;
  color: var(--text);
}

.nav-dropdown-menu a:hover,
.nav-dropdown-menu a.is-active,
.nav-dropdown-menu a[aria-current="page"]{
  background: rgba(15, 118, 110, 0.12);
  color: var(--primary);
}

html[data-theme="dark"] .nav-dropdown-menu a:hover,
html[data-theme="dark"] .nav-dropdown-menu a.is-active,
html[data-theme="dark"] .nav-dropdown-menu a[aria-current="page"]{
  background: rgba(45, 212, 191, 0.12);
  color: #99f6e4;
}

@media (max-width: 900px) {
  .nav-platform-links{
    width: 100%;
    display: grid;
    gap: 8px;
    align-items: stretch;
  }

  .nav-dropdown{
    width: 100%;
    display: grid;
  }

  .nav-dropdown-toggle{
    width: 100%;
    justify-content: space-between;
    border-color: var(--line);
    background: var(--surface);
  }

  html[data-theme="dark"] .nav-dropdown-toggle{
    background: rgba(18, 28, 26, .92);
  }

  .nav-dropdown-menu{
    position: static;
    width: 100%;
    margin-top: 8px;
    max-height: 0;
    overflow: hidden;
    padding-block: 0;
    border-width: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition: max-height .22s ease, padding .22s ease, border-width .22s ease;
  }

  .nav-dropdown:hover > .nav-dropdown-menu,
.nav-dropdown:focus-within > .nav-dropdown-menu{
    max-height: 0;
    padding-block: 0;
    border-width: 0;
  }

  .nav-dropdown.is-open > .nav-dropdown-menu{
    max-height: 420px;
    padding: 12px;
    border-width: 1px;
  }

  .nav-dropdown-menu a{
    min-height: 46px;
  }
}
.rebuilder-controls-column,
.rebuilder-preview-column{ min-width:0; }
.rebuilder-preview-shell{ padding:18px; background:var(--surface-2); border:1px solid var(--line); border-radius:24px; }
.rebuilder-preview-shell h3{ margin:0 0 14px; font-size:1.15rem; }
.rebuilder-preview-card{ min-height:360px; margin:0; }
.rebuilder-preview-card .qr-preview{ width:min(320px,100%); }
.rebuilder-download-grid{ margin-top:14px; }
.rebuilder-reliability{ margin-top:16px; }
html[data-theme="dark"] .rebuilder-preview-shell{ background:rgba(18,28,26,.92); border-color:var(--line); }
@media (max-width: 680px){ .rebuilder-preview-shell{padding:14px;} .rebuilder-preview-card{min-height:300px;} }


.checker-external-note{
  margin: 12px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

.checker-virustotal-button{
  min-width: min(100%, 238px);
}

@media (max-width: 680px) {
  .checker-virustotal-button{
    min-width: 0;
  }
}


.nav-links [data-nav-icon],
.nav-dropdown-toggle[data-nav-icon],
.nav-dropdown-menu [data-nav-icon]{
  position: relative;
}

.nav-links [data-nav-icon]::before,
.nav-dropdown-toggle[data-nav-icon]::before,
.nav-dropdown-menu [data-nav-icon]::before{
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  background-color: currentColor;
  opacity: .92;
  -webkit-mask: var(--nav-icon-mask) center / contain no-repeat;
  mask: var(--nav-icon-mask) center / contain no-repeat;
  pointer-events: none;
}

.nav-dropdown-toggle[data-nav-icon]{
  padding-left: 40px;
}

.nav-links > a[data-nav-icon]{
  padding-left: 38px;
}

.nav-dropdown-menu a[data-nav-icon]{
  padding-left: 42px;
}

@media (max-width: 900px) {
  .nav-dropdown-toggle[data-nav-icon]{
    padding-left: 42px;
  }

  .nav-links > a[data-nav-icon]{
    padding-left: 42px;
  }
}

[data-nav-icon="studio"]{ --nav-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M12%203v4M12%2017v4M3%2012h4M17%2012h4M7%207l2.5%202.5M14.5%2014.5L17%2017M17%207l-2.5%202.5M9.5%2014.5L7%2017%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222%22%20stroke-linecap=%22round%22/%3E%3C/svg%3E"); }
[data-nav-icon="inspector"]{ --nav-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Ccircle%20cx=%2210.5%22%20cy=%2210.5%22%20r=%226.5%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222%22/%3E%3Cpath%20d=%22M15.5%2015.5%2021%2021%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222%22%20stroke-linecap=%22round%22/%3E%3C/svg%3E"); }
[data-nav-icon="single"]{ --nav-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Crect%20x=%223.5%22%20y=%223.5%22%20width=%226.5%22%20height=%226.5%22%20rx=%221%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222%22/%3E%3Crect%20x=%2214%22%20y=%223.5%22%20width=%226.5%22%20height=%226.5%22%20rx=%221%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222%22/%3E%3Crect%20x=%223.5%22%20y=%2214%22%20width=%226.5%22%20height=%226.5%22%20rx=%221%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222%22/%3E%3Cpath%20d=%22M15%2015h2v2h-2zM19%2014h2v3h-2zM14%2019h3v2h-3zM19%2019h2v2h-2z%22%20fill=%22black%22/%3E%3C/svg%3E"); }
[data-nav-icon="batch"]{ --nav-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Crect%20x=%224%22%20y=%224%22%20width=%227%22%20height=%227%22%20rx=%221.2%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222%22/%3E%3Crect%20x=%2213%22%20y=%224%22%20width=%227%22%20height=%227%22%20rx=%221.2%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222%22/%3E%3Crect%20x=%224%22%20y=%2213%22%20width=%227%22%20height=%227%22%20rx=%221.2%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222%22/%3E%3Crect%20x=%2213%22%20y=%2213%22%20width=%227%22%20height=%227%22%20rx=%221.2%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222%22/%3E%3C/svg%3E"); }
[data-nav-icon="design"]{ --nav-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M4%2018.5%2015.9%206.6a2.4%202.4%200%200%201%203.4%203.4L7.4%2021.9%204%2022z%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222%22%20stroke-linejoin=%22round%22/%3E%3Cpath%20d=%22m14.5%208%203.5%203.5M4%2018.5l3.4%203.4%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222%22%20stroke-linecap=%22round%22/%3E%3C/svg%3E"); }
[data-nav-icon="safety"]{ --nav-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M12%203.5%2019%206v5.2c0%204.5-2.7%208.1-7%209.8-4.3-1.7-7-5.3-7-9.8z%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222%22%20stroke-linejoin=%22round%22/%3E%3Cpath%20d=%22m8.6%2012.2%202.1%202.1%204.8-5%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%3C/svg%3E"); }
[data-nav-icon="rebuild"]{ --nav-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M20%208v5h-5M4%2016v-5h5%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%3Cpath%20d=%22M18.2%2012A6.8%206.8%200%200%200%206.5%207.3L4%2011M5.8%2012a6.8%206.8%200%200%200%2011.7%204.7L20%2013%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%3C/svg%3E"); }
[data-nav-icon="extract"]{ --nav-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M4%205h16l-6.2%207.2v5.3l-3.6%201.7v-7z%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222%22%20stroke-linejoin=%22round%22/%3E%3C/svg%3E"); }
[data-nav-icon="compare"]{ --nav-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M8%205%204%209l4%204M16%2019l4-4-4-4M5%209h11M19%2015H8%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%3C/svg%3E"); }
[data-nav-icon="guides"]{ --nav-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M5%205.5c2.2-.7%204.5-.4%207%201.2v13c-2.5-1.6-4.8-1.9-7-1.2zM19%205.5c-2.2-.7-4.5-.4-7%201.2v13c2.5-1.6%204.8-1.9%207-1.2z%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222%22%20stroke-linejoin=%22round%22/%3E%3C/svg%3E"); }
[data-nav-icon="about"]{ --nav-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%229%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222%22/%3E%3Ccircle%20cx=%2212%22%20cy=%228%22%20r=%221.2%22%20fill=%22black%22/%3E%3Cpath%20d=%22M12%2011v6%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222%22%20stroke-linecap=%22round%22/%3E%3C/svg%3E"); }
[data-nav-icon="contact"]{ --nav-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Crect%20x=%223.5%22%20y=%225.5%22%20width=%2217%22%20height=%2213%22%20rx=%222%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222%22/%3E%3Cpath%20d=%22m5%207%207%205%207-5%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%3C/svg%3E"); }


.ad-placement{
  margin-block: clamp(1.25rem, 3vw, 2.2rem);
}

.ad-placement [ta-ad-container]{
  display: block;
  width: 100%;
}

.ad-placement:has([ta-ad-container]:empty){
  display: none;
}


@media (min-width: 901px){
  .nav-dropdown::after {
    content: "";
    position: absolute;
    z-index: 54;
    left: -6px;
    right: -6px;
    top: 100%;
    height: 18px;
  }
}

.soft-section .use-card{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px;
}

.soft-section .use-card::before{
  content: "";
  display: block;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  background-color: #fed7aa;
  -webkit-mask: var(--use-icon-mask) center / contain no-repeat;
  mask: var(--use-icon-mask) center / contain no-repeat;
  opacity: .98;
}

.use-card[data-preset="url"]{
  --use-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M10%2014a5%205%200%200%200%207.1.1l2-2a5%205%200%200%200-7.1-7.1l-1.1%201.1%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222%22%20stroke-linecap=%22round%22/%3E%3Cpath%20d=%22M14%2010a5%205%200%200%200-7.1-.1l-2%202a5%205%200%200%200%207.1%207.1l1.1-1.1%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222%22%20stroke-linecap=%22round%22/%3E%3C/svg%3E");
}

.use-card[data-preset="wifi"]{
  --use-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M4%209c4.8-4%2011.2-4%2016%200M7%2012.5c3-2.6%207-2.6%2010%200M10.2%2016c1.1-1%202.5-1%203.6%200%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222%22%20stroke-linecap=%22round%22/%3E%3Ccircle%20cx=%2212%22%20cy=%2219%22%20r=%221.4%22%20fill=%22black%22/%3E%3C/svg%3E");
}

.use-card[data-preset="vcard"]{
  --use-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Crect%20x=%223.5%22%20y=%225%22%20width=%2217%22%20height=%2214%22%20rx=%222%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222%22/%3E%3Ccircle%20cx=%228.5%22%20cy=%2211%22%20r=%222.2%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222%22/%3E%3Cpath%20d=%22M5.8%2016c.7-1.6%204.7-1.6%205.4%200M14%2010h4M14%2014h4%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222%22%20stroke-linecap=%22round%22/%3E%3C/svg%3E");
}

.use-card[data-preset="whatsapp"]{
  --use-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M20%2011.5a8%208%200%200%201-11.8%207L4%2020l1.7-4.1A8%208%200%201%201%2020%2011.5z%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222%22%20stroke-linejoin=%22round%22/%3E%3Cpath%20d=%22M9%208.7c.3-.6.6-.6%201-.6h.6c.2%200%20.4.1.5.4l.8%202c.1.3.1.5-.1.7l-.6.7c.6%201%201.4%201.7%202.5%202.2l.8-.5c.2-.1.5-.1.7%200l1.8.9c.3.1.4.3.4.6%200%20.7-.5%201.3-1.1%201.6-.7.3-2.1.1-3.8-.8-2.2-1.2-4.1-3.1-5.2-5.4-.8-1.7-.9-3-.5-3.8z%22%20fill=%22black%22/%3E%3C/svg%3E");
}

.use-card[data-preset="email"]{
  --use-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Crect%20x=%223.5%22%20y=%225.5%22%20width=%2217%22%20height=%2213%22%20rx=%222%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222%22/%3E%3Cpath%20d=%22m5%207%207%205%207-5%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%3C/svg%3E");
}

.use-card[data-preset="location"]{
  --use-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M12%2021s6-5.3%206-11a6%206%200%201%200-12%200c0%205.7%206%2011%206%2011z%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222%22%20stroke-linejoin=%22round%22/%3E%3Ccircle%20cx=%2212%22%20cy=%2210%22%20r=%222.2%22%20fill=%22black%22/%3E%3C/svg%3E");
}

.use-card[data-preset="event"]{
  --use-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Crect%20x=%224%22%20y=%225.5%22%20width=%2216%22%20height=%2215%22%20rx=%222%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222%22/%3E%3Cpath%20d=%22M8%203.8v4M16%203.8v4M4%2010h16%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222%22%20stroke-linecap=%22round%22/%3E%3Cpath%20d=%22M8%2014h3M13%2014h3M8%2017h3%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222%22%20stroke-linecap=%22round%22/%3E%3C/svg%3E");
}

.use-card[data-preset="crypto"]{
  --use-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M6%207h12a3%203%200%200%201%203%203v7a3%203%200%200%201-3%203H6a3%203%200%200%201-3-3a2%202%200%200%201%202-2z%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222%22/%3E%3Cpath%20d=%22M6%207.5A2.5%202.5%200%200%201%208.5%203H17M15%2013h6%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222%22%20stroke-linecap=%22round%22/%3E%3Ccircle%20cx=%2217%22%20cy=%2213%22%20r=%221.2%22%20fill=%22black%22/%3E%3C/svg%3E");
}

.use-card[data-preset="text"]{
  --use-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M6%204h9l4%204v12H6z%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222%22%20stroke-linejoin=%22round%22/%3E%3Cpath%20d=%22M15%204v5h5M9%2013h6M9%2017h5%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%3C/svg%3E");
}



/* 08. Extractor */
.extractor-tool-grid{
  display: grid;
  grid-template-columns: minmax(320px, 0.92fr) minmax(360px, 1.08fr);
  gap: clamp(1rem, 2.8vw, 1.8rem);
  align-items: start;
  margin-top: clamp(1.2rem, 3vw, 2rem);
}

.extractor-upload-panel,
.extractor-results-panel{
  min-height: 100%;
  padding: clamp(1.05rem, 2.4vw, 1.4rem);
}

.extractor-upload-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}

.extractor-message{
  margin-top: 1rem;
  margin-bottom: 0;
}

.extractor-file-notes{
  display: grid;
  gap: 0.8rem;
  margin-top: 1rem;
}

.mini-note{
  display: grid;
  gap: 0.28rem;
  padding: 0.95rem 1rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
}

.mini-note strong{
  font-size: 0.92rem;
}

.mini-note span{
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

.extractor-results-heading{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.extractor-count-pill{
  display: inline-grid;
  place-items: center;
  min-width: 2.6rem;
  min-height: 2.6rem;
  padding: 0.32rem 0.72rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
  color: var(--text);
  font-weight: 800;
  font-size: 1rem;
}

.extractor-results-list{
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}

.extractor-result-card{
  display: grid;
  gap: 1rem;
  padding: clamp(1rem, 2.4vw, 1.25rem);
  border: 1px solid var(--line);
  border-radius: 1.35rem;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: var(--shadow-soft);
}

.extractor-result-head{
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--line);
}

.extractor-result-head h3{
  margin: 0.18rem 0 0;
}

.extractor-result-meta{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}

.extractor-result-meta span{
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.26rem 0.68rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 74%, transparent);
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
}

.extractor-result-body{
  display: grid;
  grid-template-columns: minmax(150px, 220px) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.extractor-crop-preview{
  display: grid;
  place-items: center;
  min-height: 180px;
  margin: 0;
  padding: 0.75rem;
  border-radius: 1.1rem;
  border: 1px solid var(--line);
  background: #fff;
  overflow: hidden;
}

.extractor-crop-preview img{
  display: block;
  width: 100%;
  height: auto;
  max-height: 260px;
  object-fit: contain;
}

.extractor-crop-preview figcaption{
  color: #334155;
  font-size: 0.92rem;
  text-align: center;
}

.extractor-result-details{
  display: grid;
  gap: 0.85rem;
  min-width: 0;
}

.extractor-target-row{
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.extractor-target-row strong{
  color: var(--text);
}

.extractor-payload-field textarea{
  width: 100%;
  resize: vertical;
  min-height: 4.6rem;
  max-height: 12rem;
  line-height: 1.45;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.extractor-result-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 0.62rem;
}

.extractor-result-actions .primary-button,
.extractor-result-actions .secondary-button,
.extractor-result-actions .ghost-button{
  min-height: 2.8rem;
  padding-inline: 0.86rem;
  font-size: 0.92rem;
}

.extractor-guide-grid{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1080px) {
  .extractor-tool-grid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .extractor-result-head,
.extractor-results-heading{
    flex-direction: column;
  }

  .extractor-result-meta{
    justify-content: flex-start;
  }

  .extractor-result-body,
.extractor-guide-grid{
    grid-template-columns: 1fr;
  }

  .extractor-crop-preview{
    min-height: 150px;
  }

  .extractor-upload-actions,
.extractor-result-actions{
    display: grid;
    grid-template-columns: 1fr;
  }
}



/* 09. Compare */
.compare-workspace{
  display: grid;
  gap: clamp(1rem, 2.6vw, 1.8rem);
  margin-top: clamp(1.2rem, 3vw, 2rem);
}

.compare-upload-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.6vw, 1.6rem);
  align-items: start;
}

.compare-upload-card{
  display: grid;
  align-content: start;
  gap: 1rem;
  min-height: 100%;
  padding: clamp(1.05rem, 2.4vw, 1.4rem);
}

.compare-card-heading{
  align-items: flex-start;
  margin-bottom: 0;
}

.compare-side-pill,
.compare-meta-pills span,
.compare-verdict-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  padding: 0.28rem 0.72rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.compare-dropzone .checker-drop-icon{
  font-weight: 900;
}

.compare-file-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  color: var(--muted);
  font-size: 0.94rem;
}

.compare-file-row span{
  min-width: 0;
  overflow-wrap: anywhere;
}

.compact-button{
  min-height: 2.5rem;
  padding-inline: 0.8rem;
}

.compare-preview{
  display: grid;
  place-items: center;
  min-height: 190px;
  margin: 0;
  padding: 0.8rem;
  border: 1px solid var(--line);
  border-radius: 1.2rem;
  background: #fff;
  overflow: hidden;
}

.compare-preview img{
  display: block;
  width: 100%;
  max-width: 320px;
  max-height: 320px;
  object-fit: contain;
}

.compare-side-review{
  display: grid;
  gap: 0.9rem;
  padding-top: 0.2rem;
}

.compare-meta-pills{
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.compare-meta-pills span:last-child{
  background: color-mix(in srgb, var(--surface) 76%, transparent);
  color: var(--muted);
}

.compare-payload-field textarea{
  width: 100%;
  resize: vertical;
  min-height: 5.2rem;
  max-height: 14rem;
  line-height: 1.45;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.compare-side-actions,
.compare-control-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 0.62rem;
}

.compare-side-actions .primary-button,
.compare-side-actions .secondary-button,
.compare-side-actions .ghost-button,
.compare-control-actions .primary-button,
.compare-control-actions .ghost-button{
  min-height: 2.8rem;
  padding-inline: 0.88rem;
  font-size: 0.92rem;
}

.compare-control-panel{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem 1.4rem;
  align-items: center;
  padding: clamp(1.05rem, 2.4vw, 1.4rem);
}

.compare-message{
  grid-column: 1 / -1;
  margin-bottom: 0;
}

.compare-results-panel{
  display: grid;
  gap: 1rem;
  min-width: 0;
  padding: clamp(1.05rem, 2.4vw, 1.4rem);
}

.compare-results-heading{
  margin-bottom: 0;
}

.compare-side-message{
  margin-bottom: 0;
}

.compare-empty-state{
  display: grid;
  place-items: center;
  gap: 0.55rem;
  min-height: 220px;
  padding: clamp(1.2rem, 3vw, 2rem);
  border: 1px dashed var(--line);
  border-radius: 1.35rem;
  text-align: center;
  background: color-mix(in srgb, var(--surface) 84%, transparent);
}

.compare-empty-state span{
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 1rem;
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
  color: var(--primary);
  font-size: 1.55rem;
  font-weight: 900;
}

.compare-empty-state h3,
.compare-empty-state p{
  margin: 0;
}

.compare-empty-state p{
  max-width: 52rem;
  color: var(--muted);
  line-height: 1.62;
}

.compare-results-content{
  display: grid;
  gap: 1rem;
}

.compare-verdict-card{
  border: 1px solid var(--line);
  border-radius: 1.35rem;
  padding: clamp(1rem, 2.6vw, 1.35rem);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: var(--shadow-soft);
}

.compare-verdict-card.match{
  border-color: color-mix(in srgb, var(--primary) 58%, var(--line));
  background: color-mix(in srgb, var(--primary) 12%, var(--surface));
}

.compare-verdict-card.review{
  border-color: color-mix(in srgb, var(--primary) 42%, var(--line));
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
}

.compare-verdict-card.alert{
  border-color: color-mix(in srgb, var(--warning) 56%, var(--line));
  background: color-mix(in srgb, var(--warning) 12%, var(--surface));
}

.compare-verdict-head{
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
}

.compare-verdict-badge{
  flex: 0 0 auto;
  min-width: 4rem;
  min-height: 2.4rem;
}

.compare-verdict-card.match .compare-verdict-badge{
  background: color-mix(in srgb, var(--primary) 20%, var(--surface));
}

.compare-verdict-card.alert .compare-verdict-badge{
  background: color-mix(in srgb, var(--warning) 20%, var(--surface));
}

.compare-verdict-head h3,
.compare-verdict-head p{
  margin: 0;
}

.compare-verdict-head p{
  margin-top: 0.3rem;
  color: var(--muted);
  line-height: 1.6;
}

.compare-detail-block{
  display: grid;
  gap: 0.9rem;
  padding: clamp(1rem, 2.4vw, 1.25rem);
  border: 1px solid var(--line);
  border-radius: 1.3rem;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
}

.compare-block-heading h3,
.compare-block-heading p{
  margin: 0;
}

.compare-block-heading p{
  margin-top: 0.32rem;
  color: var(--muted);
  line-height: 1.58;
}

.compare-summary-list{
  display: grid;
  gap: 0.62rem;
  margin: 0;
  padding-left: 1.25rem;
  color: var(--muted);
  line-height: 1.55;
}

.compare-summary-list li::marker{
  color: var(--primary);
}

.compare-table-wrap{
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 1rem;
}

.compare-url-table{
  width: 100%;
  border-collapse: collapse;
  min-width: 580px;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
}

.compare-url-table th,
.compare-url-table td{
  padding: 0.82rem 0.9rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  text-align: left;
  font-size: 0.94rem;
  overflow-wrap: anywhere;
}

.compare-url-table thead th{
  color: var(--text);
  font-size: 0.84rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}

.compare-url-table tbody tr:last-child th,
.compare-url-table tbody tr:last-child td{
  border-bottom: 0;
}

.compare-url-table tbody tr.same th{
  color: var(--text);
}

.compare-url-table tbody tr.different{
  background: color-mix(in srgb, var(--warning) 10%, transparent);
}

.compare-url-table tbody tr.different th{
  color: var(--warning);
}

.compare-diff-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.compare-diff-card{
  display: grid;
  gap: 0.6rem;
  padding: 0.95rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
}

.compare-diff-card h4{
  margin: 0;
}

.compare-diff-output{
  min-height: 4.8rem;
  padding: 0.85rem;
  border-radius: 0.85rem;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border: 1px solid var(--line);
  overflow-x: auto;
}

.compare-diff-output code{
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  line-height: 1.6;
}

.compare-diff-output mark{
  padding: 0.12rem 0.08rem;
  border-radius: 0.2rem;
  background: color-mix(in srgb, var(--warning) 34%, #fff);
  color: inherit;
}

.compare-guide-grid{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1080px) {
  .compare-upload-grid,
.compare-control-panel{
    grid-template-columns: 1fr;
  }

  .compare-control-actions{
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .compare-card-heading,
.compare-file-row,
.compare-verdict-head{
    flex-direction: column;
    align-items: flex-start;
  }

  .compare-side-actions,
.compare-control-actions{
    display: grid;
    grid-template-columns: 1fr;
  }

  .compare-diff-grid,
.compare-guide-grid{
    grid-template-columns: 1fr;
  }

  .compare-preview{
    min-height: 150px;
  }
}


.bulk-entry-step{
  display: grid;
  gap: 1.15rem;
}

.bulk-entry-mode-switch{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
  padding: 0.5rem;
  border: 1px solid var(--line);
  border-radius: 1.35rem;
  background: var(--surface-soft, rgba(255, 255, 255, 0.06));
}

.bulk-entry-mode-button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  min-height: 3.25rem;
  padding: 0.8rem 1rem;
  border: 1px solid transparent;
  border-radius: 1rem;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.bulk-entry-mode-button span[aria-hidden="true"]{
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.65rem;
  background: rgba(15, 118, 110, 0.12);
  color: var(--accent, #0f766e);
  font-weight: 900;
}

.bulk-entry-mode-button:hover,
.bulk-entry-mode-button:focus-visible{
  transform: translateY(-1px);
  border-color: rgba(15, 118, 110, 0.24);
  outline: none;
}

.bulk-entry-mode-button.is-active{
  border-color: rgba(15, 118, 110, 0.34);
  background: var(--panel, #ffffff);
  box-shadow: var(--soft-shadow, 0 18px 48px rgba(15, 23, 42, 0.10));
}

html[data-theme="dark"] .bulk-entry-mode-button.is-active{
  background: rgba(255, 255, 255, 0.08);
}

.bulk-entry-mode-panel{
  display: grid;
  gap: 1rem;
  padding: clamp(1rem, 2vw, 1.25rem);
  border: 1px solid var(--line);
  border-radius: 1.45rem;
  background: var(--panel, #ffffff);
}

.bulk-entry-mode-panel[hidden]{
  display: none !important;
}

html[data-theme="dark"] .bulk-entry-mode-panel{
  background: rgba(255, 255, 255, 0.045);
}

.bulk-entry-panel-copy{
  display: grid;
  gap: 0.35rem;
}

.bulk-entry-panel-copy strong{
  font-size: 1.02rem;
}

.bulk-entry-panel-copy p,
.bulk-manual-generate-row .bulk-muted{
  margin: 0;
}

.bulk-manual-toolbar,
.bulk-manual-generate-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.bulk-manual-table-wrap{
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 1.2rem;
  background: var(--panel, #ffffff);
}

html[data-theme="dark"] .bulk-manual-table-wrap{
  background: rgba(9, 16, 15, 0.58);
}

.bulk-manual-table{
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
}

.bulk-manual-table th,
.bulk-manual-table td{
  padding: 0.85rem 0.72rem;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  text-align: left;
}

.bulk-manual-table th{
  white-space: nowrap;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface-soft, rgba(255, 255, 255, 0.06));
}

.bulk-manual-table tbody tr:last-child td{
  border-bottom: 0;
}

.bulk-manual-row:hover{
  background: rgba(15, 118, 110, 0.045);
}

.bulk-manual-control{
  width: 100%;
  min-width: 8.8rem;
  min-height: 2.8rem;
  padding: 0.72rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 0.85rem;
  background: var(--panel, #ffffff);
  color: inherit;
  font: inherit;
}

.bulk-manual-control:focus{
  outline: 2px solid rgba(15, 118, 110, 0.25);
  border-color: rgba(15, 118, 110, 0.55);
}

html[data-theme="dark"] .bulk-manual-control{
  background: rgba(255, 255, 255, 0.06);
}

.bulk-manual-table td.is-wide .bulk-manual-control{
  min-width: 15rem;
}

.bulk-manual-actions-cell{
  width: 4.25rem;
  text-align: center !important;
}

.bulk-manual-remove{
  display: inline-grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border: 1px solid rgba(220, 38, 38, 0.24);
  border-radius: 999px;
  background: rgba(220, 38, 38, 0.08);
  color: #dc2626;
  font: inherit;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

.bulk-manual-remove:hover,
.bulk-manual-remove:focus-visible{
  background: rgba(220, 38, 38, 0.14);
  border-color: rgba(220, 38, 38, 0.42);
  outline: none;
}

@media (max-width: 760px) {
  .bulk-entry-mode-switch{
    grid-template-columns: 1fr;
  }

  .bulk-manual-toolbar,
.bulk-manual-generate-row{
    align-items: stretch;
    flex-direction: column;
  }

  .bulk-manual-toolbar .secondary-button,
.bulk-manual-toolbar .ghost-button,
.bulk-manual-toolbar .link-button,
.bulk-manual-generate-row .primary-button{
    width: 100%;
  }
}


.enhanced-empty-state{ gap: 0.9rem; }
.empty-state-orb{ display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 1.25rem; border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--line)); background: color-mix(in srgb, var(--primary) 12%, var(--surface)); color: var(--primary); font-size: 1.9rem; font-weight: 950; box-shadow: 0 16px 28px rgba(15, 118, 110, 0.08); }
.empty-state-chip-row{ display: flex; flex-wrap: wrap; justify-content: center; gap: 0.55rem; margin-top: 0.15rem; }
.empty-state-chip-row span{ display: inline-flex; align-items: center; min-height: 2.15rem; padding: 0.45rem 0.72rem; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--surface) 90%, transparent); color: var(--muted); font-size: 0.84rem; font-weight: 800; }
.extractor-empty-state.enhanced-empty-state,
.compare-empty-state.enhanced-empty-state{ min-height: 270px; }
.action-stack{ display: grid !important; gap: 0.72rem !important; }
.result-action-row{ display: flex; flex-wrap: wrap; gap: 0.62rem; align-items: center; }
.result-action-primary{ padding-bottom: 0.66rem; border-bottom: 1px dashed var(--line); }
.result-action-secondary .ghost-button,
.result-action-secondary .secondary-button{ min-height: 2.7rem; padding-inline: 0.88rem; }
.compare-control-actions #compareSwap{ white-space: nowrap; }
.compare-results-panel,
.extractor-results-panel{ scroll-margin-top: 7rem; }
@media (max-width: 760px) {
  .result-action-row .primary-button,
  .result-action-row .secondary-button,
  .result-action-row .ghost-button,
  .checker-actions a,
  .checker-actions button{ width: 100%; }
  .empty-state-chip-row{ display: grid; grid-template-columns: 1fr; width: 100%; }
  .empty-state-chip-row span{ justify-content: center; }
}


.tool-first-home{
  padding-top: 26px;
}

.guided-generator-grid{
  align-items: start;
  margin-top: 0;
}

.guided-form-panel{
  display: grid;
  gap: 18px;
}

.guided-panel-heading{
  margin-bottom: 0;
}

.guided-progress{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface-2);
}

.guided-progress-step{
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 62px;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: 16px;
  background: transparent;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}

.guided-progress-step span{
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font-weight: 950;
}

.guided-progress-step strong{
  font-size: .92rem;
  line-height: 1.2;
  color: inherit;
}

.guided-progress-step:hover,
.guided-progress-step:focus-visible{
  transform: translateY(-1px);
  border-color: rgba(45, 212, 191, .38);
  background: var(--surface);
}

.guided-progress-step.is-active{
  color: var(--text);
  background: var(--surface);
  border-color: rgba(45, 212, 191, .52);
  box-shadow: 0 14px 28px rgba(20, 33, 29, .08);
}

.guided-progress-step.is-complete{
  color: var(--text);
}

.guided-progress-step.is-active span,
.guided-progress-step.is-complete span{
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}

.guided-step{
  padding: clamp(18px, 2.5vw, 24px);
  border: 1px solid var(--line);
  border-radius: 26px;
  background: var(--surface-2);
  box-shadow: 0 16px 34px rgba(20, 33, 29, .05);
}

.guided-step[hidden]{
  display: none !important;
}

.guided-step-heading{
  display: grid;
  gap: 6px;
  margin-bottom: 18px;
}

.guided-step-heading h3{
  margin: 0;
  font-size: clamp(1.26rem, 2.2vw, 1.65rem);
  line-height: 1.15;
  letter-spacing: -.03em;
}

.guided-step-heading p:last-child{
  margin: 0;
  color: var(--muted);
}


.guided-actions{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.guided-actions .ghost-button,
.guided-actions .primary-button{
  min-width: 154px;
}

.guided-actions .ghost-button[disabled]{
  opacity: .36;
}

.guided-review-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.guided-review-grid div{
  display: grid;
  gap: 6px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
}

.guided-review-grid span{
  font-size: .76rem;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

.guided-preview-panel{
  top: 92px;
}

.guided-downloads{
  display: none;
}

.guided-downloads.is-visible{
  display: block;
}


.studio-guided-review{
  margin-top: 6px;
}

@media (max-width: 1100px) {
  .guided-review-grid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 780px) {
  .tool-first-home{
    padding-top: 16px;
  }
  .guided-progress{
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .guided-progress-step{
    min-height: 54px;
  }
  .guided-step{
    padding: 16px;
    border-radius: 22px;
  }
  .guided-actions{
    display: grid;
    grid-template-columns: 1fr;
  }
  .guided-actions .ghost-button,
.guided-actions .primary-button{
    width: 100%;
  }
}


[hidden]{
  display: none !important;
}

.nav-links .nav-support-link{
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 14px 28px rgba(15, 118, 110, 0.18);
}

.nav-links .nav-support-link:hover,
.nav-links .nav-support-link.is-active,
.nav-links .nav-support-link[aria-current="page"]{
  color: #fff;
  background: linear-gradient(135deg, var(--primary-dark), var(--primary));
  transform: translateY(-1px);
}

.nav-links .nav-support-link::after{
  display: none !important;
}

[data-nav-icon="support"]{
  --nav-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M12%2020.2c-.3%200-.6-.1-.8-.3-2.1-1.6-4-3.2-5.5-4.9C4.2%2013.3%203.5%2011.7%203.5%2010c0-3%202.2-5.1%205-5.1%201.4%200%202.7.6%203.5%201.7.9-1.1%202.1-1.7%203.5-1.7%202.8%200%205%202.1%205%205.1%200%201.7-.7%203.3-2.2%205-1.5%201.7-3.4%203.3-5.5%204.9-.2.2-.5.3-.8.3Z%22%20fill=%22black%22/%3E%3C/svg%3E");
}


/* 10. Support, dialogs, and transactional overlays */
.support-main{
  padding-block: 42px 84px;
  display: grid;
  gap: 28px;
}

.support-hero-card,
.support-option-card,
.support-wallet-card,
.support-warning-card{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 252, 245, 0.92);
  box-shadow: var(--shadow-soft);
}

.support-hero-card{
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .75fr);
  align-items: stretch;
  gap: 24px;
  padding: clamp(24px, 4vw, 42px);
}

.support-hero-card h1{
  max-width: 850px;
  font-size: clamp(2.2rem, 5vw, 4.6rem);
  margin-bottom: 18px;
}

.support-hero-card > div > p:last-child{
  max-width: 760px;
  color: var(--muted);
  font-size: 1.03rem;
}

.support-status-card{
  border: 1px solid rgba(15, 118, 110, 0.18);
  border-radius: 22px;
  padding: 24px;
  background: linear-gradient(145deg, rgba(15, 118, 110, 0.14), rgba(249, 115, 22, 0.08));
  display: grid;
  align-content: start;
  gap: 12px;
}

.support-status-card h2,
.support-option-card h2,
.support-warning-card h3{
  margin-bottom: 0;
  letter-spacing: -0.035em;
}

.support-status-card p,
.support-option-card p,
.support-warning-card p,
.support-wallet-card p{
  color: var(--muted);
}

.support-status-pill{
  display: inline-flex;
  width: fit-content;
  align-items: center;
  min-height: 30px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid rgba(15, 118, 110, 0.22);
  background: rgba(15, 118, 110, 0.12);
  color: var(--primary-dark);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .02em;
}

.support-option-card{
  padding: clamp(22px, 3vw, 32px);
  display: grid;
  align-content: start;
  gap: 14px;
}

.support-help-list{
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 10px;
  color: var(--muted);
}

.support-help-card .secondary-button{
  width: fit-content;
  margin-top: 4px;
}

.support-wallet-card{
  padding: 22px;
  display: grid;
  align-content: start;
  gap: 14px;
}

.support-wallet-address{
  display: block;
  width: 100%;
  overflow-wrap: anywhere;
  border: 1px solid rgba(15, 118, 110, 0.16);
  border-radius: 16px;
  background: rgba(15, 118, 110, 0.08);
  padding: 14px;
  color: var(--text);
  font-size: .92rem;
}

.support-copy-status{
  min-height: 22px;
  margin: -4px 0 0;
  font-size: .92rem;
  font-weight: 750;
}

.support-wallet-qr{
  width: min(100%, 230px);
  min-height: 220px;
  margin-inline: auto;
  display: grid;
  place-items: center;
  border: 1px solid rgba(15, 118, 110, 0.14);
  border-radius: 22px;
  background: #fff;
  padding: 16px;
}

.support-wallet-qr svg,
.support-wallet-qr canvas{
  width: 100% !important;
  height: auto !important;
}

.support-warning-card{
  padding: clamp(20px, 3vw, 30px);
  border-color: rgba(194, 65, 12, 0.24);
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.12), rgba(255, 252, 245, 0.94));
}

.support-warning-card p{
  max-width: 960px;
  margin-bottom: 0;
}

html[data-theme="dark"] .support-hero-card,
html[data-theme="dark"] .support-option-card,
html[data-theme="dark"] .support-wallet-card,
html[data-theme="dark"] .support-warning-card{
  background: rgba(15, 23, 21, .92);
  border-color: rgba(98, 124, 116, .34);
}

html[data-theme="dark"] .support-status-card{
  border-color: rgba(126, 231, 201, 0.18);
  background: linear-gradient(145deg, rgba(45, 212, 191, 0.13), rgba(249, 115, 22, 0.08));
}

html[data-theme="dark"] .support-status-pill{
  color: #aaf0df;
  border-color: rgba(126, 231, 201, 0.22);
  background: rgba(45, 212, 191, 0.12);
}

html[data-theme="dark"] .support-wallet-address{
  color: #effcf7;
  border-color: rgba(126, 231, 201, 0.18);
  background: rgba(45, 212, 191, 0.08);
}

html[data-theme="dark"] .support-warning-card{
  border-color: rgba(251, 146, 60, 0.26);
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.12), rgba(15, 23, 21, 0.94));
}

@media (max-width: 980px) {
  .support-hero-card{
    grid-template-columns: 1fr;
  }

  .support-wallet-card{
    max-width: 640px;
  }
}

@media (max-width: 720px) {

  .support-main{
    padding-block: 28px 70px;
  }

  .support-hero-card,
.support-option-card,
.support-wallet-card,
.support-warning-card{
    padding: 20px;
  }

  .support-wallet-qr{
    min-height: 200px;
  }
}


html{
  --demo-shell: rgba(255, 252, 245, 0.88);
  --demo-shell-strong: rgba(255, 252, 245, 0.96);
  --demo-orb-a: rgba(15, 118, 110, 0.22);
  --demo-orb-b: rgba(249, 115, 22, 0.18);
  --demo-orb-c: rgba(91, 83, 216, 0.14);
  --demo-grid: rgba(20, 33, 29, 0.055);
  --demo-border: rgba(255, 255, 255, 0.66);
  --demo-stage-shadow: 0 44px 120px rgba(20, 33, 29, 0.18);
  --demo-panel-shadow: 0 20px 60px rgba(20, 33, 29, 0.13);
}

html[data-theme="dark"]{
  --demo-shell: rgba(16, 24, 22, 0.86);
  --demo-shell-strong: rgba(16, 24, 22, 0.96);
  --demo-orb-a: rgba(20, 184, 166, 0.19);
  --demo-orb-b: rgba(251, 146, 60, 0.14);
  --demo-orb-c: rgba(129, 140, 248, 0.18);
  --demo-grid: rgba(255, 255, 255, 0.05);
  --demo-border: rgba(255, 255, 255, 0.12);
  --demo-stage-shadow: 0 44px 130px rgba(0, 0, 0, 0.46);
  --demo-panel-shadow: 0 20px 64px rgba(0, 0, 0, 0.38);
}

html body{
  min-height: 100vh;
  background:
    radial-gradient(circle at 13% 14%, var(--demo-orb-a), transparent 28rem),
    radial-gradient(circle at 85% 18%, var(--demo-orb-b), transparent 26rem),
    radial-gradient(circle at 74% 72%, var(--demo-orb-c), transparent 31rem),
    linear-gradient(135deg, rgba(255,255,255,0.09), transparent 35%),
    var(--bg);
  overflow-x: hidden;
}

html body::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: 0.72;
  background-image:
    linear-gradient(var(--demo-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--demo-grid) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at center, #000 12%, transparent 82%);
}

html body::after{
  content: "";
  position: fixed;
  inset: auto -12rem -14rem auto;
  width: min(42vw, 38rem);
  aspect-ratio: 1;
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle, rgba(15, 118, 110, 0.12), transparent 67%);
  filter: blur(2px);
}

html .site-header{
  border-bottom: 1px solid var(--demo-border);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  box-shadow: 0 18px 48px rgba(20, 33, 29, 0.08);
}

html .nav{
  height: 76px;
}

html .brand{
  font-size: 1.15rem;
}

html .brand-mark{
  width: 40px;
  height: 40px;
  border-radius: 14px;
}

html .nav-links a,
html .nav-dropdown-toggle,
html .utility-button{
  backdrop-filter: blur(12px);
}


html .hero{
  padding-top: 18px;
  padding-bottom: 16px;
}


html .tool-first-home{
  min-height: max(760px, calc(100svh - 114px));
  display: grid;
  align-content: center;
  gap: 18px;
  padding-top: 12px;
  padding-bottom: 36px;
}

html .guided-generator-grid,
html .bulk-tool-grid,
html .studio-grid,
html .checker-tool-grid,
html .extractor-tool-grid,
html .compare-workspace{
  position: relative;
  padding: clamp(14px, 1.8vw, 22px);
  border-radius: clamp(28px, 3vw, 42px);
  border: 1px solid var(--demo-border);
  background:
    radial-gradient(circle at 16% 4%, rgba(15, 118, 110, 0.11), transparent 23rem),
    radial-gradient(circle at 92% 18%, rgba(249, 115, 22, 0.095), transparent 20rem),
    color-mix(in srgb, var(--surface) 64%, transparent);
  box-shadow: var(--demo-stage-shadow);
  backdrop-filter: blur(24px);
  overflow: clip;
  animation: demo-stage-rise .78s cubic-bezier(.22, .88, .26, 1) both;
}

html .guided-generator-grid::before,
html .bulk-tool-grid::before,
html .studio-grid::before,
html .checker-tool-grid::before,
html .extractor-tool-grid::before,
html .compare-workspace::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .52;
  background-image:
    linear-gradient(var(--demo-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--demo-grid) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), transparent 78%);
}

html .guided-generator-grid > *,
html .bulk-tool-grid > *,
html .studio-grid > *,
html .checker-tool-grid > *,
html .extractor-tool-grid > *,
html .compare-workspace > *{
  position: relative;
  z-index: 1;
}

html .panel{
  background: var(--demo-shell-strong);
  border-color: var(--demo-border);
  box-shadow: var(--demo-panel-shadow);
}

html .form-panel,
html .preview-panel,
html .studio-form-panel,
html .studio-preview-panel,
html .bulk-workflow-panel,
html .checker-upload-panel,
html .checker-result-panel,
html .extractor-upload-panel,
html .extractor-results-panel,
html .compare-upload-card,
html .compare-control-panel,
html .compare-results-panel{
  border-radius: 30px;
}

html .guided-form-panel{
  padding: clamp(18px, 2vw, 26px);
}

html .guided-preview-panel{
  position: sticky;
  top: 104px;
  align-self: start;
  min-height: min(760px, calc(100svh - 132px));
}

html .checker-empty-state,
html .compare-empty-state,
html .extractor-empty-state{
  border-radius: 28px;
}

html .guided-progress{
  gap: 10px;
  margin-bottom: 18px;
}

html .guided-progress-step{
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-2) 65%, transparent);
  box-shadow: none;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

html .guided-progress-step:hover:not(.is-active){
  transform: translateY(-1px);
  border-color: rgba(15, 118, 110, 0.28);
}

html .guided-progress-step.is-active{
  transform: translateY(-1px);
  border-color: rgba(15, 118, 110, 0.4);
  background: linear-gradient(135deg, rgba(15, 118, 110, 0.16), rgba(15, 118, 110, 0.06));
  box-shadow: 0 18px 30px rgba(15, 118, 110, 0.12);
}

html .guided-step.is-active:not([hidden]){
  animation: demo-step-enter .38s cubic-bezier(.22, .88, .26, 1) both;
}

html .guided-actions,
html .compare-control-actions,
html .checker-camera-actions{
  gap: 12px;
}

html .primary-button,
html .secondary-button,
html .ghost-button{
  min-height: 48px;
  border-radius: 16px;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

html .primary-button:hover,
html .secondary-button:hover,
html .ghost-button:hover{
  transform: translateY(-1px);
}

html .primary-button:hover{
  box-shadow: 0 18px 32px rgba(15, 118, 110, 0.22);
}

html .field input,
html .field select,
html .field textarea,
html input,
html select,
html textarea{
  border-radius: 16px;
}

html .checker-dropzone,
html .bulk-dropzone,
html .logo-dropzone,
html .compare-dropzone{
  border-radius: 28px;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

html .checker-dropzone:hover,
html .bulk-dropzone:hover,
html .logo-dropzone:hover,
html .compare-dropzone:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 42px rgba(15, 118, 110, 0.15);
}

html .compare-workspace{
  display: grid;
  gap: 18px;
}

html .compare-upload-grid{
  gap: 18px;
}

html .section,
html .ad-placement{
  scroll-margin-top: 118px;
}

html .ui-reveal{
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22, .88, .26, 1);
}

html .ui-reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}

html .ad-placement{
  margin-top: clamp(28px, 5vw, 58px);
  margin-bottom: clamp(28px, 5vw, 58px);
}

html [hidden]{
  display: none !important;
}

@keyframes demo-stage-rise {
  from { opacity: 0; transform: translateY(22px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes demo-step-enter {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: translateX(0); }
}

@media (max-width: 1040px) {

  html .guided-preview-panel{
    position: relative;
    top: auto;
    min-height: auto;
  }

  html .tool-first-home{
    min-height: auto;
    padding-top: 14px;
  }
}

@media (max-width: 760px) {

  html .guided-generator-grid,
html .bulk-tool-grid,
html .studio-grid,
html .checker-tool-grid,
html .extractor-tool-grid,
html .compare-workspace{
    border-radius: 28px;
    padding: 12px;
  }

  html .panel,
html .compare-upload-card,
html .compare-control-panel,
html .compare-results-panel{
    border-radius: 24px;
  }

  html .guided-progress{
    display: grid;
    grid-template-columns: 1fr;
  }

  html .primary-button,
html .secondary-button,
html .ghost-button{
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html *,
html *::before,
html *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}


html{
  --demo-viewport-shell-max: 842px;
  --demo-viewport-shell-min: 548px;
  --demo-toolbar-offset: 164px;
}


html .nav{
  height: 68px;
}


html .tool-first-home{
  min-height: auto;
  align-content: start;
  gap: 10px;
  padding-top: 2px;
  padding-bottom: 18px;
}


html .guided-generator-grid,
html .studio-grid{
  height: clamp(var(--demo-viewport-shell-min), calc(100svh - var(--demo-toolbar-offset)), var(--demo-viewport-shell-max));
  min-height: var(--demo-viewport-shell-min);
  align-items: stretch;
  gap: clamp(12px, 1.35vw, 18px);
  padding: clamp(12px, 1.4vw, 17px);
}

html .bulk-tool-grid,
html .checker-tool-grid,
html .extractor-tool-grid,
html .compare-workspace{
  margin-top: 0 !important;
}


html .guided-form-panel{
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 12px;
  padding: clamp(14px, 1.6vw, 20px);
  overflow: hidden;
}

html .guided-panel-heading{
  margin-bottom: 0;
}

html .guided-panel-heading h2{
  font-size: clamp(1.2rem, 2vw, 1.55rem);
}

html .guided-progress{
  gap: 8px;
  padding: 7px;
  margin-bottom: 0;
  border-radius: 18px;
}

html .guided-progress-step{
  grid-template-columns: 28px minmax(0, 1fr);
  min-height: 48px;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 14px;
}

html .guided-progress-step span{
  width: 28px;
  height: 28px;
  font-size: .86rem;
}

html .guided-progress-step strong{
  font-size: .84rem;
}

html .guided-step-stack{
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
  scrollbar-width: thin;
}

html .guided-step-stack::-webkit-scrollbar,
html .guided-preview-panel::-webkit-scrollbar{
  width: 7px;
}

html .guided-step-stack::-webkit-scrollbar-thumb,
html .guided-preview-panel::-webkit-scrollbar-thumb{
  background: color-mix(in srgb, var(--muted) 34%, transparent);
  border-radius: 999px;
}

html .guided-step{
  min-height: 100%;
  padding: clamp(13px, 1.45vw, 18px);
  border-radius: 22px;
}

html .guided-step-heading{
  gap: 3px;
  margin-bottom: 12px;
}

html .guided-step-heading h3{
  font-size: clamp(1.04rem, 1.7vw, 1.32rem);
}

html .guided-step-heading p:last-child{
  font-size: .9rem;
  line-height: 1.4;
}

html .dynamic-fields,
html .settings-grid,
html .studio-template-grid-fields{
  gap: 10px;
}

html .field span,
html .field-label{
  font-size: .82rem;
}

html .field input,
html .field select,
html .field textarea,
html input,
html select,
html textarea{
  min-height: 42px;
  padding-top: 10px;
  padding-bottom: 10px;
}

html .settings-block{
  margin-top: 10px;
  border-radius: 18px;
}

html .settings-block > summary{
  padding-top: 11px;
  padding-bottom: 11px;
}

html .logo-dropzone{
  min-height: 118px;
  padding: 12px;
}


html .guided-actions{
  position: relative;
  z-index: 2;
  margin-top: 0;
  padding-top: 11px;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, color-mix(in srgb, var(--demo-shell-strong) 0%, transparent), var(--demo-shell-strong) 32%);
}

html .guided-actions .ghost-button,
html .guided-actions .primary-button{
  min-height: 44px;
  min-width: 136px;
}


html .guided-preview-panel{
  position: relative;
  top: auto;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  padding: clamp(14px, 1.6vw, 20px);
}

html .guided-preview-panel .panel-heading{
  margin-bottom: 10px;
}

html .preview-card{
  margin-bottom: 10px;
}

html .qr-preview{
  min-height: clamp(176px, 28vh, 252px);
}

html .preview-card canvas,
html .preview-card svg,
html .qr-preview canvas,
html .qr-preview svg{
  max-width: min(100%, 250px);
  max-height: 250px;
}

html .reliability-meter,
html .studio-reliability{
  padding: 12px;
  border-radius: 18px;
}

html .reliability-head{
  gap: 10px;
}

html .reliability-grid{
  gap: 8px;
}

html .reliability-tips{
  margin-top: 8px;
}

html .message{
  margin-top: 10px;
  margin-bottom: 10px;
}

html .download-grid{
  gap: 9px;
}

html .download-grid .primary-button,
html .download-grid .secondary-button,
html .download-grid .ghost-button{
  min-height: 42px;
}


html .bulk-tool-grid,
html .checker-tool-grid,
html .extractor-tool-grid,
html .compare-workspace{
  padding: clamp(12px, 1.4vw, 17px);
}

@media (max-width: 1120px) {

  html .guided-generator-grid,
html .studio-grid{
    height: auto;
    min-height: 0;
  }

  html .guided-form-panel,
html .guided-preview-panel{
    height: auto;
    overflow: visible;
  }

  html .guided-step-stack{
    overflow: visible;
  }

  html .guided-step{
    min-height: 0;
  }
}

@media (max-width: 760px) {
  html .nav{
    height: 64px;
  }

  html .guided-progress{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  html .guided-progress-step{
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    min-height: 58px;
    padding: 7px 4px;
  }

  html .guided-progress-step strong{
    font-size: .72rem;
  }

  html .guided-actions{
    display: grid;
    grid-template-columns: 1fr;
  }

  html .guided-actions .ghost-button,
html .guided-actions .primary-button{
    width: 100%;
  }
}


html{
  --tool-nav-offset: 84px;
  --tool-stage-gap: clamp(10px, 1.2vw, 16px);
  --tool-shell-radius: clamp(24px, 3vw, 38px);
  --tool-panel-radius: clamp(20px, 2.2vw, 30px);
}


html .tool-first-home,
html .studio-main,
html .bulk-main,
html .checker-main,
html .rebuilder-main,
html .extractor-main,
html .compare-main{
  padding-top: clamp(10px, 1.6vh, 18px);
}

html .tool-first-home{
  min-height: calc(100svh - var(--tool-nav-offset));
  display: grid;
  align-items: center;
  padding-bottom: clamp(18px, 3vh, 32px);
}

html .studio-grid{
  margin-top: clamp(10px, 1.6vh, 18px);
}

html .bulk-tool-grid,
html .checker-tool-grid,
html .extractor-tool-grid,
html .compare-workspace{
  margin-top: clamp(10px, 1.6vh, 18px) !important;
}


html .guided-generator-grid,
html .studio-grid,
html .bulk-tool-grid,
html .checker-tool-grid,
html .extractor-tool-grid,
html .compare-workspace{
  width: min(1320px, calc(100vw - clamp(24px, 4vw, 64px)));
  margin-left: auto;
  margin-right: auto;
  padding: clamp(12px, 1.7vw, 22px);
  gap: var(--tool-stage-gap);
  border-radius: var(--tool-shell-radius);
  border: 1px solid color-mix(in srgb, var(--accent) 15%, var(--line));
  background:
    radial-gradient(circle at 12% 10%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 28%),
    radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--accent-2) 11%, transparent), transparent 24%),
    linear-gradient(145deg, color-mix(in srgb, var(--surface) 94%, transparent), color-mix(in srgb, var(--surface-2) 92%, transparent));
  box-shadow:
    0 28px 80px color-mix(in srgb, #000 25%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 9%, transparent);
}

html[data-theme="light"] .guided-generator-grid,
html[data-theme="light"] .studio-grid,
html[data-theme="light"] .bulk-tool-grid,
html[data-theme="light"] .checker-tool-grid,
html[data-theme="light"] .extractor-tool-grid,
html[data-theme="light"] .compare-workspace{
  box-shadow:
    0 24px 70px rgba(19, 33, 29, .12),
    inset 0 1px 0 rgba(255,255,255,.76);
}

html .guided-generator-grid,
html .studio-grid{
  height: auto !important;
  min-height: min(790px, calc(100svh - 112px));
  align-items: stretch;
}

html .panel,
html .guided-form-panel,
html .guided-preview-panel{
  border-radius: var(--tool-panel-radius);
}


html .guided-form-panel,
html .guided-preview-panel{
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

html .guided-form-panel{
  display: grid;
  grid-template-rows: auto auto auto auto;
  align-content: start;
}

html .guided-step-stack,
html .guided-preview-panel{
  overflow: visible !important;
  max-height: none !important;
  padding-right: 0 !important;
}

html .guided-step{
  min-height: 0 !important;
  padding: clamp(12px, 1.35vw, 18px);
}


html .guided-panel-heading,
html .guided-preview-panel .panel-heading{
  margin-bottom: 8px;
}

html .guided-panel-heading h2,
html .guided-preview-panel .panel-heading h2{
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  line-height: 1.08;
}

html .guided-progress{
  margin: 0 0 8px;
  padding: 6px;
  gap: 7px;
  border-radius: 17px;
}

html .guided-progress-step{
  min-height: 44px;
  padding: 6px 8px;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 7px;
  border-radius: 13px;
}

html .guided-progress-step span{
  width: 26px;
  height: 26px;
  font-size: .82rem;
}

html .guided-progress-step strong{
  font-size: .8rem;
}

html .guided-step-heading{
  gap: 2px;
  margin-bottom: 9px;
}

html .guided-step-heading h3{
  font-size: clamp(1rem, 1.45vw, 1.22rem);
  line-height: 1.12;
}


html .guided-step-heading > p:last-child:not(.section-kicker){
  display: none;
}

html .dynamic-fields,
html .studio-dynamic-fields,
html .settings-grid,
html .studio-template-grid-fields,
html .guided-review-grid{
  gap: 8px;
}

html .settings-grid,
html .studio-template-grid-fields{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

html .settings-grid .wide,
html .studio-template-grid-fields .wide{
  grid-column: 1 / -1;
}

html .field,
html .field.compact{
  gap: 4px;
}

html .field span,
html .field-label,
html .reliability-grid span,
html .guided-review-grid span{
  font-size: .76rem;
  line-height: 1.2;
}

html .field input,
html .field select,
html .field textarea,
html input,
html select,
html textarea{
  min-height: 38px;
  padding: 8px 10px;
  font-size: .9rem;
}

html textarea{
  min-height: 72px;
}


html .settings-block{
  margin-top: 8px;
  border-radius: 17px;
}

html .settings-block > summary{
  padding: 9px 11px;
  font-size: .9rem;
}

html .settings-block[open] > :not(summary),
html .studio-guided-subcard[open] > :not(summary){
  padding-top: 9px;
}

html .logo-dropzone,
html .studio-logo-dropzone{
  min-height: 82px;
  padding: 9px;
  gap: 3px;
}

html .logo-drop-icon{
  width: 28px;
  height: 28px;
  font-size: 1rem;
}

html .logo-dropzone strong,
html .studio-logo-dropzone strong{
  font-size: .84rem;
}

html .logo-dropzone small,
html .studio-logo-dropzone small,
html .logo-dropzone em,
html .studio-logo-dropzone em{
  font-size: .72rem;
}

html .guided-actions{
  margin-top: 8px;
  padding-top: 10px;
  background: transparent !important;
}

html .guided-actions .ghost-button,
html .guided-actions .primary-button{
  min-height: 42px;
  min-width: 124px;
}


html .qr-preview{
  min-height: clamp(168px, 25vh, 238px);
}

html .preview-card canvas,
html .preview-card svg,
html .qr-preview canvas,
html .qr-preview svg{
  max-width: min(100%, 236px);
  max-height: 236px;
}

html .preview-card{
  margin-bottom: 8px;
}

html .reliability-meter,
html .studio-reliability{
  padding: 10px;
  border-radius: 17px;
}

html .reliability-head{
  gap: 8px;
}

html .reliability-score{
  font-size: clamp(1.45rem, 2.2vw, 2rem);
}

html .reliability-grid{
  gap: 6px;
}

html .reliability-grid > div{
  padding: 7px;
}

html .reliability-tips{
  margin-top: 6px;
  gap: 3px;
  font-size: .78rem;
}

html .message{
  margin-top: 8px;
  margin-bottom: 8px;
  padding: 8px 10px;
  font-size: .84rem;
}

html .download-grid{
  gap: 8px;
}

html .download-grid .primary-button,
html .download-grid .secondary-button,
html .download-grid .ghost-button{
  min-height: 40px;
  padding-top: 9px;
  padding-bottom: 9px;
}


html .ad-placement:first-of-type{
  margin-top: clamp(24px, 4vh, 48px);
}


@media (max-width: 1120px){
  html .tool-first-home {
    min-height: 0;
    display: block;
  }

  html .guided-generator-grid,
  html .studio-grid {
    min-height: 0;
  }

  html .settings-grid,
  html .studio-template-grid-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  html{
    --tool-nav-offset: 72px;
  }

  html .tool-first-home,
html .studio-main,
html .bulk-main,
html .checker-main,
html .rebuilder-main,
html .extractor-main,
html .compare-main{
    padding-top: 8px;
  }

  html .guided-generator-grid,
html .studio-grid,
html .bulk-tool-grid,
html .checker-tool-grid,
html .extractor-tool-grid,
html .compare-workspace{
    width: calc(100vw - 18px);
    padding: 10px;
    border-radius: 24px;
  }

  html .guided-progress{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  html .guided-progress-step{
    min-height: 52px;
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    padding: 6px 3px;
  }

  html .guided-progress-step strong{
    font-size: .7rem;
  }

  html .settings-grid,
html .studio-template-grid-fields{
    grid-template-columns: 1fr;
  }

  html .field input,
html .field select,
html .field textarea,
html input,
html select,
html textarea{
    min-height: 42px;
    font-size: .94rem;
  }
}


html{
  --app-shell-width: min(1160px, calc(100vw - clamp(28px, 5vw, 88px)));
  --app-shell-radius: 34px;
  --app-panel-radius: 28px;
  --app-nav-top: 12px;
  --app-nav-height: 64px;
}


html .site-header{
  top: var(--app-nav-top);
  height: var(--app-nav-height);
  margin-bottom: 0;
  border: 0;
  background: transparent;
  backdrop-filter: none;
  z-index: 60;
}
html .nav{
  width: min(1180px, calc(100vw - 28px));
  height: var(--app-nav-height);
  padding: 0 14px 0 16px;
  border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(22px);
  box-shadow:
    0 18px 48px color-mix(in srgb, #000 18%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent);
}
html[data-theme="light"] .nav{
  box-shadow:
    0 18px 42px rgba(20,33,29,.12),
    inset 0 1px 0 rgba(255,255,255,.82);
}
html .brand-mark{ width: 32px; height: 32px; border-radius: 11px; }
html .nav-links{ gap: 4px; font-size: .88rem; }
html .nav-links a,
html .nav-dropdown-toggle{ min-height: 34px; padding: 7px 9px; border-radius: 999px; }
html .utility-button{ min-height: 38px; padding: 8px 10px; border-radius: 999px; }
html main{ padding-top: clamp(14px, 2vh, 22px); }


html .tool-first-home{
  min-height: 0 !important;
  display: block !important;
  padding-top: clamp(12px, 1.6vh, 18px) !important;
  padding-bottom: clamp(18px, 2.4vh, 28px) !important;
}
html .studio-main,
html .bulk-main,
html .checker-main,
html .rebuilder-main,
html .extractor-main,
html .compare-main{
  padding-top: clamp(12px, 1.6vh, 18px) !important;
}
html .guided-generator-grid,
html .studio-grid{
  width: var(--app-shell-width) !important;
  min-height: 0 !important;
  padding: clamp(13px, 1.4vw, 18px) !important;
  gap: clamp(12px, 1.3vw, 17px) !important;
  grid-template-columns: minmax(0, 1.36fr) minmax(300px, .64fr) !important;
  align-items: stretch;
  border-radius: var(--app-shell-radius) !important;
  margin-top: 0 !important;
}
html .bulk-tool-grid,
html .checker-tool-grid,
html .extractor-tool-grid,
html .compare-workspace{
  width: var(--app-shell-width) !important;
  padding: clamp(13px, 1.4vw, 18px) !important;
  border-radius: var(--app-shell-radius) !important;
}


html .guided-form-panel{
  display: grid !important;
  grid-template-columns: 78px minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  column-gap: clamp(11px, 1.2vw, 16px);
  row-gap: 10px;
  align-content: start;
  padding: clamp(12px, 1.25vw, 16px) !important;
  border-radius: var(--app-panel-radius) !important;
}
html .guided-panel-heading{
  grid-column: 1 / -1;
  margin-bottom: 0 !important;
  padding: 0 2px 2px;
}
html .guided-panel-heading h2{
  font-size: clamp(1.08rem, 1.4vw, 1.35rem) !important;
}
html .guided-progress{
  grid-column: 1;
  grid-row: 2 / span 2;
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 8px !important;
  width: 78px;
  margin: 0 !important;
  padding: 9px !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--surface-2) 84%, transparent) !important;
}
html .guided-progress-step{
  display: grid !important;
  grid-template-columns: 1fr !important;
  justify-items: center;
  align-content: center;
  gap: 5px !important;
  width: 100%;
  min-height: 72px !important;
  padding: 7px 4px !important;
  border-radius: 22px !important;
  text-align: center !important;
}
html .guided-progress-step span{
  width: 30px !important;
  height: 30px !important;
  font-size: .8rem !important;
}
html .guided-progress-step strong{
  font-size: .66rem !important;
  line-height: 1.06 !important;
  max-width: 54px;
}
html .guided-step-stack{
  grid-column: 2;
  grid-row: 2;
  align-self: start;
}
html .guided-actions{
  grid-column: 2;
  grid-row: 3;
  margin-top: 0 !important;
  padding-top: 9px !important;
}
html .guided-step{
  padding: clamp(10px, 1.1vw, 14px) !important;
  border-radius: 22px !important;
}
html .guided-step-heading{ margin-bottom: 7px !important; }
html .guided-step-heading h3{
  font-size: clamp(.98rem, 1.25vw, 1.15rem) !important;
}


html .dynamic-fields,
html .studio-dynamic-fields,
html .settings-grid,
html .studio-template-grid-fields,
html .guided-review-grid{
  gap: 7px !important;
}
html .field input,
html .field select,
html .field textarea,
html input,
html select,
html textarea{
  min-height: 36px !important;
  padding: 7px 9px !important;
  font-size: .87rem !important;
}
html textarea{ min-height: 64px !important; }
html .settings-block{
  margin-top: 7px !important;
  border-radius: 18px !important;
}
html .settings-block > summary{
  padding: 8px 10px !important;
  font-size: .86rem !important;
}
html .logo-dropzone,
html .studio-logo-dropzone{
  min-height: 72px !important;
  padding: 8px !important;
}
html .guided-actions .ghost-button,
html .guided-actions .primary-button{
  min-width: 112px !important;
  min-height: 39px !important;
  padding: 9px 13px !important;
}


html .guided-preview-panel{
  padding: clamp(12px, 1.2vw, 16px) !important;
  border-radius: var(--app-panel-radius) !important;
}
html .guided-preview-panel .preview-heading{
  margin-bottom: 7px !important;
}
html .guided-preview-panel .panel-heading h2{
  font-size: clamp(1rem, 1.25vw, 1.22rem) !important;
}
html .qr-preview{ min-height: 176px !important; }
html .preview-card canvas,
html .preview-card svg,
html .qr-preview canvas,
html .qr-preview svg{
  max-width: min(100%, 205px) !important;
  max-height: 205px !important;
}


html .reliability-meter,
html .studio-reliability{
  padding: 9px 10px !important;
  border-radius: 18px !important;
}
html .reliability-head{
  align-items: center;
  gap: 8px !important;
}
html .reliability-score{
  font-size: clamp(1.3rem, 1.7vw, 1.7rem) !important;
}
html .reliability-verdict p{
  font-size: .75rem !important;
  line-height: 1.25;
  margin-top: 3px;
}
html .reliability-details{
  margin-top: 7px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--line) 86%, transparent);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
}
html .reliability-details summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 34px;
  padding: 7px 9px;
  cursor: pointer;
  list-style: none;
  color: var(--muted);
  font-size: .76rem;
  font-weight: 800;
}
html .reliability-details summary::-webkit-details-marker{ display:none; }
html .reliability-details summary em{ font-style: normal; color: var(--primary); }
html .reliability-details[open] .reliability-grid,
html .reliability-details[open] .reliability-tips{
  animation: demo4PanelIn .2s ease both;
}
html .reliability-details .reliability-grid{ padding: 0 9px 7px; }
html .reliability-details .reliability-tips{ padding: 0 9px 9px 24px; margin-top: 0; }

html .reliability-grid > div{ padding: 6px !important; }
html .reliability-tips{ font-size: .74rem !important; }


html .download-compact{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
html .download-menu{
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  z-index: 30;
  width: min(260px, 74vw);
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 18px 42px color-mix(in srgb, #000 20%, transparent);
  display: grid;
  gap: 4px;
}
html .download-menu[hidden]{ display: none !important; }
html .download-menu button{
  width: 100%;
  min-height: 35px;
  padding: 7px 9px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--text);
  text-align: left;
  font-size: .84rem;
  font-weight: 760;
}
html .download-menu button:hover,
html .download-menu button:focus-visible{
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  outline: none;
}
html .legacy-download-actions{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
html .message{
  margin-top: 7px !important;
  margin-bottom: 7px !important;
  padding: 7px 9px !important;
  font-size: .78rem !important;
}

@keyframes demo4PanelIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}


@media (max-width: 1060px){
  html .guided-generator-grid,
  html .studio-grid {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 760px) {
  html{
    --app-shell-width: calc(100vw - 18px);
    --app-nav-height: 60px;
    --app-nav-top: 9px;
  }
  html .nav{
    width: calc(100vw - 18px);
    height: var(--app-nav-height);
    padding: 0 10px 0 12px;
  }
  html .guided-form-panel{
    display: grid !important;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    gap: 9px;
  }
  html .guided-panel-heading,
html .guided-progress,
html .guided-step-stack,
html .guided-actions{
    grid-column: 1;
    grid-row: auto;
  }
  html .guided-progress{
    width: auto;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-radius: 20px !important;
  }
  html .guided-progress-step{
    min-height: 58px !important;
  }
  html .guided-progress-step strong{
    max-width: none;
    font-size: .7rem !important;
  }
  html .download-compact{
    align-items: stretch;
    flex-direction: column;
  }
}


html .nav{
  background: color-mix(in srgb, var(--surface) 96%, transparent) !important;
  isolation: isolate;
}
html .nav-platform-links > a[data-nav-icon]::before,
html .nav-dropdown-toggle[data-nav-icon]::before{
  display: none !important;
}
html .nav-dropdown-toggle[data-nav-icon],
html .nav-links > a[data-nav-icon]{
  padding-left: 11px !important;
}
html .nav-links a.is-active::after,
html .nav-links a[aria-current="page"]::after,
html .nav-links a[aria-current="true"]::after{
  display: none !important;
}
html .nav-dropdown-menu{
  background: color-mix(in srgb, var(--surface) 98%, transparent) !important;
  backdrop-filter: blur(20px);
}


html .guided-generator-grid{
  width: min(1088px, calc(100vw - clamp(28px, 5vw, 96px))) !important;
  grid-template-columns: minmax(0, 1.44fr) minmax(274px, .56fr) !important;
  padding: 14px !important;
  gap: 14px !important;
}
html .guided-form-panel,
html .guided-preview-panel{
  padding: 12px !important;
}
html .guided-preview-panel{
  align-self: start;
  overflow: visible !important;
}


html .preview-card{
  min-height: 0 !important;
  padding: 10px !important;
  margin-bottom: 8px !important;
  border-radius: 20px !important;
  overflow: visible !important;
}
html #qrPreview.qr-preview{
  width: min(100%, 204px) !important;
  aspect-ratio: 1 / 1;
  min-height: 0 !important;
  margin: 0 auto;
  display: grid;
  place-items: center;
}
html #qrPreview.qr-preview > div{
  width: 95% !important;
  height: 95% !important;
  max-width: none !important;
  max-height: none !important;
  display: grid !important;
  place-items: center !important;
}
html #qrPreview.qr-preview canvas,
html #qrPreview.qr-preview svg{
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  border-radius: 12px !important;
}
html .empty-preview{
  min-height: 140px !important;
  padding: 12px !important;
}


html .reliability-meter{
  position: relative;
  padding: 8px 9px !important;
  overflow: visible !important;
}
html .reliability-head{
  gap: 7px !important;
}
html .reliability-score{
  font-size: 1.22rem !important;
}
html .reliability-score small{
  font-size: .62rem !important;
}
html .reliability-verdict p{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: .71rem !important;
}
html .reliability-bar{
  height: 8px !important;
  margin-top: 6px !important;
}
html .reliability-details{
  margin-top: 6px !important;
  position: relative;
  z-index: 35;
}
html .reliability-details[open]{
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 55;
  box-shadow: 0 22px 60px color-mix(in srgb, #000 24%, transparent);
  background: color-mix(in srgb, var(--surface) 98%, transparent) !important;
}
html .reliability-details summary{
  min-height: 30px !important;
  padding: 6px 8px !important;
}
html .reliability-details[open] summary{
  border-bottom: 1px solid var(--line);
}


html .guided-downloads{
  overflow: visible !important;
}
html .download-compact{
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 8px !important;
  width: 100%;
}
html .download-menu{
  top: auto !important;
  bottom: calc(100% + 10px) !important;
  left: 0 !important;
  right: auto !important;
  z-index: 90 !important;
  width: min(280px, 100%) !important;
  padding: 8px !important;
  border-radius: 18px !important;
  background: color-mix(in srgb, var(--surface) 99%, transparent) !important;
}
html .download-menu button{
  min-height: 38px !important;
  border-radius: 12px !important;
}


html .single-design-step .settings-block[open]{
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 16%, transparent);
}
html .single-design-step .settings-grid{
  gap: 6px !important;
}

@media (max-width: 1060px) {
  html .guided-generator-grid{
    width: calc(100vw - 22px) !important;
    grid-template-columns: 1fr !important;
  }
  html #qrPreview.qr-preview{
    width: min(100%, 220px) !important;
  }
}


html .site-header{
  position: fixed !important;
  top: var(--app-nav-top) !important;
  left: 0 !important;
  right: 0 !important;
  height: var(--app-nav-height) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
html .site-header::before,
html .site-header::after{
  display: none !important;
}
html main{
  padding-top: calc(var(--app-nav-top) + var(--app-nav-height)) !important;
}
html .tool-first-home{
  min-height: calc(100svh - var(--app-nav-top) - var(--app-nav-height)) !important;
  display: grid !important;
  align-items: center !important;
  justify-items: center !important;
  padding: 0 !important;
  margin: 0 auto !important;
}
html .guided-generator-grid{
  margin: 0 auto !important;
}


html .nav-links > a[data-nav-icon],
html .nav-dropdown-toggle[data-nav-icon],
html .nav-dropdown-menu a[data-nav-icon]{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
}
html .nav-dropdown-menu a[data-nav-icon]{
  width: 100% !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
}
html .nav-platform-links > a[data-nav-icon]::before,
html .nav-dropdown-toggle[data-nav-icon]::before,
html .nav-dropdown-menu a[data-nav-icon]::before{
  display: inline-block !important;
  position: static !important;
  left: auto !important;
  top: auto !important;
  flex: 0 0 17px !important;
  width: 17px !important;
  height: 17px !important;
  transform: none !important;
  opacity: .94 !important;
}
html .nav-dropdown-toggle .nav-chevron{
  margin-left: 1px !important;
}


html .validation-field{
  position: relative;
}
html .validation-input-shell{
  position: relative;
  display: block;
  width: 100%;
}
html .validation-input-shell input{
  width: 100%;
  padding-right: 46px !important;
}
html .field-help-button{
  position: absolute;
  top: 50%;
  right: 8px;
  z-index: 3;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--line) 86%, transparent);
  border-radius: 999px;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  font-size: .83rem;
  font-weight: 900;
  line-height: 1;
  transform: translateY(-50%);
  cursor: pointer;
  box-shadow: 0 8px 20px color-mix(in srgb, #000 12%, transparent);
}
html .field-help-button:hover,
html .field-help-button:focus-visible,
html .validation-input-shell.is-tooltip-open .field-help-button{
  color: var(--primary-dark);
  border-color: color-mix(in srgb, var(--primary) 48%, var(--line));
  outline: none;
}
html .field-help-button.is-error{
  color: #b42318;
  border-color: color-mix(in srgb, #f04438 58%, var(--line));
  background: color-mix(in srgb, #fef3f2 80%, var(--surface));
}
html .field-help-button.is-valid{
  color: #067647;
  border-color: color-mix(in srgb, #12b76a 42%, var(--line));
}
html .field-tooltip{
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 92;
  width: min(330px, calc(100vw - 48px));
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
  border-radius: 14px;
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 99%, transparent);
  box-shadow: 0 20px 48px color-mix(in srgb, #000 22%, transparent);
  font-size: .78rem;
  font-weight: 720;
  line-height: 1.35;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  pointer-events: none;
}
html .validation-input-shell:hover .field-tooltip,
html .validation-input-shell:focus-within .field-tooltip,
html .validation-input-shell.is-tooltip-open .field-tooltip{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
html .validation-field.has-error input{
  border-color: color-mix(in srgb, #f04438 64%, var(--line)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, #f04438 16%, transparent) !important;
}
html .validation-field.is-valid input{
  border-color: color-mix(in srgb, #12b76a 42%, var(--line)) !important;
}
html[data-theme="dark"] .field-help-button.is-error{
  background: color-mix(in srgb, #7a271a 30%, var(--surface));
  color: #f97066;
}

@media (max-width: 760px) {
  html .site-header{
    top: var(--app-nav-top) !important;
  }
  html .tool-first-home{
    min-height: calc(100svh - var(--app-nav-top) - var(--app-nav-height)) !important;
    padding: 0 0 12px !important;
  }
  html .nav-links > a[data-nav-icon],
html .nav-dropdown-toggle[data-nav-icon]{
    gap: 9px !important;
  }
  html .field-tooltip{
    left: 0;
    right: auto;
    width: min(310px, calc(100vw - 42px));
  }
}


html main{
  padding-top: 0 !important;
}
html .tool-first-home{
  min-height: 100svh !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-rows: minmax(18px, 1fr) auto minmax(18px, 1fr) !important;
  align-items: stretch !important;
  justify-items: center !important;
  width: 100% !important;
  max-width: none !important;
  padding-top: calc(var(--app-nav-top) + var(--app-nav-height)) !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  margin: 0 !important;
}
html .tool-first-home > .guided-generator-grid{
  grid-row: 2 !important;
  align-self: center !important;
  justify-self: center !important;
  margin: 0 auto !important;
}

html .tool-first-home + *{
  margin-top: 0 !important;
}
@media (max-width: 1060px), (max-height: 760px) {
  html main{
    padding-top: calc(var(--app-nav-top) + var(--app-nav-height)) !important;
  }
  html .tool-first-home{
    min-height: auto !important;
    display: block !important;
    width: min(100%, var(--container-width, 1180px)) !important;
    max-width: calc(100vw - 18px) !important;
    padding-top: clamp(12px, 2.2vh, 22px) !important;
    padding-bottom: clamp(18px, 3vh, 32px) !important;
    margin: 0 auto !important;
  }
}


html .single-builder-kicker{
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  margin-bottom: 2px !important;
}
html .single-builder-kicker-icon{
  display: inline-block;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask-image: var(--nav-icon-mask);
  mask-image: var(--nav-icon-mask);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}


html [data-guided-single-step="2"],
html [data-guided-single-step="2"] .settings-block,
html [data-guided-single-step="2"] .settings-grid,
html .guided-step-stack,
html .guided-form-panel{
  overflow: visible !important;
}
html [data-guided-single-step="2"] .settings-block{
  position: relative;
  z-index: 1;
}
html [data-guided-single-step="2"] .settings-block[open]{
  z-index: 2;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 16%, transparent);
}
html [data-guided-single-step="2"] .settings-grid{
  gap: 6px 8px !important;
  padding: 6px 10px 10px !important;
}
html [data-guided-single-step="2"] .field.compact{
  margin-bottom: 2px !important;
}
html [data-guided-single-step="2"] .checkbox-field{
  min-height: 36px !important;
  padding-top: 16px !important;
}
html [data-guided-single-step="2"] .logo-upload-field{
  margin-bottom: 4px !important;
}
html [data-guided-single-step="2"] .logo-dropzone{
  min-height: 64px !important;
  gap: 2px !important;
}


html .download-unified{
  position: relative;
  width: 100%;
}
html .download-unified-button{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-height: 46px !important;
  padding: 10px 16px !important;
  border-radius: 17px !important;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
  box-shadow: 0 16px 28px color-mix(in srgb, var(--primary) 22%, transparent) !important;
  font-weight: 900 !important;
  letter-spacing: -.01em !important;
}
html .download-unified-button:disabled{
  opacity: .56 !important;
  box-shadow: none !important;
}
html .download-chevron{
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: color-mix(in srgb, #fff 18%, transparent);
  font-size: 1rem;
  line-height: 1;
  transition: transform .18s ease;
}
html .download-unified-button[aria-expanded="true"] .download-chevron{
  transform: rotate(180deg);
}
html .download-menu{
  right: 0 !important;
  left: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  z-index: 120 !important;
}


html .preview-card{
  position: relative !important;
}
html .preview-copy-button{
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 6;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
  border-radius: 999px;
  color: var(--primary-dark);
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  box-shadow: 0 12px 24px color-mix(in srgb, #000 14%, transparent);
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
html .preview-copy-button[hidden]{ display: none !important; }
html .preview-copy-button svg{
  width: 18px;
  height: 18px;
  fill: currentColor;
}
html .preview-copy-button:hover,
html .preview-copy-button:focus-visible{
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 48%, var(--line));
  background: color-mix(in srgb, var(--surface) 88%, #fff);
  outline: none;
}


html .guided-progress-four{
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
html .guided-progress-four .guided-progress-step{
  min-width: 0 !important;
}
html .guided-progress-four .guided-progress-step strong{
  font-size: .63rem !important;
  line-height: 1.05 !important;
}
html .preview-heading-clean .section-kicker{
  margin-bottom: 3px !important;
}
html .preview-heading-clean h2{
  font-size: 1rem !important;
}
html .single-logo-step,
html .single-download-step{
  overflow: visible !important;
}
html .single-logo-step .settings-grid{
  gap: 6px 8px !important;
  padding: 7px 10px 10px !important;
}
html .single-logo-step .logo-dropzone{
  min-height: 74px !important;
  gap: 3px !important;
}
html .single-logo-step .logo-dropzone strong{
  font-size: .78rem !important;
}
html .single-logo-step .logo-dropzone small,
html .single-logo-step .logo-dropzone em{
  font-size: .67rem !important;
}
html .reliability-meter{
  gap: 5px !important;
  padding: 10px !important;
}
html .reliability-meter .reliability-head{
  margin-bottom: 0 !important;
}
html .reliability-meter .reliability-bar{
  margin-top: 3px !important;
}
html .reliability-details-download{
  margin-top: 10px !important;
  border-radius: 16px !important;
  border: 1px solid color-mix(in srgb, var(--line) 88%, transparent) !important;
  background: color-mix(in srgb, var(--surface) 95%, transparent) !important;
  box-shadow: 0 12px 24px color-mix(in srgb, #000 8%, transparent) !important;
  overflow: hidden !important;
}
html .reliability-details-download summary{
  padding: 10px 12px !important;
  background: color-mix(in srgb, var(--surface-2) 84%, transparent) !important;
}
html .reliability-details-download .reliability-grid{
  padding: 10px 12px 4px !important;
  gap: 7px !important;
}
html .reliability-details-download .reliability-tips{
  padding: 0 12px 11px 28px !important;
  margin: 0 !important;
}
html .single-download-step .guided-review-grid{
  margin-bottom: 8px !important;
}
html .single-download-step .guided-step-heading p:last-child:not(.section-kicker){
  max-width: 54ch !important;
}
@media (max-width: 980px) {
  html .guided-progress-four{
    grid-template-columns: repeat(4, minmax(64px, 1fr)) !important;
  }
}


html .single-download-step{
  padding: 10px 12px !important;
}
html .single-download-step .guided-step-heading{
  margin-bottom: 5px !important;
}
html .single-download-step .guided-step-heading .section-kicker{
  margin-bottom: 2px !important;
}
html .single-download-step .guided-step-heading h3{
  font-size: 1.06rem !important;
  line-height: 1.08 !important;
}
html .single-download-step .guided-step-heading p:last-child:not(.section-kicker){
  margin-top: 3px !important;
  font-size: .75rem !important;
  line-height: 1.24 !important;
  max-width: none !important;
}
html .single-download-step .guided-review-grid{
  gap: 7px !important;
  margin-bottom: 7px !important;
}
html .single-download-step .guided-review-grid div{
  gap: 3px !important;
  min-height: 0 !important;
  padding: 8px 10px !important;
  border-radius: 15px !important;
}
html .single-download-step .guided-review-grid span{
  font-size: .64rem !important;
  line-height: 1 !important;
}
html .single-download-step .guided-review-grid strong{
  font-size: .83rem !important;
  line-height: 1.16 !important;
}

html .reliability-details-download{
  margin-top: 7px !important;
  padding: 0 !important;
  border-radius: 16px !important;
  border: 1px solid color-mix(in srgb, var(--line) 88%, transparent) !important;
  background: color-mix(in srgb, var(--surface) 96%, transparent) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}
html .reliability-detail-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 28px;
  padding: 7px 10px 6px !important;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface-2) 82%, transparent);
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .05em;
  text-transform: uppercase;
}
html .reliability-details-download .reliability-grid{
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 6px !important;
  padding: 7px 10px 6px !important;
}
html .reliability-details-download .reliability-grid > div{
  gap: 2px !important;
  min-height: 0 !important;
  padding: 6px 7px !important;
  border-radius: 12px !important;
}
html .reliability-details-download .reliability-grid span{
  font-size: .6rem !important;
  line-height: 1 !important;
}
html .reliability-details-download .reliability-grid strong{
  font-size: .74rem !important;
  line-height: 1.1 !important;
}
html .reliability-details-download .reliability-tips{
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 28px;
  margin: 0 !important;
  padding: 5px 10px 8px !important;
  list-style: none !important;
  color: var(--muted);
  font-size: .68rem !important;
  line-height: 1.18 !important;
}
html .reliability-details-download .reliability-tips li{
  margin: 0 !important;
}

html .reliability-meter{
  padding: 9px 10px !important;
}
html .reliability-head{
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 5px !important;
}
html .reliability-title-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
html .reliability-title-row .reliability-kicker{
  margin: 0 !important;
}
html .reliability-title-row .reliability-badge{
  min-height: 27px !important;
  padding: 5px 10px !important;
  font-size: .68rem !important;
  letter-spacing: .04em !important;
}
html .reliability-score-line{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
html .reliability-score-line .reliability-score{
  flex: 0 0 auto;
  font-size: 1.34rem !important;
}
html .reliability-score-line p{
  flex: 1 1 auto;
  margin: 0;
  color: var(--muted);
  font-size: .7rem !important;
  line-height: 1.18 !important;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html .reliability-meter .reliability-bar{
  margin-top: 5px !important;
}

html #messageBox.message{
  min-height: 0 !important;
  margin-top: 6px !important;
  margin-bottom: 6px !important;
  padding: 0 2px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--primary-dark) !important;
  font-size: .72rem !important;
  font-weight: 780 !important;
  line-height: 1.18 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html[data-theme="dark"] #messageBox.message{
  color: color-mix(in srgb, var(--primary) 92%, #fff) !important;
}


html .download-unified-button{
  justify-content: space-between !important;
  min-height: 44px !important;
  padding: 8px 10px 8px 16px !important;
  border-radius: 999px !important;
  border: 1px solid color-mix(in srgb, var(--primary) 50%, var(--line)) !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 95%, #fff), var(--primary-dark)) !important;
  box-shadow: 0 16px 28px color-mix(in srgb, var(--primary) 22%, transparent) !important;
}
html .download-unified-button span:first-child{
  padding-left: 2px;
}
html .download-chevron{
  width: 27px !important;
  height: 27px !important;
  border: 1px solid color-mix(in srgb, #fff 32%, transparent);
  background: color-mix(in srgb, #fff 16%, transparent) !important;
  font-size: 1.02rem !important;
}
html .download-menu{
  bottom: calc(100% + 9px) !important;
  right: 0 !important;
  left: auto !important;
  width: min(100%, 292px) !important;
  padding: 8px !important;
  border-radius: 20px !important;
  border: 1px solid color-mix(in srgb, var(--line) 88%, transparent) !important;
  background: color-mix(in srgb, var(--surface) 98%, transparent) !important;
  backdrop-filter: blur(20px);
  box-shadow: 0 20px 46px color-mix(in srgb, #000 22%, transparent) !important;
}
html .download-menu::after{
  content: "";
  position: absolute;
  right: 22px;
  bottom: -7px;
  width: 13px;
  height: 13px;
  transform: rotate(45deg);
  border-right: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
  background: color-mix(in srgb, var(--surface) 98%, transparent);
}
html .download-menu button{
  position: relative;
  z-index: 1;
  min-height: 36px !important;
  padding: 8px 11px !important;
  border-radius: 13px !important;
  font-size: .82rem !important;
}

@media (max-width: 1120px) {
  html .reliability-details-download .reliability-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}


@media (min-width: 1061px) and (min-height: 760px){
  html .guided-generator-grid {
    height: min(646px, calc(100svh - var(--app-nav-top) - var(--app-nav-height) - 54px)) !important;
    min-height: 616px !important;
    max-height: 646px !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
  }
  html .guided-form-panel,
  html .guided-preview-panel {
    height: 100% !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
  }
  html .guided-form-panel {
    grid-template-rows: auto minmax(0, 1fr) auto !important;
  }
  html .guided-preview-panel {
    display: grid !important;
    grid-template-rows: auto auto auto auto auto !important;
    align-content: start !important;
    gap: 8px !important;
  }
}

html .guided-generator-grid,
html .guided-form-panel,
html .guided-preview-panel,
html .preview-card,
html .reliability-meter,
html .reliability-score-line,
html .guided-downloads{
  min-width: 0 !important;
  box-sizing: border-box !important;
}


html .guided-preview-panel{
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
}
html .reliability-meter{
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}
html .reliability-score-line{
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
}
html .reliability-score-line .reliability-score{
  min-width: 0 !important;
  white-space: nowrap !important;
}
html .reliability-score-line p{
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  text-align: left !important;
  white-space: normal !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  text-overflow: ellipsis !important;
}
html .reliability-title-row{
  min-width: 0 !important;
}
html .reliability-title-row .reliability-kicker{
  min-width: 0 !important;
}
html .reliability-title-row .reliability-badge{
  flex: 0 0 auto !important;
}


html #qrPreview.qr-preview{
  min-width: 0 !important;
}
html #qrPreview.qr-preview .empty-preview{
  width: 95% !important;
  height: 95% !important;
  min-height: 0 !important;
  display: grid !important;
  place-content: center !important;
  gap: 8px !important;
  box-sizing: border-box !important;
}
html #qrPreview.qr-preview .empty-preview strong,
html #qrPreview.qr-preview .empty-preview span{
  max-width: 17ch !important;
  margin-inline: auto !important;
}


html .guided-actions{
  align-self: end !important;
}
html #messageBox.message{
  width: 100% !important;
  box-sizing: border-box !important;
}


@media (min-width: 1061px) and (max-height: 759px){
  html .guided-generator-grid {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
  }
}


html .guided-preview-panel{
  display: grid !important;
  justify-items: center !important;
}
html .guided-preview-panel > *{
  width: min(100%, 352px) !important;
  margin-inline: auto !important;
}
html .guided-preview-panel .panel-heading{
  width: min(100%, 352px) !important;
}
html .guided-preview-panel .preview-card,
html .guided-preview-panel .reliability-meter,
html .guided-preview-panel #messageBox,
html .guided-preview-panel .guided-downloads{
  width: min(100%, 352px) !important;
}
html .guided-preview-panel .preview-card{
  justify-self: center !important;
}
html .guided-preview-panel #qrPreview.qr-preview{
  margin-inline: auto !important;
}
html .guided-preview-panel .reliability-meter,
html .guided-preview-panel #messageBox{
  justify-self: center !important;
}
html .download-unified{
  position: relative !important;
  width: 100% !important;
}
html .download-unified-button{
  width: 100% !important;
  gap: 10px !important;
}
html .download-chevron{
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 1.08rem !important;
  line-height: 1 !important;
  opacity: .94 !important;
}
html .download-menu{
  z-index: 40 !important;
  pointer-events: auto !important;
}
@media (max-width: 1060px) {
  html .guided-preview-panel > *,
html .guided-preview-panel .panel-heading,
html .guided-preview-panel .preview-card,
html .guided-preview-panel .reliability-meter,
html .guided-preview-panel #messageBox,
html .guided-preview-panel .guided-downloads{
    width: 100% !important;
    max-width: 420px !important;
  }
}


html .tool-stage{
  display: grid;
  gap: clamp(1rem, 2vw, 1.55rem);
  padding-top: clamp(0.7rem, 1.8vw, 1.25rem);
  padding-bottom: clamp(1.1rem, 2.1vw, 1.65rem);
}

html .guided-grid{
  width: min(100%, 1220px);
  justify-self: center;
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(340px, 0.94fr);
  gap: clamp(1rem, 2vw, 1.55rem);
  align-items: start;
}

html .bulk-tool-grid.guided-grid{
  grid-template-columns: minmax(0, 1fr);
  width: min(100%, 1100px);
}

html .flow-panel,
html .companion-panel,
html .inline-result-shell{
  min-width: 0;
}

html .flow-panel,
html .companion-panel{
  border-radius: 30px;
}

html .flow-heading{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.95rem;
}

html .flow-heading h2,
html .flow-heading p{
  margin-top: 0;
}

html .flow-heading p:last-child{
  margin-bottom: 0;
}

html .flow-badge{
  flex: 0 0 auto;
  min-width: 3.1rem;
  min-height: 3.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border));
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
  font-weight: 800;
  letter-spacing: 0.04em;
}

html .guided-progress{
  margin-bottom: clamp(0.9rem, 1.8vw, 1.25rem);
}

html .guided-progress.guided-progress{
  grid-template-columns: repeat(var(--step-count, 3), minmax(0, 1fr));
}

html .guided-progress .guided-progress-step{
  min-height: 4.65rem;
}

html .guided-progress .guided-progress-step strong{
  line-height: 1.08;
}

html .guided-progress.is-two{ --step-count: 2; }
html .guided-progress.is-three{ --step-count: 3; }

html .step-stack{
  min-height: clamp(280px, 43vh, 620px);
}

html .step-stack.is-compact{
  min-height: clamp(240px, 34vh, 460px);
}

html .step-stack .guided-step{
  min-height: inherit;
}

html .step-summary{
  display: grid;
  gap: 0.7rem;
  padding: clamp(0.9rem, 1.8vw, 1.2rem);
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  background: color-mix(in srgb, var(--panel-2) 78%, transparent);
  border-radius: 22px;
}

html .step-summary strong{
  color: var(--text);
  font-size: 1.03rem;
}

html .step-summary p{
  margin: 0;
}

html .guided-actions{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem;
  margin-top: clamp(0.95rem, 1.8vw, 1.2rem);
  padding-top: 0.9rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
}

html .guided-actions-main{
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: center;
}


html .companion-panel{
  position: sticky;
  top: clamp(5.9rem, 11vh, 7.3rem);
}

html .companion-panel > .panel-heading:first-child{
  margin-bottom: 1rem;
}

html .inline-result-shell{
  display: grid;
  gap: 1rem;
}

html .inline-result-shell .checker-empty-state,
html .inline-result-shell .checker-result{
  margin-top: 0;
}

html .rebuilder-preview .rebuilder-preview-shell,
html .rebuilder-preview .rebuilder-reliability{
  margin-bottom: 1rem;
}

html .rebuilder-preview .rebuilder-download-grid{
  margin-top: 0.9rem;
}

html .rebuilder-design-step .rebuilder-controls-column{
  width: 100%;
}

html .rebuilder-design-step .settings-block + .settings-block{
  margin-top: 0.85rem;
}

html .extractor-results-panel.companion-panel,
html .checker-result-panel.companion-panel,
html .compare-results-panel.companion-panel{
  min-height: clamp(440px, 62vh, 760px);
}

html .extractor-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 0.85rem;
}

html .compare-upload-stack{
  display: block;
}

html .compare-upload-stack .compare-upload-card{
  width: 100%;
  margin: 0;
  box-shadow: none;
  border-radius: 24px;
}

html .compare-step .compare-upload-card,
html .compare-control-step .compare-control-panel{
  background: color-mix(in srgb, var(--panel-2) 58%, transparent);
}

html .compare-control-step .compare-control-panel{
  margin: 0;
  padding: 1rem;
  border-radius: 24px;
}

html .compare-control-step .compare-control-actions{
  margin-top: 0.85rem;
}

html .compare-results-panel.companion-panel{
  align-self: stretch;
}

html .bulk-tool-grid.guided-grid .bulk-workflow-panel{
  width: 100%;
  border-radius: 30px;
}

html .bulk-tool-grid.guided-grid .bulk-step-card[data-bulk-step]{
  margin-top: 0;
}

html .bulk-tool-grid.guided-grid details.bulk-step-card[data-bulk-step] > summary{
  pointer-events: none;
  list-style: none;
}

html .bulk-tool-grid.guided-grid details.bulk-step-card[data-bulk-step] > summary::-webkit-details-marker{
  display: none;
}

html .bulk-tool-grid.guided-grid .bulk-step-card[hidden]{
  display: none !important;
}

html .bulk-tool-grid.guided-grid .bulk-preview-card{
  min-height: 290px;
}

@media (max-width: 1040px) {
  html .guided-grid{
    grid-template-columns: 1fr;
  }

  html .companion-panel{
    position: static;
    min-height: auto !important;
  }
}

@media (max-width: 760px) {

  html .guided-progress.guided-progress{
    grid-template-columns: 1fr;
  }

  html .guided-progress .guided-progress-step{
    min-height: 3.8rem;
  }

  html .flow-heading{
    flex-direction: column;
  }

  html .guided-actions{
    align-items: stretch;
  }

  html .guided-actions-main,
html .guided-actions-main > *{
    width: 100%;
  }
}


html .tool-stage{
  width: 100% !important;
  max-width: none !important;
  min-height: calc(100svh - var(--app-nav-top, 14px) - var(--app-nav-height, 62px)) !important;
  display: grid !important;
  grid-template-rows: minmax(18px, 1fr) auto minmax(18px, 1fr) !important;
  justify-items: center !important;
  align-items: stretch !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

html .tool-stage > .guided-grid{
  grid-row: 2 !important;
  align-self: center !important;
  justify-self: center !important;
  margin: 0 auto !important;
}


html .bulk-main,
html .studio-main,
html .checker-main,
html .rebuilder-main,
html .extractor-main,
html .compare-main{
  padding-top: 0 !important;
}

html .bulk-tool-grid.guided-grid,
html .studio-grid,
html .checker-tool-grid.guided-grid,
html .extractor-tool-grid.guided-grid,
html .compare-workspace.guided-grid,
html .guided-grid.guided-grid--rebuilder{
  width: min(1088px, calc(100vw - clamp(28px, 5vw, 96px))) !important;
  max-width: 100% !important;
  padding: 14px !important;
  gap: 14px !important;
  grid-template-columns: minmax(0, 1.44fr) minmax(274px, .56fr) !important;
  align-items: stretch !important;
  justify-self: center !important;
  box-sizing: border-box !important;
}

html .bulk-tool-grid.guided-grid,
html .studio-grid{
  margin-top: clamp(12px, 1.6vh, 18px) !important;
  margin-bottom: clamp(18px, 2.4vh, 28px) !important;
}


html .flow-panel,
html .bulk-workflow-panel.batch-flow-panel{
  display: grid !important;
  grid-template-columns: 78px minmax(0, 1fr) !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  column-gap: clamp(11px, 1.2vw, 16px) !important;
  row-gap: 10px !important;
  align-content: start !important;
  padding: 12px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

html .flow-heading,
html .bulk-workflow-panel.batch-flow-panel > .bulk-workflow-heading{
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 2px 2px !important;
}

html .flow-heading h2,
html .bulk-workflow-panel.batch-flow-panel > .bulk-workflow-heading h2{
  font-size: clamp(1.08rem, 1.4vw, 1.35rem) !important;
  line-height: 1.1 !important;
}

html .flow-heading p,
html .bulk-workflow-panel.batch-flow-panel > .bulk-workflow-heading .bulk-workflow-intro{
  max-width: 62ch !important;
  margin-bottom: 0 !important;
  font-size: .84rem !important;
  line-height: 1.35 !important;
}

html .flow-badge{
  min-width: 2.55rem !important;
  min-height: 2.55rem !important;
}


html .guided-progress.guided-progress,
html .bulk-workflow-panel.batch-flow-panel > .guided-progress{
  grid-column: 1 !important;
  grid-row: 2 / span 2 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  width: 78px !important;
  min-width: 78px !important;
  margin: 0 !important;
  padding: 9px !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--surface-2) 84%, transparent) !important;
  box-sizing: border-box !important;
}

html .guided-progress .guided-progress-step{
  display: grid !important;
  grid-template-columns: 1fr !important;
  justify-items: center !important;
  align-content: center !important;
  gap: 5px !important;
  width: 100% !important;
  min-height: 62px !important;
  padding: 7px 4px !important;
  border-radius: 22px !important;
  text-align: center !important;
}

html .guided-progress .guided-progress-step span{
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  display: inline-grid !important;
  place-items: center !important;
}

html .guided-progress .guided-progress-step strong{
  font-size: .62rem !important;
  line-height: 1.06 !important;
  letter-spacing: -.01em !important;
}


html .step-stack,
html .bulk-workflow-panel.batch-flow-panel > .bulk-workflow-content.step-stack{
  grid-column: 2 !important;
  grid-row: 2 !important;
  min-height: 0 !important;
  height: auto !important;
  padding-right: 2px !important;
  overflow: auto !important;
  scrollbar-gutter: stable;
}

html .step-stack.is-compact{
  min-height: 0 !important;
}

html .step-stack .guided-step{
  min-height: 0 !important;
}

html .guided-actions{
  grid-column: 2 !important;
  grid-row: 3 !important;
  min-width: 0 !important;
  margin-top: 0 !important;
  padding-top: 10px !important;
  gap: 10px !important;
  box-sizing: border-box !important;
}


html .guided-actions-main{
  flex: 0 0 auto !important;
  gap: 8px !important;
}

html .guided-actions-main .ghost-button,
html .guided-actions-main .primary-button{
  min-height: 44px !important;
  padding-inline: 14px !important;
}


html .companion-panel,
html .bulk-export-panel{
  position: relative !important;
  top: auto !important;
  align-self: stretch !important;
  display: grid !important;
  grid-auto-rows: max-content !important;
  align-content: start !important;
  gap: 8px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 12px !important;
  box-sizing: border-box !important;
  overflow: auto !important;
}

html .extractor-results-panel.companion-panel,
html .checker-result-panel.companion-panel,
html .compare-results-panel.companion-panel{
  min-height: 0 !important;
}

html .companion-panel > .panel-heading:first-child,
html .bulk-export-panel > .panel-heading:first-child{
  margin-bottom: 0 !important;
}

html .companion-panel .panel-heading h2,
html .bulk-export-panel .panel-heading h2{
  font-size: 1rem !important;
  line-height: 1.15 !important;
}


html .bulk-export-panel .bulk-preview-card{ min-height: 190px !important; padding: 10px !important; margin: 0 !important; }
html .bulk-export-panel .bulk-qr-preview-grid{ min-height: 168px !important; }
html .bulk-export-panel .bulk-preview-mini-copy,
html .bulk-export-panel .bulk-batch-report,
html .bulk-export-panel .bulk-export-settings,
html .bulk-export-panel .bulk-reliability-meter{ margin: 0 !important; }
html .bulk-export-panel .bulk-export-settings,
html .bulk-export-panel .download-grid.bulk-export-actions{ grid-template-columns: 1fr !important; }
html .bulk-export-panel .download-grid.bulk-export-actions button{ width: 100% !important; min-height: 42px !important; }
html .bulk-step-source .bulk-entry-mode-switch{ margin-top: 10px !important; }

html .batch-flow-panel .bulk-manual-table-wrap{
  max-height: min(240px, 30vh) !important;
  overflow: auto !important;
}


html .rebuilder-design-step .settings-block,
html .compare-step .compare-upload-card,
html .compare-control-step .compare-control-panel{
  margin-bottom: 0 !important;
}

@media (min-width: 1061px) and (min-height: 760px) {
  html .bulk-tool-grid.guided-grid,
html .studio-grid,
html .checker-tool-grid.guided-grid,
html .extractor-tool-grid.guided-grid,
html .compare-workspace.guided-grid,
html .guided-grid.guided-grid--rebuilder{
    height: min(646px, calc(100svh - var(--app-nav-top, 14px) - var(--app-nav-height, 62px) - 54px)) !important;
    min-height: 616px !important;
    max-height: 646px !important;
  }

  html .flow-panel,
html .bulk-workflow-panel.batch-flow-panel,
html .companion-panel,
html .bulk-export-panel{
    height: 100% !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 1060px), (max-height: 759px) {
  html .tool-stage{
    min-height: auto !important;
    display: block !important;
    width: min(100%, var(--container-width, 1180px)) !important;
    max-width: calc(100vw - 18px) !important;
    padding-top: clamp(12px, 2.2vh, 22px) !important;
    padding-bottom: clamp(18px, 3vh, 32px) !important;
    margin: 0 auto !important;
  }

  html .bulk-tool-grid.guided-grid,
html .studio-grid,
html .checker-tool-grid.guided-grid,
html .extractor-tool-grid.guided-grid,
html .compare-workspace.guided-grid,
html .guided-grid.guided-grid--rebuilder{
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  html .bulk-tool-grid.guided-grid,
html .studio-grid{
    margin-top: clamp(12px, 2.2vh, 22px) !important;
  }
}

@media (max-width: 1040px) {
  html .bulk-tool-grid.guided-grid,
html .studio-grid,
html .checker-tool-grid.guided-grid,
html .extractor-tool-grid.guided-grid,
html .compare-workspace.guided-grid,
html .guided-grid.guided-grid--rebuilder{
    grid-template-columns: 1fr !important;
  }

  html .companion-panel,
html .bulk-export-panel{
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
}

@media (max-width: 760px) {
  html .flow-panel,
html .bulk-workflow-panel.batch-flow-panel{
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto minmax(0, 1fr) auto !important;
  }

  html .flow-heading,
html .bulk-workflow-panel.batch-flow-panel > .bulk-workflow-heading,
html .guided-progress.guided-progress,
html .bulk-workflow-panel.batch-flow-panel > .guided-progress,
html .step-stack,
html .bulk-workflow-panel.batch-flow-panel > .bulk-workflow-content.step-stack,
html .guided-actions{
    grid-column: 1 !important;
  }

  html .guided-progress.guided-progress,
html .bulk-workflow-panel.batch-flow-panel > .guided-progress{
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    min-width: 0 !important;
    border-radius: 24px !important;
  }

  html .step-stack,
html .bulk-workflow-panel.batch-flow-panel > .bulk-workflow-content.step-stack{
    grid-row: 3 !important;
    overflow: visible !important;
    padding-right: 0 !important;
  }

  html .guided-actions{
    grid-row: 4 !important;
  }
}


html main:not(:has(.tool-first-home)){
  padding-top: calc(var(--app-nav-top, 12px) + var(--app-nav-height, 64px) + clamp(24px, 3.4vh, 42px)) !important;
}


html main:has(.tool-first-home){
  padding-top: 0 !important;
}

html .bulk-tool-grid.guided-grid,
html .studio-grid,
html .checker-tool-grid.guided-grid,
html .extractor-tool-grid.guided-grid,
html .compare-workspace.guided-grid,
html .guided-grid.guided-grid--rebuilder{
  scroll-margin-top: calc(var(--app-nav-top, 12px) + var(--app-nav-height, 64px) + 24px) !important;
}


@media (min-width: 1061px){
  html .guided-generator-grid,
  html .bulk-tool-grid.guided-grid,
  html .studio-grid,
  html .checker-tool-grid.guided-grid,
  html .extractor-tool-grid.guided-grid,
  html .compare-workspace.guided-grid,
  html .guided-grid.guided-grid--rebuilder {
    height: auto !important;
    min-height: 616px !important;
    max-height: none !important;
    align-items: stretch !important;
  }

  html .guided-form-panel,
html .guided-preview-panel,
html .flow-panel,
html .bulk-workflow-panel.batch-flow-panel,
html .companion-panel,
html .bulk-export-panel{
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}


html .guided-step-stack,
html .guided-preview-panel,
html .step-stack,
html .bulk-workflow-panel.batch-flow-panel > .bulk-workflow-content.step-stack,
html .companion-panel,
html .bulk-export-panel,
html .batch-flow-panel .bulk-manual-table-wrap{
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  scrollbar-gutter: auto !important;
}


html .bulk-template-row,
html .bulk-template-summary,
html .bulk-export-settings,
html .bulk-manual-generate-row,
html .guided-actions{
  min-width: 0 !important;
}

html .bulk-template-row{
  grid-template-columns: 1fr !important;
}

html .bulk-template-actions{
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
}

html .bulk-template-summary{
  grid-template-columns: 1fr !important;
}

html .bulk-template-summary > div,
html .bulk-template-columns-inline,
html .bulk-template-columns-inline code{
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

html .bulk-template-actions .primary-button,
html .bulk-template-actions .ghost-button{
  flex: 1 1 180px !important;
  width: auto !important;
}


html .bulk-download-compact,
html .rebuilder-download-compact{
  width: 100% !important;
  display: block !important;
}

html .bulk-download-compact .download-unified,
html .rebuilder-download-compact .download-unified{
  width: 100% !important;
}

html .bulk-download-compact .download-menu,
html .rebuilder-download-compact .download-menu{
  z-index: 72 !important;
}


@media (max-width: 720px) {
  html main:not(:has(.tool-first-home)){
    padding-top: calc(var(--app-nav-top, 9px) + var(--app-nav-height, 60px) + 18px) !important;
  }
}

@media (min-width: 1061px) and (min-height: 760px){
  html .bulk-tool-grid.guided-grid {
    width: min(1088px, calc(100vw - clamp(28px, 5vw, 96px))) !important;
    height: 616px !important;
    min-height: 616px !important;
    max-height: 616px !important;
    grid-template-columns: minmax(0, 1.36fr) minmax(300px, .64fr) !important;
    gap: 14px !important;
    padding: 14px !important;
    margin-top: 0 !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
  }

  html .bulk-workflow-panel.batch-flow-panel,
  html .bulk-export-panel {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    box-sizing: border-box !important;
  }
}

html .bulk-tool-grid.guided-grid{
  align-items: stretch !important;
}

html .bulk-workflow-panel.batch-flow-panel{
  overflow: visible !important;
}

html .bulk-workflow-panel.batch-flow-panel > .bulk-workflow-content.step-stack,
html .bulk-export-panel{
  min-height: 0 !important;
  overflow: visible !important;
}


html .bulk-workflow-panel.batch-flow-panel .bulk-step-card{
  padding: clamp(12px, 1.35vw, 16px) !important;
  border-radius: 20px !important;
}

html .bulk-workflow-panel.batch-flow-panel .bulk-step-head{
  margin-bottom: 10px !important;
  gap: 10px !important;
}

html .bulk-workflow-panel.batch-flow-panel .bulk-step-head h3{
  font-size: clamp(1.02rem, 1.4vw, 1.24rem) !important;
  line-height: 1.08 !important;
}

html .bulk-workflow-panel.batch-flow-panel .bulk-workflow-intro,
html .bulk-workflow-panel.batch-flow-panel .bulk-template-summary p,
html .bulk-workflow-panel.batch-flow-panel .bulk-entry-panel-copy p,
html .bulk-workflow-panel.batch-flow-panel .bulk-muted{
  font-size: .82rem !important;
  line-height: 1.32 !important;
}


html .bulk-template-row{
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 9px !important;
}

html .bulk-template-actions{
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 9px !important;
}

html .bulk-template-actions .primary-button,
html .bulk-template-actions .ghost-button{
  width: 100% !important;
  min-height: 42px !important;
  padding-inline: 12px !important;
}

html .bulk-template-summary{
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 9px !important;
  margin-top: 10px !important;
}

html .bulk-template-summary > div,
html .bulk-template-columns-inline{
  padding: 11px !important;
  border-radius: 16px !important;
}


html .bulk-step-source .bulk-entry-mode-switch{
  margin-top: 9px !important;
  gap: 9px !important;
  padding: 7px !important;
}

html .bulk-step-source .bulk-entry-mode-button{
  min-height: 48px !important;
  padding: 9px 10px !important;
  gap: 8px !important;
}


html .bulk-entry-step{
  gap: 10px !important;
}

html .bulk-entry-mode-panel{
  gap: 9px !important;
  padding: 11px !important;
  border-radius: 18px !important;
}

html .bulk-manual-toolbar,
html .bulk-manual-generate-row{
  gap: 8px !important;
}

html .bulk-manual-toolbar .secondary-button,
html .bulk-manual-toolbar .ghost-button,
html .bulk-manual-generate-row .primary-button{
  min-height: 40px !important;
  padding-inline: 12px !important;
}

html .bulk-manual-table th,
html .bulk-manual-table td{
  padding: .52rem .48rem !important;
}

html .bulk-manual-control{
  min-height: 2.35rem !important;
  padding: .52rem .58rem !important;
  border-radius: .72rem !important;
  font-size: .82rem !important;
}

html .bulk-dropzone{
  padding: 14px !important;
  min-height: 0 !important;
}

html .bulk-dropzone strong{
  font-size: .92rem !important;
}

html .bulk-dropzone small,
html .bulk-csv-file-name{
  font-size: .76rem !important;
}

html #bulkMessage.message{
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  font-size: .78rem !important;
  line-height: 1.25 !important;
}


html .bulk-step-design .bulk-style-column,
html .bulk-step-logo .bulk-style-column{
  padding: 12px !important;
  border-radius: 18px !important;
}

html .bulk-step-design .bulk-style-column h4,
html .bulk-step-logo .bulk-style-column h4{
  margin-bottom: 9px !important;
  font-size: .92rem !important;
}

html .bulk-step-design .settings-grid{
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

html .bulk-step-logo .logo-dropzone.bulk-logo-dropzone{
  min-height: 0 !important;
  padding: 12px !important;
  gap: 5px !important;
}

html .bulk-step-logo .logo-dropzone.bulk-logo-dropzone strong{
  font-size: .9rem !important;
}

html .bulk-step-logo .logo-dropzone.bulk-logo-dropzone small,
html .bulk-step-logo .logo-dropzone.bulk-logo-dropzone em{
  font-size: .74rem !important;
}

html .bulk-step-logo .bulk-logo-controls{
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin-top: 8px !important;
}


html .bulk-step-review .bulk-review-copy,
html .bulk-step-export .bulk-export-copy{
  margin: 0 0 8px !important;
}

html .bulk-step-review .bulk-reliability-meter{
  margin: 0 !important;
  padding: 10px !important;
  border-radius: 18px !important;
}

html .bulk-step-review .reliability-head{
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) !important;
  gap: 10px !important;
  align-items: start !important;
}

html .bulk-step-review .reliability-kicker{
  font-size: .68rem !important;
}

html .bulk-step-review .reliability-score{
  font-size: 1.42rem !important;
}

html .bulk-step-review .reliability-verdict p,
html .bulk-step-review .bulk-reliability-basis,
html .bulk-step-review .reliability-tips{
  font-size: .72rem !important;
  line-height: 1.24 !important;
}

html .bulk-step-review .reliability-grid{
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

html .bulk-step-review .reliability-grid > div{
  padding: 7px !important;
  border-radius: 12px !important;
}

html .bulk-step-review .reliability-grid span{
  font-size: .58rem !important;
  line-height: 1.05 !important;
}

html .bulk-step-review .reliability-grid strong{
  font-size: .74rem !important;
  line-height: 1.08 !important;
}

html .bulk-step-review .reliability-tips{
  margin: 8px 0 0 !important;
  padding-left: 16px !important;
}


html .bulk-step-export .bulk-export-settings{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin: 0 0 10px !important;
}

html .bulk-step-export .bulk-download-compact{
  width: 100% !important;
  margin-top: 2px !important;
}

html .bulk-step-export .bulk-progress{
  margin-top: 9px !important;
}

html .bulk-step-export #bulkProgressText.bulk-muted{
  margin-top: 6px !important;
}


html .bulk-export-panel{
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  align-content: start !important;
  gap: 9px !important;
}

html .bulk-export-panel .bulk-preview-card{
  min-height: 262px !important;
  padding: 11px !important;
  border-radius: 22px !important;
}

html .bulk-export-panel .bulk-qr-preview-grid{
  min-height: 238px !important;
}

html .bulk-export-panel .bulk-batch-report{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

html .bulk-export-panel .bulk-batch-report > div{
  padding: 9px !important;
  border-radius: 16px !important;
}

html .bulk-export-panel .bulk-batch-report span{
  font-size: .62rem !important;
  line-height: 1.05 !important;
}

html .bulk-export-panel .bulk-batch-report strong{
  font-size: 1.04rem !important;
}

html .bulk-export-panel .bulk-preview-mini-copy{
  display: grid !important;
  gap: 4px !important;
  padding: 11px !important;
  border-radius: 18px !important;
}

html .bulk-export-panel .bulk-preview-mini-copy strong{
  font-size: .88rem !important;
}

html .bulk-export-panel .bulk-preview-mini-copy span,
html .bulk-export-panel .bulk-preview-mini-copy p{
  font-size: .75rem !important;
  line-height: 1.24 !important;
}

@media (max-width: 1060px), (max-height: 759px) {
  html .bulk-tool-grid.guided-grid{
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  html .bulk-step-design .settings-grid,
html .bulk-step-review .reliability-grid,
html .bulk-step-export .bulk-export-settings,
html .bulk-export-panel .bulk-batch-report,
html .bulk-template-summary,
html .bulk-template-actions{
    grid-template-columns: 1fr !important;
  }
}


html .bulk-workflow-panel.batch-flow-panel > .bulk-workflow-content.step-stack{
  display: block !important;
  width: 100% !important;
}

html .bulk-workflow-panel.batch-flow-panel .bulk-step-card[data-bulk-step]{
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

html .bulk-step-logo-controls .bulk-logo-tune-copy{
  margin: 0 0 9px !important;
}

html .bulk-logo-tune-card{
  display: grid !important;
  gap: 12px !important;
  padding: 13px !important;
  border: 1px solid var(--line) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.24) !important;
}

html .bulk-step-logo-controls .bulk-logo-controls{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  padding: 0 !important;
}


@media (max-width: 1060px), (max-height: 759px) {
  html .bulk-step-logo-controls .bulk-logo-controls{
    grid-template-columns: 1fr !important;
  }
}


html .guided-progress.is-ten{
  --step-count: 10;
  gap: 4px !important;
  padding: 7px !important;
}

html .guided-progress.is-ten .guided-progress-step{
  min-height: 33px !important;
  padding: 3px 3px !important;
  gap: 1px !important;
  border-radius: 15px !important;
}

html .guided-progress.is-ten .guided-progress-step span{
  width: 19px !important;
  height: 19px !important;
  min-width: 19px !important;
  font-size: .6rem !important;
}

html .guided-progress.is-ten .guided-progress-step strong{
  font-size: .48rem !important;
  line-height: .98 !important;
  letter-spacing: .02em !important;
}

html .bulk-step-validate .bulk-validate-copy,
html .bulk-step-tips .bulk-tips-copy{
  margin: 0 0 10px !important;
}

html .bulk-validation-card,
html .bulk-reliability-tips-shell{
  display: grid !important;
  gap: 10px !important;
  padding: 13px !important;
  border: 1px solid var(--line) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, .24) !important;
}

html .bulk-step-validate #bulkMessage.message{
  display: block !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 10px 11px !important;
  border: 1px solid rgba(11, 116, 110, .16) !important;
  border-radius: 14px !important;
  background: rgba(11, 116, 110, .08) !important;
  font-size: .8rem !important;
  line-height: 1.28 !important;
}

html .bulk-step-validate .bulk-manual-generate-row{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
}

html .bulk-step-validate .bulk-manual-generate-row[hidden],
html .bulk-step-validate .bulk-csv-validation[hidden]{
  display: none !important;
}

html .bulk-step-validate .bulk-manual-generate-row .bulk-muted,
html .bulk-step-validate .bulk-csv-validation{
  margin: 0 !important;
  font-size: .78rem !important;
  line-height: 1.28 !important;
}

html .bulk-step-validate .bulk-manual-generate-row .primary-button{
  min-height: 42px !important;
  padding-inline: 13px !important;
  white-space: nowrap !important;
}

html .bulk-step-tips .reliability-tips{
  margin: 0 !important;
  padding-left: 18px !important;
  display: grid !important;
  gap: 8px !important;
  font-size: .82rem !important;
  line-height: 1.34 !important;
}

html .bulk-step-review .reliability-tips{
  display: none !important;
}

html .bulk-step-review .bulk-reliability-meter{
  display: grid !important;
  gap: 8px !important;
}

html .bulk-step-review .reliability-grid{
  margin-top: 0 !important;
}

html .bulk-entry-step .bulk-manual-table-wrap{
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
}

html .bulk-entry-step .bulk-manual-table{
  width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed !important;
}

html .bulk-entry-step .bulk-manual-table th,
html .bulk-entry-step .bulk-manual-table td{
  min-width: 0 !important;
  width: auto !important;
  overflow-wrap: anywhere !important;
}

html .bulk-entry-step .bulk-manual-control{
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

html .bulk-entry-step .bulk-manual-actions-cell,
html .bulk-entry-step .bulk-manual-table th:last-child{
  width: 54px !important;
}

html .bulk-entry-step .bulk-manual-toolbar{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

html .bulk-entry-step .bulk-manual-toolbar button{
  width: 100% !important;
  min-height: 38px !important;
  padding-inline: 8px !important;
  font-size: .78rem !important;
}

html .bulk-entry-step .bulk-entry-panel-copy p{
  margin-bottom: 0 !important;
}

@media (max-width: 1060px), (max-height: 759px) {
  html .bulk-step-validate .bulk-manual-generate-row,
html .bulk-entry-step .bulk-manual-toolbar{
    grid-template-columns: 1fr !important;
  }
}


html .bulk-entry-step .bulk-manual-table{
  min-width: 0 !important;
}

html .bulk-entry-step .bulk-manual-table td.is-wide .bulk-manual-control{
  min-width: 0 !important;
}

html .bulk-entry-step.bulk-step-card{
  padding: 11px !important;
}

html .bulk-entry-step .bulk-step-head{
  margin-bottom: 7px !important;
}

html .bulk-entry-step .bulk-entry-mode-panel{
  gap: 7px !important;
  padding: 9px !important;
}

html .bulk-entry-step .bulk-entry-panel-copy{
  gap: 2px !important;
}

html .bulk-entry-step .bulk-entry-panel-copy strong{
  font-size: .94rem !important;
}

html .bulk-entry-step .bulk-entry-panel-copy p{
  font-size: .76rem !important;
  line-height: 1.22 !important;
}

html .bulk-entry-step .bulk-manual-table th,
html .bulk-entry-step .bulk-manual-table td{
  padding: .38rem .4rem !important;
}

html .bulk-entry-step .bulk-manual-table th{
  font-size: .66rem !important;
}

html .bulk-entry-step .bulk-manual-control{
  min-height: 2rem !important;
  padding: .4rem .48rem !important;
  font-size: .76rem !important;
  border-radius: .62rem !important;
}

html .bulk-entry-step .bulk-manual-actions-cell,
html .bulk-entry-step .bulk-manual-table th:last-child{
  width: 46px !important;
}


html .bulk-builder-kicker{
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  margin-bottom: 2px !important;
}

html .bulk-builder-kicker-icon{
  display: inline-block !important;
  flex: 0 0 16px !important;
  width: 16px !important;
  height: 16px !important;
  background-color: currentColor !important;
  -webkit-mask-image: var(--nav-icon-mask) !important;
  mask-image: var(--nav-icon-mask) !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
}

html .bulk-workflow-panel.batch-flow-panel > .bulk-workflow-heading h2{
  letter-spacing: -.03em !important;
}


html .bulk-workflow-panel.batch-flow-panel > .bulk-workflow-heading .bulk-workflow-intro{
  display: none !important;
}


html .bulk-entry-step .bulk-manual-table-wrap,
html .batch-flow-panel .bulk-manual-table-wrap{
  width: 100% !important;
  max-width: 100% !important;
  max-height: min(230px, 27vh) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-gutter: stable !important;
}

html .bulk-entry-step .bulk-manual-table thead,
html .bulk-entry-step .bulk-manual-table thead tr,
html .bulk-entry-step .bulk-manual-table th{
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
}


html .primary-tool-stage{
  width: 100% !important;
  max-width: none !important;
  min-height: calc(100svh - var(--app-nav-top, 14px) - var(--app-nav-height, 62px)) !important;
  display: grid !important;
  grid-template-rows: auto minmax(12px, 1fr) auto minmax(18px, 1fr) !important;
  justify-items: center !important;
  align-items: stretch !important;
  padding: 0 !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

html .primary-tool-stage > .bulk-tool-grid.guided-grid,
html .primary-tool-stage > .studio-grid{
  grid-row: 3 !important;
  align-self: center !important;
  justify-self: center !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}


html .tool-stage{
  min-height: calc(100svh - var(--app-nav-top, 14px) - var(--app-nav-height, 62px)) !important;
}


html[data-theme="dark"]{
  color-scheme: dark !important;
}

html[data-theme="light"]{
  color-scheme: light !important;
}

@media (max-width: 1060px), (max-height: 759px) {
  html .primary-tool-stage{
    min-height: auto !important;
    display: block !important;
    width: min(100%, var(--container-width, 1180px)) !important;
    max-width: calc(100vw - 18px) !important;
    padding-top: clamp(12px, 2.2vh, 22px) !important;
    padding-bottom: clamp(18px, 3vh, 32px) !important;
  }

  html .primary-tool-stage > .bulk-tool-grid.guided-grid,
html .primary-tool-stage > .studio-grid{
    margin-top: clamp(10px, 1.7vh, 18px) !important;
  }

  html .bulk-entry-step .bulk-manual-table-wrap,
html .batch-flow-panel .bulk-manual-table-wrap{
    max-height: min(260px, 42vh) !important;
    overflow-x: auto !important;
  }
}


@media (min-width: 1061px) and (min-height: 760px){
  html .bulk-entry-step .bulk-manual-table-wrap,
  html .batch-flow-panel .bulk-manual-table-wrap {
    max-height: min(168px, 20vh) !important;
  }

  html .bulk-export-panel .bulk-preview-card {
    min-height: 160px !important;
    padding: 9px !important;
  }

  html .bulk-export-panel .bulk-qr-preview-grid {
    min-height: 140px !important;
  }

  html .bulk-export-panel .bulk-preview-mini-copy {
    padding: 11px !important;
  }
}

@media (min-width: 1061px) and (min-height: 760px) {
  html .bulk-export-panel .bulk-preview-card .bulk-qr-preview-empty{
    min-height: 140px !important;
    padding: 14px !important;
    gap: 7px !important;
  }
}


html .bulk-export-panel .batch-preview-heading{
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 10px !important;
}


html .guided-progress-step,
html .guided-progress .guided-progress-step,
html .guided-progress-four .guided-progress-step{
  grid-template-columns: 1fr !important;
  justify-items: center !important;
  align-content: center !important;
  text-align: center !important;
  gap: 0 !important;
}

html .guided-progress-step strong,
html .guided-progress .guided-progress-step strong,
html .guided-progress-four .guided-progress-step strong{
  display: none !important;
}

html .guided-progress-step span,
html .guided-progress .guided-progress-step span,
html .guided-progress-four .guided-progress-step span{
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--muted) !important;
  font-size: .92rem !important;
  line-height: 1 !important;
  font-weight: 950 !important;
}

html .guided-progress-step.is-active span,
html .guided-progress-step.is-complete span,
html .guided-progress .guided-progress-step.is-active span,
html .guided-progress .guided-progress-step.is-complete span,
html .guided-progress-four .guided-progress-step.is-active span,
html .guided-progress-four .guided-progress-step.is-complete span{
  color: var(--primary) !important;
}

html .guided-progress.is-ten .guided-progress-step span{
  font-size: .82rem !important;
}


html .qr-preview,
html .bulk-qr-thumb,
html .rebuilder-preview-card .qr-preview{
  overflow: visible !important;
}

html .qr-preview > div,
html .bulk-qr-thumb > div,
html .rebuilder-preview-card .qr-preview > div{
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: 100% !important;
  overflow: visible !important;
}

html .qr-preview canvas,
html .qr-preview svg,
html .bulk-qr-thumb canvas,
html .bulk-qr-thumb svg,
html .bulk-qr-thumb > div > canvas,
html .bulk-qr-thumb > div > svg,
html .rebuilder-preview-card .qr-preview canvas,
html .rebuilder-preview-card .qr-preview svg{
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
}

@media (max-width: 820px) {
  html .bulk-export-panel .batch-preview-heading{
    align-items: stretch !important;
    flex-direction: column !important;
  }
}


html .guided-panel-heading,
html .bulk-workflow-heading,
html .studio-heading{
  grid-template-columns: minmax(0, 1fr) !important;
}

html .guided-panel-heading > div,
html .bulk-workflow-heading > div,
html .studio-heading > div{
  min-width: 0 !important;
}


html .bulk-export-panel .batch-preview-heading{
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 10px !important;
}


html .guided-progress{
  width: 64px !important;
  min-width: 64px !important;
  padding: 8px !important;
  gap: 7px !important;
}

html .guided-progress .guided-progress-step,
html .guided-progress-four .guided-progress-step,
html .studio-guided-progress .guided-progress-step{
  width: 100% !important;
  min-height: 42px !important;
  padding: 4px 3px !important;
  border-radius: 17px !important;
}

html .guided-progress-step span,
html .guided-progress .guided-progress-step span,
html .guided-progress-four .guided-progress-step span,
html .studio-guided-progress .guided-progress-step span{
  font-size: .82rem !important;
  line-height: 1 !important;
}

html .guided-progress.is-ten .guided-progress-step span{
  font-size: .76rem !important;
}


html .qr-preview,
html .bulk-qr-thumb,
html .rebuilder-preview-card .qr-preview{
  overflow: visible !important;
  contain: none !important;
}

html .qr-preview > *,
html .qr-preview > * > *,
html .bulk-qr-thumb > *,
html .bulk-qr-thumb > * > *,
html .rebuilder-preview-card .qr-preview > *,
html .rebuilder-preview-card .qr-preview > * > *{
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: 100% !important;
  overflow: visible !important;
}

html .qr-preview canvas,
html .qr-preview svg,
html .bulk-qr-thumb canvas,
html .bulk-qr-thumb svg,
html .bulk-qr-thumb > div > canvas,
html .bulk-qr-thumb > div > svg,
html .rebuilder-preview-card .qr-preview canvas,
html .rebuilder-preview-card .qr-preview svg{
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
}


html .bulk-export-panel{
  overflow: hidden !important;
}

html .bulk-export-panel .bulk-preview-card{
  min-height: 246px !important;
}

html .bulk-export-panel .bulk-qr-preview-grid{
  min-height: 222px !important;
}

html .bulk-export-panel .bulk-preview-mini-copy{
  width: 100% !important;
  max-width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 10px 11px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

html .bulk-export-panel .bulk-preview-mini-copy strong,
html .bulk-export-panel .bulk-preview-mini-copy span,
html .bulk-export-panel .bulk-preview-mini-copy p{
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
}

html .bulk-export-panel .bulk-preview-mini-copy p{
  margin: 4px 0 0 !important;
  line-height: 1.18 !important;
}


html .guided-support-final,
html [data-guided-support-final="true"]{
  border: 1px solid color-mix(in srgb, var(--accent) 72%, var(--line)) !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 96%, #fff), color-mix(in srgb, var(--accent) 72%, var(--primary-dark))) !important;
  color: #fff !important;
  box-shadow: 0 18px 34px color-mix(in srgb, var(--accent) 28%, transparent) !important;
}

html .guided-support-final:hover,
html [data-guided-support-final="true"]:hover{
  transform: translateY(-1px) !important;
  filter: saturate(1.08) !important;
}

@media (max-width: 1060px), (max-height: 759px) {
  html .guided-progress{
    width: auto !important;
    min-width: 0 !important;
    padding: 8px !important;
  }

  html .bulk-export-panel{
    overflow: visible !important;
  }
}


html .qr-preview,
html .bulk-qr-thumb,
html .rebuilder-preview-card .qr-preview,
html .studio-preview-canvas{
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
}

html .qr-preview > div,
html .bulk-qr-thumb > div,
html .rebuilder-preview-card .qr-preview > div,
html .studio-preview-canvas > div{
  width: 100% !important;
  height: 100% !important;
  display: grid !important;
  place-items: center !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

html .qr-preview > svg,
html .qr-preview > canvas,
html .qr-preview > div > svg,
html .qr-preview > div > canvas,
html .bulk-qr-thumb > svg,
html .bulk-qr-thumb > canvas,
html .bulk-qr-thumb > div > svg,
html .bulk-qr-thumb > div > canvas,
html .rebuilder-preview-card .qr-preview > svg,
html .rebuilder-preview-card .qr-preview > canvas,
html .rebuilder-preview-card .qr-preview > div > svg,
html .rebuilder-preview-card .qr-preview > div > canvas,
html .studio-preview-canvas > svg,
html .studio-preview-canvas > canvas,
html .studio-preview-canvas > div > svg,
html .studio-preview-canvas > div > canvas{
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
  object-position: center !important;
  overflow: visible !important;
  transform: none !important;
}


html .bulk-qr-thumb > svg *,
html .bulk-qr-thumb > div > svg *,
html .rebuilder-preview-card .qr-preview > svg *,
html .rebuilder-preview-card .qr-preview > div > svg *,
html .studio-preview-canvas > svg *,
html .studio-preview-canvas > div > svg *{
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: unset !important;
  aspect-ratio: auto !important;
  transform: none !important;
}


html .bulk-qr-preview-card{
  align-content: start !important;
  justify-items: center !important;
  gap: 10px !important;
}

html .bulk-qr-thumb{
  width: min(220px, 100%) !important;
  max-width: 220px !important;
  aspect-ratio: 1 / 1 !important;
  margin-inline: auto !important;
}

html .bulk-qr-preview-file,
html .bulk-qr-preview-label{
  position: relative !important;
  z-index: 1 !important;
}


html{
  --qr-preview-size: 236px;
  --preview-card-height: 318px;
}


html #previewCard.preview-card,
html .bulk-preview-card.preview-card,
html .rebuilder-preview-card.preview-card{
  height: var(--preview-card-height) !important;
  min-height: var(--preview-card-height) !important;
  max-height: var(--preview-card-height) !important;
  padding: 16px !important;
  box-sizing: border-box !important;
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  gap: 10px !important;
  overflow: hidden !important;
}


html .bulk-preview-card .bulk-qr-preview-grid{
  width: 100% !important;
  min-height: 0 !important;
  height: 100% !important;
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
}

html .bulk-preview-card .bulk-qr-preview-card{
  width: 100% !important;
  max-width: 272px !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 8px !important;
  display: grid !important;
  justify-items: center !important;
  align-content: center !important;
  gap: 8px !important;
  overflow: visible !important;
}


html #qrPreview.qr-preview,
html #rebuilderQrPreview.qr-preview,
html .bulk-qr-thumb{
  width: min(var(--qr-preview-size), 100%) !important;
  height: min(var(--qr-preview-size), 100%) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: var(--qr-preview-size) !important;
  max-height: var(--qr-preview-size) !important;
  aspect-ratio: 1 / 1 !important;
  display: grid !important;
  place-items: center !important;
  margin-inline: auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}


html .bulk-qr-thumb{
  padding: 10px !important;
  border-radius: 20px !important;
  background: #fff !important;
}


html #qrPreview.qr-preview > div,
html #rebuilderQrPreview.qr-preview > div,
html .bulk-qr-thumb > div{
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: 100% !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
}


html #qrPreview.qr-preview > svg,
html #qrPreview.qr-preview > canvas,
html #qrPreview.qr-preview > div > svg,
html #qrPreview.qr-preview > div > canvas,
html #rebuilderQrPreview.qr-preview > svg,
html #rebuilderQrPreview.qr-preview > canvas,
html #rebuilderQrPreview.qr-preview > div > svg,
html #rebuilderQrPreview.qr-preview > div > canvas,
html .bulk-qr-thumb > svg,
html .bulk-qr-thumb > canvas,
html .bulk-qr-thumb > div > svg,
html .bulk-qr-thumb > div > canvas{
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  aspect-ratio: 1 / 1 !important;
  transform: none !important;
  overflow: visible !important;
}


html #rebuilderQrPreview.qr-preview svg *,
html .bulk-qr-thumb svg *{
  width: revert !important;
  height: revert !important;
  min-width: revert !important;
  min-height: revert !important;
  max-width: revert !important;
  max-height: revert !important;
  aspect-ratio: auto !important;
  display: revert !important;
  place-items: revert !important;
  transform: revert !important;
}


html #qrPreview.qr-preview .empty-preview,
html #rebuilderQrPreview.qr-preview .empty-preview,
html .bulk-preview-card .bulk-qr-preview-empty{
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  box-sizing: border-box !important;
}


html .bulk-qr-preview-label,
html .bulk-qr-preview-file,
html #previewLabel.preview-label{
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html .bulk-export-panel .bulk-preview-mini-copy{
  min-width: 0 !important;
  max-width: 100% !important;
}


html .studio-preview-canvas{
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
}

html .studio-preview-canvas > svg,
html .studio-preview-canvas > canvas{
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center !important;
  overflow: visible !important;
  transform: none !important;
}

html .studio-preview-canvas > svg *{
  width: revert !important;
  height: revert !important;
  min-width: revert !important;
  min-height: revert !important;
  max-width: revert !important;
  max-height: revert !important;
  aspect-ratio: auto !important;
  display: revert !important;
  place-items: revert !important;
  transform: revert !important;
}


@media (max-width: 760px){
  html {
    --qr-preview-size: 214px;
    --preview-card-height: 292px;
  }
}


html .preview-heading-static,
html .preview-panel .preview-heading,
html .studio-preview-panel .preview-heading,
html .bulk-export-panel .batch-preview-heading,
html .rebuilder-preview-heading{
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

html .preview-static-pill{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  min-height: 42px !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
}

html .rebuilder-preview-heading h3{
  margin: 0 !important;
  font-size: clamp(1rem, 1.1vw, 1.2rem) !important;
  line-height: 1.12 !important;
}

html .rebuilder-preview-heading .section-kicker{
  margin-bottom: 5px !important;
}


html .preview-panel .preview-heading .status-dot,
html .studio-preview-panel .preview-heading .status-dot{
  display: none !important;
}

@media (max-width: 760px) {
  html .preview-static-pill{
    min-height: 38px !important;
    padding: 0 14px !important;
    font-size: .92rem !important;
  }
}


html .support-main{
  gap: 24px;
}

html .support-inline-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

html .support-kofi-widget-card{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 252, 245, 0.92);
  box-shadow: var(--shadow-soft);
  padding: clamp(18px, 2.6vw, 26px);
  display: grid;
  gap: 16px;
}

html .support-widget-heading h2{
  margin: 0;
  letter-spacing: -0.035em;
}

html .support-widget-heading .section-kicker{
  margin-bottom: 5px;
}

html .support-kofi-frame-shell{
  border: 1px solid rgba(15, 118, 110, 0.22);
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(15, 118, 110, 0.15), rgba(249, 115, 22, 0.08));
  padding: 10px;
}

html .support-kofi-frame{
  display: block;
  width: 100%;
  height: 712px;
  border: 0;
  border-radius: 18px;
  background: #f9f9f9;
}

html .support-help-card{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

html .support-wallet-address{
  min-height: 68px;
}

html .support-wallet-qr{
  width: min(100%, 214px);
  min-height: 214px;
}

html .support-wallet-qr > div,
html .support-wallet-qr > div > svg,
html .support-wallet-qr > div > canvas,
html .support-wallet-qr svg,
html .support-wallet-qr canvas{
  max-width: 100% !important;
  max-height: 100% !important;
}

html .nav-support-link,
html .guided-support-final{
  white-space: nowrap;
}

@media (max-width: 640px) {
  html .support-kofi-frame-shell{
    padding: 7px;
    border-radius: 20px;
  }
  html .support-kofi-frame{
    height: 740px;
    border-radius: 16px;
  }
}


html .support-main{
  gap: 24px;
}

html .support-payment-hub{
  display: grid;
  grid-template-columns: minmax(390px, .95fr) minmax(560px, 1.05fr);
  align-items: start;
  gap: 22px;
}

html .support-kofi-widget-card,
html .support-crypto-panel{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 252, 245, 0.92);
  box-shadow: var(--shadow-soft);
  padding: clamp(18px, 2.6vw, 26px);
}

html .support-kofi-widget-card{
  display: grid;
  gap: 16px;
}

html .support-widget-heading,
html .support-crypto-panel-head{
  display: grid;
  gap: 8px;
}

html .support-widget-heading h2,
html .support-crypto-panel-head h2{
  margin: 0;
  letter-spacing: -0.035em;
}

html .support-widget-heading p:last-child,
html .support-crypto-panel-head p:last-child{
  margin: 0;
  color: var(--muted);
}

html .support-inline-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

html .support-kofi-frame-shell{
  border: 1px solid rgba(15, 118, 110, 0.22);
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(15, 118, 110, 0.15), rgba(249, 115, 22, 0.08));
  padding: 10px;
}

html .support-kofi-frame{
  display: block;
  width: 100%;
  height: 712px;
  border: 0;
  border-radius: 18px;
  background: #f9f9f9;
}

html .support-crypto-panel{
  display: grid;
  gap: 16px;
}

html .support-crypto-list{
  display: grid;
  gap: 12px;
}

html .support-wallet-row{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  align-items: center;
  gap: 16px;
  padding: 16px;
  min-width: 0;
  border-radius: 22px;
}

html .support-wallet-row-content{
  min-width: 0;
  display: grid;
  gap: 12px;
}

html .support-wallet-identity{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

html .support-wallet-identity h3{
  margin: 0 0 3px;
  letter-spacing: -0.035em;
}

html .support-wallet-identity p{
  margin: 0;
  color: var(--muted);
  font-size: .94rem;
}

html .support-coin-pill{
  display: inline-flex;
  width: fit-content;
  min-width: 50px;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(15, 118, 110, 0.24);
  background: rgba(15, 118, 110, 0.12);
  color: var(--primary-dark);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .06em;
  white-space: nowrap;
}

html .support-wallet-address-row{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46px;
  align-items: stretch;
  gap: 10px;
  min-width: 0;
}

html .support-wallet-address-row .support-wallet-address{
  margin: 0;
  min-height: 46px;
  display: flex;
  align-items: center;
  padding: 11px 13px;
  font-size: .86rem;
  line-height: 1.4;
}

html .support-copy-icon-button{
  width: 46px;
  min-height: 46px;
  border: 1px solid rgba(15, 118, 110, 0.26);
  border-radius: 15px;
  background: rgba(15, 118, 110, 0.12);
  color: var(--primary-dark);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

html .support-copy-icon-button:hover,
html .support-copy-icon-button:focus-visible{
  transform: translateY(-1px);
  background: rgba(15, 118, 110, 0.2);
  border-color: rgba(15, 118, 110, 0.42);
}

html .support-copy-icon-button svg{
  width: 20px;
  height: 20px;
}

html .support-wallet-row .support-copy-status{
  margin: -4px 0 0;
}

html .support-wallet-qr-compact{
  width: 150px;
  min-width: 150px;
  min-height: 150px;
  margin: 0;
  padding: 10px;
  border-radius: 20px;
}

html .support-wallet-qr-compact svg,
html .support-wallet-qr-compact canvas{
  width: 100% !important;
  height: auto !important;
}

html .support-warning-card{
  margin-top: 2px;
  padding: 18px;
  border-radius: 22px;
}

html .support-help-card{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

@media (max-width: 1180px) {
  html .support-payment-hub{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  html .support-wallet-row{
    grid-template-columns: 1fr;
  }

  html .support-wallet-qr-compact{
    justify-self: center;
  }

  html .support-wallet-address-row{
    grid-template-columns: minmax(0, 1fr) 46px;
  }

  html .support-kofi-frame-shell{
    padding: 7px;
    border-radius: 20px;
  }

  html .support-kofi-frame{
    height: 740px;
    border-radius: 16px;
  }
}


html .support-crypto-list{ gap: 14px !important; }
html .support-wallet-card{ display: grid !important; grid-template-columns: minmax(0, 1fr) 132px !important; align-items: center !important; gap: 16px !important; min-height: 0 !important; padding: 16px 18px !important; border-radius: 24px !important; }
html .support-wallet-card p{ margin: 0 !important; line-height: 1.38 !important; font-size: .94rem !important; }
html .support-wallet-address-row{ display: grid !important; grid-template-columns: minmax(0, 1fr) 46px !important; gap: 10px !important; align-items: center !important; min-width: 0 !important; }
html .support-wallet-address{ display: block !important; width: 100% !important; min-height: 46px !important; max-height: 46px !important; padding: 12px 14px !important; border-radius: 16px !important; font-size: .87rem !important; line-height: 1.25 !important; white-space: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important; text-overflow: clip !important; scrollbar-width: thin !important; cursor: text !important; }
html .support-wallet-address::-webkit-scrollbar{ height: 5px; }
html .support-copy-status{ min-height: 0 !important; margin: 0 !important; font-size: .84rem !important; line-height: 1.2 !important; }

html .support-wallet-qr{
  width: 132px !important;
  height: 132px !important;
  min-width: 132px !important;
  min-height: 132px !important;
  max-width: 132px !important;
  max-height: 132px !important;
  margin: 0 !important;
  padding: 11px !important;
  display: grid !important;
  place-items: center !important;
  justify-self: end !important;
  align-self: center !important;
  border-radius: 22px !important;
  overflow: hidden !important;
}


html .support-wallet-qr > div{
  width: 100% !important;
  height: 100% !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}


html .support-wallet-qr > svg,
html .support-wallet-qr > canvas,
html .support-wallet-qr > div > svg,
html .support-wallet-qr > div > canvas{
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: auto !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
}


html .support-wallet-qr svg *{
  display: unset !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  transform: none !important;
}


@media (max-width: 1120px){
  
}

@media (max-width: 720px) {
  html .support-wallet-card{
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  html .support-wallet-qr{
    justify-self: start !important;
  }
}

@media (max-width: 520px) {
  html .support-wallet-card{
    padding: 15px !important;
  }
}


html .support-wallet-qr{
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
}

html .support-wallet-qr-image{
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  margin: 0 auto !important;
}


html .support-payment-hub{
  grid-template-columns: minmax(420px, .98fr) minmax(540px, 1.02fr) !important;
  align-items: stretch !important;
}

html .support-kofi-widget-card,
html .support-crypto-panel{
  height: 100% !important;
  min-height: 0 !important;
}

html .support-kofi-widget-card{
  display: grid !important;
  grid-template-rows: auto auto minmax(712px, 1fr) !important;
  align-content: stretch !important;
}

html .support-kofi-frame-shell{
  min-height: 0 !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

html .support-kofi-frame{
  flex: 1 1 auto !important;
  min-height: 712px !important;
  height: 100% !important;
}

html .support-crypto-panel{
  display: grid !important;
  grid-template-rows: auto 1fr auto !important;
  align-content: stretch !important;
}

html .support-crypto-list{
  align-content: start !important;
  gap: 11px !important;
}

html .support-warning-card{
  align-self: end !important;
}


html .support-wallet-row{
  gap: 14px !important;
  padding: 14px 15px !important;
}

html .support-wallet-row-content{
  gap: 10px !important;
}

html .support-wallet-identity h3{
  font-size: 1.08rem !important;
}

html .support-wallet-identity p{
  line-height: 1.35 !important;
}

html .support-warning-card{
  padding: 16px 18px !important;
}

@media (max-width: 1180px) {
  html .support-payment-hub{
    grid-template-columns: 1fr !important;
  }

  html .support-kofi-widget-card,
html .support-crypto-panel{
    height: auto !important;
  }

  html .support-kofi-widget-card{
    grid-template-rows: auto auto auto !important;
  }

  html .support-kofi-frame-shell,
html .support-kofi-frame{
    height: auto !important;
  }
}


html .single-mobile-accordion-toggle{
  display: none;
}

@media (max-width: 980px) {
  
  html .tool-first-home .guided-generator-grid{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "preview"
      "form" !important;
    align-items: start !important;
    gap: 16px !important;
    padding: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  html .tool-first-home .guided-preview-panel{
    grid-area: preview !important;
    order: 1 !important;
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 16px !important;
    border-radius: 28px !important;
  }

  html .tool-first-home .guided-form-panel{
    grid-area: form !important;
    order: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 16px !important;
    border-radius: 28px !important;
    display: grid !important;
    gap: 14px !important;
  }

  
  html .tool-first-home .guided-panel-heading{
    margin-bottom: 0 !important;
    padding-bottom: 4px !important;
  }

  html .tool-first-home .guided-panel-heading h2{
    font-size: clamp(1.28rem, 5vw, 1.56rem) !important;
    line-height: 1.08 !important;
    margin: 0 !important;
  }

  html .tool-first-home .single-builder-kicker{
    margin-bottom: 6px !important;
  }

  
  html .tool-first-home .guided-progress-four{
    display: none !important;
  }

  html .tool-first-home .guided-step-stack{
    display: grid !important;
    gap: 12px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    max-height: none !important;
  }

  html .tool-first-home .guided-step,
html .tool-first-home .guided-step.is-active:not([hidden]){
    display: grid !important;
    gap: 14px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 14px !important;
    border-radius: 24px !important;
    border: 1px solid var(--line) !important;
    background: color-mix(in srgb, var(--surface) 92%, transparent) !important;
    box-shadow: none !important;
  }

  html .tool-first-home .single-mobile-accordion-toggle{
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    min-height: 58px !important;
    padding: 10px 12px !important;
    margin: 0 !important;
    border: 1px solid var(--line) !important;
    border-radius: 20px !important;
    background: color-mix(in srgb, var(--surface-2) 86%, transparent) !important;
    color: var(--text) !important;
    text-align: left !important;
    cursor: pointer !important;
    box-shadow: none !important;
  }

  html .tool-first-home .guided-step.is-active .single-mobile-accordion-toggle{
    border-color: rgba(45, 212, 191, .42) !important;
    background: linear-gradient(135deg, rgba(45, 212, 191, .12), rgba(15, 118, 110, .08)) !important;
  }

  html .tool-first-home .guided-step.is-mobile-complete .single-mobile-accordion-toggle{
    border-color: rgba(45, 212, 191, .24) !important;
  }

  html .tool-first-home .single-mobile-step-chip{
    display: inline-grid !important;
    place-items: center !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 999px !important;
    background: rgba(45, 212, 191, .12) !important;
    border: 1px solid rgba(45, 212, 191, .28) !important;
    color: var(--primary) !important;
    font-size: .96rem !important;
    line-height: 1 !important;
    font-weight: 950 !important;
  }

  html .tool-first-home .single-mobile-accordion-toggle strong{
    display: block !important;
    min-width: 0 !important;
    font-size: 1.02rem !important;
    line-height: 1.15 !important;
    font-weight: 950 !important;
    letter-spacing: -.02em !important;
  }

  html .tool-first-home .single-mobile-accordion-chevron{
    display: inline-grid !important;
    place-items: center !important;
    width: 28px !important;
    height: 28px !important;
    color: var(--muted) !important;
    font-size: 1.2rem !important;
    line-height: 1 !important;
    transform: rotate(0deg) !important;
    transition: transform .18s ease !important;
  }

  html .tool-first-home .guided-step.is-active .single-mobile-accordion-chevron{
    transform: rotate(180deg) !important;
    color: var(--primary) !important;
  }

  
  html .tool-first-home .guided-step.is-mobile-collapsed > :not(.single-mobile-accordion-toggle){
    display: none !important;
  }

  
  html .tool-first-home .guided-step-heading{
    display: grid !important;
    gap: 7px !important;
    margin: 0 !important;
  }

  html .tool-first-home .guided-step-heading .section-kicker{
    margin: 0 !important;
    font-size: .8rem !important;
  }

  html .tool-first-home .guided-step-heading h3{
    font-size: clamp(1.12rem, 4.5vw, 1.34rem) !important;
    line-height: 1.16 !important;
    margin: 0 !important;
  }

  html .tool-first-home .guided-step-heading p:not(.section-kicker){
    margin: 0 !important;
    font-size: .96rem !important;
    line-height: 1.45 !important;
  }

  html .tool-first-home .field,
html .tool-first-home .dynamic-fields,
html .tool-first-home .settings-block,
html .tool-first-home .guided-review-grid,
html .tool-first-home .reliability-details{
    min-width: 0 !important;
  }

  html .tool-first-home .settings-grid,
html .tool-first-home .guided-review-grid,
html .tool-first-home .reliability-grid{
    grid-template-columns: 1fr !important;
  }

  

  
  html .tool-first-home .guided-preview-panel .preview-heading{
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
  }

  html .tool-first-home .guided-preview-panel .preview-heading h2{
    font-size: 1.18rem !important;
    line-height: 1.08 !important;
    margin: 0 !important;
  }

  html .tool-first-home .preview-static-pill{
    min-height: 40px !important;
    padding-inline: 14px !important;
    white-space: nowrap !important;
  }

  html .tool-first-home .preview-card{
    display: grid !important;
    place-items: center !important;
    min-height: 284px !important;
    padding: 16px !important;
    margin-bottom: 12px !important;
    border-radius: 24px !important;
  }

  html .tool-first-home #qrPreview.qr-preview{
    width: min(100%, 252px) !important;
    aspect-ratio: 1 / 1 !important;
    min-height: 0 !important;
  }

  html .tool-first-home .empty-preview{
    width: 100% !important;
    min-height: 220px !important;
    padding: 18px !important;
    border-radius: 22px !important;
    display: grid !important;
    align-content: center !important;
    gap: 10px !important;
  }

  html .tool-first-home .empty-preview strong{
    font-size: 1.06rem !important;
    line-height: 1.25 !important;
  }

  html .tool-first-home .empty-preview span{
    font-size: .98rem !important;
    line-height: 1.45 !important;
  }

  html .tool-first-home .reliability-meter,
html .tool-first-home #messageBox{
    margin-top: 0 !important;
    margin-bottom: 10px !important;
    border-radius: 20px !important;
  }

  html .tool-first-home .guided-downloads{
    margin-top: 0 !important;
  }

  
  html .tool-first-home .guided-actions{
    position: sticky !important;
    bottom: max(12px, calc(env(safe-area-inset-bottom) + 12px)) !important;
    z-index: 42 !important;
    display: grid !important;
    grid-template-columns: minmax(96px, .72fr) minmax(0, 1.28fr) !important;
    gap: 10px !important;
    align-items: center !important;
    padding: 10px !important;
    margin-top: 2px !important;
    border: 1px solid var(--line) !important;
    border-radius: 24px !important;
    background: color-mix(in srgb, var(--surface) 90%, transparent) !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .18) !important;
    backdrop-filter: blur(18px) !important;
  }

  html .tool-first-home .guided-actions .ghost-button,
html .tool-first-home .guided-actions .primary-button{
    width: 100% !important;
    min-height: 54px !important;
    border-radius: 19px !important;
    margin: 0 !important;
  }
}

@media (max-width: 620px) {
  html .tool-first-home .guided-preview-panel,
html .tool-first-home .guided-form-panel{
    padding: 14px !important;
    border-radius: 26px !important;
  }

  html .tool-first-home .guided-step,
html .tool-first-home .guided-step.is-active:not([hidden]){
    padding: 12px !important;
    border-radius: 22px !important;
  }

  html .tool-first-home .single-mobile-accordion-toggle{
    min-height: 54px !important;
    padding: 9px 10px !important;
  }

  html .tool-first-home .single-mobile-step-chip{
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
  }

  html .tool-first-home .preview-card{
    min-height: 260px !important;
    padding: 14px !important;
  }

  html .tool-first-home #qrPreview.qr-preview{
    width: min(100%, 232px) !important;
  }

  html .tool-first-home .empty-preview{
    min-height: 196px !important;
  }

  html .tool-first-home .guided-actions{
    grid-template-columns: 1fr !important;
  }
}


@media (max-width: 980px){
  
  html .site-header {
    top: 10px !important;
    height: 70px !important;
  }

  html .site-header .nav {
    width: min(calc(100% - 24px), 680px) !important;
    min-height: 70px !important;
    height: 70px !important;
    padding: 8px 12px !important;
    gap: 12px !important;
    border-radius: 28px !important;
    align-items: center !important;
    overflow: visible !important;
  }

  html .brand {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
    font-size: clamp(1.28rem, 4.6vw, 1.56rem) !important;
    line-height: 1 !important;
    letter-spacing: -0.045em !important;
  }

  html .brand-mark {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    flex-basis: 44px !important;
    border-radius: 15px !important;
  }

  html .brand span:last-child {
    display: block !important;
    min-width: 0 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }

  html .nav-menu-toggle {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    border-radius: 21px !important;
    gap: 5px !important;
    box-shadow: none !important;
  }

  html .nav-menu-toggle span {
    width: 24px !important;
    height: 2.5px !important;
  }

  html .nav-right {
    top: calc(100% + 10px) !important;
    border-radius: 24px !important;
  }

  
  html main:has(.tool-first-home) {
    padding-top: 0 !important;
  }

  html .tool-first-home {
    width: min(calc(100% - 24px), 680px) !important;
    max-width: 680px !important;
    min-height: 0 !important;
    height: auto !important;
    display: grid !important;
    grid-template-rows: auto auto !important;
    align-items: start !important;
    justify-items: stretch !important;
    gap: 16px !important;
    padding: 96px 0 28px !important;
    margin: 0 auto !important;
  }

  html .tool-first-home > .guided-generator-grid{
    grid-row: auto !important;
    align-self: auto !important;
    justify-self: stretch !important;
    margin: 0 !important;
  }

  
  

  

  

  

  

  

  
  html .tool-first-home .guided-generator-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "preview"
      "form" !important;
    gap: 14px !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 14px !important;
    border-radius: 32px !important;
    border: 1px solid var(--demo-border) !important;
    background:
      radial-gradient(circle at 14% 7%, rgba(45, 212, 191, .11), transparent 16rem),
      radial-gradient(circle at 90% 18%, rgba(249, 115, 22, .06), transparent 14rem),
      color-mix(in srgb, var(--surface) 76%, transparent) !important;
    box-shadow: var(--demo-stage-shadow) !important;
    overflow: visible !important;
  }

  html .tool-first-home .guided-generator-grid::before {
    opacity: .22 !important;
  }

  html .tool-first-home .guided-preview-panel,
  html .tool-first-home .guided-form-panel {
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  html .tool-first-home .guided-preview-panel {
    grid-area: preview !important;
    order: 1 !important;
    display: grid !important;
    gap: 10px !important;
  }

  html .tool-first-home .guided-form-panel {
    grid-area: form !important;
    order: 2 !important;
    display: grid !important;
    gap: 12px !important;
  }

  
  html .tool-first-home .guided-preview-panel .preview-heading {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 2px 2px 0 !important;
  }

  html .tool-first-home .guided-preview-panel .preview-heading .section-kicker {
    margin: 0 0 3px !important;
    font-size: .78rem !important;
  }

  html .tool-first-home .guided-preview-panel .preview-heading h2 {
    margin: 0 !important;
    font-size: 1.08rem !important;
    line-height: 1.1 !important;
  }

  html .tool-first-home .preview-static-pill {
    min-height: 38px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    font-size: .9rem !important;
  }

  html .tool-first-home #previewCard.preview-card {
    width: 100% !important;
    height: auto !important;
    min-height: 220px !important;
    max-height: none !important;
    padding: 12px !important;
    margin: 0 !important;
    border-radius: 26px !important;
    display: grid !important;
    place-items: center !important;
    gap: 8px !important;
  }

  html .tool-first-home #qrPreview.qr-preview {
    width: min(100%, 212px) !important;
    aspect-ratio: 1 / 1 !important;
    min-height: 0 !important;
  }

  html .tool-first-home .empty-preview {
    width: 100% !important;
    min-height: 184px !important;
    padding: 18px !important;
    border-radius: 22px !important;
    align-content: center !important;
    gap: 8px !important;
  }

  html .tool-first-home .empty-preview strong {
    font-size: 1rem !important;
    line-height: 1.24 !important;
  }

  html .tool-first-home .empty-preview span {
    font-size: .92rem !important;
    line-height: 1.42 !important;
  }

  html .tool-first-home .reliability-meter {
    margin: 0 !important;
    padding: 12px 14px !important;
    border-radius: 22px !important;
  }

  html .tool-first-home #messageBox {
    margin: 0 !important;
    font-size: .92rem !important;
  }

  
  html .tool-first-home .guided-panel-heading {
    display: none !important;
  }

  
  html .tool-first-home .guided-step-stack {
    display: grid !important;
    gap: 10px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  html .tool-first-home .guided-step,
  html .tool-first-home .guided-step.is-active:not([hidden]) {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    display: grid !important;
    gap: 12px !important;
    padding: 10px !important;
    border-radius: 24px !important;
    border: 1px solid var(--line) !important;
    background: color-mix(in srgb, var(--surface-2) 82%, transparent) !important;
    box-shadow: none !important;
  }

  html[data-theme="dark"] .tool-first-home .guided-step,
  html[data-theme="dark"] .tool-first-home .guided-step.is-active:not([hidden]) {
    background: rgba(21, 33, 29, .92) !important;
  }

  html .tool-first-home .single-mobile-accordion-toggle {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    min-height: 58px !important;
    padding: 10px 12px !important;
    margin: 0 !important;
    border-radius: 20px !important;
    border: 1px solid rgba(126, 231, 201, .18) !important;
    background: rgba(20, 31, 28, .74) !important;
  }

  html .tool-first-home .guided-step.is-active .single-mobile-accordion-toggle {
    border-color: rgba(45, 212, 191, .42) !important;
    background: linear-gradient(135deg, rgba(45, 212, 191, .14), rgba(15, 118, 110, .08)) !important;
  }

  html .tool-first-home .single-mobile-step-chip {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 999px !important;
    font-size: .95rem !important;
  }

  html .tool-first-home .single-mobile-accordion-toggle strong {
    font-size: 1rem !important;
    line-height: 1.15 !important;
  }

  html .tool-first-home .single-mobile-accordion-chevron {
    width: 24px !important;
    height: 24px !important;
    font-size: 1.18rem !important;
  }

  html .tool-first-home .guided-step-heading {
    gap: 6px !important;
  }

  html .tool-first-home .guided-step-heading h3 {
    font-size: 1.08rem !important;
    line-height: 1.18 !important;
  }

  html .tool-first-home .guided-step-heading p:not(.section-kicker) {
    font-size: .92rem !important;
    line-height: 1.42 !important;
  }

  

  
  html .tool-first-home .guided-actions {
    position: static !important;
    bottom: auto !important;
    z-index: auto !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(92px, .74fr) minmax(0, 1.26fr) !important;
    gap: 10px !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 2px 0 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  html .tool-first-home .guided-actions .ghost-button,
  html .tool-first-home .guided-actions .primary-button {
    width: 100% !important;
    min-height: 48px !important;
    height: 48px !important;
    padding: 0 14px !important;
    margin: 0 !important;
    border-radius: 18px !important;
    font-size: .98rem !important;
  }
}

@media (max-width: 560px) {
  html .site-header .nav{
    width: calc(100% - 20px) !important;
    min-height: 66px !important;
    height: 66px !important;
    padding: 7px 10px !important;
  }

  html .site-header{
    height: 66px !important;
  }

  html .brand-mark{
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    flex-basis: 40px !important;
  }

  html .brand{
    gap: 9px !important;
    font-size: 1.28rem !important;
  }

  html .nav-menu-toggle{
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    border-radius: 19px !important;
  }

  html .nav-menu-toggle span{
    width: 22px !important;
  }

  html .tool-first-home{
    width: calc(100% - 20px) !important;
    padding-top: 90px !important;
    gap: 14px !important;
  }

  html .tool-first-home .guided-generator-grid{
    padding: 12px !important;
    border-radius: 28px !important;
  }

  html .tool-first-home #previewCard.preview-card{
    min-height: 204px !important;
    padding: 10px !important;
    border-radius: 24px !important;
  }

  html .tool-first-home #qrPreview.qr-preview{
    width: min(100%, 194px) !important;
  }

  html .tool-first-home .empty-preview{
    min-height: 170px !important;
    padding: 15px !important;
  }

  html .tool-first-home .guided-step,
html .tool-first-home .guided-step.is-active:not([hidden]){
    padding: 9px !important;
    border-radius: 22px !important;
  }

  html .tool-first-home .single-mobile-accordion-toggle{
    min-height: 54px !important;
    padding: 9px 10px !important;
  }

  html .tool-first-home .guided-actions{
    grid-template-columns: minmax(88px, .72fr) minmax(0, 1.28fr) !important;
    gap: 8px !important;
  }

  html .tool-first-home .guided-actions .ghost-button,
html .tool-first-home .guided-actions .primary-button{
    min-height: 46px !important;
    height: 46px !important;
    border-radius: 17px !important;
    font-size: .94rem !important;
  }
}


@media (max-width: 1060px){
  
  html .site-header {
    top: 10px !important;
    height: 70px !important;
  }

  html .site-header .nav {
    width: min(calc(100% - 24px), 860px) !important;
    min-height: 70px !important;
    height: 70px !important;
    padding: 8px 12px !important;
    gap: 12px !important;
    border-radius: 28px !important;
    align-items: center !important;
    overflow: visible !important;
  }

  html .brand {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
    font-size: clamp(1.3rem, 4vw, 1.58rem) !important;
    line-height: 1 !important;
    letter-spacing: -0.045em !important;
  }

  html .brand-mark {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    flex-basis: 44px !important;
    border-radius: 15px !important;
  }

  html .brand span:last-child {
    display: block !important;
    min-width: 0 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }

  html .nav-menu-toggle {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    border-radius: 21px !important;
    gap: 5px !important;
    box-shadow: none !important;
  }

  html .nav-menu-toggle span {
    width: 24px !important;
    height: 2.5px !important;
  }

  html .nav-right {
    top: calc(100% + 10px) !important;
    border-radius: 24px !important;
  }

  
  html main:has(.tool-first-home) {
    padding-top: 0 !important;
  }

  html .tool-first-home {
    width: min(calc(100% - 24px), 860px) !important;
    max-width: 860px !important;
    min-height: 0 !important;
    height: auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "tool"
      "intro" !important;
    align-items: start !important;
    justify-items: stretch !important;
    gap: 28px !important;
    padding: 92px 0 40px !important;
    margin: 0 auto !important;
  }

  
  html .tool-first-home > .guided-generator-grid {
    grid-area: tool !important;
    grid-row: auto !important;
    align-self: start !important;
    justify-self: stretch !important;
    margin: 0 !important;
  }

  

  
  html .tool-first-home .guided-generator-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "preview"
      "steps" !important;
    align-content: start !important;
    gap: 14px !important;
    width: 100% !important;
    min-height: calc(100svh - 108px) !important;
    height: auto !important;
    padding: 14px 14px 108px !important;
    border-radius: 32px !important;
    border: 1px solid var(--demo-border) !important;
    background:
      radial-gradient(circle at 14% 7%, rgba(45, 212, 191, .11), transparent 16rem),
      radial-gradient(circle at 90% 18%, rgba(249, 115, 22, .06), transparent 14rem),
      color-mix(in srgb, var(--surface) 76%, transparent) !important;
    box-shadow: var(--demo-stage-shadow) !important;
    overflow: visible !important;
  }

  html .tool-first-home .guided-generator-grid::before {
    opacity: .22 !important;
  }

  
  html .tool-first-home .guided-preview-panel,
  html .tool-first-home .guided-form-panel {
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  html .tool-first-home .guided-preview-panel {
    grid-area: preview !important;
    order: 1 !important;
    display: grid !important;
    gap: 10px !important;
  }

  html .tool-first-home .guided-form-panel {
    grid-area: steps !important;
    order: 2 !important;
    display: grid !important;
    gap: 10px !important;
  }

  
  html .tool-first-home .guided-panel-heading,
  html .tool-first-home .guided-progress-four {
    display: none !important;
  }

  
  html .tool-first-home .guided-preview-panel .preview-heading {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 2px !important;
  }

  html .tool-first-home .guided-preview-panel .preview-heading .section-kicker {
    margin: 0 0 3px !important;
    font-size: .78rem !important;
  }

  html .tool-first-home .guided-preview-panel .preview-heading h2 {
    margin: 0 !important;
    font-size: 1.08rem !important;
    line-height: 1.1 !important;
  }

  html .tool-first-home .preview-static-pill {
    min-height: 38px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    font-size: .9rem !important;
  }

  html .tool-first-home #previewCard.preview-card {
    width: 100% !important;
    height: auto !important;
    min-height: 216px !important;
    max-height: none !important;
    padding: 12px !important;
    margin: 0 !important;
    border-radius: 26px !important;
    display: grid !important;
    place-items: center !important;
    gap: 8px !important;
  }

  html .tool-first-home #qrPreview.qr-preview {
    width: min(100%, 208px) !important;
    aspect-ratio: 1 / 1 !important;
    min-height: 0 !important;
  }

  html .tool-first-home .empty-preview {
    width: 100% !important;
    min-height: 180px !important;
    padding: 16px !important;
    border-radius: 22px !important;
    align-content: center !important;
    gap: 8px !important;
  }

  html .tool-first-home .empty-preview strong {
    font-size: 1rem !important;
    line-height: 1.24 !important;
  }

  html .tool-first-home .empty-preview span {
    font-size: .92rem !important;
    line-height: 1.42 !important;
  }

  html .tool-first-home .reliability-meter {
    margin: 0 !important;
    padding: 11px 13px !important;
    border-radius: 22px !important;
  }

  html .tool-first-home #messageBox {
    margin: 0 !important;
    font-size: .92rem !important;
  }

  
  html .tool-first-home .guided-step-stack {
    display: grid !important;
    gap: 10px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  html .tool-first-home .guided-step,
  html .tool-first-home .guided-step.is-active:not([hidden]) {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    display: grid !important;
    gap: 12px !important;
    padding: 10px !important;
    border-radius: 24px !important;
    border: 1px solid var(--line) !important;
    background: color-mix(in srgb, var(--surface-2) 82%, transparent) !important;
    box-shadow: none !important;
    scroll-margin-top: 98px !important;
  }

  html[data-theme="dark"] .tool-first-home .guided-step,
  html[data-theme="dark"] .tool-first-home .guided-step.is-active:not([hidden]) {
    background: rgba(21, 33, 29, .92) !important;
  }

  html .tool-first-home .single-mobile-accordion-toggle {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    min-height: 58px !important;
    padding: 10px 12px !important;
    margin: 0 !important;
    border-radius: 20px !important;
    border: 1px solid rgba(126, 231, 201, .18) !important;
    background: rgba(20, 31, 28, .74) !important;
  }

  html .tool-first-home .guided-step.is-active .single-mobile-accordion-toggle {
    border-color: rgba(45, 212, 191, .42) !important;
    background: linear-gradient(135deg, rgba(45, 212, 191, .14), rgba(15, 118, 110, .08)) !important;
  }

  html .tool-first-home .single-mobile-step-chip {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 999px !important;
    font-size: .95rem !important;
  }

  html .tool-first-home .single-mobile-accordion-toggle strong {
    font-size: 1rem !important;
    line-height: 1.15 !important;
  }

  html .tool-first-home .single-mobile-accordion-chevron {
    width: 24px !important;
    height: 24px !important;
    font-size: 1.18rem !important;
  }

  html .tool-first-home .guided-step-heading {
    gap: 6px !important;
  }

  html .tool-first-home .guided-step-heading h3 {
    font-size: 1.08rem !important;
    line-height: 1.18 !important;
  }

  html .tool-first-home .guided-step-heading p:not(.section-kicker) {
    font-size: .92rem !important;
    line-height: 1.42 !important;
  }

  

  
  html .tool-first-home .guided-actions {
    position: fixed !important;
    left: 50% !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    transform: translateX(-50%) !important;
    z-index: 1400 !important;
    width: min(calc(100% - 28px), 660px) !important;
    display: grid !important;
    grid-template-columns: minmax(92px, .74fr) minmax(0, 1.26fr) !important;
    gap: 10px !important;
    align-items: center !important;
    padding: 9px !important;
    margin: 0 !important;
    border: 1px solid var(--line) !important;
    border-radius: 24px !important;
    background: color-mix(in srgb, var(--surface) 90%, transparent) !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .28) !important;
    backdrop-filter: blur(18px) !important;
  }

  html[data-theme="dark"] .tool-first-home .guided-actions {
    background: rgba(18, 28, 25, .95) !important;
  }

  html .tool-first-home .guided-actions .ghost-button,
  html .tool-first-home .guided-actions .primary-button {
    width: 100% !important;
    min-height: 48px !important;
    height: 48px !important;
    padding: 0 14px !important;
    margin: 0 !important;
    border-radius: 18px !important;
    font-size: .98rem !important;
  }

  
  

  

  

  

  

  
}

@media (max-width: 560px) {
  html .site-header{
    height: 66px !important;
  }

  html .site-header .nav{
    width: calc(100% - 20px) !important;
    min-height: 66px !important;
    height: 66px !important;
    padding: 7px 10px !important;
  }

  html .brand-mark{
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    flex-basis: 40px !important;
  }

  html .brand{
    gap: 9px !important;
    font-size: 1.28rem !important;
  }

  html .nav-menu-toggle{
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    border-radius: 19px !important;
  }

  html .nav-menu-toggle span{
    width: 22px !important;
  }

  html .tool-first-home{
    width: calc(100% - 20px) !important;
    padding-top: 86px !important;
    gap: 24px !important;
  }

  html .tool-first-home .guided-generator-grid{
    min-height: calc(100svh - 98px) !important;
    padding: 12px 12px 104px !important;
    border-radius: 28px !important;
  }

  html .tool-first-home #previewCard.preview-card{
    min-height: 198px !important;
    padding: 10px !important;
    border-radius: 24px !important;
  }

  html .tool-first-home #qrPreview.qr-preview{
    width: min(100%, 192px) !important;
  }

  html .tool-first-home .empty-preview{
    min-height: 166px !important;
    padding: 14px !important;
  }

  html .tool-first-home .guided-step,
html .tool-first-home .guided-step.is-active:not([hidden]){
    padding: 9px !important;
    border-radius: 22px !important;
    scroll-margin-top: 92px !important;
  }

  html .tool-first-home .single-mobile-accordion-toggle{
    min-height: 54px !important;
    padding: 9px 10px !important;
  }

  html .tool-first-home .guided-actions{
    width: calc(100% - 22px) !important;
    grid-template-columns: minmax(86px, .72fr) minmax(0, 1.28fr) !important;
    gap: 8px !important;
    padding: 8px !important;
    border-radius: 22px !important;
  }

  html .tool-first-home .guided-actions .ghost-button,
html .tool-first-home .guided-actions .primary-button{
    min-height: 46px !important;
    height: 46px !important;
    border-radius: 17px !important;
    font-size: .94rem !important;
  }
}


@media (max-width: 1060px){
  
  

  html .tool-first-home {
    grid-template-areas: "tool" !important;
    grid-template-rows: auto !important;
    gap: 0 !important;
    padding-bottom: 28px !important;
  }

  
  html .tool-first-home > .guided-generator-grid,
  html .tool-first-home .guided-preview-panel,
  html .tool-first-home .guided-form-panel,
  html .tool-first-home .guided-step-stack,
  html .tool-first-home #previewCard.preview-card,
  html .tool-first-home .reliability-meter,
  html .tool-first-home #messageBox {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    justify-self: stretch !important;
    box-sizing: border-box !important;
  }

  html .tool-first-home .guided-generator-grid {
    justify-items: stretch !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "preview"
      "steps" !important;
    padding-inline: 14px !important;
    overflow: hidden !important;
  }

  html .tool-first-home .guided-preview-panel,
  html .tool-first-home .guided-form-panel {
    margin: 0 !important;
    justify-self: stretch !important;
    align-self: start !important;
    max-width: none !important;
  }

  
  html .tool-first-home .guided-preview-panel .preview-heading .section-kicker {
    display: none !important;
  }

  html .tool-first-home .guided-preview-panel .preview-heading {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 0 2px !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }

  html .tool-first-home .guided-preview-panel .preview-heading h2 {
    font-size: clamp(1.08rem, 4.4vw, 1.24rem) !important;
    line-height: 1.1 !important;
  }

  
  html .tool-first-home #previewCard.preview-card {
    justify-items: center !important;
    align-items: center !important;
    align-content: center !important;
    place-items: center !important;
    margin-inline: 0 !important;
  }

  html .tool-first-home #qrPreview.qr-preview,
  html .tool-first-home #qrPreview.qr-preview .empty-preview {
    margin-inline: auto !important;
    justify-self: center !important;
    align-self: center !important;
  }

  html .tool-first-home .empty-preview {
    text-align: center !important;
  }

  
  html .tool-first-home .guided-step,
  html .tool-first-home .guided-step.is-active:not([hidden]),
  html .tool-first-home .single-mobile-accordion-toggle {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 560px) {
  html .tool-first-home .guided-generator-grid{
    padding-inline: 12px !important;
  }
}


@media (max-width: 1060px){
  
  html .tool-first-home .guided-preview-panel {
    display: grid !important;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr) !important;
    grid-template-areas:
      "preview reliability"
      "message message" !important;
    align-items: stretch !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 12px !important;
    border: 1px solid var(--line) !important;
    border-radius: 26px !important;
    background: color-mix(in srgb, var(--surface-2) 84%, transparent) !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }

  html[data-theme="dark"] .tool-first-home .guided-preview-panel {
    background: rgba(21, 33, 29, .92) !important;
  }

  
  html .tool-first-home .guided-preview-panel .preview-heading {
    display: none !important;
  }

  
  html .tool-first-home #previewCard.preview-card {
    grid-area: preview !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 184px !important;
    max-height: none !important;
    padding: 10px !important;
    margin: 0 !important;
    border-radius: 22px !important;
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    justify-items: center !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  html .tool-first-home #qrPreview.qr-preview {
    width: min(100%, 168px) !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 168px !important;
    max-height: 168px !important;
    aspect-ratio: 1 / 1 !important;
    margin-inline: auto !important;
    justify-self: center !important;
  }

  html .tool-first-home #qrPreview.qr-preview .empty-preview {
    width: 100% !important;
    height: 100% !important;
    min-height: 146px !important;
    max-width: none !important;
    padding: 12px !important;
    margin: 0 auto !important;
    border-radius: 18px !important;
    text-align: center !important;
    display: grid !important;
    align-content: center !important;
    justify-items: center !important;
    gap: 8px !important;
  }

  html .tool-first-home .empty-preview strong {
    font-size: .93rem !important;
    line-height: 1.22 !important;
    max-width: 15ch !important;
  }

  html .tool-first-home .empty-preview span {
    font-size: .82rem !important;
    line-height: 1.36 !important;
    max-width: 18ch !important;
  }

  
  html .tool-first-home .reliability-meter {
    grid-area: reliability !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 184px !important;
    margin: 0 !important;
    padding: 14px !important;
    border-radius: 22px !important;
    display: grid !important;
    align-content: center !important;
    gap: 12px !important;
    box-sizing: border-box !important;
  }

  html .tool-first-home .reliability-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
  }

  

  

  

  html .tool-first-home .reliability-badge {
    min-height: 34px !important;
    padding: 0 11px !important;
    font-size: .72rem !important;
    white-space: nowrap !important;
  }

  html .tool-first-home .reliability-score {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    gap: 6px !important;
    margin: 0 !important;
  }

  html .tool-first-home .reliability-score strong {
    font-size: 1.45rem !important;
    line-height: 1 !important;
  }

  html .tool-first-home .reliability-score span {
    font-size: .78rem !important;
    line-height: 1.25 !important;
  }

  

  

  
  html .tool-first-home #messageBox {
    grid-area: message !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    border-radius: 18px !important;
    font-size: .9rem !important;
    line-height: 1.32 !important;
    box-sizing: border-box !important;
  }

  
  html .tool-first-home .guided-form-panel {
    margin-top: 0 !important;
  }

  html .tool-first-home .guided-step-stack {
    gap: 10px !important;
  }

  
  html .tool-first-home .guided-step,
  html .tool-first-home .guided-step.is-active:not([hidden]) {
    border-radius: 24px !important;
  }

  html .tool-first-home .single-mobile-accordion-toggle {
    min-height: 58px !important;
    border-radius: 20px !important;
  }

  
  html .tool-first-home .guided-generator-grid {
    padding-bottom: 104px !important;
  }
}

@media (max-width: 720px) {
  
  html .tool-first-home .guided-preview-panel{
    grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr) !important;
    gap: 10px !important;
    padding: 10px !important;
    border-radius: 24px !important;
  }

  html .tool-first-home #previewCard.preview-card,
html .tool-first-home .reliability-meter{
    min-height: 166px !important;
    border-radius: 20px !important;
  }

  html .tool-first-home #qrPreview.qr-preview{
    width: min(100%, 146px) !important;
    max-width: 146px !important;
    max-height: 146px !important;
  }

  html .tool-first-home #qrPreview.qr-preview .empty-preview{
    min-height: 128px !important;
    padding: 10px !important;
  }

  html .tool-first-home .empty-preview strong{
    font-size: .88rem !important;
  }

  html .tool-first-home .empty-preview span{
    font-size: .76rem !important;
  }

  html .tool-first-home .reliability-meter{
    padding: 12px !important;
    gap: 10px !important;
  }

  html .tool-first-home .reliability-badge{
    min-height: 31px !important;
    padding: 0 9px !important;
    font-size: .68rem !important;
  }

  html .tool-first-home .reliability-score strong{
    font-size: 1.28rem !important;
  }
}

@media (max-width: 520px) {
  
  html .tool-first-home .guided-preview-panel{
    grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr) !important;
    gap: 8px !important;
  }

  html .tool-first-home #previewCard.preview-card,
html .tool-first-home .reliability-meter{
    min-height: 154px !important;
  }

  html .tool-first-home #qrPreview.qr-preview{
    width: min(100%, 132px) !important;
    max-width: 132px !important;
    max-height: 132px !important;
  }

  html .tool-first-home #qrPreview.qr-preview .empty-preview{
    min-height: 118px !important;
    gap: 6px !important;
  }

  html .tool-first-home .empty-preview strong{
    font-size: .82rem !important;
  }

  html .tool-first-home .empty-preview span{
    font-size: .71rem !important;
    line-height: 1.3 !important;
  }

  html .tool-first-home .reliability-score strong{
    font-size: 1.16rem !important;
  }

  html .tool-first-home .reliability-score span{
    font-size: .7rem !important;
  }

  html .tool-first-home #messageBox{
    font-size: .84rem !important;
  }
}


.single-mobile-card-heading,
.single-mobile-step-actions{
  display: none;
}

@media (max-width: 1060px) {
  
  html .tool-first-home .guided-generator-grid{
    grid-template-areas:
      "mobileHeading"
      "preview"
      "steps" !important;
    gap: 14px !important;
    padding-bottom: 18px !important;
  }

  
  html .single-mobile-card-heading{
    grid-area: mobileHeading !important;
    display: grid !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 2px 4px 0 !important;
    box-sizing: border-box !important;
  }

  html .single-mobile-card-heading .single-mobile-builder-kicker{
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    width: fit-content !important;
    font-size: .82rem !important;
    line-height: 1.2 !important;
  }

  html .single-mobile-card-heading h2{
    margin: 0 !important;
    font-size: clamp(1.36rem, 5vw, 1.72rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.045em !important;
  }

  html .tool-first-home #messageBox[hidden]{
    display: none !important;
  }

  
  html .tool-first-home #previewCard.preview-card{
    overflow: hidden !important;
    isolation: isolate !important;
  }

  html .tool-first-home #qrPreview.qr-preview{
    display: grid !important;
    place-items: center !important;
    width: min(100%, 168px) !important;
    height: min(100%, 168px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 168px !important;
    max-height: 168px !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  html .tool-first-home #qrPreview.qr-preview > div{
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }

  html .tool-first-home #qrPreview.qr-preview > svg,
html .tool-first-home #qrPreview.qr-preview > canvas,
html .tool-first-home #qrPreview.qr-preview > div > svg,
html .tool-first-home #qrPreview.qr-preview > div > canvas{
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: 100% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin: 0 auto !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  html .tool-first-home #qrPreview.qr-preview > svg *,
html .tool-first-home #qrPreview.qr-preview > div > svg *{
    transform: none !important;
  }

  
  html .tool-first-home .reliability-meter{
    display: grid !important;
    align-content: center !important;
    grid-auto-rows: auto !important;
    gap: 12px !important;
    overflow: hidden !important;
  }

  html .tool-first-home .reliability-head{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: start !important;
    gap: 10px !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  html .tool-first-home .reliability-title-row{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    justify-items: start !important;
    gap: 7px !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  html .tool-first-home .reliability-title-row .section-kicker{
    display: block !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    font-size: .72rem !important;
    line-height: 1.18 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  html .tool-first-home .reliability-badge{
    display: inline-flex !important;
    width: fit-content !important;
    min-height: 31px !important;
    padding: 0 10px !important;
    margin: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: .68rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  html .tool-first-home .reliability-score-line{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    justify-items: start !important;
    gap: 6px !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  html .tool-first-home .reliability-score{
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 3px !important;
    min-width: 0 !important;
    margin: 0 !important;
    font-size: 1.32rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  html .tool-first-home .reliability-score small{
    font-size: .68rem !important;
    line-height: 1 !important;
  }

  html .tool-first-home #reliabilitySummary{
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    font-size: .74rem !important;
    line-height: 1.32 !important;
    overflow-wrap: anywhere !important;
  }

  html .tool-first-home .reliability-bar{
    width: 100% !important;
    height: 9px !important;
    margin: 0 !important;
  }

  
  html .tool-first-home .guided-actions{
    display: none !important;
  }

  html .tool-first-home .guided-generator-grid{
    min-height: auto !important;
  }

  
  html .tool-first-home .single-mobile-step-actions{
    display: grid !important;
    grid-template-columns: minmax(92px, .72fr) minmax(0, 1.28fr) !important;
    gap: 10px !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin-top: 2px !important;
    box-sizing: border-box !important;
  }

  html .tool-first-home .single-mobile-step-actions--forward{
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html .tool-first-home .single-mobile-step-actions .ghost-button,
html .tool-first-home .single-mobile-step-actions .primary-button{
    width: 100% !important;
    min-height: 48px !important;
    height: 48px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border-radius: 18px !important;
    font-size: .96rem !important;
    line-height: 1 !important;
  }
}

@media (max-width: 720px) {
  html .tool-first-home #qrPreview.qr-preview{
    width: min(100%, 146px) !important;
    height: min(100%, 146px) !important;
    max-width: 146px !important;
    max-height: 146px !important;
  }

  html .tool-first-home .reliability-meter{
    gap: 9px !important;
  }

  html .tool-first-home #reliabilitySummary{
    font-size: .71rem !important;
  }
}

@media (max-width: 520px) {
  html .tool-first-home #qrPreview.qr-preview{
    width: min(100%, 132px) !important;
    height: min(100%, 132px) !important;
    max-width: 132px !important;
    max-height: 132px !important;
  }

  html .tool-first-home .single-mobile-step-actions{
    grid-template-columns: minmax(84px, .7fr) minmax(0, 1.3fr) !important;
    gap: 8px !important;
  }

  html .tool-first-home .single-mobile-step-actions--forward{
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html .tool-first-home .single-mobile-step-actions .ghost-button,
html .tool-first-home .single-mobile-step-actions .primary-button{
    min-height: 46px !important;
    height: 46px !important;
    border-radius: 17px !important;
    font-size: .92rem !important;
  }
}


@media (max-width: 1060px){
  html {
    scroll-padding-top: 92px;
  }

  html .tool-first-home .guided-generator-grid {
    scroll-margin-top: 92px !important;
  }

  html .tool-first-home {
    align-content: start !important;
  }
}

@media (max-width: 560px) {
  html{
    scroll-padding-top: 88px;
  }

  html .tool-first-home .guided-generator-grid{
    scroll-margin-top: 88px !important;
  }
}


@media (max-width: 1060px){
  html {
    --sticky-preview-top: 92px;
  }

  
  html .tool-first-home .guided-generator-grid {
    overflow: visible !important;
  }

  html .tool-first-home .guided-preview-panel {
    position: sticky !important;
    top: var(--sticky-preview-top) !important;
    z-index: 1180 !important;
    align-self: start !important;
    isolation: isolate !important;
    backdrop-filter: blur(18px) !important;
    box-shadow:
      0 18px 42px rgba(0, 0, 0, .18),
      0 0 0 1px color-mix(in srgb, var(--line) 78%, transparent) !important;
  }

  html[data-theme="dark"] .tool-first-home .guided-preview-panel {
    background: rgba(21, 33, 29, .96) !important;
    box-shadow:
      0 20px 44px rgba(0, 0, 0, .34),
      0 0 0 1px rgba(126, 231, 201, .12) !important;
  }

  
  html .tool-first-home .guided-form-panel {
    position: relative !important;
    z-index: 1 !important;
  }
}

@media (max-width: 560px) {
  html{
    --sticky-preview-top: 88px;
  }
}


html .tool-first-home #qrPreview.qr-preview{
  isolation: isolate !important;
}

html .tool-first-home #qrPreview.qr-preview > svg,
html .tool-first-home #qrPreview.qr-preview > canvas,
html .tool-first-home #qrPreview.qr-preview > div > svg,
html .tool-first-home #qrPreview.qr-preview > div > canvas{
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
  object-position: center center !important;
  margin: 0 auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}


html .tool-first-home #qrPreview.qr-preview > svg *,
html .tool-first-home #qrPreview.qr-preview > div > svg *{
  transform: none !important;
}


.bulk-mobile-accordion-toggle,
.bulk-mobile-step-actions{
  display: none;
}

@media (max-width: 1060px) {
  html{
    --batch-sticky-top: 92px;
    scroll-padding-top: 92px;
  }

  html .bulk-main{
    padding-top: 0 !important;
  }

  html .primary-tool-stage.container{
    width: min(calc(100% - 24px), 860px) !important;
    max-width: 860px !important;
    padding-top: 92px !important;
    margin: 0 auto !important;
  }

  
  html .bulk-tool-grid.guided-grid{
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "preview"
      "workflow" !important;
    align-items: start !important;
    gap: 14px !important;
    padding: 14px !important;
    margin: 0 !important;
    border: 1px solid var(--demo-border) !important;
    border-radius: 32px !important;
    background:
      radial-gradient(circle at 14% 7%, rgba(45, 212, 191, .11), transparent 16rem),
      radial-gradient(circle at 90% 18%, rgba(249, 115, 22, .06), transparent 14rem),
      color-mix(in srgb, var(--surface) 76%, transparent) !important;
    box-shadow: var(--demo-stage-shadow) !important;
    overflow: visible !important;
    scroll-margin-top: 92px !important;
    box-sizing: border-box !important;
  }

  html .bulk-tool-grid.guided-grid::before{
    opacity: .22 !important;
  }

  
  html .batch-flow-panel,
html .bulk-export-panel.companion-panel{
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  html .batch-flow-panel{
    grid-area: workflow !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  
  html .bulk-workflow-heading{
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 2px 4px 0 !important;
    margin: 0 0 12px !important;
    border: 0 !important;
    background: transparent !important;
    box-sizing: border-box !important;
  }

  html .bulk-workflow-heading .bulk-builder-kicker{
    margin: 0 0 6px !important;
    font-size: .82rem !important;
    line-height: 1.2 !important;
  }

  html .bulk-workflow-heading h2{
    margin: 0 !important;
    font-size: clamp(1.36rem, 5vw, 1.72rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.045em !important;
  }

  html .bulk-workflow-heading .bulk-workflow-intro{
    display: none !important;
  }

  
  html .batch-flow-panel .guided-progress,
html .batch-flow-panel .guided-actions{
    display: none !important;
  }

  
  html .bulk-export-panel.companion-panel{
    grid-area: preview !important;
    position: sticky !important;
    top: var(--batch-sticky-top) !important;
    z-index: 1180 !important;
    display: grid !important;
    align-self: start !important;
    gap: 0 !important;
    padding: 12px !important;
    border: 1px solid var(--line) !important;
    border-radius: 26px !important;
    background: color-mix(in srgb, var(--surface-2) 88%, transparent) !important;
    box-shadow:
      0 18px 42px rgba(0, 0, 0, .18),
      0 0 0 1px color-mix(in srgb, var(--line) 78%, transparent) !important;
    backdrop-filter: blur(18px) !important;
    isolation: isolate !important;
    overflow: visible !important;
  }

  html .bulk-export-panel.companion-panel > .panel-heading{
    display: none !important;
  }

  
  html .bulk-preview-card.preview-card{
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 180px !important;
    max-height: none !important;
    padding: 10px !important;
    margin: 0 !important;
    border-radius: 22px !important;
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    justify-items: center !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  html .bulk-preview-card .bulk-qr-preview-grid{
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-width: 100% !important;
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    box-sizing: border-box !important;
  }

  html .bulk-preview-card .bulk-qr-preview-empty{
    width: 100% !important;
    min-height: 140px !important;
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    padding: 12px !important;
    border-radius: 18px !important;
    text-align: center !important;
    font-size: .82rem !important;
    line-height: 1.34 !important;
    box-sizing: border-box !important;
  }

  html .bulk-preview-card .bulk-qr-preview-card{
    width: 100% !important;
    max-width: 176px !important;
    min-height: 0 !important;
    height: auto !important;
    display: grid !important;
    justify-items: center !important;
    align-content: center !important;
    gap: 5px !important;
    padding: 0 !important;
    margin: 0 auto !important;
    overflow: visible !important;
  }

  html .bulk-preview-card .bulk-qr-thumb{
    width: min(100%, 132px) !important;
    height: min(100%, 132px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 132px !important;
    max-height: 132px !important;
    padding: 8px !important;
    border-radius: 18px !important;
    display: grid !important;
    place-items: center !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  html .bulk-preview-card .bulk-qr-thumb > div,
html .bulk-preview-card .bulk-qr-thumb > svg,
html .bulk-preview-card .bulk-qr-thumb > canvas,
html .bulk-preview-card .bulk-qr-thumb > div > svg,
html .bulk-preview-card .bulk-qr-thumb > div > canvas{
    max-width: 100% !important;
    max-height: 100% !important;
  }

  html .bulk-preview-card .bulk-qr-preview-label,
html .bulk-preview-card .bulk-qr-preview-file{
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    text-align: center !important;
  }

  html .bulk-preview-card .bulk-qr-preview-label{
    font-size: .78rem !important;
    line-height: 1.2 !important;
  }

  html .bulk-preview-card .bulk-qr-preview-file{
    font-size: .68rem !important;
    line-height: 1.2 !important;
  }

  html .bulk-batch-report{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  html .bulk-batch-report > div{
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 7px 6px !important;
    border-radius: 14px !important;
    display: grid !important;
    align-content: center !important;
    gap: 3px !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  html .bulk-batch-report span{
    font-size: .6rem !important;
    line-height: 1.12 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  html .bulk-batch-report strong{
    font-size: 1rem !important;
    line-height: 1 !important;
  }

  html .bulk-preview-mini-copy{
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    gap: 4px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }

  html .bulk-preview-mini-copy strong{
    font-size: .78rem !important;
    line-height: 1.18 !important;
  }

  html .bulk-preview-mini-copy span{
    font-size: .72rem !important;
    line-height: 1.26 !important;
    overflow-wrap: anywhere !important;
  }

  html .bulk-preview-mini-copy p{
    display: none !important;
  }

  
  html .bulk-workflow-content.step-stack{
    display: grid !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  html .bulk-step-card{
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    display: grid !important;
    gap: 12px !important;
    padding: 10px !important;
    margin: 0 !important;
    border: 1px solid var(--line) !important;
    border-radius: 24px !important;
    background: color-mix(in srgb, var(--surface-2) 82%, transparent) !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    scroll-margin-top: 292px !important;
  }

  html .bulk-step-card.is-bulk-mobile-collapsed{
    gap: 0 !important;
  }

  html .bulk-step-card.is-bulk-mobile-collapsed > :not(.bulk-mobile-accordion-toggle){
    display: none !important;
  }

  html .bulk-mobile-accordion-toggle{
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    min-height: 58px !important;
    padding: 10px 12px !important;
    margin: 0 !important;
    border: 1px solid rgba(126, 231, 201, .18) !important;
    border-radius: 20px !important;
    background: rgba(20, 31, 28, .74) !important;
    color: inherit !important;
    text-align: left !important;
    box-sizing: border-box !important;
  }

  html .bulk-mobile-accordion-toggle.is-active,
html .bulk-step-card.is-active .bulk-mobile-accordion-toggle{
    border-color: rgba(45, 212, 191, .42) !important;
    background: linear-gradient(135deg, rgba(45, 212, 191, .14), rgba(15, 118, 110, .08)) !important;
  }

  html .bulk-mobile-step-chip{
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 999px !important;
    border: 1px solid rgba(45, 212, 191, .36) !important;
    background: rgba(15, 118, 110, .26) !important;
    color: var(--primary-dark) !important;
    font-size: .92rem !important;
    font-weight: 850 !important;
    line-height: 1 !important;
  }

  html .bulk-mobile-accordion-toggle strong{
    font-size: 1rem !important;
    line-height: 1.15 !important;
  }

  html .bulk-mobile-accordion-chevron{
    width: 24px !important;
    height: 24px !important;
    display: grid !important;
    place-items: center !important;
    font-size: 1.18rem !important;
    line-height: 1 !important;
  }

  html .bulk-mobile-accordion-toggle.is-active .bulk-mobile-accordion-chevron,
html .bulk-step-card.is-active .bulk-mobile-accordion-chevron{
    transform: rotate(180deg) !important;
  }

  
  html .bulk-step-head{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    align-items: start !important;
    margin: 0 !important;
  }

  html .bulk-step-head .section-kicker{
    margin: 0 0 5px !important;
    font-size: .78rem !important;
    line-height: 1.2 !important;
  }

  html .bulk-step-head h3{
    margin: 0 !important;
    font-size: 1.08rem !important;
    line-height: 1.18 !important;
  }

  
  html .bulk-mobile-step-actions{
    display: grid !important;
    grid-template-columns: minmax(92px, .72fr) minmax(0, 1.28fr) !important;
    gap: 10px !important;
    align-items: center !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-top: 2px !important;
    box-sizing: border-box !important;
  }

  html .bulk-mobile-step-actions--forward{
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html .bulk-mobile-step-actions .ghost-button,
html .bulk-mobile-step-actions .primary-button{
    width: 100% !important;
    min-height: 48px !important;
    height: 48px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border-radius: 18px !important;
    font-size: .96rem !important;
    line-height: 1 !important;
  }

  
  html .bulk-manual-table-wrap{
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    max-height: 310px !important;
    box-sizing: border-box !important;
  }

  html .bulk-manual-table{
    min-width: 620px !important;
  }

  
  html #bulkMessage,
html .bulk-workflow-intro{
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  
  html .bulk-preview-section,
html .bulk-help-section,
html .ad-placement{
    margin-top: 28px !important;
  }
}

@media (max-width: 720px) {

  html .bulk-preview-card.preview-card{
    min-height: 166px !important;
    border-radius: 20px !important;
  }

  html .bulk-preview-card .bulk-qr-preview-empty{
    min-height: 128px !important;
    font-size: .76rem !important;
  }

  html .bulk-preview-card .bulk-qr-thumb{
    width: min(100%, 118px) !important;
    height: min(100%, 118px) !important;
    max-width: 118px !important;
    max-height: 118px !important;
  }

  html .bulk-preview-card .bulk-qr-preview-card{
    max-width: 154px !important;
  }

  html .bulk-batch-report{
    gap: 5px !important;
  }

  html .bulk-batch-report > div{
    padding: 6px 4px !important;
  }

  html .bulk-batch-report span{
    font-size: .55rem !important;
  }

  html .bulk-batch-report strong{
    font-size: .92rem !important;
  }

  html .bulk-preview-mini-copy strong{
    font-size: .72rem !important;
  }

  html .bulk-preview-mini-copy span{
    font-size: .67rem !important;
  }

  html .bulk-step-card{
    scroll-margin-top: 274px !important;
  }
}

@media (max-width: 560px) {
  html{
    --batch-sticky-top: 88px;
    scroll-padding-top: 88px;
  }

  html .primary-tool-stage.container{
    width: calc(100% - 20px) !important;
    padding-top: 86px !important;
  }

  html .bulk-tool-grid.guided-grid{
    padding: 12px !important;
    border-radius: 28px !important;
    scroll-margin-top: 88px !important;
  }

  html .bulk-export-panel.companion-panel{
    padding: 10px !important;
    border-radius: 24px !important;
  }

  html .bulk-preview-card.preview-card{
    min-height: 154px !important;
  }

  html .bulk-preview-card .bulk-qr-preview-empty{
    min-height: 118px !important;
    padding: 10px !important;
    font-size: .71rem !important;
  }

  html .bulk-preview-card .bulk-qr-thumb{
    width: min(100%, 108px) !important;
    height: min(100%, 108px) !important;
    max-width: 108px !important;
    max-height: 108px !important;
  }

  html .bulk-preview-card .bulk-qr-preview-label{
    font-size: .7rem !important;
  }

  html .bulk-preview-card .bulk-qr-preview-file,
html .bulk-preview-mini-copy span{
    font-size: .62rem !important;
  }

  html .bulk-batch-report span{
    font-size: .5rem !important;
  }

  html .bulk-batch-report strong{
    font-size: .84rem !important;
  }

  html .bulk-mobile-step-actions{
    grid-template-columns: minmax(84px, .7fr) minmax(0, 1.3fr) !important;
    gap: 8px !important;
  }

  html .bulk-mobile-step-actions--forward{
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html .bulk-mobile-step-actions .ghost-button,
html .bulk-mobile-step-actions .primary-button{
    min-height: 46px !important;
    height: 46px !important;
    border-radius: 17px !important;
    font-size: .92rem !important;
  }

  html .bulk-step-card{
    padding: 9px !important;
    border-radius: 22px !important;
    scroll-margin-top: 260px !important;
  }

  html .bulk-mobile-accordion-toggle{
    min-height: 54px !important;
    padding: 9px 10px !important;
  }
}


.bulk-mobile-card-heading{
  display: none;
}

@media (max-width: 1060px) {
  html .bulk-tool-grid.guided-grid{
    grid-template-areas:
      "mobileHeading"
      "preview"
      "workflow" !important;
  }

  html .bulk-mobile-card-heading{
    grid-area: mobileHeading !important;
    display: grid !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 2px 4px 0 !important;
    box-sizing: border-box !important;
  }

  html .bulk-mobile-card-heading .bulk-mobile-builder-kicker{
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: fit-content !important;
    margin: 0 !important;
    font-size: .82rem !important;
    line-height: 1.2 !important;
  }

  html .bulk-mobile-card-heading h2{
    margin: 0 !important;
    font-size: clamp(1.36rem, 5vw, 1.72rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.045em !important;
  }

  html .bulk-workflow-heading{
    display: none !important;
  }
}


@media (max-width: 1060px){
  
  html .primary-tool-stage,
  html .primary-tool-stage.container {
    min-height: 0 !important;
    height: auto !important;
    display: block !important;
    grid-template-rows: none !important;
    align-content: start !important;
    align-items: start !important;
    justify-items: stretch !important;
    padding-top: 84px !important;
    padding-bottom: 22px !important;
    margin: 0 auto !important;
  }

  html .primary-tool-stage > .bulk-tool-grid.guided-grid {
    grid-row: auto !important;
    align-self: start !important;
    justify-self: stretch !important;
    margin-top: 8px !important;
    margin-bottom: 0 !important;
  }

  
  

  html .bulk-export-panel.companion-panel .bulk-preview-card.preview-card{
    min-height: 180px !important;
    height: auto !important;
    align-self: stretch !important;
  }

  
  html .bulk-workflow-panel.batch-flow-panel > nav.guided-progress,
  html .bulk-workflow-panel.batch-flow-panel > .guided-progress,
  html .batch-flow-panel .guided-progress,
  html .bulk-tool-grid.guided-grid .guided-progress,
  html .guided-progress.is-ten {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }
}

@media (max-width: 720px) {

  html .bulk-export-panel.companion-panel .bulk-preview-card.preview-card{
    min-height: 166px !important;
  }
}

@media (max-width: 560px) {
  html .primary-tool-stage,
html .primary-tool-stage.container{
    padding-top: 76px !important;
    padding-bottom: 18px !important;
  }

  html .primary-tool-stage > .bulk-tool-grid.guided-grid{
    margin-top: 6px !important;
  }

  html .bulk-export-panel.companion-panel .bulk-preview-card.preview-card{
    min-height: 154px !important;
  }
}


html .guided-step-heading > .section-kicker,
html .bulk-step-head .section-kicker{
  display: none !important;
}


html .guided-preview-panel .preview-heading > div > .section-kicker{
  display: none !important;
}


html .guided-preview-panel .empty-preview strong{
  display: none !important;
}


html #singleGuidedStatus,
html .guided-preview-panel #messageBox{
  display: none !important;
}


html .guided-preview-panel .empty-preview{
  align-content: center !important;
  justify-items: center !important;
  text-align: center !important;
  gap: 0 !important;
}

html .guided-preview-panel .empty-preview span{
  max-width: 18ch !important;
  font-weight: 650 !important;
  line-height: 1.45 !important;
}


html .batch-preview-panel{
  display: grid !important;
  align-content: start !important;
  gap: 14px !important;
}

html .batch-preview-panel .preview-heading{
  width: 100% !important;
  margin: 0 !important;
}

html .batch-preview-panel .preview-heading h2{
  margin: 0 !important;
}

html .batch-preview-card{
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

html .batch-preview-card .bulk-qr-preview-grid{
  width: 100% !important;
  display: grid !important;
  place-items: center !important;
  box-sizing: border-box !important;
}

html .batch-preview-card .bulk-qr-preview-empty{
  width: 100% !important;
  display: grid !important;
  place-items: center !important;
  text-align: center !important;
  box-sizing: border-box !important;
  line-height: 1.42 !important;
}

html .batch-summary-counts{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  min-width: 0 !important;
}

html .batch-summary-counts > div{
  min-width: 0 !important;
  display: grid !important;
  gap: 4px !important;
  align-content: center !important;
  justify-items: center !important;
  text-align: center !important;
  padding: 10px 8px !important;
  border-radius: 16px !important;
  box-sizing: border-box !important;
}

html .batch-summary-counts span{
  font-size: .66rem !important;
  line-height: 1.18 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

html .batch-summary-counts strong{
  font-size: 1.12rem !important;
  line-height: 1 !important;
}

html .batch-preview-mini-copy{
  display: grid !important;
  gap: 5px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html .batch-preview-mini-copy span,
html .batch-preview-mini-copy p{
  margin: 0 !important;
  line-height: 1.36 !important;
  overflow-wrap: anywhere !important;
}


@media (min-width: 1061px){
  html .batch-preview-panel .batch-preview-card {
    min-height: 290px !important;
    display: grid !important;
    place-items: center !important;
    padding: 20px !important;
  }

  html .batch-preview-panel .bulk-qr-preview-grid {
    min-height: 250px !important;
  }

  html .batch-preview-panel .bulk-qr-preview-empty {
    min-height: 250px !important;
    padding: 18px !important;
    border-radius: 22px !important;
  }

  html .batch-preview-panel .bulk-qr-preview-card {
    width: min(100%, 286px) !important;
    display: grid !important;
    justify-items: center !important;
    gap: 10px !important;
    text-align: center !important;
    padding: 18px !important;
  }

  html .batch-preview-panel .bulk-qr-thumb {
    width: min(240px, 100%) !important;
    aspect-ratio: 1 / 1 !important;
    display: grid !important;
    place-items: center !important;
    overflow: visible !important;
  }
}


@media (max-width: 1060px){
  html .primary-tool-stage,
  html .primary-tool-stage.container {
    min-height: 0 !important;
    height: auto !important;
    display: block !important;
    grid-template-rows: none !important;
    align-content: start !important;
    align-items: start !important;
    justify-items: stretch !important;
    padding-top: 92px !important;
    padding-bottom: 22px !important;
    margin: 0 auto !important;
  }

  html .primary-tool-stage > .bulk-tool-grid.guided-grid {
    grid-row: auto !important;
    align-self: start !important;
    justify-self: stretch !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  
  

  html .batch-preview-panel {
    position: sticky !important;
    top: var(--batch-sticky-top, 92px) !important;
    z-index: 1180 !important;
    align-self: start !important;
  }

  html .batch-preview-panel .batch-preview-card{
    min-height: 180px !important;
    align-self: stretch !important;
  }

  html .batch-preview-panel .batch-preview-card {
    padding: 10px !important;
    border-radius: 22px !important;
  }

  html .batch-preview-panel .bulk-qr-preview-grid,
  html .batch-preview-panel .bulk-qr-preview-empty {
    min-height: 0 !important;
    height: 100% !important;
  }

  html .batch-preview-panel .bulk-qr-preview-empty {
    padding: 12px !important;
    border-radius: 18px !important;
    font-size: .82rem !important;
  }

  html .batch-preview-panel .bulk-qr-preview-card {
    width: 100% !important;
    max-width: 176px !important;
    display: grid !important;
    justify-items: center !important;
    align-content: center !important;
    gap: 5px !important;
    padding: 0 !important;
  }

  html .batch-preview-panel .bulk-qr-thumb {
    width: min(100%, 132px) !important;
    height: min(100%, 132px) !important;
    max-width: 132px !important;
    max-height: 132px !important;
    padding: 8px !important;
    border-radius: 18px !important;
  }

  

  

  

  html .batch-summary-counts {
    gap: 6px !important;
  }

  html .batch-summary-counts > div {
    padding: 7px 6px !important;
    border-radius: 14px !important;
  }

  html .batch-summary-counts span {
    font-size: .6rem !important;
  }

  html .batch-summary-counts strong {
    font-size: 1rem !important;
  }

  html .batch-preview-mini-copy span {
    font-size: .72rem !important;
  }

  html .batch-preview-mini-copy p {
    display: none !important;
  }

  
  html .bulk-workflow-panel.batch-flow-panel > nav.guided-progress,
  html .bulk-workflow-panel.batch-flow-panel > .guided-progress,
  html .batch-flow-panel .guided-progress,
  html .bulk-tool-grid.guided-grid .guided-progress,
  html .guided-progress.is-ten {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }
}

@media (max-width: 720px) {

  html .batch-preview-panel .batch-preview-card{
    min-height: 166px !important;
  }

  html .batch-preview-panel .bulk-qr-thumb{
    width: min(100%, 118px) !important;
    height: min(100%, 118px) !important;
    max-width: 118px !important;
    max-height: 118px !important;
  }
}

@media (max-width: 560px) {
  html .primary-tool-stage,
html .primary-tool-stage.container{
    padding-top: 86px !important;
    padding-bottom: 18px !important;
  }

  html .batch-preview-panel{
    top: var(--batch-sticky-top, 88px) !important;
  }

  html .batch-preview-panel .batch-preview-card{
    min-height: 154px !important;
  }

  html .batch-preview-panel .bulk-qr-thumb{
    width: min(100%, 108px) !important;
    height: min(100%, 108px) !important;
    max-width: 108px !important;
    max-height: 108px !important;
  }

  html .batch-summary-counts span{
    font-size: .5rem !important;
  }

  html .batch-summary-counts strong{
    font-size: .84rem !important;
  }

  html .batch-preview-mini-copy span{
    font-size: .62rem !important;
  }
}


.single-batch-cta-card{
  display: none;
}

@media (min-width: 1061px) {
  
  html .tool-first-home .guided-step.is-active .guided-step-heading h3,
html .tool-first-home .guided-preview-panel .preview-heading h2{
    color: var(--primary) !important;
  }

  
  html .tool-first-home .guided-form-panel{
    grid-template-rows: auto minmax(0, 1fr) auto auto !important;
  }

  html .tool-first-home .guided-panel-heading{
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }

  html .tool-first-home .guided-progress-four{
    grid-column: 1 !important;
    grid-row: 2 / span 2 !important;
  }

  html .tool-first-home .guided-step-stack{
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  html .tool-first-home .guided-actions{
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
  }

  
  html .single-batch-cta-card{
    display: grid !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 15px 16px !important;
    margin-top: auto !important;
    border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--line)) !important;
    border-radius: 22px !important;
    background:
      radial-gradient(circle at 14% 22%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 14rem),
      color-mix(in srgb, var(--surface-2) 90%, transparent) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 8%, transparent) !important;
    box-sizing: border-box !important;
  }

  html .single-batch-cta-card .section-kicker,
html .single-batch-cta-card h3,
html .single-batch-cta-card p{
    margin: 0 !important;
  }

  html .single-batch-cta-card h3{
    font-size: 1rem !important;
    line-height: 1.18 !important;
    letter-spacing: -0.025em !important;
  }

  html .single-batch-cta-card p{
    color: var(--muted) !important;
    font-size: .86rem !important;
    line-height: 1.4 !important;
  }

  html .single-batch-cta-card .secondary-button{
    width: 100% !important;
    min-height: 42px !important;
    padding: 0 12px !important;
    justify-content: center !important;
    margin-top: 2px !important;
    border-radius: 16px !important;
    font-size: .9rem !important;
  }

  
  html .tool-first-home .guided-preview-panel{
    display: grid !important;
    grid-template-rows: auto auto auto 1fr auto !important;
    align-content: start !important;
  }
}

@media (min-width: 1061px) {
  
  html .tool-first-home .guided-progress-four,
  html .tool-first-home .guided-progress{
    border-color: transparent !important;
  }

  
  html .tool-first-home #singleGuidedBack[disabled]{
    visibility: hidden !important;
    pointer-events: none !important;
  }

  
  html .tool-first-home .guided-form-panel{
    grid-template-rows: auto auto minmax(156px, 1fr) auto auto !important;
  }

  html .tool-first-home .guided-panel-heading{
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }

  html .tool-first-home .guided-progress-four{
    grid-column: 1 !important;
    grid-row: 2 / span 3 !important;
  }

  html .tool-first-home .guided-step-stack{
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  html .tool-first-home .guided-actions{
    grid-column: 1 / -1 !important;
    grid-row: 5 !important;
  }

  
  html .single-batch-cta-card{
    gap: 9px !important;
    border-color: color-mix(in srgb, var(--primary) 42%, var(--line)) !important;
    background:
      radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--primary) 28%, transparent), transparent 13rem),
      linear-gradient(145deg, color-mix(in srgb, var(--surface-2) 96%, transparent), color-mix(in srgb, var(--primary) 9%, var(--surface))) !important;
  }

  html .single-batch-cta-top{
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
  }

  html .single-batch-cta-top .section-kicker{
    margin: 0 !important;
  }

  html .single-batch-cta-icon{
    display: inline-block !important;
    flex: 0 0 18px !important;
    width: 18px !important;
    height: 18px !important;
    background-color: var(--primary) !important;
    -webkit-mask-image: var(--nav-icon-mask) !important;
    mask-image: var(--nav-icon-mask) !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
  }

  html .single-batch-cta-button{
    min-height: 46px !important;
    border-radius: 17px !important;
    color: #06201d !important;
    background: linear-gradient(135deg, #43ead7, #14b8a6) !important;
    box-shadow: 0 16px 30px rgba(20, 184, 166, .22) !important;
  }

  html .single-batch-cta-button:hover,
html .single-batch-cta-button:focus-visible{
    transform: translateY(-1px) !important;
    filter: brightness(1.03) !important;
  }
}


@keyframes batch-cta-border-shift{
  0% {
    background-position: 0 0, 0% 50%;
  }
  50% {
    background-position: 0 0, 100% 50%;
  }
  100% {
    background-position: 0 0, 200% 50%;
  }
}

@media (min-width: 1061px) {
  
  html .tool-first-home .guided-generator-grid{
    align-items: stretch !important;
  }

  html .tool-first-home .guided-form-panel,
html .tool-first-home .guided-preview-panel{
    align-self: stretch !important;
    height: 100% !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
  }

  
  html .tool-first-home #qrPreview.qr-preview{
    border-radius: 24px !important;
    overflow: hidden !important;
  }

  html .tool-first-home #qrPreview.qr-preview > svg,
html .tool-first-home #qrPreview.qr-preview > canvas,
html .tool-first-home #qrPreview.qr-preview > div,
html .tool-first-home #qrPreview.qr-preview > div > svg,
html .tool-first-home #qrPreview.qr-preview > div > canvas{
    border-radius: 24px !important;
    overflow: hidden !important;
  }

  
  html .tool-first-home .guided-progress-four .guided-progress-step,
html .tool-first-home .guided-progress .guided-progress-step{
    border: 0 !important;
    border-color: transparent !important;
    outline: 0 !important;
  }

  html .tool-first-home .guided-progress-four .guided-progress-step.is-active,
html .tool-first-home .guided-progress .guided-progress-step.is-active{
    box-shadow:
      0 18px 30px rgba(15, 118, 110, .16),
      inset 0 0 0 1px rgba(45, 212, 191, .05) !important;
  }

  
  html .single-batch-cta-button{
    position: relative !important;
    isolation: isolate !important;
    border: 2px solid transparent !important;
    color: #06201d !important;
    background-image:
      linear-gradient(135deg, #55f0df 0%, #28d7c3 45%, #15b8a6 100%),
      linear-gradient(120deg, #7ff7ea 0%, #14b8a6 30%, #40e0d0 54%, #ffb45f 76%, #7ff7ea 100%) !important;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
    background-size: 100% 100%, 220% 220% !important;
    background-position: 0 0, 0% 50% !important;
    animation: batch-cta-border-shift 4.2s linear infinite !important;
    box-shadow:
      0 16px 30px rgba(20, 184, 166, .24),
      0 0 0 1px rgba(126, 240, 223, .08) !important;
    transition:
      transform .18s ease,
      filter .18s ease,
      box-shadow .18s ease !important;
  }

  html .single-batch-cta-button:hover,
html .single-batch-cta-button:focus-visible{
    transform: translateY(-2px) !important;
    filter: brightness(1.05) saturate(1.04) !important;
    box-shadow:
      0 20px 38px rgba(20, 184, 166, .32),
      0 0 0 1px rgba(126, 240, 223, .16) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html .single-batch-cta-button{
    animation: none !important;
  }
}


@media (min-width: 1061px){
  

  html body[data-single-guided-step]:not([data-single-guided-step="1"]) .tool-first-home .guided-form-panel {
    grid-template-rows: auto minmax(0, 1fr) auto !important;
  }

  html body[data-single-guided-step]:not([data-single-guided-step="1"]) .tool-first-home .guided-panel-heading {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }

  html body[data-single-guided-step]:not([data-single-guided-step="1"]) .tool-first-home .guided-progress-four {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  html body[data-single-guided-step]:not([data-single-guided-step="1"]) .tool-first-home .guided-step-stack {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: start !important;
  }

  html body[data-single-guided-step]:not([data-single-guided-step="1"]) .tool-first-home .guided-actions {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
  }
}


html select,
html .field select{
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  min-height: 54px !important;
  padding: 0 52px 0 18px !important;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--line)) !important;
  border-radius: 20px !important;
  color: var(--text) !important;
  background-color: color-mix(in srgb, var(--surface) 88%, transparent) !important;
  background-image:
    linear-gradient(45deg, transparent 50%, color-mix(in srgb, var(--primary) 92%, white) 50%),
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 92%, white) 50%, transparent 50%),
    linear-gradient(135deg, color-mix(in srgb, var(--surface-2) 92%, transparent), color-mix(in srgb, var(--surface) 96%, transparent)) !important;
  background-position:
    calc(100% - 26px) 22px,
    calc(100% - 19px) 22px,
    0 0 !important;
  background-size:
    8px 8px,
    8px 8px,
    100% 100% !important;
  background-repeat: no-repeat !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, white 10%, transparent),
    0 12px 28px rgba(0, 0, 0, .06) !important;
  font-weight: 720 !important;
  line-height: 1.2 !important;
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease,
    background-color .18s ease !important;
}

html select:hover,
html .field select:hover{
  transform: translateY(-1px) !important;
  border-color: color-mix(in srgb, var(--primary) 52%, var(--line)) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, white 12%, transparent),
    0 18px 34px rgba(0, 0, 0, .10) !important;
}

html select:focus,
html .field select:focus,
html select:focus-visible,
html .field select:focus-visible{
  outline: none !important;
  border-color: color-mix(in srgb, var(--primary) 72%, var(--line)) !important;
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--primary) 16%, transparent),
    0 18px 36px rgba(20, 184, 166, .14) !important;
}

html select:disabled,
html .field select:disabled{
  opacity: .58 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}


html .primary-button,
html button.primary-button,
html a.primary-button{
  min-height: 54px !important;
  border: 1px solid color-mix(in srgb, var(--primary) 44%, transparent) !important;
  border-radius: 20px !important;
  color: #06201d !important;
  background:
    linear-gradient(135deg, #59f2e2 0%, #35dfcb 40%, #14b8a6 100%) !important;
  box-shadow:
    0 18px 36px rgba(20, 184, 166, .24),
    inset 0 1px 0 rgba(255, 255, 255, .28) !important;
  font-weight: 900 !important;
  letter-spacing: -.02em !important;
  transition:
    transform .18s ease,
    filter .18s ease,
    box-shadow .18s ease,
    border-color .18s ease !important;
}

html .primary-button:hover,
html button.primary-button:hover,
html a.primary-button:hover,
html .primary-button:focus-visible,
html button.primary-button:focus-visible,
html a.primary-button:focus-visible{
  transform: translateY(-2px) !important;
  filter: brightness(1.035) saturate(1.04) !important;
  border-color: color-mix(in srgb, var(--primary) 66%, transparent) !important;
  box-shadow:
    0 24px 44px rgba(20, 184, 166, .32),
    0 0 0 4px color-mix(in srgb, var(--primary) 14%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .30) !important;
}

html .ghost-button,
html button.ghost-button,
html a.ghost-button,
html .secondary-button,
html button.secondary-button,
html a.secondary-button{
  min-height: 54px !important;
  border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--line)) !important;
  border-radius: 20px !important;
  color: var(--text) !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface-2) 94%, transparent), color-mix(in srgb, var(--surface) 92%, transparent)) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, white 8%, transparent),
    0 14px 30px rgba(0, 0, 0, .08) !important;
  font-weight: 840 !important;
  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease !important;
}

html .ghost-button:hover,
html button.ghost-button:hover,
html a.ghost-button:hover,
html .secondary-button:hover,
html button.secondary-button:hover,
html a.secondary-button:hover,
html .ghost-button:focus-visible,
html button.ghost-button:focus-visible,
html a.ghost-button:focus-visible,
html .secondary-button:focus-visible,
html button.secondary-button:focus-visible,
html a.secondary-button:focus-visible{
  transform: translateY(-2px) !important;
  border-color: color-mix(in srgb, var(--primary) 48%, var(--line)) !important;
  box-shadow:
    0 20px 38px rgba(0, 0, 0, .14),
    0 0 0 4px color-mix(in srgb, var(--primary) 10%, transparent) !important;
}

html button:disabled,
html .primary-button:disabled,
html .ghost-button:disabled,
html .secondary-button:disabled{
  opacity: .48 !important;
  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}

html .field-help-button,
html .nav-menu-toggle{
  min-height: unset !important;
}


@media (max-width: 1060px){
  html .tool-first-home .single-mobile-step-actions .ghost-button,
  html .tool-first-home .single-mobile-step-actions .primary-button,
  html .bulk-mobile-step-actions .ghost-button,
  html .bulk-mobile-step-actions .primary-button {
    min-height: 48px !important;
    height: 48px !important;
  }
}


html{
  --icon-arrow-right: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22black%22 d=%22M13.17 5.17a1 1 0 0 1 1.41 0l6.12 6.12a1 1 0 0 1 0 1.42l-6.12 6.12a1 1 0 1 1-1.41-1.42L17.58 13H4a1 1 0 1 1 0-2h13.59l-4.42-4.41a1 1 0 0 1 0-1.42Z%22/%3E%3C/svg%3E");
  --icon-arrow-left: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22black%22 d=%22M10.83 18.83a1 1 0 0 1-1.41 0L3.3 12.71a1 1 0 0 1 0-1.42l6.12-6.12a1 1 0 1 1 1.41 1.42L6.42 11H20a1 1 0 1 1 0 2H6.41l4.42 4.41a1 1 0 0 1 0 1.42Z%22/%3E%3C/svg%3E");
  --icon-download: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22black%22 d=%22M12 3a1 1 0 0 1 1 1v9.59l3.3-3.3a1 1 0 1 1 1.4 1.42l-5 5a1 1 0 0 1-1.4 0l-5-5a1 1 0 0 1 1.4-1.42l3.3 3.3a1 1 0 0 1 1-1Zm-7 15a1 1 0 0 1 1 1v1h12v-1a1 1 0 1 1 2 0v2a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1Z%22/%3E%3C/svg%3E");
  --icon-batch: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20fill=%22black%22%20d=%22M4%204h7v7H4V4Zm9%200h7v7h-7V4ZM4%2013h7v7H4v-7Zm9%200h7v7h-7v-7Z%22/%3E%3C/svg%3E");
  --icon-heart: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22black%22 d=%22M12 20.7 10.55 19.4C5.4 14.77 2 11.7 2 7.93 2 5.1 4.24 3 7.08 3c1.6 0 3.12.75 4.08 1.93C12.12 3.75 13.64 3 15.24 3 18.08 3 20.32 5.1 20.32 7.93c0 3.77-3.4 6.84-8.55 11.47L12 20.7Z%22/%3E%3C/svg%3E");
  --icon-page: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22black%22 d=%22M6 2h8l5 5v15H6a2 2 0 0 1-2-2a2 2 0 0 1 2-2Zm7 2H6v16h11h-4Zm-4 8h6a1 1 0 1 1 0 2H9a1 1 0 1 1 0-2Zm0 4h6a1 1 0 1 1 0 2H9a1 1 0 1 1 0-2Z%22/%3E%3C/svg%3E");
  --icon-external: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22black%22 d=%22M14 4a1 1 0 1 1 0-2h7a1 1 0 0 1 1 1v7a1 1 0 1 1-2 0.41l-9.3 9.3a1 1 0 0 1-1.4-1.42l9.29-9.29H14ZM5 5h5a1 1 0 1 1 0 2H5v12h12v-5a1 1 0 1 1 2 0v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2a2 2 0 0 1 2-2Z%22/%3E%3C/svg%3E");
  --icon-copy: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20fill=%22black%22%20d=%22M9%208.5A2.5%202.5%200%200%201%2011.5%206H18a2.5%202.5%200%200%201%202.5%202.5V18a2.5%202.5%200%200%201-2.5%202.5h-6.5A2.5%202.5%200%200%201%209%2018V8.5Zm2.5-.5a.5.5%200%200%200-.5.5V18c0%20.28.22.5.5.5H18a.5.5%200%200%200%20.5-.5V8.5A.5.5%200%200%200%2018%208h-6.5ZM5.5%203.5H14a2.5%202.5%200%200%201%202.45%202H14a.5.5%200%200%200-.5-.5h-8a.5.5%200%200%200-.5.5v9c0%20.28.22.5.5.5H7v2H5.5A2.5%202.5%200%200%201%203%2014.5v-9A2.5%202.5%200%200%201%205.5%203.5Z%22/%3E%3C/svg%3E");
}

@keyframes primary-gradient-sweep {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}


@media (min-width: 1061px){
  

  html .tool-first-home .guided-form-panel {
    grid-template-rows: auto minmax(0, 1fr) auto !important;
  }

  html .tool-first-home .guided-panel-heading {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }

  html .tool-first-home .guided-progress-four {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  html .tool-first-home .guided-step-stack {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: start !important;
  }

  html .tool-first-home .guided-actions {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
  }

  
  html .tool-first-home .guided-progress-four,
  html .tool-first-home .guided-progress {
    border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line)) !important;
    border-color: color-mix(in srgb, var(--primary) 18%, var(--line)) !important;
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb, var(--primary) 5%, transparent),
      0 18px 36px rgba(0, 0, 0, .10) !important;
  }

  html .tool-first-home .guided-progress-four .guided-progress-step,
  html .tool-first-home .guided-progress .guided-progress-step {
    border: 0 !important;
    border-color: transparent !important;
    outline: 0 !important;
  }
}


html .primary-button,
html button.primary-button,
html a.primary-button{
  background-image: linear-gradient(
    120deg,
    #64f5e6 0%,
    #2edec9 28%,
    #14b8a6 52%,
    #51ead9 76%,
    #64f5e6 100%
  ) !important;
  background-size: 220% 220% !important;
  animation: primary-gradient-sweep 5.4s ease-in-out infinite !important;
}

@media (prefers-reduced-motion: reduce) {
  html .primary-button,
html button.primary-button,
html a.primary-button{
    animation: none !important;
  }
}


html :is(
  #singleGuidedBack,
  #singleGuidedNext,
  [data-single-mobile-back],
  [data-single-mobile-next],
  [data-bulk-back],
  [data-bulk-next],
  [data-i18n="guidedBack"],
  [data-i18n="guidedContinue"],
  [data-i18n="guidedSupport"],
  .download-unified-button,
  [data-i18n="singleBatchCtaButton"],
  [data-i18n="homeBulkCta"],
  [data-i18n="checkerOpenLink"],
  [data-i18n="supportKofiOpen"],
  [data-i18n^="download"],
  [data-i18n^="bulkDownload"],
  [data-i18n^="studioDownload"],
  [data-i18n^="rebuilderDownload"],
  [data-i18n="extractorExportCsv"]
){
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .62rem !important;
}

html :is(
  #singleGuidedBack,
  [data-single-mobile-back],
  [data-bulk-back],
  [data-i18n="guidedBack"]
)::before,
html :is(
  #singleGuidedNext,
  [data-single-mobile-next],
  [data-bulk-next],
  [data-i18n="guidedContinue"]
)::after,
html [data-i18n="guidedSupport"]::before,
html .download-unified-button::before,
html :is(
  [data-i18n^="download"],
  [data-i18n^="bulkDownload"],
  [data-i18n^="studioDownload"],
  [data-i18n^="rebuilderDownload"],
  [data-i18n="extractorExportCsv"]
)::before,
html :is(
  [data-i18n="singleBatchCtaButton"],
  [data-i18n="homeBulkCta"]
)::before,
html :is(
  [data-i18n="checkerOpenLink"],
  [data-i18n="supportKofiOpen"]
)::after{
  content: "" !important;
  display: inline-block !important;
  flex: 0 0 auto !important;
  width: 1.05rem !important;
  height: 1.05rem !important;
  background-color: currentColor !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
}

html :is(
  #singleGuidedBack,
  [data-single-mobile-back],
  [data-bulk-back],
  [data-i18n="guidedBack"]
)::before{
  -webkit-mask-image: var(--icon-arrow-left) !important;
  mask-image: var(--icon-arrow-left) !important;
}

html :is(
  #singleGuidedNext,
  [data-single-mobile-next],
  [data-bulk-next],
  [data-i18n="guidedContinue"]
)::after{
  -webkit-mask-image: var(--icon-arrow-right) !important;
  mask-image: var(--icon-arrow-right) !important;
}

html [data-i18n="guidedSupport"]::before{
  -webkit-mask-image: var(--icon-heart) !important;
  mask-image: var(--icon-heart) !important;
}

html .download-unified-button::before,
html :is(
  [data-i18n^="download"],
  [data-i18n^="bulkDownload"],
  [data-i18n^="studioDownload"],
  [data-i18n^="rebuilderDownload"],
  [data-i18n="extractorExportCsv"]
)::before{
  -webkit-mask-image: var(--icon-download) !important;
  mask-image: var(--icon-download) !important;
}

html :is(
  [data-i18n="singleBatchCtaButton"],
  [data-i18n="homeBulkCta"]
)::before{
  -webkit-mask-image: var(--nav-icon-mask) !important;
  mask-image: var(--nav-icon-mask) !important;
}

html :is(
  [data-i18n="checkerOpenLink"],
  [data-i18n="supportKofiOpen"]
)::after{
  -webkit-mask-image: var(--icon-external) !important;
  mask-image: var(--icon-external) !important;
}


html :is(
  .download-menu button,
  [role="menuitem"][data-i18n^="download"],
  [role="menuitem"][data-i18n^="bulkDownload"],
  [role="menuitem"][data-i18n^="studioDownload"],
  [role="menuitem"][data-i18n^="rebuilderDownload"]
){
  justify-content: flex-start !important;
}


html .single-batch-cta-button{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .68rem !important;
}


html{
  --icon-heart: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22black%22 d=%22M12 20.7 10.55 19.4C5.4 14.77 2 11.7 2 7.93 2 5.1 4.24 3 7.08 3c1.6 0 3.12.75 4.08 1.93C12.12 3.75 13.64 3 15.24 3 18.08 3 20.32 5.1 20.32 7.93c0 3.77-3.4 6.84-8.55 11.47L12 20.7Z%22/%3E%3C/svg%3E");
  --icon-copy: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22black%22 d=%22M9 8.5A2.5 2.5 0 0 1 11.5 6H18a2.5 2.5 0 0 1 2.5 2.5a2.5 2.5 0 0 1-2.5 2.5h-6.5A2.5 2.5 0 0 1 9 18.5Zm2.5-.5a.5.5 0 0 0-.5.5c0 .28.22.5.5.5H18a.5.5 0 0 0 .5-.5.5A.5.5 0 0 0 18 8h-6.5ZM5.5 3.5H14a2.5 2.5 0 0 1 2.45 2H14a.5.5 0 0 0-.5-.5h-8a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5H7v2H5.5A2.5 2.5 0 0 1 3 14.5v-9A2.5 2.5 0 0 1 5.5 3.5Z%22/%3E%3C/svg%3E");
  --icon-download: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22black%22 d=%22M12 3a1 1 0 0 1 1 1v9.59l3.3-3.3a1 1 0 1 1 1.4 1.42l-5 5a1 1 0 0 1-1.4 0l-5-5a1 1 0 0 1 1.4-1.42l3.3 3.3a1 1 0 0 1 1-1Zm-7 15a1 1 0 0 1 1 1v1h12v-1a1 1 0 1 1 2 0v2a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1Z%22/%3E%3C/svg%3E");
}


@media (min-width: 1061px){
  html :is(
    .guided-progress-four,
    .guided-progress,
    .guided-progress.guided-progress,
    .studio-guided-progress
  ) {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: stretch !important;
    gap: 0 !important;
  }
}


html .single-final-download-slot{
  display: none;
  min-width: 0;
}

html .single-final-download-slot .guided-downloads{
  width: 100% !important;
  margin: 0 !important;
}

html .single-final-download-slot .download-unified{
  width: 100% !important;
}

html body[data-single-guided-step="4"] .single-final-download-slot{
  display: block !important;
}

@media (min-width: 1061px) {
  html .single-final-download-slot--desktop{
    width: min(360px, 100%) !important;
    justify-self: end !important;
  }

  html body[data-single-guided-step="4"] .tool-first-home .guided-actions{
    grid-template-columns: minmax(120px, auto) minmax(240px, 360px) !important;
    justify-content: end !important;
    align-items: center !important;
    gap: 12px !important;
  }

  html body[data-single-guided-step="4"] #singleGuidedNext{
    display: none !important;
  }
}

@media (max-width: 1060px) {
  html .single-final-download-slot--mobile{
    width: 100% !important;
  }

  html .single-final-download-slot--mobile .download-unified-button{
    min-height: 48px !important;
    height: 48px !important;
    border-radius: 18px !important;
  }

  html .bulk-mobile-final-download::before{
    content: "" !important;
    display: inline-block !important;
    width: 1.05rem !important;
    height: 1.05rem !important;
    flex: 0 0 auto !important;
    background-color: currentColor !important;
    -webkit-mask-image: var(--icon-download) !important;
    mask-image: var(--icon-download) !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
  }
}

.single-download-parking{
  display: none !important;
}


body.support-modal-open{
  overflow: hidden !important;
}

.support-thanks-overlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: clamp(14px, 3vw, 28px);
  background: rgba(7, 13, 12, .72);
  backdrop-filter: blur(18px);
}

.support-thanks-overlay[hidden]{
  display: none !important;
}

.support-thanks-modal{
  position: relative;
  width: min(960px, 100%);
  max-height: min(90vh, 900px);
  overflow: auto;
  display: grid;
  gap: 18px;
  padding: clamp(20px, 3vw, 34px);
  border: 1px solid color-mix(in srgb, var(--primary) 34%, var(--line));
  border-radius: clamp(26px, 3vw, 38px);
  background:
    radial-gradient(circle at 14% 10%, color-mix(in srgb, var(--primary) 22%, transparent), transparent 24rem),
    radial-gradient(circle at 88% 18%, rgba(255, 180, 95, .12), transparent 20rem),
    color-mix(in srgb, var(--surface) 96%, transparent);
  box-shadow:
    0 40px 120px rgba(0, 0, 0, .48),
    inset 0 0 0 1px color-mix(in srgb, white 6%, transparent);
}

.support-modal-close{
  position: absolute;
  top: 16px;
  right: 16px;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-2) 92%, transparent);
  color: var(--text);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
}

.support-modal-heading{
  display: flex;
  align-items: center;
  gap: 16px;
  padding-right: 56px;
}

.support-modal-heart{
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  color: #06201d;
  background: linear-gradient(135deg, #61f3e3, #14b8a6);
  box-shadow: 0 18px 36px rgba(20, 184, 166, .28);
  font-size: 1.65rem;
}

.support-modal-heading .section-kicker,
.support-modal-heading h2,
.support-modal-success,
.support-modal-note,
.support-modal-crypto-copy h3,
.support-modal-crypto-copy p,
.support-modal-status{
  margin: 0;
}

.support-modal-heading h2{
  font-size: clamp(1.55rem, 3vw, 2.5rem);
  line-height: 1.04;
  letter-spacing: -.055em;
}

.support-modal-success{
  font-weight: 850;
  font-size: clamp(1rem, 1.5vw, 1.16rem);
}

.support-modal-note{
  max-width: 74ch;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.55;
}

.support-modal-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.support-modal-actions :is(.primary-button, .secondary-button, .ghost-button){
  min-width: min(100%, 190px);
}

.support-modal-kofi::before{
  content: "" !important;
  width: 1.08rem;
  height: 1.08rem;
  display: inline-block;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask-image: var(--icon-heart);
  mask-image: var(--icon-heart);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.support-modal-crypto{
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: color-mix(in srgb, var(--surface-2) 82%, transparent);
}

.support-modal-crypto-copy{
  display: grid;
  gap: 4px;
}

.support-modal-crypto-copy h3{
  font-size: 1.12rem;
}

.support-modal-crypto-copy p{
  color: var(--muted);
  line-height: 1.45;
}

.support-modal-wallet-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 255px), 1fr));
  gap: 10px;
}

.support-modal-wallet{
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line));
  border-radius: 20px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.support-modal-wallet:hover,
.support-modal-wallet:focus-visible{
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 48%, var(--line));
  box-shadow: 0 18px 34px rgba(0, 0, 0, .12);
}

.support-modal-wallet-symbol{
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  color: var(--primary);
  border: 1px solid color-mix(in srgb, var(--primary) 36%, var(--line));
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  font-weight: 950;
  letter-spacing: .03em;
}

.support-modal-wallet-meta{
  min-width: 0;
  display: grid;
  gap: 3px;
}

.support-modal-wallet-meta strong,
.support-modal-wallet-meta small{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.support-modal-wallet-meta small{
  color: var(--muted);
  font-size: .78rem;
}

.support-modal-wallet-copy{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--primary);
  font-weight: 850;
  font-size: .84rem;
}

.support-modal-wallet-copy::before{
  content: "";
  width: .95rem;
  height: .95rem;
  display: inline-block;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask-image: var(--icon-copy);
  mask-image: var(--icon-copy);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.support-modal-status{
  min-height: 1.4em;
  color: var(--primary);
  font-weight: 800;
}

@media (max-width: 720px) {
  .support-thanks-modal{
    max-height: calc(100vh - 22px);
    padding: 18px;
    gap: 14px;
  }

  .support-modal-heading{
    align-items: flex-start;
  }

  .support-modal-heart{
    width: 52px;
    height: 52px;
    border-radius: 18px;
  }

  .support-modal-actions{
    display: grid;
    grid-template-columns: 1fr;
  }

  .support-modal-actions :is(.primary-button, .secondary-button, .ghost-button){
    width: 100%;
  }

  .support-modal-wallet{
    grid-template-columns: auto minmax(0, 1fr);
  }

  .support-modal-wallet-copy{
    grid-column: 2;
  }
}


html .download-unified-button > span[data-i18n="downloadAction"]::before,
html .download-unified-button > span[data-i18n^="download"]::before{
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}


html .download-unified-button::before{
  display: inline-block !important;
}


@media (min-width: 1061px){
  html body[data-single-guided-step="4"] .tool-first-home .guided-actions {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px !important;
    grid-template-columns: none !important;
  }

  html body[data-single-guided-step="4"] .tool-first-home #singleGuidedBack {
    flex: 0 0 auto !important;
    justify-self: start !important;
    margin-right: auto !important;
  }

  html body[data-single-guided-step="4"] .tool-first-home .single-final-download-slot--desktop {
    flex: 0 1 min(360px, 100%) !important;
    width: min(360px, 100%) !important;
    max-width: 360px !important;
    margin-left: auto !important;
    justify-self: end !important;
  }
}


html .builder-story-section,
html .use-explorer-section,
html .static-compare-section,
html .real-world-section,
html .scan-confidence-section,
html .guide-teaser-header{
  position: relative;
}

html .builder-story-header,
html .use-explorer-header,
html .static-compare-copy,
html .real-world-copy,
html .guide-teaser-header{
  max-width: 900px;
}

html .builder-flow-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 22px);
}

html .builder-flow-card{
  position: relative;
  overflow: hidden;
  min-height: 318px;
  padding: clamp(20px, 2.6vw, 28px);
  border: 1px solid var(--line);
  border-radius: 30px;
  background:
    radial-gradient(circle at 82% 18%, rgba(249, 115, 22, 0.12), transparent 18rem),
    radial-gradient(circle at 18% 84%, rgba(15, 118, 110, 0.12), transparent 18rem),
    var(--surface);
  box-shadow: 0 22px 62px rgba(20, 33, 29, 0.08);
  transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease;
}

html .builder-flow-card:hover,
html .builder-flow-card:focus-within{
  transform: translateY(-4px);
  border-color: rgba(15, 118, 110, 0.36);
  box-shadow: 0 28px 72px rgba(20, 33, 29, 0.12);
}

html .builder-flow-step{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  min-height: 36px;
  margin-bottom: 18px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(15, 118, 110, 0.11);
  border: 1px solid rgba(15, 118, 110, 0.18);
  color: var(--primary);
  font-weight: 950;
  letter-spacing: .08em;
}

html .builder-flow-card h3,
html .compare-card h3,
html .real-world-points h3,
html .guide-teaser-card h3{
  margin-bottom: 10px;
  line-height: 1.08;
  letter-spacing: -0.035em;
}

html .builder-flow-card p,
html .compare-card li,
html .real-world-points p,
html .guide-teaser-card p,
html .scan-confidence-intro{
  color: var(--muted);
}

html .builder-flow-card p,
html .real-world-points p,
html .guide-teaser-card p{
  margin-bottom: 0;
}

html .builder-flow-art{
  position: relative;
  display: grid;
  align-items: center;
  min-height: 114px;
  margin: 2px 0 22px;
  border: 1px solid rgba(15, 118, 110, 0.14);
  border-radius: 24px;
  background: rgba(15, 118, 110, 0.06);
}

html .builder-flow-art-content{
  gap: 10px;
  padding: 18px;
}

html .builder-flow-art-content span{
  display: block;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(15, 118, 110, 0.88), rgba(249, 115, 22, 0.58));
  transform-origin: left center;
  animation: flowTyping 3.4s ease-in-out infinite;
}

html .builder-flow-art-content span:nth-child(1){ width: 82%; }
html .builder-flow-art-content span:nth-child(2){ width: 66%; animation-delay: .22s; }
html .builder-flow-art-content span:nth-child(3){ width: 74%; animation-delay: .44s; }

html .builder-flow-art-style{
  grid-template-columns: repeat(2, 42px);
  justify-content: center;
  gap: 14px;
}

html .builder-flow-art-style span{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: rgba(15, 118, 110, 0.82);
  box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.22);
  animation: flowTiles 3.8s ease-in-out infinite;
}

html .builder-flow-art-style span:nth-child(2){ border-radius: 999px; animation-delay: .18s; }
html .builder-flow-art-style span:nth-child(3){ border-radius: 18px 6px 18px 6px; animation-delay: .36s; }
html .builder-flow-art-style span:nth-child(4){ background: rgba(249, 115, 22, 0.78); animation-delay: .54s; }

html .builder-flow-art-export{
  display: grid;
  place-items: center;
}

html .builder-flow-art-export span{
  position: relative;
  width: 68px;
  height: 68px;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 18px 38px rgba(15, 118, 110, 0.24);
  animation: downloadPulse 3.4s ease-in-out infinite;
}

html .builder-flow-art-export span::before,
html .builder-flow-art-export span::after{
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
}

html .builder-flow-art-export span::before{
  top: 17px;
  width: 5px;
  height: 27px;
  border-radius: 999px;
}

html .builder-flow-art-export span::after{
  bottom: 18px;
  width: 22px;
  height: 12px;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}

html .use-explorer-section{
  overflow: hidden;
}

html .use-explorer-section::before,
html .static-compare-shell::before{
  content: "";
  position: absolute;
  inset: auto auto -18rem -14rem;
  width: 34rem;
  height: 34rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(249, 115, 22, 0.18), transparent 66%);
  filter: blur(1px);
  opacity: .9;
  animation: ambientDrift 12s ease-in-out infinite;
  pointer-events: none;
}

html .use-explorer-section::after{
  content: "";
  position: absolute;
  top: -18rem;
  right: -14rem;
  width: 36rem;
  height: 36rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(15, 118, 110, 0.24), transparent 66%);
  animation: ambientDriftReverse 15s ease-in-out infinite;
  pointer-events: none;
}

html .use-explorer-section > .container{
  position: relative;
  z-index: 1;
}

html .use-explorer-grid{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

html .use-explorer-card{
  position: relative;
  min-height: 222px;
  padding: 22px;
  gap: 12px;
  transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease;
}

html .use-explorer-card::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 88% 14%, rgba(254, 215, 170, 0.16), transparent 9rem),
    linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.03));
  opacity: 0;
  transition: opacity .22s ease;
  pointer-events: none;
}

html .use-explorer-card:hover,
html .use-explorer-card:focus-visible{
  transform: translateY(-4px);
  border-color: rgba(254, 215, 170, 0.34);
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.16);
  outline: none;
}

html .use-explorer-card:hover::after,
html .use-explorer-card:focus-visible::after{
  opacity: 1;
}

html .use-explorer-card strong,
html .use-explorer-card span,
html .use-explorer-card em{
  position: relative;
  z-index: 1;
}

html .use-explorer-card strong{
  display: block;
  font-size: 1.08rem;
  line-height: 1.14;
  letter-spacing: -0.025em;
}

html .use-explorer-card span{
  display: block;
  color: rgba(255, 255, 255, 0.76);
  font-weight: 650;
  line-height: 1.5;
}

html .use-explorer-card em{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin-top: auto;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(254, 215, 170, 0.13);
  border: 1px solid rgba(254, 215, 170, 0.2);
  color: #fed7aa;
  font-size: .84rem;
  font-style: normal;
  font-weight: 850;
}

html .static-compare-shell{
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(390px, .98fr);
  gap: clamp(22px, 4vw, 44px);
  align-items: start;
  overflow: hidden;
  padding: clamp(24px, 4vw, 42px);
  border: 1px solid var(--line);
  border-radius: 38px;
  background:
    radial-gradient(circle at 78% 15%, rgba(249, 115, 22, 0.12), transparent 24rem),
    radial-gradient(circle at 10% 90%, rgba(15, 118, 110, 0.12), transparent 24rem),
    var(--surface);
  box-shadow: 0 28px 82px rgba(20, 33, 29, 0.08);
}

html .static-compare-shell::before{
  left: auto;
  right: -17rem;
  bottom: -21rem;
  width: 40rem;
  height: 40rem;
  background: radial-gradient(circle, rgba(15, 118, 110, 0.18), transparent 68%);
}

html .static-compare-copy,
html .compare-grid{
  position: relative;
  z-index: 1;
}

html .qr-route-diagram{
  display: grid;
  gap: 12px;
  margin-top: 24px;
}

html .qr-route{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface-2);
}

html .qr-route span,
html .qr-route b,
html .qr-route strong{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  font-weight: 850;
}

html .qr-route span{
  background: rgba(15, 118, 110, 0.10);
  color: var(--primary);
}

html .qr-route b{
  background: rgba(249, 115, 22, 0.12);
  color: var(--accent, #f97316);
}

html .qr-route strong{
  background: rgba(15, 118, 110, 0.16);
  color: var(--text);
}

html .qr-route i{
  position: relative;
  flex: 1 1 42px;
  min-width: 42px;
  height: 2px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(15, 118, 110, 0.18);
}

html .qr-route i::after{
  content: "";
  position: absolute;
  inset: 0 auto 0 -35%;
  width: 35%;
  background: linear-gradient(90deg, transparent, rgba(15, 118, 110, 0.92), transparent);
  animation: routeSweep 2.8s ease-in-out infinite;
}

html .qr-route-dynamic i::after{
  animation-delay: .4s;
}

html .compare-grid{
  display: grid;
  gap: 16px;
}

html .compare-card{
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--surface-2);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

html .compare-card:hover{
  transform: translateY(-3px);
  border-color: rgba(15, 118, 110, 0.28);
  box-shadow: 0 22px 52px rgba(20, 33, 29, 0.08);
}

html .compare-card-static{
  background: linear-gradient(135deg, rgba(15, 118, 110, 0.10), rgba(15, 118, 110, 0.03)), var(--surface-2);
}

html .compare-card-dynamic{
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.09), rgba(249, 115, 22, 0.02)), var(--surface-2);
}

html .compare-pill{
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  margin-bottom: 14px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(15, 118, 110, 0.12);
  border: 1px solid rgba(15, 118, 110, 0.18);
  color: var(--primary);
  font-size: .82rem;
  font-weight: 950;
  letter-spacing: .02em;
}

html .compare-card-dynamic .compare-pill{
  background: rgba(249, 115, 22, 0.12);
  border-color: rgba(249, 115, 22, 0.18);
  color: #ea580c;
}

html .compare-card ul{
  display: grid;
  gap: 11px;
  margin: 0;
  padding-left: 18px;
}

html .real-world-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .92fr);
  gap: clamp(24px, 4vw, 54px);
  align-items: center;
}

html .real-world-points{
  display: grid;
  gap: 14px;
  margin-top: 26px;
}

html .real-world-points article{
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: 0 16px 42px rgba(20, 33, 29, 0.06);
}

html .real-world-collage{
  position: relative;
  min-height: 530px;
  border: 1px solid var(--line);
  border-radius: 40px;
  background:
    radial-gradient(circle at 72% 18%, rgba(249, 115, 22, 0.18), transparent 18rem),
    radial-gradient(circle at 22% 74%, rgba(15, 118, 110, 0.18), transparent 18rem),
    var(--surface);
  box-shadow: 0 30px 86px rgba(20, 33, 29, 0.10);
  overflow: hidden;
}

html .mockup-sheet{
  position: absolute;
  display: grid;
  place-items: end start;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.80));
  box-shadow: 0 24px 56px rgba(20, 33, 29, 0.16);
  color: #10211d;
  font-weight: 950;
  letter-spacing: -0.03em;
  animation: floatSheets 7s ease-in-out infinite;
}

html .mockup-sheet::before{
  content: "";
  position: absolute;
  inset: 18px 18px auto 18px;
  height: 58px;
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(15, 118, 110, 0.14), transparent),
    rgba(15, 118, 110, 0.08);
}

html .mockup-menu{
  --mockup-rotate: -8deg;
  top: 40px;
  left: 36px;
  width: 210px;
  height: 252px;
  transform: rotate(var(--mockup-rotate));
}

html .mockup-label{
  --mockup-rotate: 8deg;
  top: 58px;
  right: 38px;
  width: 182px;
  height: 168px;
  transform: rotate(var(--mockup-rotate));
  animation-delay: .6s;
}

html .mockup-card{
  --mockup-rotate: 6deg;
  left: 52px;
  bottom: 54px;
  width: 230px;
  height: 138px;
  transform: rotate(var(--mockup-rotate));
  animation-delay: 1.2s;
}

html .mockup-poster{
  --mockup-rotate: -6deg;
  right: 42px;
  bottom: 40px;
  width: 210px;
  height: 276px;
  transform: rotate(var(--mockup-rotate));
  animation-delay: 1.8s;
}

html .mockup-qr{
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: clamp(164px, 18vw, 202px);
  height: clamp(164px, 18vw, 202px);
  padding: 13px;
  border: 1px solid rgba(15, 118, 110, 0.16);
  border-radius: 30px;
  background: #fff;
  box-shadow: 0 28px 70px rgba(20, 33, 29, 0.22);
  transform: translate(-50%, -50%);
  animation: qrHover 5.8s ease-in-out infinite;
}

html .scan-confidence-section{
  grid-template-columns: minmax(0, .98fr) minmax(360px, 1.02fr);
  align-items: stretch;
}

html .scan-confidence-intro{
  max-width: 600px;
  margin-bottom: 24px;
  font-size: 1.03rem;
}

html .scan-callout-stage{
  padding: clamp(18px, 3vw, 24px);
  border: 1px solid var(--line);
  border-radius: 34px;
  background:
    radial-gradient(circle at 80% 18%, rgba(249, 115, 22, 0.13), transparent 16rem),
    radial-gradient(circle at 12% 88%, rgba(15, 118, 110, 0.14), transparent 16rem),
    var(--surface);
  box-shadow: 0 24px 64px rgba(20, 33, 29, 0.08);
}

html .scan-qr-board{
  position: relative;
  display: grid;
  place-items: center;
  min-height: 420px;
  overflow: hidden;
  border-radius: 28px;
  background: rgba(15, 118, 110, 0.05);
  border: 1px dashed rgba(15, 118, 110, 0.16);
}

html .scan-qr-image{
  width: min(260px, 62vw);
  height: min(260px, 62vw);
  padding: 16px;
  border: 1px solid rgba(15, 118, 110, 0.14);
  border-radius: 30px;
  background: #fff;
  box-shadow: 0 28px 68px rgba(20, 33, 29, 0.16);
}

html .scan-callout{
  position: absolute;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(15, 118, 110, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 34px rgba(20, 33, 29, 0.12);
  color: #10211d;
  font-size: .84rem;
  font-weight: 900;
  white-space: nowrap;
}

html .scan-callout::after{
  content: "";
  position: absolute;
  height: 2px;
  width: 86px;
  background: linear-gradient(90deg, rgba(15, 118, 110, 0.88), transparent);
  animation: calloutDraw 3.2s ease-in-out infinite;
}

html .scan-callout-quiet{ top: 48px; left: 28px; }
html .scan-callout-quiet::after{ top: 50%; left: 100%; }
html .scan-callout-contrast{ top: 88px; right: 24px; }
html .scan-callout-contrast::after{ top: 50%; right: 100%; transform: scaleX(-1); }
html .scan-callout-logo{ left: 24px; bottom: 102px; }
html .scan-callout-logo::after{ top: 50%; left: 100%; }
html .scan-callout-export{ right: 28px; bottom: 58px; }
html .scan-callout-export::after{ top: 50%; right: 100%; transform: scaleX(-1); }

html .scan-tip-list{
  align-content: start;
  gap: 14px;
}

html .scan-tip-list p{
  min-height: 92px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

html .scan-tip-list p:hover{
  transform: translateY(-3px);
  border-color: rgba(15, 118, 110, 0.24);
  box-shadow: 0 20px 44px rgba(20, 33, 29, 0.08);
}

html .guide-teaser-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

html .guide-teaser-card{
  position: relative;
  overflow: hidden;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background:
    radial-gradient(circle at 84% 18%, rgba(15, 118, 110, 0.10), transparent 12rem),
    var(--surface);
  box-shadow: 0 18px 48px rgba(20, 33, 29, 0.06);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

html .guide-teaser-card:hover{
  transform: translateY(-3px);
  border-color: rgba(15, 118, 110, 0.24);
  box-shadow: 0 24px 56px rgba(20, 33, 29, 0.10);
}

html .guide-teaser-icon{
  display: inline-grid;
  place-items: center;
  width: 50px;
  height: 50px;
  margin-bottom: 18px;
  border-radius: 18px;
  background: rgba(15, 118, 110, 0.12);
  color: var(--primary);
  font-size: 1.3rem;
  font-weight: 950;
}

html .guide-teaser-strip{
  margin-top: 18px;
}

html .ui-reveal .builder-flow-card,
html .ui-reveal .use-explorer-card,
html .ui-reveal .compare-card,
html .ui-reveal .real-world-points article,
html .ui-reveal .guide-teaser-card,
html .ui-reveal .scan-callout{
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s ease, transform .5s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
}

html .ui-reveal.is-visible .builder-flow-card,
html .ui-reveal.is-visible .use-explorer-card,
html .ui-reveal.is-visible .compare-card,
html .ui-reveal.is-visible .real-world-points article,
html .ui-reveal.is-visible .guide-teaser-card,
html .ui-reveal.is-visible .scan-callout{
  opacity: 1;
  transform: translateY(0);
}

html .ui-reveal.is-visible .builder-flow-card:nth-child(2),
html .ui-reveal.is-visible .use-explorer-card:nth-child(2),
html .ui-reveal.is-visible .compare-card:nth-child(2),
html .ui-reveal.is-visible .real-world-points article:nth-child(2),
html .ui-reveal.is-visible .guide-teaser-card:nth-child(2),
html .ui-reveal.is-visible .scan-callout:nth-of-type(2){ transition-delay: .08s; }

html .ui-reveal.is-visible .builder-flow-card:nth-child(3),
html .ui-reveal.is-visible .use-explorer-card:nth-child(3),
html .ui-reveal.is-visible .real-world-points article:nth-child(3),
html .ui-reveal.is-visible .guide-teaser-card:nth-child(3),
html .ui-reveal.is-visible .scan-callout:nth-of-type(3){ transition-delay: .16s; }

html .ui-reveal.is-visible .use-explorer-card:nth-child(4),
html .ui-reveal.is-visible .scan-callout:nth-of-type(4){ transition-delay: .24s; }
html .ui-reveal.is-visible .use-explorer-card:nth-child(5){ transition-delay: .32s; }
html .ui-reveal.is-visible .use-explorer-card:nth-child(6){ transition-delay: .40s; }
html .ui-reveal.is-visible .use-explorer-card:nth-child(7){ transition-delay: .48s; }
html .ui-reveal.is-visible .use-explorer-card:nth-child(8){ transition-delay: .56s; }
html .ui-reveal.is-visible .use-explorer-card:nth-child(9){ transition-delay: .64s; }

@keyframes flowTyping {
  0%, 100% { transform: scaleX(.68); opacity: .74; }
  45% { transform: scaleX(1); opacity: 1; }
}

@keyframes flowTiles {
  0%, 100% { transform: translateY(0) scale(1); }
  42% { transform: translateY(-4px) scale(1.05); }
}

@keyframes downloadPulse {
  0%, 100% { transform: translateY(0) scale(1); }
  48% { transform: translateY(-5px) scale(1.05); }
}

@keyframes ambientDrift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(24px, -18px, 0) scale(1.04); }
}

@keyframes ambientDriftReverse {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-24px, 20px, 0) scale(1.04); }
}

@keyframes routeSweep {
  0% { transform: translateX(0); opacity: 0; }
  18% { opacity: 1; }
  82% { opacity: 1; }
  100% { transform: translateX(390%); opacity: 0; }
}

@keyframes floatSheets {
  0%, 100% { transform: translateY(0) rotate(var(--mockup-rotate, 0deg)); }
  50% { transform: translateY(-8px) rotate(var(--mockup-rotate, 0deg)); }
}

@keyframes qrHover {
  0%, 100% { transform: translate(-50%, -50%) translateY(0); }
  50% { transform: translate(-50%, -50%) translateY(-8px); }
}

@keyframes calloutDraw {
  0%, 100% { opacity: .52; width: 62px; }
  52% { opacity: 1; width: 92px; }
}

@media (max-width: 1100px) {
  html .builder-flow-grid,
html .use-explorer-grid,
html .guide-teaser-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  html .static-compare-shell,
html .real-world-grid,
html .scan-confidence-section{
    grid-template-columns: 1fr;
  }

  html .real-world-collage{
    max-width: 720px;
    width: 100%;
    margin: 0 auto;
  }
}

@media (max-width: 760px) {
  html .builder-flow-grid,
html .use-explorer-grid,
html .guide-teaser-grid{
    grid-template-columns: 1fr;
  }

  html .builder-flow-card{
    min-height: 0;
  }

  html .static-compare-shell{
    min-width: 0;
    padding: 22px;
    border-radius: 30px;
  }

  html .qr-route{
    align-items: stretch;
  }

  html .qr-route i{
    flex-basis: 100%;
    min-height: 2px;
  }

  html .real-world-collage{
    min-height: 430px;
    border-radius: 32px;
  }

  html .mockup-menu{
    top: 28px;
    left: 20px;
    width: 170px;
    height: 220px;
  }

  html .mockup-label{
    top: 34px;
    right: 18px;
    width: 146px;
    height: 138px;
  }

  html .mockup-card{
    left: 18px;
    bottom: 30px;
    width: 176px;
    height: 110px;
  }

  html .mockup-poster{
    right: 18px;
    bottom: 24px;
    width: 162px;
    height: 212px;
  }

  html .scan-qr-board{
    min-height: 390px;
  }

  html .scan-callout{
    font-size: .76rem;
    min-height: 32px;
    padding: 0 10px;
  }

  html .scan-callout::after{
    width: 48px;
  }

  html .scan-callout-quiet{ top: 28px; left: 14px; }
  html .scan-callout-contrast{ top: 70px; right: 14px; }
  html .scan-callout-logo{ left: 14px; bottom: 94px; }
  html .scan-callout-export{ right: 14px; bottom: 44px; }
}


html[data-single-builder]{
  --single-builder-scale: 1;
  --single-builder-scaled-height: auto;
}

@media (min-width: 1061px) {
  html[data-single-builder] .tool-first-home{
    min-height: 100svh !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-rows: minmax(12px, 1fr) auto minmax(12px, 1fr) !important;
    align-items: stretch !important;
    justify-items: center !important;
    width: 100% !important;
    max-width: none !important;
    padding-top: calc(var(--app-nav-top) + var(--app-nav-height)) !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    margin: 0 !important;
  }

  html[data-single-builder] .builder-scale-stage{
    grid-row: 2 !important;
    align-self: center !important;
    justify-self: center !important;
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    width: 100% !important;
    height: var(--single-builder-scaled-height, auto) !important;
    min-height: var(--single-builder-scaled-height, auto) !important;
    margin: 0 !important;
    overflow: visible !important;
    isolation: isolate !important;
  }

  html[data-single-builder] .builder-scale-stage > .guided-generator-grid{
    position: relative !important;
    flex: 0 0 auto !important;
    top: auto !important;
    left: auto !important;
    width: min(1320px, calc(100vw - clamp(24px, 4vw, 64px))) !important;
    margin: 0 !important;
    transform: scale(var(--single-builder-scale, 1)) !important;
    transform-origin: top center !important;
    will-change: transform !important;
  }

  
  html[data-single-builder] .single-batch-cta-card p,
html[data-single-builder] .single-batch-cta-card p,
html[data-single-builder] .tool-first-home #reliabilitySummary{
    display: revert !important;
    visibility: visible !important;
  }
}

@media (max-width: 1060px) {
  html[data-single-builder] .builder-scale-stage{
    position: static !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    isolation: auto !important;
  }

  html[data-single-builder] .builder-scale-stage > .guided-generator-grid{
    position: relative !important;
    flex: initial !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important;
    transform-origin: initial !important;
    will-change: auto !important;
  }
}


@media (min-width: 1061px){
  html[data-single-builder] .tool-first-home .guided-progress-four {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    padding: 18px 0 !important;
    border-radius: 999px !important;
    background:
      radial-gradient(circle at 50% 11%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 34%),
      linear-gradient(180deg,
        color-mix(in srgb, var(--surface-2) 94%, transparent),
        color-mix(in srgb, var(--surface) 98%, transparent)
      ) !important;
    border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--line)) !important;
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb, white 4%, transparent),
      0 22px 48px rgba(0, 0, 0, .18) !important;
  }

  html[data-single-builder] .tool-first-home .guided-progress-four::before {
    content: "" !important;
    position: absolute !important;
    top: 50px !important;
    bottom: 50px !important;
    left: 50% !important;
    z-index: 0 !important;
    width: 3px !important;
    border-radius: 999px !important;
    transform: translateX(-50%) !important;
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--primary) 72%, transparent),
      color-mix(in srgb, var(--primary) 22%, transparent),
      color-mix(in srgb, var(--primary) 60%, transparent)
    ) !important;
    opacity: .92 !important;
    pointer-events: none !important;
  }

  html[data-single-builder] .tool-first-home .guided-progress-four .guided-progress-step {
    position: relative !important;
    z-index: 1 !important;
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html[data-single-builder] .tool-first-home .guided-progress-four .guided-progress-step strong {
    display: none !important;
  }

  html[data-single-builder] .tool-first-home .guided-progress-four .guided-progress-step span {
    position: relative !important;
    z-index: 1 !important;
    display: grid !important;
    place-items: center !important;
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--line)) !important;
    background:
      radial-gradient(circle at 30% 24%, color-mix(in srgb, white 8%, transparent), transparent 38%),
      color-mix(in srgb, var(--surface-2) 94%, transparent) !important;
    color: color-mix(in srgb, var(--text) 80%, var(--primary)) !important;
    font-weight: 800 !important;
    letter-spacing: -.02em !important;
    box-shadow:
      0 12px 24px rgba(0, 0, 0, .16),
      inset 0 0 0 1px color-mix(in srgb, white 4%, transparent) !important;
    transition:
      transform .22s ease,
      background .22s ease,
      border-color .22s ease,
      box-shadow .22s ease,
      color .22s ease !important;
  }

  html[data-single-builder] .tool-first-home .guided-progress-four .guided-progress-step span::after {
    content: "" !important;
    position: absolute !important;
    inset: 6px !important;
    border-radius: inherit !important;
    border: 1px solid color-mix(in srgb, var(--primary) 14%, transparent) !important;
    pointer-events: none !important;
  }

  html[data-single-builder] .tool-first-home .guided-progress-four .guided-progress-step:is(:hover, :focus-visible):not(.is-active) span {
    transform: translateY(-1px) scale(1.035) !important;
    border-color: color-mix(in srgb, var(--primary) 48%, var(--line)) !important;
    box-shadow:
      0 16px 30px rgba(0, 0, 0, .20),
      0 0 0 4px color-mix(in srgb, var(--primary) 8%, transparent),
      inset 0 0 0 1px color-mix(in srgb, white 5%, transparent) !important;
  }

  html[data-single-builder] .tool-first-home .guided-progress-four .guided-progress-step.is-complete span {
    border-color: color-mix(in srgb, var(--primary) 56%, var(--line)) !important;
    background:
      radial-gradient(circle at 28% 22%, rgba(255, 255, 255, .18), transparent 36%),
      linear-gradient(145deg,
        color-mix(in srgb, var(--primary) 62%, #08211f),
        color-mix(in srgb, var(--primary) 28%, var(--surface-2))
      ) !important;
    color: #ecfffb !important;
    box-shadow:
      0 16px 32px rgba(0, 0, 0, .22),
      0 0 0 4px color-mix(in srgb, var(--primary) 10%, transparent),
      inset 0 0 0 1px color-mix(in srgb, white 8%, transparent) !important;
  }

  html[data-single-builder] .tool-first-home .guided-progress-four .guided-progress-step.is-active span {
    transform: scale(1.08) !important;
    border-color: color-mix(in srgb, var(--primary) 78%, white 10%) !important;
    background:
      radial-gradient(circle at 28% 20%, rgba(255, 255, 255, .30), transparent 34%),
      linear-gradient(145deg, #6ff7e8, #28dcc7 58%, #15bba9) !important;
    color: #06221e !important;
    box-shadow:
      0 18px 36px rgba(0, 0, 0, .24),
      0 0 0 6px color-mix(in srgb, var(--primary) 16%, transparent),
      0 0 34px color-mix(in srgb, var(--primary) 32%, transparent),
      inset 0 0 0 1px rgba(255, 255, 255, .32) !important;
  }

  html[data-single-builder] .tool-first-home .guided-progress-four .guided-progress-step.is-active span::after {
    border-color: rgba(6, 34, 30, .18) !important;
  }
}

html[data-single-builder] .tool-first-home #messageBox[hidden]{
  display: none !important;
}


html[data-tool-template]{
  --tool-template-shell-radius: 38px;
  --tool-template-panel-radius: 30px;
  --tool-template-card-radius: 24px;
  --tool-template-shell-border: color-mix(in srgb, var(--primary) 18%, var(--line));
  --tool-template-panel-border: color-mix(in srgb, var(--primary) 14%, var(--line));
  --tool-template-shell-shadow:
    0 24px 62px rgba(0, 0, 0, .24),
    inset 0 0 0 1px color-mix(in srgb, white 3%, transparent);
}

html[data-tool-template] .tool-studio-shell{
  position: relative !important;
  isolation: isolate !important;
  border: 1px solid var(--tool-template-shell-border) !important;
  border-radius: var(--tool-template-shell-radius) !important;
  background:
    radial-gradient(circle at 14% 9%, color-mix(in srgb, var(--primary) 11%, transparent), transparent 18rem),
    radial-gradient(circle at 91% 15%, rgba(249, 115, 22, .055), transparent 18rem),
    color-mix(in srgb, var(--surface) 80%, transparent) !important;
  box-shadow: var(--tool-template-shell-shadow) !important;
}

html[data-tool-template] .tool-studio-shell::after{
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: calc(var(--tool-template-shell-radius) - 1px);
  border: 1px solid color-mix(in srgb, white 3%, transparent);
  pointer-events: none;
}

html[data-tool-template] .tool-studio-workflow,
html[data-tool-template] .tool-studio-companion{
  border-radius: var(--tool-template-panel-radius) !important;
  border-color: var(--tool-template-panel-border) !important;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--surface-2) 88%, transparent),
      color-mix(in srgb, var(--surface) 96%, transparent)
    ) !important;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, white 2.8%, transparent),
    0 18px 42px rgba(0, 0, 0, .16) !important;
}

html[data-theme="dark"][data-tool-template] .tool-studio-workflow,
html[data-theme="dark"][data-tool-template] .tool-studio-companion{
  background:
    linear-gradient(180deg, rgba(17, 28, 25, .96), rgba(11, 18, 16, .985)) !important;
}


@media (min-width: 1061px){
  html[data-batch-builder] .tool-studio-shell--batch {
    width: min(1320px, calc(100vw - clamp(24px, 4vw, 64px))) !important;
    max-width: none !important;
    padding: clamp(14px, 1.16vw, 18px) !important;
    gap: clamp(14px, 1.12vw, 18px) !important;
    grid-template-columns: minmax(0, 1.52fr) minmax(308px, .58fr) !important;
    margin-top: clamp(12px, 1.6vh, 18px) !important;
    margin-bottom: clamp(20px, 2.6vh, 32px) !important;
  }

  html[data-batch-builder] .tool-studio-workflow {
    grid-template-columns: 88px minmax(0, 1fr) !important;
    column-gap: clamp(14px, 1.15vw, 18px) !important;
    padding: clamp(14px, 1.15vw, 18px) !important;
  }

  html[data-batch-builder] .tool-studio-companion {
    gap: 14px !important;
    padding: clamp(14px, 1.12vw, 18px) !important;
  }

  html[data-batch-builder] .tool-studio-companion .preview-heading h2 {
    font-size: clamp(1.08rem, 1.1vw, 1.2rem) !important;
    letter-spacing: -.03em !important;
  }

  html[data-batch-builder] .tool-studio-companion .batch-preview-card {
    border-radius: 28px !important;
    background:
      radial-gradient(circle at 50% 24%, color-mix(in srgb, var(--primary) 8%, transparent), transparent 12rem),
      linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 86%, transparent), color-mix(in srgb, var(--surface) 98%, transparent)) !important;
  }

  

  
  html[data-batch-builder] .tool-progress-spine--batch {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    width: 88px !important;
    min-width: 88px !important;
    padding: 16px 0 !important;
    gap: 6px !important;
    justify-content: space-between !important;
    border-radius: 999px !important;
    border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--line)) !important;
    background:
      radial-gradient(circle at 50% 8%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 32%),
      linear-gradient(180deg,
        color-mix(in srgb, var(--surface-2) 94%, transparent),
        color-mix(in srgb, var(--surface) 98%, transparent)
      ) !important;
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb, white 4%, transparent),
      0 22px 48px rgba(0, 0, 0, .18) !important;
  }

  html[data-batch-builder] .tool-progress-spine--batch::before {
    content: "" !important;
    position: absolute !important;
    top: 38px !important;
    bottom: 38px !important;
    left: 50% !important;
    z-index: 0 !important;
    width: 3px !important;
    border-radius: 999px !important;
    transform: translateX(-50%) !important;
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--primary) 70%, transparent),
      color-mix(in srgb, var(--primary) 20%, transparent),
      color-mix(in srgb, var(--primary) 58%, transparent)
    ) !important;
    opacity: .92 !important;
    pointer-events: none !important;
  }

  html[data-batch-builder] .tool-progress-spine--batch .guided-progress-step {
    position: relative !important;
    z-index: 1 !important;
    flex: 1 1 0 !important;
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html[data-batch-builder] .tool-progress-spine--batch .guided-progress-step strong {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  html[data-batch-builder] .tool-progress-spine--batch .guided-progress-step span {
    position: relative !important;
    z-index: 1 !important;
    display: grid !important;
    place-items: center !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--line)) !important;
    background:
      radial-gradient(circle at 30% 24%, color-mix(in srgb, white 8%, transparent), transparent 38%),
      color-mix(in srgb, var(--surface-2) 94%, transparent) !important;
    color: color-mix(in srgb, var(--text) 80%, var(--primary)) !important;
    font-size: .86rem !important;
    font-weight: 800 !important;
    letter-spacing: -.02em !important;
    box-shadow:
      0 12px 24px rgba(0, 0, 0, .16),
      inset 0 0 0 1px color-mix(in srgb, white 4%, transparent) !important;
    transition:
      transform .22s ease,
      background .22s ease,
      border-color .22s ease,
      box-shadow .22s ease,
      color .22s ease !important;
  }

  html[data-batch-builder] .tool-progress-spine--batch .guided-progress-step span::after {
    content: "" !important;
    position: absolute !important;
    inset: 5px !important;
    border-radius: inherit !important;
    border: 1px solid color-mix(in srgb, var(--primary) 14%, transparent) !important;
    pointer-events: none !important;
  }

  html[data-batch-builder] .tool-progress-spine--batch .guided-progress-step:is(:hover, :focus-visible):not(.is-active) span {
    transform: translateY(-1px) scale(1.045) !important;
    border-color: color-mix(in srgb, var(--primary) 48%, var(--line)) !important;
    box-shadow:
      0 16px 30px rgba(0, 0, 0, .20),
      0 0 0 4px color-mix(in srgb, var(--primary) 8%, transparent),
      inset 0 0 0 1px color-mix(in srgb, white 5%, transparent) !important;
  }

  html[data-batch-builder] .tool-progress-spine--batch .guided-progress-step.is-complete span {
    border-color: color-mix(in srgb, var(--primary) 56%, var(--line)) !important;
    background:
      radial-gradient(circle at 28% 22%, rgba(255, 255, 255, .18), transparent 36%),
      linear-gradient(145deg,
        color-mix(in srgb, var(--primary) 62%, #08211f),
        color-mix(in srgb, var(--primary) 28%, var(--surface-2))
      ) !important;
    color: #ecfffb !important;
    box-shadow:
      0 16px 32px rgba(0, 0, 0, .22),
      0 0 0 4px color-mix(in srgb, var(--primary) 10%, transparent),
      inset 0 0 0 1px color-mix(in srgb, white 8%, transparent) !important;
  }

  html[data-batch-builder] .tool-progress-spine--batch .guided-progress-step.is-active span {
    transform: scale(1.09) !important;
    border-color: color-mix(in srgb, var(--primary) 78%, white 10%) !important;
    background:
      radial-gradient(circle at 28% 20%, rgba(255, 255, 255, .30), transparent 34%),
      linear-gradient(145deg, #6ff7e8, #28dcc7 58%, #15bba9) !important;
    color: #06221e !important;
    box-shadow:
      0 18px 36px rgba(0, 0, 0, .24),
      0 0 0 6px color-mix(in srgb, var(--primary) 16%, transparent),
      0 0 34px color-mix(in srgb, var(--primary) 32%, transparent),
      inset 0 0 0 1px rgba(255, 255, 255, .32) !important;
  }

  html[data-batch-builder] .tool-progress-spine--batch .guided-progress-step.is-active span::after {
    border-color: rgba(6, 34, 30, .18) !important;
  }
}


@media (max-width: 1060px){
  html[data-batch-builder] .tool-studio-shell--batch {
    border-radius: 32px !important;
    box-shadow:
      0 18px 46px rgba(0, 0, 0, .20),
      inset 0 0 0 1px color-mix(in srgb, white 3%, transparent) !important;
  }

  html[data-batch-builder] .tool-studio-companion,
  html[data-batch-builder] .tool-studio-workflow {
    box-shadow: none !important;
  }
}


html[data-batch-responsive]{
  --batch-builder-scale: 1;
  --batch-builder-scaled-height: auto;
}

@media (min-width: 1061px) {
  html[data-batch-responsive] .batch-builder-scale-stage{
    grid-row: 3 !important;
    align-self: center !important;
    justify-self: center !important;
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    width: 100% !important;
    height: var(--batch-builder-scaled-height, auto) !important;
    min-height: var(--batch-builder-scaled-height, auto) !important;
    margin: 0 !important;
    overflow: visible !important;
    isolation: isolate !important;
  }

  html[data-batch-responsive] .batch-builder-scale-stage > .bulk-tool-grid.guided-grid.tool-studio-shell--batch{
    position: relative !important;
    flex: 0 0 auto !important;
    top: auto !important;
    left: auto !important;
    width: min(1320px, calc(100vw - clamp(24px, 4vw, 64px))) !important;
    max-width: none !important;
    min-height: 616px !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: clamp(16px, 1.28vw, 20px) !important;
    gap: clamp(16px, 1.28vw, 20px) !important;
    grid-template-columns: minmax(0, 1.62fr) minmax(340px, .64fr) !important;
    align-items: stretch !important;
    transform: scale(var(--batch-builder-scale, 1)) !important;
    transform-origin: top center !important;
    will-change: transform !important;
    box-sizing: border-box !important;
  }

  html[data-batch-responsive] .bulk-workflow-panel.batch-flow-panel.tool-studio-workflow{
    grid-template-columns: 98px minmax(0, 1fr) !important;
    column-gap: clamp(16px, 1.28vw, 20px) !important;
    padding: clamp(16px, 1.28vw, 20px) !important;
    align-self: stretch !important;
    height: 100% !important;
    box-sizing: border-box !important;
  }

  html[data-batch-responsive] .bulk-export-panel.tool-studio-companion{
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    gap: 14px !important;
    padding: clamp(16px, 1.28vw, 20px) !important;
    align-self: stretch !important;
    height: 100% !important;
    box-sizing: border-box !important;
  }

  
  html[data-batch-responsive] .batch-preview-heading{
    width: 100% !important;
    min-width: 0 !important;
    align-items: center !important;
    margin-bottom: 0 !important;
  }

  html[data-batch-responsive] .batch-preview-heading h2{
    color: var(--primary) !important;
    font-size: clamp(1.18rem, 1.15vw, 1.36rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -.035em !important;
  }

  html[data-batch-responsive] .batch-preview-heading .preview-static-pill{
    flex: 0 0 auto !important;
  }

  
  html[data-batch-responsive] .batch-preview-card{
    min-height: clamp(300px, 38vh, 400px) !important;
    height: auto !important;
    padding: clamp(16px, 1.45vw, 20px) !important;
    border-radius: 28px !important;
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    justify-items: center !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    background:
      radial-gradient(circle at 50% 24%, color-mix(in srgb, var(--primary) 8%, transparent), transparent 13rem),
      linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 86%, transparent), color-mix(in srgb, var(--surface) 98%, transparent)) !important;
  }

  html[data-batch-responsive] .batch-preview-card .bulk-qr-preview-grid{
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    justify-items: center !important;
    box-sizing: border-box !important;
  }

  html[data-batch-responsive] .batch-preview-card .bulk-qr-preview-empty{
    width: min(100%, 310px) !important;
    min-height: clamp(220px, 27vh, 270px) !important;
    padding: 20px !important;
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    justify-items: center !important;
    gap: 10px !important;
    border-radius: 26px !important;
    text-align: center !important;
    line-height: 1.35 !important;
    box-sizing: border-box !important;
  }

  html[data-batch-responsive] .batch-preview-card .bulk-qr-preview-empty strong{
    max-width: 24ch !important;
    font-size: clamp(.98rem, 1vw, 1.08rem) !important;
    line-height: 1.28 !important;
  }

  html[data-batch-responsive] .batch-preview-card .bulk-qr-preview-empty small{
    max-width: 28ch !important;
    font-size: .82rem !important;
    line-height: 1.34 !important;
  }

  
  html[data-batch-responsive] .batch-preview-card .bulk-qr-preview-card{
    width: min(100%, 310px) !important;
    display: grid !important;
    justify-items: center !important;
    align-content: center !important;
    gap: 10px !important;
    padding: 0 !important;
    text-align: center !important;
  }

  html[data-batch-responsive] .batch-preview-card .bulk-qr-thumb{
    width: min(100%, 272px) !important;
    height: min(100%, 272px) !important;
    max-width: 272px !important;
    max-height: 272px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 24px !important;
  }

  
html[data-batch-responsive] .bulk-workflow-panel.batch-flow-panel .bulk-step-head > span:first-child{ display: none !important; }
html[data-batch-responsive] .bulk-workflow-panel.batch-flow-panel .bulk-step-head{ display: block !important; margin-bottom: 12px !important; }
html[data-batch-responsive] .bulk-workflow-panel.batch-flow-panel .bulk-step-head h3{ color: var(--primary) !important; font-size: clamp(1.18rem, 1.22vw, 1.38rem) !important; line-height: 1.12 !important; letter-spacing: -.035em !important; }
html[data-batch-responsive] .bulk-workflow-panel.batch-flow-panel .bulk-step-head .section-kicker{ margin-bottom: 4px !important; }
html[data-batch-responsive] .bulk-builder-kicker span[data-i18n="bulkWorkflowKicker"]{ letter-spacing: .08em !important; }
@media (max-width: 1060px) {
  html[data-batch-responsive] .batch-builder-scale-stage{ position: static !important; display: block !important; width: auto !important; height: auto !important; min-height: 0 !important; overflow: visible !important; isolation: auto !important; }
  html[data-batch-responsive] .batch-builder-scale-stage > .bulk-tool-grid.guided-grid.tool-studio-shell--batch{ position: relative !important; flex: initial !important; top: auto !important; left: auto !important; width: auto !important; margin-left: auto !important; margin-right: auto !important; transform: none !important; transform-origin: initial !important; will-change: auto !important; }
  html[data-batch-responsive] .bulk-workflow-panel.batch-flow-panel .bulk-step-head{ display: block !important; }
  html[data-batch-responsive] .bulk-workflow-panel.batch-flow-panel .bulk-step-head h3,
  html[data-batch-responsive] .batch-preview-heading h2{ color: var(--primary) !important; }
}

@media (min-width: 1061px){
  html[data-batch-responsive] .batch-builder-scale-stage {
    box-sizing: border-box !important;
    padding-bottom: 0 !important;
  }

  html[data-batch-responsive] .batch-builder-scale-stage > .bulk-tool-grid.guided-grid.tool-studio-shell--batch {
    transform-origin: top center !important;
  }
}


.nav-actions .nav-theme-toggle{
  order: 999 !important;
  flex: 0 0 auto !important;
}

.nav-actions .nav-theme-toggle .nav-theme-icon{
  display: inline-grid !important;
  place-items: center !important;
  width: 1.1em !important;
  min-width: 1.1em !important;
  line-height: 1 !important;
}

@media (max-width: 900px) {
  .nav-actions .nav-theme-toggle{
    width: 100% !important;
    justify-content: center !important;
  }
}

@media (max-width: 1060px) {
  html[data-batch-responsive] .batch-preview-panel{
    display: grid !important;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr) !important;
    grid-template-areas: "batchPreview batchSummary" !important;
    align-items: stretch !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 12px !important;
    border-radius: 26px !important;
    box-sizing: border-box !important;
  }

  html[data-batch-responsive] .batch-preview-panel > .panel-heading{
    display: none !important;
  }

  html[data-batch-responsive] .batch-preview-panel > .batch-preview-card{
    grid-area: batchPreview !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 184px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 10px !important;
    border-radius: 22px !important;
    align-self: stretch !important;
    box-sizing: border-box !important;
  }

  html[data-batch-responsive] .batch-preview-panel .batch-preview-card .bulk-qr-preview-grid,
html[data-batch-responsive] .batch-preview-panel .batch-preview-card .bulk-qr-preview-empty{
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
  }

  html[data-batch-responsive] .batch-preview-panel .batch-preview-card .bulk-qr-preview-empty{
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    justify-items: center !important;
    gap: 8px !important;
    padding: 12px !important;
    border-radius: 18px !important;
    text-align: center !important;
    overflow: hidden !important;
  }

  html[data-batch-responsive] .batch-preview-panel .batch-summary-counts{
    gap: 6px !important;
  }

  html[data-batch-responsive] .batch-preview-panel .batch-summary-counts > div{
    padding: 7px 6px !important;
    border-radius: 14px !important;
  }

  html[data-batch-responsive] .batch-preview-panel .batch-summary-counts span{
    font-size: .6rem !important;
    line-height: 1.16 !important;
  }

  html[data-batch-responsive] .batch-preview-panel .batch-summary-counts strong{
    font-size: 1rem !important;
  }

  html[data-batch-responsive] .batch-preview-panel .batch-preview-mini-copy span{
    font-size: .72rem !important;
    line-height: 1.28 !important;
  }

  html[data-batch-responsive] .batch-preview-panel .batch-preview-mini-copy p{
    display: none !important;
  }
}

@media (max-width: 720px) {
  html[data-batch-responsive] .batch-preview-panel{
    grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr) !important;
    gap: 10px !important;
    padding: 10px !important;
    border-radius: 24px !important;
  }

  html[data-batch-responsive] .batch-preview-panel > .batch-preview-card{
    min-height: 166px !important;
    border-radius: 20px !important;
  }
}

@media (max-width: 520px) {
  html[data-batch-responsive] .batch-preview-panel{
    grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr) !important;
    gap: 8px !important;
  }

  html[data-batch-responsive] .batch-preview-panel > .batch-preview-card{
    min-height: 154px !important;
  }

  html[data-batch-responsive] .batch-preview-panel .batch-summary-counts span{
    font-size: .5rem !important;
  }

  html[data-batch-responsive] .batch-preview-panel .batch-summary-counts strong{
    font-size: .84rem !important;
  }

  html[data-batch-responsive] .batch-preview-panel .batch-preview-mini-copy span{
    font-size: .62rem !important;
  }
}


@media (min-width: 1061px){
  html[data-batch-responsive] .batch-preview-panel.tool-studio-companion {
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    gap: 14px !important;
  }

  html[data-batch-responsive] .batch-preview-reliability {
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 14px !important;
    border-radius: 24px !important;
    display: grid !important;
    align-content: center !important;
    gap: 10px !important;
    box-sizing: border-box !important;
  }

  html[data-batch-responsive] .batch-preview-reliability .reliability-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  html[data-batch-responsive] .batch-preview-reliability .reliability-title-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
  }

  html[data-batch-responsive] .batch-preview-reliability .reliability-title-row .section-kicker {
    min-width: 0 !important;
    margin: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  html[data-batch-responsive] .batch-preview-reliability .reliability-score-line {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 10px !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  html[data-batch-responsive] .batch-preview-reliability .reliability-score {
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 3px !important;
    min-width: 0 !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }

  html[data-batch-responsive] .batch-preview-reliability #bulkPreviewReliabilitySummary {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    font-size: .82rem !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere !important;
  }
}


html[data-batch-responsive] .batch-validation-summary{
  display: grid !important;
  gap: 12px !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 14px !important;
  margin-top: 12px !important;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--line)) !important;
  border-radius: 22px !important;
  background: color-mix(in srgb, var(--surface-2) 88%, transparent) !important;
  box-sizing: border-box !important;
}

html[data-batch-responsive] .batch-validation-summary-head{
  display: grid !important;
  gap: 4px !important;
  min-width: 0 !important;
}

html[data-batch-responsive] .batch-validation-summary-head .section-kicker{
  margin: 0 !important;
}

html[data-batch-responsive] .batch-validation-summary-head strong{
  font-size: .98rem !important;
  line-height: 1.18 !important;
}

html[data-batch-responsive] .batch-validation-counts{
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}

html[data-batch-responsive] .batch-validation-copy{
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

@media (max-width: 1060px) {
  
  html[data-batch-responsive] .primary-tool-stage,
html[data-batch-responsive] .primary-tool-stage.container{
    padding-top: 14px !important;
    padding-bottom: 22px !important;
  }

  
  html[data-batch-responsive] .batch-preview-panel{
    display: grid !important;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr) !important;
    grid-template-areas: "batchPreview batchReliability" !important;
    align-items: stretch !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 12px !important;
    border-radius: 26px !important;
    box-sizing: border-box !important;
  }

  html[data-batch-responsive] .batch-preview-panel > .batch-preview-card{
    grid-area: batchPreview !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 184px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 10px !important;
    border-radius: 22px !important;
    align-self: stretch !important;
    box-sizing: border-box !important;
  }

  html[data-batch-responsive] .batch-preview-panel > .batch-preview-reliability{
    grid-area: batchReliability !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 184px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 14px !important;
    border-radius: 22px !important;
    align-self: stretch !important;
    display: grid !important;
    align-content: center !important;
    grid-auto-rows: auto !important;
    gap: 12px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  html[data-batch-responsive] .batch-preview-panel .batch-preview-card .bulk-qr-preview-grid,
html[data-batch-responsive] .batch-preview-panel .batch-preview-card .bulk-qr-preview-empty{
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
  }

  html[data-batch-responsive] .batch-preview-panel .batch-preview-card .bulk-qr-preview-empty{
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    justify-items: center !important;
    gap: 8px !important;
    padding: 12px !important;
    border-radius: 18px !important;
    text-align: center !important;
    overflow: hidden !important;
  }

  html[data-batch-responsive] .batch-preview-reliability .reliability-head{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: start !important;
    gap: 10px !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  html[data-batch-responsive] .batch-preview-reliability .reliability-title-row{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    justify-items: start !important;
    gap: 7px !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  html[data-batch-responsive] .batch-preview-reliability .reliability-title-row .section-kicker{
    display: block !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    font-size: .72rem !important;
    line-height: 1.18 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  html[data-batch-responsive] .batch-preview-reliability .reliability-badge{
    display: inline-flex !important;
    width: fit-content !important;
    min-height: 31px !important;
    padding: 0 10px !important;
    margin: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: .68rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  html[data-batch-responsive] .batch-preview-reliability .reliability-score-line{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    justify-items: start !important;
    gap: 6px !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  html[data-batch-responsive] .batch-preview-reliability .reliability-score{
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 3px !important;
    min-width: 0 !important;
    margin: 0 !important;
    font-size: 1.32rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  html[data-batch-responsive] .batch-preview-reliability .reliability-score small{
    font-size: .68rem !important;
    line-height: 1 !important;
  }

  html[data-batch-responsive] .batch-preview-reliability #bulkPreviewReliabilitySummary{
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    font-size: .74rem !important;
    line-height: 1.32 !important;
    overflow-wrap: anywhere !important;
  }

  html[data-batch-responsive] .batch-preview-reliability .reliability-bar{
    width: 100% !important;
    height: 9px !important;
    margin: 0 !important;
  }

  html[data-batch-responsive] .batch-validation-summary{
    padding: 12px !important;
    border-radius: 20px !important;
    gap: 10px !important;
    margin-top: 4px !important;
  }

  html[data-batch-responsive] .batch-validation-counts{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  html[data-batch-responsive] .batch-validation-counts > div{
    padding: 7px 6px !important;
    border-radius: 14px !important;
  }

  html[data-batch-responsive] .batch-validation-counts span{
    font-size: .6rem !important;
    line-height: 1.16 !important;
  }

  html[data-batch-responsive] .batch-validation-counts strong{
    font-size: 1rem !important;
  }

  html[data-batch-responsive] .batch-validation-copy span{
    font-size: .72rem !important;
    line-height: 1.28 !important;
  }

  html[data-batch-responsive] .batch-validation-copy p{
    display: none !important;
  }
}

@media (max-width: 720px) {
  html[data-batch-responsive] .batch-preview-panel{
    grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr) !important;
    gap: 10px !important;
    padding: 10px !important;
    border-radius: 24px !important;
  }

  html[data-batch-responsive] .batch-preview-panel > .batch-preview-card,
html[data-batch-responsive] .batch-preview-panel > .batch-preview-reliability{
    min-height: 166px !important;
    border-radius: 20px !important;
  }

  html[data-batch-responsive] .batch-preview-reliability{
    gap: 9px !important;
  }

  html[data-batch-responsive] .batch-preview-reliability #bulkPreviewReliabilitySummary{
    font-size: .71rem !important;
  }
}

@media (max-width: 560px) {
  html[data-batch-responsive] .primary-tool-stage,
html[data-batch-responsive] .primary-tool-stage.container{
    padding-top: 12px !important;
    padding-bottom: 18px !important;
  }

  html[data-batch-responsive] .batch-preview-panel{
    grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr) !important;
    gap: 8px !important;
  }

  html[data-batch-responsive] .batch-preview-panel > .batch-preview-card,
html[data-batch-responsive] .batch-preview-panel > .batch-preview-reliability{
    min-height: 154px !important;
  }

  html[data-batch-responsive] .batch-validation-counts span{
    font-size: .5rem !important;
  }

  html[data-batch-responsive] .batch-validation-counts strong{
    font-size: .84rem !important;
  }

  html[data-batch-responsive] .batch-validation-copy span{
    font-size: .62rem !important;
  }
}


.preview-ghost-state{
  display: grid !important;
  place-items: center !important;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  padding: clamp(12px, 2vw, 18px) !important;
  box-sizing: border-box !important;
}

.ghost-qr-illustration{
  display: block;
  width: min(78%, 220px);
  max-width: 220px;
  aspect-ratio: 1 / 1;
  height: auto;
  margin-inline: auto;
  opacity: .88;
  filter: drop-shadow(0 10px 20px rgba(15, 118, 110, 0.05));
  pointer-events: none;
  user-select: none;
}

html[data-theme="dark"] .ghost-qr-illustration{
  opacity: .92;
  filter: drop-shadow(0 10px 20px rgba(45, 212, 191, 0.05));
}


html #qrPreview.qr-preview .preview-ghost-state,
html #rebuilderQrPreview.qr-preview .preview-ghost-state,
#rebuilderQrPreview.qr-preview .preview-ghost-state,
.empty-preview.preview-ghost-state{
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  gap: 0 !important;
}

html #qrPreview.qr-preview .preview-ghost-state strong,
html #qrPreview.qr-preview .preview-ghost-state span:not(.visually-hidden),
html #rebuilderQrPreview.qr-preview .preview-ghost-state strong,
html #rebuilderQrPreview.qr-preview .preview-ghost-state span:not(.visually-hidden),
.empty-preview.preview-ghost-state strong,
.empty-preview.preview-ghost-state span:not(.visually-hidden){
  display: none !important;
}


.bulk-qr-preview-empty.preview-ghost-state{
  min-height: 100%;
  gap: 0;
  padding: clamp(12px, 2vw, 18px) !important;
}

.bulk-qr-preview-empty.preview-ghost-state strong,
.bulk-qr-preview-empty.preview-ghost-state small{
  display: none !important;
}

.bulk-qr-preview-empty.preview-ghost-state .ghost-qr-illustration{
  width: min(72%, 190px);
  max-width: 190px;
}


@media (max-width: 768px) {
  .ghost-qr-illustration{
    width: min(84%, 210px);
  }

  .bulk-qr-preview-empty.preview-ghost-state .ghost-qr-illustration{
    width: min(72%, 170px);
  }

  
}


@media (min-width: 1061px){
  html[data-batch-responsive] .batch-preview-panel.tool-studio-companion {
    grid-template-rows: auto minmax(0, 1fr) auto auto !important;
  }

  html[data-batch-responsive] .batch-single-cta {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin-top: 0 !important;
    align-self: end !important;
  }
}

@media (max-width: 1060px) {
  html[data-batch-responsive] .batch-single-cta{
    display: none !important;
  }
}


@media (min-width: 1061px){
  html[data-single-builder] .tool-first-home .guided-progress-four,
  html[data-batch-builder] .tool-progress-spine--batch {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    width: 96px !important;
    min-width: 96px !important;
    padding: 20px 0 !important;
    gap: 4px !important;
    justify-content: space-between !important;
    border-radius: 999px !important;
    border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--line)) !important;
    background:
      radial-gradient(circle at 50% 8%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 34%),
      linear-gradient(180deg,
        color-mix(in srgb, var(--surface-2) 94%, transparent),
        color-mix(in srgb, var(--surface) 98%, transparent)
      ) !important;
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb, white 4%, transparent),
      0 22px 48px rgba(0, 0, 0, .18) !important;
  }

  html[data-single-builder] .tool-first-home .guided-progress-four::before,
  html[data-batch-builder] .tool-progress-spine--batch::before {
    content: "" !important;
    position: absolute !important;
    top: 42px !important;
    bottom: 42px !important;
    left: 50% !important;
    z-index: 0 !important;
    width: 4px !important;
    border-radius: 999px !important;
    transform: translateX(-50%) !important;
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--primary) 74%, transparent),
      color-mix(in srgb, var(--primary) 26%, transparent),
      color-mix(in srgb, var(--primary) 62%, transparent)
    ) !important;
    opacity: .96 !important;
    pointer-events: none !important;
  }

  html[data-single-builder] .tool-first-home .guided-progress-four .guided-progress-step,
  html[data-batch-builder] .tool-progress-spine--batch .guided-progress-step {
    position: relative !important;
    z-index: 1 !important;
    flex: 1 1 0 !important;
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html[data-single-builder] .tool-first-home .guided-progress-four .guided-progress-step strong,
  html[data-batch-builder] .tool-progress-spine--batch .guided-progress-step strong {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  html[data-single-builder] .tool-first-home .guided-progress-four .guided-progress-step span,
  html[data-batch-builder] .tool-progress-spine--batch .guided-progress-step span {
    position: relative !important;
    z-index: 1 !important;
    display: grid !important;
    place-items: center !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--line)) !important;
    background:
      radial-gradient(circle at 30% 24%, color-mix(in srgb, white 8%, transparent), transparent 38%),
      color-mix(in srgb, var(--surface-2) 94%, transparent) !important;
    color: color-mix(in srgb, var(--text) 80%, var(--primary)) !important;
    font-size: .94rem !important;
    font-weight: 800 !important;
    letter-spacing: -.02em !important;
    box-shadow:
      0 12px 24px rgba(0, 0, 0, .16),
      inset 0 0 0 1px color-mix(in srgb, white 4%, transparent) !important;
    transition:
      transform .22s ease,
      background .22s ease,
      border-color .22s ease,
      box-shadow .22s ease,
      color .22s ease !important;
  }

  html[data-single-builder] .tool-first-home .guided-progress-four .guided-progress-step span::after,
  html[data-batch-builder] .tool-progress-spine--batch .guided-progress-step span::after {
    content: "" !important;
    position: absolute !important;
    inset: 6px !important;
    border-radius: inherit !important;
    border: 1px solid color-mix(in srgb, var(--primary) 14%, transparent) !important;
    pointer-events: none !important;
  }

  html[data-single-builder] .tool-first-home .guided-progress-four .guided-progress-step:is(:hover, :focus-visible):not(.is-active) span,
  html[data-batch-builder] .tool-progress-spine--batch .guided-progress-step:is(:hover, :focus-visible):not(.is-active) span {
    transform: translateY(-1px) scale(1.04) !important;
    border-color: color-mix(in srgb, var(--primary) 48%, var(--line)) !important;
    box-shadow:
      0 16px 30px rgba(0, 0, 0, .20),
      0 0 0 4px color-mix(in srgb, var(--primary) 8%, transparent),
      inset 0 0 0 1px color-mix(in srgb, white 5%, transparent) !important;
  }

  html[data-single-builder] .tool-first-home .guided-progress-four .guided-progress-step.is-complete span,
  html[data-batch-builder] .tool-progress-spine--batch .guided-progress-step.is-complete span {
    border-color: color-mix(in srgb, var(--primary) 56%, var(--line)) !important;
    background:
      radial-gradient(circle at 28% 22%, rgba(255, 255, 255, .18), transparent 36%),
      linear-gradient(145deg,
        color-mix(in srgb, var(--primary) 62%, #08211f),
        color-mix(in srgb, var(--primary) 28%, var(--surface-2))
      ) !important;
    color: #ecfffb !important;
    box-shadow:
      0 16px 32px rgba(0, 0, 0, .22),
      0 0 0 4px color-mix(in srgb, var(--primary) 10%, transparent),
      inset 0 0 0 1px color-mix(in srgb, white 8%, transparent) !important;
  }

  html[data-single-builder] .tool-first-home .guided-progress-four .guided-progress-step.is-active span,
  html[data-batch-builder] .tool-progress-spine--batch .guided-progress-step.is-active span {
    transform: scale(1.08) !important;
    border-color: color-mix(in srgb, var(--primary) 78%, white 10%) !important;
    background:
      radial-gradient(circle at 28% 20%, rgba(255, 255, 255, .30), transparent 34%),
      linear-gradient(145deg, #6ff7e8, #28dcc7 58%, #15bba9) !important;
    color: #06221e !important;
    box-shadow:
      0 18px 36px rgba(0, 0, 0, .24),
      0 0 0 6px color-mix(in srgb, var(--primary) 16%, transparent),
      0 0 34px color-mix(in srgb, var(--primary) 32%, transparent),
      inset 0 0 0 1px rgba(255, 255, 255, .32) !important;
  }

  html[data-single-builder] .tool-first-home .guided-progress-four .guided-progress-step.is-active span::after,
  html[data-batch-builder] .tool-progress-spine--batch .guided-progress-step.is-active span::after {
    border-color: rgba(6, 34, 30, .18) !important;
  }
}


@media (min-width: 1061px){
  html[data-single-builder] .tool-first-home .guided-progress-four::before,
  html[data-batch-builder] .tool-progress-spine--batch::before {
    display: none !important;
    content: none !important;
  }

  html[data-single-builder] .tool-first-home .guided-progress-four .guided-progress-step span,
  html[data-batch-builder] .tool-progress-spine--batch .guided-progress-step span {
    isolation: isolate !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: color-mix(in srgb, var(--text) 72%, var(--primary)) !important;
    text-shadow:
      0 0 14px color-mix(in srgb, var(--primary) 10%, transparent),
      0 1px 0 rgba(0, 0, 0, .16) !important;
  }

  html[data-single-builder] .tool-first-home .guided-progress-four .guided-progress-step span::before,
  html[data-batch-builder] .tool-progress-spine--batch .guided-progress-step span::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: -1 !important;
    border-radius: 999px !important;
    background:
      radial-gradient(circle,
        color-mix(in srgb, var(--primary) 16%, transparent) 0%,
        color-mix(in srgb, var(--primary) 9%, transparent) 38%,
        transparent 74%
      ) !important;
    opacity: .62 !important;
    transform: scale(.98) !important;
    filter: blur(1px) !important;
    pointer-events: none !important;
    transition:
      opacity .22s ease,
      transform .22s ease,
      background .22s ease,
      filter .22s ease !important;
  }

  html[data-single-builder] .tool-first-home .guided-progress-four .guided-progress-step span::after,
  html[data-batch-builder] .tool-progress-spine--batch .guided-progress-step span::after {
    display: none !important;
    content: none !important;
    border: 0 !important;
  }

  html[data-single-builder] .tool-first-home .guided-progress-four .guided-progress-step:is(:hover, :focus-visible):not(.is-active) span,
  html[data-batch-builder] .tool-progress-spine--batch .guided-progress-step:is(:hover, :focus-visible):not(.is-active) span {
    transform: translateY(-1px) scale(1.04) !important;
    color: color-mix(in srgb, var(--text) 88%, var(--primary)) !important;
    text-shadow:
      0 0 18px color-mix(in srgb, var(--primary) 18%, transparent),
      0 1px 0 rgba(0, 0, 0, .18) !important;
  }

  html[data-single-builder] .tool-first-home .guided-progress-four .guided-progress-step:is(:hover, :focus-visible):not(.is-active) span::before,
  html[data-batch-builder] .tool-progress-spine--batch .guided-progress-step:is(:hover, :focus-visible):not(.is-active) span::before {
    opacity: .9 !important;
    transform: scale(1.08) !important;
    background:
      radial-gradient(circle,
        color-mix(in srgb, var(--primary) 23%, transparent) 0%,
        color-mix(in srgb, var(--primary) 11%, transparent) 40%,
        transparent 76%
      ) !important;
  }

  html[data-single-builder] .tool-first-home .guided-progress-four .guided-progress-step.is-complete span,
  html[data-batch-builder] .tool-progress-spine--batch .guided-progress-step.is-complete span {
    transform: none !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: color-mix(in srgb, var(--primary) 78%, #eafffb) !important;
    text-shadow:
      0 0 22px color-mix(in srgb, var(--primary) 22%, transparent),
      0 1px 0 rgba(0, 0, 0, .18) !important;
  }

  html[data-single-builder] .tool-first-home .guided-progress-four .guided-progress-step.is-complete span::before,
  html[data-batch-builder] .tool-progress-spine--batch .guided-progress-step.is-complete span::before {
    opacity: .98 !important;
    transform: scale(1.06) !important;
    background:
      radial-gradient(circle,
        color-mix(in srgb, var(--primary) 28%, transparent) 0%,
        color-mix(in srgb, var(--primary) 13%, transparent) 42%,
        transparent 78%
      ) !important;
  }

  html[data-single-builder] .tool-first-home .guided-progress-four .guided-progress-step.is-active span,
  html[data-batch-builder] .tool-progress-spine--batch .guided-progress-step.is-active span {
    transform: scale(1.08) !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: color-mix(in srgb, #eafffb 92%, var(--primary)) !important;
    text-shadow:
      0 0 16px color-mix(in srgb, var(--primary) 34%, transparent),
      0 0 34px color-mix(in srgb, var(--primary) 22%, transparent),
      0 1px 0 rgba(0, 0, 0, .20) !important;
  }

  html[data-single-builder] .tool-first-home .guided-progress-four .guided-progress-step.is-active span::before,
  html[data-batch-builder] .tool-progress-spine--batch .guided-progress-step.is-active span::before {
    opacity: 1 !important;
    transform: scale(1.24) !important;
    filter: blur(2px) !important;
    background:
      radial-gradient(circle,
        color-mix(in srgb, var(--primary) 42%, transparent) 0%,
        color-mix(in srgb, var(--primary) 24%, transparent) 35%,
        color-mix(in srgb, var(--primary) 10%, transparent) 58%,
        transparent 80%
      ) !important;
  }
}


@media (min-width: 1061px){
  html {
    --step-rail-width: 96px;
    --preview-card-height: 318px;
    --preview-stage-size: 236px;
  }

  
  html[data-single-builder] .tool-first-home .guided-form-panel,
  html[data-batch-builder] .tool-studio-workflow {
    grid-template-columns: var(--step-rail-width) minmax(0, 1fr) !important;
  }

  html[data-single-builder] .tool-first-home .guided-progress-four,
  html[data-batch-builder] .tool-progress-spine--batch {
    width: var(--step-rail-width) !important;
    min-width: var(--step-rail-width) !important;
    max-width: var(--step-rail-width) !important;
  }

  
  html #previewCard.preview-card,
  html[data-batch-builder] .batch-preview-card.preview-card {
    height: var(--preview-card-height) !important;
    min-height: var(--preview-card-height) !important;
    max-height: var(--preview-card-height) !important;
    padding: 16px !important;
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    justify-items: center !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  
  html[data-single-builder] .tool-first-home #qrPreview.qr-preview,
  html[data-batch-builder] .batch-preview-card .bulk-qr-thumb,
  html[data-batch-builder] .batch-preview-card .bulk-qr-preview-empty {
    width: var(--preview-stage-size) !important;
    height: var(--preview-stage-size) !important;
    min-width: var(--preview-stage-size) !important;
    min-height: var(--preview-stage-size) !important;
    max-width: var(--preview-stage-size) !important;
    max-height: var(--preview-stage-size) !important;
    aspect-ratio: 1 / 1 !important;
    margin-inline: auto !important;
    box-sizing: border-box !important;
  }

  html[data-batch-builder] .batch-preview-card .bulk-qr-preview-grid {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    justify-items: center !important;
    box-sizing: border-box !important;
  }

  html[data-batch-builder] .batch-preview-card .bulk-qr-preview-card {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    gap: 8px !important;
    display: grid !important;
    justify-items: center !important;
    align-content: center !important;
    box-sizing: border-box !important;
  }

  html[data-batch-builder] .batch-preview-card .bulk-qr-preview-empty {
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    justify-items: center !important;
  }
}


html{
  --preview-stage-desktop: 236px;
  --preview-stage-compact: 168px;
  --preview-card-min-compact: 184px;
  --preview-empty-min-compact: 146px;
}


.bulk-qr-preview-empty.preview-ghost-state .ghost-qr-illustration{
  width: min(78%, 220px) !important;
  max-width: 220px !important;
}

@media (max-width: 768px) {
  .bulk-qr-preview-empty.preview-ghost-state .ghost-qr-illustration{
    width: min(84%, 210px) !important;
    max-width: 210px !important;
  }
}


@media (min-width: 1061px){
  html #qrPreview.qr-preview,
  html .batch-preview-card .bulk-qr-thumb,
  html .batch-preview-card .bulk-qr-preview-empty {
    width: var(--preview-stage-desktop) !important;
    height: var(--preview-stage-desktop) !important;
    max-width: var(--preview-stage-desktop) !important;
    max-height: var(--preview-stage-desktop) !important;
    min-width: var(--preview-stage-desktop) !important;
    min-height: var(--preview-stage-desktop) !important;
    aspect-ratio: 1 / 1 !important;
    margin-inline: auto !important;
  }

  html .batch-preview-card .bulk-qr-preview-grid,
  html .batch-preview-card .bulk-qr-preview-card {
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    justify-items: center !important;
    width: 100% !important;
    height: 100% !important;
  }

  html .batch-preview-card .bulk-qr-preview-card {
    padding: 0 !important;
    gap: 8px !important;
  }
}


@media (max-width: 1060px){
  html .tool-first-home #previewCard.preview-card,
  html .batch-preview-panel > .batch-preview-card {
    min-height: var(--preview-card-min-compact) !important;
  }

  html .tool-first-home #qrPreview.qr-preview,
  html .batch-preview-panel .bulk-qr-thumb,
  html .batch-preview-panel .bulk-qr-preview-empty {
    width: min(100%, var(--preview-stage-compact)) !important;
    height: min(100%, var(--preview-stage-compact)) !important;
    max-width: var(--preview-stage-compact) !important;
    max-height: var(--preview-stage-compact) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1 !important;
    margin-inline: auto !important;
  }

  html .tool-first-home #qrPreview.qr-preview .empty-preview,
  html .batch-preview-panel .bulk-qr-preview-empty {
    min-height: var(--preview-empty-min-compact) !important;
    padding: 12px !important;
    border-radius: 18px !important;
  }

  html .batch-preview-panel .bulk-qr-preview-grid,
  html .batch-preview-panel .bulk-qr-preview-card {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    justify-items: center !important;
    box-sizing: border-box !important;
  }

  html .batch-preview-panel .bulk-qr-preview-card {
    max-width: none !important;
    padding: 0 !important;
    gap: 6px !important;
    margin: 0 auto !important;
  }
}


html[data-unified-tools]{
  --shell-width: min(1320px, calc(100vw - clamp(24px, 4vw, 64px)));
  --shell-radius: 38px;
  --panel-radius: 30px;
  --card-radius: 24px;
  --rail-width: 96px;
  --shell-gap: clamp(14px, 1.12vw, 18px);
  --shell-padding: clamp(14px, 1.16vw, 18px);
  --shell-border: color-mix(in srgb, var(--primary) 18%, var(--line));
  --panel-border: color-mix(in srgb, var(--primary) 14%, var(--line));
  --shell-shadow:
    0 24px 62px rgba(0, 0, 0, .24),
    inset 0 0 0 1px color-mix(in srgb, white 3%, transparent);
}

html[data-unified-tools] .tool-unified-shell{
  position: relative !important;
  isolation: isolate !important;
  width: var(--shell-width) !important;
  max-width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.52fr) minmax(308px, .58fr) !important;
  align-items: stretch !important;
  gap: var(--shell-gap) !important;
  padding: var(--shell-padding) !important;
  margin-inline: auto !important;
  border: 1px solid var(--shell-border) !important;
  border-radius: var(--shell-radius) !important;
  background:
    radial-gradient(circle at 14% 9%, color-mix(in srgb, var(--primary) 11%, transparent), transparent 18rem),
    radial-gradient(circle at 91% 15%, rgba(249, 115, 22, .055), transparent 18rem),
    color-mix(in srgb, var(--surface) 80%, transparent) !important;
  box-shadow: var(--shell-shadow) !important;
  box-sizing: border-box !important;
}

html[data-unified-tools] .tool-unified-shell::after{
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: calc(var(--shell-radius) - 1px);
  border: 1px solid color-mix(in srgb, white 3%, transparent);
  pointer-events: none;
}

html[data-unified-tools] .tool-unified-workflow,
html[data-unified-tools] .tool-unified-companion{
  min-width: 0 !important;
  border-radius: var(--panel-radius) !important;
  border-color: var(--panel-border) !important;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--surface-2) 88%, transparent),
      color-mix(in srgb, var(--surface) 96%, transparent)
    ) !important;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, white 2.8%, transparent),
    0 18px 42px rgba(0, 0, 0, .16) !important;
}

html[data-theme="dark"][data-unified-tools] .tool-unified-workflow,
html[data-theme="dark"][data-unified-tools] .tool-unified-companion{
  background:
    linear-gradient(180deg, rgba(17, 28, 25, .96), rgba(11, 18, 16, .985)) !important;
}


@media (min-width: 1061px){
  html[data-unified-tools] .tool-unified-shell {
    margin-top: 0 !important;
    margin-bottom: clamp(20px, 2.6vh, 32px) !important;
  }

  html[data-unified-tools] .tool-unified-workflow {
    display: grid !important;
    grid-template-columns: var(--rail-width) minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    column-gap: clamp(14px, 1.15vw, 18px) !important;
    row-gap: 12px !important;
    align-content: start !important;
    padding: clamp(14px, 1.15vw, 18px) !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  html[data-unified-tools] .tool-unified-workflow > .panel-heading,
  html[data-unified-tools] .tool-unified-workflow > .flow-heading {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 2px 2px !important;
  }

  html[data-unified-tools] .tool-unified-workflow > .guided-step-stack,
  html[data-unified-tools] .tool-unified-workflow > .step-stack {
    grid-column: 2 !important;
    grid-row: 2 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    align-self: start !important;
    overflow: visible !important;
    padding-right: 0 !important;
  }

  html[data-unified-tools] .tool-unified-workflow > .guided-actions,
  html[data-unified-tools] .tool-unified-workflow > .guided-actions {
    grid-column: 2 !important;
    grid-row: 3 !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding-top: 12px !important;
  }

  html[data-unified-tools] .tool-unified-companion {
    align-self: stretch !important;
    display: grid !important;
    grid-auto-rows: max-content !important;
    align-content: start !important;
    gap: 14px !important;
    padding: clamp(14px, 1.12vw, 18px) !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }
}


@media (min-width: 1061px){
  html[data-unified-tools] .tool-unified-progress {
    grid-column: 1 !important;
    grid-row: 2 / span 2 !important;
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    width: var(--rail-width) !important;
    min-width: var(--rail-width) !important;
    max-width: var(--rail-width) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: space-between !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 20px 0 !important;
    border-radius: 999px !important;
    border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--line)) !important;
    background:
      radial-gradient(circle at 50% 8%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 34%),
      linear-gradient(180deg,
        color-mix(in srgb, var(--surface-2) 94%, transparent),
        color-mix(in srgb, var(--surface) 98%, transparent)
      ) !important;
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb, white 4%, transparent),
      0 22px 48px rgba(0, 0, 0, .18) !important;
  }

  html[data-unified-tools] .tool-unified-progress .guided-progress-step {
    position: relative !important;
    z-index: 1 !important;
    flex: 1 1 0 !important;
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html[data-unified-tools] .tool-unified-progress .guided-progress-step strong {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  html[data-unified-tools] .tool-unified-progress .guided-progress-step span {
    position: relative !important;
    z-index: 1 !important;
    isolation: isolate !important;
    overflow: visible !important;
    display: grid !important;
    place-items: center !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: color-mix(in srgb, var(--text) 72%, var(--primary)) !important;
    font-size: .94rem !important;
    font-weight: 800 !important;
    letter-spacing: -.02em !important;
    text-shadow:
      0 0 14px color-mix(in srgb, var(--primary) 10%, transparent),
      0 1px 0 rgba(0, 0, 0, .16) !important;
    transition: transform .22s ease, color .22s ease, text-shadow .22s ease !important;
  }

  html[data-unified-tools] .tool-unified-progress .guided-progress-step span::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: -1 !important;
    border-radius: inherit !important;
    background:
      radial-gradient(circle,
        color-mix(in srgb, var(--primary) 16%, transparent) 0%,
        color-mix(in srgb, var(--primary) 9%, transparent) 38%,
        transparent 74%
      ) !important;
    opacity: .62 !important;
    transform: scale(.98) !important;
    filter: blur(1px) !important;
    pointer-events: none !important;
    transition: opacity .22s ease, transform .22s ease, background .22s ease, filter .22s ease !important;
  }

  html[data-unified-tools] .tool-unified-progress .guided-progress-step span::after {
    display: none !important;
    content: none !important;
  }

  html[data-unified-tools] .tool-unified-progress .guided-progress-step:is(:hover, :focus-visible):not(.is-active) span {
    transform: translateY(-1px) scale(1.04) !important;
    color: color-mix(in srgb, var(--text) 88%, var(--primary)) !important;
    text-shadow:
      0 0 18px color-mix(in srgb, var(--primary) 18%, transparent),
      0 1px 0 rgba(0, 0, 0, .18) !important;
  }

  html[data-unified-tools] .tool-unified-progress .guided-progress-step:is(:hover, :focus-visible):not(.is-active) span::before {
    opacity: .9 !important;
    transform: scale(1.08) !important;
    background:
      radial-gradient(circle,
        color-mix(in srgb, var(--primary) 23%, transparent) 0%,
        color-mix(in srgb, var(--primary) 11%, transparent) 40%,
        transparent 76%
      ) !important;
  }

  html[data-unified-tools] .tool-unified-progress .guided-progress-step.is-complete span {
    transform: none !important;
    color: color-mix(in srgb, var(--primary) 78%, #eafffb) !important;
    text-shadow:
      0 0 22px color-mix(in srgb, var(--primary) 22%, transparent),
      0 1px 0 rgba(0, 0, 0, .18) !important;
  }

  html[data-unified-tools] .tool-unified-progress .guided-progress-step.is-complete span::before {
    opacity: .98 !important;
    transform: scale(1.06) !important;
    background:
      radial-gradient(circle,
        color-mix(in srgb, var(--primary) 28%, transparent) 0%,
        color-mix(in srgb, var(--primary) 13%, transparent) 42%,
        transparent 78%
      ) !important;
  }

  html[data-unified-tools] .tool-unified-progress .guided-progress-step.is-active span {
    transform: scale(1.08) !important;
    color: color-mix(in srgb, #eafffb 92%, var(--primary)) !important;
    text-shadow:
      0 0 16px color-mix(in srgb, var(--primary) 34%, transparent),
      0 0 34px color-mix(in srgb, var(--primary) 22%, transparent),
      0 1px 0 rgba(0, 0, 0, .20) !important;
  }

  html[data-unified-tools] .tool-unified-progress .guided-progress-step.is-active span::before {
    opacity: 1 !important;
    transform: scale(1.24) !important;
    filter: blur(2px) !important;
    background:
      radial-gradient(circle,
        color-mix(in srgb, var(--primary) 42%, transparent) 0%,
        color-mix(in srgb, var(--primary) 24%, transparent) 35%,
        color-mix(in srgb, var(--primary) 10%, transparent) 58%,
        transparent 80%
      ) !important;
  }
}


html[data-unified-tools] .tool-unified-workflow .guided-step-heading h3,
html[data-unified-tools] .tool-unified-workflow .guided-step > .panel-heading h2,
html[data-unified-tools] .tool-unified-companion > .panel-heading h2,
html[data-unified-tools] .tool-unified-companion .preview-heading h2,
html[data-unified-tools] .tool-unified-companion .preview-heading h3{
  color: var(--primary) !important;
}

html[data-unified-tools] .tool-unified-companion > .panel-heading:first-child,
html[data-unified-tools] .tool-unified-companion .preview-heading:first-child{
  margin-bottom: 0 !important;
}


html[data-unified-tools] .tool-unified-companion--design .studio-reliability,
html[data-unified-tools] .tool-unified-companion--rebuilder .rebuilder-reliability{
  border-radius: 24px !important;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--line)) !important;
  background: color-mix(in srgb, var(--surface-2) 88%, transparent) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, white 3%, transparent) !important;
}


html[data-unified-tools] .tool-unified-companion .checker-empty-state,
html[data-unified-tools] .tool-unified-companion .extractor-empty-state,
html[data-unified-tools] .tool-unified-companion .compare-empty-state{
  border-radius: 28px !important;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--line)) !important;
  background: color-mix(in srgb, var(--surface-2) 86%, transparent) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, white 3%, transparent) !important;
}

html[data-unified-tools] .tool-unified-companion .checker-result,
html[data-unified-tools] .tool-unified-companion .extractor-results-list,
html[data-unified-tools] .tool-unified-companion .compare-results-content{
  min-width: 0 !important;
}


@media (min-width: 1061px){
  html[data-unified-tools] .tool-unified-companion--rebuilder .rebuilder-preview-shell {
    border-radius: 28px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
  }

  html[data-unified-tools] .tool-unified-companion--rebuilder .rebuilder-preview-card.preview-card {
    border-radius: 28px !important;
  }
}


@media (max-width: 1060px){
  html[data-unified-tools] .tool-unified-shell {
    width: min(calc(100% - 24px), 860px) !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 12px !important;
    border-radius: 32px !important;
    margin-top: 0 !important;
    margin-bottom: 24px !important;
  }

  html[data-unified-tools] .tool-unified-workflow,
  html[data-unified-tools] .tool-unified-companion {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    border-radius: 28px !important;
    box-shadow: none !important;
  }

  html[data-unified-tools] .tool-unified-workflow {
    order: 2 !important;
    padding: 14px !important;
  }

  html[data-unified-tools] .tool-unified-companion {
    order: 1 !important;
    display: grid !important;
    align-content: start !important;
    gap: 12px !important;
    padding: 14px !important;
    overflow: visible !important;
  }

  html[data-unified-tools] .tool-unified-progress {
    width: 100% !important;
    min-width: 0 !important;
  }

  html[data-unified-tools] .tool-unified-workflow .guided-step,
  html[data-unified-tools] .tool-unified-workflow .panel,
  html[data-unified-tools] .tool-unified-companion .panel {
    min-width: 0 !important;
  }

  html[data-unified-tools] .tool-unified-companion .checker-empty-state,
  html[data-unified-tools] .tool-unified-companion .extractor-empty-state,
  html[data-unified-tools] .tool-unified-companion .compare-empty-state {
    padding: 16px !important;
  }
}

@media (max-width: 760px) {
  html[data-unified-tools] .tool-unified-shell{
    width: min(calc(100% - 18px), 860px) !important;
    padding: 10px !important;
    gap: 12px !important;
    border-radius: 28px !important;
  }

  html[data-unified-tools] .tool-unified-workflow,
html[data-unified-tools] .tool-unified-companion{
    padding: 12px !important;
    border-radius: 24px !important;
  }

  html[data-unified-tools] .tool-unified-companion .panel-heading h2,
html[data-unified-tools] .tool-unified-companion .preview-heading h2,
html[data-unified-tools] .tool-unified-companion .preview-heading h3{
    font-size: clamp(1.08rem, 4.3vw, 1.25rem) !important;
    line-height: 1.1 !important;
  }
}


@media (min-width: 1061px){
  html[data-unified-tools] .studio-grid.tool-unified-shell,
  html[data-unified-tools] .guided-grid.tool-unified-shell {
    width: var(--shell-width) !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.52fr) minmax(308px, .58fr) !important;
    align-items: stretch !important;
    gap: var(--shell-gap) !important;
    padding: var(--shell-padding) !important;
    margin-inline: auto !important;
    border: 1px solid var(--shell-border) !important;
    border-radius: var(--shell-radius) !important;
    background:
      radial-gradient(circle at 14% 9%, color-mix(in srgb, var(--primary) 11%, transparent), transparent 18rem),
      radial-gradient(circle at 91% 15%, rgba(249, 115, 22, .055), transparent 18rem),
      color-mix(in srgb, var(--surface) 80%, transparent) !important;
    box-shadow: var(--shell-shadow) !important;
    box-sizing: border-box !important;
  }

  html[data-unified-tools] .flow-panel.tool-unified-workflow{
    display: grid !important;
    grid-template-columns: var(--rail-width) minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    column-gap: clamp(14px, 1.15vw, 18px) !important;
    row-gap: 12px !important;
    align-content: start !important;
    padding: clamp(14px, 1.15vw, 18px) !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  html[data-unified-tools] .studio-guided-progress.guided-progress.tool-unified-progress,
  html[data-unified-tools] .guided-progress.guided-progress.tool-unified-progress {
    grid-column: 1 !important;
    grid-row: 2 / span 2 !important;
    width: var(--rail-width) !important;
    min-width: var(--rail-width) !important;
    max-width: var(--rail-width) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: space-between !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 20px 0 !important;
    border-radius: 999px !important;
    border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--line)) !important;
    background:
      radial-gradient(circle at 50% 8%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 34%),
      linear-gradient(180deg,
        color-mix(in srgb, var(--surface-2) 94%, transparent),
        color-mix(in srgb, var(--surface) 98%, transparent)
      ) !important;
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb, white 4%, transparent),
      0 22px 48px rgba(0, 0, 0, .18) !important;
  }

  html[data-unified-tools] .studio-guided-progress.guided-progress.tool-unified-progress .guided-progress-step,
  html[data-unified-tools] .guided-progress.guided-progress.tool-unified-progress .guided-progress-step {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html[data-unified-tools] .companion-panel.tool-unified-companion{
    align-self: stretch !important;
    display: grid !important;
    grid-auto-rows: max-content !important;
    align-content: start !important;
    gap: 14px !important;
    padding: clamp(14px, 1.12vw, 18px) !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 1060px) {
  html[data-unified-tools] .studio-grid.tool-unified-shell,
html[data-unified-tools] .guided-grid.tool-unified-shell{
    width: min(calc(100% - 24px), 860px) !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 12px !important;
    border-radius: 32px !important;
    margin-top: 0 !important;
    margin-bottom: 24px !important;
  }

  html[data-unified-tools] .flow-panel.tool-unified-workflow,
html[data-unified-tools] .companion-panel.tool-unified-companion{
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}


html[data-tool-system]{
  --rail-width: 96px;
  --panel-gap: 14px;
  --preview-card-height: 318px;
  --preview-stage-size: 236px;
  --panel-radius: 30px;
  --card-radius: 28px;
  --card-border: color-mix(in srgb, var(--primary) 14%, var(--line));
  --panel-border: color-mix(in srgb, var(--primary) 14%, var(--line));
  --panel-bg:
    linear-gradient(180deg,
      color-mix(in srgb, var(--surface-2) 88%, transparent),
      color-mix(in srgb, var(--surface) 96%, transparent)
    );
  --card-bg:
    radial-gradient(circle at 50% 24%, color-mix(in srgb, var(--primary) 8%, transparent), transparent 12rem),
    linear-gradient(180deg,
      color-mix(in srgb, var(--surface-2) 86%, transparent),
      color-mix(in srgb, var(--surface) 98%, transparent)
    );
  --card-shadow:
    inset 0 0 0 1px color-mix(in srgb, white 3%, transparent),
    0 18px 42px rgba(0, 0, 0, .16);
}


@media (min-width: 1061px){
  html[data-tool-system] .tool-workflow-standard {
    display: grid !important;
    grid-template-columns: var(--rail-width) minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    column-gap: clamp(14px, 1.15vw, 18px) !important;
    row-gap: 12px !important;
    align-content: start !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  html[data-tool-system] .tool-workflow-standard > .panel-heading,
  html[data-tool-system] .tool-workflow-standard > .bulk-workflow-heading {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }

  html[data-tool-system] .tool-step-rail-standard {
    grid-column: 1 !important;
    grid-row: 2 / span 2 !important;
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: space-between !important;
    width: var(--rail-width) !important;
    min-width: var(--rail-width) !important;
    max-width: var(--rail-width) !important;
    min-height: 0 !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 20px 0 !important;
    border-radius: 999px !important;
    border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--line)) !important;
    background:
      radial-gradient(circle at 50% 8%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 34%),
      linear-gradient(180deg,
        color-mix(in srgb, var(--surface-2) 94%, transparent),
        color-mix(in srgb, var(--surface) 98%, transparent)
      ) !important;
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb, white 4%, transparent),
      0 22px 48px rgba(0, 0, 0, .18) !important;
  }

  html[data-tool-system] .tool-step-rail-standard::before,
  html[data-tool-system] .tool-step-rail-standard::after {
    display: none !important;
    content: none !important;
  }

  html[data-tool-system] .tool-step-rail-standard .guided-progress-step {
    position: relative !important;
    z-index: 1 !important;
    flex: 1 1 0 !important;
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html[data-tool-system] .tool-step-rail-standard .guided-progress-step strong {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  html[data-tool-system] .tool-step-rail-standard .guided-progress-step span {
    position: relative !important;
    z-index: 1 !important;
    isolation: isolate !important;
    overflow: visible !important;
    display: grid !important;
    place-items: center !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: color-mix(in srgb, var(--text) 72%, var(--primary)) !important;
    font-size: .94rem !important;
    font-weight: 800 !important;
    letter-spacing: -.02em !important;
    text-shadow:
      0 0 14px color-mix(in srgb, var(--primary) 10%, transparent),
      0 1px 0 rgba(0, 0, 0, .16) !important;
    transition:
      transform .22s ease,
      color .22s ease,
      text-shadow .22s ease !important;
  }

  html[data-tool-system] .tool-step-rail-standard .guided-progress-step span::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: -1 !important;
    border-radius: 999px !important;
    background:
      radial-gradient(circle,
        color-mix(in srgb, var(--primary) 16%, transparent) 0%,
        color-mix(in srgb, var(--primary) 9%, transparent) 38%,
        transparent 74%
      ) !important;
    opacity: .62 !important;
    transform: scale(.98) !important;
    filter: blur(1px) !important;
    pointer-events: none !important;
    transition:
      opacity .22s ease,
      transform .22s ease,
      background .22s ease,
      filter .22s ease !important;
  }

  html[data-tool-system] .tool-step-rail-standard .guided-progress-step span::after {
    display: none !important;
    content: none !important;
  }

  html[data-tool-system] .tool-step-rail-standard .guided-progress-step:is(:hover, :focus-visible):not(.is-active) span {
    transform: translateY(-1px) scale(1.04) !important;
    color: color-mix(in srgb, var(--text) 88%, var(--primary)) !important;
    text-shadow:
      0 0 18px color-mix(in srgb, var(--primary) 18%, transparent),
      0 1px 0 rgba(0, 0, 0, .18) !important;
  }

  html[data-tool-system] .tool-step-rail-standard .guided-progress-step:is(:hover, :focus-visible):not(.is-active) span::before {
    opacity: .9 !important;
    transform: scale(1.08) !important;
    background:
      radial-gradient(circle,
        color-mix(in srgb, var(--primary) 23%, transparent) 0%,
        color-mix(in srgb, var(--primary) 11%, transparent) 40%,
        transparent 76%
      ) !important;
  }

  html[data-tool-system] .tool-step-rail-standard .guided-progress-step.is-complete span {
    transform: none !important;
    color: color-mix(in srgb, var(--primary) 78%, #eafffb) !important;
    text-shadow:
      0 0 22px color-mix(in srgb, var(--primary) 22%, transparent),
      0 1px 0 rgba(0, 0, 0, .18) !important;
  }

  html[data-tool-system] .tool-step-rail-standard .guided-progress-step.is-complete span::before {
    opacity: .98 !important;
    transform: scale(1.06) !important;
    background:
      radial-gradient(circle,
        color-mix(in srgb, var(--primary) 28%, transparent) 0%,
        color-mix(in srgb, var(--primary) 13%, transparent) 42%,
        transparent 78%
      ) !important;
  }

  html[data-tool-system] .tool-step-rail-standard .guided-progress-step.is-active span {
    transform: scale(1.08) !important;
    color: color-mix(in srgb, #eafffb 92%, var(--primary)) !important;
    text-shadow:
      0 0 16px color-mix(in srgb, var(--primary) 34%, transparent),
      0 0 34px color-mix(in srgb, var(--primary) 22%, transparent),
      0 1px 0 rgba(0, 0, 0, .20) !important;
  }

  html[data-tool-system] .tool-step-rail-standard .guided-progress-step.is-active span::before {
    opacity: 1 !important;
    transform: scale(1.24) !important;
    filter: blur(2px) !important;
    background:
      radial-gradient(circle,
        color-mix(in srgb, var(--primary) 42%, transparent) 0%,
        color-mix(in srgb, var(--primary) 24%, transparent) 35%,
        color-mix(in srgb, var(--primary) 10%, transparent) 58%,
        transparent 80%
      ) !important;
  }

  html[data-tool-system] .tool-workflow-standard > .guided-step-stack,
  html[data-tool-system] .tool-workflow-standard > .bulk-workflow-content,
  html[data-tool-system] .tool-workflow-standard > .step-stack {
    grid-column: 2 !important;
    grid-row: 2 !important;
    min-width: 0 !important;
  }

  html[data-tool-system] .tool-workflow-standard > .guided-actions,
  html[data-tool-system] .tool-workflow-standard > .guided-actions {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    min-width: 0 !important;
  }
}


html[data-tool-system] .tool-preview-panel-standard{
  display: grid !important;
  grid-auto-rows: max-content !important;
  align-content: start !important;
  gap: var(--panel-gap) !important;
  padding: clamp(14px, 1.12vw, 18px) !important;
  border-radius: var(--panel-radius) !important;
  border: 1px solid var(--panel-border) !important;
  background: var(--panel-bg) !important;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, white 2.8%, transparent),
    0 18px 42px rgba(0, 0, 0, .16) !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

html[data-tool-system] .tool-preview-panel-standard > .panel-heading.preview-heading,
html[data-tool-system] .tool-preview-panel-standard .preview-heading{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 2px !important;
  border: 0 !important;
  background: transparent !important;
}

html[data-tool-system] .tool-preview-panel-standard .preview-heading > div{
  min-width: 0 !important;
}

html[data-tool-system] .tool-preview-panel-standard .preview-heading .section-kicker{
  display: none !important;
}

html[data-tool-system] .tool-preview-panel-standard .preview-heading h2,
html[data-tool-system] .tool-preview-panel-standard .preview-heading h3{
  margin: 0 !important;
  color: var(--primary) !important;
  font-size: clamp(1.08rem, 1.1vw, 1.2rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -.03em !important;
}

html[data-tool-system] .tool-preview-panel-standard .preview-static-pill,
html[data-tool-system] .tool-preview-panel-standard .badge{
  flex: 0 0 auto !important;
}

html[data-tool-system] .tool-preview-card-standard{
  width: 100% !important;
  height: var(--preview-card-height) !important;
  min-height: var(--preview-card-height) !important;
  max-height: var(--preview-card-height) !important;
  padding: 16px !important;
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  justify-items: center !important;
  gap: 10px !important;
  border-radius: var(--card-radius) !important;
  border: 1px solid var(--card-border) !important;
  background: var(--card-bg) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, white 3%, transparent) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

html[data-tool-system] .tool-preview-panel-standard .qr-preview,
html[data-tool-system] .tool-preview-panel-standard .bulk-qr-thumb,
html[data-tool-system] .tool-preview-panel-standard .bulk-qr-preview-empty,
html[data-tool-system] .tool-preview-panel-standard .studio-preview-canvas{
  width: min(var(--preview-stage-size), 100%) !important;
  height: min(var(--preview-stage-size), 100%) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: var(--preview-stage-size) !important;
  max-height: var(--preview-stage-size) !important;
  aspect-ratio: 1 / 1 !important;
  margin-inline: auto !important;
  display: grid !important;
  place-items: center !important;
  box-sizing: border-box !important;
}


html[data-tool-system] .tool-preview-panel-standard .studio-preview-canvas:not([hidden]){
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  aspect-ratio: auto !important;
}

html[data-tool-system] .tool-preview-panel-standard .bulk-qr-preview-grid,
html[data-tool-system] .tool-preview-panel-standard .bulk-qr-preview-card{
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  justify-items: center !important;
  box-sizing: border-box !important;
}

html[data-tool-system] .tool-preview-panel-standard .bulk-qr-preview-card{
  max-width: 100% !important;
  padding: 0 !important;
  gap: 8px !important;
}

html[data-tool-system] .tool-preview-panel-standard .preview-ghost-state .ghost-qr-illustration,
html[data-tool-system] .tool-preview-panel-standard .bulk-qr-preview-empty.preview-ghost-state .ghost-qr-illustration{
  width: min(78%, 220px) !important;
  max-width: 220px !important;
}

html[data-tool-system] .tool-preview-status-standard,
html[data-tool-system] .tool-preview-panel-standard .reliability-meter,
html[data-tool-system] .tool-preview-panel-standard .studio-reliability,
html[data-tool-system] .tool-preview-panel-standard .rebuilder-reliability{
  width: 100% !important;
  margin: 0 !important;
  border-radius: 24px !important;
  border: 1px solid var(--card-border) !important;
  background: color-mix(in srgb, var(--surface-2) 88%, transparent) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, white 3%, transparent) !important;
  box-sizing: border-box !important;
}

html[data-tool-system] .tool-preview-cta-standard{
  width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

html[data-tool-system] .tool-preview-results-standard{
  width: 100% !important;
  min-width: 0 !important;
  border-radius: var(--card-radius) !important;
  box-sizing: border-box !important;
}


html[data-tool-system] .tool-preview-card-standard.checker-empty-state,
html[data-tool-system] .tool-preview-card-standard.extractor-empty-state,
html[data-tool-system] .tool-preview-card-standard.compare-empty-state{
  text-align: center !important;
  align-content: center !important;
  justify-items: center !important;
}


html[data-tool-system] .tool-preview-panel-standard .rebuilder-preview-column,
html[data-tool-system] .tool-preview-panel-standard .rebuilder-preview-shell{
  display: contents !important;
}

html[data-tool-system] .tool-preview-panel-standard .rebuilder-preview-shell{
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}


@media (max-width: 1060px){
  html[data-tool-system] {
    --preview-card-height: auto;
    --preview-stage-size: 168px;
  }

  html[data-tool-system] .tool-preview-panel-standard {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    gap: 12px !important;
    padding: 12px !important;
    border-radius: 26px !important;
    box-shadow: none !important;
  }

  html[data-tool-system] .tool-preview-card-standard {
    width: 100% !important;
    height: auto !important;
    min-height: 184px !important;
    max-height: none !important;
    padding: 10px !important;
    border-radius: 22px !important;
  }

  html[data-tool-system] .tool-preview-panel-standard .qr-preview,
html[data-tool-system] .tool-preview-panel-standard .bulk-qr-thumb,
html[data-tool-system] .tool-preview-panel-standard .bulk-qr-preview-empty,
html[data-tool-system] .tool-preview-panel-standard .studio-preview-canvas{
    width: min(100%, var(--preview-stage-size)) !important;
    height: min(100%, var(--preview-stage-size)) !important;
    max-width: var(--preview-stage-size) !important;
    max-height: var(--preview-stage-size) !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }

  html[data-tool-system] .tool-preview-panel-standard .preview-ghost-state,
html[data-tool-system] .tool-preview-panel-standard .empty-preview,
html[data-tool-system] .tool-preview-panel-standard .bulk-qr-preview-empty{
    min-height: 146px !important;
    padding: 12px !important;
    border-radius: 18px !important;
  }

  html[data-tool-system] .tool-preview-panel-standard .preview-ghost-state .ghost-qr-illustration,
html[data-tool-system] .tool-preview-panel-standard .bulk-qr-preview-empty.preview-ghost-state .ghost-qr-illustration{
    width: min(84%, 210px) !important;
    max-width: 210px !important;
  }

  html[data-tool-system] .tool-preview-panel-standard .preview-heading h2,
  html[data-tool-system] .tool-preview-panel-standard .preview-heading h3 {
    font-size: clamp(1.08rem, 4.3vw, 1.25rem) !important;
    line-height: 1.1 !important;
  }
}
}


:root{
  --icon-globe: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M3.5%2012h17M12%203c2.4%202.6%203.6%205.6%203.6%209S14.4%2018.4%2012%2021c-2.4-2.6-3.6-5.6-3.6-9S9.6%205.6%2012%203Z%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  --icon-sun: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224%22%20fill%3D%22black%22%2F%3E%3Cpath%20d%3D%22M12%202.8v3M12%2018.2v3M2.8%2012h3M18.2%2012h3M5.5%205.5l2.1%202.1M16.4%2016.4l2.1%202.1M18.5%205.5l-2.1%202.1M7.6%2016.4l-2.1%202.1%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  --icon-moon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M20%2015.2A8.7%208.7%200%200%201%208.8%204a8.7%208.7%200%201%200%2011.2%2011.2Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E");
  --icon-plus: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%204.5v15M4.5%2012h15%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  --icon-upload: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%2016V5M7.5%209.5%2012%205l4.5%204.5%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M5%2018.5h14%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  --icon-download: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%205v11M7.5%2011.5%2012%2016l4.5-4.5%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M5%2019h14%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  --icon-search: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Ccircle%20cx%3D%2210.5%22%20cy%3D%2210.5%22%20r%3D%226.2%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.2%22%2F%3E%3Cpath%20d%3D%22m15.1%2015.1%205%205%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  --icon-scan: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M7%204H5a1%201%200%200%200-1%201v2M17%204h2a1%201%200%200%201%201%201v2M7%2020H5a1%201%200%200%201-1-1v-2M17%2020h2a1%201%200%200%200%201-1v-2%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M6%2012h12%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  --icon-compare: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M8%206%204%2010l4%204M16%2018l4-4-4-4M5%2010h11M19%2014H8%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.1%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  --icon-refresh: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M20%208v5h-5M4%2016v-5h5%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M18.2%2012A6.8%206.8%200%200%200%206.5%207.3L4%2011M5.8%2012a6.8%206.8%200%200%200%2011.7%204.7L20%2013%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  --icon-check: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22m5%2012.5%204.2%204.2L19%207%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  --icon-table: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20x%3D%224%22%20y%3D%225%22%20width%3D%2216%22%20height%3D%2214%22%20rx%3D%222%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M4%2010h16M10%205v14M15%205v14%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E");
}


.utility-icon-globe,
.nav-theme-icon{
  position: relative !important;
  display: inline-grid !important;
  place-items: center !important;
  width: 1.1em !important;
  min-width: 1.1em !important;
  height: 1.1em !important;
  line-height: 1 !important;
}
.utility-icon-globe::before,
.nav-theme-icon::before{
  content: "" !important;
  display: block !important;
  width: 1.05em !important;
  height: 1.05em !important;
  background-color: currentColor !important;
  -webkit-mask: var(--icon-globe) center / contain no-repeat !important;
  mask: var(--icon-globe) center / contain no-repeat !important;
}
html[data-theme="dark"] .nav-theme-icon::before{
  -webkit-mask-image: var(--icon-sun) !important;
  mask-image: var(--icon-sun) !important;
}
html[data-theme="light"] .nav-theme-icon::before{
  -webkit-mask-image: var(--icon-moon) !important;
  mask-image: var(--icon-moon) !important;
}


.nav-chevron,
.download-chevron,
.single-mobile-accordion-chevron,
.bulk-mobile-accordion-chevron{
  position: relative !important;
  display: inline-grid !important;
  place-items: center !important;
  width: 1.1rem !important;
  min-width: 1.1rem !important;
  height: 1.1rem !important;
  font-size: 0 !important;
  line-height: 1 !important;
}
.nav-chevron::before,
.download-chevron::before,
.single-mobile-accordion-chevron::before,
.bulk-mobile-accordion-chevron::before{
  content: "" !important;
  display: block !important;
  width: .58rem !important;
  height: .58rem !important;
  border-right: 2px solid currentColor !important;
  border-bottom: 2px solid currentColor !important;
  transform: translateY(-.1rem) rotate(45deg) !important;
  transform-origin: center !important;
}
.nav-dropdown.is-open .nav-chevron::before,
.nav-dropdown:hover .nav-chevron::before,
.nav-dropdown:focus-within .nav-chevron::before,
.download-unified-button[aria-expanded="true"] .download-chevron::before,
.guided-step.is-active .single-mobile-accordion-chevron::before,
.bulk-mobile-accordion-toggle.is-active .bulk-mobile-accordion-chevron::before,
.bulk-step-card.is-active .bulk-mobile-accordion-chevron::before{
  transform: translateY(.08rem) rotate(225deg) !important;
}


.logo-drop-icon.icon-plus::before,
.bulk-drop-icon.icon-upload::before,
.bulk-entry-mode-icon::before,
.checker-drop-icon-scan::before,
.checker-drop-icon-search::before,
.flow-badge::before,
.empty-state-orb::before,
.guide-teaser-icon::before{
  content: "" !important;
  display: block !important;
  background-color: currentColor !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
}
.logo-drop-icon.icon-plus::before{ width: 24px !important; height: 24px !important; -webkit-mask-image: var(--icon-plus) !important; mask-image: var(--icon-plus) !important; }
.bulk-drop-icon.icon-upload::before{ width: 30px !important; height: 30px !important; -webkit-mask-image: var(--icon-upload) !important; mask-image: var(--icon-upload) !important; }
.bulk-entry-mode-icon{
  display: inline-grid !important;
  place-items: center !important;
  width: 1.2rem !important;
  height: 1.2rem !important;
  flex: 0 0 1.2rem !important;
  color: currentColor !important;
}
.bulk-entry-mode-icon-table::before{ width: 1.12rem !important; height: 1.12rem !important; -webkit-mask-image: var(--icon-table) !important; mask-image: var(--icon-table) !important; }
.bulk-entry-mode-icon-upload::before{ width: 1.12rem !important; height: 1.12rem !important; -webkit-mask-image: var(--icon-upload) !important; mask-image: var(--icon-upload) !important; }
.checker-drop-icon-scan::before{ width: 30px !important; height: 30px !important; -webkit-mask-image: var(--icon-scan) !important; mask-image: var(--icon-scan) !important; }
.checker-drop-icon-search::before{ width: 30px !important; height: 30px !important; -webkit-mask-image: var(--icon-search) !important; mask-image: var(--icon-search) !important; }
.flow-badge::before{ width: 24px !important; height: 24px !important; }
.flow-badge-compare::before{ -webkit-mask-image: var(--icon-compare) !important; mask-image: var(--icon-compare) !important; }
.flow-badge-search::before{ -webkit-mask-image: var(--icon-search) !important; mask-image: var(--icon-search) !important; }
.flow-badge-refresh::before{ -webkit-mask-image: var(--icon-refresh) !important; mask-image: var(--icon-refresh) !important; }
.flow-badge-scan::before{ -webkit-mask-image: var(--icon-scan) !important; mask-image: var(--icon-scan) !important; }
.empty-state-orb::before{ width: 30px !important; height: 30px !important; }
.empty-state-orb-search::before{ -webkit-mask-image: var(--icon-search) !important; mask-image: var(--icon-search) !important; }
.empty-state-orb-refresh::before{ -webkit-mask-image: var(--icon-refresh) !important; mask-image: var(--icon-refresh) !important; }
.empty-state-orb-scan::before{ -webkit-mask-image: var(--icon-scan) !important; mask-image: var(--icon-scan) !important; }
.empty-state-orb-compare::before{ -webkit-mask-image: var(--icon-compare) !important; mask-image: var(--icon-compare) !important; }
.guide-teaser-icon::before{ width: 24px !important; height: 24px !important; }
.guide-teaser-icon-compare::before{ -webkit-mask-image: var(--icon-compare) !important; mask-image: var(--icon-compare) !important; }
.guide-teaser-icon-check::before{ -webkit-mask-image: var(--icon-check) !important; mask-image: var(--icon-check) !important; }
.guide-teaser-icon-download::before{ -webkit-mask-image: var(--icon-download) !important; mask-image: var(--icon-download) !important; }


html .support-copy-icon-button{ color: var(--primary) !important; }
html[data-theme="dark"] .support-copy-icon-button{
  border-color: color-mix(in srgb, var(--primary) 32%, var(--line)) !important;
  background: color-mix(in srgb, var(--primary) 12%, var(--surface)) !important;
}


html[data-theme="light"]{ color-scheme: light; }
html[data-theme="dark"]{ color-scheme: dark; }


@media (min-width: 1061px){
  .batch-flow-panel > .guided-actions{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: none !important;
  }

  .batch-flow-panel > .guided-actions .guided-actions-main{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .batch-flow-panel #bulkBack{
    flex: 0 0 auto !important;
    justify-self: start !important;
    margin-right: auto !important;
  }

  .batch-flow-panel #bulkNext{
    flex: 0 0 auto !important;
    justify-self: end !important;
    margin-left: auto !important;
  }

  .batch-flow-panel #bulkBack[disabled]{
    visibility: hidden !important;
    pointer-events: none !important;
  }
}


.batch-single-cta .single-batch-cta-button[data-nav-icon="single"]{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .68rem !important;
}

.batch-single-cta .single-batch-cta-button[data-nav-icon="single"]::before{
  content: "" !important;
  display: inline-block !important;
  flex: 0 0 auto !important;
  width: 1.08rem !important;
  height: 1.08rem !important;
  background-color: currentColor !important;
  -webkit-mask-image: var(--nav-icon-mask) !important;
  mask-image: var(--nav-icon-mask) !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
}


@media (min-width: 1061px){
  html[data-tool-system] .tool-workflow-standard > .guided-actions{
    grid-column: 2 !important;
    grid-row: 3 !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  html[data-tool-system] .tool-workflow-standard > .guided-actions .guided-actions-main{
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: 0 !important;
  }

  html[data-tool-system] .tool-workflow-standard #bulkBack,
  html[data-tool-system] .tool-workflow-standard #singleGuidedBack{
    flex: 0 0 auto !important;
    justify-self: start !important;
    margin-right: auto !important;
  }

  html[data-tool-system] .tool-workflow-standard #bulkNext,
  html[data-tool-system] .tool-workflow-standard #singleGuidedNext{
    flex: 0 0 auto !important;
    justify-self: end !important;
    margin-left: auto !important;
  }
}


html .support-main {
  width: min(1160px, calc(100% - 32px));
  gap: clamp(20px, 2vw, 28px) !important;
  padding-block: clamp(28px, 4vw, 52px) clamp(56px, 7vw, 88px) !important;
}

html .support-hero-card {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--line)) !important;
  border-radius: clamp(26px, 2.4vw, 36px) !important;
  background:
    radial-gradient(circle at 14% 18%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 21rem),
    radial-gradient(circle at 92% 16%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 18rem),
    linear-gradient(145deg,
      color-mix(in srgb, var(--surface-2) 88%, transparent),
      color-mix(in srgb, var(--surface) 98%, transparent)
    ) !important;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, .14),
    inset 0 0 0 1px color-mix(in srgb, white 3%, transparent) !important;
  padding: clamp(20px, 3vw, 34px) !important;
  gap: clamp(18px, 2.4vw, 30px) !important;
}

html .support-hero-card::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  border: 1px solid color-mix(in srgb, white 3%, transparent);
  pointer-events: none;
}

html .support-hero-card h1 {
  max-width: 22ch;
  margin-bottom: 12px !important;
  font-size: clamp(2rem, 3.6vw, 3.6rem) !important;
  line-height: .98 !important;
  letter-spacing: -.055em !important;
}

html .support-hero-card > div > p:last-child {
  max-width: 64ch !important;
  font-size: clamp(1rem, 1.2vw, 1.12rem) !important;
  line-height: 1.58 !important;
}

html .support-status-card {
  border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--line)) !important;
  border-radius: 26px !important;
  background:
    linear-gradient(145deg,
      color-mix(in srgb, var(--primary) 11%, var(--surface-2)),
      color-mix(in srgb, var(--surface) 96%, transparent)
    ) !important;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, white 3%, transparent),
    0 18px 40px rgba(0, 0, 0, .11) !important;
  padding: clamp(18px, 2vw, 24px) !important;
}

html .support-status-pill {
  width: fit-content;
  background: color-mix(in srgb, var(--primary) 18%, transparent) !important;
  border-color: color-mix(in srgb, var(--primary) 34%, var(--line)) !important;
  color: var(--primary) !important;
}

html .support-payment-hub {
  grid-template-columns: minmax(380px, .94fr) minmax(540px, 1.06fr) !important;
  align-items: start !important;
  gap: clamp(18px, 2vw, 24px) !important;
}

html .support-kofi-widget-card,
html .support-crypto-panel,
html .support-help-card {
  position: relative;
  overflow: hidden;
  height: auto !important;
  min-height: 0 !important;
  border: 1px solid color-mix(in srgb, var(--primary) 15%, var(--line)) !important;
  border-radius: clamp(26px, 2.2vw, 34px) !important;
  background:
    radial-gradient(circle at 12% 10%, color-mix(in srgb, var(--primary) 9%, transparent), transparent 17rem),
    linear-gradient(180deg,
      color-mix(in srgb, var(--surface-2) 88%, transparent),
      color-mix(in srgb, var(--surface) 98%, transparent)
    ) !important;
  box-shadow:
    0 22px 52px rgba(0, 0, 0, .14),
    inset 0 0 0 1px color-mix(in srgb, white 3%, transparent) !important;
  padding: clamp(18px, 2.4vw, 26px) !important;
}

html .support-kofi-widget-card::after,
html .support-crypto-panel::after,
html .support-help-card::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  border: 1px solid color-mix(in srgb, white 2.5%, transparent);
  pointer-events: none;
}

html .support-kofi-widget-card {
  grid-template-rows: auto auto auto !important;
  gap: 16px !important;
}

html .support-widget-heading,
html .support-crypto-panel-head {
  gap: 7px !important;
}

html .support-widget-heading h2,
html .support-crypto-panel-head h2,
html .support-help-card h2 {
  color: var(--text) !important;
  font-size: clamp(1.35rem, 1.8vw, 1.8rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -.045em !important;
}

html .support-widget-heading p:last-child,
html .support-crypto-panel-head p:last-child,
html .support-help-card p,
html .support-help-list {
  color: var(--muted) !important;
}

html .support-inline-actions .primary-button {
  min-height: 48px !important;
  padding-inline: 18px !important;
  border-radius: 18px !important;
}

html .support-kofi-frame-shell {
  height: auto !important;
  min-height: 0 !important;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--line)) !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--primary) 14%, transparent), transparent 13rem),
    linear-gradient(145deg,
      color-mix(in srgb, var(--surface-2) 92%, transparent),
      color-mix(in srgb, var(--surface) 96%, transparent)
    ) !important;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, white 3%, transparent),
    0 18px 38px rgba(0, 0, 0, .12) !important;
  padding: clamp(8px, 1vw, 12px) !important;
}

html .support-kofi-frame {
  height: clamp(560px, 62vh, 620px) !important;
  min-height: 560px !important;
  border-radius: 22px !important;
  background: #f5f5f4 !important;
}

html .support-crypto-panel {
  grid-template-rows: auto auto auto !important;
  gap: 16px !important;
}

html .support-crypto-list {
  gap: 12px !important;
}

html .support-wallet-card {
  grid-template-columns: minmax(0, 1fr) 132px !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 14px 15px !important;
  border: 1px solid color-mix(in srgb, var(--primary) 13%, var(--line)) !important;
  border-radius: 24px !important;
  background:
    linear-gradient(145deg,
      color-mix(in srgb, var(--surface-2) 92%, transparent),
      color-mix(in srgb, var(--surface) 98%, transparent)
    ) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, white 2.4%, transparent) !important;
}

html .support-wallet-identity h3 {
  color: var(--text) !important;
  font-size: 1.02rem !important;
}

html .support-wallet-identity p {
  color: var(--muted) !important;
  font-size: .9rem !important;
}

html .support-coin-pill {
  color: var(--primary) !important;
  background: color-mix(in srgb, var(--primary) 12%, transparent) !important;
  border-color: color-mix(in srgb, var(--primary) 30%, var(--line)) !important;
}

html .support-wallet-address {
  color: var(--text) !important;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--line)) !important;
  background: color-mix(in srgb, var(--surface-2) 76%, transparent) !important;
  scrollbar-color: color-mix(in srgb, var(--primary) 42%, transparent) transparent !important;
}

html .support-copy-icon-button {
  color: var(--primary) !important;
  border-color: color-mix(in srgb, var(--primary) 28%, var(--line)) !important;
  background: color-mix(in srgb, var(--primary) 10%, transparent) !important;
}

html .support-copy-icon-button:hover,
html .support-copy-icon-button:focus-visible {
  background: color-mix(in srgb, var(--primary) 18%, transparent) !important;
  border-color: color-mix(in srgb, var(--primary) 46%, var(--line)) !important;
}

html .support-wallet-qr {
  background: #f1f5f4 !important;
  border: 1px solid color-mix(in srgb, var(--primary) 16%, transparent) !important;
  box-shadow: 0 14px 28px rgba(0, 0, 0, .12) !important;
}

html .support-warning-card {
  margin-top: 2px !important;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line)) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 12% 10%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 12rem),
    linear-gradient(145deg,
      color-mix(in srgb, var(--surface-2) 92%, transparent),
      color-mix(in srgb, var(--surface) 98%, transparent)
    ) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, white 2.5%, transparent) !important;
}

html .support-warning-card h3 {
  color: var(--text) !important;
  margin-bottom: 6px !important;
}

html .support-warning-card p {
  color: var(--muted) !important;
}

html .support-help-card {
  gap: 14px !important;
}

html .support-help-list {
  display: grid;
  gap: 8px;
  margin: 0 !important;
  padding-left: 22px !important;
}

html .support-help-card .secondary-button {
  width: fit-content !important;
  min-height: 48px !important;
  border-radius: 18px !important;
}

html[data-theme="dark"] .support-hero-card,
html[data-theme="dark"] .support-kofi-widget-card,
html[data-theme="dark"] .support-crypto-panel,
html[data-theme="dark"] .support-help-card {
  background:
    radial-gradient(circle at 12% 10%, rgba(45, 212, 191, .11), transparent 17rem),
    linear-gradient(180deg, rgba(20, 32, 29, .98), rgba(12, 20, 18, .99)) !important;
  border-color: color-mix(in srgb, var(--primary) 18%, var(--line)) !important;
}

html[data-theme="dark"] .support-status-card {
  background:
    linear-gradient(145deg, rgba(45, 212, 191, .10), rgba(18, 28, 26, .97)) !important;
}

html[data-theme="dark"] .support-kofi-frame-shell {
  background:
    radial-gradient(circle at 18% 12%, rgba(45, 212, 191, .12), transparent 13rem),
    linear-gradient(145deg, rgba(18, 31, 28, .98), rgba(13, 20, 18, .98)) !important;
  border-color: rgba(45, 212, 191, .24) !important;
}

html[data-theme="dark"] .support-wallet-card {
  background:
    linear-gradient(145deg, rgba(24, 38, 34, .98), rgba(17, 27, 24, .98)) !important;
}

html[data-theme="dark"] .support-wallet-address {
  background: rgba(14, 24, 21, .96) !important;
}

html[data-theme="dark"] .support-warning-card {
  background:
    radial-gradient(circle at 12% 10%, rgba(251, 146, 60, .12), transparent 12rem),
    linear-gradient(145deg, rgba(28, 34, 30, .98), rgba(18, 26, 23, .98)) !important;
}

@media (max-width: 1180px) {
  html .support-payment-hub {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 720px) {
  html .support-main {
    width: min(100%, calc(100% - 20px));
    padding-block: 18px 48px !important;
  }

  html .support-hero-card {
    padding: 18px !important;
    border-radius: 28px !important;
  }

  html .support-kofi-widget-card,
  html .support-crypto-panel,
  html .support-help-card {
    padding: 16px !important;
    border-radius: 26px !important;
  }

  html .support-kofi-frame {
    height: clamp(560px, 78vh, 640px) !important;
    min-height: 560px !important;
  }

  html .support-wallet-card {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  html .support-wallet-qr {
    justify-self: start !important;
  }

  html .support-wallet-address-row {
    grid-template-columns: minmax(0, 1fr) 46px !important;
  }
}


html .download-chevron{
  font-size: 0 !important;
  line-height: 1 !important;
  color: currentColor !important;
  text-indent: 0 !important;
  white-space: nowrap !important;
}
html .download-chevron::before{
  display: block !important;
}


@media (min-width: 1061px){
  html[data-tool-system] body .tool-workflow-standard > .guided-actions{
    grid-column: 2 / 3 !important;
    grid-row: 3 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    align-self: end !important;
    justify-self: stretch !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: 0 !important;
    padding-inline: 0 !important;
    box-sizing: border-box !important;
  }

  html[data-tool-system] body .tool-workflow-standard > .guided-actions .guided-actions-main{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  

  
  html[data-tool-system] body .tool-workflow-standard > .guided-actions > :is(
    #singleGuidedBack,
    #studioGuidedBack
  ){
    flex: 0 0 auto !important;
    justify-self: start !important;
    margin-right: auto !important;
  }

  html[data-tool-system] body .tool-workflow-standard > .guided-actions > :is(
    #singleGuidedNext,
    #studioGuidedNext
  ){
    flex: 0 0 auto !important;
    justify-self: end !important;
    margin-left: auto !important;
  }

  html[data-tool-system] body[data-single-guided-step="4"] .tool-workflow-standard > .guided-actions .single-final-download-slot--desktop{
    flex: 0 1 min(360px, 100%) !important;
    width: min(360px, 100%) !important;
    max-width: 360px !important;
    margin-left: auto !important;
    justify-self: end !important;
  }
}


html .preview-copy-button{
  color: var(--primary) !important;
}
html .preview-copy-button svg{
  display: none !important;
}
html .preview-copy-button::before{
  content: "" !important;
  display: block !important;
  width: 1.08rem !important;
  height: 1.08rem !important;
  background-color: currentColor !important;
  -webkit-mask-image: var(--icon-copy) !important;
  mask-image: var(--icon-copy) !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
}


html [data-i18n="singleBatchCtaButton"]::before,
html [data-i18n="batchSingleCtaButton"]::before{
  content: "" !important;
  display: inline-block !important;
  flex: 0 0 auto !important;
  width: 1.12rem !important;
  height: 1.12rem !important;
  background-color: currentColor !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
}

html [data-i18n="singleBatchCtaButton"]::before{
  -webkit-mask-image: var(--nav-icon-mask) !important;
  mask-image: var(--nav-icon-mask) !important;
}


html [data-i18n="batchSingleCtaButton"]::before{
  -webkit-mask-image: var(--nav-icon-mask) !important;
  mask-image: var(--nav-icon-mask) !important;
}

html .batch-single-cta .single-batch-cta-button[data-nav-icon="single"]::before{
  -webkit-mask-image: var(--nav-icon-mask) !important;
  mask-image: var(--nav-icon-mask) !important;
  width: 1.12rem !important;
  height: 1.12rem !important;
}


html .design-lab-heading-copy{
  max-width: 68ch;
  margin: 6px 0 0;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.48;
}

html .design-lab-step-stack{
  gap: 14px;
}

html .design-lab-start-grid,
html .design-lab-template-grid,
html .design-lab-frame-grid,
html .design-lab-layout-grid,
html .design-lab-palette-grid{
  display: grid;
  gap: 12px;
}

html .design-lab-start-grid{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

html .design-lab-template-grid{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

html .design-lab-logo-grid{
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

html .design-lab-palette-grid{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 14px;
}

html .design-lab-frame-grid{
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 14px;
}

html .design-lab-layout-grid{
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 14px;
}

html .design-lab-start-card,
html .design-lab-template-card,
html .design-lab-logo-card,
html .design-lab-palette-card,
html .design-lab-frame-card,
html .design-lab-layout-card{
  position: relative;
  display:grid;
  align-content:start;
  justify-items:start;
  gap: 8px;
  min-width: 0;
  padding: 15px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line));
  border-radius: 20px;
  background:
    radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--primary) 10%, transparent), transparent 8rem),
    color-mix(in srgb, var(--surface-2) 92%, transparent);
  color: var(--text);
  text-align: left;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 2.4%, transparent);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

html .design-lab-start-card:hover,
html .design-lab-start-card:focus-visible,
html .design-lab-template-card:hover,
html .design-lab-template-card:focus-visible,
html .design-lab-logo-card:hover,
html .design-lab-logo-card:focus-visible,
html .design-lab-palette-card:hover,
html .design-lab-palette-card:focus-visible,
html .design-lab-frame-card:hover,
html .design-lab-frame-card:focus-visible,
html .design-lab-layout-card:hover,
html .design-lab-layout-card:focus-visible{
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--primary) 54%, var(--line));
  box-shadow:
    0 18px 36px color-mix(in srgb, #000 16%, transparent),
    inset 0 0 0 1px color-mix(in srgb, #fff 4%, transparent);
  outline: none;
}

html :is(
  .design-lab-start-card,
  .design-lab-template-card,
  .design-lab-logo-card,
  .design-lab-frame-card,
  .design-lab-layout-card
).is-selected{
  border-color: color-mix(in srgb, var(--primary) 72%, var(--line));
  background:
    radial-gradient(circle at 84% 18%, color-mix(in srgb, var(--primary) 22%, transparent), transparent 8rem),
    color-mix(in srgb, var(--primary) 11%, var(--surface-2));
  box-shadow:
    0 18px 40px color-mix(in srgb, var(--primary) 14%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--primary) 18%, transparent);
}

html .design-lab-start-card strong,
html .design-lab-template-card strong,
html .design-lab-logo-card strong,
html .design-lab-palette-card strong,
html .design-lab-frame-card strong,
html .design-lab-layout-card strong{
  color: var(--text);
  font-size: .94rem;
  line-height: 1.2;
  letter-spacing: -.02em;
}

html .design-lab-start-card small,
html .design-lab-template-card span,
html .design-lab-frame-card small{
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.38;
}

html .design-lab-template-card em{
  display:inline-flex;
  min-height: 28px;
  align-items:center;
  padding: 0 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 13%, transparent);
  color: color-mix(in srgb, var(--primary) 76%, var(--text));
  font-size: .72rem;
  font-style: normal;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

html .design-lab-start-icon{
  width: 42px;
  height: 42px;
  border-radius: 15px;
  display:grid;
  place-items:center;
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  color: var(--primary);
}

html .design-lab-start-icon::before{
  content:"";
  width: 22px;
  height: 22px;
  display:block;
  background-color: currentColor;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-size:contain;
  mask-size:contain;
}

html .design-lab-start-icon--new::before{
  -webkit-mask-image: var(--icon-plus);
  mask-image: var(--icon-plus);
}

html .design-lab-start-icon--upload::before{
  -webkit-mask-image: var(--icon-upload);
  mask-image: var(--icon-upload);
}

html .design-lab-import-notice,
html .design-lab-content-summary,
html .design-lab-export-note{
  display:grid;
  gap: 6px;
  padding: 13px 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--line));
  border-radius: 18px;
  background: color-mix(in srgb, var(--primary) 8%, var(--surface-2));
}

html .design-lab-import-notice strong,
html .design-lab-content-summary strong,
html .design-lab-export-note strong{
  color: var(--text);
  font-size: .88rem;
}

html .design-lab-import-notice span,
html .design-lab-export-note p{
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.42;
  margin: 0;
}

html .design-lab-content-summary code{
  display:block;
  max-height: 72px;
  overflow:auto;
  padding: 10px 11px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--line) 86%, transparent);
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  color: color-mix(in srgb, var(--text) 88%, var(--primary));
  font: 700 .78rem/1.42 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

html .design-lab-upload-panel{
  display:grid;
  gap: 12px;
  margin-top: 14px;
}

html .studio-qr-upload-dropzone,
html .studio-background-dropzone{
  min-height: 184px !important;
}

html .studio-logo-workbench{
  display:grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(240px, .82fr);
  gap: 14px;
  align-items:start;
}

html .design-lab-logo-controls{
  display:grid;
  gap: 12px;
  align-content:start;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line));
  border-radius: 20px;
  background: color-mix(in srgb, var(--surface-2) 92%, transparent);
}

html .design-lab-logo-card{
  justify-items:center;
  text-align:center;
  gap: 7px;
  min-height: 94px;
  padding: 12px 9px;
}

html .design-lab-logo-card span{
  display:grid;
  place-items:center;
  width: 36px;
  height: 36px;
  border-radius: 13px;
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary);
  font-weight: 900;
}

html .design-lab-logo-card svg{
  width: 22px;
  height: 22px;
  display:block;
  color: var(--primary);
}

html .design-lab-logo-card strong{
  font-size: .76rem;
}

html .design-lab-palette-card{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 12px;
  min-height: 60px;
}

html .design-lab-palette-card span{
  display:flex;
  gap: 4px;
  flex: 0 0 auto;
}

html .design-lab-palette-card i{
  display:block;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--swatch);
  border: 1px solid color-mix(in srgb, #fff 18%, var(--line));
}

html .design-lab-palette-card strong{
  font-size: .82rem;
}

html .design-lab-color-grid,
html .design-lab-frame-controls,
html .design-lab-pattern-grid,
html .design-lab-background-grid{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

html .design-lab-frame-card{
  grid-template-columns: 46px minmax(0, 1fr);
  grid-template-areas:
    "swatch title"
    "swatch copy";
  column-gap: 11px;
  align-items:center;
}

html .design-lab-frame-card .design-lab-frame-swatch{
  grid-area: swatch;
}

html .design-lab-frame-card strong{
  grid-area: title;
}

html .design-lab-frame-card small{
  grid-area: copy;
}

html .design-lab-frame-swatch{
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 15px;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--line));
}

html .design-lab-frame-swatch::before,
html .design-lab-frame-swatch::after{
  content:"";
  position:absolute;
  inset: 10px;
  border-radius: 8px;
  border: 2px solid var(--primary);
}


html .design-lab-layout-card{
  justify-items:center;
  text-align:center;
  min-height: 120px;
  padding: 12px 10px;
}

html .design-lab-layout-thumb{
  display:block;
  width: 54px;
  height: 68px;
  border-radius: 13px;
  border: 2px solid color-mix(in srgb, var(--primary) 62%, var(--line));
  background:
    linear-gradient(color-mix(in srgb, var(--primary) 26%, transparent),color-mix(in srgb, var(--primary) 26%, transparent)) center 56%/28px 28px no-repeat,
    color-mix(in srgb, var(--surface) 86%, transparent);
}


html .design-lab-copy-grid{
  margin-top: 12px;
}

html .design-lab-preview-panel .preview-heading h2{
  color: var(--primary);
}

html .design-lab-preview-card{
  display:grid !important;
  place-items:center !important;
}


html .studio-preview-canvas{
  width:100% !important;
  height:100% !important;
  display:grid !important;
  place-items:center !important;
  overflow:hidden !important;
}

html .studio-preview-canvas[hidden]{ display:none !important; }

html .studio-preview-canvas svg{
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  border-radius: 18px !important;
  box-shadow:none !important;
}


html .design-lab-preview-cta .single-batch-cta-top[data-nav-icon="single"]::before,
html .design-lab-preview-cta [data-nav-icon="single"]::before{
  -webkit-mask-image: var(--nav-icon-mask) !important;
  mask-image: var(--nav-icon-mask) !important;
}

html .studio-final-download-slot{
  display:block;
  flex: 0 1 min(360px, 100%);
  width:min(360px,100%);
  margin-left:auto;
}

html .studio-final-download-slot[hidden]{ display:none !important; }
html .studio-download-unified{ width:100%; }

@media (min-width:1061px){
  html[data-tool-system] body .tool-workflow-standard > .design-lab-actions{
    grid-column: 2 / 3 !important;
    grid-row: 3 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:12px !important;
    width:100% !important;
  }
  html .design-lab-actions #studioGuidedBack{
    flex:0 0 auto !important;
    margin-right:auto !important;
  }
  html .design-lab-actions #studioGuidedNext{
    flex:0 0 auto !important;
    margin-left:auto !important;
  }
}

@media (max-width:1060px){
  html .design-lab-start-grid,
  html .design-lab-template-grid,
  html .design-lab-frame-grid,
  html .design-lab-color-grid,
  html .design-lab-frame-controls,
  html .design-lab-pattern-grid,
  html .design-lab-background-grid,
  html .studio-logo-workbench{
    grid-template-columns:1fr !important;
  }

  html .design-lab-logo-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  html .design-lab-palette-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  html .design-lab-layout-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  

  html .studio-final-download-slot{
    width:100% !important;
    max-width:none !important;
    margin-left:0 !important;
  }
}

@media (max-width:720px){
  html .design-lab-logo-grid,
  html .design-lab-layout-grid,
  html .design-lab-palette-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  html .design-lab-start-card,
  html .design-lab-template-card,
  html .design-lab-frame-card,
  html .design-lab-layout-card{
    padding:12px;
  }

  html .design-lab-frame-card{
    grid-template-columns:42px minmax(0,1fr);
  }
}

@media (max-width:520px){
  html .design-lab-logo-grid,
  html .design-lab-layout-grid,
  html .design-lab-palette-grid{
    grid-template-columns:1fr 1fr;
  }
  html .design-lab-frame-card{
    grid-template-columns:1fr;
    grid-template-areas:"swatch" "title" "copy";
  }
}


html .single-design-lab-cta-card{
  display:grid;
  gap:8px;
  margin-top:14px;
  padding:14px;
  border:1px solid color-mix(in srgb, var(--primary) 24%, var(--line));
  border-radius:20px;
  background:
    radial-gradient(circle at 88% 16%, color-mix(in srgb, var(--primary) 15%, transparent), transparent 9rem),
    color-mix(in srgb, var(--surface-2) 92%, transparent);
}
html .single-design-lab-cta-top{
  display:flex;
  align-items:center;
  gap:8px;
}
html .single-design-lab-cta-top::before{
  content:"";
  width:1.05rem;
  height:1.05rem;
  flex:0 0 auto;
  background-color:var(--primary);
  -webkit-mask-image:var(--nav-icon-mask);
  mask-image:var(--nav-icon-mask);
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-size:contain;
  mask-size:contain;
}
html .single-design-lab-cta-card h4{
  margin:0;
  color:var(--text);
  font-size:1rem;
  line-height:1.25;
  letter-spacing:-.02em;
}
html .single-design-lab-cta-card p{
  margin:0;
  color:var(--muted);
  font-size:.86rem;
  line-height:1.44;
}
html .single-design-lab-cta-button{
  width:fit-content;
  min-height:42px;
  margin-top:2px;
}
html .single-design-lab-cta-button.is-disabled,
html .single-design-lab-cta-button[aria-disabled="true"]{
  opacity:.54;
  pointer-events:none;
  filter:saturate(.6);
}
@media (max-width:1060px){
  html .single-design-lab-cta-button{ width:100%; }
}
html .logo-drop-icon.icon-upload::before{
  width:30px !important;
  height:30px !important;
  -webkit-mask-image:var(--icon-upload) !important;
  mask-image:var(--icon-upload) !important;
}


html .design-lab-preview-card .studio-preview-canvas:not([hidden]) svg{
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  aspect-ratio:1 / 1 !important;
  object-fit:contain !important;
}


html .studio-builder-kicker{
  display:inline-flex !important;
  align-items:center !important;
  gap:7px !important;
  margin-bottom:2px !important;
}
html .studio-builder-kicker-icon{
  display:inline-block !important;
  flex:0 0 16px !important;
  width:16px !important;
  height:16px !important;
  background-color:currentColor !important;
  -webkit-mask-image:var(--nav-icon-mask) !important;
  mask-image:var(--nav-icon-mask) !important;
  -webkit-mask-size:contain !important;
  mask-size:contain !important;
  -webkit-mask-position:center !important;
  mask-position:center !important;
  -webkit-mask-repeat:no-repeat !important;
  mask-repeat:no-repeat !important;
}

html .design-lab-preview-cta [data-i18n="studioQuickBuilderButton"]::before{
  content:"" !important;
  display:inline-block !important;
  flex:0 0 auto !important;
  width:1.12rem !important;
  height:1.12rem !important;
  background-color:currentColor !important;
  -webkit-mask-image:var(--nav-icon-mask) !important;
  mask-image:var(--nav-icon-mask) !important;
  -webkit-mask-size:contain !important;
  mask-size:contain !important;
  -webkit-mask-position:center !important;
  mask-position:center !important;
  -webkit-mask-repeat:no-repeat !important;
  mask-repeat:no-repeat !important;
}

html .design-lab-export-note{
  margin-top:14px !important;
}

html .design-lab-preview-panel .message,
html #studioMessage{
  display:none !important;
}

html body[data-studio-guided-step="1"] #studioGuidedBack{
  display:none !important;
}
html body[data-studio-guided-step="10"] #studioGuidedNext{
  display:none !important;
}
html body[data-studio-guided-step="10"] .studio-final-download-slot{
  display:block !important;
}
html body[data-studio-guided-step="10"] .design-lab-actions{
  justify-content:space-between !important;
}
html body[data-studio-guided-step="10"] .design-lab-actions #studioGuidedBack{
  margin-right:auto !important;
}
html body[data-studio-guided-step="10"] .design-lab-actions .studio-final-download-slot{
  margin-left:auto !important;
  margin-right:0 !important;
}


html .design-lab-preview-card .studio-preview-canvas{
  overflow:visible !important;
}
html .design-lab-preview-card .studio-preview-canvas:not([hidden]){
  display:grid !important;
  place-items:center !important;
}
html .design-lab-preview-card .studio-preview-canvas:not([hidden]) svg{
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  overflow:visible !important;
}


@media (min-width: 1061px) {
  html[data-tool-system] .design-lab-grid.tool-shell-standard {
    --design-lab-shell-height: clamp(760px, calc(100svh - 152px), 920px);
    height: var(--design-lab-shell-height) !important;
    min-height: var(--design-lab-shell-height) !important;
    max-height: var(--design-lab-shell-height) !important;
    align-items: stretch !important;
    overflow: hidden !important;
  }

  html[data-tool-system] .design-lab-grid.tool-shell-standard > .design-lab-form,
  html[data-tool-system] .design-lab-grid.tool-shell-standard > .design-lab-preview-panel {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    box-sizing: border-box !important;
  }

  html[data-tool-system] .design-lab-form.tool-workflow-standard {
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    align-content: stretch !important;
    overflow: hidden !important;
  }

  html[data-tool-system] .design-lab-form.tool-workflow-standard > .design-lab-step-stack {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    align-self: stretch !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding-right: 8px !important;
    scrollbar-gutter: stable !important;
  }

  html[data-tool-system] .design-lab-form.tool-workflow-standard > .design-lab-actions {
    align-self: end !important;
  }

  html[data-tool-system] .design-lab-preview-panel.tool-preview-panel-standard {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-gutter: stable !important;
  }
}


html .design-lab-preview-cta [data-i18n="studioQuickBuilderButton"]::before,
html .design-lab-preview-cta [data-nav-icon="single"]::before {
  -webkit-mask-image: var(--nav-icon-mask) !important;
  mask-image: var(--nav-icon-mask) !important;
}


html[data-tool-system] .tool-preview-panel-standard .reliability-meter.tool-preview-status-standard,
html[data-tool-system] .tool-preview-status-standard.reliability-meter {
  width: 100% !important;
  display: grid !important;
  gap: 10px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 12px 14px !important;
  border-radius: 24px !important;
  border: 1px solid var(--card-border) !important;
  background: color-mix(in srgb, var(--surface-2) 88%, transparent) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, white 3%, transparent) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

html[data-tool-system] .tool-preview-panel-standard .reliability-meter.tool-preview-status-standard .reliability-head,
html[data-tool-system] .tool-preview-status-standard.reliability-meter .reliability-head {
  width: 100% !important;
  display: grid !important;
  gap: 10px !important;
  min-width: 0 !important;
  margin: 0 !important;
}

html[data-tool-system] .tool-preview-panel-standard .reliability-meter.tool-preview-status-standard .reliability-title-row,
html[data-tool-system] .tool-preview-status-standard.reliability-meter .reliability-title-row {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-width: 0 !important;
  margin: 0 !important;
}

html[data-tool-system] .tool-preview-panel-standard .reliability-meter.tool-preview-status-standard .reliability-kicker,
html[data-tool-system] .tool-preview-status-standard.reliability-meter .reliability-kicker {
  min-width: 0 !important;
  margin: 0 !important;
  color: var(--primary) !important;
  font-size: .78rem !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
  white-space: normal !important;
}

html[data-tool-system] .tool-preview-panel-standard .reliability-meter.tool-preview-status-standard .reliability-badge,
html[data-tool-system] .tool-preview-status-standard.reliability-meter .reliability-badge {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 30px !important;
  padding: 6px 13px !important;
  border-radius: 999px !important;
  font-size: .72rem !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

html[data-tool-system] .tool-preview-panel-standard .reliability-meter.tool-preview-status-standard .reliability-score-line,
html[data-tool-system] .tool-preview-status-standard.reliability-meter .reliability-score-line {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 14px !important;
  min-width: 0 !important;
  margin: 0 !important;
}

html[data-tool-system] .tool-preview-panel-standard .reliability-meter.tool-preview-status-standard .reliability-score,
html[data-tool-system] .tool-preview-status-standard.reliability-meter .reliability-score {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 3px !important;
  min-width: 0 !important;
  margin: 0 !important;
  color: var(--text) !important;
  font-size: 1.12rem !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: -.03em !important;
  white-space: nowrap !important;
}

html[data-tool-system] .tool-preview-panel-standard .reliability-meter.tool-preview-status-standard .reliability-score small,
html[data-tool-system] .tool-preview-status-standard.reliability-meter .reliability-score small {
  color: color-mix(in srgb, var(--text) 84%, var(--muted)) !important;
  font-size: .68rem !important;
  line-height: 1 !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
}

html[data-tool-system] .tool-preview-panel-standard .reliability-meter.tool-preview-status-standard .reliability-score-line p,
html[data-tool-system] .tool-preview-status-standard.reliability-meter .reliability-score-line p {
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  color: var(--muted) !important;
  font-size: .86rem !important;
  line-height: 1.35 !important;
  text-align: left !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  display: block !important;
}

html[data-tool-system] .tool-preview-panel-standard .reliability-meter.tool-preview-status-standard .reliability-bar,
html[data-tool-system] .tool-preview-status-standard.reliability-meter .reliability-bar {
  width: 100% !important;
  height: 12px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--muted) 15%, transparent) !important;
  overflow: hidden !important;
}

html[data-tool-system] .tool-preview-panel-standard .reliability-meter.tool-preview-status-standard .reliability-bar span,
html[data-tool-system] .tool-preview-status-standard.reliability-meter .reliability-bar span {
  display: block !important;
  height: 100% !important;
  border-radius: inherit !important;
}

html[data-tool-system] .tool-preview-panel-standard .reliability-meter.tool-preview-status-standard .reliability-detail-extras,
html[data-tool-system] .tool-preview-status-standard.reliability-meter .reliability-detail-extras {
  display: none !important;
}

@media (max-width: 620px) {
  html[data-tool-system] .tool-preview-panel-standard .reliability-meter.tool-preview-status-standard .reliability-title-row,
  html[data-tool-system] .tool-preview-status-standard.reliability-meter .reliability-title-row {
    align-items: flex-start !important;
    flex-wrap: wrap !important;
  }

  html[data-tool-system] .tool-preview-panel-standard .reliability-meter.tool-preview-status-standard .reliability-score-line,
  html[data-tool-system] .tool-preview-status-standard.reliability-meter .reliability-score-line {
    grid-template-columns: 1fr !important;
    gap: 7px !important;
  }
}


html {
  --icon-expand-preview: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M8%203H4a1%201%200%200%200-1%201v4M16%203h4a1%201%200%200%201%201%201v4M8%2021H4a1%201%200%200%201-1-1v-4M16%2021h4a1%201%200%200%200%201-1v-4%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222.2%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%3C/svg%3E");
}

html .design-lab-preview-card {
  position: relative !important;
}

html .preview-expand-button {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  z-index: 4 !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  display: inline-grid !important;
  place-items: center !important;
  padding: 0 !important;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--line)) !important;
  border-radius: 999px !important;
  color: var(--primary) !important;
  background: color-mix(in srgb, var(--surface-2) 90%, transparent) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, white 3%, transparent), 0 10px 26px rgba(0, 0, 0, .18) !important;
  cursor: pointer !important;
  transition: transform .18s ease, border-color .18s ease, background .18s ease !important;
}
html .preview-expand-button[hidden] { display: none !important; }
html .preview-expand-button[disabled] { opacity: .48 !important; cursor: not-allowed !important; }
html .preview-expand-button::before {
  content: "" !important;
  display: block !important;
  width: 1.18rem !important;
  height: 1.18rem !important;
  background-color: currentColor !important;
  -webkit-mask-image: var(--icon-expand-preview) !important;
  mask-image: var(--icon-expand-preview) !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
}
html .preview-expand-button:not([disabled]):hover,
html .preview-expand-button:not([disabled]):focus-visible {
  transform: translateY(-1px) !important;
  border-color: color-mix(in srgb, var(--primary) 58%, var(--line)) !important;
  background: color-mix(in srgb, var(--primary) 13%, var(--surface-2)) !important;
}

html body.preview-modal-open { overflow: hidden !important; }
html .preview-expand-modal[hidden] { display: none !important; }
html .preview-expand-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  display: grid !important;
  place-items: center !important;
  padding: clamp(18px, 3vw, 36px) !important;
}
html .preview-expand-backdrop {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  background: rgba(4, 9, 8, .76) !important;
  backdrop-filter: blur(14px) !important;
  cursor: zoom-out !important;
}
html .preview-expand-dialog {
  position: relative !important;
  z-index: 1 !important;
  width: min(92vw, 840px) !important;
  max-height: min(92vh, 940px) !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 16px !important;
  padding: clamp(16px, 2vw, 22px) !important;
  border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--line)) !important;
  border-radius: clamp(24px, 3vw, 34px) !important;
  background: color-mix(in srgb, var(--surface) 94%, transparent) !important;
  box-shadow: 0 34px 100px rgba(0, 0, 0, .46), inset 0 0 0 1px color-mix(in srgb, white 3%, transparent) !important;
  overflow: hidden !important;
}
html .preview-expand-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
}
html .preview-expand-header h2 {
  margin: 0 !important;
  color: var(--text) !important;
  font-size: clamp(1.15rem, 2vw, 1.45rem) !important;
  line-height: 1.15 !important;
  letter-spacing: -.03em !important;
}
html .preview-expand-close {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--line)) !important;
  border-radius: 999px !important;
  color: var(--text) !important;
  background: color-mix(in srgb, var(--surface-2) 92%, transparent) !important;
  font-size: 1.75rem !important;
  line-height: 1 !important;
  cursor: pointer !important;
}
html .preview-expand-close:hover,
html .preview-expand-close:focus-visible {
  border-color: color-mix(in srgb, var(--primary) 58%, var(--line)) !important;
  color: var(--primary) !important;
}
html .preview-expand-canvas {
  width: min(76vmin, 740px) !important;
  height: min(76vmin, 740px) !important;
  max-width: 100% !important;
  max-height: calc(92vh - 128px) !important;
  display: grid !important;
  place-items: center !important;
  margin-inline: auto !important;
  border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--line)) !important;
  border-radius: clamp(22px, 2vw, 30px) !important;
  background: color-mix(in srgb, var(--surface-2) 88%, transparent) !important;
  overflow: hidden !important;
}
html .preview-expand-canvas svg {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  display: block !important;
}
@media (max-width: 720px) {
  html .preview-expand-button {
    top: 12px !important;
    right: 12px !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
  }
  html .preview-expand-dialog {
    width: min(100%, 720px) !important;
    padding: 14px !important;
    border-radius: 24px !important;
  }
  html .preview-expand-canvas {
    width: min(82vmin, 620px) !important;
    height: min(82vmin, 620px) !important;
  }
}


html .upload-file-controls{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  flex-wrap:wrap !important;
  width:100% !important;
  margin-top:8px !important;
  box-sizing:border-box !important;
}

html .upload-file-pill{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:30px !important;
  max-width:min(100%, 320px) !important;
  padding:0 12px !important;
  border:1px solid color-mix(in srgb, var(--line) 86%, var(--primary)) !important;
  border-radius:999px !important;
  background:color-mix(in srgb, var(--surface-2) 88%, transparent) !important;
  color:var(--text) !important;
  font-style:normal !important;
  font-size:.78rem !important;
  font-weight:800 !important;
  line-height:1.1 !important;
  text-align:center !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  box-sizing:border-box !important;
}

html .upload-remove-button{
  display:inline-grid !important;
  place-items:center !important;
  flex:0 0 30px !important;
  width:30px !important;
  height:30px !important;
  min-width:30px !important;
  min-height:30px !important;
  padding:0 !important;
  border:1px solid color-mix(in srgb, #ff5f5f 68%, var(--line)) !important;
  border-radius:999px !important;
  background:color-mix(in srgb, #ff5f5f 18%, var(--surface-2)) !important;
  color:#ff7777 !important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, #fff 5%, transparent) !important;
  cursor:pointer !important;
  transition:transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease !important;
}

html .upload-remove-button span{
  transform:translateY(-1px) !important;
  color:currentColor !important;
  font-size:1.08rem !important;
  font-weight:950 !important;
  line-height:1 !important;
}

html .upload-remove-button:hover,
html .upload-remove-button:focus-visible{
  transform:translateY(-1px) !important;
  border-color:#ff7777 !important;
  background:color-mix(in srgb, #ff5f5f 28%, var(--surface-2)) !important;
  color:#ff8c8c !important;
}

html .upload-remove-button:disabled,
html .upload-remove-button[hidden]{
  display:none !important;
}

html .extractor-upload-actions.upload-file-controls{
  justify-content:center !important;
  margin:8px 0 0 !important;
}


html #studioContentSummary[hidden]{
  display:none !important;
}


html .design-lab-preview-card,
html .design-lab-preview-card .studio-preview-canvas{
  display:grid !important;
  place-items:center !important;
}


html .design-lab-preview-card .studio-preview-canvas:not([hidden]){
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  margin:auto !important;
  overflow:hidden !important;
}

html .design-lab-preview-card .studio-preview-canvas:not([hidden]) svg{
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  margin:auto !important;
  overflow:visible !important;
  transform:none !important;
  transform-origin:center center !important;
  object-fit:contain !important;
}

html .preview-expand-canvas{
  display:grid !important;
  place-items:center !important;
}

html .preview-expand-canvas svg{
  display:block !important;
  width:min(100%, 760px) !important;
  height:auto !important;
  max-width:100% !important;
  max-height:min(78vh, 760px) !important;
  margin:auto !important;
  overflow:visible !important;
}


html .validation-tooltip-host{
  position:relative !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  min-height:30px !important;
  width:max-content !important;
  max-width:100% !important;
  margin-top:10px !important;
  z-index:18 !important;
}

html .validation-tooltip-host[hidden]{
  display:none !important;
}

html .validation-tooltip-trigger{
  display:inline-grid !important;
  place-items:center !important;
  width:30px !important;
  height:30px !important;
  min-width:30px !important;
  min-height:30px !important;
  padding:0 !important;
  border:1px solid color-mix(in srgb, #ff9a3d 62%, var(--line)) !important;
  border-radius:999px !important;
  background:color-mix(in srgb, #ff9a3d 18%, var(--surface-2)) !important;
  color:#ffb04f !important;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, #ffffff 5%, transparent),
    0 10px 22px color-mix(in srgb, #000 18%, transparent) !important;
  cursor:help !important;
  transition:transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease !important;
}

html .validation-tooltip-trigger:hover,
html .validation-tooltip-trigger:focus-visible,
html .validation-tooltip-host.is-peeking .validation-tooltip-trigger{
  transform:translateY(-1px) !important;
  border-color:#ffb04f !important;
  background:color-mix(in srgb, #ff9a3d 27%, var(--surface-2)) !important;
  color:#ffd08c !important;
}

html .validation-tooltip-icon{
  color:currentColor !important;
  font-size:.94rem !important;
  font-weight:950 !important;
  line-height:1 !important;
  transform:translateY(-1px) !important;
}

html .validation-tooltip-bubble{
  position:absolute !important;
  left:0 !important;
  bottom:calc(100% + 10px) !important;
  display:block !important;
  width:max-content !important;
  max-width:min(390px, calc(100vw - 44px)) !important;
  padding:10px 12px !important;
  border:1px solid color-mix(in srgb, #ff9a3d 46%, var(--line)) !important;
  border-radius:14px !important;
  background:color-mix(in srgb, var(--surface-2) 96%, #0a0f0d) !important;
  color:var(--text) !important;
  font-size:.84rem !important;
  font-weight:760 !important;
  line-height:1.36 !important;
  text-align:left !important;
  box-shadow:
    0 18px 36px color-mix(in srgb, #000 34%, transparent),
    inset 0 0 0 1px color-mix(in srgb, #fff 4%, transparent) !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transform:translateY(4px) !important;
  transition:opacity .18s ease, visibility .18s ease, transform .18s ease !important;
  z-index:28 !important;
}

html .validation-tooltip-bubble::after{
  content:"" !important;
  position:absolute !important;
  left:11px !important;
  top:100% !important;
  width:12px !important;
  height:12px !important;
  border-right:1px solid color-mix(in srgb, #ff9a3d 46%, var(--line)) !important;
  border-bottom:1px solid color-mix(in srgb, #ff9a3d 46%, var(--line)) !important;
  background:inherit !important;
  transform:translateY(-6px) rotate(45deg) !important;
}

html .validation-tooltip-host:hover .validation-tooltip-bubble,
html .validation-tooltip-trigger:focus-visible + .validation-tooltip-bubble,
html .validation-tooltip-host.is-peeking .validation-tooltip-bubble{
  opacity:1 !important;
  visibility:visible !important;
  transform:translateY(0) !important;
}

html .guided-actions .validation-tooltip-host{
  margin-top:0 !important;
  margin-right:auto !important;
}

html #studioGuidedStatus.validation-tooltip-host,
html #singleGuidedStatus.validation-tooltip-host{
  margin-left:0 !important;
}

@media (max-width: 1060px){
  html .validation-tooltip-bubble{
    max-width:min(320px, calc(100vw - 34px)) !important;
  }
}


html .validation-generated-shell{
  position:relative !important;
  display:block !important;
  width:100% !important;
}

html .validation-input-shell textarea,
html .validation-input-shell select{
  width:100% !important;
  padding-right:46px !important;
}

html .validation-input-shell.has-validation-error input,
html .validation-input-shell.has-validation-error textarea,
html .validation-input-shell.has-validation-error select{
  border-color:color-mix(in srgb, #f04438 64%, var(--line)) !important;
  box-shadow:0 0 0 3px color-mix(in srgb, #f04438 16%, transparent) !important;
}

html .field-validation-button{
  color:#ffb04f !important;
  border-color:color-mix(in srgb, #ff9a3d 58%, var(--line)) !important;
  background:color-mix(in srgb, #ff9a3d 16%, var(--surface)) !important;
}

html .field-validation-button.is-error{
  color:#ff8a80 !important;
  border-color:color-mix(in srgb, #f04438 64%, var(--line)) !important;
  background:color-mix(in srgb, #f04438 18%, var(--surface)) !important;
}

html[data-theme="dark"] .field-validation-button.is-error{
  color:#ff9f98 !important;
  background:color-mix(in srgb, #7a271a 34%, var(--surface)) !important;
}

html .field-validation-button[hidden],
html .field-validation-button:disabled[hidden]{
  display:none !important;
}

html .validation-dropzone-shell{
  position:relative !important;
}

html .validation-dropzone-shell .field-validation-button{
  top:14px !important;
  right:14px !important;
  transform:none !important;
}

html .validation-dropzone-shell .field-validation-button:hover,
html .validation-dropzone-shell .field-validation-button:focus-visible,
html .validation-dropzone-shell.is-tooltip-open .field-validation-button{
  transform:translateY(-1px) !important;
}

html .validation-dropzone-shell .field-validation-tooltip{
  top:56px !important;
  right:14px !important;
  left:auto !important;
}

html .validation-dropzone-shell:hover .field-validation-tooltip,
html .validation-dropzone-shell:focus-within .field-validation-tooltip,
html .validation-dropzone-shell.is-tooltip-open .field-validation-tooltip{
  opacity:1 !important;
  visibility:visible !important;
  transform:translateY(0) !important;
}

html .validation-tooltip-host .validation-tooltip-bubble{
  opacity:0 !important;
  visibility:hidden !important;
  transform:translateY(4px) !important;
}

html .validation-tooltip-host:hover .validation-tooltip-bubble,
html .validation-tooltip-host:focus-within .validation-tooltip-bubble,
html .validation-tooltip-host.is-tooltip-open .validation-tooltip-bubble{
  opacity:1 !important;
  visibility:visible !important;
  transform:translateY(0) !important;
}


@media (min-width:1061px){
  html[data-tool-system] .design-lab-preview-panel.tool-preview-panel-standard{
    grid-template-rows:max-content max-content max-content max-content max-content !important;
    align-content:start !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
  }

  html[data-tool-system] .design-lab-preview-panel .studio-reliability,
  html[data-tool-system] .design-lab-preview-panel #studioReliabilityMeter{
    display:grid !important;
    align-self:start !important;
    flex:none !important;
    min-height:max-content !important;
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
  }

  html[data-tool-system] .design-lab-preview-panel .single-batch-cta-card,
html[data-tool-system] .design-lab-preview-panel .design-lab-preview-cta{
    margin-top:0 !important;
    align-self:start !important;
  }
}


html .validation-input-shell:hover .field-tooltip,
html .validation-input-shell:focus-within .field-tooltip,
html .validation-dropzone-shell:hover .field-validation-tooltip,
html .validation-dropzone-shell:focus-within .field-validation-tooltip{
  opacity:0 !important;
  visibility:hidden !important;
  transform:translateY(-4px) !important;
}

html .validation-input-shell .field-help-button:hover + .field-tooltip,
html .validation-input-shell .field-help-button:focus-visible + .field-tooltip,
html .validation-input-shell.is-tooltip-open .field-tooltip,
html .validation-dropzone-shell .field-validation-button:hover + .field-validation-tooltip,
html .validation-dropzone-shell .field-validation-button:focus-visible + .field-validation-tooltip,
html .validation-dropzone-shell.is-tooltip-open .field-validation-tooltip{
  opacity:1 !important;
  visibility:visible !important;
  transform:translateY(0) !important;
}


html[data-tool-system] .design-lab-preview-card .studio-preview-canvas:not([hidden]){
  width:100% !important;
  height:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  max-width:100% !important;
  max-height:100% !important;
  display:grid !important;
  place-items:center !important;
  overflow:hidden !important;
  padding:0 !important;
  box-sizing:border-box !important;
}

html[data-tool-system] .design-lab-preview-card .studio-preview-canvas:not([hidden]) svg{
  display:block !important;
  width:auto !important;
  height:auto !important;
  max-width:100% !important;
  max-height:100% !important;
  margin:auto !important;
  overflow:visible !important;
  object-fit:contain !important;
  transform:none !important;
  transform-origin:center center !important;
}

html[data-tool-system] .design-lab-preview-panel .preview-expand-canvas svg{
  width:auto !important;
  height:auto !important;
  max-width:100% !important;
  max-height:min(80vh, 860px) !important;
  object-fit:contain !important;
}


html[data-tool-system] .design-lab-preview-panel.tool-preview-panel-standard{
  grid-template-rows:max-content max-content max-content max-content !important;
}


html .brand{
  align-items:center !important;
  gap:11px !important;
}

html .brand-lockup{
  display:grid !important;
  align-items:center !important;
  gap:3px !important;
  min-width:0 !important;
  line-height:1 !important;
}

html .brand-name{
  display:block !important;
  min-width:0 !important;
  overflow:visible !important;
  text-overflow:clip !important;
  white-space:nowrap !important;
  color:var(--text) !important;
  font-size:inherit !important;
  font-weight:950 !important;
  line-height:.92 !important;
  letter-spacing:-.05em !important;
  text-shadow:0 1px 0 color-mix(in srgb, #fff 9%, transparent) !important;
}

html .brand-promise{
  display:block !important;
  min-width:0 !important;
  overflow:visible !important;
  text-overflow:clip !important;
  white-space:nowrap !important;
  color:var(--primary) !important;
  font-size:.62rem !important;
  font-weight:950 !important;
  line-height:1 !important;
  letter-spacing:.19em !important;
  text-transform:uppercase !important;
  text-shadow:0 0 16px color-mix(in srgb, var(--primary) 22%, transparent) !important;
}

html[data-theme="light"] .brand-name{
  color:var(--text) !important;
}

html[data-theme="light"] .brand-promise{
  color:color-mix(in srgb, var(--primary) 88%, #03695f) !important;
}

html .footer-brand .brand-lockup{
  gap:4px !important;
}

html .footer-brand .brand-promise{
  font-size:.64rem !important;
  letter-spacing:.18em !important;
}

@media (max-width: 980px){
  html .brand{
    gap:10px !important;
  }

  html .brand-lockup{
    gap:3px !important;
  }

  html .brand-promise{
    font-size:.56rem !important;
    letter-spacing:.16em !important;
  }
}

@media (max-width: 560px){
  html .brand{
    gap:9px !important;
  }

  html .brand-name{
    line-height:.94 !important;
  }

  html .brand-promise{
    font-size:.49rem !important;
    letter-spacing:.13em !important;
  }
}


html[data-batch-builder] .bulk-template-summary{
  align-items: stretch !important;
}

html[data-batch-builder] .bulk-template-summary > div{
  height: 100% !important;
  box-sizing: border-box !important;
}

@media (min-width: 1061px){
  html[data-batch-builder] .bulk-template-summary > div{
    min-height: 112px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }
}

html :is(
  .single-batch-cta-button[data-nav-icon],
  .design-lab-preview-cta [data-nav-icon="single"]
)::before{
  -webkit-mask-image: var(--nav-icon-mask) !important;
  mask-image: var(--nav-icon-mask) !important;
}


html[data-theme="light"]{
  --bg:#f4fbfa;
  --surface:#ffffff;
  --surface-2:#eef8f7;
  --text:#10232b;
  --muted:#566b75;
  --line:#d5e8e4;
  --primary:#08b5a6;
  --primary-dark:#067f77;
  --accent:#2563eb;
  --danger:#dc2626;
  --warning:#c2410c;
  --shadow:0 30px 90px rgba(16,35,43,.12);
  --shadow-soft:0 16px 42px rgba(16,35,43,.08);
}

body{
  font-family:"Plus Jakarta Sans",Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
  font-feature-settings:"ss01" 1,"cv01" 1,"cv02" 1;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

html[data-theme="light"] body{
  background:
    radial-gradient(circle at 10% 2%, rgba(8,181,166,.16), transparent 26rem),
    radial-gradient(circle at 91% 8%, rgba(37,99,235,.10), transparent 22rem),
    linear-gradient(180deg,#fbfefe 0%,#f4fbfa 58%,#f2faf8 100%) !important;
}

html[data-theme="light"] :is(h1,h2,h3,h4,.brand-name,.guided-step-heading h3,.bulk-step-head h3){
  color:var(--text);
  letter-spacing:-.045em;
}

html[data-theme="light"] .section-kicker{
  color:color-mix(in srgb,var(--primary-dark) 94%,#084b46);
  letter-spacing:.16em;
}


html[data-theme="light"] .nav{
  border-color:rgba(8,181,166,.20) !important;
  background:rgba(255,255,255,.86) !important;
  box-shadow:
    0 24px 64px rgba(16,35,43,.13),
    inset 0 1px 0 rgba(255,255,255,.94) !important;
}

html[data-theme="light"] .brand-mark{
  box-shadow:0 16px 34px rgba(8,181,166,.22) !important;
}

html[data-theme="light"] .brand-name{
  color:#0c232a !important;
}

html[data-theme="light"] .brand-promise{
  color:#087f77 !important;
  text-shadow:none !important;
}

html[data-theme="light"] :is(.nav-links > a,.nav-dropdown-toggle,.utility-button){
  color:#304954 !important;
  border-color:transparent;
}

html[data-theme="light"] :is(.nav-links > a:hover,.nav-dropdown-toggle:hover,.nav-dropdown:focus-within>.nav-dropdown-toggle,.nav-dropdown.is-open>.nav-dropdown-toggle){
  color:#067f77 !important;
  background:rgba(8,181,166,.10) !important;
  box-shadow:inset 0 0 0 1px rgba(8,181,166,.16) !important;
}

html[data-theme="light"] :is(.nav-links a.is-active,.nav-links a[aria-current="page"],.nav-links a[aria-current="true"],.nav-dropdown.has-active>.nav-dropdown-toggle){
  color:#ffffff !important;
  background:linear-gradient(135deg,#0fb9aa,#087f77) !important;
  box-shadow:
    0 16px 30px rgba(8,181,166,.22),
    inset 0 1px 0 rgba(255,255,255,.26) !important;
}

html[data-theme="light"] .nav-support-link{
  color:#ffffff !important;
  border-color:transparent !important;
  background:linear-gradient(135deg,#0fb9aa,#087f77) !important;
  box-shadow:0 16px 34px rgba(8,181,166,.22) !important;
}

html[data-theme="light"] .nav-support-link:hover{
  color:#ffffff !important;
  background:linear-gradient(135deg,#16cdbd,#087f77) !important;
  transform:translateY(-1px);
}

html[data-theme="light"] .utility-button{
  background:rgba(255,255,255,.82) !important;
  border:1px solid rgba(8,181,166,.18) !important;
  box-shadow:0 10px 24px rgba(16,35,43,.08) !important;
}

html[data-theme="light"] .utility-button:hover{
  background:#ffffff !important;
  border-color:rgba(8,181,166,.34) !important;
}

html[data-theme="light"] .nav-dropdown-menu,
html[data-theme="light"] .download-menu{
  border-color:rgba(8,181,166,.20) !important;
  background:rgba(255,255,255,.97) !important;
  box-shadow:
    0 26px 70px rgba(16,35,43,.18),
    inset 0 1px 0 rgba(255,255,255,.94) !important;
}

html[data-theme="light"] .nav-dropdown-menu a{
  color:#38535d !important;
}

html[data-theme="light"] :is(.nav-dropdown-menu a:hover,.nav-dropdown-menu a.is-active,.nav-dropdown-menu a[aria-current="page"]){
  color:#067f77 !important;
  background:rgba(8,181,166,.11) !important;
  box-shadow:inset 0 0 0 1px rgba(8,181,166,.15) !important;
}


html[data-theme="light"] :is(
  .guided-generator-grid,
  .studio-grid.tool-shell-standard,
  .guided-grid.tool-shell-standard,
  .tool-shell-standard,
  .bulk-workflow-panel,
  .checker-upload-panel,
  .checker-result-panel,
  .legal-card,
  .panel
){
  border-color:rgba(8,181,166,.18) !important;
  background:
    radial-gradient(circle at 14% 8%,rgba(8,181,166,.10),transparent 19rem),
    radial-gradient(circle at 94% 14%,rgba(37,99,235,.055),transparent 18rem),
    rgba(255,255,255,.92) !important;
  box-shadow:
    0 34px 90px rgba(16,35,43,.12),
    inset 0 1px 0 rgba(255,255,255,.95) !important;
}

html[data-theme="light"] :is(
  .tool-workflow-standard,
  .tool-preview-panel-standard,
  .tool-unified-workflow,
  .tool-unified-companion,
  .guided-form-panel,
  .guided-preview-panel,
  .flow-panel,
  .companion-panel,
  .form-panel,
  .preview-panel
){
  border-color:rgba(8,181,166,.18) !important;
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(239,249,247,.92)) !important;
  box-shadow:0 18px 44px rgba(16,35,43,.08) !important;
}

html[data-theme="light"] :is(
  .bulk-step-card,
  .settings-block,
  .feature-card,
  .use-card,
  .guide-block,
  .fact-panel,
  .single-batch-cta-card,
  .batch-single-cta,
  .tool-preview-card-standard,
  .preview-card,
  .reliability-meter,
  .studio-reliability,
  .rebuilder-reliability,
  .checker-empty-state,
  .checker-behavior-card,
  .checker-meta-grid div,
  .bulk-template-summary>div,
  .bulk-template-columns-inline,
  .bulk-style-column,
  .bulk-export-settings,
  .bulk-preview-mini-copy
){
  border-color:rgba(8,181,166,.16) !important;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(239,249,247,.90)) !important;
  box-shadow:0 16px 38px rgba(16,35,43,.07) !important;
}

html[data-theme="light"] .tool-preview-card-standard{
  background:
    radial-gradient(circle at 50% 24%,rgba(8,181,166,.11),transparent 12rem),
    linear-gradient(180deg,#ffffff,#eff9f7) !important;
}

html[data-theme="light"] :is(.preview-ghost-state,.empty-preview,.bulk-qr-preview-empty,.studio-preview-empty){
  border-color:rgba(8,181,166,.22) !important;
  background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(234,247,244,.86)) !important;
}


html[data-theme="light"] :is(
  input[type="text"],input[type="url"],input[type="email"],input[type="tel"],input[type="datetime-local"],input[type="number"],
  textarea,select,input[type="color"]
){
  border-color:#c9e2dd !important;
  background:#ffffff !important;
  color:var(--text) !important;
  border-radius:16px !important;
  box-shadow:
    inset 0 1px 0 rgba(16,35,43,.035),
    0 8px 22px rgba(16,35,43,.045) !important;
}

html[data-theme="light"] :is(
  input[type="text"],input[type="url"],input[type="email"],input[type="tel"],input[type="datetime-local"],input[type="number"],
  textarea,select,input[type="color"]
):focus{
  border-color:rgba(8,181,166,.72) !important;
  box-shadow:
    0 0 0 4px rgba(8,181,166,.14),
    0 14px 30px rgba(16,35,43,.09) !important;
}

html[data-theme="light"] :is(.field span,.field label,.panel-heading h2,.panel-heading h3){
  color:#14313a !important;
}

html[data-theme="light"] small,
html[data-theme="light"] :is(.message,.checker-panel-note,.bulk-workflow-intro,.studio-guided-destination-text,.guided-step p){
  color:var(--muted);
}

html[data-theme="light"] :is(.logo-dropzone,.bulk-dropzone,.checker-dropzone){
  border-color:rgba(8,181,166,.34) !important;
  background:linear-gradient(180deg,rgba(8,181,166,.08),rgba(255,255,255,.78)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.88) !important;
}

html[data-theme="light"] :is(.logo-dropzone:hover,.logo-dropzone.drag-over,.bulk-dropzone:hover,.bulk-dropzone.is-dragover,.checker-dropzone:hover,.checker-dropzone.is-dragover){
  border-color:rgba(8,181,166,.76) !important;
  background:linear-gradient(180deg,rgba(8,181,166,.14),rgba(255,255,255,.92)) !important;
  box-shadow:
    0 0 0 4px rgba(8,181,166,.10),
    0 20px 42px rgba(16,35,43,.10) !important;
}

html[data-theme="light"] :is(.logo-drop-icon,.checker-drop-icon){
  color:#067f77 !important;
  border-color:rgba(8,181,166,.22) !important;
  background:rgba(8,181,166,.12) !important;
}


html[data-theme="light"] :is(.primary-button,.download-unified-button,.bulk-mobile-step-next,.single-mobile-step-next,.bulk-mobile-final-download){
  color:#ffffff !important;
  border:1px solid rgba(6,127,119,.18) !important;
  background:linear-gradient(135deg,#12c5b4 0%,#08b5a6 42%,#067f77 100%) !important;
  box-shadow:
    0 18px 38px rgba(8,181,166,.24),
    inset 0 1px 0 rgba(255,255,255,.28) !important;
}

html[data-theme="light"] :is(.primary-button,.download-unified-button,.bulk-mobile-step-next,.single-mobile-step-next,.bulk-mobile-final-download):hover:not(:disabled){
  transform:translateY(-2px) !important;
  filter:saturate(1.03);
  box-shadow:
    0 24px 48px rgba(8,181,166,.30),
    inset 0 1px 0 rgba(255,255,255,.30) !important;
}

html[data-theme="light"] .secondary-button{
  color:#ffffff !important;
  border:1px solid rgba(16,35,43,.10) !important;
  background:linear-gradient(135deg,#17333c,#10232b) !important;
  box-shadow:0 16px 34px rgba(16,35,43,.18) !important;
}

html[data-theme="light"] .secondary-button:hover:not(:disabled){
  transform:translateY(-2px) !important;
  background:linear-gradient(135deg,#1b3c46,#10232b) !important;
}

html[data-theme="light"] :is(.ghost-button,.preview-copy-button,.preview-expand-button,.upload-remove-button,.bulk-entry-mode-button){
  color:#16353d !important;
  border-color:rgba(8,181,166,.20) !important;
  background:rgba(255,255,255,.90) !important;
  box-shadow:0 12px 28px rgba(16,35,43,.07) !important;
}

html[data-theme="light"] :is(.ghost-button,.preview-copy-button,.preview-expand-button,.upload-remove-button,.bulk-entry-mode-button):hover:not(:disabled){
  color:#067f77 !important;
  border-color:rgba(8,181,166,.42) !important;
  background:#ffffff !important;
  transform:translateY(-1px) !important;
}

html[data-theme="light"] .bulk-entry-mode-button.is-active{
  color:#ffffff !important;
  border-color:transparent !important;
  background:linear-gradient(135deg,#12c5b4,#067f77) !important;
}


html[data-theme="light"] :is(.tool-step-rail-standard,.guided-progress-four,.tool-unified-progress){
  border-color:rgba(8,181,166,.28) !important;
  background:
    radial-gradient(circle at 50% 8%,rgba(8,181,166,.18),transparent 34%),
    linear-gradient(180deg,rgba(235,249,246,.98),rgba(255,255,255,.98)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 22px 48px rgba(16,35,43,.10) !important;
}

html[data-theme="light"] :is(.tool-step-rail-standard .guided-progress-step span,.guided-progress-four .guided-progress-step span){
  color:#38535d !important;
}

html[data-theme="light"] :is(.tool-step-rail-standard .guided-progress-step.is-active span,.guided-progress-four .guided-progress-step.is-active span){
  color:#ffffff !important;
}

html[data-theme="light"] :is(.badge,.preview-static-pill,.reliability-badge,.bulk-mobile-step-chip,.single-mobile-step-chip){
  border-color:rgba(8,181,166,.20) !important;
  background:rgba(255,255,255,.82) !important;
  color:#27515a !important;
  box-shadow:0 10px 24px rgba(16,35,43,.06) !important;
}

html[data-theme="light"] :is(.reliability-badge.excellent,.reliability-badge.strong){
  color:#067647 !important;
  background:rgba(18,183,106,.12) !important;
  border-color:rgba(18,183,106,.24) !important;
}

html[data-theme="light"] .reliability-bar{
  background:rgba(8,181,166,.12) !important;
}

html[data-theme="light"] .reliability-bar span{
  background:linear-gradient(90deg,#12c5b4,#2563eb) !important;
}

html[data-theme="light"] :is(.field-help-button,.field-validation-button){
  color:#45616b !important;
  border-color:rgba(8,181,166,.18) !important;
  background:rgba(255,255,255,.96) !important;
  box-shadow:0 10px 24px rgba(16,35,43,.08) !important;
}

html[data-theme="light"] :is(.field-tooltip,.field-validation-tooltip){
  border-color:rgba(8,181,166,.20) !important;
  background:rgba(255,255,255,.98) !important;
  box-shadow:0 24px 54px rgba(16,35,43,.18) !important;
}


html[data-theme="light"] :is(.site-footer,.tips-list p,.faq-list details,.legal-card,.fact-row,.comparison-table div,.learn-feature-strip){
  border-color:rgba(8,181,166,.14) !important;
}

html[data-theme="light"] .site-footer{
  background:rgba(255,255,255,.88) !important;
  box-shadow:inset 0 1px 0 rgba(8,181,166,.10);
}


@media (max-width:900px){
  html[data-theme="light"] .nav-right{
    border-color:rgba(8,181,166,.20) !important;
    background:rgba(255,255,255,.98) !important;
    box-shadow:0 30px 84px rgba(16,35,43,.20) !important;
  }

  html[data-theme="light"] .nav-links a,
  html[data-theme="light"] .nav-dropdown-toggle{
    border-color:rgba(8,181,166,.16) !important;
    background:rgba(244,251,250,.92) !important;
  }
}


html[data-theme="light"] .soft-section.use-explorer-section{
  color:var(--text) !important;
  background:
    radial-gradient(circle at 8% 14%, rgba(8,181,166,.15), transparent 24rem),
    radial-gradient(circle at 92% 8%, rgba(37,99,235,.08), transparent 23rem),
    linear-gradient(180deg, #edf9f7 0%, #f7fcfb 54%, #f2faf8 100%) !important;
  border-top:1px solid rgba(8,181,166,.10);
  border-bottom:1px solid rgba(8,181,166,.10);
}

html[data-theme="light"] .use-explorer-section .section-header h2{
  color:#10232b !important;
}

html[data-theme="light"] .use-explorer-section .section-header > p:not(.section-kicker){
  color:#566b75 !important;
}

html[data-theme="light"] .soft-section.use-explorer-section .section-kicker{
  color:#067f77 !important;
}

html[data-theme="light"] .soft-section.use-explorer-section .use-explorer-card{
  color:#10232b !important;
  border-color:rgba(8,181,166,.18) !important;
  background:
    radial-gradient(circle at 86% 14%, rgba(8,181,166,.10), transparent 10rem),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(239,249,247,.92)) !important;
  box-shadow:
    0 18px 42px rgba(16,35,43,.08),
    inset 0 1px 0 rgba(255,255,255,.95) !important;
}

html[data-theme="light"] .soft-section.use-explorer-section .use-explorer-card::before{
  background-color:#08b5a6 !important;
}

html[data-theme="light"] .soft-section.use-explorer-section .use-explorer-card::after{
  background:
    radial-gradient(circle at 88% 14%, rgba(8,181,166,.16), transparent 9rem),
    linear-gradient(135deg, transparent, rgba(255,255,255,.34)) !important;
}

html[data-theme="light"] .soft-section.use-explorer-section .use-explorer-card strong{
  color:#10232b !important;
}

html[data-theme="light"] .soft-section.use-explorer-section .use-explorer-card span{
  color:#566b75 !important;
}

html[data-theme="light"] .soft-section.use-explorer-section .use-explorer-card em{
  color:#067f77 !important;
  background:rgba(8,181,166,.11) !important;
  border-color:rgba(8,181,166,.22) !important;
}

html[data-theme="light"] .soft-section.use-explorer-section .use-explorer-card:hover,
html[data-theme="light"] .soft-section.use-explorer-section .use-explorer-card:focus-visible{
  color:#10232b !important;
  border-color:rgba(8,181,166,.42) !important;
  background:
    radial-gradient(circle at 86% 14%, rgba(8,181,166,.16), transparent 10rem),
    linear-gradient(180deg, #ffffff, #eefaf7) !important;
  box-shadow:
    0 24px 56px rgba(16,35,43,.13),
    inset 0 1px 0 rgba(255,255,255,.98) !important;
}


html :is(.nav-chevron,.download-chevron,.single-mobile-accordion-chevron,.bulk-mobile-accordion-chevron){
  overflow:hidden !important;
  text-indent:-9999px !important;
}

html :is(.single-mobile-accordion-chevron,.bulk-mobile-accordion-chevron){
  transform:none !important;
  color:inherit !important;
}

html .tool-first-home .guided-step.is-active .single-mobile-accordion-chevron,
html .bulk-mobile-accordion-toggle.is-active .bulk-mobile-accordion-chevron,
html .bulk-step-card.is-active .bulk-mobile-accordion-chevron{
  transform:none !important;
}


html[data-theme="light"] select,
html[data-theme="light"] .field select{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='m6 9 6 6 6-6' stroke='%23067f77' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(239,249,247,.94)) !important;
  background-position:
    calc(100% - 18px) 50%,
    0 0 !important;
  background-size:
    20px 20px,
    100% 100% !important;
  background-repeat:no-repeat !important;
}

html[data-theme="dark"] select,
html[data-theme="dark"] .field select{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='m6 9 6 6 6-6' stroke='%237ee7c9' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    linear-gradient(135deg, rgba(20,31,28,.94), rgba(24,38,34,.88)) !important;
  background-position:
    calc(100% - 18px) 50%,
    0 0 !important;
  background-size:
    20px 20px,
    100% 100% !important;
  background-repeat:no-repeat !important;
}

@media (max-width:980px){
  
  html[data-theme="light"] .tool-first-home :is(.guided-step,.guided-step.is-active:not([hidden])),
  html[data-theme="light"] .bulk-step-card{
    border-color:rgba(8,181,166,.16) !important;
    background:linear-gradient(180deg,rgba(255,255,255,.93),rgba(238,248,246,.92)) !important;
    box-shadow:0 14px 32px rgba(16,35,43,.06) !important;
  }

  html[data-theme="dark"] .tool-first-home :is(.guided-step,.guided-step.is-active:not([hidden])),
  html[data-theme="dark"] .bulk-step-card{
    border-color:rgba(126,231,201,.13) !important;
    background:linear-gradient(180deg,rgba(19,31,28,.96),rgba(16,27,24,.94)) !important;
    box-shadow:0 18px 36px rgba(0,0,0,.24) !important;
  }

  
  html[data-theme="light"] :is(.tool-first-home .single-mobile-accordion-toggle,.bulk-mobile-accordion-toggle){
    color:#16353d !important;
    border-color:rgba(8,181,166,.18) !important;
    background:
      radial-gradient(circle at 92% 18%,rgba(8,181,166,.10),transparent 7rem),
      linear-gradient(180deg,rgba(255,255,255,.98),rgba(236,248,245,.96)) !important;
    box-shadow:
      0 12px 28px rgba(16,35,43,.06),
      inset 0 1px 0 rgba(255,255,255,.96) !important;
  }

  html[data-theme="dark"] :is(.tool-first-home .single-mobile-accordion-toggle,.bulk-mobile-accordion-toggle){
    color:#e9f7f4 !important;
    border-color:rgba(126,231,201,.18) !important;
    background:
      radial-gradient(circle at 92% 18%,rgba(45,212,191,.10),transparent 7rem),
      linear-gradient(180deg,rgba(27,44,39,.94),rgba(18,31,28,.96)) !important;
    box-shadow:
      0 16px 32px rgba(0,0,0,.20),
      inset 0 1px 0 rgba(255,255,255,.04) !important;
  }

  
  html[data-theme="light"] .tool-first-home .guided-step.is-active .single-mobile-accordion-toggle,
  html[data-theme="light"] :is(.bulk-mobile-accordion-toggle.is-active,.bulk-step-card.is-active .bulk-mobile-accordion-toggle){
    color:#10232b !important;
    border-color:rgba(8,181,166,.44) !important;
    background:
      radial-gradient(circle at 92% 18%,rgba(8,181,166,.20),transparent 7rem),
      linear-gradient(135deg,rgba(214,247,241,.98),rgba(238,250,247,.98)) !important;
    box-shadow:
      0 16px 34px rgba(8,181,166,.16),
      inset 0 1px 0 rgba(255,255,255,.98) !important;
  }

  html[data-theme="dark"] .tool-first-home .guided-step.is-active .single-mobile-accordion-toggle,
  html[data-theme="dark"] :is(.bulk-mobile-accordion-toggle.is-active,.bulk-step-card.is-active .bulk-mobile-accordion-toggle){
    color:#f2fffc !important;
    border-color:rgba(45,212,191,.48) !important;
    background:
      radial-gradient(circle at 92% 18%,rgba(45,212,191,.20),transparent 7rem),
      linear-gradient(135deg,rgba(32,74,68,.96),rgba(18,42,38,.96)) !important;
    box-shadow:
      0 18px 36px rgba(0,0,0,.24),
      inset 0 1px 0 rgba(255,255,255,.06) !important;
  }

  
  html[data-theme="light"] .tool-first-home .guided-step.is-mobile-complete .single-mobile-accordion-toggle{
    border-color:rgba(8,181,166,.28) !important;
    background:linear-gradient(180deg,rgba(244,252,250,.99),rgba(231,247,243,.96)) !important;
  }

  html[data-theme="dark"] .tool-first-home .guided-step.is-mobile-complete .single-mobile-accordion-toggle{
    border-color:rgba(45,212,191,.28) !important;
    background:linear-gradient(180deg,rgba(27,47,42,.96),rgba(18,34,30,.96)) !important;
  }

  
  html[data-theme="light"] :is(.single-mobile-step-chip,.bulk-mobile-step-chip){
    color:#27515a !important;
    border-color:rgba(8,181,166,.24) !important;
    background:rgba(255,255,255,.92) !important;
    box-shadow:0 8px 18px rgba(16,35,43,.06) !important;
  }

  html[data-theme="dark"] :is(.single-mobile-step-chip,.bulk-mobile-step-chip){
    color:#dff8f3 !important;
    border-color:rgba(126,231,201,.20) !important;
    background:rgba(255,255,255,.08) !important;
    box-shadow:none !important;
  }

  html[data-theme="light"] .tool-first-home .guided-step.is-active .single-mobile-step-chip,
  html[data-theme="light"] :is(.bulk-mobile-accordion-toggle.is-active,.bulk-step-card.is-active .bulk-mobile-accordion-toggle) .bulk-mobile-step-chip{
    color:#ffffff !important;
    border-color:transparent !important;
    background:linear-gradient(135deg,#12c5b4,#067f77) !important;
    box-shadow:0 12px 24px rgba(8,181,166,.22) !important;
  }

  html[data-theme="dark"] .tool-first-home .guided-step.is-active .single-mobile-step-chip,
  html[data-theme="dark"] :is(.bulk-mobile-accordion-toggle.is-active,.bulk-step-card.is-active .bulk-mobile-accordion-toggle) .bulk-mobile-step-chip{
    color:#06201d !important;
    border-color:transparent !important;
    background:linear-gradient(135deg,#7ee7c9,#2dd4bf) !important;
    box-shadow:0 12px 24px rgba(45,212,191,.18) !important;
  }

  
  html[data-theme="light"] :is(.single-mobile-accordion-chevron,.bulk-mobile-accordion-chevron){
    color:#067f77 !important;
    border:1px solid rgba(8,181,166,.16) !important;
    border-radius:999px !important;
    background:rgba(255,255,255,.78) !important;
    box-shadow:0 8px 18px rgba(16,35,43,.05) !important;
  }

  html[data-theme="dark"] :is(.single-mobile-accordion-chevron,.bulk-mobile-accordion-chevron){
    color:#7ee7c9 !important;
    border:1px solid rgba(126,231,201,.18) !important;
    border-radius:999px !important;
    background:rgba(255,255,255,.06) !important;
    box-shadow:none !important;
  }

  html :is(.single-mobile-accordion-chevron,.bulk-mobile-accordion-chevron)::before{
    width:.56rem !important;
    height:.56rem !important;
    border-width:2.2px !important;
  }

  html :is(
    .tool-first-home .guided-step.is-active .single-mobile-accordion-chevron,
    .bulk-mobile-accordion-toggle.is-active .bulk-mobile-accordion-chevron,
    .bulk-step-card.is-active .bulk-mobile-accordion-chevron
  )::before{
    transform:translateY(.10rem) rotate(225deg) !important;
  }
}


.tool-mobile-card-heading,
.tool-mobile-accordion-toggle,
.tool-mobile-step-actions{
  display:none;
}

@media (max-width:1060px){
  html{
    --unified-mobile-sticky-top:92px;
  }

  
  html[data-batch-responsive] .batch-preview-panel.tool-preview-panel-standard,
  html[data-batch-builder] .batch-preview-panel.tool-preview-panel-standard{
    position:sticky !important;
    top:var(--batch-sticky-top, var(--unified-mobile-sticky-top)) !important;
    z-index:1180 !important;
    isolation:isolate !important;
    align-self:start !important;
    display:grid !important;
    grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr) !important;
    grid-template-areas:"batchPreview batchReliability" !important;
    grid-auto-rows:auto !important;
    align-items:stretch !important;
    gap:12px !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    padding:12px !important;
    border-radius:26px !important;
    overflow:visible !important;
    backdrop-filter:blur(18px) !important;
    box-shadow:
      0 18px 42px rgba(16,35,43,.14),
      0 0 0 1px color-mix(in srgb,var(--line) 82%,transparent) !important;
    box-sizing:border-box !important;
  }

  html[data-theme="dark"][data-batch-responsive] .batch-preview-panel.tool-preview-panel-standard,
  html[data-theme="dark"][data-batch-builder] .batch-preview-panel.tool-preview-panel-standard{
    background:rgba(21,33,29,.96) !important;
    box-shadow:
      0 20px 44px rgba(0,0,0,.34),
      0 0 0 1px rgba(126,231,201,.12) !important;
  }

  html[data-batch-responsive] .batch-preview-panel > .batch-preview-heading,
  html[data-batch-builder] .batch-preview-panel > .batch-preview-heading,
  html[data-batch-responsive] .batch-preview-panel > .batch-single-cta,
  html[data-batch-builder] .batch-preview-panel > .batch-single-cta{
    display:none !important;
  }

  html[data-batch-responsive] .batch-preview-panel > .batch-preview-card,
  html[data-batch-builder] .batch-preview-panel > .batch-preview-card{
    grid-area:batchPreview !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    min-height:166px !important;
    height:auto !important;
    align-self:stretch !important;
    margin:0 !important;
    padding:10px !important;
    border-radius:22px !important;
    display:grid !important;
    place-items:center !important;
    align-content:center !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
  }

  html[data-batch-responsive] .batch-preview-panel > .batch-preview-reliability,
  html[data-batch-builder] .batch-preview-panel > .batch-preview-reliability{
    grid-area:batchReliability !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    min-height:166px !important;
    height:auto !important;
    align-self:stretch !important;
    margin:0 !important;
    padding:12px !important;
    border-radius:22px !important;
    display:grid !important;
    align-content:center !important;
    grid-auto-rows:auto !important;
    gap:10px !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
  }

  html[data-batch-responsive] .batch-preview-panel .bulk-qr-preview-grid,
  html[data-batch-builder] .batch-preview-panel .bulk-qr-preview-grid,
  html[data-batch-responsive] .batch-preview-panel .bulk-qr-preview-empty,
  html[data-batch-builder] .batch-preview-panel .bulk-qr-preview-empty{
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    max-width:100% !important;
    max-height:100% !important;
    display:grid !important;
    place-items:center !important;
    align-content:center !important;
    box-sizing:border-box !important;
  }

  html[data-batch-responsive] .batch-preview-panel .bulk-qr-preview-empty,
  html[data-batch-builder] .batch-preview-panel .bulk-qr-preview-empty{
    padding:10px !important;
    border-radius:18px !important;
    text-align:center !important;
    overflow:hidden !important;
  }

  html[data-batch-responsive] .batch-preview-panel .ghost-qr-illustration,
  html[data-batch-builder] .batch-preview-panel .ghost-qr-illustration{
    width:min(100%,132px) !important;
    height:min(100%,132px) !important;
    max-width:132px !important;
    max-height:132px !important;
  }

  
  html[data-unified-tools] .tool-unified-shell.tool-shell-standard{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    grid-template-areas:
      "mobileHeading"
      "preview"
      "workflow" !important;
    align-items:start !important;
    gap:14px !important;
    overflow:visible !important;
  }

  html[data-unified-tools] .tool-mobile-card-heading{
    grid-area:mobileHeading !important;
    display:grid !important;
    gap:6px !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    padding:2px 4px 0 !important;
    box-sizing:border-box !important;
  }

  html[data-unified-tools] .tool-mobile-card-heading .tool-mobile-builder-kicker{
    display:inline-flex !important;
    align-items:center !important;
    gap:8px !important;
    width:fit-content !important;
    margin:0 !important;
    font-size:.82rem !important;
    line-height:1.2 !important;
  }

  html[data-unified-tools] .tool-mobile-card-heading h2{
    margin:0 !important;
    font-size:clamp(1.36rem,5vw,1.72rem) !important;
    line-height:1.08 !important;
    letter-spacing:-.045em !important;
  }

  html[data-unified-tools] .tool-unified-workflow.tool-workflow-standard{
    grid-area:workflow !important;
    order:initial !important;
    position:relative !important;
    z-index:1 !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    overflow:visible !important;
    box-sizing:border-box !important;
  }

  html[data-unified-tools] .tool-unified-workflow > :is(.flow-heading,.design-lab-heading,.panel-heading.studio-heading){
    display:none !important;
  }

  html[data-unified-tools] .tool-unified-companion.tool-preview-panel-standard{
    grid-area:preview !important;
    order:initial !important;
    position:sticky !important;
    top:var(--unified-mobile-sticky-top) !important;
    z-index:1180 !important;
    isolation:isolate !important;
    align-self:start !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    margin:0 !important;
    padding:12px !important;
    border-radius:26px !important;
    overflow:visible !important;
    backdrop-filter:blur(18px) !important;
    box-shadow:
      0 18px 42px rgba(16,35,43,.14),
      0 0 0 1px color-mix(in srgb,var(--line) 82%,transparent) !important;
    box-sizing:border-box !important;
  }

  html[data-theme="dark"][data-unified-tools] .tool-unified-companion.tool-preview-panel-standard{
    background:rgba(21,33,29,.96) !important;
    box-shadow:
      0 20px 44px rgba(0,0,0,.34),
      0 0 0 1px rgba(126,231,201,.12) !important;
  }

  html[data-unified-tools] .tool-unified-progress.tool-step-rail-standard,
  html[data-unified-tools] .guided-progress.tool-unified-progress{
    display:none !important;
    visibility:hidden !important;
    width:0 !important;
    min-width:0 !important;
    max-width:0 !important;
    height:0 !important;
    min-height:0 !important;
    max-height:0 !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    overflow:hidden !important;
  }

  html[data-unified-tools] .tool-unified-workflow > :is(.step-stack,.guided-step-stack,.design-lab-step-stack){
    display:grid !important;
    gap:10px !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    overflow:visible !important;
    box-sizing:border-box !important;
  }

  html[data-unified-tools] .tool-unified-workflow > .guided-actions{
    display:none !important;
  }

  
  html[data-unified-tools] .tool-unified-workflow .guided-step{
    display:grid !important;
    gap:12px !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    min-height:0 !important;
    margin:0 !important;
    padding:10px !important;
    border:1px solid color-mix(in srgb,var(--primary) 14%,var(--line)) !important;
    border-radius:24px !important;
    background:linear-gradient(180deg,color-mix(in srgb,var(--surface-2) 86%,transparent),color-mix(in srgb,var(--surface) 97%,transparent)) !important;
    box-shadow:inset 0 0 0 1px color-mix(in srgb,white 3%,transparent) !important;
    overflow:visible !important;
    box-sizing:border-box !important;
  }

  html[data-theme="dark"][data-unified-tools] .tool-unified-workflow .guided-step{
    background:linear-gradient(180deg,rgba(17,28,25,.94),rgba(11,18,16,.985)) !important;
  }

  html[data-unified-tools] .tool-mobile-accordion-toggle{
    display:grid !important;
    grid-template-columns:auto minmax(0,1fr) auto !important;
    align-items:center !important;
    gap:12px !important;
    width:100% !important;
    min-width:0 !important;
    min-height:58px !important;
    margin:0 !important;
    padding:10px 12px !important;
    border:1px solid color-mix(in srgb,var(--primary) 38%,var(--line)) !important;
    border-radius:20px !important;
    color:var(--text) !important;
    background:color-mix(in srgb,var(--surface-2) 74%,transparent) !important;
    box-shadow:none !important;
    text-align:left !important;
    box-sizing:border-box !important;
    cursor:pointer !important;
  }

  html[data-unified-tools] .guided-step.is-active .tool-mobile-accordion-toggle,
  html[data-unified-tools] .tool-mobile-accordion-toggle.is-active{
    border-color:color-mix(in srgb,var(--primary) 56%,var(--line)) !important;
    background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 15%,var(--surface-2)),color-mix(in srgb,var(--surface-2) 94%,transparent)) !important;
  }

  html[data-theme="dark"][data-unified-tools] .tool-mobile-accordion-toggle{
    background:color-mix(in srgb,var(--surface-2) 88%,transparent) !important;
  }

  html[data-unified-tools] .tool-mobile-step-chip{
    display:grid !important;
    place-items:center !important;
    width:46px !important;
    height:46px !important;
    min-width:46px !important;
    min-height:46px !important;
    border-radius:999px !important;
    color:color-mix(in srgb,var(--text) 86%,var(--primary)) !important;
    background:color-mix(in srgb,var(--surface) 78%,var(--primary) 9%) !important;
    font-size:.98rem !important;
    font-weight:850 !important;
    line-height:1 !important;
    box-sizing:border-box !important;
  }

  html[data-unified-tools] .tool-mobile-accordion-toggle strong{
    min-width:0 !important;
    margin:0 !important;
    color:var(--text) !important;
    font-size:1rem !important;
    font-weight:850 !important;
    line-height:1.12 !important;
    letter-spacing:-.03em !important;
  }

  html[data-unified-tools] .tool-mobile-accordion-chevron{
    position:relative !important;
    display:block !important;
    width:18px !important;
    height:18px !important;
    margin-inline:2px 0 !important;
    transform:rotate(45deg) !important;
    border-right:3px solid currentColor !important;
    border-bottom:3px solid currentColor !important;
    color:color-mix(in srgb,var(--primary-dark) 78%,var(--text)) !important;
    transition:transform .22s ease !important;
    box-sizing:border-box !important;
  }

  html[data-unified-tools] .guided-step.is-active .tool-mobile-accordion-chevron,
  html[data-unified-tools] .tool-mobile-accordion-toggle.is-active .tool-mobile-accordion-chevron{
    transform:rotate(225deg) translate(-2px,-2px) !important;
  }

  html[data-unified-tools] .guided-step.is-tool-mobile-collapsed > :not(.tool-mobile-accordion-toggle){
    display:none !important;
  }

  html[data-unified-tools] .tool-mobile-step-actions{
    display:grid !important;
    grid-template-columns:minmax(92px,.72fr) minmax(0,1.28fr) !important;
    gap:10px !important;
    align-items:center !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    margin-top:2px !important;
    box-sizing:border-box !important;
  }

  html[data-unified-tools] .tool-mobile-step-actions--forward{
    grid-template-columns:minmax(0,1fr) !important;
  }

  html[data-unified-tools] .tool-mobile-step-actions .ghost-button,
  html[data-unified-tools] .tool-mobile-step-actions .primary-button{
    width:100% !important;
    min-height:48px !important;
    height:48px !important;
    margin:0 !important;
    padding:0 14px !important;
    border-radius:18px !important;
    font-size:.96rem !important;
    line-height:1 !important;
  }

  
  html[data-unified-tools] .tool-unified-companion--design.tool-preview-panel-standard{
    display:grid !important;
    grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr) !important;
    grid-template-areas:"designPreview designReliability" !important;
    align-items:stretch !important;
    gap:12px !important;
  }

  html[data-unified-tools] .tool-unified-companion--design > .preview-heading,
  html[data-unified-tools] .tool-unified-companion--design > .design-lab-preview-cta{
    display:none !important;
  }

  html[data-unified-tools] .tool-unified-companion--design > .design-lab-preview-card{
    grid-area:designPreview !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    min-height:166px !important;
    height:auto !important;
    margin:0 !important;
    padding:10px !important;
    border-radius:22px !important;
    display:grid !important;
    place-items:center !important;
    align-content:center !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
  }

  html[data-unified-tools] .tool-unified-companion--design > .studio-reliability{
    grid-area:designReliability !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    min-height:166px !important;
    height:auto !important;
    margin:0 !important;
    padding:12px !important;
    border-radius:22px !important;
    display:grid !important;
    align-content:center !important;
    gap:10px !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
  }

  html[data-unified-tools] .tool-unified-companion--design .studio-preview-canvas{
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    max-width:100% !important;
    max-height:100% !important;
    display:grid !important;
    place-items:center !important;
    align-content:center !important;
    box-sizing:border-box !important;
  }

  html[data-unified-tools] .tool-unified-companion--design .ghost-qr-illustration{
    width:min(100%,132px) !important;
    height:min(100%,132px) !important;
    max-width:132px !important;
    max-height:132px !important;
  }

  
  html[data-unified-tools] .tool-unified-companion--rebuilder.tool-preview-panel-standard{
    display:grid !important;
    gap:10px !important;
  }

  html[data-unified-tools] .tool-unified-companion--rebuilder .rebuilder-preview-column{
    display:grid !important;
    grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr) !important;
    grid-template-areas:
      "rebuilderPreview rebuilderReliability"
      "rebuilderMessage rebuilderMessage"
      "rebuilderDownloads rebuilderDownloads" !important;
    align-items:stretch !important;
    gap:12px !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }

  html[data-unified-tools] .tool-unified-companion--rebuilder .rebuilder-preview-shell{
    grid-area:rebuilderPreview !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    min-height:166px !important;
    height:auto !important;
    margin:0 !important;
    padding:10px !important;
    border-radius:22px !important;
    display:grid !important;
    align-content:center !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
  }

  html[data-unified-tools] .tool-unified-companion--rebuilder .rebuilder-preview-heading{
    display:none !important;
  }

  html[data-unified-tools] .tool-unified-companion--rebuilder .rebuilder-preview-card,
  html[data-unified-tools] .tool-unified-companion--rebuilder #rebuilderQrPreview{
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    max-width:100% !important;
    max-height:100% !important;
    margin:0 !important;
    display:grid !important;
    place-items:center !important;
    align-content:center !important;
    box-sizing:border-box !important;
  }

  html[data-unified-tools] .tool-unified-companion--rebuilder .rebuilder-reliability{
    grid-area:rebuilderReliability !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    min-height:166px !important;
    height:auto !important;
    margin:0 !important;
    padding:12px !important;
    border-radius:22px !important;
    display:grid !important;
    align-content:center !important;
    gap:10px !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
  }

  html[data-unified-tools] .tool-unified-companion--rebuilder #rebuilderMessage{
    grid-area:rebuilderMessage !important;
    margin:0 !important;
  }

  html[data-unified-tools] .tool-unified-companion--rebuilder .rebuilder-download-compact{
    grid-area:rebuilderDownloads !important;
    margin:0 !important;
  }

  html[data-unified-tools] .tool-unified-companion--rebuilder .ghost-qr-illustration{
    width:min(100%,132px) !important;
    height:min(100%,132px) !important;
    max-width:132px !important;
    max-height:132px !important;
  }

  
  html[data-unified-tools] :is(
    .tool-unified-companion--scan,
    .tool-unified-companion--extractor,
    .tool-unified-companion--compare
  ).tool-preview-panel-standard{
    max-height:min(40svh,360px) !important;
    overflow:auto !important;
    overscroll-behavior:contain !important;
  }

  html[data-unified-tools] :is(
    .tool-unified-companion--scan,
    .tool-unified-companion--extractor,
    .tool-unified-companion--compare
  ) > .preview-heading{
    margin:0 !important;
  }

  html[data-unified-tools] :is(
    .tool-unified-companion--scan,
    .tool-unified-companion--extractor,
    .tool-unified-companion--compare
  ) > .preview-card{
    min-height:154px !important;
    margin:0 !important;
    border-radius:22px !important;
    box-sizing:border-box !important;
  }
}

@media (max-width:720px){
  html[data-batch-responsive] .batch-preview-panel.tool-preview-panel-standard,
  html[data-batch-builder] .batch-preview-panel.tool-preview-panel-standard,
  html[data-unified-tools] .tool-unified-companion--design.tool-preview-panel-standard,
  html[data-unified-tools] .tool-unified-companion--rebuilder .rebuilder-preview-column{
    grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr) !important;
    gap:10px !important;
  }

  html[data-batch-responsive] .batch-preview-panel > .batch-preview-card,
  html[data-batch-responsive] .batch-preview-panel > .batch-preview-reliability,
  html[data-batch-builder] .batch-preview-panel > .batch-preview-card,
  html[data-batch-builder] .batch-preview-panel > .batch-preview-reliability,
  html[data-unified-tools] .tool-unified-companion--design > .design-lab-preview-card,
  html[data-unified-tools] .tool-unified-companion--design > .studio-reliability,
  html[data-unified-tools] .tool-unified-companion--rebuilder .rebuilder-preview-shell,
  html[data-unified-tools] .tool-unified-companion--rebuilder .rebuilder-reliability{
    min-height:154px !important;
    border-radius:20px !important;
  }

  html[data-unified-tools] .tool-mobile-step-actions{
    grid-template-columns:minmax(84px,.7fr) minmax(0,1.3fr) !important;
    gap:8px !important;
  }

  html[data-unified-tools] .tool-mobile-step-actions--forward{
    grid-template-columns:minmax(0,1fr) !important;
  }

  html[data-unified-tools] .tool-mobile-step-actions .ghost-button,
  html[data-unified-tools] .tool-mobile-step-actions .primary-button{
    min-height:46px !important;
    height:46px !important;
    border-radius:17px !important;
    font-size:.92rem !important;
  }
}

@media (max-width:560px){
  html{
    --unified-mobile-sticky-top:88px;
  }

  html[data-unified-tools] .tool-unified-shell.tool-shell-standard{
    gap:12px !important;
  }

  html[data-unified-tools] .tool-unified-companion.tool-preview-panel-standard,
  html[data-batch-responsive] .batch-preview-panel.tool-preview-panel-standard,
  html[data-batch-builder] .batch-preview-panel.tool-preview-panel-standard{
    padding:10px !important;
    border-radius:24px !important;
  }

  html[data-unified-tools] .tool-mobile-accordion-toggle{
    min-height:54px !important;
    padding:9px 10px !important;
  }

  html[data-unified-tools] .tool-mobile-step-chip{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    min-height:42px !important;
  }
}


@media (max-width:1060px){
  html[data-unified-tools] .tool-mobile-builder-kicker[data-nav-icon]{
    display:inline-flex !important;
    align-items:center !important;
    gap:8px !important;
  }

  html[data-unified-tools] .tool-mobile-builder-kicker-icon{
    display:inline-block !important;
    flex:0 0 auto !important;
    width:1.04em !important;
    height:1.04em !important;
    background:currentColor !important;
    -webkit-mask-image:var(--nav-icon-mask) !important;
    mask-image:var(--nav-icon-mask) !important;
    -webkit-mask-repeat:no-repeat !important;
    mask-repeat:no-repeat !important;
    -webkit-mask-position:center !important;
    mask-position:center !important;
    -webkit-mask-size:contain !important;
    mask-size:contain !important;
  }
}


html{
  --tool-stage-mobile-nav-gap: clamp(14px, 2.1vw, 18px);
}


@media (min-width:1061px){
  html .primary-tool-stage,
  html .primary-tool-stage.container,
  html .tool-stage,
  html .tool-stage.container{
    width:100% !important;
    max-width:none !important;
    min-height:100svh !important;
    height:auto !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    grid-template-rows:minmax(12px,1fr) auto minmax(12px,1fr) !important;
    justify-items:center !important;
    align-items:stretch !important;
    align-content:stretch !important;
    padding-top:calc(var(--app-nav-top, 14px) + var(--app-nav-height, 62px)) !important;
    padding-right:0 !important;
    padding-bottom:0 !important;
    padding-left:0 !important;
    margin:0 auto !important;
    box-sizing:border-box !important;
  }

  html .primary-tool-stage > .batch-builder-scale-stage,
  html .primary-tool-stage > .tool-unified-shell,
  html .primary-tool-stage > .studio-grid,
  html .tool-stage > .tool-unified-shell,
  html .tool-stage > .guided-grid{
    grid-row:2 !important;
    align-self:center !important;
    justify-self:center !important;
    margin-top:0 !important;
    margin-bottom:0 !important;
  }
}


@media (max-width:1060px){
  html .primary-tool-stage,
  html .primary-tool-stage.container,
  html .tool-stage,
  html .tool-stage.container{
    min-height:0 !important;
    height:auto !important;
    display:block !important;
    grid-template-rows:none !important;
    align-content:start !important;
    align-items:start !important;
    justify-items:stretch !important;
    padding-top:var(--tool-stage-mobile-nav-gap) !important;
    padding-bottom:28px !important;
    margin:0 auto !important;
    box-sizing:border-box !important;
  }

  html .primary-tool-stage > .batch-builder-scale-stage,
  html .primary-tool-stage > .tool-unified-shell,
  html .primary-tool-stage > .studio-grid,
  html .tool-stage > .tool-unified-shell,
  html .tool-stage > .guided-grid{
    grid-row:auto !important;
    align-self:start !important;
    justify-self:stretch !important;
    margin-top:0 !important;
    margin-bottom:0 !important;
  }

  
  html .batch-builder-scale-stage,
  html .tool-studio-page-stage .batch-builder-scale-stage{
    margin-top:0 !important;
    padding-top:0 !important;
  }
}

@media (max-width:560px){
  html{
    --tool-stage-mobile-nav-gap:14px;
  }

  html .primary-tool-stage,
  html .primary-tool-stage.container,
  html .tool-stage,
  html .tool-stage.container{
    padding-bottom:24px !important;
  }
}


@media (min-width:1061px){
  html[data-tool-system] :is(
    .tool-first-home .tool-preview-panel-standard,
    .batch-preview-panel.tool-preview-panel-standard,
    .design-lab-preview-panel.tool-preview-panel-standard,
    .tool-unified-companion--rebuilder.tool-preview-panel-standard
  ){
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    grid-auto-flow:row !important;
    grid-auto-rows:max-content !important;
    align-content:start !important;
    align-items:start !important;
    justify-items:stretch !important;
    gap:var(--panel-gap,14px) !important;
  }

  html[data-tool-system] .batch-preview-panel.tool-preview-panel-standard > .batch-preview-heading,
  html[data-tool-system] .design-lab-preview-panel.tool-preview-panel-standard > .preview-heading,
  html[data-tool-system] .tool-unified-companion--rebuilder.tool-preview-panel-standard .rebuilder-preview-heading{
    order:1 !important;
  }

  html[data-tool-system] .batch-preview-panel.tool-preview-panel-standard > .batch-preview-card,
  html[data-tool-system] .design-lab-preview-panel.tool-preview-panel-standard > .design-lab-preview-card,
  html[data-tool-system] .tool-unified-companion--rebuilder.tool-preview-panel-standard .rebuilder-preview-card{
    order:2 !important;
  }

  html[data-tool-system] .batch-preview-panel.tool-preview-panel-standard > .batch-preview-reliability,
  html[data-tool-system] .design-lab-preview-panel.tool-preview-panel-standard > .studio-reliability,
  html[data-tool-system] .tool-unified-companion--rebuilder.tool-preview-panel-standard .rebuilder-reliability{
    order:3 !important;
  }

  html[data-tool-system] .batch-preview-panel.tool-preview-panel-standard > .batch-single-cta,
  html[data-tool-system] .design-lab-preview-panel.tool-preview-panel-standard > .design-lab-preview-cta,
  html[data-tool-system] .tool-unified-companion--rebuilder.tool-preview-panel-standard .rebuilder-download-compact{
    order:4 !important;
  }

  html[data-tool-system] .tool-unified-companion--rebuilder.tool-preview-panel-standard .rebuilder-preview-column{
    display:contents !important;
  }

  html[data-tool-system] .tool-unified-companion--rebuilder.tool-preview-panel-standard #rebuilderMessage{
    order:5 !important;
    margin:0 !important;
  }

  
  html[data-tool-system] :is(
    .batch-preview-panel.tool-preview-panel-standard > .batch-preview-card,
    .design-lab-preview-panel.tool-preview-panel-standard > .design-lab-preview-card,
    .tool-unified-companion--rebuilder.tool-preview-panel-standard .rebuilder-preview-card
  ){
    width:100% !important;
    height:var(--preview-card-height,318px) !important;
    min-height:var(--preview-card-height,318px) !important;
    max-height:var(--preview-card-height,318px) !important;
    margin:0 !important;
    padding:16px !important;
    border-radius:var(--card-radius,28px) !important;
    box-sizing:border-box !important;
  }

  html[data-tool-system] :is(
    .batch-preview-panel.tool-preview-panel-standard > .batch-preview-reliability,
    .design-lab-preview-panel.tool-preview-panel-standard > .studio-reliability,
    .tool-unified-companion--rebuilder.tool-preview-panel-standard .rebuilder-reliability
  ){
    width:100% !important;
    margin:0 !important;
  }
}


html[data-tool-system]{
  --tool-shell-nav-gap-desktop: clamp(104px, 13.5vh, 124px);
  --tool-shell-nav-gap-mobile: clamp(12px, 2.2vh, 22px);
}

@media (min-width:1061px){
  
  html[data-tool-system] body > main{
    padding-top:0 !important;
  }

  html[data-tool-system] :is(.tool-first-home, .primary-tool-stage, .tool-stage),
  html[data-tool-system] :is(.tool-first-home.container, .primary-tool-stage.container, .tool-stage.container){
    width:100% !important;
    max-width:none !important;
    min-height:100svh !important;
    height:auto !important;
    display:block !important;
    grid-template-rows:none !important;
    align-content:start !important;
    align-items:start !important;
    justify-items:stretch !important;
    box-sizing:border-box !important;
    margin:0 auto !important;
    padding-top:calc(var(--app-nav-top, 12px) + var(--app-nav-height, 64px) + var(--tool-shell-nav-gap-desktop)) !important;
    padding-right:0 !important;
    padding-bottom:clamp(24px, 4vh, 42px) !important;
    padding-left:0 !important;
  }

  html[data-tool-system] .tool-first-home > .guided-generator-grid,
  html[data-tool-system] .primary-tool-stage > .batch-builder-scale-stage,
  html[data-tool-system] .primary-tool-stage > .tool-unified-shell,
  html[data-tool-system] .primary-tool-stage > .studio-grid,
  html[data-tool-system] .tool-stage > .tool-unified-shell,
  html[data-tool-system] .tool-stage > .guided-grid{
    grid-row:auto !important;
    align-self:start !important;
    justify-self:center !important;
    margin-top:0 !important;
    margin-bottom:0 !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  html[data-tool-system] .primary-tool-stage > .batch-builder-scale-stage{
    width:100% !important;
    max-width:none !important;
    padding-top:0 !important;
  }
}

@media (min-width:1061px) and (max-height:759px){
  html[data-tool-system]{
    --tool-shell-nav-gap-desktop: clamp(68px, 9.6vh, 84px);
  }
}

@media (max-width:1060px){
  
  html[data-tool-system] body > main{
    padding-top:calc(var(--app-nav-top, 9px) + var(--app-nav-height, 60px)) !important;
  }

  html[data-tool-system] :is(.tool-first-home, .primary-tool-stage, .tool-stage),
  html[data-tool-system] :is(.tool-first-home.container, .primary-tool-stage.container, .tool-stage.container){
    min-height:0 !important;
    height:auto !important;
    display:block !important;
    grid-template-rows:none !important;
    align-content:start !important;
    align-items:start !important;
    justify-items:stretch !important;
    box-sizing:border-box !important;
    margin:0 auto !important;
    padding-top:var(--tool-shell-nav-gap-mobile) !important;
    padding-bottom:clamp(24px, 3.4vh, 34px) !important;
  }

  html[data-tool-system] .tool-first-home > .guided-generator-grid,
  html[data-tool-system] .primary-tool-stage > .batch-builder-scale-stage,
  html[data-tool-system] .primary-tool-stage > .tool-unified-shell,
  html[data-tool-system] .primary-tool-stage > .studio-grid,
  html[data-tool-system] .tool-stage > .tool-unified-shell,
  html[data-tool-system] .tool-stage > .guided-grid{
    grid-row:auto !important;
    align-self:start !important;
    justify-self:stretch !important;
    margin-top:0 !important;
    margin-bottom:0 !important;
  }

  html[data-tool-system] .primary-tool-stage > .batch-builder-scale-stage,
  html[data-tool-system] .tool-studio-page-stage .batch-builder-scale-stage{
    padding-top:0 !important;
    margin-top:0 !important;
  }
}

@media (max-width:560px){
  html[data-tool-system]{
    --tool-shell-nav-gap-mobile:14px;
  }
}


html[data-tool-system]{
  --tool-preview-square-desktop: 236px;
  --tool-preview-square-mobile: 188px;
}

@media (min-width:1061px){
  html[data-tool-system] :is(
    .tool-preview-panel-standard .qr-preview,
    .tool-preview-panel-standard .bulk-qr-thumb,
    .tool-preview-panel-standard .bulk-qr-preview-empty,
    .tool-preview-panel-standard .bulk-qr-preview-grid,
    .tool-preview-panel-standard .studio-preview-stage,
    .tool-preview-panel-standard .studio-preview-empty,
    .tool-preview-panel-standard .rebuilder-preview-card .qr-preview
  ){
    width:min(100%, var(--tool-preview-square-desktop)) !important;
    height:min(100%, var(--tool-preview-square-desktop)) !important;
    min-width:min(100%, var(--tool-preview-square-desktop)) !important;
    min-height:min(100%, var(--tool-preview-square-desktop)) !important;
    max-width:var(--tool-preview-square-desktop) !important;
    max-height:var(--tool-preview-square-desktop) !important;
    aspect-ratio:1 / 1 !important;
    margin-inline:auto !important;
    align-self:center !important;
    justify-self:center !important;
    box-sizing:border-box !important;
  }

  

  html[data-tool-system] .design-lab-preview-card .studio-preview-canvas:not([hidden]){
    width:100% !important;
    height:100% !important;
    max-width:100% !important;
    max-height:100% !important;
    aspect-ratio:auto !important;
    display:grid !important;
    place-items:center !important;
  }

  html[data-tool-system] .design-lab-preview-card .studio-preview-canvas:not([hidden]) svg{
    width:auto !important;
    height:auto !important;
    max-width:100% !important;
    max-height:100% !important;
    object-fit:contain !important;
  }
}

@media (max-width:1060px){
  html[data-tool-system] :is(
    .tool-preview-panel-standard .qr-preview,
    .tool-preview-panel-standard .bulk-qr-thumb,
    .tool-preview-panel-standard .bulk-qr-preview-empty,
    .tool-preview-panel-standard .bulk-qr-preview-grid,
    .tool-preview-panel-standard .studio-preview-stage,
    .tool-preview-panel-standard .studio-preview-empty,
    .tool-preview-panel-standard .rebuilder-preview-card .qr-preview
  ){
    width:min(100%, var(--tool-preview-square-mobile)) !important;
    height:min(100%, var(--tool-preview-square-mobile)) !important;
    min-width:min(100%, var(--tool-preview-square-mobile)) !important;
    min-height:min(100%, var(--tool-preview-square-mobile)) !important;
    max-width:var(--tool-preview-square-mobile) !important;
    max-height:var(--tool-preview-square-mobile) !important;
    aspect-ratio:1 / 1 !important;
    margin-inline:auto !important;
    align-self:center !important;
    justify-self:center !important;
    box-sizing:border-box !important;
  }

  

  html[data-tool-system] .design-lab-preview-card .studio-preview-canvas:not([hidden]){
    width:100% !important;
    height:100% !important;
    max-width:100% !important;
    max-height:100% !important;
    aspect-ratio:auto !important;
    display:grid !important;
    place-items:center !important;
  }
}


html{
  --icon-copy: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20fill=%22black%22%20d=%22M9%208.5A2.5%202.5%200%200%201%2011.5%206H18a2.5%202.5%200%200%201%202.5%202.5V18a2.5%202.5%200%200%201-2.5%202.5h-6.5A2.5%202.5%200%200%201%209%2018V8.5Zm2.5-.5a.5.5%200%200%200-.5.5V18c0%20.28.22.5.5.5H18a.5.5%200%200%200%20.5-.5V8.5A.5.5%200%200%200%2018%208h-6.5ZM5.5%203.5H14a2.5%202.5%200%200%201%202.45%202H14a.5.5%200%200%200-.5-.5h-8a.5.5%200%200%200-.5.5v9c0%20.28.22.5.5.5H7v2H5.5A2.5%202.5%200%200%201%203%2014.5v-9A2.5%202.5%200%200%201%205.5%203.5Z%22/%3E%3C/svg%3E");
}

html .settings-static-block{
  display:grid !important;
  gap:0 !important;
  overflow:hidden !important;
}

html .settings-static-block .settings-static-heading{
  margin:0 !important;
  padding:clamp(10px, .95vw, 15px) clamp(12px, 1.15vw, 16px) clamp(8px, .8vw, 12px) !important;
  color:var(--text) !important;
  font-size:clamp(.9rem, .92vw, 1rem) !important;
  font-weight:850 !important;
  line-height:1.2 !important;
  letter-spacing:-.02em !important;
}

html .settings-static-block > .settings-grid{
  padding-top:0 !important;
}

@media (max-width:1060px){
  html .settings-static-block .settings-static-heading{
    padding:10px 12px 8px !important;
    font-size:.94rem !important;
  }
}


@media (min-width:1061px){
  html[data-tool-system] body :is(
    .tool-first-home .tool-workflow-standard,
    .tool-workflow-standard,
    .tool-unified-workflow.tool-workflow-standard
  ) > .guided-actions{
    grid-column:2 / 3 !important;
    grid-row:3 !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    align-self:end !important;
    justify-self:stretch !important;
    box-sizing:border-box !important;
  }
}


html .preview-copy-button::before{
  -webkit-mask-image:var(--icon-copy) !important;
  mask-image:var(--icon-copy) !important;
}


html .single-design-lab-cta-button[data-nav-icon="design"]{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:.68rem !important;
}

html .single-design-lab-cta-button[data-nav-icon="design"]::before{
  content:"" !important;
  display:inline-block !important;
  flex:0 0 auto !important;
  width:1.12rem !important;
  height:1.12rem !important;
  background-color:currentColor !important;
  -webkit-mask-image:var(--nav-icon-mask) !important;
  mask-image:var(--nav-icon-mask) !important;
  -webkit-mask-size:contain !important;
  mask-size:contain !important;
  -webkit-mask-position:center !important;
  mask-position:center !important;
  -webkit-mask-repeat:no-repeat !important;
  mask-repeat:no-repeat !important;
}


@media (min-width:1061px){
  html[data-tool-system][data-single-builder] body[data-single-guided-step] .tool-first-home .guided-progress-four.tool-step-rail-standard,
  html[data-tool-system][data-single-builder] body[data-single-guided-step]:not([data-single-guided-step="1"]) .tool-first-home .guided-progress-four.tool-step-rail-standard{
    grid-column:1 !important;
    grid-row:2 / 4 !important;
    align-self:stretch !important;
    justify-self:stretch !important;
    width:var(--rail-width, var(--step-rail-width, 96px)) !important;
    min-width:var(--rail-width, var(--step-rail-width, 96px)) !important;
    max-width:var(--rail-width, var(--step-rail-width, 96px)) !important;
    height:100% !important;
    min-height:0 !important;
    max-height:none !important;
    box-sizing:border-box !important;
  }
}


@media (min-width:1061px){
  html[data-tool-system]{
    --tool-shell-pad-desktop: clamp(18px, 1.28vw, 20px);
    --tool-shell-gap-desktop: clamp(18px, 1.28vw, 20px);
    --tool-workflow-pad-desktop: clamp(18px, 1.28vw, 20px);
    --tool-workflow-rail-gap-desktop: clamp(18px, 1.28vw, 20px);
    --tool-preview-pad-desktop: clamp(18px, 1.28vw, 20px);
  }

  
  html[data-single-builder] .builder-scale-stage > .guided-generator-grid.tool-shell-standard,
  html[data-batch-responsive] .batch-builder-scale-stage > .bulk-tool-grid.guided-grid.tool-studio-shell--batch.tool-shell-standard,
  html[data-batch-builder] .batch-builder-scale-stage > .bulk-tool-grid.guided-grid.tool-studio-shell--batch.tool-shell-standard,
  html[data-tool-system] .design-lab-grid.tool-shell-standard,
  html[data-unified-tools] .tool-unified-shell.tool-shell-standard{
    padding: var(--tool-shell-pad-desktop) !important;
    gap: var(--tool-shell-gap-desktop) !important;
    box-sizing: border-box !important;
  }

  
  html[data-single-builder] .guided-form-panel.tool-workflow-standard,
  html[data-batch-responsive] .bulk-workflow-panel.batch-flow-panel.tool-workflow-standard,
  html[data-batch-builder] .bulk-workflow-panel.batch-flow-panel.tool-workflow-standard,
  html[data-tool-system] .design-lab-form.tool-workflow-standard,
  html[data-unified-tools] .tool-unified-workflow.tool-workflow-standard{
    padding: var(--tool-workflow-pad-desktop) !important;
    column-gap: var(--tool-workflow-rail-gap-desktop) !important;
    box-sizing: border-box !important;
  }

  
  html[data-single-builder] .guided-preview-panel.tool-preview-panel-standard,
  html[data-batch-responsive] .batch-preview-panel.tool-preview-panel-standard,
  html[data-batch-builder] .batch-preview-panel.tool-preview-panel-standard,
  html[data-tool-system] .design-lab-preview-panel.tool-preview-panel-standard,
  html[data-unified-tools] .tool-unified-companion.tool-preview-panel-standard{
    padding: var(--tool-preview-pad-desktop) !important;
    box-sizing: border-box !important;
  }

  
  html[data-batch-builder] .bulk-template-summary,
  html[data-batch-responsive] .bulk-template-summary{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    gap:clamp(12px, .95vw, 14px) !important;
    align-items:stretch !important;
  }

  html[data-batch-builder] .bulk-template-summary > div,
  html[data-batch-responsive] .bulk-template-summary > div{
    display:grid !important;
    grid-template-rows:auto minmax(0,auto) !important;
    align-content:start !important;
    align-items:start !important;
    gap:8px !important;
    height:100% !important;
    min-height:112px !important;
    padding:14px !important;
    box-sizing:border-box !important;
  }

  html[data-batch-builder] .bulk-template-summary :is(strong,p,code),
  html[data-batch-responsive] .bulk-template-summary :is(strong,p,code){
    margin:0 !important;
    line-height:1.35 !important;
  }

  html[data-batch-builder] .bulk-template-summary strong,
  html[data-batch-responsive] .bulk-template-summary strong{
    align-self:start !important;
  }

  html[data-batch-builder] .bulk-template-summary p,
  html[data-batch-builder] .bulk-template-summary code,
  html[data-batch-responsive] .bulk-template-summary p,
  html[data-batch-responsive] .bulk-template-summary code{
    align-self:start !important;
  }
}


@media (min-width:1061px){
  html[data-tool-system]{
    --tool-geometry-shell-width: min(1320px, calc(100vw - clamp(24px, 4vw, 64px)));
    --tool-geometry-shell-pad: clamp(18px, 1.28vw, 20px);
    --tool-geometry-shell-gap: clamp(18px, 1.28vw, 20px);
    --tool-geometry-panel-pad: clamp(18px, 1.28vw, 20px);
    --tool-geometry-rail-gap: clamp(18px, 1.28vw, 20px);
    --tool-geometry-left-column: minmax(0, 1.52fr);
    --tool-geometry-right-column: minmax(308px, .58fr);
  }

  
  html[data-single-builder] .builder-scale-stage > .guided-generator-grid.tool-shell-standard,
  html[data-batch-responsive] .batch-builder-scale-stage > .bulk-tool-grid.guided-grid.tool-studio-shell--batch.tool-shell-standard,
  html[data-batch-builder] .batch-builder-scale-stage > .bulk-tool-grid.guided-grid.tool-studio-shell--batch.tool-shell-standard,
  html[data-unified-tools] .studio-grid.design-lab-grid.tool-shell-standard,
  html[data-unified-tools] .guided-grid.tool-unified-shell.tool-shell-standard,
  html[data-unified-tools] .tool-unified-shell.tool-shell-standard{
    width:var(--tool-geometry-shell-width) !important;
    max-width:100% !important;
    grid-template-columns:var(--tool-geometry-left-column) var(--tool-geometry-right-column) !important;
    gap:var(--tool-geometry-shell-gap) !important;
    padding:var(--tool-geometry-shell-pad) !important;
    box-sizing:border-box !important;
  }

  
  html[data-single-builder] .guided-form-panel.tool-workflow-standard,
html[data-batch-responsive] .bulk-workflow-panel.batch-flow-panel.tool-workflow-standard,
html[data-batch-builder] .bulk-workflow-panel.batch-flow-panel.tool-workflow-standard,
html[data-unified-tools] .flow-panel.tool-unified-workflow.tool-workflow-standard,
html[data-unified-tools] .tool-unified-workflow.tool-workflow-standard{
    padding:var(--tool-geometry-panel-pad) !important;
    column-gap:var(--tool-geometry-rail-gap) !important;
    box-sizing:border-box !important;
  }

  
  html[data-single-builder] .guided-preview-panel.tool-preview-panel-standard,
  html[data-batch-responsive] .batch-preview-panel.tool-preview-panel-standard,
  html[data-batch-builder] .batch-preview-panel.tool-preview-panel-standard,
  html[data-unified-tools] .design-lab-preview-panel.tool-preview-panel-standard,
  html[data-unified-tools] .tool-unified-companion.tool-preview-panel-standard{
    padding:var(--tool-geometry-panel-pad) !important;
    box-sizing:border-box !important;
  }

  
  html[data-tool-system] .tool-step-rail-standard,
  html[data-batch-responsive] .tool-progress-spine--batch,
  html[data-batch-builder] .tool-progress-spine--batch,
  html[data-unified-tools] .tool-unified-progress{
    width:var(--rail-width, 96px) !important;
    min-width:var(--rail-width, 96px) !important;
    max-width:var(--rail-width, 96px) !important;
  }

  
  html[data-batch-builder] .bulk-template-summary,
  html[data-batch-responsive] .bulk-template-summary{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows:1fr !important;
    align-items:stretch !important;
    gap:clamp(12px, .95vw, 14px) !important;
    width:100% !important;
    box-sizing:border-box !important;
  }

  html[data-batch-builder] .bulk-template-summary > div,
  html[data-batch-responsive] .bulk-template-summary > div{
    height:100% !important;
    min-height:112px !important;
    padding:14px 16px !important;
    display:grid !important;
    grid-template-rows:auto auto !important;
    align-content:center !important;
    align-items:start !important;
    gap:8px !important;
    box-sizing:border-box !important;
  }

  html[data-batch-builder] .bulk-template-summary :is(strong,p,code),
  html[data-batch-responsive] .bulk-template-summary :is(strong,p,code){
    margin:0 !important;
    line-height:1.35 !important;
  }

  html[data-batch-builder] .bulk-template-summary :is(p,code),
  html[data-batch-responsive] .bulk-template-summary :is(p,code){
    align-self:start !important;
  }
}


@media (min-width:1061px){
  html[data-batch-builder] .bulk-template-summary > .bulk-template-columns-inline,
  html[data-batch-responsive] .bulk-template-summary > .bulk-template-columns-inline{
    margin-top:0 !important;
    margin-bottom:0 !important;
    align-self:stretch !important;
  }

  html[data-batch-builder] .bulk-template-summary > div,
  html[data-batch-responsive] .bulk-template-summary > div{
    min-height:128px !important;
  }
}


@media (min-width:1061px){
  html[data-tool-system][data-batch-responsive] .bulk-workflow-panel.batch-flow-panel.tool-studio-workflow.tool-workflow-standard,
  html[data-tool-system][data-batch-builder] .bulk-workflow-panel.batch-flow-panel.tool-studio-workflow.tool-workflow-standard{
    grid-template-columns:var(--rail-width, 96px) minmax(0, 1fr) !important;
    column-gap:var(--tool-geometry-rail-gap, clamp(18px, 1.28vw, 20px)) !important;
  }

  html[data-tool-system][data-batch-responsive] .bulk-workflow-panel.batch-flow-panel.tool-studio-workflow.tool-workflow-standard > nav.guided-progress.tool-progress-spine.tool-progress-spine--batch.tool-step-rail-standard,
  html[data-tool-system][data-batch-builder] .bulk-workflow-panel.batch-flow-panel.tool-studio-workflow.tool-workflow-standard > nav.guided-progress.tool-progress-spine.tool-progress-spine--batch.tool-step-rail-standard{
    width:var(--rail-width, 96px) !important;
    min-width:var(--rail-width, 96px) !important;
    max-width:var(--rail-width, 96px) !important;
    padding:20px 0 !important;
    gap:4px !important;
    justify-content:space-between !important;
    align-items:stretch !important;
    box-sizing:border-box !important;
  }
}


html[data-tool-system]{
  --tool-placeholder-qr-size-desktop: 156px;
  --tool-placeholder-qr-size-mobile: 122px;
}

@media (min-width:1061px){
  html[data-tool-system] :is(
    .tool-preview-panel-standard .ghost-qr-illustration,
    #qrPreview .ghost-qr-illustration,
    .batch-preview-panel .ghost-qr-illustration,
    .design-lab-preview-panel .ghost-qr-illustration,
    .tool-unified-companion--rebuilder .ghost-qr-illustration
  ){
    width:var(--tool-placeholder-qr-size-desktop) !important;
    height:var(--tool-placeholder-qr-size-desktop) !important;
    min-width:var(--tool-placeholder-qr-size-desktop) !important;
    min-height:var(--tool-placeholder-qr-size-desktop) !important;
    max-width:var(--tool-placeholder-qr-size-desktop) !important;
    max-height:var(--tool-placeholder-qr-size-desktop) !important;
    aspect-ratio:1 / 1 !important;
    object-fit:contain !important;
    margin:auto !important;
    flex:0 0 auto !important;
  }
}

@media (max-width:1060px){
  html[data-tool-system] :is(
    .tool-preview-panel-standard .ghost-qr-illustration,
    #qrPreview .ghost-qr-illustration,
    .batch-preview-panel .ghost-qr-illustration,
    .design-lab-preview-panel .ghost-qr-illustration,
    .tool-unified-companion--rebuilder .ghost-qr-illustration
  ){
    width:var(--tool-placeholder-qr-size-mobile) !important;
    height:var(--tool-placeholder-qr-size-mobile) !important;
    min-width:var(--tool-placeholder-qr-size-mobile) !important;
    min-height:var(--tool-placeholder-qr-size-mobile) !important;
    max-width:var(--tool-placeholder-qr-size-mobile) !important;
    max-height:var(--tool-placeholder-qr-size-mobile) !important;
    aspect-ratio:1 / 1 !important;
    object-fit:contain !important;
    margin:auto !important;
    flex:0 0 auto !important;
  }
}


@media (min-width:1061px){
  html[data-tool-system] :is(
    .guided-preview-panel.tool-preview-panel-standard,
    .batch-preview-panel.tool-preview-panel-standard,
    .design-lab-preview-panel.tool-preview-panel-standard,
    .tool-unified-companion--rebuilder.tool-preview-panel-standard
  ){
    align-self:start !important;
    height:max-content !important;
    min-height:0 !important;
    max-height:none !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    grid-auto-flow:row !important;
    grid-auto-rows:max-content !important;
    align-content:start !important;
    align-items:start !important;
    justify-items:stretch !important;
    gap:var(--panel-gap,14px) !important;
    overflow:visible !important;
  }

  
  html[data-single-builder] .guided-generator-grid.tool-shell-standard,
  html[data-batch-responsive] .bulk-tool-grid.guided-grid.tool-studio-shell--batch.tool-shell-standard,
  html[data-batch-builder] .bulk-tool-grid.guided-grid.tool-studio-shell--batch.tool-shell-standard,
  html[data-unified-tools] .studio-grid.design-lab-grid.tool-shell-standard,
  html[data-unified-tools] .guided-grid.tool-unified-shell.tool-shell-standard,
  html[data-unified-tools] .tool-unified-shell.tool-shell-standard{
    align-items:start !important;
  }

  
  html[data-tool-system] :is(
    .guided-preview-panel.tool-preview-panel-standard > .tool-preview-card-standard,
    .batch-preview-panel.tool-preview-panel-standard > .tool-preview-card-standard,
    .design-lab-preview-panel.tool-preview-panel-standard > .tool-preview-card-standard,
    .tool-unified-companion--rebuilder.tool-preview-panel-standard .tool-preview-card-standard
  ){
    height:var(--preview-card-height,318px) !important;
    min-height:var(--preview-card-height,318px) !important;
    max-height:var(--preview-card-height,318px) !important;
  }

  
  html[data-tool-system] .tool-preview-panel-standard :is(
    .empty-preview,
    .bulk-qr-preview-empty,
    .studio-preview-empty
  ){
    width:95% !important;
    height:95% !important;
    min-width:0 !important;
    min-height:0 !important;
    max-width:95% !important;
    max-height:95% !important;
    margin:auto !important;
    display:grid !important;
    place-content:center !important;
    place-items:center !important;
    gap:8px !important;
    padding:12px !important;
    border-radius:20px !important;
    box-sizing:border-box !important;
  }

  
  

  html[data-tool-system] .design-lab-preview-card .studio-preview-canvas:not([hidden]){
    width:100% !important;
    height:100% !important;
    max-width:100% !important;
    max-height:100% !important;
    margin:0 !important;
    padding:0 !important;
    display:grid !important;
    place-items:center !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
  }

  html[data-tool-system] .design-lab-preview-card .studio-preview-canvas:not([hidden]) svg{
    width:auto !important;
    height:auto !important;
    max-width:100% !important;
    max-height:100% !important;
    object-fit:contain !important;
  }
}


@media (min-width:1061px){
  html[data-tool-system][data-unified-tools] .studio-grid.design-lab-grid.tool-shell-standard > aside.design-lab-preview-panel.tool-preview-panel-standard.tool-unified-companion--design,
  html[data-tool-system][data-unified-tools] .studio-grid.design-lab-grid.tool-shell-standard > .design-lab-preview-panel.tool-preview-panel-standard.tool-unified-companion--design{
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    align-self:start !important;
    overflow:visible !important;
    scrollbar-gutter:auto !important;
  }

  html[data-tool-system][data-unified-tools] .studio-grid.design-lab-grid.tool-shell-standard{
    align-items:start !important;
  }
}


@media (min-width:1061px){
  

  

  
}

@media (max-width:1060px){
  

  

  
}


html[data-tool-system]{
  --canonical-preview-stage-desktop: 236px;
  --canonical-preview-stage-responsive: 168px;
  --canonical-preview-ghost-inset: 95%;
}

@media (min-width:1061px){
  html[data-tool-system] :is(
    #qrPreview.qr-preview,
    #studioPreviewStage.qr-preview,
    #rebuilderQrPreview.qr-preview,
    .batch-preview-panel .bulk-qr-thumb,
    .batch-preview-panel .bulk-qr-preview-empty
  ){
    width:var(--canonical-preview-stage-desktop) !important;
    height:var(--canonical-preview-stage-desktop) !important;
    min-width:var(--canonical-preview-stage-desktop) !important;
    min-height:var(--canonical-preview-stage-desktop) !important;
    max-width:var(--canonical-preview-stage-desktop) !important;
    max-height:var(--canonical-preview-stage-desktop) !important;
    aspect-ratio:1 / 1 !important;
    margin-inline:auto !important;
    align-self:center !important;
    justify-self:center !important;
    display:grid !important;
    place-items:center !important;
    box-sizing:border-box !important;
  }

  html[data-tool-system] :is(
    #qrPreview.qr-preview > .preview-ghost-state.empty-preview,
    #studioPreviewStage.qr-preview > #studioPreviewEmpty.preview-ghost-state.empty-preview,
    #rebuilderQrPreview.qr-preview > .preview-ghost-state.empty-preview,
    .batch-preview-panel .bulk-qr-preview-empty.preview-ghost-state
  ){
    width:var(--canonical-preview-ghost-inset) !important;
    height:var(--canonical-preview-ghost-inset) !important;
    min-width:0 !important;
    min-height:0 !important;
    max-width:var(--canonical-preview-ghost-inset) !important;
    max-height:var(--canonical-preview-ghost-inset) !important;
    margin:auto !important;
    padding:12px !important;
    display:grid !important;
    place-items:center !important;
    place-content:center !important;
    gap:0 !important;
    border:1px dashed color-mix(in srgb,var(--primary) 22%,var(--line)) !important;
    border-radius:20px !important;
    box-sizing:border-box !important;
  }

  html[data-tool-system] :is(
    #qrPreview.qr-preview > .preview-ghost-state.empty-preview .ghost-qr-illustration,
    #studioPreviewStage.qr-preview > #studioPreviewEmpty.preview-ghost-state.empty-preview .ghost-qr-illustration,
    #rebuilderQrPreview.qr-preview > .preview-ghost-state.empty-preview .ghost-qr-illustration,
    .batch-preview-panel .bulk-qr-preview-empty.preview-ghost-state .ghost-qr-illustration
  ){
    width:156px !important;
    height:auto !important;
    max-width:156px !important;
    max-height:none !important;
    aspect-ratio:1 / 1 !important;
    margin:auto !important;
  }
}

@media (max-width:1060px){
  html[data-tool-system] :is(
    #qrPreview.qr-preview,
    #studioPreviewStage.qr-preview,
    #rebuilderQrPreview.qr-preview,
    .batch-preview-panel .bulk-qr-thumb,
    .batch-preview-panel .bulk-qr-preview-empty
  ){
    width:min(100%, var(--canonical-preview-stage-responsive)) !important;
    height:min(100%, var(--canonical-preview-stage-responsive)) !important;
    min-width:0 !important;
    min-height:0 !important;
    max-width:var(--canonical-preview-stage-responsive) !important;
    max-height:var(--canonical-preview-stage-responsive) !important;
    aspect-ratio:1 / 1 !important;
    margin-inline:auto !important;
    align-self:center !important;
    justify-self:center !important;
    display:grid !important;
    place-items:center !important;
    box-sizing:border-box !important;
  }

  html[data-tool-system] :is(
    #qrPreview.qr-preview > .preview-ghost-state.empty-preview,
    #studioPreviewStage.qr-preview > #studioPreviewEmpty.preview-ghost-state.empty-preview,
    #rebuilderQrPreview.qr-preview > .preview-ghost-state.empty-preview,
    .batch-preview-panel .bulk-qr-preview-empty.preview-ghost-state
  ){
    width:var(--canonical-preview-ghost-inset) !important;
    height:var(--canonical-preview-ghost-inset) !important;
    min-width:0 !important;
    min-height:0 !important;
    max-width:var(--canonical-preview-ghost-inset) !important;
    max-height:var(--canonical-preview-ghost-inset) !important;
    margin:auto !important;
    padding:10px !important;
    display:grid !important;
    place-items:center !important;
    place-content:center !important;
    gap:0 !important;
    border:1px dashed color-mix(in srgb,var(--primary) 22%,var(--line)) !important;
    border-radius:18px !important;
    box-sizing:border-box !important;
  }

  html[data-tool-system] :is(
    #qrPreview.qr-preview > .preview-ghost-state.empty-preview .ghost-qr-illustration,
    #studioPreviewStage.qr-preview > #studioPreviewEmpty.preview-ghost-state.empty-preview .ghost-qr-illustration,
    #rebuilderQrPreview.qr-preview > .preview-ghost-state.empty-preview .ghost-qr-illustration,
    .batch-preview-panel .bulk-qr-preview-empty.preview-ghost-state .ghost-qr-illustration
  ){
    width:122px !important;
    height:auto !important;
    max-width:122px !important;
    max-height:none !important;
    aspect-ratio:1 / 1 !important;
    margin:auto !important;
  }
}


html[data-tool-system] #studioPreviewStage.qr-preview > #studioPreviewCanvas.studio-preview-canvas:not([hidden]){
  width:100% !important;
  height:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  max-width:100% !important;
  max-height:100% !important;
  display:grid !important;
  place-items:center !important;
  overflow:hidden !important;
  padding:0 !important;
  box-sizing:border-box !important;
}

html[data-tool-system] #studioPreviewStage.qr-preview > #studioPreviewCanvas.studio-preview-canvas:not([hidden]) svg{
  display:block !important;
  width:auto !important;
  height:auto !important;
  max-width:100% !important;
  max-height:100% !important;
  margin:auto !important;
  overflow:visible !important;
  object-fit:contain !important;
  transform:none !important;
  transform-origin:center center !important;
}


html[data-tool-system] #studioPreviewEmpty[hidden],
html[data-tool-system] #studioPreviewCanvas[hidden],
html[data-tool-system] .tool-preview-panel-standard .preview-ghost-state[hidden]{
  display:none !important;
}

html[data-tool-system] #studioPreviewStage.qr-preview{
  position:relative !important;
  display:grid !important;
  place-items:center !important;
  overflow:hidden !important;
}

html[data-tool-system] #studioPreviewStage.qr-preview > #studioPreviewCanvas.studio-preview-canvas:not([hidden]){
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  max-width:100% !important;
  max-height:100% !important;
  padding:clamp(14px, 1.1vw, 18px) !important;
  display:grid !important;
  place-items:center !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
  z-index:1 !important;
}

html[data-tool-system] #studioPreviewStage.qr-preview > #studioPreviewCanvas.studio-preview-canvas:not([hidden]) > svg{
  display:block !important;
  width:auto !important;
  height:auto !important;
  max-width:100% !important;
  max-height:100% !important;
  margin:auto !important;
  overflow:visible !important;
  object-fit:contain !important;
  transform:none !important;
  transform-origin:center center !important;
}

@media (max-width:1060px){
  html[data-tool-system] #studioPreviewStage.qr-preview > #studioPreviewCanvas.studio-preview-canvas:not([hidden]){
    padding:12px !important;
  }
}


html[data-tool-system] #studioPreviewStage.qr-preview.is-live-preview > #studioPreviewEmpty,
html[data-tool-system] #studioPreviewFrame.is-live-preview #studioPreviewEmpty,
html[data-tool-system] #studioPreviewStage.qr-preview.is-live-preview > .preview-ghost-state,
html[data-tool-system] #studioPreviewFrame.is-live-preview .preview-ghost-state{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

html[data-tool-system] #studioPreviewStage.qr-preview{
  isolation:isolate !important;
}

html[data-tool-system] #studioPreviewStage.qr-preview > #studioPreviewEmpty{
  z-index:0 !important;
}

html[data-tool-system] #studioPreviewStage.qr-preview > #studioPreviewCanvas.studio-preview-canvas:not([hidden]){
  z-index:2 !important;
  display:grid !important;
  place-items:center !important;
}

html[data-tool-system] #studioPreviewStage.qr-preview.is-live-preview > #studioPreviewCanvas.studio-preview-canvas:not([hidden]) > svg{
  display:block !important;
  width:auto !important;
  height:auto !important;
  max-width:100% !important;
  max-height:100% !important;
  margin:auto !important;
  object-fit:contain !important;
  transform:none !important;
  transform-origin:center center !important;
}


html :is(
  .nav-links > a.is-active,
  .nav-links > a[aria-current="page"],
  .nav-links > a[aria-current="true"],
  .nav-dropdown.has-active > .nav-dropdown-toggle,
  .nav-dropdown-toggle.is-active,
  .nav-dropdown-toggle[data-nav-active="true"]
){
  color:#ffffff !important;
  background:linear-gradient(135deg,#0fb9aa,#087f77) !important;
  border-color:transparent !important;
  box-shadow:
    0 16px 30px rgba(8,181,166,.22),
    inset 0 1px 0 rgba(255,255,255,.28) !important;
}

html[data-theme="dark"] :is(
  .nav-links > a.is-active,
  .nav-links > a[aria-current="page"],
  .nav-links > a[aria-current="true"],
  .nav-dropdown.has-active > .nav-dropdown-toggle,
  .nav-dropdown-toggle.is-active,
  .nav-dropdown-toggle[data-nav-active="true"]
){
  color:#ecfffb !important;
  background:linear-gradient(135deg,#17c9b9,#0c8f86) !important;
  box-shadow:
    0 18px 34px rgba(0,0,0,.28),
    0 12px 28px rgba(23,201,185,.18),
    inset 0 1px 0 rgba(255,255,255,.22) !important;
}

html .nav-dropdown.has-active > .nav-dropdown-toggle .nav-chevron,
html .nav-dropdown-toggle.is-active .nav-chevron,
html .nav-dropdown-toggle[data-nav-active="true"] .nav-chevron{
  opacity:1 !important;
}

html .nav-support-link{
  position:relative !important;
  isolation:isolate !important;
  overflow:hidden !important;
  border:1px solid transparent !important;
}

html .nav-support-link::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  padding:2px;
  background:conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 238deg,
    rgba(255,255,255,.22) 260deg,
    rgba(255,255,255,.96) 300deg,
    rgba(206,255,247,.88) 326deg,
    transparent 360deg
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
  z-index:1;
  animation:staticqrSupportOrbit 3.8s linear infinite;
}

html[data-theme="dark"] .nav-support-link::before{
  background:conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 236deg,
    rgba(153,246,228,.18) 258deg,
    rgba(153,246,228,.98) 300deg,
    rgba(255,255,255,.86) 326deg,
    transparent 360deg
  );
}

html .nav-support-link:hover::before,
html .nav-support-link:focus-visible::before{
  animation-duration:2.25s;
}

html .nav-support-link:focus-visible{
  outline:2px solid rgba(8,181,166,.42) !important;
  outline-offset:3px !important;
}

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

@media (prefers-reduced-motion: reduce){
  html .nav-support-link::before{
    animation:none !important;
    transform:none !important;
  }
}


.site-footer-compact{padding:42px 0;border-top:1px solid var(--line);background:color-mix(in srgb,var(--surface) 94%,transparent)}
.footer-compact-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:32px;align-items:start}.footer-about{display:grid;gap:12px}.footer-short{max-width:560px;color:var(--muted);margin:0}.footer-legal{margin:0;color:var(--muted);font-size:.86rem;line-height:1.5}.footer-legal.muted{opacity:.78}.footer-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.footer-nav div{display:grid;gap:9px}.footer-nav strong{font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:var(--primary)}.footer-nav a{color:var(--text);text-decoration:none;font-weight:700}.footer-nav a:hover{color:var(--primary)}
.tool-education-section,.content-panel,.content-hero{position:relative;overflow:hidden}.tool-education-section{border:1px solid var(--line);border-radius:32px;background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(230,250,246,.74));padding:clamp(24px,4vw,44px);box-shadow:0 22px 55px rgba(15,118,110,.08)}.tool-education-section::after,.content-panel::after{content:"";position:absolute;inset:auto -60px -90px auto;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--primary) 16%,transparent),transparent 70%);pointer-events:none}.insight-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:22px}.insight-card{padding:22px;border:1px solid var(--line);border-radius:24px;background:rgba(255,255,255,.82);box-shadow:0 16px 38px rgba(15,23,42,.06);transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}.insight-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--primary) 45%,var(--line));box-shadow:0 22px 48px rgba(15,118,110,.12)}.insight-icon{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:32px;padding:0 10px;border-radius:999px;background:color-mix(in srgb,var(--primary) 12%,white);color:var(--primary);font-weight:900;margin-bottom:14px}.insight-card h3{margin:0 0 8px}.insight-card p{margin:0;color:var(--muted)}.workflow-strip,.safety-checklist,.compare-mini-visual{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}.workflow-strip span,.safety-checklist span,.compare-mini-visual span,.compare-mini-visual strong{padding:11px 14px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.78);font-weight:800;color:var(--text)}.compare-mini-visual strong{background:color-mix(in srgb,var(--primary) 12%,white);color:var(--primary)}.template-showcase{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:20px}.template-showcase article{display:grid;gap:8px;padding:18px;border-radius:22px;border:1px solid var(--line);background:rgba(255,255,255,.78)}.template-showcase span{color:var(--muted)}.before-after-card{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:20px}.before-after-card div{padding:22px;border-radius:24px;border:1px solid var(--line);background:rgba(255,255,255,.8);display:grid;gap:6px}.before-after-card span{color:var(--muted)}
.content-page-shell{padding-top:clamp(120px,16vh,170px)}.content-hero{padding:clamp(34px,5vw,62px);border:1px solid var(--line);border-radius:34px;background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(229,250,246,.72));box-shadow:0 22px 55px rgba(15,118,110,.08)}.content-hero h1{max-width:920px}.content-hero p{max-width:760px;color:var(--muted);font-size:1.08rem}.content-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:24px;margin-top:24px;align-items:start}.content-stack{display:grid;gap:20px}.content-panel{padding:clamp(24px,4vw,42px);border:1px solid var(--line);border-radius:30px;background:rgba(255,255,255,.86);box-shadow:0 18px 44px rgba(15,23,42,.06)}.content-sidebar{position:sticky;top:110px;display:grid;gap:10px;padding:20px;border:1px solid var(--line);border-radius:24px;background:rgba(255,255,255,.9);box-shadow:0 18px 44px rgba(15,23,42,.06)}.content-sidebar a{text-decoration:none;color:var(--text);font-weight:800}.content-sidebar a:hover{color:var(--primary)}.content-card-cta p{color:var(--muted);margin:0}.comparison-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.comparison-cards article{padding:22px;border:1px solid var(--line);border-radius:24px;background:rgba(255,255,255,.82)}.friendly-list{padding-left:1.2rem;color:var(--muted);line-height:1.8}.friendly-list li::marker{color:var(--primary)}
.reveal-on-scroll{animation:staticqrSoftRise .55s ease both}@keyframes staticqrSoftRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion:reduce){.reveal-on-scroll,.insight-card{animation:none!important;transition:none!important}}
@media (max-width:900px){.footer-compact-grid,.content-layout{grid-template-columns:1fr}.footer-nav{grid-template-columns:repeat(2,minmax(0,1fr))}.content-sidebar{position:static}.insight-grid,.template-showcase,.before-after-card,.comparison-cards{grid-template-columns:1fr}.content-page-shell{padding-top:120px}.tool-education-section{padding:22px}}
@media (max-width:560px){.footer-nav{grid-template-columns:1fr}.workflow-strip span,.safety-checklist span{width:100%;text-align:center}.content-hero h1{font-size:clamp(2.1rem,12vw,3.4rem)}}



/* 11. Accessibility and visible focus affordances */
html .bulk-dropzone:focus-within,
html .checker-dropzone:focus-within,
html .compare-dropzone:focus-within,
html .extractor-dropzone:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.16), 0 18px 40px rgba(15, 118, 110, 0.16);
  transform: translateY(-1px);
}

html[data-theme="dark"] .bulk-dropzone:focus-within,
html[data-theme="dark"] .checker-dropzone:focus-within,
html[data-theme="dark"] .compare-dropzone:focus-within,
html[data-theme="dark"] .extractor-dropzone:focus-within {
  box-shadow: 0 0 0 4px rgba(45, 212, 191, 0.18), 0 18px 40px rgba(0, 0, 0, 0.32);
}

/* 52. Tool-header typography parity
   Keep Design & Print Lab aligned with the compact desktop title scale used by
   Single Builder, Batch Builder, and the other primary tool workspaces. */
html[data-unified-tools] .design-lab-heading h2{
  font-size: clamp(1.08rem, 1.4vw, 1.35rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -.03em !important;
  margin: 0 !important;
}

html[data-unified-tools] .design-lab-heading-copy{
  max-width: 62ch !important;
  margin: 4px 0 0 !important;
  font-size: .84rem !important;
  line-height: 1.35 !important;
}

/* 53. Scan & Safety Lab layout refinement
   Give the scanner a stronger desktop balance, make the result panel feel
   intentional instead of floating short inside the shell, and keep the mobile
   journey action-first: scan/upload first, result review second. */
@media (min-width: 1061px){
  html[data-unified-tools] .tool-unified-shell--scan.tool-shell-standard{
    grid-template-columns: minmax(0, 1.4fr) minmax(360px, .72fr) !important;
  }

  html[data-unified-tools] .tool-unified-companion--scan.tool-preview-panel-standard{
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    grid-auto-rows: initial !important;
    align-content: stretch !important;
    overflow: hidden !important;
  }

  html[data-unified-tools] .tool-unified-companion--scan > .preview-heading{
    align-self: start !important;
  }

  html[data-unified-tools] .tool-unified-companion--scan > .checker-empty-state.tool-preview-card-standard{
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    align-self: stretch !important;
    padding: clamp(18px, 1.45vw, 24px) !important;
  }

  html[data-unified-tools] .tool-unified-companion--scan > .checker-result.tool-preview-results-standard{
    min-height: 0 !important;
    align-self: stretch !important;
    overflow: auto !important;
    padding-right: 3px !important;
    scrollbar-gutter: stable !important;
  }

  html[data-unified-tools] .tool-unified-shell--scan .checker-dropzone{
    min-height: clamp(210px, 26vh, 250px) !important;
  }
}

@media (max-width: 1060px){
  html[data-unified-tools] .tool-unified-shell--scan.tool-shell-standard{
    grid-template-areas:
      "mobileHeading"
      "workflow"
      "preview" !important;
  }

  html[data-unified-tools] .tool-unified-shell--scan .tool-unified-workflow.tool-workflow-standard{
    grid-area: workflow !important;
  }

  html[data-unified-tools] .tool-unified-shell--scan .tool-unified-companion--scan.tool-preview-panel-standard{
    grid-area: preview !important;
    position: relative !important;
    top: auto !important;
    z-index: 1 !important;
    max-height: none !important;
    overflow: visible !important;
    margin-top: 0 !important;
  }

  html[data-unified-tools] .tool-unified-shell--scan .tool-unified-companion--scan > .preview-card{
    min-height: 176px !important;
  }

  html[data-unified-tools] .tool-unified-shell--scan .checker-empty-state{
    gap: 9px !important;
  }

  html[data-unified-tools] .tool-unified-shell--scan .checker-result.tool-preview-results-standard{
    overflow: visible !important;
  }
}

@media (max-width: 760px){
  html[data-unified-tools] .tool-unified-shell--scan .checker-dropzone{
    min-height: 186px !important;
    padding: 18px 14px !important;
    border-radius: 22px !important;
  }

  html[data-unified-tools] .tool-unified-shell--scan .checker-dropzone strong{
    font-size: 1rem !important;
    line-height: 1.22 !important;
  }

  html[data-unified-tools] .tool-unified-shell--scan .checker-dropzone small{
    font-size: .84rem !important;
    line-height: 1.4 !important;
  }

  html[data-unified-tools] .tool-unified-shell--scan .checker-mode-tabs{
    gap: 6px !important;
    padding: 5px !important;
  }

  html[data-unified-tools] .tool-unified-shell--scan .checker-mode-tab{
    min-height: 44px !important;
    padding-inline: 10px !important;
    font-size: .9rem !important;
  }

  html[data-unified-tools] .tool-unified-shell--scan .tool-unified-companion--scan.tool-preview-panel-standard{
    padding: 11px !important;
  }

  html[data-unified-tools] .tool-unified-shell--scan .tool-unified-companion--scan > .preview-card{
    min-height: 166px !important;
    padding: 14px !important;
  }

  html[data-unified-tools] .tool-unified-shell--scan .checker-empty-state strong{
    font-size: 1.02rem !important;
    line-height: 1.22 !important;
  }

  html[data-unified-tools] .tool-unified-shell--scan .checker-empty-state > span:not(.empty-state-orb),
  html[data-unified-tools] .tool-unified-shell--scan .empty-state-chip-row{
    font-size: .88rem !important;
  }

  html[data-unified-tools] .tool-unified-shell--scan .checker-meta-grid{
    grid-template-columns: 1fr !important;
  }

  html[data-unified-tools] .tool-unified-shell--scan .result-action-row{
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
  }

  html[data-unified-tools] .tool-unified-shell--scan .checker-actions :is(a, button),
  html[data-unified-tools] .tool-unified-shell--scan .result-action-row :is(a, button){
    width: 100% !important;
  }
}

/* 54. Scan & Safety fixed shell + content-aware result readability
   Keep the inspector at the same desktop tool-shell height as the core builders.
   Rich decoded summaries now scroll inside the result pane instead of stretching
   the entire workspace. */
html[data-unified-tools] .tool-unified-shell--scan .checker-review-copy{
  margin: 0 0 12px !important;
  color: var(--muted) !important;
  font-size: .92rem !important;
  line-height: 1.48 !important;
}

html[data-unified-tools] .tool-unified-shell--scan .checker-meta-grid strong{
  line-height: 1.35 !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

@media (min-width: 1061px) and (min-height: 760px){
  html[data-unified-tools] .tool-unified-shell--scan.tool-shell-standard{
    height: min(646px, calc(100svh - var(--app-nav-top, 14px) - var(--app-nav-height, 62px) - 54px)) !important;
    min-height: 616px !important;
    max-height: 646px !important;
    align-items: stretch !important;
  }

  html[data-unified-tools] .tool-unified-shell--scan > .tool-unified-workflow.tool-workflow-standard,
  html[data-unified-tools] .tool-unified-shell--scan > .tool-unified-companion--scan.tool-preview-panel-standard{
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
  }

  html[data-unified-tools] .tool-unified-shell--scan > .tool-unified-workflow.tool-workflow-standard{
    overflow: hidden !important;
  }

  html[data-unified-tools] .tool-unified-shell--scan .step-stack,
  html[data-unified-tools] .tool-unified-shell--scan .checker-result.tool-preview-results-standard{
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-gutter: stable !important;
  }

  html[data-unified-tools] .tool-unified-shell--scan .tool-unified-companion--scan.tool-preview-panel-standard{
    overflow: hidden !important;
  }
}

/* 55. Scan & Safety Lab Single Builder parity
   Match the compact builder header pattern, use the inspector shield icon in
   the page kicker, and keep the upload zone compact enough that step actions
   sit in their own row instead of visually colliding with the drop area. */
html .scan-safety-kicker{
  display:inline-flex !important;
  align-items:center !important;
  gap:7px !important;
  margin-bottom:2px !important;
}

html .scan-safety-kicker-icon{
  display:inline-block !important;
  flex:0 0 16px !important;
  width:16px !important;
  height:16px !important;
  background-color:currentColor !important;
  -webkit-mask-image:var(--nav-icon-mask) !important;
  mask-image:var(--nav-icon-mask) !important;
  -webkit-mask-size:contain !important;
  mask-size:contain !important;
  -webkit-mask-position:center !important;
  mask-position:center !important;
  -webkit-mask-repeat:no-repeat !important;
  mask-repeat:no-repeat !important;
}

html[data-unified-tools] .tool-unified-shell--scan .checker-guided-step-heading{
  margin:0 !important;
}

html[data-unified-tools] .tool-unified-shell--scan .checker-guided-step-heading .checker-panel-note{
  margin-top:5px !important;
}

@media (min-width:1061px){
  html[data-unified-tools] .tool-unified-shell--scan .flow-heading{
    align-items:start !important;
    padding-bottom:0 !important;
  }

  html[data-unified-tools] .tool-unified-shell--scan .flow-heading h2{
    margin-top:0 !important;
  }

  html[data-unified-tools] .tool-unified-shell--scan .step-stack.is-compact{
    align-content:start !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
  }

  html[data-unified-tools] .tool-unified-shell--scan .guided-step[data-scan-step="1"]{
    gap:10px !important;
    align-content:start !important;
  }

  html[data-unified-tools] .tool-unified-shell--scan .checker-mode-tabs{
    min-height:54px !important;
  }

  html[data-unified-tools] .tool-unified-shell--scan .checker-dropzone{
    min-height:clamp(132px,16vh,154px) !important;
    padding:15px 18px !important;
    gap:7px !important;
    border-radius:24px !important;
  }

  html[data-unified-tools] .tool-unified-shell--scan .checker-drop-icon{
    width:48px !important;
    height:48px !important;
    border-radius:18px !important;
  }

  html[data-unified-tools] .tool-unified-shell--scan .checker-dropzone strong{
    font-size:1rem !important;
    line-height:1.22 !important;
  }

  html[data-unified-tools] .tool-unified-shell--scan .checker-dropzone small{
    font-size:.82rem !important;
    line-height:1.35 !important;
  }

  html[data-unified-tools] .tool-unified-shell--scan .upload-file-controls{
    min-height:24px !important;
    margin-top:7px !important;
  }

  html[data-unified-tools] .tool-unified-shell--scan .checker-upload-preview{
    margin-top:9px !important;
    padding:10px !important;
    border-radius:20px !important;
  }

  html[data-unified-tools] .tool-unified-shell--scan .checker-upload-preview img{
    max-height:220px !important;
    width:min(100%,270px) !important;
  }

  html[data-unified-tools] .tool-unified-shell--scan > .tool-unified-workflow.tool-workflow-standard > .guided-actions{
    position:relative !important;
    z-index:2 !important;
    min-height:46px !important;
    align-self:end !important;
    padding-top:0 !important;
  }
}

@media (max-width:1060px){
  html[data-unified-tools] .tool-mobile-builder-kicker.scan-safety-kicker,
  html[data-unified-tools] .tool-mobile-builder-kicker[data-nav-icon="safety"]{
    display:inline-flex !important;
    align-items:center !important;
    gap:8px !important;
  }

  html[data-unified-tools] .tool-unified-shell--scan .checker-dropzone{
    min-height:164px !important;
  }
}

@media (max-width:760px){
  html[data-unified-tools] .tool-unified-shell--scan .checker-dropzone{
    min-height:150px !important;
    padding:16px 13px !important;
  }

  html[data-unified-tools] .tool-unified-shell--scan .checker-drop-icon{
    width:46px !important;
    height:46px !important;
    border-radius:17px !important;
  }
}

/* 56. Shared viewport-fit scaling for the non-builder tool shells.
   Single Builder and Batch Builder already use dedicated fitted stages; this
   brings Design, Scan, Rebuilder, Extractor, and Compare to the same desktop
   viewport behavior while preserving native stacked layouts on mobile. */
@media (min-width:1061px){
  html[data-tool-system] .tool-responsive-scale-stage{
    position:relative !important;
    display:flex !important;
    justify-content:center !important;
    align-items:flex-start !important;
    width:100% !important;
    height:var(--tool-responsive-scaled-height, auto) !important;
    min-height:var(--tool-responsive-scaled-height, auto) !important;
    margin:0 auto !important;
    padding:0 !important;
    overflow:visible !important;
    isolation:isolate !important;
    box-sizing:border-box !important;
  }

  html[data-tool-system] .tool-responsive-scale-stage > [data-responsive-tool-canvas]{
    position:relative !important;
    flex:0 0 auto !important;
    margin:0 auto !important;
    transform:scale(var(--tool-responsive-scale, 1)) !important;
    transform-origin:top center !important;
    will-change:transform !important;
  }
}

@media (max-width:1060px){
  html[data-tool-system] .tool-responsive-scale-stage{
    position:static !important;
    display:block !important;
    width:auto !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    overflow:visible !important;
    isolation:auto !important;
  }

  html[data-tool-system] .tool-responsive-scale-stage > [data-responsive-tool-canvas]{
    position:relative !important;
    flex:initial !important;
    margin-left:auto !important;
    margin-right:auto !important;
    transform:none !important;
    transform-origin:initial !important;
    will-change:auto !important;
  }
}


/* =========================================================
   StaticQR — smart website URL assistance
   ========================================================= */
html .smart-url-feedback {
  display: grid;
  gap: 8px;
  width: 100%;
  margin-top: -2px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
  border-radius: 16px;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: 0 12px 28px color-mix(in srgb, #000 8%, transparent);
  font-size: .78rem;
  font-weight: 720;
  line-height: 1.42;
}
html .smart-url-feedback[hidden] {
  display: none !important;
}
html .smart-url-feedback.wide {
  grid-column: 1 / -1;
}
html .smart-url-feedback p {
  margin: 0;
}
html .smart-url-feedback[data-state="info"] {
  color: color-mix(in srgb, var(--text) 82%, var(--muted));
  border-color: color-mix(in srgb, var(--primary) 26%, var(--line));
  background: color-mix(in srgb, var(--primary-soft) 56%, var(--surface));
}
html .smart-url-feedback[data-state="warning"] {
  color: color-mix(in srgb, #7a2e0e 76%, var(--text));
  border-color: color-mix(in srgb, #f79009 44%, var(--line));
  background: color-mix(in srgb, #fff7ed 72%, var(--surface));
}
html .smart-url-feedback[data-state="raw"] {
  color: color-mix(in srgb, var(--text) 86%, var(--muted));
  border-color: color-mix(in srgb, #7a5af8 34%, var(--line));
  background: color-mix(in srgb, #f4f3ff 58%, var(--surface));
}
html[data-theme="dark"] .smart-url-feedback[data-state="warning"] {
  color: #ffd7a6;
  background: color-mix(in srgb, #7a2e0e 30%, var(--surface));
}
html[data-theme="dark"] .smart-url-feedback[data-state="raw"] {
  color: #d9d6fe;
  background: color-mix(in srgb, #35266f 32%, var(--surface));
}
html .smart-url-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
html .smart-url-action {
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid color-mix(in srgb, var(--primary) 44%, var(--line));
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  font-size: .74rem;
  font-weight: 850;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--primary) 18%, transparent);
}
html .smart-url-action:hover,
html .smart-url-action:focus-visible {
  transform: translateY(-1px);
  outline: 2px solid color-mix(in srgb, var(--primary) 32%, transparent);
  outline-offset: 2px;
}
html .smart-url-action--ghost {
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border-color: color-mix(in srgb, var(--line) 92%, transparent);
  box-shadow: none;
}
@media (max-width: 760px) {
  html .smart-url-feedback {
    padding: 9px 10px;
    border-radius: 14px;
    font-size: .76rem;
  }
  html .smart-url-actions {
    align-items: stretch;
  }
  html .smart-url-action {
    width: 100%;
    justify-content: center;
  }
}

/* Print size preview: shared compact simulator for QR creation tools. */
html .tool-print-size-preview{
  width: min(100%, 352px) !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 12px !important;
  display: grid !important;
  gap: 10px !important;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line)) !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 8% 10%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 42%),
    color-mix(in srgb, var(--surface-2) 94%, transparent) !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent) !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
}

html[data-theme="light"] .tool-print-size-preview{
  background:
    radial-gradient(circle at 8% 10%, rgba(15, 118, 110, .10), transparent 42%),
    rgba(255, 252, 245, .92) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78) !important;
}

html .print-size-preview-head{
  display: flex !important;
  align-items: start !important;
  justify-content: space-between !important;
  gap: 10px !important;
  min-width: 0 !important;
}

html .print-size-preview-head > div{
  min-width: 0 !important;
  display: grid !important;
  gap: 3px !important;
}

html .print-size-preview-kicker{
  margin: 0 !important;
  font-size: .72rem !important;
  line-height: 1.15 !important;
}

html .print-size-preview-heading{
  display: block !important;
  margin: 0 !important;
  font-size: .88rem !important;
  line-height: 1.18 !important;
  letter-spacing: -.02em !important;
  font-weight: 800 !important;
}

html .print-size-preview-badge{
  min-height: 28px !important;
  max-width: 108px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 10px !important;
  border: 1px solid var(--line) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--surface) 82%, transparent) !important;
  color: var(--muted) !important;
  font-size: .68rem !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

html .print-size-preview-badge.strong,
html .print-size-preview-badge.excellent{
  border-color: color-mix(in srgb, #10b981 54%, var(--line)) !important;
  background: color-mix(in srgb, #10b981 14%, transparent) !important;
  color: color-mix(in srgb, #10b981 72%, var(--text)) !important;
}

html .print-size-preview-badge.review{
  border-color: color-mix(in srgb, #f59e0b 56%, var(--line)) !important;
  background: color-mix(in srgb, #f59e0b 14%, transparent) !important;
  color: color-mix(in srgb, #f59e0b 72%, var(--text)) !important;
}

html .print-size-preview-badge.risky{
  border-color: color-mix(in srgb, #ef4444 56%, var(--line)) !important;
  background: color-mix(in srgb, #ef4444 13%, transparent) !important;
  color: color-mix(in srgb, #ef4444 74%, var(--text)) !important;
}

html .print-size-preview-controls{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 6px !important;
  min-width: 0 !important;
}

html .print-size-preview-controls button{
  width: 100% !important;
  min-width: 0 !important;
  min-height: 42px !important;
  padding: 6px 4px !important;
  display: grid !important;
  place-items: center !important;
  gap: 2px !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  background: color-mix(in srgb, var(--surface) 80%, transparent) !important;
  color: inherit !important;
  box-shadow: none !important;
  cursor: pointer !important;
  font: inherit !important;
  box-sizing: border-box !important;
}

html .print-size-preview-controls button:hover,
html .print-size-preview-controls button:focus-visible{
  border-color: color-mix(in srgb, var(--accent) 48%, var(--line)) !important;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface)) !important;
  outline: none !important;
}

html .print-size-preview-controls button:focus-visible{
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent) !important;
}

html .print-size-preview-controls button.is-active{
  border-color: color-mix(in srgb, var(--accent) 70%, var(--line)) !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 20%, var(--surface)), color-mix(in srgb, var(--accent-2) 13%, var(--surface))) !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent), 0 10px 24px color-mix(in srgb, #000 18%, transparent) !important;
}

html .print-size-preview-controls span{
  display: block !important;
  font-size: .82rem !important;
  line-height: 1 !important;
  font-weight: 850 !important;
}

html .print-size-preview-controls small{
  display: block !important;
  font-size: .6rem !important;
  line-height: 1 !important;
  color: var(--muted) !important;
  font-weight: 750 !important;
}

html .print-size-preview-body{
  display: grid !important;
  grid-template-columns: 78px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}

html .print-size-preview-stage{
  width: 78px !important;
  height: 78px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px dashed color-mix(in srgb, var(--accent) 28%, var(--line)) !important;
  border-radius: 18px !important;
  background: color-mix(in srgb, var(--surface) 86%, transparent) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

html[data-theme="light"] .print-size-preview-stage{
  background: rgba(255,255,255,.78) !important;
}

html .print-size-preview-empty{
  display: block !important;
  max-width: 10ch !important;
  padding: 4px !important;
  text-align: center !important;
  color: var(--muted) !important;
  font-size: .58rem !important;
  line-height: 1.16 !important;
  font-weight: 750 !important;
}

html .print-size-preview-qr-shell{
  width: 68px !important;
  height: 68px !important;
  display: grid !important;
  place-items: center !important;
  transform: scale(var(--print-size-visual-scale, .7)) !important;
  transform-origin: center !important;
  transition: transform .22s ease !important;
}

html .print-size-preview-qr-shell svg,
html .print-size-preview-qr-shell canvas{
  display: block !important;
  width: 68px !important;
  height: 68px !important;
  max-width: 68px !important;
  max-height: 68px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  aspect-ratio: 1 / 1 !important;
  overflow: visible !important;
}


html .print-size-preview-copy{
  min-width: 0 !important;
  display: grid !important;
  gap: 3px !important;
}

html .print-size-preview-copy strong{
  display: block !important;
  margin: 0 !important;
  font-size: .78rem !important;
  line-height: 1.18 !important;
  font-weight: 850 !important;
  letter-spacing: -.015em !important;
}

html .print-size-preview-copy p,
html .print-size-preview-copy span,
html .print-size-preview-copy small{
  display: block !important;
  margin: 0 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
}

html .print-size-preview-copy p{
  color: var(--text) !important;
  font-size: .68rem !important;
  line-height: 1.26 !important;
}

html .print-size-preview-copy span{
  color: var(--muted) !important;
  font-size: .64rem !important;
  line-height: 1.18 !important;
  font-weight: 750 !important;
}

html .print-size-preview-copy small{
  color: var(--muted) !important;
  font-size: .58rem !important;
  line-height: 1.18 !important;
}

html .print-preview-source{
  display: none !important;
}

@media (max-width: 1060px){
  html .guided-preview-panel .tool-print-size-preview,
  html .studio-preview-panel .tool-print-size-preview,
  html .bulk-export-panel .tool-print-size-preview,
  html .rebuilder-preview .tool-print-size-preview{
    width: 100% !important;
    max-width: 420px !important;
  }
}

@media (max-width: 760px){
  html .tool-print-size-preview{
    padding: 10px !important;
    border-radius: 20px !important;
    gap: 8px !important;
  }

  html .print-size-preview-head{
    gap: 8px !important;
  }

  html .print-size-preview-heading{
    font-size: .82rem !important;
  }

  html .print-size-preview-badge{
    min-height: 26px !important;
    padding: 0 8px !important;
    max-width: 96px !important;
    font-size: .62rem !important;
  }

  html .print-size-preview-controls{
    gap: 5px !important;
  }

  html .print-size-preview-controls button{
    min-height: 39px !important;
    border-radius: 13px !important;
    padding: 5px 3px !important;
  }

  html .print-size-preview-controls span{
    font-size: .76rem !important;
  }

  html .print-size-preview-controls small{
    font-size: .55rem !important;
  }

  html .print-size-preview-body{
    grid-template-columns: 68px minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  html .print-size-preview-stage{
    width: 68px !important;
    height: 68px !important;
    border-radius: 16px !important;
  }

  html .print-size-preview-qr-shell,
  html .print-size-preview-qr-shell svg,
  html .print-size-preview-qr-shell canvas{
    width: 58px !important;
    height: 58px !important;
    max-width: 58px !important;
    max-height: 58px !important;
  }

  html .print-size-preview-copy p{
    font-size: .63rem !important;
  }

  html .print-size-preview-copy span{
    font-size: .59rem !important;
  }

  html .print-size-preview-copy small{
    font-size: .54rem !important;
  }
}

@media (max-width: 560px){
  html .print-size-preview-body{
    grid-template-columns: 62px minmax(0, 1fr) !important;
  }

  html .print-size-preview-stage{
    width: 62px !important;
    height: 62px !important;
  }

  html .print-size-preview-qr-shell,
  html .print-size-preview-qr-shell svg,
  html .print-size-preview-qr-shell canvas{
    width: 52px !important;
    height: 52px !important;
    max-width: 52px !important;
    max-height: 52px !important;
  }

  html .print-size-preview-heading{
    font-size: .78rem !important;
  }
}

/* ===== Print Size Check compact summary + expandable drawer/modal (v44) ===== */
html .tool-print-size-preview{
  display: grid !important;
  gap: 12px !important;
  padding: 16px !important;
  border-radius: 24px !important;
}

html .print-size-summary-head{
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-width: 0 !important;
}

html .print-size-summary-head > div{
  display: grid !important;
  gap: 4px !important;
  min-width: 0 !important;
}

html .print-size-summary-heading{
  display: block !important;
  margin: 0 !important;
  color: var(--text) !important;
  font-size: .92rem !important;
  line-height: 1.2 !important;
  font-weight: 850 !important;
  letter-spacing: -.02em !important;
}

html .print-size-summary-badge{
  flex: 0 0 auto !important;
  min-height: 30px !important;
  max-width: 132px !important;
  padding: 0 12px !important;
  font-size: .7rem !important;
}

html .print-size-summary-body{
  display: grid !important;
  gap: 5px !important;
  min-width: 0 !important;
}

html .print-size-summary-size{
  display: block !important;
  margin: 0 !important;
  color: var(--text) !important;
  font-size: 1.18rem !important;
  line-height: 1.1 !important;
  font-weight: 900 !important;
  letter-spacing: -.03em !important;
}

html .print-size-summary-copy,
html .print-size-summary-hint{
  display: block !important;
  margin: 0 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
}

html .print-size-summary-copy{
  color: var(--text) !important;
  font-size: .79rem !important;
  line-height: 1.35 !important;
}

html .print-size-summary-hint{
  color: var(--muted) !important;
  font-size: .69rem !important;
  line-height: 1.32 !important;
  font-weight: 700 !important;
}

html .print-size-summary-button{
  width: 100% !important;
  min-height: 44px !important;
  justify-content: center !important;
  border-radius: 16px !important;
  font-weight: 850 !important;
}

html .print-size-preview-dialog{
  width: min(760px, calc(100vw - 36px)) !important;
  max-width: min(760px, calc(100vw - 36px)) !important;
  max-height: min(88vh, 820px) !important;
  margin: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 34px !important;
  background: transparent !important;
  color: var(--text) !important;
  box-shadow: none !important;
  overflow: visible !important;
  z-index: 9999 !important;
}

html .print-size-preview-dialog::backdrop{
  background: rgba(4, 12, 18, .64) !important;
  backdrop-filter: blur(8px) !important;
}

html .print-size-preview-dialog-card{
  width: 100% !important;
  max-height: min(88vh, 820px) !important;
  display: grid !important;
  gap: 18px !important;
  padding: 24px !important;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line)) !important;
  border-radius: 34px !important;
  background:
    radial-gradient(circle at 8% 8%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 38%),
    linear-gradient(145deg, color-mix(in srgb, var(--surface-2) 96%, transparent), color-mix(in srgb, var(--surface) 98%, transparent)) !important;
  box-shadow:
    0 28px 80px rgba(0, 0, 0, .34),
    inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent) !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}

html[data-theme="light"] .print-size-preview-dialog-card{
  background:
    radial-gradient(circle at 8% 8%, rgba(15, 118, 110, .14), transparent 38%),
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(246, 253, 251, .98)) !important;
  box-shadow:
    0 28px 80px rgba(15, 23, 42, .18),
    inset 0 1px 0 rgba(255,255,255,.88) !important;
}

html .print-size-preview-dialog-head{
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 18px !important;
  min-width: 0 !important;
}

html .print-size-preview-dialog-copy{
  display: grid !important;
  gap: 5px !important;
  min-width: 0 !important;
}

html .print-size-dialog-kicker{
  margin: 0 !important;
}

html .print-size-dialog-title{
  margin: 0 !important;
  color: var(--text) !important;
  font-size: clamp(1.35rem, 2vw, 1.6rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -.035em !important;
  font-weight: 900 !important;
}

html .print-size-dialog-intro{
  margin: 0 !important;
  max-width: 46ch !important;
  color: var(--muted) !important;
  font-size: .94rem !important;
  line-height: 1.42 !important;
}

html .print-size-dialog-head-actions{
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

html .print-size-detail-badge{
  min-height: 34px !important;
  max-width: 150px !important;
  padding: 0 14px !important;
  font-size: .76rem !important;
}

html .print-size-preview-close{
  width: 42px !important;
  height: 42px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line)) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--surface) 88%, transparent) !important;
  color: var(--text) !important;
  cursor: pointer !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent) !important;
}

html .print-size-preview-close:hover,
html .print-size-preview-close:focus-visible{
  border-color: color-mix(in srgb, var(--accent) 60%, var(--line)) !important;
  background: color-mix(in srgb, var(--accent) 14%, var(--surface)) !important;
  outline: none !important;
}

html .print-size-preview-close:focus-visible{
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent) !important;
}

html .print-size-preview-close svg{
  width: 20px !important;
  height: 20px !important;
  fill: currentColor !important;
}

html .print-size-dialog-controls{
  gap: 10px !important;
}

html .print-size-dialog-controls button{
  min-height: 58px !important;
  border-radius: 18px !important;
  padding: 10px 8px !important;
}

html .print-size-dialog-controls span{
  font-size: .98rem !important;
}

html .print-size-dialog-controls small{
  font-size: .68rem !important;
}

html .print-size-dialog-body{
  grid-template-columns: minmax(176px, 210px) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 22px !important;
  min-width: 0 !important;
}

html .print-size-dialog-stage{
  width: 210px !important;
  height: 210px !important;
  border-radius: 30px !important;
}

html .print-size-dialog-stage .print-size-preview-empty{
  max-width: 14ch !important;
  font-size: .8rem !important;
  line-height: 1.28 !important;
}

html .print-size-dialog-stage .print-size-preview-qr-shell,
html .print-size-dialog-stage .print-size-preview-qr-shell svg,
html .print-size-dialog-stage .print-size-preview-qr-shell canvas{
  width: 188px !important;
  height: 188px !important;
  max-width: 188px !important;
  max-height: 188px !important;
}

html .print-size-dialog-verdict{
  gap: 8px !important;
}

html .print-size-dialog-verdict strong{
  font-size: 1.05rem !important;
  line-height: 1.22 !important;
}

html .print-size-dialog-verdict p{
  font-size: .93rem !important;
  line-height: 1.42 !important;
}

html .print-size-dialog-verdict span{
  font-size: .82rem !important;
  line-height: 1.34 !important;
}

html .print-size-dialog-verdict small{
  font-size: .74rem !important;
  line-height: 1.36 !important;
}

@media (max-width: 760px){
  html .tool-print-size-preview{
    gap: 11px !important;
    padding: 14px !important;
    border-radius: 22px !important;
  }

  html .print-size-summary-head{
    gap: 10px !important;
  }

  html .print-size-summary-heading{
    font-size: .86rem !important;
  }

  html .print-size-summary-badge{
    min-height: 28px !important;
    max-width: 120px !important;
    padding: 0 10px !important;
    font-size: .66rem !important;
  }

  html .print-size-summary-size{
    font-size: 1.05rem !important;
  }

  html .print-size-summary-copy{
    font-size: .76rem !important;
  }

  html .print-size-summary-hint{
    font-size: .66rem !important;
  }

  html .print-size-summary-button{
    min-height: 42px !important;
    border-radius: 15px !important;
  }

  html .print-size-preview-dialog{
    position: fixed !important;
    inset: auto 0 0 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 92vh !important;
    margin: 0 !important;
    border-radius: 30px 30px 0 0 !important;
    overflow: visible !important;
  }

  html .print-size-preview-dialog-card{
    max-height: 92vh !important;
    gap: 16px !important;
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 30px 30px 0 0 !important;
  }

  html .print-size-preview-dialog-head{
    gap: 12px !important;
  }

  html .print-size-dialog-title{
    font-size: 1.25rem !important;
  }

  html .print-size-dialog-intro{
    font-size: .86rem !important;
    line-height: 1.36 !important;
  }

  html .print-size-dialog-head-actions{
    align-items: flex-start !important;
    gap: 8px !important;
  }

  html .print-size-detail-badge{
    min-height: 30px !important;
    max-width: 124px !important;
    padding: 0 10px !important;
    font-size: .68rem !important;
  }

  html .print-size-preview-close{
    width: 38px !important;
    height: 38px !important;
  }

  html .print-size-dialog-controls{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html .print-size-dialog-controls button{
    min-height: 54px !important;
    border-radius: 17px !important;
  }

  html .print-size-dialog-body{
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    gap: 14px !important;
  }

  html .print-size-dialog-stage{
    width: min(58vw, 188px) !important;
    height: min(58vw, 188px) !important;
    border-radius: 28px !important;
  }

  html .print-size-dialog-stage .print-size-preview-qr-shell,
  html .print-size-dialog-stage .print-size-preview-qr-shell svg,
  html .print-size-dialog-stage .print-size-preview-qr-shell canvas{
    width: min(51vw, 164px) !important;
    height: min(51vw, 164px) !important;
    max-width: min(51vw, 164px) !important;
    max-height: min(51vw, 164px) !important;
  }

  html .print-size-dialog-verdict{
    width: 100% !important;
    gap: 7px !important;
  }

  html .print-size-dialog-verdict strong{
    font-size: .98rem !important;
  }

  html .print-size-dialog-verdict p{
    font-size: .86rem !important;
    line-height: 1.38 !important;
  }

  html .print-size-dialog-verdict span{
    font-size: .78rem !important;
  }

  html .print-size-dialog-verdict small{
    font-size: .7rem !important;
  }
}

@media (max-width: 460px){
  html .print-size-summary-head{
    align-items: stretch !important;
    flex-direction: column !important;
  }

  html .print-size-summary-badge{
    width: fit-content !important;
  }

  html .print-size-preview-dialog-head{
    flex-direction: column !important;
  }

  html .print-size-dialog-head-actions{
    width: 100% !important;
    justify-content: space-between !important;
    flex-direction: row !important;
  }
}

/* ===== Print Size Check mobile layout repair (v45)
   Keep the compact two-up QR/status dashboard, but force the new print-size
   summary into a full-width low-profile row so it never becomes a skinny,
   over-tall card in the mobile preview panel. ===== */
@media (max-width: 1060px){
  /* Single Builder: preview + reliability stay paired, print check spans both columns. */
  html[data-single-builder] .tool-first-home .guided-preview-panel.tool-preview-panel-standard{
    grid-template-areas:
      "preview reliability"
      "printCheck printCheck"
      "message message" !important;
  }

  html[data-single-builder] .tool-first-home .guided-preview-panel.tool-preview-panel-standard > .tool-print-size-preview{
    grid-area: printCheck !important;
  }

  /* Batch Builder: print check is a full-width row inside the sticky mobile preview shell. */
  html[data-batch-responsive] .batch-preview-panel.tool-preview-panel-standard,
  html[data-batch-builder] .batch-preview-panel.tool-preview-panel-standard{
    grid-template-areas:
      "batchPreview batchReliability"
      "batchPrint batchPrint" !important;
  }

  html[data-batch-responsive] .batch-preview-panel.tool-preview-panel-standard > .tool-print-size-preview,
  html[data-batch-builder] .batch-preview-panel.tool-preview-panel-standard > .tool-print-size-preview{
    grid-area: batchPrint !important;
  }

  /* Design & Print Lab: preview/reliability remain balanced; print check sits cleanly underneath. */
  html[data-unified-tools] .tool-unified-companion--design.tool-preview-panel-standard{
    grid-template-areas:
      "designPreview designReliability"
      "designPrint designPrint" !important;
  }

  html[data-unified-tools] .tool-unified-companion--design.tool-preview-panel-standard > .tool-print-size-preview{
    grid-area: designPrint !important;
  }

  /* Rebuilder: print check joins the existing preview-column dashboard as a full-width row. */
  html[data-unified-tools] .tool-unified-companion--rebuilder .rebuilder-preview-column{
    grid-template-areas:
      "rebuilderPreview rebuilderReliability"
      "rebuilderPrint rebuilderPrint"
      "rebuilderMessage rebuilderMessage"
      "rebuilderDownloads rebuilderDownloads" !important;
  }

  html[data-unified-tools] .tool-unified-companion--rebuilder .rebuilder-preview-column > .tool-print-size-preview{
    grid-area: rebuilderPrint !important;
  }

  /* Shared mobile summary strip. */
  html[data-tool-system] :is(
    .guided-preview-panel,
    .batch-preview-panel,
    .design-lab-preview-panel,
    .rebuilder-preview-column
  ) > .tool-print-size-preview{
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 12px 13px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "printHead printAction"
      "printBody printAction" !important;
    align-items: center !important;
    column-gap: 12px !important;
    row-gap: 5px !important;
    border-radius: 20px !important;
    box-sizing: border-box !important;
  }

  html[data-tool-system] :is(
    .guided-preview-panel,
    .batch-preview-panel,
    .design-lab-preview-panel,
    .rebuilder-preview-column
  ) > .tool-print-size-preview .print-size-summary-head{
    grid-area: printHead !important;
    align-items: center !important;
    gap: 9px !important;
    min-width: 0 !important;
  }

  html[data-tool-system] :is(
    .guided-preview-panel,
    .batch-preview-panel,
    .design-lab-preview-panel,
    .rebuilder-preview-column
  ) > .tool-print-size-preview .print-size-summary-head > div{
    gap: 2px !important;
  }

  html[data-tool-system] :is(
    .guided-preview-panel,
    .batch-preview-panel,
    .design-lab-preview-panel,
    .rebuilder-preview-column
  ) > .tool-print-size-preview .print-size-preview-kicker{
    font-size: .68rem !important;
    line-height: 1.08 !important;
  }

  html[data-tool-system] :is(
    .guided-preview-panel,
    .batch-preview-panel,
    .design-lab-preview-panel,
    .rebuilder-preview-column
  ) > .tool-print-size-preview .print-size-summary-heading{
    font-size: .81rem !important;
    line-height: 1.16 !important;
  }

  html[data-tool-system] :is(
    .guided-preview-panel,
    .batch-preview-panel,
    .design-lab-preview-panel,
    .rebuilder-preview-column
  ) > .tool-print-size-preview .print-size-summary-badge{
    min-height: 27px !important;
    max-width: 122px !important;
    padding: 0 10px !important;
    font-size: .64rem !important;
  }

  html[data-tool-system] :is(
    .guided-preview-panel,
    .batch-preview-panel,
    .design-lab-preview-panel,
    .rebuilder-preview-column
  ) > .tool-print-size-preview .print-size-summary-body{
    grid-area: printBody !important;
    display: block !important;
    min-width: 0 !important;
  }

  html[data-tool-system] :is(
    .guided-preview-panel,
    .batch-preview-panel,
    .design-lab-preview-panel,
    .rebuilder-preview-column
  ) > .tool-print-size-preview .print-size-summary-size{
    font-size: 1rem !important;
    line-height: 1.12 !important;
  }

  html[data-tool-system] :is(
    .guided-preview-panel,
    .batch-preview-panel,
    .design-lab-preview-panel,
    .rebuilder-preview-column
  ) > .tool-print-size-preview .print-size-summary-copy,
  html[data-tool-system] :is(
    .guided-preview-panel,
    .batch-preview-panel,
    .design-lab-preview-panel,
    .rebuilder-preview-column
  ) > .tool-print-size-preview .print-size-summary-hint{
    display: none !important;
  }

  html[data-tool-system] :is(
    .guided-preview-panel,
    .batch-preview-panel,
    .design-lab-preview-panel,
    .rebuilder-preview-column
  ) > .tool-print-size-preview .print-size-summary-button{
    grid-area: printAction !important;
    width: auto !important;
    min-width: 124px !important;
    max-width: 150px !important;
    min-height: 44px !important;
    height: auto !important;
    padding: 0 13px !important;
    margin: 0 !important;
    border-radius: 15px !important;
    align-self: center !important;
    justify-self: end !important;
    font-size: .86rem !important;
    line-height: 1.12 !important;
    white-space: normal !important;
  }
}

@media (max-width: 360px){
  html[data-tool-system] :is(
    .guided-preview-panel,
    .batch-preview-panel,
    .design-lab-preview-panel,
    .rebuilder-preview-column
  ) > .tool-print-size-preview{
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "printHead"
      "printBody"
      "printAction" !important;
    row-gap: 8px !important;
  }

  html[data-tool-system] :is(
    .guided-preview-panel,
    .batch-preview-panel,
    .design-lab-preview-panel,
    .rebuilder-preview-column
  ) > .tool-print-size-preview .print-size-summary-button{
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch !important;
  }
}

@media (max-width: 520px){
  html[data-tool-system] :is(
    .guided-preview-panel,
    .batch-preview-panel,
    .design-lab-preview-panel,
    .rebuilder-preview-column
  ) > .tool-print-size-preview .print-size-summary-heading{
    display: none !important;
  }
}