/* ============================================
   Abundera QR, Free QR Code Generator
   ============================================ */

/* --- Fonts (self-hosted Inter) --- */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/fonts/inter-latin.woff2?v=202606121945') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/fonts/inter-latin-ext.woff2?v=202606121945') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Inter Fallback';
    src: local('BlinkMacSystemFont'), local('Segoe UI'), local('Arial');
    size-adjust: 100%;
    ascent-override: 90%;
    descent-override: 22%;
    line-gap-override: 0%;
}

/* --- Reset & Base --- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

:root {
    --bg: #08090a;
    --surface-1: #0f1012;
    --surface-2: #161719;
    --surface-3: #1e1f22;
    --text: #f5f5f5;
    --text-secondary: #e0e0e0;
    --text-muted: #a3a3a3;
    --border: rgba(255, 255, 255, 0.08);
    --border-hover: rgba(255, 255, 255, 0.15);
    --blue: #60a5fa;
    --purple: #a78bfa;
    --green: #34d399;
    --pink: #fb7185;
    --radius: 12px;
    --radius-lg: 16px;
}

html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* --- Skip Link --- */
.skip-link {
    position: absolute;
    top: -100%;
    left: 16px;
    padding: 8px 16px;
    background: var(--blue);
    color: var(--bg);
    border-radius: 0 0 8px 8px;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    z-index: 100;
    transition: top 0.2s;
}

.skip-link:focus { top: 0; }

/* --- Focus styles ---
   WCAG 2.2 SC 2.4.11 + 2.4.13: focus indicator must be visible without
   being obscured, large enough, high enough contrast. 3px outline with
   a 2px offset plus a box-shadow halo so the ring is legible on any
   background. Mirrors qr.abundera.ai for cross-product consistency. */
:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 2px;
    box-shadow: 0 0 0 1px var(--bg);
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 1px;
    border-color: var(--blue);
    box-shadow: 0 0 0 1px var(--bg), 0 0 0 5px rgba(96, 165, 250, 0.25);
}

/* WCAG forced-colors support (Windows High Contrast Mode, macOS
   Increase Contrast). Defer to system colours so the focus ring stays
   visible when user CSS overrides our palette. */
@media (forced-colors: active) {
    :focus-visible { outline-color: Highlight; }
    .btn, button, input, textarea, select, a {
        forced-color-adjust: auto;
    }
}

/* --- Background Orbs --- */
.bg-orbs {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.12;
}

.orb-1 {
    width: 600px;
    height: 600px;
    background: var(--blue);
    top: -200px;
    right: -100px;
    animation: float1 25s ease-in-out infinite;
}

.orb-2 {
    width: 500px;
    height: 500px;
    background: var(--purple);
    bottom: -150px;
    left: -100px;
    animation: float2 30s ease-in-out infinite;
}

.orb-3 {
    width: 400px;
    height: 400px;
    background: var(--green);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: float3 20s ease-in-out infinite;
}

@keyframes float1 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-80px, 60px); } }
@keyframes float2 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(60px, -80px); } }
@keyframes float3 { 0%, 100% { transform: translate(-50%, -50%); } 50% { transform: translate(-40%, -60%); } }

/* --- Layout --- */
main, .site-header, .site-footer {
    position: relative;
    z-index: 1;
}

main {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 24px;
}

/* --- Header --- */
.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    max-width: 960px;
    margin: 0 auto;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text);
    font-size: 1.1rem;
    font-weight: 500;
}

.logo strong { font-weight: 700; }

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

.nav-hamburger {
    display: none;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
    padding: 8px;
    border-radius: var(--radius);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s;
    position: relative;
    z-index: 1600;
}
/* Make sure the SVG inside the hamburger never becomes the click target , 
   that was occasionally swallowing the click on browsers where event.target
   is the inner <line> element and bubbling was being interfered with. */
.nav-hamburger svg { pointer-events: none; }

.nav-hamburger:hover {
    background: var(--surface-2);
    border-color: var(--border-hover);
}
.nav-hamburger:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

.nav-link {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.875rem;
    padding: 6px 12px;
    border-radius: 8px;
    transition: color 0.2s, background 0.2s;
}

.nav-link:hover {
    color: var(--text);
    background: var(--surface-2);
}

.sign-link {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--blue);
}

.sign-link:hover {
    color: var(--text);
    background: rgba(96, 165, 250, 0.1);
}

.nav-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
    font-size: 0.875rem;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-hover);
    background: transparent;
    font-family: inherit;
    cursor: pointer;
    transition: color 0.2s, background 0.2s, border-color 0.2s;
}

.nav-btn:hover {
    color: var(--text);
    background: var(--surface-2);
    border-color: var(--text-muted);
}

#btn-install {
    color: var(--green);
    border-color: rgba(52, 211, 153, 0.4);
}

#btn-install:hover {
    background: rgba(52, 211, 153, 0.1);
    border-color: var(--green);
    color: var(--green);
}

/* --- Hero --- */
.hero {
    text-align: center;
    padding: 48px 0 32px;
}

.hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 12px;
    margin-bottom: 18px;
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.12), rgba(167, 139, 250, 0.12));
    border: 1px solid var(--border-hover);
    border-radius: 999px;
    color: var(--text);
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
}

.hero-pill:hover {
    border-color: var(--blue);
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.2), rgba(167, 139, 250, 0.2));
    transform: translateY(-1px);
}

.hero-pill-spark {
    font-size: 0.875rem;
    line-height: 1;
}

.hero-pill-arrow {
    color: var(--blue);
    font-weight: 600;
    transition: transform 0.15s;
}

.hero-pill:hover .hero-pill-arrow {
    transform: translateX(2px);
}

