/* ==========================================================================
   QR Essentials — app layer on top of the TenX design system (tenx.css).
   Monochrome, calm, and built for one-handed use on phones.
   ========================================================================== */

:root {
    --qe-rail: 15.5rem;
    --qe-tabbar: 4.25rem;
    --qe-gutter: var(--tx-space-4);
}

html, body { min-height: 100%; }

body {
    overscroll-behavior-y: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
}

/* Text people may want to copy stays selectable. */
input, textarea, .qe-fields dd, .qe-raw pre, .qe-url, .qe-pre, .qe-mono { -webkit-user-select: text; user-select: text; }

h1:focus, h1:focus-visible { outline: none; }

a { color: inherit; }

.qe-mono { font-family: var(--tx-font-mono); font-size: 0.92em; letter-spacing: 0; }
.qe-pre { white-space: pre-wrap; }
.qe-url { font-family: var(--tx-font-mono); font-size: 0.88em; letter-spacing: 0; overflow-wrap: anywhere; }
.qe-danger-text { color: var(--tx-danger) !important; }

/* ---------- Shell ---------- */
.qe-app { min-height: 100vh; min-height: 100dvh; }

.qe-main {
    min-width: 0;
    padding-bottom: calc(var(--qe-tabbar) + var(--tx-inset-bottom) + var(--tx-space-8));
}

.qe-page {
    width: min(100%, 72rem);
    margin: 0 auto;
    /* Keep clear of the status bar and any cutout. */
    padding: calc(var(--tx-space-6) + var(--tx-inset-top)) calc(var(--qe-gutter) + var(--tx-inset-right))
             var(--tx-space-6) calc(var(--qe-gutter) + var(--tx-inset-left));
    display: grid;
    gap: var(--tx-space-6);
    align-content: start;
    animation: tx-fade-up var(--tx-duration-slow) var(--tx-ease);
}

.qe-rail { display: none; }

.qe-brand {
    display: flex;
    align-items: center;
    gap: var(--tx-space-3);
    padding: var(--tx-space-2);
    text-decoration: none;
    font-weight: 600;
    letter-spacing: var(--tx-tracking-tight);
}

.qe-brand__mark {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    flex: none;
    border-radius: 10px;
    background: var(--tx-accent);
    color: var(--tx-on-accent);
    font-size: 1.25rem;
}

.qe-brand__mark--lg { width: 3rem; height: 3rem; border-radius: 14px; font-size: 1.6rem; }

/* Bottom tab bar (phones) */
.qe-tabbar {
    position: fixed;
    z-index: 50;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: end;
    height: calc(var(--qe-tabbar) + var(--tx-inset-bottom));
    padding: 0 var(--tx-space-2) var(--tx-inset-bottom);
    background: color-mix(in srgb, var(--tx-bg) 84%, transparent);
    backdrop-filter: blur(18px) saturate(1.4);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    border-top: 1px solid var(--tx-border-subtle);
}

.qe-tab {
    display: grid;
    justify-items: center;
    gap: 3px;
    padding: 0.55rem 0 0.7rem;
    color: var(--tx-fg-subtle);
    text-decoration: none;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0;
    transition: color var(--tx-duration) var(--tx-ease);
}

.qe-tab__icon {
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 1.9rem;
    border-radius: var(--tx-radius-full);
    font-size: 1.3rem;
    transition: background-color var(--tx-duration) var(--tx-ease), transform var(--tx-duration) var(--tx-ease);
}

.qe-tab.active { color: var(--tx-fg); }
.qe-tab.active .qe-tab__icon { background: var(--tx-surface-active); }
.qe-tab:active .qe-tab__icon { transform: scale(0.92); }

.qe-tab--scan .qe-tab__icon {
    width: 3.6rem;
    height: 3.6rem;
    margin-top: -1.6rem;
    background: var(--tx-accent);
    color: var(--tx-on-accent);
    box-shadow: 0 0 0 5px var(--tx-bg), var(--tx-shadow-md);
    font-size: 1.55rem;
}

.qe-tab--scan.active .qe-tab__icon { background: var(--tx-accent); }
.qe-tab--scan .qe-tab__label { color: var(--tx-fg); }

.qe-app--scan .qe-tabbar { display: none; }

@media (max-width: 899px) {
    .tx-toaster { bottom: calc(var(--qe-tabbar) + var(--tx-inset-bottom) + var(--tx-space-3)); }
}

/* Desktop: side rail */
@media (min-width: 900px) {
    :root { --qe-gutter: var(--tx-space-10); }

    .qe-app { display: grid; grid-template-columns: var(--qe-rail) minmax(0, 1fr); }
    .qe-tabbar { display: none; }
    .qe-main { padding-bottom: var(--tx-space-12); }
    .qe-page { padding-top: calc(var(--tx-space-10) + var(--tx-inset-top)); gap: var(--tx-space-8); }

    .qe-rail {
        position: sticky;
        top: 0;
        height: 100vh;
        display: flex;
        flex-direction: column;
        gap: var(--tx-space-8);
        padding: var(--tx-space-6) var(--tx-space-4);
        border-right: 1px solid var(--tx-border-subtle);
        background: var(--tx-bg-subtle);
    }

    .qe-rail__nav { display: grid; gap: 2px; }

    .qe-rail__link {
        display: flex;
        align-items: center;
        gap: var(--tx-space-3);
        height: 2.5rem;
        padding: 0 var(--tx-space-3);
        border-radius: var(--tx-radius-sm);
        color: var(--tx-fg-muted);
        text-decoration: none;
        font-size: var(--tx-text-sm);
        font-weight: 500;
        transition: background-color var(--tx-duration-fast) var(--tx-ease), color var(--tx-duration-fast) var(--tx-ease);
    }

    .qe-rail__link .tx-icon { font-size: 1.15rem; }
    .qe-rail__link:hover { background: var(--tx-surface-hover); color: var(--tx-fg); }
    .qe-rail__link.active { background: var(--tx-surface); color: var(--tx-fg); box-shadow: var(--tx-shadow-xs), 0 0 0 1px var(--tx-border-subtle); }

    .qe-rail__foot {
        margin-top: auto;
        display: flex;
        gap: var(--tx-space-2);
        padding: var(--tx-space-3);
        color: var(--tx-fg-subtle);
        font-size: var(--tx-text-xs);
        line-height: var(--tx-leading-snug);
    }

    .qe-rail__foot .tx-icon { margin-top: 1px; }
}

/* ---------- Page header ---------- */
.qe-header {
    display: flex;
    align-items: center;
    gap: var(--tx-space-3);
    min-height: 2.5rem;
}

