:root {
  --bg: #edf1ef;
  --bg-2: #f7f3ea;
  --surface: #fbfcfb;
  --surface-strong: #ffffff;
  --surface-soft: #eef4f3;
  --ink: #101819;
  --muted: #667474;
  --line: #d8e1de;
  --line-strong: #b9c9c4;
  --accent: #35baff;
  --accent-dark: #7564ff;
  --blue: #35baff;
  --warm: #c66f2c;
  --danger: #b23d47;
  --shadow: 0 18px 42px rgba(16, 24, 25, 0.12);
  --shadow-soft: 0 10px 26px rgba(16, 24, 25, 0.08);
}

/* VETRIAX AI SaaS futurist override - 2026-05-23 */
:root {
  --bg-base: #0a0a0f;
  --bg-surface: #10101a;
  --bg-elevated: #16162a;
  --accent: #00e5ff;
  --accent-dim: rgba(0, 229, 255, 0.12);
  --accent-hover: rgba(0, 229, 255, 0.3);
  --violet: #7c3aed;
  --text-primary: #ffffff;
  --text-muted: #a0a0b8;
  --border: rgba(0, 229, 255, 0.12);
  --border-hover: rgba(0, 229, 255, 0.3);
  --radius-card: 12px;
  --radius-btn: 8px;
  --radius-chip: 999px;
}

* {
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease,
    opacity 0.2s ease;
}

body {
  background:
    linear-gradient(90deg, rgba(0, 229, 255, 0.035) 1px, transparent 1px),
    linear-gradient(0deg, rgba(124, 58, 237, 0.03) 1px, transparent 1px),
    radial-gradient(ellipse at 72% 8%, rgba(124, 58, 237, 0.16), transparent 44%),
    radial-gradient(ellipse at 18% 34%, rgba(0, 229, 255, 0.1), transparent 48%),
    var(--bg-base);
  background-size: 56px 56px, 56px 56px, auto, auto, auto;
  color: var(--text-primary);
  font-family:
    Inter, Sora, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

body:has(.landing-page:not([hidden])),
body:has(.app-shell:not([hidden])) {
  background:
    linear-gradient(90deg, rgba(0, 229, 255, 0.035) 1px, transparent 1px),
    linear-gradient(0deg, rgba(124, 58, 237, 0.03) 1px, transparent 1px),
    radial-gradient(ellipse at 30% 50%, rgba(124, 58, 237, 0.12), transparent 70%),
    var(--bg-base);
  background-size: 56px 56px, 56px 56px, auto, auto;
}

.landing-nav,
.topbar,
.trial-band,
.time-strip article,
.benefit-grid article,
.cta-band,
.workflow-band,
.feature-panel,
.use-case-grid article,
.pricing-card,
.final-cta,
.site-footer,
.tool-panel,
.preview-panel,
.export-panel,
.auth-card,
.billing-card,
.admin-panel,
.admin-card,
.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)),
    var(--bg-surface);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(18px) saturate(145%);
}

.time-strip article:hover,
.benefit-grid article:hover,
.use-case-grid article:hover,
.pricing-card:hover,
.faq-item:hover,
.tool-panel:hover,
.preview-panel:hover,
.export-panel:hover {
  border-color: var(--border-hover);
  box-shadow: 0 0 34px rgba(0, 229, 255, 0.08), 0 22px 70px rgba(0, 0, 0, 0.32);
  transform: translateY(-2px);
}

.hero-section,
.final-cta {
  background: radial-gradient(ellipse at 30% 50%, rgba(124, 58, 237, 0.12), transparent 70%);
}

.hero-kicker {
  border: 1px solid var(--accent-dim);
  background: rgba(0, 229, 255, 0.06);
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.section-kicker {
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero-copy h2,
.section-heading-landing h2,
.pricing-copy h2,
.final-cta h2,
.feature-copy h2,
.workflow-band h2,
.cta-band h2 {
  color: var(--text-primary);
  font-weight: 700;
}

.hero-copy h2 {
  max-width: 650px;
  font-size: clamp(2.7rem, 4vw, 4.7rem);
  line-height: 1.03;
}

p,
.hero-copy p,
.pricing-copy p,
.feature-copy p,
.use-case-grid p,
.benefit-grid p,
.admin-note,
.auth-card p,
.billing-card p {
  color: var(--text-muted);
  line-height: 1.7;
}

.button {
  border-radius: var(--radius-btn);
}

.button.primary,
.landing-page .button.primary,
body:has(.app-shell:not([hidden])) .button.primary {
  border-color: transparent;
  background: var(--accent);
  color: #000000;
  font-weight: 700;
  box-shadow: 0 0 0 rgba(0, 229, 255, 0);
}

.button.primary:hover,
.landing-page .button.primary:hover,
body:has(.app-shell:not([hidden])) .button.primary:hover {
  filter: brightness(1.1);
  box-shadow: 0 0 20px rgba(0, 229, 255, 0.4);
  transform: translateY(-1px);
}

.button.secondary,
.landing-page .button.secondary,
.text-button,
body:has(.app-shell:not([hidden])) .button.secondary,
body:has(.app-shell:not([hidden])) .text-button {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--accent);
}

.button.secondary:hover,
.text-button:hover {
  border-color: var(--border-hover);
  background: var(--accent-dim);
}

.landing-nav-links a {
  color: var(--text-muted);
}

.landing-nav-links a:hover {
  border-color: var(--border-hover);
  background: var(--accent-dim);
  color: var(--accent);
}

.hero-chips,
.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hero-chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-chip);
  padding: 4px 14px;
  background: rgba(0, 229, 255, 0.06);
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 800;
}

.stat-strip {
  display: flex;
  justify-content: center;
  gap: 64px;
  width: 100%;
  padding: 40px 0;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.stat-item strong {
  color: var(--accent);
  font-size: 2rem;
  font-weight: 700;
}

.stat-item span {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.pricing-card {
  border-color: rgba(0, 229, 255, 0.25);
  box-shadow: 0 0 40px rgba(0, 229, 255, 0.08), 0 22px 70px rgba(0, 0, 0, 0.28);
}

.badge-popular {
  width: fit-content;
  border-radius: var(--radius-chip);
  padding: 3px 12px;
  background: var(--violet);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pricing-note,
.pricing-reassure {
  color: var(--text-muted);
  font-size: 0.78rem;
  text-align: center;
}

.faq-section {
  max-width: 720px;
  margin: 0 auto;
  padding: 80px 24px;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 22px;
}

.faq-item {
  overflow: hidden;
}

.faq-item[open] {
  border-color: var(--border-hover);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 24px;
  color: var(--text-primary);
  cursor: pointer;
  font-weight: 500;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  color: var(--accent);
  content: "+";
  font-size: 1.2rem;
}

.faq-item[open] summary::after {
  content: "×";
}

.faq-item p {
  margin: 0;
  padding: 0 24px 20px;
  color: var(--text-muted);
  line-height: 1.7;
}

.footer-copy {
  grid-column: 1 / -1;
  margin-top: 24px;
  color: var(--text-muted);
  font-size: 0.75rem;
  text-align: center;
}

.preset-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 12px;
}

.preset-btn {
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  padding: 8px 0;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
}

.preset-btn:hover,
.preset-btn.active {
  border-color: var(--accent);
  color: var(--accent);
}

.preset-btn.active {
  background: rgba(0, 229, 255, 0.08);
}

.highlight-check {
  border: 1px solid var(--accent-dim);
  border-radius: 8px;
  padding: 10px 12px;
  background: rgba(0, 229, 255, 0.04);
  margin-bottom: 8px;
}

.drop-zone {
  position: relative;
  border-color: var(--border);
  background:
    linear-gradient(90deg, rgba(0, 229, 255, 0.06) 1px, transparent 1px),
    linear-gradient(0deg, rgba(124, 58, 237, 0.05) 1px, transparent 1px),
    var(--bg-elevated);
  background-size: 28px 28px, 28px 28px, auto;
}

.drop-zone:hover,
.drop-zone.dragging {
  border-color: var(--border-hover);
  box-shadow: inset 0 0 36px rgba(0, 229, 255, 0.08), 0 0 22px rgba(0, 229, 255, 0.08);
}

.drop-thumb {
  width: 100%;
  max-height: 140px;
  object-fit: contain;
  border-radius: 8px;
}

.thumb-replace-btn {
  position: absolute;
  right: 12px;
  bottom: 12px;
  border: 1px solid var(--border-hover);
  border-radius: var(--radius-btn);
  padding: 7px 10px;
  background: rgba(10, 10, 15, 0.78);
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 800;
  backdrop-filter: blur(12px);
}

.thumb-replace-btn:hover {
  background: var(--accent);
  color: #000000;
}

#textLayerSummary {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
}

.layer-badge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.78rem;
}

.layer-badge.recon {
  border: 1px solid rgba(0, 229, 255, 0.2);
  background: rgba(0, 229, 255, 0.08);
  color: var(--accent);
}

.layer-badge.fallback {
  border: 1px solid rgba(124, 58, 237, 0.2);
  background: rgba(124, 58, 237, 0.08);
  color: #a78bfa;
}

.layer-badge small {
  color: var(--text-muted);
  font-size: 0.72rem;
}

body:has(.app-shell:not([hidden])) .preview-stage:not(.empty) {
  /* neutral grey: shows white AND dark art (white-on-white was the bug) */
  background: #6f757c;
}

@media (max-width: 920px) {
  .stat-strip {
    gap: 24px;
  }
}

@media (max-width: 640px) {
  .hero-copy h2 {
    font-size: clamp(1.8rem, 7vw, 2.3rem);
  }

  .stat-strip {
    flex-direction: column;
  }

  .preset-row {
    grid-template-columns: 1fr;
  }

  .stat-strip {
    gap: 20px;
    padding: 26px 0;
  }

  .faq-section {
    padding: 56px 0;
  }
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    linear-gradient(90deg, rgba(16, 24, 25, 0.045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(16, 24, 25, 0.035) 1px, transparent 1px),
    linear-gradient(145deg, var(--bg), var(--bg-2));
  background-size: 48px 48px, 48px 48px, auto;
  color: var(--ink);
  font-family: Inter, Segoe UI, Arial, Helvetica, sans-serif;
}

body:has(.landing-page:not([hidden])) {
  background:
    linear-gradient(90deg, rgba(95, 231, 255, 0.075) 1px, transparent 1px),
    linear-gradient(0deg, rgba(122, 88, 255, 0.07) 1px, transparent 1px),
    linear-gradient(135deg, rgba(53, 186, 255, 0.18), transparent 36%),
    linear-gradient(315deg, rgba(178, 44, 255, 0.16), transparent 42%),
    #070b16;
  background-size: 64px 64px, 64px 64px, auto, auto, auto;
}

body:has(.app-shell:not([hidden])) {
  background:
    linear-gradient(90deg, rgba(53, 186, 255, 0.07) 1px, transparent 1px),
    linear-gradient(0deg, rgba(122, 88, 255, 0.06) 1px, transparent 1px),
    linear-gradient(140deg, #070b16, #0c1224 58%, #0a0f1d);
  background-size: 52px 52px, 52px 52px, auto;
}

button,
input,
select {
  font: inherit;
}

button {
  color: inherit;
}

.app-shell {
  width: min(1540px, 100%);
  min-height: 100vh;
  margin: 0 auto;
  padding: 22px;
}

.landing-page {
  position: relative;
  width: 100%;
  min-height: 100vh;
  margin: 0 auto;
  padding: 22px clamp(16px, 3vw, 42px) 64px;
  color: #f7fbff;
  overflow: hidden;
}

.landing-page::before {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7, 11, 22, 0), rgba(7, 11, 22, 0.82)),
    repeating-linear-gradient(90deg, transparent 0 38px, rgba(255, 255, 255, 0.025) 38px 39px);
  content: "";
}

.landing-page > * {
  position: relative;
  z-index: 1;
}

.landing-nav {
  position: sticky;
  top: 14px;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  max-width: 1500px;
  margin: 0 auto;
  border: 1px solid rgba(16, 24, 25, 0.08);
  border-radius: 8px;
  padding: 12px 14px;
  background: rgba(9, 14, 28, 0.72);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(24px);
}

.landing-page .brand-lockup p,
.landing-page .hero-copy p,
.landing-page .time-strip span,
.landing-page .benefit-grid p {
  color: #9daec4;
}

.landing-actions,
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
}

.hero-section {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(440px, 1.12fr);
  gap: clamp(28px, 4.4vw, 64px);
  align-items: center;
  min-height: auto;
  max-width: 1500px;
  margin: 0 auto;
  padding: clamp(54px, 6vw, 90px) 0 clamp(54px, 6vw, 86px);
}

.hero-copy {
  display: grid;
  gap: 16px;
  max-width: 620px;
}

.hero-kicker {
  width: fit-content;
  border: 1px solid rgba(95, 231, 255, 0.35);
  border-radius: 999px;
  padding: 7px 12px;
  background: rgba(95, 231, 255, 0.1);
  color: #8af2ff;
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.hero-copy h2 {
  max-width: 560px;
  font-size: clamp(2.35rem, 3.7vw, 4rem);
  line-height: 1.02;
  letter-spacing: 0;
  text-transform: none;
  text-shadow: 0 0 40px rgba(95, 231, 255, 0.18);
}

.hero-copy p {
  max-width: 600px;
  font-size: clamp(0.98rem, 1.25vw, 1.12rem);
  line-height: 1.58;
}

.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.hero-proof span {
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  padding: 8px 11px;
  background: rgba(255, 255, 255, 0.055);
  color: #c9d8e8;
  font-size: 0.78rem;
  font-weight: 900;
}

.hero-visual {
  min-height: clamp(470px, 42vw, 545px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 16px;
  background:
    linear-gradient(90deg, rgba(95, 231, 255, 0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(95, 231, 255, 0.07) 1px, transparent 1px),
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  background-size: 38px 38px, 38px 38px, auto;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.38), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.vector-orbit {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 513px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 45%, rgba(95, 231, 255, 0.16), transparent 34%),
    radial-gradient(circle at 72% 26%, rgba(151, 95, 255, 0.14), transparent 30%),
    rgba(7, 11, 22, 0.72);
}

.orbit-line {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(95, 231, 255, 0.24);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(var(--angle));
}

.orbit-a {
  width: 84%;
  height: 64%;
  --angle: -10deg;
}

.orbit-b {
  width: 62%;
  height: 84%;
  --angle: 34deg;
}

.orbit-c {
  width: 42%;
  height: 42%;
  --angle: 0deg;
  border-color: rgba(151, 95, 255, 0.24);
}

.vector-canvas {
  position: absolute;
  inset: 14%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  display: grid;
  place-items: center;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    rgba(255, 255, 255, 0.06);
  background-size: 26px 26px;
  box-shadow: inset 0 0 40px rgba(95, 231, 255, 0.08);
}

.hero-logo-img {
  position: relative;
  z-index: 3;
  display: block;
  width: min(96%, 680px);
  max-height: 92%;
  height: auto;
  border-radius: 8px;
  object-fit: contain;
  filter: drop-shadow(0 0 34px rgba(95, 231, 255, 0.2)) drop-shadow(0 0 52px rgba(122, 88, 255, 0.18));
}

.scan-line {
  position: absolute;
  z-index: 4;
  inset: 0;
  background: linear-gradient(180deg, transparent, rgba(95, 231, 255, 0.24), transparent);
  height: 36%;
  transform: translateY(92%);
}

.vector-path {
  position: absolute;
  z-index: 2;
  inset: 12% 8%;
  width: 84%;
  height: 76%;
  overflow: visible;
}

.vector-path path {
  fill: none;
  stroke: #5fe7ff;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 10px rgba(95, 231, 255, 0.55));
}

.vector-path path:nth-child(2) {
  stroke: #9d72ff;
}

.vector-path circle {
  fill: #070b16;
  stroke: #f7fbff;
  stroke-width: 4;
  transform-box: fill-box;
  transform-origin: center;
}

.vector-node {
  position: absolute;
  z-index: 5;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #f7fbff;
  box-shadow: 0 0 18px rgba(95, 231, 255, 0.9);
  transform-origin: center;
}

.node-a {
  left: 20%;
  top: 22%;
}

.node-b {
  right: 18%;
  top: 29%;
}

.node-c {
  left: 24%;
  bottom: 25%;
}

.node-d {
  right: 22%;
  bottom: 22%;
}

.export-ticket {
  position: absolute;
  right: 24px;
  bottom: 24px;
  display: grid;
  gap: 4px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  padding: 13px 15px;
  background: rgba(9, 14, 28, 0.78);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(18px);
}

.export-ticket span {
  color: #9daec4;
  font-size: 0.76rem;
  font-weight: 900;
}

.export-ticket strong {
  font-size: 1.15rem;
}

.time-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  max-width: 1500px;
  margin: 0 auto 76px;
}

.time-strip article {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  min-height: 156px;
  padding: 24px;
  background: rgba(255, 255, 255, 0.055);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(16px);
}

.time-strip strong {
  font-size: clamp(1.8rem, 3.2vw, 3.2rem);
  line-height: 1;
}

.time-strip span {
  color: var(--muted);
  font-weight: 800;
  line-height: 1.45;
}

.trial-band {
  display: grid;
  grid-template-columns: minmax(180px, 0.28fr) minmax(0, 1fr) auto;
  gap: clamp(18px, 3vw, 34px);
  align-items: center;
  max-width: 1500px;
  margin: 0 auto 22px;
  border: 1px solid rgba(95, 231, 255, 0.3);
  border-radius: 8px;
  padding: clamp(22px, 3.2vw, 38px);
  background:
    linear-gradient(110deg, rgba(53, 186, 255, 0.22), rgba(178, 44, 255, 0.16)),
    rgba(255, 255, 255, 0.07);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.32), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(18px);
}

.trial-badge {
  display: grid;
  gap: 7px;
  place-items: center;
  min-height: 150px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  padding: 18px;
  background: rgba(7, 11, 22, 0.62);
  text-align: center;
}

.trial-badge span,
.trial-badge small {
  color: #8af2ff;
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.trial-badge strong {
  font-size: clamp(2.3rem, 4.3vw, 4rem);
  line-height: 0.9;
}

.trial-badge small {
  color: #c9d8e8;
  text-transform: none;
}

.trial-copy {
  display: grid;
  gap: 10px;
  max-width: 780px;
}

.trial-copy h2 {
  font-size: clamp(1.75rem, 3vw, 3rem);
  line-height: 1.04;
  letter-spacing: 0;
  text-transform: none;
}

.trial-copy p {
  color: #c2d2e5;
  font-size: 1.02rem;
  line-height: 1.58;
}

.benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  max-width: 1500px;
  margin: 0 auto 24px;
}

.benefit-grid article {
  display: grid;
  gap: 15px;
  min-height: 244px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 24px;
  background: rgba(255, 255, 255, 0.055);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(16px);
}

.benefit-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: linear-gradient(135deg, #5fe7ff, #9d72ff);
  color: #ffffff;
  font-weight: 900;
}

.benefit-grid h3 {
  margin: 0;
  font-size: clamp(1.18rem, 1.7vw, 1.48rem);
}

.benefit-grid p {
  color: var(--muted);
  line-height: 1.58;
}

.workflow-band {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  max-width: 1500px;
  margin: 24px auto 84px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: clamp(26px, 4vw, 44px);
  background:
    linear-gradient(135deg, rgba(95, 231, 255, 0.14), rgba(157, 114, 255, 0.14)),
    rgba(255, 255, 255, 0.055);
  color: #ffffff;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.26);
  backdrop-filter: blur(18px);
}

.workflow-band span {
  color: #8af2ff;
  font-size: 0.8rem;
  font-weight: 900;
  text-transform: uppercase;
}

.workflow-band h2 {
  margin-top: 6px;
  font-size: clamp(1.8rem, 3vw, 3rem);
  letter-spacing: 0;
  text-transform: none;
}

.workflow-band ol {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 22px;
  color: #eaf5f2;
  font-weight: 800;
  line-height: 1.45;
}

.cta-band,
.trial-band,
.feature-showcase,
.use-case-section,
.pricing-section,
.final-cta {
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
}

.cta-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  margin-top: 0;
  margin-bottom: 84px;
  border: 1px solid rgba(95, 231, 255, 0.22);
  border-radius: 8px;
  padding: clamp(22px, 3vw, 34px);
  background:
    linear-gradient(115deg, rgba(53, 186, 255, 0.16), rgba(122, 88, 255, 0.11)),
    rgba(255, 255, 255, 0.055);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.26);
  backdrop-filter: blur(18px);
}

