/* ═══ QR Pro v4 — design tokens: airy white + indigo ═══════════════ */
:root {
    --bg:          #ffffff;
    --surface:     #ffffff;
    --surface-2:   #f5f5f9;
    --surface-3:   #ececf3;
    --surface-4:   #e0dfe9;

    --border:      #e6e5ee;
    --border-2:    #d5d4e2;
    --border-3:    #bcbacb;

    --accent:       #4338ca;
    --accent-mid:   #5b52d8;
    --accent-deep:  #37309f;
    --accent-light: #eef0fd;
    --accent-dim:   rgba(67,56,202,0.07);
    --accent-glow:  rgba(67,56,202,0.16);

    --text-1: #17162b;
    --text-2: #5d5c72;
    --text-3: #9998ac;

    --success:      #16a34a;
    --success-dim:  rgba(22,163,74,0.10);
    --warning-clr:  #c2550a;
    --warning-dim:  rgba(194,85,10,0.09);
    --danger-clr:   #dc2626;

    --radius-sm: 8px;
    --radius:    12px;
    --radius-lg: 18px;
    --radius-xl: 26px;

    --shadow-sm: 0 1px 2px rgba(23,22,43,0.05);
    --shadow:    0 4px 16px rgba(23,22,43,0.06), 0 1px 4px rgba(23,22,43,0.05);
    --shadow-lg: 0 18px 50px rgba(67,56,202,0.10), 0 4px 14px rgba(23,22,43,0.06);
}

/* ═══ Reset & base ═════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text-1);
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

.container { max-width: 1060px; margin: 0 auto; padding: 0 22px; }

/* Hero wash — soft indigo gradient behind nav + hero + tool */
.hero-zone {
    background: linear-gradient(180deg, #eef0fd 0%, #f8f8fc 42%, #ffffff 100%);
    border-bottom: 1px solid var(--border);
    padding-bottom: 56px;
}
[dir="rtl"] body { text-align: right; }

/* ═══ Nav ══════════════════════════════════════════════════════════ */
.site-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
    gap: 14px;
    flex-wrap: wrap;
}
.nav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nav-logo {
    width: 34px; height: 34px; border-radius: 9px;
    object-fit: contain; background: var(--surface);
    padding: 4px; border: 1px solid var(--border);
    flex-shrink: 0;
}
.nav-brand-name {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 16px; font-weight: 700;
    color: var(--text-1); letter-spacing: -0.02em;
}
/* v8.5 — the nav links and the language button travel together on the right, so
   the header stays one row. With twelve nav items it wrapped to two rows even at
   1440px; with three it fits beside the logo. */
.nav-right {
    display: flex; align-items: center; gap: 10px;
    margin-left: auto; flex-wrap: nowrap;
}
@media (max-width: 560px) { .nav-right { gap: 6px; } }

.nav-links {
    display: flex; align-items: center; gap: 2px;
    list-style: none; margin: 0; padding: 0;
}
.nav-links a {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13.5px; font-weight: 500;
    color: var(--text-2); text-decoration: none;
    padding: 7px 13px; border-radius: 99px;
    transition: background 0.15s, color 0.15s;
}
.nav-links a:hover { background: var(--accent-dim); color: var(--text-1); }
.nav-links a.active { background: var(--text-1); color: #fff; font-weight: 600; }

/* Language dropdown */
.lang-btn {
    cursor: pointer; font-size: 13px; color: var(--text-2);
    background: rgba(255,255,255,0.7);
    border: 1px solid var(--border-2); border-radius: 99px;
    padding: 6px 13px; display: flex; align-items: center; gap: 7px;
    font-family: 'Plus Jakarta Sans', sans-serif;
}
.lang-btn:hover { border-color: var(--border-3); }
.dropdown-menu {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 6px;
    margin: 0;
    list-style: none;
    min-width: 150px;
}
.dropdown-item {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--text-2);
    text-decoration: none;
    padding: 7px 10px; border-radius: var(--radius-sm);
    transition: background 0.12s, color 0.12s;
}
.dropdown-item:hover { background: var(--accent-light); color: var(--accent-deep); }

/* ═══ Hero ═════════════════════════════════════════════════════════ */
.hero { text-align: center; padding: 40px 0 30px; }
.hero h1 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(30px, 5vw, 46px);
    font-weight: 800; letter-spacing: -0.022em; line-height: 1.12;
    margin: 0 0 14px;
}
.hero .qr-word { display: inline-block; position: relative; color: var(--accent); }
.hero .qr-word::after {
    content: ''; position: absolute; left: -2%; right: -2%; bottom: 4px;
    height: 11px; background: var(--accent-glow); border-radius: 4px; z-index: -1;
}
.hero .hero-sub {
    font-size: 16.5px; color: var(--text-2);
    margin: 0 auto; max-width: 500px;
}
/* .hero-example removed in v8.5 — decorative, aria-hidden, and it cost ~40px
   of fold on every generator page. */

/* ═══ Tool card ════════════════════════════════════════════════════ */
.tool-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    margin-top: 30px;
    overflow: hidden;
}
.tool-grid { display: grid; grid-template-columns: 1fr 380px; }
.tool-left { padding: 28px 30px 30px; border-right: 1px solid var(--border); min-width: 0; }
[dir="rtl"] .tool-left { border-right: 0; border-left: 1px solid var(--border); }

@media (max-width: 880px) {
    .tool-grid { grid-template-columns: 1fr; }
    .tool-left, [dir="rtl"] .tool-left {
        border-right: 0; border-left: 0;
        border-bottom: 1px solid var(--border);
    }
}

/* Type pills (class kept as .type-tab for JS compatibility) */
.type-tabs { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 20px; }
.type-tab {
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13px; font-weight: 500;
    color: var(--text-2); background: var(--surface-2);
    border: 1px solid transparent; border-radius: 99px;
    padding: 7px 14px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    transition: all 0.15s;
}
.type-tab:hover { background: var(--surface-3); color: var(--text-1); }
.type-tab.active {
    background: var(--accent-light); color: var(--accent-deep);
    border-color: rgba(67,56,202,0.25); font-weight: 600;
}
.type-tab svg { width: 13px; height: 13px; }

/* Fields */
.type-fields { display: none; }
.field { margin-bottom: 14px; }
.field-row { display: flex; gap: 12px; }
.field-row .field { flex: 1; }
@media (max-width: 520px) { .field-row { flex-direction: column; gap: 0; } }

.field-label {
    display: block;
    font-size: 13px; font-weight: 600;
    color: var(--text-1);
    margin-bottom: 7px;
}
.field-input {
    width: 100%;
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: 14.5px;
    color: var(--text-1); background: var(--surface);
    border: 1.5px solid var(--border-2); border-radius: var(--radius);
    padding: 11px 14px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
textarea.field-input { border-radius: var(--radius-lg); padding: 14px 16px; }
.field-input:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-glow);
}
.field-input:disabled { opacity: 0.45; cursor: not-allowed; }
.field-input::placeholder { color: var(--text-3); }
select.field-input { cursor: pointer; }

.field-hint {
    font-family: 'Plus Jakarta Sans', sans-serif; font-variant-numeric: tabular-nums; letter-spacing: .02em; font-size: 11px;
    color: var(--text-3); margin-top: 6px;
}

.form-check-dark {
    display: flex; align-items: center; gap: 8px;
    font-size: 13.5px; color: var(--text-2); cursor: pointer;
}
.form-check-dark input { accent-color: var(--accent); width: 15px; height: 15px; }

/* Warning */
#qrWarning {
    display: none;
    background: var(--warning-dim);
    border: 1px solid rgba(194,85,10,0.25);
    border-radius: var(--radius);
    color: var(--warning-clr);
    font-size: 12.5px; line-height: 1.5;
    padding: 10px 14px; margin: 4px 0 12px;
}
#qrWarning div + div { margin-top: 5px; }

/* ═══ Quick style: presets + advanced toggle ═══════════════════════ */
.quick-style-head {
    display: flex; align-items: baseline; justify-content: space-between;
    margin: 18px 0 10px;
}
.quick-style-head .field-label { margin: 0; }

.color-presets { display: flex; gap: 9px; flex-wrap: wrap; }
.color-preset {
    width: 32px; height: 32px; border-radius: 10px; cursor: pointer;
    border: 2px solid transparent; padding: 0;
    transition: transform 0.12s, border-color 0.12s;
    position: relative;
}
.color-preset:hover { transform: scale(1.1); }
.color-preset.active { border-color: var(--accent); }
.color-preset.active::after {
    content: ''; position: absolute; inset: -6px;
    border: 2px solid var(--accent-glow); border-radius: 13px;
}
.color-preset:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.adv-toggle {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12.5px; font-weight: 600; color: var(--accent);
    background: none; border: 0; cursor: pointer; padding: 4px 0;
    display: inline-flex; align-items: center; gap: 5px;
}
.adv-toggle svg { width: 12px; height: 12px; transition: transform 0.2s; }
.adv-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.adv-panel {
    display: none; margin-top: 18px; padding-top: 18px;
    border-top: 1px dashed var(--border-2);
}
.adv-panel.open { display: block; }

/* Advanced field labels use mono eyebrow style */
.adv-panel .field-label {
    font-family: 'Plus Jakarta Sans', sans-serif; font-variant-numeric: tabular-nums; letter-spacing: .02em; font-size: 10px; font-weight: 500;
    color: var(--text-3); text-transform: uppercase; letter-spacing: 0.11em;
}

