:root {
  --bg: #080b09;
  --bg-2: #101511;
  --surface: #161d18;
  --surface-2: #1b241e;
  --accent: #b8ff3d;
  --accent-2: #43e6c4;
  --text: #f5f8f5;
  --muted: #97a39a;
  --line: #29332c;
  --danger: #ff667a;
  --warning: #ffca63;
  --success: #47df8a;
  --header-height: 78px;
  --container: 1220px;
  --radius-sm: 14px;
  --radius: 22px;
  --radius-lg: 32px;
  --shadow: 0 18px 52px rgba(0,0,0,.28);
  --ease: cubic-bezier(.22,1,.36,1);
  --font-body: 1rem;
  --font-secondary: .875rem;
  --font-label: .75rem;
  --font-field: .875rem;
  --font-button: .875rem;
  --font-error: .75rem;
  --font-card-title: 1.3125rem;
  --font-section-title: clamp(2.375rem, 4.5vw, 3.875rem);
  --font-display: clamp(3rem, 5.2vw, 4.75rem);
  --font-badge: .6875rem;
  --heading-letter-spacing: -.018em;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 18px); }
section[id], #generator, #documents { scroll-margin-top: calc(var(--header-height) + 18px); }
@supports (scrollbar-gutter: stable) { html { scrollbar-gutter: stable; } }
body {
  margin: 0;
  min-width: 320px;
  color: var(--text);
  background: var(--bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: var(--font-body);
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-x: none;
}
body.menu-open, body.modal-open { overflow: hidden; padding-right: var(--scrollbar-compensation, 0px); }
.editor-embed { min-width: 0; background: transparent; }
.editor-embed > .site-noise, .editor-embed > .site-header, .editor-embed .hero-copy-rail,
.editor-embed .proof-strip, .editor-embed main > section:not(.hero), .editor-embed > footer,
.editor-embed > [data-auth-modal] { display: none; }
.editor-embed .hero { min-height: 0; padding: 0 0 40px; background: transparent; }
.editor-embed .hero-grid { display: none; }
.editor-embed .hero > .container { width: min(100% - 40px, 1440px); }
.editor-embed .hero-layout { display: block; width: 100%; max-width: none; padding: 0; }
.editor-embed .generator-shell { width: 100%; margin: 0; opacity: 1; transform: none; }
.editor-embed .generator-preview-sticky { top: 20px; }
.dynamic-editor-page { min-width: 0; }
.dynamic-editor-header { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 28px; width: min(100% - 40px, 1440px); margin: 0 auto; padding: 24px 0; }
.dynamic-editor-header > div { min-width: 0; }
.dynamic-editor-header h1 { margin: 0 0 6px; font-size: clamp(24px,3vw,38px); line-height: 1.1; }
.dynamic-editor-header p { margin: 0; color: var(--muted); overflow-wrap: anywhere; }
.dynamic-editor-lock-wrap { width: min(100% - 40px, 1440px); margin: 0 auto 18px; }
.dynamic-editor-lock .button { justify-self: start; margin-top: 7px; }
@media (max-width: 760px) {
  .dynamic-editor-header { grid-template-columns: 1fr auto; width: min(100% - 24px,1440px); gap: 16px; }
  .dynamic-editor-header > div { grid-column: 1 / -1; grid-row: 2; }
  .dynamic-editor-lock-wrap, .editor-embed .hero > .container { width: min(100% - 16px,1440px); }
}
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
.ui-icon { display: inline-block; width: 1.1em; height: 1.1em; max-width: none; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.16em; pointer-events: none; }
.ui-icon-inline { width: 1em; height: 1em; margin-left: 4px; vertical-align: -0.14em; }
.button > .ui-icon { width: 17px; height: 17px; }
.action-button > .ui-icon { width: 18px; height: 18px; }

button { color: inherit; }

::selection { color: #0b100d; background: var(--accent); }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.skip-link {
  position: fixed;
  z-index: 1000;
  left: 16px;
  top: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--accent);
  color: #0b100d;
  transform: translateY(-150%);
  transition: transform .25s var(--ease);
}
.skip-link:focus { transform: translateY(0); }

.container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; }
.site-noise {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .018;
  /* A static gradient texture avoids the full-viewport feTurbulence repaint
     that made the desktop landing expensive during scroll. */
  background-image: radial-gradient(rgba(184,255,61,.38) .55px, transparent .7px), radial-gradient(rgba(255,255,255,.22) .45px, transparent .65px);
  background-position: 0 0, 9px 13px;
  background-size: 17px 19px, 23px 27px;
}