.cta-band span,
.section-kicker {
  color: #8af2ff;
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.cta-band h2,
.feature-copy h2,
.section-heading-landing h2,
.pricing-copy h2,
.final-cta h2 {
  margin-top: 8px;
  font-size: clamp(1.7rem, 3.2vw, 3.25rem);
  line-height: 1.02;
  letter-spacing: 0;
  text-transform: none;
}

.feature-showcase {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(420px, 1.14fr);
  gap: clamp(26px, 4vw, 62px);
  align-items: center;
  margin-bottom: 92px;
}

.feature-copy {
  display: grid;
  gap: 18px;
  max-width: 640px;
}

.feature-copy p,
.pricing-copy p {
  color: #9daec4;
  font-size: 1.03rem;
  line-height: 1.65;
}

.feature-copy .button {
  width: fit-content;
}

.feature-panel {
  position: relative;
  min-height: 500px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 24px;
  background:
    linear-gradient(90deg, rgba(95, 231, 255, 0.07) 1px, transparent 1px),
    linear-gradient(0deg, rgba(95, 231, 255, 0.06) 1px, transparent 1px),
    rgba(255, 255, 255, 0.055);
  background-size: 34px 34px, 34px 34px, auto;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.34);
}

.quality-meter,
.quality-result {
  position: absolute;
  display: grid;
  gap: 5px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  padding: 16px 18px;
  background: rgba(9, 14, 28, 0.8);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.26);
  backdrop-filter: blur(16px);
}

.quality-meter {
  left: 28px;
  top: 26px;
}

.quality-result {
  right: 28px;
  bottom: 26px;
}

.quality-meter span,
.quality-result span {
  color: #9daec4;
  font-size: 0.78rem;
  font-weight: 900;
}

.quality-meter strong,
.quality-result strong {
  font-size: 1.25rem;
}

.quality-lines {
  position: absolute;
  inset: 23% 12% 20%;
}

.quality-lines span {
  position: absolute;
  border: 2px solid #6de9ff;
  border-color: #6de9ff transparent transparent #6de9ff;
  border-radius: 8px;
  filter: drop-shadow(0 0 14px rgba(95, 231, 255, 0.6));
}

.quality-lines span:nth-child(1) {
  left: 2%;
  top: 22%;
  width: 58%;
  height: 44%;
  transform: skewX(-12deg);
}

.quality-lines span:nth-child(2) {
  right: 4%;
  top: 10%;
  width: 34%;
  height: 72%;
  border-color: #b98cff #b98cff transparent transparent;
}

.quality-lines span:nth-child(3) {
  left: 18%;
  bottom: 2%;
  width: 48%;
  height: 20%;
  border-color: transparent transparent #6de9ff #6de9ff;
}

.quality-lines span:nth-child(4) {
  right: 22%;
  bottom: 20%;
  width: 10px;
  height: 10px;
  border-color: #ffffff;
  background: #070b16;
}

.use-case-section {
  margin-bottom: 92px;
}

.section-heading-landing {
  display: grid;
  gap: 8px;
  max-width: 840px;
  margin-bottom: 24px;
}

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

.use-case-grid article {
  display: grid;
  gap: 12px;
  min-height: 210px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 22px;
  background: rgba(255, 255, 255, 0.055);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(16px);
}

.use-case-grid h3 {
  margin: 0;
  font-size: 1.15rem;
}

.use-case-grid p {
  color: #9daec4;
  line-height: 1.55;
}

.pricing-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
  gap: clamp(28px, 5vw, 70px);
  align-items: center;
  margin-bottom: 92px;
}

.pricing-copy {
  max-width: 760px;
}

.pricing-card {
  display: grid;
  gap: 14px;
  border: 1px solid rgba(95, 231, 255, 0.24);
  border-radius: 8px;
  padding: 26px;
  background:
    linear-gradient(140deg, rgba(53, 186, 255, 0.13), rgba(178, 44, 255, 0.11)),
    rgba(255, 255, 255, 0.068);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.34);
}

.pricing-card > span {
  color: #8af2ff;
  font-size: 0.8rem;
  font-weight: 900;
}

.pricing-card em {
  display: inline-grid;
  place-items: center;
  width: fit-content;
  min-height: 28px;
  border: 1px solid rgba(95, 231, 255, 0.44);
  border-radius: 999px;
  padding: 0 12px;
  background: rgba(95, 231, 255, 0.12);
  color: #8af2ff;
  font-style: normal;
  font-size: 0.78rem;
  font-weight: 900;
}

.pricing-card strong {
  font-size: clamp(2.6rem, 5vw, 4.5rem);
  line-height: 0.9;
}

.pricing-card small {
  color: #9daec4;
  font-weight: 900;
}

.pricing-card ul {
  display: grid;
  gap: 10px;
  margin: 8px 0;
  padding-left: 19px;
  color: #dbe8f6;
  font-weight: 800;
  line-height: 1.45;
}

.pricing-card .button {
  width: 100%;
}

.final-cta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: clamp(24px, 4vw, 42px);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.32);
}

.final-cta img {
  width: 82px;
  height: 82px;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 0 38px rgba(53, 186, 255, 0.28);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
  border: 1px solid rgba(16, 24, 25, 0.08);
  border-radius: 8px;
  padding: 14px;
  background: rgba(251, 252, 251, 0.9);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(18px);
}

.brand-lockup {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 13px;
}

.brand-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  flex: 0 0 auto;
  border: 1px solid #0b2426;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 40%),
    conic-gradient(from 215deg, #0b2426, var(--accent), var(--warm), var(--blue), #0b2426);
  color: #ffffff;
  font-weight: 900;
  letter-spacing: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 12px 24px rgba(16, 24, 25, 0.22);
}

.brand-logo-img {
  display: block;
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 0 28px rgba(53, 186, 255, 0.22), 0 0 42px rgba(134, 55, 255, 0.18);
}

.brand-home {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.brand-home:focus-visible,
.billing-logo-button:focus-visible {
  outline: 3px solid rgba(95, 231, 255, 0.55);
  outline-offset: 4px;
}

.landing-page .brand-logo-img {
  width: 68px;
  height: 68px;
}

.auth-brand .brand-logo-img {
  width: 62px;
  height: 62px;
}

.brand-mark::after {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 9px;
  height: 9px;
  border: 2px solid #ffffff;
  border-radius: 999px;
  content: "";
}

h1,
h2,
p {
  margin: 0;
}

.brand-row {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 10px;
}

h1 {
  font-size: clamp(1.55rem, 2.3vw, 2.15rem);
  line-height: 1;
  letter-spacing: 0;
}

h2 {
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.brand-chip,
.export-heading span {
  display: inline-grid;
  place-items: center;
  min-height: 24px;
  border: 1px solid rgba(95, 231, 255, 0.42);
  border-radius: 999px;
  padding: 0 9px;
  background: rgba(95, 231, 255, 0.12);
  color: #8af2ff;
  font-size: 0.72rem;
  font-weight: 900;
}

.export-heading {
  justify-content: center;
  text-align: center;
}

.export-heading h2 {
  display: inline-grid;
  place-items: center;
  min-height: 28px;
  width: fit-content;
  margin: 0 auto;
  border: 1px solid rgba(95, 231, 255, 0.46);
  border-radius: 999px;
  padding: 0 13px;
  background: rgba(95, 231, 255, 0.12);
  color: #8af2ff;
  box-shadow: inset 0 0 0 1px rgba(138, 242, 255, 0.08), 0 0 18px rgba(95, 231, 255, 0.1);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: none;
}

.brand-lockup p {
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.92rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.landing-page .button.primary {
  border-color: rgba(95, 231, 255, 0.68);
  background: linear-gradient(135deg, #35baff, #7a58ff 56%, #b22cff);
  box-shadow: 0 16px 36px rgba(95, 231, 255, 0.22), 0 0 42px rgba(122, 88, 255, 0.2);
}

.landing-page .button {
  min-height: 42px;
  padding: 0 15px;
  font-size: 0.9rem;
}

.landing-page .button.secondary {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.055);
  color: #f7fbff;
}

.top-actions,
.preview-toolbar,
.section-heading,
.export-heading {
  display: flex;
  align-items: center;
  gap: 10px;
}

.top-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.account-box {
  display: flex;
  align-items: center;
  min-height: 44px;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 8px 0 13px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 800;
}

.account-box span {
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.button,
.segment,
.text-button {
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  font-weight: 800;
  letter-spacing: 0;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.button {
  min-height: 44px;
  padding: 0 17px;
  background: var(--surface-strong);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset;
}

.button:hover,
.segment:hover,
.text-button:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-soft);
}

.button:active,
.segment:active,
.text-button:active {
  transform: translateY(1px);
}

.button.primary {
  border-color: var(--accent);
  background: linear-gradient(180deg, #15a08f, var(--accent-dark));
  color: #ffffff;
  box-shadow: 0 12px 22px rgba(15, 138, 123, 0.24);
}

.button.primary:hover {
  border-color: var(--accent-dark);
  background: linear-gradient(180deg, #128b7d, #094f49);
}

.button.secondary {
  background: rgba(255, 255, 255, 0.92);
}

.button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
  transform: none;
  box-shadow: none;
}

.workspace {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr) 260px;
  gap: 16px;
  align-items: stretch;
}

.tool-panel,
.preview-panel,
.export-panel {
  min-width: 0;
  border: 1px solid rgba(16, 24, 25, 0.1);
  border-radius: 8px;
  background: rgba(251, 252, 251, 0.93);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.tool-panel,
.export-panel {
  display: flex;
  flex-direction: column;
  gap: 17px;
  padding: 15px;
}

.tool-panel {
  position: relative;
}

.tool-panel::before,
.export-panel::before {
  display: block;
  width: 42px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--warm));
  content: "";
}

.drop-zone {
  position: relative;
  display: grid;
  align-content: center;
  place-items: center;
  gap: 9px;
  min-height: 190px;
  padding: 22px 18px 20px;
  overflow: hidden;
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(15, 138, 123, 0.1), rgba(198, 111, 44, 0.08)),
    repeating-linear-gradient(135deg, rgba(49, 87, 164, 0.09) 0 10px, transparent 10px 20px),
    var(--surface-soft);
  text-align: center;
  outline: none;
  cursor: pointer;
}

.drop-zone::after {
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 8px;
  pointer-events: none;
  content: "";
}

.drop-zone strong {
  position: relative;
  z-index: 1;
  display: block;
  font-size: 1rem;
}

.drop-zone span {
  position: relative;
  z-index: 1;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 700;
}

.drop-zone.dragging {
  border-color: var(--accent);
  background-color: #e7f6f3;
  box-shadow: inset 0 0 0 2px rgba(15, 138, 123, 0.15);
}

.drop-zone:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(53, 186, 255, 0.28);
}

.sample-button {
  width: 100%;
  border-color: #edc79f;
  background: linear-gradient(180deg, #fffaf4, #fff1df);
  color: #743b0c;
}

.vector-progress {
  display: grid;
  gap: 9px;
  border: 1px solid rgba(95, 231, 255, 0.18);
  border-radius: 8px;
  padding: 12px;
  background: rgba(95, 231, 255, 0.07);
}

.vector-progress div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #cfe6f6;
  font-size: 0.8rem;
  font-weight: 900;
}

.vector-progress strong {
  color: #8af2ff;
}

.progress-track {
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
}

.progress-track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #35baff, #7a58ff, #b22cff);
  box-shadow: 0 0 18px rgba(53, 186, 255, 0.42);
  transition: width 220ms ease;
}

.control-section {
  display: grid;
  gap: 12px;
  padding-top: 2px;
}

.section-heading,
.export-heading {
  justify-content: space-between;
}

.text-button {
  min-height: 31px;
  padding: 0 10px;
  background: var(--surface-strong);
  color: var(--muted);
  font-size: 0.8rem;
}

.segmented {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #e9f0ee;
}

.segment {
  min-width: 0;
  min-height: 36px;
  padding: 0 8px;
  background: transparent;
  color: var(--muted);
  white-space: nowrap;
}

.segment.active {
  border-color: rgba(255, 255, 255, 0.78);
  background: var(--surface-strong);
  color: var(--ink);
  box-shadow: 0 8px 18px rgba(16, 24, 25, 0.08);
}

.range-field,
.select-field,
.check-field {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 800;
}

.range-field span,
.select-field span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

output {
  min-width: 42px;
  color: var(--ink);
  font-weight: 900;
  text-align: right;
}

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

select {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 11px;
  background: var(--surface-strong);
  color: var(--ink);
  font-weight: 800;
}

.check-field {
  grid-template-columns: 18px 1fr;
  align-items: center;
  gap: 9px;
  color: var(--ink);
}

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

.preview-panel {
  display: grid;
  grid-template-rows: auto minmax(520px, 1fr) auto;
  overflow: hidden;
}

.preview-toolbar {
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(90deg, rgba(16, 24, 25, 0.035), transparent),
    rgba(255, 255, 255, 0.52);
}

.view-tabs {
  width: min(500px, 100%);
}

.status-pill {
  display: inline-grid;
  place-items: center;
  min-height: 32px;
  max-width: 210px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 14px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 900;
  white-space: nowrap;
}

.status-pill.working {
  border-color: #e6bd7e;
  background: #fff6e6;
  color: #85500c;
}

.status-pill.ready {
  border-color: #9fd8cf;
  background: #ecfbf8;
  color: #09645a;
}

.status-pill.error {
  border-color: #e7a7ad;
  background: #fff0f1;
  color: var(--danger);
}

.preview-stage {
  position: relative;
  display: grid;
  align-items: center;
  justify-items: center;
  min-height: 520px;
  overflow: hidden;
  background:
    linear-gradient(45deg, #e3ece9 25%, transparent 25%),
    linear-gradient(-45deg, #e3ece9 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e3ece9 75%),
    linear-gradient(-45deg, transparent 75%, #e3ece9 75%),
    #f8fbfa;
  background-position: 0 0, 0 13px, 13px -13px, -13px 0;
  background-size: 26px 26px;
}

.preview-stage:not(.empty) {
  /* single neutral grey backdrop — shows white, black and colour art alike */
  background: #6f757c;
}

.preview-stage::after {
  position: absolute;
  inset: 26px;
  border: 1px solid rgba(16, 24, 25, 0.08);
  border-radius: 8px;
  pointer-events: none;
  content: "";
}

.preview-stage.empty {
  background:
    linear-gradient(135deg, rgba(15, 138, 123, 0.08), rgba(49, 87, 164, 0.06)),
    var(--surface-soft);
}

.empty-state {
  display: grid;
  justify-items: center;
  gap: 8px;
  color: var(--muted);
  text-align: center;
}

.empty-state strong {
  color: var(--ink);
  font-size: 1.08rem;
}

.empty-icon {
  display: block;
  width: 92px;
  height: 92px;
  overflow: visible;
  box-shadow: var(--shadow-soft);
  border-radius: 8px;
  flex-shrink: 0;
}

.preview-stage img,
.preview-stage svg {
  position: relative;
  z-index: 1;
  display: block;
  max-width: calc(100% - 56px);
  max-height: calc(100% - 56px);
  object-fit: contain;
  filter: drop-shadow(0 18px 22px rgba(16, 24, 25, 0.14));
}

.merge-stack {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: calc(100% - 56px);
  height: calc(100% - 56px);
}

.merge-stack img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
}

.merge-stack .vector-layer {
  opacity: 0.66;
  mix-blend-mode: multiply;
}

.split-view {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  width: 100%;
  height: 100%;
}

.split-view figure {
  display: grid;
  grid-template-rows: 1fr auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
  border-right: 1px solid var(--line);
}

.split-view figure:last-child {
  border-right: 0;
}

.split-view .image-slot {
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 16px;
}

.split-view figcaption {
  border-top: 1px solid var(--line);
  padding: 10px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 900;
  text-align: center;
}

.palette-strip {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 58px;
  padding: 12px;
  overflow-x: auto;
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.68);
}

.swatch {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border: 1px solid rgba(16, 24, 25, 0.2);
  border-radius: 8px;
  background: var(--swatch);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.34), 0 7px 14px rgba(16, 24, 25, 0.08);
}

.swatch-editable {
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.swatch-editable:hover {
  transform: translateY(-2px) scale(1.08);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5), 0 0 0 2px var(--accent),
    0 8px 16px rgba(16, 24, 25, 0.18);
}

.palette-recolor-hint {
  font-size: 12px;
  opacity: 0.72;
  margin: 2px 0 6px;
}

.export-heading {
  min-height: 24px;
}

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

.metric-grid article,
.file-card {
  display: grid;
  gap: 5px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 13px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(238, 244, 243, 0.78)),
    var(--surface-soft);
}

.metric-grid span,
.file-card span,
.file-card small {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.metric-grid strong,
.file-card strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 1.08rem;
}

.download-stack {
  display: grid;
  gap: 10px;
}

.download-stack .button {
  width: 100%;
}

.file-card {
  margin-top: auto;
}

.app-locked {
  filter: blur(2px) saturate(0.85);
  pointer-events: none;
  user-select: none;
}

.auth-screen,
.billing-lock,
.admin-screen {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(237, 241, 239, 0.78);
  backdrop-filter: blur(18px);
}

.auth-screen[hidden],
.billing-lock[hidden],
.admin-screen[hidden],
.account-box[hidden] {
  display: none;
}

.auth-card,
.billing-card {
  width: min(440px, 100%);
  max-height: calc(100vh - 36px);
  overflow: auto;
  border: 1px solid rgba(16, 24, 25, 0.12);
  border-radius: 8px;
  padding: 20px;
  background: rgba(251, 252, 251, 0.96);
  box-shadow: 0 28px 80px rgba(16, 24, 25, 0.22);
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 18px;
}

.auth-brand h2,
.billing-card h2 {
  font-size: 1.25rem;
  letter-spacing: 0;
  text-transform: none;
}

.auth-brand p,
.billing-card p {
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.45;
}

.auth-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px;
  background: var(--surface-soft);
}

.auth-tab {
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-weight: 900;
}

.auth-tab.active {
  border-color: rgba(255, 255, 255, 0.8);
  background: var(--surface-strong);
  color: var(--ink);
  box-shadow: var(--shadow-soft);
}

.auth-form,
.auth-field,
.billing-card,
.billing-actions {
  display: grid;
  gap: 12px;
}

.auth-field {
  gap: 7px;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 900;
}

.auth-field input {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  background: var(--surface-strong);
  color: var(--ink);
}

.auth-message {
  min-height: 20px;
  color: var(--danger);
  font-size: 0.88rem;
  font-weight: 800;
}

.billing-card {
  text-align: center;
}

.billing-lock {
  background:
    linear-gradient(90deg, rgba(95, 231, 255, 0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(122, 88, 255, 0.07) 1px, transparent 1px),
    rgba(7, 11, 22, 0.82);
  background-size: 52px 52px, 52px 52px, auto;
}

.billing-card {
  width: min(480px, 100%);
  border-color: rgba(95, 231, 255, 0.2);
  background:
    linear-gradient(145deg, rgba(53, 186, 255, 0.12), rgba(178, 44, 255, 0.11)),
    rgba(9, 14, 28, 0.96);
  color: #f7fbff;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.42), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.billing-card p {
  color: #9daec4;
}

.billing-logo-button {
  display: inline-grid;
  place-items: center;
  justify-self: center;
  width: 64px;
  height: 64px;
  border: 0;
  border-radius: 8px;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.billing-logo-button .brand-logo-img {
  width: 64px;
  height: 64px;
}

.billing-kicker {
  justify-self: center;
  border: 1px solid #e6bd7e;
  border-radius: 999px;
  padding: 6px 10px;
  background: #fff6e6;
  color: #85500c;
  font-size: 0.78rem;
  font-weight: 900;
}

.billing-card strong {
  font-size: 1.45rem;
}

.billing-actions .button {
  display: grid;
  place-items: center;
  width: 100%;
  text-decoration: none;
}

.text-button.danger {
  color: var(--danger);
}

.admin-screen {
  z-index: 30;
  align-items: start;
  overflow: auto;
}

.admin-panel {
  width: min(1120px, 100%);
  margin: 34px auto;
  border: 1px solid rgba(16, 24, 25, 0.12);
  border-radius: 8px;
  padding: 18px;
  background: rgba(251, 252, 251, 0.97);
  box-shadow: 0 28px 80px rgba(16, 24, 25, 0.22);
}

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

.admin-header h2 {
  margin-top: 10px;
  font-size: 1.55rem;
  letter-spacing: 0;
  text-transform: none;
}

.admin-header p {
  margin-top: 5px;
  color: var(--muted);
}

.admin-grid {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 14px;
}

.admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px;
  background: var(--surface-soft);
}

.admin-tab {
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 0 13px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-weight: 900;
}

.admin-tab.active {
  border-color: rgba(53, 186, 255, 0.38);
  background: #ffffff;
  color: var(--ink);
  box-shadow: var(--shadow-soft);
}

.admin-tab-panel {
  display: none;
}

.admin-tab-panel.active {
  display: block;
}

.admin-card {
  display: grid;
  align-content: start;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: var(--surface-strong);
}

.admin-card h3 {
  margin: 0;
}

.admin-card small {
  color: var(--muted);
  line-height: 1.4;
}

#paymentStatus {
  border: 1px solid #e6bd7e;
  border-radius: 999px;
  padding: 5px 9px;
  background: #fff6e6;
  color: #85500c;
  font-size: 0.74rem;
  font-weight: 900;
}