.qe-header__back { margin-left: calc(var(--tx-space-2) * -1); }
.qe-header__titles { display: grid; gap: 2px; min-width: 0; }
.qe-header__titles .tx-eyebrow { margin: 0; }

.qe-header__title {
    margin: 0;
    font-size: var(--tx-text-2xl);
    font-weight: 600;
    letter-spacing: var(--tx-tracking-tight);
    line-height: var(--tx-leading-tight);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qe-header__actions { margin-left: auto; display: flex; align-items: center; gap: var(--tx-space-1); flex: none; }

/* ---------- Sections, panels, empty states ---------- */
.qe-section { display: grid; gap: var(--tx-space-3); }
.qe-section__head { display: flex; align-items: center; justify-content: space-between; gap: var(--tx-space-3); }
.qe-section__title { margin: 0; font-size: var(--tx-text-md); font-weight: 600; letter-spacing: var(--tx-tracking-snug); }

.qe-panel {
    display: grid;
    gap: var(--tx-space-5);
    padding: var(--tx-space-5);
    background: var(--tx-surface);
    border: 1px solid var(--tx-border);
    border-radius: var(--tx-radius-xl);
}

.qe-panel--stack { gap: var(--tx-space-5); }

@media (min-width: 600px) {
    .qe-panel { padding: var(--tx-space-6); }
}

.qe-panel__head { display: grid; gap: 2px; min-width: 0; }

.qe-panel__title {
    display: flex;
    align-items: center;
    gap: var(--tx-space-2);
    margin: 0;
    font-size: var(--tx-text-lg);
    font-weight: 600;
    letter-spacing: var(--tx-tracking-tight);
}

.qe-panel__desc { margin: 0; font-size: var(--tx-text-sm); color: var(--tx-fg-muted); }

.qe-panel__toggle {
    all: unset;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tx-space-4);
    width: 100%;
    cursor: pointer;
    border-radius: var(--tx-radius-sm);
}

.qe-panel__toggle:focus-visible { outline: 2px solid var(--tx-ring); outline-offset: 4px; }
.qe-panel__chevron { font-size: 1.2rem; color: var(--tx-fg-subtle); transition: transform var(--tx-duration) var(--tx-ease); }
.qe-panel__toggle[aria-expanded="true"] .qe-panel__chevron { transform: rotate(180deg); }
.qe-panel__body { display: grid; gap: var(--tx-space-6); animation: tx-fade-up var(--tx-duration-slow) var(--tx-ease); }

.qe-empty {
    display: grid;
    justify-items: center;
    gap: var(--tx-space-2);
    padding: var(--tx-space-10) var(--tx-space-6);
    text-align: center;
    border: 1px dashed var(--tx-border-strong);
    border-radius: var(--tx-radius-xl);
}

.qe-empty__icon {
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    margin-bottom: var(--tx-space-2);
    border-radius: var(--tx-radius-full);
    background: var(--tx-surface-sunken);
    font-size: 1.4rem;
}

.qe-empty__title { margin: 0; font-weight: 600; }
.qe-empty__text { margin: 0 0 var(--tx-space-3); max-width: 26rem; color: var(--tx-fg-muted); font-size: var(--tx-text-sm); text-wrap: pretty; }
.qe-empty__text:last-child { margin-bottom: 0; }

.qe-none { margin: var(--tx-space-6) 0; text-align: center; color: var(--tx-fg-subtle); font-size: var(--tx-text-sm); }

/* ---------- QR code rendering ---------- */
.qe-code { display: block; width: 100%; line-height: 0; }
.qe-code svg { display: block; width: 100%; height: auto; }

.qe-code--transparent {
    background-color: #fff;
    background-image:
        linear-gradient(45deg, #e9e9e9 25%, transparent 25%, transparent 75%, #e9e9e9 75%),
        linear-gradient(45deg, #e9e9e9 25%, transparent 25%, transparent 75%, #e9e9e9 75%);
    background-size: 16px 16px;
    background-position: 0 0, 8px 8px;
}

.qe-code--empty {
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border: 1px dashed var(--tx-border-strong);
    border-radius: var(--tx-radius-lg);
    background: var(--tx-bg-subtle);
    line-height: var(--tx-leading-normal);
}

.qe-code__placeholder {
    display: grid;
    justify-items: center;
    gap: var(--tx-space-3);
    padding: var(--tx-space-6);
    max-width: 16rem;
    text-align: center;
    color: var(--tx-fg-subtle);
    font-size: var(--tx-text-sm);
    text-wrap: pretty;
}

.qe-code__placeholder .tx-icon { font-size: 2.5rem; opacity: 0.5; }

.qe-thumb {
    display: block;
    flex: none;
    width: 4.5rem;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--tx-radius-sm);
    background: #fff;
    box-shadow: 0 0 0 1px var(--tx-border-subtle);
}

.qe-thumb--sm { width: 2.75rem; border-radius: var(--tx-radius-xs); }

.qe-thumb__glyph {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    background: var(--tx-surface-sunken);
    color: var(--tx-fg-muted);
    font-size: 1.75rem;
}

/* ---------- Home ---------- */
.qe-hero { display: grid; gap: var(--tx-space-3); padding-top: var(--tx-space-2); }
.qe-hero .tx-eyebrow { margin: 0; }
.qe-hero .tx-lead { max-width: 34rem; }

.qe-hero__title {
    margin: 0;
    font-family: var(--tx-font-display);
    font-size: clamp(2.1rem, 7.5vw, 3.5rem);
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: -0.038em;
    text-wrap: balance;
}

.qe-launch { display: grid; gap: var(--tx-space-3); }

@media (min-width: 640px) {
    .qe-launch { grid-template-columns: 1fr 1fr; }
}

.qe-launch__card {
    display: flex;
    align-items: center;
    gap: var(--tx-space-4);
    padding: var(--tx-space-5);
    border: 1px solid var(--tx-border);
    border-radius: var(--tx-radius-xl);
    background: var(--tx-surface);
    text-decoration: none;
    box-shadow: var(--tx-shadow-xs);
    transition: transform var(--tx-duration) var(--tx-ease), box-shadow var(--tx-duration) var(--tx-ease), border-color var(--tx-duration) var(--tx-ease);
}

.qe-launch__card:hover { transform: translateY(-2px); box-shadow: var(--tx-shadow-md); border-color: var(--tx-border-strong); }
.qe-launch__card:active { transform: scale(0.985); }

.qe-launch__card--scan { background: var(--tx-accent); color: var(--tx-on-accent); border-color: var(--tx-accent); }
.qe-launch__card--scan:hover { border-color: var(--tx-accent); }

.qe-launch__icon {
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    flex: none;
    border-radius: var(--tx-radius-lg);
    background: var(--tx-surface-sunken);
    font-size: 1.5rem;
}

.qe-launch__card--scan .qe-launch__icon { background: color-mix(in srgb, var(--tx-on-accent) 14%, transparent); }

.qe-launch__text { display: grid; gap: 2px; flex: 1; min-width: 0; }
.qe-launch__text strong { font-size: var(--tx-text-lg); letter-spacing: var(--tx-tracking-tight); }
.qe-launch__text span { font-size: var(--tx-text-sm); opacity: 0.68; }
.qe-launch__arrow { font-size: 1.2rem; opacity: 0.5; transition: transform var(--tx-duration) var(--tx-ease), opacity var(--tx-duration) var(--tx-ease); }
.qe-launch__card:hover .qe-launch__arrow { transform: translateX(3px); opacity: 1; }

/* Quick create: a sideways scroller on phones, a grid on larger screens */
.qe-quick {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 7.25rem;
    gap: var(--tx-space-2);
    margin: 0 calc(var(--qe-gutter) * -1);
    padding: 2px var(--qe-gutter);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--qe-gutter);
    scrollbar-width: none;
}