.site-header {
  position: fixed;
  z-index: 100;
  inset: 0 0 auto;
  height: var(--header-height);
  border-bottom: 1px solid transparent;
  will-change: transform;
  transition: transform .55s var(--ease), background-color .4s ease, border-color .4s ease;
}
.site-header.is-scrolled {
  background: rgba(8,11,9,.94);
  border-color: rgba(184,255,61,.11);
}
.site-header.is-hidden { transform: translateY(-105%); }
.header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-size: 20px; font-weight: 800; letter-spacing: -.04em; white-space: nowrap; }
.brand > span:last-child > span { color: var(--accent); }
.brand-mark { position: relative; width: 29px; height: 29px; display: grid; grid-template: repeat(3, 1fr)/repeat(3,1fr); gap: 3px; transform: rotate(-3deg); }
.brand-mark i { border-radius: 2px; background: var(--accent); transition: transform .35s var(--ease), opacity .35s ease; }
.brand-mark i:nth-child(1) { grid-area: 1/1/3/3; border-radius: 4px; }
.brand-mark i:nth-child(2) { grid-area: 1/3; }
.brand-mark i:nth-child(3) { grid-area: 2/3; opacity: .5; }
.brand-mark i:nth-child(4) { grid-area: 3/1; opacity: .5; }
.brand-mark i:nth-child(5) { grid-area: 3/2/4/4; border-radius: 4px; }
.brand:hover .brand-mark i:nth-child(2), .brand:hover .brand-mark i:nth-child(4) { transform: translate(2px,-2px); }
.main-nav { display: flex; align-items: center; gap: 30px; margin-left: auto; }
.main-nav a { position: relative; color: #c3cbc5; font-size: 14px; font-weight: 600; transition: color .3s ease, background-color .3s ease, border-color .3s ease; }
.nav-account-actions { display: flex; align-items: center; gap: 8px; }
.nav-account-actions .button { min-height: 42px; }
.password-field { position: relative; display: block; }
.password-field input { width: 100%; padding-right: 52px; }
.password-field [data-toggle-wifi-password] { position: absolute; z-index: 2; right: 6px; top: 50%; display: grid; place-items: center; width: 36px; min-width: 36px; height: 36px; min-height: 36px; padding: 0; border: 0; border-radius: 8px; color: var(--muted); background: transparent; transform: translateY(-50%); cursor: pointer; }
.password-field [data-toggle-wifi-password]:hover { color: var(--text); background: rgba(184,255,61,.08); }
.password-field [data-toggle-wifi-password]:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.password-field [data-toggle-wifi-password]:disabled { opacity: .42; cursor: default; }
.wifi-password-icon { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wifi-password-icon[hidden] { display: none; }
.field-error { display: block; margin-top: 6px; color: var(--danger); font-size: var(--font-error); }
.field-note { display: block; margin-top: 6px; color: var(--muted); font-size: var(--font-error); line-height: 1.45; }
.url-target-info { color: #aeb8b0; }
.legal { max-width: 820px; padding: 120px 0; }
.legal h1 { font-size: clamp(36px,6vw,64px); letter-spacing: -.025em; }
.legal h2 { margin-top: 42px; }
.legal p, .legal li { color: var(--muted); }
.legal a { color: var(--accent); }
.legal ul { padding-left: 20px; }
.main-nav > a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -8px; height: 1px; background: var(--accent); transition: right .35s var(--ease); }
.main-nav > a:hover { color: var(--text); }
.main-nav > a:hover::after { right: 0; }
.header-actions { display: flex; align-items: center; gap: 10px; }
.menu-toggle { display: none; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.03); cursor: pointer; transition: background-color .3s ease, border-color .3s ease, transform .35s var(--ease); }
.menu-toggle:hover { border-color: rgba(184,255,61,.35); background: rgba(184,255,61,.06); }
.menu-toggle .menu-icon { width: 19px; height: 19px; }
.menu-toggle .menu-icon-close { display: none; }
.menu-toggle[aria-expanded="true"] .menu-icon-open { display: none; }
.menu-toggle[aria-expanded="true"] .menu-icon-close { display: block; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 50px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 14px;
  font-weight: 750;
  font-size: var(--font-button);
  line-height: 1;
  cursor: pointer;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-color .3s ease, border-color .3s ease, color .3s ease;
}
.button:hover { transform: translateY(-2px); }
.button:active { transform: translateY(0) scale(.985); }
.button-primary { color: #10150f; background: var(--accent); box-shadow: 0 9px 22px rgba(0,0,0,.18); }
.button-primary:hover { background: #c8ff68; box-shadow: 0 13px 28px rgba(0,0,0,.24); }
.button-secondary { color: var(--text); background: rgba(255,255,255,.045); border-color: var(--line); }
.button-secondary:hover, .button-ghost:hover { border-color: rgba(184,255,61,.35); background: rgba(184,255,61,.06); }
.button-ghost { color: #d4dbd6; background: transparent; border-color: rgba(255,255,255,.1); }
.button-small { min-height: 42px; padding-inline: 16px; border-radius: 12px; }
.button-large { min-height: 58px; padding-inline: 26px; font-size: 15px; }

.hero { position: relative; min-height: 100vh; min-height: 100svh; min-height: 100dvh; padding: calc(var(--header-height) + 22px) 0 42px; overflow-x: clip; overflow-y: visible; }
.hero::before {
  content: "";
  position: absolute;
  width: 720px;
  height: 720px;
  border-radius: 50%;
  right: -210px;
  top: -250px;
  background: radial-gradient(circle, rgba(184,255,61,.14), rgba(67,230,196,.045) 42%, transparent 68%);
  filter: blur(8px);
  pointer-events: none;
}
.hero::after { content: ""; position: absolute; left: -20%; right: -20%; bottom: 0; height: 230px; background: linear-gradient(180deg, transparent, rgba(16,21,17,.72)); pointer-events: none; }
.hero-grid, .cta-grid {
  position: absolute;
  inset: 0;
  opacity: .22;
  pointer-events: none;
  background-image: linear-gradient(rgba(184,255,61,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(184,255,61,.06) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(to bottom, black 10%, transparent 88%);
}
.hero-layout { position: relative; z-index: 2; display: grid; grid-template-columns: .82fr 1.18fr; align-items: stretch; gap: clamp(42px, 6vw, 86px); }
.hero-copy-rail { min-width: 0; }
.hero-copy { padding-bottom: 34px; }
.domain-verification-note { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; margin-bottom: 18px; padding: 9px 13px; border: 1px solid rgba(184,255,61,.2); border-radius: 10px; color: #cdd5cf; background: rgba(18,25,20,.76); font-size: 12px; font-weight: 650; line-height: 1.4; letter-spacing: .01em; }
.domain-verification-note > span { min-width: 0; }
.domain-verification-icon { flex: 0 0 auto; width: 17px; height: 17px; color: var(--accent); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; max-width: 100%; padding: 7px 10px 7px 12px; border: 1px solid rgba(184,255,61,.18); border-radius: 999px; color: #c9d1cb; background: rgba(184,255,61,.045); font-size: 12px; font-weight: 720; line-height: 1.25; letter-spacing: .025em; text-transform: none; }
.eyebrow-arrow { flex: 0 0 auto; width: 15px; height: 15px; color: var(--accent); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transform-origin: center; transition: transform .3s var(--ease); }
.eyebrow--target-down .eyebrow-arrow { transform: rotate(90deg); }
.eyebrow--target-left .eyebrow-arrow { transform: rotate(180deg); }
.eyebrow--target-up .eyebrow-arrow { transform: rotate(-90deg); }
.hero h1, .section-heading h2, .dynamic-copy h2, .final-cta h2 {
  margin: 24px 0 20px;
  font-size: var(--font-display);
  line-height: .98;
  letter-spacing: var(--heading-letter-spacing);
  font-weight: 820;
  overflow-wrap: anywhere;
}
.hero h1 em, .section-heading h2 em, .dynamic-copy h2 em, .final-cta h2 em { color: var(--accent); font-style: normal; }
.hero-lead { max-width: 590px; margin: 0; color: #a8b2aa; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.62; }
.hero-points { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 30px; color: #c9d0cb; font-size: 13px; }
.hero-points span { display: inline-flex; align-items: center; gap: 7px; }
.hero-points b { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; color: #10150f; background: var(--accent); font-size: 11px; }
.hero-actions-mobile { display: none; }

.generator-shell { position: relative; border: 1px solid rgba(184,255,61,.19); border-radius: var(--radius-lg); background: linear-gradient(145deg, rgba(25,34,28,.96), rgba(13,18,15,.96)); box-shadow: var(--shadow), inset 0 1px rgba(255,255,255,.045); overflow: clip; }
.generator-shell::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, rgba(184,255,61,.055), transparent 30%); }
.generator-topbar { position: relative; z-index: 2; min-height: 58px; padding: 0 24px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 16px; color: #cfd6d1; font-size: var(--font-secondary); }
.generator-topbar > div { display: flex; align-items: center; gap: 9px; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(184,255,61,.08); }
.generator-status { color: var(--muted); font-size: var(--font-badge); text-transform: uppercase; letter-spacing: .08em; }
.generator-content { display: grid; grid-template-columns: 1.05fr .95fr; min-height: 565px; }
.generator-controls { position: relative; z-index: 2; padding: 26px; border-right: 1px solid var(--line); }
.type-tabs { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 5px; margin-bottom: 24px; padding: 5px; border-radius: 13px; background: rgba(0,0,0,.22); }
.type-tabs-static { grid-template-columns: repeat(3,minmax(0,1fr)); }
.qr-panel[hidden] { display: none !important; }
.type-tabs .type-tab { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.type-tab { min-height: 44px; border: 0; border-radius: 9px; color: var(--muted); background: transparent; font-size: var(--font-label); font-weight: 750; cursor: pointer; transition: color .3s ease, background-color .3s ease, box-shadow .3s ease; }
.type-tab.is-active { color: #11160f; background: var(--accent); box-shadow: 0 5px 12px rgba(0,0,0,.14); }
.field-group { display: grid; gap: 8px; min-width: 0; }
.field-group label, .select-field { color: #bec8c0; font-size: var(--font-label); font-weight: 750; text-transform: uppercase; letter-spacing: .08em; }
.input-wrap { position: relative; }
.input-wrap > .ui-icon, .input-wrap .clearable-control > .ui-icon { position: absolute; z-index: 2; left: 14px; top: 50%; width: 17px; height: 17px; color: var(--accent); transform: translateY(-50%); }
.input-wrap input { padding-left: 40px; }
.generator-controls input::placeholder, .generator-controls textarea::placeholder { color: #6f7b73; opacity: 1; }
.clearable-control { position: relative; display: block; min-width: 0; width: 100%; }
.clearable-control input, .clearable-control textarea { padding-right: 46px; }
.input-wrap .clearable-control input { padding-left: 40px; }
.field-clear-button { position: absolute; z-index: 3; right: 7px; top: 50%; display: grid; place-items: center; width: 34px; min-width: 34px; height: 34px; min-height: 34px; padding: 0; border: 0; border-radius: 8px; color: var(--muted); background: rgba(255,255,255,.035); line-height: 0; transform: translateY(-50%); cursor: pointer; }
.field-clear-button svg { display: block; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.field-clear-button:hover { color: var(--text); background: rgba(184,255,61,.08); }
.field-clear-button:focus-visible { outline-offset: 1px; }
.field-clear-button[hidden] { display: none; }
.clearable-control.is-textarea .field-clear-button { top: 50%; transform: translateY(-50%); }
.password-field .clearable-control input { padding-right: 94px; }
.password-field .clearable-control { min-width: 0; }
.password-field .field-clear-button { right: 48px; width: 34px; min-width: 34px; min-height: 34px; }
input, textarea, select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text);
  background: rgba(5,8,6,.46);
  outline: none;
  transition: border-color .3s ease, box-shadow .3s ease, background-color .3s ease;
}
input, select { height: 48px; padding: 0 14px; }
textarea { min-height: 92px; padding: 13px 14px; resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: transparent; box-shadow: 0 0 0 3px rgba(184,255,61,.38); background: rgba(5,8,6,.65); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wifi-credentials-row { grid-template-columns: 1fr; }
.contact-fields { grid-template-columns: minmax(0,1fr); width: min(100%,520px); }
.customizer { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); }
.customizer-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.customizer-title span { font-size: var(--font-label); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.customizer-title small { color: var(--success); font-size: var(--font-badge); }
.customizer-title small.is-warning { color: var(--warning); }
.customizer-title small.is-pending { color: var(--muted); }
.color-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.contrast-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.contrast-actions .button { flex: 1 1 150px; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.design-warning { min-height: 1.45em; color: var(--warning); font-size: var(--font-error); line-height: 1.45; }
.preset-palettes { display: grid; gap: 12px; }
.palette-group { display: grid; gap: 7px; min-width: 0; }
.palette-group-title { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.palette-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; }
.preset-palettes button { min-width: 0; padding: 7px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: rgba(0,0,0,.14); cursor: pointer; overflow: hidden; }
.preset-palettes button:hover:not(:disabled) { border-color: rgba(184,255,61,.3); }
.preset-palettes button:disabled, .preset-palettes button.is-locked { cursor: not-allowed; opacity: .52; }
.preset-palettes button.is-active, .preset-palettes button[aria-pressed="true"] { border-color: rgba(184,255,61,.72); box-shadow: 0 0 0 1px rgba(184,255,61,.2), 0 8px 20px rgba(0,0,0,.2); }
.preset-palettes button:focus-visible { outline: 2px solid rgba(184,255,61,.72); outline-offset: 2px; }
.preset-palettes i { display: inline-block; width: 50%; height: 20px; background: linear-gradient(135deg,var(--a),var(--b)); }
.preset-palettes i:first-child { border-radius: 5px 0 0 5px; }
.preset-palettes i:nth-child(2) { border-radius: 0 5px 5px 0; }
.preset-palettes span { display: block; margin-top: 5px; overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.palette-plan-note { display: inline-block; max-width: 100%; padding: 0; border: 0; color: var(--muted); background: none; font: inherit; font-size: 10px; line-height: 1.4; text-align: left; overflow-wrap: anywhere; text-decoration: none; transition: color .25s ease; }
.palette-register-note { cursor: pointer; }
.palette-plan-note:hover { color: var(--accent); }
.palette-plan-note:focus-visible { outline: 2px solid rgba(184,255,61,.72); outline-offset: 3px; border-radius: 4px; }
.managed-panel small, .field-group small { color: var(--muted); font-size: var(--font-badge); line-height: 1.45; }
.menu-section-editor { display: grid; gap: 9px; margin: 10px 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.menu-item-editor { display: grid; grid-template-columns: 1fr 1.3fr .55fr 1.2fr auto; gap: 7px; margin-top: 7px; }
.menu-editor-actions { display: flex; justify-content: space-between; gap: 10px; }
.content-page { min-height: 100vh; padding: 28px 14px; background: #090d0a; }
.content-card { width: min(100%,760px); margin: 0 auto; padding: clamp(22px,5vw,48px); border: 1px solid var(--line); border-radius: 24px; background: #111713; }
.content-card h1 { margin: 32px 0; font-size: clamp(32px,7vw,64px); }
.content-card h2 { margin: 28px 0 12px; color: var(--accent); }
.menu-public-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.menu-public-item img { width: 72px; height: 72px; border-radius: 12px; object-fit: cover; }
.menu-public-item p { margin: 5px 0 0; color: var(--muted); }
.color-field { position: relative; display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; cursor: pointer; transition: border-color .3s ease, background .3s ease; }
.color-field:hover { border-color: rgba(184,255,61,.28); background: rgba(255,255,255,.025); }
.color-field input { grid-row: 1/3; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 8px; background: transparent; cursor: pointer; }
.color-field .native-color-fallback { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.color-trigger { position: relative; grid-row: 1/3; width: 34px; height: 34px; padding: 0; border: 1px solid rgba(255,255,255,.15); border-radius: 8px; background: var(--selected-color); cursor: pointer; transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.color-trigger::after { content: ""; position: absolute; inset: -5px; }
.color-trigger:hover { border-color: rgba(184,255,61,.42); }
.color-trigger:focus-visible { border-color: transparent; outline: none; box-shadow: 0 0 0 3px rgba(184,255,61,.38); }
.color-field input::-webkit-color-swatch-wrapper { padding: 0; }
.color-field input::-webkit-color-swatch { border: 1px solid rgba(255,255,255,.15); border-radius: 8px; }
.color-field > span { color: #dce2dd; font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.color-popover { position: fixed; z-index: 250; display: grid; gap: 12px; width: min(280px,calc(100vw - 16px)); padding: 14px; border: 1px solid rgba(184,255,61,.22); border-radius: 16px; color: var(--text); background: rgba(18,25,20,.98); box-shadow: var(--shadow-float), inset 0 1px rgba(255,255,255,.05); opacity: 0; transform: translateY(6px) scale(.98); transform-origin: top left; transition: opacity .18s ease, transform .18s ease; }
.color-popover[hidden] { display: none; }
.color-popover.is-open { opacity: 1; transform: translateY(0) scale(1); }
.color-popover-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.color-popover-head strong { font-size: 12px; }
.color-popover-close { width: 30px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 9px; color: var(--text); background: rgba(255,255,255,.035); cursor: pointer; }
.color-popover-native, .color-popover-hex { display: grid; gap: 6px; color: var(--muted); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
.color-popover-native input { width: 100%; height: 48px; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: rgba(0,0,0,.16); cursor: pointer; }
.color-popover-native input::-webkit-color-swatch-wrapper { padding: 0; }
.color-popover-native input::-webkit-color-swatch { border: 0; border-radius: 7px; }
.color-popover-hex input { width: 100%; }
.color-popover-presets { display: grid; grid-template-columns: repeat(5,1fr); gap: 7px; }
.color-popover-presets button { aspect-ratio: 1; min-width: 0; padding: 0; border: 1px solid rgba(255,255,255,.18); border-radius: 8px; background: var(--swatch); cursor: pointer; transition: transform .2s ease, border-color .2s ease; }
.color-popover-presets button:hover { border-color: var(--accent); transform: translateY(-1px); }
.compact-row { margin-top: 10px; }
.select-field { display: grid; gap: 7px; }
.select-field select { color: #dfe6e1; font-size: var(--font-field); text-transform: none; letter-spacing: 0; }
.ecc-hint { color: var(--muted); font-size: 10px; font-weight: 500; line-height: 1.45; text-transform: none; letter-spacing: 0; }
.static-qr-settings { display: grid; grid-template-columns: minmax(0,1fr); gap: 14px; }
.segmented-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.segmented-field legend { display: flex; align-items: center; gap: 7px; max-width: 100%; margin-bottom: 7px; padding: 0; color: #bec8c0; font-size: var(--font-label); font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.setting-label-row { display: flex; align-items: center; justify-content: flex-start; gap: 7px; min-width: 0; }
.setting-label-row > label, .setting-label-row > .checkbox-line { min-width: 0; }
.setting-help { position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; text-transform: none; letter-spacing: 0; }
.setting-help-trigger { display: grid; place-items: center; width: 24px; min-width: 24px; height: 24px; min-height: 24px; padding: 0; border: 1px solid rgba(190,200,192,.28); border-radius: 50%; color: var(--muted); background: rgba(255,255,255,.025); line-height: 0; cursor: help; transition: color .2s ease, border-color .2s ease, background-color .2s ease; }
.setting-help-trigger svg { display: block; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.setting-help-trigger:hover, .setting-help-trigger[aria-expanded="true"] { color: var(--accent); border-color: rgba(184,255,61,.48); background: rgba(184,255,61,.07); }
.setting-help-trigger:focus-visible { outline: 2px solid rgba(184,255,61,.72); outline-offset: 2px; }
.setting-tooltip { position: fixed; z-index: 320; width: max-content; max-width: min(310px, calc(100vw - 24px)); padding: 10px 12px; border: 1px solid rgba(184,255,61,.22); border-radius: 11px; color: var(--text); background: var(--surface-popover); box-shadow: var(--shadow-float); font-size: 11px; font-weight: 500; line-height: 1.5; text-align: left; text-transform: none; letter-spacing: 0; opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity .16s ease, transform .16s ease; }
.setting-tooltip[hidden] { display: none; }
.setting-tooltip.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.segmented-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: rgba(0,0,0,.2); }
.segmented-options label { min-width: 0; cursor: pointer; }
.segmented-options input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.segmented-options span { display: grid; place-items: center; min-width: 0; min-height: 38px; padding: 6px 8px; border-radius: 8px; color: var(--muted); font-size: 10px; font-weight: 750; line-height: 1.25; text-align: center; overflow-wrap: anywhere; transition: color .22s ease, background-color .22s ease, box-shadow .22s ease; }
.segmented-options input:checked + span { color: #11160f; background: var(--accent); box-shadow: 0 4px 10px rgba(0,0,0,.14); }
.segmented-options input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.segmented-field .ecc-hint { display: block; margin-top: 7px; }
.wifi-hidden-setting { display: grid; align-content: start; gap: 5px; min-width: 0; }
.wifi-hidden-setting small { color: var(--muted); font-size: var(--font-badge); font-weight: 500; line-height: 1.4; text-transform: none; letter-spacing: 0; }

.generator-preview { position: relative; min-width: 0; background: radial-gradient(circle at center, rgba(184,255,61,.08), transparent 56%); overflow: clip; }
.generator-preview-sticky { position: sticky; top: calc(var(--header-height) + 22px); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: 100%; min-height: min(565px, calc(100vh - var(--header-height) - 44px)); min-height: min(565px, calc(100dvh - var(--header-height) - 44px)); padding: 24px 24px 32px; overflow: clip; }
.qr-preview-stage { position: relative; z-index: 1; display: grid; place-items: center; width: min(100%, 410px); aspect-ratio: 1; flex: 0 0 auto; }
.qr-preview-stage > .preview-orbit, .qr-preview-stage > .qr-frame { grid-area: 1 / 1; }
.preview-orbit { position: relative; z-index: 1; width: 100%; height: auto; aspect-ratio: 1; border: 1px solid rgba(184,255,61,.08); border-radius: 50%; animation: orbitSpin 28s linear infinite; will-change: transform; pointer-events: none; }
.generator-preview:not(.is-empty-state) .preview-orbit { animation-play-state: paused; will-change: auto; }
.preview-orbit::before, .preview-orbit::after { content: ""; position: absolute; inset: 48px; border: 1px dashed rgba(67,230,196,.09); border-radius: 50%; }
.preview-orbit::after { inset: 94px; }
.preview-orbit i { position: absolute; width: 7px; height: 7px; border-radius: 2px; background: var(--accent); box-shadow: none; }
.preview-orbit i:nth-child(1) { top: 26px; left: 118px; }
.preview-orbit i:nth-child(2) { right: 31px; top: 186px; background: var(--accent-2); }
.preview-orbit i:nth-child(3) { left: 58px; bottom: 70px; opacity: .5; }
@keyframes orbitSpin { to { transform: rotate(360deg); } }
.qr-frame { position: relative; z-index: 2; width: min(100%, 268px); height: 268px; aspect-ratio: 1; padding: 15px; border: 1px solid rgba(255,255,255,.14); border-radius: 24px; background: #fff; box-shadow: 0 16px 34px rgba(0,0,0,.34); overflow: hidden; contain: layout paint; isolation: isolate; }
@supports (aspect-ratio: 1) { .qr-frame { height: auto; } }
.qr-frame img { position: absolute; z-index: 3; inset: 15px; display: block; width: calc(100% - 30px); height: calc(100% - 30px); object-fit: contain; opacity: 1; }
.qr-frame img:not([src]) { visibility: hidden; }
.qr-placeholder-canvas, .qr-floating-canvas { position: absolute; inset: 15px; width: calc(100% - 30px); height: calc(100% - 30px); pointer-events: none; }
.qr-placeholder-canvas { z-index: 1; }
.qr-floating-canvas { z-index: 2; }
.qr-frame.has-preview .qr-placeholder-canvas, .qr-frame.has-preview .qr-floating-canvas { visibility: hidden; }
.qr-loading { position: absolute; z-index: 3; inset: 0; display: none; place-items: center; grid-auto-flow: column; gap: 5px; background: rgba(255,255,255,.72); }
.qr-frame.is-loading .qr-loading { display: grid; }
.qr-frame.is-loading.has-preview .qr-loading { display: none; }
.qr-loading span { width: 9px; height: 9px; background: #101511; animation: qrPulse .9s ease-in-out infinite alternate; }
.qr-loading span:nth-child(2) { animation-delay: .15s; }
.qr-loading span:nth-child(3) { animation-delay: .3s; }
@keyframes qrPulse { to { transform: scale(.35); opacity: .35; } }
.qr-render-error { position: absolute; z-index: 4; inset: 15px; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 18px; color: #273129; background: rgba(255,255,255,.94); text-align: center; font-size: 12px; line-height: 1.45; }
.qr-render-error[hidden] { display: none; }
.qr-render-error button { padding: 7px 12px; border: 1px solid rgba(16,21,17,.2); border-radius: 9px; color: #101511; background: #eef8da; font: inherit; font-weight: 800; cursor: pointer; }
.qr-render-error button:focus-visible { outline: 3px solid rgba(16,21,17,.25); outline-offset: 2px; }
.ready-label { position: relative; z-index: 2; display: flex; align-items: center; gap: 7px; min-height: 19px; margin-top: 18px; color: #cbd4cd; font-size: 12px; }
.ready-label[hidden] { display: flex; visibility: hidden; }
.ready-label b { font: inherit; font-weight: inherit; }
.ready-label span { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; color: #10150f; background: var(--accent); font-weight: 900; }
.qr-validation-summary { position: relative; z-index: 2; width: min(100%, 300px); margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; color: #cbd4cd; background: rgba(255,255,255,.025); font-size: 11px; line-height: 1.45; }
.qr-validation-summary[hidden] { display: none; }
.qr-validation-summary strong { display: block; color: var(--text); font-size: 12px; }
.qr-validation-summary[data-status="checked"] strong { color: var(--accent); }
.qr-validation-summary[data-status="attention"] { border-color: rgba(255,187,92,.28); }
.qr-validation-summary[data-status="attention"] strong { color: #ffd39a; }
.qr-validation-summary[data-status="unavailable"] strong { color: #cbd4cd; }
.qr-validation-summary ul { display: grid; gap: 4px; margin: 7px 0 0; padding-left: 17px; color: var(--muted); }
.qr-validation-summary ul[hidden] { display: none; }
.qr-validation-summary .button { width: 100%; margin-top: 9px; }
.preview-actions { position: relative; z-index: 2; width: min(100%, 300px); display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 16px; }
.icon-button { width: 64px; padding: 0; }
.text-button { position: relative; z-index: 2; margin-top: 14px; border: 0; color: #bec8c0; background: transparent; font-size: 12px; cursor: pointer; transition: color .3s ease; }
.text-button span { display: inline-block; margin-left: 5px; color: var(--accent); transition: transform .3s var(--ease); }
.text-button:hover { color: var(--text); }
.text-button:hover span { transform: translateX(4px); }

.proof-strip { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(4,1fr); margin-top: 54px; border: 1px solid var(--line); border-radius: 18px; background: rgba(10,14,11,.72); backdrop-filter: blur(12px); }
.proof-strip > div { display: grid; gap: 3px; padding: 18px 24px; border-right: 1px solid var(--line); }
.proof-strip > div:last-child { border-right: 0; }
.proof-strip strong { color: var(--accent); font-size: 17px; letter-spacing: -.03em; }
.proof-strip span { color: var(--muted); font-size: 11px; }

.section { position: relative; padding: 118px 0; }
.section-heading { max-width: 780px; margin-bottom: 54px; }
.section-heading.centered { margin-inline: auto; text-align: center; }
.section-heading.centered .eyebrow { justify-content: center; }
.section-heading h2, .dynamic-copy h2, .final-cta h2 { margin-top: 20px; font-size: var(--font-section-title); line-height: 1.04; }
.section-heading p, .dynamic-copy > p, .final-cta p { max-width: 650px; margin: 0; color: var(--muted); font-size: 17px; }
.section-heading.centered p { margin-inline: auto; }
.types-section { background: linear-gradient(180deg, rgba(16,21,17,.72), transparent 24%); }
.bento-grid { display: grid; grid-template-columns: repeat(4,1fr); grid-auto-rows: minmax(260px, auto); gap: 16px; }
.type-card { position: relative; min-width: 0; padding: 26px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, rgba(22,29,24,.94), rgba(13,18,15,.94)); overflow: hidden; transition: transform .45s var(--ease), border-color .35s ease, box-shadow .45s var(--ease), background-color .35s ease; }
.type-card:hover { transform: translateY(-5px); border-color: rgba(184,255,61,.34); box-shadow: 0 20px 50px rgba(0,0,0,.18); }
.type-card::after { content: ""; position: absolute; width: 160px; height: 160px; right: -80px; top: -80px; border-radius: 50%; background: rgba(184,255,61,.055); filter: blur(1px); transition: transform .6s var(--ease); }
.type-card:hover::after { transform: scale(1.25); }
.type-card-large { grid-column: span 2; grid-row: span 2; }
.type-card-wide { grid-column: span 2; }
.type-icon { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(184,255,61,.24); border-radius: 13px; color: var(--accent); background: rgba(184,255,61,.055); }
.type-icon .ui-icon { width: 21px; height: 21px; }
.card-number { position: absolute; top: 26px; right: 26px; color: #526057; font-size: 11px; font-weight: 800; letter-spacing: .1em; }
.type-card h3 { margin: 26px 0 10px; font-size: var(--font-card-title); letter-spacing: var(--heading-letter-spacing); overflow-wrap: anywhere; }
.type-card p { max-width: 390px; margin: 0; color: var(--muted); font-size: var(--font-secondary); }
.type-card button { position: absolute; z-index: 2; left: 26px; bottom: 26px; padding: 0; border: 0; color: #d9e1db; background: transparent; font-size: 13px; font-weight: 750; cursor: pointer; }
.type-card button span { color: var(--accent); margin-left: 5px; transition: transform .3s var(--ease); display: inline-block; }
.type-card button:hover span { transform: translateX(4px); }
.type-catalog-grid { grid-auto-rows: 1fr; }
.type-catalog-grid .type-card { min-height: 270px; padding-bottom: 66px; }
.type-card-tier { display: inline-flex; margin-top: 18px; padding: 6px 9px; border: 1px solid rgba(184,255,61,.16); border-radius: 999px; color: var(--muted); background: rgba(184,255,61,.035); font-size: 10px; font-weight: 750; letter-spacing: .04em; }
.type-card-action { position: absolute; z-index: 2; left: 26px; bottom: 26px; display: inline-flex; align-items: center; gap: 5px; color: #d9e1db; font-size: 13px; font-weight: 750; }
.type-card-action span { color: var(--accent); transition: transform .3s var(--ease); }
.type-card-action:hover span { transform: translateX(4px); }
.browser-visual { position: absolute; right: 30px; bottom: 32px; width: 55%; height: 130px; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background: #0a0e0b; box-shadow: 0 18px 35px rgba(0,0,0,.3); transform: rotate(-2deg); }
.browser-visual::before { content: ""; position: absolute; inset: 34px 14px 14px; border-radius: 10px; background: linear-gradient(135deg, rgba(184,255,61,.12), rgba(67,230,196,.05)); }
.browser-visual i { position: relative; z-index: 2; float: left; width: 6px; height: 6px; margin: 13px 0 0 6px; border-radius: 50%; background: #415047; }
.browser-visual i:first-child { margin-left: 13px; background: var(--danger); }
.browser-visual i:nth-child(2) { background: var(--warning); }
.browser-visual i:nth-child(3) { background: var(--success); }
.browser-visual b { position: absolute; z-index: 3; left: 28px; right: 28px; top: 62px; padding: 10px; border: 1px solid rgba(184,255,61,.18); border-radius: 8px; color: var(--accent); background: rgba(0,0,0,.25); font-size: 11px; text-align: center; }
.coming-badge { position: absolute; left: 26px; bottom: 26px; padding: 7px 10px; border: 1px solid rgba(184,255,61,.18); border-radius: 999px; color: #bdc8c0; background: rgba(184,255,61,.04); font-size: 10px; }

.workflow-section { background: var(--bg-2); border-block: 1px solid rgba(255,255,255,.025); }
.steps { display: grid; grid-template-columns: 1fr 100px 1fr 100px 1fr; align-items: center; gap: 8px; }
.step { position: relative; min-height: 300px; padding: 30px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(8,11,9,.56); transition: transform .45s var(--ease), border-color .35s ease; }
.step:hover { transform: translateY(-4px); border-color: rgba(184,255,61,.28); }
.step-index { position: absolute; right: 25px; top: 24px; color: #4f5a53; font-size: 12px; font-weight: 850; letter-spacing: .12em; }
.step-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 17px; color: #10150f; background: var(--accent); box-shadow: 0 10px 22px rgba(0,0,0,.16); }
.step-icon .ui-icon { width: 24px; height: 24px; }
.step h3 { margin: 72px 0 12px; font-size: var(--font-card-title); letter-spacing: var(--heading-letter-spacing); overflow-wrap: anywhere; }
.step p { margin: 0; color: var(--muted); font-size: var(--font-secondary); }
.step-connector { position: relative; height: 1px; background: repeating-linear-gradient(90deg, rgba(184,255,61,.3) 0 7px, transparent 7px 13px); }
.step-connector i { position: absolute; top: 50%; left: 0; width: 8px; height: 8px; border-radius: 2px; background: var(--accent); box-shadow: none; transform: translate3d(0,-50%,0); animation: connectorMove 3.2s linear infinite; }
@keyframes connectorMove { to { transform: translate3d(92px,-50%,0); } }

.dynamic-section { overflow: hidden; }
.dynamic-section::before { content: ""; position: absolute; width: 620px; height: 620px; right: -180px; top: 80px; border-radius: 50%; background: radial-gradient(circle, rgba(67,230,196,.09), transparent 68%); }
.dynamic-layout { display: grid; grid-template-columns: .82fr 1.18fr; align-items: center; gap: clamp(50px, 7vw, 100px); }
.dynamic-copy h2 { max-width: 570px; }
.feature-list { display: grid; gap: 18px; margin: 30px 0 34px; padding: 0; list-style: none; }
.feature-list li { display: flex; gap: 13px; }
.feature-list > li > span { flex: 0 0 24px; display: grid; place-items: center; width: 24px; height: 24px; margin-top: 2px; border-radius: 50%; color: #10150f; background: var(--accent); font-size: 12px; font-weight: 900; }
.feature-list div { display: grid; gap: 2px; }
.feature-list strong { font-size: 14px; }
.feature-list small { color: var(--muted); font-size: 12px; }
.dashboard-preview { position: relative; padding: 22px; border: 1px solid rgba(184,255,61,.2); border-radius: 28px; background: linear-gradient(145deg, rgba(22,29,24,.98), rgba(10,14,11,.98)); box-shadow: var(--shadow); }
.dashboard-preview::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; background: linear-gradient(135deg, rgba(184,255,61,.16), transparent 40%); filter: blur(18px); }
.dashboard-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid var(--line); font-size: 13px; }
.dashboard-preview-head > div:first-child { display: flex; align-items: center; gap: 9px; }
.mini-brand { width: 16px; height: 16px; border-radius: 4px 1px 4px 1px; background: var(--accent); transform: rotate(8deg); }
.period-pill { display: inline-flex; align-items: center; gap: 5px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); font-size: 10px; }
.period-pill .ui-icon { width: 13px; height: 13px; }
.metric-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin: 16px 0; }
.metric-card { display: grid; gap: 5px; min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 15px; background: rgba(0,0,0,.16); }
.metric-card span { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .07em; }
.metric-card strong { font-size: 24px; line-height: 1; letter-spacing: -.05em; }
.metric-card small { color: var(--accent); font-size: 9px; }
.chart-card { padding: 18px; border: 1px solid var(--line); border-radius: 17px; background: rgba(0,0,0,.18); }
.chart-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.chart-title > div { display: grid; gap: 3px; }
.chart-title strong { font-size: 12px; }
.chart-title small { color: var(--muted); font-size: 9px; }
.chart-title > span { color: var(--accent); font-size: 9px; }
.preview-chart { width: 100%; height: auto; margin-top: 12px; overflow: visible; }
.chart-grid-lines path { fill: none; stroke: rgba(255,255,255,.055); }
.chart-area { fill: url(#chartFill); }
.chart-line { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; }
.preview-chart circle { fill: var(--accent); stroke: #18201a; stroke-width: 3; }
.public-analytics-empty { margin: 10px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; text-align: center; }
.public-analytics-empty[hidden] { display: none; }
.dashboard-preview-bottom { display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 16px; margin-top: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(0,0,0,.14); }
.dashboard-preview-bottom > div:first-child { display: grid; gap: 2px; }
.dashboard-preview-bottom span { color: var(--muted); font-size: 9px; }
.dashboard-preview-bottom strong { font-size: 12px; }
.dashboard-preview-bottom > strong { color: var(--accent); font-size: 18px; }
.dashboard-preview-bottom small { color: var(--muted); font-size: 8px; font-weight: 500; }
.device-bars { display: grid; gap: 6px; }
.device-bars i { display: block; width: var(--w); height: 5px; border-radius: 5px; background: var(--accent); }
.device-bars i:last-child { background: var(--accent-2); }

.usecases-section { background: var(--bg-2); }
.usecase-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.usecase { border: 1px solid var(--line); border-radius: var(--radius); background: rgba(8,11,9,.58); overflow: hidden; transition: transform .45s var(--ease), border-color .35s ease; }
.usecase:hover { transform: translateY(-5px); border-color: rgba(184,255,61,.3); }
.usecase > div:last-child { padding: 23px 24px 27px; }
.usecase > div:last-child > span { color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.usecase h3 { margin: 9px 0 0; font-size: 18px; line-height: 1.35; letter-spacing: var(--heading-letter-spacing); overflow-wrap: anywhere; }
.usecase-art { position: relative; height: 260px; background: linear-gradient(145deg, #19221c, #0b0f0c); overflow: hidden; }
.usecase-art-icon { display: grid; place-items: center; isolation: isolate; }
.usecase-art-icon::before, .usecase-art-icon::after { content: ""; position: absolute; pointer-events: none; }
.usecase-art-icon::before { inset: 18% 14%; border: 1px solid rgba(184,255,61,.11); border-radius: 28px; background: linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.008)); box-shadow: inset 0 1px rgba(255,255,255,.04), 0 24px 50px rgba(0,0,0,.2); transform: rotate(-3deg); }
.usecase-art-icon::after { width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(184,255,61,.12), transparent 68%); filter: blur(2px); }
.usecase-visual { position: relative; z-index: 1; display: grid; place-items: center; width: 132px; height: 132px; border: 1px solid rgba(184,255,61,.25); color: var(--accent); background: rgba(8,12,9,.66); box-shadow: 0 22px 44px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.055); }
.usecase-primary-icon { width: 64px; height: 64px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.usecase-qr-mark { position: absolute; right: -17px; bottom: -17px; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; color: #10150f; background: var(--accent); box-shadow: 0 12px 24px rgba(0,0,0,.3); }
.usecase-qr-mark svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.restaurant-art .usecase-visual { border-radius: 38% 62% 54% 46% / 46% 42% 58% 54%; transform: rotate(-4deg); }
.restaurant-art .usecase-primary-icon, .restaurant-art .usecase-qr-mark { transform: rotate(4deg); }
.package-art::before { transform: rotate(3deg); border-radius: 22px; }
.package-art .usecase-visual { border-radius: 24px; transform: rotate(3deg); }
.package-art .usecase-primary-icon, .package-art .usecase-qr-mark { transform: rotate(-3deg); }
.event-art::before { border-radius: 30px 30px 18px 18px; transform: rotate(-2deg); }
.event-art .usecase-visual { border-radius: 30px 30px 18px 18px; transform: rotate(-2deg); }
.event-art .usecase-primary-icon, .event-art .usecase-qr-mark { transform: rotate(2deg); }

.pricing-section { overflow: hidden; }
.pricing-section::before { content: ""; position: absolute; left: 50%; top: 150px; width: 900px; height: 500px; transform: translateX(-50%); background: radial-gradient(ellipse, rgba(184,255,61,.06), transparent 68%); }
.pricing-grid { position: relative; display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,270px),286px)); justify-content: center; gap: 16px; align-items: stretch; }
.price-card { position: relative; display: flex; flex-direction: column; min-height: 510px; padding: 30px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, rgba(22,29,24,.96), rgba(12,16,13,.96)); transition: transform .45s var(--ease), border-color .35s ease; }
.price-card:hover { transform: translateY(-5px); border-color: rgba(184,255,61,.28); }
.price-card-featured { border-color: rgba(184,255,61,.48); box-shadow: 0 18px 42px rgba(0,0,0,.18); }
.popular-label { position: absolute; top: 18px; right: 18px; padding: 6px 9px; border-radius: 999px; color: #10150f; background: var(--accent); font-size: 9px; font-weight: 850; text-transform: uppercase; letter-spacing: .07em; }
.price-name { color: var(--accent); font-size: 11px; font-weight: 850; letter-spacing: .13em; line-height: 1.4; text-transform: uppercase; overflow-wrap: anywhere; }
.price-card h3 { margin: 18px 0 10px; font-size: 38px; line-height: 1; letter-spacing: -.035em; }
.price-card h3 small { color: var(--muted); font-size: 12px; font-weight: 500; letter-spacing: 0; }
.price-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
.price-card ul { display: grid; gap: 13px; margin: 36px 0; padding: 28px 0 0; border-top: 1px solid var(--line); list-style: none; color: #d2dad4; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.price-card li::first-letter { color: var(--accent); }
.price-card .button { margin-top: auto; width: 100%; }
.button:disabled, .price-coming-soon { cursor: not-allowed; opacity: .58; transform: none; box-shadow: none; }
.pricing-note { margin: 18px 0 0; color: #6f7a72; font-size: 11px; text-align: center; }

.faq-section { background: var(--bg-2); }
.faq-layout { display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(50px, 8vw, 110px); align-items: start; }
.faq-layout .section-heading { position: sticky; top: calc(var(--header-height) + 40px); margin-bottom: 0; }
.faq-list { border-top: 1px solid var(--line); }
details { border-bottom: 1px solid var(--line); }
summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 82px; padding: 20px 0; font-weight: 750; font-size: 16px; cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary span { position: relative; flex: 0 0 32px; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 50%; transition: border-color .3s ease, background-color .3s ease, transform .4s var(--ease); }
summary span::before, summary span::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1px; background: var(--accent); transform: translate(-50%,-50%); }
summary span::after { transform: translate(-50%,-50%) rotate(90deg); transition: transform .3s var(--ease); }
summary[aria-expanded="true"] span { border-color: rgba(184,255,61,.35); background: rgba(184,255,61,.05); transform: rotate(180deg); }
summary[aria-expanded="true"] span::after { transform: translate(-50%,-50%) rotate(0); }
.faq-answer { overflow: clip; }
.faq-answer > div { min-height: 0; }
.faq-list.faq-animated .faq-answer { height: 0; }
.faq-list.faq-animated .faq-answer > div { opacity: 0; transform: translateY(-6px); }
.faq-answer p { margin: -4px 50px 0 0; padding: 0 0 26px; color: var(--muted); font-size: 14px; }

.final-cta { padding: 86px 0; }
.final-cta-inner { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 60px; min-height: 420px; padding: clamp(42px, 6vw, 78px); border: 1px solid rgba(184,255,61,.25); border-radius: 34px; background: linear-gradient(135deg, #151e18, #0a0f0c); overflow: hidden; box-shadow: 0 22px 54px rgba(0,0,0,.22); }
.final-cta-inner::before { content: ""; position: absolute; width: 500px; height: 500px; right: -160px; top: -170px; border-radius: 50%; background: radial-gradient(circle, rgba(184,255,61,.17), transparent 68%); }
.cta-grid { opacity: .18; mask-image: linear-gradient(90deg, transparent, black); }
.final-cta-inner > div:not(.cta-grid) { position: relative; z-index: 2; }
.final-cta h2 { max-width: 720px; }
.final-cta p { margin-bottom: 30px; }
.cta-qr { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 18px; border: 1px solid rgba(255,255,255,.12); border-radius: 24px; background: rgba(255,255,255,.04); transform: rotate(4deg); }
.fake-qr { width: 190px; height: 190px; padding: 12px; border-radius: 14px; background-color: #fff; background-image: repeating-conic-gradient(#101511 0 25%, transparent 0 50%); background-size: 18px 18px; box-shadow: inset 0 0 0 13px #fff; }
.cta-qr span { color: var(--accent); font-size: 9px; font-weight: 850; letter-spacing: .18em; }

.site-footer { padding: 70px 0 24px; border-top: 1px solid var(--line); background: #060806; }
.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(3,1fr); gap: 50px; }
.footer-grid > div { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; }
.footer-grid p { max-width: 310px; margin: 12px 0 0; color: var(--muted); font-size: 13px; }
.footer-grid strong { margin-bottom: 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }
.footer-grid a:not(.brand) { color: var(--muted); font-size: 13px; transition: color .3s ease, transform .3s var(--ease); }
.footer-grid a:not(.brand):hover { color: var(--text); transform: translateX(3px); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 55px; padding-top: 22px; border-top: 1px solid var(--line); color: #657068; font-size: 11px; }

.modal { position: fixed; z-index: 300; inset: 0; display: grid; align-items: start; justify-items: center; overflow-y: auto; overscroll-behavior: contain; padding: 20px; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s ease; }
.modal.is-open { opacity: 1; visibility: visible; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(2,4,3,.78); backdrop-filter: blur(12px); contain: paint; }
.auth-card { position: relative; z-index: 2; width: min(100%, 460px); margin: auto; overflow: visible; padding: 34px; border: 1px solid rgba(184,255,61,.22); border-radius: 26px; background: linear-gradient(145deg, #19211b, #0e130f); box-shadow: var(--shadow-modal); transform: translateY(18px) scale(.98); transition: transform .45s var(--ease); }
.modal.is-open .auth-card { transform: translateY(0) scale(1); }
.modal-close { position: absolute; right: 16px; top: 16px; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--line); border-radius: 11px; color: var(--muted); background: rgba(255,255,255,.03); line-height: 0; cursor: pointer; transition: color .3s ease, border-color .3s ease, transform .3s var(--ease); }
.modal-close svg { width: 16px; height: 16px; }
.modal-close:hover { color: var(--text); border-color: rgba(184,255,61,.35); transform: rotate(5deg); }
.auth-brand { margin-bottom: 24px; }
.auth-card h2 { margin: 0 0 8px; font-size: 30px; letter-spacing: -.024em; }
.auth-card > p { margin: 0 0 22px; color: var(--muted); font-size: 14px; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 5px; border-radius: 13px; background: rgba(0,0,0,.24); }
.auth-tabs button { min-height: 40px; border: 0; border-radius: 9px; color: var(--muted); background: transparent; font-size: 12px; font-weight: 750; cursor: pointer; transition: color .25s ease, background-color .25s ease; }
.auth-tabs button.is-active { color: #11160f; background: var(--accent); }
.auth-form { display: grid; gap: 13px; margin-top: 18px; }
.auth-form[hidden] { display: none !important; }
.auth-form label { display: grid; gap: 7px; color: #bdc7bf; font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .07em; }
.auth-form .button { width: 100%; margin-top: 5px; }
.auth-card > small { display: block; margin-top: 16px; color: #68746c; font-size: 10px; text-align: center; }
.form-message { min-height: 20px; margin-top: 10px; color: var(--danger); font-size: var(--font-error); text-align: center; }
.form-message.is-success { color: var(--success); }

.toast-stack { position: fixed; z-index: 500; right: 20px; bottom: 20px; display: grid; gap: 10px; width: min(380px, calc(100% - 40px)); contain: layout paint; }
.toast { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 15px 16px; border: 1px solid var(--line); border-radius: 14px; color: #dce4de; background: rgba(20,27,22,.95); box-shadow: 0 14px 32px rgba(0,0,0,.26); backdrop-filter: blur(12px); line-height: 1.45; overflow-wrap: anywhere; animation: toastIn .45s var(--ease) both; }
.toast-icon { width: 22px; height: 22px; color: var(--accent); }
.toast.is-error .toast-icon { color: var(--danger); }
.toast > span { min-width: 0; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
@keyframes toastIn { from { opacity: 0; transform: translateY(16px) scale(.98); } }

.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--delay, 0ms); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Dashboard */
.dashboard-body { background: #090d0a; }
.dashboard-app { min-height: 100vh; min-height: 100svh; min-height: 100dvh; display: grid; grid-template-columns: 250px 1fr; }
.dashboard-sidebar { position: sticky; top: 0; height: 100vh; height: 100svh; height: 100dvh; min-height: 0; display: flex; flex-direction: column; overflow: hidden; padding: 24px 18px; border-right: 1px solid var(--line); background: #0c110d; }
.dashboard-sidebar .brand { margin: 0 10px 34px; }
.dashboard-nav { display: grid; gap: 6px; }
.dashboard-nav a, .dashboard-nav button { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 13px; border: 1px solid transparent; border-radius: 12px; color: var(--muted); background: transparent; font-size: 13px; font-weight: 650; cursor: pointer; transition: color .3s ease, background-color .3s ease, border-color .3s ease; }
.dashboard-nav a span, .dashboard-nav button span { display: grid; place-items: center; flex: 0 0 22px; width: 22px; color: #6e7b72; text-align: center; }
.dashboard-nav a span .ui-icon, .dashboard-nav button span .ui-icon { width: 18px; height: 18px; }
.dashboard-nav a:hover, .dashboard-nav button:hover, .dashboard-nav a.is-active { color: var(--text); background: rgba(184,255,61,.055); border-color: rgba(184,255,61,.12); }
.dashboard-nav a.is-active span { color: var(--accent); }
.sidebar-user { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 14px 10px; border-top: 1px solid var(--line); }
.user-avatar { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 12px; color: #10150f; background: var(--accent); font-weight: 850; }
.sidebar-user div { min-width: 0; display: grid; }
.sidebar-user strong { font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }
.sidebar-user small { color: var(--muted); font-size: 10px; line-height: 1.4; overflow-wrap: anywhere; }

.admin-body .dashboard-sidebar .brand { flex: 0 0 auto; margin-bottom: 20px; }
.admin-body .dashboard-nav-primary { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding-right: 4px; }
.admin-body .dashboard-nav-primary::-webkit-scrollbar { width: 8px; }
.admin-body .dashboard-nav-primary::-webkit-scrollbar-thumb { border: 2px solid #0c110d; border-radius: 999px; background: #344038; }
.admin-body .sidebar-user { flex: 0 0 auto; margin-top: 12px; }
.admin-body .dashboard-sidebar > .dashboard-nav:last-child { flex: 0 0 auto; margin-top: 2px; }
.dashboard-main { min-width: 0; padding: 30px clamp(22px, 4vw, 50px) 60px; }
.dashboard-topbar { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin-bottom: 30px; }
.dashboard-topbar h1 { margin: 0 0 4px; font-size: clamp(28px,3vw,40px); letter-spacing: -.025em; }
.dashboard-topbar p { margin: 0; color: var(--muted); font-size: var(--font-secondary); }
.dashboard-top-actions { display: flex; gap: 10px; }
.dashboard-stats { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 14px; }
.stat-card { position: relative; min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: 17px; background: #111713; overflow: hidden; }
.stat-card::after { content: ""; position: absolute; width: 80px; height: 80px; right: -35px; top: -35px; border-radius: 50%; background: rgba(184,255,61,.06); }
.stat-card span { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.stat-card strong { display: block; margin-top: 10px; font-size: 30px; line-height: 1; letter-spacing: -.035em; }
.stat-card small { display: block; margin-top: 8px; color: #6f7b73; font-size: 10px; }
.dashboard-grid { display: grid; grid-template-columns: 1.45fr .55fr; gap: 14px; margin-top: 14px; }
.panel { min-width: 0; padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: #111713; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.panel-head h2 { margin: 0; font-size: 16px; letter-spacing: -.012em; }
.panel-head p { margin: 3px 0 0; color: var(--muted); font-size: var(--font-label); }
.panel-select { min-width: 110px; width: auto; height: 40px; color: var(--muted); font-size: var(--font-field); }
.dashboard-chart { width: 100%; height: 260px; }
.device-panel { display: flex; flex-direction: column; }
.donut-wrap { position: relative; width: 180px; height: 180px; margin: 14px auto 24px; }
.donut { width: 100%; height: 100%; border-radius: 50%; background: conic-gradient(var(--accent) 0 var(--mobile,70%), var(--accent-2) var(--mobile,70%) 100%); }
.donut::after { content: ""; position: absolute; inset: 28px; border-radius: 50%; background: #111713; }
.donut-center { position: absolute; z-index: 2; inset: 0; display: grid; place-content: center; text-align: center; }
.donut-center strong { font-size: 28px; letter-spacing: -.035em; }
.donut-center span { color: var(--muted); font-size: 9px; }
.legend { display: grid; gap: 10px; margin-top: auto; }
.legend div { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 11px; }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend i { width: 8px; height: 8px; border-radius: 2px; background: var(--accent); }
.legend div:last-child i { background: var(--accent-2); }
.codes-section { margin-top: 14px; }
.codes-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.codes-toolbar h2 { margin: 0; font-size: 18px; }
.search-box { position: relative; width: min(280px,100%); }
.search-box input { height: 40px; padding-left: 38px; font-size: var(--font-field); }
.search-box span { position: absolute; left: 14px; top: 50%; display: grid; place-items: center; color: var(--muted); transform: translateY(-50%); }
.search-box span .ui-icon { width: 16px; height: 16px; }
.codes-list { display: grid; gap: 10px; }
.code-row { display: grid; grid-template-columns: auto minmax(180px,1.5fr) minmax(130px,1fr) 100px 110px auto; align-items: center; gap: 16px; min-width: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 15px; background: #111713; transition: border-color .3s ease, transform .35s var(--ease); }
.code-row:hover { border-color: rgba(184,255,61,.25); transform: translateY(-2px); }
.code-thumb { width: 52px; height: 52px; padding: 5px; border-radius: 10px; background: #fff; }
.code-thumb img { width: 100%; height: 100%; object-fit: contain; }
.code-main { min-width: 0; }
.code-main strong { display: block; font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
.code-meta { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.45; overflow-wrap: anywhere; }
.code-main a { display: block; margin-top: 3px; color: var(--accent); font-size: 9px; line-height: 1.4; overflow-wrap: anywhere; }
.code-destination { min-width: 0; color: var(--muted); font-size: 10px; line-height: 1.4; overflow-wrap: anywhere; }
.status-badge { justify-self: start; padding: 6px 9px; border-radius: 999px; color: var(--success); background: rgba(71,223,138,.08); font-size: var(--font-badge); font-weight: 800; text-transform: uppercase; }
.status-badge.is-paused { color: var(--warning); background: rgba(255,202,99,.08); }
.code-scans { text-align: right; }
.code-scans strong { display: block; font-size: 15px; }
.code-scans span { color: var(--muted); font-size: 9px; }
.code-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.action-button { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: transparent; cursor: pointer; transition: color .3s ease, border-color .3s ease, background-color .3s ease; }
.action-button:hover { color: var(--text); border-color: rgba(184,255,61,.3); background: rgba(184,255,61,.05); }
.action-button.is-danger:hover { color: var(--danger); border-color: rgba(255,102,122,.3); background: rgba(255,102,122,.05); }
.empty-state { padding: 60px 24px; border: 1px dashed var(--line); border-radius: 18px; color: var(--muted); text-align: center; }
.empty-state strong { display: block; margin-bottom: 7px; color: var(--text); font-size: 17px; }
.dashboard-mobile-nav { display: none; }
.dashboard-modal .auth-card { width: min(100%,520px); }
.dashboard-modal .auth-card h2 { margin-bottom: 18px; }
.dashboard-form { display: grid; gap: 14px; }
.dashboard-form label { display: grid; gap: 7px; color: #bdc7bf; font-size: var(--font-label); font-weight: 750; text-transform: uppercase; letter-spacing: .07em; }
.dashboard-form .button { width: 100%; margin-top: 4px; }
.qr-mini-preview { display: grid; grid-template-columns: 84px 1fr; align-items: center; gap: 16px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: rgba(0,0,0,.18); }
.qr-mini-preview img { width: 84px; height: 84px; padding: 7px; border-radius: 10px; background: #fff; }
.qr-mini-preview div { min-width: 0; }
.qr-mini-preview strong { display: block; font-size: 12px; }
.qr-mini-preview span { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.4; overflow-wrap: anywhere; }
.checkbox-line { display: flex !important; grid-template-columns: none !important; align-items: flex-start; gap: 9px !important; color: var(--muted) !important; font-size: var(--font-label) !important; font-weight: 500 !important; line-height: 1.45; letter-spacing: 0 !important; text-transform: none !important; }
.checkbox-line input { flex: 0 0 auto; width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--accent); }
.checkbox-line span { min-width: 0; }
.verification-resend { display: block; width: 100%; margin-top: 8px; color: var(--accent); font-size: 11px; text-align: center; }
.verification-resend[hidden] { display: none !important; }
.verification-resend:hover { color: var(--text); }
.button.is-disabled { cursor: not-allowed; opacity: .52; pointer-events: none; }
.guest-claim-panel { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 14px; }
.guest-claim-panel h2 { margin: 0 0 4px; font-size: 16px; }
.guest-claim-panel p { margin: 0; color: var(--muted); font-size: 12px; }
.pro-design-box { display: grid; gap: 11px; margin-top: 2px; padding: 14px; border: 1px solid rgba(184,255,61,.18); border-radius: 14px; background: rgba(184,255,61,.035); }
.pro-design-box.is-locked { border-color: var(--line); opacity: 1; background: rgba(0,0,0,.14); }
.pro-design-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--text); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.pro-design-head b, .ai-pro-badge { flex: 0 0 auto; margin-left: auto; padding: 4px 7px; border-radius: 999px; color: #10150f; background: var(--accent); font-size: 9px; letter-spacing: .04em; }
.pro-design-box small { color: var(--muted); font-size: 10px; }
.gradient-controls { margin-top: 0; }
.gradient-direction-field { margin-top: 0; }
.pro-design-box.is-locked [data-gradient-controls] { display: none !important; }
.pro-design-box.is-locked .checkbox-line { pointer-events: none; }
.pro-design-box.is-locked input:disabled, .pro-design-box.is-locked select:disabled { cursor: not-allowed; opacity: .42; filter: grayscale(1); }
.pro-lock-note { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 7px 9px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.pro-lock-note a { flex-basis: 100%; margin-left: 24px; color: var(--accent); font-weight: 750; transition: color .3s ease; }
.pro-lock-note a:hover { color: var(--text); }
.code-thumb-placeholder { display: grid; place-items: center; width: 100%; height: 100%; color: #101511; font-size: 10px; font-weight: 850; }
.code-expiry { color: var(--muted); font-size: 9px; white-space: nowrap; }
.break-anywhere, .admin-table td, .admin-table th { overflow-wrap: anywhere; }

/* Superadmin */
.admin-main { max-width: 1600px; }
.admin-toolbar { min-width: 0; padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: #111713; }
.admin-toolbar-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.admin-toolbar-head h2 { margin: 0; font-size: 18px; }
.admin-toolbar-head p { margin: 4px 0 0; color: var(--muted); font-size: var(--font-label); }
.admin-toolbar-head > *, .panel-head > *, .dashboard-topbar > *, .dashboard-top-actions { min-width: 0; }
.admin-toolbar-head h2, .admin-toolbar-head p, .panel-head h2, .panel-head p, .dashboard-topbar h1, .dashboard-topbar p { overflow-wrap: anywhere; }
.admin-filters { display: grid; grid-template-columns: minmax(220px,1.6fr) repeat(3,minmax(130px,1fr)); gap: 10px; margin-bottom: 16px; }
.admin-filters:has([data-user-status]) { grid-template-columns: minmax(220px,1.6fr) repeat(4,minmax(120px,1fr)); }
.admin-bulk-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; min-width: 0; margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(0,0,0,.12); }
.admin-bulk-bar strong { margin-right: auto; font-size: 12px; }
.admin-bulk-bar select { min-width: min(230px,100%); }
.admin-table input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--accent); }
.account-status { display: inline-flex; max-width: 100%; padding: 5px 8px; border-radius: 999px; background: rgba(184,255,61,.1); color: var(--accent); font-size: 9px; font-weight: 800; overflow-wrap: anywhere; }
.account-status.is-frozen { background: rgba(255,185,70,.12); color: #ffc36b; }
.account-status.is-deleted { background: rgba(255,90,90,.12); color: #ff8c8c; }
.admin-consequences { display: grid; gap: 7px; margin: 14px 0; padding-left: 20px; color: var(--muted); font-size: 12px; }
.admin-confirm-extra { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-bottom: 14px; }
.admin-detail-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.admin-history-list { display: grid; gap: 8px; }
.admin-history-list > div { min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 10px; }
.admin-history-list span { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; overflow-wrap: anywhere; }
.cleanup-preview-wrap { margin-top: 16px; }
.admin-filters select { min-width: 0; height: 40px; padding-inline: 12px; font-size: var(--font-field); }
.admin-table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; }
.admin-table { width: 100%; min-width: 920px; border-collapse: collapse; font-size: 11px; }
.admin-table th { padding: 12px; color: var(--muted); background: rgba(0,0,0,.15); font-size: 9px; font-weight: 750; letter-spacing: .07em; text-align: left; text-transform: uppercase; }
.admin-table td { padding: 12px; border-top: 1px solid rgba(41,51,44,.7); vertical-align: middle; }
.admin-user-link { display: grid; gap: 2px; max-width: 260px; padding: 0; border: 0; color: var(--text); background: transparent; cursor: pointer; text-align: left; }
.admin-user-link strong { line-height: 1.4; overflow-wrap: anywhere; }
.admin-user-link small { color: var(--muted); line-height: 1.4; overflow-wrap: anywhere; }

.admin-users-table { min-width: 1180px; table-layout: auto; }
.admin-users-table th, .admin-users-table td { overflow-wrap: normal; word-break: normal; }
.admin-users-table .admin-col-select { width: 44px; min-width: 44px; text-align: center; }
.admin-users-table .admin-col-user { width: 28%; min-width: 250px; }
.admin-users-table .admin-col-status { min-width: 105px; white-space: nowrap; }
.admin-users-table .admin-col-verified { min-width: 125px; white-space: nowrap; }
.admin-users-table .admin-col-date { min-width: 142px; white-space: nowrap; }
.admin-users-table .admin-col-plan { min-width: 76px; white-space: nowrap; }
.admin-users-table .admin-col-subscription { min-width: 105px; overflow-wrap: anywhere; }
.admin-users-table .admin-col-codes { min-width: 72px; white-space: nowrap; }
.admin-users-table .admin-col-actions { width: 58px; min-width: 58px; text-align: center; }
.admin-users-table .admin-user-link { width: 100%; max-width: none; }
.admin-users-table .admin-user-link strong,
.admin-users-table .admin-user-link small { white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
.admin-pagination { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; color: var(--muted); font-size: 11px; }
.admin-pagination > div { display: flex; gap: 8px; }
.admin-settings { margin-top: 14px; }
.admin-settings-form { display: grid; gap: 16px; }
.admin-settings-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px; }
.admin-settings-grid label { display: grid; gap: 7px; min-width: 0; color: var(--muted); font-size: var(--font-label); }
.admin-settings-grid input { min-width: 0; }
.plan-matrix-wrap { width: 100%; overflow-x: auto; }
.plan-matrix { width: 100%; min-width: 980px; border-collapse: collapse; font-size: 10px; }
.plan-matrix th, .plan-matrix td { min-width: 0; padding: 10px; border: 1px solid var(--line); line-height: 1.4; text-align: center; overflow-wrap: anywhere; }
.plan-matrix th > span { display: block; }
.plan-matrix th:first-child, .plan-matrix td:first-child { position: sticky; left: 0; z-index: 1; background: #111713; text-align: left; }
.plan-matrix input[type="number"] { width: 100px; }
.plan-limit-control { display: grid; justify-items: center; gap: 7px; min-width: 0; }
.plan-limit-control .checkbox-line { align-items: center; max-width: 130px; }
.plan-status { display: block; min-height: 14px; margin-top: 5px; color: var(--accent); font-size: 8px; font-weight: 750; text-transform: uppercase; }
.plan-status.is-disabled { color: #ff9b9b; }
.plan-status.is-coming { color: var(--warning); }
.plan-user-count { display: block; min-height: 14px; margin-top: 5px; color: var(--muted); font-size: 8px; white-space: nowrap; }
.matrix-check, .plan-toggle { position: relative; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; cursor: pointer; vertical-align: middle; }
.matrix-check input, .plan-toggle input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.matrix-check > span { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid #536057; border-radius: 7px; color: transparent; background: #0d120e; transition: color .2s ease, border-color .2s ease, background-color .2s ease, transform .2s ease; }
.matrix-check > span .ui-icon { width: 14px; height: 14px; stroke-width: 2; }
.matrix-check:hover > span { border-color: #829086; background: #141b16; }
.matrix-check input:checked + span { color: #10150f; border-color: var(--accent); background: var(--accent); }
.matrix-check input:focus-visible + span, .plan-toggle input:focus-visible + span { outline: 3px solid rgba(184,255,61,.45); outline-offset: 3px; }
.plan-toggle { width: 42px; }
.plan-toggle > span { position: relative; width: 38px; height: 22px; border: 1px solid #536057; border-radius: 999px; background: #0d120e; transition: border-color .2s ease, background-color .2s ease; }
.plan-toggle > span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #89928b; transition: transform .22s ease, background-color .22s ease; }
.plan-toggle:hover > span { border-color: #829086; }
.plan-toggle input:checked + span { border-color: var(--accent); background: rgba(184,255,61,.18); }
.plan-toggle input:checked + span::after { background: var(--accent); transform: translateX(16px); }
.promo-form { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,180px),1fr)); gap: 10px; }
.promo-form > * { min-width: 0; }
.promo-list { display: grid; gap: 8px; }
.promo-list > div { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 10px; font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
.faq-editor-form { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.faq-editor-form > label:not(.checkbox-line) { display: grid; gap: 7px; color: var(--muted); font-size: var(--font-label); }
.faq-admin-list { display: grid; gap: 10px; }
.faq-admin-item { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 18px; align-items: start; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(0,0,0,.1); }
.faq-admin-item.is-disabled { opacity: .62; }
.faq-admin-copy { min-width: 0; }
.faq-admin-copy > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.faq-admin-copy strong { overflow-wrap: anywhere; }
.faq-admin-copy small { flex: 0 0 auto; color: var(--accent); font-size: 9px; text-transform: uppercase; letter-spacing: .06em; }
.faq-admin-item.is-disabled small { color: var(--warning); }
.faq-admin-copy p { margin: 8px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.faq-admin-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; max-width: 330px; }
.faq-admin-actions .action-button { width: auto; min-width: 42px; padding-inline: 10px; }
.faq-admin-actions .action-button:disabled { cursor: not-allowed; opacity: .35; }
.admin-state { display: grid; place-items: center; gap: 6px; min-height: 120px; padding: 20px; color: var(--muted); text-align: center; }
.admin-state strong { color: var(--text); }
.admin-detail-card { width: min(100%,620px); }
.admin-detail-content h3 { margin: 24px 0 10px; font-size: 14px; }
.admin-detail-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 20px 0 0; }
.admin-detail-list div { min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 11px; background: rgba(0,0,0,.12); }
.admin-detail-list dt { color: var(--muted); font-size: 9px; text-transform: uppercase; }
.admin-detail-list dd { margin: 4px 0 0; font-size: 12px; }
.admin-code-list { display: grid; gap: 8px; max-height: 260px; overflow: auto; }
.admin-code-list > div { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 10px; font-size: 11px; overflow-wrap: anywhere; }
.admin-code-list span { min-width: 0; color: var(--muted); text-align: right; overflow-wrap: anywhere; }
.admin-ai-settings { display: grid; gap: 16px; margin-top: 6px; padding: 18px; border: 1px solid rgba(184,255,61,.18); border-radius: 15px; background: rgba(184,255,61,.03); }
.admin-ai-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.admin-ai-heading h3 { margin: 0; font-size: 15px; }
.admin-ai-heading p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.admin-settings-grid-ai { grid-template-columns: repeat(3,minmax(0,1fr)); }
.admin-settings-grid-ai label small { color: var(--muted); font-size: 9px; font-weight: 500; }
.admin-ai-toggles { display: flex; flex-wrap: wrap; gap: 12px 20px; }
.admin-help { color: var(--muted); font-size: 10px; line-height: 1.5; }
.ai-usage-panel { margin-top: 14px; }
.ai-metrics { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 10px; }
.ai-metric { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(0,0,0,.12); }
.ai-metric span { display: block; color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .06em; }
.ai-metric strong { display: block; margin-top: 8px; font-size: 20px; letter-spacing: -.04em; }
.ai-model-stats { display: grid; gap: 8px; margin-top: 12px; }
.ai-model-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 11px; color: var(--text); font-size: 11px; }
.ai-model-row span { color: var(--muted); text-align: right; }
.deepseek-log-tabs, .deepseek-log-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.deepseek-log-tabs .action-button, .deepseek-log-actions .action-button { width: auto; min-width: 44px; height: auto; min-height: 44px; padding: 8px 12px; line-height: 1.35; overflow-wrap: anywhere; }
.deepseek-log-tabs .is-active { color: var(--surface); background: var(--accent); border-color: var(--accent); }
.deepseek-log-filters { margin-bottom: 12px; }
.deepseek-log-table td { vertical-align: top; }
.deepseek-log-table td small { display: block; margin-top: 4px; color: var(--muted); }
.danger-button { color: #ff8f8f; border-color: rgba(255, 111, 111, .35); }
.admin-help.is-error { color: #ff9b9b; }
.ai-errors { margin-top: 18px; }
.ai-errors h3 { margin: 0 0 10px; font-size: 13px; }
.ai-errors-list { display: grid; gap: 8px; max-height: 340px; overflow: auto; }
.ai-error-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 11px 13px; border: 1px solid rgba(255,102,122,.18); border-radius: 11px; background: rgba(255,102,122,.035); }
.ai-error-row div { min-width: 0; display: grid; gap: 4px; }
.ai-error-row strong { color: var(--danger); font-size: 10px; }
.ai-error-row span, .ai-error-row small { color: var(--muted); font-size: 10px; }
.ai-error-row small { flex: 0 0 auto; text-align: right; }
.ai-design-panel { margin-top: 14px; }
.ai-input-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.ai-input-row textarea { min-height: 108px; resize: vertical; }
.ai-voice-button { align-self: end; white-space: nowrap; }
.ai-voice-button.is-recording { color: #10150f; background: var(--accent); }
.ai-voice-button span { color: var(--danger); }
.ai-actions { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.ai-actions [data-ai-voice-status] { color: var(--muted); font-size: 10px; }
.ai-palettes { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-top: 16px; }
.ai-palette-card { position: relative; display: grid; gap: 8px; min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(0,0,0,.14); overflow: hidden; }
.ai-palette-swatches { display: flex; height: 46px; border-radius: 9px; overflow: hidden; }
.ai-swatch { flex: 1; background: var(--swatch); }
.ai-palette-index { color: var(--accent); font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.ai-palette-card h3 { margin: 0; font-size: 14px; }
.ai-palette-card p, .ai-palette-card small { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.ai-palette-card .button { width: 100%; margin-top: 4px; }
.ai-locked-state { display: grid; gap: 5px; padding: 18px; border: 1px dashed var(--line); border-radius: 13px; color: var(--muted); font-size: 11px; }
.ai-locked-state strong { color: var(--text); font-size: 13px; }

@media (min-width: 821px) and (max-width: 1280px) {
  .header-inner { gap: 14px; }
  .main-nav { gap: clamp(10px, 1.4vw, 18px); }
  .main-nav a { font-size: 13px; }
  .nav-account-actions { gap: 6px; }
  .nav-account-actions .button, .header-cta { min-height: 40px; padding-inline: 12px; }
  .header-actions { gap: 7px; }
}

@media (max-width: 1080px) {
  .hero-layout { grid-template-columns: 1fr; }
  .hero-copy-rail { display: block; }
  .hero-copy { max-width: 850px; padding-bottom: 0; }
  .generator-preview-sticky { position: static; min-height: 565px; }
  .hero h1 { max-width: 780px; }
  .generator-shell { max-width: 840px; width: 100%; }
  .bento-grid { grid-template-columns: repeat(2,1fr); }
  .steps { grid-template-columns: 1fr 60px 1fr 60px 1fr; }
  .dynamic-layout { grid-template-columns: 1fr; }
  .dynamic-copy { max-width: 760px; }
  .dashboard-preview { max-width: 860px; }
  .dashboard-app { grid-template-columns: 210px 1fr; }
  .dashboard-topbar > div:first-child { flex: 1 1 280px; }
  .dashboard-top-actions { flex: 0 1 390px; max-width: 100%; flex-wrap: wrap; justify-content: flex-end; }
  .dashboard-top-actions .theme-toggle { flex: 0 0 auto; }
  .dashboard-top-actions .button { flex: 1 1 132px; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
  .dashboard-stats { grid-template-columns: repeat(2,1fr); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .device-panel { min-height: 360px; }
  .code-row { grid-template-columns: auto minmax(180px,1.5fr) minmax(130px,1fr) 90px auto; }
  .code-destination { display: none; }
  .admin-filters { grid-template-columns: 1fr 1fr; }
  .admin-filters:has([data-user-status]) { grid-template-columns: 1fr 1fr; }
  .admin-filters .search-box { grid-column: 1/-1; width: 100%; }
  .admin-settings-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .admin-settings-grid-ai { grid-template-columns: 1fr; }
  .ai-metrics { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (max-width: 820px) {
  :root { --header-height: 68px; }
  .container { width: min(calc(100% - 28px), var(--container)); }
  .header-inner { gap: 12px; }
  .main-nav { position: fixed; inset: var(--header-height) 14px auto; display: grid; gap: 4px; margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 18px; background: rgba(12,17,13,.97); box-shadow: 0 18px 42px rgba(0,0,0,.34); backdrop-filter: blur(18px); opacity: 0; visibility: hidden; transform: translateY(-12px); transition: opacity .3s ease, visibility .3s ease, transform .4s var(--ease); }
  .main-nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
  .main-nav a { padding: 13px 12px; border-radius: 10px; font-size: 14px; }
  .main-nav > a::after { display: none; }
  .main-nav > a:hover { background: rgba(184,255,61,.06); }
  .nav-account-actions { display: grid; gap: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
  .nav-account-actions .button { width: 100%; min-height: 44px; }
  .menu-toggle { display: grid; }
  .header-cta { display: none; }
  .hero { padding-top: calc(var(--header-height) + 48px); }
  .hero-copy { text-align: center; }
  .hero-copy .eyebrow, .hero-points { justify-content: center; }
  .eyebrow--target-right .eyebrow-arrow { transform: rotate(90deg); }
  .hero h1 { margin-inline: auto; }
  .hero-lead { margin-inline: auto; }
  .hero-actions-mobile { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
  .generator-content { grid-template-columns: 1fr; }
  .generator-controls { border-right: 0; border-bottom: 1px solid var(--line); }
  .generator-preview-sticky { min-height: 520px; }
  .proof-strip { grid-template-columns: repeat(2,1fr); }
  .proof-strip > div:nth-child(2) { border-right: 0; }
  .proof-strip > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .section { padding: 90px 0; }
  .steps { grid-template-columns: 1fr; }
  .step-connector { width: 1px; height: 48px; margin: 0 auto; background: repeating-linear-gradient(180deg, rgba(184,255,61,.3) 0 7px, transparent 7px 13px); }
  .step-connector i { left: 50%; top: 0; transform: translate3d(-50%,0,0); animation: connectorMoveVertical 2.4s linear infinite; }
  @keyframes connectorMoveVertical { to { transform: translate3d(-50%,40px,0); } }
  .usecase-grid { grid-template-columns: 1fr; }
  .usecase { display: grid; grid-template-columns: .8fr 1.2fr; min-height: 220px; }
  .usecase-art { height: 100%; min-height: 220px; }
  .usecase > div:last-child { display: flex; flex-direction: column; justify-content: center; }
  .price-card { min-height: 0; }
  .faq-layout { grid-template-columns: 1fr; gap: 24px; }
  .faq-layout .section-heading { position: static; }
  .final-cta-inner { grid-template-columns: 1fr; text-align: center; }
  .final-cta-inner .eyebrow { justify-content: center; }
  .final-cta p { margin-inline: auto; }
  .cta-qr { display: none; }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-grid > div:last-child { grid-column: 2/4; }
  .dashboard-app { display: block; }
  .dashboard-sidebar { display: none; }
  .dashboard-main { padding: 24px 16px calc(106px + env(safe-area-inset-bottom, 0px)); }
  .dashboard-mobile-nav { position: fixed; z-index: 120; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); display: grid; grid-template-columns: repeat(4,1fr); padding: 7px; border: 1px solid var(--line); border-radius: 18px; background: rgba(12,17,13,.98); box-shadow: 0 16px 38px rgba(0,0,0,.34); }
  .admin-body .dashboard-mobile-nav { grid-template-columns: repeat(5,1fr); }
  .admin-body { padding-bottom: calc(142px + env(safe-area-inset-bottom, 0px)); }
  .admin-mobile-tabs a, .admin-mobile-tabs button { min-width: 0; padding: 4px 3px; font-size: clamp(.625rem, 2.8vw, var(--font-badge)); line-height: 1.2; text-align: center; overflow-wrap: anywhere; }
  .admin-mobile-tabs span { font-size: 15px; }
  .dashboard-mobile-nav a, .dashboard-mobile-nav button { display: grid; place-items: center; gap: 2px; min-height: 50px; border: 0; border-radius: 12px; color: var(--muted); background: transparent; font-size: 11px; cursor: pointer; transition: color .25s ease, background-color .25s ease; }
  .dashboard-mobile-nav span { font-size: 18px; }
  .dashboard-mobile-nav .is-active, .dashboard-mobile-nav button:hover { color: #10150f; background: var(--accent); }
  .code-row { grid-template-columns: auto minmax(0,1fr) auto; gap: 12px; }
  .status-badge, .code-scans { display: none; }
  .guest-claim-panel { align-items: flex-start; flex-direction: column; }
  .ai-palettes { grid-template-columns: 1fr; }
  .ai-input-row { grid-template-columns: 1fr; }
  .ai-voice-button { width: 100%; }
  .ai-actions { align-items: stretch; flex-direction: column; }
  .ai-actions .button { width: 100%; }
  .ai-model-row, .ai-error-row { align-items: flex-start; flex-direction: column; }
  .ai-model-row span, .ai-error-row small { text-align: left; }
}

@media (max-width: 600px) {
  :root {
    --font-field: 1rem;
    --font-display: clamp(2.6875rem, 13vw, 3.875rem);
    --font-section-title: 2.4375rem;
  }
  .type-tabs { grid-template-columns: repeat(2,minmax(0,1fr)); margin-bottom: 18px; }
  .palette-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .menu-item-editor { grid-template-columns: 1fr; }
  .menu-item-editor .action-button { justify-self: end; }
  .brand { font-size: 18px; }
  .brand-mark { width: 26px; height: 26px; }
  .hero { padding-bottom: 30px; }
  .hero h1 { font-size: var(--font-display); }
  .hero-lead { font-size: 16px; }
  .hero-points { gap: 10px 16px; }
  .hero-actions-mobile { display: grid; }
  .generator-shell { border-radius: 24px; }
  .generator-topbar { padding-inline: 18px; }
  .generator-status { display: none; }
  .generator-controls { padding: 18px; }
  .field-row { grid-template-columns: 1fr; }
  .segmented-options span { min-height: 42px; padding-inline: 5px; }
  .color-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .color-field { grid-template-columns: 30px minmax(0, 1fr); column-gap: 7px; padding: 9px; font-size: 11px; }
  .color-field input { width: 28px; height: 28px; }
  .color-field > span { font-size: 11px; }
  .generator-preview-sticky { min-height: 450px; padding: 28px 18px; }
  .qr-frame { width: min(100%, 245px); }
  .proof-strip > div { padding: 15px 16px; }
  .section-heading { margin-bottom: 38px; }
  .section-heading h2, .dynamic-copy h2, .final-cta h2 { font-size: var(--font-section-title); }
  .bento-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .type-card, .type-card-large, .type-card-wide { grid-column: auto; grid-row: auto; min-height: 260px; }
  .type-card-large { min-height: 440px; }
  .browser-visual { right: 24px; bottom: 75px; width: calc(100% - 48px); }
  .metric-row { grid-template-columns: 1fr 1fr; }
  .metric-card:last-child { grid-column: 1/-1; }
  .dashboard-preview { padding: 14px; border-radius: 22px; }
  .chart-card { padding: 12px; }
  .dashboard-preview-bottom { grid-template-columns: 1fr auto; }
  .device-bars { display: none; }
  .usecase { grid-template-columns: 1fr; }
  .usecase-art { min-height: 230px; }
  .final-cta { padding: 60px 0; }
  .final-cta-inner { min-height: 0; padding: 42px 22px; border-radius: 26px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px 24px; }
  .footer-grid > div:first-child, .footer-grid > div:last-child { grid-column: 1/-1; }
  .footer-bottom { align-items: flex-start; flex-direction: column; }
  .auth-card { width: min(100%, 460px); padding: 24px 16px; }
  .auth-card h2 { font-size: 27px; }
  .auth-card > p { margin-bottom: 16px; font-size: 13px; }
  .auth-tabs button { min-height: 44px; font-size: 13px; }
  .auth-form { gap: 11px; margin-top: 14px; }
  .auth-form input { height: 44px; }
  .pro-lock-note a { margin-left: 0; }
  .dashboard-topbar { align-items: flex-start; flex-direction: column; }
  .dashboard-top-actions { width: 100%; flex-wrap: wrap; align-items: stretch; }
  .dashboard-top-actions .button { flex: 1 1 150px; min-width: 0; white-space: normal; }
  .dashboard-stats { grid-template-columns: 1fr 1fr; gap: 9px; }
  .stat-card { padding: 16px; }
  .stat-card strong { font-size: 25px; }
  .panel { padding: 16px; }
  .codes-toolbar { align-items: stretch; flex-direction: column; }
  .search-box { width: 100%; }
  .code-row { padding: 12px; }
  .code-thumb { width: 46px; height: 46px; }
  .qr-mini-preview { grid-template-columns: 70px 1fr; }
  .qr-mini-preview img { width: 70px; height: 70px; }
  .admin-toolbar, .admin-settings { padding: 16px; }
  .admin-toolbar-head { align-items: flex-start; flex-direction: column; }
  .admin-settings-grid { grid-template-columns: 1fr 1fr; }
  .faq-admin-item { grid-template-columns: 1fr; }
  .faq-admin-actions { justify-content: flex-start; max-width: none; }
  .admin-body .dashboard-main { padding-bottom: calc(205px + env(safe-area-inset-bottom, 0px)); }
  .admin-detail-list { grid-template-columns: 1fr; }
  .admin-confirm-extra { grid-template-columns: 1fr; }
  .admin-bulk-bar { align-items: stretch; flex-direction: column; }
  .admin-bulk-bar strong { margin-right: 0; }
  .admin-bulk-bar select, .admin-bulk-bar .button, .admin-bulk-bar .action-button { width: 100%; }
  .admin-pagination { align-items: flex-start; flex-direction: column; }
  .admin-filters { grid-template-columns: 1fr; }
  .admin-filters:has([data-user-status]) { grid-template-columns: 1fr; }
  .admin-filters .search-box { grid-column: auto; }
  .admin-mobile-tabs { grid-template-columns: repeat(5,minmax(0,1fr)); }
  .admin-body { padding-bottom: calc(168px + env(safe-area-inset-bottom, 0px)); }
  .panel-head { align-items: flex-start; flex-wrap: wrap; }
  .panel-head .button { max-width: 100%; white-space: normal; }
  input, textarea, select,
  .select-field select,
  .panel-select,
  .search-box input,
  .admin-filters select { font-size: var(--font-field); }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .main-nav, .proof-strip, .modal-backdrop, .toast { background-color: #101511; }
}

@supports not (mask-image: linear-gradient(black, transparent)) {
  .hero-grid, .cta-grid { opacity: .08; }
}

@media (hover: none) {
  .button:hover, .brand:hover .brand-mark i, .type-card:hover, .price-card:hover, .action-button:hover, .menu-toggle:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .preview-orbit, .step-connector i, .qr-loading span, .toast { animation: none; }
  .reveal { opacity: 1; transform: none; }
  summary span, summary span::after, .eyebrow-arrow { transition: none; }
}

@media (min-width: 1081px) {
  .hero-copy-rail { position: sticky; top: calc(var(--header-height) + 22px); align-self: start; display: flex; align-items: center; width: 100%; height: min(565px, calc(100vh - var(--header-height) - 44px)); height: min(565px, calc(100dvh - var(--header-height) - 44px)); }
  .hero-copy { position: static; width: 100%; padding-bottom: 0; }
}

.static-import-main { width: min(1080px, calc(100% - 32px)); margin: 0 auto; padding: 42px 0 72px; }
.static-import-page .dynamic-editor-header > .button { grid-column: 3; }
.codes-toolbar .button { max-width: 100%; white-space: normal; text-align: center; line-height: 1.25; }
.static-import-intro { display: grid; gap: 14px; }
.static-import-intro h1 { max-width: 820px; margin: 0; font-size: clamp(32px, 5vw, 56px); line-height: 1.02; letter-spacing: -.04em; }
.static-import-intro p { max-width: 860px; margin: 0; color: var(--muted); line-height: 1.65; overflow-wrap: anywhere; }
.static-import-plan-note { padding-left: 14px; border-left: 3px solid var(--accent); }
.static-import-workspace { margin-top: 20px; }
.static-import-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 14px; }
.static-import-drop { display: grid; min-width: 0; gap: 6px; padding: 18px; border: 1px dashed var(--line); border-radius: 18px; cursor: pointer; transition: border-color .2s ease, background-color .2s ease; }
.static-import-drop:hover, .static-import-drop:focus-within { border-color: var(--accent); background: rgba(184,255,61,.04); }
.static-import-drop span { color: var(--muted); font-size: 13px; }
.static-import-drop input { width: 100%; min-width: 0; margin-top: 6px; }
.static-import-form .form-message { grid-column: 1 / -1; }
.static-import-result { display: grid; grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr); gap: 24px; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.static-import-preview { display: grid; place-items: center; min-height: 280px; padding: 18px; border-radius: 20px; background: #fff; }
.static-import-preview img { display: block; width: 100%; max-width: 420px; max-height: 520px; object-fit: contain; }
.static-import-details { display: grid; align-content: start; min-width: 0; gap: 14px; }
.static-import-details h2 { margin: 0; }
.static-import-details > p { margin: 0; color: var(--muted); line-height: 1.55; }
.static-import-details pre { max-height: 260px; margin: 0; padding: 15px; overflow: auto; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.03); color: var(--text); font: inherit; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.static-import-details > label:not(.checkbox-line) { display: grid; gap: 7px; font-weight: 700; }
.static-import-details > label input[type="text"] { width: 100%; min-width: 0; }
.static-import-success { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 24px; padding: 22px; border: 1px solid rgba(184,255,61,.35); border-radius: 18px; background: rgba(184,255,61,.06); }
.static-import-success strong, .static-import-success p { width: 100%; margin: 0; }
.static-import-success p { color: var(--muted); line-height: 1.55; }

@media (max-width: 760px) {
  .static-import-page .dynamic-editor-header > .button { grid-column: 2; }
  .static-import-main { width: min(100% - 20px, 1080px); padding-top: 20px; }
  .static-import-form, .static-import-result { grid-template-columns: 1fr; }
  .static-import-form .button, .static-import-success .button { width: 100%; }
  .static-import-preview { min-height: 220px; }
}

/* Theme tokens. Dark values intentionally reproduce the original interface. */
:root {
  --on-accent: #10150f;
  --text-soft: #c3cbc5;
  --text-faint: #6f7b73;
  --page-dashboard: #090d0a;
  --surface-card: #111713;
  --surface-sidebar: #0c110d;
  --surface-control: rgba(5,8,6,.46);
  --surface-control-focus: rgba(5,8,6,.65);
  --surface-subtle: rgba(0,0,0,.14);
  --surface-subtle-strong: rgba(0,0,0,.22);
  --surface-glass: rgba(12,17,13,.97);
  --surface-popover: rgba(18,25,20,.98);
  --surface-toast: rgba(20,27,22,.95);
  --surface-overlay: rgba(2,4,3,.78);
  --surface-hover: rgba(184,255,61,.06);
  --surface-active: rgba(184,255,61,.10);
  --header-glass: rgba(8,11,9,.94);
  --line-soft: rgba(41,51,44,.7);
  --inset-highlight: rgba(255,255,255,.045);
  --control-fill: rgba(255,255,255,.045);
  --control-line: rgba(255,255,255,.1);
  --chart-grid: rgba(255,255,255,.06);
  --chart-label: #718078;
  --chart-line: #b8ff3d;
  --chart-fill-start: rgba(184,255,61,.30);
  --chart-fill-end: rgba(184,255,61,0);
  --shadow-modal: 0 24px 64px rgba(0,0,0,.44);
  --shadow-float: 0 16px 40px rgba(0,0,0,.38);
  --skeleton-base: #18201a;
  --skeleton-highlight: #273129;
  --redirect-surface: #101511;
  --redirect-muted: #abb6ae;
  --redirect-text: #d9e1db;
  --redirect-on-accent: #101511;
  --redirect-shadow: 0 18px 48px rgba(0,0,0,.42);
}

:root[data-theme="light"] {
  --bg: #f2f5ef;
  --bg-2: #e8eee6;
  --surface: #fbfcf9;
  --surface-2: #edf2ea;
  --accent: #426d00;
  --accent-2: #007e70;
  --text: #172019;
  --muted: #526158;
  --line: #cbd5cb;
  --danger: #b4233d;
  --warning: #815400;
  --success: #08733d;
  --on-accent: #ffffff;
  --text-soft: #405047;
  --text-faint: #65736a;
  --page-dashboard: #edf2eb;
  --surface-card: #fbfcf9;
  --surface-sidebar: #e5ece3;
  --surface-control: #f7f9f5;
  --surface-control-focus: #ffffff;
  --surface-subtle: rgba(35,56,41,.055);
  --surface-subtle-strong: rgba(35,56,41,.09);
  --surface-glass: rgba(248,250,246,.97);
  --surface-popover: rgba(251,252,249,.99);
  --surface-toast: rgba(251,252,249,.97);
  --surface-overlay: rgba(19,31,22,.56);
  --surface-hover: rgba(66,109,0,.075);
  --surface-active: rgba(66,109,0,.12);
  --header-glass: rgba(242,245,239,.94);
  --line-soft: rgba(117,136,122,.34);
  --inset-highlight: rgba(255,255,255,.7);
  --control-fill: rgba(255,255,255,.58);
  --control-line: rgba(66,82,70,.2);
  --chart-grid: rgba(45,68,51,.12);
  --chart-label: #647269;
  --chart-line: #426d00;
  --chart-fill-start: rgba(66,109,0,.24);
  --chart-fill-end: rgba(66,109,0,0);
  --shadow: 0 18px 46px rgba(38,57,43,.11);
  --shadow-modal: 0 22px 58px rgba(31,48,36,.18);
  --shadow-float: 0 14px 34px rgba(31,48,36,.15);
  --skeleton-base: #dfe6dd;
  --skeleton-highlight: #f7f9f5;
  --redirect-surface: #fbfcf9;
  --redirect-muted: #526158;
  --redirect-text: #405047;
  --redirect-on-accent: #ffffff;
  --redirect-shadow: 0 18px 44px rgba(38,57,43,.11);
}

.theme-toggle {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 13px;
  color: var(--text-soft);
  background: var(--control-fill);
  cursor: pointer;
  transition: color .25s ease, background-color .25s ease, border-color .25s ease, transform .25s var(--ease);
}
.theme-toggle:hover { color: var(--text); border-color: rgba(184,255,61,.35); background: var(--surface-hover); transform: translateY(-1px); }
.theme-toggle:active { transform: translateY(0) scale(.97); }
.theme-toggle:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 48%, transparent); outline-offset: 3px; }
.theme-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.theme-icon-moon { display: none; }
:root[data-theme="light"] .theme-icon-sun { display: none; }
:root[data-theme="light"] .theme-icon-moon { display: block; }

body { transition: color .25s ease, background-color .25s ease; }

:root[data-theme="light"] .site-noise { opacity: .024; background-image: radial-gradient(rgba(66,109,0,.24) .55px, transparent .7px), radial-gradient(rgba(23,32,25,.11) .45px, transparent .65px); }
:root[data-theme="light"] ::selection,
:root[data-theme="light"] .skip-link { color: var(--on-accent); }
:root[data-theme="light"] .site-header.is-scrolled { background: var(--header-glass); border-color: rgba(66,109,0,.16); }
:root[data-theme="light"] .main-nav a,
:root[data-theme="light"] .eyebrow,
:root[data-theme="light"] .hero-points,
:root[data-theme="light"] .generator-topbar,
:root[data-theme="light"] .ready-label,
:root[data-theme="light"] .text-button,
:root[data-theme="light"] .type-card button,
:root[data-theme="light"] .price-card ul { color: var(--text-soft); }
:root[data-theme="light"] .domain-verification-note { color: var(--text-soft); border-color: rgba(66,109,0,.22); background: rgba(251,252,249,.76); }
:root[data-theme="light"] .eyebrow { border-color: rgba(66,109,0,.18); background: rgba(66,109,0,.055); }
:root[data-theme="light"] .faq-admin-item { background: var(--surface-subtle); }
:root[data-theme="light"] .plan-status.is-coming { color: #765000; }
:root[data-theme="light"] .hero-lead,
:root[data-theme="light"] .field-group label,
:root[data-theme="light"] .select-field,
:root[data-theme="light"] .dashboard-form label,
:root[data-theme="light"] .auth-form label { color: var(--muted); }
:root[data-theme="light"] .menu-toggle,
:root[data-theme="light"] .button-secondary { background: var(--control-fill); }
:root[data-theme="light"] .button-ghost { color: var(--text-soft); border-color: var(--control-line); }
:root[data-theme="light"] .button-primary,
:root[data-theme="light"] .type-tab.is-active,
:root[data-theme="light"] .hero-points b,
:root[data-theme="light"] .ready-label span,
:root[data-theme="light"] .step-icon,
:root[data-theme="light"] .feature-list > li > span,
:root[data-theme="light"] .popular-label,
:root[data-theme="light"] .auth-tabs button.is-active,
:root[data-theme="light"] .toast::before,
:root[data-theme="light"] .user-avatar,
:root[data-theme="light"] .pro-design-head b,
:root[data-theme="light"] .ai-pro-badge,
:root[data-theme="light"] .matrix-check input:checked + span,
:root[data-theme="light"] .ai-voice-button.is-recording,
:root[data-theme="light"] .dashboard-mobile-nav .is-active,
:root[data-theme="light"] .dashboard-mobile-nav button:hover { color: var(--on-accent); }
:root[data-theme="light"] .button-primary:hover { background: #355c00; }
:root[data-theme="light"] .hero::after { background: linear-gradient(180deg, transparent, rgba(232,238,230,.86)); }
:root[data-theme="light"] .generator-shell { border-color: rgba(66,109,0,.24); background: linear-gradient(145deg, rgba(251,252,249,.98), rgba(232,238,230,.98)); box-shadow: var(--shadow), inset 0 1px var(--inset-highlight); }
:root[data-theme="light"] .type-tabs,
:root[data-theme="light"] .auth-tabs { background: var(--surface-subtle-strong); }
:root[data-theme="light"] input,
:root[data-theme="light"] textarea,
:root[data-theme="light"] select { color: var(--text); background: var(--surface-control); }
:root[data-theme="light"] input::placeholder,
:root[data-theme="light"] textarea::placeholder { color: #718078; opacity: 1; }
:root[data-theme="light"] input:focus,
:root[data-theme="light"] textarea:focus,
:root[data-theme="light"] select:focus { background: var(--surface-control-focus); box-shadow: 0 0 0 3px rgba(66,109,0,.28); }
:root[data-theme="light"] input:disabled,
:root[data-theme="light"] textarea:disabled,
:root[data-theme="light"] select:disabled,
:root[data-theme="light"] button:disabled { color: #768178; background-color: #e5eae3; border-color: #d0d8cf; opacity: .68; }
:root[data-theme="light"] select option { color: var(--text); background: var(--surface-card); }
:root[data-theme="light"] .preset-palettes button,
:root[data-theme="light"] .color-popover-native input,
:root[data-theme="light"] .qr-mini-preview,
:root[data-theme="light"] .pro-design-box.is-locked,
:root[data-theme="light"] .admin-bulk-bar,
:root[data-theme="light"] .admin-detail-list div,
:root[data-theme="light"] .ai-metric,
:root[data-theme="light"] .ai-palette-card { background: var(--surface-subtle); }
:root[data-theme="light"] .content-page,
:root[data-theme="light"] .dashboard-body { background: var(--page-dashboard); }
:root[data-theme="light"] .content-card,
:root[data-theme="light"] .stat-card,
:root[data-theme="light"] .panel,
:root[data-theme="light"] .code-row,
:root[data-theme="light"] .admin-toolbar,
:root[data-theme="light"] .plan-matrix th:first-child,
:root[data-theme="light"] .plan-matrix td:first-child,
:root[data-theme="light"] .donut::after { background: var(--surface-card); }
:root[data-theme="light"] .color-field:hover,
:root[data-theme="light"] .button-secondary:hover,
:root[data-theme="light"] .button-ghost:hover,
:root[data-theme="light"] .action-button:hover,
:root[data-theme="light"] .dashboard-nav a:hover,
:root[data-theme="light"] .dashboard-nav button:hover,
:root[data-theme="light"] .dashboard-nav a.is-active { background: var(--surface-hover); }
:root[data-theme="light"] .color-trigger,
:root[data-theme="light"] .color-field input::-webkit-color-swatch,
:root[data-theme="light"] .color-popover-presets button { border-color: var(--control-line); }
:root[data-theme="light"] .color-field > span,
:root[data-theme="light"] .select-field select { color: var(--text); }
:root[data-theme="light"] .color-popover { background: var(--surface-popover); box-shadow: var(--shadow-float), inset 0 1px var(--inset-highlight); }
:root[data-theme="light"] .color-popover-close { background: var(--control-fill); }
:root[data-theme="light"] .generator-preview { background: radial-gradient(circle at center, rgba(66,109,0,.10), transparent 58%); }
:root[data-theme="light"] .proof-strip { background: rgba(251,252,249,.76); }
:root[data-theme="light"] .types-section { background: linear-gradient(180deg, rgba(232,238,230,.9), transparent 24%); }
:root[data-theme="light"] .type-card,
:root[data-theme="light"] .price-card { background: linear-gradient(145deg, rgba(251,252,249,.99), rgba(232,238,230,.96)); box-shadow: 0 12px 34px rgba(38,57,43,.07); }
:root[data-theme="light"] .card-number,
:root[data-theme="light"] .step-index { color: #748178; }
:root[data-theme="light"] .browser-visual { border-color: var(--line); background: #e9eee7; box-shadow: 0 16px 34px rgba(38,57,43,.14); }
:root[data-theme="light"] .browser-visual i { background: #9aa69d; }
:root[data-theme="light"] .browser-visual b { background: rgba(251,252,249,.78); }
:root[data-theme="light"] .workflow-section,
:root[data-theme="light"] .usecases-section,
:root[data-theme="light"] .faq-section { background: var(--bg-2); }
:root[data-theme="light"] .workflow-section { border-block-color: rgba(66,82,70,.12); }
:root[data-theme="light"] .step,
:root[data-theme="light"] .usecase { background: rgba(251,252,249,.72); }
:root[data-theme="light"] .dashboard-preview { background: linear-gradient(145deg, rgba(251,252,249,.99), rgba(229,236,227,.99)); }
:root[data-theme="light"] .metric-card,
:root[data-theme="light"] .chart-card,
:root[data-theme="light"] .dashboard-preview-bottom { background: var(--surface-subtle); }
:root[data-theme="light"] .pricing-note,
:root[data-theme="light"] .footer-bottom,
:root[data-theme="light"] .auth-card > small,
:root[data-theme="light"] .stat-card small { color: var(--text-faint); }
:root[data-theme="light"] .final-cta-inner { background: linear-gradient(135deg, #e7eee3, #f8faf6); box-shadow: var(--shadow); }
:root[data-theme="light"] .cta-qr { border-color: var(--line); background: rgba(255,255,255,.58); }
:root[data-theme="light"] .site-footer { background: #e4ebe2; }
:root[data-theme="light"] .modal-backdrop { background: var(--surface-overlay); }
:root[data-theme="light"] .auth-card { background: linear-gradient(145deg, #fbfcf9, #e9efe7); box-shadow: var(--shadow-modal); }
:root[data-theme="light"] .modal-close { background: var(--control-fill); }
:root[data-theme="light"] .toast { color: var(--text); background: var(--surface-toast); box-shadow: 0 14px 32px rgba(31,48,36,.15); }
:root[data-theme="light"] .toast.is-error { border-color: rgba(180,35,61,.3); }
:root[data-theme="light"] .toast.is-error::before { color: #fff; }
:root[data-theme="light"] .dashboard-sidebar { background: var(--surface-sidebar); }
:root[data-theme="light"] .dashboard-nav a span,
:root[data-theme="light"] .dashboard-nav button span { color: #66746b; }
:root[data-theme="light"] .admin-table th { background: var(--surface-subtle-strong); }
:root[data-theme="light"] .admin-table td { border-top-color: var(--line-soft); }
:root[data-theme="light"] .matrix-check > span,
:root[data-theme="light"] .plan-toggle > span { border-color: #9caa9e; background: #f4f7f2; }
:root[data-theme="light"] .matrix-check:hover > span { border-color: #718078; background: #e8eee6; }
:root[data-theme="light"] .plan-toggle > span::after { background: #758278; }
:root[data-theme="light"] .account-status.is-frozen { color: #765000; }
:root[data-theme="light"] .account-status.is-deleted,
:root[data-theme="light"] .plan-status.is-disabled,
:root[data-theme="light"] .danger-button,
:root[data-theme="light"] .admin-help.is-error { color: var(--danger); }
:root[data-theme="light"] .deepseek-log-tabs .is-active { color: var(--on-accent); }
:root[data-theme="light"] .ai-error-row { border-color: rgba(180,35,61,.25); background: rgba(180,35,61,.05); }
:root[data-theme="light"] .main-nav { background-color: transparent; }
:root[data-theme="light"] .static-import-details pre { background: var(--surface-subtle); }
:root[data-theme="light"] .static-import-success { border-color: rgba(66,109,0,.35); background: rgba(66,109,0,.07); }

:root[data-theme="light"] .setting-help-trigger { color: #66746b; border-color: rgba(66,82,70,.22); background: rgba(255,255,255,.42); }
:root[data-theme="light"] .setting-help-trigger:hover, :root[data-theme="light"] .setting-help-trigger[aria-expanded="true"] { color: #426d00; border-color: rgba(66,109,0,.42); background: rgba(66,109,0,.07); }
:root[data-theme="light"] .setting-tooltip { color: var(--text); background: var(--surface-popover); }

.tooltip, [role="tooltip"] {
  max-width: min(280px, calc(100vw - 24px));
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--text);
  background: var(--surface-popover);
  box-shadow: var(--shadow-float);
  font-size: 11px;
  line-height: 1.45;
}

/* QR artwork stays neutral and independent from the interface theme. */
:root[data-theme="light"] .qr-frame,
:root[data-theme="light"] .code-thumb,
:root[data-theme="light"] .qr-mini-preview img,
:root[data-theme="light"] .static-import-preview { background: #fff; }
:root[data-theme="light"] .qr-loading { background: rgba(255,255,255,.82); }
:root[data-theme="light"] .qr-loading span { background: #101511; }
:root[data-theme="light"] .qr-render-error { color: #273129; background: rgba(255,255,255,.96); }

.skeleton, [data-skeleton] {
  color: transparent !important;
  background: linear-gradient(90deg, var(--skeleton-base) 25%, var(--skeleton-highlight) 42%, var(--skeleton-base) 60%);
  background-size: 300% 100%;
  animation: skeletonShift 1.35s ease-in-out infinite;
}
@keyframes skeletonShift { to { background-position: -150% 0; } }

@media (max-width: 820px) {
  :root[data-theme="light"] .main-nav,
  :root[data-theme="light"] .dashboard-mobile-nav { background: var(--surface-glass); box-shadow: 0 14px 34px rgba(31,48,36,.14); }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton, [data-skeleton] { animation: none; }
  .setting-tooltip { transition: none; transform: none; }
}

/* User profile */
.profile-panel { margin-bottom: 14px; scroll-margin-top: 20px; }
.profile-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: start; gap: 12px; }
.profile-form { display: grid; min-width: 0; gap: 11px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-subtle); }
.profile-form h3 { margin: 0; font-size: 14px; }
.profile-form > label { display: grid; gap: 7px; color: var(--muted); font-size: var(--font-label); font-weight: 700; }
.profile-form > small { color: var(--muted); font-size: 10px; line-height: 1.5; }
.profile-form .button { justify-self: start; }
.profile-form .form-message { min-height: 18px; margin: 0; text-align: left; }
.profile-form[aria-busy="true"] { opacity: .82; }

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

@media (max-width: 820px) {
  .dashboard-mobile-nav { grid-template-columns: repeat(5,1fr); }
}

/* PRO protected content */
.protected-panel { margin-bottom: 14px; scroll-margin-top: 20px; }
.protected-create-form { display: grid; gap: 14px; padding-top: 4px; }
.protected-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.protected-form-grid > label,
.protected-edit-form > label,
.protected-access-form > label { display: grid; min-width: 0; gap: 7px; color: var(--muted); font-size: var(--font-label); font-weight: 700; }
.protected-content-field,
.protected-file-field { grid-column: 1 / -1; }
.protected-file-field small,
.protected-edit-form small { color: var(--muted); font-size: 10px; font-weight: 500; }
.protected-form-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.protected-form-actions .form-message { min-height: 18px; margin: 0; text-align: left; }
.protected-owner-list { display: grid; gap: 12px; margin-top: 18px; }
.protected-owner-card { display: grid; grid-template-columns: 156px minmax(0,1fr); gap: 16px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-subtle); }
.protected-owner-card.is-disabled,
.protected-owner-card.is-expired,
.protected-owner-card.is-exhausted { opacity: .82; }
.protected-owner-qr { display: grid; place-items: center; aspect-ratio: 1; padding: 8px; border-radius: 12px; background: #fff; overflow: hidden; }
.protected-owner-qr svg { display: block; width: 100%; height: 100%; }
.protected-owner-body { display: grid; align-content: start; gap: 12px; min-width: 0; }
.protected-owner-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.protected-owner-head h3 { margin: 0 0 5px; font-size: 16px; overflow-wrap: anywhere; }
.protected-owner-head p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.protected-status { flex: 0 0 auto; padding: 5px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 10px; font-weight: 800; }
.protected-status.is-active { color: var(--accent-strong); border-color: rgba(184,255,61,.3); background: rgba(184,255,61,.08); }
.protected-status.is-expired,
.protected-status.is-exhausted { color: var(--danger); }
.protected-owner-counters { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; color: var(--muted); font-size: 11px; }
.protected-owner-counters a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.protected-owner-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.protected-edit-details { border-top: 1px solid var(--line); padding-top: 10px; }
.protected-edit-details summary { cursor: pointer; color: var(--text); font-size: 12px; font-weight: 800; }
.protected-edit-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 12px; }
.protected-edit-form .button,
.protected-edit-form .form-message { align-self: end; }
.protected-edit-form .form-message { min-height: 18px; margin: 0; text-align: left; }
.protected-access-card { max-width: 720px; }
.protected-access-badge { display: inline-flex; margin-top: 20px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.protected-access-form { display: grid; gap: 14px; margin-top: 22px; }
.protected-access-form .button { justify-self: start; }
.protected-opened-content { max-height: 65vh; overflow: auto; margin: 22px 0 0; padding: 16px; border: 1px solid var(--line); border-radius: 14px; color: var(--text); background: var(--surface-subtle); white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; line-height: 1.65; }
.protected-opened-content.is-data { white-space: pre; font-family: ui-monospace,SFMono-Regular,Consolas,monospace; font-size: 12px; }
.protected-access-note { color: var(--muted); font-size: 11px; }

@media (max-width: 820px) {
  .protected-form-grid,
  .protected-edit-form { grid-template-columns: 1fr; }
  .protected-owner-card { grid-template-columns: 112px minmax(0,1fr); }
  .protected-owner-head { flex-direction: column; }
}
@media (max-width: 560px) {
  .protected-owner-card { grid-template-columns: 1fr; }
  .protected-owner-qr { width: min(180px,100%); justify-self: center; }
}

/* Administrative operations: readable action groups and single status surfaces. */
.admin-detail-actions .action-button,
.admin-bulk-bar [data-clear-selection] {
  width: auto;
  min-width: 0;
  min-height: 42px;
  height: auto;
  padding: 9px 14px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}
.admin-detail-actions .action-button { flex: 1 1 148px; }
.admin-bulk-bar [data-clear-selection] { flex: 0 1 auto; }
.admin-detail-actions,
.dashboard-top-actions { align-items: stretch; }
.dashboard-top-actions { flex-wrap: wrap; }
.dashboard-top-actions .button-small {
  min-width: 0;
  padding: 9px 14px;
  font-size: 12.5px;
  line-height: 1.2;
  white-space: normal;
  text-align: center;
}
.deepseek-global-status {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid color-mix(in srgb, var(--success) 40%, var(--line));
  border-radius: 999px;
  color: var(--success);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.2;
}
.deepseek-global-status.is-disabled {
  border-color: color-mix(in srgb, var(--danger) 35%, var(--line));
  color: var(--danger);
}
.codes-list [data-code-state] .button { margin-top: 18px; }
.admin-body .toast-stack { left: 20px; right: auto; }

@media (max-width: 760px) {
  .admin-detail-actions .action-button { flex-basis: calc(50% - 4px); }
  .admin-bulk-bar [data-clear-selection] { width: 100%; }
  .dashboard-top-actions { width: 100%; }
  .dashboard-top-actions .button-small { flex: 1 1 145px; }
  .admin-body .toast-stack { left: 12px; right: 12px; width: auto; }
}

@media (max-width: 420px) {
  .admin-detail-actions .action-button { flex-basis: 100%; }
}

/* Редактируемые отображаемые названия строк тарифной матрицы. */
.plan-feature-editor { display: grid; gap: 8px; min-width: 250px; }
.plan-feature-editor > label { display: grid; gap: 4px; font-size: 11px; color: var(--muted); }
.plan-feature-editor input[type="text"] { width: 100%; min-width: 0; }
.plan-feature-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.plan-feature-meta code { max-width: 150px; overflow-wrap: anywhere; color: var(--muted); font-size: 10px; }
.plan-feature-meta > label:not(.checkbox-line) { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 10px; }
.plan-feature-meta input[type="number"] { width: 74px; }
.plan-matrix tr.is-feature-inactive > td { opacity: .68; }
.plan-matrix tr.is-feature-inactive > td:first-child { opacity: 1; }

/* Administrative JSON backups */
.admin-backup-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.admin-backup-card {
  display: grid;
  align-content: start;
  gap: 16px;
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-medium);
  background: var(--surface-soft);
}
.admin-backup-card h3 { margin: 0 0 7px; }
.admin-backup-card p { margin: 0; color: var(--muted); line-height: 1.55; }
.admin-backup-import { display: grid; gap: 12px; }
.admin-backup-import > label { display: grid; gap: 7px; min-width: 0; }
.admin-backup-import input[type="file"],
.admin-backup-import select { width: 100%; min-width: 0; }
.admin-backup-preview {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  background: var(--surface);
  overflow-x: auto;
}
.admin-backup-preview > * + * { margin-top: 9px; }
.admin-backup-summary { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-backup-summary th,
.admin-backup-summary td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; }
.admin-backup-summary th { color: var(--muted); font-weight: 700; }
@media (max-width: 900px) {
  .admin-backup-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .admin-backup-card { padding: 16px; }
  .admin-backup-import .deepseek-log-actions { align-items: stretch; }
  .admin-backup-import .deepseek-log-actions .button { width: 100%; }
}

/* Tariff matrix: aligned columns and one grouped QR-type row. */
.plan-matrix-wrap { border: 1px solid var(--line); border-radius: 14px; overscroll-behavior-inline: contain; }
.plan-matrix { width: max-content; min-width: 100%; table-layout: fixed; }
.plan-matrix th, .plan-matrix td { padding: 12px 14px; vertical-align: middle; }
.plan-matrix th:first-child,
.plan-matrix td:first-child { width: 320px; min-width: 320px; max-width: 320px; }
.plan-matrix th:not(:first-child),
.plan-matrix td:not(:first-child) { width: 230px; min-width: 230px; max-width: 230px; }
.plan-matrix thead th { position: sticky; top: 0; z-index: 2; background: #111713; }
.plan-matrix thead th:first-child { z-index: 3; }
.plan-matrix input[data-plan-field="price_rubles"],
.plan-matrix input[data-plan-field="scan_limit"],
.plan-matrix input[data-plan-field="qr_limit"] { width: min(100%, 128px); }
.plan-limit-control { align-content: center; min-height: 60px; }
.plan-limit-control .checkbox-line { justify-content: center; }
.plan-feature-editor { min-width: 0; }
.plan-feature-group-editor { gap: 10px; }
.plan-feature-group-editor > strong { font-size: 12px; }
.plan-feature-group-note { color: var(--muted); font-size: 10px; line-height: 1.45; }
.plan-feature-group-editor code { font-size: 9px; }
.plan-qr-type-config { min-width: 0; border: 1px solid var(--line); border-radius: 10px; background: rgba(0,0,0,.08); }
.plan-qr-type-config > summary { padding: 9px 10px; color: var(--muted); font-size: 10px; font-weight: 700; cursor: pointer; }
.plan-qr-type-config-body { display: grid; gap: 10px; padding: 0 10px 10px; }
.plan-qr-type-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px 10px; min-width: 0; text-align: left; }
.matrix-check-labeled { display: flex; width: 100%; height: auto; min-width: 0; min-height: 32px; align-items: center; justify-content: flex-start; gap: 7px; padding: 2px 0; }
.matrix-check-labeled > span { flex: 0 0 22px; }
.matrix-check-labeled b { min-width: 0; font-size: 10px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.plan-qr-summary { display: block; margin-top: 10px; color: var(--muted); font-size: 9px; line-height: 1.45; text-align: left; overflow-wrap: anywhere; }
.plan-feature-group-editor input[type="text"] { width: 100%; min-width: 0; }
.plan-qr-type-editor-item { display: grid; gap: 7px; padding-top: 10px; border-top: 1px solid var(--line); }
.plan-qr-type-editor-item:first-child { padding-top: 0; border-top: 0; }
.plan-qr-type-editor-item > label { display: grid; gap: 5px; }
.plan-qr-type-editor-item > label > span { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
@media (max-width: 520px) {
  .plan-matrix th:first-child, .plan-matrix td:first-child { width: 250px; min-width: 250px; max-width: 250px; }
  .plan-matrix th:not(:first-child), .plan-matrix td:not(:first-child) { width: 210px; min-width: 210px; max-width: 210px; }
  .plan-qr-type-list { grid-template-columns: 1fr; }
}
:root[data-theme="light"] .plan-matrix thead th { background: var(--surface-card); }
:root[data-theme="light"] .admin-body .dashboard-nav-primary::-webkit-scrollbar-thumb { border-color: var(--surface-sidebar); }


/* Admin-native date controls keep the QRMatrix surface while allowing the browser picker to remain native. */
.admin-body input[type="date"],
.admin-body input[type="datetime-local"] { min-width: 0; color-scheme: dark; accent-color: var(--accent); }
.admin-body input[type="date"]::-webkit-calendar-picker-indicator,
.admin-body input[type="datetime-local"]::-webkit-calendar-picker-indicator { width: 18px; height: 18px; margin: 0; padding: 3px; border-radius: 6px; opacity: .74; cursor: pointer; filter: invert(90%) sepia(8%) saturate(240%) hue-rotate(88deg) brightness(94%); }
.admin-body input[type="date"]::-webkit-calendar-picker-indicator:hover,
.admin-body input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover { opacity: 1; background: rgba(184,255,61,.1); }
:root[data-theme="light"] .admin-body input[type="date"],
:root[data-theme="light"] .admin-body input[type="datetime-local"] { color-scheme: light; }
:root[data-theme="light"] .admin-body input[type="date"]::-webkit-calendar-picker-indicator,
:root[data-theme="light"] .admin-body input[type="datetime-local"]::-webkit-calendar-picker-indicator { filter: none; }
.admin-capability-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.admin-capability-card { display: grid; gap: 5px; min-width: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(5,8,6,.34); }
.admin-capability-card strong { font-size: 12px; overflow-wrap: anywhere; }
.admin-capability-card span { color: var(--muted); font-size: 10px; line-height: 1.5; overflow-wrap: anywhere; }
.admin-capability-card.is-ready { border-color: rgba(184,255,61,.3); }
.admin-capability-card.is-ready strong { color: var(--accent); }
.admin-capability-card.is-error { border-color: rgba(255,117,117,.34); }
.admin-capability-card.is-error strong { color: var(--danger); }
@media (max-width: 700px) { .admin-capability-grid { grid-template-columns: 1fr; } }

/* Dashboard QR list pagination, selection and real chart states */
.dashboard-chart-wrap { position: relative; min-height: 260px; }
.dashboard-chart-wrap[aria-busy="true"] .dashboard-chart { opacity: .72; }
.dashboard-chart:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 10px; }
.dashboard-chart-axis-y { position: absolute; z-index: 2; left: 8px; top: 50%; color: var(--muted); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; transform: translate(-46%,-50%) rotate(-90deg); pointer-events: none; }
.dashboard-chart-tooltip { position: absolute; z-index: 5; max-width: min(240px,calc(100% - 16px)); padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; color: var(--text); background: var(--redirect-surface); box-shadow: var(--shadow-soft); font-size: 11px; line-height: 1.35; pointer-events: none; transform: translate(-50%,calc(-100% - 12px)); white-space: normal; overflow-wrap: anywhere; }
.dashboard-chart-tooltip[hidden] { display: none; }
.dashboard-chart-empty { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 24px; color: var(--muted); font-size: var(--font-label); text-align: center; pointer-events: none; }
.dashboard-chart-empty[hidden] { display: none; }
.dashboard-chart-method, .dashboard-chart-status { margin: 8px 0 0; color: var(--muted); font-size: var(--font-label); line-height: 1.5; }
.dashboard-chart-status { min-height: 1.5em; }
.codes-lifetime-note { margin: -4px 0 12px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.codes-selection-bar { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.015); }
.code-scans.code-scans-na { max-width: 110px; }
.code-scans.code-scans-na span { display: block; line-height: 1.35; }
.code-view-card { display: grid; gap: 16px; }
.code-view-card h2 { margin-bottom: 0; }
.code-view-preview { margin: 0; }
.code-view-meta { display: grid; gap: 10px; margin: 0; }
.code-view-meta > div { display: grid; grid-template-columns: minmax(120px,.7fr) minmax(0,1fr); gap: 14px; padding-top: 10px; border-top: 1px solid var(--line); }
.code-view-meta dt { color: var(--muted); font-size: 10px; }
.code-view-meta dd { margin: 0; color: var(--text); font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }
.code-view-card .codes-lifetime-note { margin: 0; }
.codes-selection-bar strong { margin-right: auto; font-size: 12px; }
.codes-selection-bar .button { min-height: 38px; }
.codes-selection-bar .button.is-danger { color: var(--danger); }
.code-row { grid-template-columns: 20px auto minmax(180px,1.5fr) minmax(130px,1fr) 100px 110px auto; }
.code-row.is-selected { border-color: rgba(184,255,61,.42); background: rgba(184,255,61,.035); }
.code-select { display: grid; place-items: center; width: 20px; height: 44px; }
.code-select input { width: 17px; height: 17px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.code-select-spacer { width: 20px; height: 1px; }
.codes-list[aria-busy="true"] { opacity: .72; }
.codes-pagination { display: flex; align-items: center; gap: 14px; margin-top: 14px; color: var(--muted); font-size: var(--font-label); }
.codes-pagination > span { margin-right: auto; }
.codes-pagination label { display: inline-flex; align-items: center; gap: 8px; }
.codes-pagination select { width: auto; min-width: 72px; height: 40px; }
.codes-pagination-pages { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.codes-pagination-pages .action-button { width: 40px; height: 40px; }
.codes-pagination-pages .action-button.is-current { color: #10150f; border-color: var(--accent); background: var(--accent); }
.codes-pagination-pages .action-button:disabled { cursor: default; opacity: .48; }
.pagination-gap { min-width: 18px; text-align: center; }
:root[data-theme="light"] .codes-selection-bar { background: var(--surface-subtle); }

@media (max-width: 1100px) and (min-width: 821px) {
  .code-row { grid-template-columns: 20px auto minmax(180px,1.5fr) minmax(130px,1fr) 90px auto; }
}

@media (max-width: 820px) {
  .code-row { grid-template-columns: 20px auto minmax(0,1fr) auto; }
  .code-actions { width: 94px; }
  .codes-selection-bar { align-items: stretch; flex-wrap: wrap; }
  .codes-selection-bar strong { flex: 1 1 120px; margin-right: 0; align-self: center; }
  .codes-pagination { align-items: flex-start; flex-direction: column; }
  .codes-pagination > span { margin-right: 0; }
  .codes-pagination-pages { justify-content: flex-start; }
}

@media (max-width: 600px) {
  .codes-selection-bar { display: grid; grid-template-columns: 1fr 1fr; }
  .code-view-meta > div { grid-template-columns: 1fr; gap: 4px; }
  .codes-selection-bar .checkbox-line, .codes-selection-bar strong { grid-column: 1 / -1; }
  .codes-selection-bar .button { width: 100%; }
  .codes-pagination label { width: 100%; justify-content: space-between; }
}

/* Unified Feather icon sizing and visual rhythm. */
.hero-points b .ui-icon, .ready-label .ui-icon, .feature-list .ui-icon, .price-card li .ui-icon { width: 14px; height: 14px; stroke-width: 2; }
.type-card button .ui-icon, .text-button .ui-icon { width: 15px; height: 15px; }
.color-popover-close .ui-icon { width: 16px; height: 16px; }
.pro-lock-note > .ui-icon { width: 16px; height: 16px; color: var(--accent); }
.live-status { display: inline-flex; align-items: center; gap: 6px; }
.live-status i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.legal a:has(.ui-icon) { display: inline-flex; align-items: center; gap: 7px; }
.legal a:has(.ui-icon) .ui-icon { width: 16px; height: 16px; }

/* BUSINESS API account tools reuse the existing panel/form/table language. */
.business-api-panel { scroll-margin-top: 88px; }
.business-api-create { max-width: 760px; margin-bottom: 18px; }
.api-scope-fieldset { display: grid; gap: 10px; border: 1px solid var(--border); border-radius: 14px; padding: 14px; }
.api-scope-fieldset legend { padding: 0 6px; font-weight: 700; }
.api-secret-once { margin: 16px 0; padding: 16px; border: 1px solid var(--accent); border-radius: 14px; background: color-mix(in srgb, var(--accent) 8%, transparent); }
.api-secret-once > p { margin: 6px 0 12px; color: var(--muted); }
.api-secret-row { display: flex; gap: 10px; align-items: center; }
.api-secret-row input { min-width: 0; flex: 1; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.business-api-table code { white-space: nowrap; }
@media (max-width: 640px) {
  .api-secret-row { align-items: stretch; flex-direction: column; }
  .business-api-panel .panel-head { align-items: flex-start; }
}

/* BUSINESS workspace — local extension of the existing dashboard system */
.business-workspace-picker { margin-bottom: 14px; }
.business-workspace-picker-row { display: grid; grid-template-columns: minmax(240px, 1fr) auto; align-items: end; gap: 14px; }
.business-workspace-picker-row > label, .business-bulk-upload > label { display: grid; gap: 7px; color: #bdc7bf; font-size: var(--font-label); font-weight: 750; text-transform: uppercase; letter-spacing: .07em; }
.business-workspace-role { min-width: 210px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 13px; background: rgba(0,0,0,.14); }
.business-workspace-role span, .business-workspace-role small { display: block; color: var(--muted); font-size: 10px; }
.business-workspace-role strong { display: block; margin: 4px 0; font-size: 14px; }
.business-team-panel, .business-shared-codes, .business-bulk-panel, .business-bulk-update { margin-top: 14px; }
.business-team-grid { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(260px,.5fr); gap: 16px; align-items: start; }
.business-team-grid h3, .business-invites h3 { margin: 0 0 12px; font-size: 13px; }
.business-invite-form { padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(0,0,0,.12); }
.business-invite-form small, .business-bulk-upload small { color: var(--muted); font-size: 10px; line-height: 1.5; }
.business-invites { margin-top: 18px; }
.business-table-wrap { width: 100%; overflow-x: auto; overscroll-behavior-x: contain; border: 1px solid var(--line); border-radius: 14px; }
.business-table { width: 100%; min-width: 720px; border-collapse: collapse; table-layout: auto; }
.business-table th, .business-table td { padding: 12px 13px; border-bottom: 1px solid var(--line); vertical-align: middle; text-align: left; font-size: 11px; }
.business-table th { position: sticky; top: 0; z-index: 1; color: var(--muted); background: #111713; font-size: 9px; text-transform: uppercase; letter-spacing: .07em; white-space: nowrap; }
.business-table tr:last-child td { border-bottom: 0; }
.business-table td { min-width: 100px; overflow-wrap: anywhere; }
.business-table td:first-child strong, .business-table td:first-child small { display: block; }
.business-table td:first-child small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.business-codes-table { min-width: 900px; }
.business-codes-table th:first-child, .business-codes-table td:first-child { width: 44px; min-width: 44px; text-align: center; }
.business-codes-table td:nth-child(2) { min-width: 220px; max-width: 360px; }
.business-role-select { min-width: 110px; height: 38px; }
.business-inline-actions, .business-selection-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.business-selection-actions { margin: 0 0 14px; padding: 11px 12px; border: 1px solid rgba(184,255,61,.16); border-radius: 12px; background: rgba(184,255,61,.035); }
.business-selection-actions strong { margin-right: auto; font-size: 11px; }
.button.is-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 32%, var(--line)); }
.business-pagination { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.business-pagination span { color: var(--muted); font-size: 10px; }
.business-bulk-upload { display: grid; grid-template-columns: minmax(260px,1fr) auto; align-items: end; gap: 12px; }
.business-bulk-upload small { grid-column: 1 / -1; }
.business-bulk-preview { margin-top: 18px; }
.business-preview-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.business-preview-summary strong { font-size: 12px; }
.business-ok { color: var(--success); }
.business-error { color: var(--danger); }
.business-job-status { display: grid; grid-template-columns: auto minmax(180px,1fr) auto; align-items: center; gap: 12px; margin-top: 16px; padding: 13px; border: 1px solid var(--line); border-radius: 13px; }
.business-job-status strong, .business-job-status span { font-size: 10px; }
.business-job-status span { color: var(--muted); }
.business-job-status progress { width: 100%; accent-color: var(--accent); }
.business-bulk-fields { display: grid; grid-template-columns: repeat(5,minmax(130px,1fr)); gap: 10px; }
.business-bulk-update-form .button { width: auto; justify-self: start; }
:root[data-theme="light"] .business-table th { background: var(--surface-panel); }
:root[data-theme="light"] .business-workspace-role, :root[data-theme="light"] .business-invite-form { background: rgba(255,255,255,.35); }

@media (max-width: 1100px) {
  .business-team-grid { grid-template-columns: 1fr; }
  .business-bulk-fields { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 720px) {
  .business-workspace-picker-row, .business-bulk-upload { grid-template-columns: 1fr; }
  .business-workspace-role { min-width: 0; }
  .business-preview-summary { align-items: flex-start; flex-direction: column; }
  .business-job-status { grid-template-columns: 1fr; }
  .business-bulk-fields { grid-template-columns: 1fr; }
  .business-selection-actions { align-items: stretch; }
  .business-selection-actions .button { width: 100%; }
  .business-workspace-topbar { align-items: flex-start; }
}

/* URL scenarios: local extension of the existing generator controls. */
.url-scenario-switch { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 2px; }
.url-scenario-button { min-height: 34px; padding: 7px 11px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: transparent; font: inherit; font-size: var(--font-badge); font-weight: 700; cursor: pointer; }
.url-scenario-button:hover { color: var(--text); border-color: rgba(184,255,61,.32); }
.url-scenario-button.is-active { color: var(--text); border-color: rgba(184,255,61,.5); background: rgba(184,255,61,.08); }
.url-scenario-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) { .url-scenario-button { transition: color .2s ease, border-color .2s ease, background-color .2s ease; } }
@media (max-width: 600px) { .url-scenario-switch { display: grid; grid-template-columns: 1fr; } .url-scenario-button { width: 100%; text-align: left; } }

.managed-file-state { min-height: 1.4em; margin-top: 8px; color: var(--muted); font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }
.managed-file-state strong { color: var(--text); font-weight: 750; }
.logo-selection { display: grid; grid-template-columns: 48px minmax(0,1fr) auto; align-items: center; gap: 10px; margin-top: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.025); }
.logo-selection[hidden] { display: none; }
.logo-selection img { width: 48px; height: 48px; border-radius: 10px; object-fit: contain; background: #fff; }
.logo-selection div { min-width: 0; }
.logo-selection strong, .logo-selection span { display: block; overflow-wrap: anywhere; }
.logo-selection span { margin-top: 3px; color: var(--muted); font-size: 10px; }
@media (max-width: 560px) { .logo-selection { grid-template-columns: 44px minmax(0,1fr); } .logo-selection .button { grid-column: 1 / -1; width: 100%; } .type-catalog-grid .type-card { min-height: 245px; } }