.admin-user-list {
  display: grid;
  gap: 10px;
  max-height: 590px;
  overflow: auto;
  padding-right: 2px;
}

.admin-user-list.compact {
  max-height: 360px;
}

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

.billing-summary article {
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 13px;
  background: var(--surface-soft);
}

.billing-summary span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 900;
}

.billing-summary strong {
  font-size: 1.16rem;
}

.admin-month {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  background: #ffffff;
  color: var(--ink);
  font-weight: 800;
}

.admin-note {
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.45;
}

.admin-user {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface-soft);
}

.admin-user strong,
.admin-user span,
.admin-user small {
  display: block;
  overflow-wrap: anywhere;
}

.admin-user span,
.admin-user small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.admin-user-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.admin-status {
  display: grid;
  place-items: center;
  min-height: 31px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 10px;
  background: #ffffff;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 900;
}

.admin-status.lifetime,
.admin-status.active {
  border-color: #9fd8cf;
  background: #ecfbf8;
  color: #09645a;
}

.admin-status.past_due,
.admin-status.pending {
  border-color: #e6bd7e;
  background: #fff6e6;
  color: #85500c;
}

.admin-status.trial {
  border-color: rgba(95, 231, 255, 0.42);
  background: rgba(95, 231, 255, 0.12);
  color: #09645a;
}

.admin-empty {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}

body:has(.app-shell:not([hidden])) .app-shell {
  width: min(1620px, 100%);
  padding: 18px clamp(12px, 2vw, 26px) 28px;
}

body:has(.app-shell:not([hidden])) .topbar,
body:has(.app-shell:not([hidden])) .tool-panel,
body:has(.app-shell:not([hidden])) .preview-panel,
body:has(.app-shell:not([hidden])) .export-panel {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(9, 14, 28, 0.84);
  color: #f7fbff;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.3);
}

body:has(.app-shell:not([hidden])) .topbar {
  min-height: 86px;
  padding: 13px 16px;
  backdrop-filter: blur(24px);
}

body:has(.app-shell:not([hidden])) .workspace {
  grid-template-columns: 336px minmax(0, 1fr) 288px;
  gap: 18px;
}

body:has(.app-shell:not([hidden])) .brand-lockup p,
body:has(.app-shell:not([hidden])) .range-field,
body:has(.app-shell:not([hidden])) .select-field,
body:has(.app-shell:not([hidden])) .drop-zone span,
body:has(.app-shell:not([hidden])) .file-card small,
body:has(.app-shell:not([hidden])) .metric-grid span,
body:has(.app-shell:not([hidden])) .file-card span {
  color: #9daec4;
}

body:has(.app-shell:not([hidden])) .account-box,
body:has(.app-shell:not([hidden])) .segmented,
body:has(.app-shell:not([hidden])) select,
body:has(.app-shell:not([hidden])) .text-button,
body:has(.app-shell:not([hidden])) .button.secondary {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.065);
  color: #eaf5ff;
}

body:has(.app-shell:not([hidden])) .button.primary {
  border-color: rgba(95, 231, 255, 0.72);
  background: linear-gradient(135deg, #35baff, #7a58ff 58%, #b22cff);
  color: #ffffff;
  box-shadow: 0 18px 38px rgba(53, 186, 255, 0.22), 0 0 42px rgba(122, 88, 255, 0.18);
}

body:has(.app-shell:not([hidden])) .sample-button {
  border-color: rgba(95, 231, 255, 0.26);
  background: rgba(53, 186, 255, 0.12);
  color: #8af2ff;
}

body:has(.app-shell:not([hidden])) .sample-button:disabled {
  color: #6f8298;
  opacity: 0.68;
}

body:has(.app-shell:not([hidden])) .drop-zone {
  min-height: 220px;
  border: none;
  background:
    linear-gradient(90deg, rgba(95, 231, 255, 0.07) 1px, transparent 1px),
    linear-gradient(0deg, rgba(122, 88, 255, 0.06) 1px, transparent 1px),
    rgba(255, 255, 255, 0.045);
  background-size: 24px 24px, 24px 24px, auto;
}

body:has(.app-shell:not([hidden])) .drop-zone strong,
body:has(.app-shell:not([hidden])) output,
body:has(.app-shell:not([hidden])) .metric-grid strong,
body:has(.app-shell:not([hidden])) .file-card strong,
body:has(.app-shell:not([hidden])) .segment.active {
  color: #f7fbff;
}

body:has(.app-shell:not([hidden])) .segment {
  color: #9daec4;
}

body:has(.app-shell:not([hidden])) .segment.active {
  border-color: rgba(95, 231, 255, 0.35);
  background: linear-gradient(135deg, rgba(53, 186, 255, 0.28), rgba(122, 88, 255, 0.24));
  box-shadow: 0 10px 24px rgba(53, 186, 255, 0.16);
}

body:has(.app-shell:not([hidden])) .preview-toolbar,
body:has(.app-shell:not([hidden])) .palette-strip {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.045);
}

body:has(.app-shell:not([hidden])) .metric-grid article,
body:has(.app-shell:not([hidden])) .file-card {
  border-color: rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(135deg, rgba(53, 186, 255, 0.08), rgba(122, 88, 255, 0.07)),
    rgba(255, 255, 255, 0.052);
}

body:has(.app-shell:not([hidden])) .tool-panel::before,
body:has(.app-shell:not([hidden])) .export-panel::before {
  width: 58px;
  background: linear-gradient(90deg, #35baff, #7a58ff, #b22cff);
}

body:has(.app-shell:not([hidden])) .admin-screen .button,
body:has(.app-shell:not([hidden])) .admin-screen .text-button {
  border-color: var(--line);
  background: #ffffff;
  color: var(--ink);
  box-shadow: var(--shadow-soft);
}

body:has(.app-shell:not([hidden])) .admin-screen .button.primary {
  border-color: rgba(53, 186, 255, 0.72);
  background: linear-gradient(135deg, #35baff, #7564ff 58%, #b22cff);
  color: #ffffff;
}

body:has(.app-shell:not([hidden])) .admin-screen .button.secondary {
  background: #eef4f3;
  color: var(--ink);
}

body:has(.app-shell:not([hidden])) .admin-screen .text-button.danger {
  border-color: #f0c4c8;
  background: #fff0f1;
  color: var(--danger);
}

body:has(.app-shell:not([hidden])) .billing-lock .button,
body:has(.app-shell:not([hidden])) .billing-lock .text-button {
  border-color: var(--line);
  background: #ffffff;
  color: var(--ink);
  box-shadow: var(--shadow-soft);
}

body:has(.app-shell:not([hidden])) .billing-lock .button.primary {
  border-color: rgba(53, 186, 255, 0.72);
  background: linear-gradient(135deg, #35baff, #7564ff 58%, #b22cff);
  color: #ffffff;
}

body:has(.app-shell:not([hidden])) .billing-lock .button.secondary {
  border-color: rgba(16, 24, 25, 0.12);
  background: #eef4f3;
  color: #162022;
}

body:has(.app-shell:not([hidden])) .billing-lock .text-button {
  border-color: transparent;
  background: transparent;
  color: #667478;
  box-shadow: none;
}

body:has(.landing-page:not([hidden])) {
  animation: landingGridDrift 42s linear infinite;
}

.landing-nav {
  animation: navEnter 620ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.hero-copy > * {
  animation: heroTextIn 760ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--hero-step, 0) * 95ms);
}

.hero-copy > *:nth-child(1) {
  --hero-step: 1;
}

.hero-copy > *:nth-child(2) {
  --hero-step: 2;
}

.hero-copy > *:nth-child(3) {
  --hero-step: 3;
}

.hero-copy > *:nth-child(4) {
  --hero-step: 4;
}

.hero-copy > *:nth-child(5) {
  --hero-step: 5;
}

.hero-kicker,
.brand-chip,
.pricing-card em {
  animation: softSignal 3.8s ease-in-out infinite;
}

.hero-visual {
  animation: visualFloat 8s ease-in-out infinite;
  transform-origin: center;
}

.vector-orbit {
  isolation: isolate;
}

.vector-orbit::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 24%, rgba(95, 231, 255, 0.11) 46%, transparent 62%);
  opacity: 0.65;
  transform: translateX(-110%);
  animation: orbitSweep 7s ease-in-out infinite;
  content: "";
}

.orbit-line {
  animation: orbitSpin 24s linear infinite;
}

.orbit-b {
  animation-duration: 30s;
  animation-direction: reverse;
}

.orbit-c {
  animation-duration: 18s;
}

.scan-line {
  animation: scanSweep 4.8s ease-in-out infinite;
}

.vector-path path {
  stroke-dasharray: 920;
  stroke-dashoffset: 920;
  animation: vectorTrace 6.2s ease-in-out infinite;
}

.vector-path path:nth-child(2) {
  animation-delay: 320ms;
}

.vector-path circle,
.vector-node {
  animation: nodePulse 2.8s ease-in-out infinite;
}

.node-b,
.vector-path circle:nth-of-type(2) {
  animation-delay: 280ms;
}

.node-c,
.vector-path circle:nth-of-type(3) {
  animation-delay: 560ms;
}

.node-d {
  animation-delay: 820ms;
}

.export-ticket,
.quality-meter,
.quality-result {
  animation: panelBreath 5.4s ease-in-out infinite;
}

.trial-band,
.cta-band,
.workflow-band,
.pricing-card,
.final-cta,
.feature-panel {
  position: relative;
  overflow: hidden;
}

.trial-band::after,
.cta-band::after,
.workflow-band::after,
.pricing-card::after,
.final-cta::after,
.feature-panel::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent, rgba(255, 255, 255, 0.09), transparent);
  opacity: 0;
  transform: translateX(-120%);
  animation: surfaceSweep 8s ease-in-out infinite;
  content: "";
}

.cta-band::after {
  animation-delay: 900ms;
}

.workflow-band::after {
  animation-delay: 1.6s;
}

.pricing-card::after {
  animation-delay: 2.2s;
}

.final-cta::after {
  animation-delay: 3s;
}

.feature-panel::after {
  animation-delay: 1.2s;
}

.button.primary,
.landing-page .button.primary {
  position: relative;
  overflow: hidden;
}

.landing-page .button.primary::after,
body:has(.app-shell:not([hidden])) .button.primary::after {
  position: absolute;
  inset: -40% auto -40% -60%;
  width: 42%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  transform: skewX(-18deg);
  animation: buttonSheen 4.8s ease-in-out infinite;
  content: "";
}

.time-strip article,
.benefit-grid article,
.use-case-grid article,
.pricing-card,
.feature-panel {
  transition:
    transform 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    background 220ms ease;
}

.time-strip article:hover,
.benefit-grid article:hover,
.use-case-grid article:hover,
.pricing-card:hover,
.feature-panel:hover {
  transform: translateY(-4px);
  border-color: rgba(95, 231, 255, 0.28);
  box-shadow: 0 28px 78px rgba(0, 0, 0, 0.3), 0 0 38px rgba(95, 231, 255, 0.08);
}

.quality-lines span {
  animation: qualityTrace 5.6s ease-in-out infinite;
}

.quality-lines span:nth-child(2) {
  animation-delay: 420ms;
}

.quality-lines span:nth-child(3) {
  animation-delay: 820ms;
}

.quality-lines span:nth-child(4) {
  animation: nodePulse 2.4s ease-in-out infinite;
}

.motion-item {
  opacity: 0;
  transform: translateY(26px) scale(0.985);
  transition:
    opacity 700ms ease,
    transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-delay: var(--motion-delay, 0ms);
}

.motion-item.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@keyframes landingGridDrift {
  0% {
    background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
  }
  100% {
    background-position: 128px 64px, -96px 128px, 0 0, 0 0, 0 0;
  }
}

@keyframes navEnter {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroTextIn {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes softSignal {
  0%,
  100% {
    box-shadow: 0 0 0 rgba(95, 231, 255, 0);
  }
  50% {
    box-shadow: 0 0 26px rgba(95, 231, 255, 0.22);
  }
}

@keyframes visualFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

@keyframes orbitSweep {
  0%,
  38% {
    opacity: 0;
    transform: translateX(-120%);
  }
  55% {
    opacity: 0.7;
  }
  74%,
  100% {
    opacity: 0;
    transform: translateX(120%);
  }
}

@keyframes orbitSpin {
  from {
    transform: translate(-50%, -50%) rotate(var(--angle));
  }
  to {
    transform: translate(-50%, -50%) rotate(calc(var(--angle) + 360deg));
  }
}

@keyframes scanSweep {
  0%,
  100% {
    opacity: 0;
    transform: translateY(-95%);
  }
  18%,
  66% {
    opacity: 1;
  }
  78% {
    opacity: 0;
    transform: translateY(175%);
  }
}

@keyframes vectorTrace {
  0% {
    stroke-dashoffset: 920;
    opacity: 0.34;
  }
  38%,
  74% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 0.58;
  }
}

@keyframes nodePulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.82;
  }
  50% {
    transform: scale(1.28);
    opacity: 1;
  }
}

@keyframes panelBreath {
  0%,
  100% {
    transform: translateY(0);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.26);
  }
  50% {
    transform: translateY(-3px);
    box-shadow: 0 24px 58px rgba(0, 0, 0, 0.34), 0 0 28px rgba(95, 231, 255, 0.1);
  }
}

@keyframes surfaceSweep {
  0%,
  44% {
    opacity: 0;
    transform: translateX(-120%);
  }
  56% {
    opacity: 1;
  }
  78%,
  100% {
    opacity: 0;
    transform: translateX(120%);
  }
}

@keyframes buttonSheen {
  0%,
  52% {
    left: -60%;
  }
  74%,
  100% {
    left: 118%;
  }
}

@keyframes qualityTrace {
  0%,
  100% {
    opacity: 0.58;
    filter: drop-shadow(0 0 8px rgba(95, 231, 255, 0.28));
  }
  50% {
    opacity: 1;
    filter: drop-shadow(0 0 18px rgba(95, 231, 255, 0.72));
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }

  .motion-item {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 1180px) {
  .hero-section {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: 44px;
  }

  .hero-visual {
    min-height: 520px;
  }

  .feature-showcase,
  .pricing-section {
    grid-template-columns: 1fr;
  }

  .workspace {
    grid-template-columns: 310px minmax(0, 1fr);
  }

  body:has(.app-shell:not([hidden])) .workspace {
    grid-template-columns: 320px minmax(0, 1fr);
  }

  .export-panel {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto 1fr 250px 230px;
    align-items: start;
  }

  .export-panel::before {
    margin-top: 10px;
  }

  .file-card {
    margin-top: 0;
  }
}

@media (max-width: 920px) {
  .landing-nav {
    align-items: stretch;
    flex-direction: column;
  }

  .landing-actions {
    width: 100%;
  }

  .landing-actions .button,
  .hero-actions .button {
    flex: 1;
  }

  .time-strip,
  .trial-band,
  .benefit-grid,
  .workflow-band,
  .cta-band,
  .use-case-grid,
  .final-cta,
  .admin-grid {
    grid-template-columns: 1fr;
  }

  .feature-panel {
    min-height: 420px;
  }

  .feature-copy .button,
  .trial-band .button,
  .cta-band .button,
  .final-cta .button {
    width: 100%;
  }

  .admin-user {
    grid-template-columns: 1fr;
  }

  .admin-user-actions {
    justify-content: flex-start;
  }

  .workspace,
  .export-panel,
  body:has(.app-shell:not([hidden])) .workspace {
    grid-template-columns: 1fr;
  }

  .export-panel::before {
    margin-top: 0;
  }
}

@media (max-width: 820px) {
  .app-shell {
    padding: 12px;
  }

  .landing-page {
    padding: 12px;
  }

  .hero-section {
    gap: 18px;
    padding: 30px 0 20px;
  }

  .hero-copy h2 {
    font-size: clamp(2.18rem, 11vw, 3.35rem);
  }

  .hero-visual {
    min-height: 420px;
  }

  .vector-orbit {
    min-height: 384px;
  }

  .time-strip,
  .trial-band,
  .benefit-grid,
  .workflow-band,
  .feature-showcase,
  .use-case-section,
  .pricing-section {
    margin-bottom: 56px;
  }

  .topbar {
    align-items: stretch;
    flex-direction: column;
  }

  .brand-lockup {
    align-items: flex-start;
  }

  .brand-chip {
    display: none;
  }

  .top-actions {
    width: 100%;
    justify-content: stretch;
  }

  .top-actions .button {
    flex: 1;
  }

  .preview-panel {
    grid-template-rows: auto 430px auto;
  }

  .preview-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .view-tabs {
    width: 100%;
  }

  .status-pill {
    max-width: none;
  }

  .split-view {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
  }

  .split-view figure {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .split-view figure:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 460px) {
  .app-shell {
    padding: 10px;
  }

  .landing-page {
    padding: 10px;
  }

  .landing-actions,
  .hero-actions,
  .admin-header {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-proof {
    flex-direction: column;
  }

  .hero-visual {
    min-height: 340px;
    padding: 10px;
  }

  .vector-orbit {
    min-height: 318px;
  }

  .export-ticket {
    right: 12px;
    bottom: 12px;
  }

  h1 {
    font-size: 1.45rem;
  }

  .brand-mark {
    width: 38px;
    height: 38px;
  }

  .brand-lockup p {
    white-space: normal;
  }

  .button {
    min-height: 42px;
    padding: 0 12px;
  }

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

  .drop-zone {
    min-height: 170px;
  }

  .feature-panel {
    min-height: 330px;
    padding: 14px;
  }

  .quality-meter,
  .quality-result {
    padding: 12px;
  }

  .final-cta img {
    width: 64px;
    height: 64px;
  }

  .preview-stage img,
  .preview-stage svg,
  .merge-stack {
    max-width: calc(100% - 32px);
    max-height: calc(100% - 32px);
  }
}

/* ─── PHONE LAYER (≤ 768px) — newer components ─────────────
   The workspace already stacks at 920px; this block tightens the
   features added later (engine buttons, usage chip, batch queue,
   quality badge, swipe compare) so they read well on a phone. */
@media (max-width: 768px) {
  /* Account box: wrap the admin engine buttons instead of overflowing
     off-screen. They're admin-only anyway, but when present they must
     not break the topbar. */
  .account-box {
    flex-wrap: wrap;
    gap: 6px;
  }
  .account-box .text-button {
    font-size: 0.72rem;
    padding: 4px 8px;
  }

  /* The compare swipe needs a guaranteed tappable height on phones. */
  .swipe-compare {
    min-height: 300px;
  }
  .swipe-grip {
    width: 42px;
    height: 42px;
  }

  /* Quality badge: drop the value font a touch so the tag fits. */
  .quality-badge {
    grid-template-columns: 1fr auto;
    row-gap: 4px;
  }
  .quality-badge-tag {
    grid-column: 1 / -1;
    justify-self: start;
  }

  /* Batch queue list a bit taller relative to viewport. */
  .batch-list {
    max-height: 50vh;
  }

  /* Export panel: when stacked it inherits the 4-col layout from the
     1180px block — force a clean single column on phones. */
  .export-panel {
    grid-template-columns: 1fr !important;
  }
}

/* Premium SaaS redesign layer */
:root {
  --premium-bg: #030711;
  --premium-bg-2: #07111f;
  --premium-panel: rgba(10, 18, 34, 0.72);
  --premium-panel-strong: rgba(15, 25, 46, 0.86);
  --premium-glass: rgba(255, 255, 255, 0.07);
  --premium-glass-strong: rgba(255, 255, 255, 0.11);
  --premium-line: rgba(161, 205, 255, 0.16);
  --premium-line-strong: rgba(101, 232, 255, 0.36);
  --premium-text: #f5f9ff;
  --premium-muted: #91a4bf;
  --premium-cyan: #5fe7ff;
  --premium-blue: #3a8bff;
  --premium-purple: #9b5cff;
  --premium-pink: #d946ef;
  --premium-shadow: 0 28px 90px rgba(0, 0, 0, 0.42);
  --premium-soft-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--premium-bg);
  color: var(--premium-text);
  font-family:
    "Segoe UI Variable",
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif;
  letter-spacing: 0;
}

body *,
body *::before,
body *::after {
  letter-spacing: 0;
}

body:has(.landing-page:not([hidden])),
body:has(.app-shell:not([hidden])) {
  background:
    linear-gradient(90deg, rgba(95, 231, 255, 0.06) 1px, transparent 1px),
    linear-gradient(0deg, rgba(155, 92, 255, 0.045) 1px, transparent 1px),
    linear-gradient(120deg, rgba(49, 118, 255, 0.12), transparent 34%),
    linear-gradient(240deg, rgba(155, 92, 255, 0.13), transparent 38%),
    linear-gradient(180deg, #050816 0%, #07111f 48%, #030711 100%);
  background-size: 72px 72px, 72px 72px, auto, auto, auto;
}

body:has(.landing-page:not([hidden]))::before,
body:has(.app-shell:not([hidden]))::before {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 0 18%, rgba(95, 231, 255, 0.06) 18% 19%, transparent 19% 52%, rgba(155, 92, 255, 0.05) 52% 53%, transparent 53%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 22%, rgba(0, 0, 0, 0.28));
  content: "";
}

body:has(.landing-page:not([hidden]))::after,
body:has(.app-shell:not([hidden]))::after {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(95, 231, 255, 0.045), transparent),
    linear-gradient(0deg, rgba(255, 255, 255, 0.035), transparent 34%);
  mask-image: linear-gradient(180deg, black, transparent 72%);
  content: "";
}

.landing-page {
  width: min(100%, 1920px);
  padding: 20px clamp(18px, 4vw, 70px) 54px;
  overflow: clip;
}

.landing-page::before {
  background:
    linear-gradient(180deg, rgba(3, 7, 17, 0.08), rgba(3, 7, 17, 0.72)),
    repeating-linear-gradient(90deg, transparent 0 52px, rgba(255, 255, 255, 0.022) 52px 53px);
}

.landing-nav,
.topbar {
  width: min(1500px, 100%);
  min-height: 76px;
  border: 1px solid var(--premium-line);
  border-radius: 8px;
  padding: 12px 14px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.045)),
    rgba(5, 10, 22, 0.7);
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(26px) saturate(150%);
}