.qe-quick::-webkit-scrollbar { display: none; }

.qe-quick__item {
    display: grid;
    align-content: start;
    gap: var(--tx-space-1);
    padding: var(--tx-space-4) var(--tx-space-3);
    border: 1px solid var(--tx-border);
    border-radius: var(--tx-radius-lg);
    background: var(--tx-surface);
    text-decoration: none;
    scroll-snap-align: start;
    transition: background-color var(--tx-duration-fast) var(--tx-ease), border-color var(--tx-duration-fast) var(--tx-ease), transform var(--tx-duration) var(--tx-ease);
}

.qe-quick__item:hover { border-color: var(--tx-border-strong); background: var(--tx-surface-hover); }
.qe-quick__item:active { transform: scale(0.97); }
.qe-quick__icon { font-size: 1.35rem; margin-bottom: var(--tx-space-2); }
.qe-quick__label { font-weight: 600; font-size: var(--tx-text-sm); }
.qe-quick__blurb { display: none; font-size: var(--tx-text-xs); color: var(--tx-fg-subtle); line-height: var(--tx-leading-snug); }

@media (min-width: 720px) {
    .qe-quick {
        grid-auto-flow: row;
        grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
        grid-auto-columns: auto;
        margin: 0;
        padding: 0;
        overflow: visible;
    }

    .qe-quick__blurb { display: block; }
}

/* Saved-code shelf */
.qe-shelf {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 8.5rem;
    gap: var(--tx-space-3);
    margin: 0 calc(var(--qe-gutter) * -1);
    padding: 2px var(--qe-gutter) var(--tx-space-2);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--qe-gutter);
    scrollbar-width: none;
}

.qe-shelf::-webkit-scrollbar { display: none; }

.qe-shelf__item {
    display: grid;
    gap: 2px;
    padding: var(--tx-space-3);
    border: 1px solid var(--tx-border);
    border-radius: var(--tx-radius-lg);
    background: var(--tx-surface);
    text-decoration: none;
    scroll-snap-align: start;
    transition: transform var(--tx-duration) var(--tx-ease), box-shadow var(--tx-duration) var(--tx-ease);
}

.qe-shelf__item:hover { transform: translateY(-2px); box-shadow: var(--tx-shadow-md); }
.qe-shelf__item .qe-thumb { width: 100%; margin-bottom: var(--tx-space-2); }
.qe-shelf__name { font-size: var(--tx-text-sm); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qe-shelf__meta { font-size: var(--tx-text-xs); color: var(--tx-fg-subtle); }

/* ---------- Lists ---------- */
.qe-list {
    display: grid;
    gap: 2px;
    padding: var(--tx-space-1);
    border: 1px solid var(--tx-border);
    border-radius: var(--tx-radius-lg);
    background: var(--tx-surface);
}

.qe-list-head { display: flex; align-items: center; justify-content: space-between; gap: var(--tx-space-3); margin-bottom: var(--tx-space-2); }

.qe-row {
    all: unset;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: var(--tx-space-3);
    width: 100%;
    padding: var(--tx-space-3);
    border-radius: var(--tx-radius-md);
    cursor: pointer;
    transition: background-color var(--tx-duration-fast) var(--tx-ease);
}

.qe-row:hover { background: var(--tx-surface-hover); }
.qe-row:active { background: var(--tx-surface-active); }
.qe-row:focus-visible { outline: 2px solid var(--tx-ring); outline-offset: -2px; }

.qe-row__icon {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    flex: none;
    border-radius: var(--tx-radius-md);
    background: var(--tx-surface-sunken);
    font-size: 1.15rem;
}

.qe-row__text { display: grid; gap: 1px; flex: 1; min-width: 0; }
.qe-row__title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qe-row__meta { font-size: var(--tx-text-xs); color: var(--tx-fg-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qe-row__chevron { color: var(--tx-fg-disabled); }

/* ---------- Create ---------- */
.qe-types {
    display: flex;
    gap: var(--tx-space-2);
    margin: 0 calc(var(--qe-gutter) * -1);
    padding: 3px var(--qe-gutter);
    overflow-x: auto;
    scrollbar-width: none;
}

.qe-types::-webkit-scrollbar { display: none; }

@container (min-width: 820px) {
    .qe-types { flex-wrap: wrap; margin: 0; padding: 3px 0; overflow: visible; }
}

.qe-type {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: var(--tx-space-2);
    flex: none;
    height: 2.5rem;
    padding: 0 var(--tx-space-4);
    border: 1px solid var(--tx-border);
    border-radius: var(--tx-radius-full);
    background: var(--tx-surface);
    color: var(--tx-fg-muted);
    font-size: var(--tx-text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--tx-duration) var(--tx-ease), color var(--tx-duration) var(--tx-ease), border-color var(--tx-duration) var(--tx-ease), transform var(--tx-duration-fast) var(--tx-ease);
}

.qe-type:hover { color: var(--tx-fg); border-color: var(--tx-border-strong); }
.qe-type:active { transform: scale(0.96); }
.qe-type:focus-visible { outline: 2px solid var(--tx-ring); outline-offset: 2px; }
.qe-type.is-selected { background: var(--tx-accent); border-color: var(--tx-accent); color: var(--tx-on-accent); }

.qe-create, .qe-detail { container-type: inline-size; }

.qe-create__grid {
    display: grid;
    gap: var(--tx-space-5);
    grid-template-areas: "content" "preview" "style";
}

.qe-create__content { grid-area: content; }
.qe-create__preview { grid-area: preview; display: grid; gap: var(--tx-space-4); align-content: start; }
.qe-create__style { grid-area: style; }

@container (min-width: 820px) {
    .qe-create__grid {
        grid-template-columns: minmax(0, 1fr) 22rem;
        grid-template-areas: "content preview" "style preview";
        align-items: start;
        gap: var(--tx-space-6);
    }

    .qe-create__preview { position: sticky; top: var(--tx-space-8); }
}

.qe-form { display: grid; gap: var(--tx-space-5); }
.qe-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--tx-space-4); }
.qe-form__tip { margin: calc(var(--tx-space-3) * -1) 0 0; }

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

.qe-preview {
    display: grid;
    gap: var(--tx-space-3);
    padding: var(--tx-space-5);
    border: 1px solid var(--tx-border);
    border-radius: var(--tx-radius-xl);
    background: var(--tx-surface);
    box-shadow: var(--tx-shadow-sm);
}

.qe-preview__code { width: min(100%, 18rem); margin: 0 auto; border-radius: var(--tx-radius-md); overflow: hidden; }
.qe-preview__code.qe-code--empty { border-radius: var(--tx-radius-lg); }

.qe-preview__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--tx-space-1) var(--tx-space-3);
    margin: 0;
    font-size: var(--tx-text-xs);
    color: var(--tx-fg-subtle);
}