/* Shape grid (class kept as .sample-shape for JS compatibility) */
.shape-grid { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.sample-shape {
    width: 52px; height: 52px; border-radius: var(--radius-sm);
    background: var(--surface-2); border: 1.5px solid transparent;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; cursor: pointer; color: var(--text-2);
    transition: all 0.13s;
}
.sample-shape:hover { background: var(--surface-3); }
.sample-shape.selected {
    background: var(--accent-light);
    border-color: var(--accent);
    color: var(--accent-deep);
}
.sample-shape:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sample-shape svg {
    width: 17px; height: 17px;
    fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
}
.shape-label {
    font-family: 'Plus Jakarta Sans', sans-serif; font-variant-numeric: tabular-nums; letter-spacing: .02em; font-size: 8.5px;
    letter-spacing: 0.04em; text-transform: uppercase;
}
.sample-shape-content { display: none; }

/* Sliders */
.slider-row { display: flex; align-items: center; gap: 11px; }
.slider-row input[type="range"] { flex: 1; accent-color: var(--accent); margin: 0; }
.slider-val {
    font-family: 'Plus Jakarta Sans', sans-serif; font-variant-numeric: tabular-nums; letter-spacing: .02em; font-size: 12px;
    color: var(--text-2); min-width: 46px; text-align: right;
}
[dir="rtl"] .slider-val { text-align: left; }

/* Colours */
.color-row { display: flex; align-items: center; gap: 10px; }
.color-swatch-btn {
    width: 30px; height: 30px; border-radius: var(--radius-sm);
    border: 1.5px solid var(--border-2);
    overflow: hidden; flex-shrink: 0; position: relative;
}
.color-swatch-btn input[type="color"] {
    position: absolute; inset: -25%;
    width: 150%; height: 150%;
    border: 0; padding: 0; cursor: pointer;
}
.color-hex-display {
    font-family: 'Plus Jakarta Sans', sans-serif; font-variant-numeric: tabular-nums; letter-spacing: .02em; font-size: 12px; color: var(--text-2);
}
.color-type-select {
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12.5px;
    color: var(--text-2); background: var(--surface-2);
    border: 1px solid var(--border-2); border-radius: var(--radius-sm);
    padding: 6px 8px; cursor: pointer;
}

/* Logo upload */
.logo-upload-zone {
    display: flex; align-items: flex-start; gap: 14px;
    background: var(--surface-2);
    border: 1.5px dashed var(--border-2);
    border-radius: var(--radius-lg);
    padding: 14px;
}
#logoPreview {
    display: none; width: 46px; height: 46px;
    border-radius: var(--radius-sm); object-fit: contain;
    background: #fff; border: 1px solid var(--border);
}
.upload-btn {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12.5px; font-weight: 600; color: var(--accent-deep);
    background: var(--accent-light);
    border: 1px solid rgba(67,56,202,0.25); border-radius: 99px;
    padding: 6px 14px; cursor: pointer;
    transition: background 0.14s;
}
.upload-btn:hover { background: #e2e5fb; }
.remove-logo-btn {
    display: none;
    font-size: 12.5px; font-weight: 500; color: var(--text-2);
    background: none; border: 1px solid var(--border-2); border-radius: 99px;
    padding: 6px 14px; cursor: pointer; margin-left: 7px;
    transition: color 0.14s, border-color 0.14s;
}
.remove-logo-btn:hover { color: var(--danger-clr); border-color: var(--danger-clr); }
[dir="rtl"] .remove-logo-btn { margin-left: 0; margin-right: 7px; }
.logo-note {
    font-family: 'Plus Jakarta Sans', sans-serif; font-variant-numeric: tabular-nums; letter-spacing: .02em; font-size: 11px;
    color: var(--text-3); margin-top: 7px; line-height: 1.4;
}

/* ═══ Preview panel (right) ════════════════════════════════════════ */
.preview-panel {
    background: linear-gradient(180deg, #fafafe 0%, var(--surface-2) 100%);
    padding: 28px 26px;
    display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.qr-canvas-area {
    width: 100%; max-width: 300px;
    border-radius: var(--radius-lg);
    background: #fff; border: 1px solid var(--border);
    box-shadow: var(--shadow);
    display: flex; align-items: center; justify-content: center;
    padding: 16px; min-height: 240px;
}
#qrCode { display: flex; align-items: center; justify-content: center; }
#qrCode canvas { max-width: 100%; height: auto; border-radius: var(--radius-sm); }

.qr-placeholder-inner { text-align: center; color: rgba(23,22,43,0.15); padding: 34px 0; }
.qr-placeholder-inner svg { width: 64px; height: 64px; stroke: currentColor; margin-bottom: 10px; }
.qr-placeholder-inner p {
    font-family: 'Plus Jakarta Sans', sans-serif; font-variant-numeric: tabular-nums; letter-spacing: .02em; font-size: 12px;
    margin: 0; letter-spacing: 0.03em;
}

.qr-loader {
    width: 34px; height: 34px;
    border: 3px solid var(--accent-light);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: qr-spin 0.7s linear infinite;
    margin: 40px auto;
}
@keyframes qr-spin { to { transform: rotate(360deg); } }

.qr-error {
    color: var(--danger-clr); font-size: 13px;
    padding: 20px; text-align: center;
}

/* Stats */
.qr-info-bar {
    display: none; align-items: center; gap: 16px;
    font-family: 'Plus Jakarta Sans', sans-serif; font-variant-numeric: tabular-nums; letter-spacing: .02em; font-size: 11px;
}
.qr-stat { display: flex; align-items: baseline; gap: 5px; }
.qr-stat-label { color: var(--text-3); }
.qr-stat-val { color: var(--text-2); font-weight: 500; }
.qr-stat-sep { width: 1px; height: 12px; background: var(--border-2); }

/* Density */
.density-bar-wrap { display: none; width: 100%; max-width: 300px; }
.density-label-row {
    display: flex; justify-content: space-between; margin-bottom: 5px;
    font-family: 'Plus Jakarta Sans', sans-serif; font-variant-numeric: tabular-nums; letter-spacing: .02em; font-size: 10px;
}
.density-label { color: var(--text-3); text-transform: uppercase; letter-spacing: 0.1em; }
.density-pct { color: var(--text-2); }
.density-track {
    height: 4px; background: var(--surface-3); border-radius: 99px; overflow: hidden;
}
.density-fill {
    height: 100%; width: 0; background: var(--accent);
    border-radius: 99px; transition: width 0.3s, background 0.3s;
}

/* Buttons */
.btn-generate, .btn-png {
    width: 100%;
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: 15px; font-weight: 600;
    color: #fff; background: var(--accent);
    border: 0; border-radius: 14px; padding: 14px 20px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 9px;
    box-shadow: 0 6px 18px var(--accent-glow);
    transition: background 0.15s, transform 0.12s;
}
.btn-generate:hover, .btn-png:hover:not(:disabled) {
    background: var(--accent-deep); transform: translateY(-1px);
}
.btn-png:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
.btn-generate svg, .btn-png svg { width: 16px; height: 16px; }

.btn-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; width: 100%; }
.btn-sec, .btn-util {
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13px; font-weight: 500;
    color: var(--text-2); background: #fff;
    border: 1px solid var(--border-2); border-radius: 11px;
    padding: 10px 12px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    transition: all 0.14s;
}
.btn-sec:hover:not(:disabled), .btn-util:hover {
    border-color: var(--accent); color: var(--accent-deep);
}
.btn-sec:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-sec svg, .btn-util svg { width: 13px; height: 13px; }
.btn-row-3 { width: 100%; }
.btn-row-3 .btn-util { width: 100%; }

/* ═══ Benefits ═════════════════════════════════════════════════════ */
.benefits {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
    padding: 46px 0 4px;
}
@media (max-width: 880px) { .benefits { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .benefits { grid-template-columns: 1fr; } }
.benefit {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 22px 20px;
    transition: transform 0.15s, box-shadow 0.15s;
}
.benefit:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.benefit .b-icon {
    width: 36px; height: 36px; border-radius: 10px;
    background: var(--accent-light); color: var(--accent-deep);
    display: grid; place-items: center; margin-bottom: 13px;
}
.benefit .b-icon svg { width: 17px; height: 17px; }
.benefit h2 {
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: 15px; font-weight: 700;
    margin: 0 0 5px; letter-spacing: -0.01em;
}
.benefit p { font-size: 13px; color: var(--text-2); margin: 0; line-height: 1.55; }

/* Best practices card */
.practices-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 18px 20px;
    width: 100%;
}
.practices-title {
    font-family: 'Plus Jakarta Sans', sans-serif; font-variant-numeric: tabular-nums; letter-spacing: .02em; font-size: 9px; color: var(--text-3);
    text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 12px;
}
.practices-card ul {
    margin: 0; padding: 0; list-style: none;
    display: flex; flex-direction: column; gap: 8px;
}
.practices-card li {
    font-size: 12px; color: var(--text-2);
    display: flex; gap: 8px; align-items: flex-start;
}
.practices-card li::before { content: '—'; color: var(--accent); flex-shrink: 0; }

/* ═══ FAQ ══════════════════════════════════════════════════════════ */
.faq { padding: 46px 0 4px; max-width: 780px; }
.faq-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 22px; font-weight: 800; letter-spacing: -0.022em;
    margin: 0 0 18px;
}
.faq-item {
    border-bottom: 1px solid var(--border);
}
.faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 15px 34px 15px 0;
    font-size: 15px; font-weight: 600; color: var(--text-1);
    position: relative;
    transition: color 0.14s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--accent); }