.hero h1 {
    font-size: clamp(1.75rem, 4.5vw, 2.75rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    background: linear-gradient(135deg, var(--text), var(--blue));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle {
    color: var(--text-muted);
    font-size: 1.125rem;
    margin-top: 12px;
}

.hero-features {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin: 18px auto 0;
    padding: 0;
    list-style: none;
    max-width: 720px;
}

.hero-features li {
    padding: 0;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.8125rem;
    color: var(--text-muted);
    transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.15s;
}

/* Every hero feature is now a real link. The chip styling lives on <li>,
   the anchor inherits and adds hover + focus affordance. */
.hero-features .hero-feat-link {
    display: inline-block;
    padding: 6px 12px;
    color: inherit;
    text-decoration: none;
    border-radius: inherit;
    transition: color 0.15s;
}
.hero-features li:hover {
    border-color: var(--accent, #60a5fa);
    background: rgba(96, 165, 250, 0.08);
    color: var(--text, #f5f5f5);
    transform: translateY(-1px);
}
.hero-features .hero-feat-link:focus-visible {
    outline: 2px solid var(--accent, #60a5fa);
    outline-offset: 3px;
}

.hero-features li.featured {
    background: linear-gradient(135deg, var(--blue), #a78bfa);
    color: var(--bg);
    border-color: transparent;
    font-weight: 600;
    box-shadow: 0 2px 12px rgba(96, 165, 250, 0.3);
}

.hero-features li.featured:hover {
    transform: translateY(-1px);
    background: linear-gradient(135deg, var(--blue), #a78bfa);
    box-shadow: 0 4px 16px rgba(96, 165, 250, 0.45);
}
.hero-features li.featured .hero-feat-link { color: var(--bg); }

/* R3: Trust strip, verify-me links. Quieter than hero-features so it
   reads as substantiation, not marketing. Sits below hero-features and
   above the Pro CTA card. */
.trust-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    justify-content: center;
    align-items: center;
    margin: 14px auto 0;
    padding: 0;
    list-style: none;
    max-width: 820px;
    font-size: 0.78rem;
}
.trust-strip li {
    display: inline-flex;
    align-items: center;
}
.trust-strip a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.trust-strip a:hover {
    color: var(--text);
    border-color: var(--border);
    background: var(--surface-2);
}
.trust-strip .trust-ico {
    font-size: 0.85rem;
    line-height: 1;
    opacity: 0.8;
}
@media (max-width: 640px) {
  .trust-strip { font-size: 0.72rem; gap: 4px 6px; }
  .trust-strip a { padding: 3px 8px; }
}

/* V1: Verify panel, collapsible block under the trust strip that shows
   real-time privacy metrics computed in the browser. */
.verify-panel {
    max-width: 820px;
    margin: 10px auto 0;
    padding: 0;
    border: 1px solid var(--border, #2a2a2d);
    border-radius: 12px;
    background: var(--surface-2, #161719);
    overflow: hidden;
}
.verify-panel[open] { background: var(--surface-1, #111214); }
.verify-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-muted, #b0b0b0);
    user-select: none;
    list-style: none;
}
.verify-summary::-webkit-details-marker { display: none; }
.verify-summary:hover { color: var(--text, #f5f5f5); }
.verify-panel[open] .verify-summary { color: var(--text, #f5f5f5); }
.verify-pulse {
    width: 8px; height: 8px; border-radius: 50%;
    background: rgb(34, 197, 94);
    flex-shrink: 0;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
    animation: verify-pulse 2.4s ease-in-out infinite;
}
@keyframes verify-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .verify-pulse { animation: none; }
}
.verify-label { flex: 1 1 auto; }
.verify-chev {
    transition: transform 0.18s ease;
    font-size: 0.9rem;
    opacity: 0.6;
}
.verify-panel[open] .verify-chev { transform: rotate(180deg); }
.verify-body {
    padding: 4px 16px 16px;
    border-top: 1px solid var(--border, #2a2a2d);
}
.verify-lead {
    font-size: 0.8rem;
    color: var(--text-muted, #888);
    margin: 12px 0 14px;
    line-height: 1.5;
}
.verify-metrics {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}
@media (max-width: 640px) {
  .verify-metrics { grid-template-columns: 1fr; }
}
.verify-metric {
    padding: 10px 12px;
    border: 1px solid var(--border, #2a2a2d);
    border-radius: 8px;
    background: var(--surface-2, #161719);
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto auto;
    gap: 2px 10px;
    font-size: 0.78rem;
}
.verify-metric-label {
    grid-column: 1;
    grid-row: 1;
    color: var(--text, #f5f5f5);
    font-weight: 500;
}
.verify-metric-value {
    grid-column: 2;
    grid-row: 1;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(100, 116, 139, 0.15);
    color: var(--text-muted, #aaa);
    white-space: nowrap;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.verify-metric-value.verify-ok {
    background: rgba(34, 197, 94, 0.14);
    color: rgb(134, 239, 172);
}
.verify-metric-value.verify-warn {
    background: rgba(250, 204, 21, 0.16);
    color: rgb(254, 240, 138);
}
.verify-metric-expect {
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: 0.72rem;
    color: var(--text-muted, #888);
    opacity: 0.85;
}
.verify-metric-why {
    grid-column: 1 / -1;
    grid-row: 3;
    font-size: 0.72rem;
    color: var(--text-muted, #888);
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.15s, max-height 0.15s;
}
.verify-metric:hover .verify-metric-why,
.verify-metric:focus-within .verify-metric-why {
    opacity: 1;
    max-height: 120px;
    margin-top: 2px;
}
.verify-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin-top: 14px;
    font-size: 0.78rem;
}
.verify-refresh {
    padding: 6px 12px;
    border: 1px solid var(--border, #2a2a2d);
    border-radius: 7px;
    background: transparent;
    color: var(--text, #f5f5f5);
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 500;
    transition: border-color 0.15s, background 0.15s;
}
.verify-refresh:hover {
    border-color: var(--accent, #60a5fa);
    background: rgba(96, 165, 250, 0.08);
}
.verify-manifesto {
    color: var(--accent, #60a5fa);
    text-decoration: none;
    margin-left: auto;
}
.verify-manifesto:hover { text-decoration: underline; }
@media (max-width: 480px) {
  .verify-summary { font-size: 0.78rem; padding: 10px 12px; }
  .verify-body { padding: 4px 12px 14px; }
  .verify-manifesto { margin-left: 0; }
}

/* Pro CTA coming-soon card */
.pro-cta-card {
    position: relative;
    max-width: 760px;
    margin: 32px auto 40px;
    padding: 1px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.55), rgba(167, 139, 250, 0.55) 50%, rgba(251, 113, 133, 0.4));
    isolation: isolate;
}

.pro-cta-glow {
    position: absolute;
    inset: -40px;
    background: radial-gradient(ellipse at 30% 0%, rgba(96, 165, 250, 0.22), transparent 60%),
                radial-gradient(ellipse at 80% 100%, rgba(167, 139, 250, 0.22), transparent 60%);
    filter: blur(24px);
    z-index: -1;
    pointer-events: none;
    opacity: 0.9;
}

.pro-cta-inner {
    background: linear-gradient(135deg, rgba(15, 16, 18, 0.96), rgba(22, 23, 25, 0.96));
    border-radius: 19px;
    padding: 28px 32px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.pro-cta-top {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pro-cta-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    width: fit-content;
    background: rgba(96, 165, 250, 0.12);
    border: 1px solid rgba(96, 165, 250, 0.35);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--blue);
}

.pro-cta-pill-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--blue);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.25);
    animation: proCtaPulse 2s ease-in-out infinite;
}

@keyframes proCtaPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.55; transform: scale(0.85); }
}

.pro-cta-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text);
    background: linear-gradient(135deg, #f5f5f5, #c5c9ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.pro-cta-sub {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

.pro-cta-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.pro-cta-feat {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text);
}

.pro-cta-feat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.2), rgba(167, 139, 250, 0.2));
    color: var(--blue);
    flex-shrink: 0;
}

.pro-cta-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 20px;
    margin-top: 4px;
}

/* Two-column "Free is for / Pro is for" split, reviewer-endorsed
   structure that makes the tier fit obvious without nagging. */
.pro-cta-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 8px 0 4px;
}
@media (max-width: 640px) {
  .pro-cta-split { grid-template-columns: 1fr; gap: 12px; }
}
.pro-cta-col {
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
}
.pro-cta-col-pro {
    background: linear-gradient(
        135deg,
        rgba(96, 165, 250, 0.06),
        rgba(167, 139, 250, 0.06)
    );
    border-color: rgba(96, 165, 250, 0.22);
}
.pro-cta-col-title {
    margin: 0 0 8px;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}
.pro-cta-col-pro .pro-cta-col-title {
    color: var(--blue);
}
.pro-cta-col-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 0.88rem;
    color: var(--text);
}
.pro-cta-col-list li {
    position: relative;
    padding-left: 18px;
}
.pro-cta-col-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--text-muted);
    font-weight: 700;
    font-size: 0.75rem;
    line-height: 1.5;
}
.pro-cta-col-pro .pro-cta-col-list li::before {
    color: var(--blue);
}
.pro-cta-guarantee {
    margin: 12px 0 0;
    padding: 12px 14px;
    border: 1px dashed var(--border);
    border-radius: 10px;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--text-muted);
}
.pro-cta-guarantee a {
    color: var(--accent, #60a5fa);
    text-decoration: none;
    border-bottom: 1px dashed currentColor;
    font-weight: 500;
    transition: color 0.15s;
}
.pro-cta-guarantee a:hover {
    color: var(--text, #f5f5f5);
    border-bottom-style: solid;
}

.pro-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    background: linear-gradient(135deg, var(--blue), var(--purple));
    color: var(--bg);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(96, 165, 250, 0.28);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.pro-cta-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(96, 165, 250, 0.4);
}

.pro-cta-btn-arrow {
    transition: transform 0.15s ease;
}

.pro-cta-btn:hover .pro-cta-btn-arrow {
    transform: translateX(3px);
}

.pro-cta-link {
    color: var(--text-muted);
    font-size: 0.85rem;
    text-decoration: none;
    border-bottom: 1px dashed var(--border-hover);
    padding-bottom: 1px;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.pro-cta-link:hover {
    color: var(--blue);
    border-bottom-color: var(--blue);
}

@media (max-width: 640px) {
    .pro-cta-card {
        margin: 24px auto 32px;
    }
    .pro-cta-inner {
        padding: 22px 20px;
    }
    .pro-cta-title {
        font-size: 1.15rem;
    }
    .pro-cta-sub {
        font-size: 0.9rem;
    }
    .pro-cta-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .pro-cta-btn {
        justify-content: center;
    }
    .pro-cta-link {
        text-align: center;
    }
}

/* GS1 Sunrise 2027 enhancements */
.gs1-sunrise-banner {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.4);
    border-radius: var(--radius);
    font-size: 0.8rem;
    color: var(--text);
    margin-bottom: 4px;
}

.gs1-sunrise-banner a {
    color: var(--blue);
    text-decoration: none;
}

.gs1-sunrise-banner a:hover {
    text-decoration: underline;
}

.input-with-status {
    display: flex;
    align-items: center;
    gap: 8px;
}

.input-with-status input {
    flex: 1;
}

.gtin-status {
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    min-width: 60px;
    text-align: right;
}

.gtin-status.valid {
    color: var(--green);
}

.gtin-status.invalid {
    color: #f87171;
}

.gs1-gtin-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.gs1-ean13-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--blue);
    cursor: pointer;
    font-size: 0.78rem;
    padding: 4px 10px;
    transition: border-color 0.15s, background 0.15s;
}

.gs1-ean13-btn:hover {
    border-color: var(--blue);
    background: rgba(96, 165, 250, 0.08);
}

/* Landing-page Business Card Designer callout */
.feature-callout {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 22px 24px;
    margin: 24px auto;
    max-width: 720px;
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.1), rgba(167, 139, 250, 0.1));
    border: 1px solid var(--border-hover);
    border-radius: var(--radius-lg);
    text-align: left;
}

.feature-callout .callout-badge {
    display: inline-block;
    padding: 3px 10px;
    background: var(--blue);
    color: var(--bg);
    border-radius: 4px;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    align-self: flex-start;
}

.feature-callout h2 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text);
    margin: 4px 0 0 0;
}

.feature-callout p {
    color: var(--text-muted);
    font-size: 0.9375rem;
    line-height: 1.5;
    margin: 0;
}

.feature-callout .callout-link {
    color: var(--blue);
    font-weight: 600;
    text-decoration: none;
    font-size: 0.9375rem;
    margin-top: 4px;
    align-self: flex-start;
}

.feature-callout .callout-link:hover {
    text-decoration: underline;
}

/* --- Mode Toggle (Generate | Scan) --- */
.mode-toggle {
    display: flex;
    justify-content: center;
    gap: 4px;
    /* Reduced from 24px so the toggle visually groups with the generator
       panel it controls. Kept ~12px of breathing room above the card. */
    margin: 0 auto 12px;
    padding: 4px;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    max-width: 380px;
}

/* Simple mode hides the busy filter/search UI, category tabs, and
   non-curated types. Advanced mode shows everything (default). */
body.mode-simple .type-search,
body.mode-simple .industry-presets,
body.mode-simple .saved-profiles,
body.mode-simple .compat-legend,
body.mode-simple .type-categories,
body.mode-simple .type-categories-wrap,
body.mode-simple .compat-chip,
body.mode-simple .type-compat,
body.mode-simple .panel-tab[data-panel="batch"] {
    display: none !important;
}
body.mode-simple .type-btn:not([data-simple]) {
    display: none;
}
/* N14: when a Jobs-First tile activates a non-simple type, keep the user
   in Simple mode but surface the active type-btn so they can see what
   they picked (and click a different Simple tile to return). Only the
   active one shows; the other 95 advanced types stay hidden. The dashed
   border signals "this is an Advanced type showing in Simple", a light
   affordance that the button isn't a permanent Simple resident. */
body.mode-simple .type-btn.active:not([data-simple]) {
    display: inline-flex !important;
    order: 0;
    border-style: dashed;
}
/* Force-show all data-simple buttons regardless of the per-category `.visible`
   class that Advanced mode relies on. */
body.mode-simple .type-btn[data-simple] {
    display: inline-flex !important;
}
/* Simple-mode display order (flex `order`, doesn't touch HTML so Advanced
   mode is unaffected). URL first, WiFi second (top use case), then contact
   cluster (vCard/Email/Phone/SMS), then utility tail (Text/Event). */
body.mode-simple .type-btn[data-type="url"] { order: 1; }
body.mode-simple .type-btn[data-type="wifi"] { order: 2; }
body.mode-simple .type-btn[data-type="vcard"] { order: 3; }
body.mode-simple .type-btn[data-type="email"] { order: 4; }
body.mode-simple .type-btn[data-type="phone"] { order: 5; }
body.mode-simple .type-btn[data-type="sms"] { order: 6; }
body.mode-simple .type-btn[data-type="text"] { order: 7; }
body.mode-simple .type-btn[data-type="event"] { order: 8; }
/* In simple mode, the type selector becomes a clean single-row/wrap list
   without category filtering. */
body.mode-simple .type-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.mode-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.9375rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s;
}

.mode-btn:hover {
    color: var(--text);
}

.mode-btn.active {
    background: var(--blue);
    color: var(--bg);
}

/* --- Generator --- */
.generator {
    padding-bottom: 48px;
}

.generator-layout {
    display: grid;
    /* minmax(0, ...) stops grid tracks from expanding based on content
       (without it, long type names / wide fields push the controls column
       wider than 50%). Locks the two columns at exactly equal widths at
       every viewport. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

/* --- Controls Panel --- */
.controls-panel {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;  /* allow the grid track to constrain inner content */
}

/* --- Panel Tabs (Content | Style | Export) --- */
.panel-tabs {
    display: flex;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius) var(--radius) 0 0;
    background: var(--surface-1);
    overflow: hidden;
}

.panel-tab {
    flex: 1;
    padding: 12px 16px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.875rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s;
    border-bottom: 2px solid transparent;
}

.panel-tab:hover {
    color: var(--text);
    background: var(--surface-2);
}

.panel-tab.active {
    color: var(--blue);
    border-bottom-color: var(--blue);
    background: var(--surface-2);
}

/* --- Panel Content --- */
.panel-content {
    display: none;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
    background: var(--surface-1);
}

.panel-content.active {
    display: flex;
}

/* --- Compatibility matrix table (info page) --- */
.compat-table {
    width: 100%; border-collapse: collapse; margin: 1rem 0 1.5rem; font-size: 0.9rem;
}
.compat-table th, .compat-table td {
    border: 1px solid var(--border, #ddd); padding: 6px 10px; text-align: left;
    vertical-align: top;
}
.compat-table thead th { background: rgba(0,0,0,0.04); font-weight: 600; }
.compat-table td:nth-child(2), .compat-table td:nth-child(3), .compat-table td:nth-child(4) { text-align: center; white-space: nowrap; }
@media (max-width: 700px) { .compat-table { display: block; overflow-x: auto; } }

/* Save-to-Pro section, supplementary, below generator */
.save-to-pro-section {
    max-width: 720px;
    margin: 32px auto 48px;
    padding: 20px 24px;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.save-to-pro-inner { text-align: center; }
.save-to-pro-title {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-secondary);
}
.save-to-pro-hint {
    margin: 0 0 14px;
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
}
.btn-save-to-pro {
    justify-content: center;
    font-weight: 500;
}
.pro-edit-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    margin-bottom: 10px;
    background: rgba(96, 165, 250, 0.08);
    border: 1px solid rgba(96, 165, 250, 0.25);
    border-radius: var(--radius, 12px);
    font-size: 0.85rem;
}
.pro-edit-banner .btn-text {
    background: none;
    border: none;
    color: var(--blue, #60a5fa);
    cursor: pointer;
    font-weight: 500;
    text-decoration: underline;
    padding: 0;
    font-size: inherit;
    font-family: inherit;
}

/* Competitor comparison matrix extensions */
.compare-table th[scope="row"] {
    text-align: left;
    max-width: 360px;
    font-weight: 500;
}
.compare-table td {
    text-align: center !important;
    font-weight: 600;
    font-size: 0.85rem;
}
.compare-table .compare-yes { color: var(--green, #34d399); }
.compare-table .compare-no { color: var(--red, #f87171); }
.compare-table .compare-partial { color: var(--amber, #fbbf24); }
.compare-note {
    display: block;
    font-weight: 400;
    color: var(--text-muted, #a3a3a3);
    font-size: 0.78rem;
    margin-top: 2px;
    line-height: 1.4;
}

/* Pricing matrix, highlight our rows, left-align text-heavy cells */
.compare-pricing-table td {
    text-align: left !important;
    font-size: 0.82rem;
    vertical-align: top;
}
.compare-pricing-table td:nth-child(3),
.compare-pricing-table td:nth-child(4),
.compare-pricing-table td:nth-child(5),
.compare-pricing-table td:nth-child(6) {
    text-align: center !important;
    white-space: nowrap;
}
.compare-pricing-table .compare-ours {
    background: rgba(52, 211, 153, 0.08);
}
.compare-pricing-table .compare-ours td:nth-child(6) {
    color: var(--green, #34d399);
    font-weight: 700;
}
.compare-pricing-table .compare-note {
    margin-top: 0;
}

/* --- Type-fitness card (best-for / scans-on / when-not / standards) --- */
.type-fitness {
    margin: 1rem 0 0.5rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--border, rgba(255,255,255,0.08));
    border-radius: 12px;
    background: rgba(255,255,255,0.02);
}
.type-fitness-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.75rem 1.25rem; margin: 0; }
.type-fitness-grid > div { min-width: 0; }
.type-fitness-grid dt {
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--text-muted, #999); margin-bottom: 2px;
}
.type-fitness-grid dd { margin: 0; font-size: 0.85rem; line-height: 1.4; color: var(--text, #f5f5f5); }
.type-fitness-grid dd a { color: var(--blue, #60a5fa); text-decoration: underline; text-underline-offset: 2px; }

/* --- Privacy verifiability badge (hero) --- */
.privacy-badge {
    display: inline-flex; align-items: center; gap: 8px;
    margin: 0.75rem 0 0.25rem;
    padding: 6px 14px; border-radius: 999px;
    background: rgba(34,197,94,0.10);
    color: rgb(21,128,61); font-size: 0.82rem; font-weight: 500;
    text-decoration: none;
    border: 1px solid rgba(34,197,94,0.25);
    transition: background 0.15s;
}
.privacy-badge:hover { background: rgba(34,197,94,0.16); }
.privacy-badge-dot {
    width: 8px; height: 8px; border-radius: 50%; background: rgb(34,197,94);
    box-shadow: 0 0 0 0 rgba(34,197,94,0.5);
    animation: privacyPulse 2.4s ease-out infinite;
}
@keyframes privacyPulse {
  0% { box-shadow: 0 0 0 0 rgba(34,197,94,0.5); }
  70% { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}
@media (prefers-color-scheme: dark) {
  .privacy-badge { background: rgba(34,197,94,0.16); color: rgb(134,239,172); border-color: rgba(34,197,94,0.35); }
  .privacy-badge:hover { background: rgba(34,197,94,0.24); }
}

/* --- Industry preset packs --- */
.industry-presets {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 0.5rem; font-size: 0.82rem;
    color: var(--text-muted, #999);
}
.industry-presets-label { white-space: nowrap; }
.industry-presets-select {
    padding: 5px 10px; border: 1px solid var(--border, #2a2a2a); border-radius: 8px;
    background: var(--surface-2, #161719); color: var(--text, #f5f5f5);
    font-size: 0.85rem; cursor: pointer;
}
.industry-presets-select:focus { outline: none; border-color: var(--accent, #60a5fa); }

/* --- Beginner/Expert mode --- */
body.mode-beginner .type-btn[data-advanced="1"]:not(.visible) { display: none; }
body.mode-beginner .type-btn[data-advanced="1"].visible { display: none; }
/* When searching in beginner mode, show matching advanced types so search is always exhaustive */
body.mode-beginner.type-search-active .type-btn[data-advanced="1"]:not([data-search-hidden="1"]) { display: inline-flex; }
.mode-toggle-btn {
    background: rgba(0,0,0,0.04); border: 1px solid var(--border, #ddd);
    color: var(--text, #111); font-size: 0.72rem; font-weight: 500;
    padding: 3px 10px; border-radius: 999px; cursor: pointer;
    margin-left: 6px;
}
.mode-toggle-btn:hover { background: rgba(0,0,0,0.08); }

/* --- Compatibility legend + toggle --- */
.compat-legend { margin-bottom: 0.5rem; font-size: 0.78rem; color: var(--text-muted, #666); }
/* N19.8, Saved advanced profiles */
.saved-profiles {
    margin-top: 8px;
    margin-bottom: 10px;
    padding: 8px 12px;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.saved-profiles > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
    color: var(--text-muted);
    font-size: 0.8125rem;
    font-weight: 500;
    user-select: none;
}
.saved-profiles > summary::-webkit-details-marker { display: none; }
.saved-profiles > summary::before {
    content: "▸";
    display: inline-block;
    transition: transform 0.15s;
}
.saved-profiles[open] > summary::before { transform: rotate(90deg); }
.saved-profiles[open] > summary { color: var(--text); margin-bottom: 8px; }
.saved-profiles-count {
    margin-left: auto;
    min-width: 20px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--surface-3);
    color: var(--text-muted);
    font-size: 0.7rem;
    text-align: center;
}
.saved-profiles-body { display: flex; flex-direction: column; gap: 8px; }
.saved-profiles-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.saved-profiles-list:empty { display: none; }
.saved-profile-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.8125rem;
}
.saved-profile-load {
    flex: 1;
    background: none;
    border: 0;
    padding: 0;
    text-align: left;
    cursor: pointer;
    color: var(--text);
    font: inherit;
}
.saved-profile-load:hover { text-decoration: underline; }
.saved-profile-type {
    padding: 1px 6px;
    border-radius: 10px;
    background: var(--surface-3);
    color: var(--text-muted);
    font-size: 0.6875rem;
    font-weight: 500;
}
.saved-profile-delete {
    background: none;
    border: 0;
    padding: 2px 6px;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1;
    border-radius: 4px;
}
.saved-profile-delete:hover { color: var(--danger, #c33); background: var(--surface-3); }
.saved-profiles-empty {
    color: var(--text-muted);
    font-size: 0.8125rem;
    padding: 8px 0;
}
.saved-profiles-list:not(:empty) + .saved-profiles-empty { display: none; }
.saved-profiles-save {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    padding: 6px 12px;
}

.compat-legend > summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 4px 0;
}
.compat-legend > summary::-webkit-details-marker { display: none; }
.compat-legend-summary::before { content: "▸"; display: inline-block; margin-right: 6px; transition: transform 0.15s; }
.compat-legend[open] .compat-legend-summary::before { transform: rotate(90deg); }
.compat-toggle-btn {
    background: rgba(0,0,0,0.04); border: 1px solid var(--border, #ddd);
    color: var(--text, #111); font-size: 0.72rem; font-weight: 500;
    padding: 3px 8px; border-radius: 999px; cursor: pointer;
}
.compat-toggle-btn:hover { background: rgba(0,0,0,0.08); }
.compat-legend-grid {
    display: flex; flex-wrap: wrap; gap: 8px 16px;
    padding: 6px 0 4px 18px;
}
.compat-legend-grid span { display: inline-flex; align-items: center; gap: 4px; }
.compat-legend-grid a { font-size: 0.78rem; color: var(--accent, #0070f3); text-decoration: none; }

/* --- Compatibility chips on type buttons (glyph-only by default) --- */
.compat-chip {
    display: inline-flex; align-items: center; justify-content: center;
    margin-left: 4px;
    font-size: 0.78rem; line-height: 1;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: rgba(0,0,0,0.06);
    vertical-align: middle;
}
/* Default: hide "universal" (most types) so chips become a real signal. */
.compat-chip.compat-universal { display: none; }
/* Toggle states (set on body via JS pref) */
body.compat-show-all .compat-chip.compat-universal { display: inline-flex; }
body.compat-show-none .compat-chip { display: none !important; }
.compat-chip.compat-universal { background: rgba(34,197,94,0.12); color: rgb(21,128,61); }
.compat-chip.compat-phone     { background: rgba(59,130,246,0.12); color: rgb(29,78,216); }
.compat-chip.compat-pro       { background: rgba(245,158,11,0.14); color: rgb(180,83,9); }
.compat-chip.compat-wallet    { background: rgba(168,85,247,0.12); color: rgb(126,34,206); }
.compat-chip.compat-auth      { background: rgba(244,63,94,0.12); color: rgb(190,18,60); }
.compat-chip.compat-app       { background: rgba(100,116,139,0.14); color: rgb(71,85,105); }
@media (prefers-color-scheme: dark) {
  .compat-chip.compat-universal { background: rgba(34,197,94,0.20); color: rgb(134,239,172); }
  .compat-chip.compat-phone     { background: rgba(59,130,246,0.20); color: rgb(147,197,253); }
  .compat-chip.compat-pro       { background: rgba(245,158,11,0.22); color: rgb(252,211,77); }
  .compat-chip.compat-wallet    { background: rgba(168,85,247,0.22); color: rgb(216,180,254); }
  .compat-chip.compat-auth      { background: rgba(244,63,94,0.22); color: rgb(252,165,165); }
  .compat-chip.compat-app       { background: rgba(100,116,139,0.24); color: rgb(203,213,225); }
}

/* --- R1: Compat detail strip (above fields for non-universal types) ---
   Appears only when the selected type has scanner limitations worth
   flagging. Source: COMPAT_DETAIL in app.js, tier from TYPE_COMPAT. */
.compat-strip {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    margin: 0 0 10px;
    padding: 8px 12px;
    font-size: 0.8rem; line-height: 1.35;
    border: 1px solid var(--border, #2a2a2d);
    border-radius: 8px;
    background: var(--surface-2, #161719);
    color: var(--text-muted, #b0b0b0);
}
.compat-strip[hidden] { display: none; }
.compat-strip-chip {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    font-size: 0.85rem; line-height: 1;
    flex-shrink: 0;
}
.compat-strip-chip.compat-universal { background: rgba(34,197,94,0.14); color: rgb(21,128,61); }
.compat-strip-chip.compat-phone     { background: rgba(59,130,246,0.14); color: rgb(29,78,216); }
.compat-strip-chip.compat-pro       { background: rgba(245,158,11,0.16); color: rgb(180,83,9); }
.compat-strip-chip.compat-wallet    { background: rgba(168,85,247,0.14); color: rgb(126,34,206); }
.compat-strip-chip.compat-auth      { background: rgba(244,63,94,0.14); color: rgb(190,18,60); }
.compat-strip-chip.compat-app       { background: rgba(100,116,139,0.16); color: rgb(71,85,105); }
@media (prefers-color-scheme: dark) {
  .compat-strip-chip.compat-universal { background: rgba(34,197,94,0.22); color: rgb(134,239,172); }
  .compat-strip-chip.compat-phone     { background: rgba(59,130,246,0.22); color: rgb(147,197,253); }
  .compat-strip-chip.compat-pro       { background: rgba(245,158,11,0.24); color: rgb(252,211,77); }
  .compat-strip-chip.compat-wallet    { background: rgba(168,85,247,0.24); color: rgb(216,180,254); }
  .compat-strip-chip.compat-auth      { background: rgba(244,63,94,0.24); color: rgb(252,165,165); }
  .compat-strip-chip.compat-app       { background: rgba(100,116,139,0.26); color: rgb(203,213,225); }
}
.compat-strip-body { flex: 1 1 auto; min-width: 0; }
.compat-strip-tier { color: var(--text, #f5f5f5); font-weight: 600; }
.compat-strip-sep { opacity: 0.5; margin: 0 2px; }
.compat-strip-fallback a {
    color: var(--accent, #60a5fa);
    text-decoration: none;
    border-bottom: 1px dashed currentColor;
}
.compat-strip-fallback a:hover { color: var(--accent-hover, #93c5fd); }
.compat-strip-link {
    color: var(--text-muted, #888);
    font-size: 0.74rem;
    text-decoration: none;
    flex-shrink: 0;
    margin-left: auto;
    white-space: nowrap;
}
.compat-strip-link:hover { color: var(--accent, #60a5fa); }
/* Hide the strip in Simple mode, all Simple types are universal anyway,
   but defensive in case future Simple types aren't. */
body.mode-simple .compat-strip { display: none !important; }
/* Hide when a body class signals "compat chips off". */
body.compat-show-none .compat-strip { display: none !important; }
@media (max-width: 560px) {
  .compat-strip { font-size: 0.75rem; padding: 7px 10px; }
  .compat-strip-link { margin-left: 0; }
}

/* --- Type Search --- */
.type-search { position: relative; display: flex; align-items: center; margin-bottom: 0.5rem; }
.type-search-icon { position: absolute; left: 10px; color: var(--text-muted, #888); pointer-events: none; }
.type-search-input {
    width: 100%; padding: 8px 32px 8px 32px;
    border: 1px solid var(--border); border-radius: 8px;
    background: var(--surface-2, #161719); color: var(--text, #f5f5f5);
    font-size: 0.9rem; outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.type-search-input::placeholder { color: var(--text-muted, #888); opacity: 1; }
.type-search-input:focus { border-color: var(--accent, #0070f3); box-shadow: 0 0 0 3px rgba(0, 112, 243, 0.15); }
.type-search-clear {
    position: absolute; right: 6px;
    background: transparent; border: none; font-size: 1.3rem; line-height: 1;
    color: var(--text-muted, #888); cursor: pointer; padding: 2px 8px; border-radius: 4px;
}
.type-search-clear:hover { background: rgba(0,0,0,0.05); color: var(--text); }
body.type-search-active .type-categories { opacity: 0.5; pointer-events: none; }
body.type-search-active .type-btn[data-search-hidden="1"] { display: none !important; }
body.type-search-active .type-selector .type-btn { display: inline-flex; }
body.type-search-active .field-group.active { display: none; }

/* --- Landing pages: hide app-only UI elements ---
   body[data-qr-preselect] is set on generated landing pages (e.g. /wifi-qr-code/).
   The search bar, mode toggle, compat legend, and industry presets are
   generator-mode UI only, they don't work on landing pages and look broken. */
body[data-qr-preselect] .type-search,
body[data-qr-preselect] .mode-toggle,
body[data-qr-preselect] .compat-legend,
body[data-qr-preselect] .industry-presets { display: none !important; }

/* --- Type Categories --- */
/* Horizontally-scrollable category strip.
 * Clean look on both desktop and mobile:
 *   - scrollbar is hidden
 *   - smooth momentum scrolling on iOS/touch
 *   - fade edges appear dynamically (left when scrolled, right when more
 *     content exists) via JS toggling .can-scroll-left / .can-scroll-right
 *   - mouse wheel is translated into horizontal scroll in JS for discoverability
 */
.type-categories-wrap {
    position: relative;
    margin-bottom: 4px;
}
.type-categories {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;            /* Firefox */
    -ms-overflow-style: none;         /* legacy IE/Edge */
    -webkit-overflow-scrolling: touch;/* momentum scroll on iOS */
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    padding: 2px 0;
}
.type-categories::-webkit-scrollbar { display: none; }

/* Fade indicators, absolute-positioned overlays on the wrapper.
 * Visibility driven by JS-applied classes on .type-categories so they
 * only show when there's actually more content in that direction. */
.type-categories-wrap::before,
.type-categories-wrap::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    width: 28px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 1;
}
.type-categories-wrap::before {
    left: 0;
    background: linear-gradient(to right, var(--bg, #08090a), transparent);
}
.type-categories-wrap::after {
    right: 0;
    background: linear-gradient(to left, var(--bg, #08090a), transparent);
}
.type-categories.can-scroll-left ~ .fade-left,
.type-categories-wrap.can-scroll-left::before { opacity: 1; }
.type-categories-wrap.can-scroll-right::after { opacity: 1; }

.cat-btn {
    flex-shrink: 0;               /* no compression in the flex row */
    scroll-snap-align: start;     /* snap to the leading edge when user flicks */
}

/* Scroll arrow buttons, desktop-only explicit affordance.
 * Research (NNG 2022, YouTube/Netflix/Amazon pattern): horizontal scroll
 * discoverability on desktop mouse is ~40% without controls, ~75% with
 * fade, ~92% with visible arrows. Touch users never need them (swipe is
 * native), so hide entirely on touch via @media (hover) + (pointer: fine).
 */
.cat-scroll-btn {
    display: none; /* shown only on pointer-capable devices below */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--surface-2);
    border: 1px solid var(--border-hover);
    color: var(--text);
    cursor: pointer;
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, background 0.15s ease, border-color 0.15s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    padding: 0;
}
.cat-scroll-btn.left { left: 2px; }
.cat-scroll-btn.right { right: 2px; }
.cat-scroll-btn:hover { background: var(--surface-3); border-color: var(--blue); }
.cat-scroll-btn:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
    opacity: 1 !important;
    pointer-events: auto !important;
}
.type-categories-wrap.can-scroll-left .cat-scroll-btn.left,
.type-categories-wrap.can-scroll-right .cat-scroll-btn.right {
    opacity: 1;
    pointer-events: auto;
}
@media (hover: hover) and (pointer: fine) {
    .cat-scroll-btn { display: flex; }
}

.cat-btn {
    padding: 5px 12px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s;
}

.cat-btn:hover {
    border-color: var(--border-hover);
    color: var(--text);
}

.cat-btn.active {
    border-color: var(--blue);
    color: var(--blue);
    background: rgba(96, 165, 250, 0.08);
}

/* --- Type Selector --- */
.type-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.type-btn {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 0.875rem;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s;
}

.type-btn.visible {
    display: flex;
}

.type-btn:hover {
    border-color: var(--border-hover);
    color: var(--text);
    background: var(--surface-3);
}

.type-btn.active {
    border-color: var(--blue);
    color: var(--blue);
    background: rgba(96, 165, 250, 0.08);
}

/* --- Input Fields --- */
.field-group {
    /* Inactive groups use display:none, this matches the known-working state
       (commit ade012e9e). Off-screen variants caused autofill to fail because
       Chrome's classifier saw dozens of duplicate inputs (multiple name="email"
       / name="tel" across every type's hidden field-group) and refused to
       autofill the ambiguous form. Modern Chrome dynamically rescans inputs
       when display changes, so display:none does NOT break autofill on the
       active group. */
    display: none;
    flex-direction: column;
    gap: 12px;
}

.field-group.active {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    height: auto;
    overflow: visible;
    opacity: 1;
    pointer-events: auto;
}

.field-group label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.field-group input:not([type="checkbox"]):not([type="file"]):not([type="color"]),
.field-group textarea,
.field-group select {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
    color: var(--text);
    font-size: 0.9375rem;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
}

.field-group input:focus,
.field-group textarea:focus,
.field-group select:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
}

.field-group input::placeholder,
.field-group textarea::placeholder {
    color: var(--text-muted);
}

.field-group textarea {
    resize: vertical;
    min-height: 80px;
}

/* === GLOBAL FORM ELEMENT BASELINES =====================================
   These rules fix native browser inconsistencies (checkbox, range, color,
   select chevron) so every form control matches the dark accent UI even
   when not inside a styled container. Per-container rules (.field-group,
   .card-text-row, .card-color-row, etc.) override where needed. */

/* Checkboxes, native OS look replaced with custom dark-themed square */
input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    margin: 0;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--surface-2);
    cursor: pointer;
    vertical-align: middle;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
    flex-shrink: 0;
    position: relative;
}
input[type="checkbox"]:hover {
    border-color: var(--blue);
}
input[type="checkbox"]:checked {
    background: var(--blue);
    border-color: var(--blue);
}
input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2308090a' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/12px no-repeat;
}
input[type="checkbox"]:focus-visible {
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.25);
    outline: none;
}

/* Radio buttons, same custom treatment, circular */
input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    margin: 0;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface-2);
    cursor: pointer;
    vertical-align: middle;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
    flex-shrink: 0;
    position: relative;
}
input[type="radio"]:hover { border-color: var(--blue); }
input[type="radio"]:checked {
    border-color: var(--blue);
    background: radial-gradient(circle, var(--blue) 0 5px, var(--surface-2) 6px 100%);
}
input[type="radio"]:focus-visible {
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.25);
    outline: none;
}

/* Range sliders, fully custom track + thumb (zero CSS before this) */
input[type="range"] {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    cursor: pointer;
    outline: none;
    margin: 8px 0;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--blue);
    border: 2px solid var(--bg);
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    transition: transform 0.15s, box-shadow 0.15s;
}
input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 2px 8px rgba(96, 165, 250, 0.5);
}
input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--blue);
    border: 2px solid var(--bg);
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
input[type="range"]::-moz-range-track {
    height: 6px;
    background: var(--border);
    border-radius: 3px;
}

/* Color pickers, consistent compact swatch */
input[type="color"] {
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
}
input[type="color"]:hover {
    border-color: var(--blue);
}
input[type="color"]:focus-visible {
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.25);
    outline: none;
}
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 6px;
}
input[type="color"]::-moz-color-swatch {
    border: none;
    border-radius: 6px;
}

/* Native chevron + dark options for selects everywhere (overridden by
   .field-group select etc. for sizing) */
select {
    color-scheme: dark;
}
select option {
    background: #161719;
    color: var(--text);
}

/* Textareas resize vertically only, never horizontally */
textarea { resize: vertical; }

/* Industry-preset select needs an explicit chevron + dark option */
.industry-presets-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3a3a3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px;
    padding-right: 32px;
}

/* Consistent calendar/time pickers across all date-like inputs.
   `color-scheme: dark` makes the native picker UI dark-themed on
   macOS/iOS/Windows so it matches our app's dark palette. The picker
   indicator (calendar icon) is restyled to match our blue accent. */
.field-group input[type="date"],
.field-group input[type="datetime-local"],
.field-group input[type="time"],
.field-group input[type="month"],
.field-group input[type="week"] {
    /* color-scheme:light forces Chrome to render the BLACK native indicator
       which we then invert to white via filter. Trade-off accepted: the
       picker popup renders in light theme. Tried color-scheme:dark + custom
       background-image overlay, icon never showed and click broke. The
       light/inverted approach is the only one that reliably renders a
       visible AND clickable calendar icon across Chrome / Edge / Safari. */
    color-scheme: light;
    font-variant-numeric: tabular-nums;
    padding-right: 14px;
}
.field-group input[type="date"]::-webkit-calendar-picker-indicator,
.field-group input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.field-group input[type="time"]::-webkit-calendar-picker-indicator,
.field-group input[type="month"]::-webkit-calendar-picker-indicator,
.field-group input[type="week"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    filter: invert(1);
    opacity: 0.65;
    transition: opacity 0.15s;
}
.field-group input[type="date"]:hover::-webkit-calendar-picker-indicator,
.field-group input[type="datetime-local"]:hover::-webkit-calendar-picker-indicator,
.field-group input[type="time"]:hover::-webkit-calendar-picker-indicator,
.field-group input[type="month"]:hover::-webkit-calendar-picker-indicator,
.field-group input[type="week"]:hover::-webkit-calendar-picker-indicator {
    opacity: 1;
}

.field-group input[type="number"] {
    -moz-appearance: textfield;
}

.field-group input[type="number"]::-webkit-inner-spin-button {
    opacity: 0.5;
}

.field-group select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--text-muted);
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--blue);
}

.char-count {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: right;
}

.field-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
}

.transparent-toggle {
    margin-left: 4px;
    font-size: 0.75rem !important;
    white-space: nowrap;
}

.transparent-toggle input[type="checkbox"] {
    width: 14px;
    height: 14px;
}

/* --- vCard Photo Preview --- */
.vcard-photo-preview {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--border-hover);
    background: var(--surface-2);
}

.vcard-photo-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Local file upload, styled inline file input */
.upload-label {
    margin-top: 6px;
}

.file-input-styled {
    display: block;
    width: 100%;
    padding: 8px 10px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-muted);
    font-size: 0.8125rem;
    font-family: inherit;
    cursor: pointer;
}

.file-input-styled::file-selector-button {
    margin-right: 10px;
    padding: 4px 10px;
    background: var(--surface-3);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.75rem;
    cursor: pointer;
}

.file-input-styled:hover::file-selector-button {
    background: var(--blue);
    color: var(--bg);
    border-color: var(--blue);
}

/* Section heading + lead used by the new Batch panel */
.section-heading {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 6px 0;
}

.section-lead {
    color: var(--text-muted);
    font-size: 0.9375rem;
    margin: 0 0 8px 0;
    line-height: 1.5;
}

.section-lead + .field-hint code,
.field-hint code {
    background: var(--surface-3);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
}

/* Collapsible "More fields (optional)" section in form groups */
.extra-fields {
    margin-top: 12px;
    padding: 10px 14px;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.extra-fields > summary {
    cursor: pointer;
    color: var(--text-muted);
    font-size: 0.8125rem;
    font-weight: 500;
    list-style: none;
    padding: 4px 0;
    user-select: none;
}

.extra-fields > summary::-webkit-details-marker {
    display: none;
}

.extra-fields > summary::before {
    content: "▸";
    display: inline-block;
    margin-right: 6px;
    transition: transform 0.15s;
}

.extra-fields[open] > summary::before {
    transform: rotate(90deg);
}

.extra-fields[open] > summary {
    color: var(--text);
    margin-bottom: 6px;
}

.extra-fields-subhead {
    margin-top: 14px;
    margin-bottom: 4px;
    color: var(--text-muted);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

/* N19.9, Capability banner on non-QR formats. Chip + title + desc so the
   constraint is visible, not just textual. */
.capability-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    background: var(--surface-2, #1a1a1a);
    border: 1px solid var(--border, #2a2a2a);
    border-left: 3px solid var(--text-muted, #999);
    border-radius: 8px;
}
.capability-banner-chip {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--surface-3, #262626);
    font-size: 1rem;
}
.capability-banner-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.capability-banner-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text);
}
.capability-banner-desc {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--text-muted);
}

/* N19.11, Failure education at moment of choice. Terse "use this if /
   do not use" callout at the top of field-heavy forms, before any input.
   Two short clauses, orange-accented strong tags, small badge icon. */
.use-if-callout {
    margin: 0 0 14px 0;
    padding: 10px 12px;
    background: var(--surface-2, #1a1a1a);
    border-left: 3px solid var(--accent, #f59e0b);
    border-radius: 6px;
    color: var(--text);
    font-size: 0.8125rem;
    line-height: 1.5;
}
.use-if-callout strong {
    color: var(--accent, #f59e0b);
    font-weight: 600;
}

/* N19.3, Progressive disclosure sections inside advanced generators.
   Reuses .extra-fields CSS for layout; data-level gives semantic accent. */
.field-section {
    margin-top: 12px;
}
.field-section[data-level="recommended"] {
    border-left: 2px solid var(--accent, #7c5cff);
    border-top: none;
    border-right: none;
    border-bottom: none;
    border-radius: 0;
    padding: 2px 0 2px 12px;
    background: transparent;
}
.field-section[data-level="recommended"] > summary {
    color: var(--text);
}
.field-section[data-level="expert"] > summary::after {
    content: "";
    display: inline-block;
    margin-left: 8px;
    padding: 1px 6px;
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-muted);
    font-size: 0.6875rem;
    font-weight: 500;
    vertical-align: 1px;
}
.field-section[data-level="expert"]:not([open]) > summary::after {
    content: "expert";
}
.field-section[data-level="expert"][open] > summary::after {
    content: "expert";
    opacity: 0.6;
}

/* --- Style Panel Sections --- */
.style-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.style-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.section-label {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* --- Template Grid --- */
.template-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
}

.template-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px;
    border: 2px solid var(--border);
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s;
}

.template-btn:hover {
    border-color: var(--border-hover);
}

.template-btn.active {
    border-color: var(--blue);
}

.template-preview {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.template-preview > svg {
    width: 90%;
    height: 90%;
}

.template-name {
    font-size: 0.625rem;
    color: var(--text-muted);
    font-family: inherit;
}

.template-actions {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    flex-wrap: wrap;
}

/* Center logo preset grid */
.logo-preset-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    margin-top: 6px;
}

#logo-preset-search {
    width: 100%;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-size: 13px;
    padding: 9px 12px 9px 34px;
    margin-bottom: 8px;
    outline: none;
    transition: border-color 0.15s, background 0.15s;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3a3a3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>");
    background-repeat: no-repeat;
    background-position: 10px center;
    background-size: 16px 16px;
}
#logo-preset-search::placeholder { color: var(--text-muted); }
#logo-preset-search:focus {
    border-color: var(--blue);
    background-color: var(--surface-3);
}
#logo-preset-search::-webkit-search-cancel-button {
    -webkit-appearance: none;
    height: 14px; width: 14px;
    background: var(--text-muted);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M18 6L6 18M6 6l12 12' stroke='black' stroke-width='3' stroke-linecap='round'/></svg>") center/contain no-repeat;
    cursor: pointer;
}
#logo-preset-empty {
    text-align: center;
    padding: 12px;
    margin: 8px 0 0;
    background: var(--surface-2);
    border: 1px dashed var(--border);
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 13px;
}

.logo-preset-more-wrap {
    margin-top: 8px;
}

.logo-preset-more-wrap > summary {
    cursor: pointer;
    color: var(--text-muted);
    font-size: 13px;
    padding: 6px 0;
    user-select: none;
    list-style: none;
}

.logo-preset-more-wrap > summary::-webkit-details-marker {
    display: none;
}

.logo-preset-more-wrap > summary::before {
    content: "\25B8 ";
    display: inline-block;
    transition: transform 0.15s;
}

.logo-preset-more-wrap[open] > summary::before {
    transform: rotate(90deg);
}

.logo-preset-more-wrap > summary:hover {
    color: var(--text);
}

.logo-preset-btn {
    aspect-ratio: 1;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
}

.logo-preset-btn:hover {
    border-color: var(--blue);
    background: var(--surface-3);
    transform: translateY(-1px);
}

.logo-preset-btn.active {
    border-color: var(--blue);
    background: rgba(96, 165, 250, 0.1);
}

.logo-preset-btn svg {
    width: 100%;
    height: 100%;
}

/* "Show more templates" collapsible */
.templates-more {
    margin-top: 8px;
}

.templates-more > summary {
    cursor: pointer;
    color: var(--text-muted);
    font-size: 0.75rem;
    text-align: center;
    padding: 6px 8px;
    background: var(--surface-1);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    list-style: none;
    user-select: none;
    transition: border-color 0.15s, color 0.15s;
}

.templates-more > summary::-webkit-details-marker {
    display: none;
}

.templates-more > summary:hover {
    border-color: var(--blue);
    color: var(--text);
}

.templates-more[open] > summary {
    margin-bottom: 8px;
}

.templates-more #template-grid-more {
    margin-top: 0;
}

/* My Styles empty state */
#my-styles-empty {
    margin-top: 4px;
    margin-bottom: 8px;
}

#my-styles-grid:not(:empty) + .template-actions {
    margin-top: 10px;
}

#my-styles-grid:empty + .template-actions {
    margin-top: 8px;
}

#my-styles-grid:not(:empty) ~ #my-styles-empty,
#my-styles-section #my-styles-grid:not(:empty) ~ #my-styles-empty {
    display: none;
}

/* --- Color Rows --- */
.color-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.color-row label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.color-input-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.color-input-wrap input[type="color"] {
    width: 32px;
    height: 32px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: none;
    cursor: pointer;
    padding: 2px;
}

.color-input-wrap input[type="color"]:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.color-hex {
    font-size: 0.75rem;
    font-family: 'SF Mono', 'Fira Code', monospace;
    color: var(--text-muted);
    min-width: 60px;
}

.color-row select {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--text);
    font-size: 0.8125rem;
    font-family: inherit;
    cursor: pointer;
    outline: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 28px;
}

.gradient-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    background: var(--surface-2);
    border-radius: 8px;
}

/* --- Frame Text --- */
.frame-text-input {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--text);
    font-size: 0.8125rem;
    font-family: inherit;
    outline: none;
    width: 160px;
    transition: border-color 0.2s;
}

.frame-text-input:focus {
    border-color: var(--blue);
}

.frame-text-input::placeholder {
    color: var(--text-muted);
}

/* --- Logo Upload --- */
.logo-upload {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.logo-upload > label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.logo-upload-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.logo-name {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

/* --- Export Panel --- */
.export-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.export-buttons .btn {
    justify-content: center;
}

/* N5, QR Lab chip inline with the download buttons so verification is
   one glance away, not an extra nav hop. */
.export-lab-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px dashed var(--border, #2a2a2a);
    background: transparent;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 500;
    align-self: flex-start;
    transition: color 0.12s, border-color 0.12s;
}
.export-lab-chip:hover,
.export-lab-chip:focus-visible {
    color: var(--accent, #7c5cff);
    border-color: var(--accent, #7c5cff);
    border-style: solid;
}

/* --- Batch Progress --- */
.batch-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}

.batch-bar {
    flex: 1;
    height: 6px;
    background: var(--surface-3);
    border-radius: 3px;
    overflow: hidden;
}

.batch-bar-fill {
    height: 100%;
    width: 0%;
    background: var(--blue);
    border-radius: 3px;
    transition: width 0.2s;
}

.batch-status {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.batch-results {
    margin-top: 12px;
    padding: 12px;
    background: var(--surface-2);
    border-radius: 10px;
    border: 1px solid var(--border);
}

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

.batch-results-count {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text);
}

.batch-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
    max-height: 460px;
    overflow-y: auto;
    padding: 6px;
    /* Custom scrollbar, Firefox */
    scrollbar-width: thin;
    scrollbar-color: var(--border-hover) var(--surface-2);
}

/* Custom scrollbar, Chromium / Safari */
.batch-preview-grid::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
.batch-preview-grid::-webkit-scrollbar-track {
    background: var(--surface-2);
    border-radius: 6px;
}
.batch-preview-grid::-webkit-scrollbar-thumb {
    background: var(--border-hover);
    border-radius: 6px;
    border: 2px solid var(--surface-2);
}
.batch-preview-grid::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

.batch-preview-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    background: var(--surface-3);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.batch-preview-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
    border-color: var(--blue);
}

.batch-preview-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
}

.batch-preview-item .batch-preview-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    font-size: 0.6875rem;
    text-align: center;
    padding: 4px 6px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.4));
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.batch-preview-num {
    position: absolute;
    top: 4px;
    left: 4px;
    background: var(--blue);
    color: var(--bg);
    font-size: 0.625rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    line-height: 1;
}

.batch-zoom-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    animation: fadeIn 0.15s ease;
}

.batch-zoom-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.batch-zoom-content img {
    max-width: 90vw;
    max-height: 80vh;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}

.batch-zoom-label {
    font-size: 0.9rem;
    color: #fff;
    font-weight: 600;
}

/* --- Colorblind Filter --- */
.qr-preview.cb-protanopia .qr-canvas-wrap {
    filter: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><filter id='p'><feColorMatrix type='matrix' values='0.567,0.433,0,0,0 0.558,0.442,0,0,0 0,0.242,0.758,0,0 0,0,0,1,0'/></filter></svg>#p");
}

.qr-preview.cb-deuteranopia .qr-canvas-wrap {
    filter: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><filter id='d'><feColorMatrix type='matrix' values='0.625,0.375,0,0,0 0.7,0.3,0,0,0 0,0.3,0.7,0,0 0,0,0,1,0'/></filter></svg>#d");
}

.qr-preview.cb-tritanopia .qr-canvas-wrap {
    filter: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><filter id='t'><feColorMatrix type='matrix' values='0.95,0.05,0,0,0 0,0.433,0.567,0,0 0,0.475,0.525,0,0 0,0,0,1,0'/></filter></svg>#t");
}

/* --- Shortcuts List --- */
.shortcuts-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.shortcut-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.shortcut-row span {
    margin-left: auto;
}

kbd {
    display: inline-block;
    padding: 2px 6px;
    background: var(--surface-3);
    border: 1px solid var(--border-hover);
    border-radius: 4px;
    font-size: 0.6875rem;
    font-family: 'SF Mono', 'Fira Code', monospace;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* --- Preview Panel --- */
.preview-panel {
    position: sticky;
    top: 80px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.qr-preview {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 340px;
    transition: border-color 0.3s;
}

.qr-preview.has-qr {
    border-color: var(--border-hover);
    cursor: zoom-in;
}

.qr-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    color: var(--text-muted);
    text-align: center;
    font-size: 0.875rem;
}

.qr-canvas-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: var(--radius);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    animation: qrFadeIn 0.3s ease;
}

@keyframes qrFadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

#qr-canvas {
    max-width: 100%;
    height: auto;
    display: block;
}

/* --- Quick Actions (below preview) --- */
.quick-actions {
    display: flex;
    gap: 8px;
}

.quick-actions .btn {
    flex: 1;
    justify-content: center;
}

/* --- History Panel --- */
.history-panel {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-1);
    padding: 12px;
}

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

.btn-text {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-family: inherit;
    cursor: pointer;
    transition: color 0.2s;
}

.btn-text:hover {
    color: var(--pink);
}

.history-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.history-item {
    aspect-ratio: 1;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.2s;
    padding: 4px;
}

.history-item:hover {
    border-color: var(--blue);
}

.history-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* --- Buttons --- */
.btn-sm {
    padding: 6px 12px;
    font-size: 0.8125rem;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--radius);
    font-size: 0.875rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    text-decoration: none;
    white-space: nowrap;
}

.btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn-primary {
    background: var(--blue);
    color: #08090a;
}

.btn-primary:hover:not(:disabled) {
    background: #7db8fb;
    transform: translateY(-1px);
}

.btn-secondary {
    background: var(--surface-2);
    color: var(--text);
    border: 1px solid var(--border);
}

.btn-secondary:hover:not(:disabled) {
    background: var(--surface-3);
    border-color: var(--border-hover);
    transform: translateY(-1px);
}

.btn-outline {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
}

.btn-outline:hover:not(:disabled) {
    color: var(--text);
    border-color: var(--border-hover);
    background: var(--surface-1);
}

.btn-gradient {
    background: linear-gradient(135deg, var(--blue), var(--purple));
    color: #fff;
    font-weight: 600;
}

.btn-gradient:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(96, 165, 250, 0.3);
}

/* --- Sign CTA --- */
.sign-cta {
    padding: 48px 0;
}

.sign-cta-inner {
    padding: 32px;
    border: 1px solid rgba(96, 165, 250, 0.15);
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.05), rgba(167, 139, 250, 0.05));
    overflow: hidden;
    position: relative;
}

.sign-cta-badge {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 20px;
}

.sign-cta-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.sign-cta-content {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
}

.sign-cta h2 {
    font-size: clamp(1.25rem, 3vw, 1.625rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.sign-cta p {
    color: var(--text-muted);
    font-size: 0.9375rem;
    line-height: 1.6;
    max-width: 440px;
}

.sign-features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 4px 0;
}

.sign-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.sign-features svg {
    flex-shrink: 0;
}

.sign-cta .btn-gradient {
    align-self: flex-start;
    margin-top: 4px;
}

.sign-cta-visual {
    flex-shrink: 0;
}

.sign-doc-mock {
    width: 160px;
    padding: 20px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sign-doc-line {
    height: 6px;
    background: var(--surface-3);
    border-radius: 3px;
    width: 100%;
}

.sign-doc-line-title {
    height: 8px;
    width: 60%;
    background: rgba(96, 165, 250, 0.2);
}

.sign-doc-line-short {
    width: 70%;
}

.sign-doc-spacer {
    height: 8px;
}

.sign-doc-sig {
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px dashed var(--border-hover);
    display: flex;
    justify-content: center;
}

/* --- How It Works --- */
.how-it-works {
    padding: 40px 0;
    text-align: center;
}

.how-it-works h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 32px;
    letter-spacing: -0.02em;
}

.steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.step {
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-1);
    transition: border-color 0.2s;
}

.step:hover {
    border-color: var(--border-hover);
}

.step-number {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(96, 165, 250, 0.1);
    color: var(--blue);
    font-weight: 700;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.step h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 6px;
}

.step p {
    color: var(--text-muted);
    font-size: 0.875rem;
}

/* --- Languages showcase --- */
.languages-showcase {
    padding: 32px 0 16px;
    text-align: center;
}
.languages-showcase h2 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text);
}
.languages-sub {
    color: var(--text-muted);
    font-size: 0.9375rem;
    margin: 0 auto 24px;
    max-width: 640px;
}
.languages-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    max-width: 880px;
    margin: 0 auto;
}
.languages-grid li {
    margin: 0;
}
.languages-grid a {
    display: inline-block;
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text);
    font-size: 0.875rem;
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.12s;
}
.languages-grid a:hover {
    border-color: var(--blue);
    color: var(--text);
    background: var(--surface-1);
    transform: translateY(-1px);
}

/* --- FAQ --- */
.faq {
    padding: 40px 0 80px;
}

.faq h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 24px;
    letter-spacing: -0.02em;
    text-align: center;
}

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

.faq-item {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-1);
    transition: border-color 0.2s;
}

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

.faq-item summary {
    padding: 16px 20px;
    font-weight: 500;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.faq-item summary::after {
    content: '+';
    font-size: 1.25rem;
    color: var(--text-muted);
    transition: transform 0.2s;
}

.faq-item[open] summary::after {
    content: '\2212';
}

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

.faq-item p {
    padding: 0 20px 16px;
    color: var(--text-muted);
    font-size: 0.9375rem;
    line-height: 1.7;
}

/* --- Footer --- */
.site-footer {
    border-top: 1px solid var(--border);
    padding: 24px;
}

.footer-inner {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ── Category columns ─────────────────────────────────────────────── */
.footer-cat-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px 20px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border);
}

.footer-cat-col h4 {
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 8px;
}

.footer-cat-col a {
    display: block;
    color: var(--text-muted);
    font-size: 0.75rem;
    text-decoration: none;
    line-height: 1.9;
    transition: color 0.15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.footer-cat-col a:hover { color: var(--text); }

/* ── Site nav columns (Tools / Legal & Info / Products) ───────────── */
.footer-nav-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px 40px;
    padding: 28px 0;
}

.footer-nav-col strong,
.footer-nav-col h4 {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 10px;
}

.footer-nav-col a {
    display: block;
    color: var(--text-muted);
    font-size: 0.8125rem;
    text-decoration: none;
    line-height: 2;
    transition: color 0.15s;
    white-space: nowrap;
}

.footer-nav-col a:hover { color: var(--text); }

.footer-copy {
    color: var(--text-muted);
    font-size: 0.75rem;
    margin-top: 6px;
}
/* N17: canonical brand sentence above the copyright on every page */
.footer-tagline {
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 500;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    margin-top: 0;
    margin-bottom: 0;
}
/* R5: freshness stamp right below the copyright line */
.footer-freshness {
    color: var(--text-muted);
    opacity: 0.7;
    font-size: 0.7rem;
    margin: 4px 0 0;
}
.footer-freshness a {
    color: inherit;
    border-bottom: 1px dotted currentColor;
    text-decoration: none;
}
.footer-freshness a:hover { color: var(--accent, #60a5fa); }

/* R2: pre-export scannability preflight modal */
.preflight-overlay {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    z-index: 1000;
    animation: preflight-fade 0.15s ease-out;
}
.preflight-overlay[hidden] { display: none; }
@keyframes preflight-fade { from { opacity: 0 } to { opacity: 1 } }
.preflight-modal {
    background: var(--surface-1, #111214);
    border: 1px solid var(--border, #2a2a2d);
    border-radius: 16px;
    max-width: 480px;
    width: 100%;
    padding: 24px;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.5);
}
.preflight-head {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 10px;
}
.preflight-grade {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    border-radius: 12px;
    font-size: 1.35rem; font-weight: 800;
    flex-shrink: 0;
}
.preflight-grade.grade-A { background: rgba(34,197,94,0.16); color: rgb(134,239,172); }
.preflight-grade.grade-B { background: rgba(132,204,22,0.16); color: rgb(217,249,157); }
.preflight-grade.grade-C { background: rgba(250,204,21,0.18); color: rgb(254,240,138); }
.preflight-grade.grade-D { background: rgba(249,115,22,0.20); color: rgb(254,215,170); }
.preflight-grade.grade-F { background: rgba(239,68,68,0.20); color: rgb(252,165,165); }
.preflight-title {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.3;
    color: var(--text, #f5f5f5);
}
.preflight-lead {
    margin: 0 0 14px;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--text-muted, #aaa);
}
.preflight-risks {
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.preflight-risk {
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
    line-height: 1.45;
    border: 1px solid transparent;
}
.preflight-risk.warn {
    background: rgba(250,204,21,0.08);
    border-color: rgba(250,204,21,0.22);
    color: rgb(254,240,138);
}
.preflight-risk.fail {
    background: rgba(239,68,68,0.08);
    border-color: rgba(239,68,68,0.22);
    color: rgb(252,165,165);
}
.preflight-risk::before {
    display: inline-block;
    width: 1.1em;
    margin-right: 6px;
    font-weight: 700;
}
.preflight-risk.warn::before { content: "⚠"; }
.preflight-risk.fail::before { content: "✗"; }
.preflight-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
.preflight-btn {
    padding: 9px 18px;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--border, #2a2a2d);
    transition: background 0.15s, border-color 0.15s, transform 0.12s;
}
.preflight-btn:active { transform: translateY(1px); }
.preflight-btn-primary {
    background: linear-gradient(135deg, #60a5fa, #a78bfa);
    color: #08090a;
    border-color: transparent;
}
.preflight-btn-primary:hover { box-shadow: 0 2px 14px rgba(96,165,250,0.35); }
.preflight-btn-secondary {
    background: transparent;
    color: var(--text-muted, #aaa);
}
.preflight-btn-secondary:hover { color: var(--text, #f5f5f5); border-color: var(--text-muted, #666); }
body.preflight-open { overflow: hidden; }

/* V2: per-scenario scan-grade grid inside the preflight modal */
.preflight-scenarios {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    margin: 0 0 14px;
}
@media (max-width: 420px) {
  .preflight-scenarios { grid-template-columns: 1fr; }
}
.preflight-scenario {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    gap: 2px 8px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--border, #2a2a2d);
    background: var(--surface-2, #161719);
    font-size: 0.78rem;
}
.preflight-scenario-glyph {
    grid-column: 1;
    grid-row: 1;
    font-size: 0.95rem;
}
.preflight-scenario-label {
    grid-column: 2;
    grid-row: 1;
    color: var(--text, #f5f5f5);
    font-weight: 500;
}
.preflight-scenario-grade {
    grid-column: 3;
    grid-row: 1;
    padding: 1px 8px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.8rem;
}
.preflight-scenario.grade-A .preflight-scenario-grade { background: rgba(34,197,94,0.18); color: rgb(134,239,172); }
.preflight-scenario.grade-B .preflight-scenario-grade { background: rgba(132,204,22,0.18); color: rgb(217,249,157); }
.preflight-scenario.grade-C .preflight-scenario-grade { background: rgba(250,204,21,0.22); color: rgb(254,240,138); }
.preflight-scenario.grade-D .preflight-scenario-grade { background: rgba(249,115,22,0.22); color: rgb(254,215,170); }
.preflight-scenario.grade-F .preflight-scenario-grade { background: rgba(239,68,68,0.22); color: rgb(252,165,165); }
.preflight-scenario-risk {
    grid-column: 1 / -1;
    grid-row: 2;
    color: var(--text-muted, #888);
    font-size: 0.72rem;
    opacity: 0.9;
}

/* V3: one-click auto-fix buttons */
.preflight-fixes {
    margin: 0 0 16px;
    padding: 10px 12px;
    border: 1px dashed var(--border, #2a2a2d);
    border-radius: 8px;
}
.preflight-fixes-label {
    margin: 0 0 8px;
    font-size: 0.78rem;
    color: var(--text-muted, #aaa);
}
.preflight-fixes-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.preflight-fix-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 11px;
    border: 1px solid var(--border, #2a2a2d);
    border-radius: 7px;
    background: var(--surface-2, #161719);
    color: var(--text, #f5f5f5);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.preflight-fix-btn:hover {
    border-color: var(--accent, #60a5fa);
    background: rgba(96,165,250,0.08);
}
.preflight-fix-btn:active { transform: translateY(1px); }

/* R7: compact discoverability hint.
   Lives above the mode toggle so it reads as site-level nav, not a
   Simple-mode footnote. Two escape hatches: Wizard, QR Lab. */
.mode-hint {
    text-align: center;
    font-size: 0.78rem;
    color: var(--text-muted, #888);
    /* Breathing room from the Pro CTA above, tight gap to the toggle below. */
    margin: 0 auto 14px;
    max-width: 720px;
    padding: 0 12px;
    line-height: 1.5;
}
.mode-hint a {
    color: var(--accent, #60a5fa);
    text-decoration: none;
    border-bottom: 1px dashed transparent;
    transition: border-color 0.15s;
}
.mode-hint a:hover { border-bottom-color: currentColor; }
.mode-hint-sep { opacity: 0.4; margin: 0 4px; }
@media (max-width: 480px) {
  .mode-hint { font-size: 0.72rem; }
  .mode-hint-sep { display: block; height: 2px; overflow: hidden; visibility: hidden; }
}

/* N19.10: payload inspector. Collapsible, monospaced, shows the exact
   encoded string carried by the QR/barcode plus char/byte counts. Lives
   in the preview panel between the preview and the history list. */
.payload-inspector {
    margin-top: 16px;
    border: 1px solid var(--border, #2a2a2a);
    border-radius: 8px;
    background: var(--surface-1, #111);
    font-size: 0.85rem;
}
.payload-inspector[hidden] { display: none; }
.payload-inspector summary {
    padding: 10px 14px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    color: var(--text);
    font-weight: 500;
    list-style: none;
}
.payload-inspector summary::-webkit-details-marker { display: none; }
.payload-inspector summary::before {
    content: "▸";
    color: var(--text-muted, #888);
    margin-right: 6px;
    transition: transform 0.15s;
}
.payload-inspector[open] summary::before {
    transform: rotate(90deg);
    display: inline-block;
}
.payload-meta {
    color: var(--text-muted, #888);
    font-size: 0.75rem;
    font-weight: 400;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.payload-body {
    padding: 0 14px 14px;
}
.payload-raw {
    margin: 0 0 10px;
    padding: 10px 12px;
    background: var(--surface-2, #1a1a1a);
    border: 1px solid var(--border, #2a2a2a);
    border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.8rem;
    line-height: 1.45;
    max-height: 240px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-all;
    color: var(--text);
}
.payload-actions {
    display: flex;
    gap: 8px;
}

/* N16: compliance-notes block for policy-sensitive landing pages.
   Renders below the SEO content, above the FAQ. Deliberately styled
   distinctly (amber/warning hue) so it reads as a decisive editorial
   judgment, not boilerplate. The "When not to use this" paragraph is
   even more prominent. */
.compliance-notes {
    margin: 32px 0;
    padding: 20px 24px;
    border-left: 4px solid #f59e0b;
    background: rgba(245, 158, 11, 0.05);
    border-radius: 8px;
}
.compliance-notes h2 {
    margin-top: 0;
    font-size: 1.15rem;
    color: #f59e0b;
}
.compliance-notes h2::before {
    content: "⚠ ";
    margin-right: 2px;
}
.compliance-notes h3 {
    margin: 16px 0 6px;
    font-size: 1rem;
    color: var(--text);
}
.compliance-list {
    padding-left: 20px;
    margin: 12px 0;
}
.compliance-list li {
    margin-bottom: 6px;
    line-height: 1.5;
}
.compliance-never {
    padding: 10px 14px;
    background: rgba(239, 68, 68, 0.08);
    border-left: 3px solid #ef4444;
    border-radius: 4px;
    font-weight: 500;
    margin: 0;
}

/* N14: jobs-first starter grid. Outcomes, not symbologies. Sits between
   the hero and the Simple/Advanced toggle. Each tile activates the
   matching type via JS and auto-flips to Advanced when needed. */
.job-starters {
    max-width: 720px;
    margin: 0 auto 16px;
    padding: 0 12px;
}
.job-starters-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-muted, #888);
    text-align: center;
    margin: 0 0 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.job-starters-grid {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 8px;
}
.job-starter {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 6px;
    background: var(--surface-1, #111);
    border: 1px solid var(--border, #2a2a2a);
    border-radius: 10px;
    color: var(--text, inherit);
    font: inherit;
    font-size: 0.72rem;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    transition:
        border-color 0.15s,
        background 0.15s,
        transform 0.1s;
}
.job-starter:hover {
    border-color: var(--accent, #60a5fa);
    background: var(--surface-2, #1a1a1a);
}
.job-starter:active { transform: translateY(1px); }
.job-starter-ico { color: var(--accent, #60a5fa); }
.job-starter-label { line-height: 1.15; }
body.mode-scan .job-starters { display: none; }
@media (max-width: 900px) {
    .job-starters-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
    .job-starters-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    .job-starter { padding: 10px 4px; font-size: 0.68rem; }
    .job-starters-title { font-size: 0.78rem; }
}

/* N19.2: command palette. Fixed overlay, Cmd/Ctrl+K or "/" opens it, Escape
   or backdrop-click closes it. Keyboard-first; results fuzzy-match every
   type button in the DOM and jump to it + flip Advanced mode if needed. */
.cmd-palette {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 12vh;
}
.cmd-palette[hidden] { display: none; }
.cmd-palette-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.cmd-palette-panel {
    position: relative;
    width: min(640px, 92vw);
    background: var(--surface-1, #111);
    border: 1px solid var(--border, #2a2a2a);
    border-radius: 14px;
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    animation: cmd-palette-in 140ms ease-out;
}
@keyframes cmd-palette-in {
    from { transform: translateY(-8px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.cmd-palette-input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border, #2a2a2a);
}
.cmd-palette-icon { color: var(--text-muted, #888); flex-shrink: 0; }
.cmd-palette-input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    color: var(--text);
    font: inherit;
    font-size: 1rem;
    outline: none;
}
.cmd-palette-kbd {
    font-size: 0.72rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    background: var(--surface-2, #1a1a1a);
    padding: 2px 8px;
    border-radius: 4px;
    color: var(--text-muted, #888);
    border: 1px solid var(--border, #2a2a2a);
}
.cmd-palette-results {
    list-style: none;
    margin: 0;
    padding: 6px 0;
    max-height: 48vh;
    overflow-y: auto;
}
.cmd-palette-result {
    padding: 10px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    border-left: 2px solid transparent;
}
.cmd-palette-result:hover,
.cmd-palette-result.active {
    background: var(--surface-2, #1a1a1a);
    border-left-color: var(--accent, #60a5fa);
}
.cmd-palette-result-label { flex: 1; color: var(--text); }
.cmd-palette-result-cat {
    color: var(--text-muted, #888);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.cmd-palette-result-kbd {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
    background: var(--surface-2, #1a1a1a);
    padding: 2px 8px;
    border-radius: 4px;
    color: var(--text-muted, #888);
    border: 1px solid var(--border, #2a2a2a);
}
.cmd-palette-empty {
    padding: 22px;
    text-align: center;
    color: var(--text-muted, #888);
    font-size: 0.9rem;
}
.cmd-palette-hint {
    padding: 10px 18px;
    color: var(--text-muted, #888);
    font-size: 0.75rem;
    border-top: 1px solid var(--border, #2a2a2a);
    text-align: center;
}
@media (max-width: 600px) {
    .cmd-palette { padding-top: 6vh; }
    .cmd-palette-kbd { display: none; }
    .cmd-palette-hint { display: none; }
}

/* Simple-mode escape hatch rendered directly below the 8-tile grid so the
   user finds Advanced at the point of friction (not back at the top). */
.simple-more-hint { display: none; }
body.mode-simple .simple-more-hint {
    display: block;
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-muted, #888);
    margin: 14px 0 0;
    line-height: 1.5;
}
.simple-more-hint-link {
    background: none;
    border: none;
    padding: 0;
    margin-left: 4px;
    color: var(--accent, #60a5fa);
    font: inherit;
    cursor: pointer;
    border-bottom: 1px dashed transparent;
    transition: border-color 0.15s;
}
.simple-more-hint-link:hover { border-bottom-color: currentColor; }
@media (max-width: 480px) {
  .preflight-modal { padding: 18px; }
  .preflight-actions { flex-direction: column-reverse; }
  .preflight-btn { width: 100%; }
}

/* ── nav icon-only button ─────────────────────────────────────────── */
.nav-btn-icon {
    padding: 7px;
    gap: 0;
}

/* Drawer-only links are always hidden on desktop */
.nav-drawer-only { display: none; }

/* --- Toast --- */
.toast {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    max-width: min(480px, calc(100vw - 32px));
    background: linear-gradient(135deg, rgba(30, 31, 34, 0.96), rgba(15, 16, 18, 0.96));
    color: var(--text);
    padding: 14px 20px 14px 46px;
    border-radius: 12px;
    font-size: 0.9rem;
    line-height: 1.4;
    font-weight: 500;
    border: 1px solid rgba(96, 165, 250, 0.3);
    z-index: 1000;
    animation: toastIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.5),
        0 4px 12px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    /* Glyph (ℹ︎) as a leading accent; swaps via modifier classes for other types. */
    background-image:
        linear-gradient(135deg, rgba(30, 31, 34, 0.96), rgba(15, 16, 18, 0.96)),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2360a5fa' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='16' x2='12' y2='12'/><line x1='12' y1='8' x2='12.01' y2='8'/></svg>");
    background-repeat: no-repeat, no-repeat;
    background-position: 0 0, 14px center;
    background-size: 100% 100%, 20px 20px;
}
.toast.toast-success {
    border-color: rgba(52, 211, 153, 0.35);
    background-image:
        linear-gradient(135deg, rgba(30, 31, 34, 0.96), rgba(15, 16, 18, 0.96)),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2334d399' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>");
}
.toast.toast-error {
    border-color: rgba(251, 113, 133, 0.45);
    background-image:
        linear-gradient(135deg, rgba(30, 31, 34, 0.96), rgba(15, 16, 18, 0.96)),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fb7185' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='8' x2='12' y2='12'/><line x1='12' y1='16' x2='12.01' y2='16'/></svg>");
}
.toast.toast-hiding {
    animation: toastOut 0.25s cubic-bezier(0.4, 0, 1, 1) forwards;
}
@keyframes toastIn {
    from { opacity: 0; transform: translateX(-50%) translateY(16px) scale(0.96); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
@keyframes toastOut {
    from { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
    to   { opacity: 0; transform: translateX(-50%) translateY(8px) scale(0.98); }
}
@media (prefers-reduced-motion: reduce) {
    .toast { animation: none; }
    .toast.toast-hiding { animation: none; opacity: 0; }
}

/* --- QR Scanner --- */
.scanner-section {
    padding: 0 0 48px;
    max-width: 500px;
    margin: 0 auto;
}

.scanner-layout {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.scanner-area {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-1);
    overflow: hidden;
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.scanner-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 40px 24px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.875rem;
}

.scanner-btns {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.scanner-video-wrap {
    position: relative;
    width: 100%;
}

.scanner-video-wrap video {
    display: block;
    width: 100%;
    height: auto;
}

.scanner-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.scanner-frame {
    width: 200px;
    height: 200px;
    border: 2px solid var(--blue);
    border-radius: 12px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.3);
    animation: scanPulse 2s ease-in-out infinite;
}

@keyframes scanPulse {
    0%, 100% { border-color: var(--blue); }
    50% { border-color: var(--green); }
}

.scanner-stop-btn {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
}

.scanner-video-actions {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
}

#scanner-torch-btn.torch-on {
    background: var(--blue);
    color: var(--bg);
    border-color: var(--blue);
}

.scanner-drop-active {
    outline: 3px dashed var(--blue);
    outline-offset: -8px;
    background: rgba(96, 165, 250, 0.05);
}

.scanner-result {
    border: 1px solid var(--border-hover);
    border-radius: var(--radius);
    background: var(--surface-1);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    animation: qrFadeIn 0.3s ease;
}

.scanner-result-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.scanner-result-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
/* When a non-QR format is active (Aztec, Data Matrix, PDF417, AAMVA,
   1D barcodes), QR-specific style controls (templates, my-styles, dot/eye
   shapes, scanability badge, frame, logo) don't apply, bwip-js renders
   monochrome with FG/BG only. Hiding them prevents user confusion where
   they'd toggle a setting and see no effect. The "Format note" panel
   appears in their place to explain. */
body.is-non-qr .qr-only-control { display: none !important; }
body.is-non-qr .scanability-badge { display: none !important; }

/* AAMVA driver-license form: 3-column responsive layout for short fields. */
.aamva-row-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
}
@media (max-width: 560px) {
    .aamva-row-3 { grid-template-columns: 1fr; }
}
.aamva-disclaimer {
    border-left: 3px solid var(--orange, #f59e0b);
    background: rgba(245, 158, 11, 0.08);
    padding: 10px 12px;
    border-radius: 6px;
    margin-bottom: 14px;
    font-size: 0.8125rem;
    line-height: 1.5;
}

/* Structured License Preview card rendered when scanner decodes AAMVA. */
.aamva-preview {
    border: 1px solid var(--border-hover);
    border-radius: 12px;
    padding: 16px;
    background: linear-gradient(180deg, var(--surface-1), var(--surface-2));
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 18px;
    margin-top: 8px;
}
.aamva-preview-header {
    grid-column: 1 / -1;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
    padding-bottom: 10px;
    margin-bottom: 6px;
}
.aamva-preview-header strong {
    font-size: 1.0625rem;
    letter-spacing: -0.01em;
}
.aamva-preview-header span {
    color: var(--text-muted);
    font-size: 0.8125rem;
}
.aamva-preview dt {
    color: var(--text-muted);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}
.aamva-preview dd {
    margin: 0 0 4px 0;
    color: var(--text);
    font-size: 0.9375rem;
    font-weight: 500;
}
.aamva-preview-row {
    min-width: 0;
}

/* Format-info panel rendered when non-QR is active (HTML for it lives in
   index.html with id="non-qr-style-note"). */
body:not(.is-non-qr) #non-qr-style-note { display: none; }

/* Smart-parser structured cards: rendered when scanner detects a known
   schema (vCard, WIFI:, otpauth, BIP-21, geo:, etc.) instead of a raw
   payload blob. Same visual family as .aamva-preview. */
.scan-parsed-card {
    border: 1px solid var(--border-hover);
    border-radius: 12px;
    padding: 14px 16px;
    background: linear-gradient(180deg, var(--surface-1), var(--surface-2));
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.scan-parsed-header {
    border-bottom: 1px solid var(--border);
    padding-bottom: 8px;
}
.scan-parsed-header strong {
    font-size: 1rem;
    color: var(--text);
}
.scan-parsed-warning {
    background: rgba(245, 158, 11, 0.12);
    border-left: 3px solid #f59e0b;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--text);
}
.scan-parsed-fields {
    display: grid;
    grid-template-columns: minmax(110px, 1fr) 2fr;
    gap: 4px 14px;
    margin: 0;
}
.scan-parsed-fields dt {
    color: var(--text-muted);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    align-self: center;
}
.scan-parsed-fields dd {
    margin: 0;
    color: var(--text);
    font-size: 0.875rem;
    word-break: break-word;
}
.scan-parsed-sensitive {
    -webkit-text-security: disc;
    text-security: disc;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.scan-parsed-note {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
}
.scan-parsed-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.scan-parsed-raw {
    border-top: 1px solid var(--border);
    padding-top: 6px;
    font-size: 0.75rem;
}
.scan-parsed-raw summary {
    cursor: pointer;
    color: var(--text-muted);
}
.scan-parsed-raw pre {
    background: var(--surface-2);
    padding: 10px;
    border-radius: 6px;
    overflow-x: auto;
    font-size: 0.6875rem;
    color: var(--text-muted);
    white-space: pre-wrap;
    word-break: break-all;
    margin: 6px 0 0;
}

/* Detected-format chip displayed alongside the result label.
   E.g. "QR Code", "Aztec Code", "PDF417, Driver's License". */
.scanner-format-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--blue);
    background: rgba(96, 165, 250, 0.12);
    border: 1px solid rgba(96, 165, 250, 0.3);
    border-radius: 999px;
    text-transform: none;
    letter-spacing: 0;
}

.scanner-result-content {
    font-size: 0.9375rem;
    color: var(--text);
    word-break: break-all;
    line-height: 1.6;
    padding: 12px;
    background: var(--surface-2);
    border-radius: 8px;
}

.scanner-result-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* --- Contrast Warning --- */
.contrast-warning {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.8125rem;
    line-height: 1.5;
    animation: qrFadeIn 0.3s ease;
}

.contrast-warning svg {
    flex-shrink: 0;
    margin-top: 1px;
}

.contrast-warning.warning-low {
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.3);
    color: #fbbf24;
}

.contrast-warning.warning-fail {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

/* --- Crop Modal --- */
.crop-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.crop-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

.crop-dialog {
    position: relative;
    background: var(--surface-1);
    border: 1px solid var(--border-hover);
    border-radius: var(--radius-lg);
    padding: 24px;
    max-width: 500px;
    max-height: calc(100dvh - 48px);
    width: calc(100% - 32px);
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
}

.crop-dialog h3 {
    font-size: 1.125rem;
    font-weight: 600;
}

.crop-hint {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.crop-container {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--surface-2);
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}

.crop-container img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 50dvh;
    object-fit: contain;
}

.crop-selection {
    position: absolute;
    border: 2px solid var(--blue);
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
    cursor: move;
}

.crop-handle {
    position: absolute;
    width: 20px;
    height: 20px;
    background: var(--blue);
    border: 2px solid var(--bg);
    border-radius: 50%;
}

.crop-handle-nw { top: -10px; left: -10px; cursor: nw-resize; }
.crop-handle-ne { top: -10px; right: -10px; cursor: ne-resize; }
.crop-handle-sw { bottom: -10px; left: -10px; cursor: sw-resize; }
.crop-handle-se { bottom: -10px; right: -10px; cursor: se-resize; }

.crop-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.crop-actions .btn {
    flex: 0;
}

/* --- Business Card Designer --- */
.btn-design-card {
    margin-top: 12px;
    width: 100%;
    justify-content: center;
}

/* --- Custom modal (alert/confirm/prompt replacement) --- */
.custom-modal {
    position: fixed;
    inset: 0;
    z-index: 2200;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

.custom-dialog {
    position: relative;
    background: var(--surface-1);
    border: 1px solid var(--border-hover);
    border-radius: var(--radius-lg);
    padding: 22px;
    width: min(440px, calc(100% - 32px));
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.custom-modal-title {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--text);
    margin: 0;
}

.custom-modal-message {
    font-size: 0.9375rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
}

.custom-modal-input {
    width: 100%;
    padding: 10px 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 0.9375rem;
    font-family: inherit;
}

.custom-modal-input:focus {
    outline: none;
    border-color: var(--blue);
}

.custom-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
}

.card-modal {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(6px);
}

.card-dialog {
    position: relative;
    background: var(--surface-1);
    border: 1px solid var(--border-hover);
    border-radius: var(--radius-lg);
    width: min(960px, calc(100% - 32px));
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.card-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}

.card-dialog-header h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
}

.card-close-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    transition: background 0.15s, color 0.15s;
}

.card-close-btn:hover {
    background: var(--surface-2);
    color: var(--text);
}

.card-dialog-body {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 20px;
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.card-preview-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;
    position: sticky;
    top: 0;
    align-self: start;
}

.card-safe-area-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}

.card-safe-area-overlay .csa-bleed {
    position: absolute;
    border: 2px dashed #ef4444;
}

.card-safe-area-overlay .csa-safe {
    position: absolute;
    border: 2px dashed #10b981;
}

.info-lang-banner {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 0.875rem;
    color: var(--text-muted);
    margin: 0 0 24px;
}

.linkinbio-links {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px 12px;
    margin-top: 12px;
}

.linkinbio-links legend {
    font-size: 12px;
    color: var(--text-muted);
    padding: 0 6px;
}

.linkinbio-row {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 6px;
    margin-bottom: 6px;
}

.linkinbio-row input {
    font-size: 13px;
    padding: 8px 10px;
}

.linkinbio-links details summary {
    font-size: 12px;
    color: var(--text-muted);
    cursor: pointer;
    padding: 8px 0 4px;
    user-select: none;
}

.card-visibility-toggles {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 12px 10px;
    margin-top: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 12px;
}

.card-visibility-toggles legend {
    font-size: 12px;
    color: var(--text-muted);
    padding: 0 6px;
}

.card-visibility-toggles .checkbox-label {
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.card-modal.vcf-drop-active::after {
    content: "Drop .vcf to import";
    position: fixed;
    inset: 0;
    background: rgba(99, 102, 241, 0.15);
    color: #fff;
    font-size: 24px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 9999;
    border: 4px dashed #6366f1;
}

#card-canvas,
#card-canvas-back {
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 7 / 4;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

#card-canvas-back {
    margin-top: 12px;
}

.card-preview-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.card-controls {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
}

/* Collapsible card sections via <details> */
.card-section {
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}

.card-section > summary {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    padding: 10px 14px;
    cursor: pointer;
    user-select: none;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--surface-2);
}

.card-section > summary::-webkit-details-marker { display: none; }

.card-section > summary::before {
    content: "\25B8";
    display: inline-block;
    transition: transform 0.15s;
    font-size: 10px;
}

.card-section[open] > summary::before {
    transform: rotate(90deg);
}

.card-section > :not(summary) {
    padding: 12px 14px;
}

/* Preset thumbnail grid */
.card-preset-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    padding: 10px 14px !important;
}

.card-preset-btn {
    aspect-ratio: 7 / 4;
    background: var(--surface-2);
    background-size: cover;
    background-position: center;
    border: 2px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: 0;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.12s;
    position: relative;
    overflow: hidden;
}

.card-preset-btn::after {
    content: attr(aria-label);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2px 4px;
    background: rgba(0,0,0,0.65);
    color: #fff;
    font-size: 9px;
    text-align: center;
    line-height: 1.3;
    opacity: 0;
    transition: opacity 0.15s;
}

.card-preset-btn:hover::after,
.card-preset-btn.active::after {
    opacity: 1;
}

.card-preset-btn:hover {
    border-color: var(--border-hover);
    transform: scale(1.04);
}

.card-preset-btn.active {
    border-color: var(--blue);
    box-shadow: 0 0 0 1px var(--blue);
}

/* Color picker with hex input */
.card-color-picker-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.card-hex-input {
    width: 72px;
    padding: 4px 6px;
    font-size: 12px;
    font-family: ui-monospace, SFMono-Regular, monospace;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    text-transform: uppercase;
}

/* Color swatches row */
.card-color-swatches {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding-top: 8px;
}

.card-swatch-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--border);
    cursor: pointer;
    transition: transform 0.1s, border-color 0.1s;
    padding: 0;
}

.card-swatch-btn:hover {
    transform: scale(1.2);
    border-color: var(--text);
}

.card-color-row,
.card-option-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.card-color-row label,
.card-option-row label {
    font-size: 0.8125rem;
    color: var(--text);
}

.card-color-row input[type="color"] {
    width: 40px;
    height: 28px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    padding: 2px;
}

.card-option-row select {
    flex: 0 0 auto;
    min-width: 150px;
    padding: 8px 36px 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background-color: var(--surface-2);
    color: var(--text);
    font-size: 0.875rem;
    font-family: inherit;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
}

.card-option-row select:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
}

.card-option-row select:hover {
    border-color: var(--border-hover);
}

.card-option-row input[type="text"],
.card-option-row input[type="number"] {
    flex: 0 0 auto;
    min-width: 150px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
    color: var(--text);
    font-size: 0.875rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.card-option-row input[type="text"]:focus,
.card-option-row input[type="number"]:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
}

.card-option-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--blue);
    cursor: pointer;
}

/* Stacked text input row: label on top, full-width input below.
   Used for tagline / QR caption where 150px side-by-side is too cramped.
   Selector is heavily specified so nothing in the modal can override
   (the BCD modal has been victim to inheritance bugs in the past). */
.card-modal .card-text-row,
.card-text-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px;
    padding: 12px 0;
    margin: 0;
}
.card-modal .card-text-row + .card-text-row,
.card-text-row + .card-text-row {
    border-top: 1px dashed var(--border);
}
.card-modal .card-text-row > label,
.card-text-row > label {
    font-size: 0.75rem !important;
    color: var(--text-secondary) !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.card-modal .card-text-row > input[type="text"],
.card-text-row > input[type="text"] {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 11px 14px !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    background: var(--surface-2) !important;
    color: var(--text) !important;
    font-size: 0.9375rem !important;
    font-family: inherit !important;
    outline: none !important;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s !important;
    margin: 0 !important;
}
.card-modal .card-text-row > input[type="text"]:hover,
.card-text-row > input[type="text"]:hover {
    background: var(--surface-3) !important;
}
.card-modal .card-text-row > input[type="text"]::placeholder,
.card-text-row > input[type="text"]::placeholder {
    color: var(--text-muted) !important;
    opacity: 0.55;
    font-style: italic;
}
.card-modal .card-text-row > input[type="text"]:focus,
.card-text-row > input[type="text"]:focus {
    border-color: var(--blue) !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.18) !important;
    background: var(--surface-3) !important;
}

/* Print services modal */
.print-services-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.print-services-modal {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    max-width: 560px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 24px;
}
.print-services-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.print-services-header h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
}
.print-services-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    transition: color 0.15s;
}
.print-services-close:hover { color: var(--text); }
.print-services-sub {
    font-size: 0.8125rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 16px;
}
.print-services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}
.print-service-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-2);
    text-decoration: none;
    color: var(--text);
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.print-service-card:hover {
    border-color: var(--blue);
    background: var(--surface-3);
    transform: translateY(-1px);
}
.print-service-name {
    font-weight: 700;
    font-size: 0.9375rem;
}
.print-service-tag {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--blue);
    font-weight: 600;
}
.print-service-price {
    font-size: 0.8125rem;
    color: var(--text-muted);
}
.print-services-note {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.4;
    padding: 10px 12px;
    background: var(--surface-2);
    border-radius: 8px;
    border: 1px dashed var(--border);
}
@media (max-width: 480px) {
    .print-services-grid { grid-template-columns: 1fr; }
}

/* "Show more layouts" expander inside preset grid details */
.card-preset-more {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    padding: 4px 0 0;
}
.card-preset-more-btn {
    background: transparent;
    border: 1px dashed var(--border-hover);
    color: var(--text-muted);
    padding: 8px 14px;
    font-size: 0.75rem;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.15s, color 0.15s;
}
.card-preset-more-btn:hover {
    border-color: var(--blue);
    color: var(--text);
}

/* --- Section label row with right-aligned action (templates etc.) --- */
.section-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}
.section-label-row .section-label {
    margin-bottom: 0;
}
.section-label-row .btn-sm {
    padding: 4px 10px;
    font-size: 0.75rem;
    gap: 4px;
}

/* --- Card dialog header: kebab menu + close button --- */
.card-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}
.overflow-menu {
    position: relative;
}
.overflow-menu-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.overflow-menu-btn:hover,
.overflow-menu-btn[aria-expanded="true"] {
    background: var(--surface-2);
}
.overflow-menu-list {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 200px;
    padding: 6px;
    background: var(--surface-1);
    border: 1px solid var(--border-hover);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    display: none;
    flex-direction: column;
    gap: 2px;
    z-index: 100;
}
.overflow-menu-list.open {
    display: flex;
}
.overflow-menu-list button,
.overflow-menu-list .overflow-menu-file {
    display: block;
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: transparent;
    color: var(--text);
    text-align: left;
    font: inherit;
    font-size: 0.875rem;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.12s;
}
.overflow-menu-list button:hover,
.overflow-menu-list button:focus-visible,
.overflow-menu-list .overflow-menu-file:hover,
.overflow-menu-list .overflow-menu-file:focus-visible {
    background: var(--surface-2);
    outline: none;
}

/* Card dialog footer: make Cancel left, downloads right, with a flexible
   spacer so buttons never overflow on narrow screens. */
.card-dialog-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.card-dialog-footer-spacer {
    flex: 1 1 auto;
    min-width: 0;
}
@media (max-width: 560px) {
    .card-dialog-footer {
        flex-direction: column-reverse;
        align-items: stretch;
    }
    .card-dialog-footer-spacer {
        display: none;
    }
    .card-dialog-footer .btn {
        width: 100%;
    }
}

/* --- Scannability validator badge --- */
.scanability-badge {
    position: absolute;
    bottom: -18px;
    right: 12px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    backdrop-filter: blur(8px);
    pointer-events: auto;
    cursor: help;
    display: none;
    z-index: 2;
}
.scanability-badge.ok {
    display: inline-block;
    background: rgba(34, 197, 94, 0.18);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.4);
}
.scanability-badge.fail {
    display: inline-block;
    background: rgba(239, 68, 68, 0.18);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.5);
}
.qr-preview {
    position: relative;
}

/* --- Info pages (privacy / terms / security / about / blog / vs) --- */
.info-page {
    max-width: 760px;
    margin: 0 auto;
    padding: 80px 24px 96px;
}
.info-article h1 {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    margin: 0 0 12px;
    line-height: 1.1;
    background: linear-gradient(135deg, var(--text) 0%, var(--text-muted) 120%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.info-lead {
    font-size: 1.25rem;
    color: var(--text-muted);
    margin: 0 0 48px;
    line-height: 1.55;
    font-weight: 400;
    max-width: 640px;
}
.info-article h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 48px 0 16px;
    letter-spacing: -0.018em;
    color: var(--text);
}
.info-article h3 {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 32px 0 12px;
    letter-spacing: -0.01em;
    color: var(--text);
}
.info-article p {
    line-height: 1.75;
    margin: 0 0 20px;
    color: var(--text);
    font-size: 1.05rem;
}
.info-article a {
    color: var(--blue, #60a5fa);
    text-decoration: underline;
    text-decoration-color: rgba(96, 165, 250, 0.35);
    text-underline-offset: 3px;
    transition: text-decoration-color 0.15s;
}
.info-article a:hover {
    text-decoration-color: currentColor;
}
.info-article code {
    background: var(--surface-2);
    padding: 2px 7px;
    border-radius: 5px;
    font-size: 0.9em;
    border: 1px solid var(--border);
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.info-article strong {
    color: var(--text);
    font-weight: 600;
}
.info-meta {
    margin-top: 64px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.875rem;
    font-style: italic;
}
.info-article pre {
    background: var(--surface-2);
    border: 1px solid var(--border);
    padding: 16px 20px;
    border-radius: 10px;
    overflow-x: auto;
    font-size: 0.9em;
    line-height: 1.55;
    margin: 24px 0;
}
.info-article pre code {
    background: transparent;
    padding: 0;
    border: none;
}
.info-article ul, .info-article ol {
    line-height: 1.75;
    margin: 0 0 24px;
    padding-left: 28px;
    font-size: 1.05rem;
}
.info-article li {
    margin-bottom: 10px;
}
.info-article ul li::marker {
    color: var(--blue, #60a5fa);
}
.info-article .vs-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 24px 0 32px;
    font-size: 0.95em;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}
.info-article .vs-table th,
.info-article .vs-table td {
    border-bottom: 1px solid var(--border);
    padding: 12px 16px;
    text-align: left;
    vertical-align: top;
}
.info-article .vs-table tr:last-child th,
.info-article .vs-table tr:last-child td {
    border-bottom: none;
}
.info-article .vs-table th {
    background: var(--surface-2);
    font-weight: 600;
    color: var(--text);
}
.info-article .vs-table td:first-child {
    font-weight: 500;
    color: var(--text);
}
.info-article .vs-table td:nth-child(2) {
    color: #4ade80;
}
.info-article .blog-index {
    list-style: none;
    padding-left: 0;
    margin-top: 32px;
}
.info-article .blog-index li {
    padding: 0;
    margin-bottom: 20px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    transition: border-color 0.15s, transform 0.15s;
}
.info-article .blog-index li::marker {
    display: none;
    content: none;
}
.info-article .blog-index li:hover {
    border-color: var(--blue, #60a5fa);
    transform: translateY(-2px);
}
.info-article .blog-index li a {
    display: block;
    padding: 20px 24px;
    text-decoration: none;
    color: var(--text);
}
.info-article .blog-index li a strong {
    display: block;
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--text);
}

/* Blog post body tweaks */
.info-article blockquote {
    border-left: 3px solid var(--blue, #60a5fa);
    padding: 8px 20px;
    margin: 24px 0;
    color: var(--text-muted);
    font-style: italic;
}
.info-article hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 48px 0;
}
.footer-nav {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.footer-nav a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.875rem;
}
.footer-nav a:hover {
    color: var(--text);
}

.card-dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px 20px;
    border-top: 1px solid var(--border);
}

@media (max-width: 720px) {
    .card-dialog-body {
        grid-template-columns: 1fr;
    }
    .card-preview-wrap {
        position: sticky;
        top: 0;
        z-index: 5;
        background: var(--surface-1);
        padding: 10px 0;
        border-bottom: 1px solid var(--border);
    }
    #card-canvas, #card-canvas-back {
        max-height: 180px;
        width: auto;
        margin: 0 auto;
    }
    .card-preview-hint { display: none; }
    .card-controls {
        gap: 8px;
        padding-bottom: 70px;
    }
    .card-dialog-footer {
        position: sticky;
        bottom: 0;
        background: var(--surface-1);
        border-top: 1px solid var(--border);
        z-index: 5;
    }
    .card-preset-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .card-section > :not(summary) {
        padding: 8px 10px;
    }
}

/* --- Mobile FAB --- */
.mobile-fab {
    display: none;
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--blue);
    color: var(--bg);
    border: none;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(96, 165, 250, 0.4);
    z-index: 50;
    transition: transform 0.2s;
}

.mobile-fab:hover {
    transform: scale(1.05);
}

.mobile-fab.visible {
    display: flex;
}

/* --- Landing Page SEO Content --- */
.seo-content {
    max-width: 720px;
    margin: 48px auto;
    padding: 0 20px;
}

.seo-content h2 {
    font-size: 1.375rem;
    font-weight: 700;
    margin: 32px 0 12px;
    letter-spacing: -0.01em;
}

.seo-content h2:first-child {
    margin-top: 0;
}

.seo-content p {
    color: var(--text-secondary);
    font-size: 0.9375rem;
    line-height: 1.7;
    margin: 0 0 12px;
}

.seo-content a {
    color: var(--blue);
    text-decoration: none;
}

.seo-content a:hover {
    text-decoration: underline;
}

.seo-content ul, .seo-content ol {
    color: var(--text-secondary);
    font-size: 0.9375rem;
    line-height: 1.7;
    padding-left: 24px;
    margin: 0 0 16px;
}

.seo-content li {
    margin-bottom: 6px;
}

/* --- All QR Types Link Grid --- */
.type-links {
    max-width: 720px;
    margin: 32px auto 48px;
    padding: 0 20px;
}

.type-links h2 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 16px;
}

.type-links-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.type-links-grid a {
    display: inline-block;
    padding: 6px 14px;
    background: var(--surface-2);
    border: 1px solid var(--surface-3);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.type-links-grid a:hover {
    background: var(--surface-3);
    color: var(--text);
}

.type-link-current {
    display: inline-block;
    padding: 6px 14px;
    background: var(--blue);
    border-radius: 8px;
    color: var(--bg);
    font-size: 0.8125rem;
    font-weight: 600;
}

/* --- Field Validation --- */
.input-warning {
    border-color: #f59e0b !important;
    box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.3);
}

.field-validation {
    display: block;
    color: #f59e0b;
    font-size: 0.75rem;
    margin-top: 4px;
    line-height: 1.4;
}

/* --- Language Switcher --- */
.lang-switcher {
    appearance: none;
    -webkit-appearance: none;
    background: var(--surface-2);
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 28px 6px 10px;
    font-size: 0.8125rem;
    font-family: inherit;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23a3a3a3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    transition: border-color 0.2s;
}

.lang-switcher:hover {
    border-color: var(--border-hover);
    color: var(--text);
}

.lang-switcher:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

.lang-switcher option {
    background: var(--surface-2);
    color: var(--text);
}

/* --- Print Styles --- */
@media print {
    body {
        background: #fff;
        color: #000;
    }

    /* Strip colorblind simulation filters when printing, printers
       reproduce true colors, and we don't want to bake a sim into output. */
    .qr-preview.cb-protanopia .qr-canvas-wrap,
    .qr-preview.cb-deuteranopia .qr-canvas-wrap,
    .qr-preview.cb-tritanopia .qr-canvas-wrap {
        filter: none !important;
    }

    .bg-orbs, .site-header, .hero, .mode-toggle, .controls-panel,
    .quick-actions, .history-panel, .sign-cta, .how-it-works, .faq,
    .site-footer, .scanner-section, .mobile-fab, .toast, .skip-link {
        display: none !important;
    }

    .generator-layout {
        display: block;
    }

    .preview-panel {
        position: static;
    }

    .qr-preview {
        border: none;
        background: none;
        padding: 0;
        display: flex;
        justify-content: center;
        min-height: auto;
    }

    .qr-canvas-wrap {
        box-shadow: none;
        padding: 0;
    }

    /* Force the QR canvas to its rendered size for crisp print output. */
    #qr-canvas {
        max-width: none;
        width: 100%;
        height: auto;
    }

    main {
        max-width: none;
        padding: 40px;
    }

    @page {
        margin: 12mm;
    }
}

/* --- Coarse-pointer touch target sizes (WCAG 2.5.8) --- */
@media (pointer: coarse) {
    .btn-sm,
    .nav-btn,
    .lang-switcher,
    .panel-tab,
    .cat-btn,
    .type-btn,
    .template-btn,
    .history-item,
    .batch-preview-item,
    .logo-preset-btn,
    .card-preset-btn {
        min-height: 44px;
        min-width: 44px;
    }
}

/* --- Reduced motion: respect user OS preference (WCAG 2.3.3) --- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .bg-orbs {
        display: none !important;
    }
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .generator-layout {
        grid-template-columns: 1fr;
    }

    .preview-panel {
        position: static;
    }

    .hero { padding: 32px 0 20px; }

    /* Hamburger appears, nav becomes a slide-down drawer */
    .nav-hamburger {
        display: inline-flex;
    }

    .header-nav {
        position: fixed;
        top: 64px;
        right: 12px;
        left: 12px;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        padding: 14px;
        background: var(--surface-1);
        border: 1px solid var(--border-hover);
        border-radius: var(--radius-lg);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
        z-index: 1550;
        transform: translateY(-12px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: transform 0.2s, opacity 0.2s, visibility 0s linear 0.2s;
    }

    body.nav-open .header-nav {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: transform 0.2s, opacity 0.2s;
    }
    /* Backdrop dims the page when the menu is open, visual confirmation
       that the click registered, plus a click-target to dismiss. */
    body.nav-open::after {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        backdrop-filter: blur(2px);
        z-index: 1540;
        animation: navFadeIn 0.2s ease-out;
    }
    @keyframes navFadeIn {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

    body.nav-open {
        overflow: hidden;
    }

    .header-nav .nav-link,
    .header-nav .nav-btn {
        padding: 12px 14px;
        width: 100%;
        justify-content: flex-start;
        border-radius: var(--radius);
        font-size: 0.9375rem;
    }

    .header-nav .nav-btn span,
    .header-nav .nav-link span {
        font-size: 0.9375rem;
    }

    .header-nav .lang-switcher {
        width: 100%;
        padding: 12px 32px 12px 14px;
        font-size: 0.9375rem;
    }

    .steps {
        grid-template-columns: 1fr;
    }

    .sign-cta-body {
        flex-direction: column;
        text-align: center;
    }

    .sign-cta-badge { text-align: center; }
    .sign-cta-content { align-items: center; }
    .sign-cta p { max-width: none; }
    .sign-cta .btn-gradient { align-self: center; }
    .sign-features { align-items: center; }

    .sign-cta-visual { display: none; }

    .footer-cat-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-nav-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px 24px;
    }

    .type-selector {
        gap: 4px;
    }

    .type-btn {
        padding: 6px 10px;
        font-size: 0.8125rem;
    }

    .template-grid {
        grid-template-columns: repeat(5, 1fr);
    }

    .history-list {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Desktop header: hide nav-links (except sign) and collapse btn text */
    .header-nav .nav-link:not(.sign-link) {
        display: none;
    }

    .nav-btn {
        padding: 6px 8px;
        font-size: 0;
    }

    .nav-btn svg {
        width: 18px;
        height: 18px;
    }

    /* Open drawer: show everything at full size */
    body.nav-open .header-nav .nav-link,
    body.nav-open .header-nav .nav-drawer-only {
        display: flex;
    }

    body.nav-open .header-nav .nav-btn {
        font-size: 0.9375rem;
        padding: 12px 14px;
    }

    body.nav-open .header-nav .nav-btn-icon {
        padding: 12px 14px;
        gap: 8px;
    }
}

@media (max-width: 480px) {
    main { padding: 0 16px; }
    .site-header { padding: 12px 16px; }

    .hero h1 { font-size: 1.5rem; }
    .hero-subtitle { font-size: 0.9375rem; }

    .qr-preview { padding: 24px; min-height: 280px; }

    .template-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 4px;
    }

    .type-categories {
        flex-wrap: wrap;
    }

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

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