.qe-preview__meta span + span::before { content: "·"; margin-right: var(--tx-space-3); }

.qe-preview__actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--tx-space-2); }
.qe-preview__actions .tx-btn, .qe-detail__exports .tx-btn { min-width: 0; padding-inline: var(--tx-space-2); }

/* ---------- Style editor ---------- */
.qe-style { display: grid; gap: var(--tx-space-8); }
.qe-style__group { display: grid; gap: var(--tx-space-3); min-width: 0; margin: 0; padding: 0; border: 0; }

.qe-style__legend {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: var(--tx-space-3);
    padding: 0;
    font-size: var(--tx-text-sm);
    font-weight: 600;
}

.qe-style__legend .tx-subtle { font-weight: 400; }
.qe-style__group > .tx-small { margin: 0; }
.qe-style__footer { display: flex; justify-content: flex-end; gap: var(--tx-space-2); margin-top: calc(var(--tx-space-4) * -1); }

.qe-swatches { display: flex; flex-wrap: wrap; gap: var(--tx-space-3); }

.qe-swatch {
    all: unset;
    position: relative;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--tx-radius-full);
    background: var(--_bg);
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.12);
    cursor: pointer;
    transition: transform var(--tx-duration-fast) var(--tx-ease), box-shadow var(--tx-duration) var(--tx-ease);
}

.qe-swatch::after {
    content: "";
    position: absolute;
    inset: 28%;
    border-radius: 3px;
    background: var(--_fg);
}

.qe-swatch:hover { transform: scale(1.06); }
.qe-swatch:focus-visible { outline: 2px solid var(--tx-ring); outline-offset: 3px; }
.qe-swatch.is-selected { box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.12), 0 0 0 2px var(--tx-bg), 0 0 0 4px var(--tx-fg); }

.qe-colors { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: var(--tx-space-3); }

.qe-color { display: grid; gap: var(--tx-space-2); min-width: 0; }
.qe-color.is-disabled { opacity: 0.45; }
.qe-color__label { font-size: var(--tx-text-xs); font-weight: 500; color: var(--tx-fg-muted); }

.qe-color__control {
    display: flex;
    align-items: center;
    gap: var(--tx-space-2);
    height: var(--tx-control-md);
    padding: 0 var(--tx-space-2) 0 5px;
    border: 1px solid var(--tx-border);
    border-radius: var(--tx-radius-md);
    background: var(--tx-surface);
    transition: border-color var(--tx-duration-fast) var(--tx-ease), box-shadow var(--tx-duration-fast) var(--tx-ease);
}

.qe-color__control:focus-within { border-color: var(--tx-fg); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tx-fg) 8%, transparent); }

.qe-color input[type="color"] {
    flex: none;
    width: 1.8rem;
    height: 1.8rem;
    padding: 0;
    border: 0;
    border-radius: var(--tx-radius-xs);
    background: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.qe-color input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.qe-color input[type="color"]::-webkit-color-swatch { border: 0; border-radius: var(--tx-radius-xs); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.14); }
.qe-color input[type="color"]::-moz-color-swatch { border: 0; border-radius: var(--tx-radius-xs); }

.qe-color__hex {
    flex: 1;
    width: 100%;
    min-width: 0;
    border: 0;
    background: none;
    color: var(--tx-fg);
    font-family: var(--tx-font-mono);
    font-size: var(--tx-text-sm);
    text-transform: uppercase;
    outline: none;
}

.qe-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--tx-space-2); }

.qe-option {
    all: unset;
    box-sizing: border-box;
    display: grid;
    justify-items: center;
    gap: var(--tx-space-2);
    padding: var(--tx-space-3) var(--tx-space-2);
    border: 1px solid var(--tx-border);
    border-radius: var(--tx-radius-md);
    background: var(--tx-surface);
    color: var(--tx-fg-muted);
    font-size: var(--tx-text-xs);
    font-weight: 500;
    cursor: pointer;
    transition: border-color var(--tx-duration) var(--tx-ease), box-shadow var(--tx-duration) var(--tx-ease), color var(--tx-duration) var(--tx-ease);
}

.qe-option:hover { border-color: var(--tx-border-strong); color: var(--tx-fg); }
.qe-option:focus-visible { outline: 2px solid var(--tx-ring); outline-offset: 2px; }
.qe-option.is-selected { border-color: var(--tx-fg); box-shadow: 0 0 0 1px var(--tx-fg); color: var(--tx-fg); }

.qe-option__preview { width: 3.25rem; border-radius: 4px; overflow: hidden; box-shadow: 0 0 0 1px var(--tx-border-subtle); }