.faq-item summary::after {
    content: '';
    position: absolute; right: 6px; top: 50%;
    width: 9px; height: 9px;
    border-right: 2px solid var(--text-3);
    border-bottom: 2px solid var(--text-3);
    transform: translateY(-70%) rotate(45deg);
    transition: transform 0.2s;
}
.faq-item[open] summary::after {
    transform: translateY(-25%) rotate(-135deg);
    border-color: var(--accent);
}
.faq-item p {
    margin: 0; padding: 0 40px 18px 0;
    font-size: 14px; color: var(--text-2); line-height: 1.62;
}
[dir="rtl"] .faq-item summary { padding: 15px 0 15px 34px; }
[dir="rtl"] .faq-item summary::after { right: auto; left: 6px; }
[dir="rtl"] .faq-item p { padding: 0 0 18px 40px; }

/* ═══ Footer ═══════════════════════════════════════════════════════ */
.site-footer {
    border-top: 1px solid var(--border);
    margin-top: 52px; padding: 24px 0 32px;
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px;
    font-size: 13px; color: var(--text-3);
}
.footer-links { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-links a { color: var(--text-2); text-decoration: none; transition: color 0.14s; }
.footer-links a:hover { color: var(--accent); }

/* ═══ Toast ════════════════════════════════════════════════════════ */
#toast {
    position: fixed; bottom: 26px; left: 50%;
    transform: translate(-50%, 16px);
    background: var(--text-1); color: #fff;
    font-size: 13.5px; font-weight: 500;
    padding: 11px 22px; border-radius: 99px;
    box-shadow: var(--shadow-lg);
    opacity: 0; pointer-events: none;
    transition: opacity 0.25s, transform 0.25s;
    z-index: 500;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ═══ Content pages (about / privacy / terms / blog) ═══════════════ */
.page-main { padding: 36px 0 10px; }
.page-main h1 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(26px, 4vw, 36px);
    font-weight: 800; letter-spacing: -0.022em;
    margin: 0 0 8px;
}
.page-updated {
    font-family: 'Plus Jakarta Sans', sans-serif; font-variant-numeric: tabular-nums; letter-spacing: .02em; font-size: 12px;
    color: var(--text-3); margin-bottom: 28px;
}
.page-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-xl); box-shadow: var(--shadow);
    padding: 34px 38px; max-width: 780px;
}
@media (max-width: 560px) { .page-card { padding: 24px 20px; } }
.page-card h2 {
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: 18px; font-weight: 700;
    letter-spacing: -0.01em; margin: 28px 0 10px;
}
.page-card h2:first-child { margin-top: 0; }
.page-card p, .page-card li { font-size: 14.5px; color: var(--text-2); }
.page-card ul { padding-left: 20px; }
.page-card li { margin-bottom: 6px; }
.page-card a { color: var(--accent); }
.page-card strong { color: var(--text-1); }

/* Blog cards */
.blog-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
    margin-top: 26px;
}
@media (max-width: 640px) { .blog-grid { grid-template-columns: 1fr; } }
.blog-card {
    display: block; text-decoration: none;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 24px;
    transition: transform 0.15s, box-shadow 0.15s;
}
.blog-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.blog-tag {
    display: inline-block;
    font-family: 'Plus Jakarta Sans', sans-serif; font-variant-numeric: tabular-nums; letter-spacing: .02em; font-size: 10px;
    text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--accent-deep); background: var(--accent-light);
    border-radius: 99px; padding: 3px 11px; margin-bottom: 12px;
}
.blog-card h2 {
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: 17px; font-weight: 700;
    letter-spacing: -0.01em; color: var(--text-1); margin: 0 0 7px;
}
.blog-card p { font-size: 13.5px; color: var(--text-2); margin: 0 0 12px; }
.read-time {
    font-family: 'Plus Jakarta Sans', sans-serif; font-variant-numeric: tabular-nums; letter-spacing: .02em; font-size: 11px; color: var(--text-3);
}

/* Article body */
.article-card { max-width: 720px; }
.article-card h1 { font-size: clamp(24px, 4vw, 32px); }

/* ═══ Utilities & a11y ═════════════════════════════════════════════ */
.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip: rect(0 0 0 0); overflow: hidden;
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.field-input:focus-visible { outline: none; }

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


/* ═══ v5 — module styling controls ════════════════════════════════ */
.style-rows { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.style-row  { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.style-row-label {
    font-size: 12px; font-weight: 600; color: var(--text-2);
    min-width: 58px;
}
.style-swatches { display: flex; gap: 7px; }
.style-swatch {
    width: 42px; height: 42px;
    border: 1.5px solid var(--border-2);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-2);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    padding: 7px;
    transition: border-color .15s, background .15s, color .15s;
}
.style-swatch svg { width: 100%; height: 100%; }
.style-swatch:hover { border-color: var(--accent-mid); color: var(--accent); }
.style-swatch[aria-pressed="true"] {
    border-color: var(--accent);
    background: var(--accent-light);
    color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}
.style-swatch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* SCAN ME frame toggle */
.frame-row { padding-top: 2px; }
.frame-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.frame-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.frame-switch-track {
    position: relative; flex-shrink: 0;
    width: 40px; height: 22px;
    background: var(--border-2);
    border-radius: 999px;
    transition: background .15s;
}
.frame-switch-track::after {
    content: ""; position: absolute; top: 3px; left: 3px;
    width: 16px; height: 16px; border-radius: 50%;
    background: #fff; box-shadow: var(--shadow-sm);
    transition: left .15s;
}
.frame-switch input:checked + .frame-switch-track { background: var(--accent); }
.frame-switch input:checked + .frame-switch-track::after { left: 21px; }
.frame-switch input:focus-visible + .frame-switch-track { outline: 2px solid var(--accent); outline-offset: 2px; }
.frame-switch-label { font-size: 13px; font-weight: 600; color: var(--text-1); }
.frame-text-input {
    width: 130px; padding: 7px 11px;
    border: 1px solid var(--border-2); border-radius: var(--radius-sm);
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12.5px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--text-1); background: var(--surface);
}
.frame-text-input:focus { outline: 2px solid var(--accent-glow); border-color: var(--accent); }

/* Scan check */
.scan-check {
    display: flex; align-items: center; gap: 8px;
    margin-top: 12px;
    font-size: 12.5px; font-weight: 600;
    line-height: 1.45;
}
.scan-check-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.scan-check.pass { color: var(--success); }
.scan-check.pass .scan-check-dot { background: var(--success); }
.scan-check.warn { color: var(--warning-clr); }
.scan-check.warn .scan-check-dot { background: var(--warning-clr); }
.scan-check.fail { color: var(--danger-clr); }
.scan-check.fail .scan-check-dot { background: var(--danger-clr); }

/* NEW badge on type pill */
.type-tab { position: relative; }
.pill-badge-new {
    position: absolute; top: -7px; right: -5px;
    background: var(--success); color: #fff;
    font-size: 8px; font-weight: 800; letter-spacing: .05em;
    padding: 2px 5px; border-radius: 999px;
    line-height: 1.2;
}

/* Landing-page guide section */
.lp-guide { max-width: 720px; margin: 56px auto 0; }
.lp-guide h2 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 22px; font-weight: 800; color: var(--text-1);
    margin: 0 0 12px;
}
.lp-guide h3 { font-size: 16px; font-weight: 700; color: var(--text-1); margin: 22px 0 8px; }
.lp-guide p  { color: var(--text-2); font-size: 14.5px; margin: 0 0 12px; }
.lp-guide ul { color: var(--text-2); font-size: 14.5px; padding-left: 20px; margin: 0 0 12px; }
.lp-guide li { margin-bottom: 6px; }

/* v5.1: seven swatches per row wrap on small screens */
.style-swatches { flex-wrap: wrap; }
@media (max-width: 480px) { .style-swatch { width: 38px; height: 38px; } }