.landing-nav {
  top: 18px;
  display: grid;
  grid-template-columns: minmax(240px, auto) minmax(0, 1fr) auto;
}

.brand-logo-img,
.landing-page .brand-logo-img {
  width: 56px;
  height: 56px;
  border: 1px solid rgba(95, 231, 255, 0.16);
  border-radius: 8px;
  box-shadow: 0 0 34px rgba(95, 231, 255, 0.16);
}

h1 {
  color: #ffffff;
  font-size: clamp(1.45rem, 1.6vw, 2rem);
  font-weight: 900;
}

h2,
h3,
strong {
  color: #ffffff;
}

.brand-lockup p {
  color: var(--premium-muted);
}

.brand-chip,
.hero-kicker,
.pricing-card em,
.export-heading h2,
.billing-kicker {
  border: 1px solid rgba(95, 231, 255, 0.34);
  background:
    linear-gradient(135deg, rgba(95, 231, 255, 0.16), rgba(155, 92, 255, 0.12)),
    rgba(255, 255, 255, 0.04);
  color: #9ff4ff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 0 24px rgba(95, 231, 255, 0.08);
}

.landing-nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
}

.landing-nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 0 13px;
  color: #b8c8dd;
  font-size: 0.88rem;
  font-weight: 850;
  text-decoration: none;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.landing-nav-links a:hover {
  border-color: rgba(95, 231, 255, 0.22);
  background: rgba(255, 255, 255, 0.07);
  color: #ffffff;
  transform: translateY(-1px);
}

.button,
.segment,
.text-button,
.auth-tab,
.admin-tab {
  border-radius: 8px;
  font-weight: 900;
}

.button,
.segment,
.text-button {
  min-height: 44px;
}

.button.primary,
.landing-page .button.primary,
body:has(.app-shell:not([hidden])) .button.primary,
body:has(.app-shell:not([hidden])) .admin-screen .button.primary,
body:has(.app-shell:not([hidden])) .billing-lock .button.primary {
  border-color: rgba(95, 231, 255, 0.58);
  background:
    linear-gradient(135deg, #45c7ff 0%, #6d6cff 48%, #b22cff 100%);
  color: #ffffff;
  box-shadow:
    0 16px 34px rgba(69, 199, 255, 0.2),
    0 0 44px rgba(155, 92, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.button.primary:hover,
.landing-page .button.primary:hover,
body:has(.app-shell:not([hidden])) .button.primary:hover {
  border-color: rgba(162, 244, 255, 0.84);
  background: linear-gradient(135deg, #67ddff 0%, #7778ff 48%, #c346ff 100%);
  box-shadow:
    0 20px 46px rgba(69, 199, 255, 0.24),
    0 0 58px rgba(155, 92, 255, 0.24);
  transform: translateY(-1px);
}

.button.secondary,
.landing-page .button.secondary,
body:has(.app-shell:not([hidden])) .button.secondary,
body:has(.app-shell:not([hidden])) .text-button,
.text-button {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.065);
  color: #eaf2ff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.button.secondary:hover,
.text-button:hover {
  border-color: rgba(95, 231, 255, 0.32);
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.hero-section {
  grid-template-columns: minmax(0, 0.88fr) minmax(500px, 1.12fr);
  gap: clamp(36px, 5vw, 78px);
  min-height: calc(100vh - 118px);
  padding: clamp(46px, 5.4vw, 86px) 0 clamp(54px, 6vw, 92px);
}

.hero-copy {
  gap: 18px;
  max-width: 640px;
}

.hero-copy h2 {
  max-width: 590px;
  font-size: clamp(2.45rem, 3.75vw, 4.3rem);
  line-height: 1.05;
  font-weight: 950;
  text-shadow:
    0 0 34px rgba(95, 231, 255, 0.14),
    0 0 70px rgba(155, 92, 255, 0.1);
}

.hero-copy p {
  max-width: 610px;
  color: #a8bad2;
  font-size: clamp(0.98rem, 1vw, 1.12rem);
  line-height: 1.68;
}

.hero-proof {
  gap: 10px;
}

.hero-proof span {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.065);
  color: #d9e6f8;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.hero-visual {
  min-height: clamp(480px, 41vw, 610px);
  border-color: rgba(95, 231, 255, 0.18);
  padding: 18px;
  background:
    linear-gradient(90deg, rgba(95, 231, 255, 0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(155, 92, 255, 0.06) 1px, transparent 1px),
    linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.035));
  background-size: 40px 40px, 40px 40px, auto;
  box-shadow:
    0 34px 120px rgba(0, 0, 0, 0.5),
    0 0 80px rgba(71, 151, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(20px);
}

.vector-orbit {
  min-height: clamp(460px, 39vw, 574px);
  background:
    linear-gradient(90deg, rgba(95, 231, 255, 0.045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(155, 92, 255, 0.04) 1px, transparent 1px),
    linear-gradient(135deg, rgba(95, 231, 255, 0.12), transparent 34%),
    linear-gradient(315deg, rgba(155, 92, 255, 0.1), transparent 42%),
    rgba(5, 9, 20, 0.88);
  background-size: 34px 34px, 34px 34px, auto, auto, auto;
}

.vector-canvas {
  inset: 13%;
  border-color: rgba(255, 255, 255, 0.16);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.035));
  box-shadow:
    inset 0 0 54px rgba(95, 231, 255, 0.08),
    0 24px 80px rgba(0, 0, 0, 0.3);
}

.hero-logo-img {
  filter:
    drop-shadow(0 0 34px rgba(95, 231, 255, 0.24))
    drop-shadow(0 0 64px rgba(155, 92, 255, 0.2));
}

.export-ticket,
.quality-meter,
.quality-result,
.trial-band,
.time-strip article,
.benefit-grid article,
.workflow-band,
.feature-panel,
.use-case-grid article,
.pricing-card,
.final-cta,
.site-footer {
  border: 1px solid var(--premium-line);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.092), rgba(255, 255, 255, 0.038)),
    rgba(6, 12, 26, 0.68);
  box-shadow: var(--premium-soft-shadow);
  backdrop-filter: blur(22px) saturate(150%);
}

.time-strip,
.benefit-grid {
  gap: 18px;
}

.time-strip article,
.benefit-grid article {
  min-height: 176px;
  padding: 26px;
}

.time-strip strong {
  color: #ffffff;
  font-size: clamp(2rem, 3.3vw, 3.6rem);
}

.time-strip span,
.benefit-grid p,
.use-case-grid p,
.feature-copy p,
.pricing-copy p,
.pricing-card small {
  color: var(--premium-muted);
}

.trial-band {
  grid-template-columns: minmax(190px, 0.24fr) minmax(0, 1fr) auto;
  margin-bottom: 24px;
  padding: clamp(26px, 3.6vw, 46px);
  border-color: rgba(95, 231, 255, 0.24);
  background:
    linear-gradient(115deg, rgba(95, 231, 255, 0.14), rgba(155, 92, 255, 0.1)),
    rgba(7, 13, 29, 0.76);
}

.trial-badge {
  min-height: 166px;
  border-color: rgba(95, 231, 255, 0.2);
  background:
    linear-gradient(145deg, rgba(95, 231, 255, 0.12), rgba(155, 92, 255, 0.1)),
    rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.trial-badge strong {
  font-size: clamp(2.8rem, 4.8vw, 4.8rem);
}

.trial-copy h2,
.cta-band h2,
.feature-copy h2,
.section-heading-landing h2,
.pricing-copy h2,
.final-cta h2 {
  font-size: clamp(2rem, 3.5vw, 4rem);
  line-height: 0.98;
  font-weight: 930;
}

.benefit-icon {
  width: 46px;
  height: 46px;
  background: linear-gradient(135deg, var(--premium-cyan), var(--premium-purple));
  box-shadow: 0 0 30px rgba(95, 231, 255, 0.18);
}

.workflow-band,
.cta-band {
  border-color: rgba(95, 231, 255, 0.2);
  background:
    linear-gradient(120deg, rgba(95, 231, 255, 0.12), rgba(155, 92, 255, 0.08)),
    rgba(7, 13, 29, 0.74);
}

.feature-showcase {
  gap: clamp(34px, 5vw, 80px);
}

.feature-panel {
  min-height: 540px;
  background:
    linear-gradient(90deg, rgba(95, 231, 255, 0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(155, 92, 255, 0.06) 1px, transparent 1px),
    linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.035)),
    rgba(6, 12, 26, 0.72);
  background-size: 34px 34px, 34px 34px, auto, auto;
}

.quality-lines span {
  border-color: var(--premium-cyan) transparent transparent var(--premium-cyan);
}

.use-case-grid {
  gap: 18px;
}

.use-case-grid article {
  min-height: 220px;
  padding: 24px;
}

.pricing-section {
  grid-template-columns: minmax(0, 1fr) minmax(360px, 460px);
  gap: clamp(38px, 6vw, 96px);
}

.pricing-card {
  padding: 32px;
  border-color: rgba(95, 231, 255, 0.28);
  background:
    linear-gradient(145deg, rgba(95, 231, 255, 0.14), rgba(155, 92, 255, 0.11)),
    rgba(7, 13, 29, 0.78);
  box-shadow:
    0 34px 110px rgba(0, 0, 0, 0.48),
    0 0 72px rgba(95, 231, 255, 0.08);
}

.pricing-card > span {
  color: var(--premium-cyan);
}

.pricing-card strong {
  font-size: clamp(3.2rem, 5vw, 5rem);
  background: linear-gradient(135deg, #ffffff, #98f3ff 42%, #c9b6ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pricing-card ul {
  color: #dce9fb;
}

.pricing-card li::marker {
  color: var(--premium-cyan);
}

.final-cta {
  grid-template-columns: auto minmax(0, 1fr) auto;
  margin-bottom: 24px;
  padding: clamp(28px, 4vw, 52px);
}

.site-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  max-width: 1500px;
  margin: 0 auto;
  padding: 22px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.footer-brand strong {
  display: block;
  margin-bottom: 5px;
  font-size: 1.05rem;
  font-weight: 950;
}

.footer-brand span {
  color: var(--premium-muted);
  line-height: 1.5;
}

.footer-links {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-links a,
.footer-links .text-button {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 0 13px;
  background: rgba(255, 255, 255, 0.045);
  color: #c7d6e8;
  font-size: 0.9rem;
  font-weight: 850;
  text-decoration: none;
}

.footer-links a:hover,
.footer-links .text-button:hover {
  border-color: rgba(95, 231, 255, 0.3);
  color: #ffffff;
}

body:has(.app-shell:not([hidden])) .app-shell {
  width: min(1660px, 100%);
  padding: clamp(16px, 2vw, 30px);
}

body:has(.app-shell:not([hidden])) .topbar,
body:has(.app-shell:not([hidden])) .tool-panel,
body:has(.app-shell:not([hidden])) .preview-panel,
body:has(.app-shell:not([hidden])) .export-panel,
.auth-card,
.billing-card,
.admin-panel,
.admin-card {
  border: 1px solid var(--premium-line);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.035)),
    rgba(6, 12, 26, 0.78);
  box-shadow: var(--premium-shadow);
  color: var(--premium-text);
  backdrop-filter: blur(24px) saturate(150%);
}

body:has(.app-shell:not([hidden])) .workspace {
  grid-template-columns: 340px minmax(0, 1fr) 300px;
  gap: 18px;
}

body:has(.app-shell:not([hidden])) .tool-panel,
body:has(.app-shell:not([hidden])) .export-panel {
  padding: 18px;
}

body:has(.app-shell:not([hidden])) .drop-zone {
  min-height: 248px;
  border: none;
  background:
    linear-gradient(90deg, rgba(95, 231, 255, 0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(155, 92, 255, 0.065) 1px, transparent 1px),
    linear-gradient(145deg, rgba(95, 231, 255, 0.11), rgba(155, 92, 255, 0.065)),
    rgba(255, 255, 255, 0.045);
  background-size: 26px 26px, 26px 26px, auto, auto;
  box-shadow: inset 0 0 44px rgba(95, 231, 255, 0.06);
}

body:has(.app-shell:not([hidden])) .drop-zone::before {
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(95, 231, 255, 0.18);
  border-radius: 8px;
  pointer-events: none;
  background: linear-gradient(135deg, transparent, rgba(95, 231, 255, 0.04), transparent);
  content: "";
}

body:has(.app-shell:not([hidden])) .drop-zone::after {
  border-color: rgba(255, 255, 255, 0.16);
}

body:has(.app-shell:not([hidden])) .drop-zone strong {
  color: #ffffff;
  font-size: 1.06rem;
}

body:has(.app-shell:not([hidden])) .drop-zone span,
body:has(.app-shell:not([hidden])) .range-field,
body:has(.app-shell:not([hidden])) .select-field,
body:has(.app-shell:not([hidden])) .file-card span,
body:has(.app-shell:not([hidden])) .file-card small,
body:has(.app-shell:not([hidden])) .metric-grid span,
.auth-card p,
.billing-card p,
.admin-header p,
.admin-note {
  color: var(--premium-muted);
}

body:has(.app-shell:not([hidden])) .preview-panel {
  grid-template-rows: auto minmax(560px, 1fr) auto;
  overflow: hidden;
}

body:has(.app-shell:not([hidden])) .preview-toolbar,
body:has(.app-shell:not([hidden])) .palette-strip {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.055);
}

body:has(.app-shell:not([hidden])) .preview-stage.empty {
  background:
    linear-gradient(90deg, rgba(95, 231, 255, 0.045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(155, 92, 255, 0.04) 1px, transparent 1px),
    linear-gradient(145deg, rgba(95, 231, 255, 0.08), rgba(155, 92, 255, 0.045)),
    rgba(244, 250, 255, 0.95);
  background-size: 28px 28px, 28px 28px, auto, auto;
}

body:has(.app-shell:not([hidden])) .preview-stage:not(.empty) {
  /* neutral grey: shows white AND dark art (white-on-white was the bug) */
  background: #6f757c;
}

body:has(.app-shell:not([hidden])) .metric-grid article,
body:has(.app-shell:not([hidden])) .file-card,
body:has(.app-shell:not([hidden])) .segmented,
body:has(.app-shell:not([hidden])) select,
.auth-field input,
.admin-month {
  border-color: rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.07);
  color: #ffffff;
}

.auth-field input::placeholder {
  color: #6f8198;
}

body:has(.app-shell:not([hidden])) .segment.active {
  border-color: rgba(95, 231, 255, 0.36);
  background: linear-gradient(135deg, rgba(95, 231, 255, 0.24), rgba(155, 92, 255, 0.2));
}

body:has(.app-shell:not([hidden])) .sample-button {
  border-color: rgba(95, 231, 255, 0.38);
  background:
    linear-gradient(135deg, rgba(95, 231, 255, 0.13), rgba(155, 92, 255, 0.11)),
    rgba(255, 255, 255, 0.05);
  color: #a9f8ff;
}

body:has(.app-shell:not([hidden])) .sample-button:hover {
  border-color: rgba(95, 231, 255, 0.58);
  background:
    linear-gradient(135deg, rgba(95, 231, 255, 0.2), rgba(155, 92, 255, 0.16)),
    rgba(255, 255, 255, 0.07);
}

.auth-screen,
.billing-lock,
.admin-screen {
  background:
    linear-gradient(90deg, rgba(95, 231, 255, 0.055) 1px, transparent 1px),
    linear-gradient(0deg, rgba(155, 92, 255, 0.045) 1px, transparent 1px),
    rgba(2, 5, 13, 0.78);
  background-size: 56px 56px, 56px 56px, auto;
  backdrop-filter: blur(16px);
}

.auth-card,
.billing-card {
  width: min(480px, calc(100% - 28px));
  padding: 28px;
}

.admin-panel {
  width: min(1180px, calc(100% - 28px));
}

.admin-tab {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.055);
  color: #c8d6ea;
}

.admin-tab.active {
  border-color: rgba(95, 231, 255, 0.34);
  background: linear-gradient(135deg, rgba(95, 231, 255, 0.2), rgba(155, 92, 255, 0.16));
  color: #ffffff;
}

.motion-item {
  transform: translateY(28px) scale(0.99);
}

.motion-item.is-visible {
  transform: translateY(0) scale(1);
}