/* Corner previews zoom into the top-left eye so the shape is legible. */
.qe-option__eye { display: block; width: 3.25rem; height: 3.25rem; overflow: hidden; border-radius: 4px; box-shadow: 0 0 0 1px var(--tx-border-subtle); background: #fff; }
.qe-option__preview--zoom { width: 7.5rem; box-shadow: none; transform: translate(-3%, -3%); }

.qe-segmented {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 4px;
    padding: 4px;
    border-radius: var(--tx-radius-md);
    background: var(--tx-surface-sunken);
}

.qe-segmented__item {
    all: unset;
    box-sizing: border-box;
    display: grid;
    justify-items: center;
    gap: 0;
    padding: var(--tx-space-2) var(--tx-space-1);
    border-radius: var(--tx-radius-sm);
    color: var(--tx-fg-muted);
    font-size: var(--tx-text-xs);
    cursor: pointer;
    transition: background-color var(--tx-duration) var(--tx-ease), color var(--tx-duration) var(--tx-ease), box-shadow var(--tx-duration) var(--tx-ease);
}

.qe-segmented__item strong { font-size: var(--tx-text-md); color: inherit; }
.qe-segmented__item:hover { color: var(--tx-fg); }
.qe-segmented__item:focus-visible { outline: 2px solid var(--tx-ring); outline-offset: 1px; }
.qe-segmented__item.is-selected { background: var(--tx-surface-raised); color: var(--tx-fg); box-shadow: var(--tx-shadow-sm); }

.qe-segmented--compact { flex: none; }
.qe-segmented--compact .qe-segmented__item { display: flex; align-items: center; gap: var(--tx-space-2); padding: var(--tx-space-2) var(--tx-space-3); font-size: var(--tx-text-sm); font-weight: 500; }

.qe-range { width: 100%; accent-color: var(--tx-accent); cursor: pointer; }

/* ---------- Content view (scan results, details) ---------- */
.qe-content { display: grid; gap: var(--tx-space-4); }

.qe-fields {
    display: grid;
    margin: 0;
    border: 1px solid var(--tx-border-subtle);
    border-radius: var(--tx-radius-md);
    background: var(--tx-bg-subtle);
}

.qe-field {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    gap: var(--tx-space-3);
    padding: var(--tx-space-3) var(--tx-space-4);
    border-top: 1px solid var(--tx-border-subtle);
}

.qe-field:first-child { border-top: 0; }
.qe-field dt { color: var(--tx-fg-subtle); font-size: var(--tx-text-sm); padding-top: 1px; }
.qe-field dd { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tx-space-2); margin: 0; min-width: 0; overflow-wrap: anywhere; }
.qe-field dd .tx-btn { margin: -0.4rem 0; }

@media (max-width: 420px) {
    .qe-field { grid-template-columns: 1fr; gap: 2px; }
}

.qe-actions { display: flex; flex-wrap: wrap; gap: var(--tx-space-2); }

.qe-raw summary { width: fit-content; font-size: var(--tx-text-sm); color: var(--tx-fg-subtle); cursor: pointer; }
.qe-raw summary:hover { color: var(--tx-fg); }
.qe-raw__body { display: grid; justify-items: start; gap: var(--tx-space-2); margin-top: var(--tx-space-3); }

.qe-raw pre {
    width: 100%;
    max-height: 12rem;
    margin: 0;
    padding: var(--tx-space-3);
    overflow: auto;
    border-radius: var(--tx-radius-sm);
    background: var(--tx-surface-sunken);
    font-family: var(--tx-font-mono);
    font-size: var(--tx-text-xs);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Scan result sheet */
.qe-sheet .tx-dialog__body { display: grid; gap: var(--tx-space-5); }
.qe-sheet .tx-dialog__footer { flex-wrap: wrap; }
.qe-sheet__delete { margin-right: auto; }

.qe-sheet__hero { display: flex; align-items: center; gap: var(--tx-space-4); }

.qe-sheet__icon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    flex: none;
    border-radius: var(--tx-radius-lg);
    background: var(--tx-accent);
    color: var(--tx-on-accent);
    font-size: 1.4rem;
}