/* ═══ v6 — mode switch (Generate / Scan) ═════════════════════════ */
.mode-switch { display: flex; justify-content: center; margin: 0 0 22px; }
.seg {
    display: flex; gap: 4px; padding: 5px;
    background: var(--surface); border: 1.5px solid var(--border-2);
    border-radius: 999px; box-shadow: var(--shadow-sm);
}
.seg-btn {
    display: inline-flex; align-items: center; gap: 8px;
    border-radius: 999px; padding: 10px 24px;
    font-size: 14px; font-weight: 700; color: var(--text-2);
    text-decoration: none; transition: all .15s;
}
.seg-btn svg { width: 16px; height: 16px; }
.seg-btn:hover { color: var(--accent); background: var(--accent-light); }
.seg-btn.active { background: var(--accent); color: #fff; box-shadow: 0 4px 12px var(--accent-glow); }
.seg-btn.active:hover { color: #fff; background: var(--accent); }

/* ═══ v6 — type picker: Show all pill + inline categorized panel ═ */
.type-tab-more { border-style: dashed; color: var(--accent); font-weight: 700; }
.type-tab-more.open { border-color: var(--accent); background: var(--accent-light); }
.type-tab-more svg { transition: transform .18s; }
.type-tab-more.open svg { transform: rotate(180deg); }

.type-panel {
    overflow: hidden; max-height: 0;
    transition: max-height .28s ease;
    border: 0 solid var(--border); border-radius: var(--radius-md);
    margin: 0;
}
.type-panel.open { max-height: 720px; border-width: 1px; margin: 12px 0 4px; }
.type-panel-inner { padding: 16px 16px 10px; background: var(--surface-2); }
.tp-cat { margin-bottom: 14px; }
.tp-cat:last-child { margin-bottom: 4px; }
.tp-cat-title {
    font-size: 11px; font-weight: 800; letter-spacing: .07em;
    text-transform: uppercase; color: var(--text-3); margin-bottom: 7px;
}
.tp-grid { display: flex; flex-wrap: wrap; gap: 7px; }
.tp-item {
    display: inline-flex; align-items: center; gap: 7px;
    border: 1.5px solid var(--border-2); background: var(--surface);
    border-radius: 9px; padding: 7px 12px;
    font-family: inherit; font-size: 13px; font-weight: 600; color: var(--text-1);
    cursor: pointer; transition: all .13s;
}
.tp-item svg { width: 14px; height: 14px; flex: none; }
.tp-item:hover { border-color: var(--accent-mid); color: var(--accent); }
.tp-item.active { border-color: var(--accent); background: var(--accent-light); color: var(--accent); }
.tp-new {
    font-size: 8.5px; font-weight: 800; color: var(--success);
    border: 1px solid currentColor; border-radius: 999px; padding: 1px 5px;
}

/* ═══ v6 — icon logo grid ════════════════════════════════════════ */
.icon-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.icon-btn {
    width: 36px; height: 36px; padding: 7px;
    border: 1.5px solid var(--border-2); border-radius: 8px;
    background: var(--surface); color: var(--text-2); cursor: pointer;
    transition: all .13s;
}
.icon-btn svg { width: 100%; height: 100%; }
.icon-btn:hover { border-color: var(--accent-mid); color: var(--accent); }
.icon-btn[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-light); color: var(--accent); }

/* ═══ v6 — hub doors ═════════════════════════════════════════════ */
.doors { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 8px 0 4px; }
@media (max-width: 640px) { .doors { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .doors { grid-template-columns: 1fr; } }
.door {
    position: relative; display: flex; gap: 15px; align-items: flex-start;
    border: 1.5px solid var(--border-2); background: var(--surface);
    border-radius: 16px; padding: 22px; text-align: left; text-decoration: none;
    transition: all .16s;
}
.door:hover { border-color: var(--accent-mid); transform: translateY(-2px); box-shadow: 0 14px 34px rgba(67,56,202,.12); }
.door-ico {
    width: 44px; height: 44px; flex: none; border-radius: 11px;
    background: var(--accent-light); color: var(--accent);
    display: flex; align-items: center; justify-content: center;
}
.door-ico svg { width: 22px; height: 22px; }
.door h2 { font-size: 16px; font-weight: 800; color: var(--text-1); margin: 0 0 4px; }
.door p { font-size: 13px; color: var(--text-2); line-height: 1.55; margin: 0; }
.door .door-go { position: absolute; top: 20px; right: 18px; color: var(--text-3); font-weight: 800; }
.door:hover .door-go { color: var(--accent); }

/* ═══ v6 — scanner ═══════════════════════════════════════════════ */
.scan-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 22px; }
@media (max-width: 700px) { .scan-grid { grid-template-columns: 1fr; } }
.scan-drop {
    border: 2px dashed var(--accent-mid); background: var(--accent-light);
    border-radius: 14px; padding: 34px 20px; text-align: center;
    cursor: pointer; transition: all .15s; color: var(--text-1);
}
.scan-drop:hover, .scan-drop.dragover { background: #e3e7fc; }
.scan-drop svg { color: var(--accent); margin-bottom: 10px; }
.scan-drop b { display: block; font-size: 15px; margin-bottom: 4px; }
.scan-drop span { font-size: 12.5px; color: var(--text-2); }
.scan-or { display: flex; align-items: center; gap: 12px; margin: 14px 0; color: var(--text-3); font-size: 11px; font-weight: 700; }
.scan-or::before, .scan-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.cam-btn {
    width: 100%; display: flex; align-items: center; justify-content: center; gap: 9px;
    border: 1.5px solid var(--accent); color: var(--accent); background: var(--surface);
    border-radius: 11px; padding: 12px; font-family: inherit; font-weight: 800; font-size: 14px; cursor: pointer;
}
.cam-btn:hover { background: var(--accent-light); }
.cam-btn.stop { border-color: var(--danger-clr); color: var(--danger-clr); }
#camVideo { width: 100%; border-radius: 12px; margin-top: 12px; display: none; background: #000; }
.scan-priv { margin-top: 12px; font-size: 12px; color: var(--text-3); text-align: center; line-height: 1.5; }
.scan-result { border: 1px solid var(--border); border-radius: 14px; padding: 18px; background: var(--surface-2); }
.scan-result .rt { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; color: var(--success); margin-bottom: 10px; }
.scan-result .rt .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); }
.scan-result .rt.idle { color: var(--text-3); } .scan-result .rt.idle .dot { background: var(--text-3); }
.rkind { display: inline-block; background: var(--accent-light); color: var(--accent); font-size: 10.5px; font-weight: 800; border-radius: 999px; padding: 3px 9px; margin-bottom: 10px; letter-spacing: .04em; }
.rval { background: var(--surface); border: 1px solid var(--border); border-radius: 9px; padding: 12px; font-size: 13px; word-break: break-all; margin-bottom: 12px; min-height: 44px; }
.racts { display: flex; gap: 8px; flex-wrap: wrap; }
.rbtn { border: 1.5px solid var(--border-2); background: var(--surface); border-radius: 9px; padding: 8px 14px; font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; color: var(--text-1); }
.rbtn:hover { border-color: var(--accent-mid); color: var(--accent); }
.rbtn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.rbtn.primary:hover { background: var(--accent-hover); color: #fff; }
.rnote { margin-top: 12px; font-size: 12px; color: var(--text-3); line-height: 1.5; }

/* ═══ v7 — style packages, ball color, logo controls, modal, busy ═ */
.theme-row { display: flex; gap: 8px; flex-wrap: wrap; }
.theme-chip {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    border: 1.5px solid var(--border-2); border-radius: 11px; padding: 7px 9px 5px;
    background: var(--surface); cursor: pointer; transition: all .14s;
    font-family: inherit;
}
.theme-chip svg { width: 40px; height: 40px; border-radius: 7px; }
.theme-chip span { font-size: 10px; font-weight: 700; color: var(--text-2); }
.theme-chip:hover { border-color: var(--accent-mid); transform: translateY(-1px); }
.theme-chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-light); box-shadow: 0 0 0 3px var(--accent-glow); }
.theme-chip[aria-pressed="true"] span { color: var(--accent); }

.match-label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); font-weight: 600; cursor: pointer; }
.match-label input { accent-color: var(--accent); }

.more-btn { border-style: dashed !important; }
.more-icons-btn {
    margin-top: 8px; border: 1.5px dashed var(--border-2); background: var(--surface);
    border-radius: 9px; padding: 6px 13px; font-family: inherit; font-size: 12px;
    font-weight: 700; color: var(--accent); cursor: pointer;
}
.more-icons-btn:hover { border-color: var(--accent); background: var(--accent-light); }

/* icon catalog modal */
.icon-modal {
    position: fixed; inset: 0; z-index: 400; display: flex;
    align-items: center; justify-content: center;
    background: rgba(23,22,43,.45); backdrop-filter: blur(3px); padding: 20px;
}
.im-card {
    background: var(--surface); border-radius: 16px; width: 100%; max-width: 520px;
    max-height: 82vh; display: flex; flex-direction: column; padding: 18px;
    box-shadow: 0 30px 70px rgba(23,22,43,.3);
}
.im-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.im-head h3 { font-size: 15px; font-weight: 800; }
.im-close { border: none; background: var(--surface-2); border-radius: 8px; width: 30px; height: 30px; cursor: pointer; font-size: 13px; color: var(--text-2); }
.im-close:hover { background: var(--accent-light); color: var(--accent); }
.im-search {
    border: 1.5px solid var(--border-2); border-radius: 10px; padding: 9px 13px;
    font-family: inherit; font-size: 13px; margin-bottom: 12px;
}
.im-search:focus { outline: 2px solid var(--accent-glow); border-color: var(--accent); }
.im-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
    gap: 7px; overflow-y: auto; padding: 2px;
}
.im-icon {
    aspect-ratio: 1; border: 1.5px solid var(--border-2); border-radius: 10px;
    background: var(--surface); color: var(--text-1); cursor: pointer; padding: 9px;
    transition: all .12s;
}
.im-icon svg { width: 100%; height: 100%; }
.im-icon:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }
.im-skel { aspect-ratio: 1; border-radius: 10px; background: var(--surface-2); animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { opacity: .5; } }
.im-empty { grid-column: 1/-1; text-align: center; color: var(--text-3); font-size: 13px; padding: 20px; }
.im-license { font-size: 10.5px; color: var(--text-3); margin-top: 10px; text-align: center; }