@media (max-width: 1180px) {
  .landing-nav {
    grid-template-columns: minmax(240px, 1fr) auto;
  }

  .landing-nav-links {
    display: none;
  }

  .hero-section {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .hero-copy,
  .hero-copy h2,
  .hero-copy p {
    max-width: 860px;
  }

  .vector-orbit {
    min-height: 540px;
  }

  body:has(.app-shell:not([hidden])) .workspace {
    grid-template-columns: 330px minmax(0, 1fr);
  }
}

@media (max-width: 920px) {
  .landing-nav,
  .site-footer,
  .trial-band,
  .final-cta {
    grid-template-columns: 1fr;
  }

  .footer-links {
    flex-wrap: wrap;
  }

  .footer-links a,
  .footer-links .text-button {
    flex: 1;
    justify-content: center;
  }

  .pricing-section,
  .feature-showcase,
  body:has(.app-shell:not([hidden])) .workspace {
    grid-template-columns: 1fr;
  }

  body:has(.app-shell:not([hidden])) .preview-panel {
    grid-template-rows: auto minmax(460px, auto) auto;
  }
}

@media (max-width: 640px) {
  .landing-page {
    padding: 12px 12px 34px;
    overflow-x: hidden;
  }

  .landing-nav,
  .topbar,
  .trial-band,
  .cta-band,
  .workflow-band,
  .feature-panel,
  .pricing-card,
  .final-cta,
  .site-footer {
    padding: 18px;
  }

  .hero-section {
    padding: 30px 0 46px;
    gap: 28px;
  }

  .hero-section > *,
  .hero-copy {
    min-width: 0;
    width: min(100%, calc(100vw - 42px));
    max-width: calc(100vw - 42px);
  }

  .hero-copy h2 {
    width: min(100%, calc(100vw - 42px));
    max-width: calc(100vw - 42px);
    font-size: clamp(1.55rem, 6.5vw, 2.05rem);
    line-height: 1.12;
    overflow-wrap: normal;
    white-space: normal;
  }

  .hero-copy p {
    width: min(100%, 316px);
    max-width: calc(100vw - 74px);
    font-size: 0.98rem;
    line-height: 1.64;
  }

  .landing-actions,
  .hero-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .hero-actions .button,
  .landing-actions .button {
    min-width: 0;
    width: 100%;
    padding-inline: 12px;
    white-space: normal;
  }

  .vector-orbit {
    min-height: 360px;
  }

  .vector-canvas {
    inset: 10%;
  }

  .export-ticket {
    right: 12px;
    bottom: 12px;
  }

  .brand-lockup {
    align-items: center;
  }

  .brand-logo-img,
  .landing-page .brand-logo-img {
    width: 48px;
    height: 48px;
  }
}

/* Final priority pass for VETRIAX SaaS theme */
body,
body:has(.landing-page:not([hidden])),
body:has(.app-shell:not([hidden])) {
  background:
    linear-gradient(90deg, rgba(0, 229, 255, 0.035) 1px, transparent 1px),
    linear-gradient(0deg, rgba(124, 58, 237, 0.03) 1px, transparent 1px),
    radial-gradient(ellipse at 30% 50%, rgba(124, 58, 237, 0.12), transparent 70%),
    var(--bg-base);
  background-size: 56px 56px, 56px 56px, auto, auto;
  color: var(--text-primary);
  font-family:
    Inter, Sora, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

.landing-nav,
.topbar,
.trial-band,
.time-strip article,
.benefit-grid article,
.cta-band,
.workflow-band,
.feature-panel,
.use-case-grid article,
.pricing-card,
.final-cta,
.site-footer,
.tool-panel,
.preview-panel,
.export-panel,
.auth-card,
.billing-card,
.admin-panel,
.admin-card,
.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)),
    var(--bg-surface);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.28);
}

.button.primary,
.landing-page .button.primary,
body:has(.app-shell:not([hidden])) .button.primary {
  border-color: transparent;
  background: var(--accent);
  color: #000000;
  font-weight: 700;
  box-shadow: 0 0 0 rgba(0, 229, 255, 0);
}

.button.primary:hover,
.landing-page .button.primary:hover,
body:has(.app-shell:not([hidden])) .button.primary:hover {
  filter: brightness(1.1);
  box-shadow: 0 0 20px rgba(0, 229, 255, 0.4);
}

.button.secondary,
.landing-page .button.secondary,
.text-button,
body:has(.app-shell:not([hidden])) .button.secondary,
body:has(.app-shell:not([hidden])) .text-button {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--accent);
}

.button.secondary:hover,
.text-button:hover {
  border-color: var(--border-hover);
  background: var(--accent-dim);
}

.hero-section,
.final-cta {
  background: radial-gradient(ellipse at 30% 50%, rgba(124, 58, 237, 0.12), transparent 70%);
}

.hero-copy h2 {
  max-width: 650px;
  color: var(--text-primary);
  font-size: clamp(2.7rem, 4vw, 4.7rem);
  font-weight: 700;
  line-height: 1.03;
}

.hero-kicker {
  border: 1px solid var(--accent-dim);
  background: rgba(0, 229, 255, 0.06);
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.section-kicker {
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

p,
.hero-copy p,
.pricing-copy p,
.feature-copy p,
.use-case-grid p,
.benefit-grid p,
.admin-note,
.auth-card p,
.billing-card p {
  color: var(--text-muted);
  line-height: 1.7;
}

.pricing-card {
  border-color: rgba(0, 229, 255, 0.25);
  box-shadow: 0 0 40px rgba(0, 229, 255, 0.08), 0 22px 70px rgba(0, 0, 0, 0.28);
}

.pricing-card .badge-popular {
  width: fit-content;
  border-radius: var(--radius-chip);
  padding: 3px 12px;
  background: var(--violet);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mode-badge {
  border: 1px solid;
  border-radius: 999px;
  padding: 6px 12px;
  margin-bottom: 8px;
  background: rgba(255, 255, 255, 0.035);
  font-size: 0.75rem;
  font-weight: 800;
  text-align: center;
}

/* Landing spacing fixes: audience section */
.use-case-section {
  padding: 80px 24px;
}

.use-case-section .section-heading-landing {
  position: relative;
  margin-bottom: 48px;
  border: 0;
  background: transparent;
}

.use-case-section .section-heading-landing::before,
.use-case-section .section-heading-landing::after,
.use-case-section .section-kicker::before,
.use-case-section .section-kicker::after {
  display: none;
  width: 0;
  height: 0;
  content: "";
}

.use-case-section .section-kicker {
  display: inline-flex;
  width: fit-content;
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.use-case-grid {
  gap: 20px;
}

.use-case-grid article {
  padding: 32px 28px;
}

.use-case-grid h3,
.use-case-grid strong {
  margin-bottom: 12px;
}

@media (max-width: 640px) {
  .hero-copy,
  .hero-copy p,
  .hero-chips,
  .hero-proof,
  .hero-actions {
    width: min(100%, 326px);
    max-width: calc(100vw - 64px);
  }

  .hero-copy h2 {
    width: min(100%, 326px);
    max-width: calc(100vw - 64px);
    font-size: clamp(1.36rem, 5.5vw, 1.76rem);
    line-height: 1.14;
    white-space: normal;
  }

  .hero-kicker {
    width: auto;
    max-width: calc(100vw - 64px);
    line-height: 1.45;
    white-space: normal;
  }

  .hero-chips,
  .hero-proof {
    flex-wrap: wrap;
    overflow: visible;
  }

  .hero-chip,
  .hero-proof span {
    font-size: 0.72rem;
  }
}

/* Stat strip alignment fix */
.trial-band:has(.stat-strip) {
  display: flex;
  justify-content: center;
  align-items: center;
  grid-template-columns: none;
  padding: 0;
  overflow: visible;
}

.stat-strip {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 64px;
  padding: 48px 24px;
  width: 100%;
  box-sizing: border-box;
  grid-column: 1 / -1;
  justify-self: stretch;
  overflow: visible;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 120px;
  text-align: center;
}

.stat-item strong {
  font-size: 2.2rem;
  font-weight: 700;
  color: #00e5ff;
  line-height: 1;
  white-space: nowrap;
}

.stat-item span {
  font-size: 0.85rem;
  color: #a0a0b8;
  line-height: 1.4;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .stat-strip {
    flex-direction: column;
    gap: 32px;
  }

  .stat-item strong {
    font-size: 1.8rem;
  }
}

/* Hard override for the stats band: prevents legacy trial-band grid rules from clipping the first item. */
#stats.trial-band {
  display: block !important;
  grid-template-columns: none !important;
  padding: 0 !important;
  overflow: visible !important;
}

#stats.trial-band .stat-strip {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(160px, max-content));
  justify-content: center;
  align-items: center;
  column-gap: 64px;
  row-gap: 32px;
  padding: 48px 24px;
  width: 100%;
  box-sizing: border-box;
  overflow: visible;
}

#stats.trial-band .stat-item {
  min-width: 160px;
}

@media (max-width: 600px) {
  #stats.trial-band .stat-strip {
    grid-template-columns: 1fr;
  }
}

/* Section kicker cleanup: text only, no underline, chip, bar, or pseudo-element. */
.section-kicker {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
  background: transparent !important;
  color: #00e5ff !important;
  padding: 0 !important;
}

.section-kicker::before,
.section-kicker::after,
.section-heading-landing::before,
.section-heading-landing::after {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  border: 0 !important;
  background: transparent !important;
  content: "" !important;
}

.section-heading-landing {
  border: none !important;
  outline: none !important;
}

/* ═══════════════════════════════════════════════════════════
   VETRIAX — FUTURISTA UPGRADE LAYER
   Modern dark SaaS / futuristic tool aesthetic.
   Overrides specific flat/light rules from earlier passes.
   ═══════════════════════════════════════════════════════════ */

/* ── Keyframes ── */
@keyframes progressShimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

@keyframes dropGlow {
  0%, 100% { box-shadow: 0 0 18px rgba(0, 229, 255, 0.08), inset 0 0 28px rgba(0, 229, 255, 0.04); }
  50%       { box-shadow: 0 0 32px rgba(0, 229, 255, 0.18), inset 0 0 40px rgba(0, 229, 255, 0.08); }
}

@keyframes panelAccentSlide {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes thumbPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.5); }
  50%       { box-shadow: 0 0 0 5px rgba(0, 229, 255, 0); }
}

/* ── Custom scrollbars ── */
body:has(.app-shell:not([hidden])) *::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
body:has(.app-shell:not([hidden])) *::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 99px;
}
body:has(.app-shell:not([hidden])) *::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(0, 229, 255, 0.4), rgba(124, 58, 237, 0.4));
  border-radius: 99px;
}
body:has(.app-shell:not([hidden])) *::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(0, 229, 255, 0.7), rgba(124, 58, 237, 0.7));
}

/* ── Topbar ── */
body:has(.app-shell:not([hidden])) .topbar {
  margin: 0 auto 0;
  border: 1px solid rgba(0, 229, 255, 0.14);
  background:
    linear-gradient(135deg, rgba(0, 229, 255, 0.05), rgba(124, 58, 237, 0.04)),
    rgba(10, 12, 20, 0.88);
  backdrop-filter: blur(28px) saturate(160%);
  box-shadow:
    0 1px 0 rgba(0, 229, 255, 0.12) inset,
    0 20px 60px rgba(0, 0, 0, 0.4);
}

/* ── Workspace panels — common ── */
body:has(.app-shell:not([hidden])) .tool-panel,
body:has(.app-shell:not([hidden])) .preview-panel,
body:has(.app-shell:not([hidden])) .export-panel {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.015) 100%),
    rgba(10, 14, 26, 0.82);
  backdrop-filter: blur(24px) saturate(140%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.03) inset,
    0 28px 80px rgba(0, 0, 0, 0.38);
  transition: border-color 280ms ease, box-shadow 280ms ease;
}

/* tool-panel: cyan left-edge accent */
body:has(.app-shell:not([hidden])) .tool-panel {
  border-left: 2px solid rgba(0, 229, 255, 0.35);
  box-shadow:
    -2px 0 24px rgba(0, 229, 255, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.03) inset,
    0 28px 80px rgba(0, 0, 0, 0.38);
}
body:has(.app-shell:not([hidden])) .tool-panel:hover {
  border-color: rgba(0, 229, 255, 0.55);
  box-shadow:
    -2px 0 36px rgba(0, 229, 255, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 28px 80px rgba(0, 0, 0, 0.38);
}

/* export-panel: violet right-edge accent */
body:has(.app-shell:not([hidden])) .export-panel {
  border-right: 2px solid rgba(124, 58, 237, 0.35);
  box-shadow:
    2px 0 24px rgba(124, 58, 237, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.03) inset,
    0 28px 80px rgba(0, 0, 0, 0.38);
}
body:has(.app-shell:not([hidden])) .export-panel:hover {
  border-color: rgba(124, 58, 237, 0.55);
  box-shadow:
    2px 0 36px rgba(124, 58, 237, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 28px 80px rgba(0, 0, 0, 0.38);
}

/* preview-panel: neutral + subtle top highlight */
body:has(.app-shell:not([hidden])) .preview-panel {
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 28px 80px rgba(0, 0, 0, 0.38);
}

/* ── Panel accent bar (the small coloured bar at top of tool/export) ── */
body:has(.app-shell:not([hidden])) .tool-panel::before {
  width: 56px;
  height: 3px;
  background:
    linear-gradient(90deg, #00e5ff, #5b5bff, #7c3aed);
  background-size: 200% auto;
  animation: panelAccentSlide 4s linear infinite;
  border-radius: 999px;
}
body:has(.app-shell:not([hidden])) .export-panel::before {
  width: 56px;
  height: 3px;
  background:
    linear-gradient(90deg, #7c3aed, #5b5bff, #00e5ff);
  background-size: 200% auto;
  animation: panelAccentSlide 4s linear infinite reverse;
  border-radius: 999px;
}

/* ── Section headings inside tool/export panel ── */
body:has(.app-shell:not([hidden])) .section-heading h2,
body:has(.app-shell:not([hidden])) .export-heading h2 {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

/* ── Range field labels + output ── */
body:has(.app-shell:not([hidden])) .range-field,
body:has(.app-shell:not([hidden])) .select-field,
body:has(.app-shell:not([hidden])) .check-field {
  color: rgba(180, 200, 230, 0.7);
}
body:has(.app-shell:not([hidden])) output {
  font-family: "SF Mono", "Fira Code", "Consolas", monospace;
  font-size: 0.85rem;
  font-weight: 700;
  color: #00e5ff;
  min-width: 36px;
}

/* ── Custom range slider ── */
body:has(.app-shell:not([hidden])) input[type="range"] {
  appearance: none;
  -webkit-appearance: none;
  height: 4px;
  border-radius: 99px;
  background: linear-gradient(90deg,
    rgba(0, 229, 255, 0.6) var(--slider-pct, 50%),
    rgba(255, 255, 255, 0.1) var(--slider-pct, 50%)
  );
  outline: none;
  cursor: pointer;
  transition: background 120ms ease;
}
body:has(.app-shell:not([hidden])) input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #00e5ff;
  box-shadow:
    0 0 0 2px rgba(10, 14, 26, 0.9),
    0 0 12px rgba(0, 229, 255, 0.6);
  cursor: pointer;
  transition: box-shadow 180ms ease, transform 180ms ease;
}
body:has(.app-shell:not([hidden])) input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.2);
  box-shadow:
    0 0 0 2px rgba(10, 14, 26, 0.9),
    0 0 20px rgba(0, 229, 255, 0.8);
  animation: thumbPulse 1.2s ease-in-out infinite;
}
body:has(.app-shell:not([hidden])) input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(10, 14, 26, 0.9);
  border-radius: 50%;
  background: #00e5ff;
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.6);
  cursor: pointer;
}

/* ── Select ── */
body:has(.app-shell:not([hidden])) select {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: #e0eeff;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
body:has(.app-shell:not([hidden])) select:focus {
  outline: none;
  border-color: rgba(0, 229, 255, 0.5);
  box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.15);
}

/* ── Checkbox ── */
body:has(.app-shell:not([hidden])) .check-field {
  color: rgba(180, 200, 230, 0.8);
}
body:has(.app-shell:not([hidden])) .check-field input[type="checkbox"] {
  accent-color: #00e5ff;
  width: 16px;
  height: 16px;
}

/* ── Drop zone ── */
body:has(.app-shell:not([hidden])) .drop-zone {
  border: none;
  background-color: rgba(255, 255, 255, 0.02);
  background-image:
    /* top edge pixel-perfect dashes */
    repeating-linear-gradient(90deg, rgba(0,229,255,0.38) 0, rgba(0,229,255,0.38) 6px, transparent 6px, transparent 12px),
    /* bottom edge pixel-perfect dashes */
    repeating-linear-gradient(90deg, rgba(0,229,255,0.38) 0, rgba(0,229,255,0.38) 6px, transparent 6px, transparent 12px),
    /* left edge pixel-perfect dashes */
    repeating-linear-gradient(180deg, rgba(0,229,255,0.38) 0, rgba(0,229,255,0.38) 6px, transparent 6px, transparent 12px),
    /* right edge pixel-perfect dashes */
    repeating-linear-gradient(180deg, rgba(0,229,255,0.38) 0, rgba(0,229,255,0.38) 6px, transparent 6px, transparent 12px),
    /* interior ambient gradient */
    linear-gradient(145deg, rgba(0,229,255,0.04), rgba(124,58,237,0.04));
  background-size:   12px 1px, 12px 1px, 1px 12px, 1px 12px, 100% 100%;
  background-position: 0 0, 0 100%, 0 0, 100% 0, 0 0;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y, no-repeat;
  animation: dropGlow 4s ease-in-out infinite;
  transition: box-shadow 200ms ease, background-color 200ms ease;
}
body:has(.app-shell:not([hidden])) .drop-zone::after {
  border: none;
}
body:has(.app-shell:not([hidden])) .drop-zone::before {
  border: none;
  background: none;
  inset: unset;
}
body:has(.app-shell:not([hidden])) .drop-zone strong {
  color: #e0f0ff;
  font-size: 0.95rem;
}
body:has(.app-shell:not([hidden])) .drop-zone span {
  color: rgba(160, 185, 215, 0.7);
}
body:has(.app-shell:not([hidden])) .drop-zone:hover,
body:has(.app-shell:not([hidden])) .drop-zone.dragging {
  background-color: rgba(255, 255, 255, 0.03);
  background-image:
    repeating-linear-gradient(90deg, rgba(0,229,255,0.82) 0, rgba(0,229,255,0.82) 6px, transparent 6px, transparent 12px),
    repeating-linear-gradient(90deg, rgba(0,229,255,0.82) 0, rgba(0,229,255,0.82) 6px, transparent 6px, transparent 12px),
    repeating-linear-gradient(180deg, rgba(0,229,255,0.82) 0, rgba(0,229,255,0.82) 6px, transparent 6px, transparent 12px),
    repeating-linear-gradient(180deg, rgba(0,229,255,0.82) 0, rgba(0,229,255,0.82) 6px, transparent 6px, transparent 12px),
    linear-gradient(145deg, rgba(0,229,255,0.10), rgba(124,58,237,0.08));
  background-size:   12px 1px, 12px 1px, 1px 12px, 1px 12px, 100% 100%;
  background-position: 0 0, 0 100%, 0 0, 100% 0, 0 0;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y, no-repeat;
  box-shadow: 0 0 40px rgba(0,229,255,0.2), inset 0 0 20px rgba(0,229,255,0.06);
  animation: none;
}