.qe-sheet__heading { display: grid; gap: 2px; min-width: 0; }
.qe-sheet__title { margin: 0; font-size: var(--tx-text-lg); font-weight: 600; letter-spacing: var(--tx-tracking-tight); line-height: var(--tx-leading-snug); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.qe-sheet__summary { margin: 0; font-size: var(--tx-text-sm); color: var(--tx-fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Scanner ---------- */
.qe-scan {
    position: fixed;
    inset: 0;
    z-index: 60;
    overflow: hidden;
    background: #000;
    color: #fff;
}

@media (min-width: 900px) {
    .qe-scan { left: var(--qe-rail); }
}

.qe-scan__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.qe-scan--unavailable .qe-scan__video { display: none; }

.qe-scan__frame {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(68vmin, 20rem);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 28px;
    box-shadow: 0 0 0 100vmax rgb(0 0 0 / 0.5);
    animation: qe-frame-in var(--tx-duration-slow) var(--tx-ease);
}

.qe-scan__corner { position: absolute; width: 2.25rem; height: 2.25rem; border: 0 solid #fff; }
.qe-scan__corner--tl { top: 0; left: 0; border-top-width: 3px; border-left-width: 3px; border-top-left-radius: 28px; }
.qe-scan__corner--tr { top: 0; right: 0; border-top-width: 3px; border-right-width: 3px; border-top-right-radius: 28px; }
.qe-scan__corner--bl { bottom: 0; left: 0; border-bottom-width: 3px; border-left-width: 3px; border-bottom-left-radius: 28px; }
.qe-scan__corner--br { bottom: 0; right: 0; border-bottom-width: 3px; border-right-width: 3px; border-bottom-right-radius: 28px; }

.qe-scan__sweep {
    position: absolute;
    left: 12%;
    right: 12%;
    top: 12%;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.9), transparent);
    box-shadow: 0 0 12px rgb(255 255 255 / 0.6);
    animation: qe-sweep 2.6s var(--tx-ease-in-out) infinite alternate;
}

@keyframes qe-sweep { to { top: 88%; } }
@keyframes qe-frame-in { from { opacity: 0; transform: translate(-50%, -50%) scale(1.06); } }

.qe-scan__top {
    position: absolute;
    top: calc(var(--tx-inset-top) + var(--tx-space-3));
    left: var(--tx-space-3);
    right: var(--tx-space-3);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--tx-space-2);
}

.qe-scan__title { margin: 0; font-size: var(--tx-text-md); font-weight: 600; letter-spacing: var(--tx-tracking-snug); }
.qe-scan__top-actions { display: flex; justify-content: flex-end; gap: var(--tx-space-2); }

.qe-scan .qe-scan__btn {
    color: #fff;
    background: rgb(255 255 255 / 0.14);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.qe-scan .qe-scan__btn:hover { background: rgb(255 255 255 / 0.24); }
.qe-scan .qe-scan__btn.is-on { background: #fff; color: #0a0a0a; }

.qe-scan__bottom {
    position: absolute;
    left: var(--tx-space-4);
    right: var(--tx-space-4);
    bottom: calc(var(--tx-inset-bottom) + var(--tx-space-8));
    display: grid;
    justify-items: center;
    gap: var(--tx-space-4);
    text-align: center;
}

.qe-scan__hint {
    margin: 0;
    padding: var(--tx-space-2) var(--tx-space-4);
    border-radius: var(--tx-radius-full);
    background: rgb(0 0 0 / 0.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-size: var(--tx-text-sm);
    color: rgb(255 255 255 / 0.9);
}

.qe-scan__tools { display: flex; gap: var(--tx-space-2); }

.qe-scan .qe-scan__photo {
    height: var(--tx-control-lg);
    padding: 0 var(--tx-space-6);
    background: rgb(255 255 255 / 0.14);
    border-color: rgb(255 255 255 / 0.22);
    color: #fff;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    cursor: pointer;
}

.qe-scan .qe-scan__photo:hover { background: rgb(255 255 255 / 0.24); border-color: rgb(255 255 255 / 0.35); }
.qe-scan__photo:has(+ input:focus-visible) { outline: 2px solid #fff; outline-offset: 2px; }

.qe-scan__desktop-hint { margin: 0; font-size: var(--tx-text-xs); color: rgb(255 255 255 / 0.55); }

@media (pointer: coarse) {
    .qe-scan__desktop-hint { display: none; }
}

.qe-scan__status {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: var(--tx-space-3);
    font-size: var(--tx-text-sm);
    color: rgb(255 255 255 / 0.8);
    background: rgb(0 0 0 / 0.35);
}

.qe-scan__status--card { background: none; padding: var(--tx-space-4); }

.qe-scan__status--card > * { max-width: 22rem; }

.qe-scan__status-icon {
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: var(--tx-space-2);
    border-radius: var(--tx-radius-full);
    background: rgb(255 255 255 / 0.1);
    font-size: 1.5rem;
    color: #fff;
}

.qe-scan__status-title { margin: 0; font-size: var(--tx-text-lg); font-weight: 600; color: #fff; text-align: center; }
.qe-scan__status-text { margin: 0 0 var(--tx-space-3); text-align: center; text-wrap: pretty; }
.qe-scan__status-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--tx-space-2); }

.qe-scan__status-actions .tx-btn--primary { background: #fff; color: #0a0a0a; }
.qe-scan__status-actions .tx-btn--secondary { background: transparent; color: #fff; border-color: rgb(255 255 255 / 0.3); }

.qe-scan__drop {
    position: absolute;
    inset: var(--tx-space-4);
    display: none;
    place-content: center;
    justify-items: center;
    gap: var(--tx-space-3);
    border: 2px dashed rgb(255 255 255 / 0.6);
    border-radius: var(--tx-radius-xl);
    background: rgb(0 0 0 / 0.6);
    font-weight: 600;
    pointer-events: none;
}

.qe-scan__drop .tx-icon { font-size: 2rem; }
.qe-scan.is-dragging .qe-scan__drop { display: grid; }

/* ---------- Library ---------- */
.qe-library__tabs .tx-tabs__panel { display: grid; gap: var(--tx-space-4); }

.qe-chips { display: flex; flex-wrap: wrap; gap: var(--tx-space-2); }

.qe-chip {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 2rem;
    padding: 0 var(--tx-space-3);
    border: 1px solid var(--tx-border);
    border-radius: var(--tx-radius-full);
    background: var(--tx-surface);
    color: var(--tx-fg-muted);
    font-size: var(--tx-text-xs);
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--tx-duration) var(--tx-ease), color var(--tx-duration) var(--tx-ease), border-color var(--tx-duration) var(--tx-ease);
}

.qe-chip:hover { color: var(--tx-fg); border-color: var(--tx-border-strong); }
.qe-chip:focus-visible { outline: 2px solid var(--tx-ring); outline-offset: 2px; }
.qe-chip.is-selected { background: var(--tx-accent); border-color: var(--tx-accent); color: var(--tx-on-accent); }

.qe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--tx-space-3); }

.qe-card {
    position: relative;
    border: 1px solid var(--tx-border);
    border-radius: var(--tx-radius-lg);
    background: var(--tx-surface);
    transition: border-color var(--tx-duration) var(--tx-ease), box-shadow var(--tx-duration) var(--tx-ease), transform var(--tx-duration) var(--tx-ease);
}

.qe-card:hover { border-color: var(--tx-border-strong); box-shadow: var(--tx-shadow-md); transform: translateY(-1px); }

.qe-card__link {
    display: flex;
    align-items: center;
    gap: var(--tx-space-4);
    padding: var(--tx-space-3);
    padding-right: var(--tx-space-12);
    text-decoration: none;
    border-radius: inherit;
}

.qe-card__text { display: grid; gap: var(--tx-space-1); min-width: 0; }
.qe-card__name { font-weight: 600; letter-spacing: var(--tx-tracking-snug); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.qe-card__meta { display: flex; align-items: center; gap: 6px; font-size: var(--tx-text-xs); color: var(--tx-fg-subtle); }

.qe-star, .qe-fav {
    color: var(--tx-fg-disabled);
}

.qe-star {
    all: unset;
    position: absolute;
    top: var(--tx-space-2);
    right: var(--tx-space-2);
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--tx-radius-full);
    color: var(--tx-fg-disabled);
    font-size: 1.1rem;
    cursor: pointer;
    transition: color var(--tx-duration) var(--tx-ease), background-color var(--tx-duration) var(--tx-ease), transform var(--tx-duration-fast) var(--tx-ease);
}

.qe-star:hover { background: var(--tx-surface-hover); color: var(--tx-fg-muted); }
.qe-star:active { transform: scale(0.88); }
.qe-star:focus-visible { outline: 2px solid var(--tx-ring); }
.qe-star.is-on, .qe-fav.is-on { color: var(--tx-fg); }
.qe-star.is-on .tx-icon, .qe-fav.is-on .tx-icon { fill: currentColor; }

/* ---------- Code detail ---------- */
.qe-detail__grid { display: grid; gap: var(--tx-space-6); align-items: start; }

@container (min-width: 760px) {
    .qe-detail__grid { grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); gap: var(--tx-space-8); }
    .qe-detail__visual { position: sticky; top: var(--tx-space-8); }
}

.qe-detail__visual { display: grid; gap: var(--tx-space-4); }

.qe-detail__code {
    all: unset;
    box-sizing: border-box;
    display: grid;
    gap: var(--tx-space-3);
    width: 100%;
    max-width: 24rem;
    margin: 0 auto;
    padding: var(--tx-space-5);
    border: 1px solid var(--tx-border);
    border-radius: var(--tx-radius-xl);
    background: var(--tx-surface);
    box-shadow: var(--tx-shadow-sm);
    cursor: zoom-in;
    transition: box-shadow var(--tx-duration) var(--tx-ease), transform var(--tx-duration) var(--tx-ease);
}

.qe-detail__code:hover { box-shadow: var(--tx-shadow-md); }
.qe-detail__code:active { transform: scale(0.99); }
.qe-detail__code:focus-visible { outline: 2px solid var(--tx-ring); outline-offset: 3px; }
.qe-detail__code .qe-code { border-radius: var(--tx-radius-sm); overflow: hidden; }

.qe-detail__zoom { display: flex; align-items: center; justify-content: center; gap: var(--tx-space-2); font-size: var(--tx-text-xs); color: var(--tx-fg-subtle); }

.qe-detail__exports { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--tx-space-2); max-width: 24rem; width: 100%; margin: 0 auto; }

@container (max-width: 420px) {
    .qe-detail__exports { grid-template-columns: 1fr 1fr; }
}

.qe-detail__barcode {
    display: grid;
    justify-items: center;
    gap: var(--tx-space-3);
    padding: var(--tx-space-10) var(--tx-space-6);
    border: 1px solid var(--tx-border);
    border-radius: var(--tx-radius-xl);
    background: var(--tx-surface);
    text-align: center;
    overflow-wrap: anywhere;
}

.qe-detail__barcode > .tx-icon { font-size: 3rem; }
.qe-detail__info { display: grid; gap: var(--tx-space-3); min-width: 0; }
.qe-detail__stamp { margin: 0; padding: 0 var(--tx-space-2); font-size: var(--tx-text-xs); color: var(--tx-fg-subtle); }

/* Present mode: the code, big and bright, on white */
.qe-present {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    padding: var(--tx-space-6);
    background: #fff;
    color: #0a0a0a;
    animation: qe-present-in var(--tx-duration-slow) var(--tx-ease);
    cursor: zoom-out;
}

.qe-present__card { display: grid; justify-items: center; gap: var(--tx-space-4); width: min(100%, 76vh, 34rem); }
.qe-present__card .qe-code { border-radius: var(--tx-radius-md); overflow: hidden; }
.qe-present__name { margin: 0; font-size: var(--tx-text-xl); font-weight: 600; letter-spacing: var(--tx-tracking-tight); text-align: center; }
.qe-present__hint { margin: 0; font-size: var(--tx-text-sm); color: #737373; }

@keyframes qe-present-in { from { opacity: 0; transform: scale(0.98); } }

/* ---------- Settings ---------- */
.qe-settings { max-width: 44rem; }
.qe-group { display: grid; gap: var(--tx-space-3); }

.qe-group__title {
    margin: 0;
    padding: 0 var(--tx-space-1);
    font-size: var(--tx-text-xs);
    font-weight: 600;
    letter-spacing: var(--tx-tracking-wide);
    text-transform: uppercase;
    color: var(--tx-fg-subtle);
}

.qe-setting { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tx-space-4); }
.qe-setting__text { display: grid; gap: 2px; flex: 1; min-width: 10rem; }
.qe-setting__label { font-weight: 500; }
.qe-setting__desc { font-size: var(--tx-text-sm); color: var(--tx-fg-muted); }

.qe-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--tx-space-3); }
.qe-stats > div { display: grid; gap: 2px; padding: var(--tx-space-4); border-radius: var(--tx-radius-md); background: var(--tx-surface-sunken); }
.qe-stats strong { font-size: var(--tx-text-2xl); font-weight: 600; letter-spacing: var(--tx-tracking-tight); line-height: 1.1; }
.qe-stats span { font-size: var(--tx-text-sm); color: var(--tx-fg-muted); }