/* preview busy overlay */
.qr-canvas-area { position: relative; }
.preview-busy {
    position: absolute; inset: 0; z-index: 5; display: flex;
    flex-direction: column; gap: 10px; align-items: center; justify-content: center;
    background: rgba(255,255,255,.82); border-radius: inherit;
    font-size: 12.5px; font-weight: 700; color: var(--text-2);
}
.pb-spin {
    width: 26px; height: 26px; border-radius: 50%;
    border: 3px solid var(--accent-light); border-top-color: var(--accent);
    animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ═══ v7.1 — style tabs, chip strip, accordion groups ════════════ */
.shuffle-btn {
    border: 1.5px dashed var(--accent); background: var(--accent-light); color: var(--accent);
    border-radius: 999px; padding: 5px 13px; font-family: inherit; font-size: 11.5px;
    font-weight: 800; cursor: pointer;
}
.shuffle-btn:hover { background: #e0e4fb; }
.cat-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 2px 0 9px; }
.cat-tab {
    border: 1.5px solid var(--border-2); background: var(--surface); border-radius: 999px;
    padding: 4px 12px; font-family: inherit; font-size: 11px; font-weight: 700;
    color: var(--text-2); cursor: pointer; transition: all .13s;
}
.cat-tab:hover { border-color: var(--accent); color: var(--accent); }
.cat-tab.on { background: var(--accent); border-color: var(--accent); color: #fff; }

.theme-row { display: flex; gap: 8px; overflow-x: auto; padding: 3px 2px 9px; scrollbar-width: thin; flex-wrap: nowrap; }

.opt-group { border: 1px solid var(--border); border-radius: 13px; margin-top: 10px; overflow: hidden; background: var(--surface); }
.opt-head {
    display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px 14px;
    background: var(--surface-2); border: none; font-family: inherit; font-size: 12.5px;
    font-weight: 800; color: var(--text-1); cursor: pointer; text-align: left;
}
.opt-head:hover .opt-title { color: var(--accent); }
.opt-head .chev { flex: none; transition: transform .2s; color: var(--text-3); }
.opt-group.open .opt-head .chev { transform: rotate(90deg); color: var(--accent); }
.opt-peek { margin-left: auto; font-size: 10px; font-weight: 600; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.opt-body { max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.opt-group.open .opt-body { max-height: 900px; }
.opt-inner { padding: 13px 14px; }
.opt-inner .field { margin-bottom: 12px; }
.opt-inner .field:last-child { margin-bottom: 0; }

/* ═══ v7.2 — ad slots + style group top ═════════════════════════ */
.ad-slot { display: flex; justify-content: center; margin: 22px 0; min-height: 0; }
/* A pending slot must still have a box: IntersectionObserver never fires for a
   display:none element, so hide-until-filled plus lazy-load would deadlock and
   nothing would ever load. 1px is invisible but observable. */
.ad-slot:not(.ad-filled) { min-height: 1px; margin: 0; }
.ad-slot.ad-filled { min-height: 90px; }
.ad-slot[hidden] { display: none !important; }

/* v7.9 — sticky rail beside the preview column. Hidden wherever the layout is
   already single-column: a skyscraper only earns its place next to the tool. */
.ad-rail { margin-top: 16px; }
@media (max-width: 1099px) { .ad-rail { display: none !important; } }
.ad-rail .ad-slot { margin: 0; }

/* Slot revealed after a code is made, a ZIP is built, or a code is read. */
.ad-result { margin: 14px 0 4px; }
.ad-result .ad-slot { margin: 0; }
.ad-label { display: block; font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
            color: var(--text-3, #9ca3af); text-align: center; margin-bottom: 5px; }

/* v9 — dismissible bottom bar, phones only. The body padding matters: an ad
   that covers the tool is worse than no ad, and Google treats obscuring
   content as a page-experience problem. */
/* The bar must sit in the viewport from the start or IntersectionObserver
   never fires for the slot inside it and it can never fill. So it is rendered
   in place but transparent and click-through until an ad actually arrives. */
.ad-anchor { opacity: 0; pointer-events: none; }
.ad-anchor.ad-ready { opacity: 1; pointer-events: auto; }
.ad-anchor { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
             display: flex; align-items: center; justify-content: center;
             background: var(--surface, #fff); border-top: 1px solid var(--border, #e5e7eb);
             padding: 4px 0; box-shadow: 0 -2px 10px rgba(16,24,40,.06); }
.ad-anchor .ad-slot { margin: 0; }
.ad-anchor-close { position: absolute; top: -13px; right: 8px; width: 26px; height: 26px;
                   border-radius: 50%; border: 1px solid var(--border, #e5e7eb);
                   background: var(--surface, #fff); color: var(--text-2, #4b5563);
                   font-size: 17px; line-height: 1; cursor: pointer; }
body.has-ad-anchor { padding-bottom: 62px; }
@media (min-width: 901px) { .ad-anchor { display: none; } body.has-ad-anchor { padding-bottom: 0; } }

/* In-article units on the blog. (.ad-native kept for a future native host —
   the first one we were offered is flagged by SmartScreen, see ads-loader.js.) */
.ad-inarticle, .ad-native { margin: 26px 0; }
.ad-inarticle .ad-slot, .ad-native .ad-slot { margin: 0; width: 100%; }
.ad-native .ad-slot iframe { width: 100%; }
.style-group-top { display: flex; justify-content: flex-end; margin-bottom: 8px; }

/* v7.3: self-hosted circle flags */
.lang-btn img, .dropdown-menu .dropdown-item img { border-radius: 50%; width: 18px; height: 18px; object-fit: cover; }

/* ═══ v7.4/v7.5: Barcode generator (components/barcode/) ═══
   Fluid two-column layout: the preview column shrinks with the viewport
   instead of holding a fixed 400px and forcing an early stack. Columns
   collapse to one only when the options column would get too cramped. */
.bc-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(280px, 32%, 380px);
    align-items: start;
}
.bc-left { padding: 24px 26px 26px; border-right: 1px solid var(--border); min-width: 0; }
[dir="rtl"] .bc-left { border-right: 0; border-left: 1px solid var(--border); }
.bc-preview { padding: 24px 22px; display: flex; flex-direction: column; gap: 14px;
    background: var(--surface-2); min-width: 0; align-self: stretch; }
.bc-sticky { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 860px) {
    .bc-grid { grid-template-columns: 1fr; }
    .bc-left, [dir="rtl"] .bc-left { border-right: 0; border-left: 0; border-bottom: 1px solid var(--border); }
    .bc-sticky { position: static; }
    /* options-first stacking, matching the QR generator's mobile order */
}
.bc-input { width: 100%; max-width: 100%; border: 1.5px solid var(--border-2);
    border-radius: var(--radius-sm); padding: 11px 13px;
    font: 600 15px 'Plus Jakarta Sans', sans-serif; letter-spacing: .4px;
    color: var(--text-1); outline: none; }
.bc-input:focus { border-color: var(--accent-mid); box-shadow: 0 0 0 3px var(--accent-dim); }
.fld { display: block; font-size: 12px; font-weight: 700; color: var(--text-2); margin: 0 0 6px; }
.check-chip { display: none; align-items: center; gap: 6px; margin-top: 10px;
    font-size: 12.5px; font-weight: 700; border-radius: 8px; padding: 7px 11px; }
.check-chip.ok  { display: inline-flex; color: var(--success); background: var(--success-dim); }
.check-chip.err { display: inline-flex; color: var(--danger-clr); background: rgba(220,38,38,.08); }
.opt-block { margin-top: 20px; padding-top: 17px; border-top: 1px solid var(--border); }
.opt-block h2, .opt-block h3 { font-size: 12px; font-weight: 800; letter-spacing: .6px; color: var(--text-3);
    text-transform: uppercase; margin: 0 0 12px; }
.pills { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 18px; }
.presets { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 9px; }
.preset { border: 1.5px solid var(--border); background: var(--surface); border-radius: 10px;
    padding: 10px; cursor: pointer; text-align: left; transition: .12s; font-family: inherit; min-width: 0; }
[dir="rtl"] .preset { text-align: right; }
.preset:hover { border-color: var(--accent-mid); }
.preset.active { border-color: var(--accent); background: var(--accent-dim); }
.preset b { display: block; font-size: 12px; color: var(--text-1); margin-bottom: 2px; }
.preset span { font-size: 10.5px; color: var(--text-3); line-height: 1.35; display: block; }
.color-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.color-fld { min-width: 0; }
.color-fld label { display: block; font-size: 11.5px; font-weight: 700; color: var(--text-2); margin-bottom: 5px; }
.color-wrap { display: flex; align-items: center; gap: 9px; border: 1.5px solid var(--border-2);
    border-radius: var(--radius-sm); padding: 6px 9px; background: var(--surface); min-width: 0; }
.color-wrap input[type=color] { width: 34px; height: 28px; border: 0; padding: 0; background: none;
    cursor: pointer; border-radius: 6px; flex: none; }
.color-hex { font: 700 12px 'Plus Jakarta Sans', sans-serif; color: var(--text-2);
    letter-spacing: .3px; overflow: hidden; text-overflow: ellipsis; }
.swatches { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; margin-top: 11px; }
.swatches .hint { margin: 0 4px 0 0; }
.swatch { width: 30px; height: 30px; border-radius: 9px; border: 2px solid transparent;
    cursor: pointer; padding: 0; transition: .12s; flex: none; }
.swatch:hover { border-color: var(--accent-mid); }
.safety { margin-top: 12px; border-radius: 10px; padding: 11px 13px; font-size: 12px;
    font-weight: 600; line-height: 1.6; overflow-wrap: anywhere; }
.safety.ok   { background: var(--success-dim); color: var(--success); }
.safety.warn { background: var(--warning-dim); color: var(--warning-clr); }
.safety.bad  { background: rgba(220,38,38,.08); color: var(--danger-clr); }
.safety div + div { margin-top: 5px; }
.slider-row { display: flex; align-items: center; gap: 12px; margin-bottom: 11px; }
.slider-row label { font-size: 12.5px; font-weight: 700; color: var(--text-2); width: 64px; flex: none; }
.slider-row input[type=range] { flex: 1; min-width: 0; accent-color: var(--accent); }
.slider-val { font-size: 12px; font-weight: 700; color: var(--text-3); width: 48px;
    text-align: right; flex: none; }
.toggle-row { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; font-weight: 600;
    color: var(--text-2); margin-bottom: 10px; line-height: 1.45; }
.toggle-row input { accent-color: var(--accent); width: 16px; height: 16px; flex: none; margin-top: 2px; }
.preview-box { border: 1px solid var(--border); border-radius: var(--radius); min-height: 200px;
    display: grid; place-items: center; padding: 16px; box-shadow: var(--shadow); background: #fff; }
.preview-box.transparent-bg { background:
    linear-gradient(45deg,#ececf3 25%,transparent 25%,transparent 75%,#ececf3 75%),
    linear-gradient(45deg,#ececf3 25%,#fff 25%,#fff 75%,#ececf3 75%);
    background-size: 16px 16px; background-position: 0 0, 8px 8px; }
.preview-box svg { max-width: 100%; height: auto; }
.preview-empty { color: var(--text-3); font-size: 13px; font-weight: 600; text-align: center; line-height: 1.6; }
.stats { display: flex; gap: 8px; flex-wrap: wrap; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
    padding: 7px 10px; font-size: 11.5px; font-weight: 700; color: var(--text-2); }
.stat b { color: var(--text-1); }
.dl-row { display: flex; gap: 9px; flex-wrap: wrap; }
.btn-bc { flex: 1 1 130px; border: 0; border-radius: var(--radius-sm); padding: 12px 8px;
    font: 800 13px 'Plus Jakarta Sans', sans-serif; cursor: pointer; transition: .12s; }
.btn-bc-primary { background: var(--accent); color: #fff; }
.btn-bc-primary:hover { background: var(--accent-mid); }
.btn-bc-ghost { background: var(--surface); color: var(--accent); border: 1.5px solid var(--accent-light); }
.btn-bc-ghost:hover { border-color: var(--accent-mid); }
.btn-bc:disabled { opacity: .45; cursor: not-allowed; }
#shareChip { display: none; font-size: 11.5px; font-weight: 700; color: var(--success);
    background: var(--success-dim); border-radius: 7px; padding: 6px 10px; text-align: center; }

/* v7.5: 4-way tool switch — wrap into two rows on narrow screens instead of
   overflowing the viewport (4 pills don't fit a 390px phone in one line). */
@media (max-width: 620px) {
    .seg { flex-wrap: wrap; justify-content: center; border-radius: 22px; }
    .seg-btn { padding-left: 12px; padding-right: 12px; font-size: 12.5px; }
    .seg-btn svg { width: 14px; height: 14px; }
}

/* v7.5: seven nav items (four tools) no longer fit one phone row — allow the
   list to wrap, keep each multi-word label intact, and centre the rows. */
.nav-links { flex-wrap: wrap; }
.nav-links a { white-space: nowrap; }
@media (max-width: 720px) {
    .nav-links { justify-content: center; gap: 2px 6px; }
    .nav-links a { font-size: 12.5px; padding-left: 8px; padding-right: 8px; }
}

/* ═══ v7.5: responsive hardening ═══
   Grid/flex children default to min-width:auto and refuse to shrink below their
   content, which pushed the qrgen options column past its track and got clipped
   by .tool-card's overflow:hidden on very narrow phones (≤360px). */
.tool-grid > *, .bc-grid > *, .scan-grid > * { min-width: 0; }
.tool-left, .tool-right, .bc-left, .bc-preview { min-width: 0; }
.tool-left input, .tool-left select, .tool-left textarea,
.bc-left input, .bc-left select, .bc-left textarea { max-width: 100%; }

@media (max-width: 420px) {
    .tool-left, .tool-right { padding-left: 16px; padding-right: 16px; }
    .bc-left { padding-left: 16px; padding-right: 16px; }
    .bc-preview { padding-left: 14px; padding-right: 14px; }
    .container { padding-left: 14px; padding-right: 14px; }
}
/* long user-supplied strings (URLs, decoded payloads) must never widen a column */
.rv, .scan-result .rv, #rVal { overflow-wrap: anywhere; word-break: break-word; }

/* ═══ v7.6: bulk scan results ═══════════════════════════════════════════════
   Appears only once more than one code has been found. Sits below the scan
   card's two columns and spans the full width. */
.bs-panel { border-top: 1px solid var(--border); padding: 20px 24px 22px; background: var(--surface); }
.bs-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bs-title { font-size: 13px; font-weight: 800; letter-spacing: .3px; color: var(--text-1); }
.bs-count { font-size: 12px; font-weight: 700; color: var(--text-2); margin-left: 8px; }
[dir="rtl"] .bs-count { margin-left: 0; margin-right: 8px; }
.bs-head-acts { display: flex; gap: 12px; }
.bs-link { border: 0; background: none; color: var(--accent); font: 700 12.5px 'Plus Jakarta Sans', sans-serif;
    cursor: pointer; padding: 4px 2px; }
.bs-link:hover { text-decoration: underline; }

.bs-progress { margin-top: 12px; }
.bs-progress-label { font-size: 12px; font-weight: 700; color: var(--text-2); margin-bottom: 6px; }
.bs-bar { height: 7px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.bs-bar i { display: block; height: 100%; width: 0; border-radius: 99px;
    background: linear-gradient(90deg, var(--accent), var(--accent-mid)); transition: width .18s ease; }

.bs-opts { display: flex; gap: 16px; flex-wrap: wrap; margin: 13px 0 4px;
    font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.bs-opts label { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.bs-opts input { accent-color: var(--accent); width: 15px; height: 15px; }

.bs-table-wrap { margin-top: 10px; max-height: 340px; overflow: auto; border: 1px solid var(--border);
    border-radius: var(--radius-sm); }
.bs-table { width: 100%; border-collapse: collapse; }
.bs-table th { position: sticky; top: 0; background: var(--surface-2); text-align: left;
    font-size: 10px; letter-spacing: .5px; text-transform: uppercase; color: var(--text-3);
    font-weight: 800; padding: 8px 10px; border-bottom: 1px solid var(--border); z-index: 1; }
[dir="rtl"] .bs-table th { text-align: right; }
.bs-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); font-size: 12.5px;
    vertical-align: top; }
.bs-table tr:last-child td { border-bottom: 0; }
.bs-file { color: var(--text-2); max-width: 190px; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; font-weight: 600; }
.bs-val { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px;
    overflow-wrap: anywhere; word-break: break-word; color: var(--text-1); }
.bs-pill { display: inline-block; font-size: 9.5px; font-weight: 800; letter-spacing: .3px;
    border-radius: 4px; padding: 2px 6px; white-space: nowrap; }
.bs-pill.p-ok  { background: var(--accent-dim); color: var(--accent); }
.bs-pill.p-dup { background: var(--surface-3); color: var(--text-3); }
.bs-pill.p-err { background: rgba(220,38,38,.08); color: var(--danger-clr); }
.bs-empty { font-size: 12.5px; color: var(--text-3); text-align: center; padding: 18px 10px; margin: 0; }

.bs-exports { display: flex; gap: 9px; margin-top: 14px; flex-wrap: wrap; }
.bs-btn { flex: 1 1 130px; border-radius: var(--radius-sm); padding: 11px 10px; cursor: pointer;
    font: 800 12.5px 'Plus Jakarta Sans', sans-serif;
    border: 1.5px solid var(--accent-light); background: var(--surface); color: var(--accent); }
.bs-btn:hover { border-color: var(--accent-mid); }
.bs-btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.bs-btn.primary:hover { background: var(--accent-mid); }

.bs-folder-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
    margin-top: 9px; border: 1.5px dashed var(--border-2); background: var(--surface);
    color: var(--text-2); border-radius: var(--radius-sm); padding: 9px;
    font: 700 12.5px 'Plus Jakarta Sans', sans-serif; cursor: pointer; }
.bs-folder-btn:hover { border-color: var(--accent-mid); color: var(--accent); }

@media (max-width: 620px) {
    .bs-panel { padding: 16px 14px 18px; }
    .bs-file { max-width: 92px; }
    .bs-table-wrap { max-height: 260px; }
}

/* ═══ v7.7: batch generators ═══════════════════════════════════════════════ */
.bg-grid { display: grid; grid-template-columns: minmax(0,1fr) clamp(300px, 34%, 400px); align-items: start; }
.bg-left { padding: 24px 26px 26px; border-right: 1px solid var(--border); min-width: 0; }
[dir="rtl"] .bg-left { border-right: 0; border-left: 1px solid var(--border); }
.bg-right { padding: 24px 22px; background: var(--surface-2); min-width: 0; align-self: stretch; }
@media (max-width: 880px) {
    .bg-grid { grid-template-columns: 1fr; }
    .bg-left, [dir="rtl"] .bg-left { border-right: 0; border-left: 0; border-bottom: 1px solid var(--border); }
}
.bg-lbl { font-size: 12px; font-weight: 800; letter-spacing: .4px; color: var(--text-2); margin: 0 0 11px; }
.types { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.ty { border: 1.5px solid var(--border-2); background: var(--surface); border-radius: 999px; padding: 6px 12px;
    font: 700 11.5px 'Plus Jakarta Sans', sans-serif; color: var(--text-2); cursor: pointer; transition: .12s; }
.ty:hover { border-color: var(--accent-mid); color: var(--text-1); }
.ty.on { background: var(--accent); border-color: var(--accent); color: #fff; }

.bg-tpl { display: flex; gap: 12px; align-items: center; background: var(--accent-dim);
    border: 1px solid var(--accent-light); border-radius: var(--radius); padding: 12px 14px; flex-wrap: wrap; }
.bg-tpl-ic { width: 36px; height: 36px; border-radius: 9px; background: var(--surface); border: 1px solid var(--border);
    display: grid; place-items: center; font: 800 9.5px 'Plus Jakarta Sans', sans-serif; color: var(--accent); flex: none; }
.bg-tpl div { min-width: 0; flex: 1; }
.bg-tpl b { display: block; font-size: 12.5px; }
.bg-tpl span { font-size: 11.5px; color: var(--text-2); overflow-wrap: anywhere; }
.bg-tpl button { border: 0; background: var(--accent); color: #fff; border-radius: 7px; padding: 9px 13px;
    font: 800 11.5px 'Plus Jakarta Sans', sans-serif; cursor: pointer; flex: none; }
.bg-tpl button:hover { background: var(--accent-mid); }

.bg-drop { margin-top: 13px; border: 2px dashed var(--accent-mid); background: var(--accent-dim);
    border-radius: var(--radius); padding: 22px 16px; text-align: center; cursor: pointer; transition: .12s; }
.bg-drop.dragover { background: var(--accent-light); }
.bg-drop svg { width: 22px; height: 22px; color: var(--accent); }
.bg-drop b { display: block; font-size: 13.5px; margin: 7px 0 3px; }
.bg-drop span { font-size: 12px; color: var(--text-2); }
.bg-paste-wrap { margin-top: 11px; }
.bg-paste-wrap summary { font-size: 12px; font-weight: 700; color: var(--accent); cursor: pointer; }
.bg-paste { width: 100%; margin-top: 8px; border: 1.5px solid var(--border-2); border-radius: var(--radius-sm);
    padding: 10px; font: 600 11.5px ui-monospace, monospace; resize: vertical; }

.bg-stats { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 14px; }
.bg-match { margin-top: 10px; border-radius: 9px; padding: 9px 12px; font-size: 12px; font-weight: 700; line-height: 1.5; }
.bg-match.ok { background: var(--success-dim); color: var(--success); }
.bg-match.warn { background: var(--warning-dim); color: var(--warning-clr); }
.bg-problems { margin-top: 10px; background: var(--warning-dim); color: var(--warning-clr); border-radius: 9px;
    padding: 11px 13px; font-size: 12px; line-height: 1.55; max-height: 190px; overflow: auto; }
.bg-prob { margin-top: 5px; font-weight: 600; }
.bg-rowno { font-weight: 800; }
.bg-problems code { background: rgba(0,0,0,.05); border-radius: 3px; padding: 0 4px; }

.bg-prev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bg-prev { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 7px; text-align: center; min-width: 0; }
.bg-prev canvas { width: 100%; height: auto; border-radius: 3px; display: block; }
.bg-prev small { display: block; font-size: 9px; color: var(--text-3); margin-top: 5px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bg-empty { font-size: 12px; color: var(--text-3); text-align: center; padding: 26px 8px; margin: 0; }

.bg-progress { margin-top: 14px; }
.bg-progress-label { font-size: 12px; font-weight: 700; color: var(--text-2); margin-bottom: 6px; }
.bg-bar { height: 7px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.bg-bar i { display: block; height: 100%; width: 0; border-radius: 99px;
    background: linear-gradient(90deg, var(--accent), var(--accent-mid)); transition: width .18s ease; }
.bg-done { margin-top: 11px; background: var(--success-dim); color: var(--success); border-radius: 9px;
    padding: 9px 12px; font-size: 12px; font-weight: 700; }
.bg-frame-text { flex: 1; min-width: 0; max-width: 140px; border: 1.5px solid var(--border-2);
    border-radius: 6px; padding: 5px 8px; font: 600 12px 'Plus Jakarta Sans', sans-serif; }

/* two-level tool switch */
.mode-tabs { display: flex; justify-content: center; gap: 22px; margin: 12px 0 0; }
.mode-tab { background: none; border: 0; padding: 5px 2px 9px; cursor: pointer; position: relative;
    font: 700 12.5px 'Plus Jakarta Sans', sans-serif; color: var(--text-3);
    display: inline-flex; align-items: center; gap: 7px; text-decoration: none; }
.mode-tab:hover { color: var(--text-2); }
.mode-tab.on { color: var(--accent); }
.mode-tab.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    border-radius: 2px; background: var(--accent); }
.mode-tab .pill { font-size: 9px; font-weight: 800; letter-spacing: .3px; background: var(--accent-dim);
    color: var(--accent); border-radius: 4px; padding: 2px 5px; }

/* v7.7: six doors, and grouped nav labels */
.doors { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .doors { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .doors { grid-template-columns: 1fr; } }
.door-badge { position: absolute; top: 14px; right: 14px; font-size: 9px; font-weight: 800;
    letter-spacing: .4px; color: #fff; background: var(--success); border-radius: 5px; padding: 2px 6px; }
[dir="rtl"] .door-badge { right: auto; left: 14px; }
.nav-group span { font-size: 9.5px; font-weight: 800; letter-spacing: .5px; color: var(--text-3);
    text-transform: uppercase; padding: 0 2px 0 8px; white-space: nowrap; }
[dir="rtl"] .nav-group span { padding: 0 8px 0 2px; }
.nav-sep { width: 1px; height: 14px; background: var(--border-2); margin: 0 6px; align-self: center; }
@media (max-width: 720px) { .nav-sep { display: none; } }

/* v7.7: with six tools the bar no longer fits beside the brand on most screens.
   Rather than let it wrap raggedly (brand, then nav, then the language button on
   three lines), give the links their own full-width row under a brand + language
   row. Two tidy rows instead of three uneven ones. */
.nav-links { gap: 0; }
.nav-links a { padding-left: 8px; padding-right: 8px; }
@media (max-width: 1500px) {
    .site-nav { flex-wrap: wrap; row-gap: 2px; }
    .site-nav .dropdown { margin-left: auto; }
    .nav-links { order: 3; flex-basis: 100%; margin-left: 0; justify-content: flex-start;
        padding-top: 4px; padding-bottom: 2px; }
}
@media (max-width: 720px) {
    .nav-links { justify-content: center; }
}


/* v8.0 — bulk-only readouts. The single tools show a live per-code meter; these
   report across the whole file instead, which is the only honest form when
   every row differs. */
.bq-worst, .bb-print { margin: 10px 0 0; padding: 9px 12px; border-radius: 10px;
    font: 500 12.5px/1.5 'Plus Jakarta Sans', system-ui, sans-serif; }
.bq-worst.ok, .bb-print.ok     { background: #ecfdf5; color: #065f46; }
.bq-worst.warn, .bb-print.warn { background: #fffbeb; color: #92400e; }
.bq-worst.bad, .bb-print.bad   { background: #fef2f2; color: #991b1b; }

.post-meta { margin: 4px 0 18px; font: 500 13px 'Plus Jakarta Sans', system-ui, sans-serif;
    color: var(--text-3, #9ca3af); }


/* ── v8.1 print-sheet composer ─────────────────────────────────────────────
   Sizes are in millimetres so the printed result is physically correct; the
   @page box itself is written by print-sheet.js when the paper size changes. */
.ps-panel { margin-top: 14px; }
.ps-controls { background: var(--surface-2, #f9fafb); border: 1px solid var(--border, #eef2f7);
    border-radius: 12px; padding: 14px; }
.ps-note { margin: 10px 0 0; font: 500 12.5px/1.5 'Plus Jakarta Sans', system-ui, sans-serif;
    color: var(--text-2, #4b5563); }
.ps-paper { margin-top: 14px; background: #f3f4f6; border-radius: 12px; padding: 12px;
    overflow: auto; }
.ps-sheet { display: grid; gap: var(--ps-gap, 6mm);
    grid-template-columns: repeat(var(--ps-cols, 4), var(--ps-size, 35mm));
    justify-content: center; background: #fff; padding: 10mm; margin: 0 auto;
    box-shadow: 0 1px 6px rgba(16,24,40,.10); }
.ps-cell { width: var(--ps-size, 35mm); display: flex; flex-direction: column;
    align-items: center; break-inside: avoid; page-break-inside: avoid; }
.ps-cell img { width: 100%; height: auto; display: block; }
.ps-sheet.ps-marks .ps-cell { outline: 1px dashed #c7cad1; outline-offset: 2mm; }
.ps-cap { margin-top: 1.5mm; font: 600 8pt/1.2 'Plus Jakarta Sans', system-ui, sans-serif;
    color: #111827; text-align: center; word-break: break-word; }
.ps-cell-empty { min-height: var(--ps-size, 35mm); }
.ps-break { break-before: page; page-break-before: always; }

@media print {
    /* Everything except the sheet is furniture. */
    body > *:not(main), header, footer, nav, .site-footer, .ad-slot, .ad-anchor,
    .ad-rail, .ad-result, .ps-controls, .bg-left, .tool-card > .bg-grid > *:not(.bg-right),
    #cc-banner { display: none !important; }
    .ps-paper { background: none; padding: 0; overflow: visible; }
    .ps-sheet { box-shadow: none; padding: 0; margin: 0; }
    .ps-panel, .ps-panel * { visibility: visible; }
    body { padding: 0 !important; background: #fff; }
    .ps-sheet.ps-marks .ps-cell { outline-color: #9ca3af; }
}

.brand-warning { margin: 0 0 8px; padding: 8px 11px; border-radius: 9px;
    background: #fffbeb; color: #92400e;
    font: 500 12.5px/1.5 'Plus Jakarta Sans', system-ui, sans-serif; }

/* v8.5 — end-of-article call to action. One link to the right tool, pre-filled,
   instead of a six-tool switcher that would have no active state to show. */
.blog-cta { margin: 30px 0 10px; }
.blog-cta-btn {
    display: inline-block; background: var(--accent); color: #fff; text-decoration: none;
    border-radius: 10px; padding: 12px 20px;
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: 14px; font-weight: 700;
    box-shadow: 0 4px 12px var(--accent-glow); transition: transform .12s, box-shadow .12s;
}
.blog-cta-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px var(--accent-glow); }

/* v8.5 — the full tool list lives in the footer now that the nav carries only
   Guides/About/Contact. Keeps a complete crawlable mesh on every page, and gives
   the blog and legal pages tool links they never had. */
.footer-tools { display: flex; flex-wrap: wrap; gap: 4px 2px; justify-content: center; margin-bottom: 6px; }
.footer-tools a {
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12.5px; font-weight: 500;
    color: var(--text-2); text-decoration: none; padding: 5px 10px; border-radius: 99px;
}
.footer-tools a:hover { background: var(--accent-dim); color: var(--text-1); }

/* v8.7 — long URLs inside <code> in an article push the page sideways on a
   phone. Wrap them instead: a horizontally scrolling article is a mobile
   usability failure, and reviewers treat it as one. */
.article-card code {
    background: var(--surface-2, #f3f4f6); border-radius: 5px; padding: 2px 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em;
    overflow-wrap: anywhere; word-break: break-word;
}
.article-card p > code:only-child {
    display: block; padding: 10px 12px; line-height: 1.7; margin: 2px 0;
}

/* v8.8 — article figures. Inline SVG with explicit width/height so nothing
   shifts as the page loads; no external images and no stock photography. */
.fig { margin: 24px 0; }
.fig svg { width: 100%; height: auto; display: block; border-radius: 10px;
    background: var(--surface-2, #f9fafb); border: 1px solid var(--border, #eef2f7); }
.fig figcaption { margin-top: 8px; font: 500 12.5px/1.6 'Plus Jakarta Sans', system-ui, sans-serif;
    color: var(--text-3, #9ca3af); text-align: center; }

/* v8.8 — one icon per article on the blog index. Muted on purpose: with nine
   cards the icons are a scanning aid, not decoration, and colour-matched glyphs
   across nine cards get noisy. */
.blog-card { position: relative; }
.blog-card-icon { position: absolute; top: 16px; right: 16px; width: 22px; height: 22px;
    color: var(--text-3, #9ca3af); opacity: .55; pointer-events: none; }
.blog-card-icon svg { width: 100%; height: 100%; display: block; }
.blog-card:hover .blog-card-icon { color: var(--accent); opacity: .9; }

.hub-api-line { max-width: 720px; margin: 26px auto 0; text-align: center;
    font: 400 13.5px/1.7 'Plus Jakarta Sans', system-ui, sans-serif; color: var(--text-2, #4b5563); }
.hub-api-line a { color: var(--accent); font-weight: 700; text-decoration: none; }
.hub-api-line a:hover { text-decoration: underline; }

/* v8.8 — long URLs written out as link text (Google's policy pages in the
   privacy policy) do not wrap on a 320px screen. Same fix as the article code
   blocks: break them rather than let the page scroll sideways. */
.page-card a, .page-card p, .page-card li { overflow-wrap: anywhere; }

/* ═══ v8.11 — reading experience ═══════════════════════════════════ */
/* Long-form measure and size. 15px in 720px was ~90+ chars per line; 17px in
   680px lands the measure at ~70. .post-meta re-asserted below the generic
   paragraph rule on purpose (equal-specificity, later wins). */
.article-card { max-width: 680px; margin-left: auto; margin-right: auto; }
.article-card p, .article-card li { font-size: 17px; line-height: 1.7; }
.article-card .post-meta { font-size: 13px; line-height: 1.5; }
.article-card h2 { scroll-margin-top: 76px; }

/* Figures graduate from gray wells to first-class cards. */
.fig { background: var(--surface, #fff); border: 1px solid var(--border, #eef2f7);
    border-radius: 12px; padding: 18px; box-shadow: 0 1px 3px rgba(17,24,39,.06); }
.fig svg { background: transparent; border: 0; border-radius: 0; }
.fig figcaption { margin-top: 12px; font-size: 13px; }

/* "On this page" anchor nav under the lede. */
.article-toc { border: 1px solid var(--border, #eef2f7); background: var(--surface-2, #fafafe);
    border-radius: 12px; padding: 13px 18px; margin: 18px 0 6px; }
.article-toc b { display: block; font: 800 10.5px/1 'Plus Jakarta Sans', system-ui, sans-serif;
    text-transform: uppercase; letter-spacing: .08em; color: var(--text-3, #9ca3af); margin-bottom: 8px; }
.article-toc a { display: inline-block; color: var(--accent); text-decoration: none;
    font: 600 14px/1.5 'Plus Jakarta Sans', system-ui, sans-serif; margin: 1px 14px 1px 0; }
.article-toc a:hover { text-decoration: underline; }

/* Closing CTA panel — replaces the lone button. */
.blog-cta-panel { display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    background: linear-gradient(120deg, var(--accent-light, #f4f3fe), #faf5ff);
    border: 1px solid #dcd9f6; border-radius: 14px; padding: 20px 22px; margin: 30px 0 8px; }
.blog-cta-panel .blog-cta-tagline { flex: 1; min-width: 220px;
    font: 600 15px/1.5 'Plus Jakarta Sans', system-ui, sans-serif; color: var(--text-2, #4b5563); margin: 0; }
.blog-cta-panel .blog-cta-btn { margin: 0; white-space: nowrap; }
.blog-cta { margin: 0; }

/* "Keep reading" pair at the end of every article. */
.keep-reading { margin: 24px 0 4px; }
.keep-reading > b { display: block; font: 800 10.5px/1 'Plus Jakarta Sans', system-ui, sans-serif;
    text-transform: uppercase; letter-spacing: .08em; color: var(--text-3, #9ca3af); margin-bottom: 10px; }
.keep-reading .kr-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .keep-reading .kr-row { grid-template-columns: 1fr; } }
.keep-reading a { display: block; background: var(--surface, #fff); border: 1px solid var(--border, #eef2f7);
    border-radius: 12px; padding: 13px 16px; text-decoration: none; transition: border-color .15s; }
.keep-reading a:hover { border-color: #b9b4ef; }
.keep-reading .kr-tag { font: 800 10px/1 'Plus Jakarta Sans', system-ui, sans-serif;
    text-transform: uppercase; letter-spacing: .06em; color: var(--accent); }
.keep-reading .kr-title { display: block; font: 700 14.5px/1.4 'Plus Jakarta Sans', system-ui, sans-serif;
    color: var(--text-1, #111827); margin-top: 4px; }

/* Reading progress bar (created by blog-ui.js on article pages only). */
#readProgress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 60;
    background: linear-gradient(90deg, var(--accent), #7c3aed); }
@media (prefers-reduced-motion: reduce) { #readProgress { display: none; } }

/* Blog index: icons at full brand strength (were 55% gray), featured card. */
.blog-card-icon { color: var(--accent); opacity: .85; }
.blog-card-featured { grid-column: 1 / -1; display: flex; gap: 24px; align-items: center;
    background: linear-gradient(120deg, var(--accent-light, #f4f3fe), var(--surface, #fff));
    border-color: #dcd9f6; }
@media (max-width: 640px) { .blog-card-featured { flex-direction: column; align-items: flex-start; gap: 12px; } }
.blog-card-featured .bcf-icon { flex: 0 0 76px; height: 76px; border-radius: 18px;
    background: var(--accent); display: flex; align-items: center; justify-content: center; }
.blog-card-featured .bcf-icon svg { width: 40px; height: 40px; color: #fff; }
.blog-card-featured h2 { font-size: 21px; }
.blog-card-featured p { font-size: 14.5px; max-width: 560px; }
.blog-badge { display: inline-block; font: 800 10px/1 'Plus Jakarta Sans', system-ui, sans-serif;
    text-transform: uppercase; letter-spacing: .07em; color: #fff; background: var(--accent);
    border-radius: 99px; padding: 4px 11px; margin-bottom: 10px; }

/* Tool pages: "How it works" prose section, styled like the FAQ block. */
.tool-how { margin: 34px 0 6px; }
.tool-how p { font-size: 15px; line-height: 1.65; color: var(--text-2, #4b5563);
    max-width: 720px; margin: 0 0 12px; }
.blog-card-featured .bcf-body { min-width: 0; }