/* ── Progress bar ── */
body:has(.app-shell:not([hidden])) .vector-progress {
  border: 1px solid rgba(0, 229, 255, 0.15);
  background: rgba(0, 229, 255, 0.04);
  border-radius: 10px;
}
body:has(.app-shell:not([hidden])) .progress-track {
  height: 6px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 99px;
}
body:has(.app-shell:not([hidden])) .progress-track span {
  background:
    linear-gradient(90deg,
      #00e5ff 0%,
      #5b6bff 40%,
      #7c3aed 70%,
      #00e5ff 100%);
  background-size: 200% auto;
  animation: progressShimmer 1.8s linear infinite;
  box-shadow: 0 0 16px rgba(0, 229, 255, 0.5);
}

/* ── Preset buttons ── */
body:has(.app-shell:not([hidden])) .preset-btn {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 9px 8px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(180, 205, 235, 0.8);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease, box-shadow 180ms ease;
}
body:has(.app-shell:not([hidden])) .preset-btn:hover {
  border-color: rgba(0, 229, 255, 0.35);
  background: rgba(0, 229, 255, 0.08);
  color: #d0f0ff;
  box-shadow: 0 0 16px rgba(0, 229, 255, 0.12);
}
body:has(.app-shell:not([hidden])) .preset-btn.active,
body:has(.app-shell:not([hidden])) .preset-btn[aria-pressed="true"] {
  border-color: rgba(0, 229, 255, 0.6);
  background:
    linear-gradient(135deg, rgba(0, 229, 255, 0.18), rgba(124, 58, 237, 0.14));
  color: #fff;
  font-weight: 800;
  box-shadow:
    0 0 20px rgba(0, 229, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* ── Primary action button — restore gradient (overrides flat-cyan from final priority pass) ── */
body:has(.app-shell:not([hidden])) .button.primary,
.landing-page .button.primary,
.button.primary {
  border-color: rgba(0, 229, 255, 0.4) !important;
  background:
    linear-gradient(135deg, #00d4f0 0%, #5b60ff 50%, #7c3aed 100%) !important;
  color: #ffffff !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08) inset,
    0 14px 32px rgba(0, 212, 240, 0.22),
    0 4px 12px rgba(124, 58, 237, 0.2) !important;
}
body:has(.app-shell:not([hidden])) .button.primary:hover,
.landing-page .button.primary:hover,
.button.primary:hover {
  filter: brightness(1.12) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1) inset,
    0 18px 40px rgba(0, 212, 240, 0.3),
    0 6px 18px rgba(124, 58, 237, 0.28) !important;
}

/* ── Secondary button ── */
body:has(.app-shell:not([hidden])) .button.secondary,
body:has(.app-shell:not([hidden])) .text-button {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(0, 229, 255, 0.85);
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
body:has(.app-shell:not([hidden])) .button.secondary:hover,
body:has(.app-shell:not([hidden])) .text-button:hover {
  border-color: rgba(0, 229, 255, 0.35);
  background: rgba(0, 229, 255, 0.08);
  box-shadow: 0 0 16px rgba(0, 229, 255, 0.12);
}

/* ── Sample / reset buttons ── */
body:has(.app-shell:not([hidden])) .sample-button {
  border: 1px solid rgba(255, 200, 100, 0.25);
  background:
    linear-gradient(135deg, rgba(255, 200, 60, 0.1), rgba(255, 120, 40, 0.1));
  color: rgba(255, 200, 120, 0.9);
}
body:has(.app-shell:not([hidden])) .sample-button:hover {
  border-color: rgba(255, 200, 100, 0.5);
  background:
    linear-gradient(135deg, rgba(255, 200, 60, 0.18), rgba(255, 120, 40, 0.16));
  box-shadow: 0 0 20px rgba(255, 180, 60, 0.15);
}

/* ── Segmented tab (view switcher) ── */
body:has(.app-shell:not([hidden])) .segmented {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}
body:has(.app-shell:not([hidden])) .segment {
  color: rgba(160, 185, 220, 0.6);
  border-radius: 6px;
  transition: background 160ms ease, color 160ms ease;
}
body:has(.app-shell:not([hidden])) .segment.active {
  border: 1px solid rgba(0, 229, 255, 0.35);
  background:
    linear-gradient(135deg, rgba(0, 229, 255, 0.14), rgba(124, 58, 237, 0.12));
  color: #d0f0ff;
  box-shadow: 0 4px 14px rgba(0, 229, 255, 0.14);
}

/* ── Preview toolbar ── */
body:has(.app-shell:not([hidden])) .preview-toolbar {
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.025);
}

/* ── Preview stage — dark checker ── */
body:has(.app-shell:not([hidden])) .preview-stage {
  background:
    linear-gradient(45deg, rgba(255,255,255,0.04) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,0.04) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255,255,255,0.04) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255,255,255,0.04) 75%),
    #0d1117;
  background-position: 0 0, 0 14px, 14px -14px, -14px 0;
  background-size: 28px 28px;
}
body:has(.app-shell:not([hidden])) .preview-stage:not(.empty) {
  background: #10141e;
}
body:has(.app-shell:not([hidden])) .preview-stage::after {
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* ── Status pill — dark variants ── */
body:has(.app-shell:not([hidden])) .status-pill {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(160, 185, 220, 0.7);
}
body:has(.app-shell:not([hidden])) .status-pill.working {
  border-color: rgba(255, 200, 80, 0.4);
  background: rgba(255, 200, 80, 0.08);
  color: #ffd580;
}
body:has(.app-shell:not([hidden])) .status-pill.ready {
  border-color: rgba(0, 229, 255, 0.35);
  background: rgba(0, 229, 255, 0.07);
  color: #7ae8ff;
}
body:has(.app-shell:not([hidden])) .status-pill.error {
  border-color: rgba(255, 80, 100, 0.35);
  background: rgba(255, 80, 100, 0.07);
  color: #ff8fa0;
}

/* ── Metric grid — dark glassmorphic ── */
body:has(.app-shell:not([hidden])) .metric-grid article,
body:has(.app-shell:not([hidden])) .file-card {
  border: 1px solid rgba(255, 255, 255, 0.07);
  background:
    linear-gradient(135deg, rgba(0, 229, 255, 0.05), rgba(124, 58, 237, 0.05)),
    rgba(255, 255, 255, 0.03);
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
body:has(.app-shell:not([hidden])) .metric-grid article:hover,
body:has(.app-shell:not([hidden])) .file-card:hover {
  border-color: rgba(0, 229, 255, 0.2);
  box-shadow: 0 0 24px rgba(0, 229, 255, 0.08);
}
body:has(.app-shell:not([hidden])) .metric-grid span,
body:has(.app-shell:not([hidden])) .file-card span,
body:has(.app-shell:not([hidden])) .file-card small {
  color: rgba(130, 160, 200, 0.7);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
body:has(.app-shell:not([hidden])) .metric-grid strong,
body:has(.app-shell:not([hidden])) .file-card strong {
  font-family: "SF Mono", "Fira Code", "Consolas", monospace;
  font-size: 1.15rem;
  font-weight: 700;
  color: #a8daff;
}

/* ── Mode badge ── */
body:has(.app-shell:not([hidden])) .mode-badge {
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
body:has(.app-shell:not([hidden])) .mode-badge.outline {
  border-color: rgba(0, 229, 255, 0.5);
  background: rgba(0, 229, 255, 0.1);
  color: #7ae8ff;
  box-shadow: 0 0 20px rgba(0, 229, 255, 0.15);
}
body:has(.app-shell:not([hidden])) .mode-badge.filled {
  border-color: rgba(124, 58, 237, 0.5);
  background: rgba(124, 58, 237, 0.12);
  color: #c4a0ff;
  box-shadow: 0 0 20px rgba(124, 58, 237, 0.15);
}
body:has(.app-shell:not([hidden])) .mode-badge.mixed {
  border-color: rgba(91, 96, 255, 0.5);
  background: linear-gradient(90deg, rgba(0, 229, 255, 0.08), rgba(124, 58, 237, 0.1));
  color: #b0c8ff;
  box-shadow: 0 0 20px rgba(91, 96, 255, 0.15);
}

/* ── Palette strip ── */
body:has(.app-shell:not([hidden])) .palette-strip {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.025);
}

/* ── Split view captions ── */
body:has(.app-shell:not([hidden])) .split-view figcaption {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.025);
  color: rgba(140, 165, 200, 0.7);
}
body:has(.app-shell:not([hidden])) .split-view figure {
  border-right-color: rgba(255, 255, 255, 0.07);
}

/* ── Download stack buttons ── */
body:has(.app-shell:not([hidden])) .download-stack .button {
  letter-spacing: 0.03em;
}

/* ── Text layer summary ── */
body:has(.app-shell:not([hidden])) #textLayerSummary {
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(140, 175, 215, 0.75);
  font-size: 0.78rem;
}

/* ── Mobile responsive: preserve grid layout ── */
@media (max-width: 960px) {
  body:has(.app-shell:not([hidden])) .workspace {
    grid-template-columns: 1fr;
  }
  body:has(.app-shell:not([hidden])) .tool-panel {
    border-left: 1px solid rgba(0, 229, 255, 0.35);
    border-top: 2px solid rgba(0, 229, 255, 0.35);
  }
  body:has(.app-shell:not([hidden])) .export-panel {
    border-right: 1px solid rgba(124, 58, 237, 0.35);
    border-bottom: 2px solid rgba(124, 58, 237, 0.35);
  }
  .preset-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ═══════════════════════════════════════════════════════════
   VETRIAX — CYBER-DRAFTING LAYER
   Aesthetic direction: CAD workshop / technical drafting.
   Distinctive typography (Chakra Petch + Plus Jakarta + JetBrains Mono),
   corner brackets on panels, crosshair on preview stage,
   tape-measure progress, blueprint annotations.
   ═══════════════════════════════════════════════════════════ */

/* Critical: ensure [hidden] always hides regardless of author display rules */
[hidden] { display: none !important; }

/* ── Typography overrides ── */
body,
body:has(.landing-page:not([hidden])),
body:has(.app-shell:not([hidden])) {
  font-family: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  font-feature-settings: "ss01", "cv11";
}

h1, h2, h3,
.brand-row h1,
.hero-copy h2,
.section-heading h2,
.export-heading h2 {
  font-family: "Chakra Petch", "Plus Jakarta Sans", sans-serif;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.brand-row h1 {
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* All numeric readouts in monospace for technical feel */
body:has(.app-shell:not([hidden])) output,
body:has(.app-shell:not([hidden])) .metric-grid strong,
body:has(.app-shell:not([hidden])) .file-card strong,
body:has(.app-shell:not([hidden])) .file-card small,
body:has(.app-shell:not([hidden])) #progressPercent,
.stat-item strong {
  font-family: "JetBrains Mono", "Fira Code", Consolas, monospace;
  font-feature-settings: "tnum", "zero";
}

/* ── Section-heading micro labels: drafting-style with bracket prefix ── */
body:has(.app-shell:not([hidden])) .section-heading h2::before,
body:has(.app-shell:not([hidden])) .export-heading h2::before {
  display: inline-block;
  margin-right: 6px;
  color: rgba(0, 229, 255, 0.55);
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  content: "▸";
}

/* ── Panel corner brackets (engineering drawing style) ── */
body:has(.app-shell:not([hidden])) .tool-panel,
body:has(.app-shell:not([hidden])) .preview-panel,
body:has(.app-shell:not([hidden])) .export-panel {
  position: relative;
}

body:has(.app-shell:not([hidden])) .tool-panel::after,
body:has(.app-shell:not([hidden])) .preview-panel::after,
body:has(.app-shell:not([hidden])) .export-panel::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 0;
  background:
    /* top-left bracket */
    linear-gradient(to right,  rgba(0,229,255,0.55) 0 14px, transparent 14px) top left / 14px 1px no-repeat,
    linear-gradient(to bottom, rgba(0,229,255,0.55) 0 14px, transparent 14px) top left / 1px 14px no-repeat,
    /* top-right */
    linear-gradient(to left,   rgba(0,229,255,0.55) 0 14px, transparent 14px) top right / 14px 1px no-repeat,
    linear-gradient(to bottom, rgba(0,229,255,0.55) 0 14px, transparent 14px) top right / 1px 14px no-repeat,
    /* bottom-left */
    linear-gradient(to right,  rgba(124,58,237,0.55) 0 14px, transparent 14px) bottom left / 14px 1px no-repeat,
    linear-gradient(to top,    rgba(124,58,237,0.55) 0 14px, transparent 14px) bottom left / 1px 14px no-repeat,
    /* bottom-right */
    linear-gradient(to left,   rgba(124,58,237,0.55) 0 14px, transparent 14px) bottom right / 14px 1px no-repeat,
    linear-gradient(to top,    rgba(124,58,237,0.55) 0 14px, transparent 14px) bottom right / 1px 14px no-repeat;
  content: "";
}

/* ── Panel ID annotations (top-right corner labels like architectural drawings) ── */
body:has(.app-shell:not([hidden])) .tool-panel > .drop-zone::before,
body:has(.app-shell:not([hidden])) .export-panel > .export-heading::before {
  position: absolute;
  top: -22px;
  right: 4px;
  bottom: auto;
  left: auto;
  width: auto;
  color: rgba(0, 229, 255, 0.45);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
body:has(.app-shell:not([hidden])) .tool-panel { padding-top: 22px; }
body:has(.app-shell:not([hidden])) .export-panel { padding-top: 22px; }
body:has(.app-shell:not([hidden])) .tool-panel > .drop-zone::before {
  content: "PNL.01 · INPUT";
}
body:has(.app-shell:not([hidden])) .export-panel > .export-heading::before {
  content: "PNL.03 · OUTPUT";
}
body:has(.app-shell:not([hidden])) .preview-panel::before {
  position: absolute;
  top: -22px;
  left: 12px;
  z-index: 2;
  color: rgba(0, 229, 255, 0.45);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  content: "PNL.02 · STAGE";
}

/* Push workspace down to make room for the corner labels */
body:has(.app-shell:not([hidden])) .workspace {
  margin-top: 28px;
}

/* ── Preview stage — blueprint grid (empty), clean canvas (with content) ── */
body:has(.app-shell:not([hidden])) .preview-stage {
  cursor: crosshair;
  background:
    /* fine grid */
    linear-gradient(rgba(0,229,255,0.05) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(90deg, rgba(0,229,255,0.05) 1px, transparent 1px) 0 0 / 20px 20px,
    /* coarse grid */
    linear-gradient(rgba(0,229,255,0.08) 1px, transparent 1px) 0 0 / 100px 100px,
    linear-gradient(90deg, rgba(0,229,255,0.08) 1px, transparent 1px) 0 0 / 100px 100px,
    /* center radial */
    radial-gradient(ellipse at center, rgba(0,229,255,0.04), transparent 70%),
    #07090f;
}
/* When there is content: clean white canvas with subtle checker for transparency, like vectorizer.ai */
body:has(.app-shell:not([hidden])) .preview-stage:not(.empty) {
  background:
    linear-gradient(45deg, #e8eef3 25%, transparent 25%),
    linear-gradient(-45deg, #e8eef3 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e8eef3 75%),
    linear-gradient(-45deg, transparent 75%, #e8eef3 75%),
    #ffffff;
  background-position: 0 0, 0 12px, 12px -12px, -12px 0;
  background-size: 24px 24px;
}
body:has(.app-shell:not([hidden])) .preview-stage:not(.empty)::after {
  border: 1px solid rgba(16, 24, 25, 0.1);
}
/* Drop shadow on SVG/IMG for crisp preview against white */
body:has(.app-shell:not([hidden])) .preview-stage:not(.empty) img,
body:has(.app-shell:not([hidden])) .preview-stage:not(.empty) svg {
  filter: drop-shadow(0 12px 24px rgba(0, 30, 60, 0.12));
}
/* Stage center crosshair */
body:has(.app-shell:not([hidden])) .preview-stage.empty::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  background:
    linear-gradient(to right, transparent 29px, rgba(0,229,255,0.4) 29px 31px, transparent 31px),
    linear-gradient(to bottom, transparent 29px, rgba(0,229,255,0.4) 29px 31px, transparent 31px);
  border: 1px solid rgba(0,229,255,0.18);
  border-radius: 50%;
  pointer-events: none;
  content: "";
}

/* Override earlier light-background rule — empty stage always uses dark blueprint grid */
body:has(.app-shell:not([hidden])) .preview-stage.empty {
  background:
    linear-gradient(rgba(0,229,255,0.05) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(90deg, rgba(0,229,255,0.05) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(rgba(0,229,255,0.08) 1px, transparent 1px) 0 0 / 100px 100px,
    linear-gradient(90deg, rgba(0,229,255,0.08) 1px, transparent 1px) 0 0 / 100px 100px,
    radial-gradient(ellipse at center, rgba(0,229,255,0.04), transparent 70%),
    #07090f;
}

/* Empty-state copy in mono */
body:has(.app-shell:not([hidden])) .empty-state strong {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(180, 220, 255, 0.65);
}

/* ── Tape-measure progress bar with tick marks ── */
body:has(.app-shell:not([hidden])) .vector-progress {
  position: relative;
  background:
    linear-gradient(90deg, transparent 0 9.5%, rgba(255,255,255,0.06) 9.5% 10%, transparent 10% 19.5%, rgba(255,255,255,0.06) 19.5% 20%, transparent 20% 29.5%, rgba(255,255,255,0.06) 29.5% 30%, transparent 30% 39.5%, rgba(255,255,255,0.06) 39.5% 40%, transparent 40% 49.5%, rgba(255,255,255,0.06) 49.5% 50%, transparent 50% 59.5%, rgba(255,255,255,0.06) 59.5% 60%, transparent 60% 69.5%, rgba(255,255,255,0.06) 69.5% 70%, transparent 70% 79.5%, rgba(255,255,255,0.06) 79.5% 80%, transparent 80% 89.5%, rgba(255,255,255,0.06) 89.5% 90%, transparent 90%),
    rgba(0, 229, 255, 0.04);
}
body:has(.app-shell:not([hidden])) .vector-progress div span {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ── Drop zone copy in technical voice ── */
body:has(.app-shell:not([hidden])) .drop-zone strong {
  font-family: "Chakra Petch", sans-serif;
  font-weight: 600;
  letter-spacing: 0.02em;
}
body:has(.app-shell:not([hidden])) .drop-zone span {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Vetorizar Agora CTA — sodium-yellow alert sticker ── */
body:has(.app-shell:not([hidden])) .sample-button {
  position: relative;
  border: 1px solid rgba(252, 233, 106, 0.45);
  background:
    linear-gradient(135deg, rgba(252, 233, 106, 0.16), rgba(255, 175, 60, 0.1));
  color: #fce96a;
  font-family: "Chakra Petch", sans-serif;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(252, 233, 106, 0.4);
}
body:has(.app-shell:not([hidden])) .sample-button::before {
  content: "▶";
  margin-right: 8px;
  color: rgba(252, 233, 106, 0.8);
}
body:has(.app-shell:not([hidden])) .sample-button:hover {
  border-color: rgba(252, 233, 106, 0.7);
  background:
    linear-gradient(135deg, rgba(252, 233, 106, 0.24), rgba(255, 175, 60, 0.16));
  box-shadow: 0 0 32px rgba(252, 233, 106, 0.2), inset 0 0 20px rgba(252, 233, 106, 0.08);
}

/* ── Range field labels: technical micro-labels ── */
body:has(.app-shell:not([hidden])) .range-field > span:first-child,
body:has(.app-shell:not([hidden])) .select-field > span:first-child {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(160, 195, 230, 0.6);
}

/* ── Metric grid labels in mono ── */
body:has(.app-shell:not([hidden])) .metric-grid span {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(140, 175, 215, 0.55);
}
body:has(.app-shell:not([hidden])) .metric-grid strong {
  font-size: 1.25rem;
  font-weight: 700;
  background: linear-gradient(180deg, #d0eeff 0%, #7ad4ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── Topbar: drafting-strip with version annotation ── */
body:has(.app-shell:not([hidden])) .topbar {
  position: relative;
}
body:has(.app-shell:not([hidden])) .topbar::after {
  position: absolute;
  bottom: 4px;
  right: 14px;
  color: rgba(0, 229, 255, 0.35);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  content: "RUN · v1.0 · BROWSER VECTOR ENGINE";
}

/* ── Brand row chip refined ── */
body:has(.app-shell:not([hidden])) .brand-chip {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* ── Primary buttons: bolder typography ── */
body:has(.app-shell:not([hidden])) .button.primary,
.landing-page .button.primary,
.button.primary {
  font-family: "Chakra Petch", sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

/* ── Landing page typography ── */
.landing-page h1,
.landing-page h2,
.landing-page h3 {
  font-family: "Chakra Petch", sans-serif;
  font-weight: 600;
}
.landing-page .brand-row h1 {
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.landing-page .hero-copy h2 {
  letter-spacing: -0.01em;
}
.landing-page .hero-kicker,
.landing-page .section-kicker {
  font-family: "JetBrains Mono", monospace !important;
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
}
.landing-page .button.primary,
.landing-page .button.secondary {
  font-family: "Chakra Petch", sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ── Hero kicker with tech bracket ── */
.landing-page .hero-kicker::before {
  content: "[ ";
  opacity: 0.7;
}
.landing-page .hero-kicker::after {
  content: " ]";
  opacity: 0.7;
}

/* ── Stat strip numbers: dramatic mono ── */
.stat-item strong {
  font-weight: 700;
  letter-spacing: -0.02em;
  background: linear-gradient(180deg, #b0f0ff 0%, #00e5ff 60%, #5b88ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat-item span {
  font-family: "JetBrains Mono", monospace !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
}

/* ── Hero chips refined ── */
.hero-chip {
  font-family: "JetBrains Mono", monospace !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase;
}

/* ── Pricing strong refined ── */
.pricing-card strong {
  font-family: "Chakra Petch", sans-serif;
  font-weight: 700;
  font-size: 2.4rem;
}

/* ── Mobile safety: turn off corner labels that would clip ── */
@media (max-width: 720px) {
  body:has(.app-shell:not([hidden])) .tool-panel > .drop-zone::before,
  body:has(.app-shell:not([hidden])) .export-panel > .export-heading::before,
  body:has(.app-shell:not([hidden])) .preview-panel::before,
  body:has(.app-shell:not([hidden])) .topbar::after {
    display: none;
  }
  body:has(.app-shell:not([hidden])) .workspace {
    margin-top: 0;
  }
}

/* ═══════════════════════════════════════════════════════════
   VETRIAX — SPACING REVISION LAYER
   Consistent vertical rhythm (8/16/24/32/48/64/96 scale).
   Group related elements tight, separate sections wide.
   Targets landing page sections that feel cramped.
   ═══════════════════════════════════════════════════════════ */

/* ── Landing section padding: generous vertical room ── */
.landing-page .hero-section,
.landing-page .pricing-section,
.landing-page .feature-showcase,
.landing-page .use-case-section,
.landing-page .faq-section,
.landing-page .benefit-grid,
.landing-page .cta-band,
.landing-page .workflow-band,
.landing-page .final-cta {
  padding-top: 96px;
  padding-bottom: 96px;
}

@media (max-width: 720px) {
  .landing-page .hero-section,
  .landing-page .pricing-section,
  .landing-page .feature-showcase,
  .landing-page .use-case-section,
  .landing-page .faq-section,
  .landing-page .benefit-grid,
  .landing-page .cta-band,
  .landing-page .workflow-band,
  .landing-page .final-cta {
    padding-top: 64px;
    padding-bottom: 64px;
  }
}

/* ── Pricing section: 2-col layout with comfortable column gap ── */
.landing-page .pricing-section {
  column-gap: 64px;
}

/* Left column rhythm: kicker → heading → paragraph */
.landing-page .pricing-copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-self: center;
}
.landing-page .pricing-copy .section-kicker {
  margin-bottom: 8px;
}
.landing-page .pricing-copy h2 {
  line-height: 1.15;
  margin: 0;
}
.landing-page .pricing-copy p {
  margin: 0;
  max-width: 520px;
}

/* ── Pricing card: proper visual rhythm (tight groups, wide separators) ── */
.landing-page .pricing-card {
  display: grid;
  gap: 0;
  padding: 36px 32px;
  row-gap: 0;
}

/* Reset all the default 14px gap-driven spacing and replace with intentional rules */
.landing-page .pricing-card > * {
  margin: 0;
}

/* "Mais popular" badge: separated above */
.landing-page .pricing-card .badge-popular {
  margin-bottom: 20px;
}

/* "VETRIAX AI" label */
.landing-page .pricing-card > span:not(.badge-popular) {
  margin-bottom: 12px;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* "Teste grátis: 3 dias" chip */
.landing-page .pricing-card em {
  margin-bottom: 24px;
}

/* PRICE GROUP: R$ 39,90 + / mês tightly grouped on same baseline */
.landing-page .pricing-card strong {
  display: inline-block;
  margin: 0;
  font-size: clamp(2.8rem, 4.5vw, 4rem);
  line-height: 1;
  letter-spacing: -0.02em;
}
.landing-page .pricing-card strong + small {
  display: inline-block;
  margin-left: 8px;
  font-size: 1rem;
  opacity: 0.7;
}
/* Wrap the price line in a flex baseline group */
.landing-page .pricing-card strong {
  vertical-align: baseline;
}

/* Price → note: small gap (subtitle relationship) */
.landing-page .pricing-card .pricing-note {
  margin-top: 12px;
  font-size: 0.85rem;
  opacity: 0.7;
}

/* Note → bullet list: bigger separator (section change) */
.landing-page .pricing-card ul {
  display: grid;
  gap: 14px;
  margin: 32px 0 0;
  padding-left: 22px;
  font-weight: 600;
  line-height: 1.5;
}
.landing-page .pricing-card ul li {
  padding-left: 4px;
}

/* Bullets → CTA button: generous breathing room (CTA needs to stand out) */
.landing-page .pricing-card .button {
  margin-top: 32px;
  height: 56px;
  font-size: 0.95rem;
}

/* CTA → reassure text: small gap (caption relationship) */
.landing-page .pricing-card .pricing-reassure {
  margin-top: 14px;
  font-size: 0.82rem;
  text-align: center;
  opacity: 0.65;
}

/* ── Hero section: more generous vertical rhythm ── */
.landing-page .hero-copy {
  gap: 24px;
}
.landing-page .hero-copy > .hero-kicker {
  margin-bottom: 8px;
}
.landing-page .hero-copy > h2 {
  margin: 0;
  line-height: 1.05;
}
.landing-page .hero-copy > p {
  margin: 0;
  max-width: 560px;
  line-height: 1.6;
}
.landing-page .hero-chips,
.landing-page .hero-proof {
  margin-top: 8px;
  gap: 12px;
}
.landing-page .hero-actions {
  margin-top: 16px;
  gap: 12px;
}

/* ── Section headings: standardize kicker → heading → paragraph spacing ── */
.landing-page .section-heading-landing,
.landing-page .pricing-copy,
.landing-page .feature-copy {
  margin-bottom: 0;
}

.landing-page .section-kicker {
  display: inline-block;
  margin-bottom: 16px;
}

.landing-page section h2 {
  margin-bottom: 20px;
  line-height: 1.15;
}

.landing-page section h2 + p,
.landing-page section h2 + div > p {
  margin-top: 0;
  line-height: 1.65;
  max-width: 620px;
}

/* ── Benefit grid: more room between cards ── */
.landing-page .benefit-grid {
  gap: 24px;
}
.landing-page .benefit-grid article {
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.landing-page .benefit-grid article h3 {
  margin: 0;
  font-size: 1.4rem;
}
.landing-page .benefit-grid article p {
  margin: 0;
  line-height: 1.65;
}
.landing-page .benefit-grid .benefit-icon {
  margin-bottom: 4px;
}

/* ── Use-case grid: more room ── */
.landing-page .use-case-grid {
  gap: 24px;
}
.landing-page .use-case-grid article {
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.landing-page .use-case-grid article h3,
.landing-page .use-case-grid article strong {
  margin: 0;
  font-size: 1.3rem;
}
.landing-page .use-case-grid article p {
  margin: 0;
  line-height: 1.65;
}

/* ── CTA band: balanced spacing ── */
.landing-page .cta-band {
  gap: 32px;
  padding-left: 48px;
  padding-right: 48px;
}
.landing-page .cta-band > div {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.landing-page .cta-band > div > span {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(0, 229, 255, 0.85);
}
.landing-page .cta-band h2 {
  margin: 0;
  line-height: 1.15;
}

/* ── Workflow band: spacing between heading and list ── */
.landing-page .workflow-band {
  gap: 32px;
  padding-left: 48px;
  padding-right: 48px;
}
.landing-page .workflow-band > div {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.landing-page .workflow-band > div > span {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(0, 229, 255, 0.85);
}
.landing-page .workflow-band h2 {
  margin: 0;
}
.landing-page .workflow-band ol {
  display: grid;
  gap: 14px;
  margin: 0;
  padding-left: 24px;
  line-height: 1.6;
}

/* ── Feature showcase: spacing between text and visual panel ── */
.landing-page .feature-showcase {
  column-gap: 64px;
}
.landing-page .feature-copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-self: center;
}
.landing-page .feature-copy h2 {
  margin: 0;
  line-height: 1.15;
}
.landing-page .feature-copy p {
  margin: 0;
  line-height: 1.65;
}
.landing-page .feature-copy .button {
  margin-top: 12px;
  align-self: flex-start;
}

/* ── FAQ section: comfortable item padding ── */
.landing-page .faq-section .section-heading-landing {
  margin-bottom: 48px;
}
.landing-page .faq-list {
  display: grid;
  gap: 12px;
}
.landing-page .faq-item {
  padding: 24px 28px;
}
.landing-page .faq-item summary {
  padding-right: 32px;
  font-size: 1.05rem;
  line-height: 1.4;
  cursor: pointer;
}
.landing-page .faq-item[open] summary {
  margin-bottom: 14px;
}
.landing-page .faq-item p {
  margin: 0;
  line-height: 1.65;
  opacity: 0.85;
}

/* ── Final CTA: better internal spacing ── */
.landing-page .final-cta {
  gap: 32px;
  padding-left: 48px;
  padding-right: 48px;
}
.landing-page .final-cta > div {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.landing-page .final-cta h2 {
  margin: 0;
  line-height: 1.2;
}

/* ── Footer: breathing room ── */
.landing-page .site-footer {
  padding: 48px 32px;
  gap: 24px;
}
.landing-page .footer-brand {
  gap: 16px;
}
.landing-page .footer-links {
  gap: 20px;
}

/* ── Time strip: spacing between stat items ── */
.landing-page .time-strip {
  padding: 48px 32px;
  gap: 32px;
}
.landing-page .time-strip article {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.landing-page .time-strip article strong {
  font-size: 1.5rem;
}
.landing-page .time-strip article span {
  font-size: 0.9rem;
  line-height: 1.55;
  opacity: 0.75;
}

/* ── Trial band / stats: comfortable padding ── */
#stats.trial-band .stat-strip {
  padding: 64px 32px;
}

/* ── Mobile: collapse to single column with comfortable stacking ── */
@media (max-width: 880px) {
  .landing-page .pricing-section {
    grid-template-columns: 1fr;
    row-gap: 48px;
  }
  .landing-page .feature-showcase {
    grid-template-columns: 1fr;
    row-gap: 48px;
  }
  .landing-page .pricing-card {
    padding: 28px 24px;
  }
  .landing-page .cta-band,
  .landing-page .workflow-band,
  .landing-page .final-cta {
    padding-left: 28px;
    padding-right: 28px;
    grid-template-columns: 1fr;
    row-gap: 28px;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   PRICING v2 — single-plan, glassmorphism + dark + spring motion
   Applied design rules from ui-ux-pro-max:
     • One primary CTA per screen (Apple HIG)
     • 4/8pt spacing rhythm (MD)
     • Bézier corners, 1.5–1.75 line-height body
     • Visual hierarchy via size/spacing/contrast — not color alone
     • Min 44pt touch targets, focus rings preserved
     • Animation 150–300ms, ease-out/spring; respects prefers-reduced-motion
     • Glassmorphism: blur + low-opacity surfaces + neon gradient highlights
   Naming: `.pricing-v2-*` to avoid cascading with the legacy .pricing-card.
   ─────────────────────────────────────────────────────────────────────────── */

/* Reset legacy pricing-section overrides so v2 wins predictably */
.landing-page .pricing-v2,
.landing-page .pricing-v2 * {
  box-sizing: border-box;
}

.pricing-v2 {
  position: relative;
  width: min(100%, 1080px);
  margin: clamp(56px, 8vw, 104px) auto;
  padding: clamp(48px, 6vw, 88px) clamp(24px, 4vw, 64px);
  display: grid;
  justify-items: center;
  gap: clamp(28px, 3.5vw, 44px);
  isolation: isolate;
  text-align: center;
  scroll-margin-top: 96px;
}

/* Ambient aura behind the card — adds depth without competing for attention */
.pricing-v2-aura {
  position: absolute;
  inset: -10% -8% auto -8%;
  height: 70%;
  background:
    radial-gradient(60% 50% at 20% 30%, rgba(0, 229, 255, 0.18), transparent 70%),
    radial-gradient(50% 60% at 80% 40%, rgba(124, 58, 237, 0.20), transparent 75%),
    radial-gradient(80% 60% at 50% 100%, rgba(178, 44, 255, 0.12), transparent 70%);
  filter: blur(50px);
  z-index: -1;
  pointer-events: none;
  opacity: 0.7;
}

/* Header copy ─────────────────────────────────────────────────────────── */

.pricing-v2-header {
  display: grid;
  gap: 14px;
  max-width: 720px;
}

.pricing-v2-kicker {
  display: inline-block;
  margin-bottom: 4px;
  padding: 6px 12px;
  border: 1px solid rgba(0, 229, 255, 0.35);
  border-radius: 999px;
  background: rgba(0, 229, 255, 0.08);
  color: #b6f4ff;
  font-family: "JetBrains Mono", "Chakra Petch", monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  justify-self: center;
}

.pricing-v2 h2 {
  margin: 0;
  font-family: "Chakra Petch", "Plus Jakarta Sans", sans-serif;
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #f7fbff;
}

/* Inline gradient sweep on key words ("ilimitada", "R$ 89") */
.pricing-v2-gradient {
  background: linear-gradient(120deg, #00e5ff 0%, #7c3aed 50%, #b22cff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.pricing-v2-gradient-cool {
  background: linear-gradient(120deg, #00e5ff 0%, #5b6bff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.pricing-v2-header p {
  margin: 0;
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.62;
  color: rgba(247, 251, 255, 0.72);
}

.pricing-v2-header p strong {
  color: #f7fbff;
  font-weight: 600;
}

/* Monthly / Annual segmented toggle ───────────────────────────────────── */

.pricing-v2-billing {
  position: relative;
  display: inline-flex;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 4px 16px rgba(0, 0, 0, 0.35);
}

.pricing-v2-billing-option {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  min-height: 44px;
  border: none;
  background: transparent;
  color: rgba(247, 251, 255, 0.62);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 999px;
  cursor: pointer;
  transition: color 220ms ease;
}

.pricing-v2-billing-option:hover {
  color: #f7fbff;
}

.pricing-v2-billing-option.is-active {
  color: #06121a;
}

.pricing-v2-billing-option:focus-visible {
  outline: 2px solid #00e5ff;
  outline-offset: 3px;
}

.pricing-v2-save-pill {
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(0, 229, 255, 0.18);
  color: #06121a;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background 220ms ease, color 220ms ease;
}
.pricing-v2-billing-option.is-active .pricing-v2-save-pill {
  background: rgba(6, 18, 26, 0.18);
  color: #06121a;
}
.pricing-v2-billing-option:not(.is-active) .pricing-v2-save-pill {
  background: rgba(0, 229, 255, 0.20);
  color: #b6f4ff;
}

/* Animated thumb behind active option */
.pricing-v2-billing-thumb {
  position: absolute;
  top: 5px;
  bottom: 5px;
  border-radius: 999px;
  background: linear-gradient(120deg, #00e5ff 0%, #5b6bff 100%);
  box-shadow:
    0 6px 20px rgba(0, 229, 255, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transition:
    left 360ms cubic-bezier(0.34, 1.56, 0.64, 1),
    width 360ms cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 0;
}

/* Pricing card ────────────────────────────────────────────────────────── */

.pricing-v2-card {
  position: relative;
  width: min(100%, 460px);
  padding: clamp(28px, 4vw, 44px) clamp(24px, 3vw, 36px) clamp(24px, 3vw, 32px);
  border-radius: 24px;
  background:
    radial-gradient(140% 90% at 50% 0%, rgba(0, 229, 255, 0.10), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025));
  backdrop-filter: blur(28px) saturate(140%);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
  overflow: hidden;
  text-align: left;
  /* Animated gradient border using mask compositing */
  border: 1px solid transparent;
  background-clip: padding-box;
}

/* Gradient-glow border ring — drawn via ::before so the card content stays sharp */
.pricing-v2-card::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg,
    rgba(0, 229, 255, 0.65) 0%,
    rgba(91, 107, 255, 0.40) 45%,
    rgba(124, 58, 237, 0.65) 100%);
  -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: 0;
}

.pricing-v2-card > * {
  position: relative;
  z-index: 1;
}

/* Decorative blueprint corners — small neon ticks at each corner */
.pricing-v2-corner {
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: rgba(0, 229, 255, 0.7);
  border-style: solid;
  border-width: 0;
  z-index: 1;
}
.pricing-v2-corner--tl { top: 10px;    left: 10px;    border-top-width: 2px; border-left-width: 2px;  border-top-left-radius: 4px; }
.pricing-v2-corner--tr { top: 10px;    right: 10px;   border-top-width: 2px; border-right-width: 2px; border-top-right-radius: 4px; }
.pricing-v2-corner--bl { bottom: 10px; left: 10px;    border-bottom-width: 2px; border-left-width: 2px;  border-bottom-left-radius: 4px; }
.pricing-v2-corner--br { bottom: 10px; right: 10px;   border-bottom-width: 2px; border-right-width: 2px; border-bottom-right-radius: 4px; }

/* Plan name row */
.pricing-v2-plan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 12px;
}

.pricing-v2-plan-name {
  font-family: "Chakra Petch", "Plus Jakarta Sans", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #f7fbff;
}

.pricing-v2-plan-tag {
  padding: 4px 10px;
  border: 1px solid rgba(255, 196, 0, 0.5);
  border-radius: 999px;
  background: rgba(255, 196, 0, 0.12);
  color: #ffd966;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

/* Price block */
.pricing-v2-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 6px;
  color: #f7fbff;
}

.pricing-v2-currency {
  font-family: "Chakra Petch", sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: rgba(247, 251, 255, 0.75);
  align-self: flex-start;
  padding-top: 12px;
}

.pricing-v2-amount {
  display: inline-block;
  font-family: "Chakra Petch", sans-serif;
  font-size: clamp(56px, 8vw, 84px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, #ffffff 0%, #b6f4ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  transition: opacity 200ms ease;
}

.pricing-v2-period {
  display: inline-flex;
  flex-direction: column;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  color: rgba(247, 251, 255, 0.55);
  padding-bottom: 12px;
}

.pricing-v2-price-note {
  margin: 0 0 24px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(247, 251, 255, 0.55);
  min-height: 19px;
}

.pricing-v2-divider {
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0, 229, 255, 0.4) 20%,
    rgba(124, 58, 237, 0.4) 80%,
    transparent 100%);
  margin: 0 0 24px;
}

/* Feature list */
.pricing-v2-features {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: grid;
  gap: 14px;
}

.pricing-v2-features li {
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: start;
  gap: 12px;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(247, 251, 255, 0.82);
}

.pricing-v2-features li strong {
  font-weight: 600;
  color: #f7fbff;
}

.pricing-v2-check {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-top: 1px;
  color: #00e5ff;
  filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.5));
}

/* Primary CTA — the only primary action on this screen (HIG) */
.pricing-v2-cta {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 16px 28px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #00e5ff 0%, #5b6bff 50%, #7c3aed 100%);
  background-size: 200% 200%;
  background-position: 0% 50%;
  box-shadow:
    0 12px 36px rgba(0, 229, 255, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
  color: #06121a;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition:
    transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 260ms ease,
    background-position 480ms ease;
}

.pricing-v2-cta:hover {
  transform: translateY(-2px);
  background-position: 100% 50%;
  box-shadow:
    0 18px 48px rgba(0, 229, 255, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.pricing-v2-cta:active {
  transform: translateY(0);
  box-shadow:
    0 8px 24px rgba(0, 229, 255, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.pricing-v2-cta:focus-visible {
  outline: 3px solid #00e5ff;
  outline-offset: 4px;
}

.pricing-v2-cta-arrow {
  width: 18px;
  height: 18px;
  transition: transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pricing-v2-cta:hover .pricing-v2-cta-arrow {
  transform: translateX(4px);
}

.pricing-v2-microcopy {
  margin: 14px 0 0;
  font-size: 12.5px;
  letter-spacing: 0.01em;
  color: rgba(247, 251, 255, 0.50);
  text-align: center;
}

/* Trust row — three chips below card */
.pricing-v2-trust {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 28px;
  font-size: 13.5px;
  color: rgba(247, 251, 255, 0.65);
}

.pricing-v2-trust li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.pricing-v2-trust strong {
  font-weight: 600;
  color: #f7fbff;
}

.pricing-v2-trust svg {
  width: 18px;
  height: 18px;
  color: rgba(0, 229, 255, 0.85);
  flex-shrink: 0;
}

/* Entrance animations.
   Default state: VISIBLE (opacity:1) so non-JS users + slow connections
   never see a blank section. The hidden initial state is only applied
   when JS has registered to animate the entrance — see the `.is-prep`
   class added by pricing-v2.js before the IntersectionObserver fires. */
.pricing-v2.is-prep .pricing-v2-header,
.pricing-v2.is-prep .pricing-v2-billing,
.pricing-v2.is-prep .pricing-v2-card,
.pricing-v2.is-prep .pricing-v2-trust {
  opacity: 0;
  transform: translateY(24px);
}
.pricing-v2 .pricing-v2-header,
.pricing-v2 .pricing-v2-billing,
.pricing-v2 .pricing-v2-card,
.pricing-v2 .pricing-v2-trust {
  transition:
    opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.pricing-v2.is-revealed .pricing-v2-header { transition-delay: 0ms; }
.pricing-v2.is-revealed .pricing-v2-billing { transition-delay: 90ms; }
.pricing-v2.is-revealed .pricing-v2-card { transition-delay: 180ms; }
.pricing-v2.is-revealed .pricing-v2-trust { transition-delay: 280ms; }
.pricing-v2.is-revealed .pricing-v2-header,
.pricing-v2.is-revealed .pricing-v2-billing,
.pricing-v2.is-revealed .pricing-v2-card,
.pricing-v2.is-revealed .pricing-v2-trust {
  opacity: 1;
  transform: translateY(0);
}

/* Reduced-motion: keep content visible, skip the animation entirely */
@media (prefers-reduced-motion: reduce) {
  .pricing-v2-header,
  .pricing-v2-billing,
  .pricing-v2-card,
  .pricing-v2-trust {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .pricing-v2-cta,
  .pricing-v2-cta-arrow,
  .pricing-v2-billing-thumb,
  .pricing-v2-amount {
    transition: none !important;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   Usage chip — counter in the topbar showing "X/5 grátis used"
   States are driven by `data-state` (ok / warning / limit) set by JS.
   Clickable: opens the billing modal so the user can upgrade.
   ─────────────────────────────────────────────────────────────────────────── */

.usage-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 12px;
  min-height: 36px;
  border: 1px solid rgba(0, 229, 255, 0.30);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.10), rgba(124, 58, 237, 0.06));
  color: #b6f4ff;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition:
    border-color 200ms ease,
    background 200ms ease,
    color 200ms ease,
    transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
.usage-chip:hover {
  transform: translateY(-1px);
  border-color: rgba(0, 229, 255, 0.55);
}
.usage-chip:focus-visible {
  outline: 2px solid #00e5ff;
  outline-offset: 2px;
}

.usage-chip svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.usage-chip-count strong {
  font-weight: 700;
  color: #f7fbff;
}
.usage-chip-label {
  opacity: 0.85;
}

/* State: warning — last free vetorization left */
.usage-chip[data-state="warning"] {
  border-color: rgba(255, 196, 0, 0.55);
  background: linear-gradient(135deg, rgba(255, 196, 0, 0.12), rgba(255, 130, 0, 0.06));
  color: #ffd966;
}
.usage-chip[data-state="warning"] .usage-chip-count strong {
  color: #fff1c2;
}

/* State: limit — no free uses left, paywall trigger */
.usage-chip[data-state="limit"] {
  border-color: rgba(255, 90, 110, 0.65);
  background: linear-gradient(135deg, rgba(255, 90, 110, 0.18), rgba(255, 60, 80, 0.10));
  color: #ffb8c0;
  animation: usageChipPulse 2.4s ease-in-out infinite;
}
.usage-chip[data-state="limit"] .usage-chip-count strong {
  color: #fff;
}
.usage-chip[data-state="limit"] .usage-chip-label::after {
  content: " · ativar plano";
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
}

@keyframes usageChipPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 90, 110, 0.45); }
  50%      { box-shadow: 0 0 0 6px rgba(255, 90, 110, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .usage-chip,
  .usage-chip[data-state="limit"] {
    animation: none !important;
    transition: none !important;
  }
}

@media (max-width: 720px) {
  .usage-chip-label {
    display: none; /* "grátis" word is dropped on mobile to save space */
  }
  .usage-chip {
    padding: 6px 10px;
    font-size: 12px;
  }
}

/* Mobile (≤ 640 px) ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .pricing-v2 {
    margin: 48px auto;
    padding: 40px 18px;
  }
  .pricing-v2-billing {
    width: 100%;
    justify-content: stretch;
  }
  .pricing-v2-billing-option {
    flex: 1;
    justify-content: center;
    padding: 12px 14px;
    font-size: 13px;
  }
  .pricing-v2-save-pill {
    display: none; /* free up space on mobile */
  }
  .pricing-v2-card {
    padding: 28px 22px 24px;
  }
  .pricing-v2-trust {
    gap: 12px 18px;
    font-size: 12.5px;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   Admin panel — dark theme polish
   The base .admin-user CSS was authored for the light theme and there
   was no dark-mode override for the client name / inactive tabs / card
   surfaces, so several pieces of copy were inheriting the wrong colour
   and showing up faded against the CYBER background. This block fixes
   contrast and reinforces visual hierarchy.
   Scoped to body:has(.app-shell:not([hidden])) which is the marker for
   the in-app dark theme — keeps the light landing untouched.
   ─────────────────────────────────────────────────────────────────────────── */

/* Card surfaces: more opaque, slightly elevated, clearer border */
body:has(.app-shell:not([hidden])) .admin-card {
  border: 1px solid rgba(95, 231, 255, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)),
    rgba(8, 14, 28, 0.78);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
  color: #f5fbff;
}
body:has(.app-shell:not([hidden])) .admin-card h3 {
  color: #f7fbff;
  font-weight: 700;
}
body:has(.app-shell:not([hidden])) .admin-card small {
  color: rgba(247, 251, 255, 0.62);
  font-weight: 500;
}

/* Container row that holds the tabs. Becomes a glass strip with
   internal border so the inactive tabs sit on a slightly darker
   surface (which dramatically improves their text contrast). */
.admin-screen .admin-tabs {
  padding: 6px;
  border: 1px solid rgba(95, 231, 255, 0.18);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)),
    rgba(6, 12, 26, 0.55);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  gap: 6px;
}

/* Inactive tabs: was barely visible (#c8d6ea against transparent bg).
   Higher specificity via .admin-screen ancestor + opaque slate fill so
   the text reads cleanly. */
.admin-screen .admin-tabs .admin-tab {
  min-height: 42px;
  padding: 10px 18px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 8px;
  background: rgba(20, 26, 44, 0.75);
  color: #e6f3ff;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: 0.88rem;
  transition:
    background 200ms ease,
    border-color 200ms ease,
    color 200ms ease,
    transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
.admin-screen .admin-tabs .admin-tab:hover {
  background: rgba(95, 231, 255, 0.14);
  border-color: rgba(95, 231, 255, 0.50);
  color: #ffffff;
  transform: translateY(-1px);
}
.admin-screen .admin-tabs .admin-tab.active {
  border-color: rgba(95, 231, 255, 0.65);
  background: linear-gradient(135deg, rgba(95, 231, 255, 0.32), rgba(155, 92, 255, 0.28));
  color: #ffffff;
  box-shadow:
    0 6px 22px rgba(95, 231, 255, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.admin-screen .admin-tabs .admin-tab:focus-visible {
  outline: 2px solid #5fe7ff;
  outline-offset: 2px;
}

/* User card: more readable surface + explicit text colours so the
   client name is no longer rendered as washed-out grey on dark. */
body:has(.app-shell:not([hidden])) .admin-user {
  border: 1px solid rgba(255, 255, 255, 0.10);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.022)),
    rgba(10, 16, 30, 0.65);
  padding: 16px 18px;
  gap: 18px;
  transition: border-color 200ms ease, transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
body:has(.app-shell:not([hidden])) .admin-user:hover {
  border-color: rgba(95, 231, 255, 0.32);
  transform: translateY(-1px);
}

/* Hierarchy inside the card:
   • strong (name)  → bright white, no weight games
   • span (email / role / usage / phone)  → 0.75 muted
   • small (status reason)  → italic neon-tint for the "Acesso de admin
     liberado sem bloqueio" line so it reads as system meta */
body:has(.app-shell:not([hidden])) .admin-user strong {
  display: block;
  font-size: 1.02rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.005em;
  margin-bottom: 4px;
}
body:has(.app-shell:not([hidden])) .admin-user span {
  display: block;
  margin-top: 2px;
  font-size: 0.86rem;
  font-weight: 500;
  color: rgba(247, 251, 255, 0.75);
  letter-spacing: 0;
}
body:has(.app-shell:not([hidden])) .admin-user small {
  display: block;
  margin-top: 6px;
  font-size: 0.78rem;
  font-style: italic;
  color: rgba(95, 231, 255, 0.72);
  letter-spacing: 0.01em;
}

/* Action buttons row: clearer hierarchy between status pill, neutral
   actions and the destructive one. */
body:has(.app-shell:not([hidden])) .admin-user-actions {
  gap: 10px;
}
body:has(.app-shell:not([hidden])) .admin-user-actions .text-button {
  min-height: 38px;
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
  color: #f7fbff;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  border-radius: 8px;
  transition:
    background 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
body:has(.app-shell:not([hidden])) .admin-user-actions .text-button:hover {
  background: rgba(95, 231, 255, 0.12);
  border-color: rgba(95, 231, 255, 0.45);
  transform: translateY(-1px);
}
body:has(.app-shell:not([hidden])) .admin-user-actions .text-button.danger {
  border-color: rgba(255, 110, 120, 0.40);
  color: #ffb7bd;
  background: rgba(255, 60, 80, 0.08);
}
body:has(.app-shell:not([hidden])) .admin-user-actions .text-button.danger:hover {
  background: rgba(255, 60, 80, 0.18);
  border-color: rgba(255, 110, 120, 0.70);
  color: #ffffff;
}

/* Status pills: bump contrast so they read at a glance */
body:has(.app-shell:not([hidden])) .admin-status {
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
body:has(.app-shell:not([hidden])) .admin-status.lifetime,
body:has(.app-shell:not([hidden])) .admin-status.active {
  border-color: rgba(45, 220, 175, 0.50);
  background: rgba(45, 220, 175, 0.18);
  color: #b8ffea;
}
body:has(.app-shell:not([hidden])) .admin-status.past_due,
body:has(.app-shell:not([hidden])) .admin-status.pending {
  border-color: rgba(255, 196, 90, 0.50);
  background: rgba(255, 196, 90, 0.18);
  color: #ffe7b3;
}
body:has(.app-shell:not([hidden])) .admin-status.trial {
  border-color: rgba(0, 229, 255, 0.55);
  background: rgba(0, 229, 255, 0.16);
  color: #b6f4ff;
}
body:has(.app-shell:not([hidden])) .admin-status.none,
body:has(.app-shell:not([hidden])) .admin-status.cancelled {
  border-color: rgba(255, 255, 255, 0.20);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(247, 251, 255, 0.72);
}

/* Admin section header: clearer kicker + title rhythm */
body:has(.app-shell:not([hidden])) .admin-panel .section-kicker {
  background: rgba(0, 229, 255, 0.10);
  border: 1px solid rgba(0, 229, 255, 0.35);
  color: #b6f4ff;
  padding: 5px 12px;
  border-radius: 999px;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ─── A/B COMPARE ───────────────────────────────────────── */

.ab-compare-button {
  margin-top: 8px;
  width: 100%;
}

.ab-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
  height: 100%;
  padding: 8px;
}

.ab-card {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(127, 195, 255, 0.18);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(11, 22, 35, 0.5);
}

.ab-card-preview {
  flex: 1;
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    repeating-conic-gradient(#1a2733 0% 25%, #131d27 0% 50%) 50% / 18px 18px;
  padding: 8px;
}

.ab-card-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.ab-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-top: 1px solid rgba(127, 195, 255, 0.12);
}

.ab-card-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ab-card-title {
  font-size: 0.74rem;
  color: #e6eef6;
  font-weight: 600;
}

.ab-card-sub {
  font-size: 0.66rem;
  font-family: "JetBrains Mono", monospace;
  color: #8aa5be;
}

.ab-card-pick {
  flex: 0 0 auto;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid rgba(127, 255, 154, 0.4);
  background: rgba(127, 255, 154, 0.12);
  color: #7fff9a;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
}

.ab-card-pick:hover {
  background: rgba(127, 255, 154, 0.22);
}

@media (max-width: 768px) {
  .ab-grid {
    grid-template-columns: 1fr;
  }
}

/* ─── SUGGEST CHIP ──────────────────────────────────────── */

.suggest-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid rgba(0, 229, 255, 0.28);
  background: linear-gradient(
    90deg,
    rgba(0, 229, 255, 0.06),
    rgba(124, 92, 255, 0.10)
  );
}

.suggest-chip-text {
  flex: 1;
  font-size: 0.74rem;
  line-height: 1.35;
  color: #cfe6f0;
}

.suggest-chip-text strong {
  color: #7ff0ff;
}

.suggest-chip-apply {
  flex: 0 0 auto;
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid rgba(0, 229, 255, 0.45);
  background: rgba(0, 229, 255, 0.14);
  color: #b6f4ff;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.suggest-chip-apply:hover {
  background: rgba(0, 229, 255, 0.24);
}

/* ─── HISTORY STRIP ─────────────────────────────────────── */

.history-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(127, 195, 255, 0.12);
  background: rgba(11, 22, 35, 0.5);
}

.history-strip-label {
  font-size: 0.66rem;
  font-family: "JetBrains Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #8aa5be;
  white-space: nowrap;
}

.history-strip-items {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  flex: 1;
}

.history-thumb {
  position: relative;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 8px;
  border: 1px solid rgba(127, 195, 255, 0.18);
  background: #fff
    repeating-conic-gradient(#eef3f7 0% 25%, #dde6ee 0% 50%) 50% / 10px 10px;
  cursor: pointer;
  overflow: hidden;
  padding: 0;
}

.history-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.history-thumb:hover {
  border-color: rgba(127, 195, 255, 0.55);
  box-shadow: 0 0 10px rgba(127, 195, 255, 0.25);
}

.history-thumb-remove {
  position: absolute;
  top: 1px;
  right: 1px;
  width: 16px;
  height: 16px;
  line-height: 14px;
  text-align: center;
  border-radius: 50%;
  border: none;
  background: rgba(7, 15, 24, 0.8);
  color: #ff8888;
  font-size: 0.7rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.history-thumb:hover .history-thumb-remove {
  opacity: 1;
}

/* ─── PAINEL LIMPO ──────────────────────────────────────────
   Esconde os controles avançados e os botões de motor internos.
   O produto usa a melhor escolha automática — sem knobs pro cliente.
   (Os inputs continuam no DOM, então os padrões seguem funcionando.)
   Para reverter qualquer item, é só removê-lo desta lista. */
.control-section,
#paletteHint,
#paletteStrip,
#separateColors,
#vectorizeraiButton,
#recraftButton,
#omnisvgButton,
#starvectorButton,
#sam2Button,
#realesrganButton,
#visionButton {
  display: none !important;
}

/* ─── SWIPE COMPARE ─────────────────────────────────────── */

.swipe-compare {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 240px;
  overflow: hidden;
  border-radius: 12px;
  background:
    repeating-conic-gradient(#1a2733 0% 25%, #131d27 0% 50%) 50% / 22px 22px;
  cursor: ew-resize;
  user-select: none;
  touch-action: none;
}

.swipe-compare img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.swipe-top {
  position: absolute;
  inset: 0;
  clip-path: inset(0 0 0 50%);
  background:
    repeating-conic-gradient(#1a2733 0% 25%, #131d27 0% 50%) 50% / 22px 22px;
}

.swipe-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: rgba(127, 195, 255, 0.9);
  box-shadow: 0 0 12px rgba(127, 195, 255, 0.6);
  pointer-events: none;
}

.swipe-grip {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 34px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(11, 22, 35, 0.92);
  border: 2px solid rgba(127, 195, 255, 0.9);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
}

.swipe-grip::before,
.swipe-grip::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
.swipe-grip::before {
  left: 7px;
  transform: translateY(-50%);
  border-right: 6px solid rgba(127, 195, 255, 0.95);
}
.swipe-grip::after {
  right: 7px;
  transform: translateY(-50%);
  border-left: 6px solid rgba(127, 195, 255, 0.95);
}

.swipe-compare.is-dragging .swipe-grip {
  border-color: #fff;
}

.swipe-label {
  position: absolute;
  top: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(7, 15, 24, 0.75);
  color: #cfdde8;
  pointer-events: none;
}
.swipe-label-left { left: 10px; }
.swipe-label-right { right: 10px; }

/* ─── QUALITY BADGE ─────────────────────────────────────── */

.quality-badge {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  margin-bottom: 12px;
  border-radius: 10px;
  border: 1px solid rgba(127, 195, 255, 0.18);
  background: linear-gradient(
    90deg,
    rgba(127, 195, 255, 0.04) 0%,
    rgba(127, 195, 255, 0.10) 100%
  );
}

.quality-badge-label {
  font-size: 0.68rem;
  font-family: "JetBrains Mono", monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8aa5be;
}

.quality-badge-value {
  font-size: 1.4rem;
  font-weight: 700;
  color: #e6eef6;
  font-variant-numeric: tabular-nums;
}

.quality-badge-tag {
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-family: "JetBrains Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  background: rgba(127, 255, 154, 0.12);
  color: #7fff9a;
  border: 1px solid rgba(127, 255, 154, 0.35);
}

.quality-badge[data-grade="warning"] .quality-badge-tag {
  background: rgba(255, 174, 59, 0.14);
  color: #ffae3b;
  border-color: rgba(255, 174, 59, 0.40);
}
.quality-badge[data-grade="low"] .quality-badge-tag {
  background: rgba(255, 107, 107, 0.14);
  color: #ff6b6b;
  border-color: rgba(255, 107, 107, 0.40);
}

/* ─── BATCH QUEUE ───────────────────────────────────────── */

.batch-queue {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid rgba(127, 195, 255, 0.18);
  border-radius: 10px;
  background: rgba(11, 22, 35, 0.6);
}

.batch-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  gap: 8px;
}

.batch-header h3 {
  margin: 0;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #cfdde8;
  font-weight: 600;
}

.batch-header h3 #batchCount {
  color: #7fc3ff;
  margin-left: 6px;
}

.batch-actions {
  display: flex;
  gap: 4px;
}

.batch-actions .text-button {
  font-size: 0.72rem;
  padding: 4px 8px;
}

.batch-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 320px;
  overflow-y: auto;
}

.batch-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(127, 195, 255, 0.10);
  border-radius: 8px;
  background: rgba(7, 15, 24, 0.45);
  align-items: center;
}

.batch-item-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.batch-item-name {
  font-size: 0.78rem;
  color: #e6eef6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

.batch-item-status {
  font-size: 0.68rem;
  font-family: "JetBrains Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #6f8294;
}

.batch-item[data-status="processing"] .batch-item-status { color: #ffae3b; }
.batch-item[data-status="done"] .batch-item-status { color: #7fff9a; }
.batch-item[data-status="error"] .batch-item-status { color: #ff6b6b; }

.batch-item-progress {
  height: 3px;
  background: rgba(127, 195, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 2px;
}

.batch-item-progress > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #ffae3b, #ff7a3b);
  width: 0%;
  transition: width 0.2s ease;
}

.batch-item-actions {
  display: flex;
  gap: 3px;
}

.batch-item-actions button {
  background: rgba(127, 195, 255, 0.10);
  border: 1px solid rgba(127, 195, 255, 0.20);
  color: #cfdde8;
  font-size: 0.65rem;
  padding: 3px 7px;
  border-radius: 5px;
  cursor: pointer;
  font-family: "JetBrains Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.batch-item-actions button:hover {
  background: rgba(127, 195, 255, 0.18);
}

.batch-item-actions button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}


/* ─── BATCH QUEUE ─────────────────────────────────────── */

.batch-queue {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid rgba(127, 195, 255, 0.18);
  border-radius: 10px;
  background: rgba(11, 22, 35, 0.6);
}

.batch-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  gap: 8px;
}

.batch-header h3 {
  margin: 0;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #cfdde8;
  font-weight: 600;
}

.batch-header h3 #batchCount {
  color: #7fc3ff;
  margin-left: 6px;
}

.batch-actions {
  display: flex;
  gap: 4px;
}

.batch-actions .text-button {
  font-size: 0.72rem;
  padding: 4px 8px;
}

.batch-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 320px;
  overflow-y: auto;
}

.batch-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(127, 195, 255, 0.10);
  border-radius: 8px;
  background: rgba(7, 15, 24, 0.45);
  align-items: center;
}

.batch-item-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.batch-item-name {
  font-size: 0.78rem;
  color: #e6eef6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

.batch-item-status {
  font-size: 0.68rem;
  font-family: "JetBrains Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #6f8294;
}

.batch-item[data-status="processing"] .batch-item-status { color: #ffae3b; }
.batch-item[data-status="done"] .batch-item-status { color: #7fff9a; }
.batch-item[data-status="error"] .batch-item-status { color: #ff6b6b; }

.batch-item-progress {
  height: 3px;
  background: rgba(127, 195, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 2px;
}

.batch-item-progress > span {
  display: block;
  height: 100