.qe-button-row { display: flex; flex-wrap: wrap; gap: var(--tx-space-2); }

.qe-about { display: flex; align-items: flex-start; gap: var(--tx-space-4); }
.qe-about p { margin: 0 0 var(--tx-space-1); }
.qe-about__name { font-weight: 600; }

/* ---------- Logo & frame controls ---------- */
.qe-style__row { display: grid; gap: var(--tx-space-2); }
.qe-style__label { display: flex; justify-content: space-between; font-size: var(--tx-text-sm); font-weight: 500; }
.qe-style__label .tx-subtle { font-weight: 400; }

.qe-logo { display: flex; align-items: center; gap: var(--tx-space-4); }

.qe-logo__preview {
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    flex: none;
    overflow: hidden;
    border-radius: var(--tx-radius-md);
    background: #fff;
    box-shadow: 0 0 0 1px var(--tx-border);
}

.qe-logo__preview img { width: 100%; height: 100%; object-fit: contain; }
.qe-logo__preview.is-empty { background: var(--tx-bg-subtle); box-shadow: none; border: 1px dashed var(--tx-border-strong); color: var(--tx-fg-subtle); font-size: 1.4rem; }

.qe-logo__actions { display: flex; flex-wrap: wrap; gap: var(--tx-space-2); }
.qe-logo__actions label.tx-btn { cursor: pointer; }
.qe-logo__actions label.tx-btn:has(+ input:focus-visible) { outline: 2px solid var(--tx-ring); outline-offset: 2px; }

.qe-option__frame { display: grid; place-items: center; width: 3.25rem; height: 4rem; }
.qe-option__frame .qe-code { width: 2.9rem; border-radius: 4px; overflow: hidden; box-shadow: 0 0 0 1px var(--tx-border-subtle); }

.qe-verified { display: flex; align-items: center; justify-content: center; gap: 4px; margin: calc(var(--tx-space-2) * -1) 0 0; font-size: var(--tx-text-xs); color: var(--tx-success); font-weight: 500; }

.qe-scan .qe-scan__photo--icon { width: var(--tx-control-lg); padding: 0; }

/* ---------- Cropper ---------- */
.qe-crop-dialog .tx-dialog__body { display: grid; gap: var(--tx-space-4); }
.qe-crop-dialog .tx-dialog__footer { flex-wrap: wrap; }
.qe-crop__reset { margin-right: auto; }

@media (max-width: 520px) {
    .qe-crop__reset { margin-right: 0; }
}

/* The stage clips the picture and shade; the selection and its handles sit above it unclipped,
   so corners stay easy to grab even when the selection fills the whole image. */
.qe-crop {
    position: relative;
    max-width: 100%;
    margin: var(--tx-space-3) auto;
    cursor: crosshair;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

.qe-crop__stage {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: var(--tx-radius-sm);
    background-color: #fff;
    background-image:
        linear-gradient(45deg, #e9e9e9 25%, transparent 25%, transparent 75%, #e9e9e9 75%),
        linear-gradient(45deg, #e9e9e9 25%, transparent 25%, transparent 75%, #e9e9e9 75%);
    background-size: 16px 16px;
    background-position: 0 0, 8px 8px;
}

.qe-crop__shade { position: absolute; box-shadow: 0 0 0 100vmax rgb(0 0 0 / 0.55); pointer-events: none; }

.qe-crop__image { display: block; width: 100%; height: 100%; object-fit: fill; pointer-events: none; }

.qe-crop__box {
    position: absolute;
    outline: 1.5px solid rgb(255 255 255 / 0.95);
    cursor: move;
    touch-action: none;
}

.qe-crop__box:focus-visible { outline: 2px solid #fff; box-shadow: inset 0 0 0 3px rgb(0 0 0 / 0.35); }

.qe-crop__grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--tx-duration) var(--tx-ease);
    background-image:
        linear-gradient(to right, transparent calc(33.33% - 0.5px), rgb(255 255 255 / 0.45) calc(33.33% - 0.5px), rgb(255 255 255 / 0.45) calc(33.33% + 0.5px), transparent calc(33.33% + 0.5px), transparent calc(66.66% - 0.5px), rgb(255 255 255 / 0.45) calc(66.66% - 0.5px), rgb(255 255 255 / 0.45) calc(66.66% + 0.5px), transparent calc(66.66% + 0.5px)),
        linear-gradient(to bottom, transparent calc(33.33% - 0.5px), rgb(255 255 255 / 0.45) calc(33.33% - 0.5px), rgb(255 255 255 / 0.45) calc(33.33% + 0.5px), transparent calc(33.33% + 0.5px), transparent calc(66.66% - 0.5px), rgb(255 255 255 / 0.45) calc(66.66% - 0.5px), rgb(255 255 255 / 0.45) calc(66.66% + 0.5px), transparent calc(66.66% + 0.5px));
}

.qe-crop.is-dragging .qe-crop__grid { opacity: 1; }

/* Generous invisible hit areas, with slim visible marks drawn by ::after. */
.qe-crop__handle { position: absolute; width: 2.25rem; height: 2.25rem; touch-action: none; }
.qe-crop__handle::after { content: ""; position: absolute; border: 0 solid #fff; filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.4)); }

.qe-crop__handle--nw { top: -1.125rem; left: -1.125rem; cursor: nwse-resize; }
.qe-crop__handle--ne { top: -1.125rem; right: -1.125rem; cursor: nesw-resize; }
.qe-crop__handle--sw { bottom: -1.125rem; left: -1.125rem; cursor: nesw-resize; }
.qe-crop__handle--se { bottom: -1.125rem; right: -1.125rem; cursor: nwse-resize; }

.qe-crop__handle--nw::after, .qe-crop__handle--ne::after, .qe-crop__handle--sw::after, .qe-crop__handle--se::after { width: 1rem; height: 1rem; }
.qe-crop__handle--nw::after { left: calc(50% - 2px); top: calc(50% - 2px); border-top-width: 4px; border-left-width: 4px; border-top-left-radius: 4px; }
.qe-crop__handle--ne::after { right: calc(50% - 2px); top: calc(50% - 2px); border-top-width: 4px; border-right-width: 4px; border-top-right-radius: 4px; }
.qe-crop__handle--sw::after { left: calc(50% - 2px); bottom: calc(50% - 2px); border-bottom-width: 4px; border-left-width: 4px; border-bottom-left-radius: 4px; }
.qe-crop__handle--se::after { right: calc(50% - 2px); bottom: calc(50% - 2px); border-bottom-width: 4px; border-right-width: 4px; border-bottom-right-radius: 4px; }

.qe-crop__handle--n, .qe-crop__handle--s { left: calc(50% - 1.125rem); cursor: ns-resize; }
.qe-crop__handle--e, .qe-crop__handle--w { top: calc(50% - 1.125rem); cursor: ew-resize; }
.qe-crop__handle--n { top: -1.125rem; }
.qe-crop__handle--s { bottom: -1.125rem; }
.qe-crop__handle--e { right: -1.125rem; }
.qe-crop__handle--w { left: -1.125rem; }

.qe-crop__handle--n::after, .qe-crop__handle--s::after { left: calc(50% - 0.75rem); top: calc(50% - 2px); width: 1.5rem; height: 4px; background: #fff; border-radius: 2px; }
.qe-crop__handle--e::after, .qe-crop__handle--w::after { top: calc(50% - 0.75rem); left: calc(50% - 2px); width: 4px; height: 1.5rem; background: #fff; border-radius: 2px; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .qe-scan__sweep { animation: none; top: 50%; opacity: 0.6; }
    .qe-page, .qe-panel__body, .qe-scan__frame, .qe-present { animation: none; }
}

/* ---------- Brand link ---------- */
.qe-tenx {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: var(--tx-space-2);
    margin-top: var(--tx-space-3);
    padding: var(--tx-space-2) var(--tx-space-4);
    border: 1px solid var(--tx-border);
    border-radius: var(--tx-radius-full);
    background: var(--tx-surface);
    color: var(--tx-fg);
    font-size: var(--tx-text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--tx-duration) var(--tx-ease), border-color var(--tx-duration) var(--tx-ease), transform var(--tx-duration-fast) var(--tx-ease);
}

.qe-tenx:hover { background: var(--tx-surface-hover); border-color: var(--tx-border-strong); }
.qe-tenx:active { transform: scale(0.98); }
.qe-tenx:focus-visible { outline: 2px solid var(--tx-ring); outline-offset: 2px; }
.qe-tenx__go { font-size: 0.9em; color: var(--tx-fg-subtle); }

/* ---------- Blazor plumbing ---------- */
#blazor-error-ui {
    color-scheme: light only;
    position: fixed;
    z-index: 3000;
    left: 0;
    bottom: 0;
    display: none;
    width: 100%;
    padding: 0.75rem 1.25rem calc(0.75rem + var(--tx-inset-bottom));
    background: var(--tx-danger-soft);
    color: var(--tx-danger);
    box-shadow: 0 -1px 2px rgb(0 0 0 / 0.2);
    font-size: var(--tx-text-sm);
}

#blazor-error-ui .dismiss { position: absolute; right: 0.75rem; top: 0.5rem; cursor: pointer; }

.blazor-error-boundary {
    padding: var(--tx-space-4);
    border-radius: var(--tx-radius-md);
    background: var(--tx-danger-soft);
    color: var(--tx-danger);
}

.blazor-error-boundary::after { content: "Something went wrong on this screen."; }

.status-bar-safe-area { display: none; }

@supports (-webkit-touch-callout: none) {
    .status-bar-safe-area {
        display: flex;
        position: sticky;
        top: 0;
        height: var(--tx-inset-top);
        background-color: var(--tx-bg);
        width: 100%;
        z-index: 55;
    }
}